@oslokommune/punkt-elements 16.7.3 → 16.7.7

package/dist/combobox-BcdLZRDU.js

@@ -0,0 +1,984 @@
+import { c as e, d as t, l as n, o as r, r as i, s as a } from "./element-cZ85T_aa.js";
+import { t as o } from "./class-map-C8HuhNzZ.js";
+import { n as s } from "./element-with-slot-4J2o3SeU.js";
+import "./icon-Co72KtgF.js";
+import { t as c } from "./if-defined-Cjj8qN-Z.js";
+import { n as l, t as u } from "./ref-RS8Uv6uC.js";
+import "./tag-VwykmuQR.js";
+import { t as d } from "./repeat-Cepr3469.js";
+import { a as f, c as p, i as m, o as h, r as g, s as _ } from "./listbox-DuBgTFvH.js";
+import { t as v } from "./input-element-Bw1s6NlF.js";
+import { t as y } from "./pkt-options-controller-CRrI6WMk.js";
+import "./input-wrapper-YfTmpSSY.js";
+//#region ../../shared-utils/combobox/input-utils.ts
+var b = (e, t, n) => {
+	switch (e) {
+		case ",": return n ? "addValue" : null;
+		case "Enter": return "addValue";
+		case "Tab":
+		case "ArrowDown": return t ? null : "focusListbox";
+		case "Escape": return "closeOptions";
+		default: return null;
+	}
+}, x = (e, t, n, r, i) => {
+	if (!e) return {
+		action: "none",
+		value: null
+	};
+	let a = m(n, e);
+	return !t.includes(e) && !a ? r ? {
+		action: "addUserValue",
+		value: e
+	} : i ? {
+		action: "none",
+		value: null
+	} : {
+		action: "removeValue",
+		value: t[0]
+	} : a && !t.includes(a.value) ? {
+		action: "selectOption",
+		value: a.value
+	} : {
+		action: "none",
+		value: null
+	};
+}, S = (e, t, n, r, i) => e.trim().toLowerCase() ? {
+	..._(e, t, n, r),
+	shouldRemoveValue: !1,
+	shouldResetInput: !1
+} : {
+	addValueText: null,
+	userInfoMessage: "",
+	shouldRemoveValue: !i && !!t[0],
+	shouldResetInput: !0
+}, C = (e, t, n) => {
+	let r = m(t, e);
+	return n === "label" && r?.label ? r.label : e;
+}, w = {
+	markOptionSelected(e, t) {
+		if (t) {
+			for (let n of e) if (n.value === t) {
+				n.selected = !0;
+				break;
+			}
+		}
+	},
+	markOptionDeselected(e, t) {
+		if (t) {
+			for (let n of e) if (n.value === t) {
+				n.selected = !1;
+				break;
+			}
+		}
+	},
+	markAllSelected(e) {
+		for (let t of e) t.selected = !0;
+	},
+	markAllDeselected(e) {
+		for (let t of e) t.selected = !1;
+	},
+	removeUserAddedOptions(e) {
+		return e.filter((e) => !e.userAdded);
+	}
+}, T = { parseOptionsFromSlot(e) {
+	let t = [];
+	return e.forEach((e) => {
+		if (!e.textContent && !e.getAttribute("value")) return;
+		let n = {
+			value: e.getAttribute("value") || e.textContent || "",
+			label: e.textContent || e.getAttribute("value") || ""
+		};
+		e.getAttribute("data-prefix") && (n.prefix = e.getAttribute("data-prefix") || void 0), e.getAttribute("tagskincolor") && (n.tagSkinColor = e.getAttribute("tagskincolor")), e.getAttribute("description") && (n.description = e.getAttribute("description") || void 0), n.fulltext = g(n), t.push(n);
+	}), t;
+} }, E = {
+	syncOptionsWithValues(e, t) {
+		let n = [...t];
+		return e.forEach((e) => {
+			e.value && !e.label && (e.label = e.value), e.selected && !n.includes(e.value) && n.push(e.value), e.fulltext = g(e), e.selected = e.selected || n.includes(e.value);
+		}), {
+			options: e,
+			newValues: n
+		};
+	},
+	mergeWithUserAdded(e, t) {
+		return [...t.filter((e) => e?.userAdded && e.selected).filter((t) => !(Array.isArray(e) ? e : []).some((e) => e.value === t.value)), ...e];
+	}
+}, D = {
+	name: "pkt-combobox",
+	react: "PktCombobox",
+	"css-class": "pkt-combobox",
+	isElement: !0,
+	isPureReact: !0,
+	props: {
+		name: {
+			type: "string",
+			name: "Navn",
+			description: "Navn som brukes i skjema ved innsending",
+			category: "tech"
+		},
+		id: {
+			type: "string",
+			name: "ID",
+			description: "Unik ID for feltet",
+			category: "tech"
+		},
+		label: {
+			type: "string",
+			name: "Etikett/label",
+			description: "Tekst som vises over feltet",
+			category: "contents"
+		},
+		placeholder: {
+			name: "Hint",
+			description: "Spesifiserer en kort hint som beskriver forventet verdi av feltet.",
+			type: "string",
+			category: "contents",
+			required: !1
+		},
+		multiple: {
+			type: "boolean",
+			name: "Flervalg",
+			default: !1,
+			description: "Mulighet for å velge flere valg",
+			category: "functionality"
+		},
+		tagPlacement: {
+			attribute: "tag-placement",
+			type: ["inside", "outside"],
+			name: "Plassering av tags i flervalg",
+			description: "Plassering av valgte verdier i feltet ved flervalg",
+			category: "functionality",
+			showIf: { multiple: !0 }
+		},
+		maxlength: {
+			type: "number",
+			name: "Maks antall i flervalg",
+			description: "Maks antall valg dersom flervalg er aktivert",
+			category: "functionality",
+			showIf: { multiple: !0 }
+		},
+		typeahead: {
+			type: "boolean",
+			name: "Typeahead",
+			default: !1,
+			description: "Mulighet for automatisk utfylling av feltet fra listen over valg",
+			category: "functionality"
+		},
+		includeSearch: {
+			attribute: "include-search",
+			type: "boolean",
+			name: "Inkluder søk",
+			description: "Mulighet for å søke etter valg inni dropdown",
+			category: "functionality"
+		},
+		allowUserInput: {
+			attribute: "allow-user-input",
+			type: "boolean",
+			name: "Brukervalgte verdier",
+			description: "Mulighet for å skrive inn egne verdier",
+			category: "functionality"
+		},
+		searchPlaceholder: {
+			attribute: "search-placeholder",
+			type: "string",
+			name: "Søke-plassholder",
+			description: "Plassholdertekst for søkefeltet i dropdown",
+			category: "contents",
+			showIf: { includeSearch: !0 }
+		},
+		displayValueAs: {
+			attribute: "display-value-as",
+			type: [
+				"label",
+				"value",
+				"prefixAndValue"
+			],
+			name: "Visning av valgt verdi",
+			description: "Hvordan valgt verdi vises i feltet",
+			default: "label",
+			category: "ui"
+		},
+		value: {
+			name: "Verdi",
+			type: "string",
+			description: "Valgt verdi. Streng ved enkelt valg, array av strenger ved flervalg.",
+			category: "tech"
+		},
+		helptext: {
+			type: "string",
+			name: "Hjelpetekst",
+			description: "Hjelpetekst som vises over feltet",
+			category: "contents"
+		},
+		helptextDropdown: {
+			type: "string",
+			name: "Utvidet hjelpetekst",
+			description: "Hjelpetekst som vises i en lukket boks man kan åpne",
+			category: "contents"
+		},
+		helptextDropdownButton: {
+			type: "string",
+			name: "Knappetekst for hjelpetekst",
+			description: "Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst",
+			category: "contents",
+			default: "Les mer"
+		},
+		disabled: {
+			type: "boolean",
+			name: "Deaktivert",
+			description: "Feltet er deaktivert",
+			category: "tech"
+		},
+		hasError: {
+			type: "boolean",
+			name: "Feil",
+			description: "Feltet har en feil",
+			category: "ui"
+		},
+		errorMessage: {
+			type: "string",
+			name: "Feilmelding",
+			description: "Tekst som vises under feltet ved feil",
+			category: "contents"
+		},
+		required: {
+			type: "boolean",
+			name: "Påkrevd",
+			description: "Feltet må fylles ut",
+			category: "tech"
+		},
+		requiredTag: {
+			type: "boolean",
+			name: "Påkrevd-merking",
+			description: "Viser en merking som indikerer at feltet er påkrevd",
+			category: "ui"
+		},
+		requiredText: {
+			type: "string",
+			name: "Påkrevd-tekst",
+			description: "Tekst som vises i påkrevd-merkingen",
+			category: "contents"
+		},
+		optionalTag: {
+			type: "boolean",
+			name: "Valgfritt-merking",
+			description: "Viser en merking som indikerer at feltet er valgfritt",
+			category: "ui"
+		},
+		optionalText: {
+			type: "string",
+			name: "Valgfritt-tekst",
+			description: "Tekst som vises i valgfritt-merkingen",
+			category: "contents"
+		},
+		tagText: {
+			type: "string",
+			name: "Tag-tekst",
+			description: "Tekst som vises i en tag ved siden av label",
+			category: "ui"
+		},
+		fullwidth: {
+			type: "boolean",
+			name: "Full bredde",
+			description: "Skal feltet ta opp hele bredden?",
+			category: "ui"
+		},
+		defaultOptions: {
+			attribute: "default-options",
+			name: "Initielle valg (default options)",
+			description: "Liste over valg som kan velges, om options sendes inn som array med objekter (denne vil ikke modifiseres ved endring innad i komponenten)",
+			type: "array",
+			default: [],
+			previewDefault: [
+				{
+					value: "bfr",
+					label: "Frogner"
+				},
+				{
+					value: "bgo",
+					label: "Gamle Oslo"
+				},
+				{
+					value: "bgr",
+					label: "Grorud"
+				},
+				{
+					value: "bxx",
+					label: "Andre bydeler"
+				}
+			],
+			items: {
+				type: "object",
+				properties: {
+					value: {
+						type: "string",
+						description: "Verdi som sendes ved valg"
+					},
+					label: {
+						type: "string",
+						description: "Tekst som vises for valget"
+					},
+					prefix: {
+						type: "string",
+						description: "Tekst som vises før valget"
+					},
+					description: {
+						type: "string",
+						description: "Beskrivelse av valget"
+					},
+					disabled: {
+						type: "boolean",
+						description: "Valget er deaktivert"
+					},
+					selected: {
+						type: "boolean",
+						description: "Valget er valgt"
+					},
+					tagSkinColor: {
+						type: [
+							"blue",
+							"blue-dark",
+							"blue-light",
+							"green",
+							"red",
+							"yellow",
+							"beige",
+							"gray",
+							"grey"
+						],
+						description: "Farge på tag"
+					}
+				},
+				required: ["value"]
+			},
+			category: "contents"
+		},
+		options: {
+			name: "Valg",
+			type: "array",
+			description: "Liste over valg som kan velges, om options sendes inn som array med objekter",
+			default: [],
+			items: {
+				type: "object",
+				properties: {
+					value: {
+						type: "string",
+						description: "Verdi som sendes ved valg"
+					},
+					label: {
+						type: "string",
+						description: "Tekst som vises for valget"
+					},
+					prefix: {
+						type: "string",
+						description: "Tekst som vises før valget"
+					},
+					description: {
+						type: "string",
+						description: "Beskrivelse av valget"
+					},
+					disabled: {
+						type: "boolean",
+						description: "Valget er deaktivert"
+					},
+					selected: {
+						type: "boolean",
+						description: "Valget er valgt"
+					},
+					tagSkinColor: {
+						type: [
+							"blue",
+							"blue-dark",
+							"blue-light",
+							"green",
+							"red",
+							"yellow",
+							"beige",
+							"gray",
+							"grey"
+						],
+						description: "Farge på tag"
+					}
+				},
+				required: ["value"]
+			},
+			category: "contents"
+		}
+	},
+	events: {
+		change: {
+			type: "Event",
+			description: "Returnerer valgt verdi som streng. Ved flervalg returneres kommaseparerte verdier."
+		},
+		"value-change": {
+			type: "CustomEvent",
+			description: "Returnerer valgt verdi. Ved enkeltvalg en streng, ved flervalg en <code>string[]</code>."
+		},
+		search: {
+			type: "CustomEvent",
+			description: "Returnerer søketeksten som streng i <code>event.detail</code> når brukeren skriver i søkefeltet"
+		},
+		toggleHelpText: {
+			type: "CustomEvent",
+			description: "Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes"
+		}
+	}
+}, O = class extends v {
+	constructor() {
+		super(), this.value = "", this.options = [], this.defaultOptions = [], this.allowUserInput = !1, this.typeahead = !1, this.includeSearch = !1, this.searchPlaceholder = "", this.multiple = !1, this.maxlength = null, this.displayValueAs = D.props.displayValueAs.default, this.tagPlacement = null, this.isOpen = !1, this._options = [], this._value = [], this._isOptionsOpen = !1, this._userInfoMessage = "", this._addValueText = null, this._maxIsReached = !1, this._search = "", this._inputFocus = !1, this._internalValueSync = !1, this._optionsFromSlot = !1, this._lastSlotGeneration = 0, this._suppressNextOpen = !1, this.inputRef = u(), this.triggerRef = u(), this.listboxRef = u(), this.optionsController = new y(this);
+	}
+	get _hasTextInput() {
+		return this.typeahead || this.allowUserInput;
+	}
+	get _selectionDescription() {
+		if (!(!this.multiple || this._value.length === 0)) return `${this._value.length} valgt`;
+	}
+	focusTrigger() {
+		this._hasTextInput ? this.inputRef.value?.focus() : this.triggerRef.value?.focus();
+	}
+	parseValue() {
+		return Array.isArray(this.value) ? this.multiple ? this.value : this.value.length > 0 ? [this.value[0]] : [] : this.value && this.multiple ? this.value.split(",") : this.value ? [this.value] : [];
+	}
+	updateMaxReached() {
+		this._maxIsReached = p(this._value.length, this.maxlength);
+	}
+	syncValueAndDispatch(e) {
+		let t = this._value, n = this.multiple ? t.join(",") : t[0] || "";
+		if (n !== (Array.isArray(this.value) ? this.value.join(",") : String(this.value || "")) && (this._internalValueSync = !0, this.value = n), e?.join(",") !== t.join(",")) {
+			let e = this.multiple ? [...t] : t[0] || "";
+			this.onChange(e);
+		} else t.length === 0 && e && e.length > 0 && this.clearInputValue();
+	}
+	onChange(e) {
+		this.touched = !0, super.onChange(e);
+	}
+	valueChanged() {}
+};
+i([a({
+	type: String,
+	reflect: !0
+})], O.prototype, "value", void 0), i([a({ type: Array })], O.prototype, "options", void 0), i([a({
+	type: Array,
+	attribute: "default-options"
+})], O.prototype, "defaultOptions", void 0), i([a({
+	type: Boolean,
+	attribute: "allow-user-input"
+})], O.prototype, "allowUserInput", void 0), i([a({ type: Boolean })], O.prototype, "typeahead", void 0), i([a({
+	type: Boolean,
+	attribute: "include-search"
+})], O.prototype, "includeSearch", void 0), i([a({
+	type: String,
+	attribute: "search-placeholder"
+})], O.prototype, "searchPlaceholder", void 0), i([a({ type: Boolean })], O.prototype, "multiple", void 0), i([a({ type: Number })], O.prototype, "maxlength", void 0), i([a({
+	type: String,
+	attribute: "display-value-as"
+})], O.prototype, "displayValueAs", void 0), i([a({
+	type: String,
+	attribute: "tag-placement"
+})], O.prototype, "tagPlacement", void 0), i([a({
+	type: Boolean,
+	attribute: "open"
+})], O.prototype, "isOpen", void 0), i([r()], O.prototype, "_options", void 0), i([r()], O.prototype, "_value", void 0), i([r()], O.prototype, "_isOptionsOpen", void 0), i([r()], O.prototype, "_userInfoMessage", void 0), i([r()], O.prototype, "_addValueText", void 0), i([r()], O.prototype, "_maxIsReached", void 0), i([r()], O.prototype, "_search", void 0), i([r()], O.prototype, "_inputFocus", void 0);
+//#endregion
+//#region src/components/combobox/combobox-value.ts
+var k = class extends O {
+	toggleValue(e) {
+		if (this.disabled) return;
+		this.touched = !0, this._userInfoMessage = "", this._addValueText = null;
+		let t = m(this.options, e)?.value || null, n = this._value.includes(e || t || ""), r = !!t, i = this._options.find((t) => t.value === e)?.disabled || !1, a = !e?.trim(), o = !this.multiple, s = this.multiple, c = p(this._value.length, this.maxlength), l = !1, u = !0, d = "", f = "";
+		i || (!r && this.allowUserInput && !a ? (this.addNewUserValue(e), d = "Ny verdi lagt til", l = s) : !r && !this.allowUserInput ? (o && this._value[0] && this.removeValue(this._value[0]), u = !1, l = !0, d = "Ingen treff i søket") : n ? (this.removeValue(t), l = !0, o && this._hasTextInput && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = "")) : a && o ? (this.removeAllSelected(), l = !0) : o ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(t), l = !1) : s && !c ? (this.setSelected(t), l = !0) : s && c ? (d = "Maks antall valg nådd", u = !1, f = e) : (o && this.removeAllSelected(), d = "Ingen gyldig verdi valgt", u = !1, l = !0, f = e), this._isOptionsOpen = l, l || (o && this._hasTextInput && (this._suppressNextOpen = !0), window.setTimeout(() => {
+			this.focusTrigger();
+		}, 0)), this._userInfoMessage = d, this._search = f || "", this.resetComboboxInput(u), s && this.updateMaxReached());
+	}
+	setSelected(e) {
+		if (!this._value.includes(e)) {
+			if (this.multiple && p(this._value.length, this.maxlength)) {
+				this._userInfoMessage = "Maks antall valg nådd";
+				return;
+			}
+			!this.multiple && this.removeAllSelected(), this._value = e ? [...this._value, e] : this._value, w.markOptionSelected(this._options, e), this.resetComboboxInput(!0);
+		}
+	}
+	removeSelected(e) {
+		if (!e) return;
+		this._value = this._value.filter((t) => t !== e);
+		let t = m(this.options, e);
+		t && (w.markOptionDeselected(this.options, e), t.userAdded ? (this._options = [...this._options.filter((t) => t.value !== e)], this.options = [...this.options.filter((t) => t.value !== e)]) : this._options.some((t) => t.value === e) || (this._options = [...this._options, t]));
+	}
+	addAllOptions() {
+		if (this.multiple) {
+			if (this.maxlength && this._options.length > this.maxlength) {
+				this._userInfoMessage = "For mange valgt";
+				return;
+			}
+			this._value = this._options.map((e) => e.value), w.markAllSelected(this._options), this.requestUpdate();
+		}
+	}
+	removeAllSelected() {
+		this._value = [], w.markAllDeselected(this._options), this._options = w.removeUserAddedOptions(this._options), this.requestUpdate();
+	}
+	addValue() {
+		let e = this.inputRef.value?.value.trim() || "";
+		if (this._search = e, e && this._value.includes(e)) {
+			this.resetComboboxInput(!0), this._userInfoMessage = "Verdien er allerede valgt";
+			return;
+		}
+		this.toggleValue(e);
+	}
+	removeValue(e) {
+		this._value = this.multiple ? this._value.filter((t) => t !== e) : [], this.removeSelected(e);
+	}
+	addNewUserValue(e) {
+		if (!e || e.trim() === "") return;
+		if (!this.multiple) this._value[0] && this.removeSelected(this._value[0]), this._value = [e];
+		else if (!m(this.options, e)) {
+			if (p(this._value.length, this.maxlength)) return;
+			this._value = [...this._value, e];
+		}
+		let t = {
+			value: e,
+			label: e,
+			userAdded: !0,
+			selected: !0
+		};
+		this.options = [t, ...this.options], this._options = [t, ...this._options], this.resetComboboxInput(!0), this.multiple || (this._isOptionsOpen = !1, this._hasTextInput && (this._suppressNextOpen = !0), window.setTimeout(() => {
+			this.focusTrigger();
+		}, 0)), this.requestUpdate();
+	}
+	resetComboboxInput(e = !0) {
+		this._addValueText = null, this.inputRef.value && this.inputRef.value.type !== "hidden" && e && (this._search = "", this.multiple ? this.inputRef.value.value = "" : (this.inputRef.value.value = this._value[0] ? C(this._value[0], this.options, this.displayValueAs) : "", this._userInfoMessage = "")), this._options = [...this.options];
+	}
+	removeLastValue(e) {
+		if (this._value.length === 0) return;
+		e.preventDefault();
+		let t = this._value[this._value.length - 1];
+		t && this.removeSelected(t), this.updateMaxReached();
+	}
+}, A = class extends k {
+	handleInput(e) {
+		if (e.stopPropagation(), e.stopImmediatePropagation(), this.disabled) return;
+		this.touched = !0;
+		let t = e.target;
+		if (this._search = t.value, this.checkForMatches(), this.typeahead) if (this._search) {
+			let { filtered: n, suggestion: r } = h(this.options, this._search);
+			this._options = n, e.inputType !== "deleteContentBackward" && r?.label && this.inputRef.value && this.inputRef.value.type !== "hidden" && (t.value = r.label, window.setTimeout(() => t.setSelectionRange(this._search.length, t.value.length), 0), t.selectionDirection = "backward");
+		} else this._options = [...this.options];
+	}
+	handleFocus() {
+		if (!this.disabled) {
+			if (this._suppressNextOpen) {
+				this._suppressNextOpen = !1, this._inputFocus = !0, this.requestUpdate();
+				return;
+			}
+			!this.multiple && this._value[0] && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = C(this._value[0], this.options, this.displayValueAs)), this._inputFocus = !0, this._search = "", this._options = [...this.options], this._isOptionsOpen = !0, this.onFocus(), this.requestUpdate();
+		}
+	}
+	handleFocusOut(e) {
+		if (this.disabled || !this._isOptionsOpen) return;
+		let t = e.relatedTarget;
+		t?.closest("pkt-combobox")?.id === this.id || e.target?.getAttribute("data-focusfix") === this.id || t === this.inputRef.value || t === this.triggerRef.value || this.closeAndProcessInput();
+	}
+	closeAndProcessInput() {
+		if (this._inputFocus = !1, this._addValueText = null, this._userInfoMessage = "", this._search = "", this.inputRef.value && this.inputRef.value.type !== "hidden") {
+			let e = this.inputRef.value.value;
+			if (!this.multiple) if (!e) this._value[0] && this.removeSelected(this._value[0]);
+			else {
+				let t = m(this.options, e);
+				t && t.value !== this._value[0] ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(t.value)) : !t && this.allowUserInput && (this._value[0] && this.removeSelected(this._value[0]), this.addNewUserValue(e));
+			}
+			else if (e !== "") {
+				let { action: t, value: n } = x(e, this._value, this.options, this.allowUserInput, this.multiple);
+				switch (t) {
+					case "addUserValue":
+						this.addNewUserValue(n);
+						break;
+					case "selectOption":
+						this.setSelected(n);
+						break;
+					case "removeValue":
+						this.removeValue(n);
+						break;
+				}
+			}
+			!this.multiple && this._value[0] ? this.inputRef.value.value = C(this._value[0], this.options, this.displayValueAs) : this.inputRef.value.value = "";
+		}
+		this._isOptionsOpen = !1, this.onBlur();
+	}
+	handleBlur() {
+		this._inputFocus = !1, this.onBlur();
+	}
+	handleInputClick(e) {
+		if (this.disabled) {
+			e.preventDefault(), e.stopImmediatePropagation();
+			return;
+		}
+		this._hasTextInput ? (this.inputRef.value?.focus(), this.requestUpdate()) : (e.stopImmediatePropagation(), e.preventDefault(), this._isOptionsOpen = !this._isOptionsOpen, this._isOptionsOpen && this.listboxRef.value?.focusFirstOrSelectedOption());
+	}
+	handlePlaceholderClick(e) {
+		this.disabled || (e.stopPropagation(), this._hasTextInput && this.inputRef.value ? (this.inputRef.value.focus(), this._inputFocus = !0, this.requestUpdate()) : (this._isOptionsOpen = !this._isOptionsOpen, this.requestUpdate()));
+	}
+	handleSelectOnlyKeydown(e) {
+		if (!this.disabled) switch (e.key) {
+			case "Enter":
+			case " ":
+			case "ArrowDown":
+			case "ArrowUp":
+				e.preventDefault(), this._isOptionsOpen ? this._isOptionsOpen = !1 : (this._isOptionsOpen = !0, this.listboxRef.value?.focusFirstOrSelectedOption());
+				break;
+			case "Escape":
+				this._isOptionsOpen &&= (e.preventDefault(), !1);
+				break;
+			case "Home":
+			case "End":
+				e.preventDefault(), this._isOptionsOpen ||= !0, this.listboxRef.value?.focusFirstOrSelectedOption();
+				break;
+			case "ArrowLeft":
+				this.multiple && this._value.length > 0 && (e.preventDefault(), this.focusTag(this._value.length - 1));
+				break;
+			case "Backspace":
+			case "Delete":
+				this.multiple && this._value.length > 0 && (e.preventDefault(), this.removeSelected(this._value[this._value.length - 1]));
+				break;
+		}
+	}
+	handleOptionToggled(e) {
+		this.toggleValue(e.detail);
+	}
+	handleSearch(e) {
+		e.stopPropagation(), this._search = e.detail.toLowerCase(), this.checkForMatches();
+	}
+	handleInputKeydown(e) {
+		if (e.key === "Backspace") {
+			let t = !this.inputRef.value?.value;
+			!this._search && t && this.multiple && this._value.length > 0 && this.removeLastValue(e);
+			return;
+		}
+		if (e.key === "ArrowLeft" && this.multiple && this._value.length > 0) {
+			let t = this.inputRef.value;
+			if (t && t.selectionStart === 0 && !t.value) {
+				e.preventDefault(), this.focusTag(this._value.length - 1);
+				return;
+			}
+		}
+		let t = b(e.key, e.shiftKey, this.multiple);
+		if (t && !(e.key === "Tab" && !this._isOptionsOpen)) {
+			if (t === "focusListbox" && e.key === "Tab" && !this.listboxRef.value?.querySelector("[role=\"option\"]:not([data-disabled]), [data-type=\"new-option\"]")) {
+				this.closeAndProcessInput();
+				return;
+			}
+			switch (e.preventDefault(), t) {
+				case "addValue":
+					this.addValue();
+					break;
+				case "focusListbox":
+					this.listboxRef.value?.focusFirstOrSelectedOption();
+					break;
+				case "closeOptions":
+					this._isOptionsOpen = !1;
+					break;
+			}
+		}
+	}
+	handleTagRemove(e) {
+		this.removeSelected(e), this._hasTextInput && this.inputRef.value && (this._inputFocus = !0, this.inputRef.value.focus(), this.requestUpdate());
+	}
+	getInsideTags() {
+		return Array.from(this.querySelectorAll(".pkt-combobox__input .pkt-combobox__tag-list pkt-tag"));
+	}
+	focusTag(e) {
+		let t = this.getInsideTags();
+		t.forEach((t, n) => {
+			t.buttonTabindex = n === e ? 0 : -1;
+		}), (t[e]?.querySelector("button"))?.focus();
+	}
+	resetTagTabindices() {
+		this.getInsideTags().forEach((e) => {
+			e.buttonTabindex = -1;
+		});
+	}
+	handleTagKeydown(e, t) {
+		e.stopPropagation();
+		let n = () => {
+			this.resetTagTabindices(), this._hasTextInput && this.inputRef.value ? this.inputRef.value.focus() : this.triggerRef.value?.focus();
+		};
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault(), t > 0 && this.focusTag(t - 1);
+				break;
+			case "ArrowRight":
+				e.preventDefault(), t < this._value.length - 1 ? this.focusTag(t + 1) : n();
+				break;
+			case "Backspace":
+			case "Delete":
+				e.preventDefault();
+				{
+					let e = this._value[t], r = t >= this._value.length - 1 ? t - 1 : t;
+					this.removeSelected(e), r >= 0 ? (this.requestUpdate(), this.updateComplete.then(() => this.focusTag(r))) : n();
+				}
+				break;
+			case "Tab":
+				this.resetTagTabindices();
+				break;
+			case "Escape":
+				e.preventDefault(), n();
+				break;
+		}
+	}
+	checkForMatches() {
+		let e = S(this.inputRef.value?.value || this._search || "", this._value, this.options, this.allowUserInput, this.multiple);
+		if (e.shouldRemoveValue && this.removeValue(this._value[0]), e.shouldResetInput) {
+			this.resetComboboxInput(!1);
+			return;
+		}
+		this._addValueText = e.addValueText, this._userInfoMessage = e.userInfoMessage;
+	}
+}, j = class extends A {
+	constructor(...e) {
+		super(...e), this.handleBodyClick = (e) => {
+			this._isOptionsOpen && !this.contains(e.target) && this.closeAndProcessInput();
+		};
+	}
+	connectedCallback() {
+		if (super.connectedCallback(), document?.body.addEventListener("click", this.handleBodyClick), this._options = [], this.defaultOptions && this.defaultOptions.length && (this.options = [...this.options?.filter((e) => e.userAdded) || [], ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = Array.isArray(this.options) ? [...this.options] : []), this.optionsController?.nodes && this.optionsController.nodes.length) {
+			let e = T.parseOptionsFromSlot(this.optionsController.nodes);
+			e.length && (this.options = [...e], this._options = [...e], this._optionsFromSlot = !0, this._lastSlotGeneration = this.optionsController.generation);
+		}
+	}
+	willUpdate(e) {
+		if (this._optionsFromSlot && this.optionsController) {
+			let e = this.optionsController.generation;
+			if (e !== this._lastSlotGeneration) {
+				this._lastSlotGeneration = e;
+				let t = T.parseOptionsFromSlot(this.optionsController.nodes);
+				this.options = [...this._options.filter((e) => e.userAdded), ...t];
+			}
+		}
+		super.willUpdate(e);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document?.body.removeEventListener("click", this.handleBodyClick);
+	}
+	firstUpdated(e) {
+		this.defaultValue !== null && !this.value && (this.value = this.defaultValue), super.firstUpdated(e);
+	}
+	updated(e) {
+		e.has("isOpen") && (this._isOptionsOpen = this.isOpen);
+		let t = e.has("value"), n = e.has("_value");
+		if (t && this._internalValueSync) this._internalValueSync = !1, n && this.syncValueAndDispatch(e.get("_value"));
+		else if (t) {
+			let e = [...this._value], t = this.parseValue();
+			t.join(",") !== this._value.join(",") && (this._value = t), this.updateMaxReached(), this.syncValueAndDispatch(e);
+		} else n && this.syncValueAndDispatch(e.get("_value"));
+		if (e.has("defaultOptions") && this.defaultOptions.length && (this.options = [...(Array.isArray(this.options) ? this.options : []).filter((e) => e.userAdded) || [], ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = Array.isArray(this.options) ? [...this.options] : []), e.has("options")) {
+			let t = e.get("options") || this._options || [], n = E.mergeWithUserAdded(this.options, t);
+			this._options = n, n.length > this.options.length && (this.options = n);
+			let r = E.syncOptionsWithValues(this._options, this._value);
+			if (this._options = r.options, r.newValues.length > this._value.length) {
+				let e = [...this._value];
+				this._value = r.newValues, this.syncValueAndDispatch(e);
+			}
+		}
+		if (e.has("_search") && this.dispatchEvent(new CustomEvent("search", {
+			detail: this._search,
+			bubbles: !1
+		})), !this._isOptionsOpen && !this.multiple && this._hasTextInput && this.inputRef.value && this.inputRef.value.type !== "hidden") {
+			let e = this._value[0] ? C(this._value[0], this.options, this.displayValueAs) : "";
+			this.inputRef.value.value !== e && (this.inputRef.value.value = e);
+		}
+		super.updated(e);
+	}
+	formResetCallback() {
+		this.touched = !1, this.value = this.defaultValue || (this.multiple, ""), this._value = this.parseValue(), this._options = this._options.filter((e) => !e.userAdded).map((e) => ({
+			...e,
+			selected: this._value.includes(e.value)
+		})), this.options = this.options.filter((e) => !e.userAdded).map((e) => ({
+			...e,
+			selected: this._value.includes(e.value)
+		})), this._search = "", this._isOptionsOpen = !1, this._userInfoMessage = "", this._addValueText = null, this._inputFocus = !1, this.updateMaxReached(), this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = ""), this.internals.setFormValue(""), this.internals.ariaInvalid = "false", this.requestUpdate();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (e === "options") {
+			this._options = Array.isArray(this.options) ? [...this.options] : [];
+			let e = E.syncOptionsWithValues(this._options, this._value);
+			this._options = e.options, e.newValues.length > this._value.length && (this._value = e.newValues), this._search = "";
+		}
+		super.attributeChangedCallback(e, t, n);
+	}
+	render() {
+		return t`
+      <pkt-input-wrapper
+        .label=${this.label}
+        .helptext=${this.helptext}
+        .helptextDropdown=${c(this.helptextDropdown)}
+        .helptextDropdownButton=${c(this.helptextDropdownButton)}
+        ?fullwidth=${this.fullwidth}
+        ?hasError=${this.hasError}
+        ?inline=${this.inline}
+        ?disabled=${this.disabled}
+        .errorMessage=${this.errorMessage}
+        ?optionalTag=${this.optionalTag}
+        .optionalText=${this.optionalText}
+        ?requiredTag=${this.requiredTag}
+        .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
+        useWrapper=${this.useWrapper}
+        .forId=${this._hasTextInput ? this.id + "-input" : this.id + "-combobox"}
+        ?hasFieldset=${!this._hasTextInput}
+        class="pkt-combobox__wrapper"
+        @labelClick=${this.handleInputClick}
+      >
+        <div class="pkt-contents" slot="helptext">${s(this, "helptext")}</div>
+        <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
+          <div
+            class=${o({
+			"pkt-combobox__input": !0,
+			"pkt-combobox__input--fullwidth": this.fullwidth,
+			"pkt-combobox__input--open": this._isOptionsOpen,
+			"pkt-combobox__input--error": this.hasError,
+			"pkt-combobox__input--disabled": this.disabled
+		})}
+            id=${c(this._hasTextInput ? void 0 : `${this.id}-combobox`)}
+            role=${c(this._hasTextInput ? void 0 : "combobox")}
+            aria-expanded=${c(this._hasTextInput ? void 0 : this._isOptionsOpen ? "true" : "false")}
+            aria-controls=${c(this._hasTextInput ? void 0 : `${this.id}-listbox`)}
+            aria-haspopup=${c(this._hasTextInput ? void 0 : "listbox")}
+            aria-labelledby=${c(this._hasTextInput ? void 0 : `${this.id}-combobox-label`)}
+            aria-activedescendant=${c(!this._hasTextInput && this._value[0] && m(this.options, this._value[0]) ? `${this.id}-listbox-${f(this._options, this._value[0])}` : void 0)}
+            aria-description=${c(this._selectionDescription || void 0)}
+            tabindex=${this._hasTextInput || this.disabled ? "-1" : "0"}
+            @click=${this.handleInputClick}
+            @keydown=${this._hasTextInput ? n : this.handleSelectOnlyKeydown}
+            ${l(this.triggerRef)}
+          >
+            ${!this._hasTextInput && this.placeholder && (!this._value.length || this.multiple && this.tagPlacement == "outside") && !this._inputFocus ? t`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
+                  >${this.placeholder}</span
+                >` : this.tagPlacement === "outside" ? n : this.renderSingleOrMultipleValues()}
+            ${this.renderInputField()}
+            <pkt-icon
+              class=${o({
+			"pkt-combobox__arrow-icon": !0,
+			"pkt-combobox__arrow-icon--open": this._isOptionsOpen
+		})}
+              name="chevron-thin-down"
+              aria-hidden="true"
+            ></pkt-icon>
+          </div>
+
+          <pkt-listbox
+            id="${this.id}-listbox"
+            .options=${this._options}
+            .isOpen=${this._isOptionsOpen}
+            .searchPlaceholder=${this.searchPlaceholder}
+            .label="Liste: ${this.label || ""}"
+            ?include-search=${this.includeSearch}
+            ?is-multi-select=${this.multiple}
+            ?allow-user-input=${this.allowUserInput && !this._maxIsReached}
+            ?max-is-reached=${this._maxIsReached}
+            .customUserInput=${c(this._addValueText)}
+            .userMessage=${this._userInfoMessage}
+            @search=${this.handleSearch}
+            @option-toggle=${this.handleOptionToggled}
+            @select-all=${this.addAllOptions}
+            @close-options=${() => this._isOptionsOpen = !1}
+            @tab-close=${() => this.closeAndProcessInput()}
+            .searchValue=${this._search || null}
+            .maxLength=${this.maxlength || 0}
+            ${l(this.listboxRef)}
+          ></pkt-listbox>
+        </div>
+
+        ${this.tagPlacement === "outside" && this.multiple ? t`<div class="pkt-combobox__tags-outside">
+              ${this.renderSingleOrMultipleValues()}
+            </div>` : n}
+      </pkt-input-wrapper>
+    `;
+	}
+	renderInputField() {
+		return this.typeahead || this.allowUserInput ? t`
+          <div class="pkt-combobox__input-div combobox__input">
+            <input
+              type="text"
+              id="${this.id}-input"
+              name=${(this.name || this.id) + "-input"}
+              placeholder=${c(!this._value.length || this.multiple && this.tagPlacement === "outside" ? this.placeholder : void 0)}
+              @input=${this.handleInput}
+              @change=${(e) => {
+			e.stopPropagation(), e.stopImmediatePropagation();
+		}}
+              @keydown=${this.handleInputKeydown}
+              @focus=${this.handleFocus}
+              @blur=${this.handleBlur}
+              autocomplete="off"
+              role="combobox"
+              aria-expanded=${this._isOptionsOpen ? "true" : "false"}
+              aria-label=${c(this.label)}
+              aria-autocomplete=${this.typeahead ? "both" : this.allowUserInput ? "list" : "none"}
+              aria-controls="${this.id}-listbox"
+              aria-activedescendant=${c(this._value[0] && m(this.options, this._value[0]) ? `${this.id}-listbox-${f(this._options, this._value[0])}` : void 0)}
+              aria-description=${c(this._selectionDescription || void 0)}
+              ${l(this.inputRef)}
+            />
+          </div>
+        ` : t`
+          <input
+            type="hidden"
+            id="${this.id}-input"
+            name=${(this.name || this.id) + "-input"}
+            .value=${this._value.join(",")}
+            ${l(this.inputRef)}
+          />
+        `;
+	}
+	renderSingleOrMultipleValues() {
+		if (!this.multiple && this._hasTextInput) return n;
+		let e = !this.multiple, r = this.renderValueTag(m(this.options, this._value[0])), i = this.tagPlacement === "outside", a = t`
+      <ul role="list" class="pkt-combobox__tag-list">
+        ${d(this._value, (e) => e, (e, r) => {
+			let a = m(this.options, e), o = a?.tagSkinColor;
+			return t`
+              <li
+                role="listitem"
+                @click=${i ? n : (e) => e.stopPropagation()}
+                @mousedown=${i ? n : (e) => e.preventDefault()}
+              >
+                <pkt-tag
+                  skin=${o || "blue-dark"}
+                  ?closeTag=${!this.disabled}
+                  .buttonTabindex=${i ? void 0 : -1}
+                  @close=${() => this.handleTagRemove(e)}
+                  @keydown=${i ? n : (e) => this.handleTagKeydown(e, r)}
+                >
+                  ${this.renderValueTag(a)}
+                </pkt-tag>
+              </li>
+            `;
+		})}
+      </ul>
+    `;
+		return e ? r : a;
+	}
+	renderValueTag(e) {
+		if (!e) return "";
+		switch (this.displayValueAs) {
+			case "prefixAndValue": return t`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${e.prefix || ""} ${e.value}</span
+        >`;
+			case "value": return t`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${e.value}</span
+        >`;
+			default: return t`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${e.label || e.value}</span
+        >`;
+		}
+	}
+};
+try {
+	e("pkt-combobox")(j);
+} catch {
+	console.warn("Forsøker å definere <pkt-combobox>, men den er allerede definert");
+}
+//#endregion
+//#region src/components/combobox/index.ts
+var M = j;
+//#endregion
+export { j as n, M as t };