<lm-preview-document> – Dokumentforhåndsvisning / Document preview

Om komponenten

Kanonisk navn

<lm-preview-document>

Synonymer

dokumentforhåndsvisning, pdf-visning, file preview, document lightbox, pdf preview

Kategori

medieinnhold, dialog

ARIA-mønster

Dialog (Modal) - dokumentforhåndsvisningen åpnes som en modal dialog over siden.

Parts

miniatyr, apne-knapp, ikon, miniatyr-tittel, dialog, lukk-knapp, dokument, dialog-tittel, metadata, lenkerad, lenke, nedlasting-lenke, ny-fane-lenke

Native-first-vurdering

Komponenten bruker native <dialog> for modalvisningen og nettleserens egen dokumentvisning i <iframe>. Det finnes ingen enkeltstående HTML-primitiv som dekker hele løsningen alene.

Nettleserstøtte

Bruker native <dialog> og Invoker Commands API (command="show-modal"/"close" + commandfor) for åpning og lukking. Selve visningen av dokumentet er avhengig av nettleserens innebygde PDF-rendering i <iframe>; hvis den mangler finnes fortsatt lenkene Last ned og Åpne i ny fane som reserve.

Design-tokens

var(--radius-small, ...), var(--background-color-hover, ...), var(--border-color, ...), var(--font-size-extra-small, ...), var(--caption-overlay-gradient, ...), var(--caption-overlay-text-color, ...), var(--radius-large, ...), var(--shadow-elevated, ...), var(--scrim-color, ...), var(--font-size-small, ...), var(--opacity-muted, ...)

Sist endret

14. september 2026

Brukt

1 sted

Formål

Generisk dokumentforhåndsvisning, i praksis for PDF-er: viser ikon og filnavn som miniatyr, og åpner dokumentet i full størrelse i en dialog. Den støtter også valgfri metadata som nøkkel/verdi-par.

Egner seg for

• PDF-kvitteringer og andre dokumentlenker der et generisk dokumentkort og åpning i dialog er nok.
• Dokumenter der filnavn, metadata og fallback-lenker for nedlasting eller ny fane er nyttige.

Egner seg ikke for

• Ekte miniatyrer av dokumentinnholdet; komponenten viser alltid ikon og filnavn, ikke en rendret første side.
• Dokumentvisning som krever annotering, zoomkontroller eller garantert innebygd rendering i alle klienter; komponenten er avhengig av nettleserens <iframe>-støtte og ellers fallback-lenker.

Bruk

<script type="module" src="/designsystem/komponenter/medieinnhold/preview-document/preview-document.js"></script>

<lm-preview-document src="blob:..." name="Kvittering-hotell.pdf"></lm-preview-document>

const dokument = document.querySelector("lm-preview-document");
dokument.metadata = [
    {label: "Lastet opp", value: "15. jun 2025"},
];

dokument.addEventListener("preview-document:open", () => { ... });

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Events

Parts

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-preview-document::part(miniatyr) {
    /* egne stiler for "Wrapperen rundt forhåndsvisningskortet." */
}

lm-preview-document::part(apne-knapp) {
    /* egne stiler for "Knappen som åpner dialogen." */
}

lm-preview-document::part(ikon) {
    /* egne stiler for "Dokumentikonet i miniatyren." */
}

lm-preview-document::part(miniatyr-tittel) {
    /* egne stiler for "Filnavn under miniatyren." */
}

lm-preview-document::part(dialog) {
    /* egne stiler for "Selve <dialog>-elementet." */
}

lm-preview-document::part(lukk-knapp) {
    /* egne stiler for "Lukkeknappen i dialogen." */
}

lm-preview-document::part(dokument) {
    /* egne stiler for "Iframe med dokumentet." */
}

lm-preview-document::part(dialog-tittel) {
    /* egne stiler for "Filnavn i dialogen." */
}

lm-preview-document::part(metadata) {
    /* egne stiler for "Metadata-listen." */
}

lm-preview-document::part(lenkerad) {
    /* egne stiler for "Wrapper for dokumentlenkene." */
}

lm-preview-document::part(lenke) {
    /* egne stiler for "Generisk part for begge handlingslenkene." */
}

lm-preview-document::part(nedlasting-lenke) {
    /* egne stiler for "Nedlastingslenken." */
}

lm-preview-document::part(ny-fane-lenke) {
    /* egne stiler for "Lenken som åpner dokumentet i ny fane." */
}

Tilgjengelighet

Åpneknappen har aria-label="Vis dokument i full størrelse", PDF-ikonet er aria-hidden="true", og iframe-en får title fra name. Tastaturstøtten følger native knapper og dialog. Skjermlesere får filnavn via figcaption, metadata via <dl>, og fallback-lenker for nedlasting eller ny fane.

• Åpneknappen har aria-label="Vis dokument i full størrelse", PDF-ikonet er aria-hidden="true", og iframe-en får title fra name.
• Tastaturstøtten følger native knapper og dialog: miniatyren kan åpnes med tastatur, Escape lukker dialogen, og lukkeknappen er en vanlig <button>.
• Skjermlesere får filnavn via figcaption, metadata via en semantisk <dl>, og fallback-lenker for nedlasting eller ny fane.
• Komponenten har ingen egen animasjon eller høy-kontrastlogikk.

Detaljer

• Åpning og lukking styres deklarativt med Invoker Commands API via command="show-modal" og command="close", ikke med JS-kall til showModal() eller close().
• Selve dokumentet vises i en <iframe> som bruker nettleserens innebygde PDF-visning i stedet for et eget bibliotek som pdf.js. "Last ned" og "Åpne i ny fane" er fallback for klienter uten slik rendering.
• Miniatyren er kvadratisk som standard og kan styres utenfra via --lm-preview-document-aspect-ratio.
• metadata er en kompleks verdi og settes derfor som JS-property, ikke attributt.

Referanser

Se også:

• ../preview-image/index.html - Løser samme forhåndsvisningsmønster for bilder, men med ekte miniatyr og valgfritt kart i dialogen.
• ../../layout/grid/index.html - Brukes ofte som ytre layout når mange dokumentforhåndsvisninger skal vises samlet.

Brukes av:

• turer/js/features/receipts/receipts.js - kvitteringsrutenettet (PDF-vedlegg vises som en miniatyr med dokument-ikon og filnavn, klikk åpner dem i en dialog med innebygd PDF-visning og opplastingsdato).

Avhengigheter: designsystem/funksjoner/sikkerhet/escape-html/escape-html.js (trygg rendering av metadata-verdier).