@oslokommune/punkt-elements 16.6.2 → 16.7.0

package/dist/pkt-timepicker.cjs

@@ -0,0 +1,188 @@
+"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`
+      <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})}
+        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,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">
+        ${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"}
+                ?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
+          ${u.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=${l=>{l.target.select(),l.stopImmediatePropagation()}}
+        />
+        <span class="pkt-timepicker__separator">:</span>
+        <input
+          ${u.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=${l=>{l.target.select(),l.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
+                ${u.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
+          ${u.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">${S.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);