@oslokommune/punkt-elements 12.31.2 → 12.32.7

package/dist/combobox-BflWORVa.cjs

@@ -0,0 +1,115 @@
+"use strict";const l=require("./element-DJpGVXjq.cjs"),c=require("./if-defined-CoBDkDGb.cjs"),d=require("./state-C4LdlTYO.cjs"),u=require("./ref-CLqTsViF.cjs"),$=require("./class-map-DvBKxTiW.cjs"),I=require("./repeat-t2oms1o6.cjs"),w=require("./input-element-VNai8bsq.cjs"),y=require("./pkt-options-controller-TJ1apYGF.cjs"),O=require("./pkt-slot-controller-plQxXRvV.cjs");require("./input-wrapper-DWOw7Yn-.cjs");require("./icon-UtDKPH3R.cjs");require("./tag-C52KeBmR.cjs");require("./listbox-CK1GmwCE.cjs");const C={displayValueAs:{default:"label"}},R={props:C};var V=Object.defineProperty,S=Object.getOwnPropertyDescriptor,o=(b,t,e,s)=>{for(var i=s>1?void 0:s?S(t,e):t,n=b.length-1,h;n>=0;n--)(h=b[n])&&(i=(s?h(t,e,i):h(i))||i);return s&&i&&V(t,e,i),i};exports.PktCombobox=class extends w.PktInputElement{constructor(){super(),this.helptextSlot=u.e(),this.value="",this.options=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder="",this.multiple=!1,this.maxlength=null,this.displayValueAs=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=u.e(),this.arrowRef=u.e(),this.listboxRef=u.e(),this.focusRef=u.e(),this.optionTagRef=u.e(),this.optionsController=new y.PktOptionsSlotController(this),this.slotController=new O.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){if(super.connectedCallback(),document&&document.body.addEventListener("click",t=>{this._isOptionsOpen&&!this.contains(t.target)&&this.handleFocusOut(t)}),this._options=[],this.optionsController.nodes.length){const t=[];this.optionsController.nodes.forEach(e=>{if(!e.textContent&&!e.getAttribute("value"))return null;const s={value:e.getAttribute("value")||e.textContent||"",label:e.textContent||e.getAttribute("value")||""};e.getAttribute("data-prefix")&&(s.prefix=e.getAttribute("data-prefix")||void 0),e.getAttribute("tagskincolor")&&(s.tagSkinColor=e.getAttribute("tagskincolor")),e.getAttribute("description")&&(s.description=e.getAttribute("description")||void 0),s.fulltext=s.value+s.label+(s.prefix||""),t.push(s)}),t.length&&(this.options=[...t],this._options=[...t])}}updated(t){t.has("_value")&&this.valueChanged(this._value,t.get("_value")),t.has("value")&&(this._value=Array.isArray(this.value)?this.value:this.value?this.value.split(","):[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]]),this.isMaxItemsReached()),t.has("options")&&this.options.length&&(this._options=this.options,this._options.forEach(e=>{e.fulltext=e.value+e.label+(e.prefix||""),e.selected=this._value.includes(e.value)})),t.has("_search")&&this.dispatchEvent(new CustomEvent("search",{detail:this._search,bubbles:!1})),super.updated(t)}attributeChangedCallback(t,e,s){t==="value"&&(this._value=Array.isArray(this.value)?this.value:this.value?this.value.split(","):[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]])),t==="options"&&(this._options=this.options,this._options.forEach(i=>{i.fulltext=i.value+i.label+(i.prefix||"")}),this._search=""),super.attributeChangedCallback(t,e,s)}render(){return l.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}
+        ?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" ${u.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
+          <div
+            class=${$.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?l.x`<span class="pkt-combobox__placeholder">${this.placeholder}</span>`:this.tagPlacement!=="outside"?this.renderSingleOrMultipleValues():l.E}
+            ${this.renderInputField()}
+            <div
+              class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
+              @click=${this.handleArrowClick}
+              @keydown=${this.handleArrowClick}
+              id="${this.id}-arrow"
+              ${u.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=${$.e({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
+                name="chevron-thin-down"
+              ></pkt-icon>
+            </div>
+            <div ${u.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}
+            ${u.n(this.listboxRef)}
+          ></pkt-listbox>
+        </div>
+
+        ${this.tagPlacement==="outside"&&this.multiple?l.x`<div class="pkt-combobox__tags-outside">
+              ${this.renderSingleOrMultipleValues()}
+            </div>`:l.E}
+      </pkt-input-wrapper>
+    `}renderInputField(){return this.typeahead||this.allowUserInput?l.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)}
+              ${u.n(this.inputRef)}
+            />
+          </div>
+        `:l.x`
+          <input
+            type="hidden"
+            id="${this.id}-input"
+            name=${(this.name||this.id)+"-input"}
+            .value=${this._value.join(",")}
+            ${u.n(this.inputRef)}
+          />
+        `}renderSingleOrMultipleValues(){const t=!this.multiple,e=this._editingSingleValue?null:this.renderValueTag(this.findValueInOptions(this._value[0])),s=I.c(this._value,i=>i,i=>{var a;const n=this.findValueInOptions(i),h=(a=this.options.find(r=>r.value===i))==null?void 0:a.tagSkinColor;return l.x`
+          <pkt-tag
+            skin=${h||"blue-dark"}
+            ?closeTag=${!this.disabled}
+            @close=${()=>this.handleTagRemove(i)}
+          >
+            ${this.renderValueTag(n)}
+          </pkt-tag>
+        `});return t?e:s}renderValueTag(t){if(!t)return"";switch(this.displayValueAs){case"prefixAndValue":return l.x`<span data-focusfix=${this.id}>${t.prefix||""} ${t.value}</span>`;case"value":return l.x`<span data-focusfix=${this.id}>${t.value}</span>`;case"label":default:return l.x`<span data-focusfix=${this.id}>${t.label||t.value}</span>`}}handleInput(t){if(t.stopPropagation(),t.stopImmediatePropagation(),this.disabled)return;this.touched=!0;const e=t.target;if(this._search=e.value,this.checkForMatches(),this.typeahead)if(this._search){if(this._options=this.options.filter(s=>{var i;return(i=s.fulltext)==null?void 0:i.toLowerCase().includes(this._search.toLowerCase())}),t.inputType!=="deleteContentBackward"){const s=this._options.filter(i=>{var n;return!i.selected&&((n=i.label)==null?void 0:n.toLowerCase().startsWith(this._search.toLowerCase()))});if(s.length>0&&this.inputRef.value&&this.inputRef.value.type!=="hidden"){const i=s[0];i!=null&&i.label&&(e.value=i.label,window.setTimeout(()=>e.setSelectionRange(this._search.length,e.value.length),0),e.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 t=this.findValueInOptions(this._value[0]);this._editingSingleValue=!0,this.inputRef.value.value=this.displayValueAs==="label"&&(t!=null&&t.label)?t.label:this._value[0]}this._inputFocus=!0,this._search="",this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(t){var e,s,i,n,h;if(!this.disabled&&((s=(e=t.relatedTarget)==null?void 0:e.closest("pkt-combobox"))==null?void 0:s.id)!==this.id&&((n=(i=t.relatedTarget)==null?void 0:i.closest("pkt-combobox"))==null?void 0:n.id)!==this.id&&((h=t.target)==null?void 0:h.getAttribute("data-focusfix"))!==this.id&&t.relatedTarget!==this.focusRef.value&&t.relatedTarget!==this.inputRef.value&&t.relatedTarget!==this.arrowRef.value&&this._isOptionsOpen){if(this._inputFocus=!1,this._addValueText=null,this._userInfoMessage="",this._search="",this.inputRef.value&&this.inputRef.value.type!=="hidden"&&this.inputRef.value.value!==""){const a=this.inputRef.value.value;!this._value.includes(a)&&!this._options.find(r=>r.label===a)?this.allowUserInput?this.addNewUserValue(a):this.multiple||this.removeValue(this._value[0]):this._value.includes(a)||this.setSelected(a),this.inputRef.value.value=""}this._isOptionsOpen=!1,this.onBlur()}}handleBlur(){this._inputFocus=!1,this._editingSingleValue=!1,this.onBlur()}handleInputClick(t){var e,s;this.disabled||(t.currentTarget&&t.currentTarget!==this.arrowRef.value&&((e=this.inputRef.value)==null?void 0:e.type)!=="hidden"?(s=this.inputRef.value)==null||s.focus():this.handleArrowClick(t))}handleArrowClick(t){var e,s;this.disabled||t instanceof KeyboardEvent&&t.key&&t.key!=="Enter"&&t.key!==" "&&t.key!=="ArrowDown"||(t.stopImmediatePropagation(),t.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen?(e=this.listboxRef.value)==null||e.focusFirstOrSelectedOption():(s=this.arrowRef.value)==null||s.focus())}handleOptionToggled(t){this.toggleValue(t.detail)}handleSearch(t){t.stopPropagation(),this._search=t.detail.toLowerCase()}handleInputKeydown(t){var e,s,i;switch(t.key){case",":case"Enter":t.preventDefault(),this.addValue();break;case"Backspace":!this._search&&((e=this.inputRef.value)==null?void 0:e.type)==="hidden"&&this.removeLastValue(t);break;case"Tab":case"ArrowDown":t.shiftKey||((s=this.listboxRef.value)==null||s.focusFirstOrSelectedOption(),t.preventDefault());break;case"Escape":this._isOptionsOpen=!1,(i=this.arrowRef.value)==null||i.focus(),t.preventDefault();break}}handleTagRemove(t){this.removeSelected(t)}blurInput(){this.inputRef.value&&this.inputRef.value.matches(":focus")&&this.inputRef.value.blur()}checkForMatches(){var h;const t=((h=this.inputRef.value)==null?void 0:h.value)||this._search||"",e=t.trim().toLowerCase()||"";if(!e){!this.multiple&&this._value[0]&&this.removeValue(this._value[0]),this.resetComboboxInput(!1);return}const s=this._value.find(a=>a.toLowerCase()===e),i=this._options.filter(a=>{var r;return((r=a.label)==null?void 0:r.toLowerCase().includes(e))??!1}),n=i.find(a=>{var r;return((r=a.label)==null?void 0:r.toLowerCase())===e||a.value.toLowerCase()===e});switch(!0){case((i.length===0||!n)&&this.allowUserInput):this._addValueText=t,this._userInfoMessage="";break;case(i.length===0&&!this.allowUserInput):this._addValueText=null,this._userInfoMessage="Ingen match i søket";break;case!!s:this._addValueText=null,this._userInfoMessage="Verdien er allerede valgt";break;case i.length>1:this._addValueText=null,this._userInfoMessage="";break;default:this._addValueText=null,this._userInfoMessage=""}}findValueInOptions(t){return this.options.find(e=>e.value===t||e.label===t)||null}findIndexInOptions(t){return this._options.findIndex(e=>e.value===t||e.label===t)}isMaxItemsReached(){const t=this.maxlength!==null&&this._value.length>=this.maxlength;return t?this._maxIsReached=!0:this._maxIsReached=!1,t}toggleValue(t){var g,k;if(this.disabled)return;this.touched=!0,this._userInfoMessage="",this._addValueText=null;const e=((g=this.findValueInOptions(t))==null?void 0:g.value)||null,s=this._value.includes(t||e||""),i=!!e,n=((k=this._options.find(_=>_.value===t))==null?void 0:k.disabled)||!1,h=!(t!=null&&t.trim()),a=!this.multiple,r=this.multiple,x=this.isMaxItemsReached();let p=!1,f=!0,v="",m="";n||(!i&&this.allowUserInput&&!h?(this.addNewUserValue(t),v="Ny verdi lagt til",p=!r):!i&&!this.allowUserInput?(a&&this._value[0]&&this.removeValue(this._value[0]),f=!1,p=!0,v="Ingen treff i søket"):s?(this.removeValue(e),p=!0):h&&a?(this.removeAllSelected(),p=!0):a?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(e),p=!1,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&(this.inputRef.value.value="",this.inputRef.value.blur())):r&&!x?(this.setSelected(e),p=!0):r&&x?(this._userInfoMessage="Maks antall valg nådd",f=!1,m=t):(a&&this.removeAllSelected(),this._userInfoMessage="Ingen gyldig verdi valgt",f=!1,p=!0,m=t),this._isOptionsOpen=p,p||window.setTimeout(()=>{var _;(_=this.focusRef.value)==null||_.focus()},0),this._userInfoMessage=v,this._search=m||"",this.resetComboboxInput(f),r&&this.isMaxItemsReached())}setSelected(t){if(!this._value.includes(t)){if(this.multiple&&this.isMaxItemsReached()){this._userInfoMessage="Maks antall valg nådd";return}!this.multiple&&this.removeAllSelected(),this._value=t?[...this._value,t]:this._value,this._options=this._options.map(e=>(e.value===t&&(e.selected=!0),e)),this.resetComboboxInput(!0)}}removeSelected(t){if(!t)return;this._value=this._value.filter(s=>s!==t);const e=this.findValueInOptions(t);e?(e.selected=!1,e.userAdded?(this._options=[...this._options.filter(s=>s.value!==t)],this.options=[...this.options.filter(s=>s.value!==t)]):this._options=[...this._options,e]):!t&&!this.multiple&&(this._options=this._options.map(s=>(s.selected=!1,s)))}addAllOptions(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage="For mange valgt";return}this._value=this._options.map(t=>t.value),this._options=this._options.map(t=>(t.selected=!0,t)),this.requestUpdate()}}removeAllSelected(){this._value=[],this._options=this._options.map(t=>(t.selected=!1,t)),this._options=this._options.filter(t=>!t.userAdded),this.requestUpdate()}addValue(){var e;const t=((e=this.inputRef.value)==null?void 0:e.value.trim())||"";this._search=t,this.toggleValue(t)}removeValue(t){this._value=this.multiple?this._value.filter(e=>e!==t):[],this.removeSelected(t)}addNewUserValue(t){if(!t||t.trim()==="")return;if(!this.multiple)this._value[0]&&this.removeSelected(this._value[0]),this._value=[t],this._isOptionsOpen=!1,this.blurInput();else if(!this.findValueInOptions(t)){if(this.isMaxItemsReached())return;this._value=[...this._value,t]}const e={value:t,label:t,userAdded:!0};this.options=[e,...this.options],this._options=[e,...this._options],this.setSelected(t),this.requestUpdate()}resetComboboxInput(t=!0){if(this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&t)if(this._search="",this.multiple)this.inputRef.value.value="";else{const e=this.findValueInOptions(this._value[0]);window.setTimeout(()=>{!this.inputRef.value||this.inputRef.value.type==="hidden"||(this.inputRef.value.value=this.displayValueAs==="label"&&(e!=null&&e.label)?e.label:this._value[0]||"")},0),this._userInfoMessage=""}this._options=[...this.options]}removeLastValue(t){if(this._value.length===0)return;t.preventDefault();const e=this._value[this._value.length-1];e&&this.removeSelected(e),this.isMaxItemsReached()}};o([l.n({type:String,reflect:!0})],exports.PktCombobox.prototype,"value",2);o([l.n({type:Array})],exports.PktCombobox.prototype,"options",2);o([l.n({type:Boolean})],exports.PktCombobox.prototype,"allowUserInput",2);o([l.n({type:Boolean})],exports.PktCombobox.prototype,"typeahead",2);o([l.n({type:Boolean})],exports.PktCombobox.prototype,"includeSearch",2);o([l.n({type:String})],exports.PktCombobox.prototype,"searchPlaceholder",2);o([l.n({type:Boolean})],exports.PktCombobox.prototype,"multiple",2);o([l.n({type:Number})],exports.PktCombobox.prototype,"maxlength",2);o([l.n({type:String})],exports.PktCombobox.prototype,"displayValueAs",2);o([l.n({type:String})],exports.PktCombobox.prototype,"tagPlacement",2);o([d.r()],exports.PktCombobox.prototype,"_options",2);o([d.r()],exports.PktCombobox.prototype,"_isOptionsOpen",2);o([d.r()],exports.PktCombobox.prototype,"_value",2);o([d.r()],exports.PktCombobox.prototype,"_userInfoMessage",2);o([d.r()],exports.PktCombobox.prototype,"_addValueText",2);o([d.r()],exports.PktCombobox.prototype,"_maxIsReached",2);o([d.r()],exports.PktCombobox.prototype,"_search",2);o([d.r()],exports.PktCombobox.prototype,"_inputFocus",2);o([d.r()],exports.PktCombobox.prototype,"_editingSingleValue",2);exports.PktCombobox=o([l.t("pkt-combobox")],exports.PktCombobox);

package/dist/combobox-l7LmWQYu.js

@@ -0,0 +1,491 @@
+import { E as y, x as d, n as r, a as O } from "./element-DiqKrDty.js";
+import { o as f } from "./if-defined-DeANa4n5.js";
+import { r as c } from "./state-CDwPbiQj.js";
+import { e as _, n as v } from "./ref-B70YZNXm.js";
+import { e as k } from "./class-map-D4tSZX70.js";
+import { c as R } from "./repeat-CNLpCTun.js";
+import { P as V } from "./input-element-C4mmTk6h.js";
+import { P as C } from "./pkt-options-controller-BkWE4pZe.js";
+import { P as S } from "./pkt-slot-controller-BtVLTZb7.js";
+import "./input-wrapper-P_oEi6dk.js";
+import "./icon-BdY52BIt.js";
+import "./tag-DoS5S2Bq.js";
+import "./listbox-CfJWJDrc.js";
+const T = {
+  displayValueAs: {
+    default: "label"
+  }
+}, A = {
+  props: T
+};
+var M = Object.defineProperty, F = Object.getOwnPropertyDescriptor, h = (t, e, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? F(e, s) : e, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (o = (i ? l(e, s, o) : l(o)) || o);
+  return i && o && M(e, s, o), o;
+};
+let a = class extends V {
+  constructor() {
+    super(), this.helptextSlot = _(), this.value = "", this.options = [], this.allowUserInput = !1, this.typeahead = !1, this.includeSearch = !1, this.searchPlaceholder = "", this.multiple = !1, this.maxlength = null, this.displayValueAs = A.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() {
+    if (super.connectedCallback(), document && document.body.addEventListener("click", (t) => {
+      this._isOptionsOpen && !this.contains(t.target) && this.handleFocusOut(t);
+    }), this._options = [], this.optionsController.nodes.length) {
+      const t = [];
+      this.optionsController.nodes.forEach((e) => {
+        if (!e.textContent && !e.getAttribute("value")) return null;
+        const s = {
+          value: e.getAttribute("value") || e.textContent || "",
+          label: e.textContent || e.getAttribute("value") || ""
+        };
+        e.getAttribute("data-prefix") && (s.prefix = e.getAttribute("data-prefix") || void 0), e.getAttribute("tagskincolor") && (s.tagSkinColor = e.getAttribute("tagskincolor")), e.getAttribute("description") && (s.description = e.getAttribute("description") || void 0), s.fulltext = s.value + s.label + (s.prefix || ""), t.push(s);
+      }), t.length && (this.options = [...t], this._options = [...t]);
+    }
+  }
+  updated(t) {
+    t.has("_value") && this.valueChanged(this._value, t.get("_value")), t.has("value") && (this._value = Array.isArray(this.value) ? this.value : this.value ? this.value.split(",") : [], !this.multiple && this._value.length > 1 && (this._value = [this._value[0]]), this.isMaxItemsReached()), t.has("options") && this.options.length && (this._options = this.options, this._options.forEach((e) => {
+      e.fulltext = e.value + e.label + (e.prefix || ""), e.selected = this._value.includes(e.value);
+    })), t.has("_search") && this.dispatchEvent(
+      new CustomEvent("search", {
+        detail: this._search,
+        bubbles: !1
+      })
+    ), super.updated(t);
+  }
+  attributeChangedCallback(t, e, s) {
+    t === "value" && (this._value = Array.isArray(this.value) ? this.value : this.value ? this.value.split(",") : [], !this.multiple && this._value.length > 1 && (this._value = [this._value[0]])), t === "options" && (this._options = this.options, this._options.forEach((i) => {
+      i.fulltext = i.value + i.label + (i.prefix || "");
+    }), this._search = ""), super.attributeChangedCallback(t, e, s);
+  }
+  // Render methods
+  render() {
+    return d`
+      <pkt-input-wrapper
+        .label=${this.label}
+        .helptext=${this.helptext}
+        .helptextDropdown=${f(this.helptextDropdown)}
+        .helptextDropdownButton=${f(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}
+        ?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" ${v(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
+          <div
+            class=${k({
+      "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 ? d`<span class="pkt-combobox__placeholder">${this.placeholder}</span>` : this.tagPlacement !== "outside" ? this.renderSingleOrMultipleValues() : y}
+            ${this.renderInputField()}
+            <div
+              class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
+              @click=${this.handleArrowClick}
+              @keydown=${this.handleArrowClick}
+              id="${this.id}-arrow"
+              ${v(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=${k({
+      "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>
+
+          <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=${f(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}
+            ${v(this.listboxRef)}
+          ></pkt-listbox>
+        </div>
+
+        ${this.tagPlacement === "outside" && this.multiple ? d`<div class="pkt-combobox__tags-outside">
+              ${this.renderSingleOrMultipleValues()}
+            </div>` : y}
+      </pkt-input-wrapper>
+    `;
+  }
+  renderInputField() {
+    return this.typeahead || this.allowUserInput ? d`
+          <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=${f(this.label)}
+              aria-autocomplete=${this.typeahead ? "both" : "list"}
+              aria-controls="${this.id}-listbox"
+              aria-multiselectable=${f(this.multiple ? "true" : void 0)}
+              aria-activedescendant=${f(
+      this._value[0] && this.findValueInOptions(this._value[0]) ? `${this.id}-listbox-${this.findIndexInOptions(this._value[0])}` : void 0
+    )}
+              ${v(this.inputRef)}
+            />
+          </div>
+        ` : d`
+          <input
+            type="hidden"
+            id="${this.id}-input"
+            name=${(this.name || this.id) + "-input"}
+            .value=${this._value.join(",")}
+            ${v(this.inputRef)}
+          />
+        `;
+  }
+  renderSingleOrMultipleValues() {
+    const t = !this.multiple, e = this._editingSingleValue ? null : this.renderValueTag(this.findValueInOptions(this._value[0])), s = R(
+      this._value,
+      (i) => i,
+      (i) => {
+        var l;
+        const o = this.findValueInOptions(i), n = (l = this.options.find((u) => u.value === i)) == null ? void 0 : l.tagSkinColor;
+        return d`
+          <pkt-tag
+            skin=${n || "blue-dark"}
+            ?closeTag=${!this.disabled}
+            @close=${() => this.handleTagRemove(i)}
+          >
+            ${this.renderValueTag(o)}
+          </pkt-tag>
+        `;
+      }
+    );
+    return t ? e : s;
+  }
+  renderValueTag(t) {
+    if (!t) return "";
+    switch (this.displayValueAs) {
+      case "prefixAndValue":
+        return d`<span data-focusfix=${this.id}>${t.prefix || ""} ${t.value}</span>`;
+      case "value":
+        return d`<span data-focusfix=${this.id}>${t.value}</span>`;
+      case "label":
+      default:
+        return d`<span data-focusfix=${this.id}>${t.label || t.value}</span>`;
+    }
+  }
+  // Event handlers
+  handleInput(t) {
+    if (t.stopPropagation(), t.stopImmediatePropagation(), this.disabled) return;
+    this.touched = !0;
+    const e = t.target;
+    if (this._search = e.value, this.checkForMatches(), this.typeahead)
+      if (this._search) {
+        if (this._options = this.options.filter(
+          (s) => {
+            var i;
+            return (i = s.fulltext) == null ? void 0 : i.toLowerCase().includes(this._search.toLowerCase());
+          }
+        ), t.inputType !== "deleteContentBackward") {
+          const s = this._options.filter(
+            (i) => {
+              var o;
+              return !i.selected && ((o = i.label) == null ? void 0 : o.toLowerCase().startsWith(this._search.toLowerCase()));
+            }
+          );
+          if (s.length > 0 && this.inputRef.value && this.inputRef.value.type !== "hidden") {
+            const i = s[0];
+            i != null && i.label && (e.value = i.label, window.setTimeout(
+              () => e.setSelectionRange(this._search.length, e.value.length),
+              0
+            ), e.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 t = this.findValueInOptions(this._value[0]);
+        this._editingSingleValue = !0, this.inputRef.value.value = this.displayValueAs === "label" && (t != null && t.label) ? t.label : this._value[0];
+      }
+      this._inputFocus = !0, this._search = "", this._options = [...this.options], this._isOptionsOpen = !0, this.onFocus(), this.requestUpdate();
+    }
+  }
+  handleFocusOut(t) {
+    var e, s, i, o, n;
+    if (!this.disabled && ((s = (e = t.relatedTarget) == null ? void 0 : e.closest("pkt-combobox")) == null ? void 0 : s.id) !== this.id && ((o = (i = t.relatedTarget) == null ? void 0 : i.closest("pkt-combobox")) == null ? void 0 : o.id) !== this.id && ((n = t.target) == null ? void 0 : n.getAttribute("data-focusfix")) !== this.id && t.relatedTarget !== this.focusRef.value && t.relatedTarget !== this.inputRef.value && t.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 l = this.inputRef.value.value;
+        !this._value.includes(l) && !this._options.find((u) => u.label === l) ? this.allowUserInput ? this.addNewUserValue(l) : this.multiple || this.removeValue(this._value[0]) : this._value.includes(l) || this.setSelected(l), this.inputRef.value.value = "";
+      }
+      this._isOptionsOpen = !1, this.onBlur();
+    }
+  }
+  handleBlur() {
+    this._inputFocus = !1, this._editingSingleValue = !1, this.onBlur();
+  }
+  handleInputClick(t) {
+    var e, s;
+    this.disabled || (t.currentTarget && t.currentTarget !== this.arrowRef.value && ((e = this.inputRef.value) == null ? void 0 : e.type) !== "hidden" ? (s = this.inputRef.value) == null || s.focus() : this.handleArrowClick(t));
+  }
+  handleArrowClick(t) {
+    var e, s;
+    this.disabled || t instanceof KeyboardEvent && t.key && t.key !== "Enter" && t.key !== " " && t.key !== "ArrowDown" || (t.stopImmediatePropagation(), t.preventDefault(), this._isOptionsOpen = !this._isOptionsOpen, this._isOptionsOpen ? (e = this.listboxRef.value) == null || e.focusFirstOrSelectedOption() : (s = this.arrowRef.value) == null || s.focus());
+  }
+  handleOptionToggled(t) {
+    this.toggleValue(t.detail);
+  }
+  handleSearch(t) {
+    t.stopPropagation(), this._search = t.detail.toLowerCase();
+  }
+  handleInputKeydown(t) {
+    var e, s, i;
+    switch (t.key) {
+      case ",":
+      case "Enter":
+        t.preventDefault(), this.addValue();
+        break;
+      case "Backspace":
+        !this._search && ((e = this.inputRef.value) == null ? void 0 : e.type) === "hidden" && this.removeLastValue(t);
+        break;
+      case "Tab":
+      case "ArrowDown":
+        t.shiftKey || ((s = this.listboxRef.value) == null || s.focusFirstOrSelectedOption(), t.preventDefault());
+        break;
+      case "Escape":
+        this._isOptionsOpen = !1, (i = this.arrowRef.value) == null || i.focus(), t.preventDefault();
+        break;
+    }
+  }
+  handleTagRemove(t) {
+    this.removeSelected(t);
+  }
+  blurInput() {
+    this.inputRef.value && this.inputRef.value.matches(":focus") && this.inputRef.value.blur();
+  }
+  checkForMatches() {
+    var n;
+    const t = ((n = this.inputRef.value) == null ? void 0 : n.value) || this._search || "", e = t.trim().toLowerCase() || "";
+    if (!e) {
+      !this.multiple && this._value[0] && this.removeValue(this._value[0]), this.resetComboboxInput(!1);
+      return;
+    }
+    const s = this._value.find((l) => l.toLowerCase() === e), i = this._options.filter(
+      (l) => {
+        var u;
+        return ((u = l.label) == null ? void 0 : u.toLowerCase().includes(e)) ?? !1;
+      }
+    ), o = i.find(
+      (l) => {
+        var u;
+        return ((u = l.label) == null ? void 0 : u.toLowerCase()) === e || l.value.toLowerCase() === e;
+      }
+    );
+    switch (!0) {
+      case ((i.length === 0 || !o) && this.allowUserInput):
+        this._addValueText = t, this._userInfoMessage = "";
+        break;
+      case (i.length === 0 && !this.allowUserInput):
+        this._addValueText = null, this._userInfoMessage = "Ingen match i søket";
+        break;
+      case !!s:
+        this._addValueText = null, this._userInfoMessage = "Verdien er allerede valgt";
+        break;
+      case i.length > 1:
+        this._addValueText = null, this._userInfoMessage = "";
+        break;
+      default:
+        this._addValueText = null, this._userInfoMessage = "";
+    }
+  }
+  findValueInOptions(t) {
+    return this.options.find((e) => e.value === t || e.label === t) || null;
+  }
+  findIndexInOptions(t) {
+    return this._options.findIndex((e) => e.value === t || e.label === t);
+  }
+  isMaxItemsReached() {
+    const t = this.maxlength !== null && this._value.length >= this.maxlength;
+    return t ? this._maxIsReached = !0 : this._maxIsReached = !1, t;
+  }
+  toggleValue(t) {
+    var I, w;
+    if (this.disabled) return;
+    this.touched = !0, this._userInfoMessage = "", this._addValueText = null;
+    const e = ((I = this.findValueInOptions(t)) == null ? void 0 : I.value) || null, s = this._value.includes(t || e || ""), i = !!e, o = ((w = this._options.find((m) => m.value === t)) == null ? void 0 : w.disabled) || !1, n = !(t != null && t.trim()), l = !this.multiple, u = this.multiple, $ = this.isMaxItemsReached();
+    let p = !1, b = !0, g = "", x = "";
+    o || (!i && this.allowUserInput && !n ? (this.addNewUserValue(t), g = "Ny verdi lagt til", p = !u) : !i && !this.allowUserInput ? (l && this._value[0] && this.removeValue(this._value[0]), b = !1, p = !0, g = "Ingen treff i søket") : s ? (this.removeValue(e), p = !0) : n && l ? (this.removeAllSelected(), p = !0) : l ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(e), p = !1, this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = "", this.inputRef.value.blur())) : u && !$ ? (this.setSelected(e), p = !0) : u && $ ? (this._userInfoMessage = "Maks antall valg nådd", b = !1, x = t) : (l && this.removeAllSelected(), this._userInfoMessage = "Ingen gyldig verdi valgt", b = !1, p = !0, x = t), this._isOptionsOpen = p, p || window.setTimeout(() => {
+      var m;
+      (m = this.focusRef.value) == null || m.focus();
+    }, 0), this._userInfoMessage = g, this._search = x || "", this.resetComboboxInput(b), u && this.isMaxItemsReached());
+  }
+  setSelected(t) {
+    if (!this._value.includes(t)) {
+      if (this.multiple && this.isMaxItemsReached()) {
+        this._userInfoMessage = "Maks antall valg nådd";
+        return;
+      }
+      !this.multiple && this.removeAllSelected(), this._value = t ? [...this._value, t] : this._value, this._options = this._options.map((e) => (e.value === t && (e.selected = !0), e)), this.resetComboboxInput(!0);
+    }
+  }
+  removeSelected(t) {
+    if (!t) return;
+    this._value = this._value.filter((s) => s !== t);
+    const e = this.findValueInOptions(t);
+    e ? (e.selected = !1, e.userAdded ? (this._options = [...this._options.filter((s) => s.value !== t)], this.options = [...this.options.filter((s) => s.value !== t)]) : this._options = [...this._options, e]) : !t && !this.multiple && (this._options = this._options.map((s) => (s.selected = !1, s)));
+  }
+  addAllOptions() {
+    if (this.multiple) {
+      if (this.maxlength && this._options.length > this.maxlength) {
+        this._userInfoMessage = "For mange valgt";
+        return;
+      }
+      this._value = this._options.map((t) => t.value), this._options = this._options.map((t) => (t.selected = !0, t)), this.requestUpdate();
+    }
+  }
+  removeAllSelected() {
+    this._value = [], this._options = this._options.map((t) => (t.selected = !1, t)), this._options = this._options.filter((t) => !t.userAdded), this.requestUpdate();
+  }
+  addValue() {
+    var e;
+    const t = ((e = this.inputRef.value) == null ? void 0 : e.value.trim()) || "";
+    this._search = t, this.toggleValue(t);
+  }
+  removeValue(t) {
+    this._value = this.multiple ? this._value.filter((e) => e !== t) : [], this.removeSelected(t);
+  }
+  addNewUserValue(t) {
+    if (!t || t.trim() === "") return;
+    if (!this.multiple)
+      this._value[0] && this.removeSelected(this._value[0]), this._value = [t], this._isOptionsOpen = !1, this.blurInput();
+    else if (!this.findValueInOptions(t)) {
+      if (this.isMaxItemsReached()) return;
+      this._value = [...this._value, t];
+    }
+    const e = { value: t, label: t, userAdded: !0 };
+    this.options = [e, ...this.options], this._options = [e, ...this._options], this.setSelected(t), this.requestUpdate();
+  }
+  resetComboboxInput(t = !0) {
+    if (this._addValueText = null, this.inputRef.value && this.inputRef.value.type !== "hidden" && t)
+      if (this._search = "", this.multiple)
+        this.inputRef.value.value = "";
+      else {
+        const e = this.findValueInOptions(this._value[0]);
+        window.setTimeout(() => {
+          !this.inputRef.value || this.inputRef.value.type === "hidden" || (this.inputRef.value.value = this.displayValueAs === "label" && (e != null && e.label) ? e.label : this._value[0] || "");
+        }, 0), this._userInfoMessage = "";
+      }
+    this._options = [...this.options];
+  }
+  removeLastValue(t) {
+    if (this._value.length === 0) return;
+    t.preventDefault();
+    const e = this._value[this._value.length - 1];
+    e && this.removeSelected(e), this.isMaxItemsReached();
+  }
+};
+h([
+  r({ type: String, reflect: !0 })
+], a.prototype, "value", 2);
+h([
+  r({ type: Array })
+], a.prototype, "options", 2);
+h([
+  r({ type: Boolean })
+], a.prototype, "allowUserInput", 2);
+h([
+  r({ type: Boolean })
+], a.prototype, "typeahead", 2);
+h([
+  r({ type: Boolean })
+], a.prototype, "includeSearch", 2);
+h([
+  r({ type: String })
+], a.prototype, "searchPlaceholder", 2);
+h([
+  r({ type: Boolean })
+], a.prototype, "multiple", 2);
+h([
+  r({ type: Number })
+], a.prototype, "maxlength", 2);
+h([
+  r({ type: String })
+], a.prototype, "displayValueAs", 2);
+h([
+  r({ type: String })
+], a.prototype, "tagPlacement", 2);
+h([
+  c()
+], a.prototype, "_options", 2);
+h([
+  c()
+], a.prototype, "_isOptionsOpen", 2);
+h([
+  c()
+], a.prototype, "_value", 2);
+h([
+  c()
+], a.prototype, "_userInfoMessage", 2);
+h([
+  c()
+], a.prototype, "_addValueText", 2);
+h([
+  c()
+], a.prototype, "_maxIsReached", 2);
+h([
+  c()
+], a.prototype, "_search", 2);
+h([
+  c()
+], a.prototype, "_inputFocus", 2);
+h([
+  c()
+], a.prototype, "_editingSingleValue", 2);
+a = h([
+  O("pkt-combobox")
+], a);
+export {
+  a as P
+};