@thefittingroom/shop-ui 1.3.11 → 1.3.13
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/esm/components/SizeRec.d.ts +4 -0
- package/dist/esm/index.js +34 -9
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.min.js +57 -57
- package/package.json +1 -1
|
@@ -24,6 +24,9 @@ export declare class SizeRecComponent {
|
|
|
24
24
|
private tfrSizeRecSelect;
|
|
25
25
|
private tfrSizeRecSize;
|
|
26
26
|
private tfrSizeRecTable;
|
|
27
|
+
private tfrSizeRecTitleToggle;
|
|
28
|
+
private tfrSizeRecSelectContainer;
|
|
29
|
+
private isCollapsed;
|
|
27
30
|
private redraw;
|
|
28
31
|
constructor(sizeRecMainDivId: string, onSignInClick: () => void, onSignOutClick: () => void);
|
|
29
32
|
get sku(): string;
|
|
@@ -43,5 +46,6 @@ export declare class SizeRecComponent {
|
|
|
43
46
|
private renderSizeRecTableRow;
|
|
44
47
|
private renderLoginCta;
|
|
45
48
|
private renderGarmentLocations;
|
|
49
|
+
private toggletSizeRecSelectContainer;
|
|
46
50
|
private render;
|
|
47
51
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* thefittingroom v1.3.
|
|
2
|
+
* thefittingroom v1.3.13 (2024-07-06T01:53:10.344Z)
|
|
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-
|
|
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;position:relative;width:100%}#tfr-size-rec-select-container{align-items:center;display:none;flex-direction:column}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-title-toggle{color:var(--tfr-grey);cursor:pointer;position:absolute;right:0;top:0;transition:all .3s ease}.tfr-chevron-up{transform:rotate(180deg) scaleY(.6)}.tfr-chevron-down{transform:rotate(0deg) scaleY(.6)}#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:370px}.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{flex-grow:1;margin-right:70px;text-align:right}.tfr-size-rec-table-cell-right{flex-grow:2;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;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%}";
|
|
@@ -24171,6 +24171,7 @@ class SizeRecComponent {
|
|
|
24171
24171
|
this.onSignOutClick = onSignOutClick;
|
|
24172
24172
|
this._sku = '';
|
|
24173
24173
|
this.isLoggedIn = false;
|
|
24174
|
+
this.isCollapsed = true;
|
|
24174
24175
|
this.redraw = null;
|
|
24175
24176
|
this.init(sizeRecMainDivId);
|
|
24176
24177
|
}
|
|
@@ -24187,6 +24188,10 @@ class SizeRecComponent {
|
|
|
24187
24188
|
this.tfrSizeRecActionLogout.style.display = 'block';
|
|
24188
24189
|
this.tfrSizeRecTitle.style.display = 'flex';
|
|
24189
24190
|
this.tfrSizeRecSubtitle.style.display = 'block';
|
|
24191
|
+
this.tfrSizeRecSelectContainer.style.display = 'flex';
|
|
24192
|
+
this.isCollapsed = false;
|
|
24193
|
+
this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-up');
|
|
24194
|
+
this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-down');
|
|
24190
24195
|
}
|
|
24191
24196
|
else {
|
|
24192
24197
|
this.tfrSizeRecActionLogin.style.display = 'block';
|
|
@@ -24246,12 +24251,15 @@ class SizeRecComponent {
|
|
|
24246
24251
|
this.tfrSizeRecSize = document.getElementById('tfr-size-rec-size');
|
|
24247
24252
|
this.tfrSizeRecSelect = document.getElementById('tfr-size-rec-select');
|
|
24248
24253
|
this.tfrSizeRecLoading = document.getElementById('tfr-size-rec-loading');
|
|
24254
|
+
this.tfrSizeRecTitleToggle = document.getElementById('tfr-size-rec-title-toggle');
|
|
24255
|
+
this.tfrSizeRecSelectContainer = document.getElementById('tfr-size-rec-select-container');
|
|
24249
24256
|
this.tfrSizeRecommendationsContainer = document.getElementById('tfr-size-recommendations-container');
|
|
24250
24257
|
}
|
|
24251
24258
|
bindEvents() {
|
|
24252
24259
|
this.tfrSizeRecActionLogin.addEventListener('click', this.onSignInClick);
|
|
24253
24260
|
this.tfrSizeRecActionLogout.addEventListener('click', this.onSignOutClick);
|
|
24254
24261
|
this.tfrSizeRecSelect.addEventListener('click', this.onSizeRecSelectClick.bind(this));
|
|
24262
|
+
this.tfrSizeRecTitleToggle.addEventListener('click', this.toggletSizeRecSelectContainer.bind(this));
|
|
24255
24263
|
}
|
|
24256
24264
|
onSizeRecSelectClick(e) {
|
|
24257
24265
|
const target = e.target;
|
|
@@ -24307,6 +24315,20 @@ class SizeRecComponent {
|
|
|
24307
24315
|
this.tfrSizeRecTable.innerHTML = html;
|
|
24308
24316
|
this.tfrSizeRecSize.innerHTML = this.renderLoginCta();
|
|
24309
24317
|
}
|
|
24318
|
+
toggletSizeRecSelectContainer() {
|
|
24319
|
+
if (this.isCollapsed) {
|
|
24320
|
+
this.isCollapsed = false;
|
|
24321
|
+
this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-up');
|
|
24322
|
+
this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-down');
|
|
24323
|
+
this.tfrSizeRecSelectContainer.style.display = 'flex';
|
|
24324
|
+
}
|
|
24325
|
+
else {
|
|
24326
|
+
this.isCollapsed = true;
|
|
24327
|
+
this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-up');
|
|
24328
|
+
this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-down');
|
|
24329
|
+
this.tfrSizeRecSelectContainer.style.display = 'none';
|
|
24330
|
+
}
|
|
24331
|
+
}
|
|
24310
24332
|
render(sizeRecMainDiv) {
|
|
24311
24333
|
const body = `<div id="tfr-size-recommendations">
|
|
24312
24334
|
<div id="tfr-size-rec-loading">
|
|
@@ -24318,7 +24340,8 @@ class SizeRecComponent {
|
|
|
24318
24340
|
</div>
|
|
24319
24341
|
</div>
|
|
24320
24342
|
<div id="tfr-size-recommendations-container">
|
|
24321
|
-
<
|
|
24343
|
+
<div id="tfr-size-rec-title-toggle" class="tfr-chevron-up">v</div>
|
|
24344
|
+
|
|
24322
24345
|
<div id="tfr-size-rec-title">
|
|
24323
24346
|
Recommended Size:
|
|
24324
24347
|
<div id="tfr-size-rec-size">
|
|
@@ -24328,12 +24351,14 @@ class SizeRecComponent {
|
|
|
24328
24351
|
</div>
|
|
24329
24352
|
</div>
|
|
24330
24353
|
|
|
24331
|
-
<div id="tfr-size-rec-select"
|
|
24332
|
-
|
|
24333
|
-
|
|
24334
|
-
|
|
24335
|
-
|
|
24336
|
-
|
|
24354
|
+
<div id="tfr-size-rec-select-container">
|
|
24355
|
+
<div id="tfr-size-rec-select"></div>
|
|
24356
|
+
|
|
24357
|
+
<div id="tfr-size-rec-subtitle">How it fits</div>
|
|
24358
|
+
|
|
24359
|
+
<div id="tfr-size-rec-table"></div>
|
|
24360
|
+
</div>
|
|
24361
|
+
|
|
24337
24362
|
<div id="tfr-size-rec-action">
|
|
24338
24363
|
<div id="tfr-size-rec-action-login">Sign up or login</div>
|
|
24339
24364
|
<div id="tfr-size-rec-action-logout">Sign out of the Fitting Room</div>
|