@oslokommune/punkt-elements/dist/fileupload-F9UMO7eS.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

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-DVU68NcJ.js";
import "./modal-Ca7dETTw.js";
import "./progressbar-o-M17HPA.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 };