JezK

Edit File: sc-avatar_2.entry.js.map

{"file":"sc-avatar.sc-customer-login.entry.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,WAAW,GAAG,05BAA05B,CAAC;AAC/6B,uBAAe,WAAW;;MCMb,QAAQ;;;wBACS,KAAK;qBAGjB,EAAE;qBAGF,EAAE;wBAGC,EAAE;uBAGe,OAAO;qBAGuB,QAAQ;;IAG1E,iBAAiB;;QAEf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;IAED,MAAM;QACJ,QACE,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACzC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBAC3C,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;aAC1C,EACD,IAAI,EAAC,KAAK,gBACE,IAAI,CAAC,KAAK,IAErB,IAAI,CAAC,QAAQ,IACZ,WAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IAC1C,IAAI,CAAC,QAAQ,CACV,KAEN,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,iBAAa,MAAM,IACtD,YAAM,IAAI,EAAC,MAAM,IACf,eAAS,IAAI,EAAC,aAAa,EAAC,OAAO,EAAC,QAAQ,GAAW,CAClD,CACH,CACP,EACA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,4DAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAC,EAAE,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAI,CAC7J,EACN;KACH;;;;;;;AC1DH,MAAM,kBAAkB,GAAG,q1FAAq1F,CAAC;AACj3F,8BAAe,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBC4ErB,UAAE;;;;;;;;;;;iCAaW,UAAE;;;;;;;;;;;;kBAef,UAAE;;;;;;;sBAMA,UAAE;;;6BAEK,UAAE;;;;;;iCAKA,UAAE;;;sFAEY,UAAE;;;;;;;;;;;;;;kBAc3B,UAAE;;;;;;;;;;wGAW+B,UAAE,yDAAyD,UAAE;;;;;;;;;;;;;;;;;;;yBAkBvF,UAAE;;;;;;;kFASc,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAkCvB,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CA8DsB,UAAE,2GAAoE,UAAE;;;;;;;;gDAQlE,UAAE,gCAAgC,UAAE;;;;;iBAiBrE,UAAE;;;;6MAcE,UAAE;;;sCAYmB,UAAE,6BAA6B,UAAE;;;;wEAexD,UAAE;;;kOAgBU,UAAE;;;;6LAad,UAAE;;;;uEAkBE,UAAE;;;;;wVAwBA,UAAE,0GAMR,UAAE;;;iBAQA,UAAE;;;;;;;;;;;;;","names":[],"sources":["src/components/ui/sc-avatar/sc-avatar.css?tag=sc-avatar&encapsulation=shadow","src/components/ui/sc-avatar/sc-avatar.tsx","src/components/controllers/checkout-form/customer-login/sc-customer-login.scss?tag=sc-customer-login&encapsulation=shadow","src/components/controllers/checkout-form/customer-login/sc-customer-login.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --sc-avatar-size: 3rem;\n}\n.avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: var(--sc-avatar-size);\n height: var(--sc-avatar-size);\n background-color: var(--sc-color-gray-400);\n font-family: var(--sc-font-sans);\n font-size: calc(var(--sc-avatar-size) * 0.5);\n font-weight: var(--sc-font-weight-normal);\n color: var(--sc-color-white);\n user-select: none;\n vertical-align: middle;\n}\n.avatar--circle,\n.avatar--circle .avatar__image {\n border-radius: var(--sc-border-radius-circle);\n}\n.avatar--rounded,\n.avatar--rounded .avatar__image {\n border-radius: var(--sc-border-radius-medium);\n}\n.avatar--square {\n border-radius: 0;\n}\n.avatar__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.avatar__initials {\n line-height: 1;\n text-transform: uppercase;\n}\n.avatar__image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n overflow: hidden;\n}\n","import { Component, h, State, Prop, Watch } from '@stencil/core';\n\n@Component({\n tag: 'sc-avatar',\n styleUrl: 'sc-avatar.css',\n shadow: true,\n})\nexport class ScAvatar {\n @State() private hasError = false;\n\n /** The image source to use for the avatar. */\n @Prop() image = '';\n\n /** A label to use to describe the avatar to assistive devices. */\n @Prop() label = '';\n\n /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */\n @Prop() initials = '';\n\n /** Indicates how the browser should load the image. */\n @Prop() loading: 'eager' | 'lazy' = 'eager';\n\n /** The shape of the avatar. */\n @Prop({ reflect: true }) shape: 'circle' | 'square' | 'rounded' = 'circle';\n\n @Watch('image')\n handleImageChange() {\n // Reset the error when a new image is provided\n this.hasError = false;\n }\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'avatar': true,\n 'avatar--circle': this.shape === 'circle',\n 'avatar--rounded': this.shape === 'rounded',\n 'avatar--square': this.shape === 'square',\n }}\n role=\"img\"\n aria-label={this.label}\n >\n {this.initials ? (\n <div part=\"initials\" class=\"avatar__initials\">\n {this.initials}\n </div>\n ) : (\n <div part=\"icon\" class=\"avatar__icon\" aria-hidden=\"true\">\n <slot name=\"icon\">\n <sl-icon name=\"person-fill\" library=\"system\"></sl-icon>\n </slot>\n </div>\n )}\n {this.image && !this.hasError && <img part=\"image\" class=\"avatar__image\" src={this.image} loading={this.loading} alt=\"\" onError={() => (this.hasError = true)} />}\n </div>\n );\n }\n}\n",":host {\n display: flex;\n flex-direction: column;\n gap: 1em;\n}\n\n.customer-login {\n box-sizing: border-box;\n font-family: var(--sc-input-font-family);\n font-weight: var(--sc-input-font-weight);\n letter-spacing: var(--sc-input-letter-spacing);\n background-color: var(--sc-input-background-color);\n border: solid 1px var(--sc-input-border-color, var(--sc-input-border));\n vertical-align: middle;\n box-shadow: var(--sc-input-box-shadow);\n transition: var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) border,\n var(--sc-input-transition, var(--sc-transition-medium)) box-shadow;\n border-radius: var(--sc-input-border-radius-medium);\n font-size: var(--sc-font-size-small);\n\n a {\n color: var(--sc-color-primary-500);\n }\n\n // Open it with animation.\n animation: open 0.5s ease-in-out;\n}\n\n.customer-code {\n padding: var(--sc-input-spacing-medium);\n\n &__sent-info {\n display: flex;\n align-items: center;\n gap: var(--sc-spacing-small);\n font-size: var(--sc-font-size-small);\n color: var(--sc-input-help-text-color);\n margin-bottom: var(--sc-spacing-x-small);\n }\n\n &__mail-icon {\n font-size: 1em;\n flex-shrink: 0;\n }\n\n &__sent-email {\n font-weight: var(--sc-font-weight-semibold);\n color: var(--sc-input-label-color);\n }\n\n &__change-link {\n margin-left: auto;\n white-space: nowrap;\n text-decoration: none;\n cursor: pointer;\n font-size: var(--sc-font-size-small);\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n &__error {\n color: var(--sc-color-danger-500, red);\n font-size: var(--sc-font-size-x-small);\n margin: 0;\n }\n\n &__verifying {\n display: flex;\n align-items: center;\n gap: var(--sc-spacing-small);\n color: var(--sc-input-help-text-color);\n font-size: var(--sc-font-size-small);\n margin-bottom: var(--sc-spacing-small);\n }\n\n &__expired {\n color: var(--sc-color-danger-500, red);\n font-size: var(--sc-font-size-x-small);\n margin: 0 0 var(--sc-spacing-small) 0;\n\n a {\n color: var(--sc-color-primary-500);\n text-decoration: none;\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n &__footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: var(--sc-spacing-small);\n }\n\n &__footer-left {\n display: flex;\n align-items: center;\n }\n\n &__footer-right {\n display: flex;\n align-items: center;\n }\n\n &__resend-timer {\n color: var(--sc-input-help-text-color);\n font-size: var(--sc-font-size-x-small);\n }\n\n &__resend-link {\n font-size: var(--sc-font-size-x-small);\n text-decoration: none;\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n &__mode-link {\n display: flex;\n align-items: center;\n gap: var(--sc-spacing-xx-small);\n font-size: var(--sc-font-size-x-small);\n text-decoration: none;\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n }\n}\n\n.customer-password {\n padding: var(--sc-input-spacing-medium);\n\n &__error {\n color: var(--sc-color-danger-500, red);\n font-size: var(--sc-font-size-x-small);\n margin: var(--sc-spacing-small) 0 0 0;\n }\n}\n","/**\n * External dependencies.\n */\nimport { Component, h, Prop, State, Host, Watch } from '@stencil/core';\nimport apiFetch from '@wordpress/api-fetch';\nimport { __ } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies.\n */\nimport { state as userState, resetUser, VERIFYING, VERIFIED, UNVERIFIED, CODE_EXPIRED } from '@store/user';\nimport { state as checkoutState } from '@store/checkout';\nimport { isRateLimited } from '../../../../functions/util';\nimport { secondsUntil, getBlockedDuplicateSeconds, resendAnchorFrom, RESEND_COOLDOWN_SECONDS, VerificationCodeResponse } from '../../../../functions/verification';\n\n@Component({\n tag: 'sc-customer-login',\n styleUrl: 'sc-customer-login.scss',\n shadow: true,\n})\nexport class ScCustomerLogin {\n /** The mode of the login */\n @State() mode: 'code' | 'password' = 'code';\n\n /** Is the component busy */\n @State() busy: boolean = false;\n\n /** Is code resending */\n @State() codeResending: boolean = false;\n\n /** Seconds remaining in the resend cooldown */\n @State() resendCooldown: number = 60;\n\n /** Interval timer reference for cleanup */\n private cooldownInterval: any = null;\n\n /** Password input ref (password view). */\n private passwordInput?: HTMLScInputElement;\n\n /** Verification code ref (code view). */\n private verificationCode?: HTMLScVerificationCodeElement;\n\n /** Focus the active view's field after the next render (set when the mode switches). */\n private focusAfterRender = false;\n\n /** Error */\n @State() error: string = '';\n\n /** Code Error coming from the parent */\n @Prop() codeError: string = '';\n\n /** Lets the parent open in password mode (used on 429 fallback). */\n @Prop() initialMode: 'code' | 'password' = 'code';\n\n /** Login Password */\n @State() password: string = '';\n\n /** Set after a 429 — hides the code toggle to prevent a retry loop. */\n @State() codeUnavailable: boolean = false;\n\n formatCooldown(): string {\n const minutes = Math.floor(this.resendCooldown / 60);\n const seconds = this.resendCooldown % 60;\n return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n }\n\n async verifyCode(code: string) {\n // If not valid email and code, then return.\n if (!userState.email || !code) {\n return;\n }\n\n try {\n this.error = '';\n userState.verificationStatus = VERIFYING;\n this.busy = true;\n speak(__('Verifying code...', 'surecart'), 'assertive');\n\n const user = (await apiFetch({\n method: 'POST',\n path: 'surecart/v1/verification_codes/verify',\n data: {\n login: userState.email,\n code: code,\n },\n })) as any;\n userState.verificationStatus = VERIFIED;\n\n if (!user?.verified) {\n throw { message: __('Verification code is not valid. Please try again.', 'surecart') };\n }\n\n // Update the nonce after login to prevent rest_cookie_invalid_nonce errors.\n // @ts-ignore - nonceMiddleware is set in fetch.ts but not in @wordpress/api-fetch types.\n if (user?.nonce && apiFetch.nonceMiddleware) {\n // @ts-ignore\n apiFetch.nonceMiddleware.nonce = user.nonce;\n }\n\n // Update userState and make the user as logged in user.\n userState.loggedIn = true;\n userState.name = user?.name || [user?.customer?.first_name, user?.customer?.last_name].filter(Boolean).join(' ') || '';\n userState.avatarUrl = user?.avatar_url || '';\n\n speak(__('Verification is successful. Please continue your purchase.', 'surecart'), 'assertive');\n } catch (e: any) {\n // If cooldown has elapsed, treat as expired code.\n if (this.resendCooldown <= 0) {\n userState.verificationStatus = CODE_EXPIRED;\n this.error = '';\n speak(__('Code expired. Please send a new code.', 'surecart'), 'assertive');\n } else if (isRateLimited(e)) {\n this.error = __('Please wait a moment and try again.', 'surecart');\n userState.verificationStatus = UNVERIFIED;\n speak(this.error, 'assertive');\n } else {\n if (e.code === 'not_found') {\n this.error = __('Incorrect code. Please try again.', 'surecart');\n } else {\n this.error = e?.message || __('Incorrect code. Please try again.', 'surecart');\n }\n userState.verificationStatus = UNVERIFIED;\n speak(this.error, 'assertive');\n }\n } finally {\n this.busy = false;\n }\n }\n\n async resendCode() {\n try {\n this.error = '';\n this.codeResending = true;\n speak(__('Sending code...', 'surecart'), 'assertive');\n const response = await apiFetch<VerificationCodeResponse>({\n method: 'POST',\n path: 'surecart/v1/verification_codes',\n data: {\n login: userState.email,\n checkout_mode: checkoutState.mode,\n },\n });\n\n // An in-window request resumes the existing code — don't announce a new email.\n speak(response?.email_sent === false ? __('A code was already sent to your email.', 'surecart') : __('Code sent', 'surecart'), 'assertive');\n userState.verificationStatus = UNVERIFIED;\n // Always anchor a fresh window (falls back to default if platform omits it).\n userState.resendAvailableAt = resendAnchorFrom(response?.resend_available_in);\n this.startCooldown();\n } catch (e) {\n console.error(e);\n this.handleCodeSendError(e);\n } finally {\n this.codeResending = false;\n }\n }\n\n handleCodeSendError(error: any) {\n // 429: switch to password (different endpoint, no limit conflict).\n if (isRateLimited(error)) {\n this.mode = 'password';\n this.codeUnavailable = true;\n this.error = __('Please sign in with your password to continue.', 'surecart');\n this.startCooldown();\n return;\n }\n\n const blockedSeconds = getBlockedDuplicateSeconds(error);\n\n (error?.additional_errors || []).forEach((e: any) => {\n if (e?.code === 'verification_code.email.blocked_duplicate') {\n this.error = e?.message || __('A code was recently sent to you. Please wait before requesting another.', 'surecart');\n // Resume from the platform's reported backoff window (default if absent).\n userState.resendAvailableAt = resendAnchorFrom(blockedSeconds);\n this.startCooldown();\n }\n });\n }\n\n /** Seconds left in the cooldown, always derived from the (decaying) anchor timestamp. */\n private remainingCooldown(): number {\n return secondsUntil(userState.resendAvailableAt);\n }\n\n startCooldown() {\n clearInterval(this.cooldownInterval);\n\n // Guarantee a concrete anchor so the countdown always decays to 0 and the\n // resend link returns — never a stuck constant.\n if (userState.resendAvailableAt == null) {\n userState.resendAvailableAt = resendAnchorFrom(RESEND_COOLDOWN_SECONDS);\n }\n\n this.resendCooldown = this.remainingCooldown();\n\n if (this.resendCooldown <= 0) return;\n\n // Recompute from the anchor each tick so the timer stays correct even if the\n // tab was backgrounded (throttled intervals) or the page was reloaded.\n this.cooldownInterval = setInterval(() => {\n this.resendCooldown = this.remainingCooldown();\n\n if (this.resendCooldown <= 0) {\n clearInterval(this.cooldownInterval);\n this.cooldownInterval = null;\n speak(__('You can resend the code now.', 'surecart'), 'assertive');\n }\n }, 1000);\n }\n\n componentWillLoad() {\n this.mode = this.initialMode;\n // initialMode='password' means the parent already 429'd on code-send.\n this.codeUnavailable = this.initialMode === 'password';\n this.startCooldown();\n }\n\n /** When the user switches views, focus that view's first field after it renders. */\n @Watch('mode')\n handleModeChange() {\n this.focusAfterRender = true;\n }\n\n componentDidRender() {\n if (!this.focusAfterRender) return;\n this.focusAfterRender = false;\n\n // Wait for the freshly rendered child to be ready, then focus it.\n if (this.mode === 'password') {\n this.passwordInput?.componentOnReady?.().then(() => this.passwordInput?.triggerFocus());\n } else {\n this.verificationCode?.componentOnReady?.().then(() => this.verificationCode?.triggerFocus());\n }\n }\n\n disconnectedCallback() {\n clearInterval(this.cooldownInterval);\n }\n\n async loginByPassword(e: any) {\n e.preventDefault();\n\n try {\n this.error = '';\n this.busy = true;\n const { name, email, avatar_url, nonce } = (await apiFetch({\n method: 'POST',\n path: 'surecart/v1/login',\n data: {\n login: userState.email,\n password: this.password,\n },\n })) as any;\n\n // Update the nonce after login to prevent rest_cookie_invalid_nonce errors.\n // @ts-ignore - nonceMiddleware is set in fetch.ts but not in @wordpress/api-fetch types.\n if (nonce && apiFetch.nonceMiddleware) {\n // @ts-ignore\n apiFetch.nonceMiddleware.nonce = nonce;\n }\n\n userState.loggedIn = true;\n userState.verificationStatus = VERIFIED;\n userState.name = name;\n userState.email = email;\n userState.avatarUrl = avatar_url || '';\n } catch (e: any) {\n this.error = isRateLimited(e) ? __('Please wait a moment and try again.', 'surecart') : e?.message || __('Login failed. Please try again.', 'surecart');\n } finally {\n this.busy = false;\n }\n }\n\n renderSentInfo() {\n // Don't claim a code was sent if we 429'd before it left.\n const headline = this.codeUnavailable ? __('Signing in as', 'surecart') : __('Code sent to', 'surecart');\n const iconName = this.codeUnavailable ? 'user' : 'mail';\n\n return (\n <div class=\"customer-code__sent-info\">\n <sc-icon name={iconName} class=\"customer-code__mail-icon\" aria-hidden=\"true\" />\n <span>\n {headline} <strong class=\"customer-code__sent-email\">{userState.email}</strong>\n </span>\n <a\n href=\"#\"\n class=\"customer-code__change-link\"\n onClick={e => {\n e.preventDefault();\n resetUser();\n }}\n >\n {__('Change', 'surecart')}\n </a>\n </div>\n );\n }\n\n renderCodeFooter() {\n const isExpired = userState.verificationStatus === CODE_EXPIRED;\n\n return (\n <div class=\"customer-code__footer\">\n <div class=\"customer-code__footer-left\">\n {!isExpired && this.resendCooldown > 0 && (\n <span class=\"customer-code__resend-timer\">\n {__('Resend code in', 'surecart')} {this.formatCooldown()}\n </span>\n )}\n {!isExpired && this.resendCooldown <= 0 && (\n <a\n href=\"#\"\n class=\"customer-code__resend-link\"\n onClick={e => {\n e.preventDefault();\n this.resendCode();\n }}\n >\n {this.codeResending ? __('Sending...', 'surecart') : __('Resend Code', 'surecart')}\n </a>\n )}\n </div>\n <div class=\"customer-code__footer-right\">\n <a\n href=\"#\"\n class=\"customer-code__mode-link\"\n onClick={e => {\n e.preventDefault();\n this.error = '';\n this.mode = 'password';\n }}\n >\n <sc-icon name=\"lock\" aria-hidden=\"true\" />\n {__('Use Password', 'surecart')}\n </a>\n </div>\n </div>\n );\n }\n\n renderPasswordView() {\n return (\n <div class=\"customer-password\">\n {this.renderSentInfo()}\n <sc-flex alignItems=\"center\">\n <sc-input\n ref={el => (this.passwordInput = el)}\n type=\"password\"\n style={{ flex: '1' }}\n placeholder={__('Password', 'surecart')}\n required\n disabled={this.busy}\n onScInput={(e: any) => (this.password = e.target.value)}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter') {\n this.loginByPassword(e);\n }\n }}\n />\n <sc-button size=\"medium\" type=\"primary\" loading={this.busy} onClick={(e: any) => this.loginByPassword(e)}>\n <sc-icon slot=\"prefix\" name=\"lock\" />\n &nbsp;\n {__('Login', 'surecart')}\n </sc-button>\n </sc-flex>\n {!!(this.error || this.codeError) && <p class=\"customer-password__error\" role=\"alert\" innerHTML={this.error || this.codeError}></p>}\n {!this.codeUnavailable && (\n <div class=\"customer-code__footer\">\n <div class=\"customer-code__footer-left\"></div>\n <div class=\"customer-code__footer-right\">\n <a\n href=\"#\"\n class=\"customer-code__mode-link\"\n onClick={e => {\n e.preventDefault();\n this.error = '';\n this.mode = 'code';\n }}\n >\n <sc-icon name=\"key\" aria-hidden=\"true\" />\n {__('Use Login Code', 'surecart')}\n </a>\n </div>\n </div>\n )}\n </div>\n );\n }\n\n renderCodeView() {\n const isExpired = userState.verificationStatus === CODE_EXPIRED;\n const isVerifying = userState.verificationStatus === VERIFYING;\n\n return (\n <div class=\"customer-code\">\n {this.renderSentInfo()}\n\n <div>\n <sc-verification-code ref={el => (this.verificationCode = el)} total={6} loading={this.busy} onChange={((value: string) => this.verifyCode(value)) as any} />\n </div>\n\n {isVerifying && (\n <div class=\"customer-code__verifying\">\n <sc-spinner />\n <span>{__('Verifying...', 'surecart')}</span>\n </div>\n )}\n\n {isExpired && (\n <p class=\"customer-code__expired\" role=\"alert\">\n {__('Code expired.', 'surecart')}{' '}\n <a\n href=\"#\"\n onClick={e => {\n e.preventDefault();\n this.resendCode();\n }}\n >\n {__('Send new code', 'surecart')}\n </a>\n </p>\n )}\n\n {!isExpired && (!!this.error || !!this.codeError) && <p class=\"customer-code__error\" role=\"alert\" innerHTML={this.error || this.codeError}></p>}\n\n {this.renderCodeFooter()}\n </div>\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"customer-login\">{this.mode === 'code' ? this.renderCodeView() : this.renderPasswordView()}</div>\n </Host>\n );\n }\n}\n"],"version":3}