@oslokommune/punkt-elements 16.7.3 → 16.7.7

package/dist/header-a6ztVNp3.js

@@ -0,0 +1,782 @@
+import { c as e, d as t, l as n, o as r, r as i, s as a, t as o } from "./element-cZ85T_aa.js";
+import { t as s } from "./class-map-C8HuhNzZ.js";
+import { n as c, t as l } from "./element-with-slot-4J2o3SeU.js";
+import "./icon-Co72KtgF.js";
+import { t as u } from "./if-defined-Cjj8qN-Z.js";
+import "./button-BIpd1xJh.js";
+import { n as d, t as f } from "./ref-RS8Uv6uC.js";
+import { t as p } from "./booleanish-BmcOU-43.js";
+import "./link-CKAFMz9j.js";
+import "./textinput-BUgntXnM.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, r) {
+		let i = "href" in e, a = s({
+			"pkt-user-menu__link": !0,
+			"pkt-link-button": !i,
+			"pkt-link": !i,
+			"pkt-link--icon-left": !i,
+			[r || ""]: !!r
+		});
+		return i ? t`
+        <pkt-link
+          icon-name=${e.iconName || n}
+          href=${e.href}
+          aria-hidden="true"
+          class="pkt-user-menu__link ${r || ""}"
+        >
+          ${e.title}
+        </pkt-link>
+      ` : t`
+      <button class=${a} type="button" @click=${() => this.handleMenuItemClick(e)}>
+        ${e.iconName ? t`<pkt-icon
+              name=${e.iconName}
+              class="pkt-link__icon"
+              aria-hidden="true"
+            ></pkt-icon>` : n}
+        ${e.title}
+      </button>
+    `;
+	}
+	renderLinkSection(e) {
+		return t`
+      <ul class="pkt-user-menu__sublist">
+        ${e.map((e) => t`
+            <li class="pkt-user-menu__subitem">${this.renderLinkOrButton(e)}</li>
+          `)}
+      </ul>
+    `;
+	}
+	render() {
+		let e = this.userMenu?.map(h);
+		return t`
+      <nav class="pkt-user-menu" aria-label="Meny for innlogget bruker">
+        <ul class="pkt-user-menu__list">
+          <!-- User section -->
+          ${this.user ? t`
+                <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 ? t`
+                        <div class="pkt-user-menu__last-logged-in">
+                          Sist pålogget: <time>${this.formattedLastLoggedIn}</time>
+                        </div>
+                      ` : n}
+                </li>
+              ` : n}
+
+          <!-- User menu items -->
+          ${e && e.length > 0 ? t`
+                <li class="pkt-user-menu__item">${this.renderLinkSection(e)}</li>
+              ` : n}
+
+          <!-- Representing section -->
+          ${this.representing ? t`
+                <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 ? t`<div class="pkt-user-menu__org-number">
+                        Org.nr. ${this.representing.orgNumber}
+                      </div>` : n}
+                  ${this.canChangeRepresentation ? t`
+                        <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>
+                      ` : n}
+                </li>
+              ` : n}
+
+          <!-- Change representation without representing object -->
+          ${!this.representing && this.canChangeRepresentation ? t`
+                <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>
+              ` : n}
+
+          <!-- Logout -->
+          ${this.logoutOnClick ? t`
+                <li class="pkt-user-menu__item">
+                  ${this.renderLinkOrButton({
+			title: "Logg ut",
+			iconName: "exit",
+			onClick: () => this.handleLogout()
+		})}
+                </li>
+              ` : n}
+        </ul>
+      </nav>
+    `;
+	}
+};
+i([a({ type: Object })], _.prototype, "user", void 0), i([a({
+	type: String,
+	attribute: "formatted-last-logged-in"
+})], _.prototype, "formattedLastLoggedIn", void 0), i([a({ type: Object })], _.prototype, "representing", void 0), i([a({
+	type: Array,
+	attribute: "user-menu"
+})], _.prototype, "userMenu", void 0), i([a({
+	type: Boolean,
+	attribute: "can-change-representation",
+	converter: p
+})], _.prototype, "canChangeRepresentation", void 0), i([a({
+	type: Boolean,
+	attribute: "logout-on-click",
+	converter: p
+})], _.prototype, "logoutOnClick", void 0);
+try {
+	e("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/", y = 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, 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.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 n;
+		let e = t`
+      <pkt-icon name="oslologo" aria-hidden="true" path=${v}></pkt-icon>
+    `;
+		return this.logoLink && typeof this.logoLink == "string" ? t`
+        <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") ? t`
+        <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>
+      ` : t`
+      <span class="pkt-header-service__logo" @click=${this.handleLogoClick}>${e}</span>
+    `;
+	}
+	renderServiceName() {
+		return this.serviceName ? this.serviceLink && typeof this.serviceLink == "string" ? t`
+        <span class="pkt-header-service__service-name">
+          <pkt-link
+            href=${this.serviceLink}
+            class="pkt-header-service__service-link"
+            @click=${this.handleServiceClick}
+          >
+            ${this.serviceName}
+          </pkt-link>
+        </span>
+      ` : this.hasAttribute("service-link") ? t`
+        <span class="pkt-header-service__service-name">
+          <button
+            class="pkt-link-button pkt-link pkt-header-service__service-link"
+            @click=${this.handleServiceClick}
+          >
+            ${this.serviceName}
+          </button>
+        </span>
+      ` : t`
+      <span class="pkt-header-service__service-name" @click=${this.handleServiceClick}>
+        <span class="pkt-header-service__service-link">${this.serviceName}</span>
+      </span>
+    ` : n;
+	}
+	renderSlotContainer() {
+		if (!this.hasSlotContent()) return n;
+		let e = s({
+			"pkt-header-service__slot-container": !0,
+			"is-open": this.openMenu === "slot"
+		}), r = s({
+			"pkt-header-service__slot-content": !0,
+			"align-right": this.alignSlotRight
+		});
+		return t`
+      <div
+        class=${e}
+        @focusout=${(e) => this.handleFocusOut(e, "slot")}
+        ${d(this.slotContainerRef)}
+      >
+        ${this.isTablet && this.hasSlotContent() ? t`
+              <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>
+            ` : n}
+        <div
+          class=${r}
+          id="mobile-slot-menu"
+          role=${this.isTablet ? "menu" : n}
+          aria-label=${this.isTablet ? "Meny" : n}
+          ${d(this.slotContentRef)}
+        >
+          ${c(this)}
+        </div>
+      </div>
+    `;
+	}
+	renderSearch() {
+		if (!this.showSearch) return n;
+		if (this.isTablet) {
+			let e = s({
+				"pkt-header-service__search-container": !0,
+				"is-open": this.openMenu === "search"
+			}), r = s({
+				"pkt-header-service__mobile-menu": !0,
+				"is-open": this.openMenu === "search",
+				"align-right": this.alignSearchRight
+			});
+			return t`
+        <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=${r} ${d(this.searchMenuRef)}>
+            ${this.openMenu === "search" ? t`
+                  <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>
+                ` : n}
+          </div>
+        </div>
+      `;
+		}
+		return t`
+      <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 n;
+		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 t`
+      <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>${this.representing?.name || this.user.name}</span>
+        </pkt-button>
+        ${this.openMenu === "user" && this.user ? t`
+              <div class=${e}>
+                <pkt-header-user-menu
+                  .user=${this.user}
+                  formatted-last-logged-in=${this.formattedLastLoggedIn || n}
+                  .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>
+            ` : n}
+      </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
+		}), r = s({
+			"pkt-header-service__logo-area": !0,
+			"pkt-header-service__logo-area--without-service": !this.serviceName
+		});
+		return t`
+      <header class=${e} ${d(this.headerRef)}>
+        <div class=${r}>${this.renderLogo()} ${this.renderServiceName()}</div>
+
+        ${this.hasSlotContent() || this.showSearch || this.showLogoutInHeader ? t`<div class="pkt-header-service__content">
+              ${this.renderSlotContainer()} ${this.renderSearch()}
+              ${this.isTablet && this.showLogoutInHeader ? t`
+                    <pkt-button
+                      skin="secondary"
+                      size=${this.isMobile ? "small" : "medium"}
+                      variant="icon-only"
+                      iconName="exit"
+                      @click=${this.handleLogout}
+                    >
+                      Logg ut
+                    </pkt-button>
+                  ` : n}
+            </div>` : n}
+        ${this.user || !this.isTablet && this.showLogoutInHeader ? t`<div class="pkt-header-service__user">
+              ${this.renderUserButton()}
+              ${!this.isTablet && this.showLogoutInHeader ? t`
+                    <pkt-button
+                      skin="tertiary"
+                      size="medium"
+                      variant="icon-right"
+                      iconName="exit"
+                      @click=${this.handleLogout}
+                    >
+                      Logg ut
+                    </pkt-button>
+                  ` : n}
+            </div>` : n}
+      </header>
+    `;
+	}
+	render() {
+		let e = this.renderHeader();
+		return this.isFixed ? t`
+        <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
+		})}></div>
+        </div>
+      ` : e;
+	}
+};
+i([a({
+	type: String,
+	attribute: "service-name"
+})], y.prototype, "serviceName", void 0), i([a({
+	type: String,
+	attribute: "service-link"
+})], y.prototype, "serviceLink", void 0), i([a({
+	type: String,
+	attribute: "logo-link"
+})], y.prototype, "logoLink", void 0), i([a({
+	type: String,
+	attribute: "search-placeholder"
+})], y.prototype, "searchPlaceholder", void 0), i([a({
+	type: String,
+	attribute: "search-value"
+})], y.prototype, "searchValue", void 0), i([a({
+	type: Number,
+	attribute: "mobile-breakpoint"
+})], y.prototype, "mobileBreakpoint", void 0), i([a({
+	type: Number,
+	attribute: "tablet-breakpoint"
+})], y.prototype, "tabletBreakpoint", void 0), i([a({
+	type: String,
+	attribute: "opened-menu"
+})], y.prototype, "openedMenu", void 0), i([a({
+	type: String,
+	attribute: "log-out-button-placement"
+})], y.prototype, "logOutButtonPlacement", void 0), i([a({ type: String })], y.prototype, "position", void 0), i([a({
+	type: String,
+	attribute: "scroll-behavior"
+})], y.prototype, "scrollBehavior", void 0), i([a({
+	type: String,
+	attribute: "slot-menu-variant"
+})], y.prototype, "slotMenuVariant", void 0), i([a({
+	type: String,
+	attribute: "slot-menu-text"
+})], y.prototype, "slotMenuText", void 0), i([a({
+	type: Boolean,
+	attribute: "hide-logo",
+	converter: p
+})], y.prototype, "hideLogo", void 0), i([a({
+	type: Boolean,
+	converter: p
+})], y.prototype, "compact", void 0), i([a({
+	type: Boolean,
+	attribute: "show-search",
+	converter: p
+})], y.prototype, "showSearch", void 0), i([a({
+	type: Boolean,
+	attribute: "can-change-representation",
+	converter: p
+})], y.prototype, "canChangeRepresentation", void 0), i([a({
+	type: Boolean,
+	attribute: "has-log-out",
+	converter: p
+})], y.prototype, "hasLogOut", void 0), i([a({ type: Object })], y.prototype, "user", void 0), i([a({
+	type: Array,
+	attribute: "user-menu"
+})], y.prototype, "userMenu", void 0), i([a({ type: Object })], y.prototype, "representing", void 0), i([r()], y.prototype, "isMobile", void 0), i([r()], y.prototype, "isTablet", void 0), i([r()], y.prototype, "openMenu", void 0), i([r()], y.prototype, "isHidden", void 0), i([r()], y.prototype, "componentWidth", void 0), i([r()], y.prototype, "alignSlotRight", void 0), i([r()], y.prototype, "alignSearchRight", void 0);
+try {
+	e("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 t`
+      <pkt-header-service
+        service-name=${u(this.serviceName)}
+        service-link=${u(this.serviceLink)}
+        logo-link=${u(this.logoLink)}
+        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() ? t`<div class="pkt-contents">${c(this)}</div>` : n}
+      </pkt-header-service>
+    `;
+	}
+};
+i([a({
+	type: String,
+	attribute: "service-name"
+})], b.prototype, "serviceName", void 0), i([a({
+	type: String,
+	attribute: "service-link"
+})], b.prototype, "serviceLink", void 0), i([a({
+	type: String,
+	attribute: "logo-link"
+})], b.prototype, "logoLink", void 0), i([a({
+	type: String,
+	attribute: "search-placeholder"
+})], b.prototype, "searchPlaceholder", void 0), i([a({
+	type: String,
+	attribute: "search-value"
+})], b.prototype, "searchValue", void 0), i([a({
+	type: Number,
+	attribute: "mobile-breakpoint"
+})], b.prototype, "mobileBreakpoint", void 0), i([a({
+	type: Number,
+	attribute: "tablet-breakpoint"
+})], b.prototype, "tabletBreakpoint", void 0), i([a({
+	type: String,
+	attribute: "opened-menu"
+})], b.prototype, "openedMenu", void 0), i([a({
+	type: String,
+	attribute: "log-out-button-placement"
+})], b.prototype, "logOutButtonPlacement", void 0), i([a({ type: String })], b.prototype, "position", void 0), i([a({
+	type: String,
+	attribute: "scroll-behavior"
+})], b.prototype, "scrollBehavior", void 0), i([a({
+	type: String,
+	attribute: "slot-menu-variant"
+})], b.prototype, "slotMenuVariant", void 0), i([a({
+	type: String,
+	attribute: "slot-menu-text"
+})], b.prototype, "slotMenuText", void 0), i([a({
+	type: Boolean,
+	attribute: "hide-logo",
+	converter: p
+})], b.prototype, "hideLogo", void 0), i([a({
+	type: Boolean,
+	converter: p
+})], b.prototype, "compact", void 0), i([a({
+	type: Boolean,
+	attribute: "show-search",
+	converter: p
+})], b.prototype, "showSearch", void 0), i([a({
+	type: Boolean,
+	attribute: "can-change-representation",
+	converter: p
+})], b.prototype, "canChangeRepresentation", void 0), i([a({
+	type: Boolean,
+	attribute: "has-log-out",
+	converter: p
+})], b.prototype, "hasLogOut", void 0), i([a({ type: Object })], b.prototype, "user", void 0), i([a({
+	type: Array,
+	attribute: "user-menu"
+})], b.prototype, "userMenu", void 0), i([a({ type: Object })], b.prototype, "representing", void 0), i([a({
+	type: Array,
+	attribute: "user-menu-footer"
+})], b.prototype, "userMenuFooter", void 0), i([a({
+	type: Array,
+	attribute: "user-options"
+})], b.prototype, "userOptions", void 0);
+try {
+	e("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 };