@oslokommune/punkt-elements/dist/searchinput-CIseS5tL.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { c as e, d as t, l as n, r, s as i, t as a } from "./element-cZ85T_aa.js";
import { t as o } from "./class-map-C8HuhNzZ.js";
import "./icon-Co72KtgF.js";
import { t as s } from "./if-defined-Cjj8qN-Z.js";
import { t as c } from "./focus-modality-controller-pzSZkDkH.js";
//#region src/components/searchinput/searchinput.ts
var l = class extends a {
	constructor(...e) {
		super(...e), this.appearance = "local", this.disabled = !1, this.fullwidth = !1, this.id = "", this.placeholder = "Søk…", this.value = "", this.focusModality = new c(this, ".pkt-searchinput");
	}
	get suggestionsId() {
		return `${this.id}-suggestions`;
	}
	dispatchSearch() {
		this.dispatchEvent(new CustomEvent("pkt-search", {
			detail: { value: this.value },
			bubbles: !0,
			composed: !0
		}));
	}
	onInput(e) {
		this.value = e.target.value;
	}
	onInputKeydown(e) {
		e.key === "Enter" && (e.preventDefault(), this.dispatchSearch());
	}
	onSearchClick(e) {
		e.preventDefault(), this.dispatchSearch();
	}
	onSuggestionClick(e, t, n) {
		let r = new CustomEvent("pkt-suggestion-click", {
			detail: {
				index: n,
				suggestion: t
			},
			bubbles: !0,
			composed: !0,
			cancelable: !0
		});
		this.dispatchEvent(r) || e.preventDefault();
	}
	renderSuggestion(e, r) {
		let i = t`
      ${e.title ? t`<h3 class="pkt-searchinput__suggestion-title">${e.title}</h3>` : n}
      ${e.text ? t`<p class="pkt-searchinput__suggestion-text">${e.text}</p>` : n}
    `;
		return e.href ? t`<a
        href=${e.href}
        class="pkt-searchinput__suggestion"
        @click=${(t) => this.onSuggestionClick(t, e, r)}
      >
        ${i}
      </a>` : e.nonInteractive ? t`<div class="pkt-searchinput__suggestion">${i}</div>` : t`<button
      type="button"
      class="pkt-searchinput__suggestion"
      @click=${(t) => this.onSuggestionClick(t, e, r)}
    >
      ${i}
    </button>`;
	}
	render() {
		let e = o({
			"pkt-searchinput": !0,
			[`pkt-searchinput--${this.appearance}`]: !0,
			"pkt-searchinput--fullwidth": this.fullwidth
		}), r = o({
			"pkt-searchinput__button": !0,
			"pkt-input-icon": this.appearance === "local",
			"pkt-btn": !0,
			"pkt-btn--medium": !0,
			"pkt-btn--icon-only": !0,
			"pkt-btn--tertiary": this.appearance === "local",
			"pkt-btn--primary": this.appearance === "global" || this.appearance === "local-with-button",
			"pkt-btn--yellow": this.appearance === "global"
		}), i = o({
			"pkt-input": !0,
			"pkt-input--fullwidth": this.fullwidth
		}), a = this.appearance === "local" ? "pkt-input__container" : "pkt-searchinput__field", c = t`
      ${this.label ? t`<label for=${s(this.id || void 0)} class="pkt-inputwrapper__label"
            >${this.label}</label
          >` : n}
      <div class=${a}>
        <input
          class=${i}
          type="search"
          name=${this.name || this.id}
          id=${this.id}
          placeholder=${this.placeholder || "Søk…"}
          .value=${this.value}
          ?disabled=${this.disabled}
          autocomplete="off"
          aria-autocomplete="list"
          aria-controls=${this.suggestionsId}
          @input=${this.onInput}
          @keydown=${this.onInputKeydown}
        />
        <button
          type="submit"
          class=${r}
          ?disabled=${this.disabled}
          @click=${this.onSearchClick}
        >
          <pkt-icon class="pkt-btn__icon" name="magnifying-glass-big" />
          <span class="pkt-btn__text">${this.label || this.placeholder || "Søk…"}</span>
        </button>
      </div>
      ${this.suggestions ? t`<ul
            id=${this.suggestionsId}
            class="pkt-searchinput__suggestions"
            aria-live="assertive"
          >
            ${this.suggestions.map((e, n) => t` <li>${this.renderSuggestion(e, n)}</li> `)}
          </ul>` : n}
    `;
		return this.action ? t`<form
        role="search"
        class=${e}
        action=${this.action}
        method=${s(this.method)}
        @submit=${(e) => {
			e.preventDefault();
		}}
      >
        ${c}
      </form>` : t`<div role="search" class=${e}>${c}</div>`;
	}
};
r([i({ type: String })], l.prototype, "appearance", void 0), r([i({
	type: Boolean,
	reflect: !0
})], l.prototype, "disabled", void 0), r([i({
	type: Boolean,
	reflect: !0
})], l.prototype, "fullwidth", void 0), r([i({
	type: String,
	reflect: !0
})], l.prototype, "id", void 0), r([i({ type: String })], l.prototype, "label", void 0), r([i({ type: String })], l.prototype, "name", void 0), r([i({ type: String })], l.prototype, "placeholder", void 0), r([i({ type: String })], l.prototype, "value", void 0), r([i({ type: Array })], l.prototype, "suggestions", void 0), r([i({ type: String })], l.prototype, "action", void 0), r([i({ type: String })], l.prototype, "method", void 0);
try {
	e("pkt-searchinput")(l);
} catch {
	console.warn("Forsøker å definere <pkt-searchinput>, men den er allerede definert");
}
//#endregion
//#region src/components/searchinput/index.ts
var u = l;
//#endregion
export { l as n, u as t };