@product7/feedback-sdk 1.2.3 → 1.2.5

package/src/widgets/ButtonWidget.js

@@ -1,15 +1,15 @@
 import { BaseWidget } from './BaseWidget.js';
 
 export class ButtonWidget extends BaseWidget {
-    constructor(options) {
-        super({ ...options, type: 'button' });
-        this.isMinimized = false;
-    }
-
-    render() {
-        const button = document.createElement('div');
-        button.className = `feedback-widget feedback-widget-button theme-${this.options.theme} position-${this.options.position}`;
-        button.innerHTML = `
+	constructor(options) {
+		super({ ...options, type: 'button' });
+		this.isMinimized = false;
+	}
+
+	_render() {
+		const button = document.createElement('div');
+		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 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"/>
@@ -30,85 +30,87 @@ export class ButtonWidget extends BaseWidget {
       </button>
     `;
 
-        if (this.options.customStyles) {
-            Object.assign(button.style, this.options.customStyles);
-        }
-
-        return button;
-    }
-
-    attachEvents() {
-        const button = this.element.querySelector('.feedback-trigger-btn');
-        const minimizeIcon = this.element.querySelector('.feedback-minimize-icon');
-        const expandIcon = this.element.querySelector('.feedback-expand-icon');
-
-        // Add click handlers directly to the icons
-        minimizeIcon.addEventListener('click', (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            this.minimize();
-        });
-
-        expandIcon.addEventListener('click', (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            this.restore();
-        });
-
-        // Main button click handler
-        button.addEventListener('click', (e) => {
-            // Check if the click originated from an icon
-            if (e.target.closest('.feedback-minimize-icon') || 
-                e.target.closest('.feedback-expand-icon')) {
-                return; // Let the icon handlers deal with it
-            }
-            
-            if (!this.isMinimized) {
-                this.openPanel();
-            }
-        });
-
-        button.addEventListener('mouseenter', () => {
-            if (!this.state.isSubmitting && !this.isMinimized) {
-                button.style.transform = 'translateY(-2px)';
-            }
-        });
-
-        button.addEventListener('mouseleave', () => {
-            if (!this.isMinimized) {
-                button.style.transform = 'translateY(0)';
-            }
-        });
-    }
-
-    minimize() {
-        this.isMinimized = true;
-        this.element.classList.add('minimized');
-    }
-
-    restore() {
-        this.isMinimized = false;
-        this.element.classList.remove('minimized');
-    }
-
-    mount(container) {
-        super.mount(container);
-    }
-
-    updateText(text) {
-        const textEl = this.element?.querySelector('.feedback-text');
-        if (textEl) {
-            textEl.textContent = text;
-        }
-    }
-
-    updatePosition(position) {
-        this.options.position = position;
-        if (this.element) {
-            this.element.className = this.element.className.replace(
-                /position-\w+-\w+/,
-                `position-${position}`
-            );
-        }
-    }
-}
+		if (this.options.customStyles) {
+			Object.assign(button.style, this.options.customStyles);
+		}
+
+		return button;
+	}
+
+	_attachEvents() {
+		const button = this.element.querySelector('.feedback-trigger-btn');
+		const minimizeIcon = this.element.querySelector('.feedback-minimize-icon');
+		const expandIcon = this.element.querySelector('.feedback-expand-icon');
+
+		// Add click handlers directly to the icons
+		minimizeIcon.addEventListener('click', (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			this.minimize();
+		});
+
+		expandIcon.addEventListener('click', (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			this.restore();
+		});
+
+		// Main button click handler
+		button.addEventListener('click', (e) => {
+			// Check if the click originated from an icon
+			if (
+				e.target.closest('.feedback-minimize-icon') ||
+				e.target.closest('.feedback-expand-icon')
+			) {
+				return; // Let the icon handlers deal with it
+			}
+
+			if (!this.isMinimized) {
+				this.openPanel();
+			}
+		});
+
+		button.addEventListener('mouseenter', () => {
+			if (!this.state.isSubmitting && !this.isMinimized) {
+				button.style.transform = 'translateY(-2px)';
+			}
+		});
+
+		button.addEventListener('mouseleave', () => {
+			if (!this.isMinimized) {
+				button.style.transform = 'translateY(0)';
+			}
+		});
+	}
+
+	minimize() {
+		this.isMinimized = true;
+		this.element.classList.add('minimized');
+	}
+
+	restore() {
+		this.isMinimized = false;
+		this.element.classList.remove('minimized');
+	}
+
+	mount(container) {
+		super.mount(container);
+	}
+
+	updateText(text) {
+		const textEl = this.element?.querySelector('.feedback-text');
+		if (textEl) {
+			textEl.textContent = text;
+		}
+	}
+
+	updatePosition(position) {
+		this.options.position = position;
+		if (this.element) {
+			this.element.className = this.element.className.replace(
+				/position-\w+-\w+/,
+				`position-${position}`
+			);
+		}
+	}
+}