pollcatch 1.0.9 → 1.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/package.json +1 -1
- package/pc.js +1028 -1206
package/pc.js
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
* Copyright 2019 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
5
|
*/
|
|
6
|
-
const
|
|
7
|
-
let
|
|
6
|
+
const dt = globalThis, Et = dt.ShadowRoot && (dt.ShadyCSS === void 0 || dt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Ct = Symbol(), It = /* @__PURE__ */ new WeakMap();
|
|
7
|
+
let ae = class {
|
|
8
8
|
constructor(t, s, i) {
|
|
9
|
-
if (this._$cssResult$ = !0, i !==
|
|
9
|
+
if (this._$cssResult$ = !0, i !== Ct) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
|
|
10
10
|
this.cssText = t, this.t = s;
|
|
11
11
|
}
|
|
12
12
|
get styleSheet() {
|
|
@@ -14,7 +14,7 @@ let de = class {
|
|
|
14
14
|
const s = this.t;
|
|
15
15
|
if (Et && t === void 0) {
|
|
16
16
|
const i = s !== void 0 && s.length === 1;
|
|
17
|
-
i && (t =
|
|
17
|
+
i && (t = It.get(s)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && It.set(s, t));
|
|
18
18
|
}
|
|
19
19
|
return t;
|
|
20
20
|
}
|
|
@@ -22,33 +22,33 @@ let de = class {
|
|
|
22
22
|
return this.cssText;
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
|
-
const
|
|
26
|
-
const s = e.length === 1 ? e[0] : t.reduce((i, o, r) => i + ((
|
|
27
|
-
if (
|
|
28
|
-
if (typeof
|
|
29
|
-
throw Error("Value passed to 'css' function must be a 'css' function result: " +
|
|
25
|
+
const _e = (e) => new ae(typeof e == "string" ? e : e + "", void 0, Ct), H = (e, ...t) => {
|
|
26
|
+
const s = e.length === 1 ? e[0] : t.reduce((i, o, r) => i + ((n) => {
|
|
27
|
+
if (n._$cssResult$ === !0) return n.cssText;
|
|
28
|
+
if (typeof n == "number") return n;
|
|
29
|
+
throw Error("Value passed to 'css' function must be a 'css' function result: " + n + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
|
|
30
30
|
})(o) + e[r + 1], e[0]);
|
|
31
|
-
return new
|
|
32
|
-
},
|
|
31
|
+
return new ae(s, e, Ct);
|
|
32
|
+
}, Te = (e, t) => {
|
|
33
33
|
if (Et) e.adoptedStyleSheets = t.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
|
|
34
34
|
else for (const s of t) {
|
|
35
|
-
const i = document.createElement("style"), o =
|
|
35
|
+
const i = document.createElement("style"), o = dt.litNonce;
|
|
36
36
|
o !== void 0 && i.setAttribute("nonce", o), i.textContent = s.cssText, e.appendChild(i);
|
|
37
37
|
}
|
|
38
|
-
},
|
|
38
|
+
}, Ut = Et ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((t) => {
|
|
39
39
|
let s = "";
|
|
40
40
|
for (const i of t.cssRules) s += i.cssText;
|
|
41
|
-
return
|
|
41
|
+
return _e(s);
|
|
42
42
|
})(e) : e;
|
|
43
43
|
/**
|
|
44
44
|
* @license
|
|
45
45
|
* Copyright 2017 Google LLC
|
|
46
46
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
47
47
|
*/
|
|
48
|
-
const { is:
|
|
48
|
+
const { is: Pe, defineProperty: Oe, getOwnPropertyDescriptor: Me, getOwnPropertyNames: Ne, getOwnPropertySymbols: ze, getPrototypeOf: Re } = Object, j = globalThis, jt = j.trustedTypes, Ie = jt ? jt.emptyScript : "", bt = j.reactiveElementPolyfillSupport, et = (e, t) => e, pt = { toAttribute(e, t) {
|
|
49
49
|
switch (t) {
|
|
50
50
|
case Boolean:
|
|
51
|
-
e = e ?
|
|
51
|
+
e = e ? Ie : null;
|
|
52
52
|
break;
|
|
53
53
|
case Object:
|
|
54
54
|
case Array:
|
|
@@ -73,46 +73,46 @@ const { is: Oe, defineProperty: ze, getOwnPropertyDescriptor: Ne, getOwnProperty
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
return s;
|
|
76
|
-
} },
|
|
77
|
-
Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")),
|
|
78
|
-
let
|
|
76
|
+
} }, At = (e, t) => !Pe(e, t), Lt = { attribute: !0, type: String, converter: pt, reflect: !1, hasChanged: At };
|
|
77
|
+
Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), j.litPropertyMetadata ?? (j.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
|
|
78
|
+
let Z = class extends HTMLElement {
|
|
79
79
|
static addInitializer(t) {
|
|
80
80
|
this._$Ei(), (this.l ?? (this.l = [])).push(t);
|
|
81
81
|
}
|
|
82
82
|
static get observedAttributes() {
|
|
83
83
|
return this.finalize(), this._$Eh && [...this._$Eh.keys()];
|
|
84
84
|
}
|
|
85
|
-
static createProperty(t, s =
|
|
85
|
+
static createProperty(t, s = Lt) {
|
|
86
86
|
if (s.state && (s.attribute = !1), this._$Ei(), this.elementProperties.set(t, s), !s.noAccessor) {
|
|
87
87
|
const i = Symbol(), o = this.getPropertyDescriptor(t, i, s);
|
|
88
|
-
o !== void 0 &&
|
|
88
|
+
o !== void 0 && Oe(this.prototype, t, o);
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
static getPropertyDescriptor(t, s, i) {
|
|
92
|
-
const { get: o, set: r } =
|
|
92
|
+
const { get: o, set: r } = Me(this.prototype, t) ?? { get() {
|
|
93
93
|
return this[s];
|
|
94
|
-
}, set(
|
|
95
|
-
this[s] =
|
|
94
|
+
}, set(n) {
|
|
95
|
+
this[s] = n;
|
|
96
96
|
} };
|
|
97
97
|
return { get() {
|
|
98
98
|
return o == null ? void 0 : o.call(this);
|
|
99
|
-
}, set(
|
|
100
|
-
const
|
|
101
|
-
r.call(this,
|
|
99
|
+
}, set(n) {
|
|
100
|
+
const a = o == null ? void 0 : o.call(this);
|
|
101
|
+
r.call(this, n), this.requestUpdate(t, a, i);
|
|
102
102
|
}, configurable: !0, enumerable: !0 };
|
|
103
103
|
}
|
|
104
104
|
static getPropertyOptions(t) {
|
|
105
|
-
return this.elementProperties.get(t) ??
|
|
105
|
+
return this.elementProperties.get(t) ?? Lt;
|
|
106
106
|
}
|
|
107
107
|
static _$Ei() {
|
|
108
|
-
if (this.hasOwnProperty(
|
|
109
|
-
const t =
|
|
108
|
+
if (this.hasOwnProperty(et("elementProperties"))) return;
|
|
109
|
+
const t = Re(this);
|
|
110
110
|
t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
|
|
111
111
|
}
|
|
112
112
|
static finalize() {
|
|
113
|
-
if (this.hasOwnProperty(
|
|
114
|
-
if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(
|
|
115
|
-
const s = this.properties, i = [...
|
|
113
|
+
if (this.hasOwnProperty(et("finalized"))) return;
|
|
114
|
+
if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(et("properties"))) {
|
|
115
|
+
const s = this.properties, i = [...Ne(s), ...ze(s)];
|
|
116
116
|
for (const o of i) this.createProperty(o, s[o]);
|
|
117
117
|
}
|
|
118
118
|
const t = this[Symbol.metadata];
|
|
@@ -131,8 +131,8 @@ let J = class extends HTMLElement {
|
|
|
131
131
|
const s = [];
|
|
132
132
|
if (Array.isArray(t)) {
|
|
133
133
|
const i = new Set(t.flat(1 / 0).reverse());
|
|
134
|
-
for (const o of i) s.unshift(
|
|
135
|
-
} else t !== void 0 && s.push(
|
|
134
|
+
for (const o of i) s.unshift(Ut(o));
|
|
135
|
+
} else t !== void 0 && s.push(Ut(t));
|
|
136
136
|
return s;
|
|
137
137
|
}
|
|
138
138
|
static _$Eu(t, s) {
|
|
@@ -161,7 +161,7 @@ let J = class extends HTMLElement {
|
|
|
161
161
|
}
|
|
162
162
|
createRenderRoot() {
|
|
163
163
|
const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
|
|
164
|
-
return
|
|
164
|
+
return Te(t, this.constructor.elementStyles), t;
|
|
165
165
|
}
|
|
166
166
|
connectedCallback() {
|
|
167
167
|
var t;
|
|
@@ -186,21 +186,21 @@ let J = class extends HTMLElement {
|
|
|
186
186
|
var r;
|
|
187
187
|
const i = this.constructor.elementProperties.get(t), o = this.constructor._$Eu(t, i);
|
|
188
188
|
if (o !== void 0 && i.reflect === !0) {
|
|
189
|
-
const
|
|
190
|
-
this._$Em = t,
|
|
189
|
+
const n = (((r = i.converter) == null ? void 0 : r.toAttribute) !== void 0 ? i.converter : pt).toAttribute(s, i.type);
|
|
190
|
+
this._$Em = t, n == null ? this.removeAttribute(o) : this.setAttribute(o, n), this._$Em = null;
|
|
191
191
|
}
|
|
192
192
|
}
|
|
193
193
|
_$AK(t, s) {
|
|
194
194
|
var r;
|
|
195
195
|
const i = this.constructor, o = i._$Eh.get(t);
|
|
196
196
|
if (o !== void 0 && this._$Em !== o) {
|
|
197
|
-
const
|
|
198
|
-
this._$Em = o, this[o] =
|
|
197
|
+
const n = i.getPropertyOptions(o), a = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((r = n.converter) == null ? void 0 : r.fromAttribute) !== void 0 ? n.converter : pt;
|
|
198
|
+
this._$Em = o, this[o] = a.fromAttribute(s, n.type), this._$Em = null;
|
|
199
199
|
}
|
|
200
200
|
}
|
|
201
201
|
requestUpdate(t, s, i) {
|
|
202
202
|
if (t !== void 0) {
|
|
203
|
-
if (i ?? (i = this.constructor.getPropertyOptions(t)), !(i.hasChanged ??
|
|
203
|
+
if (i ?? (i = this.constructor.getPropertyOptions(t)), !(i.hasChanged ?? At)(this[t], s)) return;
|
|
204
204
|
this.P(t, s, i);
|
|
205
205
|
}
|
|
206
206
|
this.isUpdatePending === !1 && (this._$ES = this._$ET());
|
|
@@ -226,11 +226,11 @@ let J = class extends HTMLElement {
|
|
|
226
226
|
if (!this.isUpdatePending) return;
|
|
227
227
|
if (!this.hasUpdated) {
|
|
228
228
|
if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
|
|
229
|
-
for (const [r,
|
|
229
|
+
for (const [r, n] of this._$Ep) this[r] = n;
|
|
230
230
|
this._$Ep = void 0;
|
|
231
231
|
}
|
|
232
232
|
const o = this.constructor.elementProperties;
|
|
233
|
-
if (o.size > 0) for (const [r,
|
|
233
|
+
if (o.size > 0) for (const [r, n] of o) n.wrapped !== !0 || this._$AL.has(r) || this[r] === void 0 || this.P(r, this[r], n);
|
|
234
234
|
}
|
|
235
235
|
let t = !1;
|
|
236
236
|
const s = this._$AL;
|
|
@@ -273,76 +273,76 @@ let J = class extends HTMLElement {
|
|
|
273
273
|
firstUpdated(t) {
|
|
274
274
|
}
|
|
275
275
|
};
|
|
276
|
-
|
|
276
|
+
Z.elementStyles = [], Z.shadowRootOptions = { mode: "open" }, Z[et("elementProperties")] = /* @__PURE__ */ new Map(), Z[et("finalized")] = /* @__PURE__ */ new Map(), bt == null || bt({ ReactiveElement: Z }), (j.reactiveElementVersions ?? (j.reactiveElementVersions = [])).push("2.0.4");
|
|
277
277
|
/**
|
|
278
278
|
* @license
|
|
279
279
|
* Copyright 2017 Google LLC
|
|
280
280
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
281
281
|
*/
|
|
282
|
-
const
|
|
283
|
-
\f\r]`,
|
|
284
|
-
\f\r"'\`<>=]|("|')|))|$)`, "g"),
|
|
285
|
-
function
|
|
286
|
-
if (!
|
|
287
|
-
return
|
|
282
|
+
const st = globalThis, ht = st.trustedTypes, Dt = ht ? ht.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, le = "$lit$", U = `lit$${Math.random().toFixed(9).slice(2)}$`, ce = "?" + U, Ue = `<${ce}>`, K = document, ot = () => K.createComment(""), rt = (e) => e === null || typeof e != "object" && typeof e != "function", _t = Array.isArray, je = (e) => _t(e) || typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", ft = `[
|
|
283
|
+
\f\r]`, tt = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Vt = /-->/g, Ht = />/g, q = RegExp(`>|${ft}(?:([^\\s"'>=/]+)(${ft}*=${ft}*(?:[^
|
|
284
|
+
\f\r"'\`<>=]|("|')|))|$)`, "g"), Bt = /'/g, qt = /"/g, de = /^(?:script|style|textarea|title)$/i, Le = (e) => (t, ...s) => ({ _$litType$: e, strings: t, values: s }), c = Le(1), D = Symbol.for("lit-noChange"), h = Symbol.for("lit-nothing"), Ft = /* @__PURE__ */ new WeakMap(), F = K.createTreeWalker(K, 129);
|
|
285
|
+
function pe(e, t) {
|
|
286
|
+
if (!_t(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
|
|
287
|
+
return Dt !== void 0 ? Dt.createHTML(t) : t;
|
|
288
288
|
}
|
|
289
|
-
const
|
|
289
|
+
const De = (e, t) => {
|
|
290
290
|
const s = e.length - 1, i = [];
|
|
291
|
-
let o, r = t === 2 ? "<svg>" : t === 3 ? "<math>" : "",
|
|
292
|
-
for (let
|
|
293
|
-
const
|
|
294
|
-
let
|
|
295
|
-
for (;
|
|
296
|
-
const
|
|
297
|
-
r +=
|
|
298
|
-
}
|
|
299
|
-
return [
|
|
291
|
+
let o, r = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", n = tt;
|
|
292
|
+
for (let a = 0; a < s; a++) {
|
|
293
|
+
const l = e[a];
|
|
294
|
+
let p, u, b = -1, w = 0;
|
|
295
|
+
for (; w < l.length && (n.lastIndex = w, u = n.exec(l), u !== null); ) w = n.lastIndex, n === tt ? u[1] === "!--" ? n = Vt : u[1] !== void 0 ? n = Ht : u[2] !== void 0 ? (de.test(u[2]) && (o = RegExp("</" + u[2], "g")), n = q) : u[3] !== void 0 && (n = q) : n === q ? u[0] === ">" ? (n = o ?? tt, b = -1) : u[1] === void 0 ? b = -2 : (b = n.lastIndex - u[2].length, p = u[1], n = u[3] === void 0 ? q : u[3] === '"' ? qt : Bt) : n === qt || n === Bt ? n = q : n === Vt || n === Ht ? n = tt : (n = q, o = void 0);
|
|
296
|
+
const I = n === q && e[a + 1].startsWith("/>") ? " " : "";
|
|
297
|
+
r += n === tt ? l + Ue : b >= 0 ? (i.push(p), l.slice(0, b) + le + l.slice(b) + U + I) : l + U + (b === -2 ? a : I);
|
|
298
|
+
}
|
|
299
|
+
return [pe(e, r + (e[s] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), i];
|
|
300
300
|
};
|
|
301
|
-
let
|
|
301
|
+
let St = class he {
|
|
302
302
|
constructor({ strings: t, _$litType$: s }, i) {
|
|
303
303
|
let o;
|
|
304
304
|
this.parts = [];
|
|
305
|
-
let r = 0,
|
|
306
|
-
const
|
|
307
|
-
if (this.el =
|
|
305
|
+
let r = 0, n = 0;
|
|
306
|
+
const a = t.length - 1, l = this.parts, [p, u] = De(t, s);
|
|
307
|
+
if (this.el = he.createElement(p, i), F.currentNode = this.el.content, s === 2 || s === 3) {
|
|
308
308
|
const b = this.el.content.firstChild;
|
|
309
309
|
b.replaceWith(...b.childNodes);
|
|
310
310
|
}
|
|
311
|
-
for (; (o =
|
|
311
|
+
for (; (o = F.nextNode()) !== null && l.length < a; ) {
|
|
312
312
|
if (o.nodeType === 1) {
|
|
313
|
-
if (o.hasAttributes()) for (const b of o.getAttributeNames()) if (b.endsWith(
|
|
314
|
-
const
|
|
315
|
-
|
|
316
|
-
} else b.startsWith(
|
|
317
|
-
if (
|
|
318
|
-
const b = o.textContent.split(
|
|
319
|
-
if (
|
|
320
|
-
o.textContent =
|
|
321
|
-
for (let
|
|
322
|
-
o.append(b[
|
|
313
|
+
if (o.hasAttributes()) for (const b of o.getAttributeNames()) if (b.endsWith(le)) {
|
|
314
|
+
const w = u[n++], I = o.getAttribute(b).split(U), lt = /([.?@])?(.*)/.exec(w);
|
|
315
|
+
l.push({ type: 1, index: r, name: lt[2], strings: I, ctor: lt[1] === "." ? He : lt[1] === "?" ? Be : lt[1] === "@" ? qe : ut }), o.removeAttribute(b);
|
|
316
|
+
} else b.startsWith(U) && (l.push({ type: 6, index: r }), o.removeAttribute(b));
|
|
317
|
+
if (de.test(o.tagName)) {
|
|
318
|
+
const b = o.textContent.split(U), w = b.length - 1;
|
|
319
|
+
if (w > 0) {
|
|
320
|
+
o.textContent = ht ? ht.emptyScript : "";
|
|
321
|
+
for (let I = 0; I < w; I++) o.append(b[I], ot()), F.nextNode(), l.push({ type: 2, index: ++r });
|
|
322
|
+
o.append(b[w], ot());
|
|
323
323
|
}
|
|
324
324
|
}
|
|
325
|
-
} else if (o.nodeType === 8) if (o.data ===
|
|
325
|
+
} else if (o.nodeType === 8) if (o.data === ce) l.push({ type: 2, index: r });
|
|
326
326
|
else {
|
|
327
327
|
let b = -1;
|
|
328
|
-
for (; (b = o.data.indexOf(
|
|
328
|
+
for (; (b = o.data.indexOf(U, b + 1)) !== -1; ) l.push({ type: 7, index: r }), b += U.length - 1;
|
|
329
329
|
}
|
|
330
330
|
r++;
|
|
331
331
|
}
|
|
332
332
|
}
|
|
333
333
|
static createElement(t, s) {
|
|
334
|
-
const i =
|
|
334
|
+
const i = K.createElement("template");
|
|
335
335
|
return i.innerHTML = t, i;
|
|
336
336
|
}
|
|
337
337
|
};
|
|
338
|
-
function
|
|
339
|
-
var
|
|
340
|
-
if (t ===
|
|
341
|
-
let o = i !== void 0 ? (
|
|
342
|
-
const r =
|
|
343
|
-
return (o == null ? void 0 : o.constructor) !== r && ((
|
|
338
|
+
function W(e, t, s = e, i) {
|
|
339
|
+
var n, a;
|
|
340
|
+
if (t === D) return t;
|
|
341
|
+
let o = i !== void 0 ? (n = s._$Co) == null ? void 0 : n[i] : s._$Cl;
|
|
342
|
+
const r = rt(t) ? void 0 : t._$litDirective$;
|
|
343
|
+
return (o == null ? void 0 : o.constructor) !== r && ((a = o == null ? void 0 : o._$AO) == null || a.call(o, !1), r === void 0 ? o = void 0 : (o = new r(e), o._$AT(e, s, i)), i !== void 0 ? (s._$Co ?? (s._$Co = []))[i] = o : s._$Cl = o), o !== void 0 && (t = W(e, o._$AS(e, t.values), o, i)), t;
|
|
344
344
|
}
|
|
345
|
-
let
|
|
345
|
+
let Ve = class {
|
|
346
346
|
constructor(t, s) {
|
|
347
347
|
this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = s;
|
|
348
348
|
}
|
|
@@ -353,17 +353,17 @@ let Be = class {
|
|
|
353
353
|
return this._$AM._$AU;
|
|
354
354
|
}
|
|
355
355
|
u(t) {
|
|
356
|
-
const { el: { content: s }, parts: i } = this._$AD, o = ((t == null ? void 0 : t.creationScope) ??
|
|
357
|
-
|
|
358
|
-
let r =
|
|
359
|
-
for (;
|
|
360
|
-
if (
|
|
361
|
-
let
|
|
362
|
-
|
|
356
|
+
const { el: { content: s }, parts: i } = this._$AD, o = ((t == null ? void 0 : t.creationScope) ?? K).importNode(s, !0);
|
|
357
|
+
F.currentNode = o;
|
|
358
|
+
let r = F.nextNode(), n = 0, a = 0, l = i[0];
|
|
359
|
+
for (; l !== void 0; ) {
|
|
360
|
+
if (n === l.index) {
|
|
361
|
+
let p;
|
|
362
|
+
l.type === 2 ? p = new nt(r, r.nextSibling, this, t) : l.type === 1 ? p = new l.ctor(r, l.name, l.strings, this, t) : l.type === 6 && (p = new Fe(r, this, t)), this._$AV.push(p), l = i[++a];
|
|
363
363
|
}
|
|
364
|
-
|
|
364
|
+
n !== (l == null ? void 0 : l.index) && (r = F.nextNode(), n++);
|
|
365
365
|
}
|
|
366
|
-
return
|
|
366
|
+
return F.currentNode = K, o;
|
|
367
367
|
}
|
|
368
368
|
p(t) {
|
|
369
369
|
let s = 0;
|
|
@@ -376,7 +376,7 @@ class nt {
|
|
|
376
376
|
return ((t = this._$AM) == null ? void 0 : t._$AU) ?? this._$Cv;
|
|
377
377
|
}
|
|
378
378
|
constructor(t, s, i, o) {
|
|
379
|
-
this.type = 2, this._$AH =
|
|
379
|
+
this.type = 2, this._$AH = h, this._$AN = void 0, this._$AA = t, this._$AB = s, this._$AM = i, this.options = o, this._$Cv = (o == null ? void 0 : o.isConnected) ?? !0;
|
|
380
380
|
}
|
|
381
381
|
get parentNode() {
|
|
382
382
|
let t = this._$AA.parentNode;
|
|
@@ -390,7 +390,7 @@ class nt {
|
|
|
390
390
|
return this._$AB;
|
|
391
391
|
}
|
|
392
392
|
_$AI(t, s = this) {
|
|
393
|
-
t =
|
|
393
|
+
t = W(this, t, s), rt(t) ? t === h || t == null || t === "" ? (this._$AH !== h && this._$AR(), this._$AH = h) : t !== this._$AH && t !== D && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : je(t) ? this.k(t) : this._(t);
|
|
394
394
|
}
|
|
395
395
|
O(t) {
|
|
396
396
|
return this._$AA.parentNode.insertBefore(t, this._$AB);
|
|
@@ -399,26 +399,26 @@ class nt {
|
|
|
399
399
|
this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
|
|
400
400
|
}
|
|
401
401
|
_(t) {
|
|
402
|
-
this._$AH !==
|
|
402
|
+
this._$AH !== h && rt(this._$AH) ? this._$AA.nextSibling.data = t : this.T(K.createTextNode(t)), this._$AH = t;
|
|
403
403
|
}
|
|
404
404
|
$(t) {
|
|
405
405
|
var r;
|
|
406
|
-
const { values: s, _$litType$: i } = t, o = typeof i == "number" ? this._$AC(t) : (i.el === void 0 && (i.el =
|
|
406
|
+
const { values: s, _$litType$: i } = t, o = typeof i == "number" ? this._$AC(t) : (i.el === void 0 && (i.el = St.createElement(pe(i.h, i.h[0]), this.options)), i);
|
|
407
407
|
if (((r = this._$AH) == null ? void 0 : r._$AD) === o) this._$AH.p(s);
|
|
408
408
|
else {
|
|
409
|
-
const
|
|
410
|
-
|
|
409
|
+
const n = new Ve(o, this), a = n.u(this.options);
|
|
410
|
+
n.p(s), this.T(a), this._$AH = n;
|
|
411
411
|
}
|
|
412
412
|
}
|
|
413
413
|
_$AC(t) {
|
|
414
|
-
let s =
|
|
415
|
-
return s === void 0 &&
|
|
414
|
+
let s = Ft.get(t.strings);
|
|
415
|
+
return s === void 0 && Ft.set(t.strings, s = new St(t)), s;
|
|
416
416
|
}
|
|
417
417
|
k(t) {
|
|
418
|
-
|
|
418
|
+
_t(this._$AH) || (this._$AH = [], this._$AR());
|
|
419
419
|
const s = this._$AH;
|
|
420
420
|
let i, o = 0;
|
|
421
|
-
for (const r of t) o === s.length ? s.push(i = new nt(this.O(
|
|
421
|
+
for (const r of t) o === s.length ? s.push(i = new nt(this.O(ot()), this.O(ot()), this, this.options)) : i = s[o], i._$AI(r), o++;
|
|
422
422
|
o < s.length && (this._$AR(i && i._$AB.nextSibling, o), s.length = o);
|
|
423
423
|
}
|
|
424
424
|
_$AR(t = this._$AA.nextSibling, s) {
|
|
@@ -433,7 +433,7 @@ class nt {
|
|
|
433
433
|
this._$AM === void 0 && (this._$Cv = t, (s = this._$AP) == null || s.call(this, t));
|
|
434
434
|
}
|
|
435
435
|
}
|
|
436
|
-
class
|
|
436
|
+
class ut {
|
|
437
437
|
get tagName() {
|
|
438
438
|
return this.element.tagName;
|
|
439
439
|
}
|
|
@@ -441,46 +441,46 @@ class mt {
|
|
|
441
441
|
return this._$AM._$AU;
|
|
442
442
|
}
|
|
443
443
|
constructor(t, s, i, o, r) {
|
|
444
|
-
this.type = 1, this._$AH =
|
|
444
|
+
this.type = 1, this._$AH = h, this._$AN = void 0, this.element = t, this.name = s, this._$AM = o, this.options = r, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = h;
|
|
445
445
|
}
|
|
446
446
|
_$AI(t, s = this, i, o) {
|
|
447
447
|
const r = this.strings;
|
|
448
|
-
let
|
|
449
|
-
if (r === void 0) t =
|
|
448
|
+
let n = !1;
|
|
449
|
+
if (r === void 0) t = W(this, t, s, 0), n = !rt(t) || t !== this._$AH && t !== D, n && (this._$AH = t);
|
|
450
450
|
else {
|
|
451
|
-
const
|
|
452
|
-
let
|
|
453
|
-
for (t = r[0],
|
|
451
|
+
const a = t;
|
|
452
|
+
let l, p;
|
|
453
|
+
for (t = r[0], l = 0; l < r.length - 1; l++) p = W(this, a[i + l], s, l), p === D && (p = this._$AH[l]), n || (n = !rt(p) || p !== this._$AH[l]), p === h ? t = h : t !== h && (t += (p ?? "") + r[l + 1]), this._$AH[l] = p;
|
|
454
454
|
}
|
|
455
|
-
|
|
455
|
+
n && !o && this.j(t);
|
|
456
456
|
}
|
|
457
457
|
j(t) {
|
|
458
|
-
t ===
|
|
458
|
+
t === h ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
|
|
459
459
|
}
|
|
460
460
|
}
|
|
461
|
-
let
|
|
461
|
+
let He = class extends ut {
|
|
462
462
|
constructor() {
|
|
463
463
|
super(...arguments), this.type = 3;
|
|
464
464
|
}
|
|
465
465
|
j(t) {
|
|
466
|
-
this.element[this.name] = t ===
|
|
466
|
+
this.element[this.name] = t === h ? void 0 : t;
|
|
467
467
|
}
|
|
468
468
|
};
|
|
469
|
-
class
|
|
469
|
+
class Be extends ut {
|
|
470
470
|
constructor() {
|
|
471
471
|
super(...arguments), this.type = 4;
|
|
472
472
|
}
|
|
473
473
|
j(t) {
|
|
474
|
-
this.element.toggleAttribute(this.name, !!t && t !==
|
|
474
|
+
this.element.toggleAttribute(this.name, !!t && t !== h);
|
|
475
475
|
}
|
|
476
476
|
}
|
|
477
|
-
class
|
|
477
|
+
class qe extends ut {
|
|
478
478
|
constructor(t, s, i, o, r) {
|
|
479
479
|
super(t, s, i, o, r), this.type = 5;
|
|
480
480
|
}
|
|
481
481
|
_$AI(t, s = this) {
|
|
482
|
-
if ((t =
|
|
483
|
-
const i = this._$AH, o = t ===
|
|
482
|
+
if ((t = W(this, t, s, 0) ?? h) === D) return;
|
|
483
|
+
const i = this._$AH, o = t === h && i !== h || t.capture !== i.capture || t.once !== i.once || t.passive !== i.passive, r = t !== h && (i === h || o);
|
|
484
484
|
o && this.element.removeEventListener(this.name, this, i), r && this.element.addEventListener(this.name, this, t), this._$AH = t;
|
|
485
485
|
}
|
|
486
486
|
handleEvent(t) {
|
|
@@ -488,7 +488,7 @@ class Ke extends mt {
|
|
|
488
488
|
typeof this._$AH == "function" ? this._$AH.call(((s = this.options) == null ? void 0 : s.host) ?? this.element, t) : this._$AH.handleEvent(t);
|
|
489
489
|
}
|
|
490
490
|
}
|
|
491
|
-
class
|
|
491
|
+
class Fe {
|
|
492
492
|
constructor(t, s, i) {
|
|
493
493
|
this.element = t, this.type = 6, this._$AN = void 0, this._$AM = s, this.options = i;
|
|
494
494
|
}
|
|
@@ -496,17 +496,17 @@ class Ye {
|
|
|
496
496
|
return this._$AM._$AU;
|
|
497
497
|
}
|
|
498
498
|
_$AI(t) {
|
|
499
|
-
|
|
499
|
+
W(this, t);
|
|
500
500
|
}
|
|
501
501
|
}
|
|
502
|
-
const
|
|
503
|
-
|
|
504
|
-
const
|
|
502
|
+
const gt = st.litHtmlPolyfillSupport;
|
|
503
|
+
gt == null || gt(St, nt), (st.litHtmlVersions ?? (st.litHtmlVersions = [])).push("3.2.1");
|
|
504
|
+
const Ye = (e, t, s) => {
|
|
505
505
|
const i = (s == null ? void 0 : s.renderBefore) ?? t;
|
|
506
506
|
let o = i._$litPart$;
|
|
507
507
|
if (o === void 0) {
|
|
508
508
|
const r = (s == null ? void 0 : s.renderBefore) ?? null;
|
|
509
|
-
i._$litPart$ = o = new nt(t.insertBefore(
|
|
509
|
+
i._$litPart$ = o = new nt(t.insertBefore(ot(), r), r, void 0, s ?? {});
|
|
510
510
|
}
|
|
511
511
|
return o._$AI(e), o;
|
|
512
512
|
};
|
|
@@ -515,7 +515,7 @@ const Ge = (e, t, s) => {
|
|
|
515
515
|
* Copyright 2017 Google LLC
|
|
516
516
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
517
517
|
*/
|
|
518
|
-
let
|
|
518
|
+
let L = class extends Z {
|
|
519
519
|
constructor() {
|
|
520
520
|
super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
|
|
521
521
|
}
|
|
@@ -526,7 +526,7 @@ let V = class extends J {
|
|
|
526
526
|
}
|
|
527
527
|
update(t) {
|
|
528
528
|
const s = this.render();
|
|
529
|
-
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do =
|
|
529
|
+
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = Ye(s, this.renderRoot, this.renderOptions);
|
|
530
530
|
}
|
|
531
531
|
connectedCallback() {
|
|
532
532
|
var t;
|
|
@@ -537,20 +537,20 @@ let V = class extends J {
|
|
|
537
537
|
super.disconnectedCallback(), (t = this._$Do) == null || t.setConnected(!1);
|
|
538
538
|
}
|
|
539
539
|
render() {
|
|
540
|
-
return
|
|
540
|
+
return D;
|
|
541
541
|
}
|
|
542
542
|
};
|
|
543
|
-
var
|
|
544
|
-
|
|
545
|
-
const
|
|
546
|
-
|
|
543
|
+
var ne;
|
|
544
|
+
L._$litElement$ = !0, L.finalized = !0, (ne = globalThis.litElementHydrateSupport) == null || ne.call(globalThis, { LitElement: L });
|
|
545
|
+
const yt = globalThis.litElementPolyfillSupport;
|
|
546
|
+
yt == null || yt({ LitElement: L });
|
|
547
547
|
(globalThis.litElementVersions ?? (globalThis.litElementVersions = [])).push("4.1.1");
|
|
548
548
|
/**
|
|
549
549
|
* @license
|
|
550
550
|
* Copyright 2017 Google LLC
|
|
551
551
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
552
552
|
*/
|
|
553
|
-
const
|
|
553
|
+
const B = (e) => (t, s) => {
|
|
554
554
|
s !== void 0 ? s.addInitializer(() => {
|
|
555
555
|
customElements.define(e, t);
|
|
556
556
|
}) : customElements.define(e, t);
|
|
@@ -560,31 +560,31 @@ const q = (e) => (t, s) => {
|
|
|
560
560
|
* Copyright 2017 Google LLC
|
|
561
561
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
562
562
|
*/
|
|
563
|
-
const
|
|
563
|
+
const Ke = { attribute: !0, type: String, converter: pt, reflect: !1, hasChanged: At }, Ge = (e = Ke, t, s) => {
|
|
564
564
|
const { kind: i, metadata: o } = s;
|
|
565
565
|
let r = globalThis.litPropertyMetadata.get(o);
|
|
566
566
|
if (r === void 0 && globalThis.litPropertyMetadata.set(o, r = /* @__PURE__ */ new Map()), r.set(s.name, e), i === "accessor") {
|
|
567
|
-
const { name:
|
|
568
|
-
return { set(
|
|
569
|
-
const
|
|
570
|
-
t.set.call(this,
|
|
571
|
-
}, init(
|
|
572
|
-
return
|
|
567
|
+
const { name: n } = s;
|
|
568
|
+
return { set(a) {
|
|
569
|
+
const l = t.get.call(this);
|
|
570
|
+
t.set.call(this, a), this.requestUpdate(n, l, e);
|
|
571
|
+
}, init(a) {
|
|
572
|
+
return a !== void 0 && this.P(n, void 0, e), a;
|
|
573
573
|
} };
|
|
574
574
|
}
|
|
575
575
|
if (i === "setter") {
|
|
576
|
-
const { name:
|
|
577
|
-
return function(
|
|
578
|
-
const
|
|
579
|
-
t.call(this,
|
|
576
|
+
const { name: n } = s;
|
|
577
|
+
return function(a) {
|
|
578
|
+
const l = this[n];
|
|
579
|
+
t.call(this, a), this.requestUpdate(n, l, e);
|
|
580
580
|
};
|
|
581
581
|
}
|
|
582
582
|
throw Error("Unsupported decorator location: " + i);
|
|
583
583
|
};
|
|
584
|
-
function
|
|
585
|
-
return (t, s) => typeof s == "object" ?
|
|
586
|
-
const
|
|
587
|
-
return o.constructor.createProperty(r,
|
|
584
|
+
function d(e) {
|
|
585
|
+
return (t, s) => typeof s == "object" ? Ge(e, t, s) : ((i, o, r) => {
|
|
586
|
+
const n = o.hasOwnProperty(r);
|
|
587
|
+
return o.constructor.createProperty(r, n ? { ...i, wrapped: !0 } : i), n ? Object.getOwnPropertyDescriptor(o, r) : void 0;
|
|
588
588
|
})(e, t, s);
|
|
589
589
|
}
|
|
590
590
|
/**
|
|
@@ -592,10 +592,10 @@ function p(e) {
|
|
|
592
592
|
* Copyright 2017 Google LLC
|
|
593
593
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
594
594
|
*/
|
|
595
|
-
function
|
|
596
|
-
return
|
|
595
|
+
function x(e) {
|
|
596
|
+
return d({ ...e, state: !0, attribute: !1 });
|
|
597
597
|
}
|
|
598
|
-
const Je =
|
|
598
|
+
const ue = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='5'%20viewBox='0%200%2020%205'%20fill='currentColor'%3e%3ccircle%20cx='3'%20cy='2.5'%20r='1.5'%20opacity='0.3'%3e%3canimate%20attributeName='opacity'%20begin='0s'%20dur='1s'%20values='0.3;0.8;0.3'%20repeatCount='indefinite'/%3e%3c/circle%3e%3ccircle%20cx='10'%20cy='2.5'%20r='1.5'%20opacity='0.3'%3e%3canimate%20attributeName='opacity'%20begin='0.2s'%20dur='1s'%20values='0.3;0.8;0.3'%20repeatCount='indefinite'/%3e%3c/circle%3e%3ccircle%20cx='17'%20cy='2.5'%20r='1.5'%20opacity='0.3'%3e%3canimate%20attributeName='opacity'%20begin='0.4s'%20dur='1s'%20values='0.3;0.8;0.3'%20repeatCount='indefinite'/%3e%3c/circle%3e%3c/svg%3e", Ze = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23434343'%3e%3cpath%20d='M640-160v-280h160v280H640Zm-240%200v-640h160v640H400Zm-240%200v-440h160v440H160Z'/%3e%3c/svg%3e", We = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23434343'%3e%3cpath%20d='M160-160v-440h160v440H160Zm240%200v-400l160%20160v240H400Zm160-354L400-674v-126h160v286Zm240%20240L640-434v-6h160v166Zm-9%20219L55-791l57-57%20736%20736-57%2057Z'/%3e%3c/svg%3e", Je = H`
|
|
599
599
|
:host {
|
|
600
600
|
/* Base CSS variables */
|
|
601
601
|
--pc-primary-color: #2196f3;
|
|
@@ -960,7 +960,7 @@ const Je = B`
|
|
|
960
960
|
opacity: 1;
|
|
961
961
|
}
|
|
962
962
|
}
|
|
963
|
-
`,
|
|
963
|
+
`, me = "https://jpxwfjorwcsrqraorpbj.supabase.co/functions/v1/data", Xe = "pc_session_id", Qe = 24 * 60 * 60 * 1e3;
|
|
964
964
|
function ts(e) {
|
|
965
965
|
return {
|
|
966
966
|
debug: (t, ...s) => {
|
|
@@ -974,104 +974,104 @@ function ts(e) {
|
|
|
974
974
|
}
|
|
975
975
|
};
|
|
976
976
|
}
|
|
977
|
-
const
|
|
978
|
-
function
|
|
979
|
-
return typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : (
|
|
977
|
+
const f = ts("Pollcatch");
|
|
978
|
+
function Yt() {
|
|
979
|
+
return typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : (f.warn("crypto.randomUUID not available, using fallback UUID generator"), "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
|
|
980
980
|
const t = Math.random() * 16 | 0;
|
|
981
981
|
return (e === "x" ? t : t & 3 | 8).toString(16);
|
|
982
982
|
}));
|
|
983
983
|
}
|
|
984
|
-
function
|
|
984
|
+
function Tt() {
|
|
985
985
|
const e = "test-local-storage";
|
|
986
986
|
try {
|
|
987
987
|
return localStorage.setItem(e, e), localStorage.removeItem(e), !0;
|
|
988
988
|
} catch {
|
|
989
|
-
return
|
|
989
|
+
return f.warn("localStorage not available, session ID will not persist"), !1;
|
|
990
990
|
}
|
|
991
991
|
}
|
|
992
|
-
function
|
|
992
|
+
function be(e) {
|
|
993
993
|
try {
|
|
994
994
|
const t = localStorage.getItem(e);
|
|
995
995
|
return t ? JSON.parse(t) : void 0;
|
|
996
996
|
} catch (t) {
|
|
997
|
-
|
|
997
|
+
f.warn(`Failed to get item from localStorage: ${e}`, t);
|
|
998
998
|
return;
|
|
999
999
|
}
|
|
1000
1000
|
}
|
|
1001
|
-
function
|
|
1001
|
+
function fe(e, t) {
|
|
1002
1002
|
try {
|
|
1003
1003
|
return localStorage.setItem(e, JSON.stringify(t)), !0;
|
|
1004
1004
|
} catch (s) {
|
|
1005
|
-
return
|
|
1005
|
+
return f.warn(`Failed to set item in localStorage: ${e}`, s), !1;
|
|
1006
1006
|
}
|
|
1007
1007
|
}
|
|
1008
1008
|
async function es() {
|
|
1009
1009
|
if (typeof window < "u") {
|
|
1010
1010
|
if (window.pcProject !== void 0)
|
|
1011
|
-
return
|
|
1011
|
+
return f.debug("Found project key in global variable"), window.pcProject;
|
|
1012
1012
|
const e = document.querySelectorAll("script[pc-project]");
|
|
1013
1013
|
if (e.length > 0) {
|
|
1014
1014
|
const t = e[e.length - 1], s = t == null ? void 0 : t.getAttribute("pc-project");
|
|
1015
1015
|
if (s)
|
|
1016
|
-
return
|
|
1016
|
+
return f.debug("Found project key in script tag attribute"), s;
|
|
1017
1017
|
}
|
|
1018
1018
|
}
|
|
1019
|
-
|
|
1019
|
+
f.warn("No project key found in global variable or script tags");
|
|
1020
1020
|
}
|
|
1021
|
-
async function
|
|
1021
|
+
async function Kt() {
|
|
1022
1022
|
const e = Xe, t = Qe;
|
|
1023
|
-
if (
|
|
1024
|
-
const s =
|
|
1023
|
+
if (Tt()) {
|
|
1024
|
+
const s = be(e);
|
|
1025
1025
|
if (s && s.id && s.timestamp && Date.now() - s.timestamp < t)
|
|
1026
|
-
return
|
|
1027
|
-
|
|
1026
|
+
return f.debug("Using existing session ID from localStorage"), s.id;
|
|
1027
|
+
f.debug(
|
|
1028
1028
|
s ? "Session ID expired" : "No session ID found",
|
|
1029
1029
|
"generating new one"
|
|
1030
1030
|
);
|
|
1031
|
-
const i =
|
|
1032
|
-
return
|
|
1031
|
+
const i = Yt();
|
|
1032
|
+
return fe(e, {
|
|
1033
1033
|
id: i,
|
|
1034
1034
|
timestamp: Date.now()
|
|
1035
|
-
}) ?
|
|
1035
|
+
}) ? f.debug("Generated and stored new session ID") : f.warn("Generated session ID but failed to store it"), i;
|
|
1036
1036
|
} else {
|
|
1037
|
-
const s =
|
|
1038
|
-
return
|
|
1037
|
+
const s = Yt();
|
|
1038
|
+
return f.debug("Generated non-persistent session ID"), s;
|
|
1039
1039
|
}
|
|
1040
1040
|
}
|
|
1041
1041
|
async function ss(e, t) {
|
|
1042
1042
|
try {
|
|
1043
1043
|
if (!e)
|
|
1044
1044
|
throw new Error("Name parameter is required");
|
|
1045
|
-
const s = `${
|
|
1046
|
-
|
|
1045
|
+
const s = `${me}/${encodeURIComponent(t)}/${encodeURIComponent(e)}`;
|
|
1046
|
+
f.debug(`Fetching stats for: ${e}`, { projectKey: t });
|
|
1047
1047
|
const i = await fetch(s);
|
|
1048
1048
|
if (!i.ok)
|
|
1049
1049
|
throw new Error(`API request failed with status: ${i.status}`);
|
|
1050
1050
|
const o = await i.json();
|
|
1051
1051
|
if (!o.success)
|
|
1052
|
-
throw
|
|
1053
|
-
const r = o.data || {},
|
|
1052
|
+
throw f.error("Backend returned unsuccessful response", o), new Error("Backend returned unsuccessful response");
|
|
1053
|
+
const r = o.data || {}, n = r.count > 0 ? Math.round(r.sum / r.count) : 0, a = Math.round(r.sum / r.count * 100);
|
|
1054
1054
|
return {
|
|
1055
1055
|
count: r.count ?? 0,
|
|
1056
1056
|
sum: r.sum,
|
|
1057
|
-
avg:
|
|
1058
|
-
pct:
|
|
1057
|
+
avg: n,
|
|
1058
|
+
pct: a,
|
|
1059
1059
|
breakdown: r.breakdown ?? {},
|
|
1060
1060
|
updated: r.updated_at || (/* @__PURE__ */ new Date()).toISOString()
|
|
1061
1061
|
};
|
|
1062
1062
|
} catch (s) {
|
|
1063
|
-
throw
|
|
1063
|
+
throw f.error("Error loading stats:", s), s;
|
|
1064
1064
|
}
|
|
1065
1065
|
}
|
|
1066
1066
|
async function is(e) {
|
|
1067
|
-
const t = JSON.stringify(e), s = `${
|
|
1067
|
+
const t = JSON.stringify(e), s = `${me}`;
|
|
1068
1068
|
try {
|
|
1069
|
-
if (
|
|
1069
|
+
if (f.debug("Sending stats", e), typeof navigator < "u" && navigator.sendBeacon)
|
|
1070
1070
|
if (navigator.sendBeacon(s, t)) {
|
|
1071
|
-
|
|
1071
|
+
f.debug("Successfully sent stats via sendBeacon");
|
|
1072
1072
|
return;
|
|
1073
1073
|
} else
|
|
1074
|
-
|
|
1074
|
+
f.debug("sendBeacon failed, falling back to fetch");
|
|
1075
1075
|
const i = await fetch(s, {
|
|
1076
1076
|
body: t,
|
|
1077
1077
|
method: "POST",
|
|
@@ -1082,15 +1082,15 @@ async function is(e) {
|
|
|
1082
1082
|
});
|
|
1083
1083
|
if (!i.ok)
|
|
1084
1084
|
throw new Error(`API request failed with status: ${i.status}`);
|
|
1085
|
-
|
|
1085
|
+
f.debug("Successfully sent stats via fetch");
|
|
1086
1086
|
} catch (i) {
|
|
1087
|
-
throw
|
|
1087
|
+
throw f.error("Failed to send analytics:", i), i;
|
|
1088
1088
|
}
|
|
1089
1089
|
}
|
|
1090
|
-
function
|
|
1090
|
+
function ge(e) {
|
|
1091
1091
|
return !e || typeof e != "string" ? !1 : /^[\p{Emoji}]$/u.test(e) ? !0 : new RegExp("^\\p{Emoji}(\\p{Emoji_Modifier}|\\u200D\\p{Emoji})*$", "u").test(e);
|
|
1092
1092
|
}
|
|
1093
|
-
function
|
|
1093
|
+
function Pt(e) {
|
|
1094
1094
|
if (!e || typeof e != "string")
|
|
1095
1095
|
return !1;
|
|
1096
1096
|
const t = e.trim();
|
|
@@ -1120,147 +1120,147 @@ function os(e) {
|
|
|
1120
1120
|
function rs(e, t) {
|
|
1121
1121
|
const s = /{([^{}]+)}/g;
|
|
1122
1122
|
return e.replace(s, (i, o) => {
|
|
1123
|
-
const r = o.trim(),
|
|
1124
|
-
return
|
|
1123
|
+
const r = o.trim(), n = t[r];
|
|
1124
|
+
return n !== void 0 ? String(n) : i;
|
|
1125
1125
|
});
|
|
1126
1126
|
}
|
|
1127
|
-
function
|
|
1127
|
+
function ns(e, t) {
|
|
1128
1128
|
let s = 2166136261;
|
|
1129
1129
|
const i = e + ":" + t;
|
|
1130
1130
|
for (let o = 0; o < i.length; o++)
|
|
1131
1131
|
s ^= i.charCodeAt(o), s += (s << 1) + (s << 4) + (s << 7) + (s << 8) + (s << 24);
|
|
1132
1132
|
return (s >>> 0).toString(16).padStart(8, "0");
|
|
1133
1133
|
}
|
|
1134
|
-
var
|
|
1134
|
+
var as = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, M = function(e) {
|
|
1135
1135
|
return typeof e == "string" ? e.length > 0 : typeof e == "number";
|
|
1136
|
-
},
|
|
1136
|
+
}, v = function(e, t, s) {
|
|
1137
1137
|
return t === void 0 && (t = 0), s === void 0 && (s = Math.pow(10, t)), Math.round(s * e) / s + 0;
|
|
1138
|
-
},
|
|
1138
|
+
}, S = function(e, t, s) {
|
|
1139
1139
|
return t === void 0 && (t = 0), s === void 0 && (s = 1), e > s ? s : e > t ? e : t;
|
|
1140
|
-
},
|
|
1140
|
+
}, ye = function(e) {
|
|
1141
1141
|
return (e = isFinite(e) ? e % 360 : 0) > 0 ? e : e + 360;
|
|
1142
|
-
},
|
|
1143
|
-
return { r:
|
|
1144
|
-
},
|
|
1145
|
-
return { r:
|
|
1146
|
-
}, ls = /^#([0-9a-f]{3,8})$/i,
|
|
1142
|
+
}, Gt = function(e) {
|
|
1143
|
+
return { r: S(e.r, 0, 255), g: S(e.g, 0, 255), b: S(e.b, 0, 255), a: S(e.a) };
|
|
1144
|
+
}, vt = function(e) {
|
|
1145
|
+
return { r: v(e.r), g: v(e.g), b: v(e.b), a: v(e.a, 3) };
|
|
1146
|
+
}, ls = /^#([0-9a-f]{3,8})$/i, ct = function(e) {
|
|
1147
1147
|
var t = e.toString(16);
|
|
1148
1148
|
return t.length < 2 ? "0" + t : t;
|
|
1149
|
-
},
|
|
1150
|
-
var t = e.r, s = e.g, i = e.b, o = e.a, r = Math.max(t, s, i),
|
|
1151
|
-
return { h: 60 * (
|
|
1152
|
-
},
|
|
1149
|
+
}, ve = function(e) {
|
|
1150
|
+
var t = e.r, s = e.g, i = e.b, o = e.a, r = Math.max(t, s, i), n = r - Math.min(t, s, i), a = n ? r === t ? (s - i) / n : r === s ? 2 + (i - t) / n : 4 + (t - s) / n : 0;
|
|
1151
|
+
return { h: 60 * (a < 0 ? a + 6 : a), s: r ? n / r * 100 : 0, v: r / 255 * 100, a: o };
|
|
1152
|
+
}, xe = function(e) {
|
|
1153
1153
|
var t = e.h, s = e.s, i = e.v, o = e.a;
|
|
1154
1154
|
t = t / 360 * 6, s /= 100, i /= 100;
|
|
1155
|
-
var r = Math.floor(t),
|
|
1156
|
-
return { r: 255 * [i,
|
|
1157
|
-
},
|
|
1158
|
-
return { h:
|
|
1159
|
-
},
|
|
1160
|
-
return { h:
|
|
1161
|
-
},
|
|
1162
|
-
return
|
|
1155
|
+
var r = Math.floor(t), n = i * (1 - s), a = i * (1 - (t - r) * s), l = i * (1 - (1 - t + r) * s), p = r % 6;
|
|
1156
|
+
return { r: 255 * [i, a, n, n, l, i][p], g: 255 * [l, i, i, a, n, n][p], b: 255 * [n, n, l, i, i, a][p], a: o };
|
|
1157
|
+
}, Zt = function(e) {
|
|
1158
|
+
return { h: ye(e.h), s: S(e.s, 0, 100), l: S(e.l, 0, 100), a: S(e.a) };
|
|
1159
|
+
}, Wt = function(e) {
|
|
1160
|
+
return { h: v(e.h), s: v(e.s), l: v(e.l), a: v(e.a, 3) };
|
|
1161
|
+
}, Jt = function(e) {
|
|
1162
|
+
return xe((s = (t = e).s, { h: t.h, s: (s *= ((i = t.l) < 50 ? i : 100 - i) / 100) > 0 ? 2 * s / (i + s) * 100 : 0, v: i + s, a: t.a }));
|
|
1163
1163
|
var t, s, i;
|
|
1164
|
-
},
|
|
1165
|
-
return { h: (t =
|
|
1164
|
+
}, it = function(e) {
|
|
1165
|
+
return { h: (t = ve(e)).h, s: (o = (200 - (s = t.s)) * (i = t.v) / 100) > 0 && o < 200 ? s * i / 100 / (o <= 100 ? o : 200 - o) * 100 : 0, l: o / 2, a: t.a };
|
|
1166
1166
|
var t, s, i, o;
|
|
1167
|
-
}, cs = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, ds = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, ps = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, hs = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,
|
|
1167
|
+
}, cs = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, ds = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, ps = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, hs = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i, Xt = { string: [[function(e) {
|
|
1168
1168
|
var t = ls.exec(e);
|
|
1169
|
-
return t ? (e = t[1]).length <= 4 ? { r: parseInt(e[0] + e[0], 16), g: parseInt(e[1] + e[1], 16), b: parseInt(e[2] + e[2], 16), a: e.length === 4 ?
|
|
1169
|
+
return t ? (e = t[1]).length <= 4 ? { r: parseInt(e[0] + e[0], 16), g: parseInt(e[1] + e[1], 16), b: parseInt(e[2] + e[2], 16), a: e.length === 4 ? v(parseInt(e[3] + e[3], 16) / 255, 2) : 1 } : e.length === 6 || e.length === 8 ? { r: parseInt(e.substr(0, 2), 16), g: parseInt(e.substr(2, 2), 16), b: parseInt(e.substr(4, 2), 16), a: e.length === 8 ? v(parseInt(e.substr(6, 2), 16) / 255, 2) : 1 } : null : null;
|
|
1170
1170
|
}, "hex"], [function(e) {
|
|
1171
1171
|
var t = ps.exec(e) || hs.exec(e);
|
|
1172
|
-
return t ? t[2] !== t[4] || t[4] !== t[6] ? null :
|
|
1172
|
+
return t ? t[2] !== t[4] || t[4] !== t[6] ? null : Gt({ r: Number(t[1]) / (t[2] ? 100 / 255 : 1), g: Number(t[3]) / (t[4] ? 100 / 255 : 1), b: Number(t[5]) / (t[6] ? 100 / 255 : 1), a: t[7] === void 0 ? 1 : Number(t[7]) / (t[8] ? 100 : 1) }) : null;
|
|
1173
1173
|
}, "rgb"], [function(e) {
|
|
1174
1174
|
var t = cs.exec(e) || ds.exec(e);
|
|
1175
1175
|
if (!t) return null;
|
|
1176
|
-
var s, i, o =
|
|
1177
|
-
return
|
|
1176
|
+
var s, i, o = Zt({ h: (s = t[1], i = t[2], i === void 0 && (i = "deg"), Number(s) * (as[i] || 1)), s: Number(t[3]), l: Number(t[4]), a: t[5] === void 0 ? 1 : Number(t[5]) / (t[6] ? 100 : 1) });
|
|
1177
|
+
return Jt(o);
|
|
1178
1178
|
}, "hsl"]], object: [[function(e) {
|
|
1179
1179
|
var t = e.r, s = e.g, i = e.b, o = e.a, r = o === void 0 ? 1 : o;
|
|
1180
|
-
return
|
|
1180
|
+
return M(t) && M(s) && M(i) ? Gt({ r: Number(t), g: Number(s), b: Number(i), a: Number(r) }) : null;
|
|
1181
1181
|
}, "rgb"], [function(e) {
|
|
1182
1182
|
var t = e.h, s = e.s, i = e.l, o = e.a, r = o === void 0 ? 1 : o;
|
|
1183
|
-
if (!
|
|
1184
|
-
var
|
|
1185
|
-
return
|
|
1183
|
+
if (!M(t) || !M(s) || !M(i)) return null;
|
|
1184
|
+
var n = Zt({ h: Number(t), s: Number(s), l: Number(i), a: Number(r) });
|
|
1185
|
+
return Jt(n);
|
|
1186
1186
|
}, "hsl"], [function(e) {
|
|
1187
1187
|
var t = e.h, s = e.s, i = e.v, o = e.a, r = o === void 0 ? 1 : o;
|
|
1188
|
-
if (!
|
|
1189
|
-
var
|
|
1190
|
-
return { h:
|
|
1188
|
+
if (!M(t) || !M(s) || !M(i)) return null;
|
|
1189
|
+
var n = function(a) {
|
|
1190
|
+
return { h: ye(a.h), s: S(a.s, 0, 100), v: S(a.v, 0, 100), a: S(a.a) };
|
|
1191
1191
|
}({ h: Number(t), s: Number(s), v: Number(i), a: Number(r) });
|
|
1192
|
-
return
|
|
1193
|
-
}, "hsv"]] },
|
|
1192
|
+
return xe(n);
|
|
1193
|
+
}, "hsv"]] }, Qt = function(e, t) {
|
|
1194
1194
|
for (var s = 0; s < t.length; s++) {
|
|
1195
1195
|
var i = t[s][0](e);
|
|
1196
1196
|
if (i) return [i, t[s][1]];
|
|
1197
1197
|
}
|
|
1198
1198
|
return [null, void 0];
|
|
1199
1199
|
}, us = function(e) {
|
|
1200
|
-
return typeof e == "string" ?
|
|
1201
|
-
},
|
|
1202
|
-
var s =
|
|
1203
|
-
return { h: s.h, s:
|
|
1204
|
-
},
|
|
1200
|
+
return typeof e == "string" ? Qt(e.trim(), Xt.string) : typeof e == "object" && e !== null ? Qt(e, Xt.object) : [null, void 0];
|
|
1201
|
+
}, xt = function(e, t) {
|
|
1202
|
+
var s = it(e);
|
|
1203
|
+
return { h: s.h, s: S(s.s + 100 * t, 0, 100), l: s.l, a: s.a };
|
|
1204
|
+
}, $t = function(e) {
|
|
1205
1205
|
return (299 * e.r + 587 * e.g + 114 * e.b) / 1e3 / 255;
|
|
1206
|
-
},
|
|
1207
|
-
var s =
|
|
1208
|
-
return { h: s.h, s: s.s, l:
|
|
1209
|
-
},
|
|
1206
|
+
}, te = function(e, t) {
|
|
1207
|
+
var s = it(e);
|
|
1208
|
+
return { h: s.h, s: s.s, l: S(s.l + 100 * t, 0, 100), a: s.a };
|
|
1209
|
+
}, ee = function() {
|
|
1210
1210
|
function e(t) {
|
|
1211
1211
|
this.parsed = us(t)[0], this.rgba = this.parsed || { r: 0, g: 0, b: 0, a: 1 };
|
|
1212
1212
|
}
|
|
1213
1213
|
return e.prototype.isValid = function() {
|
|
1214
1214
|
return this.parsed !== null;
|
|
1215
1215
|
}, e.prototype.brightness = function() {
|
|
1216
|
-
return
|
|
1216
|
+
return v($t(this.rgba), 2);
|
|
1217
1217
|
}, e.prototype.isDark = function() {
|
|
1218
|
-
return
|
|
1218
|
+
return $t(this.rgba) < 0.5;
|
|
1219
1219
|
}, e.prototype.isLight = function() {
|
|
1220
|
-
return
|
|
1220
|
+
return $t(this.rgba) >= 0.5;
|
|
1221
1221
|
}, e.prototype.toHex = function() {
|
|
1222
|
-
return t =
|
|
1223
|
-
var t, s, i, o, r,
|
|
1222
|
+
return t = vt(this.rgba), s = t.r, i = t.g, o = t.b, n = (r = t.a) < 1 ? ct(v(255 * r)) : "", "#" + ct(s) + ct(i) + ct(o) + n;
|
|
1223
|
+
var t, s, i, o, r, n;
|
|
1224
1224
|
}, e.prototype.toRgb = function() {
|
|
1225
|
-
return
|
|
1225
|
+
return vt(this.rgba);
|
|
1226
1226
|
}, e.prototype.toRgbString = function() {
|
|
1227
|
-
return t =
|
|
1227
|
+
return t = vt(this.rgba), s = t.r, i = t.g, o = t.b, (r = t.a) < 1 ? "rgba(" + s + ", " + i + ", " + o + ", " + r + ")" : "rgb(" + s + ", " + i + ", " + o + ")";
|
|
1228
1228
|
var t, s, i, o, r;
|
|
1229
1229
|
}, e.prototype.toHsl = function() {
|
|
1230
|
-
return
|
|
1230
|
+
return Wt(it(this.rgba));
|
|
1231
1231
|
}, e.prototype.toHslString = function() {
|
|
1232
|
-
return t =
|
|
1232
|
+
return t = Wt(it(this.rgba)), s = t.h, i = t.s, o = t.l, (r = t.a) < 1 ? "hsla(" + s + ", " + i + "%, " + o + "%, " + r + ")" : "hsl(" + s + ", " + i + "%, " + o + "%)";
|
|
1233
1233
|
var t, s, i, o, r;
|
|
1234
1234
|
}, e.prototype.toHsv = function() {
|
|
1235
|
-
return t =
|
|
1235
|
+
return t = ve(this.rgba), { h: v(t.h), s: v(t.s), v: v(t.v), a: v(t.a, 3) };
|
|
1236
1236
|
var t;
|
|
1237
1237
|
}, e.prototype.invert = function() {
|
|
1238
|
-
return
|
|
1238
|
+
return E({ r: 255 - (t = this.rgba).r, g: 255 - t.g, b: 255 - t.b, a: t.a });
|
|
1239
1239
|
var t;
|
|
1240
1240
|
}, e.prototype.saturate = function(t) {
|
|
1241
|
-
return t === void 0 && (t = 0.1),
|
|
1241
|
+
return t === void 0 && (t = 0.1), E(xt(this.rgba, t));
|
|
1242
1242
|
}, e.prototype.desaturate = function(t) {
|
|
1243
|
-
return t === void 0 && (t = 0.1),
|
|
1243
|
+
return t === void 0 && (t = 0.1), E(xt(this.rgba, -t));
|
|
1244
1244
|
}, e.prototype.grayscale = function() {
|
|
1245
|
-
return
|
|
1245
|
+
return E(xt(this.rgba, -1));
|
|
1246
1246
|
}, e.prototype.lighten = function(t) {
|
|
1247
|
-
return t === void 0 && (t = 0.1),
|
|
1247
|
+
return t === void 0 && (t = 0.1), E(te(this.rgba, t));
|
|
1248
1248
|
}, e.prototype.darken = function(t) {
|
|
1249
|
-
return t === void 0 && (t = 0.1),
|
|
1249
|
+
return t === void 0 && (t = 0.1), E(te(this.rgba, -t));
|
|
1250
1250
|
}, e.prototype.rotate = function(t) {
|
|
1251
1251
|
return t === void 0 && (t = 15), this.hue(this.hue() + t);
|
|
1252
1252
|
}, e.prototype.alpha = function(t) {
|
|
1253
|
-
return typeof t == "number" ?
|
|
1253
|
+
return typeof t == "number" ? E({ r: (s = this.rgba).r, g: s.g, b: s.b, a: t }) : v(this.rgba.a, 3);
|
|
1254
1254
|
var s;
|
|
1255
1255
|
}, e.prototype.hue = function(t) {
|
|
1256
|
-
var s =
|
|
1257
|
-
return typeof t == "number" ?
|
|
1256
|
+
var s = it(this.rgba);
|
|
1257
|
+
return typeof t == "number" ? E({ h: t, s: s.s, l: s.l, a: s.a }) : v(s.h);
|
|
1258
1258
|
}, e.prototype.isEqual = function(t) {
|
|
1259
|
-
return this.toHex() ===
|
|
1259
|
+
return this.toHex() === E(t).toHex();
|
|
1260
1260
|
}, e;
|
|
1261
|
-
}(),
|
|
1262
|
-
return e instanceof
|
|
1263
|
-
},
|
|
1261
|
+
}(), E = function(e) {
|
|
1262
|
+
return e instanceof ee ? e : new ee(e);
|
|
1263
|
+
}, $e = /* @__PURE__ */ ((e) => (e[e.AA_NORMAL = 4.5] = "AA_NORMAL", e[e.AA_LARGE = 3] = "AA_LARGE", e[e.AAA_NORMAL = 7] = "AAA_NORMAL", e[e.AAA_LARGE = 4.5] = "AAA_LARGE", e))($e || {});
|
|
1264
1264
|
const ms = {
|
|
1265
1265
|
black: "#000000",
|
|
1266
1266
|
white: "#ffffff",
|
|
@@ -1282,16 +1282,16 @@ function bs(e) {
|
|
|
1282
1282
|
const t = e.toLowerCase().trim();
|
|
1283
1283
|
return ms[t] || null;
|
|
1284
1284
|
}
|
|
1285
|
-
function
|
|
1286
|
-
const s =
|
|
1285
|
+
function wt(e, t) {
|
|
1286
|
+
const s = se(e), i = se(t), o = Math.max(s, i), r = Math.min(s, i);
|
|
1287
1287
|
return (o + 0.05) / (r + 0.05);
|
|
1288
1288
|
}
|
|
1289
|
-
function
|
|
1290
|
-
const t =
|
|
1291
|
-
return 0.2126 * r + 0.7152 *
|
|
1289
|
+
function se(e) {
|
|
1290
|
+
const t = fs(e), s = t.r / 255, i = t.g / 255, o = t.b / 255, r = s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4), n = i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4), a = o <= 0.03928 ? o / 12.92 : Math.pow((o + 0.055) / 1.055, 2.4);
|
|
1291
|
+
return 0.2126 * r + 0.7152 * n + 0.0722 * a;
|
|
1292
1292
|
}
|
|
1293
|
-
function
|
|
1294
|
-
if (!
|
|
1293
|
+
function ie(e, t = {}) {
|
|
1294
|
+
if (!E(e).isValid())
|
|
1295
1295
|
return console.warn(`Invalid color provided: ${e}`), "black";
|
|
1296
1296
|
const {
|
|
1297
1297
|
minContrast: i = 4.5,
|
|
@@ -1300,38 +1300,38 @@ function ae(e, t = {}) {
|
|
|
1300
1300
|
light: "#f8f9fa",
|
|
1301
1301
|
dark: "#343a40"
|
|
1302
1302
|
},
|
|
1303
|
-
fallback:
|
|
1304
|
-
} = t,
|
|
1305
|
-
let
|
|
1306
|
-
for (const
|
|
1307
|
-
const b =
|
|
1308
|
-
b >= i && b >
|
|
1309
|
-
}
|
|
1310
|
-
if (
|
|
1311
|
-
const
|
|
1312
|
-
|
|
1313
|
-
for (const b of
|
|
1314
|
-
if (b ===
|
|
1315
|
-
const
|
|
1316
|
-
|
|
1303
|
+
fallback: n = "white"
|
|
1304
|
+
} = t, a = o.map((u) => u === "black" ? "#000000" : u === "white" ? "#ffffff" : u === "light" ? r.light || "#f8f9fa" : u === "dark" ? r.dark || "#343a40" : u);
|
|
1305
|
+
let l = n, p = 0;
|
|
1306
|
+
for (const u of a) {
|
|
1307
|
+
const b = wt(e, u);
|
|
1308
|
+
b >= i && b > p && (p = b, l = u);
|
|
1309
|
+
}
|
|
1310
|
+
if (p === 0) {
|
|
1311
|
+
const u = wt(e, n);
|
|
1312
|
+
l = n, p = u;
|
|
1313
|
+
for (const b of a) {
|
|
1314
|
+
if (b === n) continue;
|
|
1315
|
+
const w = wt(e, b);
|
|
1316
|
+
w > p && (p = w, l = b);
|
|
1317
1317
|
}
|
|
1318
1318
|
console.warn(
|
|
1319
|
-
`No color option met the minimum contrast ratio of ${i}:1 against ${e}. Using ${
|
|
1319
|
+
`No color option met the minimum contrast ratio of ${i}:1 against ${e}. Using ${l} with contrast ratio ${p.toFixed(2)}:1 instead.`
|
|
1320
1320
|
);
|
|
1321
1321
|
}
|
|
1322
|
-
return
|
|
1322
|
+
return l;
|
|
1323
1323
|
}
|
|
1324
|
-
function
|
|
1325
|
-
const s = bs(e) || e, i =
|
|
1324
|
+
function fs(e) {
|
|
1325
|
+
const s = bs(e) || e, i = E(s);
|
|
1326
1326
|
if (!i.isValid())
|
|
1327
1327
|
return console.warn(`Invalid color provided: ${e}`), { r: 0, g: 0, b: 0 };
|
|
1328
|
-
const { r: o, g: r, b:
|
|
1329
|
-
return { r: o, g: r, b:
|
|
1328
|
+
const { r: o, g: r, b: n } = i.toRgb();
|
|
1329
|
+
return { r: o, g: r, b: n };
|
|
1330
1330
|
}
|
|
1331
|
-
function
|
|
1331
|
+
function N(e, t) {
|
|
1332
1332
|
return e === "left" || e === "right" ? t || "center" : e === "top" || e === "bottom" ? t || "start" : t || "center";
|
|
1333
1333
|
}
|
|
1334
|
-
function
|
|
1334
|
+
function gs(e, t = "1rem") {
|
|
1335
1335
|
if (!e) return t;
|
|
1336
1336
|
const s = {
|
|
1337
1337
|
xs: "0.75rem",
|
|
@@ -1347,8 +1347,8 @@ function fs(e, t = "1rem") {
|
|
|
1347
1347
|
o
|
|
1348
1348
|
))
|
|
1349
1349
|
return o.replace(/\s+/g, "");
|
|
1350
|
-
const
|
|
1351
|
-
return isNaN(
|
|
1350
|
+
const n = parseFloat(o);
|
|
1351
|
+
return isNaN(n) ? t : `${n}rem`;
|
|
1352
1352
|
}
|
|
1353
1353
|
function ys(e, t = "4px") {
|
|
1354
1354
|
if (!e) return t;
|
|
@@ -1367,10 +1367,10 @@ function ys(e, t = "4px") {
|
|
|
1367
1367
|
o
|
|
1368
1368
|
))
|
|
1369
1369
|
return o.replace(/\s+/g, "");
|
|
1370
|
-
const
|
|
1371
|
-
return isNaN(
|
|
1370
|
+
const n = parseFloat(o);
|
|
1371
|
+
return isNaN(n) ? t : `${n}px`;
|
|
1372
1372
|
}
|
|
1373
|
-
function
|
|
1373
|
+
function Y() {
|
|
1374
1374
|
return {
|
|
1375
1375
|
count: 0,
|
|
1376
1376
|
sum: 0,
|
|
@@ -1381,22 +1381,22 @@ function G() {
|
|
|
1381
1381
|
};
|
|
1382
1382
|
}
|
|
1383
1383
|
function vs(e) {
|
|
1384
|
-
if (!
|
|
1385
|
-
return
|
|
1384
|
+
if (!Tt())
|
|
1385
|
+
return Y();
|
|
1386
1386
|
try {
|
|
1387
|
-
const t =
|
|
1388
|
-
return t ? { ...
|
|
1387
|
+
const t = be(e);
|
|
1388
|
+
return t ? { ...Y(), ...t } : Y();
|
|
1389
1389
|
} catch (t) {
|
|
1390
|
-
return
|
|
1390
|
+
return f.warn("Failed to load localStats from localStorage", t), Y();
|
|
1391
1391
|
}
|
|
1392
1392
|
}
|
|
1393
1393
|
function xs(e, t) {
|
|
1394
|
-
if (!
|
|
1394
|
+
if (!Tt())
|
|
1395
1395
|
return !1;
|
|
1396
1396
|
try {
|
|
1397
|
-
return
|
|
1397
|
+
return fe(e, t) ? (f.debug("Saved localStats to localStorage", t), !0) : !1;
|
|
1398
1398
|
} catch (s) {
|
|
1399
|
-
return
|
|
1399
|
+
return f.warn("Failed to save localStats to localStorage", s), !1;
|
|
1400
1400
|
}
|
|
1401
1401
|
}
|
|
1402
1402
|
function $s(e, t) {
|
|
@@ -1416,7 +1416,7 @@ function $s(e, t) {
|
|
|
1416
1416
|
}
|
|
1417
1417
|
function ws(e, t) {
|
|
1418
1418
|
if (!e.count && !t.count)
|
|
1419
|
-
return
|
|
1419
|
+
return Y();
|
|
1420
1420
|
if (!e.count)
|
|
1421
1421
|
return { ...t };
|
|
1422
1422
|
const s = {
|
|
@@ -1439,23 +1439,25 @@ function Ss(e) {
|
|
|
1439
1439
|
if (!e || typeof e != "object")
|
|
1440
1440
|
return 0;
|
|
1441
1441
|
let t = 0, s = 0, i = 0;
|
|
1442
|
-
for (let
|
|
1443
|
-
const
|
|
1444
|
-
i +=
|
|
1442
|
+
for (let n = 0; n <= 10; n++) {
|
|
1443
|
+
const a = n.toString(), l = Math.max(0, e[a] || 0);
|
|
1444
|
+
i += l, n >= 9 ? t += l : n >= 7 || (s += l);
|
|
1445
1445
|
}
|
|
1446
1446
|
if (i === 0)
|
|
1447
1447
|
return 0;
|
|
1448
1448
|
const o = t / i * 100, r = s / i * 100;
|
|
1449
1449
|
return Math.round(o - r);
|
|
1450
1450
|
}
|
|
1451
|
-
var ks = Object.defineProperty,
|
|
1452
|
-
for (var o = void 0, r = e.length - 1,
|
|
1453
|
-
(
|
|
1451
|
+
var ks = Object.defineProperty, g = (e, t, s, i) => {
|
|
1452
|
+
for (var o = void 0, r = e.length - 1, n; r >= 0; r--)
|
|
1453
|
+
(n = e[r]) && (o = n(t, s, o) || o);
|
|
1454
1454
|
return o && ks(t, s, o), o;
|
|
1455
1455
|
};
|
|
1456
|
-
const
|
|
1456
|
+
const Rt = class Rt extends L {
|
|
1457
1457
|
constructor() {
|
|
1458
|
-
super(...arguments), this.readonly = !1, this.showStats =
|
|
1458
|
+
super(...arguments), this.readonly = !1, this.showStats = "never", this.showCounts = !1, this.showChart = !1, this.minContrast = $e.AA_NORMAL, this.labelPosition = "top", this.statsIsLoading = !1, this.localStats = Y(), this.isEditMode = !1, this.isChartVisible = !1, this.handleChartToggleKeyDown = (t) => {
|
|
1459
|
+
(t.key === "Enter" || t.key === " ") && (this.isChartVisible = !this.isChartVisible, this.handleChartToggleClick());
|
|
1460
|
+
};
|
|
1459
1461
|
}
|
|
1460
1462
|
/**
|
|
1461
1463
|
* Gets the project key for the widget
|
|
@@ -1468,7 +1470,7 @@ const Lt = class Lt extends V {
|
|
|
1468
1470
|
* Gets the localStorage key for this widget's localStats
|
|
1469
1471
|
*/
|
|
1470
1472
|
async getLocalStatsKey() {
|
|
1471
|
-
const t = await
|
|
1473
|
+
const t = await Kt(), s = await this.getProjectKey(), i = this.name || "unnamed";
|
|
1472
1474
|
return `pc-local-stats-${t}-${s}-${i}`;
|
|
1473
1475
|
}
|
|
1474
1476
|
/**
|
|
@@ -1477,9 +1479,9 @@ const Lt = class Lt extends V {
|
|
|
1477
1479
|
async loadLocalStatsFromStorage() {
|
|
1478
1480
|
try {
|
|
1479
1481
|
const t = await this.getLocalStatsKey();
|
|
1480
|
-
this.localStats = vs(t),
|
|
1482
|
+
this.localStats = vs(t), f.debug("Loaded localStats from localStorage", this.localStats);
|
|
1481
1483
|
} catch (t) {
|
|
1482
|
-
|
|
1484
|
+
f.warn("Failed to generate localStorage key for localStats", t), this.localStats = Y();
|
|
1483
1485
|
}
|
|
1484
1486
|
}
|
|
1485
1487
|
/**
|
|
@@ -1488,9 +1490,9 @@ const Lt = class Lt extends V {
|
|
|
1488
1490
|
async saveLocalStatsToStorage() {
|
|
1489
1491
|
try {
|
|
1490
1492
|
const t = await this.getLocalStatsKey();
|
|
1491
|
-
xs(t, this.localStats) ||
|
|
1493
|
+
xs(t, this.localStats) || f.warn("Failed to save localStats to localStorage");
|
|
1492
1494
|
} catch (t) {
|
|
1493
|
-
|
|
1495
|
+
f.warn("Failed to save localStats to localStorage", t);
|
|
1494
1496
|
}
|
|
1495
1497
|
}
|
|
1496
1498
|
/**
|
|
@@ -1498,7 +1500,7 @@ const Lt = class Lt extends V {
|
|
|
1498
1500
|
*/
|
|
1499
1501
|
async updateStats(t, s) {
|
|
1500
1502
|
if (this.stats && (this.stats = $s(this.stats, this.localStats)), this.localStats = {
|
|
1501
|
-
count: t > 0 ? 1 : 0,
|
|
1503
|
+
count: t > 0 || this.widgetType === "nps" ? 1 : 0,
|
|
1502
1504
|
sum: t,
|
|
1503
1505
|
avg: t,
|
|
1504
1506
|
// For single user, avg equals the value
|
|
@@ -1515,23 +1517,23 @@ const Lt = class Lt extends V {
|
|
|
1515
1517
|
* Undo the stats with the localStats
|
|
1516
1518
|
*/
|
|
1517
1519
|
async submitStats(t, s) {
|
|
1518
|
-
const i = Math.floor(Date.now() / 1e3).toString(), o = await
|
|
1520
|
+
const i = Math.floor(Date.now() / 1e3).toString(), o = await Kt(), r = await this.getProjectKey(), n = this.name || "", a = {
|
|
1519
1521
|
sessionId: o,
|
|
1520
1522
|
projectId: r,
|
|
1521
|
-
widgetName:
|
|
1523
|
+
widgetName: n,
|
|
1522
1524
|
widgetType: this.widgetType,
|
|
1523
1525
|
url: window.location.href,
|
|
1524
1526
|
numericValue: t,
|
|
1525
1527
|
textValues: s,
|
|
1526
1528
|
tags: this.tags,
|
|
1527
1529
|
timestamp: i
|
|
1528
|
-
},
|
|
1530
|
+
}, l = ns(JSON.stringify(a), i);
|
|
1529
1531
|
try {
|
|
1530
|
-
is({ ...
|
|
1531
|
-
} catch (
|
|
1532
|
-
|
|
1532
|
+
is({ ...a, hash: l });
|
|
1533
|
+
} catch (p) {
|
|
1534
|
+
f.warn("Failed to send stats event", p);
|
|
1533
1535
|
}
|
|
1534
|
-
return
|
|
1536
|
+
return a;
|
|
1535
1537
|
}
|
|
1536
1538
|
/**
|
|
1537
1539
|
* Apply custom CSS when connected to the DOM or when css property changes
|
|
@@ -1554,7 +1556,7 @@ const Lt = class Lt extends V {
|
|
|
1554
1556
|
if (this.primaryColor) {
|
|
1555
1557
|
s += `--pc-primary-color: ${this.primaryColor} !important;
|
|
1556
1558
|
`;
|
|
1557
|
-
const i =
|
|
1559
|
+
const i = ie(this.primaryColor, {
|
|
1558
1560
|
minContrast: this.minContrast,
|
|
1559
1561
|
colorOptions: ["black", "white", "light", "dark"]
|
|
1560
1562
|
});
|
|
@@ -1571,7 +1573,7 @@ const Lt = class Lt extends V {
|
|
|
1571
1573
|
if (this.muteColor) {
|
|
1572
1574
|
s += `--pc-mute-color: ${this.muteColor} !important;
|
|
1573
1575
|
`;
|
|
1574
|
-
const i =
|
|
1576
|
+
const i = ie(this.muteColor, {
|
|
1575
1577
|
minContrast: this.minContrast,
|
|
1576
1578
|
colorOptions: ["black", "white", "light", "dark"]
|
|
1577
1579
|
});
|
|
@@ -1580,7 +1582,7 @@ const Lt = class Lt extends V {
|
|
|
1580
1582
|
}
|
|
1581
1583
|
if (this.textColor && (s += `--pc-text-color: ${this.textColor} !important;
|
|
1582
1584
|
`), this.size) {
|
|
1583
|
-
const i =
|
|
1585
|
+
const i = gs(this.size);
|
|
1584
1586
|
s += `font-size: ${i} !important;
|
|
1585
1587
|
`;
|
|
1586
1588
|
}
|
|
@@ -1597,120 +1599,185 @@ const Lt = class Lt extends V {
|
|
|
1597
1599
|
const t = await this.getProjectKey();
|
|
1598
1600
|
this.stats = await ss(this.name, t);
|
|
1599
1601
|
} catch (t) {
|
|
1600
|
-
|
|
1602
|
+
f.debug("Error loading stats", t), this.stats = void 0;
|
|
1601
1603
|
} finally {
|
|
1602
1604
|
this.statsIsLoading = !1;
|
|
1603
1605
|
}
|
|
1604
1606
|
}
|
|
1605
1607
|
}
|
|
1606
1608
|
async firstUpdated() {
|
|
1607
|
-
await this.loadLocalStatsFromStorage(),
|
|
1609
|
+
this.name && (await this.loadLocalStatsFromStorage(), await this.loadWidgetStats()), this.initialize();
|
|
1610
|
+
}
|
|
1611
|
+
/**
|
|
1612
|
+
* Initialize mode based on current state
|
|
1613
|
+
*/
|
|
1614
|
+
initialize() {
|
|
1615
|
+
if (this.readonly) {
|
|
1616
|
+
this.isEditMode = !1, this.isChartVisible = this.showChart;
|
|
1617
|
+
return;
|
|
1618
|
+
}
|
|
1619
|
+
this.hasUserVoted() ? this.isEditMode = !1 : this.isEditMode = !0;
|
|
1608
1620
|
}
|
|
1609
1621
|
// Method to dispatch change events with new 3-step approach
|
|
1610
1622
|
async handleChange(t, s) {
|
|
1611
|
-
if (await this.updateStats(t, s),
|
|
1623
|
+
if (await this.updateStats(t, s), this.name) {
|
|
1624
|
+
await this.saveLocalStatsToStorage();
|
|
1612
1625
|
const i = await this.submitStats(t, s);
|
|
1613
1626
|
this.dispatchEvent(new CustomEvent("change", { detail: i }));
|
|
1614
1627
|
} else
|
|
1615
|
-
|
|
1628
|
+
f.warn("Widget name is not set, skipping data submission.");
|
|
1616
1629
|
}
|
|
1617
1630
|
// Common rendering for label
|
|
1618
1631
|
renderLabel() {
|
|
1619
|
-
return this.label ?
|
|
1632
|
+
return this.label ? c`<label data-testid="pc-label" class="pc-label">${this.label}</label>` : "";
|
|
1633
|
+
}
|
|
1634
|
+
/**
|
|
1635
|
+
* Toggle chart visibility
|
|
1636
|
+
*/
|
|
1637
|
+
handleChartToggleClick() {
|
|
1638
|
+
this.isChartVisible = !this.isChartVisible;
|
|
1639
|
+
}
|
|
1640
|
+
renderStatsText() {
|
|
1641
|
+
if (!this.shouldShowStatsText()) return h;
|
|
1642
|
+
if (this.statsIsLoading)
|
|
1643
|
+
return c`<span class="pc-stats-text">
|
|
1644
|
+
<img src="${ue}" alt="Loading" class="pc-loading-icon" />
|
|
1645
|
+
</span>`;
|
|
1646
|
+
const t = this.statsText, s = this.formatStatsText(t), i = this.showChart && this.hasStats();
|
|
1647
|
+
return c`
|
|
1648
|
+
<span class="pc-stats-text" data-testid="stats-text">
|
|
1649
|
+
${s}
|
|
1650
|
+
${i ? c`
|
|
1651
|
+
<img
|
|
1652
|
+
src="${this.isChartVisible ? We : Ze}"
|
|
1653
|
+
alt="${this.isChartVisible ? "Hide chart" : "Show chart"}"
|
|
1654
|
+
class="chart-toggle-icon"
|
|
1655
|
+
data-testid="chart-toggle-button"
|
|
1656
|
+
@click="${this.handleChartToggleClick}"
|
|
1657
|
+
role="button"
|
|
1658
|
+
tabindex="0"
|
|
1659
|
+
@keydown="${this.handleChartToggleKeyDown}"
|
|
1660
|
+
/>
|
|
1661
|
+
` : h}
|
|
1662
|
+
</span>
|
|
1663
|
+
`;
|
|
1620
1664
|
}
|
|
1621
1665
|
formatStatsText(t) {
|
|
1622
|
-
var i, o, r,
|
|
1666
|
+
var i, o, r, n, a;
|
|
1623
1667
|
const s = {
|
|
1624
1668
|
count: ((i = this.stats) == null ? void 0 : i.count) || 0,
|
|
1625
1669
|
sum: ((o = this.stats) == null ? void 0 : o.sum) || 0,
|
|
1626
1670
|
avg: ((r = this.stats) == null ? void 0 : r.avg) || 0,
|
|
1627
|
-
pct: ((
|
|
1628
|
-
nps: this.widgetType === "nps" ? Ss(((
|
|
1671
|
+
pct: ((n = this.stats) == null ? void 0 : n.pct) || 0,
|
|
1672
|
+
nps: this.widgetType === "nps" ? Ss(((a = this.stats) == null ? void 0 : a.breakdown) || {}) : 0
|
|
1629
1673
|
};
|
|
1630
1674
|
return rs(t, s);
|
|
1631
1675
|
}
|
|
1676
|
+
/**
|
|
1677
|
+
* Determines if the stats text should be shown based on show-stats , and readonly
|
|
1678
|
+
*/
|
|
1679
|
+
shouldShowStatsText() {
|
|
1680
|
+
return this.showStats === "never" || !this.statsText || !this.hasStats() || this.isEditMode && this.showStats !== "always" ? !1 : this.showStats === "always" || this.readonly ? !0 : this.hasUserVoted();
|
|
1681
|
+
}
|
|
1682
|
+
shouldShowChart() {
|
|
1683
|
+
return this.showChart && this.hasStats() && this.isChartVisible;
|
|
1684
|
+
}
|
|
1685
|
+
hasUserVoted() {
|
|
1686
|
+
return this.localStats && this.localStats.count > 0;
|
|
1687
|
+
}
|
|
1688
|
+
hasStats() {
|
|
1689
|
+
var t;
|
|
1690
|
+
return (((t = this.stats) == null ? void 0 : t.count) || 0) > 0;
|
|
1691
|
+
}
|
|
1632
1692
|
};
|
|
1633
|
-
|
|
1634
|
-
let
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
],
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
],
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
],
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
],
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
],
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
],
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
],
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
],
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
],
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
],
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
],
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
],
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
],
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
],
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
],
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
],
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
],
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
],
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
],
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
],
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
],
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
],
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
],
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
],
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
],
|
|
1710
|
-
|
|
1693
|
+
Rt.styles = [Je];
|
|
1694
|
+
let m = Rt;
|
|
1695
|
+
g([
|
|
1696
|
+
d({ type: Boolean, reflect: !0 })
|
|
1697
|
+
], m.prototype, "readonly");
|
|
1698
|
+
g([
|
|
1699
|
+
d({ type: String, attribute: "project" })
|
|
1700
|
+
], m.prototype, "projectKey");
|
|
1701
|
+
g([
|
|
1702
|
+
d({ type: String })
|
|
1703
|
+
], m.prototype, "tags");
|
|
1704
|
+
g([
|
|
1705
|
+
d({ type: String })
|
|
1706
|
+
], m.prototype, "name");
|
|
1707
|
+
g([
|
|
1708
|
+
d({ type: String, attribute: "show-stats" })
|
|
1709
|
+
], m.prototype, "showStats");
|
|
1710
|
+
g([
|
|
1711
|
+
d({ type: Boolean, attribute: "show-counts" })
|
|
1712
|
+
], m.prototype, "showCounts");
|
|
1713
|
+
g([
|
|
1714
|
+
d({ type: Boolean, attribute: "show-chart" })
|
|
1715
|
+
], m.prototype, "showChart");
|
|
1716
|
+
g([
|
|
1717
|
+
d({ type: String, attribute: "stats-text" })
|
|
1718
|
+
], m.prototype, "statsText");
|
|
1719
|
+
g([
|
|
1720
|
+
d({ type: String, attribute: "stats-position" })
|
|
1721
|
+
], m.prototype, "statsPosition");
|
|
1722
|
+
g([
|
|
1723
|
+
d({ type: String, attribute: "stats-align" })
|
|
1724
|
+
], m.prototype, "statsAlign");
|
|
1725
|
+
g([
|
|
1726
|
+
d({ type: String })
|
|
1727
|
+
], m.prototype, "icon");
|
|
1728
|
+
g([
|
|
1729
|
+
d({ type: String, attribute: "icon-active" })
|
|
1730
|
+
], m.prototype, "iconActive");
|
|
1731
|
+
g([
|
|
1732
|
+
d({ type: String, attribute: "primary-color" })
|
|
1733
|
+
], m.prototype, "primaryColor");
|
|
1734
|
+
g([
|
|
1735
|
+
d({ type: String, attribute: "mute-color" })
|
|
1736
|
+
], m.prototype, "muteColor");
|
|
1737
|
+
g([
|
|
1738
|
+
d({ type: String, attribute: "text-color" })
|
|
1739
|
+
], m.prototype, "textColor");
|
|
1740
|
+
g([
|
|
1741
|
+
d({ type: String })
|
|
1742
|
+
], m.prototype, "size");
|
|
1743
|
+
g([
|
|
1744
|
+
d({ type: String, attribute: "button-radius" })
|
|
1745
|
+
], m.prototype, "buttonRadius");
|
|
1746
|
+
g([
|
|
1747
|
+
d({ type: Number, attribute: "min-contrast" })
|
|
1748
|
+
], m.prototype, "minContrast");
|
|
1749
|
+
g([
|
|
1750
|
+
d({ type: String })
|
|
1751
|
+
], m.prototype, "css");
|
|
1752
|
+
g([
|
|
1753
|
+
d({ type: String })
|
|
1754
|
+
], m.prototype, "label");
|
|
1755
|
+
g([
|
|
1756
|
+
d({ type: String, attribute: "label-position" })
|
|
1757
|
+
], m.prototype, "labelPosition");
|
|
1758
|
+
g([
|
|
1759
|
+
d({ type: String, attribute: "label-align" })
|
|
1760
|
+
], m.prototype, "labelAlign");
|
|
1761
|
+
g([
|
|
1762
|
+
x()
|
|
1763
|
+
], m.prototype, "statsIsLoading");
|
|
1764
|
+
g([
|
|
1765
|
+
x()
|
|
1766
|
+
], m.prototype, "stats");
|
|
1767
|
+
g([
|
|
1768
|
+
x()
|
|
1769
|
+
], m.prototype, "localStats");
|
|
1770
|
+
g([
|
|
1771
|
+
x()
|
|
1772
|
+
], m.prototype, "isEditMode");
|
|
1773
|
+
g([
|
|
1774
|
+
x()
|
|
1775
|
+
], m.prototype, "isChartVisible");
|
|
1776
|
+
const Es = H`
|
|
1711
1777
|
/* Add responsive sizing with CSS variables */
|
|
1712
1778
|
:host {
|
|
1713
|
-
--pc-nps-button-
|
|
1779
|
+
--pc-nps-button-height: clamp(1.6em, calc(1.5em + 0.5vw), 2.4em);
|
|
1780
|
+
--pc-nps-button-width: clamp(1em, calc(1.2em + 0.3vw), 1.6em);
|
|
1714
1781
|
--pc-nps-font-size: calc(0.85em + 0.1vw);
|
|
1715
1782
|
}
|
|
1716
1783
|
|
|
@@ -1765,8 +1832,8 @@ const Cs = B`
|
|
|
1765
1832
|
}
|
|
1766
1833
|
|
|
1767
1834
|
.nps-button {
|
|
1768
|
-
width: var(--pc-nps-button-
|
|
1769
|
-
height: var(--pc-nps-button-
|
|
1835
|
+
min-width: var(--pc-nps-button-width);
|
|
1836
|
+
height: var(--pc-nps-button-height);
|
|
1770
1837
|
display: flex;
|
|
1771
1838
|
align-items: center;
|
|
1772
1839
|
justify-content: center;
|
|
@@ -1916,7 +1983,8 @@ const Cs = B`
|
|
|
1916
1983
|
@media screen and (max-width: 480px) {
|
|
1917
1984
|
:host {
|
|
1918
1985
|
/* Increase NPS button size for small screens */
|
|
1919
|
-
--pc-nps-button-
|
|
1986
|
+
--pc-nps-button-height: 2.2em;
|
|
1987
|
+
--pc-nps-button-width: 1.6em;
|
|
1920
1988
|
--pc-nps-font-size: 1em;
|
|
1921
1989
|
}
|
|
1922
1990
|
|
|
@@ -1955,8 +2023,8 @@ const Cs = B`
|
|
|
1955
2023
|
* Copyright 2017 Google LLC
|
|
1956
2024
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1957
2025
|
*/
|
|
1958
|
-
const
|
|
1959
|
-
let
|
|
2026
|
+
const we = { ATTRIBUTE: 1 }, Se = (e) => (...t) => ({ _$litDirective$: e, values: t });
|
|
2027
|
+
let ke = class {
|
|
1960
2028
|
constructor(t) {
|
|
1961
2029
|
}
|
|
1962
2030
|
get _$AU() {
|
|
@@ -1977,10 +2045,10 @@ let Ee = class {
|
|
|
1977
2045
|
* Copyright 2018 Google LLC
|
|
1978
2046
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1979
2047
|
*/
|
|
1980
|
-
const
|
|
2048
|
+
const y = Se(class extends ke {
|
|
1981
2049
|
constructor(e) {
|
|
1982
2050
|
var t;
|
|
1983
|
-
if (super(e), e.type !==
|
|
2051
|
+
if (super(e), e.type !== we.ATTRIBUTE || e.name !== "class" || ((t = e.strings) == null ? void 0 : t.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
|
|
1984
2052
|
}
|
|
1985
2053
|
render(e) {
|
|
1986
2054
|
return " " + Object.keys(e).filter((t) => e[t]).join(" ") + " ";
|
|
@@ -1995,36 +2063,36 @@ const v = Ce(class extends Ee {
|
|
|
1995
2063
|
const s = e.element.classList;
|
|
1996
2064
|
for (const r of this.st) r in t || (s.remove(r), this.st.delete(r));
|
|
1997
2065
|
for (const r in t) {
|
|
1998
|
-
const
|
|
1999
|
-
|
|
2066
|
+
const n = !!t[r];
|
|
2067
|
+
n === this.st.has(r) || (o = this.nt) != null && o.has(r) || (n ? (s.add(r), this.st.add(r)) : (s.remove(r), this.st.delete(r)));
|
|
2000
2068
|
}
|
|
2001
|
-
return
|
|
2069
|
+
return D;
|
|
2002
2070
|
}
|
|
2003
2071
|
});
|
|
2004
2072
|
function Ot(e, t = {}) {
|
|
2005
2073
|
if (!e || e.length === 0)
|
|
2006
|
-
return
|
|
2074
|
+
return c`<div class="pc-bar-chart pc-bar-chart--empty">No data available</div>`;
|
|
2007
2075
|
const s = Math.max(...e.map((r) => r.value)), o = { ...{
|
|
2008
2076
|
barColor: "#ffc107",
|
|
2009
2077
|
valueFormatter: (r) => `${r}`,
|
|
2010
2078
|
labelFormatter: (r) => `${r}`,
|
|
2011
2079
|
maxWidth: 100
|
|
2012
2080
|
}, ...t };
|
|
2013
|
-
return
|
|
2081
|
+
return c`
|
|
2014
2082
|
<div class="pc-bar-chart">
|
|
2015
2083
|
${e.map((r) => {
|
|
2016
|
-
const
|
|
2084
|
+
const a = `
|
|
2017
2085
|
width: ${s > 0 ? r.value / s * o.maxWidth : 0}%;
|
|
2018
2086
|
background-color: ${o.barColor};
|
|
2019
|
-
`,
|
|
2020
|
-
return
|
|
2087
|
+
`, l = o.labelFormatter(r.label), p = l && c`<span class="pc-bar-label-text">${l}</span>`;
|
|
2088
|
+
return c`
|
|
2021
2089
|
<div class="pc-bar-row">
|
|
2022
2090
|
<div class="pc-bar-label">
|
|
2023
|
-
${
|
|
2091
|
+
${p}
|
|
2024
2092
|
<span class="pc-bar-label-icon">${r.icon}</span>
|
|
2025
2093
|
</div>
|
|
2026
2094
|
<div class="pc-bar-container">
|
|
2027
|
-
<div class="pc-bar" style="${
|
|
2095
|
+
<div class="pc-bar" style="${a}"></div>
|
|
2028
2096
|
<div class="pc-bar-value">${o.valueFormatter(r.value)}</div>
|
|
2029
2097
|
</div>
|
|
2030
2098
|
</div>
|
|
@@ -2033,41 +2101,35 @@ function Ot(e, t = {}) {
|
|
|
2033
2101
|
</div>
|
|
2034
2102
|
`;
|
|
2035
2103
|
}
|
|
2036
|
-
const
|
|
2037
|
-
var
|
|
2038
|
-
function
|
|
2039
|
-
const {
|
|
2040
|
-
type: s = "functional",
|
|
2041
|
-
alt: i,
|
|
2042
|
-
ariaLabel: o,
|
|
2043
|
-
isSelected: r,
|
|
2044
|
-
componentName: a = "component"
|
|
2045
|
-
} = t;
|
|
2104
|
+
const mt = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='currentColor'%3e%3cpath%20d='M200-200h57l391-391-57-57-391%20391v57Zm-80%2080v-170l528-527q12-11%2026.5-17t30.5-6q16%200%2031%206t26%2018l55%2056q12%2011%2017.5%2026t5.5%2030q0%2016-5.5%2030.5T817-647L290-120H120Zm640-584-56-56%2056%2056Zm-141%2085-28-29%2057%2057-29-28Z'/%3e%3c/svg%3e";
|
|
2105
|
+
var Mt = /* @__PURE__ */ ((e) => (e.DECORATIVE = "decorative", e.FUNCTIONAL = "functional", e.STATUS = "status", e))(Mt || {});
|
|
2106
|
+
function Ee(e, t = {}) {
|
|
2107
|
+
const { type: s = "functional", alt: i, ariaLabel: o, isSelected: r } = t;
|
|
2046
2108
|
if (!e)
|
|
2047
2109
|
return { alt: "", ariaHidden: !0 };
|
|
2048
2110
|
if (s === "decorative")
|
|
2049
2111
|
return { alt: "", ariaHidden: !0 };
|
|
2050
2112
|
s === "functional" && !i && !o && console.warn(
|
|
2051
|
-
|
|
2113
|
+
"No alt text or aria-label provided for functional icon. This may cause accessibility issues."
|
|
2052
2114
|
);
|
|
2053
|
-
const n = r ? " (selected)" : "",
|
|
2115
|
+
const n = r ? " (selected)" : "", a = Pt(e) && !i ? "" : i || e, l = o || (a ? `${a}${n}` : n);
|
|
2054
2116
|
return {
|
|
2055
|
-
alt:
|
|
2056
|
-
ariaLabel:
|
|
2117
|
+
alt: a,
|
|
2118
|
+
ariaLabel: l,
|
|
2057
2119
|
ariaHidden: !1
|
|
2058
2120
|
};
|
|
2059
2121
|
}
|
|
2060
|
-
function
|
|
2122
|
+
function Nt(e, t = "polite") {
|
|
2061
2123
|
let s = document.getElementById("screen-reader-announcer");
|
|
2062
2124
|
s ? s.setAttribute("aria-live", t) : (s = document.createElement("div"), s.id = "screen-reader-announcer", s.setAttribute("aria-live", t), s.setAttribute("role", "status"), s.setAttribute("aria-atomic", "true"), s.style.position = "absolute", s.style.width = "1px", s.style.height = "1px", s.style.margin = "-1px", s.style.padding = "0", s.style.overflow = "hidden", s.style.clip = "rect(0, 0, 0, 0)", s.style.whiteSpace = "nowrap", s.style.border = "0", document.body.appendChild(s)), s.textContent = "", setTimeout(() => {
|
|
2063
2125
|
s.textContent = e;
|
|
2064
2126
|
}, 50);
|
|
2065
2127
|
}
|
|
2066
|
-
function
|
|
2128
|
+
function zt(e, t) {
|
|
2067
2129
|
return `${e}: ${t}`;
|
|
2068
2130
|
}
|
|
2069
|
-
var
|
|
2070
|
-
function
|
|
2131
|
+
var $ = /* @__PURE__ */ ((e) => (e.BUTTON = "button", e.CHECKBOX = "checkbox", e.RADIO = "radio", e.RADIOGROUP = "radiogroup", e.SWITCH = "switch", e.TAB = "tab", e.TABLIST = "tablist", e.TABPANEL = "tabpanel", e.MENU = "menu", e.MENUITEM = "menuitem", e.MENUITEMCHECKBOX = "menuitemcheckbox", e.MENUITEMRADIO = "menuitemradio", e.SLIDER = "slider", e.TEXTBOX = "textbox", e.COMBOBOX = "combobox", e.LISTBOX = "listbox", e.OPTION = "option", e.PROGRESSBAR = "progressbar", e.STATUS = "status", e.ALERT = "alert", e.DIALOG = "dialog", e.GROUP = "group", e.REGION = "region", e.NONE = "none", e.PRESENTATION = "presentation", e))($ || {});
|
|
2132
|
+
function T(e) {
|
|
2071
2133
|
const t = {};
|
|
2072
2134
|
e.role !== void 0 && (t.role = e.role);
|
|
2073
2135
|
for (const [s, i] of Object.entries(e)) {
|
|
@@ -2077,52 +2139,34 @@ function P(e) {
|
|
|
2077
2139
|
}
|
|
2078
2140
|
return t;
|
|
2079
2141
|
}
|
|
2080
|
-
function
|
|
2081
|
-
return
|
|
2142
|
+
function Cs(e, t, s) {
|
|
2143
|
+
return T({
|
|
2082
2144
|
role: "button",
|
|
2083
2145
|
ariaLabel: e,
|
|
2084
2146
|
ariaPressed: t,
|
|
2085
2147
|
ariaDisabled: s
|
|
2086
2148
|
});
|
|
2087
2149
|
}
|
|
2088
|
-
function
|
|
2089
|
-
return
|
|
2150
|
+
function oe(e, t, s, i = !1) {
|
|
2151
|
+
return T({
|
|
2090
2152
|
role: i ? "radio" : "checkbox",
|
|
2091
2153
|
ariaLabel: e,
|
|
2092
2154
|
ariaChecked: t,
|
|
2093
2155
|
ariaDisabled: s
|
|
2094
2156
|
});
|
|
2095
2157
|
}
|
|
2096
|
-
var As = Object.defineProperty, _s = Object.getOwnPropertyDescriptor,
|
|
2097
|
-
for (var o = i > 1 ? void 0 : i ? _s(t, s) : t, r = e.length - 1,
|
|
2098
|
-
(
|
|
2158
|
+
var As = Object.defineProperty, _s = Object.getOwnPropertyDescriptor, J = (e, t, s, i) => {
|
|
2159
|
+
for (var o = i > 1 ? void 0 : i ? _s(t, s) : t, r = e.length - 1, n; r >= 0; r--)
|
|
2160
|
+
(n = e[r]) && (o = (i ? n(t, s, o) : n(o)) || o);
|
|
2099
2161
|
return i && o && As(t, s, o), o;
|
|
2100
2162
|
};
|
|
2101
|
-
let
|
|
2163
|
+
let V = class extends m {
|
|
2102
2164
|
constructor() {
|
|
2103
|
-
super(), this.min = 0, this.max = 10, this.minLabel = "Not at all", this.maxLabel = "Extremely", this.thankYouMsg = "Thank you for sharing your feedback!", this.minMaxPosition = "top", this.
|
|
2104
|
-
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.toggleChart());
|
|
2105
|
-
}, this.handleNumberLeave = () => {
|
|
2165
|
+
super(), this.min = 0, this.max = 10, this.minLabel = "Not at all", this.maxLabel = "Extremely", this.thankYouMsg = "Thank you for sharing your feedback!", this.minMaxPosition = "top", this.hoverValue = -1, this.handleNumberLeave = () => {
|
|
2106
2166
|
this.readonly || (this.hoverValue = -1);
|
|
2107
2167
|
}, this.handleKeyDown = (e) => {
|
|
2108
2168
|
this.readonly || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.hoverValue > 0 && this.handleEditNumberClick(this.hoverValue));
|
|
2109
|
-
}, this.widgetType = "nps", this.statsText = "{count} votes", this.labelPosition = "top", this.statsPosition = "bottom";
|
|
2110
|
-
}
|
|
2111
|
-
/**
|
|
2112
|
-
* Initialize mode based on current state
|
|
2113
|
-
*/
|
|
2114
|
-
initializeMode() {
|
|
2115
|
-
if (this.readonly) {
|
|
2116
|
-
this.isEditMode = !1;
|
|
2117
|
-
return;
|
|
2118
|
-
}
|
|
2119
|
-
this.hasUserScore() ? this.isEditMode = !1 : this.isEditMode = !0;
|
|
2120
|
-
}
|
|
2121
|
-
/**
|
|
2122
|
-
* Initialize mode after component is first rendered
|
|
2123
|
-
*/
|
|
2124
|
-
async firstUpdated() {
|
|
2125
|
-
await super.firstUpdated(), this.initializeMode();
|
|
2169
|
+
}, this.widgetType = "nps", this.statsText = "NPS: {nps} ({count} votes)", this.labelPosition = "top", this.statsPosition = "bottom";
|
|
2126
2170
|
}
|
|
2127
2171
|
/**
|
|
2128
2172
|
* Get the current user's NPS score from localStats
|
|
@@ -2130,53 +2174,40 @@ let M = class extends u {
|
|
|
2130
2174
|
getCurrentScore() {
|
|
2131
2175
|
return this.localStats && this.localStats.count > 0 && this.localStats.sum !== void 0 ? Math.round(this.localStats.sum / this.localStats.count) : 0;
|
|
2132
2176
|
}
|
|
2133
|
-
/**
|
|
2134
|
-
* Check if user has made a score
|
|
2135
|
-
*/
|
|
2136
|
-
hasUserScore() {
|
|
2137
|
-
return this.localStats && this.localStats.count > 0;
|
|
2138
|
-
}
|
|
2139
|
-
/**
|
|
2140
|
-
* Check if there are any stats to display
|
|
2141
|
-
*/
|
|
2142
|
-
hasStats() {
|
|
2143
|
-
var e;
|
|
2144
|
-
return (((e = this.stats) == null ? void 0 : e.count) || 0) > 0;
|
|
2145
|
-
}
|
|
2146
2177
|
/**
|
|
2147
2178
|
* Render NPS buttons for edit mode
|
|
2148
2179
|
*/
|
|
2149
2180
|
renderEditNps() {
|
|
2150
|
-
const e = this.getCurrentScore(), t = this.
|
|
2151
|
-
role:
|
|
2181
|
+
const e = this.getCurrentScore(), t = this.hasUserVoted(), s = Array.from({ length: this.max - this.min + 1 }, (n, a) => a + this.min), i = `nps-control-${this.name || this.widgetType}`, o = T({
|
|
2182
|
+
role: $.GROUP,
|
|
2152
2183
|
ariaLabel: this.label || "NPS Rating",
|
|
2153
2184
|
ariaDescribedby: `${i}-description`
|
|
2154
|
-
}), r = s.map((
|
|
2155
|
-
const
|
|
2185
|
+
}), r = s.map((n) => {
|
|
2186
|
+
const a = t && n === Math.round(e), l = {
|
|
2156
2187
|
"nps-button": !0,
|
|
2157
|
-
selected:
|
|
2158
|
-
},
|
|
2159
|
-
return
|
|
2188
|
+
selected: a
|
|
2189
|
+
}, p = Cs(`Rate ${n}`, a, this.readonly);
|
|
2190
|
+
return c`
|
|
2160
2191
|
<button
|
|
2161
|
-
data-testid="nps-button-${
|
|
2162
|
-
class=${
|
|
2163
|
-
@click="${() => this.handleEditNumberClick(
|
|
2164
|
-
@mouseenter="${() => this.handleNumberHover(
|
|
2165
|
-
@focus="${() => this.handleNumberHover(
|
|
2192
|
+
data-testid="nps-button-${n}"
|
|
2193
|
+
class=${y(l)}
|
|
2194
|
+
@click="${() => this.handleEditNumberClick(n)}"
|
|
2195
|
+
@mouseenter="${() => this.handleNumberHover(n)}"
|
|
2196
|
+
@focus="${() => this.handleNumberHover(n)}"
|
|
2166
2197
|
@mouseleave="${this.handleNumberLeave}"
|
|
2167
2198
|
@blur="${this.handleNumberLeave}"
|
|
2168
2199
|
@keydown="${this.handleKeyDown}"
|
|
2169
2200
|
tabindex="${this.readonly ? -1 : 0}"
|
|
2170
2201
|
?disabled="${this.readonly}"
|
|
2171
2202
|
?readonly="${this.readonly}"
|
|
2172
|
-
id="${i}-option-${
|
|
2173
|
-
...=${
|
|
2203
|
+
id="${i}-option-${n}"
|
|
2204
|
+
...=${p}
|
|
2174
2205
|
>
|
|
2175
|
-
${
|
|
2206
|
+
${n}
|
|
2176
2207
|
</button>
|
|
2177
2208
|
`;
|
|
2178
2209
|
});
|
|
2179
|
-
return
|
|
2210
|
+
return c`
|
|
2180
2211
|
<div
|
|
2181
2212
|
class="nps-container"
|
|
2182
2213
|
id="${i}"
|
|
@@ -2198,12 +2229,12 @@ let M = class extends u {
|
|
|
2198
2229
|
"nps-button": !0,
|
|
2199
2230
|
selected: !0,
|
|
2200
2231
|
"view-mode": !0
|
|
2201
|
-
}, i =
|
|
2202
|
-
role:
|
|
2203
|
-
}), o =
|
|
2232
|
+
}, i = T({
|
|
2233
|
+
role: $.PRESENTATION
|
|
2234
|
+
}), o = c`
|
|
2204
2235
|
<button
|
|
2205
2236
|
data-testid="nps-view-display"
|
|
2206
|
-
class=${
|
|
2237
|
+
class=${y(s)}
|
|
2207
2238
|
disabled
|
|
2208
2239
|
readonly
|
|
2209
2240
|
tabindex="-1"
|
|
@@ -2213,92 +2244,87 @@ let M = class extends u {
|
|
|
2213
2244
|
${t}
|
|
2214
2245
|
</button>
|
|
2215
2246
|
`;
|
|
2216
|
-
return
|
|
2247
|
+
return c`<div class="nps-container" data-testid="nps-view-container">${o}</div>`;
|
|
2248
|
+
}
|
|
2249
|
+
/**
|
|
2250
|
+
* Render NPS display for view mode (showing user's own score)
|
|
2251
|
+
*/
|
|
2252
|
+
renderReadonlyNps() {
|
|
2253
|
+
const e = this.formatStatsText("{nps}"), t = {
|
|
2254
|
+
"nps-button": !0,
|
|
2255
|
+
selected: !0,
|
|
2256
|
+
"view-mode": !0
|
|
2257
|
+
}, s = T({
|
|
2258
|
+
role: $.PRESENTATION
|
|
2259
|
+
}), i = c`
|
|
2260
|
+
<button
|
|
2261
|
+
data-testid="nps-view-display"
|
|
2262
|
+
class=${y(t)}
|
|
2263
|
+
disabled
|
|
2264
|
+
readonly
|
|
2265
|
+
tabindex="-1"
|
|
2266
|
+
aria-label="${this.statsText || "NPS"}"
|
|
2267
|
+
...=${s}
|
|
2268
|
+
>
|
|
2269
|
+
${e}
|
|
2270
|
+
</button>
|
|
2271
|
+
`;
|
|
2272
|
+
return c`<div class="nps-container" data-testid="nps-view-container">${i}</div>`;
|
|
2217
2273
|
}
|
|
2218
2274
|
/**
|
|
2219
2275
|
* Render chart for NPS stats
|
|
2220
2276
|
*/
|
|
2221
2277
|
renderChart(e) {
|
|
2222
|
-
var
|
|
2223
|
-
if (e && ["bottom", "top"].includes(this.statsPosition || "") || !e && ["left", "right"].includes(this.statsPosition || "")
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2278
|
+
var a, l;
|
|
2279
|
+
if (!this.shouldShowChart() || e && ["bottom", "top"].includes(this.statsPosition || "") || !e && ["left", "right"].includes(this.statsPosition || ""))
|
|
2280
|
+
return h;
|
|
2281
|
+
const t = Object.values(((a = this.stats) == null ? void 0 : a.breakdown) || {}).reduce(
|
|
2282
|
+
(p, u) => p + u,
|
|
2283
|
+
0
|
|
2284
|
+
), s = Object.entries(((l = this.stats) == null ? void 0 : l.breakdown) || {}).map(
|
|
2285
|
+
([p, u]) => ({
|
|
2286
|
+
label: p,
|
|
2287
|
+
value: u
|
|
2228
2288
|
})
|
|
2229
2289
|
), o = getComputedStyle(this).getPropertyValue("--pc-accent-color").trim() || "#ffc107", r = Ot(s, {
|
|
2230
2290
|
barColor: o,
|
|
2231
|
-
labelFormatter: (
|
|
2232
|
-
valueFormatter: (
|
|
2233
|
-
}),
|
|
2234
|
-
role:
|
|
2291
|
+
labelFormatter: (p) => `${p}`,
|
|
2292
|
+
valueFormatter: (p) => `${t > 0 ? Math.round(p / t * 100) : 0}%`
|
|
2293
|
+
}), n = T({
|
|
2294
|
+
role: $.REGION,
|
|
2235
2295
|
ariaLabel: `Results chart for ${this.label || "NPS Rating"}`
|
|
2236
2296
|
});
|
|
2237
|
-
return
|
|
2297
|
+
return c`
|
|
2238
2298
|
<div
|
|
2239
2299
|
class="pc-stats-chart pc-stats-chart-inline visible"
|
|
2240
2300
|
data-testid="nps-chart"
|
|
2241
|
-
...=${
|
|
2301
|
+
...=${n}
|
|
2242
2302
|
>
|
|
2243
2303
|
<div class="pc-chart-container" data-testid="nps-chart-container">${r}</div>
|
|
2244
2304
|
</div>
|
|
2245
2305
|
`;
|
|
2246
2306
|
}
|
|
2247
|
-
/**
|
|
2248
|
-
* Toggle chart visibility
|
|
2249
|
-
*/
|
|
2250
|
-
toggleChart() {
|
|
2251
|
-
this.isChartVisible = !this.isChartVisible;
|
|
2252
|
-
}
|
|
2253
2307
|
handleNumberHover(e) {
|
|
2254
2308
|
this.readonly || (this.hoverValue = e);
|
|
2255
2309
|
}
|
|
2256
|
-
/**
|
|
2257
|
-
* Render stats text
|
|
2258
|
-
*/
|
|
2259
|
-
renderStatsText() {
|
|
2260
|
-
if (!this.showStats) return d;
|
|
2261
|
-
if (this.statsIsLoading)
|
|
2262
|
-
return l`<span class="pc-stats-text">
|
|
2263
|
-
<img src="${lt}" alt="Loading" class="pc-loading-icon" />
|
|
2264
|
-
</span>`;
|
|
2265
|
-
const e = this.statsText || "{avg} ({count})", t = this.formatStatsText(e), s = !this.readonly && this.showChart && this.hasStats();
|
|
2266
|
-
return l`
|
|
2267
|
-
<span class="pc-stats-text" data-testid="stats-text">
|
|
2268
|
-
${t}
|
|
2269
|
-
${s ? l`
|
|
2270
|
-
<img
|
|
2271
|
-
src="${this.isChartVisible ? Nt : zt}"
|
|
2272
|
-
alt="${this.isChartVisible ? "Hide chart" : "Show chart"}"
|
|
2273
|
-
class="chart-toggle-icon"
|
|
2274
|
-
data-testid="nps-chart-toggle-button"
|
|
2275
|
-
@click="${this.toggleChart}"
|
|
2276
|
-
role="button"
|
|
2277
|
-
tabindex="0"
|
|
2278
|
-
@keydown="${this.handleChartToggleKeyDown}"
|
|
2279
|
-
/>
|
|
2280
|
-
` : d}
|
|
2281
|
-
</span>
|
|
2282
|
-
`;
|
|
2283
|
-
}
|
|
2284
2310
|
/**
|
|
2285
2311
|
* Render add/edit button
|
|
2286
2312
|
*/
|
|
2287
2313
|
renderActionButton() {
|
|
2288
|
-
if (this.readonly || this.isEditMode || this.statsIsLoading) return
|
|
2289
|
-
const e = this.
|
|
2290
|
-
return
|
|
2314
|
+
if (this.readonly || this.isEditMode || this.statsIsLoading) return h;
|
|
2315
|
+
const e = this.hasUserVoted(), t = e ? "Edit rating" : "Add rating";
|
|
2316
|
+
return c`
|
|
2291
2317
|
<div class="action-button-container">
|
|
2292
|
-
${e ?
|
|
2318
|
+
${e ? c`<span class="nps-thank-you-msg" data-testid="nps-thank-you-msg"
|
|
2293
2319
|
>${this.thankYouMsg}</span
|
|
2294
|
-
>` :
|
|
2320
|
+
>` : h}
|
|
2295
2321
|
<button
|
|
2296
2322
|
class="action-btn"
|
|
2297
2323
|
data-testid="nps-action-button"
|
|
2298
2324
|
@click="${this.handleEnterEditMode}"
|
|
2299
2325
|
aria-label="${t}"
|
|
2300
2326
|
>
|
|
2301
|
-
<img src="${
|
|
2327
|
+
<img src="${mt}" alt="${t}" class="icon" />
|
|
2302
2328
|
</button>
|
|
2303
2329
|
</div>
|
|
2304
2330
|
`;
|
|
@@ -2316,13 +2342,13 @@ let M = class extends u {
|
|
|
2316
2342
|
if (this.readonly) return;
|
|
2317
2343
|
this.hoverValue = -1;
|
|
2318
2344
|
const t = this.label || "NPS", s = `Rated ${e} out of ${this.max}`;
|
|
2319
|
-
|
|
2345
|
+
Nt(zt(t, s)), await this.handleChange(e, [String(e)]), this.isEditMode = !1;
|
|
2320
2346
|
}
|
|
2321
2347
|
/**
|
|
2322
2348
|
* Render min/max labels
|
|
2323
2349
|
*/
|
|
2324
2350
|
renderMinMaxLabels() {
|
|
2325
|
-
return
|
|
2351
|
+
return c`
|
|
2326
2352
|
<div class="nps-labels ${this.minMaxPosition}" data-testid="nps-labels">
|
|
2327
2353
|
<span class="nps-label-min" data-testid="nps-min-label">${this.minLabel}</span>
|
|
2328
2354
|
<span class="nps-label-max" data-testid="nps-max-label">${this.maxLabel}</span>
|
|
@@ -2333,13 +2359,19 @@ let M = class extends u {
|
|
|
2333
2359
|
* Renders the main content
|
|
2334
2360
|
*/
|
|
2335
2361
|
renderContent() {
|
|
2336
|
-
return this.isEditMode ?
|
|
2362
|
+
return this.isEditMode ? c`
|
|
2337
2363
|
<div class="pc-section" data-testid="nps-edit-section">
|
|
2338
|
-
${this.minMaxPosition === "top" ? this.renderMinMaxLabels() :
|
|
2364
|
+
${this.minMaxPosition === "top" ? this.renderMinMaxLabels() : h}
|
|
2339
2365
|
${this.renderEditNps()}
|
|
2340
|
-
${this.minMaxPosition === "bottom" ? this.renderMinMaxLabels() :
|
|
2366
|
+
${this.minMaxPosition === "bottom" ? this.renderMinMaxLabels() : h}
|
|
2367
|
+
</div>
|
|
2368
|
+
` : this.readonly ? c`
|
|
2369
|
+
<div class="pc-section" data-testid="nps-view-section">
|
|
2370
|
+
<div class="nps-section" data-testid="nps-section">
|
|
2371
|
+
${this.renderReadonlyNps()} ${this.renderStatsText()}
|
|
2372
|
+
</div>
|
|
2341
2373
|
</div>
|
|
2342
|
-
` :
|
|
2374
|
+
` : c`
|
|
2343
2375
|
<div class="pc-section" data-testid="nps-view-section">
|
|
2344
2376
|
<div class="nps-section" data-testid="nps-section">
|
|
2345
2377
|
${this.renderViewNps()}
|
|
@@ -2351,59 +2383,53 @@ let M = class extends u {
|
|
|
2351
2383
|
render() {
|
|
2352
2384
|
const e = {
|
|
2353
2385
|
[`pc-flex-pos-${this.labelPosition}`]: !0,
|
|
2354
|
-
[`pc-flex-align-${
|
|
2386
|
+
[`pc-flex-align-${N(this.labelPosition, this.labelAlign)}`]: !0,
|
|
2355
2387
|
"edit-mode": this.isEditMode,
|
|
2356
2388
|
"view-mode": !this.isEditMode
|
|
2357
2389
|
}, t = {
|
|
2358
2390
|
nps: !0,
|
|
2359
2391
|
[`pc-flex-pos-${this.statsPosition}`]: !0,
|
|
2360
|
-
[`pc-flex-align-${
|
|
2361
|
-
}, s =
|
|
2362
|
-
role:
|
|
2392
|
+
[`pc-flex-align-${N(this.statsPosition, this.statsAlign)}`]: !0
|
|
2393
|
+
}, s = T({
|
|
2394
|
+
role: $.REGION,
|
|
2363
2395
|
ariaLabel: this.label || "NPS Rating"
|
|
2364
2396
|
});
|
|
2365
|
-
return
|
|
2397
|
+
return c`
|
|
2366
2398
|
<div
|
|
2367
|
-
class="pc-container ${
|
|
2399
|
+
class="pc-container ${y(e)}"
|
|
2368
2400
|
data-testid="nps-container"
|
|
2369
2401
|
...=${s}
|
|
2370
2402
|
>
|
|
2371
2403
|
${this.renderLabel()}
|
|
2372
|
-
<div class="pc-body ${
|
|
2373
|
-
${this.
|
|
2374
|
-
${this.
|
|
2404
|
+
<div class="pc-body ${y(t)}" data-testid="nps-body">
|
|
2405
|
+
${this.readonly ? h : this.renderStatsText()} ${this.renderChart(!1)}
|
|
2406
|
+
${this.renderContent()}
|
|
2375
2407
|
</div>
|
|
2376
|
-
${this.
|
|
2408
|
+
${this.renderChart(!0)}
|
|
2377
2409
|
</div>
|
|
2378
2410
|
`;
|
|
2379
2411
|
}
|
|
2380
2412
|
};
|
|
2381
|
-
|
|
2382
|
-
|
|
2383
|
-
|
|
2384
|
-
],
|
|
2385
|
-
|
|
2386
|
-
|
|
2387
|
-
],
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
],
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
],
|
|
2394
|
-
|
|
2395
|
-
|
|
2396
|
-
],
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
],
|
|
2400
|
-
|
|
2401
|
-
y()
|
|
2402
|
-
], M.prototype, "hoverValue", 2);
|
|
2403
|
-
M = F([
|
|
2404
|
-
q("pc-nps")
|
|
2405
|
-
], M);
|
|
2406
|
-
const Ts = B`
|
|
2413
|
+
V.styles = [...m.styles, Es];
|
|
2414
|
+
J([
|
|
2415
|
+
d({ type: String, attribute: "min-label" })
|
|
2416
|
+
], V.prototype, "minLabel", 2);
|
|
2417
|
+
J([
|
|
2418
|
+
d({ type: String, attribute: "max-label" })
|
|
2419
|
+
], V.prototype, "maxLabel", 2);
|
|
2420
|
+
J([
|
|
2421
|
+
d({ type: String, attribute: "thank-you-msg" })
|
|
2422
|
+
], V.prototype, "thankYouMsg", 2);
|
|
2423
|
+
J([
|
|
2424
|
+
d({ type: String, attribute: "min-max-position" })
|
|
2425
|
+
], V.prototype, "minMaxPosition", 2);
|
|
2426
|
+
J([
|
|
2427
|
+
x()
|
|
2428
|
+
], V.prototype, "hoverValue", 2);
|
|
2429
|
+
V = J([
|
|
2430
|
+
B("pc-nps")
|
|
2431
|
+
], V);
|
|
2432
|
+
const Ts = H`
|
|
2407
2433
|
/* Add responsive sizing with CSS variables */
|
|
2408
2434
|
:host {
|
|
2409
2435
|
--pc-checkbox-size: clamp(1em, calc(0.8em + 0.3vw), 1.4em);
|
|
@@ -2783,12 +2809,12 @@ const Ts = B`
|
|
|
2783
2809
|
gap: 0.5em;
|
|
2784
2810
|
}
|
|
2785
2811
|
`;
|
|
2786
|
-
var Ps = Object.defineProperty,
|
|
2787
|
-
for (var o = i > 1 ? void 0 : i ?
|
|
2788
|
-
(
|
|
2812
|
+
var Ps = Object.defineProperty, Os = Object.getOwnPropertyDescriptor, X = (e, t, s, i) => {
|
|
2813
|
+
for (var o = i > 1 ? void 0 : i ? Os(t, s) : t, r = e.length - 1, n; r >= 0; r--)
|
|
2814
|
+
(n = e[r]) && (o = (i ? n(t, s, o) : n(o)) || o);
|
|
2789
2815
|
return i && o && Ps(t, s, o), o;
|
|
2790
2816
|
};
|
|
2791
|
-
let
|
|
2817
|
+
let C = class extends L {
|
|
2792
2818
|
constructor() {
|
|
2793
2819
|
super(...arguments), this.value = "", this.icon = "", this.tooltip = "", this.disabled = !1, this.selected = !1;
|
|
2794
2820
|
}
|
|
@@ -2804,66 +2830,50 @@ let T = class extends V {
|
|
|
2804
2830
|
}).join("").trim();
|
|
2805
2831
|
}
|
|
2806
2832
|
render() {
|
|
2807
|
-
return
|
|
2833
|
+
return c` <slot></slot> `;
|
|
2808
2834
|
}
|
|
2809
2835
|
};
|
|
2810
|
-
|
|
2836
|
+
C.styles = H`
|
|
2811
2837
|
:host {
|
|
2812
2838
|
display: none;
|
|
2813
2839
|
}
|
|
2814
2840
|
`;
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
],
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
],
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
],
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
],
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
],
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
],
|
|
2833
|
-
var
|
|
2834
|
-
for (var o = i > 1 ? void 0 : i ?
|
|
2835
|
-
(
|
|
2836
|
-
return i && o &&
|
|
2841
|
+
X([
|
|
2842
|
+
d({ type: String, reflect: !0 })
|
|
2843
|
+
], C.prototype, "value", 2);
|
|
2844
|
+
X([
|
|
2845
|
+
d({ type: String })
|
|
2846
|
+
], C.prototype, "icon", 2);
|
|
2847
|
+
X([
|
|
2848
|
+
d({ type: String })
|
|
2849
|
+
], C.prototype, "tooltip", 2);
|
|
2850
|
+
X([
|
|
2851
|
+
d({ type: Boolean, reflect: !0 })
|
|
2852
|
+
], C.prototype, "disabled", 2);
|
|
2853
|
+
X([
|
|
2854
|
+
d({ type: Boolean, reflect: !0 })
|
|
2855
|
+
], C.prototype, "selected", 2);
|
|
2856
|
+
C = X([
|
|
2857
|
+
B("pc-poll-option")
|
|
2858
|
+
], C);
|
|
2859
|
+
var Ms = Object.defineProperty, Ns = Object.getOwnPropertyDescriptor, z = (e, t, s, i) => {
|
|
2860
|
+
for (var o = i > 1 ? void 0 : i ? Ns(t, s) : t, r = e.length - 1, n; r >= 0; r--)
|
|
2861
|
+
(n = e[r]) && (o = (i ? n(t, s, o) : n(o)) || o);
|
|
2862
|
+
return i && o && Ms(t, s, o), o;
|
|
2837
2863
|
};
|
|
2838
|
-
let
|
|
2864
|
+
let A = class extends m {
|
|
2839
2865
|
constructor() {
|
|
2840
|
-
super(), this.options = [], this.multiple = !1, this.buttonRadius = "sm", this.thankYouMsg = "Thank you for your feedback!", this.buttonText = "Submit", this.normalizedOptions = [], this.slotExists = !1, this.
|
|
2866
|
+
super(), this.options = [], this.multiple = !1, this.buttonRadius = "sm", this.thankYouMsg = "Thank you for your feedback!", this.buttonText = "Submit", this.normalizedOptions = [], this.slotExists = !1, this.pendingSelections = [], this.handleEditToggleKeyDown = (e) => {
|
|
2841
2867
|
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleEnterEditMode());
|
|
2842
2868
|
}, this.widgetType = "poll", this.statsText = "{count} votes", this.labelPosition = "top", this.statsPosition = "bottom";
|
|
2843
2869
|
}
|
|
2844
|
-
/**
|
|
2845
|
-
* Initialize mode based on current state (similar to NPS)
|
|
2846
|
-
*/
|
|
2847
|
-
initializeMode() {
|
|
2848
|
-
if (this.readonly) {
|
|
2849
|
-
this.isEditMode = !1;
|
|
2850
|
-
return;
|
|
2851
|
-
}
|
|
2852
|
-
this.hasUserVote() ? this.isEditMode = !1 : this.isEditMode = !0;
|
|
2853
|
-
}
|
|
2854
|
-
/**
|
|
2855
|
-
* Check if user has made a vote
|
|
2856
|
-
*/
|
|
2857
|
-
hasUserVote() {
|
|
2858
|
-
return this.localStats && this.localStats.count > 0;
|
|
2859
|
-
}
|
|
2860
2870
|
/**
|
|
2861
2871
|
* Get slotted pc-poll-option elements
|
|
2862
2872
|
*/
|
|
2863
2873
|
getSlottedOptions() {
|
|
2864
2874
|
var s;
|
|
2865
2875
|
const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
|
|
2866
|
-
return e ? e.assignedElements().filter((i) => i instanceof
|
|
2876
|
+
return e ? e.assignedElements().filter((i) => i instanceof C).map((i) => {
|
|
2867
2877
|
var o, r;
|
|
2868
2878
|
return {
|
|
2869
2879
|
value: i.value || i.labelContent || ((o = i.textContent) == null ? void 0 : o.trim()) || "",
|
|
@@ -2908,9 +2918,9 @@ let C = class extends u {
|
|
|
2908
2918
|
i > -1 ? s.splice(i, 1) : s.push(t), this.pendingSelections = s, this.updateSlottedElementsStatePending();
|
|
2909
2919
|
} else {
|
|
2910
2920
|
const s = Object.keys(this.localStats.breakdown || {}).filter(
|
|
2911
|
-
(
|
|
2912
|
-
var
|
|
2913
|
-
return (((
|
|
2921
|
+
(n) => {
|
|
2922
|
+
var a;
|
|
2923
|
+
return (((a = this.localStats.breakdown) == null ? void 0 : a[n]) || 0) > 0;
|
|
2914
2924
|
}
|
|
2915
2925
|
), i = this.isSelected(e.value);
|
|
2916
2926
|
let o = [];
|
|
@@ -2944,7 +2954,7 @@ let C = class extends u {
|
|
|
2944
2954
|
if (!this.slotExists) return;
|
|
2945
2955
|
const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
|
|
2946
2956
|
if (!e) return;
|
|
2947
|
-
e.assignedElements().filter((i) => i instanceof
|
|
2957
|
+
e.assignedElements().filter((i) => i instanceof C).forEach((i) => {
|
|
2948
2958
|
i.selected = this.isSelected(i.value);
|
|
2949
2959
|
});
|
|
2950
2960
|
}
|
|
@@ -2956,7 +2966,7 @@ let C = class extends u {
|
|
|
2956
2966
|
if (!this.slotExists) return;
|
|
2957
2967
|
const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
|
|
2958
2968
|
if (!e) return;
|
|
2959
|
-
e.assignedElements().filter((i) => i instanceof
|
|
2969
|
+
e.assignedElements().filter((i) => i instanceof C).forEach((i) => {
|
|
2960
2970
|
i.selected = this.pendingSelections.includes(i.value);
|
|
2961
2971
|
});
|
|
2962
2972
|
}
|
|
@@ -2965,25 +2975,24 @@ let C = class extends u {
|
|
|
2965
2975
|
*/
|
|
2966
2976
|
renderOptionIcon(e, t) {
|
|
2967
2977
|
if (!e) return "";
|
|
2968
|
-
const s =
|
|
2978
|
+
const s = Mt.DECORATIVE, i = (t == null ? void 0 : t.label) || "", o = t ? this.isSelected(t.value) : !1, r = Ee(e, {
|
|
2969
2979
|
type: s,
|
|
2970
|
-
alt:
|
|
2971
|
-
isSelected:
|
|
2972
|
-
componentName: i
|
|
2980
|
+
alt: i,
|
|
2981
|
+
isSelected: o
|
|
2973
2982
|
});
|
|
2974
|
-
return
|
|
2983
|
+
return ge(e) ? c`<span
|
|
2975
2984
|
class="poll-option-icon"
|
|
2976
|
-
aria-hidden="${
|
|
2985
|
+
aria-hidden="${r.ariaHidden ? "true" : "false"}"
|
|
2977
2986
|
>${e}</span
|
|
2978
|
-
>` :
|
|
2987
|
+
>` : Pt(e) ? c`<img
|
|
2979
2988
|
src="${e}"
|
|
2980
|
-
alt="${
|
|
2989
|
+
alt="${r.alt}"
|
|
2981
2990
|
class="poll-option-icon-img"
|
|
2982
|
-
aria-label="${
|
|
2983
|
-
aria-hidden="${
|
|
2984
|
-
/>` :
|
|
2991
|
+
aria-label="${r.ariaLabel || h}"
|
|
2992
|
+
aria-hidden="${r.ariaHidden ? "true" : "false"}"
|
|
2993
|
+
/>` : c`<span
|
|
2985
2994
|
class="poll-option-icon"
|
|
2986
|
-
aria-hidden="${
|
|
2995
|
+
aria-hidden="${r.ariaHidden ? "true" : "false"}"
|
|
2987
2996
|
>${e}</span
|
|
2988
2997
|
>`;
|
|
2989
2998
|
}
|
|
@@ -2991,8 +3000,8 @@ let C = class extends u {
|
|
|
2991
3000
|
* Renders the selection indicator (checkbox or radio button) with proper ARIA roles
|
|
2992
3001
|
*/
|
|
2993
3002
|
renderSelectionIndicator() {
|
|
2994
|
-
const e = this.multiple ?
|
|
2995
|
-
return this.multiple ?
|
|
3003
|
+
const e = this.multiple ? $.CHECKBOX : $.RADIO;
|
|
3004
|
+
return this.multiple ? c`<span class="poll-checkbox" role="${e}"></span>` : c`<span class="poll-radio" role="${e}"></span>`;
|
|
2996
3005
|
}
|
|
2997
3006
|
/**
|
|
2998
3007
|
* Render a poll option using standardized ARIA attributes
|
|
@@ -3002,22 +3011,22 @@ let C = class extends u {
|
|
|
3002
3011
|
"poll-option": !0,
|
|
3003
3012
|
selected: s,
|
|
3004
3013
|
disabled: e.disabled || !1
|
|
3005
|
-
}, o = t + 1, r = `poll-${this.widgetType}-${o}`,
|
|
3014
|
+
}, o = t + 1, r = `poll-${this.widgetType}-${o}`, n = oe(
|
|
3006
3015
|
e.label,
|
|
3007
3016
|
s,
|
|
3008
3017
|
e.disabled || this.readonly,
|
|
3009
3018
|
!this.multiple
|
|
3010
3019
|
// isRadio = true when multiple = false
|
|
3011
3020
|
);
|
|
3012
|
-
return
|
|
3021
|
+
return c`
|
|
3013
3022
|
<button
|
|
3014
3023
|
data-testid="poll-option-${t}"
|
|
3015
|
-
class="${
|
|
3024
|
+
class="${y(i)}"
|
|
3016
3025
|
@click="${() => this.handleClick(e)}"
|
|
3017
3026
|
?disabled="${e.disabled || this.readonly}"
|
|
3018
3027
|
id="${r}-option-${t}"
|
|
3019
3028
|
title="${e.tooltip || ""}"
|
|
3020
|
-
...=${
|
|
3029
|
+
...=${n}
|
|
3021
3030
|
>
|
|
3022
3031
|
${this.renderSelectionIndicator()} ${this.renderOptionIcon(e.icon, e)}
|
|
3023
3032
|
<span class="poll-option-label">
|
|
@@ -3030,9 +3039,9 @@ let C = class extends u {
|
|
|
3030
3039
|
* Render submit button for multiple selection
|
|
3031
3040
|
*/
|
|
3032
3041
|
renderSubmitButton() {
|
|
3033
|
-
if (!this.multiple || !this.isEditMode) return
|
|
3042
|
+
if (!this.multiple || !this.isEditMode) return h;
|
|
3034
3043
|
const e = this.pendingSelections.length === 0;
|
|
3035
|
-
return
|
|
3044
|
+
return c`
|
|
3036
3045
|
<button
|
|
3037
3046
|
class="poll-submit-button"
|
|
3038
3047
|
data-testid="poll-submit-button"
|
|
@@ -3048,11 +3057,11 @@ let C = class extends u {
|
|
|
3048
3057
|
* Render poll options with proper grouping role
|
|
3049
3058
|
*/
|
|
3050
3059
|
renderPollOptions() {
|
|
3051
|
-
const e = this.multiple ?
|
|
3060
|
+
const e = this.multiple ? $.GROUP : $.RADIOGROUP, t = this.label || this.name || "Options", s = T({
|
|
3052
3061
|
role: e,
|
|
3053
3062
|
ariaLabel: t
|
|
3054
3063
|
});
|
|
3055
|
-
return
|
|
3064
|
+
return c`
|
|
3056
3065
|
<div
|
|
3057
3066
|
class="poll-container"
|
|
3058
3067
|
data-testid="poll-container"
|
|
@@ -3068,9 +3077,9 @@ let C = class extends u {
|
|
|
3068
3077
|
* Render reusable edit toggle icon
|
|
3069
3078
|
*/
|
|
3070
3079
|
renderEditToggleIcon(e = "edit-toggle-button") {
|
|
3071
|
-
return
|
|
3080
|
+
return c`
|
|
3072
3081
|
<img
|
|
3073
|
-
src="${
|
|
3082
|
+
src="${mt}"
|
|
3074
3083
|
alt="Edit vote"
|
|
3075
3084
|
class="edit-toggle-icon"
|
|
3076
3085
|
data-testid="${e}"
|
|
@@ -3095,78 +3104,47 @@ let C = class extends u {
|
|
|
3095
3104
|
this.pendingSelections = [...e], this.updateSlottedElementsStatePending();
|
|
3096
3105
|
}
|
|
3097
3106
|
}
|
|
3098
|
-
/**
|
|
3099
|
-
* Renders stats with ARIA live updates for screen readers
|
|
3100
|
-
*/
|
|
3101
|
-
renderStats() {
|
|
3102
|
-
if (!this.statsText) return d;
|
|
3103
|
-
if (this.statsIsLoading) {
|
|
3104
|
-
const s = P({
|
|
3105
|
-
ariaLabel: "Loading poll statistics",
|
|
3106
|
-
ariaBusy: !0
|
|
3107
|
-
});
|
|
3108
|
-
return l`
|
|
3109
|
-
<span data-testid="poll-stats-loading" class="pc-stats-text" ...=${s}>
|
|
3110
|
-
<img
|
|
3111
|
-
src="${lt}"
|
|
3112
|
-
alt="Loading poll statistics"
|
|
3113
|
-
class="pc-loading-icon"
|
|
3114
|
-
aria-hidden="true"
|
|
3115
|
-
data-testid="poll-stats-loading-icon"
|
|
3116
|
-
/>
|
|
3117
|
-
</span>
|
|
3118
|
-
`;
|
|
3119
|
-
}
|
|
3120
|
-
const e = this.formatStatsText(this.statsText), t = !this.readonly && !this.isEditMode && this.showChart;
|
|
3121
|
-
return l`
|
|
3122
|
-
<span
|
|
3123
|
-
data-testid="poll-stats"
|
|
3124
|
-
class="pc-stats-text"
|
|
3125
|
-
role="${w.STATUS}"
|
|
3126
|
-
aria-live="polite"
|
|
3127
|
-
>
|
|
3128
|
-
${e} ${t ? this.renderEditToggleIcon("poll-edit-toggle-button") : d}
|
|
3129
|
-
</span>
|
|
3130
|
-
`;
|
|
3131
|
-
}
|
|
3132
3107
|
/**
|
|
3133
3108
|
* Render LinkedIn-style horizontal chart
|
|
3134
3109
|
*/
|
|
3135
|
-
|
|
3110
|
+
renderChart() {
|
|
3136
3111
|
var s;
|
|
3112
|
+
if (!this.shouldShowChart()) return h;
|
|
3137
3113
|
if (!((s = this.stats) != null && s.breakdown) || Object.keys(this.stats.breakdown).length === 0)
|
|
3138
|
-
return
|
|
3114
|
+
return c`<div class="pc-section">
|
|
3139
3115
|
<div class="poll-linkedin-chart" data-testid="poll-linkedin-chart-empty">
|
|
3140
3116
|
<p class="no-stats" data-testid="poll-no-stats">No poll data available</p>
|
|
3141
3117
|
</div>
|
|
3142
|
-
`;
|
|
3118
|
+
</div> `;
|
|
3143
3119
|
const e = Object.entries(this.stats.breakdown).map(([i, o]) => {
|
|
3144
3120
|
let r = i;
|
|
3145
|
-
const
|
|
3146
|
-
return
|
|
3121
|
+
const n = this.normalizedOptions.find((a) => a.value === i);
|
|
3122
|
+
return n && (r = n.label), { label: r, count: o, value: i };
|
|
3147
3123
|
}), t = e.reduce((i, o) => i + o.count, 0);
|
|
3148
|
-
return
|
|
3149
|
-
<div class="
|
|
3150
|
-
|
|
3124
|
+
return c`
|
|
3125
|
+
<div class="pc-section">
|
|
3126
|
+
<div class="poll-linkedin-chart" data-testid="poll-linkedin-chart">
|
|
3127
|
+
${e.map((i, o) => {
|
|
3151
3128
|
const r = t > 0 ? Math.round(i.count / t * 100) : 0;
|
|
3152
|
-
return
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3129
|
+
return c`
|
|
3130
|
+
<div class="chart-item" data-testid="poll-chart-item-${o}">
|
|
3131
|
+
<div class="chart-bar-wrapper">
|
|
3132
|
+
<div
|
|
3133
|
+
class="chart-bar"
|
|
3134
|
+
style="width: ${r}%"
|
|
3135
|
+
data-testid="poll-chart-bar-${o}"
|
|
3136
|
+
></div>
|
|
3137
|
+
<span class="chart-label" data-testid="poll-chart-label-${o}">
|
|
3138
|
+
${i.label}
|
|
3139
|
+
</span>
|
|
3140
|
+
</div>
|
|
3141
|
+
<span class="chart-percentage" data-testid="poll-chart-percentage-${o}">
|
|
3142
|
+
${r}%
|
|
3162
3143
|
</span>
|
|
3163
3144
|
</div>
|
|
3164
|
-
|
|
3165
|
-
${r}%
|
|
3166
|
-
</span>
|
|
3167
|
-
</div>
|
|
3168
|
-
`;
|
|
3145
|
+
`;
|
|
3169
3146
|
})}
|
|
3147
|
+
</div>
|
|
3170
3148
|
</div>
|
|
3171
3149
|
`;
|
|
3172
3150
|
}
|
|
@@ -3174,7 +3152,7 @@ let C = class extends u {
|
|
|
3174
3152
|
* Render thank you message with edit button
|
|
3175
3153
|
*/
|
|
3176
3154
|
renderThankYouMessage() {
|
|
3177
|
-
return
|
|
3155
|
+
return c`
|
|
3178
3156
|
<div class="poll-thank-you" data-testid="poll-thank-you">
|
|
3179
3157
|
<span class="thank-you-msg" data-testid="poll-thank-you-msg">
|
|
3180
3158
|
${this.thankYouMsg}${this.renderEditToggleIcon("poll-thank-you-edit-button")}
|
|
@@ -3186,11 +3164,11 @@ let C = class extends u {
|
|
|
3186
3164
|
* Render poll options with previous selections but disabled (for view mode)
|
|
3187
3165
|
*/
|
|
3188
3166
|
renderDisabledPollOptions() {
|
|
3189
|
-
const e = this.multiple ?
|
|
3167
|
+
const e = this.multiple ? $.GROUP : $.RADIOGROUP, t = this.label || this.name || "Options", s = T({
|
|
3190
3168
|
role: e,
|
|
3191
3169
|
ariaLabel: t
|
|
3192
3170
|
});
|
|
3193
|
-
return
|
|
3171
|
+
return c`
|
|
3194
3172
|
<div
|
|
3195
3173
|
class="poll-container poll-container--disabled"
|
|
3196
3174
|
data-testid="poll-container-disabled"
|
|
@@ -3198,13 +3176,13 @@ let C = class extends u {
|
|
|
3198
3176
|
...=${s}
|
|
3199
3177
|
>
|
|
3200
3178
|
${this.normalizedOptions.map((i, o) => {
|
|
3201
|
-
var
|
|
3202
|
-
const r = (((
|
|
3179
|
+
var u;
|
|
3180
|
+
const r = (((u = this.localStats.breakdown) == null ? void 0 : u[i.value]) || 0) > 0, n = {
|
|
3203
3181
|
"poll-option": !0,
|
|
3204
3182
|
"poll-option--disabled": !0,
|
|
3205
3183
|
selected: r,
|
|
3206
3184
|
disabled: !0
|
|
3207
|
-
},
|
|
3185
|
+
}, a = o + 1, l = `poll-${this.widgetType}-disabled-${a}`, p = oe(
|
|
3208
3186
|
i.label,
|
|
3209
3187
|
r,
|
|
3210
3188
|
!0,
|
|
@@ -3212,14 +3190,14 @@ let C = class extends u {
|
|
|
3212
3190
|
!this.multiple
|
|
3213
3191
|
// isRadio = true when multiple = false
|
|
3214
3192
|
);
|
|
3215
|
-
return
|
|
3193
|
+
return c`
|
|
3216
3194
|
<button
|
|
3217
3195
|
data-testid="poll-option-disabled-${o}"
|
|
3218
|
-
class="${
|
|
3196
|
+
class="${y(n)}"
|
|
3219
3197
|
disabled
|
|
3220
|
-
id="${
|
|
3198
|
+
id="${l}-option-${o}"
|
|
3221
3199
|
title="${i.tooltip || ""}"
|
|
3222
|
-
...=${
|
|
3200
|
+
...=${p}
|
|
3223
3201
|
>
|
|
3224
3202
|
${this.renderSelectionIndicator()} ${this.renderOptionIcon(i.icon, i)}
|
|
3225
3203
|
<span class="poll-option-label">
|
|
@@ -3235,14 +3213,14 @@ let C = class extends u {
|
|
|
3235
3213
|
* Renders the main content based on mode
|
|
3236
3214
|
*/
|
|
3237
3215
|
renderContent() {
|
|
3238
|
-
return this.isEditMode ?
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
</div>
|
|
3216
|
+
return this.isEditMode ? c`<div class="pc-section">${this.renderPollOptions()}</div>` : this.hasUserVoted() ? c`
|
|
3217
|
+
<div class="pc-section pc-thank-you-section-with-overlay">
|
|
3218
|
+
${this.renderDisabledPollOptions()}
|
|
3219
|
+
<div class="pc-thank-you-overlay" data-testid="poll-thank-you-overlay">
|
|
3220
|
+
${this.renderThankYouMessage()}
|
|
3244
3221
|
</div>
|
|
3245
|
-
|
|
3222
|
+
</div>
|
|
3223
|
+
` : c`<div class="pc-section">${this.renderDisabledPollOptions()}</div>`;
|
|
3246
3224
|
}
|
|
3247
3225
|
/**
|
|
3248
3226
|
* When attributes change, update the options and selection state
|
|
@@ -3251,8 +3229,8 @@ let C = class extends u {
|
|
|
3251
3229
|
if (super.attributeChangedCallback(e, t, s), e === "options" && s)
|
|
3252
3230
|
try {
|
|
3253
3231
|
this.options = JSON.parse(s), this.updateNormalizedOptions();
|
|
3254
|
-
} catch
|
|
3255
|
-
|
|
3232
|
+
} catch {
|
|
3233
|
+
this.options = s.split(",").map((o) => o.trim());
|
|
3256
3234
|
}
|
|
3257
3235
|
}
|
|
3258
3236
|
/**
|
|
@@ -3260,7 +3238,7 @@ let C = class extends u {
|
|
|
3260
3238
|
*/
|
|
3261
3239
|
async firstUpdated() {
|
|
3262
3240
|
var t;
|
|
3263
|
-
await super.firstUpdated(), this.updateNormalizedOptions(), this.
|
|
3241
|
+
await super.firstUpdated(), this.updateNormalizedOptions(), this.updateSlottedElementsState();
|
|
3264
3242
|
const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot");
|
|
3265
3243
|
e && e.addEventListener("slotchange", () => {
|
|
3266
3244
|
this.updateNormalizedOptions(), this.updateSlottedElementsState();
|
|
@@ -3272,68 +3250,64 @@ let C = class extends u {
|
|
|
3272
3250
|
announceSelectionChange(e, t, s) {
|
|
3273
3251
|
const i = `Poll for: ${e.label}`;
|
|
3274
3252
|
let o = "";
|
|
3275
|
-
this.multiple ? o = (t == null ? void 0 : t.includes(e.value)) || !1 ? `${e.label} selected` : `${e.label} unselected` : o = t && t.length > 0 ? `${e.label} selected` : "Selection cleared",
|
|
3253
|
+
this.multiple ? o = (t == null ? void 0 : t.includes(e.value)) || !1 ? `${e.label} selected` : `${e.label} unselected` : o = t && t.length > 0 ? `${e.label} selected` : "Selection cleared", Nt(zt(i, o));
|
|
3276
3254
|
}
|
|
3277
3255
|
render() {
|
|
3278
3256
|
const e = {
|
|
3279
3257
|
[`pc-flex-pos-${this.labelPosition}`]: !0,
|
|
3280
|
-
[`pc-flex-align-${
|
|
3258
|
+
[`pc-flex-align-${N(this.labelPosition, this.labelAlign)}`]: !0
|
|
3281
3259
|
}, t = "bottom", s = {
|
|
3282
3260
|
poll: !0,
|
|
3283
3261
|
[`pc-flex-pos-${t}`]: !0,
|
|
3284
|
-
[`pc-flex-align-${
|
|
3285
|
-
}, i =
|
|
3286
|
-
role:
|
|
3262
|
+
[`pc-flex-align-${N(t, this.statsAlign)}`]: !0
|
|
3263
|
+
}, i = T({
|
|
3264
|
+
role: $.REGION,
|
|
3287
3265
|
ariaLabel: this.label || this.name || "Poll"
|
|
3288
3266
|
});
|
|
3289
|
-
return
|
|
3267
|
+
return c`
|
|
3290
3268
|
<div
|
|
3291
|
-
class="pc-container ${
|
|
3269
|
+
class="pc-container ${y(e)}"
|
|
3292
3270
|
data-testid="poll-container"
|
|
3293
3271
|
...=${i}
|
|
3294
3272
|
>
|
|
3295
3273
|
${this.renderLabel()}
|
|
3296
|
-
<div class="pc-body ${
|
|
3297
|
-
${this.renderContent()}
|
|
3298
|
-
${this.showStats && !this.isEditMode ? this.renderStats() : d}
|
|
3274
|
+
<div class="pc-body ${y(s)}" data-testid="poll-body">
|
|
3275
|
+
${this.renderContent()} ${this.renderChart()} ${this.renderStatsText()}
|
|
3299
3276
|
</div>
|
|
3300
3277
|
<slot @slotchange=${() => this.updateNormalizedOptions()}></slot>
|
|
3301
3278
|
</div>
|
|
3302
3279
|
`;
|
|
3303
3280
|
}
|
|
3304
3281
|
};
|
|
3305
|
-
|
|
3306
|
-
z([
|
|
3307
|
-
p({ type: Array })
|
|
3308
|
-
], C.prototype, "options", 2);
|
|
3282
|
+
A.styles = [...m.styles, Ts];
|
|
3309
3283
|
z([
|
|
3310
|
-
|
|
3311
|
-
],
|
|
3284
|
+
d({ type: Array })
|
|
3285
|
+
], A.prototype, "options", 2);
|
|
3312
3286
|
z([
|
|
3313
|
-
|
|
3314
|
-
],
|
|
3287
|
+
d({ type: Boolean, reflect: !0 })
|
|
3288
|
+
], A.prototype, "multiple", 2);
|
|
3315
3289
|
z([
|
|
3316
|
-
|
|
3317
|
-
],
|
|
3290
|
+
d({ type: String, attribute: "button-radius" })
|
|
3291
|
+
], A.prototype, "buttonRadius", 2);
|
|
3318
3292
|
z([
|
|
3319
|
-
|
|
3320
|
-
],
|
|
3293
|
+
d({ type: String, attribute: "thank-you-msg" })
|
|
3294
|
+
], A.prototype, "thankYouMsg", 2);
|
|
3321
3295
|
z([
|
|
3322
|
-
|
|
3323
|
-
],
|
|
3296
|
+
d({ type: String, attribute: "button-text" })
|
|
3297
|
+
], A.prototype, "buttonText", 2);
|
|
3324
3298
|
z([
|
|
3325
|
-
|
|
3326
|
-
],
|
|
3299
|
+
x()
|
|
3300
|
+
], A.prototype, "normalizedOptions", 2);
|
|
3327
3301
|
z([
|
|
3328
|
-
|
|
3329
|
-
],
|
|
3302
|
+
x()
|
|
3303
|
+
], A.prototype, "slotExists", 2);
|
|
3330
3304
|
z([
|
|
3331
|
-
|
|
3332
|
-
],
|
|
3333
|
-
|
|
3334
|
-
|
|
3335
|
-
],
|
|
3336
|
-
const
|
|
3305
|
+
x()
|
|
3306
|
+
], A.prototype, "pendingSelections", 2);
|
|
3307
|
+
A = z([
|
|
3308
|
+
B("pc-poll")
|
|
3309
|
+
], A);
|
|
3310
|
+
const zs = H`
|
|
3337
3311
|
.pc-container {
|
|
3338
3312
|
gap: 0.6em;
|
|
3339
3313
|
}
|
|
@@ -3508,14 +3482,14 @@ const Ns = B`
|
|
|
3508
3482
|
}
|
|
3509
3483
|
}
|
|
3510
3484
|
`;
|
|
3511
|
-
var Rs = Object.defineProperty, Is = Object.getOwnPropertyDescriptor,
|
|
3512
|
-
for (var o = i > 1 ? void 0 : i ? Is(t, s) : t, r = e.length - 1,
|
|
3513
|
-
(
|
|
3485
|
+
var Rs = Object.defineProperty, Is = Object.getOwnPropertyDescriptor, O = (e, t, s, i) => {
|
|
3486
|
+
for (var o = i > 1 ? void 0 : i ? Is(t, s) : t, r = e.length - 1, n; r >= 0; r--)
|
|
3487
|
+
(n = e[r]) && (o = (i ? n(t, s, o) : n(o)) || o);
|
|
3514
3488
|
return i && o && Rs(t, s, o), o;
|
|
3515
3489
|
};
|
|
3516
|
-
let
|
|
3490
|
+
let k = class extends m {
|
|
3517
3491
|
constructor() {
|
|
3518
|
-
super(), this.placeholder = "", this.rows = 3, this.buttonRadius = "sm", this.buttonText = "Submit", this.thankYouMsg = "Thank you for your feedback!", this.textValue = "", this.
|
|
3492
|
+
super(), this.placeholder = "", this.rows = 3, this.buttonRadius = "sm", this.buttonText = "Submit", this.thankYouMsg = "Thank you for your feedback!", this.textValue = "", this.submittedText = "", this.handleEditToggleKeyDown = (e) => {
|
|
3519
3493
|
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleEnterEditMode());
|
|
3520
3494
|
}, this.widgetType = "text", this.statsText = "{count} feedback received", this.labelPosition = "top";
|
|
3521
3495
|
}
|
|
@@ -3527,15 +3501,15 @@ let $ = class extends u {
|
|
|
3527
3501
|
this.isEditMode = !1;
|
|
3528
3502
|
return;
|
|
3529
3503
|
}
|
|
3530
|
-
this.localStats.count > 0 ?
|
|
3504
|
+
this.localStats.count > 0 ? this.isEditMode = !1 : this.isEditMode = !0;
|
|
3531
3505
|
}
|
|
3532
3506
|
/**
|
|
3533
3507
|
* Renders the edit toggle icon
|
|
3534
3508
|
*/
|
|
3535
3509
|
renderEditToggleIcon(e = "text-edit-toggle-button") {
|
|
3536
|
-
return
|
|
3510
|
+
return c`
|
|
3537
3511
|
<img
|
|
3538
|
-
src="${
|
|
3512
|
+
src="${mt}"
|
|
3539
3513
|
alt="Edit feedback"
|
|
3540
3514
|
class="edit-toggle-icon"
|
|
3541
3515
|
data-testid="${e}"
|
|
@@ -3552,12 +3526,6 @@ let $ = class extends u {
|
|
|
3552
3526
|
handleEnterEditMode() {
|
|
3553
3527
|
this.isEditMode = !0, this.submittedText && (this.textValue = this.submittedText);
|
|
3554
3528
|
}
|
|
3555
|
-
/**
|
|
3556
|
-
* Check if user has submitted text
|
|
3557
|
-
*/
|
|
3558
|
-
hasSubmitted() {
|
|
3559
|
-
return this.hasUserSubmitted;
|
|
3560
|
-
}
|
|
3561
3529
|
/**
|
|
3562
3530
|
* Handles input events from the textarea
|
|
3563
3531
|
*/
|
|
@@ -3571,20 +3539,19 @@ let $ = class extends u {
|
|
|
3571
3539
|
*/
|
|
3572
3540
|
async handleSubmit() {
|
|
3573
3541
|
const e = this.textValue.trim();
|
|
3574
|
-
!e || this.readonly || !this.isEditMode || this.minlength && e.length < this.minlength || (this.submittedText = e, await this.handleChange(1, [this.submittedText]), this.
|
|
3542
|
+
!e || this.readonly || !this.isEditMode || this.minlength && e.length < this.minlength || (this.submittedText = e, await this.handleChange(1, [this.submittedText]), this.textValue = "", this.isEditMode = !1);
|
|
3575
3543
|
}
|
|
3576
3544
|
/**
|
|
3577
3545
|
* Renders the stats label with count of responses
|
|
3578
3546
|
*/
|
|
3579
3547
|
renderStatsLabel() {
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
if (!this.showStats || !this.statsText || !((s = this.stats) != null && s.count)) return e;
|
|
3548
|
+
const e = c`<span></span>`;
|
|
3549
|
+
if (!this.shouldShowStatsText()) return e;
|
|
3583
3550
|
if (this.statsIsLoading)
|
|
3584
|
-
return
|
|
3551
|
+
return c`
|
|
3585
3552
|
<span data-testid="text-stats-loading" class="pc-stats-text">
|
|
3586
3553
|
<img
|
|
3587
|
-
src="${
|
|
3554
|
+
src="${ue}"
|
|
3588
3555
|
alt="Loading"
|
|
3589
3556
|
class="pc-loading-icon"
|
|
3590
3557
|
data-testid="text-stats-loading-icon"
|
|
@@ -3592,15 +3559,15 @@ let $ = class extends u {
|
|
|
3592
3559
|
</span>
|
|
3593
3560
|
`;
|
|
3594
3561
|
const t = this.formatStatsText(this.statsText);
|
|
3595
|
-
return
|
|
3562
|
+
return c` <span data-testid="text-stats" class="pc-stats-text"> ${t} </span> `;
|
|
3596
3563
|
}
|
|
3597
3564
|
/**
|
|
3598
3565
|
* Renders the submit button
|
|
3599
3566
|
*/
|
|
3600
3567
|
renderSubmitButton() {
|
|
3601
|
-
if (this.readonly || this.
|
|
3568
|
+
if (this.readonly || this.hasUserVoted() && !this.isEditMode) return h;
|
|
3602
3569
|
const e = this.textValue.trim(), t = !this.minlength || e.length >= this.minlength, s = !e || !t;
|
|
3603
|
-
return
|
|
3570
|
+
return c`
|
|
3604
3571
|
<button
|
|
3605
3572
|
class="action-button"
|
|
3606
3573
|
@click="${this.handleSubmit}"
|
|
@@ -3617,7 +3584,7 @@ let $ = class extends u {
|
|
|
3617
3584
|
* Renders the thank you message with edit button (new overlay style)
|
|
3618
3585
|
*/
|
|
3619
3586
|
renderThankYouMessage() {
|
|
3620
|
-
return
|
|
3587
|
+
return c`
|
|
3621
3588
|
<div class="text-thank-you" data-testid="text-thank-you">
|
|
3622
3589
|
<span class="thank-you-msg" data-testid="text-thank-you-msg">
|
|
3623
3590
|
${this.thankYouMsg}${this.renderEditToggleIcon("text-thank-you-edit-button")}
|
|
@@ -3629,7 +3596,7 @@ let $ = class extends u {
|
|
|
3629
3596
|
* Renders the textarea input for collecting user feedback (edit mode)
|
|
3630
3597
|
*/
|
|
3631
3598
|
renderTextarea() {
|
|
3632
|
-
return
|
|
3599
|
+
return c`
|
|
3633
3600
|
<div class="text-input-container" data-testid="text-input-container">
|
|
3634
3601
|
<textarea
|
|
3635
3602
|
class="text-input"
|
|
@@ -3642,7 +3609,7 @@ let $ = class extends u {
|
|
|
3642
3609
|
@input="${this.handleInput}"
|
|
3643
3610
|
style="min-height: ${this.rows * 1.4 + 1.4}em;"
|
|
3644
3611
|
></textarea>
|
|
3645
|
-
${this.maxlength ?
|
|
3612
|
+
${this.maxlength ? c`
|
|
3646
3613
|
<div class="character-count" data-testid="text-character-count">
|
|
3647
3614
|
${this.textValue.length}/${this.maxlength}
|
|
3648
3615
|
</div>
|
|
@@ -3658,7 +3625,7 @@ let $ = class extends u {
|
|
|
3658
3625
|
*/
|
|
3659
3626
|
renderDisabledTextarea() {
|
|
3660
3627
|
const e = this.submittedText;
|
|
3661
|
-
return
|
|
3628
|
+
return c`
|
|
3662
3629
|
<div
|
|
3663
3630
|
class="text-input-container text-input-container--disabled"
|
|
3664
3631
|
data-testid="text-input-container-disabled"
|
|
@@ -3674,7 +3641,7 @@ let $ = class extends u {
|
|
|
3674
3641
|
disabled
|
|
3675
3642
|
style="min-height: ${this.rows * 1.4 + 1.4}em;"
|
|
3676
3643
|
></textarea>
|
|
3677
|
-
${this.maxlength ?
|
|
3644
|
+
${this.maxlength ? c`
|
|
3678
3645
|
<div class="character-count" data-testid="text-character-count-disabled">
|
|
3679
3646
|
${e.length}/${this.maxlength}
|
|
3680
3647
|
</div>
|
|
@@ -3689,14 +3656,14 @@ let $ = class extends u {
|
|
|
3689
3656
|
* Renders the main content based on mode
|
|
3690
3657
|
*/
|
|
3691
3658
|
renderContent() {
|
|
3692
|
-
return this.isEditMode ?
|
|
3659
|
+
return this.isEditMode ? c`<div class="pc-section">${this.renderTextarea()}</div>` : this.hasUserVoted() ? c`
|
|
3693
3660
|
<div class="pc-section pc-thank-you-section-with-overlay">
|
|
3694
3661
|
${this.renderDisabledTextarea()}
|
|
3695
3662
|
<div class="pc-thank-you-overlay" data-testid="text-thank-you-overlay">
|
|
3696
3663
|
${this.renderThankYouMessage()}
|
|
3697
3664
|
</div>
|
|
3698
3665
|
</div>
|
|
3699
|
-
` :
|
|
3666
|
+
` : c`<div class="pc-section">${this.renderDisabledTextarea()}</div>`;
|
|
3700
3667
|
}
|
|
3701
3668
|
/**
|
|
3702
3669
|
* Initialize component after first render
|
|
@@ -3710,54 +3677,48 @@ let $ = class extends u {
|
|
|
3710
3677
|
render() {
|
|
3711
3678
|
const e = {
|
|
3712
3679
|
[`pc-flex-pos-${this.labelPosition}`]: !0,
|
|
3713
|
-
[`pc-flex-align-${
|
|
3680
|
+
[`pc-flex-align-${N(this.labelPosition, this.labelAlign)}`]: !0
|
|
3714
3681
|
};
|
|
3715
|
-
return
|
|
3716
|
-
<div class="pc-container ${
|
|
3682
|
+
return c`
|
|
3683
|
+
<div class="pc-container ${y(e)}" data-testid="text-container">
|
|
3717
3684
|
${this.renderLabel()}
|
|
3718
3685
|
<div class="pc-body" data-testid="text-body">${this.renderContent()}</div>
|
|
3719
3686
|
</div>
|
|
3720
3687
|
`;
|
|
3721
3688
|
}
|
|
3722
3689
|
};
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
|
|
3726
|
-
],
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
],
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
],
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
],
|
|
3736
|
-
|
|
3737
|
-
|
|
3738
|
-
],
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
],
|
|
3742
|
-
|
|
3743
|
-
|
|
3744
|
-
],
|
|
3745
|
-
|
|
3746
|
-
|
|
3747
|
-
],
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
-
],
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
],
|
|
3754
|
-
|
|
3755
|
-
y()
|
|
3756
|
-
], $.prototype, "hasUserSubmitted", 2);
|
|
3757
|
-
$ = A([
|
|
3758
|
-
q("pc-text")
|
|
3759
|
-
], $);
|
|
3760
|
-
const Us = B`
|
|
3690
|
+
k.styles = [...m.styles, zs];
|
|
3691
|
+
O([
|
|
3692
|
+
d({ type: String })
|
|
3693
|
+
], k.prototype, "placeholder", 2);
|
|
3694
|
+
O([
|
|
3695
|
+
d({ type: Number })
|
|
3696
|
+
], k.prototype, "maxlength", 2);
|
|
3697
|
+
O([
|
|
3698
|
+
d({ type: Number })
|
|
3699
|
+
], k.prototype, "minlength", 2);
|
|
3700
|
+
O([
|
|
3701
|
+
d({ type: Number, attribute: "rows" })
|
|
3702
|
+
], k.prototype, "rows", 2);
|
|
3703
|
+
O([
|
|
3704
|
+
d({ type: String, attribute: "button-radius" })
|
|
3705
|
+
], k.prototype, "buttonRadius", 2);
|
|
3706
|
+
O([
|
|
3707
|
+
d({ type: String, attribute: "button-text" })
|
|
3708
|
+
], k.prototype, "buttonText", 2);
|
|
3709
|
+
O([
|
|
3710
|
+
d({ type: String, attribute: "thank-you-msg" })
|
|
3711
|
+
], k.prototype, "thankYouMsg", 2);
|
|
3712
|
+
O([
|
|
3713
|
+
x()
|
|
3714
|
+
], k.prototype, "textValue", 2);
|
|
3715
|
+
O([
|
|
3716
|
+
x()
|
|
3717
|
+
], k.prototype, "submittedText", 2);
|
|
3718
|
+
k = O([
|
|
3719
|
+
B("pc-text")
|
|
3720
|
+
], k);
|
|
3721
|
+
const Us = H`
|
|
3761
3722
|
/* Adjust stats text for reactions */
|
|
3762
3723
|
.pc-stats-text {
|
|
3763
3724
|
font-size: var(--pc-font-size-small, 0.8em);
|
|
@@ -3821,6 +3782,7 @@ const Us = B`
|
|
|
3821
3782
|
|
|
3822
3783
|
.reaction-btn.readonly {
|
|
3823
3784
|
cursor: not-allowed;
|
|
3785
|
+
color: light-dark(rgba(16, 16, 16, 0.9), rgba(245, 245, 245, 0.9));
|
|
3824
3786
|
}
|
|
3825
3787
|
|
|
3826
3788
|
.reaction-btn:focus-visible {
|
|
@@ -3979,7 +3941,7 @@ const Us = B`
|
|
|
3979
3941
|
}
|
|
3980
3942
|
|
|
3981
3943
|
/* Media queries handled by base component */
|
|
3982
|
-
`,
|
|
3944
|
+
`, re = {
|
|
3983
3945
|
// Faces
|
|
3984
3946
|
smile: "😊",
|
|
3985
3947
|
laugh: "😄",
|
|
@@ -4122,19 +4084,19 @@ const Us = B`
|
|
|
4122
4084
|
hiking: "🥾",
|
|
4123
4085
|
yoga: "🧘"
|
|
4124
4086
|
};
|
|
4125
|
-
function
|
|
4087
|
+
function js(e) {
|
|
4126
4088
|
let t = "❓", s = !1;
|
|
4127
|
-
return e ? e in
|
|
4089
|
+
return e ? e in re ? t = re[e] : ge(e) ? t = e : Pt(e) ? (s = !0, t = e) : /^\w+@\w+$/.test(e) ? t = e : e.endsWith(".svg") ? (t = `https://cdn.jsdelivr.net/npm/@mdi/svg@7.4.47/svg/${e}`, s = !0) : t = e : t = "❓", {
|
|
4128
4090
|
icon: t,
|
|
4129
4091
|
isRemoteImage: s
|
|
4130
4092
|
};
|
|
4131
4093
|
}
|
|
4132
|
-
var
|
|
4133
|
-
for (var o = i > 1 ? void 0 : i ? Ds(t, s) : t, r = e.length - 1,
|
|
4134
|
-
(
|
|
4135
|
-
return i && o &&
|
|
4094
|
+
var Ls = Object.defineProperty, Ds = Object.getOwnPropertyDescriptor, Q = (e, t, s, i) => {
|
|
4095
|
+
for (var o = i > 1 ? void 0 : i ? Ds(t, s) : t, r = e.length - 1, n; r >= 0; r--)
|
|
4096
|
+
(n = e[r]) && (o = (i ? n(t, s, o) : n(o)) || o);
|
|
4097
|
+
return i && o && Ls(t, s, o), o;
|
|
4136
4098
|
};
|
|
4137
|
-
let
|
|
4099
|
+
let P = class extends L {
|
|
4138
4100
|
constructor() {
|
|
4139
4101
|
super(...arguments), this.name = "", this.icon = "", this.tooltip = "", this.disabled = !1, this.selected = !1;
|
|
4140
4102
|
}
|
|
@@ -4150,50 +4112,45 @@ let O = class extends V {
|
|
|
4150
4112
|
}).join("").trim();
|
|
4151
4113
|
}
|
|
4152
4114
|
render() {
|
|
4153
|
-
return
|
|
4115
|
+
return c` <slot></slot> `;
|
|
4154
4116
|
}
|
|
4155
4117
|
};
|
|
4156
|
-
|
|
4118
|
+
P.styles = H`
|
|
4157
4119
|
:host {
|
|
4158
4120
|
display: none;
|
|
4159
4121
|
}
|
|
4160
4122
|
`;
|
|
4161
|
-
|
|
4162
|
-
|
|
4163
|
-
],
|
|
4164
|
-
|
|
4165
|
-
|
|
4166
|
-
],
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
],
|
|
4170
|
-
|
|
4171
|
-
|
|
4172
|
-
],
|
|
4173
|
-
|
|
4174
|
-
|
|
4175
|
-
],
|
|
4176
|
-
|
|
4177
|
-
|
|
4178
|
-
],
|
|
4123
|
+
Q([
|
|
4124
|
+
d({ type: String, reflect: !0 })
|
|
4125
|
+
], P.prototype, "name", 2);
|
|
4126
|
+
Q([
|
|
4127
|
+
d({ type: String })
|
|
4128
|
+
], P.prototype, "icon", 2);
|
|
4129
|
+
Q([
|
|
4130
|
+
d({ type: String })
|
|
4131
|
+
], P.prototype, "tooltip", 2);
|
|
4132
|
+
Q([
|
|
4133
|
+
d({ type: Boolean, reflect: !0 })
|
|
4134
|
+
], P.prototype, "disabled", 2);
|
|
4135
|
+
Q([
|
|
4136
|
+
d({ type: Boolean, reflect: !0 })
|
|
4137
|
+
], P.prototype, "selected", 2);
|
|
4138
|
+
P = Q([
|
|
4139
|
+
B("pc-reaction-icon")
|
|
4140
|
+
], P);
|
|
4179
4141
|
const Vs = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23434343'%3e%3cpath%20d='M480-480Zm0%20400q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q43%200%2083%208.5t77%2024.5v90q-35-20-75.5-31.5T480-800q-133%200-226.5%2093.5T160-480q0%20133%2093.5%20226.5T480-160q133%200%20226.5-93.5T800-480q0-32-6.5-62T776-600h86q9%2029%2013.5%2058.5T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm320-600v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM620-520q25%200%2042.5-17.5T680-580q0-25-17.5-42.5T620-640q-25%200-42.5%2017.5T560-580q0%2025%2017.5%2042.5T620-520Zm-280%200q25%200%2042.5-17.5T400-580q0-25-17.5-42.5T340-640q-25%200-42.5%2017.5T280-580q0%2025%2017.5%2042.5T340-520Zm140%20260q68%200%20123.5-38.5T684-400H276q25%2063%2080.5%20101.5T480-260Z'/%3e%3c/svg%3e";
|
|
4180
|
-
var Hs = Object.defineProperty, Bs = Object.getOwnPropertyDescriptor,
|
|
4181
|
-
for (var o = i > 1 ? void 0 : i ? Bs(t, s) : t, r = e.length - 1,
|
|
4182
|
-
(
|
|
4142
|
+
var Hs = Object.defineProperty, Bs = Object.getOwnPropertyDescriptor, R = (e, t, s, i) => {
|
|
4143
|
+
for (var o = i > 1 ? void 0 : i ? Bs(t, s) : t, r = e.length - 1, n; r >= 0; r--)
|
|
4144
|
+
(n = e[r]) && (o = (i ? n(t, s, o) : n(o)) || o);
|
|
4183
4145
|
return i && o && Hs(t, s, o), o;
|
|
4184
4146
|
};
|
|
4185
|
-
let
|
|
4147
|
+
let _ = class extends m {
|
|
4186
4148
|
constructor() {
|
|
4187
|
-
super(), this.options = [], this.multiple = !1, this.compact = !1, this.popupPosition = "auto", this.buttonRadius = "999px", this.normalizedReactions = [], this.slotExists = !1, this.isPopoverVisible = !1, this.
|
|
4149
|
+
super(), this.options = [], this.multiple = !1, this.compact = !1, this.popupPosition = "auto", this.buttonRadius = "999px", this.normalizedReactions = [], this.slotExists = !1, this.isPopoverVisible = !1, this.handleClickOutside = (e) => {
|
|
4188
4150
|
var o, r;
|
|
4189
4151
|
const t = e.target, s = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".popover"), i = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".trigger-btn");
|
|
4190
4152
|
s && !s.contains(t) && !(i != null && i.contains(t)) && (this.isPopoverVisible = !1);
|
|
4191
|
-
}, this.
|
|
4192
|
-
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.toggleChart());
|
|
4193
|
-
}, this.widgetType = "reaction", this.statsText = "{count} reactions", this.labelPosition = "top", this.statsPosition = "right";
|
|
4194
|
-
}
|
|
4195
|
-
get componentName() {
|
|
4196
|
-
return this.label ? `Reactions for: ${this.label}` : "Reactions";
|
|
4153
|
+
}, this.widgetType = "reaction", this.statsText = "{count} votes", this.labelPosition = "top", this.statsPosition = "right", this.isEditMode = !this.readonly;
|
|
4197
4154
|
}
|
|
4198
4155
|
/**
|
|
4199
4156
|
* Get slotted pc-reaction-icon elements
|
|
@@ -4201,7 +4158,7 @@ let E = class extends u {
|
|
|
4201
4158
|
getSlottedReactions() {
|
|
4202
4159
|
var s;
|
|
4203
4160
|
const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
|
|
4204
|
-
return e ? e.assignedElements().filter((i) => i instanceof
|
|
4161
|
+
return e ? e.assignedElements().filter((i) => i instanceof P).map((i) => ({
|
|
4205
4162
|
name: i.name || i.labelContent || i.icon,
|
|
4206
4163
|
icon: i.icon,
|
|
4207
4164
|
tooltip: i.tooltip,
|
|
@@ -4253,8 +4210,8 @@ let E = class extends u {
|
|
|
4253
4210
|
let s = [];
|
|
4254
4211
|
const i = Object.keys(this.localStats.breakdown || {}).filter(
|
|
4255
4212
|
(r) => {
|
|
4256
|
-
var
|
|
4257
|
-
return (((
|
|
4213
|
+
var n;
|
|
4214
|
+
return (((n = this.localStats.breakdown) == null ? void 0 : n[r]) || 0) > 0;
|
|
4258
4215
|
}
|
|
4259
4216
|
);
|
|
4260
4217
|
this.multiple ? t ? s = i.filter((r) => r !== e.name) : s = [...i, e.name] : t ? s = [] : s = [e.name], this.updateSlottedElementsState(), this.compact && (this.isPopoverVisible = !1), this.announceReactionChange(e, !t);
|
|
@@ -4269,7 +4226,7 @@ let E = class extends u {
|
|
|
4269
4226
|
if (!this.slotExists) return;
|
|
4270
4227
|
const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
|
|
4271
4228
|
if (!e) return;
|
|
4272
|
-
e.assignedElements().filter((i) => i instanceof
|
|
4229
|
+
e.assignedElements().filter((i) => i instanceof P).forEach((i) => {
|
|
4273
4230
|
i.selected = this.isSelected(i.name);
|
|
4274
4231
|
});
|
|
4275
4232
|
}
|
|
@@ -4283,20 +4240,19 @@ let E = class extends u {
|
|
|
4283
4240
|
* Renders the icon for a reaction
|
|
4284
4241
|
*/
|
|
4285
4242
|
renderReactionIcon(e, t) {
|
|
4286
|
-
const { icon: s, isRemoteImage: i } =
|
|
4243
|
+
const { icon: s, isRemoteImage: i } = js(e), o = Mt.FUNCTIONAL, r = t.tooltip || `${t.name} reaction`, n = Ee(s, {
|
|
4287
4244
|
type: o,
|
|
4288
|
-
alt:
|
|
4289
|
-
ariaLabel:
|
|
4290
|
-
isSelected: this.isSelected(t.name)
|
|
4291
|
-
componentName: r
|
|
4245
|
+
alt: r,
|
|
4246
|
+
ariaLabel: r,
|
|
4247
|
+
isSelected: this.isSelected(t.name)
|
|
4292
4248
|
});
|
|
4293
|
-
return i ?
|
|
4249
|
+
return i ? c`<img
|
|
4294
4250
|
class="icon-img"
|
|
4295
4251
|
src="${s}"
|
|
4296
4252
|
alt="${n.alt}"
|
|
4297
|
-
aria-label="${n.ariaLabel ||
|
|
4253
|
+
aria-label="${n.ariaLabel || h}"
|
|
4298
4254
|
aria-hidden="${n.ariaHidden}"
|
|
4299
|
-
/>` :
|
|
4255
|
+
/>` : c`<span class="icon" aria-hidden="${n.ariaHidden}"
|
|
4300
4256
|
>${s}</span
|
|
4301
4257
|
>`;
|
|
4302
4258
|
}
|
|
@@ -4310,9 +4266,9 @@ let E = class extends u {
|
|
|
4310
4266
|
selected: s,
|
|
4311
4267
|
readonly: this.readonly
|
|
4312
4268
|
}, r = `${e.tooltip || e.name} reaction${s ? ", selected" : ""}${t ? `, ${i} votes` : ""}`;
|
|
4313
|
-
return
|
|
4269
|
+
return c`
|
|
4314
4270
|
<button
|
|
4315
|
-
class="${
|
|
4271
|
+
class="${y(o)}"
|
|
4316
4272
|
@click="${() => this.handleReactionClick(e)}"
|
|
4317
4273
|
?disabled="${this.readonly || e.disabled}"
|
|
4318
4274
|
aria-pressed="${s}"
|
|
@@ -4320,7 +4276,7 @@ let E = class extends u {
|
|
|
4320
4276
|
title="${e.tooltip || ""}"
|
|
4321
4277
|
>
|
|
4322
4278
|
${this.renderReactionIcon(e.icon, e)}
|
|
4323
|
-
${t ?
|
|
4279
|
+
${t ? c`<span class="count-label">${i}</span>` : h}
|
|
4324
4280
|
</button>
|
|
4325
4281
|
`;
|
|
4326
4282
|
}
|
|
@@ -4328,7 +4284,7 @@ let E = class extends u {
|
|
|
4328
4284
|
* Render the trigger button for compact mode
|
|
4329
4285
|
*/
|
|
4330
4286
|
renderTriggerButton() {
|
|
4331
|
-
return
|
|
4287
|
+
return c`
|
|
4332
4288
|
<button
|
|
4333
4289
|
class="trigger-btn"
|
|
4334
4290
|
@click="${this.handleTriggerClick}"
|
|
@@ -4345,17 +4301,17 @@ let E = class extends u {
|
|
|
4345
4301
|
* Render the popover for compact mode
|
|
4346
4302
|
*/
|
|
4347
4303
|
renderPopover() {
|
|
4348
|
-
if (!this.isPopoverVisible || !this.compact) return
|
|
4304
|
+
if (!this.isPopoverVisible || !this.compact) return h;
|
|
4349
4305
|
const e = {
|
|
4350
4306
|
popover: !0,
|
|
4351
4307
|
top: this.popupPosition === "top" || this.popupPosition === "auto" && this.shouldShowPopoverOnTop(),
|
|
4352
4308
|
bottom: this.popupPosition === "bottom" || this.popupPosition === "auto" && !this.shouldShowPopoverOnTop()
|
|
4353
4309
|
};
|
|
4354
|
-
return
|
|
4355
|
-
<div class="${
|
|
4310
|
+
return c`
|
|
4311
|
+
<div class="${y(e)}" role="menu">
|
|
4356
4312
|
<div class="popover-content">
|
|
4357
4313
|
${this.normalizedReactions.map(
|
|
4358
|
-
(t) =>
|
|
4314
|
+
(t) => c`
|
|
4359
4315
|
<button
|
|
4360
4316
|
class="popover-btn"
|
|
4361
4317
|
@click="${() => this.handleReactionClick(t)}"
|
|
@@ -4387,7 +4343,7 @@ let E = class extends u {
|
|
|
4387
4343
|
* Render reactions based on mode
|
|
4388
4344
|
*/
|
|
4389
4345
|
renderReactions() {
|
|
4390
|
-
if (this.normalizedReactions.length === 0) return
|
|
4346
|
+
if (this.normalizedReactions.length === 0) return h;
|
|
4391
4347
|
const e = {
|
|
4392
4348
|
reaction: !0,
|
|
4393
4349
|
expand: !this.compact,
|
|
@@ -4395,22 +4351,22 @@ let E = class extends u {
|
|
|
4395
4351
|
};
|
|
4396
4352
|
if (this.compact) {
|
|
4397
4353
|
const t = this.getActiveReactions();
|
|
4398
|
-
return
|
|
4399
|
-
<div class="${
|
|
4354
|
+
return c`
|
|
4355
|
+
<div class="${y(e)}">
|
|
4400
4356
|
${this.renderTriggerButton()}
|
|
4401
|
-
${t.length > 0 ?
|
|
4357
|
+
${t.length > 0 ? c`
|
|
4402
4358
|
<div class="reaction-list">
|
|
4403
4359
|
${t.map(
|
|
4404
4360
|
(s) => this.renderReactionButton(s, this.showCounts)
|
|
4405
4361
|
)}
|
|
4406
4362
|
</div>
|
|
4407
|
-
` :
|
|
4363
|
+
` : h}
|
|
4408
4364
|
${this.renderPopover()}
|
|
4409
4365
|
</div>
|
|
4410
4366
|
`;
|
|
4411
4367
|
} else
|
|
4412
|
-
return
|
|
4413
|
-
<div class="${
|
|
4368
|
+
return c`
|
|
4369
|
+
<div class="${y(e)}">
|
|
4414
4370
|
<div class="reaction-list">
|
|
4415
4371
|
${this.normalizedReactions.map(
|
|
4416
4372
|
(t) => this.renderReactionButton(t, this.showCounts)
|
|
@@ -4423,71 +4379,33 @@ let E = class extends u {
|
|
|
4423
4379
|
* Render chart for reaction stats
|
|
4424
4380
|
*/
|
|
4425
4381
|
renderChart(e) {
|
|
4426
|
-
var a;
|
|
4427
|
-
if (e && ["bottom", "top"].includes(this.statsPosition || "") || !e && ["left", "right"].includes(this.statsPosition || "")
|
|
4428
|
-
|
|
4429
|
-
|
|
4430
|
-
|
|
4382
|
+
var n, a;
|
|
4383
|
+
if (!this.shouldShowChart() || e && ["bottom", "top"].includes(this.statsPosition || "") || !e && ["left", "right"].includes(this.statsPosition || ""))
|
|
4384
|
+
return h;
|
|
4385
|
+
const t = Object.values(((n = this.stats) == null ? void 0 : n.breakdown) || {}).reduce(
|
|
4386
|
+
(l, p) => l + p,
|
|
4387
|
+
0
|
|
4388
|
+
), s = Object.entries(((a = this.stats) == null ? void 0 : a.breakdown) || {}).map(
|
|
4389
|
+
([l, p]) => {
|
|
4390
|
+
const u = this.normalizedReactions.find((b) => b.name === l);
|
|
4431
4391
|
return {
|
|
4432
4392
|
label: "",
|
|
4433
4393
|
// do not show label
|
|
4434
|
-
value:
|
|
4435
|
-
icon:
|
|
4394
|
+
value: p,
|
|
4395
|
+
icon: u && this.renderReactionIcon((u == null ? void 0 : u.icon) || "", u ?? {}) || ""
|
|
4436
4396
|
};
|
|
4437
4397
|
}
|
|
4438
4398
|
), o = getComputedStyle(this).getPropertyValue("--pc-accent-color").trim() || "#ffc107", r = Ot(s, {
|
|
4439
4399
|
barColor: o,
|
|
4440
|
-
labelFormatter: (
|
|
4441
|
-
valueFormatter: (
|
|
4400
|
+
labelFormatter: (l) => `${l}`,
|
|
4401
|
+
valueFormatter: (l) => `${t > 0 ? Math.round(l / t * 100) : 0}%`
|
|
4442
4402
|
});
|
|
4443
|
-
return
|
|
4403
|
+
return c`
|
|
4444
4404
|
<div class="pc-stats-chart pc-stats-chart-inline visible" data-testid="reaction-chart">
|
|
4445
4405
|
<div class="pc-chart-container" data-testid="reaction-chart-container">${r}</div>
|
|
4446
4406
|
</div>
|
|
4447
4407
|
`;
|
|
4448
4408
|
}
|
|
4449
|
-
/**
|
|
4450
|
-
* Toggle chart visibility
|
|
4451
|
-
*/
|
|
4452
|
-
toggleChart() {
|
|
4453
|
-
this.isChartVisible = !this.isChartVisible;
|
|
4454
|
-
}
|
|
4455
|
-
/**
|
|
4456
|
-
* Check if there are any stats to display
|
|
4457
|
-
*/
|
|
4458
|
-
hasStats() {
|
|
4459
|
-
var e, t;
|
|
4460
|
-
return (((e = this.stats) == null ? void 0 : e.count) || 0) > 0 || (((t = this.localStats) == null ? void 0 : t.count) || 0) > 0;
|
|
4461
|
-
}
|
|
4462
|
-
/**
|
|
4463
|
-
* Render stats similar to other components
|
|
4464
|
-
*/
|
|
4465
|
-
renderStats() {
|
|
4466
|
-
if (!this.showStats || !this.statsText) return d;
|
|
4467
|
-
if (this.statsIsLoading)
|
|
4468
|
-
return l`<span class="pc-stats-text" data-testid="stats-text">
|
|
4469
|
-
<img src="${lt}" alt="Loading" class="pc-loading-icon" />
|
|
4470
|
-
</span>`;
|
|
4471
|
-
if (!this.stats) return "";
|
|
4472
|
-
const e = this.formatStatsText(this.statsText), t = !this.readonly && this.showChart && this.hasStats();
|
|
4473
|
-
return l`
|
|
4474
|
-
<span class="pc-stats-text" data-testid="stats-text">
|
|
4475
|
-
${e}
|
|
4476
|
-
${t ? l`
|
|
4477
|
-
<img
|
|
4478
|
-
src="${this.isChartVisible ? Nt : zt}"
|
|
4479
|
-
alt="${this.isChartVisible ? "Hide chart" : "Show chart"}"
|
|
4480
|
-
class="chart-toggle-icon"
|
|
4481
|
-
data-testid="reaction-chart-toggle-button"
|
|
4482
|
-
@click="${this.toggleChart}"
|
|
4483
|
-
role="button"
|
|
4484
|
-
tabindex="0"
|
|
4485
|
-
@keydown="${this.handleChartToggleKeyDown}"
|
|
4486
|
-
/>
|
|
4487
|
-
` : d}
|
|
4488
|
-
</span>
|
|
4489
|
-
`;
|
|
4490
|
-
}
|
|
4491
4409
|
/**
|
|
4492
4410
|
* When attributes change, update the reactions
|
|
4493
4411
|
*/
|
|
@@ -4522,22 +4440,22 @@ let E = class extends u {
|
|
|
4522
4440
|
* Announce reaction changes to screen readers
|
|
4523
4441
|
*/
|
|
4524
4442
|
announceReactionChange(e, t) {
|
|
4525
|
-
const s = this.
|
|
4526
|
-
|
|
4443
|
+
const s = this.label ? `Reactions for: ${this.label}` : "Reactions", i = t ? `Added ${e.name} reaction` : `Removed ${e.name} reaction`;
|
|
4444
|
+
Nt(zt(s, i));
|
|
4527
4445
|
}
|
|
4528
4446
|
render() {
|
|
4529
4447
|
const e = {
|
|
4530
4448
|
[`pc-flex-pos-${this.labelPosition}`]: !0,
|
|
4531
|
-
[`pc-flex-align-${
|
|
4449
|
+
[`pc-flex-align-${N(this.labelPosition, this.labelAlign)}`]: !0
|
|
4532
4450
|
}, t = {
|
|
4533
4451
|
[`pc-flex-pos-${this.statsPosition}`]: !0,
|
|
4534
|
-
[`pc-flex-align-${
|
|
4452
|
+
[`pc-flex-align-${N(this.statsPosition, this.statsAlign)}`]: !0
|
|
4535
4453
|
};
|
|
4536
|
-
return
|
|
4537
|
-
<div class="pc-container ${
|
|
4454
|
+
return c`
|
|
4455
|
+
<div class="pc-container ${y(e)}" data-testid="reaction-container">
|
|
4538
4456
|
${this.renderLabel()}
|
|
4539
|
-
<div class="pc-body ${
|
|
4540
|
-
${this.
|
|
4457
|
+
<div class="pc-body ${y(t)}" data-testid="reaction-body">
|
|
4458
|
+
${this.renderChart(!1)} ${this.renderStatsText()} ${this.renderReactions()}
|
|
4541
4459
|
</div>
|
|
4542
4460
|
${this.renderChart(!0)}
|
|
4543
4461
|
<slot @slotchange=${() => this.updateNormalizedReactions()}></slot>
|
|
@@ -4545,38 +4463,35 @@ let E = class extends u {
|
|
|
4545
4463
|
`;
|
|
4546
4464
|
}
|
|
4547
4465
|
};
|
|
4548
|
-
|
|
4549
|
-
|
|
4550
|
-
|
|
4551
|
-
],
|
|
4552
|
-
|
|
4553
|
-
|
|
4554
|
-
],
|
|
4555
|
-
|
|
4556
|
-
|
|
4557
|
-
],
|
|
4558
|
-
|
|
4559
|
-
|
|
4560
|
-
],
|
|
4561
|
-
|
|
4562
|
-
|
|
4563
|
-
],
|
|
4564
|
-
|
|
4565
|
-
|
|
4566
|
-
],
|
|
4567
|
-
|
|
4568
|
-
|
|
4569
|
-
],
|
|
4570
|
-
|
|
4571
|
-
|
|
4572
|
-
],
|
|
4573
|
-
|
|
4574
|
-
|
|
4575
|
-
],
|
|
4576
|
-
|
|
4577
|
-
q("pc-reaction")
|
|
4578
|
-
], E);
|
|
4579
|
-
const qs = B`
|
|
4466
|
+
_.styles = [...m.styles, Us];
|
|
4467
|
+
R([
|
|
4468
|
+
d({ type: Array })
|
|
4469
|
+
], _.prototype, "options", 2);
|
|
4470
|
+
R([
|
|
4471
|
+
d({ type: Boolean, reflect: !0 })
|
|
4472
|
+
], _.prototype, "multiple", 2);
|
|
4473
|
+
R([
|
|
4474
|
+
d({ type: Boolean, reflect: !0 })
|
|
4475
|
+
], _.prototype, "compact", 2);
|
|
4476
|
+
R([
|
|
4477
|
+
d({ type: String })
|
|
4478
|
+
], _.prototype, "popupPosition", 2);
|
|
4479
|
+
R([
|
|
4480
|
+
d({ type: String, attribute: "button-radius" })
|
|
4481
|
+
], _.prototype, "buttonRadius", 2);
|
|
4482
|
+
R([
|
|
4483
|
+
x()
|
|
4484
|
+
], _.prototype, "normalizedReactions", 2);
|
|
4485
|
+
R([
|
|
4486
|
+
x()
|
|
4487
|
+
], _.prototype, "slotExists", 2);
|
|
4488
|
+
R([
|
|
4489
|
+
x()
|
|
4490
|
+
], _.prototype, "isPopoverVisible", 2);
|
|
4491
|
+
_ = R([
|
|
4492
|
+
B("pc-reaction")
|
|
4493
|
+
], _);
|
|
4494
|
+
const qs = H`
|
|
4580
4495
|
/* Base variables */
|
|
4581
4496
|
:host {
|
|
4582
4497
|
--pc-stars-star-size: clamp(1.2em, calc(1.2em + 0.3vw), 2em);
|
|
@@ -4611,7 +4526,7 @@ const qs = B`
|
|
|
4611
4526
|
/* Stars base styles */
|
|
4612
4527
|
.stars {
|
|
4613
4528
|
display: flex;
|
|
4614
|
-
gap: 0.
|
|
4529
|
+
gap: 0.3em;
|
|
4615
4530
|
transition: var(--pc-stars-transition);
|
|
4616
4531
|
line-height: 1.1;
|
|
4617
4532
|
}
|
|
@@ -4897,7 +4812,7 @@ const qs = B`
|
|
|
4897
4812
|
}
|
|
4898
4813
|
|
|
4899
4814
|
.stars {
|
|
4900
|
-
gap: 0.
|
|
4815
|
+
gap: 0.4em;
|
|
4901
4816
|
}
|
|
4902
4817
|
|
|
4903
4818
|
.view-controls {
|
|
@@ -4933,10 +4848,10 @@ const qs = B`
|
|
|
4933
4848
|
* Copyright 2018 Google LLC
|
|
4934
4849
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
4935
4850
|
*/
|
|
4936
|
-
const
|
|
4851
|
+
const Ce = "important", Fs = " !" + Ce, Ys = Se(class extends ke {
|
|
4937
4852
|
constructor(e) {
|
|
4938
4853
|
var t;
|
|
4939
|
-
if (super(e), e.type !==
|
|
4854
|
+
if (super(e), e.type !== we.ATTRIBUTE || e.name !== "style" || ((t = e.strings) == null ? void 0 : t.length) > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
|
|
4940
4855
|
}
|
|
4941
4856
|
render(e) {
|
|
4942
4857
|
return Object.keys(e).reduce((t, s) => {
|
|
@@ -4953,20 +4868,20 @@ const _e = "important", Fs = " !" + _e, Ks = Ce(class extends Ee {
|
|
|
4953
4868
|
if (o != null) {
|
|
4954
4869
|
this.ft.add(i);
|
|
4955
4870
|
const r = typeof o == "string" && o.endsWith(Fs);
|
|
4956
|
-
i.includes("-") || r ? s.setProperty(i, r ? o.slice(0, -11) : o, r ?
|
|
4871
|
+
i.includes("-") || r ? s.setProperty(i, r ? o.slice(0, -11) : o, r ? Ce : "") : s[i] = o;
|
|
4957
4872
|
}
|
|
4958
4873
|
}
|
|
4959
|
-
return
|
|
4874
|
+
return D;
|
|
4960
4875
|
}
|
|
4961
4876
|
});
|
|
4962
|
-
var
|
|
4963
|
-
for (var o = i > 1 ? void 0 : i ? Gs(t, s) : t, r = e.length - 1,
|
|
4964
|
-
(
|
|
4965
|
-
return i && o &&
|
|
4877
|
+
var Ks = Object.defineProperty, Gs = Object.getOwnPropertyDescriptor, at = (e, t, s, i) => {
|
|
4878
|
+
for (var o = i > 1 ? void 0 : i ? Gs(t, s) : t, r = e.length - 1, n; r >= 0; r--)
|
|
4879
|
+
(n = e[r]) && (o = (i ? n(t, s, o) : n(o)) || o);
|
|
4880
|
+
return i && o && Ks(t, s, o), o;
|
|
4966
4881
|
};
|
|
4967
|
-
let
|
|
4882
|
+
let G = class extends m {
|
|
4968
4883
|
constructor() {
|
|
4969
|
-
super(), this.numStars = 5, this.defaultMode = "view", this.
|
|
4884
|
+
super(), this.numStars = 5, this.defaultMode = "view", this.hoverValue = 0, this.editValue = 0, this.handleEditStarLeave = () => {
|
|
4970
4885
|
this.hoverValue = 0;
|
|
4971
4886
|
}, this.handleEditKeyDown = (e) => {
|
|
4972
4887
|
if (e.key === "Enter" || e.key === " ") {
|
|
@@ -4974,81 +4889,35 @@ let U = class extends u {
|
|
|
4974
4889
|
const t = e.target, s = parseInt(t.dataset.star || "0");
|
|
4975
4890
|
s > 0 && this.handleEditStarClick(s);
|
|
4976
4891
|
}
|
|
4977
|
-
}, this.handleChartToggleKeyDown = (e) => {
|
|
4978
|
-
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.toggleChart());
|
|
4979
4892
|
}, this.widgetType = "stars", this.statsText = "Average {avg} ({count} votes)", this.labelPosition = "top", this.statsPosition = "bottom", this.buttonRadius = "pill";
|
|
4980
4893
|
}
|
|
4981
|
-
/**
|
|
4982
|
-
* Initialize mode based on current state
|
|
4983
|
-
*/
|
|
4984
|
-
initializeMode() {
|
|
4985
|
-
if (this.readonly) {
|
|
4986
|
-
this.isEditMode = !1;
|
|
4987
|
-
return;
|
|
4988
|
-
}
|
|
4989
|
-
this.defaultMode === "edit" && !this.hasUserStars() ? (this.isEditMode = !0, this.editValue = 0) : this.isEditMode = !1;
|
|
4990
|
-
}
|
|
4991
|
-
/**
|
|
4992
|
-
* Initialize mode after component is first rendered
|
|
4993
|
-
*/
|
|
4994
4894
|
async firstUpdated() {
|
|
4995
|
-
|
|
4996
|
-
}
|
|
4997
|
-
/**
|
|
4998
|
-
* Get the current user's stars from localStats
|
|
4999
|
-
*/
|
|
5000
|
-
getCurrentStars() {
|
|
5001
|
-
return this.localStats.sum || 0;
|
|
5002
|
-
}
|
|
5003
|
-
/**
|
|
5004
|
-
* Check if user has made a stars selection
|
|
5005
|
-
*/
|
|
5006
|
-
hasUserStars() {
|
|
5007
|
-
return this.localStats.count > 0;
|
|
5008
|
-
}
|
|
5009
|
-
/**
|
|
5010
|
-
* Get average stars from server stats
|
|
5011
|
-
*/
|
|
5012
|
-
getAverageStars() {
|
|
5013
|
-
var e;
|
|
5014
|
-
return ((e = this.stats) == null ? void 0 : e.avg) || 0;
|
|
5015
|
-
}
|
|
5016
|
-
/**
|
|
5017
|
-
* Get total vote count from server stats
|
|
5018
|
-
*/
|
|
5019
|
-
getTotalVotes() {
|
|
5020
|
-
var e;
|
|
5021
|
-
return ((e = this.stats) == null ? void 0 : e.count) || 0;
|
|
5022
|
-
}
|
|
5023
|
-
/**
|
|
5024
|
-
* Check if there are any stats to display
|
|
5025
|
-
*/
|
|
5026
|
-
hasStats() {
|
|
5027
|
-
return this.getTotalVotes() > 0;
|
|
4895
|
+
super.firstUpdated(), console.log("defaultMode", this.defaultMode), this.defaultMode === "edit" ? this.isEditMode = !0 : this.isEditMode = !1;
|
|
5028
4896
|
}
|
|
5029
4897
|
/**
|
|
5030
4898
|
* Render stars for view mode (showing average rating)
|
|
5031
4899
|
*/
|
|
5032
4900
|
renderViewStars() {
|
|
5033
|
-
|
|
5034
|
-
|
|
4901
|
+
var s;
|
|
4902
|
+
const e = ((s = this.stats) == null ? void 0 : s.avg) || 0, t = Array.from({ length: this.numStars }, (i, o) => o + 1).map((i) => {
|
|
4903
|
+
const o = i <= Math.floor(e), r = !o && i === Math.ceil(e) && e % 1 !== 0, n = {
|
|
5035
4904
|
star: !0,
|
|
5036
|
-
selected:
|
|
5037
|
-
partial:
|
|
4905
|
+
selected: o,
|
|
4906
|
+
partial: r,
|
|
5038
4907
|
"view-mode": !0
|
|
5039
|
-
}, a =
|
|
5040
|
-
return
|
|
4908
|
+
}, a = r ? { "--partial-fill": `${e % 1 * 100}%` } : {};
|
|
4909
|
+
return c`
|
|
5041
4910
|
<span
|
|
5042
|
-
data-testid="stars-view-star-${
|
|
5043
|
-
class=${
|
|
5044
|
-
style=${
|
|
4911
|
+
data-testid="stars-view-star-${i}"
|
|
4912
|
+
class=${y(n)}
|
|
4913
|
+
style=${Ys(a)}
|
|
5045
4914
|
role="presentation"
|
|
5046
4915
|
>
|
|
5047
4916
|
★
|
|
5048
4917
|
</span>
|
|
5049
4918
|
`;
|
|
5050
4919
|
});
|
|
5051
|
-
return
|
|
4920
|
+
return c`<div class="stars view-stars" data-testid="stars-view-container">${t}</div>`;
|
|
5052
4921
|
}
|
|
5053
4922
|
/**
|
|
5054
4923
|
* Render interactive stars for edit mode
|
|
@@ -5060,11 +4929,11 @@ let U = class extends u {
|
|
|
5060
4929
|
selected: s <= e,
|
|
5061
4930
|
"edit-mode": !0
|
|
5062
4931
|
};
|
|
5063
|
-
return
|
|
4932
|
+
return c`
|
|
5064
4933
|
<span
|
|
5065
4934
|
data-testid="stars-edit-star-${s}"
|
|
5066
4935
|
data-star="${s}"
|
|
5067
|
-
class=${
|
|
4936
|
+
class=${y(o)}
|
|
5068
4937
|
@click="${() => this.handleEditStarClick(s)}"
|
|
5069
4938
|
@mouseenter="${() => this.handleEditStarHover(s)}"
|
|
5070
4939
|
@focus="${() => this.handleEditStarHover(s)}"
|
|
@@ -5079,50 +4948,22 @@ let U = class extends u {
|
|
|
5079
4948
|
</span>
|
|
5080
4949
|
`;
|
|
5081
4950
|
});
|
|
5082
|
-
return
|
|
5083
|
-
}
|
|
5084
|
-
/**
|
|
5085
|
-
* Render stats text for view mode
|
|
5086
|
-
*/
|
|
5087
|
-
renderStatsText() {
|
|
5088
|
-
if (!this.showStats || this.isEditMode) return d;
|
|
5089
|
-
if (this.statsIsLoading)
|
|
5090
|
-
return l`<span class="pc-stats-text">
|
|
5091
|
-
<img src="${lt}" alt="Loading" class="pc-loading-icon" />
|
|
5092
|
-
</span>`;
|
|
5093
|
-
const e = this.statsText || "Average {avg} ({count} votes)", t = this.formatStatsText(e), s = !this.readonly && this.showChart && this.hasStats();
|
|
5094
|
-
return l`
|
|
5095
|
-
<span class="pc-stats-text" data-testid="stats-text">
|
|
5096
|
-
${t}
|
|
5097
|
-
${s ? l`
|
|
5098
|
-
<img
|
|
5099
|
-
src="${this.isChartVisible ? Nt : zt}"
|
|
5100
|
-
alt="${this.isChartVisible ? "Hide chart" : "Show chart"}"
|
|
5101
|
-
class="chart-toggle-icon"
|
|
5102
|
-
data-testid="stars-chart-toggle-button"
|
|
5103
|
-
@click="${this.toggleChart}"
|
|
5104
|
-
role="button"
|
|
5105
|
-
tabindex="0"
|
|
5106
|
-
@keydown="${this.handleChartToggleKeyDown}"
|
|
5107
|
-
/>
|
|
5108
|
-
` : d}
|
|
5109
|
-
</span>
|
|
5110
|
-
`;
|
|
4951
|
+
return c`<div class="stars edit-stars" data-testid="stars-edit-container">${t}</div>`;
|
|
5111
4952
|
}
|
|
5112
4953
|
/**
|
|
5113
4954
|
* Render add/edit button
|
|
5114
4955
|
*/
|
|
5115
4956
|
renderActionButton() {
|
|
5116
|
-
if (this.readonly || this.isEditMode || this.statsIsLoading) return
|
|
5117
|
-
const t = this.
|
|
5118
|
-
return
|
|
4957
|
+
if (this.readonly || this.isEditMode || this.statsIsLoading) return h;
|
|
4958
|
+
const t = this.hasUserVoted() ? "Edit rating" : "Add rating";
|
|
4959
|
+
return c`
|
|
5119
4960
|
<button
|
|
5120
4961
|
class="action-btn"
|
|
5121
4962
|
data-testid="stars-action-button"
|
|
5122
4963
|
@click="${this.handleEnterEditMode}"
|
|
5123
4964
|
aria-label="${t}"
|
|
5124
4965
|
>
|
|
5125
|
-
<img src="${
|
|
4966
|
+
<img src="${mt}" alt="${t}" class="icon" />
|
|
5126
4967
|
</button>
|
|
5127
4968
|
`;
|
|
5128
4969
|
}
|
|
@@ -5131,35 +4972,28 @@ let U = class extends u {
|
|
|
5131
4972
|
*/
|
|
5132
4973
|
renderChart(e) {
|
|
5133
4974
|
var a;
|
|
5134
|
-
if (e && ["bottom", "top"].includes(this.statsPosition || "") || !e && ["left", "right"].includes(this.statsPosition || "")
|
|
5135
|
-
|
|
5136
|
-
|
|
5137
|
-
|
|
5138
|
-
|
|
5139
|
-
|
|
5140
|
-
|
|
5141
|
-
|
|
5142
|
-
|
|
5143
|
-
|
|
5144
|
-
valueFormatter: (n) => `${t > 0 ? Math.round(n / t * 100) : 0}%`
|
|
4975
|
+
if (!this.shouldShowChart() || e && ["bottom", "top"].includes(this.statsPosition || "") || !e && ["left", "right"].includes(this.statsPosition || ""))
|
|
4976
|
+
return h;
|
|
4977
|
+
const t = ((a = this.stats) == null ? void 0 : a.breakdown) || {}, s = Object.values(t).reduce((l, p) => l + p, 0), i = Object.entries(t).map(([l, p]) => ({
|
|
4978
|
+
label: l,
|
|
4979
|
+
value: p,
|
|
4980
|
+
icon: "★"
|
|
4981
|
+
})), r = getComputedStyle(this).getPropertyValue("--pc-accent-color").trim() || "#ffc107", n = Ot(i, {
|
|
4982
|
+
barColor: r,
|
|
4983
|
+
labelFormatter: (l) => `${l}`,
|
|
4984
|
+
valueFormatter: (l) => `${s > 0 ? Math.round(l / s * 100) : 0}%`
|
|
5145
4985
|
});
|
|
5146
|
-
return
|
|
4986
|
+
return c`
|
|
5147
4987
|
<div class="pc-stats-chart pc-stats-chart-inline visible" data-testid="stars-chart">
|
|
5148
|
-
<div class="pc-chart-container" data-testid="stars-chart-container">${
|
|
4988
|
+
<div class="pc-chart-container" data-testid="stars-chart-container">${n}</div>
|
|
5149
4989
|
</div>
|
|
5150
4990
|
`;
|
|
5151
4991
|
}
|
|
5152
|
-
/**
|
|
5153
|
-
* Toggle chart visibility
|
|
5154
|
-
*/
|
|
5155
|
-
toggleChart() {
|
|
5156
|
-
this.isChartVisible = !this.isChartVisible;
|
|
5157
|
-
}
|
|
5158
4992
|
/**
|
|
5159
4993
|
* Enter edit mode
|
|
5160
4994
|
*/
|
|
5161
4995
|
handleEnterEditMode() {
|
|
5162
|
-
this.isEditMode = !0, this.editValue = this.
|
|
4996
|
+
this.isEditMode = !0, this.editValue = this.localStats.sum || 0, this.hoverValue = 0, this.isChartVisible = !1;
|
|
5163
4997
|
}
|
|
5164
4998
|
/**
|
|
5165
4999
|
* Handle star click in edit mode
|
|
@@ -5173,27 +5007,21 @@ let U = class extends u {
|
|
|
5173
5007
|
handleEditStarHover(e) {
|
|
5174
5008
|
this.editValue === 0 && (this.hoverValue = e);
|
|
5175
5009
|
}
|
|
5176
|
-
/**
|
|
5177
|
-
* Clean up event listeners when component is disconnected
|
|
5178
|
-
*/
|
|
5179
|
-
disconnectedCallback() {
|
|
5180
|
-
super.disconnectedCallback();
|
|
5181
|
-
}
|
|
5182
5010
|
render() {
|
|
5183
5011
|
const e = {
|
|
5184
5012
|
[`pc-flex-pos-${this.labelPosition}`]: !0,
|
|
5185
|
-
[`pc-flex-align-${
|
|
5013
|
+
[`pc-flex-align-${N(this.labelPosition, this.labelAlign)}`]: !0,
|
|
5186
5014
|
"edit-mode": this.isEditMode,
|
|
5187
5015
|
"view-mode": !this.isEditMode
|
|
5188
5016
|
}, t = {
|
|
5189
5017
|
stars: !0,
|
|
5190
5018
|
[`pc-flex-pos-${this.statsPosition}`]: !0,
|
|
5191
|
-
[`pc-flex-align-${
|
|
5019
|
+
[`pc-flex-align-${N(this.statsPosition, this.statsAlign)}`]: !0
|
|
5192
5020
|
};
|
|
5193
|
-
return
|
|
5194
|
-
<div class="pc-container ${
|
|
5021
|
+
return c`
|
|
5022
|
+
<div class="pc-container ${y(e)}" data-testid="stars-container">
|
|
5195
5023
|
${this.renderLabel()}
|
|
5196
|
-
<div class="pc-body ${
|
|
5024
|
+
<div class="pc-body ${y(t)}" data-testid="stars-body">
|
|
5197
5025
|
${this.renderStatsText()}
|
|
5198
5026
|
<!-- Cursor, stats text must go first here -->
|
|
5199
5027
|
${this.renderChart(!1)}
|
|
@@ -5207,34 +5035,28 @@ let U = class extends u {
|
|
|
5207
5035
|
`;
|
|
5208
5036
|
}
|
|
5209
5037
|
};
|
|
5210
|
-
|
|
5211
|
-
|
|
5212
|
-
|
|
5213
|
-
],
|
|
5214
|
-
|
|
5215
|
-
|
|
5216
|
-
],
|
|
5217
|
-
|
|
5218
|
-
|
|
5219
|
-
],
|
|
5220
|
-
|
|
5221
|
-
|
|
5222
|
-
],
|
|
5223
|
-
|
|
5224
|
-
|
|
5225
|
-
],
|
|
5226
|
-
|
|
5227
|
-
|
|
5228
|
-
]
|
|
5229
|
-
U = W([
|
|
5230
|
-
q("pc-stars")
|
|
5231
|
-
], U);
|
|
5232
|
-
var Zs = Object.defineProperty, Ws = Object.getOwnPropertyDescriptor, Te = (e, t, s, i) => {
|
|
5233
|
-
for (var o = i > 1 ? void 0 : i ? Ws(t, s) : t, r = e.length - 1, a; r >= 0; r--)
|
|
5234
|
-
(a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
|
|
5038
|
+
G.styles = [...m.styles, qs];
|
|
5039
|
+
at([
|
|
5040
|
+
d({ type: Number, attribute: "num-stars" })
|
|
5041
|
+
], G.prototype, "numStars", 2);
|
|
5042
|
+
at([
|
|
5043
|
+
d({ type: String, attribute: "default-mode" })
|
|
5044
|
+
], G.prototype, "defaultMode", 2);
|
|
5045
|
+
at([
|
|
5046
|
+
x()
|
|
5047
|
+
], G.prototype, "hoverValue", 2);
|
|
5048
|
+
at([
|
|
5049
|
+
x()
|
|
5050
|
+
], G.prototype, "editValue", 2);
|
|
5051
|
+
G = at([
|
|
5052
|
+
B("pc-stars")
|
|
5053
|
+
], G);
|
|
5054
|
+
var Zs = Object.defineProperty, Ws = Object.getOwnPropertyDescriptor, Ae = (e, t, s, i) => {
|
|
5055
|
+
for (var o = i > 1 ? void 0 : i ? Ws(t, s) : t, r = e.length - 1, n; r >= 0; r--)
|
|
5056
|
+
(n = e[r]) && (o = (i ? n(t, s, o) : n(o)) || o);
|
|
5235
5057
|
return i && o && Zs(t, s, o), o;
|
|
5236
5058
|
};
|
|
5237
|
-
let
|
|
5059
|
+
let kt = class extends L {
|
|
5238
5060
|
/**
|
|
5239
5061
|
* Disable shadow DOM for PollCatch
|
|
5240
5062
|
*/
|
|
@@ -5273,38 +5095,38 @@ let Ct = class extends V {
|
|
|
5273
5095
|
if (!this.type)
|
|
5274
5096
|
return console.warn(
|
|
5275
5097
|
"poll-catch: No type specified. Please provide a type attribute (nps, poll, stars, text, reaction)."
|
|
5276
|
-
),
|
|
5098
|
+
), h;
|
|
5277
5099
|
switch (this.type) {
|
|
5278
5100
|
case "nps":
|
|
5279
|
-
return
|
|
5101
|
+
return c`<pc-nps></pc-nps>`;
|
|
5280
5102
|
case "poll":
|
|
5281
|
-
return
|
|
5103
|
+
return c`<pc-poll></pc-poll>`;
|
|
5282
5104
|
case "stars":
|
|
5283
|
-
return
|
|
5105
|
+
return c`<pc-stars></pc-stars>`;
|
|
5284
5106
|
case "text":
|
|
5285
|
-
return
|
|
5107
|
+
return c`<pc-text></pc-text>`;
|
|
5286
5108
|
case "reaction":
|
|
5287
|
-
return
|
|
5109
|
+
return c`<pc-reaction></pc-reaction>`;
|
|
5288
5110
|
default:
|
|
5289
5111
|
return console.warn(
|
|
5290
5112
|
`poll-catch: Unknown widget type "${this.type}". Supported types: nps, poll, stars, text, reaction.`
|
|
5291
|
-
),
|
|
5113
|
+
), h;
|
|
5292
5114
|
}
|
|
5293
5115
|
}
|
|
5294
5116
|
};
|
|
5295
|
-
|
|
5296
|
-
|
|
5297
|
-
],
|
|
5298
|
-
|
|
5299
|
-
|
|
5300
|
-
],
|
|
5117
|
+
Ae([
|
|
5118
|
+
d({ type: String })
|
|
5119
|
+
], kt.prototype, "type", 2);
|
|
5120
|
+
kt = Ae([
|
|
5121
|
+
B("poll-catch")
|
|
5122
|
+
], kt);
|
|
5301
5123
|
export {
|
|
5302
|
-
|
|
5303
|
-
|
|
5304
|
-
|
|
5305
|
-
|
|
5306
|
-
|
|
5307
|
-
|
|
5308
|
-
|
|
5309
|
-
|
|
5124
|
+
V as PcNps,
|
|
5125
|
+
A as PcPoll,
|
|
5126
|
+
C as PcPollOption,
|
|
5127
|
+
_ as PcReaction,
|
|
5128
|
+
P as PcReactionIcon,
|
|
5129
|
+
G as PcStars,
|
|
5130
|
+
k as PcText,
|
|
5131
|
+
kt as PollCatch
|
|
5310
5132
|
};
|