@oslokommune/punkt-elements 16.7.1 → 16.7.4

package/dist/pkt-header.cjs

@@ -1,304 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("./element-with-slot-ZX-up7jO.cjs"),t=require("./element-gR_VtSiD.cjs"),b=require("./if-defined-BOW3ODSj.cjs"),u=require("./booleanish-BKVonob4.cjs"),d=require("./state-Dg-53wQ8.cjs"),p=require("./class-map-CsENJXf1.cjs"),c=require("./ref-CL-Xk9Xm.cjs");require("./button-DYv5Dg4M.cjs");require("./icon-Bqj9oBbl.cjs");require("./link-R_lNhViF.cjs");require("./textinput-BNsLd26i.cjs");const m=o=>typeof o.target=="string"?{title:o.title,iconName:o.iconName,href:o.target}:{title:o.title,iconName:o.iconName,onClick:o.target},y=o=>m(o),g=o=>{if(!o)return;const e=typeof o=="string"?new Date(o):o;if(!isNaN(e.getTime()))return e.toLocaleDateString("nb-NO",{day:"numeric",month:"long",year:"numeric",hour:"2-digit",minute:"2-digit"})};var f=Object.defineProperty,$=Object.getOwnPropertyDescriptor,k=(o,e,s,n)=>{for(var r=n>1?void 0:n?$(e,s):e,l=o.length-1,h;l>=0;l--)(h=o[l])&&(r=(n?h(e,s,r):h(r))||r);return n&&r&&f(e,s,r),r};exports.PktHeaderUserMenu=class extends t.PktElement{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,s){const n="href"in e,r=p.e({"pkt-user-menu__link":!0,"pkt-link-button":!n,"pkt-link":!n,"pkt-link--icon-left":!n,[s||""]:!!s});return n?t.b`
-        <pkt-link
-          icon-name=${e.iconName||t.A}
-          href=${e.href}
-          aria-hidden="true"
-          class="pkt-user-menu__link ${s||""}"
-        >
-          ${e.title}
-        </pkt-link>
-      `:t.b`
-      <button class=${r} type="button" @click=${()=>this.handleMenuItemClick(e)}>
-        ${e.iconName?t.b`<pkt-icon
-              name=${e.iconName}
-              class="pkt-link__icon"
-              aria-hidden="true"
-            ></pkt-icon>`:t.A}
-        ${e.title}
-      </button>
-    `}renderLinkSection(e){return t.b`
-      <ul class="pkt-user-menu__sublist">
-        ${e.map(s=>t.b`
-            <li class="pkt-user-menu__subitem">${this.renderLinkOrButton(s)}</li>
-          `)}
-      </ul>
-    `}render(){var s;const e=(s=this.userMenu)==null?void 0:s.map(y);return t.b`
-      <nav class="pkt-user-menu" aria-label="Meny for innlogget bruker">
-        <ul class="pkt-user-menu__list">
-          <!-- User section -->
-          ${this.user?t.b`
-                <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.b`
-                        <div class="pkt-user-menu__last-logged-in">
-                          Sist pålogget: <time>${this.formattedLastLoggedIn}</time>
-                        </div>
-                      `:t.A}
-                </li>
-              `:t.A}
-
-          <!-- User menu items -->
-          ${e&&e.length>0?t.b`
-                <li class="pkt-user-menu__item">${this.renderLinkSection(e)}</li>
-              `:t.A}
-
-          <!-- Representing section -->
-          ${this.representing?t.b`
-                <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.b`<div class="pkt-user-menu__org-number">
-                        Org.nr. ${this.representing.orgNumber}
-                      </div>`:t.A}
-                  ${this.canChangeRepresentation?t.b`
-                        <ul class="pkt-user-menu__sublist mt-size-16">
-                          <li class="pkt-user-menu__subitem">
-                            ${this.renderLinkOrButton({title:"Endre organisasjon",iconName:"cogwheel",onClick:()=>this.handleChangeRepresentation()})}
-                          </li>
-                        </ul>
-                      `:t.A}
-                </li>
-              `:t.A}
-
-          <!-- Change representation without representing object -->
-          ${!this.representing&&this.canChangeRepresentation?t.b`
-                <li class="pkt-user-menu__item">
-                  <ul class="pkt-user-menu__sublist">
-                    <li class="pkt-user-menu__subitem">
-                      ${this.renderLinkOrButton({title:"Endre organisasjon",iconName:"cogwheel",onClick:()=>this.handleChangeRepresentation()})}
-                    </li>
-                  </ul>
-                </li>
-              `:t.A}
-
-          <!-- Logout -->
-          ${this.logoutOnClick?t.b`
-                <li class="pkt-user-menu__item">
-                  ${this.renderLinkOrButton({title:"Logg ut",iconName:"exit",onClick:()=>this.handleLogout()})}
-                </li>
-              `:t.A}
-        </ul>
-      </nav>
-    `}};k([t.n({type:Object})],exports.PktHeaderUserMenu.prototype,"user",2);k([t.n({type:String,attribute:"formatted-last-logged-in"})],exports.PktHeaderUserMenu.prototype,"formattedLastLoggedIn",2);k([t.n({type:Object})],exports.PktHeaderUserMenu.prototype,"representing",2);k([t.n({type:Array,attribute:"user-menu"})],exports.PktHeaderUserMenu.prototype,"userMenu",2);k([t.n({type:Boolean,attribute:"can-change-representation",converter:u.booleanishConverter})],exports.PktHeaderUserMenu.prototype,"canChangeRepresentation",2);k([t.n({type:Boolean,attribute:"logout-on-click",converter:u.booleanishConverter})],exports.PktHeaderUserMenu.prototype,"logoutOnClick",2);exports.PktHeaderUserMenu=k([t.t("pkt-header-user-menu")],exports.PktHeaderUserMenu);var S=Object.defineProperty,M=Object.getOwnPropertyDescriptor,i=(o,e,s,n)=>{for(var r=n>1?void 0:n?M(e,s):e,l=o.length-1,h;l>=0;l--)(h=o[l])&&(r=(n?h(e,s,r):h(r))||r);return n&&r&&S(e,s,r),r};const _="https://punkt-cdn.oslo.kommune.no/latest/logos/";exports.PktHeaderService=class extends v.PktElementWithSlot{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=c.e(),this.userContainerRef=c.e(),this.slotContainerRef=c.e(),this.searchContainerRef=c.e(),this.slotContentRef=c.e(),this.searchMenuRef=c.e(),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 s=e.target;this.user&&this.openMenu==="user"&&!s.closest(".pkt-header-service__user-container")&&(this.openMenu="none"),this.openMenu==="slot"&&!s.closest(".pkt-header-service__slot-container")&&(this.openMenu="none"),this.openMenu==="search"&&!s.closest(".pkt-header-service__search-container")&&!s.closest(".pkt-header-service__search-input")&&(this.openMenu="none")},this.handleFocusOut=(e,s)=>{const n=e.relatedTarget;let r;switch(s){case"user":r=this.userContainerRef;break;case"slot":r=this.slotContainerRef;break;case"search":r=this.searchContainerRef;break;default:return}const l=r.value;l&&(!n||!l.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(){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 s=e.get("openMenu");this.openMenu!=="none"&&(s==="none"||s===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"&&s!=="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(s=>{for(const n of s)n.borderBoxSize&&n.borderBoxSize.length>0?this.componentWidth=n.borderBoxSize[0].inlineSize:this.componentWidth=n.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,s=document.documentElement;this.savedScrollY=window.scrollY||window.pageYOffset;const n=window.innerWidth-s.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",s.classList.add("is-scroll-locked")}unlockScroll(){const e=document.body,s=document.documentElement;s.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"),s.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 s=e==="slot"?this.slotContainerRef:this.searchContainerRef,n=e==="slot"?this.slotContentRef:this.searchMenuRef;if(!s.value||!n.value||!this.isTablet||this.isMobile)return;const r=s.value.getBoundingClientRect(),l=n.value.offsetWidth,h=r.left+l>window.innerWidth;e==="slot"?this.alignSlotRight=h:this.alignSearchRight=h}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 s=e.target.value;this.handleSearchChange(s)}handleSearchKeyDown(e){e.key==="Enter"&&this.handleSearch(e.target.value)}get formattedLastLoggedIn(){var e;return g((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 t.A;const e=t.b`
-      <pkt-icon name="oslologo" aria-hidden="true" path=${_}></pkt-icon>
-    `;return this.logoLink&&typeof this.logoLink=="string"?t.b`
-        <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.b`
-        <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.b`
-      <span class="pkt-header-service__logo" @click=${this.handleLogoClick}>${e}</span>
-    `}renderServiceName(){return this.serviceName?this.serviceLink&&typeof this.serviceLink=="string"?t.b`
-        <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.b`
-        <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.b`
-      <span class="pkt-header-service__service-name" @click=${this.handleServiceClick}>
-        <span class="pkt-header-service__service-link">${this.serviceName}</span>
-      </span>
-    `:t.A}renderSlotContainer(){if(!this.hasSlotContent())return t.A;const e=p.e({"pkt-header-service__slot-container":!0,"is-open":this.openMenu==="slot"}),s=p.e({"pkt-header-service__slot-content":!0,"align-right":this.alignSlotRight});return t.b`
-      <div
-        class=${e}
-        @focusout=${n=>this.handleFocusOut(n,"slot")}
-        ${c.n(this.slotContainerRef)}
-      >
-        ${this.isTablet&&this.hasSlotContent()?t.b`
-              <pkt-button
-                skin="secondary"
-                variant=${this.slotMenuVariant}
-                iconName="menu"
-                size=${this.isMobile?"small":"medium"}
-                state=${this.openMenu==="slot"?"active":"normal"}
-                @click=${()=>this.handleMenuToggle("slot")}
-                aria-expanded=${this.openMenu==="slot"}
-                aria-controls="mobile-slot-menu"
-                aria-label="Åpne meny"
-              >
-                ${this.slotMenuText}
-              </pkt-button>
-            `:t.A}
-        <div
-          class=${s}
-          id="mobile-slot-menu"
-          role=${this.isTablet?"menu":t.A}
-          aria-label=${this.isTablet?"Meny":t.A}
-          ${c.n(this.slotContentRef)}
-        >
-          ${v.slotContent(this)}
-        </div>
-      </div>
-    `}renderSearch(){if(!this.showSearch)return t.A;if(this.isTablet){const e=p.e({"pkt-header-service__search-container":!0,"is-open":this.openMenu==="search"}),s=p.e({"pkt-header-service__mobile-menu":!0,"is-open":this.openMenu==="search","align-right":this.alignSearchRight});return t.b`
-        <div
-          class=${e}
-          @focusout=${n=>this.handleFocusOut(n,"search")}
-          ${c.n(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=${s} ${c.n(this.searchMenuRef)}>
-            ${this.openMenu==="search"?t.b`
-                  <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=${n=>{n.key==="Enter"&&this.handleSearch(n.target.value)}}
-                  ></pkt-textinput>
-                `:t.A}
-          </div>
-        </div>
-      `}return t.b`
-      <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 s;if(!this.user)return t.A;const e=p.e({"pkt-header-service__user-menu":this.isMobile===!1,"pkt-header-service__mobile-menu":this.isMobile===!0,"is-open":this.openMenu==="user"});return t.b`
-      <div
-        class="pkt-header-service__user-container"
-        @focusout=${n=>this.handleFocusOut(n,"user")}
-        ${c.n(this.userContainerRef)}
-      >
-        <pkt-button
-          class=${p.e({"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>${((s=this.representing)==null?void 0:s.name)||this.user.name}</span>
-        </pkt-button>
-        ${this.openMenu==="user"&&this.user?t.b`
-              <div class=${e}>
-                <pkt-header-user-menu
-                  .user=${this.user}
-                  formatted-last-logged-in=${this.formattedLastLoggedIn||t.A}
-                  .representing=${this.representing}
-                  .userMenu=${this.userMenu}
-                  ?can-change-representation=${this.canChangeRepresentation}
-                  ?logout-on-click=${this.showLogoutInUserMenu}
-                  @change-representation=${()=>this.dispatchEvent(new CustomEvent("change-representation",{bubbles:!0,composed:!0}))}
-                  @log-out=${this.handleLogout}
-                ></pkt-header-user-menu>
-              </div>
-            `:t.A}
-      </div>
-    `}renderHeader(){const e=p.e({"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}),s=p.e({"pkt-header-service__logo-area":!0,"pkt-header-service__logo-area--without-service":!this.serviceName});return t.b`
-      <header class=${e} ${c.n(this.headerRef)}>
-        <div class=${s}>${this.renderLogo()} ${this.renderServiceName()}</div>
-
-        ${this.hasSlotContent()||this.showSearch||this.showLogoutInHeader?t.b`<div class="pkt-header-service__content">
-              ${this.renderSlotContainer()} ${this.renderSearch()}
-              ${this.isTablet&&this.showLogoutInHeader?t.b`
-                    <pkt-button
-                      skin="secondary"
-                      size=${this.isMobile?"small":"medium"}
-                      variant="icon-only"
-                      iconName="exit"
-                      @click=${this.handleLogout}
-                    >
-                      Logg ut
-                    </pkt-button>
-                  `:t.A}
-            </div>`:t.A}
-        ${this.user||!this.isTablet&&this.showLogoutInHeader?t.b`<div class="pkt-header-service__user">
-              ${this.renderUserButton()}
-              ${!this.isTablet&&this.showLogoutInHeader?t.b`
-                    <pkt-button
-                      skin="tertiary"
-                      size="medium"
-                      variant="icon-right"
-                      iconName="exit"
-                      @click=${this.handleLogout}
-                    >
-                      Logg ut
-                    </pkt-button>
-                  `:t.A}
-            </div>`:t.A}
-      </header>
-    `}render(){const e=this.renderHeader();if(this.isFixed){const s=p.e({"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 t.b`
-        <div class="pkt-header-service-wrapper">
-          ${e}
-          <div class=${s}></div>
-        </div>
-      `}return e}};i([t.n({type:String,attribute:"service-name"})],exports.PktHeaderService.prototype,"serviceName",2);i([t.n({type:String,attribute:"service-link"})],exports.PktHeaderService.prototype,"serviceLink",2);i([t.n({type:String,attribute:"logo-link"})],exports.PktHeaderService.prototype,"logoLink",2);i([t.n({type:String,attribute:"search-placeholder"})],exports.PktHeaderService.prototype,"searchPlaceholder",2);i([t.n({type:String,attribute:"search-value"})],exports.PktHeaderService.prototype,"searchValue",2);i([t.n({type:Number,attribute:"mobile-breakpoint"})],exports.PktHeaderService.prototype,"mobileBreakpoint",2);i([t.n({type:Number,attribute:"tablet-breakpoint"})],exports.PktHeaderService.prototype,"tabletBreakpoint",2);i([t.n({type:String,attribute:"opened-menu"})],exports.PktHeaderService.prototype,"openedMenu",2);i([t.n({type:String,attribute:"log-out-button-placement"})],exports.PktHeaderService.prototype,"logOutButtonPlacement",2);i([t.n({type:String})],exports.PktHeaderService.prototype,"position",2);i([t.n({type:String,attribute:"scroll-behavior"})],exports.PktHeaderService.prototype,"scrollBehavior",2);i([t.n({type:String,attribute:"slot-menu-variant"})],exports.PktHeaderService.prototype,"slotMenuVariant",2);i([t.n({type:String,attribute:"slot-menu-text"})],exports.PktHeaderService.prototype,"slotMenuText",2);i([t.n({type:Boolean,attribute:"hide-logo",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"hideLogo",2);i([t.n({type:Boolean,converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"compact",2);i([t.n({type:Boolean,attribute:"show-search",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"showSearch",2);i([t.n({type:Boolean,attribute:"can-change-representation",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"canChangeRepresentation",2);i([t.n({type:Boolean,attribute:"has-log-out",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"hasLogOut",2);i([t.n({type:Object})],exports.PktHeaderService.prototype,"user",2);i([t.n({type:Array,attribute:"user-menu"})],exports.PktHeaderService.prototype,"userMenu",2);i([t.n({type:Object})],exports.PktHeaderService.prototype,"representing",2);i([d.r()],exports.PktHeaderService.prototype,"isMobile",2);i([d.r()],exports.PktHeaderService.prototype,"isTablet",2);i([d.r()],exports.PktHeaderService.prototype,"openMenu",2);i([d.r()],exports.PktHeaderService.prototype,"isHidden",2);i([d.r()],exports.PktHeaderService.prototype,"componentWidth",2);i([d.r()],exports.PktHeaderService.prototype,"alignSlotRight",2);i([d.r()],exports.PktHeaderService.prototype,"alignSearchRight",2);exports.PktHeaderService=i([t.t("pkt-header-service")],exports.PktHeaderService);var P=Object.defineProperty,C=Object.getOwnPropertyDescriptor,a=(o,e,s,n)=>{for(var r=n>1?void 0:n?C(e,s):e,l=o.length-1,h;l>=0;l--)(h=o[l])&&(r=(n?h(e,s,r):h(r))||r);return n&&r&&P(e,s,r),r};exports.PktHeader=class extends v.PktElementWithSlot{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.")}get effectiveUserMenu(){const e=this.userMenu||[],s=this.userMenuFooter||[],n=this.userOptions||[];return s.length||n.length?[...e,...n,...s]:this.userMenu}render(){return t.b`
-      <pkt-header-service
-        service-name=${b.o(this.serviceName)}
-        service-link=${b.o(this.serviceLink)}
-        logo-link=${b.o(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.b`<div class="pkt-contents">${v.slotContent(this)}</div>`:t.A}
-      </pkt-header-service>
-    `}};a([t.n({type:String,attribute:"service-name"})],exports.PktHeader.prototype,"serviceName",2);a([t.n({type:String,attribute:"service-link"})],exports.PktHeader.prototype,"serviceLink",2);a([t.n({type:String,attribute:"logo-link"})],exports.PktHeader.prototype,"logoLink",2);a([t.n({type:String,attribute:"search-placeholder"})],exports.PktHeader.prototype,"searchPlaceholder",2);a([t.n({type:String,attribute:"search-value"})],exports.PktHeader.prototype,"searchValue",2);a([t.n({type:Number,attribute:"mobile-breakpoint"})],exports.PktHeader.prototype,"mobileBreakpoint",2);a([t.n({type:Number,attribute:"tablet-breakpoint"})],exports.PktHeader.prototype,"tabletBreakpoint",2);a([t.n({type:String,attribute:"opened-menu"})],exports.PktHeader.prototype,"openedMenu",2);a([t.n({type:String,attribute:"log-out-button-placement"})],exports.PktHeader.prototype,"logOutButtonPlacement",2);a([t.n({type:String})],exports.PktHeader.prototype,"position",2);a([t.n({type:String,attribute:"scroll-behavior"})],exports.PktHeader.prototype,"scrollBehavior",2);a([t.n({type:String,attribute:"slot-menu-variant"})],exports.PktHeader.prototype,"slotMenuVariant",2);a([t.n({type:String,attribute:"slot-menu-text"})],exports.PktHeader.prototype,"slotMenuText",2);a([t.n({type:Boolean,attribute:"hide-logo",converter:u.booleanishConverter})],exports.PktHeader.prototype,"hideLogo",2);a([t.n({type:Boolean,converter:u.booleanishConverter})],exports.PktHeader.prototype,"compact",2);a([t.n({type:Boolean,attribute:"show-search",converter:u.booleanishConverter})],exports.PktHeader.prototype,"showSearch",2);a([t.n({type:Boolean,attribute:"can-change-representation",converter:u.booleanishConverter})],exports.PktHeader.prototype,"canChangeRepresentation",2);a([t.n({type:Boolean,attribute:"has-log-out",converter:u.booleanishConverter})],exports.PktHeader.prototype,"hasLogOut",2);a([t.n({type:Object})],exports.PktHeader.prototype,"user",2);a([t.n({type:Array,attribute:"user-menu"})],exports.PktHeader.prototype,"userMenu",2);a([t.n({type:Object})],exports.PktHeader.prototype,"representing",2);a([t.n({type:Array,attribute:"user-menu-footer"})],exports.PktHeader.prototype,"userMenuFooter",2);a([t.n({type:Array,attribute:"user-options"})],exports.PktHeader.prototype,"userOptions",2);exports.PktHeader=a([t.t("pkt-header")],exports.PktHeader);exports.formatLastLoggedIn=g;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./header-DWgPgGfS.cjs`);exports.PktHeader=e.t,exports.PktHeaderService=e.n,exports.PktHeaderUserMenu=e.r,exports.formatLastLoggedIn=e.i;