@oslokommune/punkt-elements 16.7.1 → 16.7.4

package/dist/pkt-header.js

@@ -1,855 +1,2 @@
-import { P as M, s as S } from "./element-with-slot-Dqk6-TRR.js";
-import { P as C, A as l, b as n, n as s, t as _ } from "./element-CPpT3rFQ.js";
-import { o as $ } from "./if-defined-B0krMLad.js";
-import { b as d } from "./booleanish-C9R0tdXH.js";
-import { r as k } from "./state-C_1EOo3D.js";
-import { e as g } from "./class-map-CEnykyO_.js";
-import { e as f, n as y } from "./ref-Bg_Swj5w.js";
-import "./button-DEyvt1LI.js";
-import "./icon-BlKA8YuW.js";
-import "./link-Z_GizclR.js";
-import "./textinput-9lHjs4ce.js";
-const L = (e) => typeof e.target == "string" ? { title: e.title, iconName: e.iconName, href: e.target } : { title: e.title, iconName: e.iconName, onClick: e.target }, w = (e) => L(e), O = (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 R = Object.defineProperty, B = Object.getOwnPropertyDescriptor, b = (e, t, i, u) => {
-  for (var a = u > 1 ? void 0 : u ? B(t, i) : t, p = e.length - 1, m; p >= 0; p--)
-    (m = e[p]) && (a = (u ? m(t, i, a) : m(a)) || a);
-  return u && a && R(t, i, a), a;
-};
-let v = class extends C {
-  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, u = g({
-      "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 || l}
-          href=${e.href}
-          aria-hidden="true"
-          class="pkt-user-menu__link ${t || ""}"
-        >
-          ${e.title}
-        </pkt-link>
-      ` : n`
-      <button class=${u} type="button" @click=${() => this.handleMenuItemClick(e)}>
-        ${e.iconName ? n`<pkt-icon
-              name=${e.iconName}
-              class="pkt-link__icon"
-              aria-hidden="true"
-            ></pkt-icon>` : l}
-        ${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(w);
-    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>
-                      ` : l}
-                </li>
-              ` : l}
-
-          <!-- User menu items -->
-          ${e && e.length > 0 ? n`
-                <li class="pkt-user-menu__item">${this.renderLinkSection(e)}</li>
-              ` : l}
-
-          <!-- 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>` : l}
-                  ${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>
-                      ` : l}
-                </li>
-              ` : l}
-
-          <!-- 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>
-              ` : l}
-
-          <!-- Logout -->
-          ${this.logoutOnClick ? n`
-                <li class="pkt-user-menu__item">
-                  ${this.renderLinkOrButton({
-      title: "Logg ut",
-      iconName: "exit",
-      onClick: () => this.handleLogout()
-    })}
-                </li>
-              ` : l}
-        </ul>
-      </nav>
-    `;
-  }
-};
-b([
-  s({ type: Object })
-], v.prototype, "user", 2);
-b([
-  s({ type: String, attribute: "formatted-last-logged-in" })
-], v.prototype, "formattedLastLoggedIn", 2);
-b([
-  s({ type: Object })
-], v.prototype, "representing", 2);
-b([
-  s({ type: Array, attribute: "user-menu" })
-], v.prototype, "userMenu", 2);
-b([
-  s({
-    type: Boolean,
-    attribute: "can-change-representation",
-    converter: d
-  })
-], v.prototype, "canChangeRepresentation", 2);
-b([
-  s({ type: Boolean, attribute: "logout-on-click", converter: d })
-], v.prototype, "logoutOnClick", 2);
-v = b([
-  _("pkt-header-user-menu")
-], v);
-var E = Object.defineProperty, P = Object.getOwnPropertyDescriptor, r = (e, t, i, u) => {
-  for (var a = u > 1 ? void 0 : u ? P(t, i) : t, p = e.length - 1, m; p >= 0; p--)
-    (m = e[p]) && (a = (u ? m(t, i, a) : m(a)) || a);
-  return u && a && E(t, i, a), a;
-};
-const x = "https://punkt-cdn.oslo.kommune.no/latest/logos/";
-let o = class extends M {
-  constructor() {
-    super(...arguments), 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;
-      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 u;
-      switch (t) {
-        case "user":
-          u = this.userContainerRef;
-          break;
-        case "slot":
-          u = this.slotContainerRef;
-          break;
-        case "search":
-          u = this.searchContainerRef;
-          break;
-        default:
-          return;
-      }
-      const a = u.value;
-      a && (!i || !a.contains(i)) && (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() {
-    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 u = t.value.getBoundingClientRect(), a = i.value.offsetWidth, p = u.left + a > 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 O((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 l;
-    const e = n`
-      <pkt-icon name="oslologo" aria-hidden="true" path=${x}></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>
-    ` : l;
-  }
-  renderSlotContainer() {
-    if (!this.hasSlotContent()) return l;
-    const e = g({
-      "pkt-header-service__slot-container": !0,
-      "is-open": this.openMenu === "slot"
-    }), t = g({
-      "pkt-header-service__slot-content": !0,
-      "align-right": this.alignSlotRight
-    });
-    return n`
-      <div
-        class=${e}
-        @focusout=${(i) => this.handleFocusOut(i, "slot")}
-        ${y(this.slotContainerRef)}
-      >
-        ${this.isTablet && this.hasSlotContent() ? n`
-              <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>
-            ` : l}
-        <div
-          class=${t}
-          id="mobile-slot-menu"
-          role=${this.isTablet ? "menu" : l}
-          aria-label=${this.isTablet ? "Meny" : l}
-          ${y(this.slotContentRef)}
-        >
-          ${S(this)}
-        </div>
-      </div>
-    `;
-  }
-  renderSearch() {
-    if (!this.showSearch) return l;
-    if (this.isTablet) {
-      const e = g({
-        "pkt-header-service__search-container": !0,
-        "is-open": this.openMenu === "search"
-      }), t = g({
-        "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")}
-          ${y(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} ${y(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>
-                ` : l}
-          </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 l;
-    const e = g({
-      "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")}
-        ${y(this.userContainerRef)}
-      >
-        <pkt-button
-          class=${g({
-      "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>${((t = this.representing) == null ? void 0 : t.name) || this.user.name}</span>
-        </pkt-button>
-        ${this.openMenu === "user" && this.user ? n`
-              <div class=${e}>
-                <pkt-header-user-menu
-                  .user=${this.user}
-                  formatted-last-logged-in=${this.formattedLastLoggedIn || l}
-                  .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>
-            ` : l}
-      </div>
-    `;
-  }
-  renderHeader() {
-    const e = g({
-      "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 = g({
-      "pkt-header-service__logo-area": !0,
-      "pkt-header-service__logo-area--without-service": !this.serviceName
-    });
-    return n`
-      <header class=${e} ${y(this.headerRef)}>
-        <div class=${t}>${this.renderLogo()} ${this.renderServiceName()}</div>
-
-        ${this.hasSlotContent() || this.showSearch || this.showLogoutInHeader ? n`<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>
-                  ` : l}
-            </div>` : l}
-        ${this.user || !this.isTablet && this.showLogoutInHeader ? n`<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>
-                  ` : l}
-            </div>` : l}
-      </header>
-    `;
-  }
-  render() {
-    const e = this.renderHeader();
-    if (this.isFixed) {
-      const t = g({
-        "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;
-  }
-};
-r([
-  s({ type: String, attribute: "service-name" })
-], o.prototype, "serviceName", 2);
-r([
-  s({ type: String, attribute: "service-link" })
-], o.prototype, "serviceLink", 2);
-r([
-  s({ type: String, attribute: "logo-link" })
-], o.prototype, "logoLink", 2);
-r([
-  s({ type: String, attribute: "search-placeholder" })
-], o.prototype, "searchPlaceholder", 2);
-r([
-  s({ type: String, attribute: "search-value" })
-], o.prototype, "searchValue", 2);
-r([
-  s({ type: Number, attribute: "mobile-breakpoint" })
-], o.prototype, "mobileBreakpoint", 2);
-r([
-  s({ type: Number, attribute: "tablet-breakpoint" })
-], o.prototype, "tabletBreakpoint", 2);
-r([
-  s({ type: String, attribute: "opened-menu" })
-], o.prototype, "openedMenu", 2);
-r([
-  s({ type: String, attribute: "log-out-button-placement" })
-], o.prototype, "logOutButtonPlacement", 2);
-r([
-  s({ type: String })
-], o.prototype, "position", 2);
-r([
-  s({ type: String, attribute: "scroll-behavior" })
-], o.prototype, "scrollBehavior", 2);
-r([
-  s({ type: String, attribute: "slot-menu-variant" })
-], o.prototype, "slotMenuVariant", 2);
-r([
-  s({ type: String, attribute: "slot-menu-text" })
-], o.prototype, "slotMenuText", 2);
-r([
-  s({ type: Boolean, attribute: "hide-logo", converter: d })
-], o.prototype, "hideLogo", 2);
-r([
-  s({ type: Boolean, converter: d })
-], o.prototype, "compact", 2);
-r([
-  s({ type: Boolean, attribute: "show-search", converter: d })
-], o.prototype, "showSearch", 2);
-r([
-  s({
-    type: Boolean,
-    attribute: "can-change-representation",
-    converter: d
-  })
-], o.prototype, "canChangeRepresentation", 2);
-r([
-  s({ type: Boolean, attribute: "has-log-out", converter: d })
-], o.prototype, "hasLogOut", 2);
-r([
-  s({ type: Object })
-], o.prototype, "user", 2);
-r([
-  s({ type: Array, attribute: "user-menu" })
-], o.prototype, "userMenu", 2);
-r([
-  s({ type: Object })
-], o.prototype, "representing", 2);
-r([
-  k()
-], o.prototype, "isMobile", 2);
-r([
-  k()
-], o.prototype, "isTablet", 2);
-r([
-  k()
-], o.prototype, "openMenu", 2);
-r([
-  k()
-], o.prototype, "isHidden", 2);
-r([
-  k()
-], o.prototype, "componentWidth", 2);
-r([
-  k()
-], o.prototype, "alignSlotRight", 2);
-r([
-  k()
-], o.prototype, "alignSearchRight", 2);
-o = r([
-  _("pkt-header-service")
-], o);
-var N = Object.defineProperty, T = Object.getOwnPropertyDescriptor, c = (e, t, i, u) => {
-  for (var a = u > 1 ? void 0 : u ? T(t, i) : t, p = e.length - 1, m; p >= 0; p--)
-    (m = e[p]) && (a = (u ? m(t, i, a) : m(a)) || a);
-  return u && a && N(t, i, a), a;
-};
-let h = class extends M {
-  constructor() {
-    super(...arguments), 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.");
-  }
-  /**
-   * 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}
-        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() ? n`<div class="pkt-contents">${S(this)}</div>` : l}
-      </pkt-header-service>
-    `;
-  }
-};
-c([
-  s({ type: String, attribute: "service-name" })
-], h.prototype, "serviceName", 2);
-c([
-  s({ type: String, attribute: "service-link" })
-], h.prototype, "serviceLink", 2);
-c([
-  s({ type: String, attribute: "logo-link" })
-], h.prototype, "logoLink", 2);
-c([
-  s({ type: String, attribute: "search-placeholder" })
-], h.prototype, "searchPlaceholder", 2);
-c([
-  s({ type: String, attribute: "search-value" })
-], h.prototype, "searchValue", 2);
-c([
-  s({ type: Number, attribute: "mobile-breakpoint" })
-], h.prototype, "mobileBreakpoint", 2);
-c([
-  s({ type: Number, attribute: "tablet-breakpoint" })
-], h.prototype, "tabletBreakpoint", 2);
-c([
-  s({ type: String, attribute: "opened-menu" })
-], h.prototype, "openedMenu", 2);
-c([
-  s({ type: String, attribute: "log-out-button-placement" })
-], h.prototype, "logOutButtonPlacement", 2);
-c([
-  s({ type: String })
-], h.prototype, "position", 2);
-c([
-  s({ type: String, attribute: "scroll-behavior" })
-], h.prototype, "scrollBehavior", 2);
-c([
-  s({ type: String, attribute: "slot-menu-variant" })
-], h.prototype, "slotMenuVariant", 2);
-c([
-  s({ type: String, attribute: "slot-menu-text" })
-], h.prototype, "slotMenuText", 2);
-c([
-  s({ type: Boolean, attribute: "hide-logo", converter: d })
-], h.prototype, "hideLogo", 2);
-c([
-  s({ type: Boolean, converter: d })
-], h.prototype, "compact", 2);
-c([
-  s({ type: Boolean, attribute: "show-search", converter: d })
-], h.prototype, "showSearch", 2);
-c([
-  s({
-    type: Boolean,
-    attribute: "can-change-representation",
-    converter: d
-  })
-], h.prototype, "canChangeRepresentation", 2);
-c([
-  s({ type: Boolean, attribute: "has-log-out", converter: d })
-], h.prototype, "hasLogOut", 2);
-c([
-  s({ type: Object })
-], h.prototype, "user", 2);
-c([
-  s({ type: Array, attribute: "user-menu" })
-], h.prototype, "userMenu", 2);
-c([
-  s({ type: Object })
-], h.prototype, "representing", 2);
-c([
-  s({ type: Array, attribute: "user-menu-footer" })
-], h.prototype, "userMenuFooter", 2);
-c([
-  s({ type: Array, attribute: "user-options" })
-], h.prototype, "userOptions", 2);
-h = c([
-  _("pkt-header")
-], h);
-export {
-  h as PktHeader,
-  o as PktHeaderService,
-  v as PktHeaderUserMenu,
-  O as formatLastLoggedIn
-};
+import { i as e, n as t, r as n, t as r } from "./header-a6ztVNp3.js";
+export { r as PktHeader, t as PktHeaderService, n as PktHeaderUserMenu, e as formatLastLoggedIn };