@translifycc/angular 0.1.1 → 0.1.3

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { TranslifySelectorComponent } from './translify-selector.component';
+export { TranslifyModule } from './translify.module';
+export type { Language } from './translate';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { TranslifySelectorComponent } from './translify-selector.component';
+export { TranslifyModule } from './translify.module';

package/dist/translate.d.ts

@@ -0,0 +1,15 @@
+export interface Language {
+    code: string;
+    name: string;
+    nativeName: string;
+    isRTL: boolean;
+}
+export declare function getSavedLang(): string | null;
+export declare function saveLang(lang: string): void;
+export declare function clearSavedLang(): void;
+export declare function loadTranslationCache(lang: string): Map<string, string>;
+export declare function saveTranslationCache(lang: string, cache: Map<string, string>): void;
+export declare function getTextNodes(root: Node): Text[];
+export declare function collectNewTextNodes(node: Node, originalTexts: Map<Node, string>): Text[];
+export declare function fetchLanguages(apiBase: string): Promise<Language[]>;
+export declare function callTranslateApi(apiBase: string, apiKey: string, domain: string, texts: string[], targetLang: string): Promise<string[]>;

package/dist/translate.js

@@ -0,0 +1,100 @@
+const SKIP_TAGS = new Set([
+    'SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME',
+    'CODE', 'PRE', 'SVG', 'MATH', 'INPUT', 'TEXTAREA',
+]);
+export function getSavedLang() {
+    return localStorage.getItem('translify_lang');
+}
+export function saveLang(lang) {
+    localStorage.setItem('translify_lang', lang);
+}
+export function clearSavedLang() {
+    localStorage.removeItem('translify_lang');
+}
+export function loadTranslationCache(lang) {
+    try {
+        const stored = localStorage.getItem(`translify_cache_${lang}`);
+        return stored ? new Map(Object.entries(JSON.parse(stored))) : new Map();
+    }
+    catch (_a) {
+        return new Map();
+    }
+}
+export function saveTranslationCache(lang, cache) {
+    try {
+        const obj = {};
+        cache.forEach((v, k) => { obj[k] = v; });
+        localStorage.setItem(`translify_cache_${lang}`, JSON.stringify(obj));
+    }
+    catch (_a) { }
+}
+export function getTextNodes(root) {
+    const nodes = [];
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+        acceptNode(node) {
+            var _a, _b, _c, _d, _e, _f;
+            const text = node;
+            if (!((_a = text.textContent) === null || _a === void 0 ? void 0 : _a.trim()))
+                return NodeFilter.FILTER_REJECT;
+            if (SKIP_TAGS.has(((_c = (_b = text.parentElement) === null || _b === void 0 ? void 0 : _b.tagName) !== null && _c !== void 0 ? _c : '')))
+                return NodeFilter.FILTER_REJECT;
+            if (((_e = (_d = text.textContent) === null || _d === void 0 ? void 0 : _d.trim().length) !== null && _e !== void 0 ? _e : 0) > 5000)
+                return NodeFilter.FILTER_REJECT;
+            if ((_f = text.parentElement) === null || _f === void 0 ? void 0 : _f.closest('[translate="no"]'))
+                return NodeFilter.FILTER_REJECT;
+            return NodeFilter.FILTER_ACCEPT;
+        },
+    });
+    let n;
+    while ((n = walker.nextNode()))
+        nodes.push(n);
+    return nodes;
+}
+export function collectNewTextNodes(node, originalTexts) {
+    var _a, _b, _c, _d, _e;
+    const nodes = [];
+    if (node.nodeType === Node.TEXT_NODE) {
+        const t = node;
+        if (!originalTexts.has(t) && ((_a = t.textContent) === null || _a === void 0 ? void 0 : _a.trim()))
+            nodes.push(t);
+    }
+    else if (node.nodeType === Node.ELEMENT_NODE) {
+        const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
+        let n;
+        while ((n = walker.nextNode())) {
+            const t = n;
+            if (!originalTexts.has(t) &&
+                ((_b = t.textContent) === null || _b === void 0 ? void 0 : _b.trim()) &&
+                !SKIP_TAGS.has((_d = (_c = t.parentElement) === null || _c === void 0 ? void 0 : _c.tagName) !== null && _d !== void 0 ? _d : '') &&
+                !((_e = t.parentElement) === null || _e === void 0 ? void 0 : _e.closest('[translate="no"]'))) {
+                nodes.push(t);
+            }
+        }
+    }
+    return nodes;
+}
+export async function fetchLanguages(apiBase) {
+    const res = await fetch(`${apiBase}/translate/languages`);
+    const json = await res.json();
+    return json.data.languages;
+}
+export async function callTranslateApi(apiBase, apiKey, domain, texts, targetLang) {
+    const results = [];
+    for (let i = 0; i < texts.length; i += 100) {
+        const chunk = texts.slice(i, i + 100);
+        const res = await fetch(`${apiBase}/translate`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': apiKey,
+                'x-domain': domain,
+            },
+            body: JSON.stringify({ texts: chunk, targetLanguage: targetLang, sourceLanguage: 'auto' }),
+        });
+        const json = await res.json();
+        if (!json.success)
+            throw new Error(json.message || 'Translation failed');
+        results.push(...json.data.translations);
+    }
+    return results;
+}

package/dist/translify-selector.component.d.ts

@@ -0,0 +1,64 @@
+import { OnInit, OnDestroy, NgZone, ChangeDetectorRef } from '@angular/core';
+import { Language } from './translate';
+export declare class TranslifySelectorComponent implements OnInit, OnDestroy {
+    private ngZone;
+    private cdr;
+    apiKey: string;
+    apiBase: string;
+    domain: string;
+    classNames: {
+        trigger?: string;
+        dropdown?: string;
+        dropdownHeader?: string;
+        option?: string;
+        optionActive?: string;
+        optionNative?: string;
+        optionName?: string;
+        optionRtl?: string;
+        restore?: string;
+        overlay?: string;
+        overlaySpinner?: string;
+        overlayTitle?: string;
+        overlaySub?: string;
+        toast?: string;
+    };
+    labels: {
+        trigger?: string;
+        dropdownHeader?: string;
+        restore?: string;
+        overlayTitle?: string;
+        overlaySub?: string;
+    };
+    languages: Language[];
+    activeLang: string | null;
+    isOpen: boolean;
+    loadingState: 'idle' | 'overlay' | 'toast';
+    overlayVisible: boolean;
+    toastVisible: boolean;
+    private originalTexts;
+    private translationCache;
+    private currentCacheLang;
+    private isTranslating;
+    private pendingNodes;
+    private observer;
+    private debounceTimer;
+    private overlayTimer;
+    constructor(ngZone: NgZone, cdr: ChangeDetectorRef);
+    get activeLangObj(): Language | undefined;
+    ngOnInit(): Promise<void>;
+    ngOnDestroy(): void;
+    private ensureCacheLoaded;
+    private applyCache;
+    private showOverlay;
+    private hideOverlay;
+    private showToast;
+    private hideToast;
+    private flushNodes;
+    private startObserver;
+    private stopObserver;
+    private patchHistory;
+    private onRouteChange;
+    translate(targetLang: string): Promise<void>;
+    restore(): void;
+    handleSelect(langCode: string): void;
+}

package/dist/translify-selector.component.js

@@ -0,0 +1,461 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, Input, NgZone, ChangeDetectionStrategy, ChangeDetectorRef, } from '@angular/core';
+import { NgIf, NgFor, NgClass } from '@angular/common';
+import { getSavedLang, saveLang, clearSavedLang, loadTranslationCache, saveTranslationCache, getTextNodes, collectNewTextNodes, fetchLanguages, callTranslateApi, } from './translate';
+let TranslifySelectorComponent = class TranslifySelectorComponent {
+    constructor(ngZone, cdr) {
+        this.ngZone = ngZone;
+        this.cdr = cdr;
+        this.apiBase = 'https://translify.cc';
+        this.domain = window.location.hostname || 'localhost';
+        this.classNames = {};
+        this.labels = {};
+        this.languages = [];
+        this.activeLang = getSavedLang();
+        this.isOpen = false;
+        this.loadingState = 'idle';
+        this.overlayVisible = false;
+        this.toastVisible = false;
+        // All mutable translation state — no change detection needed
+        this.originalTexts = new Map();
+        this.translationCache = new Map();
+        this.currentCacheLang = null;
+        this.isTranslating = false;
+        this.pendingNodes = [];
+        this.observer = null;
+        this.debounceTimer = null;
+        this.overlayTimer = null;
+    }
+    get activeLangObj() {
+        return this.languages.find((l) => l.code === this.activeLang);
+    }
+    async ngOnInit() {
+        if (!this.apiKey) {
+            console.error('[Translify] apiKey is required.');
+            return;
+        }
+        try {
+            this.languages = await fetchLanguages(this.apiBase);
+            this.cdr.markForCheck();
+        }
+        catch (e) {
+            console.error('[Translify] Failed to fetch languages', e);
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.startObserver();
+            this.patchHistory();
+        });
+        if (this.activeLang && this.languages.length > 0) {
+            await this.translate(this.activeLang);
+        }
+    }
+    ngOnDestroy() {
+        this.stopObserver();
+        clearTimeout(this.overlayTimer);
+    }
+    // ── Cache helpers ───────────────────────────────────────────────────────────
+    ensureCacheLoaded(lang) {
+        if (this.currentCacheLang === lang)
+            return;
+        this.translationCache = loadTranslationCache(lang);
+        this.currentCacheLang = lang;
+    }
+    applyCache(nodes) {
+        const uncached = [];
+        nodes.forEach((node) => {
+            var _a, _b;
+            const src = (_b = (_a = this.originalTexts.get(node)) !== null && _a !== void 0 ? _a : node.textContent) !== null && _b !== void 0 ? _b : '';
+            const hit = this.translationCache.get(src);
+            if (hit !== undefined) {
+                node.textContent = hit;
+            }
+            else {
+                uncached.push(node);
+            }
+        });
+        return uncached;
+    }
+    // ── Overlay / toast ─────────────────────────────────────────────────────────
+    showOverlay() {
+        clearTimeout(this.overlayTimer);
+        this.ngZone.run(() => {
+            this.overlayVisible = false;
+            this.loadingState = 'overlay';
+            requestAnimationFrame(() => { this.overlayVisible = true; this.cdr.markForCheck(); });
+            this.cdr.markForCheck();
+        });
+    }
+    hideOverlay() {
+        this.overlayTimer = setTimeout(() => {
+            this.ngZone.run(() => { this.overlayVisible = false; this.cdr.markForCheck(); });
+            this.overlayTimer = setTimeout(() => {
+                this.ngZone.run(() => { this.loadingState = 'idle'; this.cdr.markForCheck(); });
+            }, 400);
+        }, 600);
+    }
+    showToast() {
+        clearTimeout(this.overlayTimer);
+        this.ngZone.run(() => {
+            this.loadingState = 'toast';
+            requestAnimationFrame(() => { this.toastVisible = true; this.cdr.markForCheck(); });
+            this.cdr.markForCheck();
+        });
+    }
+    hideToast() {
+        this.ngZone.run(() => {
+            this.toastVisible = false;
+            this.overlayTimer = setTimeout(() => {
+                this.ngZone.run(() => { this.loadingState = 'idle'; this.cdr.markForCheck(); });
+            }, 350);
+            this.cdr.markForCheck();
+        });
+    }
+    // ── flushNodes ──────────────────────────────────────────────────────────────
+    async flushNodes(nodes, targetLang) {
+        if (!nodes.length)
+            return;
+        if (this.isTranslating) {
+            this.pendingNodes.push(...nodes);
+            return;
+        }
+        this.isTranslating = true;
+        try {
+            nodes.forEach((n) => {
+                var _a;
+                if (!this.originalTexts.has(n))
+                    this.originalTexts.set(n, (_a = n.textContent) !== null && _a !== void 0 ? _a : '');
+            });
+            const uncached = this.applyCache(nodes);
+            if (uncached.length > 0) {
+                const texts = uncached.map((n) => this.originalTexts.get(n));
+                const translations = await callTranslateApi(this.apiBase, this.apiKey, this.domain, texts, targetLang);
+                uncached.forEach((node, i) => {
+                    if (translations[i] !== undefined) {
+                        this.translationCache.set(this.originalTexts.get(node), translations[i]);
+                        node.textContent = translations[i];
+                    }
+                });
+                saveTranslationCache(targetLang, this.translationCache);
+            }
+        }
+        catch (e) {
+            console.error('[Translify] Dynamic translation error', e);
+        }
+        finally {
+            this.isTranslating = false;
+            if (this.pendingNodes.length > 0) {
+                const next = this.pendingNodes.splice(0);
+                this.flushNodes(next, targetLang);
+            }
+        }
+    }
+    // ── MutationObserver ────────────────────────────────────────────────────────
+    startObserver() {
+        if (this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (!this.activeLang)
+                return;
+            const targetLang = this.activeLang;
+            const newNodes = [];
+            mutations.forEach((mutation) => {
+                if (mutation.type !== 'childList')
+                    return;
+                mutation.addedNodes.forEach((node) => {
+                    newNodes.push(...collectNewTextNodes(node, this.originalTexts));
+                });
+            });
+            if (!newNodes.length)
+                return;
+            const uncached = [];
+            newNodes.forEach((node) => {
+                var _a;
+                const src = (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
+                const hit = this.translationCache.get(src);
+                if (hit !== undefined) {
+                    this.originalTexts.set(node, src);
+                    node.textContent = hit;
+                }
+                else {
+                    uncached.push(node);
+                }
+            });
+            if (!uncached.length)
+                return;
+            this.pendingNodes.push(...uncached);
+            if (!this.isTranslating) {
+                clearTimeout(this.debounceTimer);
+                this.debounceTimer = setTimeout(() => {
+                    const toFlush = this.pendingNodes.splice(0);
+                    this.flushNodes(toFlush, targetLang);
+                }, 50);
+            }
+        });
+        this.observer.observe(document.body, { childList: true, subtree: true });
+    }
+    stopObserver() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+        clearTimeout(this.debounceTimer);
+    }
+    // ── SPA route change detection ──────────────────────────────────────────────
+    patchHistory() {
+        const orig = history.pushState.bind(history);
+        const self = this;
+        history.pushState = function (state, unused, url) {
+            orig(state, unused, url);
+            self.onRouteChange();
+        };
+        window.addEventListener('popstate', () => this.onRouteChange());
+    }
+    onRouteChange() {
+        if (!this.activeLang)
+            return;
+        const targetLang = this.activeLang;
+        setTimeout(() => {
+            const nodes = getTextNodes(document.body).filter((n) => !this.originalTexts.has(n));
+            if (!nodes.length)
+                return;
+            this.pendingNodes.push(...nodes);
+            if (!this.isTranslating) {
+                const toFlush = this.pendingNodes.splice(0);
+                this.flushNodes(toFlush, targetLang);
+            }
+        }, 100);
+    }
+    // ── Main translate ──────────────────────────────────────────────────────────
+    async translate(targetLang) {
+        if (this.isTranslating)
+            return;
+        this.isTranslating = true;
+        try {
+            this.ensureCacheLoaded(targetLang);
+            const isFirstEver = this.translationCache.size === 0;
+            if (this.originalTexts.size > 0) {
+                this.originalTexts.forEach((text, node) => { node.textContent = text; });
+            }
+            const nodes = getTextNodes(document.body);
+            if (!nodes.length)
+                return;
+            nodes.forEach((node) => {
+                var _a;
+                if (!this.originalTexts.has(node))
+                    this.originalTexts.set(node, (_a = node.textContent) !== null && _a !== void 0 ? _a : '');
+            });
+            const uncached = this.applyCache(nodes);
+            const lang = this.languages.find((l) => l.code === targetLang);
+            document.documentElement.setAttribute('dir', (lang === null || lang === void 0 ? void 0 : lang.isRTL) ? 'rtl' : 'ltr');
+            saveLang(targetLang);
+            this.ngZone.run(() => { this.activeLang = targetLang; this.cdr.markForCheck(); });
+            if (uncached.length > 0) {
+                if (isFirstEver)
+                    this.showOverlay();
+                else
+                    this.showToast();
+                const texts = uncached.map((n) => this.originalTexts.get(n));
+                const translations = await callTranslateApi(this.apiBase, this.apiKey, this.domain, texts, targetLang);
+                uncached.forEach((node, i) => {
+                    if (translations[i] !== undefined) {
+                        this.translationCache.set(this.originalTexts.get(node), translations[i]);
+                        node.textContent = translations[i];
+                    }
+                });
+                saveTranslationCache(targetLang, this.translationCache);
+                if (isFirstEver)
+                    this.hideOverlay();
+                else
+                    this.hideToast();
+            }
+        }
+        catch (e) {
+            console.error('[Translify] Translation error', e);
+            this.hideOverlay();
+            this.hideToast();
+        }
+        finally {
+            this.isTranslating = false;
+            if (this.pendingNodes.length > 0) {
+                const next = this.pendingNodes.splice(0);
+                this.flushNodes(next, this.activeLang);
+            }
+        }
+    }
+    // ── Restore ─────────────────────────────────────────────────────────────────
+    restore() {
+        this.stopObserver();
+        this.originalTexts.forEach((text, node) => { node.textContent = text; });
+        this.originalTexts.clear();
+        document.documentElement.setAttribute('dir', 'ltr');
+        clearSavedLang();
+        this.activeLang = null;
+        this.isOpen = false;
+        this.cdr.markForCheck();
+        this.ngZone.runOutsideAngular(() => this.startObserver());
+    }
+    // ── UI handlers ─────────────────────────────────────────────────────────────
+    handleSelect(langCode) {
+        this.isOpen = false;
+        this.translate(langCode);
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], TranslifySelectorComponent.prototype, "apiKey", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], TranslifySelectorComponent.prototype, "apiBase", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], TranslifySelectorComponent.prototype, "domain", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], TranslifySelectorComponent.prototype, "classNames", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], TranslifySelectorComponent.prototype, "labels", void 0);
+TranslifySelectorComponent = __decorate([
+    Component({
+        selector: 'translify-selector',
+        standalone: true,
+        imports: [NgIf, NgFor, NgClass],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        styles: [`
+    .translify-selector { position: relative; display: inline-block; }
+    .translify-trigger {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 8px 14px; border-radius: 8px; border: 1px solid #e5e7eb;
+      background: #fff; cursor: pointer; font-size: 14px; color: #374151;
+      transition: border-color 0.15s;
+    }
+    .translify-trigger:hover { border-color: #9ca3af; }
+    .translify-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+    .translify-trigger-chevron { font-size: 10px; transition: transform 0.2s; }
+    .translify-trigger-chevron.open { transform: rotate(180deg); }
+    .translify-dropdown {
+      position: absolute; top: calc(100% + 6px); left: 0; z-index: 9999;
+      background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
+      min-width: 220px; max-height: 320px; overflow-y: auto;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.12); display: flex; flex-direction: column;
+    }
+    .translify-dropdown-header {
+      padding: 10px 14px; font-size: 11px; font-weight: 700;
+      color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em;
+      border-bottom: 1px solid #f3f4f6; flex-shrink: 0;
+    }
+    .translify-option {
+      display: flex; align-items: center; gap: 8px;
+      padding: 10px 14px; cursor: pointer; font-size: 14px;
+      color: #111827; border: none; background: none; width: 100%; text-align: left;
+      transition: background 0.1s;
+    }
+    .translify-option:hover { background: #f9fafb; }
+    .translify-option.active { background: #eff6ff; color: #2563eb; font-weight: 600; }
+    .translify-option-name { font-size: 12px; color: #9ca3af; margin-left: auto; }
+    .translify-option-rtl {
+      font-size: 10px; color: #9ca3af;
+      background: #f3f4f6; padding: 2px 5px; border-radius: 4px;
+    }
+    .translify-restore {
+      display: flex; align-items: center; gap: 6px;
+      padding: 10px 14px; cursor: pointer; font-size: 13px; color: #ef4444;
+      border: none; background: none; width: 100%; text-align: left;
+      border-top: 1px solid #f3f4f6; flex-shrink: 0; transition: background 0.1s;
+    }
+    .translify-restore:hover { background: #fff5f5; }
+    .translify-toast {
+      position: fixed; bottom: 84px; right: 24px; z-index: 2147483647;
+      background: #1e293b; color: #fff; padding: 10px 16px;
+      border-radius: 10px; font-size: 13px; pointer-events: none;
+      transition: opacity 0.3s ease, transform 0.3s ease;
+    }
+    .translify-overlay {
+      position: fixed; inset: 0; z-index: 2147483646;
+      background: rgba(255,255,255,0.85); backdrop-filter: blur(3px);
+      display: flex; flex-direction: column;
+      align-items: center; justify-content: center; gap: 14px;
+      transition: opacity 0.35s ease;
+    }
+    .translify-overlay-spinner {
+      width: 40px; height: 40px; border-radius: 50%;
+      border: 3px solid #e5e7eb; border-top-color: #2563eb;
+      animation: tlfy-spin 0.7s linear infinite;
+    }
+    @keyframes tlfy-spin { to { transform: rotate(360deg); } }
+    .translify-overlay-title { font-size: 15px; font-weight: 600; color: #111827; text-align: center; }
+    .translify-overlay-sub { font-size: 12px; color: #6b7280; margin-top: 4px; text-align: center; }
+  `],
+        template: `
+    <div class="translify-selector" (clickOutside)="isOpen = false">
+      <button
+        class="translify-trigger"
+        [class]="classNames.trigger || ''"
+        (click)="isOpen = !isOpen"
+        [disabled]="loadingState !== 'idle' || languages.length === 0"
+        [attr.aria-expanded]="isOpen"
+      >
+        <span>🌐</span>
+        <span>{{ activeLangObj ? activeLangObj.nativeName : (labels.trigger || 'Translate') }}</span>
+        <span class="translify-trigger-chevron" [class.open]="isOpen">▾</span>
+      </button>
+
+      <div *ngIf="isOpen" class="translify-dropdown" [class]="classNames.dropdown || ''">
+        <div class="translify-dropdown-header">{{ labels.dropdownHeader || 'Select Language' }}</div>
+
+        <button
+          *ngFor="let lang of languages"
+          class="translify-option"
+          [class.active]="activeLang === lang.code"
+          (click)="handleSelect(lang.code)"
+        >
+          <span>{{ lang.nativeName }}</span>
+          <span class="translify-option-name">{{ lang.name }}</span>
+          <span *ngIf="lang.isRTL" class="translify-option-rtl">RTL</span>
+        </button>
+
+        <button *ngIf="activeLang" class="translify-restore" (click)="restore()">
+          ↩ {{ labels.restore || 'Show original' }}
+        </button>
+      </div>
+    </div>
+
+    <div
+      *ngIf="loadingState === 'overlay'"
+      class="translify-overlay"
+      [style.opacity]="overlayVisible ? '1' : '0'"
+    >
+      <div class="translify-overlay-spinner"></div>
+      <div>
+        <div class="translify-overlay-title">{{ labels.overlayTitle || 'Translating page…' }}</div>
+        <div class="translify-overlay-sub">{{ labels.overlaySub || 'First time only — instant on next visit.' }}</div>
+      </div>
+    </div>
+
+    <div
+      *ngIf="loadingState === 'toast'"
+      class="translify-toast"
+      [style.opacity]="toastVisible ? '1' : '0'"
+      [style.transform]="toastVisible ? 'translateY(0)' : 'translateY(8px)'"
+    >
+      ⏳ Translating…
+    </div>
+  `,
+    }),
+    __metadata("design:paramtypes", [NgZone, ChangeDetectorRef])
+], TranslifySelectorComponent);
+export { TranslifySelectorComponent };

package/dist/translify.module.d.ts

@@ -0,0 +1,2 @@
+export declare class TranslifyModule {
+}

package/dist/translify.module.js

@@ -0,0 +1,19 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { NgModule } from '@angular/core';
+import { TranslifySelectorComponent } from './translify-selector.component';
+// For NgModule-based apps (Angular 15+)
+// Standalone component apps can import TranslifySelectorComponent directly
+let TranslifyModule = class TranslifyModule {
+};
+TranslifyModule = __decorate([
+    NgModule({
+        imports: [TranslifySelectorComponent],
+        exports: [TranslifySelectorComponent],
+    })
+], TranslifyModule);
+export { TranslifyModule };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@translifycc/angular",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Angular language selector component for Translify",
-  "main": "src/index.js",
-  "types": "src/index.d.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0"
@@ -14,5 +14,10 @@
     "translation",
     "angular"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "@angular/common": "^15.2.10",
+    "@angular/core": "^15.2.10",
+    "typescript": "^5.9.3"
+  }
 }

package/src/translify-selector.component.ts

@@ -151,8 +151,17 @@ export class TranslifySelectorComponent implements OnInit, OnDestroy {
   @Input() apiKey!: string;
   @Input() apiBase = 'https://translify.cc';
   @Input() domain = window.location.hostname || 'localhost';
-  @Input() classNames: Record<string, string> = {};
-  @Input() labels: Record<string, string> = {};
+  @Input() classNames: {
+    trigger?: string; dropdown?: string; dropdownHeader?: string;
+    option?: string; optionActive?: string; optionNative?: string;
+    optionName?: string; optionRtl?: string; restore?: string;
+    overlay?: string; overlaySpinner?: string; overlayTitle?: string;
+    overlaySub?: string; toast?: string;
+  } = {};
+  @Input() labels: {
+    trigger?: string; dropdownHeader?: string; restore?: string;
+    overlayTitle?: string; overlaySub?: string;
+  } = {};
 
   languages: Language[] = [];
   activeLang: string | null = getSavedLang();
@@ -352,9 +361,10 @@ export class TranslifySelectorComponent implements OnInit, OnDestroy {
 
   private patchHistory() {
     const orig = history.pushState.bind(history);
-    history.pushState = (...args: any[]) => {
-      orig(...args);
-      this.onRouteChange();
+    const self = this;
+    history.pushState = function(state: unknown, unused: string, url?: string | URL | null) {
+      orig(state, unused, url);
+      self.onRouteChange();
     };
     window.addEventListener('popstate', () => this.onRouteChange());
   }

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "declaration": true,
+    "declarationMap": false,
+    "sourceMap": false,
+    "outDir": "./dist",
+    "strict": false,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "skipLibCheck": true,
+    "lib": ["ES2017", "DOM"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules"]
+}