@oslokommune/punkt-elements 16.7.1 → 16.7.4

package/dist/listbox-BQKDZvZn.js

@@ -1,438 +0,0 @@
-import { P as v, b as d, A as h, s as _, n as o, t as O } 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 { 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));
-    }
-  ) || null;
-  return { filtered: i, suggestion: a };
-}, W = (e, t, s, i) => {
-  if (!e.trim())
-    return { addValueText: null, userInfoMessage: "" };
-  const a = e.trim().toLowerCase(), l = t.find((p) => p.toLowerCase() === a), c = s.filter(
-    (p) => {
-      var b;
-      return ((b = p.label) == null ? void 0 : b.toLowerCase().includes(a)) || p.value.toLowerCase().includes(a);
-    }
-  ), y = c.find(
-    (p) => {
-      var b;
-      return ((b = p.label) == null ? void 0 : b.toLowerCase()) === a || p.value.toLowerCase() === a;
-    }
-  );
-  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);
-  });
-}, 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;
-  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);
-      return;
-    }
-  }
-  const i = s.find((a) => a.dataset.selected === "true");
-  if (i) {
-    u(i);
-    return;
-  }
-  if (t.includeSearch && !(document.activeElement instanceof HTMLInputElement)) {
-    const a = e.querySelector('[role="searchbox"]');
-    if (a) {
-      window.setTimeout(() => a.focus(), 0);
-      return;
-    }
-  }
-  s[0] && u(s[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;
-};
-let n = class extends v {
-  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 = [];
-  }
-  // Lifecycle methods
-  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, s) {
-    (e === "options" || e === "search-value") && this.filterOptions(), super.attributeChangedCallback(e, t, s);
-  }
-  // Render methods
-  get _hasOptions() {
-    return this._filteredOptions.length > 0 || this.options.length > 0;
-  }
-  render() {
-    return d`
-      <div
-        class=${g({
-      "pkt-listbox": !0,
-      "pkt-listbox__open": this.isOpen,
-      "pkt-txt-16-light": !0
-    })}
-        role=${m(this._hasOptions ? "listbox" : void 0)}
-        aria-multiselectable=${m(
-      this._hasOptions && this.isMultiSelect ? "true" : void 0
-    )}
-        aria-label=${m(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 ? d`
-          <input
-            class="pkt-input-check__input-checkbox"
-            type="checkbox"
-            role="presentation"
-            tabindex="-1"
-            value=${e.value}
-            @change=${(s) => {
-      s.stopPropagation();
-    }}
-            .checked=${e.selected}
-            aria-labelledby=${this.id + "-option-label-" + t}
-            ?disabled=${this.disabled || e.disabled || this.maxIsReached && !e.selected}
-          />
-        ` : e.selected ? d`<pkt-icon name="check-big"></pkt-icon>` : h;
-  }
-  renderEmptyMessage() {
-    return this.options.length > 0 || this._filteredOptions.length > 0 || this.userMessage ? h : d`<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 d`
-      ${$(
-      this._filteredOptions,
-      (e) => e.value,
-      (e, t) => d`
-          <li
-            @click=${() => {
-        this.toggleOption(e);
-      }}
-            aria-selected=${e.selected ? "true" : "false"}
-            @keydown=${this.handleOptionKeydown}
-            class=${g({
-        "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 ? d`<span class="pkt-listbox__option-prefix">${e.prefix}</span>` : h}
-              ${e.label || e.value}
-            </span>
-            ${e.description ? d`<span class="pkt-listbox__option-description pkt-txt-14-light"
-                  >${e.description}</span
-                >` : h}
-          </li>
-        `
-    )}
-    `;
-  }
-  renderNewOptionBanner() {
-    return this.allowUserInput && this.customUserInput ? d`
-          <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>
-        ` : h;
-  }
-  renderMaximumReachedBanner() {
-    return this._selectedOptions = this.options.filter((e) => e.selected).length, this.isMultiSelect && this._selectedOptions > 0 && this.maxLength > 0 ? d`
-          <div class="pkt-listbox__banner pkt-listbox__banner--maximum-reached">
-            ${this._selectedOptions} av maks ${this.maxLength} mulige er valgt.
-          </div>
-        ` : h;
-  }
-  renderUserMessage() {
-    return this.userMessage ? d`<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>` : h;
-  }
-  renderSearch() {
-    return this.includeSearch ? d`
-          <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 || _.forms.search.placeholder}
-              @input=${this.handleSearchInput}
-              @keydown=${this.handleSearchKeydown}
-              .value=${this.searchValue}
-              data-type="searchbox"
-              ?disabled=${this.disabled}
-              ?readonly=${this.disabled}
-              role="searchbox"
-            />
-          </div>
-        ` : h;
-  }
-  // Event handlers
-  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, s = t.dataset.value, i = t.dataset.type, a = t.dataset.selected === "true";
-    if (!(!f(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":
-          s && (a ? 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" ? x(this) : E(t), e.preventDefault();
-          break;
-        case "ArrowUp":
-          if (e.altKey)
-            x(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
-            T(t, this, this.includeSearch);
-          e.preventDefault();
-          break;
-        case "Home":
-          x(this), e.preventDefault();
-          break;
-        case "End":
-          k(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());
-          break;
-      }
-  }
-  // Focus management methods (delegates to shared utils)
-  focusFirstOrSelectedOption() {
-    U(this, {
-      disabled: this.disabled,
-      allowUserInput: this.allowUserInput,
-      customUserInput: this.customUserInput,
-      includeSearch: this.includeSearch
-    });
-  }
-  // Event dispatching methods
-  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;
-    this.dispatchEvent(
-      new CustomEvent("option-toggle", {
-        detail: s,
-        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 }));
-  }
-  // Filtering and typeahead methods
-  filterOptions() {
-    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]);
-  }
-};
-r([
-  o({ type: String })
-], n.prototype, "id", 2);
-r([
-  o({ type: String })
-], n.prototype, "label", 2);
-r([
-  o({ type: Array })
-], n.prototype, "options", 2);
-r([
-  o({ type: Boolean, reflect: !0, attribute: "is-open" })
-], n.prototype, "isOpen", 2);
-r([
-  o({ type: Boolean })
-], n.prototype, "disabled", 2);
-r([
-  o({ type: Boolean, attribute: "include-search" })
-], n.prototype, "includeSearch", 2);
-r([
-  o({ type: Boolean, attribute: "is-multi-select" })
-], n.prototype, "isMultiSelect", 2);
-r([
-  o({ type: Boolean, attribute: "allow-user-input" })
-], n.prototype, "allowUserInput", 2);
-r([
-  o({ type: Boolean, attribute: "max-is-reached" })
-], n.prototype, "maxIsReached", 2);
-r([
-  o({ type: String, attribute: "custom-user-input" })
-], n.prototype, "customUserInput", 2);
-r([
-  o({ type: String, attribute: "search-placeholder" })
-], n.prototype, "searchPlaceholder", 2);
-r([
-  o({ type: String, attribute: "search-value" })
-], n.prototype, "searchValue", 2);
-r([
-  o({ type: Number, attribute: "max-length" })
-], n.prototype, "maxLength", 2);
-r([
-  o({ type: String, attribute: "user-message" })
-], n.prototype, "userMessage", 2);
-r([
-  w()
-], n.prototype, "_filteredOptions", 2);
-n = r([
-  O("pkt-listbox")
-], n);
-export {
-  n as P,
-  j as a,
-  z as b,
-  H as c,
-  F as f,
-  W as g,
-  N as i
-};

package/dist/listbox-CGgV9MAe.cjs

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

package/dist/loader-Ci3CHU8k.js

@@ -1,93 +0,0 @@
-import { P as u, s as m } from "./element-with-slot-Dqk6-TRR.js";
-import { e as h } from "./class-map-CEnykyO_.js";
-import { A as y, b as d, n as a, t as c } from "./element-CPpT3rFQ.js";
-import { r as g } from "./state-C_1EOo3D.js";
-import "./icon-BlKA8YuW.js";
-var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (s, o, n, r) => {
-  for (var i = r > 1 ? void 0 : r ? _(o, n) : o, p = s.length - 1, l; p >= 0; p--)
-    (l = s[p]) && (i = (r ? l(o, n, i) : l(i)) || i);
-  return r && i && v(o, n, i), i;
-};
-window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
-let t = class extends u {
-  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(s) {
-    s.has("delay") && this.setupLoader();
-  }
-  render() {
-    const s = h({
-      "pkt-loader": !0,
-      [`pkt-loader--${this.inline ? "inline" : "box"}`]: !0,
-      [`pkt-loader--${this.size}`]: !0
-    }), o = h({
-      "pkt-contents": !0,
-      "pkt-hide": this.isLoading
-    });
-    return d`<div
-      role="status"
-      aria-live="polite"
-      aria-busy=${this.isLoading ? "true" : "false"}
-      class=${s}
-    >
-      ${this.isLoading && this._shouldDisplayLoader ? d`<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 && d`<p>${this.message}</p>`}
-          </div>` : y}
-      <div class=${o}>${m(this)}</div>
-    </div>`;
-  }
-  getVariant(s) {
-    switch (s) {
-      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));
-  }
-};
-e([
-  a({ type: Number })
-], t.prototype, "delay", 2);
-e([
-  a({ type: Boolean })
-], t.prototype, "inline", 2);
-e([
-  a({ type: Boolean })
-], t.prototype, "isLoading", 2);
-e([
-  a({ type: String })
-], t.prototype, "message", 2);
-e([
-  a({ type: String })
-], t.prototype, "size", 2);
-e([
-  a({ type: String })
-], t.prototype, "variant", 2);
-e([
-  a({ type: String })
-], t.prototype, "loadingAnimationPath", 2);
-e([
-  g()
-], t.prototype, "_shouldDisplayLoader", 2);
-t = e([
-  c("pkt-loader")
-], t);
-export {
-  t as P
-};

package/dist/loader-e2gs_1xz.cjs

@@ -1,16 +0,0 @@
-"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-Bqj9oBbl.cjs");var u=Object.defineProperty,c=Object.getOwnPropertyDescriptor,s=(r,e,a,o)=>{for(var i=o>1?void 0:o?c(e,a):e,n=r.length-1,l;n>=0;n--)(l=r[n])&&(i=(o?l(e,a,i):l(i))||i);return o&&i&&u(e,a,i),i};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktLoader=class 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(e){e.has("delay")&&this.setupLoader()}render(){const e=p.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),a=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=${e}
-    >
-      ${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=${a}>${d.slotContent(this)}</div>
-    </div>`}getVariant(e){switch(e){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})],exports.PktLoader.prototype,"delay",2);s([t.n({type:Boolean})],exports.PktLoader.prototype,"inline",2);s([t.n({type:Boolean})],exports.PktLoader.prototype,"isLoading",2);s([t.n({type:String})],exports.PktLoader.prototype,"message",2);s([t.n({type:String})],exports.PktLoader.prototype,"size",2);s([t.n({type:String})],exports.PktLoader.prototype,"variant",2);s([t.n({type:String})],exports.PktLoader.prototype,"loadingAnimationPath",2);s([h.r()],exports.PktLoader.prototype,"_shouldDisplayLoader",2);exports.PktLoader=s([t.t("pkt-loader")],exports.PktLoader);