feat(angular): initial Angular integration — drop-in viewer, docs, and marketing landing

.changeset/angular-pdf-viewer-initial.md

@@ -0,0 +1,13 @@
+---
+'@embedpdf/angular-pdf-viewer': minor
+---
+
+Initial release of `@embedpdf/angular-pdf-viewer`. Provides an Angular 22+ standalone `PDFViewer` component (selector `<embedpdf-viewer>`) that wraps `@embedpdf/snippet`, mirroring the contract of the existing Vue/React/Svelte wrapper viewers:
+
+- Signal-based `config` input
+- Signal-based outputs: `(init)`, `(ready)`, `(themeChange)` (forwards the snippet's `themechange` custom event)
+- Reactive state signals: `container: Signal<EmbedPdfContainer | null>`, `registry: Signal<PluginRegistry | null>`
+- `OnPush` change detection, SSR-safe `afterNextRender` mounting, `DestroyRef` cleanup
+- `provideEmbedPdfViewerConfig({ ... })` + `EMBEDPDF_VIEWER_DEFAULT_CONFIG` token for app/route/component-scoped default config that merges with per-instance `[config]` (via `mergeViewerConfigs` deep-merge rules)
+
+Built via `@analogjs/vite-plugin-angular` for AOT-compiled FESM2022 output following Analog's library-build guidance.

.changeset/config.json

@@ -55,6 +55,8 @@
     "@embedpdf/example-vue-tailwind",
     "@embedpdf/example-vue-vuetify",
     "@embedpdf/example-svelte-tailwind",
+    "@embedpdf/example-angular-pdf-viewer",
+    "@embedpdf/example-angular-tailwind",
     "@embedpdf/example-engines-node",
     "@embedpdf/example-pdfium-node",
     "@embedpdf/ai",

.github/workflows/release-next.yml

@@ -4,10 +4,10 @@ on:
   push:
     branches: [next]
     paths:
-      - "packages/**"
-      - "viewers/**"
-      - ".changeset/**"
-      - "pnpm-lock.yaml"
+      - 'packages/**'
+      - 'viewers/**'
+      - '.changeset/**'
+      - 'pnpm-lock.yaml'
   workflow_dispatch: {}
 
 concurrency:
@@ -27,7 +27,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      NPM_TOKEN:    ${{ secrets.NPM_TOKEN }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
     steps:
       - name: Checkout
@@ -46,7 +46,7 @@ jobs:
         with:
           node-version: 20
           cache: pnpm
-          registry-url: "https://registry.npmjs.org"
+          registry-url: 'https://registry.npmjs.org'
 
       - name: Install deps
         run: pnpm install --frozen-lockfile
@@ -58,8 +58,8 @@ jobs:
         id: changesets
         uses: changesets/action@v1
         with:
-          commit: "chore: version packages (next)"
-          title:  "chore: version packages (next)"
+          commit: 'chore: version packages (next)'
+          title: 'chore: version packages (next)'
           publish: pnpm ci:publish:next
           createGithubReleases: false
 
@@ -111,10 +111,11 @@ jobs:
           mkdir -p release-assets
           echo "$PUBLISHED_JSON" | jq -r '.[].name' | while read name; do
             short=$(echo "$name" | sed 's!.*/!!')
-            # Handle viewers (snippet, react, vue, svelte) which are in viewers/
-            if [ "$short" = "snippet" ] || [ "$short" = "react-pdf-viewer" ] || [ "$short" = "vue-pdf-viewer" ] || [ "$short" = "svelte-pdf-viewer" ]; then
+            # Handle viewers (snippet, angular, react, vue, svelte) which are in viewers/
+            if [ "$short" = "snippet" ] || [ "$short" = "angular-pdf-viewer" ] || [ "$short" = "react-pdf-viewer" ] || [ "$short" = "vue-pdf-viewer" ] || [ "$short" = "svelte-pdf-viewer" ]; then
               # Map package name to directory name
               case "$short" in
+                "angular-pdf-viewer") dir="viewers/angular" ;;
                 "react-pdf-viewer") dir="viewers/react" ;;
                 "vue-pdf-viewer") dir="viewers/vue" ;;
                 "svelte-pdf-viewer") dir="viewers/svelte" ;;
@@ -138,7 +139,7 @@ jobs:
         uses: softprops/action-gh-release@v2
         with:
           tag_name: v${{ steps.published.outputs.version }}
-          name: "Release Next v${{ steps.published.outputs.version }}"
+          name: 'Release Next v${{ steps.published.outputs.version }}'
           body_path: release-notes.md
           files: release-assets/*
           draft: false

.github/workflows/release.yml

@@ -4,10 +4,10 @@ on:
   push:
     branches: [main]
     paths:
-      - "packages/**"
-      - "viewers/**"
-      - ".changeset/**"
-      - "pnpm-lock.yaml"
+      - 'packages/**'
+      - 'viewers/**'
+      - '.changeset/**'
+      - 'pnpm-lock.yaml'
   workflow_dispatch: {}
 
 concurrency:
@@ -27,7 +27,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      NPM_TOKEN:    ${{ secrets.NPM_TOKEN }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
     steps:
       - name: Checkout
@@ -46,7 +46,7 @@ jobs:
         with:
           node-version: 20
           cache: pnpm
-          registry-url: "https://registry.npmjs.org"
+          registry-url: 'https://registry.npmjs.org'
 
       - name: Install deps
         run: pnpm install --frozen-lockfile
@@ -59,8 +59,8 @@ jobs:
         id: changesets
         uses: changesets/action@v1
         with:
-          commit: "chore: version packages"
-          title:  "chore: version packages"
+          commit: 'chore: version packages'
+          title: 'chore: version packages'
           publish: pnpm ci:publish
           createGithubReleases: false
 
@@ -108,10 +108,11 @@ jobs:
           mkdir -p release-assets
           echo "$PUBLISHED_JSON" | jq -r '.[].name' | while read name; do
             short=$(echo "$name" | sed 's!.*/!!')
-            # Handle viewers (snippet, react, vue, svelte) which are in viewers/
-            if [ "$short" = "snippet" ] || [ "$short" = "react-pdf-viewer" ] || [ "$short" = "vue-pdf-viewer" ] || [ "$short" = "svelte-pdf-viewer" ]; then
+            # Handle viewers (snippet, angular, react, vue, svelte) which are in viewers/
+            if [ "$short" = "snippet" ] || [ "$short" = "angular-pdf-viewer" ] || [ "$short" = "react-pdf-viewer" ] || [ "$short" = "vue-pdf-viewer" ] || [ "$short" = "svelte-pdf-viewer" ]; then
               # Map package name to directory name
               case "$short" in
+                "angular-pdf-viewer") dir="viewers/angular" ;;
                 "react-pdf-viewer") dir="viewers/react" ;;
                 "vue-pdf-viewer") dir="viewers/vue" ;;
                 "svelte-pdf-viewer") dir="viewers/svelte" ;;

.github/workflows/test.yml

@@ -0,0 +1,177 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [main, feature/angular]
+  push:
+    branches: [main, feature/angular]
+
+concurrency:
+  group: test-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+jobs:
+  test-node:
+    name: Node-mode tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - name: Run Node-mode + jsdom tests
+        run: pnpm test
+
+  detect-angular-changes:
+    name: Detect Angular touchpoints
+    runs-on: ubuntu-latest
+    outputs:
+      changed: ${{ steps.filter.outputs.angular }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dorny/paths-filter@v3
+        id: filter
+        with:
+          filters: |
+            angular:
+              # Keep Angular-only gates path-filtered so unrelated monorepo lint
+              # debt does not block every PR, while Angular wrapper/example
+              # regressions still fail fast whenever Angular code or its CI
+              # plumbing changes.
+              - '.github/workflows/test.yml'
+              - 'eslint.config.js'
+              - 'package.json'
+              - 'pnpm-lock.yaml'
+              - 'pnpm-workspace.yaml'
+              - 'packages/*/src/angular/**'
+              - 'viewers/angular/**'
+              - 'examples/angular-pdf-viewer/**'
+              - 'examples/angular-tailwind/**'
+              - 'packages/build/src/vite/**'
+
+  check-angular-quality:
+    name: Angular format, lint, and build checks
+    runs-on: ubuntu-latest
+    needs: detect-angular-changes
+    if: needs.detect-angular-changes.outputs.changed == 'true'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - name: Check Angular formatting
+        run: |
+          pnpm exec prettier --check \
+            "viewers/angular/**/*.{ts,css,html,md,json}" \
+            "examples/angular-pdf-viewer/**/*.{ts,css,html,md,json}" \
+            "examples/angular-tailwind/**/*.{ts,css,html,md,json}"
+      - name: Lint Angular sources with project-local overrides
+        run: |
+          pnpm --dir viewers/angular exec eslint src --ext .ts --color
+          pnpm --dir examples/angular-pdf-viewer exec eslint src --ext .ts --color
+          pnpm --dir examples/angular-tailwind exec eslint src --ext .ts --color
+      - name: Build Angular viewer and examples
+        run: |
+          pnpm build:viewers
+          pnpm --filter @embedpdf/example-angular-pdf-viewer run build
+          pnpm --filter @embedpdf/example-angular-tailwind run build
+      - name: Smoke test packed Angular viewer
+        run: |
+          tmp_dir=$(mktemp -d)
+          pnpm --dir viewers/angular pack --pack-destination "$tmp_dir"
+          tarball=$(ls -1 "$tmp_dir"/*.tgz | head -n 1)
+          (
+            cd "$tmp_dir"
+            npx -y @angular/cli@22 new consumer-app --defaults --standalone --skip-git --package-manager pnpm --routing false --style css
+          )
+          cd "$tmp_dir/consumer-app"
+          pnpm add "$tarball"
+          cat > src/app/app.ts <<'EOF'
+          import { Component } from '@angular/core';
+          import { PDFViewer, type PDFViewerConfig } from '@embedpdf/angular-pdf-viewer';
+
+          @Component({
+            selector: 'app-root',
+            imports: [PDFViewer],
+            templateUrl: './app.html',
+            styleUrl: './app.css'
+          })
+          export class App {
+            protected readonly config: PDFViewerConfig = {
+              src: 'https://snippet.embedpdf.com/ebook.pdf',
+              theme: { preference: 'light' },
+            };
+          }
+          EOF
+          cat > src/app/app.html <<'EOF'
+          <embedpdf-viewer
+            [config]="config"
+            style="display: block; height: 100vh"
+          />
+          EOF
+          pnpm exec ng build --configuration development
+
+  test-browser:
+    name: Browser-mode tests (Angular viewer)
+    runs-on: ubuntu-latest
+    needs:
+      - detect-angular-changes
+      - check-angular-quality
+    if: needs.detect-angular-changes.outputs.changed == 'true'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+      - name: Install Playwright Chromium
+        run: pnpm --filter @embedpdf/angular-pdf-viewer exec playwright install --with-deps chromium
+      - name: Run browser-mode tests
+        run: pnpm test:browser
+
+  test-angular-e2e:
+    name: E2E tests (Angular examples)
+    runs-on: ubuntu-latest
+    needs:
+      - detect-angular-changes
+      - check-angular-quality
+    if: needs.detect-angular-changes.outputs.changed == 'true'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - name: Build viewer workspace dependencies for example dev servers
+        run: pnpm build:viewers
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+      - name: Install Playwright Chromium (angular-pdf-viewer + angular-tailwind)
+        # Both examples use only Chromium; installing via one package writes to the
+        # shared ~/.cache/ms-playwright path, so a second install for angular-tailwind
+        # is a fast no-op that makes the dependency explicit.
+        run: |
+          pnpm --filter @embedpdf/example-angular-pdf-viewer exec playwright install --with-deps chromium
+          pnpm --filter @embedpdf/example-angular-tailwind exec playwright install --with-deps chromium
+      - name: Run Angular example e2e suites
+        run: |
+          pnpm --filter @embedpdf/example-angular-pdf-viewer run e2e
+          pnpm --filter @embedpdf/example-angular-tailwind run e2e

.gitignore

@@ -3,15 +3,31 @@ node_modules
 **/node_modules/
 **/dist
 **/.turbo
+**/coverage
+**/.vercel
+**/playwright-report
+**/test-results
+**/blob-report
+**/vitest-results
+**/storybook-static
+**/public/_pagefind/
+.env
+.env*.local
 config/tsup.config.bundled*
 config/tsup.frameworks.config.bundled*
 .next
 .cursor
 .DS_Store
+.env
 .gcs_entries
 .gclient*
 .cipd
 .idea
 publish-summary.json
 **/.svelte-kit
 **/*/*.tgz
+.env
+.env.*
+**/playwright-report
+**/test-results
+CLAUDE.md

examples/angular-pdf-viewer/.gitignore

@@ -0,0 +1,2 @@
+playwright-report/
+test-results/