Metadata

import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';
import { EpdfDocumentGate, provideEmbedPdf } from '@embedpdf/angular/runtime';
import type { DocumentMetadata, OpenInput } from '@embedpdf/angular/runtime';
import { EpdfMetadata, withMetadata } from '@embedpdf/angular/metadata';
import { localEngine } from '@embedpdf/engine';

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

const FIELDS = [
  ['title', 'Title'],
  ['author', 'Author'],
  ['subject', 'Subject'],
  ['keywords', 'Keywords'],
  ['creator', 'Made in'],
  ['producer', 'Turned into a PDF by'],
  ['createdAt', 'Created'],
  ['modifiedAt', 'Last changed'],
  ['trapped', 'Trapped'],
] as const;

// Dates are ISO strings: show them in the reader's own format.
const DATES: ReadonlySet<string> = new Set(['createdAt', 'modifiedAt']);
const show = (field: string, value: string | null) => {
  if (value === null) return null;
  return DATES.has(field) ? new Date(value).toLocaleString() : value;
};

// The document's properties, the way a "Document properties" dialog shows them.
@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: ebook }] },
      withMetadata(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './properties.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <section *epdfDocumentGate="let document; fallback: loading" class="panel">
      <header class="panel-header">
        <h3 class="panel-title">Document properties</h3>
        <span class="status" [attr.data-status]="metadata.status()">
          {{ metadata.status() }}
        </span>
      </header>
      <dl class="properties">
        @for (entry of fields; track entry[0]) {
          @let value = valueOf(entry[0], metadata.fields());
          <div class="property">
            <dt>{{ entry[1] }}</dt>
            <dd [class.unset]="value === null">{{ value ?? 'not set' }}</dd>
          </div>
        }
      </dl>
    </section>

    <ng-template #loading><p class="loading">Loading…</p></ng-template>
  `,
})
export class App {
  protected readonly metadata = inject(EpdfMetadata);
  protected readonly fields = FIELDS;

  protected valueOf(field: (typeof FIELDS)[number][0], metadata: DocumentMetadata | null) {
    return metadata ? show(field, metadata[field]) : null;
  }
}

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  input,
  OnInit,
  signal,
  ViewEncapsulation,
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { EpdfDocumentGate, provideEmbedPdf } from '@embedpdf/angular/runtime';
import type { DocumentMetadata, OpenInput } from '@embedpdf/angular/runtime';
import { EpdfMetadata, withMetadata } from '@embedpdf/angular/metadata';
import { localEngine } from '@embedpdf/engine';

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

const EDITABLE = ['title', 'author', 'subject', 'keywords'] as const;
type Draft = Record<(typeof EDITABLE)[number], string>;

// A properties form: the inputs start with what the file says, and Save writes them back.
@Component({
  selector: 'demo-properties-form',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="layout">
      <form class="form" (submit)="$event.preventDefault(); save()">
        @for (key of editable; track key) {
          <label class="row">
            <span class="name">{{ key }}</span>
            <input
              #field
              class="field"
              placeholder="not set"
              [value]="draft()[key]"
              [disabled]="!metadata.canUpdate()"
              (input)="edit(key, field.value)"
            />
          </label>
        }
        <div class="actions">
          <button type="submit" class="button primary" [disabled]="!metadata.canUpdate()">
            Save
          </button>
          <button
            type="button"
            class="button"
            [disabled]="!metadata.canUpdate()"
            (click)="modifiedNow()"
          >
            Set the modified date to now
          </button>
        </div>
      </form>
      <section class="changes" aria-live="polite">
        <h3 class="changes-title">Changes</h3>
        <p class="modified">Last changed: {{ modifiedAt() }}</p>
        @if (changes().length === 0) {
          <p class="empty">Edit a field and save.</p>
        } @else {
          <ul class="log">
            @for (change of changes(); track changes().length - $index) {
              <li>{{ change }}</li>
            }
          </ul>
        }
      </section>
    </div>
  `,
})
export class PropertiesForm implements OnInit {
  /** The fields as the file has them when the form starts. */
  readonly initial = input.required<DocumentMetadata>();
  protected readonly metadata = inject(EpdfMetadata);
  protected readonly editable = EDITABLE;
  protected readonly draft = signal<Draft>({ title: '', author: '', subject: '', keywords: '' });
  protected readonly changes = signal<string[]>([]);
  protected readonly modifiedAt = computed(() => {
    const modifiedAt = this.metadata.fields()?.modifiedAt ?? null;
    return modifiedAt ? new Date(modifiedAt).toLocaleString() : 'not set';
  });

  constructor() {
    // Every change to the standard fields, by you or anyone else.
    this.metadata.updated$
      .pipe(takeUntilDestroyed())
      .subscribe(({ changedKeys, origin }) =>
        this.changes.update((list) => [
          `${changedKeys.join(', ')} changed ${origin.kind === 'local' ? 'here' : 'elsewhere'}`,
          ...list,
        ]),
      );
  }

  ngOnInit() {
    const initial = this.initial();
    this.draft.set({
      title: initial.title ?? '',
      author: initial.author ?? '',
      subject: initial.subject ?? '',
      keywords: initial.keywords ?? '',
    });
  }

  protected edit(key: keyof Draft, value: string) {
    this.draft.update((draft) => ({ ...draft, [key]: value }));
  }

  // An empty field removes it: null, not ''.
  protected save() {
    const draft = this.draft();
    void this.metadata.update({
      title: draft.title.trim() || null,
      author: draft.author.trim() || null,
      subject: draft.subject.trim() || null,
      keywords: draft.keywords.trim() || null,
    });
  }

  protected modifiedNow() {
    void this.metadata.update({ modifiedAt: new Date() });
  }
}

// The form starts once the properties have been read from the file.
@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, PropertiesForm],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: ebook }] },
      withMetadata(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './edit.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <ng-container *epdfDocumentGate="let document; fallback: loading">
      @if (metadata.fields(); as fields) {
        <demo-properties-form [initial]="fields" />
      } @else {
        <p class="loading">Reading…</p>
      }
    </ng-container>

    <ng-template #loading><p class="loading">Loading…</p></ng-template>
  `,
})
export class App {
  protected readonly metadata = inject(EpdfMetadata);
}

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  signal,
  ViewEncapsulation,
} from '@angular/core';
import { EpdfDocumentGate, isPluginError, provideEmbedPdf } from '@embedpdf/angular/runtime';
import type { OpenInput } from '@embedpdf/angular/runtime';
import { EpdfMetadata, withMetadata } from '@embedpdf/angular/metadata';
import { localEngine } from '@embedpdf/engine';

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

// Your own fields, kept in the document: add one, change one, remove one.
@Component({
  selector: 'demo-custom-fields',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <section class="panel">
      <table class="fields">
        <thead>
          <tr>
            <th>Name</th>
            <th>Value</th>
            <th aria-label="Remove"></th>
          </tr>
        </thead>
        <tbody>
          @for (field of fields(); track field[0]) {
            <tr>
              <td class="key">{{ field[0] }}</td>
              <td>{{ field[1] }}</td>
              <td>
                <!-- null removes a field; the others stay as they are. -->
                <button
                  type="button"
                  class="button quiet"
                  [disabled]="!metadata.canUpdate()"
                  (click)="remove(field[0])"
                >
                  Remove
                </button>
              </td>
            </tr>
          }
        </tbody>
      </table>
      <form class="add" (submit)="$event.preventDefault(); add()">
        <input
          #nameField
          class="field"
          aria-label="Name"
          placeholder="Name, such as approvedOn"
          [value]="name()"
          (input)="name.set(nameField.value)"
        />
        <input
          #valueField
          class="field"
          aria-label="Value"
          placeholder="Value"
          [value]="value()"
          (input)="value.set(valueField.value)"
        />
        <button type="submit" class="button" [disabled]="!metadata.canUpdate() || !name().trim()">
          Add
        </button>
      </form>
      @if (error(); as error) {
        <p class="error">{{ error }}</p>
      }
    </section>
  `,
})
export class CustomFields {
  protected readonly metadata = inject(EpdfMetadata);
  protected readonly fields = computed(() => Object.entries(this.metadata.custom.fields() ?? {}));
  protected readonly name = signal('');
  protected readonly value = signal('');
  protected readonly error = signal<string | null>(null);

  constructor() {
    // Two fields of our own, written on load. Setting the same values again changes nothing.
    void this.metadata.custom.update({ contractId: 'C-2026-114', reviewedBy: 'dana' });
  }

  protected async add() {
    try {
      await this.metadata.custom.update({ [this.name().trim()]: this.value() });
      this.name.set('');
      this.value.set('');
      this.error.set(null);
    } catch (failure) {
      // A name the PDF can't take, such as one of the standard fields.
      if (isPluginError(failure, 'invalid-input')) this.error.set(failure.message);
      else throw failure;
    }
  }

  protected remove(key: string) {
    void this.metadata.custom.update({ [key]: null });
  }
}

@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, CustomFields],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: ebook }] },
      withMetadata(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './custom-fields.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <demo-custom-fields *epdfDocumentGate="let document; fallback: loading" />

    <ng-template #loading><p class="loading">Loading…</p></ng-template>
  `,
})
export class App {}