solid-ui 3.1.3-6 → 3.1.3-8

package/dist/v2/components/layout/header/Header.cjs.js

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