@oslokommune/punkt-elements 16.26.7 → 17.0.0

package/dist/header-CrGRaoqe.js

@@ -0,0 +1,1288 @@
+import { a as e, d as t, n, o as r, p as i, s as a, t as o } from "./element-BoJrqauR.js";
+import { t as s } from "./class-map-CAQCRB1W.js";
+import { n as c, t as l } from "./element-with-slot-mXLg8gg8.js";
+import "./icon-DGFEIlco.js";
+import { t as u } from "./if-defined-D0bnetLJ.js";
+import "./button-Cod17rKo.js";
+import { n as d, t as f } from "./ref-WGS0u7i2.js";
+import { t as p } from "./booleanish-MfutDT_4.js";
+import { n as m, o as h, t as g } from "./fetch-header-footer-data-Pc32etrk.js";
+import { n as _, t as v } from "./focus-trap-DG3pEuyJ.js";
+import { n as y, t as b } from "./scroll-lock-DAbNKAUy.js";
+import "./link-FmkQvSQL.js";
+import "./textinput-TSPcBcih.js";
+import "./searchinput-CfUVfpqL.js";
+import "./header-menu-GFtJKM4j.js";
+//#region ../../shared-types/header.ts
+var x = (e) => typeof e.target == "string" ? {
+	title: e.title,
+	iconName: e.iconName,
+	href: e.target
+} : {
+	title: e.title,
+	iconName: e.iconName,
+	onClick: e.target
+}, S = (e) => x(e), C = (e) => {
+	if (!e) return;
+	let t = typeof e == "string" ? new Date(e) : e;
+	if (!isNaN(t.getTime())) return t.toLocaleDateString("nb-NO", {
+		day: "numeric",
+		month: "long",
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}, w = class {
+	constructor(e, t) {
+		this.isMobile = !1, this.isTablet = !1, this.isHidden = !1, this.pauseScrollHide = !1, this.componentWidth = typeof window < "u" ? window.innerWidth : 0, this.lastScrollPosition = 0, this.scrollLockToken = b(), this.lastFocusedElement = null, this.shouldRestoreFocus = !1, this.handleScroll = () => {
+			if (this.getOptions().scrollBehavior !== "hide" || this.pauseScrollHide) return;
+			let e = window.pageYOffset || document.documentElement.scrollTop;
+			if (e < 0 || Math.abs(e - this.lastScrollPosition) < 60) return;
+			let t = e > this.lastScrollPosition;
+			this.lastScrollPosition = e, t !== this.isHidden && (this.isHidden = t, this.host.requestUpdate());
+		}, this.host = e, this.getOptions = t, e.addController(this);
+	}
+	hostConnected() {
+		window.addEventListener("scroll", this.handleScroll);
+	}
+	hostDisconnected() {
+		this.resizeObserver?.disconnect(), window.removeEventListener("scroll", this.handleScroll), y(this.scrollLockToken, !1);
+	}
+	observe(e) {
+		e && (this.componentWidth = e.offsetWidth, this.refreshBreakpoints(), this.resizeObserver = new ResizeObserver((e) => {
+			for (let t of e) this.componentWidth = t.borderBoxSize && t.borderBoxSize.length > 0 ? t.borderBoxSize[0].inlineSize : t.contentRect.width, this.refreshBreakpoints();
+		}), this.resizeObserver.observe(e));
+	}
+	refreshBreakpoints() {
+		let { mobileBreakpoint: e, tabletBreakpoint: t } = this.getOptions(), n = this.componentWidth < e, r = this.componentWidth < t;
+		(n !== this.isMobile || r !== this.isTablet) && (this.isMobile = n, this.isTablet = r, this.host.requestUpdate());
+	}
+	setScrollLock(e) {
+		y(this.scrollLockToken, e);
+	}
+	captureFocus() {
+		this.lastFocusedElement = document.activeElement;
+	}
+	flagRestoreFocus() {
+		this.shouldRestoreFocus = !0;
+	}
+	restoreFocus() {
+		this.shouldRestoreFocus && this.lastFocusedElement && document.contains(this.lastFocusedElement) && this.lastFocusedElement.focus(), this.lastFocusedElement = null, this.shouldRestoreFocus = !1;
+	}
+}, T = class extends o {
+	constructor(...e) {
+		super(...e), this.canChangeRepresentation = !1, this.logoutOnClick = !1;
+	}
+	handleChangeRepresentation() {
+		this.dispatchEvent(new CustomEvent("change-representation", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleLogout() {
+		this.dispatchEvent(new CustomEvent("log-out", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleMenuItemClick(e) {
+		"onClick" in e && typeof e.onClick == "function" && e.onClick();
+	}
+	renderLinkOrButton(e, n) {
+		let r = "href" in e, a = s({
+			"pkt-user-menu__link": !0,
+			"pkt-link-button": !r,
+			"pkt-link": !r,
+			"pkt-link--icon-left": !r,
+			[n || ""]: !!n
+		});
+		return r ? i`
+        <pkt-link
+          icon-name=${e.iconName || t}
+          href=${e.href}
+          aria-hidden="true"
+          class="pkt-user-menu__link ${n || ""}"
+        >
+          ${e.title}
+        </pkt-link>
+      ` : i`
+      <button class=${a} type="button" @click=${() => this.handleMenuItemClick(e)}>
+        ${e.iconName ? i`<pkt-icon
+              name=${e.iconName}
+              class="pkt-link__icon"
+              aria-hidden="true"
+            ></pkt-icon>` : t}
+        ${e.title}
+      </button>
+    `;
+	}
+	renderLinkSection(e) {
+		return i`
+      <ul class="pkt-user-menu__sublist">
+        ${e.map((e) => i`
+            <li class="pkt-user-menu__subitem">${this.renderLinkOrButton(e)}</li>
+          `)}
+      </ul>
+    `;
+	}
+	render() {
+		let e = this.userMenu?.map(S);
+		return i`
+      <nav class="pkt-user-menu" aria-label="Meny for innlogget bruker">
+        <ul class="pkt-user-menu__list">
+          <!-- User section -->
+          ${this.user ? i`
+                <li class="pkt-user-menu__item">
+                  <div class="pkt-user-menu__label">Pålogget som</div>
+                  <div class="pkt-user-menu__name" translate="no">${this.user.name}</div>
+                  ${this.formattedLastLoggedIn ? i`
+                        <div class="pkt-user-menu__last-logged-in">
+                          Sist pålogget: <time>${this.formattedLastLoggedIn}</time>
+                        </div>
+                      ` : t}
+                </li>
+              ` : t}
+
+          <!-- User menu items -->
+          ${e && e.length > 0 ? i`
+                <li class="pkt-user-menu__item">${this.renderLinkSection(e)}</li>
+              ` : t}
+
+          <!-- Representing section -->
+          ${this.representing ? i`
+                <li class="pkt-user-menu__item">
+                  <div class="pkt-user-menu__label">Representerer</div>
+                  <div class="pkt-user-menu__name" translate="no">${this.representing.name}</div>
+                  ${this.representing.orgNumber ? i`<div class="pkt-user-menu__org-number">
+                        Org.nr. ${this.representing.orgNumber}
+                      </div>` : t}
+                  ${this.canChangeRepresentation ? i`
+                        <ul class="pkt-user-menu__sublist mt-size-16">
+                          <li class="pkt-user-menu__subitem">
+                            ${this.renderLinkOrButton({
+			title: "Endre organisasjon",
+			iconName: "cogwheel",
+			onClick: () => this.handleChangeRepresentation()
+		})}
+                          </li>
+                        </ul>
+                      ` : t}
+                </li>
+              ` : t}
+
+          <!-- Change representation without representing object -->
+          ${!this.representing && this.canChangeRepresentation ? i`
+                <li class="pkt-user-menu__item">
+                  <ul class="pkt-user-menu__sublist">
+                    <li class="pkt-user-menu__subitem">
+                      ${this.renderLinkOrButton({
+			title: "Endre organisasjon",
+			iconName: "cogwheel",
+			onClick: () => this.handleChangeRepresentation()
+		})}
+                    </li>
+                  </ul>
+                </li>
+              ` : t}
+
+          <!-- Logout -->
+          ${this.logoutOnClick ? i`
+                <li class="pkt-user-menu__item">
+                  ${this.renderLinkOrButton({
+			title: "Logg ut",
+			iconName: "exit",
+			onClick: () => this.handleLogout()
+		})}
+                </li>
+              ` : t}
+        </ul>
+      </nav>
+    `;
+	}
+};
+n([r({ type: Object })], T.prototype, "user", void 0), n([r({
+	type: String,
+	attribute: "formatted-last-logged-in"
+})], T.prototype, "formattedLastLoggedIn", void 0), n([r({ type: Object })], T.prototype, "representing", void 0), n([r({
+	type: Array,
+	attribute: "user-menu"
+})], T.prototype, "userMenu", void 0), n([r({
+	type: Boolean,
+	attribute: "can-change-representation",
+	converter: p
+})], T.prototype, "canChangeRepresentation", void 0), n([r({
+	type: Boolean,
+	attribute: "logout-on-click",
+	converter: p
+})], T.prototype, "logoutOnClick", void 0);
+try {
+	a("pkt-header-user-menu")(T);
+} catch {
+	console.warn("Forsøker å definere <pkt-header-user-menu>, men den er allerede definert");
+}
+//#endregion
+//#region src/components/header/header-service.ts
+var E = "https://punkt-cdn.oslo.kommune.no/latest/logos/";
+typeof window < "u" && (window.pktLogoPath = window.pktLogoPath || E);
+var D = class extends l {
+	constructor(...e) {
+		super(...e), this.logoLink = h, this.logoPath = typeof window < "u" ? window.pktLogoPath : E, this.searchPlaceholder = "Søk", this.searchValue = "", this.mobileBreakpoint = 768, this.tabletBreakpoint = 1280, this.openedMenu = "none", this.logOutButtonPlacement = "none", this.position = "fixed", this.scrollBehavior = "hide", this.slotMenuVariant = "icon-only", this.slotMenuText = "Meny", this.hideLogo = !1, this.compact = !1, this.showSearch = !1, this.canChangeRepresentation = !1, this.hasLogOut = !1, this.openMenu = "none", this.alignSlotRight = !1, this.alignSearchRight = !1, this.headerRef = f(), this.userContainerRef = f(), this.slotContainerRef = f(), this.searchContainerRef = f(), this.slotContentRef = f(), this.searchMenuRef = f(), this.chrome = new w(this, () => ({
+			mobileBreakpoint: this.mobileBreakpoint,
+			tabletBreakpoint: this.tabletBreakpoint,
+			position: this.position,
+			scrollBehavior: this.scrollBehavior
+		})), this.handleClickOutside = (e) => {
+			let t = e.target;
+			this.user && this.openMenu === "user" && !t.closest(".pkt-header-service__user-container") && (this.openMenu = "none"), this.openMenu === "slot" && !t.closest(".pkt-header-service__slot-container") && (this.openMenu = "none"), this.openMenu === "search" && !t.closest(".pkt-header-service__search-container") && !t.closest(".pkt-header-service__search-input") && (this.openMenu = "none");
+		}, this.handleSlotContentClick = (e) => {
+			if (!this.isTablet || this.openMenu !== "slot") return;
+			let t = e.target.closest("a[href], button, [role=\"link\"], [role=\"button\"], [role=\"menuitem\"], [role=\"menuitemradio\"], [role=\"menuitemcheckbox\"]");
+			!t || !this.slotContentRef.value?.contains(t) || t.closest("[data-pkt-header-keep-open]") || t.disabled || t.getAttribute("aria-disabled") === "true" || (this.openMenu = "none");
+		}, this.handleFocusOut = (e, t) => {
+			let n = e.relatedTarget, r;
+			switch (t) {
+				case "user":
+					r = this.userContainerRef;
+					break;
+				case "slot":
+					r = this.slotContainerRef;
+					break;
+				case "search":
+					r = this.searchContainerRef;
+					break;
+				default: return;
+			}
+			let i = r.value;
+			i && (!n || !i.contains(n)) && (this.openMenu = "none");
+		}, this.handleEscapeKey = (e) => {
+			e.key === "Escape" && this.openMenu !== "none" && (e.preventDefault(), this.chrome.flagRestoreFocus(), this.openMenu = "none");
+		};
+	}
+	get isMobile() {
+		return this.chrome.isMobile;
+	}
+	get isTablet() {
+		return this.chrome.isTablet;
+	}
+	get isHidden() {
+		return this.chrome.isHidden;
+	}
+	firstUpdated() {
+		this.chrome.observe(this.headerRef.value);
+	}
+	updated(e) {
+		if (super.updated(e), e.has("openedMenu") && this.openedMenu !== this.openMenu && (this.openMenu = this.openedMenu), (e.has("mobileBreakpoint") || e.has("tabletBreakpoint")) && this.chrome.refreshBreakpoints(), e.has("openMenu")) {
+			let t = e.get("openMenu");
+			this.openMenu !== "none" && (t === "none" || t === void 0) ? (document.addEventListener("mousedown", this.handleClickOutside), document.addEventListener("keydown", this.handleEscapeKey), (this.openMenu === "slot" || this.openMenu === "search") && requestAnimationFrame(() => {
+				this.checkDropdownAlignment(this.openMenu);
+			})) : this.openMenu === "none" && t !== "none" && (document.removeEventListener("mousedown", this.handleClickOutside), document.removeEventListener("keydown", this.handleEscapeKey), this.chrome.restoreFocus());
+		}
+		this.chrome.setScrollLock((this.isFixed || this.isSticky) && this.isMobile && this.openMenu !== "none");
+	}
+	checkDropdownAlignment(e) {
+		let t = e === "slot" ? this.slotContainerRef : this.searchContainerRef, n = e === "slot" ? this.slotContentRef : this.searchMenuRef;
+		if (!t.value || !n.value || !this.isTablet || this.isMobile) return;
+		let r = t.value.getBoundingClientRect(), i = n.value.offsetWidth, a = r.left + i > window.innerWidth;
+		e === "slot" ? this.alignSlotRight = a : this.alignSearchRight = a;
+	}
+	handleMenuToggle(e) {
+		this.openMenu === "none" ? (this.chrome.captureFocus(), this.openMenu = e) : this.openMenu = "none";
+	}
+	handleLogoClick(e) {
+		this.dispatchEvent(new CustomEvent("logo-click", {
+			bubbles: !0,
+			composed: !0,
+			detail: { originalEvent: e }
+		}));
+	}
+	handleServiceClick(e) {
+		this.dispatchEvent(new CustomEvent("service-click", {
+			bubbles: !0,
+			composed: !0,
+			detail: { originalEvent: e }
+		}));
+	}
+	handleLogout() {
+		this.dispatchEvent(new CustomEvent("log-out", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleSearch(e) {
+		this.dispatchEvent(new CustomEvent("search", {
+			detail: { query: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleSearchChange(e) {
+		this.dispatchEvent(new CustomEvent("search-change", {
+			detail: { query: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleSearchInputChange(e) {
+		let t = e.target.value;
+		this.handleSearchChange(t);
+	}
+	handleSearchKeyDown(e) {
+		e.key === "Enter" && this.handleSearch(e.target.value);
+	}
+	get formattedLastLoggedIn() {
+		return C(this.user?.lastLoggedIn);
+	}
+	get isFixed() {
+		return this.position === "fixed";
+	}
+	get isSticky() {
+		return this.position === "sticky";
+	}
+	get shouldHideOnScroll() {
+		return this.scrollBehavior === "hide";
+	}
+	get showLogoutInHeader() {
+		return this.hasLogOut && (this.logOutButtonPlacement === "header" || this.logOutButtonPlacement === "both");
+	}
+	get showLogoutInUserMenu() {
+		return this.hasLogOut && (this.logOutButtonPlacement === "userMenu" || this.logOutButtonPlacement === "both");
+	}
+	renderLogo() {
+		if (this.hideLogo) return t;
+		let e = i`
+      <pkt-icon name="oslologo" aria-hidden="true" path=${this.logoPath}></pkt-icon>
+    `;
+		return i`
+      <span class="pkt-header-service__logo">
+        <a href=${this.logoLink} aria-label="Tilbake til forside" @click=${this.handleLogoClick}>
+          ${e}
+        </a>
+      </span>
+    `;
+	}
+	renderServiceName() {
+		return this.serviceName ? this.serviceLink && typeof this.serviceLink == "string" ? i`
+        <span class="pkt-header-service__service-name" translate="no">
+          <pkt-link
+            href=${this.serviceLink}
+            class="pkt-header-service__service-link"
+            @click=${this.handleServiceClick}
+          >
+            ${this.serviceName}
+          </pkt-link>
+        </span>
+      ` : this.hasAttribute("service-link") ? i`
+        <span class="pkt-header-service__service-name" translate="no">
+          <button
+            class="pkt-link-button pkt-link pkt-header-service__service-link"
+            @click=${this.handleServiceClick}
+          >
+            ${this.serviceName}
+          </button>
+        </span>
+      ` : i`
+      <span
+        class="pkt-header-service__service-name"
+        translate="no"
+        @click=${this.handleServiceClick}
+      >
+        <span class="pkt-header-service__service-link">${this.serviceName}</span>
+      </span>
+    ` : t;
+	}
+	renderSlotContainer() {
+		if (!this.hasSlotContent()) return t;
+		let e = s({
+			"pkt-header-service__slot-container": !0,
+			"is-open": this.openMenu === "slot"
+		}), n = s({
+			"pkt-header-service__slot-content": !0,
+			"align-right": this.alignSlotRight
+		});
+		return i`
+      <div
+        class=${e}
+        @focusout=${(e) => this.handleFocusOut(e, "slot")}
+        ${d(this.slotContainerRef)}
+      >
+        ${this.isTablet && this.hasSlotContent() ? i`
+              <pkt-button
+                skin="secondary"
+                variant=${this.slotMenuVariant}
+                iconName="menu"
+                size=${this.isMobile ? "small" : "medium"}
+                state=${this.openMenu === "slot" ? "active" : "normal"}
+                @click=${() => this.handleMenuToggle("slot")}
+                aria-expanded=${this.openMenu === "slot"}
+                aria-controls="mobile-slot-menu"
+                aria-label="Åpne meny"
+              >
+                ${this.slotMenuText}
+              </pkt-button>
+            ` : t}
+        <div
+          class=${n}
+          id="mobile-slot-menu"
+          role=${this.isTablet ? "group" : t}
+          aria-label=${this.isTablet ? "Meny" : t}
+          @click=${this.handleSlotContentClick}
+          ${d(this.slotContentRef)}
+        >
+          ${c(this)}
+        </div>
+      </div>
+    `;
+	}
+	renderSearch() {
+		if (!this.showSearch) return t;
+		if (this.isTablet) {
+			let e = s({
+				"pkt-header-service__search-container": !0,
+				"is-open": this.openMenu === "search"
+			}), n = s({
+				"pkt-header-service__mobile-menu": !0,
+				"is-open": this.openMenu === "search",
+				"align-right": this.alignSearchRight
+			});
+			return i`
+        <div
+          class=${e}
+          @focusout=${(e) => this.handleFocusOut(e, "search")}
+          ${d(this.searchContainerRef)}
+        >
+          <pkt-button
+            skin="secondary"
+            variant="icon-only"
+            iconName="magnifying-glass-big"
+            size=${this.isMobile ? "small" : "medium"}
+            @click=${() => this.handleMenuToggle("search")}
+            state=${this.openMenu === "search" ? "active" : "normal"}
+            aria-expanded=${this.openMenu === "search"}
+            aria-controls="mobile-search-menu"
+            aria-label="Åpne søkefelt"
+          >
+            Søk
+          </pkt-button>
+          <div class=${n} ${d(this.searchMenuRef)}>
+            ${this.openMenu === "search" ? i`
+                  <pkt-textinput
+                    id="mobile-search-menu"
+                    class="pkt-header-service__search-input"
+                    type="search"
+                    label="Søk"
+                    useWrapper="false"
+                    placeholder=${this.searchPlaceholder}
+                    value=${this.searchValue}
+                    autofocus
+                    fullwidth
+                    @input=${this.handleSearchInputChange}
+                    @keydown=${(e) => {
+				e.key === "Enter" && this.handleSearch(e.target.value);
+			}}
+                  ></pkt-textinput>
+                ` : t}
+          </div>
+        </div>
+      `;
+		}
+		return i`
+      <pkt-textinput
+        id="header-service-search"
+        class="pkt-header-service__search-input"
+        type="search"
+        label="Søk"
+        useWrapper="false"
+        placeholder=${this.searchPlaceholder}
+        value=${this.searchValue}
+        @input=${this.handleSearchInputChange}
+        @keydown=${this.handleSearchKeyDown}
+      ></pkt-textinput>
+    `;
+	}
+	renderUserButton() {
+		if (!this.user) return t;
+		let e = s({
+			"pkt-header-service__user-menu": this.isMobile === !1,
+			"pkt-header-service__mobile-menu": this.isMobile === !0,
+			"is-open": this.openMenu === "user"
+		});
+		return i`
+      <div
+        class="pkt-header-service__user-container"
+        @focusout=${(e) => this.handleFocusOut(e, "user")}
+        ${d(this.userContainerRef)}
+      >
+        <pkt-button
+          class=${s({
+			"pkt-header-service__user-button": !0,
+			"pkt-header-service__user-button--mobile": this.isMobile
+		})}
+          skin="secondary"
+          size=${this.isMobile ? "small" : "medium"}
+          state=${this.openMenu === "user" ? "active" : "normal"}
+          variant="icons-right-and-left"
+          iconName="user"
+          secondIconName=${this.openMenu === "user" ? "chevron-thin-up" : "chevron-thin-down"}
+          @click=${() => this.handleMenuToggle("user")}
+        >
+          <span class="pkt-sr-only">Brukermeny: </span>
+          <span translate="no">${this.representing?.name || this.user.name}</span>
+        </pkt-button>
+        ${this.openMenu === "user" && this.user ? i`
+              <div class=${e}>
+                <pkt-header-user-menu
+                  .user=${this.user}
+                  formatted-last-logged-in=${this.formattedLastLoggedIn || t}
+                  .representing=${this.representing}
+                  .userMenu=${this.userMenu}
+                  ?can-change-representation=${this.canChangeRepresentation}
+                  ?logout-on-click=${this.showLogoutInUserMenu}
+                  @change-representation=${() => this.dispatchEvent(new CustomEvent("change-representation", {
+			bubbles: !0,
+			composed: !0
+		}))}
+                  @log-out=${this.handleLogout}
+                ></pkt-header-user-menu>
+              </div>
+            ` : t}
+      </div>
+    `;
+	}
+	renderHeader() {
+		let e = s({
+			"pkt-header-service": !0,
+			"pkt-header-service--compact": this.compact,
+			"pkt-header-service--mobile": this.isMobile,
+			"pkt-header-service--tablet": this.isTablet,
+			"pkt-header-service--fixed": this.isFixed,
+			"pkt-header-service--sticky": this.isSticky,
+			"pkt-header-service--scroll-to-hide": this.shouldHideOnScroll,
+			"pkt-header-service--hidden": this.isHidden
+		}), n = s({
+			"pkt-header-service__logo-area": !0,
+			"pkt-header-service__logo-area--without-service": !this.serviceName
+		});
+		return i`
+      <header class=${e} ${d(this.headerRef)}>
+        <div class=${n}>${this.renderLogo()} ${this.renderServiceName()}</div>
+
+        ${this.hasSlotContent() || this.showSearch || this.showLogoutInHeader ? i`<div class="pkt-header-service__content">
+              ${this.renderSlotContainer()} ${this.renderSearch()}
+              ${this.isTablet && this.showLogoutInHeader ? i`
+                    <pkt-button
+                      skin="secondary"
+                      size=${this.isMobile ? "small" : "medium"}
+                      variant="icon-only"
+                      iconName="exit"
+                      @click=${this.handleLogout}
+                    >
+                      Logg ut
+                    </pkt-button>
+                  ` : t}
+            </div>` : t}
+        ${this.user || !this.isTablet && this.showLogoutInHeader ? i`<div class="pkt-header-service__user">
+              ${this.renderUserButton()}
+              ${!this.isTablet && this.showLogoutInHeader ? i`
+                    <pkt-button
+                      skin="tertiary"
+                      size="medium"
+                      variant="icon-right"
+                      iconName="exit"
+                      @click=${this.handleLogout}
+                    >
+                      Logg ut
+                    </pkt-button>
+                  ` : t}
+            </div>` : t}
+      </header>
+    `;
+	}
+	render() {
+		let e = this.renderHeader();
+		return this.isFixed ? i`
+        <div class="pkt-header-service-wrapper">
+          ${e}
+          <div class=${s({
+			"pkt-header-service-spacer": !0,
+			"pkt-header-service-spacer--compact": this.compact,
+			"pkt-header-service-spacer--has-user": !!this.user,
+			"pkt-header-service-spacer--mobile": this.isMobile,
+			"pkt-header-service-spacer--tablet": this.isTablet
+		})}></div>
+        </div>
+      ` : e;
+	}
+};
+n([r({
+	type: String,
+	attribute: "service-name"
+})], D.prototype, "serviceName", void 0), n([r({
+	type: String,
+	attribute: "service-link"
+})], D.prototype, "serviceLink", void 0), n([r({
+	type: String,
+	attribute: "logo-link"
+})], D.prototype, "logoLink", void 0), n([r({
+	type: String,
+	attribute: "logo-path"
+})], D.prototype, "logoPath", void 0), n([r({
+	type: String,
+	attribute: "search-placeholder"
+})], D.prototype, "searchPlaceholder", void 0), n([r({
+	type: String,
+	attribute: "search-value"
+})], D.prototype, "searchValue", void 0), n([r({
+	type: Number,
+	attribute: "mobile-breakpoint"
+})], D.prototype, "mobileBreakpoint", void 0), n([r({
+	type: Number,
+	attribute: "tablet-breakpoint"
+})], D.prototype, "tabletBreakpoint", void 0), n([r({
+	type: String,
+	attribute: "opened-menu"
+})], D.prototype, "openedMenu", void 0), n([r({
+	type: String,
+	attribute: "log-out-button-placement"
+})], D.prototype, "logOutButtonPlacement", void 0), n([r({ type: String })], D.prototype, "position", void 0), n([r({
+	type: String,
+	attribute: "scroll-behavior"
+})], D.prototype, "scrollBehavior", void 0), n([r({
+	type: String,
+	attribute: "slot-menu-variant"
+})], D.prototype, "slotMenuVariant", void 0), n([r({
+	type: String,
+	attribute: "slot-menu-text"
+})], D.prototype, "slotMenuText", void 0), n([r({
+	type: Boolean,
+	attribute: "hide-logo",
+	converter: p
+})], D.prototype, "hideLogo", void 0), n([r({
+	type: Boolean,
+	converter: p
+})], D.prototype, "compact", void 0), n([r({
+	type: Boolean,
+	attribute: "show-search",
+	converter: p
+})], D.prototype, "showSearch", void 0), n([r({
+	type: Boolean,
+	attribute: "can-change-representation",
+	converter: p
+})], D.prototype, "canChangeRepresentation", void 0), n([r({
+	type: Boolean,
+	attribute: "has-log-out",
+	converter: p
+})], D.prototype, "hasLogOut", void 0), n([r({ type: Object })], D.prototype, "user", void 0), n([r({
+	type: Array,
+	attribute: "user-menu"
+})], D.prototype, "userMenu", void 0), n([r({ type: Object })], D.prototype, "representing", void 0), n([e()], D.prototype, "openMenu", void 0), n([e()], D.prototype, "alignSlotRight", void 0), n([e()], D.prototype, "alignSearchRight", void 0);
+try {
+	a("pkt-header-service")(D);
+} catch {
+	console.warn("Forsøker å definere <pkt-header-service>, men den er allerede definert");
+}
+//#endregion
+//#region src/components/header/header-global.ts
+var O = "https://punkt-cdn.oslo.kommune.no/latest/logos/";
+typeof window < "u" && (window.pktLogoPath = window.pktLogoPath || O);
+var k = "pkt-header-global-menu", A = "pkt-header-global-menu-toggle", j = "pkt-header-global-search-panel", M = "pkt-header-global-search-toggle", N = class extends o {
+	constructor(...e) {
+		super(...e), this.locale = "nb-NO", this.logoLink = h, this.logoPath = typeof window < "u" ? window.pktLogoPath : O, this.position = "fixed", this.scrollBehavior = "hide", this.mobileBreakpoint = 768, this.tabletBreakpoint = 1024, this.logOutButtonPlacement = "none", this.showSearch = !0, this.showContact = !0, this.canChangeRepresentation = !1, this.hasLogOut = !1, this.openMenu = "none", this.loadError = !1, this.headerAnchor = {
+			top: 0,
+			left: 0,
+			width: 0
+		}, this.headerRef = f(), this.menuContainerRef = f(), this.userContainerRef = f(), this.chrome = new w(this, () => ({
+			mobileBreakpoint: this.mobileBreakpoint,
+			tabletBreakpoint: this.tabletBreakpoint,
+			position: this.position,
+			scrollBehavior: this.scrollBehavior
+		})), this.handleClickOutside = (e) => {
+			let t = e.target;
+			this.openMenu === "user" && !t.closest(".pkt-header-global__user-container") && !t.closest(".pkt-header-global__user-menu") && (this.openMenu = "none"), this.openMenu === "menu" && !t.closest(".pkt-header-menu") && !t.closest(`#${A}`) && (this.openMenu = "none"), this.openMenu === "search" && !t.closest(".pkt-header-global__search-panel-inner") && !t.closest(`#${M}`) && (this.openMenu = "none");
+		}, this.handleEscapeKey = (e) => {
+			e.key === "Escape" && this.openMenu !== "none" && (e.preventDefault(), this.chrome.flagRestoreFocus(), this.openMenu = "none");
+		}, this.handleOverlayKeydown = (e) => {
+			if (e.key !== "Tab") return;
+			let t = this.activeOverlay;
+			if (!t || !t.panel || !t.toggle) return;
+			let { panel: n, toggle: r } = t, i = _(n), a = v();
+			if (a && r.contains(a)) {
+				!e.shiftKey && i.length > 0 && (e.preventDefault(), i[0].focus());
+				return;
+			}
+			if (i.length === 0) return;
+			let o = i[0], s = i[i.length - 1], c = !e.shiftKey && a === s, l = e.shiftKey && a === o;
+			(c || l) && (e.preventDefault(), this.openMenu = "none", this.focusToggle(r));
+		}, this.handleOverlayFocusIn = (e) => {
+			let t = this.activeOverlay;
+			if (!t || !t.panel) return;
+			let n = e.target;
+			n && (t.panel.contains(n) || t.toggle?.contains(n) || (this.openMenu = "none"));
+		};
+	}
+	get isMobile() {
+		return this.chrome.isMobile;
+	}
+	get isTablet() {
+		return this.chrome.isTablet;
+	}
+	get isHidden() {
+		return this.chrome.isHidden;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.classList.add("pkt-header-global-host"), this.data ? this.emitDataLoaded(this.data) : this.loadData();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.abortController?.abort(), document.removeEventListener("mousedown", this.handleClickOutside), document.removeEventListener("keydown", this.handleEscapeKey), document.removeEventListener("keydown", this.handleOverlayKeydown), document.removeEventListener("focusin", this.handleOverlayFocusIn);
+	}
+	firstUpdated() {
+		this.chrome.observe(this.headerRef.value);
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), this.openMenu === "menu" || this.openMenu === "search") {
+			let e = this.headerRef.value?.getBoundingClientRect();
+			e && (this.headerAnchor = {
+				top: e.top,
+				left: e.left,
+				width: e.width
+			});
+		}
+	}
+	get overlayAnchorStyle() {
+		let { top: e, left: t, width: n } = this.headerAnchor;
+		return `--pkt-header-global-top: ${e}px; --pkt-header-global-left: ${t}px; --pkt-header-global-width: ${n}px`;
+	}
+	updated(e) {
+		if (super.updated(e), (e.has("mobileBreakpoint") || e.has("tabletBreakpoint")) && this.chrome.refreshBreakpoints(), e.has("dataUrl") && e.get("dataUrl") !== void 0 && !this.data && this.loadData(), e.has("data") && this.data && this.emitDataLoaded(this.data), e.has("openMenu")) {
+			let t = e.get("openMenu");
+			this.openMenu !== "none" && (t === "none" || t === void 0) ? (document.addEventListener("mousedown", this.handleClickOutside), document.addEventListener("keydown", this.handleEscapeKey)) : this.openMenu === "none" && t && t !== "none" && (document.removeEventListener("mousedown", this.handleClickOutside), document.removeEventListener("keydown", this.handleEscapeKey), this.chrome.restoreFocus());
+			let n = t === "menu" || t === "search", r = this.openMenu === "menu" || this.openMenu === "search";
+			r && !n ? (document.addEventListener("keydown", this.handleOverlayKeydown), document.addEventListener("focusin", this.handleOverlayFocusIn)) : !r && n && (document.removeEventListener("keydown", this.handleOverlayKeydown), document.removeEventListener("focusin", this.handleOverlayFocusIn)), this.openMenu === "search" && t !== "search" && requestAnimationFrame(() => {
+				this.querySelector(`#${j} input`)?.focus();
+			}), this.chrome.pauseScrollHide = this.openMenu !== "none", this.chrome.setScrollLock(this.openMenu === "menu" || this.openMenu === "search");
+		}
+	}
+	async loadData() {
+		this.abortController?.abort(), this.abortController = new AbortController(), this.loadError = !1;
+		try {
+			let e = await g(this.dataUrl, this.abortController.signal);
+			this.fetchedData = e, this.emitDataLoaded(e);
+		} catch (e) {
+			if (e.name === "AbortError") return;
+			this.loadError = !0, this.dispatchEvent(new CustomEvent("data-error", {
+				detail: { error: e },
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+	}
+	emitDataLoaded(e) {
+		this.dispatchEvent(new CustomEvent("data-loaded", {
+			detail: { data: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	get effectiveData() {
+		return this.data ?? this.fetchedData;
+	}
+	get localeData() {
+		return m(this.effectiveData, this.locale);
+	}
+	get shouldHideOnScroll() {
+		return this.scrollBehavior === "hide";
+	}
+	get isFixed() {
+		return this.position === "fixed";
+	}
+	get isSticky() {
+		return this.position === "sticky";
+	}
+	toggleMenu(e) {
+		this.openMenu === e ? this.openMenu = "none" : (this.chrome.captureFocus(), this.openMenu = e);
+	}
+	get activeOverlay() {
+		return this.openMenu === "menu" ? {
+			panel: this.menuContainerRef.value ?? null,
+			toggle: this.querySelector(`#${A}`)
+		} : this.openMenu === "search" ? {
+			panel: this.querySelector(`#${j}`),
+			toggle: this.querySelector(`#${M}`)
+		} : null;
+	}
+	focusToggle(e) {
+		(e?.querySelector("button") ?? e)?.focus();
+	}
+	handleSearch(e) {
+		this.dispatchEvent(new CustomEvent("search", {
+			detail: { query: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleLogout() {
+		this.dispatchEvent(new CustomEvent("log-out", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleChangeRepresentation() {
+		this.dispatchEvent(new CustomEvent("change-representation", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	get formattedLastLoggedIn() {
+		return C(this.user?.lastLoggedIn);
+	}
+	get showLogoutInUserMenu() {
+		return this.hasLogOut && (this.logOutButtonPlacement === "userMenu" || this.logOutButtonPlacement === "both");
+	}
+	handleLogoClick(e) {
+		this.dispatchEvent(new CustomEvent("logo-click", {
+			bubbles: !0,
+			composed: !0,
+			detail: { originalEvent: e }
+		}));
+	}
+	renderLogo() {
+		let e = i`
+      <pkt-icon name="oslologo" aria-hidden="true" path=${u(this.logoPath)}></pkt-icon>
+    `;
+		return i`
+      <span class="pkt-header-global__logo">
+        <a href=${this.logoLink} aria-label="Til hovedsiden" @click=${this.handleLogoClick}>
+          ${e}
+        </a>
+      </span>
+    `;
+	}
+	renderSearch(e) {
+		if (!this.showSearch) return t;
+		let n = e.search;
+		if (!n) return t;
+		let r = this.searchPlaceholder ?? n.input.placeholder;
+		return i`
+      <div class="pkt-header-global__search">
+        <pkt-searchinput
+          appearance="global"
+          input-size=${this.isTablet ? "small" : "medium"}
+          fullwidth
+          id=${n.input.id || "pkt-header-global-search"}
+          name=${u(n.input.name)}
+          placeholder=${u(r)}
+          aria-label=${u(e.i18n?.search)}
+          action=${n.endpoint}
+          method="get"
+          @pkt-search=${(e) => this.handleSearch(e.detail.value)}
+        ></pkt-searchinput>
+      </div>
+    `;
+	}
+	renderContact(e) {
+		if (!this.showContact || this.user) return t;
+		let n = e.header?.contact, r = s({
+			"pkt-header-global__contact": !0,
+			"pkt-btn": !0,
+			"pkt-btn--secondary": !0,
+			"pkt-btn--label-only": !0,
+			"pkt-btn--small": this.isMobile || this.isTablet,
+			"pkt-btn--medium": !this.isMobile && !this.isTablet
+		});
+		return n ? i`
+      <a class=${r} href=${n.url}>
+        <span class="pkt-btn__text">${n.text}</span>
+      </a>
+    ` : t;
+	}
+	get isLoading() {
+		return !this.localeData && !this.loadError;
+	}
+	renderMenuToggle(e) {
+		let t = e?.i18n?.menu || "Meny", n = this.openMenu === "menu";
+		return i`
+      <pkt-button
+        id=${A}
+        class="pkt-header-global__menu-toggle"
+        skin=${this.isMobile ? "tertiary" : "secondary"}
+        variant=${this.isMobile ? "icon-only" : "icon-right"}
+        iconName=${n ? "close" : "menu"}
+        size=${this.isTablet ? "small" : "medium"}
+        state=${n ? "active" : "normal"}
+        aria-expanded=${n}
+        aria-controls=${k}
+        ?disabled=${this.isLoading}
+        @click=${() => this.toggleMenu("menu")}
+      >
+        ${t}
+      </pkt-button>
+    `;
+	}
+	renderSearchToggle(e) {
+		if (!this.showSearch || !e.search) return t;
+		let n = this.openMenu === "search";
+		return i`
+      <pkt-button
+        id=${M}
+        class="pkt-header-global__search-toggle"
+        skin="primary"
+        color=${u(n ? void 0 : "yellow")}
+        variant="icon-only"
+        iconName=${n ? "close" : "magnifying-glass-big"}
+        size=${this.isMobile ? "small" : "medium"}
+        state=${n ? "active" : "normal"}
+        aria-expanded=${n}
+        aria-controls=${j}
+        @click=${() => this.toggleMenu("search")}
+      >
+        ${e.i18n?.search || "Søk"}
+      </pkt-button>
+    `;
+	}
+	renderSearchPanel(e) {
+		let n = e.search;
+		if (this.openMenu !== "search" || !this.showSearch || !n) return t;
+		let r = this.searchPlaceholder ?? n.input.placeholder;
+		return i`
+      <div class=${s({
+			"pkt-header-global__search-panel": !0,
+			[`pkt-header-global__search-panel--${this.overlayBreakpointClass}`]: !!this.overlayBreakpointClass
+		})} id=${j} style=${this.overlayAnchorStyle}>
+        <div class="pkt-header-global__search-panel-inner">
+          <pkt-searchinput
+            appearance="global"
+            fullwidth
+            id=${n.input.id || "pkt-header-global-search"}
+            name=${u(n.input.name)}
+            placeholder=${u(r)}
+            aria-label=${u(e.i18n?.search || "Søk")}
+            action=${n.endpoint}
+            method="get"
+            @pkt-search=${(e) => this.handleSearch(e.detail.value)}
+          ></pkt-searchinput>
+        </div>
+      </div>
+    `;
+	}
+	renderUser() {
+		if (!this.user) return t;
+		let e = this.openMenu === "user", n = s({
+			"pkt-header-global__user-menu": !0,
+			"is-open": e
+		});
+		return i`
+      <div class="pkt-header-global__user">
+        <div
+          class="pkt-header-global__user-container ${e ? "is-open" : ""}"
+          ${d(this.userContainerRef)}
+        >
+          <pkt-button
+            class="pkt-header-global__user-button"
+            skin="secondary"
+            size=${this.isTablet ? "small" : "medium"}
+            state=${e ? "active" : "normal"}
+            variant="icons-right-and-left"
+            iconName="user"
+            secondIconName=${e ? "chevron-thin-up" : "chevron-thin-down"}
+            @click=${() => this.toggleMenu("user")}
+          >
+            <span class="pkt-sr-only">Brukermeny: </span>
+            <span translate="no">${this.representing?.name || this.user.name}</span>
+          </pkt-button>
+          ${e ? i`
+                <div class=${n}>
+                  <pkt-header-user-menu
+                    .user=${this.user}
+                    formatted-last-logged-in=${this.formattedLastLoggedIn || t}
+                    .representing=${this.representing}
+                    .userMenu=${this.userMenu}
+                    ?can-change-representation=${this.canChangeRepresentation}
+                    ?logout-on-click=${this.showLogoutInUserMenu}
+                    @change-representation=${() => this.handleChangeRepresentation()}
+                    @log-out=${() => this.handleLogout()}
+                  ></pkt-header-user-menu>
+                </div>
+              ` : t}
+        </div>
+      </div>
+    `;
+	}
+	get overlayBreakpointClass() {
+		return this.isMobile ? "mobile" : this.isTablet ? "tablet" : "";
+	}
+	renderMenu() {
+		return this.openMenu === "menu" ? i`
+      <div
+        class=${s({
+			"pkt-header-global__menu": !0,
+			[`pkt-header-global__menu--${this.overlayBreakpointClass}`]: !!this.overlayBreakpointClass
+		})}
+        id=${k}
+        style=${this.overlayAnchorStyle}
+        ${d(this.menuContainerRef)}
+      >
+        ${this.localeData ? i`
+              <pkt-header-menu
+                .data=${this.effectiveData}
+                locale=${this.locale}
+                open
+                mobile-breakpoint=${this.mobileBreakpoint}
+              ></pkt-header-menu>
+            ` : i`
+              <nav class="pkt-header-menu pkt-header-menu--open">
+                <p class="pkt-header-menu__error">Kunne ikke laste meny.</p>
+              </nav>
+            `}
+      </div>
+    ` : t;
+	}
+	renderHeader() {
+		let e = s({
+			"pkt-header-global": !0,
+			"pkt-header-global--mobile": this.isMobile,
+			"pkt-header-global--tablet": this.isTablet,
+			"pkt-header-global--fixed": this.isFixed,
+			"pkt-header-global--sticky": this.isSticky,
+			"pkt-header-global--scroll-to-hide": this.shouldHideOnScroll,
+			"pkt-header-global--hidden": this.isHidden
+		}), n = this.localeData, r = this.isMobile;
+		return i`
+      <header class=${e} ${d(this.headerRef)}>
+        <div class="pkt-header-global__logo-area">${this.renderLogo()}</div>
+        <div class="pkt-header-global__content">
+          ${!r && n ? this.renderSearch(n) : t}
+          ${r && n ? this.renderSearchToggle(n) : t}
+          ${this.renderMenuToggle(n)}
+          ${!r && n ? this.renderContact(n) : t}
+        </div>
+        ${this.renderUser()}
+      </header>
+    `;
+	}
+	render() {
+		let e = this.renderHeader(), n = this.localeData, r = this.renderMenu(), a = n ? this.renderSearchPanel(n) : t;
+		return this.isFixed ? i`
+        <div class="pkt-header-global-wrapper">
+          ${e}
+          <div class=${s({
+			"pkt-header-global-spacer": !0,
+			"pkt-header-global-spacer--mobile": this.isMobile,
+			"pkt-header-global-spacer--tablet": this.isTablet && !this.isMobile,
+			"pkt-header-global-spacer--has-user": !!this.user
+		})}></div>
+          ${a}${r}
+        </div>
+      ` : i`${e}${a}${r}`;
+	}
+};
+n([r({
+	type: String,
+	attribute: "data-url"
+})], N.prototype, "dataUrl", void 0), n([r({
+	type: Object,
+	attribute: !1
+})], N.prototype, "data", void 0), n([r({ type: String })], N.prototype, "locale", void 0), n([r({
+	type: String,
+	attribute: "logo-link"
+})], N.prototype, "logoLink", void 0), n([r({
+	type: String,
+	attribute: "logo-path"
+})], N.prototype, "logoPath", void 0), n([r({
+	type: String,
+	attribute: "search-placeholder"
+})], N.prototype, "searchPlaceholder", void 0), n([r({ type: String })], N.prototype, "position", void 0), n([r({
+	type: String,
+	attribute: "scroll-behavior"
+})], N.prototype, "scrollBehavior", void 0), n([r({
+	type: Number,
+	attribute: "mobile-breakpoint"
+})], N.prototype, "mobileBreakpoint", void 0), n([r({
+	type: Number,
+	attribute: "tablet-breakpoint"
+})], N.prototype, "tabletBreakpoint", void 0), n([r({
+	type: String,
+	attribute: "log-out-button-placement"
+})], N.prototype, "logOutButtonPlacement", void 0), n([r({
+	type: Boolean,
+	attribute: "show-search",
+	converter: p
+})], N.prototype, "showSearch", void 0), n([r({
+	type: Boolean,
+	attribute: "show-contact",
+	converter: p
+})], N.prototype, "showContact", void 0), n([r({
+	type: Boolean,
+	attribute: "can-change-representation",
+	converter: p
+})], N.prototype, "canChangeRepresentation", void 0), n([r({
+	type: Boolean,
+	attribute: "has-log-out",
+	converter: p
+})], N.prototype, "hasLogOut", void 0), n([r({ type: Object })], N.prototype, "user", void 0), n([r({
+	type: Array,
+	attribute: "user-menu"
+})], N.prototype, "userMenu", void 0), n([r({ type: Object })], N.prototype, "representing", void 0), n([e()], N.prototype, "openMenu", void 0), n([e()], N.prototype, "fetchedData", void 0), n([e()], N.prototype, "loadError", void 0), n([e()], N.prototype, "headerAnchor", void 0);
+try {
+	a("pkt-header-global")(N);
+} catch {
+	console.warn("Forsøker å definere <pkt-header-global>, men den er allerede definert");
+}
+//#endregion
+//#region src/components/header/header.ts
+var P = class extends l {
+	constructor(...e) {
+		super(...e), this.type = "service", this.searchPlaceholder = "Søk", this.searchValue = "", this.mobileBreakpoint = 768, this.tabletBreakpoint = 1280, this.openedMenu = "none", this.logOutButtonPlacement = "none", this.position = "fixed", this.scrollBehavior = "hide", this.slotMenuVariant = "icon-only", this.slotMenuText = "Meny", this.hideLogo = !1, this.compact = !1, this.canChangeRepresentation = !1, this.hasLogOut = !1, this.showContact = !0;
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.emitDeprecationWarnings();
+	}
+	emitDeprecationWarnings() {
+		this.userMenuFooter !== void 0 && console.warn("[PktHeader] userMenuFooter is deprecated. Use userMenu instead."), this.userOptions !== void 0 && console.warn("[PktHeader] userOptions is deprecated. Use userMenu instead.");
+	}
+	get effectiveUserMenu() {
+		let e = this.userMenu || [], t = this.userMenuFooter || [], n = this.userOptions || [];
+		return t.length || n.length ? [
+			...e,
+			...n,
+			...t
+		] : this.userMenu;
+	}
+	renderGlobal() {
+		return i`
+      <pkt-header-global
+        data-url=${u(this.dataUrl)}
+        locale=${u(this.locale)}
+        logo-link=${u(this.logoLink)}
+        logo-path=${u(this.logoPath)}
+        search-placeholder=${u(this.hasAttribute("search-placeholder") ? this.searchPlaceholder : void 0)}
+        mobile-breakpoint=${u(this.hasAttribute("mobile-breakpoint") ? this.mobileBreakpoint : void 0)}
+        tablet-breakpoint=${u(this.hasAttribute("tablet-breakpoint") ? this.tabletBreakpoint : void 0)}
+        log-out-button-placement=${this.logOutButtonPlacement}
+        position=${this.position}
+        scroll-behavior=${this.scrollBehavior}
+        .data=${this.data}
+        .showSearch=${this.showSearch ?? !0}
+        .showContact=${this.showContact}
+        .canChangeRepresentation=${this.canChangeRepresentation}
+        .hasLogOut=${this.hasLogOut}
+        .user=${this.user}
+        .userMenu=${this.effectiveUserMenu}
+        .representing=${this.representing}
+      ></pkt-header-global>
+    `;
+	}
+	render() {
+		return this.type === "global" ? this.renderGlobal() : i`
+      <pkt-header-service
+        service-name=${u(this.serviceName)}
+        service-link=${u(this.serviceLink)}
+        logo-link=${u(this.logoLink)}
+        logo-path=${u(this.logoPath)}
+        search-placeholder=${this.searchPlaceholder}
+        search-value=${this.searchValue}
+        mobile-breakpoint=${this.mobileBreakpoint}
+        tablet-breakpoint=${this.tabletBreakpoint}
+        opened-menu=${this.openedMenu}
+        log-out-button-placement=${this.logOutButtonPlacement}
+        position=${this.position}
+        scroll-behavior=${this.scrollBehavior}
+        slot-menu-variant=${this.slotMenuVariant}
+        slot-menu-text=${this.slotMenuText}
+        .hideLogo=${this.hideLogo}
+        .compact=${this.compact}
+        .showSearch=${this.showSearch ?? !1}
+        .canChangeRepresentation=${this.canChangeRepresentation}
+        .hasLogOut=${this.hasLogOut}
+        .user=${this.user}
+        .userMenu=${this.effectiveUserMenu}
+        .representing=${this.representing}
+      >
+        ${this.hasSlotContent() ? i`<div class="pkt-contents">${c(this)}</div>` : t}
+      </pkt-header-service>
+    `;
+	}
+};
+n([r({ type: String })], P.prototype, "type", void 0), n([r({
+	type: String,
+	attribute: "service-name"
+})], P.prototype, "serviceName", void 0), n([r({
+	type: String,
+	attribute: "service-link"
+})], P.prototype, "serviceLink", void 0), n([r({
+	type: String,
+	attribute: "logo-link"
+})], P.prototype, "logoLink", void 0), n([r({
+	type: String,
+	attribute: "logo-path"
+})], P.prototype, "logoPath", void 0), n([r({
+	type: String,
+	attribute: "search-placeholder"
+})], P.prototype, "searchPlaceholder", void 0), n([r({
+	type: String,
+	attribute: "search-value"
+})], P.prototype, "searchValue", void 0), n([r({
+	type: Number,
+	attribute: "mobile-breakpoint"
+})], P.prototype, "mobileBreakpoint", void 0), n([r({
+	type: Number,
+	attribute: "tablet-breakpoint"
+})], P.prototype, "tabletBreakpoint", void 0), n([r({
+	type: String,
+	attribute: "opened-menu"
+})], P.prototype, "openedMenu", void 0), n([r({
+	type: String,
+	attribute: "log-out-button-placement"
+})], P.prototype, "logOutButtonPlacement", void 0), n([r({ type: String })], P.prototype, "position", void 0), n([r({
+	type: String,
+	attribute: "scroll-behavior"
+})], P.prototype, "scrollBehavior", void 0), n([r({
+	type: String,
+	attribute: "slot-menu-variant"
+})], P.prototype, "slotMenuVariant", void 0), n([r({
+	type: String,
+	attribute: "slot-menu-text"
+})], P.prototype, "slotMenuText", void 0), n([r({
+	type: Boolean,
+	attribute: "hide-logo",
+	converter: p
+})], P.prototype, "hideLogo", void 0), n([r({
+	type: Boolean,
+	converter: p
+})], P.prototype, "compact", void 0), n([r({
+	type: Boolean,
+	attribute: "show-search",
+	converter: p
+})], P.prototype, "showSearch", void 0), n([r({
+	type: Boolean,
+	attribute: "can-change-representation",
+	converter: p
+})], P.prototype, "canChangeRepresentation", void 0), n([r({
+	type: Boolean,
+	attribute: "has-log-out",
+	converter: p
+})], P.prototype, "hasLogOut", void 0), n([r({ type: Object })], P.prototype, "user", void 0), n([r({
+	type: Array,
+	attribute: "user-menu"
+})], P.prototype, "userMenu", void 0), n([r({ type: Object })], P.prototype, "representing", void 0), n([r({
+	type: String,
+	attribute: "data-url"
+})], P.prototype, "dataUrl", void 0), n([r({
+	type: Object,
+	attribute: !1
+})], P.prototype, "data", void 0), n([r({ type: String })], P.prototype, "locale", void 0), n([r({
+	type: Boolean,
+	attribute: "show-contact",
+	converter: p
+})], P.prototype, "showContact", void 0), n([r({
+	type: Array,
+	attribute: "user-menu-footer"
+})], P.prototype, "userMenuFooter", void 0), n([r({
+	type: Array,
+	attribute: "user-options"
+})], P.prototype, "userOptions", void 0);
+try {
+	a("pkt-header")(P);
+} catch {
+	console.warn("Forsøker å definere <pkt-header>, men den er allerede definert");
+}
+//#endregion
+export { C as a, T as i, N as n, D as r, P as t };