@puzzleitc/puzzle-shell
Version:
The standard design for Puzzle tools
110 lines (108 loc) • 3.42 kB
JavaScript
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 { classMap } from "lit/directives/class-map.js";
import { theme } from "../utils/theme";
/**
* Component that may contain the search or the navigation (overlayed
* via absolute positioning in the pzsh-menu component), part of the
* header below the topbar.
*/
let Banner = class Banner extends LitElement {
constructor() {
super();
this.hasNav = false;
this.hasSubnav = false;
this.handleMenuNavChange = this.handleMenuNavChange.bind(this);
}
connectedCallback() {
super.connectedCallback();
document.addEventListener("pzsh-menu-nav-change", this.handleMenuNavChange, true);
}
disconnectedCallback() {
super.disconnectedCallback();
document.removeEventListener("pzsh-menu-nav-change", this.handleMenuNavChange, true);
}
handleMenuNavChange(e) {
e.stopPropagation();
if (e instanceof CustomEvent) {
const { hasNav, hasSubnav } = e.detail;
this.hasNav = hasNav;
this.hasSubnav = hasSubnav;
}
}
render() {
return html `
<slot name="tangram"></slot>
<div
class=${classMap({
content: true,
"has-nav": this.hasNav,
"has-subnav": this.hasSubnav,
})}
>
<slot name="content"></slot>
</div>
`;
}
};
Banner.styles = [
theme,
css `
:host {
display: flex;
flex-direction: column;
background-color: var(--pzsh-banner-bg);
}
::slotted([slot="tangram"]) {
display: none;
}
.content {
flex: auto;
display: flex;
align-items: center;
justify-content: center;
position: relative; /* Move in front of tangram */
}
::slotted([slot="content"]) {
flex: auto;
margin: var(--pzsh-spacer) calc(2 * var(--pzsh-spacer));
}
@media (min-width: ${theme.breakpoint}px) {
:host {
position: relative;
}
::slotted([slot="tangram"]) {
display: block;
position: absolute;
top: 0;
right: 0;
}
::slotted([slot="content"]) {
margin: calc(6 * var(--pzsh-spacer)) var(--pzsh-spacer);
}
.content.has-nav {
margin-top: var(--pzsh-nav-height);
}
.content.has-subnav {
margin-top: calc(2 * var(--pzsh-nav-height));
}
}
`,
];
__decorate([
state()
], Banner.prototype, "hasNav", void 0);
__decorate([
state()
], Banner.prototype, "hasSubnav", void 0);
Banner = __decorate([
customElement("pzsh-banner")
], Banner);
export { Banner };