@oslokommune/punkt-elements 13.6.4 → 13.6.6
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 +17 -0
- package/dist/{combobox-COuxR036.cjs → combobox-CNH-j9Za.cjs} +7 -7
- package/dist/{combobox-D3aPvdrE.js → combobox-C_pTRtsQ.js} +181 -180
- package/dist/pkt-combobox.cjs +1 -1
- package/dist/pkt-combobox.js +1 -1
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +1 -1
- package/package.json +3 -3
- package/src/components/combobox/combobox.test.ts +22 -0
- package/src/components/combobox/combobox.ts +19 -8
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [13.6.6](https://github.com/oslokommune/punkt/compare/13.6.5...13.6.6) (2025-09-22)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
Ingen
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
Ingen
|
|
18
|
+
|
|
19
|
+
### Chores
|
|
20
|
+
Ingen
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
|
|
8
25
|
## [13.6.4](https://github.com/oslokommune/punkt/compare/13.6.3...13.6.4) (2025-09-19)
|
|
9
26
|
|
|
10
27
|
### ⚠ BREAKING CHANGES
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const a=require("./element-D62wHiNU.cjs"),c=require("./if-defined-CkVc_RJD.cjs"),d=require("./state-BkE_Rxl7.cjs"),r=require("./ref-BfgcOXko.cjs"),
|
|
1
|
+
"use strict";const a=require("./element-D62wHiNU.cjs"),c=require("./if-defined-CkVc_RJD.cjs"),d=require("./state-BkE_Rxl7.cjs"),r=require("./ref-BfgcOXko.cjs"),y=require("./class-map-CG3vIaNm.cjs"),O=require("./repeat-DzibMwhi.cjs"),$=require("./input-element-Y8sdrq9C.cjs"),I=require("./pkt-options-controller-CiuBG6Lt.cjs"),w=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-C9rZEgju.cjs");require("./icon-__Hjt2XZ.cjs");require("./tag-BKq07hGI.cjs");require("./listbox-BBO1d5Jd.cjs");const C={displayValueAs:{default:"label"}},R={props:C};var V=Object.defineProperty,A=Object.getOwnPropertyDescriptor,h=(v,e,t,i)=>{for(var s=i>1?void 0:i?A(e,t):e,n=v.length-1,l;n>=0;n--)(l=v[n])&&(s=(i?l(e,t,s):l(s))||s);return i&&s&&V(e,t,s),s};exports.PktCombobox=class extends $.PktInputElement{constructor(){super(),this.helptextSlot=r.e(),this.value="",this.options=[],this.defaultOptions=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder="",this.multiple=!1,this.maxlength=null,this.displayValueAs=R.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=r.e(),this.arrowRef=r.e(),this.listboxRef=r.e(),this.focusRef=r.e(),this.optionTagRef=r.e(),this.optionsController=new I.PktOptionsSlotController(this),this.slotController=new w.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){var e;if(super.connectedCallback(),document&&document.body.addEventListener("click",t=>{this._isOptionsOpen&&!this.contains(t.target)&&this.handleFocusOut(t)}),this._options=[],this.defaultOptions&&this.defaultOptions.length){const t=((e=this.options)==null?void 0:e.filter(i=>i.userAdded))||[];this.options=[...t,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if(this.optionsController.nodes.length){const t=[];this.optionsController.nodes.forEach(i=>{if(!i.textContent&&!i.getAttribute("value"))return null;const s={value:i.getAttribute("value")||i.textContent||"",label:i.textContent||i.getAttribute("value")||""};i.getAttribute("data-prefix")&&(s.prefix=i.getAttribute("data-prefix")||void 0),i.getAttribute("tagskincolor")&&(s.tagSkinColor=i.getAttribute("tagskincolor")),i.getAttribute("description")&&(s.description=i.getAttribute("description")||void 0),s.fulltext=s.value+s.label+(s.prefix||""),t.push(s)}),t.length&&(this.options=[...t],this._options=[...t])}}updated(e){if(e.has("_value")&&this.valueChanged(this._value,e.get("_value")),e.has("value")&&(Array.isArray(this.value)?this._value=this.value:this.value&&this.multiple?this._value=this.value.split(","):this.value?this._value=[this.value]:this._value=[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]]),this.isMaxItemsReached()),e.has("defaultOptions")&&this.defaultOptions.length){const t=(Array.isArray(this.options)?this.options:[]).filter(i=>i.userAdded)||[];this.options=[...t,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if(e.has("options")){const s=(e.get("options")||this._options||[]).filter(l=>l&&l.userAdded).filter(l=>!(Array.isArray(this.options)?this.options:[]).some(o=>o.value===l.value)),n=[...s,...this.options];this._options=n,s.length>0&&(this.options=n),this._options.forEach(l=>{if(l.value&&!l.label&&(l.label=l.value),l.selected&&!this._value.includes(l.value)){const o=[...this._value];this._value=[...this._value,l.value],this.valueChanged(this._value,o)}l.fulltext=l.value+l.label+(l.prefix||""),l.selected=l.selected||this._value.includes(l.value)})}e.has("_search")&&this.dispatchEvent(new CustomEvent("search",{detail:this._search,bubbles:!1})),super.updated(e)}attributeChangedCallback(e,t,i){e==="value"&&(Array.isArray(this.value)?this._value=this.value:this.value&&this.multiple?this._value=this.value.split(","):this.value?this._value=[this.value]:this._value=[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]])),e==="options"&&(this._options=Array.isArray(this.options)?[...this.options]:[],this._options.forEach(s=>{s.value&&!s.label&&(s.label=s.value),s.selected&&!this._value.includes(s.value)&&(this._value=[...this._value,s.value]),s.fulltext=s.value+s.label+(s.prefix||"")}),this._search=""),super.attributeChangedCallback(e,t,i)}render(){return a.x`
|
|
2
2
|
<pkt-input-wrapper
|
|
3
3
|
.label=${this.label}
|
|
4
4
|
.helptext=${this.helptext}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
<div class="pkt-contents" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
|
|
23
23
|
<div class="pkt-combobox" @focusout=${this.handleFocusOut}>
|
|
24
24
|
<div
|
|
25
|
-
class=${
|
|
25
|
+
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})}
|
|
26
26
|
tabindex="-1"
|
|
27
27
|
@click=${this.handleInputClick}
|
|
28
28
|
>
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
tabindex="${this.disabled?"-1":"0"}"
|
|
47
47
|
>
|
|
48
48
|
<pkt-icon
|
|
49
|
-
class=${
|
|
49
|
+
class=${y.e({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
|
|
50
50
|
name="chevron-thin-down"
|
|
51
51
|
></pkt-icon>
|
|
52
52
|
</div>
|
|
@@ -112,13 +112,13 @@
|
|
|
112
112
|
.value=${this._value.join(",")}
|
|
113
113
|
${r.n(this.inputRef)}
|
|
114
114
|
/>
|
|
115
|
-
`}renderSingleOrMultipleValues(){const e=!this.multiple,t=this._editingSingleValue?null:this.renderValueTag(this.findValueInOptions(this._value[0])),i
|
|
115
|
+
`}renderSingleOrMultipleValues(){const e=!this.multiple,t=this._editingSingleValue?null:this.renderValueTag(this.findValueInOptions(this._value[0])),i=O.c(this._value,s=>s,s=>{var o;const n=this.findValueInOptions(s),l=(o=this.options.find(u=>u.value===s))==null?void 0:o.tagSkinColor;return a.x`
|
|
116
116
|
<pkt-tag
|
|
117
|
-
skin=${
|
|
117
|
+
skin=${l||"blue-dark"}
|
|
118
118
|
?closeTag=${!this.disabled}
|
|
119
119
|
@close=${()=>this.handleTagRemove(s)}
|
|
120
120
|
>
|
|
121
|
-
${this.renderValueTag(
|
|
121
|
+
${this.renderValueTag(n)}
|
|
122
122
|
</pkt-tag>
|
|
123
123
|
`});return e?t:i}renderValueTag(e){if(!e)return"";switch(this.displayValueAs){case"prefixAndValue":return a.x`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
124
124
|
>${e.prefix||""} ${e.value}</span
|
|
@@ -126,4 +126,4 @@
|
|
|
126
126
|
>${e.value}</span
|
|
127
127
|
>`;case"label":default:return a.x`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
128
128
|
>${e.label||e.value}</span
|
|
129
|
-
>`}}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 l;return!s.selected&&((l=s.label)==null?void 0:l.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,l,h;if(!this.disabled&&((i=(t=e.relatedTarget)==null?void 0:t.closest("pkt-combobox"))==null?void 0:i.id)!==this.id&&((l=(s=e.relatedTarget)==null?void 0:s.closest("pkt-combobox"))==null?void 0:l.id)!==this.id&&((h=e.target)==null?void 0:h.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 n=this.inputRef.value.value,u=this.findValueInOptions(n);!this._value.includes(n)&&!u?this.allowUserInput?this.addNewUserValue(n):this.multiple||this.removeValue(this._value[0]):u&&!this._value.includes(u.value)&&this.setSelected(u.value),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.requestUpdate()):this.handleArrowClick(e))}handlePlaceholderClick(e){this.disabled||(e.stopPropagation(),this.inputRef.value&&this.inputRef.value.type!=="hidden"&&(this.inputRef.value.focus(),this._inputFocus=!0,this.requestUpdate()))}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",":this.multiple&&(e.preventDefault(),this.addValue());break;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 h;const e=((h=this.inputRef.value)==null?void 0:h.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(n=>n.toLowerCase()===t),s=this._options.filter(n=>{var u;return((u=n.label)==null?void 0:u.toLowerCase().includes(t))??!1}),l=s.find(n=>{var u;return((u=n.label)==null?void 0:u.toLowerCase())===t||n.value.toLowerCase()===t});switch(!0){case((s.length===0||!l)&&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 g,k;if(this.disabled)return;this.touched=!0,this._userInfoMessage="",this._addValueText=null;const t=((g=this.findValueInOptions(e))==null?void 0:g.value)||null,i=this._value.includes(e||t||""),s=!!t,l=((k=this._options.find(_=>_.value===e))==null?void 0:k.disabled)||!1,h=!(e!=null&&e.trim()),n=!this.multiple,u=this.multiple,x=this.isMaxItemsReached();let p=!1,f=!0,b="",m="";l||(!s&&this.allowUserInput&&!h?(this.addNewUserValue(e),b="Ny verdi lagt til",p=!u):!s&&!this.allowUserInput?(n&&this._value[0]&&this.removeValue(this._value[0]),f=!1,p=!0,b="Ingen treff i søket"):i?(this.removeValue(t),p=!0):h&&n?(this.removeAllSelected(),p=!0):n?(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())):u&&!x?(this.setSelected(t),p=!0):u&&x?(this._userInfoMessage="Maks antall valg nådd",f=!1,m=e):(n&&this.removeAllSelected(),this._userInfoMessage="Ingen gyldig verdi valgt",f=!1,p=!0,m=e),this._isOptionsOpen=p,p||window.setTimeout(()=>{var _;(_=this.focusRef.value)==null||_.focus()},0),this._userInfoMessage=b,this._search=m||"",this.resetComboboxInput(f),u&&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([a.n({type:String,reflect:!0})],exports.PktCombobox.prototype,"value",2);o([a.n({type:Array})],exports.PktCombobox.prototype,"options",2);o([a.n({type:Array})],exports.PktCombobox.prototype,"defaultOptions",2);o([a.n({type:Boolean})],exports.PktCombobox.prototype,"allowUserInput",2);o([a.n({type:Boolean})],exports.PktCombobox.prototype,"typeahead",2);o([a.n({type:Boolean})],exports.PktCombobox.prototype,"includeSearch",2);o([a.n({type:String})],exports.PktCombobox.prototype,"searchPlaceholder",2);o([a.n({type:Boolean})],exports.PktCombobox.prototype,"multiple",2);o([a.n({type:Number})],exports.PktCombobox.prototype,"maxlength",2);o([a.n({type:String})],exports.PktCombobox.prototype,"displayValueAs",2);o([a.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([a.t("pkt-combobox")],exports.PktCombobox);
|
|
129
|
+
>`}}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,l;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&&((l=e.target)==null?void 0:l.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 o=this.inputRef.value.value,u=this.findValueInOptions(o);!this._value.includes(o)&&!u?this.allowUserInput?this.addNewUserValue(o):this.multiple||this.removeValue(this._value[0]):u&&!this._value.includes(u.value)&&this.setSelected(u.value),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.requestUpdate()):this.handleArrowClick(e))}handlePlaceholderClick(e){this.disabled||(e.stopPropagation(),this.inputRef.value&&this.inputRef.value.type!=="hidden"&&(this.inputRef.value.focus(),this._inputFocus=!0,this.requestUpdate()))}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",":this.multiple&&(e.preventDefault(),this.addValue());break;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 l;const e=((l=this.inputRef.value)==null?void 0:l.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(o=>o.toLowerCase()===t),s=this._options.filter(o=>{var u;return((u=o.label)==null?void 0:u.toLowerCase().includes(t))??!1}),n=s.find(o=>{var u;return((u=o.label)==null?void 0:u.toLowerCase())===t||o.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 g,k;if(this.disabled)return;this.touched=!0,this._userInfoMessage="",this._addValueText=null;const t=((g=this.findValueInOptions(e))==null?void 0:g.value)||null,i=this._value.includes(e||t||""),s=!!t,n=((k=this._options.find(_=>_.value===e))==null?void 0:k.disabled)||!1,l=!(e!=null&&e.trim()),o=!this.multiple,u=this.multiple,x=this.isMaxItemsReached();let p=!1,f=!0,b="",m="";n||(!s&&this.allowUserInput&&!l?(this.addNewUserValue(e),b="Ny verdi lagt til",p=!u):!s&&!this.allowUserInput?(o&&this._value[0]&&this.removeValue(this._value[0]),f=!1,p=!0,b="Ingen treff i søket"):i?(this.removeValue(t),p=!0):l&&o?(this.removeAllSelected(),p=!0):o?(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())):u&&!x?(this.setSelected(t),p=!0):u&&x?(this._userInfoMessage="Maks antall valg nådd",f=!1,m=e):(o&&this.removeAllSelected(),this._userInfoMessage="Ingen gyldig verdi valgt",f=!1,p=!0,m=e),this._isOptionsOpen=p,p||window.setTimeout(()=>{var _;(_=this.focusRef.value)==null||_.focus()},0),this._userInfoMessage=b,this._search=m||"",this.resetComboboxInput(f),u&&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()}};h([a.n({type:String,reflect:!0})],exports.PktCombobox.prototype,"value",2);h([a.n({type:Array})],exports.PktCombobox.prototype,"options",2);h([a.n({type:Array})],exports.PktCombobox.prototype,"defaultOptions",2);h([a.n({type:Boolean})],exports.PktCombobox.prototype,"allowUserInput",2);h([a.n({type:Boolean})],exports.PktCombobox.prototype,"typeahead",2);h([a.n({type:Boolean})],exports.PktCombobox.prototype,"includeSearch",2);h([a.n({type:String})],exports.PktCombobox.prototype,"searchPlaceholder",2);h([a.n({type:Boolean})],exports.PktCombobox.prototype,"multiple",2);h([a.n({type:Number})],exports.PktCombobox.prototype,"maxlength",2);h([a.n({type:String})],exports.PktCombobox.prototype,"displayValueAs",2);h([a.n({type:String})],exports.PktCombobox.prototype,"tagPlacement",2);h([d.r()],exports.PktCombobox.prototype,"_options",2);h([d.r()],exports.PktCombobox.prototype,"_isOptionsOpen",2);h([d.r()],exports.PktCombobox.prototype,"_value",2);h([d.r()],exports.PktCombobox.prototype,"_userInfoMessage",2);h([d.r()],exports.PktCombobox.prototype,"_addValueText",2);h([d.r()],exports.PktCombobox.prototype,"_maxIsReached",2);h([d.r()],exports.PktCombobox.prototype,"_search",2);h([d.r()],exports.PktCombobox.prototype,"_inputFocus",2);h([d.r()],exports.PktCombobox.prototype,"_editingSingleValue",2);exports.PktCombobox=h([a.t("pkt-combobox")],exports.PktCombobox);
|
|
@@ -1,82 +1,83 @@
|
|
|
1
|
-
import { E as
|
|
1
|
+
import { E as I, x as d, n as r, a as w } from "./element-DJZPsA_J.js";
|
|
2
2
|
import { o as f } from "./if-defined-D3lgJqT7.js";
|
|
3
3
|
import { r as c } from "./state-CPQXJ4Ct.js";
|
|
4
4
|
import { e as _, n as v } from "./ref-BCGCor-j.js";
|
|
5
|
-
import { e as
|
|
5
|
+
import { e as k } from "./class-map-Dw6Wrxwi.js";
|
|
6
6
|
import { c as R } from "./repeat-B6qPUgAq.js";
|
|
7
7
|
import { P as V } from "./input-element-DQOVrqUZ.js";
|
|
8
|
-
import { P as
|
|
9
|
-
import { P as
|
|
8
|
+
import { P as A } from "./pkt-options-controller-CZO1nxZ8.js";
|
|
9
|
+
import { P as C } from "./pkt-slot-controller-BPGj-LC5.js";
|
|
10
10
|
import "./input-wrapper-D_JdEqcO.js";
|
|
11
11
|
import "./icon-B1-mkmwB.js";
|
|
12
12
|
import "./tag-NZ5oeGfw.js";
|
|
13
13
|
import "./listbox-DJ7b3Wmc.js";
|
|
14
|
-
const
|
|
14
|
+
const S = {
|
|
15
15
|
displayValueAs: {
|
|
16
16
|
default: "label"
|
|
17
17
|
}
|
|
18
18
|
}, T = {
|
|
19
|
-
props:
|
|
19
|
+
props: S
|
|
20
20
|
};
|
|
21
|
-
var M = Object.defineProperty,
|
|
22
|
-
for (var
|
|
23
|
-
(a =
|
|
24
|
-
return s &&
|
|
21
|
+
var M = Object.defineProperty, U = Object.getOwnPropertyDescriptor, n = (t, e, i, s) => {
|
|
22
|
+
for (var h = s > 1 ? void 0 : s ? U(e, i) : e, l = t.length - 1, a; l >= 0; l--)
|
|
23
|
+
(a = t[l]) && (h = (s ? a(e, i, h) : a(h)) || h);
|
|
24
|
+
return s && h && M(e, i, h), h;
|
|
25
25
|
};
|
|
26
|
-
let
|
|
26
|
+
let o = class extends V {
|
|
27
27
|
constructor() {
|
|
28
|
-
super(), this.helptextSlot = _(), this.value = "", this.options = [], this.defaultOptions = [], this.allowUserInput = !1, this.typeahead = !1, this.includeSearch = !1, this.searchPlaceholder = "", this.multiple = !1, this.maxlength = null, this.displayValueAs = T.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 = _(), this.arrowRef = _(), this.listboxRef = _(), this.focusRef = _(), this.optionTagRef = _(), this.optionsController = new
|
|
28
|
+
super(), this.helptextSlot = _(), this.value = "", this.options = [], this.defaultOptions = [], this.allowUserInput = !1, this.typeahead = !1, this.includeSearch = !1, this.searchPlaceholder = "", this.multiple = !1, this.maxlength = null, this.displayValueAs = T.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 = _(), this.arrowRef = _(), this.listboxRef = _(), this.focusRef = _(), this.optionTagRef = _(), this.optionsController = new A(this), this.slotController = new C(this, this.helptextSlot), this.slotController.skipOptions = !0;
|
|
29
29
|
}
|
|
30
30
|
// Lifecycle methods
|
|
31
31
|
connectedCallback() {
|
|
32
|
-
var
|
|
33
|
-
if (super.connectedCallback(), document && document.body.addEventListener("click", (
|
|
34
|
-
this._isOptionsOpen && !this.contains(
|
|
32
|
+
var t;
|
|
33
|
+
if (super.connectedCallback(), document && document.body.addEventListener("click", (e) => {
|
|
34
|
+
this._isOptionsOpen && !this.contains(e.target) && this.handleFocusOut(e);
|
|
35
35
|
}), this._options = [], this.defaultOptions && this.defaultOptions.length) {
|
|
36
|
-
const
|
|
37
|
-
this.options = [...
|
|
36
|
+
const e = ((t = this.options) == null ? void 0 : t.filter((i) => i.userAdded)) || [];
|
|
37
|
+
this.options = [...e, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = Array.isArray(this.options) ? [...this.options] : [];
|
|
38
38
|
}
|
|
39
39
|
if (this.optionsController.nodes.length) {
|
|
40
|
-
const
|
|
40
|
+
const e = [];
|
|
41
41
|
this.optionsController.nodes.forEach((i) => {
|
|
42
42
|
if (!i.textContent && !i.getAttribute("value")) return null;
|
|
43
43
|
const s = {
|
|
44
44
|
value: i.getAttribute("value") || i.textContent || "",
|
|
45
45
|
label: i.textContent || i.getAttribute("value") || ""
|
|
46
46
|
};
|
|
47
|
-
i.getAttribute("data-prefix") && (s.prefix = i.getAttribute("data-prefix") || void 0), i.getAttribute("tagskincolor") && (s.tagSkinColor = i.getAttribute("tagskincolor")), i.getAttribute("description") && (s.description = i.getAttribute("description") || void 0), s.fulltext = s.value + s.label + (s.prefix || ""),
|
|
48
|
-
}),
|
|
47
|
+
i.getAttribute("data-prefix") && (s.prefix = i.getAttribute("data-prefix") || void 0), i.getAttribute("tagskincolor") && (s.tagSkinColor = i.getAttribute("tagskincolor")), i.getAttribute("description") && (s.description = i.getAttribute("description") || void 0), s.fulltext = s.value + s.label + (s.prefix || ""), e.push(s);
|
|
48
|
+
}), e.length && (this.options = [...e], this._options = [...e]);
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
updated(
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
this.options = [...i, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = [...this.options];
|
|
51
|
+
updated(t) {
|
|
52
|
+
if (t.has("_value") && this.valueChanged(this._value, t.get("_value")), t.has("value") && (Array.isArray(this.value) ? this._value = this.value : this.value && this.multiple ? this._value = this.value.split(",") : this.value ? this._value = [this.value] : this._value = [], !this.multiple && this._value.length > 1 && (this._value = [this._value[0]]), this.isMaxItemsReached()), t.has("defaultOptions") && this.defaultOptions.length) {
|
|
53
|
+
const e = (Array.isArray(this.options) ? this.options : []).filter((i) => i.userAdded) || [];
|
|
54
|
+
this.options = [...e, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = Array.isArray(this.options) ? [...this.options] : [];
|
|
56
55
|
}
|
|
57
|
-
if (
|
|
58
|
-
const s = this._options.filter((l) => l.userAdded).filter(
|
|
59
|
-
(l) => !this.options
|
|
60
|
-
|
|
61
|
-
|
|
56
|
+
if (t.has("options")) {
|
|
57
|
+
const s = (t.get("options") || this._options || []).filter((l) => l && l.userAdded).filter(
|
|
58
|
+
(l) => !(Array.isArray(this.options) ? this.options : []).some(
|
|
59
|
+
(a) => a.value === l.value
|
|
60
|
+
)
|
|
61
|
+
), h = [...s, ...this.options];
|
|
62
|
+
this._options = h, s.length > 0 && (this.options = h), this._options.forEach((l) => {
|
|
62
63
|
if (l.value && !l.label && (l.label = l.value), l.selected && !this._value.includes(l.value)) {
|
|
63
|
-
const
|
|
64
|
-
this._value = [...this._value, l.value], this.valueChanged(this._value,
|
|
64
|
+
const a = [...this._value];
|
|
65
|
+
this._value = [...this._value, l.value], this.valueChanged(this._value, a);
|
|
65
66
|
}
|
|
66
67
|
l.fulltext = l.value + l.label + (l.prefix || ""), l.selected = l.selected || this._value.includes(l.value);
|
|
67
68
|
});
|
|
68
69
|
}
|
|
69
|
-
|
|
70
|
+
t.has("_search") && this.dispatchEvent(
|
|
70
71
|
new CustomEvent("search", {
|
|
71
72
|
detail: this._search,
|
|
72
73
|
bubbles: !1
|
|
73
74
|
})
|
|
74
|
-
), super.updated(
|
|
75
|
+
), super.updated(t);
|
|
75
76
|
}
|
|
76
|
-
attributeChangedCallback(
|
|
77
|
-
|
|
77
|
+
attributeChangedCallback(t, e, i) {
|
|
78
|
+
t === "value" && (Array.isArray(this.value) ? this._value = this.value : this.value && this.multiple ? this._value = this.value.split(",") : this.value ? this._value = [this.value] : this._value = [], !this.multiple && this._value.length > 1 && (this._value = [this._value[0]])), t === "options" && (this._options = Array.isArray(this.options) ? [...this.options] : [], this._options.forEach((s) => {
|
|
78
79
|
s.value && !s.label && (s.label = s.value), s.selected && !this._value.includes(s.value) && (this._value = [...this._value, s.value]), s.fulltext = s.value + s.label + (s.prefix || "");
|
|
79
|
-
}), this._search = ""), super.attributeChangedCallback(
|
|
80
|
+
}), this._search = ""), super.attributeChangedCallback(t, e, i);
|
|
80
81
|
}
|
|
81
82
|
// Render methods
|
|
82
83
|
render() {
|
|
@@ -104,7 +105,7 @@ let h = class extends V {
|
|
|
104
105
|
<div class="pkt-contents" ${v(this.helptextSlot)} name="helptext" slot="helptext"></div>
|
|
105
106
|
<div class="pkt-combobox" @focusout=${this.handleFocusOut}>
|
|
106
107
|
<div
|
|
107
|
-
class=${
|
|
108
|
+
class=${k({
|
|
108
109
|
"pkt-combobox__input": !0,
|
|
109
110
|
"pkt-combobox__input--fullwidth": this.fullwidth,
|
|
110
111
|
"pkt-combobox__input--open": this._isOptionsOpen,
|
|
@@ -116,7 +117,7 @@ let h = class extends V {
|
|
|
116
117
|
>
|
|
117
118
|
${this.placeholder && (!this._value.length || this.multiple && this.tagPlacement == "outside") && !this._inputFocus ? d`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
|
|
118
119
|
>${this.placeholder}</span
|
|
119
|
-
>` : this.tagPlacement !== "outside" ? this.renderSingleOrMultipleValues() :
|
|
120
|
+
>` : this.tagPlacement !== "outside" ? this.renderSingleOrMultipleValues() : I}
|
|
120
121
|
${this.renderInputField()}
|
|
121
122
|
<div
|
|
122
123
|
class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
|
|
@@ -134,7 +135,7 @@ let h = class extends V {
|
|
|
134
135
|
tabindex="${this.disabled ? "-1" : "0"}"
|
|
135
136
|
>
|
|
136
137
|
<pkt-icon
|
|
137
|
-
class=${
|
|
138
|
+
class=${k({
|
|
138
139
|
"pkt-combobox__arrow-icon": !0,
|
|
139
140
|
"pkt-combobox__arrow-icon--open": this._isOptionsOpen
|
|
140
141
|
})}
|
|
@@ -173,7 +174,7 @@ let h = class extends V {
|
|
|
173
174
|
|
|
174
175
|
${this.tagPlacement === "outside" && this.multiple ? d`<div class="pkt-combobox__tags-outside">
|
|
175
176
|
${this.renderSingleOrMultipleValues()}
|
|
176
|
-
</div>` :
|
|
177
|
+
</div>` : I}
|
|
177
178
|
</pkt-input-wrapper>
|
|
178
179
|
`;
|
|
179
180
|
}
|
|
@@ -211,68 +212,68 @@ let h = class extends V {
|
|
|
211
212
|
`;
|
|
212
213
|
}
|
|
213
214
|
renderSingleOrMultipleValues() {
|
|
214
|
-
const
|
|
215
|
+
const t = !this.multiple, e = this._editingSingleValue ? null : this.renderValueTag(this.findValueInOptions(this._value[0])), i = R(
|
|
215
216
|
this._value,
|
|
216
217
|
(s) => s,
|
|
217
218
|
(s) => {
|
|
218
219
|
var a;
|
|
219
|
-
const
|
|
220
|
+
const h = this.findValueInOptions(s), l = (a = this.options.find((u) => u.value === s)) == null ? void 0 : a.tagSkinColor;
|
|
220
221
|
return d`
|
|
221
222
|
<pkt-tag
|
|
222
|
-
skin=${
|
|
223
|
+
skin=${l || "blue-dark"}
|
|
223
224
|
?closeTag=${!this.disabled}
|
|
224
225
|
@close=${() => this.handleTagRemove(s)}
|
|
225
226
|
>
|
|
226
|
-
${this.renderValueTag(
|
|
227
|
+
${this.renderValueTag(h)}
|
|
227
228
|
</pkt-tag>
|
|
228
229
|
`;
|
|
229
230
|
}
|
|
230
231
|
);
|
|
231
|
-
return
|
|
232
|
+
return t ? e : i;
|
|
232
233
|
}
|
|
233
|
-
renderValueTag(
|
|
234
|
-
if (!
|
|
234
|
+
renderValueTag(t) {
|
|
235
|
+
if (!t) return "";
|
|
235
236
|
switch (this.displayValueAs) {
|
|
236
237
|
case "prefixAndValue":
|
|
237
238
|
return d`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
238
|
-
>${
|
|
239
|
+
>${t.prefix || ""} ${t.value}</span
|
|
239
240
|
>`;
|
|
240
241
|
case "value":
|
|
241
242
|
return d`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
242
|
-
>${
|
|
243
|
+
>${t.value}</span
|
|
243
244
|
>`;
|
|
244
245
|
case "label":
|
|
245
246
|
default:
|
|
246
247
|
return d`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
247
|
-
>${
|
|
248
|
+
>${t.label || t.value}</span
|
|
248
249
|
>`;
|
|
249
250
|
}
|
|
250
251
|
}
|
|
251
252
|
// Event handlers
|
|
252
|
-
handleInput(
|
|
253
|
-
if (
|
|
253
|
+
handleInput(t) {
|
|
254
|
+
if (t.stopPropagation(), t.stopImmediatePropagation(), this.disabled) return;
|
|
254
255
|
this.touched = !0;
|
|
255
|
-
const
|
|
256
|
-
if (this._search =
|
|
256
|
+
const e = t.target;
|
|
257
|
+
if (this._search = e.value, this.checkForMatches(), this.typeahead)
|
|
257
258
|
if (this._search) {
|
|
258
259
|
if (this._options = this.options.filter(
|
|
259
260
|
(i) => {
|
|
260
261
|
var s;
|
|
261
262
|
return (s = i.fulltext) == null ? void 0 : s.toLowerCase().includes(this._search.toLowerCase());
|
|
262
263
|
}
|
|
263
|
-
),
|
|
264
|
+
), t.inputType !== "deleteContentBackward") {
|
|
264
265
|
const i = this._options.filter(
|
|
265
266
|
(s) => {
|
|
266
|
-
var
|
|
267
|
-
return !s.selected && ((
|
|
267
|
+
var h;
|
|
268
|
+
return !s.selected && ((h = s.label) == null ? void 0 : h.toLowerCase().startsWith(this._search.toLowerCase()));
|
|
268
269
|
}
|
|
269
270
|
);
|
|
270
271
|
if (i.length > 0 && this.inputRef.value && this.inputRef.value.type !== "hidden") {
|
|
271
272
|
const s = i[0];
|
|
272
|
-
s != null && s.label && (
|
|
273
|
-
() =>
|
|
273
|
+
s != null && s.label && (e.value = s.label, window.setTimeout(
|
|
274
|
+
() => e.setSelectionRange(this._search.length, e.value.length),
|
|
274
275
|
0
|
|
275
|
-
),
|
|
276
|
+
), e.selectionDirection = "backward");
|
|
276
277
|
}
|
|
277
278
|
}
|
|
278
279
|
} else
|
|
@@ -281,15 +282,15 @@ let h = class extends V {
|
|
|
281
282
|
handleFocus() {
|
|
282
283
|
if (!this.disabled) {
|
|
283
284
|
if (!this.multiple && this._value[0] && this.inputRef.value && this.inputRef.value.type !== "hidden") {
|
|
284
|
-
const
|
|
285
|
-
this._editingSingleValue = !0, this.inputRef.value.value = this.displayValueAs === "label" && (
|
|
285
|
+
const t = this.findValueInOptions(this._value[0]);
|
|
286
|
+
this._editingSingleValue = !0, this.inputRef.value.value = this.displayValueAs === "label" && (t != null && t.label) ? t.label : this._value[0];
|
|
286
287
|
}
|
|
287
288
|
this._inputFocus = !0, this._search = "", this._options = [...this.options], this._isOptionsOpen = !0, this.onFocus(), this.requestUpdate();
|
|
288
289
|
}
|
|
289
290
|
}
|
|
290
|
-
handleFocusOut(
|
|
291
|
-
var
|
|
292
|
-
if (!this.disabled && ((i = (
|
|
291
|
+
handleFocusOut(t) {
|
|
292
|
+
var e, i, s, h, l;
|
|
293
|
+
if (!this.disabled && ((i = (e = t.relatedTarget) == null ? void 0 : e.closest("pkt-combobox")) == null ? void 0 : i.id) !== this.id && ((h = (s = t.relatedTarget) == null ? void 0 : s.closest("pkt-combobox")) == null ? void 0 : h.id) !== this.id && ((l = t.target) == null ? void 0 : l.getAttribute("data-focusfix")) !== this.id && t.relatedTarget !== this.focusRef.value && t.relatedTarget !== this.inputRef.value && t.relatedTarget !== this.arrowRef.value && this._isOptionsOpen) {
|
|
293
294
|
if (this._inputFocus = !1, this._addValueText = null, this._userInfoMessage = "", this._search = "", this.inputRef.value && this.inputRef.value.type !== "hidden" && this.inputRef.value.value !== "") {
|
|
294
295
|
const a = this.inputRef.value.value, u = this.findValueInOptions(a);
|
|
295
296
|
!this._value.includes(a) && !u ? this.allowUserInput ? this.addNewUserValue(a) : this.multiple || this.removeValue(this._value[0]) : u && !this._value.includes(u.value) && this.setSelected(u.value), this.inputRef.value.value = "";
|
|
@@ -300,71 +301,71 @@ let h = class extends V {
|
|
|
300
301
|
handleBlur() {
|
|
301
302
|
this._inputFocus = !1, this._editingSingleValue = !1, this.onBlur();
|
|
302
303
|
}
|
|
303
|
-
handleInputClick(
|
|
304
|
-
var
|
|
305
|
-
this.disabled || (
|
|
304
|
+
handleInputClick(t) {
|
|
305
|
+
var e, i;
|
|
306
|
+
this.disabled || (t.currentTarget && t.currentTarget !== this.arrowRef.value && ((e = this.inputRef.value) == null ? void 0 : e.type) !== "hidden" ? ((i = this.inputRef.value) == null || i.focus(), this.requestUpdate()) : this.handleArrowClick(t));
|
|
306
307
|
}
|
|
307
|
-
handlePlaceholderClick(
|
|
308
|
-
this.disabled || (
|
|
308
|
+
handlePlaceholderClick(t) {
|
|
309
|
+
this.disabled || (t.stopPropagation(), this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.focus(), this._inputFocus = !0, this.requestUpdate()));
|
|
309
310
|
}
|
|
310
|
-
handleArrowClick(
|
|
311
|
-
var
|
|
312
|
-
this.disabled ||
|
|
311
|
+
handleArrowClick(t) {
|
|
312
|
+
var e, i;
|
|
313
|
+
this.disabled || t instanceof KeyboardEvent && t.key && t.key !== "Enter" && t.key !== " " && t.key !== "ArrowDown" || (t.stopImmediatePropagation(), t.preventDefault(), this._isOptionsOpen = !this._isOptionsOpen, this._isOptionsOpen ? (e = this.listboxRef.value) == null || e.focusFirstOrSelectedOption() : (i = this.arrowRef.value) == null || i.focus());
|
|
313
314
|
}
|
|
314
|
-
handleOptionToggled(
|
|
315
|
-
this.toggleValue(
|
|
315
|
+
handleOptionToggled(t) {
|
|
316
|
+
this.toggleValue(t.detail);
|
|
316
317
|
}
|
|
317
|
-
handleSearch(
|
|
318
|
-
|
|
318
|
+
handleSearch(t) {
|
|
319
|
+
t.stopPropagation(), this._search = t.detail.toLowerCase();
|
|
319
320
|
}
|
|
320
|
-
handleInputKeydown(
|
|
321
|
-
var
|
|
322
|
-
switch (
|
|
321
|
+
handleInputKeydown(t) {
|
|
322
|
+
var e, i, s;
|
|
323
|
+
switch (t.key) {
|
|
323
324
|
case ",":
|
|
324
|
-
this.multiple && (
|
|
325
|
+
this.multiple && (t.preventDefault(), this.addValue());
|
|
325
326
|
break;
|
|
326
327
|
case "Enter":
|
|
327
|
-
|
|
328
|
+
t.preventDefault(), this.addValue();
|
|
328
329
|
break;
|
|
329
330
|
case "Backspace":
|
|
330
|
-
!this._search && ((
|
|
331
|
+
!this._search && ((e = this.inputRef.value) == null ? void 0 : e.type) === "hidden" && this.removeLastValue(t);
|
|
331
332
|
break;
|
|
332
333
|
case "Tab":
|
|
333
334
|
case "ArrowDown":
|
|
334
|
-
|
|
335
|
+
t.shiftKey || ((i = this.listboxRef.value) == null || i.focusFirstOrSelectedOption(), t.preventDefault());
|
|
335
336
|
break;
|
|
336
337
|
case "Escape":
|
|
337
|
-
this._isOptionsOpen = !1, (s = this.arrowRef.value) == null || s.focus(),
|
|
338
|
+
this._isOptionsOpen = !1, (s = this.arrowRef.value) == null || s.focus(), t.preventDefault();
|
|
338
339
|
break;
|
|
339
340
|
}
|
|
340
341
|
}
|
|
341
|
-
handleTagRemove(
|
|
342
|
-
this.removeSelected(
|
|
342
|
+
handleTagRemove(t) {
|
|
343
|
+
this.removeSelected(t);
|
|
343
344
|
}
|
|
344
345
|
blurInput() {
|
|
345
346
|
this.inputRef.value && this.inputRef.value.matches(":focus") && this.inputRef.value.blur();
|
|
346
347
|
}
|
|
347
348
|
checkForMatches() {
|
|
348
|
-
var
|
|
349
|
-
const
|
|
350
|
-
if (!
|
|
349
|
+
var l;
|
|
350
|
+
const t = ((l = this.inputRef.value) == null ? void 0 : l.value) || this._search || "", e = t.trim().toLowerCase() || "";
|
|
351
|
+
if (!e) {
|
|
351
352
|
!this.multiple && this._value[0] && this.removeValue(this._value[0]), this.resetComboboxInput(!1);
|
|
352
353
|
return;
|
|
353
354
|
}
|
|
354
|
-
const i = this._value.find((a) => a.toLowerCase() ===
|
|
355
|
+
const i = this._value.find((a) => a.toLowerCase() === e), s = this._options.filter(
|
|
355
356
|
(a) => {
|
|
356
357
|
var u;
|
|
357
|
-
return ((u = a.label) == null ? void 0 : u.toLowerCase().includes(
|
|
358
|
+
return ((u = a.label) == null ? void 0 : u.toLowerCase().includes(e)) ?? !1;
|
|
358
359
|
}
|
|
359
|
-
),
|
|
360
|
+
), h = s.find(
|
|
360
361
|
(a) => {
|
|
361
362
|
var u;
|
|
362
|
-
return ((u = a.label) == null ? void 0 : u.toLowerCase()) ===
|
|
363
|
+
return ((u = a.label) == null ? void 0 : u.toLowerCase()) === e || a.value.toLowerCase() === e;
|
|
363
364
|
}
|
|
364
365
|
);
|
|
365
366
|
switch (!0) {
|
|
366
|
-
case ((s.length === 0 || !
|
|
367
|
-
this._addValueText =
|
|
367
|
+
case ((s.length === 0 || !h) && this.allowUserInput):
|
|
368
|
+
this._addValueText = t, this._userInfoMessage = "";
|
|
368
369
|
break;
|
|
369
370
|
case (s.length === 0 && !this.allowUserInput):
|
|
370
371
|
this._addValueText = null, this._userInfoMessage = "Ingen match i søket";
|
|
@@ -379,41 +380,41 @@ let h = class extends V {
|
|
|
379
380
|
this._addValueText = null, this._userInfoMessage = "";
|
|
380
381
|
}
|
|
381
382
|
}
|
|
382
|
-
findValueInOptions(
|
|
383
|
-
return this.options.find((
|
|
383
|
+
findValueInOptions(t) {
|
|
384
|
+
return this.options.find((e) => e.value === t || e.label === t) || null;
|
|
384
385
|
}
|
|
385
|
-
findIndexInOptions(
|
|
386
|
-
return this._options.findIndex((
|
|
386
|
+
findIndexInOptions(t) {
|
|
387
|
+
return this._options.findIndex((e) => e.value === t || e.label === t);
|
|
387
388
|
}
|
|
388
389
|
isMaxItemsReached() {
|
|
389
|
-
const
|
|
390
|
-
return
|
|
390
|
+
const t = this.maxlength !== null && this._value.length >= this.maxlength;
|
|
391
|
+
return t ? this._maxIsReached = !0 : this._maxIsReached = !1, t;
|
|
391
392
|
}
|
|
392
|
-
toggleValue(
|
|
393
|
-
var
|
|
393
|
+
toggleValue(t) {
|
|
394
|
+
var O, $;
|
|
394
395
|
if (this.disabled) return;
|
|
395
396
|
this.touched = !0, this._userInfoMessage = "", this._addValueText = null;
|
|
396
|
-
const
|
|
397
|
+
const e = ((O = this.findValueInOptions(t)) == null ? void 0 : O.value) || null, i = this._value.includes(t || e || ""), s = !!e, h = (($ = this._options.find((m) => m.value === t)) == null ? void 0 : $.disabled) || !1, l = !(t != null && t.trim()), a = !this.multiple, u = this.multiple, y = this.isMaxItemsReached();
|
|
397
398
|
let p = !1, b = !0, g = "", x = "";
|
|
398
|
-
|
|
399
|
+
h || (!s && this.allowUserInput && !l ? (this.addNewUserValue(t), g = "Ny verdi lagt til", p = !u) : !s && !this.allowUserInput ? (a && this._value[0] && this.removeValue(this._value[0]), b = !1, p = !0, g = "Ingen treff i søket") : i ? (this.removeValue(e), p = !0) : l && a ? (this.removeAllSelected(), p = !0) : a ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(e), p = !1, this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = "", this.inputRef.value.blur())) : u && !y ? (this.setSelected(e), p = !0) : u && y ? (this._userInfoMessage = "Maks antall valg nådd", b = !1, x = t) : (a && this.removeAllSelected(), this._userInfoMessage = "Ingen gyldig verdi valgt", b = !1, p = !0, x = t), this._isOptionsOpen = p, p || window.setTimeout(() => {
|
|
399
400
|
var m;
|
|
400
401
|
(m = this.focusRef.value) == null || m.focus();
|
|
401
402
|
}, 0), this._userInfoMessage = g, this._search = x || "", this.resetComboboxInput(b), u && this.isMaxItemsReached());
|
|
402
403
|
}
|
|
403
|
-
setSelected(
|
|
404
|
-
if (!this._value.includes(
|
|
404
|
+
setSelected(t) {
|
|
405
|
+
if (!this._value.includes(t)) {
|
|
405
406
|
if (this.multiple && this.isMaxItemsReached()) {
|
|
406
407
|
this._userInfoMessage = "Maks antall valg nådd";
|
|
407
408
|
return;
|
|
408
409
|
}
|
|
409
|
-
!this.multiple && this.removeAllSelected(), this._value =
|
|
410
|
+
!this.multiple && this.removeAllSelected(), this._value = t ? [...this._value, t] : this._value, this._options = this._options.map((e) => (e.value === t && (e.selected = !0), e)), this.resetComboboxInput(!0);
|
|
410
411
|
}
|
|
411
412
|
}
|
|
412
|
-
removeSelected(
|
|
413
|
-
if (!
|
|
414
|
-
this._value = this._value.filter((i) => i !==
|
|
415
|
-
const
|
|
416
|
-
|
|
413
|
+
removeSelected(t) {
|
|
414
|
+
if (!t) return;
|
|
415
|
+
this._value = this._value.filter((i) => i !== t);
|
|
416
|
+
const e = this.findValueInOptions(t);
|
|
417
|
+
e ? (e.selected = !1, e.userAdded ? (this._options = [...this._options.filter((i) => i.value !== t)], this.options = [...this.options.filter((i) => i.value !== t)]) : this._options = [...this._options, e]) : !t && !this.multiple && (this._options = this._options.map((i) => (i.selected = !1, i)));
|
|
417
418
|
}
|
|
418
419
|
addAllOptions() {
|
|
419
420
|
if (this.multiple) {
|
|
@@ -421,113 +422,113 @@ let h = class extends V {
|
|
|
421
422
|
this._userInfoMessage = "For mange valgt";
|
|
422
423
|
return;
|
|
423
424
|
}
|
|
424
|
-
this._value = this._options.map((
|
|
425
|
+
this._value = this._options.map((t) => t.value), this._options = this._options.map((t) => (t.selected = !0, t)), this.requestUpdate();
|
|
425
426
|
}
|
|
426
427
|
}
|
|
427
428
|
removeAllSelected() {
|
|
428
|
-
this._value = [], this._options = this._options.map((
|
|
429
|
+
this._value = [], this._options = this._options.map((t) => (t.selected = !1, t)), this._options = this._options.filter((t) => !t.userAdded), this.requestUpdate();
|
|
429
430
|
}
|
|
430
431
|
addValue() {
|
|
431
|
-
var
|
|
432
|
-
const
|
|
433
|
-
this._search =
|
|
432
|
+
var e;
|
|
433
|
+
const t = ((e = this.inputRef.value) == null ? void 0 : e.value.trim()) || "";
|
|
434
|
+
this._search = t, this.toggleValue(t);
|
|
434
435
|
}
|
|
435
|
-
removeValue(
|
|
436
|
-
this._value = this.multiple ? this._value.filter((
|
|
436
|
+
removeValue(t) {
|
|
437
|
+
this._value = this.multiple ? this._value.filter((e) => e !== t) : [], this.removeSelected(t);
|
|
437
438
|
}
|
|
438
|
-
addNewUserValue(
|
|
439
|
-
if (!
|
|
439
|
+
addNewUserValue(t) {
|
|
440
|
+
if (!t || t.trim() === "") return;
|
|
440
441
|
if (!this.multiple)
|
|
441
|
-
this._value[0] && this.removeSelected(this._value[0]), this._value = [
|
|
442
|
-
else if (!this.findValueInOptions(
|
|
442
|
+
this._value[0] && this.removeSelected(this._value[0]), this._value = [t], this._isOptionsOpen = !1, this.blurInput();
|
|
443
|
+
else if (!this.findValueInOptions(t)) {
|
|
443
444
|
if (this.isMaxItemsReached()) return;
|
|
444
|
-
this._value = [...this._value,
|
|
445
|
+
this._value = [...this._value, t];
|
|
445
446
|
}
|
|
446
|
-
const
|
|
447
|
-
this.options = [
|
|
447
|
+
const e = { value: t, label: t, userAdded: !0 };
|
|
448
|
+
this.options = [e, ...this.options], this._options = [e, ...this._options], this.setSelected(t), this.requestUpdate();
|
|
448
449
|
}
|
|
449
|
-
resetComboboxInput(
|
|
450
|
-
if (this._addValueText = null, this.inputRef.value && this.inputRef.value.type !== "hidden" &&
|
|
450
|
+
resetComboboxInput(t = !0) {
|
|
451
|
+
if (this._addValueText = null, this.inputRef.value && this.inputRef.value.type !== "hidden" && t)
|
|
451
452
|
if (this._search = "", this.multiple)
|
|
452
453
|
this.inputRef.value.value = "";
|
|
453
454
|
else {
|
|
454
|
-
const
|
|
455
|
+
const e = this.findValueInOptions(this._value[0]);
|
|
455
456
|
window.setTimeout(() => {
|
|
456
|
-
!this.inputRef.value || this.inputRef.value.type === "hidden" || (this.inputRef.value.value = this.displayValueAs === "label" && (
|
|
457
|
+
!this.inputRef.value || this.inputRef.value.type === "hidden" || (this.inputRef.value.value = this.displayValueAs === "label" && (e != null && e.label) ? e.label : this._value[0] || "");
|
|
457
458
|
}, 0), this._userInfoMessage = "";
|
|
458
459
|
}
|
|
459
460
|
this._options = [...this.options];
|
|
460
461
|
}
|
|
461
|
-
removeLastValue(
|
|
462
|
+
removeLastValue(t) {
|
|
462
463
|
if (this._value.length === 0) return;
|
|
463
|
-
|
|
464
|
-
const
|
|
465
|
-
|
|
464
|
+
t.preventDefault();
|
|
465
|
+
const e = this._value[this._value.length - 1];
|
|
466
|
+
e && this.removeSelected(e), this.isMaxItemsReached();
|
|
466
467
|
}
|
|
467
468
|
};
|
|
468
|
-
|
|
469
|
+
n([
|
|
469
470
|
r({ type: String, reflect: !0 })
|
|
470
|
-
],
|
|
471
|
-
|
|
471
|
+
], o.prototype, "value", 2);
|
|
472
|
+
n([
|
|
472
473
|
r({ type: Array })
|
|
473
|
-
],
|
|
474
|
-
|
|
474
|
+
], o.prototype, "options", 2);
|
|
475
|
+
n([
|
|
475
476
|
r({ type: Array })
|
|
476
|
-
],
|
|
477
|
-
|
|
477
|
+
], o.prototype, "defaultOptions", 2);
|
|
478
|
+
n([
|
|
478
479
|
r({ type: Boolean })
|
|
479
|
-
],
|
|
480
|
-
|
|
480
|
+
], o.prototype, "allowUserInput", 2);
|
|
481
|
+
n([
|
|
481
482
|
r({ type: Boolean })
|
|
482
|
-
],
|
|
483
|
-
|
|
483
|
+
], o.prototype, "typeahead", 2);
|
|
484
|
+
n([
|
|
484
485
|
r({ type: Boolean })
|
|
485
|
-
],
|
|
486
|
-
|
|
486
|
+
], o.prototype, "includeSearch", 2);
|
|
487
|
+
n([
|
|
487
488
|
r({ type: String })
|
|
488
|
-
],
|
|
489
|
-
|
|
489
|
+
], o.prototype, "searchPlaceholder", 2);
|
|
490
|
+
n([
|
|
490
491
|
r({ type: Boolean })
|
|
491
|
-
],
|
|
492
|
-
|
|
492
|
+
], o.prototype, "multiple", 2);
|
|
493
|
+
n([
|
|
493
494
|
r({ type: Number })
|
|
494
|
-
],
|
|
495
|
-
|
|
495
|
+
], o.prototype, "maxlength", 2);
|
|
496
|
+
n([
|
|
496
497
|
r({ type: String })
|
|
497
|
-
],
|
|
498
|
-
|
|
498
|
+
], o.prototype, "displayValueAs", 2);
|
|
499
|
+
n([
|
|
499
500
|
r({ type: String })
|
|
500
|
-
],
|
|
501
|
-
|
|
501
|
+
], o.prototype, "tagPlacement", 2);
|
|
502
|
+
n([
|
|
502
503
|
c()
|
|
503
|
-
],
|
|
504
|
-
|
|
504
|
+
], o.prototype, "_options", 2);
|
|
505
|
+
n([
|
|
505
506
|
c()
|
|
506
|
-
],
|
|
507
|
-
|
|
507
|
+
], o.prototype, "_isOptionsOpen", 2);
|
|
508
|
+
n([
|
|
508
509
|
c()
|
|
509
|
-
],
|
|
510
|
-
|
|
510
|
+
], o.prototype, "_value", 2);
|
|
511
|
+
n([
|
|
511
512
|
c()
|
|
512
|
-
],
|
|
513
|
-
|
|
513
|
+
], o.prototype, "_userInfoMessage", 2);
|
|
514
|
+
n([
|
|
514
515
|
c()
|
|
515
|
-
],
|
|
516
|
-
|
|
516
|
+
], o.prototype, "_addValueText", 2);
|
|
517
|
+
n([
|
|
517
518
|
c()
|
|
518
|
-
],
|
|
519
|
-
|
|
519
|
+
], o.prototype, "_maxIsReached", 2);
|
|
520
|
+
n([
|
|
520
521
|
c()
|
|
521
|
-
],
|
|
522
|
-
|
|
522
|
+
], o.prototype, "_search", 2);
|
|
523
|
+
n([
|
|
523
524
|
c()
|
|
524
|
-
],
|
|
525
|
-
|
|
525
|
+
], o.prototype, "_inputFocus", 2);
|
|
526
|
+
n([
|
|
526
527
|
c()
|
|
527
|
-
],
|
|
528
|
-
|
|
528
|
+
], o.prototype, "_editingSingleValue", 2);
|
|
529
|
+
o = n([
|
|
529
530
|
w("pkt-combobox")
|
|
530
|
-
],
|
|
531
|
+
], o);
|
|
531
532
|
export {
|
|
532
|
-
|
|
533
|
+
o as P
|
|
533
534
|
};
|
package/dist/pkt-combobox.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-CNH-j9Za.cjs"),o=e.PktCombobox;Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>e.PktCombobox});exports.default=o;
|
package/dist/pkt-combobox.js
CHANGED
package/dist/pkt-index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-ZP5-fqlt.cjs"),l=require("./accordionitem-BOmnm80g.cjs"),b=require("./backlink-BT7DO6rV.cjs"),m=require("./button-BfqxLnMT.cjs"),P=require("./calendar-CL9O0tLP.cjs"),g=require("./card-B9RPShvV.cjs"),h=require("./combobox-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-ZP5-fqlt.cjs"),l=require("./accordionitem-BOmnm80g.cjs"),b=require("./backlink-BT7DO6rV.cjs"),m=require("./button-BfqxLnMT.cjs"),P=require("./calendar-CL9O0tLP.cjs"),g=require("./card-B9RPShvV.cjs"),h=require("./combobox-CNH-j9Za.cjs"),f=require("./consent-DFrsiYGQ.cjs"),y=require("./checkbox-CH8xeK-0.cjs"),t=require("./element-D62wHiNU.cjs"),O=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-BfgcOXko.cjs"),j=require("./class-map-CG3vIaNm.cjs"),k=require("./datepicker-CV73pLqD.cjs"),q=require("./helptext-D1fkGmfT.cjs"),x=require("./heading-H_FWjo2k.cjs"),C=require("./icon-__Hjt2XZ.cjs"),v=require("./input-wrapper-C9rZEgju.cjs"),S=require("./link-CyiVlb-7.cjs"),$=require("./linkcard-fH9uydjS.cjs"),L=require("./loader-C-3l7kb9.cjs"),T=require("./messagebox---xPIAwR.cjs"),_=require("./modal-IjDRQfX1.cjs"),A=require("./progressbar-DJzEC7cx.cjs"),p=require("./radiobutton-DEboKECm.cjs"),B=require("./tag-BKq07hGI.cjs"),I=require("./textarea-CXu8UUsY.cjs"),D=require("./textinput-C6wccDhZ.cjs"),M=require("./select-Cf1RWSsI.cjs");var R=Object.defineProperty,H=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?H(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&R(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new O.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
|
|
2
2
|
<div class="${j.e(e)}">
|
|
3
3
|
<h1 class="pkt-txt-28">${this.string}</h1>
|
|
4
4
|
|
package/dist/pkt-index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { P as O } from "./button-x6Xw-5w0.js";
|
|
|
5
5
|
import { c as d } from "./calendar-ChphTIhk.js";
|
|
6
6
|
import { P as j } from "./calendar-ChphTIhk.js";
|
|
7
7
|
import { P as G } from "./card-en2KhOPO.js";
|
|
8
|
-
import { P as K } from "./combobox-
|
|
8
|
+
import { P as K } from "./combobox-C_pTRtsQ.js";
|
|
9
9
|
import { P as U } from "./consent-CXp0bLvg.js";
|
|
10
10
|
import { P as q } from "./checkbox-DSAcMC-D.js";
|
|
11
11
|
import { P as f, t as h, x as P, n, a as c } from "./element-DJZPsA_J.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "13.6.
|
|
3
|
+
"version": "13.6.6",
|
|
4
4
|
"description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo Origo",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@babel/preset-env": "^7.28.3",
|
|
41
41
|
"@babel/preset-typescript": "^7.25.9",
|
|
42
42
|
"@oslokommune/punkt-assets": "^13.6.3",
|
|
43
|
-
"@oslokommune/punkt-css": "^13.6.
|
|
43
|
+
"@oslokommune/punkt-css": "^13.6.5",
|
|
44
44
|
"@testing-library/jest-dom": "^6.6.3",
|
|
45
45
|
"@vitest/ui": "^1.0.0",
|
|
46
46
|
"jest-axe": "^9.0.0",
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
73
73
|
},
|
|
74
74
|
"license": "MIT",
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "90347a2abe1e35e1f43eb7813d5ae6dba16f2c85"
|
|
76
76
|
}
|
|
@@ -279,6 +279,28 @@ describe('PktCombobox', () => {
|
|
|
279
279
|
expect(combobox.options.some((opt) => opt.userAdded)).toBe(true)
|
|
280
280
|
expect(combobox.options.some((opt) => opt.value === 'default1')).toBe(true)
|
|
281
281
|
})
|
|
282
|
+
|
|
283
|
+
test('preserves userAdded option when parent replaces options by overwriting options property', async () => {
|
|
284
|
+
const container = await createCombobox('id="test" name="test" allowUserInput')
|
|
285
|
+
const combobox = container.querySelector('pkt-combobox') as PktCombobox
|
|
286
|
+
await combobox.updateComplete
|
|
287
|
+
;(combobox as any).addNewUserValue('userAdded')
|
|
288
|
+
await combobox.updateComplete
|
|
289
|
+
|
|
290
|
+
expect(combobox.options.some((o: any) => o.value === 'userAdded' && o.userAdded)).toBe(true)
|
|
291
|
+
expect(combobox['_value']).toContain('userAdded')
|
|
292
|
+
|
|
293
|
+
combobox.options = [{ value: 'external1', label: 'External 1' }]
|
|
294
|
+
await combobox.updateComplete
|
|
295
|
+
|
|
296
|
+
const hasUserAdded = combobox.options.some((o: any) => o.value === 'userAdded' && o.userAdded)
|
|
297
|
+
const hasExternal = combobox.options.some((o: any) => o.value === 'external1')
|
|
298
|
+
|
|
299
|
+
expect(hasExternal).toBe(true)
|
|
300
|
+
expect(hasUserAdded).toBe(true)
|
|
301
|
+
|
|
302
|
+
expect(combobox['_value']).toContain('userAdded')
|
|
303
|
+
})
|
|
282
304
|
})
|
|
283
305
|
|
|
284
306
|
describe('Value handling', () => {
|
|
@@ -126,7 +126,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
|
|
|
126
126
|
if (this.defaultOptions && this.defaultOptions.length) {
|
|
127
127
|
const userAdded = this.options?.filter((opt) => opt.userAdded) || []
|
|
128
128
|
this.options = [...userAdded, ...JSON.parse(JSON.stringify(this.defaultOptions))]
|
|
129
|
-
this._options = [...this.options]
|
|
129
|
+
this._options = Array.isArray(this.options) ? [...this.options] : []
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
// If options are provided via the options slot, we need to extract them
|
|
@@ -179,19 +179,30 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
|
|
|
179
179
|
|
|
180
180
|
// If defaultOptions changed, update options (preserving userAdded)
|
|
181
181
|
if (changedProperties.has('defaultOptions') && this.defaultOptions.length) {
|
|
182
|
-
const userAdded =
|
|
182
|
+
const userAdded =
|
|
183
|
+
(Array.isArray(this.options) ? this.options : []).filter((opt) => opt.userAdded) || []
|
|
183
184
|
this.options = [...userAdded, ...JSON.parse(JSON.stringify(this.defaultOptions))]
|
|
184
|
-
this._options = [...this.options]
|
|
185
|
+
this._options = Array.isArray(this.options) ? [...this.options] : []
|
|
185
186
|
}
|
|
186
187
|
|
|
187
188
|
if (changedProperties.has('options')) {
|
|
188
189
|
// If options change, we need to update _options, but we need to preserve userAdded values
|
|
189
|
-
|
|
190
|
-
|
|
190
|
+
// Bug fix 2025-09-19: Fetch userAdded from _old_ options to prevent accidental overwrite
|
|
191
|
+
const prevOptions =
|
|
192
|
+
(changedProperties.get('options') as IPktComboboxOption[]) || this._options || []
|
|
193
|
+
const userAddedValues = prevOptions.filter((option) => option && option.userAdded)
|
|
191
194
|
const filteredUserAdded = userAddedValues.filter(
|
|
192
|
-
(userOpt) =>
|
|
195
|
+
(userOpt) =>
|
|
196
|
+
!(Array.isArray(this.options) ? this.options : []).some(
|
|
197
|
+
(opt) => opt.value === userOpt.value,
|
|
198
|
+
),
|
|
193
199
|
)
|
|
194
|
-
|
|
200
|
+
const mergedOptions = [...filteredUserAdded, ...this.options]
|
|
201
|
+
this._options = mergedOptions
|
|
202
|
+
if (filteredUserAdded.length > 0) {
|
|
203
|
+
this.options = mergedOptions
|
|
204
|
+
}
|
|
205
|
+
|
|
195
206
|
this._options.forEach((option) => {
|
|
196
207
|
if (option.value && !option.label) {
|
|
197
208
|
option.label = option.value
|
|
@@ -232,7 +243,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
|
|
|
232
243
|
}
|
|
233
244
|
}
|
|
234
245
|
if (name === 'options') {
|
|
235
|
-
this._options = this.options
|
|
246
|
+
this._options = Array.isArray(this.options) ? [...this.options] : []
|
|
236
247
|
this._options.forEach((option) => {
|
|
237
248
|
if (option.value && !option.label) {
|
|
238
249
|
option.label = option.value
|