@oslokommune/punkt-elements 16.13.2 → 16.15.0

package/dist/{textinput-BUgntXnM.js → textinput-CxzAxM8E.js}

@@ -4,8 +4,8 @@ import { n as s } from "./element-with-slot-4J2o3SeU.js";
 import "./icon-Co72KtgF.js";
 import { t as c } from "./if-defined-Cjj8qN-Z.js";
 import { n as l, t as u } from "./ref-RS8Uv6uC.js";
-import { t as d } from "./input-element-Bw1s6NlF.js";
-import "./input-wrapper-YfTmpSSY.js";
+import { t as d } from "./input-element-CjebcQd1.js";
+import "./input-wrapper-DBpMVSxt.js";
 //#region src/components/textinput/textinput.ts
 var f = class extends d {
 	constructor(...e) {

package/dist/{timepicker-BIfE7KKJ.cjs → timepicker-Cv9juQeB.cjs}

@@ -1,4 +1,4 @@
-const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./if-defined-XKOD_t_V.cjs`),i=require(`./ref-BaJ0mBT_.cjs`),a=require(`./input-element-B1yxcfz4.cjs`);require(`./input-wrapper-BRuVELpK.cjs`);var o=e=>/^\d{2}:\d{2}$/.test(e)&&parseInt(e.slice(0,2),10)<=23&&parseInt(e.slice(3),10)<=59,s=e=>{let[t,n]=e.split(`:`).map(Number);return t*60+n},c=e=>e?Math.max(1,Math.round(e/60)):1,l=(e,t)=>{let n=e?parseInt(String(e).split(`:`)[0],10):0,r=t?parseInt(String(t).split(`:`)[0],10):23;return Array.from({length:r-n+1},(e,t)=>t+n)},u=e=>{let t=c(e);return Array.from({length:Math.floor(60/t)},(e,n)=>n*t)},d=(e,t,n,r)=>{let i=e===``?n===1?0:23:parseInt(e,10),a=t===``?n===1?0:Math.floor(59/r)*r:parseInt(t,10);return a+=n*r,a>59?(a=0,i=(i+1)%24):a<0&&(a=Math.floor(59/r)*r,i=(i-1+24)%24),{hours:String(i).padStart(2,`0`),minutes:String(a).padStart(2,`0`)}},f=class extends a.t{constructor(...e){super(...e),this.hiddenInputRef=i.t(),this.hoursInputRef=i.t(),this.minutesInputRef=i.t(),this.buttonRef=i.t(),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=e=>{this.contains(e.target)||this._closePopup()},this._handleComponentFocusIn=()=>{this._hasFocus||(this._hasFocus=!0,this.onFocus())},this._handleComponentFocusOut=e=>{this.contains(e.relatedTarget)||(this._hasFocus=!1,this.onBlur())},this._handleHoursKeydown=e=>{let t=e.target;switch(e.key){case`ArrowUp`:{e.preventDefault();let t=this._hours===``?0:parseInt(this._hours,10);this._hours=String((t+1)%24).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowDown`:{e.preventDefault();let t=this._hours===``?0:parseInt(this._hours,10);this._hours=String((t-1+24)%24).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowRight`:e.preventDefault(),this.minutesInputRef.value?.focus();break;case`Backspace`:case`Delete`:this._hoursDigitCount=0,this._hoursFirstDigit=-1;break;case`Tab`:break;case`Enter`:{e.preventDefault();let n=this.internals.form;n?n.requestSubmit():t.blur();break}default:if(/^\d$/.test(e.key)){e.preventDefault();let t=parseInt(e.key,10);if(this._hoursDigitCount===0)this._hoursFirstDigit=t,this._hours=String(t).padStart(2,`0`),this._hoursDigitCount=1,this.onInput(),t>=3&&(this._hoursFirstDigit=-1,this._hoursDigitCount=0,this._syncValueFromDisplay(),this.minutesInputRef.value?.focus());else{let e=this._hoursFirstDigit*10+t;this._hours=e<=23?String(e).padStart(2,`0`):String(t).padStart(2,`0`),this._hoursFirstDigit=-1,this._hoursDigitCount=0,this._syncValueFromDisplay(),this.onInput(),this.minutesInputRef.value?.focus()}}else e.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=e=>{let t=e.target;switch(e.key){case`ArrowUp`:{e.preventDefault();let t=this._minutes===``?0:parseInt(this._minutes,10);this._minutes=String((t+this._minuteStep)%60).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowDown`:{e.preventDefault();let t=this._minutes===``?0:parseInt(this._minutes,10);this._minutes=String((t-this._minuteStep+60)%60).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowLeft`:e.preventDefault(),this.hoursInputRef.value?.focus();break;case`Backspace`:case`Delete`:this._minutesDigitCount=0,this._minutesFirstDigit=-1;break;case`Tab`:break;case`Enter`:{e.preventDefault();let n=this.internals.form;n?n.requestSubmit():t.blur();break}default:if(/^\d$/.test(e.key)){e.preventDefault();let t=parseInt(e.key,10);if(this._minutesDigitCount===0)this._minutesFirstDigit=t,this._minutes=String(t).padStart(2,`0`),this._minutesDigitCount=1,this.onInput(),t>=6&&(this._minutesFirstDigit=-1,this._minutesDigitCount=0,this._syncValueFromDisplay());else{let e=this._minutesFirstDigit*10+t;this._minutes=e<=59?String(e).padStart(2,`0`):String(t).padStart(2,`0`),this._minutesFirstDigit=-1,this._minutesDigitCount=0,this._syncValueFromDisplay(),this.onInput()}}else e.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=e=>{let t=document.activeElement,n=t.closest(`.pkt-timepicker-popup__col`);if(!n)return;let r=Array.from(n.querySelectorAll(`.pkt-timepicker-popup__option`)),i=r.indexOf(t),a=t.dataset.type??``;switch(e.key){case`ArrowDown`:e.preventDefault(),this._focusOptionAndSync(r[Math.min(i+1,r.length-1)],a);break;case`ArrowUp`:e.preventDefault(),this._focusOptionAndSync(r[Math.max(i-1,0)],a);break;case`Home`:e.preventDefault(),this._focusOptionAndSync(r[0],a);break;case`End`:e.preventDefault(),this._focusOptionAndSync(r[r.length-1],a);break;case`ArrowRight`:e.preventDefault(),a===`hour`&&(this._focusOptionAndSync(t,a),this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst(`minute`)}));break;case`ArrowLeft`:e.preventDefault(),a===`minute`&&(this._focusOptionAndSync(t,a),this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst(`hour`)}));break;case`Enter`:case` `:e.preventDefault(),t.click();break;case`Escape`:e.preventDefault(),this._closePopup(),this.buttonRef.value?.focus();break}}}get inputRef(){return this.hiddenInputRef}manageValidity(t){let n=this.hoursInputRef.value;if(!n)return;if(this.required&&!this.value){this.internals.setValidity({valueMissing:!0},e.i.forms.messages.required,n),this._setAriaInvalid(!0);return}if(!this.value){this.internals.setValidity({}),this._setAriaInvalid(!1);return}let r=s(this.value),i=c(this.step);if(this.min&&r<s(String(this.min))){this.internals.setValidity({rangeUnderflow:!0},e.i.forms.messages.rangeUnderflowMin.replace(`{min}`,String(this.min)),n),this._setAriaInvalid(!0);return}if(this.max&&r>s(String(this.max))){this.internals.setValidity({rangeOverflow:!0},e.i.forms.messages.rangeOverflowMax.replace(`{max}`,String(this.max)),n),this._setAriaInvalid(!0);return}if(this.step&&r%i!==0){let t=i===60?e.i.forms.messages.timeStepMismatchHour:i===30?e.i.forms.messages.timeStepMismatchHalfHour:e.i.forms.messages.timeStepMismatch.replace(`{step}`,`${i}, ${i*2}, ${i*3}`);this.internals.setValidity({stepMismatch:!0},t,n),this._setAriaInvalid(!0);return}this.internals.setValidity({}),this._setAriaInvalid(!1)}_setAriaInvalid(e){if(!this.touched&&e)return;let t=this.hoursInputRef.value,n=this.minutesInputRef.value;e?(t?.setAttribute(`aria-invalid`,`true`),n?.setAttribute(`aria-invalid`,`true`)):(t?.removeAttribute(`aria-invalid`),n?.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(e){super.willUpdate(e),e.has(`value`)&&this._syncDisplayFromValue()}updated(e){super.updated(e),this.classList.toggle(`pkt-timepicker--stepper`,this.stepArrows),this.classList.toggle(`pkt-timepicker--fullwidth`,this.fullwidth),e.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(e){return e===3600||e<3600&&3600%e==0&&e%60==0}_syncDisplayFromValue(){let e=o(this.value)?this.value.split(`:`):null;e?(this._hours=e[0],this._minutes=e[1]):(this._hours=``,this._minutes=``)}_syncValueFromDisplay(){if(this._hours!==``&&this._minutes!==``){let e=`${this._hours}:${this._minutes}`;e!==this.value&&(this.value=e,this.onChange(e))}else this.value!==``&&(this.value=``,this.onChange(``))}get _minuteStep(){return c(this.step)}get _hourOptions(){return l(this.min,this.max)}get _minuteOptions(){return u(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(){let e=this.querySelector(`.pkt-timepicker-popup`);e&&e.querySelectorAll(`.pkt-timepicker-popup__col`).forEach(e=>{let t=e.querySelector(`.pkt-timepicker-popup__option--selected`);t&&t.scrollIntoView({block:`center`})})}_focusSelectedOrFirst(e){let t=this.querySelector(`.pkt-timepicker-popup`);if(!t)return;let n=t.querySelectorAll(`.pkt-timepicker-popup__col`),r=e===`hour`?n[0]:n[1];if(!r)return;let i=r.querySelector(`.pkt-timepicker-popup__option--selected`),a=r.querySelector(`.pkt-timepicker-popup__option`);(i||a)?.focus()}_handleOptionClick(e,t){let n=String(e).padStart(2,`0`);t===`hour`?(this._hours=n,this.updateComplete.then(()=>this._focusSelectedOrFirst(`minute`))):(this._minutes=n,this._closePopup(),this.buttonRef.value?.focus())}_focusOptionAndSync(e,t){if(!e)return;let n=parseInt(e.dataset.value??`0`,10);t===`hour`?this._hours=String(n).padStart(2,`0`):this._minutes=String(n).padStart(2,`0`),e.focus()}_stepTime(e){let t=d(this._hours,this._minutes,e,this._minuteStep);this._hours=t.hours,this._minutes=t.minutes,this._syncValueFromDisplay()}_renderOption(n,r){let i=String(n).padStart(2,`0`),a=n===(r===`hour`?this._hours===``?NaN:parseInt(this._hours,10):this._minutes===``?NaN:parseInt(this._minutes,10));return e.d`
+const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./if-defined-XKOD_t_V.cjs`),i=require(`./ref-BaJ0mBT_.cjs`),a=require(`./input-element-FGcr5hGd.cjs`);require(`./input-wrapper-B_XFi211.cjs`);var o=e=>/^\d{2}:\d{2}$/.test(e)&&parseInt(e.slice(0,2),10)<=23&&parseInt(e.slice(3),10)<=59,s=e=>{let[t,n]=e.split(`:`).map(Number);return t*60+n},c=e=>e?Math.max(1,Math.round(e/60)):1,l=(e,t)=>{let n=e?parseInt(String(e).split(`:`)[0],10):0,r=t?parseInt(String(t).split(`:`)[0],10):23;return Array.from({length:r-n+1},(e,t)=>t+n)},u=e=>{let t=c(e);return Array.from({length:Math.floor(60/t)},(e,n)=>n*t)},d=(e,t,n,r)=>{let i=e===``?n===1?0:23:parseInt(e,10),a=t===``?n===1?0:Math.floor(59/r)*r:parseInt(t,10);return a+=n*r,a>59?(a=0,i=(i+1)%24):a<0&&(a=Math.floor(59/r)*r,i=(i-1+24)%24),{hours:String(i).padStart(2,`0`),minutes:String(a).padStart(2,`0`)}},f=class extends a.t{constructor(...e){super(...e),this.hiddenInputRef=i.t(),this.hoursInputRef=i.t(),this.minutesInputRef=i.t(),this.buttonRef=i.t(),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=e=>{this.contains(e.target)||this._closePopup()},this._handleComponentFocusIn=()=>{this._hasFocus||(this._hasFocus=!0,this.onFocus())},this._handleComponentFocusOut=e=>{this.contains(e.relatedTarget)||(this._hasFocus=!1,this.onBlur())},this._handleHoursKeydown=e=>{let t=e.target;switch(e.key){case`ArrowUp`:{e.preventDefault();let t=this._hours===``?0:parseInt(this._hours,10);this._hours=String((t+1)%24).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowDown`:{e.preventDefault();let t=this._hours===``?0:parseInt(this._hours,10);this._hours=String((t-1+24)%24).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowRight`:e.preventDefault(),this.minutesInputRef.value?.focus();break;case`Backspace`:case`Delete`:this._hoursDigitCount=0,this._hoursFirstDigit=-1;break;case`Tab`:break;case`Enter`:{e.preventDefault();let n=this.internals.form;n?n.requestSubmit():t.blur();break}default:if(/^\d$/.test(e.key)){e.preventDefault();let t=parseInt(e.key,10);if(this._hoursDigitCount===0)this._hoursFirstDigit=t,this._hours=String(t).padStart(2,`0`),this._hoursDigitCount=1,this.onInput(),t>=3&&(this._hoursFirstDigit=-1,this._hoursDigitCount=0,this._syncValueFromDisplay(),this.minutesInputRef.value?.focus());else{let e=this._hoursFirstDigit*10+t;this._hours=e<=23?String(e).padStart(2,`0`):String(t).padStart(2,`0`),this._hoursFirstDigit=-1,this._hoursDigitCount=0,this._syncValueFromDisplay(),this.onInput(),this.minutesInputRef.value?.focus()}}else e.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=e=>{let t=e.target;switch(e.key){case`ArrowUp`:{e.preventDefault();let t=this._minutes===``?0:parseInt(this._minutes,10);this._minutes=String((t+this._minuteStep)%60).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowDown`:{e.preventDefault();let t=this._minutes===``?0:parseInt(this._minutes,10);this._minutes=String((t-this._minuteStep+60)%60).padStart(2,`0`),this._syncValueFromDisplay(),this.onInput();break}case`ArrowLeft`:e.preventDefault(),this.hoursInputRef.value?.focus();break;case`Backspace`:case`Delete`:this._minutesDigitCount=0,this._minutesFirstDigit=-1;break;case`Tab`:break;case`Enter`:{e.preventDefault();let n=this.internals.form;n?n.requestSubmit():t.blur();break}default:if(/^\d$/.test(e.key)){e.preventDefault();let t=parseInt(e.key,10);if(this._minutesDigitCount===0)this._minutesFirstDigit=t,this._minutes=String(t).padStart(2,`0`),this._minutesDigitCount=1,this.onInput(),t>=6&&(this._minutesFirstDigit=-1,this._minutesDigitCount=0,this._syncValueFromDisplay());else{let e=this._minutesFirstDigit*10+t;this._minutes=e<=59?String(e).padStart(2,`0`):String(t).padStart(2,`0`),this._minutesFirstDigit=-1,this._minutesDigitCount=0,this._syncValueFromDisplay(),this.onInput()}}else e.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=e=>{let t=document.activeElement,n=t.closest(`.pkt-timepicker-popup__col`);if(!n)return;let r=Array.from(n.querySelectorAll(`.pkt-timepicker-popup__option`)),i=r.indexOf(t),a=t.dataset.type??``;switch(e.key){case`ArrowDown`:e.preventDefault(),this._focusOptionAndSync(r[Math.min(i+1,r.length-1)],a);break;case`ArrowUp`:e.preventDefault(),this._focusOptionAndSync(r[Math.max(i-1,0)],a);break;case`Home`:e.preventDefault(),this._focusOptionAndSync(r[0],a);break;case`End`:e.preventDefault(),this._focusOptionAndSync(r[r.length-1],a);break;case`ArrowRight`:e.preventDefault(),a===`hour`&&(this._focusOptionAndSync(t,a),this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst(`minute`)}));break;case`ArrowLeft`:e.preventDefault(),a===`minute`&&(this._focusOptionAndSync(t,a),this.updateComplete.then(()=>{this._scrollToSelected(),this._focusSelectedOrFirst(`hour`)}));break;case`Enter`:case` `:e.preventDefault(),t.click();break;case`Escape`:e.preventDefault(),this._closePopup(),this.buttonRef.value?.focus();break}}}get inputRef(){return this.hiddenInputRef}manageValidity(t){let n=this.hoursInputRef.value;if(!n)return;if(this.required&&!this.value){this.internals.setValidity({valueMissing:!0},e.i.forms.messages.required,n),this._setAriaInvalid(!0);return}if(!this.value){this.internals.setValidity({}),this._setAriaInvalid(!1);return}let r=s(this.value),i=c(this.step);if(this.min&&r<s(String(this.min))){this.internals.setValidity({rangeUnderflow:!0},e.i.forms.messages.rangeUnderflowMin.replace(`{min}`,String(this.min)),n),this._setAriaInvalid(!0);return}if(this.max&&r>s(String(this.max))){this.internals.setValidity({rangeOverflow:!0},e.i.forms.messages.rangeOverflowMax.replace(`{max}`,String(this.max)),n),this._setAriaInvalid(!0);return}if(this.step&&r%i!==0){let t=i===60?e.i.forms.messages.timeStepMismatchHour:i===30?e.i.forms.messages.timeStepMismatchHalfHour:e.i.forms.messages.timeStepMismatch.replace(`{step}`,`${i}, ${i*2}, ${i*3}`);this.internals.setValidity({stepMismatch:!0},t,n),this._setAriaInvalid(!0);return}this.internals.setValidity({}),this._setAriaInvalid(!1)}_setAriaInvalid(e){if(!this.touched&&e)return;let t=this.hoursInputRef.value,n=this.minutesInputRef.value;e?(t?.setAttribute(`aria-invalid`,`true`),n?.setAttribute(`aria-invalid`,`true`)):(t?.removeAttribute(`aria-invalid`),n?.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(e){super.willUpdate(e),e.has(`value`)&&this._syncDisplayFromValue()}updated(e){super.updated(e),this.classList.toggle(`pkt-timepicker--stepper`,this.stepArrows),this.classList.toggle(`pkt-timepicker--fullwidth`,this.fullwidth),e.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(e){return e===3600||e<3600&&3600%e==0&&e%60==0}_syncDisplayFromValue(){let e=o(this.value)?this.value.split(`:`):null;e?(this._hours=e[0],this._minutes=e[1]):(this._hours=``,this._minutes=``)}_syncValueFromDisplay(){if(this._hours!==``&&this._minutes!==``){let e=`${this._hours}:${this._minutes}`;e!==this.value&&(this.value=e,this.onChange(e))}else this.value!==``&&(this.value=``,this.onChange(``))}get _minuteStep(){return c(this.step)}get _hourOptions(){return l(this.min,this.max)}get _minuteOptions(){return u(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(){let e=this.querySelector(`.pkt-timepicker-popup`);e&&e.querySelectorAll(`.pkt-timepicker-popup__col`).forEach(e=>{let t=e.querySelector(`.pkt-timepicker-popup__option--selected`);t&&t.scrollIntoView({block:`center`})})}_focusSelectedOrFirst(e){let t=this.querySelector(`.pkt-timepicker-popup`);if(!t)return;let n=t.querySelectorAll(`.pkt-timepicker-popup__col`),r=e===`hour`?n[0]:n[1];if(!r)return;let i=r.querySelector(`.pkt-timepicker-popup__option--selected`),a=r.querySelector(`.pkt-timepicker-popup__option`);(i||a)?.focus()}_handleOptionClick(e,t){let n=String(e).padStart(2,`0`);t===`hour`?(this._hours=n,this.updateComplete.then(()=>this._focusSelectedOrFirst(`minute`))):(this._minutes=n,this._closePopup(),this.buttonRef.value?.focus())}_focusOptionAndSync(e,t){if(!e)return;let n=parseInt(e.dataset.value??`0`,10);t===`hour`?this._hours=String(n).padStart(2,`0`):this._minutes=String(n).padStart(2,`0`),e.focus()}_stepTime(e){let t=d(this._hours,this._minutes,e,this._minuteStep);this._hours=t.hours,this._minutes=t.minutes,this._syncValueFromDisplay()}_renderOption(n,r){let i=String(n).padStart(2,`0`),a=n===(r===`hour`?this._hours===``?NaN:parseInt(this._hours,10):this._minutes===``?NaN:parseInt(this._minutes,10));return e.d`
       <button
         class=${t.t({"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":a})}
         type="button"

package/dist/{timepicker-DaSwn1FA.js → timepicker-DXrpg5C7.js}

@@ -4,8 +4,8 @@ import { n as c } from "./element-with-slot-4J2o3SeU.js";
 import "./icon-Co72KtgF.js";
 import { t as l } from "./if-defined-Cjj8qN-Z.js";
 import { n as u, t as d } from "./ref-RS8Uv6uC.js";
-import { t as f } from "./input-element-Bw1s6NlF.js";
-import "./input-wrapper-YfTmpSSY.js";
+import { t as f } from "./input-element-CjebcQd1.js";
+import "./input-wrapper-DBpMVSxt.js";
 //#region ../../shared-utils/timepicker/time-utils.ts
 var p = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && parseInt(e.slice(3), 10) <= 59, m = (e) => {
 	let [t, n] = e.split(":").map(Number);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "16.13.2",
+  "version": "16.15.0",
   "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": "511d6ea79105bb64a6637743f6058a7da3ca0891"
+  "gitHead": "5147b31531bab9ff64963a1f091a717bb93d35cf"
 }

package/src/components/fileupload/fileupload-base.ts

@@ -0,0 +1,557 @@
+import { PropertyValues } from 'lit'
+import { property, state } from 'lit/decorators.js'
+
+import { defaultFileUploadStrings } from 'shared-types'
+import {
+  countFileTransferStates,
+  formatFileSize,
+  getSupportedFormatsText as sharedGetSupportedFormatsText,
+  isImageFileLike,
+  mergeFilesAndTransfers,
+  resolveAcceptAttribute,
+  validateFile as sharedValidateFile,
+} from 'shared-utils/fileupload'
+
+import { PktElement } from '@/base-elements/element'
+import converters from '../../helpers/converters'
+
+import type {
+  FileItem,
+  IPktFileUpload,
+  TQueueItemOperation,
+  TFileTransfer,
+  TFileUploadItemRenderer,
+  TFileValidateDetail,
+  TFilesChangedReason,
+  TTransferCancelledDetail,
+  TTransferProgress,
+  TUploadStrategy,
+} from './fileupload-types'
+
+export abstract class PktFileUploadBase
+  extends PktElement<IPktFileUpload>
+  implements IPktFileUpload
+{
+  /** Unique id used for internal input + wrapper wiring. Defaults to a per-instance uuid. */
+  @property({ type: String }) id: string = `pkt-fileupload-${crypto.randomUUID()}`
+  /** Field name used by native input (`form`) or hidden fileId inputs (`custom`). */
+  @property({ type: String }) name: string = 'files'
+  /** Optional label shown by `pkt-input-wrapper`. */
+  @property({ type: String }) label: string = ''
+  /** Optional help text shown under label. */
+  @property({ type: String }) helptext: string = ''
+  /** Mark input as required in form strategy. */
+  @property({ type: Boolean, reflect: true }) required = false
+  /** Allow selecting/dropping multiple files. */
+  @property({ type: Boolean, reflect: true }) multiple = false
+  /** Disable all interaction in drop zone + queue actions. */
+  @property({ type: Boolean, reflect: true }) disabled = false
+  /** Stretch component width to container. */
+  @property({ type: Boolean, reflect: true, attribute: 'fullwidth' }) fullwidth = false
+  /** Upload mode: `form` uses native file submit, `custom` emits upload request events per file. */
+  @property({ type: String, reflect: true, attribute: 'upload-strategy' })
+  uploadStrategy: TUploadStrategy = 'form'
+  /** Queue visual mode (`filename` or `thumbnail`). */
+  @property({ type: String, reflect: true, attribute: 'item-renderer' })
+  itemRenderer: TFileUploadItemRenderer = 'filename'
+  /** Native file input accept hint (browser picker filtering). */
+  @property({ type: String }) accept: string = ''
+  /** Built-in format validation source (csv attribute or array property). */
+  @property({ converter: converters.csvToArray, attribute: 'allowed-formats' })
+  allowedFormats: string[] = []
+  /** Optional custom format validation message. Supports `{formats}` placeholder. */
+  @property({ type: String, attribute: 'format-error-message' }) formatErrorMessage = ''
+  /** Max allowed file size (bytes or string like `500KB`, `5MB`). */
+  @property({ attribute: 'max-file-size' }) maxFileSize?: string | number
+  /** Optional custom size validation message. Supports `{maxSize}` placeholder. */
+  @property({ type: String, attribute: 'size-error-message' }) sizeErrorMessage = ''
+  /** Optional JS callback for custom validation. Property-only on purpose (not HTML-attribute friendly). */
+  @property({ attribute: false }) onFileValidation?: (file: File) => string | null
+  /** Transfer state list keyed by `fileId` (used for custom upload progress/error/cancel UI). */
+  @property({ attribute: false }) transfers: TFileTransfer[] = []
+  /** Enables built-in comment operation in queue items (disabled in thumbnail view for parity with React). */
+  @property({ type: Boolean, attribute: 'add-comments-enabled' }) addCommentsEnabled = false
+  /** Enables built-in rename operation in queue items (disabled in thumbnail view for parity with React). */
+  @property({ type: Boolean, attribute: 'rename-files-enabled' }) renameFilesEnabled = false
+  /** Custom queue operations (JS property only). Supports inline + expanded operation UIs. */
+  @property({ attribute: false }) extraOperations: TQueueItemOperation[] = []
+  /** Toggle image thumbnail behavior in queue when renderer supports it. */
+  @property({ type: Boolean, reflect: true, attribute: 'enable-image-preview' })
+  enableImagePreview = false
+  /** External error flag — combines with internal validation errors. */
+  @property({ type: Boolean, attribute: 'has-error' }) hasError = false
+  /** External error message shown in the alert under the drop zone. */
+  @property({ type: String, attribute: 'error-message' }) errorMessage = ''
+  /** Show "Valgfritt" tag in the input wrapper. */
+  @property({ type: Boolean, attribute: 'optional-tag' }) optionalTag = false
+  /** Show "Må fylles ut" tag in the input wrapper. */
+  @property({ type: Boolean, attribute: 'required-tag' }) requiredTag = false
+  /** Trailing characters to keep when middle-truncating long filenames. Set to `0` to disable. */
+  @property({ type: Number, attribute: 'truncate-tail' }) truncateTail: number = 4
+  /** Controlled mode source of truth. Parent owns file list and updates this prop from events. */
+  @property({ attribute: false }) value?: FileItem[]
+  /** Uncontrolled initial file list. Used once during first initialization. */
+  @property({ attribute: false }) defaultValue?: FileItem[]
+
+  @state() protected files: FileItem[] = []
+  @state() protected isDragActive = false
+  @state() protected validationErrorMessage: string | null = null
+  @state() protected addedAnnouncement = ''
+  @state() private thumbnailUrls: Record<string, string> = {}
+
+  private hasInitializedValue = false
+  private hasWarnedInvalidValueCombo = false
+  private thumbnailFileById = new Map<string, File>()
+  private connectedForm: HTMLFormElement | null = null
+  private addedAnnouncementTimer: ReturnType<typeof setTimeout> | null = null
+  private readonly requiredSelectionMessage = defaultFileUploadStrings.requiredMissing
+
+  protected get isControlled() {
+    return this.value !== undefined
+  }
+
+  /** True if the component itself wants to show an error (internal validation or external prop). */
+  protected get hasEffectiveError() {
+    return !!this.validationErrorMessage || this.hasError || !!this.errorMessage.trim()
+  }
+
+  /** Message to show in the alert under the drop zone. Internal validation takes priority. */
+  protected get effectiveErrorMessage(): string {
+    return this.validationErrorMessage ?? this.errorMessage ?? ''
+  }
+
+  protected get hasValidationError() {
+    return !!this.validationErrorMessage
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated?.(changedProperties)
+    if (!this.hasInitializedValue) {
+      this.files = this.value ?? this.defaultValue ?? []
+      this.syncThumbnailUrls(this.files)
+      this.hasInitializedValue = true
+    }
+    if (this.value !== undefined && this.defaultValue !== undefined) {
+      this.warnInvalidValueCombo()
+    }
+  }
+
+  protected willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties)
+    if (!this.hasInitializedValue) return
+
+    if (
+      this.isControlled &&
+      (changedProperties.has('value') ||
+        changedProperties.has('itemRenderer') ||
+        changedProperties.has('enableImagePreview'))
+    ) {
+      this.files = this.value ?? []
+      this.syncThumbnailUrls(this.files)
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties)
+    if (
+      changedProperties.has('uploadStrategy') ||
+      changedProperties.has('required') ||
+      changedProperties.has('value')
+    ) {
+      this.syncFormSubmitListener()
+    }
+    if (
+      this.uploadStrategy === 'form' &&
+      (changedProperties.has('value') ||
+        changedProperties.has('files') ||
+        changedProperties.has('uploadStrategy'))
+    ) {
+      this.syncNativeInputFiles()
+    }
+  }
+
+  private syncNativeInputFiles() {
+    const input = this.querySelector<HTMLInputElement>(`#${this.id}-input`)
+    if (!input || typeof DataTransfer === 'undefined') return
+    try {
+      const dataTransfer = new DataTransfer()
+      for (const item of this.getCurrentFiles()) {
+        if (item.file) dataTransfer.items.add(item.file)
+      }
+      input.files = dataTransfer.files
+    } catch {
+      // jsdom and some test environments do not implement DataTransfer; not critical.
+    }
+  }
+
+  private warnInvalidValueCombo() {
+    if (this.hasWarnedInvalidValueCombo) return
+
+    console.warn(
+      'PktFileUpload: Både value og defaultValue er angitt. Komponenten kan være enten kontrollert eller ukontrollert, ikke begge. value vil bli prioritert.',
+    )
+    this.hasWarnedInvalidValueCombo = true
+  }
+
+  disconnectedCallback(): void {
+    this.teardownFormSubmitListener()
+    if (this.addedAnnouncementTimer) {
+      clearTimeout(this.addedAnnouncementTimer)
+      this.addedAnnouncementTimer = null
+    }
+    super.disconnectedCallback()
+    this.revokeAllThumbnailUrls()
+  }
+
+  private setAddedAnnouncement(message: string) {
+    this.addedAnnouncement = message
+    if (this.addedAnnouncementTimer) clearTimeout(this.addedAnnouncementTimer)
+    this.addedAnnouncementTimer = setTimeout(() => {
+      this.addedAnnouncement = ''
+      this.addedAnnouncementTimer = null
+    }, 1500)
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    this.syncFormSubmitListener()
+  }
+
+  protected onNativeFileChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    this.addFiles(target.files ? Array.from(target.files) : [])
+    // In custom mode we do not submit native file input values, so we can clear the input
+    // to allow selecting the same file again. In form mode we keep native files for form submit.
+    if (this.uploadStrategy === 'custom') {
+      target.value = ''
+    }
+  }
+
+  protected openFileDialog = (event: Event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (this.disabled) return
+    const input = this.querySelector<HTMLInputElement>(`#${this.id}-input`)
+    input?.click()
+  }
+
+  protected onDropZoneClick = (event: MouseEvent) => {
+    if (this.disabled) return
+    const target = event.target as HTMLElement
+    if (target.closest('.pkt-fileupload__drop-zone__placeholder__title__open-file-dialog')) return
+    const input = this.querySelector<HTMLInputElement>(`#${this.id}-input`)
+    input?.click()
+  }
+
+  protected onDragOver = (event: DragEvent) => {
+    event.preventDefault()
+    if (this.disabled) return
+    this.isDragActive = true
+  }
+
+  protected onDragLeave = () => {
+    this.isDragActive = false
+  }
+
+  protected onDrop = (event: DragEvent) => {
+    event.preventDefault()
+    this.isDragActive = false
+    if (this.disabled) return
+    const droppedFiles = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : []
+    this.addFiles(droppedFiles)
+  }
+
+  protected addFiles(selectedFiles: File[]) {
+    if (selectedFiles.length === 0) return
+    const normalizedFiles = this.multiple ? selectedFiles : [selectedFiles[0]]
+
+    for (const file of normalizedFiles) {
+      const validationError = this.validateFile(file)
+      if (validationError) {
+        this.validationErrorMessage = validationError
+        return
+      }
+    }
+
+    this.validationErrorMessage = null
+    const newItems: FileItem[] = normalizedFiles.map((file) => ({
+      fileId: crypto.randomUUID(),
+      file,
+      attributes: {
+        targetFilename: file.name,
+      },
+    }))
+
+    this.setAddedAnnouncement(
+      newItems.length === 1
+        ? defaultFileUploadStrings.srFileAdded(newItems[0].attributes.targetFilename)
+        : defaultFileUploadStrings.srFilesAdded(newItems.length),
+    )
+
+    const currentFiles = this.getCurrentFiles()
+    const nextFiles = this.multiple ? [...currentFiles, ...newItems] : [newItems[0]]
+    this.commitFiles(
+      nextFiles,
+      'add',
+      newItems.map((item) => item.fileId),
+    )
+
+    if (this.uploadStrategy === 'custom') {
+      newItems.forEach((fileItem) => {
+        this.dispatchEvent(
+          new CustomEvent('file-upload-requested', {
+            detail: {
+              fileId: fileItem.fileId,
+              file: fileItem.file,
+              attributes: fileItem.attributes,
+            },
+            bubbles: true,
+            composed: true,
+          }),
+        )
+      })
+    }
+  }
+
+  protected getCurrentFiles(): FileItem[] {
+    return this.isControlled ? (this.value ?? []) : this.files
+  }
+
+  protected cancelTransfer(fileId: string) {
+    if (this.disabled) return
+    const currentItem = this.getCurrentFiles().find((item) => item.fileId === fileId)
+    if (!currentItem) return
+
+    this.removeFileItem(fileId)
+
+    // CE-native deviation from React callback props: emit a bubbling event for host-driven cancel/delete logic.
+    this.dispatchEvent(
+      new CustomEvent<TTransferCancelledDetail>('transfer-cancelled', {
+        detail: {
+          fileId: currentItem.fileId,
+          file: currentItem.file,
+          attributes: currentItem.attributes,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  protected removeFileItem(fileId: string) {
+    if (this.disabled) return
+    const currentFiles = this.getCurrentFiles()
+    const nextFiles = currentFiles.filter((item) => item.fileId !== fileId)
+    if (nextFiles.length === currentFiles.length) return
+    this.commitFiles(nextFiles, 'remove', [fileId])
+  }
+
+  // CE-native deviation: this is a method-based update hook instead of React callback props.
+  // It keeps queue lifecycle explicit without introducing React-specific abstractions.
+  public updateFileItem(fileId: string, updates: Partial<FileItem>) {
+    const currentFiles = this.getCurrentFiles()
+    const nextFiles = currentFiles.map((item) =>
+      item.fileId === fileId ? { ...item, ...updates } : item,
+    )
+    this.commitFiles(nextFiles, 'update', [fileId])
+  }
+
+  protected commitFiles(
+    nextFiles: FileItem[],
+    reason: TFilesChangedReason,
+    changedFileIds?: string[],
+  ) {
+    if (!this.isControlled) {
+      this.files = nextFiles
+      this.syncThumbnailUrls(nextFiles)
+    }
+    if (this.validationErrorMessage === this.requiredSelectionMessage && nextFiles.length > 0) {
+      this.validationErrorMessage = null
+    }
+    this.dispatchEvent(
+      new CustomEvent('files-changed', {
+        detail: { files: nextFiles, reason, changedFileIds },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  protected getThumbnailUrl(file: FileItem): string | undefined {
+    return this.thumbnailUrls[file.fileId]
+  }
+
+  protected getTransferProgress(fileId: string): TTransferProgress {
+    const transfer = this.transfers.find((item) => item.fileId === fileId)
+    if (transfer) return transfer.progress
+    return this.uploadStrategy === 'form' ? 'done' : 'queued'
+  }
+
+  protected getTransferForFile(fileId: string): TFileTransfer | undefined {
+    return this.transfers.find((item) => item.fileId === fileId)
+  }
+
+  protected isImageFile(file: FileItem): boolean {
+    return isImageFileLike(file)
+  }
+
+  protected formatFileSize(bytes: number): string {
+    return formatFileSize(bytes)
+  }
+
+  protected getResolvedAcceptValue(): string {
+    return resolveAcceptAttribute(this.accept, this.allowedFormats)
+  }
+
+  protected getSupportedFormatsText(): string {
+    return sharedGetSupportedFormatsText(this.allowedFormats, this.accept)
+  }
+
+  protected getSortedFilesAndTransfers() {
+    return mergeFilesAndTransfers(this.getCurrentFiles(), this.transfers, this.uploadStrategy)
+  }
+
+  private validateFile(file: File): string | null {
+    const baseError = sharedValidateFile(file, {
+      allowedFormats: this.allowedFormats,
+      maxFileSize: this.maxFileSize,
+      formatErrorMessage: this.formatErrorMessage,
+      sizeErrorMessage: this.sizeErrorMessage,
+      onFileValidation: this.onFileValidation,
+    })
+    if (baseError) return baseError
+
+    const eventDetail: TFileValidateDetail = { file, errorMessage: null }
+    // CE-native deviation from React: callbacks cannot be passed declaratively in HTML,
+    // so we expose an event hook where consumers can set detail.errorMessage.
+    const validationEvent = new CustomEvent<TFileValidateDetail>('file-validate', {
+      detail: eventDetail,
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    })
+    this.dispatchEvent(validationEvent)
+
+    if (eventDetail.errorMessage) return eventDetail.errorMessage
+    if (validationEvent.defaultPrevented) return defaultFileUploadStrings.genericValidationRejection
+    return null
+  }
+
+  private syncThumbnailUrls(nextFiles: FileItem[]) {
+    const supportsObjectUrl =
+      typeof URL !== 'undefined' &&
+      typeof URL.createObjectURL === 'function' &&
+      typeof URL.revokeObjectURL === 'function'
+
+    if (!supportsObjectUrl) {
+      this.thumbnailUrls = {}
+      this.thumbnailFileById.clear()
+      return
+    }
+
+    const nextIds = new Set(nextFiles.map((item) => item.fileId))
+    const nextUrlMap: Record<string, string> = {}
+
+    for (const [fileId, url] of Object.entries(this.thumbnailUrls)) {
+      if (!nextIds.has(fileId)) {
+        URL.revokeObjectURL(url)
+        this.thumbnailFileById.delete(fileId)
+      }
+    }
+
+    for (const item of nextFiles) {
+      const previousUrl = this.thumbnailUrls[item.fileId]
+      const previousFile = this.thumbnailFileById.get(item.fileId)
+
+      if (!item.file || !this.isImageFile(item)) {
+        if (previousUrl) {
+          URL.revokeObjectURL(previousUrl)
+          this.thumbnailFileById.delete(item.fileId)
+        }
+        continue
+      }
+
+      if (previousUrl && previousFile === item.file) {
+        nextUrlMap[item.fileId] = previousUrl
+        continue
+      }
+
+      if (previousUrl && previousFile !== item.file) {
+        URL.revokeObjectURL(previousUrl)
+      }
+
+      const nextUrl = URL.createObjectURL(item.file)
+      this.thumbnailFileById.set(item.fileId, item.file)
+      nextUrlMap[item.fileId] = nextUrl
+    }
+
+    this.thumbnailUrls = nextUrlMap
+  }
+
+  private revokeAllThumbnailUrls() {
+    if (typeof URL === 'undefined' || typeof URL.revokeObjectURL !== 'function') {
+      this.thumbnailUrls = {}
+      this.thumbnailFileById.clear()
+      return
+    }
+
+    Object.values(this.thumbnailUrls).forEach((url) => URL.revokeObjectURL(url))
+    this.thumbnailUrls = {}
+    this.thumbnailFileById.clear()
+  }
+
+  /** Polite summary: prefer the transient "file added" announcement, then fall back to upload completion. */
+  protected getSrUploadedMessage(): string {
+    if (this.addedAnnouncement) return this.addedAnnouncement
+    const { totalCount, uploadedCount } = countFileTransferStates(
+      this.getCurrentFiles(),
+      this.transfers,
+    )
+    if (totalCount === 0 || uploadedCount === 0) return ''
+    return defaultFileUploadStrings.srFilesUploadedOfTotal(
+      uploadedCount,
+      totalCount,
+      defaultFileUploadStrings.fileLabel(totalCount),
+    )
+  }
+
+  /** Assertive summary for transfer errors (parity with React `FileUpload`). */
+  protected getSrErrorsMessage(): string {
+    const { totalCount, failedCount } = countFileTransferStates(
+      this.getCurrentFiles(),
+      this.transfers,
+    )
+    if (totalCount === 0 || failedCount === 0) return ''
+    return defaultFileUploadStrings.srFilesFailedOfTotal(
+      failedCount,
+      totalCount,
+      defaultFileUploadStrings.fileLabel(totalCount),
+    )
+  }
+
+  private syncFormSubmitListener() {
+    const nextForm = this.closest('form')
+    if (this.connectedForm === nextForm) return
+
+    this.teardownFormSubmitListener()
+    this.connectedForm = nextForm
+
+    if (this.connectedForm) {
+      this.connectedForm.addEventListener('submit', this.onHostFormSubmit)
+    }
+  }
+
+  private teardownFormSubmitListener() {
+    if (!this.connectedForm) return
+    this.connectedForm.removeEventListener('submit', this.onHostFormSubmit)
+    this.connectedForm = null
+  }
+
+  private onHostFormSubmit = (event: Event) => {
+    if (!this.required || this.uploadStrategy !== 'custom') return
+    if (this.getCurrentFiles().length > 0) return
+
+    this.validationErrorMessage = this.requiredSelectionMessage
+    event.preventDefault()
+  }
+}