pushfeedback 0.1.74 → 0.1.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/canvas-editor_3.cjs.entry.js +28 -8
  2. package/dist/collection/components/canvas-editor/canvas-editor.css +42 -3
  3. package/dist/collection/components/canvas-editor/canvas-editor.js +25 -5
  4. package/dist/collection/components/feedback-button/feedback-button.css +1 -0
  5. package/dist/collection/components/feedback-modal/feedback-modal.css +43 -0
  6. package/dist/components/canvas-editor2.js +26 -6
  7. package/dist/components/feedback-button.js +1 -1
  8. package/dist/components/feedback-modal2.js +1 -1
  9. package/dist/esm/canvas-editor_3.entry.js +28 -8
  10. package/dist/pushfeedback/p-92ebcaa3.entry.js +1 -0
  11. package/dist/pushfeedback/pushfeedback.css +1 -1
  12. package/dist/pushfeedback/pushfeedback.esm.js +1 -1
  13. package/dist/types/components/canvas-editor/canvas-editor.d.ts +3 -0
  14. package/package.json +1 -1
  15. package/dist/pushfeedback/p-03fe0ff1.entry.js +0 -1
package/dist/cjs/canvas-editor_3.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-9a8f4784.js');
6
6
 
7
- const canvasEditorCss = ":host{display:block}.canvas-editor-wrapper{position:relative}.canvas-editor-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.8);display:flex;align-items:center;justify-content:center;z-index:9999}.canvas-editor-modal{width:95vw;max-width:1400px;max-height:900px;background:var(--feedback-canvas-editor-bg-color, #ffffff);border-radius:8px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2)}.canvas-editor-header{background:var(--feedback-canvas-editor-header-bg-color, #f5f5f5);border-bottom:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);padding:12px 16px;display:flex;flex-direction:column;gap:12px}.canvas-editor-title h3{margin:0;font-size:16px;font-weight:600;color:var(--feedback-canvas-editor-tool-text-color, #333)}.canvas-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.toolbar-section{display:flex;align-items:center;gap:8px}.tool-group{display:flex;align-items:center;gap:4px}.tool-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;transition:all 0.2s ease;padding:0}.tool-btn svg{width:18px;height:18px;color:var(--feedback-canvas-editor-tool-text-color, #333)}.tool-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.tool-btn.active,.tool-btn.active:hover{background:var(--feedback-canvas-editor-tool-bg-active, #0070f4);color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn.active svg{color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn:disabled{opacity:0.4;cursor:not-allowed;color:var(--feedback-canvas-editor-tool-text-color, #333)}.toolbar-divider{width:1px;height:24px;background:var(--feedback-canvas-editor-divider-color, #e0e0e0);margin:0 4px}.undo-btn{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff) !important;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0) !important}.undo-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0) !important}.color-palette{display:flex;align-items:center;gap:6px}.color-slot-wrapper{position:relative;display:flex;align-items:center}.color-btn{width:32px;height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0)}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:var(--feedback-primary-color, #0070f4);box-shadow:0 0 0 2px rgba(0, 112, 244, 0.2)}.color-btn.editing{border-color:var(--feedback-primary-color, #0070f4)}.color-picker-dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1)}.color-picker-dropdown input[type=\"color\"]{width:40px;height:40px;border:none;border-radius:4px;cursor:pointer}.size-control{display:flex;align-items:center;gap:8px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:6px 12px}.size-slider{width:80px;height:20px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.size-slider::-webkit-slider-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;cursor:pointer}.size-slider::-moz-range-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none}.size-slider::-moz-range-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-slider::-ms-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none;color:transparent}.size-slider::-ms-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-value{font-weight:500;color:var(--feedback-canvas-editor-tool-text-color, #333);font-size:12px;min-width:30px}.selected-annotation-controls{border-left:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:12px;margin-left:8px;min-width:200px}.text-controls{display:flex;flex-direction:row;align-items:center;gap:12px}.font-size-control,.border-width-control{display:flex;align-items:center;gap:6px}.font-size-control label,.border-width-control label{font-size:12px;color:var(--feedback-canvas-editor-tool-text-color, #333);font-weight:500;min-width:35px}.action-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.2s ease;min-width:65px;justify-content:center;height:36px}.action-btn.secondary{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);color:var(--feedback-canvas-editor-tool-text-color, #333);border-color:var(--feedback-canvas-editor-border-color, #e0e0e0)}.action-btn.secondary:hover{background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.action-btn.primary{background:var(--feedback-primary-color, #0070f4);color:#ffffff;border-color:var(--feedback-primary-color, #0070f4)}.action-btn.primary:hover{background:#0056cc;border-color:#0056cc}.action-btn.small{height:28px;padding:4px 8px;font-size:12px;min-width:65px}.shape-controls{display:flex;flex-direction:column;gap:8px}.canvas-editor-content{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--feedback-canvas-editor-content-bg, #f5f5f5);overflow:hidden;min-height:0;min-width:0}.annotation-canvas{max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;border-radius:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);background:#ffffff;transition:box-shadow 0.3s ease;object-fit:contain;display:block}.annotation-canvas:hover{box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20)}@media screen and (max-width: 768px){.canvas-editor-modal{width:100vw;height:100vh;border-radius:0}.canvas-editor-toolbar{flex-direction:column;align-items:stretch;gap:8px}.toolbar-section{justify-content:center}.selected-annotation-controls{border-left:none;border-top:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:0;padding-top:8px;margin-left:0;margin-top:8px;min-width:auto}}";
7
+ const canvasEditorCss = ":host{display:block}.canvas-editor-wrapper{position:relative}.canvas-editor-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.8);display:flex;align-items:center;justify-content:center;z-index:9999}.canvas-editor-modal{width:95vw;height:95vh;max-width:none;max-height:none;background:var(--feedback-canvas-editor-bg-color, #ffffff);border-radius:8px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2)}.canvas-editor-header{background:var(--feedback-canvas-editor-header-bg-color, #f5f5f5);border-bottom:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);padding:12px 16px;display:flex;flex-direction:column;gap:12px}.canvas-editor-title h3{margin:0;font-size:16px;font-weight:600;color:var(--feedback-canvas-editor-tool-text-color, #333)}.canvas-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.toolbar-section{display:flex;align-items:center;gap:8px}.tool-group{display:flex;align-items:center;gap:4px}.tool-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;transition:all 0.2s ease;padding:0}.tool-btn svg{width:18px;height:18px;color:var(--feedback-canvas-editor-tool-text-color, #333)}.tool-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.tool-btn.active,.tool-btn.active:hover{background:var(--feedback-canvas-editor-tool-bg-active, #0070f4);color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn.active svg{color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn:disabled{opacity:0.4;cursor:not-allowed;color:var(--feedback-canvas-editor-tool-text-color, #333)}.toolbar-divider{width:1px;height:24px;background:var(--feedback-canvas-editor-divider-color, #e0e0e0);margin:0 4px}.undo-btn{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff) !important;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0) !important}.undo-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0) !important}.color-palette{display:flex;align-items:center;gap:6px}.color-slot-wrapper{position:relative;display:flex;align-items:center}.color-btn{width:32px;height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0)}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:var(--feedback-primary-color, #0070f4);box-shadow:0 0 0 2px rgba(0, 112, 244, 0.2)}.color-btn.editing{border-color:var(--feedback-primary-color, #0070f4)}.color-picker-dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1)}.color-picker-dropdown input[type=\"color\"]{width:40px;height:40px;border:none;border-radius:4px;cursor:pointer}.size-control{display:flex;align-items:center;gap:8px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:6px 12px}.size-slider{width:80px;height:20px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.size-slider::-webkit-slider-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;cursor:pointer}.size-slider::-moz-range-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none}.size-slider::-moz-range-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-slider::-ms-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none;color:transparent}.size-slider::-ms-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-value{font-weight:500;color:var(--feedback-canvas-editor-tool-text-color, #333);font-size:12px;min-width:30px}.selected-annotation-controls{border-left:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:12px;margin-left:8px;min-width:200px}.text-controls{display:flex;flex-direction:row;align-items:center;gap:12px}.font-size-control,.border-width-control{display:flex;align-items:center;gap:6px}.font-size-control label,.border-width-control label{font-size:12px;color:var(--feedback-canvas-editor-tool-text-color, #333);font-weight:500;min-width:35px}.action-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.2s ease;min-width:65px;justify-content:center;height:36px}.action-btn.secondary{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);color:var(--feedback-canvas-editor-tool-text-color, #333);border-color:var(--feedback-canvas-editor-border-color, #e0e0e0)}.action-btn.secondary:hover{background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.action-btn.primary{background:var(--feedback-primary-color, #0070f4);color:#ffffff;border-color:var(--feedback-primary-color, #0070f4)}.action-btn.primary:hover{background:#0056cc;border-color:#0056cc}.action-btn.small{height:28px;padding:4px 8px;font-size:12px;min-width:65px}.shape-controls{display:flex;flex-direction:column;gap:8px}.canvas-editor-content{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--feedback-canvas-editor-content-bg, #f5f5f5);overflow:hidden;min-height:0;min-width:0}.annotation-canvas{max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;border-radius:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);background:#ffffff;transition:box-shadow 0.3s ease;object-fit:contain;display:block}.annotation-canvas:hover{box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20)}@media screen and (min-width: 1920px){.canvas-editor-modal{width:90vw;height:90vh}.canvas-editor-content{padding:32px}}@media screen and (min-width: 1200px) and (max-width: 1919px){.canvas-editor-modal{width:92vw;height:92vh}.canvas-editor-content{padding:28px}}@media screen and (min-width: 769px) and (max-width: 1199px){.canvas-editor-modal{width:95vw;height:95vh}}@media screen and (max-width: 768px){.canvas-editor-modal{width:100vw;height:100vh;border-radius:0}.canvas-editor-toolbar{flex-direction:column;align-items:stretch;gap:8px}.toolbar-section{justify-content:center}.selected-annotation-controls{border-left:none;border-top:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:0;padding-top:8px;margin-left:0;margin-top:8px;min-width:auto}.canvas-editor-content{padding:16px}}";
8
8
 
9
9
  const CanvasEditor = class {
10
10
  constructor(hostRef) {
@@ -12,6 +12,17 @@ const CanvasEditor = class {
12
12
  this.screenshotReady = index.createEvent(this, "screenshotReady", 7);
13
13
  this.screenshotCancelled = index.createEvent(this, "screenshotCancelled", 7);
14
14
  this.screenshotFailed = index.createEvent(this, "screenshotFailed", 7);
15
+ this.handleWindowResize = () => {
16
+ // Debounce resize events
17
+ if (this.resizeTimeout) {
18
+ clearTimeout(this.resizeTimeout);
19
+ }
20
+ this.resizeTimeout = setTimeout(() => {
21
+ if (this.showCanvasEditor && this.originalImageData) {
22
+ this.initializeCanvas();
23
+ }
24
+ }, 250);
25
+ };
15
26
  this.openScreenShot = async () => {
16
27
  // Show loading state immediately
17
28
  this.takingScreenshot = true;
@@ -107,14 +118,16 @@ const CanvasEditor = class {
107
118
  // Set canvas to original image dimensions
108
119
  this.canvasRef.width = img.width;
109
120
  this.canvasRef.height = img.height;
110
- // Get available container dimensions
111
- const containerWidth = this.canvasRef.parentElement.clientWidth - 32;
112
- const containerHeight = this.canvasRef.parentElement.clientHeight - 32;
121
+ // Get available container dimensions with more generous padding
122
+ const containerWidth = this.canvasRef.parentElement.clientWidth - 48;
123
+ const containerHeight = this.canvasRef.parentElement.clientHeight - 48;
113
124
  // Calculate scale factors for both dimensions
114
125
  const scaleX = containerWidth / img.width;
115
126
  const scaleY = containerHeight / img.height;
116
- // Use the smaller scale to ensure complete image fits
117
- const scale = Math.min(scaleX, scaleY, 1);
127
+ // Use a more aggressive scaling approach for large screens
128
+ // Allow scaling up to 1.5x on very large screens, but still maintain aspect ratio
129
+ const maxScale = window.innerWidth > 1920 ? 1.5 : (window.innerWidth > 1200 ? 1.2 : 1);
130
+ const scale = Math.min(scaleX, scaleY, maxScale);
118
131
  // Calculate final display dimensions
119
132
  const displayWidth = img.width * scale;
120
133
  const displayHeight = img.height * scale;
@@ -779,6 +792,13 @@ const CanvasEditor = class {
779
792
  this.initializeCanvas();
780
793
  }, 100);
781
794
  }
795
+ // Add window resize listener for canvas adaptation
796
+ this.handleWindowResize = this.handleWindowResize.bind(this);
797
+ window.addEventListener('resize', this.handleWindowResize);
798
+ }
799
+ disconnectedCallback() {
800
+ // Clean up resize listener
801
+ window.removeEventListener('resize', this.handleWindowResize);
782
802
  }
783
803
  async captureViewportScreenshot() {
784
804
  try {
@@ -861,7 +881,7 @@ const CanvasEditor = class {
861
881
  };
862
882
  CanvasEditor.style = canvasEditorCss;
863
883
 
864
- const feedbackButtonCss = ".feedback-button-content{cursor:pointer;max-width:fit-content;z-index:var(--feedback-button-z-index);font-family:var(--feedback-font-family)}.feedback-button-content--custom-font{font-family:inherit}.feedback-button-content--light{align-items:center;background-color:var(--feedback-button-light-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-light-text-color);display:flex;font-size:var(--feedback-button-text-font-size);font-weight:var(--feedback-button-text-font-weight);padding:8px 15px}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-button-dark-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-dark-text-color);display:flex;font-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.icon-edit{stroke:var(--feedback-button-light-icon-color)}.feedback-button-content--dark .icon-edit{stroke:var(--feedback-button-dark-icon-color)}.feedback-button-content--bottom-right{bottom:10px;position:fixed;right:10px}.feedback-button-content--center-right{position:fixed;transform:rotate(-90deg) translateY(-50%);top:50%}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-left-radius:0px;border-bottom-right-radius:0px}.feedback-button-content-icon{height:16px;margin-right:5px;width:16px}.feedback-button-content--center-right .feedback-button-content-icon{rotate:90deg}@media screen and (max-width: 767px){.feedback-button-content--hide-mobile{display:none}}";
884
+ const feedbackButtonCss = ".feedback-button-content{cursor:pointer;max-width:fit-content;letter-spacing:var(--feedback-button-letter-spacing);z-index:var(--feedback-button-z-index);font-family:var(--feedback-font-family)}.feedback-button-content--custom-font{font-family:inherit}.feedback-button-content--light{align-items:center;background-color:var(--feedback-button-light-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-light-text-color);display:flex;font-size:var(--feedback-button-text-font-size);font-weight:var(--feedback-button-text-font-weight);padding:8px 15px}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-button-dark-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-dark-text-color);display:flex;font-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.icon-edit{stroke:var(--feedback-button-light-icon-color)}.feedback-button-content--dark .icon-edit{stroke:var(--feedback-button-dark-icon-color)}.feedback-button-content--bottom-right{bottom:10px;position:fixed;right:10px}.feedback-button-content--center-right{position:fixed;transform:rotate(-90deg) translateY(-50%);top:50%}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-left-radius:0px;border-bottom-right-radius:0px}.feedback-button-content-icon{height:16px;margin-right:5px;width:16px}.feedback-button-content--center-right .feedback-button-content-icon{rotate:90deg}@media screen and (max-width: 767px){.feedback-button-content--hide-mobile{display:none}}";
865
885
 
866
886
  const FeedbackButton = class {
867
887
  constructor(hostRef) {
@@ -1075,7 +1095,7 @@ const FeedbackButton = class {
1075
1095
  };
1076
1096
  FeedbackButton.style = feedbackButtonCss;
1077
1097
 
1078
- const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.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)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:3px solid var(--feedback-modal-element-selected-border-color) !important;box-shadow:0 0 0 2px rgba(0, 123, 255, 0.3) !important}.screenshot-preview{display:inline-block;width:30px;height:30px;overflow:hidden;border-radius:4px;margin-right:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:transform 0.2s ease}.screenshot-preview:hover{transform:scale(1.1)}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.screenshot-loading{display:inline-flex;align-items:center;margin-right:8px}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}@keyframes feather-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.feather-loader{animation:feather-spin 1s linear infinite;display:block}.screenshot-error-notification{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:10001;max-width:500px;width:90%;animation:slideDown 0.3s ease-out}@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.screenshot-error-content{background:#fee;border:1px solid #fcc;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);color:#c53030}.screenshot-error-content svg:first-child{color:#e53e3e;flex-shrink:0}.screenshot-error-content span{flex:1;font-size:14px;line-height:1.4;font-weight:500}.error-close-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#c53030;flex-shrink:0;transition:background-color 0.2s ease}.error-close-btn:hover{background:rgba(197, 48, 48, 0.1)}";
1098
+ const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.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)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:3px solid var(--feedback-modal-element-selected-border-color) !important;box-shadow:0 0 0 2px rgba(0, 123, 255, 0.3) !important}.screenshot-preview{display:inline-block;width:30px;height:30px;overflow:hidden;border-radius:4px;margin-right:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:transform 0.2s ease}.screenshot-preview:hover{transform:scale(1.1)}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.screenshot-loading{display:inline-flex;align-items:center;margin-right:8px}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}@keyframes feather-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.feather-loader{animation:feather-spin 1s linear infinite;display:block}.screenshot-error-notification{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:10001;max-width:500px;width:90%;animation:slideDown 0.3s ease-out}@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.screenshot-error-content{background:#fee;border:1px solid #fcc;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);color:#c53030}.screenshot-error-content svg:first-child{color:#e53e3e;flex-shrink:0}.screenshot-error-content span{flex:1;font-size:14px;line-height:1.4;font-weight:500}.error-close-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#c53030;flex-shrink:0;transition:background-color 0.2s ease}.error-close-btn:hover{background:rgba(197, 48, 48, 0.1)}@media screen and (max-width: 768px){.feedback-modal-content{width:100vw;height:100dvh;max-width:none;border-radius:0;top:0;left:0;transform:scale(0.95);padding:24px 20px;display:flex;flex-direction:column}.feedback-modal-content--open{transform:scale(1)}.feedback-modal-buttons{display:flex;flex-direction:column;gap:12px}.feedback-modal-button--screenshot{display:none !important}.feedback-modal-button--submit{width:100%}.feedback-modal-text textarea{flex:1;min-height:120px;resize:none}}";
1079
1099
 
1080
1100
  const FeedbackModal = class {
1081
1101
  constructor(hostRef) {
package/dist/collection/components/canvas-editor/canvas-editor.css CHANGED
@@ -22,8 +22,9 @@
22
22
 
23
23
  .canvas-editor-modal {
24
24
  width: 95vw;
25
- max-width: 1400px;
26
- max-height: 900px;
25
+ height: 95vh;
26
+ max-width: none;
27
+ max-height: none;
27
28
  background: var(--feedback-canvas-editor-bg-color, #ffffff);
28
29
  border-radius: 8px;
29
30
  border: 1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);
@@ -349,7 +350,7 @@
349
350
  display: flex;
350
351
  align-items: center;
351
352
  justify-content: center;
352
- padding: 16px;
353
+ padding: 24px;
353
354
  background: var(--feedback-canvas-editor-content-bg, #f5f5f5);
354
355
  overflow: hidden;
355
356
  min-height: 0;
@@ -375,6 +376,40 @@
375
376
  }
376
377
 
377
378
  /* Responsive Design */
379
+
380
+ /* Extra large screens */
381
+ @media screen and (min-width: 1920px) {
382
+ .canvas-editor-modal {
383
+ width: 90vw;
384
+ height: 90vh;
385
+ }
386
+
387
+ .canvas-editor-content {
388
+ padding: 32px;
389
+ }
390
+ }
391
+
392
+ /* Large screens */
393
+ @media screen and (min-width: 1200px) and (max-width: 1919px) {
394
+ .canvas-editor-modal {
395
+ width: 92vw;
396
+ height: 92vh;
397
+ }
398
+
399
+ .canvas-editor-content {
400
+ padding: 28px;
401
+ }
402
+ }
403
+
404
+ /* Medium screens */
405
+ @media screen and (min-width: 769px) and (max-width: 1199px) {
406
+ .canvas-editor-modal {
407
+ width: 95vw;
408
+ height: 95vh;
409
+ }
410
+ }
411
+
412
+ /* Mobile and tablet */
378
413
  @media screen and (max-width: 768px) {
379
414
  .canvas-editor-modal {
380
415
  width: 100vw;
@@ -401,4 +436,8 @@
401
436
  margin-top: 8px;
402
437
  min-width: auto;
403
438
  }
439
+
440
+ .canvas-editor-content {
441
+ padding: 16px;
442
+ }
404
443
  }
package/dist/collection/components/canvas-editor/canvas-editor.js CHANGED
@@ -1,6 +1,17 @@
1
1
  import { h } from '@stencil/core';
2
2
  export class CanvasEditor {
3
3
  constructor() {
4
+ this.handleWindowResize = () => {
5
+ // Debounce resize events
6
+ if (this.resizeTimeout) {
7
+ clearTimeout(this.resizeTimeout);
8
+ }
9
+ this.resizeTimeout = setTimeout(() => {
10
+ if (this.showCanvasEditor && this.originalImageData) {
11
+ this.initializeCanvas();
12
+ }
13
+ }, 250);
14
+ };
4
15
  this.openScreenShot = async () => {
5
16
  // Show loading state immediately
6
17
  this.takingScreenshot = true;
@@ -96,14 +107,16 @@ export class CanvasEditor {
96
107
  // Set canvas to original image dimensions
97
108
  this.canvasRef.width = img.width;
98
109
  this.canvasRef.height = img.height;
99
- // Get available container dimensions
100
- const containerWidth = this.canvasRef.parentElement.clientWidth - 32;
101
- const containerHeight = this.canvasRef.parentElement.clientHeight - 32;
110
+ // Get available container dimensions with more generous padding
111
+ const containerWidth = this.canvasRef.parentElement.clientWidth - 48;
112
+ const containerHeight = this.canvasRef.parentElement.clientHeight - 48;
102
113
  // Calculate scale factors for both dimensions
103
114
  const scaleX = containerWidth / img.width;
104
115
  const scaleY = containerHeight / img.height;
105
- // Use the smaller scale to ensure complete image fits
106
- const scale = Math.min(scaleX, scaleY, 1);
116
+ // Use a more aggressive scaling approach for large screens
117
+ // Allow scaling up to 1.5x on very large screens, but still maintain aspect ratio
118
+ const maxScale = window.innerWidth > 1920 ? 1.5 : (window.innerWidth > 1200 ? 1.2 : 1);
119
+ const scale = Math.min(scaleX, scaleY, maxScale);
107
120
  // Calculate final display dimensions
108
121
  const displayWidth = img.width * scale;
109
122
  const displayHeight = img.height * scale;
@@ -768,6 +781,13 @@ export class CanvasEditor {
768
781
  this.initializeCanvas();
769
782
  }, 100);
770
783
  }
784
+ // Add window resize listener for canvas adaptation
785
+ this.handleWindowResize = this.handleWindowResize.bind(this);
786
+ window.addEventListener('resize', this.handleWindowResize);
787
+ }
788
+ disconnectedCallback() {
789
+ // Clean up resize listener
790
+ window.removeEventListener('resize', this.handleWindowResize);
771
791
  }
772
792
  async captureViewportScreenshot() {
773
793
  try {
package/dist/collection/components/feedback-button/feedback-button.css CHANGED
@@ -1,6 +1,7 @@
1
1
  .feedback-button-content {
2
2
  cursor: pointer;
3
3
  max-width: fit-content;
4
+ letter-spacing: var(--feedback-button-letter-spacing);
4
5
  z-index: var(--feedback-button-z-index);
5
6
  font-family: var(--feedback-font-family);
6
7
  }
package/dist/collection/components/feedback-modal/feedback-modal.css CHANGED
@@ -544,4 +544,47 @@
544
544
  background: rgba(197, 48, 48, 0.1);
545
545
  }
546
546
 
547
+ /* Mobile styles */
548
+ @media screen and (max-width: 768px) {
549
+ .feedback-modal-content {
550
+ width: 100vw;
551
+ height: 100dvh;
552
+ max-width: none;
553
+ border-radius: 0;
554
+ top: 0;
555
+ left: 0;
556
+ transform: scale(0.95);
557
+ padding: 24px 20px;
558
+ display: flex;
559
+ flex-direction: column;
560
+ }
561
+
562
+ .feedback-modal-content--open {
563
+ transform: scale(1);
564
+ }
565
+
566
+ /* Hide screenshot button on mobile */
567
+ .feedback-modal-buttons {
568
+ display: flex;
569
+ flex-direction: column;
570
+ gap: 12px;
571
+ }
572
+
573
+ .feedback-modal-button--screenshot {
574
+ display: none !important;
575
+ }
576
+
577
+ /* Make submit button full width */
578
+ .feedback-modal-button--submit {
579
+ width: 100%;
580
+ }
581
+
582
+ /* Adjust text area for mobile */
583
+ .feedback-modal-text textarea {
584
+ flex: 1;
585
+ min-height: 120px;
586
+ resize: none;
587
+ }
588
+ }
589
+
547
590
 
package/dist/components/canvas-editor2.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
2
 
3
- const canvasEditorCss = ":host{display:block}.canvas-editor-wrapper{position:relative}.canvas-editor-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.8);display:flex;align-items:center;justify-content:center;z-index:9999}.canvas-editor-modal{width:95vw;max-width:1400px;max-height:900px;background:var(--feedback-canvas-editor-bg-color, #ffffff);border-radius:8px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2)}.canvas-editor-header{background:var(--feedback-canvas-editor-header-bg-color, #f5f5f5);border-bottom:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);padding:12px 16px;display:flex;flex-direction:column;gap:12px}.canvas-editor-title h3{margin:0;font-size:16px;font-weight:600;color:var(--feedback-canvas-editor-tool-text-color, #333)}.canvas-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.toolbar-section{display:flex;align-items:center;gap:8px}.tool-group{display:flex;align-items:center;gap:4px}.tool-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;transition:all 0.2s ease;padding:0}.tool-btn svg{width:18px;height:18px;color:var(--feedback-canvas-editor-tool-text-color, #333)}.tool-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.tool-btn.active,.tool-btn.active:hover{background:var(--feedback-canvas-editor-tool-bg-active, #0070f4);color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn.active svg{color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn:disabled{opacity:0.4;cursor:not-allowed;color:var(--feedback-canvas-editor-tool-text-color, #333)}.toolbar-divider{width:1px;height:24px;background:var(--feedback-canvas-editor-divider-color, #e0e0e0);margin:0 4px}.undo-btn{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff) !important;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0) !important}.undo-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0) !important}.color-palette{display:flex;align-items:center;gap:6px}.color-slot-wrapper{position:relative;display:flex;align-items:center}.color-btn{width:32px;height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0)}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:var(--feedback-primary-color, #0070f4);box-shadow:0 0 0 2px rgba(0, 112, 244, 0.2)}.color-btn.editing{border-color:var(--feedback-primary-color, #0070f4)}.color-picker-dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1)}.color-picker-dropdown input[type=\"color\"]{width:40px;height:40px;border:none;border-radius:4px;cursor:pointer}.size-control{display:flex;align-items:center;gap:8px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:6px 12px}.size-slider{width:80px;height:20px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.size-slider::-webkit-slider-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;cursor:pointer}.size-slider::-moz-range-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none}.size-slider::-moz-range-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-slider::-ms-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none;color:transparent}.size-slider::-ms-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-value{font-weight:500;color:var(--feedback-canvas-editor-tool-text-color, #333);font-size:12px;min-width:30px}.selected-annotation-controls{border-left:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:12px;margin-left:8px;min-width:200px}.text-controls{display:flex;flex-direction:row;align-items:center;gap:12px}.font-size-control,.border-width-control{display:flex;align-items:center;gap:6px}.font-size-control label,.border-width-control label{font-size:12px;color:var(--feedback-canvas-editor-tool-text-color, #333);font-weight:500;min-width:35px}.action-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.2s ease;min-width:65px;justify-content:center;height:36px}.action-btn.secondary{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);color:var(--feedback-canvas-editor-tool-text-color, #333);border-color:var(--feedback-canvas-editor-border-color, #e0e0e0)}.action-btn.secondary:hover{background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.action-btn.primary{background:var(--feedback-primary-color, #0070f4);color:#ffffff;border-color:var(--feedback-primary-color, #0070f4)}.action-btn.primary:hover{background:#0056cc;border-color:#0056cc}.action-btn.small{height:28px;padding:4px 8px;font-size:12px;min-width:65px}.shape-controls{display:flex;flex-direction:column;gap:8px}.canvas-editor-content{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--feedback-canvas-editor-content-bg, #f5f5f5);overflow:hidden;min-height:0;min-width:0}.annotation-canvas{max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;border-radius:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);background:#ffffff;transition:box-shadow 0.3s ease;object-fit:contain;display:block}.annotation-canvas:hover{box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20)}@media screen and (max-width: 768px){.canvas-editor-modal{width:100vw;height:100vh;border-radius:0}.canvas-editor-toolbar{flex-direction:column;align-items:stretch;gap:8px}.toolbar-section{justify-content:center}.selected-annotation-controls{border-left:none;border-top:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:0;padding-top:8px;margin-left:0;margin-top:8px;min-width:auto}}";
3
+ const canvasEditorCss = ":host{display:block}.canvas-editor-wrapper{position:relative}.canvas-editor-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.8);display:flex;align-items:center;justify-content:center;z-index:9999}.canvas-editor-modal{width:95vw;height:95vh;max-width:none;max-height:none;background:var(--feedback-canvas-editor-bg-color, #ffffff);border-radius:8px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2)}.canvas-editor-header{background:var(--feedback-canvas-editor-header-bg-color, #f5f5f5);border-bottom:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);padding:12px 16px;display:flex;flex-direction:column;gap:12px}.canvas-editor-title h3{margin:0;font-size:16px;font-weight:600;color:var(--feedback-canvas-editor-tool-text-color, #333)}.canvas-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.toolbar-section{display:flex;align-items:center;gap:8px}.tool-group{display:flex;align-items:center;gap:4px}.tool-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;transition:all 0.2s ease;padding:0}.tool-btn svg{width:18px;height:18px;color:var(--feedback-canvas-editor-tool-text-color, #333)}.tool-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.tool-btn.active,.tool-btn.active:hover{background:var(--feedback-canvas-editor-tool-bg-active, #0070f4);color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn.active svg{color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn:disabled{opacity:0.4;cursor:not-allowed;color:var(--feedback-canvas-editor-tool-text-color, #333)}.toolbar-divider{width:1px;height:24px;background:var(--feedback-canvas-editor-divider-color, #e0e0e0);margin:0 4px}.undo-btn{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff) !important;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0) !important}.undo-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0) !important}.color-palette{display:flex;align-items:center;gap:6px}.color-slot-wrapper{position:relative;display:flex;align-items:center}.color-btn{width:32px;height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0)}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:var(--feedback-primary-color, #0070f4);box-shadow:0 0 0 2px rgba(0, 112, 244, 0.2)}.color-btn.editing{border-color:var(--feedback-primary-color, #0070f4)}.color-picker-dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1)}.color-picker-dropdown input[type=\"color\"]{width:40px;height:40px;border:none;border-radius:4px;cursor:pointer}.size-control{display:flex;align-items:center;gap:8px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:6px 12px}.size-slider{width:80px;height:20px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.size-slider::-webkit-slider-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;cursor:pointer}.size-slider::-moz-range-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none}.size-slider::-moz-range-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-slider::-ms-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none;color:transparent}.size-slider::-ms-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-value{font-weight:500;color:var(--feedback-canvas-editor-tool-text-color, #333);font-size:12px;min-width:30px}.selected-annotation-controls{border-left:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:12px;margin-left:8px;min-width:200px}.text-controls{display:flex;flex-direction:row;align-items:center;gap:12px}.font-size-control,.border-width-control{display:flex;align-items:center;gap:6px}.font-size-control label,.border-width-control label{font-size:12px;color:var(--feedback-canvas-editor-tool-text-color, #333);font-weight:500;min-width:35px}.action-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.2s ease;min-width:65px;justify-content:center;height:36px}.action-btn.secondary{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);color:var(--feedback-canvas-editor-tool-text-color, #333);border-color:var(--feedback-canvas-editor-border-color, #e0e0e0)}.action-btn.secondary:hover{background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.action-btn.primary{background:var(--feedback-primary-color, #0070f4);color:#ffffff;border-color:var(--feedback-primary-color, #0070f4)}.action-btn.primary:hover{background:#0056cc;border-color:#0056cc}.action-btn.small{height:28px;padding:4px 8px;font-size:12px;min-width:65px}.shape-controls{display:flex;flex-direction:column;gap:8px}.canvas-editor-content{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--feedback-canvas-editor-content-bg, #f5f5f5);overflow:hidden;min-height:0;min-width:0}.annotation-canvas{max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;border-radius:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);background:#ffffff;transition:box-shadow 0.3s ease;object-fit:contain;display:block}.annotation-canvas:hover{box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20)}@media screen and (min-width: 1920px){.canvas-editor-modal{width:90vw;height:90vh}.canvas-editor-content{padding:32px}}@media screen and (min-width: 1200px) and (max-width: 1919px){.canvas-editor-modal{width:92vw;height:92vh}.canvas-editor-content{padding:28px}}@media screen and (min-width: 769px) and (max-width: 1199px){.canvas-editor-modal{width:95vw;height:95vh}}@media screen and (max-width: 768px){.canvas-editor-modal{width:100vw;height:100vh;border-radius:0}.canvas-editor-toolbar{flex-direction:column;align-items:stretch;gap:8px}.toolbar-section{justify-content:center}.selected-annotation-controls{border-left:none;border-top:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:0;padding-top:8px;margin-left:0;margin-top:8px;min-width:auto}.canvas-editor-content{padding:16px}}";
4
4
 
5
5
  const CanvasEditor = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
@@ -10,6 +10,17 @@ const CanvasEditor = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
10
10
  this.screenshotReady = createEvent(this, "screenshotReady", 7);
11
11
  this.screenshotCancelled = createEvent(this, "screenshotCancelled", 7);
12
12
  this.screenshotFailed = createEvent(this, "screenshotFailed", 7);
13
+ this.handleWindowResize = () => {
14
+ // Debounce resize events
15
+ if (this.resizeTimeout) {
16
+ clearTimeout(this.resizeTimeout);
17
+ }
18
+ this.resizeTimeout = setTimeout(() => {
19
+ if (this.showCanvasEditor && this.originalImageData) {
20
+ this.initializeCanvas();
21
+ }
22
+ }, 250);
23
+ };
13
24
  this.openScreenShot = async () => {
14
25
  // Show loading state immediately
15
26
  this.takingScreenshot = true;
@@ -105,14 +116,16 @@ const CanvasEditor = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
105
116
  // Set canvas to original image dimensions
106
117
  this.canvasRef.width = img.width;
107
118
  this.canvasRef.height = img.height;
108
- // Get available container dimensions
109
- const containerWidth = this.canvasRef.parentElement.clientWidth - 32;
110
- const containerHeight = this.canvasRef.parentElement.clientHeight - 32;
119
+ // Get available container dimensions with more generous padding
120
+ const containerWidth = this.canvasRef.parentElement.clientWidth - 48;
121
+ const containerHeight = this.canvasRef.parentElement.clientHeight - 48;
111
122
  // Calculate scale factors for both dimensions
112
123
  const scaleX = containerWidth / img.width;
113
124
  const scaleY = containerHeight / img.height;
114
- // Use the smaller scale to ensure complete image fits
115
- const scale = Math.min(scaleX, scaleY, 1);
125
+ // Use a more aggressive scaling approach for large screens
126
+ // Allow scaling up to 1.5x on very large screens, but still maintain aspect ratio
127
+ const maxScale = window.innerWidth > 1920 ? 1.5 : (window.innerWidth > 1200 ? 1.2 : 1);
128
+ const scale = Math.min(scaleX, scaleY, maxScale);
116
129
  // Calculate final display dimensions
117
130
  const displayWidth = img.width * scale;
118
131
  const displayHeight = img.height * scale;
@@ -777,6 +790,13 @@ const CanvasEditor = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
777
790
  this.initializeCanvas();
778
791
  }, 100);
779
792
  }
793
+ // Add window resize listener for canvas adaptation
794
+ this.handleWindowResize = this.handleWindowResize.bind(this);
795
+ window.addEventListener('resize', this.handleWindowResize);
796
+ }
797
+ disconnectedCallback() {
798
+ // Clean up resize listener
799
+ window.removeEventListener('resize', this.handleWindowResize);
780
800
  }
781
801
  async captureViewportScreenshot() {
782
802
  try {
package/dist/components/feedback-button.js CHANGED
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
2
2
  import { d as defineCustomElement$3 } from './canvas-editor2.js';
3
3
  import { d as defineCustomElement$2 } from './feedback-modal2.js';
4
4
 
5
- const feedbackButtonCss = ".feedback-button-content{cursor:pointer;max-width:fit-content;z-index:var(--feedback-button-z-index);font-family:var(--feedback-font-family)}.feedback-button-content--custom-font{font-family:inherit}.feedback-button-content--light{align-items:center;background-color:var(--feedback-button-light-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-light-text-color);display:flex;font-size:var(--feedback-button-text-font-size);font-weight:var(--feedback-button-text-font-weight);padding:8px 15px}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-button-dark-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-dark-text-color);display:flex;font-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.icon-edit{stroke:var(--feedback-button-light-icon-color)}.feedback-button-content--dark .icon-edit{stroke:var(--feedback-button-dark-icon-color)}.feedback-button-content--bottom-right{bottom:10px;position:fixed;right:10px}.feedback-button-content--center-right{position:fixed;transform:rotate(-90deg) translateY(-50%);top:50%}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-left-radius:0px;border-bottom-right-radius:0px}.feedback-button-content-icon{height:16px;margin-right:5px;width:16px}.feedback-button-content--center-right .feedback-button-content-icon{rotate:90deg}@media screen and (max-width: 767px){.feedback-button-content--hide-mobile{display:none}}";
5
+ const feedbackButtonCss = ".feedback-button-content{cursor:pointer;max-width:fit-content;letter-spacing:var(--feedback-button-letter-spacing);z-index:var(--feedback-button-z-index);font-family:var(--feedback-font-family)}.feedback-button-content--custom-font{font-family:inherit}.feedback-button-content--light{align-items:center;background-color:var(--feedback-button-light-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-light-text-color);display:flex;font-size:var(--feedback-button-text-font-size);font-weight:var(--feedback-button-text-font-weight);padding:8px 15px}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-button-dark-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-dark-text-color);display:flex;font-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.icon-edit{stroke:var(--feedback-button-light-icon-color)}.feedback-button-content--dark .icon-edit{stroke:var(--feedback-button-dark-icon-color)}.feedback-button-content--bottom-right{bottom:10px;position:fixed;right:10px}.feedback-button-content--center-right{position:fixed;transform:rotate(-90deg) translateY(-50%);top:50%}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-left-radius:0px;border-bottom-right-radius:0px}.feedback-button-content-icon{height:16px;margin-right:5px;width:16px}.feedback-button-content--center-right .feedback-button-content-icon{rotate:90deg}@media screen and (max-width: 767px){.feedback-button-content--hide-mobile{display:none}}";
6
6
 
7
7
  const FeedbackButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
8
8
  constructor() {
package/dist/components/feedback-modal2.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
2
  import { d as defineCustomElement$1 } from './canvas-editor2.js';
3
3
 
4
- const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.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)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:3px solid var(--feedback-modal-element-selected-border-color) !important;box-shadow:0 0 0 2px rgba(0, 123, 255, 0.3) !important}.screenshot-preview{display:inline-block;width:30px;height:30px;overflow:hidden;border-radius:4px;margin-right:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:transform 0.2s ease}.screenshot-preview:hover{transform:scale(1.1)}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.screenshot-loading{display:inline-flex;align-items:center;margin-right:8px}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}@keyframes feather-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.feather-loader{animation:feather-spin 1s linear infinite;display:block}.screenshot-error-notification{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:10001;max-width:500px;width:90%;animation:slideDown 0.3s ease-out}@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.screenshot-error-content{background:#fee;border:1px solid #fcc;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);color:#c53030}.screenshot-error-content svg:first-child{color:#e53e3e;flex-shrink:0}.screenshot-error-content span{flex:1;font-size:14px;line-height:1.4;font-weight:500}.error-close-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#c53030;flex-shrink:0;transition:background-color 0.2s ease}.error-close-btn:hover{background:rgba(197, 48, 48, 0.1)}";
4
+ const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.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)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:3px solid var(--feedback-modal-element-selected-border-color) !important;box-shadow:0 0 0 2px rgba(0, 123, 255, 0.3) !important}.screenshot-preview{display:inline-block;width:30px;height:30px;overflow:hidden;border-radius:4px;margin-right:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:transform 0.2s ease}.screenshot-preview:hover{transform:scale(1.1)}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.screenshot-loading{display:inline-flex;align-items:center;margin-right:8px}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}@keyframes feather-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.feather-loader{animation:feather-spin 1s linear infinite;display:block}.screenshot-error-notification{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:10001;max-width:500px;width:90%;animation:slideDown 0.3s ease-out}@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.screenshot-error-content{background:#fee;border:1px solid #fcc;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);color:#c53030}.screenshot-error-content svg:first-child{color:#e53e3e;flex-shrink:0}.screenshot-error-content span{flex:1;font-size:14px;line-height:1.4;font-weight:500}.error-close-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#c53030;flex-shrink:0;transition:background-color 0.2s ease}.error-close-btn:hover{background:rgba(197, 48, 48, 0.1)}@media screen and (max-width: 768px){.feedback-modal-content{width:100vw;height:100dvh;max-width:none;border-radius:0;top:0;left:0;transform:scale(0.95);padding:24px 20px;display:flex;flex-direction:column}.feedback-modal-content--open{transform:scale(1)}.feedback-modal-buttons{display:flex;flex-direction:column;gap:12px}.feedback-modal-button--screenshot{display:none !important}.feedback-modal-button--submit{width:100%}.feedback-modal-text textarea{flex:1;min-height:120px;resize:none}}";
5
5
 
6
6
  const FeedbackModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
package/dist/esm/canvas-editor_3.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f65e9124.js';
2
2
 
3
- const canvasEditorCss = ":host{display:block}.canvas-editor-wrapper{position:relative}.canvas-editor-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.8);display:flex;align-items:center;justify-content:center;z-index:9999}.canvas-editor-modal{width:95vw;max-width:1400px;max-height:900px;background:var(--feedback-canvas-editor-bg-color, #ffffff);border-radius:8px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2)}.canvas-editor-header{background:var(--feedback-canvas-editor-header-bg-color, #f5f5f5);border-bottom:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);padding:12px 16px;display:flex;flex-direction:column;gap:12px}.canvas-editor-title h3{margin:0;font-size:16px;font-weight:600;color:var(--feedback-canvas-editor-tool-text-color, #333)}.canvas-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.toolbar-section{display:flex;align-items:center;gap:8px}.tool-group{display:flex;align-items:center;gap:4px}.tool-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;transition:all 0.2s ease;padding:0}.tool-btn svg{width:18px;height:18px;color:var(--feedback-canvas-editor-tool-text-color, #333)}.tool-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.tool-btn.active,.tool-btn.active:hover{background:var(--feedback-canvas-editor-tool-bg-active, #0070f4);color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn.active svg{color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn:disabled{opacity:0.4;cursor:not-allowed;color:var(--feedback-canvas-editor-tool-text-color, #333)}.toolbar-divider{width:1px;height:24px;background:var(--feedback-canvas-editor-divider-color, #e0e0e0);margin:0 4px}.undo-btn{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff) !important;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0) !important}.undo-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0) !important}.color-palette{display:flex;align-items:center;gap:6px}.color-slot-wrapper{position:relative;display:flex;align-items:center}.color-btn{width:32px;height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0)}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:var(--feedback-primary-color, #0070f4);box-shadow:0 0 0 2px rgba(0, 112, 244, 0.2)}.color-btn.editing{border-color:var(--feedback-primary-color, #0070f4)}.color-picker-dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1)}.color-picker-dropdown input[type=\"color\"]{width:40px;height:40px;border:none;border-radius:4px;cursor:pointer}.size-control{display:flex;align-items:center;gap:8px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:6px 12px}.size-slider{width:80px;height:20px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.size-slider::-webkit-slider-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;cursor:pointer}.size-slider::-moz-range-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none}.size-slider::-moz-range-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-slider::-ms-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none;color:transparent}.size-slider::-ms-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-value{font-weight:500;color:var(--feedback-canvas-editor-tool-text-color, #333);font-size:12px;min-width:30px}.selected-annotation-controls{border-left:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:12px;margin-left:8px;min-width:200px}.text-controls{display:flex;flex-direction:row;align-items:center;gap:12px}.font-size-control,.border-width-control{display:flex;align-items:center;gap:6px}.font-size-control label,.border-width-control label{font-size:12px;color:var(--feedback-canvas-editor-tool-text-color, #333);font-weight:500;min-width:35px}.action-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.2s ease;min-width:65px;justify-content:center;height:36px}.action-btn.secondary{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);color:var(--feedback-canvas-editor-tool-text-color, #333);border-color:var(--feedback-canvas-editor-border-color, #e0e0e0)}.action-btn.secondary:hover{background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.action-btn.primary{background:var(--feedback-primary-color, #0070f4);color:#ffffff;border-color:var(--feedback-primary-color, #0070f4)}.action-btn.primary:hover{background:#0056cc;border-color:#0056cc}.action-btn.small{height:28px;padding:4px 8px;font-size:12px;min-width:65px}.shape-controls{display:flex;flex-direction:column;gap:8px}.canvas-editor-content{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--feedback-canvas-editor-content-bg, #f5f5f5);overflow:hidden;min-height:0;min-width:0}.annotation-canvas{max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;border-radius:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);background:#ffffff;transition:box-shadow 0.3s ease;object-fit:contain;display:block}.annotation-canvas:hover{box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20)}@media screen and (max-width: 768px){.canvas-editor-modal{width:100vw;height:100vh;border-radius:0}.canvas-editor-toolbar{flex-direction:column;align-items:stretch;gap:8px}.toolbar-section{justify-content:center}.selected-annotation-controls{border-left:none;border-top:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:0;padding-top:8px;margin-left:0;margin-top:8px;min-width:auto}}";
3
+ const canvasEditorCss = ":host{display:block}.canvas-editor-wrapper{position:relative}.canvas-editor-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.8);display:flex;align-items:center;justify-content:center;z-index:9999}.canvas-editor-modal{width:95vw;height:95vh;max-width:none;max-height:none;background:var(--feedback-canvas-editor-bg-color, #ffffff);border-radius:8px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2)}.canvas-editor-header{background:var(--feedback-canvas-editor-header-bg-color, #f5f5f5);border-bottom:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);padding:12px 16px;display:flex;flex-direction:column;gap:12px}.canvas-editor-title h3{margin:0;font-size:16px;font-weight:600;color:var(--feedback-canvas-editor-tool-text-color, #333)}.canvas-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.toolbar-section{display:flex;align-items:center;gap:8px}.tool-group{display:flex;align-items:center;gap:4px}.tool-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;transition:all 0.2s ease;padding:0}.tool-btn svg{width:18px;height:18px;color:var(--feedback-canvas-editor-tool-text-color, #333)}.tool-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.tool-btn.active,.tool-btn.active:hover{background:var(--feedback-canvas-editor-tool-bg-active, #0070f4);color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn.active svg{color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn:disabled{opacity:0.4;cursor:not-allowed;color:var(--feedback-canvas-editor-tool-text-color, #333)}.toolbar-divider{width:1px;height:24px;background:var(--feedback-canvas-editor-divider-color, #e0e0e0);margin:0 4px}.undo-btn{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff) !important;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0) !important}.undo-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0) !important}.color-palette{display:flex;align-items:center;gap:6px}.color-slot-wrapper{position:relative;display:flex;align-items:center}.color-btn{width:32px;height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0)}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:var(--feedback-primary-color, #0070f4);box-shadow:0 0 0 2px rgba(0, 112, 244, 0.2)}.color-btn.editing{border-color:var(--feedback-primary-color, #0070f4)}.color-picker-dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1)}.color-picker-dropdown input[type=\"color\"]{width:40px;height:40px;border:none;border-radius:4px;cursor:pointer}.size-control{display:flex;align-items:center;gap:8px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:6px 12px}.size-slider{width:80px;height:20px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.size-slider::-webkit-slider-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;cursor:pointer}.size-slider::-moz-range-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none}.size-slider::-moz-range-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-slider::-ms-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none;color:transparent}.size-slider::-ms-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-value{font-weight:500;color:var(--feedback-canvas-editor-tool-text-color, #333);font-size:12px;min-width:30px}.selected-annotation-controls{border-left:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:12px;margin-left:8px;min-width:200px}.text-controls{display:flex;flex-direction:row;align-items:center;gap:12px}.font-size-control,.border-width-control{display:flex;align-items:center;gap:6px}.font-size-control label,.border-width-control label{font-size:12px;color:var(--feedback-canvas-editor-tool-text-color, #333);font-weight:500;min-width:35px}.action-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.2s ease;min-width:65px;justify-content:center;height:36px}.action-btn.secondary{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);color:var(--feedback-canvas-editor-tool-text-color, #333);border-color:var(--feedback-canvas-editor-border-color, #e0e0e0)}.action-btn.secondary:hover{background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.action-btn.primary{background:var(--feedback-primary-color, #0070f4);color:#ffffff;border-color:var(--feedback-primary-color, #0070f4)}.action-btn.primary:hover{background:#0056cc;border-color:#0056cc}.action-btn.small{height:28px;padding:4px 8px;font-size:12px;min-width:65px}.shape-controls{display:flex;flex-direction:column;gap:8px}.canvas-editor-content{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--feedback-canvas-editor-content-bg, #f5f5f5);overflow:hidden;min-height:0;min-width:0}.annotation-canvas{max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;border-radius:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);background:#ffffff;transition:box-shadow 0.3s ease;object-fit:contain;display:block}.annotation-canvas:hover{box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20)}@media screen and (min-width: 1920px){.canvas-editor-modal{width:90vw;height:90vh}.canvas-editor-content{padding:32px}}@media screen and (min-width: 1200px) and (max-width: 1919px){.canvas-editor-modal{width:92vw;height:92vh}.canvas-editor-content{padding:28px}}@media screen and (min-width: 769px) and (max-width: 1199px){.canvas-editor-modal{width:95vw;height:95vh}}@media screen and (max-width: 768px){.canvas-editor-modal{width:100vw;height:100vh;border-radius:0}.canvas-editor-toolbar{flex-direction:column;align-items:stretch;gap:8px}.toolbar-section{justify-content:center}.selected-annotation-controls{border-left:none;border-top:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:0;padding-top:8px;margin-left:0;margin-top:8px;min-width:auto}.canvas-editor-content{padding:16px}}";
4
4
 
5
5
  const CanvasEditor = class {
6
6
  constructor(hostRef) {
@@ -8,6 +8,17 @@ const CanvasEditor = class {
8
8
  this.screenshotReady = createEvent(this, "screenshotReady", 7);
9
9
  this.screenshotCancelled = createEvent(this, "screenshotCancelled", 7);
10
10
  this.screenshotFailed = createEvent(this, "screenshotFailed", 7);
11
+ this.handleWindowResize = () => {
12
+ // Debounce resize events
13
+ if (this.resizeTimeout) {
14
+ clearTimeout(this.resizeTimeout);
15
+ }
16
+ this.resizeTimeout = setTimeout(() => {
17
+ if (this.showCanvasEditor && this.originalImageData) {
18
+ this.initializeCanvas();
19
+ }
20
+ }, 250);
21
+ };
11
22
  this.openScreenShot = async () => {
12
23
  // Show loading state immediately
13
24
  this.takingScreenshot = true;
@@ -103,14 +114,16 @@ const CanvasEditor = class {
103
114
  // Set canvas to original image dimensions
104
115
  this.canvasRef.width = img.width;
105
116
  this.canvasRef.height = img.height;
106
- // Get available container dimensions
107
- const containerWidth = this.canvasRef.parentElement.clientWidth - 32;
108
- const containerHeight = this.canvasRef.parentElement.clientHeight - 32;
117
+ // Get available container dimensions with more generous padding
118
+ const containerWidth = this.canvasRef.parentElement.clientWidth - 48;
119
+ const containerHeight = this.canvasRef.parentElement.clientHeight - 48;
109
120
  // Calculate scale factors for both dimensions
110
121
  const scaleX = containerWidth / img.width;
111
122
  const scaleY = containerHeight / img.height;
112
- // Use the smaller scale to ensure complete image fits
113
- const scale = Math.min(scaleX, scaleY, 1);
123
+ // Use a more aggressive scaling approach for large screens
124
+ // Allow scaling up to 1.5x on very large screens, but still maintain aspect ratio
125
+ const maxScale = window.innerWidth > 1920 ? 1.5 : (window.innerWidth > 1200 ? 1.2 : 1);
126
+ const scale = Math.min(scaleX, scaleY, maxScale);
114
127
  // Calculate final display dimensions
115
128
  const displayWidth = img.width * scale;
116
129
  const displayHeight = img.height * scale;
@@ -775,6 +788,13 @@ const CanvasEditor = class {
775
788
  this.initializeCanvas();
776
789
  }, 100);
777
790
  }
791
+ // Add window resize listener for canvas adaptation
792
+ this.handleWindowResize = this.handleWindowResize.bind(this);
793
+ window.addEventListener('resize', this.handleWindowResize);
794
+ }
795
+ disconnectedCallback() {
796
+ // Clean up resize listener
797
+ window.removeEventListener('resize', this.handleWindowResize);
778
798
  }
779
799
  async captureViewportScreenshot() {
780
800
  try {
@@ -857,7 +877,7 @@ const CanvasEditor = class {
857
877
  };
858
878
  CanvasEditor.style = canvasEditorCss;
859
879
 
860
- const feedbackButtonCss = ".feedback-button-content{cursor:pointer;max-width:fit-content;z-index:var(--feedback-button-z-index);font-family:var(--feedback-font-family)}.feedback-button-content--custom-font{font-family:inherit}.feedback-button-content--light{align-items:center;background-color:var(--feedback-button-light-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-light-text-color);display:flex;font-size:var(--feedback-button-text-font-size);font-weight:var(--feedback-button-text-font-weight);padding:8px 15px}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-button-dark-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-dark-text-color);display:flex;font-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.icon-edit{stroke:var(--feedback-button-light-icon-color)}.feedback-button-content--dark .icon-edit{stroke:var(--feedback-button-dark-icon-color)}.feedback-button-content--bottom-right{bottom:10px;position:fixed;right:10px}.feedback-button-content--center-right{position:fixed;transform:rotate(-90deg) translateY(-50%);top:50%}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-left-radius:0px;border-bottom-right-radius:0px}.feedback-button-content-icon{height:16px;margin-right:5px;width:16px}.feedback-button-content--center-right .feedback-button-content-icon{rotate:90deg}@media screen and (max-width: 767px){.feedback-button-content--hide-mobile{display:none}}";
880
+ const feedbackButtonCss = ".feedback-button-content{cursor:pointer;max-width:fit-content;letter-spacing:var(--feedback-button-letter-spacing);z-index:var(--feedback-button-z-index);font-family:var(--feedback-font-family)}.feedback-button-content--custom-font{font-family:inherit}.feedback-button-content--light{align-items:center;background-color:var(--feedback-button-light-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-light-text-color);display:flex;font-size:var(--feedback-button-text-font-size);font-weight:var(--feedback-button-text-font-weight);padding:8px 15px}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-button-dark-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-dark-text-color);display:flex;font-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.icon-edit{stroke:var(--feedback-button-light-icon-color)}.feedback-button-content--dark .icon-edit{stroke:var(--feedback-button-dark-icon-color)}.feedback-button-content--bottom-right{bottom:10px;position:fixed;right:10px}.feedback-button-content--center-right{position:fixed;transform:rotate(-90deg) translateY(-50%);top:50%}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-left-radius:0px;border-bottom-right-radius:0px}.feedback-button-content-icon{height:16px;margin-right:5px;width:16px}.feedback-button-content--center-right .feedback-button-content-icon{rotate:90deg}@media screen and (max-width: 767px){.feedback-button-content--hide-mobile{display:none}}";
861
881
 
862
882
  const FeedbackButton = class {
863
883
  constructor(hostRef) {
@@ -1071,7 +1091,7 @@ const FeedbackButton = class {
1071
1091
  };
1072
1092
  FeedbackButton.style = feedbackButtonCss;
1073
1093
 
1074
- const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.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)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:3px solid var(--feedback-modal-element-selected-border-color) !important;box-shadow:0 0 0 2px rgba(0, 123, 255, 0.3) !important}.screenshot-preview{display:inline-block;width:30px;height:30px;overflow:hidden;border-radius:4px;margin-right:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:transform 0.2s ease}.screenshot-preview:hover{transform:scale(1.1)}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.screenshot-loading{display:inline-flex;align-items:center;margin-right:8px}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}@keyframes feather-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.feather-loader{animation:feather-spin 1s linear infinite;display:block}.screenshot-error-notification{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:10001;max-width:500px;width:90%;animation:slideDown 0.3s ease-out}@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.screenshot-error-content{background:#fee;border:1px solid #fcc;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);color:#c53030}.screenshot-error-content svg:first-child{color:#e53e3e;flex-shrink:0}.screenshot-error-content span{flex:1;font-size:14px;line-height:1.4;font-weight:500}.error-close-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#c53030;flex-shrink:0;transition:background-color 0.2s ease}.error-close-btn:hover{background:rgba(197, 48, 48, 0.1)}";
1094
+ const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.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)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:3px solid var(--feedback-modal-element-selected-border-color) !important;box-shadow:0 0 0 2px rgba(0, 123, 255, 0.3) !important}.screenshot-preview{display:inline-block;width:30px;height:30px;overflow:hidden;border-radius:4px;margin-right:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:transform 0.2s ease}.screenshot-preview:hover{transform:scale(1.1)}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.screenshot-loading{display:inline-flex;align-items:center;margin-right:8px}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}@keyframes feather-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.feather-loader{animation:feather-spin 1s linear infinite;display:block}.screenshot-error-notification{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:10001;max-width:500px;width:90%;animation:slideDown 0.3s ease-out}@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.screenshot-error-content{background:#fee;border:1px solid #fcc;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);color:#c53030}.screenshot-error-content svg:first-child{color:#e53e3e;flex-shrink:0}.screenshot-error-content span{flex:1;font-size:14px;line-height:1.4;font-weight:500}.error-close-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#c53030;flex-shrink:0;transition:background-color 0.2s ease}.error-close-btn:hover{background:rgba(197, 48, 48, 0.1)}@media screen and (max-width: 768px){.feedback-modal-content{width:100vw;height:100dvh;max-width:none;border-radius:0;top:0;left:0;transform:scale(0.95);padding:24px 20px;display:flex;flex-direction:column}.feedback-modal-content--open{transform:scale(1)}.feedback-modal-buttons{display:flex;flex-direction:column;gap:12px}.feedback-modal-button--screenshot{display:none !important}.feedback-modal-button--submit{width:100%}.feedback-modal-text textarea{flex:1;min-height:120px;resize:none}}";
1075
1095
 
1076
1096
  const FeedbackModal = class {
1077
1097
  constructor(hostRef) {
package/dist/pushfeedback/p-92ebcaa3.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as t,c as e,h as o,H as i,g as s}from"./p-af2a1f7f.js";const a=class{constructor(o){t(this,o),this.screenshotReady=e(this,"screenshotReady",7),this.screenshotCancelled=e(this,"screenshotCancelled",7),this.screenshotFailed=e(this,"screenshotFailed",7),this.handleWindowResize=()=>{this.resizeTimeout&&clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout((()=>{this.showCanvasEditor&&this.originalImageData&&this.initializeCanvas()}),250)},this.openScreenShot=async()=>{this.takingScreenshot=!0,this.annotations=[],this.currentAnnotation=null,this.isDrawing=!1,this.hoveredAnnotation=null,this.hideAllFeedbackElements();try{await new Promise((t=>setTimeout(t,100)));const t=await this.captureViewportScreenshot();this.originalImageData=t,this.takingScreenshot=!1,this.showCanvasEditor=!0,this.showAllFeedbackElements(),setTimeout((()=>{this.initializeCanvas()}),100)}catch(t){console.error("Failed to capture screenshot:",t),this.takingScreenshot=!1,this.showAllFeedbackElements(),this.handleScreenshotError(t)}},this.hideAllFeedbackElements=()=>{document.querySelectorAll("feedback-button, feedback-modal").forEach((t=>{t.style.visibility="hidden"}))},this.showAllFeedbackElements=()=>{document.querySelectorAll("feedback-button, feedback-modal").forEach((t=>{t.style.visibility="visible"}))},this.handleScreenshotError=t=>{let e=this.screenshotErrorGeneral;"NotAllowedError"===t.name?e+=" "+this.screenshotErrorPermission:"NotSupportedError"===t.name?e+=" "+this.screenshotErrorNotSupported:"NotFoundError"===t.name?e+=" "+this.screenshotErrorNotFound:"AbortError"===t.name?e+=" "+this.screenshotErrorCancelled:t.message&&t.message.includes("not supported")?e+=" "+this.screenshotErrorBrowserNotSupported:e+=" "+this.screenshotErrorUnexpected,this.screenshotFailed.emit({error:e})},this.closeCanvasEditor=()=>{this.showCanvasEditor=!1,this.screenshotCancelled.emit()},this.saveAnnotations=()=>{if(this.canvasRef){const t=this.canvasRef.toDataURL("image/png");this.screenshotReady.emit({screenshot:t})}this.showCanvasEditor=!1},this.initializeCanvas=()=>{if(!this.canvasRef||!this.originalImageData)return;this.canvasContext=this.canvasRef.getContext("2d");const t=new Image;t.onload=()=>{this.canvasRef.width=t.width,this.canvasRef.height=t.height;const e=window.innerWidth>1920?1.5:window.innerWidth>1200?1.2:1,o=Math.min((this.canvasRef.parentElement.clientWidth-48)/t.width,(this.canvasRef.parentElement.clientHeight-48)/t.height,e),i=t.height*o;this.canvasRef.style.width=t.width*o+"px",this.canvasRef.style.height=`${i}px`,this.canvasContext.drawImage(t,0,0),this.redrawAnnotations()},t.src=this.originalImageData},this.redrawAnnotations=()=>{if(!this.canvasContext)return;const t=new Image;t.onload=()=>{this.canvasContext.clearRect(0,0,this.canvasRef.width,this.canvasRef.height),this.canvasContext.drawImage(t,0,0),this.annotations.forEach((t=>{this.drawAnnotation(t)}))},t.src=this.originalImageData},this.drawAnnotation=t=>{if(this.canvasContext)switch(this.canvasContext.strokeStyle=t.color,this.canvasContext.lineWidth=t.lineWidth,this.canvasContext.lineCap="round",this.canvasContext.lineJoin="round",t.type){case"rectangle":this.canvasContext.strokeRect(t.startX,t.startY,t.width,t.height),this.selectedAnnotation===t&&this.drawSelectionIndicator(t),this.hoveredAnnotation===t&&this.drawRectangleResizeHandles(t);break;case"line":this.canvasContext.beginPath(),this.canvasContext.moveTo(t.startX,t.startY),this.canvasContext.lineTo(t.endX,t.endY),this.canvasContext.stroke(),this.selectedAnnotation===t&&this.drawSelectionIndicator(t),this.hoveredAnnotation===t&&this.drawLineResizeHandles(t);break;case"arrow":this.drawArrow(t.startX,t.startY,t.endX,t.endY),this.selectedAnnotation===t&&this.drawSelectionIndicator(t),this.hoveredAnnotation===t&&this.drawLineResizeHandles(t);break;case"text":const e=t.fontSize||24;this.canvasContext.fillStyle=t.color,this.canvasContext.font=`${e}px Arial`,this.canvasContext.fillText(t.text,t.x,t.y),this.selectedAnnotation===t&&this.drawTextSelectionIndicator(t)}},this.drawSelectionIndicator=t=>{if(!this.canvasContext)return;const e=this.canvasContext.strokeStyle,o=this.canvasContext.lineWidth;switch(this.canvasContext.strokeStyle="#0070F4",this.canvasContext.lineWidth=2,this.canvasContext.setLineDash([5,5]),t.type){case"rectangle":this.canvasContext.strokeRect(t.startX-2,t.startY-2,t.width+4,t.height+4);break;case"line":case"arrow":this.canvasContext.beginPath(),this.canvasContext.moveTo(t.startX,t.startY),this.canvasContext.lineTo(t.endX,t.endY),this.canvasContext.stroke()}this.canvasContext.setLineDash([]),this.canvasContext.strokeStyle=e,this.canvasContext.lineWidth=o},this.drawTextSelectionIndicator=t=>{if(!this.canvasContext)return;const e=t.fontSize||24,o=this.getTextWidth(t.text,e),i=this.canvasContext.strokeStyle,s=this.canvasContext.lineWidth;this.canvasContext.strokeStyle="#0070F4",this.canvasContext.lineWidth=2,this.canvasContext.setLineDash([3,3]),this.canvasContext.strokeRect(t.x-4,t.y-e-4,o+8,e+8),this.canvasContext.setLineDash([]),this.canvasContext.strokeStyle=i,this.canvasContext.lineWidth=s},this.drawArrow=(t,e,o,i)=>{const s=Math.atan2(i-e,o-t);this.canvasContext.beginPath(),this.canvasContext.moveTo(t,e),this.canvasContext.lineTo(o,i),this.canvasContext.stroke(),this.canvasContext.beginPath(),this.canvasContext.moveTo(o,i),this.canvasContext.lineTo(o-15*Math.cos(s-Math.PI/6),i-15*Math.sin(s-Math.PI/6)),this.canvasContext.moveTo(o,i),this.canvasContext.lineTo(o-15*Math.cos(s+Math.PI/6),i-15*Math.sin(s+Math.PI/6)),this.canvasContext.stroke()},this.undoLastAnnotation=()=>{this.annotations=this.annotations.slice(0,-1),this.redrawAnnotations()},this.handleColorSlotClick=t=>{this.editingColorIndex===t?(this.canvasDrawingColor=this.defaultColors[t],this.showColorPicker=!1,this.editingColorIndex=-1):(this.editingColorIndex=t,this.showColorPicker=!0,this.canvasDrawingColor=this.defaultColors[t])},this.updateColorSlot=t=>{this.editingColorIndex>=0&&this.editingColorIndex<this.defaultColors.length&&(this.defaultColors[this.editingColorIndex]=t,this.canvasDrawingColor=t,this.showColorPicker=!1,this.editingColorIndex=-1,this.defaultColors=[...this.defaultColors])},this.handleColorPickerInput=t=>{t.stopPropagation();const e=t.target.value;this.editingColorIndex>=0&&this.editingColorIndex<this.defaultColors.length&&(this.defaultColors[this.editingColorIndex]=e,this.canvasDrawingColor=e,this.defaultColors=[...this.defaultColors])},this.handleColorPickerClick=t=>{t.stopPropagation()},this.closeColorPicker=()=>{this.showColorPicker=!1,this.editingColorIndex=-1},this.getTextWidth=(t,e)=>{if(!this.canvasContext)return t.length*e*.6;const o=this.canvasContext.font;this.canvasContext.font=`${e}px Arial`;const i=this.canvasContext.measureText(t).width;return this.canvasContext.font=o,i},this.isPointInResizeHandle=(t,e,o)=>{switch(o.type){case"rectangle":const i=o.startX+o.width,s=o.startY+o.height;return t>=i-4&&t<=i+4&&e>=s-4&&e<=s+4;case"line":case"arrow":const a=[{x:o.startX,y:o.startY,point:"start"},{x:o.endX,y:o.endY,point:"end"}];for(const o of a)if(t>=o.x-4&&t<=o.x+4&&e>=o.y-4&&e<=o.y+4)return o.point;return!1;default:return!1}},this.drawRectangleResizeHandles=t=>{if(!this.canvasContext||"rectangle"!==t.type)return;const e=t.startX+t.width,o=t.startY+t.height;this.canvasContext.fillStyle="#0070F4",this.canvasContext.strokeStyle="#ffffff",this.canvasContext.lineWidth=2,this.canvasContext.fillRect(e-4,o-4,8,8),this.canvasContext.strokeRect(e-4,o-4,8,8)},this.drawLineResizeHandles=t=>{if(!this.canvasContext||"line"!==t.type&&"arrow"!==t.type)return;const e=[{x:t.startX,y:t.startY},{x:t.endX,y:t.endY}];this.canvasContext.fillStyle="#0070F4",this.canvasContext.strokeStyle="#ffffff",this.canvasContext.lineWidth=2,e.forEach((t=>{this.canvasContext.fillRect(t.x-4,t.y-4,8,8),this.canvasContext.strokeRect(t.x-4,t.y-4,8,8)}))},this.startResize=(t,e,o)=>{this.isResizing=!0,this.resizingAnnotation=t,this.resizeHandle=e,this.dragStartPos=o,"rectangle"===t.type&&(this.resizeStartDimensions={width:t.width,height:t.height})},this.handleResize=t=>{if(!this.resizingAnnotation||!this.dragStartPos)return;const e=this.resizingAnnotation,o=this.annotations.findIndex((t=>t===e));if(-1===o)return;let i=Object.assign({},e);switch(e.type){case"rectangle":const e=t.y-this.dragStartPos.y;i.width=Math.max(10,this.resizeStartDimensions.width+(t.x-this.dragStartPos.x)),i.height=Math.max(10,this.resizeStartDimensions.height+e);break;case"line":case"arrow":"start"===this.resizeHandle?(i.startX=t.x,i.startY=t.y):"end"===this.resizeHandle&&(i.endX=t.x,i.endY=t.y)}this.annotations[o]=i,this.resizingAnnotation=i,this.redrawAnnotations()},this.startTextEditing=t=>{const e=prompt(this.editTextPromptText,t.text);if(null!==e&&e.trim()){const o=this.annotations.findIndex((e=>e===t));-1!==o&&(this.annotations[o]=Object.assign(Object.assign({},t),{text:e.trim()}),this.selectedAnnotation=this.annotations[o],this.redrawAnnotations())}},this.updateSelectedTextSize=t=>{if(this.selectedAnnotation&&"text"===this.selectedAnnotation.type){const e=this.annotations.findIndex((t=>t===this.selectedAnnotation));-1!==e&&(this.annotations[e]=Object.assign(Object.assign({},this.selectedAnnotation),{fontSize:Math.max(8,Math.min(72,t))}),this.selectedAnnotation=this.annotations[e],this.redrawAnnotations())}},this.updateSelectedBorderWidth=t=>{if(this.selectedAnnotation&&["rectangle","line","arrow"].includes(this.selectedAnnotation.type)){const e=this.annotations.findIndex((t=>t===this.selectedAnnotation));-1!==e&&(this.annotations[e]=Object.assign(Object.assign({},this.selectedAnnotation),{lineWidth:Math.max(1,Math.min(20,t))}),this.selectedAnnotation=this.annotations[e],this.redrawAnnotations())}},this.handleCanvasMouseDown=t=>{if(!this.canvasRef)return;if(window.innerWidth<=768)return;this.showColorPicker&&this.closeColorPicker();const e=this.getCanvasCoordinates(t),o=this.findAnnotationAt(e.x,e.y);if(o){if(this.selectedAnnotation=o.annotation,"text"!==o.annotation.type){const t=this.isPointInResizeHandle(e.x,e.y,o.annotation);if(t)return this.startResize(o.annotation,t,e),void(this.canvasRef.style.cursor="nw-resize")}if("text"===o.annotation.type&&2===t.detail)return void this.startTextEditing(o.annotation);if(!this.isDrawing)return this.isDragging=!0,this.draggedAnnotation=o.annotation,this.dragStartPos=e,void(this.canvasRef.style.cursor="grabbing")}else this.selectedAnnotation=null;if(this.isDrawing=!0,"text"===this.canvasDrawingTool){const t=prompt(this.editTextPromptText);t&&(this.annotations=[...this.annotations,{type:"text",x:e.x,y:e.y,text:t,color:this.canvasDrawingColor,fontSize:this.canvasTextSize}],this.redrawAnnotations()),this.isDrawing=!1}else this.currentAnnotation={type:this.canvasDrawingTool,startX:e.x,startY:e.y,color:this.canvasDrawingColor,lineWidth:this.canvasLineWidth}},this.handleCanvasMouseMove=t=>{if(!this.canvasRef)return;if(window.innerWidth<=768)return;const e=this.getCanvasCoordinates(t);if(this.isResizing&&this.resizingAnnotation)return void this.handleResize(e);if(this.isDragging&&this.draggedAnnotation&&this.dragStartPos){const t=e.x-this.dragStartPos.x,o=e.y-this.dragStartPos.y,i=Object.assign({},this.draggedAnnotation);switch(i.type){case"rectangle":i.startX+=t,i.startY+=o;break;case"line":case"arrow":i.startX+=t,i.startY+=o,i.endX+=t,i.endY+=o;break;case"text":i.x+=t,i.y+=o}const s=this.annotations.findIndex((t=>t===this.draggedAnnotation));return-1!==s&&(this.annotations[s]=i,this.draggedAnnotation=i),this.dragStartPos=e,void this.redrawAnnotations()}if(this.isDrawing&&this.currentAnnotation)return"rectangle"===this.canvasDrawingTool?(this.currentAnnotation.width=e.x-this.currentAnnotation.startX,this.currentAnnotation.height=e.y-this.currentAnnotation.startY):(this.currentAnnotation.endX=e.x,this.currentAnnotation.endY=e.y),this.redrawAnnotations(),void this.drawAnnotation(this.currentAnnotation);const o=this.findAnnotationAt(e.x,e.y);if(o){if("text"!==o.annotation.type&&this.isPointInResizeHandle(e.x,e.y,o.annotation))return this.canvasRef.style.cursor="nw-resize",this.hoveredAnnotation=o.annotation,void this.redrawAnnotations();this.canvasRef.style.cursor="grab",this.hoveredAnnotation!==o.annotation&&(this.hoveredAnnotation=o.annotation,this.redrawAnnotations())}else this.canvasRef.style.cursor="crosshair",this.hoveredAnnotation&&(this.hoveredAnnotation=null,this.redrawAnnotations())},this.handleCanvasMouseUp=()=>{if(!(window.innerWidth<=768))return this.isResizing?(this.isResizing=!1,this.resizingAnnotation=null,this.dragStartPos=null,this.resizeHandle=!1,this.resizeStartDimensions=null,void(this.canvasRef&&(this.canvasRef.style.cursor="crosshair"))):this.isDragging?(this.isDragging=!1,this.draggedAnnotation=null,this.dragStartPos=null,void(this.canvasRef&&(this.canvasRef.style.cursor="crosshair"))):void(this.isDrawing&&this.currentAnnotation&&(this.isDrawing=!1,this.annotations=[...this.annotations,this.currentAnnotation],this.currentAnnotation=null,this.redrawAnnotations()))},this.getCanvasCoordinates=t=>{if(!this.canvasRef)return{x:0,y:0};const e=this.canvasRef.getBoundingClientRect();return{x:this.canvasRef.width/e.width*(t.clientX-e.left),y:this.canvasRef.height/e.height*(t.clientY-e.top)}},this.findAnnotationAt=(t,e)=>{for(let o=this.annotations.length-1;o>=0;o--){const i=this.annotations[o];if(this.isPointInAnnotation(t,e,i))return{annotation:i,index:o}}return null},this.isPointInAnnotation=(t,e,o)=>{const i=10;switch(o.type){case"rectangle":const s=Math.min(o.startX,o.startX+o.width),a=Math.max(o.startX,o.startX+o.width),r=Math.min(o.startY,o.startY+o.height),n=Math.max(o.startY,o.startY+o.height);return t>=s-i&&t<=a+i&&e>=r-i&&e<=n+i;case"line":case"arrow":const d=o.endY-o.startY,c=o.startX-o.endX;return Math.abs(d*t+c*e+(o.endX*o.startY-o.startX*o.endY))/Math.sqrt(d*d+c*c)<=i;case"text":const h=o.fontSize||24,l=this.getTextWidth(o.text,h);return t>=o.x-i&&t<=o.x+l+i&&e>=o.y-h-i&&e<=o.y+i;default:return!1}},this.canvasEditorTitle="Edit screenshot",this.canvasEditorCancelText="Cancel",this.canvasEditorSaveText="Save",this.screenshotTakingText="Taking screenshot...",this.screenshotAttachedText="Screenshot attached",this.screenshotButtonText="Add a screenshot",this.autoStartScreenshot=!1,this.existingScreenshot="",this.editTextButtonText="Edit Text",this.sizeLabelText="Size:",this.borderLabelText="Border:",this.editTextPromptText="Edit text:",this.screenshotErrorGeneral="Failed to capture screenshot.",this.screenshotErrorPermission="Permission denied. Please allow screen sharing to take screenshots.",this.screenshotErrorNotSupported="Screen capture is not supported in this browser.",this.screenshotErrorNotFound="No screen sources available for capture.",this.screenshotErrorCancelled="Screenshot capture was cancelled.",this.screenshotErrorBrowserNotSupported="Your browser does not support screen capture. Please use a browser like Chrome, Firefox, or Safari on desktop.",this.screenshotErrorUnexpected="An unexpected error occurred. Please try again.",this.takingScreenshot=!1,this.showCanvasEditor=!1,this.canvasDrawingTool="rectangle",this.canvasDrawingColor="#ff0000",this.canvasLineWidth=3,this.canvasTextSize=24,this.isDrawing=!1,this.annotations=[],this.currentAnnotation=null,this.isDragging=!1,this.draggedAnnotation=null,this.dragStartPos=null,this.showColorPicker=!1,this.editingColorIndex=-1,this.selectedAnnotation=null,this.isResizing=!1,this.resizingAnnotation=null,this.resizeStartSize=24,this.resizeStartDimensions=null,this.hoveredAnnotation=null,this.resizeHandle=!1,this.defaultColors=["#ff0000","#00ff00","#0000ff","#000000"]}componentDidLoad(){this.autoStartScreenshot?(this.showCanvasEditor=!0,setTimeout((()=>{this.openScreenShot()}),100)):this.existingScreenshot&&(this.originalImageData=this.existingScreenshot,this.showCanvasEditor=!0,setTimeout((()=>{this.initializeCanvas()}),100)),this.handleWindowResize=this.handleWindowResize.bind(this),window.addEventListener("resize",this.handleWindowResize)}disconnectedCallback(){window.removeEventListener("resize",this.handleWindowResize)}async captureViewportScreenshot(){try{if(!navigator.mediaDevices||!navigator.mediaDevices.getDisplayMedia)throw new Error("Screen Capture API is not supported in this browser");const t=await navigator.mediaDevices.getDisplayMedia({video:{mediaSource:"screen",width:{ideal:window.innerWidth},height:{ideal:window.innerHeight}},audio:!1,preferCurrentTab:!0}),e=document.createElement("video");return e.srcObject=t,e.autoplay=!0,e.muted=!0,new Promise(((o,i)=>{e.onloadedmetadata=()=>{e.play(),setTimeout((()=>{try{const i=document.createElement("canvas");i.width=e.videoWidth,i.height=e.videoHeight,i.getContext("2d").drawImage(e,0,0),t.getTracks().forEach((t=>t.stop()));const s=i.toDataURL("image/png");console.log("Screenshot captured successfully using Screen Capture API"),o(s)}catch(e){t.getTracks().forEach((t=>t.stop())),i(e)}}),100)},e.onerror=()=>{t.getTracks().forEach((t=>t.stop())),i(new Error("Failed to load video for screenshot capture"))}}))}catch(t){throw console.error("Screen capture failed:",t),t}}render(){var t,e,i,s,a,r;return o("div",{class:"canvas-editor-wrapper"},this.showCanvasEditor&&o("div",{class:"canvas-editor-overlay"},o("div",{class:"canvas-editor-modal"},o("div",{class:"canvas-editor-header"},o("div",{class:"canvas-editor-title"},o("h3",null,this.canvasEditorTitle)),o("div",{class:"canvas-editor-toolbar"},o("div",{class:"toolbar-section"},o("div",{class:"tool-group"},o("button",{class:"tool-btn "+("rectangle"===this.canvasDrawingTool?"active":""),onClick:()=>this.canvasDrawingTool="rectangle",title:"Rectangle"},o("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",ry:"2"}))),o("button",{class:"tool-btn "+("line"===this.canvasDrawingTool?"active":""),onClick:()=>this.canvasDrawingTool="line",title:"Line"},o("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("line",{x1:"5",y1:"12",x2:"19",y2:"12"}))),o("button",{class:"tool-btn "+("arrow"===this.canvasDrawingTool?"active":""),onClick:()=>this.canvasDrawingTool="arrow",title:"Arrow"},o("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("line",{x1:"7",y1:"17",x2:"17",y2:"7"}),o("polyline",{points:"7,7 17,7 17,17"}))),o("button",{class:"tool-btn "+("text"===this.canvasDrawingTool?"active":""),onClick:()=>this.canvasDrawingTool="text",title:"Text"},o("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("polyline",{points:"4,7 4,4 20,4 20,7"}),o("line",{x1:"9",y1:"20",x2:"15",y2:"20"}),o("line",{x1:"12",y1:"4",x2:"12",y2:"20"}))),o("div",{class:"toolbar-divider"}),o("button",{class:"tool-btn undo-btn",onClick:this.undoLastAnnotation,disabled:0===this.annotations.length,title:"Undo"},o("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("polyline",{points:"1,4 1,10 7,10"}),o("path",{d:"M3.51,15a9,9,0,0,0,14.85-3.36,9,9,0,0,0-9.19-10.15L1.83,10"}))))),o("div",{class:"toolbar-section"},o("div",{class:"color-palette"},this.defaultColors.map(((t,e)=>o("div",{class:"color-slot-wrapper"},o("button",{class:`color-btn ${this.canvasDrawingColor===t?"active":""} ${this.editingColorIndex===e?"editing":""}`,style:{backgroundColor:t},onClick:()=>this.handleColorSlotClick(e),title:`Color ${e+1} - Click to customize`},this.editingColorIndex===e&&o("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"white","stroke-width":"2"},o("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===e&&this.showColorPicker&&o("div",{class:"color-picker-dropdown"},o("input",{type:"color",value:t,onInput:t=>this.handleColorPickerInput(t),onClick:t=>this.handleColorPickerClick(t)}))))))),(this.selectedAnnotation||this.canvasDrawingTool)&&o("div",{class:"toolbar-section selected-annotation-controls"},("text"===(null===(t=this.selectedAnnotation)||void 0===t?void 0:t.type)||!this.selectedAnnotation&&"text"===this.canvasDrawingTool)&&o("div",{class:"text-controls"},o("div",{class:"font-size-control"},o("label",null,this.sizeLabelText),o("input",{type:"range",min:"8",max:"72",value:(null===(e=this.selectedAnnotation)||void 0===e?void 0:e.fontSize)||this.canvasTextSize,onInput:t=>{const e=parseInt(t.target.value);this.selectedAnnotation?this.updateSelectedTextSize(e):this.canvasTextSize=e},class:"size-slider"}),o("span",{class:"size-value"},(null===(i=this.selectedAnnotation)||void 0===i?void 0:i.fontSize)||this.canvasTextSize,"px")),this.selectedAnnotation&&o("button",{class:"action-btn small",onClick:()=>this.startTextEditing(this.selectedAnnotation)},this.editTextButtonText)),(["rectangle","line","arrow"].includes(null===(s=this.selectedAnnotation)||void 0===s?void 0:s.type)||!this.selectedAnnotation&&["rectangle","line","arrow"].includes(this.canvasDrawingTool))&&o("div",{class:"shape-controls"},o("div",{class:"border-width-control"},o("label",null,this.borderLabelText),o("input",{type:"range",min:"1",max:"20",value:(null===(a=this.selectedAnnotation)||void 0===a?void 0:a.lineWidth)||this.canvasLineWidth,onInput:t=>{const e=parseInt(t.target.value);this.selectedAnnotation?this.updateSelectedBorderWidth(e):this.canvasLineWidth=e},class:"size-slider"}),o("span",{class:"size-value"},(null===(r=this.selectedAnnotation)||void 0===r?void 0:r.lineWidth)||this.canvasLineWidth,"px")))),o("div",{class:"toolbar-section"},o("button",{class:"action-btn secondary",onClick:this.closeCanvasEditor},this.canvasEditorCancelText),o("button",{class:"action-btn primary",onClick:this.saveAnnotations},this.canvasEditorSaveText))),o("div",{class:"canvas-editor-content"},o("canvas",{ref:t=>this.canvasRef=t,class:"annotation-canvas",onMouseDown:this.handleCanvasMouseDown,onMouseMove:this.handleCanvasMouseMove,onMouseUp:this.handleCanvasMouseUp,onMouseLeave:this.handleCanvasMouseUp}))))))}};a.style=':host{display:block}.canvas-editor-wrapper{position:relative}.canvas-editor-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.8);display:flex;align-items:center;justify-content:center;z-index:9999}.canvas-editor-modal{width:95vw;height:95vh;max-width:none;max-height:none;background:var(--feedback-canvas-editor-bg-color, #ffffff);border-radius:8px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2)}.canvas-editor-header{background:var(--feedback-canvas-editor-header-bg-color, #f5f5f5);border-bottom:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);padding:12px 16px;display:flex;flex-direction:column;gap:12px}.canvas-editor-title h3{margin:0;font-size:16px;font-weight:600;color:var(--feedback-canvas-editor-tool-text-color, #333)}.canvas-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.toolbar-section{display:flex;align-items:center;gap:8px}.tool-group{display:flex;align-items:center;gap:4px}.tool-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;transition:all 0.2s ease;padding:0}.tool-btn svg{width:18px;height:18px;color:var(--feedback-canvas-editor-tool-text-color, #333)}.tool-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.tool-btn.active,.tool-btn.active:hover{background:var(--feedback-canvas-editor-tool-bg-active, #0070f4);color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn.active svg{color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn:disabled{opacity:0.4;cursor:not-allowed;color:var(--feedback-canvas-editor-tool-text-color, #333)}.toolbar-divider{width:1px;height:24px;background:var(--feedback-canvas-editor-divider-color, #e0e0e0);margin:0 4px}.undo-btn{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff) !important;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0) !important}.undo-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0) !important}.color-palette{display:flex;align-items:center;gap:6px}.color-slot-wrapper{position:relative;display:flex;align-items:center}.color-btn{width:32px;height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0)}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:var(--feedback-primary-color, #0070f4);box-shadow:0 0 0 2px rgba(0, 112, 244, 0.2)}.color-btn.editing{border-color:var(--feedback-primary-color, #0070f4)}.color-picker-dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1)}.color-picker-dropdown input[type="color"]{width:40px;height:40px;border:none;border-radius:4px;cursor:pointer}.size-control{display:flex;align-items:center;gap:8px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:6px 12px}.size-slider{width:80px;height:20px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.size-slider::-webkit-slider-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;cursor:pointer}.size-slider::-moz-range-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none}.size-slider::-moz-range-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-slider::-ms-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none;color:transparent}.size-slider::-ms-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-value{font-weight:500;color:var(--feedback-canvas-editor-tool-text-color, #333);font-size:12px;min-width:30px}.selected-annotation-controls{border-left:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:12px;margin-left:8px;min-width:200px}.text-controls{display:flex;flex-direction:row;align-items:center;gap:12px}.font-size-control,.border-width-control{display:flex;align-items:center;gap:6px}.font-size-control label,.border-width-control label{font-size:12px;color:var(--feedback-canvas-editor-tool-text-color, #333);font-weight:500;min-width:35px}.action-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.2s ease;min-width:65px;justify-content:center;height:36px}.action-btn.secondary{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);color:var(--feedback-canvas-editor-tool-text-color, #333);border-color:var(--feedback-canvas-editor-border-color, #e0e0e0)}.action-btn.secondary:hover{background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.action-btn.primary{background:var(--feedback-primary-color, #0070f4);color:#ffffff;border-color:var(--feedback-primary-color, #0070f4)}.action-btn.primary:hover{background:#0056cc;border-color:#0056cc}.action-btn.small{height:28px;padding:4px 8px;font-size:12px;min-width:65px}.shape-controls{display:flex;flex-direction:column;gap:8px}.canvas-editor-content{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--feedback-canvas-editor-content-bg, #f5f5f5);overflow:hidden;min-height:0;min-width:0}.annotation-canvas{max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;border-radius:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);background:#ffffff;transition:box-shadow 0.3s ease;object-fit:contain;display:block}.annotation-canvas:hover{box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20)}@media screen and (min-width: 1920px){.canvas-editor-modal{width:90vw;height:90vh}.canvas-editor-content{padding:32px}}@media screen and (min-width: 1200px) and (max-width: 1919px){.canvas-editor-modal{width:92vw;height:92vh}.canvas-editor-content{padding:28px}}@media screen and (min-width: 769px) and (max-width: 1199px){.canvas-editor-modal{width:95vw;height:95vh}}@media screen and (max-width: 768px){.canvas-editor-modal{width:100vw;height:100vh;border-radius:0}.canvas-editor-toolbar{flex-direction:column;align-items:stretch;gap:8px}.toolbar-section{justify-content:center}.selected-annotation-controls{border-left:none;border-top:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:0;padding-top:8px;margin-left:0;margin-top:8px;min-width:auto}.canvas-editor-content{padding:16px}}';const r=class{constructor(o){t(this,o),this.feedbackSent=e(this,"feedbackSent",7),this.feedbackError=e(this,"feedbackError",7),this.buttonPosition="default",this.buttonStyle="default",this.hideIcon=!1,this.hideMobile=!1,this.sessionId="",this.metadata="",this.submit=!1,this.customFont=!1,this.emailAddress="",this.isEmailRequired=!1,this.fetchData=!0,this.hideEmail=!1,this.hidePrivacyPolicy=!0,this.hideRating=!1,this.hideScreenshotButton=!1,this.modalPosition="center",this.project="",this.rating=void 0,this.ratingMode="thumbs",this.emailPlaceholder="Email address (optional)",this.errorMessage="Please try again later.",this.errorMessage403="The request URL does not match the one defined in PushFeedback for this project.",this.errorMessage404="We could not find the provided project id in PushFeedback.",this.footerText="",this.messagePlaceholder="Comments",this.modalTitle="Share your feedback",this.modalTitleError="Oops!",this.modalTitleSuccess="Thanks for your feedback!",this.privacyPolicyText="I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.",this.ratingPlaceholder="Was this page helpful?",this.ratingStarsPlaceholder="How would you rate this page?",this.sendButtonText="Send",this.successMessage="",this.screenshotAttachedText="Screenshot attached",this.screenshotButtonText="Add a screenshot",this.screenshotTakingText="Taking screenshot...",this.screenshotEditTextButtonText="Edit text",this.screenshotEditorTitle="Edit screenshot",this.screenshotEditorCancelText="Cancel",this.screenshotEditorSaveText="Save",this.screenshotSizeLabelText="Size:",this.screenshotBorderLabelText="Border:",this.screenshotEditTextPromptText="Edit text:",this.screenshotErrorGeneral="Failed to capture screenshot.",this.screenshotErrorPermission="Permission denied. Please allow screen sharing to take screenshots.",this.screenshotErrorNotSupported="Screen capture is not supported in this browser.",this.screenshotErrorNotFound="No screen sources available for capture.",this.screenshotErrorCancelled="Screenshot capture was cancelled.",this.screenshotErrorBrowserNotSupported="Your browser does not support screen capture. Please use a browser like Chrome, Firefox, or Safari on desktop.",this.screenshotErrorUnexpected="An unexpected error occurred. Please try again."}componentWillLoad(){if(this.sessionId)localStorage.setItem("pushfeedback_sessionid",this.sessionId);else{let t=localStorage.getItem("pushfeedback_sessionid");t||(t=this.generateRandomSessionId(),localStorage.setItem("pushfeedback_sessionid",t),this.sessionId=t)}}componentDidLoad(){if("center-right"===this.buttonPosition){const t=this.el.shadowRoot.querySelector(".feedback-button-content");let e=0;this.isSafariBrowser()&&(e=5),t.style.right=(t.offsetWidth+e)/2*-1+"px"}this.customFont||this.loadInterFont()}connectedCallback(){this.feedbackModal=document.createElement("feedback-modal"),["customFont","emailAddress","fetchData","hideEmail","hidePrivacyPolicy","hideRating","hideScreenshotButton","isEmailRequired","modalPosition","project","rating","ratingMode","screenshotEditorTitle","screenshotEditorCancelText","screenshotEditorSaveText","screenshotEditTextButtonText","screenshotSizeLabelText","screenshotBorderLabelText","screenshotEditTextPromptText","screenshotErrorGeneral","screenshotErrorPermission","screenshotErrorNotSupported","screenshotErrorNotFound","screenshotErrorCancelled","screenshotErrorBrowserNotSupported","screenshotErrorUnexpected","emailPlaceholder","errorMessage","errorMessage403","errorMessage404","footerText","messagePlaceholder","metadata","modalTitle","modalTitleError","modalTitleSuccess","privacyPolicyText","ratingPlaceholder","ratingStarsPlaceholder","screenshotAttachedText","screenshotButtonText","screenshotTakingText","sendButtonText","successMessage"].forEach((t=>{this.feedbackModal[t]=this[t]})),document.body.appendChild(this.feedbackModal)}disconnectedCallback(){document.body.removeChild(this.feedbackModal)}generateRandomSessionId(t=16){return Math.random().toString(36).substr(2,t)}isSafariBrowser(){return/safari/i.test(navigator.userAgent)&&!/chrome/i.test(navigator.userAgent)}loadInterFont(){const t=document.createElement("link");t.href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",t.rel="stylesheet",document.head.appendChild(t)}showModal(){this.submit?this.submitRatingFeedback():this.feedbackModal.openModal()}async submitRatingFeedback(){try{const t={url:window.location.href,project:this.project,rating:this.rating||-1,ratingMode:this.ratingMode,message:"",metadata:this.metadata,session:localStorage.getItem("pushfeedback_sessionid")||""},e=await fetch("https://app.pushfeedback.com/api/feedback/",{method:"POST",body:JSON.stringify(t),headers:{"Content-Type":"application/json"}});if(201===e.status){const o=Object.assign(Object.assign({},t),{id:await e.json()});this.feedbackSent.emit({feedback:o})}else if(202===e.status){const t={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 e.json()};this.feedbackSent.emit({feedback:t})}else{const t=await e.text();this.feedbackError.emit({error:{status:e.status,message:t}})}}catch(t){this.feedbackError.emit({error:{status:500,message:t}})}}render(){return o(i,null,o("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&&"default"!=this.buttonStyle&&o("span",{class:"feedback-button-content-icon"},o("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"},o("path",{d:"M12 20h9"}),o("path",{d:"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"}))),o("slot",null)))}get el(){return s(this)}};r.style=".feedback-button-content{cursor:pointer;max-width:fit-content;letter-spacing:var(--feedback-button-letter-spacing);z-index:var(--feedback-button-z-index);font-family:var(--feedback-font-family)}.feedback-button-content--custom-font{font-family:inherit}.feedback-button-content--light{align-items:center;background-color:var(--feedback-button-light-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-light-text-color);display:flex;font-size:var(--feedback-button-text-font-size);font-weight:var(--feedback-button-text-font-weight);padding:8px 15px}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-button-dark-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-dark-text-color);display:flex;font-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.icon-edit{stroke:var(--feedback-button-light-icon-color)}.feedback-button-content--dark .icon-edit{stroke:var(--feedback-button-dark-icon-color)}.feedback-button-content--bottom-right{bottom:10px;position:fixed;right:10px}.feedback-button-content--center-right{position:fixed;transform:rotate(-90deg) translateY(-50%);top:50%}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-left-radius:0px;border-bottom-right-radius:0px}.feedback-button-content-icon{height:16px;margin-right:5px;width:16px}.feedback-button-content--center-right .feedback-button-content-icon{rotate:90deg}@media screen and (max-width: 767px){.feedback-button-content--hide-mobile{display:none}}";const n=class{constructor(o){t(this,o),this.feedbackSent=e(this,"feedbackSent",7),this.feedbackError=e(this,"feedbackError",7),this.onScrollDebounced=()=>{clearTimeout(this.scrollTimeout),this.scrollTimeout=setTimeout((()=>{document.documentElement.classList.remove("feedback-modal-screenshot-closing"),document.documentElement.style.top="",window.removeEventListener("scroll",this.onScrollDebounced)}),200)},this.handleSubmit=async t=>{if(t.preventDefault(),!this.isEmailRequired||this.formEmail){this.resetOverflow(),this.showScreenshotMode=!1,this.showScreenshotTopBar=!1,this.showModal=!1,this.sending=!0;try{const t={url:window.location.href,message:this.formMessage,email:this.formEmail,project:this.project,screenshot:this.encodedScreenshot,rating:this.selectedRating,ratingMode:this.ratingMode,metadata:this.metadata,verification:this.formVerification,session:localStorage.getItem("pushfeedback_sessionid")||""},e=await fetch("https://app.pushfeedback.com/api/feedback/",{method:"POST",body:JSON.stringify(t),headers:{"Content-Type":"application/json"}});if(201===e.status){const o=Object.assign(Object.assign({},t),{id:await e.json()});this.feedbackSent.emit({feedback:o}),this.formSuccess=!0,this.formError=!1}else if(202===e.status){const t={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 e.json()};this.feedbackSent.emit({feedback:t}),this.formSuccess=!0,this.formError=!1}else{const t=await e.text();this.feedbackError.emit({error:{status:e.status,message:t}}),this.formSuccess=!1,this.formError=!0,this.formErrorStatus=e.status}}catch(t){this.feedbackError.emit({error:{status:500,message:t}}),this.formSuccess=!1,this.formError=!0,this.formErrorStatus=500}finally{this.sending=!1,this.showModal=!0}}},this.close=()=>{this.isAnimating=!1,setTimeout((()=>{this.sending=!1,this.showModal=!1,this.showScreenshotMode=!1,this.showScreenshotTopBar=!1,this.hasSelectedElement=!1,this.encodedScreenshot=null,document.querySelectorAll(".feedback-modal-element-selected").forEach((t=>{t.classList.remove("feedback-modal-element-selected")})),this.formSuccess=!1,this.formError=!1,this.formErrorStatus=500,this.formMessage="",this.formEmail="",this.resetOverflow()}),200)},this.handleScreenshotReady=t=>{this.encodedScreenshot=t.detail.screenshot,this.showModal=!0,this.takingScreenshot=!1,this.showCanvasEditor=!1,this.autoStartCapture=!1},this.handleScreenshotCancelled=()=>{this.showModal=!0,this.takingScreenshot=!1,this.showCanvasEditor=!1,this.autoStartCapture=!1},this.handleScreenshotError=t=>{console.error("Screenshot error:",t.detail.error),this.screenshotError=t.detail.error,this.showScreenshotError=!0,this.showModal=!0,this.takingScreenshot=!1,this.showCanvasEditor=!1,this.autoStartCapture=!1,setTimeout((()=>{this.showScreenshotError=!1}),8e3)},this.openScreenShot=()=>{this.showModal=!1,this.takingScreenshot=!0,this.autoStartCapture=!0,this.showCanvasEditor=!0},this.openCanvasEditor=t=>{t&&t.stopPropagation(),this.showModal=!1,this.autoStartCapture=!1,this.showCanvasEditor=!0},this.sending=!1,this.formMessage="",this.formEmail="",this.formSuccess=!1,this.formVerification="",this.formError=!1,this.formErrorStatus=500,this.encodedScreenshot=void 0,this.isPrivacyChecked=!1,this.whitelabel=!1,this.selectedRating=-1,this.overlayVisible=!1,this.isAnimating=!1,this.takingScreenshot=!1,this.showScreenshotError=!1,this.screenshotError="",this.showCanvasEditor=!1,this.autoStartCapture=!1,this.customFont=!1,this.emailAddress="",this.hideEmail=!1,this.isEmailRequired=!1,this.ratingMode="thumbs",this.hasSelectedElement=!1,this.hidePrivacyPolicy=!0,this.hideRating=!1,this.hideScreenshotButton=!1,this.project="",this.showScreenshotMode=!1,this.showScreenshotTopBar=!1,this.showModal=!1,this.rating=void 0,this.metadata=void 0,this.fetchData=!0,this.emailPlaceholder="Email address (optional)",this.errorMessage="Please try again later.",this.errorMessage403="The request URL does not match the one defined in PushFeedback for this project.",this.errorMessage404="We could not find the provided project ID in PushFeedback.",this.messagePlaceholder="Comments",this.footerText="",this.modalPosition="center",this.modalTitle="Share your feedback",this.modalTitleError="Oops!",this.modalTitleSuccess="Thanks for your feedback!",this.privacyPolicyText="I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.",this.ratingPlaceholder="Was this page helpful?",this.ratingStarsPlaceholder="How would you rate this page?",this.sendButtonText="Send",this.successMessage="",this.screenshotAttachedText="Screenshot attached",this.screenshotButtonText="Add a screenshot",this.screenshotTakingText="Taking screenshot...",this.screenshotEditTextButtonText="Edit text",this.screenshotEditorTitle="Edit screenshot",this.screenshotEditorCancelText="Cancel",this.screenshotEditorSaveText="Save",this.screenshotSizeLabelText="Size:",this.screenshotBorderLabelText="Border:",this.screenshotEditTextPromptText="Edit text:",this.screenshotErrorGeneral="Failed to capture screenshot.",this.screenshotErrorPermission="Permission denied. Please allow screen sharing to take screenshots.",this.screenshotErrorNotSupported="Screen capture is not supported in this browser.",this.screenshotErrorNotFound="No screen sources available for capture.",this.screenshotErrorCancelled="Screenshot capture was cancelled.",this.screenshotErrorBrowserNotSupported="Your browser does not support screen capture. Please use a browser like Chrome, Firefox, or Safari on desktop.",this.screenshotErrorUnexpected="An unexpected error occurred. Please try again."}componentWillLoad(){this.fetchData&&this.fetchProjectData(),this.formEmail=this.emailAddress,this.rating&&(this.selectedRating=this.rating),"thumbs"==this.ratingMode&&0==this.rating&&(this.selectedRating=5)}async fetchProjectData(){try{const t=await fetch("https://app.pushfeedback.com/api/projects/"+this.project+"/"),e=await t.json();this.whitelabel=e.whitelabel}catch(t){console.log(t)}}resetOverflow(){document.documentElement.classList.remove("feedback-modal-screenshot-open"),document.documentElement.classList.remove("feedback-modal-screenshot-open--scroll"),document.documentElement.classList.remove("feedback-modal-screenshot-closing")}handleMessageInput(t){this.formMessage=t.target.value}handleEmailInput(t){this.formEmail=t.target.value}handleCheckboxChange(t){this.isPrivacyChecked=t.target.checked}handleVerification(t){this.formVerification=t.target.value}handleRatingChange(t){this.selectedRating=t}render(){return o("div",{class:"feedback-modal-wrapper "+(this.customFont?"feedback-modal-wrapper--custom-font":"")},this.showCanvasEditor&&o("canvas-editor",{ref:t=>this.canvasEditorRef=t,"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&&o("div",{class:"screenshot-error-notification"},o("div",{class:"screenshot-error-content"},o("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("circle",{cx:"12",cy:"12",r:"10"}),o("line",{x1:"15",y1:"9",x2:"9",y2:"15"}),o("line",{x1:"9",y1:"9",x2:"15",y2:"15"})),o("span",null,this.screenshotError),o("button",{class:"error-close-btn",onClick:()=>this.showScreenshotError=!1,title:"Close"},o("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),o("line",{x1:"6",y1:"6",x2:"18",y2:"18"}))))),this.showModal&&o("div",{class:"feedback-overlay "+(this.isAnimating?"feedback-overlay--visible":"")}),this.showModal&&o("div",{class:`feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating?"feedback-modal-content--open":""}`,ref:t=>this.modalContent=t},o("div",{class:"feedback-modal-header"},o("span",null,this.formSuccess||this.formError?this.formSuccess?this.modalTitleSuccess:this.modalTitleError:this.modalTitle),o("button",{class:"feedback-modal-close",onClick:this.close},o("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"},o("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),o("line",{x1:"6",y1:"6",x2:"18",y2:"18"})))),o("div",{class:"feedback-modal-body"},this.formSuccess||this.formError?this.formSuccess&&!this.formError?o("div",{class:"feedback-modal-success"},o("p",{class:"feedback-modal-message"},this.successMessage)):this.formError&&404==this.formErrorStatus?o("p",{class:"feedback-modal-message"},this.errorMessage404):this.formError&&403==this.formErrorStatus?o("p",{class:"feedback-modal-message"},this.errorMessage403):this.formError?o("p",{class:"feedback-modal-message"},this.errorMessage):o("span",null):o("form",{onSubmit:this.handleSubmit},!this.hideRating&&o("div",{class:"feedback-modal-rating"},"thumbs"===this.ratingMode?o("div",{class:"feedback-modal-rating-content"},o("span",{class:"feedback-modal-input-heading"},this.ratingPlaceholder),o("div",{class:"feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs"},o("button",{title:"Yes",class:"feedback-modal-rating-button "+(1===this.selectedRating?"feedback-modal-rating-button--selected":""),onClick:t=>{t.preventDefault(),this.handleRatingChange(1)}},o("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"},o("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"}))),o("button",{title:"No",class:"feedback-modal-rating-button "+(5===this.selectedRating?"feedback-modal-rating-button--selected":""),onClick:t=>{t.preventDefault(),this.handleRatingChange(5)}},o("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"},o("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"}))))):o("div",{class:"feedback-modal-rating-content"},o("span",{class:"feedback-modal-input-heading"},this.ratingStarsPlaceholder),o("div",{class:"feedback-modal-rating-buttons feedback-modal-rating-buttons--stars"},[1,2,3,4,5].map((t=>o("button",{key:t,class:"feedback-modal-rating-button "+(this.selectedRating>=t?"feedback-modal-rating-button--selected":""),onClick:e=>{e.preventDefault(),this.handleRatingChange(t)}},o("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"},o("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"})))))))),o("div",{class:"feedback-modal-text"},o("textarea",{placeholder:this.messagePlaceholder,value:this.formMessage,onInput:t=>this.handleMessageInput(t)})),!this.hideEmail&&o("div",{class:"feedback-modal-email"},o("input",{placeholder:this.emailPlaceholder,type:"email",onInput:t=>this.handleEmailInput(t),value:this.formEmail,required:this.isEmailRequired})),o("div",{class:"feedback-verification"},o("input",{type:"text",name:"verification",style:{display:"none"},onInput:t=>this.handleVerification(t),value:this.formVerification})),!this.hidePrivacyPolicy&&o("div",{class:"feedback-modal-privacy"},o("input",{type:"checkbox",id:"privacyPolicy",onChange:t=>this.handleCheckboxChange(t),required:!0}),o("span",{innerHTML:this.privacyPolicyText})),o("div",{class:"feedback-modal-buttons "+(this.hideScreenshotButton?"single":"")},!this.hideScreenshotButton&&o("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&&o("div",{class:"screenshot-preview",onClick:this.openCanvasEditor},o("img",{src:this.encodedScreenshot,alt:"Screenshot Preview"})),!this.encodedScreenshot&&!this.takingScreenshot&&o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24",viewBox:"0 -960 960 960",width:"24"},o("path",{d:"M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z"})),this.takingScreenshot&&o("div",{class:"screenshot-loading"},o("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"},o("line",{x1:"12",y1:"2",x2:"12",y2:"6"}),o("line",{x1:"12",y1:"18",x2:"12",y2:"22"}),o("line",{x1:"4.93",y1:"4.93",x2:"7.76",y2:"7.76"}),o("line",{x1:"16.24",y1:"16.24",x2:"19.07",y2:"19.07"}),o("line",{x1:"2",y1:"12",x2:"6",y2:"12"}),o("line",{x1:"18",y1:"12",x2:"22",y2:"12"}),o("line",{x1:"4.93",y1:"19.07",x2:"7.76",y2:"16.24"}),o("line",{x1:"16.24",y1:"7.76",x2:"19.07",y2:"4.93"}))),this.takingScreenshot?this.screenshotTakingText:this.encodedScreenshot?this.screenshotAttachedText:this.screenshotButtonText),o("button",{class:"feedback-modal-button feedback-modal-button--submit",type:"submit",disabled:this.sending},this.sendButtonText)))),o("div",{class:"feedback-modal-footer"},o("div",{class:"feedback-logo",style:{display:this.whitelabel?"none":"block"}},"Powered by"," ",o("a",{target:"_blank",href:"https://pushfeedback.com"},"PushFeedback.com")),this.footerText&&o("div",{class:"feedback-footer-text"},o("span",{innerHTML:this.footerText})))))}componentDidRender(){this.showModal&&requestAnimationFrame((()=>{this.overlayVisible=!0}))}async openModal(){this.showModal=!0,requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.isAnimating=!0}))}))}};n.style=".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.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)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:3px solid var(--feedback-modal-element-selected-border-color) !important;box-shadow:0 0 0 2px rgba(0, 123, 255, 0.3) !important}.screenshot-preview{display:inline-block;width:30px;height:30px;overflow:hidden;border-radius:4px;margin-right:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:transform 0.2s ease}.screenshot-preview:hover{transform:scale(1.1)}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.screenshot-loading{display:inline-flex;align-items:center;margin-right:8px}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}@keyframes feather-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.feather-loader{animation:feather-spin 1s linear infinite;display:block}.screenshot-error-notification{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:10001;max-width:500px;width:90%;animation:slideDown 0.3s ease-out}@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.screenshot-error-content{background:#fee;border:1px solid #fcc;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);color:#c53030}.screenshot-error-content svg:first-child{color:#e53e3e;flex-shrink:0}.screenshot-error-content span{flex:1;font-size:14px;line-height:1.4;font-weight:500}.error-close-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#c53030;flex-shrink:0;transition:background-color 0.2s ease}.error-close-btn:hover{background:rgba(197, 48, 48, 0.1)}@media screen and (max-width: 768px){.feedback-modal-content{width:100vw;height:100dvh;max-width:none;border-radius:0;top:0;left:0;transform:scale(0.95);padding:24px 20px;display:flex;flex-direction:column}.feedback-modal-content--open{transform:scale(1)}.feedback-modal-buttons{display:flex;flex-direction:column;gap:12px}.feedback-modal-button--screenshot{display:none !important}.feedback-modal-button--submit{width:100%}.feedback-modal-text textarea{flex:1;min-height:120px;resize:none}}";export{a as canvas_editor,r as feedback_button,n as feedback_modal}
package/dist/pushfeedback/pushfeedback.css CHANGED
@@ -1 +1 @@
1
- :root{--feedback-primary-color:#0070F4;--feedback-secondary-color:#f1f3f4;--feedback-light-color:#ccc;--feedback-dark-color:#191919;--feedback-text-color:#5f6368;--feedback-white-color:#fff;--feedback-highlight-color:#ffb422;--feedback-font-family:"Inter", "Tahoma", "sans-serif";--feedback-heading-font-size:16px;--feedback-text-font-size:14px;--feedback-button-border-radius:20px;--feedback-button-dark-bg-color:var(--feedback-primary-color);--feedback-button-dark-text-color:var(--feedback-white-color);--feedback-button-dark-icon-color:var(--feedback-white-color);--feedback-button-light-bg-color:var(--feedback-white-color);--feedback-button-light-text-color:var(--feedback-primary-color);--feedback-button-light-icon-color:var(--feedback-primary-color);--feedback-button-text-font-size:var(--feedback-text-font-size);--feedback-button-text-font-weight:600;--feedback-button-z-index:300;--feedback-modal-button-bg-color:var(--feedback-white-color);--feedback-modal-button-bg-color-active:var(--feedback-white-color);--feedback-modal-button-border-color:var(--feedback-light-color);--feedback-modal-button-border-color-active:var(--feedback-primary-color);--feedback-modal-button-border-radius:4px;--feedback-modal-button-font-size:var(--feedback-text-font-size);--feedback-modal-button-icon-color:var(--feedback-dark-color);--feedback-modal-button-icon-color-active:var(--feedback-primary-color);--feedback-modal-button-submit-bg-color:var(--feedback-primary-color);--feedback-modal-button-submit-bg-color-hover:var(--feedback-primary-color);--feedback-modal-button-submit-border-color-hover:var(--feedback-primary-color);--feedback-modal-button-submit-text-color:var(--feedback-white-color);--feedback-modal-button-submit-text-color-hover:var(--feedback-white-color);--feedback-modal-button-text-color:var(--feedback-dark-color);--feedback-modal-button-text-color-active:var(--feedback-primary-color);--feedback-modal-close-bg-color:var(--feedback-white-color);--feedback-modal-close-color:var(--feedback-dark-color);--feedback-modal-content-bg-color:var(--feedback-white-color);--feedback-modal-content-border-color:var(--feedback-light-color);--feedback-modal-content-border-radius:8px;--feedback-modal-content-font-family:var(--feedback-font-family);--feedback-modal-content-position-bottom:10px;--feedback-modal-content-position-left:10px;--feedback-modal-content-position-right:10px;--feedback-modal-content-position-top:10px;--feedback-modal-content-max-width:600px;--feedback-modal-content-sidebar-max-width:300px;--feedback-modal-content-text-color:var(--feedback-text-color);--feedback-modal-content-z-index:300;--feedback-modal-element-hover-border-color:var(--feedback-primary-color);--feedback-modal-element-selected-border-color:var(--feedback-primary-color);--feedback-modal-footer-link:var(--feedback-dark-color);--feedback-modal-header-font-family:var(--feedback-font-family);--feedback-modal-header-font-size:var(--feedback-heading-font-size);--feedback-modal-header-font-weight:500;--feedback-modal-header-text-color:var(--feedback-dark-color);--feedback-modal-input-bg-color:var(--feedback-secondary-color);--feedback-modal-input-border-color:transparent;--feedback-modal-input-border-color-focused:transparent;--feedback-modal-input-border-radius:4px;--feedback-modal-input-font-size:var(--feedback-text-font-size);--feedback-modal-input-text-color:var(--feedback-text-color);--feedback-modal-message-font-size:var(--feedback-text-font-size);--feedback-modal-modal-wrapper-z-index:300;--feedback-modal-rating-button-color:var(--feedback-text-color);--feedback-modal-rating-button-selected-color:var(--feedback-primary-color);--feedback-modal-rating-button-stars-selected-color:var(--feedback-highlight-color);--feedback-modal-screenshot-bg-color:rgba(0, 0, 0, 0.4);--feedback-modal-screenshot-close-color:var(--feedback-dark-color);--feedback-modal-screenshot-header-bg-color:var(--feedback-white-color);--feedback-modal-screenshot-header-text-color:var(--feedback-dark-color);--feedback-modal-screenshot-header-z-index:250;--feedback-modal-screnshot-z-index:100;--feedback-canvas-editor-bg-color:var(--feedback-white-color);--feedback-canvas-editor-border-color:var(--feedback-light-color);--feedback-canvas-editor-header-bg-color:var(--feedback-secondary-color);--feedback-canvas-editor-tool-bg-color:var(--feedback-white-color);--feedback-canvas-editor-tool-bg-hover:var(--feedback-secondary-color);--feedback-canvas-editor-tool-bg-active:var(--feedback-primary-color);--feedback-canvas-editor-tool-text-color:var(--feedback-text-color);--feedback-canvas-editor-tool-text-active:var(--feedback-white-color);--feedback-canvas-editor-action-primary-bg:var(--feedback-primary-color);--feedback-canvas-editor-action-primary-text:var(--feedback-white-color);--feedback-canvas-editor-action-secondary-bg:var(--feedback-white-color);--feedback-canvas-editor-action-secondary-text:var(--feedback-text-color);--feedback-canvas-editor-action-secondary-border:var(--feedback-light-color);--feedback-canvas-editor-divider-color:var(--feedback-light-color);--feedback-canvas-editor-content-bg:var(--feedback-secondary-color);--feedback-canvas-editor-resize-handle-color:var(--feedback-primary-color);--feedback-canvas-editor-slider-track:var(--feedback-light-color)}[data-theme='dark']{--feedback-text-color:#b0b8c4;--feedback-light-color:#363636;--feedback-modal-button-bg-color-active:transparent;--feedback-modal-button-icon-color:var(--feedback-white-color);--feedback-modal-button-text-color:var(--feedback-white-color);--feedback-modal-close-bg-color:transparent;--feedback-modal-close-color:var(--feedback-white-color);--feedback-modal-content-bg-color:var(--feedback-dark-color);--feedback-modal-content-text-color:var(--feedback-text-color);--feedback-modal-footer-link:var(--feedback-white-color);--feedback-modal-header-text-color:var(--feedback-white-color);--feedback-modal-input-bg-color:var(--feedback-light-color);--feedback-modal-input-text-color:var(--feedback-white-color);--feedback-modal-rating-button-color:var(--feedback-white-color);--feedback-modal-screenshot-close-color:var(--feedback-white-color);--feedback-modal-screenshot-header-bg-color:var(--feedback-dark-color);--feedback-modal-screenshot-header-text-color:var(--feedback-white-color);--feedback-canvas-editor-bg-color:var(--feedback-dark-color);--feedback-canvas-editor-border-color:var(--feedback-light-color);--feedback-canvas-editor-header-bg-color:var(--feedback-light-color);--feedback-canvas-editor-tool-bg-color:var(--feedback-light-color);--feedback-canvas-editor-tool-bg-hover:#4a4a4a;--feedback-canvas-editor-tool-text-color:var(--feedback-white-color);--feedback-canvas-editor-action-secondary-bg:var(--feedback-light-color);--feedback-canvas-editor-action-secondary-text:var(--feedback-white-color);--feedback-canvas-editor-action-secondary-border:var(--feedback-light-color);--feedback-canvas-editor-content-bg:var(--feedback-light-color);--feedback-canvas-editor-divider-color:#4a4a4a;--feedback-canvas-editor-slider-track:#4a4a4a}.feedback-modal-screenshot-open{position:fixed;width:100%}.feedback-modal-screenshot-open--scroll{overflow-y:scroll}
1
+ :root{--feedback-primary-color:#0070F4;--feedback-secondary-color:#f1f3f4;--feedback-light-color:#ccc;--feedback-dark-color:#191919;--feedback-text-color:#5f6368;--feedback-white-color:#fff;--feedback-highlight-color:#ffb422;--feedback-font-family:"Inter", "Tahoma", "sans-serif";--feedback-heading-font-size:16px;--feedback-text-font-size:14px;--feedback-button-border-radius:20px;--feedback-button-dark-bg-color:var(--feedback-primary-color);--feedback-button-dark-text-color:var(--feedback-white-color);--feedback-button-dark-icon-color:var(--feedback-white-color);--feedback-button-light-bg-color:var(--feedback-white-color);--feedback-button-light-text-color:var(--feedback-primary-color);--feedback-button-light-icon-color:var(--feedback-primary-color);--feedback-button-letter-spacing:0.02em;--feedback-button-text-font-size:var(--feedback-text-font-size);--feedback-button-text-font-weight:600;--feedback-button-z-index:300;--feedback-modal-button-bg-color:var(--feedback-white-color);--feedback-modal-button-bg-color-active:var(--feedback-white-color);--feedback-modal-button-border-color:var(--feedback-light-color);--feedback-modal-button-border-color-active:var(--feedback-primary-color);--feedback-modal-button-border-radius:4px;--feedback-modal-button-font-size:var(--feedback-text-font-size);--feedback-modal-button-icon-color:var(--feedback-dark-color);--feedback-modal-button-icon-color-active:var(--feedback-primary-color);--feedback-modal-button-submit-bg-color:var(--feedback-primary-color);--feedback-modal-button-submit-bg-color-hover:var(--feedback-primary-color);--feedback-modal-button-submit-border-color-hover:var(--feedback-primary-color);--feedback-modal-button-submit-text-color:var(--feedback-white-color);--feedback-modal-button-submit-text-color-hover:var(--feedback-white-color);--feedback-modal-button-text-color:var(--feedback-dark-color);--feedback-modal-button-text-color-active:var(--feedback-primary-color);--feedback-modal-close-bg-color:var(--feedback-white-color);--feedback-modal-close-color:var(--feedback-dark-color);--feedback-modal-content-bg-color:var(--feedback-white-color);--feedback-modal-content-border-color:var(--feedback-light-color);--feedback-modal-content-border-radius:8px;--feedback-modal-content-font-family:var(--feedback-font-family);--feedback-modal-content-position-bottom:10px;--feedback-modal-content-position-left:10px;--feedback-modal-content-position-right:10px;--feedback-modal-content-position-top:10px;--feedback-modal-content-max-width:600px;--feedback-modal-content-sidebar-max-width:300px;--feedback-modal-content-text-color:var(--feedback-text-color);--feedback-modal-content-z-index:300;--feedback-modal-element-hover-border-color:var(--feedback-primary-color);--feedback-modal-element-selected-border-color:var(--feedback-primary-color);--feedback-modal-footer-link:var(--feedback-dark-color);--feedback-modal-header-font-family:var(--feedback-font-family);--feedback-modal-header-font-size:var(--feedback-heading-font-size);--feedback-modal-header-font-weight:500;--feedback-modal-header-text-color:var(--feedback-dark-color);--feedback-modal-input-bg-color:var(--feedback-secondary-color);--feedback-modal-input-border-color:transparent;--feedback-modal-input-border-color-focused:transparent;--feedback-modal-input-border-radius:4px;--feedback-modal-input-font-size:var(--feedback-text-font-size);--feedback-modal-input-text-color:var(--feedback-text-color);--feedback-modal-message-font-size:var(--feedback-text-font-size);--feedback-modal-modal-wrapper-z-index:300;--feedback-modal-rating-button-color:var(--feedback-text-color);--feedback-modal-rating-button-selected-color:var(--feedback-primary-color);--feedback-modal-rating-button-stars-selected-color:var(--feedback-highlight-color);--feedback-modal-screenshot-bg-color:rgba(0, 0, 0, 0.4);--feedback-modal-screenshot-close-color:var(--feedback-dark-color);--feedback-modal-screenshot-header-bg-color:var(--feedback-white-color);--feedback-modal-screenshot-header-text-color:var(--feedback-dark-color);--feedback-modal-screenshot-header-z-index:250;--feedback-modal-screnshot-z-index:100;--feedback-canvas-editor-bg-color:var(--feedback-white-color);--feedback-canvas-editor-border-color:var(--feedback-light-color);--feedback-canvas-editor-header-bg-color:var(--feedback-secondary-color);--feedback-canvas-editor-tool-bg-color:var(--feedback-white-color);--feedback-canvas-editor-tool-bg-hover:var(--feedback-secondary-color);--feedback-canvas-editor-tool-bg-active:var(--feedback-primary-color);--feedback-canvas-editor-tool-text-color:var(--feedback-text-color);--feedback-canvas-editor-tool-text-active:var(--feedback-white-color);--feedback-canvas-editor-action-primary-bg:var(--feedback-primary-color);--feedback-canvas-editor-action-primary-text:var(--feedback-white-color);--feedback-canvas-editor-action-secondary-bg:var(--feedback-white-color);--feedback-canvas-editor-action-secondary-text:var(--feedback-text-color);--feedback-canvas-editor-action-secondary-border:var(--feedback-light-color);--feedback-canvas-editor-divider-color:var(--feedback-light-color);--feedback-canvas-editor-content-bg:var(--feedback-secondary-color);--feedback-canvas-editor-resize-handle-color:var(--feedback-primary-color);--feedback-canvas-editor-slider-track:var(--feedback-light-color)}[data-theme='dark']{--feedback-text-color:#b0b8c4;--feedback-light-color:#363636;--feedback-modal-button-bg-color-active:transparent;--feedback-modal-button-icon-color:var(--feedback-white-color);--feedback-modal-button-text-color:var(--feedback-white-color);--feedback-modal-close-bg-color:transparent;--feedback-modal-close-color:var(--feedback-white-color);--feedback-modal-content-bg-color:var(--feedback-dark-color);--feedback-modal-content-text-color:var(--feedback-text-color);--feedback-modal-footer-link:var(--feedback-white-color);--feedback-modal-header-text-color:var(--feedback-white-color);--feedback-modal-input-bg-color:var(--feedback-light-color);--feedback-modal-input-text-color:var(--feedback-white-color);--feedback-modal-rating-button-color:var(--feedback-white-color);--feedback-modal-screenshot-close-color:var(--feedback-white-color);--feedback-modal-screenshot-header-bg-color:var(--feedback-dark-color);--feedback-modal-screenshot-header-text-color:var(--feedback-white-color);--feedback-canvas-editor-bg-color:var(--feedback-dark-color);--feedback-canvas-editor-border-color:var(--feedback-light-color);--feedback-canvas-editor-header-bg-color:var(--feedback-light-color);--feedback-canvas-editor-tool-bg-color:var(--feedback-light-color);--feedback-canvas-editor-tool-bg-hover:#4a4a4a;--feedback-canvas-editor-tool-text-color:var(--feedback-white-color);--feedback-canvas-editor-action-secondary-bg:var(--feedback-light-color);--feedback-canvas-editor-action-secondary-text:var(--feedback-white-color);--feedback-canvas-editor-action-secondary-border:var(--feedback-light-color);--feedback-canvas-editor-content-bg:var(--feedback-light-color);--feedback-canvas-editor-divider-color:#4a4a4a;--feedback-canvas-editor-slider-track:#4a4a4a}.feedback-modal-screenshot-open{position:fixed;width:100%}.feedback-modal-screenshot-open--scroll{overflow-y:scroll}
package/dist/pushfeedback/pushfeedback.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as e,b as t}from"./p-af2a1f7f.js";export{s as setNonce}from"./p-af2a1f7f.js";(()=>{const t=import.meta.url,r={};return""!==t&&(r.resourcesUrl=new URL(".",t).href),e(r)})().then((e=>t([["p-03fe0ff1",[[1,"feedback-button",{buttonPosition:[1,"button-position"],buttonStyle:[1,"button-style"],hideIcon:[4,"hide-icon"],hideMobile:[4,"hide-mobile"],sessionId:[1537,"session-id"],metadata:[1],submit:[4],customFont:[4,"custom-font"],emailAddress:[1,"email-address"],isEmailRequired:[4,"is-email-required"],fetchData:[4,"fetch-data"],hideEmail:[4,"hide-email"],hidePrivacyPolicy:[4,"hide-privacy-policy"],hideRating:[4,"hide-rating"],hideScreenshotButton:[4,"hide-screenshot-button"],modalPosition:[1,"modal-position"],project:[1],rating:[2],ratingMode:[1,"rating-mode"],emailPlaceholder:[1,"email-placeholder"],errorMessage:[1,"error-message"],errorMessage403:[1,"error-message-4-0-3"],errorMessage404:[1,"error-message-4-0-4"],footerText:[1,"footer-text"],messagePlaceholder:[1,"message-placeholder"],modalTitle:[1,"modal-title"],modalTitleError:[1,"modal-title-error"],modalTitleSuccess:[1,"modal-title-success"],privacyPolicyText:[1,"privacy-policy-text"],ratingPlaceholder:[1,"rating-placeholder"],ratingStarsPlaceholder:[1,"rating-stars-placeholder"],sendButtonText:[1,"send-button-text"],successMessage:[1,"success-message"],screenshotAttachedText:[1,"screenshot-attached-text"],screenshotButtonText:[1,"screenshot-button-text"],screenshotTakingText:[1,"screenshot-taking-text"],screenshotEditTextButtonText:[1,"screenshot-edit-text-button-text"],screenshotEditorTitle:[1,"screenshot-editor-title"],screenshotEditorCancelText:[1,"screenshot-editor-cancel-text"],screenshotEditorSaveText:[1,"screenshot-editor-save-text"],screenshotSizeLabelText:[1,"screenshot-size-label-text"],screenshotBorderLabelText:[1,"screenshot-border-label-text"],screenshotEditTextPromptText:[1,"screenshot-edit-text-prompt-text"],screenshotErrorGeneral:[1,"screenshot-error-general"],screenshotErrorPermission:[1,"screenshot-error-permission"],screenshotErrorNotSupported:[1,"screenshot-error-not-supported"],screenshotErrorNotFound:[1,"screenshot-error-not-found"],screenshotErrorCancelled:[1,"screenshot-error-cancelled"],screenshotErrorBrowserNotSupported:[1,"screenshot-error-browser-not-supported"],screenshotErrorUnexpected:[1,"screenshot-error-unexpected"]}],[1,"feedback-modal",{customFont:[4,"custom-font"],emailAddress:[1,"email-address"],hideEmail:[4,"hide-email"],isEmailRequired:[4,"is-email-required"],ratingMode:[1,"rating-mode"],hasSelectedElement:[1540,"has-selected-element"],hidePrivacyPolicy:[4,"hide-privacy-policy"],hideRating:[4,"hide-rating"],hideScreenshotButton:[4,"hide-screenshot-button"],project:[1],showScreenshotMode:[1540,"show-screenshot-mode"],showScreenshotTopBar:[1540,"show-screenshot-top-bar"],showModal:[1540,"show-modal"],rating:[2],metadata:[1],fetchData:[4,"fetch-data"],emailPlaceholder:[1,"email-placeholder"],errorMessage:[1,"error-message"],errorMessage403:[1,"error-message-4-0-3"],errorMessage404:[1,"error-message-4-0-4"],messagePlaceholder:[1,"message-placeholder"],footerText:[1,"footer-text"],modalPosition:[1,"modal-position"],modalTitle:[1,"modal-title"],modalTitleError:[1,"modal-title-error"],modalTitleSuccess:[1,"modal-title-success"],privacyPolicyText:[1,"privacy-policy-text"],ratingPlaceholder:[1,"rating-placeholder"],ratingStarsPlaceholder:[1,"rating-stars-placeholder"],sendButtonText:[1,"send-button-text"],successMessage:[1,"success-message"],screenshotAttachedText:[1,"screenshot-attached-text"],screenshotButtonText:[1,"screenshot-button-text"],screenshotTakingText:[1,"screenshot-taking-text"],screenshotEditTextButtonText:[1,"screenshot-edit-text-button-text"],screenshotEditorTitle:[1,"screenshot-editor-title"],screenshotEditorCancelText:[1,"screenshot-editor-cancel-text"],screenshotEditorSaveText:[1,"screenshot-editor-save-text"],screenshotSizeLabelText:[1,"screenshot-size-label-text"],screenshotBorderLabelText:[1,"screenshot-border-label-text"],screenshotEditTextPromptText:[1,"screenshot-edit-text-prompt-text"],screenshotErrorGeneral:[1,"screenshot-error-general"],screenshotErrorPermission:[1,"screenshot-error-permission"],screenshotErrorNotSupported:[1,"screenshot-error-not-supported"],screenshotErrorNotFound:[1,"screenshot-error-not-found"],screenshotErrorCancelled:[1,"screenshot-error-cancelled"],screenshotErrorBrowserNotSupported:[1,"screenshot-error-browser-not-supported"],screenshotErrorUnexpected:[1,"screenshot-error-unexpected"],sending:[32],formMessage:[32],formEmail:[32],formSuccess:[32],formVerification:[32],formError:[32],formErrorStatus:[32],encodedScreenshot:[32],isPrivacyChecked:[32],whitelabel:[32],selectedRating:[32],overlayVisible:[32],isAnimating:[32],takingScreenshot:[32],showScreenshotError:[32],screenshotError:[32],showCanvasEditor:[32],autoStartCapture:[32],openModal:[64]}],[1,"canvas-editor",{canvasEditorTitle:[1,"canvas-editor-title"],canvasEditorCancelText:[1,"canvas-editor-cancel-text"],canvasEditorSaveText:[1,"canvas-editor-save-text"],screenshotTakingText:[1,"screenshot-taking-text"],screenshotAttachedText:[1,"screenshot-attached-text"],screenshotButtonText:[1,"screenshot-button-text"],autoStartScreenshot:[4,"auto-start-screenshot"],existingScreenshot:[1,"existing-screenshot"],editTextButtonText:[1,"edit-text-button-text"],sizeLabelText:[1,"size-label-text"],borderLabelText:[1,"border-label-text"],editTextPromptText:[1,"edit-text-prompt-text"],screenshotErrorGeneral:[1,"screenshot-error-general"],screenshotErrorPermission:[1,"screenshot-error-permission"],screenshotErrorNotSupported:[1,"screenshot-error-not-supported"],screenshotErrorNotFound:[1,"screenshot-error-not-found"],screenshotErrorCancelled:[1,"screenshot-error-cancelled"],screenshotErrorBrowserNotSupported:[1,"screenshot-error-browser-not-supported"],screenshotErrorUnexpected:[1,"screenshot-error-unexpected"],takingScreenshot:[32],showCanvasEditor:[32],canvasDrawingTool:[32],canvasDrawingColor:[32],canvasLineWidth:[32],canvasTextSize:[32],isDrawing:[32],annotations:[32],currentAnnotation:[32],isDragging:[32],draggedAnnotation:[32],dragStartPos:[32],showColorPicker:[32],editingColorIndex:[32],selectedAnnotation:[32],isResizing:[32],resizingAnnotation:[32],resizeStartSize:[32],resizeStartDimensions:[32],hoveredAnnotation:[32],resizeHandle:[32],defaultColors:[32]}]]]],e)));
1
+ import{p as e,b as t}from"./p-af2a1f7f.js";export{s as setNonce}from"./p-af2a1f7f.js";(()=>{const t=import.meta.url,r={};return""!==t&&(r.resourcesUrl=new URL(".",t).href),e(r)})().then((e=>t([["p-92ebcaa3",[[1,"feedback-button",{buttonPosition:[1,"button-position"],buttonStyle:[1,"button-style"],hideIcon:[4,"hide-icon"],hideMobile:[4,"hide-mobile"],sessionId:[1537,"session-id"],metadata:[1],submit:[4],customFont:[4,"custom-font"],emailAddress:[1,"email-address"],isEmailRequired:[4,"is-email-required"],fetchData:[4,"fetch-data"],hideEmail:[4,"hide-email"],hidePrivacyPolicy:[4,"hide-privacy-policy"],hideRating:[4,"hide-rating"],hideScreenshotButton:[4,"hide-screenshot-button"],modalPosition:[1,"modal-position"],project:[1],rating:[2],ratingMode:[1,"rating-mode"],emailPlaceholder:[1,"email-placeholder"],errorMessage:[1,"error-message"],errorMessage403:[1,"error-message-4-0-3"],errorMessage404:[1,"error-message-4-0-4"],footerText:[1,"footer-text"],messagePlaceholder:[1,"message-placeholder"],modalTitle:[1,"modal-title"],modalTitleError:[1,"modal-title-error"],modalTitleSuccess:[1,"modal-title-success"],privacyPolicyText:[1,"privacy-policy-text"],ratingPlaceholder:[1,"rating-placeholder"],ratingStarsPlaceholder:[1,"rating-stars-placeholder"],sendButtonText:[1,"send-button-text"],successMessage:[1,"success-message"],screenshotAttachedText:[1,"screenshot-attached-text"],screenshotButtonText:[1,"screenshot-button-text"],screenshotTakingText:[1,"screenshot-taking-text"],screenshotEditTextButtonText:[1,"screenshot-edit-text-button-text"],screenshotEditorTitle:[1,"screenshot-editor-title"],screenshotEditorCancelText:[1,"screenshot-editor-cancel-text"],screenshotEditorSaveText:[1,"screenshot-editor-save-text"],screenshotSizeLabelText:[1,"screenshot-size-label-text"],screenshotBorderLabelText:[1,"screenshot-border-label-text"],screenshotEditTextPromptText:[1,"screenshot-edit-text-prompt-text"],screenshotErrorGeneral:[1,"screenshot-error-general"],screenshotErrorPermission:[1,"screenshot-error-permission"],screenshotErrorNotSupported:[1,"screenshot-error-not-supported"],screenshotErrorNotFound:[1,"screenshot-error-not-found"],screenshotErrorCancelled:[1,"screenshot-error-cancelled"],screenshotErrorBrowserNotSupported:[1,"screenshot-error-browser-not-supported"],screenshotErrorUnexpected:[1,"screenshot-error-unexpected"]}],[1,"feedback-modal",{customFont:[4,"custom-font"],emailAddress:[1,"email-address"],hideEmail:[4,"hide-email"],isEmailRequired:[4,"is-email-required"],ratingMode:[1,"rating-mode"],hasSelectedElement:[1540,"has-selected-element"],hidePrivacyPolicy:[4,"hide-privacy-policy"],hideRating:[4,"hide-rating"],hideScreenshotButton:[4,"hide-screenshot-button"],project:[1],showScreenshotMode:[1540,"show-screenshot-mode"],showScreenshotTopBar:[1540,"show-screenshot-top-bar"],showModal:[1540,"show-modal"],rating:[2],metadata:[1],fetchData:[4,"fetch-data"],emailPlaceholder:[1,"email-placeholder"],errorMessage:[1,"error-message"],errorMessage403:[1,"error-message-4-0-3"],errorMessage404:[1,"error-message-4-0-4"],messagePlaceholder:[1,"message-placeholder"],footerText:[1,"footer-text"],modalPosition:[1,"modal-position"],modalTitle:[1,"modal-title"],modalTitleError:[1,"modal-title-error"],modalTitleSuccess:[1,"modal-title-success"],privacyPolicyText:[1,"privacy-policy-text"],ratingPlaceholder:[1,"rating-placeholder"],ratingStarsPlaceholder:[1,"rating-stars-placeholder"],sendButtonText:[1,"send-button-text"],successMessage:[1,"success-message"],screenshotAttachedText:[1,"screenshot-attached-text"],screenshotButtonText:[1,"screenshot-button-text"],screenshotTakingText:[1,"screenshot-taking-text"],screenshotEditTextButtonText:[1,"screenshot-edit-text-button-text"],screenshotEditorTitle:[1,"screenshot-editor-title"],screenshotEditorCancelText:[1,"screenshot-editor-cancel-text"],screenshotEditorSaveText:[1,"screenshot-editor-save-text"],screenshotSizeLabelText:[1,"screenshot-size-label-text"],screenshotBorderLabelText:[1,"screenshot-border-label-text"],screenshotEditTextPromptText:[1,"screenshot-edit-text-prompt-text"],screenshotErrorGeneral:[1,"screenshot-error-general"],screenshotErrorPermission:[1,"screenshot-error-permission"],screenshotErrorNotSupported:[1,"screenshot-error-not-supported"],screenshotErrorNotFound:[1,"screenshot-error-not-found"],screenshotErrorCancelled:[1,"screenshot-error-cancelled"],screenshotErrorBrowserNotSupported:[1,"screenshot-error-browser-not-supported"],screenshotErrorUnexpected:[1,"screenshot-error-unexpected"],sending:[32],formMessage:[32],formEmail:[32],formSuccess:[32],formVerification:[32],formError:[32],formErrorStatus:[32],encodedScreenshot:[32],isPrivacyChecked:[32],whitelabel:[32],selectedRating:[32],overlayVisible:[32],isAnimating:[32],takingScreenshot:[32],showScreenshotError:[32],screenshotError:[32],showCanvasEditor:[32],autoStartCapture:[32],openModal:[64]}],[1,"canvas-editor",{canvasEditorTitle:[1,"canvas-editor-title"],canvasEditorCancelText:[1,"canvas-editor-cancel-text"],canvasEditorSaveText:[1,"canvas-editor-save-text"],screenshotTakingText:[1,"screenshot-taking-text"],screenshotAttachedText:[1,"screenshot-attached-text"],screenshotButtonText:[1,"screenshot-button-text"],autoStartScreenshot:[4,"auto-start-screenshot"],existingScreenshot:[1,"existing-screenshot"],editTextButtonText:[1,"edit-text-button-text"],sizeLabelText:[1,"size-label-text"],borderLabelText:[1,"border-label-text"],editTextPromptText:[1,"edit-text-prompt-text"],screenshotErrorGeneral:[1,"screenshot-error-general"],screenshotErrorPermission:[1,"screenshot-error-permission"],screenshotErrorNotSupported:[1,"screenshot-error-not-supported"],screenshotErrorNotFound:[1,"screenshot-error-not-found"],screenshotErrorCancelled:[1,"screenshot-error-cancelled"],screenshotErrorBrowserNotSupported:[1,"screenshot-error-browser-not-supported"],screenshotErrorUnexpected:[1,"screenshot-error-unexpected"],takingScreenshot:[32],showCanvasEditor:[32],canvasDrawingTool:[32],canvasDrawingColor:[32],canvasLineWidth:[32],canvasTextSize:[32],isDrawing:[32],annotations:[32],currentAnnotation:[32],isDragging:[32],draggedAnnotation:[32],dragStartPos:[32],showColorPicker:[32],editingColorIndex:[32],selectedAnnotation:[32],isResizing:[32],resizingAnnotation:[32],resizeStartSize:[32],resizeStartDimensions:[32],hoveredAnnotation:[32],resizeHandle:[32],defaultColors:[32]}]]]],e)));
package/dist/types/components/canvas-editor/canvas-editor.d.ts CHANGED
@@ -58,6 +58,9 @@ export declare class CanvasEditor {
58
58
  error: string;
59
59
  }>;
60
60
  componentDidLoad(): void;
61
+ disconnectedCallback(): void;
62
+ handleWindowResize: () => void;
63
+ private resizeTimeout;
61
64
  openScreenShot: () => Promise<void>;
62
65
  hideAllFeedbackElements: () => void;
63
66
  showAllFeedbackElements: () => void;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "pushfeedback",
3
3
  "author": "TechDocs Studio <info@techdocs.studio>",
4
4
  "homepage": "https://pushfeedback.com/",
5
- "version": "0.1.74",
5
+ "version": "0.1.76",
6
6
  "description": "Feedback widget for websites.",
7
7
  "main": "dist/index.cjs.js",
8
8
  "module": "dist/index.js",
package/dist/pushfeedback/p-03fe0ff1.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as t,c as e,h as o,H as i,g as s}from"./p-af2a1f7f.js";const a=class{constructor(o){t(this,o),this.screenshotReady=e(this,"screenshotReady",7),this.screenshotCancelled=e(this,"screenshotCancelled",7),this.screenshotFailed=e(this,"screenshotFailed",7),this.openScreenShot=async()=>{this.takingScreenshot=!0,this.annotations=[],this.currentAnnotation=null,this.isDrawing=!1,this.hoveredAnnotation=null,this.hideAllFeedbackElements();try{await new Promise((t=>setTimeout(t,100)));const t=await this.captureViewportScreenshot();this.originalImageData=t,this.takingScreenshot=!1,this.showCanvasEditor=!0,this.showAllFeedbackElements(),setTimeout((()=>{this.initializeCanvas()}),100)}catch(t){console.error("Failed to capture screenshot:",t),this.takingScreenshot=!1,this.showAllFeedbackElements(),this.handleScreenshotError(t)}},this.hideAllFeedbackElements=()=>{document.querySelectorAll("feedback-button, feedback-modal").forEach((t=>{t.style.visibility="hidden"}))},this.showAllFeedbackElements=()=>{document.querySelectorAll("feedback-button, feedback-modal").forEach((t=>{t.style.visibility="visible"}))},this.handleScreenshotError=t=>{let e=this.screenshotErrorGeneral;"NotAllowedError"===t.name?e+=" "+this.screenshotErrorPermission:"NotSupportedError"===t.name?e+=" "+this.screenshotErrorNotSupported:"NotFoundError"===t.name?e+=" "+this.screenshotErrorNotFound:"AbortError"===t.name?e+=" "+this.screenshotErrorCancelled:t.message&&t.message.includes("not supported")?e+=" "+this.screenshotErrorBrowserNotSupported:e+=" "+this.screenshotErrorUnexpected,this.screenshotFailed.emit({error:e})},this.closeCanvasEditor=()=>{this.showCanvasEditor=!1,this.screenshotCancelled.emit()},this.saveAnnotations=()=>{if(this.canvasRef){const t=this.canvasRef.toDataURL("image/png");this.screenshotReady.emit({screenshot:t})}this.showCanvasEditor=!1},this.initializeCanvas=()=>{if(!this.canvasRef||!this.originalImageData)return;this.canvasContext=this.canvasRef.getContext("2d");const t=new Image;t.onload=()=>{this.canvasRef.width=t.width,this.canvasRef.height=t.height;const e=Math.min((this.canvasRef.parentElement.clientWidth-32)/t.width,(this.canvasRef.parentElement.clientHeight-32)/t.height,1),o=t.height*e;this.canvasRef.style.width=t.width*e+"px",this.canvasRef.style.height=`${o}px`,this.canvasContext.drawImage(t,0,0),this.redrawAnnotations()},t.src=this.originalImageData},this.redrawAnnotations=()=>{if(!this.canvasContext)return;const t=new Image;t.onload=()=>{this.canvasContext.clearRect(0,0,this.canvasRef.width,this.canvasRef.height),this.canvasContext.drawImage(t,0,0),this.annotations.forEach((t=>{this.drawAnnotation(t)}))},t.src=this.originalImageData},this.drawAnnotation=t=>{if(this.canvasContext)switch(this.canvasContext.strokeStyle=t.color,this.canvasContext.lineWidth=t.lineWidth,this.canvasContext.lineCap="round",this.canvasContext.lineJoin="round",t.type){case"rectangle":this.canvasContext.strokeRect(t.startX,t.startY,t.width,t.height),this.selectedAnnotation===t&&this.drawSelectionIndicator(t),this.hoveredAnnotation===t&&this.drawRectangleResizeHandles(t);break;case"line":this.canvasContext.beginPath(),this.canvasContext.moveTo(t.startX,t.startY),this.canvasContext.lineTo(t.endX,t.endY),this.canvasContext.stroke(),this.selectedAnnotation===t&&this.drawSelectionIndicator(t),this.hoveredAnnotation===t&&this.drawLineResizeHandles(t);break;case"arrow":this.drawArrow(t.startX,t.startY,t.endX,t.endY),this.selectedAnnotation===t&&this.drawSelectionIndicator(t),this.hoveredAnnotation===t&&this.drawLineResizeHandles(t);break;case"text":const e=t.fontSize||24;this.canvasContext.fillStyle=t.color,this.canvasContext.font=`${e}px Arial`,this.canvasContext.fillText(t.text,t.x,t.y),this.selectedAnnotation===t&&this.drawTextSelectionIndicator(t)}},this.drawSelectionIndicator=t=>{if(!this.canvasContext)return;const e=this.canvasContext.strokeStyle,o=this.canvasContext.lineWidth;switch(this.canvasContext.strokeStyle="#0070F4",this.canvasContext.lineWidth=2,this.canvasContext.setLineDash([5,5]),t.type){case"rectangle":this.canvasContext.strokeRect(t.startX-2,t.startY-2,t.width+4,t.height+4);break;case"line":case"arrow":this.canvasContext.beginPath(),this.canvasContext.moveTo(t.startX,t.startY),this.canvasContext.lineTo(t.endX,t.endY),this.canvasContext.stroke()}this.canvasContext.setLineDash([]),this.canvasContext.strokeStyle=e,this.canvasContext.lineWidth=o},this.drawTextSelectionIndicator=t=>{if(!this.canvasContext)return;const e=t.fontSize||24,o=this.getTextWidth(t.text,e),i=this.canvasContext.strokeStyle,s=this.canvasContext.lineWidth;this.canvasContext.strokeStyle="#0070F4",this.canvasContext.lineWidth=2,this.canvasContext.setLineDash([3,3]),this.canvasContext.strokeRect(t.x-4,t.y-e-4,o+8,e+8),this.canvasContext.setLineDash([]),this.canvasContext.strokeStyle=i,this.canvasContext.lineWidth=s},this.drawArrow=(t,e,o,i)=>{const s=Math.atan2(i-e,o-t);this.canvasContext.beginPath(),this.canvasContext.moveTo(t,e),this.canvasContext.lineTo(o,i),this.canvasContext.stroke(),this.canvasContext.beginPath(),this.canvasContext.moveTo(o,i),this.canvasContext.lineTo(o-15*Math.cos(s-Math.PI/6),i-15*Math.sin(s-Math.PI/6)),this.canvasContext.moveTo(o,i),this.canvasContext.lineTo(o-15*Math.cos(s+Math.PI/6),i-15*Math.sin(s+Math.PI/6)),this.canvasContext.stroke()},this.undoLastAnnotation=()=>{this.annotations=this.annotations.slice(0,-1),this.redrawAnnotations()},this.handleColorSlotClick=t=>{this.editingColorIndex===t?(this.canvasDrawingColor=this.defaultColors[t],this.showColorPicker=!1,this.editingColorIndex=-1):(this.editingColorIndex=t,this.showColorPicker=!0,this.canvasDrawingColor=this.defaultColors[t])},this.updateColorSlot=t=>{this.editingColorIndex>=0&&this.editingColorIndex<this.defaultColors.length&&(this.defaultColors[this.editingColorIndex]=t,this.canvasDrawingColor=t,this.showColorPicker=!1,this.editingColorIndex=-1,this.defaultColors=[...this.defaultColors])},this.handleColorPickerInput=t=>{t.stopPropagation();const e=t.target.value;this.editingColorIndex>=0&&this.editingColorIndex<this.defaultColors.length&&(this.defaultColors[this.editingColorIndex]=e,this.canvasDrawingColor=e,this.defaultColors=[...this.defaultColors])},this.handleColorPickerClick=t=>{t.stopPropagation()},this.closeColorPicker=()=>{this.showColorPicker=!1,this.editingColorIndex=-1},this.getTextWidth=(t,e)=>{if(!this.canvasContext)return t.length*e*.6;const o=this.canvasContext.font;this.canvasContext.font=`${e}px Arial`;const i=this.canvasContext.measureText(t).width;return this.canvasContext.font=o,i},this.isPointInResizeHandle=(t,e,o)=>{switch(o.type){case"rectangle":const i=o.startX+o.width,s=o.startY+o.height;return t>=i-4&&t<=i+4&&e>=s-4&&e<=s+4;case"line":case"arrow":const a=[{x:o.startX,y:o.startY,point:"start"},{x:o.endX,y:o.endY,point:"end"}];for(const o of a)if(t>=o.x-4&&t<=o.x+4&&e>=o.y-4&&e<=o.y+4)return o.point;return!1;default:return!1}},this.drawRectangleResizeHandles=t=>{if(!this.canvasContext||"rectangle"!==t.type)return;const e=t.startX+t.width,o=t.startY+t.height;this.canvasContext.fillStyle="#0070F4",this.canvasContext.strokeStyle="#ffffff",this.canvasContext.lineWidth=2,this.canvasContext.fillRect(e-4,o-4,8,8),this.canvasContext.strokeRect(e-4,o-4,8,8)},this.drawLineResizeHandles=t=>{if(!this.canvasContext||"line"!==t.type&&"arrow"!==t.type)return;const e=[{x:t.startX,y:t.startY},{x:t.endX,y:t.endY}];this.canvasContext.fillStyle="#0070F4",this.canvasContext.strokeStyle="#ffffff",this.canvasContext.lineWidth=2,e.forEach((t=>{this.canvasContext.fillRect(t.x-4,t.y-4,8,8),this.canvasContext.strokeRect(t.x-4,t.y-4,8,8)}))},this.startResize=(t,e,o)=>{this.isResizing=!0,this.resizingAnnotation=t,this.resizeHandle=e,this.dragStartPos=o,"rectangle"===t.type&&(this.resizeStartDimensions={width:t.width,height:t.height})},this.handleResize=t=>{if(!this.resizingAnnotation||!this.dragStartPos)return;const e=this.resizingAnnotation,o=this.annotations.findIndex((t=>t===e));if(-1===o)return;let i=Object.assign({},e);switch(e.type){case"rectangle":const e=t.y-this.dragStartPos.y;i.width=Math.max(10,this.resizeStartDimensions.width+(t.x-this.dragStartPos.x)),i.height=Math.max(10,this.resizeStartDimensions.height+e);break;case"line":case"arrow":"start"===this.resizeHandle?(i.startX=t.x,i.startY=t.y):"end"===this.resizeHandle&&(i.endX=t.x,i.endY=t.y)}this.annotations[o]=i,this.resizingAnnotation=i,this.redrawAnnotations()},this.startTextEditing=t=>{const e=prompt(this.editTextPromptText,t.text);if(null!==e&&e.trim()){const o=this.annotations.findIndex((e=>e===t));-1!==o&&(this.annotations[o]=Object.assign(Object.assign({},t),{text:e.trim()}),this.selectedAnnotation=this.annotations[o],this.redrawAnnotations())}},this.updateSelectedTextSize=t=>{if(this.selectedAnnotation&&"text"===this.selectedAnnotation.type){const e=this.annotations.findIndex((t=>t===this.selectedAnnotation));-1!==e&&(this.annotations[e]=Object.assign(Object.assign({},this.selectedAnnotation),{fontSize:Math.max(8,Math.min(72,t))}),this.selectedAnnotation=this.annotations[e],this.redrawAnnotations())}},this.updateSelectedBorderWidth=t=>{if(this.selectedAnnotation&&["rectangle","line","arrow"].includes(this.selectedAnnotation.type)){const e=this.annotations.findIndex((t=>t===this.selectedAnnotation));-1!==e&&(this.annotations[e]=Object.assign(Object.assign({},this.selectedAnnotation),{lineWidth:Math.max(1,Math.min(20,t))}),this.selectedAnnotation=this.annotations[e],this.redrawAnnotations())}},this.handleCanvasMouseDown=t=>{if(!this.canvasRef)return;if(window.innerWidth<=768)return;this.showColorPicker&&this.closeColorPicker();const e=this.getCanvasCoordinates(t),o=this.findAnnotationAt(e.x,e.y);if(o){if(this.selectedAnnotation=o.annotation,"text"!==o.annotation.type){const t=this.isPointInResizeHandle(e.x,e.y,o.annotation);if(t)return this.startResize(o.annotation,t,e),void(this.canvasRef.style.cursor="nw-resize")}if("text"===o.annotation.type&&2===t.detail)return void this.startTextEditing(o.annotation);if(!this.isDrawing)return this.isDragging=!0,this.draggedAnnotation=o.annotation,this.dragStartPos=e,void(this.canvasRef.style.cursor="grabbing")}else this.selectedAnnotation=null;if(this.isDrawing=!0,"text"===this.canvasDrawingTool){const t=prompt(this.editTextPromptText);t&&(this.annotations=[...this.annotations,{type:"text",x:e.x,y:e.y,text:t,color:this.canvasDrawingColor,fontSize:this.canvasTextSize}],this.redrawAnnotations()),this.isDrawing=!1}else this.currentAnnotation={type:this.canvasDrawingTool,startX:e.x,startY:e.y,color:this.canvasDrawingColor,lineWidth:this.canvasLineWidth}},this.handleCanvasMouseMove=t=>{if(!this.canvasRef)return;if(window.innerWidth<=768)return;const e=this.getCanvasCoordinates(t);if(this.isResizing&&this.resizingAnnotation)return void this.handleResize(e);if(this.isDragging&&this.draggedAnnotation&&this.dragStartPos){const t=e.x-this.dragStartPos.x,o=e.y-this.dragStartPos.y,i=Object.assign({},this.draggedAnnotation);switch(i.type){case"rectangle":i.startX+=t,i.startY+=o;break;case"line":case"arrow":i.startX+=t,i.startY+=o,i.endX+=t,i.endY+=o;break;case"text":i.x+=t,i.y+=o}const s=this.annotations.findIndex((t=>t===this.draggedAnnotation));return-1!==s&&(this.annotations[s]=i,this.draggedAnnotation=i),this.dragStartPos=e,void this.redrawAnnotations()}if(this.isDrawing&&this.currentAnnotation)return"rectangle"===this.canvasDrawingTool?(this.currentAnnotation.width=e.x-this.currentAnnotation.startX,this.currentAnnotation.height=e.y-this.currentAnnotation.startY):(this.currentAnnotation.endX=e.x,this.currentAnnotation.endY=e.y),this.redrawAnnotations(),void this.drawAnnotation(this.currentAnnotation);const o=this.findAnnotationAt(e.x,e.y);if(o){if("text"!==o.annotation.type&&this.isPointInResizeHandle(e.x,e.y,o.annotation))return this.canvasRef.style.cursor="nw-resize",this.hoveredAnnotation=o.annotation,void this.redrawAnnotations();this.canvasRef.style.cursor="grab",this.hoveredAnnotation!==o.annotation&&(this.hoveredAnnotation=o.annotation,this.redrawAnnotations())}else this.canvasRef.style.cursor="crosshair",this.hoveredAnnotation&&(this.hoveredAnnotation=null,this.redrawAnnotations())},this.handleCanvasMouseUp=()=>{if(!(window.innerWidth<=768))return this.isResizing?(this.isResizing=!1,this.resizingAnnotation=null,this.dragStartPos=null,this.resizeHandle=!1,this.resizeStartDimensions=null,void(this.canvasRef&&(this.canvasRef.style.cursor="crosshair"))):this.isDragging?(this.isDragging=!1,this.draggedAnnotation=null,this.dragStartPos=null,void(this.canvasRef&&(this.canvasRef.style.cursor="crosshair"))):void(this.isDrawing&&this.currentAnnotation&&(this.isDrawing=!1,this.annotations=[...this.annotations,this.currentAnnotation],this.currentAnnotation=null,this.redrawAnnotations()))},this.getCanvasCoordinates=t=>{if(!this.canvasRef)return{x:0,y:0};const e=this.canvasRef.getBoundingClientRect();return{x:this.canvasRef.width/e.width*(t.clientX-e.left),y:this.canvasRef.height/e.height*(t.clientY-e.top)}},this.findAnnotationAt=(t,e)=>{for(let o=this.annotations.length-1;o>=0;o--){const i=this.annotations[o];if(this.isPointInAnnotation(t,e,i))return{annotation:i,index:o}}return null},this.isPointInAnnotation=(t,e,o)=>{const i=10;switch(o.type){case"rectangle":const s=Math.min(o.startX,o.startX+o.width),a=Math.max(o.startX,o.startX+o.width),r=Math.min(o.startY,o.startY+o.height),n=Math.max(o.startY,o.startY+o.height);return t>=s-i&&t<=a+i&&e>=r-i&&e<=n+i;case"line":case"arrow":const d=o.endY-o.startY,c=o.startX-o.endX;return Math.abs(d*t+c*e+(o.endX*o.startY-o.startX*o.endY))/Math.sqrt(d*d+c*c)<=i;case"text":const h=o.fontSize||24,l=this.getTextWidth(o.text,h);return t>=o.x-i&&t<=o.x+l+i&&e>=o.y-h-i&&e<=o.y+i;default:return!1}},this.canvasEditorTitle="Edit screenshot",this.canvasEditorCancelText="Cancel",this.canvasEditorSaveText="Save",this.screenshotTakingText="Taking screenshot...",this.screenshotAttachedText="Screenshot attached",this.screenshotButtonText="Add a screenshot",this.autoStartScreenshot=!1,this.existingScreenshot="",this.editTextButtonText="Edit Text",this.sizeLabelText="Size:",this.borderLabelText="Border:",this.editTextPromptText="Edit text:",this.screenshotErrorGeneral="Failed to capture screenshot.",this.screenshotErrorPermission="Permission denied. Please allow screen sharing to take screenshots.",this.screenshotErrorNotSupported="Screen capture is not supported in this browser.",this.screenshotErrorNotFound="No screen sources available for capture.",this.screenshotErrorCancelled="Screenshot capture was cancelled.",this.screenshotErrorBrowserNotSupported="Your browser does not support screen capture. Please use a browser like Chrome, Firefox, or Safari on desktop.",this.screenshotErrorUnexpected="An unexpected error occurred. Please try again.",this.takingScreenshot=!1,this.showCanvasEditor=!1,this.canvasDrawingTool="rectangle",this.canvasDrawingColor="#ff0000",this.canvasLineWidth=3,this.canvasTextSize=24,this.isDrawing=!1,this.annotations=[],this.currentAnnotation=null,this.isDragging=!1,this.draggedAnnotation=null,this.dragStartPos=null,this.showColorPicker=!1,this.editingColorIndex=-1,this.selectedAnnotation=null,this.isResizing=!1,this.resizingAnnotation=null,this.resizeStartSize=24,this.resizeStartDimensions=null,this.hoveredAnnotation=null,this.resizeHandle=!1,this.defaultColors=["#ff0000","#00ff00","#0000ff","#000000"]}componentDidLoad(){this.autoStartScreenshot?(this.showCanvasEditor=!0,setTimeout((()=>{this.openScreenShot()}),100)):this.existingScreenshot&&(this.originalImageData=this.existingScreenshot,this.showCanvasEditor=!0,setTimeout((()=>{this.initializeCanvas()}),100))}async captureViewportScreenshot(){try{if(!navigator.mediaDevices||!navigator.mediaDevices.getDisplayMedia)throw new Error("Screen Capture API is not supported in this browser");const t=await navigator.mediaDevices.getDisplayMedia({video:{mediaSource:"screen",width:{ideal:window.innerWidth},height:{ideal:window.innerHeight}},audio:!1,preferCurrentTab:!0}),e=document.createElement("video");return e.srcObject=t,e.autoplay=!0,e.muted=!0,new Promise(((o,i)=>{e.onloadedmetadata=()=>{e.play(),setTimeout((()=>{try{const i=document.createElement("canvas");i.width=e.videoWidth,i.height=e.videoHeight,i.getContext("2d").drawImage(e,0,0),t.getTracks().forEach((t=>t.stop()));const s=i.toDataURL("image/png");console.log("Screenshot captured successfully using Screen Capture API"),o(s)}catch(e){t.getTracks().forEach((t=>t.stop())),i(e)}}),100)},e.onerror=()=>{t.getTracks().forEach((t=>t.stop())),i(new Error("Failed to load video for screenshot capture"))}}))}catch(t){throw console.error("Screen capture failed:",t),t}}render(){var t,e,i,s,a,r;return o("div",{class:"canvas-editor-wrapper"},this.showCanvasEditor&&o("div",{class:"canvas-editor-overlay"},o("div",{class:"canvas-editor-modal"},o("div",{class:"canvas-editor-header"},o("div",{class:"canvas-editor-title"},o("h3",null,this.canvasEditorTitle)),o("div",{class:"canvas-editor-toolbar"},o("div",{class:"toolbar-section"},o("div",{class:"tool-group"},o("button",{class:"tool-btn "+("rectangle"===this.canvasDrawingTool?"active":""),onClick:()=>this.canvasDrawingTool="rectangle",title:"Rectangle"},o("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",ry:"2"}))),o("button",{class:"tool-btn "+("line"===this.canvasDrawingTool?"active":""),onClick:()=>this.canvasDrawingTool="line",title:"Line"},o("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("line",{x1:"5",y1:"12",x2:"19",y2:"12"}))),o("button",{class:"tool-btn "+("arrow"===this.canvasDrawingTool?"active":""),onClick:()=>this.canvasDrawingTool="arrow",title:"Arrow"},o("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("line",{x1:"7",y1:"17",x2:"17",y2:"7"}),o("polyline",{points:"7,7 17,7 17,17"}))),o("button",{class:"tool-btn "+("text"===this.canvasDrawingTool?"active":""),onClick:()=>this.canvasDrawingTool="text",title:"Text"},o("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("polyline",{points:"4,7 4,4 20,4 20,7"}),o("line",{x1:"9",y1:"20",x2:"15",y2:"20"}),o("line",{x1:"12",y1:"4",x2:"12",y2:"20"}))),o("div",{class:"toolbar-divider"}),o("button",{class:"tool-btn undo-btn",onClick:this.undoLastAnnotation,disabled:0===this.annotations.length,title:"Undo"},o("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("polyline",{points:"1,4 1,10 7,10"}),o("path",{d:"M3.51,15a9,9,0,0,0,14.85-3.36,9,9,0,0,0-9.19-10.15L1.83,10"}))))),o("div",{class:"toolbar-section"},o("div",{class:"color-palette"},this.defaultColors.map(((t,e)=>o("div",{class:"color-slot-wrapper"},o("button",{class:`color-btn ${this.canvasDrawingColor===t?"active":""} ${this.editingColorIndex===e?"editing":""}`,style:{backgroundColor:t},onClick:()=>this.handleColorSlotClick(e),title:`Color ${e+1} - Click to customize`},this.editingColorIndex===e&&o("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"white","stroke-width":"2"},o("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===e&&this.showColorPicker&&o("div",{class:"color-picker-dropdown"},o("input",{type:"color",value:t,onInput:t=>this.handleColorPickerInput(t),onClick:t=>this.handleColorPickerClick(t)}))))))),(this.selectedAnnotation||this.canvasDrawingTool)&&o("div",{class:"toolbar-section selected-annotation-controls"},("text"===(null===(t=this.selectedAnnotation)||void 0===t?void 0:t.type)||!this.selectedAnnotation&&"text"===this.canvasDrawingTool)&&o("div",{class:"text-controls"},o("div",{class:"font-size-control"},o("label",null,this.sizeLabelText),o("input",{type:"range",min:"8",max:"72",value:(null===(e=this.selectedAnnotation)||void 0===e?void 0:e.fontSize)||this.canvasTextSize,onInput:t=>{const e=parseInt(t.target.value);this.selectedAnnotation?this.updateSelectedTextSize(e):this.canvasTextSize=e},class:"size-slider"}),o("span",{class:"size-value"},(null===(i=this.selectedAnnotation)||void 0===i?void 0:i.fontSize)||this.canvasTextSize,"px")),this.selectedAnnotation&&o("button",{class:"action-btn small",onClick:()=>this.startTextEditing(this.selectedAnnotation)},this.editTextButtonText)),(["rectangle","line","arrow"].includes(null===(s=this.selectedAnnotation)||void 0===s?void 0:s.type)||!this.selectedAnnotation&&["rectangle","line","arrow"].includes(this.canvasDrawingTool))&&o("div",{class:"shape-controls"},o("div",{class:"border-width-control"},o("label",null,this.borderLabelText),o("input",{type:"range",min:"1",max:"20",value:(null===(a=this.selectedAnnotation)||void 0===a?void 0:a.lineWidth)||this.canvasLineWidth,onInput:t=>{const e=parseInt(t.target.value);this.selectedAnnotation?this.updateSelectedBorderWidth(e):this.canvasLineWidth=e},class:"size-slider"}),o("span",{class:"size-value"},(null===(r=this.selectedAnnotation)||void 0===r?void 0:r.lineWidth)||this.canvasLineWidth,"px")))),o("div",{class:"toolbar-section"},o("button",{class:"action-btn secondary",onClick:this.closeCanvasEditor},this.canvasEditorCancelText),o("button",{class:"action-btn primary",onClick:this.saveAnnotations},this.canvasEditorSaveText))),o("div",{class:"canvas-editor-content"},o("canvas",{ref:t=>this.canvasRef=t,class:"annotation-canvas",onMouseDown:this.handleCanvasMouseDown,onMouseMove:this.handleCanvasMouseMove,onMouseUp:this.handleCanvasMouseUp,onMouseLeave:this.handleCanvasMouseUp}))))))}};a.style=':host{display:block}.canvas-editor-wrapper{position:relative}.canvas-editor-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.8);display:flex;align-items:center;justify-content:center;z-index:9999}.canvas-editor-modal{width:95vw;max-width:1400px;max-height:900px;background:var(--feedback-canvas-editor-bg-color, #ffffff);border-radius:8px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2)}.canvas-editor-header{background:var(--feedback-canvas-editor-header-bg-color, #f5f5f5);border-bottom:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);padding:12px 16px;display:flex;flex-direction:column;gap:12px}.canvas-editor-title h3{margin:0;font-size:16px;font-weight:600;color:var(--feedback-canvas-editor-tool-text-color, #333)}.canvas-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.toolbar-section{display:flex;align-items:center;gap:8px}.tool-group{display:flex;align-items:center;gap:4px}.tool-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;transition:all 0.2s ease;padding:0}.tool-btn svg{width:18px;height:18px;color:var(--feedback-canvas-editor-tool-text-color, #333)}.tool-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.tool-btn.active,.tool-btn.active:hover{background:var(--feedback-canvas-editor-tool-bg-active, #0070f4);color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn.active svg{color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn:disabled{opacity:0.4;cursor:not-allowed;color:var(--feedback-canvas-editor-tool-text-color, #333)}.toolbar-divider{width:1px;height:24px;background:var(--feedback-canvas-editor-divider-color, #e0e0e0);margin:0 4px}.undo-btn{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff) !important;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0) !important}.undo-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0) !important}.color-palette{display:flex;align-items:center;gap:6px}.color-slot-wrapper{position:relative;display:flex;align-items:center}.color-btn{width:32px;height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0)}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:var(--feedback-primary-color, #0070f4);box-shadow:0 0 0 2px rgba(0, 112, 244, 0.2)}.color-btn.editing{border-color:var(--feedback-primary-color, #0070f4)}.color-picker-dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1)}.color-picker-dropdown input[type="color"]{width:40px;height:40px;border:none;border-radius:4px;cursor:pointer}.size-control{display:flex;align-items:center;gap:8px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:6px 12px}.size-slider{width:80px;height:20px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.size-slider::-webkit-slider-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;cursor:pointer}.size-slider::-moz-range-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none}.size-slider::-moz-range-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-slider::-ms-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none;color:transparent}.size-slider::-ms-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-value{font-weight:500;color:var(--feedback-canvas-editor-tool-text-color, #333);font-size:12px;min-width:30px}.selected-annotation-controls{border-left:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:12px;margin-left:8px;min-width:200px}.text-controls{display:flex;flex-direction:row;align-items:center;gap:12px}.font-size-control,.border-width-control{display:flex;align-items:center;gap:6px}.font-size-control label,.border-width-control label{font-size:12px;color:var(--feedback-canvas-editor-tool-text-color, #333);font-weight:500;min-width:35px}.action-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.2s ease;min-width:65px;justify-content:center;height:36px}.action-btn.secondary{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);color:var(--feedback-canvas-editor-tool-text-color, #333);border-color:var(--feedback-canvas-editor-border-color, #e0e0e0)}.action-btn.secondary:hover{background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.action-btn.primary{background:var(--feedback-primary-color, #0070f4);color:#ffffff;border-color:var(--feedback-primary-color, #0070f4)}.action-btn.primary:hover{background:#0056cc;border-color:#0056cc}.action-btn.small{height:28px;padding:4px 8px;font-size:12px;min-width:65px}.shape-controls{display:flex;flex-direction:column;gap:8px}.canvas-editor-content{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--feedback-canvas-editor-content-bg, #f5f5f5);overflow:hidden;min-height:0;min-width:0}.annotation-canvas{max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;border-radius:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);background:#ffffff;transition:box-shadow 0.3s ease;object-fit:contain;display:block}.annotation-canvas:hover{box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20)}@media screen and (max-width: 768px){.canvas-editor-modal{width:100vw;height:100vh;border-radius:0}.canvas-editor-toolbar{flex-direction:column;align-items:stretch;gap:8px}.toolbar-section{justify-content:center}.selected-annotation-controls{border-left:none;border-top:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:0;padding-top:8px;margin-left:0;margin-top:8px;min-width:auto}}';const r=class{constructor(o){t(this,o),this.feedbackSent=e(this,"feedbackSent",7),this.feedbackError=e(this,"feedbackError",7),this.buttonPosition="default",this.buttonStyle="default",this.hideIcon=!1,this.hideMobile=!1,this.sessionId="",this.metadata="",this.submit=!1,this.customFont=!1,this.emailAddress="",this.isEmailRequired=!1,this.fetchData=!0,this.hideEmail=!1,this.hidePrivacyPolicy=!0,this.hideRating=!1,this.hideScreenshotButton=!1,this.modalPosition="center",this.project="",this.rating=void 0,this.ratingMode="thumbs",this.emailPlaceholder="Email address (optional)",this.errorMessage="Please try again later.",this.errorMessage403="The request URL does not match the one defined in PushFeedback for this project.",this.errorMessage404="We could not find the provided project id in PushFeedback.",this.footerText="",this.messagePlaceholder="Comments",this.modalTitle="Share your feedback",this.modalTitleError="Oops!",this.modalTitleSuccess="Thanks for your feedback!",this.privacyPolicyText="I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.",this.ratingPlaceholder="Was this page helpful?",this.ratingStarsPlaceholder="How would you rate this page?",this.sendButtonText="Send",this.successMessage="",this.screenshotAttachedText="Screenshot attached",this.screenshotButtonText="Add a screenshot",this.screenshotTakingText="Taking screenshot...",this.screenshotEditTextButtonText="Edit text",this.screenshotEditorTitle="Edit screenshot",this.screenshotEditorCancelText="Cancel",this.screenshotEditorSaveText="Save",this.screenshotSizeLabelText="Size:",this.screenshotBorderLabelText="Border:",this.screenshotEditTextPromptText="Edit text:",this.screenshotErrorGeneral="Failed to capture screenshot.",this.screenshotErrorPermission="Permission denied. Please allow screen sharing to take screenshots.",this.screenshotErrorNotSupported="Screen capture is not supported in this browser.",this.screenshotErrorNotFound="No screen sources available for capture.",this.screenshotErrorCancelled="Screenshot capture was cancelled.",this.screenshotErrorBrowserNotSupported="Your browser does not support screen capture. Please use a browser like Chrome, Firefox, or Safari on desktop.",this.screenshotErrorUnexpected="An unexpected error occurred. Please try again."}componentWillLoad(){if(this.sessionId)localStorage.setItem("pushfeedback_sessionid",this.sessionId);else{let t=localStorage.getItem("pushfeedback_sessionid");t||(t=this.generateRandomSessionId(),localStorage.setItem("pushfeedback_sessionid",t),this.sessionId=t)}}componentDidLoad(){if("center-right"===this.buttonPosition){const t=this.el.shadowRoot.querySelector(".feedback-button-content");let e=0;this.isSafariBrowser()&&(e=5),t.style.right=(t.offsetWidth+e)/2*-1+"px"}this.customFont||this.loadInterFont()}connectedCallback(){this.feedbackModal=document.createElement("feedback-modal"),["customFont","emailAddress","fetchData","hideEmail","hidePrivacyPolicy","hideRating","hideScreenshotButton","isEmailRequired","modalPosition","project","rating","ratingMode","screenshotEditorTitle","screenshotEditorCancelText","screenshotEditorSaveText","screenshotEditTextButtonText","screenshotSizeLabelText","screenshotBorderLabelText","screenshotEditTextPromptText","screenshotErrorGeneral","screenshotErrorPermission","screenshotErrorNotSupported","screenshotErrorNotFound","screenshotErrorCancelled","screenshotErrorBrowserNotSupported","screenshotErrorUnexpected","emailPlaceholder","errorMessage","errorMessage403","errorMessage404","footerText","messagePlaceholder","metadata","modalTitle","modalTitleError","modalTitleSuccess","privacyPolicyText","ratingPlaceholder","ratingStarsPlaceholder","screenshotAttachedText","screenshotButtonText","screenshotTakingText","sendButtonText","successMessage"].forEach((t=>{this.feedbackModal[t]=this[t]})),document.body.appendChild(this.feedbackModal)}disconnectedCallback(){document.body.removeChild(this.feedbackModal)}generateRandomSessionId(t=16){return Math.random().toString(36).substr(2,t)}isSafariBrowser(){return/safari/i.test(navigator.userAgent)&&!/chrome/i.test(navigator.userAgent)}loadInterFont(){const t=document.createElement("link");t.href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",t.rel="stylesheet",document.head.appendChild(t)}showModal(){this.submit?this.submitRatingFeedback():this.feedbackModal.openModal()}async submitRatingFeedback(){try{const t={url:window.location.href,project:this.project,rating:this.rating||-1,ratingMode:this.ratingMode,message:"",metadata:this.metadata,session:localStorage.getItem("pushfeedback_sessionid")||""},e=await fetch("https://app.pushfeedback.com/api/feedback/",{method:"POST",body:JSON.stringify(t),headers:{"Content-Type":"application/json"}});if(201===e.status){const o=Object.assign(Object.assign({},t),{id:await e.json()});this.feedbackSent.emit({feedback:o})}else if(202===e.status){const t={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 e.json()};this.feedbackSent.emit({feedback:t})}else{const t=await e.text();this.feedbackError.emit({error:{status:e.status,message:t}})}}catch(t){this.feedbackError.emit({error:{status:500,message:t}})}}render(){return o(i,null,o("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&&"default"!=this.buttonStyle&&o("span",{class:"feedback-button-content-icon"},o("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"},o("path",{d:"M12 20h9"}),o("path",{d:"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"}))),o("slot",null)))}get el(){return s(this)}};r.style=".feedback-button-content{cursor:pointer;max-width:fit-content;z-index:var(--feedback-button-z-index);font-family:var(--feedback-font-family)}.feedback-button-content--custom-font{font-family:inherit}.feedback-button-content--light{align-items:center;background-color:var(--feedback-button-light-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-light-text-color);display:flex;font-size:var(--feedback-button-text-font-size);font-weight:var(--feedback-button-text-font-weight);padding:8px 15px}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-button-dark-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-dark-text-color);display:flex;font-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.icon-edit{stroke:var(--feedback-button-light-icon-color)}.feedback-button-content--dark .icon-edit{stroke:var(--feedback-button-dark-icon-color)}.feedback-button-content--bottom-right{bottom:10px;position:fixed;right:10px}.feedback-button-content--center-right{position:fixed;transform:rotate(-90deg) translateY(-50%);top:50%}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-left-radius:0px;border-bottom-right-radius:0px}.feedback-button-content-icon{height:16px;margin-right:5px;width:16px}.feedback-button-content--center-right .feedback-button-content-icon{rotate:90deg}@media screen and (max-width: 767px){.feedback-button-content--hide-mobile{display:none}}";const n=class{constructor(o){t(this,o),this.feedbackSent=e(this,"feedbackSent",7),this.feedbackError=e(this,"feedbackError",7),this.onScrollDebounced=()=>{clearTimeout(this.scrollTimeout),this.scrollTimeout=setTimeout((()=>{document.documentElement.classList.remove("feedback-modal-screenshot-closing"),document.documentElement.style.top="",window.removeEventListener("scroll",this.onScrollDebounced)}),200)},this.handleSubmit=async t=>{if(t.preventDefault(),!this.isEmailRequired||this.formEmail){this.resetOverflow(),this.showScreenshotMode=!1,this.showScreenshotTopBar=!1,this.showModal=!1,this.sending=!0;try{const t={url:window.location.href,message:this.formMessage,email:this.formEmail,project:this.project,screenshot:this.encodedScreenshot,rating:this.selectedRating,ratingMode:this.ratingMode,metadata:this.metadata,verification:this.formVerification,session:localStorage.getItem("pushfeedback_sessionid")||""},e=await fetch("https://app.pushfeedback.com/api/feedback/",{method:"POST",body:JSON.stringify(t),headers:{"Content-Type":"application/json"}});if(201===e.status){const o=Object.assign(Object.assign({},t),{id:await e.json()});this.feedbackSent.emit({feedback:o}),this.formSuccess=!0,this.formError=!1}else if(202===e.status){const t={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 e.json()};this.feedbackSent.emit({feedback:t}),this.formSuccess=!0,this.formError=!1}else{const t=await e.text();this.feedbackError.emit({error:{status:e.status,message:t}}),this.formSuccess=!1,this.formError=!0,this.formErrorStatus=e.status}}catch(t){this.feedbackError.emit({error:{status:500,message:t}}),this.formSuccess=!1,this.formError=!0,this.formErrorStatus=500}finally{this.sending=!1,this.showModal=!0}}},this.close=()=>{this.isAnimating=!1,setTimeout((()=>{this.sending=!1,this.showModal=!1,this.showScreenshotMode=!1,this.showScreenshotTopBar=!1,this.hasSelectedElement=!1,this.encodedScreenshot=null,document.querySelectorAll(".feedback-modal-element-selected").forEach((t=>{t.classList.remove("feedback-modal-element-selected")})),this.formSuccess=!1,this.formError=!1,this.formErrorStatus=500,this.formMessage="",this.formEmail="",this.resetOverflow()}),200)},this.handleScreenshotReady=t=>{this.encodedScreenshot=t.detail.screenshot,this.showModal=!0,this.takingScreenshot=!1,this.showCanvasEditor=!1,this.autoStartCapture=!1},this.handleScreenshotCancelled=()=>{this.showModal=!0,this.takingScreenshot=!1,this.showCanvasEditor=!1,this.autoStartCapture=!1},this.handleScreenshotError=t=>{console.error("Screenshot error:",t.detail.error),this.screenshotError=t.detail.error,this.showScreenshotError=!0,this.showModal=!0,this.takingScreenshot=!1,this.showCanvasEditor=!1,this.autoStartCapture=!1,setTimeout((()=>{this.showScreenshotError=!1}),8e3)},this.openScreenShot=()=>{this.showModal=!1,this.takingScreenshot=!0,this.autoStartCapture=!0,this.showCanvasEditor=!0},this.openCanvasEditor=t=>{t&&t.stopPropagation(),this.showModal=!1,this.autoStartCapture=!1,this.showCanvasEditor=!0},this.sending=!1,this.formMessage="",this.formEmail="",this.formSuccess=!1,this.formVerification="",this.formError=!1,this.formErrorStatus=500,this.encodedScreenshot=void 0,this.isPrivacyChecked=!1,this.whitelabel=!1,this.selectedRating=-1,this.overlayVisible=!1,this.isAnimating=!1,this.takingScreenshot=!1,this.showScreenshotError=!1,this.screenshotError="",this.showCanvasEditor=!1,this.autoStartCapture=!1,this.customFont=!1,this.emailAddress="",this.hideEmail=!1,this.isEmailRequired=!1,this.ratingMode="thumbs",this.hasSelectedElement=!1,this.hidePrivacyPolicy=!0,this.hideRating=!1,this.hideScreenshotButton=!1,this.project="",this.showScreenshotMode=!1,this.showScreenshotTopBar=!1,this.showModal=!1,this.rating=void 0,this.metadata=void 0,this.fetchData=!0,this.emailPlaceholder="Email address (optional)",this.errorMessage="Please try again later.",this.errorMessage403="The request URL does not match the one defined in PushFeedback for this project.",this.errorMessage404="We could not find the provided project ID in PushFeedback.",this.messagePlaceholder="Comments",this.footerText="",this.modalPosition="center",this.modalTitle="Share your feedback",this.modalTitleError="Oops!",this.modalTitleSuccess="Thanks for your feedback!",this.privacyPolicyText="I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.",this.ratingPlaceholder="Was this page helpful?",this.ratingStarsPlaceholder="How would you rate this page?",this.sendButtonText="Send",this.successMessage="",this.screenshotAttachedText="Screenshot attached",this.screenshotButtonText="Add a screenshot",this.screenshotTakingText="Taking screenshot...",this.screenshotEditTextButtonText="Edit text",this.screenshotEditorTitle="Edit screenshot",this.screenshotEditorCancelText="Cancel",this.screenshotEditorSaveText="Save",this.screenshotSizeLabelText="Size:",this.screenshotBorderLabelText="Border:",this.screenshotEditTextPromptText="Edit text:",this.screenshotErrorGeneral="Failed to capture screenshot.",this.screenshotErrorPermission="Permission denied. Please allow screen sharing to take screenshots.",this.screenshotErrorNotSupported="Screen capture is not supported in this browser.",this.screenshotErrorNotFound="No screen sources available for capture.",this.screenshotErrorCancelled="Screenshot capture was cancelled.",this.screenshotErrorBrowserNotSupported="Your browser does not support screen capture. Please use a browser like Chrome, Firefox, or Safari on desktop.",this.screenshotErrorUnexpected="An unexpected error occurred. Please try again."}componentWillLoad(){this.fetchData&&this.fetchProjectData(),this.formEmail=this.emailAddress,this.rating&&(this.selectedRating=this.rating),"thumbs"==this.ratingMode&&0==this.rating&&(this.selectedRating=5)}async fetchProjectData(){try{const t=await fetch("https://app.pushfeedback.com/api/projects/"+this.project+"/"),e=await t.json();this.whitelabel=e.whitelabel}catch(t){console.log(t)}}resetOverflow(){document.documentElement.classList.remove("feedback-modal-screenshot-open"),document.documentElement.classList.remove("feedback-modal-screenshot-open--scroll"),document.documentElement.classList.remove("feedback-modal-screenshot-closing")}handleMessageInput(t){this.formMessage=t.target.value}handleEmailInput(t){this.formEmail=t.target.value}handleCheckboxChange(t){this.isPrivacyChecked=t.target.checked}handleVerification(t){this.formVerification=t.target.value}handleRatingChange(t){this.selectedRating=t}render(){return o("div",{class:"feedback-modal-wrapper "+(this.customFont?"feedback-modal-wrapper--custom-font":"")},this.showCanvasEditor&&o("canvas-editor",{ref:t=>this.canvasEditorRef=t,"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&&o("div",{class:"screenshot-error-notification"},o("div",{class:"screenshot-error-content"},o("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("circle",{cx:"12",cy:"12",r:"10"}),o("line",{x1:"15",y1:"9",x2:"9",y2:"15"}),o("line",{x1:"9",y1:"9",x2:"15",y2:"15"})),o("span",null,this.screenshotError),o("button",{class:"error-close-btn",onClick:()=>this.showScreenshotError=!1,title:"Close"},o("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},o("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),o("line",{x1:"6",y1:"6",x2:"18",y2:"18"}))))),this.showModal&&o("div",{class:"feedback-overlay "+(this.isAnimating?"feedback-overlay--visible":"")}),this.showModal&&o("div",{class:`feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating?"feedback-modal-content--open":""}`,ref:t=>this.modalContent=t},o("div",{class:"feedback-modal-header"},o("span",null,this.formSuccess||this.formError?this.formSuccess?this.modalTitleSuccess:this.modalTitleError:this.modalTitle),o("button",{class:"feedback-modal-close",onClick:this.close},o("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"},o("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),o("line",{x1:"6",y1:"6",x2:"18",y2:"18"})))),o("div",{class:"feedback-modal-body"},this.formSuccess||this.formError?this.formSuccess&&!this.formError?o("div",{class:"feedback-modal-success"},o("p",{class:"feedback-modal-message"},this.successMessage)):this.formError&&404==this.formErrorStatus?o("p",{class:"feedback-modal-message"},this.errorMessage404):this.formError&&403==this.formErrorStatus?o("p",{class:"feedback-modal-message"},this.errorMessage403):this.formError?o("p",{class:"feedback-modal-message"},this.errorMessage):o("span",null):o("form",{onSubmit:this.handleSubmit},!this.hideRating&&o("div",{class:"feedback-modal-rating"},"thumbs"===this.ratingMode?o("div",{class:"feedback-modal-rating-content"},o("span",{class:"feedback-modal-input-heading"},this.ratingPlaceholder),o("div",{class:"feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs"},o("button",{title:"Yes",class:"feedback-modal-rating-button "+(1===this.selectedRating?"feedback-modal-rating-button--selected":""),onClick:t=>{t.preventDefault(),this.handleRatingChange(1)}},o("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"},o("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"}))),o("button",{title:"No",class:"feedback-modal-rating-button "+(5===this.selectedRating?"feedback-modal-rating-button--selected":""),onClick:t=>{t.preventDefault(),this.handleRatingChange(5)}},o("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"},o("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"}))))):o("div",{class:"feedback-modal-rating-content"},o("span",{class:"feedback-modal-input-heading"},this.ratingStarsPlaceholder),o("div",{class:"feedback-modal-rating-buttons feedback-modal-rating-buttons--stars"},[1,2,3,4,5].map((t=>o("button",{key:t,class:"feedback-modal-rating-button "+(this.selectedRating>=t?"feedback-modal-rating-button--selected":""),onClick:e=>{e.preventDefault(),this.handleRatingChange(t)}},o("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"},o("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"})))))))),o("div",{class:"feedback-modal-text"},o("textarea",{placeholder:this.messagePlaceholder,value:this.formMessage,onInput:t=>this.handleMessageInput(t)})),!this.hideEmail&&o("div",{class:"feedback-modal-email"},o("input",{placeholder:this.emailPlaceholder,type:"email",onInput:t=>this.handleEmailInput(t),value:this.formEmail,required:this.isEmailRequired})),o("div",{class:"feedback-verification"},o("input",{type:"text",name:"verification",style:{display:"none"},onInput:t=>this.handleVerification(t),value:this.formVerification})),!this.hidePrivacyPolicy&&o("div",{class:"feedback-modal-privacy"},o("input",{type:"checkbox",id:"privacyPolicy",onChange:t=>this.handleCheckboxChange(t),required:!0}),o("span",{innerHTML:this.privacyPolicyText})),o("div",{class:"feedback-modal-buttons "+(this.hideScreenshotButton?"single":"")},!this.hideScreenshotButton&&o("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&&o("div",{class:"screenshot-preview",onClick:this.openCanvasEditor},o("img",{src:this.encodedScreenshot,alt:"Screenshot Preview"})),!this.encodedScreenshot&&!this.takingScreenshot&&o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24",viewBox:"0 -960 960 960",width:"24"},o("path",{d:"M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z"})),this.takingScreenshot&&o("div",{class:"screenshot-loading"},o("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"},o("line",{x1:"12",y1:"2",x2:"12",y2:"6"}),o("line",{x1:"12",y1:"18",x2:"12",y2:"22"}),o("line",{x1:"4.93",y1:"4.93",x2:"7.76",y2:"7.76"}),o("line",{x1:"16.24",y1:"16.24",x2:"19.07",y2:"19.07"}),o("line",{x1:"2",y1:"12",x2:"6",y2:"12"}),o("line",{x1:"18",y1:"12",x2:"22",y2:"12"}),o("line",{x1:"4.93",y1:"19.07",x2:"7.76",y2:"16.24"}),o("line",{x1:"16.24",y1:"7.76",x2:"19.07",y2:"4.93"}))),this.takingScreenshot?this.screenshotTakingText:this.encodedScreenshot?this.screenshotAttachedText:this.screenshotButtonText),o("button",{class:"feedback-modal-button feedback-modal-button--submit",type:"submit",disabled:this.sending},this.sendButtonText)))),o("div",{class:"feedback-modal-footer"},o("div",{class:"feedback-logo",style:{display:this.whitelabel?"none":"block"}},"Powered by"," ",o("a",{target:"_blank",href:"https://pushfeedback.com"},"PushFeedback.com")),this.footerText&&o("div",{class:"feedback-footer-text"},o("span",{innerHTML:this.footerText})))))}componentDidRender(){this.showModal&&requestAnimationFrame((()=>{this.overlayVisible=!0}))}async openModal(){this.showModal=!0,requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.isAnimating=!0}))}))}};n.style=".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.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)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:3px solid var(--feedback-modal-element-selected-border-color) !important;box-shadow:0 0 0 2px rgba(0, 123, 255, 0.3) !important}.screenshot-preview{display:inline-block;width:30px;height:30px;overflow:hidden;border-radius:4px;margin-right:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:transform 0.2s ease}.screenshot-preview:hover{transform:scale(1.1)}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.screenshot-loading{display:inline-flex;align-items:center;margin-right:8px}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}@keyframes feather-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.feather-loader{animation:feather-spin 1s linear infinite;display:block}.screenshot-error-notification{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:10001;max-width:500px;width:90%;animation:slideDown 0.3s ease-out}@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.screenshot-error-content{background:#fee;border:1px solid #fcc;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);color:#c53030}.screenshot-error-content svg:first-child{color:#e53e3e;flex-shrink:0}.screenshot-error-content span{flex:1;font-size:14px;line-height:1.4;font-weight:500}.error-close-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#c53030;flex-shrink:0;transition:background-color 0.2s ease}.error-close-btn:hover{background:rgba(197, 48, 48, 0.1)}";export{a as canvas_editor,r as feedback_button,n as feedback_modal}