@oslokommune/punkt-react 12.6.0 → 12.6.2

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.6.2](https://github.com/oslokommune/punkt/compare/12.6.1...12.6.2) (2024-11-05)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* Legg til støtte for `style` i React wrapper (#1996). 
+
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.6.0](https://github.com/oslokommune/punkt/compare/12.5.3...12.6.0) (2024-10-31)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -553,6 +553,7 @@ export declare const PktDatepicker: FC<IPktDatepicker>;
 
 declare interface PktElType {
     className?: string;
+    style?: default_2.CSSProperties;
     children?: default_2.ReactNode | default_2.ReactNode[];
     ref?: default_2.RefObject<HTMLElement> | default_2.LegacyRef<HTMLElement>;
     id?: string;

package/dist/punkt-react.es.js

@@ -1946,6 +1946,8 @@ let Ht = class extends Pt {
     super(), this.defaultSlot = Ct(), this.compact = si.props.compact.default, this.title = "", this.skin = si.props.skin.default, this.ariaLive = si.props.ariaLive.default, this.closeAlert = si.props.closeAlert.default, this.date = null, this._isClosed = !1, this.close = (t) => {
       this._isClosed = !0, this.dispatchEvent(
         new CustomEvent("close", { detail: { origin: t }, bubbles: !0, composed: !0 })
+      ), this.dispatchEvent(
+        new CustomEvent("on-close", { detail: { origin: t }, bubbles: !0, composed: !0 })
       );
     }, this.slotController = new Gn(this, this.defaultSlot), this._isClosed = !1;
   }
@@ -2685,11 +2687,9 @@ let Lt = class extends Pt {
   constructor() {
     super(), this.defaultSlot = Ct(), this.closeTag = lr.props.closeTag.default, this.size = lr.props.size.default, this.skin = lr.props.skin.default, this.textStyle = lr.props.textStyle.default, this.iconName = void 0, this.type = lr.props.type.default, this.ariaLabel = lr.props.ariaLabel.default, this._isClosed = !1, this.close = (t) => {
       this._isClosed = !0, this.dispatchEvent(
-        new CustomEvent("onClose", {
-          detail: { origin: t },
-          bubbles: !0,
-          composed: !0
-        })
+        new CustomEvent("close", { detail: { origin: t }, bubbles: !0, composed: !0 })
+      ), this.dispatchEvent(
+        new CustomEvent("on-close", { detail: { origin: t }, bubbles: !0, composed: !0 })
       );
     }, this.slotController = new Gn(this, this.defaultSlot), this._isClosed = !1;
   }
@@ -5244,7 +5244,7 @@ var W2 = Object.defineProperty, z2 = Object.getOwnPropertyDescriptor, Sr = (e, t
 let bn = class extends Pt {
   constructor() {
     super(), this.defaultSlot = Ct(), this.closable = Ps.props.closable.default, this.compact = Ps.props.compact.default, this.title = "", this.skin = Ps.props.skin.default, this._isClosed = !1, this.close = (e) => {
-      this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", { detail: { origin: e }, bubbles: !0 }));
+      this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", { detail: { origin: e }, bubbles: !0 })), this.dispatchEvent(new CustomEvent("on-close", { detail: { origin: e }, bubbles: !0 }));
     }, this.slotController = new Gn(this, this.defaultSlot), this._isClosed = !1;
   }
   render() {

package/dist/punkt-react.umd.js

@@ -124,7 +124,7 @@ React keys must be passed directly to JSX without using spread:
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */class ns extends Oa{}ns.directiveName="unsafeSVG",ns.resultType=2;const Pl=Mr(ns);var Rh=Object.defineProperty,qh=Object.getOwnPropertyDescriptor,Hr=(e,t,n,r)=>{for(var i=r>1?void 0:r?qh(t,n):t,o=e.length-1,u;o>=0;o--)(u=e[o])&&(i=(r?u(t,n,i):u(i))||i);return r&&i&&Rh(t,n,i),i};window.pktFetch=window.pktFetch===void 0?fetch:window.pktFetch,window.pktIconPath=window.pktIconPath||"https://punkt-cdn.oslo.kommune.no/12.6/icons/";const Hh=e=>new Promise(t=>setTimeout(t,e)),Ma='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>',rs={},Uh=async(e,t)=>{let n=0;for(;rs[t+e+".svg"]==="fetching"&&(n++,!(n>50));)await Hh(50);return localStorage.getItem(t+e+".svg")?Promise.resolve(localStorage.getItem(t+e+".svg")):typeof window.pktFetch=="function"?(rs[t+e+".svg"]="fetching",Promise.resolve(window.pktFetch(t+e+".svg").then(r=>r.ok?r.text():(console.error("Missing icon: "+t+e+".svg"),Ma)).then(r=>(r!==Ma&&localStorage.setItem(t+e+".svg",r),rs[t+e+".svg"]="fetched",r)))):Promise.resolve(Ma)};let Nn=class extends Bt{constructor(){super(...arguments),this.path=window.pktIconPath,this.name="",this.icon=Pl(Ma),this._updatedProps=[]}connectedCallback(){super.connectedCallback(),this.classList.add("pkt-icon")}async attributeChangedCallback(t,n,r){super.attributeChangedCallback(t,n,r),(t==="name"||t==="path")&&this.getIcon(this.name)}async updated(t){super.updated(t),(t.has("name")||t.has("path"))&&this.getIcon(this.name)}async getIcon(t=""){this._updatedProps.length>0?(this.path||(this.path,window.pktIconPath),this.icon=Pl(await Uh(this.name||"",this.path).then(n=>n)),this._updatedProps=[]):this._updatedProps.includes(t)||this._updatedProps.push(t)}render(){return K`${this.name&&this.icon}`}};Hr([O({type:String,reflect:!1})],Nn.prototype,"path",2),Hr([O({type:String,reflect:!0})],Nn.prototype,"name",2),Hr([O({type:SVGElement})],Nn.prototype,"icon",2),Hr([O({type:Array,noAccessor:!0})],Nn.prototype,"_updatedProps",2),Nn=Hr([Ot("pkt-icon")],Nn);const Wh="pkt-alert",Vh=!0,zh={onClose:{description:"React: Klikk-event for 'Lukk'-knappen"},close:{description:"Vue: Klikk-event for 'Lukk'-knappen"}},Gh={title:{name:"Tittel",description:"Tittelen som vises øverst i på meldingen",type:"string"},skin:{name:"Utseende",description:"Hvordan type melding er dette?",type:["info","success","warning","error"],default:"info"},date:{name:"Sist oppdatert",description:"Dato som vises nederst i på meldingen",type:"string"},ariaLive:{name:"aria-live",description:"Hvordan skal skjermleseren lese opp meldingen?",type:["off","polite","assertive"],default:"polite"},compact:{name:"Kompakt",description:"Gjør meldingen mindre",type:"boolean",default:!1},closeAlert:{name:"Vis 'Lukk'-knapp",description:"Viser 'Lukk'-knappen",type:"boolean",default:!1}},Yh={default:{description:"Innholdet i meldingen"}},Ra={name:Wh,"css-class":"pkt-alert","dark-mode":!0,isElement:Vh,events:zh,props:Gh,slots:Yh};var Kh=Object.defineProperty,Jh=Object.getOwnPropertyDescriptor,pn=(e,t,n,r)=>{for(var i=r>1?void 0:r?Jh(t,n):t,o=e.length-1,u;o>=0;o--)(u=e[o])&&(i=(r?u(t,n,i):u(i))||i);return r&&i&&Kh(t,n,i),i};let It=class extends Bt{constructor(){super(),this.defaultSlot=vt(),this.compact=Ra.props.compact.default,this.title="",this.skin=Ra.props.skin.default,this.ariaLive=Ra.props.ariaLive.default,this.closeAlert=Ra.props.closeAlert.default,this.date=null,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0,composed:!0}))},this.slotController=new Tn(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed};return K`
+ */class ns extends Oa{}ns.directiveName="unsafeSVG",ns.resultType=2;const Pl=Mr(ns);var Rh=Object.defineProperty,qh=Object.getOwnPropertyDescriptor,Hr=(e,t,n,r)=>{for(var i=r>1?void 0:r?qh(t,n):t,o=e.length-1,u;o>=0;o--)(u=e[o])&&(i=(r?u(t,n,i):u(i))||i);return r&&i&&Rh(t,n,i),i};window.pktFetch=window.pktFetch===void 0?fetch:window.pktFetch,window.pktIconPath=window.pktIconPath||"https://punkt-cdn.oslo.kommune.no/12.6/icons/";const Hh=e=>new Promise(t=>setTimeout(t,e)),Ma='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>',rs={},Uh=async(e,t)=>{let n=0;for(;rs[t+e+".svg"]==="fetching"&&(n++,!(n>50));)await Hh(50);return localStorage.getItem(t+e+".svg")?Promise.resolve(localStorage.getItem(t+e+".svg")):typeof window.pktFetch=="function"?(rs[t+e+".svg"]="fetching",Promise.resolve(window.pktFetch(t+e+".svg").then(r=>r.ok?r.text():(console.error("Missing icon: "+t+e+".svg"),Ma)).then(r=>(r!==Ma&&localStorage.setItem(t+e+".svg",r),rs[t+e+".svg"]="fetched",r)))):Promise.resolve(Ma)};let Nn=class extends Bt{constructor(){super(...arguments),this.path=window.pktIconPath,this.name="",this.icon=Pl(Ma),this._updatedProps=[]}connectedCallback(){super.connectedCallback(),this.classList.add("pkt-icon")}async attributeChangedCallback(t,n,r){super.attributeChangedCallback(t,n,r),(t==="name"||t==="path")&&this.getIcon(this.name)}async updated(t){super.updated(t),(t.has("name")||t.has("path"))&&this.getIcon(this.name)}async getIcon(t=""){this._updatedProps.length>0?(this.path||(this.path,window.pktIconPath),this.icon=Pl(await Uh(this.name||"",this.path).then(n=>n)),this._updatedProps=[]):this._updatedProps.includes(t)||this._updatedProps.push(t)}render(){return K`${this.name&&this.icon}`}};Hr([O({type:String,reflect:!1})],Nn.prototype,"path",2),Hr([O({type:String,reflect:!0})],Nn.prototype,"name",2),Hr([O({type:SVGElement})],Nn.prototype,"icon",2),Hr([O({type:Array,noAccessor:!0})],Nn.prototype,"_updatedProps",2),Nn=Hr([Ot("pkt-icon")],Nn);const Wh="pkt-alert",Vh=!0,zh={onClose:{description:"React: Klikk-event for 'Lukk'-knappen"},close:{description:"Vue: Klikk-event for 'Lukk'-knappen"}},Gh={title:{name:"Tittel",description:"Tittelen som vises øverst i på meldingen",type:"string"},skin:{name:"Utseende",description:"Hvordan type melding er dette?",type:["info","success","warning","error"],default:"info"},date:{name:"Sist oppdatert",description:"Dato som vises nederst i på meldingen",type:"string"},ariaLive:{name:"aria-live",description:"Hvordan skal skjermleseren lese opp meldingen?",type:["off","polite","assertive"],default:"polite"},compact:{name:"Kompakt",description:"Gjør meldingen mindre",type:"boolean",default:!1},closeAlert:{name:"Vis 'Lukk'-knapp",description:"Viser 'Lukk'-knappen",type:"boolean",default:!1}},Yh={default:{description:"Innholdet i meldingen"}},Ra={name:Wh,"css-class":"pkt-alert","dark-mode":!0,isElement:Vh,events:zh,props:Gh,slots:Yh};var Kh=Object.defineProperty,Jh=Object.getOwnPropertyDescriptor,pn=(e,t,n,r)=>{for(var i=r>1?void 0:r?Jh(t,n):t,o=e.length-1,u;o>=0;o--)(u=e[o])&&(i=(r?u(t,n,i):u(i))||i);return r&&i&&Kh(t,n,i),i};let It=class extends Bt{constructor(){super(),this.defaultSlot=vt(),this.compact=Ra.props.compact.default,this.title="",this.skin=Ra.props.skin.default,this.ariaLive=Ra.props.ariaLive.default,this.closeAlert=Ra.props.closeAlert.default,this.date=null,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0,composed:!0}))},this.slotController=new Tn(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-alert":!0,"pkt-alert--compact":this.compact,[`pkt-alert--${this.skin}`]:this.skin,"pkt-hide":this._isClosed};return K`
       <div class=${He(t)} aria-live=${this.ariaLive}>
         <pkt-icon
           class="pkt-alert__icon"
@@ -243,7 +243,7 @@ React keys must be passed directly to JSX without using spread:
               </div>
             </td>`),d++):(v.push(this.renderDayView(d,t,y)),d++);h.push(K`<tr class="pkt-cal-week-row" role="row">
           ${v}
-        </tr>`)}return h}isExcluded(t,n){return this.excludeweekdays.includes(t.toString())||this.earliest&&n<new Date(this.earliest)||this.latest&&n>new Date(this.latest)?!0:this.excludedates.some(r=>typeof r=="string"?r===this.formatISODate(n):r.toDateString()===n.toDateString())}formatISODate(t){return t.toISOString().split("T")[0]}isPrevMonthAllowed(){const t=new Date(this.year,this.month,0,12);return!(this.earliest&&new Date(this.earliest)>t)}prevMonth(){const t=this.month===0?11:this.month-1,n=this.month===0?this.year-1:this.year;this.changeMonth(n,t)}isNextMonthAllowed(){const t=new Date(this.year,this.month===11?0:this.month+1,1,12);return!(this.latest&&new Date(this.latest)<t)}nextMonth(){const t=this.month===11?0:this.month+1,n=this.month===11?this.year+1:this.year;this.changeMonth(n,t)}changeMonth(t,n){this.year=t,this.month=n,this.tabIndexSet=0,this.focusedDate=null,this.selectableDates=[],this.requestUpdate()}isInRange(t){if(this.range&&this.selected.length===2){if(t>new Date(this.selected[0])&&t<new Date(this.selected[1]))return!0}else if(this.range&&this.selected.length===1&&this.rangeHovered&&t>new Date(this.selected[0])&&t<this.rangeHovered)return!0;return!1}isRangeAllowed(t){let n=!0;if(this._selected.length===1){const r=as({start:this._selected[0],end:t});if(Array.isArray(r)&&r.length)for(let i=0;i<r.length;i++)this.excludedates.forEach(o=>{o>this._selected[0]&&o<t&&(n=!1)}),this.excludeweekdays.includes(nf(r[i]).toString())&&(n=!1)}return n}emptySelected(){this.selected=[],this._selected=[],this.inRange={}}addToSelected(t){this.selected.includes(this.formatISODate(t))||(this.selected=[...this.selected,this.formatISODate(t)],this._selected=[...this._selected,t],this.range&&this.selected.length===2&&this.close())}removeFromSelected(t){if(this.selected.length===1)this.emptySelected();else{const n=this.selected.indexOf(this.formatISODate(t)),r=[...this.selected],i=[...this._selected];r.splice(n,1),i.splice(n,1),this.selected=r,this._selected=i}}toggleSelected(t){const n=this.formatISODate(t);this.selected.includes(n)?this.removeFromSelected(t):this.maxMultiple&&this.selected.length>=this.maxMultiple||this.addToSelected(t)}handleRangeSelect(t){const n=this.formatISODate(t);return this.selected.includes(n)?this.selected.indexOf(n)===0?this.emptySelected():this.removeFromSelected(t):this.selected.length>1?(this.emptySelected(),this.addToSelected(t)):(this.selected.length===1&&!this.isRangeAllowed(t)&&this.emptySelected(),this.selected.length===1&&this._selected[0]>t&&this.emptySelected(),this.addToSelected(t)),Promise.resolve()}handleRangeHover(t){if(this.range&&this._selected.length===1&&this.isRangeAllowed(t)&&this._selected[0]<t){this.rangeHovered=t,this.inRange={};const n=as({start:this._selected[0],end:t});if(Array.isArray(n)&&n.length)for(let r=0;r<n.length;r++)this.inRange[this.formatISODate(n[r])]=this.isInRange(n[r])}else this.rangeHovered=null}handleDateSelect(t){if(t)return this.range?this.handleRangeSelect(t):this.multiple?this.toggleSelected(t):(this.selected.includes(this.formatISODate(t))?this.emptySelected():(this.emptySelected(),this.addToSelected(t)),this.close()),this.dispatchEvent(new CustomEvent("date-selected",{detail:this.selected,bubbles:!0,composed:!0})),Promise.resolve()}focusOnCurrentDate(){const t=this.formatISODate(new Date),n=this.querySelector(`div[data-date="${t}"]`);if(n instanceof HTMLDivElement)this.focusedDate=t,n.focus();else{const r=this.selectableDates.find(i=>!i.isDisabled);if(r){const i=this.querySelector(`div[data-date="${r.currentDateISO}"]`);i instanceof HTMLDivElement&&(this.focusedDate=r.currentDateISO,i.focus())}}}closeEvent(t){this.contains(t.relatedTarget)||this.close()}close(){this.dispatchEvent(new CustomEvent("close",{detail:!0,bubbles:!0,composed:!0}))}};Se([O({type:Boolean})],xe.prototype,"multiple",2),Se([O({type:Number})],xe.prototype,"maxMultiple",2),Se([O({type:Boolean})],xe.prototype,"range",2),Se([O({type:Boolean})],xe.prototype,"weeknumbers",2),Se([O({type:Boolean})],xe.prototype,"withcontrols",2),Se([O({converter:rr.csvToArray})],xe.prototype,"selected",2),Se([O({type:String})],xe.prototype,"earliest",2),Se([O({type:String})],xe.prototype,"latest",2),Se([O({converter:rr.stringsToDate})],xe.prototype,"excludedates",2),Se([O({converter:rr.csvToArray})],xe.prototype,"excludeweekdays",2),Se([O({converter:rr.stringToDate})],xe.prototype,"currentmonth",2),Se([O({type:Array})],xe.prototype,"dayStrings",2),Se([O({type:Array})],xe.prototype,"monthStrings",2),Se([O({type:String})],xe.prototype,"weekString",2),Se([O({type:String})],xe.prototype,"prevMonthString",2),Se([O({type:String})],xe.prototype,"nextMonthString",2),Se([O({type:Array})],xe.prototype,"_selected",2),Se([O({type:Number})],xe.prototype,"year",2),Se([O({type:Number})],xe.prototype,"month",2),Se([O({type:Number})],xe.prototype,"week",2),Se([O({type:Date})],xe.prototype,"rangeHovered",2),Se([Yt()],xe.prototype,"inRange",2),Se([Yt()],xe.prototype,"focusedDate",2),Se([Yt()],xe.prototype,"selectableDates",2),Se([Yt()],xe.prototype,"currentmonthtouched",2),Se([Yt()],xe.prototype,"tabIndexSet",2),xe=Se([Ot("pkt-calendar")],xe);const uf="pkt-tag",cf=!0,pf={closeTag:{type:"boolean",required:!1,default:!1},size:{required:!1,default:"medium",type:["small","medium","large"]},iconName:{type:"string",required:!1},skin:{required:!1,default:"blue",type:["blue","green","red","beige","yellow","gray","blue-light"]},textStyle:{required:!1,default:"normal-text",type:["thin-text","normal-text"]},type:{required:!1,default:"button",type:["button","submit","reset"]},ariaLabel:{type:"string",required:!1,default:"close"}},df={default:{description:"Teksten til tag"}},ar={name:uf,"css-class":"pkt-tag",isElement:cf,props:pf,slots:df};var hf=Object.defineProperty,ff=Object.getOwnPropertyDescriptor,Kt=(e,t,n,r)=>{for(var i=r>1?void 0:r?ff(t,n):t,o=e.length-1,u;o>=0;o--)(u=e[o])&&(i=(r?u(t,n,i):u(i))||i);return r&&i&&hf(t,n,i),i};let Nt=class extends Bt{constructor(){super(),this.defaultSlot=vt(),this.closeTag=ar.props.closeTag.default,this.size=ar.props.size.default,this.skin=ar.props.skin.default,this.textStyle=ar.props.textStyle.default,this.iconName=void 0,this.type=ar.props.type.default,this.ariaLabel=ar.props.ariaLabel.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("onClose",{detail:{origin:t},bubbles:!0,composed:!0}))},this.slotController=new Tn(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},n={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?K`
+        </tr>`)}return h}isExcluded(t,n){return this.excludeweekdays.includes(t.toString())||this.earliest&&n<new Date(this.earliest)||this.latest&&n>new Date(this.latest)?!0:this.excludedates.some(r=>typeof r=="string"?r===this.formatISODate(n):r.toDateString()===n.toDateString())}formatISODate(t){return t.toISOString().split("T")[0]}isPrevMonthAllowed(){const t=new Date(this.year,this.month,0,12);return!(this.earliest&&new Date(this.earliest)>t)}prevMonth(){const t=this.month===0?11:this.month-1,n=this.month===0?this.year-1:this.year;this.changeMonth(n,t)}isNextMonthAllowed(){const t=new Date(this.year,this.month===11?0:this.month+1,1,12);return!(this.latest&&new Date(this.latest)<t)}nextMonth(){const t=this.month===11?0:this.month+1,n=this.month===11?this.year+1:this.year;this.changeMonth(n,t)}changeMonth(t,n){this.year=t,this.month=n,this.tabIndexSet=0,this.focusedDate=null,this.selectableDates=[],this.requestUpdate()}isInRange(t){if(this.range&&this.selected.length===2){if(t>new Date(this.selected[0])&&t<new Date(this.selected[1]))return!0}else if(this.range&&this.selected.length===1&&this.rangeHovered&&t>new Date(this.selected[0])&&t<this.rangeHovered)return!0;return!1}isRangeAllowed(t){let n=!0;if(this._selected.length===1){const r=as({start:this._selected[0],end:t});if(Array.isArray(r)&&r.length)for(let i=0;i<r.length;i++)this.excludedates.forEach(o=>{o>this._selected[0]&&o<t&&(n=!1)}),this.excludeweekdays.includes(nf(r[i]).toString())&&(n=!1)}return n}emptySelected(){this.selected=[],this._selected=[],this.inRange={}}addToSelected(t){this.selected.includes(this.formatISODate(t))||(this.selected=[...this.selected,this.formatISODate(t)],this._selected=[...this._selected,t],this.range&&this.selected.length===2&&this.close())}removeFromSelected(t){if(this.selected.length===1)this.emptySelected();else{const n=this.selected.indexOf(this.formatISODate(t)),r=[...this.selected],i=[...this._selected];r.splice(n,1),i.splice(n,1),this.selected=r,this._selected=i}}toggleSelected(t){const n=this.formatISODate(t);this.selected.includes(n)?this.removeFromSelected(t):this.maxMultiple&&this.selected.length>=this.maxMultiple||this.addToSelected(t)}handleRangeSelect(t){const n=this.formatISODate(t);return this.selected.includes(n)?this.selected.indexOf(n)===0?this.emptySelected():this.removeFromSelected(t):this.selected.length>1?(this.emptySelected(),this.addToSelected(t)):(this.selected.length===1&&!this.isRangeAllowed(t)&&this.emptySelected(),this.selected.length===1&&this._selected[0]>t&&this.emptySelected(),this.addToSelected(t)),Promise.resolve()}handleRangeHover(t){if(this.range&&this._selected.length===1&&this.isRangeAllowed(t)&&this._selected[0]<t){this.rangeHovered=t,this.inRange={};const n=as({start:this._selected[0],end:t});if(Array.isArray(n)&&n.length)for(let r=0;r<n.length;r++)this.inRange[this.formatISODate(n[r])]=this.isInRange(n[r])}else this.rangeHovered=null}handleDateSelect(t){if(t)return this.range?this.handleRangeSelect(t):this.multiple?this.toggleSelected(t):(this.selected.includes(this.formatISODate(t))?this.emptySelected():(this.emptySelected(),this.addToSelected(t)),this.close()),this.dispatchEvent(new CustomEvent("date-selected",{detail:this.selected,bubbles:!0,composed:!0})),Promise.resolve()}focusOnCurrentDate(){const t=this.formatISODate(new Date),n=this.querySelector(`div[data-date="${t}"]`);if(n instanceof HTMLDivElement)this.focusedDate=t,n.focus();else{const r=this.selectableDates.find(i=>!i.isDisabled);if(r){const i=this.querySelector(`div[data-date="${r.currentDateISO}"]`);i instanceof HTMLDivElement&&(this.focusedDate=r.currentDateISO,i.focus())}}}closeEvent(t){this.contains(t.relatedTarget)||this.close()}close(){this.dispatchEvent(new CustomEvent("close",{detail:!0,bubbles:!0,composed:!0}))}};Se([O({type:Boolean})],xe.prototype,"multiple",2),Se([O({type:Number})],xe.prototype,"maxMultiple",2),Se([O({type:Boolean})],xe.prototype,"range",2),Se([O({type:Boolean})],xe.prototype,"weeknumbers",2),Se([O({type:Boolean})],xe.prototype,"withcontrols",2),Se([O({converter:rr.csvToArray})],xe.prototype,"selected",2),Se([O({type:String})],xe.prototype,"earliest",2),Se([O({type:String})],xe.prototype,"latest",2),Se([O({converter:rr.stringsToDate})],xe.prototype,"excludedates",2),Se([O({converter:rr.csvToArray})],xe.prototype,"excludeweekdays",2),Se([O({converter:rr.stringToDate})],xe.prototype,"currentmonth",2),Se([O({type:Array})],xe.prototype,"dayStrings",2),Se([O({type:Array})],xe.prototype,"monthStrings",2),Se([O({type:String})],xe.prototype,"weekString",2),Se([O({type:String})],xe.prototype,"prevMonthString",2),Se([O({type:String})],xe.prototype,"nextMonthString",2),Se([O({type:Array})],xe.prototype,"_selected",2),Se([O({type:Number})],xe.prototype,"year",2),Se([O({type:Number})],xe.prototype,"month",2),Se([O({type:Number})],xe.prototype,"week",2),Se([O({type:Date})],xe.prototype,"rangeHovered",2),Se([Yt()],xe.prototype,"inRange",2),Se([Yt()],xe.prototype,"focusedDate",2),Se([Yt()],xe.prototype,"selectableDates",2),Se([Yt()],xe.prototype,"currentmonthtouched",2),Se([Yt()],xe.prototype,"tabIndexSet",2),xe=Se([Ot("pkt-calendar")],xe);const uf="pkt-tag",cf=!0,pf={closeTag:{type:"boolean",required:!1,default:!1},size:{required:!1,default:"medium",type:["small","medium","large"]},iconName:{type:"string",required:!1},skin:{required:!1,default:"blue",type:["blue","green","red","beige","yellow","gray","blue-light"]},textStyle:{required:!1,default:"normal-text",type:["thin-text","normal-text"]},type:{required:!1,default:"button",type:["button","submit","reset"]},ariaLabel:{type:"string",required:!1,default:"close"}},df={default:{description:"Teksten til tag"}},ar={name:uf,"css-class":"pkt-tag",isElement:cf,props:pf,slots:df};var hf=Object.defineProperty,ff=Object.getOwnPropertyDescriptor,Kt=(e,t,n,r)=>{for(var i=r>1?void 0:r?ff(t,n):t,o=e.length-1,u;o>=0;o--)(u=e[o])&&(i=(r?u(t,n,i):u(i))||i);return r&&i&&hf(t,n,i),i};let Nt=class extends Bt{constructor(){super(),this.defaultSlot=vt(),this.closeTag=ar.props.closeTag.default,this.size=ar.props.size.default,this.skin=ar.props.skin.default,this.textStyle=ar.props.textStyle.default,this.iconName=void 0,this.type=ar.props.type.default,this.ariaLabel=ar.props.ariaLabel.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0,composed:!0}))},this.slotController=new Tn(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},n={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?K`
         <button
           class=${He(n)}
           type=${this.type}
@@ -517,7 +517,7 @@ React keys must be passed directly to JSX without using spread:
       .target=${this.target}
       .rel=${this.external?"noopener noreferrer":ne}
       >${this.iconName?K`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`:""} <span ${rt(this.defaultSlot)}>Link</span></a
-    >`}handleClick(){this.dispatchEvent(new CustomEvent("click",{detail:"pkt-link-clicked",bubbles:!0}))}};or([O({type:String,reflect:!0})],hn.prototype,"href",2),or([O({type:String,reflect:!0})],hn.prototype,"iconName",2),or([O({type:String,reflect:!0})],hn.prototype,"iconPosition",2),or([O({type:Boolean,reflect:!0})],hn.prototype,"external",2),or([O({type:String,reflect:!0})],hn.prototype,"target",2),hn=or([Ot("pkt-link")],hn);const Wm="pkt-messagebox",Vm=!0,zm={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},Gm={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},Ym={default:{description:"Innholdet i meldingsboksen"}},us={name:Wm,"css-class":"pkt-messagebox",isElement:Vm,events:zm,props:Gm,slots:Ym};var Km=Object.defineProperty,Jm=Object.getOwnPropertyDescriptor,lr=(e,t,n,r)=>{for(var i=r>1?void 0:r?Jm(t,n):t,o=e.length-1,u;o>=0;o--)(u=e[o])&&(i=(r?u(t,n,i):u(i))||i);return r&&i&&Km(t,n,i),i};let fn=class extends Bt{constructor(){super(),this.defaultSlot=vt(),this.closable=us.props.closable.default,this.compact=us.props.compact.default,this.title="",this.skin=us.props.skin.default,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0}))},this.slotController=new Tn(this,this.defaultSlot),this._isClosed=!1}render(){const e={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return K`<div class=${He(e)}>
+    >`}handleClick(){this.dispatchEvent(new CustomEvent("click",{detail:"pkt-link-clicked",bubbles:!0}))}};or([O({type:String,reflect:!0})],hn.prototype,"href",2),or([O({type:String,reflect:!0})],hn.prototype,"iconName",2),or([O({type:String,reflect:!0})],hn.prototype,"iconPosition",2),or([O({type:Boolean,reflect:!0})],hn.prototype,"external",2),or([O({type:String,reflect:!0})],hn.prototype,"target",2),hn=or([Ot("pkt-link")],hn);const Wm="pkt-messagebox",Vm=!0,zm={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},Gm={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},Ym={default:{description:"Innholdet i meldingsboksen"}},us={name:Wm,"css-class":"pkt-messagebox",isElement:Vm,events:zm,props:Gm,slots:Ym};var Km=Object.defineProperty,Jm=Object.getOwnPropertyDescriptor,lr=(e,t,n,r)=>{for(var i=r>1?void 0:r?Jm(t,n):t,o=e.length-1,u;o>=0;o--)(u=e[o])&&(i=(r?u(t,n,i):u(i))||i);return r&&i&&Km(t,n,i),i};let fn=class extends Bt{constructor(){super(),this.defaultSlot=vt(),this.closable=us.props.closable.default,this.compact=us.props.compact.default,this.title="",this.skin=us.props.skin.default,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0}))},this.slotController=new Tn(this,this.defaultSlot),this._isClosed=!1}render(){const e={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return K`<div class=${He(e)}>
       ${this.closable?K`<div class="pkt-messagebox__close">
             <button
               @click=${this.close}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.6.0",
+  "version": "12.6.2",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -48,7 +48,7 @@
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.4.0",
     "@oslokommune/punkt-css": "^12.5.2",
-    "@oslokommune/punkt-elements": "^12.6.0",
+    "@oslokommune/punkt-elements": "^12.6.1",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -111,5 +111,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "881984611d2b5537131ae1b8c6b30b367d4ba64c"
+  "gitHead": "3da397ade0b2e70292f9f120b8b0e5b374d9ddf1"
 }