@oslokommune/punkt-elements 13.21.0 → 14.0.0

package/dist/pkt-header.cjs

@@ -0,0 +1,302 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./element-CJ_QKaki.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),v=require("./if-defined-Bc9-_I01.cjs"),h=require("./ref-BFa5Utho.cjs"),d=require("./state-DSjcvzDN.cjs"),p=require("./class-map-C_erArZz.cjs");require("./button-abD9URn0.cjs");require("./icon-BGuizDwk.cjs");require("./link-Da3pZ_CW.cjs");require("./textinput-Dn704gQw.cjs");const u={fromAttribute(n){return n==null?!1:n===""||n==="true"||n===!0?!0:n==="false"||n===!1?!1:!!n},toAttribute(n){return n?"true":"false"}},b=n=>typeof n.target=="string"?{title:n.title,iconName:n.iconName,href:n.target}:{title:n.title,iconName:n.iconName,onClick:n.target},m=n=>{if(!n)return;const e=typeof n=="string"?new Date(n):n;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,y=Object.getOwnPropertyDescriptor,k=(n,e,s,r)=>{for(var i=r>1?void 0:r?y(e,s):e,l=n.length-1,c;l>=0;l--)(c=n[l])&&(i=(r?c(e,s,i):c(i))||i);return r&&i&&f(e,s,i),i};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 r="href"in e,i=p.e({"pkt-user-menu__link":!0,"pkt-link-button":!r,"pkt-link":!r,"pkt-link--icon-left":!r,[s||""]:!!s});return r?t.x`
+        <pkt-link
+          icon-name=${e.iconName||t.E}
+          href=${e.href}
+          aria-hidden="true"
+          class="pkt-user-menu__link ${s||""}"
+        >
+          ${e.title}
+        </pkt-link>
+      `:t.x`
+      <button class=${i} type="button" @click=${()=>this.handleMenuItemClick(e)}>
+        ${e.iconName?t.x`<pkt-icon
+              name=${e.iconName}
+              class="pkt-link__icon"
+              aria-hidden="true"
+            ></pkt-icon>`:t.E}
+        ${e.title}
+      </button>
+    `}renderLinkSection(e){return t.x`
+      <ul class="pkt-user-menu__sublist">
+        ${e.map(s=>t.x`
+            <li class="pkt-user-menu__subitem">${this.renderLinkOrButton(s)}</li>
+          `)}
+      </ul>
+    `}render(){var s;const e=(s=this.userMenu)==null?void 0:s.map(b);return t.x`
+      <nav class="pkt-user-menu" aria-label="Meny for innlogget bruker">
+        <ul class="pkt-user-menu__list">
+          <!-- User section -->
+          ${this.user?t.x`
+                <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.x`
+                        <div class="pkt-user-menu__last-logged-in">
+                          Sist pålogget: <time>${this.formattedLastLoggedIn}</time>
+                        </div>
+                      `:t.E}
+                </li>
+              `:t.E}
+
+          <!-- User menu items -->
+          ${e&&e.length>0?t.x`
+                <li class="pkt-user-menu__item">${this.renderLinkSection(e)}</li>
+              `:t.E}
+
+          <!-- Representing section -->
+          ${this.representing?t.x`
+                <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.x`<div class="pkt-user-menu__org-number">
+                        Org.nr. ${this.representing.orgNumber}
+                      </div>`:t.E}
+                  ${this.canChangeRepresentation?t.x`
+                        <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.E}
+                </li>
+              `:t.E}
+
+          <!-- Change representation without representing object -->
+          ${!this.representing&&this.canChangeRepresentation?t.x`
+                <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.E}
+
+          <!-- Logout -->
+          ${this.logoutOnClick?t.x`
+                <li class="pkt-user-menu__item">
+                  ${this.renderLinkOrButton({title:"Logg ut",iconName:"exit",onClick:()=>this.handleLogout()})}
+                </li>
+              `:t.E}
+        </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})],exports.PktHeaderUserMenu.prototype,"canChangeRepresentation",2);k([t.n({type:Boolean,attribute:"logout-on-click",converter:u})],exports.PktHeaderUserMenu.prototype,"logoutOnClick",2);exports.PktHeaderUserMenu=k([t.t("pkt-header-user-menu")],exports.PktHeaderUserMenu);var S=Object.defineProperty,$=Object.getOwnPropertyDescriptor,o=(n,e,s,r)=>{for(var i=r>1?void 0:r?$(e,s):e,l=n.length-1,c;l>=0;l--)(c=n[l])&&(i=(r?c(e,s,i):c(i))||i);return r&&i&&S(e,s,i),i};const _="https://punkt-cdn.oslo.kommune.no/latest/logos/";exports.PktHeaderService=class extends t.PktElement{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=h.e(),this.headerRef=h.e(),this.userContainerRef=h.e(),this.slotContainerRef=h.e(),this.searchContainerRef=h.e(),this.slotContentRef=h.e(),this.searchMenuRef=h.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 r=e.relatedTarget;let i;switch(s){case"user":i=this.userContainerRef;break;case"slot":i=this.slotContainerRef;break;case"search":i=this.searchContainerRef;break;default:return}const l=i.value;l&&(!r||!l.contains(r))&&(this.openMenu="none")},this.handleEscapeKey=e=>{e.key==="Escape"&&this.openMenu!=="none"&&(e.preventDefault(),this.shouldRestoreFocus=!0,this.openMenu="none")},this.slotController=new g.PktSlotController(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 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 r of s)r.borderBoxSize&&r.borderBoxSize.length>0?this.componentWidth=r.borderBoxSize[0].inlineSize:this.componentWidth=r.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 r=window.innerWidth-s.clientWidth;r>0&&(e.style.paddingRight=`${r}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,r=e==="slot"?this.slotContentRef:this.searchMenuRef;if(!s.value||!r.value||!this.isTablet||this.isMobile)return;const i=s.value.getBoundingClientRect(),l=r.value.offsetWidth,c=i.left+l>window.innerWidth;e==="slot"?this.alignSlotRight=c:this.alignSearchRight=c}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 m((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.E;const e=t.x`
+      <pkt-icon name="oslologo" aria-hidden="true" path=${_}></pkt-icon>
+    `;return this.logoLink&&typeof this.logoLink=="string"?t.x`
+        <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.x`
+        <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.x`
+      <span class="pkt-header-service__logo" @click=${this.handleLogoClick}>${e}</span>
+    `}renderServiceName(){return this.serviceName?this.serviceLink&&typeof this.serviceLink=="string"?t.x`
+        <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.x`
+        <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.x`
+      <span class="pkt-header-service__service-name" @click=${this.handleServiceClick}>
+        <span class="pkt-header-service__service-link">${this.serviceName}</span>
+      </span>
+    `:t.E}renderSlotContainer(){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.x`
+      <div
+        class=${e}
+        @focusout=${r=>this.handleFocusOut(r,"slot")}
+        ${h.n(this.slotContainerRef)}
+      >
+        ${this.isTablet&&this.hasSlotContent?t.x`
+              <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>
+            `:t.E}
+        <div
+          class=${s}
+          id="mobile-slot-menu"
+          role=${this.isTablet?"menu":t.E}
+          aria-label=${this.isTablet?"Meny":t.E}
+          ${h.n(this.slotContentRef)}
+          ${h.n(this.defaultSlot)}
+        ></div>
+      </div>
+    `}renderSearch(){if(!this.showSearch)return t.E;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.x`
+        <div
+          class=${e}
+          @focusout=${r=>this.handleFocusOut(r,"search")}
+          ${h.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} ${h.n(this.searchMenuRef)}>
+            ${this.openMenu==="search"?t.x`
+                  <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=${r=>{r.key==="Enter"&&this.handleSearch(r.target.value)}}
+                  ></pkt-textinput>
+                `:t.E}
+          </div>
+        </div>
+      `}return t.x`
+      <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.E;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.x`
+      <div
+        class="pkt-header-service__user-container"
+        @focusout=${r=>this.handleFocusOut(r,"user")}
+        ${h.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>
+          ${((s=this.representing)==null?void 0:s.name)||this.user.name}
+        </pkt-button>
+        ${this.openMenu==="user"&&this.user?t.x`
+              <div class=${e}>
+                <pkt-header-user-menu
+                  .user=${this.user}
+                  formatted-last-logged-in=${this.formattedLastLoggedIn||t.E}
+                  .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.E}
+      </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.x`
+      <header class=${e} ${h.n(this.headerRef)}>
+        <div class=${s}>${this.renderLogo()} ${this.renderServiceName()}</div>
+
+        <div class="pkt-header-service__content">
+          ${this.renderSlotContainer()} ${this.renderSearch()}
+          ${this.isTablet&&this.showLogoutInHeader?t.x`
+                <pkt-button
+                  skin="secondary"
+                  size=${this.isMobile?"small":"medium"}
+                  variant="icon-only"
+                  iconName="exit"
+                  @click=${this.handleLogout}
+                >
+                  Logg ut
+                </pkt-button>
+              `:t.E}
+        </div>
+
+        <div class="pkt-header-service__user">
+          ${this.renderUserButton()}
+          ${!this.isTablet&&this.showLogoutInHeader?t.x`
+                <pkt-button
+                  skin="tertiary"
+                  size="medium"
+                  variant="icon-right"
+                  iconName="exit"
+                  @click=${this.handleLogout}
+                >
+                  Logg ut
+                </pkt-button>
+              `:t.E}
+        </div>
+      </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.x`
+        <div class="pkt-header-service-wrapper">
+          ${e}
+          <div class=${s}></div>
+        </div>
+      `}return e}};o([t.n({type:String,attribute:"service-name"})],exports.PktHeaderService.prototype,"serviceName",2);o([t.n({type:String,attribute:"service-link"})],exports.PktHeaderService.prototype,"serviceLink",2);o([t.n({type:String,attribute:"logo-link"})],exports.PktHeaderService.prototype,"logoLink",2);o([t.n({type:String,attribute:"search-placeholder"})],exports.PktHeaderService.prototype,"searchPlaceholder",2);o([t.n({type:String,attribute:"search-value"})],exports.PktHeaderService.prototype,"searchValue",2);o([t.n({type:Number,attribute:"mobile-breakpoint"})],exports.PktHeaderService.prototype,"mobileBreakpoint",2);o([t.n({type:Number,attribute:"tablet-breakpoint"})],exports.PktHeaderService.prototype,"tabletBreakpoint",2);o([t.n({type:String,attribute:"opened-menu"})],exports.PktHeaderService.prototype,"openedMenu",2);o([t.n({type:String,attribute:"log-out-button-placement"})],exports.PktHeaderService.prototype,"logOutButtonPlacement",2);o([t.n({type:String})],exports.PktHeaderService.prototype,"position",2);o([t.n({type:String,attribute:"scroll-behavior"})],exports.PktHeaderService.prototype,"scrollBehavior",2);o([t.n({type:Boolean,attribute:"hide-logo",converter:u})],exports.PktHeaderService.prototype,"hideLogo",2);o([t.n({type:Boolean,converter:u})],exports.PktHeaderService.prototype,"compact",2);o([t.n({type:Boolean,attribute:"show-search",converter:u})],exports.PktHeaderService.prototype,"showSearch",2);o([t.n({type:Boolean,attribute:"can-change-representation",converter:u})],exports.PktHeaderService.prototype,"canChangeRepresentation",2);o([t.n({type:Boolean,attribute:"has-log-out",converter:u})],exports.PktHeaderService.prototype,"hasLogOut",2);o([t.n({type:Object})],exports.PktHeaderService.prototype,"user",2);o([t.n({type:Array,attribute:"user-menu"})],exports.PktHeaderService.prototype,"userMenu",2);o([t.n({type:Object})],exports.PktHeaderService.prototype,"representing",2);o([d.r()],exports.PktHeaderService.prototype,"isMobile",2);o([d.r()],exports.PktHeaderService.prototype,"isTablet",2);o([d.r()],exports.PktHeaderService.prototype,"openMenu",2);o([d.r()],exports.PktHeaderService.prototype,"isHidden",2);o([d.r()],exports.PktHeaderService.prototype,"componentWidth",2);o([d.r()],exports.PktHeaderService.prototype,"hasSlotContent",2);o([d.r()],exports.PktHeaderService.prototype,"alignSlotRight",2);o([d.r()],exports.PktHeaderService.prototype,"alignSearchRight",2);exports.PktHeaderService=o([t.t("pkt-header-service")],exports.PktHeaderService);var M=Object.defineProperty,P=Object.getOwnPropertyDescriptor,a=(n,e,s,r)=>{for(var i=r>1?void 0:r?P(e,s):e,l=n.length-1,c;l>=0;l--)(c=n[l])&&(i=(r?c(e,s,i):c(i))||i);return r&&i&&M(e,s,i),i};exports.PktHeader=class extends t.PktElement{constructor(){super(),this.defaultSlot=h.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.hideLogo=!1,this.compact=!1,this.showSearch=!1,this.canChangeRepresentation=!1,this.hasLogOut=!1,this.slotController=new g.PktSlotController(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.")}get effectiveUserMenu(){const e=this.userMenu||[],s=this.userMenuFooter||[],r=this.userOptions||[];return s.length||r.length?[...e,...r,...s]:this.userMenu}render(){return t.x`
+      <pkt-header-service
+        service-name=${v.o(this.serviceName)}
+        service-link=${v.o(this.serviceLink)}
+        logo-link=${v.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}
+        .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" ${h.n(this.defaultSlot)}></div>
+      </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:Boolean,attribute:"hide-logo",converter:u})],exports.PktHeader.prototype,"hideLogo",2);a([t.n({type:Boolean,converter:u})],exports.PktHeader.prototype,"compact",2);a([t.n({type:Boolean,attribute:"show-search",converter:u})],exports.PktHeader.prototype,"showSearch",2);a([t.n({type:Boolean,attribute:"can-change-representation",converter:u})],exports.PktHeader.prototype,"canChangeRepresentation",2);a([t.n({type:Boolean,attribute:"has-log-out",converter:u})],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=m;