@glair/web-components
Version:
A collection of GLAIR's web components
901 lines (888 loc) • 33.2 kB
JavaScript
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const N = window, W = N.ShadowRoot && (N.ShadyCSS === void 0 || N.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, q = Symbol(), K = /* @__PURE__ */ new WeakMap();
let rt = class {
constructor(t, e, i) {
if (this._$cssResult$ = !0, i !== q)
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 (W && t === void 0) {
const i = e !== void 0 && e.length === 1;
i && (t = K.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && K.set(e, t));
}
return t;
}
toString() {
return this.cssText;
}
};
const ct = (n) => new rt(typeof n == "string" ? n : n + "", void 0, q), pt = (n, ...t) => {
const e = n.length === 1 ? n[0] : t.reduce((i, s, r) => i + ((o) => {
if (o._$cssResult$ === !0)
return o.cssText;
if (typeof o == "number")
return o;
throw Error("Value passed to 'css' function must be a 'css' function result: " + o + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
})(s) + n[r + 1], n[0]);
return new rt(e, n, q);
}, ut = (n, t) => {
W ? n.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet) : t.forEach((e) => {
const i = document.createElement("style"), s = N.litNonce;
s !== void 0 && i.setAttribute("nonce", s), i.textContent = e.cssText, n.appendChild(i);
});
}, F = W ? (n) => n : (n) => n instanceof CSSStyleSheet ? ((t) => {
let e = "";
for (const i of t.cssRules)
e += i.cssText;
return ct(e);
})(n) : n;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var j;
const R = window, J = R.trustedTypes, $t = J ? J.emptyScript : "", Q = R.reactiveElementPolyfillSupport, G = { toAttribute(n, t) {
switch (t) {
case Boolean:
n = n ? $t : null;
break;
case Object:
case Array:
n = n == null ? n : JSON.stringify(n);
}
return n;
}, fromAttribute(n, t) {
let e = n;
switch (t) {
case Boolean:
e = n !== null;
break;
case Number:
e = n === null ? null : Number(n);
break;
case Object:
case Array:
try {
e = JSON.parse(n);
} catch {
e = null;
}
}
return e;
} }, lt = (n, t) => t !== n && (t == t || n == n), D = { attribute: !0, type: String, converter: G, reflect: !1, hasChanged: lt };
let _ = class extends HTMLElement {
constructor() {
super(), this._$Ei = /* @__PURE__ */ new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$El = null, this.u();
}
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 s = this._$Ep(i, e);
s !== void 0 && (this._$Ev.set(s, i), t.push(s));
}), t;
}
static createProperty(t, e = D) {
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, s = this.getPropertyDescriptor(t, i, e);
s !== void 0 && Object.defineProperty(this.prototype, t, s);
}
}
static getPropertyDescriptor(t, e, i) {
return { get() {
return this[e];
}, set(s) {
const r = this[t];
this[e] = s, this.requestUpdate(t, r, i);
}, configurable: !0, enumerable: !0 };
}
static getPropertyOptions(t) {
return this.elementProperties.get(t) || D;
}
static finalize() {
if (this.hasOwnProperty("finalized"))
return !1;
this.finalized = !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 s of i)
this.createProperty(s, e[s]);
}
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 s of i)
e.unshift(F(s));
} else
t !== void 0 && e.push(F(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;
}
u() {
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 ut(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 = D) {
var s;
const r = this.constructor._$Ep(t, i);
if (r !== void 0 && i.reflect === !0) {
const o = (((s = i.converter) === null || s === void 0 ? void 0 : s.toAttribute) !== void 0 ? i.converter : G).toAttribute(e, i.type);
this._$El = t, o == null ? this.removeAttribute(r) : this.setAttribute(r, o), this._$El = null;
}
}
_$AK(t, e) {
var i;
const s = this.constructor, r = s._$Ev.get(t);
if (r !== void 0 && this._$El !== r) {
const o = s.getPropertyOptions(r), d = typeof o.converter == "function" ? { fromAttribute: o.converter } : ((i = o.converter) === null || i === void 0 ? void 0 : i.fromAttribute) !== void 0 ? o.converter : G;
this._$El = r, this[r] = d.fromAttribute(e, o.type), this._$El = null;
}
}
requestUpdate(t, e, i) {
let s = !0;
t !== void 0 && (((i = i || this.constructor.getPropertyOptions(t)).hasChanged || lt)(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))) : s = !1), !this.isUpdatePending && s && (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((s, r) => this[r] = s), 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((s) => {
var r;
return (r = s.hostUpdate) === null || r === void 0 ? void 0 : r.call(s);
}), this.update(i)) : this._$Ek();
} catch (s) {
throw e = !1, this._$Ek(), s;
}
e && this._$AE(i);
}
willUpdate(t) {
}
_$AE(t) {
var e;
(e = this._$ES) === null || e === void 0 || e.forEach((i) => {
var s;
return (s = i.hostUpdated) === null || s === void 0 ? void 0 : s.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) {
}
};
_.finalized = !0, _.elementProperties = /* @__PURE__ */ new Map(), _.elementStyles = [], _.shadowRootOptions = { mode: "open" }, Q == null || Q({ ReactiveElement: _ }), ((j = R.reactiveElementVersions) !== null && j !== void 0 ? j : R.reactiveElementVersions = []).push("1.6.1");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var z;
const T = window, y = T.trustedTypes, X = y ? y.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, v = `lit$${(Math.random() + "").slice(9)}$`, at = "?" + v, vt = `<${at}>`, b = document, S = (n = "") => b.createComment(n), H = (n) => n === null || typeof n != "object" && typeof n != "function", ht = Array.isArray, ft = (n) => ht(n) || typeof (n == null ? void 0 : n[Symbol.iterator]) == "function", w = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Y = /-->/g, tt = />/g, f = RegExp(`>|[
\f\r](?:([^\\s"'>=/]+)([
\f\r]*=[
\f\r]*(?:[^
\f\r"'\`<>=]|("|')|))|$)`, "g"), et = /'/g, it = /"/g, dt = /^(?:script|style|textarea|title)$/i, gt = (n) => (t, ...e) => ({ _$litType$: n, strings: t, values: e }), x = gt(1), A = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), st = /* @__PURE__ */ new WeakMap(), m = b.createTreeWalker(b, 129, null, !1), _t = (n, t) => {
const e = n.length - 1, i = [];
let s, r = t === 2 ? "<svg>" : "", o = w;
for (let l = 0; l < e; l++) {
const a = n[l];
let $, h, c = -1, u = 0;
for (; u < a.length && (o.lastIndex = u, h = o.exec(a), h !== null); )
u = o.lastIndex, o === w ? h[1] === "!--" ? o = Y : h[1] !== void 0 ? o = tt : h[2] !== void 0 ? (dt.test(h[2]) && (s = RegExp("</" + h[2], "g")), o = f) : h[3] !== void 0 && (o = f) : o === f ? h[0] === ">" ? (o = s ?? w, c = -1) : h[1] === void 0 ? c = -2 : (c = o.lastIndex - h[2].length, $ = h[1], o = h[3] === void 0 ? f : h[3] === '"' ? it : et) : o === it || o === et ? o = f : o === Y || o === tt ? o = w : (o = f, s = void 0);
const M = o === f && n[l + 1].startsWith("/>") ? " " : "";
r += o === w ? a + vt : c >= 0 ? (i.push($), a.slice(0, c) + "$lit$" + a.slice(c) + v + M) : a + v + (c === -2 ? (i.push(void 0), l) : M);
}
const d = r + (n[e] || "<?>") + (t === 2 ? "</svg>" : "");
if (!Array.isArray(n) || !n.hasOwnProperty("raw"))
throw Error("invalid template strings array");
return [X !== void 0 ? X.createHTML(d) : d, i];
};
class O {
constructor({ strings: t, _$litType$: e }, i) {
let s;
this.parts = [];
let r = 0, o = 0;
const d = t.length - 1, l = this.parts, [a, $] = _t(t, e);
if (this.el = O.createElement(a, i), m.currentNode = this.el.content, e === 2) {
const h = this.el.content, c = h.firstChild;
c.remove(), h.append(...c.childNodes);
}
for (; (s = m.nextNode()) !== null && l.length < d; ) {
if (s.nodeType === 1) {
if (s.hasAttributes()) {
const h = [];
for (const c of s.getAttributeNames())
if (c.endsWith("$lit$") || c.startsWith(v)) {
const u = $[o++];
if (h.push(c), u !== void 0) {
const M = s.getAttribute(u.toLowerCase() + "$lit$").split(v), P = /([.?@])?(.*)/.exec(u);
l.push({ type: 1, index: r, name: P[2], strings: M, ctor: P[1] === "." ? yt : P[1] === "?" ? At : P[1] === "@" ? Ct : L });
} else
l.push({ type: 6, index: r });
}
for (const c of h)
s.removeAttribute(c);
}
if (dt.test(s.tagName)) {
const h = s.textContent.split(v), c = h.length - 1;
if (c > 0) {
s.textContent = y ? y.emptyScript : "";
for (let u = 0; u < c; u++)
s.append(h[u], S()), m.nextNode(), l.push({ type: 2, index: ++r });
s.append(h[c], S());
}
}
} else if (s.nodeType === 8)
if (s.data === at)
l.push({ type: 2, index: r });
else {
let h = -1;
for (; (h = s.data.indexOf(v, h + 1)) !== -1; )
l.push({ type: 7, index: r }), h += v.length - 1;
}
r++;
}
}
static createElement(t, e) {
const i = b.createElement("template");
return i.innerHTML = t, i;
}
}
function C(n, t, e = n, i) {
var s, r, o, d;
if (t === A)
return t;
let l = i !== void 0 ? (s = e._$Co) === null || s === void 0 ? void 0 : s[i] : e._$Cl;
const a = H(t) ? void 0 : t._$litDirective$;
return (l == null ? void 0 : l.constructor) !== a && ((r = l == null ? void 0 : l._$AO) === null || r === void 0 || r.call(l, !1), a === void 0 ? l = void 0 : (l = new a(n), l._$AT(n, e, i)), i !== void 0 ? ((o = (d = e)._$Co) !== null && o !== void 0 ? o : d._$Co = [])[i] = l : e._$Cl = l), l !== void 0 && (t = C(n, l._$AS(n, t.values), l, i)), t;
}
class mt {
constructor(t, e) {
this.u = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
}
get parentNode() {
return this._$AM.parentNode;
}
get _$AU() {
return this._$AM._$AU;
}
v(t) {
var e;
const { el: { content: i }, parts: s } = this._$AD, r = ((e = t == null ? void 0 : t.creationScope) !== null && e !== void 0 ? e : b).importNode(i, !0);
m.currentNode = r;
let o = m.nextNode(), d = 0, l = 0, a = s[0];
for (; a !== void 0; ) {
if (d === a.index) {
let $;
a.type === 2 ? $ = new U(o, o.nextSibling, this, t) : a.type === 1 ? $ = new a.ctor(o, a.name, a.strings, this, t) : a.type === 6 && ($ = new wt(o, this, t)), this.u.push($), a = s[++l];
}
d !== (a == null ? void 0 : a.index) && (o = m.nextNode(), d++);
}
return r;
}
p(t) {
let e = 0;
for (const i of this.u)
i !== void 0 && (i.strings !== void 0 ? (i._$AI(t, i, e), e += i.strings.length - 2) : i._$AI(t[e])), e++;
}
}
class U {
constructor(t, e, i, s) {
var r;
this.type = 2, this._$AH = p, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = i, this.options = s, this._$Cm = (r = s == null ? void 0 : s.isConnected) === null || r === void 0 || r;
}
get _$AU() {
var t, e;
return (e = (t = this._$AM) === null || t === void 0 ? void 0 : t._$AU) !== null && e !== void 0 ? e : this._$Cm;
}
get parentNode() {
let t = this._$AA.parentNode;
const e = this._$AM;
return e !== void 0 && t.nodeType === 11 && (t = e.parentNode), t;
}
get startNode() {
return this._$AA;
}
get endNode() {
return this._$AB;
}
_$AI(t, e = this) {
t = C(this, t, e), H(t) ? t === p || t == null || t === "" ? (this._$AH !== p && this._$AR(), this._$AH = p) : t !== this._$AH && t !== A && this.g(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : ft(t) ? this.k(t) : this.g(t);
}
O(t, e = this._$AB) {
return this._$AA.parentNode.insertBefore(t, e);
}
T(t) {
this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
}
g(t) {
this._$AH !== p && H(this._$AH) ? this._$AA.nextSibling.data = t : this.T(b.createTextNode(t)), this._$AH = t;
}
$(t) {
var e;
const { values: i, _$litType$: s } = t, r = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = O.createElement(s.h, this.options)), s);
if (((e = this._$AH) === null || e === void 0 ? void 0 : e._$AD) === r)
this._$AH.p(i);
else {
const o = new mt(r, this), d = o.v(this.options);
o.p(i), this.T(d), this._$AH = o;
}
}
_$AC(t) {
let e = st.get(t.strings);
return e === void 0 && st.set(t.strings, e = new O(t)), e;
}
k(t) {
ht(this._$AH) || (this._$AH = [], this._$AR());
const e = this._$AH;
let i, s = 0;
for (const r of t)
s === e.length ? e.push(i = new U(this.O(S()), this.O(S()), this, this.options)) : i = e[s], i._$AI(r), s++;
s < e.length && (this._$AR(i && i._$AB.nextSibling, s), e.length = s);
}
_$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 s = t.nextSibling;
t.remove(), t = s;
}
}
setConnected(t) {
var e;
this._$AM === void 0 && (this._$Cm = t, (e = this._$AP) === null || e === void 0 || e.call(this, t));
}
}
class L {
constructor(t, e, i, s, r) {
this.type = 1, this._$AH = p, this._$AN = void 0, this.element = t, this.name = e, this._$AM = s, this.options = r, 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, s) {
const r = this.strings;
let o = !1;
if (r === void 0)
t = C(this, t, e, 0), o = !H(t) || t !== this._$AH && t !== A, o && (this._$AH = t);
else {
const d = t;
let l, a;
for (t = r[0], l = 0; l < r.length - 1; l++)
a = C(this, d[i + l], e, l), a === A && (a = this._$AH[l]), o || (o = !H(a) || a !== this._$AH[l]), a === p ? t = p : t !== p && (t += (a ?? "") + r[l + 1]), this._$AH[l] = a;
}
o && !s && this.j(t);
}
j(t) {
t === p ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
}
}
class yt extends L {
constructor() {
super(...arguments), this.type = 3;
}
j(t) {
this.element[this.name] = t === p ? void 0 : t;
}
}
const bt = y ? y.emptyScript : "";
class At extends L {
constructor() {
super(...arguments), this.type = 4;
}
j(t) {
t && t !== p ? this.element.setAttribute(this.name, bt) : this.element.removeAttribute(this.name);
}
}
class Ct extends L {
constructor(t, e, i, s, r) {
super(t, e, i, s, r), this.type = 5;
}
_$AI(t, e = this) {
var i;
if ((t = (i = C(this, t, e, 0)) !== null && i !== void 0 ? i : p) === A)
return;
const s = this._$AH, r = t === p && s !== p || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, o = t !== p && (s === p || r);
r && this.element.removeEventListener(this.name, this, s), o && 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 wt {
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) {
C(this, t);
}
}
const nt = T.litHtmlPolyfillSupport;
nt == null || nt(O, U), ((z = T.litHtmlVersions) !== null && z !== void 0 ? z : T.litHtmlVersions = []).push("2.6.1");
const xt = (n, t, e) => {
var i, s;
const r = (i = e == null ? void 0 : e.renderBefore) !== null && i !== void 0 ? i : t;
let o = r._$litPart$;
if (o === void 0) {
const d = (s = e == null ? void 0 : e.renderBefore) !== null && s !== void 0 ? s : null;
r._$litPart$ = o = new U(t.insertBefore(S(), d), d, void 0, e ?? {});
}
return o._$AI(n), o;
};
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var I, V;
class E extends _ {
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 = xt(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 A;
}
}
E.finalized = !0, E._$litElement$ = !0, (I = globalThis.litElementHydrateSupport) === null || I === void 0 || I.call(globalThis, { LitElement: E });
const ot = globalThis.litElementPolyfillSupport;
ot == null || ot({ LitElement: E });
((V = globalThis.litElementVersions) !== null && V !== void 0 ? V : globalThis.litElementVersions = []).push("3.2.2");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const Et = (n) => (t) => typeof t == "function" ? ((e, i) => (customElements.define(e, i), i))(n, t) : ((e, i) => {
const { kind: s, elements: r } = i;
return { kind: s, elements: r, finisher(o) {
customElements.define(e, o);
} };
})(n, t);
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const St = (n, t) => t.kind === "method" && t.descriptor && !("value" in t.descriptor) ? { ...t, finisher(e) {
e.createProperty(t.key, n);
} } : { 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, n);
} };
function B(n) {
return (t, e) => e !== void 0 ? ((i, s, r) => {
s.constructor.createProperty(r, i);
})(n, t, e) : St(n, t);
}
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
function Ht(n) {
return B({ ...n, state: !0 });
}
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var Z;
((Z = window.HTMLSlotElement) === null || Z === void 0 ? void 0 : Z.prototype.assignedElements) != null;
var Ot = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, k = (n, t, e, i) => {
for (var s = i > 1 ? void 0 : i ? Ut(t, e) : t, r = n.length - 1, o; r >= 0; r--)
(o = n[r]) && (s = (i ? o(t, e, s) : o(s)) || s);
return i && s && Ot(t, e, s), s;
};
let g = class extends E {
constructor() {
super(...arguments), this.url = "", this.position = "right", this.width = 375, this.isOpen = !1, this.toggleButtonExpandedLeftIcon = x`<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 24L20 16L12 8"
stroke="#00709F"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>`, this.toggleButtonExpandedRightIcon = x`<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 24L12 16L20 8"
stroke="#00709F"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>`, this.toggleButtonMinimizedIcon = x`<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M29.9947 15.7869H28.5346C27.9183 13.2219 25.6017 11.3142 22.8369 11.3142H16.1791C15.7513 11.3142 15.3421 11.4834 15.0393 11.7838C14.0246 12.7941 14.7434 14.5229 16.1791 14.5229H21.6649C22.8076 14.5229 23.8399 14.9876 24.5831 15.7373C25.3136 16.4724 25.7639 17.4826 25.7668 18.5969C25.7726 20.8488 23.8555 22.6903 21.5936 22.6903H10.7899C8.48992 22.6903 6.62453 20.8332 6.62453 18.5434V12.866C6.62453 10.6579 8.40691 8.85912 10.6249 8.828L18.5015 8.72008C18.9625 8.71424 19.401 8.52075 19.7165 8.1853C20.7273 7.10895 19.9645 5.351 18.4849 5.34614C15.0501 5.33447 10.5731 5.3335 10.5731 5.3335C6.55714 5.33447 3.30394 8.58979 3.30394 12.6074V12.8699H2.00597C1.26665 12.8699 0.666992 13.4669 0.666992 14.203V17.2745C0.666992 18.0106 1.26665 18.6076 2.00597 18.6076H3.30394V18.8701C3.30394 22.8877 6.55714 26.143 10.5721 26.143H21.575C24.6534 26.143 27.1956 24.2285 28.2152 21.5245H29.9947C30.734 21.5245 31.3337 20.9275 31.3337 20.1915V17.1199C31.3337 16.3839 30.734 15.7869 29.9947 15.7869Z"
fill="white"
/>
<path
d="M29.9947 15.7869H28.5346C27.9183 13.2219 25.6017 11.3142 22.8369 11.3142H16.1791C15.7513 11.3142 15.3421 11.4834 15.0393 11.7838C14.0246 12.7941 14.7434 14.5229 16.1791 14.5229H21.6649C22.8076 14.5229 23.8399 14.9876 24.5831 15.7373C25.3136 16.4724 25.7639 17.4826 25.7668 18.5969C25.7726 20.8488 23.8555 22.6903 21.5936 22.6903H10.7899C8.48992 22.6903 6.62453 20.8332 6.62453 18.5434V12.866C6.62453 10.6579 8.40691 8.85912 10.6249 8.828L18.5015 8.72008C18.9625 8.71424 19.401 8.52075 19.7165 8.1853C20.7273 7.10895 19.9645 5.351 18.4849 5.34614C15.0501 5.33447 10.5731 5.3335 10.5731 5.3335C6.55714 5.33447 3.30394 8.58979 3.30394 12.6074V12.8699H2.00597C1.26665 12.8699 0.666992 13.4669 0.666992 14.203V17.2745C0.666992 18.0106 1.26665 18.6076 2.00597 18.6076H3.30394V18.8701C3.30394 22.8877 6.55714 26.143 10.5721 26.143H21.575C24.6534 26.143 27.1956 24.2285 28.2152 21.5245H29.9947C30.734 21.5245 31.3337 20.9275 31.3337 20.1915V17.1199C31.3337 16.3839 30.734 15.7869 29.9947 15.7869Z"
fill="url(#paint0_linear_15964_22967)"
style="mix-blend-mode: color-burn"
/>
<path
d="M11.4829 20.3931C12.4658 20.3931 13.2626 19.6576 13.2626 18.7503C13.2626 17.843 12.4658 17.1074 11.4829 17.1074C10.5 17.1074 9.70312 17.843 9.70312 18.7503C9.70312 19.6576 10.5 20.3931 11.4829 20.3931Z"
fill="white"
/>
<path
d="M11.4829 20.3931C12.4658 20.3931 13.2626 19.6576 13.2626 18.7503C13.2626 17.843 12.4658 17.1074 11.4829 17.1074C10.5 17.1074 9.70312 17.843 9.70312 18.7503C9.70312 19.6576 10.5 20.3931 11.4829 20.3931Z"
fill="url(#paint1_linear_15964_22967)"
style="mix-blend-mode: color-burn"
/>
<path
d="M20.2446 20.3931C21.2275 20.3931 22.0244 19.6576 22.0244 18.7503C22.0244 17.843 21.2275 17.1074 20.2446 17.1074C19.2617 17.1074 18.4648 17.843 18.4648 18.7503C18.4648 19.6576 19.2617 20.3931 20.2446 20.3931Z"
fill="white"
/>
<path
d="M20.2446 20.3931C21.2275 20.3931 22.0244 19.6576 22.0244 18.7503C22.0244 17.843 21.2275 17.1074 20.2446 17.1074C19.2617 17.1074 18.4648 17.843 18.4648 18.7503C18.4648 19.6576 19.2617 20.3931 20.2446 20.3931Z"
fill="url(#paint2_linear_15964_22967)"
style="mix-blend-mode: color-burn"
/>
<defs>
<linearGradient
id="paint0_linear_15964_22967"
x1="15.9189"
y1="3.42596"
x2="9.71415"
y2="22.7762"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="#CDCDCD" />
</linearGradient>
<linearGradient
id="paint1_linear_15964_22967"
x1="11.4734"
y1="16.8062"
x2="10.2386"
y2="19.6371"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="#CDCDCD" />
</linearGradient>
<linearGradient
id="paint2_linear_15964_22967"
x1="20.2352"
y1="16.8062"
x2="19.0004"
y2="19.6371"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="#CDCDCD" />
</linearGradient>
</defs>
</svg>`, this.closeButtonIcon = x`<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15 5L5 15M5 5L15 15"
stroke="#1B1B1B"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg> `;
}
// Lifecycle methods
connectedCallback() {
super.connectedCallback(), this.adjustMainContent();
}
updated(n) {
super.updated(n), n.has("url") && this.updateIframeSource(), (n.has("isOpen") || n.has("position") || n.has("width")) && this.adjustMainContent();
}
// Methods
updateIframeSource() {
const n = this.renderRoot.querySelector(
".sidebar-iframe"
);
n && (n.src = this.url);
}
toggleSidebar() {
this.isOpen = !this.isOpen;
const n = this.renderRoot.querySelector(
".sidebar-toggle-button"
);
this.position === "left" ? n.style.left = `${(this.isOpen ? this.width : 0) + 16}px` : n.style.right = `${(this.isOpen ? this.width : 0) + 16}px`;
}
adjustMainContent() {
const n = document.body;
this.isOpen ? (n.style.transition = "margin 0.3s ease", this.position === "right" ? n.style.marginRight = `${this.width}px` : n.style.marginLeft = `${this.width}px`) : this.position === "right" ? n.style.marginRight = "0" : n.style.marginLeft = "0";
}
render() {
const n = {
width: `${this.width}px`,
[this.position]: this.isOpen ? "0" : `-${this.width}px`
};
return x`
<div
class="sidebar-container"
style="${Object.entries(n).map(([t, e]) => `${t}: ${e}`).join(";")}"
>
<div class="sidebar">
<div class="sidebar-header">
<div></div>
<div class="close-button" @click="${this.toggleSidebar}">
${this.closeButtonIcon}
</div>
</div>
<div class="sidebar-iframe-container">
<iframe
class="sidebar-iframe"
src="${this.url}"
title="Sidebar Content"
frameborder="0"
allowtransparency="true"
allow="clipboard-write; microphone; camera"
>
</iframe>
</div>
</div>
</div>
<button
class="sidebar-toggle-button"
data-expanded="${this.isOpen}"
data-position="${this.position}"
@click="${this.toggleSidebar}"
>
${this.isOpen ? this.position === "left" ? this.toggleButtonExpandedRightIcon : this.toggleButtonExpandedLeftIcon : this.toggleButtonMinimizedIcon}
</button>
`;
}
disconnectedCallback() {
document.body.style.marginLeft = "0", document.body.style.marginRight = "0", super.disconnectedCallback();
}
};
g.styles = pt`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sidebar-container {
position: fixed;
top: 0;
z-index: 9999;
height: 100vh;
transition: transform 0.3s ease;
}
.sidebar-toggle-button {
width: 56px;
height: 56px;
border-radius: 50%;
background-color: #00709f;
border: none;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 20px;
z-index: 10000;
transition: left 0.2s ease, right 0.2s ease;
}
.sidebar-toggle-button:hover {
transform: scale(1.05);
}
.sidebar-toggle-button[data-position="right"] {
right: 20px;
}
.sidebar-toggle-button[data-position="left"] {
left: 20px;
}
.sidebar-toggle-button[data-expanded="true"] {
background-color: white;
}
.sidebar {
background-color: white;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.sidebar-header {
height: 40px;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
border-bottom: 1px solid #eaeaea;
}
.close-button {
cursor: pointer;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-iframe-container {
width: 100%;
height: calc(100% - 40px);
overflow: hidden;
}
.sidebar-iframe {
width: 100%;
height: 100%;
border: none;
}
.main-content {
transition: margin 0.3s ease;
}
`;
k([
B({ type: String })
], g.prototype, "url", 2);
k([
B({ type: String })
], g.prototype, "position", 2);
k([
B({ type: Number })
], g.prototype, "width", 2);
k([
Ht()
], g.prototype, "isOpen", 2);
g = k([
Et("gl-chat-sidebar")
], g);
export {
g as GLChatSidebar
};