@oslokommune/punkt-elements 12.3.12 → 12.4.0

package/dist/index-Bc9mksHI.cjs

@@ -0,0 +1,90 @@
+"use strict";const a=require("./index-BUZITHLd.cjs"),v=require("./converters-DhM11VlY.cjs"),O=require("./directive-19_ixLKS.cjs"),$=require("./class-map-BQ5k1q3A.cjs");require("./index-BFqUD8HI.cjs");function k(i){const e=Object.prototype.toString.call(i);return i instanceof Date||typeof i=="object"&&e==="[object Date]"?new i.constructor(+i):typeof i=="number"||e==="[object Number]"||typeof i=="string"||e==="[object String]"?new Date(i):new Date(NaN)}function D(i,e){return i instanceof Date?new i.constructor(e):new Date(e)}const S=6048e5,P=864e5;let _={};function w(){return _}function m(i,e){var h,c,d,u;const t=w(),s=(e==null?void 0:e.weekStartsOn)??((c=(h=e==null?void 0:e.locale)==null?void 0:h.options)==null?void 0:c.weekStartsOn)??t.weekStartsOn??((u=(d=t.locale)==null?void 0:d.options)==null?void 0:u.weekStartsOn)??0,n=k(i),r=n.getDay(),l=(r<s?7:0)+r-s;return n.setDate(n.getDate()-l),n.setHours(0,0,0,0),n}function b(i,e){const t=k(i.start),s=k(i.end);let n=+t>+s;const r=n?+t:+s,l=n?s:t;l.setHours(0,0,0,0);let h=1;const c=[];for(;+l<=r;)c.push(k(l)),l.setDate(l.getDate()+h),l.setHours(0,0,0,0);return n?c.reverse():c}function M(i,e){var u,p,f,y;const t=k(i),s=t.getFullYear(),n=w(),r=(e==null?void 0:e.firstWeekContainsDate)??((p=(u=e==null?void 0:e.locale)==null?void 0:u.options)==null?void 0:p.firstWeekContainsDate)??n.firstWeekContainsDate??((y=(f=n.locale)==null?void 0:f.options)==null?void 0:y.firstWeekContainsDate)??1,l=D(i,0);l.setFullYear(s+1,0,r),l.setHours(0,0,0,0);const h=m(l,e),c=D(i,0);c.setFullYear(s,0,r),c.setHours(0,0,0,0);const d=m(c,e);return t.getTime()>=h.getTime()?s+1:t.getTime()>=d.getTime()?s:s-1}function A(i,e){var h,c,d,u;const t=w(),s=(e==null?void 0:e.firstWeekContainsDate)??((c=(h=e==null?void 0:e.locale)==null?void 0:h.options)==null?void 0:c.firstWeekContainsDate)??t.firstWeekContainsDate??((u=(d=t.locale)==null?void 0:d.options)==null?void 0:u.firstWeekContainsDate)??1,n=M(i,e),r=D(i,0);return r.setFullYear(n,0,s),r.setHours(0,0,0,0),m(r,e)}function x(i,e){const t=k(i),s=+m(t,e)-+A(t,e);return Math.round(s/S)+1}function I(i){let t=k(i).getDay();return t===0&&(t=7),t}const T="pkt-calendar",E={id:{type:"string",name:"ID",description:"Unique identifier for the calendar"},currentmonth:{type:"date",converter:"stringToDate",description:"The current month to display"},selected:{type:"array",converter:"csvToArray",reflect:!0,items:{type:"date"},description:"Array of selected dates"},excludeweekdays:{type:"array",converter:"csvToArray",items:{type:"string"},description:"Array of weekdays (1-7) to exclude"},excludedates:{type:"array",converter:"stringsToDate",items:{type:"date"},description:"Array of specific dates to exclude"},earliest:{type:"date",converter:"stringToDate",default:null,description:"Earliest selectable date"},latest:{type:"date",converter:"stringToDate",default:null,description:"Latest selectable date"},weeknumbers:{type:"boolean",reflect:!0,default:!1,description:"Show week numbers in calendar"},withcontrols:{type:"boolean",reflect:!0,default:!1,description:"Show month and year navigation controls"},multiple:{type:"boolean",reflect:!0,default:!1,description:"Allow multiple date selection"},maxMultiple:{type:"number",default:4,description:"Maximum number of dates that can be selected"},range:{type:"boolean",reflect:!0,default:!1,description:"Allow date range selection"}},R={"date-selected":{description:"Returns ISO formatted date string"}},g={name:T,"css-class":"pkt-calendar",props:E,events:R};var H=Object.defineProperty,W=Object.getOwnPropertyDescriptor,o=(i,e,t,s)=>{for(var n=s>1?void 0:s?W(e,t):e,r=i.length-1,l;r>=0;r--)(l=i[r])&&(n=(s?l(e,t,n):l(n))||n);return s&&n&&H(e,t,n),n};exports.PktCalendar=class extends a.PktElement{constructor(){super(),this.multiple=g.props.multiple.default,this.maxMultiple=g.props.maxMultiple.default,this.range=g.props.range.default,this.weeknumbers=g.props.weeknumbers.default,this.withcontrols=g.props.withcontrols.default,this.selected=[],this.earliest=g.props.earliest.default,this.latest=g.props.latest.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.dayStrings=this.strings.dates.daysShort,this.monthStrings=this.strings.dates.months,this.weekString=this.strings.dates.week,this.prevMonthString=this.strings.dates.prevMonth,this.nextMonthString=this.strings.dates.nextMonth,this._selected=[],this.year=0,this.month=0,this.week=0,this.rangeHovered=null,this.inRange={},this.focusedDate=null,this.selectableDates=[],this.currentmonthtouched=!1}connectedCallback(){super.connectedCallback()}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}attributeChangedCallback(e,t,s){e==="selected"&&s&&this.convertSelected(),super.attributeChangedCallback(e,t,s)}updated(e){e.has("selected")&&this.convertSelected(),super.updated(e)}convertSelected(){if(typeof this.selected=="string"&&(this.selected=this.selected.split(",")),this.selected.length===1&&this.selected[0]===""&&(this.selected=[]),this._selected=this.selected.map(e=>new Date(e)),this.range&&this.selected.length===2){const e=b({start:new Date(this.selected[0]),end:new Date(this.selected[1])});if(this.inRange={},Array.isArray(e)&&e.length){const t={};for(let s=0;s<e.length;s++)t[this.formatISODate(e[s])]=this.isInRange(e[s]);this.inRange=t}}this.setCurrentMonth()}setCurrentMonth(){if(this.currentmonth===null&&!this.currentmonthtouched){this.currentmonthtouched=!0;return}this.selected.length&&this.selected[0]!==""?this.currentmonth=new Date(this.selected[this.selected.length-1]):this.currentmonth===null&&(this.currentmonth=new Date),this.year=this.currentmonth.getFullYear(),this.month=this.currentmonth.getMonth()}handleKeydown(e){switch(e.key){case"ArrowLeft":this.handleArrowKey(e,-1);break;case"ArrowRight":this.handleArrowKey(e,1);break;case"ArrowUp":this.handleArrowKey(e,-7);break;case"ArrowDown":this.handleArrowKey(e,7);break}}handleArrowKey(e,t){if(e.preventDefault(),!this.focusedDate)return;const s=new Date(this.focusedDate);let n=new Date(s.setDate(s.getDate()+t));if(n){let r=this.querySelector(`div[data-date="${this.formatISODate(n)}"]`);if(r instanceof HTMLDivElement){if(r.dataset.disabled){let l=new Date(s.setDate(s.getDate()+t)),h=this.querySelector(`div[data-date="${this.formatISODate(l)}"]`);for(;h&&h instanceof HTMLDivElement&&h.dataset.disabled;)l=new Date(l.setDate(l.getDate()+t)),h=this.querySelector(`div[data-date="${this.formatISODate(l)}"]`);r=h}r instanceof HTMLDivElement&&!r.dataset.disabled&&r.focus()}}}render(){return a.ke`
+      <div
+        class="pkt-calendar ${this.weeknumbers?"pkt-cal-weeknumbers":a.D}"
+        @focusout=${this.closeEvent}
+        @keydown=${e=>{e.key==="Escape"&&(e.preventDefault(),this.close())}}
+      >
+        <nav class="pkt-cal-month-nav">
+          <div
+            @click=${this.isPrevMonthAllowed()&&this.prevMonth}
+            @keydown=${e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.isNextMonthAllowed()&&this.prevMonth())}}
+            class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+            .data-disabled=${this.isPrevMonthAllowed()?a.D:"disabled"}
+            ?aria-disabled=${!this.isPrevMonthAllowed()}
+            tabindex="0"
+          >
+            <pkt-icon class="pkt-btn__icon" name="chevron-thin-left"></pkt-icon>
+            <span class="pkt-btn__text">${this.prevMonthString}</span>
+          </div>
+          ${this.renderMonthNav()}
+          <div
+            @click=${this.isNextMonthAllowed()&&this.nextMonth}
+            @keydown=${e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.isNextMonthAllowed()&&this.nextMonth())}}
+            class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+            .data-disabled=${this.isNextMonthAllowed()?a.D:"disabled"}
+            ?aria-disabled=${!this.isNextMonthAllowed()}
+            tabindex="0"
+          >
+            <pkt-icon class="pkt-btn__icon" name="chevron-thin-right"></pkt-icon>
+            <span class="pkt-btn__text">${this.nextMonthString}</span>
+          </div>
+        </nav>
+        <table
+          class="pkt-cal-days pkt-txt-12-medium"
+          role="grid"
+          ?aria-multiselectable=${this.range||this.multiple}
+        >
+          ${this.renderDayNames()} ${this.renderCalendarBody()}
+        </table>
+      </div>
+    `}renderDayNames(){const e=[];this.weeknumbers&&e.push(a.ke`<td><div>${this.weekString}<div></td>`);for(let t=0;t<this.dayStrings.length;t++)e.push(a.ke`<td><div>${this.dayStrings[t]}</div></td>`);return a.ke`<tr class="pkt-cal-week-row" role="presentation">
+      ${e}
+    </tr>`}renderMonthNav(){let e=[];return this.withcontrols?e.push(a.ke`<div class="pkt-cal-month-picker">
+          <select
+            class="pkt-input pkt-input-compact"
+            @change=${t=>{this.changeMonth(this.year,t.target.value)}}
+          >
+            ${this.monthStrings.map((t,s)=>a.ke`<option value=${s} ?selected=${this.month===s}>${t}</option>`)}
+          </select>
+          <input
+            class="pkt-input pkt-cal-input-year pkt-input-compact"
+            type="number"
+            size="4"
+            placeholder="0000"
+            @change=${t=>{this.changeMonth(t.target.value,this.month)}}
+            .value=${this.year}
+          />
+        </div> `):e.push(a.ke`<div class="pkt-txt-16-medium" aria-live="polite">
+          ${this.monthStrings[this.month]} ${this.year}
+        </div>`),e}renderDayView(e,t,s){const n=new Date(this.year,this.month,e,12),r=this.formatISODate(n),l=r===this.formatISODate(t),h=this.selected.includes(r),c=this.isExcluded(s,n)||!h&&this.multiple&&this.maxMultiple>0&&this.selected.length>=this.maxMultiple,d=this.focusedDate?this.focusedDate===r?"0":"-1":e===1?"0":"-1";this.selectableDates.push({currentDateISO:r,isDisabled:c});const u={"pkt-cal-today":l,"pkt-cal-selected":h,"pkt-cal-in-range":this.inRange[r],"pkt-cal-excluded":this.isExcluded(s,n),"pkt-cal-in-range-first":this.range&&(this.selected.length===2||this.rangeHovered!==null)&&r===this.selected[0],"pkt-cal-in-range-last":this.range&&this.selected.length===2&&r===this.selected[1],"pkt-cal-range-hover":this.rangeHovered!==null&&r===this.formatISODate(this.rangeHovered)};return a.ke`<td class=${$.Rt(u)}>
+      <div
+        ?aria-selected=${h}
+        role="gridcell"
+        class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
+        @mouseover=${()=>this.range&&!this.isExcluded(s,n)&&this.handleRangeHover(n)}
+        @focus=${()=>{this.range&&!this.isExcluded(s,n)&&this.handleRangeHover(n),this.focusedDate=r}}
+        tabindex=${d}
+        data-disabled=${c?"disabled":a.D}
+        data-date=${r}
+        @keydown=${p=>{(p.key==="Enter"||p.key===" ")&&(p.preventDefault(),this.handleDateSelect(n))}}
+        @click=${p=>{c||(p.preventDefault(),this.handleDateSelect(n))}}
+      >
+        <span class="pkt-btn__text pkt-txt-14-light">${e}</span>
+      </div>
+    </td>`}renderCalendarBody(){const e=new Date,t=new Date(this.year,this.month,1,12),s=new Date(this.year,this.month+1,0,12),n=(t.getDay()+6)%7,r=s.getDate(),l=Math.ceil((r+n)/7),c=new Date(this.year,this.month,0,12).getDate();let d=1;this.week=x(new Date(this.year,this.month,1,12));const u=[];for(let p=0;p<l;p++){const f=[];this.weeknumbers&&f.push(a.ke`<td class="pkt-cal-week">${this.week}</td>`),this.week++;for(let y=1;y<8;y++)if(p===0&&y<n+1){const C=c-(n-y);f.push(a.ke`<td class="pkt-cal-other">
+              <div
+                class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
+                data-disabled="disabled"
+              >
+                <span class="pkt-btn__text pkt-txt-14-light">${C}</span>
+              </div>
+            </td>`)}else d>r?(f.push(a.ke`<td class="pkt-cal-other">
+              <div
+                class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
+                data-disabled="disabled"
+              >
+                <span class="pkt-btn__text pkt-txt-14-light">${d-r}</span>
+              </div>
+            </td>`),d++):(f.push(this.renderDayView(d,e,y)),d++);u.push(a.ke`<tr class="pkt-cal-week-row" role="row">
+          ${f}
+        </tr>`)}return u}isExcluded(e,t){return this.excludeweekdays.includes(e.toString())||this.earliest&&t<new Date(this.earliest)||this.latest&&t>new Date(this.latest)?!0:this.excludedates.some(s=>typeof s=="string"?s===this.formatISODate(t):s.toDateString()===t.toDateString())}formatISODate(e){return e.toISOString().split("T")[0]}isPrevMonthAllowed(){const e=new Date(this.year,this.month,0,12);return!(this.earliest&&new Date(this.earliest)>e)}prevMonth(){const e=this.month===0?11:this.month-1,t=this.month===0?this.year-1:this.year;this.changeMonth(t,e)}isNextMonthAllowed(){const e=new Date(this.year,this.month===11?0:this.month+1,1,12);return!(this.latest&&new Date(this.latest)<e)}nextMonth(){const e=this.month===11?0:this.month+1,t=this.month===11?this.year+1:this.year;this.changeMonth(t,e)}changeMonth(e,t){this.year=e,this.month=t,this.selectableDates=[],this.requestUpdate()}isInRange(e){if(this.range&&this.selected.length===2){if(e>new Date(this.selected[0])&&e<new Date(this.selected[1]))return!0}else if(this.range&&this.selected.length===1&&this.rangeHovered&&e>new Date(this.selected[0])&&e<this.rangeHovered)return!0;return!1}isRangeAllowed(e){let t=!0;if(this._selected.length===1){const s=b({start:this._selected[0],end:e});if(Array.isArray(s)&&s.length)for(let n=0;n<s.length;n++)this.excludedates.forEach(r=>{r>this._selected[0]&&r<e&&(t=!1)}),this.excludeweekdays.includes(I(s[n]).toString())&&(t=!1)}return t}emptySelected(){this.selected=[],this._selected=[],this.inRange={}}addToSelected(e){this.selected.includes(this.formatISODate(e))||(this.selected=[...this.selected,this.formatISODate(e)],this._selected=[...this._selected,e],this.range&&this.selected.length===2&&this.close())}removeFromSelected(e){if(this.selected.length===1)this.emptySelected();else{const t=this.selected.indexOf(this.formatISODate(e)),s=[...this.selected],n=[...this._selected];s.splice(t,1),n.splice(t,1),this.selected=s,this._selected=n}}toggleSelected(e){const t=this.formatISODate(e);this.selected.includes(t)?this.removeFromSelected(e):this.maxMultiple&&this.selected.length>=this.maxMultiple||this.addToSelected(e)}handleRangeSelect(e){const t=this.formatISODate(e);return this.selected.includes(t)?this.selected.indexOf(t)===0?this.emptySelected():this.removeFromSelected(e):this.selected.length>1?(this.emptySelected(),this.addToSelected(e)):(this.selected.length===1&&!this.isRangeAllowed(e)&&this.emptySelected(),this.selected.length===1&&this._selected[0]>e&&this.emptySelected(),this.addToSelected(e)),Promise.resolve()}handleRangeHover(e){if(this.range&&this._selected.length===1&&this.isRangeAllowed(e)&&this._selected[0]<e){this.rangeHovered=e,this.inRange={};const t=b({start:this._selected[0],end:e});if(Array.isArray(t)&&t.length)for(let s=0;s<t.length;s++)this.inRange[this.formatISODate(t[s])]=this.isInRange(t[s])}else this.rangeHovered=null}handleDateSelect(e){if(e)return this.range?this.handleRangeSelect(e):this.multiple?this.toggleSelected(e):(this.selected.includes(this.formatISODate(e))?this.emptySelected():(this.emptySelected(),this.addToSelected(e)),this.close()),this.dispatchEvent(new CustomEvent("date-selected",{detail:this.selected,bubbles:!0,composed:!0})),Promise.resolve()}focusOnCurrentDate(){const e=this.formatISODate(new Date),t=this.querySelector(`div[data-date="${e}"]`);if(t instanceof HTMLDivElement)t.focus();else{const s=this.selectableDates.find(n=>!n.isDisabled);if(s){const n=this.querySelector(`div[data-date="${s.currentDateISO}"]`);n instanceof HTMLDivElement&&n.focus()}}}closeEvent(e){this.contains(e.relatedTarget)||this.close()}close(){this.dispatchEvent(new CustomEvent("close",{detail:!0,bubbles:!0,composed:!0}))}};o([a.n({type:Boolean})],exports.PktCalendar.prototype,"multiple",2);o([a.n({type:Number})],exports.PktCalendar.prototype,"maxMultiple",2);o([a.n({type:Boolean})],exports.PktCalendar.prototype,"range",2);o([a.n({type:Boolean})],exports.PktCalendar.prototype,"weeknumbers",2);o([a.n({type:Boolean})],exports.PktCalendar.prototype,"withcontrols",2);o([a.n({converter:v.converters.csvToArray})],exports.PktCalendar.prototype,"selected",2);o([a.n({type:String})],exports.PktCalendar.prototype,"earliest",2);o([a.n({type:String})],exports.PktCalendar.prototype,"latest",2);o([a.n({converter:v.converters.stringsToDate})],exports.PktCalendar.prototype,"excludedates",2);o([a.n({converter:v.converters.csvToArray})],exports.PktCalendar.prototype,"excludeweekdays",2);o([a.n({converter:v.converters.stringToDate})],exports.PktCalendar.prototype,"currentmonth",2);o([a.n({type:Array})],exports.PktCalendar.prototype,"dayStrings",2);o([a.n({type:Array})],exports.PktCalendar.prototype,"monthStrings",2);o([a.n({type:String})],exports.PktCalendar.prototype,"weekString",2);o([a.n({type:String})],exports.PktCalendar.prototype,"prevMonthString",2);o([a.n({type:String})],exports.PktCalendar.prototype,"nextMonthString",2);o([a.n({type:Array})],exports.PktCalendar.prototype,"_selected",2);o([a.n({type:Number})],exports.PktCalendar.prototype,"year",2);o([a.n({type:Number})],exports.PktCalendar.prototype,"month",2);o([a.n({type:Number})],exports.PktCalendar.prototype,"week",2);o([a.n({type:Date})],exports.PktCalendar.prototype,"rangeHovered",2);o([a.r()],exports.PktCalendar.prototype,"inRange",2);o([a.r()],exports.PktCalendar.prototype,"focusedDate",2);o([a.r()],exports.PktCalendar.prototype,"selectableDates",2);o([a.r()],exports.PktCalendar.prototype,"currentmonthtouched",2);exports.PktCalendar=o([O.t("pkt-calendar")],exports.PktCalendar);exports.constructFrom=D;exports.getDefaultOptions=w;exports.getWeek=x;exports.getWeekYear=M;exports.millisecondsInDay=P;exports.millisecondsInWeek=S;exports.startOfWeek=m;exports.toDate=k;

package/dist/{index-Gx8odlcY.js → index-DQ5xnGw6.js}

@@ -1,7 +1,7 @@
-import { r as O, P as _, k as f, D as w, n as c } from "./index-m5WP1NKD.js";
-import { a as b } from "./converters-DNCwIFwr.js";
-import { t as A } from "./directive-DA0-wdk7.js";
-import { R as I } from "./class-map-CL_lSLwn.js";
+import { r as b, P as $, k as f, D as w, n as c } from "./index-m5WP1NKD.js";
+import { a as S } from "./converters-DNCwIFwr.js";
+import { t as _ } from "./directive-DA0-wdk7.js";
+import { R as A } from "./class-map-CL_lSLwn.js";
 import "./index-exzYRW0z.js";
 function k(e) {
   const t = Object.prototype.toString.call(e);
@@ -10,50 +10,50 @@ function k(e) {
 function M(e, t) {
   return e instanceof Date ? new e.constructor(t) : new Date(t);
 }
-const T = 6048e5, U = 864e5;
-let E = {};
-function $() {
-  return E;
+const I = 6048e5, U = 864e5;
+let T = {};
+function O() {
+  return T;
 }
 function v(e, t) {
   var p, h, u, d;
-  const s = $(), n = (t == null ? void 0 : t.weekStartsOn) ?? ((h = (p = t == null ? void 0 : t.locale) == null ? void 0 : p.options) == null ? void 0 : h.weekStartsOn) ?? s.weekStartsOn ?? ((d = (u = s.locale) == null ? void 0 : u.options) == null ? void 0 : d.weekStartsOn) ?? 0, a = k(e), l = a.getDay(), i = (l < n ? 7 : 0) + l - n;
-  return a.setDate(a.getDate() - i), a.setHours(0, 0, 0, 0), a;
+  const s = O(), n = (t == null ? void 0 : t.weekStartsOn) ?? ((h = (p = t == null ? void 0 : t.locale) == null ? void 0 : p.options) == null ? void 0 : h.weekStartsOn) ?? s.weekStartsOn ?? ((d = (u = s.locale) == null ? void 0 : u.options) == null ? void 0 : d.weekStartsOn) ?? 0, i = k(e), o = i.getDay(), a = (o < n ? 7 : 0) + o - n;
+  return i.setDate(i.getDate() - a), i.setHours(0, 0, 0, 0), i;
 }
-function S(e, t) {
+function x(e, t) {
   const s = k(e.start), n = k(e.end);
-  let a = +s > +n;
-  const l = a ? +s : +n, i = a ? n : s;
-  i.setHours(0, 0, 0, 0);
+  let i = +s > +n;
+  const o = i ? +s : +n, a = i ? n : s;
+  a.setHours(0, 0, 0, 0);
   let p = 1;
   const h = [];
-  for (; +i <= l; )
-    h.push(k(i)), i.setDate(i.getDate() + p), i.setHours(0, 0, 0, 0);
-  return a ? h.reverse() : h;
+  for (; +a <= o; )
+    h.push(k(a)), a.setDate(a.getDate() + p), a.setHours(0, 0, 0, 0);
+  return i ? h.reverse() : h;
 }
 function C(e, t) {
   var d, y, m, D;
-  const s = k(e), n = s.getFullYear(), a = $(), l = (t == null ? void 0 : t.firstWeekContainsDate) ?? ((y = (d = t == null ? void 0 : t.locale) == null ? void 0 : d.options) == null ? void 0 : y.firstWeekContainsDate) ?? a.firstWeekContainsDate ?? ((D = (m = a.locale) == null ? void 0 : m.options) == null ? void 0 : D.firstWeekContainsDate) ?? 1, i = M(e, 0);
-  i.setFullYear(n + 1, 0, l), i.setHours(0, 0, 0, 0);
-  const p = v(i, t), h = M(e, 0);
-  h.setFullYear(n, 0, l), h.setHours(0, 0, 0, 0);
+  const s = k(e), n = s.getFullYear(), i = O(), o = (t == null ? void 0 : t.firstWeekContainsDate) ?? ((y = (d = t == null ? void 0 : t.locale) == null ? void 0 : d.options) == null ? void 0 : y.firstWeekContainsDate) ?? i.firstWeekContainsDate ?? ((D = (m = i.locale) == null ? void 0 : m.options) == null ? void 0 : D.firstWeekContainsDate) ?? 1, a = M(e, 0);
+  a.setFullYear(n + 1, 0, o), a.setHours(0, 0, 0, 0);
+  const p = v(a, t), h = M(e, 0);
+  h.setFullYear(n, 0, o), h.setHours(0, 0, 0, 0);
   const u = v(h, t);
   return s.getTime() >= p.getTime() ? n + 1 : s.getTime() >= u.getTime() ? n : n - 1;
 }
-function R(e, t) {
+function E(e, t) {
   var p, h, u, d;
-  const s = $(), n = (t == null ? void 0 : t.firstWeekContainsDate) ?? ((h = (p = t == null ? void 0 : t.locale) == null ? void 0 : p.options) == null ? void 0 : h.firstWeekContainsDate) ?? s.firstWeekContainsDate ?? ((d = (u = s.locale) == null ? void 0 : u.options) == null ? void 0 : d.firstWeekContainsDate) ?? 1, a = C(e, t), l = M(e, 0);
-  return l.setFullYear(a, 0, n), l.setHours(0, 0, 0, 0), v(l, t);
+  const s = O(), n = (t == null ? void 0 : t.firstWeekContainsDate) ?? ((h = (p = t == null ? void 0 : t.locale) == null ? void 0 : p.options) == null ? void 0 : h.firstWeekContainsDate) ?? s.firstWeekContainsDate ?? ((d = (u = s.locale) == null ? void 0 : u.options) == null ? void 0 : d.firstWeekContainsDate) ?? 1, i = C(e, t), o = M(e, 0);
+  return o.setFullYear(i, 0, n), o.setHours(0, 0, 0, 0), v(o, t);
 }
-function x(e, t) {
-  const s = k(e), n = +v(s, t) - +R(s, t);
-  return Math.round(n / T) + 1;
+function R(e, t) {
+  const s = k(e), n = +v(s, t) - +E(s, t);
+  return Math.round(n / I) + 1;
 }
 function H(e) {
   let s = k(e).getDay();
   return s === 0 && (s = 7), s;
 }
-const N = "pkt-calendar", P = {
+const N = "pkt-calendar", W = {
   id: {
     type: "string",
     name: "ID",
@@ -130,62 +130,64 @@ const N = "pkt-calendar", P = {
     default: !1,
     description: "Allow date range selection"
   }
-}, W = {
+}, P = {
   "date-selected": {
     description: "Returns ISO formatted date string"
   }
 }, g = {
   name: N,
   "css-class": "pkt-calendar",
-  props: P,
-  events: W
+  props: W,
+  events: P
 };
-var Y = Object.defineProperty, F = Object.getOwnPropertyDescriptor, o = (e, t, s, n) => {
-  for (var a = n > 1 ? void 0 : n ? F(t, s) : t, l = e.length - 1, i; l >= 0; l--)
-    (i = e[l]) && (a = (n ? i(t, s, a) : i(a)) || a);
-  return n && a && Y(t, s, a), a;
+var Y = Object.defineProperty, F = Object.getOwnPropertyDescriptor, l = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? F(t, s) : t, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (i = (n ? a(t, s, i) : a(i)) || i);
+  return n && i && Y(t, s, i), i;
 };
-let r = class extends _ {
+let r = class extends $ {
   /**
    * If we are initializing props, slots and events from specs, we should do it in the constructor
    */
   constructor() {
-    super(), this.multiple = g.props.multiple.default, this.maxMultiple = g.props.maxMultiple.default, this.range = g.props.range.default, this.weeknumbers = g.props.weeknumbers.default, this.withcontrols = g.props.withcontrols.default, this.selected = [], this.earliest = g.props.earliest.default, this.latest = g.props.latest.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = /* @__PURE__ */ new Date(), this.dayStrings = this.strings.dates.daysShort, this.monthStrings = this.strings.dates.months, this.weekString = this.strings.dates.week, this.prevMonthString = this.strings.dates.prevMonth, this.nextMonthString = this.strings.dates.nextMonth, this._selected = [], this.year = 0, this.month = 0, this.week = 0, this.rangeHovered = null, this.inRange = {}, this.focusedDate = null, this.selectableDates = [];
+    super(), this.multiple = g.props.multiple.default, this.maxMultiple = g.props.maxMultiple.default, this.range = g.props.range.default, this.weeknumbers = g.props.weeknumbers.default, this.withcontrols = g.props.withcontrols.default, this.selected = [], this.earliest = g.props.earliest.default, this.latest = g.props.latest.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.dayStrings = this.strings.dates.daysShort, this.monthStrings = this.strings.dates.months, this.weekString = this.strings.dates.week, this.prevMonthString = this.strings.dates.prevMonth, this.nextMonthString = this.strings.dates.nextMonth, this._selected = [], this.year = 0, this.month = 0, this.week = 0, this.rangeHovered = null, this.inRange = {}, this.focusedDate = null, this.selectableDates = [], this.currentmonthtouched = !1;
   }
   /**
    * Runs on mount, used to set up various values and whatever you need to run
    */
   connectedCallback() {
-    const e = this.currentmonth;
-    this.year = e.getFullYear(), this.month = e.getMonth(), this.week = x(new Date(this.year, this.month, 1, 12)), this.selected && this.selected.length && this.selected.forEach((t) => {
-      this._selected.push(new Date(t));
-    }), super.connectedCallback();
+    super.connectedCallback();
   }
   disconnectedCallback() {
     this.removeEventListener("keydown", this.handleKeydown), super.disconnectedCallback();
   }
   attributeChangedCallback(e, t, s) {
-    e === "currentmonth" && s && (this.currentmonth = new Date(s), this.year = this.currentmonth.getFullYear(), this.month = this.currentmonth.getMonth(), this.week = x(new Date(this.year, this.month, 1, 12))), e === "selected" && s && (this._selected = [], this.selected.forEach((n) => {
-      this._selected.push(new Date(n));
-    })), super.attributeChangedCallback(e, t, s);
+    e === "selected" && s && this.convertSelected(), super.attributeChangedCallback(e, t, s);
   }
   updated(e) {
-    if (e.has("selected") && this.selected.length === 2) {
-      const t = S({
+    e.has("selected") && this.convertSelected(), super.updated(e);
+  }
+  convertSelected() {
+    if (typeof this.selected == "string" && (this.selected = this.selected.split(",")), this.selected.length === 1 && this.selected[0] === "" && (this.selected = []), this._selected = this.selected.map((e) => new Date(e)), this.range && this.selected.length === 2) {
+      const e = x({
         start: new Date(this.selected[0]),
         end: new Date(this.selected[1])
       });
-      if (this.inRange = {}, Array.isArray(t) && t.length) {
-        const s = {};
-        for (let n = 0; n < t.length; n++)
-          s[this.formatISODate(t[n])] = this.isInRange(t[n]);
-        this.inRange = s;
+      if (this.inRange = {}, Array.isArray(e) && e.length) {
+        const t = {};
+        for (let s = 0; s < e.length; s++)
+          t[this.formatISODate(e[s])] = this.isInRange(e[s]);
+        this.inRange = t;
       }
     }
-    super.updated(e);
+    this.setCurrentMonth();
   }
-  firstUpdated(e) {
-    this.addEventListener("keydown", this.handleKeydown);
+  setCurrentMonth() {
+    if (this.currentmonth === null && !this.currentmonthtouched) {
+      this.currentmonthtouched = !0;
+      return;
+    }
+    this.selected.length && this.selected[0] !== "" ? this.currentmonth = new Date(this.selected[this.selected.length - 1]) : this.currentmonth === null && (this.currentmonth = /* @__PURE__ */ new Date()), this.year = this.currentmonth.getFullYear(), this.month = this.currentmonth.getMonth();
   }
   handleKeydown(e) {
     switch (e.key) {
@@ -208,15 +210,15 @@ let r = class extends _ {
     const s = new Date(this.focusedDate);
     let n = new Date(s.setDate(s.getDate() + t));
     if (n) {
-      let a = this.querySelector(`div[data-date="${this.formatISODate(n)}"]`);
-      if (a instanceof HTMLDivElement) {
-        if (a.dataset.disabled) {
-          let l = new Date(s.setDate(s.getDate() + t)), i = this.querySelector(`div[data-date="${this.formatISODate(l)}"]`);
-          for (; i && i instanceof HTMLDivElement && i.dataset.disabled; )
-            l = new Date(l.setDate(l.getDate() + t)), i = this.querySelector(`div[data-date="${this.formatISODate(l)}"]`);
-          a = i;
+      let i = this.querySelector(`div[data-date="${this.formatISODate(n)}"]`);
+      if (i instanceof HTMLDivElement) {
+        if (i.dataset.disabled) {
+          let o = new Date(s.setDate(s.getDate() + t)), a = this.querySelector(`div[data-date="${this.formatISODate(o)}"]`);
+          for (; a && a instanceof HTMLDivElement && a.dataset.disabled; )
+            o = new Date(o.setDate(o.getDate() + t)), a = this.querySelector(`div[data-date="${this.formatISODate(o)}"]`);
+          i = a;
         }
-        a instanceof HTMLDivElement && !a.dataset.disabled && a.focus();
+        i instanceof HTMLDivElement && !i.dataset.disabled && i.focus();
       }
     }
   }
@@ -302,7 +304,7 @@ let r = class extends _ {
             @change=${(t) => {
         this.changeMonth(t.target.value, this.month);
       }}
-            value="${this.year}"
+            .value=${this.year}
           />
         </div> `
     ) : e.push(
@@ -312,29 +314,29 @@ let r = class extends _ {
     ), e;
   }
   renderDayView(e, t, s) {
-    const n = new Date(this.year, this.month, e, 12), a = this.formatISODate(n), l = a === this.formatISODate(t), i = this.selected.includes(a), p = this.isExcluded(s, n) || !i && this.multiple && this.maxMultiple > 0 && this.selected.length >= this.maxMultiple, h = this.focusedDate ? this.focusedDate === a ? "0" : "-1" : e === 1 ? "0" : "-1";
-    this.selectableDates.push({ currentDateISO: a, isDisabled: p });
+    const n = new Date(this.year, this.month, e, 12), i = this.formatISODate(n), o = i === this.formatISODate(t), a = this.selected.includes(i), p = this.isExcluded(s, n) || !a && this.multiple && this.maxMultiple > 0 && this.selected.length >= this.maxMultiple, h = this.focusedDate ? this.focusedDate === i ? "0" : "-1" : e === 1 ? "0" : "-1";
+    this.selectableDates.push({ currentDateISO: i, isDisabled: p });
     const u = {
-      "pkt-cal-today": l,
-      "pkt-cal-selected": i,
-      "pkt-cal-in-range": this.inRange[a],
+      "pkt-cal-today": o,
+      "pkt-cal-selected": a,
+      "pkt-cal-in-range": this.inRange[i],
       "pkt-cal-excluded": this.isExcluded(s, n),
-      "pkt-cal-in-range-first": this.range && (this.selected.length === 2 || this.rangeHovered !== null) && a === this.selected[0],
-      "pkt-cal-in-range-last": this.range && this.selected.length === 2 && a === this.selected[1],
-      "pkt-cal-range-hover": this.rangeHovered !== null && a === this.formatISODate(this.rangeHovered)
+      "pkt-cal-in-range-first": this.range && (this.selected.length === 2 || this.rangeHovered !== null) && i === this.selected[0],
+      "pkt-cal-in-range-last": this.range && this.selected.length === 2 && i === this.selected[1],
+      "pkt-cal-range-hover": this.rangeHovered !== null && i === this.formatISODate(this.rangeHovered)
     };
-    return f`<td class=${I(u)}>
+    return f`<td class=${A(u)}>
       <div
-        ?aria-selected=${i}
+        ?aria-selected=${a}
         role="gridcell"
         class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
         @mouseover=${() => this.range && !this.isExcluded(s, n) && this.handleRangeHover(n)}
         @focus=${() => {
-      this.range && !this.isExcluded(s, n) && this.handleRangeHover(n), this.focusedDate = a;
+      this.range && !this.isExcluded(s, n) && this.handleRangeHover(n), this.focusedDate = i;
     }}
         tabindex=${h}
         data-disabled=${p ? "disabled" : w}
-        data-date=${a}
+        data-date=${i}
         @keydown=${(d) => {
       (d.key === "Enter" || d.key === " ") && (d.preventDefault(), this.handleDateSelect(n));
     }}
@@ -347,16 +349,16 @@ let r = class extends _ {
     </td>`;
   }
   renderCalendarBody() {
-    const e = /* @__PURE__ */ new Date(), t = new Date(this.year, this.month, 1, 12), s = new Date(this.year, this.month + 1, 0, 12), n = (t.getDay() + 6) % 7, a = s.getDate(), l = Math.ceil((a + n) / 7), p = new Date(this.year, this.month, 0, 12).getDate();
+    const e = /* @__PURE__ */ new Date(), t = new Date(this.year, this.month, 1, 12), s = new Date(this.year, this.month + 1, 0, 12), n = (t.getDay() + 6) % 7, i = s.getDate(), o = Math.ceil((i + n) / 7), p = new Date(this.year, this.month, 0, 12).getDate();
     let h = 1;
-    this.week = x(new Date(this.year, this.month, 1, 12));
+    this.week = R(new Date(this.year, this.month, 1, 12));
     const u = [];
-    for (let d = 0; d < l; d++) {
+    for (let d = 0; d < o; d++) {
       const y = [];
       this.weeknumbers && y.push(f`<td class="pkt-cal-week">${this.week}</td>`), this.week++;
       for (let m = 1; m < 8; m++)
         if (d === 0 && m < n + 1) {
-          const D = p - (n - m - 1);
+          const D = p - (n - m);
           y.push(
             f`<td class="pkt-cal-other">
               <div
@@ -367,13 +369,13 @@ let r = class extends _ {
               </div>
             </td>`
           );
-        } else h > a ? (y.push(
+        } else h > i ? (y.push(
           f`<td class="pkt-cal-other">
               <div
                 class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
                 data-disabled="disabled"
               >
-                <span class="pkt-btn__text pkt-txt-14-light">${h - a}</span>
+                <span class="pkt-btn__text pkt-txt-14-light">${h - i}</span>
               </div>
             </td>`
         ), h++) : (y.push(this.renderDayView(h, e, m)), h++);
@@ -408,7 +410,7 @@ let r = class extends _ {
     this.changeMonth(t, e);
   }
   changeMonth(e, t) {
-    this.year = e, this.month = t, this.selectableDates = [], this.requestUpdate("currentmonth");
+    this.year = e, this.month = t, this.selectableDates = [], this.requestUpdate();
   }
   isInRange(e) {
     if (this.range && this.selected.length === 2) {
@@ -420,14 +422,14 @@ let r = class extends _ {
   isRangeAllowed(e) {
     let t = !0;
     if (this._selected.length === 1) {
-      const s = S({
+      const s = x({
         start: this._selected[0],
         end: e
       });
       if (Array.isArray(s) && s.length)
         for (let n = 0; n < s.length; n++)
-          this.excludedates.forEach((a) => {
-            a > this._selected[0] && a < e && (t = !1);
+          this.excludedates.forEach((i) => {
+            i > this._selected[0] && i < e && (t = !1);
           }), this.excludeweekdays.includes(H(s[n]).toString()) && (t = !1);
     }
     return t;
@@ -457,7 +459,7 @@ let r = class extends _ {
   handleRangeHover(e) {
     if (this.range && this._selected.length === 1 && this.isRangeAllowed(e) && this._selected[0] < e) {
       this.rangeHovered = e, this.inRange = {};
-      const t = S({
+      const t = x({
         start: this._selected[0],
         end: e
       });
@@ -504,87 +506,90 @@ let r = class extends _ {
     );
   }
 };
-o([
-  c({ type: Boolean, reflect: !0 })
+l([
+  c({ type: Boolean })
 ], r.prototype, "multiple", 2);
-o([
+l([
   c({ type: Number })
 ], r.prototype, "maxMultiple", 2);
-o([
-  c({ type: Boolean, reflect: !0 })
+l([
+  c({ type: Boolean })
 ], r.prototype, "range", 2);
-o([
-  c({ type: Boolean, reflect: !0 })
+l([
+  c({ type: Boolean })
 ], r.prototype, "weeknumbers", 2);
-o([
-  c({ type: Boolean, reflect: !0 })
+l([
+  c({ type: Boolean })
 ], r.prototype, "withcontrols", 2);
-o([
-  c({ converter: b.csvToArray })
+l([
+  c({ converter: S.csvToArray })
 ], r.prototype, "selected", 2);
-o([
-  c({ type: String, reflect: !0 })
+l([
+  c({ type: String })
 ], r.prototype, "earliest", 2);
-o([
-  c({ type: String, reflect: !0 })
+l([
+  c({ type: String })
 ], r.prototype, "latest", 2);
-o([
-  c({ converter: b.stringsToDate })
+l([
+  c({ converter: S.stringsToDate })
 ], r.prototype, "excludedates", 2);
-o([
-  c({ converter: b.csvToArray })
+l([
+  c({ converter: S.csvToArray })
 ], r.prototype, "excludeweekdays", 2);
-o([
-  c({ converter: b.stringToDate })
+l([
+  c({ converter: S.stringToDate })
 ], r.prototype, "currentmonth", 2);
-o([
+l([
   c({ type: Array })
 ], r.prototype, "dayStrings", 2);
-o([
+l([
   c({ type: Array })
 ], r.prototype, "monthStrings", 2);
-o([
+l([
   c({ type: String })
 ], r.prototype, "weekString", 2);
-o([
+l([
   c({ type: String })
 ], r.prototype, "prevMonthString", 2);
-o([
+l([
   c({ type: String })
 ], r.prototype, "nextMonthString", 2);
-o([
+l([
   c({ type: Array })
 ], r.prototype, "_selected", 2);
-o([
+l([
   c({ type: Number })
 ], r.prototype, "year", 2);
-o([
+l([
   c({ type: Number })
 ], r.prototype, "month", 2);
-o([
+l([
   c({ type: Number })
 ], r.prototype, "week", 2);
-o([
+l([
   c({ type: Date })
 ], r.prototype, "rangeHovered", 2);
-o([
-  O()
+l([
+  b()
 ], r.prototype, "inRange", 2);
-o([
-  O()
+l([
+  b()
 ], r.prototype, "focusedDate", 2);
-o([
-  O()
+l([
+  b()
 ], r.prototype, "selectableDates", 2);
-r = o([
-  A("pkt-calendar")
+l([
+  b()
+], r.prototype, "currentmonthtouched", 2);
+r = l([
+  _("pkt-calendar")
 ], r);
 export {
   r as P,
-  T as a,
-  x as b,
+  I as a,
+  R as b,
   M as c,
-  $ as d,
+  O as d,
   C as g,
   U as m,
   v as s,

package/dist/index.d.ts

@@ -30,12 +30,12 @@ export declare class PktCalendar extends PktElement {
     range: boolean;
     weeknumbers: boolean;
     withcontrols: boolean;
-    selected: string[];
+    selected: string | string[];
     earliest: string | null;
     latest: string | null;
     excludedates: Date[];
     excludeweekdays: string[];
-    currentmonth: Date;
+    currentmonth: Date | null;
     /**
      * If we are initializing props, slots and events from specs, we should do it in the constructor
      */
@@ -59,6 +59,7 @@ export declare class PktCalendar extends PktElement {
     private inRange;
     private focusedDate;
     private selectableDates;
+    private currentmonthtouched;
     /**
      * Runs on mount, used to set up various values and whatever you need to run
      */
@@ -66,7 +67,8 @@ export declare class PktCalendar extends PktElement {
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     updated(changedProperties: PropertyValues): void;
-    protected firstUpdated(_changedProperties: PropertyValues): void;
+    convertSelected(): void;
+    setCurrentMonth(): void;
     handleKeydown(e: KeyboardEvent): void;
     handleArrowKey(e: KeyboardEvent, direction: number): void;
     /**
@@ -176,7 +178,7 @@ export declare class PktDatepicker extends PktInputElement {
     fullwidth: boolean;
     excludedates: string[];
     excludeweekdays: string[];
-    currentmonth: string;
+    currentmonth: string | null;
     calendarOpen: boolean;
     /**
      * Housekeeping / lifecycle methods

package/dist/pkt-calendar.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-BUZITHLd.cjs");require("./converters-DhM11VlY.cjs");require("./directive-19_ixLKS.cjs");require("./class-map-BQ5k1q3A.cjs");const e=require("./index-wplohQV8.cjs");require("./index-BFqUD8HI.cjs");Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>e.PktCalendar});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-BUZITHLd.cjs");require("./converters-DhM11VlY.cjs");require("./directive-19_ixLKS.cjs");require("./class-map-BQ5k1q3A.cjs");const e=require("./index-Bc9mksHI.cjs");require("./index-BFqUD8HI.cjs");Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>e.PktCalendar});

package/dist/pkt-calendar.js

@@ -2,7 +2,7 @@ import "./index-m5WP1NKD.js";
 import "./converters-DNCwIFwr.js";
 import "./directive-DA0-wdk7.js";
 import "./class-map-CL_lSLwn.js";
-import { P as e } from "./index-Gx8odlcY.js";
+import { P as e } from "./index-DQ5xnGw6.js";
 import "./index-exzYRW0z.js";
 export {
   e as PktCalendar