xactsize-webcomponents 1.0.29 → 1.0.30
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/dist/body-measurer.d.ts +3 -0
- package/dist/body-measurer.es.js +359 -241
- package/dist/body-measurer.umd.js +154 -47
- package/package.json +1 -1
package/dist/body-measurer.es.js
CHANGED
|
@@ -36,10 +36,10 @@ let ZA = class {
|
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
const YA = (l) => new ZA(typeof l == "string" ? l : l + "", void 0, uA), N = (l, ...A) => {
|
|
39
|
-
const t = l.length === 1 ? l[0] : A.reduce((r, e, p) => r + ((
|
|
40
|
-
if (
|
|
41
|
-
if (typeof
|
|
42
|
-
throw Error("Value passed to 'css' function must be a 'css' function result: " +
|
|
39
|
+
const t = l.length === 1 ? l[0] : A.reduce((r, e, p) => r + ((n) => {
|
|
40
|
+
if (n._$cssResult$ === !0) return n.cssText;
|
|
41
|
+
if (typeof n == "number") return n;
|
|
42
|
+
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.");
|
|
43
43
|
})(e) + l[p + 1], l[0]);
|
|
44
44
|
return new ZA(t, l, uA);
|
|
45
45
|
}, CA = (l, A) => {
|
|
@@ -86,7 +86,7 @@ const { is: DA, defineProperty: QA, getOwnPropertyDescriptor: gA, getOwnProperty
|
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
return t;
|
|
89
|
-
} },
|
|
89
|
+
} }, cA = (l, A) => !DA(l, A), sA = { attribute: !0, type: String, converter: _, reflect: !1, useDefault: !1, hasChanged: cA };
|
|
90
90
|
Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), U.litPropertyMetadata ?? (U.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
|
|
91
91
|
let m = class extends HTMLElement {
|
|
92
92
|
static addInitializer(A) {
|
|
@@ -95,7 +95,7 @@ let m = class extends HTMLElement {
|
|
|
95
95
|
static get observedAttributes() {
|
|
96
96
|
return this.finalize(), this._$Eh && [...this._$Eh.keys()];
|
|
97
97
|
}
|
|
98
|
-
static createProperty(A, t =
|
|
98
|
+
static createProperty(A, t = sA) {
|
|
99
99
|
if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(A) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(A, t), !t.noAccessor) {
|
|
100
100
|
const r = Symbol(), e = this.getPropertyDescriptor(A, r, t);
|
|
101
101
|
e !== void 0 && QA(this.prototype, A, e);
|
|
@@ -104,16 +104,16 @@ let m = class extends HTMLElement {
|
|
|
104
104
|
static getPropertyDescriptor(A, t, r) {
|
|
105
105
|
const { get: e, set: p } = gA(this.prototype, A) ?? { get() {
|
|
106
106
|
return this[t];
|
|
107
|
-
}, set(
|
|
108
|
-
this[t] =
|
|
107
|
+
}, set(n) {
|
|
108
|
+
this[t] = n;
|
|
109
109
|
} };
|
|
110
|
-
return { get: e, set(
|
|
110
|
+
return { get: e, set(n) {
|
|
111
111
|
const S = e == null ? void 0 : e.call(this);
|
|
112
|
-
p == null || p.call(this,
|
|
112
|
+
p == null || p.call(this, n), this.requestUpdate(A, S, r);
|
|
113
113
|
}, configurable: !0, enumerable: !0 };
|
|
114
114
|
}
|
|
115
115
|
static getPropertyOptions(A) {
|
|
116
|
-
return this.elementProperties.get(A) ??
|
|
116
|
+
return this.elementProperties.get(A) ?? sA;
|
|
117
117
|
}
|
|
118
118
|
static _$Ei() {
|
|
119
119
|
if (this.hasOwnProperty(z("elementProperties"))) return;
|
|
@@ -197,29 +197,29 @@ let m = class extends HTMLElement {
|
|
|
197
197
|
var p;
|
|
198
198
|
const r = this.constructor.elementProperties.get(A), e = this.constructor._$Eu(A, r);
|
|
199
199
|
if (e !== void 0 && r.reflect === !0) {
|
|
200
|
-
const
|
|
201
|
-
this._$Em = A,
|
|
200
|
+
const n = (((p = r.converter) == null ? void 0 : p.toAttribute) !== void 0 ? r.converter : _).toAttribute(t, r.type);
|
|
201
|
+
this._$Em = A, n == null ? this.removeAttribute(e) : this.setAttribute(e, n), this._$Em = null;
|
|
202
202
|
}
|
|
203
203
|
}
|
|
204
204
|
_$AK(A, t) {
|
|
205
|
-
var p,
|
|
205
|
+
var p, n;
|
|
206
206
|
const r = this.constructor, e = r._$Eh.get(A);
|
|
207
207
|
if (e !== void 0 && this._$Em !== e) {
|
|
208
208
|
const S = r.getPropertyOptions(e), q = typeof S.converter == "function" ? { fromAttribute: S.converter } : ((p = S.converter) == null ? void 0 : p.fromAttribute) !== void 0 ? S.converter : _;
|
|
209
|
-
this._$Em = e, this[e] = q.fromAttribute(t, S.type) ?? ((
|
|
209
|
+
this._$Em = e, this[e] = q.fromAttribute(t, S.type) ?? ((n = this._$Ej) == null ? void 0 : n.get(e)) ?? null, this._$Em = null;
|
|
210
210
|
}
|
|
211
211
|
}
|
|
212
212
|
requestUpdate(A, t, r) {
|
|
213
213
|
var e;
|
|
214
214
|
if (A !== void 0) {
|
|
215
|
-
const p = this.constructor,
|
|
216
|
-
if (r ?? (r = p.getPropertyOptions(A)), !((r.hasChanged ??
|
|
215
|
+
const p = this.constructor, n = this[A];
|
|
216
|
+
if (r ?? (r = p.getPropertyOptions(A)), !((r.hasChanged ?? cA)(n, t) || r.useDefault && r.reflect && n === ((e = this._$Ej) == null ? void 0 : e.get(A)) && !this.hasAttribute(p._$Eu(A, r)))) return;
|
|
217
217
|
this.C(A, t, r);
|
|
218
218
|
}
|
|
219
219
|
this.isUpdatePending === !1 && (this._$ES = this._$EP());
|
|
220
220
|
}
|
|
221
|
-
C(A, t, { useDefault: r, reflect: e, wrapped: p },
|
|
222
|
-
r && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(A) && (this._$Ej.set(A,
|
|
221
|
+
C(A, t, { useDefault: r, reflect: e, wrapped: p }, n) {
|
|
222
|
+
r && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(A) && (this._$Ej.set(A, n ?? t ?? this[A]), p !== !0 || n !== void 0) || (this._$AL.has(A) || (this.hasUpdated || r || (t = void 0), this._$AL.set(A, t)), e === !0 && this._$Em !== A && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(A));
|
|
223
223
|
}
|
|
224
224
|
async _$EP() {
|
|
225
225
|
this.isUpdatePending = !0;
|
|
@@ -239,13 +239,13 @@ let m = class extends HTMLElement {
|
|
|
239
239
|
if (!this.isUpdatePending) return;
|
|
240
240
|
if (!this.hasUpdated) {
|
|
241
241
|
if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
|
|
242
|
-
for (const [p,
|
|
242
|
+
for (const [p, n] of this._$Ep) this[p] = n;
|
|
243
243
|
this._$Ep = void 0;
|
|
244
244
|
}
|
|
245
245
|
const e = this.constructor.elementProperties;
|
|
246
|
-
if (e.size > 0) for (const [p,
|
|
247
|
-
const { wrapped: S } =
|
|
248
|
-
S !== !0 || this._$AL.has(p) || q === void 0 || this.C(p, void 0,
|
|
246
|
+
if (e.size > 0) for (const [p, n] of e) {
|
|
247
|
+
const { wrapped: S } = n, q = this[p];
|
|
248
|
+
S !== !0 || this._$AL.has(p) || q === void 0 || this.C(p, void 0, n, q);
|
|
249
249
|
}
|
|
250
250
|
}
|
|
251
251
|
let A = !1;
|
|
@@ -295,22 +295,22 @@ m.elementStyles = [], m.shadowRootOptions = { mode: "open" }, m[z("elementProper
|
|
|
295
295
|
* Copyright 2017 Google LLC
|
|
296
296
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
297
297
|
*/
|
|
298
|
-
const G = globalThis, $ = G.trustedTypes,
|
|
298
|
+
const G = globalThis, $ = G.trustedTypes, iA = $ ? $.createPolicy("lit-html", { createHTML: (l) => l }) : void 0, NA = "$lit$", K = `lit$${Math.random().toFixed(9).slice(2)}$`, RA = "?" + K, tt = `<${RA}>`, L = document, F = () => L.createComment(""), M = (l) => l === null || typeof l != "object" && typeof l != "function", jA = Array.isArray, lt = (l) => jA(l) || typeof (l == null ? void 0 : l[Symbol.iterator]) == "function", rA = `[
|
|
299
299
|
\f\r]`, H = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, KA = /-->/g, UA = />/g, W = RegExp(`>|${rA}(?:([^\\s"'>=/]+)(${rA}*=${rA}*(?:[^
|
|
300
|
-
\f\r"'\`<>=]|("|')|))|$)`, "g"), WA = /'/g, vA = /"/g, HA = /^(?:script|style|textarea|title)$/i, et = (l) => (A, ...t) => ({ _$litType$: l, strings: A, values: t }),
|
|
300
|
+
\f\r"'\`<>=]|("|')|))|$)`, "g"), WA = /'/g, vA = /"/g, HA = /^(?:script|style|textarea|title)$/i, et = (l) => (A, ...t) => ({ _$litType$: l, strings: A, values: t }), k = et(1), f = Symbol.for("lit-noChange"), j = Symbol.for("lit-nothing"), OA = /* @__PURE__ */ new WeakMap(), O = L.createTreeWalker(L, 129);
|
|
301
301
|
function zA(l, A) {
|
|
302
|
-
if (!
|
|
303
|
-
return
|
|
302
|
+
if (!jA(l) || !l.hasOwnProperty("raw")) throw Error("invalid template strings array");
|
|
303
|
+
return iA !== void 0 ? iA.createHTML(A) : A;
|
|
304
304
|
}
|
|
305
305
|
const rt = (l, A) => {
|
|
306
306
|
const t = l.length - 1, r = [];
|
|
307
|
-
let e, p = A === 2 ? "<svg>" : A === 3 ? "<math>" : "",
|
|
307
|
+
let e, p = A === 2 ? "<svg>" : A === 3 ? "<math>" : "", n = H;
|
|
308
308
|
for (let S = 0; S < t; S++) {
|
|
309
309
|
const q = l[S];
|
|
310
|
-
let u,
|
|
311
|
-
for (; x < q.length && (
|
|
312
|
-
const
|
|
313
|
-
p +=
|
|
310
|
+
let u, J, y = -1, x = 0;
|
|
311
|
+
for (; x < q.length && (n.lastIndex = x, J = n.exec(q), J !== null); ) x = n.lastIndex, n === H ? J[1] === "!--" ? n = KA : J[1] !== void 0 ? n = UA : J[2] !== void 0 ? (HA.test(J[2]) && (e = RegExp("</" + J[2], "g")), n = W) : J[3] !== void 0 && (n = W) : n === W ? J[0] === ">" ? (n = e ?? H, y = -1) : J[1] === void 0 ? y = -2 : (y = n.lastIndex - J[2].length, u = J[1], n = J[3] === void 0 ? W : J[3] === '"' ? vA : WA) : n === vA || n === WA ? n = W : n === KA || n === UA ? n = H : (n = W, e = void 0);
|
|
312
|
+
const i = n === W && l[S + 1].startsWith("/>") ? " " : "";
|
|
313
|
+
p += n === H ? q + tt : y >= 0 ? (r.push(u), q.slice(0, y) + NA + q.slice(y) + K + i) : q + K + (y === -2 ? S : i);
|
|
314
314
|
}
|
|
315
315
|
return [zA(l, p + (l[t] || "<?>") + (A === 2 ? "</svg>" : A === 3 ? "</math>" : "")), r];
|
|
316
316
|
};
|
|
@@ -318,8 +318,8 @@ class h {
|
|
|
318
318
|
constructor({ strings: A, _$litType$: t }, r) {
|
|
319
319
|
let e;
|
|
320
320
|
this.parts = [];
|
|
321
|
-
let p = 0,
|
|
322
|
-
const S = A.length - 1, q = this.parts, [u,
|
|
321
|
+
let p = 0, n = 0;
|
|
322
|
+
const S = A.length - 1, q = this.parts, [u, J] = rt(A, t);
|
|
323
323
|
if (this.el = h.createElement(u, r), O.currentNode = this.el.content, t === 2 || t === 3) {
|
|
324
324
|
const y = this.el.content.firstChild;
|
|
325
325
|
y.replaceWith(...y.childNodes);
|
|
@@ -327,14 +327,14 @@ class h {
|
|
|
327
327
|
for (; (e = O.nextNode()) !== null && q.length < S; ) {
|
|
328
328
|
if (e.nodeType === 1) {
|
|
329
329
|
if (e.hasAttributes()) for (const y of e.getAttributeNames()) if (y.endsWith(NA)) {
|
|
330
|
-
const x =
|
|
331
|
-
q.push({ type: 1, index: p, name: Q[2], strings:
|
|
330
|
+
const x = J[n++], i = e.getAttribute(y).split(K), Q = /([.?@])?(.*)/.exec(x);
|
|
331
|
+
q.push({ type: 1, index: p, name: Q[2], strings: i, ctor: Q[1] === "." ? nt : Q[1] === "?" ? Vt : Q[1] === "@" ? qt : lA }), e.removeAttribute(y);
|
|
332
332
|
} else y.startsWith(K) && (q.push({ type: 6, index: p }), e.removeAttribute(y));
|
|
333
333
|
if (HA.test(e.tagName)) {
|
|
334
334
|
const y = e.textContent.split(K), x = y.length - 1;
|
|
335
335
|
if (x > 0) {
|
|
336
336
|
e.textContent = $ ? $.emptyScript : "";
|
|
337
|
-
for (let
|
|
337
|
+
for (let i = 0; i < x; i++) e.append(y[i], F()), O.nextNode(), q.push({ type: 2, index: ++p });
|
|
338
338
|
e.append(y[x], F());
|
|
339
339
|
}
|
|
340
340
|
}
|
|
@@ -352,9 +352,9 @@ class h {
|
|
|
352
352
|
}
|
|
353
353
|
}
|
|
354
354
|
function Z(l, A, t = l, r) {
|
|
355
|
-
var
|
|
355
|
+
var n, S;
|
|
356
356
|
if (A === f) return A;
|
|
357
|
-
let e = r !== void 0 ? (
|
|
357
|
+
let e = r !== void 0 ? (n = t._$Co) == null ? void 0 : n[r] : t._$Cl;
|
|
358
358
|
const p = M(A) ? void 0 : A._$litDirective$;
|
|
359
359
|
return (e == null ? void 0 : e.constructor) !== p && ((S = e == null ? void 0 : e._$AO) == null || S.call(e, !1), p === void 0 ? e = void 0 : (e = new p(l), e._$AT(l, t, r)), r !== void 0 ? (t._$Co ?? (t._$Co = []))[r] = e : t._$Cl = e), e !== void 0 && (A = Z(l, e._$AS(l, A.values), e, r)), A;
|
|
360
360
|
}
|
|
@@ -371,13 +371,13 @@ class pt {
|
|
|
371
371
|
u(A) {
|
|
372
372
|
const { el: { content: t }, parts: r } = this._$AD, e = ((A == null ? void 0 : A.creationScope) ?? L).importNode(t, !0);
|
|
373
373
|
O.currentNode = e;
|
|
374
|
-
let p = O.nextNode(),
|
|
374
|
+
let p = O.nextNode(), n = 0, S = 0, q = r[0];
|
|
375
375
|
for (; q !== void 0; ) {
|
|
376
|
-
if (
|
|
376
|
+
if (n === q.index) {
|
|
377
377
|
let u;
|
|
378
378
|
q.type === 2 ? u = new w(p, p.nextSibling, this, A) : q.type === 1 ? u = new q.ctor(p, q.name, q.strings, this, A) : q.type === 6 && (u = new St(p, this, A)), this._$AV.push(u), q = r[++S];
|
|
379
379
|
}
|
|
380
|
-
|
|
380
|
+
n !== (q == null ? void 0 : q.index) && (p = O.nextNode(), n++);
|
|
381
381
|
}
|
|
382
382
|
return O.currentNode = L, e;
|
|
383
383
|
}
|
|
@@ -392,7 +392,7 @@ class w {
|
|
|
392
392
|
return ((A = this._$AM) == null ? void 0 : A._$AU) ?? this._$Cv;
|
|
393
393
|
}
|
|
394
394
|
constructor(A, t, r, e) {
|
|
395
|
-
this.type = 2, this._$AH =
|
|
395
|
+
this.type = 2, this._$AH = j, this._$AN = void 0, this._$AA = A, this._$AB = t, this._$AM = r, this.options = e, this._$Cv = (e == null ? void 0 : e.isConnected) ?? !0;
|
|
396
396
|
}
|
|
397
397
|
get parentNode() {
|
|
398
398
|
let A = this._$AA.parentNode;
|
|
@@ -406,7 +406,7 @@ class w {
|
|
|
406
406
|
return this._$AB;
|
|
407
407
|
}
|
|
408
408
|
_$AI(A, t = this) {
|
|
409
|
-
A = Z(this, A, t), M(A) ? A ===
|
|
409
|
+
A = Z(this, A, t), M(A) ? A === j || A == null || A === "" ? (this._$AH !== j && this._$AR(), this._$AH = j) : A !== this._$AH && A !== f && this._(A) : A._$litType$ !== void 0 ? this.$(A) : A.nodeType !== void 0 ? this.T(A) : lt(A) ? this.k(A) : this._(A);
|
|
410
410
|
}
|
|
411
411
|
O(A) {
|
|
412
412
|
return this._$AA.parentNode.insertBefore(A, this._$AB);
|
|
@@ -415,15 +415,15 @@ class w {
|
|
|
415
415
|
this._$AH !== A && (this._$AR(), this._$AH = this.O(A));
|
|
416
416
|
}
|
|
417
417
|
_(A) {
|
|
418
|
-
this._$AH !==
|
|
418
|
+
this._$AH !== j && M(this._$AH) ? this._$AA.nextSibling.data = A : this.T(L.createTextNode(A)), this._$AH = A;
|
|
419
419
|
}
|
|
420
420
|
$(A) {
|
|
421
421
|
var p;
|
|
422
422
|
const { values: t, _$litType$: r } = A, e = typeof r == "number" ? this._$AC(A) : (r.el === void 0 && (r.el = h.createElement(zA(r.h, r.h[0]), this.options)), r);
|
|
423
423
|
if (((p = this._$AH) == null ? void 0 : p._$AD) === e) this._$AH.p(t);
|
|
424
424
|
else {
|
|
425
|
-
const
|
|
426
|
-
|
|
425
|
+
const n = new pt(e, this), S = n.u(this.options);
|
|
426
|
+
n.p(t), this.T(S), this._$AH = n;
|
|
427
427
|
}
|
|
428
428
|
}
|
|
429
429
|
_$AC(A) {
|
|
@@ -431,7 +431,7 @@ class w {
|
|
|
431
431
|
return t === void 0 && OA.set(A.strings, t = new h(A)), t;
|
|
432
432
|
}
|
|
433
433
|
k(A) {
|
|
434
|
-
|
|
434
|
+
jA(this._$AH) || (this._$AH = [], this._$AR());
|
|
435
435
|
const t = this._$AH;
|
|
436
436
|
let r, e = 0;
|
|
437
437
|
for (const p of A) e === t.length ? t.push(r = new w(this.O(F()), this.O(F()), this, this.options)) : r = t[e], r._$AI(p), e++;
|
|
@@ -457,37 +457,37 @@ class lA {
|
|
|
457
457
|
return this._$AM._$AU;
|
|
458
458
|
}
|
|
459
459
|
constructor(A, t, r, e, p) {
|
|
460
|
-
this.type = 1, this._$AH =
|
|
460
|
+
this.type = 1, this._$AH = j, this._$AN = void 0, this.element = A, this.name = t, this._$AM = e, this.options = p, r.length > 2 || r[0] !== "" || r[1] !== "" ? (this._$AH = Array(r.length - 1).fill(new String()), this.strings = r) : this._$AH = j;
|
|
461
461
|
}
|
|
462
462
|
_$AI(A, t = this, r, e) {
|
|
463
463
|
const p = this.strings;
|
|
464
|
-
let
|
|
465
|
-
if (p === void 0) A = Z(this, A, t, 0),
|
|
464
|
+
let n = !1;
|
|
465
|
+
if (p === void 0) A = Z(this, A, t, 0), n = !M(A) || A !== this._$AH && A !== f, n && (this._$AH = A);
|
|
466
466
|
else {
|
|
467
467
|
const S = A;
|
|
468
468
|
let q, u;
|
|
469
|
-
for (A = p[0], q = 0; q < p.length - 1; q++) u = Z(this, S[r + q], t, q), u === f && (u = this._$AH[q]),
|
|
469
|
+
for (A = p[0], q = 0; q < p.length - 1; q++) u = Z(this, S[r + q], t, q), u === f && (u = this._$AH[q]), n || (n = !M(u) || u !== this._$AH[q]), u === j ? A = j : A !== j && (A += (u ?? "") + p[q + 1]), this._$AH[q] = u;
|
|
470
470
|
}
|
|
471
|
-
|
|
471
|
+
n && !e && this.j(A);
|
|
472
472
|
}
|
|
473
473
|
j(A) {
|
|
474
|
-
A ===
|
|
474
|
+
A === j ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, A ?? "");
|
|
475
475
|
}
|
|
476
476
|
}
|
|
477
|
-
class
|
|
477
|
+
class nt extends lA {
|
|
478
478
|
constructor() {
|
|
479
479
|
super(...arguments), this.type = 3;
|
|
480
480
|
}
|
|
481
481
|
j(A) {
|
|
482
|
-
this.element[this.name] = A ===
|
|
482
|
+
this.element[this.name] = A === j ? void 0 : A;
|
|
483
483
|
}
|
|
484
484
|
}
|
|
485
|
-
class
|
|
485
|
+
class Vt extends lA {
|
|
486
486
|
constructor() {
|
|
487
487
|
super(...arguments), this.type = 4;
|
|
488
488
|
}
|
|
489
489
|
j(A) {
|
|
490
|
-
this.element.toggleAttribute(this.name, !!A && A !==
|
|
490
|
+
this.element.toggleAttribute(this.name, !!A && A !== j);
|
|
491
491
|
}
|
|
492
492
|
}
|
|
493
493
|
class qt extends lA {
|
|
@@ -495,8 +495,8 @@ class qt extends lA {
|
|
|
495
495
|
super(A, t, r, e, p), this.type = 5;
|
|
496
496
|
}
|
|
497
497
|
_$AI(A, t = this) {
|
|
498
|
-
if ((A = Z(this, A, t, 0) ??
|
|
499
|
-
const r = this._$AH, e = A ===
|
|
498
|
+
if ((A = Z(this, A, t, 0) ?? j) === f) return;
|
|
499
|
+
const r = this._$AH, e = A === j && r !== j || A.capture !== r.capture || A.once !== r.once || A.passive !== r.passive, p = A !== j && (r === j || e);
|
|
500
500
|
e && this.element.removeEventListener(this.name, this, r), p && this.element.addEventListener(this.name, this, A), this._$AH = A;
|
|
501
501
|
}
|
|
502
502
|
handleEvent(A) {
|
|
@@ -559,8 +559,8 @@ let X = class extends m {
|
|
|
559
559
|
};
|
|
560
560
|
var mA;
|
|
561
561
|
X._$litElement$ = !0, X.finalized = !0, (mA = b.litElementHydrateSupport) == null || mA.call(b, { LitElement: X });
|
|
562
|
-
const
|
|
563
|
-
|
|
562
|
+
const nA = b.litElementPolyfillSupport;
|
|
563
|
+
nA == null || nA({ LitElement: X });
|
|
564
564
|
(b.litElementVersions ?? (b.litElementVersions = [])).push("4.2.0");
|
|
565
565
|
/**
|
|
566
566
|
* @license
|
|
@@ -577,31 +577,31 @@ const R = (l) => (A, t) => {
|
|
|
577
577
|
* Copyright 2017 Google LLC
|
|
578
578
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
579
579
|
*/
|
|
580
|
-
const yt = { attribute: !0, type: String, converter: _, reflect: !1, hasChanged:
|
|
580
|
+
const yt = { attribute: !0, type: String, converter: _, reflect: !1, hasChanged: cA }, dt = (l = yt, A, t) => {
|
|
581
581
|
const { kind: r, metadata: e } = t;
|
|
582
582
|
let p = globalThis.litPropertyMetadata.get(e);
|
|
583
583
|
if (p === void 0 && globalThis.litPropertyMetadata.set(e, p = /* @__PURE__ */ new Map()), r === "setter" && ((l = Object.create(l)).wrapped = !0), p.set(t.name, l), r === "accessor") {
|
|
584
|
-
const { name:
|
|
584
|
+
const { name: n } = t;
|
|
585
585
|
return { set(S) {
|
|
586
586
|
const q = A.get.call(this);
|
|
587
|
-
A.set.call(this, S), this.requestUpdate(
|
|
587
|
+
A.set.call(this, S), this.requestUpdate(n, q, l);
|
|
588
588
|
}, init(S) {
|
|
589
|
-
return S !== void 0 && this.C(
|
|
589
|
+
return S !== void 0 && this.C(n, void 0, l, S), S;
|
|
590
590
|
} };
|
|
591
591
|
}
|
|
592
592
|
if (r === "setter") {
|
|
593
|
-
const { name:
|
|
593
|
+
const { name: n } = t;
|
|
594
594
|
return function(S) {
|
|
595
|
-
const q = this[
|
|
596
|
-
A.call(this, S), this.requestUpdate(
|
|
595
|
+
const q = this[n];
|
|
596
|
+
A.call(this, S), this.requestUpdate(n, q, l);
|
|
597
597
|
};
|
|
598
598
|
}
|
|
599
599
|
throw Error("Unsupported decorator location: " + r);
|
|
600
600
|
};
|
|
601
|
-
function
|
|
601
|
+
function c(l) {
|
|
602
602
|
return (A, t) => typeof t == "object" ? dt(l, A, t) : ((r, e, p) => {
|
|
603
|
-
const
|
|
604
|
-
return e.constructor.createProperty(p, r),
|
|
603
|
+
const n = e.hasOwnProperty(p);
|
|
604
|
+
return e.constructor.createProperty(p, r), n ? Object.getOwnPropertyDescriptor(e, p) : void 0;
|
|
605
605
|
})(l, A, t);
|
|
606
606
|
}
|
|
607
607
|
/**
|
|
@@ -609,8 +609,8 @@ function j(l) {
|
|
|
609
609
|
* Copyright 2017 Google LLC
|
|
610
610
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
611
611
|
*/
|
|
612
|
-
function
|
|
613
|
-
return
|
|
612
|
+
function T(l) {
|
|
613
|
+
return c({ ...l, state: !0, attribute: !1 });
|
|
614
614
|
}
|
|
615
615
|
/**
|
|
616
616
|
* @license
|
|
@@ -635,18 +635,18 @@ const ut = (l) => typeof l != "string" && "strTag" in l, GA = (l, A, t) => {
|
|
|
635
635
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
636
636
|
*/
|
|
637
637
|
const FA = (l) => ut(l) ? GA(l.strings, l.values) : l;
|
|
638
|
-
let
|
|
639
|
-
function
|
|
638
|
+
let V = FA, bA = !1;
|
|
639
|
+
function ct(l) {
|
|
640
640
|
if (bA)
|
|
641
641
|
throw new Error("lit-localize can only be configured once");
|
|
642
|
-
|
|
642
|
+
V = l, bA = !0;
|
|
643
643
|
}
|
|
644
644
|
/**
|
|
645
645
|
* @license
|
|
646
646
|
* Copyright 2021 Google LLC
|
|
647
647
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
648
648
|
*/
|
|
649
|
-
class
|
|
649
|
+
class jt {
|
|
650
650
|
constructor(A) {
|
|
651
651
|
this.__litLocalizeEventHandler = (t) => {
|
|
652
652
|
t.detail.status === "ready" && this.host.requestUpdate();
|
|
@@ -659,7 +659,7 @@ class ct {
|
|
|
659
659
|
window.removeEventListener(SA, this.__litLocalizeEventHandler);
|
|
660
660
|
}
|
|
661
661
|
}
|
|
662
|
-
const kt = (l) => l.addController(new
|
|
662
|
+
const kt = (l) => l.addController(new jt(l)), Jt = kt;
|
|
663
663
|
/**
|
|
664
664
|
* @license
|
|
665
665
|
* Copyright 2021 Google LLC
|
|
@@ -689,23 +689,23 @@ class MA {
|
|
|
689
689
|
* Copyright 2014 Travis Webb
|
|
690
690
|
* SPDX-License-Identifier: MIT
|
|
691
691
|
*/
|
|
692
|
-
const
|
|
692
|
+
const s = [];
|
|
693
693
|
for (let l = 0; l < 256; l++)
|
|
694
|
-
|
|
694
|
+
s[l] = (l >> 4 & 15).toString(16) + (l & 15).toString(16);
|
|
695
695
|
function Tt(l) {
|
|
696
|
-
let A = 0, t = 8997, r = 0, e = 33826, p = 0,
|
|
696
|
+
let A = 0, t = 8997, r = 0, e = 33826, p = 0, n = 40164, S = 0, q = 52210;
|
|
697
697
|
for (let u = 0; u < l.length; u++)
|
|
698
|
-
t ^= l.charCodeAt(u), A = t * 435, r = e * 435, p =
|
|
699
|
-
return
|
|
698
|
+
t ^= l.charCodeAt(u), A = t * 435, r = e * 435, p = n * 435, S = q * 435, p += t << 8, S += e << 8, r += A >>> 16, t = A & 65535, p += r >>> 16, e = r & 65535, q = S + (p >>> 16) & 65535, n = p & 65535;
|
|
699
|
+
return s[q >> 8] + s[q & 255] + s[n >> 8] + s[n & 255] + s[e >> 8] + s[e & 255] + s[t >> 8] + s[t & 255];
|
|
700
700
|
}
|
|
701
701
|
/**
|
|
702
702
|
* @license
|
|
703
703
|
* Copyright 2020 Google LLC
|
|
704
704
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
705
705
|
*/
|
|
706
|
-
const Xt = "", xt = "h",
|
|
707
|
-
function
|
|
708
|
-
return (A ? xt :
|
|
706
|
+
const Xt = "", xt = "h", st = "s";
|
|
707
|
+
function it(l, A) {
|
|
708
|
+
return (A ? xt : st) + Tt(typeof l == "string" ? l : l.join(Xt));
|
|
709
709
|
}
|
|
710
710
|
/**
|
|
711
711
|
* @license
|
|
@@ -731,7 +731,7 @@ function Kt(l, A, t) {
|
|
|
731
731
|
let p = LA.get(e);
|
|
732
732
|
return p === void 0 && (p = e.values, LA.set(e, p)), {
|
|
733
733
|
...e,
|
|
734
|
-
values: p.map((
|
|
734
|
+
values: p.map((n) => A.values[n])
|
|
735
735
|
};
|
|
736
736
|
}
|
|
737
737
|
}
|
|
@@ -741,20 +741,20 @@ function Kt(l, A, t) {
|
|
|
741
741
|
function Ut(l) {
|
|
742
742
|
const A = typeof l == "string" ? l : l.strings;
|
|
743
743
|
let t = fA.get(A);
|
|
744
|
-
return t === void 0 && (t =
|
|
744
|
+
return t === void 0 && (t = it(A, typeof l != "string" && !("strTag" in l)), fA.set(A, t)), t;
|
|
745
745
|
}
|
|
746
746
|
/**
|
|
747
747
|
* @license
|
|
748
748
|
* Copyright 2021 Google LLC
|
|
749
749
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
750
750
|
*/
|
|
751
|
-
function
|
|
751
|
+
function VA(l) {
|
|
752
752
|
window.dispatchEvent(new CustomEvent(SA, { detail: l }));
|
|
753
753
|
}
|
|
754
754
|
let AA = "", qA, hA, tA, aA, EA, v = new MA();
|
|
755
755
|
v.resolve();
|
|
756
756
|
let g = 0;
|
|
757
|
-
const Wt = (l) => (
|
|
757
|
+
const Wt = (l) => (ct((A, t) => Kt(EA, A, t)), AA = hA = l.sourceLocale, tA = new Set(l.targetLocales), tA.add(l.sourceLocale), aA = l.loadLocale, { getLocale: vt, setLocale: Ot }), vt = () => AA, Ot = (l) => {
|
|
758
758
|
if (l === (qA ?? AA))
|
|
759
759
|
return v.promise;
|
|
760
760
|
if (!tA || !aA)
|
|
@@ -763,15 +763,15 @@ const Wt = (l) => (jt((A, t) => Kt(EA, A, t)), AA = hA = l.sourceLocale, tA = ne
|
|
|
763
763
|
throw new Error("Invalid locale code");
|
|
764
764
|
g++;
|
|
765
765
|
const A = g;
|
|
766
|
-
return qA = l, v.settled && (v = new MA()),
|
|
766
|
+
return qA = l, v.settled && (v = new MA()), VA({ status: "loading", loadingLocale: l }), (l === hA ? (
|
|
767
767
|
// We could switch to the source locale synchronously, but we prefer to
|
|
768
768
|
// queue it on a microtask so that switching locales is consistently
|
|
769
769
|
// asynchronous.
|
|
770
770
|
Promise.resolve({ templates: void 0 })
|
|
771
771
|
) : aA(l)).then((r) => {
|
|
772
|
-
g === A && (AA = l, qA = void 0, EA = r.templates,
|
|
772
|
+
g === A && (AA = l, qA = void 0, EA = r.templates, VA({ status: "ready", readyLocale: l }), v.resolve());
|
|
773
773
|
}, (r) => {
|
|
774
|
-
g === A && (
|
|
774
|
+
g === A && (VA({
|
|
775
775
|
status: "error",
|
|
776
776
|
errorLocale: l,
|
|
777
777
|
errorMessage: r.toString()
|
|
@@ -825,15 +825,15 @@ const Pt = ft(class extends ot {
|
|
|
825
825
|
const t = l.element.classList;
|
|
826
826
|
for (const p of this.st) p in A || (t.remove(p), this.st.delete(p));
|
|
827
827
|
for (const p in A) {
|
|
828
|
-
const
|
|
829
|
-
|
|
828
|
+
const n = !!A[p];
|
|
829
|
+
n === this.st.has(p) || (e = this.nt) != null && e.has(p) || (n ? (t.add(p), this.st.add(p)) : (t.remove(p), this.st.delete(p)));
|
|
830
830
|
}
|
|
831
831
|
return f;
|
|
832
832
|
}
|
|
833
833
|
});
|
|
834
834
|
var mt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, C = (l, A, t, r) => {
|
|
835
|
-
for (var e = r > 1 ? void 0 : r ? Zt(A, t) : A, p = l.length - 1,
|
|
836
|
-
(
|
|
835
|
+
for (var e = r > 1 ? void 0 : r ? Zt(A, t) : A, p = l.length - 1, n; p >= 0; p--)
|
|
836
|
+
(n = l[p]) && (e = (r ? n(A, t, e) : n(e)) || e);
|
|
837
837
|
return r && e && mt(A, t, e), e;
|
|
838
838
|
};
|
|
839
839
|
let o = class extends X {
|
|
@@ -841,7 +841,7 @@ let o = class extends X {
|
|
|
841
841
|
super(...arguments), this.type = "button", this.label = "", this.disabled = !1, this.variant = "contained";
|
|
842
842
|
}
|
|
843
843
|
render() {
|
|
844
|
-
return
|
|
844
|
+
return k`
|
|
845
845
|
<div class="button-wrapper">
|
|
846
846
|
<button
|
|
847
847
|
class=${this.variant}
|
|
@@ -877,7 +877,7 @@ o.styles = N`
|
|
|
877
877
|
button {
|
|
878
878
|
width: 100%;
|
|
879
879
|
padding: 14px 28px;
|
|
880
|
-
border-radius:
|
|
880
|
+
border-radius: 12px;
|
|
881
881
|
font-size: 15px;
|
|
882
882
|
font-weight: 600;
|
|
883
883
|
font-family: "Lato", sans-serif;
|
|
@@ -901,7 +901,7 @@ o.styles = N`
|
|
|
901
901
|
}
|
|
902
902
|
|
|
903
903
|
button.contained:hover {
|
|
904
|
-
background-color: #
|
|
904
|
+
background-color: #333333; /* gris oscuro */
|
|
905
905
|
}
|
|
906
906
|
|
|
907
907
|
/* Outlined */
|
|
@@ -937,23 +937,23 @@ o.styles = N`
|
|
|
937
937
|
}
|
|
938
938
|
`;
|
|
939
939
|
C([
|
|
940
|
-
|
|
940
|
+
c({ type: String })
|
|
941
941
|
], o.prototype, "type", 2);
|
|
942
942
|
C([
|
|
943
|
-
|
|
943
|
+
c({ type: String })
|
|
944
944
|
], o.prototype, "label", 2);
|
|
945
945
|
C([
|
|
946
|
-
|
|
946
|
+
c({ type: Boolean })
|
|
947
947
|
], o.prototype, "disabled", 2);
|
|
948
948
|
C([
|
|
949
|
-
|
|
949
|
+
c({ type: String })
|
|
950
950
|
], o.prototype, "variant", 2);
|
|
951
951
|
o = C([
|
|
952
952
|
R("xact-button")
|
|
953
953
|
], o);
|
|
954
954
|
var Nt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, kA = (l, A, t, r) => {
|
|
955
|
-
for (var e = r > 1 ? void 0 : r ? Rt(A, t) : A, p = l.length - 1,
|
|
956
|
-
(
|
|
955
|
+
for (var e = r > 1 ? void 0 : r ? Rt(A, t) : A, p = l.length - 1, n; p >= 0; p--)
|
|
956
|
+
(n = l[p]) && (e = (r ? n(A, t, e) : n(e)) || e);
|
|
957
957
|
return r && e && Nt(A, t, e), e;
|
|
958
958
|
};
|
|
959
959
|
let E = class extends X {
|
|
@@ -970,19 +970,19 @@ let E = class extends X {
|
|
|
970
970
|
};
|
|
971
971
|
}
|
|
972
972
|
render() {
|
|
973
|
-
return
|
|
973
|
+
return k`
|
|
974
974
|
<div class="card">
|
|
975
975
|
<div class="pill">XactSize x Canada Goose</div>
|
|
976
|
-
<h2 class="title">${
|
|
977
|
-
<p class="subtitle">${
|
|
976
|
+
<h2 class="title">${V("Let's find your perfect size")}</h2>
|
|
977
|
+
<p class="subtitle">${V("Curated luxury. Perfect fit.")}</p>
|
|
978
978
|
|
|
979
979
|
<div class="tips">
|
|
980
|
-
<h4>${
|
|
980
|
+
<h4>${V("Tips")}</h4>
|
|
981
981
|
|
|
982
|
-
${this.renderTip(
|
|
983
|
-
${this.renderTip(
|
|
984
|
-
${this.renderTip(
|
|
985
|
-
${this.renderTip(
|
|
982
|
+
${this.renderTip(V("Good Lighting"), V("Avoid backlighting"))}
|
|
983
|
+
${this.renderTip(V("Clean Background"), V("Use a plain wall"))}
|
|
984
|
+
${this.renderTip(V("Clothes"), V("Form-fitting gear"))}
|
|
985
|
+
${this.renderTip(V("Framing"), V("Full body shot"))}
|
|
986
986
|
</div>
|
|
987
987
|
|
|
988
988
|
<div class="input-group">
|
|
@@ -992,7 +992,7 @@ let E = class extends X {
|
|
|
992
992
|
type="number"
|
|
993
993
|
min="50"
|
|
994
994
|
max="300"
|
|
995
|
-
placeholder=${
|
|
995
|
+
placeholder=${V("Enter your height (cm)")}
|
|
996
996
|
required
|
|
997
997
|
tabindex="1"
|
|
998
998
|
/>
|
|
@@ -1000,20 +1000,20 @@ let E = class extends X {
|
|
|
1000
1000
|
|
|
1001
1001
|
<div class="cta">
|
|
1002
1002
|
<xact-button
|
|
1003
|
-
label="${
|
|
1003
|
+
label="${V("Let's get started! →")}"
|
|
1004
1004
|
style="--brand-primary: #000;"
|
|
1005
1005
|
@click=${this.handleStart}
|
|
1006
1006
|
></xact-button>
|
|
1007
1007
|
</div>
|
|
1008
1008
|
|
|
1009
1009
|
<p class="disclaimer">
|
|
1010
|
-
${
|
|
1010
|
+
${V("By using Xactsize, you agree to our Terms and Privacy Policy.")}
|
|
1011
1011
|
</p>
|
|
1012
1012
|
</div>
|
|
1013
1013
|
`;
|
|
1014
1014
|
}
|
|
1015
1015
|
renderTip(l, A) {
|
|
1016
|
-
return
|
|
1016
|
+
return k`
|
|
1017
1017
|
<div class="tip">
|
|
1018
1018
|
<span class="check">
|
|
1019
1019
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
@@ -1092,32 +1092,58 @@ E.styles = N`
|
|
|
1092
1092
|
|
|
1093
1093
|
.tip {
|
|
1094
1094
|
display: flex;
|
|
1095
|
-
gap:
|
|
1096
|
-
align-items:
|
|
1095
|
+
gap: 12px;
|
|
1096
|
+
align-items: center;
|
|
1097
1097
|
}
|
|
1098
1098
|
|
|
1099
|
-
|
|
1099
|
+
|
|
1100
1100
|
.check {
|
|
1101
|
-
width:
|
|
1102
|
-
height:
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
display: inline-flex;
|
|
1101
|
+
width: 16px;
|
|
1102
|
+
height: 16px;
|
|
1103
|
+
flex-shrink: 0;
|
|
1104
|
+
display: flex;
|
|
1106
1105
|
align-items: center;
|
|
1107
1106
|
justify-content: center;
|
|
1108
|
-
|
|
1107
|
+
animation: checkAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
|
|
1109
1108
|
}
|
|
1110
1109
|
|
|
1111
1110
|
.check svg {
|
|
1112
|
-
width:
|
|
1113
|
-
height:
|
|
1114
|
-
stroke: #
|
|
1111
|
+
width: 16px;
|
|
1112
|
+
height: 16px;
|
|
1113
|
+
stroke: #000;
|
|
1115
1114
|
stroke-width: 2.5;
|
|
1116
1115
|
fill: none;
|
|
1117
1116
|
stroke-linecap: round;
|
|
1118
1117
|
stroke-linejoin: round;
|
|
1119
1118
|
}
|
|
1120
1119
|
|
|
1120
|
+
.tip:nth-child(2) .check {
|
|
1121
|
+
animation-delay: 0.1s;
|
|
1122
|
+
}
|
|
1123
|
+
|
|
1124
|
+
.tip:nth-child(3) .check {
|
|
1125
|
+
animation-delay: 0.2s;
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
.tip:nth-child(4) .check {
|
|
1129
|
+
animation-delay: 0.3s;
|
|
1130
|
+
}
|
|
1131
|
+
|
|
1132
|
+
.tip:nth-child(5) .check {
|
|
1133
|
+
animation-delay: 0.4s;
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
@keyframes checkAppear {
|
|
1137
|
+
0% {
|
|
1138
|
+
transform: scale(0);
|
|
1139
|
+
opacity: 0;
|
|
1140
|
+
}
|
|
1141
|
+
100% {
|
|
1142
|
+
transform: scale(1);
|
|
1143
|
+
opacity: 1;
|
|
1144
|
+
}
|
|
1145
|
+
}
|
|
1146
|
+
|
|
1121
1147
|
.tip strong {
|
|
1122
1148
|
display: block;
|
|
1123
1149
|
font-size: 14px;
|
|
@@ -1179,26 +1205,26 @@ E.styles = N`
|
|
|
1179
1205
|
}
|
|
1180
1206
|
`;
|
|
1181
1207
|
kA([
|
|
1182
|
-
|
|
1208
|
+
c({ type: Number })
|
|
1183
1209
|
], E.prototype, "height", 2);
|
|
1184
1210
|
kA([
|
|
1185
|
-
|
|
1211
|
+
c({ type: Function })
|
|
1186
1212
|
], E.prototype, "onStartMeasurement", 2);
|
|
1187
1213
|
E = kA([
|
|
1188
1214
|
R("xact-step-one"),
|
|
1189
1215
|
Y()
|
|
1190
1216
|
], E);
|
|
1191
1217
|
var Ht = Object.getOwnPropertyDescriptor, zt = (l, A, t, r) => {
|
|
1192
|
-
for (var e = r > 1 ? void 0 : r ? Ht(A, t) : A, p = l.length - 1,
|
|
1193
|
-
(
|
|
1218
|
+
for (var e = r > 1 ? void 0 : r ? Ht(A, t) : A, p = l.length - 1, n; p >= 0; p--)
|
|
1219
|
+
(n = l[p]) && (e = n(e) || e);
|
|
1194
1220
|
return e;
|
|
1195
1221
|
};
|
|
1196
1222
|
let yA = class extends X {
|
|
1197
1223
|
render() {
|
|
1198
|
-
return
|
|
1224
|
+
return k`
|
|
1199
1225
|
<footer class="modal-footer">
|
|
1200
1226
|
<span>
|
|
1201
|
-
<span class="powered-by">${
|
|
1227
|
+
<span class="powered-by">${V("Powered by")}</span>
|
|
1202
1228
|
<a tabindex="0" class="xactsize-link" href="http://xactsize.com" target="_blank" rel="noopener">
|
|
1203
1229
|
<svg class="xactsize-icon" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1204
1230
|
<path d="M5.82764 11.3511L11.5446 7.80768V11.3511H5.82764Z" fill="url(#paint0_linear_2010_6151)"/>
|
|
@@ -1283,8 +1309,8 @@ yA = zt([
|
|
|
1283
1309
|
Y()
|
|
1284
1310
|
], yA);
|
|
1285
1311
|
var Gt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, D = (l, A, t, r) => {
|
|
1286
|
-
for (var e = r > 1 ? void 0 : r ? Ft(A, t) : A, p = l.length - 1,
|
|
1287
|
-
(
|
|
1312
|
+
for (var e = r > 1 ? void 0 : r ? Ft(A, t) : A, p = l.length - 1, n; p >= 0; p--)
|
|
1313
|
+
(n = l[p]) && (e = (r ? n(A, t, e) : n(e)) || e);
|
|
1288
1314
|
return r && e && Gt(A, t, e), e;
|
|
1289
1315
|
};
|
|
1290
1316
|
let P = class extends X {
|
|
@@ -1292,7 +1318,7 @@ let P = class extends X {
|
|
|
1292
1318
|
super(...arguments), this.productName = "", this.recommendedSize = "";
|
|
1293
1319
|
}
|
|
1294
1320
|
render() {
|
|
1295
|
-
return
|
|
1321
|
+
return k`
|
|
1296
1322
|
<div class="image-container">
|
|
1297
1323
|
<!-- Imagem da roupa como SVG exportado -->
|
|
1298
1324
|
<svg class="product-image" width="180" height="240" viewBox="0 0 180 240" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -1331,21 +1357,21 @@ let P = class extends X {
|
|
|
1331
1357
|
|
|
1332
1358
|
|
|
1333
1359
|
|
|
1334
|
-
<h2 class="title">${
|
|
1360
|
+
<h2 class="title">${V("Your ideal size")}</h2>
|
|
1335
1361
|
<p class="description">
|
|
1336
|
-
${
|
|
1362
|
+
${V("Based on your measurements and the exact dimensions of the garment, the size recommendation provided is the most accurate for an ideal fit.")}
|
|
1337
1363
|
</p>
|
|
1338
1364
|
|
|
1339
1365
|
<div class="buttons">
|
|
1340
1366
|
<xact-button
|
|
1341
1367
|
variant="outlined"
|
|
1342
1368
|
@click=${this.onRetry}
|
|
1343
|
-
label=${
|
|
1369
|
+
label=${V("Measure Again")}>
|
|
1344
1370
|
</xact-button>
|
|
1345
1371
|
|
|
1346
1372
|
<xact-button
|
|
1347
1373
|
@click=${this.onAccept}
|
|
1348
|
-
label=${
|
|
1374
|
+
label=${V("Accept Suggestion")}>
|
|
1349
1375
|
</xact-button>
|
|
1350
1376
|
</div>
|
|
1351
1377
|
`;
|
|
@@ -1427,24 +1453,24 @@ P.styles = N`
|
|
|
1427
1453
|
}
|
|
1428
1454
|
`;
|
|
1429
1455
|
D([
|
|
1430
|
-
|
|
1456
|
+
c({ type: String })
|
|
1431
1457
|
], P.prototype, "productName", 2);
|
|
1432
1458
|
D([
|
|
1433
|
-
|
|
1459
|
+
c({ type: String })
|
|
1434
1460
|
], P.prototype, "recommendedSize", 2);
|
|
1435
1461
|
D([
|
|
1436
|
-
|
|
1462
|
+
c({ type: Function })
|
|
1437
1463
|
], P.prototype, "onAccept", 2);
|
|
1438
1464
|
D([
|
|
1439
|
-
|
|
1465
|
+
c({ type: Function })
|
|
1440
1466
|
], P.prototype, "onRetry", 2);
|
|
1441
1467
|
P = D([
|
|
1442
1468
|
R("xact-step-result"),
|
|
1443
1469
|
Y()
|
|
1444
1470
|
], P);
|
|
1445
1471
|
var Mt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, JA = (l, A, t, r) => {
|
|
1446
|
-
for (var e = r > 1 ? void 0 : r ? ht(A, t) : A, p = l.length - 1,
|
|
1447
|
-
(
|
|
1472
|
+
for (var e = r > 1 ? void 0 : r ? ht(A, t) : A, p = l.length - 1, n; p >= 0; p--)
|
|
1473
|
+
(n = l[p]) && (e = (r ? n(A, t, e) : n(e)) || e);
|
|
1448
1474
|
return r && e && Mt(A, t, e), e;
|
|
1449
1475
|
};
|
|
1450
1476
|
let I = class extends X {
|
|
@@ -1453,33 +1479,33 @@ let I = class extends X {
|
|
|
1453
1479
|
}
|
|
1454
1480
|
render() {
|
|
1455
1481
|
const l = Array.from({ length: 24 }, (A, t) => t);
|
|
1456
|
-
return
|
|
1482
|
+
return k`
|
|
1457
1483
|
<div class="component-content">
|
|
1458
1484
|
<div class="header-section">
|
|
1459
|
-
<h2 class="header-text">${
|
|
1485
|
+
<h2 class="header-text">${V("Before you begin")}</h2>
|
|
1460
1486
|
<p class="description-text">
|
|
1461
|
-
${
|
|
1487
|
+
${V("To ensure accurate measurements, we'll take two scans: one from the front and one from the side. Maintain an upright posture with your arms slightly away from your body and stretched out. In the side view, stand up straight with your arms straight and aligned with your body.")}
|
|
1462
1488
|
</p>
|
|
1463
1489
|
</div>
|
|
1464
1490
|
|
|
1465
1491
|
<div class="main-section">
|
|
1466
1492
|
<div class="tips-section">
|
|
1467
|
-
<h3>${
|
|
1493
|
+
<h3>${V("Tips")}</h3>
|
|
1468
1494
|
<div class="tip-item">
|
|
1469
|
-
<span class="tip-title">${
|
|
1470
|
-
<p class="tip-text">${
|
|
1495
|
+
<span class="tip-title">${V("Good Lighting")}</span>
|
|
1496
|
+
<p class="tip-text">${V("Choose a well-lit area where you can see your image clearly.")}</p>
|
|
1471
1497
|
</div>
|
|
1472
1498
|
<div class="tip-item">
|
|
1473
|
-
<span class="tip-title">${
|
|
1474
|
-
<p class="tip-text">${
|
|
1499
|
+
<span class="tip-title">${V("Clean Background")}</span>
|
|
1500
|
+
<p class="tip-text">${V("Position yourself against a plain background.")}</p>
|
|
1475
1501
|
</div>
|
|
1476
1502
|
<div class="tip-item">
|
|
1477
|
-
<span class="tip-title">${
|
|
1478
|
-
<p class="tip-text">${
|
|
1503
|
+
<span class="tip-title">${V("Clothes")}</span>
|
|
1504
|
+
<p class="tip-text">${V("Wear clothes that you usually wear on a daily basis.")}</p>
|
|
1479
1505
|
</div>
|
|
1480
1506
|
<div class="tip-item">
|
|
1481
|
-
<span class="tip-title">${
|
|
1482
|
-
<p class="tip-text">${
|
|
1507
|
+
<span class="tip-title">${V("Framing")}</span>
|
|
1508
|
+
<p class="tip-text">${V("Make sure your entire body is visible. The app will guide you.")}</p>
|
|
1483
1509
|
</div>
|
|
1484
1510
|
</div>
|
|
1485
1511
|
|
|
@@ -1591,13 +1617,13 @@ let I = class extends X {
|
|
|
1591
1617
|
var A;
|
|
1592
1618
|
(A = this.onStep2advancement) == null || A.call(this);
|
|
1593
1619
|
}}
|
|
1594
|
-
label="${
|
|
1620
|
+
label="${V("To start")}"
|
|
1595
1621
|
></xact-button>
|
|
1596
1622
|
</div>
|
|
1597
1623
|
<div class="snow-layer">
|
|
1598
1624
|
${l.map((A) => {
|
|
1599
1625
|
const t = A * 37 % 100, r = A % 6 * 0.35, e = A % 5 * 0.4;
|
|
1600
|
-
return
|
|
1626
|
+
return k`<span
|
|
1601
1627
|
class="snowflake"
|
|
1602
1628
|
style="left:${t}%; animation-delay:${r}s, ${e}s;"
|
|
1603
1629
|
></span>`;
|
|
@@ -1799,10 +1825,10 @@ I.styles = N`
|
|
|
1799
1825
|
|
|
1800
1826
|
`;
|
|
1801
1827
|
JA([
|
|
1802
|
-
|
|
1828
|
+
c({ type: Number })
|
|
1803
1829
|
], I.prototype, "height", 2);
|
|
1804
1830
|
JA([
|
|
1805
|
-
|
|
1831
|
+
c({ type: Function })
|
|
1806
1832
|
], I.prototype, "onStep2advancement", 2);
|
|
1807
1833
|
I = JA([
|
|
1808
1834
|
R("xact-step-informs"),
|
|
@@ -1810,8 +1836,8 @@ I = JA([
|
|
|
1810
1836
|
], I);
|
|
1811
1837
|
const oA = "data:image/svg+xml,%3csvg%20width='22'%20height='40'%20viewBox='0%200%2022%2040'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M21.517%200L0%2013.3362V0H21.517Z'%20fill='white'/%3e%3cpath%20d='M21.517%2013.339L0%2026.6724V13.3362H21.517V13.339Z'%20fill='white'/%3e%3cpath%20d='M21.517%2026.6755L0%2040.0089V26.6726H21.517V26.6755Z'%20fill='%231C28BA'/%3e%3c/svg%3e", Et = "data:image/svg+xml,%3csvg%20width='22'%20height='41'%20viewBox='0%200%2022%2041'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M21.517%200.00878906L0%2013.345V0.00878906H21.517Z'%20fill='white'/%3e%3cpath%20d='M21.517%2013.3478L0%2026.6812V13.345H21.517V13.3478Z'%20fill='%231C28BA'/%3e%3cpath%20d='M21.517%2026.6843L0%2040.0176V26.6814H21.517V26.6843Z'%20fill='white'/%3e%3c/svg%3e", It = "data:image/svg+xml,%3csvg%20width='22'%20height='41'%20viewBox='0%200%2022%2041'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M21.517%200.0204381L0%2013.3538V0.0175781H21.517V0.0204381Z'%20fill='%231C28BA'/%3e%3cpath%20d='M21.517%2013.3538L0%2026.69V13.3538H21.517Z'%20fill='white'/%3e%3cpath%20d='M21.517%2026.693L0%2040.0264V26.6902H21.517V26.693Z'%20fill='white'/%3e%3c/svg%3e";
|
|
1812
1838
|
var wt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, d = (l, A, t, r) => {
|
|
1813
|
-
for (var e = r > 1 ? void 0 : r ? Yt(A, t) : A, p = l.length - 1,
|
|
1814
|
-
(
|
|
1839
|
+
for (var e = r > 1 ? void 0 : r ? Yt(A, t) : A, p = l.length - 1, n; p >= 0; p--)
|
|
1840
|
+
(n = l[p]) && (e = (r ? n(A, t, e) : n(e)) || e);
|
|
1815
1841
|
return r && e && wt(A, t, e), e;
|
|
1816
1842
|
};
|
|
1817
1843
|
const { getLocale: gt, setLocale: PA } = Wt({
|
|
@@ -1821,7 +1847,7 @@ const { getLocale: gt, setLocale: PA } = Wt({
|
|
|
1821
1847
|
});
|
|
1822
1848
|
let a = class extends X {
|
|
1823
1849
|
constructor() {
|
|
1824
|
-
super(...arguments), this.spinnerFrame = 0, this.apiKey = "DB8mP9gStPfvdyeYbbuCV4Zf3SH745dI", this.tenantId = "1", this.productSku = "123456", this.apiUrl = "https://xactsize-dotnet-api-923169850574.southamerica-east1.run.app/api/measurer/measure/body", this._culture = "pt-BR", this.measurerKey = "", this._isLocaleLoading = !1, this.showModal = !1, this.step = 1, this.height = 0, this.recommendedSize = "", this.measurements = {}, this.errorMessage = "", this.instructionMessage =
|
|
1850
|
+
super(...arguments), this.spinnerFrame = 0, this.apiKey = "DB8mP9gStPfvdyeYbbuCV4Zf3SH745dI", this.tenantId = "1", this.productSku = "123456", this.apiUrl = "https://xactsize-dotnet-api-923169850574.southamerica-east1.run.app/api/measurer/measure/body", this._culture = "pt-BR", this.measurerKey = "", this._isLocaleLoading = !1, this.showModal = !1, this.step = 1, this.height = 0, this.recommendedSize = "", this.measurements = {}, this.errorMessage = "", this.instructionMessage = V("Position yourself in front of the camera"), this.shouldStartMeasurement = !1, this.isLoading = !1, this.isFetching = !1, this.videoElement = null, this.stream = null, this.poolingTimeout = null, this.instructionMessageTimeout = null, this.cameras = [], this.currentCameraId = null, this.snowflakesCache = null;
|
|
1825
1851
|
}
|
|
1826
1852
|
firstUpdated() {
|
|
1827
1853
|
this.startSpinnerAnimation();
|
|
@@ -1856,45 +1882,45 @@ let a = class extends X {
|
|
|
1856
1882
|
}
|
|
1857
1883
|
get errorMap() {
|
|
1858
1884
|
return {
|
|
1859
|
-
ERR_RIGHT_ARM_TOO_HIGH:
|
|
1860
|
-
ERR_LEFT_ARM_TOO_HIGH:
|
|
1861
|
-
ERR_ARMS_NOT_RAISED:
|
|
1862
|
-
ERR_RIGHT_ARM_NOT_RAISED:
|
|
1863
|
-
ERR_LEFT_ARM_NOT_RAISED:
|
|
1864
|
-
ERR_BODY_LANDMARKS_NOT_DETECTED:
|
|
1865
|
-
ERR_HIPS_NOT_VISIBLE:
|
|
1866
|
-
ERR_TOO_CLOSE_TO_CAMERA:
|
|
1867
|
-
ERR_NOT_SIDE_VIEW:
|
|
1868
|
-
ERR_INVALID_CLOTHING_TYPE:
|
|
1869
|
-
ERR_UPPER_BODY_NOT_VISIBLE:
|
|
1870
|
-
ERR_HEAD_TOO_CLOSE_TO_EDGE:
|
|
1871
|
-
ERR_LOWER_BODY_NOT_VISIBLE:
|
|
1872
|
-
ERR_FEET_TOO_CLOSE_TO_EDGE:
|
|
1873
|
-
ERR_BODY_TOO_CLOSE_TO_EDGE:
|
|
1874
|
-
ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_LEFT:
|
|
1875
|
-
ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_RIGHT:
|
|
1876
|
-
ERR_SHOULDERS_NOT_VISIBLE:
|
|
1877
|
-
ERR_HEIGHT_MEASUREMENT_FAILED:
|
|
1878
|
-
ERR_HEAD_POINT_NOT_DETECTED:
|
|
1879
|
-
ERR_INCORRECT_POSTURE:
|
|
1880
|
-
ERR_HEM_MEASUREMENT_FAILED:
|
|
1881
|
-
ERR_SHOULDER_MEASUREMENT_FAILED:
|
|
1882
|
-
ERR_ARM_NOT_STRETCHED:
|
|
1883
|
-
ERR_LEGS_NOT_DETECTED:
|
|
1884
|
-
ERR_HIPS_MEASUREMENT_FAILED:
|
|
1885
|
-
ERR_WAIST_MEASUREMENT_FAILED:
|
|
1886
|
-
ERR_INVALID_MEASURE_SIDE_VIEW:
|
|
1887
|
-
ERR_INVALID_BODY_HEIGHT_TYPE:
|
|
1888
|
-
ERR_IMAGE_LOAD_FAILED:
|
|
1889
|
-
ERR_HEIGHT_INVALID:
|
|
1885
|
+
ERR_RIGHT_ARM_TOO_HIGH: V("Lower your right arm", { id: "ERR_RIGHT_ARM_TOO_HIGH" }),
|
|
1886
|
+
ERR_LEFT_ARM_TOO_HIGH: V("Lower your left arm", { id: "ERR_LEFT_ARM_TOO_HIGH" }),
|
|
1887
|
+
ERR_ARMS_NOT_RAISED: V("Raise both arms to a 45-degree angle", { id: "ERR_ARMS_NOT_RAISED" }),
|
|
1888
|
+
ERR_RIGHT_ARM_NOT_RAISED: V("Raise your right arm to a 45-degree angle", { id: "ERR_RIGHT_ARM_NOT_RAISED" }),
|
|
1889
|
+
ERR_LEFT_ARM_NOT_RAISED: V("Raise your left arm to a 45-degree angle", { id: "ERR_LEFT_ARM_NOT_RAISED" }),
|
|
1890
|
+
ERR_BODY_LANDMARKS_NOT_DETECTED: V("Ensure your full body is visible in the camera", { id: "ERR_BODY_LANDMARKS_NOT_DETECTED" }),
|
|
1891
|
+
ERR_HIPS_NOT_VISIBLE: V("Adjust your position to show your hips", { id: "ERR_HIPS_NOT_VISIBLE" }),
|
|
1892
|
+
ERR_TOO_CLOSE_TO_CAMERA: V("Step back from the camera", { id: "ERR_TOO_CLOSE_TO_CAMERA" }),
|
|
1893
|
+
ERR_NOT_SIDE_VIEW: V("Turn to show your side profile", { id: "ERR_NOT_SIDE_VIEW" }),
|
|
1894
|
+
ERR_INVALID_CLOTHING_TYPE: V("This clothing type is not supported; please contact support", { id: "ERR_INVALID_CLOTHING_TYPE" }),
|
|
1895
|
+
ERR_UPPER_BODY_NOT_VISIBLE: V("Adjust your position to show your upper body", { id: "ERR_UPPER_BODY_NOT_VISIBLE" }),
|
|
1896
|
+
ERR_HEAD_TOO_CLOSE_TO_EDGE: V("Move your head away from the edge of the frame", { id: "ERR_HEAD_TOO_CLOSE_TO_EDGE" }),
|
|
1897
|
+
ERR_LOWER_BODY_NOT_VISIBLE: V("Adjust your position to show your lower body", { id: "ERR_LOWER_BODY_NOT_VISIBLE" }),
|
|
1898
|
+
ERR_FEET_TOO_CLOSE_TO_EDGE: V("Move your feet away from the edge of the frame", { id: "ERR_FEET_TOO_CLOSE_TO_EDGE" }),
|
|
1899
|
+
ERR_BODY_TOO_CLOSE_TO_EDGE: V("Move your body away from the edge of the frame", { id: "ERR_BODY_TOO_CLOSE_TO_EDGE" }),
|
|
1900
|
+
ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_LEFT: V("Move to the left to center your body", { id: "ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_LEFT" }),
|
|
1901
|
+
ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_RIGHT: V("Move to the right to center your body", { id: "ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_RIGHT" }),
|
|
1902
|
+
ERR_SHOULDERS_NOT_VISIBLE: V("Adjust your position to show your shoulders", { id: "ERR_SHOULDERS_NOT_VISIBLE" }),
|
|
1903
|
+
ERR_HEIGHT_MEASUREMENT_FAILED: V("Stand straight and ensure your full body is visible", { id: "ERR_HEIGHT_MEASUREMENT_FAILED" }),
|
|
1904
|
+
ERR_HEAD_POINT_NOT_DETECTED: V("Ensure your head is fully visible in the frame", { id: "ERR_HEAD_POINT_NOT_DETECTED" }),
|
|
1905
|
+
ERR_INCORRECT_POSTURE: V("Stand straight with your shoulders back", { id: "ERR_INCORRECT_POSTURE" }),
|
|
1906
|
+
ERR_HEM_MEASUREMENT_FAILED: V("Ensure your clothing hem is visible and clear", { id: "ERR_HEM_MEASUREMENT_FAILED" }),
|
|
1907
|
+
ERR_SHOULDER_MEASUREMENT_FAILED: V("Keep your shoulders relaxed and visible", { id: "ERR_SHOULDER_MEASUREMENT_FAILED" }),
|
|
1908
|
+
ERR_ARM_NOT_STRETCHED: V("Stretch your arms fully", { id: "ERR_ARM_NOT_STRETCHED" }),
|
|
1909
|
+
ERR_LEGS_NOT_DETECTED: V("Ensure your legs are fully visible in the frame", { id: "ERR_LEGS_NOT_DETECTED" }),
|
|
1910
|
+
ERR_HIPS_MEASUREMENT_FAILED: V("Stand straight and ensure your hips are visible", { id: "ERR_HIPS_MEASUREMENT_FAILED" }),
|
|
1911
|
+
ERR_WAIST_MEASUREMENT_FAILED: V("Stand straight and ensure your waist is visible", { id: "ERR_WAIST_MEASUREMENT_FAILED" }),
|
|
1912
|
+
ERR_INVALID_MEASURE_SIDE_VIEW: V("Turn to show a clear side profile", { id: "ERR_INVALID_MEASURE_SIDE_VIEW" }),
|
|
1913
|
+
ERR_INVALID_BODY_HEIGHT_TYPE: V("Ensure your full body is visible for height measurement", { id: "ERR_INVALID_BODY_HEIGHT_TYPE" }),
|
|
1914
|
+
ERR_IMAGE_LOAD_FAILED: V("Try again later; the image could not be processed", { id: "ERR_IMAGE_LOAD_FAILED" }),
|
|
1915
|
+
ERR_HEIGHT_INVALID: V("Height must be between 50 and 300 cm", { id: "ERR_HEIGHT_INVALID" })
|
|
1890
1916
|
};
|
|
1891
1917
|
}
|
|
1892
1918
|
getTranslatedMessage(l) {
|
|
1893
1919
|
const A = this.errorMap[l];
|
|
1894
|
-
return A || (console.info("Error code is missing", l),
|
|
1920
|
+
return A || (console.info("Error code is missing", l), V("An unexpected error occurred"));
|
|
1895
1921
|
}
|
|
1896
1922
|
connectedCallback() {
|
|
1897
|
-
super.connectedCallback(), document.addEventListener("keydown", this.handleEscKey.bind(this));
|
|
1923
|
+
super.connectedCallback(), document.addEventListener("keydown", this.handleEscKey.bind(this)), this.snowflakesCache = this.generateSnowflakes();
|
|
1898
1924
|
}
|
|
1899
1925
|
disconnectedCallback() {
|
|
1900
1926
|
super.disconnectedCallback(), document.removeEventListener("keydown", this.handleEscKey.bind(this)), this.stopPolling(), clearInterval(this.spinnerInterval);
|
|
@@ -1903,7 +1929,7 @@ let a = class extends X {
|
|
|
1903
1929
|
l.key === "Escape" && this.showModal && this.closeModal();
|
|
1904
1930
|
}
|
|
1905
1931
|
openModal() {
|
|
1906
|
-
this.showModal = !0, this.step = 1, this.height = 0, this.instructionMessage =
|
|
1932
|
+
this.showModal = !0, this.step = 1, this.height = 0, this.instructionMessage = V("Position yourself in front of the camera");
|
|
1907
1933
|
}
|
|
1908
1934
|
closeModal() {
|
|
1909
1935
|
this.showModal = !1, this.onMeasurementCanceled && typeof this.onMeasurementCanceled == "function" && this.onMeasurementCanceled(), this.stopPolling(), this.dispatchEvent(new CustomEvent("measurementCanceled", { detail: {} }));
|
|
@@ -1926,7 +1952,7 @@ let a = class extends X {
|
|
|
1926
1952
|
try {
|
|
1927
1953
|
this.stream = await navigator.mediaDevices.getUserMedia({ video: !0 }), this.videoElement && (this.videoElement.srcObject = this.stream, await this.videoElement.play(), await this.loadCameras(), this.startPolling());
|
|
1928
1954
|
} catch {
|
|
1929
|
-
this.errorMessage =
|
|
1955
|
+
this.errorMessage = V("Error accessing webcam");
|
|
1930
1956
|
}
|
|
1931
1957
|
}
|
|
1932
1958
|
async loadCameras() {
|
|
@@ -1947,7 +1973,7 @@ let a = class extends X {
|
|
|
1947
1973
|
video: { deviceId: { exact: this.currentCameraId } }
|
|
1948
1974
|
}), this.videoElement && (this.videoElement.srcObject = this.stream, await this.videoElement.play(), this.startPolling());
|
|
1949
1975
|
} catch {
|
|
1950
|
-
this.errorMessage =
|
|
1976
|
+
this.errorMessage = V("Error switching camera");
|
|
1951
1977
|
} finally {
|
|
1952
1978
|
this.isLoading = !1;
|
|
1953
1979
|
}
|
|
@@ -1960,7 +1986,7 @@ let a = class extends X {
|
|
|
1960
1986
|
const t = A.getContext("2d");
|
|
1961
1987
|
t == null || t.drawImage(this.videoElement, 0, 0, A.width, A.height);
|
|
1962
1988
|
const r = await new Promise(
|
|
1963
|
-
(
|
|
1989
|
+
(n) => A.toBlob((S) => n(S), "image/jpeg")
|
|
1964
1990
|
), e = new File([r], "frame.jpg", { type: "image/jpeg" }), p = new FormData();
|
|
1965
1991
|
p.append("image", e), p.append("height", this.height.toString()), p.append("productSku", this.productSku), this.measurerKey && p.append("measurerKey", this.measurerKey);
|
|
1966
1992
|
try {
|
|
@@ -1975,12 +2001,12 @@ let a = class extends X {
|
|
|
1975
2001
|
"X-Api-Key": this.apiKey
|
|
1976
2002
|
}
|
|
1977
2003
|
})).json();
|
|
1978
|
-
this.isFetching = !1, this.isLoading = !1, this.errorMessage = JSON.stringify(S), S.success ? (this.measurements = S.measurements, this.recommendedSize = S.chosenSize, this.instructionMessage =
|
|
1979
|
-
this.recommendedSize || (this.instructionMessage =
|
|
2004
|
+
this.isFetching = !1, this.isLoading = !1, this.errorMessage = JSON.stringify(S), S.success ? (this.measurements = S.measurements, this.recommendedSize = S.chosenSize, this.instructionMessage = V("Measurement successful!"), this.stopPolling(), this.step = 4) : (this.instructionMessage = this.getTranslatedMessage(S.message || "UNKNOWN_ERROR"), this.instructionMessageTimeout = setTimeout(() => {
|
|
2005
|
+
this.recommendedSize || (this.instructionMessage = V("Position yourself in front of the camera"), this.poolingTimeout = setTimeout(l, 0));
|
|
1980
2006
|
}, 2e3));
|
|
1981
2007
|
} catch {
|
|
1982
|
-
this.isFetching = !1, this.isLoading = !1, this.instructionMessage =
|
|
1983
|
-
this.recommendedSize || (this.instructionMessage =
|
|
2008
|
+
this.isFetching = !1, this.isLoading = !1, this.instructionMessage = V("Error processing measurement"), this.instructionMessageTimeout = setTimeout(() => {
|
|
2009
|
+
this.recommendedSize || (this.instructionMessage = V("Position yourself in front of the camera"), this.poolingTimeout = setTimeout(l, 0));
|
|
1984
2010
|
}, 2e3);
|
|
1985
2011
|
}
|
|
1986
2012
|
};
|
|
@@ -1998,16 +2024,27 @@ let a = class extends X {
|
|
|
1998
2024
|
stopMeasurement() {
|
|
1999
2025
|
this.resetMeasurement(), this.showModal = !1;
|
|
2000
2026
|
}
|
|
2027
|
+
generateSnowflakes() {
|
|
2028
|
+
const l = [];
|
|
2029
|
+
for (let t = 0; t < 80; t++) {
|
|
2030
|
+
const r = Math.random() * 100, e = 8 + Math.random() * 17, p = -Math.random() * 30;
|
|
2031
|
+
l.push(k`<span class="snowflake" style="left:${r}%; animation-duration:${e.toFixed(2)}s; animation-delay:${p.toFixed(2)}s;"></span>`);
|
|
2032
|
+
}
|
|
2033
|
+
return k`${l}`;
|
|
2034
|
+
}
|
|
2035
|
+
renderSnowflakes() {
|
|
2036
|
+
return this.snowflakesCache || k``;
|
|
2037
|
+
}
|
|
2001
2038
|
render() {
|
|
2002
|
-
return this._isLocaleLoading ?
|
|
2039
|
+
return this._isLocaleLoading ? k`<div hidden></div>` : k`
|
|
2003
2040
|
<xact-button
|
|
2004
2041
|
class="launch-btn"
|
|
2005
2042
|
style="--brand-primary: #000; --text-inverse: #fff; --brand-primary-hover: #111;"
|
|
2006
2043
|
@click=${this.openModal}
|
|
2007
|
-
label="${
|
|
2044
|
+
label="${V("Find your Xactsize")}"
|
|
2008
2045
|
></xact-button>
|
|
2009
2046
|
|
|
2010
|
-
${this.showModal ?
|
|
2047
|
+
${this.showModal ? k`
|
|
2011
2048
|
<div class="modal">
|
|
2012
2049
|
<div class="modal-content">
|
|
2013
2050
|
<div style="display: flex; justify-content: space-between" class="modal-title-container">
|
|
@@ -2018,21 +2055,21 @@ let a = class extends X {
|
|
|
2018
2055
|
</span>
|
|
2019
2056
|
</div>
|
|
2020
2057
|
|
|
2021
|
-
${this.step === 1 ?
|
|
2058
|
+
${this.step === 1 ? k`
|
|
2022
2059
|
<xact-step-one .onStartMeasurement=${(l) => {
|
|
2023
2060
|
this.height = l, this.startMeasurement();
|
|
2024
2061
|
}}></xact-step-one>
|
|
2025
2062
|
` : ""}
|
|
2026
|
-
${this.step === 2 ?
|
|
2063
|
+
${this.step === 2 ? k`
|
|
2027
2064
|
<xact-step-informs .onStep2advancement=${() => {
|
|
2028
2065
|
this.step2advancement();
|
|
2029
2066
|
}}></xact-step-informs>
|
|
2030
2067
|
` : ""}
|
|
2031
2068
|
|
|
2032
|
-
${this.step === 3 ?
|
|
2069
|
+
${this.step === 3 ? k`
|
|
2033
2070
|
<div class="step-3">
|
|
2034
2071
|
|
|
2035
|
-
<p>${
|
|
2072
|
+
<p>${V("Ensure your full body is visible in the camera")}</p>
|
|
2036
2073
|
<div class='video-container'>
|
|
2037
2074
|
<div class="video-overlay">
|
|
2038
2075
|
<h2>${this.instructionMessage}</h2>
|
|
@@ -2048,13 +2085,18 @@ let a = class extends X {
|
|
|
2048
2085
|
<button class="video-flip-icon" @click=${this.flipCamera} ?disabled=${this.cameras.length < 2}>
|
|
2049
2086
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 24 24">
|
|
2050
2087
|
<path d="M12 6V9L16 5L12 1V4C7.58 4 4 7.58 4 12H6C6 8.69 8.69 6 12 6ZM18 12C18 15.31 15.31 18 12 18V15L8 19L12 23V20C16.42 20 20 16.42 20 12H18Z"/>
|
|
2051
|
-
</svg>
|
|
2088
|
+
</svg>
|
|
2052
2089
|
</button>
|
|
2090
|
+
|
|
2091
|
+
<!-- Snow effect -->
|
|
2092
|
+
<div class="snow-container">
|
|
2093
|
+
${this.renderSnowflakes()}
|
|
2094
|
+
</div>
|
|
2053
2095
|
</div>
|
|
2054
2096
|
</div>
|
|
2055
2097
|
` : ""}
|
|
2056
2098
|
|
|
2057
|
-
${this.step === 4 ?
|
|
2099
|
+
${this.step === 4 ? k`
|
|
2058
2100
|
<div class="step-4">
|
|
2059
2101
|
<xact-step-result
|
|
2060
2102
|
.recommendedSize=${this.recommendedSize}
|
|
@@ -2450,6 +2492,82 @@ a.styles = N`
|
|
|
2450
2492
|
100% { filter: brightness(1); }
|
|
2451
2493
|
}
|
|
2452
2494
|
|
|
2495
|
+
/* Snow effect */
|
|
2496
|
+
.snow-container {
|
|
2497
|
+
position: absolute;
|
|
2498
|
+
inset: 0;
|
|
2499
|
+
pointer-events: none;
|
|
2500
|
+
overflow: hidden;
|
|
2501
|
+
z-index: 10;
|
|
2502
|
+
border-radius: 8px;
|
|
2503
|
+
}
|
|
2504
|
+
|
|
2505
|
+
.snowflake {
|
|
2506
|
+
position: absolute;
|
|
2507
|
+
top: -10%;
|
|
2508
|
+
color: #fff;
|
|
2509
|
+
font-size: 1em;
|
|
2510
|
+
font-family: Arial, sans-serif;
|
|
2511
|
+
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
|
|
2512
|
+
opacity: 0;
|
|
2513
|
+
animation: snowfall linear infinite;
|
|
2514
|
+
will-change: transform, opacity;
|
|
2515
|
+
}
|
|
2516
|
+
|
|
2517
|
+
.snowflake::before {
|
|
2518
|
+
content: "❅";
|
|
2519
|
+
}
|
|
2520
|
+
|
|
2521
|
+
.snowflake:nth-child(2n)::before {
|
|
2522
|
+
content: "❆";
|
|
2523
|
+
}
|
|
2524
|
+
|
|
2525
|
+
.snowflake:nth-child(3n)::before {
|
|
2526
|
+
content: "❄";
|
|
2527
|
+
}
|
|
2528
|
+
|
|
2529
|
+
.snowflake:nth-child(odd) {
|
|
2530
|
+
font-size: 0.8em;
|
|
2531
|
+
}
|
|
2532
|
+
|
|
2533
|
+
.snowflake:nth-child(3n) {
|
|
2534
|
+
font-size: 1.2em;
|
|
2535
|
+
}
|
|
2536
|
+
|
|
2537
|
+
.snowflake:nth-child(4n) {
|
|
2538
|
+
font-size: 0.6em;
|
|
2539
|
+
}
|
|
2540
|
+
|
|
2541
|
+
.snowflake:nth-child(5n) {
|
|
2542
|
+
font-size: 1.1em;
|
|
2543
|
+
}
|
|
2544
|
+
|
|
2545
|
+
@keyframes snowfall {
|
|
2546
|
+
0% {
|
|
2547
|
+
transform: translateY(-10vh) translateX(0);
|
|
2548
|
+
opacity: 0;
|
|
2549
|
+
}
|
|
2550
|
+
5% {
|
|
2551
|
+
opacity: 1;
|
|
2552
|
+
}
|
|
2553
|
+
25% {
|
|
2554
|
+
transform: translateY(30vh) translateX(-10px);
|
|
2555
|
+
}
|
|
2556
|
+
50% {
|
|
2557
|
+
transform: translateY(60vh) translateX(10px);
|
|
2558
|
+
}
|
|
2559
|
+
75% {
|
|
2560
|
+
transform: translateY(90vh) translateX(-5px);
|
|
2561
|
+
}
|
|
2562
|
+
95% {
|
|
2563
|
+
opacity: 1;
|
|
2564
|
+
}
|
|
2565
|
+
100% {
|
|
2566
|
+
transform: translateY(110vh) translateX(0);
|
|
2567
|
+
opacity: 0;
|
|
2568
|
+
}
|
|
2569
|
+
}
|
|
2570
|
+
|
|
2453
2571
|
.error-message {
|
|
2454
2572
|
color: red;
|
|
2455
2573
|
font-size: 14px;
|
|
@@ -2508,70 +2626,70 @@ a.styles = N`
|
|
|
2508
2626
|
|
|
2509
2627
|
`;
|
|
2510
2628
|
d([
|
|
2511
|
-
|
|
2629
|
+
c({ type: String, attribute: "api-key" })
|
|
2512
2630
|
], a.prototype, "apiKey", 2);
|
|
2513
2631
|
d([
|
|
2514
|
-
|
|
2632
|
+
c({ type: String, attribute: "tenant-id" })
|
|
2515
2633
|
], a.prototype, "tenantId", 2);
|
|
2516
2634
|
d([
|
|
2517
|
-
|
|
2635
|
+
c({ type: String, attribute: "product-sku" })
|
|
2518
2636
|
], a.prototype, "productSku", 2);
|
|
2519
2637
|
d([
|
|
2520
|
-
|
|
2638
|
+
c({ type: String, attribute: "api-url" })
|
|
2521
2639
|
], a.prototype, "apiUrl", 2);
|
|
2522
2640
|
d([
|
|
2523
|
-
|
|
2641
|
+
c({ type: Function, attribute: "onmeasurementaccepted" })
|
|
2524
2642
|
], a.prototype, "onMeasurementAccepted", 2);
|
|
2525
2643
|
d([
|
|
2526
|
-
|
|
2644
|
+
c({ type: Function, attribute: "onmeasurementcanceled" })
|
|
2527
2645
|
], a.prototype, "onMeasurementCanceled", 2);
|
|
2528
2646
|
d([
|
|
2529
|
-
|
|
2647
|
+
c({ type: String })
|
|
2530
2648
|
], a.prototype, "culture", 1);
|
|
2531
2649
|
d([
|
|
2532
|
-
|
|
2650
|
+
T()
|
|
2533
2651
|
], a.prototype, "errorMap", 1);
|
|
2534
2652
|
d([
|
|
2535
|
-
|
|
2653
|
+
T()
|
|
2536
2654
|
], a.prototype, "measurerKey", 2);
|
|
2537
2655
|
d([
|
|
2538
|
-
|
|
2656
|
+
T()
|
|
2539
2657
|
], a.prototype, "_isLocaleLoading", 2);
|
|
2540
2658
|
d([
|
|
2541
|
-
|
|
2659
|
+
T()
|
|
2542
2660
|
], a.prototype, "showModal", 2);
|
|
2543
2661
|
d([
|
|
2544
|
-
|
|
2662
|
+
T()
|
|
2545
2663
|
], a.prototype, "step", 2);
|
|
2546
2664
|
d([
|
|
2547
|
-
|
|
2665
|
+
T()
|
|
2548
2666
|
], a.prototype, "height", 2);
|
|
2549
2667
|
d([
|
|
2550
|
-
|
|
2668
|
+
T()
|
|
2551
2669
|
], a.prototype, "recommendedSize", 2);
|
|
2552
2670
|
d([
|
|
2553
|
-
|
|
2671
|
+
T()
|
|
2554
2672
|
], a.prototype, "measurements", 2);
|
|
2555
2673
|
d([
|
|
2556
|
-
|
|
2674
|
+
T()
|
|
2557
2675
|
], a.prototype, "errorMessage", 2);
|
|
2558
2676
|
d([
|
|
2559
|
-
|
|
2677
|
+
T()
|
|
2560
2678
|
], a.prototype, "instructionMessage", 2);
|
|
2561
2679
|
d([
|
|
2562
|
-
|
|
2680
|
+
T()
|
|
2563
2681
|
], a.prototype, "shouldStartMeasurement", 2);
|
|
2564
2682
|
d([
|
|
2565
|
-
|
|
2683
|
+
T()
|
|
2566
2684
|
], a.prototype, "isLoading", 2);
|
|
2567
2685
|
d([
|
|
2568
|
-
|
|
2686
|
+
T()
|
|
2569
2687
|
], a.prototype, "isFetching", 2);
|
|
2570
2688
|
d([
|
|
2571
|
-
|
|
2689
|
+
T()
|
|
2572
2690
|
], a.prototype, "cameras", 2);
|
|
2573
2691
|
d([
|
|
2574
|
-
|
|
2692
|
+
T()
|
|
2575
2693
|
], a.prototype, "currentCameraId", 2);
|
|
2576
2694
|
a = d([
|
|
2577
2695
|
R("body-measurer"),
|