{"_id":"@amplo/snapshot-host","_rev":"2-c33bff8b74793a8f59c55adc1542a801","name":"@amplo/snapshot-host","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@amplo/snapshot-host","version":"0.0.1","keywords":["angular","snapshot","dom","charts","apexcharts"],"license":"MIT","_id":"@amplo/snapshot-host@0.0.1","maintainers":[{"name":"amplo-admin","email":"admin@lariat.co.ZA"}],"dist":{"shasum":"23d87d8ab89a19e31fd5d26f4494220cf4e3424f","tarball":"https://registry.npmjs.org/@amplo/snapshot-host/-/snapshot-host-0.0.1.tgz","fileCount":16,"integrity":"sha512-FE611L7CiZWhCKGE/IXE2Pfyvh4OO+yPXLTI1zpsN6wRu6KFsNiRf8wP9LESbQqCjc7EtL7VWMpUveycr1gMbA==","signatures":[{"sig":"MEQCIAWiftyjZJwQHSsusuWe0ymyV6KVtHI/GbyX29qgSdhVAiAIP6tT+kDN91konuOSDta4G/8OT3+xjereeXuJEPBHTQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26451},"module":"fesm2022/amplo-snapshot-host.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/amplo-snapshot-host.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"30bcb67528f3540847985f18eb3e123ba9c3c7af","typings":"index.d.ts","_npmUser":{"name":"amplo-admin","email":"admin@lariat.co.ZA"},"_npmVersion":"10.8.2","description":"Angular DOM snapshot utilities with pluggable adapters","directories":{},"sideEffects":false,"_nodeVersion":"20.18.3","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^19.2.0","@angular/common":"^19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/snapshot-host_0.0.1_1773757258624_0.33645499876560403","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@amplo/snapshot-host","version":"0.1.0","description":"Angular utility for capturing DOM elements as HTML or image snapshots using pluggable capture strategies.","keywords":["angular","snapshot","dom-capture","html-capture","image-capture","canvas","svg","dataurl","screenshot","export","reporting","utility","directive"],"license":"MIT","peerDependencies":{"@angular/common":"^19.0.0","@angular/core":"^19.0.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/amplo-snapshot-host.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/amplo-snapshot-host.mjs"}},"_id":"@amplo/snapshot-host@0.1.0","gitHead":"16d0e6bdab17f51a69f396ebd4d9ee501be25fc5","_nodeVersion":"20.18.3","_npmVersion":"10.8.2","dist":{"integrity":"sha512-8QyvrRiL10magcl09hUAw8Dj1hGmV5qL+JFNLjmr9m2Ygwu0vj3qmoQrIbUbVqfVslf23z0ZbHJyovuKogJtGQ==","shasum":"09676c41adabb021d723b264af0364c9842e6130","tarball":"https://registry.npmjs.org/@amplo/snapshot-host/-/snapshot-host-0.1.0.tgz","fileCount":16,"unpackedSize":26640,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCAihbxxQDl2VUCciM+X5Vg4F/vxFT4bSNwuuCbyMBcPwIgSo/qxQxaKJLkcG17d+puyxmc2VoxTIaIqik8OjeM1aY="}]},"_npmUser":{"name":"amplo-admin","email":"admin@lariat.co.ZA"},"directories":{},"maintainers":[{"name":"amplo-admin","email":"admin@lariat.co.ZA"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/snapshot-host_0.1.0_1773758994243_0.5841040784385636"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-17T14:20:58.527Z","modified":"2026-03-17T14:49:54.496Z","0.0.1":"2026-03-17T14:20:58.759Z","0.1.0":"2026-03-17T14:49:54.383Z"},"license":"MIT","keywords":["angular","snapshot","dom-capture","html-capture","image-capture","canvas","svg","dataurl","screenshot","export","reporting","utility","directive"],"description":"Angular utility for capturing DOM elements as HTML or image snapshots using pluggable capture strategies.","maintainers":[{"name":"amplo-admin","email":"admin@lariat.co.ZA"}],"readme":"# @amplo/snapshot-host\r\n\r\nA lightweight, extensible Angular utility for **capturing DOM elements as snapshots**.\r\n\r\n`snapshot-host` provides a simple way to:\r\n- Register elements in the DOM\r\n- Capture them as **HTML or image snapshots**\r\n- Extend capture logic using **pluggable strategies (capturers)**\r\n\r\nIt is designed to be **fully generic** — no assumptions about charts, reports, or UI structure.\r\n\r\n---\r\n\r\n## Features\r\n\r\n- ✅ Directive-based element registration\r\n- ✅ Capture snapshots as **HTML or image (data URL)**\r\n- ✅ Pluggable capture strategies via Angular DI\r\n- ✅ Deterministic capture routing using `kind`\r\n- ✅ Default fallback (full HTML capture)\r\n- ✅ Utilities for SVG, canvas, and HTML cloning\r\n- ✅ Zero domain-specific assumptions\r\n\r\n---\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @amplo/snapshot-host\r\n```\r\n\r\n---\r\n\r\n## Basic Usage\r\n\r\n### Template\r\n\r\n```html\r\n<div snapshotKey=\"section-1\">\r\n  <h2>Hello World</h2>\r\n</div>\r\n```\r\n\r\n### Component\r\n\r\n```ts\r\nconstructor(private snapshots: SnapshotHostService) {}\r\n\r\nasync capture() {\r\n  await this.snapshots.captureAll();\r\n\r\n  const snap = this.snapshots.getSnapshot('section-1');\r\n  console.log(snap);\r\n}\r\n```\r\n\r\n---\r\n\r\n## Default Behavior\r\n\r\nIf no custom capturer is provided:\r\n\r\n- The entire element is cloned\r\n- Returned as HTML (`type: 'html'`)\r\n\r\n---\r\n\r\n## Snapshot Model\r\n\r\n```ts\r\nexport interface SnapshotItem {\r\n  key: string;\r\n  type: 'image' | 'html';\r\n  html?: string;\r\n  dataUrl?: string;\r\n  meta?: Record<string, any>;\r\n}\r\n```\r\n\r\n---\r\n\r\n## Custom Capturers\r\n\r\nYou can define your own capture logic using a **capturer**.\r\n\r\n```ts\r\nexport interface SnapshotCapturer {\r\n  kind: string;\r\n  capture(\r\n    context: SnapshotCaptureContext\r\n  ): SnapshotItem | null | Promise<SnapshotItem | null>;\r\n}\r\n```\r\n\r\n---\r\n\r\n## Registering Capturers\r\n\r\n```ts\r\nimport { provideSnapshotCapturers } from '@amplo/snapshot-host';\r\n\r\nbootstrapApplication(AppComponent, {\r\n  providers: [\r\n    ...provideSnapshotCapturers(\r\n      new MyCustomCapturer()\r\n    )\r\n  ]\r\n});\r\n```\r\n\r\n---\r\n\r\n## Targeting a Capturer\r\n\r\nUse `data-snapshot-kind` to select which capturer should run.\r\n\r\n```html\r\n<div\r\n  snapshotKey=\"chart-1\"\r\n  data-snapshot-kind=\"chart\"\r\n>\r\n</div>\r\n```\r\n\r\nYour capturer:\r\n\r\n```ts\r\nexport class ChartCapturer implements SnapshotCapturer {\r\n  kind = 'chart';\r\n\r\n  capture(context: SnapshotCaptureContext): SnapshotItem | null {\r\n    return {\r\n      key: context.key,\r\n      type: 'image',\r\n      dataUrl: '...'\r\n    };\r\n  }\r\n}\r\n```\r\n\r\n---\r\n\r\n## Directive\r\n\r\n```html\r\n<div snapshotKey=\"my-key\"></div>\r\n```\r\n\r\n### Behavior\r\n\r\n- Registers element on init\r\n- Unregisters on destroy\r\n- Reads `data-snapshot-kind` (defaults to `'default-html'`)\r\n\r\n---\r\n\r\n## Capture Flow\r\n\r\n1. Element is registered via directive\r\n2. `captureAll()` iterates over elements\r\n3. Matching capturer is selected by `kind`\r\n4. Capturer returns snapshot\r\n5. If no match → fallback to default HTML capture\r\n\r\n---\r\n\r\n## Utilities\r\n\r\n### Canvas\r\n\r\n```ts\r\nimport { canvasToDataUrl } from '@amplo/snapshot-host';\r\n\r\ncanvasToDataUrl(canvas);\r\n```\r\n\r\n---\r\n\r\n### SVG\r\n\r\n```ts\r\nimport { serializeSvgToDataUrl } from '@amplo/snapshot-host';\r\n\r\nserializeSvgToDataUrl(svg);\r\n```\r\n\r\n---\r\n\r\n### HTML\r\n\r\n```ts\r\nimport { cloneElementHtml } from '@amplo/snapshot-host';\r\n\r\ncloneElementHtml(element, ['.no-print']);\r\n```\r\n\r\n---\r\n\r\n## Example: SVG / Canvas Capturer\r\n\r\n```ts\r\nimport {\r\n  SnapshotCapturer,\r\n  SnapshotCaptureContext,\r\n  SnapshotItem,\r\n  canvasToDataUrl,\r\n  serializeSvgToDataUrl,\r\n} from '@amplo/snapshot-host';\r\n\r\nexport class SvgCanvasCapturer implements SnapshotCapturer {\r\n  kind = 'chart';\r\n\r\n  capture(context: SnapshotCaptureContext): SnapshotItem | null {\r\n    const { key, element } = context;\r\n\r\n    const svg = element.querySelector('svg');\r\n    const canvas = element.querySelector('canvas');\r\n\r\n    if (svg) {\r\n      return {\r\n        key,\r\n        type: 'image',\r\n        dataUrl: serializeSvgToDataUrl(svg as SVGSVGElement),\r\n      };\r\n    }\r\n\r\n    if (canvas) {\r\n      return {\r\n        key,\r\n        type: 'image',\r\n        dataUrl: canvasToDataUrl(canvas as HTMLCanvasElement) ?? undefined,\r\n      };\r\n    }\r\n\r\n    return null;\r\n  }\r\n}\r\n```\r\n\r\n---\r\n\r\n## Design Principles\r\n\r\n- **Generic first** — no domain coupling\r\n- **Explicit routing** via `kind`\r\n- **Angular-native extensibility** (DI + multi providers)\r\n- **No magic fallback chains**\r\n- **Separation of concerns** (core vs app-specific logic)\r\n\r\n---\r\n\r\n## When to Use\r\n\r\n- Capturing UI blocks for printing\r\n- Generating report snapshots\r\n- Exporting charts or visual components\r\n- Creating preview thumbnails\r\n- Preparing content for PDF generation\r\n\r\n---\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}