{
  "tag": "ed-document-viewer",
  "kind": "component",
  "summary": "A document viewer — a dark toolbar (pagination, view-mode, zoom), a thumbnail rail, and a page canvas. The consumer supplies rendered page images.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/document-viewer/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/document-viewer/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon",
    "ed-page-thumbnail",
    "ed-slider",
    "ed-tooltip"
  ],
  "use": [
    "Reading and reviewing a multi-page document — an invoice, a contract, scanned mail — with paging, zooming and a thumbnail overview",
    "Checking a scanned receipt against the booking entered from it, zooming in on amounts and dates",
    "Turning a page that was scanned sideways so it can be read",
    "Jumping to a page of a long contract by its thumbnail"
  ],
  "notFor": [
    {
      "when": "Changing the document itself — reordering, splitting, or deleting pages",
      "instead": "[Page Editor](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/page-editor)"
    },
    {
      "when": "A single image, where paging, thumbnails, and a toolbar add nothing",
      "instead": "a plain image"
    }
  ],
  "rules": [
    {
      "id": "document-viewer/page-images",
      "rule": "Feed the viewer one rendered image per page. It does not render PDFs — it displays page images you provide, rendered by your backend or an adapter.",
      "check": "error"
    },
    {
      "id": "document-viewer/built-in-surface",
      "rule": "Don't build your own pager, zoom, or rotation controls around the viewer — its built-in toolbar already owns those. Leave everything from the page images on to the built-in surface: navigation, thumbnails, zoom, fit, and rotation.",
      "check": "warning"
    },
    {
      "id": "document-viewer/actions-slot",
      "rule": "Put document-level actions such as download or print into the toolbar's actions slot instead of building a second toolbar.",
      "check": "warning"
    },
    {
      "id": "document-viewer/persist-rotation",
      "rule": "Persist a rotation yourself when it should outlive the session — the viewer applies it visually and reports it, but saving it back into the pages is your job."
    },
    {
      "id": "document-viewer/error-state",
      "rule": "Don't add your own error state for a page image that fails to load — the component shows one. Override its message only when you can say something more specific.",
      "check": "error"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "page",
        "property": "page",
        "type": "number",
        "default": "1",
        "description": "The current page, 1-based."
      },
      {
        "name": "view",
        "property": "view",
        "type": "'single' | 'continuous'",
        "default": "'single'",
        "description": "How the canvas lays out pages."
      },
      {
        "name": "zoom",
        "property": "zoom",
        "type": "number",
        "default": "1",
        "description": "The zoom factor relative to the fit-to-viewport size: `1` (100%) fits the whole page in the\ncanvas (as large as possible), and larger values zoom into it. Rescales as the canvas resizes."
      },
      {
        "name": "fit",
        "property": "fit",
        "type": "null | 'width' | 'height'",
        "default": "null",
        "description": "The fit preset, or `null` while the user is in manual zoom."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [
      {
        "name": "pages",
        "type": "DocumentViewerPage[]",
        "description": "The pages to display. Each page provides a full-resolution `src` and, optionally, a `thumbnail`,\n`label`, and `rotation` (0/90/180/270, applied to both the canvas and the rail thumbnail)."
      }
    ],
    "methods": [],
    "events": [
      {
        "name": "ed-page-change",
        "react": "onEdPageChange",
        "type": "{ page: number }",
        "description": "Emitted when the current page changes."
      },
      {
        "name": "ed-zoom-change",
        "react": "onEdZoomChange",
        "type": "{ zoom: number }",
        "description": "Emitted when the zoom factor changes."
      },
      {
        "name": "ed-view-change",
        "react": "onEdViewChange",
        "type": "{ view: 'single' | 'continuous' }",
        "description": "Emitted when the view mode changes."
      },
      {
        "name": "ed-rotate",
        "react": "onEdRotate",
        "type": "{ page: number, rotation: DocumentViewerRotation }",
        "description": "Emitted when the user rotates the current page with the toolbar buttons. The viewer applies the rotation itself; a consumer may listen to persist it back into `pages`."
      }
    ],
    "slots": [
      {
        "name": "actions",
        "description": "Extra buttons at the end of the toolbar (e.g. download, print)."
      },
      {
        "name": "error",
        "description": "Overrides the localized message shown when the current page cannot be loaded."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-document-viewer-rail-width",
        "default": "6rem",
        "description": "The width of the thumbnail rail."
      }
    ],
    "parts": [
      {
        "name": "toolbar",
        "description": "The top toolbar."
      },
      {
        "name": "pagination",
        "description": "The page navigation group."
      },
      {
        "name": "zoomer",
        "description": "The zoom group: the two zoom buttons and the slider between them."
      },
      {
        "name": "button",
        "description": "Each toolbar icon button."
      },
      {
        "name": "actions",
        "description": "The container for the `actions` slot."
      },
      {
        "name": "rail",
        "description": "The thumbnail rail (a listbox)."
      },
      {
        "name": "thumbnail",
        "description": "Each page thumbnail (an `ed-page-thumbnail`)."
      },
      {
        "name": "canvas",
        "description": "The page render area."
      },
      {
        "name": "page",
        "description": "A rendered page `<img>` (or the per-page error placeholder)."
      },
      {
        "name": "error",
        "description": "The load-error container."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/document-viewer/document-viewer.js';",
  "react": {
    "component": "EdDocumentViewer",
    "import": "import EdDocumentViewer from '@eurodata/eurodata-ui/dist/react/document-viewer/index.js';"
  }
}