@oslokommune/punkt-elements 13.5.12 → 13.6.0

package/dist/{datepicker-F3TwE9o7.js → datepicker-X2o0j5kW.js}

@@ -1,16 +1,68 @@
 import { e as f } from "./class-map-BpTj9gtz.js";
-import { o as h } from "./if-defined-CmuO4Vz9.js";
-import { x as u, E as g, n as r, a as R } from "./element-CgEWt74-.js";
-import { r as k } from "./state-Bo2bck5_.js";
-import { n as v, f as y, a as w, b as $, p as C, d as x } from "./calendar-CJSxvwAq.js";
-import { P as _ } from "./input-element-NnrDmp4r.js";
-import { e as m, n as p } from "./ref-BBYSqgeW.js";
-import { c as S } from "./repeat-C8BeHwYx.js";
+import { o } from "./if-defined-CmuO4Vz9.js";
+import { P as _, E as y, x as p, n as r, a as w } from "./element-CgEWt74-.js";
+import { r as R } from "./state-Bo2bck5_.js";
+import { f as k, n as $, a as b, b as S, p as T, d as C } from "./calendar-DJVaC_zI.js";
+import { P as D } from "./input-element-NnrDmp4r.js";
+import { e as m, n as d } from "./ref-BBYSqgeW.js";
 import "./icon-CC1js8eR.js";
 import "./input-wrapper-Dr__Sxql.js";
+import { c as P } from "./repeat-C8BeHwYx.js";
 import "./tag-DyXzTY68.js";
-import { P as T } from "./pkt-slot-controller-BPGj-LC5.js";
-const D = {
+import { u as B } from "./stringutils-DJjRa8dG.js";
+import { P as I } from "./pkt-slot-controller-BPGj-LC5.js";
+var O = Object.defineProperty, A = Object.getOwnPropertyDescriptor, v = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? A(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 && O(e, i, s), s;
+};
+let g = class extends _ {
+  constructor() {
+    super(...arguments), this.dates = [], this.dateformat = "dd.MM.yyyy", this.className = "pkt-datepicker__tags", this.idBase = B();
+  }
+  render() {
+    return this.classes = {
+      "pkt-date-tags": !0,
+      [this.className]: !0
+    }, p`
+      <div class=${f(this.classes)} aria-live="polite">
+        ${Array.isArray(this.dates) && this.dates[0] ? P(
+      (this.dates ?? []).filter(Boolean).sort(),
+      (t) => t,
+      (t) => {
+        var e;
+        return p` <pkt-tag
+                  id=${this.idBase + t + "-tag"}
+                  closeTag
+                  @close=${() => {
+          this.dispatchEvent(new CustomEvent("date-tag-removed", { detail: t }));
+        }}
+                  .ariaLabel=${`${(e = this.strings) == null ? void 0 : e.calendar.deleteDate} ${k(t, this.dateformat)}`}
+                >
+                  <time datetime=${t}>${k(t, this.dateformat)}</time>
+                </pkt-tag>`;
+      }
+    ) : y}
+      </div>
+    `;
+  }
+};
+v([
+  r({ type: Array })
+], g.prototype, "dates", 2);
+v([
+  r({ type: String })
+], g.prototype, "dateformat", 2);
+v([
+  r({ type: String, attribute: "class" })
+], g.prototype, "className", 2);
+v([
+  r({ type: String, attribute: "id-base" })
+], g.prototype, "idBase", 2);
+g = v([
+  w("pkt-date-tags")
+], g);
+const E = {
   dateformat: {
     default: "dd.MM.yyyy"
   },
@@ -33,15 +85,15 @@ const D = {
     default: !1
   }
 }, c = {
-  props: D
+  props: E
 };
-var I = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? P(e, i) : e, o = t.length - 1, d; o >= 0; o--)
-    (d = t[o]) && (a = (s ? d(e, i, a) : d(a)) || a);
-  return s && a && I(e, i, a), a;
+var L = Object.defineProperty, M = Object.getOwnPropertyDescriptor, n = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? M(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 && L(e, i, s), s;
 };
-const b = (t) => new Promise((e) => setTimeout(e, t));
-let l = class extends _ {
+const x = (t) => new Promise((e) => setTimeout(e, t));
+let l = class extends D {
   /**
    * Housekeeping / lifecycle methods
    */
@@ -49,9 +101,9 @@ let l = class extends _ {
     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, s = this.max ? v(this.max) : null, a = v(e.value.split(",")[0]);
-      a && !isNaN(a.getTime()) && (!i || a >= i) && (!s || a <= s) && this.calRef.value && this.calRef.value.handleDateSelect(a), e.value = "";
-    }, this.slotController = new T(this, this.helptextSlot);
+      const i = this.min ? $(this.min) : null, a = this.max ? $(this.max) : null, s = $(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 I(this, this.helptextSlot);
   }
   get value() {
     return this._valueProperty;
@@ -64,11 +116,11 @@ let l = class extends _ {
     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 s, a;
-      (s = this.inputRef) != null && s.value && ((a = this.btnRef) != null && a.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());
+      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 || 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());
+    }), 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 x(20), this.handleCalendarPosition());
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document && document.body.removeEventListener("click", (t) => {
@@ -83,16 +135,16 @@ let l = class extends _ {
     if (t === e) return;
     let i = [];
     t && (typeof t == "string" ? i = t.split(",").filter(Boolean) : i = String(t).split(",").filter(Boolean)), this._value = i;
-    const s = i.join(",");
-    this._valueProperty !== s && (this._valueProperty = s), super.valueChanged(s, e);
+    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"), s = Array.isArray(i) ? i.join(",") : i;
-      this.valueChanged(e, s);
+      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);
   }
@@ -100,15 +152,15 @@ let l = class extends _ {
    * Rendering
    */
   renderInput() {
-    return u`
+    return p`
       <input
         class="${f(this.inputClasses)}"
         .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0] ?? ""}
-        min=${h(this.min)}
-        max=${h(this.max)}
-        placeholder=${h(this.placeholder)}
+        min=${o(this.min)}
+        max=${o(this.max)}
+        placeholder=${o(this.placeholder)}
         ?readonly=${this.readonly}
         aria-describedby="${this.id}-helptext"
         @click=${(t) => {
@@ -118,8 +170,8 @@ let l = class extends _ {
         @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 s = this.internals.form;
-        s ? s.requestSubmit() : (i = this.inputRef.value) == null || i.blur();
+        const a = this.internals.form;
+        a ? a.requestSubmit() : (i = this.inputRef.value) == null || i.blur();
       }
     }}
         @input=${(t) => {
@@ -135,7 +187,7 @@ let l = class extends _ {
         @change=${(t) => {
       this.touched = !0, t.stopImmediatePropagation();
     }}
-        ${p(this.inputRef)}
+        ${d(this.inputRef)}
       />
     `;
   }
@@ -144,26 +196,26 @@ let l = class extends _ {
       "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> ` : y}
       <input
         class=${f(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0] ?? ""}
-        min=${h(this.min)}
-        max=${h(this.max)}
-        placeholder=${h(this.placeholder)}
+        min=${o(this.min)}
+        max=${o(this.max)}
+        placeholder=${o(this.placeholder)}
         ?readonly=${this.readonly}
         ?disabled=${this.disabled}
         @click=${(e) => {
       e.preventDefault(), this.showCalendar();
     }}
         @keydown=${(e) => {
-      var i, s;
+      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 a = this.internals.form;
-        a ? a.requestSubmit() : (s = this.inputRefTo.value) == null || s.focus();
+        const s = this.internals.form;
+        s ? s.requestSubmit() : (a = this.inputRefTo.value) == null || a.focus();
       }
     }}
         @input=${(e) => {
@@ -173,41 +225,41 @@ let l = class extends _ {
       this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
         @blur=${(e) => {
-      var i, s;
+      var i, a;
       if (e.target.value) {
         this.manageValidity(e.target);
-        const a = y(e.target.value);
-        a && this._value[0] !== e.target.value && this._value[1] && (this.clearInputValue(), (s = (i = this.calRef) == null ? void 0 : i.value) == null || s.handleDateSelect(a));
+        const s = b(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();
     }}
-        ${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 ? y : p` <div class="pkt-input-separator">–</div> `}
       <input
         class=${f(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-to"
         aria-labelledby="${this.id}-to-label"
         .value=${this._value[1] ?? ""}
-        min=${h(this.min)}
-        max=${h(this.max)}
-        placeholder=${h(this.placeholder)}
+        min=${o(this.min)}
+        max=${o(this.max)}
+        placeholder=${o(this.placeholder)}
         ?readonly=${this.readonly}
         ?disabled=${this.disabled}
         @click=${(e) => {
       e.preventDefault(), this.showCalendar();
     }}
         @keydown=${(e) => {
-      var i, s;
+      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 a = this.internals.form;
-        a ? a.requestSubmit() : (s = this.inputRefTo.value) == null || s.blur();
+        const s = this.internals.form;
+        s ? s.requestSubmit() : (a = this.inputRefTo.value) == null || a.blur();
       }
     }}
         @input=${(e) => {
@@ -217,39 +269,39 @@ let l = class extends _ {
       this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
         @blur=${(e) => {
-      var i, s, a;
+      var i, a, s;
       if ((i = this.calRef.value) != null && i.contains(e.relatedTarget) || this.onBlur(), e.target.value) {
         this.manageValidity(e.target);
-        const o = e.target.value;
-        this.min && this.min > o ? this.internals.setValidity(
+        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 < o && this.internals.setValidity(
+        ) : this.max && this.max < h && this.internals.setValidity(
           { rangeOverflow: !0 },
           this.strings.forms.messages.rangeOverflow,
           e.target
         );
-        const d = y(e.target.value);
-        d && this._value[1] !== w(d) && ((a = (s = this.calRef) == null ? void 0 : s.value) == null || a.handleDateSelect(d));
+        const u = b(e.target.value);
+        u && this._value[1] !== S(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 u`
+    return p`
       <input
         class=${f(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
-        min=${h(this.min)}
-        max=${h(this.max)}
-        placeholder=${h(this.placeholder)}
+        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) => {
@@ -275,43 +327,18 @@ let l = class extends _ {
         @change=${(t) => {
       this.touched = !0, t.stopImmediatePropagation();
     }}
-        ${p(this.inputRef)}
+        ${d(this.inputRef)}
       />
     `;
   }
-  renderTags() {
-    return u`
-      <div class="pkt-datepicker__tags" aria-live="polite">
-        ${this._value[0] ? S(
-      (this._value ?? []).filter(Boolean).sort(),
-      (t) => t,
-      (t) => u`
-                <pkt-tag
-                  .id="${this.id + t + "-tag"}"
-                  closeTag
-                  ariaLabel="${this.strings.calendar.deleteDate} ${$(
-        t,
-        this.dateformat
-      )}"
-                  @close=${() => {
-        var e;
-        return (e = this.calRef.value) == null ? void 0 : e.handleDateSelect(y(t));
-      }}
-                  ><time datetime="${t}">${$(t, this.dateformat)}</time></pkt-tag
-                >
-              `
-    ) : g}
-      </div>
-    `;
-  }
   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"
@@ -325,14 +352,14 @@ let l = class extends _ {
         .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=${(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();
     }}
-        ${p(this.calRef)}
+        ${d(this.calRef)}
       ></pkt-calendar>
     </div>`;
   }
@@ -350,7 +377,7 @@ let l = class extends _ {
       "pkt-btn--icon-only": !0,
       "pkt-btn--tertiary": !0,
       "pkt-datepicker__calendar-button": !0
-    }, u`
+    }, p`
       <pkt-input-wrapper
         label="${this.label}"
         forId="${this.id}-input"
@@ -375,8 +402,17 @@ let l = class extends _ {
         .ariaDescribedBy=${this.ariaDescribedBy}
         class="pkt-datepicker"
       >
-        <div class="pkt-contents" ${p(this.helptextSlot)} name="helptext" slot="helptext"></div>
-        ${this.multiple ? this.renderTags() : g}
+        <div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        ${this.multiple ? p`<pkt-date-tags
+              .dates=${this._value}
+              dateformat=${this.dateformat}
+              strings=${this.strings}
+              id-base=${this.id}
+              @date-tag-removed=${(t) => {
+      var e;
+      (e = this.calRef.value) == null || e.handleDateSelect(b(t.detail));
+    }}
+            ></pkt-date-tags>` : y}
         <div
           class="pkt-datepicker__inputs ${this.range && this.showRangeLabels ? "pkt-input__range-inputs" : ""}"
         >
@@ -390,7 +426,7 @@ let l = class extends _ {
       (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>
@@ -407,9 +443,9 @@ let l = class extends _ {
   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(), s = e ? i.height + 30 : i.height, a = this.popupRef.value.getBoundingClientRect().height;
-      let o = e ? "calc(100% - 30px)" : "100%";
-      i && i.top + a > window.innerHeight && i.top - a > 0 && (o = `calc(100% - ${s}px - ${a}px)`), this.popupRef.value.style.top = o;
+      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) {
@@ -417,7 +453,7 @@ let l = class extends _ {
   }
   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 x(20), this.handleCalendarPosition(), this.isMobileSafari && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
   }
   hideCalendar() {
     this.calendarOpen = !1;
@@ -466,10 +502,10 @@ n([
   r({ type: Boolean, reflect: !0 })
 ], l.prototype, "withcontrols", 2);
 n([
-  r({ converter: x.csvToArray })
+  r({ converter: C.csvToArray })
 ], l.prototype, "excludedates", 2);
 n([
-  r({ converter: x.csvToArray })
+  r({ converter: C.csvToArray })
 ], l.prototype, "excludeweekdays", 2);
 n([
   r({ type: String })
@@ -481,14 +517,15 @@ n([
   r({ type: String })
 ], l.prototype, "timezone", 2);
 n([
-  k()
+  R()
 ], l.prototype, "inputClasses", 2);
 n([
-  k()
+  R()
 ], l.prototype, "buttonClasses", 2);
 l = n([
-  R("pkt-datepicker")
+  w("pkt-datepicker")
 ], l);
 export {
-  l as P
+  g as P,
+  l as a
 };

package/dist/index.d.ts

@@ -707,7 +707,6 @@ export declare class PktDatepicker extends PktInputElement {
     renderInput(): TemplateResult<1>;
     renderRangeInput(): TemplateResult<1>;
     renderMultipleInput(): TemplateResult<1>;
-    renderTags(): TemplateResult<1>;
     renderCalendar(): TemplateResult<1>;
     render(): TemplateResult<1>;
     /**
@@ -722,6 +721,21 @@ export declare class PktDatepicker extends PktInputElement {
     clearInputValue(): void;
 }
 
+/**
+ * OBS! `dateformat` er standard formatteringsstreng for visning av datoer.
+ * Denne brukes for å sette "menneskeleselig" format på datoene i tags.
+ *
+ * Følger denne unicode-standarden:
+ * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+ */
+export declare class PktDateTags extends PktElement {
+    dates: TISODate[];
+    dateformat: string;
+    className: string;
+    idBase: string;
+    render(): TemplateResult<1>;
+}
+
 /**
  * Base class for Punkt light DOM elements
  * This class extends PktShadowElement but renders in light DOM instead of shadow DOM
@@ -1046,11 +1060,13 @@ export { PktRadioButton as PktRadiobutton }
 export declare class PktSelect extends PktInputElement implements IPktSelect {
     private inputRef;
     private helptextSlot;
-    options: TSelectOption[];
+    private _optionsProp;
     value: string;
     private _options;
     selectedIndex: number | null;
     selectedOptions: HTMLCollectionOf<HTMLOptionElement> | undefined;
+    get options(): TSelectOption[];
+    set options(value: TSelectOption[]);
     constructor();
     connectedCallback(): void;
     add(item: HTMLOptionElement, before?: HTMLOptionElement | number): void;
@@ -1228,12 +1244,18 @@ declare type TCardTagPosition = 'top' | 'bottom';
 
 declare type TCounterPosition = 'top' | 'bottom';
 
+declare type TDay = `${number}${number}`;
+
+declare type TISODate = `${TYear}-${TMonth}-${TDay}`;
+
 declare type TLayout = 'vertical' | 'horizontal';
 
 declare type TLinkCardSkin = 'normal' | 'no-padding' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline';
 
 declare type TMessageboxSkin = 'beige' | 'blue' | 'red' | 'green';
 
+declare type TMonth = `${number}${number}`;
+
 export declare type TPktAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue';
 
 export declare type TPktButtonColor = 'blue' | 'blue-outline' | 'green' | 'green-outline' | 'green-dark' | 'green-dark-outline' | 'beige-light' | 'beige-dark-outline' | 'yellow' | 'yellow-outline' | 'red' | 'red-outline';
@@ -1282,4 +1304,6 @@ export declare type TTagSkin = 'blue' | 'blue-dark' | 'blue-light' | 'green' | '
 
 export declare type TTagType = 'button' | 'reset' | 'submit';
 
+declare type TYear = `${number}${number}${number}${number}`;
+
 export { }

package/dist/pkt-calendar.js

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

package/dist/pkt-datepicker.cjs

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

package/dist/pkt-datepicker.js

@@ -1,6 +1,6 @@
-import { P as t } from "./datepicker-F3TwE9o7.js";
-const a = t;
+import { a as t } from "./datepicker-X2o0j5kW.js";
+const e = t;
 export {
   t as PktDatepicker,
-  a as default
+  e as default
 };

package/dist/pkt-index.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-7rUOhlNi.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),d=require("./backlink-JbBNi3qg.cjs"),b=require("./button-B8rdtaHB.cjs"),k=require("./calendar-32W9p9uc.cjs"),m=require("./card-DBlFf1ry.cjs"),g=require("./combobox-D84REr9N.cjs"),h=require("./consent-hYeFWNFr.cjs"),f=require("./checkbox-Gn7Wtk9h.cjs"),t=require("./element-6DBpyGQm.cjs"),y=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),j=require("./datepicker-DonUad47.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-CNycsyMj.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-Cjl0xwSq.cjs"),$=require("./linkcard-DqIvb54H.cjs"),L=require("./loader-DNidjwH-.cjs"),_=require("./messagebox-CjPtPPrW.cjs"),A=require("./modal-CRtxhCaP.cjs"),B=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),T=require("./tag-Bbs0U_Au.cjs"),I=require("./textarea-CPXsMFUq.cjs"),M=require("./textinput-aNI5kibM.cjs"),R=require("./select-CD6Zn8YH.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
-      <div class="${O.e(e)}">
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-7rUOhlNi.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),b=require("./backlink-JbBNi3qg.cjs"),m=require("./button-B8rdtaHB.cjs"),P=require("./calendar-32W9p9uc.cjs"),g=require("./card-DBlFf1ry.cjs"),h=require("./combobox-D84REr9N.cjs"),f=require("./consent-hYeFWNFr.cjs"),y=require("./checkbox-Gn7Wtk9h.cjs"),t=require("./element-6DBpyGQm.cjs"),O=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-iJtiv3o2.cjs"),j=require("./class-map-BBG2gMX4.cjs"),k=require("./datepicker-CA1a4oIH.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-CNycsyMj.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-Cjl0xwSq.cjs"),$=require("./linkcard-DqIvb54H.cjs"),L=require("./loader-DNidjwH-.cjs"),T=require("./messagebox-CjPtPPrW.cjs"),_=require("./modal-CRtxhCaP.cjs"),A=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),B=require("./tag-Bbs0U_Au.cjs"),I=require("./textarea-CPXsMFUq.cjs"),D=require("./textinput-aNI5kibM.cjs"),M=require("./select-Be--DBcR.cjs");var R=Object.defineProperty,H=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?H(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&R(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new O.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+      <div class="${j.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 
         <h2 class="pkt-txt-22">Innhold fra attributter og funksjoner</h2>
@@ -26,4 +26,4 @@
       <ul>
         ${e.map(r=>t.x`<li>${r}</li>`)}
       </ul>
-    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:k.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>P.PktAlert});exports.PktAccordion=l.PktAccordion;exports.PktAccordionItem=l.PktAccordionItem;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>d.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>b.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>k.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>m.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>g.PktCombobox});Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>h.PktConsent});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>f.PktCheckbox});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>j.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>q.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>x.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>C.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>v.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>S.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>$.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>L.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>_.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>A.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>B.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>T.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>I.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>M.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>R.PktSelect});
+    `}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:P.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>d.PktAlert});exports.PktAccordion=l.PktAccordion;exports.PktAccordionItem=l.PktAccordionItem;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>b.PktBackLink});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>m.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>P.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>g.PktCard});Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>h.PktCombobox});Object.defineProperty(exports,"PktConsent",{enumerable:!0,get:()=>f.PktConsent});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>y.PktCheckbox});Object.defineProperty(exports,"PktDateTags",{enumerable:!0,get:()=>k.PktDateTags});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>k.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>q.PktHelptext});Object.defineProperty(exports,"PktHeading",{enumerable:!0,get:()=>x.PktHeading});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>C.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>v.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>S.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>$.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>L.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>T.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>_.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>A.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>B.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>I.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>D.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>M.PktSelect});