@glair/web-components
Version:
A collection of GLAIR's web components
764 lines (763 loc) • 39.6 kB
JavaScript
//#region node_modules/@lit/reactive-element/css-tag.js
var e = window, t = e.ShadowRoot && (e.ShadyCSS === void 0 || e.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, n = Symbol(), r = /* @__PURE__ */ new WeakMap(), i = class {
constructor(e, t, r) {
if (this._$cssResult$ = !0, r !== n) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
this.cssText = e, this.t = t;
}
get styleSheet() {
let e = this.o, n = this.t;
if (t && e === void 0) {
let t = n !== void 0 && n.length === 1;
t && (e = r.get(n)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), t && r.set(n, e));
}
return e;
}
toString() {
return this.cssText;
}
}, a = (e) => new i(typeof e == "string" ? e : e + "", void 0, n), o = (n, r) => {
t ? n.adoptedStyleSheets = r.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet)) : r.forEach(((t) => {
let r = document.createElement("style"), i = e.litNonce;
i !== void 0 && r.setAttribute("nonce", i), r.textContent = t.cssText, n.appendChild(r);
}));
}, s = t ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((e) => {
let t = "";
for (let n of e.cssRules) t += n.cssText;
return a(t);
})(e) : e, c = window, l = c.trustedTypes, u = l ? l.emptyScript : "", d = c.reactiveElementPolyfillSupport, f = {
toAttribute(e, t) {
switch (t) {
case Boolean:
e = e ? u : null;
break;
case Object:
case Array: e = e == null ? e : JSON.stringify(e);
}
return e;
},
fromAttribute(e, t) {
let n = e;
switch (t) {
case Boolean:
n = e !== null;
break;
case Number:
n = e === null ? null : Number(e);
break;
case Object:
case Array: try {
n = JSON.parse(e);
} catch {
n = null;
}
}
return n;
}
}, p = (e, t) => t !== e && (t == t || e == e), m = {
attribute: !0,
type: String,
converter: f,
reflect: !1,
hasChanged: p
}, h = "finalized", g = class extends HTMLElement {
constructor() {
super(), this._$Ei = /* @__PURE__ */ new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$El = null, this._$Eu();
}
static addInitializer(e) {
this.finalize(), (this.h ??= []).push(e);
}
static get observedAttributes() {
this.finalize();
let e = [];
return this.elementProperties.forEach(((t, n) => {
let r = this._$Ep(n, t);
r !== void 0 && (this._$Ev.set(r, n), e.push(r));
})), e;
}
static createProperty(e, t = m) {
if (t.state && (t.attribute = !1), this.finalize(), this.elementProperties.set(e, t), !t.noAccessor && !this.prototype.hasOwnProperty(e)) {
let n = typeof e == "symbol" ? Symbol() : "__" + e, r = this.getPropertyDescriptor(e, n, t);
r !== void 0 && Object.defineProperty(this.prototype, e, r);
}
}
static getPropertyDescriptor(e, t, n) {
return {
get() {
return this[t];
},
set(r) {
let i = this[e];
this[t] = r, this.requestUpdate(e, i, n);
},
configurable: !0,
enumerable: !0
};
}
static getPropertyOptions(e) {
return this.elementProperties.get(e) || m;
}
static finalize() {
if (this.hasOwnProperty(h)) return !1;
this[h] = !0;
let e = Object.getPrototypeOf(this);
if (e.finalize(), e.h !== void 0 && (this.h = [...e.h]), this.elementProperties = new Map(e.elementProperties), this._$Ev = /* @__PURE__ */ new Map(), this.hasOwnProperty("properties")) {
let e = this.properties, t = [...Object.getOwnPropertyNames(e), ...Object.getOwnPropertySymbols(e)];
for (let n of t) this.createProperty(n, e[n]);
}
return this.elementStyles = this.finalizeStyles(this.styles), !0;
}
static finalizeStyles(e) {
let t = [];
if (Array.isArray(e)) {
let n = new Set(e.flat(Infinity).reverse());
for (let e of n) t.unshift(s(e));
} else e !== void 0 && t.push(s(e));
return t;
}
static _$Ep(e, t) {
let n = t.attribute;
return !1 === n ? void 0 : typeof n == "string" ? n : typeof e == "string" ? e.toLowerCase() : void 0;
}
_$Eu() {
var e;
this._$E_ = new Promise(((e) => this.enableUpdating = e)), this._$AL = /* @__PURE__ */ new Map(), this._$Eg(), this.requestUpdate(), (e = this.constructor.h) == null || e.forEach(((e) => e(this)));
}
addController(e) {
var t;
(this._$ES ??= []).push(e), this.renderRoot !== void 0 && this.isConnected && ((t = e.hostConnected) == null || t.call(e));
}
removeController(e) {
var t;
(t = this._$ES) == null || t.splice(this._$ES.indexOf(e) >>> 0, 1);
}
_$Eg() {
this.constructor.elementProperties.forEach(((e, t) => {
this.hasOwnProperty(t) && (this._$Ei.set(t, this[t]), delete this[t]);
}));
}
createRenderRoot() {
let e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
return o(e, this.constructor.elementStyles), e;
}
connectedCallback() {
var e;
this.renderRoot === void 0 && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (e = this._$ES) == null || e.forEach(((e) => e.hostConnected?.call(e)));
}
enableUpdating(e) {}
disconnectedCallback() {
var e;
(e = this._$ES) == null || e.forEach(((e) => e.hostDisconnected?.call(e)));
}
attributeChangedCallback(e, t, n) {
this._$AK(e, n);
}
_$EO(e, t, n = m) {
let r = this.constructor._$Ep(e, n);
if (r !== void 0 && !0 === n.reflect) {
let i = (n.converter?.toAttribute === void 0 ? f : n.converter).toAttribute(t, n.type);
this._$El = e, i == null ? this.removeAttribute(r) : this.setAttribute(r, i), this._$El = null;
}
}
_$AK(e, t) {
let n = this.constructor, r = n._$Ev.get(e);
if (r !== void 0 && this._$El !== r) {
let e = n.getPropertyOptions(r), i = typeof e.converter == "function" ? { fromAttribute: e.converter } : e.converter?.fromAttribute === void 0 ? f : e.converter;
this._$El = r, this[r] = i.fromAttribute(t, e.type), this._$El = null;
}
}
requestUpdate(e, t, n) {
let r = !0;
e !== void 0 && (((n ||= this.constructor.getPropertyOptions(e)).hasChanged || p)(this[e], t) ? (this._$AL.has(e) || this._$AL.set(e, t), !0 === n.reflect && this._$El !== e && (this._$EC === void 0 && (this._$EC = /* @__PURE__ */ new Map()), this._$EC.set(e, n))) : r = !1), !this.isUpdatePending && r && (this._$E_ = this._$Ej());
}
async _$Ej() {
this.isUpdatePending = !0;
try {
await this._$E_;
} catch (e) {
Promise.reject(e);
}
let e = this.scheduleUpdate();
return e != null && await e, !this.isUpdatePending;
}
scheduleUpdate() {
return this.performUpdate();
}
performUpdate() {
var e;
if (!this.isUpdatePending) return;
this.hasUpdated, this._$Ei &&= (this._$Ei.forEach(((e, t) => this[t] = e)), void 0);
let t = !1, n = this._$AL;
try {
t = this.shouldUpdate(n), t ? (this.willUpdate(n), (e = this._$ES) == null || e.forEach(((e) => e.hostUpdate?.call(e))), this.update(n)) : this._$Ek();
} catch (e) {
throw t = !1, this._$Ek(), e;
}
t && this._$AE(n);
}
willUpdate(e) {}
_$AE(e) {
var t;
(t = this._$ES) == null || t.forEach(((e) => e.hostUpdated?.call(e))), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
}
_$Ek() {
this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
}
get updateComplete() {
return this.getUpdateComplete();
}
getUpdateComplete() {
return this._$E_;
}
shouldUpdate(e) {
return !0;
}
update(e) {
this._$EC !== void 0 && (this._$EC.forEach(((e, t) => this._$EO(t, this[t], e))), this._$EC = void 0), this._$Ek();
}
updated(e) {}
firstUpdated(e) {}
};
g[h] = !0, g.elementProperties = /* @__PURE__ */ new Map(), g.elementStyles = [], g.shadowRootOptions = { mode: "open" }, d?.({ ReactiveElement: g }), (c.reactiveElementVersions ??= []).push("1.6.3");
//#endregion
//#region node_modules/lit-html/lit-html.js
var _ = window, v = _.trustedTypes, y = v ? v.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, b = "$lit$", x = `lit$${(Math.random() + "").slice(9)}$`, S = "?" + x, ee = `<${S}>`, C = document, w = () => C.createComment(""), T = (e) => e === null || typeof e != "object" && typeof e != "function", E = Array.isArray, te = (e) => E(e) || typeof e?.[Symbol.iterator] == "function", D = "[ \n\f\r]", O = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, k = /-->/g, A = />/g, j = RegExp(`>|${D}(?:([^\\s"'>=/]+)(${D}*=${D}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), M = /'/g, N = /"/g, P = /^(?:script|style|textarea|title)$/i, F = ((e) => (t, ...n) => ({
_$litType$: e,
strings: t,
values: n
}))(1), I = Symbol.for("lit-noChange"), L = Symbol.for("lit-nothing"), R = /* @__PURE__ */ new WeakMap(), z = C.createTreeWalker(C, 129, null, !1);
function B(e, t) {
if (!Array.isArray(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
return y === void 0 ? t : y.createHTML(t);
}
var V = (e, t) => {
let n = e.length - 1, r = [], i, a = t === 2 ? "<svg>" : "", o = O;
for (let t = 0; t < n; t++) {
let n = e[t], s, c, l = -1, u = 0;
for (; u < n.length && (o.lastIndex = u, c = o.exec(n), c !== null);) u = o.lastIndex, o === O ? c[1] === "!--" ? o = k : c[1] === void 0 ? c[2] === void 0 ? c[3] !== void 0 && (o = j) : (P.test(c[2]) && (i = RegExp("</" + c[2], "g")), o = j) : o = A : o === j ? c[0] === ">" ? (o = i ?? O, l = -1) : c[1] === void 0 ? l = -2 : (l = o.lastIndex - c[2].length, s = c[1], o = c[3] === void 0 ? j : c[3] === "\"" ? N : M) : o === N || o === M ? o = j : o === k || o === A ? o = O : (o = j, i = void 0);
let d = o === j && e[t + 1].startsWith("/>") ? " " : "";
a += o === O ? n + ee : l >= 0 ? (r.push(s), n.slice(0, l) + b + n.slice(l) + x + d) : n + x + (l === -2 ? (r.push(void 0), t) : d);
}
return [B(e, a + (e[n] || "<?>") + (t === 2 ? "</svg>" : "")), r];
}, H = class e {
constructor({ strings: t, _$litType$: n }, r) {
let i;
this.parts = [];
let a = 0, o = 0, s = t.length - 1, c = this.parts, [l, u] = V(t, n);
if (this.el = e.createElement(l, r), z.currentNode = this.el.content, n === 2) {
let e = this.el.content, t = e.firstChild;
t.remove(), e.append(...t.childNodes);
}
for (; (i = z.nextNode()) !== null && c.length < s;) {
if (i.nodeType === 1) {
if (i.hasAttributes()) {
let e = [];
for (let t of i.getAttributeNames()) if (t.endsWith(b) || t.startsWith(x)) {
let n = u[o++];
if (e.push(t), n !== void 0) {
let e = i.getAttribute(n.toLowerCase() + b).split(x), t = /([.?@])?(.*)/.exec(n);
c.push({
type: 1,
index: a,
name: t[2],
strings: e,
ctor: t[1] === "." ? ne : t[1] === "?" ? ie : t[1] === "@" ? ae : K
});
} else c.push({
type: 6,
index: a
});
}
for (let t of e) i.removeAttribute(t);
}
if (P.test(i.tagName)) {
let e = i.textContent.split(x), t = e.length - 1;
if (t > 0) {
i.textContent = v ? v.emptyScript : "";
for (let n = 0; n < t; n++) i.append(e[n], w()), z.nextNode(), c.push({
type: 2,
index: ++a
});
i.append(e[t], w());
}
}
} else if (i.nodeType === 8) if (i.data === S) c.push({
type: 2,
index: a
});
else {
let e = -1;
for (; (e = i.data.indexOf(x, e + 1)) !== -1;) c.push({
type: 7,
index: a
}), e += x.length - 1;
}
a++;
}
}
static createElement(e, t) {
let n = C.createElement("template");
return n.innerHTML = e, n;
}
};
function U(e, t, n = e, r) {
var i, a;
if (t === I) return t;
let o = r === void 0 ? n._$Cl : n._$Co?.[r], s = T(t) ? void 0 : t._$litDirective$;
return o?.constructor !== s && ((i = o?._$AO) == null || i.call(o, !1), s === void 0 ? o = void 0 : (o = new s(e), o._$AT(e, n, r)), r === void 0 ? n._$Cl = o : ((a = n)._$Co ?? (a._$Co = []))[r] = o), o !== void 0 && (t = U(e, o._$AS(e, t.values), o, r)), t;
}
var W = class {
constructor(e, t) {
this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
}
get parentNode() {
return this._$AM.parentNode;
}
get _$AU() {
return this._$AM._$AU;
}
u(e) {
let { el: { content: t }, parts: n } = this._$AD, r = (e?.creationScope ?? C).importNode(t, !0);
z.currentNode = r;
let i = z.nextNode(), a = 0, o = 0, s = n[0];
for (; s !== void 0;) {
if (a === s.index) {
let t;
s.type === 2 ? t = new G(i, i.nextSibling, this, e) : s.type === 1 ? t = new s.ctor(i, s.name, s.strings, this, e) : s.type === 6 && (t = new oe(i, this, e)), this._$AV.push(t), s = n[++o];
}
a !== s?.index && (i = z.nextNode(), a++);
}
return z.currentNode = C, r;
}
v(e) {
let t = 0;
for (let n of this._$AV) n !== void 0 && (n.strings === void 0 ? n._$AI(e[t]) : (n._$AI(e, n, t), t += n.strings.length - 2)), t++;
}
}, G = class e {
constructor(e, t, n, r) {
var i;
this.type = 2, this._$AH = L, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = n, this.options = r, this._$Cp = (i = r?.isConnected) == null || i;
}
get _$AU() {
return this._$AM?._$AU ?? this._$Cp;
}
get parentNode() {
let e = this._$AA.parentNode, t = this._$AM;
return t !== void 0 && e?.nodeType === 11 && (e = t.parentNode), e;
}
get startNode() {
return this._$AA;
}
get endNode() {
return this._$AB;
}
_$AI(e, t = this) {
e = U(this, e, t), T(e) ? e === L || e == null || e === "" ? (this._$AH !== L && this._$AR(), this._$AH = L) : e !== this._$AH && e !== I && this._(e) : e._$litType$ === void 0 ? e.nodeType === void 0 ? te(e) ? this.T(e) : this._(e) : this.$(e) : this.g(e);
}
k(e) {
return this._$AA.parentNode.insertBefore(e, this._$AB);
}
$(e) {
this._$AH !== e && (this._$AR(), this._$AH = this.k(e));
}
_(e) {
this._$AH !== L && T(this._$AH) ? this._$AA.nextSibling.data = e : this.$(C.createTextNode(e)), this._$AH = e;
}
g(e) {
let { values: t, _$litType$: n } = e, r = typeof n == "number" ? this._$AC(e) : (n.el === void 0 && (n.el = H.createElement(B(n.h, n.h[0]), this.options)), n);
if (this._$AH?._$AD === r) this._$AH.v(t);
else {
let e = new W(r, this), n = e.u(this.options);
e.v(t), this.$(n), this._$AH = e;
}
}
_$AC(e) {
let t = R.get(e.strings);
return t === void 0 && R.set(e.strings, t = new H(e)), t;
}
T(t) {
E(this._$AH) || (this._$AH = [], this._$AR());
let n = this._$AH, r, i = 0;
for (let a of t) i === n.length ? n.push(r = new e(this.k(w()), this.k(w()), this, this.options)) : r = n[i], r._$AI(a), i++;
i < n.length && (this._$AR(r && r._$AB.nextSibling, i), n.length = i);
}
_$AR(e = this._$AA.nextSibling, t) {
var n;
for ((n = this._$AP) == null || n.call(this, !1, !0, t); e && e !== this._$AB;) {
let t = e.nextSibling;
e.remove(), e = t;
}
}
setConnected(e) {
var t;
this._$AM === void 0 && (this._$Cp = e, (t = this._$AP) == null || t.call(this, e));
}
}, K = class {
constructor(e, t, n, r, i) {
this.type = 1, this._$AH = L, this._$AN = void 0, this.element = e, this.name = t, this._$AM = r, this.options = i, n.length > 2 || n[0] !== "" || n[1] !== "" ? (this._$AH = Array(n.length - 1).fill(/* @__PURE__ */ new String()), this.strings = n) : this._$AH = L;
}
get tagName() {
return this.element.tagName;
}
get _$AU() {
return this._$AM._$AU;
}
_$AI(e, t = this, n, r) {
let i = this.strings, a = !1;
if (i === void 0) e = U(this, e, t, 0), a = !T(e) || e !== this._$AH && e !== I, a && (this._$AH = e);
else {
let r = e, o, s;
for (e = i[0], o = 0; o < i.length - 1; o++) s = U(this, r[n + o], t, o), s === I && (s = this._$AH[o]), a ||= !T(s) || s !== this._$AH[o], s === L ? e = L : e !== L && (e += (s ?? "") + i[o + 1]), this._$AH[o] = s;
}
a && !r && this.j(e);
}
j(e) {
e === L ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
}
}, ne = class extends K {
constructor() {
super(...arguments), this.type = 3;
}
j(e) {
this.element[this.name] = e === L ? void 0 : e;
}
}, re = v ? v.emptyScript : "", ie = class extends K {
constructor() {
super(...arguments), this.type = 4;
}
j(e) {
e && e !== L ? this.element.setAttribute(this.name, re) : this.element.removeAttribute(this.name);
}
}, ae = class extends K {
constructor(e, t, n, r, i) {
super(e, t, n, r, i), this.type = 5;
}
_$AI(e, t = this) {
if ((e = U(this, e, t, 0) ?? L) === I) return;
let n = this._$AH, r = e === L && n !== L || e.capture !== n.capture || e.once !== n.once || e.passive !== n.passive, i = e !== L && (n === L || r);
r && this.element.removeEventListener(this.name, this, n), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
}
handleEvent(e) {
typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
}
}, oe = class {
constructor(e, t, n) {
this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = n;
}
get _$AU() {
return this._$AM._$AU;
}
_$AI(e) {
U(this, e);
}
}, se = _.litHtmlPolyfillSupport;
se?.(H, G), (_.litHtmlVersions ??= []).push("2.8.0");
var ce = (e, t, n) => {
let r = n?.renderBefore ?? t, i = r._$litPart$;
if (i === void 0) {
let e = n?.renderBefore ?? null;
r._$litPart$ = i = new G(t.insertBefore(w(), e), e, void 0, n ?? {});
}
return i._$AI(e), i;
}, q, J = class extends g {
constructor() {
super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
}
createRenderRoot() {
var e;
let t = super.createRenderRoot();
return (e = this.renderOptions).renderBefore ?? (e.renderBefore = t.firstChild), t;
}
update(e) {
let t = this.render();
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = ce(t, this.renderRoot, this.renderOptions);
}
connectedCallback() {
var e;
super.connectedCallback(), (e = this._$Do) == null || e.setConnected(!0);
}
disconnectedCallback() {
var e;
super.disconnectedCallback(), (e = this._$Do) == null || e.setConnected(!1);
}
render() {
return I;
}
};
J.finalized = !0, J._$litElement$ = !0, (q = globalThis.litElementHydrateSupport) == null || q.call(globalThis, { LitElement: J });
var le = globalThis.litElementPolyfillSupport;
le?.({ LitElement: J }), (globalThis.litElementVersions ?? (globalThis.litElementVersions = [])).push("3.3.3");
//#endregion
//#region node_modules/@lit/reactive-element/decorators/custom-element.js
var ue = (e) => (t) => typeof t == "function" ? ((e, t) => (customElements.define(e, t), t))(e, t) : ((e, t) => {
let { kind: n, elements: r } = t;
return {
kind: n,
elements: r,
finisher(t) {
customElements.define(e, t);
}
};
})(e, t), de = (e, t) => t.kind === "method" && t.descriptor && !("value" in t.descriptor) ? {
...t,
finisher(n) {
n.createProperty(t.key, e);
}
} : {
kind: "field",
key: Symbol(),
placement: "own",
descriptor: {},
originalKey: t.key,
initializer() {
typeof t.initializer == "function" && (this[t.key] = t.initializer.call(this));
},
finisher(n) {
n.createProperty(t.key, e);
}
}, fe = (e, t, n) => {
t.constructor.createProperty(n, e);
};
function Y(e) {
return (t, n) => n === void 0 ? de(e, t) : fe(e, t, n);
}
//#endregion
//#region node_modules/@lit/reactive-element/decorators/state.js
function X(e) {
return Y({
...e,
state: !0
});
}
//#endregion
//#region node_modules/@lit/reactive-element/decorators/base.js
var pe = ({ finisher: e, descriptor: t }) => (n, r) => {
if (r === void 0) {
let r = n.originalKey ?? n.key, i = t == null ? {
...n,
key: r
} : {
kind: "method",
placement: "prototype",
key: r,
descriptor: t(n.key)
};
return e != null && (i.finisher = function(t) {
e(t, r);
}), i;
}
{
let i = n.constructor;
t !== void 0 && Object.defineProperty(n, r, t(r)), e?.(i, r);
}
};
//#endregion
//#region node_modules/@lit/reactive-element/decorators/query.js
function me(e, t) {
return pe({ descriptor: (n) => {
let r = {
get() {
return this.renderRoot?.querySelector(e) ?? null;
},
enumerable: !0,
configurable: !0
};
if (t) {
let t = typeof n == "symbol" ? Symbol() : "__" + n;
r.get = function() {
return this[t] === void 0 && (this[t] = this.renderRoot?.querySelector(e) ?? null), this[t];
};
}
return r;
} });
}
window.HTMLSlotElement?.prototype.assignedElements;
//#endregion
//#region src/assets/images/corner_overlay.png
var Z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAABBklEQVR4Ae3TUQ2EQBTAwH2XE4wvdKFj8UBI6MeMhaaz974Wn/stEoSIECJCiAghIoSIECJCiAghIoSIECJCiIj/euaYmXPxGkdECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQEUJECBEhRIQQETcExQXG6zjxjAAAAABJRU5ErkJggg==", he = a("*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:\"\"}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (width>=640px){.container{max-width:640px}}@media (width>=768px){.container{max-width:768px}}@media (width>=1024px){.container{max-width:1024px}}@media (width>=1280px){.container{max-width:1280px}}@media (width>=1536px){.container{max-width:1536px}}.btn-primary{--tw-border-opacity:1;border-width:2px;border-color:rgb(0 0 0/var(--tw-border-opacity,1));--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1));--tw-shadow:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow);border-radius:.5rem;padding:.5rem 1rem;font-weight:600}.btn-primary:hover{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.btn-primary:focus{outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000);--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1));--tw-ring-opacity:.75;outline:2px solid #0000}.btn{--tw-border-opacity:1;border-width:2px;border-color:rgb(0 0 0/var(--tw-border-opacity,1));--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1));--tw-shadow:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow);border-radius:.5rem;padding:.5rem 1rem;font-weight:600}.btn:hover{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.btn:focus{outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000);--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1));--tw-ring-opacity:.75;outline:2px solid #0000}.btn{justify-content:center;width:100%;max-width:200px;display:inline-flex}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-12{bottom:3rem}.left-12{left:3rem}.left-\\[50\\%\\]{left:50%}.right-12{right:3rem}.top-12{top:3rem}.top-\\[50\\%\\]{top:50%}.my-4{margin-top:1rem;margin-bottom:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.w-\\[300px\\]{width:300px}.w-full{width:100%}.max-w-\\[200px\\]{max-width:200px}.translate-x-\\[-50\\%\\]{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\\[-50\\%\\]{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-90{--tw-rotate:-90deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate:90deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.rounded-lg{border-radius:.5rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-2{border-width:2px}.border-dashed{border-style:dashed}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.object-cover{-o-object-fit:cover;object-fit:cover}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.text-\\[20px\\]{font-size:20px}.font-semibold{font-weight:600}.text-\\[\\#009CDE\\]{--tw-text-opacity:1;color:rgb(0 156 222/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.loading-dots div{animation-timing-function:cubic-bezier(0,1,1,0)}.loading-dots div:first-child{animation:.6s infinite loading-dots1;left:8px}.loading-dots div:nth-child(2){animation:.6s infinite loading-dots2;left:8px}.loading-dots div:nth-child(3){animation:.6s infinite loading-dots2;left:32px}.loading-dots div:nth-child(4){animation:.6s infinite loading-dots3;left:56px}@keyframes loading-dots1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes loading-dots3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes loading-dots2{0%{transform:translate(0)}to{transform:translate(24px)}}.hover\\:bg-gray-500:hover{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.focus\\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}.focus\\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}"), ge = class extends J {
static {
this.styles = [he];
}
dispatch(e, t) {
this.dispatchEvent(new CustomEvent(e, {
detail: t,
composed: !0,
bubbles: !0
}));
}
};
//#endregion
//#region src/utils/camera.ts
function _e(e) {
let t = ve(e);
return t && t.toDataURL("image/jpeg", .92);
}
function ve(e) {
let { ref: t, width: n = 480, height: r = 480, mirrored: i = !1, screenshotArea: a } = e, o = n * a.width / 100, s = r * a.height / 100, c = document.createElement("canvas");
c.width = o, c.height = s;
let l = c.getContext("2d");
if (l && c) {
i && (l.translate(c.width, 0), l.scale(-1, 1));
let { takeWidth: e, takeHeight: u, translateX: d, translateY: f } = (() => {
let e, o, s, c, l = n / r;
l > t.videoWidth / t.videoHeight ? (e = t.videoWidth, o = t.videoWidth * (1 / l), s = 0, c = (t.videoHeight - o) / 2) : (e = t.videoHeight * l, o = t.videoHeight, s = (t.videoWidth - e) / 2, c = 0);
let u = () => (s += Math.round(a.x / 100 * e), c += Math.round(a.y / 100 * o), e = e * a.width / 100, o = o * a.height / 100, i && (s = t.videoWidth - (s + e)), {
takeWidth: e,
takeHeight: o,
translateX: s,
translateY: c
});
return {takeWidth: e, takeHeight: o, translateX: s, translateY: c} = u(), {
takeWidth: e,
takeHeight: o,
translateX: s,
translateY: c
};
})();
l.drawImage(t, d, f, e, u, 0, 0, o, s), i && (l.scale(-1, 1), l.translate(-c.width, 0));
}
return c;
}
//#endregion
//#region \0@oxc-project+runtime@0.124.0/helpers/decorate.js
function Q(e, t, n, r) {
var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
return i > 3 && a && Object.defineProperty(t, n, a), a;
}
//#endregion
//#region src/components/webcam.ts
var $ = class extends ge {
constructor(...e) {
super(...e), this.width = 480, this.height = 480, this.facingMode = "user", this.mirrored = !1, this.screenshotArea = JSON.stringify({
x: 0,
y: 0,
width: 100,
height: 100,
enableOverlay: !1
}), this._isUserMedia = !1, this._stream = null, this._screenshotAreaObj = {
x: 0,
y: 0,
width: 100,
height: 100,
enableOverlay: !1
}, this._isMounted = !0;
}
async connectedCallback() {
super.connectedCallback(), await this.requestUserMedia(), this._screenshotAreaObj = this.preProcessScreenshotArea();
}
async disconnectedCallback() {
super.disconnectedCallback(), this._isMounted = !1, this.stopStream();
}
async requestUserMedia() {
try {
let e = await navigator.mediaDevices.getUserMedia({ video: { facingMode: this.facingMode } });
this._stream = e, this.videoEl.srcObject = e, this._isUserMedia = !0, this._isMounted || this.stopStream();
} catch (e) {
console.log("Error occured", e);
}
}
preProcessScreenshotArea() {
let e = JSON.parse(this.screenshotArea);
function t(e, t) {
return e + t > 100;
}
return t(e.x, e.width) && (e.width = 100 - e.x), t(e.y, e.height) && (e.height = 100 - e.y), e;
}
stopStream() {
this._stream?.getTracks().forEach((e) => {
this._stream?.removeTrack(e), e.stop();
});
}
async screenshot() {
return _e({
ref: this.videoEl,
width: this.width,
height: this.height,
mirrored: this.mirrored,
screenshotArea: this._screenshotAreaObj
});
}
render() {
return F`
<div class="relative bg-gray-200">
<video
autoplay
muted
playsinline
class="object-cover"
style="width: ${this.width}px; height: ${this.height}px; transform: scaleX(${this.mirrored ? "-1" : "1"});"
></video>
${this.userMediaError()} ${this.userMedia()} ${this.screenshotOverlay()}
</div>
`;
}
userMediaError() {
return F`
<div style="${this._isUserMedia ? "display: none" : "display: revert"}">
<slot name="user-media-error">
<div
class="absolute top-[50%] left-[50%] flex w-[300px] translate-y-[-50%] translate-x-[-50%] flex-col rounded-sm border bg-white py-4 px-8"
>
<p class="text-[20px]">Camera blocked</p>
<p class="my-4">
Please allow camera access in your browser settings and try again.
</p>
<div class="flex flex-col items-end">
<button
type="button"
class="text-md text-[#009CDE]"
.onclick=${() => location.reload()}
>
Try Again
</button>
</div>
</div>
</slot>
</div>
`;
}
userMedia() {
return F`
<div style="${this._isUserMedia ? "display: revert" : "display: none"}">
<slot name="user-media">
<img
src=${Z}
alt="overlay"
width="50"
class="absolute top-12 left-12"
/>
<img
src=${Z}
alt="overlay"
width="50"
class="absolute bottom-12 left-12 -rotate-90"
/>
<img
src=${Z}
alt="overlay"
width="50"
class="absolute top-12 right-12 rotate-90"
/>
<img
src=${Z}
alt="overlay"
width="50"
class="absolute bottom-12 right-12 rotate-180"
/>
</slot>
</div>
`;
}
screenshotOverlay() {
return this._screenshotAreaObj?.enableOverlay ? F`
<div
class="absolute border border-dashed border-red-500"
style="top: ${this._screenshotAreaObj?.y}%; left: ${this._screenshotAreaObj?.x}%; width: ${this._screenshotAreaObj?.width}%; height: ${this._screenshotAreaObj?.height}%"
></div>
` : F``;
}
};
Q([me("video")], $.prototype, "videoEl", void 0), Q([Y({ type: Number })], $.prototype, "width", void 0), Q([Y({ type: Number })], $.prototype, "height", void 0), Q([Y({ type: String })], $.prototype, "facingMode", void 0), Q([Y({ type: Boolean })], $.prototype, "mirrored", void 0), Q([Y({ type: String })], $.prototype, "screenshotArea", void 0), Q([X()], $.prototype, "_isUserMedia", void 0), Q([X()], $.prototype, "_stream", void 0), Q([X()], $.prototype, "_screenshotAreaObj", void 0), Q([X()], $.prototype, "_isMounted", void 0), $ = Q([ue("glair-webcam")], $);
//#endregion
export { $ as Webcam };