@oslokommune/punkt-elements 12.31.2 → 12.32.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/dist/{alert-BDxxRqgi.cjs → alert-D5G5UJuo.cjs} +1 -1
- package/dist/{alert-D0S57u0r.js → alert-gERpVuB7.js} +6 -6
- package/dist/alert.d.ts +32 -0
- package/dist/{backlink-CzpB-ih9.js → backlink-DdNgqA56.js} +2 -2
- package/dist/{backlink-Dn4DfWVR.cjs → backlink-Q2HTG9jm.cjs} +1 -1
- package/dist/backlink.d.ts +32 -0
- package/dist/{button-Beo3c7cx.cjs → button-BPyZeW73.cjs} +1 -1
- package/dist/{button-9NwGr-OS.js → button-rArIL0-j.js} +3 -3
- package/dist/button.d.ts +32 -0
- package/dist/{calendar-BbZNxsKY.js → calendar-1ryAEdX3.js} +4 -4
- package/dist/{calendar-CxBo98iI.cjs → calendar-2DqPLXdD.cjs} +1 -1
- package/dist/calendar.d.ts +32 -0
- package/dist/{card-DQfNKnKl.js → card-BbMBpvJt.js} +7 -7
- package/dist/{card-C63x_nll.cjs → card-ZX09f_ka.cjs} +1 -1
- package/dist/card.d.ts +32 -0
- package/dist/{checkbox-9Zjy_NU7.cjs → checkbox-BnDG6wIO.cjs} +1 -1
- package/dist/{checkbox-CzDpR6_8.js → checkbox-Ceui2TLp.js} +4 -4
- package/dist/checkbox.d.ts +32 -0
- package/dist/{class-map-DWtqmIRS.js → class-map-ChuDQU5C.js} +1 -1
- package/dist/{class-map-Dj5mbCUg.cjs → class-map-D4rXyUxT.cjs} +1 -1
- package/dist/combobox-DH-YlbNh.cjs +115 -0
- package/dist/combobox-DbO6I0GT.js +694 -0
- package/dist/combobox.d.ts +47 -0
- package/dist/{datepicker-CYUvRGhE.js → datepicker-8MOgQsyL.js} +144 -196
- package/dist/datepicker-BRH-59Q9.cjs +153 -0
- package/dist/datepicker.d.ts +32 -0
- package/dist/directive-helpers-D7XIyCQ_.js +45 -0
- package/dist/directive-helpers-mGjAtADc.cjs +5 -0
- package/dist/{element-CzFXQBoS.cjs → element-BBo3JZk5.cjs} +1 -1
- package/dist/{element-C7XjZtLU.js → element-G8JoS0Lj.js} +6 -0
- package/dist/{helptext-B9kxDc2b.cjs → helptext-B4Uc-d56.cjs} +2 -2
- package/dist/{helptext-CqnoPodd.js → helptext-Y4cSgTkd.js} +10 -10
- package/dist/helptext.d.ts +32 -0
- package/dist/{icon-BEUgV9Wo.js → icon-BJnwW0eh.js} +1 -1
- package/dist/{icon-BOKusjAA.cjs → icon-BTUCDPN5.cjs} +1 -1
- package/dist/icon.d.ts +32 -0
- package/dist/{if-defined-CpIkv1A4.cjs → if-defined-C1ZDVzYn.cjs} +1 -1
- package/dist/{if-defined-eRX4e5zO.js → if-defined-rCqT8Od1.js} +1 -1
- package/dist/index.d.ts +208 -14
- package/dist/input-element-AhnBdCb8.cjs +1 -0
- package/dist/{input-element-BK8UkQli.js → input-element-DM2uSYaW.js} +22 -19
- package/dist/input-wrapper-BdZxmQyO.cjs +52 -0
- package/dist/input-wrapper-DQmYzhcy.js +185 -0
- package/dist/input-wrapper.d.ts +32 -0
- package/dist/{link-D3U0Jkz8.js → link-C3lW3z8X.js} +5 -5
- package/dist/{link-1iq0Pmuf.cjs → link-DOVlsg2S.cjs} +1 -1
- package/dist/link.d.ts +32 -0
- package/dist/{linkcard-CRpo3tiw.js → linkcard-CvqqyHVW.js} +4 -4
- package/dist/{linkcard-2WzDJPZz.cjs → linkcard-DDD92XfD.cjs} +1 -1
- package/dist/linkcard.d.ts +32 -0
- package/dist/listbox-BTVnrHWv.cjs +95 -0
- package/dist/listbox-DX-Euxdm.js +360 -0
- package/dist/listbox.d.ts +47 -0
- package/dist/{loader-B1edLWTg.js → loader-BudoV0yd.js} +6 -6
- package/dist/{loader-DI74pe25.cjs → loader-Csq0Yd1k.cjs} +1 -1
- package/dist/loader.d.ts +32 -0
- package/dist/{messagebox-DQpEMkS2.cjs → messagebox-8GwnNqb0.cjs} +1 -1
- package/dist/{messagebox-KP-8-tA9.js → messagebox-D6uexEhg.js} +6 -6
- package/dist/messagebox.d.ts +32 -0
- package/dist/{modal-ytIJwfr3.cjs → modal-CLixB4Dz.cjs} +1 -1
- package/dist/{modal-kPX8nO_L.js → modal-DnYn2Rlg.js} +6 -6
- package/dist/modal.d.ts +32 -0
- package/dist/pkt-alert.cjs +1 -1
- package/dist/pkt-alert.js +1 -1
- package/dist/pkt-backlink.cjs +1 -1
- package/dist/pkt-backlink.js +1 -1
- package/dist/pkt-button.cjs +1 -1
- package/dist/pkt-button.js +1 -1
- package/dist/pkt-calendar.cjs +1 -1
- package/dist/pkt-calendar.js +1 -1
- package/dist/pkt-card.cjs +1 -1
- package/dist/pkt-card.js +1 -1
- package/dist/pkt-checkbox.cjs +1 -1
- package/dist/pkt-checkbox.js +1 -1
- package/dist/pkt-combobox.cjs +1 -0
- package/dist/pkt-combobox.js +6 -0
- package/dist/pkt-datepicker.cjs +1 -1
- package/dist/pkt-datepicker.js +1 -1
- package/dist/pkt-helptext.cjs +1 -1
- package/dist/pkt-helptext.js +1 -1
- package/dist/pkt-icon.cjs +1 -1
- package/dist/pkt-icon.js +1 -1
- package/dist/pkt-index.cjs +3 -3
- package/dist/pkt-index.js +45 -43
- package/dist/pkt-input-wrapper.cjs +1 -1
- package/dist/pkt-input-wrapper.js +1 -1
- package/dist/pkt-link.cjs +1 -1
- package/dist/pkt-link.js +1 -1
- package/dist/pkt-linkcard.cjs +1 -1
- package/dist/pkt-linkcard.js +1 -1
- package/dist/pkt-listbox.cjs +1 -0
- package/dist/pkt-listbox.js +6 -0
- package/dist/pkt-loader.cjs +1 -1
- package/dist/pkt-loader.js +1 -1
- package/dist/pkt-messagebox.cjs +1 -1
- package/dist/pkt-messagebox.js +1 -1
- package/dist/pkt-modal.cjs +1 -1
- package/dist/pkt-modal.js +1 -1
- package/dist/pkt-options-controller-BtU1zEtG.cjs +1 -0
- package/dist/pkt-options-controller-CZplGTgu.js +38 -0
- package/dist/pkt-progressbar.cjs +1 -1
- package/dist/pkt-progressbar.js +2 -2
- package/dist/pkt-radiobutton.cjs +1 -1
- package/dist/pkt-radiobutton.js +1 -1
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.js +1 -1
- package/dist/pkt-slot-controller-CqNvEpFd.cjs +1 -0
- package/dist/{pkt-slot-controller-Clbye6cM.js → pkt-slot-controller-D1DakVrU.js} +17 -7
- package/dist/pkt-tag.cjs +1 -1
- package/dist/pkt-tag.js +1 -1
- package/dist/pkt-textarea.cjs +1 -1
- package/dist/pkt-textarea.js +1 -1
- package/dist/pkt-textinput.cjs +1 -1
- package/dist/pkt-textinput.js +1 -1
- package/dist/{progressbar-B6A9UVXS.cjs → progressbar-BW_icNId.cjs} +1 -1
- package/dist/{progressbar-D0nxLqHu.js → progressbar-czvExwTL.js} +5 -5
- package/dist/progressbar.d.ts +32 -0
- package/dist/{radiobutton-BWyQgR_x.cjs → radiobutton-BeSuCrbp.cjs} +1 -1
- package/dist/{radiobutton-DLWjvLBO.js → radiobutton-DKo27Stm.js} +5 -5
- package/dist/radiobutton.d.ts +32 -0
- package/dist/ref-DsoUUoPU.cjs +9 -0
- package/dist/ref-cRTOoM4R.js +102 -0
- package/dist/repeat-CArTw6-s.js +61 -0
- package/dist/repeat-kruY8poV.cjs +5 -0
- package/dist/select-DxHhPEgD.js +118 -0
- package/dist/select-lvFnhEVg.cjs +49 -0
- package/dist/select.d.ts +32 -0
- package/dist/{state-HNj0_316.cjs → state-BILlRnrD.cjs} +1 -1
- package/dist/{state-CDQk0DFQ.js → state-gfUuUqVg.js} +1 -1
- package/dist/{tag-CmFcSdOV.js → tag-CWx1XsGR.js} +7 -7
- package/dist/{tag-BeLSOjNh.cjs → tag-DThwKsrg.cjs} +1 -1
- package/dist/tag.d.ts +32 -0
- package/dist/{textarea-BPqWCymU.js → textarea-BNNDbxxO.js} +18 -17
- package/dist/{textarea-VG-UTMLP.cjs → textarea-CDsLbogK.cjs} +6 -6
- package/dist/textarea.d.ts +32 -0
- package/dist/{textinput-CEP7QA3E.cjs → textinput-C3C088Ki.cjs} +5 -4
- package/dist/{textinput-VD74aGzx.js → textinput-M8I4dfoP.js} +25 -24
- package/dist/textinput.d.ts +32 -0
- package/package.json +3 -3
- package/src/components/combobox/combobox.ts +873 -0
- package/src/components/combobox/countrycodes.json +927 -0
- package/src/components/combobox/index.ts +6 -0
- package/src/components/datepicker/datepicker.ts +2 -0
- package/src/components/helptext/helptext.ts +1 -1
- package/src/components/index.ts +7 -0
- package/src/components/input-wrapper/input-wrapper.ts +42 -34
- package/src/components/listbox/index.ts +4 -0
- package/src/components/listbox/listbox.ts +474 -0
- package/src/components/select/select.ts +7 -0
- package/src/components/textinput/textinput.ts +3 -2
- package/dist/datepicker-FuAL0uNU.cjs +0 -155
- package/dist/input-element-Dtyuf6s8.cjs +0 -1
- package/dist/input-wrapper-Bo2_t6pA.cjs +0 -50
- package/dist/input-wrapper-DaZZq8c0.js +0 -172
- package/dist/pkt-slot-controller-Oc32unDk.cjs +0 -1
- package/dist/ref-2anvRHT4.cjs +0 -13
- package/dist/ref-DbOSDQbk.js +0 -143
- package/dist/select-CzuxXKll.js +0 -150
- package/dist/select-DZL6aa2s.cjs +0 -48
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
"use strict";const l=require("./element-BBo3JZk5.cjs"),c=require("./if-defined-C1ZDVzYn.cjs"),d=require("./state-BILlRnrD.cjs"),u=require("./ref-DsoUUoPU.cjs"),y=require("./class-map-D4rXyUxT.cjs"),I=require("./repeat-kruY8poV.cjs"),w=require("./input-element-AhnBdCb8.cjs"),$=require("./pkt-options-controller-BtU1zEtG.cjs"),O=require("./pkt-slot-controller-CqNvEpFd.cjs");require("./input-wrapper-BdZxmQyO.cjs");require("./icon-BTUCDPN5.cjs");require("./tag-DThwKsrg.cjs");require("./listbox-BTVnrHWv.cjs");const V="pkt-combobox",C=!0,R={name:{type:"string",name:"Navn",description:"Navn som brukes i skjema ved innsending"},id:{type:"string",name:"ID",description:"Unik ID for feltet"},label:{type:"string",name:"Etikett",description:"Tekst som vises over feltet"},placeholder:{name:"Hint",description:"Spesifiserer en kort hint som beskriver forventet verdi av feltet.",type:"string",required:!1},multiple:{type:"boolean",name:"Flervalg",default:!0,description:"Mulighet for å velge flere valg"},typeahead:{type:"boolean",name:"Typeahead",default:!0,description:"Mulighet for automatisk utfylling av feltet fra listen over valg"},includeSearch:{type:"boolean",name:"Inkluder søk",description:"Mulighet for å søke etter valg inni dropdown"},allowUserInput:{type:"boolean",name:"Brukervalgte verdier",description:"Mulighet for å skrive inn egne verdier"},displayValueAs:{type:["label","value","prefixAndValue"],name:"Visning av valgt verdi",description:"Hvordan valgt verdi vises i feltet",default:"label"},maxlength:{type:"number",name:"Maks lengde",description:"Maks antall valg dersom flervalg er aktivert"},tagPlacement:{type:["inside","outside"],name:"Plassering av tags",description:"Plassering av valgte verdier i feltet ved flervalg",default:"top"},value:{name:"Verdi",type:"string",description:"Valgt verdi. Streng ved enkelt valg, array av strenger ved flervalg."},helptext:{type:"string",name:"Hjelpetekst",description:"Hjelpetekst som vises over feltet"},helptextDropdown:{type:"string",name:"Utvidet hjelpetekst",description:"Hjelpetekst som vises over feltet"},helptextDropdownButton:{type:"string",name:"Knappetekst for hjelpetekst",description:"Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst",default:"Les mer"},disabled:{type:"boolean",name:"Deaktivert",description:"Feltet er deaktivert"},hasError:{type:"boolean",name:"Feil",description:"Feltet har en feil"},errorMessage:{type:"string",name:"Feilmelding",description:"Tekst som vises under feltet ved feil"},required:{type:"boolean",name:"Påkrevd",description:"Feltet må fylles ut"},requiredTag:{type:"boolean",name:"Påkrevd-merking",description:"Viser en merking som indikerer at feltet er påkrevd"},requiredText:{type:"string",name:"Påkrevd-tekst",description:"Tekst som vises i påkrevd-merkingen"},optionalTag:{type:"boolean",name:"Valgfritt-merking",description:"Viser en merking som indikerer at feltet er valgfritt"},optionalText:{type:"string",name:"Valgfritt-tekst",description:"Tekst som vises i valgfritt-merkingen"},fullwidth:{type:"boolean",name:"Full bredde",description:"Skal feltet ta opp hele bredden?"},options:{name:"Valg",type:"array",description:"Liste over valg som kan velges, om options sendes inn som array med objekter",default:[],previewDefault:[{value:"bfr",label:"Frogner"},{value:"bgo",label:"Gamle Oslo"},{value:"bgr",label:"Grorud"},{value:"bxx",label:"Andre bydeler"}],items:{type:"object",properties:{value:{type:"string",description:"Verdi som sendes ved valg"},label:{type:"string",description:"Tekst som vises for valget"},prefix:{type:"string",description:"Tekst som vises før valget"},description:{type:"string",description:"Beskrivelse av valget"},disabled:{type:"boolean",description:"Valget er deaktivert"},selected:{type:"boolean",description:"Valget er valgt"},tagSkinColor:{type:["blue","blue-dark","blue-light","green","red","yellow","beige","gray","grey"],description:"Farge på tag"}},required:["value"]}}},S={name:V,"css-class":"pkt-combobox",isElement:C,props:R};var T=Object.defineProperty,M=Object.getOwnPropertyDescriptor,o=(b,e,t,i)=>{for(var s=i>1?void 0:i?M(e,t):e,n=b.length-1,r;n>=0;n--)(r=b[n])&&(s=(i?r(e,t,s):r(s))||s);return i&&s&&T(e,t,s),s};exports.PktCombobox=class extends w.PktInputElement{constructor(){super(),this.helptextSlot=u.e(),this.value="",this.options=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder="",this.multiple=!1,this.maxlength=null,this.displayValueAs=S.props.displayValueAs.default,this.tagPlacement=null,this._options=[],this._isOptionsOpen=!1,this._value=[],this._userInfoMessage="",this._addValueText=null,this._maxIsReached=!1,this._search="",this._inputFocus=!1,this._editingSingleValue=!1,this.inputRef=u.e(),this.arrowRef=u.e(),this.listboxRef=u.e(),this.focusRef=u.e(),this.optionTagRef=u.e(),this.optionsController=new $.PktOptionsSlotController(this),this.slotController=new O.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){if(super.connectedCallback(),document&&document.body.addEventListener("click",e=>{this._isOptionsOpen&&!this.contains(e.target)&&this.handleFocusOut(e)}),this._options=[],this.optionsController.nodes.length){const e=[];this.optionsController.nodes.forEach(t=>{if(!t.textContent&&!t.getAttribute("value"))return null;const i={value:t.getAttribute("value")||t.textContent||"",label:t.textContent||t.getAttribute("value")||""};t.getAttribute("data-prefix")&&(i.prefix=t.getAttribute("data-prefix")||void 0),t.getAttribute("tagskincolor")&&(i.tagSkinColor=t.getAttribute("tagskincolor")),t.getAttribute("description")&&(i.description=t.getAttribute("description")||void 0),i.fulltext=i.value+i.label+(i.prefix||""),e.push(i)}),e.length&&(this.options=[...e],this._options=[...e])}}updated(e){e.has("_value")&&this.valueChanged(this._value,e.get("_value")),e.has("value")&&(this._value=Array.isArray(this.value)?this.value:this.value?this.value.split(","):[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]]),this.isMaxItemsReached()),e.has("options")&&this.options.length&&(this._options=this.options,this._options.forEach(t=>{t.fulltext=t.value+t.label+(t.prefix||""),t.selected=this._value.includes(t.value)})),e.has("_search")&&this.dispatchEvent(new CustomEvent("search",{detail:this._search,bubbles:!1})),super.updated(e)}attributeChangedCallback(e,t,i){e==="value"&&(this._value=Array.isArray(this.value)?this.value:this.value?this.value.split(","):[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]])),e==="options"&&(this._options=this.options,this._options.forEach(s=>{s.fulltext=s.value+s.label+(s.prefix||"")}),this._search=""),super.attributeChangedCallback(e,t,i)}render(){return l.x`
|
|
2
|
+
<pkt-input-wrapper
|
|
3
|
+
.label=${this.label}
|
|
4
|
+
.helptext=${this.helptext}
|
|
5
|
+
.helptextDropdown=${c.o(this.helptextDropdown)}
|
|
6
|
+
.helptextDropdownButton=${c.o(this.helptextDropdownButton)}
|
|
7
|
+
?fullwidth=${this.fullwidth}
|
|
8
|
+
?hasError=${this.hasError}
|
|
9
|
+
?inline=${this.inline}
|
|
10
|
+
?disabled=${this.disabled}
|
|
11
|
+
.errorMessage=${this.errorMessage}
|
|
12
|
+
?optionalTag=${this.optionalTag}
|
|
13
|
+
.optionalText=${this.optionalText}
|
|
14
|
+
?requiredTag=${this.requiredTag}
|
|
15
|
+
.requiredText=${this.requiredText}
|
|
16
|
+
?useWrapper=${this.useWrapper}
|
|
17
|
+
.forId=${this.allowUserInput||this.typeahead?this.id+"-input":this.id+"-arrow"}
|
|
18
|
+
class="pkt-combobox__wrapper"
|
|
19
|
+
@labelClick=${this.handleInputClick}
|
|
20
|
+
>
|
|
21
|
+
<div class="pkt-contents" ${u.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
|
|
22
|
+
<div class="pkt-combobox" @focusout=${this.handleFocusOut}>
|
|
23
|
+
<div
|
|
24
|
+
class=${y.e({"pkt-combobox__input":!0,"pkt-combobox__input--fullwidth":this.fullwidth,"pkt-combobox__input--open":this._isOptionsOpen,"pkt-combobox__input--error":this.hasError,"pkt-combobox__input--disabled":this.disabled})}
|
|
25
|
+
tabindex="-1"
|
|
26
|
+
@click=${this.handleInputClick}
|
|
27
|
+
>
|
|
28
|
+
${this.placeholder&&(!this._value.length||this.multiple&&this.tagPlacement=="outside")&&!this._inputFocus?l.x`<span class="pkt-combobox__placeholder">${this.placeholder}</span>`:this.tagPlacement!=="outside"?this.renderSingleOrMultipleValues():l.E}
|
|
29
|
+
${this.renderInputField()}
|
|
30
|
+
<div
|
|
31
|
+
class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
|
|
32
|
+
@click=${this.handleArrowClick}
|
|
33
|
+
@keydown=${this.handleArrowClick}
|
|
34
|
+
id="${this.id}-arrow"
|
|
35
|
+
${u.n(this.arrowRef)}
|
|
36
|
+
aria-expanded=${this._isOptionsOpen}
|
|
37
|
+
aria-controls="${this.id}-listbox"
|
|
38
|
+
aria-haspopup="listbox"
|
|
39
|
+
aria-label="Åpne liste"
|
|
40
|
+
?disabled=${this.disabled}
|
|
41
|
+
?data-disabled=${this.disabled}
|
|
42
|
+
role="button"
|
|
43
|
+
tabindex="${this.disabled?"-1":"0"}"
|
|
44
|
+
>
|
|
45
|
+
<pkt-icon
|
|
46
|
+
class=${y.e({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
|
|
47
|
+
name="chevron-thin-down"
|
|
48
|
+
></pkt-icon>
|
|
49
|
+
</div>
|
|
50
|
+
<div ${u.n(this.focusRef)} tabindex="-1" @keydown=${this.handleArrowClick}></div>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<pkt-listbox
|
|
54
|
+
id="${this.id}-listbox"
|
|
55
|
+
.options=${this._options}
|
|
56
|
+
.isOpen=${this._isOptionsOpen}
|
|
57
|
+
.searchPlaceholder=${this.searchPlaceholder}
|
|
58
|
+
.label="Liste: ${this.label||""}"
|
|
59
|
+
?includeSearch=${this.includeSearch}
|
|
60
|
+
?isMultiSelect=${this.multiple}
|
|
61
|
+
?allowUserInput=${this.allowUserInput&&!this._maxIsReached}
|
|
62
|
+
?maxIsReached=${this._maxIsReached}
|
|
63
|
+
.customUserInput=${c.o(this._addValueText)}
|
|
64
|
+
.userMessage=${this._userInfoMessage}
|
|
65
|
+
@search=${this.handleSearch}
|
|
66
|
+
@option-toggle=${this.handleOptionToggled}
|
|
67
|
+
@select-all=${this.addAllOptions}
|
|
68
|
+
@close-options=${()=>this._isOptionsOpen=!1}
|
|
69
|
+
.searchValue=${this._search||null}
|
|
70
|
+
.maxLength=${this.maxlength||0}
|
|
71
|
+
${u.n(this.listboxRef)}
|
|
72
|
+
></pkt-listbox>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
${this.tagPlacement==="outside"&&this.multiple?l.x`<div class="pkt-combobox__tags-outside">
|
|
76
|
+
${this.renderSingleOrMultipleValues()}
|
|
77
|
+
</div>`:l.E}
|
|
78
|
+
</pkt-input-wrapper>
|
|
79
|
+
`}renderInputField(){return this.typeahead||this.allowUserInput?l.x`
|
|
80
|
+
<div class="pkt-combobox__input-div combobox__input">
|
|
81
|
+
<input
|
|
82
|
+
type="text"
|
|
83
|
+
id="${this.id}-input"
|
|
84
|
+
name=${(this.name||this.id)+"-input"}
|
|
85
|
+
@input=${this.handleInput}
|
|
86
|
+
@keydown=${this.handleInputKeydown}
|
|
87
|
+
@focus=${this.handleFocus}
|
|
88
|
+
@blur=${this.handleBlur}
|
|
89
|
+
autocomplete="off"
|
|
90
|
+
role="combobox"
|
|
91
|
+
aria-label=${c.o(this.label)}
|
|
92
|
+
aria-autocomplete=${this.typeahead?"both":"list"}
|
|
93
|
+
aria-controls="${this.id}-listbox"
|
|
94
|
+
aria-multiselectable=${c.o(this.multiple?"true":void 0)}
|
|
95
|
+
aria-activedescendant=${c.o(this._value[0]&&this.findValueInOptions(this._value[0])?`${this.id}-listbox-${this.findIndexInOptions(this._value[0])}`:void 0)}
|
|
96
|
+
${u.n(this.inputRef)}
|
|
97
|
+
/>
|
|
98
|
+
</div>
|
|
99
|
+
`:l.x`
|
|
100
|
+
<input
|
|
101
|
+
type="hidden"
|
|
102
|
+
id="${this.id}-input"
|
|
103
|
+
name=${(this.name||this.id)+"-input"}
|
|
104
|
+
.value=${this._value.join(",")}
|
|
105
|
+
${u.n(this.inputRef)}
|
|
106
|
+
/>
|
|
107
|
+
`}renderSingleOrMultipleValues(){const e=!this.multiple,t=this._editingSingleValue?null:this.renderValueTag(this.findValueInOptions(this._value[0])),i=I.c(this._value,s=>s,s=>{var a;const n=this.findValueInOptions(s),r=(a=this.options.find(h=>h.value===s))==null?void 0:a.tagSkinColor;return l.x`
|
|
108
|
+
<pkt-tag
|
|
109
|
+
skin=${r||"blue-dark"}
|
|
110
|
+
?closeTag=${!this.disabled}
|
|
111
|
+
@close=${()=>this.handleTagRemove(s)}
|
|
112
|
+
>
|
|
113
|
+
${this.renderValueTag(n)}
|
|
114
|
+
</pkt-tag>
|
|
115
|
+
`});return e?t:i}renderValueTag(e){if(!e)return"";switch(this.displayValueAs){case"prefixAndValue":return l.x`<span data-focusfix=${this.id}>${e.prefix||""} ${e.value}</span>`;case"value":return l.x`<span data-focusfix=${this.id}>${e.value}</span>`;case"label":default:return l.x`<span data-focusfix=${this.id}>${e.label||e.value}</span>`}}handleInput(e){if(e.stopPropagation(),e.stopImmediatePropagation(),this.disabled)return;this.touched=!0;const t=e.target;if(this._search=t.value,this.checkForMatches(),this.typeahead)if(this._search){if(this._options=this.options.filter(i=>{var s;return(s=i.fulltext)==null?void 0:s.toLowerCase().includes(this._search.toLowerCase())}),e.inputType!=="deleteContentBackward"){const i=this._options.filter(s=>{var n;return!s.selected&&((n=s.label)==null?void 0:n.toLowerCase().startsWith(this._search.toLowerCase()))});if(i.length>0&&this.inputRef.value&&this.inputRef.value.type!=="hidden"){const s=i[0];s!=null&&s.label&&(t.value=s.label,window.setTimeout(()=>t.setSelectionRange(this._search.length,t.value.length),0),t.selectionDirection="backward")}}}else this._options=[...this.options]}handleFocus(){if(!this.disabled){if(!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!=="hidden"){const e=this.findValueInOptions(this._value[0]);this._editingSingleValue=!0,this.inputRef.value.value=this.displayValueAs==="label"&&(e!=null&&e.label)?e.label:this._value[0]}this._inputFocus=!0,this._search="",this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(e){var t,i,s,n,r;if(!this.disabled&&((i=(t=e.relatedTarget)==null?void 0:t.closest("pkt-combobox"))==null?void 0:i.id)!==this.id&&((n=(s=e.relatedTarget)==null?void 0:s.closest("pkt-combobox"))==null?void 0:n.id)!==this.id&&((r=e.target)==null?void 0:r.getAttribute("data-focusfix"))!==this.id&&e.relatedTarget!==this.focusRef.value&&e.relatedTarget!==this.inputRef.value&&e.relatedTarget!==this.arrowRef.value&&this._isOptionsOpen){if(this._inputFocus=!1,this._addValueText=null,this._userInfoMessage="",this._search="",this.inputRef.value&&this.inputRef.value.type!=="hidden"&&this.inputRef.value.value!==""){const a=this.inputRef.value.value;!this._value.includes(a)&&!this._options.find(h=>h.label===a)?this.allowUserInput?this.addNewUserValue(a):this.multiple||this.removeValue(this._value[0]):this._value.includes(a)||this.setSelected(a),this.inputRef.value.value=""}this._isOptionsOpen=!1,this.onBlur()}}handleBlur(){this._inputFocus=!1,this._editingSingleValue=!1,this.onBlur()}handleInputClick(e){var t,i;this.disabled||(e.currentTarget&&e.currentTarget!==this.arrowRef.value&&((t=this.inputRef.value)==null?void 0:t.type)!=="hidden"?(i=this.inputRef.value)==null||i.focus():this.handleArrowClick(e))}handleArrowClick(e){var t,i;this.disabled||e instanceof KeyboardEvent&&e.key&&e.key!=="Enter"&&e.key!==" "&&e.key!=="ArrowDown"||(e.stopImmediatePropagation(),e.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen?(t=this.listboxRef.value)==null||t.focusFirstOrSelectedOption():(i=this.arrowRef.value)==null||i.focus())}handleOptionToggled(e){this.toggleValue(e.detail)}handleSearch(e){e.stopPropagation(),this._search=e.detail.toLowerCase()}handleInputKeydown(e){var t,i,s;switch(e.key){case",":case"Enter":e.preventDefault(),this.addValue();break;case"Backspace":!this._search&&((t=this.inputRef.value)==null?void 0:t.type)==="hidden"&&this.removeLastValue(e);break;case"Tab":case"ArrowDown":e.shiftKey||((i=this.listboxRef.value)==null||i.focusFirstOrSelectedOption(),e.preventDefault());break;case"Escape":this._isOptionsOpen=!1,(s=this.arrowRef.value)==null||s.focus(),e.preventDefault();break}}handleTagRemove(e){this.removeSelected(e)}blurInput(){this.inputRef.value&&this.inputRef.value.matches(":focus")&&this.inputRef.value.blur()}checkForMatches(){var r;const e=((r=this.inputRef.value)==null?void 0:r.value)||this._search||"",t=e.trim().toLowerCase()||"";if(!t){!this.multiple&&this._value[0]&&this.removeValue(this._value[0]),this.resetComboboxInput(!1);return}const i=this._value.find(a=>a.toLowerCase()===t),s=this._options.filter(a=>{var h;return((h=a.label)==null?void 0:h.toLowerCase().includes(t))??!1}),n=s.find(a=>{var h;return((h=a.label)==null?void 0:h.toLowerCase())===t||a.value.toLowerCase()===t});switch(!0){case((s.length===0||!n)&&this.allowUserInput):this._addValueText=e,this._userInfoMessage="";break;case(s.length===0&&!this.allowUserInput):this._addValueText=null,this._userInfoMessage="Ingen match i søket";break;case!!i:this._addValueText=null,this._userInfoMessage="Verdien er allerede valgt";break;case s.length>1:this._addValueText=null,this._userInfoMessage="";break;default:this._addValueText=null,this._userInfoMessage=""}}findValueInOptions(e){return this.options.find(t=>t.value===e||t.label===e)||null}findIndexInOptions(e){return this._options.findIndex(t=>t.value===e||t.label===e)}isMaxItemsReached(){const e=this.maxlength!==null&&this._value.length>=this.maxlength;return e?this._maxIsReached=!0:this._maxIsReached=!1,e}toggleValue(e){var k,x;if(this.disabled)return;this.touched=!0,this._userInfoMessage="",this._addValueText=null;const t=((k=this.findValueInOptions(e))==null?void 0:k.value)||null,i=this._value.includes(e||t||""),s=!!t,n=((x=this._options.find(v=>v.value===e))==null?void 0:x.disabled)||!1,r=!(e!=null&&e.trim()),a=!this.multiple,h=this.multiple,_=this.isMaxItemsReached();let p=!1,f=!0,m="",g="";n||(!s&&this.allowUserInput&&!r?(this.addNewUserValue(e),m="Ny verdi lagt til",p=!h):!s&&!this.allowUserInput?(a&&this._value[0]&&this.removeValue(this._value[0]),f=!1,p=!0,m="Ingen treff i søket"):i?(this.removeValue(t),p=!0):r&&a?(this.removeAllSelected(),p=!0):a?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),p=!1,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&(this.inputRef.value.value="",this.inputRef.value.blur())):h&&!_?(this.setSelected(t),p=!0):h&&_?(this._userInfoMessage="Maks antall valg nådd",f=!1,g=e):(a&&this.removeAllSelected(),this._userInfoMessage="Ingen gyldig verdi valgt",f=!1,p=!0,g=e),this._isOptionsOpen=p,p||window.setTimeout(()=>{var v;(v=this.focusRef.value)==null||v.focus()},0),this._userInfoMessage=m,this._search=g||"",this.resetComboboxInput(f),h&&this.isMaxItemsReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&this.isMaxItemsReached()){this._userInfoMessage="Maks antall valg nådd";return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,this._options=this._options.map(t=>(t.value===e&&(t.selected=!0),t)),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(i=>i!==e);const t=this.findValueInOptions(e);t?(t.selected=!1,t.userAdded?(this._options=[...this._options.filter(i=>i.value!==e)],this.options=[...this.options.filter(i=>i.value!==e)]):this._options=[...this._options,t]):!e&&!this.multiple&&(this._options=this._options.map(i=>(i.selected=!1,i)))}addAllOptions(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage="For mange valgt";return}this._value=this._options.map(e=>e.value),this._options=this._options.map(e=>(e.selected=!0,e)),this.requestUpdate()}}removeAllSelected(){this._value=[],this._options=this._options.map(e=>(e.selected=!1,e)),this._options=this._options.filter(e=>!e.userAdded),this.requestUpdate()}addValue(){var t;const e=((t=this.inputRef.value)==null?void 0:t.value.trim())||"";this._search=e,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],this._isOptionsOpen=!1,this.blurInput();else if(!this.findValueInOptions(e)){if(this.isMaxItemsReached())return;this._value=[...this._value,e]}const t={value:e,label:e,userAdded:!0};this.options=[t,...this.options],this._options=[t,...this._options],this.setSelected(e),this.requestUpdate()}resetComboboxInput(e=!0){if(this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&e)if(this._search="",this.multiple)this.inputRef.value.value="";else{const t=this.findValueInOptions(this._value[0]);window.setTimeout(()=>{!this.inputRef.value||this.inputRef.value.type==="hidden"||(this.inputRef.value.value=this.displayValueAs==="label"&&(t!=null&&t.label)?t.label:this._value[0]||"")},0),this._userInfoMessage=""}this._options=[...this.options]}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();const t=this._value[this._value.length-1];t&&this.removeSelected(t),this.isMaxItemsReached()}};o([l.n({type:String,reflect:!0})],exports.PktCombobox.prototype,"value",2);o([l.n({type:Array})],exports.PktCombobox.prototype,"options",2);o([l.n({type:Boolean})],exports.PktCombobox.prototype,"allowUserInput",2);o([l.n({type:Boolean})],exports.PktCombobox.prototype,"typeahead",2);o([l.n({type:Boolean})],exports.PktCombobox.prototype,"includeSearch",2);o([l.n({type:String})],exports.PktCombobox.prototype,"searchPlaceholder",2);o([l.n({type:Boolean})],exports.PktCombobox.prototype,"multiple",2);o([l.n({type:Number})],exports.PktCombobox.prototype,"maxlength",2);o([l.n({type:String})],exports.PktCombobox.prototype,"displayValueAs",2);o([l.n({type:String})],exports.PktCombobox.prototype,"tagPlacement",2);o([d.r()],exports.PktCombobox.prototype,"_options",2);o([d.r()],exports.PktCombobox.prototype,"_isOptionsOpen",2);o([d.r()],exports.PktCombobox.prototype,"_value",2);o([d.r()],exports.PktCombobox.prototype,"_userInfoMessage",2);o([d.r()],exports.PktCombobox.prototype,"_addValueText",2);o([d.r()],exports.PktCombobox.prototype,"_maxIsReached",2);o([d.r()],exports.PktCombobox.prototype,"_search",2);o([d.r()],exports.PktCombobox.prototype,"_inputFocus",2);o([d.r()],exports.PktCombobox.prototype,"_editingSingleValue",2);exports.PktCombobox=o([l.t("pkt-combobox")],exports.PktCombobox);
|