@puzzleitc/puzzle-shell/dist/components/Topbar.js

The standard design for Puzzle tools

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, css, html } from "lit";
import { state } from "lit/decorators.js";
import { customElement } from "lit/decorators/custom-element.js";
import { property } from "lit/decorators/property.js";
import { theme } from "../utils/theme";
import "./Icon";
/**
 * Top application bar that contains the logo and optional
 * application-wide actions that are rendered via the menu
 * component. The topbar is coupled with the menu component via
 * events.
 *
 * @slot Slot for the logo SVG graphic
 * @fires pzsh-menu-toggle
 */
let Topbar = class Topbar extends LitElement {
    constructor() {
        super();
        this.menuAvailable = false;
        this.menuOpen = false;
        this.href = "";
        this.handleMenuChange = this.handleMenuChange.bind(this);
    }
    connectedCallback() {
        super.connectedCallback();
        document.addEventListener("pzsh-menu-change", this.handleMenuChange, true);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        document.removeEventListener("pzsh-menu-change", this.handleMenuChange, true);
    }
    handleMenuChange(e) {
        e.stopPropagation();
        if (e instanceof CustomEvent) {
            const { available, open } = e.detail;
            this.menuAvailable = available;
            this.menuOpen = open;
        }
    }
    toggleMenu() {
        this.dispatchEvent(new CustomEvent("pzsh-menu-toggle"));
    }
    renderMenuButton() {
        if (this.menuAvailable) {
            const icon = this.menuOpen ? "multiply" : "bars";
            return html `<button
        type="button"
        class="menu-button"
        @click=${this.toggleMenu}
        aria-expanded=${this.menuOpen}
        aria-label="Menu"
      >
        <pzsh-icon name=${icon}></pzsh-icon>
      </button>`;
        }
        return null;
    }
    renderLogo() {
        return this.href
            ? html `<a class="logo-link" href=${this.href}>
          <slot></slot>
        </a>`
            : html `<slot></slot>`;
    }
    render() {
        return html `${this.renderLogo()} ${this.renderMenuButton()} `;
    }
};
Topbar.styles = [
    theme,
    css `
      :host {
        display: flex;
        align-items: center;
        height: var(--pzsh-topbar-height);
        padding: calc(var(--pzsh-spacer))
          var(--pzsh-page-padding-horizontal-mobile);
        background: var(--pzsh-topbar-bg);
      }

      a.logo-link {
        display: flex; /* Fix vertical centering */
      }

      .menu-button {
        margin-left: auto;
        padding: var(--pzsh-spacer);
        border: 0;
        border-radius: 3px;
        background-color: transparent;
        color: var(--pzsh-topbar-fg);
        cursor: pointer;
      }
      .menu-button:hover {
        background-color: var(--pzsh-topbar-bg-alt);
      }
      .menu-button pzsh-icon {
        display: block;
      }

      @media (max-width: ${theme.breakpoint - 1}px) {
        :host {
          margin-bottom: 0 !important;
        }
      }

      @media (min-width: ${theme.breakpoint}px) {
        :host {
          padding-left: var(--pzsh-page-padding-horizontal-desktop);
          padding-right: var(--pzsh-page-padding-horizontal-desktop);
        }

        .menu-button {
          display: none;
        }
      }
    `,
];
__decorate([
    state()
], Topbar.prototype, "menuAvailable", void 0);
__decorate([
    state()
], Topbar.prototype, "menuOpen", void 0);
__decorate([
    property({ type: String })
], Topbar.prototype, "href", void 0);
Topbar = __decorate([
    customElement("pzsh-topbar")
], Topbar);
export { Topbar };