@oslokommune/punkt-elements 13.5.10 → 13.5.11

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [13.5.11](https://github.com/oslokommune/punkt/compare/13.5.10...13.5.11) (2025-09-11)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.5.10](https://github.com/oslokommune/punkt/compare/13.5.9...13.5.10) (2025-09-11)
 
 ### ⚠ BREAKING CHANGES

package/dist/{combobox-yE4aYhTi.js → combobox-BXP1PL0M.js}

@@ -1,12 +1,12 @@
-import { E as y, x as d, n as r, a as k } from "./element-CgEWt74-.js";
+import { E as k, x as d, n as r, a as w } from "./element-CgEWt74-.js";
 import { o as f } from "./if-defined-CmuO4Vz9.js";
 import { r as c } from "./state-Bo2bck5_.js";
 import { e as _, n as v } from "./ref-BBYSqgeW.js";
-import { e as w } from "./class-map-BpTj9gtz.js";
-import { c as V } from "./repeat-C8BeHwYx.js";
-import { P as R } from "./input-element-NnrDmp4r.js";
-import { P as S } from "./pkt-options-controller-CZO1nxZ8.js";
-import { P as C } from "./pkt-slot-controller-BPGj-LC5.js";
+import { e as y } from "./class-map-BpTj9gtz.js";
+import { c as R } from "./repeat-C8BeHwYx.js";
+import { P as V } from "./input-element-NnrDmp4r.js";
+import { P as C } from "./pkt-options-controller-CZO1nxZ8.js";
+import { P as S } from "./pkt-slot-controller-BPGj-LC5.js";
 import "./input-wrapper-Dr__Sxql.js";
 import "./icon-CC1js8eR.js";
 import "./tag-DyXzTY68.js";
@@ -18,14 +18,14 @@ const A = {
 }, T = {
   props: A
 };
-var M = Object.defineProperty, F = Object.getOwnPropertyDescriptor, o = (e, t, i, s) => {
-  for (var l = s > 1 ? void 0 : s ? F(t, i) : t, n = e.length - 1, a; n >= 0; n--)
+var M = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (e, t, i, s) => {
+  for (var l = s > 1 ? void 0 : s ? P(t, i) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (l = (s ? a(t, i, l) : a(l)) || l);
   return s && l && M(t, i, l), l;
 };
-let h = class extends R {
+let h = class extends V {
   constructor() {
-    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;
+    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 C(this), this.slotController = new S(this, this.helptextSlot), this.slotController.skipOptions = !0;
   }
   // Lifecycle methods
   connectedCallback() {
@@ -104,7 +104,7 @@ let h = class extends R {
         <div class="pkt-contents" ${v(this.helptextSlot)} name="helptext" slot="helptext"></div>
         <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
           <div
-            class=${w({
+            class=${y({
       "pkt-combobox__input": !0,
       "pkt-combobox__input--fullwidth": this.fullwidth,
       "pkt-combobox__input--open": this._isOptionsOpen,
@@ -114,7 +114,9 @@ let h = class extends R {
             tabindex="-1"
             @click=${this.handleInputClick}
           >
-            ${this.placeholder && (!this._value.length || this.multiple && this.tagPlacement == "outside") && !this._inputFocus ? d`<span class="pkt-combobox__placeholder">${this.placeholder}</span>` : this.tagPlacement !== "outside" ? this.renderSingleOrMultipleValues() : y}
+            ${this.placeholder && (!this._value.length || this.multiple && this.tagPlacement == "outside") && !this._inputFocus ? d`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
+                  >${this.placeholder}</span
+                >` : this.tagPlacement !== "outside" ? this.renderSingleOrMultipleValues() : k}
             ${this.renderInputField()}
             <div
               class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
@@ -132,14 +134,19 @@ let h = class extends R {
               tabindex="${this.disabled ? "-1" : "0"}"
             >
               <pkt-icon
-                class=${w({
+                class=${y({
       "pkt-combobox__arrow-icon": !0,
       "pkt-combobox__arrow-icon--open": this._isOptionsOpen
     })}
                 name="chevron-thin-down"
               ></pkt-icon>
             </div>
-            <div ${v(this.focusRef)} tabindex="-1" @keydown=${this.handleArrowClick}></div>
+            <div
+              ${v(this.focusRef)}
+              tabindex="-1"
+              @keydown=${this.handleArrowClick}
+              class="pkt-contents"
+            ></div>
           </div>
 
           <pkt-listbox
@@ -166,7 +173,7 @@ let h = class extends R {
 
         ${this.tagPlacement === "outside" && this.multiple ? d`<div class="pkt-combobox__tags-outside">
               ${this.renderSingleOrMultipleValues()}
-            </div>` : y}
+            </div>` : k}
       </pkt-input-wrapper>
     `;
   }
@@ -204,7 +211,7 @@ let h = class extends R {
         `;
   }
   renderSingleOrMultipleValues() {
-    const e = !this.multiple, t = this._editingSingleValue ? null : this.renderValueTag(this.findValueInOptions(this._value[0])), i = V(
+    const e = !this.multiple, t = this._editingSingleValue ? null : this.renderValueTag(this.findValueInOptions(this._value[0])), i = R(
       this._value,
       (s) => s,
       (s) => {
@@ -227,12 +234,18 @@ let h = class extends R {
     if (!e) return "";
     switch (this.displayValueAs) {
       case "prefixAndValue":
-        return d`<span data-focusfix=${this.id}>${e.prefix || ""} ${e.value}</span>`;
+        return d`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${e.prefix || ""} ${e.value}</span
+        >`;
       case "value":
-        return d`<span data-focusfix=${this.id}>${e.value}</span>`;
+        return d`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${e.value}</span
+        >`;
       case "label":
       default:
-        return d`<span data-focusfix=${this.id}>${e.label || e.value}</span>`;
+        return d`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${e.label || e.value}</span
+        >`;
     }
   }
   // Event handlers
@@ -289,7 +302,10 @@ let h = class extends R {
   }
   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));
+    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;
@@ -510,7 +526,7 @@ o([
   c()
 ], h.prototype, "_editingSingleValue", 2);
 h = o([
-  k("pkt-combobox")
+  w("pkt-combobox")
 ], h);
 export {
   h as P

package/dist/combobox-D84REr9N.cjs

@@ -0,0 +1,129 @@
+"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-Bbs0U_Au.cjs");require("./listbox-C4supLfR.cjs");const C={displayValueAs:{default:"label"}},R={props:C};var V=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&&V(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=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 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")){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`
+      <pkt-input-wrapper
+        .label=${this.label}
+        .helptext=${this.helptext}
+        .helptextDropdown=${c.o(this.helptextDropdown)}
+        .helptextDropdownButton=${c.o(this.helptextDropdownButton)}
+        ?fullwidth=${this.fullwidth}
+        ?hasError=${this.hasError}
+        ?inline=${this.inline}
+        ?disabled=${this.disabled}
+        .errorMessage=${this.errorMessage}
+        ?optionalTag=${this.optionalTag}
+        .optionalText=${this.optionalText}
+        ?requiredTag=${this.requiredTag}
+        .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
+        ?useWrapper=${this.useWrapper}
+        .forId=${this.allowUserInput||this.typeahead?this.id+"-input":this.id+"-arrow"}
+        class="pkt-combobox__wrapper"
+        @labelClick=${this.handleInputClick}
+      >
+        <div class="pkt-contents" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
+          <div
+            class=${O.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})}
+            tabindex="-1"
+            @click=${this.handleInputClick}
+          >
+            ${this.placeholder&&(!this._value.length||this.multiple&&this.tagPlacement=="outside")&&!this._inputFocus?a.x`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
+                  >${this.placeholder}</span
+                >`:this.tagPlacement!=="outside"?this.renderSingleOrMultipleValues():a.E}
+            ${this.renderInputField()}
+            <div
+              class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
+              @click=${this.handleArrowClick}
+              @keydown=${this.handleArrowClick}
+              id="${this.id}-arrow"
+              ${r.n(this.arrowRef)}
+              aria-expanded=${this._isOptionsOpen}
+              aria-controls="${this.id}-listbox"
+              aria-haspopup="listbox"
+              aria-label="Åpne liste"
+              ?disabled=${this.disabled}
+              ?data-disabled=${this.disabled}
+              role="button"
+              tabindex="${this.disabled?"-1":"0"}"
+            >
+              <pkt-icon
+                class=${O.e({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
+                name="chevron-thin-down"
+              ></pkt-icon>
+            </div>
+            <div
+              ${r.n(this.focusRef)}
+              tabindex="-1"
+              @keydown=${this.handleArrowClick}
+              class="pkt-contents"
+            ></div>
+          </div>
+
+          <pkt-listbox
+            id="${this.id}-listbox"
+            .options=${this._options}
+            .isOpen=${this._isOptionsOpen}
+            .searchPlaceholder=${this.searchPlaceholder}
+            .label="Liste: ${this.label||""}"
+            ?includeSearch=${this.includeSearch}
+            ?isMultiSelect=${this.multiple}
+            ?allowUserInput=${this.allowUserInput&&!this._maxIsReached}
+            ?maxIsReached=${this._maxIsReached}
+            .customUserInput=${c.o(this._addValueText)}
+            .userMessage=${this._userInfoMessage}
+            @search=${this.handleSearch}
+            @option-toggle=${this.handleOptionToggled}
+            @select-all=${this.addAllOptions}
+            @close-options=${()=>this._isOptionsOpen=!1}
+            .searchValue=${this._search||null}
+            .maxLength=${this.maxlength||0}
+            ${r.n(this.listboxRef)}
+          ></pkt-listbox>
+        </div>
+
+        ${this.tagPlacement==="outside"&&this.multiple?a.x`<div class="pkt-combobox__tags-outside">
+              ${this.renderSingleOrMultipleValues()}
+            </div>`:a.E}
+      </pkt-input-wrapper>
+    `}renderInputField(){return this.typeahead||this.allowUserInput?a.x`
+          <div class="pkt-combobox__input-div combobox__input">
+            <input
+              type="text"
+              id="${this.id}-input"
+              name=${(this.name||this.id)+"-input"}
+              @input=${this.handleInput}
+              @keydown=${this.handleInputKeydown}
+              @focus=${this.handleFocus}
+              @blur=${this.handleBlur}
+              autocomplete="off"
+              role="combobox"
+              aria-label=${c.o(this.label)}
+              aria-autocomplete=${this.typeahead?"both":"list"}
+              aria-controls="${this.id}-listbox"
+              aria-multiselectable=${c.o(this.multiple?"true":void 0)}
+              aria-activedescendant=${c.o(this._value[0]&&this.findValueInOptions(this._value[0])?`${this.id}-listbox-${this.findIndexInOptions(this._value[0])}`:void 0)}
+              ${r.n(this.inputRef)}
+            />
+          </div>
+        `:a.x`
+          <input
+            type="hidden"
+            id="${this.id}-input"
+            name=${(this.name||this.id)+"-input"}
+            .value=${this._value.join(",")}
+            ${r.n(this.inputRef)}
+          />
+        `}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`
+          <pkt-tag
+            skin=${h||"blue-dark"}
+            ?closeTag=${!this.disabled}
+            @close=${()=>this.handleTagRemove(s)}
+          >
+            ${this.renderValueTag(l)}
+          </pkt-tag>
+        `});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}
+          >${e.prefix||""} ${e.value}</span
+        >`;case"value":return a.x`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${e.value}</span
+        >`;case"label":default:return a.x`<span class="pkt-combobox__value" 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.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);

package/dist/index.d.ts

@@ -571,6 +571,7 @@ export declare class PktCombobox extends PktInputElement implements IPktCombobox
     private handleFocusOut;
     private handleBlur;
     private handleInputClick;
+    private handlePlaceholderClick;
     private handleArrowClick;
     private handleOptionToggled;
     private handleSearch;

package/dist/pkt-combobox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-DjO0RMUB.cjs"),o=e.PktCombobox;Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>e.PktCombobox});exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-D84REr9N.cjs"),o=e.PktCombobox;Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>e.PktCombobox});exports.default=o;

package/dist/pkt-combobox.js

@@ -1,4 +1,4 @@
-import { P as o } from "./combobox-yE4aYhTi.js";
+import { P as o } from "./combobox-BXP1PL0M.js";
 const b = o;
 export {
   o as PktCombobox,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-7rUOhlNi.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),d=require("./backlink-JbBNi3qg.cjs"),b=require("./button-B8rdtaHB.cjs"),k=require("./calendar-32W9p9uc.cjs"),m=require("./card-DBlFf1ry.cjs"),g=require("./combobox-DjO0RMUB.cjs"),h=require("./consent-hYeFWNFr.cjs"),f=require("./checkbox-Gn7Wtk9h.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-DonUad47.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-CNycsyMj.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-Cjl0xwSq.cjs"),$=require("./linkcard-DqIvb54H.cjs"),L=require("./loader-DNidjwH-.cjs"),_=require("./messagebox-CjPtPPrW.cjs"),A=require("./modal-CRtxhCaP.cjs"),B=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),T=require("./tag-Bbs0U_Au.cjs"),I=require("./textarea-CPXsMFUq.cjs"),M=require("./textinput-aNI5kibM.cjs"),R=require("./select-CD6Zn8YH.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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-7rUOhlNi.cjs"),l=require("./accordionitem-Csh7iSVG.cjs"),d=require("./backlink-JbBNi3qg.cjs"),b=require("./button-B8rdtaHB.cjs"),k=require("./calendar-32W9p9uc.cjs"),m=require("./card-DBlFf1ry.cjs"),g=require("./combobox-D84REr9N.cjs"),h=require("./consent-hYeFWNFr.cjs"),f=require("./checkbox-Gn7Wtk9h.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-DonUad47.cjs"),q=require("./helptext-CzQX6YVE.cjs"),x=require("./heading-CNycsyMj.cjs"),C=require("./icon-B_ryAy4Q.cjs"),v=require("./input-wrapper-CZ-a00V7.cjs"),S=require("./link-Cjl0xwSq.cjs"),$=require("./linkcard-DqIvb54H.cjs"),L=require("./loader-DNidjwH-.cjs"),_=require("./messagebox-CjPtPPrW.cjs"),A=require("./modal-CRtxhCaP.cjs"),B=require("./progressbar-DhMBXkww.cjs"),p=require("./radiobutton-CdT6v1oq.cjs"),T=require("./tag-Bbs0U_Au.cjs"),I=require("./textarea-CPXsMFUq.cjs"),M=require("./textinput-aNI5kibM.cjs"),R=require("./select-CD6Zn8YH.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`
       <div class="${O.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -5,7 +5,7 @@ import { P as T } from "./button-DhispFOY.js";
 import { c as f } from "./calendar-CJSxvwAq.js";
 import { P as D } from "./calendar-CJSxvwAq.js";
 import { P as G } from "./card-BDz4RWxK.js";
-import { P as K } from "./combobox-yE4aYhTi.js";
+import { P as K } from "./combobox-BXP1PL0M.js";
 import { P as U } from "./consent-BpcQFvbi.js";
 import { P as q } from "./checkbox-ym7z6cpt.js";
 import { P as k, t as h, x as P, n, a as c } from "./element-CgEWt74-.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.5.10",
+  "version": "13.5.11",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -41,7 +41,7 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.25.9",
     "@oslokommune/punkt-assets": "^13.3.1",
-    "@oslokommune/punkt-css": "^13.5.0",
+    "@oslokommune/punkt-css": "^13.5.11",
     "@testing-library/jest-dom": "^6.6.3",
     "@vitest/ui": "^1.0.0",
     "jest-axe": "^9.0.0",
@@ -73,5 +73,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "620a533438712c433484060ce628f538354c2c55"
+  "gitHead": "09ba8de9047136b06b520d7208b31a1743bcf1d7"
 }

package/src/components/combobox/combobox.ts

@@ -191,7 +191,6 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
       const filteredUserAdded = userAddedValues.filter(
         (userOpt) => !this.options.some((opt) => opt.value === userOpt.value),
       )
-      // Merge, giving precedence to this.options
       this._options = [...filteredUserAdded, ...this.options]
       this._options.forEach((option) => {
         if (option.value && !option.label) {
@@ -287,7 +286,9 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
             ${this.placeholder &&
             (!this._value.length || (this.multiple && this.tagPlacement == 'outside')) &&
             !this._inputFocus
-              ? html`<span class="pkt-combobox__placeholder">${this.placeholder}</span>`
+              ? html`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
+                  >${this.placeholder}</span
+                >`
               : this.tagPlacement !== 'outside'
                 ? this.renderSingleOrMultipleValues()
                 : nothing}
@@ -315,7 +316,12 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
                 name="chevron-thin-down"
               ></pkt-icon>
             </div>
-            <div ${ref(this.focusRef)} tabindex="-1" @keydown=${this.handleArrowClick}></div>
+            <div
+              ${ref(this.focusRef)}
+              tabindex="-1"
+              @keydown=${this.handleArrowClick}
+              class="pkt-contents"
+            ></div>
           </div>
 
           <pkt-listbox
@@ -421,12 +427,18 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
     if (!option) return ''
     switch (this.displayValueAs) {
       case 'prefixAndValue':
-        return html`<span data-focusfix=${this.id}>${option.prefix || ''} ${option.value}</span>`
+        return html`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${option.prefix || ''} ${option.value}</span
+        >`
       case 'value':
-        return html`<span data-focusfix=${this.id}>${option.value}</span>`
+        return html`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${option.value}</span
+        >`
       case 'label':
       default:
-        return html`<span data-focusfix=${this.id}>${option.label || option.value}</span>`
+        return html`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${option.label || option.value}</span
+        >`
     }
   }
 
@@ -499,7 +511,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
     this._isOptionsOpen = true
     this.onFocus()
 
-    this.requestUpdate() // Ensure the UI updates
+    this.requestUpdate()
   }
 
   private handleFocusOut(e: FocusEvent): void {
@@ -559,11 +571,22 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
       this.inputRef.value?.type !== 'hidden'
     ) {
       this.inputRef.value?.focus()
+      this.requestUpdate()
     } else {
       this.handleArrowClick(e)
     }
   }
 
+  private handlePlaceholderClick(e: MouseEvent): void {
+    if (this.disabled) return
+    e.stopPropagation()
+    if (this.inputRef.value && this.inputRef.value.type !== 'hidden') {
+      this.inputRef.value.focus()
+      this._inputFocus = true
+      this.requestUpdate()
+    }
+  }
+
   private handleArrowClick(e: MouseEvent | KeyboardEvent): void {
     if (this.disabled) return
 
@@ -616,7 +639,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
         break
       case 'Escape':
         this._isOptionsOpen = false
-        this.arrowRef.value?.focus() // Return focus to the button
+        this.arrowRef.value?.focus()
         e.preventDefault()
         break
       default:

package/dist/combobox-DjO0RMUB.cjs

@@ -1,116 +0,0 @@
-"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-Bbs0U_Au.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")){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`
-      <pkt-input-wrapper
-        .label=${this.label}
-        .helptext=${this.helptext}
-        .helptextDropdown=${c.o(this.helptextDropdown)}
-        .helptextDropdownButton=${c.o(this.helptextDropdownButton)}
-        ?fullwidth=${this.fullwidth}
-        ?hasError=${this.hasError}
-        ?inline=${this.inline}
-        ?disabled=${this.disabled}
-        .errorMessage=${this.errorMessage}
-        ?optionalTag=${this.optionalTag}
-        .optionalText=${this.optionalText}
-        ?requiredTag=${this.requiredTag}
-        .requiredText=${this.requiredText}
-        .tagText=${this.tagText}
-        ?useWrapper=${this.useWrapper}
-        .forId=${this.allowUserInput||this.typeahead?this.id+"-input":this.id+"-arrow"}
-        class="pkt-combobox__wrapper"
-        @labelClick=${this.handleInputClick}
-      >
-        <div class="pkt-contents" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
-        <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
-          <div
-            class=${O.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})}
-            tabindex="-1"
-            @click=${this.handleInputClick}
-          >
-            ${this.placeholder&&(!this._value.length||this.multiple&&this.tagPlacement=="outside")&&!this._inputFocus?a.x`<span class="pkt-combobox__placeholder">${this.placeholder}</span>`:this.tagPlacement!=="outside"?this.renderSingleOrMultipleValues():a.E}
-            ${this.renderInputField()}
-            <div
-              class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
-              @click=${this.handleArrowClick}
-              @keydown=${this.handleArrowClick}
-              id="${this.id}-arrow"
-              ${r.n(this.arrowRef)}
-              aria-expanded=${this._isOptionsOpen}
-              aria-controls="${this.id}-listbox"
-              aria-haspopup="listbox"
-              aria-label="Åpne liste"
-              ?disabled=${this.disabled}
-              ?data-disabled=${this.disabled}
-              role="button"
-              tabindex="${this.disabled?"-1":"0"}"
-            >
-              <pkt-icon
-                class=${O.e({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
-                name="chevron-thin-down"
-              ></pkt-icon>
-            </div>
-            <div ${r.n(this.focusRef)} tabindex="-1" @keydown=${this.handleArrowClick}></div>
-          </div>
-
-          <pkt-listbox
-            id="${this.id}-listbox"
-            .options=${this._options}
-            .isOpen=${this._isOptionsOpen}
-            .searchPlaceholder=${this.searchPlaceholder}
-            .label="Liste: ${this.label||""}"
-            ?includeSearch=${this.includeSearch}
-            ?isMultiSelect=${this.multiple}
-            ?allowUserInput=${this.allowUserInput&&!this._maxIsReached}
-            ?maxIsReached=${this._maxIsReached}
-            .customUserInput=${c.o(this._addValueText)}
-            .userMessage=${this._userInfoMessage}
-            @search=${this.handleSearch}
-            @option-toggle=${this.handleOptionToggled}
-            @select-all=${this.addAllOptions}
-            @close-options=${()=>this._isOptionsOpen=!1}
-            .searchValue=${this._search||null}
-            .maxLength=${this.maxlength||0}
-            ${r.n(this.listboxRef)}
-          ></pkt-listbox>
-        </div>
-
-        ${this.tagPlacement==="outside"&&this.multiple?a.x`<div class="pkt-combobox__tags-outside">
-              ${this.renderSingleOrMultipleValues()}
-            </div>`:a.E}
-      </pkt-input-wrapper>
-    `}renderInputField(){return this.typeahead||this.allowUserInput?a.x`
-          <div class="pkt-combobox__input-div combobox__input">
-            <input
-              type="text"
-              id="${this.id}-input"
-              name=${(this.name||this.id)+"-input"}
-              @input=${this.handleInput}
-              @keydown=${this.handleInputKeydown}
-              @focus=${this.handleFocus}
-              @blur=${this.handleBlur}
-              autocomplete="off"
-              role="combobox"
-              aria-label=${c.o(this.label)}
-              aria-autocomplete=${this.typeahead?"both":"list"}
-              aria-controls="${this.id}-listbox"
-              aria-multiselectable=${c.o(this.multiple?"true":void 0)}
-              aria-activedescendant=${c.o(this._value[0]&&this.findValueInOptions(this._value[0])?`${this.id}-listbox-${this.findIndexInOptions(this._value[0])}`:void 0)}
-              ${r.n(this.inputRef)}
-            />
-          </div>
-        `:a.x`
-          <input
-            type="hidden"
-            id="${this.id}-input"
-            name=${(this.name||this.id)+"-input"}
-            .value=${this._value.join(",")}
-            ${r.n(this.inputRef)}
-          />
-        `}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`
-          <pkt-tag
-            skin=${h||"blue-dark"}
-            ?closeTag=${!this.disabled}
-            @close=${()=>this.handleTagRemove(s)}
-          >
-            ${this.renderValueTag(l)}
-          </pkt-tag>
-        `});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);