@oslokommune/punkt-elements/dist/datepicker-M_jcY3wp.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

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, h, i as g, m as _, n as v, r as y, s as b, t as x, u as S } from "./converters-jauYkvNh.js";
import "./calendar-Ch1dgnBo.js";
import "./tag-hl59gziI.js";
import { t as C } from "./repeat-DV1O43YU.js";
import { n as w, t as T } from "./utils-BOOZ0ppt.js";
import { t as E } from "./input-element-B1ciW1N2.js";
import "./input-wrapper-DVU68NcJ.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(h((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} ${p(e, this.dateformat)}`}
                >
                  <time datetime=${e}>${p(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) => h(e), te = (e, t, n, r, i) => g(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 = b(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 = f(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 = y(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 = v(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 = y(n || "")), e === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = y(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 = y(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 = b(e.detail);
			if (t) {
				let e = f(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 ? _(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 = b(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: x.csvToArray })], $.prototype, "excludedates", void 0), i([a({ converter: x.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 };