npm - @salla.sa/twilight-components - Versions diffs - 2.13.47 → 2.13.48 - Mend

@salla.sa/twilight-components 2.13.47 → 2.13.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/dist/components/salla-comments.js CHANGED Viewed

@@ -27,6 +27,7 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
     this.blockTitle = undefined;
     this.hideTitle = undefined;
     this.type = CommentType.PAGE;
+    this.showFormAvatar = false;
     this.comments = undefined;
     this.pagination = undefined;
     this.total = undefined;
@@ -162,7 +163,7 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
   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 && h("salla-comment-form", { type: this.type, "item-id": this.itemId }), h("div", { class: "no-content-placeholder--comments" }, h("i", { class: "sicon-chat-bubbles text-5xl block mb-5 text-gray-400" }), h("p", { class: "text-sm" }, this.noComments))));
+      return (h("div", null, !!this.total && !this.hideTitle ? h("h2", { class: "s-comments-title" }, this.blockTitle ? this.blockTitle : this.comment_title) : '', !this.hideForm && h("salla-comment-form", { "show-avatar": this.showFormAvatar, type: this.type, "item-id": this.itemId }), h("div", { class: "no-content-placeholder--comments" }, h("i", { class: "sicon-chat-bubbles text-5xl block mb-5 text-gray-400" }), h("p", { class: "text-sm" }, this.noComments))));
     }
     return (h("div", { class: `s-comments s-comments-${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", { type: this.type, "item-id": this.itemId }), !!this.total && h("h2", { class: "s-comments-count-label", innerHTML: this.pluralize(this.comment_name, this.total) }), 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" }, 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" } })))))));
   }
@@ -178,6 +179,7 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
     "blockTitle": [1, "block-title"],
     "hideTitle": [4, "hide-title"],
     "type": [1],
+    "showFormAvatar": [4, "show-form-avatar"],
     "comments": [32],
     "pagination": [32],
     "total": [32],

package/dist/components/salla-comments.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-comments.js","mappings":"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","names":["SallaComments"],"sources":["src/components/salla-comments/interfaces.ts","src/components/salla-comments/salla-comments.scss?tag=salla-comments","src/components/salla-comments/salla-comments.tsx"],"sourcesContent":["export enum CommentType {\n PAGE= \"page\",\n PRODUCT = \"product\"\n}\n\nexport interface Comment {\n id?: number;\n avatar?: string;\n name?: string;\n has_order?: boolean;\n date?: string;\n rating?: number;\n content?: string;\n is_pending?: boolean;\n replies?: Comment[];\n customer?: Customer;\n type?: string;\n created_at?: CreatedAt;\n}\nexport interface CreatedAt {\n date?: Date;\n timezone_type?: number;\n timezone?: string;\n}\nexport interface UserComments {\n id?: number;\n type?: string;\n next_page?: string;\n comments?: Comment[];\n}\n\n// Pagination\nexport interface Pagination {\n count?: number;\n total?: number;\n perPage?: number;\n currentPage?: number;\n totalPages?: number;\n links?: Links;\n}\nexport interface Customer {\n id?: number;\n name?: string;\n mobile?: string;\n email?: string;\n avatar?: string;\n country?: string;\n city?: string;\n}\nexport interface Links {\n next?: string;\n}\n",":host {\n display: block;\n}\n","import { Component, Prop, State, Element, h } from '@stencil/core';\nimport { CommentType, UserComments, Pagination } from './interfaces';\nimport anime from 'animejs';\nimport Helper from '../../Helpers/Helper';\n@Component({\n tag: 'salla-comments',\n styleUrl: 'salla-comments.scss',\n})\nexport class SallaComments {\n\n constructor() {\n salla.lang.onLoaded(() => {\n this.comment_title = salla.lang.get('blocks.comments.title')\n this.comment_name = salla.lang.get('blocks.comments.comment')\n this.noComments = salla.lang.get('pages.rating.no_ratings')\n })\n }\n\n /*\n Page or product ID\n /\n @Prop() itemId!: number;\n\n /\n Load more text\n /\n @Prop() loadMoreText: string;\n\n /\n Load more text\n /\n @Prop() hideForm: boolean;\n\n /\n Block Title\n /\n @Prop() blockTitle: string;\n \n /\n Hide Title\n /\n @Prop() hideTitle: boolean;\n\n /\n Comment Type\n /\n @Prop() type: CommentType.PAGE \| CommentType.PRODUCT = CommentType.PAGE;\n\n @State() comments: UserComments[];\n @State() pagination: Pagination;\n @State() total: number;\n @State() showPlaceholder: boolean;\n @State() nextPage: string;\n\n private status: any;\n private btnLoader: any;\n private infiniteScroll: any;\n private wrapper: any;\n\n @Element() host: HTMLElement;\n\n // Translations\n @State() noComments: string = salla.lang.get('blocks.comments.no_comments');\n @State() comment_title = salla.lang.get('blocks.comments.title')\n @State() comment_name = salla.lang.get('blocks.comments.comment')\n @State() placeholder_text: string;\n\n // TOOD: it's a good idea to move this into lang.js\n // Pluralize a string based on the count\n private pluralize(phrases: string, count: number): string {\n const options = phrases.split('\|');\n\n const conditions = [\n { condition: count === 0, index: 0 },\n { condition: count === 1, index: 1 },\n { condition: count === 2, index: 2 },\n { condition: count > 2 && count <= 10, index: 3 },\n { condition: count >= 11, index: 4 }\n ];\n\n const { index } = conditions.find(({ condition }) => condition) \|\| { index: options.length - 1 };\n\n const selectedOption = options[index];\n return selectedOption.replace(':count', salla.helpers.number(count.toString()))\n .replace(/\\{[0-9]+\\}/g, '')\n .replace(/\\[\\d+,\\d+\\]\|\\[11,\\\\]/g, '');\n }\n\n\n\n // Initiate infinite scroll\n private initiateInfiniteScroll() {\n if (!this.wrapper) {\n console.error('Wrapper is undefined. Cannot initiate infinite scroll.');\n return;\n }\n\n this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {\n path: () => this.nextPage,\n history: true,\n nextPage: this.nextPage,\n scrollThreshold: false,\n }, true);\n\n this.infiniteScroll?.on('request', _response => {\n this.loading();\n });\n this.infiniteScroll?.on('load', response => {\n this.pagination = response.pagination;\n this.nextPage = typeof response.pagination.links == 'object' && !!response.pagination.links.next ? response.pagination.links.next : null;\n this.handleResponse(response).forEach(card => this.wrapper.append(card));\n\n let items = this.host.querySelectorAll('salla-comment-item:not(.animated):not(.s-comments-item-admin)');\n this.animateItems(items);\n this.loading(false);\n });\n this.infiniteScroll?.on('error', (e) => {\n salla.console.error('Error loading more comments:', e);\n });\n }\n\n // Show/hide loading\n private loading(isLoading = true) {\n let btnText = this.status?.querySelector('.s-button-text');\n if (btnText) {\n Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);\n this.btnLoader.style.display = isLoading ? 'inherit' : 'none';\n }\n }\n\n // Animate newly added items\n private animateItems(items) {\n anime({\n targets: items,\n opacity: [0, 1],\n duration: 1200,\n translateY: [20, 0],\n delay: function (_el, i) {\n return i * 100;\n },\n easing: 'easeOutExpo',\n complete: function (_anim) {\n items.forEach(item => {\n item.classList.add('animated');\n })\n }\n\n })\n }\n\n // Get comment item HTML\n private getCommentHTML(comment) {\n const commentItem = document.createElement('salla-comment-item') as HTMLSallaCommentItemElement;\n commentItem.comment = comment;\n\n return commentItem;\n }\n\n\n\n // Parse response and return an array of comment items to be appended to the wrapper\n private handleResponse(response): Array<HTMLElement> {\n return response.data?.map(comment => this.getCommentHTML(comment)) \|\| [];\n }\n\n\n\n // Load initial data\n private async loadInitialData() {\n this.loading();\n try {\n const resp = await (this.type == CommentType.PAGE\n ? salla.api.comment.getPageComments(this.itemId)\n : salla.api.comment.getProductComments(this.itemId));\n if (!resp.data \|\| !resp.data.length) {\n this.showPlaceholder = false;\n this.loading(false);\n return;\n }\n this.comments = resp.data;\n this.pagination = resp.pagination;\n this.total = resp.pagination.total;\n this.nextPage = typeof resp.pagination.links == 'object' && !!resp.pagination.links.next ? resp.pagination.links.next : null;\n\n\n setTimeout(() => {\n this.handleResponse(resp).forEach(card => this.wrapper.append(card));\n this.initiateInfiniteScroll(); // Initiate infinite scroll after the initial data is loaded\n let items = this.wrapper.querySelectorAll('salla-comment-item:not(.animated)');\n this.animateItems(items);\n }, 100);\n } catch (error) {\n console.error('Error loading initial data:', error);\n this.showPlaceholder = true;\n this.loading(false);\n }\n }\n\n // Get next page\n async loadMore() {\n this.infiniteScroll?.loadNextPage();\n }\n\n render() {\n // We should show a different placeholder for pages and products (WIP)\n if (this.showPlaceholder) {\n return (\n <div>\n {!!this.total && !this.hideTitle ? <h2 class=\"s-comments-title\">{this.blockTitle ? this.blockTitle : this.comment_title}</h2> : ''}\n {!this.hideForm && <salla-comment-form type={this.type} item-id={this.itemId}></salla-comment-form>}\n <div class=\"no-content-placeholder--comments\">\n <i class=\"sicon-chat-bubbles text-5xl block mb-5 text-gray-400\"></i>\n <p class=\"text-sm\">{this.noComments}</p>\n </div>\n </div>\n )\n }\n return (\n <div class={`s-comments s-comments-${this.type}`}>\n <div class={`${this.type == CommentType.PAGE ? \"s-comments-page-container\" : \"s-comments-container\"}`} >\n {!!this.total && !this.hideTitle ? <h2 class=\"s-comments-title\">{this.blockTitle ? this.blockTitle : this.comment_title}</h2> : ''}\n {!this.hideForm && <salla-comment-form type={this.type} item-id={this.itemId}></salla-comment-form>}\n\n {!!this.total && <h2 class=\"s-comments-count-label\" innerHTML={this.pluralize(this.comment_name, this.total)}></h2>}\n <div ref={wrapper => this.wrapper = wrapper}></div>\n\n\n {this.nextPage && (\n <div class=\"s-infinite-scroll-wrapper\" ref={status => this.status = status}>\n <button onClick={() => this.loadMore()} class=\"s-infinite-scroll-btn s-button-btn s-button-primary\">\n <span class=\"s-button-text s-infinite-scroll-btn-text\">{this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more')}</span>\n <span class=\"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader\" ref={btnLoader => this.btnLoader = btnLoader} style={{ \"display\": \"none\" }}></span>\n </button>\n </div>\n )}\n </div>\n </div>\n\n );\n }\n\n\n\n async componentWillLoad() {\n await this.loadInitialData(); // Load initial data before rendering the component\n }\n\n}\n"],"version":3}
1	+ {"file":"salla-comments.js","mappings":";;;;;;;;;;;AAAA,IAAY,WAGX;AAHD,WAAY,WAAW;EACnB,4BAAY,CAAA;EACZ,kCAAmB,CAAA;AACvB,CAAC,EAHW,WAAW,KAAX,WAAW;;ACAvB,MAAM,gBAAgB,GAAG,sBAAsB;;MCQlCA,eAAa;EAExB;;;;;;;;gBAoCuD,WAAW,CAAC,IAAI;0BAKrC,KAAK;;;;;;sBAgBT,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,6BAA6B,CAAC;yBAClD,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,uBAAuB,CAAC;wBACxC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,yBAAyB,CAAC;;IA1D/D,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;MAClB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;MAC5D,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAA;MAC7D,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAA;KAC5D,CAAC,CAAA;GACH;;;EA0DO,SAAS,CAAC,OAAe,EAAE,KAAa;IAC9C,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAEnC,MAAM,UAAU,GAAG;MACjB,EAAE,SAAS,EAAE,KAAK,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;MACpC,EAAE,SAAS,EAAE,KAAK,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;MACpC,EAAE,SAAS,EAAE,KAAK,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;MACpC,EAAE,SAAS,EAAE,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE;MACjD,EAAE,SAAS,EAAE,KAAK,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE;KACrC,CAAC;IAEF,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;IAEjG,MAAM,cAAc,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,cAAc,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;OAC5E,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC;OAC1B,OAAO,CAAC,wBAAwB,EAAE,EAAE,CAAC,CAAC;GAC1C;;EAKO,sBAAsB;;IAC5B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACjB,OAAO,CAAC,KAAK,CAAC,wDAAwD,CAAC,CAAC;MACxE,OAAO;KACR;IAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;MAC9E,IAAI,EAAE,MAAM,IAAI,CAAC,QAAQ;MACzB,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,eAAe,EAAE,KAAK;KACvB,EAAE,IAAI,CAAC,CAAC;IAET,MAAA,IAAI,CAAC,cAAc,0CAAE,EAAE,CAAC,SAAS,EAAE,SAAS;MAC1C,IAAI,CAAC,OAAO,EAAE,CAAC;KAChB,CAAC,CAAC;IACH,MAAA,IAAI,CAAC,cAAc,0CAAE,EAAE,CAAC,MAAM,EAAE,QAAQ;MACtC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,UAAU,CAAC;MACtC,IAAI,CAAC,QAAQ,GAAG,OAAO,QAAQ,CAAC,UAAU,CAAC,KAAK,IAAI,QAAQ,IAAI,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;MACzI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;MAEzE,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,+DAA+D,CAAC,CAAC;MACxG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;MACzB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KACrB,CAAC,CAAC;IACH,MAAA,IAAI,CAAC,cAAc,0CAAE,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;MACjC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,CAAC,CAAC,CAAC;KACxD,CAAC,CAAC;GACJ;;EAGO,OAAO,CAAC,SAAS,GAAG,IAAI;;IAC9B,IAAI,OAAO,GAAG,MAAA,IAAI,CAAC,MAAM,0CAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC3D,IAAI,OAAO,EAAE;MACX,MAAM,CAAC,oBAAoB,CAAC,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC,CAAC;MACxF,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;KAC/D;GACF;;EAGO,YAAY,CAAC,KAAK;IACxB,KAAK,CAAC;MACJ,OAAO,EAAE,KAAK;MACd,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,QAAQ,EAAE,IAAI;MACd,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;MACnB,KAAK,EAAE,UAAU,GAAG,EAAE,CAAC;QACrB,OAAO,CAAC,GAAG,GAAG,CAAC;OAChB;MACD,MAAM,EAAE,aAAa;MACrB,QAAQ,EAAE,UAAU,KAAK;QACvB,KAAK,CAAC,OAAO,CAAC,IAAI;UAChB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;SAChC,CAAC,CAAA;OACH;KAEF,CAAC,CAAA;GACH;;EAGO,cAAc,CAAC,OAAO;IAC5B,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAgC,CAAC;IAChG,WAAW,CAAC,OAAO,GAAG,OAAO,CAAC;IAE9B,OAAO,WAAW,CAAC;GACpB;;EAKO,cAAc,CAAC,QAAQ;;IAC7B,OAAO,CAAA,MAAA,QAAQ,CAAC,IAAI,0CAAE,GAAG,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,KAAI,EAAE,CAAC;GAC1E;;EAKO,MAAM,eAAe;IAC3B,IAAI,CAAC,OAAO,EAAE,CAAC;IACf,IAAI;MACF,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,IAAI,WAAW,CAAC,IAAI;UAC7C,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;UAC9C,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;MACvD,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;QACnC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACpB,OAAO;OACR;MACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;MAC1B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;MAClC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;MACnC,IAAI,CAAC,QAAQ,GAAG,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;MAG7H,UAAU,CAAC;QACT,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QACrE,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,mCAAmC,CAAC,CAAC;QAC/E,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;OAC1B,EAAE,GAAG,CAAC,CAAC;KACT;IAAC,OAAO,KAAK,EAAE;MACd,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;MACpD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;MAC5B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KACrB;GACF;;EAGD,MAAM,QAAQ;;IACZ,MAAA,IAAI,CAAC,cAAc,0CAAE,YAAY,EAAE,CAAC;GACrC;EAED,MAAM;;IAEJ,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,QACE,eACG,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,UAAI,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAM,GAAG,EAAE,EACjI,CAAC,IAAI,CAAC,QAAQ,IAAI,yCAAiC,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,aAAW,IAAI,CAAC,MAAM,GAAuB,EACrI,WAAK,KAAK,EAAC,kCAAkC,IAC3C,SAAG,KAAK,EAAC,sDAAsD,GAAK,EACpE,SAAG,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,UAAU,CAAK,CACpC,CACF,EACP;KACF;IACD,QACE,WAAK,KAAK,EAAE,yBAAyB,IAAI,CAAC,IAAI,EAAE,IAC9C,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,WAAW,CAAC,IAAI,GAAG,2BAA2B,GAAG,sBAAsB,EAAE,IAClG,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,UAAI,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAM,GAAG,EAAE,EACjI,CAAC,IAAI,CAAC,QAAQ,IAAI,0BAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,aAAW,IAAI,CAAC,MAAM,GAAuB,EAElG,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,UAAI,KAAK,EAAC,wBAAwB,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,GAAO,EACnH,WAAK,GAAG,EAAE,OAAO,IAAI,IAAI,CAAC,OAAO,GAAG,OAAO,GAAQ,EAGlD,IAAI,CAAC,QAAQ,KACZ,WAAK,KAAK,EAAC,2BAA2B,EAAC,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,IACxE,cAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,qDAAqD,IACjG,YAAM,KAAK,EAAC,0CAA0C,IAAE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAQ,EACnJ,YAAM,KAAK,EAAC,qEAAqE,EAAC,GAAG,EAAE,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,GAAS,CAC9J,CACL,CACP,CACG,CACF,EAEN;GACH;EAID,MAAM,iBAAiB;IACrB,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;GAC9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SallaComments"],"sources":["src/components/salla-comments/interfaces.ts","src/components/salla-comments/salla-comments.scss?tag=salla-comments","src/components/salla-comments/salla-comments.tsx"],"sourcesContent":["export enum CommentType {\n PAGE= \"page\",\n PRODUCT = \"product\"\n}\n\nexport interface Comment {\n id?: number;\n avatar?: string;\n name?: string;\n has_order?: boolean;\n date?: string;\n rating?: number;\n content?: string;\n is_pending?: boolean;\n replies?: Comment[];\n customer?: Customer;\n type?: string;\n created_at?: CreatedAt;\n}\nexport interface CreatedAt {\n date?: Date;\n timezone_type?: number;\n timezone?: string;\n}\nexport interface UserComments {\n id?: number;\n type?: string;\n next_page?: string;\n comments?: Comment[];\n}\n\n// Pagination\nexport interface Pagination {\n count?: number;\n total?: number;\n perPage?: number;\n currentPage?: number;\n totalPages?: number;\n links?: Links;\n}\nexport interface Customer {\n id?: number;\n name?: string;\n mobile?: string;\n email?: string;\n avatar?: string;\n country?: string;\n city?: string;\n}\nexport interface Links {\n next?: string;\n}\n",":host {\n display: block;\n}\n","import { Component, Prop, State, Element, h } from '@stencil/core';\nimport { CommentType, UserComments, Pagination } from './interfaces';\nimport anime from 'animejs';\nimport Helper from '../../Helpers/Helper';\n@Component({\n tag: 'salla-comments',\n styleUrl: 'salla-comments.scss',\n})\nexport class SallaComments {\n\n constructor() {\n salla.lang.onLoaded(() => {\n this.comment_title = salla.lang.get('blocks.comments.title')\n this.comment_name = salla.lang.get('blocks.comments.comment')\n this.noComments = salla.lang.get('pages.rating.no_ratings')\n })\n }\n\n /*\n Page or product ID\n /\n @Prop() itemId!: number;\n\n /\n Load more text\n /\n @Prop() loadMoreText: string;\n\n /\n Load more text\n /\n @Prop() hideForm: boolean;\n\n /\n Block Title\n /\n @Prop() blockTitle: string;\n \n /\n Hide Title\n /\n @Prop() hideTitle: boolean;\n\n /\n Comment Type\n /\n @Prop() type: CommentType.PAGE \| CommentType.PRODUCT = CommentType.PAGE;\n\n /\n Show or hide avatar\n /\n @Prop() showFormAvatar: boolean = false;\n\n @State() comments: UserComments[];\n @State() pagination: Pagination;\n @State() total: number;\n @State() showPlaceholder: boolean;\n @State() nextPage: string;\n\n private status: any;\n private btnLoader: any;\n private infiniteScroll: any;\n private wrapper: any;\n\n @Element() host: HTMLElement;\n\n // Translations\n @State() noComments: string = salla.lang.get('blocks.comments.no_comments');\n @State() comment_title = salla.lang.get('blocks.comments.title')\n @State() comment_name = salla.lang.get('blocks.comments.comment')\n @State() placeholder_text: string;\n\n // TOOD: it's a good idea to move this into lang.js\n // Pluralize a string based on the count\n private pluralize(phrases: string, count: number): string {\n const options = phrases.split('\|');\n\n const conditions = [\n { condition: count === 0, index: 0 },\n { condition: count === 1, index: 1 },\n { condition: count === 2, index: 2 },\n { condition: count > 2 && count <= 10, index: 3 },\n { condition: count >= 11, index: 4 }\n ];\n\n const { index } = conditions.find(({ condition }) => condition) \|\| { index: options.length - 1 };\n\n const selectedOption = options[index];\n return selectedOption.replace(':count', salla.helpers.number(count.toString()))\n .replace(/\\{[0-9]+\\}/g, '')\n .replace(/\\[\\d+,\\d+\\]\|\\[11,\\\\]/g, '');\n }\n\n\n\n // Initiate infinite scroll\n private initiateInfiniteScroll() {\n if (!this.wrapper) {\n console.error('Wrapper is undefined. Cannot initiate infinite scroll.');\n return;\n }\n\n this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {\n path: () => this.nextPage,\n history: true,\n nextPage: this.nextPage,\n scrollThreshold: false,\n }, true);\n\n this.infiniteScroll?.on('request', _response => {\n this.loading();\n });\n this.infiniteScroll?.on('load', response => {\n this.pagination = response.pagination;\n this.nextPage = typeof response.pagination.links == 'object' && !!response.pagination.links.next ? response.pagination.links.next : null;\n this.handleResponse(response).forEach(card => this.wrapper.append(card));\n\n let items = this.host.querySelectorAll('salla-comment-item:not(.animated):not(.s-comments-item-admin)');\n this.animateItems(items);\n this.loading(false);\n });\n this.infiniteScroll?.on('error', (e) => {\n salla.console.error('Error loading more comments:', e);\n });\n }\n\n // Show/hide loading\n private loading(isLoading = true) {\n let btnText = this.status?.querySelector('.s-button-text');\n if (btnText) {\n Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);\n this.btnLoader.style.display = isLoading ? 'inherit' : 'none';\n }\n }\n\n // Animate newly added items\n private animateItems(items) {\n anime({\n targets: items,\n opacity: [0, 1],\n duration: 1200,\n translateY: [20, 0],\n delay: function (_el, i) {\n return i * 100;\n },\n easing: 'easeOutExpo',\n complete: function (_anim) {\n items.forEach(item => {\n item.classList.add('animated');\n })\n }\n\n })\n }\n\n // Get comment item HTML\n private getCommentHTML(comment) {\n const commentItem = document.createElement('salla-comment-item') as HTMLSallaCommentItemElement;\n commentItem.comment = comment;\n\n return commentItem;\n }\n\n\n\n // Parse response and return an array of comment items to be appended to the wrapper\n private handleResponse(response): Array<HTMLElement> {\n return response.data?.map(comment => this.getCommentHTML(comment)) \|\| [];\n }\n\n\n\n // Load initial data\n private async loadInitialData() {\n this.loading();\n try {\n const resp = await (this.type == CommentType.PAGE\n ? salla.api.comment.getPageComments(this.itemId)\n : salla.api.comment.getProductComments(this.itemId));\n if (!resp.data \|\| !resp.data.length) {\n this.showPlaceholder = false;\n this.loading(false);\n return;\n }\n this.comments = resp.data;\n this.pagination = resp.pagination;\n this.total = resp.pagination.total;\n this.nextPage = typeof resp.pagination.links == 'object' && !!resp.pagination.links.next ? resp.pagination.links.next : null;\n\n\n setTimeout(() => {\n this.handleResponse(resp).forEach(card => this.wrapper.append(card));\n this.initiateInfiniteScroll(); // Initiate infinite scroll after the initial data is loaded\n let items = this.wrapper.querySelectorAll('salla-comment-item:not(.animated)');\n this.animateItems(items);\n }, 100);\n } catch (error) {\n console.error('Error loading initial data:', error);\n this.showPlaceholder = true;\n this.loading(false);\n }\n }\n\n // Get next page\n async loadMore() {\n this.infiniteScroll?.loadNextPage();\n }\n\n render() {\n // We should show a different placeholder for pages and products (WIP)\n if (this.showPlaceholder) {\n return (\n <div>\n {!!this.total && !this.hideTitle ? <h2 class=\"s-comments-title\">{this.blockTitle ? this.blockTitle : this.comment_title}</h2> : ''}\n {!this.hideForm && <salla-comment-form show-avatar={this.showFormAvatar} type={this.type} item-id={this.itemId}></salla-comment-form>}\n <div class=\"no-content-placeholder--comments\">\n <i class=\"sicon-chat-bubbles text-5xl block mb-5 text-gray-400\"></i>\n <p class=\"text-sm\">{this.noComments}</p>\n </div>\n </div>\n )\n }\n return (\n <div class={`s-comments s-comments-${this.type}`}>\n <div class={`${this.type == CommentType.PAGE ? \"s-comments-page-container\" : \"s-comments-container\"}`} >\n {!!this.total && !this.hideTitle ? <h2 class=\"s-comments-title\">{this.blockTitle ? this.blockTitle : this.comment_title}</h2> : ''}\n {!this.hideForm && <salla-comment-form type={this.type} item-id={this.itemId}></salla-comment-form>}\n\n {!!this.total && <h2 class=\"s-comments-count-label\" innerHTML={this.pluralize(this.comment_name, this.total)}></h2>}\n <div ref={wrapper => this.wrapper = wrapper}></div>\n\n\n {this.nextPage && (\n <div class=\"s-infinite-scroll-wrapper\" ref={status => this.status = status}>\n <button onClick={() => this.loadMore()} class=\"s-infinite-scroll-btn s-button-btn s-button-primary\">\n <span class=\"s-button-text s-infinite-scroll-btn-text\">{this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more')}</span>\n <span class=\"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader\" ref={btnLoader => this.btnLoader = btnLoader} style={{ \"display\": \"none\" }}></span>\n </button>\n </div>\n )}\n </div>\n </div>\n\n );\n }\n\n\n\n async componentWillLoad() {\n await this.loadInitialData(); // Load initial data before rendering the component\n }\n\n}\n"],"version":3}