@oslokommune/punkt-elements 15.4.5 → 16.0.2

package/dist/listbox-Cykec1bj.js

@@ -1,361 +0,0 @@
-import { P as b, b as r, A as p, s as f, n as a, t as m } from "./element-CV9utnHJ.js";
-import { r as y } from "./state-l4hGZdFJ.js";
-import { o as u } from "./if-defined-rXcLNTzN.js";
-import { c as k } from "./repeat-DnlRNf63.js";
-import { e as d } from "./class-map-3ADKve8g.js";
-import { u as x } from "./utils-DznhwRXm.js";
-var O = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (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 b {
-  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-multiselectable=${u(this.isMultiSelect ? "true" : void 0)}
-        aria-label=${u(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 || f.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.fulltext || e.label + e.value + (e.prefix || "")).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])') || []
-    ) : [];
-  }
-};
-l([
-  a({ type: String })
-], i.prototype, "id", 2);
-l([
-  a({ type: String })
-], i.prototype, "label", 2);
-l([
-  a({ type: Array })
-], i.prototype, "options", 2);
-l([
-  a({ type: Boolean, reflect: !0 })
-], i.prototype, "isOpen", 2);
-l([
-  a({ type: Boolean })
-], i.prototype, "disabled", 2);
-l([
-  a({ type: Boolean })
-], i.prototype, "includeSearch", 2);
-l([
-  a({ type: Boolean })
-], i.prototype, "isMultiSelect", 2);
-l([
-  a({ type: Boolean })
-], i.prototype, "allowUserInput", 2);
-l([
-  a({ type: Boolean })
-], i.prototype, "maxIsReached", 2);
-l([
-  a({ type: String })
-], i.prototype, "customUserInput", 2);
-l([
-  a({ type: String })
-], i.prototype, "searchPlaceholder", 2);
-l([
-  a({ type: String })
-], i.prototype, "searchValue", 2);
-l([
-  a({ type: Number })
-], i.prototype, "maxLength", 2);
-l([
-  a({ type: String })
-], i.prototype, "userMessage", 2);
-l([
-  y()
-], i.prototype, "_filteredOptions", 2);
-i = l([
-  m("pkt-listbox")
-], i);
-export {
-  i as P
-};

package/dist/pkt-options-controller-BnTmkl3g.cjs

@@ -1 +0,0 @@
-"use strict";const r=require("./pkt-slot-controller-D4nKlom5.cjs");class a{constructor(t){this.nodes=[],this.options=[],this.host=t,this.host.addController(this),this.nodes=[],this.options=[],this.observer=new MutationObserver(e=>this.handleMutations(e))}hostConnected(){Array.from(this.host.childNodes).forEach(t=>{(t.nodeName==="OPTION"||t.nodeName==="DATA")&&this.addNode(t)}),this.createOptions(),this.observer.observe(this.host,{childList:!0,subtree:!1,attributes:!0})}hostDisconnected(){this.observer.disconnect()}addNode(t){(t.nodeName==="OPTION"||t.nodeName==="DATA")&&(t.hasAttribute("hidden")&&!t.hasAttribute("data-skip")&&t.setAttribute("data-hidden","true"),!t.hasAttribute("hidden")&&t.hasAttribute("data-skip")&&t.hasAttribute("data-hidden")&&t.removeAttribute("data-hidden"),t.setAttribute("class","pkt-hide"),t.setAttribute("data-skip","true"),t.setAttribute("hidden","true"),this.nodes.push(t))}createOptions(){this.options=this.nodes.map(t=>({value:t.hasAttribute("value")?t.getAttribute("value")??"":t.textContent??"",label:t.textContent||t.getAttribute("value")||"",selected:t.hasAttribute("selected"),disabled:t.hasAttribute("disabled"),hidden:t.hasAttribute("data-hidden")})),this.host.requestUpdate()}handleMutations(t){let e=!1;t.forEach(s=>{s.type==="childList"&&(s.addedNodes.forEach(i=>{r.isOptionElement(i)&&(this.addNode(i),e=!0)}),s.removedNodes.forEach(i=>{r.isOptionElement(i)&&(this.nodes=this.nodes.filter(h=>h!==i),e=!0)})),s.type==="attributes"&&r.isOptionElement(s.target)&&(this.addNode(s.target),e=!0)}),e&&this.createOptions()}}exports.PktOptionsSlotController=a;

package/dist/tag-BnT5onW2.cjs

@@ -1,26 +0,0 @@
-"use strict";const h=require("./class-map-Bokp1SoS.cjs"),t=require("./element-CMTfByxQ.cjs"),k=require("./state-BNgpvY-A.cjs"),g=require("./pkt-slot-controller-D4nKlom5.cjs"),c=require("./ref-CxLwrCxt.cjs");require("./icon-Dj0oZZSa.cjs");const u=require("./if-defined-hKKmbsI8.cjs"),d={size:{default:"medium"},skin:{default:"blue"},closeTag:{default:!1},type:{default:"button"}},r={props:d};var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(n,e,a,o)=>{for(var s=o>1?void 0:o?y(e,a):e,l=n.length-1,p;l>=0;l--)(p=n[l])&&(s=(o?p(e,a,s):p(s))||s);return o&&s&&f(e,a,s),s};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closeTag=r.props.closeTag.default,this.size=r.props.size.default,this.skin=r.props.skin.default,this.textStyle=null,this.iconName=void 0,this.type=r.props.type.default,this.ariaLabel=null,this._isClosed=!1,this._ariaDescription=null,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!1,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!1,composed:!0}))},this.slotController=new g.PktSlotController(this,this.defaultSlot),this._isClosed=!1}firstUpdated(e){var a,o;if(super.firstUpdated(e),this.closeTag&&!this.ariaLabel){const s=(o=(a=this.defaultSlot.value)==null?void 0:a.textContent)==null?void 0:o.trim();s&&(this._ariaDescription=`Klikk for å fjerne ${s}`)}}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},a={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?t.b`
-        <button
-          class=${h.e(a)}
-          type=${this.type}
-          @click=${this.close}
-          aria-label=${u.o(this.ariaLabel||void 0)}
-          aria-description=${u.o(this._ariaDescription||void 0)}
-        >
-          ${this.iconName&&t.b`<pkt-icon
-            class="pkt-tag__icon"
-            name=${this.iconName}
-            aria-hidden="true"
-          ></pkt-icon>`}
-          <span ${c.n(this.defaultSlot)}></span>
-          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
-        </button>
-      `:t.b`
-        <span class=${h.e(e)}>
-          ${this.iconName&&t.b`<pkt-icon
-            class="pkt-tag__icon"
-            name=${this.iconName}
-            aria-hidden="true"
-          ></pkt-icon>`}
-          <span ${c.n(this.defaultSlot)}></span>
-        </span>
-      `}};i([t.n({type:Boolean,reflect:!0})],exports.PktTag.prototype,"closeTag",2);i([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"size",2);i([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"skin",2);i([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"textStyle",2);i([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"iconName",2);i([t.n({type:String})],exports.PktTag.prototype,"type",2);i([t.n({type:String})],exports.PktTag.prototype,"ariaLabel",2);i([k.r()],exports.PktTag.prototype,"_isClosed",2);i([k.r()],exports.PktTag.prototype,"_ariaDescription",2);exports.PktTag=i([t.t("pkt-tag")],exports.PktTag);