@magic-translate/angular 0.0.0-stage → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 - PRESENT i42 GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,171 @@
-# Temporary Holding Version
+# @magic-translate/angular
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![NPM](https://img.shields.io/npm/v/@magic-translate/angular.svg)](https://www.npmjs.com/package/@magic-translate/angular)
+[![npm](https://img.shields.io/npm/dm/@magic-translate/angular.svg)](https://www.npmjs.com/package/@magic-translate/angular)
+
+Angular client for [Magic Translate](https://magictranslate.io). Write your
+templates in one language and Magic Translate translates them on the fly.
+
+Requires Angular 20 or newer. Works with and without zone.js.
+
+## Install
+
+```bash
+npm install --save @magic-translate/angular
+```
+
+Or with yarn:
+
+```bash
+yarn add @magic-translate/angular
+```
+
+## Setup
+
+Add `provideMagicTranslate` to your application config. You can get an API key
+for free at [magictranslate.io](https://magictranslate.io).
+
+```ts
+// app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideMagicTranslate } from '@magic-translate/angular';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideMagicTranslate({
+      apiKey: 'YOUR_API_KEY',
+      language: 'de',
+    }),
+  ],
+};
+```
+
+## Usage
+
+### `<t>` component
+
+Wrap any text, including plain HTML, in `<t>`. The original content is shown
+until its translation has loaded.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { T } from '@magic-translate/angular';
+
+@Component({
+  selector: 'app-welcome',
+  imports: [T],
+  template: `
+    <h1><t>Welcome to our shop</t></h1>
+    <p>
+      <t>Click <a href="/sale">here</a> to see <b>today's</b> deals.</t>
+    </p>
+    <p>
+      <t>Hello {{ name() }}</t>
+    </p>
+  `,
+})
+export class Welcome {
+  name = signal('Anna');
+}
+```
+
+The content is re-translated whenever it changes, for example when `name`
+changes in the example above.
+
+All translations requested at the same time are sent to the API in a single
+request, and translations are cached, so you can use as many `<t>` components
+as you like.
+
+`<mt-translate>` works as an alternative selector, and `Translate` is the same
+component as `T`.
+
+Only text and plain HTML elements are allowed inside `<t>`. Other components
+are not, because they cannot survive the translation. The translated markup
+goes through Angular's HTML sanitizer.
+
+### `t` pipe
+
+Use the pipe for plain strings, such as attributes, or anywhere a component
+does not fit:
+
+```ts
+import { TranslatePipe } from '@magic-translate/angular';
+
+@Component({
+  imports: [TranslatePipe],
+  template: `<input [placeholder]="'Search products' | t" />`,
+})
+export class Search {}
+```
+
+The pipe returns the original text until the translation has loaded.
+
+### Options per translation
+
+Both the component and the pipe can override the target language and the
+formality:
+
+```html
+<t lang="fr" formality="formal">How are you?</t>
+
+<input [placeholder]="'Your name' | t: { lang: 'fr', formality: 'formal' }" />
+```
+
+### Switching languages
+
+Inject the `MagicTranslate` service to read or change the current language.
+Every `<t>` component and `t` pipe updates automatically.
+
+```ts
+import { Component, inject } from '@angular/core';
+import { MagicTranslate } from '@magic-translate/angular';
+
+@Component({
+  selector: 'app-language-switcher',
+  template: `
+    <select
+      [value]="magicTranslate.language()"
+      (change)="magicTranslate.setLanguage($any($event.target).value)"
+    >
+      <option value="en">English</option>
+      <option value="de">Deutsch</option>
+      <option value="fr">Français</option>
+    </select>
+  `,
+})
+export class LanguageSwitcher {
+  protected readonly magicTranslate = inject(MagicTranslate);
+}
+```
+
+`language` is a signal, so you can also use it in `computed` and `effect`.
+
+### Translating in code
+
+To translate a string in TypeScript, call `translate` on the service:
+
+```ts
+const magicTranslate = inject(MagicTranslate);
+const message = await magicTranslate.translate('Your order has been placed');
+```
+
+## Configuration
+
+`provideMagicTranslate` accepts:
+
+| Option           | Description                                                                                                                            |
+| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `apiKey`         | Required. Your Magic Translate API key.                                                                                                |
+| `language`       | Required. The language content is translated to, e.g. `'de'`.                                                                          |
+| `sourceLanguage` | The language your templates are written in. Detected automatically by default; only set it if automatic detection gives wrong results. |
+| `formality`      | `'formal'` or `'informal'`. Not supported for all languages. Can be overridden per translation.                                        |
+| `debug`          | Logs requests to the console.                                                                                                          |
+
+## Server-side rendering
+
+Translations are only loaded in the browser. With SSR the server renders the
+original content, and it is translated after hydration.
+
+## License
+
+MIT © [i42 GmbH](https://i42.ch)

package/fesm2022/magic-translate-angular.mjs

@@ -0,0 +1,313 @@
+import { DataLoader, cacheKeyFn, defaultLoaderFactory, libraryName, libraryWebsite } from "@magic-translate/core";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Injectable, InjectionToken, PLATFORM_ID, Pipe, SecurityContext, ViewEncapsulation, afterNextRender, computed, effect, inject, input, makeEnvironmentProviders, signal, viewChild } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
+import { isPlatformServer } from "@angular/common";
+export * from "@magic-translate/core";
+const MAGIC_TRANSLATE_CONFIG = new InjectionToken("MAGIC_TRANSLATE_CONFIG");
+var MagicTranslate = class MagicTranslate {
+	config = inject(MAGIC_TRANSLATE_CONFIG);
+	languageOverride = signal(null, ...ngDevMode ? [{ debugName: "languageOverride" }] : /* istanbul ignore next */ []);
+	apiKey = this.config.apiKey;
+	sourceLanguage = this.config.sourceLanguage;
+	language = computed(() => this.languageOverride() ?? this.config.language, ...ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []);
+	dataLoader = computed(() => {
+		const { debug, apiKey, sourceLanguage, _apiUrl, formality } = this.config;
+		const loaderFactory = this.config._loaderFactory ?? defaultLoaderFactory;
+		const language = this.language();
+		return new DataLoader(loaderFactory({
+			debug: !!debug,
+			apiKey,
+			lang: language,
+			sourceLang: sourceLanguage,
+			apiUrl: _apiUrl,
+			formality
+		}), { cacheKeyFn: cacheKeyFn(apiKey, sourceLanguage, language) });
+	}, ...ngDevMode ? [{ debugName: "dataLoader" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (!this.config.apiKey) throw new Error(`Missing API key. Please get one at ${libraryWebsite}`);
+	}
+	setLanguage(language) {
+		this.languageOverride.set(language);
+	}
+	translate(text, params = {}) {
+		return this.dataLoader().load({
+			text,
+			...params
+		});
+	}
+	cacheKey(text, params = {}) {
+		return cacheKeyFn(this.apiKey, this.sourceLanguage, this.language())({
+			text,
+			...params
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: MagicTranslate,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: MagicTranslate
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: MagicTranslate,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => []
+});
+function provideMagicTranslate(config) {
+	return makeEnvironmentProviders([{
+		provide: MAGIC_TRANSLATE_CONFIG,
+		useValue: config
+	}, MagicTranslate]);
+}
+function readSource(element) {
+	const clone = element.cloneNode(true);
+	const comments = [];
+	let scopeAttribute;
+	const walker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
+	for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+		if (node.nodeType === Node.COMMENT_NODE) {
+			comments.push(node);
+			continue;
+		}
+		const el = node;
+		if (el.localName.includes("-")) throw new Error(`Components are not allowed inside \`<t>...</t>\` components. The component found inside the t component is <${el.localName}>.`);
+		for (const { name } of Array.from(el.attributes)) {
+			if (name.startsWith("_ngcontent-")) scopeAttribute = name;
+			if (name.startsWith("_ng") || name.startsWith("ng-reflect-")) el.removeAttribute(name);
+		}
+	}
+	comments.forEach((comment) => comment.parentNode?.removeChild(comment));
+	const [, leadingWhitespace, html, trailingWhitespace] = /^(\s*)([\s\S]*?)(\s*)$/.exec(clone.innerHTML);
+	return {
+		html,
+		leadingWhitespace,
+		trailingWhitespace,
+		scopeAttribute
+	};
+}
+var Translate = class Translate {
+	lang = input(void 0, ...ngDevMode ? [{ debugName: "lang" }] : /* istanbul ignore next */ []);
+	formality = input(void 0, ...ngDevMode ? [{ debugName: "formality" }] : /* istanbul ignore next */ []);
+	magicTranslate = inject(MagicTranslate);
+	sanitizer = inject(DomSanitizer);
+	sourceRef = viewChild.required("source", ...ngDevMode ? [{ debugName: "sourceRef" }] : /* istanbul ignore next */ []);
+	targetRef = viewChild.required("target", ...ngDevMode ? [{ debugName: "targetRef" }] : /* istanbul ignore next */ []);
+	source = signal(null, ...ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []);
+	translated = signal(false, ...ngDevMode ? [{ debugName: "translated" }] : /* istanbul ignore next */ []);
+	lastRequestId = 0;
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		afterNextRender(() => {
+			const element = this.sourceRef().nativeElement;
+			const read = () => this.source.set(readSource(element));
+			read();
+			const observer = new MutationObserver(read);
+			observer.observe(element, {
+				subtree: true,
+				childList: true,
+				characterData: true,
+				attributes: true
+			});
+			destroyRef.onDestroy(() => observer.disconnect());
+		});
+		effect(() => {
+			const source = this.source();
+			const lang = this.lang();
+			const formality = this.formality();
+			this.magicTranslate.language();
+			if (!source?.html) {
+				this.translated.set(false);
+				return;
+			}
+			const requestId = ++this.lastRequestId;
+			this.magicTranslate.translate(source.html, {
+				lang,
+				formality
+			}).then((translation) => {
+				if (requestId === this.lastRequestId) this.render(source, translation);
+			});
+		});
+	}
+	render(source, translation) {
+		const target = this.targetRef().nativeElement;
+		const html = this.sanitizer.sanitize(SecurityContext.HTML, translation);
+		if (html === null) {
+			console.warn(`[${libraryName}]: Could not render translation.`);
+			return;
+		}
+		target.innerHTML = `${source.leadingWhitespace}${html}${source.trailingWhitespace}`;
+		if (source.scopeAttribute) target.querySelectorAll("*").forEach((el) => el.setAttribute(source.scopeAttribute, ""));
+		this.translated.set(true);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Translate,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.3",
+		type: Translate,
+		isStandalone: true,
+		selector: "t, mt-translate",
+		inputs: {
+			lang: {
+				classPropertyName: "lang",
+				publicName: "lang",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			formality: {
+				classPropertyName: "formality",
+				publicName: "formality",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { styleAttribute: "display: contents" },
+		viewQueries: [{
+			propertyName: "sourceRef",
+			first: true,
+			predicate: ["source"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "targetRef",
+			first: true,
+			predicate: ["target"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `<span #source [style.display]="translated() ? 'none' : 'contents'"
+      ><ng-content /></span
+    ><span
+      #target
+      [style.display]="translated() ? 'contents' : 'none'"
+    ></span>`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: Translate,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "t, mt-translate",
+			template: `<span #source [style.display]="translated() ? 'none' : 'contents'"
+      ><ng-content /></span
+    ><span
+      #target
+      [style.display]="translated() ? 'contents' : 'none'"
+    ></span>`,
+			host: { style: "display: contents" },
+			encapsulation: ViewEncapsulation.None,
+			changeDetection: ChangeDetectionStrategy.OnPush
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		lang: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "lang",
+				required: false
+			}]
+		}],
+		formality: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "formality",
+				required: false
+			}]
+		}],
+		sourceRef: [{
+			type: i0.ViewChild,
+			args: ["source", { isSignal: true }]
+		}],
+		targetRef: [{
+			type: i0.ViewChild,
+			args: ["target", { isSignal: true }]
+		}]
+	}
+});
+const T = Translate;
+var TranslatePipe = class TranslatePipe {
+	magicTranslate = inject(MagicTranslate);
+	changeDetectorRef = inject(ChangeDetectorRef);
+	isServer = isPlatformServer(inject(PLATFORM_ID));
+	key;
+	translation;
+	transform(text, params = {}) {
+		if (!text || this.isServer) return text;
+		const key = this.magicTranslate.cacheKey(text, params);
+		if (key !== this.key) {
+			this.key = key;
+			this.translation = void 0;
+			this.magicTranslate.translate(text, params).then((translation) => {
+				if (this.key === key) {
+					this.translation = translation;
+					this.changeDetectorRef.markForCheck();
+				}
+			});
+		}
+		return this.translation ?? text;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: TranslatePipe,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Pipe
+	});
+	static ɵpipe = i0.ɵɵngDeclarePipe({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: TranslatePipe,
+		isStandalone: true,
+		name: "t",
+		pure: false
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: TranslatePipe,
+	decorators: [{
+		type: Pipe,
+		args: [{
+			name: "t",
+			pure: false
+		}]
+	}]
+});
+export { MAGIC_TRANSLATE_CONFIG, MagicTranslate, T, Translate, TranslatePipe, provideMagicTranslate };
+
+//# sourceMappingURL=magic-translate-angular.mjs.map

package/fesm2022/magic-translate-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"magic-translate-angular.mjs","names":[],"sources":["../../src/lib/magic-translate-config.ts","../../src/lib/magic-translate.service.ts","../../src/lib/provide-magic-translate.ts","../../src/lib/translate.component.ts","../../src/lib/translate.pipe.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { MagicTranslateConfig } from '@magic-translate/core';\n\nexport const MAGIC_TRANSLATE_CONFIG = new InjectionToken<MagicTranslateConfig>(\n  'MAGIC_TRANSLATE_CONFIG'\n);\n","import { computed, inject, Injectable, signal } from '@angular/core';\nimport {\n  cacheKeyFn,\n  DataLoader,\n  DataLoaderLoadParams,\n  defaultLoaderFactory,\n  Language,\n  libraryWebsite,\n} from '@magic-translate/core';\nimport { MAGIC_TRANSLATE_CONFIG } from './magic-translate-config';\n\n/**\n * Type alias to make the language enum more flexible to also allow passing language strings\n * instead of just the enum.\n */\nexport type Languages = `${Language}`;\n\nexport type TranslateParams = Omit<DataLoaderLoadParams, 'text'>;\n\n@Injectable()\nexport class MagicTranslate {\n  private readonly config = inject(MAGIC_TRANSLATE_CONFIG);\n  private readonly languageOverride = signal<Languages | null>(null);\n\n  readonly apiKey = this.config.apiKey;\n  readonly sourceLanguage = this.config.sourceLanguage;\n\n  /**\n   * The language content is currently translated to.\n   */\n  readonly language = computed(\n    () => this.languageOverride() ?? this.config.language\n  );\n\n  readonly dataLoader = computed(() => {\n    const { debug, apiKey, sourceLanguage, _apiUrl, formality } = this.config;\n    const loaderFactory = this.config._loaderFactory ?? defaultLoaderFactory;\n    const language = this.language();\n\n    return new DataLoader<DataLoaderLoadParams, string, string>(\n      loaderFactory({\n        debug: !!debug,\n        apiKey,\n        lang: language,\n        sourceLang: sourceLanguage,\n        apiUrl: _apiUrl,\n        formality,\n      }),\n      { cacheKeyFn: cacheKeyFn(apiKey, sourceLanguage, language) }\n    );\n  });\n\n  constructor() {\n    if (!this.config.apiKey) {\n      throw new Error(`Missing API key. Please get one at ${libraryWebsite}`);\n    }\n  }\n\n  setLanguage(language: Languages): void {\n    this.languageOverride.set(language);\n  }\n\n  translate(text: string, params: TranslateParams = {}): Promise<string> {\n    return this.dataLoader().load({ text, ...params });\n  }\n\n  /** @ignore */\n  cacheKey(text: string, params: TranslateParams = {}): string {\n    return cacheKeyFn(\n      this.apiKey,\n      this.sourceLanguage,\n      this.language()\n    )({ text, ...params });\n  }\n}\n","import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\nimport { MagicTranslateConfig } from '@magic-translate/core';\nimport { MAGIC_TRANSLATE_CONFIG } from './magic-translate-config';\nimport { MagicTranslate } from './magic-translate.service';\n\n/**\n * Sets up Magic Translate for the application. Add it to the `providers` of\n * your application config.\n */\nexport function provideMagicTranslate(\n  config: MagicTranslateConfig\n): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: MAGIC_TRANSLATE_CONFIG, useValue: config },\n    MagicTranslate,\n  ]);\n}\n","import {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  SecurityContext,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { libraryName, TranslateOptions } from '@magic-translate/core';\nimport { Languages, MagicTranslate } from './magic-translate.service';\n\ninterface Source {\n  html: string;\n  leadingWhitespace: string;\n  trailingWhitespace: string;\n  // The `_ngcontent-*` attribute of the host template, so its component\n  // styles still apply to the translated markup.\n  scopeAttribute?: string;\n}\n\n/**\n * Turns the projected content into the HTML string that gets translated,\n * without the comments and attributes Angular adds to the DOM.\n */\nfunction readSource(element: HTMLElement): Source {\n  const clone = element.cloneNode(true) as HTMLElement;\n  const comments: Node[] = [];\n  let scopeAttribute: string | undefined;\n\n  const walker = document.createTreeWalker(\n    clone,\n    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT\n  );\n  for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n    if (node.nodeType === Node.COMMENT_NODE) {\n      comments.push(node);\n      continue;\n    }\n\n    const el = node as Element;\n    if (el.localName.includes('-')) {\n      throw new Error(\n        `Components are not allowed inside \\`<t>...</t>\\` components. The component found inside the t component is <${el.localName}>.`\n      );\n    }\n\n    for (const { name } of Array.from(el.attributes)) {\n      if (name.startsWith('_ngcontent-')) {\n        scopeAttribute = name;\n      }\n      if (name.startsWith('_ng') || name.startsWith('ng-reflect-')) {\n        el.removeAttribute(name);\n      }\n    }\n  }\n  comments.forEach((comment) => comment.parentNode?.removeChild(comment));\n\n  const [, leadingWhitespace, html, trailingWhitespace] =\n    /^(\\s*)([\\s\\S]*?)(\\s*)$/.exec(clone.innerHTML)!;\n\n  return { html, leadingWhitespace, trailingWhitespace, scopeAttribute };\n}\n\n@Component({\n  selector: 't, mt-translate',\n  template: `<span #source [style.display]=\"translated() ? 'none' : 'contents'\"\n      ><ng-content /></span\n    ><span\n      #target\n      [style.display]=\"translated() ? 'contents' : 'none'\"\n    ></span>`,\n  host: { style: 'display: contents' },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Translate {\n  readonly lang = input<Languages | undefined>(undefined);\n  readonly formality = input<TranslateOptions['formality']>(undefined);\n\n  private readonly magicTranslate = inject(MagicTranslate);\n  private readonly sanitizer = inject(DomSanitizer);\n  private readonly sourceRef =\n    viewChild.required<ElementRef<HTMLElement>>('source');\n  private readonly targetRef =\n    viewChild.required<ElementRef<HTMLElement>>('target');\n\n  private readonly source = signal<Source | null>(null);\n  protected readonly translated = signal(false);\n  private lastRequestId = 0;\n\n  constructor() {\n    const destroyRef = inject(DestroyRef);\n\n    afterNextRender(() => {\n      const element = this.sourceRef().nativeElement;\n      const read = () => this.source.set(readSource(element));\n      read();\n\n      // Picks up changes to the projected content, such as interpolations.\n      const observer = new MutationObserver(read);\n      observer.observe(element, {\n        subtree: true,\n        childList: true,\n        characterData: true,\n        attributes: true,\n      });\n      destroyRef.onDestroy(() => observer.disconnect());\n    });\n\n    effect(() => {\n      const source = this.source();\n      const lang = this.lang();\n      const formality = this.formality();\n      // a language switch has to re-translate the content\n      this.magicTranslate.language();\n\n      if (!source?.html) {\n        this.translated.set(false);\n        return;\n      }\n\n      // make sure that we only ever use the response of the most recent request.\n      const requestId = ++this.lastRequestId;\n      this.magicTranslate\n        .translate(source.html, { lang, formality })\n        .then((translation) => {\n          if (requestId === this.lastRequestId) {\n            this.render(source, translation);\n          }\n        });\n    });\n  }\n\n  private render(source: Source, translation: string) {\n    const target = this.targetRef().nativeElement;\n    const html = this.sanitizer.sanitize(SecurityContext.HTML, translation);\n    if (html === null) {\n      console.warn(`[${libraryName}]: Could not render translation.`);\n      return;\n    }\n\n    target.innerHTML = `${source.leadingWhitespace}${html}${source.trailingWhitespace}`;\n    if (source.scopeAttribute) {\n      target\n        .querySelectorAll('*')\n        .forEach((el) => el.setAttribute(source.scopeAttribute!, ''));\n    }\n    this.translated.set(true);\n  }\n}\n\nexport const T = Translate;\n","import { isPlatformServer } from '@angular/common';\nimport {\n  ChangeDetectorRef,\n  inject,\n  Pipe,\n  PipeTransform,\n  PLATFORM_ID,\n} from '@angular/core';\nimport { MagicTranslate, TranslateParams } from './magic-translate.service';\n\n/**\n * Translates a plain string, e.g. for attributes:\n * `<input [placeholder]=\"'Search' | t\" />`. Returns the original text until\n * the translation has loaded.\n */\n@Pipe({ name: 't', pure: false })\nexport class TranslatePipe implements PipeTransform {\n  private readonly magicTranslate = inject(MagicTranslate);\n  private readonly changeDetectorRef = inject(ChangeDetectorRef);\n  private readonly isServer = isPlatformServer(inject(PLATFORM_ID));\n\n  private key?: string;\n  private translation?: string;\n\n  transform(text: string, params: TranslateParams = {}): string {\n    if (!text || this.isServer) {\n      return text;\n    }\n\n    const key = this.magicTranslate.cacheKey(text, params);\n    if (key !== this.key) {\n      this.key = key;\n      this.translation = undefined;\n      this.magicTranslate.translate(text, params).then((translation) => {\n        if (this.key === key) {\n          this.translation = translation;\n          this.changeDetectorRef.markForCheck();\n        }\n      });\n    }\n\n    return this.translation ?? text;\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "@magic-translate/angular",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.1",
+  "keywords": [
+    "angular",
+    "magic-translate",
+    "i18n",
+    "translations",
+    "multilanguage"
+  ],
+  "description": "Angular client for Magic Translate (https://magictranslate.io)",
+  "author": "i42 GmbH <info@i42.ch>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/magic-translate/magic-translate-angular.git"
+  },
+  "homepage": "https://magictranslate.io",
+  "license": "MIT",
+  "engines": {
+    "node": ">=22.22.1"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=20.0.0",
+    "@angular/core": ">=20.0.0",
+    "@angular/platform-browser": ">=20.0.0"
+  },
+  "dependencies": {
+    "@magic-translate/core": "^1.4.0",
+    "tslib": "^2.8.1"
+  },
+  "module": "fesm2022/magic-translate-angular.mjs",
+  "typings": "types/magic-translate-angular.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/magic-translate-angular.d.ts",
+      "default": "./fesm2022/magic-translate-angular.mjs"
+    }
+  },
+  "sideEffects": false,
+  "type": "module"
 }

package/types/magic-translate-angular.d.ts

@@ -0,0 +1,77 @@
+import { DataLoader, DataLoaderLoadParams, Language, MagicTranslateConfig } from "@magic-translate/core";
+import * as i0 from "@angular/core";
+import { EnvironmentProviders, InjectionToken, PipeTransform } from "@angular/core";
+export * from "@magic-translate/core";
+export declare const MAGIC_TRANSLATE_CONFIG: InjectionToken<MagicTranslateConfig>;
+/**
+ * Sets up Magic Translate for the application. Add it to the `providers` of
+ * your application config.
+ */
+export declare function provideMagicTranslate(config: MagicTranslateConfig): EnvironmentProviders;
+/**
+ * Type alias to make the language enum more flexible to also allow passing language strings
+ * instead of just the enum.
+ */
+export type Languages = `${Language}`;
+export type TranslateParams = Omit<DataLoaderLoadParams, 'text'>;
+export declare class MagicTranslate {
+  private readonly config;
+  private readonly languageOverride;
+  readonly apiKey: string;
+  readonly sourceLanguage: "af" | "sq" | "am" | "ar" | "hy" | "az" | "bn" | "bs" | "bg" | "ca" | "zh" | "zh-TW" | "hr" | "cs" | "da" | "fa-AF" | "nl" | "en" | "et" | "fa" | "tl" | "fi" | "fr" | "fr-CA" | "ka" | "de" | "el" | "gu" | "ht" | "ha" | "he" | "hi" | "hu" | "is" | "id" | "ga" | "it" | "ja" | "kn" | "kk" | "ko" | "lv" | "lt" | "mk" | "ms" | "ml" | "mt" | "mr" | "mn" | "no" | "ps" | "pl" | "pt" | "pt-PT" | "pa" | "ro" | "ru" | "sr" | "si" | "sk" | "sl" | "so" | "es" | "es-MX" | "sw" | "sv" | "ta" | "te" | "th" | "tr" | "uk" | "ur" | "uz" | "vi" | "cy" | undefined;
+  /**
+   * The language content is currently translated to.
+   */
+  readonly language: import("@angular/core").Signal<"af" | "sq" | "am" | "ar" | "hy" | "az" | "bn" | "bs" | "bg" | "ca" | "zh" | "zh-TW" | "hr" | "cs" | "da" | "fa-AF" | "nl" | "en" | "et" | "fa" | "tl" | "fi" | "fr" | "fr-CA" | "ka" | "de" | "el" | "gu" | "ht" | "ha" | "he" | "hi" | "hu" | "is" | "id" | "ga" | "it" | "ja" | "kn" | "kk" | "ko" | "lv" | "lt" | "mk" | "ms" | "ml" | "mt" | "mr" | "mn" | "no" | "ps" | "pl" | "pt" | "pt-PT" | "pa" | "ro" | "ru" | "sr" | "si" | "sk" | "sl" | "so" | "es" | "es-MX" | "sw" | "sv" | "ta" | "te" | "th" | "tr" | "uk" | "ur" | "uz" | "vi" | "cy">;
+  readonly dataLoader: import("@angular/core").Signal<DataLoader<DataLoaderLoadParams, string, string>>;
+  constructor();
+  setLanguage(language: Languages): void;
+  translate(text: string, params?: TranslateParams): Promise<string>;
+  /** @ignore */
+  cacheKey(text: string, params?: TranslateParams): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<MagicTranslate, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+export declare class Translate {
+  readonly lang: import("@angular/core").InputSignal<"af" | "sq" | "am" | "ar" | "hy" | "az" | "bn" | "bs" | "bg" | "ca" | "zh" | "zh-TW" | "hr" | "cs" | "da" | "fa-AF" | "nl" | "en" | "et" | "fa" | "tl" | "fi" | "fr" | "fr-CA" | "ka" | "de" | "el" | "gu" | "ht" | "ha" | "he" | "hi" | "hu" | "is" | "id" | "ga" | "it" | "ja" | "kn" | "kk" | "ko" | "lv" | "lt" | "mk" | "ms" | "ml" | "mt" | "mr" | "mn" | "no" | "ps" | "pl" | "pt" | "pt-PT" | "pa" | "ro" | "ru" | "sr" | "si" | "sk" | "sl" | "so" | "es" | "es-MX" | "sw" | "sv" | "ta" | "te" | "th" | "tr" | "uk" | "ur" | "uz" | "vi" | "cy" | undefined>;
+  readonly formality: import("@angular/core").InputSignal<"formal" | "informal" | undefined>;
+  private readonly magicTranslate;
+  private readonly sanitizer;
+  private readonly sourceRef;
+  private readonly targetRef;
+  private readonly source;
+  protected readonly translated: import("@angular/core").WritableSignal<boolean>;
+  private lastRequestId;
+  constructor();
+  private render;
+  static ɵfac: i0.ɵɵFactoryDeclaration<Translate, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<Translate, "t, mt-translate", never, {
+    "lang": {
+      "alias": "lang";
+      "required": false;
+      "isSignal": true;
+    };
+    "formality": {
+      "alias": "formality";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+export declare const T: typeof Translate;
+/**
+ * Translates a plain string, e.g. for attributes:
+ * `<input [placeholder]="'Search' | t" />`. Returns the original text until
+ * the translation has loaded.
+ */
+export declare class TranslatePipe implements PipeTransform {
+  private readonly magicTranslate;
+  private readonly changeDetectorRef;
+  private readonly isServer;
+  private key?;
+  private translation?;
+  transform(text: string, params?: TranslateParams): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TranslatePipe, never>;
+  static ɵpipe: i0.ɵɵPipeDeclaration<TranslatePipe, "t", true>;
+}
+//# sourceMappingURL=magic-translate-angular.d.ts.map

package/types/magic-translate-angular.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"magic-translate-angular.d.ts","names":[],"sources":["../../src/lib/magic-translate-config.ts","../../src/lib/provide-magic-translate.ts","../../src/lib/magic-translate.service.ts","../../src/lib/translate.component.ts","../../src/lib/translate.pipe.ts"],"mappings":";;;;qBAGa,wBAAsB,eAAA;;;;;wBCMnB,sBACd,QAAQ,uBACP;;;;;YCIS,eAAe;YAEf,kBAAkB,KAAK;qBAGtB;mBACM;mBACA;WAER;WACA;;;;WAKA,kCAAQ;WAIR,oCAAU,OAAA,WAAA;;EAwBnB,YAAY,UAAU;EAItB,UAAU,cAAc,SAAQ,kBAAuB;;EAKvD,SAAS,cAAc,SAAQ;SA/CpB,MAAA,GAAA,qBAAA;;;qBC8DA;WACF,8BAAI;WACJ,mCAAS;mBAED;mBACA;mBACA;mBAEA;mBAGA;qBACE,oCAAU;UACrB;;UA6CA;SA1DG,MAAA,GAAA,qBAAA;SAAA,MAAA,GAAA,uBAAA;IAAS;MAAA;MAAA;MAAA;;IAAA;MAAA;MAAA;MAAA;;;;qBA4ET,UAAC;;;;;;qBC9ID,yBAAyB;mBACnB;mBACA;mBACA;UAET;UACA;EAER,UAAU,cAAc,SAAQ;SARrB,MAAA,GAAA,qBAAA;SAAA,OAAA,GAAA,kBAAA"}