@salla.sa/twilight-components 2.13.41 → 2.13.43

package/dist/components/salla-comments.js

@@ -24,6 +24,8 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
     this.itemId = undefined;
     this.loadMoreText = undefined;
     this.hideForm = undefined;
+    this.blockTitle = undefined;
+    this.hideTitle = undefined;
     this.type = CommentType.PAGE;
     this.comments = undefined;
     this.pagination = undefined;
@@ -160,9 +162,9 @@ 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, h("h2", { class: "s-comments-title" }, 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", { 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"}` }, h("h2", { class: "s-comments-title" }, 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" } })))))));
+    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" } })))))));
   }
   async componentWillLoad() {
     await this.loadInitialData(); // Load initial data before rendering the component
@@ -173,6 +175,8 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
     "itemId": [2, "item-id"],
     "loadMoreText": [1, "load-more-text"],
     "hideForm": [4, "hide-form"],
+    "blockTitle": [1, "block-title"],
+    "hideTitle": [4, "hide-title"],
     "type": [1],
     "comments": [32],
     "pagination": [32],

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

@@ -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   * 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          <h2 class=\"s-comments-title\">{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          <h2 class=\"s-comments-title\">{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}
+{"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}