@oslokommune/punkt-elements 13.5.9 → 13.5.11

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

@@ -1,16 +1,16 @@
 import { e as f } from "./class-map-BpTj9gtz.js";
-import { o } from "./if-defined-CmuO4Vz9.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 { 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 "./icon-CC1js8eR.js";
 import "./input-wrapper-Dr__Sxql.js";
 import "./tag-DyXzTY68.js";
-import { P as D } from "./pkt-slot-controller-BPGj-LC5.js";
-const I = {
+import { P as T } from "./pkt-slot-controller-BPGj-LC5.js";
+const D = {
   dateformat: {
     default: "dd.MM.yyyy"
   },
@@ -33,15 +33,15 @@ const I = {
     default: !1
   }
 }, c = {
-  props: I
+  props: D
 };
-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;
+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;
 };
-const k = (t) => new Promise((e) => setTimeout(e, t));
-let l = class extends S {
+const b = (t) => new Promise((e) => setTimeout(e, t));
+let l = class extends _ {
   /**
    * Housekeeping / lifecycle methods
    */
@@ -49,9 +49,9 @@ let l = class extends S {
     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 ? 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 D(this, this.helptextSlot);
+      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);
   }
   get value() {
     return this._valueProperty;
@@ -64,11 +64,11 @@ let l = class extends S {
     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());
+      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());
     }), 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());
+    }), 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());
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document && document.body.removeEventListener("click", (t) => {
@@ -80,27 +80,19 @@ let l = class extends S {
     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);
-    }
+    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);
   }
   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);
+      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);
     }
     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);
   }
@@ -108,15 +100,15 @@ let l = class extends S {
    * Rendering
    */
   renderInput() {
-    return p`
+    return u`
       <input
         class="${f(this.inputClasses)}"
         .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0] ?? ""}
-        min=${o(this.min)}
-        max=${o(this.max)}
-        placeholder=${o(this.placeholder)}
+        min=${h(this.min)}
+        max=${h(this.max)}
+        placeholder=${h(this.placeholder)}
         ?readonly=${this.readonly}
         aria-describedby="${this.id}-helptext"
         @click=${(t) => {
@@ -126,8 +118,8 @@ let l = class extends S {
         @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();
+        const s = this.internals.form;
+        s ? s.requestSubmit() : (i = this.inputRef.value) == null || i.blur();
       }
     }}
         @input=${(t) => {
@@ -143,7 +135,7 @@ let l = class extends S {
         @change=${(t) => {
       this.touched = !0, t.stopImmediatePropagation();
     }}
-        ${d(this.inputRef)}
+        ${p(this.inputRef)}
       />
     `;
   }
@@ -152,26 +144,26 @@ let l = class extends S {
       "pkt-input-prefix": this.showRangeLabels,
       "pkt-hide": !this.showRangeLabels
     };
-    return p`
-      ${this.showRangeLabels ? p` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : g}
+    return u`
+      ${this.showRangeLabels ? u` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : g}
       <input
         class=${f(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
         .value=${this._value[0] ?? ""}
-        min=${o(this.min)}
-        max=${o(this.max)}
-        placeholder=${o(this.placeholder)}
+        min=${h(this.min)}
+        max=${h(this.max)}
+        placeholder=${h(this.placeholder)}
         ?readonly=${this.readonly}
         ?disabled=${this.disabled}
         @click=${(e) => {
       e.preventDefault(), this.showCalendar();
     }}
         @keydown=${(e) => {
-      var i, a;
+      var i, s;
       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();
+        const a = this.internals.form;
+        a ? a.requestSubmit() : (s = this.inputRefTo.value) == null || s.focus();
       }
     }}
         @input=${(e) => {
@@ -181,41 +173,41 @@ let l = class extends S {
       this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
         @blur=${(e) => {
-      var i, a;
+      var i, s;
       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 = (i = this.calRef) == null ? void 0 : i.value) == null || a.handleDateSelect(s));
+        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));
       } else this._value[0] && this.clearInputValue();
     }}
         @change=${(e) => {
       e.stopImmediatePropagation();
     }}
-        ${d(this.inputRef)}
+        ${p(this.inputRef)}
       />
       <div class="${f(t)}" id="${this.id}-to-label">
         ${this.strings.generic.to}
       </div>
-      ${this.showRangeLabels ? g : p` <div class="pkt-input-separator">–</div> `}
+      ${this.showRangeLabels ? g : u` <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=${o(this.min)}
-        max=${o(this.max)}
-        placeholder=${o(this.placeholder)}
+        min=${h(this.min)}
+        max=${h(this.max)}
+        placeholder=${h(this.placeholder)}
         ?readonly=${this.readonly}
         ?disabled=${this.disabled}
         @click=${(e) => {
       e.preventDefault(), this.showCalendar();
     }}
         @keydown=${(e) => {
-      var i, a;
+      var i, s;
       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();
+        const a = this.internals.form;
+        a ? a.requestSubmit() : (s = this.inputRefTo.value) == null || s.blur();
       }
     }}
         @input=${(e) => {
@@ -225,39 +217,39 @@ let l = class extends S {
       this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
         @blur=${(e) => {
-      var i, a, s;
+      var i, s, a;
       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(
+        const o = e.target.value;
+        this.min && this.min > o ? this.internals.setValidity(
           { rangeUnderflow: !0 },
           this.strings.forms.messages.rangeUnderflow,
           e.target
-        ) : this.max && this.max < h && this.internals.setValidity(
+        ) : this.max && this.max < o && this.internals.setValidity(
           { rangeOverflow: !0 },
           this.strings.forms.messages.rangeOverflow,
           e.target
         );
-        const u = $(e.target.value);
-        u && this._value[1] !== C(u) && ((s = (a = this.calRef) == null ? void 0 : a.value) == null || s.handleDateSelect(u));
+        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));
       }
     }}
         @change=${(e) => {
       this.touched = !0, e.stopImmediatePropagation();
     }}
-        ${d(this.inputRefTo)}
+        ${p(this.inputRefTo)}
       />
     `;
   }
   renderMultipleInput() {
-    return p`
+    return u`
       <input
         class=${f(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-input"
-        min=${o(this.min)}
-        max=${o(this.max)}
-        placeholder=${o(this.placeholder)}
+        min=${h(this.min)}
+        max=${h(this.max)}
+        placeholder=${h(this.placeholder)}
         ?readonly=${this.readonly}
         ?disabled=${this.disabled || this.maxlength && this._value.length >= this.maxlength}
         @click=${(t) => {
@@ -283,29 +275,29 @@ let l = class extends S {
         @change=${(t) => {
       this.touched = !0, t.stopImmediatePropagation();
     }}
-        ${d(this.inputRef)}
+        ${p(this.inputRef)}
       />
     `;
   }
   renderTags() {
-    return p`
+    return u`
       <div class="pkt-datepicker__tags" aria-live="polite">
-        ${this._value[0] ? T(
+        ${this._value[0] ? S(
       (this._value ?? []).filter(Boolean).sort(),
       (t) => t,
-      (t) => p`
+      (t) => u`
                 <pkt-tag
                   .id="${this.id + t + "-tag"}"
                   closeTag
-                  ariaLabel="${this.strings.calendar.deleteDate} ${b(
+                  ariaLabel="${this.strings.calendar.deleteDate} ${$(
         t,
         this.dateformat
       )}"
                   @close=${() => {
         var e;
-        return (e = this.calRef.value) == null ? void 0 : e.handleDateSelect($(t));
+        return (e = this.calRef.value) == null ? void 0 : e.handleDateSelect(y(t));
       }}
-                  ><time datetime="${t}">${b(t, this.dateformat)}</time></pkt-tag
+                  ><time datetime="${t}">${$(t, this.dateformat)}</time></pkt-tag
                 >
               `
     ) : g}
@@ -313,13 +305,13 @@ let l = class extends S {
     `;
   }
   renderCalendar() {
-    return p`<div
+    return u`<div
       class="pkt-calendar-popup pkt-${this.calendarOpen ? "show" : "hide"}"
       @focusout=${(t) => {
       this.calendarOpen && this.handleFocusOut(t);
     }}
       id="${this.id}-popup"
-      ${d(this.popupRef)}
+      ${p(this.popupRef)}
     >
       <pkt-calendar
         id="${this.id}-calendar"
@@ -333,14 +325,14 @@ let l = class extends S {
         .latest=${this.max}
         .excludedates=${Array.isArray(this.excludedates) ? this.excludedates : this.excludedates.split(",")}
         .excludeweekdays=${this.excludeweekdays}
-        .currentmonth=${this.currentmonth ? _(this.currentmonth) : null}
+        .currentmonth=${this.currentmonth ? C(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();
     }}
-        ${d(this.calRef)}
+        ${p(this.calRef)}
       ></pkt-calendar>
     </div>`;
   }
@@ -358,7 +350,7 @@ let l = class extends S {
       "pkt-btn--icon-only": !0,
       "pkt-btn--tertiary": !0,
       "pkt-datepicker__calendar-button": !0
-    }, p`
+    }, u`
       <pkt-input-wrapper
         label="${this.label}"
         forId="${this.id}-input"
@@ -383,7 +375,7 @@ let l = class extends S {
         .ariaDescribedBy=${this.ariaDescribedBy}
         class="pkt-datepicker"
       >
-        <div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" ${p(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" : ""}"
@@ -398,7 +390,7 @@ let l = class extends S {
       (t.key === "Enter" || t.key === " " || t.key === "Space") && (t.preventDefault(), this.toggleCalendar(t));
     }}
               ?disabled=${this.disabled}
-              ${d(this.btnRef)}
+              ${p(this.btnRef)}
             >
               <pkt-icon name="calendar"></pkt-icon>
               <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
@@ -415,9 +407,9 @@ let l = class extends S {
   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;
+      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;
     }
   }
   handleFocusOut(t) {
@@ -425,7 +417,7 @@ let l = class extends S {
   }
   async showCalendar() {
     var t;
-    this.calendarOpen = !0, await k(20), this.handleCalendarPosition(), this.isMobileSafari && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
+    this.calendarOpen = !0, await b(20), this.handleCalendarPosition(), this.isMobileSafari && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
   }
   hideCalendar() {
     this.calendarOpen = !1;
@@ -474,10 +466,10 @@ n([
   r({ type: Boolean, reflect: !0 })
 ], l.prototype, "withcontrols", 2);
 n([
-  r({ converter: w.csvToArray })
+  r({ converter: x.csvToArray })
 ], l.prototype, "excludedates", 2);
 n([
-  r({ converter: w.csvToArray })
+  r({ converter: x.csvToArray })
 ], l.prototype, "excludeweekdays", 2);
 n([
   r({ type: String })
@@ -489,10 +481,10 @@ n([
   r({ type: String })
 ], l.prototype, "timezone", 2);
 n([
-  x()
+  k()
 ], l.prototype, "inputClasses", 2);
 n([
-  x()
+  k()
 ], l.prototype, "buttonClasses", 2);
 l = n([
   R("pkt-datepicker")

package/dist/index.d.ts

@@ -571,6 +571,7 @@ export declare class PktCombobox extends PktInputElement implements IPktCombobox
     private handleFocusOut;
     private handleBlur;
     private handleInputClick;
+    private handlePlaceholderClick;
     private handleArrowClick;
     private handleOptionToggled;
     private handleSearch;

package/dist/pkt-combobox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-DjO0RMUB.cjs"),o=e.PktCombobox;Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>e.PktCombobox});exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-D84REr9N.cjs"),o=e.PktCombobox;Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>e.PktCombobox});exports.default=o;

package/dist/pkt-combobox.js

@@ -1,4 +1,4 @@
-import { P as o } from "./combobox-yE4aYhTi.js";
+import { P as o } from "./combobox-BXP1PL0M.js";
 const b = o;
 export {
   o as PktCombobox,

package/dist/pkt-datepicker.cjs

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

package/dist/pkt-datepicker.js

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

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"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-DjO0RMUB.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-CmTrG5GE.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`
+"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)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -5,14 +5,14 @@ import { P as T } from "./button-DhispFOY.js";
 import { c as f } from "./calendar-CJSxvwAq.js";
 import { P as D } from "./calendar-CJSxvwAq.js";
 import { P as G } from "./card-BDz4RWxK.js";
-import { P as K } from "./combobox-yE4aYhTi.js";
+import { P as K } from "./combobox-BXP1PL0M.js";
 import { P as U } from "./consent-BpcQFvbi.js";
 import { P as q } from "./checkbox-ym7z6cpt.js";
 import { P as k, t as h, x as P, n, a as c } from "./element-CgEWt74-.js";
 import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
 import { e as m, n as d } from "./ref-BBYSqgeW.js";
 import { e as u } from "./class-map-BpTj9gtz.js";
-import { P as F } from "./datepicker-BJKJBoy_.js";
+import { P as F } from "./datepicker-F3TwE9o7.js";
 import { P as Q } from "./helptext-B7eI0iBQ.js";
 import { P as X } from "./heading-Bdh9absf.js";
 import { P as Z } from "./icon-CC1js8eR.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.5.9",
+  "version": "13.5.11",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -41,7 +41,7 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.25.9",
     "@oslokommune/punkt-assets": "^13.3.1",
-    "@oslokommune/punkt-css": "^13.5.0",
+    "@oslokommune/punkt-css": "^13.5.11",
     "@testing-library/jest-dom": "^6.6.3",
     "@vitest/ui": "^1.0.0",
     "jest-axe": "^9.0.0",
@@ -73,5 +73,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "92ee2058dae920d5ab968d8a1691f435a795e2ca"
+  "gitHead": "09ba8de9047136b06b520d7208b31a1743bcf1d7"
 }

package/src/components/combobox/combobox.ts

@@ -191,7 +191,6 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
       const filteredUserAdded = userAddedValues.filter(
         (userOpt) => !this.options.some((opt) => opt.value === userOpt.value),
       )
-      // Merge, giving precedence to this.options
       this._options = [...filteredUserAdded, ...this.options]
       this._options.forEach((option) => {
         if (option.value && !option.label) {
@@ -287,7 +286,9 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
             ${this.placeholder &&
             (!this._value.length || (this.multiple && this.tagPlacement == 'outside')) &&
             !this._inputFocus
-              ? html`<span class="pkt-combobox__placeholder">${this.placeholder}</span>`
+              ? html`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
+                  >${this.placeholder}</span
+                >`
               : this.tagPlacement !== 'outside'
                 ? this.renderSingleOrMultipleValues()
                 : nothing}
@@ -315,7 +316,12 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
                 name="chevron-thin-down"
               ></pkt-icon>
             </div>
-            <div ${ref(this.focusRef)} tabindex="-1" @keydown=${this.handleArrowClick}></div>
+            <div
+              ${ref(this.focusRef)}
+              tabindex="-1"
+              @keydown=${this.handleArrowClick}
+              class="pkt-contents"
+            ></div>
           </div>
 
           <pkt-listbox
@@ -421,12 +427,18 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
     if (!option) return ''
     switch (this.displayValueAs) {
       case 'prefixAndValue':
-        return html`<span data-focusfix=${this.id}>${option.prefix || ''} ${option.value}</span>`
+        return html`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${option.prefix || ''} ${option.value}</span
+        >`
       case 'value':
-        return html`<span data-focusfix=${this.id}>${option.value}</span>`
+        return html`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${option.value}</span
+        >`
       case 'label':
       default:
-        return html`<span data-focusfix=${this.id}>${option.label || option.value}</span>`
+        return html`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${option.label || option.value}</span
+        >`
     }
   }
 
@@ -499,7 +511,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
     this._isOptionsOpen = true
     this.onFocus()
 
-    this.requestUpdate() // Ensure the UI updates
+    this.requestUpdate()
   }
 
   private handleFocusOut(e: FocusEvent): void {
@@ -559,11 +571,22 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
       this.inputRef.value?.type !== 'hidden'
     ) {
       this.inputRef.value?.focus()
+      this.requestUpdate()
     } else {
       this.handleArrowClick(e)
     }
   }
 
+  private handlePlaceholderClick(e: MouseEvent): void {
+    if (this.disabled) return
+    e.stopPropagation()
+    if (this.inputRef.value && this.inputRef.value.type !== 'hidden') {
+      this.inputRef.value.focus()
+      this._inputFocus = true
+      this.requestUpdate()
+    }
+  }
+
   private handleArrowClick(e: MouseEvent | KeyboardEvent): void {
     if (this.disabled) return
 
@@ -616,7 +639,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
         break
       case 'Escape':
         this._isOptionsOpen = false
-        this.arrowRef.value?.focus() // Return focus to the button
+        this.arrowRef.value?.focus()
         e.preventDefault()
         break
       default: