@kopynator/angular 1.0.0
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 +47 -0
- package/dist/public-api.d.mts +34 -0
- package/dist/public-api.d.ts +34 -0
- package/dist/public-api.js +126 -0
- package/dist/public-api.mjs +99 -0
- package/package.json +38 -0
package/README.md
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
# @kopynator/angular
|
|
2
|
+
|
|
3
|
+
Angular wrapper for the Kopynator i18n platform. Works with Angular 17+ (Signals support).
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
- **Signal-based**: Reacts to locale changes and loading states using Angular Signals.
|
|
7
|
+
- **Pipe & Directive**: Use `{{ 'key' | kopy }}` or `<span [kopy]="'key'"></span>`.
|
|
8
|
+
- **Impure Pipe**: Automatically updates when translations are loaded or changed.
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
```bash
|
|
12
|
+
npm install @kopynator/core @kopynator/angular
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
### 1. Configuration
|
|
18
|
+
In your `app.config.ts`:
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
import { KOPY_CONFIG } from '@kopynator/angular';
|
|
22
|
+
|
|
23
|
+
export const appConfig: ApplicationConfig = {
|
|
24
|
+
providers: [
|
|
25
|
+
{
|
|
26
|
+
provide: KOPY_CONFIG,
|
|
27
|
+
useValue: {
|
|
28
|
+
apiKey: 'YOUR_TOKEN',
|
|
29
|
+
projectId: 'YOUR_PROJECT_ID',
|
|
30
|
+
defaultLocale: 'en'
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
]
|
|
34
|
+
};
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### 2. In Templates
|
|
38
|
+
```html
|
|
39
|
+
<!-- Using Pipe -->
|
|
40
|
+
<h1>{{ 'welcome_title' | kopy }}</h1>
|
|
41
|
+
|
|
42
|
+
<!-- Using Directive -->
|
|
43
|
+
<p [kopy]="'description'" [kopyParams]="{ name: 'Carlos' }"></p>
|
|
44
|
+
|
|
45
|
+
<!-- Using Service -->
|
|
46
|
+
<button (click)="kopyService.setLocale('es')">Español</button>
|
|
47
|
+
```
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { InjectionToken, PipeTransform, ChangeDetectorRef, OnChanges, ElementRef, SimpleChanges } from '@angular/core';
|
|
3
|
+
import { KopyConfig } from '@kopynator/core';
|
|
4
|
+
|
|
5
|
+
declare const KOPY_CONFIG: InjectionToken<KopyConfig>;
|
|
6
|
+
declare class KopyService {
|
|
7
|
+
private config;
|
|
8
|
+
private kopy;
|
|
9
|
+
isReady: _angular_core.WritableSignal<boolean>;
|
|
10
|
+
constructor(config: KopyConfig);
|
|
11
|
+
private init;
|
|
12
|
+
translate(key: string, params?: Record<string, any>): string;
|
|
13
|
+
setLocale(locale: string): Promise<void>;
|
|
14
|
+
t(key: string, params?: Record<string, any>): string;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
declare class KopyPipe implements PipeTransform {
|
|
18
|
+
private kopyService;
|
|
19
|
+
private cdr;
|
|
20
|
+
constructor(kopyService: KopyService, cdr: ChangeDetectorRef);
|
|
21
|
+
transform(key: string, params?: Record<string, any>): string;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
declare class KopyDirective implements OnChanges {
|
|
25
|
+
private el;
|
|
26
|
+
private kopyService;
|
|
27
|
+
key: string;
|
|
28
|
+
kopyParams: Record<string, any>;
|
|
29
|
+
constructor(el: ElementRef, kopyService: KopyService);
|
|
30
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
31
|
+
private render;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export { KOPY_CONFIG, KopyDirective, KopyPipe, KopyService };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { InjectionToken, PipeTransform, ChangeDetectorRef, OnChanges, ElementRef, SimpleChanges } from '@angular/core';
|
|
3
|
+
import { KopyConfig } from '@kopynator/core';
|
|
4
|
+
|
|
5
|
+
declare const KOPY_CONFIG: InjectionToken<KopyConfig>;
|
|
6
|
+
declare class KopyService {
|
|
7
|
+
private config;
|
|
8
|
+
private kopy;
|
|
9
|
+
isReady: _angular_core.WritableSignal<boolean>;
|
|
10
|
+
constructor(config: KopyConfig);
|
|
11
|
+
private init;
|
|
12
|
+
translate(key: string, params?: Record<string, any>): string;
|
|
13
|
+
setLocale(locale: string): Promise<void>;
|
|
14
|
+
t(key: string, params?: Record<string, any>): string;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
declare class KopyPipe implements PipeTransform {
|
|
18
|
+
private kopyService;
|
|
19
|
+
private cdr;
|
|
20
|
+
constructor(kopyService: KopyService, cdr: ChangeDetectorRef);
|
|
21
|
+
transform(key: string, params?: Record<string, any>): string;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
declare class KopyDirective implements OnChanges {
|
|
25
|
+
private el;
|
|
26
|
+
private kopyService;
|
|
27
|
+
key: string;
|
|
28
|
+
kopyParams: Record<string, any>;
|
|
29
|
+
constructor(el: ElementRef, kopyService: KopyService);
|
|
30
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
31
|
+
private render;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export { KOPY_CONFIG, KopyDirective, KopyPipe, KopyService };
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
20
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
21
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
22
|
+
if (decorator = decorators[i])
|
|
23
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
24
|
+
if (kind && result) __defProp(target, key, result);
|
|
25
|
+
return result;
|
|
26
|
+
};
|
|
27
|
+
var __decorateParam = (index, decorator) => (target, key) => decorator(target, key, index);
|
|
28
|
+
|
|
29
|
+
// src/public-api.ts
|
|
30
|
+
var public_api_exports = {};
|
|
31
|
+
__export(public_api_exports, {
|
|
32
|
+
KOPY_CONFIG: () => KOPY_CONFIG,
|
|
33
|
+
KopyDirective: () => KopyDirective,
|
|
34
|
+
KopyPipe: () => KopyPipe,
|
|
35
|
+
KopyService: () => KopyService
|
|
36
|
+
});
|
|
37
|
+
module.exports = __toCommonJS(public_api_exports);
|
|
38
|
+
|
|
39
|
+
// src/lib/kopy.service.ts
|
|
40
|
+
var import_core = require("@angular/core");
|
|
41
|
+
var import_core2 = require("@kopynator/core");
|
|
42
|
+
var KOPY_CONFIG = new import_core.InjectionToken("KOPY_CONFIG");
|
|
43
|
+
var KopyService = class {
|
|
44
|
+
constructor(config) {
|
|
45
|
+
this.config = config;
|
|
46
|
+
this.isReady = (0, import_core.signal)(false);
|
|
47
|
+
this.kopy = new import_core2.Kopynator(config);
|
|
48
|
+
this.init();
|
|
49
|
+
}
|
|
50
|
+
async init() {
|
|
51
|
+
await this.kopy.init();
|
|
52
|
+
this.isReady.set(true);
|
|
53
|
+
}
|
|
54
|
+
translate(key, params = {}) {
|
|
55
|
+
return this.kopy.translate(key, params);
|
|
56
|
+
}
|
|
57
|
+
async setLocale(locale) {
|
|
58
|
+
this.isReady.set(false);
|
|
59
|
+
await this.kopy.setLocale(locale);
|
|
60
|
+
this.isReady.set(true);
|
|
61
|
+
}
|
|
62
|
+
t(key, params = {}) {
|
|
63
|
+
return this.translate(key, params);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
KopyService = __decorateClass([
|
|
67
|
+
(0, import_core.Injectable)({
|
|
68
|
+
providedIn: "root"
|
|
69
|
+
}),
|
|
70
|
+
__decorateParam(0, (0, import_core.Inject)(KOPY_CONFIG))
|
|
71
|
+
], KopyService);
|
|
72
|
+
|
|
73
|
+
// src/lib/kopy.pipe.ts
|
|
74
|
+
var import_core3 = require("@angular/core");
|
|
75
|
+
var KopyPipe = class {
|
|
76
|
+
constructor(kopyService, cdr) {
|
|
77
|
+
this.kopyService = kopyService;
|
|
78
|
+
this.cdr = cdr;
|
|
79
|
+
}
|
|
80
|
+
transform(key, params = {}) {
|
|
81
|
+
return this.kopyService.translate(key, params);
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
KopyPipe = __decorateClass([
|
|
85
|
+
(0, import_core3.Pipe)({
|
|
86
|
+
name: "kopy",
|
|
87
|
+
pure: false,
|
|
88
|
+
standalone: true
|
|
89
|
+
})
|
|
90
|
+
], KopyPipe);
|
|
91
|
+
|
|
92
|
+
// src/lib/kopy.directive.ts
|
|
93
|
+
var import_core4 = require("@angular/core");
|
|
94
|
+
var KopyDirective = class {
|
|
95
|
+
constructor(el, kopyService) {
|
|
96
|
+
this.el = el;
|
|
97
|
+
this.kopyService = kopyService;
|
|
98
|
+
this.kopyParams = {};
|
|
99
|
+
}
|
|
100
|
+
ngOnChanges(changes) {
|
|
101
|
+
this.render();
|
|
102
|
+
}
|
|
103
|
+
render() {
|
|
104
|
+
if (!this.key) return;
|
|
105
|
+
this.el.nativeElement.textContent = this.kopyService.translate(this.key, this.kopyParams);
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
__decorateClass([
|
|
109
|
+
(0, import_core4.Input)("kopy")
|
|
110
|
+
], KopyDirective.prototype, "key", 2);
|
|
111
|
+
__decorateClass([
|
|
112
|
+
(0, import_core4.Input)()
|
|
113
|
+
], KopyDirective.prototype, "kopyParams", 2);
|
|
114
|
+
KopyDirective = __decorateClass([
|
|
115
|
+
(0, import_core4.Directive)({
|
|
116
|
+
selector: "[kopy]",
|
|
117
|
+
standalone: true
|
|
118
|
+
})
|
|
119
|
+
], KopyDirective);
|
|
120
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
121
|
+
0 && (module.exports = {
|
|
122
|
+
KOPY_CONFIG,
|
|
123
|
+
KopyDirective,
|
|
124
|
+
KopyPipe,
|
|
125
|
+
KopyService
|
|
126
|
+
});
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
+
if (decorator = decorators[i])
|
|
7
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
+
if (kind && result) __defProp(target, key, result);
|
|
9
|
+
return result;
|
|
10
|
+
};
|
|
11
|
+
var __decorateParam = (index, decorator) => (target, key) => decorator(target, key, index);
|
|
12
|
+
|
|
13
|
+
// src/lib/kopy.service.ts
|
|
14
|
+
import { Injectable, Inject, InjectionToken, signal } from "@angular/core";
|
|
15
|
+
import { Kopynator } from "@kopynator/core";
|
|
16
|
+
var KOPY_CONFIG = new InjectionToken("KOPY_CONFIG");
|
|
17
|
+
var KopyService = class {
|
|
18
|
+
constructor(config) {
|
|
19
|
+
this.config = config;
|
|
20
|
+
this.isReady = signal(false);
|
|
21
|
+
this.kopy = new Kopynator(config);
|
|
22
|
+
this.init();
|
|
23
|
+
}
|
|
24
|
+
async init() {
|
|
25
|
+
await this.kopy.init();
|
|
26
|
+
this.isReady.set(true);
|
|
27
|
+
}
|
|
28
|
+
translate(key, params = {}) {
|
|
29
|
+
return this.kopy.translate(key, params);
|
|
30
|
+
}
|
|
31
|
+
async setLocale(locale) {
|
|
32
|
+
this.isReady.set(false);
|
|
33
|
+
await this.kopy.setLocale(locale);
|
|
34
|
+
this.isReady.set(true);
|
|
35
|
+
}
|
|
36
|
+
t(key, params = {}) {
|
|
37
|
+
return this.translate(key, params);
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
KopyService = __decorateClass([
|
|
41
|
+
Injectable({
|
|
42
|
+
providedIn: "root"
|
|
43
|
+
}),
|
|
44
|
+
__decorateParam(0, Inject(KOPY_CONFIG))
|
|
45
|
+
], KopyService);
|
|
46
|
+
|
|
47
|
+
// src/lib/kopy.pipe.ts
|
|
48
|
+
import { Pipe } from "@angular/core";
|
|
49
|
+
var KopyPipe = class {
|
|
50
|
+
constructor(kopyService, cdr) {
|
|
51
|
+
this.kopyService = kopyService;
|
|
52
|
+
this.cdr = cdr;
|
|
53
|
+
}
|
|
54
|
+
transform(key, params = {}) {
|
|
55
|
+
return this.kopyService.translate(key, params);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
KopyPipe = __decorateClass([
|
|
59
|
+
Pipe({
|
|
60
|
+
name: "kopy",
|
|
61
|
+
pure: false,
|
|
62
|
+
standalone: true
|
|
63
|
+
})
|
|
64
|
+
], KopyPipe);
|
|
65
|
+
|
|
66
|
+
// src/lib/kopy.directive.ts
|
|
67
|
+
import { Directive, Input } from "@angular/core";
|
|
68
|
+
var KopyDirective = class {
|
|
69
|
+
constructor(el, kopyService) {
|
|
70
|
+
this.el = el;
|
|
71
|
+
this.kopyService = kopyService;
|
|
72
|
+
this.kopyParams = {};
|
|
73
|
+
}
|
|
74
|
+
ngOnChanges(changes) {
|
|
75
|
+
this.render();
|
|
76
|
+
}
|
|
77
|
+
render() {
|
|
78
|
+
if (!this.key) return;
|
|
79
|
+
this.el.nativeElement.textContent = this.kopyService.translate(this.key, this.kopyParams);
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
__decorateClass([
|
|
83
|
+
Input("kopy")
|
|
84
|
+
], KopyDirective.prototype, "key", 2);
|
|
85
|
+
__decorateClass([
|
|
86
|
+
Input()
|
|
87
|
+
], KopyDirective.prototype, "kopyParams", 2);
|
|
88
|
+
KopyDirective = __decorateClass([
|
|
89
|
+
Directive({
|
|
90
|
+
selector: "[kopy]",
|
|
91
|
+
standalone: true
|
|
92
|
+
})
|
|
93
|
+
], KopyDirective);
|
|
94
|
+
export {
|
|
95
|
+
KOPY_CONFIG,
|
|
96
|
+
KopyDirective,
|
|
97
|
+
KopyPipe,
|
|
98
|
+
KopyService
|
|
99
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kopynator/angular",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"main": "./dist/public-api.js",
|
|
5
|
+
"module": "./dist/public-api.mjs",
|
|
6
|
+
"types": "./dist/public-api.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./dist/public-api.d.ts",
|
|
10
|
+
"import": "./dist/public-api.mjs",
|
|
11
|
+
"require": "./dist/public-api.js"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
17
|
+
"publishConfig": {
|
|
18
|
+
"access": "public"
|
|
19
|
+
},
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
|
|
22
|
+
"@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
|
|
23
|
+
},
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"@kopynator/core": "1.0.0",
|
|
26
|
+
"tslib": "^2.3.0"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@angular/common": "^21.0.6",
|
|
30
|
+
"@angular/core": "^21.0.6",
|
|
31
|
+
"@angular/platform-browser": "^21.0.6",
|
|
32
|
+
"tsup": "^8.0.0",
|
|
33
|
+
"typescript": "^5.0.0"
|
|
34
|
+
},
|
|
35
|
+
"scripts": {
|
|
36
|
+
"build": "tsup src/public-api.ts --format cjs,esm --dts --clean --external @angular/core,@angular/common,@kopynator/core"
|
|
37
|
+
}
|
|
38
|
+
}
|