@oslokommune/punkt-elements 16.7.1 → 16.7.4

package/dist/pkt-timepicker.cjs

@@ -1,191 +1 @@
-"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=${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"}
-        tabindex=${n?"0":"-1"}
-        data-type=${e}
-        data-value=${t}
-        @click=${r=>{r.stopImmediatePropagation(),this._handleOptionClick(t,e)}}
-      >
-        <span class="pkt-btn__text pkt-txt-14-light">${s}</span>
-      </button>
-    `}_renderPopup(){var t,e,s;return a.b`
-      <div
-        class="pkt-timepicker-popup"
-        id=${this.id+"-popup"}
-        ?hidden=${!this._isOpen}
-        role="group"
-        aria-label=${((t=this.strings.timepicker)==null?void 0:t.selectTime)??"Velg tidspunkt"}
-        @keydown=${this._handlePopupKeydown}
-        @focusout=${i=>{var n;(n=this.querySelector(".pkt-timepicker-popup"))!=null&&n.contains(i.relatedTarget)||this._closePopup()}}
-      >
-        <div
-          class="pkt-timepicker-popup__col"
-          role="listbox"
-          aria-label=${((e=this.strings.timepicker)==null?void 0:e.hours)??"Timer"}
-          aria-orientation="vertical"
-        >
-          ${this._hourOptions.map(i=>this._renderOption(i,"hour"))}
-        </div>
-        <div
-          class="pkt-timepicker-popup__col"
-          role="listbox"
-          aria-label=${((s=this.strings.timepicker)==null?void 0:s.minutes)??"Minutter"}
-          aria-orientation="vertical"
-        >
-          ${this._minuteOptions.map(i=>this._renderOption(i,"minute"))}
-        </div>
-      </div>
-    `}_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=${((u=this.strings.timepicker)==null?void 0:u.prevTime)??"Forrige tidspunkt"}
-                ?disabled=${this.disabled}
-                @click=${()=>this._stepTime(-1)}
-              >
-                <pkt-icon name="chevron-thin-left"></pkt-icon>
-                <span class="pkt-btn__text"
-                  >${((k=this.strings.timepicker)==null?void 0:k.prevTime)??"Forrige tidspunkt"}</span
-                >
-              </button>
-            `:a.A}
-        <input
-          ${p.n(this.hoursInputRef)}
-          type="text"
-          inputmode="numeric"
-          maxlength="2"
-          size="2"
-          class="pkt-input pkt-timepicker__input"
-          id=${this.id+"-hours"}
-          data-min="0"
-          data-max="23"
-          .value=${this._hours}
-          placeholder="––"
-          aria-label=${s}
-          role="spinbutton"
-          aria-invalid=${this.hasError?"true":a.A}
-          aria-valuemin="0"
-          aria-valuemax="23"
-          aria-valuenow=${this._hours!==""?this._hours:a.A}
-          aria-valuetext=${this._hours!==""?`${this._hours} ${t.toLowerCase()}`:a.A}
-          autocomplete="off"
-          ?disabled=${this.disabled}
-          @keydown=${this._handleHoursKeydown}
-          @blur=${this._handleHoursBlur}
-          @focus=${h=>{h.target.select(),h.stopImmediatePropagation()}}
-        />
-        <span class="pkt-timepicker__separator">:</span>
-        <input
-          ${p.n(this.minutesInputRef)}
-          type="text"
-          inputmode="numeric"
-          maxlength="2"
-          size="2"
-          class="pkt-input pkt-timepicker__input"
-          id=${this.id+"-minutes"}
-          data-min="0"
-          data-max="59"
-          .value=${this._minutes}
-          placeholder="––"
-          aria-label=${i}
-          role="spinbutton"
-          aria-invalid=${this.hasError?"true":a.A}
-          aria-valuemin="0"
-          aria-valuemax="59"
-          aria-valuenow=${this._minutes!==""?this._minutes:a.A}
-          aria-valuetext=${this._minutes!==""?`${this._minutes} ${e.toLowerCase()}`:a.A}
-          autocomplete="off"
-          ?disabled=${this.disabled}
-          @keydown=${this._handleMinutesKeydown}
-          @blur=${this._handleMinutesBlur}
-          @focus=${h=>{h.target.select(),h.stopImmediatePropagation()}}
-        />
-        ${this.hidePicker&&!this.stepArrows?a.b`<pkt-icon
-              class="pkt-input-icon pkt-timepicker__icon"
-              name="clock"
-              aria-hidden="true"
-            ></pkt-icon>`:a.A}
-        ${!this.hidePicker&&!this.stepArrows?a.b`
-              <button
-                ${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"}
-                aria-haspopup="listbox"
-                aria-expanded=${this._isOpen?"true":"false"}
-                aria-controls=${this.id+"-popup"}
-                ?disabled=${this.disabled}
-                @click=${this._togglePopup}
-              >
-                <pkt-icon name="clock"></pkt-icon>
-                <span class="pkt-btn__text"
-                  >${((g=this.strings.timepicker)==null?void 0:g.openPicker)??"Åpne tidspunkt-velger"}</span
-                >
-              </button>
-            `:a.A}
-        ${this.stepArrows?a.b`
-              <button
-                class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--next"
-                type="button"
-                aria-label=${((b=this.strings.timepicker)==null?void 0:b.nextTime)??"Neste tidspunkt"}
-                ?disabled=${this.disabled}
-                @click=${()=>this._stepTime(1)}
-              >
-                <pkt-icon name="chevron-thin-right"></pkt-icon>
-                <span class="pkt-btn__text"
-                  >${((v=this.strings.timepicker)==null?void 0:v.nextTime)??"Neste tidspunkt"}</span
-                >
-              </button>
-            `:a.A}
-        <input
-          ${p.n(this.hiddenInputRef)}
-          type="time"
-          hidden
-          name=${this.name||this.id}
-          id=${this.id+"-input"}
-          .value=${this.value}
-          min=${c.o(this.min??void 0)}
-          max=${c.o(this.max??void 0)}
-          step=${c.o(this.step??void 0)}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          tabindex="-1"
-        />
-      </div>
-    `}render(){return a.b`
-      <pkt-input-wrapper
-        label="${this.label}"
-        ?disabled=${this.disabled}
-        ?fullwidth=${this.fullwidth}
-        ?hasError=${this.hasError}
-        ?inline=${this.inline}
-        ?optionalTag=${this.optionalTag}
-        ?required=${this.required}
-        ?requiredTag=${this.requiredTag}
-        useWrapper=${this.useWrapper}
-        .ariaDescribedBy=${this.ariaDescribedBy}
-        .errorMessage=${this.errorMessage}
-        .forId="${this.id+"-hours"}"
-        .helptext=${this.helptext}
-        .helptextDropdown=${this.helptextDropdown}
-        .helptextDropdownButton=${this.helptextDropdownButton}
-        .optionalText=${this.optionalText}
-        .requiredText=${this.requiredText}
-        .tagText=${this.tagText}
-      >
-        <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>
-    `}};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);
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./timepicker-BIfE7KKJ.cjs`);exports.PktTimepicker=e.t;