@thefittingroom/shop-ui 3.0.0 → 3.1.0

package/.rollup.cache/home/runner/work/shop-sdk-ui/shop-sdk-ui/dist/esm/components/Modals/SignInModal.js

@@ -0,0 +1,94 @@
+import { L } from '../locale';
+const SignInModal = (props) => {
+    const { email } = props;
+    const onSignIn = (e) => {
+        e.preventDefault();
+        const email = document.getElementById('email-input').value;
+        const password = document.getElementById('password-input').value;
+        resetValidation();
+        props.onSignIn(email, password, validationError);
+    };
+    const onNavForgotPassword = () => {
+        const email = document.getElementById('email-input').value;
+        props.onNavForgotPassword(email);
+    };
+    const onNavScanCode = () => {
+        props.onNavScanCode();
+    };
+    const onHook = () => {
+        var _a, _b, _c, _d;
+        (_a = document.getElementById('tfr-sign-in-form')) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', onSignIn);
+        (_b = document.getElementById('tfr-sign-in')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', onSignIn);
+        (_c = document.getElementById('tfr-forgot-password')) === null || _c === void 0 ? void 0 : _c.addEventListener('click', onNavForgotPassword);
+        (_d = document.getElementById('tfr-scan-code')) === null || _d === void 0 ? void 0 : _d.addEventListener('click', onNavScanCode);
+    };
+    const onUnhook = () => {
+        var _a, _b, _c, _d;
+        (_a = document.getElementById('tfr-sign-in-form')) === null || _a === void 0 ? void 0 : _a.removeEventListener('submit', onSignIn);
+        (_b = document.getElementById('tfr-sign-in')) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', onSignIn);
+        (_c = document.getElementById('tfr-forgot-password')) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', onNavForgotPassword);
+        (_d = document.getElementById('tfr-scan-code')) === null || _d === void 0 ? void 0 : _d.removeEventListener('click', onNavScanCode);
+    };
+    const resetValidation = () => {
+        const fieldsetElement = document.querySelectorAll('.tfr-fieldset-element');
+        fieldsetElement.forEach((element) => {
+            element.classList.remove('tfr-fieldset-err');
+        });
+        const labelElement = document.querySelectorAll('.tfr-label-element');
+        labelElement.forEach((element) => {
+            element.classList.remove('tfr-c-red');
+        });
+        const formError = document.querySelector('#tfr-form-error');
+        formError.classList.remove('tfr-d-block');
+        formError.innerHTML = '';
+    };
+    const validationError = (message) => {
+        const fieldsetElement = document.querySelectorAll('.tfr-fieldset-element');
+        fieldsetElement.forEach((element) => {
+            element.classList.add('tfr-fieldset-err');
+        });
+        const labelElement = document.querySelectorAll('.tfr-label-element');
+        labelElement.forEach((element) => {
+            element.classList.add('tfr-c-red');
+        });
+        const formError = document.querySelector('#tfr-form-error');
+        formError.innerHTML = message || 'Something went wrong';
+        formError.classList.add('tfr-d-block');
+    };
+    const body = () => {
+        return `
+            <form id="tfr-sign-in-form">
+              <div class="tfr-title-font tfr-light-22-300 tfr-mt-10">${L.SignIn}</div>
+
+              <fieldset class="tfr-fieldset-element tfr-fieldset tfr-mt-20">
+                  <legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-black-o5">${L.EmailAddress}</legend>
+                  <input tfr-element="true" type="email" id="email-input" value="${email || ''}" />
+              </fieldset>
+
+              <fieldset class="tfr-fieldset-element tfr-fieldset tfr-mt-20">
+                  <legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-black-o5">${L.Password}</legend>
+                  <input tfr-element="true" type="password" id="password-input" />
+              </fieldset>
+
+              <div tfr-element="true" class="tfr-body-font tfr-12-default tfr-c-red tfr-mt-10 tfr-d-none" id="tfr-form-error"></div>
+
+              <div class="tfr-mt-20">
+                  <span id="tfr-forgot-password" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-black-o5 tfr-underline tfr-cursor tfr-mr-15">${L.ForgotPasswordWithSymbol}</span>
+                  <span id="tfr-scan-code" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-black-o5 tfr-underline tfr-cursor">${L.DontHaveAcc}</span>
+              </div>
+
+              <button id="tfr-sign-in" tfr-element="true" class="tfr-standard-button tfr-c-brand-bg tfr-c-whitetfr-title-font tfr-medium-16-default tfr-cursor tfr-mt-30" id="sign-in-button" type="submit">
+                  ${L.SignIn}
+              </button>
+            </form>
+            `;
+    };
+    return {
+        Hook: onHook,
+        Unhook: onUnhook,
+        Body: body,
+        useFullModalContent: true,
+    };
+};
+export default SignInModal;
+//# sourceMappingURL=SignInModal.js.map

package/.rollup.cache/home/runner/work/shop-sdk-ui/shop-sdk-ui/dist/esm/components/Modals/SignInModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInModal.js","sourceRoot":"","sources":["../../../../src/components/Modals/SignInModal.ts"],"names":[],"mappings":"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","sourcesContent":["import { ModalContent, SignInModalProps } from '../../types'\nimport { L } from '../locale'\n\nconst SignInModal = (props: SignInModalProps): ModalContent => {\n  const { email } = props\n\n  const onSignIn = (e: Event) => {\n    e.preventDefault()\n\n    const email = (<HTMLInputElement>document.getElementById('email-input')).value\n    const password = (<HTMLInputElement>document.getElementById('password-input')).value\n    resetValidation()\n    props.onSignIn(email, password, validationError)\n  }\n\n  const onNavForgotPassword = () => {\n    const email = (<HTMLInputElement>document.getElementById('email-input')).value\n    props.onNavForgotPassword(email)\n  }\n\n  const onNavScanCode = () => {\n    props.onNavScanCode()\n  }\n\n  const onHook = () => {\n    document.getElementById('tfr-sign-in-form')?.addEventListener('submit', onSignIn)\n    document.getElementById('tfr-sign-in')?.addEventListener('click', onSignIn)\n    document.getElementById('tfr-forgot-password')?.addEventListener('click', onNavForgotPassword)\n    document.getElementById('tfr-scan-code')?.addEventListener('click', onNavScanCode)\n  }\n\n  const onUnhook = () => {\n    document.getElementById('tfr-sign-in-form')?.removeEventListener('submit', onSignIn)\n    document.getElementById('tfr-sign-in')?.removeEventListener('click', onSignIn)\n    document.getElementById('tfr-forgot-password')?.removeEventListener('click', onNavForgotPassword)\n    document.getElementById('tfr-scan-code')?.removeEventListener('click', onNavScanCode)\n  }\n\n  const resetValidation = () => {\n    const fieldsetElement = document.querySelectorAll('.tfr-fieldset-element')\n    fieldsetElement.forEach((element) => {\n      element.classList.remove('tfr-fieldset-err')\n    })\n\n    const labelElement = document.querySelectorAll('.tfr-label-element')\n    labelElement.forEach((element) => {\n      element.classList.remove('tfr-c-red')\n    })\n\n    const formError = document.querySelector('#tfr-form-error')\n    formError.classList.remove('tfr-d-block')\n    formError.innerHTML = ''\n  }\n\n  const validationError = (message: string) => {\n    const fieldsetElement = document.querySelectorAll('.tfr-fieldset-element')\n    fieldsetElement.forEach((element) => {\n      element.classList.add('tfr-fieldset-err')\n    })\n\n    const labelElement = document.querySelectorAll('.tfr-label-element')\n    labelElement.forEach((element) => {\n      element.classList.add('tfr-c-red')\n    })\n\n    const formError = document.querySelector('#tfr-form-error')\n    formError.innerHTML = message || 'Something went wrong'\n    formError.classList.add('tfr-d-block')\n  }\n\n  const body = () => {\n    return `\n            <form id=\"tfr-sign-in-form\">\n              <div class=\"tfr-title-font tfr-light-22-300 tfr-mt-10\">${L.SignIn}</div>\n\n              <fieldset class=\"tfr-fieldset-element tfr-fieldset tfr-mt-20\">\n                  <legend tfr-element=\"true\" class=\"tfr-label-element tfr-body-font tfr-14-default tfr-c-black-o5\">${\n                    L.EmailAddress\n                  }</legend>\n                  <input tfr-element=\"true\" type=\"email\" id=\"email-input\" value=\"${email || ''}\" />\n              </fieldset>\n\n              <fieldset class=\"tfr-fieldset-element tfr-fieldset tfr-mt-20\">\n                  <legend tfr-element=\"true\" class=\"tfr-label-element tfr-body-font tfr-14-default tfr-c-black-o5\">${\n                    L.Password\n                  }</legend>\n                  <input tfr-element=\"true\" type=\"password\" id=\"password-input\" />\n              </fieldset>\n\n              <div tfr-element=\"true\" class=\"tfr-body-font tfr-12-default tfr-c-red tfr-mt-10 tfr-d-none\" id=\"tfr-form-error\"></div>\n\n              <div class=\"tfr-mt-20\">\n                  <span id=\"tfr-forgot-password\" tfr-element=\"true\" class=\"tfr-body-font tfr-14-default tfr-c-black-o5 tfr-underline tfr-cursor tfr-mr-15\">${\n                    L.ForgotPasswordWithSymbol\n                  }</span>\n                  <span id=\"tfr-scan-code\" tfr-element=\"true\" class=\"tfr-body-font tfr-14-default tfr-c-black-o5 tfr-underline tfr-cursor\">${\n                    L.DontHaveAcc\n                  }</span>\n              </div>\n\n              <button id=\"tfr-sign-in\" tfr-element=\"true\" class=\"tfr-standard-button tfr-c-brand-bg tfr-c-whitetfr-title-font tfr-medium-16-default tfr-cursor tfr-mt-30\" id=\"sign-in-button\" type=\"submit\">\n                  ${L.SignIn}\n              </button>\n            </form>\n            `\n  }\n\n  return {\n    Hook: onHook,\n    Unhook: onUnhook,\n    Body: body,\n    useFullModalContent: true,\n  }\n}\nexport default SignInModal\n"]}

package/.rollup.cache/home/runner/work/shop-sdk-ui/shop-sdk-ui/dist/esm/components/Modals/SizeErrorModal.js

@@ -0,0 +1,43 @@
+import { L } from '../locale';
+const SizeErrorModal = (props) => {
+    const onNavBack = () => {
+        props.onNavBack();
+    };
+    const onClose = () => {
+        props.onClose();
+    };
+    const Hook = () => {
+        var _a, _b;
+        (_a = document.getElementById('tfr-back')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', onNavBack);
+        (_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', onClose);
+    };
+    const Unhook = () => {
+        var _a, _b;
+        (_a = document.getElementById('tfr-back')) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', onNavBack);
+        (_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', onClose);
+    };
+    const Body = () => {
+        var _a, _b, _c;
+        console.debug('rendering size error modal', props);
+        return `
+        <div class="tfr-mt-15-p tfr-mb-13-p">
+            <div tfr-element="true" class="tfr-title-font tfr-light-22-300 tfr-c-black">
+							${L.NoSizeAvailable} ${(_a = props.sizes) === null || _a === void 0 ? void 0 : _a.recommended} ${L.OrSize} ${(_c = (_b = props.sizes) === null || _b === void 0 ? void 0 : _b.available) === null || _c === void 0 ? void 0 : _c.join(' or ')}
+						</div>
+        </div>
+
+        <div class="tfr-t-a-center">
+            <span id="tfr-back" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor tfr-mr-20">${L.ReturnToCatalogPage || 'Return to Catalog Page'}</span>
+            <span id="tfr-close" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor">${L.ReturnToProductPage || 'Return to Product Page'}</span>
+        </div>
+        `;
+    };
+    return {
+        Hook,
+        Unhook,
+        Body,
+        useFullModalContent: true,
+    };
+};
+export default SizeErrorModal;
+//# sourceMappingURL=SizeErrorModal.js.map

package/.rollup.cache/home/runner/work/shop-sdk-ui/shop-sdk-ui/dist/esm/components/Modals/SizeErrorModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizeErrorModal.js","sourceRoot":"","sources":["../../../../src/components/Modals/SizeErrorModal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,WAAW,CAAA;AAE7B,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAgB,EAAE;IAClE,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,KAAK,CAAC,SAAS,EAAE,CAAA;IACnB,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,KAAK,CAAC,OAAO,EAAE,CAAA;IACjB,CAAC,CAAA;IAED,MAAM,IAAI,GAAG,GAAG,EAAE;;QAChB,MAAA,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,0CAAE,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;QACzE,MAAA,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,0CAAE,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IAC1E,CAAC,CAAA;IAED,MAAM,MAAM,GAAG,GAAG,EAAE;;QAClB,MAAA,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,0CAAE,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;QAC5E,MAAA,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,0CAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IAC7E,CAAC,CAAA;IAED,MAAM,IAAI,GAAG,GAAG,EAAE;;QAChB,OAAO,CAAC,KAAK,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAA;QAClD,OAAO;;;SAGF,CAAC,CAAC,eAAe,IAAI,MAAA,KAAK,CAAC,KAAK,0CAAE,WAAW,IAAI,CAAC,CAAC,MAAM,IAAI,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,SAAS,0CAAE,IAAI,CAAC,MAAM,CAAC;;;;;4IAM5F,CAAC,CAAC,mBAAmB,IAAI,wBAC3B;mIAEE,CAAC,CAAC,mBAAmB,IAAI,wBAC3B;;SAEH,CAAA;IACP,CAAC,CAAA;IAED,OAAO;QACL,IAAI;QACJ,MAAM;QACN,IAAI;QACJ,mBAAmB,EAAE,IAAI;KAC1B,CAAA;AACH,CAAC,CAAA;AAED,eAAe,cAAc,CAAA","sourcesContent":["import { ModalContent, SizeErrorModalProps } from '../../types'\nimport { L } from '../locale'\n\nconst SizeErrorModal = (props: SizeErrorModalProps): ModalContent => {\n  const onNavBack = () => {\n    props.onNavBack()\n  }\n\n  const onClose = () => {\n    props.onClose()\n  }\n\n  const Hook = () => {\n    document.getElementById('tfr-back')?.addEventListener('click', onNavBack)\n    document.getElementById('tfr-close')?.addEventListener('click', onClose)\n  }\n\n  const Unhook = () => {\n    document.getElementById('tfr-back')?.removeEventListener('click', onNavBack)\n    document.getElementById('tfr-close')?.removeEventListener('click', onClose)\n  }\n\n  const Body = () => {\n    console.debug('rendering size error modal', props)\n    return `\n        <div class=\"tfr-mt-15-p tfr-mb-13-p\">\n            <div tfr-element=\"true\" class=\"tfr-title-font tfr-light-22-300 tfr-c-black\">\n\t\t\t\t\t\t\t${L.NoSizeAvailable} ${props.sizes?.recommended} ${L.OrSize} ${props.sizes?.available?.join(' or ')}\n\t\t\t\t\t\t</div>\n        </div>\n\n        <div class=\"tfr-t-a-center\">\n            <span id=\"tfr-back\" tfr-element=\"true\" class=\"tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor tfr-mr-20\">${\n              L.ReturnToCatalogPage || 'Return to Catalog Page'\n            }</span>\n            <span id=\"tfr-close\" tfr-element=\"true\" class=\"tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor\">${\n              L.ReturnToProductPage || 'Return to Product Page'\n            }</span>\n        </div>\n        `\n  }\n\n  return {\n    Hook,\n    Unhook,\n    Body,\n    useFullModalContent: true,\n  }\n}\n\nexport default SizeErrorModal\n"]}

package/.rollup.cache/home/runner/work/shop-sdk-ui/shop-sdk-ui/dist/esm/components/Modals/TryOnModal.js

@@ -0,0 +1,51 @@
+import { InitImageSlider } from '../../components/slider';
+const TryOnModal = (props) => {
+    let close = () => void 0;
+    const onNavBack = () => {
+        props.onNavBack();
+    };
+    const onClose = () => {
+        props.onClose();
+    };
+    const Hook = () => {
+        var _a, _b;
+        const tryOnImage = document.getElementById('tfr-tryon-image');
+        const onChange = (slider, imageUrl) => {
+            console.debug('slider change', slider, imageUrl);
+            tryOnImage.src = imageUrl;
+        };
+        const slider = InitImageSlider('tfr-slider', onChange);
+        if (Array.isArray(props.frames) && props.frames.length > 0) {
+            const e = slider.Load(props.frames);
+            if (e instanceof Error) {
+                console.error(e);
+                return;
+            }
+            close = e;
+        }
+        (_a = document.getElementById('tfr-back')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', onNavBack);
+        (_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', onClose);
+    };
+    const Unhook = () => {
+        var _a, _b;
+        close();
+        (_a = document.getElementById('tfr-back')) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', onNavBack);
+        (_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', onClose);
+    };
+    const Body = () => {
+        return `
+        <div class="tfr-slider-wrapper">
+				<img id="tfr-tryon-image" src="" />
+				<input type="range" id="tfr-slider" />
+				</div>
+        `;
+    };
+    return {
+        Hook,
+        Unhook,
+        Body,
+        useFullModalContent: true,
+    };
+};
+export default TryOnModal;
+//# sourceMappingURL=TryOnModal.js.map

package/.rollup.cache/home/runner/work/shop-sdk-ui/shop-sdk-ui/dist/esm/components/Modals/TryOnModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TryOnModal.js","sourceRoot":"","sources":["../../../../src/components/Modals/TryOnModal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAGzD,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAgB,EAAE;IAC1D,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAA;IAExB,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,KAAK,CAAC,SAAS,EAAE,CAAA;IACnB,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,KAAK,CAAC,OAAO,EAAE,CAAA;IACjB,CAAC,CAAA;IAED,MAAM,IAAI,GAAG,GAAG,EAAE;;QAChB,MAAM,UAAU,GAAqB,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;QAC/E,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE;YACpC,OAAO,CAAC,KAAK,CAAC,eAAe,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAA;YAChD,UAAU,CAAC,GAAG,GAAG,QAAQ,CAAA;QAC3B,CAAC,CAAA;QACD,MAAM,MAAM,GAAG,eAAe,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;QACtD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC3D,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;YACnC,IAAI,CAAC,YAAY,KAAK,EAAE,CAAC;gBACvB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;gBAChB,OAAM;YACR,CAAC;YACD,KAAK,GAAG,CAAe,CAAA;QACzB,CAAC;QACD,MAAA,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,0CAAE,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;QACzE,MAAA,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,0CAAE,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IAC1E,CAAC,CAAA;IAED,MAAM,MAAM,GAAG,GAAG,EAAE;;QAClB,KAAK,EAAE,CAAA;QACP,MAAA,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,0CAAE,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;QAC5E,MAAA,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,0CAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IAC7E,CAAC,CAAA;IAED,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,OAAO;;;;;SAKF,CAAA;IACP,CAAC,CAAA;IAED,OAAO;QACL,IAAI;QACJ,MAAM;QACN,IAAI;QACJ,mBAAmB,EAAE,IAAI;KAC1B,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA","sourcesContent":["import { InitImageSlider } from '../../components/slider'\nimport { ModalContent, TryOnModalProps } from '../../types'\n\nconst TryOnModal = (props: TryOnModalProps): ModalContent => {\n  let close = () => void 0\n\n  const onNavBack = () => {\n    props.onNavBack()\n  }\n\n  const onClose = () => {\n    props.onClose()\n  }\n\n  const Hook = () => {\n    const tryOnImage = <HTMLImageElement>document.getElementById('tfr-tryon-image')\n    const onChange = (slider, imageUrl) => {\n      console.debug('slider change', slider, imageUrl)\n      tryOnImage.src = imageUrl\n    }\n    const slider = InitImageSlider('tfr-slider', onChange)\n    if (Array.isArray(props.frames) && props.frames.length > 0) {\n      const e = slider.Load(props.frames)\n      if (e instanceof Error) {\n        console.error(e)\n        return\n      }\n      close = e as () => void\n    }\n    document.getElementById('tfr-back')?.addEventListener('click', onNavBack)\n    document.getElementById('tfr-close')?.addEventListener('click', onClose)\n  }\n\n  const Unhook = () => {\n    close()\n    document.getElementById('tfr-back')?.removeEventListener('click', onNavBack)\n    document.getElementById('tfr-close')?.removeEventListener('click', onClose)\n  }\n\n  const Body = () => {\n    return `\n        <div class=\"tfr-slider-wrapper\">\n\t\t\t\t<img id=\"tfr-tryon-image\" src=\"\" />\n\t\t\t\t<input type=\"range\" id=\"tfr-slider\" />\n\t\t\t\t</div>\n        `\n  }\n\n  return {\n    Hook,\n    Unhook,\n    Body,\n    useFullModalContent: true,\n  }\n}\n\nexport default TryOnModal\n"]}

package/.rollup.cache/home/runner/work/shop-sdk-ui/shop-sdk-ui/dist/esm/components/SizeRec.js

@@ -0,0 +1,363 @@
+import { infoIcon, tfrDoor, userIcon } from './svgs';
+export class SizeRecComponent {
+    constructor(sizeRecMainDivId, onSignInClick, onSignOutClick, onFitInfoClick, onTryOnClick) {
+        this.onSignInClick = onSignInClick;
+        this.onSignOutClick = onSignOutClick;
+        this.onFitInfoClick = onFitInfoClick;
+        this.onTryOnClick = onTryOnClick;
+        this._sku = '';
+        this._styleId = null;
+        this.isLoggedIn = false;
+        this.tfrLoggedInElements = [];
+        this.tfrLoggedOutElements = [];
+        this.tfrToggleOpenElements = [];
+        this.tfrToggleClosedElements = [];
+        this.isCollapsed = false;
+        this.redraw = null;
+        this.init(sizeRecMainDivId);
+    }
+    get sku() {
+        return this._sku;
+    }
+    setSku(sku) {
+        this._sku = sku;
+    }
+    get styleId() {
+        return this._styleId;
+    }
+    setStyleId(styleId) {
+        this._styleId = styleId;
+    }
+    setIsLoggedIn(isLoggedIn) {
+        this.isLoggedIn = isLoggedIn;
+        this.tfrSizeRecSelectContainer.style.display = 'flex';
+        this.tfrSizeRecSelect.style.display = 'flex';
+        this.tfrSizeHowItFits.style.display = 'block';
+        if (isLoggedIn) {
+            this.tfrSizeHowItFits.style.opacity = '1';
+            this.tfrSizeRecSelect.style.opacity = '1';
+            this.tfrLoggedInElements.forEach((element) => (element.style.display = 'block'));
+            this.tfrLoggedOutElements.forEach((element) => (element.style.display = 'none'));
+            this.tfrSizeRecActionLogin.style.display = 'none';
+            this.tfrSizeRecActionLogout.style.display = 'block';
+            this.tfrSizeRecTitle.style.display = 'flex';
+            this.isCollapsed = false;
+            this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-up');
+            this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-down');
+            // Ensure the container is visible
+            this.tfrSizeRecSelectContainer.style.display = 'flex';
+            this.tfrSizeRecSelectContainer.style.opacity = '1';
+        }
+        else {
+            this.tfrSizeHowItFits.style.opacity = '0.4';
+            this.tfrSizeRecSelect.style.opacity = '0.4';
+            this.tfrLoggedInElements.forEach((element) => (element.style.display = 'none'));
+            this.tfrLoggedOutElements.forEach((element) => (element.style.display = 'block'));
+            this.tfrSizeRecActionLogin.style.display = 'block';
+            this.tfrSizeRecActionLogout.style.display = 'none';
+            this.tfrSizeRecTitle.style.display = 'flex';
+            this.tfrSizeRecommendationError.style.display = 'none';
+            this.tfrSizeRecommendationError.innerHTML = '';
+            this.renderSizeRecSelectLoggedOut();
+        }
+    }
+    setLoading(isLoading) {
+        if (isLoading) {
+            this.tfrSizeRecLoading.style.display = 'block';
+            this.tfrSizeRecommendationsContainer.style.display = 'none';
+        }
+        else {
+            this.tfrSizeRecLoading.style.display = 'none';
+            this.tfrSizeRecommendationsContainer.style.display = 'flex';
+        }
+    }
+    setGarmentLocations(locations) {
+        if (!locations || !locations.length) {
+            this.tfrSizeRecTitle.style.display = 'none';
+            return;
+        }
+        this.renderGarmentLocations(locations);
+    }
+    setRecommendedSize({ recommended, sizes }) {
+        this.renderSizeRec(recommended, sizes);
+    }
+    setError() {
+        this.tfrSizeRecTitle.style.display = 'none';
+        if (!this.isLoggedIn)
+            return;
+        this.tfrSizeRecommendationError.style.display = 'block';
+        this.tfrSizeRecommendationError.innerHTML = 'No recommended size found.';
+    }
+    init(sizeRecMainDivId) {
+        const sizeRecMainDiv = document.getElementById(sizeRecMainDivId);
+        if (!sizeRecMainDiv)
+            throw new Error('Size rec main div not found');
+        this.render(sizeRecMainDiv);
+        this.setElements();
+        this.bindEvents();
+    }
+    setElements() {
+        this.tfrSizeHowItFits = document.getElementById('tfr-size-how-it-fits');
+        this.tfrSizeRecTitle = document.getElementById('tfr-size-rec-title');
+        this.tfrInfoIcon = document.getElementById('tfr-info-icon');
+        this.tfrLoginToView = document.getElementById('tfr-login-to-view');
+        this.tfrSizeRecActionLogin = document.getElementById('tfr-size-rec-action-login');
+        this.tfrSizeRecActionLogout = document.getElementById('tfr-size-rec-action-logout');
+        this.tfrSizeRecTable = document.getElementById('tfr-size-rec-table');
+        this.tfrSizeRecommendationError = document.getElementById('tfr-size-recommendation-error');
+        this.tfrSizeRecSize = document.getElementById('tfr-size-rec-size');
+        this.tfrSizeRecSelect = document.getElementById('tfr-size-rec-select');
+        this.tfrSizeRecLoading = document.getElementById('tfr-size-rec-loading');
+        this.tfrSizeRecTitleToggle = document.getElementById('tfr-size-rec-title-toggle');
+        this.tfrSizeRecSelectContainer = document.getElementById('tfr-size-rec-select-container');
+        this.tfrSizeRecommendationsContainer = document.getElementById('tfr-size-recommendations-container');
+        this.tfrLoggedInElements = document.querySelectorAll('.tfr-logged-in');
+        this.tfrLoggedOutElements = document.querySelectorAll('.tfr-logged-out');
+        this.tfrToggleOpenElements = document.querySelectorAll('.tfr-toggle-open');
+        this.tfrToggleClosedElements = document.querySelectorAll('.tfr-toggle-closed');
+    }
+    bindEvents() {
+        this.tfrSizeRecActionLogin.addEventListener('click', this.onSignInClick);
+        this.tfrSizeRecActionLogout.addEventListener('click', this.onSignOutClick);
+        this.tfrSizeRecSelect.addEventListener('click', this.onSizeRecSelectClick.bind(this));
+        this.tfrSizeRecTitleToggle.addEventListener('click', this.toggletSizeRecSelectContainer.bind(this));
+        this.tfrInfoIcon.addEventListener('click', this.onFitInfoClick);
+        this.tfrLoginToView.addEventListener('click', this.onSignInClick);
+        const tryOnButton = document.getElementById('tfr-try-on-button');
+        if (!tryOnButton)
+            return;
+        tryOnButton.addEventListener('click', async () => {
+            // Prevent multiple clicks while loading
+            if (tryOnButton.classList.contains('loading')) {
+                return;
+            }
+            const activeButton = document.querySelector('.tfr-size-rec-select-button.active');
+            if (!activeButton)
+                return;
+            const selectedSizeId = Number(activeButton.getAttribute('data-size-id'));
+            if (Number.isNaN(selectedSizeId))
+                return;
+            // Set loading state
+            tryOnButton.classList.add('loading');
+            const originalText = tryOnButton.textContent;
+            tryOnButton.textContent = ' ';
+            tryOnButton.setAttribute('disabled', 'true');
+            try {
+                // Get all size buttons
+                const allSizeButtons = Array.from(document.querySelectorAll('.tfr-size-rec-select-button'));
+                const activeIndex = allSizeButtons.indexOf(activeButton);
+                if (this.styleId !== null) {
+                    // 1. Fetch and display the VTO for the active (recommended) size
+                    try {
+                        await this.onTryOnClick(this.styleId, selectedSizeId, true);
+                    }
+                    catch (e) {
+                        console.error(`Error trying on active size ${selectedSizeId}:`, e);
+                        // Optionally, inform the user about the error for the primary VTO
+                    }
+                    // 2. Fetch VTO for the size to the left (if it exists)
+                    if (activeIndex > 0) {
+                        const leftButton = allSizeButtons[activeIndex - 1];
+                        await this._preloadNeighborVTO(leftButton);
+                    }
+                    // 3. Fetch VTO for the size to the right (if it exists)
+                    if (activeIndex >= 0 && activeIndex < allSizeButtons.length - 1) {
+                        const rightButton = allSizeButtons[activeIndex + 1];
+                        await this._preloadNeighborVTO(rightButton);
+                    }
+                }
+            }
+            catch (error) {
+                console.error('Error during sequential try-on process:', error);
+            }
+            finally {
+                // Reset loading state
+                tryOnButton.classList.remove('loading');
+                tryOnButton.textContent = originalText;
+                tryOnButton.removeAttribute('disabled');
+            }
+        });
+    }
+    async _preloadNeighborVTO(buttonElement) {
+        var _a;
+        // this.styleId is assumed to be non-null here because the calling context (bindEvents)
+        // is wrapped in 'if (this.styleId !== null)'
+        const sizeId = Number(buttonElement.getAttribute('data-size-id'));
+        if (!Number.isNaN(sizeId)) {
+            try {
+                await this.onTryOnClick(this.styleId, sizeId, false);
+            }
+            catch (e) {
+                const buttonText = ((_a = buttonElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || 'N/A';
+                console.error(`Error pre-loading try-on for size ${sizeId} (button: ${buttonText}):`, e);
+            }
+        }
+    }
+    onSizeRecSelectClick(e) {
+        const target = e.target;
+        if (!target.classList.contains('tfr-size-rec-select-button') || target.classList.contains('tfr-disabled'))
+            return;
+        e.preventDefault();
+        const selectedIndex = Number(target.getAttribute('data-index'));
+        if (Number.isNaN(selectedIndex))
+            return;
+        const allButtons = document.querySelectorAll('.tfr-size-rec-select-button');
+        allButtons.forEach((button) => button.classList.remove('active'));
+        allButtons.item(selectedIndex).classList.add('active');
+        this.redraw(selectedIndex);
+        const selectedSizeId = Number(target.getAttribute('data-size-id'));
+        if (Number.isNaN(selectedSizeId))
+            return;
+        this.onTryOnClick(this.styleId, selectedSizeId, true);
+    }
+    renderSizeRec(recommended, sizes) {
+        this.tfrSizeRecSize.innerHTML = `&nbsp;${recommended}`;
+        const selectedSizeIndex = sizes.findIndex(({ size }) => size === recommended);
+        this.redraw = (index) => this.renderSizeRecTable(sizes, index);
+        this.redraw(selectedSizeIndex);
+        this.renderSizeRecSelect(sizes, selectedSizeIndex);
+    }
+    renderSizeRecTable(sizes, index) {
+        const { locations } = sizes[index];
+        const html = locations
+            .map(({ location, fit, isPerfect }) => this.renderSizeRecTableRow(location, fit, isPerfect))
+            .join('');
+        this.tfrSizeRecTable.innerHTML = html;
+    }
+    renderSizeRecSelect(sizes, index) {
+        const sizeNames = sizes.map(({ size }) => size);
+        const html = sizeNames
+            .map((name, i) => `<div class="tfr-size-rec-select-button ${i === index ? 'active' : ''}" data-index="${i}" data-size-id="${sizes[i].size_id}">${name}</div>`)
+            .join('');
+        this.tfrSizeRecSelect.innerHTML = html;
+    }
+    renderSizeRecSelectLoggedOut() {
+        const html = [
+            `<div class="tfr-size-rec-select-button tfr-disabled">M</div>`,
+            `<div class="tfr-size-rec-select-button tfr-disabled active">L</div>`,
+            `<div class="tfr-size-rec-select-button tfr-disabled">XL</div>`,
+        ].join('');
+        this.tfrSizeRecSelect.innerHTML = html;
+    }
+    renderSizeRecTableRow(location, fit, isPerfect = false) {
+        return `<div class="tfr-size-rec-table-row">
+              <div class="tfr-size-rec-table-cell-left">${location}</div>
+              <div class="tfr-size-rec-table-cell-right ${isPerfect ? 'perfect' : ''}">
+                ${fit}
+              </div>
+            </div>`;
+    }
+    renderGarmentLocations(locations) {
+        const innerHtml = locations
+            .map((location, index) => this.renderSizeRecTableRow(location, this.randomFit(index), true))
+            .join('');
+        const html = `<div id="tfr-logged-out-overlay-container">
+                    <div id="tfr-logged-out-overlay">
+                      Login to reveal how this item will fit specifically at each area of your body in different sizes
+                    </div>
+                    <div>
+                      ${innerHtml}
+                    </div>
+                  </div>`;
+        this.tfrSizeRecTable.innerHTML = html;
+    }
+    randomFit(index) {
+        const choices = ['Slightly Tight', 'Perfect Fit', 'Perfect Fit', 'Slightly Loose', 'Perfect Fit'];
+        return choices[index % choices.length];
+    }
+    toggletSizeRecSelectContainer() {
+        if (this.isCollapsed) {
+            this.isCollapsed = false;
+            this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-up');
+            this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-down');
+            this.tfrToggleOpenElements.forEach((element) => (element.style.display = 'block'));
+            this.tfrToggleClosedElements.forEach((element) => (element.style.display = 'none'));
+        }
+        else {
+            this.isCollapsed = true;
+            this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-up');
+            this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-down');
+            this.tfrToggleOpenElements.forEach((element) => (element.style.display = 'none'));
+            this.tfrToggleClosedElements.forEach((element) => (element.style.display = 'block'));
+        }
+    }
+    render(sizeRecMainDiv) {
+        const body = `<div id="tfr-size-recommendations">
+                    <div id="tfr-size-rec-loading">
+                      <div class="lds-ellipsis">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                      </div>
+                    </div>
+                    <div id="tfr-size-recommendations-container">
+                      <div id="tfr-size-rec-title-toggle" class="tfr-chevron-up">v</div>
+
+                      <div class="tfr-logged-out">
+                        <div class="tfr-flex tfr-gap tfr-mb-2 tfr-mobile-small-text">
+                          <div>Uncertain&nbsp;of&nbsp;your&nbsp;size?</div>
+                          
+                          <div class="tfr-toggle-closed">
+                            <div class="tfr-flex tfr-items-center">
+                              <div>Try</div>
+                              <div class="tfr-powered-by-logo">${tfrDoor}</div>
+                              <div class="tfr-powered-by-text-bold">The&nbsp;Fitting&nbsp;Room</div>
+                            </div>
+                          </div>
+
+                          <div class="tfr-toggle-open">
+                            <div id="tfr-login-to-view" class="tfr-flex tfr-items-center">
+                              ${userIcon} Login to view
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="tfr-logged-in">
+                        <div id="tfr-size-rec-title">
+                          Recommended Size:
+                          <div id="tfr-size-rec-size">
+                            <div class="tfr-size-rec-login-cta">
+                              ${userIcon} Sign up to view
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="tfr-toggle-open" style="width: 100%">
+                        <div id="tfr-size-rec-select-container">
+                          <div id="tfr-size-how-it-fits">Select size to see how it fits:</div>
+
+                          <div id="tfr-size-rec-select"></div>
+
+                          <div id="tfr-size-rec-subtitle">
+                            How it fits
+                            <span id="tfr-info-icon">${infoIcon}</span>
+                          </div>
+
+                          <div id="tfr-size-rec-table"></div>
+
+                          <div id="tfr-try-on-button" class="tfr-try-on-button">Try On</div>
+                        </div>
+                      </div>
+
+                      <div id="tfr-size-rec-action">
+                        <div id="tfr-size-rec-action-login">Sign up or login</div>
+                        <div id="tfr-size-rec-action-logout">Log out</div>
+                      </div>
+
+                      <div class="tfr-toggle-open">
+                        <div class="tfr-powered-by">
+                          <div>Powered by</div>
+                          <div class="tfr-powered-by-logo">${tfrDoor}</div>
+                          <div class="tfr-powered-by-text-bold">The Fitting Room</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div id="tfr-size-recommendation-error"></div>`;
+        sizeRecMainDiv.innerHTML = body;
+    }
+}
+//# sourceMappingURL=SizeRec.js.map