@oslokommune/punkt-elements 13.2.0 → 13.2.4
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-CijGa9Fr.cjs → combobox-B7cWV_90.cjs} +4 -4
- package/dist/{combobox-Cwg9Rkmz.js → combobox-DoK5e7Rc.js} +111 -109
- 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.ts +23 -2
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.2.4](https://github.com/oslokommune/punkt/compare/13.2.3...13.2.4) (2025-08-27)
|
|
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.2.0](https://github.com/oslokommune/punkt/compare/13.1.2...13.2.0) (2025-08-19)
|
|
9
26
|
|
|
10
27
|
### ⚠ BREAKING CHANGES
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const a=require("./element-6DBpyGQm.cjs"),c=require("./if-defined-Cni-RHLS.cjs"),d=require("./state-DPobt-Yz.cjs"),r=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),$=require("./repeat-CDsZqct8.cjs"),I=require("./input-element-C4xJoM-X.cjs"),y=require("./pkt-options-controller-CiuBG6Lt.cjs"),w=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./icon-B_ryAy4Q.cjs");require("./tag-DPk3fpEg.cjs");require("./listbox-C4supLfR.cjs");const C={displayValueAs:{default:"label"}},
|
|
1
|
+
"use strict";const a=require("./element-6DBpyGQm.cjs"),c=require("./if-defined-Cni-RHLS.cjs"),d=require("./state-DPobt-Yz.cjs"),r=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),$=require("./repeat-CDsZqct8.cjs"),I=require("./input-element-C4xJoM-X.cjs"),y=require("./pkt-options-controller-CiuBG6Lt.cjs"),w=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./icon-B_ryAy4Q.cjs");require("./tag-DPk3fpEg.cjs");require("./listbox-C4supLfR.cjs");const C={displayValueAs:{default:"label"}},V={props:C};var R=Object.defineProperty,S=Object.getOwnPropertyDescriptor,o=(v,e,t,i)=>{for(var s=i>1?void 0:i?S(e,t):e,l=v.length-1,h;l>=0;l--)(h=v[l])&&(s=(i?h(e,t,s):h(s))||s);return i&&s&&R(e,t,s),s};exports.PktCombobox=class extends I.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=V.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 y.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=[...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){var t;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 i=((t=this.options)==null?void 0:t.filter(s=>s.userAdded))||[];this.options=[...i,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=[...this.options]}if(e.has("options")&&this.options.length){const s=this._options.filter(l=>l.userAdded).filter(l=>!this.options.some(h=>h.value===l.value));this._options=[...s,...this.options],this._options.forEach(l=>{if(l.value&&!l.label&&(l.label=l.value),l.selected&&!this._value.includes(l.value)){const h=[...this._value];this._value=[...this._value,l.value],this.valueChanged(this._value,h)}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=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}
|
|
@@ -105,12 +105,12 @@
|
|
|
105
105
|
.value=${this._value.join(",")}
|
|
106
106
|
${r.n(this.inputRef)}
|
|
107
107
|
/>
|
|
108
|
-
`}renderSingleOrMultipleValues(){const e=!this.multiple,t=this._editingSingleValue?null:this.renderValueTag(this.findValueInOptions(this._value[0])),i=$.c(this._value,s=>s,s=>{var
|
|
108
|
+
`}renderSingleOrMultipleValues(){const e=!this.multiple,t=this._editingSingleValue?null:this.renderValueTag(this.findValueInOptions(this._value[0])),i=$.c(this._value,s=>s,s=>{var n;const l=this.findValueInOptions(s),h=(n=this.options.find(u=>u.value===s))==null?void 0:n.tagSkinColor;return a.x`
|
|
109
109
|
<pkt-tag
|
|
110
|
-
skin=${
|
|
110
|
+
skin=${h||"blue-dark"}
|
|
111
111
|
?closeTag=${!this.disabled}
|
|
112
112
|
@close=${()=>this.handleTagRemove(s)}
|
|
113
113
|
>
|
|
114
114
|
${this.renderValueTag(l)}
|
|
115
115
|
</pkt-tag>
|
|
116
|
-
`});return e?t:i}renderValueTag(e){if(!e)return"";switch(this.displayValueAs){case"prefixAndValue":return a.x`<span data-focusfix=${this.id}>${e.prefix||""} ${e.value}</span>`;case"value":return a.x`<span data-focusfix=${this.id}>${e.value}</span>`;case"label":default:return a.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 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,n;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&&((n=e.target)==null?void 0:n.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 h=this.inputRef.value.value,u=this.findValueInOptions(h);!this._value.includes(h)&&!u?this.allowUserInput?this.addNewUserValue(h):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.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 n;const e=((n=this.inputRef.value)==null?void 0:n.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(h=>h.toLowerCase()===t),s=this._options.filter(h=>{var u;return((u=h.label)==null?void 0:u.toLowerCase().includes(t))??!1}),l=s.find(h=>{var u;return((u=h.label)==null?void 0:u.toLowerCase())===t||h.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,n=!(e!=null&&e.trim()),h=!this.multiple,u=this.multiple,x=this.isMaxItemsReached();let p=!1,f=!0,v="",m="";l||(!s&&this.allowUserInput&&!n?(this.addNewUserValue(e),v="Ny verdi lagt til",p=!u):!s&&!this.allowUserInput?(h&&this._value[0]&&this.removeValue(this._value[0]),f=!1,p=!0,v="Ingen treff i søket"):i?(this.removeValue(t),p=!0):n&&h?(this.removeAllSelected(),p=!0):h?(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):(h&&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=v,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);
|
|
116
|
+
`});return e?t:i}renderValueTag(e){if(!e)return"";switch(this.displayValueAs){case"prefixAndValue":return a.x`<span data-focusfix=${this.id}>${e.prefix||""} ${e.value}</span>`;case"value":return a.x`<span data-focusfix=${this.id}>${e.value}</span>`;case"label":default:return a.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 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.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",":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);
|
|
@@ -3,8 +3,8 @@ import { o as f } from "./if-defined-CmuO4Vz9.js";
|
|
|
3
3
|
import { r as c } from "./state-Bo2bck5_.js";
|
|
4
4
|
import { e as _, n as v } from "./ref-BBYSqgeW.js";
|
|
5
5
|
import { e as w } from "./class-map-BpTj9gtz.js";
|
|
6
|
-
import { c as
|
|
7
|
-
import { P as
|
|
6
|
+
import { c as V } from "./repeat-C8BeHwYx.js";
|
|
7
|
+
import { P as R } from "./input-element-NnrDmp4r.js";
|
|
8
8
|
import { P as S } from "./pkt-options-controller-CZO1nxZ8.js";
|
|
9
9
|
import { P as C } from "./pkt-slot-controller-BPGj-LC5.js";
|
|
10
10
|
import "./input-wrapper-Dr__Sxql.js";
|
|
@@ -18,43 +18,43 @@ const A = {
|
|
|
18
18
|
}, T = {
|
|
19
19
|
props: A
|
|
20
20
|
};
|
|
21
|
-
var M = Object.defineProperty, F = Object.getOwnPropertyDescriptor, o = (
|
|
22
|
-
for (var l = s > 1 ? void 0 : s ? F(
|
|
23
|
-
(a =
|
|
24
|
-
return s && l && M(
|
|
21
|
+
var M = Object.defineProperty, F = Object.getOwnPropertyDescriptor, o = (e, t, i, s) => {
|
|
22
|
+
for (var l = s > 1 ? void 0 : s ? F(t, i) : t, n = e.length - 1, a; n >= 0; n--)
|
|
23
|
+
(a = e[n]) && (l = (s ? a(t, i, l) : a(l)) || l);
|
|
24
|
+
return s && l && M(t, i, l), l;
|
|
25
25
|
};
|
|
26
|
-
let h = class extends
|
|
26
|
+
let h = class extends R {
|
|
27
27
|
constructor() {
|
|
28
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 S(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 e;
|
|
33
|
+
if (super.connectedCallback(), document && document.body.addEventListener("click", (t) => {
|
|
34
|
+
this._isOptionsOpen && !this.contains(t.target) && this.handleFocusOut(t);
|
|
35
35
|
}), this._options = [], this.defaultOptions && this.defaultOptions.length) {
|
|
36
|
-
const
|
|
37
|
-
this.options = [...
|
|
36
|
+
const t = ((e = this.options) == null ? void 0 : e.filter((i) => i.userAdded)) || [];
|
|
37
|
+
this.options = [...t, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = [...this.options];
|
|
38
38
|
}
|
|
39
39
|
if (this.optionsController.nodes.length) {
|
|
40
|
-
const
|
|
40
|
+
const t = [];
|
|
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 || ""), t.push(s);
|
|
48
|
+
}), t.length && (this.options = [...t], this._options = [...t]);
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
updated(
|
|
52
|
-
var
|
|
53
|
-
if (
|
|
54
|
-
const i = ((
|
|
51
|
+
updated(e) {
|
|
52
|
+
var t;
|
|
53
|
+
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) {
|
|
54
|
+
const i = ((t = this.options) == null ? void 0 : t.filter((s) => s.userAdded)) || [];
|
|
55
55
|
this.options = [...i, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = [...this.options];
|
|
56
56
|
}
|
|
57
|
-
if (
|
|
57
|
+
if (e.has("options") && this.options.length) {
|
|
58
58
|
const s = this._options.filter((l) => l.userAdded).filter(
|
|
59
59
|
(l) => !this.options.some((n) => n.value === l.value)
|
|
60
60
|
);
|
|
@@ -66,17 +66,17 @@ let h = class extends V {
|
|
|
66
66
|
l.fulltext = l.value + l.label + (l.prefix || ""), l.selected = l.selected || this._value.includes(l.value);
|
|
67
67
|
});
|
|
68
68
|
}
|
|
69
|
-
|
|
69
|
+
e.has("_search") && this.dispatchEvent(
|
|
70
70
|
new CustomEvent("search", {
|
|
71
71
|
detail: this._search,
|
|
72
72
|
bubbles: !1
|
|
73
73
|
})
|
|
74
|
-
), super.updated(
|
|
74
|
+
), super.updated(e);
|
|
75
75
|
}
|
|
76
|
-
attributeChangedCallback(
|
|
77
|
-
|
|
76
|
+
attributeChangedCallback(e, t, i) {
|
|
77
|
+
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 = this.options, this._options.forEach((s) => {
|
|
78
78
|
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(
|
|
79
|
+
}), this._search = ""), super.attributeChangedCallback(e, t, i);
|
|
80
80
|
}
|
|
81
81
|
// Render methods
|
|
82
82
|
render() {
|
|
@@ -204,7 +204,7 @@ let h = class extends V {
|
|
|
204
204
|
`;
|
|
205
205
|
}
|
|
206
206
|
renderSingleOrMultipleValues() {
|
|
207
|
-
const
|
|
207
|
+
const e = !this.multiple, t = this._editingSingleValue ? null : this.renderValueTag(this.findValueInOptions(this._value[0])), i = V(
|
|
208
208
|
this._value,
|
|
209
209
|
(s) => s,
|
|
210
210
|
(s) => {
|
|
@@ -221,33 +221,33 @@ let h = class extends V {
|
|
|
221
221
|
`;
|
|
222
222
|
}
|
|
223
223
|
);
|
|
224
|
-
return
|
|
224
|
+
return e ? t : i;
|
|
225
225
|
}
|
|
226
|
-
renderValueTag(
|
|
227
|
-
if (!
|
|
226
|
+
renderValueTag(e) {
|
|
227
|
+
if (!e) return "";
|
|
228
228
|
switch (this.displayValueAs) {
|
|
229
229
|
case "prefixAndValue":
|
|
230
|
-
return d`<span data-focusfix=${this.id}>${
|
|
230
|
+
return d`<span data-focusfix=${this.id}>${e.prefix || ""} ${e.value}</span>`;
|
|
231
231
|
case "value":
|
|
232
|
-
return d`<span data-focusfix=${this.id}>${
|
|
232
|
+
return d`<span data-focusfix=${this.id}>${e.value}</span>`;
|
|
233
233
|
case "label":
|
|
234
234
|
default:
|
|
235
|
-
return d`<span data-focusfix=${this.id}>${
|
|
235
|
+
return d`<span data-focusfix=${this.id}>${e.label || e.value}</span>`;
|
|
236
236
|
}
|
|
237
237
|
}
|
|
238
238
|
// Event handlers
|
|
239
|
-
handleInput(
|
|
240
|
-
if (
|
|
239
|
+
handleInput(e) {
|
|
240
|
+
if (e.stopPropagation(), e.stopImmediatePropagation(), this.disabled) return;
|
|
241
241
|
this.touched = !0;
|
|
242
|
-
const
|
|
243
|
-
if (this._search =
|
|
242
|
+
const t = e.target;
|
|
243
|
+
if (this._search = t.value, this.checkForMatches(), this.typeahead)
|
|
244
244
|
if (this._search) {
|
|
245
245
|
if (this._options = this.options.filter(
|
|
246
246
|
(i) => {
|
|
247
247
|
var s;
|
|
248
248
|
return (s = i.fulltext) == null ? void 0 : s.toLowerCase().includes(this._search.toLowerCase());
|
|
249
249
|
}
|
|
250
|
-
),
|
|
250
|
+
), e.inputType !== "deleteContentBackward") {
|
|
251
251
|
const i = this._options.filter(
|
|
252
252
|
(s) => {
|
|
253
253
|
var l;
|
|
@@ -256,10 +256,10 @@ let h = class extends V {
|
|
|
256
256
|
);
|
|
257
257
|
if (i.length > 0 && this.inputRef.value && this.inputRef.value.type !== "hidden") {
|
|
258
258
|
const s = i[0];
|
|
259
|
-
s != null && s.label && (
|
|
260
|
-
() =>
|
|
259
|
+
s != null && s.label && (t.value = s.label, window.setTimeout(
|
|
260
|
+
() => t.setSelectionRange(this._search.length, t.value.length),
|
|
261
261
|
0
|
|
262
|
-
),
|
|
262
|
+
), t.selectionDirection = "backward");
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
265
|
} else
|
|
@@ -268,15 +268,15 @@ let h = class extends V {
|
|
|
268
268
|
handleFocus() {
|
|
269
269
|
if (!this.disabled) {
|
|
270
270
|
if (!this.multiple && this._value[0] && this.inputRef.value && this.inputRef.value.type !== "hidden") {
|
|
271
|
-
const
|
|
272
|
-
this._editingSingleValue = !0, this.inputRef.value.value = this.displayValueAs === "label" && (
|
|
271
|
+
const e = this.findValueInOptions(this._value[0]);
|
|
272
|
+
this._editingSingleValue = !0, this.inputRef.value.value = this.displayValueAs === "label" && (e != null && e.label) ? e.label : this._value[0];
|
|
273
273
|
}
|
|
274
274
|
this._inputFocus = !0, this._search = "", this._options = [...this.options], this._isOptionsOpen = !0, this.onFocus(), this.requestUpdate();
|
|
275
275
|
}
|
|
276
276
|
}
|
|
277
|
-
handleFocusOut(
|
|
278
|
-
var
|
|
279
|
-
if (!this.disabled && ((i = (
|
|
277
|
+
handleFocusOut(e) {
|
|
278
|
+
var t, i, s, l, n;
|
|
279
|
+
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 && ((n = e.target) == null ? void 0 : n.getAttribute("data-focusfix")) !== this.id && e.relatedTarget !== this.focusRef.value && e.relatedTarget !== this.inputRef.value && e.relatedTarget !== this.arrowRef.value && this._isOptionsOpen) {
|
|
280
280
|
if (this._inputFocus = !1, this._addValueText = null, this._userInfoMessage = "", this._search = "", this.inputRef.value && this.inputRef.value.type !== "hidden" && this.inputRef.value.value !== "") {
|
|
281
281
|
const a = this.inputRef.value.value, u = this.findValueInOptions(a);
|
|
282
282
|
!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 = "";
|
|
@@ -287,66 +287,68 @@ let h = class extends V {
|
|
|
287
287
|
handleBlur() {
|
|
288
288
|
this._inputFocus = !1, this._editingSingleValue = !1, this.onBlur();
|
|
289
289
|
}
|
|
290
|
-
handleInputClick(
|
|
291
|
-
var
|
|
292
|
-
this.disabled || (
|
|
290
|
+
handleInputClick(e) {
|
|
291
|
+
var t, i;
|
|
292
|
+
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));
|
|
293
293
|
}
|
|
294
|
-
handleArrowClick(
|
|
295
|
-
var
|
|
296
|
-
this.disabled ||
|
|
294
|
+
handleArrowClick(e) {
|
|
295
|
+
var t, i;
|
|
296
|
+
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());
|
|
297
297
|
}
|
|
298
|
-
handleOptionToggled(
|
|
299
|
-
this.toggleValue(
|
|
298
|
+
handleOptionToggled(e) {
|
|
299
|
+
this.toggleValue(e.detail);
|
|
300
300
|
}
|
|
301
|
-
handleSearch(
|
|
302
|
-
|
|
301
|
+
handleSearch(e) {
|
|
302
|
+
e.stopPropagation(), this._search = e.detail.toLowerCase();
|
|
303
303
|
}
|
|
304
|
-
handleInputKeydown(
|
|
305
|
-
var
|
|
306
|
-
switch (
|
|
304
|
+
handleInputKeydown(e) {
|
|
305
|
+
var t, i, s;
|
|
306
|
+
switch (e.key) {
|
|
307
307
|
case ",":
|
|
308
|
+
this.multiple && (e.preventDefault(), this.addValue());
|
|
309
|
+
break;
|
|
308
310
|
case "Enter":
|
|
309
|
-
|
|
311
|
+
e.preventDefault(), this.addValue();
|
|
310
312
|
break;
|
|
311
313
|
case "Backspace":
|
|
312
|
-
!this._search && ((
|
|
314
|
+
!this._search && ((t = this.inputRef.value) == null ? void 0 : t.type) === "hidden" && this.removeLastValue(e);
|
|
313
315
|
break;
|
|
314
316
|
case "Tab":
|
|
315
317
|
case "ArrowDown":
|
|
316
|
-
|
|
318
|
+
e.shiftKey || ((i = this.listboxRef.value) == null || i.focusFirstOrSelectedOption(), e.preventDefault());
|
|
317
319
|
break;
|
|
318
320
|
case "Escape":
|
|
319
|
-
this._isOptionsOpen = !1, (s = this.arrowRef.value) == null || s.focus(),
|
|
321
|
+
this._isOptionsOpen = !1, (s = this.arrowRef.value) == null || s.focus(), e.preventDefault();
|
|
320
322
|
break;
|
|
321
323
|
}
|
|
322
324
|
}
|
|
323
|
-
handleTagRemove(
|
|
324
|
-
this.removeSelected(
|
|
325
|
+
handleTagRemove(e) {
|
|
326
|
+
this.removeSelected(e);
|
|
325
327
|
}
|
|
326
328
|
blurInput() {
|
|
327
329
|
this.inputRef.value && this.inputRef.value.matches(":focus") && this.inputRef.value.blur();
|
|
328
330
|
}
|
|
329
331
|
checkForMatches() {
|
|
330
332
|
var n;
|
|
331
|
-
const
|
|
332
|
-
if (!
|
|
333
|
+
const e = ((n = this.inputRef.value) == null ? void 0 : n.value) || this._search || "", t = e.trim().toLowerCase() || "";
|
|
334
|
+
if (!t) {
|
|
333
335
|
!this.multiple && this._value[0] && this.removeValue(this._value[0]), this.resetComboboxInput(!1);
|
|
334
336
|
return;
|
|
335
337
|
}
|
|
336
|
-
const i = this._value.find((a) => a.toLowerCase() ===
|
|
338
|
+
const i = this._value.find((a) => a.toLowerCase() === t), s = this._options.filter(
|
|
337
339
|
(a) => {
|
|
338
340
|
var u;
|
|
339
|
-
return ((u = a.label) == null ? void 0 : u.toLowerCase().includes(
|
|
341
|
+
return ((u = a.label) == null ? void 0 : u.toLowerCase().includes(t)) ?? !1;
|
|
340
342
|
}
|
|
341
343
|
), l = s.find(
|
|
342
344
|
(a) => {
|
|
343
345
|
var u;
|
|
344
|
-
return ((u = a.label) == null ? void 0 : u.toLowerCase()) ===
|
|
346
|
+
return ((u = a.label) == null ? void 0 : u.toLowerCase()) === t || a.value.toLowerCase() === t;
|
|
345
347
|
}
|
|
346
348
|
);
|
|
347
349
|
switch (!0) {
|
|
348
350
|
case ((s.length === 0 || !l) && this.allowUserInput):
|
|
349
|
-
this._addValueText =
|
|
351
|
+
this._addValueText = e, this._userInfoMessage = "";
|
|
350
352
|
break;
|
|
351
353
|
case (s.length === 0 && !this.allowUserInput):
|
|
352
354
|
this._addValueText = null, this._userInfoMessage = "Ingen match i søket";
|
|
@@ -361,41 +363,41 @@ let h = class extends V {
|
|
|
361
363
|
this._addValueText = null, this._userInfoMessage = "";
|
|
362
364
|
}
|
|
363
365
|
}
|
|
364
|
-
findValueInOptions(
|
|
365
|
-
return this.options.find((
|
|
366
|
+
findValueInOptions(e) {
|
|
367
|
+
return this.options.find((t) => t.value === e || t.label === e) || null;
|
|
366
368
|
}
|
|
367
|
-
findIndexInOptions(
|
|
368
|
-
return this._options.findIndex((
|
|
369
|
+
findIndexInOptions(e) {
|
|
370
|
+
return this._options.findIndex((t) => t.value === e || t.label === e);
|
|
369
371
|
}
|
|
370
372
|
isMaxItemsReached() {
|
|
371
|
-
const
|
|
372
|
-
return
|
|
373
|
+
const e = this.maxlength !== null && this._value.length >= this.maxlength;
|
|
374
|
+
return e ? this._maxIsReached = !0 : this._maxIsReached = !1, e;
|
|
373
375
|
}
|
|
374
|
-
toggleValue(
|
|
376
|
+
toggleValue(e) {
|
|
375
377
|
var $, I;
|
|
376
378
|
if (this.disabled) return;
|
|
377
379
|
this.touched = !0, this._userInfoMessage = "", this._addValueText = null;
|
|
378
|
-
const
|
|
380
|
+
const t = (($ = this.findValueInOptions(e)) == null ? void 0 : $.value) || null, i = this._value.includes(e || t || ""), s = !!t, l = ((I = this._options.find((m) => m.value === e)) == null ? void 0 : I.disabled) || !1, n = !(e != null && e.trim()), a = !this.multiple, u = this.multiple, O = this.isMaxItemsReached();
|
|
379
381
|
let p = !1, b = !0, g = "", x = "";
|
|
380
|
-
l || (!s && this.allowUserInput && !n ? (this.addNewUserValue(
|
|
382
|
+
l || (!s && this.allowUserInput && !n ? (this.addNewUserValue(e), 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(t), p = !0) : n && 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())) : u && !O ? (this.setSelected(t), p = !0) : u && O ? (this._userInfoMessage = "Maks antall valg nådd", b = !1, x = e) : (a && this.removeAllSelected(), this._userInfoMessage = "Ingen gyldig verdi valgt", b = !1, p = !0, x = e), this._isOptionsOpen = p, p || window.setTimeout(() => {
|
|
381
383
|
var m;
|
|
382
384
|
(m = this.focusRef.value) == null || m.focus();
|
|
383
385
|
}, 0), this._userInfoMessage = g, this._search = x || "", this.resetComboboxInput(b), u && this.isMaxItemsReached());
|
|
384
386
|
}
|
|
385
|
-
setSelected(
|
|
386
|
-
if (!this._value.includes(
|
|
387
|
+
setSelected(e) {
|
|
388
|
+
if (!this._value.includes(e)) {
|
|
387
389
|
if (this.multiple && this.isMaxItemsReached()) {
|
|
388
390
|
this._userInfoMessage = "Maks antall valg nådd";
|
|
389
391
|
return;
|
|
390
392
|
}
|
|
391
|
-
!this.multiple && this.removeAllSelected(), this._value =
|
|
393
|
+
!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);
|
|
392
394
|
}
|
|
393
395
|
}
|
|
394
|
-
removeSelected(
|
|
395
|
-
if (!
|
|
396
|
-
this._value = this._value.filter((i) => i !==
|
|
397
|
-
const
|
|
398
|
-
|
|
396
|
+
removeSelected(e) {
|
|
397
|
+
if (!e) return;
|
|
398
|
+
this._value = this._value.filter((i) => i !== e);
|
|
399
|
+
const t = this.findValueInOptions(e);
|
|
400
|
+
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)));
|
|
399
401
|
}
|
|
400
402
|
addAllOptions() {
|
|
401
403
|
if (this.multiple) {
|
|
@@ -403,48 +405,48 @@ let h = class extends V {
|
|
|
403
405
|
this._userInfoMessage = "For mange valgt";
|
|
404
406
|
return;
|
|
405
407
|
}
|
|
406
|
-
this._value = this._options.map((
|
|
408
|
+
this._value = this._options.map((e) => e.value), this._options = this._options.map((e) => (e.selected = !0, e)), this.requestUpdate();
|
|
407
409
|
}
|
|
408
410
|
}
|
|
409
411
|
removeAllSelected() {
|
|
410
|
-
this._value = [], this._options = this._options.map((
|
|
412
|
+
this._value = [], this._options = this._options.map((e) => (e.selected = !1, e)), this._options = this._options.filter((e) => !e.userAdded), this.requestUpdate();
|
|
411
413
|
}
|
|
412
414
|
addValue() {
|
|
413
|
-
var
|
|
414
|
-
const
|
|
415
|
-
this._search =
|
|
415
|
+
var t;
|
|
416
|
+
const e = ((t = this.inputRef.value) == null ? void 0 : t.value.trim()) || "";
|
|
417
|
+
this._search = e, this.toggleValue(e);
|
|
416
418
|
}
|
|
417
|
-
removeValue(
|
|
418
|
-
this._value = this.multiple ? this._value.filter((
|
|
419
|
+
removeValue(e) {
|
|
420
|
+
this._value = this.multiple ? this._value.filter((t) => t !== e) : [], this.removeSelected(e);
|
|
419
421
|
}
|
|
420
|
-
addNewUserValue(
|
|
421
|
-
if (!
|
|
422
|
+
addNewUserValue(e) {
|
|
423
|
+
if (!e || e.trim() === "") return;
|
|
422
424
|
if (!this.multiple)
|
|
423
|
-
this._value[0] && this.removeSelected(this._value[0]), this._value = [
|
|
424
|
-
else if (!this.findValueInOptions(
|
|
425
|
+
this._value[0] && this.removeSelected(this._value[0]), this._value = [e], this._isOptionsOpen = !1, this.blurInput();
|
|
426
|
+
else if (!this.findValueInOptions(e)) {
|
|
425
427
|
if (this.isMaxItemsReached()) return;
|
|
426
|
-
this._value = [...this._value,
|
|
428
|
+
this._value = [...this._value, e];
|
|
427
429
|
}
|
|
428
|
-
const
|
|
429
|
-
this.options = [
|
|
430
|
+
const t = { value: e, label: e, userAdded: !0 };
|
|
431
|
+
this.options = [t, ...this.options], this._options = [t, ...this._options], this.setSelected(e), this.requestUpdate();
|
|
430
432
|
}
|
|
431
|
-
resetComboboxInput(
|
|
432
|
-
if (this._addValueText = null, this.inputRef.value && this.inputRef.value.type !== "hidden" &&
|
|
433
|
+
resetComboboxInput(e = !0) {
|
|
434
|
+
if (this._addValueText = null, this.inputRef.value && this.inputRef.value.type !== "hidden" && e)
|
|
433
435
|
if (this._search = "", this.multiple)
|
|
434
436
|
this.inputRef.value.value = "";
|
|
435
437
|
else {
|
|
436
|
-
const
|
|
438
|
+
const t = this.findValueInOptions(this._value[0]);
|
|
437
439
|
window.setTimeout(() => {
|
|
438
|
-
!this.inputRef.value || this.inputRef.value.type === "hidden" || (this.inputRef.value.value = this.displayValueAs === "label" && (
|
|
440
|
+
!this.inputRef.value || this.inputRef.value.type === "hidden" || (this.inputRef.value.value = this.displayValueAs === "label" && (t != null && t.label) ? t.label : this._value[0] || "");
|
|
439
441
|
}, 0), this._userInfoMessage = "";
|
|
440
442
|
}
|
|
441
443
|
this._options = [...this.options];
|
|
442
444
|
}
|
|
443
|
-
removeLastValue(
|
|
445
|
+
removeLastValue(e) {
|
|
444
446
|
if (this._value.length === 0) return;
|
|
445
|
-
|
|
446
|
-
const
|
|
447
|
-
|
|
447
|
+
e.preventDefault();
|
|
448
|
+
const t = this._value[this._value.length - 1];
|
|
449
|
+
t && this.removeSelected(t), this.isMaxItemsReached();
|
|
448
450
|
}
|
|
449
451
|
};
|
|
450
452
|
o([
|
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-B7cWV_90.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 P=require("./alert-BH0lJ2ny.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),d=require("./backlink-C5jQRMwJ.cjs"),b=require("./button-CDocR7iN.cjs"),k=require("./calendar-BZe2D4Sr.cjs"),m=require("./card-Bx36j0q4.cjs"),g=require("./combobox-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-BH0lJ2ny.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),d=require("./backlink-C5jQRMwJ.cjs"),b=require("./button-CDocR7iN.cjs"),k=require("./calendar-BZe2D4Sr.cjs"),m=require("./card-Bx36j0q4.cjs"),g=require("./combobox-B7cWV_90.cjs"),h=require("./consent-DrS71kvz.cjs"),f=require("./checkbox-wJ26voZd.cjs"),t=require("./element-6DBpyGQm.cjs"),y=require("./pkt-slot-controller-BzddBp7z.cjs"),s=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),j=require("./datepicker-BhrUneAP.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-BRE_iFtR.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-DTkjNlmy.cjs"),$=require("./linkcard-BlMhPNry.cjs"),L=require("./loader-CHPxY9c6.cjs"),_=require("./messagebox-CqUBJs_D.cjs"),A=require("./modal-BdA5aWGU.cjs"),B=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),T=require("./tag-DPk3fpEg.cjs"),I=require("./textarea-CPXsMFUq.cjs"),M=require("./textinput-aNI5kibM.cjs"),R=require("./select-DUeTm8ac.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(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&&H(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 y.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="${O.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 T } from "./button-DrrEvUy9.js";
|
|
|
5
5
|
import { c as f } from "./calendar-DevQhOup.js";
|
|
6
6
|
import { P as D } from "./calendar-DevQhOup.js";
|
|
7
7
|
import { P as G } from "./card-Djnd-pgo.js";
|
|
8
|
-
import { P as K } from "./combobox-
|
|
8
|
+
import { P as K } from "./combobox-DoK5e7Rc.js";
|
|
9
9
|
import { P as U } from "./consent-CftYu8Di.js";
|
|
10
10
|
import { P as q } from "./checkbox-CTRbpbye.js";
|
|
11
11
|
import { P as k, t as h, x as P, n, a as c } from "./element-CgEWt74-.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "13.2.
|
|
3
|
+
"version": "13.2.4",
|
|
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",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@oslokommune/punkt-assets": "^13.0.0",
|
|
34
|
-
"@oslokommune/punkt-css": "^13.2.
|
|
34
|
+
"@oslokommune/punkt-css": "^13.2.3",
|
|
35
35
|
"sass": "^1.78.0",
|
|
36
36
|
"typescript": "^5.6.2",
|
|
37
37
|
"vite": "^5.4.18",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
59
59
|
},
|
|
60
60
|
"license": "MIT",
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "f777f10f0637de10ff45fe6a5b6d9c7e4abd70ff"
|
|
62
62
|
}
|
|
@@ -162,7 +162,15 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
|
|
|
162
162
|
this.valueChanged(this._value, changedProperties.get('_value') as string[])
|
|
163
163
|
}
|
|
164
164
|
if (changedProperties.has('value')) {
|
|
165
|
-
|
|
165
|
+
if (Array.isArray(this.value)) {
|
|
166
|
+
this._value = this.value
|
|
167
|
+
} else if (this.value && this.multiple) {
|
|
168
|
+
this._value = this.value.split(',')
|
|
169
|
+
} else if (this.value) {
|
|
170
|
+
this._value = [this.value]
|
|
171
|
+
} else {
|
|
172
|
+
this._value = []
|
|
173
|
+
}
|
|
166
174
|
if (!this.multiple && this._value.length > 1) {
|
|
167
175
|
this._value = [this._value[0]]
|
|
168
176
|
}
|
|
@@ -211,7 +219,15 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
|
|
|
211
219
|
|
|
212
220
|
attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
|
|
213
221
|
if (name === 'value') {
|
|
214
|
-
|
|
222
|
+
if (Array.isArray(this.value)) {
|
|
223
|
+
this._value = this.value
|
|
224
|
+
} else if (this.value && this.multiple) {
|
|
225
|
+
this._value = this.value.split(',')
|
|
226
|
+
} else if (this.value) {
|
|
227
|
+
this._value = [this.value]
|
|
228
|
+
} else {
|
|
229
|
+
this._value = []
|
|
230
|
+
}
|
|
215
231
|
if (!this.multiple && this._value.length > 1) {
|
|
216
232
|
this._value = [this._value[0]]
|
|
217
233
|
}
|
|
@@ -579,6 +595,11 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
|
|
|
579
595
|
private handleInputKeydown(e: KeyboardEvent): void {
|
|
580
596
|
switch (e.key) {
|
|
581
597
|
case ',':
|
|
598
|
+
if (this.multiple) {
|
|
599
|
+
e.preventDefault()
|
|
600
|
+
this.addValue()
|
|
601
|
+
}
|
|
602
|
+
break
|
|
582
603
|
case 'Enter':
|
|
583
604
|
e.preventDefault()
|
|
584
605
|
this.addValue()
|