@oslokommune/punkt-elements 16.7.0 → 16.7.1

package/CHANGELOG.md

@@ -5,6 +5,23 @@ 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
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.7.0](https://github.com/oslokommune/punkt/compare/16.6.2...16.7.0) (2026-04-10)
 
 ### ⚠ BREAKING CHANGES

package/dist/pkt-timepicker.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./element-gR_VtSiD.cjs"),_=require("./state-Dg-53wQ8.cjs"),u=require("./ref-CL-Xk9Xm.cjs"),c=require("./if-defined-BOW3ODSj.cjs"),$=require("./class-map-CsENJXf1.cjs"),y=require("./input-element-DdVhUvva.cjs"),S=require("./element-with-slot-ZX-up7jO.cjs");require("./icon-Bqj9oBbl.cjs");require("./input-wrapper-B0MkQ0IZ.cjs");const D=o=>/^\d{2}:\d{2}$/.test(o)&&parseInt(o.slice(0,2),10)<=23&&parseInt(o.slice(3),10)<=59,d=o=>{const[t,e]=o.split(":").map(Number);return t*60+e},m=o=>o?Math.max(1,Math.round(o/60)):1,w=(o,t)=>{const e=o?parseInt(String(o).split(":")[0],10):0,s=t?parseInt(String(t).split(":")[0],10):23;return Array.from({length:s-e+1},(i,n)=>n+e)},x=o=>{const t=m(o);return Array.from({length:Math.floor(60/t)},(e,s)=>s*t)},I=(o,t,e,s)=>{let r=o!==""?parseInt(o,10):e===1?0:23,p=t!==""?parseInt(t,10):e===1?0:Math.floor(59/s)*s;return p+=e*s,p>59?(p=0,r=(r+1)%24):p<0&&(p=Math.floor(59/s)*s,r=(r-1+24)%24),{hours:String(r).padStart(2,"0"),minutes:String(p).padStart(2,"0")}};var A=Object.defineProperty,F=Object.getOwnPropertyDescriptor,h=(o,t,e,s)=>{for(var i=s>1?void 0:s?F(t,e):t,n=o.length-1,r;n>=0;n--)(r=o[n])&&(i=(s?r(t,e,i):r(i))||i);return s&&i&&A(t,e,i),i};exports.PktTimepicker=class extends y.PktInputElement{constructor(){super(...arguments),this.hiddenInputRef=u.e(),this.hoursInputRef=u.e(),this.minutesInputRef=u.e(),this.buttonRef=u.e(),this.value="",this.hidePicker=!1,this.stepArrows=!1,this._hours="",this._minutes="",this._isOpen=!1,this._hoursDigitCount=0,this._hoursFirstDigit=-1,this._minutesDigitCount=0,this._minutesFirstDigit=-1,this._hasFocus=!1,this._outsideClickHandler=t=>{this.contains(t.target)||this._closePopup()},this._handleComponentFocusIn=()=>{this._hasFocus||(this._hasFocus=!0,this.onFocus())},this._handleComponentFocusOut=t=>{this.contains(t.relatedTarget)||(this._hasFocus=!1,this.onBlur())},this._handleHoursKeydown=t=>{var s,i,n;const e=t.target;switch(t.key){case"ArrowUp":{t.preventDefault();const r=this._hours!==""?parseInt(this._hours,10):0;this._hours=String((r+1)%24).padStart(2,"0"),this._syncValueFromDisplay(),this.onInput();break}case"ArrowDown":{t.preventDefault();const r=this._hours!==""?parseInt(this._hours,10):0;this._hours=String((r-1+24)%24).padStart(2,"0"),this._syncValueFromDisplay(),this.onInput();break}case"ArrowRight":t.preventDefault(),(s=this.minutesInputRef.value)==null||s.focus();break;case"Backspace":case"Delete":this._hoursDigitCount=0,this._hoursFirstDigit=-1;break;case"Tab":break;case"Enter":{t.preventDefault();const r=this.internals.form;r?r.requestSubmit():e.blur();break}default:if(/^\d$/.test(t.key)){t.preventDefault();const r=parseInt(t.key,10);if(this._hoursDigitCount===0)this._hoursFirstDigit=r,this._hours=String(r).padStart(2,"0"),this._hoursDigitCount=1,this.onInput(),r>=3&&(this._hoursFirstDigit=-1,this._hoursDigitCount=0,this._syncValueFromDisplay(),(i=this.minutesInputRef.value)==null||i.focus());else{const p=this._hoursFirstDigit*10+r;this._hours=p<=23?String(p).padStart(2,"0"):String(r).padStart(2,"0"),this._hoursFirstDigit=-1,this._hoursDigitCount=0,this._syncValueFromDisplay(),this.onInput(),(n=this.minutesInputRef.value)==null||n.focus()}}else t.preventDefault()}},this._handleHoursBlur=()=>{this._hours!==""&&(this._hours=String(parseInt(this._hours,10)).padStart(2,"0")),this._hoursDigitCount=0,this._hoursFirstDigit=-1,this._syncValueFromDisplay()},this._handleMinutesKeydown=t=>{var s;const e=t.target;switch(t.key){case"ArrowUp":{t.preventDefault();const i=this._minutes!==""?parseInt(this._minutes,10):0;this._minutes=String((i+this._minuteStep)%60).padStart(2,"0"),this._syncValueFromDisplay(),this.onInput();break}case"ArrowDown":{t.preventDefault();const i=this._minutes!==""?parseInt(this._minutes,10):0;this._minutes=String((i-this._minuteStep+60)%60).padStart(2,"0"),this._syncValueFromDisplay(),this.onInput();break}case"ArrowLeft":t.preventDefault(),(s=this.hoursInputRef.value)==null||s.focus();break;case"Backspace":case"Delete":this._minutesDigitCount=0,this._minutesFirstDigit=-1;break;case"Tab":break;case"Enter":{t.preventDefault();const i=this.internals.form;i?i.requestSubmit():e.blur();break}default:if(/^\d$/.test(t.key)){t.preventDefault();const i=parseInt(t.key,10);if(this._minutesDigitCount===0)this._minutesFirstDigit=i,this._minutes=String(i).padStart(2,"0"),this._minutesDigitCount=1,this.onInput(),i>=6&&(this._minutesFirstDigit=-1,this._minutesDigitCount=0,this._syncValueFromDisplay());else{const n=this._minutesFirstDigit*10+i;this._minutes=n<=59?String(n).padStart(2,"0"):String(i).padStart(2,"0"),this._minutesFirstDigit=-1,this._minutesDigitCount=0,this._syncValueFromDisplay(),this.onInput()}}else t.preventDefault()}},this._handleMinutesBlur=()=>{this._minutes!==""&&(this._minutes=String(parseInt(this._minutes,10)).padStart(2,"0")),this._minutesDigitCount=0,this._minutesFirstDigit=-1,this._syncValueFromDisplay()},this._handlePopupKeydown=t=>{var p;const e=document.activeElement,s=e.closest(".pkt-timepicker-popup__col");if(!s)return;const i=Array.from(s.querySelectorAll(".pkt-timepicker-popup__option")),n=i.indexOf(e),r=e.dataset.type??"";switch(t.key){case"ArrowDown":t.preventDefault(),this._focusOptionAndSync(i[Math.min(n+1,i.length-1)],r);break;case"ArrowUp":t.preventDefault(),this._focusOptionAndSync(i[Math.max(n-1,0)],r);break;case"Home":t.preventDefault(),this._focusOptionAndSync(i[0],r);break;case"End":t.preventDefault(),this._focusOptionAndSync(i[i.length-1],r);break;case"ArrowRight":t.preventDefault(),r==="hour"&&(this._focusOptionAndSync(e,r),this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst("minute")}));break;case"ArrowLeft":t.preventDefault(),r==="minute"&&(this._focusOptionAndSync(e,r),this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst("hour")}));break;case"Enter":case" ":t.preventDefault(),e.click();break;case"Escape":t.preventDefault(),this._closePopup(),(p=this.buttonRef.value)==null||p.focus();break}}}get inputRef(){return this.hiddenInputRef}manageValidity(t){const e=this.hoursInputRef.value;if(!e)return;if(this.required&&!this.value){this.internals.setValidity({valueMissing:!0},a.strings.forms.messages.required,e),this._setAriaInvalid(!0);return}if(!this.value){this.internals.setValidity({}),this._setAriaInvalid(!1);return}const s=d(this.value),i=m(this.step);if(this.min&&s<d(String(this.min))){this.internals.setValidity({rangeUnderflow:!0},a.strings.forms.messages.rangeUnderflowMin.replace("{min}",String(this.min)),e),this._setAriaInvalid(!0);return}if(this.max&&s>d(String(this.max))){this.internals.setValidity({rangeOverflow:!0},a.strings.forms.messages.rangeOverflowMax.replace("{max}",String(this.max)),e),this._setAriaInvalid(!0);return}if(this.step&&s%i!==0){const n=i===60?a.strings.forms.messages.timeStepMismatchHour:i===30?a.strings.forms.messages.timeStepMismatchHalfHour:a.strings.forms.messages.timeStepMismatch.replace("{step}",`${i}, ${i*2}, ${i*3}`);this.internals.setValidity({stepMismatch:!0},n,e),this._setAriaInvalid(!0);return}this.internals.setValidity({}),this._setAriaInvalid(!1)}_setAriaInvalid(t){if(!this.touched&&t)return;const e=this.hoursInputRef.value,s=this.minutesInputRef.value;t?(e==null||e.setAttribute("aria-invalid","true"),s==null||s.setAttribute("aria-invalid","true")):(e==null||e.removeAttribute("aria-invalid"),s==null||s.removeAttribute("aria-invalid"))}connectedCallback(){super.connectedCallback(),this.addEventListener("focusin",this._handleComponentFocusIn),this.addEventListener("focusout",this._handleComponentFocusOut),document.addEventListener("click",this._outsideClickHandler)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this._handleComponentFocusIn),this.removeEventListener("focusout",this._handleComponentFocusOut),document.removeEventListener("click",this._outsideClickHandler)}willUpdate(t){super.willUpdate(t),t.has("value")&&this._syncDisplayFromValue()}updated(t){super.updated(t),this.classList.toggle("pkt-timepicker--stepper",this.stepArrows),this.classList.toggle("pkt-timepicker--fullwidth",this.fullwidth),t.has("step")&&this.step!==null&&!this._isValidStep(this.step)&&console.warn(`pkt-timepicker: step="${this.step}" er ikke en gyldig verdi. Step må være et multiplum av 60 (hele minutter) eller nøyaktig 3600 (hel time).`)}formResetCallback(){super.formResetCallback(),this._hours="",this._minutes="",this._isOpen=!1}_isValidStep(t){return t===3600||t<3600&&3600%t===0&&t%60===0}_syncDisplayFromValue(){const t=D(this.value)?this.value.split(":"):null;t?(this._hours=t[0],this._minutes=t[1]):(this._hours="",this._minutes="")}_syncValueFromDisplay(){if(this._hours!==""&&this._minutes!==""){const t=`${this._hours}:${this._minutes}`;t!==this.value&&(this.value=t,this.onChange(t))}else this.value!==""&&(this.value="",this.onChange(""))}get _minuteStep(){return m(this.step)}get _hourOptions(){return w(this.min,this.max)}get _minuteOptions(){return x(this.step)}_openPopup(){this._isOpen=!0,this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst("hour")})}_closePopup(){this._isOpen=!1,this._syncValueFromDisplay()}_togglePopup(){this._isOpen?this._closePopup():this._openPopup()}_scrollToSelected(){const t=this.querySelector(".pkt-timepicker-popup");t&&t.querySelectorAll(".pkt-timepicker-popup__col").forEach(e=>{const s=e.querySelector(".pkt-timepicker-popup__option--selected");s&&s.scrollIntoView({block:"center"})})}_focusSelectedOrFirst(t){var p;const e=this.querySelector(".pkt-timepicker-popup");if(!e)return;const s=e.querySelectorAll(".pkt-timepicker-popup__col"),i=t==="hour"?s[0]:s[1];if(!i)return;const n=i.querySelector(".pkt-timepicker-popup__option--selected"),r=i.querySelector(".pkt-timepicker-popup__option");(p=n||r)==null||p.focus()}_handleOptionClick(t,e){var i;const s=String(t).padStart(2,"0");e==="hour"?(this._hours=s,this.updateComplete.then(()=>this._focusSelectedOrFirst("minute"))):(this._minutes=s,this._closePopup(),(i=this.buttonRef.value)==null||i.focus())}_focusOptionAndSync(t,e){if(!t)return;const s=parseInt(t.dataset.value??"0",10);e==="hour"?this._hours=String(s).padStart(2,"0"):this._minutes=String(s).padStart(2,"0"),t.focus()}_stepTime(t){const e=I(this._hours,this._minutes,t,this._minuteStep);this._hours=e.hours,this._minutes=e.minutes,this._syncValueFromDisplay()}_renderOption(t,e){const s=String(t).padStart(2,"0"),i=e==="hour"?this._hours!==""?parseInt(this._hours,10):NaN:this._minutes!==""?parseInt(this._minutes,10):NaN,n=t===i;return a.b`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./element-gR_VtSiD.cjs"),_=require("./state-Dg-53wQ8.cjs"),p=require("./ref-CL-Xk9Xm.cjs"),c=require("./if-defined-BOW3ODSj.cjs"),y=require("./class-map-CsENJXf1.cjs"),S=require("./input-element-DdVhUvva.cjs"),D=require("./element-with-slot-ZX-up7jO.cjs");require("./icon-Bqj9oBbl.cjs");require("./input-wrapper-B0MkQ0IZ.cjs");const w=o=>/^\d{2}:\d{2}$/.test(o)&&parseInt(o.slice(0,2),10)<=23&&parseInt(o.slice(3),10)<=59,d=o=>{const[t,e]=o.split(":").map(Number);return t*60+e},m=o=>o?Math.max(1,Math.round(o/60)):1,x=(o,t)=>{const e=o?parseInt(String(o).split(":")[0],10):0,s=t?parseInt(String(t).split(":")[0],10):23;return Array.from({length:s-e+1},(i,n)=>n+e)},I=o=>{const t=m(o);return Array.from({length:Math.floor(60/t)},(e,s)=>s*t)},A=(o,t,e,s)=>{let r=o!==""?parseInt(o,10):e===1?0:23,u=t!==""?parseInt(t,10):e===1?0:Math.floor(59/s)*s;return u+=e*s,u>59?(u=0,r=(r+1)%24):u<0&&(u=Math.floor(59/s)*s,r=(r-1+24)%24),{hours:String(r).padStart(2,"0"),minutes:String(u).padStart(2,"0")}};var F=Object.defineProperty,C=Object.getOwnPropertyDescriptor,l=(o,t,e,s)=>{for(var i=s>1?void 0:s?C(t,e):t,n=o.length-1,r;n>=0;n--)(r=o[n])&&(i=(s?r(t,e,i):r(i))||i);return s&&i&&F(t,e,i),i};exports.PktTimepicker=class extends S.PktInputElement{constructor(){super(...arguments),this.hiddenInputRef=p.e(),this.hoursInputRef=p.e(),this.minutesInputRef=p.e(),this.buttonRef=p.e(),this.value="",this.hidePicker=!1,this.stepArrows=!1,this._hours="",this._minutes="",this._isOpen=!1,this._hoursDigitCount=0,this._hoursFirstDigit=-1,this._minutesDigitCount=0,this._minutesFirstDigit=-1,this._hasFocus=!1,this._outsideClickHandler=t=>{this.contains(t.target)||this._closePopup()},this._handleComponentFocusIn=()=>{this._hasFocus||(this._hasFocus=!0,this.onFocus())},this._handleComponentFocusOut=t=>{this.contains(t.relatedTarget)||(this._hasFocus=!1,this.onBlur())},this._handleHoursKeydown=t=>{var s,i,n;const e=t.target;switch(t.key){case"ArrowUp":{t.preventDefault();const r=this._hours!==""?parseInt(this._hours,10):0;this._hours=String((r+1)%24).padStart(2,"0"),this._syncValueFromDisplay(),this.onInput();break}case"ArrowDown":{t.preventDefault();const r=this._hours!==""?parseInt(this._hours,10):0;this._hours=String((r-1+24)%24).padStart(2,"0"),this._syncValueFromDisplay(),this.onInput();break}case"ArrowRight":t.preventDefault(),(s=this.minutesInputRef.value)==null||s.focus();break;case"Backspace":case"Delete":this._hoursDigitCount=0,this._hoursFirstDigit=-1;break;case"Tab":break;case"Enter":{t.preventDefault();const r=this.internals.form;r?r.requestSubmit():e.blur();break}default:if(/^\d$/.test(t.key)){t.preventDefault();const r=parseInt(t.key,10);if(this._hoursDigitCount===0)this._hoursFirstDigit=r,this._hours=String(r).padStart(2,"0"),this._hoursDigitCount=1,this.onInput(),r>=3&&(this._hoursFirstDigit=-1,this._hoursDigitCount=0,this._syncValueFromDisplay(),(i=this.minutesInputRef.value)==null||i.focus());else{const u=this._hoursFirstDigit*10+r;this._hours=u<=23?String(u).padStart(2,"0"):String(r).padStart(2,"0"),this._hoursFirstDigit=-1,this._hoursDigitCount=0,this._syncValueFromDisplay(),this.onInput(),(n=this.minutesInputRef.value)==null||n.focus()}}else t.preventDefault()}},this._handleHoursBlur=()=>{this._hours!==""&&(this._hours=String(parseInt(this._hours,10)).padStart(2,"0")),this._hoursDigitCount=0,this._hoursFirstDigit=-1,this._syncValueFromDisplay()},this._handleMinutesKeydown=t=>{var s;const e=t.target;switch(t.key){case"ArrowUp":{t.preventDefault();const i=this._minutes!==""?parseInt(this._minutes,10):0;this._minutes=String((i+this._minuteStep)%60).padStart(2,"0"),this._syncValueFromDisplay(),this.onInput();break}case"ArrowDown":{t.preventDefault();const i=this._minutes!==""?parseInt(this._minutes,10):0;this._minutes=String((i-this._minuteStep+60)%60).padStart(2,"0"),this._syncValueFromDisplay(),this.onInput();break}case"ArrowLeft":t.preventDefault(),(s=this.hoursInputRef.value)==null||s.focus();break;case"Backspace":case"Delete":this._minutesDigitCount=0,this._minutesFirstDigit=-1;break;case"Tab":break;case"Enter":{t.preventDefault();const i=this.internals.form;i?i.requestSubmit():e.blur();break}default:if(/^\d$/.test(t.key)){t.preventDefault();const i=parseInt(t.key,10);if(this._minutesDigitCount===0)this._minutesFirstDigit=i,this._minutes=String(i).padStart(2,"0"),this._minutesDigitCount=1,this.onInput(),i>=6&&(this._minutesFirstDigit=-1,this._minutesDigitCount=0,this._syncValueFromDisplay());else{const n=this._minutesFirstDigit*10+i;this._minutes=n<=59?String(n).padStart(2,"0"):String(i).padStart(2,"0"),this._minutesFirstDigit=-1,this._minutesDigitCount=0,this._syncValueFromDisplay(),this.onInput()}}else t.preventDefault()}},this._handleMinutesBlur=()=>{this._minutes!==""&&(this._minutes=String(parseInt(this._minutes,10)).padStart(2,"0")),this._minutesDigitCount=0,this._minutesFirstDigit=-1,this._syncValueFromDisplay()},this._handlePopupKeydown=t=>{var u;const e=document.activeElement,s=e.closest(".pkt-timepicker-popup__col");if(!s)return;const i=Array.from(s.querySelectorAll(".pkt-timepicker-popup__option")),n=i.indexOf(e),r=e.dataset.type??"";switch(t.key){case"ArrowDown":t.preventDefault(),this._focusOptionAndSync(i[Math.min(n+1,i.length-1)],r);break;case"ArrowUp":t.preventDefault(),this._focusOptionAndSync(i[Math.max(n-1,0)],r);break;case"Home":t.preventDefault(),this._focusOptionAndSync(i[0],r);break;case"End":t.preventDefault(),this._focusOptionAndSync(i[i.length-1],r);break;case"ArrowRight":t.preventDefault(),r==="hour"&&(this._focusOptionAndSync(e,r),this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst("minute")}));break;case"ArrowLeft":t.preventDefault(),r==="minute"&&(this._focusOptionAndSync(e,r),this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst("hour")}));break;case"Enter":case" ":t.preventDefault(),e.click();break;case"Escape":t.preventDefault(),this._closePopup(),(u=this.buttonRef.value)==null||u.focus();break}}}get inputRef(){return this.hiddenInputRef}manageValidity(t){const e=this.hoursInputRef.value;if(!e)return;if(this.required&&!this.value){this.internals.setValidity({valueMissing:!0},a.strings.forms.messages.required,e),this._setAriaInvalid(!0);return}if(!this.value){this.internals.setValidity({}),this._setAriaInvalid(!1);return}const s=d(this.value),i=m(this.step);if(this.min&&s<d(String(this.min))){this.internals.setValidity({rangeUnderflow:!0},a.strings.forms.messages.rangeUnderflowMin.replace("{min}",String(this.min)),e),this._setAriaInvalid(!0);return}if(this.max&&s>d(String(this.max))){this.internals.setValidity({rangeOverflow:!0},a.strings.forms.messages.rangeOverflowMax.replace("{max}",String(this.max)),e),this._setAriaInvalid(!0);return}if(this.step&&s%i!==0){const n=i===60?a.strings.forms.messages.timeStepMismatchHour:i===30?a.strings.forms.messages.timeStepMismatchHalfHour:a.strings.forms.messages.timeStepMismatch.replace("{step}",`${i}, ${i*2}, ${i*3}`);this.internals.setValidity({stepMismatch:!0},n,e),this._setAriaInvalid(!0);return}this.internals.setValidity({}),this._setAriaInvalid(!1)}_setAriaInvalid(t){if(!this.touched&&t)return;const e=this.hoursInputRef.value,s=this.minutesInputRef.value;t?(e==null||e.setAttribute("aria-invalid","true"),s==null||s.setAttribute("aria-invalid","true")):(e==null||e.removeAttribute("aria-invalid"),s==null||s.removeAttribute("aria-invalid"))}connectedCallback(){super.connectedCallback(),this.addEventListener("focusin",this._handleComponentFocusIn),this.addEventListener("focusout",this._handleComponentFocusOut),document.addEventListener("click",this._outsideClickHandler)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this._handleComponentFocusIn),this.removeEventListener("focusout",this._handleComponentFocusOut),document.removeEventListener("click",this._outsideClickHandler)}willUpdate(t){super.willUpdate(t),t.has("value")&&this._syncDisplayFromValue()}updated(t){super.updated(t),this.classList.toggle("pkt-timepicker--stepper",this.stepArrows),this.classList.toggle("pkt-timepicker--fullwidth",this.fullwidth),t.has("step")&&this.step!==null&&!this._isValidStep(this.step)&&console.warn(`pkt-timepicker: step="${this.step}" er ikke en gyldig verdi. Step må være et multiplum av 60 (hele minutter) eller nøyaktig 3600 (hel time).`)}formResetCallback(){super.formResetCallback(),this._hours="",this._minutes="",this._isOpen=!1}_isValidStep(t){return t===3600||t<3600&&3600%t===0&&t%60===0}_syncDisplayFromValue(){const t=w(this.value)?this.value.split(":"):null;t?(this._hours=t[0],this._minutes=t[1]):(this._hours="",this._minutes="")}_syncValueFromDisplay(){if(this._hours!==""&&this._minutes!==""){const t=`${this._hours}:${this._minutes}`;t!==this.value&&(this.value=t,this.onChange(t))}else this.value!==""&&(this.value="",this.onChange(""))}get _minuteStep(){return m(this.step)}get _hourOptions(){return x(this.min,this.max)}get _minuteOptions(){return I(this.step)}_openPopup(){this._isOpen=!0,this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst("hour")})}_closePopup(){this._isOpen=!1,this._syncValueFromDisplay()}_togglePopup(){this._isOpen?this._closePopup():this._openPopup()}_scrollToSelected(){const t=this.querySelector(".pkt-timepicker-popup");t&&t.querySelectorAll(".pkt-timepicker-popup__col").forEach(e=>{const s=e.querySelector(".pkt-timepicker-popup__option--selected");s&&s.scrollIntoView({block:"center"})})}_focusSelectedOrFirst(t){var u;const e=this.querySelector(".pkt-timepicker-popup");if(!e)return;const s=e.querySelectorAll(".pkt-timepicker-popup__col"),i=t==="hour"?s[0]:s[1];if(!i)return;const n=i.querySelector(".pkt-timepicker-popup__option--selected"),r=i.querySelector(".pkt-timepicker-popup__option");(u=n||r)==null||u.focus()}_handleOptionClick(t,e){var i;const s=String(t).padStart(2,"0");e==="hour"?(this._hours=s,this.updateComplete.then(()=>this._focusSelectedOrFirst("minute"))):(this._minutes=s,this._closePopup(),(i=this.buttonRef.value)==null||i.focus())}_focusOptionAndSync(t,e){if(!t)return;const s=parseInt(t.dataset.value??"0",10);e==="hour"?this._hours=String(s).padStart(2,"0"):this._minutes=String(s).padStart(2,"0"),t.focus()}_stepTime(t){const e=A(this._hours,this._minutes,t,this._minuteStep);this._hours=e.hours,this._minutes=e.minutes,this._syncValueFromDisplay()}_renderOption(t,e){const s=String(t).padStart(2,"0"),i=e==="hour"?this._hours!==""?parseInt(this._hours,10):NaN:this._minutes!==""?parseInt(this._minutes,10):NaN,n=t===i;return a.b`
       <button
-        class=${$.e({"pkt-btn":!0,"pkt-btn--tertiary":!0,"pkt-btn--small":!0,"pkt-btn--label-only":!0,"pkt-timepicker-popup__option":!0,"pkt-timepicker-popup__option--selected":n})}
+        class=${y.e({"pkt-btn":!0,"pkt-btn--tertiary":!0,"pkt-btn--small":!0,"pkt-btn--label-only":!0,"pkt-timepicker-popup__option":!0,"pkt-timepicker-popup__option--selected":n})}
         type="button"
         role="option"
         aria-selected=${n?"true":"false"}
@@ -38,13 +38,16 @@
           ${this._minuteOptions.map(i=>this._renderOption(i,"minute"))}
         </div>
       </div>
-    `}_renderContainer(){var n,r,p,k,f,g,b,v;const t=((n=this.strings.timepicker)==null?void 0:n.hours)??"Timer",e=((r=this.strings.timepicker)==null?void 0:r.minutes)??"Minutter",s=this.label?`${t}, ${this.label}`:t,i=this.label?`${e}, ${this.label}`:e;return a.b`
-      <div class="pkt-input__container">
+    `}_renderContainer(){var n,r,u,k,f,g,b,v;const t=((n=this.strings.timepicker)==null?void 0:n.hours)??"Timer",e=((r=this.strings.timepicker)==null?void 0:r.minutes)??"Minutter",s=this.label?`${t}, ${this.label}`:t,i=this.label?`${e}, ${this.label}`:e;return a.b`
+      <div
+        class="pkt-input__container"
+        @click=${h=>{var $;h.target.closest("button, input")||($=this.hoursInputRef.value)==null||$.focus()}}
+      >
         ${this.stepArrows?a.b`
               <button
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--prev"
                 type="button"
-                aria-label=${((p=this.strings.timepicker)==null?void 0:p.prevTime)??"Forrige tidspunkt"}
+                aria-label=${((u=this.strings.timepicker)==null?void 0:u.prevTime)??"Forrige tidspunkt"}
                 ?disabled=${this.disabled}
                 @click=${()=>this._stepTime(-1)}
               >
@@ -55,7 +58,7 @@
               </button>
             `:a.A}
         <input
-          ${u.n(this.hoursInputRef)}
+          ${p.n(this.hoursInputRef)}
           type="text"
           inputmode="numeric"
           maxlength="2"
@@ -77,11 +80,11 @@
           ?disabled=${this.disabled}
           @keydown=${this._handleHoursKeydown}
           @blur=${this._handleHoursBlur}
-          @focus=${l=>{l.target.select(),l.stopImmediatePropagation()}}
+          @focus=${h=>{h.target.select(),h.stopImmediatePropagation()}}
         />
         <span class="pkt-timepicker__separator">:</span>
         <input
-          ${u.n(this.minutesInputRef)}
+          ${p.n(this.minutesInputRef)}
           type="text"
           inputmode="numeric"
           maxlength="2"
@@ -103,7 +106,7 @@
           ?disabled=${this.disabled}
           @keydown=${this._handleMinutesKeydown}
           @blur=${this._handleMinutesBlur}
-          @focus=${l=>{l.target.select(),l.stopImmediatePropagation()}}
+          @focus=${h=>{h.target.select(),h.stopImmediatePropagation()}}
         />
         ${this.hidePicker&&!this.stepArrows?a.b`<pkt-icon
               class="pkt-input-icon pkt-timepicker__icon"
@@ -112,7 +115,7 @@
             ></pkt-icon>`:a.A}
         ${!this.hidePicker&&!this.stepArrows?a.b`
               <button
-                ${u.n(this.buttonRef)}
+                ${p.n(this.buttonRef)}
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button"
                 type="button"
                 aria-label=${((f=this.strings.timepicker)==null?void 0:f.openPicker)??"Åpne tidspunkt-velger"}
@@ -143,7 +146,7 @@
               </button>
             `:a.A}
         <input
-          ${u.n(this.hiddenInputRef)}
+          ${p.n(this.hiddenInputRef)}
           type="time"
           hidden
           name=${this.name||this.id}
@@ -178,11 +181,11 @@
         .requiredText=${this.requiredText}
         .tagText=${this.tagText}
       >
-        <div class="pkt-contents" slot="helptext">${S.slotContent(this,"helptext")}</div>
+        <div class="pkt-contents" slot="helptext">${D.slotContent(this,"helptext")}</div>
         ${!this.hidePicker&&!this.stepArrows?a.b`
               <div class="pkt-timepicker__anchor">
                 ${this._renderContainer()} ${this._renderPopup()}
               </div>
             `:this._renderContainer()}
       </pkt-input-wrapper>
-    `}};h([a.n({type:String,reflect:!0})],exports.PktTimepicker.prototype,"value",2);h([a.n({type:Boolean,reflect:!0,attribute:"hide-picker"})],exports.PktTimepicker.prototype,"hidePicker",2);h([a.n({type:Boolean,reflect:!0,attribute:"step-arrows"})],exports.PktTimepicker.prototype,"stepArrows",2);h([_.r()],exports.PktTimepicker.prototype,"_hours",2);h([_.r()],exports.PktTimepicker.prototype,"_minutes",2);h([_.r()],exports.PktTimepicker.prototype,"_isOpen",2);exports.PktTimepicker=h([a.t("pkt-timepicker")],exports.PktTimepicker);
+    `}};l([a.n({type:String,reflect:!0})],exports.PktTimepicker.prototype,"value",2);l([a.n({type:Boolean,reflect:!0,attribute:"hide-picker"})],exports.PktTimepicker.prototype,"hidePicker",2);l([a.n({type:Boolean,reflect:!0,attribute:"step-arrows"})],exports.PktTimepicker.prototype,"stepArrows",2);l([_.r()],exports.PktTimepicker.prototype,"_hours",2);l([_.r()],exports.PktTimepicker.prototype,"_minutes",2);l([_.r()],exports.PktTimepicker.prototype,"_isOpen",2);exports.PktTimepicker=l([a.t("pkt-timepicker")],exports.PktTimepicker);

package/dist/pkt-timepicker.js

@@ -1,34 +1,34 @@
-import { s as c, b as u, A as o, n as b, t as w } from "./element-CPpT3rFQ.js";
+import { s as d, b as u, A as o, n as b, t as x } from "./element-CPpT3rFQ.js";
 import { r as v } from "./state-C_1EOo3D.js";
 import { e as m, n as _ } from "./ref-Bg_Swj5w.js";
-import { o as k } from "./if-defined-B0krMLad.js";
-import { e as x } from "./class-map-CEnykyO_.js";
-import { P as I } from "./input-element-8nLwuQS4.js";
-import { s as F } from "./element-with-slot-Dqk6-TRR.js";
+import { o as f } from "./if-defined-B0krMLad.js";
+import { e as I } from "./class-map-CEnykyO_.js";
+import { P as F } from "./input-element-8nLwuQS4.js";
+import { s as A } from "./element-with-slot-Dqk6-TRR.js";
 import "./icon-BlKA8YuW.js";
 import "./input-wrapper-B2JpK016.js";
-const A = (t) => /^\d{2}:\d{2}$/.test(t) && parseInt(t.slice(0, 2), 10) <= 23 && parseInt(t.slice(3), 10) <= 59, f = (t) => {
+const C = (t) => /^\d{2}:\d{2}$/.test(t) && parseInt(t.slice(0, 2), 10) <= 23 && parseInt(t.slice(3), 10) <= 59, k = (t) => {
   const [e, s] = t.split(":").map(Number);
   return e * 60 + s;
-}, g = (t) => t ? Math.max(1, Math.round(t / 60)) : 1, C = (t, e) => {
+}, g = (t) => t ? Math.max(1, Math.round(t / 60)) : 1, O = (t, e) => {
   const s = t ? parseInt(String(t).split(":")[0], 10) : 0, i = e ? parseInt(String(e).split(":")[0], 10) : 23;
   return Array.from({ length: i - s + 1 }, (n, r) => r + s);
-}, O = (t) => {
+}, T = (t) => {
   const e = g(t);
   return Array.from({ length: Math.floor(60 / e) }, (s, i) => i * e);
-}, T = (t, e, s, i) => {
+}, M = (t, e, s, i) => {
   let a = t !== "" ? parseInt(t, 10) : s === 1 ? 0 : 23, p = e !== "" ? parseInt(e, 10) : s === 1 ? 0 : Math.floor(59 / i) * i;
   return p += s * i, p > 59 ? (p = 0, a = (a + 1) % 24) : p < 0 && (p = Math.floor(59 / i) * i, a = (a - 1 + 24) % 24), {
     hours: String(a).padStart(2, "0"),
     minutes: String(p).padStart(2, "0")
   };
 };
-var M = Object.defineProperty, V = Object.getOwnPropertyDescriptor, l = (t, e, s, i) => {
-  for (var n = i > 1 ? void 0 : i ? V(e, s) : e, r = t.length - 1, a; r >= 0; r--)
+var V = Object.defineProperty, P = Object.getOwnPropertyDescriptor, c = (t, e, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? P(e, s) : e, r = t.length - 1, a; r >= 0; r--)
     (a = t[r]) && (n = (i ? a(e, s, n) : a(n)) || n);
-  return i && n && M(e, s, n), n;
+  return i && n && V(e, s, n), n;
 };
-let h = class extends I {
+let h = class extends F {
   constructor() {
     super(...arguments), this.hiddenInputRef = m(), this.hoursInputRef = m(), this.minutesInputRef = m(), this.buttonRef = m(), this.value = "", this.hidePicker = !1, this.stepArrows = !1, this._hours = "", this._minutes = "", this._isOpen = !1, this._hoursDigitCount = 0, this._hoursFirstDigit = -1, this._minutesDigitCount = 0, this._minutesFirstDigit = -1, this._hasFocus = !1, this._outsideClickHandler = (t) => {
       this.contains(t.target) || this._closePopup();
@@ -185,32 +185,32 @@ let h = class extends I {
     const e = this.hoursInputRef.value;
     if (!e) return;
     if (this.required && !this.value) {
-      this.internals.setValidity({ valueMissing: !0 }, c.forms.messages.required, e), this._setAriaInvalid(!0);
+      this.internals.setValidity({ valueMissing: !0 }, d.forms.messages.required, e), this._setAriaInvalid(!0);
       return;
     }
     if (!this.value) {
       this.internals.setValidity({}), this._setAriaInvalid(!1);
       return;
     }
-    const s = f(this.value), i = g(this.step);
-    if (this.min && s < f(String(this.min))) {
+    const s = k(this.value), i = g(this.step);
+    if (this.min && s < k(String(this.min))) {
       this.internals.setValidity(
         { rangeUnderflow: !0 },
-        c.forms.messages.rangeUnderflowMin.replace("{min}", String(this.min)),
+        d.forms.messages.rangeUnderflowMin.replace("{min}", String(this.min)),
         e
       ), this._setAriaInvalid(!0);
       return;
     }
-    if (this.max && s > f(String(this.max))) {
+    if (this.max && s > k(String(this.max))) {
       this.internals.setValidity(
         { rangeOverflow: !0 },
-        c.forms.messages.rangeOverflowMax.replace("{max}", String(this.max)),
+        d.forms.messages.rangeOverflowMax.replace("{max}", String(this.max)),
         e
       ), this._setAriaInvalid(!0);
       return;
     }
     if (this.step && s % i !== 0) {
-      const n = i === 60 ? c.forms.messages.timeStepMismatchHour : i === 30 ? c.forms.messages.timeStepMismatchHalfHour : c.forms.messages.timeStepMismatch.replace(
+      const n = i === 60 ? d.forms.messages.timeStepMismatchHour : i === 30 ? d.forms.messages.timeStepMismatchHalfHour : d.forms.messages.timeStepMismatch.replace(
         "{step}",
         `${i}, ${i * 2}, ${i * 3}`
       );
@@ -245,7 +245,7 @@ let h = class extends I {
     return t === 3600 || t < 3600 && 3600 % t === 0 && t % 60 === 0;
   }
   _syncDisplayFromValue() {
-    const t = A(this.value) ? this.value.split(":") : null;
+    const t = C(this.value) ? this.value.split(":") : null;
     t ? (this._hours = t[0], this._minutes = t[1]) : (this._hours = "", this._minutes = "");
   }
   _syncValueFromDisplay() {
@@ -258,10 +258,10 @@ let h = class extends I {
     return g(this.step);
   }
   get _hourOptions() {
-    return C(this.min, this.max);
+    return O(this.min, this.max);
   }
   get _minuteOptions() {
-    return O(this.step);
+    return T(this.step);
   }
   _openPopup() {
     this._isOpen = !0, this.updateComplete.then(() => {
@@ -303,14 +303,14 @@ let h = class extends I {
     e === "hour" ? this._hours = String(s).padStart(2, "0") : this._minutes = String(s).padStart(2, "0"), t.focus();
   }
   _stepTime(t) {
-    const e = T(this._hours, this._minutes, t, this._minuteStep);
+    const e = M(this._hours, this._minutes, t, this._minuteStep);
     this._hours = e.hours, this._minutes = e.minutes, this._syncValueFromDisplay();
   }
   _renderOption(t, e) {
     const s = String(t).padStart(2, "0"), i = e === "hour" ? this._hours !== "" ? parseInt(this._hours, 10) : NaN : this._minutes !== "" ? parseInt(this._minutes, 10) : NaN, n = t === i;
     return u`
       <button
-        class=${x({
+        class=${I({
       "pkt-btn": !0,
       "pkt-btn--tertiary": !0,
       "pkt-btn--small": !0,
@@ -370,7 +370,13 @@ let h = class extends I {
     var n, r, a, p, $, y, S, D;
     const t = ((n = this.strings.timepicker) == null ? void 0 : n.hours) ?? "Timer", e = ((r = this.strings.timepicker) == null ? void 0 : r.minutes) ?? "Minutter", s = this.label ? `${t}, ${this.label}` : t, i = this.label ? `${e}, ${this.label}` : e;
     return u`
-      <div class="pkt-input__container">
+      <div
+        class="pkt-input__container"
+        @click=${(l) => {
+      var w;
+      l.target.closest("button, input") || (w = this.hoursInputRef.value) == null || w.focus();
+    }}
+      >
         ${this.stepArrows ? u`
               <button
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--prev"
@@ -408,8 +414,8 @@ let h = class extends I {
           ?disabled=${this.disabled}
           @keydown=${this._handleHoursKeydown}
           @blur=${this._handleHoursBlur}
-          @focus=${(d) => {
-      d.target.select(), d.stopImmediatePropagation();
+          @focus=${(l) => {
+      l.target.select(), l.stopImmediatePropagation();
     }}
         />
         <span class="pkt-timepicker__separator">:</span>
@@ -436,8 +442,8 @@ let h = class extends I {
           ?disabled=${this.disabled}
           @keydown=${this._handleMinutesKeydown}
           @blur=${this._handleMinutesBlur}
-          @focus=${(d) => {
-      d.target.select(), d.stopImmediatePropagation();
+          @focus=${(l) => {
+      l.target.select(), l.stopImmediatePropagation();
     }}
         />
         ${this.hidePicker && !this.stepArrows ? u`<pkt-icon
@@ -484,9 +490,9 @@ let h = class extends I {
           name=${this.name || this.id}
           id=${this.id + "-input"}
           .value=${this.value}
-          min=${k(this.min ?? void 0)}
-          max=${k(this.max ?? void 0)}
-          step=${k(this.step ?? void 0)}
+          min=${f(this.min ?? void 0)}
+          max=${f(this.max ?? void 0)}
+          step=${f(this.step ?? void 0)}
           ?required=${this.required}
           ?disabled=${this.disabled}
           tabindex="-1"
@@ -516,7 +522,7 @@ let h = class extends I {
         .requiredText=${this.requiredText}
         .tagText=${this.tagText}
       >
-        <div class="pkt-contents" slot="helptext">${F(this, "helptext")}</div>
+        <div class="pkt-contents" slot="helptext">${A(this, "helptext")}</div>
         ${!this.hidePicker && !this.stepArrows ? u`
               <div class="pkt-timepicker__anchor">
                 ${this._renderContainer()} ${this._renderPopup()}
@@ -526,26 +532,26 @@ let h = class extends I {
     `;
   }
 };
-l([
+c([
   b({ type: String, reflect: !0 })
 ], h.prototype, "value", 2);
-l([
+c([
   b({ type: Boolean, reflect: !0, attribute: "hide-picker" })
 ], h.prototype, "hidePicker", 2);
-l([
+c([
   b({ type: Boolean, reflect: !0, attribute: "step-arrows" })
 ], h.prototype, "stepArrows", 2);
-l([
+c([
   v()
 ], h.prototype, "_hours", 2);
-l([
+c([
   v()
 ], h.prototype, "_minutes", 2);
-l([
+c([
   v()
 ], h.prototype, "_isOpen", 2);
-h = l([
-  w("pkt-timepicker")
+h = c([
+  x("pkt-timepicker")
 ], h);
 export {
   h as PktTimepicker

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "16.7.0",
+  "version": "16.7.1",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -78,5 +78,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "782a591e43ea062ca4ef23fe5415aca5f2d523b5"
+  "gitHead": "f03ecd48c2bc6097584f3a3f1d45848578bf524d"
 }

package/src/components/timepicker/timepicker.ts

@@ -612,7 +612,14 @@ export class PktTimepicker extends PktInputElement<Props> {
     const hoursAriaLabel = this.label ? `${hoursLabel}, ${this.label}` : hoursLabel
     const minutesAriaLabel = this.label ? `${minutesLabel}, ${this.label}` : minutesLabel
     return html`
-      <div class="pkt-input__container">
+      <div
+        class="pkt-input__container"
+        @click=${(e: Event) => {
+          const target = e.target as HTMLElement
+          if (target.closest('button, input')) return
+          this.hoursInputRef.value?.focus()
+        }}
+      >
         ${this.stepArrows
           ? html`
               <button