pushfeedback 0.1.82 → 0.1.83

package/dist/collection/components/canvas-editor/canvas-editor.js

@@ -24,7 +24,7 @@ export class CanvasEditor {
       this.hideAllFeedbackElements();
       try {
         // Wait a moment for UI to update before capturing
-        await new Promise(resolve => setTimeout(resolve, 100));
+        await new Promise((resolve) => setTimeout(resolve, 100));
         // Capture viewport screenshot using browser API
         const dataUrl = await this.captureViewportScreenshot();
         this.originalImageData = dataUrl;
@@ -52,14 +52,14 @@ export class CanvasEditor {
     this.hideAllFeedbackElements = () => {
       // Hide all feedback buttons and modals on the page
       const feedbackElements = document.querySelectorAll('feedback-button, feedback-modal');
-      feedbackElements.forEach(element => {
+      feedbackElements.forEach((element) => {
         element.style.visibility = 'hidden';
       });
     };
     this.showAllFeedbackElements = () => {
       // Show all feedback buttons and modals on the page
       const feedbackElements = document.querySelectorAll('feedback-button, feedback-modal');
-      feedbackElements.forEach(element => {
+      feedbackElements.forEach((element) => {
         element.style.visibility = 'visible';
       });
     };
@@ -115,7 +115,7 @@ export class CanvasEditor {
         const scaleY = containerHeight / img.height;
         // Use a more aggressive scaling approach for large screens
         // Allow scaling up to 1.5x on very large screens, but still maintain aspect ratio
-        const maxScale = window.innerWidth > 1920 ? 1.5 : (window.innerWidth > 1200 ? 1.2 : 1);
+        const maxScale = window.innerWidth > 1920 ? 1.5 : window.innerWidth > 1200 ? 1.2 : 1;
         const scale = Math.min(scaleX, scaleY, maxScale);
         // Calculate final display dimensions
         const displayWidth = img.width * scale;
@@ -139,7 +139,7 @@ export class CanvasEditor {
         this.canvasContext.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
         this.canvasContext.drawImage(img, 0, 0);
         // Draw all annotations
-        this.annotations.forEach(annotation => {
+        this.annotations.forEach((annotation) => {
           this.drawAnnotation(annotation);
         });
       };
@@ -189,7 +189,7 @@ export class CanvasEditor {
             this.drawLineResizeHandles(annotation);
           }
           break;
-        case 'text':
+        case 'text': {
           const fontSize = annotation.fontSize || 24;
           this.canvasContext.fillStyle = annotation.color;
           this.canvasContext.font = `${fontSize}px Arial`;
@@ -199,6 +199,7 @@ export class CanvasEditor {
             this.drawTextSelectionIndicator(annotation);
           }
           break;
+        }
       }
     };
     // Draw selection indicator for shapes
@@ -270,7 +271,7 @@ export class CanvasEditor {
     };
     this.deleteSelectedAnnotation = () => {
       if (this.selectedAnnotation) {
-        const index = this.annotations.findIndex(a => a === this.selectedAnnotation);
+        const index = this.annotations.findIndex((a) => a === this.selectedAnnotation);
         if (index !== -1) {
           this.annotations = this.annotations.filter((_, i) => i !== index);
           this.selectedAnnotation = null;
@@ -341,26 +342,32 @@ export class CanvasEditor {
     this.isPointInResizeHandle = (x, y, annotation) => {
       const handleSize = 8;
       switch (annotation.type) {
-        case 'rectangle':
+        case 'rectangle': {
           const right = annotation.startX + annotation.width;
           const bottom = annotation.startY + annotation.height;
           // Only check bottom-right corner handle
-          return x >= right - handleSize / 2 && x <= right + handleSize / 2 &&
-            y >= bottom - handleSize / 2 && y <= bottom + handleSize / 2;
+          return (x >= right - handleSize / 2 &&
+            x <= right + handleSize / 2 &&
+            y >= bottom - handleSize / 2 &&
+            y <= bottom + handleSize / 2);
+        }
         case 'line':
-        case 'arrow':
+        case 'arrow': {
           // Check both endpoint handles
           const lineHandles = [
             { x: annotation.startX, y: annotation.startY, point: 'start' },
-            { x: annotation.endX, y: annotation.endY, point: 'end' }
+            { x: annotation.endX, y: annotation.endY, point: 'end' },
           ];
           for (const handle of lineHandles) {
-            if (x >= handle.x - handleSize / 2 && x <= handle.x + handleSize / 2 &&
-              y >= handle.y - handleSize / 2 && y <= handle.y + handleSize / 2) {
+            if (x >= handle.x - handleSize / 2 &&
+              x <= handle.x + handleSize / 2 &&
+              y >= handle.y - handleSize / 2 &&
+              y <= handle.y + handleSize / 2) {
               return handle.point; // Return which endpoint was clicked
             }
           }
           return false;
+        }
         default:
           return false;
       }
@@ -389,13 +396,13 @@ export class CanvasEditor {
       // Define handle positions (2 endpoints)
       const handles = [
         { x: annotation.startX, y: annotation.startY },
-        { x: annotation.endX, y: annotation.endY } // End point
+        { x: annotation.endX, y: annotation.endY }, // End point
       ];
       // Draw each handle
       this.canvasContext.fillStyle = '#0070F4'; // Primary color
       this.canvasContext.strokeStyle = '#ffffff';
       this.canvasContext.lineWidth = 2;
-      handles.forEach(handle => {
+      handles.forEach((handle) => {
         this.canvasContext.fillRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
         this.canvasContext.strokeRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
       });
@@ -416,12 +423,12 @@ export class CanvasEditor {
       if (!this.resizingAnnotation || !this.dragStartPos)
         return;
       const annotation = this.resizingAnnotation;
-      const index = this.annotations.findIndex(a => a === annotation);
+      const index = this.annotations.findIndex((a) => a === annotation);
       if (index === -1)
         return;
-      let updatedAnnotation = Object.assign({}, annotation);
+      const updatedAnnotation = Object.assign({}, annotation);
       switch (annotation.type) {
-        case 'rectangle':
+        case 'rectangle': {
           // Rectangle resize logic - only bottom-right corner
           const rectDeltaX = currentPos.x - this.dragStartPos.x;
           const rectDeltaY = currentPos.y - this.dragStartPos.y;
@@ -429,6 +436,7 @@ export class CanvasEditor {
           updatedAnnotation.width = Math.max(10, this.resizeStartDimensions.width + rectDeltaX);
           updatedAnnotation.height = Math.max(10, this.resizeStartDimensions.height + rectDeltaY);
           break;
+        }
         case 'line':
         case 'arrow':
           // Line/arrow resize logic - move endpoints
@@ -451,7 +459,7 @@ export class CanvasEditor {
     this.startTextEditing = (annotation) => {
       const newText = prompt(this.editTextPromptText, annotation.text);
       if (newText !== null && newText.trim()) {
-        const index = this.annotations.findIndex(a => a === annotation);
+        const index = this.annotations.findIndex((a) => a === annotation);
         if (index !== -1) {
           this.annotations[index] = Object.assign(Object.assign({}, annotation), { text: newText.trim() });
           this.selectedAnnotation = this.annotations[index];
@@ -462,7 +470,7 @@ export class CanvasEditor {
     // Update selected annotation font size
     this.updateSelectedTextSize = (newSize) => {
       if (this.selectedAnnotation && this.selectedAnnotation.type === 'text') {
-        const index = this.annotations.findIndex(a => a === this.selectedAnnotation);
+        const index = this.annotations.findIndex((a) => a === this.selectedAnnotation);
         if (index !== -1) {
           this.annotations[index] = Object.assign(Object.assign({}, this.selectedAnnotation), { fontSize: Math.max(8, Math.min(72, newSize)) });
           this.selectedAnnotation = this.annotations[index];
@@ -472,8 +480,9 @@ export class CanvasEditor {
     };
     // Update selected annotation border width
     this.updateSelectedBorderWidth = (newWidth) => {
-      if (this.selectedAnnotation && ['rectangle', 'line', 'arrow'].includes(this.selectedAnnotation.type)) {
-        const index = this.annotations.findIndex(a => a === this.selectedAnnotation);
+      if (this.selectedAnnotation &&
+        ['rectangle', 'line', 'arrow'].includes(this.selectedAnnotation.type)) {
+        const index = this.annotations.findIndex((a) => a === this.selectedAnnotation);
         if (index !== -1) {
           this.annotations[index] = Object.assign(Object.assign({}, this.selectedAnnotation), { lineWidth: Math.max(1, Math.min(20, newWidth)) });
           this.selectedAnnotation = this.annotations[index];
@@ -536,7 +545,7 @@ export class CanvasEditor {
             y: coords.y,
             text,
             color: this.canvasDrawingColor,
-            fontSize: this.canvasTextSize
+            fontSize: this.canvasTextSize,
           };
           this.annotations = [...this.annotations, annotation];
           this.redrawAnnotations();
@@ -549,7 +558,7 @@ export class CanvasEditor {
           startX: coords.x,
           startY: coords.y,
           color: this.canvasDrawingColor,
-          lineWidth: this.canvasLineWidth
+          lineWidth: this.canvasLineWidth,
         };
       }
     };
@@ -589,7 +598,7 @@ export class CanvasEditor {
             break;
         }
         // Update annotation in array
-        const index = this.annotations.findIndex(a => a === this.draggedAnnotation);
+        const index = this.annotations.findIndex((a) => a === this.draggedAnnotation);
         if (index !== -1) {
           this.annotations[index] = updatedAnnotation;
           this.draggedAnnotation = updatedAnnotation;
@@ -702,22 +711,26 @@ export class CanvasEditor {
     this.isPointInAnnotation = (x, y, annotation) => {
       const tolerance = 10; // Click tolerance
       switch (annotation.type) {
-        case 'rectangle':
+        case 'rectangle': {
           const left = Math.min(annotation.startX, annotation.startX + annotation.width);
           const right = Math.max(annotation.startX, annotation.startX + annotation.width);
           const top = Math.min(annotation.startY, annotation.startY + annotation.height);
           const bottom = Math.max(annotation.startY, annotation.startY + annotation.height);
-          return x >= left - tolerance && x <= right + tolerance &&
-            y >= top - tolerance && y <= bottom + tolerance;
+          return (x >= left - tolerance &&
+            x <= right + tolerance &&
+            y >= top - tolerance &&
+            y <= bottom + tolerance);
+        }
         case 'line':
-        case 'arrow':
+        case 'arrow': {
           // Distance from point to line
           const A = annotation.endY - annotation.startY;
           const B = annotation.startX - annotation.endX;
           const C = annotation.endX * annotation.startY - annotation.startX * annotation.endY;
           const distance = Math.abs(A * x + B * y + C) / Math.sqrt(A * A + B * B);
           return distance <= tolerance;
-        case 'text':
+        }
+        case 'text': {
           // Use actual text dimensions for better dragging
           const fontSize = annotation.fontSize || 24;
           const textWidth = this.getTextWidth(annotation.text, fontSize);
@@ -727,8 +740,8 @@ export class CanvasEditor {
           const textRight = annotation.x + textWidth + tolerance;
           const textTop = annotation.y - textHeight - tolerance;
           const textBottom = annotation.y + tolerance;
-          return x >= textLeft && x <= textRight &&
-            y >= textTop && y <= textBottom;
+          return x >= textLeft && x <= textRight && y >= textTop && y <= textBottom;
+        }
         default:
           return false;
       }
@@ -810,10 +823,10 @@ export class CanvasEditor {
         video: {
           mediaSource: 'screen',
           width: { ideal: window.innerWidth },
-          height: { ideal: window.innerHeight }
+          height: { ideal: window.innerHeight },
         },
         audio: false,
-        preferCurrentTab: true
+        preferCurrentTab: true,
       });
       // Create video element to capture frame
       const video = document.createElement('video');
@@ -833,20 +846,20 @@ export class CanvasEditor {
               const ctx = canvas.getContext('2d');
               ctx.drawImage(video, 0, 0);
               // Stop the stream
-              stream.getTracks().forEach(track => track.stop());
+              stream.getTracks().forEach((track) => track.stop());
               // Convert to data URL
               const dataUrl = canvas.toDataURL('image/png');
               console.log('Screenshot captured successfully using Screen Capture API');
               resolve(dataUrl);
             }
             catch (error) {
-              stream.getTracks().forEach(track => track.stop());
+              stream.getTracks().forEach((track) => track.stop());
               reject(error);
             }
           }, 100);
         };
         video.onerror = () => {
-          stream.getTracks().forEach(track => track.stop());
+          stream.getTracks().forEach((track) => track.stop());
           reject(new Error('Failed to load video for screenshot capture'));
         };
       });
@@ -858,7 +871,8 @@ export class CanvasEditor {
   }
   render() {
     var _a, _b, _c, _d, _e, _f;
-    return (h("div", { class: "canvas-editor-wrapper" }, this.showCanvasEditor && (h("div", { class: "canvas-editor-overlay" }, h("div", { class: "canvas-editor-modal" }, h("div", { class: "canvas-editor-header" }, h("div", { class: "canvas-editor-title" }, h("h3", null, this.canvasEditorTitle)), h("div", { class: "canvas-editor-toolbar" }, h("div", { class: "toolbar-section" }, h("div", { class: "tool-group" }, h("button", { class: `tool-btn ${this.canvasDrawingTool === 'rectangle' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'rectangle', title: "Rectangle" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-square" }, h("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'line' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'line', title: "Line" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-minus" }, h("path", { d: "M5 12h14" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'arrow' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'arrow', title: "Arrow" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-move-up-right" }, h("path", { d: "M13 5H19V11" }), h("path", { d: "M19 5L5 19" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'text' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'text', title: "Text" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-type" }, h("path", { d: "M12 4v16" }), h("path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" }), h("path", { d: "M9 20h6" }))), h("div", { class: "toolbar-divider" }), h("button", { class: "tool-btn undo-btn", onClick: this.undoLastAnnotation, disabled: this.annotations.length === 0, title: "Undo" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-undo" }, h("path", { d: "M3 7v6h6" }), h("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" }))), this.selectedAnnotation && (h("button", { class: "tool-btn delete-btn", onClick: this.deleteSelectedAnnotation, title: "Delete" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-trash-2" }, h("path", { d: "M3 6h18" }), h("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }), h("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }), h("line", { x1: "10", x2: "10", y1: "11", y2: "17" }), h("line", { x1: "14", x2: "14", y1: "11", y2: "17" })))))), h("div", { class: "toolbar-section" }, h("div", { class: "color-palette" }, this.defaultColors.map((color, index) => (h("div", { class: "color-slot-wrapper" }, h("button", { class: `color-btn ${this.canvasDrawingColor === color ? 'active' : ''} ${this.editingColorIndex === index ? 'editing' : ''}`, style: { backgroundColor: color }, onClick: () => this.handleColorSlotClick(index), title: `Color ${index + 1} - Click to customize` }, this.editingColorIndex === index && (h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "white", "stroke-width": "2" }, h("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" })))), this.editingColorIndex === index && this.showColorPicker && (h("div", { class: "color-picker-dropdown" }, h("input", { type: "color", value: color, onInput: (e) => this.handleColorPickerInput(e), onClick: (e) => this.handleColorPickerClick(e) })))))))), (this.selectedAnnotation || this.canvasDrawingTool) && (h("div", { class: "toolbar-section selected-annotation-controls" }, (((_a = this.selectedAnnotation) === null || _a === void 0 ? void 0 : _a.type) === 'text' || (!this.selectedAnnotation && this.canvasDrawingTool === 'text')) && (h("div", { class: "text-controls" }, h("div", { class: "font-size-control" }, h("label", null, this.sizeLabelText), h("input", { type: "range", min: "8", max: "72", value: ((_b = this.selectedAnnotation) === null || _b === void 0 ? void 0 : _b.fontSize) || this.canvasTextSize, onInput: (e) => {
+    return (h("div", { class: "canvas-editor-wrapper" }, this.showCanvasEditor && (h("div", { class: "canvas-editor-overlay", part: "overlay" }, h("div", { class: "canvas-editor-modal", part: "modal" }, h("div", { class: "canvas-editor-header", part: "header" }, h("div", { class: "canvas-editor-title", part: "title" }, h("h3", null, this.canvasEditorTitle)), h("div", { class: "canvas-editor-toolbar", part: "toolbar" }, h("div", { class: "toolbar-section" }, h("div", { class: "tool-group" }, h("button", { class: `tool-btn ${this.canvasDrawingTool === 'rectangle' ? 'active' : ''}`, part: "tool-button", onClick: () => (this.canvasDrawingTool = 'rectangle'), title: "Rectangle" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-square" }, h("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'line' ? 'active' : ''}`, part: "tool-button", onClick: () => (this.canvasDrawingTool = 'line'), title: "Line" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-minus" }, h("path", { d: "M5 12h14" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'arrow' ? 'active' : ''}`, part: "tool-button", onClick: () => (this.canvasDrawingTool = 'arrow'), title: "Arrow" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-move-up-right" }, h("path", { d: "M13 5H19V11" }), h("path", { d: "M19 5L5 19" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'text' ? 'active' : ''}`, part: "tool-button", onClick: () => (this.canvasDrawingTool = 'text'), title: "Text" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-type" }, h("path", { d: "M12 4v16" }), h("path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" }), h("path", { d: "M9 20h6" }))), h("div", { class: "toolbar-divider" }), h("button", { class: "tool-btn undo-btn", part: "tool-button", onClick: this.undoLastAnnotation, disabled: this.annotations.length === 0, title: "Undo" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-undo" }, h("path", { d: "M3 7v6h6" }), h("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" }))), this.selectedAnnotation && (h("button", { class: "tool-btn delete-btn", part: "tool-button", onClick: this.deleteSelectedAnnotation, title: "Delete" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-trash-2" }, h("path", { d: "M3 6h18" }), h("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }), h("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }), h("line", { x1: "10", x2: "10", y1: "11", y2: "17" }), h("line", { x1: "14", x2: "14", y1: "11", y2: "17" })))))), h("div", { class: "toolbar-section" }, h("div", { class: "color-palette" }, this.defaultColors.map((color, index) => (h("div", { class: "color-slot-wrapper" }, h("button", { class: `color-btn ${this.canvasDrawingColor === color ? 'active' : ''} ${this.editingColorIndex === index ? 'editing' : ''}`, style: { backgroundColor: color }, onClick: () => this.handleColorSlotClick(index), title: `Color ${index + 1} - Click to customize` }, this.editingColorIndex === index && (h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "white", "stroke-width": "2" }, h("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" })))), this.editingColorIndex === index && this.showColorPicker && (h("div", { class: "color-picker-dropdown" }, h("input", { type: "color", value: color, onInput: (e) => this.handleColorPickerInput(e), onClick: (e) => this.handleColorPickerClick(e) })))))))), (this.selectedAnnotation || this.canvasDrawingTool) && (h("div", { class: "toolbar-section selected-annotation-controls" }, (((_a = this.selectedAnnotation) === null || _a === void 0 ? void 0 : _a.type) === 'text' ||
+      (!this.selectedAnnotation && this.canvasDrawingTool === 'text')) && (h("div", { class: "text-controls" }, h("div", { class: "font-size-control" }, h("label", null, this.sizeLabelText), h("input", { type: "range", min: "8", max: "72", value: ((_b = this.selectedAnnotation) === null || _b === void 0 ? void 0 : _b.fontSize) || this.canvasTextSize, onInput: (e) => {
         const newSize = parseInt(e.target.value);
         if (this.selectedAnnotation) {
           this.updateSelectedTextSize(newSize);
@@ -866,8 +880,9 @@ export class CanvasEditor {
         else {
           this.canvasTextSize = newSize;
         }
-      }, class: "size-slider" }), h("span", { class: "size-value" }, ((_c = this.selectedAnnotation) === null || _c === void 0 ? void 0 : _c.fontSize) || this.canvasTextSize, "px")), this.selectedAnnotation && (h("button", { class: "action-btn small", onClick: () => this.startTextEditing(this.selectedAnnotation) }, this.editTextButtonText)))), ((['rectangle', 'line', 'arrow'].includes((_d = this.selectedAnnotation) === null || _d === void 0 ? void 0 : _d.type)) ||
-      (!this.selectedAnnotation && ['rectangle', 'line', 'arrow'].includes(this.canvasDrawingTool))) && (h("div", { class: "shape-controls" }, h("div", { class: "border-width-control" }, h("label", null, this.borderLabelText), h("input", { type: "range", min: "1", max: "20", value: ((_e = this.selectedAnnotation) === null || _e === void 0 ? void 0 : _e.lineWidth) || this.canvasLineWidth, onInput: (e) => {
+      }, class: "size-slider" }), h("span", { class: "size-value" }, ((_c = this.selectedAnnotation) === null || _c === void 0 ? void 0 : _c.fontSize) || this.canvasTextSize, "px")), this.selectedAnnotation && (h("button", { class: "action-btn small", onClick: () => this.startTextEditing(this.selectedAnnotation) }, this.editTextButtonText)))), (['rectangle', 'line', 'arrow'].includes((_d = this.selectedAnnotation) === null || _d === void 0 ? void 0 : _d.type) ||
+      (!this.selectedAnnotation &&
+        ['rectangle', 'line', 'arrow'].includes(this.canvasDrawingTool))) && (h("div", { class: "shape-controls" }, h("div", { class: "border-width-control" }, h("label", null, this.borderLabelText), h("input", { type: "range", min: "1", max: "20", value: ((_e = this.selectedAnnotation) === null || _e === void 0 ? void 0 : _e.lineWidth) || this.canvasLineWidth, onInput: (e) => {
         const newWidth = parseInt(e.target.value);
         if (this.selectedAnnotation) {
           this.updateSelectedBorderWidth(newWidth);
@@ -875,7 +890,7 @@ export class CanvasEditor {
         else {
           this.canvasLineWidth = newWidth;
         }
-      }, class: "size-slider" }), h("span", { class: "size-value" }, ((_f = this.selectedAnnotation) === null || _f === void 0 ? void 0 : _f.lineWidth) || this.canvasLineWidth, "px")))))), h("div", { class: "toolbar-section" }, h("button", { class: "action-btn secondary", onClick: this.closeCanvasEditor }, this.canvasEditorCancelText), h("button", { class: "action-btn primary", onClick: this.saveAnnotations }, this.canvasEditorSaveText))), h("div", { class: "canvas-editor-content" }, h("canvas", { ref: (el) => this.canvasRef = el, class: "annotation-canvas", onMouseDown: this.handleCanvasMouseDown, onMouseMove: this.handleCanvasMouseMove, onMouseUp: this.handleCanvasMouseUp, onMouseLeave: this.handleCanvasMouseUp }))))))));
+      }, class: "size-slider" }), h("span", { class: "size-value" }, ((_f = this.selectedAnnotation) === null || _f === void 0 ? void 0 : _f.lineWidth) || this.canvasLineWidth, "px")))))), h("div", { class: "toolbar-section" }, h("button", { class: "action-btn secondary", part: "cancel-button", onClick: this.closeCanvasEditor }, this.canvasEditorCancelText), h("button", { class: "action-btn primary", part: "save-button", onClick: this.saveAnnotations }, this.canvasEditorSaveText))), h("div", { class: "canvas-editor-content", part: "content" }, h("canvas", { ref: (el) => (this.canvasRef = el), class: "annotation-canvas", part: "canvas", onMouseDown: this.handleCanvasMouseDown, onMouseMove: this.handleCanvasMouseMove, onMouseUp: this.handleCanvasMouseUp, onMouseLeave: this.handleCanvasMouseUp }))))))));
   }
   static get is() { return "canvas-editor"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/feedback-button/feedback-button.js

@@ -188,7 +188,7 @@ export class FeedbackButton {
       else if (res.status === 202) {
         const limitExceededBody = {
           message: "You received a new feedback entry. You've reached the 25 message limit for your current plan. Upgrade to continue receiving feedback.",
-          id: await res.json()
+          id: await res.json(),
         };
         this.feedbackSent.emit({ feedback: limitExceededBody });
       }
@@ -210,7 +210,7 @@ export class FeedbackButton {
     }
   }
   render() {
-    return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition} ${this.customFont ? 'feedback-button-content--custom-font' : ''} ${this.hideMobile ? 'feedback-button-content--hide-mobile' : ''}`, onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle != 'default' && (h("span", { class: "feedback-button-content-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon-edit" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), h("slot", null))));
+    return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition} ${this.customFont ? 'feedback-button-content--custom-font' : ''} ${this.hideMobile ? 'feedback-button-content--hide-mobile' : ''}`, part: "button", onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle != 'default' && (h("span", { class: "feedback-button-content-icon", part: "icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon-edit" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), h("slot", null))));
   }
   static get is() { return "feedback-button"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/feedback-modal/feedback-modal.css

@@ -154,6 +154,16 @@
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--positive {
+  background-color: var(--feedback-modal-rating-button-positive-bg-color);
+  border-color: var(--feedback-modal-rating-button-positive-border-color);
+}
+
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--negative {
+  background-color: var(--feedback-modal-rating-button-negative-bg-color);
+  border-color: var(--feedback-modal-rating-button-negative-border-color);
+}
+
 .feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
@@ -176,6 +186,36 @@
   cursor: pointer;
 }
 
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--positive svg {
+  stroke: var(--feedback-modal-rating-button-positive-color);
+}
+
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--negative svg {
+  stroke: var(--feedback-modal-rating-button-negative-color);
+}
+
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--positive:hover,
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--positive.feedback-modal-rating-button--selected {
+  background-color: var(--feedback-modal-rating-button-positive-selected-bg-color);
+  border-color: var(--feedback-modal-rating-button-positive-selected-border-color);
+}
+
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--negative:hover,
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--negative.feedback-modal-rating-button--selected {
+  background-color: var(--feedback-modal-rating-button-negative-selected-bg-color);
+  border-color: var(--feedback-modal-rating-button-negative-selected-border-color);
+}
+
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--positive:hover svg,
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--positive.feedback-modal-rating-button--selected svg {
+  stroke: var(--feedback-modal-rating-button-positive-selected-color);
+}
+
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--negative:hover svg,
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--negative.feedback-modal-rating-button--selected svg {
+  stroke: var(--feedback-modal-rating-button-negative-selected-color);
+}
+
 .feedback-modal-rating-buttons--stars .feedback-modal-rating-button--selected svg {
   fill: var(--feedback-modal-rating-button-stars-selected-color);
   stroke: var(--feedback-modal-rating-button-stars-selected-color);

package/dist/collection/components/feedback-modal/feedback-modal.js

@@ -51,7 +51,7 @@ export class FeedbackModal {
         else if (res.status === 202) {
           const limitExceededBody = {
             message: "You received a new feedback entry. You've reached the 25 message limit for your current plan. Upgrade to continue receiving feedback.",
-            id: await res.json()
+            id: await res.json(),
           };
           this.feedbackSent.emit({ feedback: limitExceededBody });
           this.formSuccess = true;
@@ -94,7 +94,7 @@ export class FeedbackModal {
         this.hasSelectedElement = false;
         this.encodedScreenshot = null;
         // Remove highlight from ALL selected elements
-        document.querySelectorAll('.feedback-modal-element-selected').forEach(el => {
+        document.querySelectorAll('.feedback-modal-element-selected').forEach((el) => {
           el.classList.remove('feedback-modal-element-selected');
         });
         // Reset form states
@@ -272,7 +272,7 @@ export class FeedbackModal {
       // Wait for grecaptcha to be available
       let attempts = 0;
       while (!window['grecaptcha'] && attempts < 50) {
-        await new Promise(resolve => setTimeout(resolve, 100));
+        await new Promise((resolve) => setTimeout(resolve, 100));
         attempts++;
       }
       if (!window['grecaptcha']) {
@@ -284,7 +284,7 @@ export class FeedbackModal {
         window['grecaptcha'].ready(async () => {
           try {
             const token = await window['grecaptcha'].execute(this.recaptchaSiteKey, {
-              action: 'submit_feedback'
+              action: 'submit_feedback',
             });
             resolve(token);
           }
@@ -322,23 +322,28 @@ export class FeedbackModal {
     this.selectedRating = newRating;
   }
   render() {
-    return (h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''} ${this.embedded ? 'feedback-modal-wrapper--embedded' : ''}` }, this.showCanvasEditor && (h("canvas-editor", { ref: (el) => this.canvasEditorRef = el, "canvas-editor-title": this.screenshotEditorTitle, "canvas-editor-cancel-text": this.screenshotEditorCancelText, "canvas-editor-save-text": this.screenshotEditorSaveText, "screenshot-taking-text": this.screenshotTakingText, "screenshot-attached-text": this.screenshotAttachedText, "screenshot-button-text": this.screenshotButtonText, "auto-start-screenshot": this.autoStartCapture, "existing-screenshot": this.encodedScreenshot || '', "edit-text-button-text": this.screenshotEditTextButtonText, "size-label-text": this.screenshotSizeLabelText, "border-label-text": this.screenshotBorderLabelText, "edit-text-prompt-text": this.screenshotEditTextPromptText, "screenshot-error-general": this.screenshotErrorGeneral, "screenshot-error-permission": this.screenshotErrorPermission, "screenshot-error-not-supported": this.screenshotErrorNotSupported, "screenshot-error-not-found": this.screenshotErrorNotFound, "screenshot-error-cancelled": this.screenshotErrorCancelled, "screenshot-error-browser-not-supported": this.screenshotErrorBrowserNotSupported, "screenshot-error-unexpected": this.screenshotErrorUnexpected, onScreenshotReady: this.handleScreenshotReady, onScreenshotCancelled: this.handleScreenshotCancelled, onScreenshotFailed: this.handleScreenshotError })), this.showScreenshotError && (h("div", { class: "screenshot-error-notification" }, h("div", { class: "screenshot-error-content" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), h("line", { x1: "9", y1: "9", x2: "15", y2: "15" })), h("span", null, this.screenshotError), h("button", { class: "error-close-btn", onClick: () => this.showScreenshotError = false, title: "Close" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))))), this.showModal && !this.embedded && (h("div", { class: `feedback-overlay ${this.isAnimating ? 'feedback-overlay--visible' : ''}` })), this.showModal && (h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating ? 'feedback-modal-content--open' : ''} ${this.embedded ? 'feedback-modal-content--embedded' : ''}`, ref: (el) => (this.modalContent = el) }, h("div", { class: `feedback-modal-header ${(this.formSuccess && !this.successMessage) || (this.formError && !this.errorMessage) ? 'feedback-modal-header--no-content' : ''}` }, h("div", { class: "feedback-modal-header-content" }, !this.formSuccess && !this.formError ? (h("div", { class: "feedback-modal-header-text" }, h("span", { class: "feedback-modal-title" }, this.modalTitle), !this.whitelabel && (h("span", { class: "feedback-modal-powered-by" }, "Powered by", ' ', h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback"))))) : this.formSuccess ? (h("span", { class: "feedback-modal-title" }, this.modalTitleSuccess)) : (h("span", { class: "feedback-modal-title" }, this.modalTitleError))), !this.embedded && (h("button", { class: "feedback-modal-close", onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))), h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (h("form", { onSubmit: this.handleSubmit }, !this.hideRating && (h("div", { class: "feedback-modal-rating" }, this.ratingMode === 'thumbs' ? (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading" }, this.ratingPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs" }, h("button", { title: "Yes", class: `feedback-modal-rating-button ${this.selectedRating === 1
+    return (h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''} ${this.embedded ? 'feedback-modal-wrapper--embedded' : ''}`, part: "wrapper" }, this.showCanvasEditor && (h("canvas-editor", { ref: (el) => (this.canvasEditorRef = el), exportparts: "overlay: canvas-editor-overlay, modal: canvas-editor-modal, header: canvas-editor-header, title: canvas-editor-title, toolbar: canvas-editor-toolbar, tool-button: canvas-editor-tool-button, cancel-button: canvas-editor-cancel-button, save-button: canvas-editor-save-button, content: canvas-editor-content, canvas: canvas-editor-canvas", "canvas-editor-title": this.screenshotEditorTitle, "canvas-editor-cancel-text": this.screenshotEditorCancelText, "canvas-editor-save-text": this.screenshotEditorSaveText, "screenshot-taking-text": this.screenshotTakingText, "screenshot-attached-text": this.screenshotAttachedText, "screenshot-button-text": this.screenshotButtonText, "auto-start-screenshot": this.autoStartCapture, "existing-screenshot": this.encodedScreenshot || '', "edit-text-button-text": this.screenshotEditTextButtonText, "size-label-text": this.screenshotSizeLabelText, "border-label-text": this.screenshotBorderLabelText, "edit-text-prompt-text": this.screenshotEditTextPromptText, "screenshot-error-general": this.screenshotErrorGeneral, "screenshot-error-permission": this.screenshotErrorPermission, "screenshot-error-not-supported": this.screenshotErrorNotSupported, "screenshot-error-not-found": this.screenshotErrorNotFound, "screenshot-error-cancelled": this.screenshotErrorCancelled, "screenshot-error-browser-not-supported": this.screenshotErrorBrowserNotSupported, "screenshot-error-unexpected": this.screenshotErrorUnexpected, onScreenshotReady: this.handleScreenshotReady, onScreenshotCancelled: this.handleScreenshotCancelled, onScreenshotFailed: this.handleScreenshotError })), this.showScreenshotError && (h("div", { class: "screenshot-error-notification" }, h("div", { class: "screenshot-error-content" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), h("line", { x1: "9", y1: "9", x2: "15", y2: "15" })), h("span", null, this.screenshotError), h("button", { class: "error-close-btn", onClick: () => (this.showScreenshotError = false), title: "Close" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))))), this.showModal && !this.embedded && (h("div", { class: `feedback-overlay ${this.isAnimating ? 'feedback-overlay--visible' : ''}`, part: "overlay" })), this.showModal && (h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating ? 'feedback-modal-content--open' : ''} ${this.embedded ? 'feedback-modal-content--embedded' : ''}`, part: "modal", ref: (el) => (this.modalContent = el) }, h("div", { class: `feedback-modal-header ${(this.formSuccess && !this.successMessage) || (this.formError && !this.errorMessage)
+        ? 'feedback-modal-header--no-content'
+        : ''}`, part: "header" }, h("div", { class: "feedback-modal-header-content" }, !this.formSuccess && !this.formError ? (h("div", { class: "feedback-modal-header-text" }, h("span", { class: "feedback-modal-title", part: "title" }, this.modalTitle), !this.whitelabel && (h("span", { class: "feedback-modal-powered-by", part: "powered-by" }, "Powered by", ' ', h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback"))))) : this.formSuccess ? (h("span", { class: "feedback-modal-title", part: "title" }, this.modalTitleSuccess)) : (h("span", { class: "feedback-modal-title", part: "title" }, this.modalTitleError))), !this.embedded && (h("button", { class: "feedback-modal-close", part: "close-button", onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))), h("div", { class: "feedback-modal-body", part: "body" }, !this.formSuccess && !this.formError ? (h("form", { part: "form", onSubmit: this.handleSubmit }, !this.hideRating && (h("div", { class: "feedback-modal-rating", part: "rating" }, this.ratingMode === 'thumbs' ? (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading", part: "rating-title" }, this.ratingPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs", part: "rating-buttons" }, h("button", { title: "Yes", class: `feedback-modal-rating-button feedback-modal-rating-button--positive ${this.selectedRating === 1
         ? 'feedback-modal-rating-button--selected'
-        : ''}`, onClick: (event) => {
+        : ''}`, part: "rating-button rating-button-positive", onClick: (event) => {
         event.preventDefault();
         this.handleRatingChange(1);
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }))), h("button", { title: "No", class: `feedback-modal-rating-button ${this.selectedRating === 5
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }))), h("button", { title: "No", class: `feedback-modal-rating-button feedback-modal-rating-button--negative ${this.selectedRating === 5
         ? 'feedback-modal-rating-button--selected'
-        : ''}`, onClick: (event) => {
+        : ''}`, part: "rating-button rating-button-negative", onClick: (event) => {
         event.preventDefault();
         this.handleRatingChange(5);
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" })))))) : (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading" }, this.ratingStarsPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--stars" }, [1, 2, 3, 4, 5].map((rating) => (h("button", { key: rating, class: `feedback-modal-rating-button ${this.selectedRating >= rating
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" })))))) : (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading", part: "rating-title" }, this.ratingStarsPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--stars", part: "rating-buttons" }, [1, 2, 3, 4, 5].map((rating) => (h("button", { key: rating, class: `feedback-modal-rating-button ${this.selectedRating >= rating
         ? 'feedback-modal-rating-button--selected'
-        : ''}`, onClick: (event) => {
+        : ''}`, part: "rating-button", onClick: (event) => {
         event.preventDefault();
         this.handleRatingChange(rating);
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), h("div", { class: "feedback-modal-text" }, h("textarea", { placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (h("div", { class: "feedback-modal-email" }, h("input", { placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail, required: this.isEmailRequired }))), h("div", { class: "feedback-verification" }, h("input", { type: "text", name: "verification", style: { display: 'none' }, onInput: (event) => this.handleVerification(event), value: this.formVerification })), !this.hidePrivacyPolicy && (h("div", { class: "feedback-modal-privacy" }, h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), h("span", { innerHTML: this.privacyPolicyText }))), h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}` }, !this.hideScreenshotButton && (h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? 'feedback-modal-button--active' : ''}`, onClick: this.openScreenShot, disabled: this.sending || this.takingScreenshot }, this.encodedScreenshot && (h("div", { class: "screenshot-preview", onClick: this.openCanvasEditor }, h("img", { src: this.encodedScreenshot, alt: "Screenshot Preview" }))), !this.encodedScreenshot && !this.takingScreenshot && (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" }))), this.takingScreenshot && (h("div", { class: "screenshot-loading" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#666", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather-loader" }, h("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), h("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), h("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), h("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), h("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), h("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), h("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), h("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })))), this.takingScreenshot ? this.screenshotTakingText :
-      this.encodedScreenshot ? this.screenshotAttachedText : this.screenshotButtonText)), h("button", { class: "feedback-modal-button feedback-modal-button--submit", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (h("div", { class: "feedback-modal-success" }, h("p", { class: "feedback-modal-message" }, this.successMessage))) : this.formError && this.formErrorStatus == 404 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 403 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage403)) : this.formError ? (h("p", { class: "feedback-modal-message" }, this.errorMessage)) : (h("span", null))), !this.formSuccess && !this.formError && (this.recaptchaEnabled || this.footerText) && (h("div", { class: "feedback-modal-footer" }, h("div", { class: "feedback-footer-combined" }, this.recaptchaEnabled && (h("span", { innerHTML: this.recaptchaText })), this.recaptchaEnabled && this.footerText && ' ', this.footerText && (h("span", { innerHTML: this.footerText })))))))));
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), h("div", { class: "feedback-modal-text" }, h("textarea", { part: "message-input", placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (h("div", { class: "feedback-modal-email" }, h("input", { part: "email-input", placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail, required: this.isEmailRequired }))), h("div", { class: "feedback-verification" }, h("input", { type: "text", name: "verification", style: { display: 'none' }, onInput: (event) => this.handleVerification(event), value: this.formVerification })), !this.hidePrivacyPolicy && (h("div", { class: "feedback-modal-privacy", part: "privacy" }, h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), h("span", { innerHTML: this.privacyPolicyText }))), h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}`, part: "buttons" }, !this.hideScreenshotButton && (h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? 'feedback-modal-button--active' : ''}`, part: "screenshot-button", onClick: this.openScreenShot, disabled: this.sending || this.takingScreenshot }, this.encodedScreenshot && (h("div", { class: "screenshot-preview", onClick: this.openCanvasEditor }, h("img", { src: this.encodedScreenshot, alt: "Screenshot Preview" }))), !this.encodedScreenshot && !this.takingScreenshot && (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" }))), this.takingScreenshot && (h("div", { class: "screenshot-loading" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#666", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather-loader" }, h("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), h("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), h("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), h("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), h("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), h("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), h("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), h("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })))), this.takingScreenshot
+      ? this.screenshotTakingText
+      : this.encodedScreenshot
+        ? this.screenshotAttachedText
+        : this.screenshotButtonText)), h("button", { class: "feedback-modal-button feedback-modal-button--submit", part: "submit-button", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (h("div", { class: "feedback-modal-success" }, h("p", { class: "feedback-modal-message", part: "success-message" }, this.successMessage))) : this.formError && this.formErrorStatus == 404 ? (h("p", { class: "feedback-modal-message", part: "error-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 403 ? (h("p", { class: "feedback-modal-message", part: "error-message" }, this.errorMessage403)) : this.formError ? (h("p", { class: "feedback-modal-message", part: "error-message" }, this.errorMessage)) : (h("span", null))), !this.formSuccess && !this.formError && (this.recaptchaEnabled || this.footerText) && (h("div", { class: "feedback-modal-footer", part: "footer" }, h("div", { class: "feedback-footer-combined" }, this.recaptchaEnabled && h("span", { innerHTML: this.recaptchaText }), this.recaptchaEnabled && this.footerText && ' ', this.footerText && h("span", { innerHTML: this.footerText }))))))));
   }
   componentDidRender() {
     if (this.showModal) {