pushfeedback 0.0.7 → 0.0.9

package/dist/cjs/feedback-button_2.cjs.entry.js

@@ -0,0 +1,1049 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d5ac8167.js');
+
+const feedbackButtonCss = ".feedback-button-content{cursor:pointer;z-index:300}.feedback-button-content--light{align-items:center;background-color:var(--feedback-white-color);border-radius:20px;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;display:flex;font-family:var(--feedback-font-family);color:var(--feedback-primary-color);font-weight:bold;padding:8px 15px;font-size:var(--feedback-text-font-size)}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-primary-color);border-radius:20px;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;display:flex;font-family:var(--feedback-font-family);color:var(--feedback-white-color);font-weight:bold;padding:8px 15px;font-size:16px}.feedback-button-content--bottom-right{position:fixed;bottom:10px;right:10px}.feedback-button-content--center-right{position:fixed;top:50%;transform:rotate(-90deg) translateY(-50%)}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-right-radius:0px;border-bottom-left-radius:0px}.feedback-button-content-icon{margin-right:5px;height:16px;width:16px}";
+
+const FeedbackButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.modalTitle = 'Share your feedback';
+    this.successModalTitle = 'Thanks for your feedback!';
+    this.errorModalTitle = "Oops! We didn't receive your feedback. Please try again later.";
+    this.modalPosition = 'center';
+    this.sendButtonText = 'Send';
+    this.project = '';
+    this.screenshotButtonTooltipText = 'Take a Screenshot';
+    this.screenshotTopbarText = 'SELECT AN ELEMENT ON THE PAGE';
+    this.email = '';
+    this.emailPlaceholder = 'Email address (optional)';
+    this.messagePlaceholder = 'How could this page be more helpful?';
+    this.buttonStyle = 'default';
+    this.buttonPosition = 'default';
+    this.hideIcon = false;
+    this.hideScreenshotButton = false;
+  }
+  connectedCallback() {
+    this.feedbackModal = document.createElement('feedback-modal');
+    const props = [
+      'modalTitle',
+      'successModalTitle',
+      'errorModalTitle',
+      'modalPosition',
+      'sendButtonText',
+      'project',
+      'screenshotButtonTooltipText',
+      'screenshotTopbarText',
+      'email',
+      'emailPlaceholder',
+      'messagePlaceholder',
+      'hideScreenshotButton'
+    ];
+    props.forEach(prop => {
+      this.feedbackModal[prop] = this[prop];
+    });
+    document.body.appendChild(this.feedbackModal);
+  }
+  disconnectedCallback() {
+    document.body.removeChild(this.feedbackModal);
+  }
+  componentDidLoad() {
+    if (this.buttonPosition === 'center-right') {
+      const buttonContent = this.el.shadowRoot.querySelector('.feedback-button-content');
+      buttonContent.style.right = `${buttonContent.offsetWidth / 2 * -1}px`;
+    }
+  }
+  showModal() {
+    this.feedbackModal.showModal = true;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition}`, onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle === 'dark' && (index.h("span", { class: "feedback-button-content-icon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-repeat" }, index.h("polyline", { points: "17 1 21 5 17 9" }), index.h("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }), index.h("polyline", { points: "7 23 3 19 7 15" }), index.h("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })))), !this.hideIcon && this.buttonStyle === 'light' && (index.h("span", { class: "feedback-button-content-icon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#0070F4", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-repeat" }, index.h("polyline", { points: "17 1 21 5 17 9" }), index.h("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }), index.h("polyline", { points: "7 23 3 19 7 15" }), index.h("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })))), index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+};
+FeedbackButton.style = feedbackButtonCss;
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+var domToImage = createCommonjsModule(function (module) {
+(function (global) {
+
+    var util = newUtil();
+    var inliner = newInliner();
+    var fontFaces = newFontFaces();
+    var images = newImages();
+
+    // Default impl options
+    var defaultOptions = {
+        // Default is to fail on error, no placeholder
+        imagePlaceholder: undefined,
+        // Default cache bust is false, it will use the cache
+        cacheBust: false
+    };
+
+    var domtoimage = {
+        toSvg: toSvg,
+        toPng: toPng,
+        toJpeg: toJpeg,
+        toBlob: toBlob,
+        toPixelData: toPixelData,
+        impl: {
+            fontFaces: fontFaces,
+            images: images,
+            util: util,
+            inliner: inliner,
+            options: {}
+        }
+    };
+
+    module.exports = domtoimage;
+
+
+    /**
+     * @param {Node} node - The DOM Node object to render
+     * @param {Object} options - Rendering options
+     * @param {Function} options.filter - Should return true if passed node should be included in the output
+     *          (excluding node means excluding it's children as well). Not called on the root node.
+     * @param {String} options.bgcolor - color for the background, any valid CSS color value.
+     * @param {Number} options.width - width to be applied to node before rendering.
+     * @param {Number} options.height - height to be applied to node before rendering.
+     * @param {Object} options.style - an object whose properties to be copied to node's style before rendering.
+     * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
+                defaults to 1.0.
+     * @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
+     * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url
+     * @return {Promise} - A promise that is fulfilled with a SVG image data URL
+     * */
+    function toSvg(node, options) {
+        options = options || {};
+        copyOptions(options);
+        return Promise.resolve(node)
+            .then(function (node) {
+                return cloneNode(node, options.filter, true);
+            })
+            .then(embedFonts)
+            .then(inlineImages)
+            .then(applyOptions)
+            .then(function (clone) {
+                return makeSvgDataUri(clone,
+                    options.width || util.width(node),
+                    options.height || util.height(node)
+                );
+            });
+
+        function applyOptions(clone) {
+            if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
+
+            if (options.width) clone.style.width = options.width + 'px';
+            if (options.height) clone.style.height = options.height + 'px';
+
+            if (options.style)
+                Object.keys(options.style).forEach(function (property) {
+                    clone.style[property] = options.style[property];
+                });
+
+            return clone;
+        }
+    }
+
+    /**
+     * @param {Node} node - The DOM Node object to render
+     * @param {Object} options - Rendering options, @see {@link toSvg}
+     * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.
+     * */
+    function toPixelData(node, options) {
+        return draw(node, options || {})
+            .then(function (canvas) {
+                return canvas.getContext('2d').getImageData(
+                    0,
+                    0,
+                    util.width(node),
+                    util.height(node)
+                ).data;
+            });
+    }
+
+    /**
+     * @param {Node} node - The DOM Node object to render
+     * @param {Object} options - Rendering options, @see {@link toSvg}
+     * @return {Promise} - A promise that is fulfilled with a PNG image data URL
+     * */
+    function toPng(node, options) {
+        return draw(node, options || {})
+            .then(function (canvas) {
+                return canvas.toDataURL();
+            });
+    }
+
+    /**
+     * @param {Node} node - The DOM Node object to render
+     * @param {Object} options - Rendering options, @see {@link toSvg}
+     * @return {Promise} - A promise that is fulfilled with a JPEG image data URL
+     * */
+    function toJpeg(node, options) {
+        options = options || {};
+        return draw(node, options)
+            .then(function (canvas) {
+                return canvas.toDataURL('image/jpeg', options.quality || 1.0);
+            });
+    }
+
+    /**
+     * @param {Node} node - The DOM Node object to render
+     * @param {Object} options - Rendering options, @see {@link toSvg}
+     * @return {Promise} - A promise that is fulfilled with a PNG image blob
+     * */
+    function toBlob(node, options) {
+        return draw(node, options || {})
+            .then(util.canvasToBlob);
+    }
+
+    function copyOptions(options) {
+        // Copy options to impl options for use in impl
+        if(typeof(options.imagePlaceholder) === 'undefined') {
+            domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder;
+        } else {
+            domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder;
+        }
+
+        if(typeof(options.cacheBust) === 'undefined') {
+            domtoimage.impl.options.cacheBust = defaultOptions.cacheBust;
+        } else {
+            domtoimage.impl.options.cacheBust = options.cacheBust;
+        }
+    }
+
+    function draw(domNode, options) {
+        return toSvg(domNode, options)
+            .then(util.makeImage)
+            .then(util.delay(100))
+            .then(function (image) {
+                var canvas = newCanvas(domNode);
+                canvas.getContext('2d').drawImage(image, 0, 0);
+                return canvas;
+            });
+
+        function newCanvas(domNode) {
+            var canvas = document.createElement('canvas');
+            canvas.width = options.width || util.width(domNode);
+            canvas.height = options.height || util.height(domNode);
+
+            if (options.bgcolor) {
+                var ctx = canvas.getContext('2d');
+                ctx.fillStyle = options.bgcolor;
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+            }
+
+            return canvas;
+        }
+    }
+
+    function cloneNode(node, filter, root) {
+        if (!root && filter && !filter(node)) return Promise.resolve();
+
+        return Promise.resolve(node)
+            .then(makeNodeCopy)
+            .then(function (clone) {
+                return cloneChildren(node, clone, filter);
+            })
+            .then(function (clone) {
+                return processClone(node, clone);
+            });
+
+        function makeNodeCopy(node) {
+            if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());
+            return node.cloneNode(false);
+        }
+
+        function cloneChildren(original, clone, filter) {
+            var children = original.childNodes;
+            if (children.length === 0) return Promise.resolve(clone);
+
+            return cloneChildrenInOrder(clone, util.asArray(children), filter)
+                .then(function () {
+                    return clone;
+                });
+
+            function cloneChildrenInOrder(parent, children, filter) {
+                var done = Promise.resolve();
+                children.forEach(function (child) {
+                    done = done
+                        .then(function () {
+                            return cloneNode(child, filter);
+                        })
+                        .then(function (childClone) {
+                            if (childClone) parent.appendChild(childClone);
+                        });
+                });
+                return done;
+            }
+        }
+
+        function processClone(original, clone) {
+            if (!(clone instanceof Element)) return clone;
+
+            return Promise.resolve()
+                .then(cloneStyle)
+                .then(clonePseudoElements)
+                .then(copyUserInput)
+                .then(fixSvg)
+                .then(function () {
+                    return clone;
+                });
+
+            function cloneStyle() {
+                copyStyle(window.getComputedStyle(original), clone.style);
+
+                function copyStyle(source, target) {
+                    if (source.cssText) target.cssText = source.cssText;
+                    else copyProperties(source, target);
+
+                    function copyProperties(source, target) {
+                        util.asArray(source).forEach(function (name) {
+                            target.setProperty(
+                                name,
+                                source.getPropertyValue(name),
+                                source.getPropertyPriority(name)
+                            );
+                        });
+                    }
+                }
+            }
+
+            function clonePseudoElements() {
+                [':before', ':after'].forEach(function (element) {
+                    clonePseudoElement(element);
+                });
+
+                function clonePseudoElement(element) {
+                    var style = window.getComputedStyle(original, element);
+                    var content = style.getPropertyValue('content');
+
+                    if (content === '' || content === 'none') return;
+
+                    var className = util.uid();
+                    clone.className = clone.className + ' ' + className;
+                    var styleElement = document.createElement('style');
+                    styleElement.appendChild(formatPseudoElementStyle(className, element, style));
+                    clone.appendChild(styleElement);
+
+                    function formatPseudoElementStyle(className, element, style) {
+                        var selector = '.' + className + ':' + element;
+                        var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style);
+                        return document.createTextNode(selector + '{' + cssText + '}');
+
+                        function formatCssText(style) {
+                            var content = style.getPropertyValue('content');
+                            return style.cssText + ' content: ' + content + ';';
+                        }
+
+                        function formatCssProperties(style) {
+
+                            return util.asArray(style)
+                                .map(formatProperty)
+                                .join('; ') + ';';
+
+                            function formatProperty(name) {
+                                return name + ': ' +
+                                    style.getPropertyValue(name) +
+                                    (style.getPropertyPriority(name) ? ' !important' : '');
+                            }
+                        }
+                    }
+                }
+            }
+
+            function copyUserInput() {
+                if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value;
+                if (original instanceof HTMLInputElement) clone.setAttribute("value", original.value);
+            }
+
+            function fixSvg() {
+                if (!(clone instanceof SVGElement)) return;
+                clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+                if (!(clone instanceof SVGRectElement)) return;
+                ['width', 'height'].forEach(function (attribute) {
+                    var value = clone.getAttribute(attribute);
+                    if (!value) return;
+
+                    clone.style.setProperty(attribute, value);
+                });
+            }
+        }
+    }
+
+    function embedFonts(node) {
+        return fontFaces.resolveAll()
+            .then(function (cssText) {
+                var styleNode = document.createElement('style');
+                node.appendChild(styleNode);
+                styleNode.appendChild(document.createTextNode(cssText));
+                return node;
+            });
+    }
+
+    function inlineImages(node) {
+        return images.inlineAll(node)
+            .then(function () {
+                return node;
+            });
+    }
+
+    function makeSvgDataUri(node, width, height) {
+        return Promise.resolve(node)
+            .then(function (node) {
+                node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+                return new XMLSerializer().serializeToString(node);
+            })
+            .then(util.escapeXhtml)
+            .then(function (xhtml) {
+                return '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>';
+            })
+            .then(function (foreignObject) {
+                return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
+                    foreignObject + '</svg>';
+            })
+            .then(function (svg) {
+                return 'data:image/svg+xml;charset=utf-8,' + svg;
+            });
+    }
+
+    function newUtil() {
+        return {
+            escape: escape,
+            parseExtension: parseExtension,
+            mimeType: mimeType,
+            dataAsUrl: dataAsUrl,
+            isDataUrl: isDataUrl,
+            canvasToBlob: canvasToBlob,
+            resolveUrl: resolveUrl,
+            getAndEncode: getAndEncode,
+            uid: uid(),
+            delay: delay,
+            asArray: asArray,
+            escapeXhtml: escapeXhtml,
+            makeImage: makeImage,
+            width: width,
+            height: height
+        };
+
+        function mimes() {
+            /*
+             * Only WOFF and EOT mime types for fonts are 'real'
+             * see http://www.iana.org/assignments/media-types/media-types.xhtml
+             */
+            var WOFF = 'application/font-woff';
+            var JPEG = 'image/jpeg';
+
+            return {
+                'woff': WOFF,
+                'woff2': WOFF,
+                'ttf': 'application/font-truetype',
+                'eot': 'application/vnd.ms-fontobject',
+                'png': 'image/png',
+                'jpg': JPEG,
+                'jpeg': JPEG,
+                'gif': 'image/gif',
+                'tiff': 'image/tiff',
+                'svg': 'image/svg+xml'
+            };
+        }
+
+        function parseExtension(url) {
+            var match = /\.([^\.\/]*?)$/g.exec(url);
+            if (match) return match[1];
+            else return '';
+        }
+
+        function mimeType(url) {
+            var extension = parseExtension(url).toLowerCase();
+            return mimes()[extension] || '';
+        }
+
+        function isDataUrl(url) {
+            return url.search(/^(data:)/) !== -1;
+        }
+
+        function toBlob(canvas) {
+            return new Promise(function (resolve) {
+                var binaryString = window.atob(canvas.toDataURL().split(',')[1]);
+                var length = binaryString.length;
+                var binaryArray = new Uint8Array(length);
+
+                for (var i = 0; i < length; i++)
+                    binaryArray[i] = binaryString.charCodeAt(i);
+
+                resolve(new Blob([binaryArray], {
+                    type: 'image/png'
+                }));
+            });
+        }
+
+        function canvasToBlob(canvas) {
+            if (canvas.toBlob)
+                return new Promise(function (resolve) {
+                    canvas.toBlob(resolve);
+                });
+
+            return toBlob(canvas);
+        }
+
+        function resolveUrl(url, baseUrl) {
+            var doc = document.implementation.createHTMLDocument();
+            var base = doc.createElement('base');
+            doc.head.appendChild(base);
+            var a = doc.createElement('a');
+            doc.body.appendChild(a);
+            base.href = baseUrl;
+            a.href = url;
+            return a.href;
+        }
+
+        function uid() {
+            var index = 0;
+
+            return function () {
+                return 'u' + fourRandomChars() + index++;
+
+                function fourRandomChars() {
+                    /* see http://stackoverflow.com/a/6248722/2519373 */
+                    return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
+                }
+            };
+        }
+
+        function makeImage(uri) {
+            return new Promise(function (resolve, reject) {
+                var image = new Image();
+                image.onload = function () {
+                    resolve(image);
+                };
+                image.onerror = reject;
+                image.src = uri;
+            });
+        }
+
+        function getAndEncode(url) {
+            var TIMEOUT = 30000;
+            if(domtoimage.impl.options.cacheBust) {
+                // Cache bypass so we dont have CORS issues with cached images
+                // Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
+                url += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime();
+            }
+
+            return new Promise(function (resolve) {
+                var request = new XMLHttpRequest();
+
+                request.onreadystatechange = done;
+                request.ontimeout = timeout;
+                request.responseType = 'blob';
+                request.timeout = TIMEOUT;
+                request.open('GET', url, true);
+                request.send();
+
+                var placeholder;
+                if(domtoimage.impl.options.imagePlaceholder) {
+                    var split = domtoimage.impl.options.imagePlaceholder.split(/,/);
+                    if(split && split[1]) {
+                        placeholder = split[1];
+                    }
+                }
+
+                function done() {
+                    if (request.readyState !== 4) return;
+
+                    if (request.status !== 200) {
+                        if(placeholder) {
+                            resolve(placeholder);
+                        } else {
+                            fail('cannot fetch resource: ' + url + ', status: ' + request.status);
+                        }
+
+                        return;
+                    }
+
+                    var encoder = new FileReader();
+                    encoder.onloadend = function () {
+                        var content = encoder.result.split(/,/)[1];
+                        resolve(content);
+                    };
+                    encoder.readAsDataURL(request.response);
+                }
+
+                function timeout() {
+                    if(placeholder) {
+                        resolve(placeholder);
+                    } else {
+                        fail('timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url);
+                    }
+                }
+
+                function fail(message) {
+                    console.error(message);
+                    resolve('');
+                }
+            });
+        }
+
+        function dataAsUrl(content, type) {
+            return 'data:' + type + ';base64,' + content;
+        }
+
+        function escape(string) {
+            return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
+        }
+
+        function delay(ms) {
+            return function (arg) {
+                return new Promise(function (resolve) {
+                    setTimeout(function () {
+                        resolve(arg);
+                    }, ms);
+                });
+            };
+        }
+
+        function asArray(arrayLike) {
+            var array = [];
+            var length = arrayLike.length;
+            for (var i = 0; i < length; i++) array.push(arrayLike[i]);
+            return array;
+        }
+
+        function escapeXhtml(string) {
+            return string.replace(/#/g, '%23').replace(/\n/g, '%0A');
+        }
+
+        function width(node) {
+            var leftBorder = px(node, 'border-left-width');
+            var rightBorder = px(node, 'border-right-width');
+            return node.scrollWidth + leftBorder + rightBorder;
+        }
+
+        function height(node) {
+            var topBorder = px(node, 'border-top-width');
+            var bottomBorder = px(node, 'border-bottom-width');
+            return node.scrollHeight + topBorder + bottomBorder;
+        }
+
+        function px(node, styleProperty) {
+            var value = window.getComputedStyle(node).getPropertyValue(styleProperty);
+            return parseFloat(value.replace('px', ''));
+        }
+    }
+
+    function newInliner() {
+        var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
+
+        return {
+            inlineAll: inlineAll,
+            shouldProcess: shouldProcess,
+            impl: {
+                readUrls: readUrls,
+                inline: inline
+            }
+        };
+
+        function shouldProcess(string) {
+            return string.search(URL_REGEX) !== -1;
+        }
+
+        function readUrls(string) {
+            var result = [];
+            var match;
+            while ((match = URL_REGEX.exec(string)) !== null) {
+                result.push(match[1]);
+            }
+            return result.filter(function (url) {
+                return !util.isDataUrl(url);
+            });
+        }
+
+        function inline(string, url, baseUrl, get) {
+            return Promise.resolve(url)
+                .then(function (url) {
+                    return baseUrl ? util.resolveUrl(url, baseUrl) : url;
+                })
+                .then(get || util.getAndEncode)
+                .then(function (data) {
+                    return util.dataAsUrl(data, util.mimeType(url));
+                })
+                .then(function (dataUrl) {
+                    return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3');
+                });
+
+            function urlAsRegex(url) {
+                return new RegExp('(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))', 'g');
+            }
+        }
+
+        function inlineAll(string, baseUrl, get) {
+            if (nothingToInline()) return Promise.resolve(string);
+
+            return Promise.resolve(string)
+                .then(readUrls)
+                .then(function (urls) {
+                    var done = Promise.resolve(string);
+                    urls.forEach(function (url) {
+                        done = done.then(function (string) {
+                            return inline(string, url, baseUrl, get);
+                        });
+                    });
+                    return done;
+                });
+
+            function nothingToInline() {
+                return !shouldProcess(string);
+            }
+        }
+    }
+
+    function newFontFaces() {
+        return {
+            resolveAll: resolveAll,
+            impl: {
+                readAll: readAll
+            }
+        };
+
+        function resolveAll() {
+            return readAll()
+                .then(function (webFonts) {
+                    return Promise.all(
+                        webFonts.map(function (webFont) {
+                            return webFont.resolve();
+                        })
+                    );
+                })
+                .then(function (cssStrings) {
+                    return cssStrings.join('\n');
+                });
+        }
+
+        function readAll() {
+            return Promise.resolve(util.asArray(document.styleSheets))
+                .then(getCssRules)
+                .then(selectWebFontRules)
+                .then(function (rules) {
+                    return rules.map(newWebFont);
+                });
+
+            function selectWebFontRules(cssRules) {
+                return cssRules
+                    .filter(function (rule) {
+                        return rule.type === CSSRule.FONT_FACE_RULE;
+                    })
+                    .filter(function (rule) {
+                        return inliner.shouldProcess(rule.style.getPropertyValue('src'));
+                    });
+            }
+
+            function getCssRules(styleSheets) {
+                var cssRules = [];
+                styleSheets.forEach(function (sheet) {
+                    try {
+                        util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules));
+                    } catch (e) {
+                        console.log('Error while reading CSS rules from ' + sheet.href, e.toString());
+                    }
+                });
+                return cssRules;
+            }
+
+            function newWebFont(webFontRule) {
+                return {
+                    resolve: function resolve() {
+                        var baseUrl = (webFontRule.parentStyleSheet || {}).href;
+                        return inliner.inlineAll(webFontRule.cssText, baseUrl);
+                    },
+                    src: function () {
+                        return webFontRule.style.getPropertyValue('src');
+                    }
+                };
+            }
+        }
+    }
+
+    function newImages() {
+        return {
+            inlineAll: inlineAll,
+            impl: {
+                newImage: newImage
+            }
+        };
+
+        function newImage(element) {
+            return {
+                inline: inline
+            };
+
+            function inline(get) {
+                if (util.isDataUrl(element.src)) return Promise.resolve();
+
+                return Promise.resolve(element.src)
+                    .then(get || util.getAndEncode)
+                    .then(function (data) {
+                        return util.dataAsUrl(data, util.mimeType(element.src));
+                    })
+                    .then(function (dataUrl) {
+                        return new Promise(function (resolve, reject) {
+                            element.onload = resolve;
+                            element.onerror = reject;
+                            element.src = dataUrl;
+                        });
+                    });
+            }
+        }
+
+        function inlineAll(node) {
+            if (!(node instanceof Element)) return Promise.resolve(node);
+
+            return inlineBackground(node)
+                .then(function () {
+                    if (node instanceof HTMLImageElement)
+                        return newImage(node).inline();
+                    else
+                        return Promise.all(
+                            util.asArray(node.childNodes).map(function (child) {
+                                return inlineAll(child);
+                            })
+                        );
+                });
+
+            function inlineBackground(node) {
+                var background = node.style.getPropertyValue('background');
+
+                if (!background) return Promise.resolve(node);
+
+                return inliner.inlineAll(background)
+                    .then(function (inlined) {
+                        node.style.setProperty(
+                            'background',
+                            inlined,
+                            node.style.getPropertyPriority('background')
+                        );
+                    })
+                    .then(function () {
+                        return node;
+                    });
+            }
+        }
+    }
+})();
+});
+
+const feedbackModalCss = ".text-center{text-align:center;flex-grow: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;font-family:var(--feedback-modal-content-font-family);max-width:300px;padding:20px;position:fixed;width:100%;z-index:300;left:50%;top:50%;transform:translate(-50%, -50%)}@media screen and (min-width: 768px){.feedback-modal-content.feedback-modal-content--bottom-right{top:initial;left:initial;transform:initial;bottom:var(--feedback-modal-content-position-bottom);right:var(--feedback-modal-content-position-right)}.feedback-modal-content.feedback-modal-content--bottom-left{top:initial;transform:initial;bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left)}.feedback-modal-content.feedback-modal-content--top-right{top:initial;transform:initial;right:var(--feedback-modal-content-position-right);top:var(--fedback-modal-content-position-top)}.feedback-modal-content.feedback-modal-content--top-left{transform:initial;left:var(--feedback-modal-content-position-left);top:var(--fedback-modal-content-position-top)}}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);font-family:var(--feedback-modal-header-font-family);display:flex;font-size:var(--feedback-header-font-size);justify-content:space-between;margin-bottom:20px}.feedback-modal-text{margin-bottom:20px}.feedback-modal-text textarea{border:1px solid var(--feedback-modal-input-border-color);border-radius:4px;box-sizing:border-box;font-family:var(--feedback-modal-content-font-family);font-size:var(--feedback-modal-input-font-size);height:100px;padding:10px;resize:none;width:100%}.feedback-modal-email{margin-bottom:20px}.feedback-modal-email input{border:1px solid var(--feedback-modal-input-border-color);border-radius:4px;box-sizing:border-box;font-family:var(--feedback-modal-content-font-family);font-size:var(--feedback-modal-input-font-size);height:40px;padding:10px;width:100%}.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;justify-content:space-between}.feedback-modal-buttons.single{justify-content:flex-end}.button{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;font-size:var(--feedback-modal-button-font-size);padding:5px 10px;min-height:20px}.button:hover,.button.active{color:var(--feedback-modal-button-text-color-active);background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active)}.feedback-modal-footer{font-size:12px;margin-top:5px 0;text-align:center}.feedback-modal-footer a{color:#191919;text-decoration:none}.feedback-logo{display:flex;align-items:center;justify-content:center;margin-top:5px}.feedback-logo svg{max-width:12px;margin-right:5px}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;margin-left:auto;padding:0;width:24px;height:24px}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);box-shadow:0px 0px 0px 5px var(--feedback-modal-screenshot-element-selected-bg-color) inset;height:100vh;left:0;position:fixed;top:0;width:100%;z-index:100}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);color:var(--feedback-modal-screenshot-element-selected-text-color);cursor:pointer;display:flex;padding:5px;position:fixed;justify-content:center;width:100%;z-index:200}.feedback-modal-screenshot-header span{padding-left:10px;padding-right:10px}.feedback-modal-screenshot-overlay{background-color:transparent;cursor:unset;height:100vh;left:0;position:fixed;top:0;width:100%;z-index:100}.feedback-modal-message{font-size:var(--fedback-modal-message-font-size)}.feedback-modal-element-hover{cursor:pointer;background-color:transparent;border:4px dashed var(--feedback-modal-screenshot-element-hover-border-color)}.feedback-modal-element-selected{border:4px solid var(--feedback-modal-screenshot-element-selected-border-color)}";
+
+const FeedbackModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.handleSubmit = async (event) => {
+      event.preventDefault();
+      this.resetOverflow();
+      this.showScreenshotMode = false;
+      this.showModal = false;
+      this.sending = true;
+      let encodedScreenshot = "";
+      if (this.encodedScreenshot) {
+        await this.encodedScreenshot.then((data) => {
+          encodedScreenshot = data;
+        }).catch((error) => {
+          console.log(error);
+        });
+      }
+      try {
+        const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
+          method: 'POST',
+          body: JSON.stringify({
+            url: window.location.href,
+            message: this.formMessage,
+            email: this.formEmail,
+            project: this.project,
+            screenshot: encodedScreenshot
+          }),
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        });
+        if (res.status === 201) {
+          this.formSuccess = true;
+          this.formError = false;
+        }
+        else {
+          this.formSuccess = false;
+          this.formError = true;
+          this.formErrorStatus = res.status;
+        }
+      }
+      catch (error) {
+        console.log(error);
+        this.formSuccess = false;
+        this.formError = true;
+        this.formErrorStatus = 500;
+      }
+      finally {
+        this.sending = false;
+        this.showModal = true;
+      }
+    };
+    this.close = () => {
+      this.sending = false;
+      this.showModal = false;
+      this.showScreenshotMode = false;
+      this.hasSelectedElement = false;
+      this.encodedScreenshot = null;
+      this.formSuccess = false;
+      this.formError = false;
+      this.formErrorStatus = 500;
+      this.formMessage = '';
+      this.formEmail = '';
+      this.resetOverflow();
+    };
+    this.openScreenShot = () => {
+      this.hasSelectedElement = false;
+      this.showModal = false;
+      this.showScreenshotMode = true;
+      this.encodedScreenshot = null;
+      this.resetOverflow();
+    };
+    this.closeScreenShot = () => {
+      this.showModal = false;
+      this.showScreenshotMode = false;
+      this.hasSelectedElement = false;
+      this.encodedScreenshot = null;
+      this.overlay.style.display = 'none';
+      this.resetOverflow();
+    };
+    this.handleMouseOverScreenShot = (event) => {
+      event.preventDefault();
+      if (this.hasSelectedElement)
+        return;
+      this.overlay.style.display = 'none';
+      this.screenshotModal.style.display = 'none';
+      const elementUnder = document.elementFromPoint(event.clientX, event.clientY);
+      const rect = elementUnder.getBoundingClientRect();
+      this.screenshotModal.style.display = '';
+      // Get the bounding box of the element selected
+      this.elementSelected.style.position = "absolute";
+      this.elementSelected.style.left = `${rect.left}px`;
+      this.elementSelected.style.top = `${rect.top}px`;
+      this.elementSelected.style.width = `${rect.width}px`;
+      this.elementSelected.style.height = `${rect.height}px`;
+      this.elementSelected.classList.add('feedback-modal-element-hover');
+      // Set the background color of nonselected areas
+      // Top
+      this.topSide.style.position = "absolute";
+      this.topSide.style.left = `${rect.left}px`;
+      this.topSide.style.top = '0px';
+      this.topSide.style.width = `${rect.width + 8}px`;
+      this.topSide.style.height = `${rect.top}px`;
+      this.topSide.style.backgroundColor = "rgba(0, 0, 0, 0.3)";
+      // Left
+      this.leftSide.style.position = "absolute";
+      this.leftSide.style.left = '0px';
+      this.leftSide.style.top = '0px';
+      this.leftSide.style.width = `${rect.left}px`;
+      this.leftSide.style.height = '100vh';
+      this.leftSide.style.backgroundColor = "rgba(0, 0, 0, 0.3)";
+      // Bottom
+      this.bottomSide.style.position = "absolute";
+      this.bottomSide.style.left = `${rect.left}px`;
+      this.bottomSide.style.top = `${rect.bottom + 8}px`;
+      this.bottomSide.style.width = `${rect.width + 8}px`;
+      this.bottomSide.style.height = '100vh';
+      this.bottomSide.style.backgroundColor = "rgba(0, 0, 0, 0.3)";
+      // Right
+      this.rightSide.style.position = "absolute";
+      this.rightSide.style.left = `${rect.right + 8}px`;
+      this.rightSide.style.top = '0px';
+      this.rightSide.style.width = '100%';
+      this.rightSide.style.height = '100vh';
+      this.rightSide.style.backgroundColor = "rgba(0, 0, 0, 0.3)";
+      // Restore the visibility of the screenshot-modal
+      this.screenshotModal.style.backgroundColor = 'transparent';
+    };
+    this.handleMouseClickedSelectedElement = (event) => {
+      event.preventDefault();
+      if (this.elementSelected)
+        this.elementSelected.classList.add('feedback-modal-element-selected');
+      let top = this.elementSelected.getBoundingClientRect().top;
+      this.elementSelected.style.top = `${top + window.pageYOffset}px`;
+      const clonedElementSelected = this.elementSelected.cloneNode(true);
+      document.body.appendChild(clonedElementSelected);
+      this.elementSelected.style.top = `${top}px`;
+      this.encodedScreenshot = domToImage.toPng(document.body, { cacheBust: true })
+        .then(function (dataUrl) {
+        document.body.removeChild(clonedElementSelected);
+        return dataUrl;
+      })
+        .catch(function (error) {
+        console.log(error);
+        return "";
+      });
+      const page = document.getElementsByTagName('html')[0];
+      page.style.overflow = 'hidden';
+      this.hasSelectedElement = true;
+      this.overlay.style.display = 'block';
+      this.showModal = true;
+    };
+    this.sending = false;
+    this.formMessage = '';
+    this.formEmail = '';
+    this.formSuccess = false;
+    this.formError = false;
+    this.formErrorStatus = 500;
+    this.encodedScreenshot = undefined;
+    this.modalTitle = 'Share your feedback';
+    this.modalTitleSuccess = 'Thanks for your feedback!';
+    this.modalTitleError = "Oops! We didn't receive your feedback. Please try again later.";
+    this.modalTitleError403 = "Oops! The request URL does not match the one defined in PushFeedback for this project.";
+    this.modalTitleError404 = "Oops! We could not find the provided project id in PushFeedback.";
+    this.modalPosition = 'center';
+    this.sendButtonText = 'Send';
+    this.project = '';
+    this.screenshotButtonTooltipText = 'Take a Screenshot';
+    this.screenshotTopbarText = 'SELECT AN ELEMENT ON THE PAGE';
+    this.email = '';
+    this.emailPlaceholder = 'Email address (optional)';
+    this.messagePlaceholder = 'How could this page be more helpful?';
+    this.showModal = false;
+    this.showScreenshotMode = false;
+    this.hasSelectedElement = false;
+    this.hideScreenshotButton = false;
+  }
+  componentWillLoad() {
+    this.formEmail = this.email;
+  }
+  resetOverflow() {
+    const page = document.getElementsByTagName('html')[0];
+    page.style.overflow = 'inherit';
+  }
+  handleMessageInput(event) {
+    this.formMessage = event.target.value;
+  }
+  handleEmailInput(event) {
+    this.formEmail = event.target.value;
+  }
+  render() {
+    return (index.h("div", { class: "feedback-modal-wrapper" }, this.showScreenshotMode && (index.h("div", { class: "feedback-modal-screenshot", ref: el => (this.screenshotModal = el), onMouseMove: this.handleMouseOverScreenShot }, index.h("div", { class: "feedback-modal-screenshot-element-selected", ref: el => (this.elementSelected = el), onClick: this.handleMouseClickedSelectedElement }), index.h("div", { class: "top-side", ref: el => (this.topSide = el) }), index.h("div", { class: "left-side", ref: el => (this.leftSide = el) }), index.h("div", { class: "bottom-side", ref: el => (this.bottomSide = el) }), index.h("div", { class: "right-side", ref: el => (this.rightSide = el) }), index.h("div", { class: "feedback-modal-screenshot-header", onClick: this.closeScreenShot }, index.h("span", null, this.screenshotTopbarText), index.h("span", { class: "feedback-modal-screenshot-close" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), index.h("div", { class: "feedback-modal-screenshot-overlay", ref: el => (this.overlay = el) }))), this.showModal && (index.h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition}`, ref: el => (this.modalContent = el) }, index.h("div", { class: "feedback-modal-header" }, !this.formSuccess && !this.formError ? (index.h("span", null, this.modalTitle)) : this.formSuccess ? (index.h("span", { class: "text-center" }, this.modalTitleSuccess)) : this.formError && this.formErrorStatus == 500 ? (index.h("span", { class: "text-center" }, this.modalTitleError)) : this.formError && this.formErrorStatus == 403 ? (index.h("span", { class: "text-center" }, this.modalTitleError403)) : this.formError && this.formErrorStatus == 404 ? (index.h("span", { class: "text-center" }, this.modalTitleError404)) : index.h("span", null), index.h("button", { class: "feedback-modal-close", onClick: this.close }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#ccc", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), index.h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (index.h("form", { onSubmit: this.handleSubmit }, index.h("div", { class: "feedback-modal-text" }, index.h("textarea", { placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event), required: true })), !this.email && (index.h("div", { class: "feedback-modal-email" }, index.h("input", { type: "email", placeholder: this.emailPlaceholder, onInput: (event) => this.handleEmailInput(event), value: this.formEmail }))), index.h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}` }, !this.hideScreenshotButton && (index.h("button", { type: "button", class: `button${this.encodedScreenshot ? " active" : ""}`, title: this.screenshotButtonTooltipText, onClick: this.openScreenShot, disabled: this.sending }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-camera" }, index.h("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }), index.h("circle", { cx: "12", cy: "13", r: "4" })))), index.h("button", { class: "button", type: "submit", disabled: this.sending }, this.sendButtonText)))) : index.h("span", null)), index.h("div", { class: "feedback-modal-footer" }, index.h("div", { class: "feedback-logo" }, index.h("svg", { class: "w-8 h-8", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg" }, index.h("defs", null, index.h("radialGradient", { cx: "21.152%", cy: "86.063%", fx: "21.152%", fy: "86.063%", r: "79.941%", id: "footer-logo" }, index.h("stop", { "stop-color": "#4FD1C5", offset: "0%" }), index.h("stop", { "stop-color": "#81E6D9", offset: "25.871%" }), index.h("stop", { "stop-color": "#338CF5", offset: "100%" }))), index.h("rect", { width: "32", height: "32", rx: "16", fill: "url(#footer-logo)", "fill-rule": "nonzero" })), " ", index.h("a", { href: "https://pushfeedback.com" }, "PushFeedback")))))));
+  }
+};
+FeedbackModal.style = feedbackModalCss;
+
+exports.feedback_button = FeedbackButton;
+exports.feedback_modal = FeedbackModal;