@salla.sa/twilight-components 2.14.400 → 2.14.401

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './salla-button2.js';
 
 const sallaCommentFormCss = ":host{display:block}";
@@ -10,6 +10,7 @@ const SallaCommentForm = /*@__PURE__*/ proxyCustomElement(class SallaCommentForm
     constructor() {
         super();
         this.__registerHost();
+        this.commentAdded = createEvent(this, "commentAdded", 7);
         this.placeholder = salla.lang.get('blocks.comments.placeholder');
         this.submitText = salla.lang.get('blocks.comments.submit');
         salla.lang.onLoaded(() => {
@@ -27,12 +28,24 @@ const SallaCommentForm = /*@__PURE__*/ proxyCustomElement(class SallaCommentForm
             salla.log('CommentForm:: validation error!');
             return;
         }
+        const commentText = this.commentField.value;
         this.submitBtn.load()
-            .then(() => salla.comment.add({ id: this.itemId, comment: this.commentField.value, type: this.type }))
-            .finally(() => this.submitBtn.stop);
+            .then(() => salla.comment.add({ id: this.itemId, comment: commentText, type: this.type }))
+            .then(() => {
+            this.commentAdded.emit({
+                name: salla.config.get('user.name'),
+                avatar: salla.config.get('user.avatar'),
+                content: commentText,
+                is_pending: true,
+                created_at: { date: new Date().toISOString().replace('T', ' ').substring(0, 19) },
+                images: [],
+            });
+            this.commentField.value = '';
+        })
+            .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 ?
+        return (h(Host, { key: '0ec765c8dd7cf28d23c4305c234cec5efd3daae1' }, !!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; }

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

@@ -151,7 +151,7 @@ const SallaCommentItem = /*@__PURE__*/ proxyCustomElement(class SallaCommentItem
                 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 ?
+            : 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 && !!this.comment.id && 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 }));

package/dist/components/salla-comments.js

@@ -233,6 +233,31 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
             return this.loadInitialData();
         });
     }
+    /**
+     * Catch the commentAdded event emitted by salla-comment-form and instantly render it
+     */
+    onCommentAdded(event) {
+        const comment = event.detail;
+        if (!comment)
+            return;
+        // If comments were empty, clear the placeholder and initialize the list
+        if (this.showPlaceholder || !this.total) {
+            this.showPlaceholder = false;
+            this.total = (this.total || 0) + 1;
+            this.comments = this.comments || [];
+        }
+        else {
+            this.total = (this.total || 0) + 1;
+        }
+        // Wait for next render tick so wrapper is available if placeholder was just removed
+        setTimeout(() => {
+            if (!this.wrapper)
+                return;
+            const commentItem = this.getCommentHTML(comment);
+            this.wrapper.prepend(commentItem);
+            this.animateItems([commentItem]);
+        }, 0);
+    }
     // Load initial data
     async loadInitialData() {
         try {
@@ -331,7 +356,7 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
         "showRatingSummary": [32],
         "allowLikes": [32],
         "reload": [64]
-    }]);
+    }, [[0, "commentAdded", "onCommentAdded"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/esm/{filepond-C3JoxS5H.js → filepond-DR4SNVzz.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-NBDrHfxi.js';
+import { d as getDefaultExportFromCjs } from './index-BlBuuMQp.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-poster-BtPqGW1l.js → filepond-plugin-file-poster-D5SixGgC.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-NBDrHfxi.js';
+import { d as getDefaultExportFromCjs } from './index-BlBuuMQp.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-size-CzU4paDx.js → filepond-plugin-file-validate-size-DsOh2L9N.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-NBDrHfxi.js';
+import { d as getDefaultExportFromCjs } from './index-BlBuuMQp.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-type-vDW3qAnV.js → filepond-plugin-file-validate-type-B4O62KoP.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-NBDrHfxi.js';
+import { d as getDefaultExportFromCjs } from './index-BlBuuMQp.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-edit-D7B65tS9.js → filepond-plugin-image-edit-Clnx4Mv4.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-NBDrHfxi.js';
+import { d as getDefaultExportFromCjs } from './index-BlBuuMQp.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-exif-orientation-CG2VBxZQ.js → filepond-plugin-image-exif-orientation-BN-eLjue.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-NBDrHfxi.js';
+import { d as getDefaultExportFromCjs } from './index-BlBuuMQp.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-preview-D3kctuA5.js → filepond-plugin-image-preview-CYK3uEyM.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-NBDrHfxi.js';
+import { d as getDefaultExportFromCjs } from './index-BlBuuMQp.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {