pushfeedback 0.0.1 → 0.0.3

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

@@ -2,14 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ecaab1ef.js');
+const index = require('./index-df770657.js');
 
-const feedbackButtonCss = ".feedback-button-content{cursor:pointer;background-color:var(--feedback-button-bg-color);border:1px solid var(--feedback-button-border-color);border-radius:var(--feedback-button-border-radius);color:var(--feedback-button-text-color);cursor:pointer;font-size:var(--feedback-modal-button-font-size);padding:5px 10px}.feedback-button-content:hover{color:var(--feedback-button-text-color-active);background-color:var(--feedback-button-bg-color-active);border:1px solid var(--feedback-button-border-color-active)}";
+const feedbackButtonCss = ".feedback-button-content{cursor:pointer}.feedback-button-content--light{background-color:var(--feedback-button-bg-color);border:1px solid var(--feedback-button-border-color);border-radius:var(--feedback-button-border-radius);color:var(--feedback-button-text-color);padding:5px 10px;font-size:var(--feedback-modal-button-font-size)}.feedback-button-content--light:hover{color:var(--feedback-button-text-color-active);background-color:var(--feedback-button-bg-color-active);border:1px solid var(--feedback-button-border-color-active)}";
 
 const FeedbackButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.feedbackModal = undefined;
     this.modalTitle = 'Share your feedback';
     this.successModalTitle = 'Thanks for your feedback!';
     this.errorModalTitle = "Oops! We didn't receive your feedback. Please try again later.";
@@ -21,15 +20,11 @@ const FeedbackButton = class {
     this.email = '';
     this.emailPlaceholder = 'Email address (optional)';
     this.messagePlaceholder = 'How could this page be more helpful?';
+    this.buttonStyle = 'default';
   }
-  componentDidLoad() {
-    this.feedbackModal.showModal = false;
-  }
-  showModal() {
-    this.feedbackModal.showModal = true;
-  }
-  render() {
-    const propKeys = [
+  connectedCallback() {
+    this.feedbackModal = document.createElement('feedback-modal');
+    const props = [
       'modalTitle',
       'successModalTitle',
       'errorModalTitle',
@@ -41,13 +36,20 @@ const FeedbackButton = class {
       'email',
       'emailPlaceholder',
       'messagePlaceholder',
-      'showModal',
     ];
-    let feedbackModalProps = {};
-    propKeys.forEach((key) => {
-      feedbackModalProps[key] = this[key];
+    props.forEach(prop => {
+      this.feedbackModal[prop] = this[prop];
     });
-    return (index.h(index.Host, null, index.h("a", { class: "feedback-button-content", onClick: () => this.showModal() }, index.h("slot", null)), index.h("feedback-modal", Object.assign({}, feedbackModalProps, { ref: (el) => this.feedbackModal = el }))));
+    document.body.appendChild(this.feedbackModal);
+  }
+  disconnectedCallback() {
+    document.body.removeChild(this.feedbackModal);
+  }
+  showModal() {
+    this.feedbackModal.showModal = true;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle}`, onClick: () => this.showModal() }, index.h("slot", null))));
   }
 };
 FeedbackButton.style = feedbackButtonCss;

package/dist/cjs/{index-ecaab1ef.js → index-df770657.js}

@@ -49,7 +49,6 @@ const uniqueTime = (key, measureText) => {
     }
 };
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
-const XLINK_NS = 'http://www.w3.org/1999/xlink';
 /**
  * Default style mode id
  */
@@ -69,6 +68,18 @@ const isComplexType = (o) => {
     o = typeof o;
     return o === 'object' || o === 'function';
 };
+/**
+ * Helper method for querying a `meta` tag that contains a nonce value
+ * out of a DOM's head.
+ *
+ * @param doc The DOM containing the `head` to query against
+ * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
+ * exists or the tag has no content.
+ */
+function queryNonceMetaTagContent(doc) {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;
+}
 /**
  * Production h() function based on Preact by
  * Jason Miller (@developit)
@@ -77,12 +88,10 @@ const isComplexType = (o) => {
  *
  * Modified for Stencil's compiler and vdom
  */
-// const stack: any[] = [];
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
-    let key = null;
     let simple = false;
     let lastSimple = false;
     const vNodeChildren = [];
@@ -110,10 +119,6 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
-        // normalize class / classname attributes
-        if (vnodeData.key) {
-            key = vnodeData.key;
-        }
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -131,11 +136,16 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
-    {
-        vnode.$key$ = key;
-    }
     return vnode;
 };
+/**
+ * A utility function for creating a virtual DOM node from a tag and some
+ * possible text content.
+ *
+ * @param tag the tag for this element
+ * @param text possible text content for the node
+ * @returns a newly-minted virtual DOM node
+ */
 const newVNode = (tag, text) => {
     const vnode = {
         $flags$: 0,
@@ -147,12 +157,15 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
-    {
-        vnode.$key$ = null;
-    }
     return vnode;
 };
 const Host = {};
+/**
+ * Check whether a given node is a Host node or not
+ *
+ * @param node the virtual DOM node to check
+ * @returns whether it's a Host node or not
+ */
 const isHost = (node) => node && node.$tag$ === Host;
 /**
  * Parse a new property value for a given property type.
@@ -227,6 +240,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
     styles.set(scopeId, style);
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+    var _a;
     let scopeId = getScopeId(cmpMeta);
     const style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
@@ -246,6 +260,11 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
                         styleElm = doc.createElement('style');
                         styleElm.innerHTML = style;
                     }
+                    // Apply CSP nonce to the style tag if it exists
+                    const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+                    if (nonce != null) {
+                        styleElm.setAttribute('nonce', nonce);
+                    }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
                 if (appliedStyles) {
@@ -298,33 +317,6 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
-        else if (memberName === 'style') {
-            // update style attribute, css properties and values
-            {
-                for (const prop in oldValue) {
-                    if (!newValue || newValue[prop] == null) {
-                        if (prop.includes('-')) {
-                            elm.style.removeProperty(prop);
-                        }
-                        else {
-                            elm.style[prop] = '';
-                        }
-                    }
-                }
-            }
-            for (const prop in newValue) {
-                if (!oldValue || newValue[prop] !== oldValue[prop]) {
-                    if (prop.includes('-')) {
-                        elm.style.setProperty(prop, newValue[prop]);
-                    }
-                    else {
-                        elm.style[prop] = newValue[prop];
-                    }
-                }
-            }
-        }
-        else if (memberName === 'key')
-            ;
         else if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
@@ -391,36 +383,16 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
                 catch (e) { }
             }
-            /**
-             * Need to manually update attribute if:
-             * - memberName is not an attribute
-             * - if we are rendering the host element in order to reflect attribute
-             * - if it's a SVG, since properties might not work in <svg>
-             * - if the newValue is null/undefined or 'false'.
-             */
-            let xlink = false;
-            {
-                if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
-                    memberName = ln;
-                    xlink = true;
-                }
-            }
             if (newValue == null || newValue === false) {
                 if (newValue !== false || elm.getAttribute(memberName) === '') {
-                    if (xlink) {
-                        elm.removeAttributeNS(XLINK_NS, memberName);
-                    }
-                    else {
+                    {
                         elm.removeAttribute(memberName);
                     }
                 }
             }
             else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
                 newValue = newValue === true ? '' : newValue;
-                if (xlink) {
-                    elm.setAttributeNS(XLINK_NS, memberName, newValue);
-                }
-                else {
+                {
                     elm.setAttribute(memberName, newValue);
                 }
             }
@@ -514,6 +486,21 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     return elm;
 };
+/**
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
+ * add them to the DOM in the appropriate place.
+ *
+ * @param parentElm the DOM node which should be used as a parent for the new
+ * DOM nodes
+ * @param before a child of the `parentElm` which the new children should be
+ * inserted before (optional)
+ * @param parentVNode the parent virtual DOM node
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
+ * @param startIdx the index in the child virtual DOM nodes at which to start
+ * creating DOM nodes (inclusive)
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
+ * creating DOM nodes (inclusive)
+ */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
     let containerElm = (parentElm);
     let childNode;
@@ -530,6 +517,19 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
         }
     }
 };
+/**
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
+ * This can be used to, for instance, clean up after a list of children which
+ * should no longer be shown.
+ *
+ * This function also handles some of Stencil's slot relocation logic.
+ *
+ * @param vnodes a list of virtual DOM nodes to remove
+ * @param startIdx the index at which to start removing nodes (inclusive)
+ * @param endIdx the index at which to stop removing nodes (inclusive)
+ * @param vnode a VNode
+ * @param elm an element
+ */
 const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
@@ -611,8 +611,6 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
-    let idxInOld = 0;
-    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -620,7 +618,6 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
-    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // VNode might have been moved left
@@ -687,41 +684,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
-            // Here we do some checks to match up old and new nodes based on the
-            // `$key$` attribute, which is set by putting a `key="my-key"` attribute
-            // in the JSX for a DOM element in the implementation of a Stencil
-            // component.
-            //
-            // First we check to see if there are any nodes in the array of old
-            // children which have the same key as the first node in the new
-            // children.
-            idxInOld = -1;
             {
-                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
-                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
-                        idxInOld = i;
-                        break;
-                    }
-                }
-            }
-            if (idxInOld >= 0) {
-                // We found a node in the old children which matches up with the first
-                // node in the new children! So let's deal with that
-                elmToMove = oldCh[idxInOld];
-                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
-                    // the tag doesn't match so we'll need a new DOM element
-                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
-                }
-                else {
-                    patch(elmToMove, newStartVnode);
-                    // invalidate the matching old node so that we won't try to update it
-                    // again later on
-                    oldCh[idxInOld] = undefined;
-                    node = elmToMove.$elm$;
-                }
-                newStartVnode = newCh[++newStartIdx];
-            }
-            else {
                 // We either didn't find an element in the old children that matches
                 // the key of the first new child OR the build is not using `key`
                 // attributes at all. In either case we need to create a new element
@@ -759,7 +722,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * So, in other words, if `key` attrs are not set on VNodes which may be
  * changing order within a `children` array or something along those lines then
- * we could obtain a false positive and then have to do needless re-rendering.
+ * we could obtain a false negative and then have to do needless re-rendering
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
@@ -769,10 +733,7 @@ const isSameVnode = (leftVNode, rightVNode) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (leftVNode.$tag$ === rightVNode.$tag$) {
-        // this will be set if components in the build have `key` attrs set on them
-        {
-            return leftVNode.$key$ === rightVNode.$key$;
-        }
+        return true;
     }
     return false;
 };
@@ -840,6 +801,18 @@ const callNodeRefs = (vNode) => {
         vNode.$children$ && vNode.$children$.map(callNodeRefs);
     }
 };
+/**
+ * The main entry point for Stencil's virtual DOM-based rendering engine
+ *
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
+ * function will handle creating a virtual DOM tree with a single root, patching
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
+ * relocation, and reflecting attributes.
+ *
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
+ * the DOM node into which it should be rendered.
+ * @param renderFnResults the virtual DOM nodes to be rendered
+ */
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
@@ -956,7 +929,6 @@ const postUpdateComponent = (hostRef) => {
     const tagName = hostRef.$cmpMeta$.$tagName$;
     const elm = hostRef.$hostElement$;
     const endPostUpdate = createTime('postUpdate', tagName);
-    const instance = hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
     if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
@@ -964,9 +936,6 @@ const postUpdateComponent = (hostRef) => {
             // DOM WRITE!
             addHydratedFlag(elm);
         }
-        {
-            safeCall(instance, 'componentDidLoad');
-        }
         endPostUpdate();
         {
             hostRef.$onReadyResolve$(elm);
@@ -1187,6 +1156,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
             }
             endNewInstance();
+            fireConnectedCallback(hostRef.$lazyInstance$);
         }
         if (Cstr.style) {
             // this component has styles but we haven't registered them yet
@@ -1215,6 +1185,11 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
         schedule();
     }
 };
+const fireConnectedCallback = (instance) => {
+    {
+        safeCall(instance, 'connectedCallback');
+    }
+};
 const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -1253,15 +1228,24 @@ const connectedCallback = (elm) => {
                 initializeComponent(elm, hostRef, cmpMeta);
             }
         }
+        else {
+            // fire off connectedCallback() on component instance
+            fireConnectedCallback(hostRef.$lazyInstance$);
+        }
         endConnected();
     }
 };
 const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
-        getHostRef(elm);
+        const hostRef = getHostRef(elm);
+        const instance = hostRef.$lazyInstance$ ;
+        {
+            safeCall(instance, 'disconnectedCallback');
+        }
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
+    var _a;
     const endBootstrap = createTime();
     const cmpTags = [];
     const exclude = options.exclude || [];
@@ -1338,6 +1322,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     {
         visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
         visibilityStyle.setAttribute('data-styles', '');
+        // Apply CSP nonce to the style tag if it exists
+        const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+        if (nonce != null) {
+            visibilityStyle.setAttribute('nonce', nonce);
+        }
         head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
@@ -1353,6 +1342,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Fallback appLoad event
     endBootstrap();
 };
+/**
+ * Assigns the given value to the nonce property on the runtime platform object.
+ * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
+ * @param nonce The value to be assigned to the platform nonce property.
+ * @returns void
+ */
+const setNonce = (nonce) => (plt.$nonce$ = nonce);
 const hostRefs = /*@__PURE__*/ new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1464,3 +1460,4 @@ exports.bootstrapLazy = bootstrapLazy;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
+exports.setNonce = setNonce;

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ecaab1ef.js');
+const index = require('./index-df770657.js');
 
 /*
- Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,8 +14,9 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"feedbackModal":[32]}],[1,"feedback-modal",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"hasSelectedElement":[1540,"has-selected-element"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formError":[32],"encodedScreenshot":[32]}]]]], options);
+  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"buttonStyle":[1,"button-style"]}],[1,"feedback-modal",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"hasSelectedElement":[1540,"has-selected-element"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formError":[32],"encodedScreenshot":[32]}]]]], options);
   });
 };
 
+exports.setNonce = index.setNonce;
 exports.defineCustomElements = defineCustomElements;

package/dist/cjs/pushfeedback.cjs.js

@@ -1,9 +1,11 @@
 'use strict';
 
-const index = require('./index-ecaab1ef.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-df770657.js');
 
 /*
- Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('pushfeedback.cjs.js', document.baseURI).href));
@@ -15,5 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"feedbackModal":[32]}],[1,"feedback-modal",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"hasSelectedElement":[1540,"has-selected-element"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formError":[32],"encodedScreenshot":[32]}]]]], options);
+  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"buttonStyle":[1,"button-style"]}],[1,"feedback-modal",{"modalTitle":[1,"modal-title"],"successModalTitle":[1,"success-modal-title"],"errorModalTitle":[1,"error-modal-title"],"modalPosition":[1,"modal-position"],"sendButtonText":[1,"send-button-text"],"project":[1],"screenshotButtonTooltipText":[1,"screenshot-button-tooltip-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"email":[1],"emailPlaceholder":[1,"email-placeholder"],"messagePlaceholder":[1,"message-placeholder"],"showModal":[1540,"show-modal"],"showScreenshotMode":[1540,"show-screenshot-mode"],"hasSelectedElement":[1540,"has-selected-element"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formError":[32],"encodedScreenshot":[32]}]]]], options);
 });
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,12 +1,12 @@
 {
   "entries": [
-    "./components/feedback-modal/feedback-modal.js",
-    "./components/feedback-button/feedback-button.js"
+    "./components/feedback-button/feedback-button.js",
+    "./components/feedback-modal/feedback-modal.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.20.0",
-    "typescriptVersion": "4.8.4"
+    "version": "2.22.3",
+    "typescriptVersion": "4.9.4"
   },
   "collections": [],
   "bundles": []

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

@@ -1,15 +1,17 @@
 .feedback-button-content {
   cursor: pointer;
+}
+
+.feedback-button-content--light{
   background-color: var(--feedback-button-bg-color);
   border: 1px solid var(--feedback-button-border-color);
   border-radius: var(--feedback-button-border-radius);
   color: var(--feedback-button-text-color);
-  cursor: pointer;
-  font-size: var(--feedback-modal-button-font-size);
   padding: 5px 10px;
+  font-size: var(--feedback-modal-button-font-size);
 }
 
-.feedback-button-content:hover {
+.feedback-button-content--light:hover {
   color: var(--feedback-button-text-color-active);
   background-color: var(--feedback-button-bg-color-active);
   border: 1px solid var(--feedback-button-border-color-active);

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

@@ -1,7 +1,6 @@
 import { Host, h } from '@stencil/core';
 export class FeedbackButton {
   constructor() {
-    this.feedbackModal = undefined;
     this.modalTitle = 'Share your feedback';
     this.successModalTitle = 'Thanks for your feedback!';
     this.errorModalTitle = "Oops! We didn't receive your feedback. Please try again later.";
@@ -13,15 +12,11 @@ export class FeedbackButton {
     this.email = '';
     this.emailPlaceholder = 'Email address (optional)';
     this.messagePlaceholder = 'How could this page be more helpful?';
+    this.buttonStyle = 'default';
   }
-  componentDidLoad() {
-    this.feedbackModal.showModal = false;
-  }
-  showModal() {
-    this.feedbackModal.showModal = true;
-  }
-  render() {
-    const propKeys = [
+  connectedCallback() {
+    this.feedbackModal = document.createElement('feedback-modal');
+    const props = [
       'modalTitle',
       'successModalTitle',
       'errorModalTitle',
@@ -33,13 +28,20 @@ export class FeedbackButton {
       'email',
       'emailPlaceholder',
       'messagePlaceholder',
-      'showModal',
     ];
-    let feedbackModalProps = {};
-    propKeys.forEach((key) => {
-      feedbackModalProps[key] = this[key];
+    props.forEach(prop => {
+      this.feedbackModal[prop] = this[prop];
     });
-    return (h(Host, null, h("a", { class: "feedback-button-content", onClick: () => this.showModal() }, h("slot", null)), h("feedback-modal", Object.assign({}, feedbackModalProps, { ref: (el) => this.feedbackModal = el }))));
+    document.body.appendChild(this.feedbackModal);
+  }
+  disconnectedCallback() {
+    document.body.removeChild(this.feedbackModal);
+  }
+  showModal() {
+    this.feedbackModal.showModal = true;
+  }
+  render() {
+    return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle}`, onClick: () => this.showModal() }, h("slot", null))));
   }
   static get is() { return "feedback-button"; }
   static get encapsulation() { return "shadow"; }
@@ -252,12 +254,25 @@ export class FeedbackButton {
         "attribute": "message-placeholder",
         "reflect": false,
         "defaultValue": "'How could this page be more helpful?'"
+      },
+      "buttonStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-style",
+        "reflect": false,
+        "defaultValue": "'default'"
       }
     };
   }
-  static get states() {
-    return {
-      "feedbackModal": {}
-    };
-  }
 }