@mcgill-wsg/mcgill-ds
Version:
McGill Design System - a set of components and styles to adhere to McGill University standards.
1,249 lines (1,237 loc) • 66.5 kB
JavaScript
var Wt = Object.defineProperty;
var Vt = (s, t, e) => t in s ? Wt(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
var g = (s, t, e) => Vt(s, typeof t != "symbol" ? t + "" : t, e);
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const D = window, at = D.ShadowRoot && (D.ShadyCSS === void 0 || D.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, rt = Symbol(), ct = /* @__PURE__ */ new WeakMap();
let At = class {
constructor(t, e, i) {
if (this._$cssResult$ = !0, i !== rt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
this.cssText = t, this.t = e;
}
get styleSheet() {
let t = this.o;
const e = this.t;
if (at && t === void 0) {
const i = e !== void 0 && e.length === 1;
i && (t = ct.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && ct.set(e, t));
}
return t;
}
toString() {
return this.cssText;
}
};
const St = (s) => new At(typeof s == "string" ? s : s + "", void 0, rt), y = (s, ...t) => {
const e = s.length === 1 ? s[0] : t.reduce((i, o, n) => i + ((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) + s[n + 1], s[0]);
return new At(e, s, rt);
}, Kt = (s, t) => {
at ? s.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet) : t.forEach((e) => {
const i = document.createElement("style"), o = D.litNonce;
o !== void 0 && i.setAttribute("nonce", o), i.textContent = e.cssText, s.appendChild(i);
});
}, ut = at ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
let e = "";
for (const i of t.cssRules) e += i.cssText;
return St(e);
})(s) : s;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var V;
const I = window, pt = I.trustedTypes, Zt = pt ? pt.emptyScript : "", gt = I.reactiveElementPolyfillSupport, tt = { toAttribute(s, t) {
switch (t) {
case Boolean:
s = s ? Zt : null;
break;
case Object:
case Array:
s = s == null ? s : JSON.stringify(s);
}
return s;
}, fromAttribute(s, t) {
let e = s;
switch (t) {
case Boolean:
e = s !== null;
break;
case Number:
e = s === null ? null : Number(s);
break;
case Object:
case Array:
try {
e = JSON.parse(s);
} catch {
e = null;
}
}
return e;
} }, kt = (s, t) => t !== s && (t == t || s == s), K = { attribute: !0, type: String, converter: tt, reflect: !1, hasChanged: kt }, et = "finalized";
let x = class extends HTMLElement {
constructor() {
super(), this._$Ei = /* @__PURE__ */ new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$El = null, this._$Eu();
}
static addInitializer(t) {
var e;
this.finalize(), ((e = this.h) !== null && e !== void 0 ? e : this.h = []).push(t);
}
static get observedAttributes() {
this.finalize();
const t = [];
return this.elementProperties.forEach((e, i) => {
const o = this._$Ep(i, e);
o !== void 0 && (this._$Ev.set(o, i), t.push(o));
}), t;
}
static createProperty(t, e = K) {
if (e.state && (e.attribute = !1), this.finalize(), this.elementProperties.set(t, e), !e.noAccessor && !this.prototype.hasOwnProperty(t)) {
const i = typeof t == "symbol" ? Symbol() : "__" + t, o = this.getPropertyDescriptor(t, i, e);
o !== void 0 && Object.defineProperty(this.prototype, t, o);
}
}
static getPropertyDescriptor(t, e, i) {
return { get() {
return this[e];
}, set(o) {
const n = this[t];
this[e] = o, this.requestUpdate(t, n, i);
}, configurable: !0, enumerable: !0 };
}
static getPropertyOptions(t) {
return this.elementProperties.get(t) || K;
}
static finalize() {
if (this.hasOwnProperty(et)) return !1;
this[et] = !0;
const t = Object.getPrototypeOf(this);
if (t.finalize(), t.h !== void 0 && (this.h = [...t.h]), this.elementProperties = new Map(t.elementProperties), this._$Ev = /* @__PURE__ */ new Map(), this.hasOwnProperty("properties")) {
const e = this.properties, i = [...Object.getOwnPropertyNames(e), ...Object.getOwnPropertySymbols(e)];
for (const o of i) this.createProperty(o, e[o]);
}
return this.elementStyles = this.finalizeStyles(this.styles), !0;
}
static finalizeStyles(t) {
const e = [];
if (Array.isArray(t)) {
const i = new Set(t.flat(1 / 0).reverse());
for (const o of i) e.unshift(ut(o));
} else t !== void 0 && e.push(ut(t));
return e;
}
static _$Ep(t, e) {
const i = e.attribute;
return i === !1 ? void 0 : typeof i == "string" ? i : typeof t == "string" ? t.toLowerCase() : void 0;
}
_$Eu() {
var t;
this._$E_ = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$Eg(), this.requestUpdate(), (t = this.constructor.h) === null || t === void 0 || t.forEach((e) => e(this));
}
addController(t) {
var e, i;
((e = this._$ES) !== null && e !== void 0 ? e : this._$ES = []).push(t), this.renderRoot !== void 0 && this.isConnected && ((i = t.hostConnected) === null || i === void 0 || i.call(t));
}
removeController(t) {
var e;
(e = this._$ES) === null || e === void 0 || e.splice(this._$ES.indexOf(t) >>> 0, 1);
}
_$Eg() {
this.constructor.elementProperties.forEach((t, e) => {
this.hasOwnProperty(e) && (this._$Ei.set(e, this[e]), delete this[e]);
});
}
createRenderRoot() {
var t;
const e = (t = this.shadowRoot) !== null && t !== void 0 ? t : this.attachShadow(this.constructor.shadowRootOptions);
return Kt(e, this.constructor.elementStyles), e;
}
connectedCallback() {
var t;
this.renderRoot === void 0 && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$ES) === null || t === void 0 || t.forEach((e) => {
var i;
return (i = e.hostConnected) === null || i === void 0 ? void 0 : i.call(e);
});
}
enableUpdating(t) {
}
disconnectedCallback() {
var t;
(t = this._$ES) === null || t === void 0 || t.forEach((e) => {
var i;
return (i = e.hostDisconnected) === null || i === void 0 ? void 0 : i.call(e);
});
}
attributeChangedCallback(t, e, i) {
this._$AK(t, i);
}
_$EO(t, e, i = K) {
var o;
const n = this.constructor._$Ep(t, i);
if (n !== void 0 && i.reflect === !0) {
const a = (((o = i.converter) === null || o === void 0 ? void 0 : o.toAttribute) !== void 0 ? i.converter : tt).toAttribute(e, i.type);
this._$El = t, a == null ? this.removeAttribute(n) : this.setAttribute(n, a), this._$El = null;
}
}
_$AK(t, e) {
var i;
const o = this.constructor, n = o._$Ev.get(t);
if (n !== void 0 && this._$El !== n) {
const a = o.getPropertyOptions(n), h = typeof a.converter == "function" ? { fromAttribute: a.converter } : ((i = a.converter) === null || i === void 0 ? void 0 : i.fromAttribute) !== void 0 ? a.converter : tt;
this._$El = n, this[n] = h.fromAttribute(e, a.type), this._$El = null;
}
}
requestUpdate(t, e, i) {
let o = !0;
t !== void 0 && (((i = i || this.constructor.getPropertyOptions(t)).hasChanged || kt)(this[t], e) ? (this._$AL.has(t) || this._$AL.set(t, e), i.reflect === !0 && this._$El !== t && (this._$EC === void 0 && (this._$EC = /* @__PURE__ */ new Map()), this._$EC.set(t, i))) : o = !1), !this.isUpdatePending && o && (this._$E_ = this._$Ej());
}
async _$Ej() {
this.isUpdatePending = !0;
try {
await this._$E_;
} catch (e) {
Promise.reject(e);
}
const t = this.scheduleUpdate();
return t != null && await t, !this.isUpdatePending;
}
scheduleUpdate() {
return this.performUpdate();
}
performUpdate() {
var t;
if (!this.isUpdatePending) return;
this.hasUpdated, this._$Ei && (this._$Ei.forEach((o, n) => this[n] = o), this._$Ei = void 0);
let e = !1;
const i = this._$AL;
try {
e = this.shouldUpdate(i), e ? (this.willUpdate(i), (t = this._$ES) === null || t === void 0 || t.forEach((o) => {
var n;
return (n = o.hostUpdate) === null || n === void 0 ? void 0 : n.call(o);
}), this.update(i)) : this._$Ek();
} catch (o) {
throw e = !1, this._$Ek(), o;
}
e && this._$AE(i);
}
willUpdate(t) {
}
_$AE(t) {
var e;
(e = this._$ES) === null || e === void 0 || e.forEach((i) => {
var o;
return (o = i.hostUpdated) === null || o === void 0 ? void 0 : o.call(i);
}), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
}
_$Ek() {
this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
}
get updateComplete() {
return this.getUpdateComplete();
}
getUpdateComplete() {
return this._$E_;
}
shouldUpdate(t) {
return !0;
}
update(t) {
this._$EC !== void 0 && (this._$EC.forEach((e, i) => this._$EO(i, this[i], e)), this._$EC = void 0), this._$Ek();
}
updated(t) {
}
firstUpdated(t) {
}
};
x[et] = !0, x.elementProperties = /* @__PURE__ */ new Map(), x.elementStyles = [], x.shadowRootOptions = { mode: "open" }, gt == null || gt({ ReactiveElement: x }), ((V = I.reactiveElementVersions) !== null && V !== void 0 ? V : I.reactiveElementVersions = []).push("1.6.3");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var Z;
const j = window, H = j.trustedTypes, mt = H ? H.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, it = "$lit$", w = `lit$${(Math.random() + "").slice(9)}$`, Ct = "?" + w, Ft = `<${Ct}>`, C = document, L = () => C.createComment(""), O = (s) => s === null || typeof s != "object" && typeof s != "function", Et = Array.isArray, Jt = (s) => Et(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", F = `[
\f\r]`, P = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, vt = /-->/g, ft = />/g, S = RegExp(`>|${F}(?:([^\\s"'>=/]+)(${F}*=${F}*(?:[^
\f\r"'\`<>=]|("|')|))|$)`, "g"), bt = /'/g, _t = /"/g, xt = /^(?:script|style|textarea|title)$/i, Qt = (s) => (t, ...e) => ({ _$litType$: s, strings: t, values: e }), l = Qt(1), E = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), yt = /* @__PURE__ */ new WeakMap(), k = C.createTreeWalker(C, 129, null, !1);
function Ht(s, t) {
if (!Array.isArray(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
return mt !== void 0 ? mt.createHTML(t) : t;
}
const Xt = (s, t) => {
const e = s.length - 1, i = [];
let o, n = t === 2 ? "<svg>" : "", a = P;
for (let h = 0; h < e; h++) {
const r = s[h];
let d, c, u = -1, m = 0;
for (; m < r.length && (a.lastIndex = m, c = a.exec(r), c !== null); ) m = a.lastIndex, a === P ? c[1] === "!--" ? a = vt : c[1] !== void 0 ? a = ft : c[2] !== void 0 ? (xt.test(c[2]) && (o = RegExp("</" + c[2], "g")), a = S) : c[3] !== void 0 && (a = S) : a === S ? c[0] === ">" ? (a = o ?? P, u = -1) : c[1] === void 0 ? u = -2 : (u = a.lastIndex - c[2].length, d = c[1], a = c[3] === void 0 ? S : c[3] === '"' ? _t : bt) : a === _t || a === bt ? a = S : a === vt || a === ft ? a = P : (a = S, o = void 0);
const _ = a === S && s[h + 1].startsWith("/>") ? " " : "";
n += a === P ? r + Ft : u >= 0 ? (i.push(d), r.slice(0, u) + it + r.slice(u) + w + _) : r + w + (u === -2 ? (i.push(void 0), h) : _);
}
return [Ht(s, n + (s[e] || "<?>") + (t === 2 ? "</svg>" : "")), i];
};
class U {
constructor({ strings: t, _$litType$: e }, i) {
let o;
this.parts = [];
let n = 0, a = 0;
const h = t.length - 1, r = this.parts, [d, c] = Xt(t, e);
if (this.el = U.createElement(d, i), k.currentNode = this.el.content, e === 2) {
const u = this.el.content, m = u.firstChild;
m.remove(), u.append(...m.childNodes);
}
for (; (o = k.nextNode()) !== null && r.length < h; ) {
if (o.nodeType === 1) {
if (o.hasAttributes()) {
const u = [];
for (const m of o.getAttributeNames()) if (m.endsWith(it) || m.startsWith(w)) {
const _ = c[a++];
if (u.push(m), _ !== void 0) {
const Gt = o.getAttribute(_.toLowerCase() + it).split(w), z = /([.?@])?(.*)/.exec(_);
r.push({ type: 1, index: n, name: z[2], strings: Gt, ctor: z[1] === "." ? te : z[1] === "?" ? ie : z[1] === "@" ? se : W });
} else r.push({ type: 6, index: n });
}
for (const m of u) o.removeAttribute(m);
}
if (xt.test(o.tagName)) {
const u = o.textContent.split(w), m = u.length - 1;
if (m > 0) {
o.textContent = H ? H.emptyScript : "";
for (let _ = 0; _ < m; _++) o.append(u[_], L()), k.nextNode(), r.push({ type: 2, index: ++n });
o.append(u[m], L());
}
}
} else if (o.nodeType === 8) if (o.data === Ct) r.push({ type: 2, index: n });
else {
let u = -1;
for (; (u = o.data.indexOf(w, u + 1)) !== -1; ) r.push({ type: 7, index: n }), u += w.length - 1;
}
n++;
}
}
static createElement(t, e) {
const i = C.createElement("template");
return i.innerHTML = t, i;
}
}
function T(s, t, e = s, i) {
var o, n, a, h;
if (t === E) return t;
let r = i !== void 0 ? (o = e._$Co) === null || o === void 0 ? void 0 : o[i] : e._$Cl;
const d = O(t) ? void 0 : t._$litDirective$;
return (r == null ? void 0 : r.constructor) !== d && ((n = r == null ? void 0 : r._$AO) === null || n === void 0 || n.call(r, !1), d === void 0 ? r = void 0 : (r = new d(s), r._$AT(s, e, i)), i !== void 0 ? ((a = (h = e)._$Co) !== null && a !== void 0 ? a : h._$Co = [])[i] = r : e._$Cl = r), r !== void 0 && (t = T(s, r._$AS(s, t.values), r, i)), t;
}
class Yt {
constructor(t, e) {
this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
}
get parentNode() {
return this._$AM.parentNode;
}
get _$AU() {
return this._$AM._$AU;
}
u(t) {
var e;
const { el: { content: i }, parts: o } = this._$AD, n = ((e = t == null ? void 0 : t.creationScope) !== null && e !== void 0 ? e : C).importNode(i, !0);
k.currentNode = n;
let a = k.nextNode(), h = 0, r = 0, d = o[0];
for (; d !== void 0; ) {
if (h === d.index) {
let c;
d.type === 2 ? c = new B(a, a.nextSibling, this, t) : d.type === 1 ? c = new d.ctor(a, d.name, d.strings, this, t) : d.type === 6 && (c = new oe(a, this, t)), this._$AV.push(c), d = o[++r];
}
h !== (d == null ? void 0 : d.index) && (a = k.nextNode(), h++);
}
return k.currentNode = C, n;
}
v(t) {
let e = 0;
for (const i of this._$AV) i !== void 0 && (i.strings !== void 0 ? (i._$AI(t, i, e), e += i.strings.length - 2) : i._$AI(t[e])), e++;
}
}
class B {
constructor(t, e, i, o) {
var n;
this.type = 2, this._$AH = p, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = i, this.options = o, this._$Cp = (n = o == null ? void 0 : o.isConnected) === null || n === void 0 || n;
}
get _$AU() {
var t, e;
return (e = (t = this._$AM) === null || t === void 0 ? void 0 : t._$AU) !== null && e !== void 0 ? e : this._$Cp;
}
get parentNode() {
let t = this._$AA.parentNode;
const e = this._$AM;
return e !== void 0 && (t == null ? void 0 : t.nodeType) === 11 && (t = e.parentNode), t;
}
get startNode() {
return this._$AA;
}
get endNode() {
return this._$AB;
}
_$AI(t, e = this) {
t = T(this, t, e), O(t) ? t === p || t == null || t === "" ? (this._$AH !== p && this._$AR(), this._$AH = p) : t !== this._$AH && t !== E && this._(t) : t._$litType$ !== void 0 ? this.g(t) : t.nodeType !== void 0 ? this.$(t) : Jt(t) ? this.T(t) : this._(t);
}
k(t) {
return this._$AA.parentNode.insertBefore(t, this._$AB);
}
$(t) {
this._$AH !== t && (this._$AR(), this._$AH = this.k(t));
}
_(t) {
this._$AH !== p && O(this._$AH) ? this._$AA.nextSibling.data = t : this.$(C.createTextNode(t)), this._$AH = t;
}
g(t) {
var e;
const { values: i, _$litType$: o } = t, n = typeof o == "number" ? this._$AC(t) : (o.el === void 0 && (o.el = U.createElement(Ht(o.h, o.h[0]), this.options)), o);
if (((e = this._$AH) === null || e === void 0 ? void 0 : e._$AD) === n) this._$AH.v(i);
else {
const a = new Yt(n, this), h = a.u(this.options);
a.v(i), this.$(h), this._$AH = a;
}
}
_$AC(t) {
let e = yt.get(t.strings);
return e === void 0 && yt.set(t.strings, e = new U(t)), e;
}
T(t) {
Et(this._$AH) || (this._$AH = [], this._$AR());
const e = this._$AH;
let i, o = 0;
for (const n of t) o === e.length ? e.push(i = new B(this.k(L()), this.k(L()), this, this.options)) : i = e[o], i._$AI(n), o++;
o < e.length && (this._$AR(i && i._$AB.nextSibling, o), e.length = o);
}
_$AR(t = this._$AA.nextSibling, e) {
var i;
for ((i = this._$AP) === null || i === void 0 || i.call(this, !1, !0, e); t && t !== this._$AB; ) {
const o = t.nextSibling;
t.remove(), t = o;
}
}
setConnected(t) {
var e;
this._$AM === void 0 && (this._$Cp = t, (e = this._$AP) === null || e === void 0 || e.call(this, t));
}
}
class W {
constructor(t, e, i, o, n) {
this.type = 1, this._$AH = p, this._$AN = void 0, this.element = t, this.name = e, this._$AM = o, this.options = n, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = p;
}
get tagName() {
return this.element.tagName;
}
get _$AU() {
return this._$AM._$AU;
}
_$AI(t, e = this, i, o) {
const n = this.strings;
let a = !1;
if (n === void 0) t = T(this, t, e, 0), a = !O(t) || t !== this._$AH && t !== E, a && (this._$AH = t);
else {
const h = t;
let r, d;
for (t = n[0], r = 0; r < n.length - 1; r++) d = T(this, h[i + r], e, r), d === E && (d = this._$AH[r]), a || (a = !O(d) || d !== this._$AH[r]), d === p ? t = p : t !== p && (t += (d ?? "") + n[r + 1]), this._$AH[r] = d;
}
a && !o && this.j(t);
}
j(t) {
t === p ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
}
}
class te extends W {
constructor() {
super(...arguments), this.type = 3;
}
j(t) {
this.element[this.name] = t === p ? void 0 : t;
}
}
const ee = H ? H.emptyScript : "";
class ie extends W {
constructor() {
super(...arguments), this.type = 4;
}
j(t) {
t && t !== p ? this.element.setAttribute(this.name, ee) : this.element.removeAttribute(this.name);
}
}
class se extends W {
constructor(t, e, i, o, n) {
super(t, e, i, o, n), this.type = 5;
}
_$AI(t, e = this) {
var i;
if ((t = (i = T(this, t, e, 0)) !== null && i !== void 0 ? i : p) === E) return;
const o = this._$AH, n = t === p && o !== p || t.capture !== o.capture || t.once !== o.once || t.passive !== o.passive, a = t !== p && (o === p || n);
n && this.element.removeEventListener(this.name, this, o), a && this.element.addEventListener(this.name, this, t), this._$AH = t;
}
handleEvent(t) {
var e, i;
typeof this._$AH == "function" ? this._$AH.call((i = (e = this.options) === null || e === void 0 ? void 0 : e.host) !== null && i !== void 0 ? i : this.element, t) : this._$AH.handleEvent(t);
}
}
class oe {
constructor(t, e, i) {
this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = i;
}
get _$AU() {
return this._$AM._$AU;
}
_$AI(t) {
T(this, t);
}
}
const $t = j.litHtmlPolyfillSupport;
$t == null || $t(U, B), ((Z = j.litHtmlVersions) !== null && Z !== void 0 ? Z : j.litHtmlVersions = []).push("2.8.0");
const ne = (s, t, e) => {
var i, o;
const n = (i = e == null ? void 0 : e.renderBefore) !== null && i !== void 0 ? i : t;
let a = n._$litPart$;
if (a === void 0) {
const h = (o = e == null ? void 0 : e.renderBefore) !== null && o !== void 0 ? o : null;
n._$litPart$ = a = new B(t.insertBefore(L(), h), h, void 0, e ?? {});
}
return a._$AI(s), a;
};
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var J, Q;
let v = class extends x {
constructor() {
super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
}
createRenderRoot() {
var t, e;
const i = super.createRenderRoot();
return (t = (e = this.renderOptions).renderBefore) !== null && t !== void 0 || (e.renderBefore = i.firstChild), i;
}
update(t) {
const e = this.render();
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = ne(e, this.renderRoot, this.renderOptions);
}
connectedCallback() {
var t;
super.connectedCallback(), (t = this._$Do) === null || t === void 0 || t.setConnected(!0);
}
disconnectedCallback() {
var t;
super.disconnectedCallback(), (t = this._$Do) === null || t === void 0 || t.setConnected(!1);
}
render() {
return E;
}
};
v.finalized = !0, v._$litElement$ = !0, (J = globalThis.litElementHydrateSupport) === null || J === void 0 || J.call(globalThis, { LitElement: v });
const wt = globalThis.litElementPolyfillSupport;
wt == null || wt({ LitElement: v });
((Q = globalThis.litElementVersions) !== null && Q !== void 0 ? Q : globalThis.litElementVersions = []).push("3.3.3");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const lt = (s) => (t) => typeof t == "function" ? ((e, i) => (customElements.define(e, i), i))(s, t) : ((e, i) => {
const { kind: o, elements: n } = i;
return { kind: o, elements: n, finisher(a) {
customElements.define(e, a);
} };
})(s, t);
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const ae = (s, t) => t.kind === "method" && t.descriptor && !("value" in t.descriptor) ? { ...t, finisher(e) {
e.createProperty(t.key, s);
} } : { kind: "field", key: Symbol(), placement: "own", descriptor: {}, originalKey: t.key, initializer() {
typeof t.initializer == "function" && (this[t.key] = t.initializer.call(this));
}, finisher(e) {
e.createProperty(t.key, s);
} }, re = (s, t, e) => {
t.constructor.createProperty(e, s);
};
function $(s) {
return (t, e) => e !== void 0 ? re(s, t, e) : ae(s, t);
}
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const le = ({ finisher: s, descriptor: t }) => (e, i) => {
var o;
if (i === void 0) {
const n = (o = e.originalKey) !== null && o !== void 0 ? o : e.key, a = t != null ? { kind: "method", placement: "prototype", key: n, descriptor: t(e.key) } : { ...e, key: n };
return s != null && (a.finisher = function(h) {
s(h, n);
}), a;
}
{
const n = e.constructor;
t !== void 0 && Object.defineProperty(e, i, t(i)), s == null || s(n, i);
}
};
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var X;
const de = ((X = window.HTMLSlotElement) === null || X === void 0 ? void 0 : X.prototype.assignedElements) != null ? (s, t) => s.assignedElements(t) : (s, t) => s.assignedNodes(t).filter((e) => e.nodeType === Node.ELEMENT_NODE);
function Tt(s) {
const { slot: t, selector: e } = s ?? {};
return le({ descriptor: (i) => ({ get() {
var o;
const n = "slot" + (t ? `[name=${t}]` : ":not([name])"), a = (o = this.renderRoot) === null || o === void 0 ? void 0 : o.querySelector(n), h = a != null ? de(a, s) : [];
return e ? h.filter((r) => r.matches(e)) : h;
}, enumerable: !0, configurable: !0 }) });
}
const he = ":root{--animation-duration: .6s;--animation-duration-fast: .3s;--animation-duration-slow: 1.2s;--loading-animation: fade-in var(--animation-duration) ease-in .3s backwards;--fixed-spacing-unit: .5rem;container-type:inline-size}.sr-only:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@keyframes fade-in{0%{opacity:0%}to{opacity:100%}}@keyframes snap-in{0%{width:0;height:0;overflow:hidden}to{height:auto;width:auto;overflow:auto}}mds-drawer{animation:var(--loading-animation)}mds-drawer:not(:defined){animation:snap-in .3s;animation-fill-mode:backwards;animation-delay:.4s;display:block}mds-extra-details{display:block;animation:var(--loading-animation)}mds-extra-details:not(:defined) *{animation:var(--loading-animation)}open-close-toggle,extra-details{animation:wc-fade-in .6s ease-in;display:inline-block}mds-extra-details:not(:defined){visibility:hidden}mds-placeholder,mds-placeholder:not(:defined){display:block;opacity:0%}mds-placeholder[ready]{animation:var(--loading-animation);opacity:100%}mds-toggle-scrim[onState]{display:block;position:absolute;top:0;bottom:0;height:100%;width:100%;z-index:999}mds-toggle-scrim[onState]::part(scrim-layer){background:#000;opacity:30%;height:100%;width:100%}mds-menu::part(hidden-slotted-content){height:0;overflow:hidden}mds-dialog{--dialog-animation-time: .3s}mds-dialog[onState]{--adjusted-width: calc(var(--mds-container-max-width) * .8);--dialog-width: var(--adjusted-width, 80%)}mds-dialog.mds-dark::part(dialog-element){background:#111;color:#fff}mds-dialog::part(dialog-body){padding:5rem 3rem 3rem}mds-dialog .mds-search__submit{align-items:center}mds-dialog input[type=search]:focus,mds-dialog input[type=search]:hover{border-color:unset;box-shadow:0 2px #000}@supports (-moz-appearance: none){mds-dialog::part(dialog-element){animation:ff-dialog-fade var(--dialog-animation-time) ease-out forwards}mds-dialog::part(dialog-element)::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#000c}}@keyframes ff-dialog-fade{0%{opacity:0%}to{opacity:80%}}mds-shutter{display:block}mds-shutter.mds-shutter-closed::part(height-container){--overrideHeight: 0}mds-shutter.mds-shutter-open::part(height-container){--overrideHeight: unset}mds-tab-group{display:block;--tab-list-flex-direction: row;--tab-list-tab-box-shadow-orientation: 0 var(--mds-spacing-x-small, .25rem);--tab-list-tab-border-radius: var(--mds-border-radius)}@container (max-width: 720px){mds-tab-group{--tab-list-flex-direction: column;--tab-list-tab-box-shadow-orientation: calc(-1*var(--mds-spacing-x-small, .25rem)) 0;--tab-list-tab-border-radius: 0;--tab-group-flex-direction: row;--tab-group-gap: var(--mds-spacing-x-small)}}mds-tab-panel{display:none}mds-tab-panel[active]{display:block}";
let ce = St(he);
var ue = Object.defineProperty, Pt = (s, t, e, i) => {
for (var o = void 0, n = s.length - 1, a; n >= 0; n--)
(a = s[n]) && (o = a(t, e, o) || o);
return o && ue(t, e, o), o;
};
class dt extends v {
constructor() {
super(...arguments), this.openStatus = !1, this.sectionTitle = "";
}
// Handle button click to open/close drawer.
handleClick() {
this.openStatus = !this.openStatus;
}
// Render the element.
render() {
let t = l`<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`, e = l`<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`, i = "open", o = t;
return this.openStatus && (i = "close", o = e), l`
<section>
<button @click=${this.handleClick} >
<span class="sr-only">
${i}
</span>
${o}
</button>
<div class="drawer-contents">
<h3>${this.sectionTitle}</h3>
<slot></slot>
</div>
</section>`;
}
// Set styles.
static get styles() {
return [
y`
/* Main containing element for drawer. */
:host {
display: flex;
position: relative;
background: white;
/* Should be full height of screen.*/
height: 100vh;
/* Set some basic styling variables for parts of the drawer.*/
--button-width: 2rem;
/* Drawer width is relative to button width; allows for space proportionate to button width while also taking up most of the viewport width. */
--drawer-width: calc(100vw - 4*var(--button-width));
/* Basic padding for contents. */
--drawer-padding: 0.5rem;
}
/* Open/close button for drawer. */
button {
position: absolute;
top: 0;
/* Button positioned with reference to it's own width.*/
right: calc(-1* var(--button-width));
width: var(--button-width);
height: var(--button-width);
padding: 0;
margin: 0;
background: white;
border: none;
}
/* Defines 'root' of drawer and the element that 'opens'.*/
section {
/* Margin-left initially set to negative drawer-width, so 'closed'. */
margin-left: calc(-1 * var(--drawer-width));
/* Use transition for animation on open/shut states. */
transition: margin-left var(--animation-duration-fast);
}
/* When open, reset margin-left. */
:host([openstatus]) section {
margin-left: 0;
}
/* Holds main contents of drawer.*/
.drawer-contents {
padding: var(--drawer-padding);
/* Width required to avoid reflow. */
width: calc(var(--drawer-width) - 2*var(--drawer-padding));
}
`,
// Include shared styles provided by css-importer.
ce
];
}
}
Pt([
$({ type: Boolean, reflect: !0 })
], dt.prototype, "openStatus");
Pt([
$({ type: String })
], dt.prototype, "sectionTitle");
const pe = function() {
customElements.define("mds-drawer", dt);
};
class st extends v {
constructor() {
super(), this.animate = !0, this.toggleStatus = !1;
}
render() {
return l`
<div part="toggle-wrapper">
<!-- Ionicon open icon markup. -->
<ion-icon aria-hidden="true" name="add-sharp" part="toggle-open-icon" alt="open">
open
</ion-icon>
<!-- Ionicon close icon markup. -->
<ion-icon
aria-hidden="true"
name="remove-sharp"
part="toggle-close-icon"
alt="close"
>
close
</ion-icon>
</div>
`;
}
}
g(st, "properties", {
// Property/attribute to determine if should animate at all - this should be dynamic since animation can be a bad user experience for some.
animate: { type: Boolean, reflect: !0 },
// Toggled 'on' or 'off'.
toggleStatus: { type: Boolean, reflect: !0 }
}), g(st, "styles", y`
:host {
/* Specify a general animation duration variable for the entire component, inheriting a common externally provided duration or using a fallback value. */
--toggle-animation-duration: var(--animation-duration-fast, 0.3s);
}
/* Container div - useful for positioning. */
div[part="toggle-wrapper"] {
position: relative;
}
/* ion-icon component for icon; positioned absolutely so can cross-fade transition. */
ion-icon {
/* Position icon in center of wrapper. */
position: absolute;
opacity: 0;
}
/* If animate attribute is set, use transition. */
:host([animate]) ion-icon {
transition: opacity var(--toggle-animation-duration);
}
/* If off, show 'on' icon. */
:host(:not([togglestatus])) ion-icon[name="add-sharp"] {
opacity: 1;
}
/* If on, show 'off' icon. */
:host([toggleStatus]) ion-icon[name="remove-sharp"] {
opacity: 1;
}
`);
class ot extends v {
constructor() {
super(), this.activeStatus = !1, this.open = this.activeStatus;
}
// Use firstUpdated lifecyle hook to fire a custom event 'childready' - allows parent components to know when a child component is fully loaded and first rendered and respond to event appropriately. See Placeholder for an implementation that does this.
firstUpdated() {
let t = new CustomEvent("childready", {
bubbles: !0,
composed: !0
});
this.dispatchEvent(t), this._getHeights();
}
// Uses connectedCallback to compute some properties and set up some event listeners.
connectedCallback() {
if (super.connectedCallback(), this.autoOpenSelector) {
let e = this.querySelectorAll(this.autoOpenSelector).length > 0;
!this.activeStatus && e && (this.activeStatus = !0);
}
let t = this;
window.addEventListener(
"resize",
function() {
t._handleWindowResize();
},
!1
);
}
// Listen for widow resize and adjust height variables.
_handleWindowResize() {
this._getHeights();
}
// Handle toggle using native details element toggle event.
// TODO: the only trouble w/ using the native toggle event is there's no way to animate the 'out' state of the contents since by the time toggle fires, the details element is already 'closed' and contents totally hidden. Listening to click on summary could override this but then everything else has to be handled explicitly by the component. A solution could be to handle BOTH events and postpone triggering the toggle until after some effect has been done. But this is progressive enhancement - add things in layers weighing convenience vs effort. IE these suggestions steps would be high effort and require a re-wiring most of the details behaviours. Would probably require major version change - probably breaks API?
_handleToggle() {
this.activeStatus = this._details.open, this._getHeights();
}
// Get the child details element to query for heights, children etc.
get _details() {
var t;
return ((t = this.renderRoot) == null ? void 0 : t.querySelector("details")) ?? null;
}
// Calculates the heights required for animating the component on open/shut.
_getHeights() {
let t = this;
requestAnimationFrame(function() {
let e = t._details.querySelector("summary"), i = t._details.querySelector("div"), o = e.clientHeight, a = i.clientHeight + o;
t.style.setProperty("--initHeight", String(o) + "px"), t.style.setProperty("--activeHeight", String(a) + "px");
});
}
render() {
return l`
<details ?open=${this.activeStatus} @toggle=${this._handleToggle}>
<summary part="summary">
<!-- open-close-toggle CE for nicer animated toggling; forwards toggle-wrapper part for themeing. -->
<open-close-toggle
exportparts="toggle-wrapper"
?toggleStatus="${this.activeStatus}"
></open-close-toggle>
<slot name="summary"></slot>
</summary>
<div part="contents">
<slot></slot>
</div>
</details>
`;
}
}
g(ot, "properties", {
// Dynamic property to track current state of open/closed status.
// TODO: not sure this is needed anymore, re-evaluate later on next version.
open: {
type: Boolean
},
// Property to see if details element should be open or closed by default. Reflect as attribute.
activeStatus: {
type: Boolean,
reflect: !0
},
// Property for autoOpenSelector, allows component to check for children matching that selector.
// Allows for checking child elements for 'activity' and setting parent open/closed.
autoOpenSelector: { type: String }
}), g(ot, "styles", y`
:host {
/* Specify a general animation duration variable for the entire component, inheriting a common externally provided duration or using a fallback value. */
--ed-animation-duration: var(--animation-duration-fast, 0.3s);
--ed-animation-duration-slow: calc(3 * var(--ed-animation-duration));
display: block;
transition: height var(--ed-animation-duration);
height: var(--initHeight);
overflow: hidden;
}
/* Set height when active attribute set (thus 'open') to activeHeight variable. */
:host([activestatus]) {
height: var(--activeHeight);
}
:host details div[part="contents"] {
opacity: 0;
transition: opacity var(--ed-animation-duration-slow);
}
:host([activestatus]) details div[part="contents"] {
opacity: 1;
}
/* TODO: these rules about summary styling could be styled outside of component in CSS file; using part at the same time as regular details summary is styled. Then again, component should be as self-contained as possible. */
/* Standards compliant method of unsetting 'marker' in details summary element. */
:host details summary {
list-style: none;
}
/* Legacy method of hiding marker, still required for some browsers. */
:host details summary::-webkit-details-marker {
display: none;
}
/* Want any headers inside summary to be inline-block. */
/* :host details summary * {
display: inline-block;
} */
`);
class Mt extends v {
constructor() {
super(), this.ready = !1, this.awaitChildReady = !1;
}
connectedCallback() {
super.connectedCallback(), this.awaitChildReady && this.addEventListener("childready", function(t) {
t.stopPropagation(), this.ready = !0;
});
}
// Handles slotchange event - when placeholder slot is filled, this event fired. Slot can be filled with LightDOM or better, other components who's custom elements will only be slotted after they are defined (loaded). Therefore the Placeholder is 'ready' when it's children are.
handleSlotChange() {
this.awaitChildReady || (this.ready = !0);
}
render() {
return l`
<slot @slotchange=${this.handleSlotChange}></slot>
`;
}
}
g(Mt, "properties", {
// Property/attribute for readiness of contents.
ready: { type: Boolean, reflect: !0 },
// Property/attribute for checking for explicit child readiness.
awaitChildReady: { type: Boolean, reflect: !0 }
});
const ge = function() {
customElements.define("open-close-toggle", st), customElements.define("mds-extra-details", ot), customElements.define("mds-placeholder", Mt);
};
/**
* @license
* Copyright 2020 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const me = (s) => s.strings === void 0;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const Lt = { ATTRIBUTE: 1, CHILD: 2 }, Ot = (s) => (...t) => ({ _$litDirective$: s, values: t });
let Ut = class {
constructor(t) {
}
get _$AU() {
return this._$AM._$AU;
}
_$AT(t, e, i) {
this._$Ct = t, this._$AM = e, this._$Ci = i;
}
_$AS(t, e) {
return this.update(t, e);
}
update(t, e) {
return this.render(...e);
}
};
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const M = (s, t) => {
var e, i;
const o = s._$AN;
if (o === void 0) return !1;
for (const n of o) (i = (e = n)._$AO) === null || i === void 0 || i.call(e, t, !1), M(n, t);
return !0;
}, q = (s) => {
let t, e;
do {
if ((t = s._$AM) === void 0) break;
e = t._$AN, e.delete(s), s = t;
} while ((e == null ? void 0 : e.size) === 0);
}, Nt = (s) => {
for (let t; t = s._$AM; s = t) {
let e = t._$AN;
if (e === void 0) t._$AN = e = /* @__PURE__ */ new Set();
else if (e.has(s)) break;
e.add(s), be(t);
}
};
function ve(s) {
this._$AN !== void 0 ? (q(this), this._$AM = s, Nt(this)) : this._$AM = s;
}
function fe(s, t = !1, e = 0) {
const i = this._$AH, o = this._$AN;
if (o !== void 0 && o.size !== 0) if (t) if (Array.isArray(i)) for (let n = e; n < i.length; n++) M(i[n], !1), q(i[n]);
else i != null && (M(i, !1), q(i));
else M(this, s);
}
const be = (s) => {
var t, e, i, o;
s.type == Lt.CHILD && ((t = (i = s)._$AP) !== null && t !== void 0 || (i._$AP = fe), (e = (o = s)._$AQ) !== null && e !== void 0 || (o._$AQ = ve));
};
class _e extends Ut {
constructor() {
super(...arguments), this._$AN = void 0;
}
_$AT(t, e, i) {
super._$AT(t, e, i), Nt(this), this.isConnected = t._$AU;
}
_$AO(t, e = !0) {
var i, o;
t !== this.isConnected && (this.isConnected = t, t ? (i = this.reconnected) === null || i === void 0 || i.call(this) : (o = this.disconnected) === null || o === void 0 || o.call(this)), e && (M(this, t), q(this));
}
setValue(t) {
if (me(this._$Ct)) this._$Ct._$AI(t, this);
else {
const e = [...this._$Ct._$AH];
e[this._$Ci] = t, this._$Ct._$AI(e, this, 0);
}
}
disconnected() {
}
reconnected() {
}
}
/**
* @license
* Copyright 2020 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const Rt = () => new ye();
let ye = class {
};
const Y = /* @__PURE__ */ new WeakMap(), Bt = Ot(class extends _e {
render(s) {
return p;
}
update(s, [t]) {
var e;
const i = t !== this.G;
return i && this.G !== void 0 && this.ot(void 0), (i || this.rt !== this.lt) && (this.G = t, this.dt = (e = s.options) === null || e === void 0 ? void 0 : e.host, this.ot(this.lt = s.element)), p;
}
ot(s) {
var t;
if (typeof this.G == "function") {
const e = (t = this.dt) !== null && t !== void 0 ? t : globalThis;
let i = Y.get(e);
i === void 0 && (i = /* @__PURE__ */ new WeakMap(), Y.set(e, i)), i.get(this.G) !== void 0 && this.G.call(this.dt, void 0), i.set(this.G, s), s !== void 0 && this.G.call(this.dt, s);
} else this.G.value = s;
}
get rt() {
var s, t, e;
return typeof this.G == "function" ? (t = Y.get((s = this.dt) !== null && s !== void 0 ? s : globalThis)) === null || t === void 0 ? void 0 : t.get(this.G) : (e = this.G) === null || e === void 0 ? void 0 : e.value;
}
disconnected() {
this.rt === this.lt && this.ot(void 0);
}
reconnected() {
this.ot(this.lt);
}
});
class f extends v {
constructor() {
super();
g(this, "_toggleActions", {
off: "offEvent",
on: "onEvent"
});
this.onState = !1, this.context = void 0, this.name = void 0;
}
connectedCallback() {
super.connectedCallback(), this._addListeners();
}
render() {
return this._defaultMarkup();
}
/**
*
* @param {string} toggleAction
*/
_toggleEvent(e) {
let i = new CustomEvent(e, {
detail: { context: this.context },
composed: !0,
bubbles: !0
});
this.dispatchEvent(i);
}
// Add listeners for actions - checking for which context they belong too etc.
_addListeners() {
let e = this;
this.context && (window.addEventListener(
e._toggleActions.on,
function(i) {
/** @type {CustomEvent} */
i.detail.context == e.context && (e.onState = !0);
}
), window.addEventListener(e._toggleActions.off, function(i) {
/** @type {CustomEvent}*/
i.detail.context == e.context && (e.onState = !1);
}));
}
// Determines which type of click handler to use - one that requires context (handleClick) or one that handles local component state only(simpleHandleClick).
_handleClickType() {
return this.context ? this._handleClick() : this._simpleHandleClick();
}
_simpleHandleClick() {
this.onState == !0 ? this.onState = !1 : this.onState = !0;
}
_handleClick() {
let e = this._toggleActions.on;
this.onState && (e = this._toggleActions.off), this._toggleEvent(e);
}
/** @returns {import("lit").TemplateResult | undefined} */
_defaultMarkup() {
return l`<button part="toggle-button" @click=${this._handleClickType}>
${this.name}
<slot></slot>
${this.onState ? l`<slot name="on-markup"></slot>` : l`<slot name="off-markup"></slot>`}
</button>`;
}
firstUpdated() {
let e = new CustomEvent("childready", {
bubbles: !0,
composed: !0
});
this.dispatchEvent(e);
}
// TODO: should events be differentiated if context
// is set, eg. new event(this.context+eventname)? Probably not for now.
}
g(f, "properties", {
name: { type: String },
context: { type: String },
// TODO: break up the examples in Stories to be separate stories - easier to illustrate different capabilities/examples that way.
onState: { type: Boolean, reflect: !0 }
});
class $e extends f {
_defaultMarkup() {
if (this.onState)
return l`<div><slot></slot></div>`;
}
}
class zt extends f {
_defaultMarkup() {
let t = "fade-in";
return this.onState || (t = "fade-out"), l`<div class="${t}"><slot></slot></div>`;
}
}
g(zt, "styles", y`
div {
transition: opacity 0.3s;
}
.fade-in {
opacity: 100%;
}
.fade-out {
opacity: 0%;
}
`);
class Dt extends f {
constructor() {
super(), this.iconSet = "ionicons";
}
// Adds a close icon inside a button as the only content.
_defaultMarkup() {
let t;
return this.iconSet == "ionicons" ? t = l`<ion-icon name="close-outline">close</ion-icon>` : this.iconSet == "lucide" && (t = l`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`), l`
<button part="close-button" @click=${this._handleClick}>
${t}
</button>
`;
}
}
/**
* @typedef {'ionicons' | 'lucide'} iconSetType
*/
g(Dt, "properties", {
...f.properties,
iconSet: { type: String }
});
class ht extends f {
constructor() {
super(), this.settingsMenu = void 0;
}
// Adds a "hamburger" or "close" icon inside a button as the only content depending on onState.
_defaultMarkup() {
return l`
<button part="menu-button" @click=${this._handleClickType}>
${this.onState ? l`<ion-icon name="close-outline">close</ion-icon>` : l`<ion-icon name=${this.settingsMenu ? "options-outline" : "menu-outline"}>menu</ion-icon>`}
</button>
`;
}
}
g(ht, "properties", {
...f.properties,
// Allow for a 'settings' icon for the menu with this attribute.
settingsMenu: { type: Boolean }
});
class we extends f {
// Adds a "scrim" - a large 'see-through' layer that can cover other content, depending on onState. Clicking the layer itself can toggle onState. Styleable via part selector.
_defaultMarkup() {
return l`
<div part="scrim-layer"
@click=${this._handleClickType}>
<!-- NB: Nothing goes here, the scrim shouldn't have children elements. -->
</div>
`;
}
}
class G extends f {
constructor() {
super();
// Setup and checks matchMedia, add dynamic checking if dynamic attribute set.
g(this, "doSizeCheck", () => {
this.mq && (this._size = window.matchMedia(this.mq), this._size.matches ? (this.onState = !0, this._matching = !0) : (this.onState = !1, this._matching = !1), this.dynamic && (this._size.onchange = (e) => {
e.matches ? (this.onState = !0, this._matching = !0) : (this.onState = !1, this._matching = !1);
}));
});
this.dynamic = void 0, this.debug = void 0, this.mq = void 0;
}
connectedCallback() {
super.connectedCallback(), this.doSizeCheck();
}
render() {
let e;
if (this.debug && (e = l`<span
>meta info: viewport width: ${this._size}, onState: ${this.onState}, mq:
${this.mq}</span
>`), this.onState)
return e = l`${e} <slot></slot>`, e;
}
}
g(G, "properties", {
...f.properties,
// Media-query string.
// See https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia.
mq: { type: String },
// Whether to check matchmedia all the time.
// If false, just check once at first render.
dynamic: { type: Boolean },
// MatchMedia check with mq. Private.
_size: { type: Object },
// Stored result of matchMedia.
_matching: { type: Boolean }
});
class It extends G {
constructor() {
super(), this.withButton = void 0, this.settingsMenu = void 0;
}
render() {
let t;
return this.withButton && !this._matching && (t = l`
<mds-toggle-menu exportparts="menu-button" @click=${this._handleClickType}
?settingsMenu=${this.settingsMenu}
?onState=${this.onState}
></mds-toggle-menu>
`), l`<slot name="menu-label"></slot> ${t} ${this.onState ? l`<span part="slotted-content"><slot></slot></span>` : l`<span part="hidden-slotted-content"><slot></slot></span>`} `;
}
}
g(It, "properties", {
...G.properties,
// Property to automatically include an open/close button.
withButton: { type: Boolean },
// Attribute to allow settingsMenu to be passed down into <mds-toggle-menu>.
settingsMenu: { type: Boolean }
});
class Ae extends ht {
_defaultMarkup() {
return l`
<button part="menu-button" @click=${this._handleClickType}>
${this.onState ? l`<ion-icon name="close-outline">close</ion-icon>` : l`<ion-icon name="options-outline">settings</ion-icon>`}
</button>
`;
}
}
const Se = function() {
customElements.define("mds-toggle", f), customElements.define("mds-togg