UNPKG

@puzzleitc/puzzle-shell

Version:

The standard design for Puzzle tools

81 lines (79 loc) 2.53 kB
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 { customElement } from "lit/decorators/custom-element.js"; import { property } from "lit/decorators/property.js"; import { theme } from "../utils/theme"; /** * Menu action with icon and text, will be render in the menu on * mobile or in the topbar otherwise. * * @slot - Slot for the icon and the text */ let MenuAction = class MenuAction extends LitElement { constructor() { super(...arguments); this.href = "#"; } focus(options) { this.shadowRoot?.querySelector("a")?.focus(options); } render() { return html `<a href="${this.href}" role="menuitem"> <slot></slot> </a>`; } }; MenuAction.styles = [ theme, css ` a { display: flex; align-items: center; font-family: var(--pzsh-font-family); margin-top: var(--pzsh-menu-item-gap); padding: var(--pzsh-menu-item-padding-vertical) var(--pzsh-menu-item-padding-horizontal); background-color: var(--pzsh-menu-bg-alt); color: var(--pzsh-menu-fg); text-decoration: none; white-space: nowrap; } :host(:focus) a, a:hover, a:active, a:focus { color: var(--pzsh-menu-active); } ::slotted(pzsh-icon), ::slotted(svg) { margin-right: calc(var(--pzsh-spacer) / 2); } @media (min-width: ${theme.breakpoint}px) { a { margin: 0; padding: 0; color: var(--pzsh-topbar-fg); background: transparent; } :host(:focus) a, a:hover, a:active, a:focus { color: var(--pzsh-topbar-fg); text-decoration: underline; } } `, ]; __decorate([ property({ type: String }) ], MenuAction.prototype, "href", void 0); MenuAction = __decorate([ customElement("pzsh-menu-action") ], MenuAction); export { MenuAction };