@oslokommune/punkt-react 12.37.5 → 12.37.7

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.37.7](https://github.com/oslokommune/punkt/compare/12.37.6...12.37.7) (2025-05-13)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* Støtte nextjs med 'use client' på alle React-komponenter (#2537). 
+
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.37.0](https://github.com/oslokommune/punkt/compare/12.36.2...12.37.0) (2025-05-05)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -343,7 +343,7 @@ export declare interface IPktRadioButton extends InputHTMLAttributes<HTMLInputEl
     defaultChecked?: boolean;
     disabled?: boolean;
     value?: string;
-    checkHelptext?: string | default_2.ReactNode | default_2.ReactNode[];
+    checkHelptext?: string | ReactNode | ReactNode[];
     ref?: ForwardedRef<HTMLInputElement>;
     onChange?: ChangeEventHandler<HTMLInputElement>;
     onInput?: ChangeEventHandler<HTMLInputElement>;

package/dist/punkt-react.es.js

@@ -26769,8 +26769,17 @@ let bf = class extends Gr {
       this.emitCookieConsents(n);
     });
   }
+  returnJsonOrObject(n) {
+    let i;
+    try {
+      i = JSON.parse(n);
+    } catch {
+      i = n;
+    }
+    return i;
+  }
   emitCookieConsents(n) {
-    const i = JSON.parse(n.value).items.reduce((l, d) => (l[d.name] = d.consent, l), {});
+    const i = this.returnJsonOrObject(n.value).items.reduce((l, d) => (l[d.name] = d.consent, l), {});
     this.dispatchEvent(
       new CustomEvent("toggle-consent", {
         detail: i,
@@ -26798,7 +26807,7 @@ let bf = class extends Gr {
       })
     ), window.cookieBanner.cookieConsent.validateConsentCookie().then((n) => {
       if (n) {
-        const i = { value: window.cookieBanner.cookieConsent.getConsentCookie().items };
+        const i = { value: window.cookieBanner.cookieConsent.getConsentCookie() };
         this.emitCookieConsents(i);
       }
     });

package/dist/punkt-react.umd.js

@@ -862,7 +862,7 @@ You might need to use a local HTTP server (instead of file://): https://reactjs.
           >
             ${this.renderValueTag(m)}
           </pkt-tag>
-        `});return n?i:l}renderValueTag(n){if(!n)return"";switch(this.displayValueAs){case"prefixAndValue":return Se`<span data-focusfix=${this.id}>${n.prefix||""} ${n.value}</span>`;case"value":return Se`<span data-focusfix=${this.id}>${n.value}</span>`;case"label":default:return Se`<span data-focusfix=${this.id}>${n.label||n.value}</span>`}}handleInput(n){if(n.stopPropagation(),n.stopImmediatePropagation(),this.disabled)return;this.touched=!0;const i=n.target;if(this._search=i.value,this.checkForMatches(),this.typeahead)if(this._search){if(this._options=this.options.filter(l=>{var c;return(c=l.fulltext)==null?void 0:c.toLowerCase().includes(this._search.toLowerCase())}),n.inputType!=="deleteContentBackward"){const l=this._options.filter(c=>{var h;return!c.selected&&((h=c.label)==null?void 0:h.toLowerCase().startsWith(this._search.toLowerCase()))});if(l.length>0&&this.inputRef.value&&this.inputRef.value.type!=="hidden"){const c=l[0];c!=null&&c.label&&(i.value=c.label,window.setTimeout(()=>i.setSelectionRange(this._search.length,i.value.length),0),i.selectionDirection="backward")}}}else this._options=[...this.options]}handleFocus(){if(!this.disabled){if(!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!=="hidden"){const n=this.findValueInOptions(this._value[0]);this._editingSingleValue=!0,this.inputRef.value.value=this.displayValueAs==="label"&&n!=null&&n.label?n.label:this._value[0]}this._inputFocus=!0,this._search="",this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(n){var i,l,c,h,m;if(!this.disabled&&((l=(i=n.relatedTarget)==null?void 0:i.closest("pkt-combobox"))==null?void 0:l.id)!==this.id&&((h=(c=n.relatedTarget)==null?void 0:c.closest("pkt-combobox"))==null?void 0:h.id)!==this.id&&((m=n.target)==null?void 0:m.getAttribute("data-focusfix"))!==this.id&&n.relatedTarget!==this.focusRef.value&&n.relatedTarget!==this.inputRef.value&&n.relatedTarget!==this.arrowRef.value&&this._isOptionsOpen){if(this._inputFocus=!1,this._addValueText=null,this._userInfoMessage="",this._search="",this.inputRef.value&&this.inputRef.value.type!=="hidden"&&this.inputRef.value.value!==""){const D=this.inputRef.value.value;!this._value.includes(D)&&!this._options.find(C=>C.label===D)?this.allowUserInput?this.addNewUserValue(D):this.multiple||this.removeValue(this._value[0]):this._value.includes(D)||this.setSelected(D),this.inputRef.value.value=""}this._isOptionsOpen=!1,this.onBlur()}}handleBlur(){this._inputFocus=!1,this._editingSingleValue=!1,this.onBlur()}handleInputClick(n){var i,l;this.disabled||(n.currentTarget&&n.currentTarget!==this.arrowRef.value&&((i=this.inputRef.value)==null?void 0:i.type)!=="hidden"?(l=this.inputRef.value)==null||l.focus():this.handleArrowClick(n))}handleArrowClick(n){var i,l;this.disabled||n instanceof KeyboardEvent&&n.key&&n.key!=="Enter"&&n.key!==" "&&n.key!=="ArrowDown"||(n.stopImmediatePropagation(),n.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen?(i=this.listboxRef.value)==null||i.focusFirstOrSelectedOption():(l=this.arrowRef.value)==null||l.focus())}handleOptionToggled(n){this.toggleValue(n.detail)}handleSearch(n){n.stopPropagation(),this._search=n.detail.toLowerCase()}handleInputKeydown(n){var i,l,c;switch(n.key){case",":case"Enter":n.preventDefault(),this.addValue();break;case"Backspace":!this._search&&((i=this.inputRef.value)==null?void 0:i.type)==="hidden"&&this.removeLastValue(n);break;case"Tab":case"ArrowDown":n.shiftKey||((l=this.listboxRef.value)==null||l.focusFirstOrSelectedOption(),n.preventDefault());break;case"Escape":this._isOptionsOpen=!1,(c=this.arrowRef.value)==null||c.focus(),n.preventDefault();break}}handleTagRemove(n){this.removeSelected(n)}blurInput(){this.inputRef.value&&this.inputRef.value.matches(":focus")&&this.inputRef.value.blur()}checkForMatches(){var n;const i=((n=this.inputRef.value)==null?void 0:n.value)||this._search||"",l=i.trim().toLowerCase()||"";if(!l){!this.multiple&&this._value[0]&&this.removeValue(this._value[0]),this.resetComboboxInput(!1);return}const c=this._value.find(D=>D.toLowerCase()===l),h=this._options.filter(D=>{var C;return((C=D.label)==null?void 0:C.toLowerCase().includes(l))??!1}),m=h.find(D=>{var C;return((C=D.label)==null?void 0:C.toLowerCase())===l||D.value.toLowerCase()===l});switch(!0){case((h.length===0||!m)&&this.allowUserInput):this._addValueText=i,this._userInfoMessage="";break;case(h.length===0&&!this.allowUserInput):this._addValueText=null,this._userInfoMessage="Ingen match i søket";break;case!!c:this._addValueText=null,this._userInfoMessage="Verdien er allerede valgt";break;case h.length>1:this._addValueText=null,this._userInfoMessage="";break;default:this._addValueText=null,this._userInfoMessage=""}}findValueInOptions(n){return this.options.find(i=>i.value===n||i.label===n)||null}findIndexInOptions(n){return this._options.findIndex(i=>i.value===n||i.label===n)}isMaxItemsReached(){const n=this.maxlength!==null&&this._value.length>=this.maxlength;return n?this._maxIsReached=!0:this._maxIsReached=!1,n}toggleValue(n){var i,l;if(this.disabled)return;this.touched=!0,this._userInfoMessage="",this._addValueText=null;const c=((i=this.findValueInOptions(n))==null?void 0:i.value)||null,h=this._value.includes(n||c||""),m=!!c,D=((l=this._options.find(Y=>Y.value===n))==null?void 0:l.disabled)||!1,C=!(n!=null&&n.trim()),T=!this.multiple,$=this.multiple,N=this.isMaxItemsReached();let O=!1,R=!0,I="",K="";D||(!m&&this.allowUserInput&&!C?(this.addNewUserValue(n),I="Ny verdi lagt til",O=!$):!m&&!this.allowUserInput?(T&&this._value[0]&&this.removeValue(this._value[0]),R=!1,O=!0,I="Ingen treff i søket"):h?(this.removeValue(c),O=!0):C&&T?(this.removeAllSelected(),O=!0):T?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(c),O=!1,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&(this.inputRef.value.value="",this.inputRef.value.blur())):$&&!N?(this.setSelected(c),O=!0):$&&N?(this._userInfoMessage="Maks antall valg nådd",R=!1,K=n):(T&&this.removeAllSelected(),this._userInfoMessage="Ingen gyldig verdi valgt",R=!1,O=!0,K=n),this._isOptionsOpen=O,O||window.setTimeout(()=>{var Y;(Y=this.focusRef.value)==null||Y.focus()},0),this._userInfoMessage=I,this._search=K||"",this.resetComboboxInput(R),$&&this.isMaxItemsReached())}setSelected(n){if(!this._value.includes(n)){if(this.multiple&&this.isMaxItemsReached()){this._userInfoMessage="Maks antall valg nådd";return}!this.multiple&&this.removeAllSelected(),this._value=n?[...this._value,n]:this._value,this._options=this._options.map(i=>(i.value===n&&(i.selected=!0),i)),this.resetComboboxInput(!0)}}removeSelected(n){if(!n)return;this._value=this._value.filter(l=>l!==n);const i=this.findValueInOptions(n);i?(i.selected=!1,i.userAdded?(this._options=[...this._options.filter(l=>l.value!==n)],this.options=[...this.options.filter(l=>l.value!==n)]):this._options=[...this._options,i]):!n&&!this.multiple&&(this._options=this._options.map(l=>(l.selected=!1,l)))}addAllOptions(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage="For mange valgt";return}this._value=this._options.map(n=>n.value),this._options=this._options.map(n=>(n.selected=!0,n)),this.requestUpdate()}}removeAllSelected(){this._value=[],this._options=this._options.map(n=>(n.selected=!1,n)),this._options=this._options.filter(n=>!n.userAdded),this.requestUpdate()}addValue(){var n;const i=((n=this.inputRef.value)==null?void 0:n.value.trim())||"";this._search=i,this.toggleValue(i)}removeValue(n){this._value=this.multiple?this._value.filter(i=>i!==n):[],this.removeSelected(n)}addNewUserValue(n){if(!n||n.trim()==="")return;if(!this.multiple)this._value[0]&&this.removeSelected(this._value[0]),this._value=[n],this._isOptionsOpen=!1,this.blurInput();else if(!this.findValueInOptions(n)){if(this.isMaxItemsReached())return;this._value=[...this._value,n]}const i={value:n,label:n,userAdded:!0};this.options=[i,...this.options],this._options=[i,...this._options],this.setSelected(n),this.requestUpdate()}resetComboboxInput(n=!0){if(this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&n)if(this._search="",this.multiple)this.inputRef.value.value="";else{const i=this.findValueInOptions(this._value[0]);window.setTimeout(()=>{!this.inputRef.value||this.inputRef.value.type==="hidden"||(this.inputRef.value.value=this.displayValueAs==="label"&&i!=null&&i.label?i.label:this._value[0]||"")},0),this._userInfoMessage=""}this._options=[...this.options]}removeLastValue(n){if(this._value.length===0)return;n.preventDefault();const i=this._value[this._value.length-1];i&&this.removeSelected(i),this.isMaxItemsReached()}};pa([z({type:String,reflect:!0})],Xr.prototype,"value",2),pa([z({type:Array})],Xr.prototype,"options",2),pa([z({type:Boolean})],Xr.prototype,"allowUserInput",2),pa([z({type:Boolean})],Xr.prototype,"typeahead",2),pa([z({type:Boolean})],Xr.prototype,"includeSearch",2),pa([z({type:String})],Xr.prototype,"searchPlaceholder",2),pa([z({type:Boolean})],Xr.prototype,"multiple",2),pa([z({type:Number})],Xr.prototype,"maxlength",2),pa([z({type:String})],Xr.prototype,"displayValueAs",2),pa([z({type:String})],Xr.prototype,"tagPlacement",2),pa([$n()],Xr.prototype,"_options",2),pa([$n()],Xr.prototype,"_isOptionsOpen",2),pa([$n()],Xr.prototype,"_value",2),pa([$n()],Xr.prototype,"_userInfoMessage",2),pa([$n()],Xr.prototype,"_addValueText",2),pa([$n()],Xr.prototype,"_maxIsReached",2),pa([$n()],Xr.prototype,"_search",2),pa([$n()],Xr.prototype,"_inputFocus",2),pa([$n()],Xr.prototype,"_editingSingleValue",2),Xr=pa([dr("pkt-combobox")],Xr);const E3={i18n:{nb:{contentPresentation:{title:"Oslo kommune bruker informasjonskapsler",description:["For at nettstedet skal fungere og være trygt, bruker Oslo kommune informasjonskapsler. Noen er teknisk nødvendige, mens andre sikrer ulik funksjonalitet.","Godtar du alle informasjonskapsler, tillater du også at vi samler inn data om statistikk og brukeradferd. Da hjelper du oss med å lage et bedre nettsted uten at du trenger å dele noe personlig informasjon med oss."],buttons:{accept:"Godta alle",reject:"Kun nødvendige",settings:"Innstillinger for informasjonskapsler"}},contentSettings:{title:"Innstillinger for informasjonskapsler",description:["Her kan du velge hvilke typer informasjonskapsler du vil tillate. Tillatelsen gjelder i 90 dager. Husk at nødvendige informasjonskapsler ikke kan velges bort.","Du kan når som helst endre innstillingene og finne mer informasjon nederst på nettstedet under «Innstillinger for informasjonskapsler» og «Personvern og informasjonskapsler»."],buttons:{back:"Tilbake",save:"Lagre innstillinger"}}},en:{contentPresentation:{title:"Before you visit Oslo kommune ...",description:["This website uses cookies to make improvements. In this context, we need your consent to measure the traffic on the website in relation to statistics and feedback.","To read more about what we use cookies for, go to our privacy declaration which you will find at the bottom of our websites."],buttons:{accept:"Yes, I accept",reject:"Only necessary",settings:"Go to settings"}},contentSettings:{title:"Her kan du aktivt velge mellom ulike informasjonskapsler",description:["For å lese mer om hva vi bruker informasjonskapsler til gå til vår personvernserklering som du finner på våre nettsider"],buttons:{back:"Back",save:"Save settings"}}}}},V1=globalThis,q1=V1.__cookieEvents||{events:{},on(r,n){this.events[r]||(this.events[r]=[]),this.events[r].push(n)},off(r,n){this.events[r]&&(this.events[r]=this.events[r].filter(i=>i!==n))},once(r,n){const i=l=>{this.off(r,i),n(l)};this.on(r,i)},emit(r,n){this.events[r]&&this.events[r].forEach(i=>i(n))}};V1.__cookieEvents=q1;const T3=q1;var A3=Object.defineProperty,F3=Object.getOwnPropertyDescriptor,Th=(r,n,i,l)=>{for(var c=l>1?void 0:l?F3(n,i):n,h=r.length-1,m;h>=0;h--)(m=r[h])&&(c=(l?m(n,i,c):m(c))||c);return l&&c&&A3(n,i,c),c};let Sd=class extends Hr{constructor(){super(),this.hotjarId=null,this.googleAnalyticsId=null,this.triggerType="button",this.triggerText=null,this.i18nLanguage="nb"}connectedCallback(){super.connectedCallback(),this.triggerText=this.triggerText||E3.i18n[this.i18nLanguage].contentPresentation.buttons.settings,this.googleAnalyticsId&&(window.googleAnalyticsId=this.googleAnalyticsId),this.hotjarId&&(window.hotjarId=this.hotjarId),T3.on("CookieManager.setCookie",n=>{this.emitCookieConsents(n)})}emitCookieConsents(n){const i=JSON.parse(n.value).items.reduce((l,c)=>(l[c.name]=c.consent,l),{});this.dispatchEvent(new CustomEvent("toggle-consent",{detail:i,bubbles:!0,composed:!0}))}firstUpdated(n){if(!document.querySelector("#oslo-consent-script")&&window.location.hostname.toLowerCase().includes("oslo.kommune.no")){window.googleAnalyticsId=this.googleAnalyticsId,window.hotjarId=this.hotjarId;const i=document.createElement("script");i.src="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.js",i.id="oslo-consent-script",i.onload=()=>{this.triggerInit()},document.head.appendChild(i);const l=document.createElement("link");l.href="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.css",l.type="text/css",l.rel="stylesheet",l.id="oslo-consent-styles",document.head.appendChild(l)}}triggerInit(){window.document.dispatchEvent(new Event("DOMContentLoaded",{bubbles:!0,cancelable:!0})),window.cookieBanner.cookieConsent.validateConsentCookie().then(n=>{if(n){const i={value:window.cookieBanner.cookieConsent.getConsentCookie().items};this.emitCookieConsents(i)}})}openModal(n){n.preventDefault(),window.cookieBanner.cookieConsent||this.triggerInit(),setTimeout(()=>window.cookieBanner.openCookieModal())}render(){return this.triggerType==="link"?Se`<a href="#" class="pkt-link" @click=${this.openModal}>${this.triggerText}</a>`:this.triggerType==="footerlink"?Se`<a href="#" class="pkt-footer__link" @click=${this.openModal}>
+        `});return n?i:l}renderValueTag(n){if(!n)return"";switch(this.displayValueAs){case"prefixAndValue":return Se`<span data-focusfix=${this.id}>${n.prefix||""} ${n.value}</span>`;case"value":return Se`<span data-focusfix=${this.id}>${n.value}</span>`;case"label":default:return Se`<span data-focusfix=${this.id}>${n.label||n.value}</span>`}}handleInput(n){if(n.stopPropagation(),n.stopImmediatePropagation(),this.disabled)return;this.touched=!0;const i=n.target;if(this._search=i.value,this.checkForMatches(),this.typeahead)if(this._search){if(this._options=this.options.filter(l=>{var c;return(c=l.fulltext)==null?void 0:c.toLowerCase().includes(this._search.toLowerCase())}),n.inputType!=="deleteContentBackward"){const l=this._options.filter(c=>{var h;return!c.selected&&((h=c.label)==null?void 0:h.toLowerCase().startsWith(this._search.toLowerCase()))});if(l.length>0&&this.inputRef.value&&this.inputRef.value.type!=="hidden"){const c=l[0];c!=null&&c.label&&(i.value=c.label,window.setTimeout(()=>i.setSelectionRange(this._search.length,i.value.length),0),i.selectionDirection="backward")}}}else this._options=[...this.options]}handleFocus(){if(!this.disabled){if(!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!=="hidden"){const n=this.findValueInOptions(this._value[0]);this._editingSingleValue=!0,this.inputRef.value.value=this.displayValueAs==="label"&&n!=null&&n.label?n.label:this._value[0]}this._inputFocus=!0,this._search="",this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(n){var i,l,c,h,m;if(!this.disabled&&((l=(i=n.relatedTarget)==null?void 0:i.closest("pkt-combobox"))==null?void 0:l.id)!==this.id&&((h=(c=n.relatedTarget)==null?void 0:c.closest("pkt-combobox"))==null?void 0:h.id)!==this.id&&((m=n.target)==null?void 0:m.getAttribute("data-focusfix"))!==this.id&&n.relatedTarget!==this.focusRef.value&&n.relatedTarget!==this.inputRef.value&&n.relatedTarget!==this.arrowRef.value&&this._isOptionsOpen){if(this._inputFocus=!1,this._addValueText=null,this._userInfoMessage="",this._search="",this.inputRef.value&&this.inputRef.value.type!=="hidden"&&this.inputRef.value.value!==""){const D=this.inputRef.value.value;!this._value.includes(D)&&!this._options.find(C=>C.label===D)?this.allowUserInput?this.addNewUserValue(D):this.multiple||this.removeValue(this._value[0]):this._value.includes(D)||this.setSelected(D),this.inputRef.value.value=""}this._isOptionsOpen=!1,this.onBlur()}}handleBlur(){this._inputFocus=!1,this._editingSingleValue=!1,this.onBlur()}handleInputClick(n){var i,l;this.disabled||(n.currentTarget&&n.currentTarget!==this.arrowRef.value&&((i=this.inputRef.value)==null?void 0:i.type)!=="hidden"?(l=this.inputRef.value)==null||l.focus():this.handleArrowClick(n))}handleArrowClick(n){var i,l;this.disabled||n instanceof KeyboardEvent&&n.key&&n.key!=="Enter"&&n.key!==" "&&n.key!=="ArrowDown"||(n.stopImmediatePropagation(),n.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen?(i=this.listboxRef.value)==null||i.focusFirstOrSelectedOption():(l=this.arrowRef.value)==null||l.focus())}handleOptionToggled(n){this.toggleValue(n.detail)}handleSearch(n){n.stopPropagation(),this._search=n.detail.toLowerCase()}handleInputKeydown(n){var i,l,c;switch(n.key){case",":case"Enter":n.preventDefault(),this.addValue();break;case"Backspace":!this._search&&((i=this.inputRef.value)==null?void 0:i.type)==="hidden"&&this.removeLastValue(n);break;case"Tab":case"ArrowDown":n.shiftKey||((l=this.listboxRef.value)==null||l.focusFirstOrSelectedOption(),n.preventDefault());break;case"Escape":this._isOptionsOpen=!1,(c=this.arrowRef.value)==null||c.focus(),n.preventDefault();break}}handleTagRemove(n){this.removeSelected(n)}blurInput(){this.inputRef.value&&this.inputRef.value.matches(":focus")&&this.inputRef.value.blur()}checkForMatches(){var n;const i=((n=this.inputRef.value)==null?void 0:n.value)||this._search||"",l=i.trim().toLowerCase()||"";if(!l){!this.multiple&&this._value[0]&&this.removeValue(this._value[0]),this.resetComboboxInput(!1);return}const c=this._value.find(D=>D.toLowerCase()===l),h=this._options.filter(D=>{var C;return((C=D.label)==null?void 0:C.toLowerCase().includes(l))??!1}),m=h.find(D=>{var C;return((C=D.label)==null?void 0:C.toLowerCase())===l||D.value.toLowerCase()===l});switch(!0){case((h.length===0||!m)&&this.allowUserInput):this._addValueText=i,this._userInfoMessage="";break;case(h.length===0&&!this.allowUserInput):this._addValueText=null,this._userInfoMessage="Ingen match i søket";break;case!!c:this._addValueText=null,this._userInfoMessage="Verdien er allerede valgt";break;case h.length>1:this._addValueText=null,this._userInfoMessage="";break;default:this._addValueText=null,this._userInfoMessage=""}}findValueInOptions(n){return this.options.find(i=>i.value===n||i.label===n)||null}findIndexInOptions(n){return this._options.findIndex(i=>i.value===n||i.label===n)}isMaxItemsReached(){const n=this.maxlength!==null&&this._value.length>=this.maxlength;return n?this._maxIsReached=!0:this._maxIsReached=!1,n}toggleValue(n){var i,l;if(this.disabled)return;this.touched=!0,this._userInfoMessage="",this._addValueText=null;const c=((i=this.findValueInOptions(n))==null?void 0:i.value)||null,h=this._value.includes(n||c||""),m=!!c,D=((l=this._options.find(Y=>Y.value===n))==null?void 0:l.disabled)||!1,C=!(n!=null&&n.trim()),T=!this.multiple,$=this.multiple,N=this.isMaxItemsReached();let O=!1,R=!0,I="",K="";D||(!m&&this.allowUserInput&&!C?(this.addNewUserValue(n),I="Ny verdi lagt til",O=!$):!m&&!this.allowUserInput?(T&&this._value[0]&&this.removeValue(this._value[0]),R=!1,O=!0,I="Ingen treff i søket"):h?(this.removeValue(c),O=!0):C&&T?(this.removeAllSelected(),O=!0):T?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(c),O=!1,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&(this.inputRef.value.value="",this.inputRef.value.blur())):$&&!N?(this.setSelected(c),O=!0):$&&N?(this._userInfoMessage="Maks antall valg nådd",R=!1,K=n):(T&&this.removeAllSelected(),this._userInfoMessage="Ingen gyldig verdi valgt",R=!1,O=!0,K=n),this._isOptionsOpen=O,O||window.setTimeout(()=>{var Y;(Y=this.focusRef.value)==null||Y.focus()},0),this._userInfoMessage=I,this._search=K||"",this.resetComboboxInput(R),$&&this.isMaxItemsReached())}setSelected(n){if(!this._value.includes(n)){if(this.multiple&&this.isMaxItemsReached()){this._userInfoMessage="Maks antall valg nådd";return}!this.multiple&&this.removeAllSelected(),this._value=n?[...this._value,n]:this._value,this._options=this._options.map(i=>(i.value===n&&(i.selected=!0),i)),this.resetComboboxInput(!0)}}removeSelected(n){if(!n)return;this._value=this._value.filter(l=>l!==n);const i=this.findValueInOptions(n);i?(i.selected=!1,i.userAdded?(this._options=[...this._options.filter(l=>l.value!==n)],this.options=[...this.options.filter(l=>l.value!==n)]):this._options=[...this._options,i]):!n&&!this.multiple&&(this._options=this._options.map(l=>(l.selected=!1,l)))}addAllOptions(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage="For mange valgt";return}this._value=this._options.map(n=>n.value),this._options=this._options.map(n=>(n.selected=!0,n)),this.requestUpdate()}}removeAllSelected(){this._value=[],this._options=this._options.map(n=>(n.selected=!1,n)),this._options=this._options.filter(n=>!n.userAdded),this.requestUpdate()}addValue(){var n;const i=((n=this.inputRef.value)==null?void 0:n.value.trim())||"";this._search=i,this.toggleValue(i)}removeValue(n){this._value=this.multiple?this._value.filter(i=>i!==n):[],this.removeSelected(n)}addNewUserValue(n){if(!n||n.trim()==="")return;if(!this.multiple)this._value[0]&&this.removeSelected(this._value[0]),this._value=[n],this._isOptionsOpen=!1,this.blurInput();else if(!this.findValueInOptions(n)){if(this.isMaxItemsReached())return;this._value=[...this._value,n]}const i={value:n,label:n,userAdded:!0};this.options=[i,...this.options],this._options=[i,...this._options],this.setSelected(n),this.requestUpdate()}resetComboboxInput(n=!0){if(this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&n)if(this._search="",this.multiple)this.inputRef.value.value="";else{const i=this.findValueInOptions(this._value[0]);window.setTimeout(()=>{!this.inputRef.value||this.inputRef.value.type==="hidden"||(this.inputRef.value.value=this.displayValueAs==="label"&&i!=null&&i.label?i.label:this._value[0]||"")},0),this._userInfoMessage=""}this._options=[...this.options]}removeLastValue(n){if(this._value.length===0)return;n.preventDefault();const i=this._value[this._value.length-1];i&&this.removeSelected(i),this.isMaxItemsReached()}};pa([z({type:String,reflect:!0})],Xr.prototype,"value",2),pa([z({type:Array})],Xr.prototype,"options",2),pa([z({type:Boolean})],Xr.prototype,"allowUserInput",2),pa([z({type:Boolean})],Xr.prototype,"typeahead",2),pa([z({type:Boolean})],Xr.prototype,"includeSearch",2),pa([z({type:String})],Xr.prototype,"searchPlaceholder",2),pa([z({type:Boolean})],Xr.prototype,"multiple",2),pa([z({type:Number})],Xr.prototype,"maxlength",2),pa([z({type:String})],Xr.prototype,"displayValueAs",2),pa([z({type:String})],Xr.prototype,"tagPlacement",2),pa([$n()],Xr.prototype,"_options",2),pa([$n()],Xr.prototype,"_isOptionsOpen",2),pa([$n()],Xr.prototype,"_value",2),pa([$n()],Xr.prototype,"_userInfoMessage",2),pa([$n()],Xr.prototype,"_addValueText",2),pa([$n()],Xr.prototype,"_maxIsReached",2),pa([$n()],Xr.prototype,"_search",2),pa([$n()],Xr.prototype,"_inputFocus",2),pa([$n()],Xr.prototype,"_editingSingleValue",2),Xr=pa([dr("pkt-combobox")],Xr);const E3={i18n:{nb:{contentPresentation:{title:"Oslo kommune bruker informasjonskapsler",description:["For at nettstedet skal fungere og være trygt, bruker Oslo kommune informasjonskapsler. Noen er teknisk nødvendige, mens andre sikrer ulik funksjonalitet.","Godtar du alle informasjonskapsler, tillater du også at vi samler inn data om statistikk og brukeradferd. Da hjelper du oss med å lage et bedre nettsted uten at du trenger å dele noe personlig informasjon med oss."],buttons:{accept:"Godta alle",reject:"Kun nødvendige",settings:"Innstillinger for informasjonskapsler"}},contentSettings:{title:"Innstillinger for informasjonskapsler",description:["Her kan du velge hvilke typer informasjonskapsler du vil tillate. Tillatelsen gjelder i 90 dager. Husk at nødvendige informasjonskapsler ikke kan velges bort.","Du kan når som helst endre innstillingene og finne mer informasjon nederst på nettstedet under «Innstillinger for informasjonskapsler» og «Personvern og informasjonskapsler»."],buttons:{back:"Tilbake",save:"Lagre innstillinger"}}},en:{contentPresentation:{title:"Before you visit Oslo kommune ...",description:["This website uses cookies to make improvements. In this context, we need your consent to measure the traffic on the website in relation to statistics and feedback.","To read more about what we use cookies for, go to our privacy declaration which you will find at the bottom of our websites."],buttons:{accept:"Yes, I accept",reject:"Only necessary",settings:"Go to settings"}},contentSettings:{title:"Her kan du aktivt velge mellom ulike informasjonskapsler",description:["For å lese mer om hva vi bruker informasjonskapsler til gå til vår personvernserklering som du finner på våre nettsider"],buttons:{back:"Back",save:"Save settings"}}}}},V1=globalThis,q1=V1.__cookieEvents||{events:{},on(r,n){this.events[r]||(this.events[r]=[]),this.events[r].push(n)},off(r,n){this.events[r]&&(this.events[r]=this.events[r].filter(i=>i!==n))},once(r,n){const i=l=>{this.off(r,i),n(l)};this.on(r,i)},emit(r,n){this.events[r]&&this.events[r].forEach(i=>i(n))}};V1.__cookieEvents=q1;const T3=q1;var A3=Object.defineProperty,F3=Object.getOwnPropertyDescriptor,Th=(r,n,i,l)=>{for(var c=l>1?void 0:l?F3(n,i):n,h=r.length-1,m;h>=0;h--)(m=r[h])&&(c=(l?m(n,i,c):m(c))||c);return l&&c&&A3(n,i,c),c};let Sd=class extends Hr{constructor(){super(),this.hotjarId=null,this.googleAnalyticsId=null,this.triggerType="button",this.triggerText=null,this.i18nLanguage="nb"}connectedCallback(){super.connectedCallback(),this.triggerText=this.triggerText||E3.i18n[this.i18nLanguage].contentPresentation.buttons.settings,this.googleAnalyticsId&&(window.googleAnalyticsId=this.googleAnalyticsId),this.hotjarId&&(window.hotjarId=this.hotjarId),T3.on("CookieManager.setCookie",n=>{this.emitCookieConsents(n)})}returnJsonOrObject(n){let i;try{i=JSON.parse(n)}catch{i=n}return i}emitCookieConsents(n){const i=this.returnJsonOrObject(n.value).items.reduce((l,c)=>(l[c.name]=c.consent,l),{});this.dispatchEvent(new CustomEvent("toggle-consent",{detail:i,bubbles:!0,composed:!0}))}firstUpdated(n){if(!document.querySelector("#oslo-consent-script")&&window.location.hostname.toLowerCase().includes("oslo.kommune.no")){window.googleAnalyticsId=this.googleAnalyticsId,window.hotjarId=this.hotjarId;const i=document.createElement("script");i.src="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.js",i.id="oslo-consent-script",i.onload=()=>{this.triggerInit()},document.head.appendChild(i);const l=document.createElement("link");l.href="https://cdn.web.oslo.kommune.no/cb/cb-v1.0.0.css",l.type="text/css",l.rel="stylesheet",l.id="oslo-consent-styles",document.head.appendChild(l)}}triggerInit(){window.document.dispatchEvent(new Event("DOMContentLoaded",{bubbles:!0,cancelable:!0})),window.cookieBanner.cookieConsent.validateConsentCookie().then(n=>{if(n){const i={value:window.cookieBanner.cookieConsent.getConsentCookie()};this.emitCookieConsents(i)}})}openModal(n){n.preventDefault(),window.cookieBanner.cookieConsent||this.triggerInit(),setTimeout(()=>window.cookieBanner.openCookieModal())}render(){return this.triggerType==="link"?Se`<a href="#" class="pkt-link" @click=${this.openModal}>${this.triggerText}</a>`:this.triggerType==="footerlink"?Se`<a href="#" class="pkt-footer__link" @click=${this.openModal}>
         <pkt-icon name="chevron-right" class="pkt-footer__link-icon"></pkt-icon>
         ${this.triggerText}
       </a>`:this.triggerType==="icon"?Se`<pkt-button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.37.5",
+  "version": "12.37.7",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^12.37.5",
+    "@oslokommune/punkt-elements": "^12.37.6",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -112,5 +112,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "1615cdd90bff58dfa8c9a76cf3a22e88ae77c41c"
+  "gitHead": "5f647c136479cb172fa233080b8bef8c33f948e4"
 }

package/src/components/accordion/Accordion.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
 import { createComponent } from '@lit/react'
 import React, { ForwardRefExoticComponent, LegacyRef } from 'react'

package/src/components/accordion/AccordionItem.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardRefExoticComponent, LegacyRef, ReactElement, forwardRef } from 'react'
 import { PktElConstructor, PktElType, PktEventWithTarget } from '@/interfaces/IPktElements'
 import { createComponent, EventName } from '@lit/react'

package/src/components/alert/Alert.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktAlert as PktElAlert } from '@oslokommune/punkt-elements'

package/src/components/backlink/BackLink.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardRefExoticComponent, LegacyRef, AnchorHTMLAttributes, MouseEventHandler } from 'react'
 import { createComponent } from '@lit/react'
 import { PktBackLink as PktElBackLink } from '@oslokommune/punkt-elements'

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef, forwardRef } from 'react'
 import { Link } from 'react-router-dom'
 

package/src/components/button/Button.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   LegacyRef,

package/src/components/card/Card.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ReactElement, forwardRef, ReactNode, ForwardedRef } from 'react'
 import { createComponent } from '@lit/react'
 import { PktCard as PktElCard } from '@oslokommune/punkt-elements'

package/src/components/checkbox/Checkbox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ChangeEventHandler,
   FocusEventHandler,

package/src/components/combobox/Combobox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   ReactNode,

package/src/components/consent/Consent.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardRefExoticComponent, LegacyRef } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktConsent as PktElConsent } from '@oslokommune/punkt-elements'

package/src/components/datepicker/Datepicker.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   LegacyRef,

package/src/components/footer/Footer.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 
 import { PktIcon } from '../icon/Icon'

package/src/components/footerSimple/FooterSimple.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 
 import { PktIcon } from '../icon/Icon'

package/src/components/header/Header.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import React, { ForwardedRef, forwardRef, HTMLAttributes } from 'react'
 

package/src/components/heading/Heading.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { createComponent } from '@lit/react'
 import { FC, forwardRef } from 'react'
 import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'

package/src/components/helptext/Helptext.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardRefExoticComponent, ReactNode, LegacyRef, FC, forwardRef, HTMLAttributes } from 'react'
 import { PktHelptext as PktElHelptext } from '@oslokommune/punkt-elements'
 import { createComponent, EventName } from '@lit/react'

package/src/components/icon/Icon.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC } from 'react'
 
 import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'

package/src/components/input/Input.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef } from 'react'
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {

package/src/components/inputwrapper/InputWrapper.tsx

@@ -1,12 +1,6 @@
-import React, {
-  FC,
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  LegacyRef,
-  ReactElement,
-  ReactNode,
-} from 'react'
+'use client'
+
+import React, { FC, forwardRef, ForwardRefExoticComponent, LegacyRef, ReactElement, ReactNode } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktInputWrapper as PktEl } from '@oslokommune/punkt-elements'
 import type { PktElType } from '@/interfaces/IPktElements'

package/src/components/link/Link.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktLink as PktElLink } from '@oslokommune/punkt-elements'

package/src/components/linkcard/LinkCard.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
 import { PktLinkCard as PktElLinkCard } from '@oslokommune/punkt-elements'

package/src/components/loader/Loader.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, ForwardedRef, FC, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
 import { PktLoader as PktElLoader } from '@oslokommune/punkt-elements'

package/src/components/messagebox/Messagebox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktMessagebox as PktElMessagebox } from '@oslokommune/punkt-elements'

package/src/components/modal/Modal.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
 import { PktModal as PktElModal } from '@oslokommune/punkt-elements'

package/src/components/preview/Preview.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { cloneElement, isValidElement, ReactNode, useRef, useState } from 'react'
 import reactElementToJSXString from 'react-element-to-jsx-string'
 import * as prettier from 'prettier/standalone'

package/src/components/preview/PreviewPropEditor.tsx

@@ -1,4 +1,6 @@
-import { ChangeEvent, FC } from 'react'
+'use client'
+
+import { FC } from 'react'
 import { PktCheckbox } from '../checkbox/Checkbox'
 import { PktDatepicker } from '../datepicker/Datepicker'
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'

package/src/components/preview/PreviewSpecs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 import { PktTable } from '../table/Table'
 import { PktTableHeader } from '../table/TableHeader'

package/src/components/progressbar/Progressbar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, ForwardedRef, ReactElement } from 'react'
 import { createComponent } from '@lit/react'
 import { PktProgressbar as PktElProgressbar } from '@oslokommune/punkt-elements'

package/src/components/radio/RadioButton.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ChangeEventHandler,
   FocusEventHandler,
@@ -19,7 +21,7 @@ export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
   defaultChecked?: boolean
   disabled?: boolean
   value?: string
-  checkHelptext?: string | React.ReactNode | React.ReactNode[]
+  checkHelptext?: string | ReactNode | ReactNode[]
 
   ref?: ForwardedRef<HTMLInputElement>
   onChange?: ChangeEventHandler<HTMLInputElement>

package/src/components/searchinput/SearchInput.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ChangeEvent, forwardRef, HTMLProps, ReactNode } from 'react'
 
 import { PktButton } from '../button/Button'
@@ -151,7 +153,8 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
                     }`,
                     type: suggestion.onClick ? 'button' : undefined,
                     onClick: () => handleSuggestionClick(suggestion.onClick, index),
-                    onKeyUp: (event: { key: string }) => event.key === "Enter" && handleSuggestionClick(suggestion.onClick, index)
+                    onKeyUp: (event: { key: string }) =>
+                      event.key === 'Enter' && handleSuggestionClick(suggestion.onClick, index),
                   },
                   <>
                     {suggestion.title && <h3 className="pkt-searchinput__suggestion-title">{suggestion.title}</h3>}

package/src/components/select/Select.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   ReactNode,

package/src/components/stepper/Step.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import cn from 'classnames'
 
 export type TStepStatus = 'completed' | 'incomplete' | 'current'

package/src/components/stepper/Stepper.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { ReactElement, Ref, forwardRef } from 'react'
 import { IPktStep } from './Step'
 import classNames from 'classnames'

package/src/components/table/Table.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableBody.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableData.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 
 interface TableDataProps {

package/src/components/table/TableDataCell.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableHeader.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableHeaderCell.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableRow.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/tabs/Tabs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, Ref, useRef, useEffect, KeyboardEvent, Fragment } from 'react'
 import { PktIcon } from '../icon/Icon'
 import { PktTag } from '../tag/Tag'

package/src/components/tag/Tag.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktTag as PktElTag } from '@oslokommune/punkt-elements'

package/src/components/textarea/Textarea.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   LegacyRef,

package/src/components/textinput/Textinput.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   ForwardRefExoticComponent,
   LegacyRef,

package/src/components/childrenWrapper/childrenWrapper.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-interface childrenWrapperProps {
-  wrapperType?: 'div' | 'span'; 
-  children?: React.ReactNode | React.ReactNode[];
-}
-
-export function childrenWrapper<P>(
-  Component: React.ComponentType<P>, 
-  defaultWrapper: 'div' | 'span' = 'div'
-): React.FC<P & childrenWrapperProps> { return ({ wrapperType = defaultWrapper, children, ...props }) => {
-    const Tag = wrapperType;
-
-    return (
-      <Component {...(props as P)}>
-        <Tag className="pkt-contents">{children}</Tag>
-      </Component>
-    );
-  };
-}