@oslokommune/punkt-elements 12.31.2 → 12.32.0

package/dist/input-wrapper-DQmYzhcy.js

@@ -0,0 +1,185 @@
+import { P as m, E as s, x as p, n as r, a as k } from "./element-G8JoS0Lj.js";
+import { P as v } from "./pkt-slot-controller-D1DakVrU.js";
+import { e as f, n as g } from "./ref-cRTOoM4R.js";
+import { o as w } from "./icon-BJnwW0eh.js";
+import { e as b } from "./class-map-ChuDQU5C.js";
+import { r as S } from "./state-gfUuUqVg.js";
+import { u as T } from "./stringutils-DJjRa8dG.js";
+import { s as i } from "./input-wrapper-Bw9tARAD.js";
+import "./helptext-Y4cSgTkd.js";
+var E = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (o, h, a, n) => {
+  for (var l = n > 1 ? void 0 : n ? _(h, a) : h, u = o.length - 1, d; u >= 0; u--)
+    (d = o[u]) && (l = (n ? d(h, a, l) : d(l)) || l);
+  return n && l && E(h, a, l), l;
+};
+let t = class extends m {
+  constructor() {
+    super(), this.defaultSlot = f(), this.helptextSlot = f(), this.hasHelptextSlot = !0, this.forId = T(), this.label = "", this.helptext = null, this.helptextDropdown = null, this.helptextDropdownButton = null, this.counter = i.props.counter.default, this.counterCurrent = 0, this.counterMaxLength = 0, this.counterError = null, this.counterPosition = "bottom", this.optionalTag = i.props.optionalTag.default, this.optionalText = i.props.optionalText.default, this.requiredTag = i.props.requiredTag.default, this.requiredText = i.props.requiredText.default, this.hasError = i.props.hasError.default, this.errorMessage = "", this.disabled = i.props.disabled.default, this.inline = i.props.inline.default, this.ariaDescribedby = void 0, this.hasFieldset = i.props.hasFieldset.default, this.useWrapper = i.props.useWrapper.default, this.role = "group", this.slotController = new v(this, this.defaultSlot, this.helptextSlot);
+  }
+  updateSlots(o) {
+    this.hasHelptextSlot = o.has("helptext"), this.requestUpdate();
+  }
+  updated(o) {
+    super.updated(o);
+  }
+  render() {
+    const o = {
+      "pkt-inputwrapper": !0,
+      "pkt-inputwrapper--error": this.hasError,
+      "pkt-inputwrapper--disabled": this.disabled,
+      "pkt-inputwrapper--inline": this.inline
+    }, h = {
+      "pkt-tag": !0,
+      "pkt-tag--small": !0,
+      "pkt-tag--thin-text": !0,
+      "pkt-tag--blue-light": this.optionalTag,
+      "pkt-tag--beige": !this.optionalTag && this.requiredTag
+    }, a = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : s, n = () => this.optionalTag || this.requiredTag ? p`<span class=${b(h)}
+          >${this.optionalTag ? this.optionalText : this.requiredTag ? this.requiredText : s}</span
+        >` : s, l = () => this.useWrapper ? this.hasFieldset ? p`<legend
+            class="pkt-inputwrapper__legend"
+            id="${this.forId}-label"
+            @click=${this.handleLabelClick}
+          >
+            ${this.label} ${n()}
+          </legend>` : p`<label
+            class="pkt-inputwrapper__label"
+            for="${this.forId}"
+            aria-describedby="${a}"
+            id="${this.forId}-label"
+            @click=${this.handleLabelClick}
+            >${this.label}${n()}</label
+          >` : p`<label
+          for="${this.forId}"
+          class="pkt-sr-only"
+          aria-describedby="${a}"
+          id="${this.forId}-label"
+        >
+          ${this.label}
+        </label>`, u = () => !this.helptext && !this.hasHelptextSlot && !this.helptextDropdown ? s : p`
+        <pkt-helptext
+          .forId=${this.forId}
+          .helptext=${this.helptext}
+          .helptextDropdown=${this.helptextDropdown}
+          .helptextDropdownButton=${this.helptextDropdownButton || i.props.helptextDropdownButton.default}
+          @toggleHelpText=${($) => {
+      this.toggleDropdown($);
+    }}
+          ${g(this.helptextSlot)}
+          name="helptext"
+        ></pkt-helptext>
+      `, d = () => this.counter ? p`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
+          ${this.counterError ? this.counterError : s} ${this.counterCurrent || 0}
+          ${this.counterMaxLength ? `/${this.counterMaxLength}` : s}
+        </div>` : s, y = () => this.hasError && this.errorMessage ? p`<div
+          role="alert"
+          class="pkt-alert pkt-alert--error pkt-alert--compact"
+          aria-live="assertive"
+          aria-atomic="true"
+          id="${this.forId}-error"
+        >
+          <pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
+          <div class="pkt-alert__text">${w(this.errorMessage)}</div>
+        </div>` : s, c = () => p`
+        ${l()} ${u()}
+        ${this.counterPosition === "top" ? d() : s}
+        <div class="pkt-contents" ${g(this.defaultSlot)}></div>
+        ${this.counterPosition === "bottom" ? d() : s} ${y()}
+      `, x = () => this.hasFieldset ? p`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${a}">
+            ${c()}
+          </fieldset>` : p`<div class="pkt-inputwrapper__fieldset">${c()}</div>`;
+    return p`<div class=${b(o)}>${x()}</div> `;
+  }
+  toggleDropdown(o) {
+    this.dispatchEvent(
+      new CustomEvent("toggleHelpText", {
+        bubbles: !1,
+        detail: { isOpen: o.detail.isOpen }
+      })
+    );
+  }
+  handleLabelClick(o) {
+    this.disabled && (o.preventDefault(), o.stopImmediatePropagation()), this.dispatchEvent(
+      new CustomEvent("labelClick", {
+        bubbles: !0,
+        composed: !0,
+        detail: "label clicked"
+      })
+    );
+  }
+};
+e([
+  S()
+], t.prototype, "hasHelptextSlot", 2);
+e([
+  r({ type: String })
+], t.prototype, "forId", 2);
+e([
+  r({ type: String })
+], t.prototype, "label", 2);
+e([
+  r({ type: String })
+], t.prototype, "helptext", 2);
+e([
+  r({ type: String })
+], t.prototype, "helptextDropdown", 2);
+e([
+  r({ type: String })
+], t.prototype, "helptextDropdownButton", 2);
+e([
+  r({ type: Boolean })
+], t.prototype, "counter", 2);
+e([
+  r({ type: Number })
+], t.prototype, "counterCurrent", 2);
+e([
+  r({ type: Number })
+], t.prototype, "counterMaxLength", 2);
+e([
+  r({ type: String })
+], t.prototype, "counterError", 2);
+e([
+  r({ type: String, reflect: !1 })
+], t.prototype, "counterPosition", 2);
+e([
+  r({ type: Boolean })
+], t.prototype, "optionalTag", 2);
+e([
+  r({ type: String })
+], t.prototype, "optionalText", 2);
+e([
+  r({ type: Boolean })
+], t.prototype, "requiredTag", 2);
+e([
+  r({ type: String })
+], t.prototype, "requiredText", 2);
+e([
+  r({ type: Boolean })
+], t.prototype, "hasError", 2);
+e([
+  r({ type: String })
+], t.prototype, "errorMessage", 2);
+e([
+  r({ type: Boolean })
+], t.prototype, "disabled", 2);
+e([
+  r({ type: Boolean })
+], t.prototype, "inline", 2);
+e([
+  r({ type: String })
+], t.prototype, "ariaDescribedby", 2);
+e([
+  r({ type: Boolean })
+], t.prototype, "hasFieldset", 2);
+e([
+  r({ type: Boolean })
+], t.prototype, "useWrapper", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "role", 2);
+t = e([
+  k("pkt-input-wrapper")
+], t);
+export {
+  t as P
+};

package/dist/input-wrapper.d.ts

@@ -1,6 +1,31 @@
 export { }
 
 
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'pkt-icon': PktIcon;
@@ -8,6 +33,13 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/{link-D3U0Jkz8.js → link-C3lW3z8X.js}

@@ -1,8 +1,8 @@
-import { P as f, x as k, E as h, n as i, a as m } from "./element-C7XjZtLU.js";
-import { P as d } from "./pkt-slot-controller-Clbye6cM.js";
-import { e as u, n as P } from "./ref-DbOSDQbk.js";
-import { e as y } from "./class-map-DWtqmIRS.js";
-import "./icon-BEUgV9Wo.js";
+import { P as f, x as k, E as h, n as i, a as m } from "./element-G8JoS0Lj.js";
+import { P as d } from "./pkt-slot-controller-D1DakVrU.js";
+import { e as u, n as P } from "./ref-cRTOoM4R.js";
+import { e as y } from "./class-map-ChuDQU5C.js";
+import "./icon-BJnwW0eh.js";
 const g = "pkt-link", v = !0, _ = {
   href: {
     name: "URL",

package/dist/{link-1iq0Pmuf.cjs → link-DOVlsg2S.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("./element-CzFXQBoS.cjs"),k=require("./pkt-slot-controller-Oc32unDk.cjs"),p=require("./ref-2anvRHT4.cjs"),h=require("./class-map-Dj5mbCUg.cjs");require("./icon-BOKusjAA.cjs");const f="pkt-link",u=!0,d={href:{name:"URL",description:"URL til lenken",type:"string",default:"#"},target:{name:"Mål",description:"Mål for lenken",type:["_blank","_self","_parent","_top"],default:"_self"},iconName:{name:"Ikon",description:"Ikon som skal vises ved siden av lenketeksten",type:"icon"},iconPosition:{name:"Ikonposisjon",description:"Posisjonen til ikonet i forhold til lenketeksten",type:["left","right"]},external:{name:"Ekstern lenke",description:"Vis ikon for ekstern lenke",type:"boolean",default:!1}},m={default:{description:"Innholdet i lenken"}},c={name:f,"css-class":"pkt-link","dark-mode":!0,isElement:u,props:d,slots:m};var P=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(s,n,r,o)=>{for(var t=o>1?void 0:o?y(n,r):n,l=s.length-1,a;l>=0;l--)(a=s[l])&&(t=(o?a(n,r,t):a(t))||t);return o&&t&&P(n,r,t),t};exports.PktLink=class extends e.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.href=c.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=c.props.external.default,this.target=c.props.target.default,this.slotController=new k.PktSlotController(this,this.defaultSlot)}render(){const n={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition==="left"||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition==="right","pkt-link--external":this.external};return e.x`<a
+"use strict";const e=require("./element-BBo3JZk5.cjs"),k=require("./pkt-slot-controller-CqNvEpFd.cjs"),p=require("./ref-DsoUUoPU.cjs"),h=require("./class-map-D4rXyUxT.cjs");require("./icon-BTUCDPN5.cjs");const f="pkt-link",u=!0,d={href:{name:"URL",description:"URL til lenken",type:"string",default:"#"},target:{name:"Mål",description:"Mål for lenken",type:["_blank","_self","_parent","_top"],default:"_self"},iconName:{name:"Ikon",description:"Ikon som skal vises ved siden av lenketeksten",type:"icon"},iconPosition:{name:"Ikonposisjon",description:"Posisjonen til ikonet i forhold til lenketeksten",type:["left","right"]},external:{name:"Ekstern lenke",description:"Vis ikon for ekstern lenke",type:"boolean",default:!1}},m={default:{description:"Innholdet i lenken"}},c={name:f,"css-class":"pkt-link","dark-mode":!0,isElement:u,props:d,slots:m};var P=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(s,n,r,o)=>{for(var t=o>1?void 0:o?y(n,r):n,l=s.length-1,a;l>=0;l--)(a=s[l])&&(t=(o?a(n,r,t):a(t))||t);return o&&t&&P(n,r,t),t};exports.PktLink=class extends e.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.href=c.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=c.props.external.default,this.target=c.props.target.default,this.slotController=new k.PktSlotController(this,this.defaultSlot)}render(){const n={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition==="left"||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition==="right","pkt-link--external":this.external};return e.x`<a
       class=${h.e(n)}
       href=${this.href}
       @click=${this.handleClick}

package/dist/link.d.ts

@@ -1,6 +1,31 @@
 export { }
 
 
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'pkt-icon': PktIcon;
@@ -8,6 +33,13 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/{linkcard-CRpo3tiw.js → linkcard-CvqqyHVW.js}

@@ -1,7 +1,7 @@
-import { P as f, x as c, n, a as h } from "./element-C7XjZtLU.js";
-import { e as k, n as m } from "./ref-DbOSDQbk.js";
-import { P as u } from "./pkt-slot-controller-Clbye6cM.js";
-import "./icon-BEUgV9Wo.js";
+import { P as f, x as c, n, a as h } from "./element-G8JoS0Lj.js";
+import { e as k, n as m } from "./ref-cRTOoM4R.js";
+import { P as u } from "./pkt-slot-controller-D1DakVrU.js";
+import "./icon-BJnwW0eh.js";
 var _ = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (l, i, s, o) => {
   for (var e = o > 1 ? void 0 : o ? d(i, s) : i, a = l.length - 1, p; a >= 0; a--)
     (p = l[a]) && (e = (o ? p(i, s, e) : p(e)) || e);

package/dist/{linkcard-2WzDJPZz.cjs → linkcard-DDD92XfD.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./element-CzFXQBoS.cjs"),k=require("./ref-2anvRHT4.cjs"),p=require("./pkt-slot-controller-Oc32unDk.cjs");require("./icon-BOKusjAA.cjs");var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,r=(s,n,i,l)=>{for(var e=l>1?void 0:l?h(n,i):n,o=s.length-1,a;o>=0;o--)(a=s[o])&&(e=(l?a(n,i,e):a(e))||e);return l&&e&&c(n,i,e),e};exports.PktLinkCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=k.e(),this.title="",this.href="#",this.iconName="",this.external=!1,this.openInNewTab=!1,this.skin="normal",this.slotController=new p.PktSlotController(this,this.defaultSlot)}render(){const n=["pkt-linkcard",this.skin&&`pkt-linkcard--${this.skin}`].filter(Boolean).join(" "),i=["pkt-linkcard__title",this.external&&"pkt-link pkt-link--external"].filter(Boolean).join(" ");return t.x`
+"use strict";const t=require("./element-BBo3JZk5.cjs"),k=require("./ref-DsoUUoPU.cjs"),p=require("./pkt-slot-controller-CqNvEpFd.cjs");require("./icon-BTUCDPN5.cjs");var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,r=(s,n,i,l)=>{for(var e=l>1?void 0:l?h(n,i):n,o=s.length-1,a;o>=0;o--)(a=s[o])&&(e=(l?a(n,i,e):a(e))||e);return l&&e&&c(n,i,e),e};exports.PktLinkCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=k.e(),this.title="",this.href="#",this.iconName="",this.external=!1,this.openInNewTab=!1,this.skin="normal",this.slotController=new p.PktSlotController(this,this.defaultSlot)}render(){const n=["pkt-linkcard",this.skin&&`pkt-linkcard--${this.skin}`].filter(Boolean).join(" "),i=["pkt-linkcard__title",this.external&&"pkt-link pkt-link--external"].filter(Boolean).join(" ");return t.x`
       <a
         href=${this.href}
         class=${n}

package/dist/linkcard.d.ts

@@ -1,6 +1,31 @@
 export { }
 
 
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'pkt-icon': PktIcon;
@@ -8,6 +33,13 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/listbox-BTVnrHWv.cjs

@@ -0,0 +1,95 @@
+"use strict";const s=require("./element-BBo3JZk5.cjs"),p=require("./state-BILlRnrD.cjs"),h=require("./if-defined-C1ZDVzYn.cjs"),u=require("./repeat-kruY8poV.cjs"),c=require("./class-map-D4rXyUxT.cjs"),d=require("./stringutils-CkVRq4jP.cjs");var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,n=(r,e,t,i)=>{for(var a=i>1?void 0:i?f(e,t):e,o=r.length-1,l;o>=0;o--)(l=r[o])&&(a=(i?l(e,t,a):l(a))||a);return i&&a&&b(e,t,a),a};exports.PktListbox=class extends s.PktElement{constructor(){super(...arguments),this.id=d.uuidish(),this.label=null,this.options=[],this.isOpen=!1,this.disabled=!1,this.includeSearch=!1,this.isMultiSelect=!1,this.allowUserInput=!1,this.maxIsReached=!1,this.customUserInput=null,this.searchPlaceholder=null,this.searchValue=null,this.maxLength=0,this.userMessage=null,this._selectedOptions=0,this._filteredOptions=[]}connectedCallback(){super.connectedCallback(),this.includeSearch&&!this.searchValue&&(this.searchValue=""),this.options.length>0&&this.filterOptions(),this.setAttribute("tabindex","-1"),this.addEventListener("focus",this.focusFirstOrSelectedOption)}updated(e){(e.has("options")||e.has("searchValue"))&&this.filterOptions(),super.updated(e)}attributeChangedCallback(e,t,i){(e==="options"||e==="searchValue"||e==="search-value")&&this.filterOptions(),super.attributeChangedCallback(e,t,i)}render(){return s.x`
+      <div
+        class=${c.e({"pkt-listbox":!0,"pkt-listbox__open":this.isOpen,"pkt-txt-16-light":!0})}
+        role="listbox"
+        aria-label=${h.o(this.label)}
+      >
+        <div class="pkt-listbox__banners">
+          ${this.renderMaximumReachedBanner()} ${this.renderUserMessage()}
+          ${this.renderNewOptionBanner()} ${this.renderSearch()}
+        </div>
+        <ul class="pkt-listbox__options" role="presentation">
+          ${this.renderList()}
+        </ul>
+      </div>
+    `}renderCheckboxOrCheckIcon(e,t){return this.isMultiSelect?s.x`
+          <input
+            class="pkt-input-check__input-checkbox"
+            type="checkbox"
+            role="presentation"
+            tabindex="-1"
+            value=${e.value}
+            .checked=${e.selected}
+            aria-labelledby=${this.id+"-option-label-"+t}
+            ?disabled=${this.disabled||e.disabled||this.maxIsReached&&!e.selected}
+          />
+        `:e.selected?s.x`<pkt-icon name="check-big"></pkt-icon>`:s.E}renderList(){return s.x`
+      ${u.c(this._filteredOptions,e=>e.value,(e,t)=>s.x`
+          <li
+            @click=${()=>{this.toggleOption(e)}}
+            aria-selected=${e.selected?"true":"false"}
+            @keydown=${this.handleOptionKeydown}
+            class=${c.e({"pkt-listbox__option":!0,"pkt-listbox__option--selected":!!(!this.isMultiSelect&&e.selected),"pkt-listbox__option--checkBox":this.isMultiSelect})}
+            tabindex="${this.disabled||e.disabled?"-1":"0"}"
+            data-index=${t}
+            data-value=${e.value}
+            data-selected=${e.selected?"true":"false"}
+            ?data-disabled=${this.disabled||e.disabled||this.maxIsReached&&!e.selected}
+            role="option"
+            id=${`${this.id}-${t}`}
+          >
+            ${this.renderCheckboxOrCheckIcon(e,t)}
+            <span class="pkt-listbox__option-label" id=${this.id+"-option-label-"+t}>
+              ${e.prefix?s.x`<span class="pkt-listbox__option-prefix">${e.prefix}</span>`:s.E}
+              ${e.label||e.value}
+            </span>
+            ${e.description?s.x`<span class="pkt-listbox__option-description pkt-txt-14-light"
+                  >${e.description}</span
+                >`:s.E}
+          </li>
+        `)}
+    `}renderNewOptionBanner(){return this.allowUserInput&&this.customUserInput?s.x`
+          <div
+            class="pkt-listbox__banner pkt-listbox__banner--new-option pkt-listbox__option"
+            data-type="new-option"
+            data-value=${this.customUserInput}
+            data-selected="false"
+            tabindex="0"
+            @click=${()=>this.toggleOption({value:this.customUserInput||""})}
+            @keydown=${this.handleOptionKeydown}
+          >
+            <pkt-icon class="pkt-listbox__banner-icon" name="plus-sign" size="large"></pkt-icon>
+            Legg til “${this.customUserInput}”
+          </div>
+        `:s.E}renderMaximumReachedBanner(){return this._selectedOptions=this.options.filter(e=>e.selected).length,this.isMultiSelect&&this._selectedOptions>0&&this.maxLength>0?s.x`
+          <div class="pkt-listbox__banner pkt-listbox__banner--maximum-reached">
+            ${this._selectedOptions} av maks ${this.maxLength} mulige er valgt.
+          </div>
+        `:s.E}renderUserMessage(){return this.userMessage?s.x`<div class="pkt-listbox__banner pkt-listbox__banner--user-message">
+          <pkt-icon
+            class="pkt-listbox__banner-icon"
+            name="exclamation-mark-circle"
+            size="large"
+          ></pkt-icon>
+          ${this.userMessage}
+        </div>`:s.E}renderSearch(){return this.includeSearch?s.x`
+          <div class="pkt-listbox__search">
+            <span class="pkt-listbox__search-icon">
+              <pkt-icon name="magnifying-glass-small" size="large"></pkt-icon>
+            </span>
+            <input
+              class="pkt-txt-16-light"
+              type="text"
+              aria-label="Søk i listen"
+              form=""
+              placeholder=${this.searchPlaceholder||s.translations.forms.search.placeholder}
+              @input=${this.handleSearchInput}
+              @keydown=${this.handleSearchKeydown}
+              .value=${this.searchValue}
+              data-type="searchbox"
+              ?disabled=${this.disabled}
+              ?readonly=${this.disabled}
+              role="searchbox"
+            />
+          </div>
+        `:s.E}handleSearchInput(e){this.searchValue=e.target.value,this.dispatchEvent(new CustomEvent("search",{detail:this.searchValue,bubbles:!1}))}handleSearchKeydown(e){switch(e.key){case"Enter":e.preventDefault();break;case"ArrowUp":case"Escape":this.closeOptions(),e.preventDefault();break;case"ArrowDown":case"Tab":this.focusFirstOrSelectedOption();break}}handleOptionKeydown(e){const t=e.currentTarget,i=t.dataset.value,a=t.dataset.type,o=t.dataset.selected==="true";if(!(!this.getOptionElements().length&&(!this.customUserInput||!this.allowUserInput&&this.customUserInput)&&a!=="new-option"&&a!=="searchbox"))switch(e.key){case" ":case"Enter":this.toggleOption(t),e.preventDefault();break;case"Backspace":i&&(o?this.toggleOption(t):this.closeOptions()),e.preventDefault();break;case"Escape":case"Tab":this.closeOptions();break;case"ArrowDown":e.altKey?this.focusLastOption():a==="searchbox"||a==="new-option"?this.focusFirstOption():this.focusNextOption(t),e.preventDefault();break;case"ArrowUp":if(e.altKey)this.focusFirstOption();else if(t.dataset.index==="0"&&this.includeSearch){const l=this.querySelector('[role="searchbox"]');l&&l.focus()}else if(t.dataset.index==="0"&&this.customUserInput){const l=this.querySelector('[data-type="new-option"]');l&&l.focus()}else this.focusPreviousOption(t);e.preventDefault();break;case"Home":this.focusFirstOption(),e.preventDefault();break;case"End":this.focusLastOption(),e.preventDefault();break;default:(e.metaKey||e.ctrlKey)&&e.key==="a"&&(this.selectAll(),e.preventDefault()),this.isLetterOrSpace(e.key)&&(this.handleTypeAhead(e.key),e.preventDefault());break}}focusAndScrollIntoView(e){e.scrollIntoView({block:"nearest"}),window.setTimeout(()=>e.focus(),0)}focusNextOption(e){const t=e.nextElementSibling;t&&this.focusAndScrollIntoView(t)}focusPreviousOption(e){const t=e.previousElementSibling;if(e.dataset.index==="0"&&this.includeSearch){const i=this.querySelector('[role="searchbox"]');i&&this.focusAndScrollIntoView(i)}else t&&this.focusAndScrollIntoView(t)}focusFirstOption(){const e=this.getOptionElements()[0];e&&this.focusAndScrollIntoView(e)}focusLastOption(){const e=this.getOptionElements().pop();e&&this.focusAndScrollIntoView(e)}focusFirstOrSelectedOption(){if(this.disabled)return;const e=this.getOptionElements().find(t=>t.dataset.selected==="true");if(this.allowUserInput&&this.customUserInput){const t=this.querySelector('[data-type="new-option"]');this.focusAndScrollIntoView(t)}else if(e)this.focusAndScrollIntoView(e);else if(this.includeSearch&&!(document.activeElement instanceof HTMLInputElement)){const t=this.querySelector('[role="searchbox"]');window.setTimeout(()=>t.focus(),0)}else this.focusFirstOption()}toggleOption(e){const t=e instanceof HTMLElement?e.dataset.disabled:e.disabled;if(this.disabled||t)return;const i=e instanceof HTMLElement?e.dataset.value:e.value;this.dispatchEvent(new CustomEvent("option-toggle",{detail:i,bubbles:!1}))}selectAll(){this.dispatchEvent(new CustomEvent("select-all",{bubbles:!1}))}closeOptions(){this.dispatchEvent(new CustomEvent("close-options",{bubbles:!1}))}filterOptions(){this.searchValue?this._filteredOptions=this.options.filter(e=>{var i;return(e.label+e.value).toLowerCase().includes(((i=this.searchValue)==null?void 0:i.toLowerCase())||"")}):this._filteredOptions=[...this.options]}isLetterOrSpace(e){return/^[\p{L} ]$/u.test(e)}handleTypeAhead(e){this.typeAheadString+=e.toLowerCase(),this.typeAheadTimeout&&clearTimeout(this.typeAheadTimeout),this.typeAheadTimeout=window.setTimeout(()=>{this.typeAheadString=""},500);const i=this.getOptionElements().find(a=>{var o;return(o=a.textContent)==null?void 0:o.trim().toLowerCase().startsWith(this.typeAheadString)});i&&this.focusAndScrollIntoView(i)}getOptionElements(){return this._filteredOptions.length?Array.from(this.querySelectorAll('[role="option"]:not([data-disabled])')||[]):[]}};n([s.n({type:String})],exports.PktListbox.prototype,"id",2);n([s.n({type:String})],exports.PktListbox.prototype,"label",2);n([s.n({type:Array})],exports.PktListbox.prototype,"options",2);n([s.n({type:Boolean,reflect:!0})],exports.PktListbox.prototype,"isOpen",2);n([s.n({type:Boolean})],exports.PktListbox.prototype,"disabled",2);n([s.n({type:Boolean})],exports.PktListbox.prototype,"includeSearch",2);n([s.n({type:Boolean})],exports.PktListbox.prototype,"isMultiSelect",2);n([s.n({type:Boolean})],exports.PktListbox.prototype,"allowUserInput",2);n([s.n({type:Boolean})],exports.PktListbox.prototype,"maxIsReached",2);n([s.n({type:String})],exports.PktListbox.prototype,"customUserInput",2);n([s.n({type:String})],exports.PktListbox.prototype,"searchPlaceholder",2);n([s.n({type:String})],exports.PktListbox.prototype,"searchValue",2);n([s.n({type:Number})],exports.PktListbox.prototype,"maxLength",2);n([s.n({type:String})],exports.PktListbox.prototype,"userMessage",2);n([p.r()],exports.PktListbox.prototype,"_filteredOptions",2);exports.PktListbox=n([s.t("pkt-listbox")],exports.PktListbox);