{
  "tag": "ed-zoomable-frame",
  "kind": "component",
  "summary": "Zoomable frames render iframe content with zoom and interaction controls.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/zoomable-frame/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/zoomable-frame/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon"
  ],
  "use": [
    "Previewing a whole page or a running demo at reduced scale inside another page",
    "Showing a preview of a document or report page at reduced size with controls to zoom in and read the details",
    "A look-only preview where interaction with the embedded content is switched off",
    "Embedding an external page or generated HTML in a screen with zoom levels the user can step through"
  ],
  "notFor": [
    {
      "when": "The primary surface for a task — content scaled below full size is not a working UI",
      "instead": "a link to the real page"
    },
    {
      "when": "Showing a finished document page for reading, with page thumbnails",
      "instead": "a [Document Viewer](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/document-viewer)"
    }
  ],
  "rules": [
    {
      "id": "zoomable-frame/inert-preview",
      "rule": "Make the frame inert when it should only be looked at: switch off interaction with the built-in inert mode when the frame is a pure preview, so the content stays visible but cannot swallow clicks, focus, or scrolling.",
      "why": "An embedded frame is a live page, not a screenshot — everything inside it runs and reacts.",
      "check": "warning"
    },
    {
      "id": "zoomable-frame/sandbox",
      "rule": "Treat third-party sources with the same caution as any iframe. Leave the sandbox alone for content you do not control, and add `allow-same-origin` only for content you authored yourself.",
      "why": "The default (`allow-scripts`) already keeps the frame in an opaque origin, away from the host page. Together with `allow-scripts`, `allow-same-origin` disables the sandbox, and with `srcdoc` the frame inherits the host page's origin.",
      "check": "warning"
    },
    {
      "id": "zoomable-frame/label",
      "rule": "Give the frame an accessible label naming what it shows.",
      "check": "error"
    },
    {
      "id": "zoomable-frame/lazy-load",
      "rule": "Lazy-load frames that sit below the fold.",
      "why": "Every frame is a full page load.",
      "check": "warning"
    },
    {
      "id": "zoomable-frame/few-live-frames",
      "rule": "Never stack many live frames on one screen.",
      "why": "Each one is a complete browsing context and costs accordingly.",
      "check": "warning"
    },
    {
      "id": "zoomable-frame/keep-zoom-controls",
      "rule": "Never remove the zoom controls while users are still expected to read the content at varying scales.",
      "check": "warning"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "src",
        "property": "src",
        "type": "string",
        "description": "The URL of the content to display."
      },
      {
        "name": "srcdoc",
        "property": "srcdoc",
        "type": "string",
        "description": "Inline HTML to display."
      },
      {
        "name": "allow",
        "property": "allow",
        "type": "string",
        "description": "The permissions policy for the framed document, as the native `<iframe allow>` takes it, e.g.\n`clipboard-write; fullscreen`."
      },
      {
        "name": "allowfullscreen",
        "property": "allowfullscreen",
        "type": "boolean",
        "default": "false",
        "description": "Allows fullscreen mode."
      },
      {
        "name": "name",
        "property": "name",
        "type": "string",
        "description": "The frame's name, so a link or form on the page can target it with `target=\"…\"`."
      },
      {
        "name": "loading",
        "property": "loading",
        "type": "'eager' | 'lazy'",
        "default": "'eager'",
        "description": "Controls iframe loading behavior."
      },
      {
        "name": "referrerpolicy",
        "property": "referrerpolicy",
        "type": "string",
        "description": "Controls referrer information."
      },
      {
        "name": "label",
        "property": "label",
        "type": "string",
        "description": "An accessible label for the iframe. Recommended for screen readers."
      },
      {
        "name": "sandbox",
        "property": "sandbox",
        "type": "string",
        "default": "'allow-scripts'",
        "description": "Security restrictions for the iframe. Defaults to `allow-scripts`: framed content runs in an\nopaque origin and cannot reach the embedding page. Per the HTML spec an EMPTY string applies\nthe maximum restrictions (everything blocked); add `allow-*` keywords to grant capabilities.\nThe attribute is always rendered — there is deliberately no way to omit it entirely.\n\nAdding `allow-same-origin` **and** `allow-scripts` together disables the sandbox: the framed\ndocument can then clear its own `sandbox` attribute, and `srcdoc` content additionally\ninherits this page's origin — cookies, storage and `parent` included. Only combine them for\ncontent you fully control."
      },
      {
        "name": "zoom",
        "property": "zoom",
        "type": "number",
        "default": "1",
        "description": "The current zoom of the frame, e.g. 0 = 0% and 1 = 100%."
      },
      {
        "name": "zoom-levels",
        "property": "zoomLevels",
        "type": "string",
        "default": "'25% 50% 75% 100% 125% 150% 175% 200%'",
        "description": "The zoom levels to step through when using zoom controls. This does not restrict programmatic changes to the zoom."
      },
      {
        "name": "without-controls",
        "property": "withoutControls",
        "type": "boolean",
        "default": "false",
        "description": "Removes the zoom controls."
      },
      {
        "name": "without-interaction",
        "property": "withoutInteraction",
        "type": "boolean",
        "default": "false",
        "description": "Disables interaction when present."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [
      {
        "name": "contentWindow",
        "type": "Window | null",
        "description": "Returns the internal iframe's `window` object. (Readonly property)"
      },
      {
        "name": "contentDocument",
        "type": "Document | null",
        "description": "Returns the internal iframe's `document` object. (Readonly property)"
      }
    ],
    "methods": [
      {
        "name": "zoomIn",
        "description": "Zooms in to the next available zoom level."
      },
      {
        "name": "zoomOut",
        "description": "Zooms out to the previous available zoom level."
      }
    ],
    "events": [
      {
        "name": "load",
        "react": "onLoad",
        "type": "Event",
        "description": "Emitted when the internal iframe when it finishes loading."
      },
      {
        "name": "error",
        "react": "onError",
        "type": "Event",
        "description": "Emitted from the internal iframe when it fails to load."
      }
    ],
    "slots": [
      {
        "name": "zoom-in-icon",
        "description": "The slot that contains the zoom in icon."
      },
      {
        "name": "zoom-out-icon",
        "description": "The slot that contains the zoom out icon."
      }
    ],
    "cssProperties": [],
    "parts": [
      {
        "name": "iframe",
        "description": "The internal `<iframe>` element."
      },
      {
        "name": "controls",
        "description": "The container that surrounds zoom control buttons."
      },
      {
        "name": "zoom-in-button",
        "description": "The zoom in button."
      },
      {
        "name": "zoom-out-button",
        "description": "The zoom out button."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/zoomable-frame/zoomable-frame.js';",
  "react": {
    "component": "EdZoomableFrame",
    "import": "import EdZoomableFrame from '@eurodata/eurodata-ui/dist/react/zoomable-frame/index.js';"
  }
}