@oslokommune/punkt-elements 16.26.2 → 16.26.5

package/dist/{fileupload-DpvQ3e_T.js → fileupload-2hf8YNhO.js}

@@ -179,12 +179,12 @@ function D(e, t) {
 }
 //#endregion
 //#region ../../shared-utils/fileupload/navigation.ts
-function ee(e, t, n) {
+function O(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) {
+function k(e, t) {
 	let n = e.length;
 	if (n === 0 || !t || t.length === 0) return {
 		totalCount: n,
@@ -204,14 +204,316 @@ function O(e, t) {
 }
 //#endregion
 //#region ../../shared-utils/fileupload/filename.ts
-function k(e, t = u.unknownFilename) {
+function A(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 {
+var j = {
+	name: "pkt-fileupload",
+	react: "PktFileUpload",
+	"css-class": "pkt-fileupload",
+	isElement: !1,
+	isPureReact: !0,
+	"dark-mode": !0,
+	props: {
+		name: {
+			type: "string",
+			name: "Navn for innsending",
+			category: "tech",
+			required: !0
+		},
+		label: {
+			type: "string",
+			name: "Etikett",
+			description: "Etikett/tittel over komponenten",
+			category: "form"
+		},
+		helptext: {
+			type: "string | ReactNode",
+			name: "Hjelpetekst",
+			description: "Hjelpetekst under etiketten",
+			category: "form"
+		},
+		helptextDropdown: {
+			type: "string",
+			name: "Utvidet hjelpetekst",
+			description: "Hjelpetekst som vises i en lukket boks man kan åpne",
+			category: "contents"
+		},
+		helptextDropdownButton: {
+			type: "string",
+			name: "Knappetekst for utvidet hjelpetekst",
+			default: "Les mer",
+			category: "contents"
+		},
+		required: {
+			type: "boolean",
+			name: "Påkrevd",
+			description: "Gjør feltet obligatorisk. I `uploadStrategy='form'` brukes native validering på file input. I `uploadStrategy='custom'` valideres kravet ved submit og komponenten viser feilmelding hvis ingen filer er valgt.",
+			default: !1,
+			category: "form"
+		},
+		value: {
+			type: "FileItemList",
+			name: "Fil-liste (controlled)",
+			description: "Liste over filer i komponenten. Bruk denne for controlled-modus.",
+			category: "form"
+		},
+		defaultValue: {
+			type: "FileItem[]",
+			name: "Default-verdi (uncontrolled)",
+			description: "Default-verdi når komponenten brukes 'uncontrolled'. Ingen grunn til at denne ikke skal være tom array `[]`",
+			category: "form"
+		},
+		onFilesChanged: {
+			type: "(files: FileItem[]) => void",
+			name: "Callback ved fil-endring",
+			description: "Kalles når fil(er) legges til, fjernes eller oppdateres",
+			category: "tech"
+		},
+		uploadStrategy: {
+			name: "Opplastingstype",
+			type: ["form", "custom"],
+			values: {
+				form: "form (når filer lastes opp ved submit)",
+				custom: "custom (når filer lastes opp via webappens egen logikk)"
+			},
+			description: "Velg mellom skjemaopplasting (filene sendes når skjemaet sendes inn) og bakgrunnsopplasting (webappen håndterer opplasting via `onFileUploadRequested` og oppdaterer `transfers`).",
+			default: "form",
+			category: "functionality"
+		},
+		multiple: {
+			type: "boolean",
+			name: "Tillat opplasting av flere filer",
+			default: !1,
+			category: "functionality"
+		},
+		itemRenderer: {
+			type: ["filename", "thumbnail"],
+			name: "Visningtype av filer",
+			description: "Hvordan filer skal vises i opplastings-køen. Enten filnavn eller som thumbnails. Du kan også (eksperimentelt) lage din egen komponent.",
+			default: "filename",
+			category: "functionality"
+		},
+		optionalTag: {
+			type: "boolean",
+			name: "Vis 'Valgfritt'-tag",
+			description: "Vis 'Valgfritt'-tag ved etiketten",
+			category: "form"
+		},
+		optionalText: {
+			type: "string",
+			name: "Valgfritt-tekst",
+			description: "Tekst som vises i valgfritt-merkingen",
+			default: "Valgfritt",
+			category: "contents"
+		},
+		requiredTag: {
+			type: "boolean",
+			name: "Vis 'Må fylles ut'-tag",
+			description: "Vis 'Må fylles ut'-tag ved etiketten",
+			category: "form"
+		},
+		requiredText: {
+			type: "string",
+			name: "Påkrevd-tekst",
+			description: "Tekst som vises i påkrevd-merkingen",
+			default: "Må fylles ut",
+			category: "contents"
+		},
+		tagText: {
+			type: "string",
+			name: "Tag-tekst",
+			description: "Tekst som vises i en tag ved siden av label",
+			category: "ui"
+		},
+		disabled: {
+			type: "boolean",
+			name: "Deaktivert",
+			description: "Deaktiverer hele komponenten - ingen interaksjon mulig",
+			default: !1,
+			category: "form"
+		},
+		errorMessage: {
+			type: "string",
+			name: "Feilmelding",
+			description: "Feilmelding for å vise under komponenten (ekstern/programmatisk feil)",
+			default: "Det oppstod en feil ved opplastingen av fil(ene).",
+			category: "form"
+		},
+		hasError: {
+			type: "boolean",
+			name: "Har feil",
+			description: "Om komponenten har en feiltilstand",
+			default: !1,
+			category: "form"
+		},
+		allowedFormats: {
+			type: "string[]",
+			name: "Tillatte filformater",
+			description: "Liste over tillatte filformater. F.eks. ['pdf', 'jpg', 'png'] eller ['image/*', 'application/pdf']",
+			category: "validation"
+		},
+		formatErrorMessage: {
+			type: "string",
+			name: "Feilmelding for ugyldig format",
+			description: "Tilpasset feilmelding ved ugyldig filtype.",
+			category: "validation"
+		},
+		maxFileSize: {
+			type: "string | number",
+			name: "Maks filstørrelse",
+			description: "Maksimal filstørrelse. F.eks. '5MB', '500KB', '1GB' eller antall bytes",
+			category: "validation"
+		},
+		onFileValidation: {
+			type: "(file: File) => string | null",
+			name: "Egendefinert validering",
+			description: "Kjører etter innebygd format/størrelse-validering. Returner feilmeldingsstreng hvis ugyldig, null hvis gyldig.",
+			category: "validation"
+		},
+		sizeErrorMessage: {
+			type: "string",
+			name: "Feilmelding for stor fil",
+			description: "Tilpasset feilmelding ved for stor fil.",
+			category: "validation"
+		},
+		addCommentsEnabled: {
+			type: "boolean",
+			name: "Tillat kommentarer",
+			description: "La brukeren skrive en kommentar pr fil. Kommentarene postes i felter med navn `{fileupload-navn}-comment`",
+			default: !1,
+			showIf: { itemRenderer: "filename" },
+			category: "functionality"
+		},
+		enableImagePreview: {
+			type: "boolean",
+			name: "Forhåndsvisning av bilder",
+			description: "Aktiver forhåndsvisning av bilder i modal (kun for thumbnail-visning)",
+			default: !1,
+			showIf: { itemRenderer: "thumbnail" },
+			category: "functionality"
+		},
+		extraOperations: {
+			type: "Array<QueueItemOperation>",
+			name: "Ekstra operasjoner",
+			description: "Ekstra operasjoner pr fil (eksperimentelt). Hver operasjon er et objekt med stabil `id`, `title` og valgfrie `onClick`/`renderInlineUI`/`renderExtendedUI`/`renderContent`/`renderHidden`. Callbacks får et `context`-objekt med file, disabled, isActive, activate, close, getAttribute og setAttribute.",
+			category: "functionality"
+		},
+		fullwidth: {
+			type: "boolean",
+			name: "Full bredde",
+			description: "Om komponenten skal ta full bredde av foreldreelementet",
+			default: !1,
+			category: "styling"
+		},
+		onFileUploadRequested: {
+			type: "(fileItem: FileItem) => void",
+			name: "Callback for opplastingsforespørsel",
+			description: "Ved <code>uploadStrategy='custom'</code> blir denne funksjonen kalt når brukeren velger en eller flere filer. Dette lar webappen sette i gang opplasting i bakgrunnen.",
+			relatedTypes: ["FileItem"],
+			category: "functionality"
+		},
+		onTransferCancelled: {
+			type: "(fileItemId: string) => void",
+			name: "Callback for avbrutt opplasting",
+			description: "Kalles når brukeren klikker 'Slett' eller 'Avbryt'. Webappen må dermed avbryte opplastingen av denne fila.",
+			category: "functionality"
+		},
+		renameFilesEnabled: {
+			type: "boolean",
+			name: "Tillat å gi nytt navn",
+			description: "La brukeren angi et navn pr fil. Filnavnene postes i felter med navn `{fileupload-navn}-targetFilename`",
+			default: !1,
+			showIf: { itemRenderer: "filename" },
+			category: "functionality"
+		},
+		transfers: {
+			type: "Array<FileTransfer>",
+			name: "Pågående filoverføringer",
+			description: "Ved <code>uploadStrategy='custom'</code> vil du fortelle komponenten om pågående overføringer her. Hver fil har en progress-verdi.",
+			items: {
+				type: "object",
+				elementType: "FileTransfer",
+				ref: "FileTransfer"
+			},
+			category: "functionality"
+		},
+		truncateTail: {
+			type: "number",
+			name: "Forkort filnavn",
+			description: "Hvordan lange filnavn skal forkortes med ellipse i køen. Med `4` vil filnavnet vises som `langt-filnavn-med ... .pdf`. Med verdi `0` kommer ellipsen til slutt.",
+			category: "functionality"
+		},
+		previewUploadIntervalMs: {
+			type: "number",
+			name: "Demo: opplastingshastighet (ms/5%)",
+			description: "Kun for dokumentasjons-forhåndsvisning. Senker simulert opplasting for å demonstrere statusvisning. Gjelder kun i `uploadStrategy='custom'`.",
+			default: 100,
+			showIf: { uploadStrategy: "custom" },
+			category: "demo"
+		},
+		previewSimulateUploadError: {
+			type: "boolean",
+			name: "Demo: simuler feil ved 90% opplasting",
+			description: "Kun for dokumentasjons-forhåndsvisning. Hvis aktivert feiler simulert opplasting rundt 90%.",
+			default: !1,
+			showIf: { uploadStrategy: "custom" },
+			category: "demo"
+		},
+		previewUploadStatus: {
+			type: ["progressbar", "text"],
+			name: "Visning av opplastingstatus",
+			description: "Kun for dokumentasjons-forhåndsvisning. Vises kun når `uploadStrategy='custom'`. Status vises først etter at brukeren faktisk har valgt fil(er).",
+			default: "progressbar",
+			showIf: { uploadStrategy: "custom" },
+			category: "demo"
+		}
+	},
+	types: {
+		FileItem: {
+			description: "En valgt fil i køen. <code>FileItemList</code> er en array av <code>FileItem</code>. Brukes som parameter i callbacks som <code>onFileUploadRequested</code> og i <code>FileItemList</code> (<code>value</code> / <code>defaultValue</code>).",
+			properties: {
+				fileId: {
+					type: "string",
+					description: "Unik id for filen i komponenten."
+				},
+				file: {
+					type: "File",
+					description: "Fil-objektet fra nettleseren."
+				},
+				attributes: {
+					type: "Record<string, unknown>",
+					description: "Metadata per fil (f.eks. <code>targetFilename</code> for visningsnavn)."
+				}
+			}
+		},
+		FileTransfer: {
+			description: "Status for én pågående opplasting når <code>uploadStrategy=\"custom\"</code>.",
+			properties: {
+				fileId: {
+					type: "string",
+					description: "Kobler til <code>FileItem.fileId</code>."
+				},
+				progress: {
+					type: "number | 'done' | 'error' | 'canceled' | 'queued'",
+					description: "Fremdrift (<code>0..1</code>) eller tilstand."
+				},
+				errorMessage: {
+					type: "string",
+					description: "Feilmelding ved <code>error</code>.",
+					required: !1
+				},
+				showProgress: {
+					type: "boolean",
+					description: "Vis determinate progress vs. «Laster opp…».",
+					required: !1
+				}
+			}
+		}
+	}
+}, M = 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) => {
+		super(...e), this.id = `pkt-fileupload-${l()}`, this.name = "files", this.label = "", this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = j.props.helptextDropdownButton.default, 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.optionalText = j.props.optionalText.default, this.requiredTag = !1, this.requiredText = j.props.requiredText.default, this.tagText = null, 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) => {
@@ -419,11 +721,11 @@ var A = class extends a {
 	}
 	getSrUploadedMessage() {
 		if (this.addedAnnouncement) return this.addedAnnouncement;
-		let { totalCount: e, uploadedCount: t } = O(this.getCurrentFiles(), this.transfers);
+		let { totalCount: e, uploadedCount: t } = k(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);
+		let { totalCount: e, failedCount: t } = k(this.getCurrentFiles(), this.transfers);
 		return e === 0 || t === 0 ? "" : u.srFilesFailedOfTotal(t, e, u.fileLabel(e));
 	}
 	syncFormSubmitListener() {
@@ -434,77 +736,92 @@ var A = class extends a {
 		this.connectedForm &&= (this.connectedForm.removeEventListener("submit", this.onHostFormSubmit), null);
 	}
 };
-t([n({ type: String })], A.prototype, "id", void 0), t([n({ type: String })], A.prototype, "name", void 0), t([n({ type: String })], A.prototype, "label", void 0), t([n({ type: String })], A.prototype, "helptext", void 0), t([n({
+t([n({ type: String })], M.prototype, "id", void 0), t([n({ type: String })], M.prototype, "name", void 0), t([n({ type: String })], M.prototype, "label", void 0), t([n({ type: String })], M.prototype, "helptext", void 0), t([n({
+	type: String,
+	attribute: "helptext-dropdown"
+})], M.prototype, "helptextDropdown", void 0), t([n({
+	type: String,
+	attribute: "helptext-dropdown-button"
+})], M.prototype, "helptextDropdownButton", void 0), t([n({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "required", void 0), t([n({
+})], M.prototype, "required", void 0), t([n({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "multiple", void 0), t([n({
+})], M.prototype, "multiple", void 0), t([n({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "disabled", void 0), t([n({
+})], M.prototype, "disabled", void 0), t([n({
 	type: Boolean,
 	reflect: !0,
 	attribute: "fullwidth"
-})], A.prototype, "fullwidth", void 0), t([n({
+})], M.prototype, "fullwidth", void 0), t([n({
 	type: String,
 	reflect: !0,
 	attribute: "upload-strategy"
-})], A.prototype, "uploadStrategy", void 0), t([n({
+})], M.prototype, "uploadStrategy", void 0), t([n({
 	type: String,
 	reflect: !0,
 	attribute: "item-renderer"
-})], A.prototype, "itemRenderer", void 0), t([n({ type: String })], A.prototype, "accept", void 0), t([n({
+})], M.prototype, "itemRenderer", void 0), t([n({ type: String })], M.prototype, "accept", void 0), t([n({
 	converter: c.csvToArray,
 	attribute: "allowed-formats"
-})], A.prototype, "allowedFormats", void 0), t([n({
+})], M.prototype, "allowedFormats", void 0), t([n({
 	type: String,
 	attribute: "format-error-message"
-})], A.prototype, "formatErrorMessage", void 0), t([n({ attribute: "max-file-size" })], A.prototype, "maxFileSize", void 0), t([n({
+})], M.prototype, "formatErrorMessage", void 0), t([n({ attribute: "max-file-size" })], M.prototype, "maxFileSize", void 0), t([n({
 	type: String,
 	attribute: "size-error-message"
-})], A.prototype, "sizeErrorMessage", void 0), t([n({ attribute: !1 })], A.prototype, "onFileValidation", void 0), t([n({ attribute: !1 })], A.prototype, "transfers", void 0), t([n({
+})], M.prototype, "sizeErrorMessage", void 0), t([n({ attribute: !1 })], M.prototype, "onFileValidation", void 0), t([n({ attribute: !1 })], M.prototype, "transfers", void 0), t([n({
 	type: Boolean,
 	attribute: "add-comments-enabled"
-})], A.prototype, "addCommentsEnabled", void 0), t([n({
+})], M.prototype, "addCommentsEnabled", void 0), t([n({
 	type: Boolean,
 	attribute: "rename-files-enabled"
-})], A.prototype, "renameFilesEnabled", void 0), t([n({ attribute: !1 })], A.prototype, "extraOperations", void 0), t([n({
+})], M.prototype, "renameFilesEnabled", void 0), t([n({ attribute: !1 })], M.prototype, "extraOperations", void 0), t([n({
 	type: Boolean,
 	reflect: !0,
 	attribute: "enable-image-preview"
-})], A.prototype, "enableImagePreview", void 0), t([n({
+})], M.prototype, "enableImagePreview", void 0), t([n({
 	type: Boolean,
 	attribute: "has-error"
-})], A.prototype, "hasError", void 0), t([n({
+})], M.prototype, "hasError", void 0), t([n({
 	type: String,
 	attribute: "error-message"
-})], A.prototype, "errorMessage", void 0), t([n({
+})], M.prototype, "errorMessage", void 0), t([n({
 	type: Boolean,
 	attribute: "optional-tag"
-})], A.prototype, "optionalTag", void 0), t([n({
+})], M.prototype, "optionalTag", void 0), t([n({
+	type: String,
+	attribute: "optional-text"
+})], M.prototype, "optionalText", void 0), t([n({
 	type: Boolean,
 	attribute: "required-tag"
-})], A.prototype, "requiredTag", void 0), t([n({
+})], M.prototype, "requiredTag", void 0), t([n({
+	type: String,
+	attribute: "required-text"
+})], M.prototype, "requiredText", void 0), t([n({
+	type: String,
+	attribute: "tag-text"
+})], M.prototype, "tagText", void 0), t([n({
 	type: Number,
 	attribute: "truncate-tail"
-})], A.prototype, "truncateTail", void 0), t([n({ attribute: !1 })], A.prototype, "value", void 0), t([n({ attribute: !1 })], A.prototype, "defaultValue", void 0), t([e()], A.prototype, "files", void 0), t([e()], A.prototype, "isDragActive", void 0), t([e()], A.prototype, "validationErrorMessage", void 0), t([e()], A.prototype, "addedAnnouncement", void 0), t([e()], A.prototype, "thumbnailUrls", void 0);
+})], M.prototype, "truncateTail", void 0), t([n({ attribute: !1 })], M.prototype, "value", void 0), t([n({ attribute: !1 })], M.prototype, "defaultValue", void 0), t([e()], M.prototype, "files", void 0), t([e()], M.prototype, "isDragActive", void 0), t([e()], M.prototype, "validationErrorMessage", void 0), t([e()], M.prototype, "addedAnnouncement", void 0), t([e()], M.prototype, "thumbnailUrls", void 0);
 //#endregion
 //#region src/components/fileupload/fileupload-operations.ts
-var j = "comments", M = (e) => {
+var N = "comments", P = (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) => {
+}, F = (e, t, n) => {
 	e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), t()), e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), n());
-}, P = (e, t, n) => {
+}, I = (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) => ({
+}, L = (e) => ({
 	id: "remove",
 	title: "Slett",
 	ariaLabel: "Slett fil",
 	onClick: ({ file: t }) => e(t.fileId)
-}), I = () => ({
+}), R = () => ({
 	id: "rename",
 	title: "Rediger",
 	ariaLabel: "Rediger filnavn",
@@ -521,7 +838,7 @@ var j = "comments", M = (e) => {
         class="pkt-fileupload__queue-display__item__rename-input"
         ?disabled=${e.disabled}
         .value=${t}
-        @keydown=${(t) => N(t, i, e.close)}
+        @keydown=${(t) => F(t, i, e.close)}
       />
       <button
         type="button"
@@ -549,14 +866,14 @@ var j = "comments", M = (e) => {
       value=${t}
     />`;
 	}
-}), L = () => ({
+}), z = () => ({
 	id: "comment",
-	title: (e) => (e.attributes?.[j] ?? []).length > 0 ? "" : "Legg til kommentar",
+	title: (e) => (e.attributes?.[N] ?? []).length > 0 ? "" : "Legg til kommentar",
 	ariaLabel: "Legg til kommentar",
 	renderExtendedUI: (e) => {
-		let t = (e.getAttribute(j) ?? [])[0], n = `pkt-fileupload-comment-${e.file.fileId}`, i = () => {
+		let t = (e.getAttribute(N) ?? [])[0], n = `pkt-fileupload-comment-${e.file.fileId}`, i = () => {
 			let t = document.getElementById(n)?.value?.trim();
-			t && e.setAttribute(j, [{
+			t && e.setAttribute(N, [{
 				text: t,
 				timestamp: (/* @__PURE__ */ new Date()).toISOString()
 			}]), e.close();
@@ -572,7 +889,7 @@ var j = "comments", M = (e) => {
         .value=${t?.text ?? ""}
         rows="2"
         placeholder="Skriv inn kommentar"
-        @keydown=${(t) => P(t, i, e.close)}
+        @keydown=${(t) => I(t, i, e.close)}
       ></textarea>
       <button
         type="button"
@@ -594,7 +911,7 @@ var j = "comments", M = (e) => {
 	},
 	renderContent: (e) => {
 		if (e.isActive) return null;
-		let t = e.getAttribute(j) ?? [];
+		let t = e.getAttribute(N) ?? [];
 		if (t.length === 0) return null;
 		let n = t[0];
 		return r`
@@ -605,7 +922,7 @@ var j = "comments", M = (e) => {
               ${n.text}
             </span>
             <time class="pkt-fileupload__queue-display__item__comment__time">
-              ${M(n.timestamp)}
+              ${P(n.timestamp)}
             </time>
           </div>
           <div class="pkt-fileupload__queue-display__item__comment__actions">
@@ -623,7 +940,7 @@ var j = "comments", M = (e) => {
               class="pkt-fileupload__queue-display__item__comment__action"
               aria-label="Slett kommentar"
               ?disabled=${e.disabled}
-              @click=${() => e.setAttribute(j, void 0)}
+              @click=${() => e.setAttribute(N, void 0)}
             >
               <pkt-icon name="trash-can"></pkt-icon>
             </button>
@@ -633,14 +950,14 @@ var j = "comments", M = (e) => {
     `;
 	},
 	renderHidden: (e) => {
-		let t = e.getAttribute(j);
+		let t = e.getAttribute(N);
 		return r`<input
       type="hidden"
       name=${`${e.inputName}-comments`}
       value=${t ? JSON.stringify(t) : ""}
     />`;
 	}
-}), R = (e, t) => {
+}), B = (e, t) => {
 	let n = D(e, t);
 	return n ? r`<span
       class="pkt-fileupload__queue-display__item__title__head"
@@ -651,13 +968,13 @@ var j = "comments", M = (e) => {
       data-pkt-truncate-part="tail"
       >${n.tail}</span
     >` : r`<span data-pkt-truncate-part="first">${e}</span>`;
-}, z = (e, t, n) => r`
+}, V = (e, t, n) => r`
   <p class="pkt-fileupload__queue-display__item__title">
-    ${R(e, n)}${t ? r`<span class="pkt-fileupload__queue-display__item__filesize"> (${t})</span>` : null}
+    ${B(e, n)}${t ? r`<span class="pkt-fileupload__queue-display__item__filesize"> (${t})</span>` : null}
   </p>
-`, B = (e) => typeof e == "number" ? "in-progress" : e === "error" ? "error" : "idle", V = (e) => r`<span class="pkt-fileupload__queue-display__item__loading-text" aria-label="Laster opp fil"
+`, H = (e) => typeof e == "number" ? "in-progress" : e === "error" ? "error" : "idle", U = (e) => r`<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 }) => ({
+  >`, W = ({ operationId: e, file: t, inputName: n, disabled: r, isActive: i, onActivateOperation: a, onCloseOperation: o, getFileAttribute: s, setFileAttribute: c }) => ({
 	file: t,
 	inputName: n,
 	disabled: r,
@@ -666,15 +983,15 @@ var j = "comments", M = (e) => {
 	close: () => o(t.fileId),
 	getAttribute: (e) => s(t.fileId, e),
 	setAttribute: (e, n) => c(t.fileId, e, n)
-}), U = ({ file: e, fileSize: t, disabled: n, transferProgress: i, transferShowProgress: a, loadingText: o, truncateTail: s, onCancel: c, iconName: l = "document-text" }) => {
-	let u = k(e), d = a ?? i !== 0;
+}), G = ({ file: e, fileSize: t, disabled: n, transferProgress: i, transferShowProgress: a, loadingText: o, truncateTail: s, onCancel: c, iconName: l = "document-text" }) => {
+	let u = A(e), d = a ?? i !== 0;
 	return r`
     <pkt-icon
       name=${l}
       class="pkt-fileupload__queue-display__item__icon pkt-icon--medium"
       aria-hidden="true"
     ></pkt-icon>
-    ${z(u, t, s)}
+    ${V(u, t, s)}
     <button
       type="button"
       class="pkt-fileupload__queue-display__item__cancel-button"
@@ -695,17 +1012,17 @@ var j = "comments", M = (e) => {
           <span class="pkt-fileupload__queue-display__item__percentage" aria-hidden="true"
             >${Math.round(i * 100)}%</span
           >
-        ` : V(o)}
+        ` : U(o)}
   `;
-}, W = ({ file: e, fileSize: t, disabled: n, transferShowProgress: i, transferLastProgress: a, transferErrorMessage: o, truncateTail: s, onCancel: c }) => {
-	let l = k(e), u = !!i, d = Math.round((a ?? 1) * 100);
+}, K = ({ file: e, fileSize: t, disabled: n, transferShowProgress: i, transferLastProgress: a, transferErrorMessage: o, truncateTail: s, onCancel: c }) => {
+	let l = A(e), u = !!i, d = Math.round((a ?? 1) * 100);
 	return r`
     <pkt-icon
       name="alert-error"
       class="pkt-fileupload__queue-display__item__icon pkt-icon--medium"
       aria-hidden="true"
     ></pkt-icon>
-    ${z(l, t, s)}
+    ${V(l, t, s)}
     <button
       type="button"
       class="pkt-fileupload__queue-display__item__cancel-button"
@@ -728,11 +1045,11 @@ var j = "comments", M = (e) => {
           >${o}</span
         >` : null}
   `;
-}, G = ({ file: e, disabled: t, inputName: n, operations: i, activeOperationId: a, onActivateOperation: o, onCloseOperation: c, getFileAttribute: l, setFileAttribute: u }) => {
+}, q = ({ file: e, disabled: t, inputName: n, 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({
+		let d = W({
 			operationId: i.id,
 			file: e,
 			inputName: n,
@@ -756,9 +1073,9 @@ var j = "comments", M = (e) => {
       </button>` : null;
 	}).filter(Boolean);
 	return f.length === 0 ? null : r`<div class="pkt-fileupload__queue-display__item__actions">${f}</div>`;
-}, K = ({ file: e, disabled: t, inputName: n, operations: i, activeOperationId: a, onActivateOperation: o, onCloseOperation: s, getFileAttribute: c, setFileAttribute: l }) => i.map((i) => {
+}, J = ({ file: e, disabled: t, inputName: n, operations: i, activeOperationId: a, onActivateOperation: o, onCloseOperation: s, getFileAttribute: c, setFileAttribute: l }) => i.map((i) => {
 	if (!i.renderContent) return null;
-	let u = H({
+	let u = W({
 		operationId: i.id,
 		file: e,
 		inputName: n,
@@ -772,11 +1089,11 @@ var j = "comments", M = (e) => {
 	return d == null ? null : r`<div class="pkt-fileupload__queue-display__item__operation-content">
       ${d}
     </div>`;
-}), q = ({ file: e, disabled: t, inputName: n, operations: i, activeOperationId: a, onActivateOperation: o, onCloseOperation: s, getFileAttribute: c, setFileAttribute: l }) => {
+}), Y = ({ file: e, disabled: t, inputName: n, 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({
+	let d = W({
 		operationId: u.id,
 		file: e,
 		inputName: n,
@@ -790,9 +1107,9 @@ var j = "comments", M = (e) => {
 	return r`<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) => {
+}, X = ({ 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({
+	let l = W({
 		operationId: r.id,
 		file: e,
 		inputName: n,
@@ -804,15 +1121,15 @@ var j = "comments", M = (e) => {
 		setFileAttribute: c
 	});
 	return r.renderHidden(l);
-}), Y = (e, t, n) => r`
+}), Z = (e, t, n) => r`
     <pkt-icon
       name="document-text"
       class="pkt-fileupload__queue-display__item__icon pkt-icon--medium"
       aria-hidden="true"
     ></pkt-icon>
-    ${z(k(e), t, n)}
-  `, X = ({ file: e, thumbnailUrl: t, previewEnabled: n, canOpenPreview: i, truncateTail: a, onOpenPreview: c, onThumbnailImageError: l }) => {
-	let u = k(e), d = !!t, f = !!n && !!i, p = f && !!c;
+    ${V(A(e), t, n)}
+  `, Q = ({ file: e, thumbnailUrl: t, previewEnabled: n, canOpenPreview: i, truncateTail: a, onOpenPreview: c, onThumbnailImageError: l }) => {
+	let u = A(e), d = !!t, f = !!n && !!i, p = f && !!c;
 	return r`
     <div
       class=${o({
@@ -847,12 +1164,12 @@ var j = "comments", M = (e) => {
         </span>
       </button>
       <span class="pkt-fileupload__queue-display__item__thumbnail__title"
-        >${R(u, a)}</span
+        >${B(u, a)}</span
       >
     </div>
   `;
-}, Z = ({ file: e, inputName: t, disabled: n, 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({
+}, ee = ({ file: e, inputName: t, disabled: n, 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 = H(f), b = a.find((e) => e.id === s), x = b?.renderInlineUI ? b.renderInlineUI(W({
 		operationId: b.id,
 		file: e,
 		inputName: t,
@@ -872,7 +1189,7 @@ var j = "comments", M = (e) => {
 		[`pkt-fileupload__queue-display__item--${f}`]: typeof f == "string"
 	})}
     >
-      ${J({
+      ${X({
 		file: e,
 		disabled: n,
 		inputName: t,
@@ -883,7 +1200,7 @@ var j = "comments", M = (e) => {
 		getFileAttribute: u,
 		setFileAttribute: d
 	})}
-      ${y === "in-progress" ? U({
+      ${y === "in-progress" ? G({
 		file: e,
 		fileSize: i,
 		disabled: n,
@@ -892,7 +1209,7 @@ var j = "comments", M = (e) => {
 		loadingText: g,
 		truncateTail: _,
 		onCancel: v
-	}) : y === "error" ? W({
+	}) : y === "error" ? K({
 		file: e,
 		fileSize: i,
 		disabled: n,
@@ -910,8 +1227,8 @@ var j = "comments", M = (e) => {
                 <div class="pkt-fileupload__queue-display__item__inline-ui">
                   ${x}
                 </div>
-              ` : Y(e, i, _)}
-      ${y === "idle" ? G({
+              ` : Z(e, i, _)}
+      ${y === "idle" ? q({
 		file: e,
 		disabled: n,
 		inputName: t,
@@ -922,7 +1239,7 @@ var j = "comments", M = (e) => {
 		getFileAttribute: u,
 		setFileAttribute: d
 	}) : null}
-      ${y === "idle" ? K({
+      ${y === "idle" ? J({
 		file: e,
 		disabled: n,
 		inputName: t,
@@ -933,7 +1250,7 @@ var j = "comments", M = (e) => {
 		getFileAttribute: u,
 		setFileAttribute: d
 	}) : null}
-      ${y === "idle" ? q({
+      ${y === "idle" ? Y({
 		file: e,
 		disabled: n,
 		inputName: t,
@@ -946,8 +1263,8 @@ var j = "comments", M = (e) => {
 	}) : null}
     </li>
   `;
-}, Q = ({ file: e, inputName: t, disabled: n, 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({
+}, te = ({ file: e, inputName: t, disabled: n, 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 = H(h), T = l.find((e) => e.id === u), E = T?.renderInlineUI ? T.renderInlineUI(W({
 		operationId: T.id,
 		file: e,
 		inputName: t,
@@ -967,7 +1284,7 @@ var j = "comments", M = (e) => {
 		[`pkt-fileupload__queue-display__item--${h}`]: typeof h == "string"
 	})}
     >
-      ${J({
+      ${X({
 		file: e,
 		disabled: n,
 		inputName: t,
@@ -978,7 +1295,7 @@ var j = "comments", M = (e) => {
 		getFileAttribute: p,
 		setFileAttribute: m
 	})}
-      ${w === "in-progress" ? U({
+      ${w === "in-progress" ? G({
 		file: e,
 		fileSize: i,
 		disabled: n,
@@ -988,7 +1305,7 @@ var j = "comments", M = (e) => {
 		truncateTail: b,
 		onCancel: x,
 		iconName: "picture"
-	}) : w === "error" ? W({
+	}) : w === "error" ? K({
 		file: e,
 		fileSize: i,
 		disabled: n,
@@ -1006,7 +1323,7 @@ var j = "comments", M = (e) => {
                 <div class="pkt-fileupload__queue-display__item__inline-ui">
                   ${E}
                 </div>
-              ` : X({
+              ` : Q({
 		file: e,
 		thumbnailUrl: a,
 		previewEnabled: s,
@@ -1015,7 +1332,7 @@ var j = "comments", M = (e) => {
 		onOpenPreview: S,
 		onThumbnailImageError: C
 	})}
-      ${w === "idle" ? G({
+      ${w === "idle" ? q({
 		file: e,
 		disabled: n,
 		inputName: t,
@@ -1026,7 +1343,7 @@ var j = "comments", M = (e) => {
 		getFileAttribute: p,
 		setFileAttribute: m
 	}) : null}
-      ${w === "idle" ? K({
+      ${w === "idle" ? J({
 		file: e,
 		disabled: n,
 		inputName: t,
@@ -1037,7 +1354,7 @@ var j = "comments", M = (e) => {
 		getFileAttribute: p,
 		setFileAttribute: m
 	}) : null}
-      ${w === "idle" ? q({
+      ${w === "idle" ? Y({
 		file: e,
 		disabled: n,
 		inputName: t,
@@ -1050,7 +1367,7 @@ var j = "comments", M = (e) => {
 	}) : null}
     </li>
   `;
-}, $ = class extends A {
+}, $ = class extends M {
 	constructor(...e) {
 		super(...e), this.activeOperationByFileId = {}, this.isPreviewModalOpen = !1, this.previewCurrentIndex = 0, this.failedImageFileIds = {}, this.closePreview = () => {
 			this.isPreviewModalOpen = !1;
@@ -1082,10 +1399,15 @@ var j = "comments", M = (e) => {
         .forId=${`${this.id}-input`}
         .label=${this.label}
         .helptext=${this.helptext}
+        .helptextDropdown=${this.helptextDropdown}
+        .helptextDropdownButton=${this.helptextDropdownButton}
         ?disabled=${this.disabled}
         ?hasError=${this.hasEffectiveError}
         ?optionalTag=${this.optionalTag}
+        .optionalText=${this.optionalText}
         ?requiredTag=${this.requiredTag}
+        .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
         class=${o({
 			"pkt-fileupload-wrapper": !0,
 			"pkt-fileupload-wrapper--full-width": this.fullwidth
@@ -1200,7 +1522,7 @@ var j = "comments", M = (e) => {
 		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({
+			return te({
 				file: e,
 				inputName: this.name,
 				disabled: this.disabled,
@@ -1225,7 +1547,7 @@ var j = "comments", M = (e) => {
 				onThumbnailImageError: (e) => this.markImageFailed(e, "thumbnail")
 			});
 		}
-		return Z({
+		return ee({
 			file: e,
 			inputName: this.name,
 			disabled: this.disabled,
@@ -1271,7 +1593,7 @@ var j = "comments", M = (e) => {
 		});
 	}
 	navigatePreview(e, t) {
-		t.length !== 0 && (this.previewCurrentIndex = ee(this.previewCurrentIndex, e, t.length));
+		t.length !== 0 && (this.previewCurrentIndex = O(this.previewCurrentIndex, e, t.length));
 	}
 	renderPreviewModal(e) {
 		if (!this.enableImagePreview || e.length === 0) return null;
@@ -1337,7 +1659,7 @@ var j = "comments", M = (e) => {
 	}
 	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;
+		return this.renameFilesEnabled && this.itemRenderer !== "thumbnail" && e.push(R()), this.addCommentsEnabled && this.itemRenderer !== "thumbnail" && e.push(z()), e.push(...this.extraOperations), e.push(L((e) => this.removeFileItem(e))), e;
 	}
 	activateOperation(e, t) {
 		this.activeOperationByFileId = {
@@ -1368,6 +1690,6 @@ var j = "comments", M = (e) => {
 t([e()], $.prototype, "activeOperationByFileId", void 0), t([e()], $.prototype, "isPreviewModalOpen", void 0), t([e()], $.prototype, "previewCurrentIndex", void 0), t([e()], $.prototype, "failedImageFileIds", void 0), $ = t([i("pkt-fileupload")], $);
 //#endregion
 //#region src/components/fileupload/index.ts
-var te = $;
+var ne = $;
 //#endregion
-export { $ as n, te as t };
+export { $ as n, ne as t };