@oslokommune/punkt-elements 12.11.6 → 12.11.7

package/dist/pkt-datepicker.cjs

@@ -2,7 +2,7 @@
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const R=(o,e,t)=>{const i=new Map;for(let a=e;a<=t;a++)i.set(o[a],a);return i},P=b.e(class extends b.i{constructor(o){if(super(o),o.type!==b.t$1.CHILD)throw Error("repeat() can only be used in text expressions")}dt(o,e,t){let i;t===void 0?t=e:e!==void 0&&(i=e);const a=[],n=[];let l=0;for(const c of o)a[l]=i?i(c,l):l,n[l]=t(c,l),l++;return{values:n,keys:a}}render(o,e,t){return this.dt(o,e,t).values}update(o,[e,t,i]){const a=r.p(o),{values:n,keys:l}=this.dt(e,t,i);if(!Array.isArray(a))return this.ut=l,n;const c=this.ut??(this.ut=[]),g=[];let $,w,u=0,h=a.length-1,d=0,f=n.length-1;for(;u<=h&&d<=f;)if(a[u]===null)u++;else if(a[h]===null)h--;else if(c[u]===l[d])g[d]=r.v(a[u],n[d]),u++,d++;else if(c[h]===l[f])g[f]=r.v(a[h],n[f]),h--,f--;else if(c[u]===l[f])g[f]=r.v(a[u],n[f]),r.r(o,g[f+1],a[u]),u++,f--;else if(c[h]===l[d])g[d]=r.v(a[h],n[d]),r.r(o,a[u],a[h]),h--,d++;else if($===void 0&&($=R(l,d,f),w=R(c,u,h)),$.has(c[u]))if($.has(c[h])){const v=w.get(l[d]),x=v!==void 0?a[v]:null;if(x===null){const D=r.r(o,a[u]);r.v(D,n[d]),g[d]=D}else g[d]=r.v(x,n[d]),r.r(o,a[u],x),a[v]=null;d++}else r.M(a[h]),h--;else r.M(a[u]),u++;for(;d<=f;){const v=r.r(o,g[f+1]);r.v(v,n[d]),g[d++]=v}for(;u<=h;){const v=a[u++];v!==null&&r.M(v)}return this.ut=l,r.m(o,g),s.T}}),S="pkt-datepicker",I=!0,_={name:{type:"string",name:"Navn",description:"Navn som sendes brukes i skjema ved innsending"},label:{type:"string",name:"Etikett",description:"Tekst som vises over datovelgeren"},helptext:{type:"string",name:"Hjelpetekst",description:"Hjelpetekst som vises over datovelgeren"},helptextDropdown:{type:"string",name:"Utvidet hjelpetekst",description:"Hjelpetekst som vises i en lukket boks man kan åpne"},helptextDropdownButton:{type:"string",name:"Knappetekst for hjelpetekst",description:"Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst",default:"Les mer"},dateformat:{name:"Datoformat",description:"Datoformat for valgte datoer i flervalgsmodus",type:"string",default:"dd.MM.yyyy"},currentmonth:{name:"Nåværende måned",type:"ISOdatestring",description:"Måneden som skal vises i datovelgeren"},value:{name:"Verdi",type:"ISOdatestring",variant:"multiple",reflect:!0,description:"Kommaseparert liste av valgte datoer"},excludeweekdays:{name:"Utelat ukedager",type:"string",description:"Kommaseparert liste over ukedager (1-7) som skal ekskluderes"},excludedates:{name:"Utelat datoer",type:"ISOdatestring",variant:"multiple",description:"Kommaseparert liste over datoer som skal ekskluderes"},min:{name:"Tidligst tillatt",type:"ISOdatestring",default:null,description:"Første tillate dato i datovelgeren"},max:{name:"Senest tillatt",type:"ISOdatestring",default:null,description:"Siste tillate dato i datovelgeren"},weeknumbers:{name:"Vis ukenummer",type:"boolean",reflect:!0,default:!1,description:"Vis ukedager i datovelgerens kalender"},withcontrols:{name:"Med kontroller",type:"boolean",reflect:!0,default:!1,description:"Vis avanserte velgere for måned og år"},multiple:{name:"Flervalg",type:"boolean",reflect:!0,default:!1,description:"Tillat valg av flere enn én dato i samme velger"},maxlength:{name:"Maks antall",description:"Maks valgte datoer i flervalgsmodus",type:"number",default:4},range:{name:"Datotidsrom",type:"boolean",reflect:!0,default:!1,description:"Tillat å velge et tidsrom mellom to datoer i samme velger"},hasError:{type:"boolean",name:"Feil",description:"Viser feiltilstand for datovelgeren"},errorMessage:{type:"string",name:"Feilmelding",description:"Tekst som vises under datovelgeren ved feiltilstand"},disabled:{type:"boolean",name:"Deaktivert",default:!1,reflect:!0,description:"Er datovelgeren deaktivert?"},fullwidth:{type:"boolean",name:"Full bredde",default:!1,reflect:!0,description:"Skal datovelgeren ta opp hele bredden?"},required:{type:"boolean",name:"Påkrevd",default:!1,reflect:!0,description:"Er datovelgeren påkrevd?"},requiredTag:{type:"boolean",name:"Vise påkrevd-merking",default:!1,description:"Viser en merking som indikerer at datovelgeren er påkrevd"},requiredText:{type:"string",name:"Påkrevd-tekst",default:"Må fylles ut",description:"Tekst som vises i påkrevd-merkingen"},optionalTag:{type:"boolean",name:"Vise valgfritt-merking",default:!1,description:"Viser en merking som indikerer at datovelgeren er valgfri"},optionalText:{type:"string",name:"Valgfritt-tekst",default:"Valgfritt",description:"Tekst som vises i valgfritt-merkingen"},useWrapper:{type:"boolean",name:"Bruk wrapper",description:"Indikerer at feltet skal ha synlig label og hjelpetekst",default:!0},id:{type:"string",name:"ID",description:"Unik identifikasjon for datovelgeren"}},O={change:{type:"Event",description:"Returnerer valgt dato som streng i ISO-format"},"value-change":{type:"CustomEvent",description:"Returnerer en <code>array</code> med valgte datoer i ISO-format"},toggleHelpText:{type:"CustomEvent",description:"Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes"}},k={name:S,"css-class":"pkt-datepicker",isElement:I,props:_,events:O};var E=Object.defineProperty,M=Object.getOwnPropertyDescriptor,p=(o,e,t,i)=>{for(var a=i>1?void 0:i?M(e,t):e,n=o.length-1,l;n>=0;n--)(l=o[n])&&(a=(i?l(e,t,a):l(a))||a);return i&&a&&E(e,t,a),a};const C=o=>new Promise(e=>setTimeout(e,o));exports.PktDatepicker=class extends s.PktInputElement{constructor(){super(...arguments),this.value="",this._value=this.value?Array.isArray(this.value)?this.value:this.value.split(","):[],this.label="Datovelger",this.dateformat=k.props.dateformat.default,this.multiple=k.props.multiple.default,this.maxlength=k.props.maxlength.default,this.range=k.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=k.props.weeknumbers.default,this.withcontrols=k.props.withcontrols.default,this.fullwidth=!1,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.useWrapper=!0,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=r.e(),this.inputRefTo=r.e(),this.btnRef=r.e(),this.calRef=r.e(),this.popupRef=r.e(),this.addToSelected=e=>{const t=e.target;if(!t.value)return;const i=this.min?m.newDate(this.min):null,a=this.max?m.newDate(this.max):null,n=m.newDate(t.value.split(",")[0]);n&&!isNaN(n.getTime())&&(!i||n>=i)&&(!a||n<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(n),t.value=""}}async connectedCallback(){super.connectedCallback(),this.isMobileSafari=/iP(ad|od|hone)/i.test(window.navigator.userAgent)&&!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/),this.inputType=this.isMobileSafari?"text":"date",document&&document.body.addEventListener("click",e=>{var t,i;(t=this.inputRef)!=null&&t.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(e.target)&&!(this.inputRefTo.value&&this.inputRefTo.value.contains(e.target))&&!this.btnRef.value.contains(e.target)&&!e.target.closest(".pkt-calendar-popup")&&this.calendarOpen&&(this.onBlur(),this.hideCalendar())}),this.value.length&&this._value.length===0&&(this._value=Array.isArray(this.value)?this.value:this.value.split(",")),this.min=this.min||k.props.min.default,this.max=this.max||k.props.max.default,typeof this.excludedates=="string"&&(this.excludedates=this.excludedates.split(",")),typeof this.excludeweekdays=="string"&&(this.excludeweekdays=this.excludeweekdays.split(",")),(this.multiple||this.range)&&this.name&&!this.name.endsWith("[]")&&(this.name=this.name+"[]"),this.calendarOpen&&(await C(20),this.handleCalendarPosition())}disconnectedCallback(){super.disconnectedCallback(),document&&document.body.removeEventListener("click",e=>{var t,i;(t=this.inputRef)!=null&&t.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(e.target)&&!this.btnRef.value.contains(e.target)&&this.hideCalendar()})}attributeChangedCallback(e,t,i){e==="value"&&this.valueChanged(this.value,t),e==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=(i==null?void 0:i.split(","))??[]),e==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=(i==null?void 0:i.split(","))??[]),super.attributeChangedCallback(e,t,i)}firstUpdated(e){super.firstUpdated(e)}updated(e){if(super.updated(e),e.has("value")){if(this.range&&this._value.length===1)return;this.valueChanged(this.value,e.get("value"))}}renderInput(){return s.x`
+ */const R=(o,e,t)=>{const i=new Map;for(let a=e;a<=t;a++)i.set(o[a],a);return i},P=b.e(class extends b.i{constructor(o){if(super(o),o.type!==b.t$1.CHILD)throw Error("repeat() can only be used in text expressions")}dt(o,e,t){let i;t===void 0?t=e:e!==void 0&&(i=e);const a=[],n=[];let l=0;for(const c of o)a[l]=i?i(c,l):l,n[l]=t(c,l),l++;return{values:n,keys:a}}render(o,e,t){return this.dt(o,e,t).values}update(o,[e,t,i]){const a=r.p(o),{values:n,keys:l}=this.dt(e,t,i);if(!Array.isArray(a))return this.ut=l,n;const c=this.ut??(this.ut=[]),g=[];let $,w,u=0,h=a.length-1,d=0,f=n.length-1;for(;u<=h&&d<=f;)if(a[u]===null)u++;else if(a[h]===null)h--;else if(c[u]===l[d])g[d]=r.v(a[u],n[d]),u++,d++;else if(c[h]===l[f])g[f]=r.v(a[h],n[f]),h--,f--;else if(c[u]===l[f])g[f]=r.v(a[u],n[f]),r.r(o,g[f+1],a[u]),u++,f--;else if(c[h]===l[d])g[d]=r.v(a[h],n[d]),r.r(o,a[u],a[h]),h--,d++;else if($===void 0&&($=R(l,d,f),w=R(c,u,h)),$.has(c[u]))if($.has(c[h])){const v=w.get(l[d]),x=v!==void 0?a[v]:null;if(x===null){const D=r.r(o,a[u]);r.v(D,n[d]),g[d]=D}else g[d]=r.v(x,n[d]),r.r(o,a[u],x),a[v]=null;d++}else r.M(a[h]),h--;else r.M(a[u]),u++;for(;d<=f;){const v=r.r(o,g[f+1]);r.v(v,n[d]),g[d++]=v}for(;u<=h;){const v=a[u++];v!==null&&r.M(v)}return this.ut=l,r.m(o,g),s.T}}),S="pkt-datepicker",I=!0,_={name:{type:"string",name:"Navn",description:"Navn som sendes brukes i skjema ved innsending"},label:{type:"string",name:"Etikett",description:"Tekst som vises over datovelgeren"},helptext:{type:"string",name:"Hjelpetekst",description:"Hjelpetekst som vises over datovelgeren"},helptextDropdown:{type:"string",name:"Utvidet hjelpetekst",description:"Hjelpetekst som vises i en lukket boks man kan åpne"},helptextDropdownButton:{type:"string",name:"Knappetekst for hjelpetekst",description:"Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst",default:"Les mer"},dateformat:{name:"Datoformat",description:"Datoformat for valgte datoer i flervalgsmodus",type:"string",default:"dd.MM.yyyy"},currentmonth:{name:"Nåværende måned",type:"ISOdatestring",description:"Måneden som skal vises i datovelgeren"},value:{name:"Verdi",type:"ISOdatestring",variant:"multiple",reflect:!0,description:"Kommaseparert liste av valgte datoer"},excludeweekdays:{name:"Utelat ukedager",type:"string",description:"Kommaseparert liste over ukedager (1-7) som skal ekskluderes"},excludedates:{name:"Utelat datoer",type:"ISOdatestring",variant:"multiple",description:"Kommaseparert liste over datoer som skal ekskluderes"},min:{name:"Tidligst tillatt",type:"ISOdatestring",default:null,description:"Første tillate dato i datovelgeren"},max:{name:"Senest tillatt",type:"ISOdatestring",default:null,description:"Siste tillate dato i datovelgeren"},weeknumbers:{name:"Vis ukenummer",type:"boolean",reflect:!0,default:!1,description:"Vis ukedager i datovelgerens kalender"},withcontrols:{name:"Med kontroller",type:"boolean",reflect:!0,default:!1,description:"Vis avanserte velgere for måned og år"},multiple:{name:"Flervalg",type:"boolean",reflect:!0,default:!1,description:"Tillat valg av flere enn én dato i samme velger"},maxlength:{name:"Maks antall",description:"Maks valgte datoer i flervalgsmodus",type:"number",default:4},range:{name:"Datotidsrom",type:"boolean",reflect:!0,default:!1,description:"Tillat å velge et tidsrom mellom to datoer i samme velger"},hasError:{type:"boolean",name:"Feil",description:"Viser feiltilstand for datovelgeren"},errorMessage:{type:"string",name:"Feilmelding",description:"Tekst som vises under datovelgeren ved feiltilstand"},disabled:{type:"boolean",name:"Deaktivert",default:!1,reflect:!0,description:"Er datovelgeren deaktivert?"},fullwidth:{type:"boolean",name:"Full bredde",default:!1,reflect:!0,description:"Skal datovelgeren ta opp hele bredden?"},required:{type:"boolean",name:"Påkrevd",default:!1,reflect:!0,description:"Er datovelgeren påkrevd?"},requiredTag:{type:"boolean",name:"Vise påkrevd-merking",default:!1,description:"Viser en merking som indikerer at datovelgeren er påkrevd"},requiredText:{type:"string",name:"Påkrevd-tekst",default:"Må fylles ut",description:"Tekst som vises i påkrevd-merkingen"},optionalTag:{type:"boolean",name:"Vise valgfritt-merking",default:!1,description:"Viser en merking som indikerer at datovelgeren er valgfri"},optionalText:{type:"string",name:"Valgfritt-tekst",default:"Valgfritt",description:"Tekst som vises i valgfritt-merkingen"},useWrapper:{type:"boolean",name:"Bruk wrapper",description:"Indikerer at feltet skal ha synlig label og hjelpetekst",default:!0},id:{type:"string",name:"ID",description:"Unik identifikasjon for datovelgeren"}},O={change:{type:"Event",description:"Returnerer valgt dato som streng i ISO-format"},"value-change":{type:"CustomEvent",description:"Returnerer en <code>array</code> med valgte datoer i ISO-format"},toggleHelpText:{type:"CustomEvent",description:"Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes"}},k={name:S,"css-class":"pkt-datepicker",isElement:I,props:_,events:O};var E=Object.defineProperty,M=Object.getOwnPropertyDescriptor,p=(o,e,t,i)=>{for(var a=i>1?void 0:i?M(e,t):e,n=o.length-1,l;n>=0;n--)(l=o[n])&&(a=(i?l(e,t,a):l(a))||a);return i&&a&&E(e,t,a),a};const C=o=>new Promise(e=>setTimeout(e,o));exports.PktDatepicker=class extends s.PktInputElement{constructor(){super(...arguments),this.value="",this._value=this.value?Array.isArray(this.value)?this.value:this.value.split(","):[],this.label="Datovelger",this.dateformat=k.props.dateformat.default,this.multiple=k.props.multiple.default,this.maxlength=k.props.maxlength.default,this.range=k.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=k.props.weeknumbers.default,this.withcontrols=k.props.withcontrols.default,this.fullwidth=!1,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.useWrapper=!0,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=r.e(),this.inputRefTo=r.e(),this.btnRef=r.e(),this.calRef=r.e(),this.popupRef=r.e(),this.addToSelected=e=>{const t=e.target;if(!t.value)return;const i=this.min?m.newDate(this.min):null,a=this.max?m.newDate(this.max):null,n=m.newDate(t.value.split(",")[0]);n&&!isNaN(n.getTime())&&(!i||n>=i)&&(!a||n<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(n),t.value=""}}async connectedCallback(){super.connectedCallback(),this.isMobileSafari=/iP(ad|od|hone)/i.test(window.navigator.userAgent)&&!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/),this.inputType=this.isMobileSafari?"text":"date",document&&document.body.addEventListener("click",e=>{var t,i;(t=this.inputRef)!=null&&t.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(e.target)&&!(this.inputRefTo.value&&this.inputRefTo.value.contains(e.target))&&!this.btnRef.value.contains(e.target)&&!e.target.closest(".pkt-calendar-popup")&&this.calendarOpen&&(this.onBlur(),this.hideCalendar())}),this.value.length&&this._value.length===0&&(this._value=Array.isArray(this.value)?this.value:this.value.split(",")),this.min=this.min||k.props.min.default,this.max=this.max||k.props.max.default,typeof this.excludedates=="string"&&(this.excludedates=this.excludedates.split(",")),typeof this.excludeweekdays=="string"&&(this.excludeweekdays=this.excludeweekdays.split(",")),(this.multiple||this.range)&&this.name&&!this.name.endsWith("[]")&&(this.name=this.name+"[]"),this.calendarOpen&&(await C(20),this.handleCalendarPosition())}disconnectedCallback(){super.disconnectedCallback(),document&&document.body.removeEventListener("click",e=>{var t,i;(t=this.inputRef)!=null&&t.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(e.target)&&!this.btnRef.value.contains(e.target)&&this.hideCalendar()})}attributeChangedCallback(e,t,i){if(e==="value"){if(this.range&&(i==null?void 0:i.split(",").length)===1)return;this.value!==t&&this.valueChanged(i,t)}e==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=(i==null?void 0:i.split(","))??[]),e==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=(i==null?void 0:i.split(","))??[]),super.attributeChangedCallback(e,t,i)}firstUpdated(e){super.firstUpdated(e)}updated(e){if(super.updated(e),e.has("value")){if((this.range||this.multiple)&&typeof this.value=="string"&&(this.value=this.value.split(",")),this.range&&this.value.length===1)return;this.valueChanged(this.value,e.get("value"))}}renderInput(){return s.x`
       <input
         class="${y.e(this.inputClasses)}"
         .type=${this.inputType}
@@ -58,7 +58,7 @@
         @change=${t=>{t.stopImmediatePropagation()}}
         ${r.n(this.inputRefTo)}
       />
-    `}renderMultipleInput(){return console.log("renderMultipleInput",this.inputClasses,this.multiple),s.x`
+    `}renderMultipleInput(){return s.x`
       <input
         class=${y.e(this.inputClasses)}
         .type=${this.inputType}
@@ -82,7 +82,7 @@
                   closeTag
                   ariaLabel="${this.strings.calendar.deleteDate} ${m.fromISOtoLocal(e,this.dateformat)}"
                   @close=${()=>{var t;return(t=this.calRef.value)==null?void 0:t.handleDateSelect(m.fromISOToDate(e))}}
-                  >${m.fromISOtoLocal(e,this.dateformat)}</pkt-tag
+                  ><time datetime="${e}">${m.fromISOtoLocal(e,this.dateformat)}</time></pkt-tag
                 >
               `):s.E}
       </div>

package/dist/pkt-datepicker.js

@@ -1,9 +1,9 @@
-import { T as A, r as P, a as L, x as v, E as b, n as d } from "./index-BQ9BMXel.js";
+import { T as A, r as P, a as L, x as v, E as b, n as u } from "./index-BQ9BMXel.js";
 import { e as j, i as F, a as q, t as H } from "./custom-element-CWfU4dcr.js";
-import { p as U, v as y, r as w, M as _, m as N, e as R, n as $ } from "./ref-BjO0bKwt.js";
+import { p as U, v as y, r as w, M as D, m as N, e as R, n as $ } from "./ref-BjO0bKwt.js";
 import { e as x } from "./class-map-BQ3-MseA.js";
 import { a as V } from "./converters-DNCwIFwr.js";
-import { n as T, f as D, a as W, b as M } from "./index-BR7EVgX9.js";
+import { n as T, f as _, a as W, b as M } from "./index-BR7EVgX9.js";
 import "./pkt-input-wrapper.js";
 import "./index-BfUPq43a.js";
 import "./pkt-tag.js";
@@ -12,52 +12,52 @@ import "./pkt-tag.js";
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const E = (e, t, s) => {
+const E = (e, t, i) => {
   const a = /* @__PURE__ */ new Map();
-  for (let i = t; i <= s; i++) a.set(e[i], i);
+  for (let s = t; s <= i; s++) a.set(e[s], s);
   return a;
 }, K = j(class extends F {
   constructor(e) {
     if (super(e), e.type !== q.CHILD) throw Error("repeat() can only be used in text expressions");
   }
-  dt(e, t, s) {
+  dt(e, t, i) {
     let a;
-    s === void 0 ? s = t : t !== void 0 && (a = t);
-    const i = [], r = [];
+    i === void 0 ? i = t : t !== void 0 && (a = t);
+    const s = [], r = [];
     let n = 0;
-    for (const f of e) i[n] = a ? a(f, n) : n, r[n] = s(f, n), n++;
-    return { values: r, keys: i };
+    for (const f of e) s[n] = a ? a(f, n) : n, r[n] = i(f, n), n++;
+    return { values: r, keys: s };
   }
-  render(e, t, s) {
-    return this.dt(e, t, s).values;
+  render(e, t, i) {
+    return this.dt(e, t, i).values;
   }
-  update(e, [t, s, a]) {
-    const i = U(e), { values: r, keys: n } = this.dt(t, s, a);
-    if (!Array.isArray(i)) return this.ut = n, r;
+  update(e, [t, i, a]) {
+    const s = U(e), { values: r, keys: n } = this.dt(t, i, a);
+    if (!Array.isArray(s)) return this.ut = n, r;
     const f = this.ut ?? (this.ut = []), m = [];
-    let C, I, p = 0, h = i.length - 1, u = 0, c = r.length - 1;
-    for (; p <= h && u <= c; ) if (i[p] === null) p++;
-    else if (i[h] === null) h--;
-    else if (f[p] === n[u]) m[u] = y(i[p], r[u]), p++, u++;
-    else if (f[h] === n[c]) m[c] = y(i[h], r[c]), h--, c--;
-    else if (f[p] === n[c]) m[c] = y(i[p], r[c]), w(e, m[c + 1], i[p]), p++, c--;
-    else if (f[h] === n[u]) m[u] = y(i[h], r[u]), w(e, i[p], i[h]), h--, u++;
-    else if (C === void 0 && (C = E(n, u, c), I = E(f, p, h)), C.has(f[p])) if (C.has(f[h])) {
-      const g = I.get(n[u]), S = g !== void 0 ? i[g] : null;
+    let C, I, p = 0, h = s.length - 1, d = 0, c = r.length - 1;
+    for (; p <= h && d <= c; ) if (s[p] === null) p++;
+    else if (s[h] === null) h--;
+    else if (f[p] === n[d]) m[d] = y(s[p], r[d]), p++, d++;
+    else if (f[h] === n[c]) m[c] = y(s[h], r[c]), h--, c--;
+    else if (f[p] === n[c]) m[c] = y(s[p], r[c]), w(e, m[c + 1], s[p]), p++, c--;
+    else if (f[h] === n[d]) m[d] = y(s[h], r[d]), w(e, s[p], s[h]), h--, d++;
+    else if (C === void 0 && (C = E(n, d, c), I = E(f, p, h)), C.has(f[p])) if (C.has(f[h])) {
+      const g = I.get(n[d]), S = g !== void 0 ? s[g] : null;
       if (S === null) {
-        const O = w(e, i[p]);
-        y(O, r[u]), m[u] = O;
-      } else m[u] = y(S, r[u]), w(e, i[p], S), i[g] = null;
-      u++;
-    } else _(i[h]), h--;
-    else _(i[p]), p++;
-    for (; u <= c; ) {
+        const O = w(e, s[p]);
+        y(O, r[d]), m[d] = O;
+      } else m[d] = y(S, r[d]), w(e, s[p], S), s[g] = null;
+      d++;
+    } else D(s[h]), h--;
+    else D(s[p]), p++;
+    for (; d <= c; ) {
       const g = w(e, m[c + 1]);
-      y(g, r[u]), m[u++] = g;
+      y(g, r[d]), m[d++] = g;
     }
     for (; p <= h; ) {
-      const g = i[p++];
-      g !== null && _(g);
+      const g = s[p++];
+      g !== null && D(g);
     }
     return this.ut = n, N(e, m), A;
   }
@@ -249,10 +249,10 @@ const E = (e, t, s) => {
   props: J,
   events: Q
 };
-var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, o = (e, t, s, a) => {
-  for (var i = a > 1 ? void 0 : a ? Y(t, s) : t, r = e.length - 1, n; r >= 0; r--)
-    (n = e[r]) && (i = (a ? n(t, s, i) : n(i)) || i);
-  return a && i && X(t, s, i), i;
+var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, o = (e, t, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Y(t, i) : t, r = e.length - 1, n; r >= 0; r--)
+    (n = e[r]) && (s = (a ? n(t, i, s) : n(s)) || s);
+  return a && s && X(t, i, s), s;
 };
 const B = (e) => new Promise((t) => setTimeout(t, e));
 let l = class extends L {
@@ -260,8 +260,8 @@ let l = class extends L {
     super(...arguments), this.value = "", this._value = this.value ? Array.isArray(this.value) ? this.value : this.value.split(",") : [], this.label = "Datovelger", this.dateformat = k.props.dateformat.default, this.multiple = k.props.multiple.default, this.maxlength = k.props.maxlength.default, this.range = k.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = k.props.weeknumbers.default, this.withcontrols = k.props.withcontrols.default, this.fullwidth = !1, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.useWrapper = !0, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.buttonClasses = {}, this.inputRef = R(), this.inputRefTo = R(), this.btnRef = R(), this.calRef = R(), this.popupRef = R(), this.addToSelected = (e) => {
       const t = e.target;
       if (!t.value) return;
-      const s = this.min ? T(this.min) : null, a = this.max ? T(this.max) : null, i = T(t.value.split(",")[0]);
-      i && !isNaN(i.getTime()) && (!s || i >= s) && (!a || i <= a) && this.calRef.value && this.calRef.value.handleDateSelect(i), t.value = "";
+      const i = this.min ? T(this.min) : null, a = this.max ? T(this.max) : null, s = T(t.value.split(",")[0]);
+      s && !isNaN(s.getTime()) && (!i || s >= i) && (!a || s <= a) && this.calRef.value && this.calRef.value.handleDateSelect(s), t.value = "";
     };
   }
   /**
@@ -269,25 +269,29 @@ let l = class extends L {
    */
   async connectedCallback() {
     super.connectedCallback(), this.isMobileSafari = /iP(ad|od|hone)/i.test(window.navigator.userAgent) && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/), this.inputType = this.isMobileSafari ? "text" : "date", document && document.body.addEventListener("click", (e) => {
-      var t, s;
-      (t = this.inputRef) != null && t.value && ((s = this.btnRef) != null && s.value) && !this.inputRef.value.contains(e.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(e.target)) && !this.btnRef.value.contains(e.target) && !e.target.closest(".pkt-calendar-popup") && this.calendarOpen && (this.onBlur(), this.hideCalendar());
+      var t, i;
+      (t = this.inputRef) != null && t.value && ((i = this.btnRef) != null && i.value) && !this.inputRef.value.contains(e.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(e.target)) && !this.btnRef.value.contains(e.target) && !e.target.closest(".pkt-calendar-popup") && this.calendarOpen && (this.onBlur(), this.hideCalendar());
     }), this.value.length && this._value.length === 0 && (this._value = Array.isArray(this.value) ? this.value : this.value.split(",")), this.min = this.min || k.props.min.default, this.max = this.max || k.props.max.default, typeof this.excludedates == "string" && (this.excludedates = this.excludedates.split(",")), typeof this.excludeweekdays == "string" && (this.excludeweekdays = this.excludeweekdays.split(",")), (this.multiple || this.range) && this.name && !this.name.endsWith("[]") && (this.name = this.name + "[]"), this.calendarOpen && (await B(20), this.handleCalendarPosition());
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document && document.body.removeEventListener("click", (e) => {
-      var t, s;
-      (t = this.inputRef) != null && t.value && ((s = this.btnRef) != null && s.value) && !this.inputRef.value.contains(e.target) && !this.btnRef.value.contains(e.target) && this.hideCalendar();
+      var t, i;
+      (t = this.inputRef) != null && t.value && ((i = this.btnRef) != null && i.value) && !this.inputRef.value.contains(e.target) && !this.btnRef.value.contains(e.target) && this.hideCalendar();
     });
   }
-  attributeChangedCallback(e, t, s) {
-    e === "value" && this.valueChanged(this.value, t), e === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = (s == null ? void 0 : s.split(",")) ?? []), e === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = (s == null ? void 0 : s.split(",")) ?? []), super.attributeChangedCallback(e, t, s);
+  attributeChangedCallback(e, t, i) {
+    if (e === "value") {
+      if (this.range && (i == null ? void 0 : i.split(",").length) === 1) return;
+      this.value !== t && this.valueChanged(i, t);
+    }
+    e === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = (i == null ? void 0 : i.split(",")) ?? []), e === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = (i == null ? void 0 : i.split(",")) ?? []), super.attributeChangedCallback(e, t, i);
   }
   firstUpdated(e) {
     super.firstUpdated(e);
   }
   updated(e) {
     if (super.updated(e), e.has("value")) {
-      if (this.range && this._value.length === 1) return;
+      if ((this.range || this.multiple) && typeof this.value == "string" && (this.value = this.value.split(",")), this.range && this.value.length === 1) return;
       this.valueChanged(this.value, e.get("value"));
     }
   }
@@ -347,8 +351,8 @@ let l = class extends L {
     }}
         ?disabled=${this.disabled}
         @keydown=${(t) => {
-      var s;
-      (t.key === "," || t.key === "Enter") && ((s = this.inputRef.value) == null || s.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t));
+      var i;
+      (t.key === "," || t.key === "Enter") && ((i = this.inputRef.value) == null || i.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t));
     }}
         @input=${(t) => {
       this.onInput(), t.stopImmediatePropagation();
@@ -357,11 +361,11 @@ let l = class extends L {
       this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
         @blur=${(t) => {
-      var s, a;
+      var i, a;
       if (t.target.value) {
         this.manageValidity(t.target);
-        const i = D(t.target.value);
-        i && this._value[0] !== t.target.value && this._value[1] && (this.clearInputValue(), (a = (s = this.calRef) == null ? void 0 : s.value) == null || a.handleDateSelect(i));
+        const s = _(t.target.value);
+        s && this._value[0] !== t.target.value && this._value[1] && (this.clearInputValue(), (a = (i = this.calRef) == null ? void 0 : i.value) == null || a.handleDateSelect(s));
       } else this._value[0] && this.clearInputValue();
     }}
         @change=${(t) => {
@@ -386,8 +390,8 @@ let l = class extends L {
     }}
         ?disabled=${this.disabled}
         @keydown=${(t) => {
-      var s;
-      (t.key === "," || t.key === "Enter") && ((s = this.inputRefTo.value) == null || s.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t));
+      var i;
+      (t.key === "," || t.key === "Enter") && ((i = this.inputRefTo.value) == null || i.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t));
     }}
         @input=${(t) => {
       this.onInput(), t.stopImmediatePropagation();
@@ -396,8 +400,8 @@ let l = class extends L {
       this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
         @blur=${(t) => {
-      var s, a, i;
-      if ((s = this.calRef.value) != null && s.contains(t.relatedTarget) || this.onBlur(), t.target.value) {
+      var i, a, s;
+      if ((i = this.calRef.value) != null && i.contains(t.relatedTarget) || this.onBlur(), t.target.value) {
         this.manageValidity(t.target);
         const r = t.target.value;
         this.min && this.min > r ? this.internals.setValidity(
@@ -409,8 +413,8 @@ let l = class extends L {
           this.strings.forms.messages.rangeOverflow,
           t.target
         );
-        const n = D(t.target.value);
-        n && this._value[1] !== W(n) && ((i = (a = this.calRef) == null ? void 0 : a.value) == null || i.handleDateSelect(n));
+        const n = _(t.target.value);
+        n && this._value[1] !== W(n) && ((s = (a = this.calRef) == null ? void 0 : a.value) == null || s.handleDateSelect(n));
       }
     }}
         @change=${(t) => {
@@ -421,7 +425,7 @@ let l = class extends L {
     `;
   }
   renderMultipleInput() {
-    return console.log("renderMultipleInput", this.inputClasses, this.multiple), v`
+    return v`
       <input
         class=${x(this.inputClasses)}
         .type=${this.inputType}
@@ -468,9 +472,9 @@ let l = class extends L {
       )}"
                   @close=${() => {
         var t;
-        return (t = this.calRef.value) == null ? void 0 : t.handleDateSelect(D(e));
+        return (t = this.calRef.value) == null ? void 0 : t.handleDateSelect(_(e));
       }}
-                  >${M(e, this.dateformat)}</pkt-tag
+                  ><time datetime="${e}">${M(e, this.dateformat)}</time></pkt-tag
                 >
               `
     ) : b}
@@ -571,9 +575,9 @@ let l = class extends L {
   handleCalendarPosition() {
     var e;
     if (this.popupRef.value && this.inputRef.value) {
-      const t = this.multiple && !!this.maxlength, s = ((e = this.inputRef.value.parentElement) == null ? void 0 : e.getBoundingClientRect()) || this.inputRef.value.getBoundingClientRect(), a = t ? s.height + 30 : s.height, i = this.popupRef.value.getBoundingClientRect().height;
+      const t = this.multiple && !!this.maxlength, i = ((e = this.inputRef.value.parentElement) == null ? void 0 : e.getBoundingClientRect()) || this.inputRef.value.getBoundingClientRect(), a = t ? i.height + 30 : i.height, s = this.popupRef.value.getBoundingClientRect().height;
       let r = t ? "calc(100% - 30px)" : "100%";
-      s && s.top + i > window.innerHeight && s.top - i > 0 && (r = `calc(100% - ${a}px - ${i}px)`), this.popupRef.value.style.top = r;
+      i && i.top + s > window.innerHeight && i.top - s > 0 && (r = `calc(100% - ${a}px - ${s}px)`), this.popupRef.value.style.top = r;
     }
   }
   handleFocusOut(e) {
@@ -591,61 +595,61 @@ let l = class extends L {
   }
 };
 o([
-  d({ type: String, reflect: !0 })
+  u({ type: String, reflect: !0 })
 ], l.prototype, "value", 2);
 o([
-  d({ type: Array })
+  u({ type: Array })
 ], l.prototype, "_value", 2);
 o([
-  d({ type: String })
+  u({ type: String })
 ], l.prototype, "label", 2);
 o([
-  d({ type: String })
+  u({ type: String })
 ], l.prototype, "dateformat", 2);
 o([
-  d({ type: Boolean, reflect: !0 })
+  u({ type: Boolean, reflect: !0 })
 ], l.prototype, "multiple", 2);
 o([
-  d({ type: Number })
+  u({ type: Number })
 ], l.prototype, "maxlength", 2);
 o([
-  d({ type: Boolean, reflect: !0 })
+  u({ type: Boolean, reflect: !0 })
 ], l.prototype, "range", 2);
 o([
-  d({ type: Boolean })
+  u({ type: Boolean })
 ], l.prototype, "showRangeLabels", 2);
 o([
-  d({ type: String })
+  u({ type: String })
 ], l.prototype, "min", 2);
 o([
-  d({ type: String })
+  u({ type: String })
 ], l.prototype, "max", 2);
 o([
-  d({ type: Boolean })
+  u({ type: Boolean })
 ], l.prototype, "weeknumbers", 2);
 o([
-  d({ type: Boolean })
+  u({ type: Boolean })
 ], l.prototype, "withcontrols", 2);
 o([
-  d({ type: Boolean })
+  u({ type: Boolean })
 ], l.prototype, "fullwidth", 2);
 o([
-  d({ converter: V.csvToArray })
+  u({ converter: V.csvToArray })
 ], l.prototype, "excludedates", 2);
 o([
-  d({ converter: V.csvToArray })
+  u({ converter: V.csvToArray })
 ], l.prototype, "excludeweekdays", 2);
 o([
-  d({ type: String })
+  u({ type: String })
 ], l.prototype, "currentmonth", 2);
 o([
-  d({ type: Boolean })
+  u({ type: Boolean })
 ], l.prototype, "useWrapper", 2);
 o([
-  d({ type: Boolean, reflect: !0 })
+  u({ type: Boolean, reflect: !0 })
 ], l.prototype, "calendarOpen", 2);
 o([
-  d({ type: String })
+  u({ type: String })
 ], l.prototype, "timezone", 2);
 o([
   P()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.11.6",
+  "version": "12.11.7",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -56,5 +56,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "1f2843f20720079501fe7cff70d009fdbf1b013a"
+  "gitHead": "9054944531153cdbd74dbd5d45b0457ae4674a3b"
 }

package/src/components/datepicker/index.ts

@@ -152,7 +152,8 @@ export class PktDatepicker extends PktInputElement {
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
     if (name === 'value') {
-      this.valueChanged(this.value, _old)
+      if (this.range && value?.split(',').length === 1) return
+      if (this.value !== _old) this.valueChanged(value, _old)
     }
 
     if (name === 'excludedates' && typeof this.excludedates === 'string') {
@@ -172,7 +173,10 @@ export class PktDatepicker extends PktInputElement {
   updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties)
     if (changedProperties.has('value')) {
-      if (this.range && this._value.length === 1) return
+      if ((this.range || this.multiple) && typeof this.value === 'string') {
+        this.value = this.value.split(',')
+      }
+      if (this.range && this.value.length === 1) return
       this.valueChanged(this.value, changedProperties.get('value'))
     }
   }
@@ -371,7 +375,6 @@ export class PktDatepicker extends PktInputElement {
   }
 
   renderMultipleInput() {
-    console.log('renderMultipleInput', this.inputClasses, this.multiple)
     return html`
       <input
         class=${classMap(this.inputClasses)}
@@ -434,7 +437,7 @@ export class PktDatepicker extends PktInputElement {
                     this.dateformat,
                   )}"
                   @close=${() => this.calRef.value?.handleDateSelect(fromISOToDate(date))}
-                  >${fromISOtoLocal(date, this.dateformat)}</pkt-tag
+                  ><time datetime="${date}">${fromISOtoLocal(date, this.dateformat)}</time></pkt-tag
                 >
               `,
             )