@oslokommune/punkt-elements 19.6.0 → 19.7.0

package/dist/{combobox-CWzWHBaw.js → combobox-CMpYhgln.js}

@@ -11,8 +11,23 @@ import { a as p, c as m, i as h, l as g, o as _, r as v, s as y } from "./listbo
 import { t as b } from "./input-element-lLzfwdim.js";
 import { t as x } from "./pkt-options-controller-D7l18Iw0.js";
 import { r as S } from "./input-wrapper-BoTugCvh.js";
-//#region ../../shared-utils/combobox/input-utils.ts
-var C = (e, t, n) => {
+//#region ../../shared-types/combobox.ts
+var C = {
+	multiple: !1,
+	typeahead: !1,
+	includeSearch: !1,
+	allowUserInput: !1,
+	displayValueAs: "label",
+	inputSize: "medium",
+	disabled: !1,
+	hasError: !1,
+	required: !1,
+	requiredTag: !1,
+	optionalTag: !1,
+	fullwidth: !1,
+	inline: !1,
+	useWrapper: !0
+}, w = (e, t, n) => {
 	switch (e) {
 		case ",": return n ? "addValue" : null;
 		case "Enter": return "addValue";
@@ -21,7 +36,7 @@ var C = (e, t, n) => {
 		case "Escape": return "closeOptions";
 		default: return null;
 	}
-}, w = (e, t, n, r, i) => {
+}, T = (e, t, n, r, i) => {
 	if (!e) return {
 		action: "none",
 		value: null
@@ -43,7 +58,7 @@ var C = (e, t, n) => {
 		action: "none",
 		value: null
 	};
-}, T = (e, t, n, r, i) => e.trim().toLowerCase() ? {
+}, E = (e, t, n, r, i) => e.trim().toLowerCase() ? {
 	...m(e, t, n, r),
 	shouldRemoveValue: !1,
 	shouldResetInput: !1
@@ -52,10 +67,10 @@ var C = (e, t, n) => {
 	userInfoMessage: "",
 	shouldRemoveValue: !i && !!t[0],
 	shouldResetInput: !0
-}, E = (e, t, n) => {
+}, D = (e, t, n) => {
 	let r = h(t, e);
 	return n === "label" && r?.label ? r.label : e;
-}, D = {
+}, O = {
 	markOptionSelected(e, t) {
 		if (t) {
 			for (let n of e) if (n.value === t) {
@@ -81,7 +96,7 @@ var C = (e, t, n) => {
 	removeUserAddedOptions(e) {
 		return e.filter((e) => !e.userAdded);
 	}
-}, O = { parseOptionsFromSlot(e) {
+}, k = { parseOptionsFromSlot(e) {
 	let t = [];
 	return e.forEach((e) => {
 		if (!e.textContent && !e.getAttribute("value")) return;
@@ -91,7 +106,7 @@ var C = (e, t, n) => {
 		};
 		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 = v(n), t.push(n);
 	}), t;
-} }, k = {
+} }, A = {
 	cloneOptions(e) {
 		return Array.isArray(e) ? e.map((e) => ({ ...e })) : [];
 	},
@@ -107,400 +122,9 @@ var C = (e, t, n) => {
 	mergeWithUserAdded(e, t, n) {
 		return [...t.filter((e) => e?.userAdded && n.includes(e.value)).filter((t) => !(Array.isArray(e) ? e : []).some((e) => e.value === t.value)), ...e];
 	}
-}, A = {
-	name: "pkt-combobox",
-	react: "PktCombobox",
-	"css-class": "pkt-combobox",
-	isElement: !0,
-	isPureReact: !0,
-	"dark-mode": !0,
-	props: {
-		name: {
-			type: "string",
-			name: "Navn",
-			description: "Navn som brukes i skjema ved innsending",
-			category: "tech"
-		},
-		form: {
-			name: "Skjema",
-			description: "ID-en til skjemaet feltet hører til, når feltet ligger utenfor skjemaet",
-			type: "string",
-			required: !1,
-			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"
-		},
-		inputSize: {
-			name: "Størrelse",
-			description: "Visuell størrelse via input-wrapper. small: kompakt wrapper og felt (42px). xsmall: samme wrapper som small, felt 36px.",
-			attribute: "input-size",
-			type: [
-				"small",
-				"medium",
-				"xsmall"
-			],
-			default: "medium",
-			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: {
-			attribute: "helptextdropdown",
-			type: "string",
-			name: "Utvidet hjelpetekst",
-			description: "Hjelpetekst som vises i en lukket boks man kan åpne",
-			category: "contents"
-		},
-		helptextDropdownButton: {
-			attribute: "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: {
-			attribute: "haserror",
-			type: "boolean",
-			name: "Feil",
-			description: "Feltet har en feil",
-			category: "ui"
-		},
-		errorMessage: {
-			attribute: "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: {
-			attribute: "requiredtag",
-			type: "boolean",
-			name: "Påkrevd-merking",
-			description: "Viser en merking som indikerer at feltet er påkrevd",
-			category: "ui"
-		},
-		requiredText: {
-			attribute: "requiredtext",
-			type: "string",
-			name: "Påkrevd-tekst",
-			description: "Tekst som vises i påkrevd-merkingen",
-			category: "contents"
-		},
-		optionalTag: {
-			attribute: "optionaltag",
-			type: "boolean",
-			name: "Valgfritt-merking",
-			description: "Viser en merking som indikerer at feltet er valgfritt",
-			category: "ui"
-		},
-		optionalText: {
-			attribute: "optionaltext",
-			type: "string",
-			name: "Valgfritt-tekst",
-			description: "Tekst som vises i valgfritt-merkingen",
-			category: "contents"
-		},
-		tagText: {
-			attribute: "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: "IPktComboboxOption[]",
-			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: "IPktComboboxOption[]",
-			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"
-		},
-		inline: {
-			name: "Inline",
-			type: "boolean",
-			required: !1,
-			default: !1,
-			description: "Angir om feltet skal flyte med teksten",
-			category: "ui"
-		},
-		useWrapper: {
-			attribute: "usewrapper",
-			name: "Bruk wrapper",
-			type: "boolean",
-			required: !1,
-			displayAsFalse: !0,
-			default: !0,
-			description: "Indikerer om skjemaelementet skal bruke en wrapper",
-			category: "ui"
-		},
-		hasFieldset: {
-			attribute: "hasfieldset",
-			name: "Bruk fieldset",
-			type: "boolean",
-			required: !1,
-			default: null,
-			description: "Bruk fieldset og legend i stedet for label. Utledes automatisk når feltet ikke har en input.",
-			category: "ui"
-		},
-		counter: {
-			name: "Teller",
-			type: "boolean",
-			required: !1,
-			default: null,
-			description: "Viser teller under feltet. Slås på av seg selv når det finnes en grense å telle mot; sett til false for å skru den av.",
-			category: "ui"
-		},
-		defaultValue: {
-			attribute: "defaultvalue",
-			type: "string | string[]",
-			name: "Standardverdi",
-			description: "Verdien feltet får ved oppstart og ved nullstilling av skjemaet",
-			category: "functionality"
-		}
-	},
-	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"
-		}
-	}
 }, j = class extends b {
 	constructor() {
-		super(), this.value = "", this.options = [], this.defaultOptions = [], this.allowUserInput = !1, this.typeahead = !1, this.includeSearch = !1, this.searchPlaceholder = null, this.multiple = !1, this.maxlength = null, this.displayValueAs = A.props.displayValueAs.default, this.tagPlacement = null, this.isOpen = !1, this._options = [], this._value = [], this._isOptionsOpen = !1, this._userInfoMessage = "", this._messageValue = null, this._addValueText = null, this._maxIsReached = !1, this._search = "", this._inputFocus = !1, this._skipInputTab = !1, this._optionsFromSlot = !1, this._lastSlotGeneration = 0, this._suppressNextOpen = !1, this.inputRef = d(), this.triggerRef = d(), this.listboxRef = d(), this._pendingDispatchFrom = null, this.optionsController = new x(this);
+		super(), this.value = "", this.options = [], this.defaultOptions = [], this.allowUserInput = C.allowUserInput, this.typeahead = C.typeahead, this.includeSearch = C.includeSearch, this.searchPlaceholder = null, this.multiple = C.multiple, this.maxlength = null, this.displayValueAs = C.displayValueAs, this.tagPlacement = null, this.isOpen = !1, this._options = [], this._value = [], this._isOptionsOpen = !1, this._userInfoMessage = "", this._messageValue = null, this._addValueText = null, this._maxIsReached = !1, this._search = "", this._inputFocus = !1, this._skipInputTab = !1, this._optionsFromSlot = !1, this._lastSlotGeneration = 0, this._suppressNextOpen = !1, this.inputRef = d(), this.triggerRef = d(), this.listboxRef = d(), this._pendingDispatchFrom = null, this.optionsController = new x(this);
 	}
 	get _hasTextInput() {
 		return this.typeahead || this.allowUserInput;
@@ -576,7 +200,7 @@ var M = class extends j {
 		if (this.isDisabled) return;
 		this.touched = !0, this._userInfoMessage = "", this._addValueText = null;
 		let t = h(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 = g(this._value.length, this.maxlength), l = !1, u = !0, d = "", f = null, p = "";
-		i || (!r && this.allowUserInput && !a ? (this.addNewUserValue(e), d = "valueAdded", l = s) : !r && !this.allowUserInput ? (o && this._value[0] && this.removeValue(this._value[0]), u = !1, l = !0, d = "noResults") : 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, d = "valueSelected", f = this._hasTextInput ? E(t || "", this.options, this.displayValueAs) : y(h(this.options, t), this.displayValueAs)) : s && !c ? (this.setSelected(t), l = !0) : s && c ? (d = "maxSelected", u = !1, p = e) : (o && this.removeAllSelected(), d = "noValidValue", u = !1, l = !0, p = e), this._isOptionsOpen = l, l || window.setTimeout(() => {
+		i || (!r && this.allowUserInput && !a ? (this.addNewUserValue(e), d = "valueAdded", l = s) : !r && !this.allowUserInput ? (o && this._value[0] && this.removeValue(this._value[0]), u = !1, l = !0, d = "noResults") : 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, d = "valueSelected", f = this._hasTextInput ? D(t || "", this.options, this.displayValueAs) : y(h(this.options, t), this.displayValueAs)) : s && !c ? (this.setSelected(t), l = !0) : s && c ? (d = "maxSelected", u = !1, p = e) : (o && this.removeAllSelected(), d = "noValidValue", u = !1, l = !0, p = e), this._isOptionsOpen = l, l || window.setTimeout(() => {
 			this.focusAfterCommit();
 		}, 0), this._search = p || "", this.resetComboboxInput(u), this._userInfoMessage = d, this._messageValue = f, s && this.updateMaxReached());
 	}
@@ -586,14 +210,14 @@ var M = class extends j {
 				this._userInfoMessage = "maxSelected";
 				return;
 			}
-			!this.multiple && this.removeAllSelected(), this._value = e ? [...this._value, e] : this._value, D.markOptionSelected(this._options, e), this.resetComboboxInput(!0);
+			!this.multiple && this.removeAllSelected(), this._value = e ? [...this._value, e] : this._value, O.markOptionSelected(this._options, e), this.resetComboboxInput(!0);
 		}
 	}
 	removeSelected(e) {
 		if (!e) return;
 		this._value = this._value.filter((t) => t !== e);
 		let t = h(this.options, e);
-		t && (D.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.refreshOptionsFromValue() : this._options = [...this._options, t]);
+		t && (O.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.refreshOptionsFromValue() : this._options = [...this._options, t]);
 	}
 	addAllOptions() {
 		if (this.multiple) {
@@ -601,11 +225,11 @@ var M = class extends j {
 				this._userInfoMessage = "tooManySelected";
 				return;
 			}
-			this._value = this._options.map((e) => e.value), D.markAllSelected(this._options), this.requestUpdate();
+			this._value = this._options.map((e) => e.value), O.markAllSelected(this._options), this.requestUpdate();
 		}
 	}
 	removeAllSelected() {
-		this._value = [], D.markAllDeselected(this._options), this._options = D.removeUserAddedOptions(this._options), this.requestUpdate();
+		this._value = [], O.markAllDeselected(this._options), this._options = O.removeUserAddedOptions(this._options), this.requestUpdate();
 	}
 	addValue() {
 		let e = this.inputRef.value?.value.trim() || "";
@@ -636,11 +260,11 @@ var M = class extends j {
 		}, 0)), this.requestUpdate();
 	}
 	refreshOptionsFromValue() {
-		let e = k.cloneOptions(this.options);
-		e.forEach((e) => e.selected = this._value.includes(e.value)), this._options = k.syncOptionsWithValues(e, this._value).options;
+		let e = A.cloneOptions(this.options);
+		e.forEach((e) => e.selected = this._value.includes(e.value)), this._options = A.syncOptionsWithValues(e, this._value).options;
 	}
 	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] ? E(this._value[0], this.options, this.displayValueAs) : "", this._userInfoMessage = "")), this.refreshOptionsFromValue();
+		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] ? D(this._value[0], this.options, this.displayValueAs) : "", this._userInfoMessage = "")), this.refreshOptionsFromValue();
 	}
 	removeLastValue(e) {
 		if (this._value.length === 0) return;
@@ -666,7 +290,7 @@ var M = class extends j {
 				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 = E(this._value[0], this.options, this.displayValueAs)), this._inputFocus = !0, this._search = "", this.refreshOptionsFromValue(), this._isOptionsOpen = !0, this.onFocus(), this.requestUpdate();
+			!this.multiple && this._value[0] && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = D(this._value[0], this.options, this.displayValueAs)), this._inputFocus = !0, this._search = "", this.refreshOptionsFromValue(), this._isOptionsOpen = !0, this.onFocus(), this.requestUpdate();
 		}
 	}
 	handleCloseOptions() {
@@ -687,7 +311,7 @@ var M = class extends j {
 					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 } = w(e, this._value, this.options, this.allowUserInput, this.multiple);
+				let { action: t, value: n } = T(e, this._value, this.options, this.allowUserInput, this.multiple);
 				switch (t) {
 					case "addUserValue":
 						this.addNewUserValue(n);
@@ -698,7 +322,7 @@ var M = class extends j {
 					case "removeValue": this.removeValue(n);
 				}
 			}
-			!this.multiple && this._value[0] ? this.inputRef.value.value = E(this._value[0], this.options, this.displayValueAs) : this.inputRef.value.value = "";
+			!this.multiple && this._value[0] ? this.inputRef.value.value = D(this._value[0], this.options, this.displayValueAs) : this.inputRef.value.value = "";
 		}
 		this._isOptionsOpen = !1, this.onBlur();
 	}
@@ -756,7 +380,7 @@ var M = class extends j {
 				return;
 			}
 		}
-		let t = C(e.key, e.shiftKey, this.multiple);
+		let t = w(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();
@@ -817,7 +441,7 @@ var M = class extends j {
 		}
 	}
 	checkForMatches() {
-		let e = T(this.inputRef.value?.value || this._search || "", this._value, this.options, this.allowUserInput, this.multiple);
+		let e = E(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;
@@ -833,10 +457,10 @@ var M = class extends j {
 	connectedCallback() {
 		if (super.connectedCallback(), document?.body.addEventListener("click", this.handleBodyClick), this._options = [], this.defaultOptions && this.defaultOptions.length) {
 			let e = this.options?.filter((e) => e.userAdded) || [];
-			this.options = [...e, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = k.cloneOptions(this.options);
+			this.options = [...e, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = A.cloneOptions(this.options);
 		}
 		if (this.optionsController?.nodes && this.optionsController.nodes.length) {
-			let e = O.parseOptionsFromSlot(this.optionsController.nodes);
+			let e = k.parseOptionsFromSlot(this.optionsController.nodes);
 			e.length && (this.options = [...e], this._options = [...e], this._optionsFromSlot = !0, this._lastSlotGeneration = this.optionsController.generation);
 		}
 	}
@@ -851,13 +475,13 @@ var M = class extends j {
 			let e = this.optionsController.generation;
 			if (e !== this._lastSlotGeneration) {
 				this._lastSlotGeneration = e;
-				let t = O.parseOptionsFromSlot(this.optionsController.nodes), n = this._options.filter((e) => e.userAdded);
+				let t = k.parseOptionsFromSlot(this.optionsController.nodes), n = this._options.filter((e) => e.userAdded);
 				this.options = [...n, ...t];
 			}
 		}
 		if (super.willUpdate(e), e.has("isOpen") && (this._isOptionsOpen = this.isOpen), e.has("defaultOptions") && this.defaultOptions.length) {
 			let e = (Array.isArray(this.options) ? this.options : []).filter((e) => e.userAdded) || [];
-			this.options = [...e, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = k.cloneOptions(this.options);
+			this.options = [...e, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = A.cloneOptions(this.options);
 		}
 		let t = e.has("value"), n = e.has("_value");
 		if (t) {
@@ -869,9 +493,9 @@ var M = class extends j {
 			e.length && (this._pendingDispatchFrom ??= [...this._value], this._value = e, this._options.forEach((t) => t.selected = e.includes(t.value)), this._options = [...this._options]);
 		}
 		if (e.has("options")) {
-			let t = e.get("options") || this._options || [], n = k.mergeWithUserAdded(k.cloneOptions(this.options), t, this._value);
+			let t = e.get("options") || this._options || [], n = A.mergeWithUserAdded(A.cloneOptions(this.options), t, this._value);
 			this._options = n, n.length > this.options.length && (this.options = n);
-			let r = k.syncOptionsWithValues(this._options, this._value);
+			let r = A.syncOptionsWithValues(this._options, this._value);
 			this._options = r.options, r.newValues.length > this._value.length && (this._pendingDispatchFrom ??= [...this._value], this._value = r.newValues);
 		}
 		(t || n || e.has("options") || e.has("defaultValue")) && this.updateMaxReached(), this._pendingDispatchFrom && this.syncPublicValue();
@@ -885,7 +509,7 @@ var M = class extends j {
 			detail: this._search,
 			bubbles: !1
 		})), !this._isOptionsOpen && this._hasTextInput && this.inputRef.value && this.inputRef.value.type !== "hidden") {
-			let e = !this.multiple && this._value[0] ? E(this._value[0], this.options, this.displayValueAs) : "";
+			let e = !this.multiple && this._value[0] ? D(this._value[0], this.options, this.displayValueAs) : "";
 			this.inputRef.value.value !== e && (this.inputRef.value.value = e);
 		}
 		this.classList.add("pkt-combobox-component"), this.classList.toggle("pkt-combobox-component--fullwidth", !!this.fullwidth), super.updated(e);
@@ -903,8 +527,8 @@ var M = class extends j {
 	}
 	attributeChangedCallback(e, t, n) {
 		if (e === "options") {
-			this._options = k.cloneOptions(this.options);
-			let e = k.syncOptionsWithValues(this._options, this._value);
+			this._options = A.cloneOptions(this.options);
+			let e = A.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);

package/dist/components/combobox/combobox-base.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'lit/directives/ref.js';
 import { PktInputElement } from '../../base-elements/input-element';
-import { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types';
+import { IPktComboboxOption, TPktComboboxDisplayValue, TPktComboboxTagPlacement } from './combobox-types';
 import { IPktStringsProps } from '../../shared-strings';
 import { default as PktListbox } from '../listbox';
 import { TComboboxMessageKey } from '../../shared-utils/combobox';
@@ -19,7 +19,7 @@ export declare class ComboboxBase extends PktInputElement<IPktStringsProps<'comb
     searchPlaceholder: string | null;
     multiple: boolean;
     maxlength: number | null;
-    displayValueAs: string;
+    displayValueAs: TPktComboboxDisplayValue;
     tagPlacement: TPktComboboxTagPlacement | null;
     isOpen: boolean;
     _options: IPktComboboxOption[];