{"version":3,"file":"client.login-button_BVwIhECp.id.esm.js","sources":["../../src/common/shop-swirl.ts","../../src/components/loginButton/components/modal-content.ts","../../src/components/loginButton/components/follow-on-shop-button.ts","../../src/components/loginButton/components/store-logo.ts","../../src/components/loginButton/shop-follow-button.ts","../../src/components/loginButton/init.ts"],"sourcesContent":["import {pickLogoColor} from './colors';\nimport {defineCustomElement} from './init';\n\nexport class ShopSwirl extends HTMLElement {\n constructor() {\n super();\n\n const template = document.createElement('template');\n const size = this.getAttribute('size');\n // If not specified, will assume a white background and render the purple logo.\n const backgroundColor = this.getAttribute('background-color') || '#FFF';\n\n template.innerHTML = getTemplateContents(\n size ? Number.parseInt(size, 10) : undefined,\n backgroundColor,\n );\n\n this.attachShadow({mode: 'open'}).appendChild(\n template.content.cloneNode(true),\n );\n }\n}\n\n/**\n * @param {number} size size of the logo.\n * @param {string} backgroundColor hex or rgb string for background color.\n * @returns {string} HTML content for the logo.\n */\nfunction getTemplateContents(size = 36, backgroundColor: string) {\n const [red, green, blue] = pickLogoColor(backgroundColor);\n const color = `rgb(${red}, ${green}, ${blue})`;\n const sizeRatio = 23 / 20;\n const height = size;\n const width = Math.round(height / sizeRatio);\n\n return `\n \n \n `;\n}\n\n/**\n * Define the shop-swirl custom element.\n */\nexport function defineElement() {\n defineCustomElement('shop-swirl', ShopSwirl);\n}\n","import {colors} from '../../../common/colors';\nimport {\n createStatusIndicator,\n ShopStatusIndicator,\n StatusIndicatorLoader,\n} from '../../../common/shop-status-indicator';\nimport {\n AuthorizeState,\n LoginButtonProcessingStatus as ProcessingStatus,\n} from '../../../types';\n\nexport const ELEMENT_CLASS_NAME = 'shop-modal-content';\n\ninterface Content {\n title?: string;\n description?: string;\n disclaimer?: string;\n authorizeState?: AuthorizeState;\n email?: string;\n status?: ProcessingStatus;\n}\n\nexport class ModalContent extends HTMLElement {\n #rootElement: ShadowRoot;\n\n // Header Elements\n #headerWrapper!: HTMLDivElement;\n #headerTitle!: HTMLHeadingElement;\n #headerDescription!: HTMLDivElement;\n\n // Main Content Elements\n #contentWrapper!: HTMLDivElement;\n #contentProcessingWrapper!: HTMLDivElement;\n #contentProcessingUser!: HTMLDivElement;\n #contentStatusIndicator?: ShopStatusIndicator;\n #contentChildrenWrapper!: HTMLDivElement;\n\n // Disclaimer Elements\n #disclaimerText!: HTMLDivElement;\n\n // Storage for content\n #contentStore: Content = {};\n\n constructor() {\n super();\n\n const template = document.createElement('template');\n template.innerHTML = getContent();\n this.#rootElement = this.attachShadow({mode: 'open'});\n this.#rootElement.appendChild(template.content.cloneNode(true));\n\n this.#headerWrapper = this.#rootElement.querySelector(\n `.${ELEMENT_CLASS_NAME}`,\n )!;\n this.#headerTitle = this.#rootElement.querySelector(\n `.${ELEMENT_CLASS_NAME}-title`,\n )!;\n this.#headerDescription = this.#rootElement.querySelector(\n `.${ELEMENT_CLASS_NAME}-description`,\n )!;\n this.#contentWrapper = this.#rootElement.querySelector(\n `.${ELEMENT_CLASS_NAME}-content`,\n )!;\n this.#contentProcessingWrapper = this.#rootElement.querySelector(\n `.${ELEMENT_CLASS_NAME}-processing`,\n )!;\n this.#contentProcessingUser = this.#rootElement.querySelector(\n `.${ELEMENT_CLASS_NAME}-processing-user`,\n )!;\n this.#contentChildrenWrapper = this.#rootElement.querySelector(\n `.${ELEMENT_CLASS_NAME}-children`,\n )!;\n this.#disclaimerText = this.#rootElement.querySelector(\n `.${ELEMENT_CLASS_NAME}-disclaimer`,\n )!;\n }\n\n hideDivider() {\n this.#headerWrapper.classList.add('hide-divider');\n }\n\n showDivider() {\n this.#headerWrapper.classList.remove('hide-divider');\n }\n\n update(content: Content) {\n this.#contentStore = {\n ...this.#contentStore,\n ...content,\n };\n\n this.#updateHeader();\n this.#updateMainContent();\n this.#updateDisclaimer();\n }\n\n #updateHeader() {\n const {title, description, authorizeState} = this.#contentStore;\n const visible = title || description;\n\n this.#headerWrapper.classList.toggle('hidden', !visible);\n this.#headerTitle.classList.toggle('hidden', !title);\n this.#headerDescription.classList.toggle('hidden', !description);\n\n this.#headerTitle.textContent = title || '';\n this.#headerDescription.textContent = description || '';\n\n if (authorizeState) {\n this.#headerWrapper.classList.toggle(\n 'hide-divider',\n authorizeState === AuthorizeState.Start,\n );\n\n this.#headerWrapper.classList.toggle(\n `${ELEMENT_CLASS_NAME}--small`,\n authorizeState === AuthorizeState.Start,\n );\n }\n }\n\n #updateMainContent() {\n const {authorizeState, status, email} = this.#contentStore;\n const contentWrapperVisible = Boolean(authorizeState || status);\n const processingWrapperVisible = Boolean(status && email);\n const childrenWrapperVisible = Boolean(\n contentWrapperVisible && !processingWrapperVisible,\n );\n\n this.#contentWrapper.classList.toggle('hidden', !contentWrapperVisible);\n this.#contentProcessingWrapper.classList.toggle(\n 'hidden',\n !processingWrapperVisible,\n );\n this.#contentChildrenWrapper.classList.toggle(\n 'hidden',\n !childrenWrapperVisible,\n );\n\n if (!this.#contentStatusIndicator && processingWrapperVisible) {\n const loaderType =\n authorizeState === AuthorizeState.OneClick\n ? StatusIndicatorLoader.Branded\n : StatusIndicatorLoader.Regular;\n this.#contentStatusIndicator = createStatusIndicator(loaderType);\n this.#contentProcessingWrapper.appendChild(this.#contentStatusIndicator);\n this.#contentStatusIndicator?.setStatus({\n status: 'loading',\n message: '',\n });\n }\n\n this.#contentProcessingUser.textContent = email || '';\n }\n\n #updateDisclaimer() {\n const {disclaimer} = this.#contentStore;\n const visible = Boolean(disclaimer);\n\n this.#disclaimerText.classList.toggle('hidden', !visible);\n this.#disclaimerText.innerHTML = disclaimer || '';\n }\n}\n\n/**\n * @returns {string} element styles and content\n */\nfunction getContent() {\n return `\n \n