@oslokommune/punkt-elements 13.6.6 → 13.6.7

package/dist/datepicker-n49TAIAt.cjs

@@ -0,0 +1,169 @@
+"use strict";const g=require("./class-map-CG3vIaNm.cjs"),d=require("./if-defined-CkVc_RJD.cjs"),l=require("./element-D62wHiNU.cjs"),P=require("./state-BkE_Rxl7.cjs"),u=require("./calendar-DH-fCGyW.cjs"),S=require("./input-element-Y8sdrq9C.cjs"),p=require("./ref-BfgcOXko.cjs");require("./icon-__Hjt2XZ.cjs");require("./input-wrapper-C9rZEgju.cjs");const _=require("./repeat-DzibMwhi.cjs");require("./tag-BKq07hGI.cjs");const O=require("./stringutils-CkVRq4jP.cjs"),T=require("./pkt-slot-controller-BzddBp7z.cjs"),I=i=>new Promise(e=>setTimeout(e,i)),m={isIOS(){const i=navigator.userAgent;return/iP(hone|od|ad)/.test(i)},isMobileSafari(){const i=navigator.userAgent;return/iP(hone|od|ad)/.test(i)&&/Safari/.test(i)&&!/CriOS|FxiOS/.test(i)}},c={parseValue(i){return i?Array.isArray(i)?i.filter(Boolean):typeof i=="string"?i.split(",").filter(Boolean):String(i).split(",").filter(Boolean):[]},formatValue(i){return i.join(",")},normalizeNameForMultiple(i,e,t){return i?(e||t)&&!i.endsWith("[]")?i+"[]":i:null},normalizeStringArray(i){return typeof i=="string"?i.split(",").filter(Boolean):Array.isArray(i)?i:[]},validateRangeOrder(i){return!i||i.length!==2?!0:u.isValidDateRange(i[0],i[1])},sortDates(i){return u.sortDateStrings(i)},filterSelectableDates(i,e,t,a,s){return u.filterSelectableDates(i,e,t,a,s)}},A={getInputType(){return m.isIOS()?"text":"date"}},f={submitForm(i){var t;const e=(t=i.internals)==null?void 0:t.form;e&&e.requestSubmit()},submitFormOrFallback(i,e){const t=i==null?void 0:i.form;t?t.requestSubmit():e()},validateDateInput(i,e,t,a,s){var n,h,D,x;const r=i.value;r&&(t&&t>r?e.setValidity({rangeUnderflow:!0},((h=(n=s==null?void 0:s.forms)==null?void 0:n.messages)==null?void 0:h.rangeUnderflow)||"Value is below minimum",i):a&&a<r&&e.setValidity({rangeOverflow:!0},((x=(D=s==null?void 0:s.forms)==null?void 0:D.messages)==null?void 0:x.rangeOverflow)||"Value is above maximum",i))}},C={addToSelected(i,e,t,a){const s=i.target;if(!s.value)return;const r=t?u.newDate(t):null,n=a?u.newDate(a):null,h=u.newDate(s.value.split(",")[0]);h&&!isNaN(h.getTime())&&(!r||h>=r)&&(!n||h<=n)&&e.value&&e.value.handleDateSelect(h),s.value=""},handleCalendarPosition(i,e,t=!1){var h;if(!i.value||!e.value)return;const a=((h=e.value.parentElement)==null?void 0:h.getBoundingClientRect())||e.value.getBoundingClientRect(),s=t?a.height+30:a.height,r=i.value.getBoundingClientRect().height;let n=t?"calc(100% - 30px)":"100%";a&&a.top+r>window.innerHeight&&a.top-r>0&&(n=`calc(100% - ${s}px - ${r}px)`),i.value.style.top=n}},$={createDocumentClickListener(i,e,t,a,s,r){return n=>{i!=null&&i.value&&(t!=null&&t.value)&&!i.value.contains(n.target)&&!(e!=null&&e.value&&e.value.contains(n.target))&&!t.value.contains(n.target)&&!n.target.closest(".pkt-calendar-popup")&&a()&&(s(),r())}},createDocumentKeydownListener(i,e){return t=>{t.key==="Escape"&&i()&&e()}},handleFocusOut(i,e,t,a){e.contains(i.target)||(t(),a())}},b={getInputClasses(i,e,t,a){return{"pkt-input":!0,"pkt-datepicker__input":!0,"pkt-input--fullwidth":i,"pkt-datepicker--hasrangelabels":e,"pkt-datepicker--multiple":t,"pkt-datepicker--range":a}},getButtonClasses(){return{"pkt-input-icon":!0,"pkt-btn":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":!0,"pkt-datepicker__calendar-button":!0}},getRangeLabelClasses(i){return{"pkt-input-prefix":i,"pkt-hide":!i}}},w={processDateSelection(i,e,t){return!e&&!t?i[0]||"":Array.isArray(i)?i.join(","):i},updateInputValues(i,e,t,a,s,r){i.value&&(a&&(e!=null&&e.value)?(i.value.value=t[0]??"",e.value.value=t[1]??"",r(i.value),r(e.value)):s||(i.value.value=t.length?t[0]:"",r(i.value)))},processRangeBlur(i,e,t,a,s){var n;const r=i.target;if(r.value){s(r);const h=u.fromISOToDate(r.value);h&&e[0]!==r.value&&e[1]&&(a(),(n=t==null?void 0:t.value)==null||n.handleDateSelect(h))}else e[0]&&a()}},y={handleInputKeydown(i,e,t,a,s,r){const{key:n}=i;n===","&&(i.preventDefault(),r?r(i):s&&s()),(n==="Space"||n===" ")&&(i.preventDefault(),e(i)),n==="Enter"&&(i.preventDefault(),t?t():a?a():s&&s())},handleButtonKeydown(i,e){const{key:t}=i;(t==="Enter"||t===" "||t==="Space")&&(i.preventDefault(),e(i))}};var B=Object.defineProperty,L=Object.getOwnPropertyDescriptor,k=(i,e,t,a)=>{for(var s=a>1?void 0:a?L(e,t):e,r=i.length-1,n;r>=0;r--)(n=i[r])&&(s=(a?n(e,t,s):n(s))||s);return a&&s&&B(e,t,s),s};exports.PktDateTags=class extends l.PktElement{constructor(){super(...arguments),this.dates=[],this.dateformat="dd.MM.yyyy",this.className="pkt-datepicker__tags",this.idBase=O.uuidish()}render(){return this.classes={"pkt-date-tags":!0,[this.className]:!0},l.x`
+      <div class=${g.e(this.classes)} aria-live="polite">
+        ${Array.isArray(this.dates)&&this.dates[0]?_.c(c.sortDates((this.dates??[]).filter(Boolean)),e=>e,e=>{var t;return l.x` <pkt-tag
+                  id=${this.idBase+e+"-tag"}
+                  closeTag
+                  @close=${()=>{this.dispatchEvent(new CustomEvent("date-tag-removed",{detail:e}))}}
+                  .ariaLabel=${`${(t=this.strings)==null?void 0:t.calendar.deleteDate} ${u.fromISOtoLocal(e,this.dateformat)}`}
+                >
+                  <time datetime=${e}>${u.fromISOtoLocal(e,this.dateformat)}</time>
+                </pkt-tag>`}):l.E}
+      </div>
+    `}};k([l.n({type:Array})],exports.PktDateTags.prototype,"dates",2);k([l.n({type:String})],exports.PktDateTags.prototype,"dateformat",2);k([l.n({type:String,attribute:"class"})],exports.PktDateTags.prototype,"className",2);k([l.n({type:String,attribute:"id-base"})],exports.PktDateTags.prototype,"idBase",2);exports.PktDateTags=k([l.t("pkt-date-tags")],exports.PktDateTags);const F={dateformat:{default:"dd.MM.yyyy"},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},v={props:F};var q=Object.defineProperty,E=Object.getOwnPropertyDescriptor,o=(i,e,t,a)=>{for(var s=a>1?void 0:a?E(e,t):e,r=i.length-1,n;r>=0;r--)(n=i[r])&&(s=(a?n(e,t,s):n(s))||s);return a&&s&&q(e,t,s),s};exports.PktDatepicker=class extends S.PktInputElement{constructor(){super(),this._valueProperty="",this._value=[],this.label="Datovelger",this.dateformat=v.props.dateformat.default,this.multiple=v.props.multiple.default,this.maxlength=null,this.range=v.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=v.props.weeknumbers.default,this.withcontrols=v.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=p.e(),this.inputRefTo=p.e(),this.btnRef=p.e(),this.calRef=p.e(),this.popupRef=p.e(),this.helptextSlot=p.e(),this.addToSelected=e=>{C.addToSelected(e,this.calRef,this.min,this.max)},this.slotController=new T.PktSlotController(this,this.helptextSlot)}get value(){return this._valueProperty}set value(e){const t=this._valueProperty;this._valueProperty=Array.isArray(e)?e.join(","):e||"",this.valueChanged(this._valueProperty,t),this.requestUpdate("value",t)}get inputType(){return A.getInputType()}connectedCallback(){super.connectedCallback(),this.timezone&&this.timezone!==window.pktTz&&(window.pktTz=this.timezone),this.name=c.normalizeNameForMultiple(this.name,this.multiple,this.range)||this.name,this.documentClickListener=$.createDocumentClickListener(this.inputRef,this.inputRefTo,this.btnRef,()=>this.calendarOpen,this.onBlur.bind(this),this.hideCalendar.bind(this)),this.documentKeydownListener=$.createDocumentKeydownListener(()=>this.calendarOpen,this.hideCalendar.bind(this)),document.addEventListener("click",this.documentClickListener),document.addEventListener("keydown",this.documentKeydownListener)}disconnectedCallback(){super.disconnectedCallback(),this.documentClickListener&&document.removeEventListener("click",this.documentClickListener),this.documentKeydownListener&&document.removeEventListener("keydown",this.documentKeydownListener)}onInput(){this.dispatchEvent(new Event("input",{bubbles:!0}))}valueChanged(e,t){if(e===t)return;const a=c.parseValue(e),s=this.multiple&&a.length>1?c.filterSelectableDates(a,this.min,this.max,this.excludedates,this.excludeweekdays):a;if(this.range&&!c.validateRangeOrder(s)){this._value=[],this._valueProperty="",super.valueChanged("",t);return}this._value=s;const r=c.formatValue(s);this._valueProperty!==r&&(this._valueProperty=r),super.valueChanged(r,t)}attributeChangedCallback(e,t,a){e==="value"&&this.value!==t&&this.valueChanged(a,t),e==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=c.normalizeStringArray(a||"")),e==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=c.normalizeStringArray(a||"")),super.attributeChangedCallback(e,t,a)}updated(e){if(e.has("value")){const t=Array.isArray(this.value)?this.value.join(","):this.value,a=e.get("value"),s=Array.isArray(a)?a.join(","):a;this.valueChanged(t,s)}(e.has("multiple")||e.has("range"))&&(this.name=c.normalizeNameForMultiple(this.name,this.multiple,this.range)||this.name),e.has("multiple")&&(this.multiple&&!Array.isArray(this._value)?this._value=c.parseValue(this.value):!this.multiple&&Array.isArray(this._value)&&(this._value=this._value.filter(Boolean)),!this.multiple&&!this.range&&Array.isArray(this._value)&&(this._value=[this._value[0]??""])),super.updated(e)}renderInput(){return l.x`
+      <input
+        class="${g.e(this.inputClasses)}"
+        .type=${this.inputType}
+        id="${this.id}-input"
+        .value=${this._value[0]??""}
+        min=${d.o(this.min)}
+        max=${d.o(this.max)}
+        placeholder=${d.o(this.placeholder)}
+        ?readonly=${this.readonly}
+        aria-describedby="${this.id}-helptext"
+        @click=${e=>{e.preventDefault(),this.showCalendar()}}
+        ?disabled=${this.disabled}
+        @keydown=${e=>y.handleInputKeydown(e,t=>this.toggleCalendar(t),()=>f.submitFormOrFallback(this.internals,()=>{var t;return(t=this.inputRef.value)==null?void 0:t.blur()}),void 0,()=>{var t;return(t=this.inputRef.value)==null?void 0:t.blur()})}
+        @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
+        @focus=${()=>{this.onFocus(),m.isMobileSafari()&&this.showCalendar()}}
+        @blur=${e=>{var t;(t=this.calRef.value)!=null&&t.contains(e.relatedTarget)||this.onBlur(),this.manageValidity(e.target),this.value=e.target.value}}
+        @change=${e=>{this.touched=!0,e.stopImmediatePropagation()}}
+        ${p.n(this.inputRef)}
+      />
+    `}renderRangeInput(){const e=b.getRangeLabelClasses(this.showRangeLabels);return l.x`
+      ${this.showRangeLabels?l.x` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `:l.E}
+      <input
+        class=${g.e(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-input"
+        .value=${this._value[0]??""}
+        min=${d.o(this.min)}
+        max=${d.o(this.max)}
+        placeholder=${d.o(this.placeholder)}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        @click=${t=>{t.preventDefault(),this.showCalendar()}}
+        @keydown=${t=>y.handleInputKeydown(t,a=>this.toggleCalendar(a),()=>f.submitFormOrFallback(this.internals,()=>{var a;return(a=this.inputRefTo.value)==null?void 0:a.focus()}),()=>{var a;return(a=this.inputRefTo.value)==null?void 0:a.focus()},()=>{var a;return(a=this.inputRef.value)==null?void 0:a.blur()})}
+        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
+        @focus=${()=>{this.onFocus(),m.isMobileSafari()&&this.showCalendar()}}
+        @blur=${t=>{w.processRangeBlur(t,this._value,this.calRef,()=>this.clearInputValue(),a=>this.manageValidity(a))}}
+        @change=${t=>{t.stopImmediatePropagation()}}
+        ${p.n(this.inputRef)}
+      />
+      <div class="${g.e(e)}" id="${this.id}-to-label">
+        ${this.strings.generic.to}
+      </div>
+      ${this.showRangeLabels?l.E:l.x` <div class="pkt-input-separator">–</div> `}
+      <input
+        class=${g.e(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-to"
+        aria-labelledby="${this.id}-to-label"
+        .value=${this._value[1]??""}
+        min=${d.o(this.min)}
+        max=${d.o(this.max)}
+        placeholder=${d.o(this.placeholder)}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        @click=${t=>{t.preventDefault(),this.showCalendar()}}
+        @keydown=${t=>y.handleInputKeydown(t,a=>this.toggleCalendar(a),()=>f.submitFormOrFallback(this.internals,()=>{var a;return(a=this.inputRefTo.value)==null?void 0:a.blur()}),void 0,()=>{var a;return(a=this.inputRefTo.value)==null?void 0:a.blur()})}
+        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
+        @focus=${()=>{this.onFocus(),m.isMobileSafari()&&this.showCalendar()}}
+        @blur=${t=>{var a,s,r;if((a=this.calRef.value)!=null&&a.contains(t.relatedTarget)||this.onBlur(),t.target.value){this.manageValidity(t.target),f.validateDateInput(t.target,this.internals,this.min,this.max,this.strings);const n=u.fromISOToDate(t.target.value);n&&this._value[1]!==u.formatISODate(n)&&((r=(s=this.calRef)==null?void 0:s.value)==null||r.handleDateSelect(n))}}}
+        @change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
+        ${p.n(this.inputRefTo)}
+      />
+    `}renderMultipleInput(){return l.x`
+      <input
+        class=${g.e(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-input"
+        min=${d.o(this.min)}
+        max=${d.o(this.max)}
+        placeholder=${d.o(this.placeholder)}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled||this.maxlength&&this._value.length>=this.maxlength}
+        @click=${e=>{e.preventDefault(),this.showCalendar()}}
+        @blur=${e=>{var t;(t=this.calRef.value)!=null&&t.contains(e.relatedTarget)||this.onBlur(),this.addToSelected(e)}}
+        @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
+        @focus=${()=>{this.onFocus(),m.isMobileSafari()&&this.showCalendar()}}
+        @keydown=${e=>y.handleInputKeydown(e,t=>this.toggleCalendar(t),()=>f.submitFormOrFallback(this.internals,()=>{var t;return(t=this.inputRef.value)==null?void 0:t.blur()}),void 0,void 0,t=>this.addToSelected(t))}
+        @change=${e=>{this.touched=!0,e.stopImmediatePropagation()}}
+        ${p.n(this.inputRef)}
+      />
+    `}renderCalendar(){return l.x`<div
+      class="pkt-calendar-popup pkt-${this.calendarOpen?"show":"hide"}"
+      @focusout=${e=>{this.calendarOpen&&this.handleFocusOut(e)}}
+      id="${this.id}-popup"
+      ${p.n(this.popupRef)}
+    >
+      <pkt-calendar
+        id="${this.id}-calendar"
+        ?multiple=${this.multiple}
+        ?range=${this.range}
+        ?weeknumbers=${this.weeknumbers}
+        ?withcontrols=${this.withcontrols}
+        .maxMultiple=${this.maxlength}
+        .selected=${this._value}
+        .earliest=${this.min}
+        .latest=${this.max}
+        .excludedates=${Array.isArray(this.excludedates)?this.excludedates:this.excludedates.split(",")}
+        .excludeweekdays=${this.excludeweekdays}
+        .currentmonth=${this.currentmonth?u.parseISODateString(this.currentmonth):null}
+        @date-selected=${e=>{this.value=w.processDateSelection(e.detail,this.multiple,this.range),this._value=e.detail,w.updateInputValues(this.inputRef,this.inputRefTo,this._value,this.range,this.multiple,t=>this.manageValidity(t))}}
+        @close=${()=>{this.onBlur(),this.hideCalendar()}}
+        ${p.n(this.calRef)}
+      ></pkt-calendar>
+    </div>`}render(){return this.inputClasses=b.getInputClasses(this.fullwidth,this.showRangeLabels,this.multiple,this.range),this.buttonClasses=b.getButtonClasses(),l.x`
+      <pkt-input-wrapper
+        label="${this.label}"
+        forId="${this.id}-input"
+        ?counter=${this.multiple&&!!this.maxlength}
+        .counterCurrent=${this.value?this._value.length:0}
+        .counterMaxLength=${this.maxlength}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
+        ?required=${this.required}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        ?useWrapper=${this.useWrapper}
+        .optionalText=${this.optionalText}
+        .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
+        .errorMessage=${this.errorMessage}
+        .helptext=${this.helptext}
+        .helptextDropdown=${this.helptextDropdown}
+        .helptextDropdownButton=${this.helptextDropdownButton}
+        .ariaDescribedBy=${this.ariaDescribedBy}
+        class="pkt-datepicker"
+      >
+        <div class="pkt-contents" ${p.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        ${this.multiple?l.x`<pkt-date-tags
+              .dates=${this._value}
+              dateformat=${this.dateformat}
+              strings=${this.strings}
+              id-base=${this.id}
+              @date-tag-removed=${e=>{var t;(t=this.calRef.value)==null||t.handleDateSelect(u.fromISOToDate(e.detail))}}
+            ></pkt-date-tags>`:l.E}
+        <div
+          class="pkt-datepicker__inputs ${this.range&&this.showRangeLabels?"pkt-input__range-inputs":""}"
+        >
+          <div class="pkt-input__container">
+            ${this.range?this.renderRangeInput():this.multiple?this.renderMultipleInput():this.renderInput()}
+            <button
+              class="${g.e(this.buttonClasses)}"
+              type="button"
+              @click=${this.toggleCalendar}
+              @keydown=${e=>y.handleButtonKeydown(e,t=>this.toggleCalendar(t))}
+              ?disabled=${this.disabled}
+              ${p.n(this.btnRef)}
+            >
+              <pkt-icon name="calendar"></pkt-icon>
+              <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
+            </button>
+          </div>
+        </div>
+      </pkt-input-wrapper>
+      ${this.renderCalendar()}
+    `}handleCalendarPosition(){const e=this.multiple&&!!this.maxlength;C.handleCalendarPosition(this.popupRef,this.inputRef,e)}handleFocusOut(e){$.handleFocusOut(e,this,this.onBlur.bind(this),this.hideCalendar.bind(this))}async showCalendar(){var e;this.calendarOpen=!0,await I(20),this.handleCalendarPosition(),m.isMobileSafari()&&((e=this.calRef.value)==null||e.focusOnCurrentDate())}hideCalendar(){this.calendarOpen=!1}async toggleCalendar(e){e.preventDefault(),this.calendarOpen?this.hideCalendar():this.showCalendar()}clearInputValue(){this._value=[],this.value=""}};o([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",1);o([l.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);o([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);o([l.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);o([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);o([l.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);o([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);o([l.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);o([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);o([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);o([l.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);o([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);o([l.n({converter:u.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);o([l.n({converter:u.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);o([l.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);o([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);o([l.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);o([P.r()],exports.PktDatepicker.prototype,"inputClasses",2);o([P.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=o([l.t("pkt-datepicker")],exports.PktDatepicker);

package/dist/index.d.ts

@@ -662,6 +662,8 @@ export declare class PktDatepicker extends PktInputElement {
      * Element attributes and properties
      */
     private _valueProperty;
+    private documentClickListener?;
+    private documentKeydownListener?;
     get value(): string;
     set value(newValue: string | string[]);
     _value: string[];
@@ -682,11 +684,15 @@ export declare class PktDatepicker extends PktInputElement {
     timezone: string;
     inputClasses: {};
     buttonClasses: {};
+    /**
+     * Computed properties
+     */
+    get inputType(): string;
     /**
      * Housekeeping / lifecycle methods
      */
     constructor();
-    connectedCallback(): Promise<void>;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     onInput(): void;
     valueChanged(newValue: string | null, oldValue: string | null): void;

package/dist/pkt-calendar.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./calendar-CL9O0tLP.cjs"),t=e.PktCalendar;Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>e.PktCalendar});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./calendar-DH-fCGyW.cjs"),t=e.PktCalendar;Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>e.PktCalendar});exports.default=t;

package/dist/pkt-calendar.js

@@ -1,4 +1,4 @@
-import { P as a } from "./calendar-ChphTIhk.js";
+import { P as a } from "./calendar-CodWwTHM.js";
 const r = a;
 export {
   a as PktCalendar,

package/dist/pkt-datepicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-CV73pLqD.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-n49TAIAt.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;

package/dist/pkt-datepicker.js

@@ -1,4 +1,4 @@
-import { a as t } from "./datepicker-Ca552mbJ.js";
+import { a as t } from "./datepicker-BEMo4X9s.js";
 const e = t;
 export {
   t as PktDatepicker,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-ZP5-fqlt.cjs"),l=require("./accordionitem-BOmnm80g.cjs"),b=require("./backlink-BT7DO6rV.cjs"),m=require("./button-BfqxLnMT.cjs"),P=require("./calendar-CL9O0tLP.cjs"),g=require("./card-B9RPShvV.cjs"),h=require("./combobox-CNH-j9Za.cjs"),f=require("./consent-DFrsiYGQ.cjs"),y=require("./checkbox-CH8xeK-0.cjs"),t=require("./element-D62wHiNU.cjs"),O=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BfgcOXko.cjs"),j=require("./class-map-CG3vIaNm.cjs"),k=require("./datepicker-CV73pLqD.cjs"),q=require("./helptext-D1fkGmfT.cjs"),x=require("./heading-H_FWjo2k.cjs"),C=require("./icon-__Hjt2XZ.cjs"),v=require("./input-wrapper-C9rZEgju.cjs"),S=require("./link-CyiVlb-7.cjs"),$=require("./linkcard-fH9uydjS.cjs"),L=require("./loader-C-3l7kb9.cjs"),T=require("./messagebox---xPIAwR.cjs"),_=require("./modal-IjDRQfX1.cjs"),A=require("./progressbar-DJzEC7cx.cjs"),p=require("./radiobutton-DEboKECm.cjs"),B=require("./tag-BKq07hGI.cjs"),I=require("./textarea-CXu8UUsY.cjs"),D=require("./textinput-C6wccDhZ.cjs"),M=require("./select-Cf1RWSsI.cjs");var R=Object.defineProperty,H=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?H(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&R(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new O.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-ZP5-fqlt.cjs"),l=require("./accordionitem-BOmnm80g.cjs"),b=require("./backlink-BT7DO6rV.cjs"),m=require("./button-BfqxLnMT.cjs"),P=require("./calendar-DH-fCGyW.cjs"),g=require("./card-B9RPShvV.cjs"),h=require("./combobox-CNH-j9Za.cjs"),f=require("./consent-DFrsiYGQ.cjs"),y=require("./checkbox-CH8xeK-0.cjs"),t=require("./element-D62wHiNU.cjs"),O=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BfgcOXko.cjs"),j=require("./class-map-CG3vIaNm.cjs"),k=require("./datepicker-n49TAIAt.cjs"),q=require("./helptext-D1fkGmfT.cjs"),x=require("./heading-H_FWjo2k.cjs"),C=require("./icon-__Hjt2XZ.cjs"),v=require("./input-wrapper-C9rZEgju.cjs"),S=require("./link-CyiVlb-7.cjs"),$=require("./linkcard-fH9uydjS.cjs"),L=require("./loader-C-3l7kb9.cjs"),T=require("./messagebox---xPIAwR.cjs"),_=require("./modal-IjDRQfX1.cjs"),A=require("./progressbar-DJzEC7cx.cjs"),p=require("./radiobutton-DEboKECm.cjs"),B=require("./tag-BKq07hGI.cjs"),I=require("./textarea-CXu8UUsY.cjs"),D=require("./textinput-C6wccDhZ.cjs"),M=require("./select-Cf1RWSsI.cjs");var R=Object.defineProperty,H=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?H(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&R(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new O.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
       <div class="${j.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -2,8 +2,8 @@ import { P as A } from "./alert-CTTm6ugp.js";
 import { P as w, a as B } from "./accordionitem-B_h5XGCo.js";
 import { P as E } from "./backlink-Bq8O2bt8.js";
 import { P as O } from "./button-x6Xw-5w0.js";
-import { c as d } from "./calendar-ChphTIhk.js";
-import { P as j } from "./calendar-ChphTIhk.js";
+import { c as d } from "./calendar-CodWwTHM.js";
+import { P as j } from "./calendar-CodWwTHM.js";
 import { P as G } from "./card-en2KhOPO.js";
 import { P as K } from "./combobox-C_pTRtsQ.js";
 import { P as U } from "./consent-CXp0bLvg.js";
@@ -12,7 +12,7 @@ import { P as f, t as h, x as P, n, a as c } from "./element-DJZPsA_J.js";
 import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as m, n as k } from "./ref-BCGCor-j.js";
 import { e as u } from "./class-map-Dw6Wrxwi.js";
-import { P as F, a as J } from "./datepicker-Ca552mbJ.js";
+import { P as F, a as J } from "./datepicker-BEMo4X9s.js";
 import { P as V } from "./helptext-8ykxyegi.js";
 import { P as Y } from "./heading-DQ0R34j4.js";
 import { P as tt } from "./icon-B1-mkmwB.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.6.6",
+  "version": "13.6.7",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -72,5 +72,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "90347a2abe1e35e1f43eb7813d5ae6dba16f2c85"
+  "gitHead": "3e6e7610c26cf765df11747914169e5537ac5af9"
 }

package/src/components/calendar/calendar.ts

@@ -7,6 +7,8 @@ import {
   formatReadableDate,
   parseISODateString,
   todayInTz,
+  isDateSelectable,
+  newDateFromDate,
 } from '@/utils/dateutils'
 import { getWeek, eachDayOfInterval, getISODay, addDays } from 'date-fns'
 import { html, nothing, PropertyValues } from 'lit'
@@ -122,6 +124,7 @@ export class PktCalendar extends PktElement {
     if (this.selected.length === 1 && this.selected[0] === '') {
       this.selected = []
     }
+
     this._selected = this.selected.map((d: string) => parseISODateString(d))
     if (this.range && this.selected.length === 2) {
       const days = eachDayOfInterval({
@@ -134,7 +137,6 @@ export class PktCalendar extends PktElement {
         const inRange: DatesInRange = {}
         for (let i = 0; i < days.length; i++) {
           const day = days[i]
-          // A date is in range if it's between the start and end dates (exclusive)
           const isInRange = day > this._selected[0] && day < this._selected[1]
           inRange[formatISODate(day)] = isInRange
         }
@@ -147,17 +149,15 @@ export class PktCalendar extends PktElement {
   setCurrentMonth() {
     if (this.currentmonth === null && !this.currentmonthtouched) {
       this.currentmonthtouched = true
-      // Don't return here - continue to set a default currentmonth
     }
     if (this.selected.length && this.selected[0] !== '') {
       const d = parseISODateString(this.selected[this.selected.length - 1])
-      this.currentmonth = isNaN(d.getTime()) ? new Date() : d
+      this.currentmonth = isNaN(d.getTime()) ? newDateFromDate(new Date()) : d
     } else if (this.currentmonth === null) {
-      this.currentmonth = new Date()
+      this.currentmonth = newDateFromDate(new Date())
     }
-    // fallback to today if invalid
     if (!this.currentmonth || isNaN(this.currentmonth.getTime())) {
-      this.currentmonth = new Date()
+      this.currentmonth = newDateFromDate(new Date())
     }
     this.year = this.currentmonth.getFullYear()
     this.month = this.currentmonth.getMonth()
@@ -185,7 +185,6 @@ export class PktCalendar extends PktElement {
   handleArrowKey(e: KeyboardEvent, direction: number) {
     if ((e.target as HTMLElement)?.nodeName === 'INPUT') return
     if ((e.target as HTMLElement)?.nodeName === 'SELECT') return
-    // Allow arrow keys on date buttons (which have data-date attribute), but not on navigation buttons
     if (
       (e.target as HTMLElement)?.nodeName === 'BUTTON' &&
       !(e.target as HTMLElement)?.dataset?.date
@@ -363,14 +362,14 @@ export class PktCalendar extends PktElement {
     return monthView
   }
 
-  private renderDayView(dayCounter: number, today: Date, j: number) {
+  private renderDayView(dayCounter: number, today: Date) {
     const currentDate = newDateYMD(this.year, this.month, dayCounter)
     const currentDateISO = formatISODate(currentDate)
     const isToday = currentDateISO === formatISODate(today)
     const isSelected = this.selected.includes(currentDateISO)
     const ariaLabel = formatReadableDate(currentDate)
     const isDisabled =
-      this.isExcluded(j, currentDate) ||
+      this.isExcluded(currentDate) ||
       (!isSelected &&
         this.multiple &&
         this.maxMultiple > 0 &&
@@ -395,7 +394,7 @@ export class PktCalendar extends PktElement {
       'pkt-cal-today': isToday,
       'pkt-cal-selected': isSelected,
       'pkt-cal-in-range': this.inRange[currentDateISO],
-      'pkt-cal-excluded': this.isExcluded(j, currentDate),
+      'pkt-cal-excluded': this.isExcluded(currentDate),
       'pkt-cal-in-range-first':
         this.range &&
         (this.selected.length === 2 || this.rangeHovered !== null) &&
@@ -431,9 +430,9 @@ export class PktCalendar extends PktElement {
           buttonClasses,
         )}"
         @mouseover=${() =>
-          this.range && !this.isExcluded(j, currentDate) && this.handleRangeHover(currentDate)}
+          this.range && !this.isExcluded(currentDate) && this.handleRangeHover(currentDate)}
         @focus=${() => {
-          this.range && !this.isExcluded(j, currentDate) && this.handleRangeHover(currentDate)
+          this.range && !this.isExcluded(currentDate) && this.handleRangeHover(currentDate)
           this.focusedDate = currentDateISO
         }}
         aria-label="${ariaLabel}"
@@ -505,7 +504,7 @@ export class PktCalendar extends PktElement {
           )
           dayCounter++
         } else {
-          cells.push(this.renderDayView(dayCounter, today, j))
+          cells.push(this.renderDayView(dayCounter, today))
           dayCounter++
         }
       }
@@ -520,17 +519,18 @@ export class PktCalendar extends PktElement {
     return rows
   }
 
-  private isExcluded(weekday: number, date: Date) {
-    if (this.excludeweekdays.includes(weekday.toString())) return true
-    if (this.earliest && newDate(date, 'end') < newDate(this.earliest, 'start')) return true
-    if (this.latest && newDate(date, 'start') > newDate(this.latest, 'end')) return true
-    return this.excludedates.some((x: Date | string) => {
-      if (typeof x === 'string') {
-        return x === formatISODate(date)
-      } else {
-        return x.toDateString() === date.toDateString()
-      }
-    })
+  private isExcluded(date: Date) {
+    const excludedDatesStrings = this.excludedates.map((d) =>
+      typeof d === 'string' ? d : formatISODate(d),
+    )
+
+    return !isDateSelectable(
+      date,
+      this.earliest,
+      this.latest,
+      excludedDatesStrings,
+      this.excludeweekdays,
+    )
   }
 
   isPrevMonthAllowed() {
@@ -564,7 +564,7 @@ export class PktCalendar extends PktElement {
   private changeMonth(year: number, month: number) {
     this.year = typeof year === 'string' ? parseInt(year) : year
     this.month = typeof month === 'string' ? parseInt(month) : month
-    this.currentmonth = new Date(this.year, this.month, 1)
+    this.currentmonth = newDateFromDate(new Date(this.year, this.month, 1))
     this.tabIndexSet = 0
     this.focusedDate = null
     this.selectableDates = []
@@ -605,7 +605,6 @@ export class PktCalendar extends PktElement {
     this.selected = [...this.selected, formatISODate(selectedDate)]
     this._selected = [...this._selected, selectedDate]
 
-    // Update range styling if in range mode
     if (this.range && this.selected.length === 2) {
       this.convertSelected()
       this.close()
@@ -678,7 +677,6 @@ export class PktCalendar extends PktElement {
       if (Array.isArray(days) && days.length) {
         for (let i = 0; i < days.length; i++) {
           const day = days[i]
-          // A date is in range if it's between the start and hovered end dates (exclusive)
           const isInRange = day > this._selected[0] && day < date
           this.inRange[formatISODate(day)] = isInRange
         }
@@ -714,7 +712,7 @@ export class PktCalendar extends PktElement {
   }
 
   public focusOnCurrentDate() {
-    const currentDateISO = formatISODate(newDate())
+    const currentDateISO = formatISODate(newDateFromDate(new Date()))
     const el = this.querySelector(`button[data-date="${currentDateISO}"]`)
     if (el instanceof HTMLButtonElement) {
       this.focusedDate = currentDateISO

package/src/components/datepicker/date-tags.ts

@@ -6,6 +6,7 @@ import { repeat } from 'lit/directives/repeat.js'
 
 import '@/components/tag'
 import { fromISOtoLocal } from '@/utils/dateutils'
+import { valueUtils } from './datepicker-utils'
 import { uuidish } from '@/utils/stringutils'
 
 type TYear = `${number}${number}${number}${number}`
@@ -38,7 +39,7 @@ export class PktDateTags extends PktElement {
       <div class=${classMap(this.classes)} aria-live="polite">
         ${Array.isArray(this.dates) && !!this.dates[0]
           ? repeat(
-              (this.dates ?? []).filter(Boolean).sort(),
+              valueUtils.sortDates((this.dates ?? []).filter(Boolean)),
               (date) => date,
               (date) =>
                 html` <pkt-tag