xactsize-webcomponents 1.0.28 → 1.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/body-measurer.es.js
CHANGED
|
@@ -16,7 +16,7 @@ const wA = (l, A, t) => {
|
|
|
16
16
|
* Copyright 2019 Google LLC
|
|
17
17
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
18
18
|
*/
|
|
19
|
-
const B = globalThis,
|
|
19
|
+
const B = globalThis, dA = B.ShadowRoot && (B.ShadyCSS === void 0 || B.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, uA = Symbol(), TA = /* @__PURE__ */ new WeakMap();
|
|
20
20
|
let ZA = class {
|
|
21
21
|
constructor(A, t, r) {
|
|
22
22
|
if (this._$cssResult$ = !0, r !== uA) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
|
|
@@ -25,7 +25,7 @@ let ZA = class {
|
|
|
25
25
|
get styleSheet() {
|
|
26
26
|
let A = this.o;
|
|
27
27
|
const t = this.t;
|
|
28
|
-
if (
|
|
28
|
+
if (dA && A === void 0) {
|
|
29
29
|
const r = t !== void 0 && t.length === 1;
|
|
30
30
|
r && (A = TA.get(t)), A === void 0 && ((this.o = A = new CSSStyleSheet()).replaceSync(this.cssText), r && TA.set(t, A));
|
|
31
31
|
}
|
|
@@ -35,23 +35,23 @@ let ZA = class {
|
|
|
35
35
|
return this.cssText;
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
|
-
const
|
|
38
|
+
const YA = (l) => new ZA(typeof l == "string" ? l : l + "", void 0, uA), N = (l, ...A) => {
|
|
39
39
|
const t = l.length === 1 ? l[0] : A.reduce((r, e, p) => r + ((V) => {
|
|
40
40
|
if (V._$cssResult$ === !0) return V.cssText;
|
|
41
41
|
if (typeof V == "number") return V;
|
|
42
42
|
throw Error("Value passed to 'css' function must be a 'css' function result: " + V + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
|
|
43
43
|
})(e) + l[p + 1], l[0]);
|
|
44
44
|
return new ZA(t, l, uA);
|
|
45
|
-
},
|
|
46
|
-
if (
|
|
45
|
+
}, CA = (l, A) => {
|
|
46
|
+
if (dA) l.adoptedStyleSheets = A.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
|
|
47
47
|
else for (const t of A) {
|
|
48
48
|
const r = document.createElement("style"), e = B.litNonce;
|
|
49
49
|
e !== void 0 && r.setAttribute("nonce", e), r.textContent = t.cssText, l.appendChild(r);
|
|
50
50
|
}
|
|
51
|
-
}, XA =
|
|
51
|
+
}, XA = dA ? (l) => l : (l) => l instanceof CSSStyleSheet ? ((A) => {
|
|
52
52
|
let t = "";
|
|
53
53
|
for (const r of A.cssRules) t += r.cssText;
|
|
54
|
-
return
|
|
54
|
+
return YA(t);
|
|
55
55
|
})(l) : l;
|
|
56
56
|
/**
|
|
57
57
|
* @license
|
|
@@ -172,7 +172,7 @@ let m = class extends HTMLElement {
|
|
|
172
172
|
}
|
|
173
173
|
createRenderRoot() {
|
|
174
174
|
const A = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
|
|
175
|
-
return
|
|
175
|
+
return CA(A, this.constructor.elementStyles), A;
|
|
176
176
|
}
|
|
177
177
|
connectedCallback() {
|
|
178
178
|
var A;
|
|
@@ -307,10 +307,10 @@ const rt = (l, A) => {
|
|
|
307
307
|
let e, p = A === 2 ? "<svg>" : A === 3 ? "<math>" : "", V = H;
|
|
308
308
|
for (let S = 0; S < t; S++) {
|
|
309
309
|
const q = l[S];
|
|
310
|
-
let u, k,
|
|
311
|
-
for (; x < q.length && (V.lastIndex = x, k = V.exec(q), k !== null); ) x = V.lastIndex, V === H ? k[1] === "!--" ? V = KA : k[1] !== void 0 ? V = UA : k[2] !== void 0 ? (HA.test(k[2]) && (e = RegExp("</" + k[2], "g")), V = W) : k[3] !== void 0 && (V = W) : V === W ? k[0] === ">" ? (V = e ?? H,
|
|
310
|
+
let u, k, y = -1, x = 0;
|
|
311
|
+
for (; x < q.length && (V.lastIndex = x, k = V.exec(q), k !== null); ) x = V.lastIndex, V === H ? k[1] === "!--" ? V = KA : k[1] !== void 0 ? V = UA : k[2] !== void 0 ? (HA.test(k[2]) && (e = RegExp("</" + k[2], "g")), V = W) : k[3] !== void 0 && (V = W) : V === W ? k[0] === ">" ? (V = e ?? H, y = -1) : k[1] === void 0 ? y = -2 : (y = V.lastIndex - k[2].length, u = k[1], V = k[3] === void 0 ? W : k[3] === '"' ? vA : WA) : V === vA || V === WA ? V = W : V === KA || V === UA ? V = H : (V = W, e = void 0);
|
|
312
312
|
const s = V === W && l[S + 1].startsWith("/>") ? " " : "";
|
|
313
|
-
p += V === H ? q + tt :
|
|
313
|
+
p += V === H ? q + tt : y >= 0 ? (r.push(u), q.slice(0, y) + NA + q.slice(y) + K + s) : q + K + (y === -2 ? S : s);
|
|
314
314
|
}
|
|
315
315
|
return [zA(l, p + (l[t] || "<?>") + (A === 2 ? "</svg>" : A === 3 ? "</math>" : "")), r];
|
|
316
316
|
};
|
|
@@ -321,27 +321,27 @@ class h {
|
|
|
321
321
|
let p = 0, V = 0;
|
|
322
322
|
const S = A.length - 1, q = this.parts, [u, k] = rt(A, t);
|
|
323
323
|
if (this.el = h.createElement(u, r), O.currentNode = this.el.content, t === 2 || t === 3) {
|
|
324
|
-
const
|
|
325
|
-
|
|
324
|
+
const y = this.el.content.firstChild;
|
|
325
|
+
y.replaceWith(...y.childNodes);
|
|
326
326
|
}
|
|
327
327
|
for (; (e = O.nextNode()) !== null && q.length < S; ) {
|
|
328
328
|
if (e.nodeType === 1) {
|
|
329
|
-
if (e.hasAttributes()) for (const
|
|
330
|
-
const x = k[V++], s = e.getAttribute(
|
|
331
|
-
q.push({ type: 1, index: p, name: Q[2], strings: s, ctor: Q[1] === "." ? Vt : Q[1] === "?" ? nt : Q[1] === "@" ? qt : lA }), e.removeAttribute(
|
|
332
|
-
} else
|
|
329
|
+
if (e.hasAttributes()) for (const y of e.getAttributeNames()) if (y.endsWith(NA)) {
|
|
330
|
+
const x = k[V++], s = e.getAttribute(y).split(K), Q = /([.?@])?(.*)/.exec(x);
|
|
331
|
+
q.push({ type: 1, index: p, name: Q[2], strings: s, ctor: Q[1] === "." ? Vt : Q[1] === "?" ? nt : Q[1] === "@" ? qt : lA }), e.removeAttribute(y);
|
|
332
|
+
} else y.startsWith(K) && (q.push({ type: 6, index: p }), e.removeAttribute(y));
|
|
333
333
|
if (HA.test(e.tagName)) {
|
|
334
|
-
const
|
|
334
|
+
const y = e.textContent.split(K), x = y.length - 1;
|
|
335
335
|
if (x > 0) {
|
|
336
336
|
e.textContent = $ ? $.emptyScript : "";
|
|
337
|
-
for (let s = 0; s < x; s++) e.append(
|
|
338
|
-
e.append(
|
|
337
|
+
for (let s = 0; s < x; s++) e.append(y[s], F()), O.nextNode(), q.push({ type: 2, index: ++p });
|
|
338
|
+
e.append(y[x], F());
|
|
339
339
|
}
|
|
340
340
|
}
|
|
341
341
|
} else if (e.nodeType === 8) if (e.data === RA) q.push({ type: 2, index: p });
|
|
342
342
|
else {
|
|
343
|
-
let
|
|
344
|
-
for (; (
|
|
343
|
+
let y = -1;
|
|
344
|
+
for (; (y = e.data.indexOf(K, y + 1)) !== -1; ) q.push({ type: 7, index: p }), y += K.length - 1;
|
|
345
345
|
}
|
|
346
346
|
p++;
|
|
347
347
|
}
|
|
@@ -577,7 +577,7 @@ const R = (l) => (A, t) => {
|
|
|
577
577
|
* Copyright 2017 Google LLC
|
|
578
578
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
579
579
|
*/
|
|
580
|
-
const
|
|
580
|
+
const yt = { attribute: !0, type: String, converter: _, reflect: !1, hasChanged: jA }, dt = (l = yt, A, t) => {
|
|
581
581
|
const { kind: r, metadata: e } = t;
|
|
582
582
|
let p = globalThis.litPropertyMetadata.get(e);
|
|
583
583
|
if (p === void 0 && globalThis.litPropertyMetadata.set(e, p = /* @__PURE__ */ new Map()), r === "setter" && ((l = Object.create(l)).wrapped = !0), p.set(t.name, l), r === "accessor") {
|
|
@@ -599,7 +599,7 @@ const dt = { attribute: !0, type: String, converter: _, reflect: !1, hasChanged:
|
|
|
599
599
|
throw Error("Unsupported decorator location: " + r);
|
|
600
600
|
};
|
|
601
601
|
function j(l) {
|
|
602
|
-
return (A, t) => typeof t == "object" ?
|
|
602
|
+
return (A, t) => typeof t == "object" ? dt(l, A, t) : ((r, e, p) => {
|
|
603
603
|
const V = e.hasOwnProperty(p);
|
|
604
604
|
return e.constructor.createProperty(p, r), V ? Object.getOwnPropertyDescriptor(e, p) : void 0;
|
|
605
605
|
})(l, A, t);
|
|
@@ -665,7 +665,7 @@ const kt = (l) => l.addController(new ct(l)), Jt = kt;
|
|
|
665
665
|
* Copyright 2021 Google LLC
|
|
666
666
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
667
667
|
*/
|
|
668
|
-
const
|
|
668
|
+
const Y = () => (l, A) => (l.addInitializer(Jt), l);
|
|
669
669
|
/**
|
|
670
670
|
* @license
|
|
671
671
|
* Copyright 2020 Google LLC
|
|
@@ -831,7 +831,7 @@ const Pt = ft(class extends ot {
|
|
|
831
831
|
return f;
|
|
832
832
|
}
|
|
833
833
|
});
|
|
834
|
-
var mt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor,
|
|
834
|
+
var mt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, C = (l, A, t, r) => {
|
|
835
835
|
for (var e = r > 1 ? void 0 : r ? Zt(A, t) : A, p = l.length - 1, V; p >= 0; p--)
|
|
836
836
|
(V = l[p]) && (e = (r ? V(A, t, e) : V(e)) || e);
|
|
837
837
|
return r && e && mt(A, t, e), e;
|
|
@@ -859,7 +859,7 @@ o.styles = N`
|
|
|
859
859
|
:host {
|
|
860
860
|
display: block;
|
|
861
861
|
width: 100%;
|
|
862
|
-
--brand-primary-fallback: #
|
|
862
|
+
--brand-primary-fallback: #000;
|
|
863
863
|
--text-inverse-fallback: #FFFFFF;
|
|
864
864
|
}
|
|
865
865
|
|
|
@@ -894,7 +894,7 @@ o.styles = N`
|
|
|
894
894
|
|
|
895
895
|
/* Contained (azul cheio) */
|
|
896
896
|
button.contained {
|
|
897
|
-
background-color: var(--brand-primary, var(--brand-primary-fallback, #
|
|
897
|
+
background-color: var(--brand-primary, var(--brand-primary-fallback, #0000));
|
|
898
898
|
color: var(--text-inverse, var(--text-inverse-fallback, #FFFFFF));
|
|
899
899
|
border: none;
|
|
900
900
|
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
|
|
@@ -936,19 +936,19 @@ o.styles = N`
|
|
|
936
936
|
}
|
|
937
937
|
}
|
|
938
938
|
`;
|
|
939
|
-
|
|
939
|
+
C([
|
|
940
940
|
j({ type: String })
|
|
941
941
|
], o.prototype, "type", 2);
|
|
942
|
-
|
|
942
|
+
C([
|
|
943
943
|
j({ type: String })
|
|
944
944
|
], o.prototype, "label", 2);
|
|
945
|
-
|
|
945
|
+
C([
|
|
946
946
|
j({ type: Boolean })
|
|
947
947
|
], o.prototype, "disabled", 2);
|
|
948
|
-
|
|
948
|
+
C([
|
|
949
949
|
j({ type: String })
|
|
950
950
|
], o.prototype, "variant", 2);
|
|
951
|
-
o =
|
|
951
|
+
o = C([
|
|
952
952
|
R("xact-button")
|
|
953
953
|
], o);
|
|
954
954
|
var Nt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, kA = (l, A, t, r) => {
|
|
@@ -958,408 +958,225 @@ var Nt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, kA = (l, A
|
|
|
958
958
|
};
|
|
959
959
|
let E = class extends X {
|
|
960
960
|
constructor() {
|
|
961
|
-
super(...arguments), this.height = 0
|
|
961
|
+
super(...arguments), this.height = 0, this.handleStart = () => {
|
|
962
|
+
var A;
|
|
963
|
+
const l = this.shadowRoot.querySelector(
|
|
964
|
+
"#height-input"
|
|
965
|
+
);
|
|
966
|
+
if (l != null && l.value) {
|
|
967
|
+
const t = parseInt(l.value);
|
|
968
|
+
this.height = t, (A = this.onStartMeasurement) == null || A.call(this, t);
|
|
969
|
+
}
|
|
970
|
+
};
|
|
962
971
|
}
|
|
963
972
|
render() {
|
|
964
973
|
return T`
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
<h2 class="
|
|
968
|
-
<p class="
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
<p class="tip-text">${n("Choose a well-lit area where you can see your image clearly.")}</p>
|
|
979
|
-
</div>
|
|
980
|
-
<div class="tip-item">
|
|
981
|
-
<span class="tip-title">${n("Clean Background")}</span>
|
|
982
|
-
<p class="tip-text">${n("Position yourself against a plain background.")}</p>
|
|
983
|
-
</div>
|
|
984
|
-
<div class="tip-item">
|
|
985
|
-
<span class="tip-title">${n("Clothes")}</span>
|
|
986
|
-
<p class="tip-text">${n("Wear clothes that you usually wear on a daily basis.")}</p>
|
|
987
|
-
</div>
|
|
988
|
-
<div class="tip-item">
|
|
989
|
-
<span class="tip-title">${n("Framing")}</span>
|
|
990
|
-
<p class="tip-text">${n("Make sure your entire body is visible. The app will guide you.")}</p>
|
|
991
|
-
</div>
|
|
992
|
-
|
|
993
|
-
<form>
|
|
994
|
-
<label for="height-input" class="height-label">
|
|
995
|
-
${n("To get started, please tell us your height.")}
|
|
996
|
-
</label>
|
|
997
|
-
<input id="height-input" type="number" min="50" max="300"
|
|
998
|
-
placeholder=${n("Height (cm)")} required tabindex="1"/>
|
|
999
|
-
</form>
|
|
1000
|
-
</div>
|
|
1001
|
-
|
|
1002
|
-
<div class="images-section">
|
|
1003
|
-
<svg width="300" height="245" viewBox="0 0 300 245" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1004
|
-
<path d="M162.404 20.4343H136.498V72.1681H162.404V20.4343Z" fill="#6D4A44"/>
|
|
1005
|
-
<path d="M136.932 59.7042C137.111 56.7025 134.822 54.1243 131.82 53.9458C128.818 53.7673 126.24 56.0565 126.062 59.0582C126.055 59.1711 126.058 59.2815 126.058 59.3928L124.039 94.2659C123.861 97.2584 126.143 99.8282 129.136 100.007C132.128 100.184 134.698 97.9027 134.876 94.9102L136.896 60.0371C136.909 59.9267 136.926 59.8171 136.932 59.7042Z" fill="#F3A396"/>
|
|
1006
|
-
<mask id="mask0_2344_2604" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="124" y="53" width="13" height="48">
|
|
1007
|
-
<path d="M136.932 59.7042C137.111 56.7025 134.822 54.1243 131.82 53.9458C128.818 53.7673 126.24 56.0565 126.062 59.0582C126.055 59.1711 126.058 59.2815 126.058 59.3928L124.039 94.2659C123.861 97.2584 126.143 99.8282 129.136 100.007C132.128 100.184 134.698 97.9027 134.876 94.9102L136.896 60.0371C136.909 59.9267 136.926 59.8171 136.932 59.7042Z" fill="white"/>
|
|
1008
|
-
</mask>
|
|
1009
|
-
<g mask="url(#mask0_2344_2604)">
|
|
1010
|
-
<path d="M138.204 70.4743C138.204 70.4743 128.75 69.6556 123.107 62.3022C123.107 62.3022 124.147 50.6029 133.085 52.4395C142.023 54.2771 138.204 70.4743 138.204 70.4743Z" fill="#F7E6D5"/>
|
|
1011
|
-
</g>
|
|
1012
|
-
<path d="M134.919 94.4893C135.097 91.4877 132.808 88.9095 129.806 88.731C126.805 88.5524 124.226 90.8417 124.048 93.8433C124.041 93.9562 124.045 94.0667 124.045 94.1771L123.549 131.903L129.384 131.406L134.882 94.8214C134.895 94.711 134.912 94.6022 134.919 94.4893Z" fill="#F3A396"/>
|
|
1013
|
-
<path d="M127.448 128.38C125.338 127.785 124.524 128.711 123.862 129.98L123.867 129.981C123.865 129.984 123.863 129.987 123.861 129.99C120.107 136.961 119.557 140.72 118.696 143.533C117.789 146.491 118.801 151.911 120.051 151.807C121.3 151.702 121.169 149.335 120.874 147.594C120.579 145.852 122.125 143.274 123.483 140.942C124.839 138.615 125.307 139.49 125.307 139.49L125.488 141.923C125.556 142.824 126.291 143.466 127.063 143.259C127.658 143.106 127.975 142.544 128.028 141.932L129.389 131.219C129.387 131.218 129.7 129.014 127.448 128.38Z" fill="#F3A396"/>
|
|
1014
|
-
<path d="M161.996 59.7042C161.818 56.7025 164.107 54.1243 167.108 53.9458C170.11 53.7673 172.688 56.0565 172.867 59.0582C172.873 59.1711 172.87 59.2815 172.87 59.3928L174.889 94.2659C175.067 97.2584 172.785 99.8282 169.793 100.007C166.8 100.184 164.23 97.9027 164.052 94.9102L162.033 60.0371C162.019 59.9267 162.003 59.8171 161.996 59.7042Z" fill="#F3A396"/>
|
|
1015
|
-
<mask id="mask1_2344_2604" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="161" y="53" width="14" height="48">
|
|
1016
|
-
<path d="M161.996 59.7042C161.818 56.7025 164.107 54.1243 167.108 53.9458C170.11 53.7673 172.688 56.0565 172.867 59.0582C172.873 59.1711 172.87 59.2815 172.87 59.3928L174.889 94.2659C175.067 97.2584 172.785 99.8282 169.793 100.007C166.8 100.184 164.23 97.9027 164.052 94.9102L162.033 60.0371C162.019 59.9267 162.003 59.8171 161.996 59.7042Z" fill="white"/>
|
|
1017
|
-
</mask>
|
|
1018
|
-
<g mask="url(#mask1_2344_2604)">
|
|
1019
|
-
<path d="M160.725 70.4743C160.725 70.4743 170.178 69.6556 175.821 62.3022C175.821 62.3022 174.782 50.6029 165.844 52.4395C156.906 54.2771 160.725 70.4743 160.725 70.4743Z" fill="#F7E6D5"/>
|
|
1020
|
-
</g>
|
|
1021
|
-
<path d="M164.008 94.4893C163.829 91.4877 166.119 88.9095 169.12 88.731C172.122 88.5524 174.7 90.8417 174.879 93.8433C174.885 93.9562 174.882 94.0667 174.882 94.1771L175.378 131.903L169.543 131.406L164.045 94.8214C164.031 94.711 164.014 94.6022 164.008 94.4893Z" fill="#F3A396"/>
|
|
1022
|
-
<path d="M180.234 143.533C179.372 140.72 178.822 136.962 175.069 129.99C175.067 129.987 175.065 129.984 175.062 129.981L175.067 129.98C174.405 128.711 173.591 127.786 171.481 128.38C169.229 129.014 169.542 131.218 169.542 131.218L170.902 141.931C170.956 142.543 171.273 143.105 171.868 143.258C172.64 143.466 173.375 142.823 173.442 141.923L173.624 139.489C173.624 139.489 174.092 138.615 175.447 140.941C176.807 143.273 178.352 145.852 178.056 147.593C177.761 149.334 177.63 151.702 178.879 151.806C180.129 151.912 181.141 146.492 180.234 143.533Z" fill="#F3A396"/>
|
|
1023
|
-
<path d="M149.396 46.7827C138.982 46.7827 128.748 54.6318 128.748 54.6318L136 75.7339C137.155 79.0951 137.306 82.7203 136.435 86.1661L133.953 95.9807H165.719L162.7 86.4759C161.629 82.9661 161.669 79.2113 162.815 75.7256L170.54 54.9474C170.54 54.9474 160.432 46.7827 149.396 46.7827Z" fill="#F7E6D5"/>
|
|
1024
|
-
<path d="M134.93 50.8313C134.93 50.8313 145.083 64.5683 165.278 51.4997C165.278 51.4997 158.77 47.0176 149.365 46.6605C142.83 46.4114 134.93 50.8313 134.93 50.8313Z" fill="#F3A396"/>
|
|
1025
|
-
<path d="M133.868 69.5197L131.244 61.8865" stroke="#EFE3D8" stroke-width="1.04569" stroke-miterlimit="10"/>
|
|
1026
|
-
<path d="M165.141 69.5288L167.767 61.8865" stroke="#EFE3D8" stroke-width="1.04569" stroke-miterlimit="10"/>
|
|
1027
|
-
<path d="M165.721 95.9817H150.106H149.573H133.957C133.957 95.9817 127.833 105.494 129.387 122.399H149.573H150.106H170.291C171.352 104.097 165.721 95.9817 165.721 95.9817Z" fill="#242930"/>
|
|
1028
|
-
<path d="M138.972 174.134C144.349 174.134 148.706 169.775 148.706 164.4V121.207C148.706 115.831 144.348 111.473 138.972 111.473C133.596 111.473 129.238 115.832 129.238 121.207V164.4C129.238 169.775 133.597 174.134 138.972 174.134Z" fill="#242930"/>
|
|
1029
|
-
<path d="M134.605 216.849L135.36 228.943H144.237V216.849H134.605Z" fill="#F3A396"/>
|
|
1030
|
-
<path d="M145.192 227.725L145.307 235.072H117.658V234.857C117.658 233.165 118.631 231.624 120.159 230.897L133.707 225.491C134.194 225.259 134.82 225.269 135.191 225.661C136.943 227.508 138.865 230.518 144.21 227.252C144.597 227.016 145.106 227.279 145.192 227.725Z" fill="#131321"/>
|
|
1031
|
-
<path d="M117.661 237H145.311V235.072H117.661V237Z" fill="white"/>
|
|
1032
|
-
<path d="M138.972 155.314C133.596 155.314 129.238 159.672 129.238 165.048V220.255H148.707V165.048C148.706 159.672 144.349 155.314 138.972 155.314Z" fill="#242930"/>
|
|
1033
|
-
<path d="M148.71 211.719H128.131V220.255H148.71V211.719Z" fill="#21262D"/>
|
|
1034
|
-
<path d="M160.554 174.134C165.931 174.134 170.288 169.775 170.288 164.4V121.207C170.288 115.831 165.93 111.473 160.554 111.473C155.178 111.473 150.82 115.832 150.82 121.207V164.4C150.82 169.775 155.179 174.134 160.554 174.134Z" fill="#242930"/>
|
|
1035
|
-
<path d="M165.395 216.849L164.641 228.943H155.764V216.849H165.395Z" fill="#F3A396"/>
|
|
1036
|
-
<path d="M154.807 227.725L154.691 235.072H182.341V234.857C182.341 233.165 181.367 231.624 179.84 230.897L166.292 225.491C165.805 225.259 165.178 225.269 164.807 225.661C163.056 227.508 161.134 230.518 155.789 227.252C155.401 227.016 154.893 227.279 154.807 227.725Z" fill="#131321"/>
|
|
1037
|
-
<path d="M182.341 235.072H154.691V237H182.341V235.072Z" fill="white"/>
|
|
1038
|
-
<path d="M160.554 155.314C155.178 155.314 150.82 159.672 150.82 165.048V220.255H170.289V165.048C170.289 159.672 165.931 155.314 160.554 155.314Z" fill="#242930"/>
|
|
1039
|
-
<path d="M171.399 211.719H150.82V220.255H171.399V211.719Z" fill="#21262D"/>
|
|
1040
|
-
<path d="M149.367 52.5674C146.712 52.5674 144.561 50.416 144.561 47.7615V38.436H154.172V47.7607C154.172 50.4152 152.02 52.5674 149.367 52.5674Z" fill="#F3A396"/>
|
|
1041
|
-
<path d="M143.75 37.7584C143.75 37.7584 145.894 42.0529 148.861 42.9206C149.654 43.1523 150.5 43.0734 151.264 42.7604C152.381 42.3029 153.806 41.0466 154.171 39.8152V37.1133C154.171 37.1133 149.137 41.6236 143.75 37.7584Z" fill="#1A1A1A"/>
|
|
1042
|
-
<path d="M149.425 34.7768C156.588 34.7768 162.396 28.7826 162.396 21.3885C162.396 13.9944 156.588 8.00024 149.425 8.00024C142.261 8.00024 136.453 13.9944 136.453 21.3885C136.453 28.7826 142.261 34.7768 149.425 34.7768Z" fill="#6D4A44"/>
|
|
1043
|
-
<path d="M159.489 32.5309C161.678 34.1476 165.466 26.7942 163.332 25.0521C161.198 23.3109 160.028 26.4994 160.028 26.4994L159.469 28.6466L158.881 31.5744V32.2287L159.489 32.5309Z" fill="#F3A396"/>
|
|
1044
|
-
<path d="M162.643 27.2678C162.643 27.2678 161.056 26.7381 159.93 29.0755" stroke="#D26665" stroke-width="0.514843" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1045
|
-
<path d="M160.701 27.9324C160.701 27.9324 162.428 28.8557 161.287 30.2448" stroke="#D26665" stroke-width="0.514843" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1046
|
-
<path d="M160.27 21.432C160.27 26.0395 159.629 30.0159 158.989 32.8374C158.362 35.5999 156.599 37.5313 154.108 39.0848L153.655 39.3679C151.019 41.012 147.613 41.051 144.937 39.4659C142.237 37.8675 140.347 35.761 139.765 32.7959C138.707 27.4037 138.592 21.4311 138.592 21.4311C138.592 21.4311 137.586 9.79986 149.277 10.0257C160.967 10.2524 160.27 21.432 160.27 21.432Z" fill="#F3A396"/>
|
|
1047
|
-
<path d="M139.414 32.5307C137.224 34.1474 133.436 26.794 135.57 25.0519C137.704 23.3107 139.073 26.8388 139.073 26.8388L139.461 28.7618L139.962 31.5567V32.2351L139.414 32.5307Z" fill="#F3A396"/>
|
|
1048
|
-
<path d="M136.262 27.2678C136.262 27.2678 137.848 26.7381 138.975 29.0755" stroke="#D26665" stroke-width="0.514843" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1049
|
-
<path d="M138.206 27.9324C138.206 27.9324 136.479 28.8557 137.62 30.2448" stroke="#D26665" stroke-width="0.514843" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1050
|
-
<path d="M148.387 28.2681V29.5468C148.387 29.6871 148.414 29.8216 148.463 29.9445C148.657 30.4286 149.214 30.6602 149.717 30.5257L150.318 30.2376" stroke="#D26665" stroke-width="0.514843" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1051
|
-
<path d="M145.084 25.7994C145.084 26.3266 144.656 26.7542 144.129 26.7542C143.601 26.7542 143.174 26.3266 143.174 25.7994C143.174 25.2721 143.601 24.8445 144.129 24.8445C144.656 24.8445 145.084 25.2721 145.084 25.7994Z" fill="#1A1A1A"/>
|
|
1052
|
-
<path d="M154.888 25.7994C154.888 26.3266 154.461 26.7542 153.933 26.7542C153.406 26.7542 152.979 26.3266 152.979 25.7994C152.979 25.2721 153.406 24.8445 153.933 24.8445C154.461 24.8445 154.888 25.2721 154.888 25.7994Z" fill="#1A1A1A"/>
|
|
1053
|
-
<path d="M145.533 32.0991C145.533 32.0991 147.097 33.0764 149.16 33.0764C151.223 33.0764 152.787 32.0991 152.787 32.0991" stroke="#D26665" stroke-width="0.514843" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1054
|
-
<path d="M140.502 24.0441C140.502 24.0441 143.455 23.1307 146.382 22.9763C146.382 22.9763 145.465 21.3928 143.628 21.8196C141.791 22.2472 140.502 24.0441 140.502 24.0441Z" fill="#6D4A44"/>
|
|
1055
|
-
<path d="M157.516 24.0441C157.516 24.0441 154.563 23.1307 151.637 22.9763C151.637 22.9763 152.553 21.3928 154.39 21.8196C156.227 22.2472 157.516 24.0441 157.516 24.0441Z" fill="#6D4A44"/>
|
|
1056
|
-
<path d="M161.634 21.4461C161.634 21.4461 160.281 10.861 151.087 9.6321C151.087 9.6321 143.751 9.07661 141.199 12.6852C140.1 13.5637 138.553 15.6669 137.967 18.5864C137.064 23.0926 138.204 22.895 138.204 22.895C138.204 22.895 141.851 21.3937 142.414 16.3719C144.587 18.5582 150.922 22.1792 161.634 21.4461Z" fill="#6D4A44"/>
|
|
1057
|
-
</svg>
|
|
1058
|
-
|
|
1059
|
-
|
|
974
|
+
<div class="card">
|
|
975
|
+
<div class="pill">XactSize x Canada Goose</div>
|
|
976
|
+
<h2 class="title">${n("Let's find your perfect size")}</h2>
|
|
977
|
+
<p class="subtitle">${n("Curated luxury. Perfect fit.")}</p>
|
|
978
|
+
|
|
979
|
+
<div class="tips">
|
|
980
|
+
<h4>${n("Tips")}</h4>
|
|
981
|
+
|
|
982
|
+
${this.renderTip(n("Good Lighting"), n("Avoid backlighting"))}
|
|
983
|
+
${this.renderTip(n("Clean Background"), n("Use a plain wall"))}
|
|
984
|
+
${this.renderTip(n("Clothes"), n("Form-fitting gear"))}
|
|
985
|
+
${this.renderTip(n("Framing"), n("Full body shot"))}
|
|
986
|
+
</div>
|
|
1060
987
|
|
|
988
|
+
<div class="input-group">
|
|
989
|
+
<input
|
|
990
|
+
id="height-input"
|
|
991
|
+
class="height-input"
|
|
992
|
+
type="number"
|
|
993
|
+
min="50"
|
|
994
|
+
max="300"
|
|
995
|
+
placeholder=${n("Enter your height (cm)")}
|
|
996
|
+
required
|
|
997
|
+
tabindex="1"
|
|
998
|
+
/>
|
|
999
|
+
</div>
|
|
1061
1000
|
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1001
|
+
<div class="cta">
|
|
1002
|
+
<xact-button
|
|
1003
|
+
label="${n("Let's get started! →")}"
|
|
1004
|
+
style="--brand-primary: #000;"
|
|
1005
|
+
@click=${this.handleStart}
|
|
1006
|
+
></xact-button>
|
|
1007
|
+
</div>
|
|
1066
1008
|
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1009
|
+
<p class="disclaimer">
|
|
1010
|
+
${n("By using Xactsize, you agree to our Terms and Privacy Policy.")}
|
|
1011
|
+
</p>
|
|
1012
|
+
</div>
|
|
1013
|
+
`;
|
|
1014
|
+
}
|
|
1015
|
+
renderTip(l, A) {
|
|
1016
|
+
return T`
|
|
1017
|
+
<div class="tip">
|
|
1018
|
+
<span class="check">
|
|
1019
|
+
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
1020
|
+
<path d="M5 13l4 4L19 7" />
|
|
1021
|
+
</svg>
|
|
1022
|
+
</span>
|
|
1023
|
+
<div>
|
|
1024
|
+
<strong>${l}</strong>
|
|
1025
|
+
<span>${A}</span>
|
|
1026
|
+
</div>
|
|
1027
|
+
</div>
|
|
1079
1028
|
`;
|
|
1080
1029
|
}
|
|
1081
1030
|
};
|
|
1082
1031
|
E.styles = N`
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
box-sizing: border-box;
|
|
1089
|
-
padding: 16px;
|
|
1090
|
-
width: 100%;
|
|
1091
|
-
}
|
|
1092
|
-
|
|
1093
|
-
.component-content {
|
|
1094
|
-
display: flex;
|
|
1095
|
-
flex-direction: column;
|
|
1096
|
-
gap: 12px;
|
|
1097
|
-
width: 100%;
|
|
1098
|
-
max-width: 960px;
|
|
1099
|
-
}
|
|
1100
|
-
|
|
1101
|
-
.header-section {
|
|
1102
|
-
text-align: left;
|
|
1103
|
-
}
|
|
1104
|
-
|
|
1105
|
-
.header-text {
|
|
1106
|
-
font-size: 24px;
|
|
1107
|
-
font-weight: 700;
|
|
1108
|
-
color: #000;
|
|
1109
|
-
margin-bottom: 8px;
|
|
1110
|
-
line-height: 1.2;
|
|
1111
|
-
}
|
|
1112
|
-
|
|
1113
|
-
.description-text {
|
|
1114
|
-
font-size: 16px;
|
|
1115
|
-
font-weight: 400;
|
|
1116
|
-
color: #333;
|
|
1117
|
-
line-height: 1.6;
|
|
1118
|
-
}
|
|
1119
|
-
|
|
1120
|
-
.main-section {
|
|
1121
|
-
display: flex;
|
|
1122
|
-
flex-direction: row;
|
|
1123
|
-
gap: 24px;
|
|
1124
|
-
}
|
|
1125
|
-
|
|
1126
|
-
.images-section {
|
|
1127
|
-
flex: 1;
|
|
1128
|
-
display: flex;
|
|
1129
|
-
justify-content: center;
|
|
1130
|
-
align-items: center;
|
|
1131
|
-
}
|
|
1132
|
-
|
|
1133
|
-
.images-section svg {
|
|
1134
|
-
width: 100%;
|
|
1135
|
-
max-width: 400px;
|
|
1136
|
-
height: auto;
|
|
1137
|
-
}
|
|
1138
|
-
|
|
1139
|
-
.tips-section {
|
|
1140
|
-
flex: 1;
|
|
1141
|
-
display: flex;
|
|
1142
|
-
flex-direction: column;
|
|
1143
|
-
gap: 8px;
|
|
1032
|
+
:host {
|
|
1033
|
+
display: block;
|
|
1034
|
+
font-family: 'Inter', 'Helvetica', Arial, sans-serif;
|
|
1035
|
+
color: #111;
|
|
1036
|
+
}
|
|
1144
1037
|
|
|
1145
|
-
|
|
1038
|
+
.card {
|
|
1039
|
+
max-width: 560px;
|
|
1040
|
+
margin: 0 auto;
|
|
1041
|
+
padding: 28px 28px 32px;
|
|
1042
|
+
background: #ffffff;
|
|
1043
|
+
border-radius: 24px;
|
|
1044
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
|
1146
1045
|
display: flex;
|
|
1147
1046
|
flex-direction: column;
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
width: 100%;
|
|
1047
|
+
gap: 20px;
|
|
1048
|
+
box-sizing: border-box;
|
|
1151
1049
|
}
|
|
1152
1050
|
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1051
|
+
.pill {
|
|
1052
|
+
align-self: center;
|
|
1053
|
+
padding: 8px 16px;
|
|
1054
|
+
border-radius: 999px;
|
|
1055
|
+
background: #f1f2f3;
|
|
1056
|
+
font-size: 11px;
|
|
1057
|
+
font-weight: 700;
|
|
1058
|
+
letter-spacing: 0.08em;
|
|
1059
|
+
color: #555;
|
|
1060
|
+
text-transform: uppercase;
|
|
1157
1061
|
}
|
|
1158
1062
|
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
border-radius: 6px;
|
|
1166
|
-
box-sizing: border-box;
|
|
1167
|
-
font-family: "Lato", sans-serif;
|
|
1168
|
-
text-align: start;
|
|
1063
|
+
.title {
|
|
1064
|
+
text-align: center;
|
|
1065
|
+
font-size: 26px;
|
|
1066
|
+
font-weight: 700;
|
|
1067
|
+
margin: 0;
|
|
1068
|
+
line-height: 1.2;
|
|
1169
1069
|
}
|
|
1170
1070
|
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1071
|
+
.subtitle {
|
|
1072
|
+
text-align: center;
|
|
1073
|
+
color: #666;
|
|
1074
|
+
margin: 0;
|
|
1075
|
+
font-size: 14px;
|
|
1076
|
+
line-height: 1.5;
|
|
1174
1077
|
}
|
|
1175
|
-
}
|
|
1176
|
-
|
|
1177
|
-
.xact-button {
|
|
1178
|
-
width: 100%;
|
|
1179
|
-
max-width: 150px;
|
|
1180
|
-
display: flex;
|
|
1181
|
-
justify-content: center;
|
|
1182
|
-
align-items: center;
|
|
1183
1078
|
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
}
|
|
1189
|
-
|
|
1190
|
-
.tip-title {
|
|
1191
|
-
font-weight: bold;
|
|
1192
|
-
display: inline-block;
|
|
1193
|
-
margin-bottom: 4px;
|
|
1194
|
-
font-size: 14px;
|
|
1195
|
-
}
|
|
1196
|
-
|
|
1197
|
-
.tip-text {
|
|
1198
|
-
margin-top: 0;
|
|
1199
|
-
font-size: 12px;
|
|
1200
|
-
}
|
|
1201
|
-
|
|
1202
|
-
.buttons {
|
|
1203
|
-
display: flex;
|
|
1204
|
-
flex-direction: column;
|
|
1205
|
-
gap: 12px;
|
|
1206
|
-
align-items: center;
|
|
1207
|
-
justify-content: center;
|
|
1208
|
-
width: 100%;
|
|
1209
|
-
max-width: 200px;
|
|
1210
|
-
margin: 0 auto;
|
|
1211
|
-
}
|
|
1212
|
-
|
|
1213
|
-
/* Ajuste da responsividade para mobile */
|
|
1214
|
-
@media (max-width: 754px) {
|
|
1215
|
-
.main-section {
|
|
1216
|
-
flex-direction: column;
|
|
1217
|
-
gap: 5px; /* menor gap */
|
|
1218
|
-
align-items: center;
|
|
1219
|
-
}
|
|
1220
|
-
|
|
1221
|
-
.images-section {
|
|
1222
|
-
order: -1;
|
|
1223
|
-
width: 100%;
|
|
1224
|
-
}
|
|
1225
|
-
|
|
1226
|
-
.images-section svg {
|
|
1227
|
-
width: 80%; /* reduzir para não quebrar botão */
|
|
1228
|
-
max-width: 180px; /* altura menor */
|
|
1229
|
-
height: auto;
|
|
1230
|
-
}
|
|
1231
|
-
|
|
1232
|
-
.tips-section {
|
|
1233
|
-
width: 100%;
|
|
1234
|
-
gap: 6px;
|
|
1235
|
-
align-items: flex-start; /* alinhar à esquerda */
|
|
1236
|
-
}
|
|
1237
|
-
|
|
1238
|
-
form {
|
|
1239
|
-
align-items: flex-start; /* alinhar labels e inputs à esquerda */
|
|
1240
|
-
width: 100%;
|
|
1241
|
-
}
|
|
1242
|
-
|
|
1243
|
-
input {
|
|
1244
|
-
max-width: 100%;
|
|
1245
|
-
font-size: 14px;
|
|
1246
|
-
padding: 10px;
|
|
1247
|
-
}
|
|
1248
|
-
|
|
1249
|
-
label {
|
|
1250
|
-
text-align: left;
|
|
1251
|
-
font-size: 14px;
|
|
1252
|
-
}
|
|
1253
|
-
|
|
1254
|
-
.xact-button {
|
|
1255
|
-
max-width: 100%;
|
|
1256
|
-
}
|
|
1257
|
-
|
|
1258
|
-
.header-text {
|
|
1259
|
-
font-size: 20px;
|
|
1260
|
-
text-align: center;
|
|
1261
|
-
}
|
|
1262
|
-
|
|
1263
|
-
.description-text {
|
|
1264
|
-
font-size: 14px;
|
|
1265
|
-
text-align: center;
|
|
1266
|
-
}
|
|
1267
|
-
|
|
1268
|
-
.tip-title {
|
|
1269
|
-
font-size: 12px;
|
|
1270
|
-
text-align: left;
|
|
1271
|
-
}
|
|
1272
|
-
|
|
1273
|
-
.tip-text {
|
|
1274
|
-
font-size: 11px;
|
|
1275
|
-
text-align: left;
|
|
1276
|
-
margin-left: 0; /* remove centralização */
|
|
1277
|
-
}
|
|
1278
|
-
|
|
1279
|
-
.tip-item {
|
|
1280
|
-
margin-bottom: 6px;
|
|
1281
|
-
}
|
|
1282
|
-
|
|
1283
|
-
.buttons {
|
|
1284
|
-
gap: 8px;
|
|
1285
|
-
width: 100%;
|
|
1286
|
-
max-width: 100%;
|
|
1287
|
-
margin-top: 12px;
|
|
1288
|
-
}
|
|
1289
|
-
}
|
|
1290
|
-
|
|
1291
|
-
/* Ajuste fino para iPhones muito pequenos */
|
|
1292
|
-
@media (max-width: 380px) {
|
|
1293
|
-
.main-section {
|
|
1294
|
-
gap: 1px;
|
|
1295
|
-
}
|
|
1296
|
-
|
|
1297
|
-
.images-section {
|
|
1298
|
-
order: -1;
|
|
1299
|
-
width: 30%;
|
|
1300
|
-
}
|
|
1301
|
-
|
|
1302
|
-
.images-section svg {
|
|
1303
|
-
width: 80%; /* reduzir para não quebrar botão */
|
|
1304
|
-
max-width: 150px; /* altura menor */
|
|
1305
|
-
height: auto;
|
|
1306
|
-
}
|
|
1079
|
+
.tips {
|
|
1080
|
+
display: grid;
|
|
1081
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
1082
|
+
gap: 12px 16px;
|
|
1083
|
+
}
|
|
1307
1084
|
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1085
|
+
.tips h4 {
|
|
1086
|
+
grid-column: 1 / -1;
|
|
1087
|
+
margin: 4px 0;
|
|
1311
1088
|
font-size: 12px;
|
|
1089
|
+
letter-spacing: 0.08em;
|
|
1090
|
+
text-transform: uppercase;
|
|
1312
1091
|
}
|
|
1313
|
-
|
|
1314
|
-
|
|
1092
|
+
|
|
1093
|
+
.tip {
|
|
1094
|
+
display: flex;
|
|
1095
|
+
gap: 10px;
|
|
1096
|
+
align-items: flex-start;
|
|
1315
1097
|
}
|
|
1316
|
-
}
|
|
1317
|
-
h3 {
|
|
1318
|
-
font-size: 14px;
|
|
1319
|
-
}
|
|
1320
|
-
|
|
1321
1098
|
|
|
1322
|
-
|
|
1099
|
+
|
|
1100
|
+
.check {
|
|
1101
|
+
width: 18px;
|
|
1102
|
+
height: 18px;
|
|
1103
|
+
border-radius: 50%;
|
|
1104
|
+
background: #000;
|
|
1105
|
+
display: inline-flex;
|
|
1106
|
+
align-items: center;
|
|
1107
|
+
justify-content: center;
|
|
1108
|
+
flex-shrink: 0;
|
|
1109
|
+
}
|
|
1323
1110
|
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1111
|
+
.check svg {
|
|
1112
|
+
width: 10px;
|
|
1113
|
+
height: 10px;
|
|
1114
|
+
stroke: #fff;
|
|
1115
|
+
stroke-width: 2.5;
|
|
1116
|
+
fill: none;
|
|
1117
|
+
stroke-linecap: round;
|
|
1118
|
+
stroke-linejoin: round;
|
|
1119
|
+
}
|
|
1327
1120
|
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1121
|
+
.tip strong {
|
|
1122
|
+
display: block;
|
|
1123
|
+
font-size: 14px;
|
|
1124
|
+
margin-bottom: 2px;
|
|
1125
|
+
}
|
|
1332
1126
|
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1127
|
+
.tip span {
|
|
1128
|
+
display: block;
|
|
1129
|
+
font-size: 12px;
|
|
1130
|
+
color: #777;
|
|
1131
|
+
line-height: 1.4;
|
|
1132
|
+
}
|
|
1337
1133
|
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
}
|
|
1134
|
+
.input-group {
|
|
1135
|
+
margin-top: 4px;
|
|
1136
|
+
}
|
|
1342
1137
|
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1138
|
+
.height-input {
|
|
1139
|
+
width: 100%;
|
|
1140
|
+
padding: 14px 16px;
|
|
1141
|
+
border: 1px solid #e0e0e0;
|
|
1142
|
+
border-radius: 12px;
|
|
1143
|
+
background: #f7f7f7;
|
|
1144
|
+
font-size: 14px;
|
|
1145
|
+
color: #111;
|
|
1146
|
+
box-sizing: border-box;
|
|
1147
|
+
}
|
|
1348
1148
|
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1149
|
+
.height-input:focus {
|
|
1150
|
+
outline: none;
|
|
1151
|
+
border-color: #000;
|
|
1152
|
+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
1153
|
+
background: #fff;
|
|
1154
|
+
}
|
|
1352
1155
|
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
margin-top: 1px;
|
|
1358
|
-
}
|
|
1359
|
-
}
|
|
1156
|
+
.cta {
|
|
1157
|
+
margin-top: 8px;
|
|
1158
|
+
width: 100%;
|
|
1159
|
+
}
|
|
1360
1160
|
|
|
1161
|
+
.disclaimer {
|
|
1162
|
+
margin: 0;
|
|
1163
|
+
text-align: center;
|
|
1164
|
+
color: #9a9a9a;
|
|
1165
|
+
font-size: 11px;
|
|
1166
|
+
line-height: 1.4;
|
|
1167
|
+
}
|
|
1361
1168
|
|
|
1362
|
-
|
|
1169
|
+
@media (max-width: 600px) {
|
|
1170
|
+
.card {
|
|
1171
|
+
padding: 22px 18px 26px;
|
|
1172
|
+
}
|
|
1173
|
+
.title {
|
|
1174
|
+
font-size: 22px;
|
|
1175
|
+
}
|
|
1176
|
+
.tips {
|
|
1177
|
+
grid-template-columns: 1fr;
|
|
1178
|
+
}
|
|
1179
|
+
}
|
|
1363
1180
|
`;
|
|
1364
1181
|
kA([
|
|
1365
1182
|
j({ type: Number })
|
|
@@ -1369,14 +1186,14 @@ kA([
|
|
|
1369
1186
|
], E.prototype, "onStartMeasurement", 2);
|
|
1370
1187
|
E = kA([
|
|
1371
1188
|
R("xact-step-one"),
|
|
1372
|
-
|
|
1189
|
+
Y()
|
|
1373
1190
|
], E);
|
|
1374
1191
|
var Ht = Object.getOwnPropertyDescriptor, zt = (l, A, t, r) => {
|
|
1375
1192
|
for (var e = r > 1 ? void 0 : r ? Ht(A, t) : A, p = l.length - 1, V; p >= 0; p--)
|
|
1376
1193
|
(V = l[p]) && (e = V(e) || e);
|
|
1377
1194
|
return e;
|
|
1378
1195
|
};
|
|
1379
|
-
let
|
|
1196
|
+
let yA = class extends X {
|
|
1380
1197
|
render() {
|
|
1381
1198
|
return T`
|
|
1382
1199
|
<footer class="modal-footer">
|
|
@@ -1424,7 +1241,7 @@ let dA = class extends X {
|
|
|
1424
1241
|
`;
|
|
1425
1242
|
}
|
|
1426
1243
|
};
|
|
1427
|
-
|
|
1244
|
+
yA.styles = N`
|
|
1428
1245
|
.modal-footer {
|
|
1429
1246
|
text-align: center;
|
|
1430
1247
|
font-size: 12px;
|
|
@@ -1461,10 +1278,10 @@ dA.styles = N`
|
|
|
1461
1278
|
outline-offset: 2px;
|
|
1462
1279
|
}
|
|
1463
1280
|
`;
|
|
1464
|
-
|
|
1281
|
+
yA = zt([
|
|
1465
1282
|
R("xact-footer"),
|
|
1466
|
-
|
|
1467
|
-
],
|
|
1283
|
+
Y()
|
|
1284
|
+
], yA);
|
|
1468
1285
|
var Gt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, D = (l, A, t, r) => {
|
|
1469
1286
|
for (var e = r > 1 ? void 0 : r ? Ft(A, t) : A, p = l.length - 1, V; p >= 0; p--)
|
|
1470
1287
|
(V = l[p]) && (e = (r ? V(A, t, e) : V(e)) || e);
|
|
@@ -1623,7 +1440,7 @@ D([
|
|
|
1623
1440
|
], P.prototype, "onRetry", 2);
|
|
1624
1441
|
P = D([
|
|
1625
1442
|
R("xact-step-result"),
|
|
1626
|
-
|
|
1443
|
+
Y()
|
|
1627
1444
|
], P);
|
|
1628
1445
|
var Mt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, JA = (l, A, t, r) => {
|
|
1629
1446
|
for (var e = r > 1 ? void 0 : r ? ht(A, t) : A, p = l.length - 1, V; p >= 0; p--)
|
|
@@ -1635,6 +1452,7 @@ let I = class extends X {
|
|
|
1635
1452
|
super(...arguments), this.height = 0;
|
|
1636
1453
|
}
|
|
1637
1454
|
render() {
|
|
1455
|
+
const l = Array.from({ length: 24 }, (A, t) => t);
|
|
1638
1456
|
return T`
|
|
1639
1457
|
<div class="component-content">
|
|
1640
1458
|
<div class="header-section">
|
|
@@ -1770,12 +1588,21 @@ let I = class extends X {
|
|
|
1770
1588
|
</div>
|
|
1771
1589
|
<xact-button class="buttons"
|
|
1772
1590
|
@click=${() => {
|
|
1773
|
-
var
|
|
1774
|
-
(
|
|
1591
|
+
var A;
|
|
1592
|
+
(A = this.onStep2advancement) == null || A.call(this);
|
|
1775
1593
|
}}
|
|
1776
1594
|
label="${n("To start")}"
|
|
1777
1595
|
></xact-button>
|
|
1778
1596
|
</div>
|
|
1597
|
+
<div class="snow-layer">
|
|
1598
|
+
${l.map((A) => {
|
|
1599
|
+
const t = A * 37 % 100, r = A % 6 * 0.35, e = A % 5 * 0.4;
|
|
1600
|
+
return T`<span
|
|
1601
|
+
class="snowflake"
|
|
1602
|
+
style="left:${t}%; animation-delay:${r}s, ${e}s;"
|
|
1603
|
+
></span>`;
|
|
1604
|
+
})}
|
|
1605
|
+
</div>
|
|
1779
1606
|
`;
|
|
1780
1607
|
}
|
|
1781
1608
|
};
|
|
@@ -1788,6 +1615,8 @@ I.styles = N`
|
|
|
1788
1615
|
box-sizing: border-box;
|
|
1789
1616
|
padding: 16px;
|
|
1790
1617
|
width: 100%;
|
|
1618
|
+
position: relative;
|
|
1619
|
+
overflow: hidden;
|
|
1791
1620
|
}
|
|
1792
1621
|
|
|
1793
1622
|
.component-content {
|
|
@@ -1796,6 +1625,8 @@ I.styles = N`
|
|
|
1796
1625
|
gap: 12px;
|
|
1797
1626
|
width: 100%;
|
|
1798
1627
|
max-width: 960px;
|
|
1628
|
+
position: relative;
|
|
1629
|
+
z-index: 1;
|
|
1799
1630
|
}
|
|
1800
1631
|
|
|
1801
1632
|
.header-section {
|
|
@@ -1919,6 +1750,53 @@ I.styles = N`
|
|
|
1919
1750
|
}
|
|
1920
1751
|
}
|
|
1921
1752
|
|
|
1753
|
+
.snow-layer {
|
|
1754
|
+
position: absolute;
|
|
1755
|
+
inset: 0;
|
|
1756
|
+
pointer-events: none;
|
|
1757
|
+
overflow: hidden;
|
|
1758
|
+
z-index: 2;
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
.snowflake {
|
|
1762
|
+
position: absolute;
|
|
1763
|
+
top: -8%;
|
|
1764
|
+
width: 6px;
|
|
1765
|
+
height: 6px;
|
|
1766
|
+
background: #fff;
|
|
1767
|
+
border-radius: 50%;
|
|
1768
|
+
opacity: 0.85;
|
|
1769
|
+
animation: fall 8s linear infinite, drift 5s ease-in-out infinite;
|
|
1770
|
+
}
|
|
1771
|
+
|
|
1772
|
+
.snowflake:nth-child(odd) {
|
|
1773
|
+
width: 4px;
|
|
1774
|
+
height: 4px;
|
|
1775
|
+
opacity: 0.7;
|
|
1776
|
+
animation-duration: 9s, 6s;
|
|
1777
|
+
}
|
|
1778
|
+
|
|
1779
|
+
.snowflake:nth-child(3n) {
|
|
1780
|
+
width: 8px;
|
|
1781
|
+
height: 8px;
|
|
1782
|
+
opacity: 0.9;
|
|
1783
|
+
animation-duration: 7s, 4.5s;
|
|
1784
|
+
}
|
|
1785
|
+
|
|
1786
|
+
.snowflake:nth-child(4n) {
|
|
1787
|
+
animation-delay: 1s, 0.5s;
|
|
1788
|
+
}
|
|
1789
|
+
|
|
1790
|
+
@keyframes fall {
|
|
1791
|
+
from { transform: translateY(-10%); }
|
|
1792
|
+
to { transform: translateY(110%); }
|
|
1793
|
+
}
|
|
1794
|
+
|
|
1795
|
+
@keyframes drift {
|
|
1796
|
+
0%, 100% { transform: translateX(-14px); }
|
|
1797
|
+
50% { transform: translateX(22px); }
|
|
1798
|
+
}
|
|
1799
|
+
|
|
1922
1800
|
`;
|
|
1923
1801
|
JA([
|
|
1924
1802
|
j({ type: Number })
|
|
@@ -1928,18 +1806,18 @@ JA([
|
|
|
1928
1806
|
], I.prototype, "onStep2advancement", 2);
|
|
1929
1807
|
I = JA([
|
|
1930
1808
|
R("xact-step-informs"),
|
|
1931
|
-
|
|
1809
|
+
Y()
|
|
1932
1810
|
], I);
|
|
1933
1811
|
const oA = "data:image/svg+xml,%3csvg%20width='22'%20height='40'%20viewBox='0%200%2022%2040'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M21.517%200L0%2013.3362V0H21.517Z'%20fill='white'/%3e%3cpath%20d='M21.517%2013.339L0%2026.6724V13.3362H21.517V13.339Z'%20fill='white'/%3e%3cpath%20d='M21.517%2026.6755L0%2040.0089V26.6726H21.517V26.6755Z'%20fill='%231C28BA'/%3e%3c/svg%3e", Et = "data:image/svg+xml,%3csvg%20width='22'%20height='41'%20viewBox='0%200%2022%2041'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M21.517%200.00878906L0%2013.345V0.00878906H21.517Z'%20fill='white'/%3e%3cpath%20d='M21.517%2013.3478L0%2026.6812V13.345H21.517V13.3478Z'%20fill='%231C28BA'/%3e%3cpath%20d='M21.517%2026.6843L0%2040.0176V26.6814H21.517V26.6843Z'%20fill='white'/%3e%3c/svg%3e", It = "data:image/svg+xml,%3csvg%20width='22'%20height='41'%20viewBox='0%200%2022%2041'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M21.517%200.0204381L0%2013.3538V0.0175781H21.517V0.0204381Z'%20fill='%231C28BA'/%3e%3cpath%20d='M21.517%2013.3538L0%2026.69V13.3538H21.517Z'%20fill='white'/%3e%3cpath%20d='M21.517%2026.693L0%2040.0264V26.6902H21.517V26.693Z'%20fill='white'/%3e%3c/svg%3e";
|
|
1934
|
-
var wt = Object.defineProperty,
|
|
1935
|
-
for (var e = r > 1 ? void 0 : r ?
|
|
1812
|
+
var wt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, d = (l, A, t, r) => {
|
|
1813
|
+
for (var e = r > 1 ? void 0 : r ? Yt(A, t) : A, p = l.length - 1, V; p >= 0; p--)
|
|
1936
1814
|
(V = l[p]) && (e = (r ? V(A, t, e) : V(e)) || e);
|
|
1937
1815
|
return r && e && wt(A, t, e), e;
|
|
1938
1816
|
};
|
|
1939
1817
|
const { getLocale: gt, setLocale: PA } = Wt({
|
|
1940
1818
|
sourceLocale: IA,
|
|
1941
1819
|
targetLocales: bt,
|
|
1942
|
-
loadLocale: (l) => wA(/* @__PURE__ */ Object.assign({ "./generated/locales/pt-BR.ts": () => import("./pt-BR-
|
|
1820
|
+
loadLocale: (l) => wA(/* @__PURE__ */ Object.assign({ "./generated/locales/pt-BR.ts": () => import("./pt-BR-DJDRIzyB.mjs") }), `./generated/locales/${l}.ts`, 4)
|
|
1943
1821
|
});
|
|
1944
1822
|
let a = class extends X {
|
|
1945
1823
|
constructor() {
|
|
@@ -2122,7 +2000,12 @@ let a = class extends X {
|
|
|
2122
2000
|
}
|
|
2123
2001
|
render() {
|
|
2124
2002
|
return this._isLocaleLoading ? T`<div hidden></div>` : T`
|
|
2125
|
-
<xact-button
|
|
2003
|
+
<xact-button
|
|
2004
|
+
class="launch-btn"
|
|
2005
|
+
style="--brand-primary: #000; --text-inverse: #fff; --brand-primary-hover: #111;"
|
|
2006
|
+
@click=${this.openModal}
|
|
2007
|
+
label="${n("Find your Xactsize")}"
|
|
2008
|
+
></xact-button>
|
|
2126
2009
|
|
|
2127
2010
|
${this.showModal ? T`
|
|
2128
2011
|
<div class="modal">
|
|
@@ -2483,6 +2366,13 @@ a.styles = N`
|
|
|
2483
2366
|
width: 100%;
|
|
2484
2367
|
}
|
|
2485
2368
|
|
|
2369
|
+
xact-button.launch-btn {
|
|
2370
|
+
--brand-primary: #000;
|
|
2371
|
+
--brand-primary-hover: #111;
|
|
2372
|
+
--text-inverse: #fff;
|
|
2373
|
+
--xact-button-radius: 0px;
|
|
2374
|
+
}
|
|
2375
|
+
|
|
2486
2376
|
.video-overlay {
|
|
2487
2377
|
position: absolute;
|
|
2488
2378
|
inset: 4px 4px auto 4px;
|
|
@@ -2617,75 +2507,75 @@ a.styles = N`
|
|
|
2617
2507
|
|
|
2618
2508
|
|
|
2619
2509
|
`;
|
|
2620
|
-
|
|
2510
|
+
d([
|
|
2621
2511
|
j({ type: String, attribute: "api-key" })
|
|
2622
2512
|
], a.prototype, "apiKey", 2);
|
|
2623
|
-
|
|
2513
|
+
d([
|
|
2624
2514
|
j({ type: String, attribute: "tenant-id" })
|
|
2625
2515
|
], a.prototype, "tenantId", 2);
|
|
2626
|
-
|
|
2516
|
+
d([
|
|
2627
2517
|
j({ type: String, attribute: "product-sku" })
|
|
2628
2518
|
], a.prototype, "productSku", 2);
|
|
2629
|
-
|
|
2519
|
+
d([
|
|
2630
2520
|
j({ type: String, attribute: "api-url" })
|
|
2631
2521
|
], a.prototype, "apiUrl", 2);
|
|
2632
|
-
|
|
2522
|
+
d([
|
|
2633
2523
|
j({ type: Function, attribute: "onmeasurementaccepted" })
|
|
2634
2524
|
], a.prototype, "onMeasurementAccepted", 2);
|
|
2635
|
-
|
|
2525
|
+
d([
|
|
2636
2526
|
j({ type: Function, attribute: "onmeasurementcanceled" })
|
|
2637
2527
|
], a.prototype, "onMeasurementCanceled", 2);
|
|
2638
|
-
|
|
2528
|
+
d([
|
|
2639
2529
|
j({ type: String })
|
|
2640
2530
|
], a.prototype, "culture", 1);
|
|
2641
|
-
|
|
2531
|
+
d([
|
|
2642
2532
|
J()
|
|
2643
2533
|
], a.prototype, "errorMap", 1);
|
|
2644
|
-
|
|
2534
|
+
d([
|
|
2645
2535
|
J()
|
|
2646
2536
|
], a.prototype, "measurerKey", 2);
|
|
2647
|
-
|
|
2537
|
+
d([
|
|
2648
2538
|
J()
|
|
2649
2539
|
], a.prototype, "_isLocaleLoading", 2);
|
|
2650
|
-
|
|
2540
|
+
d([
|
|
2651
2541
|
J()
|
|
2652
2542
|
], a.prototype, "showModal", 2);
|
|
2653
|
-
|
|
2543
|
+
d([
|
|
2654
2544
|
J()
|
|
2655
2545
|
], a.prototype, "step", 2);
|
|
2656
|
-
|
|
2546
|
+
d([
|
|
2657
2547
|
J()
|
|
2658
2548
|
], a.prototype, "height", 2);
|
|
2659
|
-
|
|
2549
|
+
d([
|
|
2660
2550
|
J()
|
|
2661
2551
|
], a.prototype, "recommendedSize", 2);
|
|
2662
|
-
|
|
2552
|
+
d([
|
|
2663
2553
|
J()
|
|
2664
2554
|
], a.prototype, "measurements", 2);
|
|
2665
|
-
|
|
2555
|
+
d([
|
|
2666
2556
|
J()
|
|
2667
2557
|
], a.prototype, "errorMessage", 2);
|
|
2668
|
-
|
|
2558
|
+
d([
|
|
2669
2559
|
J()
|
|
2670
2560
|
], a.prototype, "instructionMessage", 2);
|
|
2671
|
-
|
|
2561
|
+
d([
|
|
2672
2562
|
J()
|
|
2673
2563
|
], a.prototype, "shouldStartMeasurement", 2);
|
|
2674
|
-
|
|
2564
|
+
d([
|
|
2675
2565
|
J()
|
|
2676
2566
|
], a.prototype, "isLoading", 2);
|
|
2677
|
-
|
|
2567
|
+
d([
|
|
2678
2568
|
J()
|
|
2679
2569
|
], a.prototype, "isFetching", 2);
|
|
2680
|
-
|
|
2570
|
+
d([
|
|
2681
2571
|
J()
|
|
2682
2572
|
], a.prototype, "cameras", 2);
|
|
2683
|
-
|
|
2573
|
+
d([
|
|
2684
2574
|
J()
|
|
2685
2575
|
], a.prototype, "currentCameraId", 2);
|
|
2686
|
-
a =
|
|
2576
|
+
a = d([
|
|
2687
2577
|
R("body-measurer"),
|
|
2688
|
-
|
|
2578
|
+
Y()
|
|
2689
2579
|
], a);
|
|
2690
2580
|
export {
|
|
2691
2581
|
a as BodyMeasurer,
|