@puzzleitc/puzzle-shell
Version:
The standard design for Puzzle tools
1,373 lines (1,339 loc) • 67 kB
JavaScript
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const R = globalThis, at = R.ShadowRoot && (R.ShadyCSS === void 0 || R.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, it = Symbol(), gt = /* @__PURE__ */ new WeakMap();
let At = class {
constructor(t, s, r) {
if (this._$cssResult$ = !0, r !== it) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
this.cssText = t, this.t = s;
}
get styleSheet() {
let t = this.o;
const s = this.t;
if (at && t === void 0) {
const r = s !== void 0 && s.length === 1;
r && (t = gt.get(s)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), r && gt.set(s, t));
}
return t;
}
toString() {
return this.cssText;
}
};
const Rt = (e) => new At(typeof e == "string" ? e : e + "", void 0, it), u = (e, ...t) => {
const s = e.length === 1 ? e[0] : t.reduce((r, o, n) => r + ((a) => {
if (a._$cssResult$ === !0) return a.cssText;
if (typeof a == "number") return a;
throw Error("Value passed to 'css' function must be a 'css' function result: " + a + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
})(o) + e[n + 1], e[0]);
return new At(s, e, it);
}, Bt = (e, t) => {
if (at) e.adoptedStyleSheets = t.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
else for (const s of t) {
const r = document.createElement("style"), o = R.litNonce;
o !== void 0 && r.setAttribute("nonce", o), r.textContent = s.cssText, e.appendChild(r);
}
}, mt = at ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((t) => {
let s = "";
for (const r of t.cssRules) s += r.cssText;
return Rt(s);
})(e) : e;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const { is: It, defineProperty: qt, getOwnPropertyDescriptor: Vt, getOwnPropertyNames: Wt, getOwnPropertySymbols: Kt, getPrototypeOf: Ft } = Object, J = globalThis, ft = J.trustedTypes, Jt = ft ? ft.emptyScript : "", Zt = J.reactiveElementPolyfillSupport, P = (e, t) => e, B = { toAttribute(e, t) {
switch (t) {
case Boolean:
e = e ? Jt : null;
break;
case Object:
case Array:
e = e == null ? e : JSON.stringify(e);
}
return e;
}, fromAttribute(e, t) {
let s = e;
switch (t) {
case Boolean:
s = e !== null;
break;
case Number:
s = e === null ? null : Number(e);
break;
case Object:
case Array:
try {
s = JSON.parse(e);
} catch {
s = null;
}
}
return s;
} }, lt = (e, t) => !It(e, t), bt = { attribute: !0, type: String, converter: B, reflect: !1, useDefault: !1, hasChanged: lt };
Symbol.metadata ??= Symbol("metadata"), J.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
let C = class extends HTMLElement {
static addInitializer(t) {
this._$Ei(), (this.l ??= []).push(t);
}
static get observedAttributes() {
return this.finalize(), this._$Eh && [...this._$Eh.keys()];
}
static createProperty(t, s = bt) {
if (s.state && (s.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((s = Object.create(s)).wrapped = !0), this.elementProperties.set(t, s), !s.noAccessor) {
const r = Symbol(), o = this.getPropertyDescriptor(t, r, s);
o !== void 0 && qt(this.prototype, t, o);
}
}
static getPropertyDescriptor(t, s, r) {
const { get: o, set: n } = Vt(this.prototype, t) ?? { get() {
return this[s];
}, set(a) {
this[s] = a;
} };
return { get: o, set(a) {
const p = o?.call(this);
n?.call(this, a), this.requestUpdate(t, p, r);
}, configurable: !0, enumerable: !0 };
}
static getPropertyOptions(t) {
return this.elementProperties.get(t) ?? bt;
}
static _$Ei() {
if (this.hasOwnProperty(P("elementProperties"))) return;
const t = Ft(this);
t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
}
static finalize() {
if (this.hasOwnProperty(P("finalized"))) return;
if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(P("properties"))) {
const s = this.properties, r = [...Wt(s), ...Kt(s)];
for (const o of r) this.createProperty(o, s[o]);
}
const t = this[Symbol.metadata];
if (t !== null) {
const s = litPropertyMetadata.get(t);
if (s !== void 0) for (const [r, o] of s) this.elementProperties.set(r, o);
}
this._$Eh = /* @__PURE__ */ new Map();
for (const [s, r] of this.elementProperties) {
const o = this._$Eu(s, r);
o !== void 0 && this._$Eh.set(o, s);
}
this.elementStyles = this.finalizeStyles(this.styles);
}
static finalizeStyles(t) {
const s = [];
if (Array.isArray(t)) {
const r = new Set(t.flat(1 / 0).reverse());
for (const o of r) s.unshift(mt(o));
} else t !== void 0 && s.push(mt(t));
return s;
}
static _$Eu(t, s) {
const r = s.attribute;
return r === !1 ? void 0 : typeof r == "string" ? r : typeof t == "string" ? t.toLowerCase() : void 0;
}
constructor() {
super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
}
_$Ev() {
this._$ES = new Promise((t) => this.enableUpdating = t), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t) => t(this));
}
addController(t) {
(this._$EO ??= /* @__PURE__ */ new Set()).add(t), this.renderRoot !== void 0 && this.isConnected && t.hostConnected?.();
}
removeController(t) {
this._$EO?.delete(t);
}
_$E_() {
const t = /* @__PURE__ */ new Map(), s = this.constructor.elementProperties;
for (const r of s.keys()) this.hasOwnProperty(r) && (t.set(r, this[r]), delete this[r]);
t.size > 0 && (this._$Ep = t);
}
createRenderRoot() {
const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
return Bt(t, this.constructor.elementStyles), t;
}
connectedCallback() {
this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach((t) => t.hostConnected?.());
}
enableUpdating(t) {
}
disconnectedCallback() {
this._$EO?.forEach((t) => t.hostDisconnected?.());
}
attributeChangedCallback(t, s, r) {
this._$AK(t, r);
}
_$ET(t, s) {
const r = this.constructor.elementProperties.get(t), o = this.constructor._$Eu(t, r);
if (o !== void 0 && r.reflect === !0) {
const n = (r.converter?.toAttribute !== void 0 ? r.converter : B).toAttribute(s, r.type);
this._$Em = t, n == null ? this.removeAttribute(o) : this.setAttribute(o, n), this._$Em = null;
}
}
_$AK(t, s) {
const r = this.constructor, o = r._$Eh.get(t);
if (o !== void 0 && this._$Em !== o) {
const n = r.getPropertyOptions(o), a = typeof n.converter == "function" ? { fromAttribute: n.converter } : n.converter?.fromAttribute !== void 0 ? n.converter : B;
this._$Em = o, this[o] = a.fromAttribute(s, n.type) ?? this._$Ej?.get(o) ?? null, this._$Em = null;
}
}
requestUpdate(t, s, r) {
if (t !== void 0) {
const o = this.constructor, n = this[t];
if (r ??= o.getPropertyOptions(t), !((r.hasChanged ?? lt)(n, s) || r.useDefault && r.reflect && n === this._$Ej?.get(t) && !this.hasAttribute(o._$Eu(t, r)))) return;
this.C(t, s, r);
}
this.isUpdatePending === !1 && (this._$ES = this._$EP());
}
C(t, s, { useDefault: r, reflect: o, wrapped: n }, a) {
r && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t) && (this._$Ej.set(t, a ?? s ?? this[t]), n !== !0 || a !== void 0) || (this._$AL.has(t) || (this.hasUpdated || r || (s = void 0), this._$AL.set(t, s)), o === !0 && this._$Em !== t && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t));
}
async _$EP() {
this.isUpdatePending = !0;
try {
await this._$ES;
} catch (s) {
Promise.reject(s);
}
const t = this.scheduleUpdate();
return t != null && await t, !this.isUpdatePending;
}
scheduleUpdate() {
return this.performUpdate();
}
performUpdate() {
if (!this.isUpdatePending) return;
if (!this.hasUpdated) {
if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
for (const [o, n] of this._$Ep) this[o] = n;
this._$Ep = void 0;
}
const r = this.constructor.elementProperties;
if (r.size > 0) for (const [o, n] of r) {
const { wrapped: a } = n, p = this[o];
a !== !0 || this._$AL.has(o) || p === void 0 || this.C(o, void 0, n, p);
}
}
let t = !1;
const s = this._$AL;
try {
t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$EO?.forEach((r) => r.hostUpdate?.()), this.update(s)) : this._$EM();
} catch (r) {
throw t = !1, this._$EM(), r;
}
t && this._$AE(s);
}
willUpdate(t) {
}
_$AE(t) {
this._$EO?.forEach((s) => s.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
}
_$EM() {
this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
}
get updateComplete() {
return this.getUpdateComplete();
}
getUpdateComplete() {
return this._$ES;
}
shouldUpdate(t) {
return !0;
}
update(t) {
this._$Eq &&= this._$Eq.forEach((s) => this._$ET(s, this[s])), this._$EM();
}
updated(t) {
}
firstUpdated(t) {
}
};
C.elementStyles = [], C.shadowRootOptions = { mode: "open" }, C[P("elementProperties")] = /* @__PURE__ */ new Map(), C[P("finalized")] = /* @__PURE__ */ new Map(), Zt?.({ ReactiveElement: C }), (J.reactiveElementVersions ??= []).push("2.1.0");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const ht = globalThis, I = ht.trustedTypes, zt = I ? I.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, Ct = "$lit$", $ = `lit$${Math.random().toFixed(9).slice(2)}$`, Et = "?" + $, Yt = `<${Et}>`, x = document, k = () => x.createComment(""), N = (e) => e === null || typeof e != "object" && typeof e != "function", pt = Array.isArray, Gt = (e) => pt(e) || typeof e?.[Symbol.iterator] == "function", Q = `[
\f\r]`, O = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, yt = /-->/g, $t = />/g, w = RegExp(`>|${Q}(?:([^\\s"'>=/]+)(${Q}*=${Q}*(?:[^
\f\r"'\`<>=]|("|')|))|$)`, "g"), wt = /'/g, _t = /"/g, St = /^(?:script|style|textarea|title)$/i, Qt = (e) => (t, ...s) => ({ _$litType$: e, strings: t, values: s }), l = Qt(1), A = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), xt = /* @__PURE__ */ new WeakMap(), _ = x.createTreeWalker(x, 129);
function Mt(e, t) {
if (!pt(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
return zt !== void 0 ? zt.createHTML(t) : t;
}
const Xt = (e, t) => {
const s = e.length - 1, r = [];
let o, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", a = O;
for (let p = 0; p < s; p++) {
const i = e[p];
let v, m, c = -1, b = 0;
for (; b < i.length && (a.lastIndex = b, m = a.exec(i), m !== null); ) b = a.lastIndex, a === O ? m[1] === "!--" ? a = yt : m[1] !== void 0 ? a = $t : m[2] !== void 0 ? (St.test(m[2]) && (o = RegExp("</" + m[2], "g")), a = w) : m[3] !== void 0 && (a = w) : a === w ? m[0] === ">" ? (a = o ?? O, c = -1) : m[1] === void 0 ? c = -2 : (c = a.lastIndex - m[2].length, v = m[1], a = m[3] === void 0 ? w : m[3] === '"' ? _t : wt) : a === _t || a === wt ? a = w : a === yt || a === $t ? a = O : (a = w, o = void 0);
const y = a === w && e[p + 1].startsWith("/>") ? " " : "";
n += a === O ? i + Yt : c >= 0 ? (r.push(v), i.slice(0, c) + Ct + i.slice(c) + $ + y) : i + $ + (c === -2 ? p : y);
}
return [Mt(e, n + (e[s] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), r];
};
class D {
constructor({ strings: t, _$litType$: s }, r) {
let o;
this.parts = [];
let n = 0, a = 0;
const p = t.length - 1, i = this.parts, [v, m] = Xt(t, s);
if (this.el = D.createElement(v, r), _.currentNode = this.el.content, s === 2 || s === 3) {
const c = this.el.content.firstChild;
c.replaceWith(...c.childNodes);
}
for (; (o = _.nextNode()) !== null && i.length < p; ) {
if (o.nodeType === 1) {
if (o.hasAttributes()) for (const c of o.getAttributeNames()) if (c.endsWith(Ct)) {
const b = m[a++], y = o.getAttribute(c).split($), T = /([.?@])?(.*)/.exec(b);
i.push({ type: 1, index: n, name: T[2], strings: y, ctor: T[1] === "." ? ee : T[1] === "?" ? se : T[1] === "@" ? re : Z }), o.removeAttribute(c);
} else c.startsWith($) && (i.push({ type: 6, index: n }), o.removeAttribute(c));
if (St.test(o.tagName)) {
const c = o.textContent.split($), b = c.length - 1;
if (b > 0) {
o.textContent = I ? I.emptyScript : "";
for (let y = 0; y < b; y++) o.append(c[y], k()), _.nextNode(), i.push({ type: 2, index: ++n });
o.append(c[b], k());
}
}
} else if (o.nodeType === 8) if (o.data === Et) i.push({ type: 2, index: n });
else {
let c = -1;
for (; (c = o.data.indexOf($, c + 1)) !== -1; ) i.push({ type: 7, index: n }), c += $.length - 1;
}
n++;
}
}
static createElement(t, s) {
const r = x.createElement("template");
return r.innerHTML = t, r;
}
}
function E(e, t, s = e, r) {
if (t === A) return t;
let o = r !== void 0 ? s._$Co?.[r] : s._$Cl;
const n = N(t) ? void 0 : t._$litDirective$;
return o?.constructor !== n && (o?._$AO?.(!1), n === void 0 ? o = void 0 : (o = new n(e), o._$AT(e, s, r)), r !== void 0 ? (s._$Co ??= [])[r] = o : s._$Cl = o), o !== void 0 && (t = E(e, o._$AS(e, t.values), o, r)), t;
}
class te {
constructor(t, s) {
this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = s;
}
get parentNode() {
return this._$AM.parentNode;
}
get _$AU() {
return this._$AM._$AU;
}
u(t) {
const { el: { content: s }, parts: r } = this._$AD, o = (t?.creationScope ?? x).importNode(s, !0);
_.currentNode = o;
let n = _.nextNode(), a = 0, p = 0, i = r[0];
for (; i !== void 0; ) {
if (a === i.index) {
let v;
i.type === 2 ? v = new H(n, n.nextSibling, this, t) : i.type === 1 ? v = new i.ctor(n, i.name, i.strings, this, t) : i.type === 6 && (v = new oe(n, this, t)), this._$AV.push(v), i = r[++p];
}
a !== i?.index && (n = _.nextNode(), a++);
}
return _.currentNode = x, o;
}
p(t) {
let s = 0;
for (const r of this._$AV) r !== void 0 && (r.strings !== void 0 ? (r._$AI(t, r, s), s += r.strings.length - 2) : r._$AI(t[s])), s++;
}
}
class H {
get _$AU() {
return this._$AM?._$AU ?? this._$Cv;
}
constructor(t, s, r, o) {
this.type = 2, this._$AH = g, this._$AN = void 0, this._$AA = t, this._$AB = s, this._$AM = r, this.options = o, this._$Cv = o?.isConnected ?? !0;
}
get parentNode() {
let t = this._$AA.parentNode;
const s = this._$AM;
return s !== void 0 && t?.nodeType === 11 && (t = s.parentNode), t;
}
get startNode() {
return this._$AA;
}
get endNode() {
return this._$AB;
}
_$AI(t, s = this) {
t = E(this, t, s), N(t) ? t === g || t == null || t === "" ? (this._$AH !== g && this._$AR(), this._$AH = g) : t !== this._$AH && t !== A && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Gt(t) ? this.k(t) : this._(t);
}
O(t) {
return this._$AA.parentNode.insertBefore(t, this._$AB);
}
T(t) {
this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
}
_(t) {
this._$AH !== g && N(this._$AH) ? this._$AA.nextSibling.data = t : this.T(x.createTextNode(t)), this._$AH = t;
}
$(t) {
const { values: s, _$litType$: r } = t, o = typeof r == "number" ? this._$AC(t) : (r.el === void 0 && (r.el = D.createElement(Mt(r.h, r.h[0]), this.options)), r);
if (this._$AH?._$AD === o) this._$AH.p(s);
else {
const n = new te(o, this), a = n.u(this.options);
n.p(s), this.T(a), this._$AH = n;
}
}
_$AC(t) {
let s = xt.get(t.strings);
return s === void 0 && xt.set(t.strings, s = new D(t)), s;
}
k(t) {
pt(this._$AH) || (this._$AH = [], this._$AR());
const s = this._$AH;
let r, o = 0;
for (const n of t) o === s.length ? s.push(r = new H(this.O(k()), this.O(k()), this, this.options)) : r = s[o], r._$AI(n), o++;
o < s.length && (this._$AR(r && r._$AB.nextSibling, o), s.length = o);
}
_$AR(t = this._$AA.nextSibling, s) {
for (this._$AP?.(!1, !0, s); t && t !== this._$AB; ) {
const r = t.nextSibling;
t.remove(), t = r;
}
}
setConnected(t) {
this._$AM === void 0 && (this._$Cv = t, this._$AP?.(t));
}
}
class Z {
get tagName() {
return this.element.tagName;
}
get _$AU() {
return this._$AM._$AU;
}
constructor(t, s, r, o, n) {
this.type = 1, this._$AH = g, this._$AN = void 0, this.element = t, this.name = s, this._$AM = o, this.options = n, r.length > 2 || r[0] !== "" || r[1] !== "" ? (this._$AH = Array(r.length - 1).fill(new String()), this.strings = r) : this._$AH = g;
}
_$AI(t, s = this, r, o) {
const n = this.strings;
let a = !1;
if (n === void 0) t = E(this, t, s, 0), a = !N(t) || t !== this._$AH && t !== A, a && (this._$AH = t);
else {
const p = t;
let i, v;
for (t = n[0], i = 0; i < n.length - 1; i++) v = E(this, p[r + i], s, i), v === A && (v = this._$AH[i]), a ||= !N(v) || v !== this._$AH[i], v === g ? t = g : t !== g && (t += (v ?? "") + n[i + 1]), this._$AH[i] = v;
}
a && !o && this.j(t);
}
j(t) {
t === g ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
}
}
class ee extends Z {
constructor() {
super(...arguments), this.type = 3;
}
j(t) {
this.element[this.name] = t === g ? void 0 : t;
}
}
class se extends Z {
constructor() {
super(...arguments), this.type = 4;
}
j(t) {
this.element.toggleAttribute(this.name, !!t && t !== g);
}
}
class re extends Z {
constructor(t, s, r, o, n) {
super(t, s, r, o, n), this.type = 5;
}
_$AI(t, s = this) {
if ((t = E(this, t, s, 0) ?? g) === A) return;
const r = this._$AH, o = t === g && r !== g || t.capture !== r.capture || t.once !== r.once || t.passive !== r.passive, n = t !== g && (r === g || o);
o && this.element.removeEventListener(this.name, this, r), n && this.element.addEventListener(this.name, this, t), this._$AH = t;
}
handleEvent(t) {
typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
}
}
class oe {
constructor(t, s, r) {
this.element = t, this.type = 6, this._$AN = void 0, this._$AM = s, this.options = r;
}
get _$AU() {
return this._$AM._$AU;
}
_$AI(t) {
E(this, t);
}
}
const ne = ht.litHtmlPolyfillSupport;
ne?.(D, H), (ht.litHtmlVersions ??= []).push("3.3.0");
const ae = (e, t, s) => {
const r = s?.renderBefore ?? t;
let o = r._$litPart$;
if (o === void 0) {
const n = s?.renderBefore ?? null;
r._$litPart$ = o = new H(t.insertBefore(k(), n), n, void 0, s ?? {});
}
return o._$AI(e), o;
};
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const ct = globalThis;
let d = class extends C {
constructor() {
super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
}
createRenderRoot() {
const t = super.createRenderRoot();
return this.renderOptions.renderBefore ??= t.firstChild, t;
}
update(t) {
const s = this.render();
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = ae(s, this.renderRoot, this.renderOptions);
}
connectedCallback() {
super.connectedCallback(), this._$Do?.setConnected(!0);
}
disconnectedCallback() {
super.disconnectedCallback(), this._$Do?.setConnected(!1);
}
render() {
return A;
}
};
d._$litElement$ = !0, d.finalized = !0, ct.litElementHydrateSupport?.({ LitElement: d });
const ie = ct.litElementPolyfillSupport;
ie?.({ LitElement: d });
(ct.litElementVersions ??= []).push("4.2.0");
function Ot() {
return typeof window < "u";
}
const le = 800;
function Pt() {
return Ot() && "pzshBreakpoint" in window && typeof window.pzshBreakpoint == "number" && window.pzshBreakpoint || le;
}
const kt = u`
/* Base colors */
--pzsh-color-white: #ffffff;
--pzsh-color-gray-1: #fafafa;
--pzsh-color-gray-2: #f2f2f2;
--pzsh-color-gray-3: #d8d8d8;
--pzsh-color-gray-4: #62676b;
--pzsh-color-black: #000000;
/* Puzzle brand colors */
--pzsh-color-brand-1: #1e5a96;
--pzsh-color-brand-2: #3b7bbe;
--pzsh-color-brand-3: #238bca;
--pzsh-color-brand-4: #3fa8e0;
--pzsh-color-brand-5: #46bcc0;
--pzsh-color-brand-6: #2c97a6;
--pzsh-color-brand-7: #69b978;
--pzsh-color-brand-8: #61b44b;
--pzsh-color-brand-alt-1: #dcedf9;
--pzsh-color-brand-alt-2: #1b2d53;
--pzsh-color-brand-alt-3: #3fa8e0; /* Logo color */
--pzsh-color-brand-alt-4: #69b978; /* Logo color */
--pzsh-green: var(--pzsh-color-brand-7);
--pzsh-blue: var(--pzsh-color-brand-alt-3);
/* Component colors */
--pzsh-topbar-bg: var(--pzsh-color-brand-alt-2);
--pzsh-topbar-bg-alt: var(--pzsh-color-brand-2);
--pzsh-topbar-fg: var(--pzsh-color-white);
--pzsh-menu-bg: var(--pzsh-color-white);
--pzsh-menu-bg-alt: var(--pzsh-color-gray-2);
--pzsh-menu-fg: var(--pzsh-color-gray-4);
--pzsh-menu-active: var(--pzsh-color-brand-8);
--pzsh-menu-divider: var(--pzsh-color-gray-4);
--pzsh-menu-dropdown-item-bg: var(--pzsh-color-white);
--pzsh-menu-dropdown-item-bg-alt: var(--pzsh-color-gray-2);
--pzsh-menu-dropdown-item-fg: var(--pzsh-color-gray-4);
--pzsh-banner-bg: var(--pzsh-color-brand-alt-1);
--pzsh-nav-fg: var(--pzsh-color-brand-1);
--pzsh-nav-active: var(--pzsh-color-brand-8);
--pzsh-subnav-bg: var(--pzsh-color-white);
--pzsh-subnav-border: var(--pzsh-color-gray-3);
--pzsh-subnav-fg: var(--pzsh-color-gray-4);
--pzsh-subnav-active: var(--pzsh-color-gray-3);
--pzsh-hero-bg-start: var(--pzsh-banner-bg);
--pzsh-hero-bg-end: var(--pzsh-color-white);
--pzsh-footer-bg: var(--pzsh-color-gray-2);
--pzsh-footer-border: var(--pzsh-color-gray-3);
/* Fonts */
--pzsh-font-size-base: 16px;
--pzsh-font-family: "Roboto", sans-serif;
--pzsh-monospace-font-family: "Roboto Mono", monospace;
/* Spacings */
--pzsh-spacer: 8px;
--pzsh-page-padding-horizontal-mobile: calc(2 * var(--pzsh-spacer));
--pzsh-page-padding-horizontal-desktop: calc(6 * var(--pzsh-spacer));
--pzsh-menu-item-gap: var(--pzsh-spacer);
--pzsh-menu-item-padding-horizontal: calc(3 * var(--pzsh-spacer));
--pzsh-menu-item-padding-vertical: calc(2 * var(--pzsh-spacer));
--pzsh-nav-item-padding-horizontal-desktop: calc(2 * var(--pzsh-spacer));
/* Sizes */
--pzsh-breakpoint: ${Pt()}px;
--pzsh-logo-height: 32px;
--pzsh-icon-size: 24px;
--pzsh-topbar-height: calc(2 * var(--pzsh-spacer) + var(--pzsh-logo-height));
--pzsh-nav-line-height: 18px;
--pzsh-nav-height: calc(
2 * var(--pzsh-nav-item-padding-horizontal-desktop) +
var(--pzsh-nav-line-height)
);
--pzsh-banner-content-height: calc(15 * var(--pzsh-spacer));
--pzsh-hero-height: calc(20 * var(--pzsh-spacer));
/* Layering */
--pzsh-menu-z-index: 1000;
--pzsh-menu-backdrop-z-index: 999;
--pzsh-menu-dropdown-z-index: 1000;
`, h = Object.assign(
u`
:host {
${kt}
}
/* Reset */
:host,
:host * {
box-sizing: border-box;
font-family: var(--pzsh-font-family);
font-size: var(--pzsh-font-size-base);
}
img,
svg {
display: block;
}
`,
{
get breakpoint() {
return Pt();
}
}
);
function he(e) {
if (!Ot()) return;
const t = document.createElement("style");
t.innerText = e.toString(), document.querySelector("body")?.appendChild(t);
}
he(u`
:root {
${kt}
}
`);
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const f = (e) => (t, s) => {
s !== void 0 ? s.addInitializer(() => {
customElements.define(e, t);
}) : customElements.define(e, t);
};
var pe = Object.getOwnPropertyDescriptor, ce = (e, t, s, r) => {
for (var o = r > 1 ? void 0 : r ? pe(t, s) : t, n = e.length - 1, a; n >= 0; n--)
(a = e[n]) && (o = a(o) || o);
return o;
};
let X = class extends d {
render() {
return l``;
}
};
X.styles = [
h,
u`
:host {
position: absolute;
top: var(--pzsh-topbar-height);
bottom: 0;
left: 0;
right: 0;
background-color: rgba(135, 139, 142, 0.4);
backdrop-filter: blur(4px);
z-index: var(--pzsh-menu-backdrop-z-index);
}
`
];
X = ce([
f("pzsh-backdrop")
], X);
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const de = { attribute: !0, type: String, converter: B, reflect: !1, hasChanged: lt }, ue = (e = de, t, s) => {
const { kind: r, metadata: o } = s;
let n = globalThis.litPropertyMetadata.get(o);
if (n === void 0 && globalThis.litPropertyMetadata.set(o, n = /* @__PURE__ */ new Map()), r === "setter" && ((e = Object.create(e)).wrapped = !0), n.set(s.name, e), r === "accessor") {
const { name: a } = s;
return { set(p) {
const i = t.get.call(this);
t.set.call(this, p), this.requestUpdate(a, i, e);
}, init(p) {
return p !== void 0 && this.C(a, void 0, e, p), p;
} };
}
if (r === "setter") {
const { name: a } = s;
return function(p) {
const i = this[a];
t.call(this, p), this.requestUpdate(a, i, e);
};
}
throw Error("Unsupported decorator location: " + r);
};
function z(e) {
return (t, s) => typeof s == "object" ? ue(e, t, s) : ((r, o, n) => {
const a = o.hasOwnProperty(n);
return o.constructor.createProperty(n, r), a ? Object.getOwnPropertyDescriptor(o, n) : void 0;
})(e, t, s);
}
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
function M(e) {
return z({ ...e, state: !0, attribute: !1 });
}
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const ve = { ATTRIBUTE: 1 }, ge = (e) => (...t) => ({ _$litDirective$: e, values: t });
class me {
constructor(t) {
}
get _$AU() {
return this._$AM._$AU;
}
_$AT(t, s, r) {
this._$Ct = t, this._$AM = s, this._$Ci = r;
}
_$AS(t, s) {
return this.update(t, s);
}
update(t, s) {
return this.render(...s);
}
}
/**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const Y = ge(class extends me {
constructor(e) {
if (super(e), e.type !== ve.ATTRIBUTE || e.name !== "class" || e.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
}
render(e) {
return " " + Object.keys(e).filter((t) => e[t]).join(" ") + " ";
}
update(e, [t]) {
if (this.st === void 0) {
this.st = /* @__PURE__ */ new Set(), e.strings !== void 0 && (this.nt = new Set(e.strings.join(" ").split(/\s/).filter((r) => r !== "")));
for (const r in t) t[r] && !this.nt?.has(r) && this.st.add(r);
return this.render(t);
}
const s = e.element.classList;
for (const r of this.st) r in t || (s.remove(r), this.st.delete(r));
for (const r in t) {
const o = !!t[r];
o === this.st.has(r) || this.nt?.has(r) || (o ? (s.add(r), this.st.add(r)) : (s.remove(r), this.st.delete(r)));
}
return A;
}
});
var fe = Object.defineProperty, be = Object.getOwnPropertyDescriptor, dt = (e, t, s, r) => {
for (var o = r > 1 ? void 0 : r ? be(t, s) : t, n = e.length - 1, a; n >= 0; n--)
(a = e[n]) && (o = (r ? a(t, s, o) : a(o)) || o);
return r && o && fe(t, s, o), o;
};
let L = class extends d {
constructor() {
super(), this.hasNav = !1, this.hasSubnav = !1, this.handleMenuNavChange = this.handleMenuNavChange.bind(this);
}
connectedCallback() {
super.connectedCallback(), document.addEventListener(
"pzsh-menu-nav-change",
this.handleMenuNavChange,
!0
);
}
disconnectedCallback() {
super.disconnectedCallback(), document.removeEventListener(
"pzsh-menu-nav-change",
this.handleMenuNavChange,
!0
);
}
handleMenuNavChange(e) {
if (e.stopPropagation(), e instanceof CustomEvent) {
const { hasNav: t, hasSubnav: s } = e.detail;
this.hasNav = t, this.hasSubnav = s;
}
}
render() {
return l`
<slot name="tangram"></slot>
<div
class=${Y({
content: !0,
"has-nav": this.hasNav,
"has-subnav": this.hasSubnav
})}
>
<slot name="content"></slot>
</div>
`;
}
};
L.styles = [
h,
u`
: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: ${h.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));
}
}
`
];
dt([
M()
], L.prototype, "hasNav", 2);
dt([
M()
], L.prototype, "hasSubnav", 2);
L = dt([
f("pzsh-banner")
], L);
var ze = Object.getOwnPropertyDescriptor, ye = (e, t, s, r) => {
for (var o = r > 1 ? void 0 : r ? ze(t, s) : t, n = e.length - 1, a; n >= 0; n--)
(a = e[n]) && (o = a(o) || o);
return o;
};
let tt = class extends d {
render() {
return l` <slot></slot> `;
}
};
tt.styles = [
h,
u`
:host {
display: flex;
flex-direction: column;
min-height: 100vh;
}
::slotted(*) {
/* Let the content eat the rest */
flex: auto;
}
::slotted(pzsh-topbar),
::slotted(pzsh-banner),
::slotted(pzsh-hero),
::slotted(pzsh-menu),
::slotted(pzsh-footer) {
flex: none;
}
`
];
tt = ye([
f("pzsh-container")
], tt);
var $e = Object.getOwnPropertyDescriptor, we = (e, t, s, r) => {
for (var o = r > 1 ? void 0 : r ? $e(t, s) : t, n = e.length - 1, a; n >= 0; n--)
(a = e[n]) && (o = a(o) || o);
return o;
};
let et = class extends d {
render() {
return l`
<div class="named-slots">
<slot name="start"></slot>
<slot name="center"></slot>
<slot name="end"></slot>
</div>
<slot></slot>
`;
}
};
et.styles = [
h,
u`
:host {
padding: calc(var(--pzsh-spacer)) calc(6 * var(--pzsh-spacer));
background-color: var(--pzsh-footer-bg);
display: flex;
flex-direction: column;
align-items: start;
border-top: 2px solid var(--pzsh-footer-border);
}
.named-slots {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: start;
}
::slotted(*) {
color: var(--pzsh-color-gray-4);
font-family: Roboto, sans-serif;
gap: calc(2 * var(--pzsh-spacer));
padding-top: var(--pzsh-spacer);
padding-bottom: var(--pzsh-spacer);
display: flex;
flex-direction: column;
flex: 1;
}
::slotted([slot="start"]) {
align-items: start;
justify-content: flex-start;
}
::slotted([slot="center"]) {
align-items: center;
justify-content: center;
}
::slotted([slot="end"]) {
align-items: end;
justify-content: flex-end;
}
@media (max-width: ${h.breakpoint}px) {
:host {
padding: calc(var(--pzsh-spacer)) calc(3 * var(--pzsh-spacer));
}
.named-slots {
flex-direction: column;
row-gap: calc(3 * var(--pzsh-spacer));
}
::slotted([slot="start"]),
::slotted([slot="center"]),
::slotted([slot="end"]) {
align-items: start;
}
}
`
];
et = we([
f("pzsh-footer")
], et);
var _e = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, Nt = (e, t, s, r) => {
for (var o = r > 1 ? void 0 : r ? xe(t, s) : t, n = e.length - 1, a; n >= 0; n--)
(a = e[n]) && (o = (r ? a(t, s, o) : a(o)) || o);
return r && o && _e(t, s, o), o;
};
let q = class extends d {
constructor() {
super(...arguments), this.href = "#";
}
render() {
return l`<a href="${this.href}">
<slot></slot>
</a>`;
}
};
q.styles = [
h,
u`
a {
display: flex;
align-items: center;
font-family: var(--pzsh-font-family);
color: var(--pzsh-color-brand-1);
text-decoration: none;
}
a:hover,
a:active {
text-decoration: underline;
}
::slotted(pzsh-icon),
::slotted(svg) {
margin-right: calc(var(--pzsh-spacer) / 2);
}
@media (max-width: ${h.breakpoint}px) {
a {
margin-left: 0;
color: var(--pzsh-color-brand-1);
}
a:hover,
a:active {
background-color: var(--pzsh-topbar-menu-bg-alt);
text-decoration: none;
}
}
`
];
Nt([
z({ type: String })
], q.prototype, "href", 2);
q = Nt([
f("pzsh-footer-link")
], q);
var Ae = Object.getOwnPropertyDescriptor, Ce = (e, t, s, r) => {
for (var o = r > 1 ? void 0 : r ? Ae(t, s) : t, n = e.length - 1, a; n >= 0; n--)
(a = e[n]) && (o = a(o) || o);
return o;
};
let st = class extends d {
render() {
return l`
<div class="text">
<slot name="title"></slot>
<slot name="slogan"></slot>
</div>
<div class="logo">
<slot name="logo"></slot>
</div>
`;
}
};
st.styles = [
h,
u`
:host {
height: var(--pzsh-hero-height);
padding: 0 var(--pzsh-page-padding-horizontal-mobile);
display: flex;
align-items: center;
justify-content: center;
gap: var(--pzsh-spacer);
background: var(--pzsh-hero-bg-start);
background: linear-gradient(
180deg,
var(--pzsh-hero-bg-start) 0%,
var(--pzsh-hero-bg-end) 100%
);
}
.text {
max-width: 350px;
/* Move a bit above mathematical center */
margin-bottom: calc(2 * var(--pzsh-spacer));
}
.logo {
max-height: var(--pzsh-hero-height);
}
/**
* When styling the slotted elements in the light DOM, make sure to
* enforce these styles with !important to override any potential
* light DOM styles.
*/
::slotted([slot="title"]),
::slotted([slot="slogan"]) {
font-family: var(--pzsh-font-family) !important;
font-weight: normal !important;
line-height: 1 !important;
}
::slotted([slot="title"]) {
margin: 0 !important;
font-size: 32px !important;
color: var(--pzsh-color-brand-alt-2) !important;
}
::slotted([slot="slogan"]) {
margin-top: var(--pzsh-spacer) !important;
margin-bottom: 0 !important;
font-size: 18px !important;
color: var(--pzsh-color-brand-alt-3) !important;
}
@media (min-width: 390px) {
:host {
gap: calc(3 * var(--pzsh-spacer));
}
.text {
/* Move a bit above mathematical center */
margin-bottom: calc(6 * var(--pzsh-spacer));
}
}
@media (min-width: ${h.breakpoint}px) {
:host {
gap: calc(5 * var(--pzsh-spacer));
}
}
`
];
st = Ce([
f("pzsh-hero")
], st);
var Ee = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, Dt = (e, t, s, r) => {
for (var o = r > 1 ? void 0 : r ? Se(t, s) : t, n = e.length - 1, a; n >= 0; n--)
(a = e[n]) && (o = (r ? a(t, s, o) : a(o)) || o);
return r && o && Ee(t, s, o), o;
};
const Me = {
// prettier-ignore
"angle-down": l`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17 9.17a1 1 0 00-1.41 0L12 12.71 8.46 9.17a1 1 0 00-1.41 0 1 1 0 000 1.42l4.24 4.24a1 1 0 001.42 0L17 10.59a1 1 0 000-1.42z"/></svg>
`,
// prettier-ignore
"angle-up": l`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17 13.41l-4.29-4.24a1 1 0 00-1.42 0l-4.24 4.24a1 1 0 000 1.42 1 1 0 001.41 0L12 11.29l3.54 3.54a1 1 0 00.7.29 1 1 0 00.71-.29 1 1 0 00.05-1.42z"/></svg>`,
// prettier-ignore
bars: l`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 8h18a1 1 0 000-2H3a1 1 0 000 2zm18 8H3a1 1 0 000 2h18a1 1 0 000-2zm0-5H3a1 1 0 000 2h18a1 1 0 000-2z"/></svg>`,
// prettier-ignore
github: l`<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2.247a10 10 0 00-3.162 19.487c.5.088.687-.212.687-.475 0-.237-.012-1.025-.012-1.862-2.513.462-3.163-.613-3.363-1.175a3.636 3.636 0 00-1.025-1.413c-.35-.187-.85-.65-.013-.662a2.001 2.001 0 011.538 1.025 2.137 2.137 0 002.912.825 2.104 2.104 0 01.638-1.338c-2.225-.25-4.55-1.112-4.55-4.937a3.892 3.892 0 011.025-2.688 3.594 3.594 0 01.1-2.65s.837-.262 2.75 1.025a9.427 9.427 0 015 0c1.912-1.3 2.75-1.025 2.75-1.025a3.593 3.593 0 01.1 2.65 3.869 3.869 0 011.025 2.688c0 3.837-2.338 4.687-4.563 4.937a2.368 2.368 0 01.675 1.85c0 1.338-.012 2.413-.012 2.75 0 .263.187.575.687.475A10.005 10.005 0 0012 2.247z"/></svg>`,
// prettier-ignore
gitlab: l`<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path fill="currentColor" d="M21.94 12.865l-1.066-3.28.001.005v-.005l-2.115-6.51a.833.833 0 00-.799-.57.822.822 0 00-.788.576l-2.007 6.178H8.834L6.824 3.08a.822.822 0 00-.788-.575H6.03a.839.839 0 00-.796.575L3.127 9.584l-.002.006.001-.005-1.069 3.28a1.195 1.195 0 00.435 1.34l9.229 6.705.004.003.012.008-.011-.008.002.001.001.001a.466.466 0 00.045.028l.006.004.004.002.003.001h.002l.005.003.025.01.023.01h.001l.004.002.005.002h.002l.006.002h.003c.011.004.022.006.034.009l.013.003h.002l.005.002.007.001h.007a.467.467 0 00.066.006h.001a.469.469 0 00.067-.005h.007l.007-.002.004-.001h.002l.014-.004.034-.008h.002l.006-.003h.002l.005-.002.004-.001h.001l.025-.011.023-.01.005-.002h.002l.003-.002.004-.002.007-.004a.468.468 0 00.044-.027l.004-.003.005-.003 9.23-6.706a1.195 1.195 0 00.434-1.339zm-3.973-9.18l1.81 5.574h-3.62zm-11.937 0L7.843 9.26h-3.62zm-2.984 9.757a.255.255 0 01-.092-.285l.794-2.438 5.822 7.464zm1.494-3.24h3.61l2.573 7.927zm7.165 10.696l-.006-.005-.011-.01-.02-.018.002.001.002.002a.473.473 0 00.043.037l.002.002zm.293-1.894l-1.514-4.665-1.344-4.138h5.72zm.31 1.88l-.01.008-.002.001-.005.005-.012.009.002-.002a.455.455 0 00.043-.036l.001-.002.002-.002zM15.851 10.2h3.61l-.74.947-5.447 6.98zm5.1 3.241l-6.523 4.74 5.824-7.463.791 2.437a.255.255 0 01-.092.286z"/></svg>`,
// prettier-ignore
multiply: l`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M13.41 12l6.3-6.29a1 1 0 10-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 00-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 000 1.42 1 1 0 001.42 0l6.29-6.3 6.29 6.3a1 1 0 001.42 0 1 1 0 000-1.42z"/></svg>`,
// prettier-ignore
"plus-circle": l`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8 8 8 0 01-8 8zm4-9h-3V8a1 1 0 00-2 0v3H8a1 1 0 000 2h3v3a1 1 0 002 0v-3h3a1 1 0 000-2z"/></svg>`,
// prettier-ignore
"question-circle": l`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M11.29 15.29a1.58 1.58 0 00-.12.15.76.76 0 00-.09.18.64.64 0 00-.06.18 1.36 1.36 0 000 .2.84.84 0 00.08.38.9.9 0 00.54.54.94.94 0 00.76 0 .9.9 0 00.54-.54A1 1 0 0013 16a1 1 0 00-.29-.71 1 1 0 00-1.42 0zM12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8 8 8 0 01-8 8zm0-13a3 3 0 00-2.6 1.5 1 1 0 101.73 1A1 1 0 0112 9a1 1 0 010 2 1 1 0 00-1 1v1a1 1 0 002 0v-.18A3 3 0 0012 7z"/></svg>`,
// prettier-ignore
search: l`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.71 20.29L18 16.61A9 9 0 1016.61 18l3.68 3.68a1 1 0 001.42 0 1 1 0 000-1.39zM11 18a7 7 0 117-7 7 7 0 01-7 7z"/></svg>`,
// prettier-ignore
setting: l`<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path fill="currentColor" d="M19.9 12.66a1 1 0 010-1.32l1.28-1.44a1 1 0 00.12-1.17l-2-3.46a1 1 0 00-1.07-.48l-1.88.38a1 1 0 01-1.15-.66l-.61-1.83a1 1 0 00-.95-.68h-4a1 1 0 00-1 .68l-.56 1.83a1 1 0 01-1.15.66L5 4.79a1 1 0 00-1 .48L2 8.73a1 1 0 00.1 1.17l1.27 1.44a1 1 0 010 1.32L2.1 14.1a1 1 0 00-.1 1.17l2 3.46a1 1 0 001.07.48l1.88-.38a1 1 0 011.15.66l.61 1.83a1 1 0 001 .68h4a1 1 0 00.95-.68l.61-1.83a1 1 0 011.15-.66l1.88.38a1 1 0 001.07-.48l2-3.46a1 1 0 00-.12-1.17zM18.41 14l.8.9-1.28 2.22-1.18-.24a3 3 0 00-3.45 2L12.92 20h-2.56L10 18.86a3 3 0 00-3.45-2l-1.18.24-1.3-2.21.8-.9a3 3 0 000-4l-.8-.9 1.28-2.2 1.18.24a3 3 0 003.45-2L10.36 4h2.56l.38 1.14a3 3 0 003.45 2l1.18-.24 1.28 2.22-.8.9a3 3 0 000 3.98zm-6.77-6a4 4 0 104 4 4 4 0 00-4-4zm0 6a2 2 0 112-2 2 2 0 01-2 2z"/></svg>`,
// prettier-ignore
"sign-out-alt": l`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12.59 13l-2.3 2.29a1 1 0 000 1.42 1 1 0 001.42 0l4-4a1 1 0 00.21-.33 1 1 0 000-.76 1 1 0 00-.21-.33l-4-4a1 1 0 10-1.42 1.42l2.3 2.29H3a1 1 0 000 2zM12 2a10 10 0 00-9 5.55 1 1 0 001.8.9A8 8 0 1112 20a7.93 7.93 0 01-7.16-4.45 1 1 0 00-1.8.9A10 10 0 1012 2z"/></svg>`,
// prettier-ignore
"sliders-v-alt": l`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 8.18V3a1 1 0 00-2 0v5.18a3 3 0 000 5.64V21a1 1 0 002 0v-7.18a3 3 0 000-5.64zM19 12a1 1 0 111-1 1 1 0 01-1 1zm-6 2.18V3a1 1 0 00-2 0v11.18a3 3 0 000 5.64V21a1 1 0 002 0v-1.18a3 3 0 000-5.64zM12 18a1 1 0 111-1 1 1 0 01-1 1zM6 6.18V3a1 1 0 00-2 0v3.18a3 3 0 000 5.64V21a1 1 0 002 0v-9.18a3 3 0 000-5.64zM5 10a1 1 0 111-1 1 1 0 01-1 1z"/></svg>`,
// prettier-ignore
user: l`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.71 12.71a6 6 0 10-7.42 0 10 10 0 00-6.22 8.18 1 1 0 002 .22 8 8 0 0115.9 0 1 1 0 001 .89h.11a1 1 0 00.88-1.1 10 10 0 00-6.25-8.19zM12 12a4 4 0 114-4 4 4 0 01-4 4z"/></svg>`
};
let V = class extends d {
constructor() {
super(...arguments), this.name = "";
}
render() {
return l`${Me[this.name]}`;
}
};
V.styles = [
h,
u`
:host {
display: inline-block;
}
svg {
width: 24px;
height: 24px;
}
`
];
Dt([
z({ type: String })
], V.prototype, "name", 2);
V = Dt([
f("pzsh-icon")
], V);
function Lt(e, t) {
return e && e instanceof HTMLElement && (e.nodeName.toLowerCase() === t || e.closest(t) != null);
}
function Oe(e) {
e.getBoundingClientRect().bottom > window.innerHeight && e.scrollIntoView(!1), e.getBoundingClientRect().top < 0 && e.scrollIntoView();
}
function jt(e, t) {
if (t instanceof KeyboardEvent && t.type === "keydown" && (t.key === "ArrowUp" || t.key === "ArrowDown")) {
const s = e();
let r = s.findIndex((n) => n === document.activeElement);
t.key === "ArrowUp" ? r -= 1 : t.key === "ArrowDown" && (r += 1);
const o = s[r];
o && (o.focus(), Oe(o), t.preventDefault());
}
}
var Pe = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, ut = (e, t, s, r) => {
for (var o = r > 1 ? void 0 : r ? ke(t, s) : t, n = e.length - 1, a; n >= 0; n--)
(a = e[n]) && (o = (r ? a(t, s, o) : a(o)) || o);
return r && o && Pe(t, s, o), o;
};
let j = class extends d {
constructor() {
super(), this.open = !1, this.scrollContainerSelector = "body", this.available = !1, this.hasNav = !1, this.hasSubnav = !1, this.toggleMenu = this.toggleMenu.bind(this), this.handleEvent = this.handleEvent.bind(this), this.actionsObserver = new MutationObserver(
(e) => e.forEach(this.handleActionsChange.bind(this))
);
}
connectedCallback() {
super.connectedCallback(), document.addEventListener("pzsh-menu-toggle", this.toggleMenu, !0), document.addEventListener("click", this.handleEvent), document.addEventListener("keydown", this.handleEvent);
}
disconnectedCallback() {
super.disconnectedCallback(), document.removeEventListener("pzsh-menu-toggle", this.toggleMenu, !0), document.removeEventListener("click", this.handleEvent), document.removeEventListener("keydown", this.handleEvent);
}
toggleMenu(e) {
e?.stopPropagation(), this.open = !this.open, this.toggleBackdrop(), this.triggerMenuChange(this.available, this.open);
}
toggleBackdrop() {
const e = document.querySelector("pzsh-backdrop");
e && e.remove(), this.open && document.querySelector("body")?.appendChild(document.createElement("pzsh-backdrop"));
const t = document.querySelector(
this.scrollContainerSelector
);
t && (t.style.overflowY = this.open ? "hidden" : "auto");
}
handleEvent(e) {
this.handleMenuClose(e), this.handleMenuNavigation(e);
}
handleMenuClose(e) {
this.open && (e.type === "click" && !Lt(e.target, "pzsh-topbar") || e.type === "keydown" && e instanceof KeyboardEvent && (e.key === "Escape" || e.key === "Tab")) && this.toggleMenu(e);
}
handleMenuNavigation(e) {
this.open && jt(this.getMenuItems.bind(this), e);
}
/**
* Flatten all menu actions & dropdown items to an array
*/
getMenuItems() {
const e = Array.from(
this.querySelectorAll("[slot='nav'] pzsh-nav-item")
), t = Array.from(
this.querySelector("[slot='actions']")?.children || []
);
return [...e, ...t].reduce((s, r) => r.nodeName.toLowerCase() === "pzsh-menu-dropdown" ? [
...s,
...Array.from(
r.querySelector('[slot="items"]')?.children || []
)
].filter((o) => o.nodeName.toLowerCase() !== "pzsh-menu-divider") : (s.push(r), s), []);
}
handleSlotChange(e) {
const t = e.target;
this.updateMenuAvailablity(), t.getAttribute("name") === "nav" && this.updateNavAvailability(), t.getAttribute("name") === "actions" && t.assignedNodes().forEach(
(s) => this.actionsObserver.observe(s, { childList: !0 })
);
}
handleActionsChange() {
this.updateMenuAvailablity();
}
updateMenuAvailablity() {
const e = this.hasMenuItems();
e !== this.available && this.triggerMenuChange(e, this.open), this.available = e;
}
hasMenuItems() {
const e = this.shadowRoot?.querySelector(
'slot[name="nav"]'
), t = this.shadowRoot?.querySelector(
'slot[name="actions"]'
), s = this.shadowRoot?.querySelector(
'slot[name="items"]'
);
return e.assignedNodes().length > 0 || (t.assignedNodes()[0] || void 0)?.children?.length > 0 || s.assignedNodes().length > 0;
}
/**
* Emit an event for the pzsh-topbar component to show/hide the
* hamburger menu button or update its open/closed state.
*/
triggerMenuChange(e, t) {
this.dispatchEvent(
new CustomEvent("pzsh-menu-change", { detail: { available: e, open: t } })
);
}
updateNavAvailability() {
const e = this.shadowRoot?.querySelector(
'slot[name="nav"]'
), t = e.assignedNodes().length > 0, s = e.assignedNodes()[0]?.querySelector(
"pzsh-subnav"
) != null;
(t !== this.hasNav || s !== this.hasSubnav) && this.triggerNavChange(t, s), this.hasNav = t, this.hasSubnav = s;
}
/**
* Emit an event for the pzsh-banner component to preserve spacing
* for the absolute positioned nav.
*/
triggerNavChange(e, t) {
this.dispatchEvent(
new CustomEvent("pzsh-menu-nav-change", {
detail: { hasNav: e, hasSubnav: t }
})
);
}
render() {
const e = {
open: this.open
};
return l`
<nav
class=${Y(e)}
@slotchange=${this.handleSlotChange}
role="menu"
>
<slot name="nav"></slot>
<slot name="actions"></slot>
<slot name="items"></slot>
</nav>
`;
}
};
j.styles = [
h,
u`
nav {
position: absolute;
top: var(--pzsh-topbar-height);
left: 0;
right: 0;
display: none;
max-height: calc(100vh - var(--pzsh-topbar-height));
overflow: hidden auto;
padding: calc(2 * var(--pzsh-spacer) - var(--pzsh-menu-item-gap))
calc(3 * var(--pzsh-spacer)) calc(2 * var(--pzsh-spacer))
calc(3 * var(--pzsh-spacer));
background-color: var(--pzsh-menu-bg);
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
z-index: var(--pzsh-menu-z-index);
}
nav.open {
display: block;
}
::slotted([slot="actions"]) {
display: flex;
flex-direction: column;
}
@media (min-width: ${h.breakpoint}px) {
nav {
display: block; /* Always visible even when "closed" */
position: static;
padding: 0;
background-color: transparent;
box-shadow: none;
}
/* Display the nav on the desktop in the banner using absolute positioning */
::slotted([slot="nav"]) {
position: absolute;
top: var(--pzsh-topbar-height);
left: 0;
right: 0;
}