@oslokommune/punkt-elements/dist/select-6XCVj1lP.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { c as e, d as t, o as n, r, s as i } from "./element-cZ85T_aa.js";
import { n as a } from "./element-with-slot-4J2o3SeU.js";
import { t as o } from "./if-defined-Cjj8qN-Z.js";
import { n as s, t as c } from "./ref-RS8Uv6uC.js";
import { t as l } from "./input-element-B1ciW1N2.js";
import { t as u } from "./pkt-options-controller-CCB15L_G.js";
import "./input-wrapper-DVU68NcJ.js";
//#region src/base-elements/options-input-element.ts
var d = class extends l {
	constructor(...e) {
		super(...e), this._optionsProp = [], this._options = [];
	}
	get options() {
		return this._options.map((e) => ({
			...e,
			selected: this.isOptionSelected(e)
		}));
	}
	set options(e) {
		this._optionsProp = e, this.requestUpdate("_optionsProp", this._options);
	}
	isOptionSelected(e) {
		return Array.isArray(this.value) ? this.value.includes(e.value) : e.value === this.value;
	}
	findOptionByValue(e) {
		return this._options.find((t) => t.value === e);
	}
	getSelectedOptions() {
		return this._options.filter((e) => this.isOptionSelected(e));
	}
	parseOptions() {
		let e = this._optionsProp.length > 0, t = this.optionsController?.nodes?.length && this.optionsController.nodes.length > 0;
		e ? this._options = this._optionsProp : t && (this._options = this.optionsController.options);
	}
	willUpdate(e) {
		super.willUpdate(e), this.parseOptions();
	}
};
r([i({
	type: Array,
	attribute: "options"
})], d.prototype, "_optionsProp", void 0), r([n()], d.prototype, "_options", void 0);
//#endregion
//#region src/components/select/select.ts
var f = class extends d {
	constructor() {
		super(), this.inputRef = c(), this.value = "", this.selectedIndex = -1, this.selectedOptions = void 0, this.optionsController = new u(this);
	}
	connectedCallback() {
		super.connectedCallback(), this.parseOptions(), this._options.forEach((e) => {
			e.selected && !this.value && (this.value = e.value);
		});
	}
	add(e, t) {
		let n = {
			value: e.value || e.text,
			label: e.text || e.value,
			selected: e.selected,
			disabled: e.disabled
		};
		if (t === void 0) this._options.push(n);
		else if (typeof t == "number") this._options.splice(t, 0, n);
		else {
			let e = t.value || t.text, r = this._options.findIndex((t) => t.value === e);
			r >= 0 ? this._options.splice(r, 0, n) : this._options.push(n);
		}
		e.selected && (this.value = e.value || e.text, this.selectedIndex = this._options.findIndex((e) => e.value === this.value)), this.requestUpdate();
	}
	remove(e) {
		typeof e == "number" && (this.selectedIndex === e && (this.value = this._options[0]?.value || ""), this._options.splice(e, 1), this.requestUpdate());
	}
	item(e) {
		return this.inputRef.value?.item(e);
	}
	namedItem(e) {
		return this.inputRef.value?.namedItem(e);
	}
	showPicker() {
		this.inputRef.value && "showPicker" in this.inputRef.value && this.inputRef.value.showPicker();
	}
	attributeChangedCallback(e, t, n) {
		e === "options" && (this._options = n ? JSON.parse(n) : []), e === "value" && this.value !== t && (this.selectedIndex = this.touched ? this.returnNumberOrNull(this.inputRef.value?.selectedIndex) : this._options.findIndex((e) => e.value === n), this.selectedOptions = this.inputRef.value?.selectedOptions, this.valueChanged(n, t)), super.attributeChangedCallback(e, t, n);
	}
	update(e) {
		super.update(e), e.has("_optionsProp") && this._optionsProp.length > 0 && (this._options = this._optionsProp, this.requestUpdate("_options"), !this.value && this._options.length > 0 && (this.value = this._options[0].value, this.selectedIndex = 0)), e.has("value") && this.value !== e.get("value") && (this.selectedIndex = this.touched ? this.returnNumberOrNull(this.inputRef.value?.selectedIndex) : this._options.findIndex((e) => e.value === this.value), this.selectedOptions = this.inputRef.value?.selectedOptions, this.valueChanged(this.value, e.get("value"))), e.has("id") && !this.name && this.id && (this.name = this.id);
	}
	firstUpdated(e) {
		super.firstUpdated(e), this._optionsProp.length && (this._options = this._optionsProp), !this.value && this._options.length > 0 ? (this.value = this._options[0].value, this.selectedIndex = 0) : this.selectedIndex = this._options.findIndex((e) => e.value === this.value), this.selectedOptions = this.inputRef.value?.selectedOptions;
	}
	render() {
		let e = `pkt-input ${this.fullwidth ? "pkt-input--fullwidth" : ""}`;
		return t`
      <pkt-input-wrapper
        ?counter=${this.counter}
        ?disabled=${this.disabled}
        ?hasError=${this.hasError}
        ?hasFieldset=${this.hasFieldset}
        ?inline=${this.inline}
        ?optionalTag=${this.optionalTag}
        ?requiredTag=${this.requiredTag}
        useWrapper=${this.useWrapper}
        ariaDescribedBy=${o(this.ariaDescribedBy)}
        class="pkt-select"
        errorMessage=${o(this.errorMessage)}
        forId=${this.id + "-input"}
        helptext=${o(this.helptext)}
        helptextDropdown=${o(this.helptextDropdown)}
        helptextDropdownButton=${o(this.helptextDropdownButton)}
        label=${o(this.label)}
        optionalText=${o(this.optionalText)}
        requiredText=${o(this.requiredText)}
        tagText=${o(this.tagText)}
      >
        <select
          class=${e}
          aria-invalid=${this.hasError}
          aria-errormessage=${`${this.id}-error`}
          aria-labelledby=${o(this.ariaLabelledby)}
          ?disabled=${this.disabled}
          id=${this.id + "-input"}
          name=${(this.name || this.id) + "-input"}
          value=${this.value}
          @change=${(e) => {
			this.touched = !0, this.value = e.target.value, e.stopImmediatePropagation();
		}}
          @input=${(e) => {
			this.onInput(), e.stopImmediatePropagation();
		}}
          @focus=${(e) => {
			this.onFocus(), e.stopImmediatePropagation();
		}}
          @blur=${(e) => {
			this.onBlur(), e.stopImmediatePropagation();
		}}
          ${s(this.inputRef)}
        >
          ${this._options.length > 0 ? this._options.map((e) => t`<option
                    value=${e.value}
                    ?selected=${this.value == e.value || e.selected}
                    ?disabled=${e.disabled}
                    ?hidden=${e.hidden}
                  >
                    ${e.label}
                  </option>`) : ""}
        </select>
        <div class="pkt-contents" slot="helptext">${a(this, "helptext")}</div>
      </pkt-input-wrapper>
    `;
	}
	returnNumberOrNull(e) {
		return e == null || isNaN(e) ? null : e;
	}
};
r([i({ type: String })], f.prototype, "value", void 0);
try {
	e("pkt-select")(f);
} catch {
	console.warn("Forsøker å definere <pkt-select>, men den er allerede definert");
}
//#endregion
//#region src/components/select/index.ts
var p = f;
//#endregion
export { f as n, p as t };