@thefittingroom/shop-ui 1.3.10 → 1.3.12
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 +30 -9
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.min.js +33 -33
- 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.12 (2024-07-06T01:48:00.929Z)
|
|
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{display:none}#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
|
}
|
|
@@ -24246,12 +24247,15 @@ class SizeRecComponent {
|
|
|
24246
24247
|
this.tfrSizeRecSize = document.getElementById('tfr-size-rec-size');
|
|
24247
24248
|
this.tfrSizeRecSelect = document.getElementById('tfr-size-rec-select');
|
|
24248
24249
|
this.tfrSizeRecLoading = document.getElementById('tfr-size-rec-loading');
|
|
24250
|
+
this.tfrSizeRecTitleToggle = document.getElementById('tfr-size-rec-title-toggle');
|
|
24251
|
+
this.tfrSizeRecSelectContainer = document.getElementById('tfr-size-rec-select-container');
|
|
24249
24252
|
this.tfrSizeRecommendationsContainer = document.getElementById('tfr-size-recommendations-container');
|
|
24250
24253
|
}
|
|
24251
24254
|
bindEvents() {
|
|
24252
24255
|
this.tfrSizeRecActionLogin.addEventListener('click', this.onSignInClick);
|
|
24253
24256
|
this.tfrSizeRecActionLogout.addEventListener('click', this.onSignOutClick);
|
|
24254
24257
|
this.tfrSizeRecSelect.addEventListener('click', this.onSizeRecSelectClick.bind(this));
|
|
24258
|
+
this.tfrSizeRecTitleToggle.addEventListener('click', this.toggletSizeRecSelectContainer.bind(this));
|
|
24255
24259
|
}
|
|
24256
24260
|
onSizeRecSelectClick(e) {
|
|
24257
24261
|
const target = e.target;
|
|
@@ -24307,6 +24311,20 @@ class SizeRecComponent {
|
|
|
24307
24311
|
this.tfrSizeRecTable.innerHTML = html;
|
|
24308
24312
|
this.tfrSizeRecSize.innerHTML = this.renderLoginCta();
|
|
24309
24313
|
}
|
|
24314
|
+
toggletSizeRecSelectContainer() {
|
|
24315
|
+
if (this.isCollapsed) {
|
|
24316
|
+
this.isCollapsed = false;
|
|
24317
|
+
this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-up');
|
|
24318
|
+
this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-down');
|
|
24319
|
+
this.tfrSizeRecSelectContainer.style.display = 'block';
|
|
24320
|
+
}
|
|
24321
|
+
else {
|
|
24322
|
+
this.isCollapsed = true;
|
|
24323
|
+
this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-up');
|
|
24324
|
+
this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-down');
|
|
24325
|
+
this.tfrSizeRecSelectContainer.style.display = 'none';
|
|
24326
|
+
}
|
|
24327
|
+
}
|
|
24310
24328
|
render(sizeRecMainDiv) {
|
|
24311
24329
|
const body = `<div id="tfr-size-recommendations">
|
|
24312
24330
|
<div id="tfr-size-rec-loading">
|
|
@@ -24318,7 +24336,8 @@ class SizeRecComponent {
|
|
|
24318
24336
|
</div>
|
|
24319
24337
|
</div>
|
|
24320
24338
|
<div id="tfr-size-recommendations-container">
|
|
24321
|
-
<
|
|
24339
|
+
<div id="tfr-size-rec-title-toggle" class="tfr-chevron-up">v</div>
|
|
24340
|
+
|
|
24322
24341
|
<div id="tfr-size-rec-title">
|
|
24323
24342
|
Recommended Size:
|
|
24324
24343
|
<div id="tfr-size-rec-size">
|
|
@@ -24328,12 +24347,14 @@ class SizeRecComponent {
|
|
|
24328
24347
|
</div>
|
|
24329
24348
|
</div>
|
|
24330
24349
|
|
|
24331
|
-
<div id="tfr-size-rec-select"
|
|
24332
|
-
|
|
24333
|
-
|
|
24334
|
-
|
|
24335
|
-
|
|
24336
|
-
|
|
24350
|
+
<div id="tfr-size-rec-select-container">
|
|
24351
|
+
<div id="tfr-size-rec-select"></div>
|
|
24352
|
+
|
|
24353
|
+
<div id="tfr-size-rec-subtitle">How it fits</div>
|
|
24354
|
+
|
|
24355
|
+
<div id="tfr-size-rec-table"></div>
|
|
24356
|
+
</div>
|
|
24357
|
+
|
|
24337
24358
|
<div id="tfr-size-rec-action">
|
|
24338
24359
|
<div id="tfr-size-rec-action-login">Sign up or login</div>
|
|
24339
24360
|
<div id="tfr-size-rec-action-logout">Sign out of the Fitting Room</div>
|