import { PDFAtelier } from '@innosoft/pdf-atelier-react';

const spanishLabels = {
  labelAnnotationColor: 'Color de Anotación',
  labelDraw: 'Dibujar',
  labelText: 'Texto',
  labelHighlight: 'Resaltar',
  labelUndo: 'Deshacer',
  labelRedo: 'Rehacer',
  labelOpenPdf: 'Abrir PDF',
  labelExportPdf: 'Exportar PDF',
  labelZoomControls: 'Controles de Zoom',
  labelPageNavigation: 'Navegación de Páginas',
  labelNextPage: 'Página Siguiente',
  labelPreviousPage: 'Página Anterior',
};

export default function App() {
  return (
    <PDFAtelier
      src="/document.pdf"
      license="Mi Licencia"
      showDraw={true}
      showText={true}
      showHighlight={true}
      showUndo={true}
      showRedo={true}
      {...spanishLabels}
    />
  );
}

import { Component } from '@angular/core';
import { PdfAtelierWrapper } from '@innosoft/pdf-atelier-angular';

@Component({
  standalone: true,
  selector: 'app-localized-pdf',
  imports: [PdfAtelierWrapper],
  template: `
    <select (change)="switchLanguage($event)">
      <option value="en">English</option>
      <option value="es">Spanish</option>
      <option value="fr">French</option>
    </select>

    <pdf-atelier-wrapper
      [src]="'/document.pdf'"
      [license]="labels.license"
      [labelDraw]="labels.labelDraw"
      [labelText]="labels.labelText"
      [labelUndo]="labels.labelUndo"
      [labelRedo]="labels.labelRedo"
      [showDraw]="true"
      [showText]="true"
      [showUndo]="true"
      [showRedo]="true"
    ></pdf-atelier-wrapper>
  `,
})
export class LocalizedPdfComponent {
  labels = this.getLabels('en');

  private translations: Record<string, Record<string, string>> = {
    en: {
      license: 'My License',
      labelDraw: 'Draw',
      labelText: 'Text',
      labelUndo: 'Undo',
      labelRedo: 'Redo',
    },
    es: {
      license: 'Mi Licencia',
      labelDraw: 'Dibujar',
      labelText: 'Texto',
      labelUndo: 'Deshacer',
      labelRedo: 'Rehacer',
    },
    fr: {
      license: 'Ma Licence',
      labelDraw: 'Dessiner',
      labelText: 'Texte',
      labelUndo: 'Annuler',
      labelRedo: 'Refaire',
    },
  };

  switchLanguage(event: Event) {
    const lang = (event.target as HTMLSelectElement).value;
    this.labels = this.getLabels(lang);
  }

  private getLabels(lang: string) {
    return this.translations[lang] || this.translations['en'];
  }
}

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import PdfAtelierWrapper from '@innosoft/pdf-atelier-vue';

const { locale, t } = useI18n();

const pdfLabels = computed(() => ({
  license: t('pdf.license'),
  labelDraw: t('pdf.labelDraw'),
  labelText: t('pdf.labelText'),
  labelHighlight: t('pdf.labelHighlight'),
  labelUndo: t('pdf.labelUndo'),
  labelRedo: t('pdf.labelRedo'),
  labelOpenPdf: t('pdf.labelOpenPdf'),
  labelExportPdf: t('pdf.labelExportPdf'),
  labelZoomControls: t('pdf.labelZoomControls'),
  labelPageNavigation: t('pdf.labelPageNavigation'),
}));
</script>

<template>
  <div>
    <select v-model="locale">
      <option value="en">English</option>
      <option value="es">Spanish</option>
      <option value="fr">French</option>
    </select>

    <PdfAtelierWrapper
      :src="'/document.pdf'"
      v-bind="pdfLabels"
      :showDraw="true"
      :showText="true"
      :showHighlight="true"
      :showUndo="true"
      :showRedo="true"
    />
  </div>
</template>