@oslokommune/punkt-elements 16.7.3 → 16.7.4

package/dist/datepicker-OVd8pmnZ.js

@@ -0,0 +1,1125 @@
+import { c as e, d as t, l as n, o as r, r as i, s as a, t as o } from "./element-cZ85T_aa.js";
+import { t as s } from "./class-map-C8HuhNzZ.js";
+import { n as c } from "./element-with-slot-4J2o3SeU.js";
+import "./icon-Co72KtgF.js";
+import { t as l } from "./if-defined-Cjj8qN-Z.js";
+import { n as u, t as d } from "./ref-RS8Uv6uC.js";
+import { a as f, c as p, d as m, f as h, i as g, l as _, o as v, p as y, r as b, s as x, u as S } from "./calendar-BzEtOJla.js";
+import "./tag-VwykmuQR.js";
+import { t as C } from "./repeat-Cepr3469.js";
+import { n as w, t as T } from "./utils-CUqCKGvp.js";
+import { t as E } from "./input-element-Bw1s6NlF.js";
+import "./input-wrapper-YfTmpSSY.js";
+//#region ../../shared-types/datepicker.ts
+var D = { calendar: { buttonAltText: "Åpne kalender" } }, O = {
+	calendar: { buttonAltText: "Åpne kalender" },
+	generic: {
+		from: "Fra",
+		to: "Til"
+	}
+}, k = class extends o {
+	constructor(...e) {
+		super(...e), this.dates = [], this.dateformat = "dd.MM.yyyy", this.className = "pkt-datepicker__tags", this.idBase = w();
+	}
+	render() {
+		return this.classes = {
+			"pkt-date-tags": !0,
+			[this.className]: !0
+		}, t`
+      <div class=${s(this.classes)} aria-live="polite">
+        ${Array.isArray(this.dates) && this.dates[0] ? C(y((this.dates ?? []).filter(Boolean)), (e) => e, (e) => t` <pkt-tag
+                  id=${this.idBase + e + "-tag"}
+                  closeTag
+                  @close=${() => {
+			this.dispatchEvent(new CustomEvent("date-tag-removed", { detail: e }));
+		}}
+                  .ariaLabel=${`${this.strings?.calendar.deleteDate} ${_(e, this.dateformat)}`}
+                >
+                  <time datetime=${e}>${_(e, this.dateformat)}</time>
+                </pkt-tag>`) : n}
+      </div>
+    `;
+	}
+};
+i([a({ type: Array })], k.prototype, "dates", void 0), i([a({ type: String })], k.prototype, "dateformat", void 0), i([a({
+	type: String,
+	attribute: "class"
+})], k.prototype, "className", void 0), i([a({
+	type: String,
+	attribute: "id-base"
+})], k.prototype, "idBase", void 0);
+try {
+	e("pkt-date-tags")(k);
+} catch {
+	console.warn("Forsøker å definere <pkt-date-tags>, men den er allerede definert");
+}
+var A = {
+	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"
+		},
+		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"
+		},
+		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"
+		},
+		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"
+		},
+		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"
+		}
+	},
+	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."
+		}
+	}
+}, j = () => {
+	let e = navigator.userAgent;
+	return !!(/iP(hone|od|ad)/.test(e) || /Macintosh/.test(e) && "ontouchend" in document);
+}, M = () => j() ? "text" : "date", N = (e) => !e || e.length !== 2 ? !0 : S(e[0], e[1]), ee = (e) => y(e), te = (e, t, n, r, i) => v(e, t, n, r, i), P = (e, t, n, r, i, a) => ({
+	"pkt-input": !0,
+	"pkt-datepicker__input": !0,
+	"pkt-input--fullwidth": e,
+	"pkt-datepicker--hasrangelabels": t,
+	"pkt-datepicker--multiple": n,
+	"pkt-datepicker--range": r,
+	"ios-readonly-hack": i === !1 && a === "text"
+}), F = () => ({
+	"pkt-input-icon": !0,
+	"pkt-btn": !0,
+	"pkt-btn--icon-only": !0,
+	"pkt-btn--tertiary": !0,
+	"pkt-datepicker__calendar-button": !0
+}), I = (e) => ({
+	"pkt-input-prefix": e,
+	"pkt-hide": !e
+}), L = (e, t, n) => !t && !n ? Array.isArray(e) ? e[0] || "" : e : Array.isArray(e) ? e.join(",") : e, R = (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 && r.top + a > window.innerHeight && r.top - a > 0 && (o = `calc(100% - ${i}px - ${a}px)`), e.style.top = o;
+}, z = (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());
+}, B = (e, t) => {
+	let { key: n } = e;
+	(n === "Enter" || n === " " || n === "Space") && (e.preventDefault(), t(e));
+}, V = {
+	validateRangeOrder: N,
+	sortDates: ee,
+	filterSelectableDates: te
+}, H = { getInputType: M }, U = {
+	submitForm(e) {
+		let t = e.internals?.form;
+		t && t.requestSubmit();
+	},
+	submitFormOrFallback(e, t) {
+		let n = e?.form;
+		n ? n.requestSubmit() : t();
+	},
+	validateDateInput(e, t, n, r, i) {
+		let a = e.value;
+		a && (n && n > a ? t.setValidity({ rangeUnderflow: !0 }, i?.forms?.messages?.rangeUnderflow || "Value is below minimum", e) : r && r < a && t.setValidity({ rangeOverflow: !0 }, i?.forms?.messages?.rangeOverflow || "Value is above maximum", e));
+	}
+}, W = {
+	addToSelected(e, t, n, r) {
+		let i = e.target;
+		if (!i.value) return;
+		let a = n ? m(n) : null, o = r ? m(r) : null, s = m(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) {
+		R(e.value ?? null, t.value ?? null, n);
+	}
+}, G = {
+	getInputClasses: P,
+	getButtonClasses: F,
+	getRangeLabelClasses: I
+}, K = {
+	processDateSelection: L,
+	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 = p(a.value);
+			e && n?.value?.handleDateSelect(e);
+		} else t[0] && r();
+	}
+}, q = {
+	handleInputKeydown: z,
+	handleButtonKeydown: B
+}, J = class extends o {
+	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 = d(), this.calendarRef = d(), 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", {
+				bubbles: !0,
+				composed: !0
+			})));
+		}, this.handleDocumentKeydown = (e) => {
+			this.open && e.key === "Escape" && (this.hide(), this.dispatchEvent(new CustomEvent("close", {
+				bubbles: !0,
+				composed: !0
+			})));
+		};
+	}
+	firstUpdated() {
+		this.calRef = this.calendarRef;
+	}
+	updated(e) {
+		super.updated(e), e.has("open") && (this.open ? (this._hasBeenOpened = !0, document.addEventListener("keydown", this.handleDocumentKeydown), document.addEventListener("click", this.handleDocumentClick)) : (document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleDocumentKeydown)));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleDocumentKeydown);
+	}
+	show() {
+		this.open = !0, this.calendarRef.value?.focus();
+	}
+	hide() {
+		this.open = !1;
+	}
+	toggle() {
+		this.open ? this.hide() : this.show();
+	}
+	contains(e) {
+		return !!e && !!this.popupRef.value?.contains(e);
+	}
+	focusOnCurrentDate() {
+		let e = this.calendarRef.value;
+		e && typeof e.focusOnCurrentDate == "function" && e.focusOnCurrentDate();
+	}
+	addToSelected(e, t, n) {
+		if (this.calendarRef.value && typeof W.addToSelected == "function") return W.addToSelected(e, this.calendarRef, t, n);
+		let r = e.target;
+		if (!r.value) return;
+		let i = t ? m(t) : null, a = n ? m(n) : null, o = m(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 = x(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,
+			composed: !0
+		}));
+	}
+	render() {
+		return t`
+      <div
+        class="${s({
+			"pkt-calendar-popup": !0,
+			show: this.open,
+			hide: !this.open
+		})}"
+        ${u(this.popupRef)}
+        id="date-popup"
+        ?hidden=${!this.open}
+        aria-hidden="${!this.open}"
+      >
+        ${this.open || this._hasBeenOpened ? t`<pkt-calendar
+              ${u(this.calendarRef)}
+              ?multiple=${this.multiple}
+              ?range=${this.range}
+              ?weeknumbers=${this.weeknumbers}
+              ?withcontrols=${this.withcontrols}
+              .maxMultiple=${this.maxMultiple}
+              .selected=${this.selected}
+              .earliest=${this.earliest}
+              .latest=${this.latest}
+              .excludedates=${this.excludedates}
+              .excludeweekdays=${this.excludeweekdays}
+              .currentmonth=${this.currentmonth}
+              .today=${this.today}
+              @date-selected=${(e) => {
+			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", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}}
+            ></pkt-calendar>` : n}
+      </div>
+    `;
+	}
+};
+i([a({
+	type: Boolean,
+	reflect: !0
+})], J.prototype, "open", void 0), i([a({ type: Boolean })], J.prototype, "multiple", void 0), i([a({ type: Boolean })], J.prototype, "range", void 0), i([a({ type: Boolean })], J.prototype, "weeknumbers", void 0), i([a({ type: Boolean })], J.prototype, "withcontrols", void 0), i([a({ type: Number })], J.prototype, "maxMultiple", void 0), i([a({ type: Array })], J.prototype, "selected", void 0), i([a({ type: String })], J.prototype, "earliest", void 0), i([a({ type: String })], J.prototype, "latest", void 0), i([a({ type: Array })], J.prototype, "excludedates", void 0), i([a({ type: Array })], J.prototype, "excludeweekdays", void 0), i([a({ type: String })], J.prototype, "currentmonth", void 0), i([a({ type: String })], J.prototype, "today", void 0), i([r()], J.prototype, "_hasBeenOpened", void 0);
+try {
+	e("pkt-datepicker-popup")(J);
+} catch {
+	console.warn("Forsøker å definere <pkt-datepicker-popup>, men den er allerede definert");
+}
+//#endregion
+//#region src/components/datepicker/datepicker-base.ts
+var Y = class extends o {
+	constructor(...e) {
+		super(...e), this.inputType = "date", this.id = "", this.readonly = !1, this.disabled = !1, this.inputClasses = {}, this.inputRef = d(), this.btnRef = d();
+	}
+	get inputElement() {
+		return this.inputRef.value;
+	}
+	get buttonElement() {
+		return this.btnRef.value;
+	}
+	get isInputReadonly() {
+		return this.readonly || this.inputType === "text";
+	}
+	dispatchToggleCalendar(e) {
+		this.readonly || this.dispatchEvent(new CustomEvent("toggle-calendar", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	dispatchInput(e) {
+		this.dispatchEvent(new CustomEvent("input-change", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	dispatchFocus() {
+		this.dispatchEvent(new CustomEvent("input-focus", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	dispatchBlur(e) {
+		this.dispatchEvent(new CustomEvent("input-blur", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	dispatchChange(e) {
+		this.dispatchEvent(new CustomEvent("input-changed", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	renderCalendarButton() {
+		return t`
+      <button
+        class="${s(G.getButtonClasses())}"
+        type="button"
+        @click=${(e) => this.dispatchToggleCalendar(e)}
+        @keydown=${(e) => {
+			let { key: t } = e;
+			(t === "Enter" || t === " " || t === "Space") && (e.preventDefault(), this.dispatchToggleCalendar(e));
+		}}
+        ?disabled=${this.disabled}
+        ${this.btnRef}
+      >
+        <pkt-icon name="calendar"></pkt-icon>
+        <span class="pkt-btn__text">${this.strings.calendar?.buttonAltText || "Åpne kalender"}</span>
+      </button>
+    `;
+	}
+	createRenderRoot() {
+		return this;
+	}
+};
+i([a({ type: String })], Y.prototype, "inputType", void 0), i([a({ type: String })], Y.prototype, "id", void 0), i([a({ type: String })], Y.prototype, "min", void 0), i([a({ type: String })], Y.prototype, "max", void 0), i([a({ type: String })], Y.prototype, "placeholder", void 0), i([a({ type: Boolean })], Y.prototype, "readonly", void 0), i([a({ type: Boolean })], Y.prototype, "disabled", void 0), i([a({ type: Object })], Y.prototype, "inputClasses", void 0), i([a({ type: Object })], Y.prototype, "internals", void 0);
+//#endregion
+//#region src/components/datepicker/datepicker-single.ts
+var X = class extends Y {
+	constructor(...e) {
+		super(...e), this.value = "", this.strings = D;
+	}
+	dispatchManageValidity(e) {
+		this.dispatchEvent(new CustomEvent("manage-validity", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		return t`
+      <div class="pkt-input__container">
+        <input
+          class="${s(this.inputClasses)}"
+          .type=${this.inputType}
+          id="${this.id}-input"
+          .value=${this.value}
+          min=${l(this.min)}
+          max=${l(this.max)}
+          placeholder=${l(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          aria-describedby="${this.id}-helptext"
+          @click=${(e) => {
+			e.preventDefault(), this.dispatchToggleCalendar(e);
+		}}
+          @touchend=${(e) => {
+			e.preventDefault(), this.dispatchToggleCalendar(e);
+		}}
+          ?disabled=${this.disabled}
+          @keydown=${(e) => q.handleInputKeydown(e, (e) => this.dispatchToggleCalendar(e), () => U.submitFormOrFallback(this.internals, () => this.inputRef.value?.blur()), void 0, () => this.inputRef.value?.blur())}
+          @input=${(e) => {
+			this.dispatchInput(e), e.stopImmediatePropagation();
+		}}
+          @focus=${() => {
+			this.dispatchFocus(), j() && this.dispatchToggleCalendar(new Event("focus"));
+		}}
+          @blur=${(e) => {
+			this.dispatchBlur(e), this.dispatchManageValidity(e.target), this.dispatchEvent(new CustomEvent("value-change", {
+				detail: e.target.value,
+				bubbles: !0,
+				composed: !0
+			}));
+		}}
+          @change=${(e) => {
+			this.dispatchChange(e), e.stopImmediatePropagation();
+		}}
+          ${u(this.inputRef)}
+        />
+        ${this.renderCalendarButton()}
+      </div>
+    `;
+	}
+};
+i([a({ type: String })], X.prototype, "value", void 0), i([a({ type: Object })], X.prototype, "strings", void 0);
+try {
+	e("pkt-datepicker-single")(X);
+} catch {
+	console.warn("Forsøker å definere <pkt-datepicker-single>, men den er allerede definert");
+}
+//#endregion
+//#region src/components/datepicker/datepicker-range.ts
+var Z = class extends Y {
+	constructor(...e) {
+		super(...e), this.value = [], this.label = "", this.showRangeLabels = !1, this.strings = O, this.inputRefTo = d();
+	}
+	get inputElementTo() {
+		return this.inputRefTo.value;
+	}
+	render() {
+		let e = G.getRangeLabelClasses(this.showRangeLabels);
+		return t`
+      <div class="pkt-input__container">
+        ${this.showRangeLabels ? t` <div class="pkt-input-prefix">${this.strings.generic?.from}</div> ` : n}
+        <input
+          class=${s(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-input"
+          aria-label="${this.label} ${this.strings.generic?.from ?? "Fra"}"
+          .value=${this.value[0] ?? ""}
+          min=${l(this.min)}
+          max=${l(this.max)}
+          placeholder=${l(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(e) => {
+			e.preventDefault(), this.dispatchToggleCalendar(e);
+		}}
+          @touchend=${(e) => {
+			e.preventDefault(), this.dispatchToggleCalendar(e);
+		}}
+          @keydown=${(e) => q.handleInputKeydown(e, (e) => this.dispatchToggleCalendar(e), () => U.submitFormOrFallback(this.internals, () => this.inputRefTo.value?.focus()), () => this.inputRefTo.value?.focus(), () => this.inputRef.value?.blur())}
+          @input=${(e) => {
+			this.dispatchInput(e), e.stopImmediatePropagation();
+		}}
+          @focus=${() => {
+			this.dispatchFocus(), j() && this.dispatchToggleCalendar(new Event("focus"));
+		}}
+          @blur=${(e) => {
+			this.dispatchBlur(e), this.dispatchEvent(new CustomEvent("range-blur", {
+				detail: {
+					event: e,
+					values: this.value,
+					inputType: "from"
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		}}
+          @change=${(e) => {
+			this.dispatchChange(e), e.stopImmediatePropagation();
+		}}
+          ${u(this.inputRef)}
+        />
+        <div class="${s(e)}" id="${this.id}-to-label">
+          ${this.strings.generic?.to}
+        </div>
+        ${this.showRangeLabels ? n : t` <div class="pkt-input-separator">–</div> `}
+        <input
+          class=${s(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-to"
+          aria-label="${this.label} ${this.strings.generic?.to ?? "Til"}"
+          .value=${this.value[1] ?? ""}
+          min=${l(this.min)}
+          max=${l(this.max)}
+          placeholder=${l(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(e) => {
+			e.preventDefault(), this.dispatchToggleCalendar(e);
+		}}
+          @touchend=${(e) => {
+			e.preventDefault(), this.dispatchToggleCalendar(e);
+		}}
+          @keydown=${(e) => q.handleInputKeydown(e, (e) => this.dispatchToggleCalendar(e), () => U.submitFormOrFallback(this.internals, () => this.inputRefTo.value?.blur()), void 0, () => this.inputRefTo.value?.blur())}
+          @input=${(e) => {
+			this.dispatchInput(e), e.stopImmediatePropagation();
+		}}
+          @focus=${() => {
+			this.dispatchFocus(), j() && this.dispatchToggleCalendar(new Event("focus"));
+		}}
+          @blur=${(e) => {
+			this.dispatchBlur(e), this.dispatchEvent(new CustomEvent("range-blur", {
+				detail: {
+					event: e,
+					values: this.value,
+					inputType: "to"
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		}}
+          @change=${(e) => {
+			this.dispatchChange(e), e.stopImmediatePropagation();
+		}}
+          ${u(this.inputRefTo)}
+        />
+        ${this.renderCalendarButton()}
+      </div>
+    `;
+	}
+};
+i([a({ type: Array })], Z.prototype, "value", void 0), i([a({ type: String })], Z.prototype, "label", void 0), i([a({ type: Boolean })], Z.prototype, "showRangeLabels", void 0), i([a({ type: Object })], Z.prototype, "strings", void 0);
+try {
+	e("pkt-datepicker-range")(Z);
+} catch {
+	console.warn("Forsøker å definere <pkt-datepicker-range>, men den er allerede definert");
+}
+//#endregion
+//#region src/components/datepicker/datepicker-multiple.ts
+var Q = class extends Y {
+	constructor(...e) {
+		super(...e), this.value = [], this.strings = D;
+	}
+	get isInputDisabled() {
+		return this.disabled || this.maxlength !== void 0 && this.maxlength !== null && this.value.length >= this.maxlength;
+	}
+	dispatchAddToSelected(e) {
+		this.dispatchEvent(new CustomEvent("add-to-selected", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		return t`
+      <div class="pkt-input__container">
+        <input
+          class=${s(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-input"
+          min=${l(this.min)}
+          max=${l(this.max)}
+          placeholder=${l(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.isInputDisabled}
+          @click=${(e) => {
+			e.preventDefault(), this.dispatchToggleCalendar(e);
+		}}
+          @touchend=${(e) => {
+			e.preventDefault(), this.dispatchToggleCalendar(e);
+		}}
+          @blur=${(e) => {
+			this.dispatchBlur(e), this.dispatchAddToSelected(e);
+		}}
+          @input=${(e) => {
+			this.dispatchInput(e), e.stopImmediatePropagation();
+		}}
+          @focus=${() => {
+			this.dispatchFocus(), j() && this.dispatchToggleCalendar(new Event("focus"));
+		}}
+          @keydown=${(e) => q.handleInputKeydown(e, (e) => this.dispatchToggleCalendar(e), () => U.submitFormOrFallback(this.internals, () => this.inputRef.value?.blur()), void 0, void 0, (e) => this.dispatchAddToSelected(e))}
+          @change=${(e) => {
+			this.dispatchChange(e), e.stopImmediatePropagation();
+		}}
+          ${u(this.inputRef)}
+        />
+        ${this.renderCalendarButton()}
+      </div>
+    `;
+	}
+};
+i([a({ type: Array })], Q.prototype, "value", void 0), i([a({ type: Number })], Q.prototype, "maxlength", void 0), i([a({ type: Object })], Q.prototype, "strings", void 0);
+try {
+	e("pkt-datepicker-multiple")(Q);
+} catch {
+	console.warn("Forsøker å definere <pkt-datepicker-multiple>, men den er allerede definert");
+}
+//#endregion
+//#region src/components/datepicker/datepicker.ts
+var $ = class extends E {
+	constructor(...e) {
+		super(...e), this._valueProperty = "", this._valueProcessing = !1, this.datepickerPopupRef = d(), this._value = [], this.label = "Datovelger", this.dateformat = A.props.dateformat.default, this.multiple = A.props.multiple.default, this.maxlength = null, this.range = A.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = A.props.weeknumbers.default, this.withcontrols = A.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.today = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.calRef = d(), this.popupRef = d(), this.singleInputRef = d(), this.rangeInputRef = d(), this.multipleInputRef = d(), this.addToSelected = (e) => {
+			let t = this.datepickerPopupRef.value;
+			return t && typeof t.addToSelected == "function" ? t.addToSelected(e, this.min, this.max) : W.addToSelected(e, this.calRef, this.min, this.max);
+		};
+	}
+	get value() {
+		return this._valueProperty;
+	}
+	set value(e) {
+		let t = this._valueProperty;
+		this._valueProperty = Array.isArray(e) ? e.join(",") : e || "", this.valueChanged(this._valueProperty, t), this.requestUpdate("value", t);
+	}
+	get inputType() {
+		return H.getInputType();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.timezone && this.timezone !== window.pktTz && (window.pktTz = this.timezone);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+	}
+	onInput() {
+		this.dispatchEvent(new Event("input", { bubbles: !0 }));
+	}
+	valueChanged(e, t) {
+		if (!(this._valueProcessing || e === t)) {
+			this._valueProcessing = !0;
+			try {
+				let n = f(e), r = this.multiple && n.length > 1 ? V.filterSelectableDates(n, this.min, this.max, this.excludedates, this.excludeweekdays) : n;
+				if (this.range && !V.validateRangeOrder(r)) {
+					this._value = [], this._valueProperty = "", super.valueChanged("", t);
+					return;
+				}
+				this._value = r;
+				let i = g(r);
+				if (this._valueProperty !== i && (this._valueProperty = i), this.range && r.length < 2) return;
+				super.valueChanged(i, t);
+			} finally {
+				this._valueProcessing = !1;
+			}
+		}
+	}
+	attributeChangedCallback(e, t, n) {
+		e === "value" && this.value !== t && this.valueChanged(n, t), e === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = f(n || "")), e === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = f(n || "")), super.attributeChangedCallback(e, t, n);
+	}
+	updated(e) {
+		if (e.has("value") && (e.has("multiple") || e.has("range"))) {
+			let t = Array.isArray(this.value) ? this.value.join(",") : this.value, n = e.get("value"), r = Array.isArray(n) ? n.join(",") : n;
+			this.valueChanged(t, r);
+		}
+		e.has("multiple") && (this.multiple && !Array.isArray(this._value) ? this._value = f(this.value) : !this.multiple && Array.isArray(this._value) && (this._value = this._value.filter(Boolean)), !this.multiple && !this.range && Array.isArray(this._value) && (this._value = [this._value[0] ?? ""])), super.updated(e);
+	}
+	get inputRef() {
+		return { value: this.currentInputElement };
+	}
+	get inputRefTo() {
+		return { value: this.currentInputElementTo };
+	}
+	get currentInputElement() {
+		return this.multiple ? this.multipleInputRef.value?.inputElement : this.range ? this.rangeInputRef.value?.inputElement : this.singleInputRef.value?.inputElement;
+	}
+	get currentInputElementTo() {
+		if (this.range) return this.rangeInputRef.value?.inputElementTo;
+	}
+	get currentButtonElement() {
+		return this.multiple ? this.multipleInputRef.value?.buttonElement : this.range ? this.rangeInputRef.value?.buttonElement : this.singleInputRef.value?.buttonElement;
+	}
+	get btnRef() {
+		return { value: this.currentButtonElement };
+	}
+	renderInput() {
+		return t`
+      <pkt-datepicker-single
+        .value=${this._value[0] ?? ""}
+        .inputType=${this.inputType}
+        .id=${this.id}
+        .min=${this.min}
+        .max=${this.max}
+        .placeholder=${this.placeholder}
+        .readonly=${this.readonly}
+        .disabled=${this.disabled}
+        .inputClasses=${this.inputClasses}
+        .internals=${this.internals}
+        .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;
+		}}
+        @input-changed=${() => {
+			this.touched = !0;
+		}}
+        ${u(this.singleInputRef)}
+      ></pkt-datepicker-single>
+    `;
+	}
+	renderRangeInput() {
+		return t`
+      <pkt-datepicker-range
+        .value=${this._value}
+        .inputType=${this.inputType}
+        .id=${this.id}
+        .label=${this.label}
+        .min=${this.min}
+        .max=${this.max}
+        .placeholder=${this.placeholder}
+        .readonly=${this.readonly}
+        .disabled=${this.disabled}
+        .showRangeLabels=${this.showRangeLabels}
+        .inputClasses=${this.inputClasses}
+        .internals=${this.internals}
+        .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(","));
+				}
+			}
+			K.processRangeBlur(e.detail.event, e.detail.values, this.calRef, () => this.clearInputValue(), (e) => this.manageValidity(e));
+		}}
+        @manage-validity=${(e) => this.manageValidity(e.detail)}
+        @validate-date-input=${(e) => {
+			U.validateDateInput(e.detail, this.internals, this.min, this.max, this.strings);
+		}}
+        @handle-date-select=${(e) => {
+			let t = p(e.detail);
+			if (t) {
+				let e = x(t);
+				this._value[0] !== e && this._value[1] !== e && this.calRef?.value?.handleDateSelect(t);
+			}
+		}}
+        @input-changed=${() => {
+			this.touched = !0;
+		}}
+        ${u(this.rangeInputRef)}
+      ></pkt-datepicker-range>
+    `;
+	}
+	renderMultipleInput() {
+		return t`
+      <pkt-datepicker-multiple
+        .value=${this._value}
+        .inputType=${this.inputType}
+        .id=${this.id}
+        .min=${this.min}
+        .max=${this.max}
+        .placeholder=${this.placeholder}
+        .readonly=${this.readonly}
+        .disabled=${this.disabled}
+        .maxlength=${this.maxlength}
+        .inputClasses=${this.inputClasses}
+        .internals=${this.internals}
+        .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;
+		}}
+        ${u(this.multipleInputRef)}
+      ></pkt-datepicker-multiple>
+    `;
+	}
+	renderCalendar() {
+		return t`
+      <pkt-datepicker-popup
+        class="pkt-contents"
+        ?open=${this.calendarOpen}
+        ?multiple=${this.multiple}
+        ?range=${this.range}
+        ?weeknumbers=${this.weeknumbers}
+        ?withcontrols=${this.withcontrols}
+        .maxMultiple=${this.maxlength}
+        .selected=${this._value}
+        .earliest=${this.min}
+        .latest=${this.max}
+        .excludedates=${Array.isArray(this.excludedates) ? this.excludedates : this.excludedates.split(",")}
+        .excludeweekdays=${this.excludeweekdays}
+        .currentmonth=${this.currentmonth ? h(this.currentmonth) : null}
+        .today=${this.today}
+        @date-selected=${(e) => {
+			this.value = K.processDateSelection(e.detail, this.multiple, this.range), this._value = e.detail, K.updateInputValues(this.inputRef, this.inputRefTo, this._value, this.range, this.multiple, (e) => this.manageValidity(e));
+		}}
+        @close=${() => {
+			this.onBlur(), this.hideCalendar();
+		}}
+        ${u(this.datepickerPopupRef)}
+      ></pkt-datepicker-popup>
+    `;
+	}
+	render() {
+		return this.inputClasses = G.getInputClasses(this.fullwidth, this.showRangeLabels, this.multiple, this.range, this.readonly, this.inputType), t`
+      <pkt-input-wrapper
+        label="${this.label}"
+        forId="${this.id}-input"
+        ?counter=${this.multiple && !!this.maxlength}
+        .counterCurrent=${this.value ? this._value.length : 0}
+        .counterMaxLength=${this.maxlength}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
+        ?required=${this.required}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        useWrapper=${this.useWrapper}
+        .optionalText=${this.optionalText}
+        .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
+        .errorMessage=${this.errorMessage}
+        .helptext=${this.helptext}
+        .helptextDropdown=${this.helptextDropdown}
+        .helptextDropdownButton=${this.helptextDropdownButton}
+        .ariaDescribedBy=${this.ariaDescribedBy}
+        class="pkt-datepicker"
+      >
+        <div class="pkt-contents" slot="helptext">${c(this, "helptext")}</div>
+        ${this.multiple ? t`<pkt-date-tags
+              .dates=${this._value}
+              dateformat=${this.dateformat}
+              strings=${this.strings}
+              id-base=${this.id}
+              @date-tag-removed=${(e) => {
+			let t = this.datepickerPopupRef.value, n = p(e.detail);
+			t && n && typeof t.handleDateSelect == "function" ? t.handleDateSelect(n) : this.calRef.value?.handleDateSelect(n);
+		}}
+            ></pkt-date-tags>` : n}
+        <div class="pkt-datepicker__inputs ${this.range ? "pkt-input__range-inputs" : ""}">
+          ${this.range ? this.renderRangeInput() : this.multiple ? this.renderMultipleInput() : this.renderInput()}
+        </div>
+      </pkt-input-wrapper>
+      ${this.renderCalendar()}
+    `;
+	}
+	handleCalendarPosition() {
+		let e = this.multiple && !!this.maxlength;
+		W.handleCalendarPosition(this.popupRef, this.inputRef, e);
+	}
+	async showCalendar() {
+		let e = this.datepickerPopupRef.value;
+		if (this.calendarOpen = !0, e && typeof e.show == "function") {
+			e.show(), j() && e.focusOnCurrentDate();
+			return;
+		}
+		await T(20), this.handleCalendarPosition(), j() && this.calRef.value?.focusOnCurrentDate();
+	}
+	hideCalendar() {
+		let e = this.datepickerPopupRef.value;
+		if (this.calendarOpen = !1, e && typeof e.hide == "function") return e.hide();
+	}
+	async toggleCalendar(e) {
+		e.preventDefault();
+		let t = this.datepickerPopupRef.value;
+		if (t && typeof t.toggle == "function") {
+			let e = !!t.open;
+			t.toggle(), this.calendarOpen = !e;
+			return;
+		}
+		this.calendarOpen ? this.hideCalendar() : this.showCalendar();
+	}
+	clearInputValue() {
+		this._value = [], this.value = "", this.internals.setFormValue(this.value), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("value-change", {
+			detail: this._value,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+};
+i([a({
+	type: String,
+	reflect: !0
+})], $.prototype, "value", null), i([a({
+	type: String,
+	reflect: !0
+})], $.prototype, "label", void 0), i([a({ type: String })], $.prototype, "dateformat", void 0), i([a({
+	type: Boolean,
+	reflect: !0
+})], $.prototype, "multiple", void 0), i([a({
+	type: Number,
+	reflect: !0
+})], $.prototype, "maxlength", void 0), i([a({
+	type: Boolean,
+	reflect: !0
+})], $.prototype, "range", void 0), i([a({
+	type: Boolean,
+	attribute: "show-range-labels"
+})], $.prototype, "showRangeLabels", void 0), i([a({
+	type: String,
+	reflect: !0
+})], $.prototype, "min", void 0), i([a({
+	type: String,
+	reflect: !0
+})], $.prototype, "max", void 0), i([a({ type: Boolean })], $.prototype, "weeknumbers", void 0), i([a({
+	type: Boolean,
+	reflect: !0
+})], $.prototype, "withcontrols", void 0), i([a({ converter: b.csvToArray })], $.prototype, "excludedates", void 0), i([a({ converter: b.csvToArray })], $.prototype, "excludeweekdays", void 0), i([a({ type: String })], $.prototype, "currentmonth", void 0), i([a({ type: String })], $.prototype, "today", void 0), i([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "calendar-open"
+})], $.prototype, "calendarOpen", void 0), i([a({ type: String })], $.prototype, "timezone", void 0), i([r()], $.prototype, "inputClasses", void 0);
+try {
+	e("pkt-datepicker")($);
+} catch {
+	console.warn("Forsøker å definere <pkt-datepicker>, men den er allerede definert");
+}
+//#endregion
+export { k as a, X as i, Q as n, Z as r, $ as t };