@oslokommune/punkt-elements 17.1.3 → 18.0.0

package/dist/{header-menu-BAsUNKSx.cjs → header-menu-1FFWhvNc.cjs}

@@ -1,24 +1,24 @@
-const e=require("./element-BA8v6S7z.cjs"),t=require("./class-map-BeimMvPv.cjs");require("./icon-9iwd2F2l.cjs"),require("./accordion-B3GBlvUC.cjs");const n=require("./booleanish-BF8l4scU.cjs"),r=require("./fetch-header-footer-data-CUKV0biS.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`
+const e=require("./element-B8OGznK0.cjs"),t=require("./class-map-CzCE5pqG.cjs");require("./icon-BmMC09mi.cjs"),require("./accordion-DobbH-Sv.cjs");const n=require("./booleanish-BF8l4scU.cjs"),r=require("./fetch-header-footer-data-CUKV0biS.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._`
         <nav aria-busy="true">
           <p class="pkt-header-menu__loading">Laster meny…</p>
         </nav>
-      `;if(this.loadState===`error`||!this.localeData)return e.p`
+      `;if(this.loadState===`error`||!this.localeData)return e._`
         <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`
+      `;let{megamenu:t,i18n:n}=this.localeData,r=n?.navAriaLabel||`Hovedmeny`;return this.isMobile?e._`
         <nav aria-label=${r}>
           ${this.renderMobileAccordion(t.services,t.sections)}
           ${this.renderButtons(t.buttons,!0)}
           ${this.renderFooter(t.links,t.some)}
         </nav>
-      `:e.p`
+      `:e._`
       <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`
+    `}renderMobileAccordion(t,n){return e._`
       <div class="pkt-header-menu__sections">
         <pkt-accordion
           class="pkt-header-menu__sections-inner"
@@ -33,7 +33,7 @@ const e=require("./element-BA8v6S7z.cjs"),t=require("./class-map-BeimMvPv.cjs");
           >
             ${this.renderServicesList(t)}
           </pkt-accordion-item>
-          ${n.map((t,n)=>e.p`
+          ${n.map((t,n)=>e._`
               <pkt-accordion-item
                 class="pkt-header-menu__section"
                 skin="plus-minus"
@@ -45,9 +45,9 @@ const e=require("./element-BA8v6S7z.cjs"),t=require("./class-map-BeimMvPv.cjs");
             `)}
         </pkt-accordion>
       </div>
-    `}renderServicesList(t){return e.p`
+    `}renderServicesList(t){return e._`
       <ul class="pkt-header-menu__services-list">
-        ${t.links.map(t=>e.p`
+        ${t.links.map(t=>e._`
             <li class="pkt-header-menu__service">
               <a class="pkt-header-menu__service-link" href=${t.url}>
                 <pkt-icon
@@ -60,14 +60,14 @@ const e=require("./element-BA8v6S7z.cjs"),t=require("./class-map-BeimMvPv.cjs");
             </li>
           `)}
       </ul>
-    `}renderServices(t){return e.p`
+    `}renderServices(t){return e._`
       <div class="pkt-header-menu__services">
         <h2 class="pkt-header-menu__services-title">${t.title}</h2>
         ${this.renderServicesList(t)}
       </div>
-    `}renderButtons(n,i){if(!n||n.length===0)return e.d;let a=t.t({"pkt-header-menu__buttons":!0,"pkt-header-menu__buttons--mobile":i});return e.p`
+    `}renderButtons(n,i){if(!n||n.length===0)return e.h;let a=t.t({"pkt-header-menu__buttons":!0,"pkt-header-menu__buttons--mobile":i});return e._`
       <div class=${a}>
-        ${n.map(t=>e.p`
+        ${n.map(t=>e._`
             <a
               class="pkt-btn pkt-btn--secondary pkt-btn--icon-right pkt-btn--small"
               href=${t.url}
@@ -81,10 +81,10 @@ const e=require("./element-BA8v6S7z.cjs"),t=require("./class-map-BeimMvPv.cjs");
             </a>
           `)}
       </div>
-    `}renderSections(t){return!t||t.length===0?e.d:e.p`
+    `}renderSections(t){return!t||t.length===0?e.h:e._`
       <div class="pkt-header-menu__sections">
         <div class="pkt-header-menu__sections-inner">
-          ${t.map(t=>e.p`
+          ${t.map(t=>e._`
               <div class="pkt-header-menu__section">
                 <h2 class="pkt-header-menu__section-title">${t.title}</h2>
                 ${this.renderSectionList(t.links)}
@@ -92,35 +92,35 @@ const e=require("./element-BA8v6S7z.cjs"),t=require("./class-map-BeimMvPv.cjs");
             `)}
         </div>
       </div>
-    `}renderSectionList(t){return e.p`
+    `}renderSectionList(t){return e._`
       <ul class="pkt-header-menu__section-list">
-        ${t.map(t=>e.p`
+        ${t.map(t=>e._`
             <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`
+    `}renderFooter(t,n){return(!t||t.length===0)&&(!n||n.length===0)?e.h:e._`
       <div class="pkt-header-menu__footer">
-        ${t&&t.length>0?e.p`
+        ${t&&t.length>0?e._`
               <ul class="pkt-header-menu__footer-list">
-                ${t.map(t=>e.p`
+                ${t.map(t=>e._`
                     <li>
                       <a class="pkt-header-menu__footer-link" href=${t.url}>${t.text}</a>
                     </li>
                   `)}
               </ul>
-            `:e.d}
-        ${n&&n.length>0?e.p`
+            `:e.h}
+        ${n&&n.length>0?e._`
               <ul class="pkt-header-menu__footer-list pkt-header-menu__footer-list--social">
                 ${n.map(e=>this.renderSocialLink(e))}
               </ul>
-            `:e.d}
+            `:e.h}
       </div>
-    `}renderSocialLink(t){let n=r.r(t.url,t.text);return e.p`
+    `}renderSocialLink(t){let n=r.r(t.url,t.text);return e._`
       <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>`}
+          ${n?e._`<pkt-icon name=${n} aria-hidden="true"></pkt-icon>`:e._`<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}});
+    `}};e.n([e.u({type:String,attribute:`data-url`})],i.prototype,`dataUrl`,void 0),e.n([e.u({type:Object,attribute:!1})],i.prototype,`data`,void 0),e.n([e.u({type:String})],i.prototype,`locale`,void 0),e.n([e.u({type:Boolean,reflect:!0,converter:n.t})],i.prototype,`open`,void 0),e.n([e.u({type:Number,attribute:`mobile-breakpoint`})],i.prototype,`mobileBreakpoint`,void 0),e.n([e.l()],i.prototype,`loadState`,void 0),e.n([e.l()],i.prototype,`fetchedData`,void 0),e.n([e.l()],i.prototype,`isMobile`,void 0);try{e.d(`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}});

package/dist/{header-menu-hVPXsb8g.js → header-menu-D522-VTV.js}

@@ -1,11 +1,11 @@
-import { a as e, d as t, n, o as r, p as i, s as a, t as o } from "./element-ChsFgr_B.js";
-import { t as s } from "./class-map-CnWCnBSX.js";
-import "./icon-D-LA22xD.js";
-import "./accordion-BeLvLPrB.js";
+import { _ as e, d as t, h as n, l as r, n as i, t as a, u as o } from "./element-BKSPVgs2.js";
+import { t as s } from "./class-map-F1DJHyb7.js";
+import "./icon-HYU1f54x.js";
+import "./accordion-1_pdxTgJ.js";
 import { t as c } from "./booleanish-OQJTYSrw.js";
 import { a as l, i as u, n as d, r as f, t as p } from "./fetch-header-footer-data-Pc32etrk.js";
 //#region src/components/header-menu/header-menu.ts
-var m = class extends o {
+var m = class extends a {
 	constructor(...e) {
 		super(...e), this.dataUrl = l, this.locale = "nb-NO", this.open = !1, this.mobileBreakpoint = 768, this.loadState = "idle", this.isMobile = !1, this.menuWidth = 0;
 	}
@@ -62,33 +62,33 @@ var m = class extends o {
 		return d(this.effectiveData, this.locale);
 	}
 	render() {
-		if (this.loadState === "loading") return i`
+		if (this.loadState === "loading") return e`
         <nav aria-busy="true">
           <p class="pkt-header-menu__loading">Laster meny…</p>
         </nav>
       `;
-		if (this.loadState === "error" || !this.localeData) return i`
+		if (this.loadState === "error" || !this.localeData) return e`
         <nav aria-hidden=${!this.open}>
           <p class="pkt-header-menu__error">Kunne ikke laste meny.</p>
         </nav>
       `;
-		let { megamenu: e, i18n: t } = this.localeData, n = t?.navAriaLabel || "Hovedmeny";
-		return this.isMobile ? i`
-        <nav aria-label=${n}>
-          ${this.renderMobileAccordion(e.services, e.sections)}
-          ${this.renderButtons(e.buttons, !0)}
-          ${this.renderFooter(e.links, e.some)}
+		let { megamenu: t, i18n: n } = this.localeData, r = n?.navAriaLabel || "Hovedmeny";
+		return this.isMobile ? e`
+        <nav aria-label=${r}>
+          ${this.renderMobileAccordion(t.services, t.sections)}
+          ${this.renderButtons(t.buttons, !0)}
+          ${this.renderFooter(t.links, t.some)}
         </nav>
-      ` : i`
-      <nav aria-label=${n}>
-        ${this.renderServices(e.services)} ${this.renderButtons(e.buttons, !1)}
-        ${this.renderSections(e.sections)}
-        ${this.renderFooter(e.links, e.some)}
+      ` : e`
+      <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(e, t) {
-		return i`
+	renderMobileAccordion(t, n) {
+		return e`
       <div class="pkt-header-menu__sections">
         <pkt-accordion
           class="pkt-header-menu__sections-inner"
@@ -99,146 +99,146 @@ var m = class extends o {
             class="pkt-header-menu__section"
             skin="plus-minus"
             id="pkt-header-menu-services"
-            title=${e.title}
+            title=${t.title}
           >
-            ${this.renderServicesList(e)}
+            ${this.renderServicesList(t)}
           </pkt-accordion-item>
-          ${t.map((e, t) => i`
+          ${n.map((t, n) => e`
               <pkt-accordion-item
                 class="pkt-header-menu__section"
                 skin="plus-minus"
-                id=${`pkt-header-menu-section-${t}`}
-                title=${e.title}
+                id=${`pkt-header-menu-section-${n}`}
+                title=${t.title}
               >
-                ${this.renderSectionList(e.links)}
+                ${this.renderSectionList(t.links)}
               </pkt-accordion-item>
             `)}
         </pkt-accordion>
       </div>
     `;
 	}
-	renderServicesList(e) {
-		return i`
+	renderServicesList(t) {
+		return e`
       <ul class="pkt-header-menu__services-list">
-        ${e.links.map((e) => i`
+        ${t.links.map((t) => e`
             <li class="pkt-header-menu__service">
-              <a class="pkt-header-menu__service-link" href=${e.url}>
+              <a class="pkt-header-menu__service-link" href=${t.url}>
                 <pkt-icon
                   class="pkt-header-menu__service-icon"
-                  name=${u(e.icon)}
+                  name=${u(t.icon)}
                   aria-hidden="true"
                 ></pkt-icon>
-                <span class="pkt-header-menu__service-text">${e.text}</span>
+                <span class="pkt-header-menu__service-text">${t.text}</span>
               </a>
             </li>
           `)}
       </ul>
     `;
 	}
-	renderServices(e) {
-		return i`
+	renderServices(t) {
+		return e`
       <div class="pkt-header-menu__services">
-        <h2 class="pkt-header-menu__services-title">${e.title}</h2>
-        ${this.renderServicesList(e)}
+        <h2 class="pkt-header-menu__services-title">${t.title}</h2>
+        ${this.renderServicesList(t)}
       </div>
     `;
 	}
-	renderButtons(e, n) {
-		if (!e || e.length === 0) return t;
-		let r = s({
+	renderButtons(t, r) {
+		if (!t || t.length === 0) return n;
+		let i = s({
 			"pkt-header-menu__buttons": !0,
-			"pkt-header-menu__buttons--mobile": n
+			"pkt-header-menu__buttons--mobile": r
 		});
-		return i`
-      <div class=${r}>
-        ${e.map((e) => i`
+		return e`
+      <div class=${i}>
+        ${t.map((t) => e`
             <a
               class="pkt-btn pkt-btn--secondary pkt-btn--icon-right pkt-btn--small"
-              href=${e.url}
+              href=${t.url}
             >
               <pkt-icon
                 class="pkt-btn__icon"
-                name=${e.iconName ? u(e.iconName) : "user"}
+                name=${t.iconName ? u(t.iconName) : "user"}
                 aria-hidden="true"
               ></pkt-icon>
-              <span class="pkt-btn__text">${e.text}</span>
+              <span class="pkt-btn__text">${t.text}</span>
             </a>
           `)}
       </div>
     `;
 	}
-	renderSections(e) {
-		return !e || e.length === 0 ? t : i`
+	renderSections(t) {
+		return !t || t.length === 0 ? n : e`
       <div class="pkt-header-menu__sections">
         <div class="pkt-header-menu__sections-inner">
-          ${e.map((e) => i`
+          ${t.map((t) => e`
               <div class="pkt-header-menu__section">
-                <h2 class="pkt-header-menu__section-title">${e.title}</h2>
-                ${this.renderSectionList(e.links)}
+                <h2 class="pkt-header-menu__section-title">${t.title}</h2>
+                ${this.renderSectionList(t.links)}
               </div>
             `)}
         </div>
       </div>
     `;
 	}
-	renderSectionList(e) {
-		return i`
+	renderSectionList(t) {
+		return e`
       <ul class="pkt-header-menu__section-list">
-        ${e.map((e) => i`
+        ${t.map((t) => e`
             <li>
-              <a class="pkt-header-menu__section-link" href=${e.url}>${e.text}</a>
+              <a class="pkt-header-menu__section-link" href=${t.url}>${t.text}</a>
             </li>
           `)}
       </ul>
     `;
 	}
-	renderFooter(e, n) {
-		return (!e || e.length === 0) && (!n || n.length === 0) ? t : i`
+	renderFooter(t, r) {
+		return (!t || t.length === 0) && (!r || r.length === 0) ? n : e`
       <div class="pkt-header-menu__footer">
-        ${e && e.length > 0 ? i`
+        ${t && t.length > 0 ? e`
               <ul class="pkt-header-menu__footer-list">
-                ${e.map((e) => i`
+                ${t.map((t) => e`
                     <li>
-                      <a class="pkt-header-menu__footer-link" href=${e.url}>${e.text}</a>
+                      <a class="pkt-header-menu__footer-link" href=${t.url}>${t.text}</a>
                     </li>
                   `)}
               </ul>
-            ` : t}
-        ${n && n.length > 0 ? i`
+            ` : n}
+        ${r && r.length > 0 ? e`
               <ul class="pkt-header-menu__footer-list pkt-header-menu__footer-list--social">
-                ${n.map((e) => this.renderSocialLink(e))}
+                ${r.map((e) => this.renderSocialLink(e))}
               </ul>
-            ` : t}
+            ` : n}
       </div>
     `;
 	}
-	renderSocialLink(e) {
-		let t = f(e.url, e.text);
-		return i`
+	renderSocialLink(t) {
+		let n = f(t.url, t.text);
+		return e`
       <li>
-        <a class="pkt-header-menu__social-link" href=${e.url} aria-label=${e.text}>
-          ${t ? i`<pkt-icon name=${t} aria-hidden="true"></pkt-icon>` : i`<span>${e.text}</span>`}
+        <a class="pkt-header-menu__social-link" href=${t.url} aria-label=${t.text}>
+          ${n ? e`<pkt-icon name=${n} aria-hidden="true"></pkt-icon>` : e`<span>${t.text}</span>`}
         </a>
       </li>
     `;
 	}
 };
-n([r({
+i([o({
 	type: String,
 	attribute: "data-url"
-})], m.prototype, "dataUrl", void 0), n([r({
+})], m.prototype, "dataUrl", void 0), i([o({
 	type: Object,
 	attribute: !1
-})], m.prototype, "data", void 0), n([r({ type: String })], m.prototype, "locale", void 0), n([r({
+})], m.prototype, "data", void 0), i([o({ type: String })], m.prototype, "locale", void 0), i([o({
 	type: Boolean,
 	reflect: !0,
 	converter: c
-})], m.prototype, "open", void 0), n([r({
+})], m.prototype, "open", void 0), i([o({
 	type: Number,
 	attribute: "mobile-breakpoint"
-})], m.prototype, "mobileBreakpoint", void 0), n([e()], m.prototype, "loadState", void 0), n([e()], m.prototype, "fetchedData", void 0), n([e()], m.prototype, "isMobile", void 0);
+})], m.prototype, "mobileBreakpoint", void 0), i([r()], m.prototype, "loadState", void 0), i([r()], m.prototype, "fetchedData", void 0), i([r()], m.prototype, "isMobile", void 0);
 try {
-	a("pkt-header-menu")(m);
+	t("pkt-header-menu")(m);
 } catch {
 	console.warn("Forsøker å definere <pkt-header-menu>, men den er allerede definert");
 }