npm - solid-ui - Versions diffs - 3.1.3-6 → 3.1.3-7 - Mend

solid-ui 3.1.3-6 → 3.1.3-7

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.

Files changed (440) hide show

package/dist/v2/components/auth/loginButton/LoginButton.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LoginButton.cjs.js","names":[],"sources":["../../../../../src/v2/components/auth/loginButton/LoginButton.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { authSession, authn, getSuggestedIssuers, offlineTestID, solidLogicSingleton } from 'solid-logic'\nimport { phoneIcon as downArrowIcon } from './downArrow'\n\nexport class LoginButton extends LitElement {\n static properties = {\n label: { type: String, reflect: true },\n theme: { type: String, reflect: true },\n issuerUrl: { type: String, attribute: 'issuer-url', reflect: true },\n icon: { type: String, reflect: true },\n layout: { type: String, reflect: true },\n _popupOpen: { state: true },\n _issuerInputValue: { state: true },\n _dropdownOpen: { state: true }\n }\n\n static styles = css`\n :host { /* default theme */\n display: inline-block;\n position: relative;\n z-index: 400;\n --login-button-background: var(--lavender-900, #7c4cff);\n --login-button-text: var(--color-header-text, #ffffff);\n --popup-background: var(--color-background, #F8F9FB);\n --popup-text: var(--color-text, #1A1A1A);\n --popup-border: var(--color-border, #E5E7EB);\n --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));\n --popup-overlay-background: rgba(0, 0, 0, 0.6);\n --issuer-input-background: var(--color-background, #F8F9FB);\n --issuer-input-text: var(--color-text, #1A1A1A);\n --issuer-input-border: var(--color-text, #1A1A1A);\n --issuer-button-background: var(--color-background, #F8F9FB);\n --issuer-button-text: var(--color-text, #1A1A1A);\n --issuer-button-border: var(--color-border, #E5E7EB);\n --issuer-button-hover-background: var(--lavender-900, #7c4cff);\n --issuer-label-color: var(--grey-purple-700, #1A1A1A);\n --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;\n --error-text-color: var(--color-error, #B00020);\n }\n\n :host([theme='dark']) {\n display: inline-block;\n position: relative;\n z-index: 900;\n --login-button-background: var(--lavender-900, #7c4cff);\n --login-button-text: var(--color-header-text, #ffffff);\n --popup-background: var(--color-background, #F8F9FB);\n --popup-text: var(--color-text, #1A1A1A);\n --popup-border: var(--color-border, #E5E7EB);\n --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));\n --popup-overlay-background: rgba(0, 0, 0, 0.6);\n --issuer-input-background: var(--color-background, #F8F9FB);\n --issuer-input-text: var(--color-text, #1A1A1A);\n --issuer-input-border: var(--color-text, #1A1A1A);\n --issuer-button-background: var(--color-background, #F8F9FB);\n --issuer-button-text: var(--color-text, #1A1A1A);\n --issuer-button-border: var(--color-text, #1A1A1A);\n --issuer-button-hover-background: var(--lavender-900, #7c4cff);\n --issuer-label-color: var(--grey-purple-700, #1A1A1A);\n --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;\n --error-text-color: var(--color-error, #B00020);\n }\n\n .login-button {\n display: flex;\n height: 35px;\n padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);\n align-items: center;\n gap: var(--spacing-xxs, 0.3125rem);\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--login-button-background);\n border: none;\n color: var(--login-button-text);\n cursor: pointer;\n font: inherit;\n line-height: 1;\n white-space: nowrap;\n text-decoration: none;\n box-sizing: border-box;\n transition: transform 0.2s ease;\n }\n\n .login-button-icon {\n width: 16px;\n height: 16px;\n display: inline-block;\n object-fit: contain;\n }\n\n .login-button:active {\n transform: translateY(1px);\n }\n\n .popup-dialog {\n border: none;\n padding: 0;\n background: transparent;\n outline: none;\n overflow: visible;\n width: min(30rem, calc(100vw - 2rem));\n max-width: calc(100vw - 2rem);\n max-height: calc(100dvh - 2rem);\n }\n\n .popup-dialog::backdrop {\n background: var(--popup-overlay-background, rgba(0, 0, 0, 0.6));\n }\n\n .popup-box {\n background: var(--popup-background);\n color: var(--popup-text);\n box-shadow: var(--popup-shadow);\n border: 1px solid var(--popup-border);\n border-radius: var(--border-radius-md, 0.5rem);\n width: min(30rem, calc(100vw - 2rem));\n min-width: min(30rem, calc(100vw - 2rem));\n max-width: calc(100vw - 2rem);\n max-height: calc(100dvh - 2rem);\n overflow: auto;\n z-index: 1001;\n }\n\n .popup-top-menu {\n border-bottom: 1px solid #DDD;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-bottom: 8px;\n margin-bottom: 8px;\n padding: 1rem;\n background: var(--gray-200, #E5E7EB);\n }\n\n .popup-title {\n font-weight: 800;\n }\n\n .popup-close {\n background: transparent;\n border: none;\n cursor: pointer;\n font-size: 1.25rem;\n line-height: 1;\n padding: 0 0.25rem;\n }\n\n .issuer-text-section {\n display: flex;\n flex-direction: column;\n padding: 1rem 1rem 1.75rem;\n }\n\n .issuer-text-label {\n color: var(--issuer-label-color);\n margin-bottom: 6px;\n }\n\n .issuer-text-row {\n display: flex;\n flex-direction: row;\n gap: 6px;\n align-items: flex-start;\n }\n\n .issuer-input-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n position: relative;\n }\n\n .issuer-input-field-row {\n display: flex;\n flex-direction: row;\n position: relative;\n }\n\n .issuer-text-input {\n flex: 1;\n padding: 0.375rem 2.75rem 0.375rem 0.5rem;\n border: 1px solid var(--issuer-input-border);\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--issuer-input-background);\n color: var(--issuer-input-text);\n font: inherit;\n min-width: 0;\n }\n\n .issuer-text-input::placeholder {\n color: var(--issuer-placeholder-color);\n }\n\n .issuer-dropdown-toggle {\n position: absolute;\n right: 6px;\n top: 50%;\n transform: translateY(-50%);\n width: 26px;\n height: 26px;\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: var(--border-radius-base, 0.3125rem);\n }\n\n .issuer-dropdown-toggle:hover {\n background: var(--color-header-menu-item-hover, #e6dcff);\n }\n\n .issuer-dropdown-toggle svg {\n width: 14px;\n height: 14px;\n display: block;\n }\n\n .issuer-dropdown-list {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n right: 0;\n border: 1px solid var(--color-border, #E5E7EB);\n border-top: none;\n border-radius: 0 0 var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem);\n background: var(--issuer-input-background);\n overflow: visible;\n z-index: 10;\n box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);\n }\n\n .issuer-dropdown-item {\n display: block;\n width: 100%;\n padding: 0.625rem 0.75rem;\n border: none;\n border-bottom: 1px solid var(--color-border, #E5E7EB);\n background: transparent;\n color: var(--issuer-button-text);\n cursor: pointer;\n font: inherit;\n text-align: left;\n box-sizing: border-box;\n }\n\n .issuer-dropdown-item:last-child {\n border-bottom: none;\n }\n\n .issuer-dropdown-item:hover {\n background: var(--color-header-menu-item-hover, #e6dcff);\n border-radius: var(--border-radius-base-md, 0.5rem);\n }\n\n .popup-footer {\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 8px;\n padding: 0.75rem 1rem 1rem;\n }\n\n .popup-footer-hr {\n margin: 0;\n border: none;\n border-top: 1px solid var(--popup-border, #E5E7EB);\n }\n\n .popup-cancel-button {\n padding: 0.5rem 1.25rem;\n border: 1px solid #C0BFC7;\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--popup-background);\n color: #314158;\n cursor: pointer;\n font: inherit;\n }\n\n .popup-cancel-button:hover {\n background: #D1D5DB;\n }\n\n .popup-login-button {\n padding: 0.5rem 1.25rem;\n border: none;\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--lavender-900, #7c4cff);\n color: #ffffff;\n cursor: pointer;\n font: inherit;\n }\n\n .popup-login-button:hover {\n background: #6a3de8;\n }\n\n .popup-login-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .error-msg {\n color: var(--error-text-color);\n font-size: 0.875rem;\n margin-top: 8px;\n }\n\n @media (max-width: 40rem) {\n .popup-dialog {\n width: calc(100vw - 1rem);\n max-width: calc(100vw - 1rem);\n max-height: calc(100dvh - 1rem);\n }\n\n .popup-box {\n width: calc(100vw - 1rem);\n min-width: 0;\n max-width: calc(100vw - 1rem);\n max-height: calc(100dvh - 1rem);\n border-radius: var(--border-radius-base, 0.3125rem);\n }\n\n .popup-top-menu,\n .issuer-text-section,\n .popup-footer {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n }\n\n .popup-footer {\n flex-wrap: wrap;\n gap: 0.625rem;\n }\n\n .popup-footer > button {\n flex: 1 1 100%;\n }\n\n .issuer-text-row,\n .issuer-input-field-row {\n width: 100%;\n }\n }\n `\n\n declare label: string\n declare theme: 'light' \| 'dark'\n declare issuerUrl: string\n declare icon: string\n declare layout: 'desktop' \| 'mobile'\n declare _popupOpen: boolean\n declare _issuerInputValue: string\n declare _dropdownOpen: boolean\n\n private _issuerInputId = `issuer-url-input-${Math.random().toString(36).slice(2, 10)}`\n private _errorMsg = ''\n\n constructor () {\n super()\n this.label = 'Log In'\n this.theme = 'light'\n this.issuerUrl = ''\n this.icon = ''\n this.layout = 'desktop'\n this._popupOpen = false\n this._issuerInputValue = ''\n this._dropdownOpen = false\n }\n\n connectedCallback () {\n super.connectedCallback()\n }\n\n disconnectedCallback () {\n super.disconnectedCallback()\n }\n\n private _openPopup () {\n const offline = offlineTestID()\n if (offline) {\n this._loginComplete(offline.uri)\n return\n }\n this._issuerInputValue = (typeof localStorage !== 'undefined' && localStorage.getItem('loginIssuer')) \|\| this.issuerUrl \|\| ''\n this._errorMsg = ''\n this._popupOpen = true\n }\n\n private _closePopup () {\n this._popupOpen = false\n }\n\n updated () {\n const dialog = this.shadowRoot?.querySelector('dialog') as HTMLDialogElement \| null\n if (!dialog) return\n if (this._popupOpen && !dialog.open) {\n dialog.showModal()\n } else if (!this._popupOpen && dialog.open) {\n dialog.close()\n }\n }\n\n private async _loginToIssuer (issuerUri: string) {\n if (!issuerUri) return\n try {\n // clear authorization metadata from store\n ;(solidLogicSingleton.store.updater as any).flagAuthorizationMetadata()\n\n const preLoginRedirectHash = new URL(window.location.href).hash\n if (preLoginRedirectHash) {\n window.localStorage.setItem('preLoginRedirectHash', preLoginRedirectHash)\n }\n window.localStorage.setItem('loginIssuer', issuerUri)\n\n const locationUrl = new URL(window.location.href)\n locationUrl.hash = ''\n await authSession.login(issuerUri, locationUrl.href)\n } catch (err: any) {\n this._errorMsg = err.message \|\| String(err)\n this.requestUpdate()\n }\n }\n\n private _loginComplete (webIdUri: string) {\n authn.saveUser(webIdUri)\n this.dispatchEvent(new CustomEvent('login-success', {\n detail: { webId: webIdUri },\n bubbles: true,\n composed: true\n }))\n }\n\n private _handleGoClick () {\n this._dropdownOpen = false\n this._loginToIssuer(this._issuerInputValue)\n }\n\n private _toggleDropdown () {\n this._dropdownOpen = !this._dropdownOpen\n }\n\n private _selectIssuerFromDropdown (uri: string) {\n this._issuerInputValue = uri\n this._dropdownOpen = false\n }\n\n private _handleInputChange (e: Event) {\n this._issuerInputValue = (e.target as HTMLInputElement).value\n }\n\n private _handleInputKeydown (e: KeyboardEvent) {\n if (e.key === 'Enter') {\n this._loginToIssuer(this._issuerInputValue)\n }\n if (e.key === 'Escape') {\n this._closePopup()\n }\n }\n\n private _renderPopup () {\n const suggestedIssuers = getSuggestedIssuers()\n return html`\n <div class=\"popup-box\">\n <div class=\"popup-top-menu\">\n <span class=\"popup-title\">Select an identity provider</span>\n <button class=\"popup-close\" type=\"button\" aria-label=\"Close\" @click=\"${() => this._closePopup()}\">✕</button>\n </div>\n\n <div class=\"issuer-text-section\">\n <label class=\"issuer-text-label\" for=\"${this._issuerInputId}\">Solid Identity Provider</label>\n <div class=\"issuer-text-row\">\n <div class=\"issuer-input-wrapper\">\n <div class=\"issuer-input-field-row\">\n <input\n id=\"${this._issuerInputId}\"\n class=\"issuer-text-input\"\n type=\"text\"\n placeholder=\"https://example.com\"\n .value=\"${this._issuerInputValue}\"\n @input=\"${this._handleInputChange}\"\n @keydown=\"${this._handleInputKeydown}\"\n autocomplete=\"url\"\n />\n ${suggestedIssuers.length\n? html`\n <button\n class=\"issuer-dropdown-toggle\"\n type=\"button\"\n aria-label=\"Show identity provider suggestions\"\n aria-expanded=\"${this._dropdownOpen}\"\n @click=\"${() => this._toggleDropdown()}\"\n >${downArrowIcon}</button>\n `\n: ''}\n </div>\n ${this._dropdownOpen && suggestedIssuers.length\n? html`\n <div class=\"issuer-dropdown-list\" role=\"listbox\">\n ${suggestedIssuers.map(issuerInfo => html`\n <button\n class=\"issuer-dropdown-item\"\n type=\"button\"\n role=\"option\"\n @click=\"${() => this._selectIssuerFromDropdown(issuerInfo.uri)}\"\n >${issuerInfo.name}</button>\n `)}\n </div>\n `\n: ''}\n </div>\n </div>\n ${this._errorMsg ? html`<div class=\"error-msg\">${this._errorMsg}</div>` : ''}\n </div>\n <hr class=\"popup-footer-hr\" />\n <div class=\"popup-footer\">\n <button class=\"popup-cancel-button\" type=\"button\" @click=\"${() => this._closePopup()}\">Cancel</button>\n <button\n class=\"popup-login-button\"\n type=\"button\"\n ?disabled=\"${!this._issuerInputValue}\"\n @click=\"${() => this._handleGoClick()}\"\n >Log In</button>\n </div>\n </div>\n `\n }\n\n render () {\n return html`\n <button\n class=\"login-button\"\n type=\"button\"\n part=\"login-button\"\n @click=\"${() => this._openPopup()}\"\n >\n ${this.icon ? html`<img class=\"login-button-icon\" src=\"${this.icon}\" alt=\"\" aria-hidden=\"true\" part=\"login-button-icon\" />` : ''}\n <slot>${this.label}</slot>\n </button>\n\n <dialog\n class=\"popup-dialog\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Select an identity provider\"\n @cancel=\"${(e: Event) => { e.preventDefault(); this._closePopup() }}\"\n @click=\"${(e: MouseEvent) => { if (e.target === e.currentTarget) this._closePopup() }}\"\n >\n ${this._popupOpen ? this._renderPopup() : ''}\n </dialog>\n `\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"LoginButton.cjs.js","names":[],"sources":["../../../../../src/v2/components/auth/loginButton/LoginButton.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { authSession, authn, getSuggestedIssuers, offlineTestID, solidLogicSingleton } from 'solid-logic'\nimport { phoneIcon as downArrowIcon } from './downArrow'\n\nexport class LoginButton extends LitElement {\n static properties = {\n label: { type: String, reflect: true },\n theme: { type: String, reflect: true },\n issuerUrl: { type: String, attribute: 'issuer-url', reflect: true },\n icon: { type: String, reflect: true },\n layout: { type: String, reflect: true },\n _popupOpen: { state: true },\n _issuerInputValue: { state: true },\n _dropdownOpen: { state: true }\n }\n\n static styles = css`\n :host { /* default theme */\n display: inline-block;\n position: relative;\n z-index: 400;\n --login-button-background: var(--lavender-900, #7c4cff);\n --login-button-text: var(--color-header-text, #ffffff);\n --popup-background: var(--color-background, #F8F9FB);\n --popup-text: var(--color-text, #1A1A1A);\n --popup-border: var(--color-border, #E5E7EB);\n --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));\n --popup-overlay-background: rgba(0, 0, 0, 0.6);\n --issuer-input-background: var(--color-background, #F8F9FB);\n --issuer-input-text: var(--color-text, #1A1A1A);\n --issuer-input-border: var(--color-text, #1A1A1A);\n --issuer-button-background: var(--color-background, #F8F9FB);\n --issuer-button-text: var(--color-text, #1A1A1A);\n --issuer-button-border: var(--color-border, #E5E7EB);\n --issuer-button-hover-background: var(--lavender-900, #7c4cff);\n --issuer-label-color: var(--grey-purple-700, #1A1A1A);\n --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;\n --error-text-color: var(--color-error, #B00020);\n }\n\n :host([theme='dark']) {\n display: inline-block;\n position: relative;\n z-index: 900;\n --login-button-background: var(--lavender-900, #7c4cff);\n --login-button-text: var(--color-header-text, #ffffff);\n --popup-background: var(--color-background, #F8F9FB);\n --popup-text: var(--color-text, #1A1A1A);\n --popup-border: var(--color-border, #E5E7EB);\n --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));\n --popup-overlay-background: rgba(0, 0, 0, 0.6);\n --issuer-input-background: var(--color-background, #F8F9FB);\n --issuer-input-text: var(--color-text, #1A1A1A);\n --issuer-input-border: var(--color-text, #1A1A1A);\n --issuer-button-background: var(--color-background, #F8F9FB);\n --issuer-button-text: var(--color-text, #1A1A1A);\n --issuer-button-border: var(--color-text, #1A1A1A);\n --issuer-button-hover-background: var(--lavender-900, #7c4cff);\n --issuer-label-color: var(--grey-purple-700, #1A1A1A);\n --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;\n --error-text-color: var(--color-error, #B00020);\n }\n\n .login-button {\n display: flex;\n height: 35px;\n padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);\n align-items: center;\n gap: var(--spacing-xxs, 0.3125rem);\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--login-button-background);\n border: none;\n color: var(--login-button-text);\n cursor: pointer;\n font: inherit;\n line-height: 1;\n white-space: nowrap;\n text-decoration: none;\n box-sizing: border-box;\n transition: transform 0.2s ease;\n }\n\n .login-button-icon {\n width: 16px;\n height: 16px;\n display: inline-block;\n object-fit: contain;\n }\n\n .login-button:active {\n transform: translateY(1px);\n }\n\n .popup-dialog {\n border: none;\n padding: 0;\n background: transparent;\n outline: none;\n overflow: visible;\n width: min(30rem, calc(100vw - 2rem));\n max-width: calc(100vw - 2rem);\n max-height: calc(100dvh - 2rem);\n }\n\n .popup-dialog::backdrop {\n background: var(--popup-overlay-background, rgba(0, 0, 0, 0.6));\n }\n\n .popup-box {\n background: var(--popup-background);\n color: var(--popup-text);\n box-shadow: var(--popup-shadow);\n border: 1px solid var(--popup-border);\n border-radius: var(--border-radius-md, 0.5rem);\n width: min(30rem, calc(100vw - 2rem));\n min-width: min(30rem, calc(100vw - 2rem));\n max-width: calc(100vw - 2rem);\n max-height: calc(100dvh - 2rem);\n overflow: auto;\n z-index: 1001;\n }\n\n .popup-top-menu {\n border-bottom: 1px solid #DDD;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-bottom: 8px;\n margin-bottom: 8px;\n padding: 1rem;\n background: var(--gray-200, #E5E7EB);\n }\n\n .popup-title {\n font-weight: 800;\n }\n\n .popup-close {\n background: transparent;\n border: none;\n cursor: pointer;\n font-size: 1.25rem;\n line-height: 1;\n padding: 0 0.25rem;\n }\n\n .issuer-text-section {\n display: flex;\n flex-direction: column;\n padding: 1rem 1rem 1.75rem;\n }\n\n .issuer-text-label {\n color: var(--issuer-label-color);\n margin-bottom: 6px;\n }\n\n .issuer-text-row {\n display: flex;\n flex-direction: row;\n gap: 6px;\n align-items: flex-start;\n }\n\n .issuer-input-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n position: relative;\n }\n\n .issuer-input-field-row {\n display: flex;\n flex-direction: row;\n position: relative;\n }\n\n .issuer-text-input {\n flex: 1;\n padding: 0.375rem 2.75rem 0.375rem 0.5rem;\n border: 1px solid var(--issuer-input-border);\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--issuer-input-background);\n color: var(--issuer-input-text);\n font: inherit;\n min-width: 0;\n }\n\n .issuer-text-input::placeholder {\n color: var(--issuer-placeholder-color);\n }\n\n .issuer-dropdown-toggle {\n position: absolute;\n right: 6px;\n top: 50%;\n transform: translateY(-50%);\n width: 26px;\n height: 26px;\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: var(--border-radius-base, 0.3125rem);\n }\n\n .issuer-dropdown-toggle:hover {\n background: var(--color-header-menu-item-hover, #e6dcff);\n }\n\n .issuer-dropdown-toggle svg {\n width: 14px;\n height: 14px;\n display: block;\n }\n\n .issuer-dropdown-list {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n right: 0;\n border: 1px solid var(--color-border, #E5E7EB);\n border-top: none;\n border-radius: 0 0 var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem);\n background: var(--issuer-input-background);\n overflow: visible;\n z-index: 10;\n box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);\n }\n\n .issuer-dropdown-item {\n display: block;\n width: 100%;\n padding: 0.625rem 0.75rem;\n border: none;\n border-bottom: 1px solid var(--color-border, #E5E7EB);\n background: transparent;\n color: var(--issuer-button-text);\n cursor: pointer;\n font: inherit;\n text-align: left;\n box-sizing: border-box;\n }\n\n .issuer-dropdown-item:last-child {\n border-bottom: none;\n }\n\n .issuer-dropdown-item:hover {\n background: var(--color-header-menu-item-hover, #e6dcff);\n border-radius: var(--border-radius-base-md, 0.5rem);\n }\n\n .popup-footer {\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 8px;\n padding: 0.75rem 1rem 1rem;\n }\n\n .popup-footer-hr {\n margin: 0;\n border: none;\n border-top: 1px solid var(--popup-border, #E5E7EB);\n }\n\n .popup-cancel-button {\n padding: 0.5rem 1.25rem;\n border: 1px solid #C0BFC7;\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--popup-background);\n color: #314158;\n cursor: pointer;\n font: inherit;\n }\n\n .popup-cancel-button:hover {\n background: #D1D5DB;\n }\n\n .popup-login-button {\n padding: 0.5rem 1.25rem;\n border: none;\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--lavender-900, #7c4cff);\n color: #ffffff;\n cursor: pointer;\n font: inherit;\n }\n\n .popup-login-button:hover {\n background: #6a3de8;\n }\n\n .popup-login-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .error-msg {\n color: var(--error-text-color);\n font-size: 0.875rem;\n margin-top: 8px;\n }\n\n @media (max-width: 40rem) {\n .popup-dialog {\n width: calc(100vw - 1rem);\n max-width: calc(100vw - 1rem);\n max-height: calc(100dvh - 1rem);\n }\n\n .popup-box {\n width: calc(100vw - 1rem);\n min-width: 0;\n max-width: calc(100vw - 1rem);\n max-height: calc(100dvh - 1rem);\n border-radius: var(--border-radius-base, 0.3125rem);\n }\n\n .popup-top-menu,\n .issuer-text-section,\n .popup-footer {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n }\n\n .popup-footer {\n flex-wrap: wrap;\n gap: 0.625rem;\n }\n\n .popup-footer > button {\n flex: 1 1 100%;\n }\n\n .issuer-text-row,\n .issuer-input-field-row {\n width: 100%;\n }\n }\n `\n\n declare label: string\n declare theme: 'light' \| 'dark'\n declare issuerUrl: string\n declare icon: string\n declare layout: 'desktop' \| 'mobile'\n declare _popupOpen: boolean\n declare _issuerInputValue: string\n declare _dropdownOpen: boolean\n\n private _issuerInputId = `issuer-url-input-${Math.random().toString(36).slice(2, 10)}`\n private _errorMsg = ''\n\n constructor () {\n super()\n this.label = 'Log In'\n this.theme = 'light'\n this.issuerUrl = ''\n this.icon = ''\n this.layout = 'desktop'\n this._popupOpen = false\n this._issuerInputValue = ''\n this._dropdownOpen = false\n }\n\n connectedCallback () {\n super.connectedCallback()\n }\n\n disconnectedCallback () {\n super.disconnectedCallback()\n }\n\n private _openPopup () {\n const offline = offlineTestID()\n if (offline) {\n this._loginComplete(offline.uri)\n return\n }\n this._issuerInputValue = (typeof localStorage !== 'undefined' && localStorage.getItem('loginIssuer')) \|\| this.issuerUrl \|\| ''\n this._errorMsg = ''\n this._popupOpen = true\n }\n\n private _closePopup () {\n this._popupOpen = false\n }\n\n updated () {\n const dialog = this.shadowRoot?.querySelector('dialog') as HTMLDialogElement \| null\n if (!dialog) return\n if (this._popupOpen && !dialog.open) {\n dialog.showModal()\n } else if (!this._popupOpen && dialog.open) {\n dialog.close()\n }\n }\n\n private async _loginToIssuer (issuerUri: string) {\n if (!issuerUri) return\n try {\n // clear authorization metadata from store\n ;(solidLogicSingleton.store.updater as any).flagAuthorizationMetadata()\n\n const preLoginRedirectHash = new URL(window.location.href).hash\n if (preLoginRedirectHash) {\n window.localStorage.setItem('preLoginRedirectHash', preLoginRedirectHash)\n }\n window.localStorage.setItem('loginIssuer', issuerUri)\n\n const locationUrl = new URL(window.location.href)\n locationUrl.hash = ''\n await authSession.login(issuerUri, locationUrl.href)\n } catch (err: any) {\n this._errorMsg = err.message \|\| String(err)\n this.requestUpdate()\n }\n }\n\n private _loginComplete (webIdUri: string) {\n authn.saveUser(webIdUri)\n this.dispatchEvent(new CustomEvent('login-success', {\n detail: { webId: webIdUri },\n bubbles: true,\n composed: true\n }))\n }\n\n private _handleGoClick () {\n this._dropdownOpen = false\n this._loginToIssuer(this._issuerInputValue)\n }\n\n private _toggleDropdown () {\n this._dropdownOpen = !this._dropdownOpen\n }\n\n private _selectIssuerFromDropdown (uri: string) {\n this._issuerInputValue = uri\n this._dropdownOpen = false\n }\n\n private _handleInputChange (e: Event) {\n this._issuerInputValue = (e.target as HTMLInputElement).value\n }\n\n private _handleInputKeydown (e: KeyboardEvent) {\n if (e.key === 'Enter') {\n this._loginToIssuer(this._issuerInputValue)\n }\n if (e.key === 'Escape') {\n this._closePopup()\n }\n }\n\n private _renderPopup () {\n const suggestedIssuers = getSuggestedIssuers()\n return html`\n <div class=\"popup-box\">\n <div class=\"popup-top-menu\">\n <span class=\"popup-title\">Select an identity provider</span>\n <button class=\"popup-close\" type=\"button\" aria-label=\"Close\" @click=\"${() => this._closePopup()}\">✕</button>\n </div>\n\n <div class=\"issuer-text-section\">\n <label class=\"issuer-text-label\" for=\"${this._issuerInputId}\">Solid Identity Provider</label>\n <div class=\"issuer-text-row\">\n <div class=\"issuer-input-wrapper\">\n <div class=\"issuer-input-field-row\">\n <input\n id=\"${this._issuerInputId}\"\n class=\"issuer-text-input\"\n type=\"text\"\n placeholder=\"https://example.com\"\n .value=\"${this._issuerInputValue}\"\n @input=\"${this._handleInputChange}\"\n @keydown=\"${this._handleInputKeydown}\"\n autocomplete=\"url\"\n />\n ${suggestedIssuers.length\n? html`\n <button\n class=\"issuer-dropdown-toggle\"\n type=\"button\"\n aria-label=\"Show identity provider suggestions\"\n aria-expanded=\"${this._dropdownOpen}\"\n @click=\"${() => this._toggleDropdown()}\"\n >${downArrowIcon}</button>\n `\n: ''}\n </div>\n ${this._dropdownOpen && suggestedIssuers.length\n? html`\n <div class=\"issuer-dropdown-list\" role=\"listbox\">\n ${suggestedIssuers.map(issuerInfo => html`\n <button\n class=\"issuer-dropdown-item\"\n type=\"button\"\n role=\"option\"\n @click=\"${() => this._selectIssuerFromDropdown(issuerInfo.uri)}\"\n >${issuerInfo.name}</button>\n `)}\n </div>\n `\n: ''}\n </div>\n </div>\n ${this._errorMsg ? html`<div class=\"error-msg\">${this._errorMsg}</div>` : ''}\n </div>\n <hr class=\"popup-footer-hr\" />\n <div class=\"popup-footer\">\n <button class=\"popup-cancel-button\" type=\"button\" @click=\"${() => this._closePopup()}\">Cancel</button>\n <button\n class=\"popup-login-button\"\n type=\"button\"\n ?disabled=\"${!this._issuerInputValue}\"\n @click=\"${() => this._handleGoClick()}\"\n >Log In</button>\n </div>\n </div>\n `\n }\n\n render () {\n return html`\n <button\n class=\"login-button\"\n type=\"button\"\n part=\"login-button\"\n @click=\"${() => this._openPopup()}\"\n >\n ${this.icon ? html`<img class=\"login-button-icon\" src=\"${this.icon}\" alt=\"\" aria-hidden=\"true\" part=\"login-button-icon\" />` : ''}\n <slot>${this.label}</slot>\n </button>\n\n <dialog\n class=\"popup-dialog\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Select an identity provider\"\n @cancel=\"${(e: Event) => { e.preventDefault(); this._closePopup() }}\"\n @click=\"${(e: MouseEvent) => { if (e.target === e.currentTarget) this._closePopup() }}\"\n >\n ${this._popupOpen ? this._renderPopup() : ''}\n </dialog>\n `\n }\n}\n"],"mappings":"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"}

package/dist/v2/components/auth/loginButton/LoginButton.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LoginButton.esm.js","names":[],"sources":["../../../../../src/v2/components/auth/loginButton/LoginButton.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { authSession, authn, getSuggestedIssuers, offlineTestID, solidLogicSingleton } from 'solid-logic'\nimport { phoneIcon as downArrowIcon } from './downArrow'\n\nexport class LoginButton extends LitElement {\n static properties = {\n label: { type: String, reflect: true },\n theme: { type: String, reflect: true },\n issuerUrl: { type: String, attribute: 'issuer-url', reflect: true },\n icon: { type: String, reflect: true },\n layout: { type: String, reflect: true },\n _popupOpen: { state: true },\n _issuerInputValue: { state: true },\n _dropdownOpen: { state: true }\n }\n\n static styles = css`\n :host { /* default theme */\n display: inline-block;\n position: relative;\n z-index: 400;\n --login-button-background: var(--lavender-900, #7c4cff);\n --login-button-text: var(--color-header-text, #ffffff);\n --popup-background: var(--color-background, #F8F9FB);\n --popup-text: var(--color-text, #1A1A1A);\n --popup-border: var(--color-border, #E5E7EB);\n --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));\n --popup-overlay-background: rgba(0, 0, 0, 0.6);\n --issuer-input-background: var(--color-background, #F8F9FB);\n --issuer-input-text: var(--color-text, #1A1A1A);\n --issuer-input-border: var(--color-text, #1A1A1A);\n --issuer-button-background: var(--color-background, #F8F9FB);\n --issuer-button-text: var(--color-text, #1A1A1A);\n --issuer-button-border: var(--color-border, #E5E7EB);\n --issuer-button-hover-background: var(--lavender-900, #7c4cff);\n --issuer-label-color: var(--grey-purple-700, #1A1A1A);\n --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;\n --error-text-color: var(--color-error, #B00020);\n }\n\n :host([theme='dark']) {\n display: inline-block;\n position: relative;\n z-index: 900;\n --login-button-background: var(--lavender-900, #7c4cff);\n --login-button-text: var(--color-header-text, #ffffff);\n --popup-background: var(--color-background, #F8F9FB);\n --popup-text: var(--color-text, #1A1A1A);\n --popup-border: var(--color-border, #E5E7EB);\n --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));\n --popup-overlay-background: rgba(0, 0, 0, 0.6);\n --issuer-input-background: var(--color-background, #F8F9FB);\n --issuer-input-text: var(--color-text, #1A1A1A);\n --issuer-input-border: var(--color-text, #1A1A1A);\n --issuer-button-background: var(--color-background, #F8F9FB);\n --issuer-button-text: var(--color-text, #1A1A1A);\n --issuer-button-border: var(--color-text, #1A1A1A);\n --issuer-button-hover-background: var(--lavender-900, #7c4cff);\n --issuer-label-color: var(--grey-purple-700, #1A1A1A);\n --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;\n --error-text-color: var(--color-error, #B00020);\n }\n\n .login-button {\n display: flex;\n height: 35px;\n padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);\n align-items: center;\n gap: var(--spacing-xxs, 0.3125rem);\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--login-button-background);\n border: none;\n color: var(--login-button-text);\n cursor: pointer;\n font: inherit;\n line-height: 1;\n white-space: nowrap;\n text-decoration: none;\n box-sizing: border-box;\n transition: transform 0.2s ease;\n }\n\n .login-button-icon {\n width: 16px;\n height: 16px;\n display: inline-block;\n object-fit: contain;\n }\n\n .login-button:active {\n transform: translateY(1px);\n }\n\n .popup-dialog {\n border: none;\n padding: 0;\n background: transparent;\n outline: none;\n overflow: visible;\n width: min(30rem, calc(100vw - 2rem));\n max-width: calc(100vw - 2rem);\n max-height: calc(100dvh - 2rem);\n }\n\n .popup-dialog::backdrop {\n background: var(--popup-overlay-background, rgba(0, 0, 0, 0.6));\n }\n\n .popup-box {\n background: var(--popup-background);\n color: var(--popup-text);\n box-shadow: var(--popup-shadow);\n border: 1px solid var(--popup-border);\n border-radius: var(--border-radius-md, 0.5rem);\n width: min(30rem, calc(100vw - 2rem));\n min-width: min(30rem, calc(100vw - 2rem));\n max-width: calc(100vw - 2rem);\n max-height: calc(100dvh - 2rem);\n overflow: auto;\n z-index: 1001;\n }\n\n .popup-top-menu {\n border-bottom: 1px solid #DDD;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-bottom: 8px;\n margin-bottom: 8px;\n padding: 1rem;\n background: var(--gray-200, #E5E7EB);\n }\n\n .popup-title {\n font-weight: 800;\n }\n\n .popup-close {\n background: transparent;\n border: none;\n cursor: pointer;\n font-size: 1.25rem;\n line-height: 1;\n padding: 0 0.25rem;\n }\n\n .issuer-text-section {\n display: flex;\n flex-direction: column;\n padding: 1rem 1rem 1.75rem;\n }\n\n .issuer-text-label {\n color: var(--issuer-label-color);\n margin-bottom: 6px;\n }\n\n .issuer-text-row {\n display: flex;\n flex-direction: row;\n gap: 6px;\n align-items: flex-start;\n }\n\n .issuer-input-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n position: relative;\n }\n\n .issuer-input-field-row {\n display: flex;\n flex-direction: row;\n position: relative;\n }\n\n .issuer-text-input {\n flex: 1;\n padding: 0.375rem 2.75rem 0.375rem 0.5rem;\n border: 1px solid var(--issuer-input-border);\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--issuer-input-background);\n color: var(--issuer-input-text);\n font: inherit;\n min-width: 0;\n }\n\n .issuer-text-input::placeholder {\n color: var(--issuer-placeholder-color);\n }\n\n .issuer-dropdown-toggle {\n position: absolute;\n right: 6px;\n top: 50%;\n transform: translateY(-50%);\n width: 26px;\n height: 26px;\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: var(--border-radius-base, 0.3125rem);\n }\n\n .issuer-dropdown-toggle:hover {\n background: var(--color-header-menu-item-hover, #e6dcff);\n }\n\n .issuer-dropdown-toggle svg {\n width: 14px;\n height: 14px;\n display: block;\n }\n\n .issuer-dropdown-list {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n right: 0;\n border: 1px solid var(--color-border, #E5E7EB);\n border-top: none;\n border-radius: 0 0 var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem);\n background: var(--issuer-input-background);\n overflow: visible;\n z-index: 10;\n box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);\n }\n\n .issuer-dropdown-item {\n display: block;\n width: 100%;\n padding: 0.625rem 0.75rem;\n border: none;\n border-bottom: 1px solid var(--color-border, #E5E7EB);\n background: transparent;\n color: var(--issuer-button-text);\n cursor: pointer;\n font: inherit;\n text-align: left;\n box-sizing: border-box;\n }\n\n .issuer-dropdown-item:last-child {\n border-bottom: none;\n }\n\n .issuer-dropdown-item:hover {\n background: var(--color-header-menu-item-hover, #e6dcff);\n border-radius: var(--border-radius-base-md, 0.5rem);\n }\n\n .popup-footer {\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 8px;\n padding: 0.75rem 1rem 1rem;\n }\n\n .popup-footer-hr {\n margin: 0;\n border: none;\n border-top: 1px solid var(--popup-border, #E5E7EB);\n }\n\n .popup-cancel-button {\n padding: 0.5rem 1.25rem;\n border: 1px solid #C0BFC7;\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--popup-background);\n color: #314158;\n cursor: pointer;\n font: inherit;\n }\n\n .popup-cancel-button:hover {\n background: #D1D5DB;\n }\n\n .popup-login-button {\n padding: 0.5rem 1.25rem;\n border: none;\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--lavender-900, #7c4cff);\n color: #ffffff;\n cursor: pointer;\n font: inherit;\n }\n\n .popup-login-button:hover {\n background: #6a3de8;\n }\n\n .popup-login-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .error-msg {\n color: var(--error-text-color);\n font-size: 0.875rem;\n margin-top: 8px;\n }\n\n @media (max-width: 40rem) {\n .popup-dialog {\n width: calc(100vw - 1rem);\n max-width: calc(100vw - 1rem);\n max-height: calc(100dvh - 1rem);\n }\n\n .popup-box {\n width: calc(100vw - 1rem);\n min-width: 0;\n max-width: calc(100vw - 1rem);\n max-height: calc(100dvh - 1rem);\n border-radius: var(--border-radius-base, 0.3125rem);\n }\n\n .popup-top-menu,\n .issuer-text-section,\n .popup-footer {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n }\n\n .popup-footer {\n flex-wrap: wrap;\n gap: 0.625rem;\n }\n\n .popup-footer > button {\n flex: 1 1 100%;\n }\n\n .issuer-text-row,\n .issuer-input-field-row {\n width: 100%;\n }\n }\n `\n\n declare label: string\n declare theme: 'light' \| 'dark'\n declare issuerUrl: string\n declare icon: string\n declare layout: 'desktop' \| 'mobile'\n declare _popupOpen: boolean\n declare _issuerInputValue: string\n declare _dropdownOpen: boolean\n\n private _issuerInputId = `issuer-url-input-${Math.random().toString(36).slice(2, 10)}`\n private _errorMsg = ''\n\n constructor () {\n super()\n this.label = 'Log In'\n this.theme = 'light'\n this.issuerUrl = ''\n this.icon = ''\n this.layout = 'desktop'\n this._popupOpen = false\n this._issuerInputValue = ''\n this._dropdownOpen = false\n }\n\n connectedCallback () {\n super.connectedCallback()\n }\n\n disconnectedCallback () {\n super.disconnectedCallback()\n }\n\n private _openPopup () {\n const offline = offlineTestID()\n if (offline) {\n this._loginComplete(offline.uri)\n return\n }\n this._issuerInputValue = (typeof localStorage !== 'undefined' && localStorage.getItem('loginIssuer')) \|\| this.issuerUrl \|\| ''\n this._errorMsg = ''\n this._popupOpen = true\n }\n\n private _closePopup () {\n this._popupOpen = false\n }\n\n updated () {\n const dialog = this.shadowRoot?.querySelector('dialog') as HTMLDialogElement \| null\n if (!dialog) return\n if (this._popupOpen && !dialog.open) {\n dialog.showModal()\n } else if (!this._popupOpen && dialog.open) {\n dialog.close()\n }\n }\n\n private async _loginToIssuer (issuerUri: string) {\n if (!issuerUri) return\n try {\n // clear authorization metadata from store\n ;(solidLogicSingleton.store.updater as any).flagAuthorizationMetadata()\n\n const preLoginRedirectHash = new URL(window.location.href).hash\n if (preLoginRedirectHash) {\n window.localStorage.setItem('preLoginRedirectHash', preLoginRedirectHash)\n }\n window.localStorage.setItem('loginIssuer', issuerUri)\n\n const locationUrl = new URL(window.location.href)\n locationUrl.hash = ''\n await authSession.login(issuerUri, locationUrl.href)\n } catch (err: any) {\n this._errorMsg = err.message \|\| String(err)\n this.requestUpdate()\n }\n }\n\n private _loginComplete (webIdUri: string) {\n authn.saveUser(webIdUri)\n this.dispatchEvent(new CustomEvent('login-success', {\n detail: { webId: webIdUri },\n bubbles: true,\n composed: true\n }))\n }\n\n private _handleGoClick () {\n this._dropdownOpen = false\n this._loginToIssuer(this._issuerInputValue)\n }\n\n private _toggleDropdown () {\n this._dropdownOpen = !this._dropdownOpen\n }\n\n private _selectIssuerFromDropdown (uri: string) {\n this._issuerInputValue = uri\n this._dropdownOpen = false\n }\n\n private _handleInputChange (e: Event) {\n this._issuerInputValue = (e.target as HTMLInputElement).value\n }\n\n private _handleInputKeydown (e: KeyboardEvent) {\n if (e.key === 'Enter') {\n this._loginToIssuer(this._issuerInputValue)\n }\n if (e.key === 'Escape') {\n this._closePopup()\n }\n }\n\n private _renderPopup () {\n const suggestedIssuers = getSuggestedIssuers()\n return html`\n <div class=\"popup-box\">\n <div class=\"popup-top-menu\">\n <span class=\"popup-title\">Select an identity provider</span>\n <button class=\"popup-close\" type=\"button\" aria-label=\"Close\" @click=\"${() => this._closePopup()}\">✕</button>\n </div>\n\n <div class=\"issuer-text-section\">\n <label class=\"issuer-text-label\" for=\"${this._issuerInputId}\">Solid Identity Provider</label>\n <div class=\"issuer-text-row\">\n <div class=\"issuer-input-wrapper\">\n <div class=\"issuer-input-field-row\">\n <input\n id=\"${this._issuerInputId}\"\n class=\"issuer-text-input\"\n type=\"text\"\n placeholder=\"https://example.com\"\n .value=\"${this._issuerInputValue}\"\n @input=\"${this._handleInputChange}\"\n @keydown=\"${this._handleInputKeydown}\"\n autocomplete=\"url\"\n />\n ${suggestedIssuers.length\n? html`\n <button\n class=\"issuer-dropdown-toggle\"\n type=\"button\"\n aria-label=\"Show identity provider suggestions\"\n aria-expanded=\"${this._dropdownOpen}\"\n @click=\"${() => this._toggleDropdown()}\"\n >${downArrowIcon}</button>\n `\n: ''}\n </div>\n ${this._dropdownOpen && suggestedIssuers.length\n? html`\n <div class=\"issuer-dropdown-list\" role=\"listbox\">\n ${suggestedIssuers.map(issuerInfo => html`\n <button\n class=\"issuer-dropdown-item\"\n type=\"button\"\n role=\"option\"\n @click=\"${() => this._selectIssuerFromDropdown(issuerInfo.uri)}\"\n >${issuerInfo.name}</button>\n `)}\n </div>\n `\n: ''}\n </div>\n </div>\n ${this._errorMsg ? html`<div class=\"error-msg\">${this._errorMsg}</div>` : ''}\n </div>\n <hr class=\"popup-footer-hr\" />\n <div class=\"popup-footer\">\n <button class=\"popup-cancel-button\" type=\"button\" @click=\"${() => this._closePopup()}\">Cancel</button>\n <button\n class=\"popup-login-button\"\n type=\"button\"\n ?disabled=\"${!this._issuerInputValue}\"\n @click=\"${() => this._handleGoClick()}\"\n >Log In</button>\n </div>\n </div>\n `\n }\n\n render () {\n return html`\n <button\n class=\"login-button\"\n type=\"button\"\n part=\"login-button\"\n @click=\"${() => this._openPopup()}\"\n >\n ${this.icon ? html`<img class=\"login-button-icon\" src=\"${this.icon}\" alt=\"\" aria-hidden=\"true\" part=\"login-button-icon\" />` : ''}\n <slot>${this.label}</slot>\n </button>\n\n <dialog\n class=\"popup-dialog\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Select an identity provider\"\n @cancel=\"${(e: Event) => { e.preventDefault(); this._closePopup() }}\"\n @click=\"${(e: MouseEvent) => { if (e.target === e.currentTarget) this._closePopup() }}\"\n >\n ${this._popupOpen ? this._renderPopup() : ''}\n </dialog>\n `\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"LoginButton.esm.js","names":[],"sources":["../../../../../src/v2/components/auth/loginButton/LoginButton.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { authSession, authn, getSuggestedIssuers, offlineTestID, solidLogicSingleton } from 'solid-logic'\nimport { phoneIcon as downArrowIcon } from './downArrow'\n\nexport class LoginButton extends LitElement {\n static properties = {\n label: { type: String, reflect: true },\n theme: { type: String, reflect: true },\n issuerUrl: { type: String, attribute: 'issuer-url', reflect: true },\n icon: { type: String, reflect: true },\n layout: { type: String, reflect: true },\n _popupOpen: { state: true },\n _issuerInputValue: { state: true },\n _dropdownOpen: { state: true }\n }\n\n static styles = css`\n :host { /* default theme */\n display: inline-block;\n position: relative;\n z-index: 400;\n --login-button-background: var(--lavender-900, #7c4cff);\n --login-button-text: var(--color-header-text, #ffffff);\n --popup-background: var(--color-background, #F8F9FB);\n --popup-text: var(--color-text, #1A1A1A);\n --popup-border: var(--color-border, #E5E7EB);\n --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));\n --popup-overlay-background: rgba(0, 0, 0, 0.6);\n --issuer-input-background: var(--color-background, #F8F9FB);\n --issuer-input-text: var(--color-text, #1A1A1A);\n --issuer-input-border: var(--color-text, #1A1A1A);\n --issuer-button-background: var(--color-background, #F8F9FB);\n --issuer-button-text: var(--color-text, #1A1A1A);\n --issuer-button-border: var(--color-border, #E5E7EB);\n --issuer-button-hover-background: var(--lavender-900, #7c4cff);\n --issuer-label-color: var(--grey-purple-700, #1A1A1A);\n --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;\n --error-text-color: var(--color-error, #B00020);\n }\n\n :host([theme='dark']) {\n display: inline-block;\n position: relative;\n z-index: 900;\n --login-button-background: var(--lavender-900, #7c4cff);\n --login-button-text: var(--color-header-text, #ffffff);\n --popup-background: var(--color-background, #F8F9FB);\n --popup-text: var(--color-text, #1A1A1A);\n --popup-border: var(--color-border, #E5E7EB);\n --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));\n --popup-overlay-background: rgba(0, 0, 0, 0.6);\n --issuer-input-background: var(--color-background, #F8F9FB);\n --issuer-input-text: var(--color-text, #1A1A1A);\n --issuer-input-border: var(--color-text, #1A1A1A);\n --issuer-button-background: var(--color-background, #F8F9FB);\n --issuer-button-text: var(--color-text, #1A1A1A);\n --issuer-button-border: var(--color-text, #1A1A1A);\n --issuer-button-hover-background: var(--lavender-900, #7c4cff);\n --issuer-label-color: var(--grey-purple-700, #1A1A1A);\n --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;\n --error-text-color: var(--color-error, #B00020);\n }\n\n .login-button {\n display: flex;\n height: 35px;\n padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);\n align-items: center;\n gap: var(--spacing-xxs, 0.3125rem);\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--login-button-background);\n border: none;\n color: var(--login-button-text);\n cursor: pointer;\n font: inherit;\n line-height: 1;\n white-space: nowrap;\n text-decoration: none;\n box-sizing: border-box;\n transition: transform 0.2s ease;\n }\n\n .login-button-icon {\n width: 16px;\n height: 16px;\n display: inline-block;\n object-fit: contain;\n }\n\n .login-button:active {\n transform: translateY(1px);\n }\n\n .popup-dialog {\n border: none;\n padding: 0;\n background: transparent;\n outline: none;\n overflow: visible;\n width: min(30rem, calc(100vw - 2rem));\n max-width: calc(100vw - 2rem);\n max-height: calc(100dvh - 2rem);\n }\n\n .popup-dialog::backdrop {\n background: var(--popup-overlay-background, rgba(0, 0, 0, 0.6));\n }\n\n .popup-box {\n background: var(--popup-background);\n color: var(--popup-text);\n box-shadow: var(--popup-shadow);\n border: 1px solid var(--popup-border);\n border-radius: var(--border-radius-md, 0.5rem);\n width: min(30rem, calc(100vw - 2rem));\n min-width: min(30rem, calc(100vw - 2rem));\n max-width: calc(100vw - 2rem);\n max-height: calc(100dvh - 2rem);\n overflow: auto;\n z-index: 1001;\n }\n\n .popup-top-menu {\n border-bottom: 1px solid #DDD;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-bottom: 8px;\n margin-bottom: 8px;\n padding: 1rem;\n background: var(--gray-200, #E5E7EB);\n }\n\n .popup-title {\n font-weight: 800;\n }\n\n .popup-close {\n background: transparent;\n border: none;\n cursor: pointer;\n font-size: 1.25rem;\n line-height: 1;\n padding: 0 0.25rem;\n }\n\n .issuer-text-section {\n display: flex;\n flex-direction: column;\n padding: 1rem 1rem 1.75rem;\n }\n\n .issuer-text-label {\n color: var(--issuer-label-color);\n margin-bottom: 6px;\n }\n\n .issuer-text-row {\n display: flex;\n flex-direction: row;\n gap: 6px;\n align-items: flex-start;\n }\n\n .issuer-input-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n position: relative;\n }\n\n .issuer-input-field-row {\n display: flex;\n flex-direction: row;\n position: relative;\n }\n\n .issuer-text-input {\n flex: 1;\n padding: 0.375rem 2.75rem 0.375rem 0.5rem;\n border: 1px solid var(--issuer-input-border);\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--issuer-input-background);\n color: var(--issuer-input-text);\n font: inherit;\n min-width: 0;\n }\n\n .issuer-text-input::placeholder {\n color: var(--issuer-placeholder-color);\n }\n\n .issuer-dropdown-toggle {\n position: absolute;\n right: 6px;\n top: 50%;\n transform: translateY(-50%);\n width: 26px;\n height: 26px;\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: var(--border-radius-base, 0.3125rem);\n }\n\n .issuer-dropdown-toggle:hover {\n background: var(--color-header-menu-item-hover, #e6dcff);\n }\n\n .issuer-dropdown-toggle svg {\n width: 14px;\n height: 14px;\n display: block;\n }\n\n .issuer-dropdown-list {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n right: 0;\n border: 1px solid var(--color-border, #E5E7EB);\n border-top: none;\n border-radius: 0 0 var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem);\n background: var(--issuer-input-background);\n overflow: visible;\n z-index: 10;\n box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);\n }\n\n .issuer-dropdown-item {\n display: block;\n width: 100%;\n padding: 0.625rem 0.75rem;\n border: none;\n border-bottom: 1px solid var(--color-border, #E5E7EB);\n background: transparent;\n color: var(--issuer-button-text);\n cursor: pointer;\n font: inherit;\n text-align: left;\n box-sizing: border-box;\n }\n\n .issuer-dropdown-item:last-child {\n border-bottom: none;\n }\n\n .issuer-dropdown-item:hover {\n background: var(--color-header-menu-item-hover, #e6dcff);\n border-radius: var(--border-radius-base-md, 0.5rem);\n }\n\n .popup-footer {\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 8px;\n padding: 0.75rem 1rem 1rem;\n }\n\n .popup-footer-hr {\n margin: 0;\n border: none;\n border-top: 1px solid var(--popup-border, #E5E7EB);\n }\n\n .popup-cancel-button {\n padding: 0.5rem 1.25rem;\n border: 1px solid #C0BFC7;\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--popup-background);\n color: #314158;\n cursor: pointer;\n font: inherit;\n }\n\n .popup-cancel-button:hover {\n background: #D1D5DB;\n }\n\n .popup-login-button {\n padding: 0.5rem 1.25rem;\n border: none;\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--lavender-900, #7c4cff);\n color: #ffffff;\n cursor: pointer;\n font: inherit;\n }\n\n .popup-login-button:hover {\n background: #6a3de8;\n }\n\n .popup-login-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .error-msg {\n color: var(--error-text-color);\n font-size: 0.875rem;\n margin-top: 8px;\n }\n\n @media (max-width: 40rem) {\n .popup-dialog {\n width: calc(100vw - 1rem);\n max-width: calc(100vw - 1rem);\n max-height: calc(100dvh - 1rem);\n }\n\n .popup-box {\n width: calc(100vw - 1rem);\n min-width: 0;\n max-width: calc(100vw - 1rem);\n max-height: calc(100dvh - 1rem);\n border-radius: var(--border-radius-base, 0.3125rem);\n }\n\n .popup-top-menu,\n .issuer-text-section,\n .popup-footer {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n }\n\n .popup-footer {\n flex-wrap: wrap;\n gap: 0.625rem;\n }\n\n .popup-footer > button {\n flex: 1 1 100%;\n }\n\n .issuer-text-row,\n .issuer-input-field-row {\n width: 100%;\n }\n }\n `\n\n declare label: string\n declare theme: 'light' \| 'dark'\n declare issuerUrl: string\n declare icon: string\n declare layout: 'desktop' \| 'mobile'\n declare _popupOpen: boolean\n declare _issuerInputValue: string\n declare _dropdownOpen: boolean\n\n private _issuerInputId = `issuer-url-input-${Math.random().toString(36).slice(2, 10)}`\n private _errorMsg = ''\n\n constructor () {\n super()\n this.label = 'Log In'\n this.theme = 'light'\n this.issuerUrl = ''\n this.icon = ''\n this.layout = 'desktop'\n this._popupOpen = false\n this._issuerInputValue = ''\n this._dropdownOpen = false\n }\n\n connectedCallback () {\n super.connectedCallback()\n }\n\n disconnectedCallback () {\n super.disconnectedCallback()\n }\n\n private _openPopup () {\n const offline = offlineTestID()\n if (offline) {\n this._loginComplete(offline.uri)\n return\n }\n this._issuerInputValue = (typeof localStorage !== 'undefined' && localStorage.getItem('loginIssuer')) \|\| this.issuerUrl \|\| ''\n this._errorMsg = ''\n this._popupOpen = true\n }\n\n private _closePopup () {\n this._popupOpen = false\n }\n\n updated () {\n const dialog = this.shadowRoot?.querySelector('dialog') as HTMLDialogElement \| null\n if (!dialog) return\n if (this._popupOpen && !dialog.open) {\n dialog.showModal()\n } else if (!this._popupOpen && dialog.open) {\n dialog.close()\n }\n }\n\n private async _loginToIssuer (issuerUri: string) {\n if (!issuerUri) return\n try {\n // clear authorization metadata from store\n ;(solidLogicSingleton.store.updater as any).flagAuthorizationMetadata()\n\n const preLoginRedirectHash = new URL(window.location.href).hash\n if (preLoginRedirectHash) {\n window.localStorage.setItem('preLoginRedirectHash', preLoginRedirectHash)\n }\n window.localStorage.setItem('loginIssuer', issuerUri)\n\n const locationUrl = new URL(window.location.href)\n locationUrl.hash = ''\n await authSession.login(issuerUri, locationUrl.href)\n } catch (err: any) {\n this._errorMsg = err.message \|\| String(err)\n this.requestUpdate()\n }\n }\n\n private _loginComplete (webIdUri: string) {\n authn.saveUser(webIdUri)\n this.dispatchEvent(new CustomEvent('login-success', {\n detail: { webId: webIdUri },\n bubbles: true,\n composed: true\n }))\n }\n\n private _handleGoClick () {\n this._dropdownOpen = false\n this._loginToIssuer(this._issuerInputValue)\n }\n\n private _toggleDropdown () {\n this._dropdownOpen = !this._dropdownOpen\n }\n\n private _selectIssuerFromDropdown (uri: string) {\n this._issuerInputValue = uri\n this._dropdownOpen = false\n }\n\n private _handleInputChange (e: Event) {\n this._issuerInputValue = (e.target as HTMLInputElement).value\n }\n\n private _handleInputKeydown (e: KeyboardEvent) {\n if (e.key === 'Enter') {\n this._loginToIssuer(this._issuerInputValue)\n }\n if (e.key === 'Escape') {\n this._closePopup()\n }\n }\n\n private _renderPopup () {\n const suggestedIssuers = getSuggestedIssuers()\n return html`\n <div class=\"popup-box\">\n <div class=\"popup-top-menu\">\n <span class=\"popup-title\">Select an identity provider</span>\n <button class=\"popup-close\" type=\"button\" aria-label=\"Close\" @click=\"${() => this._closePopup()}\">✕</button>\n </div>\n\n <div class=\"issuer-text-section\">\n <label class=\"issuer-text-label\" for=\"${this._issuerInputId}\">Solid Identity Provider</label>\n <div class=\"issuer-text-row\">\n <div class=\"issuer-input-wrapper\">\n <div class=\"issuer-input-field-row\">\n <input\n id=\"${this._issuerInputId}\"\n class=\"issuer-text-input\"\n type=\"text\"\n placeholder=\"https://example.com\"\n .value=\"${this._issuerInputValue}\"\n @input=\"${this._handleInputChange}\"\n @keydown=\"${this._handleInputKeydown}\"\n autocomplete=\"url\"\n />\n ${suggestedIssuers.length\n? html`\n <button\n class=\"issuer-dropdown-toggle\"\n type=\"button\"\n aria-label=\"Show identity provider suggestions\"\n aria-expanded=\"${this._dropdownOpen}\"\n @click=\"${() => this._toggleDropdown()}\"\n >${downArrowIcon}</button>\n `\n: ''}\n </div>\n ${this._dropdownOpen && suggestedIssuers.length\n? html`\n <div class=\"issuer-dropdown-list\" role=\"listbox\">\n ${suggestedIssuers.map(issuerInfo => html`\n <button\n class=\"issuer-dropdown-item\"\n type=\"button\"\n role=\"option\"\n @click=\"${() => this._selectIssuerFromDropdown(issuerInfo.uri)}\"\n >${issuerInfo.name}</button>\n `)}\n </div>\n `\n: ''}\n </div>\n </div>\n ${this._errorMsg ? html`<div class=\"error-msg\">${this._errorMsg}</div>` : ''}\n </div>\n <hr class=\"popup-footer-hr\" />\n <div class=\"popup-footer\">\n <button class=\"popup-cancel-button\" type=\"button\" @click=\"${() => this._closePopup()}\">Cancel</button>\n <button\n class=\"popup-login-button\"\n type=\"button\"\n ?disabled=\"${!this._issuerInputValue}\"\n @click=\"${() => this._handleGoClick()}\"\n >Log In</button>\n </div>\n </div>\n `\n }\n\n render () {\n return html`\n <button\n class=\"login-button\"\n type=\"button\"\n part=\"login-button\"\n @click=\"${() => this._openPopup()}\"\n >\n ${this.icon ? html`<img class=\"login-button-icon\" src=\"${this.icon}\" alt=\"\" aria-hidden=\"true\" part=\"login-button-icon\" />` : ''}\n <slot>${this.label}</slot>\n </button>\n\n <dialog\n class=\"popup-dialog\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Select an identity provider\"\n @cancel=\"${(e: Event) => { e.preventDefault(); this._closePopup() }}\"\n @click=\"${(e: MouseEvent) => { if (e.target === e.currentTarget) this._closePopup() }}\"\n >\n ${this._popupOpen ? this._renderPopup() : ''}\n </dialog>\n `\n }\n}\n"],"mappings":"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"}

package/dist/v2/components/auth/loginButton/downArrow.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"downArrow.cjs.js","names":[],"sources":["../../../../../src/v2/components/auth/loginButton/downArrow.ts"],"sourcesContent":["import { html } from 'lit-html'\n\nexport const phoneIcon = html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" \n viewBox=\"0 0 12 7\" \n fill=\"none\"\n >\n <path d=\"M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955\" stroke=\"#6A7282\" stroke-width=\"1.35776\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n`\n"],"mappings":"AAEA,IAAa,EAAY,kBAAA,~~EAAA~~,IAAI"}
1	+ {"version":3,"file":"downArrow.cjs.js","names":[],"sources":["../../../../../src/v2/components/auth/loginButton/downArrow.ts"],"sourcesContent":["import { html } from 'lit-html'\n\nexport const phoneIcon = html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" \n viewBox=\"0 0 12 7\" \n fill=\"none\"\n >\n <path d=\"M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955\" stroke=\"#6A7282\" stroke-width=\"1.35776\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n`\n"],"mappings":"AAEA,IAAa,EAAY,kBAAA,CAAA,CAAA,IAAI"}

package/dist/v2/components/auth/loginButton/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require("./LoginButton.cjs.js");var t=`solid-ui-login-button`;customElements.get(t)||customElements.define(t,e.LoginButton);
+const e=require("./LoginButton.cjs.js");var t=`solid-ui-login-button`;customElements.get(t)||customElements.define(t,e.LoginButton),exports.LoginButton=e.LoginButton;
 //# sourceMappingURL=index.cjs.js.map

package/dist/v2/components/auth/loginButton/index.esm.js CHANGED Viewed

@@ -3,5 +3,6 @@ import { LoginButton as e } from "./LoginButton.esm.js";
 var t = "solid-ui-login-button";
 customElements.get(t) || customElements.define(t, e);
 //#endregion
+export { e as LoginButton };
 //# sourceMappingURL=index.esm.js.map

package/dist/v2/components/auth/signupButton/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require("./SignupButton.cjs.js");var t=`solid-ui-signup-button`;customElements.get(t)||customElements.define(t,e.SignupButton);
+const e=require("./SignupButton.cjs.js");var t=`solid-ui-signup-button`;customElements.get(t)||customElements.define(t,e.SignupButton),exports.SignupButton=e.SignupButton;
 //# sourceMappingURL=index.cjs.js.map

package/dist/v2/components/auth/signupButton/index.esm.js CHANGED Viewed

@@ -3,5 +3,6 @@ import { SignupButton as e } from "./SignupButton.esm.js";
 var t = "solid-ui-signup-button";
 customElements.get(t) || customElements.define(t, e);
 //#endregion
+export { e as SignupButton };
 //# sourceMappingURL=index.esm.js.map

package/dist/v2/components/layout/footer/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require("./Footer.cjs.js");var t=`solid-ui-footer`;customElements.get(t)||customElements.define(t,e.Footer);
+const e=require("./Footer.cjs.js");var t=`solid-ui-footer`;customElements.get(t)||customElements.define(t,e.Footer),exports.Footer=e.Footer;
 //# sourceMappingURL=index.cjs.js.map

package/dist/v2/components/layout/footer/index.esm.js CHANGED Viewed

@@ -3,5 +3,6 @@ import { Footer as e } from "./Footer.esm.js";
 var t = "solid-ui-footer";
 customElements.get(t) || customElements.define(t, e);
 //#endregion
+export { e as Footer };
 //# sourceMappingURL=index.esm.js.map

package/dist/v2/components/layout/header/Header.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.cjs.js","names":[],"sources":["../../../../../src/v2/components/layout/header/Header.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { icons } from '../../../../lib/iconBase'\nimport { authSession, authn, performServerSideLogout } from 'solid-logic'\nimport '../../auth/loginButton/index'\nimport '../../auth/signupButton/index'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport '@/components/account'\nimport '@/components/provider'\nimport Features from '../../../../lib/features'\n\nconst DEFAULT_HELP_MENU_ICON = ''\nconst DEFAULT_SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg'\nconst DEFAULT_SIGNUP_URL = 'https://solidproject.org/get_a_pod'\nconst DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR = icons.iconBase + 'emptyProfileAvatar.png'\n\nasync function clearPersistedAuthState (): Promise<void> {\n if (typeof window === 'undefined') {\n return\n }\n\n const explicitKeys = ['loginIssuer', 'preLoginRedirectHash']\n for (const key of explicitKeys) {\n window.localStorage.removeItem(key)\n window.sessionStorage.removeItem(key)\n }\n\n if (typeof indexedDB === 'undefined') {\n return\n }\n\n const databases = ['soidc', 'solid-client-authn-store', 'solid-client-authn']\n for (const dbName of databases) {\n await new Promise<void>((resolve) => {\n try {\n const request = indexedDB.deleteDatabase(dbName)\n request.onsuccess = () => resolve()\n request.onerror = () => resolve()\n request.onblocked = () => resolve()\n } catch (_err) {\n resolve()\n }\n })\n }\n}\n\nexport type HeaderAuthState = 'logged-out' \| 'logged-in'\n\nexport type HeaderMenuItem = {\n label: string\n url?: string\n target?: string\n action?: string\n icon?: string\n}\n\nexport type HeaderAccountMenuItem = HeaderMenuItem & {\n avatar?: string\n webid?: string\n}\n\nexport class Header extends LitElement {\n static properties = {\n logo: { type: String, reflect: true },\n helpIcon: { type: String, attribute: 'help-icon', reflect: true },\n layout: { type: String, reflect: true },\n theme: { type: String, reflect: true },\n brandLink: { type: String, attribute: 'brand-link', reflect: true },\n authState: { type: String, attribute: 'auth-state', reflect: true },\n loginAction: { type: Object, attribute: false },\n signUpAction: { type: Object, attribute: false },\n accountMenu: { type: Array, attribute: false },\n logoutLabel: { type: String, attribute: 'logout-label', reflect: true },\n logoutIcon: { type: String, attribute: 'logout-icon', reflect: true },\n accountIcon: { type: String, attribute: 'account-icon', reflect: true },\n accountAvatar: { type: String, attribute: 'account-avatar', reflect: true },\n accountAvatarFallback: { type: String, attribute: 'account-avatar-fallback', reflect: true },\n loginIcon: { type: String, attribute: 'login-icon', reflect: true },\n signUpIcon: { type: String, attribute: 'sign-up-icon', reflect: true },\n helpMenuList: { type: Array },\n accountMenuOpen: { state: true },\n helpMenuOpen: { state: true },\n hasSlottedAccountMenu: { state: true },\n hasSlottedHelpMenu: { state: true },\n authResolved: { state: true }\n }\n\n static styles = css`\n :host { /* default theme /\n display: block;\n --header-bg: var(--color-header-row-bg, #332746);\n --header-text: var(--color-header-text, #ffffff);\n --header-border: var(--color-border, #efecf3);\n --header-line: var(--color-header-menu-separator-line, #5e546d);\n --header-link: var(--color-text-heading, #000000);\n --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);\n --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);\n --header-menu-bg: var(--color-menu-bg, #f6f5f9);\n --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);\n --header-menu-text: var(--color-menu-item-text, #654d6c);\n --header-border-radius: var(--border-radius-sm, 0.2rem);\n --header-button-bg: var(--color-menu-bg, #ffffff);\n --header-button-text: var(--color-header-button-text, #0F172B);\n --header-button-detail-text: var(--color-header-button-detail-text, #99A1AF);\n --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));\n font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);\n }\n\n / for now light and dark are the same /\n :host([theme='dark']) {\n display: block;\n --header-bg: var(--color-header-row-bg, #332746);\n --header-text: var(--color-header-text, #ffffff);\n --header-border: var(--color-border, #efecf3);\n --header-line: var(--color-header-menu-separator-line, #5e546d);\n --header-link: var(--color-text-heading, #000000);\n --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);\n --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);\n --header-menu-bg: var(--color-menu-bg, #f6f5f9);\n --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);\n --header-menu-text: var(--color-menu-item-text, #654d6c);\n --header-border-radius: var(--border-radius-sm, 0.2rem);\n --header-button-bg: var(--color-menu-bg, #ffffff);\n --header-button-text: var(--color-header-button-text, #0f172a);\n --header-button-detail-text: var(--color-header-button-detail-text, #878192);\n --header-icon-filter: invert(1) brightness(1.3); / special way to invert SVG color of icons, from white to black */\n --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));\n font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);\n }\n\n :host([layout='mobile']) .headerInner {\n flex-wrap: wrap;\n text-align: center;\n gap: 0.5rem;\n }\n\n .headerInner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: var(--header-bg);\n color: var(--header-text);\n padding: 0 1.5rem;\n height: 3.75rem;\n }\n\n ::slotted([slot='navigation-toggle']) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.75rem;\n }\n\n :host([layout='desktop']) ::slotted([slot='navigation-toggle']) {\n display: none !important;\n }\n\n .brand {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-decoration: none;\n color: inherit;\n }\n\n .brand-not-displayed {\n display: none;\n }\n\n .brand img {\n height: 50px;\n width: 55px;\n object-fit: contain;\n }\n\n .menu {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n margin-left: auto;\n }\n\n .auth-actions {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n }\n\n .auth-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n min-height: 2.25rem;\n padding: 0.5rem 0.875rem;\n border: 1px solid var(--header-border);\n border-radius: 999px;\n background: var(--header-menu-bg);\n color: var(--header-button-text);\n cursor: pointer;\n font: inherit;\n line-height: 1;\n text-decoration: none;\n box-sizing: border-box;\n transition: border-color 0.2s ease, transform 0.2s ease;\n }\n\n .auth-button:hover {\n border-color: var(--header-menu-item-hover);\n }\n\n .auth-button:active {\n transform: translateY(1px);\n }\n\n .auth-button-sign-up {\n background: color-mix(in srgb, var(--header-menu-bg) 78%, var(--header-menu-item-selected) 22%);\n }\n\n .header-menu-separator {\n background: var(--header-line);\n width: 1px;\n height: 2.3rem;\n }\n\n .account-menu-container {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .account-menu-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.625rem;\n min-height: 2.5rem;\n border: 1px solid var(--header-menu-loggedin-bg);\n border-radius: 999px;\n background: var(--header-menu-loggedin-bg);\n color: var(--header-button-text);\n cursor: pointer;\n font: inherit;\n line-height: 1;\n }\n\n :host([layout='mobile']) .account-menu-trigger {\n gap: 0;\n min-height: auto;\n padding: 0;\n border: 1.5px solid var(--header-border);\n background: var(--header-menu-loggedin-bg);\n }\n\n :host([layout='mobile']) .account-menu-trigger-label {\n display: none;\n }\n\n .account-menu-trigger:disabled {\n cursor: default;\n opacity: 0.7;\n }\n\n .account-menu-trigger-icon {\n width: 1rem;\n height: 1rem;\n object-fit: contain;\n flex-shrink: 0;\n }\n\n .account-avatar,\n .account-menu-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n background: color-mix(in srgb, var(--header-bg) 18%, #ded8e7 82%);\n color: var(--header-button-text);\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .account-avatar {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 999px;\n border: 1.5px solid var(--header-border);\n }\n\n .account-menu-avatar {\n width: 2rem;\n height: 2rem;\n border-radius: 0.5rem;\n }\n\n .account-avatar img,\n .account-menu-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .account-avatar-img {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 999px;\n object-fit: cover;\n background-color: var(--header-border);\n }\n\n .account-dropdown {\n position: absolute;\n top: calc(100% + 0.9rem);\n right: 0;\n min-width: 15rem;\n padding: 0.5rem;\n background: var(--header-button-bg);\n border: 1px solid var(--header-border);\n border-radius: var(--header-border-radius);\n box-shadow: var(--header-shadow);\n z-index: 10;\n }\n\n .account-dropdown[hidden] {\n display: none;\n }\n\n .account-menu-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .account-menu-item-link,\n .account-menu-item-button,\n ::slotted([slot='account-menu']) {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n width: 100%;\n box-sizing: border-box;\n color: var(--header-link);\n text-decoration: none;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 10px;\n padding: 0.5rem;\n cursor: pointer;\n font: inherit;\n text-align: left;\n }\n\n .account-menu-item-link:hover,\n .account-menu-item-button:hover {\n color: var(--header-link);\n background: var(--header-menu-item-hover);\n border-color: var(--header-menu-item-hover);\n }\n\n .account-menu-item-link:active,\n .account-menu-item-button:active {\n color: var(--header-link);\n background: var(--header-menu-item-selected);\n border-color: var(--header-menu-item-selected);\n transform: translateY(1px);\n }\n\n .account-switch {\n display: block;\n width: 100%;\n color: var(--header-menu-text);\n text-align: left;\n text-transform: uppercase;\n font-size: 80%;\n }\n\n .dropdown-menu-separator {\n display: block;\n width: calc(100% + 1rem);\n margin: 0.5rem -0.5rem;\n border: 0;\n border-top: 1px solid var(--header-border);\n }\n\n .account-menu-copy {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n\n .account-menu-label {\n color: var(--header-button-text);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .account-menu-webid {\n color: var(--header-button-detail-text);\n font-size: 0.5rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .help-menu-container {\n position: relative;\n display: flex;\n align-items: center;\n background: transparent;\n }\n\n .help-menu-trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n }\n\n .help-menu-trigger:disabled {\n cursor: default;\n }\n\n .help-dropdown {\n position: absolute;\n top: calc(100% + 0.9rem);\n right: 0;\n min-width: 12rem;\n padding: 0.5rem;\n background: var(--header-button-bg);\n border: 1px solid var(--header-border);\n border-radius: var(--header-border-radius);\n box-shadow: var(--header-shadow);\n z-index: 10;\n }\n\n .help-dropdown[hidden] {\n display: none;\n }\n\n .help-dropdown-content {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .help-menu-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .help-menu-list a,\n .help-menu-list button,\n ::slotted([slot='help-menu']) {\n display: block;\n width: 100%;\n box-sizing: border-box;\n color: var(--header-link);\n text-decoration: none;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n padding: 0.375rem 0.5rem;\n cursor: pointer;\n font: inherit;\n text-align: left;\n }\n\n .help-menu-list a:hover,\n .help-menu-list button:hover {\n color: var(--header-link);\n background: var(--header-menu-item-hover);\n border-color: var(--header-menu-item-hover);\n }\n\n .help-menu-list a:active,\n .help-menu-list button:active {\n color: var(--header-link);\n background: var(--header-menu-item-selected);\n border-color: var(--header-menu-item-selected);\n transform: translateY(1px);\n }\n\n ::slotted(a), ::slotted(button) {\n color: var(--header-link);\n text-decoration: none;\n background: var(--header-button-bg);\n border: 1px solid var(--header-border);\n border-radius: 4px;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n font: inherit;\n }\n\n .help-icon {\n width: 35px;\n height: 35px;\n cursor: pointer;\n }\n\n .help-text {\n color: var(--header-text, #ffffff);\n font: inherit;\n }\n\n .logout-action-icon {\n width: 16px;\n height: 16px;\n display: inline-block;\n object-fit: contain;\n margin-right: 0.5rem;\n }\n `\n\n declare logo: string\n declare helpIcon: string\n declare layout: 'desktop' \| 'mobile'\n declare theme: 'light' \| 'dark'\n declare brandLink: string\n declare authState: HeaderAuthState\n declare loginAction: HeaderMenuItem\n declare signUpAction: HeaderMenuItem\n declare accountMenu: HeaderAccountMenuItem[]\n declare logoutLabel: string \| null\n declare logoutIcon: string\n declare accountIcon: string\n declare accountAvatar: string\n declare accountAvatarFallback: string\n declare loginIcon: string\n declare signUpIcon: string\n declare helpMenuList: HeaderMenuItem[]\n declare accountMenuOpen: boolean\n declare helpMenuOpen: boolean\n declare hasSlottedAccountMenu: boolean\n declare hasSlottedHelpMenu: boolean\n declare authResolved: boolean\n private _refreshPromise: Promise<void> \| null = null\n\n private readonly handleAuthSessionChange = () => {\n this.refreshAuthStateFromSession().catch(() => {\n // Keep auth event handling resilient on transient refresh failures.\n })\n }\n\n constructor () {\n super()\n this.logo = DEFAULT_SOLID_ICON_URL\n this.helpIcon = DEFAULT_HELP_MENU_ICON\n this.layout = 'desktop'\n this.theme = 'light'\n this.brandLink = '#'\n this.authState = 'logged-out'\n this.loginAction = { label: 'Log In', action: 'login' }\n this.signUpAction = { label: 'Sign Up', action: 'sign-up', url: DEFAULT_SIGNUP_URL }\n this.accountMenu = []\n this.logoutLabel = 'Log Out'\n this.logoutIcon = ''\n this.accountIcon = '▼'\n this.accountAvatar = ''\n this.accountAvatarFallback = ''\n this.loginIcon = ''\n this.signUpIcon = ''\n this.helpMenuList = []\n this.accountMenuOpen = false\n this.helpMenuOpen = false\n this.hasSlottedAccountMenu = false\n this.hasSlottedHelpMenu = false\n this.authResolved = false\n }\n\n connectedCallback () {\n super.connectedCallback()\n document.addEventListener('click', this.handleDocumentClick)\n window.addEventListener('keydown', this.handleWindowKeydown)\n if (typeof authSession.events?.on === 'function') {\n authSession.events.on('login', this.handleAuthSessionChange)\n authSession.events.on('logout', this.handleAuthSessionChange)\n authSession.events.on('sessionRestore', this.handleAuthSessionChange)\n }\n this.refreshAuthStateFromSession().catch(() => {\n // Keep initial header render resilient on transient refresh failures.\n })\n }\n\n disconnectedCallback () {\n document.removeEventListener('click', this.handleDocumentClick)\n window.removeEventListener('keydown', this.handleWindowKeydown)\n if (typeof authSession.events?.off === 'function') {\n authSession.events.off('login', this.handleAuthSessionChange)\n authSession.events.off('logout', this.handleAuthSessionChange)\n authSession.events.off('sessionRestore', this.handleAuthSessionChange)\n }\n super.disconnectedCallback()\n }\n\n private async refreshAuthStateFromSession () {\n if (!this._refreshPromise) {\n this._refreshPromise = (async () => {\n try {\n await authn.checkUser()\n // Some auth stacks resolve session state asynchronously after first check.\n if (!authn.currentUser()) {\n await authn.checkUser()\n }\n } catch (_err) {\n // Keep rendering even if session refresh cannot complete.\n }\n })()\n }\n\n try {\n await this._refreshPromise\n } finally {\n this._refreshPromise = null\n }\n\n this.authState = authn.currentUser() ? 'logged-in' : 'logged-out'\n this.authResolved = true\n }\n\n private handleHelpMenuClick (item: HeaderMenuItem, event: MouseEvent) {\n event.preventDefault()\n this.helpMenuOpen = false\n this.dispatchEvent(new CustomEvent('help-menu-select', {\n detail: item,\n bubbles: true,\n composed: true\n }))\n if (item.url) {\n const target = item.target \|\| '_blank'\n const features = target === '_blank' ? 'noopener,noreferrer' : undefined\n window.open(item.url, target, features)\n }\n }\n\n private handleAccountMenuClick (item: HeaderAccountMenuItem) {\n this.accountMenuOpen = false\n this.dispatchEvent(new CustomEvent('account-menu-select', {\n detail: item,\n bubbles: true,\n composed: true\n }))\n }\n\n private readonly handleDocumentClick = (event: MouseEvent) => {\n if (!event.composedPath().includes(this)) {\n this.accountMenuOpen = false\n this.helpMenuOpen = false\n }\n }\n\n private readonly handleWindowKeydown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && (this.accountMenuOpen \|\| this.helpMenuOpen)) {\n this.accountMenuOpen = false\n this.helpMenuOpen = false\n }\n }\n\n private handleAccountSlotChange (event: Event) {\n const slot = event.target as HTMLSlotElement\n this.hasSlottedAccountMenu = slot.assignedElements({ flatten: true }).length > 0\n }\n\n private handleHelpSlotChange (event: Event) {\n const slot = event.target as HTMLSlotElement\n this.hasSlottedHelpMenu = slot.assignedElements({ flatten: true }).length > 0\n }\n\n private toggleAccountMenu (event: MouseEvent) {\n event.preventDefault()\n if (!this.hasAccountMenuItems()) return\n this.helpMenuOpen = false\n this.accountMenuOpen = !this.accountMenuOpen\n }\n\n private toggleHelpMenu (event: MouseEvent) {\n event.preventDefault()\n if (!this.hasHelpMenuItems()) return\n this.accountMenuOpen = false\n this.helpMenuOpen = !this.helpMenuOpen\n }\n\n private hasAccountMenuItems () {\n return Boolean(this.accountMenu?.length \|\| this.hasSlottedAccountMenu \|\| this.logoutLabel)\n }\n\n private hasHelpMenuItems () {\n return Boolean(this.helpMenuList?.length \|\| this.hasSlottedHelpMenu)\n }\n\n private shouldRenderHelpMenu () {\n return this.layout !== 'mobile' && this.hasHelpMenuItems()\n }\n\n private renderLoggedInAvatar (avatar?: string, wrapperClass = 'account-avatar') {\n const hasAvatar = Boolean(avatar)\n const imageSrc = hasAvatar ? avatar : this.accountAvatarFallback \|\| DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR\n const imageAlt = hasAvatar ? 'Profile Avatar' : 'Default Avatar'\n\n if (this.layout === 'mobile' && wrapperClass === 'account-avatar') {\n return html`<img class=\"account-avatar-img\" src=\"${imageSrc}\" alt=\"${imageAlt}\" />`\n }\n\n return html`\n <span class=\"${wrapperClass}\" aria-hidden=\"true\">\n <img src=\"${imageSrc}\" alt=\"${imageAlt}\" />\n </span>\n `\n }\n\n private renderLoggedOutActions () {\n return html`\n <div class=\"auth-actions\" part=\"auth-actions\">\n <slot name=\"login-action\">\n <solid-ui-login-button\n label=\"${this.loginAction.label}\"\n icon=${ifDefined(this.layout !== 'mobile' ? (this.loginIcon \|\| this.loginAction.icon) : undefined)}\n layout=\"${this.layout}\"\n theme=\"${this.theme}\"\n part=\"login-action\"\n @login-success=\"${() => this.handleLoginSuccess()}\"\n ></solid-ui-login-button>\n </slot>\n <slot name=\"sign-up-action\">\n <solid-ui-signup-button\n label=\"${this.signUpAction.label}\"\n signup-url=\"${ifDefined(this.signUpAction.url)}\"\n layout=\"${this.layout}\"\n .icon=${ifDefined(this.layout !== 'mobile' ? (this.signUpIcon \|\| this.signUpAction.icon) : undefined)}\n theme=\"${this.theme}\"\n part=\"sign-up-action\"\n ></solid-ui-signup-button>\n </slot>\n </div>\n `\n }\n\n private async handleLoginSuccess () {\n await this.refreshAuthStateFromSession()\n this.dispatchEvent(new CustomEvent('auth-action-select', {\n detail: { role: 'login' },\n bubbles: true,\n composed: true\n }))\n }\n\n private async handleLogout () {\n this.accountMenuOpen = false\n const issuer = window.localStorage.getItem('loginIssuer') \|\| ''\n\n try {\n await authSession.logout()\n } catch (_err) {\n // logout errors are non-fatal — proceed to clear state\n }\n\n await clearPersistedAuthState()\n\n const redirectedToServerLogout = await performServerSideLogout({\n issuer,\n postLogoutRedirectPath: '/'\n })\n if (redirectedToServerLogout) {\n return\n }\n\n await this.refreshAuthStateFromSession()\n this.dispatchEvent(new CustomEvent('logout-select', {\n detail: { role: 'logout' },\n bubbles: true,\n composed: true\n }))\n }\n\n private renderAccountMenuItem (item: HeaderAccountMenuItem) {\n const content = html`\n ${this.renderLoggedInAvatar(item.avatar, 'account-menu-avatar')}\n <span class=\"account-menu-copy\">\n <span class=\"account-menu-label\">${item.label}</span>\n ${item.webid && this.layout !== 'mobile' ? html`<span class=\"account-menu-webid\">${item.webid}</span>` : ''}\n </span>\n `\n\n if (item.url) {\n return html`\n <a\n class=\"account-menu-item-link\"\n href=\"${item.url}\"\n @click=\"${() => this.handleAccountMenuClick(item)}\"\n part=\"account-menu-item\"\n role=\"menuitem\"\n >\n ${content}\n </a>\n `\n }\n\n return html`\n <button\n class=\"account-menu-item-button\"\n type=\"button\"\n @click=\"${() => this.handleAccountMenuClick(item)}\"\n part=\"account-menu-item\"\n role=\"menuitem\"\n >\n ${content}\n </button>\n `\n }\n\n private renderLoggedInActions () {\n return html`\n <div class=\"account-menu-container\" part=\"account-menu-container\">\n <slot name=\"account-trigger\">\n <button\n id=\"accountMenuTrigger\"\n class=\"account-menu-trigger\"\n type=\"button\"\n aria-haspopup=\"menu\"\n aria-expanded=\"${this.accountMenuOpen ? 'true' : 'false'}\"\n ?disabled=\"${!this.hasAccountMenuItems()}\"\n @click=\"${(e: MouseEvent) => this.toggleAccountMenu(e)}\"\n part=\"account-menu-trigger\"\n >\n ${this.renderLoggedInAvatar(this.accountAvatar)}\n ${this.layout !== 'mobile' && this.accountIcon\n? html`\n <img class=\"account-menu-trigger-icon\" src=\"${this.accountIcon}\" alt=\"\" aria-hidden=\"true\" />`\n: ''}\n </button>\n </slot>\n\n <nav\n id=\"accountMenu\"\n class=\"account-dropdown\"\n role=\"menu\"\n ?inert=\"${!this.accountMenuOpen \|\| !this.hasAccountMenuItems()}\"\n ?hidden=\"${!this.accountMenuOpen \|\| !this.hasAccountMenuItems()}\"\n part=\"account-dropdown\"\n >\n <slot name=\"account-switch\" class=\"account-switch\">Switch account</slot>\n <hr class=\"dropdown-menu-separator\" />\n <slot name=\"account-menu\" @slotchange=\"${(e: Event) => this.handleAccountSlotChange(e)}\"></slot>\n ${this.accountMenu && this.accountMenu.length\n ? html`\n <ul class=\"account-menu-list\">\n ${this.accountMenu.map((item: HeaderAccountMenuItem) => html`\n <li>${this.renderAccountMenuItem(item)}</li>\n `)}\n </ul>\n `\n : ''}\n ${this.logoutLabel\n ? html`\n <hr class=\"dropdown-menu-separator\" />\n <button\n class=\"account-menu-item-button\"\n type=\"button\"\n @click=\"${() => this.handleLogout()}\"\n part=\"logout-action\"\n role=\"menuitem\"\n >\n ${this.logoutIcon && this.layout !== 'mobile'\n ? html`<img class=\"logout-action-icon\" src=\"${this.logoutIcon}\" alt=\"\" aria-hidden=\"true\" part=\"logout-action-icon\" />`\n : ''}\n ${this.logoutLabel}\n </button>\n `\n : ''}\n </nav>\n </div>\n `\n }\n\n private renderUserArea () {\n if (Features.DESIGN_SYSTEM_HEADER_ACCOUNT) {\n return html`\n <solid-ui-provider>\n <solid-ui-account></solid-ui-account>\n </solid-ui-provider>\n `\n }\n\n if (!this.authResolved) {\n return html`<div class=\"auth-actions\" part=\"auth-actions\"></div>`\n }\n\n if (this.authState === 'logged-out') {\n return this.renderLoggedOutActions()\n }\n\n return this.renderLoggedInActions()\n }\n\n protected firstUpdated () {\n const brandLink = this.shadowRoot?.getElementById('brandLink')\n if (brandLink) {\n brandLink.classList.toggle('brand-not-displayed', this.layout === 'mobile')\n }\n }\n\n protected updated (changedProperties: Map<string, unknown>) {\n if (changedProperties.has('layout')) {\n const brandLink = this.shadowRoot?.getElementById('brandLink')\n if (brandLink) {\n brandLink.classList.toggle('brand-not-displayed', this.layout === 'mobile')\n }\n }\n }\n\n render () {\n return html`\n <div class=\"headerInner\">\n <slot name=\"navigation-toggle\"></slot>\n <a\n id=\"brandLink\"\n class=\"brand\"\n href=\"${this.brandLink}\"\n part=\"brand\"\n >\n <img id=\"brandImg\" src=\"${this.logo}\" alt=\"Logo\" part=\"logo\" />\n </a>\n\n <div class=\"menu\" part=\"menu\">\n ${this.renderUserArea()}\n\n ${this.shouldRenderHelpMenu()\n ? html`\n <div class=\"header-menu-separator\" />`\n : ''}\n\n ${this.shouldRenderHelpMenu()\n ? html`\n <div class=\"help-menu-container\" part=\"help-menu-container\">\n <button\n id=\"helpMenuTrigger\"\n class=\"help-menu-trigger\"\n type=\"button\"\n aria-haspopup=\"menu\"\n aria-expanded=\"${this.helpMenuOpen ? 'true' : 'false'}\"\n ?disabled=\"${!this.hasHelpMenuItems()}\"\n @click=\"${(e: MouseEvent) => this.toggleHelpMenu(e)}\"\n part=\"help-menu-trigger\"\n >\n ${this.helpIcon\n ? html`<img id=\"helpIcon\" class=\"help-icon\" src=\"${this.helpIcon}\" alt=\"Help\" part=\"help-icon\" />`\n : html`<span class=\"help-text\" part=\"help-text\">Help</span>`}\n </button>\n\n <nav\n id=\"helpMenu\"\n class=\"help-dropdown\"\n role=\"menu\"\n ?inert=\"${!this.helpMenuOpen \|\| !this.hasHelpMenuItems()}\"\n ?hidden=\"${!this.helpMenuOpen \|\| !this.hasHelpMenuItems()}\"\n part=\"help-dropdown\"\n >\n <div class=\"help-dropdown-content\" @click=\"${() => { this.helpMenuOpen = false }}\">\n <slot name=\"help-menu\" @slotchange=\"${(e: Event) => this.handleHelpSlotChange(e)}\"></slot>\n ${this.helpMenuList && this.helpMenuList.length\n ? html`\n <ul class=\"help-menu-list\">\n ${this.helpMenuList.map((item: HeaderMenuItem) => html`\n <li>\n ${item.url\n ? html`\n <a\n href=\"${item.url}\"\n target=\"${item.target \|\| '_blank'}\"\n rel=\"${ifDefined((item.target \|\| '_blank') === '_blank' ? 'noopener noreferrer' : undefined)}\"\n @click=\"${(e: MouseEvent) => this.handleHelpMenuClick(item, e)}\"\n part=\"help-menu-item\"\n role=\"menuitem\"\n >\n ${item.label}\n </a>\n `\n : html`\n <button\n type=\"button\"\n @click=\"${(e: MouseEvent) => this.handleHelpMenuClick(item, e)}\"\n part=\"help-menu-item\"\n role=\"menuitem\"\n >\n ${item.label}\n </button>\n `}\n </li>\n `)}\n </ul>\n `\n : ''}\n </div>\n </nav>\n </div>`\n : ''}\n </div>\n </div>\n `\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Header.cjs.js","names":[],"sources":["../../../../../src/v2/components/layout/header/Header.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { icons } from '../../../../lib/iconBase'\nimport { authSession, authn, performServerSideLogout } from 'solid-logic'\nimport '../../auth/loginButton/index'\nimport '../../auth/signupButton/index'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport '@/components/account'\nimport '@/components/provider'\nimport Features from '../../../../lib/features'\n\nconst DEFAULT_HELP_MENU_ICON = ''\nconst DEFAULT_SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg'\nconst DEFAULT_SIGNUP_URL = 'https://solidproject.org/get_a_pod'\nconst DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR = icons.iconBase + 'emptyProfileAvatar.png'\n\nasync function clearPersistedAuthState (): Promise<void> {\n if (typeof window === 'undefined') {\n return\n }\n\n const explicitKeys = ['loginIssuer', 'preLoginRedirectHash']\n for (const key of explicitKeys) {\n window.localStorage.removeItem(key)\n window.sessionStorage.removeItem(key)\n }\n\n if (typeof indexedDB === 'undefined') {\n return\n }\n\n const databases = ['soidc', 'solid-client-authn-store', 'solid-client-authn']\n for (const dbName of databases) {\n await new Promise<void>((resolve) => {\n try {\n const request = indexedDB.deleteDatabase(dbName)\n request.onsuccess = () => resolve()\n request.onerror = () => resolve()\n request.onblocked = () => resolve()\n } catch (_err) {\n resolve()\n }\n })\n }\n}\n\nexport type HeaderAuthState = 'logged-out' \| 'logged-in'\n\nexport type HeaderMenuItem = {\n label: string\n url?: string\n target?: string\n action?: string\n icon?: string\n}\n\nexport type HeaderAccountMenuItem = HeaderMenuItem & {\n avatar?: string\n webid?: string\n}\n\nexport class Header extends LitElement {\n static properties = {\n logo: { type: String, reflect: true },\n helpIcon: { type: String, attribute: 'help-icon', reflect: true },\n layout: { type: String, reflect: true },\n theme: { type: String, reflect: true },\n brandLink: { type: String, attribute: 'brand-link', reflect: true },\n authState: { type: String, attribute: 'auth-state', reflect: true },\n loginAction: { type: Object, attribute: false },\n signUpAction: { type: Object, attribute: false },\n accountMenu: { type: Array, attribute: false },\n logoutLabel: { type: String, attribute: 'logout-label', reflect: true },\n logoutIcon: { type: String, attribute: 'logout-icon', reflect: true },\n accountIcon: { type: String, attribute: 'account-icon', reflect: true },\n accountAvatar: { type: String, attribute: 'account-avatar', reflect: true },\n accountAvatarFallback: { type: String, attribute: 'account-avatar-fallback', reflect: true },\n loginIcon: { type: String, attribute: 'login-icon', reflect: true },\n signUpIcon: { type: String, attribute: 'sign-up-icon', reflect: true },\n helpMenuList: { type: Array },\n accountMenuOpen: { state: true },\n helpMenuOpen: { state: true },\n hasSlottedAccountMenu: { state: true },\n hasSlottedHelpMenu: { state: true },\n authResolved: { state: true }\n }\n\n static styles = css`\n :host { /* default theme /\n display: block;\n --header-bg: var(--color-header-row-bg, #332746);\n --header-text: var(--color-header-text, #ffffff);\n --header-border: var(--color-border, #efecf3);\n --header-line: var(--color-header-menu-separator-line, #5e546d);\n --header-link: var(--color-text-heading, #000000);\n --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);\n --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);\n --header-menu-bg: var(--color-menu-bg, #f6f5f9);\n --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);\n --header-menu-text: var(--color-menu-item-text, #654d6c);\n --header-border-radius: var(--border-radius-sm, 0.2rem);\n --header-button-bg: var(--color-menu-bg, #ffffff);\n --header-button-text: var(--color-header-button-text, #0F172B);\n --header-button-detail-text: var(--color-header-button-detail-text, #99A1AF);\n --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));\n font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);\n }\n\n / for now light and dark are the same /\n :host([theme='dark']) {\n display: block;\n --header-bg: var(--color-header-row-bg, #332746);\n --header-text: var(--color-header-text, #ffffff);\n --header-border: var(--color-border, #efecf3);\n --header-line: var(--color-header-menu-separator-line, #5e546d);\n --header-link: var(--color-text-heading, #000000);\n --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);\n --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);\n --header-menu-bg: var(--color-menu-bg, #f6f5f9);\n --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);\n --header-menu-text: var(--color-menu-item-text, #654d6c);\n --header-border-radius: var(--border-radius-sm, 0.2rem);\n --header-button-bg: var(--color-menu-bg, #ffffff);\n --header-button-text: var(--color-header-button-text, #0f172a);\n --header-button-detail-text: var(--color-header-button-detail-text, #878192);\n --header-icon-filter: invert(1) brightness(1.3); / special way to invert SVG color of icons, from white to black */\n --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));\n font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);\n }\n\n :host([layout='mobile']) .headerInner {\n flex-wrap: wrap;\n text-align: center;\n gap: 0.5rem;\n }\n\n .headerInner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: var(--header-bg);\n color: var(--header-text);\n padding: 0 1.5rem;\n height: 3.75rem;\n }\n\n ::slotted([slot='navigation-toggle']) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.75rem;\n }\n\n :host([layout='desktop']) ::slotted([slot='navigation-toggle']) {\n display: none !important;\n }\n\n .brand {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-decoration: none;\n color: inherit;\n }\n\n .brand-not-displayed {\n display: none;\n }\n\n .brand img {\n height: 50px;\n width: 55px;\n object-fit: contain;\n }\n\n .menu {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n margin-left: auto;\n }\n\n .auth-actions {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n }\n\n .auth-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n min-height: 2.25rem;\n padding: 0.5rem 0.875rem;\n border: 1px solid var(--header-border);\n border-radius: 999px;\n background: var(--header-menu-bg);\n color: var(--header-button-text);\n cursor: pointer;\n font: inherit;\n line-height: 1;\n text-decoration: none;\n box-sizing: border-box;\n transition: border-color 0.2s ease, transform 0.2s ease;\n }\n\n .auth-button:hover {\n border-color: var(--header-menu-item-hover);\n }\n\n .auth-button:active {\n transform: translateY(1px);\n }\n\n .auth-button-sign-up {\n background: color-mix(in srgb, var(--header-menu-bg) 78%, var(--header-menu-item-selected) 22%);\n }\n\n .header-menu-separator {\n background: var(--header-line);\n width: 1px;\n height: 2.3rem;\n }\n\n .account-menu-container {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .account-menu-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.625rem;\n min-height: 2.5rem;\n border: 1px solid var(--header-menu-loggedin-bg);\n border-radius: 999px;\n background: var(--header-menu-loggedin-bg);\n color: var(--header-button-text);\n cursor: pointer;\n font: inherit;\n line-height: 1;\n }\n\n :host([layout='mobile']) .account-menu-trigger {\n gap: 0;\n min-height: auto;\n padding: 0;\n border: 1.5px solid var(--header-border);\n background: var(--header-menu-loggedin-bg);\n }\n\n :host([layout='mobile']) .account-menu-trigger-label {\n display: none;\n }\n\n .account-menu-trigger:disabled {\n cursor: default;\n opacity: 0.7;\n }\n\n .account-menu-trigger-icon {\n width: 1rem;\n height: 1rem;\n object-fit: contain;\n flex-shrink: 0;\n }\n\n .account-avatar,\n .account-menu-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n background: color-mix(in srgb, var(--header-bg) 18%, #ded8e7 82%);\n color: var(--header-button-text);\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .account-avatar {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 999px;\n border: 1.5px solid var(--header-border);\n }\n\n .account-menu-avatar {\n width: 2rem;\n height: 2rem;\n border-radius: 0.5rem;\n }\n\n .account-avatar img,\n .account-menu-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .account-avatar-img {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 999px;\n object-fit: cover;\n background-color: var(--header-border);\n }\n\n .account-dropdown {\n position: absolute;\n top: calc(100% + 0.9rem);\n right: 0;\n min-width: 15rem;\n padding: 0.5rem;\n background: var(--header-button-bg);\n border: 1px solid var(--header-border);\n border-radius: var(--header-border-radius);\n box-shadow: var(--header-shadow);\n z-index: 10;\n }\n\n .account-dropdown[hidden] {\n display: none;\n }\n\n .account-menu-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .account-menu-item-link,\n .account-menu-item-button,\n ::slotted([slot='account-menu']) {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n width: 100%;\n box-sizing: border-box;\n color: var(--header-link);\n text-decoration: none;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 10px;\n padding: 0.5rem;\n cursor: pointer;\n font: inherit;\n text-align: left;\n }\n\n .account-menu-item-link:hover,\n .account-menu-item-button:hover {\n color: var(--header-link);\n background: var(--header-menu-item-hover);\n border-color: var(--header-menu-item-hover);\n }\n\n .account-menu-item-link:active,\n .account-menu-item-button:active {\n color: var(--header-link);\n background: var(--header-menu-item-selected);\n border-color: var(--header-menu-item-selected);\n transform: translateY(1px);\n }\n\n .account-switch {\n display: block;\n width: 100%;\n color: var(--header-menu-text);\n text-align: left;\n text-transform: uppercase;\n font-size: 80%;\n }\n\n .dropdown-menu-separator {\n display: block;\n width: calc(100% + 1rem);\n margin: 0.5rem -0.5rem;\n border: 0;\n border-top: 1px solid var(--header-border);\n }\n\n .account-menu-copy {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n\n .account-menu-label {\n color: var(--header-button-text);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .account-menu-webid {\n color: var(--header-button-detail-text);\n font-size: 0.5rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .help-menu-container {\n position: relative;\n display: flex;\n align-items: center;\n background: transparent;\n }\n\n .help-menu-trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n }\n\n .help-menu-trigger:disabled {\n cursor: default;\n }\n\n .help-dropdown {\n position: absolute;\n top: calc(100% + 0.9rem);\n right: 0;\n min-width: 12rem;\n padding: 0.5rem;\n background: var(--header-button-bg);\n border: 1px solid var(--header-border);\n border-radius: var(--header-border-radius);\n box-shadow: var(--header-shadow);\n z-index: 10;\n }\n\n .help-dropdown[hidden] {\n display: none;\n }\n\n .help-dropdown-content {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .help-menu-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .help-menu-list a,\n .help-menu-list button,\n ::slotted([slot='help-menu']) {\n display: block;\n width: 100%;\n box-sizing: border-box;\n color: var(--header-link);\n text-decoration: none;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n padding: 0.375rem 0.5rem;\n cursor: pointer;\n font: inherit;\n text-align: left;\n }\n\n .help-menu-list a:hover,\n .help-menu-list button:hover {\n color: var(--header-link);\n background: var(--header-menu-item-hover);\n border-color: var(--header-menu-item-hover);\n }\n\n .help-menu-list a:active,\n .help-menu-list button:active {\n color: var(--header-link);\n background: var(--header-menu-item-selected);\n border-color: var(--header-menu-item-selected);\n transform: translateY(1px);\n }\n\n ::slotted(a), ::slotted(button) {\n color: var(--header-link);\n text-decoration: none;\n background: var(--header-button-bg);\n border: 1px solid var(--header-border);\n border-radius: 4px;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n font: inherit;\n }\n\n .help-icon {\n width: 35px;\n height: 35px;\n cursor: pointer;\n }\n\n .help-text {\n color: var(--header-text, #ffffff);\n font: inherit;\n }\n\n .logout-action-icon {\n width: 16px;\n height: 16px;\n display: inline-block;\n object-fit: contain;\n margin-right: 0.5rem;\n }\n `\n\n declare logo: string\n declare helpIcon: string\n declare layout: 'desktop' \| 'mobile'\n declare theme: 'light' \| 'dark'\n declare brandLink: string\n declare authState: HeaderAuthState\n declare loginAction: HeaderMenuItem\n declare signUpAction: HeaderMenuItem\n declare accountMenu: HeaderAccountMenuItem[]\n declare logoutLabel: string \| null\n declare logoutIcon: string\n declare accountIcon: string\n declare accountAvatar: string\n declare accountAvatarFallback: string\n declare loginIcon: string\n declare signUpIcon: string\n declare helpMenuList: HeaderMenuItem[]\n declare accountMenuOpen: boolean\n declare helpMenuOpen: boolean\n declare hasSlottedAccountMenu: boolean\n declare hasSlottedHelpMenu: boolean\n declare authResolved: boolean\n private _refreshPromise: Promise<void> \| null = null\n\n private readonly handleAuthSessionChange = () => {\n this.refreshAuthStateFromSession().catch(() => {\n // Keep auth event handling resilient on transient refresh failures.\n })\n }\n\n constructor () {\n super()\n this.logo = DEFAULT_SOLID_ICON_URL\n this.helpIcon = DEFAULT_HELP_MENU_ICON\n this.layout = 'desktop'\n this.theme = 'light'\n this.brandLink = '#'\n this.authState = 'logged-out'\n this.loginAction = { label: 'Log In', action: 'login' }\n this.signUpAction = { label: 'Sign Up', action: 'sign-up', url: DEFAULT_SIGNUP_URL }\n this.accountMenu = []\n this.logoutLabel = 'Log Out'\n this.logoutIcon = ''\n this.accountIcon = '▼'\n this.accountAvatar = ''\n this.accountAvatarFallback = ''\n this.loginIcon = ''\n this.signUpIcon = ''\n this.helpMenuList = []\n this.accountMenuOpen = false\n this.helpMenuOpen = false\n this.hasSlottedAccountMenu = false\n this.hasSlottedHelpMenu = false\n this.authResolved = false\n }\n\n connectedCallback () {\n super.connectedCallback()\n document.addEventListener('click', this.handleDocumentClick)\n window.addEventListener('keydown', this.handleWindowKeydown)\n if (typeof authSession.events?.on === 'function') {\n authSession.events.on('login', this.handleAuthSessionChange)\n authSession.events.on('logout', this.handleAuthSessionChange)\n authSession.events.on('sessionRestore', this.handleAuthSessionChange)\n }\n this.refreshAuthStateFromSession().catch(() => {\n // Keep initial header render resilient on transient refresh failures.\n })\n }\n\n disconnectedCallback () {\n document.removeEventListener('click', this.handleDocumentClick)\n window.removeEventListener('keydown', this.handleWindowKeydown)\n if (typeof authSession.events?.off === 'function') {\n authSession.events.off('login', this.handleAuthSessionChange)\n authSession.events.off('logout', this.handleAuthSessionChange)\n authSession.events.off('sessionRestore', this.handleAuthSessionChange)\n }\n super.disconnectedCallback()\n }\n\n private async refreshAuthStateFromSession () {\n if (!this._refreshPromise) {\n this._refreshPromise = (async () => {\n try {\n await authn.checkUser()\n // Some auth stacks resolve session state asynchronously after first check.\n if (!authn.currentUser()) {\n await authn.checkUser()\n }\n } catch (_err) {\n // Keep rendering even if session refresh cannot complete.\n }\n })()\n }\n\n try {\n await this._refreshPromise\n } finally {\n this._refreshPromise = null\n }\n\n this.authState = authn.currentUser() ? 'logged-in' : 'logged-out'\n this.authResolved = true\n }\n\n private handleHelpMenuClick (item: HeaderMenuItem, event: MouseEvent) {\n event.preventDefault()\n this.helpMenuOpen = false\n this.dispatchEvent(new CustomEvent('help-menu-select', {\n detail: item,\n bubbles: true,\n composed: true\n }))\n if (item.url) {\n const target = item.target \|\| '_blank'\n const features = target === '_blank' ? 'noopener,noreferrer' : undefined\n window.open(item.url, target, features)\n }\n }\n\n private handleAccountMenuClick (item: HeaderAccountMenuItem) {\n this.accountMenuOpen = false\n this.dispatchEvent(new CustomEvent('account-menu-select', {\n detail: item,\n bubbles: true,\n composed: true\n }))\n }\n\n private readonly handleDocumentClick = (event: MouseEvent) => {\n if (!event.composedPath().includes(this)) {\n this.accountMenuOpen = false\n this.helpMenuOpen = false\n }\n }\n\n private readonly handleWindowKeydown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && (this.accountMenuOpen \|\| this.helpMenuOpen)) {\n this.accountMenuOpen = false\n this.helpMenuOpen = false\n }\n }\n\n private handleAccountSlotChange (event: Event) {\n const slot = event.target as HTMLSlotElement\n this.hasSlottedAccountMenu = slot.assignedElements({ flatten: true }).length > 0\n }\n\n private handleHelpSlotChange (event: Event) {\n const slot = event.target as HTMLSlotElement\n this.hasSlottedHelpMenu = slot.assignedElements({ flatten: true }).length > 0\n }\n\n private toggleAccountMenu (event: MouseEvent) {\n event.preventDefault()\n if (!this.hasAccountMenuItems()) return\n this.helpMenuOpen = false\n this.accountMenuOpen = !this.accountMenuOpen\n }\n\n private toggleHelpMenu (event: MouseEvent) {\n event.preventDefault()\n if (!this.hasHelpMenuItems()) return\n this.accountMenuOpen = false\n this.helpMenuOpen = !this.helpMenuOpen\n }\n\n private hasAccountMenuItems () {\n return Boolean(this.accountMenu?.length \|\| this.hasSlottedAccountMenu \|\| this.logoutLabel)\n }\n\n private hasHelpMenuItems () {\n return Boolean(this.helpMenuList?.length \|\| this.hasSlottedHelpMenu)\n }\n\n private shouldRenderHelpMenu () {\n return this.layout !== 'mobile' && this.hasHelpMenuItems()\n }\n\n private renderLoggedInAvatar (avatar?: string, wrapperClass = 'account-avatar') {\n const hasAvatar = Boolean(avatar)\n const imageSrc = hasAvatar ? avatar : this.accountAvatarFallback \|\| DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR\n const imageAlt = hasAvatar ? 'Profile Avatar' : 'Default Avatar'\n\n if (this.layout === 'mobile' && wrapperClass === 'account-avatar') {\n return html`<img class=\"account-avatar-img\" src=\"${imageSrc}\" alt=\"${imageAlt}\" />`\n }\n\n return html`\n <span class=\"${wrapperClass}\" aria-hidden=\"true\">\n <img src=\"${imageSrc}\" alt=\"${imageAlt}\" />\n </span>\n `\n }\n\n private renderLoggedOutActions () {\n return html`\n <div class=\"auth-actions\" part=\"auth-actions\">\n <slot name=\"login-action\">\n <solid-ui-login-button\n label=\"${this.loginAction.label}\"\n icon=${ifDefined(this.layout !== 'mobile' ? (this.loginIcon \|\| this.loginAction.icon) : undefined)}\n layout=\"${this.layout}\"\n theme=\"${this.theme}\"\n part=\"login-action\"\n @login-success=\"${() => this.handleLoginSuccess()}\"\n ></solid-ui-login-button>\n </slot>\n <slot name=\"sign-up-action\">\n <solid-ui-signup-button\n label=\"${this.signUpAction.label}\"\n signup-url=\"${ifDefined(this.signUpAction.url)}\"\n layout=\"${this.layout}\"\n .icon=${ifDefined(this.layout !== 'mobile' ? (this.signUpIcon \|\| this.signUpAction.icon) : undefined)}\n theme=\"${this.theme}\"\n part=\"sign-up-action\"\n ></solid-ui-signup-button>\n </slot>\n </div>\n `\n }\n\n private async handleLoginSuccess () {\n await this.refreshAuthStateFromSession()\n this.dispatchEvent(new CustomEvent('auth-action-select', {\n detail: { role: 'login' },\n bubbles: true,\n composed: true\n }))\n }\n\n private async handleLogout () {\n this.accountMenuOpen = false\n const issuer = window.localStorage.getItem('loginIssuer') \|\| ''\n\n try {\n await authSession.logout()\n } catch (_err) {\n // logout errors are non-fatal — proceed to clear state\n }\n\n await clearPersistedAuthState()\n\n const redirectedToServerLogout = await performServerSideLogout({\n issuer,\n postLogoutRedirectPath: '/'\n })\n if (redirectedToServerLogout) {\n return\n }\n\n await this.refreshAuthStateFromSession()\n this.dispatchEvent(new CustomEvent('logout-select', {\n detail: { role: 'logout' },\n bubbles: true,\n composed: true\n }))\n }\n\n private renderAccountMenuItem (item: HeaderAccountMenuItem) {\n const content = html`\n ${this.renderLoggedInAvatar(item.avatar, 'account-menu-avatar')}\n <span class=\"account-menu-copy\">\n <span class=\"account-menu-label\">${item.label}</span>\n ${item.webid && this.layout !== 'mobile' ? html`<span class=\"account-menu-webid\">${item.webid}</span>` : ''}\n </span>\n `\n\n if (item.url) {\n return html`\n <a\n class=\"account-menu-item-link\"\n href=\"${item.url}\"\n @click=\"${() => this.handleAccountMenuClick(item)}\"\n part=\"account-menu-item\"\n role=\"menuitem\"\n >\n ${content}\n </a>\n `\n }\n\n return html`\n <button\n class=\"account-menu-item-button\"\n type=\"button\"\n @click=\"${() => this.handleAccountMenuClick(item)}\"\n part=\"account-menu-item\"\n role=\"menuitem\"\n >\n ${content}\n </button>\n `\n }\n\n private renderLoggedInActions () {\n return html`\n <div class=\"account-menu-container\" part=\"account-menu-container\">\n <slot name=\"account-trigger\">\n <button\n id=\"accountMenuTrigger\"\n class=\"account-menu-trigger\"\n type=\"button\"\n aria-haspopup=\"menu\"\n aria-expanded=\"${this.accountMenuOpen ? 'true' : 'false'}\"\n ?disabled=\"${!this.hasAccountMenuItems()}\"\n @click=\"${(e: MouseEvent) => this.toggleAccountMenu(e)}\"\n part=\"account-menu-trigger\"\n >\n ${this.renderLoggedInAvatar(this.accountAvatar)}\n ${this.layout !== 'mobile' && this.accountIcon\n? html`\n <img class=\"account-menu-trigger-icon\" src=\"${this.accountIcon}\" alt=\"\" aria-hidden=\"true\" />`\n: ''}\n </button>\n </slot>\n\n <nav\n id=\"accountMenu\"\n class=\"account-dropdown\"\n role=\"menu\"\n ?inert=\"${!this.accountMenuOpen \|\| !this.hasAccountMenuItems()}\"\n ?hidden=\"${!this.accountMenuOpen \|\| !this.hasAccountMenuItems()}\"\n part=\"account-dropdown\"\n >\n <slot name=\"account-switch\" class=\"account-switch\">Switch account</slot>\n <hr class=\"dropdown-menu-separator\" />\n <slot name=\"account-menu\" @slotchange=\"${(e: Event) => this.handleAccountSlotChange(e)}\"></slot>\n ${this.accountMenu && this.accountMenu.length\n ? html`\n <ul class=\"account-menu-list\">\n ${this.accountMenu.map((item: HeaderAccountMenuItem) => html`\n <li>${this.renderAccountMenuItem(item)}</li>\n `)}\n </ul>\n `\n : ''}\n ${this.logoutLabel\n ? html`\n <hr class=\"dropdown-menu-separator\" />\n <button\n class=\"account-menu-item-button\"\n type=\"button\"\n @click=\"${() => this.handleLogout()}\"\n part=\"logout-action\"\n role=\"menuitem\"\n >\n ${this.logoutIcon && this.layout !== 'mobile'\n ? html`<img class=\"logout-action-icon\" src=\"${this.logoutIcon}\" alt=\"\" aria-hidden=\"true\" part=\"logout-action-icon\" />`\n : ''}\n ${this.logoutLabel}\n </button>\n `\n : ''}\n </nav>\n </div>\n `\n }\n\n private renderUserArea () {\n if (Features.DESIGN_SYSTEM_HEADER_ACCOUNT) {\n return html`\n <solid-ui-provider>\n <solid-ui-account></solid-ui-account>\n </solid-ui-provider>\n `\n }\n\n if (!this.authResolved) {\n return html`<div class=\"auth-actions\" part=\"auth-actions\"></div>`\n }\n\n if (this.authState === 'logged-out') {\n return this.renderLoggedOutActions()\n }\n\n return this.renderLoggedInActions()\n }\n\n protected firstUpdated () {\n const brandLink = this.shadowRoot?.getElementById('brandLink')\n if (brandLink) {\n brandLink.classList.toggle('brand-not-displayed', this.layout === 'mobile')\n }\n }\n\n protected updated (changedProperties: Map<string, unknown>) {\n if (changedProperties.has('layout')) {\n const brandLink = this.shadowRoot?.getElementById('brandLink')\n if (brandLink) {\n brandLink.classList.toggle('brand-not-displayed', this.layout === 'mobile')\n }\n }\n }\n\n render () {\n return html`\n <div class=\"headerInner\">\n <slot name=\"navigation-toggle\"></slot>\n <a\n id=\"brandLink\"\n class=\"brand\"\n href=\"${this.brandLink}\"\n part=\"brand\"\n >\n <img id=\"brandImg\" src=\"${this.logo}\" alt=\"Logo\" part=\"logo\" />\n </a>\n\n <div class=\"menu\" part=\"menu\">\n ${this.renderUserArea()}\n\n ${this.shouldRenderHelpMenu()\n ? html`\n <div class=\"header-menu-separator\" />`\n : ''}\n\n ${this.shouldRenderHelpMenu()\n ? html`\n <div class=\"help-menu-container\" part=\"help-menu-container\">\n <button\n id=\"helpMenuTrigger\"\n class=\"help-menu-trigger\"\n type=\"button\"\n aria-haspopup=\"menu\"\n aria-expanded=\"${this.helpMenuOpen ? 'true' : 'false'}\"\n ?disabled=\"${!this.hasHelpMenuItems()}\"\n @click=\"${(e: MouseEvent) => this.toggleHelpMenu(e)}\"\n part=\"help-menu-trigger\"\n >\n ${this.helpIcon\n ? html`<img id=\"helpIcon\" class=\"help-icon\" src=\"${this.helpIcon}\" alt=\"Help\" part=\"help-icon\" />`\n : html`<span class=\"help-text\" part=\"help-text\">Help</span>`}\n </button>\n\n <nav\n id=\"helpMenu\"\n class=\"help-dropdown\"\n role=\"menu\"\n ?inert=\"${!this.helpMenuOpen \|\| !this.hasHelpMenuItems()}\"\n ?hidden=\"${!this.helpMenuOpen \|\| !this.hasHelpMenuItems()}\"\n part=\"help-dropdown\"\n >\n <div class=\"help-dropdown-content\" @click=\"${() => { this.helpMenuOpen = false }}\">\n <slot name=\"help-menu\" @slotchange=\"${(e: Event) => this.handleHelpSlotChange(e)}\"></slot>\n ${this.helpMenuList && this.helpMenuList.length\n ? html`\n <ul class=\"help-menu-list\">\n ${this.helpMenuList.map((item: HeaderMenuItem) => html`\n <li>\n ${item.url\n ? html`\n <a\n href=\"${item.url}\"\n target=\"${item.target \|\| '_blank'}\"\n rel=\"${ifDefined((item.target \|\| '_blank') === '_blank' ? 'noopener noreferrer' : undefined)}\"\n @click=\"${(e: MouseEvent) => this.handleHelpMenuClick(item, e)}\"\n part=\"help-menu-item\"\n role=\"menuitem\"\n >\n ${item.label}\n </a>\n `\n : html`\n <button\n type=\"button\"\n @click=\"${(e: MouseEvent) => this.handleHelpMenuClick(item, e)}\"\n part=\"help-menu-item\"\n role=\"menuitem\"\n >\n ${item.label}\n </button>\n `}\n </li>\n `)}\n </ul>\n `\n : ''}\n </div>\n </nav>\n </div>`\n : ''}\n </div>\n </div>\n `\n }\n}\n"],"mappings":"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"}