@kopynator/angular 1.0.3 → 1.0.5

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "dest": "../../dist/packages/angular"
+}

package/package.json

@@ -1,39 +1,28 @@
 {
   "name": "@kopynator/angular",
-  "version": "1.0.3",
-  "main": "./dist/public-api.js",
-  "module": "./dist/public-api.mjs",
-  "types": "./dist/public-api.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/public-api.d.ts",
-      "import": "./dist/public-api.mjs",
-      "require": "./dist/public-api.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
+  "version": "1.0.5",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
     "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
-    "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
+    "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@kopynator/core": "^1.0.1"
   },
   "dependencies": {
-    "@kopynator/core": "1.0.0",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@angular/common": "^21.0.6",
     "@angular/core": "^21.0.6",
     "@angular/platform-browser": "^21.0.6",
+    "@swc/core": "^1.15.7",
+    "ng-packagr": "^21.0.1",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   },
   "scripts": {
-    "build": "tsup src/public-api.ts --format cjs,esm --dts --clean --external @angular/core,@angular/common,@kopynator/core",
+    "build": "ng-packagr -p ng-package.json",
     "release:patch": "npm version patch",
     "release:minor": "npm version minor",
     "release:major": "npm version major"

package/src/lib/kopy.directive.ts

@@ -0,0 +1,32 @@
+import { Directive, ElementRef, Input, OnChanges, SimpleChanges, effect } from '@angular/core';
+import { KopyService } from './kopy.service';
+
+@Directive({
+  selector: '[kopy]',
+  standalone: true
+})
+export class KopyDirective implements OnChanges {
+  @Input('kopy') key!: string;
+  @Input() kopyParams: Record<string, any> = {};
+
+  constructor(
+    private el: ElementRef,
+    private kopyService: KopyService
+  ) {
+    // React to signal changes in KopyService
+    effect(() => {
+      this.kopyService.currentLocale();
+      this.kopyService.isReady();
+      this.render();
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.render();
+  }
+
+  private render() {
+    if (!this.key) return;
+    this.el.nativeElement.textContent = this.kopyService.translate(this.key, this.kopyParams);
+  }
+}

package/src/lib/kopy.pipe.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { KopyService } from './kopy.service';
+
+@Pipe({
+  name: 'kopy',
+  pure: false, // Must be false to react to signal changes inside transform
+  standalone: true
+})
+export class KopyPipe implements PipeTransform {
+  constructor(
+    private kopyService: KopyService
+  ) {}
+
+  transform(key: string, params: Record<string, any> = {}): string {
+    // Establishing reactive dependencies on signals
+    const ready = this.kopyService.isReady();
+    const locale = this.kopyService.currentLocale();
+    
+    if (!ready) return key;
+
+    return this.kopyService.translate(key, params);
+  }
+}

package/src/lib/kopy.selector.component.ts

@@ -0,0 +1,164 @@
+import { Component, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KopyService } from './kopy.service';
+
+@Component({
+  selector: 'kopy-selector',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="kopy-selector-container" [class.open]="isOpen()">
+      <button class="kopy-selected-btn" (click)="toggleDropdown()">
+        <span class="flag">{{ getFlag(currentLocale()) }}</span>
+        <span class="label uppercase">{{ currentLocale() }}</span>
+        <svg class="chevron" [class.rotate]="isOpen()" viewBox="0 0 20 20" fill="currentColor">
+          <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" />
+        </svg>
+      </button>
+
+      <div class="kopy-dropdown" *ngIf="isOpen()">
+        <button 
+          *ngFor="let lang of languages()" 
+          class="kopy-dropdown-item"
+          [class.active]="lang === currentLocale()"
+          (click)="selectLanguage(lang)"
+        >
+          <span class="flag">{{ getFlag(lang) }}</span>
+          <span class="label">{{ getNativeName(lang) }}</span>
+        </button>
+      </div>
+    </div>
+  `,
+  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: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 99px;
+      color: white;
+      cursor: pointer;
+      transition: all 0.2s;
+      font-size: 11px;
+      font-weight: 700;
+      min-width: 70px;
+      justify-content: center;
+    }
+    .kopy-selected-btn:hover {
+      background: rgba(255, 255, 255, 0.1);
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+    .chevron {
+      width: 10px;
+      height: 10px;
+      opacity: 0.5;
+      transition: transform 0.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, 0.1);
+      border-radius: 12px;
+      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
+      overflow: hidden;
+      min-width: 140px;
+      z-index: 100;
+      animation: slideIn 0.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 0.2s;
+      font-size: 14px;
+    }
+    .kopy-dropdown-item:hover {
+      background: rgba(255, 255, 255, 0.05);
+      color: white;
+    }
+    .kopy-dropdown-item.active {
+      color: #38bdf8;
+      background: rgba(56, 189, 248, 0.05);
+    }
+    .label {
+      flex: 1;
+    }
+    .flag {
+      font-size: 16px;
+    }
+    @keyframes slideIn {
+      from { opacity: 0; transform: translateY(-10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+  `]
+})
+export class KopySelectorComponent {
+  private kopyService = inject(KopyService);
+  
+  public isOpen = signal(false);
+  public languages = this.kopyService.availableLanguages;
+  public currentLocale = this.kopyService.currentLocale;
+
+  private flagMap: Record<string, string> = {
+    'en': '🇺🇸',
+    'es': '🇪🇸',
+    'fr': '🇫🇷',
+    'de': '🇩🇪',
+    'it': '🇮🇹',
+    'pt': '🇵🇹',
+    'ja': '🇯🇵',
+    'zh': '🇨🇳',
+    'ru': '🇷🇺'
+  };
+
+  private nameMap: Record<string, string> = {
+    'en': 'English',
+    'es': 'Español',
+    'fr': 'Français',
+    'de': 'Deutsch',
+    'it': 'Italiano',
+    'pt': 'Português',
+    'ja': '日本語',
+    'zh': '中文',
+    'ru': 'Русский',
+    'en-us': 'English (US)'
+  };
+
+  toggleDropdown() {
+    this.isOpen.set(!this.isOpen());
+  }
+
+  selectLanguage(lang: string) {
+    this.kopyService.setLocale(lang);
+    this.isOpen.set(false);
+  }
+
+  getFlag(lang: string): string {
+    const code = lang.split('-')[0].toLowerCase();
+    return this.flagMap[code] || '🌐';
+  }
+
+  getNativeName(lang: string): string {
+    return this.nameMap[lang.toLowerCase()] || lang.toUpperCase();
+  }
+}

package/src/lib/kopy.service.ts

@@ -0,0 +1,57 @@
+import { Injectable, Inject, InjectionToken, signal, NgZone } from '@angular/core';
+import { Kopynator, KopyConfig } from '@kopynator/core';
+
+export const KOPY_CONFIG = new InjectionToken<KopyConfig>('KOPY_CONFIG');
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KopyService {
+  private kopy: Kopynator;
+  
+  // Signals for reactivity
+  public isReady = signal(false);
+  public availableLanguages = signal<string[]>([]);
+  public currentLocale = signal<string>('en');
+
+  constructor(
+    @Inject(KOPY_CONFIG) private config: KopyConfig,
+    private zone: NgZone
+  ) {
+    const savedLocale = typeof localStorage !== 'undefined' ? localStorage.getItem('kopy_locale') : null;
+    const initialLocale = savedLocale || config.defaultLocale || 'en';
+    
+    // Initialize core with the restored or default locale
+    this.kopy = new Kopynator({ ...config, defaultLocale: initialLocale });
+    this.currentLocale.set(initialLocale);
+  }
+
+  public async init(): Promise<void> {
+    await this.kopy.init();
+    
+    this.zone.run(() => {
+      this.availableLanguages.set(this.kopy.getLanguages());
+      this.isReady.set(true);
+    });
+  }
+
+  async setLocale(locale: string) {
+    await this.kopy.setLocale(locale);
+    
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem('kopy_locale', locale);
+    }
+
+    this.zone.run(() => {
+      this.currentLocale.set(locale);
+    });
+  }
+
+  translate(key: string, params: Record<string, any> = {}): string {
+    return this.kopy.translate(key, params);
+  }
+
+  getKopynator(): Kopynator {
+    return this.kopy;
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,25 @@
+import { Provider, provideAppInitializer, inject, EnvironmentProviders } from '@angular/core';
+import { KopyConfig } from '@kopynator/core';
+import { KOPY_CONFIG, KopyService } from './lib/kopy.service';
+
+export * from './lib/kopy.service';
+export * from './lib/kopy.pipe';
+export * from './lib/kopy.directive';
+export * from './lib/kopy.selector.component';
+
+/**
+ * Provides the Kopynator SDK configuration to the application.
+ */
+export function provideKopynator(config: KopyConfig): (Provider | EnvironmentProviders)[] {
+  return [
+    {
+      provide: KOPY_CONFIG,
+      useValue: config
+    },
+    KopyService,
+    provideAppInitializer(() => {
+        const kopyService = inject(KopyService);
+        return kopyService.init();
+    })
+  ];
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "node",
+    "lib": ["ES2022", "DOM"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "useDefineForClassFields": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/dist/public-api.d.mts

@@ -1,35 +0,0 @@
-import * as _angular_core from '@angular/core';
-import { InjectionToken, EnvironmentProviders, PipeTransform, ChangeDetectorRef, OnChanges, ElementRef, SimpleChanges } from '@angular/core';
-import { KopyConfig } from '@kopynator/core';
-
-declare const KOPY_CONFIG: InjectionToken<KopyConfig>;
-declare class KopyService {
-    private config;
-    private kopy;
-    isReady: _angular_core.WritableSignal<boolean>;
-    constructor(config: KopyConfig);
-    private init;
-    translate(key: string, params?: Record<string, any>): string;
-    setLocale(locale: string): Promise<void>;
-    t(key: string, params?: Record<string, any>): string;
-}
-declare function provideKopynator(config: KopyConfig): EnvironmentProviders;
-
-declare class KopyPipe implements PipeTransform {
-    private kopyService;
-    private cdr;
-    constructor(kopyService: KopyService, cdr: ChangeDetectorRef);
-    transform(key: string, params?: Record<string, any>): string;
-}
-
-declare class KopyDirective implements OnChanges {
-    private el;
-    private kopyService;
-    key: string;
-    kopyParams: Record<string, any>;
-    constructor(el: ElementRef, kopyService: KopyService);
-    ngOnChanges(changes: SimpleChanges): void;
-    private render;
-}
-
-export { KOPY_CONFIG, KopyDirective, KopyPipe, KopyService, provideKopynator };

package/dist/public-api.d.ts

@@ -1,35 +0,0 @@
-import * as _angular_core from '@angular/core';
-import { InjectionToken, EnvironmentProviders, PipeTransform, ChangeDetectorRef, OnChanges, ElementRef, SimpleChanges } from '@angular/core';
-import { KopyConfig } from '@kopynator/core';
-
-declare const KOPY_CONFIG: InjectionToken<KopyConfig>;
-declare class KopyService {
-    private config;
-    private kopy;
-    isReady: _angular_core.WritableSignal<boolean>;
-    constructor(config: KopyConfig);
-    private init;
-    translate(key: string, params?: Record<string, any>): string;
-    setLocale(locale: string): Promise<void>;
-    t(key: string, params?: Record<string, any>): string;
-}
-declare function provideKopynator(config: KopyConfig): EnvironmentProviders;
-
-declare class KopyPipe implements PipeTransform {
-    private kopyService;
-    private cdr;
-    constructor(kopyService: KopyService, cdr: ChangeDetectorRef);
-    transform(key: string, params?: Record<string, any>): string;
-}
-
-declare class KopyDirective implements OnChanges {
-    private el;
-    private kopyService;
-    key: string;
-    kopyParams: Record<string, any>;
-    constructor(el: ElementRef, kopyService: KopyService);
-    ngOnChanges(changes: SimpleChanges): void;
-    private render;
-}
-
-export { KOPY_CONFIG, KopyDirective, KopyPipe, KopyService, provideKopynator };

package/dist/public-api.js

@@ -1,134 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-var __decorateParam = (index, decorator) => (target, key) => decorator(target, key, index);
-
-// src/public-api.ts
-var public_api_exports = {};
-__export(public_api_exports, {
-  KOPY_CONFIG: () => KOPY_CONFIG,
-  KopyDirective: () => KopyDirective,
-  KopyPipe: () => KopyPipe,
-  KopyService: () => KopyService,
-  provideKopynator: () => provideKopynator
-});
-module.exports = __toCommonJS(public_api_exports);
-
-// src/lib/kopy.service.ts
-var import_core = require("@angular/core");
-var import_core2 = require("@kopynator/core");
-var KOPY_CONFIG = new import_core.InjectionToken("KOPY_CONFIG");
-var KopyService = class {
-  constructor(config) {
-    this.config = config;
-    this.isReady = (0, import_core.signal)(false);
-    this.kopy = new import_core2.Kopynator(config);
-    this.init();
-  }
-  async init() {
-    await this.kopy.init();
-    this.isReady.set(true);
-  }
-  translate(key, params = {}) {
-    return this.kopy.translate(key, params);
-  }
-  async setLocale(locale) {
-    this.isReady.set(false);
-    await this.kopy.setLocale(locale);
-    this.isReady.set(true);
-  }
-  t(key, params = {}) {
-    return this.translate(key, params);
-  }
-};
-KopyService = __decorateClass([
-  (0, import_core.Injectable)({
-    providedIn: "root"
-  }),
-  __decorateParam(0, (0, import_core.Inject)(KOPY_CONFIG))
-], KopyService);
-function provideKopynator(config) {
-  return (0, import_core.makeEnvironmentProviders)([
-    { provide: KOPY_CONFIG, useValue: config },
-    KopyService
-  ]);
-}
-
-// src/lib/kopy.pipe.ts
-var import_core3 = require("@angular/core");
-var KopyPipe = class {
-  constructor(kopyService, cdr) {
-    this.kopyService = kopyService;
-    this.cdr = cdr;
-  }
-  transform(key, params = {}) {
-    return this.kopyService.translate(key, params);
-  }
-};
-KopyPipe = __decorateClass([
-  (0, import_core3.Pipe)({
-    name: "kopy",
-    pure: false,
-    standalone: true
-  })
-], KopyPipe);
-
-// src/lib/kopy.directive.ts
-var import_core4 = require("@angular/core");
-var KopyDirective = class {
-  constructor(el, kopyService) {
-    this.el = el;
-    this.kopyService = kopyService;
-    this.kopyParams = {};
-  }
-  ngOnChanges(changes) {
-    this.render();
-  }
-  render() {
-    if (!this.key) return;
-    this.el.nativeElement.textContent = this.kopyService.translate(this.key, this.kopyParams);
-  }
-};
-__decorateClass([
-  (0, import_core4.Input)("kopy")
-], KopyDirective.prototype, "key", 2);
-__decorateClass([
-  (0, import_core4.Input)()
-], KopyDirective.prototype, "kopyParams", 2);
-KopyDirective = __decorateClass([
-  (0, import_core4.Directive)({
-    selector: "[kopy]",
-    standalone: true
-  })
-], KopyDirective);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  KOPY_CONFIG,
-  KopyDirective,
-  KopyPipe,
-  KopyService,
-  provideKopynator
-});

package/dist/public-api.mjs

@@ -1,106 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-var __decorateParam = (index, decorator) => (target, key) => decorator(target, key, index);
-
-// src/lib/kopy.service.ts
-import { Injectable, Inject, InjectionToken, signal, makeEnvironmentProviders } from "@angular/core";
-import { Kopynator } from "@kopynator/core";
-var KOPY_CONFIG = new InjectionToken("KOPY_CONFIG");
-var KopyService = class {
-  constructor(config) {
-    this.config = config;
-    this.isReady = signal(false);
-    this.kopy = new Kopynator(config);
-    this.init();
-  }
-  async init() {
-    await this.kopy.init();
-    this.isReady.set(true);
-  }
-  translate(key, params = {}) {
-    return this.kopy.translate(key, params);
-  }
-  async setLocale(locale) {
-    this.isReady.set(false);
-    await this.kopy.setLocale(locale);
-    this.isReady.set(true);
-  }
-  t(key, params = {}) {
-    return this.translate(key, params);
-  }
-};
-KopyService = __decorateClass([
-  Injectable({
-    providedIn: "root"
-  }),
-  __decorateParam(0, Inject(KOPY_CONFIG))
-], KopyService);
-function provideKopynator(config) {
-  return makeEnvironmentProviders([
-    { provide: KOPY_CONFIG, useValue: config },
-    KopyService
-  ]);
-}
-
-// src/lib/kopy.pipe.ts
-import { Pipe } from "@angular/core";
-var KopyPipe = class {
-  constructor(kopyService, cdr) {
-    this.kopyService = kopyService;
-    this.cdr = cdr;
-  }
-  transform(key, params = {}) {
-    return this.kopyService.translate(key, params);
-  }
-};
-KopyPipe = __decorateClass([
-  Pipe({
-    name: "kopy",
-    pure: false,
-    standalone: true
-  })
-], KopyPipe);
-
-// src/lib/kopy.directive.ts
-import { Directive, Input } from "@angular/core";
-var KopyDirective = class {
-  constructor(el, kopyService) {
-    this.el = el;
-    this.kopyService = kopyService;
-    this.kopyParams = {};
-  }
-  ngOnChanges(changes) {
-    this.render();
-  }
-  render() {
-    if (!this.key) return;
-    this.el.nativeElement.textContent = this.kopyService.translate(this.key, this.kopyParams);
-  }
-};
-__decorateClass([
-  Input("kopy")
-], KopyDirective.prototype, "key", 2);
-__decorateClass([
-  Input()
-], KopyDirective.prototype, "kopyParams", 2);
-KopyDirective = __decorateClass([
-  Directive({
-    selector: "[kopy]",
-    standalone: true
-  })
-], KopyDirective);
-export {
-  KOPY_CONFIG,
-  KopyDirective,
-  KopyPipe,
-  KopyService,
-  provideKopynator
-};