@product7/feedback-sdk 1.2.0 → 1.2.2

package/dist/feedback-sdk.js

@@ -1365,16 +1365,22 @@
 	        button.className = `feedback-widget feedback-widget-button theme-${this.options.theme} position-${this.options.position}`;
 	        button.innerHTML = `
       <button class="feedback-trigger-btn" type="button">
-        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-          <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
-          <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
-        </svg>
-        Feedback
-      </button>
-      <button class="feedback-close-btn" type="button" title="Hide feedback button">
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
-          <path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"/>
+        <svg class="feedback-icon" width="20" height="20" viewBox="0 0 256 256" fill="currentColor">
+          <path d="M216,80H184V48a16,16,0,0,0-16-16H40A16,16,0,0,0,24,48V176a8,8,0,0,0,13,6.22L72,154V184a16,16,0,0,0,16,16h93.59L219,230.22a8,8,0,0,0,5,1.78,8,8,0,0,0,8-8V96A16,16,0,0,0,216,80ZM66.55,137.78,40,159.25V48H168v88H71.58A8,8,0,0,0,66.55,137.78ZM216,207.25l-26.55-21.47a8,8,0,0,0-5-1.78H88V152h80a16,16,0,0,0,16-16V96h32Z"/>
         </svg>
+        <span class="feedback-text">Feedback</span>
+        
+        <div class="feedback-minimize-icon">
+          <svg viewBox="0 0 256 256">
+            <path d="M213.66,53.66,163.31,104H192a8,8,0,0,1,0,16H144a8,8,0,0,1-8-8V64a8,8,0,0,1,16,0V92.69l50.34-50.35a8,8,0,0,1,11.32,11.32ZM112,136H64a8,8,0,0,0,0,16H92.69L42.34,202.34a8,8,0,0,0,11.32,11.32L104,163.31V192a8,8,0,0,0,16,0V144A8,8,0,0,0,112,136Z"/>
+          </svg>
+        </div>
+        
+        <div class="feedback-expand-icon">
+          <svg viewBox="0 0 256 256">
+            <path d="M112,40V64.69L61.66,14.34A8,8,0,0,0,50.34,25.66L100.69,76H72a8,8,0,0,0,0,16h48a8,8,0,0,0,8-8V36A8,8,0,0,0,112,40Zm131.06,70.61a8,8,0,0,0-8.72,1.73L184,162.69V136a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8h48a8,8,0,0,0,0-16H195.31l50.35-50.34A8,8,0,0,0,243.06,110.61Z"/>
+          </svg>
+        </div>
       </button>
     `;
 
@@ -1387,55 +1393,57 @@
 
 	    _attachEvents() {
 	        const button = this.element.querySelector('.feedback-trigger-btn');
-	        const closeBtn = this.element.querySelector('.feedback-close-btn');
-
-	        button.addEventListener('click', this.openPanel);
-	        
-	        closeBtn.addEventListener('click', (e) => {
-	            e.stopPropagation();
-	            this.toggleMinimize();
+	        this.element.querySelector('.feedback-minimize-icon');
+	        this.element.querySelector('.feedback-expand-icon');
+
+	        button.addEventListener('click', (e) => {
+	            const clickedMinimize = e.target.closest('.feedback-minimize-icon');
+	            const clickedExpand = e.target.closest('.feedback-expand-icon');
+	            
+	            if (clickedMinimize) {
+	                e.stopPropagation();
+	                this.minimize();
+	            } else if (clickedExpand) {
+	                e.stopPropagation();
+	                this.restore();
+	            } else {
+	                if (!this.isMinimized) {
+	                    this.openPanel();
+	                }
+	            }
 	        });
 
 	        button.addEventListener('mouseenter', () => {
-	            if (!this.state.isSubmitting) {
+	            if (!this.state.isSubmitting && !this.isMinimized) {
 	                button.style.transform = 'translateY(-2px)';
 	            }
 	        });
 
 	        button.addEventListener('mouseleave', () => {
-	            button.style.transform = 'translateY(0)';
+	            if (!this.isMinimized) {
+	                button.style.transform = 'translateY(0)';
+	            }
 	        });
 	    }
 
-	    toggleMinimize() {
-	        this.isMinimized = !this.isMinimized;
-	        
-	        if (this.isMinimized) {
-	            this.element.classList.add('minimized');
-	            localStorage.setItem('feedback-widget-minimized', 'true');
-	        } else {
-	            this.element.classList.remove('minimized');
-	            localStorage.removeItem('feedback-widget-minimized');
-	        }
+	    minimize() {
+	        this.isMinimized = true;
+	        this.element.classList.add('minimized');
+	    }
+
+	    restore() {
+	        this.isMinimized = false;
+	        this.element.classList.remove('minimized');
 	    }
 
 	    mount(container) {
 	        super.mount(container);
-	        
-	        // Check if it was previously minimized
-	        if (localStorage.getItem('feedback-widget-minimized') === 'true') {
-	            this.isMinimized = true;
-	            this.element.classList.add('minimized');
-	        }
 	    }
 
 	    updateText(text) {
-	        const button = this.element?.querySelector('.feedback-trigger-btn');
-	        if (button) {
-	            const textNode = button.childNodes[button.childNodes.length - 1];
-	            if (textNode && textNode.nodeType === Node.TEXT_NODE) {
-	                textNode.textContent = text;
-	            }
+	        const textEl = this.element?.querySelector('.feedback-text');
+	        if (textEl) {
+	            textEl.textContent = text;
 	        }
 	    }
 
@@ -6576,12 +6584,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 12px;
-  height: 44px;
-  overflow: hidden;
-  border-radius: 0.5rem;
+  gap: 8px;
+  height: 48px;
+  overflow: visible;
+  border-radius: 9999px;
   border: none;
-  padding: 10px 16px;
+  padding: 12px 20px;
   font-size: 14px;
   font-weight: 500;
   font-family: inherit;
@@ -6589,12 +6597,13 @@
   transition: all 0.3s ease;
   color: white;
   background: #155EEF;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: fit-content;
 }
 
 .feedback-trigger-btn:hover:not(:disabled) {
-  background: #004EEB;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.1);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }
 
 .feedback-trigger-btn:disabled {
@@ -6607,69 +6616,64 @@
   outline-offset: 2px;
 }
 
-.feedback-close-btn {
+.feedback-icon {
+  flex-shrink: 0;
+}
+
+.feedback-minimize-icon,
+.feedback-expand-icon {
   position: absolute;
-  top: -8px;
-  right: -8px;
+  top: -6px;
+  right: -6px;
   width: 24px;
   height: 24px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
   border-radius: 50%;
-  background: #EF4444;
-  border: 2px solid white;
-  color: white;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: 0;
-  transition: all 0.2s ease;
-  z-index: 10;
-  padding: 0;
-}
-
-.feedback-widget-button:hover .feedback-close-btn {
-  opacity: 1;
 }
 
-.feedback-close-btn:hover {
-  background: #DC2626;
-  transform: scale(1.1);
-}
-
-.feedback-close-btn:focus-visible {
-  outline: 2px solid #155EEF;
-  outline-offset: 2px;
+.feedback-minimize-icon svg,
+.feedback-expand-icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+  fill: #155EEF;
 }
 
-.feedback-close-btn svg {
-  width: 10px;
-  height: 10px;
+/* Show minimize icon on hover when expanded */
+.feedback-widget-button:not(.minimized) .feedback-trigger-btn:hover .feedback-minimize-icon {
+  opacity: 1;
 }
 
-/* Minimized state */
-.feedback-widget-button.minimized {
-  transform: scale(0.4);
-  opacity: 0.3;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+/* Minimized state - just icon */
+.feedback-widget-button.minimized .feedback-trigger-btn {
+  padding: 12px;
+  width: 48px;
+  height: 48px;
+  justify-content: center;
 }
 
-.feedback-widget-button.minimized:hover {
-  opacity: 0.6;
-  transform: scale(0.5);
+.feedback-widget-button.minimized .feedback-text {
+  display: none;
 }
 
-.feedback-widget-button.minimized .feedback-trigger-btn {
-  pointer-events: none;
+.feedback-widget-button.minimized .feedback-minimize-icon {
+  display: none;
 }
 
-.feedback-widget-button.minimized .feedback-close-btn {
+/* Show expand icon on hover when minimized */
+.feedback-widget-button.minimized .feedback-trigger-btn:hover .feedback-expand-icon {
   opacity: 1;
-  background: #10B981;
-  pointer-events: auto;
-}
-
-.feedback-widget-button.minimized .feedback-close-btn:hover {
-  background: #059669;
 }
 
 /* Side Panel Styles */
@@ -6838,7 +6842,7 @@
 
 .feedback-form-group input:focus {
   border-color: #155EEF;
-  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 }
 
 .feedback-form-group input:focus-visible {
@@ -6868,7 +6872,7 @@
 
 .feedback-form-group textarea:focus {
   border-color: #155EEF;
-  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 }
 
 .feedback-form-group textarea:focus-visible {
@@ -6921,11 +6925,11 @@
 }
 
 .feedback-btn-submit:hover:not(:disabled) {
-  background: #1A56DB;
+  background: #4338ca;
 }
 
 .feedback-btn-submit:active:not(:disabled) {
-  background: #1E429F;
+  background: #3730a3;
 }
 
 .feedback-btn-cancel {
@@ -7132,6 +7136,20 @@
     left: 16px;
     min-width: auto;
   }
+  
+  .feedback-minimize-icon,
+  .feedback-expand-icon {
+    top: -4px;
+    right: -4px;
+    width: 20px;
+    height: 20px;
+  }
+  
+  .feedback-minimize-icon svg,
+  .feedback-expand-icon svg {
+    width: 14px;
+    height: 14px;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -7139,7 +7157,9 @@
   .feedback-btn,
   .feedback-panel,
   .feedback-panel-backdrop,
-  .feedback-success-notification {
+  .feedback-success-notification,
+  .feedback-minimize-icon,
+  .feedback-expand-icon {
     transition: none;
     animation: none;
   }
@@ -7152,36 +7172,6 @@
   .feedback-success-notification {
     display: none !important;
   }
-
-  @media (max-width: 768px) {
-  .feedback-close-btn {
-    top: -6px;
-    right: -6px;
-    width: 20px;
-    height: 20px;
-  }
-  
-  .feedback-close-btn svg {
-    width: 8px;
-    height: 8px;
-  }
-  
-  .feedback-widget-button.minimized {
-    transform: scale(0.5);
-  }
-  
-  .feedback-widget-button.minimized:hover {
-    transform: scale(0.6);
-  }
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .feedback-close-btn,
-  .feedback-widget-button.minimized {
-    transition: none;
-  }
-}
 }
 `;