{
  "tag": "ed-page-thumbnail",
  "kind": "component",
  "summary": "A selectable thumbnail of a document page — an A4 preview image with a caption.",
  "status": "experimental",
  "level": "atom",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/page-thumbnail/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/page-thumbnail/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon"
  ],
  "use": [
    "Building a custom page-picking surface — a grid or rail of scanned pages that users navigate or select",
    "A strip of page previews beside a document, where the user clicks a page to jump to it",
    "A page selection for an export, where the user marks which scanned pages go into the next step",
    "A page shown with its number and a badge such as blank or duplicate, so the user spots pages needing attention"
  ],
  "notFor": [
    {
      "when": "A case where a finished surface already fits",
      "instead": "the [Document Viewer](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/document-viewer)'s thumbnail rail, or the [Page Editor](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/page-editor) — both compose it for you"
    },
    {
      "when": "Arbitrary image galleries — it is an A4 page preview with page semantics",
      "instead": "[Carousel](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/carousel) or a plain image grid"
    }
  ],
  "rules": [
    {
      "id": "page-thumbnail/own-the-selection",
      "rule": "Listen for the thumbnail's activation and reflect your decision back through its selected state — the thumbnail never selects itself. It emits an activation click and renders whatever selected state you set; the surrounding surface owns which page (or pages) are selected, and single- or multi-select is your surface's policy, not the thumbnail's.",
      "why": "Unless you wire that loop, clicking will visibly do nothing.",
      "check": "warning"
    },
    {
      "id": "page-thumbnail/overlay-slot",
      "rule": "Use the overlay slot for per-page extras — a page-number badge, a selection checkbox, action buttons."
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "src",
        "property": "src",
        "type": "string",
        "default": "''",
        "description": "The preview image URL. When absent (or it fails to load), the empty placeholder is shown."
      },
      {
        "name": "label",
        "property": "label",
        "type": "string",
        "default": "''",
        "description": "The caption shown below the preview (e.g. a page number). Also used as the image's alt text and accessible name."
      },
      {
        "name": "rotation",
        "property": "rotation",
        "type": "0 | 90 | 180 | 270",
        "default": "0",
        "description": "Clockwise rotation of the preview image, in degrees. `90` and `270` transpose the card to\nlandscape and fill it with the rotated page (so the selection ring and focus outline hug the\npage, not a letterboxed portrait card); `0` (default) and `180` keep the edge-to-edge preview."
      },
      {
        "name": "selected",
        "property": "selected",
        "type": "boolean",
        "default": "false",
        "description": "Whether the thumbnail is selected. The parent owns the selection set; this only reflects the state."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "default": "false",
        "description": "Disables the thumbnail: it is not focusable and does not emit activation events."
      },
      {
        "name": "tabIndex",
        "property": "tabIndex",
        "type": "number",
        "default": "0",
        "description": "The host's tab order. Defaults to focusable (`0`); a roving-focus parent (e.g. a document-viewer\nrail) sets it per item. Wrapped in `@property` so it reflects (incl. SSR) and framework wrappers\npass it through — same pattern as `ed-tab`."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "getPropertyDescriptor",
        "static": true,
        "parameters": [
          {
            "name": "name",
            "type": "PropertyKey"
          },
          {
            "name": "key",
            "type": "string | symbol"
          },
          {
            "name": "options",
            "type": "PropertyDeclaration"
          }
        ],
        "returns": "PropertyDescriptor | undefined",
        "description": "Wraps the accessor of reflected properties so they always hold a valid value, as a native\nreflected IDL attribute does (`button.type = undefined` reads `submit`):\n\n- A property that declares `useDefault` takes the first value set on an element for its\n  default. That value is its field initializer's: the constructor has finished before markup,\n  a framework or any other code can set anything. Every later `null` or `undefined` means what\n  a dropped prop means on a native element — the attribute is removed: with the attribute\n  there, it is removed and Lit's `useDefault` restores the default without writing it; without\n  one, the property is set to the default. A value set and cleared again before the element\n  updates still writes the default once, from the pending reflection.\n- A Boolean is coerced with `Boolean()`, so `undefined` is `false`.\n\nLit's `useDefault` keeps the initial default out of the DOM. Setting the default explicitly\nwrites it, as `button.type = 'submit'` writes `type`."
      }
    ],
    "events": [
      {
        "name": "click",
        "react": "onClick",
        "description": "Emitted when the thumbnail is activated by pointer or keyboard (Enter/Space). Use it to drive selection."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The caption shown below the preview. Alternatively, use the `label` attribute."
      },
      {
        "name": "overlay",
        "description": "Content layered over the preview, e.g. a page-number badge, a selection checkbox, or action buttons."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-page-thumbnail-width",
        "default": "4.125rem",
        "description": "The width of the preview card. Height follows the A4 aspect ratio."
      }
    ],
    "parts": [
      {
        "name": "card",
        "description": "The A4 preview box that holds the image or the empty placeholder."
      },
      {
        "name": "image",
        "description": "The preview `<img>` element."
      },
      {
        "name": "empty-icon",
        "description": "The `page_crossed` icon shown when there is no preview."
      },
      {
        "name": "label",
        "description": "The caption below the preview."
      }
    ],
    "states": [
      {
        "name": "empty",
        "description": "Applied when there is no preview image (no `src`, or the image failed to load)."
      }
    ]
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/page-thumbnail/page-thumbnail.js';",
  "react": {
    "component": "EdPageThumbnail",
    "import": "import EdPageThumbnail from '@eurodata/eurodata-ui/dist/react/page-thumbnail/index.js';"
  }
}