solid-ui 3.1.3-1 → 3.1.3-11

package/dist/v2/components/auth/loginButton/LoginButton.cjs.js

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

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

@@ -1 +0,0 @@
-{"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()}\">&#x2715;</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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"}