@oslokommune/punkt-elements 20.1.0 → 20.1.3

package/dist/{datepicker-DHdFA8Dx.js → datepicker-D60fq9D5.js}

@@ -1,346 +1,76 @@
-import { _ as e, d as t, h as n, l as r, n as i, s as a, t as o, u as s } from "./element-Bwc-likm.js";
-import { a as c, c as l, d as u, h as d, i as f, m as ee, n as p, r as m, s as h, t as g, u as _ } from "./converters-v_GK06o3.js";
-import { t as te } from "./input-element-DE0FzjgP.js";
-import { n as v, t as y } from "./ref-qE1RBrI7.js";
-import "./calendar-CkAAgviq.js";
+import { _ as e, d as t, h as n, l as r, n as i, t as a, u as o } from "./element-Bwc-likm.js";
+import { t as s } from "./class-map-C9n5CNC8.js";
+import { n as c } from "./element-with-slot-47quDZRt.js";
+import "./shared-types-BvRk9kiK.js";
 import "./icon-CZDw42U7.js";
-import "./input-wrapper-DYg1VHPv.js";
-import { t as b } from "./class-map-C9n5CNC8.js";
-import { t as x } from "./repeat-c2P6osbb.js";
+import "./input-wrapper-BBUcHEKx.js";
 import "./tag-HXcXopyA.js";
-import { n as S, t as C } from "./utils-Dn5ykFtS.js";
-import { t as w } from "./if-defined-B3pYog2C.js";
-import { n as T } from "./element-with-slot-47quDZRt.js";
-// src/components/datepicker/date-tags.ts
-var E = class extends o {
+import { i as l, r as u } from "./calendar-T_iFl5mR.js";
+import { t as d } from "./if-defined-B3pYog2C.js";
+import { n as f, t as p } from "./ref-qE1RBrI7.js";
+import { a as ee, c as m, d as h, h as g, i as _, m as v, n as y, r as b, s as x, t as S, u as te } from "./converters-v_GK06o3.js";
+import { t as ne } from "./repeat-c2P6osbb.js";
+import { t as re } from "./utils-BtXhdgpe.js";
+import { t as ie } from "./input-element-DsWlt-6T.js";
+// ../../shared-types/datepicker.ts
+var C = {
+	dateformat: "dd.MM.yyyy",
+	multiple: !1,
+	range: !1,
+	showRangeLabels: !1,
+	weeknumbers: !1,
+	withcontrols: !1,
+	calendarOpen: !1,
+	required: !1,
+	requiredTag: !1,
+	optionalTag: !1,
+	hasError: !1,
+	disabled: !1,
+	inline: !1,
+	fullwidth: !1,
+	useWrapper: !0,
+	inputSize: "medium"
+}, w = class extends a {
 	constructor(...e) {
-		super(...e), this.dates = [], this.dateformat = "dd.MM.yyyy", this.className = "pkt-datepicker__tags", this.idBase = S();
+		super(...e), this.dates = [], this.dateformat = "dd.MM.yyyy", this.className = "pkt-datepicker__tags", this.idBase = re();
 	}
 	render() {
 		return this.classes = {
 			"pkt-date-tags": !0,
 			[this.className]: !0
 		}, e`
-      <div class=${b(this.classes)} aria-live="polite">
-        ${Array.isArray(this.dates) && this.dates[0] ? x(d((this.dates ?? []).filter(Boolean)), (e) => e, (t) => e` <pkt-tag
+      <div class=${s(this.classes)} aria-live="polite">
+        ${Array.isArray(this.dates) && this.dates[0] ? ne(g((this.dates ?? []).filter(Boolean)), (e) => e, (t) => e` <pkt-tag
                   id=${this.idBase + t + "-tag"}
                   closeTag
                   @close=${() => {
 			this.dispatchEvent(new CustomEvent("date-tag-removed", { detail: t }));
 		}}
-                  .ariaLabel=${`${this.pktStrings.get("datepicker").deleteDate} ${l(t, this.dateformat)}`}
+                  .ariaLabel=${`${this.pktStrings.get("datepicker").deleteDate} ${m(t, this.dateformat)}`}
                 >
-                  <time datetime=${t}>${l(t, this.dateformat)}</time>
+                  <time datetime=${t}>${m(t, this.dateformat)}</time>
                 </pkt-tag>`) : n}
       </div>
     `;
 	}
 };
-i([s({ type: Array })], E.prototype, "dates", void 0), i([s({ type: String })], E.prototype, "dateformat", void 0), i([s({
+i([o({ type: Array })], w.prototype, "dates", void 0), i([o({ type: String })], w.prototype, "dateformat", void 0), i([o({
 	type: String,
 	attribute: "class"
-})], E.prototype, "className", void 0), i([s({
+})], w.prototype, "className", void 0), i([o({
 	type: String,
 	attribute: "id-base"
-})], E.prototype, "idBase", void 0);
+})], w.prototype, "idBase", void 0);
 try {
-	t("pkt-date-tags")(E);
+	t("pkt-date-tags")(w);
 } catch {
 	console.warn("Forsøker å definere <pkt-date-tags>, men den er allerede definert");
 }
-var D = {
-	name: "pkt-datepicker",
-	react: "PktDatepicker",
-	"css-class": "pkt-datepicker",
-	isElement: !0,
-	isPureReact: !0,
-	"dark-mode": !0,
-	props: {
-		name: {
-			type: "string",
-			name: "Navn for 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"
-		},
-		label: {
-			type: "string",
-			name: "Tekst/label",
-			category: "contents"
-		},
-		helptext: {
-			type: "string",
-			name: "Hjelpetekst",
-			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 utvidet hjelpetekst",
-			default: "Les mer",
-			category: "contents"
-		},
-		dateformat: {
-			name: "Datoformat for tags i flervalg",
-			type: "string",
-			default: "dd.MM.yyyy",
-			category: "tech"
-		},
-		currentmonth: {
-			name: "Måned som vises i datovelgeren",
-			type: "ISOdatestring",
-			category: "tech"
-		},
-		value: {
-			name: "Verdi (kommaseparert ved flervalg)",
-			type: "ISOdatestring",
-			variant: "multiple",
-			category: "tech"
-		},
-		excludeweekdays: {
-			name: "Utelat ukedager",
-			type: "string",
-			description: "Kommaseparert liste over ukedager (1-7) som skal ekskluderes",
-			category: "functionality"
-		},
-		excludedates: {
-			name: "Utelat datoer (Kommaseparerte ISO-datoer)",
-			type: "ISOdatestring",
-			variant: "multiple",
-			category: "functionality"
-		},
-		min: {
-			name: "Tidligst tillatte dato",
-			type: "ISOdatestring",
-			default: null,
-			category: "functionality"
-		},
-		max: {
-			name: "Senest tillatte dato",
-			type: "ISOdatestring",
-			default: null,
-			category: "functionality"
-		},
-		weeknumbers: {
-			name: "Vis ukenummer",
-			type: "boolean",
-			reflect: !0,
-			default: !1,
-			category: "ui"
-		},
-		withcontrols: {
-			name: "Med velgere for måned/år",
-			type: "boolean",
-			reflect: !0,
-			default: !1,
-			category: "ui"
-		},
-		multiple: {
-			name: "Flervalg",
-			type: "boolean",
-			reflect: !0,
-			default: !1,
-			category: "functionality",
-			exclusiveGroup: "selectionMode"
-		},
-		maxlength: {
-			name: "Maks antall datoer i flervalg",
-			type: "number",
-			category: "functionality",
-			showIf: { multiple: !0 }
-		},
-		range: {
-			name: "Datotidsrom (fra og til)",
-			type: "boolean",
-			reflect: !0,
-			default: !1,
-			category: "functionality",
-			exclusiveGroup: "selectionMode"
-		},
-		showRangeLabels: {
-			attribute: "show-range-labels",
-			name: "Vis fra/til-etiketter",
-			type: "boolean",
-			default: !1,
-			category: "ui",
-			showIf: { range: !0 }
-		},
-		today: {
-			name: "Dagens dato (overstyring)",
-			type: "ISOdatestring",
-			description: "ISO-datostreng som overstyrer dagens dato i kalenderen. Nyttig for snapshot-tester.",
-			category: "tech"
-		},
-		calendarOpen: {
-			attribute: "calendar-open",
-			name: "Kalender åpen",
-			type: "boolean",
-			reflect: !0,
-			default: !1,
-			category: "ui"
-		},
-		hasError: {
-			type: "boolean",
-			name: "Feil",
-			default: !1,
-			category: "ui"
-		},
-		errorMessage: {
-			type: "string",
-			name: "Feilmelding ved feil",
-			category: "contents"
-		},
-		disabled: {
-			type: "boolean",
-			name: "Deaktivert",
-			default: !1,
-			reflect: !0,
-			category: "tech"
-		},
-		fullwidth: {
-			type: "boolean",
-			name: "Full bredde",
-			default: !1,
-			reflect: !0,
-			category: "ui"
-		},
-		inputSize: {
-			attribute: "input-size",
-			name: "Størrelse",
-			description: "Størrelsen på komponenten",
-			type: [
-				"medium",
-				"small",
-				"xsmall"
-			],
-			default: "medium",
-			category: "ui"
-		},
-		required: {
-			type: "boolean",
-			name: "Påkrevd",
-			default: !1,
-			reflect: !0,
-			category: "tech"
-		},
-		requiredTag: {
-			type: "boolean",
-			name: "Vise påkrevd-merking",
-			default: !1,
-			category: "ui"
-		},
-		requiredText: {
-			type: "string",
-			name: "Påkrevd-tekst",
-			default: "Må fylles ut",
-			category: "contents"
-		},
-		optionalTag: {
-			type: "boolean",
-			name: "Vise valgfritt-merking",
-			default: !1,
-			category: "ui"
-		},
-		optionalText: {
-			type: "string",
-			name: "Valgfritt-tekst",
-			default: "Valgfritt",
-			category: "contents"
-		},
-		tagText: {
-			type: "string",
-			name: "Tag-tekst",
-			description: "Tekst som vises i en tag ved siden av label",
-			category: "ui"
-		},
-		useWrapper: {
-			type: "boolean",
-			name: "Bruk wrapper",
-			description: "Indikerer at feltet skal ha synlig label og hjelpetekst",
-			displayAsFalse: !0,
-			default: !0,
-			category: "ui"
-		},
-		id: {
-			type: "string",
-			name: "ID",
-			description: "Unik identifikasjon for datovelgeren",
-			category: "tech"
-		},
-		ariaDescribedby: {
-			attribute: "aria-describedby",
-			name: "aria-describedby",
-			description: "Spesifiserer ID-en til elementet som beskriver feltet.",
-			type: "string",
-			category: "accessibility"
-		},
-		inline: {
-			name: "Inline",
-			type: "boolean",
-			required: !1,
-			default: !1,
-			description: "Angir om feltet skal flyte med teksten",
-			category: "ui"
-		},
-		hasFieldset: {
-			name: "Bruk fieldset",
-			type: "boolean",
-			required: !1,
-			default: null,
-			description: "Bruk fieldset og legend i stedet for label. Utledes automatisk når feltet består av flere kontroller.",
-			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"
-		}
-	},
-	events: {
-		change: {
-			type: "Event",
-			name: "change (Elements)",
-			description: "Returnerer valgt dato som streng i ISO-format. I range-modus utløses kun når begge datoer er valgt."
-		},
-		"value-change": {
-			type: "CustomEvent",
-			name: "value-change (Elements)",
-			description: "Returnerer en <code>array</code> med valgte datoer i ISO-format. I range-modus utløses kun når begge datoer er valgt."
-		},
-		toggleHelpText: {
-			type: "CustomEvent",
-			description: "Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes"
-		},
-		onChange: {
-			type: "Event",
-			name: "onChange (React)",
-			reactOnly: !0,
-			description: "Utløses når en dato velges. <code>e.target.value</code> inneholder kommaseparerte ISO-datoer. I range-modus utløses kun når begge datoer er valgt."
-		},
-		onValueChange: {
-			type: "string[]",
-			name: "onValueChange (React)",
-			reactOnly: !0,
-			description: "Returnerer en <code>string[]</code> med valgte datoer i ISO-format. I range-modus utløses kun når begge datoer er valgt."
-		}
-	}
-}, O = () => {
+// ../../shared-utils/device-utils.ts
+var T = () => {
 	let e = navigator.userAgent;
 	return !!(/iP(hone|od|ad)/.test(e) || /Macintosh/.test(e) && "ontouchend" in document);
-}, k = () => O() ? "text" : "date", A = (e) => !e || e.length !== 2 || _(e[0], e[1]), j = (e) => d(e), M = (e, t, n, r, i) => f(e, t, n, r, i), N = (e, t, n, r, i, a, o = "medium") => ({
+}, E = () => T() ? "text" : "date", D = (e) => !e || e.length !== 2 || te(e[0], e[1]), O = (e) => g(e), k = (e, t, n, r, i) => _(e, t, n, r, i), A = (e, t, n, r, i, a, o = "medium") => ({
 	"pkt-input": !0,
 	"pkt-datepicker__input": !0,
 	[`pkt-input--${o}`]: !0,
@@ -349,20 +79,28 @@ var D = {
 	"pkt-datepicker--multiple": n,
 	"pkt-datepicker--range": r,
 	"ios-readonly-hack": i === !1 && a === "text"
-}), P = (e = "medium") => ({
+}), ae = (e = "medium") => ({
 	"pkt-input-icon": !0,
 	"pkt-btn": !0,
 	"pkt-btn--icon-only": !0,
 	"pkt-btn--tertiary": !0,
 	[`pkt-btn--${e}`]: !0,
 	"pkt-datepicker__calendar-button": !0
-}), F = (e) => ({
+}), j = (e, t, n) => e ?? (t && !!n && n > 0), M = (e, t) => !!e && e > 0 && t >= e, N = (e, t, n = [], r = []) => {
+	if (!t || e.length !== 1 || e[0] > t) return e;
+	let [i, a] = u([e[0], t]);
+	return l(a, [i], u(n), r) ? [e[0], t] : e;
+}, P = (e, t) => e ? t && t >= e ? [e, t] : [e] : [], F = (e) => ({
 	"pkt-input-prefix": e,
 	"pkt-hide": !e
 }), I = (e, t, n) => !t && !n ? Array.isArray(e) ? e[0] || "" : e : Array.isArray(e) ? e.join(",") : e, L = (e, t, n = !1) => {
 	if (!e || !t) return;
-	let r = t.parentElement?.getBoundingClientRect() || t.getBoundingClientRect(), i = n ? r.height + 30 : r.height, a = e.getBoundingClientRect().height, o = n ? "calc(100% - 30px)" : "100%";
-	r && typeof window < "u" && r.top + a > window.innerHeight && r.top - a > 0 && (o = `calc(100% - ${i}px - ${a}px)`), e.style.top = o;
+	let r = t.parentElement?.getBoundingClientRect() || t.getBoundingClientRect(), i = n ? r.height + 30 : r.height, a = e.getBoundingClientRect().height, o = e instanceof Element && parseFloat(getComputedStyle(e).marginTop) || 0, s = n ? "calc(100% - 30px)" : "100%";
+	if (typeof window < "u") {
+		let e = r.top + r.height + o + a <= window.innerHeight, t = r.top - o - a >= 0;
+		!e && t && (s = `calc(100% - ${i}px - ${a}px - ${2 * o}px)`);
+	}
+	e.style.top = s;
 }, R = (e, t, n, r, i, a) => {
 	let { key: o } = e;
 	o === "," && (e.preventDefault(), a ? a(e) : i && i()), (o === "Space" || o === " ") && (e.preventDefault(), t(e)), o === "Enter" && (e.preventDefault(), n ? n() : r ? r() : i && i());
@@ -370,10 +108,10 @@ var D = {
 	let { key: n } = e;
 	(n === "Enter" || n === " " || n === "Space") && (e.preventDefault(), t(e));
 }, B = {
-	validateRangeOrder: A,
-	sortDates: j,
-	filterSelectableDates: M
-}, V = { getInputType: k }, H = {
+	validateRangeOrder: D,
+	sortDates: O,
+	filterSelectableDates: k
+}, V = { getInputType: E }, H = {
 	submitForm(e) {
 		let t = e.internals?.form;
 		t && t.requestSubmit();
@@ -381,49 +119,32 @@ var D = {
 	submitFormOrFallback(e, t) {
 		let n = e?.form;
 		n ? n.requestSubmit() : t();
-	},
-	validateDateInput(e, t, n, r, i) {
-		let o = e.value;
-		if (!o) return;
-		let s = {
-			...a.validation,
-			...i
-		};
-		n && n > o ? t.setValidity({ rangeUnderflow: !0 }, s.dateUnderflow, e) : r && r < o && t.setValidity({ rangeOverflow: !0 }, s.dateOverflow, e);
 	}
 }, U = {
 	addToSelected(e, t, n, r) {
 		let i = e.target;
 		if (!i.value) return;
-		let a = n ? u(n) : null, o = r ? u(r) : null, s = u(i.value.split(",")[0]);
+		let a = n ? h(n) : null, o = r ? h(r) : null, s = h(i.value.split(",")[0]);
 		s && !isNaN(s.getTime()) && (!a || s >= a) && (!o || s <= o) && t.value && t.value.handleDateSelect(s), i.value = "";
 	},
 	handleCalendarPosition(e, t, n = !1) {
 		L(e.value ?? null, t.value ?? null, n);
 	}
 }, W = {
-	getInputClasses: N,
-	getButtonClasses: P,
+	getInputClasses: A,
+	getButtonClasses: ae,
 	getRangeLabelClasses: F
 }, G = {
 	processDateSelection: I,
 	updateInputValues(e, t, n, r, i, a) {
 		e.value && (r && t?.value ? (e.value.value = n[0] ?? "", t.value.value = n[1] ?? "", a(e.value), a(t.value)) : i || (e.value.value = n.length ? n[0] : "", a(e.value)));
-	},
-	processRangeBlur(e, t, n, r, i) {
-		let a = e.target;
-		if (a.value) {
-			i(a);
-			let e = h(a.value);
-			e && n?.value?.handleDateSelect(e);
-		} else t[0] && r();
 	}
 }, K = {
 	handleInputKeydown: R,
 	handleButtonKeydown: z
-}, q = class extends o {
+}, q = class extends a {
 	constructor(...e) {
-		super(...e), this.open = !1, this.multiple = !1, this.range = !1, this.weeknumbers = !1, this.withcontrols = !1, this.maxMultiple = null, this.selected = [], this.earliest = null, this.latest = null, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.today = null, this._hasBeenOpened = !1, this.popupRef = y(), this.calendarRef = y(), this.handleDocumentClick = (e) => {
+		super(...e), this.open = !1, this.multiple = !1, this.range = !1, this.weeknumbers = !1, this.withcontrols = !1, this.maxMultiple = null, this.selected = [], this.earliest = null, this.latest = null, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.today = null, this._hasBeenOpened = !1, this.popupRef = p(), this.calendarRef = p(), this.handleDocumentClick = (e) => {
 			if (!this.open) return;
 			let t = e.composedPath(), n = this.parentElement, r = this.popupRef.value;
 			t.includes(this) || t.includes(r) || n && t.includes(n) || (this.hide(), this.dispatchEvent(new CustomEvent("close", {
@@ -437,9 +158,6 @@ var D = {
 			})));
 		};
 	}
-	firstUpdated() {
-		this.calRef = this.calendarRef;
-	}
 	willUpdate(e) {
 		super.willUpdate(e), e.has("open") && this.open && (this._hasBeenOpened = !0);
 	}
@@ -469,13 +187,13 @@ var D = {
 		if (this.calendarRef.value && typeof U.addToSelected == "function") return U.addToSelected(e, this.calendarRef, t, n);
 		let r = e.target;
 		if (!r.value) return;
-		let i = t ? u(t) : null, a = n ? u(n) : null, o = u(r.value.split(",")[0]);
+		let i = t ? h(t) : null, a = n ? h(n) : null, o = h(r.value.split(",")[0]);
 		o && !isNaN(o.getTime()) && (!i || o >= i) && (!a || o <= a) && this.handleDateSelect(o), r.value = "";
 	}
 	handleDateSelect(e) {
 		let t = this.calendarRef.value;
 		if (t && typeof t.handleDateSelect == "function") return t.handleDateSelect(e);
-		let n = c(e), r = this.selected.indexOf(n) >= 0 ? this.selected.filter((e) => e !== n) : [...this.selected, n];
+		let n = ee(e), r = this.selected.indexOf(n) >= 0 ? this.selected.filter((e) => e !== n) : [...this.selected, n];
 		this.selected = r, this.dispatchEvent(new CustomEvent("date-selected", {
 			detail: r,
 			bubbles: !0,
@@ -490,14 +208,14 @@ var D = {
 		};
 		return e`
       <div
-        class="${b(t)}"
-        ${v(this.popupRef)}
+        class="${s(t)}"
+        ${f(this.popupRef)}
         id="date-popup"
         ?hidden=${!this.open}
         aria-hidden="${!this.open}"
       >
         ${this.open || this._hasBeenOpened ? e`<pkt-calendar
-              ${v(this.calendarRef)}
+              ${f(this.calendarRef)}
               ?multiple=${this.multiple}
               ?range=${this.range}
               ?weeknumbers=${this.weeknumbers}
@@ -511,14 +229,14 @@ var D = {
               .currentmonth=${this.currentmonth}
               .today=${this.today}
               @date-selected=${(e) => {
-			this.selected = e.detail, this.dispatchEvent(new CustomEvent("date-selected", {
+			e.stopPropagation(), this.selected = e.detail, this.dispatchEvent(new CustomEvent("date-selected", {
 				detail: e.detail,
 				bubbles: !0,
 				composed: !0
 			}));
 		}}
-              @close=${() => {
-			this.hide(), this.dispatchEvent(new CustomEvent("close", {
+              @close=${(e) => {
+			e.stopPropagation(), this.hide(), this.dispatchEvent(new CustomEvent("close", {
 				bubbles: !0,
 				composed: !0
 			}));
@@ -528,19 +246,19 @@ var D = {
     `;
 	}
 };
-i([s({
+i([o({
 	type: Boolean,
 	reflect: !0
-})], q.prototype, "open", void 0), i([s({ type: Boolean })], q.prototype, "multiple", void 0), i([s({ type: Boolean })], q.prototype, "range", void 0), i([s({ type: Boolean })], q.prototype, "weeknumbers", void 0), i([s({ type: Boolean })], q.prototype, "withcontrols", void 0), i([s({ type: Number })], q.prototype, "maxMultiple", void 0), i([s({ type: Array })], q.prototype, "selected", void 0), i([s({ type: String })], q.prototype, "earliest", void 0), i([s({ type: String })], q.prototype, "latest", void 0), i([s({ type: Array })], q.prototype, "excludedates", void 0), i([s({ type: Array })], q.prototype, "excludeweekdays", void 0), i([s({ type: String })], q.prototype, "currentmonth", void 0), i([s({ type: String })], q.prototype, "today", void 0), i([r()], q.prototype, "_hasBeenOpened", void 0);
+})], q.prototype, "open", void 0), i([o({ type: Boolean })], q.prototype, "multiple", void 0), i([o({ type: Boolean })], q.prototype, "range", void 0), i([o({ type: Boolean })], q.prototype, "weeknumbers", void 0), i([o({ type: Boolean })], q.prototype, "withcontrols", void 0), i([o({ type: Number })], q.prototype, "maxMultiple", void 0), i([o({ type: Array })], q.prototype, "selected", void 0), i([o({ type: String })], q.prototype, "earliest", void 0), i([o({ type: String })], q.prototype, "latest", void 0), i([o({ type: Array })], q.prototype, "excludedates", void 0), i([o({ type: Array })], q.prototype, "excludeweekdays", void 0), i([o({ type: String })], q.prototype, "currentmonth", void 0), i([o({ type: String })], q.prototype, "today", void 0), i([r()], q.prototype, "_hasBeenOpened", void 0);
 try {
 	t("pkt-datepicker-popup")(q);
 } catch {
 	console.warn("Forsøker å definere <pkt-datepicker-popup>, men den er allerede definert");
 }
 // src/components/datepicker/datepicker-base.ts
-var J = class extends o {
+var J = class extends a {
 	constructor(...e) {
-		super(...e), this.inputType = "date", this.id = "", this.readonly = !1, this.disabled = !1, this.inputClasses = {}, this.inputSize = "medium", this.hasError = !1, this.hasHelptext = !1, this.inputRef = y(), this.btnRef = y();
+		super(...e), this.inputType = "date", this.id = "", this.readonly = !1, this.disabled = !1, this.inputClasses = {}, this.inputSize = "medium", this.hasError = !1, this.hasHelptext = !1, this.inputRef = p(), this.btnRef = p();
 	}
 	get describedBy() {
 		return this.hasHelptext ? `${this.id}-input-helptext` : void 0;
@@ -594,7 +312,7 @@ var J = class extends o {
 	renderCalendarButton() {
 		return e`
       <button
-        class="${b(W.getButtonClasses(this.inputSize))}"
+        class="${s(W.getButtonClasses(this.inputSize))}"
         type="button"
         @click=${(e) => this.dispatchToggleCalendar(e)}
         @keydown=${(e) => {
@@ -613,7 +331,7 @@ var J = class extends o {
 		return this;
 	}
 };
-i([s({ type: String })], J.prototype, "inputType", void 0), i([s({ type: String })], J.prototype, "id", void 0), i([s({ type: String })], J.prototype, "min", void 0), i([s({ type: String })], J.prototype, "max", void 0), i([s({ type: String })], J.prototype, "placeholder", void 0), i([s({ type: Boolean })], J.prototype, "readonly", void 0), i([s({ type: Boolean })], J.prototype, "disabled", void 0), i([s({ type: Object })], J.prototype, "inputClasses", void 0), i([s({ type: String })], J.prototype, "inputSize", void 0), i([s({ type: Object })], J.prototype, "internals", void 0), i([s({ type: Boolean })], J.prototype, "hasError", void 0), i([s({ type: Boolean })], J.prototype, "hasHelptext", void 0);
+i([o({ type: String })], J.prototype, "inputType", void 0), i([o({ type: String })], J.prototype, "id", void 0), i([o({ type: String })], J.prototype, "min", void 0), i([o({ type: String })], J.prototype, "max", void 0), i([o({ type: String })], J.prototype, "placeholder", void 0), i([o({ type: Boolean })], J.prototype, "readonly", void 0), i([o({ type: Boolean })], J.prototype, "disabled", void 0), i([o({ type: Object })], J.prototype, "inputClasses", void 0), i([o({ type: String })], J.prototype, "inputSize", void 0), i([o({ type: Object })], J.prototype, "internals", void 0), i([o({ type: Boolean })], J.prototype, "hasError", void 0), i([o({ type: Boolean })], J.prototype, "hasHelptext", void 0);
 // src/components/datepicker/datepicker-single.ts
 var Y = class extends J {
 	constructor(...e) {
@@ -630,17 +348,17 @@ var Y = class extends J {
 		return e`
       <div class="pkt-input__container">
         <input
-          class="${b(this.inputClasses)}"
+          class="${s(this.inputClasses)}"
           .type=${this.inputType}
           id="${this.id}-input"
           .value=${this.value}
-          min=${w(this.min)}
-          max=${w(this.max)}
-          placeholder=${w(this.placeholder)}
+          min=${d(this.min)}
+          max=${d(this.max)}
+          placeholder=${d(this.placeholder)}
           ?readonly=${this.isInputReadonly}
-          aria-describedby=${w(this.describedBy)}
+          aria-describedby=${d(this.describedBy)}
           aria-invalid=${this.hasError}
-          aria-errormessage=${w(this.errorMessageId)}
+          aria-errormessage=${d(this.errorMessageId)}
           @click=${(e) => {
 			e.preventDefault(), this.dispatchToggleCalendar(e);
 		}}
@@ -653,7 +371,7 @@ var Y = class extends J {
 			this.dispatchInput(e), e.stopImmediatePropagation();
 		}}
           @focus=${() => {
-			this.dispatchFocus(), O() && this.dispatchToggleCalendar(new Event("focus"));
+			this.dispatchFocus(), T() && this.dispatchToggleCalendar(new Event("focus"));
 		}}
           @blur=${(e) => {
 			this.dispatchBlur(e), this.dispatchManageValidity(e.target), this.dispatchEvent(new CustomEvent("value-change", {
@@ -665,14 +383,14 @@ var Y = class extends J {
           @change=${(e) => {
 			this.dispatchChange(e), e.stopImmediatePropagation();
 		}}
-          ${v(this.inputRef)}
+          ${f(this.inputRef)}
         />
         ${this.renderCalendarButton()}
       </div>
     `;
 	}
 };
-i([s({ type: String })], Y.prototype, "value", void 0);
+i([o({ type: String })], Y.prototype, "value", void 0);
 try {
 	t("pkt-datepicker-single")(Y);
 } catch {
@@ -681,7 +399,7 @@ try {
 // src/components/datepicker/datepicker-range.ts
 var X = class extends J {
 	constructor(...e) {
-		super(...e), this.value = [], this.label = "", this.showRangeLabels = !1, this.inputRefTo = y();
+		super(...e), this.value = [], this.label = "", this.showRangeLabels = !1, this.inputRefTo = p();
 	}
 	get inputElementTo() {
 		return this.inputRefTo.value;
@@ -692,17 +410,17 @@ var X = class extends J {
       <div class="pkt-input__container">
         ${this.showRangeLabels ? e` <div class="pkt-input-prefix">${this.pktStrings.get("generic").from}</div> ` : n}
         <input
-          aria-describedby=${w(this.describedBy)}
+          aria-describedby=${d(this.describedBy)}
           aria-invalid=${this.hasError}
-          aria-errormessage=${w(this.errorMessageId)}
-          class=${b(this.inputClasses)}
+          aria-errormessage=${d(this.errorMessageId)}
+          class=${s(this.inputClasses)}
           .type=${this.inputType}
           id="${this.id}-input"
           aria-label="${this.label} ${this.pktStrings.get("generic").from}"
           .value=${this.value[0] ?? ""}
-          min=${w(this.min)}
-          max=${w(this.max)}
-          placeholder=${w(this.placeholder)}
+          min=${d(this.min)}
+          max=${d(this.max)}
+          placeholder=${d(this.placeholder)}
           ?readonly=${this.isInputReadonly}
           ?disabled=${this.disabled}
           @click=${(e) => {
@@ -716,7 +434,7 @@ var X = class extends J {
 			this.dispatchInput(e), e.stopImmediatePropagation();
 		}}
           @focus=${() => {
-			this.dispatchFocus(), O() && this.dispatchToggleCalendar(new Event("focus"));
+			this.dispatchFocus(), T() && this.dispatchToggleCalendar(new Event("focus"));
 		}}
           @blur=${(e) => {
 			this.dispatchBlur(e), this.dispatchEvent(new CustomEvent("range-blur", {
@@ -732,24 +450,24 @@ var X = class extends J {
           @change=${(e) => {
 			this.dispatchChange(e), e.stopImmediatePropagation();
 		}}
-          ${v(this.inputRef)}
+          ${f(this.inputRef)}
         />
-        <div class="${b(t)}" id="${this.id}-to-label">
+        <div class="${s(t)}" id="${this.id}-to-label">
           ${this.pktStrings.get("generic").to}
         </div>
         ${this.showRangeLabels ? n : e` <div class="pkt-input-separator">–</div> `}
         <input
-          aria-describedby=${w(this.describedBy)}
+          aria-describedby=${d(this.describedBy)}
           aria-invalid=${this.hasError}
-          aria-errormessage=${w(this.errorMessageId)}
-          class=${b(this.inputClasses)}
+          aria-errormessage=${d(this.errorMessageId)}
+          class=${s(this.inputClasses)}
           .type=${this.inputType}
           id="${this.id}-to"
           aria-label="${this.label} ${this.pktStrings.get("generic").to}"
           .value=${this.value[1] ?? ""}
-          min=${w(this.min)}
-          max=${w(this.max)}
-          placeholder=${w(this.placeholder)}
+          min=${d(this.min)}
+          max=${d(this.max)}
+          placeholder=${d(this.placeholder)}
           ?readonly=${this.isInputReadonly}
           ?disabled=${this.disabled}
           @click=${(e) => {
@@ -763,7 +481,7 @@ var X = class extends J {
 			this.dispatchInput(e), e.stopImmediatePropagation();
 		}}
           @focus=${() => {
-			this.dispatchFocus(), O() && this.dispatchToggleCalendar(new Event("focus"));
+			this.dispatchFocus(), T() && this.dispatchToggleCalendar(new Event("focus"));
 		}}
           @blur=${(e) => {
 			this.dispatchBlur(e), this.dispatchEvent(new CustomEvent("range-blur", {
@@ -779,14 +497,14 @@ var X = class extends J {
           @change=${(e) => {
 			this.dispatchChange(e), e.stopImmediatePropagation();
 		}}
-          ${v(this.inputRefTo)}
+          ${f(this.inputRefTo)}
         />
         ${this.renderCalendarButton()}
       </div>
     `;
 	}
 };
-i([s({ type: Array })], X.prototype, "value", void 0), i([s({ type: String })], X.prototype, "label", void 0), i([s({ type: Boolean })], X.prototype, "showRangeLabels", void 0);
+i([o({ type: Array })], X.prototype, "value", void 0), i([o({ type: String })], X.prototype, "label", void 0), i([o({ type: Boolean })], X.prototype, "showRangeLabels", void 0);
 try {
 	t("pkt-datepicker-range")(X);
 } catch {
@@ -798,7 +516,7 @@ var Z = class extends J {
 		super(...e), this.value = [];
 	}
 	get isInputDisabled() {
-		return this.disabled || this.maxlength !== void 0 && this.maxlength !== null && this.value.length >= this.maxlength;
+		return this.disabled || M(this.maxlength, this.value.length);
 	}
 	dispatchAddToSelected(e) {
 		this.dispatchEvent(new CustomEvent("add-to-selected", {
@@ -811,15 +529,15 @@ var Z = class extends J {
 		return e`
       <div class="pkt-input__container">
         <input
-          aria-describedby=${w(this.describedBy)}
+          aria-describedby=${d(this.describedBy)}
           aria-invalid=${this.hasError}
-          aria-errormessage=${w(this.errorMessageId)}
-          class=${b(this.inputClasses)}
+          aria-errormessage=${d(this.errorMessageId)}
+          class=${s(this.inputClasses)}
           .type=${this.inputType}
           id="${this.id}-input"
-          min=${w(this.min)}
-          max=${w(this.max)}
-          placeholder=${w(this.placeholder)}
+          min=${d(this.min)}
+          max=${d(this.max)}
+          placeholder=${d(this.placeholder)}
           ?readonly=${this.isInputReadonly}
           ?disabled=${this.isInputDisabled}
           @click=${(e) => {
@@ -835,32 +553,48 @@ var Z = class extends J {
 			this.dispatchInput(e), e.stopImmediatePropagation();
 		}}
           @focus=${() => {
-			this.dispatchFocus(), O() && this.dispatchToggleCalendar(new Event("focus"));
+			this.dispatchFocus(), T() && this.dispatchToggleCalendar(new Event("focus"));
 		}}
           @keydown=${(e) => K.handleInputKeydown(e, (e) => this.dispatchToggleCalendar(e), () => H.submitFormOrFallback(this.internals, () => this.inputRef.value?.blur()), void 0, void 0, (e) => this.dispatchAddToSelected(e))}
           @change=${(e) => {
 			this.dispatchChange(e), e.stopImmediatePropagation();
 		}}
-          ${v(this.inputRef)}
+          ${f(this.inputRef)}
         />
         ${this.renderCalendarButton()}
       </div>
     `;
 	}
 };
-i([s({ type: Array })], Z.prototype, "value", void 0), i([s({ type: Number })], Z.prototype, "maxlength", void 0);
+i([o({ type: Array })], Z.prototype, "value", void 0), i([o({ type: Number })], Z.prototype, "maxlength", void 0);
 try {
 	t("pkt-datepicker-multiple")(Z);
 } catch {
 	console.warn("Forsøker å definere <pkt-datepicker-multiple>, men den er allerede definert");
 }
-// src/components/datepicker/datepicker.ts
-var Q, $ = class t extends te {
+// ../../shared-utils/forms/focus-within.ts
+var oe = (e, t) => {
+	let n = !1, r = (t) => typeof Node < "u" && t instanceof Node && t.isConnected && e(t);
+	return {
+		focusin(e) {
+			n || r(e) ? n = !0 : (n = !0, t("focus", e));
+		},
+		focusout(e) {
+			r(e) || (n = !1, t("blur", e));
+		},
+		reset() {
+			n = !1;
+		}
+	};
+}, Q, $ = class t extends ie {
 	constructor(...e) {
-		super(...e), this._valueProperty = "", this.datepickerPopupRef = y(), this._value = [], this.label = "Datovelger", this.dateformat = D.props.dateformat.default, this.multiple = D.props.multiple.default, this.maxlength = null, this.range = D.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = D.props.weeknumbers.default, this.withcontrols = D.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.today = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.calRef = y(), this.popupRef = y(), this.singleInputRef = y(), this.rangeInputRef = y(), this.multipleInputRef = y(), this.addToSelected = (e) => {
-			let t = this.datepickerPopupRef.value;
-			return t && typeof t.addToSelected == "function" ? t.addToSelected(e, this.min, this.max) : U.addToSelected(e, this.calRef, this.min, this.max);
-		};
+		super(...e), this._valueProperty = "", this.datepickerPopupRef = p(), this._value = [], this.label = "Datovelger", this.dateformat = C.dateformat, this.multiple = C.multiple, this.maxlength = null, this.range = C.range, this.showRangeLabels = C.showRangeLabels, this.min = null, this.max = null, this.weeknumbers = C.weeknumbers, this.withcontrols = C.withcontrols, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.today = null, this.calendarOpen = C.calendarOpen, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.toWithoutFrom = null, this.editedRangeFields = null, this.focusTracker = oe((e) => this.contains(e), (e, t) => {
+			e === "blur" && this.dropToWithoutFrom(), this.dispatchEvent(new FocusEvent(e, {
+				bubbles: !0,
+				composed: !0,
+				relatedTarget: t
+			}));
+		}), this.lastCalendarSelected = [], this.handleFocusIn = (e) => this.focusTracker.focusin(e.relatedTarget), this.handleFocusOut = (e) => this.focusTracker.focusout(e.relatedTarget), this.popupRef = p(), this.singleInputRef = p(), this.rangeInputRef = p(), this.multipleInputRef = p(), this.addToSelected = (e) => this.datepickerPopupRef.value?.addToSelected(e, this.min, this.max);
 	}
 	get value() {
 		return this._valueProperty;
@@ -872,11 +606,50 @@ var Q, $ = class t extends te {
 	get inputType() {
 		return V.getInputType();
 	}
+	get hasCounter() {
+		return j(this.counter, this.multiple, this.maxlength);
+	}
 	connectedCallback() {
-		super.connectedCallback(), this.timezone && this.timezone !== window.pktTz && (window.pktTz = this.timezone);
+		super.connectedCallback(), this.timezone && this.timezone !== window.pktTz && (window.pktTz = this.timezone), this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback();
+		super.disconnectedCallback(), this.removeEventListener("focusin", this.handleFocusIn), this.removeEventListener("focusout", this.handleFocusOut), this.focusTracker.reset();
+	}
+	get rangeFieldValues() {
+		return this._value[0] ? this._value : ["", this.toWithoutFrom ?? ""];
+	}
+	get calendarSelected() {
+		if (!this.range) return this._value;
+		let [e, t] = this.editedRangeFields ?? this._value, n = P(e, t);
+		return y(n) !== y(this.lastCalendarSelected) && (this.lastCalendarSelected = n), this.lastCalendarSelected;
+	}
+	trackRangeFields() {
+		this.editedRangeFields = [this.currentInputElement?.value ?? "", this.currentInputElementTo?.value ?? ""];
+	}
+	syncRangeFromFields(e) {
+		let t = this.currentInputElement, n = this.currentInputElementTo;
+		if (!t || !n) return;
+		let r = t.value;
+		r && n.value && r > n.value && (n.value = "");
+		let i = n.value;
+		this.toWithoutFrom = r ? null : i || null, this.editedRangeFields = null, e.target instanceof HTMLInputElement && e.target.value && this.manageValidity(e.target), this.value = r ? [r, i].filter(Boolean).join(",") : "";
+	}
+	dropToWithoutFrom() {
+		let e = this.currentInputElementTo;
+		this.range && e && !this.currentInputElement?.value && (e.value = ""), this.toWithoutFrom = null, this.editedRangeFields = null;
+	}
+	formResetCallback() {
+		this.toWithoutFrom = null, this.editedRangeFields = null, super.formResetCallback();
+	}
+	setFormValue(e) {
+		super.setFormValue(this.multiple || this.range ? b(e) : e);
+	}
+	focusField() {
+		this.currentInputElement?.focus();
+	}
+	get focusIsInPopup() {
+		let e = this.datepickerPopupRef.value?.popupRef.value;
+		return !!e && e.contains(document.activeElement);
 	}
 	onInput() {
 		this.dispatchEvent(new Event("input", { bubbles: !0 }));
@@ -885,11 +658,15 @@ var Q, $ = class t extends te {
 		e !== t && (this.value = e ?? "", this.deriveValue(t));
 	}
 	deriveValue(e) {
-		let t = m(this._valueProperty), n = this.multiple && t.length > 1 ? B.filterSelectableDates(t, this.min, this.max, this.excludedates, this.excludeweekdays) : t;
-		this.range && !B.validateRangeOrder(n) ? (this._valueProperty = "", this.getAttribute("value") && this.setAttribute("value", ""), super.valueChanged("", e), this._value = []) : (this._valueProperty = p(n), this.range && n.length === 1 || super.valueChanged(this._valueProperty, e), this._value = n);
+		let t = b(this._valueProperty), n = this.multiple && t.length > 1 ? B.filterSelectableDates(t, this.min, this.max, this.excludedates, this.excludeweekdays) : t;
+		this.range && !B.validateRangeOrder(n) ? (this._valueProperty = "", this.getAttribute("value") && this.setAttribute("value", ""), super.valueChanged("", e), this._value = []) : (this._valueProperty = y(n), this.range && n.length === 1 ? (this.setFormValue(this._valueProperty), this.hasUpdated && this._valueProperty !== e && this.dispatchEvent(new CustomEvent("value-change", {
+			detail: n,
+			bubbles: !0,
+			composed: !0
+		}))) : super.valueChanged(this._valueProperty, e), this._value = n);
 	}
 	attributeChangedCallback(e, t, n) {
-		e === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = m(n || "")), e === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = m(n || "")), super.attributeChangedCallback(e, t, n);
+		e === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = b(n || "")), e === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = b(n || "")), super.attributeChangedCallback(e, t, n);
 	}
 	willUpdate(e) {
 		if (super.willUpdate(e), t.DERIVED_FROM.some((t) => e.has(t))) {
@@ -898,7 +675,7 @@ var Q, $ = class t extends te {
 		}
 	}
 	updated(e) {
-		this.classList.add("pkt-datepicker"), this.classList.toggle("pkt-datepicker--fullwidth", this.fullwidth), this.classList.toggle("pkt-datepicker--medium", this.inputSize === "medium"), this.classList.toggle("pkt-datepicker--small", this.inputSize === "small"), this.classList.toggle("pkt-datepicker--xsmall", this.inputSize === "xsmall"), super.updated(e);
+		this.classList.add("pkt-datepicker"), this.classList.toggle("pkt-datepicker--fullwidth", this.fullwidth), this.classList.toggle("pkt-datepicker--medium", this.inputSize === "medium"), this.classList.toggle("pkt-datepicker--small", this.inputSize === "small"), this.classList.toggle("pkt-datepicker--xsmall", this.inputSize === "xsmall"), super.updated(e), this.calendarOpen && t.POSITIONED_BY.some((t) => e.has(t)) && this.positionOpenCalendar();
 	}
 	get inputRef() {
 		return { value: this.currentInputElement };
@@ -937,10 +714,6 @@ var Q, $ = class t extends te {
         .strings=${this.strings}
         @toggle-calendar=${(e) => this.toggleCalendar(e.detail)}
         @input-change=${() => this.onInput()}
-        @input-focus=${() => this.onFocus()}
-        @input-blur=${(e) => {
-			this.calRef.value?.contains(e.detail.relatedTarget) || this.onBlur();
-		}}
         @manage-validity=${(e) => this.manageValidity(e.detail)}
         @value-change=${(e) => {
 			this.value = e.detail;
@@ -948,14 +721,14 @@ var Q, $ = class t extends te {
         @input-changed=${() => {
 			this.touched = !0;
 		}}
-        ${v(this.singleInputRef)}
+        ${f(this.singleInputRef)}
       ></pkt-datepicker-single>
     `;
 	}
 	renderRangeInput() {
 		return e`
       <pkt-datepicker-range
-        .value=${this._value}
+        .value=${this.rangeFieldValues}
         .inputType=${this.inputType}
         .id=${this.id}
         .label=${this.label}
@@ -972,38 +745,15 @@ var Q, $ = class t extends te {
         .hasHelptext=${!!(this.helptext || this.helptextDropdown || this.hasSlotContent("helptext"))}
         .strings=${this.strings}
         @toggle-calendar=${(e) => this.toggleCalendar(e.detail)}
-        @input-change=${() => this.onInput()}
-        @input-focus=${() => this.onFocus()}
-        @input-blur=${(e) => {
-			this.calRef.value?.contains(e.detail.relatedTarget) || this.onBlur();
-		}}
-        @range-blur=${(e) => {
-			let t = this.currentInputElement, n = this.currentInputElementTo;
-			if (t && n) {
-				let e = t.value, r = n.value;
-				if (e && r && e > r) n.value = "", this._value = [e], this.value = e;
-				else {
-					let t = [e, r].filter(Boolean);
-					t.length > 0 && (t[0] !== this._value[0] || t[1] !== this._value[1]) && (this._value = t, this.value = t.join(","));
-				}
-			}
-			G.processRangeBlur(e.detail.event, e.detail.values, this.calRef, () => this.clearInputValue(), (e) => this.manageValidity(e));
+        @input-change=${() => {
+			this.trackRangeFields(), this.onInput();
 		}}
+        @range-blur=${(e) => this.syncRangeFromFields(e.detail.event)}
         @manage-validity=${(e) => this.manageValidity(e.detail)}
-        @validate-date-input=${(e) => {
-			H.validateDateInput(e.detail, this.internals, this.min, this.max, this.pktStrings.get("validation"));
-		}}
-        @handle-date-select=${(e) => {
-			let t = h(e.detail);
-			if (t) {
-				let e = c(t);
-				this._value[0] !== e && this._value[1] !== e && this.calRef?.value?.handleDateSelect(t);
-			}
-		}}
         @input-changed=${() => {
 			this.touched = !0;
 		}}
-        ${v(this.rangeInputRef)}
+        ${f(this.rangeInputRef)}
       ></pkt-datepicker-range>
     `;
 	}
@@ -1027,15 +777,11 @@ var Q, $ = class t extends te {
         .strings=${this.strings}
         @toggle-calendar=${(e) => this.toggleCalendar(e.detail)}
         @input-change=${() => this.onInput()}
-        @input-focus=${() => this.onFocus()}
-        @input-blur=${(e) => {
-			this.calRef.value?.contains(e.detail.relatedTarget) || this.onBlur();
-		}}
         @add-to-selected=${(e) => this.addToSelected(e.detail)}
         @input-changed=${() => {
 			this.touched = !0;
 		}}
-        ${v(this.multipleInputRef)}
+        ${f(this.multipleInputRef)}
       ></pkt-datepicker-multiple>
     `;
 	}
@@ -1049,31 +795,32 @@ var Q, $ = class t extends te {
         ?weeknumbers=${this.weeknumbers}
         ?withcontrols=${this.withcontrols}
         .maxMultiple=${this.maxlength}
-        .selected=${this._value}
+        .selected=${this.calendarSelected}
         .earliest=${this.min}
         .latest=${this.max}
         .excludedates=${Array.isArray(this.excludedates) ? this.excludedates : this.excludedates.split(",")}
         .excludeweekdays=${this.excludeweekdays}
-        .currentmonth=${this.currentmonth ? ee(this.currentmonth) : null}
+        .currentmonth=${this.currentmonth ? v(this.currentmonth) : null}
         .today=${this.today}
         @date-selected=${(e) => {
-			this.value = G.processDateSelection(e.detail, this.multiple, this.range), this._value = e.detail, G.updateInputValues(this.inputRef, this.inputRefTo, this._value, this.range, this.multiple, (e) => this.manageValidity(e));
+			let t = this.range ? N(e.detail, this._value[0] ? null : this.toWithoutFrom, b(this.excludedates), this.excludeweekdays) : e.detail;
+			this.toWithoutFrom = null, this.editedRangeFields = null, this.value = G.processDateSelection(t, this.multiple, this.range), this._value = t, G.updateInputValues(this.inputRef, this.inputRefTo, this._value, this.range, this.multiple, (e) => this.manageValidity(e)), this.multiple || this.range && this._value.length !== 2 || this.focusField(), t !== e.detail && this.hideCalendar();
 		}}
         @close=${() => {
-			this.onBlur(), this.hideCalendar();
+			this.focusIsInPopup && this.focusField(), this.hideCalendar();
 		}}
-        ${v(this.datepickerPopupRef)}
+        ${f(this.datepickerPopupRef)}
       ></pkt-datepicker-popup>
     `;
 	}
 	render() {
 		return this.inputClasses = W.getInputClasses(this.fullwidth, this.showRangeLabels, this.multiple, this.range, this.readonly, this.inputType, this.inputSize), e`
       <pkt-input-wrapper
-        ${T(this, ["helptext"])}
+        ${c(this, ["helptext"])}
         .strings=${this.strings}
         label="${this.label}"
         forId="${this.id}-input"
-        ?counter=${this.multiple && !!this.maxlength}
+        ?counter=${this.hasCounter}
         .counterCurrent=${this.value ? this._value.length : 0}
         .counterMaxLength=${this.maxlength}
         ?disabled=${this.isDisabled}
@@ -1100,8 +847,8 @@ var Q, $ = class t extends te {
               strings=${this.strings}
               id-base=${this.id}
               @date-tag-removed=${(e) => {
-			let t = this.datepickerPopupRef.value, n = h(e.detail);
-			t && n && typeof t.handleDateSelect == "function" ? t.handleDateSelect(n) : this.calRef.value?.handleDateSelect(n);
+			let t = x(e.detail);
+			t && this.datepickerPopupRef.value?.handleDateSelect(t);
 		}}
             ></pkt-date-tags>` : n}
         <div class="pkt-datepicker__inputs ${this.range ? "pkt-input__range-inputs" : ""}">
@@ -1112,12 +859,15 @@ var Q, $ = class t extends te {
     `;
 	}
 	handleCalendarPosition() {
-		let e = this.multiple && !!this.maxlength;
-		U.handleCalendarPosition(this.popupRef, this.inputRef, e);
+		L(this.datepickerPopupRef.value?.popupRef.value ?? null, this.currentInputElement ?? null, this.hasCounter);
+	}
+	async positionOpenCalendar() {
+		let e = this.datepickerPopupRef.value;
+		await e?.updateComplete, await e?.calendarRef.value?.updateComplete, this.calendarOpen && this.handleCalendarPosition();
 	}
 	async showCalendar() {
 		let e = this.datepickerPopupRef.value;
-		this.calendarOpen = !0, e && typeof e.show == "function" ? (e.show(), O() && e.focusOnCurrentDate()) : (await C(20), this.handleCalendarPosition(), O() && this.calRef.value?.focusOnCurrentDate());
+		this.calendarOpen = !0, e && (e.show(), T() && e.focusOnCurrentDate());
 	}
 	hideCalendar() {
 		let e = this.datepickerPopupRef.value;
@@ -1150,41 +900,46 @@ Q = $, Q.DERIVED_FROM = [
 	"max",
 	"excludedates",
 	"excludeweekdays"
-], i([s({
+], Q.POSITIONED_BY = [
+	"calendarOpen",
+	"counter",
+	"multiple",
+	"maxlength"
+], i([o({
 	type: String,
 	reflect: !0
-})], $.prototype, "value", null), i([r()], $.prototype, "_value", void 0), i([s({
+})], $.prototype, "value", null), i([r()], $.prototype, "_value", void 0), i([o({
 	type: String,
 	reflect: !0
-})], $.prototype, "label", void 0), i([s({ type: String })], $.prototype, "dateformat", void 0), i([s({
+})], $.prototype, "label", void 0), i([o({ type: String })], $.prototype, "dateformat", void 0), i([o({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "multiple", void 0), i([s({
+})], $.prototype, "multiple", void 0), i([o({
 	type: Number,
 	reflect: !0
-})], $.prototype, "maxlength", void 0), i([s({
+})], $.prototype, "maxlength", void 0), i([o({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "range", void 0), i([s({
+})], $.prototype, "range", void 0), i([o({
 	type: Boolean,
 	attribute: "show-range-labels"
-})], $.prototype, "showRangeLabels", void 0), i([s({
+})], $.prototype, "showRangeLabels", void 0), i([o({
 	type: String,
 	reflect: !0
-})], $.prototype, "min", void 0), i([s({
+})], $.prototype, "min", void 0), i([o({
 	type: String,
 	reflect: !0
-})], $.prototype, "max", void 0), i([s({ type: Boolean })], $.prototype, "weeknumbers", void 0), i([s({
+})], $.prototype, "max", void 0), i([o({ type: Boolean })], $.prototype, "weeknumbers", void 0), i([o({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "withcontrols", void 0), i([s({ converter: g.csvToArray })], $.prototype, "excludedates", void 0), i([s({ converter: g.csvToArray })], $.prototype, "excludeweekdays", void 0), i([s({ type: String })], $.prototype, "currentmonth", void 0), i([s({ type: String })], $.prototype, "today", void 0), i([s({
+})], $.prototype, "withcontrols", void 0), i([o({ converter: S.csvToArray })], $.prototype, "excludedates", void 0), i([o({ converter: S.csvToArray })], $.prototype, "excludeweekdays", void 0), i([o({ type: String })], $.prototype, "currentmonth", void 0), i([o({ type: String })], $.prototype, "today", void 0), i([o({
 	type: Boolean,
 	reflect: !0,
 	attribute: "calendar-open"
-})], $.prototype, "calendarOpen", void 0), i([s({ type: String })], $.prototype, "timezone", void 0), i([r()], $.prototype, "inputClasses", void 0);
+})], $.prototype, "calendarOpen", void 0), i([o({ type: String })], $.prototype, "timezone", void 0), i([r()], $.prototype, "inputClasses", void 0), i([r()], $.prototype, "toWithoutFrom", void 0), i([r()], $.prototype, "editedRangeFields", void 0);
 try {
 	t("pkt-datepicker")($);
 } catch {
 	console.warn("Forsøker å definere <pkt-datepicker>, men den er allerede definert");
 }
-export { E as a, Y as i, Z as n, X as r, $ as t };
+export { w as a, Y as i, Z as n, X as r, $ as t };