@penn-libraries/web 0.3.0-dev.0 → 0.3.0-dev.1

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

@@ -15,38 +15,34 @@ export class PennlibsFeedback {
             this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';
         }
     }
+    componentDidRender() {
+        if (this.answer === 'yes' && this.yesMessageRef) {
+            this.yesMessageRef.focus();
+        }
+        else if (this.answer === 'no' && this.noMessageRef) {
+            this.noMessageRef.focus();
+        }
+    }
     handleFeedback(answer) {
         var _a;
         this.answer = answer;
         sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);
-        try {
-            // @ts-ignore
-            gtag('event', 'pennlibs_feedback_component_response', {
-                'question': FEEDBACK_QUESTION,
-                'answer': answer,
-                'url': document.location.href,
-                'title': document.title,
-                'h1': (_a = document.querySelector('h1')) === null || _a === void 0 ? void 0 : _a.textContent,
-                'design_system_component': 'pennlibs-feedback',
-            });
-        }
-        catch (error) {
-            this.error = true;
-            console.error('Google Analytics is needed for the pennlibs-feedback component to track feedback.', error);
-            sessionStorage.setItem(FEEDBACK_ERROR_STORAGE_KEY, 'true');
-        }
+        this.feedbackEvent.emit({
+            question: FEEDBACK_QUESTION,
+            answer: answer,
+            url: window.location.href,
+            pageHeading: ((_a = document.querySelector('h1')) === null || _a === void 0 ? void 0 : _a.textContent) || undefined,
+            pageTitle: document.title || undefined
+        });
     }
     render() {
-        if (this.error) {
-            return (h("div", { class: "feedback-container" }, h("p", null, "We couldn't capture your response. Please ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "contact us with your feedback"), " so that we can know more about your visit.")));
-        }
         if (this.answer === 'yes') {
-            return (h("div", { class: "feedback-container" }, h("p", null, h("strong", null, "Thank you"), " for your feedback! \uD83D\uDC4D")));
+            return (h("div", { class: "feedback-container" }, h("p", { ref: (el) => this.yesMessageRef = el, tabindex: "-1" }, h("strong", null, "Thank you"), " for your feedback! \uD83D\uDC4D")));
         }
         if (this.answer === 'no') {
-            return (h("div", { class: "feedback-container" }, h("p", null, "To ", h("strong", null, "help us improve"), ", we'd like to know more about your visit. Please ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "contact us with your feedback"), ".")));
+            return (h("div", { class: "feedback-container" }, h("p", { ref: (el) => this.noMessageRef = el, tabindex: "-1" }, "To ", h("strong", null, "help us improve"), ", we'd like to know more about your visit. Please ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "contact us with your feedback"), ".")));
         }
-        return (h("div", { class: "feedback-container" }, h("h2", null, FEEDBACK_QUESTION), h("button", { onClick: () => this.handleFeedback('yes') }, "\uD83D\uDC4D", h("span", null, "Yes")), h("button", { onClick: () => this.handleFeedback('no') }, "\uD83D\uDC4E", h("span", null, "No"))));
+        return (h("div", { class: "feedback-container" }, h("h2", null, FEEDBACK_QUESTION), h("button", { onClick: () => this.handleFeedback('yes') }, "\uD83D\uDC4D", h("span", null, "Yes", h("span", { class: "visually-hidden" }, ", I found what I need."))), h("button", { onClick: () => this.handleFeedback('no') }, "\uD83D\uDC4E", h("span", null, "No", h("span", { class: "visually-hidden" }, ", I didn't find what I need.")))));
     }
     static get is() { return "pennlibs-feedback"; }
     static get encapsulation() { return "shadow"; }
@@ -66,5 +62,23 @@ export class PennlibsFeedback {
             "answer": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "feedbackEvent",
+                "name": "pennlibs-feedback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    question: string;\n    answer: string;\n    url: string;\n    pageHeading?: string;\n    pageTitle?: string;\n  }",
+                    "resolved": "{ question: string; answer: string; url: string; pageHeading?: string; pageTitle?: string; }",
+                    "references": {}
+                }
+            }];
+    }
 }
 //# sourceMappingURL=pennlibs-feedback.js.map

package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js.map

@@ -1 +1 @@
-{"version":3,"file":"pennlibs-feedback.js","sourceRoot":"","sources":["../../../src/components/pennlibs-feedback/pennlibs-feedback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD,MAAM,oBAAoB,GAAG,0BAA0B,CAAC;AACxD,MAAM,iBAAiB,GAAG,6BAA6B,CAAC;AACxD,MAAM,0BAA0B,GAAG,yBAAyB,CAAC;AAO7D,MAAM,OAAO,gBAAgB;;qBACD,KAAK;sBACO,SAAS;;IAE/C,iBAAiB;QACf,IAAI,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAC;YACjD,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAW,CAAC;QACvE,CAAC;QAED,IAAI,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,EAAE,CAAC;YACvD,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,KAAK,MAAM,CAAC;QAC7E,CAAC;IACH,CAAC;IAED,cAAc,CAAC,MAAc;;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,cAAc,CAAC,OAAO,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;QAErD,IAAI,CAAC;YACH,aAAa;YACb,IAAI,CAAC,OAAO,EAAE,sCAAsC,EAAE;gBACpD,UAAU,EAAE,iBAAiB;gBAC7B,QAAQ,EAAE,MAAM;gBAChB,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI;gBAC7B,OAAO,EAAE,QAAQ,CAAC,KAAK;gBACvB,IAAI,EAAE,MAAA,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,0CAAE,WAAW;gBAC/C,yBAAyB,EAAE,mBAAmB;aAC/C,CAAC,CAAC;QACL,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,OAAO,CAAC,KAAK,CAAC,mFAAmF,EAAE,KAAK,CAAC,CAAC;YAC1G,cAAc,CAAC,OAAO,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;gBAC7B;;oBAA6C,SAAG,IAAI,EAAC,0CAA0C,oCAAkC;kEAA+C,CAC5K,CACP,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;YAC1B,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;gBAC7B;oBAAG,8BAA0B;uDAA0B,CACnD,CACP,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;YACzB,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;gBAC7B;;oBAAM,oCAAgC;;oBAAkD,SAAG,IAAI,EAAC,0CAA0C,oCAAkC;wBAAK,CAC7K,CACP,CAAC;QACJ,CAAC;QAED,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;YAC7B,cAAK,iBAAiB,CAAM;YAC5B,cAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;;gBAE/C,sBAAgB,CACT;YACT,cAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;;gBAE9C,qBAAe,CACR,CACL,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, State } from '@stencil/core';\n\nconst FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';\nconst FEEDBACK_QUESTION = 'Did you find what you need?';\nconst FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';\n\n@Component({\n  tag: 'pennlibs-feedback',\n  styleUrl: 'pennlibs-feedback.css',\n  shadow: true,\n})\nexport class PennlibsFeedback { \n  @State() error: boolean = false;\n  @State() answer: string | undefined = undefined;\n\n  componentWillLoad() {\n    if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {\n      this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY) as string;\n    }\n\n    if (sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY)) {\n      this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';\n    }\n  }\n\n  handleFeedback(answer: string) {\n    this.answer = answer;\n    sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);\n\n    try {\n      // @ts-ignore\n      gtag('event', 'pennlibs_feedback_component_response', {\n        'question': FEEDBACK_QUESTION,\n        'answer': answer,\n        'url': document.location.href,\n        'title': document.title,\n        'h1': document.querySelector('h1')?.textContent,\n        'design_system_component': 'pennlibs-feedback',\n      });\n    } catch (error) {\n      this.error = true;\n      console.error('Google Analytics is needed for the pennlibs-feedback component to track feedback.', error);\n      sessionStorage.setItem(FEEDBACK_ERROR_STORAGE_KEY, 'true');\n    }\n  }\n  \n  render() {\n    if (this.error) {\n      return (\n        <div class=\"feedback-container\">\n          <p>We couldn't capture your response. Please <a href=\"https://www.library.upenn.edu/contact-us\">contact us with your feedback</a> so that we can know more about your visit.</p>\n        </div>\n      );\n    }\n\n    if (this.answer === 'yes') {\n      return (\n        <div class=\"feedback-container\">\n          <p><strong>Thank you</strong> for your feedback! 👍</p>\n        </div>\n      );\n    }\n\n    if (this.answer === 'no') {\n      return (\n        <div class=\"feedback-container\">\n          <p>To <strong>help us improve</strong>, we'd like to know more about your visit. Please <a href=\"https://www.library.upenn.edu/contact-us\">contact us with your feedback</a>.</p>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"feedback-container\">\n        <h2>{FEEDBACK_QUESTION}</h2>\n        <button onClick={() => this.handleFeedback('yes')}>\n          👍\n          <span>Yes</span>\n        </button>\n        <button onClick={() => this.handleFeedback('no')}>\n          👎\n          <span>No</span>\n        </button>\n      </div>\n    )\n  }\n}\n\n"]}
+{"version":3,"file":"pennlibs-feedback.js","sourceRoot":"","sources":["../../../src/components/pennlibs-feedback/pennlibs-feedback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAEzE,MAAM,oBAAoB,GAAG,0BAA0B,CAAC;AACxD,MAAM,iBAAiB,GAAG,6BAA6B,CAAC;AACxD,MAAM,0BAA0B,GAAG,yBAAyB,CAAC;AAO7D,MAAM,OAAO,gBAAgB;;qBACD,KAAK;sBACO,SAAS;;IAkB/C,iBAAiB;QACf,IAAI,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAC;YACjD,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAW,CAAC;QACvE,CAAC;QAED,IAAI,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,EAAE,CAAC;YACvD,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,0BAA0B,CAAC,KAAK,MAAM,CAAC;QAC7E,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAChD,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;QAC7B,CAAC;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACrD,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,cAAc,CAAC,MAAc;;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,cAAc,CAAC,OAAO,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;QAErD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;YACtB,QAAQ,EAAE,iBAAiB;YAC3B,MAAM,EAAE,MAAM;YACd,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI;YACzB,WAAW,EAAE,CAAA,MAAA,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,0CAAE,WAAW,KAAI,SAAS;YACnE,SAAS,EAAE,QAAQ,CAAC,KAAK,IAAI,SAAS;SACvC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;YAC1B,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;gBAC7B,SACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,GAAG,EAA0B,EAC5D,QAAQ,EAAC,IAAI;oBAEb,8BAA0B;uDACxB,CACA,CACP,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;YACzB,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;gBAC7B,SACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAA0B,EAC3D,QAAQ,EAAC,IAAI;;oBAEV,oCAAgC;;oBAAkD,SAAG,IAAI,EAAC,0CAA0C,oCAAkC;wBACvK,CACA,CACP,CAAC;QACJ,CAAC;QAED,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;YAC7B,cAAK,iBAAiB,CAAM;YAC5B,cAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;;gBAE/C;;oBAAS,YAAM,KAAK,EAAC,iBAAiB,6BAA8B,CAAO,CACpE;YACT,cAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;;gBAE9C;;oBAAQ,YAAM,KAAK,EAAC,iBAAiB,mCAAoC,CAAO,CACzE,CACL,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, State, Event, EventEmitter } from '@stencil/core';\n\nconst FEEDBACK_STORAGE_KEY = 'pennlibs-feedback-answer';\nconst FEEDBACK_QUESTION = 'Did you find what you need?';\nconst FEEDBACK_ERROR_STORAGE_KEY = 'pennlibs-feedback-error';\n\n@Component({\n  tag: 'pennlibs-feedback',\n  styleUrl: 'pennlibs-feedback.css',\n  shadow: true,\n})\nexport class PennlibsFeedback { \n  @State() error: boolean = false;\n  @State() answer: string | undefined = undefined;\n\n  @Event({\n    eventName: 'pennlibs-feedback',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  }) feedbackEvent!: EventEmitter<{\n    question: string;\n    answer: string;\n    url: string;\n    pageHeading?: string;\n    pageTitle?: string;\n  }>;\n\n  private yesMessageRef?: HTMLParagraphElement;\n  private noMessageRef?: HTMLParagraphElement;\n\n  componentWillLoad() {\n    if (sessionStorage.getItem(FEEDBACK_STORAGE_KEY)) {\n      this.answer = sessionStorage.getItem(FEEDBACK_STORAGE_KEY) as string;\n    }\n\n    if (sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY)) {\n      this.error = sessionStorage.getItem(FEEDBACK_ERROR_STORAGE_KEY) === 'true';\n    }\n  }\n\n  componentDidRender() {\n    if (this.answer === 'yes' && this.yesMessageRef) {\n      this.yesMessageRef.focus();\n    } else if (this.answer === 'no' && this.noMessageRef) {\n      this.noMessageRef.focus();\n    }\n  }\n\n  handleFeedback(answer: string) {\n    this.answer = answer;\n    sessionStorage.setItem(FEEDBACK_STORAGE_KEY, answer);\n    \n    this.feedbackEvent.emit({\n      question: FEEDBACK_QUESTION,\n      answer: answer,\n      url: window.location.href,\n      pageHeading: document.querySelector('h1')?.textContent || undefined,\n      pageTitle: document.title || undefined\n    });\n  }\n  \n  render() {\n    if (this.answer === 'yes') {\n      return (\n        <div class=\"feedback-container\">\n          <p \n            ref={(el) => this.yesMessageRef = el as HTMLParagraphElement}\n            tabindex=\"-1\"\n          >\n            <strong>Thank you</strong> for your feedback! 👍\n          </p>\n        </div>\n      );\n    }\n\n    if (this.answer === 'no') {\n      return (\n        <div class=\"feedback-container\">\n          <p \n            ref={(el) => this.noMessageRef = el as HTMLParagraphElement}\n            tabindex=\"-1\"\n          >\n            To <strong>help us improve</strong>, we'd like to know more about your visit. Please <a href=\"https://www.library.upenn.edu/contact-us\">contact us with your feedback</a>.\n          </p>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"feedback-container\">\n        <h2>{FEEDBACK_QUESTION}</h2>\n        <button onClick={() => this.handleFeedback('yes')}>\n          👍\n          <span>Yes<span class=\"visually-hidden\">, I found what I need.</span></span>\n        </button>\n        <button onClick={() => this.handleFeedback('no')}>\n          👎\n          <span>No<span class=\"visually-hidden\">, I didn't find what I need.</span></span>\n        </button>\n      </div>\n    )\n  }\n}\n\n"]}

package/dist/collection/index.js

@@ -1,2 +1,4 @@
+import { setAssetPath } from "@stencil/core";
 export * from './components';
+export { setAssetPath };
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import { setAssetPath } from '@stencil/core';\n\nexport * from './components';\nexport { setAssetPath };\n"]}

package/dist/{web/p-b4bf0e55.js → esm/index-453c2e4e.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'web';
-const BUILD = /* web */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: false };
+const BUILD = /* web */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: false };
 
 /*
  Stencil Client Platform v4.20.0 | MIT Licensed | https://stenciljs.com
@@ -137,6 +137,7 @@ var getAssetPath = (path) => {
   const assetUrl = new URL(path, plt.$resourcesUrl$);
   return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
 };
+var setAssetPath = (path) => plt.$resourcesUrl$ = path;
 
 // src/utils/constants.ts
 var EMPTY_OBJ = {};
@@ -292,6 +293,21 @@ var parsePropertyValue = (propValue, propType) => {
   return propValue;
 };
 var getElement = (ref) => getHostRef(ref).$hostElement$ ;
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: !!(flags & 4 /* Bubbles */),
+        composed: !!(flags & 2 /* Composed */),
+        cancelable: !!(flags & 1 /* Cancellable */),
+        detail
+      });
+    }
+  };
+};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -405,7 +421,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
           }
         }
       }
-    } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+    } else if (memberName === "key") ; else if (memberName === "ref") {
+      if (newValue) {
+        newValue(elm);
+      }
+    } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
       if (memberName[2] === "-") {
         memberName = memberName.slice(3);
       } else if (isMemberInElement(win, ln)) {
@@ -557,6 +577,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -691,6 +712,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     elm.data = text;
   }
 };
+var nullifyVNodeRefs = (vNode) => {
+  {
+    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+  }
+};
 var insertBefore = (parent, newNode, reference) => {
   const inserted = parent == null ? void 0 : parent.insertBefore(newNode, reference);
   return inserted;
@@ -822,7 +849,11 @@ var postUpdateComponent = (hostRef) => {
   const tagName = hostRef.$cmpMeta$.$tagName$;
   const elm = hostRef.$hostElement$;
   const endPostUpdate = createTime("postUpdate", tagName);
+  const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
+  {
+    safeCall(instance, "componentDidRender");
+  }
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
@@ -1233,6 +1264,6 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { getElement as a, bootstrapLazy as b, getAssetPath as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { setAssetPath as a, bootstrapLazy as b, createEvent as c, getElement as d, getAssetPath as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=p-b4bf0e55.js.map
+//# sourceMappingURL=index-453c2e4e.js.map