@thefittingroom/shop-ui 1.3.8 → 1.3.10
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 +21 -2
- package/dist/esm/index.js +80 -41
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.min.js +48 -48
- package/dist/esm/tfr-size-rec.d.ts +10 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -54,9 +54,17 @@ export type TfrCssVariables = {
|
|
|
54
54
|
|
|
55
55
|
// Size Selector
|
|
56
56
|
sizeSelectorTextColor?: string
|
|
57
|
+
sizeSelectorFontSize?: string
|
|
58
|
+
sizeSelectorFontWeight?: string
|
|
57
59
|
sizeSelectorBgColor?: string
|
|
58
60
|
sizeSelectorBgColorHover?: string
|
|
59
61
|
sizeSelectorBgColorActive?: string
|
|
62
|
+
sizeSelectorButtonHeight?: string
|
|
63
|
+
sizeSelectorButtonActiveHeight?: string
|
|
64
|
+
sizeSelectorButtonBorderColor?: string
|
|
65
|
+
sizeSelectorButtonBorderWidth?: string
|
|
66
|
+
sizeSelectorButtonRadius?: string
|
|
67
|
+
sizeSelectorButtonShadow?: string
|
|
60
68
|
}
|
|
61
69
|
|
|
62
70
|
// UI Hooks
|
|
@@ -101,7 +109,8 @@ tfr.setBrandUserId(brandUserId)
|
|
|
101
109
|
|
|
102
110
|
--tfr-dark: #121212;
|
|
103
111
|
--tfr-grey: #878787;
|
|
104
|
-
--tfr-light-grey: #
|
|
112
|
+
--tfr-light-grey: #dbdcdc;
|
|
113
|
+
--tfr-dark-grey: #3f3f3f;
|
|
105
114
|
|
|
106
115
|
/* Main */
|
|
107
116
|
--tfr-main-border-color: rgba(18, 18, 18, 0.55);
|
|
@@ -123,9 +132,19 @@ tfr.setBrandUserId(brandUserId)
|
|
|
123
132
|
|
|
124
133
|
/* Size Selector */
|
|
125
134
|
--tfr-size-selector-text-color: var(--tfr-white);
|
|
135
|
+
--tfr-size-selector-font-size: 14px;
|
|
136
|
+
--tfr-size-selector-font-weight: 400;
|
|
137
|
+
--tfr-size-selector-border-color: transparent;
|
|
138
|
+
--tfr-size-selector-border-width: 0;
|
|
126
139
|
--tfr-size-selector-bg-color: var(--tfr-grey);
|
|
127
|
-
--tfr-size-selector-bg-color-hover: var(--tfr-
|
|
140
|
+
--tfr-size-selector-bg-color-hover: var(--tfr-dark-grey);
|
|
128
141
|
--tfr-size-selector-bg-color-active: var(--tfr-dark);
|
|
142
|
+
--tfr-size-selector-button-height: 35px;
|
|
143
|
+
--tfr-size-selector-button-active-height: 45px;
|
|
144
|
+
--tfr-size-selector-button-active-border-color: transparent;
|
|
145
|
+
--tfr-size-selector-button-active-border-width: 0;
|
|
146
|
+
--tfr-size-selector-button-radius: 8px;
|
|
147
|
+
--tfr-size-selector-button-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
|
|
129
148
|
}
|
|
130
149
|
```
|
|
131
150
|
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* thefittingroom v1.3.
|
|
2
|
+
* thefittingroom v1.3.10 (2024-07-05T18:58:03.054Z)
|
|
3
3
|
* Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
|
|
4
4
|
*/
|
|
5
5
|
function loadImageRecursive(imageURL, imageURLs) {
|
|
@@ -23577,7 +23577,7 @@ n(css$6,{});
|
|
|
23577
23577
|
var css$5 = "@media screen and (max-width:702px){.tfr-modal-title-logo-container{display:flex;flex-direction:column}}@media screen and (min-width:600px){.tfr-modal-content-container{border-radius:10px;height:auto}}@media screen and (max-width:599px){.tfr-mobile-hidden{display:none}.tfr-modal-content-container{min-height:100vh}.trf-logo-title{margin-bottom:10px}.tfr-modal-content-flex{height:calc(100vh - 76px)}}@media screen and (max-width:500px){.tfr-fieldset{width:90%}.tfr-how-it-works-item{flex-direction:column}.tfr-try-on-content{margin-left:0;margin-top:20px}}";
|
|
23578
23578
|
n(css$5,{});
|
|
23579
23579
|
|
|
23580
|
-
var css$4 = "#tfr-size-recommendations{background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;font-family:var(--tfr-main-font);padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations,#tfr-size-recommendations-container{align-items:center;flex-direction:column;justify-content:center}#tfr-size-recommendations-container{display:none;width:100%}#tfr-size-rec-login-svg{display:none}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-subtitle{font-family:var(--tfr-subtitle-font);
|
|
23580
|
+
var css$4 = "#tfr-size-recommendations{background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;font-family:var(--tfr-main-font);padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations,#tfr-size-recommendations-container{align-items:center;flex-direction:column;justify-content:center}#tfr-size-recommendations-container{display:none;width:100%}#tfr-size-rec-login-svg{display:none}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-subtitle{background-color:var(--tfr-grey);border-radius:4px;color:var(--tfr-white);font-family:var(--tfr-subtitle-font);padding:8px;text-align:center;width:100%}#tfr-size-rec-subtitle,#tfr-size-rec-title{font-size:14px}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;width:100%}.tfr-size-rec-table-row:first-of-type{border-top-width:0}.tfr-size-rec-table-row{align-items:center;border-top:var(--tfr-main-border-width) solid var(--tfr-main-border-color);display:flex;font-family:var(--tfr-row-font);height:40px;justify-content:center}.tfr-size-rec-table-cell-left,.tfr-size-rec-table-cell-right{flex:1 1 0px}.tfr-size-rec-table-cell-left{margin-right:70px;text-align:right}.tfr-size-rec-table-cell-right{margin-left:16px}.tfr-size-rec-table-cell-right.perfect{color:var(--tfr-brand-color)}#tfr-size-rec-size{display:inline-block}#tfr-size-rec-size>.tfr-size-rec-login-cta{font-weight:500;margin-left:10px}.tfr-size-rec-login-cta,.tfr-size-rec-table-cell-right{font-size:12px}.tfr-size-rec-login-cta{color:var(--tfr-muted);display:flex}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none;font-family:var(--tfr-cta-font)}#tfr-size-rec-action{cursor:pointer;font-size:16px;margin-top:14px;text-decoration:underline}#tfr-size-rec-select{background-color:var(--tfr-size-selector-bg-color);border-color:var(--tfr-size-selector-border-color);border-radius:var(--tfr-size-selector-button-radius);border-style:solid;border-width:var(--tfr-size-selector-border-width);box-shadow:var(--tfr-size-selector-button-shadow);color:var(--tfr-size-selector-text-color);display:none;font-size:var(--tfr-size-selector-font-size);font-weight:var(--tfr-size-selector-font-weight);margin-bottom:20px;margin-top:10px}#tfr-size-rec-select,.tfr-size-rec-select-button{align-items:center;height:var(--tfr-size-selector-button-height);justify-content:center}.tfr-size-rec-select-button{cursor:pointer;display:flex;transition:all .15s ease-in;width:80px}.tfr-size-rec-select-button:hover:not(.active){background-color:var(--tfr-size-selector-bg-color-hover);opacity:.7}.tfr-size-rec-select-button.active{background-color:var(--tfr-size-selector-bg-color-active);border-color:var(--tfr-size-selector-button-active-border-color);border-style:solid;border-width:var(--tfr-size-selector-button-active-border-width);height:var(--tfr-size-selector-button-active-height)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:first-of-type{border-bottom-left-radius:var(--tfr-size-selector-button-radius);border-top-left-radius:var(--tfr-size-selector-button-radius)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:last-of-type{border-bottom-right-radius:var(--tfr-size-selector-button-radius);border-top-right-radius:var(--tfr-size-selector-button-radius)}.tfr-powered-by{align-items:center;display:flex;font-size:10px;margin-top:10px}.tfr-powered-by-logo{margin:0 4px}.tfr-powered-by-logo,.tfr-powered-by-logo img{height:24px}.tfr-powered-by-text-bold{font-weight:700}#tfr-size-recommendation-error{color:#8d0000;display:none}";
|
|
23581
23581
|
n(css$4,{});
|
|
23582
23582
|
|
|
23583
23583
|
var css$3 = ".tfr-mt-10{margin-top:10px}.tfr-mt-20{margin-top:20px}.tfr-mt-15{margin-top:15px}.tfr-mt-30{margin-top:30px}.mt-40{margin-top:40px}.tfr-mb-40{margin-bottom:40px}.tfr-mb-20{margin-bottom:20px}.tfr-mr-10{margin-right:10px}.tfr-mr-15{margin-right:15px}.tfr-mt-50{margin-top:50px}.tfr-mt-60{margin-top:60px}.tfr-mb-60{margin-bottom:60px}.tfr-mr-20{margin-right:20px}.tfr-mt-15-p{margin-top:15%}.tfr-mb-13-p{margin-bottom:13%}.tfr-m-h-auto{margin-left:auto;margin-right:auto}.tfr-pt-20{padding-top:20px}.tfr-pb-50{padding-bottom:50px}.tfr-p-20{padding:20px}.tfr-pr-20{padding-right:20px}.tfr-pl-20{padding-left:20px}.tfr-pb-7-p{padding-bottom:7%}";
|
|
@@ -23589,7 +23589,7 @@ n(css$2,{});
|
|
|
23589
23589
|
var css$1 = ".tfr-title-font{font-family:Poppins,sans-serif}.tfr-body-font{font-family:Roboto,sans-serif}.tfr-light-24-300{font-size:24px;font-weight:300}.tfr-light-24-500{font-size:24px;font-weight:500}.tfr-light-22-300{font-size:22px;font-weight:300}.tfr-light-16-300{font-size:16px;font-weight:300}.tfr-medium-16-default{font-size:16px}.tfr-12-default{font-size:12px}.tfr-14-default{font-size:14px}.tfr-16-default{font-size:16px}";
|
|
23590
23590
|
n(css$1,{});
|
|
23591
23591
|
|
|
23592
|
-
var css = ":root{--tfr-brand-color:#209da7;--tfr-black:#000;--tfr-red:red;--tfr-white:#fff;--tfr-muted:#a7a7a7;--tfr-dark:#121212;--tfr-grey:#878787;--tfr-light-grey:#
|
|
23592
|
+
var css = ":root{--tfr-brand-color:#209da7;--tfr-black:#000;--tfr-red:red;--tfr-white:#fff;--tfr-muted:#a7a7a7;--tfr-dark:#121212;--tfr-grey:#878787;--tfr-light-grey:#dbdcdc;--tfr-dark-grey:#3f3f3f;--tfr-main-border-color:hsla(0,0%,7%,.55);--tfr-main-border-radius:0;--tfr-main-border-width:1px;--tfr-main-bg-color:inherit;--tfr-main-width:440px;--tfr-main-v-padding:14px;--tfr-main-h-padding:20px;--tfr-main-font:inherit;--tfr-title-font:var(--tfr-main-font);--tfr-subtitle-font:var(--tfr-main-font);--tfr-row-font:var(--tfr-main-font);--tfr-cta-font:var(--tfr-main-font);--tfr-size-selector-text-color:var(--tfr-white);--tfr-size-selector-font-size:14px;--tfr-size-selector-font-weight:400;--tfr-size-selector-border-color:transparent;--tfr-size-selector-border-width:0;--tfr-size-selector-bg-color:var(--tfr-grey);--tfr-size-selector-bg-color-hover:var(--tfr-dark-grey);--tfr-size-selector-bg-color-active:var(--tfr-dark);--tfr-size-selector-button-height:35px;--tfr-size-selector-button-active-height:45px;--tfr-size-selector-button-active-border-color:transparent;--tfr-size-selector-button-active-border-width:0;--tfr-size-selector-button-radius:8px;--tfr-size-selector-button-shadow:0 4px 4px 0 rgba(0,0,0,.3)}";
|
|
23593
23593
|
n(css,{});
|
|
23594
23594
|
|
|
23595
23595
|
const ErrorModal = (props) => {
|
|
@@ -23601,12 +23601,14 @@ const ErrorModal = (props) => {
|
|
|
23601
23601
|
props.onClose();
|
|
23602
23602
|
};
|
|
23603
23603
|
const Hook = () => {
|
|
23604
|
-
|
|
23605
|
-
document.getElementById('tfr-
|
|
23604
|
+
var _a, _b;
|
|
23605
|
+
(_a = document.getElementById('tfr-back')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', onNavBack);
|
|
23606
|
+
(_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', onClose);
|
|
23606
23607
|
};
|
|
23607
23608
|
const Unhook = () => {
|
|
23608
|
-
|
|
23609
|
-
document.getElementById('tfr-
|
|
23609
|
+
var _a, _b;
|
|
23610
|
+
(_a = document.getElementById('tfr-back')) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', onNavBack);
|
|
23611
|
+
(_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', onClose);
|
|
23610
23612
|
};
|
|
23611
23613
|
const Body = () => {
|
|
23612
23614
|
if (!error) {
|
|
@@ -23640,12 +23642,14 @@ const ForgotPasswordModal = (props) => {
|
|
|
23640
23642
|
props.onPasswordReset(email);
|
|
23641
23643
|
};
|
|
23642
23644
|
const Hook = () => {
|
|
23643
|
-
|
|
23644
|
-
document.getElementById('tfr-
|
|
23645
|
+
var _a, _b;
|
|
23646
|
+
(_a = document.getElementById('tfr-send-password-reset')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', onPasswordReset);
|
|
23647
|
+
(_b = document.getElementById('tfr-back-to-signin')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', onNavSignIn);
|
|
23645
23648
|
};
|
|
23646
23649
|
const Unhook = () => {
|
|
23647
|
-
|
|
23648
|
-
document.getElementById('tfr-
|
|
23650
|
+
var _a, _b;
|
|
23651
|
+
(_a = document.getElementById('tfr-send-password-reset')) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', onPasswordReset);
|
|
23652
|
+
(_b = document.getElementById('tfr-back-to-signin')) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', onNavSignIn);
|
|
23649
23653
|
};
|
|
23650
23654
|
const Body = () => {
|
|
23651
23655
|
return `
|
|
@@ -23711,12 +23715,14 @@ const LoggedOutModal = (props) => {
|
|
|
23711
23715
|
props.onClose();
|
|
23712
23716
|
};
|
|
23713
23717
|
const Hook = () => {
|
|
23714
|
-
|
|
23715
|
-
document.getElementById('tfr-
|
|
23718
|
+
var _a, _b;
|
|
23719
|
+
(_a = document.getElementById('tfr-sign-in')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', onNavSignIn);
|
|
23720
|
+
(_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', onClose);
|
|
23716
23721
|
};
|
|
23717
23722
|
const Unhook = () => {
|
|
23718
|
-
|
|
23719
|
-
document.getElementById('tfr-
|
|
23723
|
+
var _a, _b;
|
|
23724
|
+
(_a = document.getElementById('tfr-sign-in')) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', onNavSignIn);
|
|
23725
|
+
(_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', onClose);
|
|
23720
23726
|
};
|
|
23721
23727
|
const Body = () => {
|
|
23722
23728
|
return `
|
|
@@ -23856,14 +23862,16 @@ const ScanCodeModal = (props) => {
|
|
|
23856
23862
|
window.open('https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace', '_blank');
|
|
23857
23863
|
};
|
|
23858
23864
|
const onHook = () => {
|
|
23859
|
-
|
|
23860
|
-
document.getElementById('tfr-
|
|
23861
|
-
document.getElementById('tfr-
|
|
23865
|
+
var _a, _b, _c;
|
|
23866
|
+
(_a = document.getElementById('tfr-sign-in-nav')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', onSignInNav);
|
|
23867
|
+
(_b = document.getElementById('tfr-app-store')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', onCtaClickApple);
|
|
23868
|
+
(_c = document.getElementById('tfr-google-play')) === null || _c === void 0 ? void 0 : _c.addEventListener('click', onCtaClickGoogle);
|
|
23862
23869
|
};
|
|
23863
23870
|
const onUnhook = () => {
|
|
23864
|
-
|
|
23865
|
-
document.getElementById('tfr-
|
|
23866
|
-
document.getElementById('tfr-
|
|
23871
|
+
var _a, _b, _c;
|
|
23872
|
+
(_a = document.getElementById('tfr-sign-in-nav')) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', onSignInNav);
|
|
23873
|
+
(_b = document.getElementById('tfr-app-store')) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', onCtaClickApple);
|
|
23874
|
+
(_c = document.getElementById('tfr-google-play')) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', onCtaClickGoogle);
|
|
23867
23875
|
};
|
|
23868
23876
|
const renderCtaText = () => (isMobile ? L.ClickHereToDownload : L.ScanQrToDownload);
|
|
23869
23877
|
const renderImages = () => {
|
|
@@ -23919,16 +23927,18 @@ const SignInModal = (props) => {
|
|
|
23919
23927
|
props.onNavScanCode();
|
|
23920
23928
|
};
|
|
23921
23929
|
const onHook = () => {
|
|
23922
|
-
|
|
23923
|
-
document.getElementById('tfr-sign-in').addEventListener('
|
|
23924
|
-
document.getElementById('tfr-
|
|
23925
|
-
document.getElementById('tfr-
|
|
23930
|
+
var _a, _b, _c, _d;
|
|
23931
|
+
(_a = document.getElementById('tfr-sign-in-form')) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', onSignIn);
|
|
23932
|
+
(_b = document.getElementById('tfr-sign-in')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', onSignIn);
|
|
23933
|
+
(_c = document.getElementById('tfr-forgot-password')) === null || _c === void 0 ? void 0 : _c.addEventListener('click', onNavForgotPassword);
|
|
23934
|
+
(_d = document.getElementById('tfr-scan-code')) === null || _d === void 0 ? void 0 : _d.addEventListener('click', onNavScanCode);
|
|
23926
23935
|
};
|
|
23927
23936
|
const onUnhook = () => {
|
|
23928
|
-
|
|
23929
|
-
document.getElementById('tfr-sign-in').removeEventListener('
|
|
23930
|
-
document.getElementById('tfr-
|
|
23931
|
-
document.getElementById('tfr-
|
|
23937
|
+
var _a, _b, _c, _d;
|
|
23938
|
+
(_a = document.getElementById('tfr-sign-in-form')) === null || _a === void 0 ? void 0 : _a.removeEventListener('submit', onSignIn);
|
|
23939
|
+
(_b = document.getElementById('tfr-sign-in')) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', onSignIn);
|
|
23940
|
+
(_c = document.getElementById('tfr-forgot-password')) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', onNavForgotPassword);
|
|
23941
|
+
(_d = document.getElementById('tfr-scan-code')) === null || _d === void 0 ? void 0 : _d.removeEventListener('click', onNavScanCode);
|
|
23932
23942
|
};
|
|
23933
23943
|
const resetValidation = () => {
|
|
23934
23944
|
const fieldsetElement = document.querySelectorAll('.tfr-fieldset-element');
|
|
@@ -23999,12 +24009,14 @@ const SizeErrorModal = (props) => {
|
|
|
23999
24009
|
props.onClose();
|
|
24000
24010
|
};
|
|
24001
24011
|
const Hook = () => {
|
|
24002
|
-
|
|
24003
|
-
document.getElementById('tfr-
|
|
24012
|
+
var _a, _b;
|
|
24013
|
+
(_a = document.getElementById('tfr-back')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', onNavBack);
|
|
24014
|
+
(_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', onClose);
|
|
24004
24015
|
};
|
|
24005
24016
|
const Unhook = () => {
|
|
24006
|
-
|
|
24007
|
-
document.getElementById('tfr-
|
|
24017
|
+
var _a, _b;
|
|
24018
|
+
(_a = document.getElementById('tfr-back')) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', onNavBack);
|
|
24019
|
+
(_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', onClose);
|
|
24008
24020
|
};
|
|
24009
24021
|
const Body = () => {
|
|
24010
24022
|
var _a, _b, _c;
|
|
@@ -24038,6 +24050,7 @@ const TryOnModal = (props) => {
|
|
|
24038
24050
|
props.onClose();
|
|
24039
24051
|
};
|
|
24040
24052
|
const Hook = () => {
|
|
24053
|
+
var _a, _b;
|
|
24041
24054
|
const tryOnImage = document.getElementById('tfr-tryon-image');
|
|
24042
24055
|
const onChange = (slider, imageUrl) => {
|
|
24043
24056
|
console.debug('slider change', slider, imageUrl);
|
|
@@ -24052,13 +24065,14 @@ const TryOnModal = (props) => {
|
|
|
24052
24065
|
}
|
|
24053
24066
|
close = e;
|
|
24054
24067
|
}
|
|
24055
|
-
document.getElementById('tfr-back').addEventListener('click', onNavBack);
|
|
24056
|
-
document.getElementById('tfr-close').addEventListener('click', onClose);
|
|
24068
|
+
(_a = document.getElementById('tfr-back')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', onNavBack);
|
|
24069
|
+
(_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', onClose);
|
|
24057
24070
|
};
|
|
24058
24071
|
const Unhook = () => {
|
|
24072
|
+
var _a, _b;
|
|
24059
24073
|
close();
|
|
24060
|
-
document.getElementById('tfr-back').removeEventListener('click', onNavBack);
|
|
24061
|
-
document.getElementById('tfr-close').removeEventListener('click', onClose);
|
|
24074
|
+
(_a = document.getElementById('tfr-back')) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', onNavBack);
|
|
24075
|
+
(_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', onClose);
|
|
24062
24076
|
};
|
|
24063
24077
|
const Body = () => {
|
|
24064
24078
|
return `
|
|
@@ -24171,12 +24185,16 @@ class SizeRecComponent {
|
|
|
24171
24185
|
if (isLoggedIn) {
|
|
24172
24186
|
this.tfrSizeRecActionLogin.style.display = 'none';
|
|
24173
24187
|
this.tfrSizeRecActionLogout.style.display = 'block';
|
|
24174
|
-
this.tfrSizeRecTitle.style.display = '
|
|
24188
|
+
this.tfrSizeRecTitle.style.display = 'flex';
|
|
24175
24189
|
this.tfrSizeRecSubtitle.style.display = 'block';
|
|
24176
24190
|
}
|
|
24177
24191
|
else {
|
|
24178
24192
|
this.tfrSizeRecActionLogin.style.display = 'block';
|
|
24179
24193
|
this.tfrSizeRecActionLogout.style.display = 'none';
|
|
24194
|
+
this.tfrSizeRecTitle.style.display = 'flex';
|
|
24195
|
+
this.tfrSizeRecSubtitle.style.display = 'block';
|
|
24196
|
+
this.tfrSizeRecommendationError.style.display = 'none';
|
|
24197
|
+
this.tfrSizeRecommendationError.innerHTML = '';
|
|
24180
24198
|
}
|
|
24181
24199
|
}
|
|
24182
24200
|
setLoading(isLoading) {
|
|
@@ -24279,7 +24297,7 @@ class SizeRecComponent {
|
|
|
24279
24297
|
</div>`;
|
|
24280
24298
|
}
|
|
24281
24299
|
renderLoginCta() {
|
|
24282
|
-
return `<div class="tfr-size-rec-login-cta"><img src="${loginIconSrc}" />
|
|
24300
|
+
return `<div class="tfr-size-rec-login-cta"><img src="${loginIconSrc}" /> Signup or login to view</div>`;
|
|
24283
24301
|
}
|
|
24284
24302
|
renderGarmentLocations(locations) {
|
|
24285
24303
|
const html = locations
|
|
@@ -24305,7 +24323,7 @@ class SizeRecComponent {
|
|
|
24305
24323
|
Recommended Size:
|
|
24306
24324
|
<div id="tfr-size-rec-size">
|
|
24307
24325
|
<div class="tfr-size-rec-login-cta">
|
|
24308
|
-
<img src="${loginIconSrc}" />
|
|
24326
|
+
<img src="${loginIconSrc}" /> Signup or login to view
|
|
24309
24327
|
</div>
|
|
24310
24328
|
</div>
|
|
24311
24329
|
</div>
|
|
@@ -24317,7 +24335,7 @@ class SizeRecComponent {
|
|
|
24317
24335
|
<div id="tfr-size-rec-table"></div>
|
|
24318
24336
|
|
|
24319
24337
|
<div id="tfr-size-rec-action">
|
|
24320
|
-
<div id="tfr-size-rec-action-login">
|
|
24338
|
+
<div id="tfr-size-rec-action-login">Sign up or login</div>
|
|
24321
24339
|
<div id="tfr-size-rec-action-logout">Sign out of the Fitting Room</div>
|
|
24322
24340
|
</div>
|
|
24323
24341
|
|
|
@@ -24470,14 +24488,35 @@ class TfrSizeRec {
|
|
|
24470
24488
|
r.style.setProperty('--tfr-row-font', cssVariables.rowFont);
|
|
24471
24489
|
if (cssVariables.ctaFont)
|
|
24472
24490
|
r.style.setProperty('--tfr-cta-font', cssVariables.ctaFont);
|
|
24491
|
+
// Size Selector
|
|
24473
24492
|
if (cssVariables.sizeSelectorTextColor)
|
|
24474
24493
|
r.style.setProperty('--tfr-size-selector-text-color', cssVariables.sizeSelectorTextColor);
|
|
24494
|
+
if (cssVariables.sizeSelectorFontSize)
|
|
24495
|
+
r.style.setProperty('--tfr-size-selector-font-size', cssVariables.sizeSelectorFontSize);
|
|
24496
|
+
if (cssVariables.sizeSelectorFontWeight)
|
|
24497
|
+
r.style.setProperty('--tfr-size-selector-font-weight', cssVariables.sizeSelectorFontWeight);
|
|
24475
24498
|
if (cssVariables.sizeSelectorBgColor)
|
|
24476
24499
|
r.style.setProperty('--tfr-size-selector-bg-color', cssVariables.sizeSelectorBgColor);
|
|
24500
|
+
if (cssVariables.sizeSelectorBorderColor)
|
|
24501
|
+
r.style.setProperty('--tfr-size-selector-border-color', cssVariables.sizeSelectorBorderColor);
|
|
24502
|
+
if (cssVariables.sizeSelectorBorderWidth)
|
|
24503
|
+
r.style.setProperty('--tfr-size-selector-border-width', cssVariables.sizeSelectorBorderWidth);
|
|
24477
24504
|
if (cssVariables.sizeSelectorBgColorHover)
|
|
24478
24505
|
r.style.setProperty('--tfr-size-selector-bg-color-hover', cssVariables.sizeSelectorBgColorHover);
|
|
24479
24506
|
if (cssVariables.sizeSelectorBgColorActive)
|
|
24480
24507
|
r.style.setProperty('--tfr-size-selector-bg-color-active', cssVariables.sizeSelectorBgColorActive);
|
|
24508
|
+
if (cssVariables.sizeSelectorButtonHeight)
|
|
24509
|
+
r.style.setProperty('--tfr-size-selector-button-height', cssVariables.sizeSelectorButtonHeight);
|
|
24510
|
+
if (cssVariables.sizeSelectorButtonActiveHeight)
|
|
24511
|
+
r.style.setProperty('--tfr-size-selector-button-active-height', cssVariables.sizeSelectorButtonActiveHeight);
|
|
24512
|
+
if (cssVariables.sizeSelectorButtonActiveBorderColor)
|
|
24513
|
+
r.style.setProperty('--tfr-size-selector-button-active-border-color', cssVariables.sizeSelectorButtonActiveBorderColor);
|
|
24514
|
+
if (cssVariables.sizeSelectorButtonActiveBorderWidth)
|
|
24515
|
+
r.style.setProperty('--tfr-size-selector-button-active-border-width', cssVariables.sizeSelectorButtonActiveBorderWidth);
|
|
24516
|
+
if (cssVariables.sizeSelectorButtonRadius)
|
|
24517
|
+
r.style.setProperty('--tfr-size-selector-button-radius', cssVariables.sizeSelectorButtonRadius);
|
|
24518
|
+
if (cssVariables.sizeSelectorButtonShadow)
|
|
24519
|
+
r.style.setProperty('--tfr-size-selector-button-shadow', cssVariables.sizeSelectorButtonShadow);
|
|
24481
24520
|
}
|
|
24482
24521
|
}
|
|
24483
24522
|
|