@oslokommune/punkt-elements 13.22.0 → 14.0.0

package/dist/pkt-header.js

@@ -0,0 +1,852 @@
+import { P as _, E as c, x as n, n as s, a as M } from "./element-CRDRygXu.js";
+import { P as S } from "./pkt-slot-controller-BPGj-LC5.js";
+import { o as $ } from "./if-defined-BWZGb3bh.js";
+import { e as k, n as v } from "./ref-Xa5dbh--.js";
+import { r as f } from "./state-DS_kr2Fy.js";
+import { e as m } from "./class-map-wy7PUk0P.js";
+import "./button-D99MF5nV.js";
+import "./icon-1dy7UZcu.js";
+import "./link-DzZCw8j2.js";
+import "./textinput-B3Q13J8H.js";
+const d = {
+  fromAttribute(e) {
+    return e == null ? !1 : e === "" || e === "true" || e === !0 ? !0 : e === "false" || e === !1 ? !1 : !!e;
+  },
+  toAttribute(e) {
+    return e ? "true" : "false";
+  }
+}, C = (e) => typeof e.target == "string" ? { title: e.title, iconName: e.iconName, href: e.target } : { title: e.title, iconName: e.iconName, onClick: e.target }, L = (e) => {
+  if (!e) return;
+  const 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"
+    });
+};
+var w = Object.defineProperty, O = Object.getOwnPropertyDescriptor, y = (e, t, i, l) => {
+  for (var r = l > 1 ? void 0 : l ? O(t, i) : t, p = e.length - 1, g; p >= 0; p--)
+    (g = e[p]) && (r = (l ? g(t, i, r) : g(r)) || r);
+  return l && r && w(t, i, r), r;
+};
+let b = class extends _ {
+  constructor() {
+    super(...arguments), 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, t) {
+    const i = "href" in e, l = m({
+      "pkt-user-menu__link": !0,
+      "pkt-link-button": !i,
+      "pkt-link": !i,
+      "pkt-link--icon-left": !i,
+      [t || ""]: !!t
+    });
+    return i ? n`
+        <pkt-link
+          icon-name=${e.iconName || c}
+          href=${e.href}
+          aria-hidden="true"
+          class="pkt-user-menu__link ${t || ""}"
+        >
+          ${e.title}
+        </pkt-link>
+      ` : n`
+      <button class=${l} type="button" @click=${() => this.handleMenuItemClick(e)}>
+        ${e.iconName ? n`<pkt-icon
+              name=${e.iconName}
+              class="pkt-link__icon"
+              aria-hidden="true"
+            ></pkt-icon>` : c}
+        ${e.title}
+      </button>
+    `;
+  }
+  renderLinkSection(e) {
+    return n`
+      <ul class="pkt-user-menu__sublist">
+        ${e.map(
+      (t) => n`
+            <li class="pkt-user-menu__subitem">${this.renderLinkOrButton(t)}</li>
+          `
+    )}
+      </ul>
+    `;
+  }
+  render() {
+    var t;
+    const e = (t = this.userMenu) == null ? void 0 : t.map(C);
+    return n`
+      <nav class="pkt-user-menu" aria-label="Meny for innlogget bruker">
+        <ul class="pkt-user-menu__list">
+          <!-- User section -->
+          ${this.user ? n`
+                <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 ? n`
+                        <div class="pkt-user-menu__last-logged-in">
+                          Sist pålogget: <time>${this.formattedLastLoggedIn}</time>
+                        </div>
+                      ` : c}
+                </li>
+              ` : c}
+
+          <!-- User menu items -->
+          ${e && e.length > 0 ? n`
+                <li class="pkt-user-menu__item">${this.renderLinkSection(e)}</li>
+              ` : c}
+
+          <!-- Representing section -->
+          ${this.representing ? n`
+                <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 ? n`<div class="pkt-user-menu__org-number">
+                        Org.nr. ${this.representing.orgNumber}
+                      </div>` : c}
+                  ${this.canChangeRepresentation ? n`
+                        <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>
+                      ` : c}
+                </li>
+              ` : c}
+
+          <!-- Change representation without representing object -->
+          ${!this.representing && this.canChangeRepresentation ? n`
+                <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>
+              ` : c}
+
+          <!-- Logout -->
+          ${this.logoutOnClick ? n`
+                <li class="pkt-user-menu__item">
+                  ${this.renderLinkOrButton({
+      title: "Logg ut",
+      iconName: "exit",
+      onClick: () => this.handleLogout()
+    })}
+                </li>
+              ` : c}
+        </ul>
+      </nav>
+    `;
+  }
+};
+y([
+  s({ type: Object })
+], b.prototype, "user", 2);
+y([
+  s({ type: String, attribute: "formatted-last-logged-in" })
+], b.prototype, "formattedLastLoggedIn", 2);
+y([
+  s({ type: Object })
+], b.prototype, "representing", 2);
+y([
+  s({ type: Array, attribute: "user-menu" })
+], b.prototype, "userMenu", 2);
+y([
+  s({
+    type: Boolean,
+    attribute: "can-change-representation",
+    converter: d
+  })
+], b.prototype, "canChangeRepresentation", 2);
+y([
+  s({ type: Boolean, attribute: "logout-on-click", converter: d })
+], b.prototype, "logoutOnClick", 2);
+b = y([
+  M("pkt-header-user-menu")
+], b);
+var R = Object.defineProperty, B = Object.getOwnPropertyDescriptor, a = (e, t, i, l) => {
+  for (var r = l > 1 ? void 0 : l ? B(t, i) : t, p = e.length - 1, g; p >= 0; p--)
+    (g = e[p]) && (r = (l ? g(t, i, r) : g(r)) || r);
+  return l && r && R(t, i, r), r;
+};
+const E = "https://punkt-cdn.oslo.kommune.no/latest/logos/";
+let o = class extends _ {
+  constructor() {
+    super(), 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.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.hasSlotContent = !1, this.alignSlotRight = !1, this.alignSearchRight = !1, this.defaultSlot = k(), this.headerRef = k(), this.userContainerRef = k(), this.slotContainerRef = k(), this.searchContainerRef = k(), this.slotContentRef = k(), this.searchMenuRef = k(), this.lastScrollPosition = 0, this.savedScrollY = 0, this.lastFocusedElement = null, this.shouldRestoreFocus = !1, this.handleScroll = () => {
+      if (!this.shouldHideOnScroll) return;
+      const 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) => {
+      const 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) => {
+      const i = e.relatedTarget;
+      let l;
+      switch (t) {
+        case "user":
+          l = this.userContainerRef;
+          break;
+        case "slot":
+          l = this.slotContainerRef;
+          break;
+        case "search":
+          l = this.searchContainerRef;
+          break;
+        default:
+          return;
+      }
+      const r = l.value;
+      r && (!i || !r.contains(i)) && (this.openMenu = "none");
+    }, this.handleEscapeKey = (e) => {
+      e.key === "Escape" && this.openMenu !== "none" && (e.preventDefault(), this.shouldRestoreFocus = !0, this.openMenu = "none");
+    }, this.slotController = new S(this, this.defaultSlot);
+  }
+  updateSlots(e) {
+    this.hasSlotContent = e.has(null) || e.has(void 0);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setupScrollListener();
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), (e = this.resizeObserver) == null || e.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")) {
+      const 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() {
+    const e = this.headerRef.value;
+    e && (this.componentWidth = e.offsetWidth, this.updateIsMobile(), this.updateIsTablet(), this.resizeObserver = new ResizeObserver((t) => {
+      for (const i of t)
+        i.borderBoxSize && i.borderBoxSize.length > 0 ? this.componentWidth = i.borderBoxSize[0].inlineSize : this.componentWidth = i.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() {
+    const e = document.body, t = document.documentElement;
+    this.savedScrollY = window.scrollY || window.pageYOffset;
+    const i = window.innerWidth - t.clientWidth;
+    i > 0 && (e.style.paddingRight = `${i}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() {
+    const 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) {
+    const t = e === "slot" ? this.slotContainerRef : this.searchContainerRef, i = e === "slot" ? this.slotContentRef : this.searchMenuRef;
+    if (!t.value || !i.value || !this.isTablet || this.isMobile) return;
+    const l = t.value.getBoundingClientRect(), r = i.value.offsetWidth, p = l.left + r > window.innerWidth;
+    e === "slot" ? this.alignSlotRight = p : this.alignSearchRight = p;
+  }
+  handleMenuToggle(e) {
+    this.openMenu !== "none" ? this.openMenu = "none" : (this.lastFocusedElement = document.activeElement, this.openMenu = e);
+  }
+  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) {
+    const t = e.target.value;
+    this.handleSearchChange(t);
+  }
+  handleSearchKeyDown(e) {
+    e.key === "Enter" && this.handleSearch(e.target.value);
+  }
+  get formattedLastLoggedIn() {
+    var e;
+    return L((e = this.user) == null ? void 0 : e.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 c;
+    const e = n`
+      <pkt-icon name="oslologo" aria-hidden="true" path=${E}></pkt-icon>
+    `;
+    return this.logoLink && typeof this.logoLink == "string" ? n`
+        <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") ? n`
+        <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>
+      ` : n`
+      <span class="pkt-header-service__logo" @click=${this.handleLogoClick}>${e}</span>
+    `;
+  }
+  renderServiceName() {
+    return this.serviceName ? this.serviceLink && typeof this.serviceLink == "string" ? n`
+        <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") ? n`
+        <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>
+      ` : n`
+      <span class="pkt-header-service__service-name" @click=${this.handleServiceClick}>
+        <span class="pkt-header-service__service-link">${this.serviceName}</span>
+      </span>
+    ` : c;
+  }
+  renderSlotContainer() {
+    const e = m({
+      "pkt-header-service__slot-container": !0,
+      "is-open": this.openMenu === "slot"
+    }), t = m({
+      "pkt-header-service__slot-content": !0,
+      "align-right": this.alignSlotRight
+    });
+    return n`
+      <div
+        class=${e}
+        @focusout=${(i) => this.handleFocusOut(i, "slot")}
+        ${v(this.slotContainerRef)}
+      >
+        ${this.isTablet && this.hasSlotContent ? n`
+              <pkt-button
+                skin="secondary"
+                variant="icon-only"
+                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"
+              >
+                Meny
+              </pkt-button>
+            ` : c}
+        <div
+          class=${t}
+          id="mobile-slot-menu"
+          role=${this.isTablet ? "menu" : c}
+          aria-label=${this.isTablet ? "Meny" : c}
+          ${v(this.slotContentRef)}
+          ${v(this.defaultSlot)}
+        ></div>
+      </div>
+    `;
+  }
+  renderSearch() {
+    if (!this.showSearch) return c;
+    if (this.isTablet) {
+      const e = m({
+        "pkt-header-service__search-container": !0,
+        "is-open": this.openMenu === "search"
+      }), t = m({
+        "pkt-header-service__mobile-menu": !0,
+        "is-open": this.openMenu === "search",
+        "align-right": this.alignSearchRight
+      });
+      return n`
+        <div
+          class=${e}
+          @focusout=${(i) => this.handleFocusOut(i, "search")}
+          ${v(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=${t} ${v(this.searchMenuRef)}>
+            ${this.openMenu === "search" ? n`
+                  <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=${(i) => {
+        i.key === "Enter" && this.handleSearch(i.target.value);
+      }}
+                  ></pkt-textinput>
+                ` : c}
+          </div>
+        </div>
+      `;
+    }
+    return n`
+      <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() {
+    var t;
+    if (!this.user) return c;
+    const e = m({
+      "pkt-header-service__user-menu": this.isMobile === !1,
+      "pkt-header-service__mobile-menu": this.isMobile === !0,
+      "is-open": this.openMenu === "user"
+    });
+    return n`
+      <div
+        class="pkt-header-service__user-container"
+        @focusout=${(i) => this.handleFocusOut(i, "user")}
+        ${v(this.userContainerRef)}
+      >
+        <pkt-button
+          class=${m({
+      "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>
+          ${((t = this.representing) == null ? void 0 : t.name) || this.user.name}
+        </pkt-button>
+        ${this.openMenu === "user" && this.user ? n`
+              <div class=${e}>
+                <pkt-header-user-menu
+                  .user=${this.user}
+                  formatted-last-logged-in=${this.formattedLastLoggedIn || c}
+                  .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>
+            ` : c}
+      </div>
+    `;
+  }
+  renderHeader() {
+    const e = m({
+      "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
+    }), t = m({
+      "pkt-header-service__logo-area": !0,
+      "pkt-header-service__logo-area--without-service": !this.serviceName
+    });
+    return n`
+      <header class=${e} ${v(this.headerRef)}>
+        <div class=${t}>${this.renderLogo()} ${this.renderServiceName()}</div>
+
+        <div class="pkt-header-service__content">
+          ${this.renderSlotContainer()} ${this.renderSearch()}
+          ${this.isTablet && this.showLogoutInHeader ? n`
+                <pkt-button
+                  skin="secondary"
+                  size=${this.isMobile ? "small" : "medium"}
+                  variant="icon-only"
+                  iconName="exit"
+                  @click=${this.handleLogout}
+                >
+                  Logg ut
+                </pkt-button>
+              ` : c}
+        </div>
+
+        <div class="pkt-header-service__user">
+          ${this.renderUserButton()}
+          ${!this.isTablet && this.showLogoutInHeader ? n`
+                <pkt-button
+                  skin="tertiary"
+                  size="medium"
+                  variant="icon-right"
+                  iconName="exit"
+                  @click=${this.handleLogout}
+                >
+                  Logg ut
+                </pkt-button>
+              ` : c}
+        </div>
+      </header>
+    `;
+  }
+  render() {
+    const e = this.renderHeader();
+    if (this.isFixed) {
+      const t = m({
+        "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
+      });
+      return n`
+        <div class="pkt-header-service-wrapper">
+          ${e}
+          <div class=${t}></div>
+        </div>
+      `;
+    }
+    return e;
+  }
+};
+a([
+  s({ type: String, attribute: "service-name" })
+], o.prototype, "serviceName", 2);
+a([
+  s({ type: String, attribute: "service-link" })
+], o.prototype, "serviceLink", 2);
+a([
+  s({ type: String, attribute: "logo-link" })
+], o.prototype, "logoLink", 2);
+a([
+  s({ type: String, attribute: "search-placeholder" })
+], o.prototype, "searchPlaceholder", 2);
+a([
+  s({ type: String, attribute: "search-value" })
+], o.prototype, "searchValue", 2);
+a([
+  s({ type: Number, attribute: "mobile-breakpoint" })
+], o.prototype, "mobileBreakpoint", 2);
+a([
+  s({ type: Number, attribute: "tablet-breakpoint" })
+], o.prototype, "tabletBreakpoint", 2);
+a([
+  s({ type: String, attribute: "opened-menu" })
+], o.prototype, "openedMenu", 2);
+a([
+  s({ type: String, attribute: "log-out-button-placement" })
+], o.prototype, "logOutButtonPlacement", 2);
+a([
+  s({ type: String })
+], o.prototype, "position", 2);
+a([
+  s({ type: String, attribute: "scroll-behavior" })
+], o.prototype, "scrollBehavior", 2);
+a([
+  s({ type: Boolean, attribute: "hide-logo", converter: d })
+], o.prototype, "hideLogo", 2);
+a([
+  s({ type: Boolean, converter: d })
+], o.prototype, "compact", 2);
+a([
+  s({ type: Boolean, attribute: "show-search", converter: d })
+], o.prototype, "showSearch", 2);
+a([
+  s({
+    type: Boolean,
+    attribute: "can-change-representation",
+    converter: d
+  })
+], o.prototype, "canChangeRepresentation", 2);
+a([
+  s({ type: Boolean, attribute: "has-log-out", converter: d })
+], o.prototype, "hasLogOut", 2);
+a([
+  s({ type: Object })
+], o.prototype, "user", 2);
+a([
+  s({ type: Array, attribute: "user-menu" })
+], o.prototype, "userMenu", 2);
+a([
+  s({ type: Object })
+], o.prototype, "representing", 2);
+a([
+  f()
+], o.prototype, "isMobile", 2);
+a([
+  f()
+], o.prototype, "isTablet", 2);
+a([
+  f()
+], o.prototype, "openMenu", 2);
+a([
+  f()
+], o.prototype, "isHidden", 2);
+a([
+  f()
+], o.prototype, "componentWidth", 2);
+a([
+  f()
+], o.prototype, "hasSlotContent", 2);
+a([
+  f()
+], o.prototype, "alignSlotRight", 2);
+a([
+  f()
+], o.prototype, "alignSearchRight", 2);
+o = a([
+  M("pkt-header-service")
+], o);
+var P = Object.defineProperty, N = Object.getOwnPropertyDescriptor, u = (e, t, i, l) => {
+  for (var r = l > 1 ? void 0 : l ? N(t, i) : t, p = e.length - 1, g; p >= 0; p--)
+    (g = e[p]) && (r = (l ? g(t, i, r) : g(r)) || r);
+  return l && r && P(t, i, r), r;
+};
+let h = class extends _ {
+  constructor() {
+    super(), this.defaultSlot = k(), 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.hideLogo = !1, this.compact = !1, this.showSearch = !1, this.canChangeRepresentation = !1, this.hasLogOut = !1, this.slotController = new S(this, this.defaultSlot);
+  }
+  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.");
+  }
+  /**
+   * Convert deprecated props to new props
+   */
+  get effectiveUserMenu() {
+    const e = this.userMenu || [], t = this.userMenuFooter || [], i = this.userOptions || [];
+    return t.length || i.length ? [...e, ...i, ...t] : this.userMenu;
+  }
+  render() {
+    return n`
+      <pkt-header-service
+        service-name=${$(this.serviceName)}
+        service-link=${$(this.serviceLink)}
+        logo-link=${$(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}
+        .hideLogo=${this.hideLogo}
+        .compact=${this.compact}
+        .showSearch=${this.showSearch}
+        .canChangeRepresentation=${this.canChangeRepresentation}
+        .hasLogOut=${this.hasLogOut}
+        .user=${this.user}
+        .userMenu=${this.effectiveUserMenu}
+        .representing=${this.representing}
+      >
+        <div class="pkt-contents" ${v(this.defaultSlot)}></div>
+      </pkt-header-service>
+    `;
+  }
+};
+u([
+  s({ type: String, attribute: "service-name" })
+], h.prototype, "serviceName", 2);
+u([
+  s({ type: String, attribute: "service-link" })
+], h.prototype, "serviceLink", 2);
+u([
+  s({ type: String, attribute: "logo-link" })
+], h.prototype, "logoLink", 2);
+u([
+  s({ type: String, attribute: "search-placeholder" })
+], h.prototype, "searchPlaceholder", 2);
+u([
+  s({ type: String, attribute: "search-value" })
+], h.prototype, "searchValue", 2);
+u([
+  s({ type: Number, attribute: "mobile-breakpoint" })
+], h.prototype, "mobileBreakpoint", 2);
+u([
+  s({ type: Number, attribute: "tablet-breakpoint" })
+], h.prototype, "tabletBreakpoint", 2);
+u([
+  s({ type: String, attribute: "opened-menu" })
+], h.prototype, "openedMenu", 2);
+u([
+  s({ type: String, attribute: "log-out-button-placement" })
+], h.prototype, "logOutButtonPlacement", 2);
+u([
+  s({ type: String })
+], h.prototype, "position", 2);
+u([
+  s({ type: String, attribute: "scroll-behavior" })
+], h.prototype, "scrollBehavior", 2);
+u([
+  s({ type: Boolean, attribute: "hide-logo", converter: d })
+], h.prototype, "hideLogo", 2);
+u([
+  s({ type: Boolean, converter: d })
+], h.prototype, "compact", 2);
+u([
+  s({ type: Boolean, attribute: "show-search", converter: d })
+], h.prototype, "showSearch", 2);
+u([
+  s({
+    type: Boolean,
+    attribute: "can-change-representation",
+    converter: d
+  })
+], h.prototype, "canChangeRepresentation", 2);
+u([
+  s({ type: Boolean, attribute: "has-log-out", converter: d })
+], h.prototype, "hasLogOut", 2);
+u([
+  s({ type: Object })
+], h.prototype, "user", 2);
+u([
+  s({ type: Array, attribute: "user-menu" })
+], h.prototype, "userMenu", 2);
+u([
+  s({ type: Object })
+], h.prototype, "representing", 2);
+u([
+  s({ type: Array, attribute: "user-menu-footer" })
+], h.prototype, "userMenuFooter", 2);
+u([
+  s({ type: Array, attribute: "user-options" })
+], h.prototype, "userOptions", 2);
+h = u([
+  M("pkt-header")
+], h);
+export {
+  h as PktHeader,
+  o as PktHeaderService,
+  b as PktHeaderUserMenu,
+  L as formatLastLoggedIn
+};