@fullsession.io/fs-feedback-widget 1.14.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullsession.io/fs-feedback-widget",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

package/src/App.svelte

@@ -220,6 +220,14 @@
     setTimeout(function () {
       buttonVisible = !buttonVisible;
     }, 350);
+    
+    let doneEvent = new CustomEvent("fbEventDone", {
+      bubbles: false,
+      detail: {
+        id: widgetId,
+      },
+    });
+    window.dispatchEvent(doneEvent);
   };
 
   const openWidget = () => {

package/src/widgetPages/reactionPage.svelte

@@ -59,6 +59,8 @@
   let buttonState = false;
   let emailError = "";
   let checkTextAreaInterval;
+  let commentCharCount = 0;
+  let questionCharCount = 0;
 
   export let closeHandler = (
     email,
@@ -78,6 +80,7 @@
     }
     comment = "";
     comment = input.value;
+    commentCharCount = input.value.length;
   };
 
   // Ultra-fast email handler - just updates value, no validation during typing
@@ -184,12 +187,14 @@
     }
     questionAnswer = "";
     questionAnswer = input.value;
+    questionCharCount = input.value.length;
   };
 
   const openEmailCont = (state) => {
     clearInterval(checkTextAreaInterval);
     document.querySelector(".fsTextArea").value = "";
     buttonState = false;
+    commentCharCount = 0;
     if (widgetEmailComponentActivation) {
       widgetComponent = state;
     } else {
@@ -201,6 +206,7 @@
     clearInterval(checkTextAreaInterval);
     document.querySelector(".fsAnswerTextArea").value = "";
     buttonState = false;
+    questionCharCount = 0;
     if (widgetEmailComponentActivation) {
       widgetComponent = state;
     } else {
@@ -269,8 +275,10 @@
         <textarea
           class="fsAnswerTextArea"
           placeholder="Answer Here..."
+          maxlength="300"
           on:keyup={() => questionHandler()}
         />
+        <div class="fsCharCounter">{questionCharCount}/300</div>
       </div>
       <div class="fsFooter">
         {#if buttonState == false}
@@ -367,8 +375,10 @@
       <textarea
         class="fsTextArea"
         placeholder={widgetPlaceholder}
+        maxlength="300"
         on:keyup={() => commentHandler()}
       />
+      <div class="fsCharCounter">{commentCharCount}/300</div>
     </div>
 
     <div class="fsFooter">
@@ -392,8 +402,10 @@
     <textarea
       class="fsTextArea"
       placeholder="Answer Here..."
+      maxlength="300"
       on:keyup={() => commentHandler()}
     />
+    <div class="fsCharCounter">{commentCharCount}/300</div>
   </div>
 
   <div class="fsFooter">

package/src/widgetPages/reactionpage.css

@@ -17,7 +17,6 @@
   padding-bottom: 45px;
   padding-left: 5px;
   padding-right: 5px;
-  flex-wrap: wrap;
 }
 
 #fsTxt {
@@ -114,6 +113,7 @@
   margin-top: 25px;
   font-family: "Montserrat", sans-serif;
   box-sizing: border-box;
+  position: relative;
 }
 
 .fsTextAreaCont-qa-view {
@@ -124,6 +124,18 @@
   margin-top: 10px;
   font-family: "Montserrat", sans-serif;
   box-sizing: border-box;
+  position: relative;
+}
+
+.fsCharCounter {
+  position: absolute;
+  bottom: 8px;
+  right: 20px;
+  font-family: "Montserrat", sans-serif;
+  font-size: 11px;
+  color: #6d6d6d;
+  pointer-events: none;
+  user-select: none;
 }
 
 .fsTextArea,
@@ -205,7 +217,6 @@
   padding-left: 5px;
   padding-right: 5px;
   font-family: "Montserrat", sans-serif;
-  flex-wrap: wrap;
 }
 
 .fsPointerDiv {
@@ -341,8 +352,6 @@
 .fsNpsNumbers {
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 2px;
 }
 
 .fsHighNps {
@@ -365,7 +374,6 @@
   font-family: "Montserrat", sans-serif;
   font-size: 13px;
   font-weight: 600;
-  padding: 5px 10px;
   border-radius: 3px;
   border: 0.36px solid #cbd4e6;
   cursor: pointer;
@@ -478,10 +486,6 @@
     font-size: 12px;
   }
 
-  .fsNpsNumber {
-    padding: 4px 8px;
-  }
-
   .fsNpsText {
     font-size: 9px;
   }
@@ -594,10 +598,6 @@
     margin-top: 5%;
   }
 
-  .fsNpsNumber {
-    padding: 3px 6px;
-  }
-
   .fsNpsText {
     font-size: 8px;
   }