@oslokommune/punkt-elements 12.11.2 → 12.11.4

package/dist/pkt-datepicker.js

@@ -1,67 +1,67 @@
-import { T as V, a as A, x as k, E as O, n as u } from "./index-Dw-V4--g.js";
+import { T as A, r as P, a as L, x as v, E as b, n as d } from "./index-BQ9BMXel.js";
 import { e as j, i as F, a as q, t as H } from "./custom-element-CWfU4dcr.js";
-import { p as U, v as y, r as b, M as S, m as L, e as x, n as $ } from "./ref-D5FOI49b.js";
-import { e as w } from "./class-map-DpN1m5lh.js";
-import { a as P } from "./converters-DNCwIFwr.js";
-import { n as C, f as _, a as N, b as M } from "./index-DmedytuY.js";
+import { p as U, v as y, r as w, M as _, m as N, e as R, n as $ } from "./ref-BjO0bKwt.js";
+import { e as x } from "./class-map-BQ3-MseA.js";
+import { a as V } from "./converters-DNCwIFwr.js";
+import { n as T, f as D, a as W, b as M } from "./index-BR7EVgX9.js";
 import "./pkt-input-wrapper.js";
-import "./index-DkLa0YLm.js";
+import "./index-BfUPq43a.js";
 import "./pkt-tag.js";
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const E = (e, t, a) => {
-  const s = /* @__PURE__ */ new Map();
-  for (let i = t; i <= a; i++) s.set(e[i], i);
-  return s;
-}, W = j(class extends F {
+const E = (e, t, s) => {
+  const a = /* @__PURE__ */ new Map();
+  for (let i = t; i <= s; i++) a.set(e[i], i);
+  return a;
+}, K = j(class extends F {
   constructor(e) {
     if (super(e), e.type !== q.CHILD) throw Error("repeat() can only be used in text expressions");
   }
-  dt(e, t, a) {
-    let s;
-    a === void 0 ? a = t : t !== void 0 && (s = t);
-    const i = [], n = [];
-    let r = 0;
-    for (const f of e) i[r] = s ? s(f, r) : r, n[r] = a(f, r), r++;
-    return { values: n, keys: i };
+  dt(e, t, s) {
+    let a;
+    s === void 0 ? s = t : t !== void 0 && (a = t);
+    const i = [], r = [];
+    let n = 0;
+    for (const f of e) i[n] = a ? a(f, n) : n, r[n] = s(f, n), n++;
+    return { values: r, keys: i };
   }
-  render(e, t, a) {
-    return this.dt(e, t, a).values;
+  render(e, t, s) {
+    return this.dt(e, t, s).values;
   }
-  update(e, [t, a, s]) {
-    const i = U(e), { values: n, keys: r } = this.dt(t, a, s);
-    if (!Array.isArray(i)) return this.ut = r, n;
+  update(e, [t, s, a]) {
+    const i = U(e), { values: r, keys: n } = this.dt(t, s, a);
+    if (!Array.isArray(i)) return this.ut = n, r;
     const f = this.ut ?? (this.ut = []), m = [];
-    let R, D, o = 0, h = i.length - 1, p = 0, c = n.length - 1;
-    for (; o <= h && p <= c; ) if (i[o] === null) o++;
+    let C, I, p = 0, h = i.length - 1, u = 0, c = r.length - 1;
+    for (; p <= h && u <= c; ) if (i[p] === null) p++;
     else if (i[h] === null) h--;
-    else if (f[o] === r[p]) m[p] = y(i[o], n[p]), o++, p++;
-    else if (f[h] === r[c]) m[c] = y(i[h], n[c]), h--, c--;
-    else if (f[o] === r[c]) m[c] = y(i[o], n[c]), b(e, m[c + 1], i[o]), o++, c--;
-    else if (f[h] === r[p]) m[p] = y(i[h], n[p]), b(e, i[o], i[h]), h--, p++;
-    else if (R === void 0 && (R = E(r, p, c), D = E(f, o, h)), R.has(f[o])) if (R.has(f[h])) {
-      const g = D.get(r[p]), T = g !== void 0 ? i[g] : null;
-      if (T === null) {
-        const I = b(e, i[o]);
-        y(I, n[p]), m[p] = I;
-      } else m[p] = y(T, n[p]), b(e, i[o], T), i[g] = null;
-      p++;
-    } else S(i[h]), h--;
-    else S(i[o]), o++;
-    for (; p <= c; ) {
-      const g = b(e, m[c + 1]);
-      y(g, n[p]), m[p++] = g;
+    else if (f[p] === n[u]) m[u] = y(i[p], r[u]), p++, u++;
+    else if (f[h] === n[c]) m[c] = y(i[h], r[c]), h--, c--;
+    else if (f[p] === n[c]) m[c] = y(i[p], r[c]), w(e, m[c + 1], i[p]), p++, c--;
+    else if (f[h] === n[u]) m[u] = y(i[h], r[u]), w(e, i[p], i[h]), h--, u++;
+    else if (C === void 0 && (C = E(n, u, c), I = E(f, p, h)), C.has(f[p])) if (C.has(f[h])) {
+      const g = I.get(n[u]), S = g !== void 0 ? i[g] : null;
+      if (S === null) {
+        const O = w(e, i[p]);
+        y(O, r[u]), m[u] = O;
+      } else m[u] = y(S, r[u]), w(e, i[p], S), i[g] = null;
+      u++;
+    } else _(i[h]), h--;
+    else _(i[p]), p++;
+    for (; u <= c; ) {
+      const g = w(e, m[c + 1]);
+      y(g, r[u]), m[u++] = g;
     }
-    for (; o <= h; ) {
-      const g = i[o++];
-      g !== null && S(g);
+    for (; p <= h; ) {
+      const g = i[p++];
+      g !== null && _(g);
     }
-    return this.ut = r, L(e, m), V;
+    return this.ut = n, N(e, m), A;
   }
-}), K = "pkt-datepicker", z = !0, G = {
+}), z = "pkt-datepicker", G = !0, J = {
   name: {
     type: "string",
     name: "Navn",
@@ -229,7 +229,7 @@ const E = (e, t, a) => {
     name: "ID",
     description: "Unik identifikasjon for datovelgeren"
   }
-}, J = {
+}, Q = {
   change: {
     type: "Event",
     description: "Returnerer valgt dato som streng i ISO-format"
@@ -242,35 +242,26 @@ const E = (e, t, a) => {
     type: "CustomEvent",
     description: "Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes"
   }
-}, v = {
-  name: K,
+}, k = {
+  name: z,
   "css-class": "pkt-datepicker",
-  isElement: z,
-  props: G,
-  events: J
+  isElement: G,
+  props: J,
+  events: Q
 };
-var Q = Object.defineProperty, X = Object.getOwnPropertyDescriptor, d = (e, t, a, s) => {
-  for (var i = s > 1 ? void 0 : s ? X(t, a) : t, n = e.length - 1, r; n >= 0; n--)
-    (r = e[n]) && (i = (s ? r(t, a, i) : r(i)) || i);
-  return s && i && Q(t, a, i), i;
+var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, o = (e, t, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? Y(t, s) : t, r = e.length - 1, n; r >= 0; r--)
+    (n = e[r]) && (i = (a ? n(t, s, i) : n(i)) || i);
+  return a && i && X(t, s, i), i;
 };
 const B = (e) => new Promise((t) => setTimeout(t, e));
-let l = class extends A {
+let l = class extends L {
   constructor() {
-    super(...arguments), this.value = "", this._value = this.value ? Array.isArray(this.value) ? this.value : this.value.split(",") : [], this.label = "Datovelger", this.dateformat = v.props.dateformat.default, this.multiple = v.props.multiple.default, this.maxlength = v.props.maxlength.default, this.range = v.props.range.default, this.min = null, this.max = null, this.weeknumbers = v.props.weeknumbers.default, this.withcontrols = v.props.withcontrols.default, this.fullwidth = !1, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.useWrapper = !0, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputRef = x(), this.inputRefTo = x(), this.btnRef = x(), this.calRef = x(), this.popupRef = x(), this.inputClasses = {
-      "pkt-input": !0,
-      "pkt-datepicker__input": !0,
-      "pkt-input--fullwidth": this.fullwidth
-    }, this.buttonClasses = {
-      "pkt-input-icon": !0,
-      "pkt-btn": !0,
-      "pkt-btn--icon-only": !0,
-      "pkt-btn--tertiary": !0
-    }, this.addToSelected = (e) => {
+    super(...arguments), this.value = "", this._value = this.value ? Array.isArray(this.value) ? this.value : this.value.split(",") : [], this.label = "Datovelger", this.dateformat = k.props.dateformat.default, this.multiple = k.props.multiple.default, this.maxlength = k.props.maxlength.default, this.range = k.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = k.props.weeknumbers.default, this.withcontrols = k.props.withcontrols.default, this.fullwidth = !1, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.useWrapper = !0, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.buttonClasses = {}, this.inputRef = R(), this.inputRefTo = R(), this.btnRef = R(), this.calRef = R(), this.popupRef = R(), this.addToSelected = (e) => {
       const t = e.target;
       if (!t.value) return;
-      const a = this.min ? C(this.min) : null, s = this.max ? C(this.max) : null, i = C(t.value.split(",")[0]);
-      i && !isNaN(i.getTime()) && (!a || i >= a) && (!s || i <= s) && this.calRef.value && this.calRef.value.handleDateSelect(i), t.value = "";
+      const s = this.min ? T(this.min) : null, a = this.max ? T(this.max) : null, i = T(t.value.split(",")[0]);
+      i && !isNaN(i.getTime()) && (!s || i >= s) && (!a || i <= a) && this.calRef.value && this.calRef.value.handleDateSelect(i), t.value = "";
     };
   }
   /**
@@ -278,18 +269,18 @@ let l = class extends A {
    */
   async connectedCallback() {
     super.connectedCallback(), this.isMobileSafari = /iP(ad|od|hone)/i.test(window.navigator.userAgent) && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/), this.inputType = this.isMobileSafari ? "text" : "date", document && document.body.addEventListener("click", (e) => {
-      var t, a;
-      (t = this.inputRef) != null && t.value && ((a = this.btnRef) != null && a.value) && !this.inputRef.value.contains(e.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(e.target)) && !this.btnRef.value.contains(e.target) && !e.target.closest(".pkt-calendar-popup") && this.calendarOpen && (this.onBlur(), this.hideCalendar());
-    }), this.value.length && this._value.length === 0 && (this._value = Array.isArray(this.value) ? this.value : this.value.split(",")), this.min = this.min || v.props.min.default, this.max = this.max || v.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());
+      var t, s;
+      (t = this.inputRef) != null && t.value && ((s = this.btnRef) != null && s.value) && !this.inputRef.value.contains(e.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(e.target)) && !this.btnRef.value.contains(e.target) && !e.target.closest(".pkt-calendar-popup") && this.calendarOpen && (this.onBlur(), this.hideCalendar());
+    }), this.value.length && this._value.length === 0 && (this._value = Array.isArray(this.value) ? this.value : this.value.split(",")), this.min = this.min || k.props.min.default, this.max = this.max || k.props.max.default, typeof this.excludedates == "string" && (this.excludedates = this.excludedates.split(",")), typeof this.excludeweekdays == "string" && (this.excludeweekdays = this.excludeweekdays.split(",")), (this.multiple || this.range) && this.name && !this.name.endsWith("[]") && (this.name = this.name + "[]"), this.calendarOpen && (await B(20), this.handleCalendarPosition());
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document && document.body.removeEventListener("click", (e) => {
-      var t, a;
-      (t = this.inputRef) != null && t.value && ((a = this.btnRef) != null && a.value) && !this.inputRef.value.contains(e.target) && !this.btnRef.value.contains(e.target) && this.hideCalendar();
+      var t, s;
+      (t = this.inputRef) != null && t.value && ((s = this.btnRef) != null && s.value) && !this.inputRef.value.contains(e.target) && !this.btnRef.value.contains(e.target) && this.hideCalendar();
     });
   }
-  attributeChangedCallback(e, t, a) {
-    e === "value" && this.valueChanged(this.value, t), e === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = (a == null ? void 0 : a.split(",")) ?? []), e === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = (a == null ? void 0 : a.split(",")) ?? []), super.attributeChangedCallback(e, t, a);
+  attributeChangedCallback(e, t, s) {
+    e === "value" && this.valueChanged(this.value, t), e === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = (s == null ? void 0 : s.split(",")) ?? []), e === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = (s == null ? void 0 : s.split(",")) ?? []), super.attributeChangedCallback(e, t, s);
   }
   firstUpdated(e) {
     super.firstUpdated(e);
@@ -304,9 +295,9 @@ let l = class extends A {
    * Rendering
    */
   renderInput() {
-    return k`
+    return v`
       <input
-        class="${w(this.inputClasses)}"
+        class="${x(this.inputClasses)}"
         .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0] ?? ""}
@@ -338,98 +329,105 @@ let l = class extends A {
     `;
   }
   renderRangeInput() {
-    return k`
-      <div class="pkt-input-prefix">Fra</div>
+    const e = {
+      "pkt-input-prefix": this.showRangeLabels,
+      "pkt-hide": !this.showRangeLabels
+    };
+    return v`
+      ${this.showRangeLabels ? v` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : b}
       <input
-        class=${w(this.inputClasses)}
+        class=${x(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0] ?? ""}
         min=${this.min}
         max=${this.max}
-        @click=${(e) => {
-      e.preventDefault(), this.showCalendar();
+        @click=${(t) => {
+      t.preventDefault(), this.showCalendar();
     }}
         ?disabled=${this.disabled}
-        @keydown=${(e) => {
-      var t;
-      (e.key === "," || e.key === "Enter") && ((t = this.inputRef.value) == null || t.blur()), (e.key === "Space" || e.key === " ") && (e.preventDefault(), this.toggleCalendar(e));
+        @keydown=${(t) => {
+      var s;
+      (t.key === "," || t.key === "Enter") && ((s = this.inputRef.value) == null || s.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t));
     }}
-        @input=${(e) => {
-      this.onInput(), e.stopImmediatePropagation();
+        @input=${(t) => {
+      this.onInput(), t.stopImmediatePropagation();
     }}
         @focus=${() => {
       this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
-        @blur=${(e) => {
-      var t, a;
-      if (e.target.value) {
-        this.manageValidity(e.target);
-        const s = _(e.target.value);
-        s && this._value[0] !== e.target.value && this._value[1] && (this.clearInputValue(), (a = (t = this.calRef) == null ? void 0 : t.value) == null || a.handleDateSelect(s));
+        @blur=${(t) => {
+      var s, a;
+      if (t.target.value) {
+        this.manageValidity(t.target);
+        const i = D(t.target.value);
+        i && this._value[0] !== t.target.value && this._value[1] && (this.clearInputValue(), (a = (s = this.calRef) == null ? void 0 : s.value) == null || a.handleDateSelect(i));
       } else this._value[0] && this.clearInputValue();
     }}
-        @change=${(e) => {
-      e.stopImmediatePropagation();
+        @change=${(t) => {
+      t.stopImmediatePropagation();
     }}
         ${$(this.inputRef)}
       />
-      <div class="pkt-input-prefix" id="${this.id}-to-label">Til</div>
+      <div class="${x(e)}" id="${this.id}-to-label">
+        ${this.strings.generic.to}
+      </div>
+      ${this.showRangeLabels ? b : v` <div class="pkt-input-separator">–</div> `}
       <input
-        class=${w(this.inputClasses)}
+        class=${x(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-to"
         aria-labelledby="${this.id}-to-label"
         .value=${this._value[1] ?? ""}
         min=${this.min}
         max=${this.max}
-        @click=${(e) => {
-      e.preventDefault(), this.showCalendar();
+        @click=${(t) => {
+      t.preventDefault(), this.showCalendar();
     }}
         ?disabled=${this.disabled}
-        @keydown=${(e) => {
-      var t;
-      (e.key === "," || e.key === "Enter") && ((t = this.inputRefTo.value) == null || t.blur()), (e.key === "Space" || e.key === " ") && (e.preventDefault(), this.toggleCalendar(e));
+        @keydown=${(t) => {
+      var s;
+      (t.key === "," || t.key === "Enter") && ((s = this.inputRefTo.value) == null || s.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t));
     }}
-        @input=${(e) => {
-      this.onInput(), e.stopImmediatePropagation();
+        @input=${(t) => {
+      this.onInput(), t.stopImmediatePropagation();
     }}
         @focus=${() => {
       this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
-        @blur=${(e) => {
-      var t, a, s;
-      if ((t = this.calRef.value) != null && t.contains(e.relatedTarget) || this.onBlur(), e.target.value) {
-        this.manageValidity(e.target);
-        const i = e.target.value;
-        this.min && this.min > i ? this.internals.setValidity(
+        @blur=${(t) => {
+      var s, a, i;
+      if ((s = this.calRef.value) != null && s.contains(t.relatedTarget) || this.onBlur(), t.target.value) {
+        this.manageValidity(t.target);
+        const r = t.target.value;
+        this.min && this.min > r ? this.internals.setValidity(
           { rangeUnderflow: !0 },
           this.strings.forms.messages.rangeUnderflow,
-          e.target
-        ) : this.max && this.max < i && this.internals.setValidity(
+          t.target
+        ) : this.max && this.max < r && this.internals.setValidity(
           { rangeOverflow: !0 },
           this.strings.forms.messages.rangeOverflow,
-          e.target
+          t.target
         );
-        const n = _(e.target.value);
-        n && this._value[1] !== N(n) && ((s = (a = this.calRef) == null ? void 0 : a.value) == null || s.handleDateSelect(n));
+        const n = D(t.target.value);
+        n && this._value[1] !== W(n) && ((i = (a = this.calRef) == null ? void 0 : a.value) == null || i.handleDateSelect(n));
       }
     }}
-        @change=${(e) => {
-      e.stopImmediatePropagation();
+        @change=${(t) => {
+      t.stopImmediatePropagation();
     }}
         ${$(this.inputRefTo)}
       />
     `;
   }
   renderMultipleInput() {
-    return k`
+    return console.log("renderMultipleInput", this.inputClasses, this.multiple), v`
       <input
-        class=${w(this.inputClasses)}
+        class=${x(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
-        min=${this.min}
-        max=${this.max}
+        .min=${this.min || b}
+        .max=${this.max || b}
         @click=${(e) => {
       e.preventDefault(), this.showCalendar();
     }}
@@ -455,12 +453,12 @@ let l = class extends A {
     `;
   }
   renderTags() {
-    return k`
+    return v`
       <div class="pkt-datepicker__tags" aria-live="polite">
-        ${this._value[0] ? W(
+        ${this._value[0] ? K(
       this._value ?? [],
       (e) => e,
-      (e) => k`
+      (e) => v`
                 <pkt-tag
                   .id="${this.id + e + "-tag"}"
                   closeTag
@@ -470,17 +468,17 @@ let l = class extends A {
       )}"
                   @close=${() => {
         var t;
-        return (t = this.calRef.value) == null ? void 0 : t.handleDateSelect(_(e));
+        return (t = this.calRef.value) == null ? void 0 : t.handleDateSelect(D(e));
       }}
                   >${M(e, this.dateformat)}</pkt-tag
                 >
               `
-    ) : O}
+    ) : b}
       </div>
     `;
   }
   renderCalendar() {
-    return k`<div
+    return v`<div
       class="pkt-calendar-popup pkt-${this.calendarOpen ? "show" : "hide"}"
       @focusout=${(e) => {
       this.calendarOpen && this.handleFocusOut(e);
@@ -500,7 +498,7 @@ let l = class extends A {
         .latest=${this.max}
         .excludedates=${Array.isArray(this.excludedates) ? this.excludedates : this.excludedates.split(",")}
         .excludeweekdays=${this.excludeweekdays}
-        .currentmonth=${this.currentmonth ? C(this.currentmonth) : null}
+        .currentmonth=${this.currentmonth ? T(this.currentmonth) : null}
         @date-selected=${(e) => {
       this.value = !this.multiple && !this.range ? e.detail[0] : e.detail, this._value = e.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] : ""));
     }}
@@ -512,7 +510,19 @@ let l = class extends A {
     </div>`;
   }
   render() {
-    return k`
+    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
+    }, v`
       <pkt-input-wrapper
         label="${this.label}"
         forId="${this.id}-input"
@@ -533,12 +543,14 @@ let l = class extends A {
         .helptextDropdownButton=${this.helptextDropdownButton}
         class="pkt-datepicker"
       >
-        ${this.multiple ? this.renderTags() : O}
-        <div class="pkt-datepicker__inputs ${this.range ? "pkt-input__range-inputs" : ""}">
+        ${this.multiple ? this.renderTags() : b}
+        <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="${w(this.buttonClasses)}"
+              class="${x(this.buttonClasses)}"
               type="button"
               @click=${this.toggleCalendar}
               ?disabled=${this.disabled}
@@ -559,9 +571,9 @@ let l = class extends A {
   handleCalendarPosition() {
     var e;
     if (this.popupRef.value && this.inputRef.value) {
-      const t = this.multiple && !!this.maxlength, a = ((e = this.inputRef.value.parentElement) == null ? void 0 : e.getBoundingClientRect()) || this.inputRef.value.getBoundingClientRect(), s = t ? a.height + 30 : a.height, i = this.popupRef.value.getBoundingClientRect().height;
-      let n = t ? "calc(100% - 30px)" : "100%";
-      a && a.top + i > window.innerHeight && a.top - i > 0 && (n = `calc(100% - ${s}px - ${i}px)`), this.popupRef.value.style.top = n;
+      const t = this.multiple && !!this.maxlength, s = ((e = this.inputRef.value.parentElement) == null ? void 0 : e.getBoundingClientRect()) || this.inputRef.value.getBoundingClientRect(), a = t ? s.height + 30 : s.height, i = this.popupRef.value.getBoundingClientRect().height;
+      let r = t ? "calc(100% - 30px)" : "100%";
+      s && s.top + i > window.innerHeight && s.top - i > 0 && (r = `calc(100% - ${a}px - ${i}px)`), this.popupRef.value.style.top = r;
     }
   }
   handleFocusOut(e) {
@@ -578,61 +590,70 @@ let l = class extends A {
     e.preventDefault(), this.calendarOpen ? this.hideCalendar() : this.showCalendar();
   }
 };
-d([
-  u({ type: String, reflect: !0 })
+o([
+  d({ type: String, reflect: !0 })
 ], l.prototype, "value", 2);
-d([
-  u({ type: Array })
+o([
+  d({ type: Array })
 ], l.prototype, "_value", 2);
-d([
-  u({ type: String })
+o([
+  d({ type: String })
 ], l.prototype, "label", 2);
-d([
-  u({ type: String })
+o([
+  d({ type: String })
 ], l.prototype, "dateformat", 2);
-d([
-  u({ type: Boolean, reflect: !0 })
+o([
+  d({ type: Boolean, reflect: !0 })
 ], l.prototype, "multiple", 2);
-d([
-  u({ type: Number })
+o([
+  d({ type: Number })
 ], l.prototype, "maxlength", 2);
-d([
-  u({ type: Boolean, reflect: !0 })
+o([
+  d({ type: Boolean, reflect: !0 })
 ], l.prototype, "range", 2);
-d([
-  u({ type: String })
+o([
+  d({ type: Boolean })
+], l.prototype, "showRangeLabels", 2);
+o([
+  d({ type: String })
 ], l.prototype, "min", 2);
-d([
-  u({ type: String })
+o([
+  d({ type: String })
 ], l.prototype, "max", 2);
-d([
-  u({ type: Boolean })
+o([
+  d({ type: Boolean })
 ], l.prototype, "weeknumbers", 2);
-d([
-  u({ type: Boolean })
+o([
+  d({ type: Boolean })
 ], l.prototype, "withcontrols", 2);
-d([
-  u({ type: Boolean })
+o([
+  d({ type: Boolean })
 ], l.prototype, "fullwidth", 2);
-d([
-  u({ converter: P.csvToArray })
+o([
+  d({ converter: V.csvToArray })
 ], l.prototype, "excludedates", 2);
-d([
-  u({ converter: P.csvToArray })
+o([
+  d({ converter: V.csvToArray })
 ], l.prototype, "excludeweekdays", 2);
-d([
-  u({ type: String })
+o([
+  d({ type: String })
 ], l.prototype, "currentmonth", 2);
-d([
-  u({ type: Boolean })
+o([
+  d({ type: Boolean })
 ], l.prototype, "useWrapper", 2);
-d([
-  u({ type: Boolean, reflect: !0 })
+o([
+  d({ type: Boolean, reflect: !0 })
 ], l.prototype, "calendarOpen", 2);
-d([
-  u({ type: String })
+o([
+  d({ type: String })
 ], l.prototype, "timezone", 2);
-l = d([
+o([
+  P()
+], l.prototype, "inputClasses", 2);
+o([
+  P()
+], l.prototype, "buttonClasses", 2);
+l = o([
   H("pkt-datepicker")
 ], l);
 export {

package/dist/pkt-element.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CBFF6OHE.cjs");exports.PktElement=e.PktElement;exports.PktInputElement=e.PktInputElement;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BVbNUNAa.cjs");exports.PktElement=e.PktElement;exports.PktInputElement=e.PktInputElement;

package/dist/pkt-element.js

@@ -1,4 +1,4 @@
-import { P as a, a as m } from "./index-Dw-V4--g.js";
+import { P as a, a as m } from "./index-BQ9BMXel.js";
 export {
   a as PktElement,
   m as PktInputElement

package/dist/pkt-helptext.cjs

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

package/dist/pkt-helptext.js

@@ -1,4 +1,4 @@
-import { P as t } from "./helptext-B0Frb38k.js";
+import { P as t } from "./helptext-D-5_-HAW.js";
 const p = t;
 export {
   t as PktHelptext,

package/dist/pkt-icon.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-CBFF6OHE.cjs");require("./custom-element-B-TlBwRu.cjs");const e=require("./index-CqWQt14b.cjs");Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>e.PktIcon});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-BVbNUNAa.cjs");require("./custom-element-B-TlBwRu.cjs");const e=require("./index-DYiD-o1w.cjs");Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>e.PktIcon});

package/dist/pkt-icon.js

@@ -1,6 +1,6 @@
-import "./index-Dw-V4--g.js";
+import "./index-BQ9BMXel.js";
 import "./custom-element-CWfU4dcr.js";
-import { P as p } from "./index-DkLa0YLm.js";
+import { P as p } from "./index-BfUPq43a.js";
 export {
   p as PktIcon
 };

package/dist/pkt-index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./pkt-alert.cjs"),t=require("./index-aLVFdclF.cjs"),r=require("./pkt-card.cjs"),n=require("./pkt-component-template.cjs"),o=require("./pkt-datepicker.cjs"),u=require("./helptext-0fI9cWEe.cjs"),a=require("./index-CqWQt14b.cjs"),P=require("./pkt-input-wrapper.cjs"),c=require("./pkt-link.cjs"),i=require("./pkt-messagebox.cjs"),p=require("./modal-FnkYHLoK.cjs"),k=require("./pkt-tag.cjs");Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>t.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>r.PktCard});Object.defineProperty(exports,"PktComponent",{enumerable:!0,get:()=>n.PktComponent});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>o.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>u.PktHelptext});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>a.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>P.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>c.PktLink});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>i.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>p.PktModal});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>k.PktTag});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./pkt-alert.cjs"),t=require("./index-DyL6sqFY.cjs"),r=require("./pkt-card.cjs"),n=require("./pkt-component-template.cjs"),o=require("./pkt-datepicker.cjs"),u=require("./helptext-WCq0-Dq8.cjs"),a=require("./index-DYiD-o1w.cjs"),P=require("./pkt-input-wrapper.cjs"),c=require("./pkt-link.cjs"),i=require("./pkt-messagebox.cjs"),p=require("./modal-BXKX0dxk.cjs"),k=require("./pkt-tag.cjs");Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>t.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>r.PktCard});Object.defineProperty(exports,"PktComponent",{enumerable:!0,get:()=>n.PktComponent});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>o.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>u.PktHelptext});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>a.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>P.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>c.PktLink});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>i.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>p.PktModal});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>k.PktTag});

package/dist/pkt-index.js

@@ -1,14 +1,14 @@
 import { PktAlert as o } from "./pkt-alert.js";
-import { P as p } from "./index-DmedytuY.js";
+import { P as p } from "./index-BR7EVgX9.js";
 import { PktCard as k } from "./pkt-card.js";
 import { PktComponent as m } from "./pkt-component-template.js";
 import { PktDatepicker as f } from "./pkt-datepicker.js";
-import { P as s } from "./helptext-B0Frb38k.js";
-import { P as d } from "./index-DkLa0YLm.js";
+import { P as s } from "./helptext-D-5_-HAW.js";
+import { P as d } from "./index-BfUPq43a.js";
 import { PktInputWrapper as c } from "./pkt-input-wrapper.js";
 import { PktLink as i } from "./pkt-link.js";
 import { PktMessagebox as M } from "./pkt-messagebox.js";
-import { P as u } from "./modal-D6J8TqCp.js";
+import { P as u } from "./modal-CYx_wrz1.js";
 import { PktTag as D } from "./pkt-tag.js";
 export {
   o as PktAlert,