@oslokommune/punkt-elements 19.15.3 → 19.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -0
- package/dist/{accordion-BlsqYbJf.js → accordion-B0zAUNUV.js} +5 -5
- package/dist/{accordion-DukAa2ED.cjs → accordion-Cx-Gh3hc.cjs} +1 -1
- package/dist/{alert-CuXM6TnC.cjs → alert-BRZDpVMt.cjs} +1 -1
- package/dist/{alert-Xt26J9yX.js → alert-JnRrtTOW.js} +5 -5
- package/dist/{async-directive-yh8hG41Q.js → async-directive-C4LocQwR.js} +2 -2
- package/dist/{backlink-ogvv493Y.js → backlink-D8Rv46lA.js} +3 -3
- package/dist/{breadcrumbs-53QVnTFP.js → breadcrumbs-ybOBe_op.js} +2 -2
- package/dist/{button-BFG-7bDB.cjs → button-Ca_V13cQ.cjs} +1 -1
- package/dist/{button-DhCqyX4D.js → button-ChdHZYBF.js} +5 -5
- package/dist/{calendar-CtWc545R.js → calendar-BQCjUQvP.js} +7 -11
- package/dist/{calendar-5XCeDtZX.cjs → calendar-CFTrX0C5.cjs} +2 -2
- package/dist/{card-Diivw_vm.cjs → card-COseC8ZL.cjs} +1 -1
- package/dist/{card-DCc3wfUb.js → card-DSTEL8Kv.js} +6 -6
- package/dist/{checkbox-BDwOYcNM.js → checkbox-CKYNnLDh.js} +5 -9
- package/dist/{checkbox-BwI9QNSh.cjs → checkbox-DkFswqr-.cjs} +2 -2
- package/dist/{checkbox-group-Bum7k828.js → checkbox-group-1ghi5uHp.js} +3 -3
- package/dist/{checkbox-group-BLurd7sf.cjs → checkbox-group-lcxR3cYR.cjs} +1 -1
- package/dist/{class-map-Bf-QzUpN.js → class-map-BkEYw5uE.js} +1 -1
- package/dist/combobox-CaWnlvTX.cjs +139 -0
- package/dist/{combobox-C7tUHbG4.js → combobox-iXYiaWbN.js} +63 -96
- package/dist/components/index.d.ts +1 -0
- package/dist/components/input-wrapper/index.d.ts +1 -0
- package/dist/components/input-wrapper/input-wrapper.d.ts +13 -6
- package/dist/{consent-DBYZaCTp.cjs → consent-CxcKuGi9.cjs} +1 -1
- package/dist/{consent-BUS6GEUu.js → consent-D2nfauO8.js} +3 -3
- package/dist/converters-CW6SN0TT.cjs +1 -0
- package/dist/{converters-CkjLSYpa.js → converters-CYgQrWVm.js} +138 -141
- package/dist/{datepicker-CJLcIDVk.js → datepicker-DTcow1ih.js} +15 -25
- package/dist/{datepicker-DmZi4CNk.cjs → datepicker-Da8SfyVG.cjs} +3 -3
- package/dist/{dialog-polyfill.esm-B-g35ove.cjs → dialog-polyfill.esm-CW51hN2p.cjs} +1 -1
- package/dist/{dialog-polyfill.esm-DHSvqor8.js → dialog-polyfill.esm-D39dWbRt.js} +2 -2
- package/dist/{directive-helpers-CwxFepWh.js → directive-helpers-BAinC437.js} +1 -1
- package/dist/{element-DBugHPKM.js → element-ckeMVgMz.js} +1 -1
- package/dist/{element-with-slot-CVmm0_IE.js → element-with-slot-C0bH0T0H.js} +27 -38
- package/dist/element-with-slot-DkyaNnm0.cjs +1 -0
- package/dist/{fileupload-DehKWas6.js → fileupload-BNAQ9tNR.js} +16 -23
- package/dist/{fileupload-A_suUEPU.cjs → fileupload-Cb1c7ul0.cjs} +3 -3
- package/dist/{footer-C6ajmlq2.cjs → footer-Box90zhr.cjs} +1 -1
- package/dist/{footer-L2vhQTAS.js → footer-D2RpIbsD.js} +4 -4
- package/dist/{header-BzAPmAsZ.cjs → header-CvER8wo6.cjs} +2 -2
- package/dist/{header-C6xhv3Ib.js → header-Cwr995oK.js} +13 -13
- package/dist/{header-menu-F3tZZ5vO.js → header-menu-CsL4DZE2.js} +5 -5
- package/dist/{header-menu-Cz7G7Q2R.cjs → header-menu-D-wOwG1V.cjs} +1 -1
- package/dist/{heading-BluavR6A.cjs → heading-D4Kkb6-N.cjs} +1 -1
- package/dist/{heading-y72aIgB8.js → heading-DhTyaJms.js} +2 -2
- package/dist/{helptext-Dujce_W9.js → helptext-DN0jjgVu.js} +4 -4
- package/dist/{helptext-Bdv80rcs.cjs → helptext-p0nwJsyf.cjs} +1 -1
- package/dist/{icon-Bao96Zb8.js → icon-CLMJYuTL.js} +1 -1
- package/dist/{if-defined-O59_I-e-.js → if-defined-D18nY_K_.js} +1 -1
- package/dist/{input-element-mTphzs9b.js → input-element-0yYtRu0p.js} +3 -3
- package/dist/{input-element-BjnKPikY.cjs → input-element-BOi7rBbw.cjs} +1 -1
- package/dist/input-wrapper-4PTk8aX3.cjs +62 -0
- package/dist/{input-wrapper-xRJo_iVf.js → input-wrapper-BSjQc4Vx.js} +29 -197
- package/dist/{link-sO401Ieh.js → link-39EvU2ng.js} +5 -5
- package/dist/{link-CRLAhYi0.cjs → link-Dj6SbcaD.cjs} +1 -1
- package/dist/{linkcard-DnZgMzqL.cjs → linkcard-BoQIfci8.cjs} +1 -1
- package/dist/{linkcard-DdmGxzAP.js → linkcard-K9vvKg1u.js} +4 -4
- package/dist/{listbox-CvduK_YU.cjs → listbox-BbdUu-IV.cjs} +3 -3
- package/dist/{listbox-BDesthOp.js → listbox-DFd-1faX.js} +15 -16
- package/dist/{loader-Zo_VSsNw.cjs → loader-BRYL5kTN.cjs} +1 -1
- package/dist/{loader-Di5kHEQ4.js → loader-MoI2VRFr.js} +4 -4
- package/dist/{messagebox-CR59jv8N.cjs → messagebox-CiOQUt0C.cjs} +1 -1
- package/dist/{messagebox-CzaFlrYz.js → messagebox-Dr-k3pnZ.js} +4 -4
- package/dist/{modal-wEEmCcUx.cjs → modal-DGiq84MG.cjs} +1 -1
- package/dist/{modal-0D0paY70.js → modal-DbzEnZNF.js} +8 -8
- package/dist/option-group-element-CH0sgVIl.cjs +23 -0
- package/dist/{option-group-element-fpMneBWa.js → option-group-element-DC364Rw_.js} +3 -3
- package/dist/pkt-accordion.cjs +1 -1
- package/dist/pkt-accordion.js +1 -2
- package/dist/pkt-alert.cjs +1 -1
- package/dist/pkt-alert.js +1 -2
- package/dist/pkt-backlink.js +1 -2
- package/dist/pkt-breadcrumbs.js +1 -2
- package/dist/pkt-button.cjs +1 -1
- package/dist/pkt-button.js +1 -2
- package/dist/pkt-calendar.cjs +1 -1
- package/dist/pkt-calendar.js +1 -2
- package/dist/pkt-card.cjs +1 -1
- package/dist/pkt-card.js +1 -2
- package/dist/pkt-checkbox-group.cjs +1 -1
- package/dist/pkt-checkbox-group.js +1 -2
- package/dist/pkt-checkbox.cjs +1 -1
- package/dist/pkt-checkbox.js +1 -2
- package/dist/pkt-combobox.cjs +1 -1
- package/dist/pkt-combobox.js +1 -2
- package/dist/pkt-consent.cjs +1 -1
- package/dist/pkt-consent.js +1 -2
- package/dist/pkt-datepicker.cjs +1 -1
- package/dist/pkt-datepicker.js +1 -1
- package/dist/pkt-fileupload.cjs +1 -1
- package/dist/pkt-fileupload.js +1 -2
- package/dist/pkt-footer.cjs +1 -1
- package/dist/pkt-footer.js +1 -2
- package/dist/pkt-header-menu.cjs +1 -1
- package/dist/pkt-header-menu.js +1 -2
- package/dist/pkt-header.cjs +1 -1
- package/dist/pkt-header.js +1 -2
- package/dist/pkt-heading.cjs +1 -1
- package/dist/pkt-heading.js +1 -2
- package/dist/pkt-helptext.cjs +1 -1
- package/dist/pkt-helptext.js +1 -2
- package/dist/pkt-icon.js +1 -2
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +37 -37
- package/dist/pkt-input-wrapper.cjs +1 -1
- package/dist/pkt-input-wrapper.js +1 -2
- package/dist/pkt-link.cjs +1 -1
- package/dist/pkt-link.js +1 -2
- package/dist/pkt-linkcard.cjs +1 -1
- package/dist/pkt-linkcard.js +1 -2
- package/dist/pkt-listbox.cjs +1 -1
- package/dist/pkt-listbox.js +1 -2
- package/dist/pkt-loader.cjs +1 -1
- package/dist/pkt-loader.js +1 -2
- package/dist/pkt-messagebox.cjs +1 -1
- package/dist/pkt-messagebox.js +1 -2
- package/dist/pkt-modal.cjs +1 -1
- package/dist/pkt-modal.js +1 -2
- package/dist/{pkt-options-controller-CHosj1Oo.js → pkt-options-controller-BikFfGcZ.js} +1 -1
- package/dist/{pkt-options-controller-139UsV4h.cjs → pkt-options-controller-D1sKTkbR.cjs} +1 -1
- package/dist/pkt-progressbar.js +1 -2
- package/dist/pkt-radio-group.cjs +1 -1
- package/dist/pkt-radio-group.js +1 -2
- package/dist/pkt-radiobutton.cjs +1 -1
- package/dist/pkt-radiobutton.js +1 -2
- package/dist/pkt-searchinput.js +1 -2
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.js +1 -2
- package/dist/pkt-tabs.cjs +1 -1
- package/dist/pkt-tabs.js +1 -2
- package/dist/pkt-tag.cjs +1 -1
- package/dist/pkt-tag.js +1 -2
- package/dist/pkt-textarea.cjs +1 -1
- package/dist/pkt-textarea.js +1 -2
- package/dist/pkt-textinput.cjs +1 -1
- package/dist/pkt-textinput.js +1 -2
- package/dist/pkt-timepicker.cjs +1 -1
- package/dist/pkt-timepicker.js +1 -2
- package/dist/{progressbar-DZHiq7B0.js → progressbar-t0zgEke0.js} +5 -5
- package/dist/{radio-group-BmJ3kcba.js → radio-group-DJikniZi.js} +3 -3
- package/dist/{radio-group-Q75EtJzu.cjs → radio-group-XCYKqoLD.cjs} +1 -1
- package/dist/{radiobutton-DwDErNo5.cjs → radiobutton-DgkML7sd.cjs} +1 -1
- package/dist/{radiobutton-BK-V6Itu.js → radiobutton-PYQKVnNQ.js} +4 -4
- package/dist/{ref-y_5qv9vU.js → ref-D4OwQYdf.js} +2 -2
- package/dist/{repeat-CV9S4zya.js → repeat-BGbBqnfz.js} +2 -2
- package/dist/{scroll-lock-BALd8hF9.js → scroll-lock-CR-g54ai.js} +1 -1
- package/dist/{scroll-lock-B46ur0FF.cjs → scroll-lock-x0VxhKWZ.cjs} +1 -1
- package/dist/{searchinput-Bkcr3Fby.js → searchinput-BzYifHBf.js} +4 -4
- package/dist/{select-ByPSk9WT.js → select-CorofYxz.js} +21 -21
- package/dist/{select-CCY2_EbI.cjs → select-D8TC1msV.cjs} +14 -14
- package/dist/shared-types/icon.d.ts +2 -0
- package/dist/shared-types/index.d.ts +3 -1
- package/dist/shared-types/input-wrapper.d.ts +59 -0
- package/dist/{tabs-R1Jzzj3-.cjs → tabs-B63J6MXb.cjs} +2 -2
- package/dist/{tabs-DBW3P90Z.js → tabs-DDakCTkY.js} +7 -15
- package/dist/{tag-BMtnaJ1A.cjs → tag-6IPe9bwQ.cjs} +1 -1
- package/dist/{tag-uVXp7uP-.js → tag-BPvGZcKf.js} +5 -5
- package/dist/{textarea-DB7FMtTf.js → textarea-BZCUHjEj.js} +19 -19
- package/dist/{textarea-D9RWiR6u.cjs → textarea-BiCZBjOe.cjs} +10 -10
- package/dist/{textinput-l31MdBd4.cjs → textinput-BZPGcxZV.cjs} +12 -12
- package/dist/{textinput-Djl_yr1D.js → textinput-D_oEaI41.js} +19 -19
- package/dist/{timepicker-Bw8zkwV9.cjs → timepicker-C0d92R8u.cjs} +12 -12
- package/dist/{timepicker-D_gNCZ2v.js → timepicker-JBOeZg-7.js} +24 -32
- package/package.json +2 -2
- package/src/components/index.ts +1 -0
- package/src/components/input-wrapper/index.ts +1 -0
- package/src/components/input-wrapper/input-wrapper.ts +36 -17
- package/src/components/input-wrapper/wrapper-parity.test.ts +4 -2
- package/dist/combobox-BsXDULXd.cjs +0 -139
- package/dist/converters-BJ9Fe0kW.cjs +0 -1
- package/dist/element-with-slot-CcJPCLgn.cjs +0 -1
- package/dist/input-wrapper-BEmV0DGo.cjs +0 -62
- package/dist/option-group-element-A2cOZRWA.cjs +0 -23
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-CcJPCLgn.cjs");require("./icon-jPhyZD1z.cjs");const i=require("./if-defined-CiML3MTM.cjs"),a=require("./ref-CB7e9nMY.cjs"),o=require("./input-element-BjnKPikY.cjs"),s=require("./input-wrapper-BEmV0DGo.cjs");var c=e=>/^\d{2}:\d{2}$/.test(e)&&parseInt(e.slice(0,2),10)<=23&&parseInt(e.slice(3),10)<=59,l=e=>{let[t,n]=e.split(`:`).map(Number);return t*60+n},u=e=>e?Math.max(1,Math.round(e/60)):1,d=(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)},f=e=>{let t=u(e);return Array.from({length:Math.floor(60/t)},(e,n)=>n*t)},p=(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`)}},m=class extends o.t{constructor(...e){super(...e),this.hiddenInputRef=a.t(),this.hoursInputRef=a.t(),this.minutesInputRef=a.t(),this.buttonRef=a.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()}}}get inputRef(){return this.hiddenInputRef}manageValidity(e){let t=this.hoursInputRef.value;if(!t)return;let r=this.pktStrings.get(`validation`);if(this.required&&!this.value){this.internals.setValidity({valueMissing:!0},r.valueMissing,t),this._setAriaInvalid(!0);return}if(!this.value){this.internals.setValidity({}),this._setAriaInvalid(!1);return}let i=l(this.value),a=u(this.step);if(this.min&&i<l(String(this.min))){this.internals.setValidity({rangeUnderflow:!0},n.t(r.rangeUnderflowMin,{min:String(this.min)}),t),this._setAriaInvalid(!0);return}if(this.max&&i>l(String(this.max))){this.internals.setValidity({rangeOverflow:!0},n.t(r.rangeOverflowMax,{max:String(this.max)}),t),this._setAriaInvalid(!0);return}if(this.step&&i%a!==0){let e=a===60?r.timeStepMismatchHour:a===30?r.timeStepMismatchHalfHour:n.t(r.timeStepMismatch,{step:`${a}, ${a*2}, ${a*3}`});this.internals.setValidity({stepMismatch:!0},e,t),this._setAriaInvalid(!0);return}this.internals.setValidity({}),this._setAriaInvalid(!1)}_describedBy(){return s.r({id:`${this.id}-hours`,hasHelptext:!!this.helptext||this.hasSlotContent(`helptext`),ariaDescribedby:this.ariaDescribedby})}_setAriaInvalid(e){if(!this.touched&&e)return;let t=this.hoursInputRef.value,n=this.minutesInputRef.value;if(e)t?.setAttribute(`aria-invalid`,`true`),n?.setAttribute(`aria-invalid`,`true`);else{if(this.hasError)return;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.add(`pkt-timepicker`),this.classList.toggle(`pkt-timepicker--stepper`,this.stepArrows),this.classList.toggle(`pkt-timepicker--fullwidth`,this.fullwidth),this.classList.toggle(`pkt-timepicker--medium`,this.inputSize===`medium`),this.classList.toggle(`pkt-timepicker--small`,this.inputSize===`small`),this.classList.toggle(`pkt-timepicker--xsmall`,this.inputSize===`xsmall`),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=c(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 u(this.step)}get _hourOptions(){return d(this.min,this.max)}get _minuteOptions(){return f(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=p(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._`
|
|
1
|
+
const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-DkyaNnm0.cjs");require("./icon-jPhyZD1z.cjs");const i=require("./input-wrapper-4PTk8aX3.cjs"),a=require("./if-defined-CiML3MTM.cjs"),o=require("./ref-CB7e9nMY.cjs"),s=require("./input-element-BOi7rBbw.cjs");var c=e=>/^\d{2}:\d{2}$/.test(e)&&parseInt(e.slice(0,2),10)<=23&&parseInt(e.slice(3),10)<=59,l=e=>{let[t,n]=e.split(`:`).map(Number);return t*60+n},u=e=>e?Math.max(1,Math.round(e/60)):1,d=(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)},f=e=>{let t=u(e);return Array.from({length:Math.floor(60/t)},(e,n)=>n*t)},p=(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`)}},m=class extends s.t{constructor(...e){super(...e),this.hiddenInputRef=o.t(),this.hoursInputRef=o.t(),this.minutesInputRef=o.t(),this.buttonRef=o.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()}}}get inputRef(){return this.hiddenInputRef}manageValidity(e){let t=this.hoursInputRef.value;if(!t)return;let r=this.pktStrings.get(`validation`);if(this.required&&!this.value){this.internals.setValidity({valueMissing:!0},r.valueMissing,t),this._setAriaInvalid(!0);return}if(!this.value){this.internals.setValidity({}),this._setAriaInvalid(!1);return}let i=l(this.value),a=u(this.step);if(this.min&&i<l(String(this.min)))this.internals.setValidity({rangeUnderflow:!0},n.t(r.rangeUnderflowMin,{min:String(this.min)}),t),this._setAriaInvalid(!0);else if(this.max&&i>l(String(this.max)))this.internals.setValidity({rangeOverflow:!0},n.t(r.rangeOverflowMax,{max:String(this.max)}),t),this._setAriaInvalid(!0);else if(this.step&&i%a!==0){let e=a===60?r.timeStepMismatchHour:a===30?r.timeStepMismatchHalfHour:n.t(r.timeStepMismatch,{step:`${a}, ${a*2}, ${a*3}`});this.internals.setValidity({stepMismatch:!0},e,t),this._setAriaInvalid(!0)}else this.internals.setValidity({}),this._setAriaInvalid(!1)}_describedBy(){return i.r({id:`${this.id}-hours`,hasHelptext:!!this.helptext||this.hasSlotContent(`helptext`),ariaDescribedby:this.ariaDescribedby})}_setAriaInvalid(e){if(!this.touched&&e)return;let t=this.hoursInputRef.value,n=this.minutesInputRef.value;if(e)t?.setAttribute(`aria-invalid`,`true`),n?.setAttribute(`aria-invalid`,`true`);else{if(this.hasError)return;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.add(`pkt-timepicker`),this.classList.toggle(`pkt-timepicker--stepper`,this.stepArrows),this.classList.toggle(`pkt-timepicker--fullwidth`,this.fullwidth),this.classList.toggle(`pkt-timepicker--medium`,this.inputSize===`medium`),this.classList.toggle(`pkt-timepicker--small`,this.inputSize===`small`),this.classList.toggle(`pkt-timepicker--xsmall`,this.inputSize===`xsmall`),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=c(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 u(this.step)}get _hourOptions(){return d(this.min,this.max)}get _minuteOptions(){return f(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=p(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._`
|
|
2
2
|
<button
|
|
3
3
|
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})}
|
|
4
4
|
type="button"
|
|
@@ -38,7 +38,7 @@ const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),
|
|
|
38
38
|
${this._minuteOptions.map(e=>this._renderOption(e,`minute`))}
|
|
39
39
|
</div>
|
|
40
40
|
</div>
|
|
41
|
-
`}_renderContainer(){let t=this.pktStrings.get(`timepicker`).hours,n=this.pktStrings.get(`timepicker`).minutes,r=this.label?`${t}, ${this.label}`:t,
|
|
41
|
+
`}_renderContainer(){let t=this.pktStrings.get(`timepicker`).hours,n=this.pktStrings.get(`timepicker`).minutes,r=this.label?`${t}, ${this.label}`:t,i=this.label?`${n}, ${this.label}`:n;return e._`
|
|
42
42
|
<div
|
|
43
43
|
class="pkt-input__container pkt-input__container--${this.inputSize}"
|
|
44
44
|
@click=${e=>{e.target.closest(`button, input`)||this.hoursInputRef.value?.focus()}}
|
|
@@ -58,7 +58,7 @@ const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),
|
|
|
58
58
|
</button>
|
|
59
59
|
`:e.h}
|
|
60
60
|
<input
|
|
61
|
-
${
|
|
61
|
+
${o.n(this.hoursInputRef)}
|
|
62
62
|
type="text"
|
|
63
63
|
inputmode="numeric"
|
|
64
64
|
maxlength="2"
|
|
@@ -73,7 +73,7 @@ const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),
|
|
|
73
73
|
role="spinbutton"
|
|
74
74
|
aria-invalid=${this.hasError?`true`:e.h}
|
|
75
75
|
aria-errormessage=${this.hasError?`${this.id}-hours-error`:e.h}
|
|
76
|
-
aria-describedby=${
|
|
76
|
+
aria-describedby=${a.t(this._describedBy())}
|
|
77
77
|
aria-valuemin="0"
|
|
78
78
|
aria-valuemax="23"
|
|
79
79
|
aria-valuenow=${this._hours===``?e.h:this._hours}
|
|
@@ -86,7 +86,7 @@ const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),
|
|
|
86
86
|
/>
|
|
87
87
|
<span class="pkt-timepicker__separator">:</span>
|
|
88
88
|
<input
|
|
89
|
-
${
|
|
89
|
+
${o.n(this.minutesInputRef)}
|
|
90
90
|
type="text"
|
|
91
91
|
inputmode="numeric"
|
|
92
92
|
maxlength="2"
|
|
@@ -97,11 +97,11 @@ const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),
|
|
|
97
97
|
data-max="59"
|
|
98
98
|
.value=${this._minutes}
|
|
99
99
|
placeholder="––"
|
|
100
|
-
aria-label=${
|
|
100
|
+
aria-label=${i}
|
|
101
101
|
role="spinbutton"
|
|
102
102
|
aria-invalid=${this.hasError?`true`:e.h}
|
|
103
103
|
aria-errormessage=${this.hasError?`${this.id}-hours-error`:e.h}
|
|
104
|
-
aria-describedby=${
|
|
104
|
+
aria-describedby=${a.t(this._describedBy())}
|
|
105
105
|
aria-valuemin="0"
|
|
106
106
|
aria-valuemax="59"
|
|
107
107
|
aria-valuenow=${this._minutes===``?e.h:this._minutes}
|
|
@@ -119,7 +119,7 @@ const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),
|
|
|
119
119
|
></pkt-icon>`:e.h}
|
|
120
120
|
${!this.hidePicker&&!this.stepArrows?e._`
|
|
121
121
|
<button
|
|
122
|
-
${
|
|
122
|
+
${o.n(this.buttonRef)}
|
|
123
123
|
class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this.inputSize} pkt-timepicker__button"
|
|
124
124
|
type="button"
|
|
125
125
|
aria-label=${this.pktStrings.get(`timepicker`).openPicker}
|
|
@@ -150,15 +150,15 @@ const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),
|
|
|
150
150
|
</button>
|
|
151
151
|
`:e.h}
|
|
152
152
|
<input
|
|
153
|
-
${
|
|
153
|
+
${o.n(this.hiddenInputRef)}
|
|
154
154
|
type="time"
|
|
155
155
|
hidden
|
|
156
156
|
name=${this.name||this.id}
|
|
157
157
|
id=${this.id+`-input`}
|
|
158
158
|
.value=${this.value}
|
|
159
|
-
min=${
|
|
160
|
-
max=${
|
|
161
|
-
step=${
|
|
159
|
+
min=${a.t(this.min??void 0)}
|
|
160
|
+
max=${a.t(this.max??void 0)}
|
|
161
|
+
step=${a.t(this.step??void 0)}
|
|
162
162
|
?required=${this.required}
|
|
163
163
|
?disabled=${this.isDisabled}
|
|
164
164
|
tabindex="-1"
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { _ as e, d as t, h as n, l as r, n as i, u as a } from "./element-
|
|
2
|
-
import { t as o } from "./class-map-
|
|
1
|
+
import { _ as e, d as t, h as n, l as r, n as i, u as a } from "./element-ckeMVgMz.js";
|
|
2
|
+
import { t as o } from "./class-map-BkEYw5uE.js";
|
|
3
3
|
import { t as s } from "./format-BTeSVkED.js";
|
|
4
|
-
import { n as c } from "./element-with-slot-
|
|
5
|
-
import "./icon-
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import { t as f } from "./
|
|
9
|
-
import {
|
|
4
|
+
import { n as c } from "./element-with-slot-C0bH0T0H.js";
|
|
5
|
+
import "./icon-CLMJYuTL.js";
|
|
6
|
+
import { r as l } from "./input-wrapper-BSjQc4Vx.js";
|
|
7
|
+
import { t as u } from "./if-defined-D18nY_K_.js";
|
|
8
|
+
import { n as d, t as f } from "./ref-D4OwQYdf.js";
|
|
9
|
+
import { t as p } from "./input-element-0yYtRu0p.js";
|
|
10
10
|
//#region ../../shared-utils/timepicker/time-utils.ts
|
|
11
11
|
var m = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && parseInt(e.slice(3), 10) <= 59, h = (e) => {
|
|
12
12
|
let [t, n] = e.split(":").map(Number);
|
|
@@ -23,9 +23,9 @@ var m = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
|
|
|
23
23
|
hours: String(i).padStart(2, "0"),
|
|
24
24
|
minutes: String(a).padStart(2, "0")
|
|
25
25
|
};
|
|
26
|
-
}, b = class extends
|
|
26
|
+
}, b = class extends p {
|
|
27
27
|
constructor(...e) {
|
|
28
|
-
super(...e), this.hiddenInputRef =
|
|
28
|
+
super(...e), this.hiddenInputRef = f(), this.hoursInputRef = f(), this.minutesInputRef = f(), this.buttonRef = f(), 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) => {
|
|
29
29
|
this.contains(e.target) || this._closePopup();
|
|
30
30
|
}, this._handleComponentFocusIn = () => {
|
|
31
31
|
this._hasFocus || (this._hasFocus = !0, this.onFocus());
|
|
@@ -164,23 +164,15 @@ var m = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
|
|
|
164
164
|
return;
|
|
165
165
|
}
|
|
166
166
|
let r = h(this.value), i = g(this.step);
|
|
167
|
-
if (this.min && r < h(String(this.min))) {
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
}
|
|
171
|
-
if (this.max && r > h(String(this.max))) {
|
|
172
|
-
this.internals.setValidity({ rangeOverflow: !0 }, s(n.rangeOverflowMax, { max: String(this.max) }), t), this._setAriaInvalid(!0);
|
|
173
|
-
return;
|
|
174
|
-
}
|
|
175
|
-
if (this.step && r % i !== 0) {
|
|
167
|
+
if (this.min && r < h(String(this.min))) this.internals.setValidity({ rangeUnderflow: !0 }, s(n.rangeUnderflowMin, { min: String(this.min) }), t), this._setAriaInvalid(!0);
|
|
168
|
+
else if (this.max && r > h(String(this.max))) this.internals.setValidity({ rangeOverflow: !0 }, s(n.rangeOverflowMax, { max: String(this.max) }), t), this._setAriaInvalid(!0);
|
|
169
|
+
else if (this.step && r % i !== 0) {
|
|
176
170
|
let e = i === 60 ? n.timeStepMismatchHour : i === 30 ? n.timeStepMismatchHalfHour : s(n.timeStepMismatch, { step: `${i}, ${i * 2}, ${i * 3}` });
|
|
177
171
|
this.internals.setValidity({ stepMismatch: !0 }, e, t), this._setAriaInvalid(!0);
|
|
178
|
-
|
|
179
|
-
}
|
|
180
|
-
this.internals.setValidity({}), this._setAriaInvalid(!1);
|
|
172
|
+
} else this.internals.setValidity({}), this._setAriaInvalid(!1);
|
|
181
173
|
}
|
|
182
174
|
_describedBy() {
|
|
183
|
-
return
|
|
175
|
+
return l({
|
|
184
176
|
id: `${this.id}-hours`,
|
|
185
177
|
hasHelptext: !!this.helptext || this.hasSlotContent("helptext"),
|
|
186
178
|
ariaDescribedby: this.ariaDescribedby
|
|
@@ -353,7 +345,7 @@ var m = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
|
|
|
353
345
|
</button>
|
|
354
346
|
` : n}
|
|
355
347
|
<input
|
|
356
|
-
${
|
|
348
|
+
${d(this.hoursInputRef)}
|
|
357
349
|
type="text"
|
|
358
350
|
inputmode="numeric"
|
|
359
351
|
maxlength="2"
|
|
@@ -368,7 +360,7 @@ var m = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
|
|
|
368
360
|
role="spinbutton"
|
|
369
361
|
aria-invalid=${this.hasError ? "true" : n}
|
|
370
362
|
aria-errormessage=${this.hasError ? `${this.id}-hours-error` : n}
|
|
371
|
-
aria-describedby=${
|
|
363
|
+
aria-describedby=${u(this._describedBy())}
|
|
372
364
|
aria-valuemin="0"
|
|
373
365
|
aria-valuemax="23"
|
|
374
366
|
aria-valuenow=${this._hours === "" ? n : this._hours}
|
|
@@ -383,7 +375,7 @@ var m = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
|
|
|
383
375
|
/>
|
|
384
376
|
<span class="pkt-timepicker__separator">:</span>
|
|
385
377
|
<input
|
|
386
|
-
${
|
|
378
|
+
${d(this.minutesInputRef)}
|
|
387
379
|
type="text"
|
|
388
380
|
inputmode="numeric"
|
|
389
381
|
maxlength="2"
|
|
@@ -398,7 +390,7 @@ var m = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
|
|
|
398
390
|
role="spinbutton"
|
|
399
391
|
aria-invalid=${this.hasError ? "true" : n}
|
|
400
392
|
aria-errormessage=${this.hasError ? `${this.id}-hours-error` : n}
|
|
401
|
-
aria-describedby=${
|
|
393
|
+
aria-describedby=${u(this._describedBy())}
|
|
402
394
|
aria-valuemin="0"
|
|
403
395
|
aria-valuemax="59"
|
|
404
396
|
aria-valuenow=${this._minutes === "" ? n : this._minutes}
|
|
@@ -418,7 +410,7 @@ var m = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
|
|
|
418
410
|
></pkt-icon>` : n}
|
|
419
411
|
${!this.hidePicker && !this.stepArrows ? e`
|
|
420
412
|
<button
|
|
421
|
-
${
|
|
413
|
+
${d(this.buttonRef)}
|
|
422
414
|
class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this.inputSize} pkt-timepicker__button"
|
|
423
415
|
type="button"
|
|
424
416
|
aria-label=${this.pktStrings.get("timepicker").openPicker}
|
|
@@ -449,15 +441,15 @@ var m = (e) => /^\d{2}:\d{2}$/.test(e) && parseInt(e.slice(0, 2), 10) <= 23 && p
|
|
|
449
441
|
</button>
|
|
450
442
|
` : n}
|
|
451
443
|
<input
|
|
452
|
-
${
|
|
444
|
+
${d(this.hiddenInputRef)}
|
|
453
445
|
type="time"
|
|
454
446
|
hidden
|
|
455
447
|
name=${this.name || this.id}
|
|
456
448
|
id=${this.id + "-input"}
|
|
457
449
|
.value=${this.value}
|
|
458
|
-
min=${
|
|
459
|
-
max=${
|
|
460
|
-
step=${
|
|
450
|
+
min=${u(this.min ?? void 0)}
|
|
451
|
+
max=${u(this.max ?? void 0)}
|
|
452
|
+
step=${u(this.step ?? void 0)}
|
|
461
453
|
?required=${this.required}
|
|
462
454
|
?disabled=${this.isDisabled}
|
|
463
455
|
tabindex="-1"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.17.0",
|
|
4
4
|
"description": "Komponentbiblioteket til Punkt, designsystem for Oslo kommune",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo kommune",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"engines": {
|
|
85
85
|
"node": "^22.19.0 || ^24.0.0 || ^26.0.0"
|
|
86
86
|
},
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "85027304cea63a12d61597a0b283cf33f0aaefdb"
|
|
88
88
|
}
|
package/src/components/index.ts
CHANGED
|
@@ -25,6 +25,7 @@ export { PktHelptext } from '@/components/helptext'
|
|
|
25
25
|
export { PktHeading } from '@/components/heading'
|
|
26
26
|
export { PktIcon } from '@/components/icon'
|
|
27
27
|
export { PktInputWrapper } from '@/components/input-wrapper'
|
|
28
|
+
export type { IPktInputWrapper } from '@/components/input-wrapper'
|
|
28
29
|
export { PktLink } from '@/components/link'
|
|
29
30
|
export { PktLinkCard } from '@/components/linkcard'
|
|
30
31
|
export { PktLoader } from '@/components/loader'
|
|
@@ -8,15 +8,20 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js'
|
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js'
|
|
9
9
|
import { ElementProps } from '@/types/typeUtils'
|
|
10
10
|
import { uuidish } from 'shared-utils/utils'
|
|
11
|
-
import {
|
|
11
|
+
import {
|
|
12
|
+
booleanishConverter,
|
|
13
|
+
INPUT_WRAPPER_DEFAULTS,
|
|
14
|
+
type Booleanish,
|
|
15
|
+
type IPktInputWrapperBase,
|
|
16
|
+
type TLayout,
|
|
17
|
+
type TPktCounterPosition,
|
|
18
|
+
type TPktInputSize,
|
|
19
|
+
} from 'shared-types'
|
|
12
20
|
import { FocusModalityController } from '@/controllers/focus-modality-controller'
|
|
13
|
-
import specs from 'componentSpecs/input-wrapper.json'
|
|
14
21
|
import '@/components/helptext'
|
|
15
22
|
import '@/components/icon'
|
|
16
23
|
import '@/components/alert'
|
|
17
24
|
|
|
18
|
-
type TCounterPosition = 'top' | 'bottom'
|
|
19
|
-
type TInputWrapperSize = 'small' | 'medium' | 'xsmall'
|
|
20
25
|
type Props = ElementProps<
|
|
21
26
|
PktInputWrapper,
|
|
22
27
|
| 'forId'
|
|
@@ -44,7 +49,19 @@ type Props = ElementProps<
|
|
|
44
49
|
> &
|
|
45
50
|
IPktStringsProps<'forms' | 'validation'>
|
|
46
51
|
|
|
47
|
-
export
|
|
52
|
+
export interface IPktInputWrapper extends Omit<
|
|
53
|
+
IPktInputWrapperBase,
|
|
54
|
+
'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'role' | 'useWrapper'
|
|
55
|
+
> {
|
|
56
|
+
helptext?: string | null
|
|
57
|
+
helptextDropdown?: string | null
|
|
58
|
+
/** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
|
|
59
|
+
helptextDropdownButton?: string | null
|
|
60
|
+
role?: string | null
|
|
61
|
+
useWrapper?: Booleanish
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
export class PktInputWrapper extends PktElementWithSlot<Props> implements IPktInputWrapper {
|
|
48
65
|
/**
|
|
49
66
|
* Element attributes
|
|
50
67
|
*/
|
|
@@ -54,31 +71,33 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
|
|
|
54
71
|
@property({ type: String }) helptextDropdown: string | null = null
|
|
55
72
|
/** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
|
|
56
73
|
@property({ type: String }) helptextDropdownButton: string | null = null
|
|
57
|
-
@property({ type: Boolean }) counter: boolean =
|
|
58
|
-
@property({ type: Number }) counterCurrent: number =
|
|
74
|
+
@property({ type: Boolean }) counter: boolean = INPUT_WRAPPER_DEFAULTS.counter
|
|
75
|
+
@property({ type: Number }) counterCurrent: number = INPUT_WRAPPER_DEFAULTS.counterCurrent
|
|
59
76
|
@property({ type: Number }) counterMaxLength: number = 0
|
|
60
77
|
|
|
78
|
+
/** @deprecated Ikke i bruk av Punkt-komponentene, og vises ikke for skjermlesere. */
|
|
61
79
|
@property({ type: String }) counterError: string | null = null
|
|
62
|
-
@property({ type: String, reflect: false }) counterPosition:
|
|
63
|
-
|
|
80
|
+
@property({ type: String, reflect: false }) counterPosition: TPktCounterPosition =
|
|
81
|
+
INPUT_WRAPPER_DEFAULTS.counterPosition
|
|
82
|
+
@property({ type: Boolean }) optionalTag: boolean = INPUT_WRAPPER_DEFAULTS.optionalTag
|
|
64
83
|
/** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
|
|
65
84
|
@property({ type: String }) optionalText?: string
|
|
66
|
-
@property({ type: Boolean }) requiredTag: boolean =
|
|
85
|
+
@property({ type: Boolean }) requiredTag: boolean = INPUT_WRAPPER_DEFAULTS.requiredTag
|
|
67
86
|
/** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
|
|
68
87
|
@property({ type: String }) requiredText?: string
|
|
69
88
|
@property({ type: String }) tagText: string | null = null
|
|
70
|
-
@property({ type: Boolean }) hasError: boolean =
|
|
89
|
+
@property({ type: Boolean }) hasError: boolean = INPUT_WRAPPER_DEFAULTS.hasError
|
|
71
90
|
@property({ type: String }) errorMessage: string = ''
|
|
72
|
-
@property({ type: Boolean }) disabled: boolean =
|
|
73
|
-
@property({ type: Boolean }) inline: boolean =
|
|
91
|
+
@property({ type: Boolean }) disabled: boolean = INPUT_WRAPPER_DEFAULTS.disabled
|
|
92
|
+
@property({ type: Boolean }) inline: boolean = INPUT_WRAPPER_DEFAULTS.inline
|
|
74
93
|
@property({ type: String }) ariaDescribedby: string | undefined = undefined
|
|
75
|
-
@property({ type: Boolean }) hasFieldset: boolean =
|
|
76
|
-
@property({ type: String }) layout: TLayout =
|
|
94
|
+
@property({ type: Boolean }) hasFieldset: boolean = INPUT_WRAPPER_DEFAULTS.hasFieldset
|
|
95
|
+
@property({ type: String }) layout: TLayout = INPUT_WRAPPER_DEFAULTS.layout
|
|
77
96
|
@property({ type: String, reflect: true }) role: string | null = null
|
|
78
97
|
@property({ type: Boolean, reflect: true, converter: booleanishConverter })
|
|
79
|
-
useWrapper: Booleanish =
|
|
98
|
+
useWrapper: Booleanish = INPUT_WRAPPER_DEFAULTS.useWrapper
|
|
80
99
|
@property({ type: String, attribute: 'input-wrapper-size' })
|
|
81
|
-
size:
|
|
100
|
+
size: TPktInputSize = INPUT_WRAPPER_DEFAULTS.size
|
|
82
101
|
|
|
83
102
|
protected updated(changedProperties: PropertyValues): void {
|
|
84
103
|
super.updated(changedProperties)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { readFileSync } from 'node:fs'
|
|
2
2
|
import { join } from 'node:path'
|
|
3
3
|
import { describe, expect, test } from 'vitest'
|
|
4
|
-
import wrapperSpec from 'componentSpecs/input-wrapper.
|
|
4
|
+
import wrapperSpec from 'componentSpecs/input-wrapper.spec'
|
|
5
5
|
|
|
6
6
|
const ROOT = join(__dirname, '../../../../..')
|
|
7
7
|
|
|
@@ -129,7 +129,9 @@ const wrapperCall = (source: string, framework: 'elements' | 'react') => {
|
|
|
129
129
|
const forwards = (block: string, prop: string) =>
|
|
130
130
|
new RegExp(`[.?]?${prop}\\s*=`).test(block) || new RegExp(`\\b${prop}\\b`).test(block)
|
|
131
131
|
|
|
132
|
-
const wrapperProps = Object.keys(wrapperSpec.props).filter(
|
|
132
|
+
const wrapperProps = Object.keys(wrapperSpec.props ?? {}).filter(
|
|
133
|
+
(p) => !NOT_A_FORWARDED_PROP.has(p),
|
|
134
|
+
)
|
|
133
135
|
|
|
134
136
|
describe('input-wrapper: paritet mellom rammeverk', () => {
|
|
135
137
|
for (const [name, paths] of Object.entries(COMPONENTS)) {
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
const e=require("./element-C6WTyJFE.cjs"),t=require("./class-map-Bh6toDeV.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-CcJPCLgn.cjs");require("./icon-jPhyZD1z.cjs");const i=require("./if-defined-CiML3MTM.cjs"),a=require("./ref-CB7e9nMY.cjs");require("./tag-BMtnaJ1A.cjs");const o=require("./repeat-CnnigVcj.cjs"),s=require("./listbox-CvduK_YU.cjs"),c=require("./input-element-BjnKPikY.cjs"),l=require("./pkt-options-controller-139UsV4h.cjs"),u=require("./input-wrapper-BEmV0DGo.cjs");var d={multiple:!1,typeahead:!1,includeSearch:!1,allowUserInput:!1,displayValueAs:`label`,inputSize:`medium`,disabled:!1,hasError:!1,required:!1,requiredTag:!1,optionalTag:!1,fullwidth:!1,inline:!1,useWrapper:!0},f=(e,t,n)=>{switch(e){case`,`:return n?`addValue`:null;case`Enter`:return`addValue`;case`Tab`:case`ArrowDown`:return t?null:`focusListbox`;case`Escape`:return`closeOptions`;default:return null}},p=(e,t,n,r,i)=>{if(!e)return{action:`none`,value:null};let a=s.i(n,e);return!t.includes(e)&&!a?r?{action:`addUserValue`,value:e}:i?{action:`none`,value:null}:{action:`removeValue`,value:t[0]}:a&&!t.includes(a.value)?{action:`selectOption`,value:a.value}:{action:`none`,value:null}},m=(e,t,n,r,i)=>e.trim().toLowerCase()?{...s.c(e,t,n,r),shouldRemoveValue:!1,shouldResetInput:!1}:{addValueText:null,userInfoMessage:``,shouldRemoveValue:!i&&!!t[0],shouldResetInput:!0},h=(e,t,n)=>{let r=s.i(t,e);return n===`label`&&r?.label?r.label:e},g={markOptionSelected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!0;break}}},markOptionDeselected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!1;break}}},markAllSelected(e){for(let t of e)t.selected=!0},markAllDeselected(e){for(let t of e)t.selected=!1},removeUserAddedOptions(e){return e.filter(e=>!e.userAdded)}},_={parseOptionsFromSlot(e){let t=[];return e.forEach(e=>{if(!e.textContent&&!e.getAttribute(`value`))return;let n={value:e.getAttribute(`value`)||e.textContent||``,label:e.textContent||e.getAttribute(`value`)||``};e.getAttribute(`data-prefix`)&&(n.prefix=e.getAttribute(`data-prefix`)||void 0),e.getAttribute(`tagskincolor`)&&(n.tagSkinColor=e.getAttribute(`tagskincolor`)),e.getAttribute(`description`)&&(n.description=e.getAttribute(`description`)||void 0),n.fulltext=s.r(n),t.push(n)}),t}},v={cloneOptions(e){return Array.isArray(e)?e.map(e=>({...e})):[]},syncOptionsWithValues(e,t){let n=[...t];return e.forEach(e=>{e.value&&!e.label&&(e.label=e.value),e.selected&&!n.includes(e.value)&&n.push(e.value),e.fulltext=s.r(e),e.selected=e.selected||n.includes(e.value)}),{options:e,newValues:n}},mergeWithUserAdded(e,t,n){return[...t.filter(e=>e?.userAdded&&n.includes(e.value)).filter(t=>!(Array.isArray(e)?e:[]).some(e=>e.value===t.value)),...e]}},y=class extends c.t{constructor(){super(),this.value=``,this.options=[],this.defaultOptions=[],this.allowUserInput=d.allowUserInput,this.typeahead=d.typeahead,this.includeSearch=d.includeSearch,this.searchPlaceholder=null,this.multiple=d.multiple,this.maxlength=null,this.displayValueAs=d.displayValueAs,this.tagPlacement=null,this.isOpen=!1,this._options=[],this._value=[],this._isOptionsOpen=!1,this._userInfoMessage=``,this._messageValue=null,this._addValueText=null,this._maxIsReached=!1,this._search=``,this._inputFocus=!1,this._skipInputTab=!1,this._optionsFromSlot=!1,this._lastSlotGeneration=0,this._suppressNextOpen=!1,this.inputRef=a.t(),this.triggerRef=a.t(),this.listboxRef=a.t(),this._pendingDispatchFrom=null,this.optionsController=new l.t(this)}get _hasTextInput(){return this.typeahead||this.allowUserInput}get _selectionDescription(){if(!(!this.multiple||this._value.length===0))return`${this._value.length} valgt`}focusTrigger(){this._hasTextInput?this.inputRef.value?.focus():this.triggerRef.value?.focus()}focusAfterCommit(){this._skipInputTab=!0;let e=this.inputRef.value;e&&e.type!==`hidden`&&e.setAttribute(`tabindex`,`-1`),this.triggerRef.value?.focus()}restoreInputTab(){this._skipInputTab=!1}parseValue(){return this.parseToValues(this.value)}parseToValues(e){return Array.isArray(e)?this.multiple?e:e.length>0?[e[0]]:[]:e&&this.multiple?e.split(`,`):e?[e]:[]}updateMaxReached(){this._maxIsReached=s.l(this._value.length,this.maxlength)}syncPublicValue(){let e=this.multiple?this._value.join(`,`):this._value[0]||``;e!==(Array.isArray(this.value)?this.value.join(`,`):String(this.value||``))&&(this.value=e)}dispatchValueChange(e){let t=this._value;if(e?.join(`,`)!==t.join(`,`)){let e=this.multiple?[...t]:t[0]||``;this.onChange(e)}else t.length===0&&e&&e.length>0&&this.clearInputValue()}onChange(e){this.touched=!0,super.onChange(e)}valueChanged(){}};e.n([e.u({type:String,reflect:!0})],y.prototype,`value`,void 0),e.n([e.u({type:Array})],y.prototype,`options`,void 0),e.n([e.u({type:Array,attribute:`default-options`})],y.prototype,`defaultOptions`,void 0),e.n([e.u({type:Boolean,attribute:`allow-user-input`})],y.prototype,`allowUserInput`,void 0),e.n([e.u({type:Boolean})],y.prototype,`typeahead`,void 0),e.n([e.u({type:Boolean,attribute:`include-search`})],y.prototype,`includeSearch`,void 0),e.n([e.u({type:String,attribute:`search-placeholder`})],y.prototype,`searchPlaceholder`,void 0),e.n([e.u({type:Boolean})],y.prototype,`multiple`,void 0),e.n([e.u({type:Number})],y.prototype,`maxlength`,void 0),e.n([e.u({type:String,attribute:`display-value-as`})],y.prototype,`displayValueAs`,void 0),e.n([e.u({type:String,attribute:`tag-placement`})],y.prototype,`tagPlacement`,void 0),e.n([e.u({type:Boolean,attribute:`open`})],y.prototype,`isOpen`,void 0),e.n([e.l()],y.prototype,`_options`,void 0),e.n([e.l()],y.prototype,`_value`,void 0),e.n([e.l()],y.prototype,`_isOptionsOpen`,void 0),e.n([e.l()],y.prototype,`_userInfoMessage`,void 0),e.n([e.l()],y.prototype,`_messageValue`,void 0),e.n([e.l()],y.prototype,`_addValueText`,void 0),e.n([e.l()],y.prototype,`_maxIsReached`,void 0),e.n([e.l()],y.prototype,`_search`,void 0),e.n([e.l()],y.prototype,`_inputFocus`,void 0),e.n([e.l()],y.prototype,`_skipInputTab`,void 0);var b=class extends y{toggleValue(e){if(this.isDisabled)return;this.touched=!0,this._userInfoMessage=``,this._addValueText=null;let t=s.i(this.options,e)?.value||null,n=this._value.includes(e||t||``),r=!!t,i=this._options.find(t=>t.value===e)?.disabled||!1,a=!e?.trim(),o=!this.multiple,c=this.multiple,l=s.l(this._value.length,this.maxlength),u=!1,d=!0,f=``,p=null,m=``;i||(!r&&this.allowUserInput&&!a?(this.addNewUserValue(e),f=`valueAdded`,u=c):!r&&!this.allowUserInput?(o&&this._value[0]&&this.removeValue(this._value[0]),d=!1,u=!0,f=`noResults`):n?(this.removeValue(t),u=!0,o&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``)):a&&o?(this.removeAllSelected(),u=!0):o?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),u=!1,f=`valueSelected`,p=this._hasTextInput?h(t||``,this.options,this.displayValueAs):s.s(s.i(this.options,t),this.displayValueAs)):c&&!l?(this.setSelected(t),u=!0):c&&l?(f=`maxSelected`,d=!1,m=e):(o&&this.removeAllSelected(),f=`noValidValue`,d=!1,u=!0,m=e),this._isOptionsOpen=u,u||window.setTimeout(()=>{this.focusAfterCommit()},0),this._search=m||``,this.resetComboboxInput(d),this._userInfoMessage=f,this._messageValue=p,c&&this.updateMaxReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&s.l(this._value.length,this.maxlength)){this._userInfoMessage=`maxSelected`;return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,g.markOptionSelected(this._options,e),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(t=>t!==e);let t=s.i(this.options,e);t&&(g.markOptionDeselected(this.options,e),t.userAdded?(this._options=[...this._options.filter(t=>t.value!==e)],this.options=[...this.options.filter(t=>t.value!==e)]):this._options.some(t=>t.value===e)?this.refreshOptionsFromValue():this._options=[...this._options,t])}addAllOptions(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage=`tooManySelected`;return}this._value=this._options.map(e=>e.value),g.markAllSelected(this._options),this.requestUpdate()}}removeAllSelected(){this._value=[],g.markAllDeselected(this._options),this._options=g.removeUserAddedOptions(this._options),this.requestUpdate()}addValue(){let e=this.inputRef.value?.value.trim()||``;if(this._search=e,e&&this._value.includes(e)){this.resetComboboxInput(!0),this._userInfoMessage=`alreadySelected`;return}this.toggleValue(e)}removeValue(e){this._value=this.multiple?this._value.filter(t=>t!==e):[],this.removeSelected(e)}addNewUserValue(e){if(!e||e.trim()===``)return;if(!this.multiple)this._value[0]&&this.removeSelected(this._value[0]),this._value=[e];else if(!s.i(this.options,e)){if(s.l(this._value.length,this.maxlength))return;this._value=[...this._value,e]}let t={value:e,label:e,userAdded:!0,selected:!0};this.options=[t,...this.options],this._options=[t,...this._options],this.resetComboboxInput(!0),this.multiple||(this._isOptionsOpen=!1,window.setTimeout(()=>{this.focusAfterCommit()},0)),this.requestUpdate()}refreshOptionsFromValue(){let e=v.cloneOptions(this.options);e.forEach(e=>e.selected=this._value.includes(e.value)),this._options=v.syncOptionsWithValues(e,this._value).options}resetComboboxInput(e=!0){this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!==`hidden`&&e&&(this._search=``,this.multiple?this.inputRef.value.value=``:(this.inputRef.value.value=this._value[0]?h(this._value[0],this.options,this.displayValueAs):``,this._userInfoMessage=``)),this.refreshOptionsFromValue()}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();let t=this._value[this._value.length-1];t&&this.removeSelected(t),this.updateMaxReached()}},x=class extends b{handleInput(e){if(e.stopPropagation(),e.stopImmediatePropagation(),this.isDisabled)return;this.touched=!0;let t=e.target;if(this._search=t.value,this.checkForMatches(),this.typeahead){if(this._search){let{filtered:n,suggestion:r}=s.o(this.options,this._search);this._options=n,e.inputType!==`deleteContentBackward`&&r?.label&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(t.value=r.label,window.setTimeout(()=>t.setSelectionRange(this._search.length,t.value.length),0),t.selectionDirection=`backward`)}else this.refreshOptionsFromValue()}}handleFocus(){if(!this.isDisabled){if(this._skipInputTab=!1,this._suppressNextOpen){this._suppressNextOpen=!1,this._inputFocus=!0,this.requestUpdate();return}!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=h(this._value[0],this.options,this.displayValueAs)),this._inputFocus=!0,this._search=``,this.refreshOptionsFromValue(),this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleCloseOptions(){this._isOptionsOpen=!1,this._hasTextInput&&(this._suppressNextOpen=!0),this.focusTrigger()}handleFocusOut(e){if(this.isDisabled||!this._isOptionsOpen)return;let t=e.relatedTarget;t?.closest(`pkt-combobox`)?.id===this.id||e.target?.classList?.contains(`pkt-combobox__value`)||t===this.inputRef.value||t===this.triggerRef.value||this.closeAndProcessInput()}closeAndProcessInput(){if(this._inputFocus=!1,this._addValueText=null,this._userInfoMessage=``,this._search=``,this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=this.inputRef.value.value;if(!this.multiple){if(!e)this._value[0]&&this.removeSelected(this._value[0]);else{let t=s.i(this.options,e);t&&t.value!==this._value[0]?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t.value)):!t&&this.allowUserInput&&(this._value[0]&&this.removeSelected(this._value[0]),this.addNewUserValue(e))}}else if(e!==``){let{action:t,value:n}=p(e,this._value,this.options,this.allowUserInput,this.multiple);switch(t){case`addUserValue`:this.addNewUserValue(n);break;case`selectOption`:this.setSelected(n);break;case`removeValue`:this.removeValue(n)}}!this.multiple&&this._value[0]?this.inputRef.value.value=h(this._value[0],this.options,this.displayValueAs):this.inputRef.value.value=``}this._isOptionsOpen=!1,this.onBlur()}handleBlur(){this._inputFocus=!1,this.onBlur()}handleInputClick(e){if(this.isDisabled){e.preventDefault(),e.stopImmediatePropagation();return}this._hasTextInput?(this.inputRef.value?.focus(),this.requestUpdate()):(e.stopImmediatePropagation(),e.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen&&this.listboxRef.value?.focusFirstOrSelectedOption())}handlePlaceholderClick(e){this.isDisabled||(e.stopPropagation(),this._hasTextInput&&this.inputRef.value?(this.inputRef.value.focus(),this._inputFocus=!0,this.requestUpdate()):(this._isOptionsOpen=!this._isOptionsOpen,this.requestUpdate()))}handleSelectOnlyKeydown(e){if(!this.isDisabled)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this._isOptionsOpen?this._isOptionsOpen=!1:(this._isOptionsOpen=!0,this.listboxRef.value?.focusFirstOrSelectedOption());break;case`Escape`:this._isOptionsOpen&&=(e.preventDefault(),!1);break;case`Home`:case`End`:e.preventDefault(),this._isOptionsOpen||=!0,this.listboxRef.value?.focusFirstOrSelectedOption();break;case`ArrowLeft`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.focusTag(this._value.length-1));break;case`Backspace`:case`Delete`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.removeSelected(this._value[this._value.length-1]))}}handleOptionToggled(e){this.toggleValue(e.detail)}handleSearch(e){e.stopPropagation(),this._search=e.detail.toLowerCase(),this.checkForMatches()}handleInputKeydown(e){if(e.key===`Backspace`){let t=!this.inputRef.value?.value;!this._search&&t&&this.multiple&&this._value.length>0&&this.removeLastValue(e);return}if(e.key===`ArrowLeft`&&this.multiple&&this._value.length>0){let t=this.inputRef.value;if(t&&t.selectionStart===0&&!t.value){e.preventDefault(),this.focusTag(this._value.length-1);return}}let t=f(e.key,e.shiftKey,this.multiple);if(t&&!(e.key===`Tab`&&!this._isOptionsOpen)){if(t===`focusListbox`&&e.key===`Tab`&&!this.listboxRef.value?.querySelector(`[role="option"]:not([data-disabled]), [data-type="new-option"]`)){this.closeAndProcessInput();return}switch(e.preventDefault(),t){case`addValue`:this.addValue();break;case`focusListbox`:this.listboxRef.value?.focusFirstOrSelectedOption();break;case`closeOptions`:this._isOptionsOpen=!1}}}handleTagRemove(e){this.removeSelected(e),this._hasTextInput&&this.inputRef.value&&(this._inputFocus=!0,this.inputRef.value.focus(),this.requestUpdate())}getInsideTags(){return Array.from(this.querySelectorAll(`.pkt-combobox__input .pkt-combobox__tag-list pkt-tag`))}focusTag(e){let t=this.getInsideTags();t.forEach((t,n)=>{t.buttonTabindex=n===e?0:-1}),(t[e]?.querySelector(`button`))?.focus()}resetTagTabindices(){this.getInsideTags().forEach(e=>{e.buttonTabindex=-1})}handleTagKeydown(e,t){e.stopPropagation();let n=()=>{this.resetTagTabindices(),this._hasTextInput&&this.inputRef.value?this.inputRef.value.focus():this.triggerRef.value?.focus()};switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&this.focusTag(t-1);break;case`ArrowRight`:e.preventDefault(),t<this._value.length-1?this.focusTag(t+1):n();break;case`Backspace`:case`Delete`:e.preventDefault();{let e=this._value[t],r=t>=this._value.length-1?t-1:t;this.removeSelected(e),r>=0?(this.requestUpdate(),this.updateComplete.then(()=>this.focusTag(r))):n()}break;case`Tab`:this.resetTagTabindices();break;case`Escape`:e.preventDefault(),n()}}checkForMatches(){let e=m(this.inputRef.value?.value||this._search||``,this._value,this.options,this.allowUserInput,this.multiple);if(e.shouldRemoveValue&&this.removeValue(this._value[0]),e.shouldResetInput){this.resetComboboxInput(!1);return}this._addValueText=e.addValueText,this._userInfoMessage=e.userInfoMessage}},S=class extends x{constructor(...e){super(...e),this.handleBodyClick=e=>{this._isOptionsOpen&&!this.contains(e.target)&&this.closeAndProcessInput()}}connectedCallback(){if(super.connectedCallback(),document?.body.addEventListener(`click`,this.handleBodyClick),this._options=[],this.defaultOptions&&this.defaultOptions.length){let e=this.options?.filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=v.cloneOptions(this.options)}if(this.optionsController?.nodes&&this.optionsController.nodes.length){let e=_.parseOptionsFromSlot(this.optionsController.nodes);e.length&&(this.options=[...e],this._options=[...e],this._optionsFromSlot=!0,this._lastSlotGeneration=this.optionsController.generation)}}disconnectedCallback(){super.disconnectedCallback(),document?.body.removeEventListener(`click`,this.handleBodyClick)}firstUpdated(e){this.defaultValue!==null&&!this.value&&(this.value=this.defaultValue),super.firstUpdated(e)}willUpdate(e){if(this._optionsFromSlot&&this.optionsController){let e=this.optionsController.generation;if(e!==this._lastSlotGeneration){this._lastSlotGeneration=e;let t=_.parseOptionsFromSlot(this.optionsController.nodes),n=this._options.filter(e=>e.userAdded);this.options=[...n,...t]}}if(super.willUpdate(e),e.has(`isOpen`)&&(this._isOptionsOpen=this.isOpen),e.has(`defaultOptions`)&&this.defaultOptions.length){let e=(Array.isArray(this.options)?this.options:[]).filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=v.cloneOptions(this.options)}let t=e.has(`value`),n=e.has(`_value`);if(t){let e=[...this._value],t=this.parseValue();t.join(`,`)!==this._value.join(`,`)&&(this._value=t,this._options.forEach(e=>e.selected=t.includes(e.value)),this._options=[...this._options]),this._pendingDispatchFrom??=e}else n&&(this._pendingDispatchFrom??=e.get(`_value`)??[]);if(e.has(`defaultValue`)&&this.defaultValue!=null&&!this._value.length){let e=this.parseToValues(this.defaultValue);e.length&&(this._pendingDispatchFrom??=[...this._value],this._value=e,this._options.forEach(t=>t.selected=e.includes(t.value)),this._options=[...this._options])}if(e.has(`options`)){let t=e.get(`options`)||this._options||[],n=v.mergeWithUserAdded(v.cloneOptions(this.options),t,this._value);this._options=n,n.length>this.options.length&&(this.options=n);let r=v.syncOptionsWithValues(this._options,this._value);this._options=r.options,r.newValues.length>this._value.length&&(this._pendingDispatchFrom??=[...this._value],this._value=r.newValues)}(t||n||e.has(`options`)||e.has(`defaultValue`))&&this.updateMaxReached(),this._pendingDispatchFrom&&this.syncPublicValue()}updated(e){if(this._pendingDispatchFrom){let e=this._pendingDispatchFrom;this._pendingDispatchFrom=null,this.dispatchValueChange(e)}if(e.has(`_search`)&&this.dispatchEvent(new CustomEvent(`search`,{detail:this._search,bubbles:!1})),!this._isOptionsOpen&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=!this.multiple&&this._value[0]?h(this._value[0],this.options,this.displayValueAs):``;this.inputRef.value.value!==e&&(this.inputRef.value.value=e)}this.classList.add(`pkt-combobox-component`),this.classList.toggle(`pkt-combobox-component--fullwidth`,!!this.fullwidth),super.updated(e)}formResetCallback(){this.touched=!1;let e=this.defaultValue||(this.multiple,``);this.value=e,this._value=this.parseValue(),this._options=this._options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this.options=this.options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this._search=``,this._isOptionsOpen=!1,this._userInfoMessage=``,this._addValueText=null,this._inputFocus=!1,this.updateMaxReached(),this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``),this.setFormValue(``),this.internals.ariaInvalid=`false`,this.requestUpdate()}attributeChangedCallback(e,t,n){if(e===`options`){this._options=v.cloneOptions(this.options);let e=v.syncOptionsWithValues(this._options,this._value);this._options=e.options,e.newValues.length>this._value.length&&(this._value=e.newValues),this._search=``}super.attributeChangedCallback(e,t,n)}render(){return e._`
|
|
2
|
-
<pkt-input-wrapper
|
|
3
|
-
${r.n(this,[`helptext`])}
|
|
4
|
-
.strings=${this.strings}
|
|
5
|
-
.size=${this.inputSize}
|
|
6
|
-
.label=${this.label}
|
|
7
|
-
.helptext=${this.helptext}
|
|
8
|
-
.helptextDropdown=${i.t(this.helptextDropdown)}
|
|
9
|
-
.helptextDropdownButton=${i.t(this.helptextDropdownButton)}
|
|
10
|
-
?fullwidth=${this.fullwidth}
|
|
11
|
-
?counter=${this.effectiveCounter(!!this.multiple&&this.maxlength!=null)}
|
|
12
|
-
.counterCurrent=${this._value.length}
|
|
13
|
-
.counterMaxLength=${this.maxlength??0}
|
|
14
|
-
?hasError=${this.hasError}
|
|
15
|
-
?inline=${this.inline}
|
|
16
|
-
?disabled=${this.isDisabled}
|
|
17
|
-
.errorMessage=${this.errorMessage}
|
|
18
|
-
?optionalTag=${this.optionalTag}
|
|
19
|
-
.optionalText=${this.optionalText}
|
|
20
|
-
?requiredTag=${this.requiredTag}
|
|
21
|
-
.requiredText=${this.requiredText}
|
|
22
|
-
.tagText=${this.tagText}
|
|
23
|
-
useWrapper=${this.useWrapper}
|
|
24
|
-
.forId=${this._hasTextInput?this.id+`-input`:this.id+`-combobox`}
|
|
25
|
-
?hasFieldset=${this.effectiveHasFieldset(!this._hasTextInput)}
|
|
26
|
-
class="pkt-combobox__wrapper"
|
|
27
|
-
@labelClick=${this.handleInputClick}
|
|
28
|
-
>
|
|
29
|
-
<div class="pkt-combobox" @focusout=${this.handleFocusOut}>
|
|
30
|
-
<div
|
|
31
|
-
class=${t.t({"pkt-combobox__input":!0,[`pkt-combobox__input--${this.inputSize}`]:!0,"pkt-combobox__input--fullwidth":this.fullwidth,"pkt-combobox__input--open":this._isOptionsOpen,"pkt-combobox__input--error":this.hasError,"pkt-combobox__input--disabled":this.isDisabled})}
|
|
32
|
-
id=${i.t(this._hasTextInput?void 0:`${this.id}-combobox`)}
|
|
33
|
-
role=${i.t(this._hasTextInput?void 0:`combobox`)}
|
|
34
|
-
aria-expanded=${i.t(this._hasTextInput?void 0:this._isOptionsOpen?`true`:`false`)}
|
|
35
|
-
aria-controls=${i.t(this._hasTextInput?void 0:`${this.id}-listbox`)}
|
|
36
|
-
aria-haspopup=${i.t(this._hasTextInput?void 0:`listbox`)}
|
|
37
|
-
aria-describedby=${i.t(this._hasTextInput?void 0:this._describedBy())}
|
|
38
|
-
aria-labelledby=${i.t(this._hasTextInput?void 0:`${this.id}-combobox-label`)}
|
|
39
|
-
aria-activedescendant=${i.t(!this._hasTextInput&&this._isOptionsOpen&&this._value[0]&&s.i(this.options,this._value[0])?`${this.id}-listbox-${s.a(this._options,this._value[0])}`:void 0)}
|
|
40
|
-
aria-description=${i.t(this._selectionDescription||void 0)}
|
|
41
|
-
tabindex=${this._hasTextInput||this.isDisabled?`-1`:`0`}
|
|
42
|
-
@click=${this.handleInputClick}
|
|
43
|
-
@keydown=${this._hasTextInput?e.h:this.handleSelectOnlyKeydown}
|
|
44
|
-
@blur=${this.restoreInputTab}
|
|
45
|
-
${a.n(this.triggerRef)}
|
|
46
|
-
>
|
|
47
|
-
${!this._hasTextInput&&this.placeholder&&(!this._value.length||this.multiple&&this.tagPlacement==`outside`)&&!this._inputFocus?e._`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
|
|
48
|
-
>${this.placeholder}</span
|
|
49
|
-
>`:this.tagPlacement===`outside`?e.h:this.renderSingleOrMultipleValues()}
|
|
50
|
-
${this.renderInputField()}
|
|
51
|
-
<pkt-icon
|
|
52
|
-
class=${t.t({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
|
|
53
|
-
name="chevron-thin-down"
|
|
54
|
-
aria-hidden="true"
|
|
55
|
-
></pkt-icon>
|
|
56
|
-
</div>
|
|
57
|
-
|
|
58
|
-
<pkt-listbox
|
|
59
|
-
id="${this.id}-listbox"
|
|
60
|
-
.options=${this._options}
|
|
61
|
-
.isOpen=${this._isOptionsOpen}
|
|
62
|
-
.searchPlaceholder=${this.searchPlaceholder}
|
|
63
|
-
.label="Liste: ${this.label||``}"
|
|
64
|
-
?disabled=${this.isDisabled}
|
|
65
|
-
?include-search=${this.includeSearch}
|
|
66
|
-
?is-multi-select=${this.multiple}
|
|
67
|
-
?allow-user-input=${this.allowUserInput&&!this._maxIsReached}
|
|
68
|
-
?max-is-reached=${this._maxIsReached}
|
|
69
|
-
.customUserInput=${i.t(this._addValueText)}
|
|
70
|
-
.userMessage=${this._userInfoMessage?n.t(this.pktStrings.get(`combobox`)[this._userInfoMessage],{value:this._messageValue??``}):``}
|
|
71
|
-
@search=${this.handleSearch}
|
|
72
|
-
@option-toggle=${this.handleOptionToggled}
|
|
73
|
-
@select-all=${this.addAllOptions}
|
|
74
|
-
@close-options=${this.handleCloseOptions}
|
|
75
|
-
@tab-close=${()=>this.closeAndProcessInput()}
|
|
76
|
-
.searchValue=${this._search||null}
|
|
77
|
-
.maxLength=${this.maxlength||0}
|
|
78
|
-
${a.n(this.listboxRef)}
|
|
79
|
-
></pkt-listbox>
|
|
80
|
-
</div>
|
|
81
|
-
|
|
82
|
-
${this.tagPlacement===`outside`&&this.multiple?e._`<div class="pkt-combobox__tags-outside">
|
|
83
|
-
${this.renderSingleOrMultipleValues()}
|
|
84
|
-
</div>`:e.h}
|
|
85
|
-
</pkt-input-wrapper>
|
|
86
|
-
`}_describedBy(){return u.r({id:this._hasTextInput?`${this.id}-input`:`${this.id}-combobox`,hasHelptext:!!this.helptext||this.hasSlotContent(`helptext`),ariaDescribedby:this.ariaDescribedby})}renderInputField(){return this.typeahead||this.allowUserInput?e._`
|
|
87
|
-
<div class="pkt-combobox__input-div combobox__input">
|
|
88
|
-
<input
|
|
89
|
-
type="text"
|
|
90
|
-
id="${this.id}-input"
|
|
91
|
-
name=${(this.name||this.id)+`-input`}
|
|
92
|
-
placeholder=${i.t(!this._value.length||this.multiple&&this.tagPlacement===`outside`?this.placeholder:void 0)}
|
|
93
|
-
@input=${this.handleInput}
|
|
94
|
-
@change=${e=>{e.stopPropagation(),e.stopImmediatePropagation()}}
|
|
95
|
-
tabindex=${i.t(this._skipInputTab?`-1`:void 0)}
|
|
96
|
-
@keydown=${this.handleInputKeydown}
|
|
97
|
-
@focus=${this.handleFocus}
|
|
98
|
-
@blur=${this.handleBlur}
|
|
99
|
-
autocomplete="off"
|
|
100
|
-
role="combobox"
|
|
101
|
-
aria-expanded=${this._isOptionsOpen?`true`:`false`}
|
|
102
|
-
aria-label=${i.t(this.label)}
|
|
103
|
-
aria-describedby=${i.t(this._describedBy())}
|
|
104
|
-
aria-autocomplete=${this.typeahead?`both`:this.allowUserInput?`list`:`none`}
|
|
105
|
-
aria-controls="${this.id}-listbox"
|
|
106
|
-
aria-activedescendant=${i.t(this._isOptionsOpen&&this._value[0]&&s.i(this.options,this._value[0])?`${this.id}-listbox-${s.a(this._options,this._value[0])}`:void 0)}
|
|
107
|
-
aria-description=${i.t(this._selectionDescription||void 0)}
|
|
108
|
-
${a.n(this.inputRef)}
|
|
109
|
-
/>
|
|
110
|
-
</div>
|
|
111
|
-
`:e._`
|
|
112
|
-
<input
|
|
113
|
-
type="hidden"
|
|
114
|
-
id="${this.id}-input"
|
|
115
|
-
name=${(this.name||this.id)+`-input`}
|
|
116
|
-
.value=${this._value.join(`,`)}
|
|
117
|
-
${a.n(this.inputRef)}
|
|
118
|
-
/>
|
|
119
|
-
`}renderSingleOrMultipleValues(){if(!this.multiple&&this._hasTextInput)return e.h;let t=!this.multiple,n=this.renderValueTag(s.i(this.options,this._value[0])),r=this.tagPlacement===`outside`,i=e._`
|
|
120
|
-
<ul role="list" class="pkt-combobox__tag-list">
|
|
121
|
-
${o.t(this._value,e=>e,(t,n)=>{let i=s.i(this.options,t),a=i?.tagSkinColor;return e._`
|
|
122
|
-
<li
|
|
123
|
-
role="listitem"
|
|
124
|
-
@click=${r?e.h:e=>e.stopPropagation()}
|
|
125
|
-
@mousedown=${r?e.h:e=>e.preventDefault()}
|
|
126
|
-
>
|
|
127
|
-
<pkt-tag
|
|
128
|
-
skin=${a||`blue`}
|
|
129
|
-
?closeTag=${!this.isDisabled}
|
|
130
|
-
.buttonTabindex=${r?void 0:-1}
|
|
131
|
-
@close=${()=>this.handleTagRemove(t)}
|
|
132
|
-
@keydown=${r?e.h:e=>this.handleTagKeydown(e,n)}
|
|
133
|
-
>
|
|
134
|
-
${this.renderValueTag(i)}
|
|
135
|
-
</pkt-tag>
|
|
136
|
-
</li>
|
|
137
|
-
`})}
|
|
138
|
-
</ul>
|
|
139
|
-
`;return!t&&this._value.length===0?e.h:t?n:i}renderValueTag(t){if(!t)return``;switch(this.displayValueAs){case`prefixAndValue`:return e._`<span class="pkt-combobox__value">${t.prefix||``} ${t.value}</span>`;case`value`:return e._`<span class="pkt-combobox__value">${t.value}</span>`;default:return e._`<span class="pkt-combobox__value">${t.label||t.value}</span>`}}};try{e.d(`pkt-combobox`)(S)}catch{console.warn(`Forsøker å definere <pkt-combobox>, men den er allerede definert`)}var C=S;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return C}});
|