@oslokommune/punkt-elements 12.31.2 → 12.32.0

package/dist/listbox-DX-Euxdm.js

@@ -0,0 +1,360 @@
+import { P as u, x as r, E as p, t as b, n as l, a as f } from "./element-G8JoS0Lj.js";
+import { r as m } from "./state-gfUuUqVg.js";
+import { o as y } from "./if-defined-rCqT8Od1.js";
+import { c as k } from "./repeat-CArTw6-s.js";
+import { e as d } from "./class-map-ChuDQU5C.js";
+import { u as x } from "./stringutils-DJjRa8dG.js";
+var O = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (e, t, s, o) => {
+  for (var n = o > 1 ? void 0 : o ? g(t, s) : t, c = e.length - 1, h; c >= 0; c--)
+    (h = e[c]) && (n = (o ? h(t, s, n) : h(n)) || n);
+  return o && n && O(t, s, n), n;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.id = x(), 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 = [];
+  }
+  // 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);
+  }
+  updated(e) {
+    (e.has("options") || e.has("searchValue")) && this.filterOptions(), super.updated(e);
+  }
+  attributeChangedCallback(e, t, s) {
+    (e === "options" || e === "searchValue" || e === "search-value") && this.filterOptions(), super.attributeChangedCallback(e, t, s);
+  }
+  // Render methods
+  render() {
+    return r`
+      <div
+        class=${d({
+      "pkt-listbox": !0,
+      "pkt-listbox__open": this.isOpen,
+      "pkt-txt-16-light": !0
+    })}
+        role="listbox"
+        aria-label=${y(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 ? r`
+          <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 ? r`<pkt-icon name="check-big"></pkt-icon>` : p;
+  }
+  renderList() {
+    return r`
+      ${k(
+      this._filteredOptions,
+      (e) => e.value,
+      (e, t) => r`
+          <li
+            @click=${() => {
+        this.toggleOption(e);
+      }}
+            aria-selected=${e.selected ? "true" : "false"}
+            @keydown=${this.handleOptionKeydown}
+            class=${d({
+        "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 ? r`<span class="pkt-listbox__option-prefix">${e.prefix}</span>` : p}
+              ${e.label || e.value}
+            </span>
+            ${e.description ? r`<span class="pkt-listbox__option-description pkt-txt-14-light"
+                  >${e.description}</span
+                >` : p}
+          </li>
+        `
+    )}
+    `;
+  }
+  renderNewOptionBanner() {
+    return this.allowUserInput && this.customUserInput ? r`
+          <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>
+        ` : p;
+  }
+  renderMaximumReachedBanner() {
+    return this._selectedOptions = this.options.filter((e) => e.selected).length, this.isMultiSelect && this._selectedOptions > 0 && this.maxLength > 0 ? r`
+          <div class="pkt-listbox__banner pkt-listbox__banner--maximum-reached">
+            ${this._selectedOptions} av maks ${this.maxLength} mulige er valgt.
+          </div>
+        ` : p;
+  }
+  renderUserMessage() {
+    return this.userMessage ? r`<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>` : p;
+  }
+  renderSearch() {
+    return this.includeSearch ? r`
+          <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 || b.forms.search.placeholder}
+              @input=${this.handleSearchInput}
+              @keydown=${this.handleSearchKeydown}
+              .value=${this.searchValue}
+              data-type="searchbox"
+              ?disabled=${this.disabled}
+              ?readonly=${this.disabled}
+              role="searchbox"
+            />
+          </div>
+        ` : p;
+  }
+  // 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":
+      case "Tab":
+        this.focusFirstOrSelectedOption();
+        break;
+    }
+  }
+  handleOptionKeydown(e) {
+    const t = e.currentTarget, s = t.dataset.value, o = t.dataset.type, n = t.dataset.selected === "true";
+    if (!(!this.getOptionElements().length && (!this.customUserInput || !this.allowUserInput && this.customUserInput) && o !== "new-option" && o !== "searchbox"))
+      switch (e.key) {
+        case " ":
+        case "Enter":
+          this.toggleOption(t), e.preventDefault();
+          break;
+        case "Backspace":
+          s && (n ? this.toggleOption(t) : this.closeOptions()), e.preventDefault();
+          break;
+        case "Escape":
+        case "Tab":
+          this.closeOptions();
+          break;
+        case "ArrowDown":
+          e.altKey ? this.focusLastOption() : o === "searchbox" || o === "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 c = this.querySelector('[role="searchbox"]');
+            c && c.focus();
+          } else if (t.dataset.index === "0" && this.customUserInput) {
+            const c = this.querySelector('[data-type="new-option"]');
+            c && c.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;
+      }
+  }
+  // Focus management methods
+  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 s = this.querySelector('[role="searchbox"]');
+      s && this.focusAndScrollIntoView(s);
+    } 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();
+  }
+  // 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 }));
+  }
+  // Filtering and typeahead methods
+  filterOptions() {
+    this.searchValue ? this._filteredOptions = this.options.filter((e) => {
+      var s;
+      return (e.label + e.value).toLowerCase().includes(((s = this.searchValue) == null ? void 0 : s.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 s = this.getOptionElements().find(
+      (o) => {
+        var n;
+        return (n = o.textContent) == null ? void 0 : n.trim().toLowerCase().startsWith(this.typeAheadString);
+      }
+    );
+    s && this.focusAndScrollIntoView(s);
+  }
+  // DOM helper methods
+  getOptionElements() {
+    return this._filteredOptions.length ? Array.from(
+      this.querySelectorAll('[role="option"]:not([data-disabled])') || []
+    ) : [];
+  }
+};
+a([
+  l({ type: String })
+], i.prototype, "id", 2);
+a([
+  l({ type: String })
+], i.prototype, "label", 2);
+a([
+  l({ type: Array })
+], i.prototype, "options", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "isOpen", 2);
+a([
+  l({ type: Boolean })
+], i.prototype, "disabled", 2);
+a([
+  l({ type: Boolean })
+], i.prototype, "includeSearch", 2);
+a([
+  l({ type: Boolean })
+], i.prototype, "isMultiSelect", 2);
+a([
+  l({ type: Boolean })
+], i.prototype, "allowUserInput", 2);
+a([
+  l({ type: Boolean })
+], i.prototype, "maxIsReached", 2);
+a([
+  l({ type: String })
+], i.prototype, "customUserInput", 2);
+a([
+  l({ type: String })
+], i.prototype, "searchPlaceholder", 2);
+a([
+  l({ type: String })
+], i.prototype, "searchValue", 2);
+a([
+  l({ type: Number })
+], i.prototype, "maxLength", 2);
+a([
+  l({ type: String })
+], i.prototype, "userMessage", 2);
+a([
+  m()
+], i.prototype, "_filteredOptions", 2);
+i = a([
+  f("pkt-listbox")
+], i);
+export {
+  i as P
+};

package/dist/listbox.d.ts

@@ -0,0 +1,47 @@
+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;
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
+declare global {
+    interface Window {
+        pktTz: string;
+    }
+}

package/dist/{loader-B1edLWTg.js → loader-BudoV0yd.js}

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

package/dist/{loader-DI74pe25.cjs → loader-Csq0Yd1k.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("./element-CzFXQBoS.cjs"),d=require("./class-map-Dj5mbCUg.cjs"),u=require("./state-HNj0_316.cjs"),p=require("./ref-2anvRHT4.cjs"),h=require("./pkt-slot-controller-Oc32unDk.cjs");require("./icon-BOKusjAA.cjs");var c=Object.defineProperty,y=Object.getOwnPropertyDescriptor,s=(o,t,r,i)=>{for(var a=i>1?void 0:i?y(t,r):t,l=o.length-1,n;l>=0;l--)(n=o[l])&&(a=(i?n(t,r,a):n(a))||a);return i&&a&&c(t,r,a),a};exports.PktLoader=class extends e.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size="medium",this.variant="shapes",this._shouldDisplayLoader=!1,this.slotController=new h.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(t){t.has("delay")&&this.setupLoader()}render(){const t=d.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),r=d.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return e.x`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${t}>
+"use strict";const e=require("./element-BBo3JZk5.cjs"),d=require("./class-map-D4rXyUxT.cjs"),u=require("./state-BILlRnrD.cjs"),p=require("./ref-DsoUUoPU.cjs"),h=require("./pkt-slot-controller-CqNvEpFd.cjs");require("./icon-BTUCDPN5.cjs");var c=Object.defineProperty,y=Object.getOwnPropertyDescriptor,s=(o,t,r,i)=>{for(var a=i>1?void 0:i?y(t,r):t,l=o.length-1,n;l>=0;l--)(n=o[l])&&(a=(i?n(t,r,a):n(a))||a);return i&&a&&c(t,r,a),a};exports.PktLoader=class extends e.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.delay=0,this.inline=!1,this.isLoading=!0,this.message=null,this.size="medium",this.variant="shapes",this._shouldDisplayLoader=!1,this.slotController=new h.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this._shouldDisplayLoader=this.delay===0,this.delay>0&&this.setupLoader()}updated(t){t.has("delay")&&this.setupLoader()}render(){const t=d.e({"pkt-loader":!0,[`pkt-loader--${this.inline?"inline":"box"}`]:!0,[`pkt-loader--${this.size}`]:!0}),r=d.e({"pkt-contents":!0,"pkt-hide":this.isLoading});return e.x`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${t}>
       ${this.isLoading&&this._shouldDisplayLoader?e.x`<div class="pkt-loader__spinner">
             <pkt-icon
               name=${this.getVariant(this.variant)}

package/dist/loader.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/{messagebox-DQpEMkS2.cjs → messagebox-8GwnNqb0.cjs}

@@ -1,4 +1,4 @@
-"use strict";const s=require("./element-CzFXQBoS.cjs"),b=require("./pkt-slot-controller-Oc32unDk.cjs"),c=require("./ref-2anvRHT4.cjs"),d=require("./class-map-Dj5mbCUg.cjs"),k=require("./state-HNj0_316.cjs");require("./icon-BOKusjAA.cjs");const u=require("./classutils-BwNK82ZQ.cjs"),m="pkt-messagebox",g=!0,h={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},f={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},x={default:{description:"Innholdet i meldingsboksen"}},p={name:m,"css-class":"pkt-messagebox",isElement:g,events:h,props:f,slots:x};var v=Object.defineProperty,_=Object.getOwnPropertyDescriptor,o=(i,e,n,l)=>{for(var t=l>1?void 0:l?_(e,n):e,a=i.length-1,r;a>=0;a--)(r=i[a])&&(t=(l?r(e,n,t):r(t))||t);return l&&t&&v(e,n,t),t};exports.PktMessagebox=class extends s.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closable=p.props.closable.default,this.compact=p.props.compact.default,this.title="",this.skin=p.props.skin.default,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0}))},this.slotController=new b.PktSlotController(this,this.defaultSlot),this._isClosed=!1}updated(e){super.updated(e),e.has("_isClosed")&&u.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const e={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return s.x`<div class=${d.e(e)}>
+"use strict";const s=require("./element-BBo3JZk5.cjs"),b=require("./pkt-slot-controller-CqNvEpFd.cjs"),c=require("./ref-DsoUUoPU.cjs"),d=require("./class-map-D4rXyUxT.cjs"),k=require("./state-BILlRnrD.cjs");require("./icon-BTUCDPN5.cjs");const u=require("./classutils-BwNK82ZQ.cjs"),m="pkt-messagebox",g=!0,h={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},f={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},x={default:{description:"Innholdet i meldingsboksen"}},p={name:m,"css-class":"pkt-messagebox",isElement:g,events:h,props:f,slots:x};var v=Object.defineProperty,_=Object.getOwnPropertyDescriptor,o=(i,e,n,l)=>{for(var t=l>1?void 0:l?_(e,n):e,a=i.length-1,r;a>=0;a--)(r=i[a])&&(t=(l?r(e,n,t):r(t))||t);return l&&t&&v(e,n,t),t};exports.PktMessagebox=class extends s.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closable=p.props.closable.default,this.compact=p.props.compact.default,this.title="",this.skin=p.props.skin.default,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0}))},this.slotController=new b.PktSlotController(this,this.defaultSlot),this._isClosed=!1}updated(e){super.updated(e),e.has("_isClosed")&&u.updateClassAttribute(this,"pkt-hide",this._isClosed)}render(){const e={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return s.x`<div class=${d.e(e)}>
       ${this.closable?s.x`<div class="pkt-messagebox__close">
             <button
               @click=${this.close}

package/dist/{messagebox-KP-8-tA9.js → messagebox-D6uexEhg.js}

@@ -1,9 +1,9 @@
-import { P as b, x as c, E as m, n, a as u } from "./element-C7XjZtLU.js";
-import { P as k } from "./pkt-slot-controller-Clbye6cM.js";
-import { e as h, n as f } from "./ref-DbOSDQbk.js";
-import { e as g } from "./class-map-DWtqmIRS.js";
-import { r as v } from "./state-CDQk0DFQ.js";
-import "./icon-BEUgV9Wo.js";
+import { P as b, x as c, E as m, n, a as u } from "./element-G8JoS0Lj.js";
+import { P as k } from "./pkt-slot-controller-D1DakVrU.js";
+import { e as h, n as f } from "./ref-cRTOoM4R.js";
+import { e as g } from "./class-map-ChuDQU5C.js";
+import { r as v } from "./state-gfUuUqVg.js";
+import "./icon-BJnwW0eh.js";
 import { u as _ } from "./classutils-RQs1k6D9.js";
 const x = "pkt-messagebox", y = !0, C = {
   onClose: {

package/dist/messagebox.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/{modal-ytIJwfr3.cjs → modal-CLixB4Dz.cjs}

@@ -1,4 +1,4 @@
-"use strict";const d=require("./class-map-Dj5mbCUg.cjs"),s=require("./element-CzFXQBoS.cjs"),k=require("./state-HNj0_316.cjs"),m=require("./pkt-slot-controller-Oc32unDk.cjs"),r=require("./ref-2anvRHT4.cjs");require("./icon-BOKusjAA.cjs");const h="pkt-modal",g=!0,f={"background-click":{description:"Event som trigges når bakgrunnen trykkes på"},close:{description:"Event som trigges når meldingsboksen lukkes"}},v={headingText:{name:"Heading text",description:"Heading tekst på modalen",type:"string"},hideCloseButton:{name:"Gjem 'Lukk'-knapp",description:"Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.",type:"boolean",default:!1},closeOnBackdropClick:{name:"Lukk modalen når bakgrunnen trykkes på",description:"Lukk modalen når bakgrunnen trykkes på",type:"boolean",default:!1},closeButtonSkin:{name:"Stil på lukkeknappen",description:"Stil på lukkeknappen",type:["blue","yellow-filled"],default:"blue"},size:{name:"Størrelse",description:"Størrelsen på modalen",type:["small","medium","large"],default:"medium"}},b={default:{description:"Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen."}},u={name:h,"css-class":"pkt-modal",isElements:g,events:f,props:v,slots:b};var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(c,e,t,n)=>{for(var o=n>1?void 0:n?_(e,t):e,i=c.length-1,a;i>=0;i--)(a=c[i])&&(o=(n?a(e,t,o):a(o))||o);return n&&o&&y(e,t,o),o};exports.PktModal=class extends s.PktElement{constructor(){super(),this.headingText="",this.removePadding=!1,this.hideCloseButton=u.props.hideCloseButton.default,this.closeOnBackdropClick=u.props.closeOnBackdropClick.default,this.closeButtonSkin="blue",this.size=u.props.size.default,this.defaultSlot=r.e(),this.dialogRef=r.e(),this._isOpen=!1,this.close=(e,t=!1)=>{var o;if(!this._isOpen)return;this._isOpen=!1,document.body.classList.remove("pkt-modal--open");const n=document.activeElement;n&&!this.isElementInViewport(n)&&n.scrollIntoView({behavior:"smooth",block:"nearest"}),this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),t||(o=this.dialogRef.value)==null||o.close(),this.requestUpdate()},this.showModal=e=>{var n;this._isOpen=!0,(n=this.dialogRef.value)==null||n.showModal();const t=document.querySelector(".pkt-modal");requestAnimationFrame(()=>{var o;this.dialogRef.value&&((o=this.dialogRef.value)==null||o.focus())}),t&&document.body.classList.add("pkt-modal--open"),this.dispatchEvent(new CustomEvent("showModal",{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this.slotController=new m.PktSlotController(this,this.defaultSlot),this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleBackdropClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("click",this.handleBackdropClick)}handleKeyDown(e){e.key==="Escape"&&this.close(e)}handleBackdropClick(e){var t;this.closeOnBackdropClick&&e.target===((t=this.dialogRef)==null?void 0:t.value)&&this.close(e)}isElementInViewport(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){const e={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===""||this.headingText===void 0,[`pkt-modal--${this.size}`]:this.size!==void 0},t={"pkt-modal__headingText":!0,"pkt-txt-24":!0},n={"pkt-modal__content":!0,"pkt-txt-18-light":!0},o=this.closeButtonSkin==="blue",i={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0},a={"pkt-btn":!0,[`pkt-btn--${o?"tertiary":"primary"}`]:!0,"pkt-btn--icon-only":!0,"pkt-btn--medium":!0};return s.x`
+"use strict";const d=require("./class-map-D4rXyUxT.cjs"),s=require("./element-BBo3JZk5.cjs"),k=require("./state-BILlRnrD.cjs"),m=require("./pkt-slot-controller-CqNvEpFd.cjs"),r=require("./ref-DsoUUoPU.cjs");require("./icon-BTUCDPN5.cjs");const h="pkt-modal",g=!0,f={"background-click":{description:"Event som trigges når bakgrunnen trykkes på"},close:{description:"Event som trigges når meldingsboksen lukkes"}},v={headingText:{name:"Heading text",description:"Heading tekst på modalen",type:"string"},hideCloseButton:{name:"Gjem 'Lukk'-knapp",description:"Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.",type:"boolean",default:!1},closeOnBackdropClick:{name:"Lukk modalen når bakgrunnen trykkes på",description:"Lukk modalen når bakgrunnen trykkes på",type:"boolean",default:!1},closeButtonSkin:{name:"Stil på lukkeknappen",description:"Stil på lukkeknappen",type:["blue","yellow-filled"],default:"blue"},size:{name:"Størrelse",description:"Størrelsen på modalen",type:["small","medium","large"],default:"medium"}},b={default:{description:"Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen."}},u={name:h,"css-class":"pkt-modal",isElements:g,events:f,props:v,slots:b};var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(c,e,t,n)=>{for(var o=n>1?void 0:n?_(e,t):e,i=c.length-1,a;i>=0;i--)(a=c[i])&&(o=(n?a(e,t,o):a(o))||o);return n&&o&&y(e,t,o),o};exports.PktModal=class extends s.PktElement{constructor(){super(),this.headingText="",this.removePadding=!1,this.hideCloseButton=u.props.hideCloseButton.default,this.closeOnBackdropClick=u.props.closeOnBackdropClick.default,this.closeButtonSkin="blue",this.size=u.props.size.default,this.defaultSlot=r.e(),this.dialogRef=r.e(),this._isOpen=!1,this.close=(e,t=!1)=>{var o;if(!this._isOpen)return;this._isOpen=!1,document.body.classList.remove("pkt-modal--open");const n=document.activeElement;n&&!this.isElementInViewport(n)&&n.scrollIntoView({behavior:"smooth",block:"nearest"}),this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),t||(o=this.dialogRef.value)==null||o.close(),this.requestUpdate()},this.showModal=e=>{var n;this._isOpen=!0,(n=this.dialogRef.value)==null||n.showModal();const t=document.querySelector(".pkt-modal");requestAnimationFrame(()=>{var o;this.dialogRef.value&&((o=this.dialogRef.value)==null||o.focus())}),t&&document.body.classList.add("pkt-modal--open"),this.dispatchEvent(new CustomEvent("showModal",{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this.slotController=new m.PktSlotController(this,this.defaultSlot),this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleBackdropClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("click",this.handleBackdropClick)}handleKeyDown(e){e.key==="Escape"&&this.close(e)}handleBackdropClick(e){var t;this.closeOnBackdropClick&&e.target===((t=this.dialogRef)==null?void 0:t.value)&&this.close(e)}isElementInViewport(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){const e={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===""||this.headingText===void 0,[`pkt-modal--${this.size}`]:this.size!==void 0},t={"pkt-modal__headingText":!0,"pkt-txt-24":!0},n={"pkt-modal__content":!0,"pkt-txt-18-light":!0},o=this.closeButtonSkin==="blue",i={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0},a={"pkt-btn":!0,[`pkt-btn--${o?"tertiary":"primary"}`]:!0,"pkt-btn--icon-only":!0,"pkt-btn--medium":!0};return s.x`
       <dialog
         class=${d.e(e)}
         ${r.n(this.dialogRef)}

package/dist/{modal-kPX8nO_L.js → modal-DnYn2Rlg.js}

@@ -1,9 +1,9 @@
-import { e as c } from "./class-map-DWtqmIRS.js";
-import { P as f, x as p, E as k, n as r, a as g } from "./element-C7XjZtLU.js";
-import { r as v } from "./state-CDQk0DFQ.js";
-import { P as b } from "./pkt-slot-controller-Clbye6cM.js";
-import { e as m, n as h } from "./ref-DbOSDQbk.js";
-import "./icon-BEUgV9Wo.js";
+import { e as c } from "./class-map-ChuDQU5C.js";
+import { P as f, x as p, E as k, n as r, a as g } from "./element-G8JoS0Lj.js";
+import { r as v } from "./state-gfUuUqVg.js";
+import { P as b } from "./pkt-slot-controller-D1DakVrU.js";
+import { e as m, n as h } from "./ref-cRTOoM4R.js";
+import "./icon-BJnwW0eh.js";
 const y = "pkt-modal", _ = !0, C = {
   "background-click": {
     description: "Event som trigges når bakgrunnen trykkes på"

package/dist/modal.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/pkt-alert.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-BDxxRqgi.cjs"),t=e.PktAlert;Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-D5G5UJuo.cjs"),t=e.PktAlert;Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});exports.default=t;

package/dist/pkt-alert.js

@@ -1,4 +1,4 @@
-import { P as t } from "./alert-D0S57u0r.js";
+import { P as t } from "./alert-gERpVuB7.js";
 const e = t;
 export {
   t as PktAlert,

package/dist/pkt-backlink.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./backlink-Dn4DfWVR.cjs"),t=e.PktBackLink;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>e.PktBackLink});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./backlink-Q2HTG9jm.cjs"),t=e.PktBackLink;Object.defineProperty(exports,"PktBackLink",{enumerable:!0,get:()=>e.PktBackLink});exports.default=t;

package/dist/pkt-backlink.js

@@ -1,4 +1,4 @@
-import { P as k } from "./backlink-CzpB-ih9.js";
+import { P as k } from "./backlink-DdNgqA56.js";
 const t = k;
 export {
   k as PktBackLink,