@oslokommune/punkt-elements/dist/header-j0SSHF4C.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

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-CRaKZ75t.js";
import "./link-F51Ho7CV.js";
import "./textinput-BZZnFDk3.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,
			"pkt-header-service-spacer--tablet": this.isTablet
		})}></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 };