ng-pdf-e404rflipbook

A state-of-the-art, responsive, and highly customizable PDF Viewer and Flipbook component for Angular applications. Built with pdf.js under the hood, it offers a stunning glassmorphism UI, smooth CSS transitions, robust anti-copy protection, and seamless internationalization.

✨ Features

• 🎨 Premium UI/UX: Glassmorphism toolbar, fluid animations, and a modern aesthetic right out of the box.
• 📱 Fully Responsive: Perfectly adapts to Desktop, Tablet, and Mobile screens with safe-area support.
• 🛡️ Anti-Copy Protection: Built-in safeguards against unauthorized downloading or copying (disabled text selection, right-click blocking, invisible protective overlays, and disabled print/save shortcuts).
• 🌍 Internationalization (i18n): Out-of-the-box support for Georgian (ka), English (en), and Ukrainian (uk). Easily extendable with custom languages.
• 🚫 #StopRussianAggression: The Russian language (ru, rus) is strictly prohibited and blocked at the component level.
• ⚙️ Feature Toggles: Dynamically enable or disable printing, downloading, and sound effects.
• 🖌️ Theming System: Fully customizable colors via CSS variables to match your brand identity.
• ⚡ High Performance: Uses pdf.js in a Web Worker to ensure the main thread stays buttery smooth.
• 📱 CapacitorJS & Offline Ready: Built-in pseudo-fullscreen fallback for iOS Safari and dynamic workerSrc injection for complete offline native app support.

📦 Installation

Install the package via npm:

npm install ng-pdf-e404rflipbook

🚀 Usage

Since this is a Standalone Component, you can import it directly into your Angular component or module.

1. Import the Component

import { Component } from '@angular/core';
import { FlipbookComponent } from 'ng-pdf-e404rflipbook';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FlipbookComponent],
  template: `
    <div style="width: 100vw; height: 100vh;">
      <e404r-flipbook 
        [src]="pdfUrl" 
        lang="en"
        [bottomPadding]="120">
      </e404r-flipbook>
    </div>
  `
})
export class AppComponent {
  pdfUrl = 'assets/sample.pdf';
}

⚙️ API Reference

Input Properties (@Input())

| Property | Type | Default | Description | |----------|------|---------|-------------| | src | string | '' | Required. The URL or path to the PDF file. | | lang | string | 'ka' | The UI language. Pre-built options: 'ka', 'en', 'uk'. Note: 'ru' is strictly blocked. | | customTranslations | Partial<TranslationDict> | undefined | Pass a custom dictionary object to translate the UI into any other language. | | enableDownload | boolean | true | Show or hide the Download button. | | enablePrint | boolean | true | Show or hide the Print button. | | enableSound | boolean | true | Enable or disable the page-flip sound effect and mute/unmute button. | | bottomPadding | number | 120 | Dynamic bottom spacing (in pixels) for the toolbar and PDF layout to prevent overlapping with site footers. | | workerSrc | string | undefined | Path to a local pdf.worker.min.mjs file for offline/Capacitor apps. If not provided, it fetches from unpkg.com CDN. | | themeBackground | string | undefined | Custom background (e.g., '#ffffff' or 'linear-gradient(...)'). | | themePrimaryColor | string | undefined | Primary accent color for active buttons, hover states, and loaders. | | themeSecondaryColor| string | undefined | Secondary accent color used in loader gradients. | | themeToolbarBackground| string | undefined | Background color of the bottom toolbar (e.g., 'rgba(0,0,0,0.8)'). | | themeTextColor | string | undefined | Default color for text and inactive toolbar icons. |

🖌️ Theming Example

You can completely re-brand the flipbook by passing color inputs:

<e404r-flipbook 
  [src]="pdfUrl"
  themeBackground="#f8fafc"
  themePrimaryColor="#ea580c"
  themeTextColor="#334155"
  themeToolbarBackground="rgba(255, 255, 255, 0.85)">
</e404r-flipbook>

📱 CapacitorJS / Offline Support

Great news! The component now uses modern Web Worker bundling (import.meta.url). This means that Angular will automatically detect and bundle the pdf.worker.min.mjs file into your dist folder when you build your app!

You do not need to download the worker manually or configure anything. It will work 100% offline out-of-the-box for both Web and CapacitorJS native apps.

(Note: If you still want to override the worker path for any advanced reason, you can still pass [workerSrc]="'custom/path/worker.js'").

🌍 Custom Translations

Don't see your language? No problem. Pass your own translations directly to the component:

<e404r-flipbook 
  [src]="pdfUrl"
  lang="fr"
  [customTranslations]="{
    loading: 'Chargement...',
    retry: 'Réessayer',
    prevPage: 'Page précédente',
    nextPage: 'Page suivante'
  }">
</e404r-flipbook>

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check issues page.

📄 License

This project is licensed under the MIT License.