@nysds/nys-backtotop/dist/nys-backtotop.js

The Back To Top component from the NYS Design System.

import { LitElement as h, unsafeCSS as u, html as p } from "lit";
import { property as c, state as d } from "lit/decorators.js";
/*!
   * █▄  █  █   █  █▀▀▀█  █▀▀▄  █▀▀▀█
   * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
   * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
   *
   * Back to top Component v1.18.1
   * Part of the New York State Design System
   * Repository: https://github.com/its-hcd/nysds
   * License: MIT
*/
const b = ".nys-backtotop{--_nys-button-border-radius: var(--nys-radius-round, 1776px);--_nys-button-padding--y: var(--nys-space-100, 8px);--_nys-button-padding--x: var(--nys-space-200, 16px);position:fixed;bottom:1rem;right:1rem;z-index:9999;display:none}.left{left:1rem;right:auto}.visible{display:inline-flex}";
var m = Object.defineProperty, o = (r, e, t, f) => {
  for (var s = void 0, n = r.length - 1, a; n >= 0; n--)
    (a = r[n]) && (s = a(e, t, s) || s);
  return s && m(e, t, s), s;
};
const l = class l extends h {
  /**
   * Lifecycle methods
   * --------------------------------------------------------------------------
   */
  constructor() {
    super(), this.position = "right", this.visible = !1, this.isMobile = !1, this.forceVisible = !1, this._handleScroll = this._handleScroll.bind(this), this._handleResize = this._handleResize.bind(this), this.mediaQuery = window.matchMedia("(max-width: 480px)");
  }
  connectedCallback() {
    super.connectedCallback(), this.forceVisible = this.hasAttribute("visible"), window.addEventListener("scroll", this._handleScroll), this.mediaQuery.addEventListener("change", this._handleResize), this._handleResize();
  }
  disconnectedCallback() {
    window.removeEventListener("scroll", this._handleScroll), this.mediaQuery.removeEventListener("change", this._handleResize), super.disconnectedCallback();
  }
  /**
   * Functions
   * --------------------------------------------------------------------------
   */
  _handleScroll() {
    if (this.forceVisible) return;
    const e = window.innerHeight, t = document.documentElement.scrollHeight;
    this.visible = t >= e * 4 && window.scrollY > e * 1.5;
  }
  _scrollToTop() {
    window.scrollTo({ top: 0, behavior: "smooth" });
    const e = () => {
      window.removeEventListener("scroll", e), this._moveFocusToTop();
    };
    window.addEventListener("scroll", e, { once: !0 });
  }
  _moveFocusToTop() {
    const e = document.querySelector("main");
    if (e) {
      e.hasAttribute("tabindex") || e.setAttribute("tabindex", "-1"), e.focus();
      return;
    }
    const t = document.querySelector("h1, h2");
    if (t) {
      t.hasAttribute("tabindex") || t.setAttribute("tabindex", "-1"), t.focus();
      return;
    }
    document.documentElement.focus();
  }
  _handleResize() {
    this.isMobile = this.mediaQuery.matches;
  }
  render() {
    const e = [
      "nys-backtotop",
      this.position,
      this.visible ? "visible" : ""
    ].filter(Boolean).join(" ");
    return p`<nys-button
      id="nys-backtotop"
      prefixIcon="chevron_up"
      variant="outline"
      label="Back to top"
      size="sm"
      class="${e}"
      ?circle=${this.isMobile}
      @nys-click=${this._scrollToTop}
    ></nys-button>`;
  }
};
l.styles = u(b);
let i = l;
o([
  c({ type: String })
], i.prototype, "position");
o([
  c({ type: Boolean, reflect: !0 })
], i.prototype, "visible");
o([
  d()
], i.prototype, "isMobile");
o([
  d()
], i.prototype, "forceVisible");
customElements.get("nys-backtotop") || customElements.define("nys-backtotop", i);
export {
  i as NysBacktotop
};
//# sourceMappingURL=nys-backtotop.js.map