@kopynator/angular 1.0.5 → 1.0.7
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/fesm2022/kopynator-angular.mjs +240 -0
- package/fesm2022/kopynator-angular.mjs.map +1 -0
- package/package.json +13 -16
- package/types/kopynator-angular.d.ts +62 -0
- package/ng-package.json +0 -7
- package/src/lib/kopy.directive.ts +0 -32
- package/src/lib/kopy.pipe.ts +0 -23
- package/src/lib/kopy.selector.component.ts +0 -164
- package/src/lib/kopy.service.ts +0 -57
- package/src/public-api.ts +0 -25
- package/tsconfig.json +0 -21
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InjectionToken, signal, Inject, Injectable, Pipe, effect, Input, Directive, inject, Component, provideAppInitializer } from '@angular/core';
|
|
3
|
+
import { Kopynator } from '@kopynator/core';
|
|
4
|
+
import * as i1 from '@angular/common';
|
|
5
|
+
import { CommonModule } from '@angular/common';
|
|
6
|
+
|
|
7
|
+
const KOPY_CONFIG = new InjectionToken('KOPY_CONFIG');
|
|
8
|
+
class KopyService {
|
|
9
|
+
config;
|
|
10
|
+
zone;
|
|
11
|
+
kopy;
|
|
12
|
+
// Signals for reactivity
|
|
13
|
+
isReady = signal(false, ...(ngDevMode ? [{ debugName: "isReady" }] : []));
|
|
14
|
+
availableLanguages = signal([], ...(ngDevMode ? [{ debugName: "availableLanguages" }] : []));
|
|
15
|
+
currentLocale = signal('en', ...(ngDevMode ? [{ debugName: "currentLocale" }] : []));
|
|
16
|
+
constructor(config, zone) {
|
|
17
|
+
this.config = config;
|
|
18
|
+
this.zone = zone;
|
|
19
|
+
const savedLocale = typeof localStorage !== 'undefined' ? localStorage.getItem('kopy_locale') : null;
|
|
20
|
+
const initialLocale = savedLocale || config.defaultLocale || 'en';
|
|
21
|
+
// Initialize core with the restored or default locale
|
|
22
|
+
this.kopy = new Kopynator({ ...config, defaultLocale: initialLocale });
|
|
23
|
+
this.currentLocale.set(initialLocale);
|
|
24
|
+
}
|
|
25
|
+
async init() {
|
|
26
|
+
await this.kopy.init();
|
|
27
|
+
this.zone.run(() => {
|
|
28
|
+
this.availableLanguages.set(this.kopy.getLanguages());
|
|
29
|
+
this.isReady.set(true);
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
async setLocale(locale) {
|
|
33
|
+
await this.kopy.setLocale(locale);
|
|
34
|
+
if (typeof localStorage !== 'undefined') {
|
|
35
|
+
localStorage.setItem('kopy_locale', locale);
|
|
36
|
+
}
|
|
37
|
+
this.zone.run(() => {
|
|
38
|
+
this.currentLocale.set(locale);
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
translate(key, params = {}) {
|
|
42
|
+
return this.kopy.translate(key, params);
|
|
43
|
+
}
|
|
44
|
+
getKopynator() {
|
|
45
|
+
return this.kopy;
|
|
46
|
+
}
|
|
47
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KopyService, deps: [{ token: KOPY_CONFIG }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
48
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KopyService, providedIn: 'root' });
|
|
49
|
+
}
|
|
50
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KopyService, decorators: [{
|
|
51
|
+
type: Injectable,
|
|
52
|
+
args: [{
|
|
53
|
+
providedIn: 'root'
|
|
54
|
+
}]
|
|
55
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
56
|
+
type: Inject,
|
|
57
|
+
args: [KOPY_CONFIG]
|
|
58
|
+
}] }, { type: i0.NgZone }] });
|
|
59
|
+
|
|
60
|
+
class KopyPipe {
|
|
61
|
+
kopyService;
|
|
62
|
+
constructor(kopyService) {
|
|
63
|
+
this.kopyService = kopyService;
|
|
64
|
+
}
|
|
65
|
+
transform(key, params = {}) {
|
|
66
|
+
// Establishing reactive dependencies on signals
|
|
67
|
+
const ready = this.kopyService.isReady();
|
|
68
|
+
const locale = this.kopyService.currentLocale();
|
|
69
|
+
if (!ready)
|
|
70
|
+
return key;
|
|
71
|
+
return this.kopyService.translate(key, params);
|
|
72
|
+
}
|
|
73
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KopyPipe, deps: [{ token: KopyService }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
74
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: KopyPipe, isStandalone: true, name: "kopy", pure: false });
|
|
75
|
+
}
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KopyPipe, decorators: [{
|
|
77
|
+
type: Pipe,
|
|
78
|
+
args: [{
|
|
79
|
+
name: 'kopy',
|
|
80
|
+
pure: false, // Must be false to react to signal changes inside transform
|
|
81
|
+
standalone: true
|
|
82
|
+
}]
|
|
83
|
+
}], ctorParameters: () => [{ type: KopyService }] });
|
|
84
|
+
|
|
85
|
+
class KopyDirective {
|
|
86
|
+
el;
|
|
87
|
+
kopyService;
|
|
88
|
+
key;
|
|
89
|
+
kopyParams = {};
|
|
90
|
+
constructor(el, kopyService) {
|
|
91
|
+
this.el = el;
|
|
92
|
+
this.kopyService = kopyService;
|
|
93
|
+
// React to signal changes in KopyService
|
|
94
|
+
effect(() => {
|
|
95
|
+
this.kopyService.currentLocale();
|
|
96
|
+
this.kopyService.isReady();
|
|
97
|
+
this.render();
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
ngOnChanges(changes) {
|
|
101
|
+
this.render();
|
|
102
|
+
}
|
|
103
|
+
render() {
|
|
104
|
+
if (!this.key)
|
|
105
|
+
return;
|
|
106
|
+
this.el.nativeElement.textContent = this.kopyService.translate(this.key, this.kopyParams);
|
|
107
|
+
}
|
|
108
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KopyDirective, deps: [{ token: i0.ElementRef }, { token: KopyService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
109
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: KopyDirective, isStandalone: true, selector: "[kopy]", inputs: { key: ["kopy", "key"], kopyParams: "kopyParams" }, usesOnChanges: true, ngImport: i0 });
|
|
110
|
+
}
|
|
111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KopyDirective, decorators: [{
|
|
112
|
+
type: Directive,
|
|
113
|
+
args: [{
|
|
114
|
+
selector: '[kopy]',
|
|
115
|
+
standalone: true
|
|
116
|
+
}]
|
|
117
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: KopyService }], propDecorators: { key: [{
|
|
118
|
+
type: Input,
|
|
119
|
+
args: ['kopy']
|
|
120
|
+
}], kopyParams: [{
|
|
121
|
+
type: Input
|
|
122
|
+
}] } });
|
|
123
|
+
|
|
124
|
+
class KopySelectorComponent {
|
|
125
|
+
kopyService = inject(KopyService);
|
|
126
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
127
|
+
languages = this.kopyService.availableLanguages;
|
|
128
|
+
currentLocale = this.kopyService.currentLocale;
|
|
129
|
+
flagMap = {
|
|
130
|
+
'en': '🇺🇸',
|
|
131
|
+
'es': '🇪🇸',
|
|
132
|
+
'fr': '🇫🇷',
|
|
133
|
+
'de': '🇩🇪',
|
|
134
|
+
'it': '🇮🇹',
|
|
135
|
+
'pt': '🇵🇹',
|
|
136
|
+
'ja': '🇯🇵',
|
|
137
|
+
'zh': '🇨🇳',
|
|
138
|
+
'ru': '🇷🇺'
|
|
139
|
+
};
|
|
140
|
+
nameMap = {
|
|
141
|
+
'en': 'English',
|
|
142
|
+
'es': 'Español',
|
|
143
|
+
'fr': 'Français',
|
|
144
|
+
'de': 'Deutsch',
|
|
145
|
+
'it': 'Italiano',
|
|
146
|
+
'pt': 'Português',
|
|
147
|
+
'ja': '日本語',
|
|
148
|
+
'zh': '中文',
|
|
149
|
+
'ru': 'Русский',
|
|
150
|
+
'en-us': 'English (US)'
|
|
151
|
+
};
|
|
152
|
+
toggleDropdown() {
|
|
153
|
+
this.isOpen.set(!this.isOpen());
|
|
154
|
+
}
|
|
155
|
+
selectLanguage(lang) {
|
|
156
|
+
this.kopyService.setLocale(lang);
|
|
157
|
+
this.isOpen.set(false);
|
|
158
|
+
}
|
|
159
|
+
getFlag(lang) {
|
|
160
|
+
const code = lang.split('-')[0].toLowerCase();
|
|
161
|
+
return this.flagMap[code] || '🌐';
|
|
162
|
+
}
|
|
163
|
+
getNativeName(lang) {
|
|
164
|
+
return this.nameMap[lang.toLowerCase()] || lang.toUpperCase();
|
|
165
|
+
}
|
|
166
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KopySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
167
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: KopySelectorComponent, isStandalone: true, selector: "kopy-selector", ngImport: i0, template: `
|
|
168
|
+
<div class="kopy-selector-container" [class.open]="isOpen()">
|
|
169
|
+
<button class="kopy-selected-btn" (click)="toggleDropdown()">
|
|
170
|
+
<span class="flag">{{ getFlag(currentLocale()) }}</span>
|
|
171
|
+
<span class="label uppercase">{{ currentLocale() }}</span>
|
|
172
|
+
<svg class="chevron" [class.rotate]="isOpen()" viewBox="0 0 20 20" fill="currentColor">
|
|
173
|
+
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
174
|
+
</svg>
|
|
175
|
+
</button>
|
|
176
|
+
|
|
177
|
+
<div class="kopy-dropdown" *ngIf="isOpen()">
|
|
178
|
+
<button
|
|
179
|
+
*ngFor="let lang of languages()"
|
|
180
|
+
class="kopy-dropdown-item"
|
|
181
|
+
[class.active]="lang === currentLocale()"
|
|
182
|
+
(click)="selectLanguage(lang)"
|
|
183
|
+
>
|
|
184
|
+
<span class="flag">{{ getFlag(lang) }}</span>
|
|
185
|
+
<span class="label">{{ getNativeName(lang) }}</span>
|
|
186
|
+
</button>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
`, isInline: true, styles: [".kopy-selector-container{position:relative;display:inline-block;font-family:inherit}.kopy-selected-btn{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:99px;color:#fff;cursor:pointer;transition:all .2s;font-size:11px;font-weight:700;min-width:70px;justify-content:center}.kopy-selected-btn:hover{background:#ffffff1a;border-color:#fff3}.chevron{width:10px;height:10px;opacity:.5;transition:transform .2s}.chevron.rotate{transform:rotate(180deg)}.kopy-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:#1e293b;border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 10px 25px -5px #00000080;overflow:hidden;min-width:140px;z-index:100;animation:slideIn .2s ease-out}.kopy-dropdown-item{width:100%;display:flex;align-items:center;gap:12px;padding:10px 16px;background:transparent;border:none;color:#94a3b8;cursor:pointer;text-align:left;transition:all .2s;font-size:14px}.kopy-dropdown-item:hover{background:#ffffff0d;color:#fff}.kopy-dropdown-item.active{color:#38bdf8;background:#38bdf80d}.label{flex:1}.flag{font-size:16px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
190
|
+
}
|
|
191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KopySelectorComponent, decorators: [{
|
|
192
|
+
type: Component,
|
|
193
|
+
args: [{ selector: 'kopy-selector', standalone: true, imports: [CommonModule], template: `
|
|
194
|
+
<div class="kopy-selector-container" [class.open]="isOpen()">
|
|
195
|
+
<button class="kopy-selected-btn" (click)="toggleDropdown()">
|
|
196
|
+
<span class="flag">{{ getFlag(currentLocale()) }}</span>
|
|
197
|
+
<span class="label uppercase">{{ currentLocale() }}</span>
|
|
198
|
+
<svg class="chevron" [class.rotate]="isOpen()" viewBox="0 0 20 20" fill="currentColor">
|
|
199
|
+
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
200
|
+
</svg>
|
|
201
|
+
</button>
|
|
202
|
+
|
|
203
|
+
<div class="kopy-dropdown" *ngIf="isOpen()">
|
|
204
|
+
<button
|
|
205
|
+
*ngFor="let lang of languages()"
|
|
206
|
+
class="kopy-dropdown-item"
|
|
207
|
+
[class.active]="lang === currentLocale()"
|
|
208
|
+
(click)="selectLanguage(lang)"
|
|
209
|
+
>
|
|
210
|
+
<span class="flag">{{ getFlag(lang) }}</span>
|
|
211
|
+
<span class="label">{{ getNativeName(lang) }}</span>
|
|
212
|
+
</button>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
`, styles: [".kopy-selector-container{position:relative;display:inline-block;font-family:inherit}.kopy-selected-btn{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:99px;color:#fff;cursor:pointer;transition:all .2s;font-size:11px;font-weight:700;min-width:70px;justify-content:center}.kopy-selected-btn:hover{background:#ffffff1a;border-color:#fff3}.chevron{width:10px;height:10px;opacity:.5;transition:transform .2s}.chevron.rotate{transform:rotate(180deg)}.kopy-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:#1e293b;border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 10px 25px -5px #00000080;overflow:hidden;min-width:140px;z-index:100;animation:slideIn .2s ease-out}.kopy-dropdown-item{width:100%;display:flex;align-items:center;gap:12px;padding:10px 16px;background:transparent;border:none;color:#94a3b8;cursor:pointer;text-align:left;transition:all .2s;font-size:14px}.kopy-dropdown-item:hover{background:#ffffff0d;color:#fff}.kopy-dropdown-item.active{color:#38bdf8;background:#38bdf80d}.label{flex:1}.flag{font-size:16px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
216
|
+
}] });
|
|
217
|
+
|
|
218
|
+
/**
|
|
219
|
+
* Provides the Kopynator SDK configuration to the application.
|
|
220
|
+
*/
|
|
221
|
+
function provideKopynator(config) {
|
|
222
|
+
return [
|
|
223
|
+
{
|
|
224
|
+
provide: KOPY_CONFIG,
|
|
225
|
+
useValue: config
|
|
226
|
+
},
|
|
227
|
+
KopyService,
|
|
228
|
+
provideAppInitializer(() => {
|
|
229
|
+
const kopyService = inject(KopyService);
|
|
230
|
+
return kopyService.init();
|
|
231
|
+
})
|
|
232
|
+
];
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/**
|
|
236
|
+
* Generated bundle index. Do not edit.
|
|
237
|
+
*/
|
|
238
|
+
|
|
239
|
+
export { KOPY_CONFIG, KopyDirective, KopyPipe, KopySelectorComponent, KopyService, provideKopynator };
|
|
240
|
+
//# sourceMappingURL=kopynator-angular.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kopynator-angular.mjs","sources":["../../../../packages/angular/src/lib/kopy.service.ts","../../../../packages/angular/src/lib/kopy.pipe.ts","../../../../packages/angular/src/lib/kopy.directive.ts","../../../../packages/angular/src/lib/kopy.selector.component.ts","../../../../packages/angular/src/public-api.ts","../../../../packages/angular/src/kopynator-angular.ts"],"sourcesContent":["import { Injectable, Inject, InjectionToken, signal, NgZone } from '@angular/core';\nimport { Kopynator, KopyConfig } from '@kopynator/core';\n\nexport const KOPY_CONFIG = new InjectionToken<KopyConfig>('KOPY_CONFIG');\n\n@Injectable({\n providedIn: 'root'\n})\nexport class KopyService {\n private kopy: Kopynator;\n \n // Signals for reactivity\n public isReady = signal(false);\n public availableLanguages = signal<string[]>([]);\n public currentLocale = signal<string>('en');\n\n constructor(\n @Inject(KOPY_CONFIG) private config: KopyConfig,\n private zone: NgZone\n ) {\n const savedLocale = typeof localStorage !== 'undefined' ? localStorage.getItem('kopy_locale') : null;\n const initialLocale = savedLocale || config.defaultLocale || 'en';\n \n // Initialize core with the restored or default locale\n this.kopy = new Kopynator({ ...config, defaultLocale: initialLocale });\n this.currentLocale.set(initialLocale);\n }\n\n public async init(): Promise<void> {\n await this.kopy.init();\n \n this.zone.run(() => {\n this.availableLanguages.set(this.kopy.getLanguages());\n this.isReady.set(true);\n });\n }\n\n async setLocale(locale: string) {\n await this.kopy.setLocale(locale);\n \n if (typeof localStorage !== 'undefined') {\n localStorage.setItem('kopy_locale', locale);\n }\n\n this.zone.run(() => {\n this.currentLocale.set(locale);\n });\n }\n\n translate(key: string, params: Record<string, any> = {}): string {\n return this.kopy.translate(key, params);\n }\n\n getKopynator(): Kopynator {\n return this.kopy;\n }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { KopyService } from './kopy.service';\n\n@Pipe({\n name: 'kopy',\n pure: false, // Must be false to react to signal changes inside transform\n standalone: true\n})\nexport class KopyPipe implements PipeTransform {\n constructor(\n private kopyService: KopyService\n ) {}\n\n transform(key: string, params: Record<string, any> = {}): string {\n // Establishing reactive dependencies on signals\n const ready = this.kopyService.isReady();\n const locale = this.kopyService.currentLocale();\n \n if (!ready) return key;\n\n return this.kopyService.translate(key, params);\n }\n}\n","import { Directive, ElementRef, Input, OnChanges, SimpleChanges, effect } from '@angular/core';\nimport { KopyService } from './kopy.service';\n\n@Directive({\n selector: '[kopy]',\n standalone: true\n})\nexport class KopyDirective implements OnChanges {\n @Input('kopy') key!: string;\n @Input() kopyParams: Record<string, any> = {};\n\n constructor(\n private el: ElementRef,\n private kopyService: KopyService\n ) {\n // React to signal changes in KopyService\n effect(() => {\n this.kopyService.currentLocale();\n this.kopyService.isReady();\n this.render();\n });\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n this.render();\n }\n\n private render() {\n if (!this.key) return;\n this.el.nativeElement.textContent = this.kopyService.translate(this.key, this.kopyParams);\n }\n}\n","import { Component, inject, signal } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { KopyService } from './kopy.service';\n\n@Component({\n selector: 'kopy-selector',\n standalone: true,\n imports: [CommonModule],\n template: `\n <div class=\"kopy-selector-container\" [class.open]=\"isOpen()\">\n <button class=\"kopy-selected-btn\" (click)=\"toggleDropdown()\">\n <span class=\"flag\">{{ getFlag(currentLocale()) }}</span>\n <span class=\"label uppercase\">{{ currentLocale() }}</span>\n <svg class=\"chevron\" [class.rotate]=\"isOpen()\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" />\n </svg>\n </button>\n\n <div class=\"kopy-dropdown\" *ngIf=\"isOpen()\">\n <button \n *ngFor=\"let lang of languages()\" \n class=\"kopy-dropdown-item\"\n [class.active]=\"lang === currentLocale()\"\n (click)=\"selectLanguage(lang)\"\n >\n <span class=\"flag\">{{ getFlag(lang) }}</span>\n <span class=\"label\">{{ getNativeName(lang) }}</span>\n </button>\n </div>\n </div>\n `,\n styles: [`\n .kopy-selector-container {\n position: relative;\n display: inline-block;\n font-family: inherit;\n }\n .kopy-selected-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 10px;\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 99px;\n color: white;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 11px;\n font-weight: 700;\n min-width: 70px;\n justify-content: center;\n }\n .kopy-selected-btn:hover {\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.2);\n }\n .chevron {\n width: 10px;\n height: 10px;\n opacity: 0.5;\n transition: transform 0.2s;\n }\n .chevron.rotate {\n transform: rotate(180deg);\n }\n .kopy-dropdown {\n position: absolute;\n top: 100%;\n right: 0;\n margin-top: 8px;\n background: #1e293b;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 12px;\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n min-width: 140px;\n z-index: 100;\n animation: slideIn 0.2s ease-out;\n }\n .kopy-dropdown-item {\n width: 100%;\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n background: transparent;\n border: none;\n color: #94a3b8;\n cursor: pointer;\n text-align: left;\n transition: all 0.2s;\n font-size: 14px;\n }\n .kopy-dropdown-item:hover {\n background: rgba(255, 255, 255, 0.05);\n color: white;\n }\n .kopy-dropdown-item.active {\n color: #38bdf8;\n background: rgba(56, 189, 248, 0.05);\n }\n .label {\n flex: 1;\n }\n .flag {\n font-size: 16px;\n }\n @keyframes slideIn {\n from { opacity: 0; transform: translateY(-10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n `]\n})\nexport class KopySelectorComponent {\n private kopyService = inject(KopyService);\n \n public isOpen = signal(false);\n public languages = this.kopyService.availableLanguages;\n public currentLocale = this.kopyService.currentLocale;\n\n private flagMap: Record<string, string> = {\n 'en': '🇺🇸',\n 'es': '🇪🇸',\n 'fr': '🇫🇷',\n 'de': '🇩🇪',\n 'it': '🇮🇹',\n 'pt': '🇵🇹',\n 'ja': '🇯🇵',\n 'zh': '🇨🇳',\n 'ru': '🇷🇺'\n };\n\n private nameMap: Record<string, string> = {\n 'en': 'English',\n 'es': 'Español',\n 'fr': 'Français',\n 'de': 'Deutsch',\n 'it': 'Italiano',\n 'pt': 'Português',\n 'ja': '日本語',\n 'zh': '中文',\n 'ru': 'Русский',\n 'en-us': 'English (US)'\n };\n\n toggleDropdown() {\n this.isOpen.set(!this.isOpen());\n }\n\n selectLanguage(lang: string) {\n this.kopyService.setLocale(lang);\n this.isOpen.set(false);\n }\n\n getFlag(lang: string): string {\n const code = lang.split('-')[0].toLowerCase();\n return this.flagMap[code] || '🌐';\n }\n\n getNativeName(lang: string): string {\n return this.nameMap[lang.toLowerCase()] || lang.toUpperCase();\n }\n}\n","import { Provider, provideAppInitializer, inject, EnvironmentProviders } from '@angular/core';\nimport { KopyConfig } from '@kopynator/core';\nimport { KOPY_CONFIG, KopyService } from './lib/kopy.service';\n\nexport * from './lib/kopy.service';\nexport * from './lib/kopy.pipe';\nexport * from './lib/kopy.directive';\nexport * from './lib/kopy.selector.component';\n\n/**\n * Provides the Kopynator SDK configuration to the application.\n */\nexport function provideKopynator(config: KopyConfig): (Provider | EnvironmentProviders)[] {\n return [\n {\n provide: KOPY_CONFIG,\n useValue: config\n },\n KopyService,\n provideAppInitializer(() => {\n const kopyService = inject(KopyService);\n return kopyService.init();\n })\n ];\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.KopyService"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kopynator/angular",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -12,19 +12,16 @@
|
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"tslib": "^2.3.0"
|
|
14
14
|
},
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
"
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
|
|
15
|
+
"module": "fesm2022/kopynator-angular.mjs",
|
|
16
|
+
"typings": "types/kopynator-angular.d.ts",
|
|
17
|
+
"exports": {
|
|
18
|
+
"./package.json": {
|
|
19
|
+
"default": "./package.json"
|
|
20
|
+
},
|
|
21
|
+
".": {
|
|
22
|
+
"types": "./types/kopynator-angular.d.ts",
|
|
23
|
+
"default": "./fesm2022/kopynator-angular.mjs"
|
|
24
|
+
}
|
|
23
25
|
},
|
|
24
|
-
"
|
|
25
|
-
|
|
26
|
-
"release:patch": "npm version patch",
|
|
27
|
-
"release:minor": "npm version minor",
|
|
28
|
-
"release:major": "npm version major"
|
|
29
|
-
}
|
|
30
|
-
}
|
|
26
|
+
"sideEffects": false
|
|
27
|
+
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InjectionToken, NgZone, PipeTransform, OnChanges, ElementRef, SimpleChanges, Provider, EnvironmentProviders } from '@angular/core';
|
|
3
|
+
import { KopyConfig, Kopynator } from '@kopynator/core';
|
|
4
|
+
|
|
5
|
+
declare const KOPY_CONFIG: InjectionToken<KopyConfig>;
|
|
6
|
+
declare class KopyService {
|
|
7
|
+
private config;
|
|
8
|
+
private zone;
|
|
9
|
+
private kopy;
|
|
10
|
+
isReady: i0.WritableSignal<boolean>;
|
|
11
|
+
availableLanguages: i0.WritableSignal<string[]>;
|
|
12
|
+
currentLocale: i0.WritableSignal<string>;
|
|
13
|
+
constructor(config: KopyConfig, zone: NgZone);
|
|
14
|
+
init(): Promise<void>;
|
|
15
|
+
setLocale(locale: string): Promise<void>;
|
|
16
|
+
translate(key: string, params?: Record<string, any>): string;
|
|
17
|
+
getKopynator(): Kopynator;
|
|
18
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KopyService, never>;
|
|
19
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<KopyService>;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
declare class KopyPipe implements PipeTransform {
|
|
23
|
+
private kopyService;
|
|
24
|
+
constructor(kopyService: KopyService);
|
|
25
|
+
transform(key: string, params?: Record<string, any>): string;
|
|
26
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KopyPipe, never>;
|
|
27
|
+
static ɵpipe: i0.ɵɵPipeDeclaration<KopyPipe, "kopy", true>;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
declare class KopyDirective implements OnChanges {
|
|
31
|
+
private el;
|
|
32
|
+
private kopyService;
|
|
33
|
+
key: string;
|
|
34
|
+
kopyParams: Record<string, any>;
|
|
35
|
+
constructor(el: ElementRef, kopyService: KopyService);
|
|
36
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
37
|
+
private render;
|
|
38
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KopyDirective, never>;
|
|
39
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<KopyDirective, "[kopy]", never, { "key": { "alias": "kopy"; "required": false; }; "kopyParams": { "alias": "kopyParams"; "required": false; }; }, {}, never, never, true, never>;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
declare class KopySelectorComponent {
|
|
43
|
+
private kopyService;
|
|
44
|
+
isOpen: i0.WritableSignal<boolean>;
|
|
45
|
+
languages: i0.WritableSignal<string[]>;
|
|
46
|
+
currentLocale: i0.WritableSignal<string>;
|
|
47
|
+
private flagMap;
|
|
48
|
+
private nameMap;
|
|
49
|
+
toggleDropdown(): void;
|
|
50
|
+
selectLanguage(lang: string): void;
|
|
51
|
+
getFlag(lang: string): string;
|
|
52
|
+
getNativeName(lang: string): string;
|
|
53
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KopySelectorComponent, never>;
|
|
54
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<KopySelectorComponent, "kopy-selector", never, {}, {}, never, never, true, never>;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Provides the Kopynator SDK configuration to the application.
|
|
59
|
+
*/
|
|
60
|
+
declare function provideKopynator(config: KopyConfig): (Provider | EnvironmentProviders)[];
|
|
61
|
+
|
|
62
|
+
export { KOPY_CONFIG, KopyDirective, KopyPipe, KopySelectorComponent, KopyService, provideKopynator };
|
package/ng-package.json
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { Directive, ElementRef, Input, OnChanges, SimpleChanges, effect } from '@angular/core';
|
|
2
|
-
import { KopyService } from './kopy.service';
|
|
3
|
-
|
|
4
|
-
@Directive({
|
|
5
|
-
selector: '[kopy]',
|
|
6
|
-
standalone: true
|
|
7
|
-
})
|
|
8
|
-
export class KopyDirective implements OnChanges {
|
|
9
|
-
@Input('kopy') key!: string;
|
|
10
|
-
@Input() kopyParams: Record<string, any> = {};
|
|
11
|
-
|
|
12
|
-
constructor(
|
|
13
|
-
private el: ElementRef,
|
|
14
|
-
private kopyService: KopyService
|
|
15
|
-
) {
|
|
16
|
-
// React to signal changes in KopyService
|
|
17
|
-
effect(() => {
|
|
18
|
-
this.kopyService.currentLocale();
|
|
19
|
-
this.kopyService.isReady();
|
|
20
|
-
this.render();
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
ngOnChanges(changes: SimpleChanges): void {
|
|
25
|
-
this.render();
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
private render() {
|
|
29
|
-
if (!this.key) return;
|
|
30
|
-
this.el.nativeElement.textContent = this.kopyService.translate(this.key, this.kopyParams);
|
|
31
|
-
}
|
|
32
|
-
}
|
package/src/lib/kopy.pipe.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { Pipe, PipeTransform } from '@angular/core';
|
|
2
|
-
import { KopyService } from './kopy.service';
|
|
3
|
-
|
|
4
|
-
@Pipe({
|
|
5
|
-
name: 'kopy',
|
|
6
|
-
pure: false, // Must be false to react to signal changes inside transform
|
|
7
|
-
standalone: true
|
|
8
|
-
})
|
|
9
|
-
export class KopyPipe implements PipeTransform {
|
|
10
|
-
constructor(
|
|
11
|
-
private kopyService: KopyService
|
|
12
|
-
) {}
|
|
13
|
-
|
|
14
|
-
transform(key: string, params: Record<string, any> = {}): string {
|
|
15
|
-
// Establishing reactive dependencies on signals
|
|
16
|
-
const ready = this.kopyService.isReady();
|
|
17
|
-
const locale = this.kopyService.currentLocale();
|
|
18
|
-
|
|
19
|
-
if (!ready) return key;
|
|
20
|
-
|
|
21
|
-
return this.kopyService.translate(key, params);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
@@ -1,164 +0,0 @@
|
|
|
1
|
-
import { Component, inject, signal } from '@angular/core';
|
|
2
|
-
import { CommonModule } from '@angular/common';
|
|
3
|
-
import { KopyService } from './kopy.service';
|
|
4
|
-
|
|
5
|
-
@Component({
|
|
6
|
-
selector: 'kopy-selector',
|
|
7
|
-
standalone: true,
|
|
8
|
-
imports: [CommonModule],
|
|
9
|
-
template: `
|
|
10
|
-
<div class="kopy-selector-container" [class.open]="isOpen()">
|
|
11
|
-
<button class="kopy-selected-btn" (click)="toggleDropdown()">
|
|
12
|
-
<span class="flag">{{ getFlag(currentLocale()) }}</span>
|
|
13
|
-
<span class="label uppercase">{{ currentLocale() }}</span>
|
|
14
|
-
<svg class="chevron" [class.rotate]="isOpen()" viewBox="0 0 20 20" fill="currentColor">
|
|
15
|
-
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
16
|
-
</svg>
|
|
17
|
-
</button>
|
|
18
|
-
|
|
19
|
-
<div class="kopy-dropdown" *ngIf="isOpen()">
|
|
20
|
-
<button
|
|
21
|
-
*ngFor="let lang of languages()"
|
|
22
|
-
class="kopy-dropdown-item"
|
|
23
|
-
[class.active]="lang === currentLocale()"
|
|
24
|
-
(click)="selectLanguage(lang)"
|
|
25
|
-
>
|
|
26
|
-
<span class="flag">{{ getFlag(lang) }}</span>
|
|
27
|
-
<span class="label">{{ getNativeName(lang) }}</span>
|
|
28
|
-
</button>
|
|
29
|
-
</div>
|
|
30
|
-
</div>
|
|
31
|
-
`,
|
|
32
|
-
styles: [`
|
|
33
|
-
.kopy-selector-container {
|
|
34
|
-
position: relative;
|
|
35
|
-
display: inline-block;
|
|
36
|
-
font-family: inherit;
|
|
37
|
-
}
|
|
38
|
-
.kopy-selected-btn {
|
|
39
|
-
display: flex;
|
|
40
|
-
align-items: center;
|
|
41
|
-
gap: 6px;
|
|
42
|
-
padding: 4px 10px;
|
|
43
|
-
background: rgba(255, 255, 255, 0.05);
|
|
44
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
45
|
-
border-radius: 99px;
|
|
46
|
-
color: white;
|
|
47
|
-
cursor: pointer;
|
|
48
|
-
transition: all 0.2s;
|
|
49
|
-
font-size: 11px;
|
|
50
|
-
font-weight: 700;
|
|
51
|
-
min-width: 70px;
|
|
52
|
-
justify-content: center;
|
|
53
|
-
}
|
|
54
|
-
.kopy-selected-btn:hover {
|
|
55
|
-
background: rgba(255, 255, 255, 0.1);
|
|
56
|
-
border-color: rgba(255, 255, 255, 0.2);
|
|
57
|
-
}
|
|
58
|
-
.chevron {
|
|
59
|
-
width: 10px;
|
|
60
|
-
height: 10px;
|
|
61
|
-
opacity: 0.5;
|
|
62
|
-
transition: transform 0.2s;
|
|
63
|
-
}
|
|
64
|
-
.chevron.rotate {
|
|
65
|
-
transform: rotate(180deg);
|
|
66
|
-
}
|
|
67
|
-
.kopy-dropdown {
|
|
68
|
-
position: absolute;
|
|
69
|
-
top: 100%;
|
|
70
|
-
right: 0;
|
|
71
|
-
margin-top: 8px;
|
|
72
|
-
background: #1e293b;
|
|
73
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
74
|
-
border-radius: 12px;
|
|
75
|
-
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
|
|
76
|
-
overflow: hidden;
|
|
77
|
-
min-width: 140px;
|
|
78
|
-
z-index: 100;
|
|
79
|
-
animation: slideIn 0.2s ease-out;
|
|
80
|
-
}
|
|
81
|
-
.kopy-dropdown-item {
|
|
82
|
-
width: 100%;
|
|
83
|
-
display: flex;
|
|
84
|
-
align-items: center;
|
|
85
|
-
gap: 12px;
|
|
86
|
-
padding: 10px 16px;
|
|
87
|
-
background: transparent;
|
|
88
|
-
border: none;
|
|
89
|
-
color: #94a3b8;
|
|
90
|
-
cursor: pointer;
|
|
91
|
-
text-align: left;
|
|
92
|
-
transition: all 0.2s;
|
|
93
|
-
font-size: 14px;
|
|
94
|
-
}
|
|
95
|
-
.kopy-dropdown-item:hover {
|
|
96
|
-
background: rgba(255, 255, 255, 0.05);
|
|
97
|
-
color: white;
|
|
98
|
-
}
|
|
99
|
-
.kopy-dropdown-item.active {
|
|
100
|
-
color: #38bdf8;
|
|
101
|
-
background: rgba(56, 189, 248, 0.05);
|
|
102
|
-
}
|
|
103
|
-
.label {
|
|
104
|
-
flex: 1;
|
|
105
|
-
}
|
|
106
|
-
.flag {
|
|
107
|
-
font-size: 16px;
|
|
108
|
-
}
|
|
109
|
-
@keyframes slideIn {
|
|
110
|
-
from { opacity: 0; transform: translateY(-10px); }
|
|
111
|
-
to { opacity: 1; transform: translateY(0); }
|
|
112
|
-
}
|
|
113
|
-
`]
|
|
114
|
-
})
|
|
115
|
-
export class KopySelectorComponent {
|
|
116
|
-
private kopyService = inject(KopyService);
|
|
117
|
-
|
|
118
|
-
public isOpen = signal(false);
|
|
119
|
-
public languages = this.kopyService.availableLanguages;
|
|
120
|
-
public currentLocale = this.kopyService.currentLocale;
|
|
121
|
-
|
|
122
|
-
private flagMap: Record<string, string> = {
|
|
123
|
-
'en': '🇺🇸',
|
|
124
|
-
'es': '🇪🇸',
|
|
125
|
-
'fr': '🇫🇷',
|
|
126
|
-
'de': '🇩🇪',
|
|
127
|
-
'it': '🇮🇹',
|
|
128
|
-
'pt': '🇵🇹',
|
|
129
|
-
'ja': '🇯🇵',
|
|
130
|
-
'zh': '🇨🇳',
|
|
131
|
-
'ru': '🇷🇺'
|
|
132
|
-
};
|
|
133
|
-
|
|
134
|
-
private nameMap: Record<string, string> = {
|
|
135
|
-
'en': 'English',
|
|
136
|
-
'es': 'Español',
|
|
137
|
-
'fr': 'Français',
|
|
138
|
-
'de': 'Deutsch',
|
|
139
|
-
'it': 'Italiano',
|
|
140
|
-
'pt': 'Português',
|
|
141
|
-
'ja': '日本語',
|
|
142
|
-
'zh': '中文',
|
|
143
|
-
'ru': 'Русский',
|
|
144
|
-
'en-us': 'English (US)'
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
toggleDropdown() {
|
|
148
|
-
this.isOpen.set(!this.isOpen());
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
selectLanguage(lang: string) {
|
|
152
|
-
this.kopyService.setLocale(lang);
|
|
153
|
-
this.isOpen.set(false);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
getFlag(lang: string): string {
|
|
157
|
-
const code = lang.split('-')[0].toLowerCase();
|
|
158
|
-
return this.flagMap[code] || '🌐';
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
getNativeName(lang: string): string {
|
|
162
|
-
return this.nameMap[lang.toLowerCase()] || lang.toUpperCase();
|
|
163
|
-
}
|
|
164
|
-
}
|
package/src/lib/kopy.service.ts
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { Injectable, Inject, InjectionToken, signal, NgZone } from '@angular/core';
|
|
2
|
-
import { Kopynator, KopyConfig } from '@kopynator/core';
|
|
3
|
-
|
|
4
|
-
export const KOPY_CONFIG = new InjectionToken<KopyConfig>('KOPY_CONFIG');
|
|
5
|
-
|
|
6
|
-
@Injectable({
|
|
7
|
-
providedIn: 'root'
|
|
8
|
-
})
|
|
9
|
-
export class KopyService {
|
|
10
|
-
private kopy: Kopynator;
|
|
11
|
-
|
|
12
|
-
// Signals for reactivity
|
|
13
|
-
public isReady = signal(false);
|
|
14
|
-
public availableLanguages = signal<string[]>([]);
|
|
15
|
-
public currentLocale = signal<string>('en');
|
|
16
|
-
|
|
17
|
-
constructor(
|
|
18
|
-
@Inject(KOPY_CONFIG) private config: KopyConfig,
|
|
19
|
-
private zone: NgZone
|
|
20
|
-
) {
|
|
21
|
-
const savedLocale = typeof localStorage !== 'undefined' ? localStorage.getItem('kopy_locale') : null;
|
|
22
|
-
const initialLocale = savedLocale || config.defaultLocale || 'en';
|
|
23
|
-
|
|
24
|
-
// Initialize core with the restored or default locale
|
|
25
|
-
this.kopy = new Kopynator({ ...config, defaultLocale: initialLocale });
|
|
26
|
-
this.currentLocale.set(initialLocale);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
public async init(): Promise<void> {
|
|
30
|
-
await this.kopy.init();
|
|
31
|
-
|
|
32
|
-
this.zone.run(() => {
|
|
33
|
-
this.availableLanguages.set(this.kopy.getLanguages());
|
|
34
|
-
this.isReady.set(true);
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
async setLocale(locale: string) {
|
|
39
|
-
await this.kopy.setLocale(locale);
|
|
40
|
-
|
|
41
|
-
if (typeof localStorage !== 'undefined') {
|
|
42
|
-
localStorage.setItem('kopy_locale', locale);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
this.zone.run(() => {
|
|
46
|
-
this.currentLocale.set(locale);
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
translate(key: string, params: Record<string, any> = {}): string {
|
|
51
|
-
return this.kopy.translate(key, params);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
getKopynator(): Kopynator {
|
|
55
|
-
return this.kopy;
|
|
56
|
-
}
|
|
57
|
-
}
|
package/src/public-api.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { Provider, provideAppInitializer, inject, EnvironmentProviders } from '@angular/core';
|
|
2
|
-
import { KopyConfig } from '@kopynator/core';
|
|
3
|
-
import { KOPY_CONFIG, KopyService } from './lib/kopy.service';
|
|
4
|
-
|
|
5
|
-
export * from './lib/kopy.service';
|
|
6
|
-
export * from './lib/kopy.pipe';
|
|
7
|
-
export * from './lib/kopy.directive';
|
|
8
|
-
export * from './lib/kopy.selector.component';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Provides the Kopynator SDK configuration to the application.
|
|
12
|
-
*/
|
|
13
|
-
export function provideKopynator(config: KopyConfig): (Provider | EnvironmentProviders)[] {
|
|
14
|
-
return [
|
|
15
|
-
{
|
|
16
|
-
provide: KOPY_CONFIG,
|
|
17
|
-
useValue: config
|
|
18
|
-
},
|
|
19
|
-
KopyService,
|
|
20
|
-
provideAppInitializer(() => {
|
|
21
|
-
const kopyService = inject(KopyService);
|
|
22
|
-
return kopyService.init();
|
|
23
|
-
})
|
|
24
|
-
];
|
|
25
|
-
}
|
package/tsconfig.json
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "ES2022",
|
|
4
|
-
"module": "ES2022",
|
|
5
|
-
"moduleResolution": "node",
|
|
6
|
-
"lib": ["ES2022", "DOM"],
|
|
7
|
-
"declaration": true,
|
|
8
|
-
"declarationMap": true,
|
|
9
|
-
"sourceMap": true,
|
|
10
|
-
"outDir": "dist",
|
|
11
|
-
"strict": true,
|
|
12
|
-
"esModuleInterop": true,
|
|
13
|
-
"skipLibCheck": true,
|
|
14
|
-
"forceConsistentCasingInFileNames": true,
|
|
15
|
-
"experimentalDecorators": true,
|
|
16
|
-
"emitDecoratorMetadata": true,
|
|
17
|
-
"useDefineForClassFields": false
|
|
18
|
-
},
|
|
19
|
-
"include": ["src/**/*"],
|
|
20
|
-
"exclude": ["node_modules", "dist"]
|
|
21
|
-
}
|