xactsize-webcomponents 1.0.42 → 1.0.44
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 +72 -0
- package/dist/body-measurer-C5jINwJt.mjs +3254 -0
- package/dist/body-measurer.d.ts +3 -1
- package/dist/body-measurer.es.js +1 -1
- package/dist/body-measurer.umd.js +787 -673
- package/dist/components/Step1-measurement-form.d.ts +1 -0
- package/dist/components/xact-step-result.d.ts +2 -2
- package/dist/es-MX-Bc0zxUr_.mjs +79 -0
- package/dist/generated/locale-codes.d.ts +2 -2
- package/dist/generated/locales/es-MX.d.ts +75 -0
- package/dist/generated/locales/pt-BR.d.ts +18 -15
- package/dist/{pt-BR-DwijJE66.mjs → pt-BR-m4YL1hub.mjs} +20 -17
- package/dist/services/ai-session-manager.d.ts +3 -1
- package/dist/services/audio-manager.d.ts +4 -0
- package/package.json +2 -2
- package/dist/body-measurer-CHN6HJa_.mjs +0 -2988
|
@@ -0,0 +1,3254 @@
|
|
|
1
|
+
const Yt = (i, t, e) => {
|
|
2
|
+
const s = i[t];
|
|
3
|
+
return s ? typeof s == "function" ? s() : Promise.resolve(s) : new Promise((o, n) => {
|
|
4
|
+
(typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
|
|
5
|
+
n.bind(
|
|
6
|
+
null,
|
|
7
|
+
new Error(
|
|
8
|
+
"Unknown variable dynamic import: " + t + (t.split("/").length !== e ? ". Note that variables only represent file names one level deep." : "")
|
|
9
|
+
)
|
|
10
|
+
)
|
|
11
|
+
);
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* @license
|
|
16
|
+
* Copyright 2019 Google LLC
|
|
17
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
18
|
+
*/
|
|
19
|
+
const X = globalThis, yt = X.ShadowRoot && (X.ShadyCSS === void 0 || X.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, _t = Symbol(), bt = /* @__PURE__ */ new WeakMap();
|
|
20
|
+
let Ut = class {
|
|
21
|
+
constructor(t, e, s) {
|
|
22
|
+
if (this._$cssResult$ = !0, s !== _t) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
|
|
23
|
+
this.cssText = t, this.t = e;
|
|
24
|
+
}
|
|
25
|
+
get styleSheet() {
|
|
26
|
+
let t = this.o;
|
|
27
|
+
const e = this.t;
|
|
28
|
+
if (yt && t === void 0) {
|
|
29
|
+
const s = e !== void 0 && e.length === 1;
|
|
30
|
+
s && (t = bt.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && bt.set(e, t));
|
|
31
|
+
}
|
|
32
|
+
return t;
|
|
33
|
+
}
|
|
34
|
+
toString() {
|
|
35
|
+
return this.cssText;
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
const Kt = (i) => new Ut(typeof i == "string" ? i : i + "", void 0, _t), U = (i, ...t) => {
|
|
39
|
+
const e = i.length === 1 ? i[0] : t.reduce((s, o, n) => s + ((r) => {
|
|
40
|
+
if (r._$cssResult$ === !0) return r.cssText;
|
|
41
|
+
if (typeof r == "number") return r;
|
|
42
|
+
throw Error("Value passed to 'css' function must be a 'css' function result: " + r + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
|
|
43
|
+
})(o) + i[n + 1], i[0]);
|
|
44
|
+
return new Ut(e, i, _t);
|
|
45
|
+
}, Qt = (i, t) => {
|
|
46
|
+
if (yt) i.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
|
|
47
|
+
else for (const e of t) {
|
|
48
|
+
const s = document.createElement("style"), o = X.litNonce;
|
|
49
|
+
o !== void 0 && s.setAttribute("nonce", o), s.textContent = e.cssText, i.appendChild(s);
|
|
50
|
+
}
|
|
51
|
+
}, wt = yt ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
|
|
52
|
+
let e = "";
|
|
53
|
+
for (const s of t.cssRules) e += s.cssText;
|
|
54
|
+
return Kt(e);
|
|
55
|
+
})(i) : i;
|
|
56
|
+
/**
|
|
57
|
+
* @license
|
|
58
|
+
* Copyright 2017 Google LLC
|
|
59
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
60
|
+
*/
|
|
61
|
+
const { is: Xt, defineProperty: Jt, getOwnPropertyDescriptor: te, getOwnPropertyNames: ee, getOwnPropertySymbols: ie, getPrototypeOf: se } = Object, $ = globalThis, Et = $.trustedTypes, oe = Et ? Et.emptyScript : "", rt = $.reactiveElementPolyfillSupport, z = (i, t) => i, J = { toAttribute(i, t) {
|
|
62
|
+
switch (t) {
|
|
63
|
+
case Boolean:
|
|
64
|
+
i = i ? oe : null;
|
|
65
|
+
break;
|
|
66
|
+
case Object:
|
|
67
|
+
case Array:
|
|
68
|
+
i = i == null ? i : JSON.stringify(i);
|
|
69
|
+
}
|
|
70
|
+
return i;
|
|
71
|
+
}, fromAttribute(i, t) {
|
|
72
|
+
let e = i;
|
|
73
|
+
switch (t) {
|
|
74
|
+
case Boolean:
|
|
75
|
+
e = i !== null;
|
|
76
|
+
break;
|
|
77
|
+
case Number:
|
|
78
|
+
e = i === null ? null : Number(i);
|
|
79
|
+
break;
|
|
80
|
+
case Object:
|
|
81
|
+
case Array:
|
|
82
|
+
try {
|
|
83
|
+
e = JSON.parse(i);
|
|
84
|
+
} catch {
|
|
85
|
+
e = null;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
return e;
|
|
89
|
+
} }, xt = (i, t) => !Xt(i, t), At = { attribute: !0, type: String, converter: J, reflect: !1, useDefault: !1, hasChanged: xt };
|
|
90
|
+
Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), $.litPropertyMetadata ?? ($.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
|
|
91
|
+
let I = class extends HTMLElement {
|
|
92
|
+
static addInitializer(t) {
|
|
93
|
+
this._$Ei(), (this.l ?? (this.l = [])).push(t);
|
|
94
|
+
}
|
|
95
|
+
static get observedAttributes() {
|
|
96
|
+
return this.finalize(), this._$Eh && [...this._$Eh.keys()];
|
|
97
|
+
}
|
|
98
|
+
static createProperty(t, e = At) {
|
|
99
|
+
if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
|
|
100
|
+
const s = Symbol(), o = this.getPropertyDescriptor(t, s, e);
|
|
101
|
+
o !== void 0 && Jt(this.prototype, t, o);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
static getPropertyDescriptor(t, e, s) {
|
|
105
|
+
const { get: o, set: n } = te(this.prototype, t) ?? { get() {
|
|
106
|
+
return this[e];
|
|
107
|
+
}, set(r) {
|
|
108
|
+
this[e] = r;
|
|
109
|
+
} };
|
|
110
|
+
return { get: o, set(r) {
|
|
111
|
+
const l = o == null ? void 0 : o.call(this);
|
|
112
|
+
n == null || n.call(this, r), this.requestUpdate(t, l, s);
|
|
113
|
+
}, configurable: !0, enumerable: !0 };
|
|
114
|
+
}
|
|
115
|
+
static getPropertyOptions(t) {
|
|
116
|
+
return this.elementProperties.get(t) ?? At;
|
|
117
|
+
}
|
|
118
|
+
static _$Ei() {
|
|
119
|
+
if (this.hasOwnProperty(z("elementProperties"))) return;
|
|
120
|
+
const t = se(this);
|
|
121
|
+
t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
|
|
122
|
+
}
|
|
123
|
+
static finalize() {
|
|
124
|
+
if (this.hasOwnProperty(z("finalized"))) return;
|
|
125
|
+
if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(z("properties"))) {
|
|
126
|
+
const e = this.properties, s = [...ee(e), ...ie(e)];
|
|
127
|
+
for (const o of s) this.createProperty(o, e[o]);
|
|
128
|
+
}
|
|
129
|
+
const t = this[Symbol.metadata];
|
|
130
|
+
if (t !== null) {
|
|
131
|
+
const e = litPropertyMetadata.get(t);
|
|
132
|
+
if (e !== void 0) for (const [s, o] of e) this.elementProperties.set(s, o);
|
|
133
|
+
}
|
|
134
|
+
this._$Eh = /* @__PURE__ */ new Map();
|
|
135
|
+
for (const [e, s] of this.elementProperties) {
|
|
136
|
+
const o = this._$Eu(e, s);
|
|
137
|
+
o !== void 0 && this._$Eh.set(o, e);
|
|
138
|
+
}
|
|
139
|
+
this.elementStyles = this.finalizeStyles(this.styles);
|
|
140
|
+
}
|
|
141
|
+
static finalizeStyles(t) {
|
|
142
|
+
const e = [];
|
|
143
|
+
if (Array.isArray(t)) {
|
|
144
|
+
const s = new Set(t.flat(1 / 0).reverse());
|
|
145
|
+
for (const o of s) e.unshift(wt(o));
|
|
146
|
+
} else t !== void 0 && e.push(wt(t));
|
|
147
|
+
return e;
|
|
148
|
+
}
|
|
149
|
+
static _$Eu(t, e) {
|
|
150
|
+
const s = e.attribute;
|
|
151
|
+
return s === !1 ? void 0 : typeof s == "string" ? s : typeof t == "string" ? t.toLowerCase() : void 0;
|
|
152
|
+
}
|
|
153
|
+
constructor() {
|
|
154
|
+
super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
|
|
155
|
+
}
|
|
156
|
+
_$Ev() {
|
|
157
|
+
var t;
|
|
158
|
+
this._$ES = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (t = this.constructor.l) == null || t.forEach((e) => e(this));
|
|
159
|
+
}
|
|
160
|
+
addController(t) {
|
|
161
|
+
var e;
|
|
162
|
+
(this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t), this.renderRoot !== void 0 && this.isConnected && ((e = t.hostConnected) == null || e.call(t));
|
|
163
|
+
}
|
|
164
|
+
removeController(t) {
|
|
165
|
+
var e;
|
|
166
|
+
(e = this._$EO) == null || e.delete(t);
|
|
167
|
+
}
|
|
168
|
+
_$E_() {
|
|
169
|
+
const t = /* @__PURE__ */ new Map(), e = this.constructor.elementProperties;
|
|
170
|
+
for (const s of e.keys()) this.hasOwnProperty(s) && (t.set(s, this[s]), delete this[s]);
|
|
171
|
+
t.size > 0 && (this._$Ep = t);
|
|
172
|
+
}
|
|
173
|
+
createRenderRoot() {
|
|
174
|
+
const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
|
|
175
|
+
return Qt(t, this.constructor.elementStyles), t;
|
|
176
|
+
}
|
|
177
|
+
connectedCallback() {
|
|
178
|
+
var t;
|
|
179
|
+
this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$EO) == null || t.forEach((e) => {
|
|
180
|
+
var s;
|
|
181
|
+
return (s = e.hostConnected) == null ? void 0 : s.call(e);
|
|
182
|
+
});
|
|
183
|
+
}
|
|
184
|
+
enableUpdating(t) {
|
|
185
|
+
}
|
|
186
|
+
disconnectedCallback() {
|
|
187
|
+
var t;
|
|
188
|
+
(t = this._$EO) == null || t.forEach((e) => {
|
|
189
|
+
var s;
|
|
190
|
+
return (s = e.hostDisconnected) == null ? void 0 : s.call(e);
|
|
191
|
+
});
|
|
192
|
+
}
|
|
193
|
+
attributeChangedCallback(t, e, s) {
|
|
194
|
+
this._$AK(t, s);
|
|
195
|
+
}
|
|
196
|
+
_$ET(t, e) {
|
|
197
|
+
var n;
|
|
198
|
+
const s = this.constructor.elementProperties.get(t), o = this.constructor._$Eu(t, s);
|
|
199
|
+
if (o !== void 0 && s.reflect === !0) {
|
|
200
|
+
const r = (((n = s.converter) == null ? void 0 : n.toAttribute) !== void 0 ? s.converter : J).toAttribute(e, s.type);
|
|
201
|
+
this._$Em = t, r == null ? this.removeAttribute(o) : this.setAttribute(o, r), this._$Em = null;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
_$AK(t, e) {
|
|
205
|
+
var n, r;
|
|
206
|
+
const s = this.constructor, o = s._$Eh.get(t);
|
|
207
|
+
if (o !== void 0 && this._$Em !== o) {
|
|
208
|
+
const l = s.getPropertyOptions(o), h = typeof l.converter == "function" ? { fromAttribute: l.converter } : ((n = l.converter) == null ? void 0 : n.fromAttribute) !== void 0 ? l.converter : J;
|
|
209
|
+
this._$Em = o, this[o] = h.fromAttribute(e, l.type) ?? ((r = this._$Ej) == null ? void 0 : r.get(o)) ?? null, this._$Em = null;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
requestUpdate(t, e, s) {
|
|
213
|
+
var o;
|
|
214
|
+
if (t !== void 0) {
|
|
215
|
+
const n = this.constructor, r = this[t];
|
|
216
|
+
if (s ?? (s = n.getPropertyOptions(t)), !((s.hasChanged ?? xt)(r, e) || s.useDefault && s.reflect && r === ((o = this._$Ej) == null ? void 0 : o.get(t)) && !this.hasAttribute(n._$Eu(t, s)))) return;
|
|
217
|
+
this.C(t, e, s);
|
|
218
|
+
}
|
|
219
|
+
this.isUpdatePending === !1 && (this._$ES = this._$EP());
|
|
220
|
+
}
|
|
221
|
+
C(t, e, { useDefault: s, reflect: o, wrapped: n }, r) {
|
|
222
|
+
s && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t) && (this._$Ej.set(t, r ?? e ?? this[t]), n !== !0 || r !== void 0) || (this._$AL.has(t) || (this.hasUpdated || s || (e = void 0), this._$AL.set(t, e)), o === !0 && this._$Em !== t && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t));
|
|
223
|
+
}
|
|
224
|
+
async _$EP() {
|
|
225
|
+
this.isUpdatePending = !0;
|
|
226
|
+
try {
|
|
227
|
+
await this._$ES;
|
|
228
|
+
} catch (e) {
|
|
229
|
+
Promise.reject(e);
|
|
230
|
+
}
|
|
231
|
+
const t = this.scheduleUpdate();
|
|
232
|
+
return t != null && await t, !this.isUpdatePending;
|
|
233
|
+
}
|
|
234
|
+
scheduleUpdate() {
|
|
235
|
+
return this.performUpdate();
|
|
236
|
+
}
|
|
237
|
+
performUpdate() {
|
|
238
|
+
var s;
|
|
239
|
+
if (!this.isUpdatePending) return;
|
|
240
|
+
if (!this.hasUpdated) {
|
|
241
|
+
if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
|
|
242
|
+
for (const [n, r] of this._$Ep) this[n] = r;
|
|
243
|
+
this._$Ep = void 0;
|
|
244
|
+
}
|
|
245
|
+
const o = this.constructor.elementProperties;
|
|
246
|
+
if (o.size > 0) for (const [n, r] of o) {
|
|
247
|
+
const { wrapped: l } = r, h = this[n];
|
|
248
|
+
l !== !0 || this._$AL.has(n) || h === void 0 || this.C(n, void 0, r, h);
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
let t = !1;
|
|
252
|
+
const e = this._$AL;
|
|
253
|
+
try {
|
|
254
|
+
t = this.shouldUpdate(e), t ? (this.willUpdate(e), (s = this._$EO) == null || s.forEach((o) => {
|
|
255
|
+
var n;
|
|
256
|
+
return (n = o.hostUpdate) == null ? void 0 : n.call(o);
|
|
257
|
+
}), this.update(e)) : this._$EM();
|
|
258
|
+
} catch (o) {
|
|
259
|
+
throw t = !1, this._$EM(), o;
|
|
260
|
+
}
|
|
261
|
+
t && this._$AE(e);
|
|
262
|
+
}
|
|
263
|
+
willUpdate(t) {
|
|
264
|
+
}
|
|
265
|
+
_$AE(t) {
|
|
266
|
+
var e;
|
|
267
|
+
(e = this._$EO) == null || e.forEach((s) => {
|
|
268
|
+
var o;
|
|
269
|
+
return (o = s.hostUpdated) == null ? void 0 : o.call(s);
|
|
270
|
+
}), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
|
|
271
|
+
}
|
|
272
|
+
_$EM() {
|
|
273
|
+
this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
|
|
274
|
+
}
|
|
275
|
+
get updateComplete() {
|
|
276
|
+
return this.getUpdateComplete();
|
|
277
|
+
}
|
|
278
|
+
getUpdateComplete() {
|
|
279
|
+
return this._$ES;
|
|
280
|
+
}
|
|
281
|
+
shouldUpdate(t) {
|
|
282
|
+
return !0;
|
|
283
|
+
}
|
|
284
|
+
update(t) {
|
|
285
|
+
this._$Eq && (this._$Eq = this._$Eq.forEach((e) => this._$ET(e, this[e]))), this._$EM();
|
|
286
|
+
}
|
|
287
|
+
updated(t) {
|
|
288
|
+
}
|
|
289
|
+
firstUpdated(t) {
|
|
290
|
+
}
|
|
291
|
+
};
|
|
292
|
+
I.elementStyles = [], I.shadowRootOptions = { mode: "open" }, I[z("elementProperties")] = /* @__PURE__ */ new Map(), I[z("finalized")] = /* @__PURE__ */ new Map(), rt == null || rt({ ReactiveElement: I }), ($.reactiveElementVersions ?? ($.reactiveElementVersions = [])).push("2.1.0");
|
|
293
|
+
/**
|
|
294
|
+
* @license
|
|
295
|
+
* Copyright 2017 Google LLC
|
|
296
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
297
|
+
*/
|
|
298
|
+
const N = globalThis, tt = N.trustedTypes, $t = tt ? tt.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, Vt = "$lit$", A = `lit$${Math.random().toFixed(9).slice(2)}$`, Ft = "?" + A, ne = `<${Ft}>`, R = document, B = () => R.createComment(""), Z = (i) => i === null || typeof i != "object" && typeof i != "function", Ct = Array.isArray, re = (i) => Ct(i) || typeof (i == null ? void 0 : i[Symbol.iterator]) == "function", at = `[
|
|
299
|
+
\f\r]`, F = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, St = /-->/g, Lt = />/g, S = RegExp(`>|${at}(?:([^\\s"'>=/]+)(${at}*=${at}*(?:[^
|
|
300
|
+
\f\r"'\`<>=]|("|')|))|$)`, "g"), Mt = /'/g, kt = /"/g, zt = /^(?:script|style|textarea|title)$/i, ae = (i) => (t, ...e) => ({ _$litType$: i, strings: t, values: e }), g = ae(1), T = Symbol.for("lit-noChange"), y = Symbol.for("lit-nothing"), Rt = /* @__PURE__ */ new WeakMap(), M = R.createTreeWalker(R, 129);
|
|
301
|
+
function Nt(i, t) {
|
|
302
|
+
if (!Ct(i) || !i.hasOwnProperty("raw")) throw Error("invalid template strings array");
|
|
303
|
+
return $t !== void 0 ? $t.createHTML(t) : t;
|
|
304
|
+
}
|
|
305
|
+
const le = (i, t) => {
|
|
306
|
+
const e = i.length - 1, s = [];
|
|
307
|
+
let o, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", r = F;
|
|
308
|
+
for (let l = 0; l < e; l++) {
|
|
309
|
+
const h = i[l];
|
|
310
|
+
let u, f, m = -1, b = 0;
|
|
311
|
+
for (; b < h.length && (r.lastIndex = b, f = r.exec(h), f !== null); ) b = r.lastIndex, r === F ? f[1] === "!--" ? r = St : f[1] !== void 0 ? r = Lt : f[2] !== void 0 ? (zt.test(f[2]) && (o = RegExp("</" + f[2], "g")), r = S) : f[3] !== void 0 && (r = S) : r === S ? f[0] === ">" ? (r = o ?? F, m = -1) : f[1] === void 0 ? m = -2 : (m = r.lastIndex - f[2].length, u = f[1], r = f[3] === void 0 ? S : f[3] === '"' ? kt : Mt) : r === kt || r === Mt ? r = S : r === St || r === Lt ? r = F : (r = S, o = void 0);
|
|
312
|
+
const E = r === S && i[l + 1].startsWith("/>") ? " " : "";
|
|
313
|
+
n += r === F ? h + ne : m >= 0 ? (s.push(u), h.slice(0, m) + Vt + h.slice(m) + A + E) : h + A + (m === -2 ? l : E);
|
|
314
|
+
}
|
|
315
|
+
return [Nt(i, n + (i[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
|
|
316
|
+
};
|
|
317
|
+
class j {
|
|
318
|
+
constructor({ strings: t, _$litType$: e }, s) {
|
|
319
|
+
let o;
|
|
320
|
+
this.parts = [];
|
|
321
|
+
let n = 0, r = 0;
|
|
322
|
+
const l = t.length - 1, h = this.parts, [u, f] = le(t, e);
|
|
323
|
+
if (this.el = j.createElement(u, s), M.currentNode = this.el.content, e === 2 || e === 3) {
|
|
324
|
+
const m = this.el.content.firstChild;
|
|
325
|
+
m.replaceWith(...m.childNodes);
|
|
326
|
+
}
|
|
327
|
+
for (; (o = M.nextNode()) !== null && h.length < l; ) {
|
|
328
|
+
if (o.nodeType === 1) {
|
|
329
|
+
if (o.hasAttributes()) for (const m of o.getAttributeNames()) if (m.endsWith(Vt)) {
|
|
330
|
+
const b = f[r++], E = o.getAttribute(m).split(A), K = /([.?@])?(.*)/.exec(b);
|
|
331
|
+
h.push({ type: 1, index: n, name: K[2], strings: E, ctor: K[1] === "." ? ce : K[1] === "?" ? de : K[1] === "@" ? pe : ot }), o.removeAttribute(m);
|
|
332
|
+
} else m.startsWith(A) && (h.push({ type: 6, index: n }), o.removeAttribute(m));
|
|
333
|
+
if (zt.test(o.tagName)) {
|
|
334
|
+
const m = o.textContent.split(A), b = m.length - 1;
|
|
335
|
+
if (b > 0) {
|
|
336
|
+
o.textContent = tt ? tt.emptyScript : "";
|
|
337
|
+
for (let E = 0; E < b; E++) o.append(m[E], B()), M.nextNode(), h.push({ type: 2, index: ++n });
|
|
338
|
+
o.append(m[b], B());
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
} else if (o.nodeType === 8) if (o.data === Ft) h.push({ type: 2, index: n });
|
|
342
|
+
else {
|
|
343
|
+
let m = -1;
|
|
344
|
+
for (; (m = o.data.indexOf(A, m + 1)) !== -1; ) h.push({ type: 7, index: n }), m += A.length - 1;
|
|
345
|
+
}
|
|
346
|
+
n++;
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
static createElement(t, e) {
|
|
350
|
+
const s = R.createElement("template");
|
|
351
|
+
return s.innerHTML = t, s;
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
function H(i, t, e = i, s) {
|
|
355
|
+
var r, l;
|
|
356
|
+
if (t === T) return t;
|
|
357
|
+
let o = s !== void 0 ? (r = e._$Co) == null ? void 0 : r[s] : e._$Cl;
|
|
358
|
+
const n = Z(t) ? void 0 : t._$litDirective$;
|
|
359
|
+
return (o == null ? void 0 : o.constructor) !== n && ((l = o == null ? void 0 : o._$AO) == null || l.call(o, !1), n === void 0 ? o = void 0 : (o = new n(i), o._$AT(i, e, s)), s !== void 0 ? (e._$Co ?? (e._$Co = []))[s] = o : e._$Cl = o), o !== void 0 && (t = H(i, o._$AS(i, t.values), o, s)), t;
|
|
360
|
+
}
|
|
361
|
+
class he {
|
|
362
|
+
constructor(t, e) {
|
|
363
|
+
this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
|
|
364
|
+
}
|
|
365
|
+
get parentNode() {
|
|
366
|
+
return this._$AM.parentNode;
|
|
367
|
+
}
|
|
368
|
+
get _$AU() {
|
|
369
|
+
return this._$AM._$AU;
|
|
370
|
+
}
|
|
371
|
+
u(t) {
|
|
372
|
+
const { el: { content: e }, parts: s } = this._$AD, o = ((t == null ? void 0 : t.creationScope) ?? R).importNode(e, !0);
|
|
373
|
+
M.currentNode = o;
|
|
374
|
+
let n = M.nextNode(), r = 0, l = 0, h = s[0];
|
|
375
|
+
for (; h !== void 0; ) {
|
|
376
|
+
if (r === h.index) {
|
|
377
|
+
let u;
|
|
378
|
+
h.type === 2 ? u = new W(n, n.nextSibling, this, t) : h.type === 1 ? u = new h.ctor(n, h.name, h.strings, this, t) : h.type === 6 && (u = new ue(n, this, t)), this._$AV.push(u), h = s[++l];
|
|
379
|
+
}
|
|
380
|
+
r !== (h == null ? void 0 : h.index) && (n = M.nextNode(), r++);
|
|
381
|
+
}
|
|
382
|
+
return M.currentNode = R, o;
|
|
383
|
+
}
|
|
384
|
+
p(t) {
|
|
385
|
+
let e = 0;
|
|
386
|
+
for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(t, s, e), e += s.strings.length - 2) : s._$AI(t[e])), e++;
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
class W {
|
|
390
|
+
get _$AU() {
|
|
391
|
+
var t;
|
|
392
|
+
return ((t = this._$AM) == null ? void 0 : t._$AU) ?? this._$Cv;
|
|
393
|
+
}
|
|
394
|
+
constructor(t, e, s, o) {
|
|
395
|
+
this.type = 2, this._$AH = y, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = s, this.options = o, this._$Cv = (o == null ? void 0 : o.isConnected) ?? !0;
|
|
396
|
+
}
|
|
397
|
+
get parentNode() {
|
|
398
|
+
let t = this._$AA.parentNode;
|
|
399
|
+
const e = this._$AM;
|
|
400
|
+
return e !== void 0 && (t == null ? void 0 : t.nodeType) === 11 && (t = e.parentNode), t;
|
|
401
|
+
}
|
|
402
|
+
get startNode() {
|
|
403
|
+
return this._$AA;
|
|
404
|
+
}
|
|
405
|
+
get endNode() {
|
|
406
|
+
return this._$AB;
|
|
407
|
+
}
|
|
408
|
+
_$AI(t, e = this) {
|
|
409
|
+
t = H(this, t, e), Z(t) ? t === y || t == null || t === "" ? (this._$AH !== y && this._$AR(), this._$AH = y) : t !== this._$AH && t !== T && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : re(t) ? this.k(t) : this._(t);
|
|
410
|
+
}
|
|
411
|
+
O(t) {
|
|
412
|
+
return this._$AA.parentNode.insertBefore(t, this._$AB);
|
|
413
|
+
}
|
|
414
|
+
T(t) {
|
|
415
|
+
this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
|
|
416
|
+
}
|
|
417
|
+
_(t) {
|
|
418
|
+
this._$AH !== y && Z(this._$AH) ? this._$AA.nextSibling.data = t : this.T(R.createTextNode(t)), this._$AH = t;
|
|
419
|
+
}
|
|
420
|
+
$(t) {
|
|
421
|
+
var n;
|
|
422
|
+
const { values: e, _$litType$: s } = t, o = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = j.createElement(Nt(s.h, s.h[0]), this.options)), s);
|
|
423
|
+
if (((n = this._$AH) == null ? void 0 : n._$AD) === o) this._$AH.p(e);
|
|
424
|
+
else {
|
|
425
|
+
const r = new he(o, this), l = r.u(this.options);
|
|
426
|
+
r.p(e), this.T(l), this._$AH = r;
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
_$AC(t) {
|
|
430
|
+
let e = Rt.get(t.strings);
|
|
431
|
+
return e === void 0 && Rt.set(t.strings, e = new j(t)), e;
|
|
432
|
+
}
|
|
433
|
+
k(t) {
|
|
434
|
+
Ct(this._$AH) || (this._$AH = [], this._$AR());
|
|
435
|
+
const e = this._$AH;
|
|
436
|
+
let s, o = 0;
|
|
437
|
+
for (const n of t) o === e.length ? e.push(s = new W(this.O(B()), this.O(B()), this, this.options)) : s = e[o], s._$AI(n), o++;
|
|
438
|
+
o < e.length && (this._$AR(s && s._$AB.nextSibling, o), e.length = o);
|
|
439
|
+
}
|
|
440
|
+
_$AR(t = this._$AA.nextSibling, e) {
|
|
441
|
+
var s;
|
|
442
|
+
for ((s = this._$AP) == null ? void 0 : s.call(this, !1, !0, e); t && t !== this._$AB; ) {
|
|
443
|
+
const o = t.nextSibling;
|
|
444
|
+
t.remove(), t = o;
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
setConnected(t) {
|
|
448
|
+
var e;
|
|
449
|
+
this._$AM === void 0 && (this._$Cv = t, (e = this._$AP) == null || e.call(this, t));
|
|
450
|
+
}
|
|
451
|
+
}
|
|
452
|
+
class ot {
|
|
453
|
+
get tagName() {
|
|
454
|
+
return this.element.tagName;
|
|
455
|
+
}
|
|
456
|
+
get _$AU() {
|
|
457
|
+
return this._$AM._$AU;
|
|
458
|
+
}
|
|
459
|
+
constructor(t, e, s, o, n) {
|
|
460
|
+
this.type = 1, this._$AH = y, this._$AN = void 0, this.element = t, this.name = e, this._$AM = o, this.options = n, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = y;
|
|
461
|
+
}
|
|
462
|
+
_$AI(t, e = this, s, o) {
|
|
463
|
+
const n = this.strings;
|
|
464
|
+
let r = !1;
|
|
465
|
+
if (n === void 0) t = H(this, t, e, 0), r = !Z(t) || t !== this._$AH && t !== T, r && (this._$AH = t);
|
|
466
|
+
else {
|
|
467
|
+
const l = t;
|
|
468
|
+
let h, u;
|
|
469
|
+
for (t = n[0], h = 0; h < n.length - 1; h++) u = H(this, l[s + h], e, h), u === T && (u = this._$AH[h]), r || (r = !Z(u) || u !== this._$AH[h]), u === y ? t = y : t !== y && (t += (u ?? "") + n[h + 1]), this._$AH[h] = u;
|
|
470
|
+
}
|
|
471
|
+
r && !o && this.j(t);
|
|
472
|
+
}
|
|
473
|
+
j(t) {
|
|
474
|
+
t === y ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
class ce extends ot {
|
|
478
|
+
constructor() {
|
|
479
|
+
super(...arguments), this.type = 3;
|
|
480
|
+
}
|
|
481
|
+
j(t) {
|
|
482
|
+
this.element[this.name] = t === y ? void 0 : t;
|
|
483
|
+
}
|
|
484
|
+
}
|
|
485
|
+
class de extends ot {
|
|
486
|
+
constructor() {
|
|
487
|
+
super(...arguments), this.type = 4;
|
|
488
|
+
}
|
|
489
|
+
j(t) {
|
|
490
|
+
this.element.toggleAttribute(this.name, !!t && t !== y);
|
|
491
|
+
}
|
|
492
|
+
}
|
|
493
|
+
class pe extends ot {
|
|
494
|
+
constructor(t, e, s, o, n) {
|
|
495
|
+
super(t, e, s, o, n), this.type = 5;
|
|
496
|
+
}
|
|
497
|
+
_$AI(t, e = this) {
|
|
498
|
+
if ((t = H(this, t, e, 0) ?? y) === T) return;
|
|
499
|
+
const s = this._$AH, o = t === y && s !== y || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, n = t !== y && (s === y || o);
|
|
500
|
+
o && this.element.removeEventListener(this.name, this, s), n && this.element.addEventListener(this.name, this, t), this._$AH = t;
|
|
501
|
+
}
|
|
502
|
+
handleEvent(t) {
|
|
503
|
+
var e;
|
|
504
|
+
typeof this._$AH == "function" ? this._$AH.call(((e = this.options) == null ? void 0 : e.host) ?? this.element, t) : this._$AH.handleEvent(t);
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
class ue {
|
|
508
|
+
constructor(t, e, s) {
|
|
509
|
+
this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = s;
|
|
510
|
+
}
|
|
511
|
+
get _$AU() {
|
|
512
|
+
return this._$AM._$AU;
|
|
513
|
+
}
|
|
514
|
+
_$AI(t) {
|
|
515
|
+
H(this, t);
|
|
516
|
+
}
|
|
517
|
+
}
|
|
518
|
+
const lt = N.litHtmlPolyfillSupport;
|
|
519
|
+
lt == null || lt(j, W), (N.litHtmlVersions ?? (N.litHtmlVersions = [])).push("3.3.0");
|
|
520
|
+
const fe = (i, t, e) => {
|
|
521
|
+
const s = (e == null ? void 0 : e.renderBefore) ?? t;
|
|
522
|
+
let o = s._$litPart$;
|
|
523
|
+
if (o === void 0) {
|
|
524
|
+
const n = (e == null ? void 0 : e.renderBefore) ?? null;
|
|
525
|
+
s._$litPart$ = o = new W(t.insertBefore(B(), n), n, void 0, e ?? {});
|
|
526
|
+
}
|
|
527
|
+
return o._$AI(i), o;
|
|
528
|
+
};
|
|
529
|
+
/**
|
|
530
|
+
* @license
|
|
531
|
+
* Copyright 2017 Google LLC
|
|
532
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
533
|
+
*/
|
|
534
|
+
const k = globalThis;
|
|
535
|
+
let C = class extends I {
|
|
536
|
+
constructor() {
|
|
537
|
+
super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
|
|
538
|
+
}
|
|
539
|
+
createRenderRoot() {
|
|
540
|
+
var e;
|
|
541
|
+
const t = super.createRenderRoot();
|
|
542
|
+
return (e = this.renderOptions).renderBefore ?? (e.renderBefore = t.firstChild), t;
|
|
543
|
+
}
|
|
544
|
+
update(t) {
|
|
545
|
+
const e = this.render();
|
|
546
|
+
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = fe(e, this.renderRoot, this.renderOptions);
|
|
547
|
+
}
|
|
548
|
+
connectedCallback() {
|
|
549
|
+
var t;
|
|
550
|
+
super.connectedCallback(), (t = this._$Do) == null || t.setConnected(!0);
|
|
551
|
+
}
|
|
552
|
+
disconnectedCallback() {
|
|
553
|
+
var t;
|
|
554
|
+
super.disconnectedCallback(), (t = this._$Do) == null || t.setConnected(!1);
|
|
555
|
+
}
|
|
556
|
+
render() {
|
|
557
|
+
return T;
|
|
558
|
+
}
|
|
559
|
+
};
|
|
560
|
+
var Pt;
|
|
561
|
+
C._$litElement$ = !0, C.finalized = !0, (Pt = k.litElementHydrateSupport) == null || Pt.call(k, { LitElement: C });
|
|
562
|
+
const ht = k.litElementPolyfillSupport;
|
|
563
|
+
ht == null || ht({ LitElement: C });
|
|
564
|
+
(k.litElementVersions ?? (k.litElementVersions = [])).push("4.2.0");
|
|
565
|
+
/**
|
|
566
|
+
* @license
|
|
567
|
+
* Copyright 2017 Google LLC
|
|
568
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
569
|
+
*/
|
|
570
|
+
const V = (i) => (t, e) => {
|
|
571
|
+
e !== void 0 ? e.addInitializer(() => {
|
|
572
|
+
customElements.define(i, t);
|
|
573
|
+
}) : customElements.define(i, t);
|
|
574
|
+
};
|
|
575
|
+
/**
|
|
576
|
+
* @license
|
|
577
|
+
* Copyright 2017 Google LLC
|
|
578
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
579
|
+
*/
|
|
580
|
+
const me = { attribute: !0, type: String, converter: J, reflect: !1, hasChanged: xt }, ge = (i = me, t, e) => {
|
|
581
|
+
const { kind: s, metadata: o } = e;
|
|
582
|
+
let n = globalThis.litPropertyMetadata.get(o);
|
|
583
|
+
if (n === void 0 && globalThis.litPropertyMetadata.set(o, n = /* @__PURE__ */ new Map()), s === "setter" && ((i = Object.create(i)).wrapped = !0), n.set(e.name, i), s === "accessor") {
|
|
584
|
+
const { name: r } = e;
|
|
585
|
+
return { set(l) {
|
|
586
|
+
const h = t.get.call(this);
|
|
587
|
+
t.set.call(this, l), this.requestUpdate(r, h, i);
|
|
588
|
+
}, init(l) {
|
|
589
|
+
return l !== void 0 && this.C(r, void 0, i, l), l;
|
|
590
|
+
} };
|
|
591
|
+
}
|
|
592
|
+
if (s === "setter") {
|
|
593
|
+
const { name: r } = e;
|
|
594
|
+
return function(l) {
|
|
595
|
+
const h = this[r];
|
|
596
|
+
t.call(this, l), this.requestUpdate(r, h, i);
|
|
597
|
+
};
|
|
598
|
+
}
|
|
599
|
+
throw Error("Unsupported decorator location: " + s);
|
|
600
|
+
};
|
|
601
|
+
function d(i) {
|
|
602
|
+
return (t, e) => typeof e == "object" ? ge(i, t, e) : ((s, o, n) => {
|
|
603
|
+
const r = o.hasOwnProperty(n);
|
|
604
|
+
return o.constructor.createProperty(n, s), r ? Object.getOwnPropertyDescriptor(o, n) : void 0;
|
|
605
|
+
})(i, t, e);
|
|
606
|
+
}
|
|
607
|
+
/**
|
|
608
|
+
* @license
|
|
609
|
+
* Copyright 2017 Google LLC
|
|
610
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
611
|
+
*/
|
|
612
|
+
function _(i) {
|
|
613
|
+
return d({ ...i, state: !0, attribute: !1 });
|
|
614
|
+
}
|
|
615
|
+
/**
|
|
616
|
+
* @license
|
|
617
|
+
* Copyright 2021 Google LLC
|
|
618
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
619
|
+
*/
|
|
620
|
+
const pt = "lit-localize-status";
|
|
621
|
+
/**
|
|
622
|
+
* @license
|
|
623
|
+
* Copyright 2021 Google LLC
|
|
624
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
625
|
+
*/
|
|
626
|
+
const ye = (i, ...t) => ({
|
|
627
|
+
strTag: !0,
|
|
628
|
+
strings: i,
|
|
629
|
+
values: t
|
|
630
|
+
}), _e = ye, xe = (i) => typeof i != "string" && "strTag" in i, Bt = (i, t, e) => {
|
|
631
|
+
let s = i[0];
|
|
632
|
+
for (let o = 1; o < i.length; o++)
|
|
633
|
+
s += t[e ? e[o - 1] : o - 1], s += i[o];
|
|
634
|
+
return s;
|
|
635
|
+
};
|
|
636
|
+
/**
|
|
637
|
+
* @license
|
|
638
|
+
* Copyright 2021 Google LLC
|
|
639
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
640
|
+
*/
|
|
641
|
+
const Zt = (i) => xe(i) ? Bt(i.strings, i.values) : i;
|
|
642
|
+
let a = Zt, Tt = !1;
|
|
643
|
+
function Ce(i) {
|
|
644
|
+
if (Tt)
|
|
645
|
+
throw new Error("lit-localize can only be configured once");
|
|
646
|
+
a = i, Tt = !0;
|
|
647
|
+
}
|
|
648
|
+
/**
|
|
649
|
+
* @license
|
|
650
|
+
* Copyright 2021 Google LLC
|
|
651
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
652
|
+
*/
|
|
653
|
+
class ve {
|
|
654
|
+
constructor(t) {
|
|
655
|
+
this.__litLocalizeEventHandler = (e) => {
|
|
656
|
+
e.detail.status === "ready" && this.host.requestUpdate();
|
|
657
|
+
}, this.host = t;
|
|
658
|
+
}
|
|
659
|
+
hostConnected() {
|
|
660
|
+
window.addEventListener(pt, this.__litLocalizeEventHandler);
|
|
661
|
+
}
|
|
662
|
+
hostDisconnected() {
|
|
663
|
+
window.removeEventListener(pt, this.__litLocalizeEventHandler);
|
|
664
|
+
}
|
|
665
|
+
}
|
|
666
|
+
const be = (i) => i.addController(new ve(i)), we = be;
|
|
667
|
+
/**
|
|
668
|
+
* @license
|
|
669
|
+
* Copyright 2021 Google LLC
|
|
670
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
671
|
+
*/
|
|
672
|
+
const q = () => (i, t) => (i.addInitializer(we), i);
|
|
673
|
+
/**
|
|
674
|
+
* @license
|
|
675
|
+
* Copyright 2020 Google LLC
|
|
676
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
677
|
+
*/
|
|
678
|
+
class jt {
|
|
679
|
+
constructor() {
|
|
680
|
+
this.settled = !1, this.promise = new Promise((t, e) => {
|
|
681
|
+
this._resolve = t, this._reject = e;
|
|
682
|
+
});
|
|
683
|
+
}
|
|
684
|
+
resolve(t) {
|
|
685
|
+
this.settled = !0, this._resolve(t);
|
|
686
|
+
}
|
|
687
|
+
reject(t) {
|
|
688
|
+
this.settled = !0, this._reject(t);
|
|
689
|
+
}
|
|
690
|
+
}
|
|
691
|
+
/**
|
|
692
|
+
* @license
|
|
693
|
+
* Copyright 2014 Travis Webb
|
|
694
|
+
* SPDX-License-Identifier: MIT
|
|
695
|
+
*/
|
|
696
|
+
const w = [];
|
|
697
|
+
for (let i = 0; i < 256; i++)
|
|
698
|
+
w[i] = (i >> 4 & 15).toString(16) + (i & 15).toString(16);
|
|
699
|
+
function Ee(i) {
|
|
700
|
+
let t = 0, e = 8997, s = 0, o = 33826, n = 0, r = 40164, l = 0, h = 52210;
|
|
701
|
+
for (let u = 0; u < i.length; u++)
|
|
702
|
+
e ^= i.charCodeAt(u), t = e * 435, s = o * 435, n = r * 435, l = h * 435, n += e << 8, l += o << 8, s += t >>> 16, e = t & 65535, n += s >>> 16, o = s & 65535, h = l + (n >>> 16) & 65535, r = n & 65535;
|
|
703
|
+
return w[h >> 8] + w[h & 255] + w[r >> 8] + w[r & 255] + w[o >> 8] + w[o & 255] + w[e >> 8] + w[e & 255];
|
|
704
|
+
}
|
|
705
|
+
/**
|
|
706
|
+
* @license
|
|
707
|
+
* Copyright 2020 Google LLC
|
|
708
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
709
|
+
*/
|
|
710
|
+
const Ae = "", $e = "h", Se = "s";
|
|
711
|
+
function Le(i, t) {
|
|
712
|
+
return (t ? $e : Se) + Ee(typeof i == "string" ? i : i.join(Ae));
|
|
713
|
+
}
|
|
714
|
+
/**
|
|
715
|
+
* @license
|
|
716
|
+
* Copyright 2021 Google LLC
|
|
717
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
718
|
+
*/
|
|
719
|
+
const Ot = /* @__PURE__ */ new WeakMap(), It = /* @__PURE__ */ new Map();
|
|
720
|
+
function Me(i, t, e) {
|
|
721
|
+
if (i) {
|
|
722
|
+
const s = (e == null ? void 0 : e.id) ?? ke(t), o = i[s];
|
|
723
|
+
if (o) {
|
|
724
|
+
if (typeof o == "string")
|
|
725
|
+
return o;
|
|
726
|
+
if ("strTag" in o)
|
|
727
|
+
return Bt(
|
|
728
|
+
o.strings,
|
|
729
|
+
// Cast `template` because its type wasn't automatically narrowed (but
|
|
730
|
+
// we know it must be the same type as `localized`).
|
|
731
|
+
t.values,
|
|
732
|
+
o.values
|
|
733
|
+
);
|
|
734
|
+
{
|
|
735
|
+
let n = Ot.get(o);
|
|
736
|
+
return n === void 0 && (n = o.values, Ot.set(o, n)), {
|
|
737
|
+
...o,
|
|
738
|
+
values: n.map((r) => t.values[r])
|
|
739
|
+
};
|
|
740
|
+
}
|
|
741
|
+
}
|
|
742
|
+
}
|
|
743
|
+
return Zt(t);
|
|
744
|
+
}
|
|
745
|
+
function ke(i) {
|
|
746
|
+
const t = typeof i == "string" ? i : i.strings;
|
|
747
|
+
let e = It.get(t);
|
|
748
|
+
return e === void 0 && (e = Le(t, typeof i != "string" && !("strTag" in i)), It.set(t, e)), e;
|
|
749
|
+
}
|
|
750
|
+
/**
|
|
751
|
+
* @license
|
|
752
|
+
* Copyright 2021 Google LLC
|
|
753
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
754
|
+
*/
|
|
755
|
+
function ct(i) {
|
|
756
|
+
window.dispatchEvent(new CustomEvent(pt, { detail: i }));
|
|
757
|
+
}
|
|
758
|
+
let et = "", dt, Gt, it, ut, Wt, L = new jt();
|
|
759
|
+
L.resolve();
|
|
760
|
+
let Q = 0;
|
|
761
|
+
const Re = (i) => (Ce((t, e) => Me(Wt, t, e)), et = Gt = i.sourceLocale, it = new Set(i.targetLocales), it.add(i.sourceLocale), ut = i.loadLocale, { getLocale: Te, setLocale: Oe }), Te = () => et, Oe = (i) => {
|
|
762
|
+
if (i === (dt ?? et))
|
|
763
|
+
return L.promise;
|
|
764
|
+
if (!it || !ut)
|
|
765
|
+
throw new Error("Internal error");
|
|
766
|
+
if (!it.has(i))
|
|
767
|
+
throw new Error("Invalid locale code");
|
|
768
|
+
Q++;
|
|
769
|
+
const t = Q;
|
|
770
|
+
return dt = i, L.settled && (L = new jt()), ct({ status: "loading", loadingLocale: i }), (i === Gt ? (
|
|
771
|
+
// We could switch to the source locale synchronously, but we prefer to
|
|
772
|
+
// queue it on a microtask so that switching locales is consistently
|
|
773
|
+
// asynchronous.
|
|
774
|
+
Promise.resolve({ templates: void 0 })
|
|
775
|
+
) : ut(i)).then((s) => {
|
|
776
|
+
Q === t && (et = i, dt = void 0, Wt = s.templates, ct({ status: "ready", readyLocale: i }), L.resolve());
|
|
777
|
+
}, (s) => {
|
|
778
|
+
Q === t && (ct({
|
|
779
|
+
status: "error",
|
|
780
|
+
errorLocale: i,
|
|
781
|
+
errorMessage: s.toString()
|
|
782
|
+
}), L.reject(s));
|
|
783
|
+
}), L.promise;
|
|
784
|
+
}, qt = "en", Ie = [
|
|
785
|
+
"es-MX",
|
|
786
|
+
"pt-BR"
|
|
787
|
+
];
|
|
788
|
+
/**
|
|
789
|
+
* @license
|
|
790
|
+
* Copyright 2017 Google LLC
|
|
791
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
792
|
+
*/
|
|
793
|
+
const De = { ATTRIBUTE: 1 }, He = (i) => (...t) => ({ _$litDirective$: i, values: t });
|
|
794
|
+
class Pe {
|
|
795
|
+
constructor(t) {
|
|
796
|
+
}
|
|
797
|
+
get _$AU() {
|
|
798
|
+
return this._$AM._$AU;
|
|
799
|
+
}
|
|
800
|
+
_$AT(t, e, s) {
|
|
801
|
+
this._$Ct = t, this._$AM = e, this._$Ci = s;
|
|
802
|
+
}
|
|
803
|
+
_$AS(t, e) {
|
|
804
|
+
return this.update(t, e);
|
|
805
|
+
}
|
|
806
|
+
update(t, e) {
|
|
807
|
+
return this.render(...e);
|
|
808
|
+
}
|
|
809
|
+
}
|
|
810
|
+
/**
|
|
811
|
+
* @license
|
|
812
|
+
* Copyright 2018 Google LLC
|
|
813
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
814
|
+
*/
|
|
815
|
+
const Ue = He(class extends Pe {
|
|
816
|
+
constructor(i) {
|
|
817
|
+
var t;
|
|
818
|
+
if (super(i), i.type !== De.ATTRIBUTE || i.name !== "class" || ((t = i.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.");
|
|
819
|
+
}
|
|
820
|
+
render(i) {
|
|
821
|
+
return " " + Object.keys(i).filter((t) => i[t]).join(" ") + " ";
|
|
822
|
+
}
|
|
823
|
+
update(i, [t]) {
|
|
824
|
+
var s, o;
|
|
825
|
+
if (this.st === void 0) {
|
|
826
|
+
this.st = /* @__PURE__ */ new Set(), i.strings !== void 0 && (this.nt = new Set(i.strings.join(" ").split(/\s/).filter((n) => n !== "")));
|
|
827
|
+
for (const n in t) t[n] && !((s = this.nt) != null && s.has(n)) && this.st.add(n);
|
|
828
|
+
return this.render(t);
|
|
829
|
+
}
|
|
830
|
+
const e = i.element.classList;
|
|
831
|
+
for (const n of this.st) n in t || (e.remove(n), this.st.delete(n));
|
|
832
|
+
for (const n in t) {
|
|
833
|
+
const r = !!t[n];
|
|
834
|
+
r === this.st.has(n) || (o = this.nt) != null && o.has(n) || (r ? (e.add(n), this.st.add(n)) : (e.remove(n), this.st.delete(n)));
|
|
835
|
+
}
|
|
836
|
+
return T;
|
|
837
|
+
}
|
|
838
|
+
});
|
|
839
|
+
var Ve = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, Y = (i, t, e, s) => {
|
|
840
|
+
for (var o = s > 1 ? void 0 : s ? Fe(t, e) : t, n = i.length - 1, r; n >= 0; n--)
|
|
841
|
+
(r = i[n]) && (o = (s ? r(t, e, o) : r(o)) || o);
|
|
842
|
+
return s && o && Ve(t, e, o), o;
|
|
843
|
+
};
|
|
844
|
+
let O = class extends C {
|
|
845
|
+
constructor() {
|
|
846
|
+
super(...arguments), this.type = "button", this.label = "", this.disabled = !1, this.variant = "contained";
|
|
847
|
+
}
|
|
848
|
+
render() {
|
|
849
|
+
return g`
|
|
850
|
+
<div class="button-wrapper">
|
|
851
|
+
<button
|
|
852
|
+
class=${this.variant}
|
|
853
|
+
tabindex="0"
|
|
854
|
+
type=${this.type}
|
|
855
|
+
?disabled=${this.disabled}
|
|
856
|
+
>
|
|
857
|
+
${this.label}
|
|
858
|
+
</button>
|
|
859
|
+
</div>
|
|
860
|
+
`;
|
|
861
|
+
}
|
|
862
|
+
};
|
|
863
|
+
O.styles = U`
|
|
864
|
+
:host {
|
|
865
|
+
display: block;
|
|
866
|
+
width: 100%;
|
|
867
|
+
--brand-primary-fallback: #000;
|
|
868
|
+
--text-inverse-fallback: #FFFFFF;
|
|
869
|
+
}
|
|
870
|
+
|
|
871
|
+
:host([hidden]) {
|
|
872
|
+
display: none !important;
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
.button-wrapper {
|
|
876
|
+
display: flex;
|
|
877
|
+
width: 100%;
|
|
878
|
+
justify-content: center;
|
|
879
|
+
align-items: center;
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
button {
|
|
883
|
+
width: 100%;
|
|
884
|
+
padding: 14px 28px;
|
|
885
|
+
border-radius: 12px;
|
|
886
|
+
font-size: 15px;
|
|
887
|
+
font-weight: 600;
|
|
888
|
+
font-family: "Lato", sans-serif;
|
|
889
|
+
cursor: pointer;
|
|
890
|
+
transition: all 0.25s ease;
|
|
891
|
+
display: flex;
|
|
892
|
+
align-items: center;
|
|
893
|
+
justify-content: center;
|
|
894
|
+
min-height: 48px;
|
|
895
|
+
-webkit-appearance: none;
|
|
896
|
+
-webkit-tap-highlight-color: transparent;
|
|
897
|
+
box-sizing: border-box;
|
|
898
|
+
}
|
|
899
|
+
|
|
900
|
+
/* Contained (azul cheio) */
|
|
901
|
+
button.contained {
|
|
902
|
+
background-color: var(--brand-primary, var(--brand-primary-fallback, #0000));
|
|
903
|
+
color: var(--text-inverse, var(--text-inverse-fallback, #FFFFFF));
|
|
904
|
+
border: none;
|
|
905
|
+
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
button.contained:hover {
|
|
909
|
+
background-color: #333333; /* gris oscuro */
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
/* Outlined */
|
|
913
|
+
button.outlined {
|
|
914
|
+
background-color: transparent;
|
|
915
|
+
color: var(--brand-primary, var(--brand-primary-fallback, #1C28BA));
|
|
916
|
+
border: 1.5px solid var(--brand-primary, var(--brand-primary-fallback, #1C28BA));
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
button.outlined:hover {
|
|
920
|
+
background-color: rgba(28, 40, 186, 0.05);
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
/* Estados */
|
|
924
|
+
button:focus {
|
|
925
|
+
outline: 2px solid var(--brand-primary, var(--brand-primary-fallback, #1C28BA));
|
|
926
|
+
outline-offset: 2px;
|
|
927
|
+
}
|
|
928
|
+
|
|
929
|
+
button:disabled {
|
|
930
|
+
opacity: 0.6;
|
|
931
|
+
cursor: not-allowed;
|
|
932
|
+
box-shadow: none;
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
@media (max-width: 380px) {
|
|
936
|
+
button {
|
|
937
|
+
padding: 10px 24px;
|
|
938
|
+
font-size: 8px;
|
|
939
|
+
min-height: 30px;
|
|
940
|
+
|
|
941
|
+
}
|
|
942
|
+
}
|
|
943
|
+
`;
|
|
944
|
+
Y([
|
|
945
|
+
d({ type: String })
|
|
946
|
+
], O.prototype, "type", 2);
|
|
947
|
+
Y([
|
|
948
|
+
d({ type: String })
|
|
949
|
+
], O.prototype, "label", 2);
|
|
950
|
+
Y([
|
|
951
|
+
d({ type: Boolean })
|
|
952
|
+
], O.prototype, "disabled", 2);
|
|
953
|
+
Y([
|
|
954
|
+
d({ type: String })
|
|
955
|
+
], O.prototype, "variant", 2);
|
|
956
|
+
O = Y([
|
|
957
|
+
V("xact-button")
|
|
958
|
+
], O);
|
|
959
|
+
var ze = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, nt = (i, t, e, s) => {
|
|
960
|
+
for (var o = s > 1 ? void 0 : s ? Ne(t, e) : t, n = i.length - 1, r; n >= 0; n--)
|
|
961
|
+
(r = i[n]) && (o = (s ? r(t, e, o) : r(o)) || o);
|
|
962
|
+
return s && o && ze(t, e, o), o;
|
|
963
|
+
};
|
|
964
|
+
let P = class extends C {
|
|
965
|
+
constructor() {
|
|
966
|
+
super(...arguments), this.height = 0, this.brandName = "", this.handleStart = () => {
|
|
967
|
+
var t;
|
|
968
|
+
const i = this.shadowRoot.querySelector(
|
|
969
|
+
"#height-input"
|
|
970
|
+
);
|
|
971
|
+
if (i != null && i.value) {
|
|
972
|
+
const e = parseInt(i.value);
|
|
973
|
+
this.height = e, (t = this.onStartMeasurement) == null || t.call(this, e);
|
|
974
|
+
}
|
|
975
|
+
};
|
|
976
|
+
}
|
|
977
|
+
render() {
|
|
978
|
+
return g`
|
|
979
|
+
<div class="card">
|
|
980
|
+
<div class="pill">XactSize${this.brandName ? " x " + this.brandName : ""}</div>
|
|
981
|
+
<h2 class="title">${a("Let's find your perfect size")}</h2>
|
|
982
|
+
<p class="subtitle">${a("Curated luxury. Perfect fit.")}</p>
|
|
983
|
+
|
|
984
|
+
<div class="tips">
|
|
985
|
+
<h4>${a("Tips")}</h4>
|
|
986
|
+
|
|
987
|
+
${this.renderTip(a("Good Lighting"), a("Avoid backlighting"))}
|
|
988
|
+
${this.renderTip(a("Clean Background"), a("Use a plain wall"))}
|
|
989
|
+
${this.renderTip(a("Clothes"), a("Form-fitting gear"))}
|
|
990
|
+
${this.renderTip(a("Framing"), a("Full body shot"))}
|
|
991
|
+
</div>
|
|
992
|
+
|
|
993
|
+
<div class="input-group">
|
|
994
|
+
<input
|
|
995
|
+
id="height-input"
|
|
996
|
+
class="height-input"
|
|
997
|
+
type="number"
|
|
998
|
+
min="50"
|
|
999
|
+
max="300"
|
|
1000
|
+
placeholder=${a("Enter your height (cm)")}
|
|
1001
|
+
required
|
|
1002
|
+
tabindex="1"
|
|
1003
|
+
/>
|
|
1004
|
+
</div>
|
|
1005
|
+
|
|
1006
|
+
<div class="cta">
|
|
1007
|
+
<xact-button
|
|
1008
|
+
label="${a("Let's get started! →")}"
|
|
1009
|
+
style="--brand-primary: #000;"
|
|
1010
|
+
@click=${this.handleStart}
|
|
1011
|
+
></xact-button>
|
|
1012
|
+
</div>
|
|
1013
|
+
|
|
1014
|
+
<p class="disclaimer">
|
|
1015
|
+
${a("By using")} Xactsize, ${a("you agree to our Terms and Privacy Policy.")}
|
|
1016
|
+
</p>
|
|
1017
|
+
</div>
|
|
1018
|
+
`;
|
|
1019
|
+
}
|
|
1020
|
+
renderTip(i, t) {
|
|
1021
|
+
return g`
|
|
1022
|
+
<div class="tip">
|
|
1023
|
+
<span class="check">
|
|
1024
|
+
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
1025
|
+
<path d="M5 13l4 4L19 7" />
|
|
1026
|
+
</svg>
|
|
1027
|
+
</span>
|
|
1028
|
+
<div>
|
|
1029
|
+
<strong>${i}</strong>
|
|
1030
|
+
<span>${t}</span>
|
|
1031
|
+
</div>
|
|
1032
|
+
</div>
|
|
1033
|
+
`;
|
|
1034
|
+
}
|
|
1035
|
+
};
|
|
1036
|
+
P.styles = U`
|
|
1037
|
+
:host {
|
|
1038
|
+
display: block;
|
|
1039
|
+
font-family: 'Inter', 'Helvetica', Arial, sans-serif;
|
|
1040
|
+
color: #111;
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
.card {
|
|
1044
|
+
max-width: 560px;
|
|
1045
|
+
margin: 0 auto;
|
|
1046
|
+
padding: 28px 28px 32px;
|
|
1047
|
+
background: #ffffff;
|
|
1048
|
+
border-radius: 24px;
|
|
1049
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
|
1050
|
+
display: flex;
|
|
1051
|
+
flex-direction: column;
|
|
1052
|
+
gap: 20px;
|
|
1053
|
+
box-sizing: border-box;
|
|
1054
|
+
}
|
|
1055
|
+
|
|
1056
|
+
.pill {
|
|
1057
|
+
align-self: center;
|
|
1058
|
+
padding: 8px 16px;
|
|
1059
|
+
border-radius: 999px;
|
|
1060
|
+
background: #f1f2f3;
|
|
1061
|
+
font-size: 11px;
|
|
1062
|
+
font-weight: 700;
|
|
1063
|
+
letter-spacing: 0.08em;
|
|
1064
|
+
color: #555;
|
|
1065
|
+
text-transform: uppercase;
|
|
1066
|
+
}
|
|
1067
|
+
|
|
1068
|
+
.title {
|
|
1069
|
+
text-align: center;
|
|
1070
|
+
font-size: 26px;
|
|
1071
|
+
font-weight: 700;
|
|
1072
|
+
margin: 0;
|
|
1073
|
+
line-height: 1.2;
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1076
|
+
.subtitle {
|
|
1077
|
+
text-align: center;
|
|
1078
|
+
color: #666;
|
|
1079
|
+
margin: 0;
|
|
1080
|
+
font-size: 14px;
|
|
1081
|
+
line-height: 1.5;
|
|
1082
|
+
}
|
|
1083
|
+
|
|
1084
|
+
.tips {
|
|
1085
|
+
display: grid;
|
|
1086
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
1087
|
+
gap: 12px 16px;
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
.tips h4 {
|
|
1091
|
+
grid-column: 1 / -1;
|
|
1092
|
+
margin: 4px 0;
|
|
1093
|
+
font-size: 12px;
|
|
1094
|
+
letter-spacing: 0.08em;
|
|
1095
|
+
text-transform: uppercase;
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
.tip {
|
|
1099
|
+
display: flex;
|
|
1100
|
+
gap: 12px;
|
|
1101
|
+
align-items: center;
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
|
|
1105
|
+
.check {
|
|
1106
|
+
width: 16px;
|
|
1107
|
+
height: 16px;
|
|
1108
|
+
flex-shrink: 0;
|
|
1109
|
+
display: flex;
|
|
1110
|
+
align-items: center;
|
|
1111
|
+
justify-content: center;
|
|
1112
|
+
animation: checkAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
|
|
1113
|
+
}
|
|
1114
|
+
|
|
1115
|
+
.check svg {
|
|
1116
|
+
width: 16px;
|
|
1117
|
+
height: 16px;
|
|
1118
|
+
stroke: #000;
|
|
1119
|
+
stroke-width: 2.5;
|
|
1120
|
+
fill: none;
|
|
1121
|
+
stroke-linecap: round;
|
|
1122
|
+
stroke-linejoin: round;
|
|
1123
|
+
}
|
|
1124
|
+
|
|
1125
|
+
.tip:nth-child(2) .check {
|
|
1126
|
+
animation-delay: 0.1s;
|
|
1127
|
+
}
|
|
1128
|
+
|
|
1129
|
+
.tip:nth-child(3) .check {
|
|
1130
|
+
animation-delay: 0.2s;
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1133
|
+
.tip:nth-child(4) .check {
|
|
1134
|
+
animation-delay: 0.3s;
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
.tip:nth-child(5) .check {
|
|
1138
|
+
animation-delay: 0.4s;
|
|
1139
|
+
}
|
|
1140
|
+
|
|
1141
|
+
@keyframes checkAppear {
|
|
1142
|
+
0% {
|
|
1143
|
+
transform: scale(0);
|
|
1144
|
+
opacity: 0;
|
|
1145
|
+
}
|
|
1146
|
+
100% {
|
|
1147
|
+
transform: scale(1);
|
|
1148
|
+
opacity: 1;
|
|
1149
|
+
}
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
.tip strong {
|
|
1153
|
+
display: block;
|
|
1154
|
+
font-size: 14px;
|
|
1155
|
+
margin-bottom: 2px;
|
|
1156
|
+
}
|
|
1157
|
+
|
|
1158
|
+
.tip span {
|
|
1159
|
+
display: block;
|
|
1160
|
+
font-size: 12px;
|
|
1161
|
+
color: #777;
|
|
1162
|
+
line-height: 1.4;
|
|
1163
|
+
}
|
|
1164
|
+
|
|
1165
|
+
.input-group {
|
|
1166
|
+
margin-top: 4px;
|
|
1167
|
+
}
|
|
1168
|
+
|
|
1169
|
+
.height-input {
|
|
1170
|
+
width: 100%;
|
|
1171
|
+
padding: 14px 16px;
|
|
1172
|
+
border: 1px solid #e0e0e0;
|
|
1173
|
+
border-radius: 12px;
|
|
1174
|
+
background: #f7f7f7;
|
|
1175
|
+
font-size: 14px;
|
|
1176
|
+
color: #111;
|
|
1177
|
+
box-sizing: border-box;
|
|
1178
|
+
}
|
|
1179
|
+
|
|
1180
|
+
.height-input:focus {
|
|
1181
|
+
outline: none;
|
|
1182
|
+
border-color: #000;
|
|
1183
|
+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
1184
|
+
background: #fff;
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
.cta {
|
|
1188
|
+
margin-top: 8px;
|
|
1189
|
+
width: 100%;
|
|
1190
|
+
}
|
|
1191
|
+
|
|
1192
|
+
.disclaimer {
|
|
1193
|
+
margin: 0;
|
|
1194
|
+
text-align: center;
|
|
1195
|
+
color: #9a9a9a;
|
|
1196
|
+
font-size: 11px;
|
|
1197
|
+
line-height: 1.4;
|
|
1198
|
+
}
|
|
1199
|
+
|
|
1200
|
+
@media (max-width: 600px) {
|
|
1201
|
+
.card {
|
|
1202
|
+
padding: 22px 18px 26px;
|
|
1203
|
+
}
|
|
1204
|
+
.title {
|
|
1205
|
+
font-size: 22px;
|
|
1206
|
+
}
|
|
1207
|
+
.tips {
|
|
1208
|
+
grid-template-columns: 1fr;
|
|
1209
|
+
}
|
|
1210
|
+
}
|
|
1211
|
+
`;
|
|
1212
|
+
nt([
|
|
1213
|
+
d({ type: Number })
|
|
1214
|
+
], P.prototype, "height", 2);
|
|
1215
|
+
nt([
|
|
1216
|
+
d({ type: String })
|
|
1217
|
+
], P.prototype, "brandName", 2);
|
|
1218
|
+
nt([
|
|
1219
|
+
d({ type: Function })
|
|
1220
|
+
], P.prototype, "onStartMeasurement", 2);
|
|
1221
|
+
P = nt([
|
|
1222
|
+
V("xact-step-one"),
|
|
1223
|
+
q()
|
|
1224
|
+
], P);
|
|
1225
|
+
var Be = Object.getOwnPropertyDescriptor, Ze = (i, t, e, s) => {
|
|
1226
|
+
for (var o = s > 1 ? void 0 : s ? Be(t, e) : t, n = i.length - 1, r; n >= 0; n--)
|
|
1227
|
+
(r = i[n]) && (o = r(o) || o);
|
|
1228
|
+
return o;
|
|
1229
|
+
};
|
|
1230
|
+
let ft = class extends C {
|
|
1231
|
+
render() {
|
|
1232
|
+
return g`
|
|
1233
|
+
<footer class="modal-footer">
|
|
1234
|
+
<span>
|
|
1235
|
+
<span class="powered-by">${a("Powered by")}</span>
|
|
1236
|
+
<a tabindex="0" class="xactsize-link" href="http://xactsize.com" target="_blank" rel="noopener">
|
|
1237
|
+
<svg class="xactsize-icon" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1238
|
+
<path d="M5.82764 11.3511L11.5446 7.80768V11.3511H5.82764Z" fill="url(#paint0_linear_2010_6151)"/>
|
|
1239
|
+
<path d="M5.82764 7.80909L11.5446 4.26569V7.80909H5.82764Z" fill="url(#paint1_linear_2010_6151)"/>
|
|
1240
|
+
<path d="M5.82764 4.26654L11.5446 0.723145V4.26654H5.82764Z" fill="url(#paint2_linear_2010_6151)"/>
|
|
1241
|
+
<path d="M5.82759 0.723145L0.110596 4.26654V0.723145H5.82759Z" fill="url(#paint3_linear_2010_6151)"/>
|
|
1242
|
+
<path d="M5.82759 4.26571L0.110596 7.80835V4.26495H5.82759V4.26571Z" fill="url(#paint4_linear_2010_6151)"/>
|
|
1243
|
+
<path d="M5.82759 7.80844L0.110596 11.3511V7.80768H5.82759V7.80844Z" fill="url(#paint5_linear_2010_6151)"/>
|
|
1244
|
+
<defs>
|
|
1245
|
+
<linearGradient id="paint0_linear_2010_6151" x1="-4.32241" y1="9.58014" x2="10.756" y2="9.58014" gradientUnits="userSpaceOnUse">
|
|
1246
|
+
<stop stop-color="#1C28BA"/>
|
|
1247
|
+
<stop offset="1" stop-color="#6F1BBF"/>
|
|
1248
|
+
</linearGradient>
|
|
1249
|
+
<linearGradient id="paint1_linear_2010_6151" x1="-0.448527" y1="6.03739" x2="-0.372553" y2="6.03739" gradientUnits="userSpaceOnUse">
|
|
1250
|
+
<stop stop-color="#1C28BA"/>
|
|
1251
|
+
<stop offset="1" stop-color="#6F1BBF"/>
|
|
1252
|
+
</linearGradient>
|
|
1253
|
+
<linearGradient id="paint2_linear_2010_6151" x1="-0.448527" y1="2.49484" x2="-0.372553" y2="2.49484" gradientUnits="userSpaceOnUse">
|
|
1254
|
+
<stop stop-color="#1C28BA"/>
|
|
1255
|
+
<stop offset="1" stop-color="#6F1BBF"/>
|
|
1256
|
+
</linearGradient>
|
|
1257
|
+
<linearGradient id="paint3_linear_2010_6151" x1="-4.32245" y1="2.49484" x2="10.756" y2="2.49484" gradientUnits="userSpaceOnUse">
|
|
1258
|
+
<stop stop-color="#1C28BA"/>
|
|
1259
|
+
<stop offset="1" stop-color="#6F1BBF"/>
|
|
1260
|
+
</linearGradient>
|
|
1261
|
+
<linearGradient id="paint4_linear_2010_6151" x1="-4.32245" y1="6.03665" x2="10.756" y2="6.03665" gradientUnits="userSpaceOnUse">
|
|
1262
|
+
<stop stop-color="#1C28BA"/>
|
|
1263
|
+
<stop offset="1" stop-color="#6F1BBF"/>
|
|
1264
|
+
</linearGradient>
|
|
1265
|
+
<linearGradient id="paint5_linear_2010_6151" x1="-4.32245" y1="9.58014" x2="10.756" y2="9.58014" gradientUnits="userSpaceOnUse">
|
|
1266
|
+
<stop stop-color="#1C28BA"/>
|
|
1267
|
+
<stop offset="1" stop-color="#6F1BBF"/>
|
|
1268
|
+
</linearGradient>
|
|
1269
|
+
</defs>
|
|
1270
|
+
</svg>
|
|
1271
|
+
Xactsize
|
|
1272
|
+
</a>
|
|
1273
|
+
</span>
|
|
1274
|
+
</footer>
|
|
1275
|
+
`;
|
|
1276
|
+
}
|
|
1277
|
+
};
|
|
1278
|
+
ft.styles = U`
|
|
1279
|
+
.modal-footer {
|
|
1280
|
+
text-align: center;
|
|
1281
|
+
font-size: 12px;
|
|
1282
|
+
padding: 16px;
|
|
1283
|
+
color: #000;
|
|
1284
|
+
}
|
|
1285
|
+
|
|
1286
|
+
.modal-footer span {
|
|
1287
|
+
display: inline-flex;
|
|
1288
|
+
align-items: center;
|
|
1289
|
+
justify-content: center;
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1292
|
+
.powered-by {
|
|
1293
|
+
font-weight: normal;
|
|
1294
|
+
margin-right: 4px;
|
|
1295
|
+
}
|
|
1296
|
+
|
|
1297
|
+
.xactsize-link {
|
|
1298
|
+
color: #040D3F;
|
|
1299
|
+
font-weight: bold;
|
|
1300
|
+
text-decoration: none;
|
|
1301
|
+
display: inline-flex;
|
|
1302
|
+
align-items: center;
|
|
1303
|
+
}
|
|
1304
|
+
|
|
1305
|
+
.xactsize-icon {
|
|
1306
|
+
vertical-align: middle;
|
|
1307
|
+
margin: 0 4px 0 0;
|
|
1308
|
+
}
|
|
1309
|
+
|
|
1310
|
+
a:focus {
|
|
1311
|
+
outline: 2px solid var(--brand-primary);
|
|
1312
|
+
outline-offset: 2px;
|
|
1313
|
+
}
|
|
1314
|
+
`;
|
|
1315
|
+
ft = Ze([
|
|
1316
|
+
V("xact-footer"),
|
|
1317
|
+
q()
|
|
1318
|
+
], ft);
|
|
1319
|
+
var je = Object.defineProperty, Ge = Object.getOwnPropertyDescriptor, v = (i, t, e, s) => {
|
|
1320
|
+
for (var o = s > 1 ? void 0 : s ? Ge(t, e) : t, n = i.length - 1, r; n >= 0; n--)
|
|
1321
|
+
(r = i[n]) && (o = (s ? r(t, e, o) : r(o)) || o);
|
|
1322
|
+
return s && o && je(t, e, o), o;
|
|
1323
|
+
};
|
|
1324
|
+
let x = class extends C {
|
|
1325
|
+
constructor() {
|
|
1326
|
+
super(...arguments), this.productName = "", this.recommendedSize = "", this.productSku = "", this.garmentUrl = "", this.generatedImageUrl = "", this.isVtonFetching = !1, this.vtonError = !1;
|
|
1327
|
+
}
|
|
1328
|
+
render() {
|
|
1329
|
+
return g`
|
|
1330
|
+
<div class="image-container">
|
|
1331
|
+
<!-- Product image -->
|
|
1332
|
+
<img
|
|
1333
|
+
class="product-image"
|
|
1334
|
+
src="${this.generatedImageUrl || this.garmentUrl}"
|
|
1335
|
+
alt="${this.productName || a("Product")}"
|
|
1336
|
+
/>
|
|
1337
|
+
|
|
1338
|
+
<!-- Badge com fundo e texto -->
|
|
1339
|
+
<svg
|
|
1340
|
+
class="size-badge"
|
|
1341
|
+
width="81"
|
|
1342
|
+
height="81"
|
|
1343
|
+
viewBox="0 0 81 81"
|
|
1344
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1345
|
+
>
|
|
1346
|
+
<mask
|
|
1347
|
+
id="mask0_2314_2158"
|
|
1348
|
+
style="mask-type:luminance"
|
|
1349
|
+
maskUnits="userSpaceOnUse"
|
|
1350
|
+
x="0"
|
|
1351
|
+
y="0"
|
|
1352
|
+
width="81"
|
|
1353
|
+
height="81"
|
|
1354
|
+
>
|
|
1355
|
+
<path d="M80.25 0.25H0.25V80.25H80.25V0.25Z" fill="white" />
|
|
1356
|
+
</mask>
|
|
1357
|
+
<g mask="url(#mask0_2314_2158)">
|
|
1358
|
+
<path
|
|
1359
|
+
d="M37.7239 2.31186C39.1956 1.11154 41.3084 1.11154 42.78 2.31186L45.9532 4.89994C46.952 5.71426 48.2816 5.99778 49.5252 5.66158L53.4676 4.59602C55.2984 4.10118 57.2248 4.95994 58.0808 6.65226L59.9436 10.3361C60.5236 11.4825 61.6184 12.2807 62.8872 12.4817L66.9388 13.1235C68.8056 13.4193 70.2108 14.9815 70.3076 16.8693L70.5208 21.0253C70.5864 22.3031 71.2596 23.4725 72.3316 24.1713L75.798 26.4307C77.3764 27.4598 78.0228 29.4513 77.3492 31.2113L75.858 35.1085C75.4016 36.3008 75.542 37.6392 76.2352 38.711L78.4992 42.2095C79.522 43.7907 79.3036 45.8711 77.9744 47.2055L75.0424 50.1491C74.1408 51.0543 73.7256 52.3355 73.9256 53.5975L74.578 57.7171C74.8728 59.5807 73.8252 61.3971 72.0644 62.0755L68.2204 63.5555C67.024 64.0163 66.1208 65.0223 65.7916 66.2616L64.7272 70.2687C64.2412 72.0991 62.5384 73.3375 60.6476 73.2363L56.564 73.0179C55.2788 72.9491 54.0392 73.5027 53.2328 74.5055L50.6576 77.7087C49.468 79.1883 47.4024 79.6279 45.7132 78.7607L42.0788 76.8947C40.932 76.3063 39.5719 76.3063 38.4252 76.8947L34.7906 78.7607C33.1017 79.6279 31.036 79.1883 29.8465 77.7087L27.2712 74.5055C26.4648 73.5027 25.2252 72.9491 23.9401 73.0179L19.8564 73.2363C17.9656 73.3375 16.2628 72.0991 15.7767 70.2687L14.7123 66.2616C14.3831 65.0223 13.4801 64.0163 12.2837 63.5555L8.43962 62.0755C6.67862 61.3971 5.63106 59.5807 5.92618 57.7171L6.57846 53.5975C6.77826 52.3355 6.36322 51.0543 5.46158 50.1491L2.52944 47.2055C1.20043 45.8711 0.982011 43.7907 2.00497 42.2095L4.26858 38.711C4.96206 37.6392 5.10226 36.3008 4.64602 35.1085L3.15462 31.2113C2.48108 29.4513 3.1274 27.4598 4.70614 26.4307L8.17253 24.1713C9.24445 23.4725 9.91741 22.3031 9.98298 21.0253L10.1963 16.8693C10.2931 14.9815 11.6982 13.4193 13.5651 13.1235L17.6167 12.4817C18.8855 12.2807 19.9805 11.4825 20.5603 10.3361L22.4233 6.65226C23.2791 4.95994 25.2057 4.10118 27.0365 4.59602L30.9787 5.66158C32.2225 5.99778 33.5521 5.71426 34.5506 4.89994L37.7239 2.31186Z"
|
|
1360
|
+
fill="#1C28BA"
|
|
1361
|
+
/>
|
|
1362
|
+
<path
|
|
1363
|
+
d="M37.7239 2.31186C39.1956 1.11154 41.3084 1.11154 42.78 2.31186L45.9532 4.89994C46.952 5.71426 48.2816 5.99778 49.5252 5.66158L53.4676 4.59602C55.2984 4.10118 57.2248 4.95994 58.0808 6.65226L59.9436 10.3361C60.5236 11.4825 61.6184 12.2807 62.8872 12.4817L66.9388 13.1235C68.8056 13.4193 70.2108 14.9815 70.3076 16.8693L70.5208 21.0253C70.5864 22.3031 71.2596 23.4725 72.3316 24.1713L75.798 26.4307C77.3764 27.4598 78.0228 29.4513 77.3492 31.2113L75.858 35.1085C75.4016 36.3008 75.542 37.6392 76.2352 38.711L78.4992 42.2095C79.522 43.7907 79.3036 45.8711 77.9744 47.2055L75.0424 50.1491C74.1408 51.0543 73.7256 52.3355 73.9256 53.5975L74.578 57.7171C74.8728 59.5807 73.8252 61.3971 72.0644 62.0755L68.2204 63.5555C67.024 64.0163 66.1208 65.0223 65.7916 66.2616L64.7272 70.2687C64.2412 72.0991 62.5384 73.3375 60.6476 73.2363L56.564 73.0179C55.2788 72.9491 54.0392 73.5027 53.2328 74.5055L50.6576 77.7087C49.468 79.1883 47.4024 79.6279 45.7132 78.7607L42.0788 76.8947C40.932 76.3063 39.5719 76.3063 38.4252 76.8947L34.7906 78.7607C33.1017 79.6279 31.036 79.1883 29.8465 77.7087L27.2712 74.5055C26.4648 73.5027 25.2252 72.9491 23.9401 73.0179L19.8564 73.2363C17.9656 73.3375 16.2628 72.0991 15.7767 70.2687L14.7123 66.2616C14.3831 65.0223 13.4801 64.0163 12.2837 63.5555L8.43962 62.0755C6.67862 61.3971 5.63106 59.5807 5.92618 57.7171L6.57846 53.5975C6.77826 52.3355 6.36322 51.0543 5.46158 50.1491L2.52944 47.2055C1.20043 45.8711 0.982011 43.7907 2.00497 42.2095L4.26858 38.711C4.96206 37.6392 5.10226 36.3008 4.64602 35.1085L3.15462 31.2113C2.48108 29.4513 3.1274 27.4598 4.70614 26.4307L8.17253 24.1713C9.24445 23.4725 9.91741 22.3031 9.98298 21.0253L10.1963 16.8693C10.2931 14.9815 11.6982 13.4193 13.5651 13.1235L17.6167 12.4817C18.8855 12.2807 19.9805 11.4825 20.5603 10.3361L22.4233 6.65226C23.2791 4.95994 25.2057 4.10118 27.0365 4.59602L30.9787 5.66158C32.2225 5.99778 33.5521 5.71426 34.5506 4.89994L37.7239 2.31186Z"
|
|
1364
|
+
fill="url(#paint0_linear_2314_2158)"
|
|
1365
|
+
fill-opacity="0.4"
|
|
1366
|
+
/>
|
|
1367
|
+
</g>
|
|
1368
|
+
<defs>
|
|
1369
|
+
<linearGradient
|
|
1370
|
+
id="paint0_linear_2314_2158"
|
|
1371
|
+
x1="79.1407"
|
|
1372
|
+
y1="40.3071"
|
|
1373
|
+
x2="1.36328"
|
|
1374
|
+
y2="40.3071"
|
|
1375
|
+
gradientUnits="userSpaceOnUse"
|
|
1376
|
+
>
|
|
1377
|
+
<stop stop-color="white" stop-opacity="0" />
|
|
1378
|
+
<stop offset="1" stop-color="white" />
|
|
1379
|
+
</linearGradient>
|
|
1380
|
+
</defs>
|
|
1381
|
+
|
|
1382
|
+
<!-- Texto centralizado -->
|
|
1383
|
+
<text
|
|
1384
|
+
x="50%"
|
|
1385
|
+
y="55%"
|
|
1386
|
+
dominant-baseline="middle"
|
|
1387
|
+
text-anchor="middle"
|
|
1388
|
+
fill="white"
|
|
1389
|
+
font-size="20"
|
|
1390
|
+
font-weight="bold"
|
|
1391
|
+
>
|
|
1392
|
+
${this.recommendedSize}
|
|
1393
|
+
</text>
|
|
1394
|
+
</svg>
|
|
1395
|
+
</div>
|
|
1396
|
+
|
|
1397
|
+
<h2 class="title">${a("Your ideal size")}</h2>
|
|
1398
|
+
<p class="description">
|
|
1399
|
+
${a(
|
|
1400
|
+
"Based on your measurements and the exact dimensions of the garment, the size recommendation provided is the most accurate for an ideal fit."
|
|
1401
|
+
)}
|
|
1402
|
+
</p>
|
|
1403
|
+
|
|
1404
|
+
<div class="buttons">
|
|
1405
|
+
${this.isVtonFetching ? g`
|
|
1406
|
+
<div style="width: 100%; margin-bottom: 12px;">
|
|
1407
|
+
<p
|
|
1408
|
+
class="description"
|
|
1409
|
+
style="margin: 0 auto; font-weight: 800; font-size: 18px; background: linear-gradient(90deg, #1C28BA, #d32f2f, #1C28BA); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientPulse 3s linear infinite;"
|
|
1410
|
+
>
|
|
1411
|
+
${a("Generating your Virtual Try-On image...")}
|
|
1412
|
+
</p>
|
|
1413
|
+
</div>
|
|
1414
|
+
` : this.vtonError ? g`
|
|
1415
|
+
<div style="width: 100%; margin-bottom: 12px;">
|
|
1416
|
+
<p
|
|
1417
|
+
class="description"
|
|
1418
|
+
style="margin: 0 auto; color: #d32f2f; font-weight: 600;"
|
|
1419
|
+
>
|
|
1420
|
+
${a(
|
|
1421
|
+
"Something happened while generating the Virtual Try-On image."
|
|
1422
|
+
)}
|
|
1423
|
+
</p>
|
|
1424
|
+
</div>
|
|
1425
|
+
` : this.generatedImageUrl ? g`
|
|
1426
|
+
<xact-button
|
|
1427
|
+
variant="outlined"
|
|
1428
|
+
@click=${() => window.open(this.generatedImageUrl, "_blank")}
|
|
1429
|
+
label=${a("VIEW FULL IMAGE")}
|
|
1430
|
+
>
|
|
1431
|
+
</xact-button>
|
|
1432
|
+
` : ""}
|
|
1433
|
+
|
|
1434
|
+
<xact-button
|
|
1435
|
+
variant="outlined"
|
|
1436
|
+
@click=${this.onRetry}
|
|
1437
|
+
label=${a("Measure Again")}
|
|
1438
|
+
>
|
|
1439
|
+
</xact-button>
|
|
1440
|
+
|
|
1441
|
+
<xact-button @click=${this.onAccept} label=${a("Accept Suggestion")}>
|
|
1442
|
+
</xact-button>
|
|
1443
|
+
</div>
|
|
1444
|
+
`;
|
|
1445
|
+
}
|
|
1446
|
+
};
|
|
1447
|
+
x.styles = U`
|
|
1448
|
+
:host {
|
|
1449
|
+
display: flex;
|
|
1450
|
+
flex-direction: column;
|
|
1451
|
+
align-items: center;
|
|
1452
|
+
padding: 24px 16px;
|
|
1453
|
+
text-align: center;
|
|
1454
|
+
font-family: "Lato", sans-serif;
|
|
1455
|
+
box-sizing: border-box;
|
|
1456
|
+
width: 100%;
|
|
1457
|
+
}
|
|
1458
|
+
|
|
1459
|
+
.image-container {
|
|
1460
|
+
position: relative;
|
|
1461
|
+
width: 100%;
|
|
1462
|
+
max-width: 280px;
|
|
1463
|
+
margin: 0 auto 16px auto;
|
|
1464
|
+
}
|
|
1465
|
+
|
|
1466
|
+
.product-image {
|
|
1467
|
+
width: 100%;
|
|
1468
|
+
border-radius: 8px;
|
|
1469
|
+
object-fit: cover;
|
|
1470
|
+
}
|
|
1471
|
+
|
|
1472
|
+
.size-badge {
|
|
1473
|
+
position: absolute;
|
|
1474
|
+
bottom: 12px;
|
|
1475
|
+
left: 50%;
|
|
1476
|
+
transform: translateX(-50%);
|
|
1477
|
+
width: 64px;
|
|
1478
|
+
height: 64px;
|
|
1479
|
+
}
|
|
1480
|
+
|
|
1481
|
+
.title {
|
|
1482
|
+
font-size: 20px;
|
|
1483
|
+
font-weight: 700;
|
|
1484
|
+
margin: 8px 0;
|
|
1485
|
+
color: #333;
|
|
1486
|
+
}
|
|
1487
|
+
|
|
1488
|
+
.description {
|
|
1489
|
+
font-size: 14px;
|
|
1490
|
+
font-weight: 400;
|
|
1491
|
+
color: #444;
|
|
1492
|
+
margin: 16px 0;
|
|
1493
|
+
max-width: 320px;
|
|
1494
|
+
line-height: 1.5;
|
|
1495
|
+
}
|
|
1496
|
+
|
|
1497
|
+
.buttons {
|
|
1498
|
+
display: flex;
|
|
1499
|
+
flex-wrap: wrap;
|
|
1500
|
+
gap: 12px;
|
|
1501
|
+
justify-content: center;
|
|
1502
|
+
width: 100%;
|
|
1503
|
+
max-width: 320px;
|
|
1504
|
+
}
|
|
1505
|
+
|
|
1506
|
+
@media (min-width: 600px) {
|
|
1507
|
+
.image-container {
|
|
1508
|
+
max-width: 200px;
|
|
1509
|
+
}
|
|
1510
|
+
|
|
1511
|
+
.description {
|
|
1512
|
+
max-width: 480px;
|
|
1513
|
+
}
|
|
1514
|
+
|
|
1515
|
+
.buttons {
|
|
1516
|
+
flex-direction: row;
|
|
1517
|
+
justify-content: center;
|
|
1518
|
+
}
|
|
1519
|
+
}
|
|
1520
|
+
|
|
1521
|
+
@keyframes gradientPulse {
|
|
1522
|
+
0% {
|
|
1523
|
+
background-position: 0% center;
|
|
1524
|
+
}
|
|
1525
|
+
100% {
|
|
1526
|
+
background-position: 200% center;
|
|
1527
|
+
}
|
|
1528
|
+
}
|
|
1529
|
+
`;
|
|
1530
|
+
v([
|
|
1531
|
+
d({ type: String })
|
|
1532
|
+
], x.prototype, "productName", 2);
|
|
1533
|
+
v([
|
|
1534
|
+
d({ type: String })
|
|
1535
|
+
], x.prototype, "recommendedSize", 2);
|
|
1536
|
+
v([
|
|
1537
|
+
d({ type: String })
|
|
1538
|
+
], x.prototype, "productSku", 2);
|
|
1539
|
+
v([
|
|
1540
|
+
d({ type: String })
|
|
1541
|
+
], x.prototype, "garmentUrl", 2);
|
|
1542
|
+
v([
|
|
1543
|
+
d({ type: String })
|
|
1544
|
+
], x.prototype, "generatedImageUrl", 2);
|
|
1545
|
+
v([
|
|
1546
|
+
d({ type: Boolean })
|
|
1547
|
+
], x.prototype, "isVtonFetching", 2);
|
|
1548
|
+
v([
|
|
1549
|
+
d({ type: Boolean })
|
|
1550
|
+
], x.prototype, "vtonError", 2);
|
|
1551
|
+
v([
|
|
1552
|
+
d({ type: Function })
|
|
1553
|
+
], x.prototype, "onAccept", 2);
|
|
1554
|
+
v([
|
|
1555
|
+
d({ type: Function })
|
|
1556
|
+
], x.prototype, "onRetry", 2);
|
|
1557
|
+
x = v([
|
|
1558
|
+
V("xact-step-result"),
|
|
1559
|
+
q()
|
|
1560
|
+
], x);
|
|
1561
|
+
var We = Object.defineProperty, qe = Object.getOwnPropertyDescriptor, vt = (i, t, e, s) => {
|
|
1562
|
+
for (var o = s > 1 ? void 0 : s ? qe(t, e) : t, n = i.length - 1, r; n >= 0; n--)
|
|
1563
|
+
(r = i[n]) && (o = (s ? r(t, e, o) : r(o)) || o);
|
|
1564
|
+
return s && o && We(t, e, o), o;
|
|
1565
|
+
};
|
|
1566
|
+
let G = class extends C {
|
|
1567
|
+
constructor() {
|
|
1568
|
+
super(...arguments), this.height = 0;
|
|
1569
|
+
}
|
|
1570
|
+
render() {
|
|
1571
|
+
const i = Array.from({ length: 24 }, (t, e) => e);
|
|
1572
|
+
return g`
|
|
1573
|
+
<div class="component-content">
|
|
1574
|
+
<div class="header-section">
|
|
1575
|
+
<h2 class="header-text">${a("Before you begin")}</h2>
|
|
1576
|
+
<p class="description-text">
|
|
1577
|
+
${a("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.")}
|
|
1578
|
+
</p>
|
|
1579
|
+
</div>
|
|
1580
|
+
|
|
1581
|
+
<div class="main-section">
|
|
1582
|
+
<div class="tips-section">
|
|
1583
|
+
<h3>${a("Tips")}</h3>
|
|
1584
|
+
<div class="tip-item">
|
|
1585
|
+
<span class="tip-title">${a("Good Lighting")}</span>
|
|
1586
|
+
<p class="tip-text">${a("Choose a well-lit area where you can see your image clearly.")}</p>
|
|
1587
|
+
</div>
|
|
1588
|
+
<div class="tip-item">
|
|
1589
|
+
<span class="tip-title">${a("Clean Background")}</span>
|
|
1590
|
+
<p class="tip-text">${a("Position yourself against a plain background.")}</p>
|
|
1591
|
+
</div>
|
|
1592
|
+
<div class="tip-item">
|
|
1593
|
+
<span class="tip-title">${a("Clothes")}</span>
|
|
1594
|
+
<p class="tip-text">${a("Wear clothes that you usually wear on a daily basis.")}</p>
|
|
1595
|
+
</div>
|
|
1596
|
+
<div class="tip-item">
|
|
1597
|
+
<span class="tip-title">${a("Framing")}</span>
|
|
1598
|
+
<p class="tip-text">${a("Make sure your entire body is visible. The app will guide you.")}</p>
|
|
1599
|
+
</div>
|
|
1600
|
+
</div>
|
|
1601
|
+
|
|
1602
|
+
<div class="images-section">
|
|
1603
|
+
<svg width="300" height="245" viewBox="0 0 300 245" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1604
|
+
<path d="M103.795 43.2468H83.6797V83.4176H103.795V43.2468Z" fill="#6D4A44"/>
|
|
1605
|
+
<path d="M84.0172 73.7394C84.1558 71.4086 82.3782 69.4067 80.0475 69.2681C77.7167 69.1295 75.7148 70.907 75.5762 73.2378C75.571 73.3255 75.5736 73.4112 75.5736 73.4976L74.0056 100.576C73.8676 102.9 75.6394 104.895 77.963 105.034C80.2867 105.172 82.2822 103.4 82.4208 101.077L83.9888 73.9979C83.9991 73.9122 84.012 73.8271 84.0172 73.7394Z" fill="#F3A396"/>
|
|
1606
|
+
<mask id="mask0_2344_2604" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="73" y="69" width="12" height="37">
|
|
1607
|
+
<path d="M84.0172 73.7394C84.1558 71.4086 82.3782 69.4067 80.0475 69.2681C77.7167 69.1295 75.7148 70.907 75.5762 73.2378C75.571 73.3255 75.5736 73.4112 75.5736 73.4976L74.0056 100.576C73.8676 102.9 75.6394 104.895 77.963 105.034C80.2867 105.172 82.2822 103.4 82.4208 101.077L83.9888 73.9979C83.9991 73.9122 84.012 73.8271 84.0172 73.7394Z" fill="white"/>
|
|
1608
|
+
</mask>
|
|
1609
|
+
<g mask="url(#mask0_2344_2604)">
|
|
1610
|
+
<path d="M85.0033 82.1023C85.0033 82.1023 77.6629 81.4666 73.2812 75.7567C73.2812 75.7567 74.0885 66.6723 81.0285 68.0985C87.9692 69.5253 85.0033 82.1023 85.0033 82.1023Z" fill="#F7E6D5"/>
|
|
1611
|
+
</g>
|
|
1612
|
+
<path d="M82.4535 100.75C82.5921 98.4189 80.8145 96.417 78.4838 96.2783C76.153 96.1397 74.1511 97.9173 74.0125 100.248C74.0073 100.336 74.0099 100.421 74.0099 100.507L73.625 129.801L78.1563 129.415L82.4251 101.008C82.4354 100.922 82.4483 100.837 82.4535 100.75Z" fill="#F3A396"/>
|
|
1613
|
+
<path d="M76.6523 127.066C75.014 126.604 74.3815 127.323 73.8677 128.308L73.8715 128.309C73.8703 128.311 73.8683 128.313 73.867 128.316C70.9521 133.729 70.5247 136.648 69.8561 138.831C69.152 141.129 69.938 145.338 70.9083 145.256C71.8786 145.175 71.7768 143.337 71.5479 141.985C71.3184 140.632 72.5189 138.63 73.5737 136.82C74.6265 135.013 74.9895 135.692 74.9895 135.692L75.1307 137.582C75.183 138.281 75.7536 138.78 76.3532 138.619C76.8154 138.5 77.0611 138.064 77.103 137.588L78.1591 129.27C78.1578 129.269 78.4009 127.558 76.6523 127.066Z" fill="#F3A396"/>
|
|
1614
|
+
<path d="M103.478 73.7394C103.34 71.4086 105.117 69.4067 107.448 69.2681C109.779 69.1295 111.781 70.907 111.919 73.2378C111.924 73.3255 111.922 73.4112 111.922 73.4976L113.49 100.576C113.628 102.9 111.856 104.895 109.532 105.034C107.209 105.172 105.213 103.4 105.075 101.077L103.507 73.9979C103.496 73.9122 103.483 73.8271 103.478 73.7394Z" fill="#F3A396"/>
|
|
1615
|
+
<mask id="mask1_2344_2604" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="103" y="69" width="11" height="37">
|
|
1616
|
+
<path d="M103.478 73.7394C103.34 71.4086 105.117 69.4067 107.448 69.2681C109.779 69.1295 111.781 70.907 111.919 73.2378C111.924 73.3255 111.922 73.4112 111.922 73.4976L113.49 100.576C113.628 102.9 111.856 104.895 109.532 105.034C107.209 105.172 105.213 103.4 105.075 101.077L103.507 73.9979C103.496 73.9122 103.483 73.8271 103.478 73.7394Z" fill="white"/>
|
|
1617
|
+
</mask>
|
|
1618
|
+
<g mask="url(#mask1_2344_2604)">
|
|
1619
|
+
<path d="M102.491 82.1023C102.491 82.1023 109.832 81.4666 114.213 75.7567C114.213 75.7567 113.406 66.6723 106.466 68.0985C99.5253 69.5253 102.491 82.1023 102.491 82.1023Z" fill="#F7E6D5"/>
|
|
1620
|
+
</g>
|
|
1621
|
+
<path d="M105.041 100.75C104.902 98.4189 106.68 96.417 109.01 96.2783C111.341 96.1397 113.343 97.9173 113.482 100.248C113.487 100.336 113.484 100.421 113.484 100.507L113.87 129.801L109.339 129.415L105.07 101.008C105.059 100.922 105.046 100.837 105.041 100.75Z" fill="#F3A396"/>
|
|
1622
|
+
<path d="M117.64 138.831C116.971 136.648 116.543 133.73 113.629 128.316C113.628 128.313 113.626 128.311 113.624 128.309L113.628 128.308C113.114 127.323 112.481 126.605 110.843 127.065C109.095 127.558 109.338 129.269 109.338 129.269L110.394 137.588C110.436 138.063 110.681 138.499 111.144 138.618C111.743 138.779 112.314 138.28 112.366 137.581L112.507 135.692C112.507 135.692 112.87 135.013 113.923 136.819C114.979 138.63 116.178 140.632 115.949 141.984C115.719 143.336 115.618 145.174 116.588 145.256C117.558 145.338 118.344 141.129 117.64 138.831Z" fill="#F3A396"/>
|
|
1623
|
+
<path d="M93.695 63.7058C85.6086 63.7058 77.6621 69.8006 77.6621 69.8006L83.2933 86.1861C84.1901 88.796 84.3075 91.611 83.6312 94.2867L81.704 101.908H106.369L104.026 94.5272C103.194 91.8018 103.225 88.8863 104.115 86.1797L110.113 70.0456C110.113 70.0456 102.264 63.7058 93.695 63.7058Z" fill="#F7E6D5"/>
|
|
1624
|
+
<path d="M82.4609 66.8497C82.4609 66.8497 90.3449 77.5163 106.026 67.3687C106.026 67.3687 100.973 63.8884 93.6698 63.6112C88.5957 63.4177 82.4609 66.8497 82.4609 66.8497Z" fill="#F3A396"/>
|
|
1625
|
+
<path d="M81.637 81.361L79.5996 75.4338" stroke="#EFE3D8" stroke-width="0.691037" stroke-miterlimit="10"/>
|
|
1626
|
+
<path d="M105.92 81.3681L107.959 75.4338" stroke="#EFE3D8" stroke-width="0.691037" stroke-miterlimit="10"/>
|
|
1627
|
+
<path d="M106.37 101.908H94.2448H93.8309H81.7052C81.7052 101.908 76.9502 109.295 78.1572 122.421H93.8309H94.2448H109.919C110.742 108.21 106.37 101.908 106.37 101.908Z" fill="#242930"/>
|
|
1628
|
+
<path d="M85.6013 162.592C89.776 162.592 93.1596 159.208 93.1596 155.034V121.496C93.1596 117.321 89.7754 113.938 85.6013 113.938C81.4266 113.938 78.043 117.322 78.043 121.496V155.034C78.043 159.208 81.4272 162.592 85.6013 162.592Z" fill="#242930"/>
|
|
1629
|
+
<path d="M82.2109 195.761L82.797 205.152H89.69V195.761H82.2109Z" fill="#F3A396"/>
|
|
1630
|
+
<path d="M90.4305 204.206L90.5201 209.911H69.0508V209.744C69.0508 208.43 69.8064 207.234 70.9928 206.669L81.5124 202.472C81.8909 202.291 82.377 202.299 82.6652 202.603C84.025 204.038 85.5175 206.375 89.6678 203.839C89.9689 203.655 90.3634 203.86 90.4305 204.206Z" fill="#131321"/>
|
|
1631
|
+
<path d="M69.0522 211.408H90.5215V209.911H69.0522V211.408Z" fill="white"/>
|
|
1632
|
+
<path d="M85.6013 147.979C81.4266 147.979 78.043 151.364 78.043 155.538V198.406H93.1603V155.538C93.1596 151.364 89.776 147.979 85.6013 147.979Z" fill="#242930"/>
|
|
1633
|
+
<path d="M93.161 191.778H77.1816V198.406H93.161V191.778Z" fill="#21262D"/>
|
|
1634
|
+
<path d="M102.359 162.592C106.534 162.592 109.917 159.208 109.917 155.034V121.496C109.917 117.321 106.533 113.938 102.359 113.938C98.1844 113.938 94.8008 117.322 94.8008 121.496V155.034C94.8008 159.208 98.185 162.592 102.359 162.592Z" fill="#242930"/>
|
|
1635
|
+
<path d="M106.117 195.761L105.532 205.152H98.6387V195.761H106.117Z" fill="#F3A396"/>
|
|
1636
|
+
<path d="M97.8963 204.206L97.8066 209.911H119.276V209.744C119.276 208.43 118.52 207.234 117.334 206.669L106.814 202.472C106.436 202.291 105.95 202.299 105.662 202.603C104.302 204.038 102.809 206.375 98.659 203.839C98.3573 203.655 97.9633 203.86 97.8963 204.206Z" fill="#131321"/>
|
|
1637
|
+
<path d="M119.276 209.911H97.8066V211.408H119.276V209.911Z" fill="white"/>
|
|
1638
|
+
<path d="M102.359 147.979C98.1844 147.979 94.8008 151.364 94.8008 155.538V198.406H109.918V155.538C109.918 151.364 106.534 147.979 102.359 147.979Z" fill="#242930"/>
|
|
1639
|
+
<path d="M110.78 191.778H94.8008V198.406H110.78V191.778Z" fill="#21262D"/>
|
|
1640
|
+
<path d="M93.6712 68.1978C91.61 68.1978 89.9395 66.5272 89.9395 64.466V57.2249H97.403V64.4653C97.403 66.5266 95.7318 68.1978 93.6712 68.1978Z" fill="#F3A396"/>
|
|
1641
|
+
<path d="M89.3105 56.6987C89.3105 56.6987 90.9753 60.0333 93.2789 60.7071C93.8947 60.887 94.5517 60.8257 95.1455 60.5827C96.0127 60.2274 97.119 59.2519 97.4027 58.2957V56.1978C97.4027 56.1978 93.4936 59.7 89.3105 56.6987Z" fill="#1A1A1A"/>
|
|
1642
|
+
<path d="M93.7167 54.3835C99.2794 54.3835 103.789 49.7291 103.789 43.9876C103.789 38.2462 99.2794 33.5918 93.7167 33.5918C88.154 33.5918 83.6445 38.2462 83.6445 43.9876C83.6445 49.7291 88.154 54.3835 93.7167 54.3835Z" fill="#6D4A44"/>
|
|
1643
|
+
<path d="M101.531 52.6396C103.231 53.8949 106.172 48.185 104.515 46.8323C102.858 45.4803 101.949 47.9561 101.949 47.9561L101.515 49.6234L101.059 51.8968V52.4049L101.531 52.6396Z" fill="#F3A396"/>
|
|
1644
|
+
<path d="M103.98 48.553C103.98 48.553 102.748 48.1416 101.873 49.9566" stroke="#D26665" stroke-width="0.340231" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1645
|
+
<path d="M102.473 49.0688C102.473 49.0688 103.814 49.7858 102.928 50.8645" stroke="#D26665" stroke-width="0.340231" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1646
|
+
<path d="M102.139 44.0212C102.139 47.5989 101.641 50.6866 101.144 52.8774C100.657 55.0225 99.2885 56.5222 97.3542 57.7285L97.0022 57.9483C94.9552 59.2249 92.3104 59.2552 90.2324 58.0244C88.1363 56.7833 86.6689 55.1476 86.2169 52.8452C85.3955 48.6582 85.3059 44.0206 85.3059 44.0206C85.3059 44.0206 84.5245 34.989 93.6025 35.1644C102.68 35.3404 102.139 44.0212 102.139 44.0212Z" fill="#F3A396"/>
|
|
1647
|
+
<path d="M85.943 52.6394C84.2428 53.8947 81.3014 48.1849 82.9584 46.8322C84.6154 45.4802 85.6786 48.2197 85.6786 48.2197L85.9797 49.7129L86.3685 51.8831V52.4099L85.943 52.6394Z" fill="#F3A396"/>
|
|
1648
|
+
<path d="M83.4961 48.553C83.4961 48.553 84.7282 48.1416 85.6031 49.9566" stroke="#D26665" stroke-width="0.340231" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1649
|
+
<path d="M85.0059 49.0688C85.0059 49.0688 83.6648 49.7858 84.5507 50.8645" stroke="#D26665" stroke-width="0.340231" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1650
|
+
<path d="M92.9102 49.3293V50.3223C92.9102 50.4312 92.9314 50.5357 92.9695 50.6311C93.1197 51.007 93.5523 51.1869 93.943 51.0824L94.4098 50.8587" stroke="#D26665" stroke-width="0.340231" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1651
|
+
<path d="M90.3462 47.4126C90.3462 47.822 90.0142 48.1541 89.6047 48.1541C89.1953 48.1541 88.8633 47.822 88.8633 47.4126C88.8633 47.0032 89.1953 46.6711 89.6047 46.6711C90.0142 46.6711 90.3462 47.0032 90.3462 47.4126Z" fill="#1A1A1A"/>
|
|
1652
|
+
<path d="M97.9595 47.4126C97.9595 47.822 97.6274 48.1541 97.218 48.1541C96.8086 48.1541 96.4766 47.822 96.4766 47.4126C96.4766 47.0032 96.8086 46.6711 97.218 46.6711C97.6274 46.6711 97.9595 47.0032 97.9595 47.4126Z" fill="#1A1A1A"/>
|
|
1653
|
+
<path d="M90.6953 52.3042C90.6953 52.3042 91.9094 53.0631 93.5116 53.0631C95.1137 53.0631 96.3278 52.3042 96.3278 52.3042" stroke="#D26665" stroke-width="0.340231" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1654
|
+
<path d="M86.7891 46.0496C86.7891 46.0496 89.0824 45.3404 91.3545 45.2205C91.3545 45.2205 90.6427 43.9909 89.2165 44.3223C87.7903 44.6544 86.7891 46.0496 86.7891 46.0496Z" fill="#6D4A44"/>
|
|
1655
|
+
<path d="M99.999 46.0496C99.999 46.0496 97.7057 45.3404 95.4336 45.2205C95.4336 45.2205 96.1454 43.9909 97.5716 44.3223C98.9977 44.6544 99.999 46.0496 99.999 46.0496Z" fill="#6D4A44"/>
|
|
1656
|
+
<path d="M103.196 44.0323C103.196 44.0323 102.145 35.8131 95.0068 34.8589C95.0068 34.8589 89.3105 34.4275 87.3285 37.2296C86.4755 37.9117 85.2737 39.5449 84.8192 41.8118C84.1177 45.3108 85.0029 45.1574 85.0029 45.1574C85.0029 45.1574 87.8346 43.9917 88.2718 40.0923C89.9591 41.7899 94.8785 44.6016 103.196 44.0323Z" fill="#6D4A44"/>
|
|
1657
|
+
<path d="M213.641 83.3456L199.988 80.1219C199.988 80.1219 202.975 62.6873 199.988 44.3386L213.641 43.1748V83.3456Z" fill="#6D4A44"/>
|
|
1658
|
+
<path d="M220.402 43.5322C220.402 49.4045 215.832 54.1653 210.195 54.1653C204.558 54.1653 199.988 49.4052 199.988 43.5322C199.988 37.6599 204.558 33.665 210.195 33.665C215.833 33.665 220.402 37.6599 220.402 43.5322Z" fill="#6D4A44"/>
|
|
1659
|
+
<path d="M210.003 67.8558C207.897 67.7423 206.281 65.9435 206.394 63.8371L206.993 52.7075L214.62 53.1176L214.022 64.2471C213.908 66.3529 212.109 67.9686 210.003 67.8558Z" fill="#F3A396"/>
|
|
1660
|
+
<path d="M208.412 53.8455C208.412 53.8455 209.461 59.5276 214.165 61.5237L214.341 58.2542L208.412 53.8455Z" fill="#1A1A1A"/>
|
|
1661
|
+
<path d="M214.803 58.7907C210.856 58.7907 208.062 55.7649 208.062 52.0183V39.7488L214.66 39.1047C217.112 39.1047 220.401 42.4967 220.401 44.8249V53.2549C219.885 56.7727 217.671 58.7907 214.803 58.7907Z" fill="#F3A396"/>
|
|
1662
|
+
<path d="M219.529 46.7959L221.726 50.489C222.006 50.861 221.718 51.371 221.227 51.371L218.291 51.3691L219.529 46.7959Z" fill="#F3A396"/>
|
|
1663
|
+
<path d="M207.086 46.8377L208.117 49.5792L209.06 42.9802L205.666 43.1981L207.086 46.8377Z" fill="#6D4A44"/>
|
|
1664
|
+
<path d="M221.495 43.9596C221.495 43.9596 220.402 35.5824 212.8 33.9622C212.8 33.9622 210.891 34.3548 209.378 37.1569C208.727 37.839 207.809 39.4721 207.462 41.7391C206.926 45.2381 208.247 45.0846 208.247 45.0846C208.247 45.0846 211.386 43.9151 211.215 40.0195C212.504 41.7171 215.144 44.5289 221.495 43.9596Z" fill="#6D4A44"/>
|
|
1665
|
+
<path d="M208.266 51.8105C208.266 51.8105 207.312 55.5933 205.666 55.0697L206.336 52.4611L208.266 51.8105Z" fill="#6D4A44"/>
|
|
1666
|
+
<path d="M207.797 52.567C205.924 53.8223 202.685 48.1125 204.51 46.7598C206.335 45.4078 207.813 48.4406 207.813 48.4406L208.117 49.5793L208.266 51.8107V52.3375L207.797 52.567Z" fill="#F3A396"/>
|
|
1667
|
+
<path d="M205.195 48.4438C205.195 48.4438 206.427 48.0325 207.302 49.8474" stroke="#D26665" stroke-width="0.340231" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1668
|
+
<path d="M206.705 48.9597C206.705 48.9597 205.364 49.6767 206.25 50.7553" stroke="#D26665" stroke-width="0.340231" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1669
|
+
<path d="M219.264 47.3401C219.264 47.7495 218.932 48.0815 218.523 48.0815C218.113 48.0815 217.781 47.7495 217.781 47.3401C217.781 46.9307 218.113 46.5986 218.523 46.5986C218.932 46.5986 219.264 46.9307 219.264 47.3401Z" fill="#1A1A1A"/>
|
|
1670
|
+
<path d="M215.094 46.1221C215.094 46.1221 217.387 45.4129 219.659 45.293C219.659 45.293 218.947 44.0634 217.521 44.3948C216.095 44.7269 215.094 46.1221 215.094 46.1221Z" fill="#6D4A44"/>
|
|
1671
|
+
<path d="M217.76 52.8274C217.76 52.8274 218.935 53.2555 220.403 53.2555" stroke="#D26665" stroke-width="0.340231" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1672
|
+
<path d="M219.568 119.967C219.292 115.255 215.248 111.659 210.537 111.935C205.825 112.211 202.229 116.255 202.505 120.967C202.514 121.125 202.539 121.277 202.556 121.432C202.555 121.522 202.543 121.612 202.548 121.703L207.005 155.533C207.241 159.564 210.7 162.64 214.731 162.404C218.762 162.168 221.838 158.708 221.602 154.677L219.611 120.703C219.604 120.578 219.584 120.459 219.571 120.336C219.57 120.213 219.575 120.091 219.568 119.967Z" fill="#191A1B"/>
|
|
1673
|
+
<path d="M218.059 104.095H202.821C202.821 104.095 195.469 109.309 201.944 122.347H210.359H210.599H219.708C219.777 107.418 218.059 104.095 218.059 104.095Z" fill="#191A1B"/>
|
|
1674
|
+
<path d="M217.791 195.688L217.205 205.079H210.312V195.688H217.791Z" fill="#F3A396"/>
|
|
1675
|
+
<path d="M209.57 204.133L209.48 209.838H230.95V209.672C230.95 208.358 230.194 207.161 229.008 206.596L218.488 202.399C218.11 202.218 217.624 202.226 217.335 202.53C215.976 203.965 214.483 206.302 210.333 203.766C210.031 203.583 209.637 203.787 209.57 204.133Z" fill="#08080F"/>
|
|
1676
|
+
<path d="M230.95 209.838H209.48V211.335H230.95V209.838Z" fill="white"/>
|
|
1677
|
+
<path d="M214.309 147.906C210.271 147.906 206.998 151.18 206.998 155.218V198.333H221.621V155.218C221.621 151.18 218.347 147.906 214.309 147.906Z" fill="#191A1B"/>
|
|
1678
|
+
<path d="M222.455 191.705H206.998V198.333H222.455V191.705Z" fill="#151617"/>
|
|
1679
|
+
<path d="M218.356 120.438C218.356 115.718 214.529 111.892 209.81 111.892C205.09 111.892 201.264 115.718 201.264 120.438C201.264 120.596 201.279 120.75 201.288 120.906C201.282 120.996 201.264 121.084 201.264 121.175L203.733 155.208C203.733 159.246 207.006 162.519 211.044 162.519C215.082 162.519 218.356 159.246 218.356 155.208V121.175C218.356 121.051 218.344 120.93 218.337 120.806C218.342 120.683 218.356 120.562 218.356 120.438Z" fill="#242930"/>
|
|
1680
|
+
<path d="M218.059 104.095H202.821C202.821 104.095 195.469 109.309 201.944 122.347H210.359H210.599H218.358C218.836 108.137 218.059 104.095 218.059 104.095Z" fill="#242930"/>
|
|
1681
|
+
<path d="M214.526 195.688L213.94 205.079H207.047V195.688H214.526Z" fill="#F3A396"/>
|
|
1682
|
+
<path d="M206.306 204.133L206.217 209.838H227.686V209.672C227.686 208.358 226.931 207.161 225.744 206.596L215.225 202.399C214.846 202.218 214.36 202.226 214.072 202.53C212.712 203.965 211.219 206.302 207.069 203.766C206.768 203.583 206.373 203.787 206.306 204.133Z" fill="#131321"/>
|
|
1683
|
+
<path d="M227.686 209.838H206.217V211.335H227.686V209.838Z" fill="white"/>
|
|
1684
|
+
<path d="M211.044 147.906C207.006 147.906 203.732 151.18 203.732 155.218V198.333H218.355V155.218C218.355 151.18 215.082 147.906 211.044 147.906Z" fill="#242930"/>
|
|
1685
|
+
<path d="M219.19 191.705H203.732V198.333H219.19V191.705Z" fill="#21262D"/>
|
|
1686
|
+
<path d="M221.695 77.0834C221.633 73.9093 218.919 69.391 218.067 67.8372C218.042 67.7901 217.944 67.7585 217.81 67.7398C216.366 65.4355 213.81 63.8875 210.914 63.8875H209.253H209.09C202.446 63.8875 198.685 71.2182 199.532 79.3013C200.51 88.6282 202.818 104.095 202.818 104.095H218.056C218.056 104.095 218.633 94.3091 218.913 83.812C220.526 81.8558 221.742 79.5528 221.695 77.0834Z" fill="#F7E6D5"/>
|
|
1687
|
+
<path d="M203.973 65.6192C203.973 65.6192 209.088 63.8874 217.508 67.2774C217.508 67.2774 215.758 64.7094 212.139 63.2607C209.002 62.0047 207.134 63.888 207.134 63.888C207.134 63.888 205.543 64.4212 203.973 65.6192Z" fill="#F3A396"/>
|
|
1688
|
+
<path d="M213.047 100.436C213.083 98.1013 211.22 96.1794 208.885 96.1426C206.551 96.1065 204.629 97.9698 204.592 100.304C204.591 100.392 204.597 100.477 204.601 100.564L205.499 129.846L210.009 129.261L213.029 100.694C213.037 100.609 213.046 100.524 213.047 100.436Z" fill="#F3A396"/>
|
|
1689
|
+
<path d="M208.402 126.981C206.745 126.591 206.145 127.337 205.675 128.344L205.679 128.344C205.678 128.347 205.676 128.349 205.675 128.352C203 133.889 202.701 136.823 202.128 139.034C201.525 141.36 202.495 145.529 203.46 145.406C204.425 145.282 204.244 143.45 203.955 142.109C203.667 140.768 204.778 138.715 205.753 136.86C206.726 135.009 207.118 135.671 207.118 135.671L207.342 137.553C207.424 138.25 208.016 138.723 208.609 138.536C209.065 138.397 209.292 137.951 209.313 137.473L210.003 129.117C210.003 129.117 210.171 127.396 208.402 126.981Z" fill="#F3A396"/>
|
|
1690
|
+
<path d="M213.426 73.3832C213.462 71.0486 211.599 69.126 209.264 69.0899C206.93 69.0538 205.007 70.9171 204.971 73.2517C204.97 73.3394 204.976 73.4251 204.98 73.5109L204.6 100.632C204.564 102.96 206.422 104.876 208.749 104.912C211.077 104.948 212.993 103.09 213.029 100.763L213.409 73.6418C213.415 73.556 213.425 73.4709 213.426 73.3832Z" fill="#F3A396"/>
|
|
1691
|
+
<mask id="mask2_2344_2604" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="204" y="69" width="10" height="36">
|
|
1692
|
+
<path d="M213.426 73.3832C213.462 71.0486 211.599 69.126 209.264 69.0899C206.93 69.0538 205.007 70.9171 204.971 73.2517C204.97 73.3394 204.976 73.4251 204.98 73.5109L204.6 100.632C204.564 102.96 206.422 104.876 208.749 104.912C211.077 104.948 212.993 103.09 213.029 100.763L213.409 73.6418C213.415 73.556 213.425 73.4709 213.426 73.3832Z" fill="white"/>
|
|
1693
|
+
</mask>
|
|
1694
|
+
<g mask="url(#mask2_2344_2604)">
|
|
1695
|
+
<path d="M214.778 81.6952C214.778 81.6952 208.063 81.7893 202.885 78.3283C202.885 78.3283 203.197 66.7584 210.194 67.8789C217.19 68.9995 214.778 81.6952 214.778 81.6952Z" fill="#F7E6D5"/>
|
|
1696
|
+
</g>
|
|
1697
|
+
<path d="M213.299 81.5191L213.426 73.3831" stroke="#EFE3D8" stroke-width="0.691037" stroke-miterlimit="10"/>
|
|
1698
|
+
<path d="M204.719 79.4974L204.832 72.2576" stroke="#EFE3D8" stroke-width="0.691037" stroke-miterlimit="10"/>
|
|
1699
|
+
</svg>
|
|
1700
|
+
|
|
1701
|
+
|
|
1702
|
+
</div>
|
|
1703
|
+
|
|
1704
|
+
</div>
|
|
1705
|
+
<xact-button class="buttons"
|
|
1706
|
+
@click=${() => {
|
|
1707
|
+
var t;
|
|
1708
|
+
(t = this.onStep2advancement) == null || t.call(this);
|
|
1709
|
+
}}
|
|
1710
|
+
label="${a("To start")}"
|
|
1711
|
+
></xact-button>
|
|
1712
|
+
</div>
|
|
1713
|
+
<div class="snow-layer">
|
|
1714
|
+
${i.map((t) => {
|
|
1715
|
+
const e = t * 37 % 100, s = t % 6 * 0.35, o = t % 5 * 0.4;
|
|
1716
|
+
return g`<span
|
|
1717
|
+
class="snowflake"
|
|
1718
|
+
style="left:${e}%; animation-delay:${s}s, ${o}s;"
|
|
1719
|
+
></span>`;
|
|
1720
|
+
})}
|
|
1721
|
+
</div>
|
|
1722
|
+
`;
|
|
1723
|
+
}
|
|
1724
|
+
};
|
|
1725
|
+
G.styles = U`
|
|
1726
|
+
:host {
|
|
1727
|
+
display: flex;
|
|
1728
|
+
justify-content: center;
|
|
1729
|
+
align-items: flex-start;
|
|
1730
|
+
font-family: "Lato", sans-serif;
|
|
1731
|
+
box-sizing: border-box;
|
|
1732
|
+
padding: 16px;
|
|
1733
|
+
width: 100%;
|
|
1734
|
+
position: relative;
|
|
1735
|
+
overflow: hidden;
|
|
1736
|
+
}
|
|
1737
|
+
|
|
1738
|
+
.component-content {
|
|
1739
|
+
display: flex;
|
|
1740
|
+
flex-direction: column;
|
|
1741
|
+
gap: 12px;
|
|
1742
|
+
width: 100%;
|
|
1743
|
+
max-width: 960px;
|
|
1744
|
+
position: relative;
|
|
1745
|
+
z-index: 1;
|
|
1746
|
+
}
|
|
1747
|
+
|
|
1748
|
+
.header-section {
|
|
1749
|
+
text-align: left;
|
|
1750
|
+
}
|
|
1751
|
+
|
|
1752
|
+
.header-text {
|
|
1753
|
+
font-size: 24px;
|
|
1754
|
+
font-weight: 700;
|
|
1755
|
+
color: #000;
|
|
1756
|
+
margin-bottom: 8px;
|
|
1757
|
+
line-height: 1.2;
|
|
1758
|
+
}
|
|
1759
|
+
|
|
1760
|
+
.description-text {
|
|
1761
|
+
font-size: 16px;
|
|
1762
|
+
font-weight: 400;
|
|
1763
|
+
color: #333;
|
|
1764
|
+
line-height: 1.6;
|
|
1765
|
+
}
|
|
1766
|
+
|
|
1767
|
+
.main-section {
|
|
1768
|
+
display: flex;
|
|
1769
|
+
flex-direction: row;
|
|
1770
|
+
gap: 24px;
|
|
1771
|
+
}
|
|
1772
|
+
|
|
1773
|
+
.images-section {
|
|
1774
|
+
flex: 1;
|
|
1775
|
+
display: flex;
|
|
1776
|
+
justify-content: center;
|
|
1777
|
+
align-items: center;
|
|
1778
|
+
}
|
|
1779
|
+
|
|
1780
|
+
.images-section svg {
|
|
1781
|
+
width: 100%;
|
|
1782
|
+
max-width: 400px;
|
|
1783
|
+
height: auto;
|
|
1784
|
+
}
|
|
1785
|
+
|
|
1786
|
+
.tips-section {
|
|
1787
|
+
flex: 1;
|
|
1788
|
+
display: flex;
|
|
1789
|
+
flex-direction: column;
|
|
1790
|
+
gap: 8px;
|
|
1791
|
+
}
|
|
1792
|
+
|
|
1793
|
+
.tip-item {
|
|
1794
|
+
margin-bottom: 4px;
|
|
1795
|
+
}
|
|
1796
|
+
|
|
1797
|
+
.tip-title {
|
|
1798
|
+
font-weight: bold;
|
|
1799
|
+
display: inline-block;
|
|
1800
|
+
margin-bottom: 4px;
|
|
1801
|
+
font-size: 14px;
|
|
1802
|
+
}
|
|
1803
|
+
|
|
1804
|
+
.tip-text {
|
|
1805
|
+
margin-top: 0;
|
|
1806
|
+
font-size: 12px;
|
|
1807
|
+
}
|
|
1808
|
+
|
|
1809
|
+
.buttons {
|
|
1810
|
+
display: flex;
|
|
1811
|
+
flex-direction: column;
|
|
1812
|
+
gap: 12px;
|
|
1813
|
+
align-items: center;
|
|
1814
|
+
justify-content: center;
|
|
1815
|
+
width: 100%;
|
|
1816
|
+
max-width: 200px;
|
|
1817
|
+
margin: 0 auto;
|
|
1818
|
+
}
|
|
1819
|
+
|
|
1820
|
+
@media (max-width: 754px) {
|
|
1821
|
+
.main-section {
|
|
1822
|
+
flex-direction: column;
|
|
1823
|
+
gap: 8px;
|
|
1824
|
+
}
|
|
1825
|
+
|
|
1826
|
+
.images-section {
|
|
1827
|
+
order: -1;
|
|
1828
|
+
max-width: 100%;
|
|
1829
|
+
margin-bottom: 8px;
|
|
1830
|
+
}
|
|
1831
|
+
|
|
1832
|
+
.images-section svg {
|
|
1833
|
+
width: 80%;
|
|
1834
|
+
max-width: 250px;
|
|
1835
|
+
height: auto;
|
|
1836
|
+
margin-bottom: 8px;
|
|
1837
|
+
}
|
|
1838
|
+
|
|
1839
|
+
.tips-section {
|
|
1840
|
+
width: 100%;
|
|
1841
|
+
gap: 4px;
|
|
1842
|
+
}
|
|
1843
|
+
|
|
1844
|
+
.tip-title {
|
|
1845
|
+
font-size: 12px;
|
|
1846
|
+
margin-bottom: 2px;
|
|
1847
|
+
}
|
|
1848
|
+
|
|
1849
|
+
.tip-text {
|
|
1850
|
+
font-size: 10px;
|
|
1851
|
+
line-height: 1.3;
|
|
1852
|
+
}
|
|
1853
|
+
|
|
1854
|
+
.header-text {
|
|
1855
|
+
font-size: 20px;
|
|
1856
|
+
}
|
|
1857
|
+
|
|
1858
|
+
.description-text {
|
|
1859
|
+
font-size: 14px;
|
|
1860
|
+
line-height: 1.4;
|
|
1861
|
+
}
|
|
1862
|
+
|
|
1863
|
+
.buttons {
|
|
1864
|
+
gap: 8px;
|
|
1865
|
+
max-width: 180px;
|
|
1866
|
+
}
|
|
1867
|
+
}
|
|
1868
|
+
|
|
1869
|
+
.snow-layer {
|
|
1870
|
+
position: absolute;
|
|
1871
|
+
inset: 0;
|
|
1872
|
+
pointer-events: none;
|
|
1873
|
+
overflow: hidden;
|
|
1874
|
+
z-index: 2;
|
|
1875
|
+
}
|
|
1876
|
+
|
|
1877
|
+
.snowflake {
|
|
1878
|
+
position: absolute;
|
|
1879
|
+
top: -8%;
|
|
1880
|
+
width: 6px;
|
|
1881
|
+
height: 6px;
|
|
1882
|
+
background: #fff;
|
|
1883
|
+
border-radius: 50%;
|
|
1884
|
+
opacity: 0.85;
|
|
1885
|
+
animation: fall 8s linear infinite, drift 5s ease-in-out infinite;
|
|
1886
|
+
}
|
|
1887
|
+
|
|
1888
|
+
.snowflake:nth-child(odd) {
|
|
1889
|
+
width: 4px;
|
|
1890
|
+
height: 4px;
|
|
1891
|
+
opacity: 0.7;
|
|
1892
|
+
animation-duration: 9s, 6s;
|
|
1893
|
+
}
|
|
1894
|
+
|
|
1895
|
+
.snowflake:nth-child(3n) {
|
|
1896
|
+
width: 8px;
|
|
1897
|
+
height: 8px;
|
|
1898
|
+
opacity: 0.9;
|
|
1899
|
+
animation-duration: 7s, 4.5s;
|
|
1900
|
+
}
|
|
1901
|
+
|
|
1902
|
+
.snowflake:nth-child(4n) {
|
|
1903
|
+
animation-delay: 1s, 0.5s;
|
|
1904
|
+
}
|
|
1905
|
+
|
|
1906
|
+
@keyframes fall {
|
|
1907
|
+
from { transform: translateY(-10%); }
|
|
1908
|
+
to { transform: translateY(110%); }
|
|
1909
|
+
}
|
|
1910
|
+
|
|
1911
|
+
@keyframes drift {
|
|
1912
|
+
0%, 100% { transform: translateX(-14px); }
|
|
1913
|
+
50% { transform: translateX(22px); }
|
|
1914
|
+
}
|
|
1915
|
+
|
|
1916
|
+
`;
|
|
1917
|
+
vt([
|
|
1918
|
+
d({ type: Number })
|
|
1919
|
+
], G.prototype, "height", 2);
|
|
1920
|
+
vt([
|
|
1921
|
+
d({ type: Function })
|
|
1922
|
+
], G.prototype, "onStep2advancement", 2);
|
|
1923
|
+
G = vt([
|
|
1924
|
+
V("xact-step-informs"),
|
|
1925
|
+
q()
|
|
1926
|
+
], G);
|
|
1927
|
+
const Dt = "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", Ye = "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", Ke = "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", D = class D {
|
|
1928
|
+
constructor() {
|
|
1929
|
+
this.audioContext = null, this.playbackCtx = null, this.stream = null, this.processor = null, this.source = null, this.audioPlaybackQueue = [], this.isPlaying = !1, this.isUserSpeaking = !1, this.speechTimeout = null;
|
|
1930
|
+
}
|
|
1931
|
+
get isPlaybackActive() {
|
|
1932
|
+
return this.isPlaying || this.audioPlaybackQueue.length > 0;
|
|
1933
|
+
}
|
|
1934
|
+
async startMicrophone(t) {
|
|
1935
|
+
try {
|
|
1936
|
+
this.stream = await navigator.mediaDevices.getUserMedia({
|
|
1937
|
+
audio: { sampleRate: 16e3, channelCount: 1, echoCancellation: !0 }
|
|
1938
|
+
}), this.audioContext = new AudioContext({ sampleRate: 16e3 }), this.source = this.audioContext.createMediaStreamSource(this.stream), this.processor = this.audioContext.createScriptProcessor(4096, 1, 1), this.processor.onaudioprocess = (e) => {
|
|
1939
|
+
const s = e.inputBuffer.getChannelData(0);
|
|
1940
|
+
let o = 0;
|
|
1941
|
+
for (let l = 0; l < s.length; l++)
|
|
1942
|
+
o += s[l] * s[l];
|
|
1943
|
+
Math.sqrt(o / s.length) > D.SPEECH_THRESHOLD && (this.isUserSpeaking = !0, this.speechTimeout && clearTimeout(this.speechTimeout), this.speechTimeout = window.setTimeout(() => {
|
|
1944
|
+
this.isUserSpeaking = !1;
|
|
1945
|
+
}, D.SPEECH_HOLD_TIME));
|
|
1946
|
+
const r = this.float32ToInt16(s);
|
|
1947
|
+
t(r.buffer);
|
|
1948
|
+
}, this.source.connect(this.processor), this.processor.connect(this.audioContext.destination);
|
|
1949
|
+
} catch (e) {
|
|
1950
|
+
console.error("Microphone access denied or error:", e);
|
|
1951
|
+
}
|
|
1952
|
+
}
|
|
1953
|
+
float32ToInt16(t) {
|
|
1954
|
+
const e = new Int16Array(t.length);
|
|
1955
|
+
for (let s = 0; s < t.length; s++) {
|
|
1956
|
+
const o = Math.max(-1, Math.min(1, t[s]));
|
|
1957
|
+
e[s] = o < 0 ? o * 32768 : o * 32767;
|
|
1958
|
+
}
|
|
1959
|
+
return e;
|
|
1960
|
+
}
|
|
1961
|
+
initPlayback() {
|
|
1962
|
+
this.playbackCtx || (this.playbackCtx = new AudioContext({ sampleRate: 24e3 }));
|
|
1963
|
+
}
|
|
1964
|
+
queueAudio(t) {
|
|
1965
|
+
this.audioPlaybackQueue.push(t), this.playNextChunk();
|
|
1966
|
+
}
|
|
1967
|
+
playNextChunk() {
|
|
1968
|
+
if (this.isPlaying || this.audioPlaybackQueue.length === 0) return;
|
|
1969
|
+
this.initPlayback();
|
|
1970
|
+
const t = this.audioPlaybackQueue.shift();
|
|
1971
|
+
this.isPlaying = !0;
|
|
1972
|
+
const e = new Int16Array(t), s = new Float32Array(e.length);
|
|
1973
|
+
for (let r = 0; r < e.length; r++)
|
|
1974
|
+
s[r] = e[r] / 32767;
|
|
1975
|
+
const o = this.playbackCtx.createBuffer(1, s.length, 24e3);
|
|
1976
|
+
o.copyToChannel(s, 0);
|
|
1977
|
+
const n = this.playbackCtx.createBufferSource();
|
|
1978
|
+
n.buffer = o, n.connect(this.playbackCtx.destination), n.onended = () => {
|
|
1979
|
+
this.isPlaying = !1, this.audioPlaybackQueue.length === 0 && this.onQueueDrained && this.onQueueDrained(), this.playNextChunk();
|
|
1980
|
+
}, n.start();
|
|
1981
|
+
}
|
|
1982
|
+
clearPlaybackQueue() {
|
|
1983
|
+
this.audioPlaybackQueue = [];
|
|
1984
|
+
}
|
|
1985
|
+
stopAll() {
|
|
1986
|
+
this.clearPlaybackQueue(), this.processor && this.source && (this.processor.disconnect(), this.source.disconnect()), this.stream && (this.stream.getTracks().forEach((t) => t.stop()), this.stream = null), this.audioContext && (this.audioContext.close(), this.audioContext = null), this.playbackCtx && (this.playbackCtx.close(), this.playbackCtx = null);
|
|
1987
|
+
}
|
|
1988
|
+
};
|
|
1989
|
+
D.SPEECH_THRESHOLD = 0.02, D.SPEECH_HOLD_TIME = 1500;
|
|
1990
|
+
let mt = D;
|
|
1991
|
+
const st = class st {
|
|
1992
|
+
constructor(t, e, s = "en") {
|
|
1993
|
+
this.ws = null, this.introSent = !1, this.introComplete = !1, this.lastCvError = "", this.lastCvErrorTime = 0, this.measurementComplete = !1, this.isDisconnected = !1, this.apiUrl = t, this.apiKey = e, this.localeCode = s, this.audioManager = new mt();
|
|
1994
|
+
}
|
|
1995
|
+
async connect() {
|
|
1996
|
+
try {
|
|
1997
|
+
const t = await fetch(
|
|
1998
|
+
`${this.apiUrl}/api/ConversationalAI/ticket`,
|
|
1999
|
+
{
|
|
2000
|
+
method: "POST",
|
|
2001
|
+
headers: {
|
|
2002
|
+
"Content-Type": "application/json",
|
|
2003
|
+
"X-Api-Key": this.apiKey
|
|
2004
|
+
}
|
|
2005
|
+
}
|
|
2006
|
+
);
|
|
2007
|
+
if (this.isDisconnected) {
|
|
2008
|
+
console.log("AI session was disconnected before ticket response.");
|
|
2009
|
+
return;
|
|
2010
|
+
}
|
|
2011
|
+
if (!t.ok) {
|
|
2012
|
+
console.error("Failed to get ticket", t.statusText);
|
|
2013
|
+
return;
|
|
2014
|
+
}
|
|
2015
|
+
const e = await t.json();
|
|
2016
|
+
if (!e || !e.ticket_id) {
|
|
2017
|
+
console.error("Invalid ticket response");
|
|
2018
|
+
return;
|
|
2019
|
+
}
|
|
2020
|
+
if (this.isDisconnected) {
|
|
2021
|
+
console.log(
|
|
2022
|
+
"AI session was disconnected before websocket could be opened."
|
|
2023
|
+
);
|
|
2024
|
+
return;
|
|
2025
|
+
}
|
|
2026
|
+
const s = "wss://conversational-ai-service-923169850574.southamerica-east1.run.app", o = crypto.randomUUID(), n = `${s}/ws/chat/${o}/${e.ticket_id}`;
|
|
2027
|
+
this.ws = new WebSocket(n), this.ws.binaryType = "arraybuffer", this.ws.onopen = () => {
|
|
2028
|
+
console.log("AI session connected."), !this.introSent && this.ws && this.ws.readyState === WebSocket.OPEN && (this.introSent = !0, this.ws.send(
|
|
2029
|
+
JSON.stringify({
|
|
2030
|
+
cv_alert: `Measurement process started! The user speaks ${this.localeCode}.`
|
|
2031
|
+
})
|
|
2032
|
+
));
|
|
2033
|
+
}, this.ws.onmessage = (r) => {
|
|
2034
|
+
if (r.data instanceof ArrayBuffer) {
|
|
2035
|
+
this.audioManager.queueAudio(r.data);
|
|
2036
|
+
return;
|
|
2037
|
+
}
|
|
2038
|
+
try {
|
|
2039
|
+
const l = JSON.parse(r.data);
|
|
2040
|
+
switch (l.type) {
|
|
2041
|
+
case "user":
|
|
2042
|
+
break;
|
|
2043
|
+
case "gemini":
|
|
2044
|
+
break;
|
|
2045
|
+
case "interrupted":
|
|
2046
|
+
this.audioManager.clearPlaybackQueue();
|
|
2047
|
+
break;
|
|
2048
|
+
case "error":
|
|
2049
|
+
console.error("AI session error:", l.error);
|
|
2050
|
+
break;
|
|
2051
|
+
case "turn_complete":
|
|
2052
|
+
this.handleTurnComplete();
|
|
2053
|
+
break;
|
|
2054
|
+
}
|
|
2055
|
+
} catch (l) {
|
|
2056
|
+
console.error("Error parsing WS message:", l);
|
|
2057
|
+
}
|
|
2058
|
+
}, this.ws.onclose = (r) => {
|
|
2059
|
+
r.code === 4003 && console.error("Ticket was invalid or expired"), console.log("AI session disconnected.");
|
|
2060
|
+
}, this.ws.onerror = (r) => {
|
|
2061
|
+
console.error("AI Session WebSocket Error:", r);
|
|
2062
|
+
};
|
|
2063
|
+
} catch (t) {
|
|
2064
|
+
console.error("Failed to connect to AI session:", t);
|
|
2065
|
+
}
|
|
2066
|
+
}
|
|
2067
|
+
handleTurnComplete() {
|
|
2068
|
+
if (!this.introComplete) {
|
|
2069
|
+
this.audioManager.onQueueDrained = () => {
|
|
2070
|
+
this.audioManager.onQueueDrained = void 0, this.introComplete = !0, console.log("AI introduction audio finished. CV errors now enabled.");
|
|
2071
|
+
}, this.audioManager.isPlaybackActive || (this.audioManager.onQueueDrained = void 0, this.introComplete = !0, console.log(
|
|
2072
|
+
"AI introduction complete (no audio). CV errors now enabled."
|
|
2073
|
+
));
|
|
2074
|
+
return;
|
|
2075
|
+
}
|
|
2076
|
+
if (this.measurementComplete) {
|
|
2077
|
+
this.audioManager.onQueueDrained = () => {
|
|
2078
|
+
this.audioManager.onQueueDrained = void 0, console.log("AI goodbye audio finished. Disconnecting session."), this.onTurnComplete && this.onTurnComplete(), this.disconnect();
|
|
2079
|
+
}, this.audioManager.isPlaybackActive || (this.audioManager.onQueueDrained = void 0, console.log("AI goodbye complete (no audio). Disconnecting session."), this.onTurnComplete && this.onTurnComplete(), this.disconnect());
|
|
2080
|
+
return;
|
|
2081
|
+
}
|
|
2082
|
+
}
|
|
2083
|
+
startMicrophone() {
|
|
2084
|
+
this.measurementComplete || (this.audioManager.initPlayback(), this.audioManager.startMicrophone((t) => {
|
|
2085
|
+
this.ws && this.ws.readyState === WebSocket.OPEN && this.ws.send(t);
|
|
2086
|
+
}));
|
|
2087
|
+
}
|
|
2088
|
+
forwardCvError(t) {
|
|
2089
|
+
if (!this.introComplete || this.measurementComplete || this.audioManager.isUserSpeaking) return;
|
|
2090
|
+
const e = Date.now(), s = t === this.lastCvError, o = e - this.lastCvErrorTime < st.CV_ERROR_THROTTLE_MS;
|
|
2091
|
+
s && o || (this.lastCvError = t, this.lastCvErrorTime = e, this.ws && this.ws.readyState === WebSocket.OPEN && this.ws.send(JSON.stringify({ cv_alert: t })));
|
|
2092
|
+
}
|
|
2093
|
+
notifySuccess(t, e = "") {
|
|
2094
|
+
this.measurementComplete = !0, this.audioManager.clearPlaybackQueue(), console.log("Sending success message to AI session", t, e), this.ws && this.ws.readyState === WebSocket.OPEN && this.ws.send(
|
|
2095
|
+
JSON.stringify({
|
|
2096
|
+
cv_alert: `SYSTEM ALERT: Measurement is complete! Recommended size: ${t}. ${e ? `Extra context: ${e}. ` : ""}INSTRUCTION: Embody your persona! Enthusiastically reveal their size, offer a quick fashion compliment, and gracefully say goodbye.`
|
|
2097
|
+
})
|
|
2098
|
+
);
|
|
2099
|
+
}
|
|
2100
|
+
disconnect() {
|
|
2101
|
+
this.isDisconnected = !0, this.audioManager.stopAll(), this.ws && (this.ws.close(1e3, "Measurement complete"), this.ws = null);
|
|
2102
|
+
}
|
|
2103
|
+
};
|
|
2104
|
+
st.CV_ERROR_THROTTLE_MS = 6e3;
|
|
2105
|
+
let gt = st;
|
|
2106
|
+
var Qe = Object.defineProperty, Xe = Object.getOwnPropertyDescriptor, p = (i, t, e, s) => {
|
|
2107
|
+
for (var o = s > 1 ? void 0 : s ? Xe(t, e) : t, n = i.length - 1, r; n >= 0; n--)
|
|
2108
|
+
(r = i[n]) && (o = (s ? r(t, e, o) : r(o)) || o);
|
|
2109
|
+
return s && o && Qe(t, e, o), o;
|
|
2110
|
+
};
|
|
2111
|
+
const { getLocale: ii, setLocale: Ht } = Re({
|
|
2112
|
+
sourceLocale: qt,
|
|
2113
|
+
targetLocales: Ie,
|
|
2114
|
+
loadLocale: (i) => Yt(/* @__PURE__ */ Object.assign({ "./generated/locales/es-MX.ts": () => import("./es-MX-Bc0zxUr_.mjs"), "./generated/locales/pt-BR.ts": () => import("./pt-BR-m4YL1hub.mjs") }), `./generated/locales/${i}.ts`, 4)
|
|
2115
|
+
});
|
|
2116
|
+
let c = class extends C {
|
|
2117
|
+
constructor() {
|
|
2118
|
+
super(...arguments), this.spinnerFrame = 0, this.apiKey = "", this.tenantId = "1", this.productSku = "123456", this.baseUrl = "https://xactsize-dotnet-api-923169850574.southamerica-east1.run.app", this.apiUrl = this.baseUrl + "/api/measurer/measure/body", this.vtonUrl = this.baseUrl + "/api/VirtualTryOn/generate", this.garmentUrl = "", this.vton = !1, this.brandName = void 0, this.buttonText = "", 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 = a(
|
|
2119
|
+
"Position yourself in front of the camera"
|
|
2120
|
+
), this.shouldStartMeasurement = !1, this.isLoading = !1, this.isFetching = !1, this.generatedImageUrl = "", this.isVtonFetching = !1, this.vtonError = !1, this.videoElement = null, this.stream = null, this.poolingTimeout = null, this.instructionMessageTimeout = null, this.aiSession = null, this.cameras = [], this.currentCameraId = null, this.snowflakesCache = null;
|
|
2121
|
+
}
|
|
2122
|
+
firstUpdated() {
|
|
2123
|
+
this.startSpinnerAnimation();
|
|
2124
|
+
}
|
|
2125
|
+
startSpinnerAnimation() {
|
|
2126
|
+
const i = [Ke, Ye, Dt];
|
|
2127
|
+
this.spinnerInterval = setInterval(() => {
|
|
2128
|
+
var e;
|
|
2129
|
+
const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(
|
|
2130
|
+
".spinner"
|
|
2131
|
+
);
|
|
2132
|
+
t && (t.src = i[this.spinnerFrame], this.spinnerFrame = (this.spinnerFrame + 1) % i.length);
|
|
2133
|
+
}, 300);
|
|
2134
|
+
}
|
|
2135
|
+
get culture() {
|
|
2136
|
+
return this._culture;
|
|
2137
|
+
}
|
|
2138
|
+
set culture(i) {
|
|
2139
|
+
const t = this._culture;
|
|
2140
|
+
this._culture = i, this.requestUpdate("culture", t), this._applyLocale(i).catch(console.error);
|
|
2141
|
+
}
|
|
2142
|
+
async _applyLocale(i) {
|
|
2143
|
+
try {
|
|
2144
|
+
this._isLocaleLoading = !0, this.requestUpdate(), await Ht(i);
|
|
2145
|
+
} catch (t) {
|
|
2146
|
+
console.error("Failed to load locale", i, t), await Ht(qt);
|
|
2147
|
+
} finally {
|
|
2148
|
+
this._isLocaleLoading = !1, this.requestUpdate();
|
|
2149
|
+
}
|
|
2150
|
+
}
|
|
2151
|
+
get errorMap() {
|
|
2152
|
+
return {
|
|
2153
|
+
ERR_RIGHT_ARM_TOO_HIGH: a("Lower your right arm", {
|
|
2154
|
+
id: "ERR_RIGHT_ARM_TOO_HIGH"
|
|
2155
|
+
}),
|
|
2156
|
+
ERR_LEFT_ARM_TOO_HIGH: a("Lower your left arm", {
|
|
2157
|
+
id: "ERR_LEFT_ARM_TOO_HIGH"
|
|
2158
|
+
}),
|
|
2159
|
+
ERR_ARMS_NOT_RAISED: a("Raise both arms to a 45-degree angle", {
|
|
2160
|
+
id: "ERR_ARMS_NOT_RAISED"
|
|
2161
|
+
}),
|
|
2162
|
+
ERR_RIGHT_ARM_NOT_RAISED: a(
|
|
2163
|
+
"Raise your right arm to a 45-degree angle",
|
|
2164
|
+
{ id: "ERR_RIGHT_ARM_NOT_RAISED" }
|
|
2165
|
+
),
|
|
2166
|
+
ERR_LEFT_ARM_NOT_RAISED: a("Raise your left arm to a 45-degree angle", {
|
|
2167
|
+
id: "ERR_LEFT_ARM_NOT_RAISED"
|
|
2168
|
+
}),
|
|
2169
|
+
ERR_BODY_LANDMARKS_NOT_DETECTED: a(
|
|
2170
|
+
"Ensure your full body is visible in the camera",
|
|
2171
|
+
{ id: "ERR_BODY_LANDMARKS_NOT_DETECTED" }
|
|
2172
|
+
),
|
|
2173
|
+
ERR_HIPS_NOT_VISIBLE: a("Adjust your position to show your hips", {
|
|
2174
|
+
id: "ERR_HIPS_NOT_VISIBLE"
|
|
2175
|
+
}),
|
|
2176
|
+
ERR_TOO_CLOSE_TO_CAMERA: a("Step back from the camera", {
|
|
2177
|
+
id: "ERR_TOO_CLOSE_TO_CAMERA"
|
|
2178
|
+
}),
|
|
2179
|
+
ERR_NOT_SIDE_VIEW: a("Turn to show your side profile", {
|
|
2180
|
+
id: "ERR_NOT_SIDE_VIEW"
|
|
2181
|
+
}),
|
|
2182
|
+
ERR_INVALID_CLOTHING_TYPE: a(
|
|
2183
|
+
"This clothing type is not supported; please contact support",
|
|
2184
|
+
{ id: "ERR_INVALID_CLOTHING_TYPE" }
|
|
2185
|
+
),
|
|
2186
|
+
ERR_UPPER_BODY_NOT_VISIBLE: a(
|
|
2187
|
+
"Adjust your position to show your upper body",
|
|
2188
|
+
{ id: "ERR_UPPER_BODY_NOT_VISIBLE" }
|
|
2189
|
+
),
|
|
2190
|
+
ERR_HEAD_TOO_CLOSE_TO_EDGE: a(
|
|
2191
|
+
"Move your head away from the edge of the frame",
|
|
2192
|
+
{ id: "ERR_HEAD_TOO_CLOSE_TO_EDGE" }
|
|
2193
|
+
),
|
|
2194
|
+
ERR_LOWER_BODY_NOT_VISIBLE: a(
|
|
2195
|
+
"Adjust your position to show your lower body",
|
|
2196
|
+
{ id: "ERR_LOWER_BODY_NOT_VISIBLE" }
|
|
2197
|
+
),
|
|
2198
|
+
ERR_FEET_TOO_CLOSE_TO_EDGE: a(
|
|
2199
|
+
"Move your feet away from the edge of the frame",
|
|
2200
|
+
{ id: "ERR_FEET_TOO_CLOSE_TO_EDGE" }
|
|
2201
|
+
),
|
|
2202
|
+
ERR_BODY_TOO_CLOSE_TO_EDGE: a(
|
|
2203
|
+
"Move your body away from the edge of the frame",
|
|
2204
|
+
{ id: "ERR_BODY_TOO_CLOSE_TO_EDGE" }
|
|
2205
|
+
),
|
|
2206
|
+
ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_LEFT: a(
|
|
2207
|
+
"Move to the left to center your body",
|
|
2208
|
+
{ id: "ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_LEFT" }
|
|
2209
|
+
),
|
|
2210
|
+
ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_RIGHT: a(
|
|
2211
|
+
"Move to the right to center your body",
|
|
2212
|
+
{ id: "ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_RIGHT" }
|
|
2213
|
+
),
|
|
2214
|
+
ERR_SHOULDERS_NOT_VISIBLE: a(
|
|
2215
|
+
"Adjust your position to show your shoulders",
|
|
2216
|
+
{ id: "ERR_SHOULDERS_NOT_VISIBLE" }
|
|
2217
|
+
),
|
|
2218
|
+
ERR_HEIGHT_MEASUREMENT_FAILED: a(
|
|
2219
|
+
"Stand straight and ensure your full body is visible",
|
|
2220
|
+
{ id: "ERR_HEIGHT_MEASUREMENT_FAILED" }
|
|
2221
|
+
),
|
|
2222
|
+
ERR_HEAD_POINT_NOT_DETECTED: a(
|
|
2223
|
+
"Ensure your head is fully visible in the frame",
|
|
2224
|
+
{ id: "ERR_HEAD_POINT_NOT_DETECTED" }
|
|
2225
|
+
),
|
|
2226
|
+
ERR_INCORRECT_POSTURE: a("Stand straight with your shoulders back", {
|
|
2227
|
+
id: "ERR_INCORRECT_POSTURE"
|
|
2228
|
+
}),
|
|
2229
|
+
ERR_HEM_MEASUREMENT_FAILED: a(
|
|
2230
|
+
"Ensure your clothing hem is visible and clear",
|
|
2231
|
+
{ id: "ERR_HEM_MEASUREMENT_FAILED" }
|
|
2232
|
+
),
|
|
2233
|
+
ERR_SHOULDER_MEASUREMENT_FAILED: a(
|
|
2234
|
+
"Keep your shoulders relaxed and visible",
|
|
2235
|
+
{ id: "ERR_SHOULDER_MEASUREMENT_FAILED" }
|
|
2236
|
+
),
|
|
2237
|
+
ERR_ARM_NOT_STRETCHED: a("Stretch your arms fully", {
|
|
2238
|
+
id: "ERR_ARM_NOT_STRETCHED"
|
|
2239
|
+
}),
|
|
2240
|
+
ERR_LEGS_NOT_DETECTED: a(
|
|
2241
|
+
"Ensure your legs are fully visible in the frame",
|
|
2242
|
+
{ id: "ERR_LEGS_NOT_DETECTED" }
|
|
2243
|
+
),
|
|
2244
|
+
ERR_HIPS_MEASUREMENT_FAILED: a(
|
|
2245
|
+
"Stand straight and ensure your hips are visible",
|
|
2246
|
+
{ id: "ERR_HIPS_MEASUREMENT_FAILED" }
|
|
2247
|
+
),
|
|
2248
|
+
ERR_WAIST_MEASUREMENT_FAILED: a(
|
|
2249
|
+
"Stand straight and ensure your waist is visible",
|
|
2250
|
+
{ id: "ERR_WAIST_MEASUREMENT_FAILED" }
|
|
2251
|
+
),
|
|
2252
|
+
ERR_INVALID_MEASURE_SIDE_VIEW: a("Turn to show a clear side profile", {
|
|
2253
|
+
id: "ERR_INVALID_MEASURE_SIDE_VIEW"
|
|
2254
|
+
}),
|
|
2255
|
+
ERR_INVALID_BODY_HEIGHT_TYPE: a(
|
|
2256
|
+
"Ensure your full body is visible for height measurement",
|
|
2257
|
+
{ id: "ERR_INVALID_BODY_HEIGHT_TYPE" }
|
|
2258
|
+
),
|
|
2259
|
+
ERR_IMAGE_LOAD_FAILED: a(
|
|
2260
|
+
"Try again later; the image could not be processed",
|
|
2261
|
+
{ id: "ERR_IMAGE_LOAD_FAILED" }
|
|
2262
|
+
),
|
|
2263
|
+
ERR_HEIGHT_INVALID: a("Height must be between 50 and 300 cm", {
|
|
2264
|
+
id: "ERR_HEIGHT_INVALID"
|
|
2265
|
+
})
|
|
2266
|
+
};
|
|
2267
|
+
}
|
|
2268
|
+
getTranslatedMessage(i) {
|
|
2269
|
+
const t = this.errorMap[i];
|
|
2270
|
+
return t || (console.info("Error code is missing", i), a("An unexpected error occurred"));
|
|
2271
|
+
}
|
|
2272
|
+
connectedCallback() {
|
|
2273
|
+
super.connectedCallback(), console.log("New code loaded Jan 27 11:57am"), document.addEventListener("keydown", this.handleEscKey.bind(this)), this.snowflakesCache = this.generateSnowflakes();
|
|
2274
|
+
}
|
|
2275
|
+
disconnectedCallback() {
|
|
2276
|
+
var i;
|
|
2277
|
+
super.disconnectedCallback(), document.removeEventListener("keydown", this.handleEscKey.bind(this)), this.stopPolling(), clearInterval(this.spinnerInterval), (i = this.aiSession) == null || i.disconnect();
|
|
2278
|
+
}
|
|
2279
|
+
handleEscKey(i) {
|
|
2280
|
+
i.key === "Escape" && this.showModal && this.closeModal();
|
|
2281
|
+
}
|
|
2282
|
+
openModal() {
|
|
2283
|
+
this.showModal = !0, this.step = 1, this.height = 0, this.instructionMessage = a("Position yourself in front of the camera");
|
|
2284
|
+
}
|
|
2285
|
+
closeModal() {
|
|
2286
|
+
var i;
|
|
2287
|
+
this.showModal = !1, this.onMeasurementCanceled && typeof this.onMeasurementCanceled == "function" && this.onMeasurementCanceled(), this.stopPolling(), (i = this.aiSession) == null || i.disconnect(), this.dispatchEvent(new CustomEvent("measurementCanceled", { detail: {} }));
|
|
2288
|
+
}
|
|
2289
|
+
async step2advancement() {
|
|
2290
|
+
if (this.height < 50 || this.height > 300) {
|
|
2291
|
+
this.errorMessage = this.getTranslatedMessage("ERR_HEIGHT_INVALID");
|
|
2292
|
+
return;
|
|
2293
|
+
}
|
|
2294
|
+
this.step = 3, this.errorMessage = "";
|
|
2295
|
+
}
|
|
2296
|
+
async startMeasurement() {
|
|
2297
|
+
this.step = 3, this.errorMessage = "", this.shouldStartMeasurement = !0;
|
|
2298
|
+
}
|
|
2299
|
+
updated(i) {
|
|
2300
|
+
super.updated(i), i.has("step") && this.step === 3 && this.shouldStartMeasurement && (this.initializeMeasurement(), this.shouldStartMeasurement = !1);
|
|
2301
|
+
}
|
|
2302
|
+
async initializeMeasurement() {
|
|
2303
|
+
if (!this.apiKey)
|
|
2304
|
+
throw new Error("API key is required");
|
|
2305
|
+
if (!this.tenantId)
|
|
2306
|
+
throw new Error("Tenant ID is required");
|
|
2307
|
+
if (!this.productSku)
|
|
2308
|
+
throw new Error("Product SKU is required");
|
|
2309
|
+
if (!this.baseUrl)
|
|
2310
|
+
throw new Error("Base URL is required");
|
|
2311
|
+
if (!this.apiUrl)
|
|
2312
|
+
throw new Error("API URL is required");
|
|
2313
|
+
if (!this.vtonUrl)
|
|
2314
|
+
throw new Error("VTON URL is required");
|
|
2315
|
+
this.videoElement = this.shadowRoot.querySelector("video");
|
|
2316
|
+
try {
|
|
2317
|
+
this.stream = await navigator.mediaDevices.getUserMedia({ video: !0 }), this.videoElement && (this.videoElement.srcObject = this.stream, await this.videoElement.play(), await this.loadCameras(), this.aiSession = new gt(this.baseUrl, this.apiKey, this.culture), await this.aiSession.connect(), this.aiSession.startMicrophone(), this.startPolling());
|
|
2318
|
+
} catch {
|
|
2319
|
+
this.errorMessage = a("Error accessing webcam");
|
|
2320
|
+
}
|
|
2321
|
+
}
|
|
2322
|
+
async loadCameras() {
|
|
2323
|
+
try {
|
|
2324
|
+
const i = await navigator.mediaDevices.enumerateDevices();
|
|
2325
|
+
this.cameras = i.filter((t) => t.kind === "videoinput"), this.cameras.length > 0 && (this.currentCameraId = this.cameras[0].deviceId);
|
|
2326
|
+
} catch (i) {
|
|
2327
|
+
console.error("Error enumerating devices:", i);
|
|
2328
|
+
}
|
|
2329
|
+
}
|
|
2330
|
+
async flipCamera() {
|
|
2331
|
+
if (this.cameras.length < 2) return;
|
|
2332
|
+
this.isLoading = !0, this.stopPolling();
|
|
2333
|
+
const t = (this.cameras.findIndex(
|
|
2334
|
+
(e) => e.deviceId === this.currentCameraId
|
|
2335
|
+
) + 1) % this.cameras.length;
|
|
2336
|
+
this.currentCameraId = this.cameras[t].deviceId;
|
|
2337
|
+
try {
|
|
2338
|
+
this.stream && this.stream.getTracks().forEach((e) => e.stop()), this.stream = await navigator.mediaDevices.getUserMedia({
|
|
2339
|
+
video: { deviceId: { exact: this.currentCameraId } }
|
|
2340
|
+
}), this.videoElement && (this.videoElement.srcObject = this.stream, await this.videoElement.play(), this.startPolling());
|
|
2341
|
+
} catch {
|
|
2342
|
+
this.errorMessage = a("Error switching camera");
|
|
2343
|
+
} finally {
|
|
2344
|
+
this.isLoading = !1;
|
|
2345
|
+
}
|
|
2346
|
+
}
|
|
2347
|
+
async startPolling() {
|
|
2348
|
+
const t = [], e = async () => {
|
|
2349
|
+
var h;
|
|
2350
|
+
if (!this.videoElement || !this.stream || this.isFetching) return;
|
|
2351
|
+
const s = document.createElement("canvas");
|
|
2352
|
+
s.width = this.videoElement.videoWidth, s.height = this.videoElement.videoHeight;
|
|
2353
|
+
const o = s.getContext("2d");
|
|
2354
|
+
o == null || o.drawImage(this.videoElement, 0, 0, s.width, s.height);
|
|
2355
|
+
const n = await new Promise(
|
|
2356
|
+
(u) => s.toBlob((f) => u(f), "image/jpeg")
|
|
2357
|
+
), r = new File([n], "frame.jpg", { type: "image/jpeg" }), l = new FormData();
|
|
2358
|
+
l.append("image", r), l.append("height", this.height.toString()), l.append("productSku", this.productSku), this.measurerKey && l.append("measurerKey", this.measurerKey);
|
|
2359
|
+
try {
|
|
2360
|
+
this.isFetching = !0, this.isLoading = !0, this.poolingTimeout && clearTimeout(this.poolingTimeout), this.instructionMessageTimeout && clearTimeout(this.instructionMessageTimeout);
|
|
2361
|
+
const f = await (await fetch(this.apiUrl, {
|
|
2362
|
+
method: "POST",
|
|
2363
|
+
body: l,
|
|
2364
|
+
headers: {
|
|
2365
|
+
Accept: "application/json",
|
|
2366
|
+
"Cache-Control": "no-store",
|
|
2367
|
+
Pragma: "no-cache",
|
|
2368
|
+
"X-Api-Key": this.apiKey
|
|
2369
|
+
}
|
|
2370
|
+
})).json();
|
|
2371
|
+
if (this.isFetching = !1, this.isLoading = !1, f.success && f.chosenSize) {
|
|
2372
|
+
this.generateVtonImage(r), t.push(f);
|
|
2373
|
+
const m = t.length;
|
|
2374
|
+
this.instructionMessage = a(
|
|
2375
|
+
_e`Scanning... ${m}/${3}`
|
|
2376
|
+
), m >= 3 ? (this.processFinalResults(t), this.stopPolling(), this.step = 4) : this.poolingTimeout = setTimeout(e, 500);
|
|
2377
|
+
} else
|
|
2378
|
+
this.instructionMessage = this.getTranslatedMessage(
|
|
2379
|
+
f.message || "UNKNOWN_ERROR"
|
|
2380
|
+
), f.message && ((h = this.aiSession) == null || h.forwardCvError(this.instructionMessage)), this.instructionMessageTimeout = setTimeout(() => {
|
|
2381
|
+
t.length < 3 && (this.poolingTimeout = setTimeout(e, 0));
|
|
2382
|
+
}, 2e3);
|
|
2383
|
+
} catch {
|
|
2384
|
+
this.isFetching = !1, this.isLoading = !1, this.instructionMessage = a("Error processing measurement"), this.instructionMessageTimeout = setTimeout(() => {
|
|
2385
|
+
this.poolingTimeout = setTimeout(e, 0);
|
|
2386
|
+
}, 2e3);
|
|
2387
|
+
}
|
|
2388
|
+
};
|
|
2389
|
+
e();
|
|
2390
|
+
}
|
|
2391
|
+
async generateVtonImage(i) {
|
|
2392
|
+
if (!this.vton || !this.garmentUrl || this.isVtonFetching || this.generatedImageUrl)
|
|
2393
|
+
return;
|
|
2394
|
+
this.isVtonFetching = !0, this.vtonError = !1;
|
|
2395
|
+
const t = new FormData();
|
|
2396
|
+
t.append("PersonImage", i), t.append("GarmentUrl", this.garmentUrl);
|
|
2397
|
+
try {
|
|
2398
|
+
const s = await (await fetch(this.vtonUrl, {
|
|
2399
|
+
method: "POST",
|
|
2400
|
+
body: t,
|
|
2401
|
+
headers: {
|
|
2402
|
+
Accept: "application/json",
|
|
2403
|
+
"X-Api-Key": this.apiKey
|
|
2404
|
+
}
|
|
2405
|
+
})).json();
|
|
2406
|
+
s.result_urls && s.result_urls.length > 0 ? (this.generatedImageUrl = s.result_urls[0], this.isVtonFetching = !1) : (this.vtonError = !0, this.isVtonFetching = !1);
|
|
2407
|
+
} catch (e) {
|
|
2408
|
+
console.error("Error generating VTON image", e), this.vtonError = !0, this.isVtonFetching = !1;
|
|
2409
|
+
}
|
|
2410
|
+
}
|
|
2411
|
+
// New helper to average measurements and vote on size
|
|
2412
|
+
processFinalResults(i) {
|
|
2413
|
+
console.group("Scan Debug Report"), console.log(`✅ Collected ${i.length} successful scans.`), i.forEach((r, l) => {
|
|
2414
|
+
console.log(
|
|
2415
|
+
`Scan #${l + 1}: Size [${r.chosenSize}] | Chest: ${r.measurements.chest} | Waist: ${r.measurements.waist}`
|
|
2416
|
+
);
|
|
2417
|
+
});
|
|
2418
|
+
const t = {};
|
|
2419
|
+
Object.keys(i[0].measurements || {}).forEach((r) => {
|
|
2420
|
+
let l = 0, h = 0;
|
|
2421
|
+
i.forEach((u) => {
|
|
2422
|
+
const f = u.measurements[r];
|
|
2423
|
+
typeof f == "number" && (l += f, h++);
|
|
2424
|
+
}), t[r] = h > 0 ? Math.round(l / h * 100) / 100 : 0;
|
|
2425
|
+
}), console.log("📏 Final Averaged Measurements:", t);
|
|
2426
|
+
const s = {};
|
|
2427
|
+
i.forEach((r) => {
|
|
2428
|
+
const l = r.chosenSize;
|
|
2429
|
+
l && (s[l] = (s[l] || 0) + 1);
|
|
2430
|
+
}), console.log("🗳️ Voting Results:", s);
|
|
2431
|
+
let o = "", n = 0;
|
|
2432
|
+
for (const [r, l] of Object.entries(s))
|
|
2433
|
+
l > n && (n = l, o = r);
|
|
2434
|
+
if (console.log(`🏆 WINNER: ${o}`), console.groupEnd(), this.measurements = t, this.recommendedSize = o, this.instructionMessage = a("Measurement successful!"), this.aiSession) {
|
|
2435
|
+
this.aiSession.onTurnComplete = () => {
|
|
2436
|
+
this.aiSession = null;
|
|
2437
|
+
};
|
|
2438
|
+
let r = "";
|
|
2439
|
+
this.vton && (this.isVtonFetching ? r = "An image of the user wearing the garment is currently being generated. TELL USER THEIR IMAGE IS GENERATING." : this.generatedImageUrl && (r = "The image has successfully generated. TELL USER: 'Here is your image in the garment'.")), this.aiSession.notifySuccess(o, r);
|
|
2440
|
+
}
|
|
2441
|
+
}
|
|
2442
|
+
stopPolling() {
|
|
2443
|
+
this.poolingTimeout !== null && (clearTimeout(this.poolingTimeout), this.poolingTimeout = null), this.instructionMessageTimeout !== null && (clearTimeout(this.instructionMessageTimeout), this.instructionMessageTimeout = null), this.stream && (this.stream.getTracks().forEach((i) => i.stop()), this.stream = null);
|
|
2444
|
+
}
|
|
2445
|
+
acceptMeasurement() {
|
|
2446
|
+
var i;
|
|
2447
|
+
this.dispatchEvent(
|
|
2448
|
+
new CustomEvent("measurementAccepted", {
|
|
2449
|
+
detail: { size: this.recommendedSize }
|
|
2450
|
+
})
|
|
2451
|
+
), this.onMeasurementAccepted && typeof this.onMeasurementAccepted == "function" && this.onMeasurementAccepted(), this.showModal = !1, this.stopPolling(), (i = this.aiSession) == null || i.disconnect(), this.aiSession = null;
|
|
2452
|
+
}
|
|
2453
|
+
resetMeasurement() {
|
|
2454
|
+
var i;
|
|
2455
|
+
this.step = 1, this.height = 0, this.recommendedSize = "", this.measurements = {}, this.generatedImageUrl = "", this.isVtonFetching = !1, this.vtonError = !1, this.stopPolling(), (i = this.aiSession) == null || i.disconnect(), this.aiSession = null;
|
|
2456
|
+
}
|
|
2457
|
+
stopMeasurement() {
|
|
2458
|
+
this.resetMeasurement(), this.showModal = !1;
|
|
2459
|
+
}
|
|
2460
|
+
generateSnowflakes() {
|
|
2461
|
+
const i = [];
|
|
2462
|
+
for (let e = 0; e < 80; e++) {
|
|
2463
|
+
const s = Math.random() * 100, o = 8 + Math.random() * 17, n = -Math.random() * 30;
|
|
2464
|
+
i.push(
|
|
2465
|
+
g`<span
|
|
2466
|
+
class="snowflake"
|
|
2467
|
+
style="left:${s}%; animation-duration:${o.toFixed(
|
|
2468
|
+
2
|
|
2469
|
+
)}s; animation-delay:${n.toFixed(2)}s;"
|
|
2470
|
+
></span>`
|
|
2471
|
+
);
|
|
2472
|
+
}
|
|
2473
|
+
return g`${i}`;
|
|
2474
|
+
}
|
|
2475
|
+
renderSnowflakes() {
|
|
2476
|
+
return this.snowflakesCache || g``;
|
|
2477
|
+
}
|
|
2478
|
+
render() {
|
|
2479
|
+
return this._isLocaleLoading ? g`<div hidden></div>` : g`
|
|
2480
|
+
<xact-button
|
|
2481
|
+
class="launch-btn"
|
|
2482
|
+
style="--brand-primary: #000; --text-inverse: #fff; --brand-primary-hover: #111;"
|
|
2483
|
+
@click=${this.openModal}
|
|
2484
|
+
label="${this.buttonText || a("Find My Size")}"
|
|
2485
|
+
></xact-button>
|
|
2486
|
+
|
|
2487
|
+
${this.showModal ? g`
|
|
2488
|
+
<div class="modal">
|
|
2489
|
+
<div class="modal-content">
|
|
2490
|
+
<div
|
|
2491
|
+
style="display: flex; justify-content: space-between"
|
|
2492
|
+
class="modal-title-container"
|
|
2493
|
+
>
|
|
2494
|
+
<span
|
|
2495
|
+
class="close-btn"
|
|
2496
|
+
@click=${this.closeModal}
|
|
2497
|
+
tabindex="0"
|
|
2498
|
+
>
|
|
2499
|
+
<svg
|
|
2500
|
+
width="17"
|
|
2501
|
+
height="17"
|
|
2502
|
+
viewBox="0 0 17 17"
|
|
2503
|
+
fill="none"
|
|
2504
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2505
|
+
>
|
|
2506
|
+
<path
|
|
2507
|
+
d="M9.06066 8.35355L16.7071 0.707107L16 0L8.35355 7.64645L0.707108 0L0 0.707107L7.64645 8.35355L0 16L0.707107 16.7071L8.35355 9.06066L16 16.7071L16.7071 16L9.06066 8.35355Z"
|
|
2508
|
+
fill="black"
|
|
2509
|
+
/>
|
|
2510
|
+
</svg>
|
|
2511
|
+
</span>
|
|
2512
|
+
</div>
|
|
2513
|
+
|
|
2514
|
+
${this.step === 1 ? g`
|
|
2515
|
+
<xact-step-one
|
|
2516
|
+
.brandName=${this.brandName}
|
|
2517
|
+
.onStartMeasurement=${(i) => {
|
|
2518
|
+
this.height = i, this.startMeasurement();
|
|
2519
|
+
}}
|
|
2520
|
+
></xact-step-one>
|
|
2521
|
+
` : ""}
|
|
2522
|
+
${this.step === 2 ? g`
|
|
2523
|
+
<xact-step-informs
|
|
2524
|
+
.onStep2advancement=${() => {
|
|
2525
|
+
this.step2advancement();
|
|
2526
|
+
}}
|
|
2527
|
+
></xact-step-informs>
|
|
2528
|
+
` : ""}
|
|
2529
|
+
${this.step === 3 ? g`
|
|
2530
|
+
<div class="step-3">
|
|
2531
|
+
<p>
|
|
2532
|
+
${a(
|
|
2533
|
+
"Ensure your full body is visible in the camera"
|
|
2534
|
+
)}
|
|
2535
|
+
</p>
|
|
2536
|
+
<div class="video-container">
|
|
2537
|
+
<div class="video-overlay">
|
|
2538
|
+
<h2>${this.instructionMessage}</h2>
|
|
2539
|
+
</div>
|
|
2540
|
+
<div class="video-overlay-spinner">
|
|
2541
|
+
<img
|
|
2542
|
+
class="spinner"
|
|
2543
|
+
src="${Dt}"
|
|
2544
|
+
alt="${a("Loading")}"
|
|
2545
|
+
/>
|
|
2546
|
+
</div>
|
|
2547
|
+
|
|
2548
|
+
<video
|
|
2549
|
+
class=${Ue({
|
|
2550
|
+
error: !this.errorMessage,
|
|
2551
|
+
success: !!this.errorMessage
|
|
2552
|
+
})}
|
|
2553
|
+
playsinline
|
|
2554
|
+
id="video"
|
|
2555
|
+
autoplay
|
|
2556
|
+
></video>
|
|
2557
|
+
<button
|
|
2558
|
+
class="video-flip-icon"
|
|
2559
|
+
@click=${this.flipCamera}
|
|
2560
|
+
?disabled=${this.cameras.length < 2}
|
|
2561
|
+
>
|
|
2562
|
+
<svg
|
|
2563
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2564
|
+
width="20"
|
|
2565
|
+
height="20"
|
|
2566
|
+
fill="white"
|
|
2567
|
+
viewBox="0 0 24 24"
|
|
2568
|
+
>
|
|
2569
|
+
<path
|
|
2570
|
+
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"
|
|
2571
|
+
/>
|
|
2572
|
+
</svg>
|
|
2573
|
+
<span class="flip-camera-text"
|
|
2574
|
+
>${a("Click here to flip your camera")}</span
|
|
2575
|
+
>
|
|
2576
|
+
</button>
|
|
2577
|
+
</div>
|
|
2578
|
+
</div>
|
|
2579
|
+
` : ""}
|
|
2580
|
+
${this.step === 4 ? g`
|
|
2581
|
+
<div class="step-4">
|
|
2582
|
+
<xact-step-result
|
|
2583
|
+
.recommendedSize=${this.recommendedSize}
|
|
2584
|
+
.productSku=${this.productSku}
|
|
2585
|
+
.generatedImageUrl=${this.generatedImageUrl}
|
|
2586
|
+
.isVtonFetching=${this.isVtonFetching}
|
|
2587
|
+
.vtonError=${this.vtonError}
|
|
2588
|
+
.garmentUrl=${this.garmentUrl}
|
|
2589
|
+
.onRetry=${() => this.resetMeasurement()}
|
|
2590
|
+
.onAccept=${() => this.acceptMeasurement()}
|
|
2591
|
+
>
|
|
2592
|
+
</xact-step-result>
|
|
2593
|
+
</div>
|
|
2594
|
+
` : ""}
|
|
2595
|
+
<xact-footer></xact-footer>
|
|
2596
|
+
</div>
|
|
2597
|
+
</div>
|
|
2598
|
+
` : ""}
|
|
2599
|
+
`;
|
|
2600
|
+
}
|
|
2601
|
+
};
|
|
2602
|
+
c.styles = U`
|
|
2603
|
+
:host {
|
|
2604
|
+
display: block;
|
|
2605
|
+
font-family: Arial, sans-serif;
|
|
2606
|
+
}
|
|
2607
|
+
|
|
2608
|
+
.flip-btn {
|
|
2609
|
+
width: 100%;
|
|
2610
|
+
padding: 8px 24px;
|
|
2611
|
+
font-size: 16px;
|
|
2612
|
+
background-color: #4a90e2;
|
|
2613
|
+
color: white;
|
|
2614
|
+
border: none;
|
|
2615
|
+
border-radius: 4px;
|
|
2616
|
+
cursor: pointer;
|
|
2617
|
+
transition: background-color 0.3s ease;
|
|
2618
|
+
display: inline-flex;
|
|
2619
|
+
align-items: center;
|
|
2620
|
+
justify-content: center;
|
|
2621
|
+
font-family:
|
|
2622
|
+
"Lato",
|
|
2623
|
+
-apple-system,
|
|
2624
|
+
system-ui,
|
|
2625
|
+
BlinkMacSystemFont,
|
|
2626
|
+
sans-serif;
|
|
2627
|
+
}
|
|
2628
|
+
|
|
2629
|
+
.flip-btn:hover {
|
|
2630
|
+
background-color: #357abd;
|
|
2631
|
+
}
|
|
2632
|
+
|
|
2633
|
+
.flip-btn:disabled {
|
|
2634
|
+
background-color: #cccccc;
|
|
2635
|
+
cursor: not-allowed;
|
|
2636
|
+
}
|
|
2637
|
+
|
|
2638
|
+
/* Modal Styles */
|
|
2639
|
+
.modal {
|
|
2640
|
+
position: fixed;
|
|
2641
|
+
top: 0;
|
|
2642
|
+
left: 0;
|
|
2643
|
+
width: 100%;
|
|
2644
|
+
height: 100%;
|
|
2645
|
+
background: rgba(0, 0, 0, 0.5);
|
|
2646
|
+
display: flex;
|
|
2647
|
+
flex-direction: column;
|
|
2648
|
+
justify-content: center;
|
|
2649
|
+
align-items: center;
|
|
2650
|
+
z-index: 9999 !important;
|
|
2651
|
+
}
|
|
2652
|
+
|
|
2653
|
+
.modal-content {
|
|
2654
|
+
box-sizing: border-box;
|
|
2655
|
+
background: white;
|
|
2656
|
+
padding: 20px;
|
|
2657
|
+
border-radius: 18px;
|
|
2658
|
+
width: 90%;
|
|
2659
|
+
max-height: 90vh;
|
|
2660
|
+
max-width: 1000px;
|
|
2661
|
+
position: relative;
|
|
2662
|
+
display: flex;
|
|
2663
|
+
flex-direction: column;
|
|
2664
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
2665
|
+
}
|
|
2666
|
+
|
|
2667
|
+
@media (max-width: 600px) {
|
|
2668
|
+
.modal-content {
|
|
2669
|
+
width: 100%;
|
|
2670
|
+
height: 100vh;
|
|
2671
|
+
max-height: 100vh;
|
|
2672
|
+
border-radius: 0;
|
|
2673
|
+
padding: 15px 15px 45px 15px;
|
|
2674
|
+
}
|
|
2675
|
+
}
|
|
2676
|
+
|
|
2677
|
+
@media (max-width: 768px) {
|
|
2678
|
+
.step-4 {
|
|
2679
|
+
height: 100%;
|
|
2680
|
+
display: flex;
|
|
2681
|
+
justify-content: center;
|
|
2682
|
+
align-items: center;
|
|
2683
|
+
}
|
|
2684
|
+
}
|
|
2685
|
+
|
|
2686
|
+
.close-btn {
|
|
2687
|
+
top: 15px;
|
|
2688
|
+
right: 15px;
|
|
2689
|
+
font-size: 24px;
|
|
2690
|
+
font-weight: bold;
|
|
2691
|
+
cursor: pointer;
|
|
2692
|
+
position: absolute;
|
|
2693
|
+
color: #333;
|
|
2694
|
+
}
|
|
2695
|
+
|
|
2696
|
+
.close-btn:hover {
|
|
2697
|
+
color: #ff0000;
|
|
2698
|
+
}
|
|
2699
|
+
|
|
2700
|
+
/* Step 1 Styles */
|
|
2701
|
+
.step-1 {
|
|
2702
|
+
display: flex;
|
|
2703
|
+
flex-direction: row;
|
|
2704
|
+
align-items: stretch;
|
|
2705
|
+
gap: 18px;
|
|
2706
|
+
overflow: hidden;
|
|
2707
|
+
}
|
|
2708
|
+
|
|
2709
|
+
.step-1-container-left {
|
|
2710
|
+
display: flex;
|
|
2711
|
+
flex-direction: column;
|
|
2712
|
+
justify-content: space-between;
|
|
2713
|
+
width: 50%;
|
|
2714
|
+
max-width: 50%;
|
|
2715
|
+
}
|
|
2716
|
+
|
|
2717
|
+
@media (max-width: 768px) {
|
|
2718
|
+
.step-1 {
|
|
2719
|
+
flex-direction: column;
|
|
2720
|
+
flex: 1;
|
|
2721
|
+
}
|
|
2722
|
+
|
|
2723
|
+
.step-1-container-left {
|
|
2724
|
+
flex: 1;
|
|
2725
|
+
}
|
|
2726
|
+
}
|
|
2727
|
+
|
|
2728
|
+
.step-1-image-container {
|
|
2729
|
+
display: flex;
|
|
2730
|
+
align-items: center;
|
|
2731
|
+
justify-content: center;
|
|
2732
|
+
width: 100%;
|
|
2733
|
+
overflow: hidden;
|
|
2734
|
+
}
|
|
2735
|
+
|
|
2736
|
+
@media (max-width: 768px) {
|
|
2737
|
+
.step-1-container-left {
|
|
2738
|
+
width: 100%;
|
|
2739
|
+
max-width: 100%;
|
|
2740
|
+
}
|
|
2741
|
+
|
|
2742
|
+
.step-1-image-container {
|
|
2743
|
+
flex: 1;
|
|
2744
|
+
}
|
|
2745
|
+
}
|
|
2746
|
+
|
|
2747
|
+
.step-1-container-left .mobile-image {
|
|
2748
|
+
display: none;
|
|
2749
|
+
}
|
|
2750
|
+
|
|
2751
|
+
.step-1-image-container img {
|
|
2752
|
+
max-width: 100%;
|
|
2753
|
+
max-height: 200px;
|
|
2754
|
+
object-fit: contain;
|
|
2755
|
+
}
|
|
2756
|
+
|
|
2757
|
+
.step-1-container-right {
|
|
2758
|
+
width: 50%;
|
|
2759
|
+
display: flex;
|
|
2760
|
+
justify-content: center;
|
|
2761
|
+
}
|
|
2762
|
+
|
|
2763
|
+
@media (max-width: 768px) {
|
|
2764
|
+
.step-1-container-left,
|
|
2765
|
+
.step-1-container-right {
|
|
2766
|
+
width: 100%;
|
|
2767
|
+
}
|
|
2768
|
+
|
|
2769
|
+
.step-1-container-left .mobile-image {
|
|
2770
|
+
display: block;
|
|
2771
|
+
}
|
|
2772
|
+
|
|
2773
|
+
.step-1-container-right {
|
|
2774
|
+
display: none;
|
|
2775
|
+
}
|
|
2776
|
+
}
|
|
2777
|
+
|
|
2778
|
+
.modal-title {
|
|
2779
|
+
align-self: start;
|
|
2780
|
+
font-size: 24px;
|
|
2781
|
+
font-weight: 700;
|
|
2782
|
+
color: var(--xactsize-modal-title--color, #333);
|
|
2783
|
+
margin: 0;
|
|
2784
|
+
font-family:
|
|
2785
|
+
"Lato",
|
|
2786
|
+
-apple-system,
|
|
2787
|
+
system-ui,
|
|
2788
|
+
BlinkMacSystemFont,
|
|
2789
|
+
sans-serif;
|
|
2790
|
+
}
|
|
2791
|
+
|
|
2792
|
+
@media (max-width: 600px) {
|
|
2793
|
+
.modal-title-container {
|
|
2794
|
+
margin-top: 15px;
|
|
2795
|
+
}
|
|
2796
|
+
}
|
|
2797
|
+
|
|
2798
|
+
.step-1-description {
|
|
2799
|
+
font-size: 16px;
|
|
2800
|
+
font-weight: 400;
|
|
2801
|
+
color: #666;
|
|
2802
|
+
margin-bottom: 10px;
|
|
2803
|
+
line-height: 1.5;
|
|
2804
|
+
font-family:
|
|
2805
|
+
"Lato",
|
|
2806
|
+
-apple-system,
|
|
2807
|
+
system-ui,
|
|
2808
|
+
BlinkMacSystemFont,
|
|
2809
|
+
sans-serif;
|
|
2810
|
+
}
|
|
2811
|
+
|
|
2812
|
+
.size-chart {
|
|
2813
|
+
width: 200px;
|
|
2814
|
+
height: auto;
|
|
2815
|
+
max-width: 100%;
|
|
2816
|
+
}
|
|
2817
|
+
|
|
2818
|
+
.modal-footer {
|
|
2819
|
+
width: 100%;
|
|
2820
|
+
text-align: center;
|
|
2821
|
+
padding-top: 10px;
|
|
2822
|
+
font-size: 12px;
|
|
2823
|
+
color: #000000;
|
|
2824
|
+
font-weight: 600;
|
|
2825
|
+
font-family:
|
|
2826
|
+
"Lato",
|
|
2827
|
+
-apple-system,
|
|
2828
|
+
system-ui,
|
|
2829
|
+
BlinkMacSystemFont,
|
|
2830
|
+
sans-serif;
|
|
2831
|
+
max-width: 1000px;
|
|
2832
|
+
display: flex;
|
|
2833
|
+
}
|
|
2834
|
+
|
|
2835
|
+
@media (max-width: 600px) {
|
|
2836
|
+
.modal-footer {
|
|
2837
|
+
position: fixed;
|
|
2838
|
+
bottom: 10px;
|
|
2839
|
+
left: 10px;
|
|
2840
|
+
}
|
|
2841
|
+
}
|
|
2842
|
+
|
|
2843
|
+
@media (max-width: 400px) {
|
|
2844
|
+
.step-3 {
|
|
2845
|
+
padding: 2px;
|
|
2846
|
+
gap: 5px;
|
|
2847
|
+
}
|
|
2848
|
+
|
|
2849
|
+
.video-container {
|
|
2850
|
+
max-height: 75vh;
|
|
2851
|
+
}
|
|
2852
|
+
|
|
2853
|
+
.video-overlay h2 {
|
|
2854
|
+
font-size: 10px;
|
|
2855
|
+
}
|
|
2856
|
+
}
|
|
2857
|
+
|
|
2858
|
+
.modal-footer span {
|
|
2859
|
+
text-decoration: none;
|
|
2860
|
+
}
|
|
2861
|
+
|
|
2862
|
+
/* Step 3 Styles */
|
|
2863
|
+
.step-3 {
|
|
2864
|
+
text-align: center;
|
|
2865
|
+
display: flex;
|
|
2866
|
+
flex-direction: column;
|
|
2867
|
+
flex: 1;
|
|
2868
|
+
padding: 15px;
|
|
2869
|
+
}
|
|
2870
|
+
|
|
2871
|
+
.step-3 h2 {
|
|
2872
|
+
font-size: 20px;
|
|
2873
|
+
}
|
|
2874
|
+
|
|
2875
|
+
.video-container {
|
|
2876
|
+
position: relative;
|
|
2877
|
+
width: 100%;
|
|
2878
|
+
height: 100%;
|
|
2879
|
+
display: flex;
|
|
2880
|
+
overflow: hidden;
|
|
2881
|
+
border-radius: 8px;
|
|
2882
|
+
flex: 1;
|
|
2883
|
+
flex-direction: column;
|
|
2884
|
+
max-height: 70vh;
|
|
2885
|
+
}
|
|
2886
|
+
|
|
2887
|
+
.video-container button {
|
|
2888
|
+
width: 100%;
|
|
2889
|
+
}
|
|
2890
|
+
|
|
2891
|
+
video {
|
|
2892
|
+
width: 100%;
|
|
2893
|
+
height: 100%;
|
|
2894
|
+
object-fit: cover;
|
|
2895
|
+
border-radius: 10px;
|
|
2896
|
+
overflow: hidden;
|
|
2897
|
+
border: 4px solid transparent;
|
|
2898
|
+
box-sizing: border-box;
|
|
2899
|
+
}
|
|
2900
|
+
|
|
2901
|
+
video.error {
|
|
2902
|
+
border-color: red;
|
|
2903
|
+
}
|
|
2904
|
+
|
|
2905
|
+
video.success {
|
|
2906
|
+
border-color: green;
|
|
2907
|
+
}
|
|
2908
|
+
|
|
2909
|
+
xact-button {
|
|
2910
|
+
width: 100%;
|
|
2911
|
+
}
|
|
2912
|
+
|
|
2913
|
+
xact-button.launch-btn {
|
|
2914
|
+
--brand-primary: #000;
|
|
2915
|
+
--brand-primary-hover: #111;
|
|
2916
|
+
--text-inverse: #fff;
|
|
2917
|
+
--xact-button-radius: 0px;
|
|
2918
|
+
}
|
|
2919
|
+
|
|
2920
|
+
.video-overlay {
|
|
2921
|
+
position: absolute;
|
|
2922
|
+
inset: 4px 4px auto 4px;
|
|
2923
|
+
display: flex;
|
|
2924
|
+
justify-content: space-between;
|
|
2925
|
+
align-items: center;
|
|
2926
|
+
background-color: rgba(0, 0, 0, 0.6);
|
|
2927
|
+
color: white;
|
|
2928
|
+
padding: 8px 12px;
|
|
2929
|
+
box-sizing: border-box;
|
|
2930
|
+
z-index: 2;
|
|
2931
|
+
border-radius: 5px 5px 0 0;
|
|
2932
|
+
}
|
|
2933
|
+
|
|
2934
|
+
.video-overlay.error {
|
|
2935
|
+
background-color: rgba(0, 0, 0, 0.6);
|
|
2936
|
+
}
|
|
2937
|
+
|
|
2938
|
+
.video-overlay.success {
|
|
2939
|
+
background-color: #005f31;
|
|
2940
|
+
}
|
|
2941
|
+
|
|
2942
|
+
.video-overlay-spinner {
|
|
2943
|
+
position: absolute;
|
|
2944
|
+
top: 10px;
|
|
2945
|
+
right: 10px;
|
|
2946
|
+
display: flex;
|
|
2947
|
+
justify-content: center;
|
|
2948
|
+
align-items: center;
|
|
2949
|
+
z-index: 3;
|
|
2950
|
+
}
|
|
2951
|
+
|
|
2952
|
+
.video-overlay h2 {
|
|
2953
|
+
font-size: 16px;
|
|
2954
|
+
margin: 0;
|
|
2955
|
+
font-weight: 400;
|
|
2956
|
+
flex: 1;
|
|
2957
|
+
}
|
|
2958
|
+
|
|
2959
|
+
.spinner {
|
|
2960
|
+
width: 24px;
|
|
2961
|
+
height: 24px;
|
|
2962
|
+
animation: pulse 1s linear infinite;
|
|
2963
|
+
}
|
|
2964
|
+
|
|
2965
|
+
.video-flip-icon {
|
|
2966
|
+
position: absolute;
|
|
2967
|
+
bottom: 50px;
|
|
2968
|
+
background: transparent;
|
|
2969
|
+
border: none;
|
|
2970
|
+
padding: 4px;
|
|
2971
|
+
cursor: pointer;
|
|
2972
|
+
z-index: 3;
|
|
2973
|
+
display: flex;
|
|
2974
|
+
flex-direction: column;
|
|
2975
|
+
align-items: center;
|
|
2976
|
+
justify-content: center;
|
|
2977
|
+
gap: 4px;
|
|
2978
|
+
}
|
|
2979
|
+
|
|
2980
|
+
.video-flip-icon svg {
|
|
2981
|
+
width: 24px;
|
|
2982
|
+
height: 24px;
|
|
2983
|
+
fill: white;
|
|
2984
|
+
pointer-events: none;
|
|
2985
|
+
}
|
|
2986
|
+
|
|
2987
|
+
.video-flip-icon:hover svg {
|
|
2988
|
+
filter: brightness(1.3);
|
|
2989
|
+
}
|
|
2990
|
+
|
|
2991
|
+
.flip-camera-text {
|
|
2992
|
+
color: white;
|
|
2993
|
+
font-size: 11px;
|
|
2994
|
+
font-weight: 500;
|
|
2995
|
+
text-align: center;
|
|
2996
|
+
white-space: nowrap;
|
|
2997
|
+
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
|
|
2998
|
+
pointer-events: none;
|
|
2999
|
+
}
|
|
3000
|
+
|
|
3001
|
+
.video-flip-icon:disabled .flip-camera-text {
|
|
3002
|
+
opacity: 0.5;
|
|
3003
|
+
}
|
|
3004
|
+
|
|
3005
|
+
@keyframes pulse {
|
|
3006
|
+
0% {
|
|
3007
|
+
filter: brightness(1);
|
|
3008
|
+
}
|
|
3009
|
+
50% {
|
|
3010
|
+
filter: brightness(0.7);
|
|
3011
|
+
}
|
|
3012
|
+
100% {
|
|
3013
|
+
filter: brightness(1);
|
|
3014
|
+
}
|
|
3015
|
+
}
|
|
3016
|
+
|
|
3017
|
+
/* Snow effect */
|
|
3018
|
+
.snow-container {
|
|
3019
|
+
position: absolute;
|
|
3020
|
+
inset: 0;
|
|
3021
|
+
pointer-events: none;
|
|
3022
|
+
overflow: hidden;
|
|
3023
|
+
z-index: 10;
|
|
3024
|
+
border-radius: 8px;
|
|
3025
|
+
}
|
|
3026
|
+
|
|
3027
|
+
.snowflake {
|
|
3028
|
+
position: absolute;
|
|
3029
|
+
top: -10%;
|
|
3030
|
+
color: #fff;
|
|
3031
|
+
font-size: 1em;
|
|
3032
|
+
font-family: Arial, sans-serif;
|
|
3033
|
+
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
|
|
3034
|
+
opacity: 0;
|
|
3035
|
+
animation: snowfall linear infinite;
|
|
3036
|
+
will-change: transform, opacity;
|
|
3037
|
+
}
|
|
3038
|
+
|
|
3039
|
+
.snowflake::before {
|
|
3040
|
+
content: "❅";
|
|
3041
|
+
}
|
|
3042
|
+
|
|
3043
|
+
.snowflake:nth-child(2n)::before {
|
|
3044
|
+
content: "❆";
|
|
3045
|
+
}
|
|
3046
|
+
|
|
3047
|
+
.snowflake:nth-child(3n)::before {
|
|
3048
|
+
content: "❄";
|
|
3049
|
+
}
|
|
3050
|
+
|
|
3051
|
+
.snowflake:nth-child(odd) {
|
|
3052
|
+
font-size: 0.8em;
|
|
3053
|
+
}
|
|
3054
|
+
|
|
3055
|
+
.snowflake:nth-child(3n) {
|
|
3056
|
+
font-size: 1.2em;
|
|
3057
|
+
}
|
|
3058
|
+
|
|
3059
|
+
.snowflake:nth-child(4n) {
|
|
3060
|
+
font-size: 0.6em;
|
|
3061
|
+
}
|
|
3062
|
+
|
|
3063
|
+
.snowflake:nth-child(5n) {
|
|
3064
|
+
font-size: 1.1em;
|
|
3065
|
+
}
|
|
3066
|
+
|
|
3067
|
+
@keyframes snowfall {
|
|
3068
|
+
0% {
|
|
3069
|
+
transform: translateY(-10vh) translateX(0);
|
|
3070
|
+
opacity: 0;
|
|
3071
|
+
}
|
|
3072
|
+
5% {
|
|
3073
|
+
opacity: 1;
|
|
3074
|
+
}
|
|
3075
|
+
25% {
|
|
3076
|
+
transform: translateY(30vh) translateX(-10px);
|
|
3077
|
+
}
|
|
3078
|
+
50% {
|
|
3079
|
+
transform: translateY(60vh) translateX(10px);
|
|
3080
|
+
}
|
|
3081
|
+
75% {
|
|
3082
|
+
transform: translateY(90vh) translateX(-5px);
|
|
3083
|
+
}
|
|
3084
|
+
95% {
|
|
3085
|
+
opacity: 1;
|
|
3086
|
+
}
|
|
3087
|
+
100% {
|
|
3088
|
+
transform: translateY(110vh) translateX(0);
|
|
3089
|
+
opacity: 0;
|
|
3090
|
+
}
|
|
3091
|
+
}
|
|
3092
|
+
|
|
3093
|
+
.error-message {
|
|
3094
|
+
color: red;
|
|
3095
|
+
font-size: 14px;
|
|
3096
|
+
margin-top: 10px;
|
|
3097
|
+
}
|
|
3098
|
+
|
|
3099
|
+
.size-graph-container {
|
|
3100
|
+
display: flex;
|
|
3101
|
+
align-items: center;
|
|
3102
|
+
justify-content: space-between;
|
|
3103
|
+
width: 100%;
|
|
3104
|
+
margin-bottom: 20px;
|
|
3105
|
+
flex-wrap: wrap;
|
|
3106
|
+
}
|
|
3107
|
+
|
|
3108
|
+
.size-graph-container-left {
|
|
3109
|
+
display: flex;
|
|
3110
|
+
flex-direction: column;
|
|
3111
|
+
width: 50%;
|
|
3112
|
+
justify-content: center;
|
|
3113
|
+
align-items: center;
|
|
3114
|
+
}
|
|
3115
|
+
|
|
3116
|
+
.size-graph-container-right {
|
|
3117
|
+
display: flex;
|
|
3118
|
+
flex-direction: column;
|
|
3119
|
+
width: 50%;
|
|
3120
|
+
justify-content: center;
|
|
3121
|
+
align-items: center;
|
|
3122
|
+
}
|
|
3123
|
+
|
|
3124
|
+
@media (max-width: 600px) {
|
|
3125
|
+
.size-graph-container-left,
|
|
3126
|
+
.size-graph-container-right {
|
|
3127
|
+
width: 100%;
|
|
3128
|
+
margin-bottom: 15px;
|
|
3129
|
+
}
|
|
3130
|
+
}
|
|
3131
|
+
|
|
3132
|
+
.product-image {
|
|
3133
|
+
object-fit: contain;
|
|
3134
|
+
max-width: 100%;
|
|
3135
|
+
max-height: 200px;
|
|
3136
|
+
}
|
|
3137
|
+
|
|
3138
|
+
.recommendation-text {
|
|
3139
|
+
font-size: 16px;
|
|
3140
|
+
font-weight: 700;
|
|
3141
|
+
color: #333;
|
|
3142
|
+
margin-bottom: 20px;
|
|
3143
|
+
text-align: left;
|
|
3144
|
+
font-family:
|
|
3145
|
+
"Lato",
|
|
3146
|
+
-apple-system,
|
|
3147
|
+
system-ui,
|
|
3148
|
+
BlinkMacSystemFont,
|
|
3149
|
+
sans-serif;
|
|
3150
|
+
}
|
|
3151
|
+
`;
|
|
3152
|
+
p([
|
|
3153
|
+
d({ type: String, attribute: "api-key" })
|
|
3154
|
+
], c.prototype, "apiKey", 2);
|
|
3155
|
+
p([
|
|
3156
|
+
d({ type: String, attribute: "tenant-id" })
|
|
3157
|
+
], c.prototype, "tenantId", 2);
|
|
3158
|
+
p([
|
|
3159
|
+
d({ type: String, attribute: "product-sku" })
|
|
3160
|
+
], c.prototype, "productSku", 2);
|
|
3161
|
+
p([
|
|
3162
|
+
d({ type: String, attribute: "base-url" })
|
|
3163
|
+
], c.prototype, "baseUrl", 2);
|
|
3164
|
+
p([
|
|
3165
|
+
d({ type: String, attribute: "api-url" })
|
|
3166
|
+
], c.prototype, "apiUrl", 2);
|
|
3167
|
+
p([
|
|
3168
|
+
d({ type: String, attribute: "vton-url" })
|
|
3169
|
+
], c.prototype, "vtonUrl", 2);
|
|
3170
|
+
p([
|
|
3171
|
+
d({ type: String, attribute: "garment-url" })
|
|
3172
|
+
], c.prototype, "garmentUrl", 2);
|
|
3173
|
+
p([
|
|
3174
|
+
d({ type: Boolean, attribute: "vton" })
|
|
3175
|
+
], c.prototype, "vton", 2);
|
|
3176
|
+
p([
|
|
3177
|
+
d({ type: Function, attribute: "onmeasurementaccepted" })
|
|
3178
|
+
], c.prototype, "onMeasurementAccepted", 2);
|
|
3179
|
+
p([
|
|
3180
|
+
d({ type: Function, attribute: "onmeasurementcanceled" })
|
|
3181
|
+
], c.prototype, "onMeasurementCanceled", 2);
|
|
3182
|
+
p([
|
|
3183
|
+
d({ type: String, attribute: "brand-name" })
|
|
3184
|
+
], c.prototype, "brandName", 2);
|
|
3185
|
+
p([
|
|
3186
|
+
d({ type: String, attribute: "button-text" })
|
|
3187
|
+
], c.prototype, "buttonText", 2);
|
|
3188
|
+
p([
|
|
3189
|
+
d({ type: String })
|
|
3190
|
+
], c.prototype, "culture", 1);
|
|
3191
|
+
p([
|
|
3192
|
+
_()
|
|
3193
|
+
], c.prototype, "errorMap", 1);
|
|
3194
|
+
p([
|
|
3195
|
+
_()
|
|
3196
|
+
], c.prototype, "measurerKey", 2);
|
|
3197
|
+
p([
|
|
3198
|
+
_()
|
|
3199
|
+
], c.prototype, "_isLocaleLoading", 2);
|
|
3200
|
+
p([
|
|
3201
|
+
_()
|
|
3202
|
+
], c.prototype, "showModal", 2);
|
|
3203
|
+
p([
|
|
3204
|
+
_()
|
|
3205
|
+
], c.prototype, "step", 2);
|
|
3206
|
+
p([
|
|
3207
|
+
_()
|
|
3208
|
+
], c.prototype, "height", 2);
|
|
3209
|
+
p([
|
|
3210
|
+
_()
|
|
3211
|
+
], c.prototype, "recommendedSize", 2);
|
|
3212
|
+
p([
|
|
3213
|
+
_()
|
|
3214
|
+
], c.prototype, "measurements", 2);
|
|
3215
|
+
p([
|
|
3216
|
+
_()
|
|
3217
|
+
], c.prototype, "errorMessage", 2);
|
|
3218
|
+
p([
|
|
3219
|
+
_()
|
|
3220
|
+
], c.prototype, "instructionMessage", 2);
|
|
3221
|
+
p([
|
|
3222
|
+
_()
|
|
3223
|
+
], c.prototype, "shouldStartMeasurement", 2);
|
|
3224
|
+
p([
|
|
3225
|
+
_()
|
|
3226
|
+
], c.prototype, "isLoading", 2);
|
|
3227
|
+
p([
|
|
3228
|
+
_()
|
|
3229
|
+
], c.prototype, "isFetching", 2);
|
|
3230
|
+
p([
|
|
3231
|
+
_()
|
|
3232
|
+
], c.prototype, "generatedImageUrl", 2);
|
|
3233
|
+
p([
|
|
3234
|
+
_()
|
|
3235
|
+
], c.prototype, "isVtonFetching", 2);
|
|
3236
|
+
p([
|
|
3237
|
+
_()
|
|
3238
|
+
], c.prototype, "vtonError", 2);
|
|
3239
|
+
p([
|
|
3240
|
+
_()
|
|
3241
|
+
], c.prototype, "cameras", 2);
|
|
3242
|
+
p([
|
|
3243
|
+
_()
|
|
3244
|
+
], c.prototype, "currentCameraId", 2);
|
|
3245
|
+
c = p([
|
|
3246
|
+
V("body-measurer"),
|
|
3247
|
+
q()
|
|
3248
|
+
], c);
|
|
3249
|
+
export {
|
|
3250
|
+
c as B,
|
|
3251
|
+
Ht as a,
|
|
3252
|
+
ii as g,
|
|
3253
|
+
_e as s
|
|
3254
|
+
};
|