@oslokommune/punkt-elements 13.4.1 → 13.5.0

package/dist/{datepicker-CYOn3tRm.js → datepicker-BJKJBoy_.js}

@@ -1,16 +1,16 @@
 import { e as f } from "./class-map-BpTj9gtz.js";
 import { o } from "./if-defined-CmuO4Vz9.js";
-import { x as u, E as g, n as r, a as w } from "./element-CgEWt74-.js";
-import { r as k } from "./state-Bo2bck5_.js";
-import { n as v, f as $, a as R, b as y, d as x } from "./calendar-DevQhOup.js";
-import { P as C } from "./input-element-NnrDmp4r.js";
-import { e as m, n as p } from "./ref-BBYSqgeW.js";
-import { c as _ } from "./repeat-C8BeHwYx.js";
+import { x as p, E as g, n as r, a as R } from "./element-CgEWt74-.js";
+import { r as x } from "./state-Bo2bck5_.js";
+import { n as y, f as $, a as C, b, p as _, d as w } from "./calendar-CJSxvwAq.js";
+import { P as S } from "./input-element-NnrDmp4r.js";
+import { e as m, n as d } from "./ref-BBYSqgeW.js";
+import { c as T } from "./repeat-C8BeHwYx.js";
 import "./icon-CC1js8eR.js";
 import "./input-wrapper-Dr__Sxql.js";
 import "./tag-DyXzTY68.js";
-import { P as T } from "./pkt-slot-controller-BPGj-LC5.js";
-const S = {
+import { P as D } from "./pkt-slot-controller-BPGj-LC5.js";
+const I = {
   dateformat: {
     default: "dd.MM.yyyy"
   },
@@ -33,25 +33,32 @@ const S = {
     default: !1
   }
 }, c = {
-  props: S
+  props: I
 };
-var D = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? I(e, i) : e, h = t.length - 1, d; h >= 0; h--)
-    (d = t[h]) && (s = (a ? d(e, i, s) : d(s)) || s);
-  return a && s && D(e, i, s), s;
+var P = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? B(e, i) : e, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (s = (a ? u(e, i, s) : u(s)) || s);
+  return a && s && P(e, i, s), s;
 };
-const b = (t) => new Promise((e) => setTimeout(e, t));
-let l = class extends C {
+const k = (t) => new Promise((e) => setTimeout(e, t));
+let l = class extends S {
   /**
    * Housekeeping / lifecycle methods
    */
   constructor() {
-    super(), this.value = "", this._value = this.value ? Array.isArray(this.value) ? this.value : this.value.split(",") : [], this.label = "Datovelger", this.dateformat = c.props.dateformat.default, this.multiple = c.props.multiple.default, this.maxlength = null, this.range = c.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = c.props.weeknumbers.default, this.withcontrols = c.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.buttonClasses = {}, this.inputRef = m(), this.inputRefTo = m(), this.btnRef = m(), this.calRef = m(), this.popupRef = m(), this.helptextSlot = m(), this.addToSelected = (t) => {
+    super(), this._valueProperty = "", this._value = [], this.label = "Datovelger", this.dateformat = c.props.dateformat.default, this.multiple = c.props.multiple.default, this.maxlength = null, this.range = c.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = c.props.weeknumbers.default, this.withcontrols = c.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.buttonClasses = {}, this.inputRef = m(), this.inputRefTo = m(), this.btnRef = m(), this.calRef = m(), this.popupRef = m(), this.helptextSlot = m(), this.addToSelected = (t) => {
       const e = t.target;
       if (!e.value) return;
-      const i = this.min ? v(this.min) : null, a = this.max ? v(this.max) : null, s = v(e.value.split(",")[0]);
+      const i = this.min ? y(this.min) : null, a = this.max ? y(this.max) : null, s = y(e.value.split(",")[0]);
       s && !isNaN(s.getTime()) && (!i || s >= i) && (!a || s <= a) && this.calRef.value && this.calRef.value.handleDateSelect(s), e.value = "";
-    }, this.slotController = new T(this, this.helptextSlot);
+    }, this.slotController = new D(this, this.helptextSlot);
+  }
+  get value() {
+    return this._valueProperty;
+  }
+  set value(t) {
+    const e = this._valueProperty;
+    this._valueProperty = Array.isArray(t) ? t.join(",") : t || "", this.valueChanged(this._valueProperty, e), this.requestUpdate("value", e);
   }
   async connectedCallback() {
     super.connectedCallback();
@@ -59,7 +66,9 @@ let l = class extends C {
     this.inputType = e ? "text" : "date", document && document.body.addEventListener("click", (i) => {
       var a, s;
       (a = this.inputRef) != null && a.value && ((s = this.btnRef) != null && s.value) && !this.inputRef.value.contains(i.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(i.target)) && !this.btnRef.value.contains(i.target) && !i.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 || c.props.min.default, this.max = this.max || c.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());
+    }), document && document.body.addEventListener("keydown", (i) => {
+      i.key === "Escape" && this.calendarOpen && this.hideCalendar();
+    }), this.value && (this._value = Array.isArray(this.value) ? this.value.filter(Boolean) : this.value.split(",").filter(Boolean)), this.min = this.min || c.props.min.default, this.max = this.max || c.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 k(20), this.handleCalendarPosition());
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document && document.body.removeEventListener("click", (t) => {
@@ -67,21 +76,39 @@ let l = class extends C {
       (e = this.inputRef) != null && e.value && ((i = this.btnRef) != null && i.value) && !this.inputRef.value.contains(t.target) && !this.btnRef.value.contains(t.target) && this.hideCalendar();
     });
   }
-  attributeChangedCallback(t, e, i) {
-    if (t === "value") {
-      if (this.range && (i == null ? void 0 : i.split(",").length) === 1) return;
-      this.value !== e && this.valueChanged(i, e);
+  onInput() {
+    this.dispatchEvent(new Event("input", { bubbles: !0 }));
+  }
+  valueChanged(t, e) {
+    if (t !== e) {
+      let i = [];
+      if (t && (typeof t == "string" ? i = t.split(",").filter(Boolean) : i = String(t).split(",").filter(Boolean)), this.min || this.max) {
+        const s = this.min ? new Date(this.min) : null, h = this.max ? new Date(this.max) : null;
+        i = i.filter((u) => {
+          const v = new Date(u);
+          return !(isNaN(v.getTime()) || s && v < s || h && v > h);
+        });
+      }
+      this._value = i;
+      const a = i.join(",");
+      this._valueProperty !== a && (this._valueProperty = a), super.valueChanged(a, e);
     }
-    t === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = (i == null ? void 0 : i.split(",")) ?? []), t === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = (i == null ? void 0 : i.split(",")) ?? []), super.attributeChangedCallback(t, e, i);
+  }
+  attributeChangedCallback(t, e, i) {
+    t === "value" && this.value !== e && this.valueChanged(i, e), t === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = (i == null ? void 0 : i.split(",")) ?? []), t === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = (i == null ? void 0 : i.split(",")) ?? []), super.attributeChangedCallback(t, e, i);
   }
   updated(t) {
-    t.has("multiple") && (this.multiple && !Array.isArray(this._value) ? this._value = typeof this.value == "string" ? this.value ? this.value.split(",").filter(Boolean) : [] : [] : !this.multiple && Array.isArray(this._value) && (this._value = this._value.filter(Boolean)), !this.multiple && Array.isArray(this._value) && (this._value = [this._value[0] ?? ""])), super.updated(t);
+    if (t.has("value")) {
+      const e = Array.isArray(this.value) ? this.value.join(",") : this.value, i = t.get("value"), a = Array.isArray(i) ? i.join(",") : i;
+      this.valueChanged(e, a);
+    }
+    t.has("multiple") && (this.multiple && !Array.isArray(this._value) ? this._value = typeof this.value == "string" ? this.value ? this.value.split(",").filter(Boolean) : [] : [] : !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(t);
   }
   /**
    * Rendering
    */
   renderInput() {
-    return u`
+    return p`
       <input
         class="${f(this.inputClasses)}"
         .type=${this.inputType}
@@ -89,6 +116,9 @@ let l = class extends C {
         .value=${this._value[0] ?? ""}
         min=${o(this.min)}
         max=${o(this.max)}
+        placeholder=${o(this.placeholder)}
+        ?readonly=${this.readonly}
+        aria-describedby="${this.id}-helptext"
         @click=${(t) => {
       t.preventDefault(), this.showCalendar();
     }}
@@ -113,7 +143,7 @@ let l = class extends C {
         @change=${(t) => {
       this.touched = !0, t.stopImmediatePropagation();
     }}
-        ${p(this.inputRef)}
+        ${d(this.inputRef)}
       />
     `;
   }
@@ -122,8 +152,8 @@ let l = class extends C {
       "pkt-input-prefix": this.showRangeLabels,
       "pkt-hide": !this.showRangeLabels
     };
-    return u`
-      ${this.showRangeLabels ? u` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : g}
+    return p`
+      ${this.showRangeLabels ? p` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : g}
       <input
         class=${f(this.inputClasses)}
         .type=${this.inputType}
@@ -131,6 +161,8 @@ let l = class extends C {
         .value=${this._value[0] ?? ""}
         min=${o(this.min)}
         max=${o(this.max)}
+        placeholder=${o(this.placeholder)}
+        ?readonly=${this.readonly}
         ?disabled=${this.disabled}
         @click=${(e) => {
       e.preventDefault(), this.showCalendar();
@@ -159,12 +191,12 @@ let l = class extends C {
         @change=${(e) => {
       e.stopImmediatePropagation();
     }}
-        ${p(this.inputRef)}
+        ${d(this.inputRef)}
       />
       <div class="${f(t)}" id="${this.id}-to-label">
         ${this.strings.generic.to}
       </div>
-      ${this.showRangeLabels ? g : u` <div class="pkt-input-separator">–</div> `}
+      ${this.showRangeLabels ? g : p` <div class="pkt-input-separator">–</div> `}
       <input
         class=${f(this.inputClasses)}
         .type=${this.inputType}
@@ -173,6 +205,8 @@ let l = class extends C {
         .value=${this._value[1] ?? ""}
         min=${o(this.min)}
         max=${o(this.max)}
+        placeholder=${o(this.placeholder)}
+        ?readonly=${this.readonly}
         ?disabled=${this.disabled}
         @click=${(e) => {
       e.preventDefault(), this.showCalendar();
@@ -204,25 +238,27 @@ let l = class extends C {
           this.strings.forms.messages.rangeOverflow,
           e.target
         );
-        const d = $(e.target.value);
-        d && this._value[1] !== R(d) && ((s = (a = this.calRef) == null ? void 0 : a.value) == null || s.handleDateSelect(d));
+        const u = $(e.target.value);
+        u && this._value[1] !== C(u) && ((s = (a = this.calRef) == null ? void 0 : a.value) == null || s.handleDateSelect(u));
       }
     }}
         @change=${(e) => {
       this.touched = !0, e.stopImmediatePropagation();
     }}
-        ${p(this.inputRefTo)}
+        ${d(this.inputRefTo)}
       />
     `;
   }
   renderMultipleInput() {
-    return console.log("range", this.range, "multiple", this.multiple), u`
+    return p`
       <input
         class=${f(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
         min=${o(this.min)}
         max=${o(this.max)}
+        placeholder=${o(this.placeholder)}
+        ?readonly=${this.readonly}
         ?disabled=${this.disabled || this.maxlength && this._value.length >= this.maxlength}
         @click=${(t) => {
       t.preventDefault(), this.showCalendar();
@@ -247,21 +283,21 @@ let l = class extends C {
         @change=${(t) => {
       this.touched = !0, t.stopImmediatePropagation();
     }}
-        ${p(this.inputRef)}
+        ${d(this.inputRef)}
       />
     `;
   }
   renderTags() {
-    return u`
+    return p`
       <div class="pkt-datepicker__tags" aria-live="polite">
-        ${this._value[0] ? _(
-      (this._value ?? []).filter(Boolean),
+        ${this._value[0] ? T(
+      (this._value ?? []).filter(Boolean).sort(),
       (t) => t,
-      (t) => u`
+      (t) => p`
                 <pkt-tag
                   .id="${this.id + t + "-tag"}"
                   closeTag
-                  ariaLabel="${this.strings.calendar.deleteDate} ${y(
+                  ariaLabel="${this.strings.calendar.deleteDate} ${b(
         t,
         this.dateformat
       )}"
@@ -269,7 +305,7 @@ let l = class extends C {
         var e;
         return (e = this.calRef.value) == null ? void 0 : e.handleDateSelect($(t));
       }}
-                  ><time datetime="${t}">${y(t, this.dateformat)}</time></pkt-tag
+                  ><time datetime="${t}">${b(t, this.dateformat)}</time></pkt-tag
                 >
               `
     ) : g}
@@ -277,13 +313,13 @@ let l = class extends C {
     `;
   }
   renderCalendar() {
-    return u`<div
+    return p`<div
       class="pkt-calendar-popup pkt-${this.calendarOpen ? "show" : "hide"}"
       @focusout=${(t) => {
       this.calendarOpen && this.handleFocusOut(t);
     }}
       id="${this.id}-popup"
-      ${p(this.popupRef)}
+      ${d(this.popupRef)}
     >
       <pkt-calendar
         id="${this.id}-calendar"
@@ -297,19 +333,19 @@ let l = class extends C {
         .latest=${this.max}
         .excludedates=${Array.isArray(this.excludedates) ? this.excludedates : this.excludedates.split(",")}
         .excludeweekdays=${this.excludeweekdays}
-        .currentmonth=${this.currentmonth ? v(this.currentmonth) : null}
+        .currentmonth=${this.currentmonth ? _(this.currentmonth) : null}
         @date-selected=${(t) => {
-      this.value = !this.multiple && !this.range ? t.detail[0] : t.detail, this._value = t.detail, this.inputRef.value && (this.range && this.inputRefTo.value ? (this.inputRef.value.value = this._value[0] ?? "", this.inputRefTo.value.value = this._value[1] ?? "") : this.multiple || (this.inputRef.value.value = this._value.length ? this._value[0] : ""));
+      this.value = !this.multiple && !this.range ? t.detail[0] : Array.isArray(t.detail) ? t.detail.join(",") : t.detail, this._value = t.detail, this.inputRef.value && (this.range && this.inputRefTo.value ? (this.inputRef.value.value = this._value[0] ?? "", this.inputRefTo.value.value = this._value[1] ?? "", this.manageValidity(this.inputRef.value), this.manageValidity(this.inputRefTo.value)) : this.multiple || (this.inputRef.value.value = this._value.length ? this._value[0] : "", this.manageValidity(this.inputRef.value)));
     }}
         @close=${() => {
       this.onBlur(), this.hideCalendar();
     }}
-        ${p(this.calRef)}
+        ${d(this.calRef)}
       ></pkt-calendar>
     </div>`;
   }
   render() {
-    return console.log("multiple", this.multiple, "value", this.value, "_value", this._value), this.inputClasses = {
+    return this.inputClasses = {
       "pkt-input": !0,
       "pkt-datepicker__input": !0,
       "pkt-input--fullwidth": this.fullwidth,
@@ -320,8 +356,9 @@ let l = class extends C {
       "pkt-input-icon": !0,
       "pkt-btn": !0,
       "pkt-btn--icon-only": !0,
-      "pkt-btn--tertiary": !0
-    }, u`
+      "pkt-btn--tertiary": !0,
+      "pkt-datepicker__calendar-button": !0
+    }, p`
       <pkt-input-wrapper
         label="${this.label}"
         forId="${this.id}-input"
@@ -346,7 +383,7 @@ let l = class extends C {
         .ariaDescribedBy=${this.ariaDescribedBy}
         class="pkt-datepicker"
       >
-        <div class="pkt-contents" ${p(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
         ${this.multiple ? this.renderTags() : g}
         <div
           class="pkt-datepicker__inputs ${this.range && this.showRangeLabels ? "pkt-input__range-inputs" : ""}"
@@ -357,8 +394,11 @@ let l = class extends C {
               class="${f(this.buttonClasses)}"
               type="button"
               @click=${this.toggleCalendar}
+              @keydown=${(t) => {
+      (t.key === "Enter" || t.key === " " || t.key === "Space") && (t.preventDefault(), this.toggleCalendar(t));
+    }}
               ?disabled=${this.disabled}
-              ${p(this.btnRef)}
+              ${d(this.btnRef)}
             >
               <pkt-icon name="calendar"></pkt-icon>
               <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
@@ -385,7 +425,7 @@ let l = class extends C {
   }
   async showCalendar() {
     var t;
-    this.calendarOpen = !0, await b(20), this.handleCalendarPosition(), this.isMobileSafari && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
+    this.calendarOpen = !0, await k(20), this.handleCalendarPosition(), this.isMobileSafari && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
   }
   hideCalendar() {
     this.calendarOpen = !1;
@@ -393,10 +433,13 @@ let l = class extends C {
   async toggleCalendar(t) {
     t.preventDefault(), this.calendarOpen ? this.hideCalendar() : this.showCalendar();
   }
+  clearInputValue() {
+    this._value = [], this.value = "";
+  }
 };
 n([
   r({ type: String, reflect: !0 })
-], l.prototype, "value", 2);
+], l.prototype, "value", 1);
 n([
   r({ type: Array })
 ], l.prototype, "_value", 2);
@@ -431,10 +474,10 @@ n([
   r({ type: Boolean, reflect: !0 })
 ], l.prototype, "withcontrols", 2);
 n([
-  r({ converter: x.csvToArray })
+  r({ converter: w.csvToArray })
 ], l.prototype, "excludedates", 2);
 n([
-  r({ converter: x.csvToArray })
+  r({ converter: w.csvToArray })
 ], l.prototype, "excludeweekdays", 2);
 n([
   r({ type: String })
@@ -446,13 +489,13 @@ n([
   r({ type: String })
 ], l.prototype, "timezone", 2);
 n([
-  k()
+  x()
 ], l.prototype, "inputClasses", 2);
 n([
-  k()
+  x()
 ], l.prototype, "buttonClasses", 2);
 l = n([
-  w("pkt-datepicker")
+  R("pkt-datepicker")
 ], l);
 export {
   l as P

package/dist/datepicker-CmTrG5GE.cjs

@@ -0,0 +1,164 @@
+"use strict";const d=require("./class-map-BBG2gMX4.cjs"),u=require("./if-defined-Cni-RHLS.cjs"),l=require("./element-6DBpyGQm.cjs"),v=require("./state-DPobt-Yz.cjs"),o=require("./calendar-32W9p9uc.cjs"),y=require("./input-element-C4xJoM-X.cjs"),r=require("./ref-iJtiv3o2.cjs"),k=require("./repeat-CDsZqct8.cjs");require("./icon-B_ryAy4Q.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./tag-Bbs0U_Au.cjs");const $=require("./pkt-slot-controller-BzddBp7z.cjs"),b={dateformat:{default:"dd.MM.yyyy"},min:{default:null},max:{default:null},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},p={props:b};var x=Object.defineProperty,w=Object.getOwnPropertyDescriptor,n=(c,t,e,i)=>{for(var a=i>1?void 0:i?w(t,e):t,s=c.length-1,h;s>=0;s--)(h=c[s])&&(a=(i?h(t,e,a):h(a))||a);return i&&a&&x(t,e,a),a};const m=c=>new Promise(t=>setTimeout(t,c));exports.PktDatepicker=class extends y.PktInputElement{constructor(){super(),this._valueProperty="",this._value=[],this.label="Datovelger",this.dateformat=p.props.dateformat.default,this.multiple=p.props.multiple.default,this.maxlength=null,this.range=p.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=p.props.weeknumbers.default,this.withcontrols=p.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,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.helptextSlot=r.e(),this.addToSelected=t=>{const e=t.target;if(!e.value)return;const i=this.min?o.newDate(this.min):null,a=this.max?o.newDate(this.max):null,s=o.newDate(e.value.split(",")[0]);s&&!isNaN(s.getTime())&&(!i||s>=i)&&(!a||s<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(s),e.value=""},this.slotController=new $.PktSlotController(this,this.helptextSlot)}get value(){return this._valueProperty}set value(t){const e=this._valueProperty;this._valueProperty=Array.isArray(t)?t.join(","):t||"",this.valueChanged(this._valueProperty,e),this.requestUpdate("value",e)}async connectedCallback(){super.connectedCallback();const t=navigator.userAgent,e=/iP(hone|od|ad)/.test(t);this.inputType=e?"text":"date",document&&document.body.addEventListener("click",i=>{var a,s;(a=this.inputRef)!=null&&a.value&&((s=this.btnRef)!=null&&s.value)&&!this.inputRef.value.contains(i.target)&&!(this.inputRefTo.value&&this.inputRefTo.value.contains(i.target))&&!this.btnRef.value.contains(i.target)&&!i.target.closest(".pkt-calendar-popup")&&this.calendarOpen&&(this.onBlur(),this.hideCalendar())}),document&&document.body.addEventListener("keydown",i=>{i.key==="Escape"&&this.calendarOpen&&this.hideCalendar()}),this.value&&(this._value=Array.isArray(this.value)?this.value.filter(Boolean):this.value.split(",").filter(Boolean)),this.min=this.min||p.props.min.default,this.max=this.max||p.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 m(20),this.handleCalendarPosition())}disconnectedCallback(){super.disconnectedCallback(),document&&document.body.removeEventListener("click",t=>{var e,i;(e=this.inputRef)!=null&&e.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(t.target)&&!this.btnRef.value.contains(t.target)&&this.hideCalendar()})}onInput(){this.dispatchEvent(new Event("input",{bubbles:!0}))}valueChanged(t,e){if(t!==e){let i=[];if(t&&(typeof t=="string"?i=t.split(",").filter(Boolean):i=String(t).split(",").filter(Boolean)),this.min||this.max){const s=this.min?new Date(this.min):null,h=this.max?new Date(this.max):null;i=i.filter(f=>{const g=new Date(f);return!(isNaN(g.getTime())||s&&g<s||h&&g>h)})}this._value=i;const a=i.join(",");this._valueProperty!==a&&(this._valueProperty=a),super.valueChanged(a,e)}}attributeChangedCallback(t,e,i){t==="value"&&this.value!==e&&this.valueChanged(i,e),t==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=(i==null?void 0:i.split(","))??[]),t==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=(i==null?void 0:i.split(","))??[]),super.attributeChangedCallback(t,e,i)}updated(t){if(t.has("value")){const e=Array.isArray(this.value)?this.value.join(","):this.value,i=t.get("value"),a=Array.isArray(i)?i.join(","):i;this.valueChanged(e,a)}t.has("multiple")&&(this.multiple&&!Array.isArray(this._value)?this._value=typeof this.value=="string"?this.value?this.value.split(",").filter(Boolean):[]:[]:!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(t)}renderInput(){return l.x`
+      <input
+        class="${d.e(this.inputClasses)}"
+        .type=${this.inputType}
+        id="${this.id}-input"
+        .value=${this._value[0]??""}
+        min=${u.o(this.min)}
+        max=${u.o(this.max)}
+        placeholder=${u.o(this.placeholder)}
+        ?readonly=${this.readonly}
+        aria-describedby="${this.id}-helptext"
+        @click=${t=>{t.preventDefault(),this.showCalendar()}}
+        ?disabled=${this.disabled}
+        @keydown=${t=>{var e,i;if(t.key===","&&((e=this.inputRef.value)==null||e.blur()),(t.key==="Space"||t.key===" ")&&(t.preventDefault(),this.toggleCalendar(t)),t.key==="Enter"){const a=this.internals.form;a?a.requestSubmit():(i=this.inputRef.value)==null||i.blur()}}}
+        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
+        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
+        @blur=${t=>{var e;(e=this.calRef.value)!=null&&e.contains(t.relatedTarget)||this.onBlur(),this.manageValidity(t.target),this.value=t.target.value}}
+        @change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
+        ${r.n(this.inputRef)}
+      />
+    `}renderRangeInput(){const t={"pkt-input-prefix":this.showRangeLabels,"pkt-hide":!this.showRangeLabels};return l.x`
+      ${this.showRangeLabels?l.x` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `:l.E}
+      <input
+        class=${d.e(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-input"
+        .value=${this._value[0]??""}
+        min=${u.o(this.min)}
+        max=${u.o(this.max)}
+        placeholder=${u.o(this.placeholder)}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        @click=${e=>{e.preventDefault(),this.showCalendar()}}
+        @keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRef.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const s=this.internals.form;s?s.requestSubmit():(a=this.inputRefTo.value)==null||a.focus()}}}
+        @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
+        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
+        @blur=${e=>{var i,a;if(e.target.value){this.manageValidity(e.target);const s=o.fromISOToDate(e.target.value);s&&this._value[0]!==e.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=${e=>{e.stopImmediatePropagation()}}
+        ${r.n(this.inputRef)}
+      />
+      <div class="${d.e(t)}" id="${this.id}-to-label">
+        ${this.strings.generic.to}
+      </div>
+      ${this.showRangeLabels?l.E:l.x` <div class="pkt-input-separator">–</div> `}
+      <input
+        class=${d.e(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-to"
+        aria-labelledby="${this.id}-to-label"
+        .value=${this._value[1]??""}
+        min=${u.o(this.min)}
+        max=${u.o(this.max)}
+        placeholder=${u.o(this.placeholder)}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        @click=${e=>{e.preventDefault(),this.showCalendar()}}
+        @keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRefTo.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const s=this.internals.form;s?s.requestSubmit():(a=this.inputRefTo.value)==null||a.blur()}}}
+        @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
+        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
+        @blur=${e=>{var i,a,s;if((i=this.calRef.value)!=null&&i.contains(e.relatedTarget)||this.onBlur(),e.target.value){this.manageValidity(e.target);const h=e.target.value;this.min&&this.min>h?this.internals.setValidity({rangeUnderflow:!0},this.strings.forms.messages.rangeUnderflow,e.target):this.max&&this.max<h&&this.internals.setValidity({rangeOverflow:!0},this.strings.forms.messages.rangeOverflow,e.target);const f=o.fromISOToDate(e.target.value);f&&this._value[1]!==o.formatISODate(f)&&((s=(a=this.calRef)==null?void 0:a.value)==null||s.handleDateSelect(f))}}}
+        @change=${e=>{this.touched=!0,e.stopImmediatePropagation()}}
+        ${r.n(this.inputRefTo)}
+      />
+    `}renderMultipleInput(){return l.x`
+      <input
+        class=${d.e(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-input"
+        min=${u.o(this.min)}
+        max=${u.o(this.max)}
+        placeholder=${u.o(this.placeholder)}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled||this.maxlength&&this._value.length>=this.maxlength}
+        @click=${t=>{t.preventDefault(),this.showCalendar()}}
+        @blur=${t=>{var e;(e=this.calRef.value)!=null&&e.contains(t.relatedTarget)||this.onBlur(),this.addToSelected(t)}}
+        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
+        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
+        @keydown=${t=>{var e;if(t.key===","&&(t.preventDefault(),this.addToSelected(t)),(t.key==="Space"||t.key===" ")&&(t.preventDefault(),this.toggleCalendar(t)),t.key==="Enter"){const i=this.internals.form;i?i.requestSubmit():(e=this.inputRef.value)==null||e.blur()}}}
+        @change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
+        ${r.n(this.inputRef)}
+      />
+    `}renderTags(){return l.x`
+      <div class="pkt-datepicker__tags" aria-live="polite">
+        ${this._value[0]?k.c((this._value??[]).filter(Boolean).sort(),t=>t,t=>l.x`
+                <pkt-tag
+                  .id="${this.id+t+"-tag"}"
+                  closeTag
+                  ariaLabel="${this.strings.calendar.deleteDate} ${o.fromISOtoLocal(t,this.dateformat)}"
+                  @close=${()=>{var e;return(e=this.calRef.value)==null?void 0:e.handleDateSelect(o.fromISOToDate(t))}}
+                  ><time datetime="${t}">${o.fromISOtoLocal(t,this.dateformat)}</time></pkt-tag
+                >
+              `):l.E}
+      </div>
+    `}renderCalendar(){return l.x`<div
+      class="pkt-calendar-popup pkt-${this.calendarOpen?"show":"hide"}"
+      @focusout=${t=>{this.calendarOpen&&this.handleFocusOut(t)}}
+      id="${this.id}-popup"
+      ${r.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?o.parseISODateString(this.currentmonth):null}
+        @date-selected=${t=>{this.value=!this.multiple&&!this.range?t.detail[0]:Array.isArray(t.detail)?t.detail.join(","):t.detail,this._value=t.detail,this.inputRef.value&&(this.range&&this.inputRefTo.value?(this.inputRef.value.value=this._value[0]??"",this.inputRefTo.value.value=this._value[1]??"",this.manageValidity(this.inputRef.value),this.manageValidity(this.inputRefTo.value)):this.multiple||(this.inputRef.value.value=this._value.length?this._value[0]:"",this.manageValidity(this.inputRef.value)))}}
+        @close=${()=>{this.onBlur(),this.hideCalendar()}}
+        ${r.n(this.calRef)}
+      ></pkt-calendar>
+    </div>`}render(){return this.inputClasses={"pkt-input":!0,"pkt-datepicker__input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-datepicker--hasrangelabels":this.showRangeLabels,"pkt-datepicker--multiple":this.multiple,"pkt-datepicker--range":this.range},this.buttonClasses={"pkt-input-icon":!0,"pkt-btn":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":!0,"pkt-datepicker__calendar-button":!0},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" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        ${this.multiple?this.renderTags():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="${d.e(this.buttonClasses)}"
+              type="button"
+              @click=${this.toggleCalendar}
+              @keydown=${t=>{(t.key==="Enter"||t.key===" "||t.key==="Space")&&(t.preventDefault(),this.toggleCalendar(t))}}
+              ?disabled=${this.disabled}
+              ${r.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(){var t;if(this.popupRef.value&&this.inputRef.value){const e=this.multiple&&!!this.maxlength,i=((t=this.inputRef.value.parentElement)==null?void 0:t.getBoundingClientRect())||this.inputRef.value.getBoundingClientRect(),a=e?i.height+30:i.height,s=this.popupRef.value.getBoundingClientRect().height;let h=e?"calc(100% - 30px)":"100%";i&&i.top+s>window.innerHeight&&i.top-s>0&&(h=`calc(100% - ${a}px - ${s}px)`),this.popupRef.value.style.top=h}}handleFocusOut(t){this.contains(t.target)||(this.onBlur(),this.hideCalendar())}async showCalendar(){var t;this.calendarOpen=!0,await m(20),this.handleCalendarPosition(),this.isMobileSafari&&((t=this.calRef.value)==null||t.focusOnCurrentDate())}hideCalendar(){this.calendarOpen=!1}async toggleCalendar(t){t.preventDefault(),this.calendarOpen?this.hideCalendar():this.showCalendar()}clearInputValue(){this._value=[],this.value=""}};n([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",1);n([l.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);n([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);n([l.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);n([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);n([l.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);n([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);n([l.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);n([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);n([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);n([l.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);n([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);n([l.n({converter:o.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);n([l.n({converter:o.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);n([l.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);n([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);n([l.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);n([v.r()],exports.PktDatepicker.prototype,"inputClasses",2);n([v.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=n([l.t("pkt-datepicker")],exports.PktDatepicker);

package/dist/index.d.ts

@@ -456,7 +456,6 @@ export declare class PktCalendar extends PktElement {
     isNextMonthAllowed(): boolean;
     private nextMonth;
     private changeMonth;
-    private isInRange;
     private isRangeAllowed;
     private emptySelected;
     addToSelected(selectedDate: Date): void;
@@ -525,7 +524,10 @@ export declare class PktCheckbox extends PktInputElement {
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
+    private handleClick;
+    private handleChange;
     private toggleChecked;
 }
 
@@ -658,7 +660,9 @@ export declare class PktDatepicker extends PktInputElement {
     /**
      * Element attributes and properties
      */
-    value: string | string[];
+    private _valueProperty;
+    get value(): string;
+    set value(newValue: string | string[]);
     _value: string[];
     label: string;
     dateformat: string;
@@ -683,6 +687,8 @@ export declare class PktDatepicker extends PktInputElement {
     constructor();
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
+    onInput(): void;
+    valueChanged(newValue: string | null, oldValue: string | null): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     updated(changedProperties: PropertyValues): void;
     /**
@@ -712,6 +718,7 @@ export declare class PktDatepicker extends PktInputElement {
     showCalendar(): Promise<void>;
     hideCalendar(): void;
     toggleCalendar(e: Event): Promise<void>;
+    clearInputValue(): void;
 }
 
 /**

package/dist/pkt-calendar.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./calendar-BZe2D4Sr.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-32W9p9uc.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-DevQhOup.js";
+import { P as a } from "./calendar-CJSxvwAq.js";
 const r = a;
 export {
   a as PktCalendar,

package/dist/pkt-card.cjs

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

package/dist/pkt-card.js

@@ -1,4 +1,4 @@
-import { P as a } from "./card-BI1NZONj.js";
+import { P as a } from "./card-Dtw26f7i.js";
 const r = a;
 export {
   a as PktCard,

package/dist/pkt-checkbox.cjs

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

package/dist/pkt-checkbox.js

@@ -1,4 +1,4 @@
-import { P as o } from "./checkbox-CTRbpbye.js";
+import { P as o } from "./checkbox-ym7z6cpt.js";
 const k = o;
 export {
   o as PktCheckbox,