@oslokommune/punkt-elements 16.7.0 → 16.7.3

package/dist/linkcard-Lbq_UhjZ.js

@@ -0,0 +1,56 @@
+import { t as c, b as a, n as r } from "./element-CPpT3rFQ.js";
+import { P as k, s as f } from "./element-with-slot-Dqk6-TRR.js";
+import "./icon-CxQcIa5F.js";
+import { o as h } from "./if-defined-B0krMLad.js";
+var d = Object.defineProperty, n = (i, o, s, m) => {
+  for (var t = void 0, l = i.length - 1, p; l >= 0; l--)
+    (p = i[l]) && (t = p(o, s, t) || t);
+  return t && d(o, s, t), t;
+};
+class e extends k {
+  constructor() {
+    super(...arguments), this.title = "", this.href = "#", this.iconName = "", this.external = !1, this.openInNewTab = !1, this.skin = "normal";
+  }
+  render() {
+    const o = ["pkt-linkcard", this.skin && `pkt-linkcard--${this.skin}`].filter(Boolean).join(" "), s = ["pkt-linkcard__title", this.external && "pkt-link pkt-link--external"].filter(Boolean).join(" ");
+    return a`
+      <a
+        href=${this.href}
+        class=${o}
+        target=${this.openInNewTab ? "_blank" : "_self"}
+        rel=${h(this.openInNewTab ? "noopener noreferrer" : void 0)}
+      >
+        ${this.iconName && a`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
+        ${this.title && a`<div class=${s}>${this.title}</div>`}
+
+        <div class="pkt-linkcard__text">${f(this)}</div>
+      </a>
+    `;
+  }
+}
+n([
+  r({ type: String, reflect: !0 })
+], e.prototype, "title");
+n([
+  r({ type: String, reflect: !0 })
+], e.prototype, "href");
+n([
+  r({ type: String, reflect: !0 })
+], e.prototype, "iconName");
+n([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "external");
+n([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "openInNewTab");
+n([
+  r({ type: String, reflect: !0 })
+], e.prototype, "skin");
+try {
+  c("pkt-linkcard")(e);
+} catch {
+  console.warn("Forsøker å definere <pkt-linkcard>, men den er allerede definert");
+}
+export {
+  e as P
+};

package/dist/{listbox-BQKDZvZn.js → listbox-Bia4_tvN.js}

@@ -1,106 +1,106 @@
-import { P as v, b as d, A as h, s as _, n as o, t as O } from "./element-CPpT3rFQ.js";
+import { t as v, P as _, b as d, A as h, s as O, n as c } from "./element-CPpT3rFQ.js";
 import { r as w } from "./state-C_1EOo3D.js";
 import { o as m } from "./if-defined-B0krMLad.js";
 import { c as $ } from "./repeat-BD8TKgJb.js";
-import { e as g } from "./class-map-CEnykyO_.js";
+import { e as k } from "./class-map-CEnykyO_.js";
 import { u as S } from "./utils-DznhwRXm.js";
-const F = (e, t) => t && (e.find((s) => s.value === t) || e.find((s) => s.label === t)) || null, H = (e, t) => {
-  if (!t) return -1;
-  const s = e.findIndex((i) => i.value === t);
-  return s >= 0 ? s : e.findIndex((i) => i.label === t);
-}, I = (e, t) => {
-  if (!t) return [...e];
-  const s = t.toLowerCase();
-  return e.filter((i) => (i.fulltext || i.value + (i.label || "") + (i.prefix || "")).toLowerCase().includes(s));
-}, z = (e) => e.value + (e.label || "") + (e.prefix || ""), N = (e, t) => t !== null && e >= t, j = (e, t) => {
-  if (!t) return { filtered: [...e], suggestion: null };
-  const s = t.toLowerCase(), i = e.filter((l) => {
-    var c;
-    return (c = l.fulltext) == null ? void 0 : c.toLowerCase().includes(s);
-  }), a = i.find(
-    (l) => {
-      var c;
-      return !l.selected && ((c = l.label) == null ? void 0 : c.toLowerCase().startsWith(s));
+const F = (s, e) => e && (s.find((t) => t.value === e) || s.find((t) => t.label === e)) || null, q = (s, e) => {
+  if (!e) return -1;
+  const t = s.findIndex((a) => a.value === e);
+  return t >= 0 ? t : s.findIndex((a) => a.label === e);
+}, I = (s, e) => {
+  if (!e) return [...s];
+  const t = e.toLowerCase();
+  return s.filter((a) => (a.fulltext || a.value + (a.label || "") + (a.prefix || "")).toLowerCase().includes(t));
+}, H = (s) => s.value + (s.label || "") + (s.prefix || ""), z = (s, e) => e !== null && s >= e, N = (s, e) => {
+  if (!e) return { filtered: [...s], suggestion: null };
+  const t = e.toLowerCase(), a = s.filter((o) => {
+    var l;
+    return (l = o.fulltext) == null ? void 0 : l.toLowerCase().includes(t);
+  }), i = a.find(
+    (o) => {
+      var l;
+      return !o.selected && ((l = o.label) == null ? void 0 : l.toLowerCase().startsWith(t));
     }
   ) || null;
-  return { filtered: i, suggestion: a };
-}, W = (e, t, s, i) => {
-  if (!e.trim())
+  return { filtered: a, suggestion: i };
+}, W = (s, e, t, a) => {
+  if (!s.trim())
     return { addValueText: null, userInfoMessage: "" };
-  const a = e.trim().toLowerCase(), l = t.find((p) => p.toLowerCase() === a), c = s.filter(
+  const i = s.trim().toLowerCase(), o = e.find((p) => p.toLowerCase() === i), l = t.filter(
     (p) => {
       var b;
-      return ((b = p.label) == null ? void 0 : b.toLowerCase().includes(a)) || p.value.toLowerCase().includes(a);
+      return ((b = p.label) == null ? void 0 : b.toLowerCase().includes(i)) || p.value.toLowerCase().includes(i);
     }
-  ), y = c.find(
+  ), y = l.find(
     (p) => {
       var b;
-      return ((b = p.label) == null ? void 0 : b.toLowerCase()) === a || p.value.toLowerCase() === a;
+      return ((b = p.label) == null ? void 0 : b.toLowerCase()) === i || p.value.toLowerCase() === i;
     }
   );
-  return (c.length === 0 || !y) && i ? { addValueText: e, userInfoMessage: "" } : c.length === 0 && !i ? { addValueText: null, userInfoMessage: "Ingen treff i søket" } : l ? { addValueText: null, userInfoMessage: "Verdien er allerede valgt" } : { addValueText: null, userInfoMessage: "" };
-}, C = (e) => /^[\p{L} ]$/u.test(e), L = (e = 500) => {
-  let t = "", s;
-  return { append: (l) => (t += l.toLowerCase(), s !== void 0 && clearTimeout(s), s = setTimeout(() => {
-    t = "";
-  }, e), t), reset: () => {
-    t = "", s !== void 0 && (clearTimeout(s), s = void 0);
-  }, getBuffer: () => t };
-}, M = (e, t) => {
-  const s = t.toLowerCase();
-  return e.findIndex((i) => {
-    var a;
-    return (a = i.textContent) == null ? void 0 : a.trim().toLowerCase().startsWith(s);
+  return (l.length === 0 || !y) && a ? { addValueText: s, userInfoMessage: "" } : l.length === 0 && !a ? { addValueText: null, userInfoMessage: "Ingen treff i søket" } : o ? { addValueText: null, userInfoMessage: "Verdien er allerede valgt" } : { addValueText: null, userInfoMessage: "" };
+}, C = (s) => /^[\p{L} ]$/u.test(s), L = (s = 500) => {
+  let e = "", t;
+  return { append: (o) => (e += o.toLowerCase(), t !== void 0 && clearTimeout(t), t = setTimeout(() => {
+    e = "";
+  }, s), e), reset: () => {
+    e = "", t !== void 0 && (clearTimeout(t), t = void 0);
+  }, getBuffer: () => e };
+}, M = (s, e) => {
+  const t = e.toLowerCase();
+  return s.findIndex((a) => {
+    var i;
+    return (i = a.textContent) == null ? void 0 : i.trim().toLowerCase().startsWith(t);
   });
-}, u = (e) => {
-  e.scrollIntoView({ block: "nearest" }), window.setTimeout(() => e.focus(), 0);
-}, f = (e) => Array.from(
-  e.querySelectorAll('[role="option"]:not([data-disabled])') || []
-), E = (e) => {
-  const t = e.nextElementSibling;
+}, u = (s) => {
+  s.scrollIntoView({ block: "nearest" }), window.setTimeout(() => s.focus(), 0);
+}, f = (s) => Array.from(
+  s.querySelectorAll('[role="option"]:not([data-disabled])') || []
+), E = (s) => {
+  const e = s.nextElementSibling;
+  e && u(e);
+}, T = (s, e, t) => {
+  const a = s.previousElementSibling;
+  if (s.dataset.index === "0" && t) {
+    const i = e.querySelector('[role="searchbox"]');
+    i && u(i);
+  } else a && u(a);
+}, x = (s) => {
+  const e = f(s);
+  e[0] && u(e[0]);
+}, g = (s) => {
+  const e = f(s), t = e[e.length - 1];
   t && u(t);
-}, T = (e, t, s) => {
-  const i = e.previousElementSibling;
-  if (e.dataset.index === "0" && s) {
-    const a = t.querySelector('[role="searchbox"]');
-    a && u(a);
-  } else i && u(i);
-}, x = (e) => {
-  const t = f(e);
-  t[0] && u(t[0]);
-}, k = (e) => {
-  const t = f(e), s = t[t.length - 1];
-  s && u(s);
-}, U = (e, t) => {
-  if (t.disabled) return;
-  const s = f(e);
-  if (t.allowUserInput && t.customUserInput) {
-    const a = e.querySelector('[data-type="new-option"]');
-    if (a) {
-      u(a);
+}, U = (s, e) => {
+  if (e.disabled) return;
+  const t = f(s);
+  if (e.allowUserInput && e.customUserInput) {
+    const i = s.querySelector('[data-type="new-option"]');
+    if (i) {
+      u(i);
       return;
     }
   }
-  const i = s.find((a) => a.dataset.selected === "true");
-  if (i) {
-    u(i);
+  const a = t.find((i) => i.dataset.selected === "true");
+  if (a) {
+    u(a);
     return;
   }
-  if (t.includeSearch && !(document.activeElement instanceof HTMLInputElement)) {
-    const a = e.querySelector('[role="searchbox"]');
-    if (a) {
-      window.setTimeout(() => a.focus(), 0);
+  if (e.includeSearch && !(document.activeElement instanceof HTMLInputElement)) {
+    const i = s.querySelector('[role="searchbox"]');
+    if (i) {
+      window.setTimeout(() => i.focus(), 0);
       return;
     }
   }
-  s[0] && u(s[0]);
+  t[0] && u(t[0]);
 };
-var V = Object.defineProperty, B = Object.getOwnPropertyDescriptor, r = (e, t, s, i) => {
-  for (var a = i > 1 ? void 0 : i ? B(t, s) : t, l = e.length - 1, c; l >= 0; l--)
-    (c = e[l]) && (a = (i ? c(t, s, a) : c(a)) || a);
-  return i && a && V(t, s, a), a;
+var V = Object.defineProperty, r = (s, e, t, a) => {
+  for (var i = void 0, o = s.length - 1, l; o >= 0; o--)
+    (l = s[o]) && (i = l(e, t, i) || i);
+  return i && V(e, t, i), i;
 };
-let n = class extends v {
+class n extends _ {
   constructor() {
     super(...arguments), this.id = S(), 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.typeahead = L(), this._filteredOptions = [];
   }
@@ -114,8 +114,8 @@ let n = class extends v {
   updated(e) {
     (e.has("options") || e.has("searchValue")) && this.filterOptions(), super.updated(e);
   }
-  attributeChangedCallback(e, t, s) {
-    (e === "options" || e === "search-value") && this.filterOptions(), super.attributeChangedCallback(e, t, s);
+  attributeChangedCallback(e, t, a) {
+    (e === "options" || e === "search-value") && this.filterOptions(), super.attributeChangedCallback(e, t, a);
   }
   // Render methods
   get _hasOptions() {
@@ -124,7 +124,7 @@ let n = class extends v {
   render() {
     return d`
       <div
-        class=${g({
+        class=${k({
       "pkt-listbox": !0,
       "pkt-listbox__open": this.isOpen,
       "pkt-txt-16-light": !0
@@ -154,8 +154,8 @@ let n = class extends v {
             role="presentation"
             tabindex="-1"
             value=${e.value}
-            @change=${(s) => {
-      s.stopPropagation();
+            @change=${(a) => {
+      a.stopPropagation();
     }}
             .checked=${e.selected}
             aria-labelledby=${this.id + "-option-label-" + t}
@@ -185,7 +185,7 @@ let n = class extends v {
       }}
             aria-selected=${e.selected ? "true" : "false"}
             @keydown=${this.handleOptionKeydown}
-            class=${g({
+            class=${k({
         "pkt-listbox__option": !0,
         "pkt-listbox__option--selected": !!(!this.isMultiSelect && e.selected),
         "pkt-listbox__option--checkBox": this.isMultiSelect
@@ -258,7 +258,7 @@ let n = class extends v {
               type="text"
               aria-label="Søk i listen"
               form=""
-              placeholder=${this.searchPlaceholder || _.forms.search.placeholder}
+              placeholder=${this.searchPlaceholder || O.forms.search.placeholder}
               @input=${this.handleSearchInput}
               @keydown=${this.handleSearchKeydown}
               .value=${this.searchValue}
@@ -297,7 +297,7 @@ let n = class extends v {
     }
   }
   handleOptionKeydown(e) {
-    const t = e.currentTarget, s = t.dataset.value, i = t.dataset.type, a = t.dataset.selected === "true";
+    const t = e.currentTarget, a = t.dataset.value, i = t.dataset.type, o = t.dataset.selected === "true";
     if (!(!f(this).length && (!this.customUserInput || !this.allowUserInput && this.customUserInput) && i !== "new-option" && i !== "searchbox"))
       switch (e.key) {
         case " ":
@@ -305,7 +305,7 @@ let n = class extends v {
           this.toggleOption(t), e.preventDefault();
           break;
         case "Backspace":
-          s && (a ? this.toggleOption(t) : this.closeOptions()), e.preventDefault();
+          a && (o ? this.toggleOption(t) : this.closeOptions()), e.preventDefault();
           break;
         case "Escape":
           this.closeOptions(), e.preventDefault();
@@ -314,7 +314,7 @@ let n = class extends v {
           this.tabClose();
           break;
         case "ArrowDown":
-          e.altKey ? k(this) : i === "searchbox" || i === "new-option" ? x(this) : E(t), e.preventDefault();
+          e.altKey ? g(this) : i === "searchbox" || i === "new-option" ? x(this) : E(t), e.preventDefault();
           break;
         case "ArrowUp":
           if (e.altKey)
@@ -333,7 +333,7 @@ let n = class extends v {
           x(this), e.preventDefault();
           break;
         case "End":
-          k(this), e.preventDefault();
+          g(this), e.preventDefault();
           break;
         default:
           (e.metaKey || e.ctrlKey) && e.key === "a" && (this.selectAll(), e.preventDefault()), C(e.key) && (this.handleTypeAhead(e.key), e.preventDefault());
@@ -353,10 +353,10 @@ let n = class extends v {
   toggleOption(e) {
     const t = e instanceof HTMLElement ? e.dataset.disabled : e.disabled;
     if (this.disabled || t) return;
-    const s = e instanceof HTMLElement ? e.dataset.value : e.value;
+    const a = e instanceof HTMLElement ? e.dataset.value : e.value;
     this.dispatchEvent(
       new CustomEvent("option-toggle", {
-        detail: s,
+        detail: a,
         bubbles: !1
       })
     );
@@ -375,64 +375,66 @@ let n = class extends v {
     this._filteredOptions = I(this.options, this.searchValue);
   }
   handleTypeAhead(e) {
-    const t = this.typeahead.append(e), s = f(this), i = M(s, t);
-    i >= 0 && u(s[i]);
+    const t = this.typeahead.append(e), a = f(this), i = M(a, t);
+    i >= 0 && u(a[i]);
   }
-};
+}
 r([
-  o({ type: String })
-], n.prototype, "id", 2);
+  c({ type: String })
+], n.prototype, "id");
 r([
-  o({ type: String })
-], n.prototype, "label", 2);
+  c({ type: String })
+], n.prototype, "label");
 r([
-  o({ type: Array })
-], n.prototype, "options", 2);
+  c({ type: Array })
+], n.prototype, "options");
 r([
-  o({ type: Boolean, reflect: !0, attribute: "is-open" })
-], n.prototype, "isOpen", 2);
+  c({ type: Boolean, reflect: !0, attribute: "is-open" })
+], n.prototype, "isOpen");
 r([
-  o({ type: Boolean })
-], n.prototype, "disabled", 2);
+  c({ type: Boolean })
+], n.prototype, "disabled");
 r([
-  o({ type: Boolean, attribute: "include-search" })
-], n.prototype, "includeSearch", 2);
+  c({ type: Boolean, attribute: "include-search" })
+], n.prototype, "includeSearch");
 r([
-  o({ type: Boolean, attribute: "is-multi-select" })
-], n.prototype, "isMultiSelect", 2);
+  c({ type: Boolean, attribute: "is-multi-select" })
+], n.prototype, "isMultiSelect");
 r([
-  o({ type: Boolean, attribute: "allow-user-input" })
-], n.prototype, "allowUserInput", 2);
+  c({ type: Boolean, attribute: "allow-user-input" })
+], n.prototype, "allowUserInput");
 r([
-  o({ type: Boolean, attribute: "max-is-reached" })
-], n.prototype, "maxIsReached", 2);
+  c({ type: Boolean, attribute: "max-is-reached" })
+], n.prototype, "maxIsReached");
 r([
-  o({ type: String, attribute: "custom-user-input" })
-], n.prototype, "customUserInput", 2);
+  c({ type: String, attribute: "custom-user-input" })
+], n.prototype, "customUserInput");
 r([
-  o({ type: String, attribute: "search-placeholder" })
-], n.prototype, "searchPlaceholder", 2);
+  c({ type: String, attribute: "search-placeholder" })
+], n.prototype, "searchPlaceholder");
 r([
-  o({ type: String, attribute: "search-value" })
-], n.prototype, "searchValue", 2);
+  c({ type: String, attribute: "search-value" })
+], n.prototype, "searchValue");
 r([
-  o({ type: Number, attribute: "max-length" })
-], n.prototype, "maxLength", 2);
+  c({ type: Number, attribute: "max-length" })
+], n.prototype, "maxLength");
 r([
-  o({ type: String, attribute: "user-message" })
-], n.prototype, "userMessage", 2);
+  c({ type: String, attribute: "user-message" })
+], n.prototype, "userMessage");
 r([
   w()
-], n.prototype, "_filteredOptions", 2);
-n = r([
-  O("pkt-listbox")
-], n);
+], n.prototype, "_filteredOptions");
+try {
+  v("pkt-listbox")(n);
+} catch {
+  console.warn("Forsøker å definere <pkt-listbox>, men den er allerede definert");
+}
 export {
   n as P,
-  j as a,
-  z as b,
-  H as c,
+  N as a,
+  H as b,
+  q as c,
   F as f,
   W as g,
-  N as i
+  z as i
 };

package/dist/listbox-La2GZQei.cjs

@@ -0,0 +1,106 @@
+"use strict";const a=require("./element-gR_VtSiD.cjs"),m=require("./state-Dg-53wQ8.cjs"),b=require("./if-defined-BOW3ODSj.cjs"),y=require("./repeat-Cfq8CDlf.cjs"),x=require("./class-map-CsENJXf1.cjs"),v=require("./utils-byXsEz1u.cjs"),_=(s,e)=>e&&(s.find(t=>t.value===e)||s.find(t=>t.label===e))||null,O=(s,e)=>{if(!e)return-1;const t=s.findIndex(n=>n.value===e);return t>=0?t:s.findIndex(n=>n.label===e)},w=(s,e)=>{if(!e)return[...s];const t=e.toLowerCase();return s.filter(n=>(n.fulltext||n.value+(n.label||"")+(n.prefix||"")).toLowerCase().includes(t))},$=s=>s.value+(s.label||"")+(s.prefix||""),S=(s,e)=>e!==null&&s>=e,I=(s,e)=>{if(!e)return{filtered:[...s],suggestion:null};const t=e.toLowerCase(),n=s.filter(c=>{var l;return(l=c.fulltext)==null?void 0:l.toLowerCase().includes(t)}),i=n.find(c=>{var l;return!c.selected&&((l=c.label)==null?void 0:l.toLowerCase().startsWith(t))})||null;return{filtered:n,suggestion:i}},C=(s,e,t,n)=>{if(!s.trim())return{addValueText:null,userInfoMessage:""};const i=s.trim().toLowerCase(),c=e.find(u=>u.toLowerCase()===i),l=t.filter(u=>{var h;return((h=u.label)==null?void 0:h.toLowerCase().includes(i))||u.value.toLowerCase().includes(i)}),g=l.find(u=>{var h;return((h=u.label)==null?void 0:h.toLowerCase())===i||u.value.toLowerCase()===i});return(l.length===0||!g)&&n?{addValueText:s,userInfoMessage:""}:l.length===0&&!n?{addValueText:null,userInfoMessage:"Ingen treff i søket"}:c?{addValueText:null,userInfoMessage:"Verdien er allerede valgt"}:{addValueText:null,userInfoMessage:""}},M=s=>/^[\p{L} ]$/u.test(s),L=(s=500)=>{let e="",t;return{append:c=>(e+=c.toLowerCase(),t!==void 0&&clearTimeout(t),t=setTimeout(()=>{e=""},s),e),reset:()=>{e="",t!==void 0&&(clearTimeout(t),t=void 0)},getBuffer:()=>e}},E=(s,e)=>{const t=e.toLowerCase();return s.findIndex(n=>{var i;return(i=n.textContent)==null?void 0:i.trim().toLowerCase().startsWith(t)})},d=s=>{s.scrollIntoView({block:"nearest"}),window.setTimeout(()=>s.focus(),0)},p=s=>Array.from(s.querySelectorAll('[role="option"]:not([data-disabled])')||[]),T=s=>{const e=s.nextElementSibling;e&&d(e)},U=(s,e,t)=>{const n=s.previousElementSibling;if(s.dataset.index==="0"&&t){const i=e.querySelector('[role="searchbox"]');i&&d(i)}else n&&d(n)},f=s=>{const e=p(s);e[0]&&d(e[0])},k=s=>{const e=p(s),t=e[e.length-1];t&&d(t)},A=(s,e)=>{if(e.disabled)return;const t=p(s);if(e.allowUserInput&&e.customUserInput){const i=s.querySelector('[data-type="new-option"]');if(i){d(i);return}}const n=t.find(i=>i.dataset.selected==="true");if(n){d(n);return}if(e.includeSearch&&!(document.activeElement instanceof HTMLInputElement)){const i=s.querySelector('[role="searchbox"]');if(i){window.setTimeout(()=>i.focus(),0);return}}t[0]&&d(t[0])};var V=Object.defineProperty,o=(s,e,t,n)=>{for(var i=void 0,c=s.length-1,l;c>=0;c--)(l=s[c])&&(i=l(e,t,i)||i);return i&&V(e,t,i),i};class r extends a.PktElement{constructor(){super(...arguments),this.id=v.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.typeahead=L(),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)}disconnectedCallback(){super.disconnectedCallback(),this.typeahead.reset()}updated(e){(e.has("options")||e.has("searchValue"))&&this.filterOptions(),super.updated(e)}attributeChangedCallback(e,t,n){(e==="options"||e==="search-value")&&this.filterOptions(),super.attributeChangedCallback(e,t,n)}get _hasOptions(){return this._filteredOptions.length>0||this.options.length>0}render(){return a.b`
+      <div
+        class=${x.e({"pkt-listbox":!0,"pkt-listbox__open":this.isOpen,"pkt-txt-16-light":!0})}
+        role=${b.o(this._hasOptions?"listbox":void 0)}
+        aria-multiselectable=${b.o(this._hasOptions&&this.isMultiSelect?"true":void 0)}
+        aria-label=${b.o(this._hasOptions?this.label??void 0:void 0)}
+      >
+        <div class="pkt-listbox__banners">
+          ${this.renderSearch()} ${this.renderMaximumReachedBanner()} ${this.renderUserMessage()}
+          ${this.renderEmptyMessage()} ${this.renderNewOptionBanner()}
+        </div>
+        <ul class="pkt-listbox__options" role="presentation">
+          ${this.renderList()}
+        </ul>
+      </div>
+      <div aria-live="polite" class="pkt-visually-hidden">${this.userMessage}</div>
+    `}renderCheckboxOrCheckIcon(e,t){return this.isMultiSelect?a.b`
+          <input
+            class="pkt-input-check__input-checkbox"
+            type="checkbox"
+            role="presentation"
+            tabindex="-1"
+            value=${e.value}
+            @change=${n=>{n.stopPropagation()}}
+            .checked=${e.selected}
+            aria-labelledby=${this.id+"-option-label-"+t}
+            ?disabled=${this.disabled||e.disabled||this.maxIsReached&&!e.selected}
+          />
+        `:e.selected?a.b`<pkt-icon name="check-big"></pkt-icon>`:a.A}renderEmptyMessage(){return this.options.length>0||this._filteredOptions.length>0||this.userMessage?a.A:a.b`<div class="pkt-listbox__banner pkt-listbox__banner--empty">
+      <pkt-icon
+        class="pkt-listbox__banner-icon"
+        name="exclamation-mark-circle"
+        size="large"
+      ></pkt-icon>
+      Tom liste
+    </div>`}renderList(){return a.b`
+      ${y.c(this._filteredOptions,e=>e.value,(e,t)=>a.b`
+          <li
+            @click=${()=>{this.toggleOption(e)}}
+            aria-selected=${e.selected?"true":"false"}
+            @keydown=${this.handleOptionKeydown}
+            class=${x.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}
+            aria-disabled=${this.disabled||e.disabled||this.maxIsReached&&!e.selected?"true":"false"}
+            role="option"
+            id=${`${this.id}-${t}`}
+          >
+            ${this.renderCheckboxOrCheckIcon(e,t)}
+            <span class="pkt-listbox__option-label" id=${this.id+"-option-label-"+t}>
+              ${e.prefix?a.b`<span class="pkt-listbox__option-prefix">${e.prefix}</span>`:a.A}
+              ${e.label||e.value}
+            </span>
+            ${e.description?a.b`<span class="pkt-listbox__option-description pkt-txt-14-light"
+                  >${e.description}</span
+                >`:a.A}
+          </li>
+        `)}
+    `}renderNewOptionBanner(){return this.allowUserInput&&this.customUserInput?a.b`
+          <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>
+        `:a.A}renderMaximumReachedBanner(){return this._selectedOptions=this.options.filter(e=>e.selected).length,this.isMultiSelect&&this._selectedOptions>0&&this.maxLength>0?a.b`
+          <div class="pkt-listbox__banner pkt-listbox__banner--maximum-reached">
+            ${this._selectedOptions} av maks ${this.maxLength} mulige er valgt.
+          </div>
+        `:a.A}renderUserMessage(){return this.userMessage?a.b`<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>`:a.A}renderSearch(){return this.includeSearch?a.b`
+          <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||a.strings.forms.search.placeholder}
+              @input=${this.handleSearchInput}
+              @keydown=${this.handleSearchKeydown}
+              .value=${this.searchValue}
+              data-type="searchbox"
+              ?disabled=${this.disabled}
+              ?readonly=${this.disabled}
+              role="searchbox"
+            />
+          </div>
+        `:a.A}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":this.focusFirstOrSelectedOption();break;case"Tab":this.tabClose();break}}handleOptionKeydown(e){const t=e.currentTarget,n=t.dataset.value,i=t.dataset.type,c=t.dataset.selected==="true";if(!(!p(this).length&&(!this.customUserInput||!this.allowUserInput&&this.customUserInput)&&i!=="new-option"&&i!=="searchbox"))switch(e.key){case" ":case"Enter":this.toggleOption(t),e.preventDefault();break;case"Backspace":n&&(c?this.toggleOption(t):this.closeOptions()),e.preventDefault();break;case"Escape":this.closeOptions(),e.preventDefault();break;case"Tab":this.tabClose();break;case"ArrowDown":e.altKey?k(this):i==="searchbox"||i==="new-option"?f(this):T(t),e.preventDefault();break;case"ArrowUp":if(e.altKey)f(this);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 U(t,this,this.includeSearch);e.preventDefault();break;case"Home":f(this),e.preventDefault();break;case"End":k(this),e.preventDefault();break;default:(e.metaKey||e.ctrlKey)&&e.key==="a"&&(this.selectAll(),e.preventDefault()),M(e.key)&&(this.handleTypeAhead(e.key),e.preventDefault());break}}focusFirstOrSelectedOption(){A(this,{disabled:this.disabled,allowUserInput:this.allowUserInput,customUserInput:this.customUserInput,includeSearch:this.includeSearch})}toggleOption(e){const t=e instanceof HTMLElement?e.dataset.disabled:e.disabled;if(this.disabled||t)return;const n=e instanceof HTMLElement?e.dataset.value:e.value;this.dispatchEvent(new CustomEvent("option-toggle",{detail:n,bubbles:!1}))}selectAll(){this.dispatchEvent(new CustomEvent("select-all",{bubbles:!1}))}closeOptions(){this.dispatchEvent(new CustomEvent("close-options",{bubbles:!1}))}tabClose(){this.dispatchEvent(new CustomEvent("tab-close",{bubbles:!1}))}filterOptions(){this._filteredOptions=w(this.options,this.searchValue)}handleTypeAhead(e){const t=this.typeahead.append(e),n=p(this),i=E(n,t);i>=0&&d(n[i])}}o([a.n({type:String})],r.prototype,"id");o([a.n({type:String})],r.prototype,"label");o([a.n({type:Array})],r.prototype,"options");o([a.n({type:Boolean,reflect:!0,attribute:"is-open"})],r.prototype,"isOpen");o([a.n({type:Boolean})],r.prototype,"disabled");o([a.n({type:Boolean,attribute:"include-search"})],r.prototype,"includeSearch");o([a.n({type:Boolean,attribute:"is-multi-select"})],r.prototype,"isMultiSelect");o([a.n({type:Boolean,attribute:"allow-user-input"})],r.prototype,"allowUserInput");o([a.n({type:Boolean,attribute:"max-is-reached"})],r.prototype,"maxIsReached");o([a.n({type:String,attribute:"custom-user-input"})],r.prototype,"customUserInput");o([a.n({type:String,attribute:"search-placeholder"})],r.prototype,"searchPlaceholder");o([a.n({type:String,attribute:"search-value"})],r.prototype,"searchValue");o([a.n({type:Number,attribute:"max-length"})],r.prototype,"maxLength");o([a.n({type:String,attribute:"user-message"})],r.prototype,"userMessage");o([m.r()],r.prototype,"_filteredOptions");try{a.t("pkt-listbox")(r)}catch{console.warn("Forsøker å definere <pkt-listbox>, men den er allerede definert")}exports.PktListbox=r;exports.buildFulltext=$;exports.findOptionByValue=_;exports.findOptionIndex=O;exports.findTypeaheadMatches=I;exports.getSearchInfoMessage=C;exports.isMaxSelectionReached=S;

package/dist/loader-D1ugDXGV.cjs

@@ -0,0 +1,16 @@
+"use strict";const d=require("./element-with-slot-ZX-up7jO.cjs"),p=require("./class-map-CsENJXf1.cjs"),t=require("./element-gR_VtSiD.cjs"),h=require("./state-Dg-53wQ8.cjs");require("./icon-q81vqPK_.cjs");var u=Object.defineProperty,s=(n,i,r,c)=>{for(var a=void 0,o=n.length-1,l;o>=0;o--)(l=n[o])&&(a=l(i,r,a)||a);return a&&u(i,r,a),a};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";class e extends d.PktElementWithSlot{constructor(){super(...arguments),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size="medium",this.variant="shapes",this.loadingAnimationPath=window.pktAnimationPath,this._shouldDisplayLoader=!1}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(i){i.has("delay")&&this.setupLoader()}render(){const i=p.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),r=p.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return t.b`<div
+      role="status"
+      aria-live="polite"
+      aria-busy=${this.isLoading?"true":"false"}
+      class=${i}
+    >
+      ${this.isLoading&&this._shouldDisplayLoader?t.b`<div class="pkt-loader__spinner">
+            <pkt-icon
+              name=${this.getVariant(this.variant)}
+              path=${this.loadingAnimationPath}
+              class="pkt-loader__svg pkt-loader__${this.variant}"
+            ></pkt-icon>
+            ${this.message&&t.b`<p>${this.message}</p>`}
+          </div>`:t.A}
+      <div class=${r}>${d.slotContent(this)}</div>
+    </div>`}getVariant(i){switch(i){case"blue":return"spinner-blue";case"rainbow":return"spinner";default:return"loader"}}setupLoader(){this.delay>0&&(this._shouldDisplayLoader=!1,setTimeout(()=>{this._shouldDisplayLoader=!0,this.requestUpdate()},this.delay))}}s([t.n({type:Number})],e.prototype,"delay");s([t.n({type:Boolean})],e.prototype,"inline");s([t.n({type:Boolean})],e.prototype,"isLoading");s([t.n({type:String})],e.prototype,"message");s([t.n({type:String})],e.prototype,"size");s([t.n({type:String})],e.prototype,"variant");s([t.n({type:String})],e.prototype,"loadingAnimationPath");s([h.r()],e.prototype,"_shouldDisplayLoader");try{t.t("pkt-loader")(e)}catch{console.warn("Forsøker å definere <pkt-loader>, men den er allerede definert")}exports.PktLoader=e;