feature-pro-dialog.html

<template id="feature-pro-template">
  <style>
    @import "css/style.css";
  </style>

  <div id="feature-pro">
    <h3>This Feature is Available in TinyPilot Pro</h3>
    <a
      href="https://tinypilotkvm.com/products/tinypilot-pro?ref=tinypilot-app"
      class="btn btn-action btn-external-link"
      target="_blank"
      rel="noopener noreferer"
    >
      Learn More
    </a>
    <button id="cancel-upgrade-to-pro" type="button">Close</button>
  </div>
</template>

<script type="module">
  import { DialogClosedEvent } from "/js/events.js";

  const template = document.querySelector("#feature-pro-template");

  customElements.define(
    "feature-pro-dialog",
    class extends HTMLElement {
      connectedCallback() {
        this.attachShadow({ mode: "open" }).appendChild(
          template.content.cloneNode(true)
        );
        this._elements = {
          cancelUpgradeToPro: this.shadowRoot.getElementById(
            "cancel-upgrade-to-pro"
          ),
        };
        this._elements.cancelUpgradeToPro.addEventListener("click", () => {
          this.dispatchEvent(new DialogClosedEvent());
        });
      }
    }
  );
</script>