${message}
`;\n\n this.shadowRoot.appendChild(alert);\n }\n\n /**\n * On click of the clear filters button in no results element, dispatch a custom event to notify\n * the yotpo-filters component to clear all the filters and reset the reviews list. We don't do it\n * right here, because the yotpo-filters component handles all the logic for clearing the filters.\n */\n private onClearButtonClicked(_event: MouseEvent) {\n const event = new Event('yotpo-filter-clear-requested', { bubbles: true, composed: true });\n this.dispatchEvent(event);\n }\n\n /**\n * The modal manager inerts every section but the one holding the open modal, so while a drawer or\n * a review's photo popup in this section is open, the rest of the section stays reachable by Tab.\n * The element that owns the modal inerts its own parts beside it, and we inert the parts of our\n * shadow root beside that element.\n *\n * Only the modal manager is meant to act on this request. We listen for it here only because it\n * comes from one of our own child elements, and we run before the manager's listener on the\n * window.\n */\n private onModalOpenRequested(event: HTMLElementEventMap['modal-open-requested']) {\n // The event's path tells us which container of our template the modal sits in\n const path = event.composedPath();\n const containers = this.shadowRoot.querySelectorAll(\n 'slot[name=\"stars-breakdown\"], slot[name=\"create-form\"], .items-container');\n let modalContainer: Element;\n for (const container of containers) {\n if (path.includes(container)) {\n modalContainer = container;\n }\n }\n\n if (!modalContainer) {\n return;\n }\n\n // Anything on the path is skipped, so the review holding a photo popup stays out of inert\n const parts = this.shadowRoot.querySelectorAll(getPartsBesideSelector(modalContainer));\n for (const part of parts) {\n if (part instanceof HTMLElement && !path.includes(part)) {\n part.inert = true;\n }\n }\n\n this.modalContainer = modalContainer;\n }\n\n /**\n * Takes our parts back out of inert. We run before the modal manager's listener on the window\n * puts focus back on the element that opened the modal, and a focus call into an inert subtree\n * does nothing.\n */\n private onModalCloseRequested(_event: HTMLElementEventMap['modal-close-requested']) {\n this.releaseParts();\n }\n\n private releaseParts() {\n if (!this.modalContainer) {\n return;\n }\n\n const parts = this.shadowRoot.querySelectorAll(getPartsBesideSelector(this.modalContainer));\n for (const part of parts) {\n if (part instanceof HTMLElement) {\n part.inert = false;\n }\n }\n\n this.modalContainer = undefined;\n }\n\n private onYotpoReviewSubmitted(_event: WindowEventMap['yotpo-review-submitted']) {\n this.showAlert('Thank you! Your review has been submitted.');\n }\n\n private onReviewsFilterChange(event: HTMLElementEventMap['yotpo-reviews-filtered']) {\n // Changes happen after the initial render so always make a live API call and never use the\n // cache. This guarantees that if someone changes which reviews should be displayed, we attempt\n // to fetch those reviews from Yotpo instead.\n\n // The overlay is the only sign a click registered, since the page highlight waits for the\n // fetch, so it gets a much shorter delay than the first load. It still skips the rare instant\n // response.\n const overlay = this.shadowRoot.querySelector