@oslokommune/punkt-react 16.7.0 → 16.7.1

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.7.1](https://github.com/oslokommune/punkt/compare/16.7.0...16.7.1) (2026-04-13)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* Time picker, fiks kolon og klikk (#3411). 
+
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.7.0](https://github.com/oslokommune/punkt/compare/16.6.2...16.7.0) (2026-04-10)
 
 ### ⚠ BREAKING CHANGES

package/dist/punkt-react.es.js

@@ -10713,7 +10713,13 @@ let Wn = class extends fe {
     var n, e, t, s, i, r, a, o;
     const l = ((n = this.strings.timepicker) == null ? void 0 : n.hours) ?? "Timer", d = ((e = this.strings.timepicker) == null ? void 0 : e.minutes) ?? "Minutter", f = this.label ? `${l}, ${this.label}` : l, m = this.label ? `${d}, ${this.label}` : d;
     return k`
-      <div class="pkt-input__container">
+      <div
+        class="pkt-input__container"
+        @click=${(p) => {
+      var v;
+      p.target.closest("button, input") || (v = this.hoursInputRef.value) == null || v.focus();
+    }}
+      >
         ${this.stepArrows ? k`
               <button
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--prev"
@@ -18571,137 +18577,147 @@ const Xb = Le((n, e) => {
         /* @__PURE__ */ c("div", { className: "pkt-timepicker-popup__col", role: "listbox", "aria-label": a, "aria-orientation": "vertical", children: i.minuteOptions.map((p) => d(p, "minute")) })
       ]
     }
-  ), m = () => /* @__PURE__ */ x("div", { className: "pkt-input__container", children: [
-    i.stepArrows && /* @__PURE__ */ x(
-      "button",
-      {
-        type: "button",
-        className: "pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--prev",
-        "aria-label": i.strings.prevTime,
-        disabled: i.disabled,
-        onClick: () => i.stepTimeDelta(-1),
-        children: [
-          /* @__PURE__ */ c(ie, { name: "chevron-thin-left" }),
-          /* @__PURE__ */ c("span", { className: "pkt-btn__text", children: i.strings.prevTime })
-        ]
-      }
-    ),
-    /* @__PURE__ */ c(
-      "input",
-      {
-        ref: i.hoursInputRef,
-        type: "text",
-        inputMode: "numeric",
-        maxLength: 2,
-        size: 2,
-        className: "pkt-input pkt-timepicker__input",
-        id: i.hoursId,
-        "data-min": "0",
-        "data-max": "23",
-        value: i.hours,
-        placeholder: "––",
-        "aria-label": o,
-        role: "spinbutton",
-        "aria-invalid": i.hasError || i.isInvalid || void 0,
-        "aria-valuemin": 0,
-        "aria-valuemax": 23,
-        "aria-valuenow": i.hours !== "" ? parseInt(i.hours, 10) : void 0,
-        "aria-valuetext": i.hours !== "" ? `${i.hours} ${r.toLowerCase()}` : void 0,
-        autoComplete: "off",
-        disabled: i.disabled,
-        onKeyDown: i.handleHoursKeydown,
-        onBlur: i.handleHoursBlur,
-        onFocus: (p) => {
-          p.currentTarget.select();
-        },
-        onChange: () => {
-        },
-        onPaste: (p) => p.preventDefault()
-      }
-    ),
-    /* @__PURE__ */ c("span", { className: "pkt-timepicker__separator", children: ":" }),
-    /* @__PURE__ */ c(
-      "input",
-      {
-        ref: i.minutesInputRef,
-        type: "text",
-        inputMode: "numeric",
-        maxLength: 2,
-        size: 2,
-        className: "pkt-input pkt-timepicker__input",
-        id: i.minutesId,
-        "data-min": "0",
-        "data-max": "59",
-        value: i.minutes,
-        placeholder: "––",
-        "aria-label": l,
-        role: "spinbutton",
-        "aria-invalid": i.hasError || i.isInvalid || void 0,
-        "aria-valuemin": 0,
-        "aria-valuemax": 59,
-        "aria-valuenow": i.minutes !== "" ? parseInt(i.minutes, 10) : void 0,
-        "aria-valuetext": i.minutes !== "" ? `${i.minutes} ${a.toLowerCase()}` : void 0,
-        autoComplete: "off",
-        disabled: i.disabled,
-        onKeyDown: i.handleMinutesKeydown,
-        onBlur: i.handleMinutesBlur,
-        onFocus: (p) => {
-          p.currentTarget.select();
-        },
-        onChange: () => {
-        },
-        onPaste: (p) => p.preventDefault()
-      }
-    ),
-    i.hidePicker && !i.stepArrows && /* @__PURE__ */ c(ie, { className: "pkt-input-icon pkt-timepicker__icon", name: "clock", "aria-hidden": !0 }),
-    !i.hidePicker && !i.stepArrows && /* @__PURE__ */ x(
-      "button",
-      {
-        ref: i.buttonRef,
-        type: "button",
-        className: "pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button",
-        "aria-label": i.strings.openPicker,
-        "aria-haspopup": "listbox",
-        "aria-expanded": i.isOpen,
-        "aria-controls": i.popupId,
-        disabled: i.disabled,
-        onClick: i.handleClockButtonClick,
-        children: [
-          /* @__PURE__ */ c(ie, { name: "clock" }),
-          /* @__PURE__ */ c("span", { className: "pkt-btn__text", children: i.strings.openPicker })
-        ]
-      }
-    ),
-    i.stepArrows && /* @__PURE__ */ x(
-      "button",
-      {
-        type: "button",
-        className: "pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--next",
-        "aria-label": i.strings.nextTime,
-        disabled: i.disabled,
-        onClick: () => i.stepTimeDelta(1),
-        children: [
-          /* @__PURE__ */ c(ie, { name: "chevron-thin-right" }),
-          /* @__PURE__ */ c("span", { className: "pkt-btn__text", children: i.strings.nextTime })
-        ]
-      }
-    ),
-    /* @__PURE__ */ c(
-      "input",
-      {
-        ref: i.changeInputRef,
-        type: "time",
-        hidden: !0,
-        name: i.name,
-        id: i.hiddenInputId,
-        disabled: i.disabled,
-        tabIndex: -1,
-        "aria-hidden": !0,
-        onChange: t,
-        onInput: s
-      }
-    )
-  ] });
+  ), m = () => /* @__PURE__ */ x(
+    "div",
+    {
+      className: "pkt-input__container",
+      onClick: (p) => {
+        var g;
+        p.target.closest("button, input") || (g = i.hoursInputRef.current) == null || g.focus();
+      },
+      children: [
+        i.stepArrows && /* @__PURE__ */ x(
+          "button",
+          {
+            type: "button",
+            className: "pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--prev",
+            "aria-label": i.strings.prevTime,
+            disabled: i.disabled,
+            onClick: () => i.stepTimeDelta(-1),
+            children: [
+              /* @__PURE__ */ c(ie, { name: "chevron-thin-left" }),
+              /* @__PURE__ */ c("span", { className: "pkt-btn__text", children: i.strings.prevTime })
+            ]
+          }
+        ),
+        /* @__PURE__ */ c(
+          "input",
+          {
+            ref: i.hoursInputRef,
+            type: "text",
+            inputMode: "numeric",
+            maxLength: 2,
+            size: 2,
+            className: "pkt-input pkt-timepicker__input",
+            id: i.hoursId,
+            "data-min": "0",
+            "data-max": "23",
+            value: i.hours,
+            placeholder: "––",
+            "aria-label": o,
+            role: "spinbutton",
+            "aria-invalid": i.hasError || i.isInvalid || void 0,
+            "aria-valuemin": 0,
+            "aria-valuemax": 23,
+            "aria-valuenow": i.hours !== "" ? parseInt(i.hours, 10) : void 0,
+            "aria-valuetext": i.hours !== "" ? `${i.hours} ${r.toLowerCase()}` : void 0,
+            autoComplete: "off",
+            disabled: i.disabled,
+            onKeyDown: i.handleHoursKeydown,
+            onBlur: i.handleHoursBlur,
+            onFocus: (p) => {
+              p.currentTarget.select();
+            },
+            onChange: () => {
+            },
+            onPaste: (p) => p.preventDefault()
+          }
+        ),
+        /* @__PURE__ */ c("span", { className: "pkt-timepicker__separator", children: ":" }),
+        /* @__PURE__ */ c(
+          "input",
+          {
+            ref: i.minutesInputRef,
+            type: "text",
+            inputMode: "numeric",
+            maxLength: 2,
+            size: 2,
+            className: "pkt-input pkt-timepicker__input",
+            id: i.minutesId,
+            "data-min": "0",
+            "data-max": "59",
+            value: i.minutes,
+            placeholder: "––",
+            "aria-label": l,
+            role: "spinbutton",
+            "aria-invalid": i.hasError || i.isInvalid || void 0,
+            "aria-valuemin": 0,
+            "aria-valuemax": 59,
+            "aria-valuenow": i.minutes !== "" ? parseInt(i.minutes, 10) : void 0,
+            "aria-valuetext": i.minutes !== "" ? `${i.minutes} ${a.toLowerCase()}` : void 0,
+            autoComplete: "off",
+            disabled: i.disabled,
+            onKeyDown: i.handleMinutesKeydown,
+            onBlur: i.handleMinutesBlur,
+            onFocus: (p) => {
+              p.currentTarget.select();
+            },
+            onChange: () => {
+            },
+            onPaste: (p) => p.preventDefault()
+          }
+        ),
+        i.hidePicker && !i.stepArrows && /* @__PURE__ */ c(ie, { className: "pkt-input-icon pkt-timepicker__icon", name: "clock", "aria-hidden": !0 }),
+        !i.hidePicker && !i.stepArrows && /* @__PURE__ */ x(
+          "button",
+          {
+            ref: i.buttonRef,
+            type: "button",
+            className: "pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button",
+            "aria-label": i.strings.openPicker,
+            "aria-haspopup": "listbox",
+            "aria-expanded": i.isOpen,
+            "aria-controls": i.popupId,
+            disabled: i.disabled,
+            onClick: i.handleClockButtonClick,
+            children: [
+              /* @__PURE__ */ c(ie, { name: "clock" }),
+              /* @__PURE__ */ c("span", { className: "pkt-btn__text", children: i.strings.openPicker })
+            ]
+          }
+        ),
+        i.stepArrows && /* @__PURE__ */ x(
+          "button",
+          {
+            type: "button",
+            className: "pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--next",
+            "aria-label": i.strings.nextTime,
+            disabled: i.disabled,
+            onClick: () => i.stepTimeDelta(1),
+            children: [
+              /* @__PURE__ */ c(ie, { name: "chevron-thin-right" }),
+              /* @__PURE__ */ c("span", { className: "pkt-btn__text", children: i.strings.nextTime })
+            ]
+          }
+        ),
+        /* @__PURE__ */ c(
+          "input",
+          {
+            ref: i.changeInputRef,
+            type: "time",
+            hidden: !0,
+            name: i.name,
+            id: i.hiddenInputId,
+            disabled: i.disabled,
+            tabIndex: -1,
+            "aria-hidden": !0,
+            onChange: t,
+            onInput: s
+          }
+        )
+      ]
+    }
+  );
   return /* @__PURE__ */ c(
     "div",
     {