@oslokommune/punkt-elements 16.14.0 → 16.15.1

package/dist/fileupload-DbmqRkz3.js

@@ -0,0 +1,1373 @@
+import { c as e, d as t, o as n, r, s as i, t as a } from "./element-cZ85T_aa.js";
+import { t as o } from "./class-map-C8HuhNzZ.js";
+import "./alert-ePJuDtmm.js";
+import "./icon-Co72KtgF.js";
+import { t as s } from "./if-defined-Cjj8qN-Z.js";
+import { t as c } from "./converters-jauYkvNh.js";
+import { n as l } from "./utils-BOOZ0ppt.js";
+import "./input-wrapper-DBpMVSxt.js";
+import "./modal-DyIC3uhs.js";
+import "./progressbar-uC-0W6o4.js";
+//#region ../../shared-types/fileupload.ts
+var u = {
+	dropZoneDragMultiple: "Dra filer hit for å laste dem opp eller",
+	dropZoneDragSingle: "Dra en fil hit for å laste den opp eller",
+	dropZoneDragMultipleThumbnail: "Dra bilder hit for å laste dem opp eller",
+	dropZoneDragSingleThumbnail: "Dra et bilde hit for å laste det opp eller",
+	dropZoneDragActiveMultiple: "Slipp filene her",
+	dropZoneDragActiveSingle: "Slipp filen her",
+	dropZoneDragActiveMultipleThumbnail: "Slipp bildene her",
+	dropZoneDragActiveSingleThumbnail: "Slipp bildet her",
+	dropZoneOpenFileDialogMultiple: "velg filer",
+	dropZoneOpenFileDialogSingle: "velg en fil",
+	dropZoneOpenFileDialogMultipleThumbnail: "velg fra kamerarull",
+	dropZoneOpenFileDialogSingleThumbnail: "velg fra kamerarull",
+	supportedFormatsPrefix: "Format:",
+	invalidFormatDefault: (e) => `Ugyldig filtype. Tillatte formater: ${e}`,
+	sizeTooLargeDefault: (e) => `Filen er for stor. Maks størrelse er ${e}.`,
+	requiredMissing: "Du må laste opp minst én fil.",
+	genericValidationRejection: "Filen ble avvist av validering.",
+	unknownFilename: "Ukjent fil",
+	fileLabel: (e) => e === 1 ? "fil" : "filer",
+	srFileAdded: (e) => `Filen «${e}» er lagt til`,
+	srFilesAdded: (e) => `${e} filer er lagt til`,
+	srFilesUploadedOfTotal: (e, t, n) => `${e} av ${t} ${n} lastet opp`,
+	srFilesFailedOfTotal: (e, t, n) => `Feil ved opplasting: ${e} av ${t} ${n} feilet`
+};
+//#endregion
+//#region ../../shared-utils/fileupload/size.ts
+function d(e) {
+	if (e == null || e === "") return;
+	if (typeof e == "number") return Number.isFinite(e) && e > 0 ? e : void 0;
+	let t = String(e).trim(), n = Number(t);
+	if (!Number.isNaN(n) && n > 0) return n;
+	let r = t.match(/^(\d+(?:\.\d+)?)\s*(B|KB|MB|GB)$/i);
+	if (!r) {
+		console.warn(`PktFileUpload: Invalid maxFileSize format "${t}". Use format like "5MB", "500KB", "1GB", or bytes.`);
+		return;
+	}
+	let i = parseFloat(r[1]);
+	switch (r[2].toUpperCase()) {
+		case "B": return i;
+		case "KB": return i * 1024;
+		case "MB": return i * 1024 * 1024;
+		case "GB": return i * 1024 * 1024 * 1024;
+		default: return;
+	}
+}
+function f(e) {
+	return e < 1024 ? `${Math.round(e)} B` : e < 1024 * 1024 ? `${Math.round(e / 1024)} KB` : e < 1024 * 1024 * 1024 ? `${Math.round(e / (1024 * 1024))} MB` : `${Math.round(e / (1024 * 1024 * 1024))} GB`;
+}
+//#endregion
+//#region ../../shared-utils/fileupload/formats.ts
+function p(e) {
+	return Array.isArray(e) ? e.map((e) => String(e).trim().toLowerCase()).filter(Boolean) : [];
+}
+function m(e) {
+	return e ? e.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean) : [];
+}
+function h(e, t, n) {
+	let r = e.toLowerCase().replace(/^\./, "");
+	if (r.includes("/")) {
+		if (r.endsWith("/*")) {
+			let e = r.replace("/*", "");
+			return n.startsWith(`${e}/`);
+		}
+		return n === r;
+	}
+	return t === r;
+}
+function g(e, t) {
+	let n = p(t);
+	if (n.length === 0) return !0;
+	let r = e.name.split(".").pop()?.toLowerCase() ?? "", i = e.type.toLowerCase();
+	return n.some((e) => h(e, r, i));
+}
+function _(e, t) {
+	let n = (e ?? "").trim();
+	if (n) return n;
+	let r = p(t);
+	return r.length === 0 ? "" : r.map((e) => e.includes("/") || e.startsWith(".") ? e : `.${e}`).join(", ");
+}
+function v(e) {
+	return e.includes("/") ? e : e.replace(/^\./, "").toUpperCase();
+}
+function y(e, t) {
+	let n = p(e);
+	if (n.length > 0) return n.map(v).join(", ");
+	let r = m(t);
+	return r.length > 0 ? r.map(v).join(", ") : "";
+}
+//#endregion
+//#region ../../shared-utils/fileupload/validation.ts
+function b(e, t, n) {
+	return ((e ?? "").trim() || t).replace(/\{(\w+)\}/g, (e, t) => n[t] ?? `{${t}}`);
+}
+function x(e, t) {
+	let n = p(t.allowedFormats);
+	if (n.length > 0 && !g(e, n)) {
+		let e = n.join(", "), r = `Ugyldig filtype. Tillatte formater: ${e}`;
+		return b(t.formatErrorMessage, r, { formats: e });
+	}
+	let r = d(t.maxFileSize);
+	if (r !== void 0 && e.size > r) {
+		let e = f(r), n = `Filen er for stor. Maks størrelse er ${e}.`;
+		return b(t.sizeErrorMessage, n, { maxSize: e });
+	}
+	if (t.onFileValidation) {
+		let n = t.onFileValidation(e);
+		if (n) return n;
+	}
+	return null;
+}
+function S(e) {
+	let t = e.file;
+	if (t?.type?.startsWith("image/")) return !0;
+	let n = e.attributes?.targetFilename || t?.name || "";
+	return /\.(jpe?g|png|gif|webp|heic|heif|bmp|svg)$/i.test(n);
+}
+//#endregion
+//#region ../../shared-utils/fileupload/transfers.ts
+function C(e) {
+	return typeof e == "number" ? "in-progress" : e === "error" ? "error" : "idle";
+}
+function w(e, t, n) {
+	let r = {
+		"in-progress": 0,
+		error: 1,
+		idle: 2
+	};
+	return e.map((e) => {
+		let r = t?.find((t) => t.fileId === e.fileId);
+		return {
+			...e,
+			progress: r?.progress ?? (n === "form" ? "done" : "queued"),
+			errorMessage: r?.errorMessage,
+			showProgress: r?.showProgress,
+			lastProgress: r?.lastProgress
+		};
+	}).sort((e, t) => r[C(e.progress)] - r[C(t.progress)]);
+}
+//#endregion
+//#region ../../shared-utils/fileupload/focus-trap.ts
+function T(e) {
+	if (!e) return [];
+	let t = [
+		"a[href]:not([tabindex=\"-1\"])",
+		"button:not([disabled]):not([tabindex=\"-1\"])",
+		"input:not([disabled]):not([type=\"hidden\"]):not([tabindex=\"-1\"])",
+		"select:not([disabled]):not([tabindex=\"-1\"])",
+		"textarea:not([disabled]):not([tabindex=\"-1\"])",
+		"[tabindex]:not([tabindex=\"-1\"])"
+	].join(", ");
+	return Array.from(e.querySelectorAll(t)).filter((e) => !e.hasAttribute("inert"));
+}
+function E(e, t) {
+	if (e.key !== "Tab") return !1;
+	let n = T(t);
+	if (n.length === 0) return e.preventDefault(), !0;
+	let r = n[0], i = n[n.length - 1], a = (t?.ownerDocument ?? document).activeElement, o = !!a && n.includes(a);
+	return e.shiftKey ? !o || a === r ? (e.preventDefault(), i.focus(), !0) : !1 : !o || a === i ? (e.preventDefault(), r.focus(), !0) : !1;
+}
+//#endregion
+//#region ../../shared-utils/fileupload/truncate.ts
+function D(e, t) {
+	return !t || t <= 0 || e.length <= t + 3 ? null : {
+		head: e.slice(0, e.length - t),
+		tail: e.slice(-t)
+	};
+}
+//#endregion
+//#region ../../shared-utils/fileupload/navigation.ts
+function ee(e, t, n) {
+	return n <= 0 ? 0 : t === "prev" ? e <= 0 ? n - 1 : e - 1 : e >= n - 1 ? 0 : e + 1;
+}
+//#endregion
+//#region ../../shared-utils/fileupload/announcements.ts
+function O(e, t) {
+	let n = e.length;
+	if (n === 0 || !t || t.length === 0) return {
+		totalCount: n,
+		uploadedCount: 0,
+		failedCount: 0
+	};
+	let r = 0, i = 0;
+	for (let n of e) {
+		let e = t.find((e) => e.fileId === n.fileId);
+		e?.progress === "done" ? r++ : e?.progress === "error" && i++;
+	}
+	return {
+		totalCount: n,
+		uploadedCount: r,
+		failedCount: i
+	};
+}
+//#endregion
+//#region ../../shared-utils/fileupload/filename.ts
+function k(e, t = u.unknownFilename) {
+	return e.attributes?.targetFilename || e.file?.name || t;
+}
+//#endregion
+//#region src/components/fileupload/fileupload-base.ts
+var A = class extends a {
+	constructor(...e) {
+		super(...e), this.id = `pkt-fileupload-${l()}`, this.name = "files", this.label = "", this.helptext = "", this.required = !1, this.multiple = !1, this.disabled = !1, this.fullwidth = !1, this.uploadStrategy = "form", this.itemRenderer = "filename", this.accept = "", this.allowedFormats = [], this.formatErrorMessage = "", this.sizeErrorMessage = "", this.transfers = [], this.addCommentsEnabled = !1, this.renameFilesEnabled = !1, this.extraOperations = [], this.enableImagePreview = !1, this.hasError = !1, this.errorMessage = "", this.optionalTag = !1, this.requiredTag = !1, this.truncateTail = 4, this.files = [], this.isDragActive = !1, this.validationErrorMessage = null, this.addedAnnouncement = "", this.thumbnailUrls = {}, this.hasInitializedValue = !1, this.hasWarnedInvalidValueCombo = !1, this.thumbnailFileById = /* @__PURE__ */ new Map(), this.connectedForm = null, this.addedAnnouncementTimer = null, this.requiredSelectionMessage = u.requiredMissing, this.onNativeFileChange = (e) => {
+			let t = e.target;
+			this.addFiles(t.files ? Array.from(t.files) : []), this.uploadStrategy === "custom" && (t.value = "");
+		}, this.openFileDialog = (e) => {
+			e.preventDefault(), e.stopPropagation(), !this.disabled && this.querySelector(`#${this.id}-input`)?.click();
+		}, this.onDropZoneClick = (e) => {
+			this.disabled || e.target.closest(".pkt-fileupload__drop-zone__placeholder__title__open-file-dialog") || this.querySelector(`#${this.id}-input`)?.click();
+		}, this.onDragOver = (e) => {
+			e.preventDefault(), !this.disabled && (this.isDragActive = !0);
+		}, this.onDragLeave = () => {
+			this.isDragActive = !1;
+		}, this.onDrop = (e) => {
+			if (e.preventDefault(), this.isDragActive = !1, this.disabled) return;
+			let t = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
+			this.addFiles(t);
+		}, this.onHostFormSubmit = (e) => {
+			!this.required || this.uploadStrategy !== "custom" || this.getCurrentFiles().length > 0 || (this.validationErrorMessage = this.requiredSelectionMessage, e.preventDefault());
+		};
+	}
+	get isControlled() {
+		return this.value !== void 0;
+	}
+	get hasEffectiveError() {
+		return !!this.validationErrorMessage || this.hasError || !!this.errorMessage.trim();
+	}
+	get effectiveErrorMessage() {
+		return this.validationErrorMessage ?? this.errorMessage ?? "";
+	}
+	get hasValidationError() {
+		return !!this.validationErrorMessage;
+	}
+	firstUpdated(e) {
+		super.firstUpdated?.(e), this.hasInitializedValue ||= (this.files = this.value ?? this.defaultValue ?? [], this.syncThumbnailUrls(this.files), !0), this.value !== void 0 && this.defaultValue !== void 0 && this.warnInvalidValueCombo();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this.hasInitializedValue && this.isControlled && (e.has("value") || e.has("itemRenderer") || e.has("enableImagePreview")) && (this.files = this.value ?? [], this.syncThumbnailUrls(this.files));
+	}
+	updated(e) {
+		super.updated(e), (e.has("uploadStrategy") || e.has("required") || e.has("value")) && this.syncFormSubmitListener(), this.uploadStrategy === "form" && (e.has("value") || e.has("files") || e.has("uploadStrategy")) && this.syncNativeInputFiles();
+	}
+	syncNativeInputFiles() {
+		let e = this.querySelector(`#${this.id}-input`);
+		if (!(!e || typeof DataTransfer > "u")) try {
+			let t = new DataTransfer();
+			for (let e of this.getCurrentFiles()) e.file && t.items.add(e.file);
+			e.files = t.files;
+		} catch {}
+	}
+	warnInvalidValueCombo() {
+		this.hasWarnedInvalidValueCombo ||= (console.warn("PktFileUpload: Både value og defaultValue er angitt. Komponenten kan være enten kontrollert eller ukontrollert, ikke begge. value vil bli prioritert."), !0);
+	}
+	disconnectedCallback() {
+		this.teardownFormSubmitListener(), this.addedAnnouncementTimer &&= (clearTimeout(this.addedAnnouncementTimer), null), super.disconnectedCallback(), this.revokeAllThumbnailUrls();
+	}
+	setAddedAnnouncement(e) {
+		this.addedAnnouncement = e, this.addedAnnouncementTimer && clearTimeout(this.addedAnnouncementTimer), this.addedAnnouncementTimer = setTimeout(() => {
+			this.addedAnnouncement = "", this.addedAnnouncementTimer = null;
+		}, 1500);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.syncFormSubmitListener();
+	}
+	addFiles(e) {
+		if (e.length === 0) return;
+		let t = this.multiple ? e : [e[0]];
+		for (let e of t) {
+			let t = this.validateFile(e);
+			if (t) {
+				this.validationErrorMessage = t;
+				return;
+			}
+		}
+		this.validationErrorMessage = null;
+		let n = t.map((e) => ({
+			fileId: l(),
+			file: e,
+			attributes: { targetFilename: e.name }
+		}));
+		this.setAddedAnnouncement(n.length === 1 ? u.srFileAdded(n[0].attributes.targetFilename) : u.srFilesAdded(n.length));
+		let r = this.getCurrentFiles(), i = this.multiple ? [...r, ...n] : [n[0]];
+		this.commitFiles(i, "add", n.map((e) => e.fileId)), this.uploadStrategy === "custom" && n.forEach((e) => {
+			this.dispatchEvent(new CustomEvent("file-upload-requested", {
+				detail: {
+					fileId: e.fileId,
+					file: e.file,
+					attributes: e.attributes
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		});
+	}
+	getCurrentFiles() {
+		return this.isControlled ? this.value ?? [] : this.files;
+	}
+	cancelTransfer(e) {
+		if (this.disabled) return;
+		let t = this.getCurrentFiles().find((t) => t.fileId === e);
+		t && (this.removeFileItem(e), this.dispatchEvent(new CustomEvent("transfer-cancelled", {
+			detail: {
+				fileId: t.fileId,
+				file: t.file,
+				attributes: t.attributes
+			},
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	removeFileItem(e) {
+		if (this.disabled) return;
+		let t = this.getCurrentFiles(), n = t.filter((t) => t.fileId !== e);
+		n.length !== t.length && this.commitFiles(n, "remove", [e]);
+	}
+	updateFileItem(e, t) {
+		let n = this.getCurrentFiles().map((n) => n.fileId === e ? {
+			...n,
+			...t
+		} : n);
+		this.commitFiles(n, "update", [e]);
+	}
+	commitFiles(e, t, n) {
+		this.isControlled || (this.files = e, this.syncThumbnailUrls(e)), this.validationErrorMessage === this.requiredSelectionMessage && e.length > 0 && (this.validationErrorMessage = null), this.dispatchEvent(new CustomEvent("files-changed", {
+			detail: {
+				files: e,
+				reason: t,
+				changedFileIds: n
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	getThumbnailUrl(e) {
+		return this.thumbnailUrls[e.fileId];
+	}
+	getTransferProgress(e) {
+		let t = this.transfers.find((t) => t.fileId === e);
+		return t ? t.progress : this.uploadStrategy === "form" ? "done" : "queued";
+	}
+	getTransferForFile(e) {
+		return this.transfers.find((t) => t.fileId === e);
+	}
+	isImageFile(e) {
+		return S(e);
+	}
+	formatFileSize(e) {
+		return f(e);
+	}
+	getResolvedAcceptValue() {
+		return _(this.accept, this.allowedFormats);
+	}
+	getSupportedFormatsText() {
+		return y(this.allowedFormats, this.accept);
+	}
+	getSortedFilesAndTransfers() {
+		return w(this.getCurrentFiles(), this.transfers, this.uploadStrategy);
+	}
+	validateFile(e) {
+		let t = x(e, {
+			allowedFormats: this.allowedFormats,
+			maxFileSize: this.maxFileSize,
+			formatErrorMessage: this.formatErrorMessage,
+			sizeErrorMessage: this.sizeErrorMessage,
+			onFileValidation: this.onFileValidation
+		});
+		if (t) return t;
+		let n = {
+			file: e,
+			errorMessage: null
+		}, r = new CustomEvent("file-validate", {
+			detail: n,
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		});
+		return this.dispatchEvent(r), n.errorMessage ? n.errorMessage : r.defaultPrevented ? u.genericValidationRejection : null;
+	}
+	syncThumbnailUrls(e) {
+		if (!(typeof URL < "u" && typeof URL.createObjectURL == "function" && typeof URL.revokeObjectURL == "function")) {
+			this.thumbnailUrls = {}, this.thumbnailFileById.clear();
+			return;
+		}
+		let t = new Set(e.map((e) => e.fileId)), n = {};
+		for (let [e, n] of Object.entries(this.thumbnailUrls)) t.has(e) || (URL.revokeObjectURL(n), this.thumbnailFileById.delete(e));
+		for (let t of e) {
+			let e = this.thumbnailUrls[t.fileId], r = this.thumbnailFileById.get(t.fileId);
+			if (!t.file || !this.isImageFile(t)) {
+				e && (URL.revokeObjectURL(e), this.thumbnailFileById.delete(t.fileId));
+				continue;
+			}
+			if (e && r === t.file) {
+				n[t.fileId] = e;
+				continue;
+			}
+			e && r !== t.file && URL.revokeObjectURL(e);
+			let i = URL.createObjectURL(t.file);
+			this.thumbnailFileById.set(t.fileId, t.file), n[t.fileId] = i;
+		}
+		this.thumbnailUrls = n;
+	}
+	revokeAllThumbnailUrls() {
+		if (typeof URL > "u" || typeof URL.revokeObjectURL != "function") {
+			this.thumbnailUrls = {}, this.thumbnailFileById.clear();
+			return;
+		}
+		Object.values(this.thumbnailUrls).forEach((e) => URL.revokeObjectURL(e)), this.thumbnailUrls = {}, this.thumbnailFileById.clear();
+	}
+	getSrUploadedMessage() {
+		if (this.addedAnnouncement) return this.addedAnnouncement;
+		let { totalCount: e, uploadedCount: t } = O(this.getCurrentFiles(), this.transfers);
+		return e === 0 || t === 0 ? "" : u.srFilesUploadedOfTotal(t, e, u.fileLabel(e));
+	}
+	getSrErrorsMessage() {
+		let { totalCount: e, failedCount: t } = O(this.getCurrentFiles(), this.transfers);
+		return e === 0 || t === 0 ? "" : u.srFilesFailedOfTotal(t, e, u.fileLabel(e));
+	}
+	syncFormSubmitListener() {
+		let e = this.closest("form");
+		this.connectedForm !== e && (this.teardownFormSubmitListener(), this.connectedForm = e, this.connectedForm && this.connectedForm.addEventListener("submit", this.onHostFormSubmit));
+	}
+	teardownFormSubmitListener() {
+		this.connectedForm &&= (this.connectedForm.removeEventListener("submit", this.onHostFormSubmit), null);
+	}
+};
+r([i({ type: String })], A.prototype, "id", void 0), r([i({ type: String })], A.prototype, "name", void 0), r([i({ type: String })], A.prototype, "label", void 0), r([i({ type: String })], A.prototype, "helptext", void 0), r([i({
+	type: Boolean,
+	reflect: !0
+})], A.prototype, "required", void 0), r([i({
+	type: Boolean,
+	reflect: !0
+})], A.prototype, "multiple", void 0), r([i({
+	type: Boolean,
+	reflect: !0
+})], A.prototype, "disabled", void 0), r([i({
+	type: Boolean,
+	reflect: !0,
+	attribute: "fullwidth"
+})], A.prototype, "fullwidth", void 0), r([i({
+	type: String,
+	reflect: !0,
+	attribute: "upload-strategy"
+})], A.prototype, "uploadStrategy", void 0), r([i({
+	type: String,
+	reflect: !0,
+	attribute: "item-renderer"
+})], A.prototype, "itemRenderer", void 0), r([i({ type: String })], A.prototype, "accept", void 0), r([i({
+	converter: c.csvToArray,
+	attribute: "allowed-formats"
+})], A.prototype, "allowedFormats", void 0), r([i({
+	type: String,
+	attribute: "format-error-message"
+})], A.prototype, "formatErrorMessage", void 0), r([i({ attribute: "max-file-size" })], A.prototype, "maxFileSize", void 0), r([i({
+	type: String,
+	attribute: "size-error-message"
+})], A.prototype, "sizeErrorMessage", void 0), r([i({ attribute: !1 })], A.prototype, "onFileValidation", void 0), r([i({ attribute: !1 })], A.prototype, "transfers", void 0), r([i({
+	type: Boolean,
+	attribute: "add-comments-enabled"
+})], A.prototype, "addCommentsEnabled", void 0), r([i({
+	type: Boolean,
+	attribute: "rename-files-enabled"
+})], A.prototype, "renameFilesEnabled", void 0), r([i({ attribute: !1 })], A.prototype, "extraOperations", void 0), r([i({
+	type: Boolean,
+	reflect: !0,
+	attribute: "enable-image-preview"
+})], A.prototype, "enableImagePreview", void 0), r([i({
+	type: Boolean,
+	attribute: "has-error"
+})], A.prototype, "hasError", void 0), r([i({
+	type: String,
+	attribute: "error-message"
+})], A.prototype, "errorMessage", void 0), r([i({
+	type: Boolean,
+	attribute: "optional-tag"
+})], A.prototype, "optionalTag", void 0), r([i({
+	type: Boolean,
+	attribute: "required-tag"
+})], A.prototype, "requiredTag", void 0), r([i({
+	type: Number,
+	attribute: "truncate-tail"
+})], A.prototype, "truncateTail", void 0), r([i({ attribute: !1 })], A.prototype, "value", void 0), r([i({ attribute: !1 })], A.prototype, "defaultValue", void 0), r([n()], A.prototype, "files", void 0), r([n()], A.prototype, "isDragActive", void 0), r([n()], A.prototype, "validationErrorMessage", void 0), r([n()], A.prototype, "addedAnnouncement", void 0), r([n()], A.prototype, "thumbnailUrls", void 0);
+//#endregion
+//#region src/components/fileupload/fileupload-operations.ts
+var j = "comments", M = (e) => {
+	let t = new Date(e);
+	return Number.isNaN(t.getTime()) ? e : `${String(t.getDate()).padStart(2, "0")}.${String(t.getMonth() + 1).padStart(2, "0")}.${t.getFullYear()} kl. ${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`;
+}, N = (e, t, n) => {
+	e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), t()), e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), n());
+}, P = (e, t, n) => {
+	e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), n()), (e.metaKey || e.ctrlKey) && e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), t());
+}, F = (e) => ({
+	id: "remove",
+	title: "Slett",
+	ariaLabel: "Slett fil",
+	onClick: ({ file: t }) => e(t.fileId)
+}), I = () => ({
+	id: "rename",
+	title: "Rediger",
+	ariaLabel: "Rediger filnavn",
+	renderInlineUI: (e) => {
+		let n = e.getAttribute("targetFilename") || e.file.attributes?.targetFilename || e.file.file?.name || "", r = `pkt-fileupload-rename-${e.file.fileId}`, i = () => {
+			let t = document.getElementById(r)?.value?.trim();
+			t && e.setAttribute("targetFilename", t), e.close();
+		};
+		return t`
+      <label for=${r} class="pkt-sr-only">Endre filnavn</label>
+      <input
+        id=${r}
+        type="text"
+        class="pkt-fileupload__queue-display__item__rename-input"
+        ?disabled=${e.disabled}
+        .value=${n}
+        @keydown=${(t) => N(t, i, e.close)}
+      />
+      <button
+        type="button"
+        class="pkt-btn pkt-btn--secondary pkt-btn--small"
+        ?disabled=${e.disabled}
+        @click=${i}
+      >
+        Lagre
+      </button>
+      <button
+        type="button"
+        class="pkt-btn pkt-btn--tertiary pkt-btn--small"
+        ?disabled=${e.disabled}
+        @click=${e.close}
+      >
+        Avbryt
+      </button>
+    `;
+	},
+	renderHidden: (e) => {
+		let n = e.getAttribute("targetFilename") || e.file.attributes?.targetFilename || e.file.file?.name || "";
+		return t`<input
+      type="hidden"
+      name=${`${e.inputName}-targetFilename`}
+      value=${n}
+    />`;
+	}
+}), L = () => ({
+	id: "comment",
+	title: (e) => (e.attributes?.[j] ?? []).length > 0 ? "" : "Legg til kommentar",
+	ariaLabel: "Legg til kommentar",
+	renderExtendedUI: (e) => {
+		let n = (e.getAttribute(j) ?? [])[0], r = `pkt-fileupload-comment-${e.file.fileId}`, i = () => {
+			let t = document.getElementById(r)?.value?.trim();
+			t && e.setAttribute(j, [{
+				text: t,
+				timestamp: (/* @__PURE__ */ new Date()).toISOString()
+			}]), e.close();
+		};
+		return t`
+      <label for=${r} class="pkt-fileupload__queue-display__item__comment-label">
+        ${n ? "Rediger kommentar" : "Legg til kommentar"}
+      </label>
+      <textarea
+        id=${r}
+        class="pkt-fileupload__queue-display__item__comment-input"
+        ?disabled=${e.disabled}
+        .value=${n?.text ?? ""}
+        rows="2"
+        placeholder="Skriv inn kommentar"
+        @keydown=${(t) => P(t, i, e.close)}
+      ></textarea>
+      <button
+        type="button"
+        class="pkt-btn pkt-btn--secondary pkt-btn--small"
+        ?disabled=${e.disabled}
+        @click=${i}
+      >
+        ${n ? "Lagre kommentar" : "Legg til kommentar"}
+      </button>
+      <button
+        type="button"
+        class="pkt-btn pkt-btn--tertiary pkt-btn--small"
+        ?disabled=${e.disabled}
+        @click=${e.close}
+      >
+        Avbryt
+      </button>
+    `;
+	},
+	renderContent: (e) => {
+		if (e.isActive) return null;
+		let n = e.getAttribute(j) ?? [];
+		if (n.length === 0) return null;
+		let r = n[0];
+		return t`
+      <div class="pkt-fileupload__queue-display__item__comments">
+        <div class="pkt-fileupload__queue-display__item__comment">
+          <div class="pkt-fileupload__queue-display__item__comment__content">
+            <span class="pkt-fileupload__queue-display__item__comment__text" aria-label="Kommentar tekst">
+              ${r.text}
+            </span>
+            <time class="pkt-fileupload__queue-display__item__comment__time">
+              ${M(r.timestamp)}
+            </time>
+          </div>
+          <div class="pkt-fileupload__queue-display__item__comment__actions">
+            <button
+              type="button"
+              class="pkt-fileupload__queue-display__item__comment__action"
+              aria-label="Rediger kommentar"
+              ?disabled=${e.disabled}
+              @click=${e.activate}
+            >
+              <pkt-icon name="edit"></pkt-icon>
+            </button>
+            <button
+              type="button"
+              class="pkt-fileupload__queue-display__item__comment__action"
+              aria-label="Slett kommentar"
+              ?disabled=${e.disabled}
+              @click=${() => e.setAttribute(j, void 0)}
+            >
+              <pkt-icon name="trash-can"></pkt-icon>
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+	renderHidden: (e) => {
+		let n = e.getAttribute(j);
+		return t`<input
+      type="hidden"
+      name=${`${e.inputName}-comments`}
+      value=${n ? JSON.stringify(n) : ""}
+    />`;
+	}
+}), R = (e, n) => {
+	let r = D(e, n);
+	return r ? t`<span
+      class="pkt-fileupload__queue-display__item__title__head"
+      data-pkt-truncate-part="first"
+      >${r.head}</span
+    ><span
+      class="pkt-fileupload__queue-display__item__title__tail"
+      data-pkt-truncate-part="tail"
+      >${r.tail}</span
+    >` : t`<span data-pkt-truncate-part="first">${e}</span>`;
+}, z = (e, n, r) => t`
+  <p class="pkt-fileupload__queue-display__item__title">
+    ${R(e, r)}${n ? t`<span class="pkt-fileupload__queue-display__item__filesize"> (${n})</span>` : null}
+  </p>
+`, B = (e) => typeof e == "number" ? "in-progress" : e === "error" ? "error" : "idle", V = (e) => t`<span class="pkt-fileupload__queue-display__item__loading-text" aria-label="Laster opp fil"
+    >${e ?? "Laster opp..."}</span
+  >`, H = ({ operationId: e, file: t, inputName: n, disabled: r, isActive: i, onActivateOperation: a, onCloseOperation: o, getFileAttribute: s, setFileAttribute: c }) => ({
+	file: t,
+	inputName: n,
+	disabled: r,
+	isActive: i,
+	activate: () => a(t.fileId, e),
+	close: () => o(t.fileId),
+	getAttribute: (e) => s(t.fileId, e),
+	setAttribute: (e, n) => c(t.fileId, e, n)
+}), U = ({ file: e, fileSize: n, disabled: r, transferProgress: i, transferShowProgress: a, loadingText: o, truncateTail: s, onCancel: c, iconName: l = "document-text" }) => {
+	let u = k(e), d = a ?? i !== 0;
+	return t`
+    <pkt-icon
+      name=${l}
+      class="pkt-fileupload__queue-display__item__icon pkt-icon--medium"
+      aria-hidden="true"
+    ></pkt-icon>
+    ${z(u, n, s)}
+    <button
+      type="button"
+      class="pkt-fileupload__queue-display__item__cancel-button"
+      aria-label="Avbryt opplasting"
+      ?disabled=${r}
+      @click=${() => c(e.fileId)}
+    >
+      Avbryt
+    </button>
+    ${d ? t`
+          <pkt-progressbar
+            class="pkt-fileupload__queue-display__item__progress"
+            valueCurrent=${Math.round(i * 100)}
+            valueMax=${100}
+            statusType="none"
+            statusPlacement="following"
+          ></pkt-progressbar>
+          <span class="pkt-fileupload__queue-display__item__percentage" aria-hidden="true"
+            >${Math.round(i * 100)}%</span
+          >
+        ` : V(o)}
+  `;
+}, W = ({ file: e, fileSize: n, disabled: r, transferShowProgress: i, transferLastProgress: a, transferErrorMessage: o, truncateTail: s, onCancel: c }) => {
+	let l = k(e), u = !!i, d = Math.round((a ?? 1) * 100);
+	return t`
+    <pkt-icon
+      name="alert-error"
+      class="pkt-fileupload__queue-display__item__icon pkt-icon--medium"
+      aria-hidden="true"
+    ></pkt-icon>
+    ${z(l, n, s)}
+    <button
+      type="button"
+      class="pkt-fileupload__queue-display__item__cancel-button"
+      aria-label="Fjern fil som feilet under opplasting"
+      ?disabled=${r}
+      @click=${() => c(e.fileId)}
+    >
+      Fjern
+    </button>
+    ${u ? t`
+          <pkt-progressbar
+            class="pkt-fileupload__queue-display__item__progress pkt-fileupload__queue-display__item__progress--error"
+            valueCurrent=${d}
+            valueMax=${100}
+            statusType="none"
+            statusPlacement="following"
+          ></pkt-progressbar>
+        ` : null}
+    ${o ? t`<span class="pkt-fileupload__queue-display__item__error-message"
+          >${o}</span
+        >` : null}
+  `;
+}, G = ({ file: e, disabled: n, inputName: r, operations: i, activeOperationId: a, onActivateOperation: o, onCloseOperation: c, getFileAttribute: l, setFileAttribute: u }) => {
+	let d = i.find((e) => e.id === a);
+	if (d?.renderInlineUI || d?.renderExtendedUI) return null;
+	let f = i.map((i) => {
+		let d = H({
+			operationId: i.id,
+			file: e,
+			inputName: r,
+			disabled: n,
+			isActive: i.id === a,
+			onActivateOperation: o,
+			onCloseOperation: c,
+			getFileAttribute: l,
+			setFileAttribute: u
+		}), f = typeof i.title == "function" ? i.title(e) : i.title;
+		return f ? t`<button
+        type="button"
+        class="pkt-fileupload__queue-display__item__operation"
+        aria-label=${s(typeof i.ariaLabel == "function" ? i.ariaLabel(e) : i.ariaLabel)}
+        ?disabled=${n}
+        @click=${() => {
+			(i.renderInlineUI || i.renderExtendedUI) && d.activate(), i.onClick?.(d);
+		}}
+      >
+        ${f}
+      </button>` : null;
+	}).filter(Boolean);
+	return f.length === 0 ? null : t`<div class="pkt-fileupload__queue-display__item__actions">${f}</div>`;
+}, K = ({ file: e, disabled: n, inputName: r, operations: i, activeOperationId: a, onActivateOperation: o, onCloseOperation: s, getFileAttribute: c, setFileAttribute: l }) => i.map((i) => {
+	if (!i.renderContent) return null;
+	let u = H({
+		operationId: i.id,
+		file: e,
+		inputName: r,
+		disabled: n,
+		isActive: i.id === a,
+		onActivateOperation: o,
+		onCloseOperation: s,
+		getFileAttribute: c,
+		setFileAttribute: l
+	}), d = i.renderContent(u);
+	return d == null ? null : t`<div class="pkt-fileupload__queue-display__item__operation-content">
+      ${d}
+    </div>`;
+}), q = ({ file: e, disabled: n, inputName: r, operations: i, activeOperationId: a, onActivateOperation: o, onCloseOperation: s, getFileAttribute: c, setFileAttribute: l }) => {
+	if (!a) return null;
+	let u = i.find((e) => e.id === a);
+	if (!u?.renderExtendedUI) return null;
+	let d = H({
+		operationId: u.id,
+		file: e,
+		inputName: r,
+		disabled: n,
+		isActive: !0,
+		onActivateOperation: o,
+		onCloseOperation: s,
+		getFileAttribute: c,
+		setFileAttribute: l
+	});
+	return t`<div class="pkt-fileupload__queue-display__item__expanded-operation-ui">
+    ${u.renderExtendedUI(d)}
+  </div>`;
+}, J = ({ file: e, disabled: t, inputName: n, operations: r, activeOperationId: i, onActivateOperation: a, onCloseOperation: o, getFileAttribute: s, setFileAttribute: c }) => r.map((r) => {
+	if (!r.renderHidden) return null;
+	let l = H({
+		operationId: r.id,
+		file: e,
+		inputName: n,
+		disabled: t,
+		isActive: r.id === i,
+		onActivateOperation: a,
+		onCloseOperation: o,
+		getFileAttribute: s,
+		setFileAttribute: c
+	});
+	return r.renderHidden(l);
+}), Y = (e, n, r) => t`
+    <pkt-icon
+      name="document-text"
+      class="pkt-fileupload__queue-display__item__icon pkt-icon--medium"
+      aria-hidden="true"
+    ></pkt-icon>
+    ${z(k(e), n, r)}
+  `, X = ({ file: e, thumbnailUrl: n, previewEnabled: r, canOpenPreview: i, truncateTail: a, onOpenPreview: c, onThumbnailImageError: l }) => {
+	let u = k(e), d = !!n, f = !!r && !!i, p = f && !!c;
+	return t`
+    <div
+      class=${o({
+		"pkt-fileupload__queue-display__item__thumbnail": !0,
+		"pkt-fileupload__queue-display__item__thumbnail--fallback": !d
+	})}
+    >
+      <button
+        type="button"
+        class="pkt-fileupload__queue-display__item__thumbnail__image-wrapper pkt-btn pkt-btn--medium pkt-btn--secondary pkt-btn--label-only"
+        aria-label=${`Forhåndsvis bilde ${u}`}
+        ?disabled=${!p}
+        @click=${() => {
+		!p || !c || c(e.fileId);
+	}}
+      >
+        <span class="pkt-btn__text">
+          ${f ? t`<pkt-icon
+                name="expand"
+                class="pkt-fileupload__queue-display__item__thumbnail__expand-icon"
+                aria-hidden="true"
+              ></pkt-icon>` : null}
+          ${d ? t`<img
+                src=${s(n)}
+                alt=${u}
+                @error=${() => l?.(e.fileId)}
+              />` : t`<pkt-icon
+                name="document-text"
+                class="pkt-fileupload__queue-display__item__icon pkt-icon--medium"
+                aria-hidden="true"
+              ></pkt-icon>`}
+        </span>
+      </button>
+      <span class="pkt-fileupload__queue-display__item__thumbnail__title"
+        >${R(u, a)}</span
+      >
+    </div>
+  `;
+}, Z = ({ file: e, inputName: n, disabled: r, fileSize: i, operations: a, activeOperationId: s, onActivateOperation: c, onCloseOperation: l, getFileAttribute: u, setFileAttribute: d, transferProgress: f, transferErrorMessage: p, transferShowProgress: m, transferLastProgress: h, loadingText: g, truncateTail: _, onCancel: v }) => {
+	let y = B(f), b = a.find((e) => e.id === s), x = b?.renderInlineUI ? b.renderInlineUI(H({
+		operationId: b.id,
+		file: e,
+		inputName: n,
+		disabled: r,
+		isActive: !0,
+		onActivateOperation: c,
+		onCloseOperation: l,
+		getFileAttribute: u,
+		setFileAttribute: d
+	})) : null;
+	return t`
+    <li
+      class=${o({
+		"pkt-fileupload__queue-display__item": !0,
+		"pkt-fileupload__queue-display__item--in-progress": y === "in-progress",
+		"pkt-fileupload__queue-display__item--error": y === "error",
+		[`pkt-fileupload__queue-display__item--${f}`]: typeof f == "string"
+	})}
+    >
+      ${J({
+		file: e,
+		disabled: r,
+		inputName: n,
+		operations: a,
+		activeOperationId: s,
+		onActivateOperation: c,
+		onCloseOperation: l,
+		getFileAttribute: u,
+		setFileAttribute: d
+	})}
+      ${y === "in-progress" ? U({
+		file: e,
+		fileSize: i,
+		disabled: r,
+		transferProgress: f,
+		transferShowProgress: m,
+		loadingText: g,
+		truncateTail: _,
+		onCancel: v
+	}) : y === "error" ? W({
+		file: e,
+		fileSize: i,
+		disabled: r,
+		transferShowProgress: m,
+		transferLastProgress: h,
+		transferErrorMessage: p,
+		truncateTail: _,
+		onCancel: v
+	}) : x ? t`
+                <pkt-icon
+                  name="document-text"
+                  class="pkt-fileupload__queue-display__item__icon pkt-icon--medium"
+                  aria-hidden="true"
+                ></pkt-icon>
+                <div class="pkt-fileupload__queue-display__item__inline-ui">
+                  ${x}
+                </div>
+              ` : Y(e, i, _)}
+      ${y === "idle" ? G({
+		file: e,
+		disabled: r,
+		inputName: n,
+		operations: a,
+		activeOperationId: s,
+		onActivateOperation: c,
+		onCloseOperation: l,
+		getFileAttribute: u,
+		setFileAttribute: d
+	}) : null}
+      ${y === "idle" ? K({
+		file: e,
+		disabled: r,
+		inputName: n,
+		operations: a,
+		activeOperationId: s,
+		onActivateOperation: c,
+		onCloseOperation: l,
+		getFileAttribute: u,
+		setFileAttribute: d
+	}) : null}
+      ${y === "idle" ? q({
+		file: e,
+		disabled: r,
+		inputName: n,
+		operations: a,
+		activeOperationId: s,
+		onActivateOperation: c,
+		onCloseOperation: l,
+		getFileAttribute: u,
+		setFileAttribute: d
+	}) : null}
+    </li>
+  `;
+}, Q = ({ file: e, inputName: n, disabled: r, fileSize: i, thumbnailUrl: a, previewEnabled: s, canOpenPreview: c, operations: l, activeOperationId: u, onActivateOperation: d, onCloseOperation: f, getFileAttribute: p, setFileAttribute: m, transferProgress: h, transferErrorMessage: g, transferShowProgress: _, transferLastProgress: v, loadingText: y, truncateTail: b, onCancel: x, onOpenPreview: S, onThumbnailImageError: C }) => {
+	let w = B(h), T = l.find((e) => e.id === u), E = T?.renderInlineUI ? T.renderInlineUI(H({
+		operationId: T.id,
+		file: e,
+		inputName: n,
+		disabled: r,
+		isActive: !0,
+		onActivateOperation: d,
+		onCloseOperation: f,
+		getFileAttribute: p,
+		setFileAttribute: m
+	})) : null;
+	return t`
+    <li
+      class=${o({
+		"pkt-fileupload__queue-display__item": !0,
+		"pkt-fileupload__queue-display__item--in-progress": w === "in-progress",
+		"pkt-fileupload__queue-display__item--error": w === "error",
+		[`pkt-fileupload__queue-display__item--${h}`]: typeof h == "string"
+	})}
+    >
+      ${J({
+		file: e,
+		disabled: r,
+		inputName: n,
+		operations: l,
+		activeOperationId: u,
+		onActivateOperation: d,
+		onCloseOperation: f,
+		getFileAttribute: p,
+		setFileAttribute: m
+	})}
+      ${w === "in-progress" ? U({
+		file: e,
+		fileSize: i,
+		disabled: r,
+		transferProgress: h,
+		transferShowProgress: _,
+		loadingText: y,
+		truncateTail: b,
+		onCancel: x,
+		iconName: "picture"
+	}) : w === "error" ? W({
+		file: e,
+		fileSize: i,
+		disabled: r,
+		transferShowProgress: _,
+		transferLastProgress: v,
+		transferErrorMessage: g,
+		truncateTail: b,
+		onCancel: x
+	}) : E ? t`
+                <pkt-icon
+                  name="picture"
+                  class="pkt-fileupload__queue-display__item__icon pkt-icon--medium"
+                  aria-hidden="true"
+                ></pkt-icon>
+                <div class="pkt-fileupload__queue-display__item__inline-ui">
+                  ${E}
+                </div>
+              ` : X({
+		file: e,
+		thumbnailUrl: a,
+		previewEnabled: s,
+		canOpenPreview: c,
+		truncateTail: b,
+		onOpenPreview: S,
+		onThumbnailImageError: C
+	})}
+      ${w === "idle" ? G({
+		file: e,
+		disabled: r,
+		inputName: n,
+		operations: l,
+		activeOperationId: u,
+		onActivateOperation: d,
+		onCloseOperation: f,
+		getFileAttribute: p,
+		setFileAttribute: m
+	}) : null}
+      ${w === "idle" ? K({
+		file: e,
+		disabled: r,
+		inputName: n,
+		operations: l,
+		activeOperationId: u,
+		onActivateOperation: d,
+		onCloseOperation: f,
+		getFileAttribute: p,
+		setFileAttribute: m
+	}) : null}
+      ${w === "idle" ? q({
+		file: e,
+		disabled: r,
+		inputName: n,
+		operations: l,
+		activeOperationId: u,
+		onActivateOperation: d,
+		onCloseOperation: f,
+		getFileAttribute: p,
+		setFileAttribute: m
+	}) : null}
+    </li>
+  `;
+}, $ = class extends A {
+	constructor(...e) {
+		super(...e), this.activeOperationByFileId = {}, this.isPreviewModalOpen = !1, this.previewCurrentIndex = 0, this.failedImageFileIds = {}, this.closePreview = () => {
+			this.isPreviewModalOpen = !1;
+		}, this.onPreviewKeyDown = (e, t) => {
+			if (this.isPreviewModalOpen) {
+				if (e.key === "Tab") {
+					E(e, e.currentTarget);
+					return;
+				}
+				switch (e.key) {
+					case "ArrowLeft":
+						e.preventDefault(), this.navigatePreview("prev", t);
+						break;
+					case "ArrowRight":
+						e.preventDefault(), this.navigatePreview("next", t);
+						break;
+					case "Escape":
+						e.preventDefault(), this.closePreview();
+						break;
+					default: break;
+				}
+			}
+		};
+	}
+	render() {
+		let e = this.renderContent();
+		return this.label ? t`
+      <pkt-input-wrapper
+        .forId=${`${this.id}-input`}
+        .label=${this.label}
+        .helptext=${this.helptext}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasEffectiveError}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        class=${o({
+			"pkt-fileupload-wrapper": !0,
+			"pkt-fileupload-wrapper--full-width": this.fullwidth
+		})}
+      >
+        ${e}
+      </pkt-input-wrapper>
+    ` : e;
+	}
+	renderContent() {
+		let e = this.getSortedFilesAndTransfers(), n = this.getPreviewableImages(e), r = this.getSupportedFormatsText(), i = [!this.label && this.helptext ? `${this.id}-helptext` : void 0, this.hasEffectiveError ? `${this.id}-error` : void 0].filter(Boolean).join(" ") || void 0, a = this.itemRenderer === "thumbnail" ? this.multiple ? {
+			dragInactive: u.dropZoneDragMultipleThumbnail,
+			dragActive: u.dropZoneDragActiveMultipleThumbnail,
+			openFileDialog: u.dropZoneOpenFileDialogMultipleThumbnail
+		} : {
+			dragInactive: u.dropZoneDragSingleThumbnail,
+			dragActive: u.dropZoneDragActiveSingleThumbnail,
+			openFileDialog: u.dropZoneOpenFileDialogSingleThumbnail
+		} : this.multiple ? {
+			dragInactive: u.dropZoneDragMultiple,
+			dragActive: u.dropZoneDragActiveMultiple,
+			openFileDialog: u.dropZoneOpenFileDialogMultiple
+		} : {
+			dragInactive: u.dropZoneDragSingle,
+			dragActive: u.dropZoneDragActiveSingle,
+			openFileDialog: u.dropZoneOpenFileDialogSingle
+		};
+		return t`
+      <div
+        class=${o({
+			"pkt-fileupload": !0,
+			"pkt-fileupload--full-width": this.fullwidth,
+			"pkt-fileupload--error": this.hasEffectiveError,
+			"pkt-fileupload--disabled": this.disabled
+		})}
+        aria-disabled=${String(this.disabled)}
+        ?inert=${this.disabled}
+      >
+        <div class="pkt-sr-only" aria-live="polite" aria-atomic="true">
+          ${this.getSrUploadedMessage()}
+        </div>
+        <div class="pkt-sr-only" aria-live="assertive" aria-atomic="true">
+          ${this.getSrErrorsMessage()}
+        </div>
+        <div
+          class=${o({
+			"pkt-fileupload__drop-zone": !0,
+			"pkt-fileupload__drop-zone--drag-active": this.isDragActive,
+			"pkt-fileupload__drop-zone--disabled": this.disabled
+		})}
+          @dragover=${this.onDragOver}
+          @dragleave=${this.onDragLeave}
+          @drop=${this.onDrop}
+          @click=${this.onDropZoneClick}
+        >
+          <input
+            id=${`${this.id}-input`}
+            type="file"
+            name=${s(this.uploadStrategy === "form" ? this.name : void 0)}
+            ?multiple=${this.multiple}
+            ?disabled=${this.disabled}
+            ?required=${this.required && this.uploadStrategy === "form"}
+            accept=${this.getResolvedAcceptValue()}
+            aria-label=${s(this.label ? void 0 : this.multiple ? "Velg filer" : "Velg fil")}
+            aria-required=${s(this.required ? "true" : void 0)}
+            aria-invalid=${s(this.hasEffectiveError ? "true" : void 0)}
+            aria-describedby=${s(i)}
+            @change=${this.onNativeFileChange}
+          />
+          ${this.uploadStrategy === "custom" ? e.map((e) => t`<input type="hidden" name=${this.name} value=${e.fileId} />`) : null}
+          <div class="pkt-fileupload__drop-zone__placeholder">
+            <pkt-icon
+              name="attachment"
+              class="pkt-fileupload__drop-zone__placeholder__icon"
+              aria-hidden="true"
+            ></pkt-icon>
+            <p class="pkt-fileupload__drop-zone__placeholder__title">
+              ${this.isDragActive ? `${a.dragActive} ...` : t`${a.dragInactive}
+                    <button
+                      type="button"
+                      class="pkt-fileupload__drop-zone__placeholder__title__open-file-dialog"
+                      @click=${this.openFileDialog}
+                    >
+                      ${a.openFileDialog}
+                    </button>`}
+            </p>
+            ${r ? t`<p class="pkt-fileupload__drop-zone__placeholder__formats">
+                  ${u.supportedFormatsPrefix} ${r}
+                </p>` : null}
+          </div>
+        </div>
+        ${this.hasEffectiveError ? t`
+              <pkt-alert
+                skin="error"
+                role="alert"
+                aria-live="assertive"
+                compact
+                id=${`${this.id}-error`}
+                class="pkt-alert--error pkt-fileupload__error-alert"
+              >
+                ${this.effectiveErrorMessage}
+              </pkt-alert>
+            ` : null}
+        ${e.length > 0 ? t`<ul class="pkt-fileupload__queue-display">
+              ${e.map((e) => this.renderQueueItem(e, n))}
+            </ul>` : null}
+        ${this.renderPreviewModal(n)}
+      </div>
+    `;
+	}
+	renderQueueItem(e, t) {
+		let n = typeof e.file?.size == "number" ? this.formatFileSize(e.file.size) : "", r = this.getQueueItemOperations();
+		if (this.itemRenderer === "thumbnail") {
+			let i = this.canOpenPreview(e), a = this.failedImageFileIds[e.fileId]?.thumbnail ? void 0 : this.getThumbnailUrl(e);
+			return Q({
+				file: e,
+				inputName: this.name,
+				disabled: this.disabled,
+				fileSize: n,
+				operations: r,
+				activeOperationId: this.activeOperationByFileId[e.fileId],
+				onActivateOperation: (e, t) => this.activateOperation(e, t),
+				onCloseOperation: (e) => this.closeOperation(e),
+				getFileAttribute: (e, t) => this.getFileAttribute(e, t),
+				setFileAttribute: (e, t, n) => this.setFileAttribute(e, t, n),
+				thumbnailUrl: a,
+				previewEnabled: this.enableImagePreview,
+				canOpenPreview: i,
+				transferProgress: e.progress,
+				transferErrorMessage: e.errorMessage,
+				transferShowProgress: e.showProgress,
+				transferLastProgress: e.lastProgress,
+				loadingText: "Laster opp",
+				truncateTail: this.truncateTail,
+				onCancel: (e) => this.cancelTransfer(e),
+				onOpenPreview: (e) => this.openPreview(e, t),
+				onThumbnailImageError: (e) => this.markImageFailed(e, "thumbnail")
+			});
+		}
+		return Z({
+			file: e,
+			inputName: this.name,
+			disabled: this.disabled,
+			fileSize: n,
+			operations: r,
+			activeOperationId: this.activeOperationByFileId[e.fileId],
+			onActivateOperation: (e, t) => this.activateOperation(e, t),
+			onCloseOperation: (e) => this.closeOperation(e),
+			getFileAttribute: (e, t) => this.getFileAttribute(e, t),
+			setFileAttribute: (e, t, n) => this.setFileAttribute(e, t, n),
+			transferProgress: e.progress,
+			transferErrorMessage: e.errorMessage,
+			transferShowProgress: e.showProgress,
+			transferLastProgress: e.lastProgress,
+			loadingText: "Laster opp",
+			truncateTail: this.truncateTail,
+			onCancel: (e) => this.cancelTransfer(e)
+		});
+	}
+	markImageFailed(e, t) {
+		this.failedImageFileIds = {
+			...this.failedImageFileIds,
+			[e]: {
+				...this.failedImageFileIds[e],
+				[t]: !0
+			}
+		};
+	}
+	getPreviewableImages(e) {
+		return this.enableImagePreview ? e.filter((e) => e.progress === "done" && this.isImageFile(e)) : [];
+	}
+	canOpenPreview(e) {
+		return this.enableImagePreview && e.progress === "done" && this.isImageFile(e);
+	}
+	openPreview(e, t) {
+		let n = t.findIndex((t) => t.fileId === e);
+		n < 0 || (this.previewCurrentIndex = n, this.isPreviewModalOpen = !0, this.failedImageFileIds = {
+			...this.failedImageFileIds,
+			[e]: {
+				...this.failedImageFileIds[e],
+				preview: !1
+			}
+		});
+	}
+	navigatePreview(e, t) {
+		t.length !== 0 && (this.previewCurrentIndex = ee(this.previewCurrentIndex, e, t.length));
+	}
+	renderPreviewModal(e) {
+		if (!this.enableImagePreview || e.length === 0) return null;
+		let n = e[this.previewCurrentIndex];
+		if (!n) return null;
+		let r = e.length > 1, i = this.getThumbnailUrl(n), a = !!i && !this.failedImageFileIds[n.fileId]?.preview, o = n.attributes?.targetFilename || n.file?.name || "Forhåndsvisning";
+		return t`
+      <pkt-modal
+        .open=${this.isPreviewModalOpen}
+        .headingText=${o}
+        closeOnBackdropClick
+        class="pkt-fileupload__image-preview-modal"
+        @close=${this.closePreview}
+        @keydown=${(t) => this.onPreviewKeyDown(t, e)}
+      >
+        <div class="pkt-fileupload__image-preview">
+          ${r ? t`<button
+                type="button"
+                class="pkt-fileupload__image-preview__nav pkt-fileupload__image-preview__nav--prev pkt-btn pkt-btn--medium pkt-btn--secondary pkt-btn--icon-only"
+                aria-label=${`Forrige bilde ${this.previewCurrentIndex} / ${e.length}`}
+                @click=${() => this.navigatePreview("prev", e)}
+              >
+                <pkt-icon
+                  class="pkt-btn__icon pkt-icon"
+                  name="chevron-thin-left"
+                  aria-hidden="true"
+                ></pkt-icon>
+                <span class="pkt-btn__text"></span>
+              </button>` : null}
+
+          <div class="pkt-fileupload__image-preview__content">
+            ${a ? t`<img
+                  src=${i}
+                  alt=${`${o} - ${this.previewCurrentIndex + 1} av ${e.length}`}
+                  class="pkt-fileupload__image-preview__image"
+                  @error=${() => this.markImageFailed(n.fileId, "preview")}
+                />` : t`<pkt-icon
+                  name="picture"
+                  class="pkt-fileupload__queue-display__item__icon pkt-icon--medium"
+                  aria-hidden="true"
+                ></pkt-icon>`}
+          </div>
+
+          ${r ? t`<span class="pkt-fileupload__image-preview__counter">
+                ${this.previewCurrentIndex + 1} / ${e.length}
+              </span>` : null}
+          ${r ? t`<button
+                type="button"
+                class="pkt-fileupload__image-preview__nav pkt-fileupload__image-preview__nav--next pkt-btn pkt-btn--medium pkt-btn--secondary pkt-btn--icon-only"
+                aria-label=${`Neste bilde ${this.previewCurrentIndex + 2} / ${e.length}`}
+                @click=${() => this.navigatePreview("next", e)}
+              >
+                <pkt-icon
+                  class="pkt-btn__icon pkt-icon"
+                  name="chevron-thin-right"
+                  aria-hidden="true"
+                ></pkt-icon>
+                <span class="pkt-btn__text"></span>
+              </button>` : null}
+        </div>
+      </pkt-modal>
+    `;
+	}
+	getQueueItemOperations() {
+		let e = [];
+		return this.renameFilesEnabled && this.itemRenderer !== "thumbnail" && e.push(I()), this.addCommentsEnabled && this.itemRenderer !== "thumbnail" && e.push(L()), e.push(...this.extraOperations), e.push(F((e) => this.removeFileItem(e))), e;
+	}
+	activateOperation(e, t) {
+		this.activeOperationByFileId = {
+			...this.activeOperationByFileId,
+			[e]: t
+		};
+	}
+	closeOperation(e) {
+		this.activeOperationByFileId = {
+			...this.activeOperationByFileId,
+			[e]: void 0
+		};
+	}
+	getFileAttribute(e, t) {
+		let n = this.getCurrentFiles().find((t) => t.fileId === e);
+		if (n) return n.attributes?.[t] ?? void 0;
+	}
+	setFileAttribute(e, t, n) {
+		let r = this.getCurrentFiles().find((t) => t.fileId === e);
+		if (!r) return;
+		let i = {
+			...r.attributes,
+			[t]: n
+		};
+		n === void 0 && delete i[t], this.updateFileItem(e, { attributes: i });
+	}
+};
+r([n()], $.prototype, "activeOperationByFileId", void 0), r([n()], $.prototype, "isPreviewModalOpen", void 0), r([n()], $.prototype, "previewCurrentIndex", void 0), r([n()], $.prototype, "failedImageFileIds", void 0), $ = r([e("pkt-fileupload")], $);
+//#endregion
+//#region src/components/fileupload/index.ts
+var te = $;
+//#endregion
+export { $ as n, te as t };