@oslokommune/punkt-elements 16.26.7 → 17.0.2

package/dist/header-D_xvPR4R.js

@@ -1,801 +0,0 @@
-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-C_YzTSuU.js";
-import { n as d, t as f } from "./ref-WGS0u7i2.js";
-import { t as p } from "./booleanish-MfutDT_4.js";
-import "./link-FmkQvSQL.js";
-import "./textinput-oU2EvFsi.js";
-//#region ../../shared-types/header.ts
-var m = (e) => typeof e.target == "string" ? {
-	title: e.title,
-	iconName: e.iconName,
-	href: e.target
-} : {
-	title: e.title,
-	iconName: e.iconName,
-	onClick: e.target
-}, h = (e) => m(e), g = (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"
-	});
-}, _ = 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(h);
-		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 })], _.prototype, "user", void 0), n([r({
-	type: String,
-	attribute: "formatted-last-logged-in"
-})], _.prototype, "formattedLastLoggedIn", void 0), n([r({ type: Object })], _.prototype, "representing", void 0), n([r({
-	type: Array,
-	attribute: "user-menu"
-})], _.prototype, "userMenu", void 0), n([r({
-	type: Boolean,
-	attribute: "can-change-representation",
-	converter: p
-})], _.prototype, "canChangeRepresentation", void 0), n([r({
-	type: Boolean,
-	attribute: "logout-on-click",
-	converter: p
-})], _.prototype, "logoutOnClick", void 0);
-try {
-	a("pkt-header-user-menu")(_);
-} catch {
-	console.warn("Forsøker å definere <pkt-header-user-menu>, men den er allerede definert");
-}
-//#endregion
-//#region src/components/header/header-service.ts
-var v = "https://punkt-cdn.oslo.kommune.no/latest/logos/";
-typeof window < "u" && (window.pktLogoPath = window.pktLogoPath || v);
-var y = class extends l {
-	constructor(...e) {
-		super(...e), this.logoPath = typeof window < "u" ? window.pktLogoPath : v, 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.isMobile = !1, this.isTablet = !1, this.openMenu = "none", this.isHidden = !1, this.componentWidth = typeof window < "u" ? window.innerWidth : 0, 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.lastScrollPosition = 0, this.savedScrollY = 0, this.lastFocusedElement = null, this.shouldRestoreFocus = !1, this.handleScroll = () => {
-			if (!this.shouldHideOnScroll) return;
-			let e = window.pageYOffset || document.documentElement.scrollTop;
-			e < 0 || Math.abs(e - this.lastScrollPosition) < 60 || (this.isHidden = e > this.lastScrollPosition, this.lastScrollPosition = e);
-		}, 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.shouldRestoreFocus = !0, this.openMenu = "none");
-		};
-	}
-	connectedCallback() {
-		super.connectedCallback(), this.setupScrollListener();
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this.resizeObserver?.disconnect(), window.removeEventListener("scroll", this.handleScroll), this.unlockScroll();
-	}
-	firstUpdated() {
-		this.setupResizeObserver();
-	}
-	updated(e) {
-		if (super.updated(e), e.has("openedMenu") && this.openedMenu !== this.openMenu && (this.openMenu = this.openedMenu), (e.has("mobileBreakpoint") || e.has("tabletBreakpoint")) && (this.updateIsMobile(), this.updateIsTablet()), 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.restoreFocus());
-		}
-		(e.has("openMenu") || e.has("isMobile")) && this.updateScrollLock();
-	}
-	setupResizeObserver() {
-		let e = this.headerRef.value;
-		e && (this.componentWidth = e.offsetWidth, this.updateIsMobile(), this.updateIsTablet(), this.resizeObserver = new ResizeObserver((e) => {
-			for (let t of e) t.borderBoxSize && t.borderBoxSize.length > 0 ? this.componentWidth = t.borderBoxSize[0].inlineSize : this.componentWidth = t.contentRect.width, this.updateIsMobile(), this.updateIsTablet();
-		}), this.resizeObserver.observe(e));
-	}
-	updateIsMobile() {
-		this.isMobile = this.componentWidth < this.mobileBreakpoint;
-	}
-	updateIsTablet() {
-		this.isTablet = this.componentWidth < this.tabletBreakpoint;
-	}
-	updateScrollLock() {
-		this.position === "fixed" && this.isMobile && this.openMenu !== "none" ? this.lockScroll() : this.unlockScroll();
-	}
-	lockScroll() {
-		let e = document.body, t = document.documentElement;
-		this.savedScrollY = window.scrollY || window.pageYOffset;
-		let n = window.innerWidth - t.clientWidth;
-		n > 0 && (e.style.paddingRight = `${n}px`), e.style.position = "fixed", e.style.top = `-${this.savedScrollY}px`, e.style.left = "0", e.style.right = "0", e.style.width = "100%", e.style.overflow = "hidden", t.classList.add("is-scroll-locked");
-	}
-	unlockScroll() {
-		let e = document.body, t = document.documentElement;
-		t.classList.contains("is-scroll-locked") && (e.style.removeProperty("position"), e.style.removeProperty("top"), e.style.removeProperty("left"), e.style.removeProperty("right"), e.style.removeProperty("width"), e.style.removeProperty("overflow"), e.style.removeProperty("padding-right"), t.classList.remove("is-scroll-locked"), window.scrollTo({ top: this.savedScrollY }));
-	}
-	setupScrollListener() {
-		window.addEventListener("scroll", this.handleScroll);
-	}
-	restoreFocus() {
-		this.shouldRestoreFocus && this.lastFocusedElement && document.contains(this.lastFocusedElement) && this.lastFocusedElement.focus(), this.lastFocusedElement = null, this.shouldRestoreFocus = !1;
-	}
-	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.lastFocusedElement = document.activeElement, 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 g(this.user?.lastLoggedIn);
-	}
-	get isFixed() {
-		return this.position === "fixed";
-	}
-	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 this.logoLink && typeof this.logoLink == "string" ? i`
-        <span class="pkt-header-service__logo">
-          <a href=${this.logoLink} aria-label="Tilbake til forside" @click=${this.handleLogoClick}>
-            ${e}
-          </a>
-        </span>
-      ` : this.hasAttribute("logo-link") ? i`
-        <span class="pkt-header-service__logo">
-          <button
-            aria-label="Tilbake til forside"
-            class="pkt-link-button pkt-link pkt-header-service__logo-link"
-            @click=${this.handleLogoClick}
-          >
-            ${e}
-          </button>
-        </span>
-      ` : i`
-      <span class="pkt-header-service__logo" @click=${this.handleLogoClick}>${e}</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 ? "menu" : 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--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"
-})], y.prototype, "serviceName", void 0), n([r({
-	type: String,
-	attribute: "service-link"
-})], y.prototype, "serviceLink", void 0), n([r({
-	type: String,
-	attribute: "logo-link"
-})], y.prototype, "logoLink", void 0), n([r({
-	type: String,
-	attribute: "logo-path"
-})], y.prototype, "logoPath", void 0), n([r({
-	type: String,
-	attribute: "search-placeholder"
-})], y.prototype, "searchPlaceholder", void 0), n([r({
-	type: String,
-	attribute: "search-value"
-})], y.prototype, "searchValue", void 0), n([r({
-	type: Number,
-	attribute: "mobile-breakpoint"
-})], y.prototype, "mobileBreakpoint", void 0), n([r({
-	type: Number,
-	attribute: "tablet-breakpoint"
-})], y.prototype, "tabletBreakpoint", void 0), n([r({
-	type: String,
-	attribute: "opened-menu"
-})], y.prototype, "openedMenu", void 0), n([r({
-	type: String,
-	attribute: "log-out-button-placement"
-})], y.prototype, "logOutButtonPlacement", void 0), n([r({ type: String })], y.prototype, "position", void 0), n([r({
-	type: String,
-	attribute: "scroll-behavior"
-})], y.prototype, "scrollBehavior", void 0), n([r({
-	type: String,
-	attribute: "slot-menu-variant"
-})], y.prototype, "slotMenuVariant", void 0), n([r({
-	type: String,
-	attribute: "slot-menu-text"
-})], y.prototype, "slotMenuText", void 0), n([r({
-	type: Boolean,
-	attribute: "hide-logo",
-	converter: p
-})], y.prototype, "hideLogo", void 0), n([r({
-	type: Boolean,
-	converter: p
-})], y.prototype, "compact", void 0), n([r({
-	type: Boolean,
-	attribute: "show-search",
-	converter: p
-})], y.prototype, "showSearch", void 0), n([r({
-	type: Boolean,
-	attribute: "can-change-representation",
-	converter: p
-})], y.prototype, "canChangeRepresentation", void 0), n([r({
-	type: Boolean,
-	attribute: "has-log-out",
-	converter: p
-})], y.prototype, "hasLogOut", void 0), n([r({ type: Object })], y.prototype, "user", void 0), n([r({
-	type: Array,
-	attribute: "user-menu"
-})], y.prototype, "userMenu", void 0), n([r({ type: Object })], y.prototype, "representing", void 0), n([e()], y.prototype, "isMobile", void 0), n([e()], y.prototype, "isTablet", void 0), n([e()], y.prototype, "openMenu", void 0), n([e()], y.prototype, "isHidden", void 0), n([e()], y.prototype, "componentWidth", void 0), n([e()], y.prototype, "alignSlotRight", void 0), n([e()], y.prototype, "alignSearchRight", void 0);
-try {
-	a("pkt-header-service")(y);
-} catch {
-	console.warn("Forsøker å definere <pkt-header-service>, men den er allerede definert");
-}
-//#endregion
-//#region src/components/header/header.ts
-var b = class extends l {
-	constructor(...e) {
-		super(...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;
-	}
-	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;
-	}
-	render() {
-		return 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}
-        .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,
-	attribute: "service-name"
-})], b.prototype, "serviceName", void 0), n([r({
-	type: String,
-	attribute: "service-link"
-})], b.prototype, "serviceLink", void 0), n([r({
-	type: String,
-	attribute: "logo-link"
-})], b.prototype, "logoLink", void 0), n([r({
-	type: String,
-	attribute: "logo-path"
-})], b.prototype, "logoPath", void 0), n([r({
-	type: String,
-	attribute: "search-placeholder"
-})], b.prototype, "searchPlaceholder", void 0), n([r({
-	type: String,
-	attribute: "search-value"
-})], b.prototype, "searchValue", void 0), n([r({
-	type: Number,
-	attribute: "mobile-breakpoint"
-})], b.prototype, "mobileBreakpoint", void 0), n([r({
-	type: Number,
-	attribute: "tablet-breakpoint"
-})], b.prototype, "tabletBreakpoint", void 0), n([r({
-	type: String,
-	attribute: "opened-menu"
-})], b.prototype, "openedMenu", void 0), n([r({
-	type: String,
-	attribute: "log-out-button-placement"
-})], b.prototype, "logOutButtonPlacement", void 0), n([r({ type: String })], b.prototype, "position", void 0), n([r({
-	type: String,
-	attribute: "scroll-behavior"
-})], b.prototype, "scrollBehavior", void 0), n([r({
-	type: String,
-	attribute: "slot-menu-variant"
-})], b.prototype, "slotMenuVariant", void 0), n([r({
-	type: String,
-	attribute: "slot-menu-text"
-})], b.prototype, "slotMenuText", void 0), n([r({
-	type: Boolean,
-	attribute: "hide-logo",
-	converter: p
-})], b.prototype, "hideLogo", void 0), n([r({
-	type: Boolean,
-	converter: p
-})], b.prototype, "compact", void 0), n([r({
-	type: Boolean,
-	attribute: "show-search",
-	converter: p
-})], b.prototype, "showSearch", void 0), n([r({
-	type: Boolean,
-	attribute: "can-change-representation",
-	converter: p
-})], b.prototype, "canChangeRepresentation", void 0), n([r({
-	type: Boolean,
-	attribute: "has-log-out",
-	converter: p
-})], b.prototype, "hasLogOut", void 0), n([r({ type: Object })], b.prototype, "user", void 0), n([r({
-	type: Array,
-	attribute: "user-menu"
-})], b.prototype, "userMenu", void 0), n([r({ type: Object })], b.prototype, "representing", void 0), n([r({
-	type: Array,
-	attribute: "user-menu-footer"
-})], b.prototype, "userMenuFooter", void 0), n([r({
-	type: Array,
-	attribute: "user-options"
-})], b.prototype, "userOptions", void 0);
-try {
-	a("pkt-header")(b);
-} catch {
-	console.warn("Forsøker å definere <pkt-header>, men den er allerede definert");
-}
-//#endregion
-export { g as i, y as n, _ as r, b as t };