Opening documents

import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';
import {
  EpdfDocument,
  EpdfDocumentGate,
  EpdfDocuments,
  provideEmbedPdf,
} from '@embedpdf/angular/runtime';
import type { OpenInput } from '@embedpdf/angular/runtime';
import { EpdfPageTemplate, EpdfStage, withStage } from '@embedpdf/angular/stage';
import { EpdfRenderLayer, withRender } from '@embedpdf/angular/render';
import { localEngine } from '@embedpdf/engine';

const welcome = async (): Promise<OpenInput> => {
  const response = await fetch('/pdfs/welcome.pdf');
  return { kind: 'bytes', bytes: new Uint8Array(await response.arrayBuffer()) };
};

@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, EpdfStage, EpdfPageTemplate, EpdfRenderLayer],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: welcome, name: 'welcome.pdf' }] },
      withStage(),
      withRender(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './open.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="toolbar">
      <span class="document">
        @if (document.id()) {
          <strong>{{ document.name() ?? 'Untitled' }}</strong>
          {{
            document.status() === 'ready'
              ? ' · ' + document.pageCount() + ' pages'
              : ' · ' + document.status()
          }}
        } @else {
          No document open
        }
      </span>
      <label class="button picker">
        Open a PDF…
        <input #picker type="file" accept="application/pdf" (change)="pick(picker)" />
      </label>
      @if (document.id()) {
        <button type="button" class="button" (click)="documents.close(document.id())">Close</button>
      } @else {
        <button type="button" class="button" (click)="documents.open(welcome, { name: 'welcome.pdf' })">
          Open the welcome again
        </button>
      }
    </div>

    <epdf-stage *epdfDocumentGate="let ready; fallback: empty" class="stage">
      <ng-template epdfPage>
        <epdf-render-layer />
      </ng-template>
    </epdf-stage>

    <!-- The gate's fallback: a document on its way, or none at all. -->
    <ng-template #empty>
      <p class="loading">
        {{ document.id() ? 'Opening…' : 'No document is open. Open a PDF to see it here.' }}
      </p>
    </ng-template>
  `,
})
export class App {
  protected readonly documents = inject(EpdfDocuments);
  protected readonly document = inject(EpdfDocument);
  protected readonly welcome = welcome;

  // A file the user picks opens next to the welcome, and becomes the active document.
  protected async pick(picker: HTMLInputElement) {
    const file = picker.files?.[0];
    picker.value = '';
    if (!file) return;
    await this.documents.open(
      { kind: 'bytes', bytes: await file.arrayBuffer() },
      { name: file.name },
    );
  }
}

import {
  ChangeDetectionStrategy,
  Component,
  inject,
  input,
  linkedSignal,
  signal,
  ViewEncapsulation,
} from '@angular/core';
import { EpdfDocumentGate, EpdfDocuments, provideEmbedPdf } from '@embedpdf/angular/runtime';
import type { DocumentInfo, FailedDocumentInfo, OpenInput } from '@embedpdf/angular/runtime';
import { EpdfPageTemplate, EpdfStage, withStage } from '@embedpdf/angular/stage';
import { EpdfRenderLayer, withRender } from '@embedpdf/angular/render';
import { localEngine } from '@embedpdf/engine';

const welcome = async (): Promise<OpenInput> => {
  const response = await fetch('/pdfs/welcome.pdf');
  return { kind: 'bytes', bytes: new Uint8Array(await response.arrayBuffer()) };
};

// A file that isn't a PDF, so its document can't be opened.
const broken: OpenInput = { kind: 'bytes', bytes: new TextEncoder().encode('Not a PDF') };

@Component({
  selector: 'demo-password-form',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="panel">
      <h3>{{ document().name }} needs a password</h3>
      @if (wrong()) {
        <p>That password isn’t right. Try again.</p>
      }
      <div class="actions">
        <input
          #field
          class="field"
          type="password"
          aria-label="Password"
          [value]="password()"
          (input)="password.set(field.value)"
        />
        <button type="button" class="button" (click)="unlock()">Unlock</button>
      </div>
    </div>
  `,
})
export class PasswordForm {
  readonly document = input.required<DocumentInfo>();
  private readonly documents = inject(EpdfDocuments);
  protected readonly password = signal('');
  protected readonly wrong = linkedSignal(() => this.document().passwordProvided ?? false);

  protected async unlock() {
    try {
      await this.documents.unlock(this.document().id, { password: this.password() });
    } catch {
      this.wrong.set(true); // it stays locked; ask again
    }
  }
}

@Component({
  selector: 'demo-open-error',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="panel" data-tone="error">
      <h3>Couldn’t open {{ document().name }}</h3>
      <p>{{ document().error.message }}</p>
      <div class="actions">
        <button type="button" class="button" (click)="documents.retry(document().id)">
          Try again
        </button>
        <button type="button" class="button" (click)="documents.close(document().id)">Close</button>
      </div>
    </div>
  `,
})
export class OpenError {
  readonly document = input.required<FailedDocumentInfo>();
  protected readonly documents = inject(EpdfDocuments);
}

@Component({
  selector: 'demo-root',
  imports: [
    EpdfDocumentGate,
    EpdfStage,
    EpdfPageTemplate,
    EpdfRenderLayer,
    PasswordForm,
    OpenError,
  ],
  providers: [
    provideEmbedPdf(
      {
        engine: () => localEngine(),
        initialDocuments: [
          { source: welcome, name: 'welcome.pdf' },
          { source: broken, name: 'broken.pdf', active: true },
        ],
      },
      withStage(),
      withRender(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './states.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="tabs" role="tablist">
      @for (document of documents.documents(); track document.id) {
        <button
          type="button"
          role="tab"
          class="tab"
          [attr.aria-selected]="document.id === documents.activeId()"
          (click)="documents.setActive(document.id)"
        >
          <span class="status" [attr.data-status]="document.status"></span>
          {{ document.name }}
        </button>
      }
    </div>

    <epdf-stage
      *epdfDocumentGate="let ready; fallback: opening; locked: locked; error: failed"
      class="stage"
    >
      <ng-template epdfPage>
        <epdf-render-layer />
      </ng-template>
    </epdf-stage>

    <ng-template #opening><div class="panel">Opening…</div></ng-template>
    <ng-template #locked let-document>
      <demo-password-form [document]="document" />
    </ng-template>
    <ng-template #failed let-document>
      <demo-open-error [document]="document" />
    </ng-template>
  `,
})
export class App {
  protected readonly documents = inject(EpdfDocuments);
}

import {
  ChangeDetectionStrategy,
  Component,
  effect,
  inject,
  signal,
  ViewEncapsulation,
} from '@angular/core';
import {
  EpdfDocument,
  EpdfDocumentGate,
  EpdfDocuments,
  EpdfViewer,
  provideEmbedPdf,
} from '@embedpdf/angular/runtime';
import type { OpenInput } from '@embedpdf/angular/runtime';
import { EpdfPageTemplate, EpdfStage, withStage } from '@embedpdf/angular/stage';
import { EpdfRenderLayer, withRender } from '@embedpdf/angular/render';
import { localEngine } from '@embedpdf/engine';

const welcome = async (): Promise<OpenInput> => {
  const response = await fetch('/pdfs/welcome.pdf');
  return { kind: 'bytes', bytes: new Uint8Array(await response.arrayBuffer()) };
};

const dana = { userId: 'u_381', displayName: 'Dana Smith' };

// What each role may do, as permissions.
const roles = {
  reader: ['doc.open', 'doc.render', 'doc.text.select'],
  editor: [
    'doc.open',
    'doc.render',
    'doc.text.select',
    'doc.text.copy',
    'doc.download',
    'doc.print',
  ],
};
type Role = keyof typeof roles;

@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, EpdfStage, EpdfPageTemplate, EpdfRenderLayer],
  providers: [
    provideEmbedPdf(
      {
        engine: () => localEngine(),
        identity: dana,
        scope: roles.reader,
        initialDocuments: [{ source: welcome, name: 'welcome.pdf' }],
      },
      withStage(),
      withRender(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './identity.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="toolbar">
      <label class="label">
        Dana Smith, as
        <select #picker class="select" [value]="role()" (change)="role.set(asRole(picker.value))">
          <option value="reader">reader</option>
          <option value="editor">editor</option>
        </select>
      </label>
      <!-- Read the document's id too, so the checks are read again when it opens or closes. -->
      @let id = document.id();
      <span class="check" [attr.data-allowed]="!!id && documents.canDownload()"> Download </span>
      <span class="check" [attr.data-allowed]="!!id && documents.canPrint()">Print</span>
    </div>
    <p class="note">
      This document opened for a {{ openedAs() }}.
      @if (openedAs() !== role()) {
        <button type="button" class="button" (click)="openAgain()">
          Open it again as {{ role() }}
        </button>
      }
    </p>

    <epdf-stage *epdfDocumentGate="let ready; fallback: opening" class="stage">
      <ng-template epdfPage>
        <epdf-render-layer />
      </ng-template>
    </epdf-stage>

    <ng-template #opening><p class="loading">Opening…</p></ng-template>
  `,
})
export class App {
  protected readonly documents = inject(EpdfDocuments);
  protected readonly document = inject(EpdfDocument);
  protected readonly role = signal<Role>('reader');
  // The role the open document was opened with: it keeps that one.
  protected readonly openedAs = signal<Role>('reader');

  constructor() {
    // The viewer's scope follows the role; documents opened from now on get it.
    const viewer = inject(EpdfViewer);
    effect(() => viewer.updateSettings({ scope: roles[this.role()] }));
  }

  protected asRole(value: string): Role {
    return value as Role;
  }

  protected async openAgain() {
    const role = this.role();
    await this.documents.close(this.document.id());
    await this.documents.open(welcome, { name: 'welcome.pdf' });
    this.openedAs.set(role);
  }
}