@oslokommune/punkt-elements 16.26.7 → 17.0.0

package/dist/header-DNeyR8DD.cjs

@@ -0,0 +1,466 @@
+const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),n=require("./element-with-slot-BY7Jc-q8.cjs");require("./icon-B8PVq2O6.cjs");const r=require("./if-defined-DrwbxQOj.cjs");require("./button-gvDXtBMC.cjs");const i=require("./ref-DO7TzO4O.cjs"),a=require("./booleanish-B9Kf0nES.cjs"),o=require("./fetch-header-footer-data-xohWFmYC.cjs"),s=require("./focus-trap-DSv4Ifqm.cjs"),c=require("./scroll-lock-BN8lOhV5.cjs");require("./link-Geze7498.cjs"),require("./textinput-DqJbTglM.cjs"),require("./searchinput-DGjeN1YI.cjs"),require("./header-menu-BHqK4QA6.cjs");var l=e=>typeof e.target==`string`?{title:e.title,iconName:e.iconName,href:e.target}:{title:e.title,iconName:e.iconName,onClick:e.target},u=e=>l(e),d=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`})},f=class{constructor(e,t){this.isMobile=!1,this.isTablet=!1,this.isHidden=!1,this.pauseScrollHide=!1,this.componentWidth=typeof window<`u`?window.innerWidth:0,this.lastScrollPosition=0,this.scrollLockToken=c.t(),this.lastFocusedElement=null,this.shouldRestoreFocus=!1,this.handleScroll=()=>{if(this.getOptions().scrollBehavior!==`hide`||this.pauseScrollHide)return;let e=window.pageYOffset||document.documentElement.scrollTop;if(e<0||Math.abs(e-this.lastScrollPosition)<60)return;let t=e>this.lastScrollPosition;this.lastScrollPosition=e,t!==this.isHidden&&(this.isHidden=t,this.host.requestUpdate())},this.host=e,this.getOptions=t,e.addController(this)}hostConnected(){window.addEventListener(`scroll`,this.handleScroll)}hostDisconnected(){this.resizeObserver?.disconnect(),window.removeEventListener(`scroll`,this.handleScroll),c.n(this.scrollLockToken,!1)}observe(e){e&&(this.componentWidth=e.offsetWidth,this.refreshBreakpoints(),this.resizeObserver=new ResizeObserver(e=>{for(let t of e)this.componentWidth=t.borderBoxSize&&t.borderBoxSize.length>0?t.borderBoxSize[0].inlineSize:t.contentRect.width,this.refreshBreakpoints()}),this.resizeObserver.observe(e))}refreshBreakpoints(){let{mobileBreakpoint:e,tabletBreakpoint:t}=this.getOptions(),n=this.componentWidth<e,r=this.componentWidth<t;(n!==this.isMobile||r!==this.isTablet)&&(this.isMobile=n,this.isTablet=r,this.host.requestUpdate())}setScrollLock(e){c.n(this.scrollLockToken,e)}captureFocus(){this.lastFocusedElement=document.activeElement}flagRestoreFocus(){this.shouldRestoreFocus=!0}restoreFocus(){this.shouldRestoreFocus&&this.lastFocusedElement&&document.contains(this.lastFocusedElement)&&this.lastFocusedElement.focus(),this.lastFocusedElement=null,this.shouldRestoreFocus=!1}},p=class extends e.t{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(n,r){let i=`href`in n,a=t.t({"pkt-user-menu__link":!0,"pkt-link-button":!i,"pkt-link":!i,"pkt-link--icon-left":!i,[r||``]:!!r});return i?e.p`
+        <pkt-link
+          icon-name=${n.iconName||e.d}
+          href=${n.href}
+          aria-hidden="true"
+          class="pkt-user-menu__link ${r||``}"
+        >
+          ${n.title}
+        </pkt-link>
+      `:e.p`
+      <button class=${a} type="button" @click=${()=>this.handleMenuItemClick(n)}>
+        ${n.iconName?e.p`<pkt-icon
+              name=${n.iconName}
+              class="pkt-link__icon"
+              aria-hidden="true"
+            ></pkt-icon>`:e.d}
+        ${n.title}
+      </button>
+    `}renderLinkSection(t){return e.p`
+      <ul class="pkt-user-menu__sublist">
+        ${t.map(t=>e.p`
+            <li class="pkt-user-menu__subitem">${this.renderLinkOrButton(t)}</li>
+          `)}
+      </ul>
+    `}render(){let t=this.userMenu?.map(u);return e.p`
+      <nav class="pkt-user-menu" aria-label="Meny for innlogget bruker">
+        <ul class="pkt-user-menu__list">
+          <!-- User section -->
+          ${this.user?e.p`
+                <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?e.p`
+                        <div class="pkt-user-menu__last-logged-in">
+                          Sist pålogget: <time>${this.formattedLastLoggedIn}</time>
+                        </div>
+                      `:e.d}
+                </li>
+              `:e.d}
+
+          <!-- User menu items -->
+          ${t&&t.length>0?e.p`
+                <li class="pkt-user-menu__item">${this.renderLinkSection(t)}</li>
+              `:e.d}
+
+          <!-- Representing section -->
+          ${this.representing?e.p`
+                <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?e.p`<div class="pkt-user-menu__org-number">
+                        Org.nr. ${this.representing.orgNumber}
+                      </div>`:e.d}
+                  ${this.canChangeRepresentation?e.p`
+                        <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>
+                      `:e.d}
+                </li>
+              `:e.d}
+
+          <!-- Change representation without representing object -->
+          ${!this.representing&&this.canChangeRepresentation?e.p`
+                <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>
+              `:e.d}
+
+          <!-- Logout -->
+          ${this.logoutOnClick?e.p`
+                <li class="pkt-user-menu__item">
+                  ${this.renderLinkOrButton({title:`Logg ut`,iconName:`exit`,onClick:()=>this.handleLogout()})}
+                </li>
+              `:e.d}
+        </ul>
+      </nav>
+    `}};e.n([e.o({type:Object})],p.prototype,`user`,void 0),e.n([e.o({type:String,attribute:`formatted-last-logged-in`})],p.prototype,`formattedLastLoggedIn`,void 0),e.n([e.o({type:Object})],p.prototype,`representing`,void 0),e.n([e.o({type:Array,attribute:`user-menu`})],p.prototype,`userMenu`,void 0),e.n([e.o({type:Boolean,attribute:`can-change-representation`,converter:a.t})],p.prototype,`canChangeRepresentation`,void 0),e.n([e.o({type:Boolean,attribute:`logout-on-click`,converter:a.t})],p.prototype,`logoutOnClick`,void 0);try{e.s(`pkt-header-user-menu`)(p)}catch{console.warn(`Forsøker å definere <pkt-header-user-menu>, men den er allerede definert`)}var m=`https://punkt-cdn.oslo.kommune.no/latest/logos/`;typeof window<`u`&&(window.pktLogoPath=window.pktLogoPath||m);var h=class extends n.t{constructor(...e){super(...e),this.logoLink=o.o,this.logoPath=typeof window<`u`?window.pktLogoPath:m,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.openMenu=`none`,this.alignSlotRight=!1,this.alignSearchRight=!1,this.headerRef=i.t(),this.userContainerRef=i.t(),this.slotContainerRef=i.t(),this.searchContainerRef=i.t(),this.slotContentRef=i.t(),this.searchMenuRef=i.t(),this.chrome=new f(this,()=>({mobileBreakpoint:this.mobileBreakpoint,tabletBreakpoint:this.tabletBreakpoint,position:this.position,scrollBehavior:this.scrollBehavior})),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.handleSlotContentClick=e=>{if(!this.isTablet||this.openMenu!==`slot`)return;let t=e.target.closest(`a[href], button, [role="link"], [role="button"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]`);!t||!this.slotContentRef.value?.contains(t)||t.closest(`[data-pkt-header-keep-open]`)||t.disabled||t.getAttribute(`aria-disabled`)===`true`||(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.chrome.flagRestoreFocus(),this.openMenu=`none`)}}get isMobile(){return this.chrome.isMobile}get isTablet(){return this.chrome.isTablet}get isHidden(){return this.chrome.isHidden}firstUpdated(){this.chrome.observe(this.headerRef.value)}updated(e){if(super.updated(e),e.has(`openedMenu`)&&this.openedMenu!==this.openMenu&&(this.openMenu=this.openedMenu),(e.has(`mobileBreakpoint`)||e.has(`tabletBreakpoint`))&&this.chrome.refreshBreakpoints(),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.chrome.restoreFocus())}this.chrome.setScrollLock((this.isFixed||this.isSticky)&&this.isMobile&&this.openMenu!==`none`)}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.chrome.captureFocus(),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 d(this.user?.lastLoggedIn)}get isFixed(){return this.position===`fixed`}get isSticky(){return this.position===`sticky`}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 e.d;let t=e.p`
+      <pkt-icon name="oslologo" aria-hidden="true" path=${this.logoPath}></pkt-icon>
+    `;return e.p`
+      <span class="pkt-header-service__logo">
+        <a href=${this.logoLink} aria-label="Tilbake til forside" @click=${this.handleLogoClick}>
+          ${t}
+        </a>
+      </span>
+    `}renderServiceName(){return this.serviceName?this.serviceLink&&typeof this.serviceLink==`string`?e.p`
+        <span class="pkt-header-service__service-name" translate="no">
+          <pkt-link
+            href=${this.serviceLink}
+            class="pkt-header-service__service-link"
+            @click=${this.handleServiceClick}
+          >
+            ${this.serviceName}
+          </pkt-link>
+        </span>
+      `:this.hasAttribute(`service-link`)?e.p`
+        <span class="pkt-header-service__service-name" translate="no">
+          <button
+            class="pkt-link-button pkt-link pkt-header-service__service-link"
+            @click=${this.handleServiceClick}
+          >
+            ${this.serviceName}
+          </button>
+        </span>
+      `:e.p`
+      <span
+        class="pkt-header-service__service-name"
+        translate="no"
+        @click=${this.handleServiceClick}
+      >
+        <span class="pkt-header-service__service-link">${this.serviceName}</span>
+      </span>
+    `:e.d}renderSlotContainer(){if(!this.hasSlotContent())return e.d;let r=t.t({"pkt-header-service__slot-container":!0,"is-open":this.openMenu===`slot`}),a=t.t({"pkt-header-service__slot-content":!0,"align-right":this.alignSlotRight});return e.p`
+      <div
+        class=${r}
+        @focusout=${e=>this.handleFocusOut(e,`slot`)}
+        ${i.n(this.slotContainerRef)}
+      >
+        ${this.isTablet&&this.hasSlotContent()?e.p`
+              <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>
+            `:e.d}
+        <div
+          class=${a}
+          id="mobile-slot-menu"
+          role=${this.isTablet?`group`:e.d}
+          aria-label=${this.isTablet?`Meny`:e.d}
+          @click=${this.handleSlotContentClick}
+          ${i.n(this.slotContentRef)}
+        >
+          ${n.n(this)}
+        </div>
+      </div>
+    `}renderSearch(){if(!this.showSearch)return e.d;if(this.isTablet){let n=t.t({"pkt-header-service__search-container":!0,"is-open":this.openMenu===`search`}),r=t.t({"pkt-header-service__mobile-menu":!0,"is-open":this.openMenu===`search`,"align-right":this.alignSearchRight});return e.p`
+        <div
+          class=${n}
+          @focusout=${e=>this.handleFocusOut(e,`search`)}
+          ${i.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=${r} ${i.n(this.searchMenuRef)}>
+            ${this.openMenu===`search`?e.p`
+                  <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>
+                `:e.d}
+          </div>
+        </div>
+      `}return e.p`
+      <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 e.d;let n=t.t({"pkt-header-service__user-menu":this.isMobile===!1,"pkt-header-service__mobile-menu":this.isMobile===!0,"is-open":this.openMenu===`user`});return e.p`
+      <div
+        class="pkt-header-service__user-container"
+        @focusout=${e=>this.handleFocusOut(e,`user`)}
+        ${i.n(this.userContainerRef)}
+      >
+        <pkt-button
+          class=${t.t({"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 translate="no">${this.representing?.name||this.user.name}</span>
+        </pkt-button>
+        ${this.openMenu===`user`&&this.user?e.p`
+              <div class=${n}>
+                <pkt-header-user-menu
+                  .user=${this.user}
+                  formatted-last-logged-in=${this.formattedLastLoggedIn||e.d}
+                  .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>
+            `:e.d}
+      </div>
+    `}renderHeader(){let n=t.t({"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--sticky":this.isSticky,"pkt-header-service--scroll-to-hide":this.shouldHideOnScroll,"pkt-header-service--hidden":this.isHidden}),r=t.t({"pkt-header-service__logo-area":!0,"pkt-header-service__logo-area--without-service":!this.serviceName});return e.p`
+      <header class=${n} ${i.n(this.headerRef)}>
+        <div class=${r}>${this.renderLogo()} ${this.renderServiceName()}</div>
+
+        ${this.hasSlotContent()||this.showSearch||this.showLogoutInHeader?e.p`<div class="pkt-header-service__content">
+              ${this.renderSlotContainer()} ${this.renderSearch()}
+              ${this.isTablet&&this.showLogoutInHeader?e.p`
+                    <pkt-button
+                      skin="secondary"
+                      size=${this.isMobile?`small`:`medium`}
+                      variant="icon-only"
+                      iconName="exit"
+                      @click=${this.handleLogout}
+                    >
+                      Logg ut
+                    </pkt-button>
+                  `:e.d}
+            </div>`:e.d}
+        ${this.user||!this.isTablet&&this.showLogoutInHeader?e.p`<div class="pkt-header-service__user">
+              ${this.renderUserButton()}
+              ${!this.isTablet&&this.showLogoutInHeader?e.p`
+                    <pkt-button
+                      skin="tertiary"
+                      size="medium"
+                      variant="icon-right"
+                      iconName="exit"
+                      @click=${this.handleLogout}
+                    >
+                      Logg ut
+                    </pkt-button>
+                  `:e.d}
+            </div>`:e.d}
+      </header>
+    `}render(){let n=this.renderHeader();return this.isFixed?e.p`
+        <div class="pkt-header-service-wrapper">
+          ${n}
+          <div class=${t.t({"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>
+      `:n}};e.n([e.o({type:String,attribute:`service-name`})],h.prototype,`serviceName`,void 0),e.n([e.o({type:String,attribute:`service-link`})],h.prototype,`serviceLink`,void 0),e.n([e.o({type:String,attribute:`logo-link`})],h.prototype,`logoLink`,void 0),e.n([e.o({type:String,attribute:`logo-path`})],h.prototype,`logoPath`,void 0),e.n([e.o({type:String,attribute:`search-placeholder`})],h.prototype,`searchPlaceholder`,void 0),e.n([e.o({type:String,attribute:`search-value`})],h.prototype,`searchValue`,void 0),e.n([e.o({type:Number,attribute:`mobile-breakpoint`})],h.prototype,`mobileBreakpoint`,void 0),e.n([e.o({type:Number,attribute:`tablet-breakpoint`})],h.prototype,`tabletBreakpoint`,void 0),e.n([e.o({type:String,attribute:`opened-menu`})],h.prototype,`openedMenu`,void 0),e.n([e.o({type:String,attribute:`log-out-button-placement`})],h.prototype,`logOutButtonPlacement`,void 0),e.n([e.o({type:String})],h.prototype,`position`,void 0),e.n([e.o({type:String,attribute:`scroll-behavior`})],h.prototype,`scrollBehavior`,void 0),e.n([e.o({type:String,attribute:`slot-menu-variant`})],h.prototype,`slotMenuVariant`,void 0),e.n([e.o({type:String,attribute:`slot-menu-text`})],h.prototype,`slotMenuText`,void 0),e.n([e.o({type:Boolean,attribute:`hide-logo`,converter:a.t})],h.prototype,`hideLogo`,void 0),e.n([e.o({type:Boolean,converter:a.t})],h.prototype,`compact`,void 0),e.n([e.o({type:Boolean,attribute:`show-search`,converter:a.t})],h.prototype,`showSearch`,void 0),e.n([e.o({type:Boolean,attribute:`can-change-representation`,converter:a.t})],h.prototype,`canChangeRepresentation`,void 0),e.n([e.o({type:Boolean,attribute:`has-log-out`,converter:a.t})],h.prototype,`hasLogOut`,void 0),e.n([e.o({type:Object})],h.prototype,`user`,void 0),e.n([e.o({type:Array,attribute:`user-menu`})],h.prototype,`userMenu`,void 0),e.n([e.o({type:Object})],h.prototype,`representing`,void 0),e.n([e.a()],h.prototype,`openMenu`,void 0),e.n([e.a()],h.prototype,`alignSlotRight`,void 0),e.n([e.a()],h.prototype,`alignSearchRight`,void 0);try{e.s(`pkt-header-service`)(h)}catch{console.warn(`Forsøker å definere <pkt-header-service>, men den er allerede definert`)}var g=`https://punkt-cdn.oslo.kommune.no/latest/logos/`;typeof window<`u`&&(window.pktLogoPath=window.pktLogoPath||g);var _=`pkt-header-global-menu`,v=`pkt-header-global-menu-toggle`,y=`pkt-header-global-search-panel`,b=`pkt-header-global-search-toggle`,x=class extends e.t{constructor(...e){super(...e),this.locale=`nb-NO`,this.logoLink=o.o,this.logoPath=typeof window<`u`?window.pktLogoPath:g,this.position=`fixed`,this.scrollBehavior=`hide`,this.mobileBreakpoint=768,this.tabletBreakpoint=1024,this.logOutButtonPlacement=`none`,this.showSearch=!0,this.showContact=!0,this.canChangeRepresentation=!1,this.hasLogOut=!1,this.openMenu=`none`,this.loadError=!1,this.headerAnchor={top:0,left:0,width:0},this.headerRef=i.t(),this.menuContainerRef=i.t(),this.userContainerRef=i.t(),this.chrome=new f(this,()=>({mobileBreakpoint:this.mobileBreakpoint,tabletBreakpoint:this.tabletBreakpoint,position:this.position,scrollBehavior:this.scrollBehavior})),this.handleClickOutside=e=>{let t=e.target;this.openMenu===`user`&&!t.closest(`.pkt-header-global__user-container`)&&!t.closest(`.pkt-header-global__user-menu`)&&(this.openMenu=`none`),this.openMenu===`menu`&&!t.closest(`.pkt-header-menu`)&&!t.closest(`#${v}`)&&(this.openMenu=`none`),this.openMenu===`search`&&!t.closest(`.pkt-header-global__search-panel-inner`)&&!t.closest(`#${b}`)&&(this.openMenu=`none`)},this.handleEscapeKey=e=>{e.key===`Escape`&&this.openMenu!==`none`&&(e.preventDefault(),this.chrome.flagRestoreFocus(),this.openMenu=`none`)},this.handleOverlayKeydown=e=>{if(e.key!==`Tab`)return;let t=this.activeOverlay;if(!t||!t.panel||!t.toggle)return;let{panel:n,toggle:r}=t,i=s.n(n),a=s.t();if(a&&r.contains(a)){!e.shiftKey&&i.length>0&&(e.preventDefault(),i[0].focus());return}if(i.length===0)return;let o=i[0],c=i[i.length-1],l=!e.shiftKey&&a===c,u=e.shiftKey&&a===o;(l||u)&&(e.preventDefault(),this.openMenu=`none`,this.focusToggle(r))},this.handleOverlayFocusIn=e=>{let t=this.activeOverlay;if(!t||!t.panel)return;let n=e.target;n&&(t.panel.contains(n)||t.toggle?.contains(n)||(this.openMenu=`none`))}}get isMobile(){return this.chrome.isMobile}get isTablet(){return this.chrome.isTablet}get isHidden(){return this.chrome.isHidden}connectedCallback(){super.connectedCallback(),this.classList.add(`pkt-header-global-host`),this.data?this.emitDataLoaded(this.data):this.loadData()}disconnectedCallback(){super.disconnectedCallback(),this.abortController?.abort(),document.removeEventListener(`mousedown`,this.handleClickOutside),document.removeEventListener(`keydown`,this.handleEscapeKey),document.removeEventListener(`keydown`,this.handleOverlayKeydown),document.removeEventListener(`focusin`,this.handleOverlayFocusIn)}firstUpdated(){this.chrome.observe(this.headerRef.value)}willUpdate(e){if(super.willUpdate(e),this.openMenu===`menu`||this.openMenu===`search`){let e=this.headerRef.value?.getBoundingClientRect();e&&(this.headerAnchor={top:e.top,left:e.left,width:e.width})}}get overlayAnchorStyle(){let{top:e,left:t,width:n}=this.headerAnchor;return`--pkt-header-global-top: ${e}px; --pkt-header-global-left: ${t}px; --pkt-header-global-width: ${n}px`}updated(e){if(super.updated(e),(e.has(`mobileBreakpoint`)||e.has(`tabletBreakpoint`))&&this.chrome.refreshBreakpoints(),e.has(`dataUrl`)&&e.get(`dataUrl`)!==void 0&&!this.data&&this.loadData(),e.has(`data`)&&this.data&&this.emitDataLoaded(this.data),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===`none`&&t&&t!==`none`&&(document.removeEventListener(`mousedown`,this.handleClickOutside),document.removeEventListener(`keydown`,this.handleEscapeKey),this.chrome.restoreFocus());let n=t===`menu`||t===`search`,r=this.openMenu===`menu`||this.openMenu===`search`;r&&!n?(document.addEventListener(`keydown`,this.handleOverlayKeydown),document.addEventListener(`focusin`,this.handleOverlayFocusIn)):!r&&n&&(document.removeEventListener(`keydown`,this.handleOverlayKeydown),document.removeEventListener(`focusin`,this.handleOverlayFocusIn)),this.openMenu===`search`&&t!==`search`&&requestAnimationFrame(()=>{this.querySelector(`#${y} input`)?.focus()}),this.chrome.pauseScrollHide=this.openMenu!==`none`,this.chrome.setScrollLock(this.openMenu===`menu`||this.openMenu===`search`)}}async loadData(){this.abortController?.abort(),this.abortController=new AbortController,this.loadError=!1;try{let e=await o.t(this.dataUrl,this.abortController.signal);this.fetchedData=e,this.emitDataLoaded(e)}catch(e){if(e.name===`AbortError`)return;this.loadError=!0,this.dispatchEvent(new CustomEvent(`data-error`,{detail:{error:e},bubbles:!0,composed:!0}))}}emitDataLoaded(e){this.dispatchEvent(new CustomEvent(`data-loaded`,{detail:{data:e},bubbles:!0,composed:!0}))}get effectiveData(){return this.data??this.fetchedData}get localeData(){return o.n(this.effectiveData,this.locale)}get shouldHideOnScroll(){return this.scrollBehavior===`hide`}get isFixed(){return this.position===`fixed`}get isSticky(){return this.position===`sticky`}toggleMenu(e){this.openMenu===e?this.openMenu=`none`:(this.chrome.captureFocus(),this.openMenu=e)}get activeOverlay(){return this.openMenu===`menu`?{panel:this.menuContainerRef.value??null,toggle:this.querySelector(`#${v}`)}:this.openMenu===`search`?{panel:this.querySelector(`#${y}`),toggle:this.querySelector(`#${b}`)}:null}focusToggle(e){(e?.querySelector(`button`)??e)?.focus()}handleSearch(e){this.dispatchEvent(new CustomEvent(`search`,{detail:{query:e},bubbles:!0,composed:!0}))}handleLogout(){this.dispatchEvent(new CustomEvent(`log-out`,{bubbles:!0,composed:!0}))}handleChangeRepresentation(){this.dispatchEvent(new CustomEvent(`change-representation`,{bubbles:!0,composed:!0}))}get formattedLastLoggedIn(){return d(this.user?.lastLoggedIn)}get showLogoutInUserMenu(){return this.hasLogOut&&(this.logOutButtonPlacement===`userMenu`||this.logOutButtonPlacement===`both`)}handleLogoClick(e){this.dispatchEvent(new CustomEvent(`logo-click`,{bubbles:!0,composed:!0,detail:{originalEvent:e}}))}renderLogo(){let t=e.p`
+      <pkt-icon name="oslologo" aria-hidden="true" path=${r.t(this.logoPath)}></pkt-icon>
+    `;return e.p`
+      <span class="pkt-header-global__logo">
+        <a href=${this.logoLink} aria-label="Til hovedsiden" @click=${this.handleLogoClick}>
+          ${t}
+        </a>
+      </span>
+    `}renderSearch(t){if(!this.showSearch)return e.d;let n=t.search;if(!n)return e.d;let i=this.searchPlaceholder??n.input.placeholder;return e.p`
+      <div class="pkt-header-global__search">
+        <pkt-searchinput
+          appearance="global"
+          input-size=${this.isTablet?`small`:`medium`}
+          fullwidth
+          id=${n.input.id||`pkt-header-global-search`}
+          name=${r.t(n.input.name)}
+          placeholder=${r.t(i)}
+          aria-label=${r.t(t.i18n?.search)}
+          action=${n.endpoint}
+          method="get"
+          @pkt-search=${e=>this.handleSearch(e.detail.value)}
+        ></pkt-searchinput>
+      </div>
+    `}renderContact(n){if(!this.showContact||this.user)return e.d;let r=n.header?.contact,i=t.t({"pkt-header-global__contact":!0,"pkt-btn":!0,"pkt-btn--secondary":!0,"pkt-btn--label-only":!0,"pkt-btn--small":this.isMobile||this.isTablet,"pkt-btn--medium":!this.isMobile&&!this.isTablet});return r?e.p`
+      <a class=${i} href=${r.url}>
+        <span class="pkt-btn__text">${r.text}</span>
+      </a>
+    `:e.d}get isLoading(){return!this.localeData&&!this.loadError}renderMenuToggle(t){let n=t?.i18n?.menu||`Meny`,r=this.openMenu===`menu`;return e.p`
+      <pkt-button
+        id=${v}
+        class="pkt-header-global__menu-toggle"
+        skin=${this.isMobile?`tertiary`:`secondary`}
+        variant=${this.isMobile?`icon-only`:`icon-right`}
+        iconName=${r?`close`:`menu`}
+        size=${this.isTablet?`small`:`medium`}
+        state=${r?`active`:`normal`}
+        aria-expanded=${r}
+        aria-controls=${_}
+        ?disabled=${this.isLoading}
+        @click=${()=>this.toggleMenu(`menu`)}
+      >
+        ${n}
+      </pkt-button>
+    `}renderSearchToggle(t){if(!this.showSearch||!t.search)return e.d;let n=this.openMenu===`search`;return e.p`
+      <pkt-button
+        id=${b}
+        class="pkt-header-global__search-toggle"
+        skin="primary"
+        color=${r.t(n?void 0:`yellow`)}
+        variant="icon-only"
+        iconName=${n?`close`:`magnifying-glass-big`}
+        size=${this.isMobile?`small`:`medium`}
+        state=${n?`active`:`normal`}
+        aria-expanded=${n}
+        aria-controls=${y}
+        @click=${()=>this.toggleMenu(`search`)}
+      >
+        ${t.i18n?.search||`Søk`}
+      </pkt-button>
+    `}renderSearchPanel(n){let i=n.search;if(this.openMenu!==`search`||!this.showSearch||!i)return e.d;let a=this.searchPlaceholder??i.input.placeholder;return e.p`
+      <div class=${t.t({"pkt-header-global__search-panel":!0,[`pkt-header-global__search-panel--${this.overlayBreakpointClass}`]:!!this.overlayBreakpointClass})} id=${y} style=${this.overlayAnchorStyle}>
+        <div class="pkt-header-global__search-panel-inner">
+          <pkt-searchinput
+            appearance="global"
+            fullwidth
+            id=${i.input.id||`pkt-header-global-search`}
+            name=${r.t(i.input.name)}
+            placeholder=${r.t(a)}
+            aria-label=${r.t(n.i18n?.search||`Søk`)}
+            action=${i.endpoint}
+            method="get"
+            @pkt-search=${e=>this.handleSearch(e.detail.value)}
+          ></pkt-searchinput>
+        </div>
+      </div>
+    `}renderUser(){if(!this.user)return e.d;let n=this.openMenu===`user`,r=t.t({"pkt-header-global__user-menu":!0,"is-open":n});return e.p`
+      <div class="pkt-header-global__user">
+        <div
+          class="pkt-header-global__user-container ${n?`is-open`:``}"
+          ${i.n(this.userContainerRef)}
+        >
+          <pkt-button
+            class="pkt-header-global__user-button"
+            skin="secondary"
+            size=${this.isTablet?`small`:`medium`}
+            state=${n?`active`:`normal`}
+            variant="icons-right-and-left"
+            iconName="user"
+            secondIconName=${n?`chevron-thin-up`:`chevron-thin-down`}
+            @click=${()=>this.toggleMenu(`user`)}
+          >
+            <span class="pkt-sr-only">Brukermeny: </span>
+            <span translate="no">${this.representing?.name||this.user.name}</span>
+          </pkt-button>
+          ${n?e.p`
+                <div class=${r}>
+                  <pkt-header-user-menu
+                    .user=${this.user}
+                    formatted-last-logged-in=${this.formattedLastLoggedIn||e.d}
+                    .representing=${this.representing}
+                    .userMenu=${this.userMenu}
+                    ?can-change-representation=${this.canChangeRepresentation}
+                    ?logout-on-click=${this.showLogoutInUserMenu}
+                    @change-representation=${()=>this.handleChangeRepresentation()}
+                    @log-out=${()=>this.handleLogout()}
+                  ></pkt-header-user-menu>
+                </div>
+              `:e.d}
+        </div>
+      </div>
+    `}get overlayBreakpointClass(){return this.isMobile?`mobile`:this.isTablet?`tablet`:``}renderMenu(){return this.openMenu===`menu`?e.p`
+      <div
+        class=${t.t({"pkt-header-global__menu":!0,[`pkt-header-global__menu--${this.overlayBreakpointClass}`]:!!this.overlayBreakpointClass})}
+        id=${_}
+        style=${this.overlayAnchorStyle}
+        ${i.n(this.menuContainerRef)}
+      >
+        ${this.localeData?e.p`
+              <pkt-header-menu
+                .data=${this.effectiveData}
+                locale=${this.locale}
+                open
+                mobile-breakpoint=${this.mobileBreakpoint}
+              ></pkt-header-menu>
+            `:e.p`
+              <nav class="pkt-header-menu pkt-header-menu--open">
+                <p class="pkt-header-menu__error">Kunne ikke laste meny.</p>
+              </nav>
+            `}
+      </div>
+    `:e.d}renderHeader(){let n=t.t({"pkt-header-global":!0,"pkt-header-global--mobile":this.isMobile,"pkt-header-global--tablet":this.isTablet,"pkt-header-global--fixed":this.isFixed,"pkt-header-global--sticky":this.isSticky,"pkt-header-global--scroll-to-hide":this.shouldHideOnScroll,"pkt-header-global--hidden":this.isHidden}),r=this.localeData,a=this.isMobile;return e.p`
+      <header class=${n} ${i.n(this.headerRef)}>
+        <div class="pkt-header-global__logo-area">${this.renderLogo()}</div>
+        <div class="pkt-header-global__content">
+          ${!a&&r?this.renderSearch(r):e.d}
+          ${a&&r?this.renderSearchToggle(r):e.d}
+          ${this.renderMenuToggle(r)}
+          ${!a&&r?this.renderContact(r):e.d}
+        </div>
+        ${this.renderUser()}
+      </header>
+    `}render(){let n=this.renderHeader(),r=this.localeData,i=this.renderMenu(),a=r?this.renderSearchPanel(r):e.d;return this.isFixed?e.p`
+        <div class="pkt-header-global-wrapper">
+          ${n}
+          <div class=${t.t({"pkt-header-global-spacer":!0,"pkt-header-global-spacer--mobile":this.isMobile,"pkt-header-global-spacer--tablet":this.isTablet&&!this.isMobile,"pkt-header-global-spacer--has-user":!!this.user})}></div>
+          ${a}${i}
+        </div>
+      `:e.p`${n}${a}${i}`}};e.n([e.o({type:String,attribute:`data-url`})],x.prototype,`dataUrl`,void 0),e.n([e.o({type:Object,attribute:!1})],x.prototype,`data`,void 0),e.n([e.o({type:String})],x.prototype,`locale`,void 0),e.n([e.o({type:String,attribute:`logo-link`})],x.prototype,`logoLink`,void 0),e.n([e.o({type:String,attribute:`logo-path`})],x.prototype,`logoPath`,void 0),e.n([e.o({type:String,attribute:`search-placeholder`})],x.prototype,`searchPlaceholder`,void 0),e.n([e.o({type:String})],x.prototype,`position`,void 0),e.n([e.o({type:String,attribute:`scroll-behavior`})],x.prototype,`scrollBehavior`,void 0),e.n([e.o({type:Number,attribute:`mobile-breakpoint`})],x.prototype,`mobileBreakpoint`,void 0),e.n([e.o({type:Number,attribute:`tablet-breakpoint`})],x.prototype,`tabletBreakpoint`,void 0),e.n([e.o({type:String,attribute:`log-out-button-placement`})],x.prototype,`logOutButtonPlacement`,void 0),e.n([e.o({type:Boolean,attribute:`show-search`,converter:a.t})],x.prototype,`showSearch`,void 0),e.n([e.o({type:Boolean,attribute:`show-contact`,converter:a.t})],x.prototype,`showContact`,void 0),e.n([e.o({type:Boolean,attribute:`can-change-representation`,converter:a.t})],x.prototype,`canChangeRepresentation`,void 0),e.n([e.o({type:Boolean,attribute:`has-log-out`,converter:a.t})],x.prototype,`hasLogOut`,void 0),e.n([e.o({type:Object})],x.prototype,`user`,void 0),e.n([e.o({type:Array,attribute:`user-menu`})],x.prototype,`userMenu`,void 0),e.n([e.o({type:Object})],x.prototype,`representing`,void 0),e.n([e.a()],x.prototype,`openMenu`,void 0),e.n([e.a()],x.prototype,`fetchedData`,void 0),e.n([e.a()],x.prototype,`loadError`,void 0),e.n([e.a()],x.prototype,`headerAnchor`,void 0);try{e.s(`pkt-header-global`)(x)}catch{console.warn(`Forsøker å definere <pkt-header-global>, men den er allerede definert`)}var S=class extends n.t{constructor(...e){super(...e),this.type=`service`,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.canChangeRepresentation=!1,this.hasLogOut=!1,this.showContact=!0}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}renderGlobal(){return e.p`
+      <pkt-header-global
+        data-url=${r.t(this.dataUrl)}
+        locale=${r.t(this.locale)}
+        logo-link=${r.t(this.logoLink)}
+        logo-path=${r.t(this.logoPath)}
+        search-placeholder=${r.t(this.hasAttribute(`search-placeholder`)?this.searchPlaceholder:void 0)}
+        mobile-breakpoint=${r.t(this.hasAttribute(`mobile-breakpoint`)?this.mobileBreakpoint:void 0)}
+        tablet-breakpoint=${r.t(this.hasAttribute(`tablet-breakpoint`)?this.tabletBreakpoint:void 0)}
+        log-out-button-placement=${this.logOutButtonPlacement}
+        position=${this.position}
+        scroll-behavior=${this.scrollBehavior}
+        .data=${this.data}
+        .showSearch=${this.showSearch??!0}
+        .showContact=${this.showContact}
+        .canChangeRepresentation=${this.canChangeRepresentation}
+        .hasLogOut=${this.hasLogOut}
+        .user=${this.user}
+        .userMenu=${this.effectiveUserMenu}
+        .representing=${this.representing}
+      ></pkt-header-global>
+    `}render(){return this.type===`global`?this.renderGlobal():e.p`
+      <pkt-header-service
+        service-name=${r.t(this.serviceName)}
+        service-link=${r.t(this.serviceLink)}
+        logo-link=${r.t(this.logoLink)}
+        logo-path=${r.t(this.logoPath)}
+        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??!1}
+        .canChangeRepresentation=${this.canChangeRepresentation}
+        .hasLogOut=${this.hasLogOut}
+        .user=${this.user}
+        .userMenu=${this.effectiveUserMenu}
+        .representing=${this.representing}
+      >
+        ${this.hasSlotContent()?e.p`<div class="pkt-contents">${n.n(this)}</div>`:e.d}
+      </pkt-header-service>
+    `}};e.n([e.o({type:String})],S.prototype,`type`,void 0),e.n([e.o({type:String,attribute:`service-name`})],S.prototype,`serviceName`,void 0),e.n([e.o({type:String,attribute:`service-link`})],S.prototype,`serviceLink`,void 0),e.n([e.o({type:String,attribute:`logo-link`})],S.prototype,`logoLink`,void 0),e.n([e.o({type:String,attribute:`logo-path`})],S.prototype,`logoPath`,void 0),e.n([e.o({type:String,attribute:`search-placeholder`})],S.prototype,`searchPlaceholder`,void 0),e.n([e.o({type:String,attribute:`search-value`})],S.prototype,`searchValue`,void 0),e.n([e.o({type:Number,attribute:`mobile-breakpoint`})],S.prototype,`mobileBreakpoint`,void 0),e.n([e.o({type:Number,attribute:`tablet-breakpoint`})],S.prototype,`tabletBreakpoint`,void 0),e.n([e.o({type:String,attribute:`opened-menu`})],S.prototype,`openedMenu`,void 0),e.n([e.o({type:String,attribute:`log-out-button-placement`})],S.prototype,`logOutButtonPlacement`,void 0),e.n([e.o({type:String})],S.prototype,`position`,void 0),e.n([e.o({type:String,attribute:`scroll-behavior`})],S.prototype,`scrollBehavior`,void 0),e.n([e.o({type:String,attribute:`slot-menu-variant`})],S.prototype,`slotMenuVariant`,void 0),e.n([e.o({type:String,attribute:`slot-menu-text`})],S.prototype,`slotMenuText`,void 0),e.n([e.o({type:Boolean,attribute:`hide-logo`,converter:a.t})],S.prototype,`hideLogo`,void 0),e.n([e.o({type:Boolean,converter:a.t})],S.prototype,`compact`,void 0),e.n([e.o({type:Boolean,attribute:`show-search`,converter:a.t})],S.prototype,`showSearch`,void 0),e.n([e.o({type:Boolean,attribute:`can-change-representation`,converter:a.t})],S.prototype,`canChangeRepresentation`,void 0),e.n([e.o({type:Boolean,attribute:`has-log-out`,converter:a.t})],S.prototype,`hasLogOut`,void 0),e.n([e.o({type:Object})],S.prototype,`user`,void 0),e.n([e.o({type:Array,attribute:`user-menu`})],S.prototype,`userMenu`,void 0),e.n([e.o({type:Object})],S.prototype,`representing`,void 0),e.n([e.o({type:String,attribute:`data-url`})],S.prototype,`dataUrl`,void 0),e.n([e.o({type:Object,attribute:!1})],S.prototype,`data`,void 0),e.n([e.o({type:String})],S.prototype,`locale`,void 0),e.n([e.o({type:Boolean,attribute:`show-contact`,converter:a.t})],S.prototype,`showContact`,void 0),e.n([e.o({type:Array,attribute:`user-menu-footer`})],S.prototype,`userMenuFooter`,void 0),e.n([e.o({type:Array,attribute:`user-options`})],S.prototype,`userOptions`,void 0);try{e.s(`pkt-header`)(S)}catch{console.warn(`Forsøker å definere <pkt-header>, men den er allerede definert`)}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return S}});

package/dist/header-menu-BHqK4QA6.cjs

@@ -0,0 +1,126 @@
+const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs");require("./icon-B8PVq2O6.cjs"),require("./accordion-CbXDxOho.cjs");const n=require("./booleanish-B9Kf0nES.cjs"),r=require("./fetch-header-footer-data-xohWFmYC.cjs");var i=class extends e.t{constructor(...e){super(...e),this.dataUrl=r.a,this.locale=`nb-NO`,this.open=!1,this.mobileBreakpoint=768,this.loadState=`idle`,this.isMobile=!1,this.menuWidth=0}connectedCallback(){super.connectedCallback(),this.classList.add(`pkt-header-menu`),this.updateOpenClass(),this.observeWidth(),this.data?(this.loadState=`ready`,this.dispatchEvent(new CustomEvent(`data-loaded`,{detail:{data:this.data},bubbles:!0,composed:!0}))):this.loadData()}updateOpenClass(){this.classList.toggle(`pkt-header-menu--open`,!!this.open)}disconnectedCallback(){super.disconnectedCallback(),this.abortController?.abort(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0}updated(e){super.updated(e),e.has(`open`)&&this.updateOpenClass(),e.has(`mobileBreakpoint`)&&e.get(`mobileBreakpoint`)!==void 0&&this.refreshIsMobile(),e.has(`dataUrl`)&&e.get(`dataUrl`)!==void 0&&!this.data&&this.loadData(),e.has(`data`)&&e.get(`data`)!==void 0&&this.data&&(this.loadState=`ready`,this.dispatchEvent(new CustomEvent(`data-loaded`,{detail:{data:this.data},bubbles:!0,composed:!0})))}observeWidth(){typeof ResizeObserver>`u`||(this.menuWidth=this.offsetWidth,this.refreshIsMobile(),this.resizeObserver=new ResizeObserver(e=>{for(let t of e)this.menuWidth=t.borderBoxSize&&t.borderBoxSize.length>0?t.borderBoxSize[0].inlineSize:t.contentRect.width,this.refreshIsMobile()}),this.resizeObserver.observe(this))}refreshIsMobile(){this.isMobile=this.menuWidth<this.mobileBreakpoint}async loadData(){this.abortController?.abort(),this.abortController=new AbortController,this.loadState=`loading`;try{let e=await r.t(this.dataUrl,this.abortController.signal);this.fetchedData=e,this.loadState=`ready`,this.dispatchEvent(new CustomEvent(`data-loaded`,{detail:{data:e},bubbles:!0,composed:!0}))}catch(e){if(e.name===`AbortError`)return;this.loadState=`error`,this.dispatchEvent(new CustomEvent(`data-error`,{detail:{error:e},bubbles:!0,composed:!0}))}}get effectiveData(){return this.data??this.fetchedData}get localeData(){return r.n(this.effectiveData,this.locale)}render(){if(this.loadState===`loading`)return e.p`
+        <nav aria-busy="true">
+          <p class="pkt-header-menu__loading">Laster meny…</p>
+        </nav>
+      `;if(this.loadState===`error`||!this.localeData)return e.p`
+        <nav aria-hidden=${!this.open}>
+          <p class="pkt-header-menu__error">Kunne ikke laste meny.</p>
+        </nav>
+      `;let{megamenu:t,i18n:n}=this.localeData,r=n?.navAriaLabel||`Hovedmeny`;return this.isMobile?e.p`
+        <nav aria-label=${r}>
+          ${this.renderMobileAccordion(t.services,t.sections)}
+          ${this.renderButtons(t.buttons,!0)}
+          ${this.renderFooter(t.links,t.some)}
+        </nav>
+      `:e.p`
+      <nav aria-label=${r}>
+        ${this.renderServices(t.services)} ${this.renderButtons(t.buttons,!1)}
+        ${this.renderSections(t.sections)}
+        ${this.renderFooter(t.links,t.some)}
+      </nav>
+    `}renderMobileAccordion(t,n){return e.p`
+      <div class="pkt-header-menu__sections">
+        <pkt-accordion
+          class="pkt-header-menu__sections-inner"
+          skin="plus-minus"
+          name="header-menu-accordion"
+        >
+          <pkt-accordion-item
+            class="pkt-header-menu__section"
+            skin="plus-minus"
+            id="pkt-header-menu-services"
+            title=${t.title}
+          >
+            ${this.renderServicesList(t)}
+          </pkt-accordion-item>
+          ${n.map((t,n)=>e.p`
+              <pkt-accordion-item
+                class="pkt-header-menu__section"
+                skin="plus-minus"
+                id=${`pkt-header-menu-section-${n}`}
+                title=${t.title}
+              >
+                ${this.renderSectionList(t.links)}
+              </pkt-accordion-item>
+            `)}
+        </pkt-accordion>
+      </div>
+    `}renderServicesList(t){return e.p`
+      <ul class="pkt-header-menu__services-list">
+        ${t.links.map(t=>e.p`
+            <li class="pkt-header-menu__service">
+              <a class="pkt-header-menu__service-link" href=${t.url}>
+                <pkt-icon
+                  class="pkt-header-menu__service-icon"
+                  name=${r.i(t.icon)}
+                  aria-hidden="true"
+                ></pkt-icon>
+                <span class="pkt-header-menu__service-text">${t.text}</span>
+              </a>
+            </li>
+          `)}
+      </ul>
+    `}renderServices(t){return e.p`
+      <div class="pkt-header-menu__services">
+        <h2 class="pkt-header-menu__services-title">${t.title}</h2>
+        ${this.renderServicesList(t)}
+      </div>
+    `}renderButtons(n,i){return!n||n.length===0?e.d:e.p`
+      <div class=${t.t({"pkt-header-menu__buttons":!0,"pkt-header-menu__buttons--mobile":i})}>
+        ${n.map(t=>e.p`
+            <a
+              class="pkt-btn pkt-btn--secondary pkt-btn--icon-right pkt-btn--small"
+              href=${t.url}
+            >
+              <pkt-icon
+                class="pkt-btn__icon"
+                name=${t.iconName?r.i(t.iconName):`user`}
+                aria-hidden="true"
+              ></pkt-icon>
+              <span class="pkt-btn__text">${t.text}</span>
+            </a>
+          `)}
+      </div>
+    `}renderSections(t){return!t||t.length===0?e.d:e.p`
+      <div class="pkt-header-menu__sections">
+        <div class="pkt-header-menu__sections-inner">
+          ${t.map(t=>e.p`
+              <div class="pkt-header-menu__section">
+                <h2 class="pkt-header-menu__section-title">${t.title}</h2>
+                ${this.renderSectionList(t.links)}
+              </div>
+            `)}
+        </div>
+      </div>
+    `}renderSectionList(t){return e.p`
+      <ul class="pkt-header-menu__section-list">
+        ${t.map(t=>e.p`
+            <li>
+              <a class="pkt-header-menu__section-link" href=${t.url}>${t.text}</a>
+            </li>
+          `)}
+      </ul>
+    `}renderFooter(t,n){return(!t||t.length===0)&&(!n||n.length===0)?e.d:e.p`
+      <div class="pkt-header-menu__footer">
+        ${t&&t.length>0?e.p`
+              <ul class="pkt-header-menu__footer-list">
+                ${t.map(t=>e.p`
+                    <li>
+                      <a class="pkt-header-menu__footer-link" href=${t.url}>${t.text}</a>
+                    </li>
+                  `)}
+              </ul>
+            `:e.d}
+        ${n&&n.length>0?e.p`
+              <ul class="pkt-header-menu__footer-list pkt-header-menu__footer-list--social">
+                ${n.map(e=>this.renderSocialLink(e))}
+              </ul>
+            `:e.d}
+      </div>
+    `}renderSocialLink(t){let n=r.r(t.url,t.text);return e.p`
+      <li>
+        <a class="pkt-header-menu__social-link" href=${t.url} aria-label=${t.text}>
+          ${n?e.p`<pkt-icon name=${n} aria-hidden="true"></pkt-icon>`:e.p`<span>${t.text}</span>`}
+        </a>
+      </li>
+    `}};e.n([e.o({type:String,attribute:`data-url`})],i.prototype,`dataUrl`,void 0),e.n([e.o({type:Object,attribute:!1})],i.prototype,`data`,void 0),e.n([e.o({type:String})],i.prototype,`locale`,void 0),e.n([e.o({type:Boolean,reflect:!0,converter:n.t})],i.prototype,`open`,void 0),e.n([e.o({type:Number,attribute:`mobile-breakpoint`})],i.prototype,`mobileBreakpoint`,void 0),e.n([e.a()],i.prototype,`loadState`,void 0),e.n([e.a()],i.prototype,`fetchedData`,void 0),e.n([e.a()],i.prototype,`isMobile`,void 0);try{e.s(`pkt-header-menu`)(i)}catch{console.warn(`Forsøker å definere <pkt-header-menu>, men den er allerede definert`)}var a=i;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});