solid-ui 3.1.3-7 → 3.1.3-8

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

@@ -1,873 +0,0 @@
-import { icons as e } from "../../../../lib/iconBase.esm.js";
-import "../../../../components/account/index.esm.js";
-import "../../auth/loginButton/index.esm.js";
-import "../../auth/signupButton/index.esm.js";
-import "../../../../components/provider/index.esm.js";
-import t from "../../../../lib/features.esm.js";
-import { authSession as n, authn as r, performServerSideLogout as i } from "solid-logic";
-import { LitElement as a, css as o, html as s } from "lit";
-import { ifDefined as c } from "lit/directives/if-defined.js";
-//#region src/v2/components/layout/header/Header.ts
-var l = "", u = "https://solidproject.org/assets/img/solid-emblem.svg", d = "https://solidproject.org/get_a_pod", f = e.iconBase + "emptyProfileAvatar.png";
-async function p() {
-	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 m = class extends a {
-	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 = o`
-  :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 = u, this.helpIcon = l, 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: d
-		}, 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.events?.on == "function" && (n.events.on("login", this.handleAuthSessionChange), n.events.on("logout", this.handleAuthSessionChange), n.events.on("sessionRestore", this.handleAuthSessionChange)), this.refreshAuthStateFromSession().catch(() => {});
-	}
-	disconnectedCallback() {
-		document.removeEventListener("click", this.handleDocumentClick), window.removeEventListener("keydown", this.handleWindowKeydown), typeof n.events?.off == "function" && (n.events.off("login", this.handleAuthSessionChange), n.events.off("logout", this.handleAuthSessionChange), n.events.off("sessionRestore", this.handleAuthSessionChange)), super.disconnectedCallback();
-	}
-	async refreshAuthStateFromSession() {
-		this._refreshPromise ||= (async () => {
-			try {
-				await r.checkUser(), r.currentUser() || await r.checkUser();
-			} catch {}
-		})();
-		try {
-			await this._refreshPromise;
-		} finally {
-			this._refreshPromise = null;
-		}
-		this.authState = r.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, r = n ? e : this.accountAvatarFallback || f, i = n ? "Profile Avatar" : "Default Avatar";
-		return this.layout === "mobile" && t === "account-avatar" ? s`<img class="account-avatar-img" src="${r}" alt="${i}" />` : s`
-      <span class="${t}" aria-hidden="true">
-        <img src="${r}" alt="${i}" />
-      </span>
-    `;
-	}
-	renderLoggedOutActions() {
-		return s`
-      <div class="auth-actions" part="auth-actions">
-        <slot name="login-action">
-          <solid-ui-login-button
-            label="${this.loginAction.label}"
-            icon=${c(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="${c(this.signUpAction.url)}"
-            layout="${this.layout}"
-            .icon=${c(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.logout();
-		} catch {}
-		await p(), !await i({
-			issuer: e,
-			postLogoutRedirectPath: "/"
-		}) && (await this.refreshAuthStateFromSession(), this.dispatchEvent(new CustomEvent("logout-select", {
-			detail: { role: "logout" },
-			bubbles: !0,
-			composed: !0
-		})));
-	}
-	renderAccountMenuItem(e) {
-		let t = s`
-      ${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" ? s`<span class="account-menu-webid">${e.webid}</span>` : ""}
-      </span>
-    `;
-		return e.url ? s`
-        <a
-          class="account-menu-item-link"
-          href="${e.url}"
-          @click="${() => this.handleAccountMenuClick(e)}"
-          part="account-menu-item"
-          role="menuitem"
-        >
-          ${t}
-        </a>
-      ` : s`
-      <button
-        class="account-menu-item-button"
-        type="button"
-        @click="${() => this.handleAccountMenuClick(e)}"
-        part="account-menu-item"
-        role="menuitem"
-      >
-        ${t}
-      </button>
-    `;
-	}
-	renderLoggedInActions() {
-		return s`
-      <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 ? s`
-              <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 ? s`
-            <ul class="account-menu-list">
-              ${this.accountMenu.map((e) => s`
-                <li>${this.renderAccountMenuItem(e)}</li>
-              `)}
-            </ul>
-          ` : ""}
-          ${this.logoutLabel ? s`
-            <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" ? s`<img class="logout-action-icon" src="${this.logoutIcon}" alt="" aria-hidden="true" part="logout-action-icon" />` : ""}
-              ${this.logoutLabel}
-            </button>
-          ` : ""}
-        </nav>
-      </div>
-    `;
-	}
-	renderUserArea() {
-		return t.DESIGN_SYSTEM_HEADER_ACCOUNT ? s`
-        <solid-ui-provider>
-          <solid-ui-account></solid-ui-account>
-        </solid-ui-provider>
-      ` : this.authResolved ? this.authState === "logged-out" ? this.renderLoggedOutActions() : this.renderLoggedInActions() : s`<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 s`
-      <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() ? s`
-            <div class="header-menu-separator" />` : ""}
-
-          ${this.shouldRenderHelpMenu() ? s`
-            <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 ? s`<img id="helpIcon" class="help-icon" src="${this.helpIcon}" alt="Help" part="help-icon" />` : s`<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 ? s`
-                  <ul class="help-menu-list">
-                    ${this.helpMenuList.map((e) => s`
-                      <li>
-                        ${e.url ? s`
-                          <a
-                            href="${e.url}"
-                            target="${e.target || "_blank"}"
-                            rel="${c((e.target || "_blank") === "_blank" ? "noopener noreferrer" : void 0)}"
-                            @click="${(t) => this.handleHelpMenuClick(e, t)}"
-                            part="help-menu-item"
-                            role="menuitem"
-                          >
-                            ${e.label}
-                          </a>
-                        ` : s`
-                          <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>
-    `;
-	}
-};
-//#endregion
-export { m as Header };
-
-//# sourceMappingURL=Header.esm.js.map