@mcgill-wsg/mcgill-ds
Version:
McGill Design System - a set of components and styles to adhere to McGill University standards.
1,112 lines (1,100 loc) • 40.8 kB
JavaScript
var wt = Object.defineProperty;
var St = (i, t, e) => t in i ? wt(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
var f = (i, t, e) => St(i, typeof t != "symbol" ? t + "" : t, e);
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const L = globalThis, J = L.ShadowRoot && (L.ShadyCSS === void 0 || L.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, K = Symbol(), tt = /* @__PURE__ */ new WeakMap();
let ut = class {
constructor(t, e, s) {
if (this._$cssResult$ = !0, s !== K) 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 (J && t === void 0) {
const s = e !== void 0 && e.length === 1;
s && (t = tt.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && tt.set(e, t));
}
return t;
}
toString() {
return this.cssText;
}
};
const Ct = (i) => new ut(typeof i == "string" ? i : i + "", void 0, K), Q = (i, ...t) => {
const e = i.length === 1 ? i[0] : t.reduce((s, o, n) => s + ((r) => {
if (r._$cssResult$ === !0) return r.cssText;
if (typeof r == "number") return r;
throw Error("Value passed to 'css' function must be a 'css' function result: " + r + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
})(o) + i[n + 1], i[0]);
return new ut(e, i, K);
}, Et = (i, t) => {
if (J) i.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
else for (const e of t) {
const s = document.createElement("style"), o = L.litNonce;
o !== void 0 && s.setAttribute("nonce", o), s.textContent = e.cssText, i.appendChild(s);
}
}, et = J ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
let e = "";
for (const s of t.cssRules) e += s.cssText;
return Ct(e);
})(i) : i;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const { is: kt, defineProperty: xt, getOwnPropertyDescriptor: Mt, getOwnPropertyNames: Tt, getOwnPropertySymbols: Ht, getPrototypeOf: Pt } = Object, v = globalThis, st = v.trustedTypes, Nt = st ? st.emptyScript : "", j = v.reactiveElementPolyfillSupport, M = (i, t) => i, Z = { toAttribute(i, t) {
switch (t) {
case Boolean:
i = i ? Nt : null;
break;
case Object:
case Array:
i = i == null ? i : JSON.stringify(i);
}
return i;
}, fromAttribute(i, t) {
let e = i;
switch (t) {
case Boolean:
e = i !== null;
break;
case Number:
e = i === null ? null : Number(i);
break;
case Object:
case Array:
try {
e = JSON.parse(i);
} catch {
e = null;
}
}
return e;
} }, pt = (i, t) => !kt(i, t), it = { attribute: !0, type: String, converter: Z, reflect: !1, useDefault: !1, hasChanged: pt };
Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), v.litPropertyMetadata ?? (v.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
let S = class extends HTMLElement {
static addInitializer(t) {
this._$Ei(), (this.l ?? (this.l = [])).push(t);
}
static get observedAttributes() {
return this.finalize(), this._$Eh && [...this._$Eh.keys()];
}
static createProperty(t, e = it) {
if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
const s = Symbol(), o = this.getPropertyDescriptor(t, s, e);
o !== void 0 && xt(this.prototype, t, o);
}
}
static getPropertyDescriptor(t, e, s) {
const { get: o, set: n } = Mt(this.prototype, t) ?? { get() {
return this[e];
}, set(r) {
this[e] = r;
} };
return { get: o, set(r) {
const a = o == null ? void 0 : o.call(this);
n == null || n.call(this, r), this.requestUpdate(t, a, s);
}, configurable: !0, enumerable: !0 };
}
static getPropertyOptions(t) {
return this.elementProperties.get(t) ?? it;
}
static _$Ei() {
if (this.hasOwnProperty(M("elementProperties"))) return;
const t = Pt(this);
t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
}
static finalize() {
if (this.hasOwnProperty(M("finalized"))) return;
if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(M("properties"))) {
const e = this.properties, s = [...Tt(e), ...Ht(e)];
for (const o of s) this.createProperty(o, e[o]);
}
const t = this[Symbol.metadata];
if (t !== null) {
const e = litPropertyMetadata.get(t);
if (e !== void 0) for (const [s, o] of e) this.elementProperties.set(s, o);
}
this._$Eh = /* @__PURE__ */ new Map();
for (const [e, s] of this.elementProperties) {
const o = this._$Eu(e, s);
o !== void 0 && this._$Eh.set(o, e);
}
this.elementStyles = this.finalizeStyles(this.styles);
}
static finalizeStyles(t) {
const e = [];
if (Array.isArray(t)) {
const s = new Set(t.flat(1 / 0).reverse());
for (const o of s) e.unshift(et(o));
} else t !== void 0 && e.push(et(t));
return e;
}
static _$Eu(t, e) {
const s = e.attribute;
return s === !1 ? void 0 : typeof s == "string" ? s : 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() {
var t;
this._$ES = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (t = this.constructor.l) == null || t.forEach((e) => e(this));
}
addController(t) {
var e;
(this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t), this.renderRoot !== void 0 && this.isConnected && ((e = t.hostConnected) == null || e.call(t));
}
removeController(t) {
var e;
(e = this._$EO) == null || e.delete(t);
}
_$E_() {
const t = /* @__PURE__ */ new Map(), e = this.constructor.elementProperties;
for (const s of e.keys()) this.hasOwnProperty(s) && (t.set(s, this[s]), delete this[s]);
t.size > 0 && (this._$Ep = t);
}
createRenderRoot() {
const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
return Et(t, this.constructor.elementStyles), t;
}
connectedCallback() {
var t;
this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$EO) == null || t.forEach((e) => {
var s;
return (s = e.hostConnected) == null ? void 0 : s.call(e);
});
}
enableUpdating(t) {
}
disconnectedCallback() {
var t;
(t = this._$EO) == null || t.forEach((e) => {
var s;
return (s = e.hostDisconnected) == null ? void 0 : s.call(e);
});
}
attributeChangedCallback(t, e, s) {
this._$AK(t, s);
}
_$ET(t, e) {
var n;
const s = this.constructor.elementProperties.get(t), o = this.constructor._$Eu(t, s);
if (o !== void 0 && s.reflect === !0) {
const r = (((n = s.converter) == null ? void 0 : n.toAttribute) !== void 0 ? s.converter : Z).toAttribute(e, s.type);
this._$Em = t, r == null ? this.removeAttribute(o) : this.setAttribute(o, r), this._$Em = null;
}
}
_$AK(t, e) {
var n, r;
const s = this.constructor, o = s._$Eh.get(t);
if (o !== void 0 && this._$Em !== o) {
const a = s.getPropertyOptions(o), l = typeof a.converter == "function" ? { fromAttribute: a.converter } : ((n = a.converter) == null ? void 0 : n.fromAttribute) !== void 0 ? a.converter : Z;
this._$Em = o;
const d = l.fromAttribute(e, a.type);
this[o] = d ?? ((r = this._$Ej) == null ? void 0 : r.get(o)) ?? d, this._$Em = null;
}
}
requestUpdate(t, e, s, o = !1, n) {
var r;
if (t !== void 0) {
const a = this.constructor;
if (o === !1 && (n = this[t]), s ?? (s = a.getPropertyOptions(t)), !((s.hasChanged ?? pt)(n, e) || s.useDefault && s.reflect && n === ((r = this._$Ej) == null ? void 0 : r.get(t)) && !this.hasAttribute(a._$Eu(t, s)))) return;
this.C(t, e, s);
}
this.isUpdatePending === !1 && (this._$ES = this._$EP());
}
C(t, e, { useDefault: s, reflect: o, wrapped: n }, r) {
s && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t) && (this._$Ej.set(t, r ?? e ?? this[t]), n !== !0 || r !== void 0) || (this._$AL.has(t) || (this.hasUpdated || s || (e = void 0), this._$AL.set(t, e)), o === !0 && this._$Em !== t && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t));
}
async _$EP() {
this.isUpdatePending = !0;
try {
await this._$ES;
} catch (e) {
Promise.reject(e);
}
const t = this.scheduleUpdate();
return t != null && await t, !this.isUpdatePending;
}
scheduleUpdate() {
return this.performUpdate();
}
performUpdate() {
var s;
if (!this.isUpdatePending) return;
if (!this.hasUpdated) {
if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
for (const [n, r] of this._$Ep) this[n] = r;
this._$Ep = void 0;
}
const o = this.constructor.elementProperties;
if (o.size > 0) for (const [n, r] of o) {
const { wrapped: a } = r, l = this[n];
a !== !0 || this._$AL.has(n) || l === void 0 || this.C(n, void 0, r, l);
}
}
let t = !1;
const e = this._$AL;
try {
t = this.shouldUpdate(e), t ? (this.willUpdate(e), (s = this._$EO) == null || s.forEach((o) => {
var n;
return (n = o.hostUpdate) == null ? void 0 : n.call(o);
}), this.update(e)) : this._$EM();
} catch (o) {
throw t = !1, this._$EM(), o;
}
t && this._$AE(e);
}
willUpdate(t) {
}
_$AE(t) {
var e;
(e = this._$EO) == null || e.forEach((s) => {
var o;
return (o = s.hostUpdated) == null ? void 0 : o.call(s);
}), 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 = this._$Eq.forEach((e) => this._$ET(e, this[e]))), this._$EM();
}
updated(t) {
}
firstUpdated(t) {
}
};
S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, S[M("elementProperties")] = /* @__PURE__ */ new Map(), S[M("finalized")] = /* @__PURE__ */ new Map(), j == null || j({ ReactiveElement: S }), (v.reactiveElementVersions ?? (v.reactiveElementVersions = [])).push("2.1.2");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const T = globalThis, ot = (i) => i, B = T.trustedTypes, nt = B ? B.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, ft = "$lit$", _ = `lit$${Math.random().toFixed(9).slice(2)}$`, gt = "?" + _, Ut = `<${gt}>`, w = document, P = () => w.createComment(""), N = (i) => i === null || typeof i != "object" && typeof i != "function", X = Array.isArray, Ot = (i) => X(i) || typeof (i == null ? void 0 : i[Symbol.iterator]) == "function", G = `[
\f\r]`, x = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, rt = /-->/g, lt = />/g, A = RegExp(`>|${G}(?:([^\\s"'>=/]+)(${G}*=${G}*(?:[^
\f\r"'\`<>=]|("|')|))|$)`, "g"), at = /'/g, ht = /"/g, $t = /^(?:script|style|textarea|title)$/i, Rt = (i) => (t, ...e) => ({ _$litType$: i, strings: t, values: e }), h = Rt(1), E = Symbol.for("lit-noChange"), u = Symbol.for("lit-nothing"), ct = /* @__PURE__ */ new WeakMap(), y = w.createTreeWalker(w, 129);
function mt(i, t) {
if (!X(i) || !i.hasOwnProperty("raw")) throw Error("invalid template strings array");
return nt !== void 0 ? nt.createHTML(t) : t;
}
const Lt = (i, t) => {
const e = i.length - 1, s = [];
let o, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", r = x;
for (let a = 0; a < e; a++) {
const l = i[a];
let d, p, c = -1, $ = 0;
for (; $ < l.length && (r.lastIndex = $, p = r.exec(l), p !== null); ) $ = r.lastIndex, r === x ? p[1] === "!--" ? r = rt : p[1] !== void 0 ? r = lt : p[2] !== void 0 ? ($t.test(p[2]) && (o = RegExp("</" + p[2], "g")), r = A) : p[3] !== void 0 && (r = A) : r === A ? p[0] === ">" ? (r = o ?? x, c = -1) : p[1] === void 0 ? c = -2 : (c = r.lastIndex - p[2].length, d = p[1], r = p[3] === void 0 ? A : p[3] === '"' ? ht : at) : r === ht || r === at ? r = A : r === rt || r === lt ? r = x : (r = A, o = void 0);
const m = r === A && i[a + 1].startsWith("/>") ? " " : "";
n += r === x ? l + Ut : c >= 0 ? (s.push(d), l.slice(0, c) + ft + l.slice(c) + _ + m) : l + _ + (c === -2 ? a : m);
}
return [mt(i, n + (i[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
};
class U {
constructor({ strings: t, _$litType$: e }, s) {
let o;
this.parts = [];
let n = 0, r = 0;
const a = t.length - 1, l = this.parts, [d, p] = Lt(t, e);
if (this.el = U.createElement(d, s), y.currentNode = this.el.content, e === 2 || e === 3) {
const c = this.el.content.firstChild;
c.replaceWith(...c.childNodes);
}
for (; (o = y.nextNode()) !== null && l.length < a; ) {
if (o.nodeType === 1) {
if (o.hasAttributes()) for (const c of o.getAttributeNames()) if (c.endsWith(ft)) {
const $ = p[r++], m = o.getAttribute(c).split(_), R = /([.?@])?(.*)/.exec($);
l.push({ type: 1, index: n, name: R[2], strings: m, ctor: R[1] === "." ? Dt : R[1] === "?" ? zt : R[1] === "@" ? It : I }), o.removeAttribute(c);
} else c.startsWith(_) && (l.push({ type: 6, index: n }), o.removeAttribute(c));
if ($t.test(o.tagName)) {
const c = o.textContent.split(_), $ = c.length - 1;
if ($ > 0) {
o.textContent = B ? B.emptyScript : "";
for (let m = 0; m < $; m++) o.append(c[m], P()), y.nextNode(), l.push({ type: 2, index: ++n });
o.append(c[$], P());
}
}
} else if (o.nodeType === 8) if (o.data === gt) l.push({ type: 2, index: n });
else {
let c = -1;
for (; (c = o.data.indexOf(_, c + 1)) !== -1; ) l.push({ type: 7, index: n }), c += _.length - 1;
}
n++;
}
}
static createElement(t, e) {
const s = w.createElement("template");
return s.innerHTML = t, s;
}
}
function k(i, t, e = i, s) {
var r, a;
if (t === E) return t;
let o = s !== void 0 ? (r = e._$Co) == null ? void 0 : r[s] : e._$Cl;
const n = N(t) ? void 0 : t._$litDirective$;
return (o == null ? void 0 : o.constructor) !== n && ((a = o == null ? void 0 : o._$AO) == null || a.call(o, !1), n === void 0 ? o = void 0 : (o = new n(i), o._$AT(i, e, s)), s !== void 0 ? (e._$Co ?? (e._$Co = []))[s] = o : e._$Cl = o), o !== void 0 && (t = k(i, o._$AS(i, t.values), o, s)), t;
}
class Bt {
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) {
const { el: { content: e }, parts: s } = this._$AD, o = ((t == null ? void 0 : t.creationScope) ?? w).importNode(e, !0);
y.currentNode = o;
let n = y.nextNode(), r = 0, a = 0, l = s[0];
for (; l !== void 0; ) {
if (r === l.index) {
let d;
l.type === 2 ? d = new O(n, n.nextSibling, this, t) : l.type === 1 ? d = new l.ctor(n, l.name, l.strings, this, t) : l.type === 6 && (d = new jt(n, this, t)), this._$AV.push(d), l = s[++a];
}
r !== (l == null ? void 0 : l.index) && (n = y.nextNode(), r++);
}
return y.currentNode = w, o;
}
p(t) {
let e = 0;
for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(t, s, e), e += s.strings.length - 2) : s._$AI(t[e])), e++;
}
}
class O {
get _$AU() {
var t;
return ((t = this._$AM) == null ? void 0 : t._$AU) ?? this._$Cv;
}
constructor(t, e, s, o) {
this.type = 2, this._$AH = u, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = s, this.options = o, this._$Cv = (o == null ? void 0 : o.isConnected) ?? !0;
}
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 = k(this, t, e), N(t) ? t === u || t == null || t === "" ? (this._$AH !== u && this._$AR(), this._$AH = u) : t !== this._$AH && t !== E && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Ot(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 !== u && N(this._$AH) ? this._$AA.nextSibling.data = t : this.T(w.createTextNode(t)), this._$AH = t;
}
$(t) {
var n;
const { values: e, _$litType$: s } = t, o = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = U.createElement(mt(s.h, s.h[0]), this.options)), s);
if (((n = this._$AH) == null ? void 0 : n._$AD) === o) this._$AH.p(e);
else {
const r = new Bt(o, this), a = r.u(this.options);
r.p(e), this.T(a), this._$AH = r;
}
}
_$AC(t) {
let e = ct.get(t.strings);
return e === void 0 && ct.set(t.strings, e = new U(t)), e;
}
k(t) {
X(this._$AH) || (this._$AH = [], this._$AR());
const e = this._$AH;
let s, o = 0;
for (const n of t) o === e.length ? e.push(s = new O(this.O(P()), this.O(P()), this, this.options)) : s = e[o], s._$AI(n), o++;
o < e.length && (this._$AR(s && s._$AB.nextSibling, o), e.length = o);
}
_$AR(t = this._$AA.nextSibling, e) {
var s;
for ((s = this._$AP) == null ? void 0 : s.call(this, !1, !0, e); t !== this._$AB; ) {
const o = ot(t).nextSibling;
ot(t).remove(), t = o;
}
}
setConnected(t) {
var e;
this._$AM === void 0 && (this._$Cv = t, (e = this._$AP) == null || e.call(this, t));
}
}
class I {
get tagName() {
return this.element.tagName;
}
get _$AU() {
return this._$AM._$AU;
}
constructor(t, e, s, o, n) {
this.type = 1, this._$AH = u, this._$AN = void 0, this.element = t, this.name = e, this._$AM = o, this.options = n, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = u;
}
_$AI(t, e = this, s, o) {
const n = this.strings;
let r = !1;
if (n === void 0) t = k(this, t, e, 0), r = !N(t) || t !== this._$AH && t !== E, r && (this._$AH = t);
else {
const a = t;
let l, d;
for (t = n[0], l = 0; l < n.length - 1; l++) d = k(this, a[s + l], e, l), d === E && (d = this._$AH[l]), r || (r = !N(d) || d !== this._$AH[l]), d === u ? t = u : t !== u && (t += (d ?? "") + n[l + 1]), this._$AH[l] = d;
}
r && !o && this.j(t);
}
j(t) {
t === u ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
}
}
class Dt extends I {
constructor() {
super(...arguments), this.type = 3;
}
j(t) {
this.element[this.name] = t === u ? void 0 : t;
}
}
class zt extends I {
constructor() {
super(...arguments), this.type = 4;
}
j(t) {
this.element.toggleAttribute(this.name, !!t && t !== u);
}
}
class It extends I {
constructor(t, e, s, o, n) {
super(t, e, s, o, n), this.type = 5;
}
_$AI(t, e = this) {
if ((t = k(this, t, e, 0) ?? u) === E) return;
const s = this._$AH, o = t === u && s !== u || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, n = t !== u && (s === u || o);
o && this.element.removeEventListener(this.name, this, s), n && this.element.addEventListener(this.name, this, t), this._$AH = t;
}
handleEvent(t) {
var e;
typeof this._$AH == "function" ? this._$AH.call(((e = this.options) == null ? void 0 : e.host) ?? this.element, t) : this._$AH.handleEvent(t);
}
}
class jt {
constructor(t, e, s) {
this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = s;
}
get _$AU() {
return this._$AM._$AU;
}
_$AI(t) {
k(this, t);
}
}
const q = T.litHtmlPolyfillSupport;
q == null || q(U, O), (T.litHtmlVersions ?? (T.litHtmlVersions = [])).push("3.3.2");
const Gt = (i, t, e) => {
const s = (e == null ? void 0 : e.renderBefore) ?? t;
let o = s._$litPart$;
if (o === void 0) {
const n = (e == null ? void 0 : e.renderBefore) ?? null;
s._$litPart$ = o = new O(t.insertBefore(P(), n), n, void 0, e ?? {});
}
return o._$AI(i), o;
};
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const b = globalThis;
let C = class extends S {
constructor() {
super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
}
createRenderRoot() {
var e;
const t = super.createRenderRoot();
return (e = this.renderOptions).renderBefore ?? (e.renderBefore = t.firstChild), t;
}
update(t) {
const e = this.render();
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = Gt(e, this.renderRoot, this.renderOptions);
}
connectedCallback() {
var t;
super.connectedCallback(), (t = this._$Do) == null || t.setConnected(!0);
}
disconnectedCallback() {
var t;
super.disconnectedCallback(), (t = this._$Do) == null || t.setConnected(!1);
}
render() {
return E;
}
};
var dt;
C._$litElement$ = !0, C.finalized = !0, (dt = b.litElementHydrateSupport) == null || dt.call(b, { LitElement: C });
const W = b.litElementPolyfillSupport;
W == null || W({ LitElement: C });
(b.litElementVersions ?? (b.litElementVersions = [])).push("4.2.2");
/**
* @license
* Copyright 2020 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const qt = (i) => i.strings === void 0;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const Wt = { CHILD: 2 }, Vt = (i) => (...t) => ({ _$litDirective$: i, values: t });
class Zt {
constructor(t) {
}
get _$AU() {
return this._$AM._$AU;
}
_$AT(t, e, s) {
this._$Ct = t, this._$AM = e, this._$Ci = s;
}
_$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 H = (i, t) => {
var s;
const e = i._$AN;
if (e === void 0) return !1;
for (const o of e) (s = o._$AO) == null || s.call(o, t, !1), H(o, t);
return !0;
}, D = (i) => {
let t, e;
do {
if ((t = i._$AM) === void 0) break;
e = t._$AN, e.delete(i), i = t;
} while ((e == null ? void 0 : e.size) === 0);
}, _t = (i) => {
for (let t; t = i._$AM; i = t) {
let e = t._$AN;
if (e === void 0) t._$AN = e = /* @__PURE__ */ new Set();
else if (e.has(i)) break;
e.add(i), Kt(t);
}
};
function Ft(i) {
this._$AN !== void 0 ? (D(this), this._$AM = i, _t(this)) : this._$AM = i;
}
function Jt(i, t = !1, e = 0) {
const s = this._$AH, o = this._$AN;
if (o !== void 0 && o.size !== 0) if (t) if (Array.isArray(s)) for (let n = e; n < s.length; n++) H(s[n], !1), D(s[n]);
else s != null && (H(s, !1), D(s));
else H(this, i);
}
const Kt = (i) => {
i.type == Wt.CHILD && (i._$AP ?? (i._$AP = Jt), i._$AQ ?? (i._$AQ = Ft));
};
class Qt extends Zt {
constructor() {
super(...arguments), this._$AN = void 0;
}
_$AT(t, e, s) {
super._$AT(t, e, s), _t(this), this.isConnected = t._$AU;
}
_$AO(t, e = !0) {
var s, o;
t !== this.isConnected && (this.isConnected = t, t ? (s = this.reconnected) == null || s.call(this) : (o = this.disconnected) == null || o.call(this)), e && (H(this, t), D(this));
}
setValue(t) {
if (qt(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 Xt = () => new Yt();
class Yt {
}
const V = /* @__PURE__ */ new WeakMap(), te = Vt(class extends Qt {
render(i) {
return u;
}
update(i, [t]) {
var s;
const e = t !== this.G;
return e && this.G !== void 0 && this.rt(void 0), (e || this.lt !== this.ct) && (this.G = t, this.ht = (s = i.options) == null ? void 0 : s.host, this.rt(this.ct = i.element)), u;
}
rt(i) {
if (this.isConnected || (i = void 0), typeof this.G == "function") {
const t = this.ht ?? globalThis;
let e = V.get(t);
e === void 0 && (e = /* @__PURE__ */ new WeakMap(), V.set(t, e)), e.get(this.G) !== void 0 && this.G.call(this.ht, void 0), e.set(this.G, i), i !== void 0 && this.G.call(this.ht, i);
} else this.G.value = i;
}
get lt() {
var i, t;
return typeof this.G == "function" ? (i = V.get(this.ht ?? globalThis)) == null ? void 0 : i.get(this.G) : (t = this.G) == null ? void 0 : t.value;
}
disconnected() {
this.lt === this.ct && this.rt(void 0);
}
reconnected() {
this.rt(this.ct);
}
});
class g extends C {
constructor() {
super();
f(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 s = new CustomEvent(e, {
detail: { context: this.context },
composed: !0,
bubbles: !0
});
this.dispatchEvent(s);
}
// Add listeners for actions - checking for which context they belong too etc.
_addListeners() {
let e = this;
this.context && (window.addEventListener(
e._toggleActions.on,
function(s) {
/** @type {CustomEvent} */
s.detail.context == e.context && (e.onState = !0);
}
), window.addEventListener(e._toggleActions.off, function(s) {
/** @type {CustomEvent}*/
s.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 h`<button part="toggle-button" @click=${this._handleClickType}>
${this.name}
<slot></slot>
${this.onState ? h`<slot name="on-markup"></slot>` : h`<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.
}
f(g, "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 ee extends g {
_defaultMarkup() {
if (this.onState)
return h`<div><slot></slot></div>`;
}
}
class vt extends g {
_defaultMarkup() {
let t = "fade-in";
return this.onState || (t = "fade-out"), h`<div class="${t}"><slot></slot></div>`;
}
}
f(vt, "styles", Q`
div {
transition: opacity 0.3s;
}
.fade-in {
opacity: 100%;
}
.fade-out {
opacity: 0%;
}
`);
class At extends g {
constructor() {
super(), this.iconSet = "ionicons";
}
// Adds a close icon inside a button as the only content.
_defaultMarkup() {
let t;
return this.iconSet == "ionicons" ? t = h`<ion-icon name="close-outline">close</ion-icon>` : this.iconSet == "lucide" && (t = h`<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>`), h`
<button part="close-button" @click=${this._handleClick}>
${t}
</button>
`;
}
}
/**
* @typedef {'ionicons' | 'lucide'} iconSetType
*/
f(At, "properties", {
...g.properties,
iconSet: { type: String }
});
class Y extends g {
constructor() {
super(), this.settingsMenu = void 0;
}
// Adds a "hamburger" or "close" icon inside a button as the only content depending on onState.
_defaultMarkup() {
return h`
<button part="menu-button" @click=${this._handleClickType}>
${this.onState ? h`<ion-icon name="close-outline">close</ion-icon>` : h`<ion-icon name=${this.settingsMenu ? "options-outline" : "menu-outline"}>menu</ion-icon>`}
</button>
`;
}
}
f(Y, "properties", {
...g.properties,
// Allow for a 'settings' icon for the menu with this attribute.
settingsMenu: { type: Boolean }
});
class se extends g {
// 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 h`
<div part="scrim-layer"
@click=${this._handleClickType}>
<!-- NB: Nothing goes here, the scrim shouldn't have children elements. -->
</div>
`;
}
}
class z extends g {
constructor() {
super();
// Setup and checks matchMedia, add dynamic checking if dynamic attribute set.
f(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 = h`<span
>meta info: viewport width: ${this._size}, onState: ${this.onState}, mq:
${this.mq}</span
>`), this.onState)
return e = h`${e} <slot></slot>`, e;
}
}
f(z, "properties", {
...g.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 yt extends z {
constructor() {
super(), this.withButton = void 0, this.settingsMenu = void 0;
}
render() {
let t;
return this.withButton && !this._matching && (t = h`
<mds-toggle-menu exportparts="menu-button" @click=${this._handleClickType}
?settingsMenu=${this.settingsMenu}
?onState=${this.onState}
></mds-toggle-menu>
`), h`<slot name="menu-label"></slot> ${t} ${this.onState ? h`<span part="slotted-content"><slot></slot></span>` : h`<span part="hidden-slotted-content"><slot></slot></span>`} `;
}
}
f(yt, "properties", {
...z.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 ie extends Y {
_defaultMarkup() {
return h`
<button part="menu-button" @click=${this._handleClickType}>
${this.onState ? h`<ion-icon name="close-outline">close</ion-icon>` : h`<ion-icon name="options-outline">settings</ion-icon>`}
</button>
`;
}
}
const oe = function() {
customElements.define("mds-toggle", g), customElements.define("mds-toggle-view", ee), customElements.define("mds-toggle-view-fade", vt), customElements.define("mds-toggle-close", At), customElements.define("mds-toggle-menu", Y), customElements.define("mds-toggle-settings", ie), customElements.define("mds-toggle-scrim", se), customElements.define("mds-mobile-toggle", z), customElements.define("mds-menu", yt);
};
class bt extends g {
constructor() {
super(...arguments);
// Create a ref object for the dialog element inside the ShadowDOM so it can be referenced later directly.
f(this, "dialogRef", Xt());
}
/**
* Listens for click outside of dialog and fires dialog.close() and fires custom offEvent for sharing state. (see toggle.js)
*
* @fires dialog.close()
* @fires offEvent
* */
_handleClick(e) {
e.type == "close" && e.target == this.dialogRef.value && (this.onState = !1, this._toggleEvent(this._toggleActions.off));
let s = (
/** @type {HTMLElement}*/
e.target
);
((s == null ? void 0 : s.tagName) == "DIALOG" || (s == null ? void 0 : s.tagName) == "MDS-TOGGLE-CLOSE") && /** @type {HTMLDialogElement}*/
this.dialogRef.value.close();
}
// When updated, if onState true, call showModal.
updated() {
this.onState && /** @type {HTMLDialogElement}*/
this.dialogRef.value.showModal();
}
// Override Toggle class _defaultMarkup with markup for this extended component.
_defaultMarkup() {
return h`
<dialog part="dialog-element"
${te(this.dialogRef)}
@click=${// Handle any click events to see if they will close the dialog.
this._handleClick}
@close=${// Specifically listen for the close event on the dialog itself.
this._handleClick}
>
<div part="dialog-body">
<slot></slot>
<mds-toggle-close part="dialog-close"></mds-toggle-close>
</div>
</dialog>
`;
}
}
f(bt, "styles", Q`
dialog {
margin-top: 10rem;
/* NB! 0 padding means any child content clicked will pass event.target.tagName !== DIALOG, so clicking child content (except mds-toggle-close) will NOT close the dialog. This allows the background part of a modal dialog to be clicked to close. */
padding: 0;
border: none;
width: var(--dialog-width, 90%);
overflow: visible;
&::backdrop {
animation: wc-backdrop-filter-blur var(--dialog-animation-time) ease-out forwards;
}
}
/* Regrettably non-FF browsers require keyframes scoped to same shadow root. */
@keyframes wc-backdrop-filter-blur {
from {
backdrop-filter: blur(0);
}
to {
background: rgba(0 0 0 / 80%);
backdrop-filter: blur(2px);
}
}
/* Holds dialog contents. */
[part="dialog-body"] {
padding: 1rem;
}
/* Absolutely position mds-toggle-close component to the top-right of the dialog. */
mds-toggle-close[part="dialog-close"] {
position: absolute;
top: 0;
right: 0;
}
/* Theme the actual close button part. */
mds-toggle-close::part(close-button) {
border: none;
border-radius: var(--mds-border-radius);
font-size: 1.5rem;
padding-top: 0.45rem;
background: inherit;
color: var(--mds-color-gray-900);
}
/* Highlight the close button part on hover/focus. */
mds-toggle-close::part(close-button):hover,
mds-toggle-close::part(close-button):focus {
color: var(--mds-color-black);
cursor: pointer;
}
/* Support for dark-mode: e.g. mds-dialog.mds-dark: */
:host(.mds-dark) mds-toggle-close::part(close-button) {
color: var(--mds-color-gray-300);
background: inherit;
}
:host(.mds-dark) mds-toggle-close::part(close-button):hover,
:host(.mds-dark) mds-toggle-close::part(close-button):focus {
color: var(--mds-color-white);
}
`);
const ne = function() {
customElements.define("mds-dialog", bt);
};
class F extends C {
constructor() {
super(), this.openStatus = !1, this.sectionTitle = "";
}
// Handle button click to open/close drawer.
handleClick() {
this.openStatus = !this.openStatus;
}
// Render the element.
render() {
let t = h`<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 = h`<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>`, s = "open", o = t;
return this.openStatus && (s = "close", o = e), h`
<section>
<button @click=${this.handleClick}>
<span class="sr-only"> ${s} </span>
${o}
</button>
<div class="drawer-contents">
${this.sectionTitle ? h`<h3>${this.sectionTitle}</h3>` : ""}
<slot></slot>
</div>
</section>
`;
}
}
f(F, "properties", {
// This property/attribute reflects so we can style it in CSS via attribute selector.
openStatus: { type: Boolean, reflect: !0 },
// A property for a section title for the drawer.
sectionTitle: { type: String }
}), // Set styles.
f(F, "styles", Q`
/* 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: 0;
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));
}
`);
const re = function() {
customElements.define("mds-drawer", F);
};
ne();
re();
oe();
export {
F as DrawerElement,
yt as MDSMenu,
bt as MdsDialog,
z as MobileToggle,
g as Toggle,
At as ToggleClose,
Y as ToggleMenu,
se as ToggleScrim,
ie as ToggleSettings,
ee as ToggleView,
vt as ToggleViewFade,
ne as defineDialog,
re as defineDrawer,
oe as defineToggleComponents
};