@fullsession.io/fs-feedback-widget 1.3.7 → 1.3.9

package/package.json

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

package/src/widgetPages/App.css

@@ -9,7 +9,6 @@ fsContainer{
   align-items: var(--wgPositionHorizintal);
   padding: 0;
   z-index: 100000;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .fsWidget {
     pointer-events: auto;
@@ -70,6 +69,7 @@ fsContainer{
 	  font-size: 15px;
 	  color: #ffff;
 	  font-weight: 600;
+	  font-family: system-ui;
   	cursor: pointer;
 	  
   }

package/src/widgetPages/reactionPage.svelte

@@ -38,50 +38,40 @@
   export let closeHandlerBeforeFinishing = (email,comment,reactionType) => {};
 
 
-  // const commentButtonDisable = () =>{
+  const commentButtonDisable = () =>{
     
-  //   let source = document.querySelector(".fsTextArea");
-    
-  //   source.addEventListener('propertychange', commentHandler);
-      
-   
-  // }
-  const commentHandler = () => {
     let input = document.querySelector(".fsTextArea");
-
-  if (input.value=== "") {
+    
+    checkTextAreaInterval = setInterval(() => {
+      console.log(input.value)
+      if (input.value=== "") {
         buttonState = false; //button remains disabled
       } else {
         buttonState = true; //button is enabled
       }
-  comment = "";
-  comment = input.value;
-  console.log(input.value)
-}
+    }, 500);
+      
+   
+  }
 
-  // const EmailButtonDisable = () =>{
-    
-  //   let source = document.querySelector("#fsEmailTextArea");
+  const EmailButtonDisable = () =>{
     
-  //   source.addEventListener('propertychange', emailHandler);
-
-
-  // }
-
-  const emailHandler = ()=> {
     let input = document.querySelector("#fsEmailTextArea");
-
-    if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(input.value)) || input.value ==="") {
+    
+    checkEmailAreaInterval = setInterval(() => {
+      console.log(input.value)
+      if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(input.value)) || input.value ==="") {
         buttonState = false; //button remains disabled
       } else {
         buttonState = true; //button is enabled
-        email = "";
-      email = document.getElementById("fsEmailTextArea").value;
       }
-      
+      email = "";
+      email = document.getElementById("fsEmailTextArea").value;
 
-    
-}
+    }, 500);
+      
+   
+  }
   
 
   const changeStyle = (prevState) =>{
@@ -148,7 +138,7 @@
     document.querySelector(".fsTextArea").value="";
     buttonState = false
     widgetComponent = state;
-    
+    comment = document.getElementsByClassName("fsTextArea")[0].value;
   }
 
   const endEmailInterval =()=> {
@@ -266,7 +256,7 @@
 
               <div class="fsTextAreaCont" >
                   <div class="fsPointerDiv" id="fsPointer" ></div>
-                  <textarea class="fsTextArea" placeholder="Tell us your experience..."  on:keyup={() => commentHandler()}></textarea>
+                  <textarea class="fsTextArea" placeholder="Tell us your experience..." on:click={() => commentButtonDisable()}></textarea>
               </div>
 
               <div class="fsFooter">
@@ -286,8 +276,8 @@
   <div id="fsEmailText">
     {feedbackData.wgEmailReqMsg}
   </div>
-  <div id="fsEmailInputCont">
-    <input type="text" id="fsEmailTextArea" placeholder="email@domain.com" on:keyup={() => emailHandler()}>
+  <div id="fsEmailInputCont" on:click={() => EmailButtonDisable()}>
+    <input type="text" id="fsEmailTextArea" placeholder="email@domain.com">
   </div>
   <div class="fsEmailFooter">
     <p id="fsSkipText" on:click={() => closeHandler(email,comment,reactionType)}><u>Skip</u></p>

package/src/widgetPages/reactionpage.css

@@ -3,7 +3,6 @@
     display: flex;
     flex-direction: column;
     height: 190px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .fsIcons {
     display: flex;
@@ -26,20 +25,17 @@
     flex-direction: column;
     align-items: center;
     height: 22px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
 
   .fsReactionText {
     font-size: 12px;
     display: none;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin-top: 0px;
     
   }
   .fsIconTextCont:hover{
     pointer-events: auto;
     cursor: pointer;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .fsReactionIcon:hover + .fsReactionText {
     display: block;
@@ -52,7 +48,6 @@
     flex-direction: column;
     height: 291px;
     pointer-events: auto;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .fsTextAreaCont{
     pointer-events: auto;
@@ -60,8 +55,6 @@
       height: 140px;
       background-color: #eaeaeb;
       margin-top: 17%;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
   }
   .fsTextArea{
     border: 0px;
@@ -72,7 +65,6 @@
     outline: none;
     margin-top: 4%;
     resize: none;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
   }
   .fsSendButtonCommentComponent{
@@ -81,8 +73,7 @@
       font-size: 12px;
       text-align: center;
       margin-top: 7px;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
+      
   }
   .fsSendButtonContCommentComp{
     pointer-events: auto;
@@ -95,8 +86,7 @@
     margin-right: 11px;
     cursor: pointer;
     border: 0px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
+    
   }
   
 .fsCommentButtonContDisable{
@@ -110,8 +100,6 @@
     margin-right: 11px;
     cursor:not-allowed;
     border: 0px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
 }
 .fsCommentButtonTxtDisable{
     pointer-events: auto;
@@ -119,15 +107,11 @@
       font-size: 12px;
       text-align: center;
       margin-top: 7px;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
 }
   .fsFooter{
     pointer-events: auto;
       display: flex;
       justify-content: flex-end;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
   }
 
   .fsIcons-second{
@@ -136,8 +120,6 @@
     flex-direction: row;
     justify-content: space-evenly;
     margin-top: 6%;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
   }
   .fsPointerDiv{
     width: 0;
@@ -170,8 +152,6 @@
     display: flex;
     flex-direction: column;
     height: 220px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
   }
   #fsEmailInputCont{
     pointer-events: auto;
@@ -183,8 +163,6 @@
     /* align-items: center; */
     justify-content: center;
     margin-top: 10%;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
 
   }
   #fsEmailTextArea{
@@ -193,8 +171,6 @@
     border: 0px;
     background-color: #eaeaeb;
     outline: none;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
   }
  #fsEmailText{
     width: 80%;
@@ -203,16 +179,12 @@
     margin-top: 8%;
     line-height: 1.29;
     font-size: 17px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
  }
  .fsEmailFooter{
     pointer-events: auto;
   display: flex;
   justify-content: flex-end;
   flex-direction: row;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
  }
  #fsSkipText{
   color: #908f8f;
@@ -221,12 +193,8 @@
     margin-top: 6%;
     margin-right: 4%;
     letter-spacing: normal;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
 
  }
  #fsSkipText:hover{
    color: #666666;
-   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
  }

package/dist/bundle.css

@@ -1,329 +0,0 @@
-fsContainer{
-    width: 100%;
-    display: flex;
-    flex-direction: var(--wgPositionVertical);
-    position: fixed;
-    top: 0; right: 0; bottom: 0; left: 0;
-	height: 100%;
-  pointer-events: none;
-  align-items: var(--wgPositionHorizintal);
-  padding: 0;
-  z-index: 100000;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  }
-  .fsWidget {
-    pointer-events: auto;
-    background-color: var(--widgetColor);
-    width: 34px;
-    height: 112px;
-    border-top-left-radius:var(--widgetLeftSideBorder) ;
-    border-bottom-left-radius: var(--widgetLeftSideBorder);
-    border-top-right-radius: var(--widgetRightSideBorder) ;
-    border-bottom-right-radius: var(--widgetRightSideBorder);
-    box-shadow: 0.2px 0.2px 0.2px rgb(133, 130, 130);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-evenly;
-    cursor: pointer;
-    margin-top: 5px;
-  }
-  #fsMainIcon {
-    width: 60%;
-    margin-left: 4%;
-    cursor: pointer;
-  }
-  #fsFeedbackTxt {
-    color: var(--widgetTextColor);
-    font-size: 15px;
-    writing-mode: vertical-lr;
-    transform: rotate(180deg);
-    cursor: pointer;
-    font-size-adjust: 0.40;
-  }
-  .fsWidget:hover {
-    width: 35px;
-    -webkit-box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
-    box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
-  }
-  .fsCont {
-    pointer-events: auto;
-    width: 320px;
-    height: fit-content;
-    background-color: rgb(255, 255, 255);
- 	margin-right: var(--widgetMarginRight);
-   margin-left: var(--widgetMarginLeft);
-	-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px; 
-	box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
-  }
-  .fsThanksMessageCont{
-    pointer-events: auto;
-    width: 320px;
-    height: 104px;
-    background-color: rgb(255, 255, 255);
- 	margin-right: var(--widgetMarginRight);
-   margin-left: var(--widgetMarginLeft);
-	-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px; 
-	box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
-  }
-  #fsCloseIcon{
-	  font-size: 15px;
-	  color: #ffff;
-	  font-weight: 600;
-  	cursor: pointer;
-	  
-  }
-  .fsCloseCont{
-    pointer-events: auto;
-	  background-color: #4d5167;
-	  width: 27px;
-    height: 27px;
-	border-radius: 50%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin-top: -15px;
-    margin-left: 85%;
-	cursor: pointer;
-	}
-
-  
-  
- 
-
-  /* @media (min-width: 640px) {
-    body {
-      max-width: none;
-    }
-  } */.fsReactionsContainer {
-    pointer-events: auto;
-    display: flex;
-    flex-direction: column;
-    height: 190px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  }
-  .fsIcons {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    margin-top: 11%;
-  }
-  #fsTxt {
-    font-size: 17px;
-    display: flex;
-    text-align: center;
-    margin-top: 5%;
-    width: 61%;
-    margin-left: 19%;
-  }
-
-  .fsIconTextCont {
-    pointer-events: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 22px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  }
-
-  .fsReactionText {
-    font-size: 12px;
-    display: none;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin-top: 0px;
-    
-  }
-  .fsIconTextCont:hover{
-    pointer-events: auto;
-    cursor: pointer;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  }
-  .fsReactionIcon:hover + .fsReactionText {
-    display: block;
-    opacity: 0.8;
-  }
-
-  .fsCommentContainer{
-    pointer-events: auto;
-    display: flex;
-    flex-direction: column;
-    height: 291px;
-    pointer-events: auto;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  }
-  .fsTextAreaCont{
-    pointer-events: auto;
-      width: 100%;
-      height: 140px;
-      background-color: #eaeaeb;
-      margin-top: 17%;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
-  }
-  .fsTextArea{
-    border: 0px;
-    width: 85%;
-    height: 120px;
-    background-color: #eaeaeb;
-    margin-left: 6%;
-    outline: none;
-    margin-top: 4%;
-    resize: none;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
-  }
-  .fsSendButtonCommentComponent{
-    pointer-events: auto;
-      color: #ffff;
-      font-size: 12px;
-      text-align: center;
-      margin-top: 7px;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
-  }
-  .fsSendButtonContCommentComp{
-    pointer-events: auto;
-      background-color: var(--buttonColor);
-      width: 50px;
-      height: 29px;
-      box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
-      border-radius: 3px;
-      margin-top: 13px;
-    margin-right: 11px;
-    cursor: pointer;
-    border: 0px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
-  }
-  
-.fsCommentButtonContDisable{
-    pointer-events: auto;
-  background-color: #cccccc;
-      width: 50px;
-      height: 29px;
-      box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
-      border-radius: 3px;
-      margin-top: 13px;
-    margin-right: 11px;
-    cursor:not-allowed;
-    border: 0px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
-}
-.fsCommentButtonTxtDisable{
-    pointer-events: auto;
-      color: black;
-      font-size: 12px;
-      text-align: center;
-      margin-top: 7px;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
-}
-  .fsFooter{
-    pointer-events: auto;
-      display: flex;
-      justify-content: flex-end;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
-  }
-
-  .fsIcons-second{
-
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    margin-top: 6%;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
-  }
-  .fsPointerDiv{
-    width: 0;
-    height: 0;
-    border-left: 3px solid transparent;
-    margin-top: -8px;
-    border-right: 5px solid transparent;
-    border-bottom: 8px solid #eaeaeb;
-    margin-left: var(--pointerMargin);
-
-
-  }
-  #fsHateDiv{
-    display: var(--hateDisplay);
-  }
-  #fsDislikeDiv{
-    display: var(--dislikeDisplay);
-  }
-  #fsNeutralDiv{
-    display: var(--neutralDisplay);
-  }
-  #fsLikeDiv{
-    display: var(--likeDisplay);
-  }
-  #fsLoveDiv{
-    display: var(--loveDisplay);
-  }
-  .fsEmailContainer{
-    pointer-events: auto;
-    display: flex;
-    flex-direction: column;
-    height: 220px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
-  }
-  #fsEmailInputCont{
-    pointer-events: auto;
-    pointer-events: auto;
-    width: 100%;
-    height: 46px;
-    background-color: #eaeaeb;
-    display: flex;
-    /* align-items: center; */
-    justify-content: center;
-    margin-top: 10%;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
-
-  }
-  #fsEmailTextArea{
-    pointer-events: auto;
-    text-align: center;
-    border: 0px;
-    background-color: #eaeaeb;
-    outline: none;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
-  }
- #fsEmailText{
-    width: 80%;
-    text-align: center;
-    margin-left: 11%;
-    margin-top: 8%;
-    line-height: 1.29;
-    font-size: 17px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
- }
- .fsEmailFooter{
-    pointer-events: auto;
-  display: flex;
-  justify-content: flex-end;
-  flex-direction: row;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
- }
- #fsSkipText{
-  color: #908f8f;
-    cursor: pointer;
-    font-size: 13px;
-    margin-top: 6%;
-    margin-right: 4%;
-    letter-spacing: normal;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
-
- }
- #fsSkipText:hover{
-   color: #666666;
-   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
- }