@translifycc/angular 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +141 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
# @translifycc/angular
|
|
2
|
+
|
|
3
|
+
Angular language selector component for [Translify](https://translify.cc) — add AI-powered translations to any Angular app in minutes. Compatible with Angular 15–19.
|
|
4
|
+
|
|
5
|
+
## Get your API key
|
|
6
|
+
|
|
7
|
+
Sign up free at **[translify.cc/signup](https://translify.cc/signup)** — no credit card required.
|
|
8
|
+
|
|
9
|
+
**Free tier:** 100,000 unique characters/month. Cached translations are always free and never count against your limit.
|
|
10
|
+
|
|
11
|
+
| Plan | Price | Unique chars/month |
|
|
12
|
+
|---------|--------|--------------------|
|
|
13
|
+
| Free | $0 | 100,000 |
|
|
14
|
+
| Starter | $25/mo | 5,000,000 |
|
|
15
|
+
| Growth | $49/mo | 25,000,000 |
|
|
16
|
+
| Pro | $99/mo | 100,000,000 |
|
|
17
|
+
|
|
18
|
+
> **How billing works:** You're only charged for characters that hit OpenAI (first-time translations). Repeat translations served from cache are always free.
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Install
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @translifycc/angular
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Usage
|
|
29
|
+
|
|
30
|
+
### Standalone component (Angular 15+)
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
// app.component.ts
|
|
34
|
+
import { Component } from '@angular/core';
|
|
35
|
+
import { TranslifySelectorComponent } from '@translifycc/angular';
|
|
36
|
+
|
|
37
|
+
@Component({
|
|
38
|
+
standalone: true,
|
|
39
|
+
imports: [TranslifySelectorComponent],
|
|
40
|
+
template: `
|
|
41
|
+
<nav>
|
|
42
|
+
<translify-selector apiKey="YOUR_API_KEY" />
|
|
43
|
+
</nav>
|
|
44
|
+
`
|
|
45
|
+
})
|
|
46
|
+
export class AppComponent {}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### NgModule-based app
|
|
50
|
+
|
|
51
|
+
```ts
|
|
52
|
+
// app.module.ts
|
|
53
|
+
import { NgModule } from '@angular/core';
|
|
54
|
+
import { TranslifyModule } from '@translifycc/angular';
|
|
55
|
+
|
|
56
|
+
@NgModule({
|
|
57
|
+
imports: [TranslifyModule],
|
|
58
|
+
})
|
|
59
|
+
export class AppModule {}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<!-- any template -->
|
|
64
|
+
<translify-selector apiKey="YOUR_API_KEY" domain="myapp.com" />
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Inputs
|
|
70
|
+
|
|
71
|
+
| Input | Type | Default | Description |
|
|
72
|
+
|--------------|--------|----------------------------|--------------------------------------|
|
|
73
|
+
| `apiKey` | string | **required** | Your Translify API key |
|
|
74
|
+
| `apiBase` | string | `https://translify.cc` | API base URL |
|
|
75
|
+
| `domain` | string | `window.location.hostname` | Your site domain |
|
|
76
|
+
| `classNames` | object | `{}` | Override class names for any element |
|
|
77
|
+
| `labels` | object | `{}` | Override UI text |
|
|
78
|
+
|
|
79
|
+
### `classNames` keys
|
|
80
|
+
|
|
81
|
+
`trigger` · `dropdown` · `dropdownHeader` · `option` · `optionActive` · `optionNative` · `optionName` · `optionRtl` · `restore` · `overlay` · `overlaySpinner` · `overlayTitle` · `overlaySub` · `toast`
|
|
82
|
+
|
|
83
|
+
### `labels` keys
|
|
84
|
+
|
|
85
|
+
`trigger` · `dropdownHeader` · `restore` · `overlayTitle` · `overlaySub`
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
## Customisation
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<translify-selector
|
|
93
|
+
apiKey="YOUR_API_KEY"
|
|
94
|
+
[classNames]="{
|
|
95
|
+
trigger: 'btn btn-outline',
|
|
96
|
+
dropdown: 'my-dropdown',
|
|
97
|
+
option: 'my-option',
|
|
98
|
+
optionActive: 'my-option--selected',
|
|
99
|
+
restore: 'my-restore'
|
|
100
|
+
}"
|
|
101
|
+
[labels]="{
|
|
102
|
+
trigger: 'Language',
|
|
103
|
+
dropdownHeader: 'Choose language',
|
|
104
|
+
restore: 'Back to English',
|
|
105
|
+
overlayTitle: 'Translating…',
|
|
106
|
+
overlaySub: 'First time only — instant on next visit.'
|
|
107
|
+
}"
|
|
108
|
+
/>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## Angular version compatibility
|
|
114
|
+
|
|
115
|
+
| Version | Support |
|
|
116
|
+
|------------|-----------------------|
|
|
117
|
+
| Angular 15 | ✅ Standalone + NgModule |
|
|
118
|
+
| Angular 16 | ✅ Standalone + NgModule |
|
|
119
|
+
| Angular 17 | ✅ Standalone + NgModule |
|
|
120
|
+
| Angular 18 | ✅ Standalone + NgModule |
|
|
121
|
+
| Angular 19 | ✅ Standalone + NgModule |
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## Supported languages
|
|
126
|
+
|
|
127
|
+
Arabic · Chinese · Dutch · French · German · Hebrew · Hindi · Italian · Japanese · Korean · Persian · Polish · Portuguese · Russian · Spanish · Swedish · Turkish · Urdu
|
|
128
|
+
|
|
129
|
+
RTL languages (Arabic, Hebrew, Persian, Urdu) automatically set `dir="rtl"` on the `<html>` element — no extra config needed.
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Links
|
|
134
|
+
|
|
135
|
+
- [Sign up free](https://translify.cc/signup)
|
|
136
|
+
- [Dashboard](https://translify.cc/dashboard)
|
|
137
|
+
- [Full docs](https://translify.cc/docs)
|
|
138
|
+
|
|
139
|
+
## License
|
|
140
|
+
|
|
141
|
+
MIT
|
package/package.json
CHANGED