@puzzleitc/puzzle-shell
Version:
The standard design for Puzzle tools
1,357 lines (1,328 loc) • 67.1 kB
JavaScript
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const I = globalThis, pe = I.ShadowRoot && (I.ShadyCSS === void 0 || I.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ce = Symbol(), fe = /* @__PURE__ */ new WeakMap();
let Se = class {
constructor(e, t, r) {
if (this._$cssResult$ = !0, r !== ce) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
this.cssText = e, this.t = t;
}
get styleSheet() {
let e = this.o;
const t = this.t;
if (pe && e === void 0) {
const r = t !== void 0 && t.length === 1;
r && (e = fe.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), r && fe.set(t, e));
}
return e;
}
toString() {
return this.cssText;
}
};
const qe = (o) => new Se(typeof o == "string" ? o : o + "", void 0, ce), u = (o, ...e) => {
const t = o.length === 1 ? o[0] : e.reduce((r, s, 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.");
})(s) + o[n + 1], o[0]);
return new Se(t, o, ce);
}, Ve = (o, e) => {
if (pe) o.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
else for (const t of e) {
const r = document.createElement("style"), s = I.litNonce;
s !== void 0 && r.setAttribute("nonce", s), r.textContent = t.cssText, o.appendChild(r);
}
}, be = pe ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((e) => {
let t = "";
for (const r of e.cssRules) t += r.cssText;
return qe(t);
})(o) : o;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const { is: We, defineProperty: Ke, getOwnPropertyDescriptor: Fe, getOwnPropertyNames: Ze, getOwnPropertySymbols: Je, getPrototypeOf: Ye } = Object, w = globalThis, ze = w.trustedTypes, Ge = ze ? ze.emptyScript : "", X = w.reactiveElementPolyfillSupport, k = (o, e) => o, q = { toAttribute(o, e) {
switch (e) {
case Boolean:
o = o ? Ge : null;
break;
case Object:
case Array:
o = o == null ? o : JSON.stringify(o);
}
return o;
}, fromAttribute(o, e) {
let t = o;
switch (e) {
case Boolean:
t = o !== null;
break;
case Number:
t = o === null ? null : Number(o);
break;
case Object:
case Array:
try {
t = JSON.parse(o);
} catch {
t = null;
}
}
return t;
} }, de = (o, e) => !We(o, e), ye = { attribute: !0, type: String, converter: q, reflect: !1, hasChanged: de };
Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), w.litPropertyMetadata ?? (w.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
class C extends HTMLElement {
static addInitializer(e) {
this._$Ei(), (this.l ?? (this.l = [])).push(e);
}
static get observedAttributes() {
return this.finalize(), this._$Eh && [...this._$Eh.keys()];
}
static createProperty(e, t = ye) {
if (t.state && (t.attribute = !1), this._$Ei(), this.elementProperties.set(e, t), !t.noAccessor) {
const r = Symbol(), s = this.getPropertyDescriptor(e, r, t);
s !== void 0 && Ke(this.prototype, e, s);
}
}
static getPropertyDescriptor(e, t, r) {
const { get: s, set: n } = Fe(this.prototype, e) ?? { get() {
return this[t];
}, set(a) {
this[t] = a;
} };
return { get() {
return s == null ? void 0 : s.call(this);
}, set(a) {
const h = s == null ? void 0 : s.call(this);
n.call(this, a), this.requestUpdate(e, h, r);
}, configurable: !0, enumerable: !0 };
}
static getPropertyOptions(e) {
return this.elementProperties.get(e) ?? ye;
}
static _$Ei() {
if (this.hasOwnProperty(k("elementProperties"))) return;
const e = Ye(this);
e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
}
static finalize() {
if (this.hasOwnProperty(k("finalized"))) return;
if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(k("properties"))) {
const t = this.properties, r = [...Ze(t), ...Je(t)];
for (const s of r) this.createProperty(s, t[s]);
}
const e = this[Symbol.metadata];
if (e !== null) {
const t = litPropertyMetadata.get(e);
if (t !== void 0) for (const [r, s] of t) this.elementProperties.set(r, s);
}
this._$Eh = /* @__PURE__ */ new Map();
for (const [t, r] of this.elementProperties) {
const s = this._$Eu(t, r);
s !== void 0 && this._$Eh.set(s, t);
}
this.elementStyles = this.finalizeStyles(this.styles);
}
static finalizeStyles(e) {
const t = [];
if (Array.isArray(e)) {
const r = new Set(e.flat(1 / 0).reverse());
for (const s of r) t.unshift(be(s));
} else e !== void 0 && t.push(be(e));
return t;
}
static _$Eu(e, t) {
const r = t.attribute;
return r === !1 ? void 0 : typeof r == "string" ? r : typeof e == "string" ? e.toLowerCase() : void 0;
}
constructor() {
super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
}
_$Ev() {
var e;
this._$ES = new Promise((t) => this.enableUpdating = t), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (e = this.constructor.l) == null || e.forEach((t) => t(this));
}
addController(e) {
var t;
(this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(e), this.renderRoot !== void 0 && this.isConnected && ((t = e.hostConnected) == null || t.call(e));
}
removeController(e) {
var t;
(t = this._$EO) == null || t.delete(e);
}
_$E_() {
const e = /* @__PURE__ */ new Map(), t = this.constructor.elementProperties;
for (const r of t.keys()) this.hasOwnProperty(r) && (e.set(r, this[r]), delete this[r]);
e.size > 0 && (this._$Ep = e);
}
createRenderRoot() {
const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
return Ve(e, this.constructor.elementStyles), e;
}
connectedCallback() {
var e;
this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (e = this._$EO) == null || e.forEach((t) => {
var r;
return (r = t.hostConnected) == null ? void 0 : r.call(t);
});
}
enableUpdating(e) {
}
disconnectedCallback() {
var e;
(e = this._$EO) == null || e.forEach((t) => {
var r;
return (r = t.hostDisconnected) == null ? void 0 : r.call(t);
});
}
attributeChangedCallback(e, t, r) {
this._$AK(e, r);
}
_$EC(e, t) {
var n;
const r = this.constructor.elementProperties.get(e), s = this.constructor._$Eu(e, r);
if (s !== void 0 && r.reflect === !0) {
const a = (((n = r.converter) == null ? void 0 : n.toAttribute) !== void 0 ? r.converter : q).toAttribute(t, r.type);
this._$Em = e, a == null ? this.removeAttribute(s) : this.setAttribute(s, a), this._$Em = null;
}
}
_$AK(e, t) {
var n;
const r = this.constructor, s = r._$Eh.get(e);
if (s !== void 0 && this._$Em !== s) {
const a = r.getPropertyOptions(s), h = typeof a.converter == "function" ? { fromAttribute: a.converter } : ((n = a.converter) == null ? void 0 : n.fromAttribute) !== void 0 ? a.converter : q;
this._$Em = s, this[s] = h.fromAttribute(t, a.type), this._$Em = null;
}
}
requestUpdate(e, t, r) {
if (e !== void 0) {
if (r ?? (r = this.constructor.getPropertyOptions(e)), !(r.hasChanged ?? de)(this[e], t)) return;
this.P(e, t, r);
}
this.isUpdatePending === !1 && (this._$ES = this._$ET());
}
P(e, t, r) {
this._$AL.has(e) || this._$AL.set(e, t), r.reflect === !0 && this._$Em !== e && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(e);
}
async _$ET() {
this.isUpdatePending = !0;
try {
await this._$ES;
} catch (t) {
Promise.reject(t);
}
const e = this.scheduleUpdate();
return e != null && await e, !this.isUpdatePending;
}
scheduleUpdate() {
return this.performUpdate();
}
performUpdate() {
var r;
if (!this.isUpdatePending) return;
if (!this.hasUpdated) {
if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
for (const [n, a] of this._$Ep) this[n] = a;
this._$Ep = void 0;
}
const s = this.constructor.elementProperties;
if (s.size > 0) for (const [n, a] of s) a.wrapped !== !0 || this._$AL.has(n) || this[n] === void 0 || this.P(n, this[n], a);
}
let e = !1;
const t = this._$AL;
try {
e = this.shouldUpdate(t), e ? (this.willUpdate(t), (r = this._$EO) == null || r.forEach((s) => {
var n;
return (n = s.hostUpdate) == null ? void 0 : n.call(s);
}), this.update(t)) : this._$EU();
} catch (s) {
throw e = !1, this._$EU(), s;
}
e && this._$AE(t);
}
willUpdate(e) {
}
_$AE(e) {
var t;
(t = this._$EO) == null || t.forEach((r) => {
var s;
return (s = r.hostUpdated) == null ? void 0 : s.call(r);
}), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
}
_$EU() {
this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
}
get updateComplete() {
return this.getUpdateComplete();
}
getUpdateComplete() {
return this._$ES;
}
shouldUpdate(e) {
return !0;
}
update(e) {
this._$Ej && (this._$Ej = this._$Ej.forEach((t) => this._$EC(t, this[t]))), this._$EU();
}
updated(e) {
}
firstUpdated(e) {
}
}
C.elementStyles = [], C.shadowRootOptions = { mode: "open" }, C[k("elementProperties")] = /* @__PURE__ */ new Map(), C[k("finalized")] = /* @__PURE__ */ new Map(), X == null || X({ ReactiveElement: C }), (w.reactiveElementVersions ?? (w.reactiveElementVersions = [])).push("2.0.4");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const N = globalThis, V = N.trustedTypes, $e = V ? V.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, Me = "$lit$", $ = `lit$${Math.random().toFixed(9).slice(2)}$`, Pe = "?" + $, Qe = `<${Pe}>`, A = document, L = () => A.createComment(""), D = (o) => o === null || typeof o != "object" && typeof o != "function", ue = Array.isArray, Xe = (o) => ue(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", ee = `[
\f\r]`, O = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, we = /-->/g, _e = />/g, _ = RegExp(`>|${ee}(?:([^\\s"'>=/]+)(${ee}*=${ee}*(?:[^
\f\r"'\`<>=]|("|')|))|$)`, "g"), xe = /'/g, Ae = /"/g, Oe = /^(?:script|style|textarea|title)$/i, et = (o) => (e, ...t) => ({ _$litType$: o, strings: e, values: t }), l = et(1), E = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), Ee = /* @__PURE__ */ new WeakMap(), x = A.createTreeWalker(A, 129);
function ke(o, e) {
if (!ue(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
return $e !== void 0 ? $e.createHTML(e) : e;
}
const tt = (o, e) => {
const t = o.length - 1, r = [];
let s, n = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", a = O;
for (let h = 0; h < t; h++) {
const i = o[h];
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 = we : m[1] !== void 0 ? a = _e : m[2] !== void 0 ? (Oe.test(m[2]) && (s = RegExp("</" + m[2], "g")), a = _) : m[3] !== void 0 && (a = _) : a === _ ? m[0] === ">" ? (a = s ?? O, c = -1) : m[1] === void 0 ? c = -2 : (c = a.lastIndex - m[2].length, v = m[1], a = m[3] === void 0 ? _ : m[3] === '"' ? Ae : xe) : a === Ae || a === xe ? a = _ : a === we || a === _e ? a = O : (a = _, s = void 0);
const y = a === _ && o[h + 1].startsWith("/>") ? " " : "";
n += a === O ? i + Qe : c >= 0 ? (r.push(v), i.slice(0, c) + Me + i.slice(c) + $ + y) : i + $ + (c === -2 ? h : y);
}
return [ke(o, n + (o[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), r];
};
class U {
constructor({ strings: e, _$litType$: t }, r) {
let s;
this.parts = [];
let n = 0, a = 0;
const h = e.length - 1, i = this.parts, [v, m] = tt(e, t);
if (this.el = U.createElement(v, r), x.currentNode = this.el.content, t === 2 || t === 3) {
const c = this.el.content.firstChild;
c.replaceWith(...c.childNodes);
}
for (; (s = x.nextNode()) !== null && i.length < h; ) {
if (s.nodeType === 1) {
if (s.hasAttributes()) for (const c of s.getAttributeNames()) if (c.endsWith(Me)) {
const b = m[a++], y = s.getAttribute(c).split($), B = /([.?@])?(.*)/.exec(b);
i.push({ type: 1, index: n, name: B[2], strings: y, ctor: B[1] === "." ? ot : B[1] === "?" ? rt : B[1] === "@" ? nt : Y }), s.removeAttribute(c);
} else c.startsWith($) && (i.push({ type: 6, index: n }), s.removeAttribute(c));
if (Oe.test(s.tagName)) {
const c = s.textContent.split($), b = c.length - 1;
if (b > 0) {
s.textContent = V ? V.emptyScript : "";
for (let y = 0; y < b; y++) s.append(c[y], L()), x.nextNode(), i.push({ type: 2, index: ++n });
s.append(c[b], L());
}
}
} else if (s.nodeType === 8) if (s.data === Pe) i.push({ type: 2, index: n });
else {
let c = -1;
for (; (c = s.data.indexOf($, c + 1)) !== -1; ) i.push({ type: 7, index: n }), c += $.length - 1;
}
n++;
}
}
static createElement(e, t) {
const r = A.createElement("template");
return r.innerHTML = e, r;
}
}
function S(o, e, t = o, r) {
var a, h;
if (e === E) return e;
let s = r !== void 0 ? (a = t.o) == null ? void 0 : a[r] : t.l;
const n = D(e) ? void 0 : e._$litDirective$;
return (s == null ? void 0 : s.constructor) !== n && ((h = s == null ? void 0 : s._$AO) == null || h.call(s, !1), n === void 0 ? s = void 0 : (s = new n(o), s._$AT(o, t, r)), r !== void 0 ? (t.o ?? (t.o = []))[r] = s : t.l = s), s !== void 0 && (e = S(o, s._$AS(o, e.values), s, r)), e;
}
class st {
constructor(e, t) {
this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
}
get parentNode() {
return this._$AM.parentNode;
}
get _$AU() {
return this._$AM._$AU;
}
u(e) {
const { el: { content: t }, parts: r } = this._$AD, s = ((e == null ? void 0 : e.creationScope) ?? A).importNode(t, !0);
x.currentNode = s;
let n = x.nextNode(), a = 0, h = 0, i = r[0];
for (; i !== void 0; ) {
if (a === i.index) {
let v;
i.type === 2 ? v = new H(n, n.nextSibling, this, e) : i.type === 1 ? v = new i.ctor(n, i.name, i.strings, this, e) : i.type === 6 && (v = new at(n, this, e)), this._$AV.push(v), i = r[++h];
}
a !== (i == null ? void 0 : i.index) && (n = x.nextNode(), a++);
}
return x.currentNode = A, s;
}
p(e) {
let t = 0;
for (const r of this._$AV) r !== void 0 && (r.strings !== void 0 ? (r._$AI(e, r, t), t += r.strings.length - 2) : r._$AI(e[t])), t++;
}
}
class H {
get _$AU() {
var e;
return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this.v;
}
constructor(e, t, r, s) {
this.type = 2, this._$AH = g, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = r, this.options = s, this.v = (s == null ? void 0 : s.isConnected) ?? !0;
}
get parentNode() {
let e = this._$AA.parentNode;
const t = this._$AM;
return t !== void 0 && (e == null ? void 0 : e.nodeType) === 11 && (e = t.parentNode), e;
}
get startNode() {
return this._$AA;
}
get endNode() {
return this._$AB;
}
_$AI(e, t = this) {
e = S(this, e, t), D(e) ? e === g || e == null || e === "" ? (this._$AH !== g && this._$AR(), this._$AH = g) : e !== this._$AH && e !== E && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Xe(e) ? this.k(e) : this._(e);
}
O(e) {
return this._$AA.parentNode.insertBefore(e, this._$AB);
}
T(e) {
this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
}
_(e) {
this._$AH !== g && D(this._$AH) ? this._$AA.nextSibling.data = e : this.T(A.createTextNode(e)), this._$AH = e;
}
$(e) {
var n;
const { values: t, _$litType$: r } = e, s = typeof r == "number" ? this._$AC(e) : (r.el === void 0 && (r.el = U.createElement(ke(r.h, r.h[0]), this.options)), r);
if (((n = this._$AH) == null ? void 0 : n._$AD) === s) this._$AH.p(t);
else {
const a = new st(s, this), h = a.u(this.options);
a.p(t), this.T(h), this._$AH = a;
}
}
_$AC(e) {
let t = Ee.get(e.strings);
return t === void 0 && Ee.set(e.strings, t = new U(e)), t;
}
k(e) {
ue(this._$AH) || (this._$AH = [], this._$AR());
const t = this._$AH;
let r, s = 0;
for (const n of e) s === t.length ? t.push(r = new H(this.O(L()), this.O(L()), this, this.options)) : r = t[s], r._$AI(n), s++;
s < t.length && (this._$AR(r && r._$AB.nextSibling, s), t.length = s);
}
_$AR(e = this._$AA.nextSibling, t) {
var r;
for ((r = this._$AP) == null ? void 0 : r.call(this, !1, !0, t); e && e !== this._$AB; ) {
const s = e.nextSibling;
e.remove(), e = s;
}
}
setConnected(e) {
var t;
this._$AM === void 0 && (this.v = e, (t = this._$AP) == null || t.call(this, e));
}
}
class Y {
get tagName() {
return this.element.tagName;
}
get _$AU() {
return this._$AM._$AU;
}
constructor(e, t, r, s, n) {
this.type = 1, this._$AH = g, this._$AN = void 0, this.element = e, this.name = t, this._$AM = s, 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(e, t = this, r, s) {
const n = this.strings;
let a = !1;
if (n === void 0) e = S(this, e, t, 0), a = !D(e) || e !== this._$AH && e !== E, a && (this._$AH = e);
else {
const h = e;
let i, v;
for (e = n[0], i = 0; i < n.length - 1; i++) v = S(this, h[r + i], t, i), v === E && (v = this._$AH[i]), a || (a = !D(v) || v !== this._$AH[i]), v === g ? e = g : e !== g && (e += (v ?? "") + n[i + 1]), this._$AH[i] = v;
}
a && !s && this.j(e);
}
j(e) {
e === g ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
}
}
class ot extends Y {
constructor() {
super(...arguments), this.type = 3;
}
j(e) {
this.element[this.name] = e === g ? void 0 : e;
}
}
class rt extends Y {
constructor() {
super(...arguments), this.type = 4;
}
j(e) {
this.element.toggleAttribute(this.name, !!e && e !== g);
}
}
class nt extends Y {
constructor(e, t, r, s, n) {
super(e, t, r, s, n), this.type = 5;
}
_$AI(e, t = this) {
if ((e = S(this, e, t, 0) ?? g) === E) return;
const r = this._$AH, s = e === g && r !== g || e.capture !== r.capture || e.once !== r.once || e.passive !== r.passive, n = e !== g && (r === g || s);
s && this.element.removeEventListener(this.name, this, r), n && this.element.addEventListener(this.name, this, e), this._$AH = e;
}
handleEvent(e) {
var t;
typeof this._$AH == "function" ? this._$AH.call(((t = this.options) == null ? void 0 : t.host) ?? this.element, e) : this._$AH.handleEvent(e);
}
}
class at {
constructor(e, t, r) {
this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = r;
}
get _$AU() {
return this._$AM._$AU;
}
_$AI(e) {
S(this, e);
}
}
const te = N.litHtmlPolyfillSupport;
te == null || te(U, H), (N.litHtmlVersions ?? (N.litHtmlVersions = [])).push("3.2.0");
const it = (o, e, t) => {
const r = (t == null ? void 0 : t.renderBefore) ?? e;
let s = r._$litPart$;
if (s === void 0) {
const n = (t == null ? void 0 : t.renderBefore) ?? null;
r._$litPart$ = s = new H(e.insertBefore(L(), n), n, void 0, t ?? {});
}
return s._$AI(o), s;
};
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
class d extends C {
constructor() {
super(...arguments), this.renderOptions = { host: this }, this.o = void 0;
}
createRenderRoot() {
var t;
const e = super.createRenderRoot();
return (t = this.renderOptions).renderBefore ?? (t.renderBefore = e.firstChild), e;
}
update(e) {
const t = this.render();
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this.o = it(t, this.renderRoot, this.renderOptions);
}
connectedCallback() {
var e;
super.connectedCallback(), (e = this.o) == null || e.setConnected(!0);
}
disconnectedCallback() {
var e;
super.disconnectedCallback(), (e = this.o) == null || e.setConnected(!1);
}
render() {
return E;
}
}
var Ce;
d._$litElement$ = !0, d.finalized = !0, (Ce = globalThis.litElementHydrateSupport) == null || Ce.call(globalThis, { LitElement: d });
const se = globalThis.litElementPolyfillSupport;
se == null || se({ LitElement: d });
(globalThis.litElementVersions ?? (globalThis.litElementVersions = [])).push("4.1.0");
function Ne() {
return typeof window < "u";
}
const lt = 800;
function Le() {
return Ne() && "pzshBreakpoint" in window && typeof window.pzshBreakpoint == "number" && window.pzshBreakpoint || lt;
}
const De = 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: ${Le()}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;
`, p = Object.assign(
u`
:host {
${De}
}
/* 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 Le();
}
}
);
function ht(o) {
var t;
if (!Ne()) return;
const e = document.createElement("style");
e.innerText = o.toString(), (t = document.querySelector("body")) == null || t.appendChild(e);
}
ht(u`
:root {
${De}
}
`);
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const f = (o) => (e, t) => {
t !== void 0 ? t.addInitializer(() => {
customElements.define(o, e);
}) : customElements.define(o, e);
};
var pt = Object.getOwnPropertyDescriptor, ct = (o, e, t, r) => {
for (var s = r > 1 ? void 0 : r ? pt(e, t) : e, n = o.length - 1, a; n >= 0; n--)
(a = o[n]) && (s = a(s) || s);
return s;
};
let oe = class extends d {
render() {
return l``;
}
};
oe.styles = [
p,
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);
}
`
];
oe = ct([
f("pzsh-backdrop")
], oe);
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const dt = { attribute: !0, type: String, converter: q, reflect: !1, hasChanged: de }, ut = (o = dt, e, t) => {
const { kind: r, metadata: s } = t;
let n = globalThis.litPropertyMetadata.get(s);
if (n === void 0 && globalThis.litPropertyMetadata.set(s, n = /* @__PURE__ */ new Map()), n.set(t.name, o), r === "accessor") {
const { name: a } = t;
return { set(h) {
const i = e.get.call(this);
e.set.call(this, h), this.requestUpdate(a, i, o);
}, init(h) {
return h !== void 0 && this.P(a, void 0, o), h;
} };
}
if (r === "setter") {
const { name: a } = t;
return function(h) {
const i = this[a];
e.call(this, h), this.requestUpdate(a, i, o);
};
}
throw Error("Unsupported decorator location: " + r);
};
function z(o) {
return (e, t) => typeof t == "object" ? ut(o, e, t) : ((r, s, n) => {
const a = s.hasOwnProperty(n);
return s.constructor.createProperty(n, a ? { ...r, wrapped: !0 } : r), a ? Object.getOwnPropertyDescriptor(s, n) : void 0;
})(o, e, t);
}
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
function P(o) {
return z({ ...o, state: !0, attribute: !1 });
}
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const vt = { ATTRIBUTE: 1 }, gt = (o) => (...e) => ({ _$litDirective$: o, values: e });
class mt {
constructor(e) {
}
get _$AU() {
return this._$AM._$AU;
}
_$AT(e, t, r) {
this.t = e, this._$AM = t, this.i = r;
}
_$AS(e, t) {
return this.update(e, t);
}
update(e, t) {
return this.render(...t);
}
}
/**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const G = gt(class extends mt {
constructor(o) {
var e;
if (super(o), o.type !== vt.ATTRIBUTE || o.name !== "class" || ((e = o.strings) == null ? void 0 : e.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
}
render(o) {
return " " + Object.keys(o).filter((e) => o[e]).join(" ") + " ";
}
update(o, [e]) {
var r, s;
if (this.st === void 0) {
this.st = /* @__PURE__ */ new Set(), o.strings !== void 0 && (this.nt = new Set(o.strings.join(" ").split(/\s/).filter((n) => n !== "")));
for (const n in e) e[n] && !((r = this.nt) != null && r.has(n)) && this.st.add(n);
return this.render(e);
}
const t = o.element.classList;
for (const n of this.st) n in e || (t.remove(n), this.st.delete(n));
for (const n in e) {
const a = !!e[n];
a === this.st.has(n) || (s = this.nt) != null && s.has(n) || (a ? (t.add(n), this.st.add(n)) : (t.remove(n), this.st.delete(n)));
}
return E;
}
});
var ft = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, ve = (o, e, t, r) => {
for (var s = r > 1 ? void 0 : r ? bt(e, t) : e, n = o.length - 1, a; n >= 0; n--)
(a = o[n]) && (s = (r ? a(e, t, s) : a(s)) || s);
return r && s && ft(e, t, s), s;
};
let T = 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(o) {
if (o.stopPropagation(), o instanceof CustomEvent) {
const { hasNav: e, hasSubnav: t } = o.detail;
this.hasNav = e, this.hasSubnav = t;
}
}
render() {
return l`
<slot name="tangram"></slot>
<div
class=${G({
content: !0,
"has-nav": this.hasNav,
"has-subnav": this.hasSubnav
})}
>
<slot name="content"></slot>
</div>
`;
}
};
T.styles = [
p,
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: ${p.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));
}
}
`
];
ve([
P()
], T.prototype, "hasNav", 2);
ve([
P()
], T.prototype, "hasSubnav", 2);
T = ve([
f("pzsh-banner")
], T);
var zt = Object.getOwnPropertyDescriptor, yt = (o, e, t, r) => {
for (var s = r > 1 ? void 0 : r ? zt(e, t) : e, n = o.length - 1, a; n >= 0; n--)
(a = o[n]) && (s = a(s) || s);
return s;
};
let re = class extends d {
render() {
return l` <slot></slot> `;
}
};
re.styles = [
p,
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;
}
`
];
re = yt([
f("pzsh-container")
], re);
var $t = Object.getOwnPropertyDescriptor, wt = (o, e, t, r) => {
for (var s = r > 1 ? void 0 : r ? $t(e, t) : e, n = o.length - 1, a; n >= 0; n--)
(a = o[n]) && (s = a(s) || s);
return s;
};
let ne = 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>
`;
}
};
ne.styles = [
p,
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: ${p.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;
}
}
`
];
ne = wt([
f("pzsh-footer")
], ne);
var _t = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, Ue = (o, e, t, r) => {
for (var s = r > 1 ? void 0 : r ? xt(e, t) : e, n = o.length - 1, a; n >= 0; n--)
(a = o[n]) && (s = (r ? a(e, t, s) : a(s)) || s);
return r && s && _t(e, t, s), s;
};
let W = class extends d {
constructor() {
super(...arguments), this.href = "#";
}
render() {
return l`<a href="${this.href}">
<slot></slot>
</a>`;
}
};
W.styles = [
p,
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: ${p.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;
}
}
`
];
Ue([
z({ type: String })
], W.prototype, "href", 2);
W = Ue([
f("pzsh-footer-link")
], W);
var At = Object.getOwnPropertyDescriptor, Et = (o, e, t, r) => {
for (var s = r > 1 ? void 0 : r ? At(e, t) : e, n = o.length - 1, a; n >= 0; n--)
(a = o[n]) && (s = a(s) || s);
return s;
};
let ae = 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>
`;
}
};
ae.styles = [
p,
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: ${p.breakpoint}px) {
:host {
gap: calc(5 * var(--pzsh-spacer));
}
}
`
];
ae = Et([
f("pzsh-hero")
], ae);
var Ct = Object.defineProperty, St = Object.getOwnPropertyDescriptor, Te = (o, e, t, r) => {
for (var s = r > 1 ? void 0 : r ? St(e, t) : e, n = o.length - 1, a; n >= 0; n--)
(a = o[n]) && (s = (r ? a(e, t, s) : a(s)) || s);
return r && s && Ct(e, t, s), s;
};
const Mt = {
// 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 K = class extends d {
constructor() {
super(...arguments), this.name = "";
}
render() {
return l`${Mt[this.name]}`;
}
};
K.styles = [
p,
u`
:host {
display: inline-block;
}
svg {
width: 24px;
height: 24px;
}
`
];
Te([
z({ type: String })
], K.prototype, "name", 2);
K = Te([
f("pzsh-icon")
], K);
function je(o, e) {
return o && o instanceof HTMLElement && (o.nodeName.toLowerCase() === e || o.closest(e) != null);
}
function Pt(o) {
o.getBoundingClientRect().bottom > window.innerHeight && o.scrollIntoView(!1), o.getBoundingClientRect().top < 0 && o.scrollIntoView();
}
function Re(o, e) {
if (e instanceof KeyboardEvent && e.type === "keydown" && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
const t = o();
let r = t.findIndex((n) => n === document.activeElement);
e.key === "ArrowUp" ? r -= 1 : e.key === "ArrowDown" && (r += 1);
const s = t[r];
s && (s.focus(), Pt(s), e.preventDefault());
}
}
var Ot = Object.defineProperty, kt = Object.getOwnPropertyDescriptor, ge = (o, e, t, r) => {
for (var s = r > 1 ? void 0 : r ? kt(e, t) : e, n = o.length - 1, a; n >= 0; n--)
(a = o[n]) && (s = (r ? a(e, t, s) : a(s)) || s);
return r && s && Ot(e, t, s), s;
};
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(
(o) => o.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(o) {
o == null || o.stopPropagation(), this.open = !this.open, this.toggleBackdrop(), this.triggerMenuChange(this.available, this.open);
}
toggleBackdrop() {
var t;
const o = document.querySelector("pzsh-backdrop");
o && o.remove(), this.open && ((t = document.querySelector("body")) == null || t.appendChild(document.createElement("pzsh-backdrop")));
const e = document.querySelector(
this.scrollContainerSelector
);
e && (e.style.overflowY = this.open ? "hidden" : "auto");
}
handleEvent(o) {
this.handleMenuClose(o), this.handleMenuNavigation(o);
}
handleMenuClose(o) {
this.open && (o.type === "click" && !je(o.target, "pzsh-topbar") || o.type === "keydown" && o instanceof KeyboardEvent && (o.key === "Escape" || o.key === "Tab")) && this.toggleMenu(o);
}
handleMenuNavigation(o) {
this.open && Re(this.getMenuItems.bind(this), o);
}
/**
* Flatten all menu actions & dropdown items to an array
*/
getMenuItems() {
var t;
const o = Array.from(
this.querySelectorAll("[slot='nav'] pzsh-nav-item")
), e = Array.from(
((t = this.querySelector("[slot='actions']")) == null ? void 0 : t.children) || []
);
return [...o, ...e].reduce((r, s) => {
var n;
return s.nodeName.toLowerCase() === "pzsh-menu-dropdown" ? [
...r,
...Array.from(
((n = s.querySelector('[slot="items"]')) == null ? void 0 : n.children) || []
)
].filter((a) => a.nodeName.toLowerCase() !== "pzsh-menu-divider") : (r.push(s), r);
}, []);
}
handleSlotChange(o) {
const e = o.target;
this.updateMenuAvailablity(), e.getAttribute("name") === "nav" && this.updateNavAvailability(), e.getAttribute("name") === "actions" && e.assignedNodes().forEach(
(t) => this.actionsObserver.observe(t, { childList: !0 })
);
}
handleActionsChange() {
this.updateMenuAvailablity();
}
updateMenuAvailablity() {
const o = this.hasMenuItems();
o !== this.available && this.triggerMenuChange(o, this.open), this.available = o;
}
hasMenuItems() {
var r, s, n, a, h;
const o = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
'slot[name="nav"]'
), e = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
'slot[name="actions"]'
), t = (n = this.shadowRoot) == null ? void 0 : n.querySelector(
'slot[name="items"]'
);
return o.assignedNodes().length > 0 || ((h = (a = e.assignedNodes()[0] || void 0) == null ? void 0 : a.children) == null ? void 0 : h.length) > 0 || t.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(o, e) {
this.dispatchEvent(
new CustomEvent("pzsh-menu-change", { detail: { available: o, open: e } })
);
}
updateNavAvailability() {
var r, s;
const o = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
'slot[name="nav"]'
), e = o.assignedNodes().length > 0, t = ((s = o.assignedNodes()[0]) == null ? void 0 : s.querySelector(
"pzsh-subnav"
)) != null;
(e !== this.hasNav || t !== this.hasSubnav) && this.triggerNavChange(e, t), this.hasNav = e, this.hasSubnav = t;
}
/**
* Emit an event for the pzsh-banner component to preserve spacing
* for the absolute positioned nav.
*/
triggerNavChange(o, e) {
this.dispatchEvent(
new CustomEvent("pzsh-menu-nav-change", {
detail: { hasNav: o, hasSubnav: e }
})
);
}
render() {
const o = {
open: this.open
};
return l`
<nav
class=${G(o)}
@slotchange=${this.h