@kopynator/angular 1.0.4 → 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,28 +1,15 @@
 {
   "name": "@kopynator/angular",
-  "version": "1.0.4",
-  "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.1",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
@@ -30,11 +17,12 @@
     "@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,54 +0,0 @@
-import * as _angular_core from '@angular/core';
-import { InjectionToken, NgZone, PipeTransform, OnChanges, ElementRef, SimpleChanges, Provider, EnvironmentProviders } from '@angular/core';
-import { KopyConfig, Kopynator } from '@kopynator/core';
-
-declare const KOPY_CONFIG: InjectionToken<KopyConfig>;
-declare class KopyService {
-    private config;
-    private zone;
-    private kopy;
-    isReady: _angular_core.WritableSignal<boolean>;
-    availableLanguages: _angular_core.WritableSignal<string[]>;
-    currentLocale: _angular_core.WritableSignal<string>;
-    constructor(config: KopyConfig, zone: NgZone);
-    init(): Promise<void>;
-    setLocale(locale: string): Promise<void>;
-    translate(key: string, params?: Record<string, any>): string;
-    getKopynator(): Kopynator;
-}
-
-declare class KopyPipe implements PipeTransform {
-    private kopyService;
-    constructor(kopyService: KopyService);
-    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;
-}
-
-declare class KopySelectorComponent {
-    private kopyService;
-    isOpen: _angular_core.WritableSignal<boolean>;
-    languages: _angular_core.WritableSignal<string[]>;
-    currentLocale: _angular_core.WritableSignal<string>;
-    private flagMap;
-    private nameMap;
-    toggleDropdown(): void;
-    selectLanguage(lang: string): void;
-    getFlag(lang: string): string;
-    getNativeName(lang: string): string;
-}
-
-/**
- * Provides the Kopynator SDK configuration to the application.
- */
-declare function provideKopynator(config: KopyConfig): (Provider | EnvironmentProviders)[];
-
-export { KOPY_CONFIG, KopyDirective, KopyPipe, KopySelectorComponent, KopyService, provideKopynator };

package/dist/public-api.d.ts

@@ -1,54 +0,0 @@
-import * as _angular_core from '@angular/core';
-import { InjectionToken, NgZone, PipeTransform, OnChanges, ElementRef, SimpleChanges, Provider, EnvironmentProviders } from '@angular/core';
-import { KopyConfig, Kopynator } from '@kopynator/core';
-
-declare const KOPY_CONFIG: InjectionToken<KopyConfig>;
-declare class KopyService {
-    private config;
-    private zone;
-    private kopy;
-    isReady: _angular_core.WritableSignal<boolean>;
-    availableLanguages: _angular_core.WritableSignal<string[]>;
-    currentLocale: _angular_core.WritableSignal<string>;
-    constructor(config: KopyConfig, zone: NgZone);
-    init(): Promise<void>;
-    setLocale(locale: string): Promise<void>;
-    translate(key: string, params?: Record<string, any>): string;
-    getKopynator(): Kopynator;
-}
-
-declare class KopyPipe implements PipeTransform {
-    private kopyService;
-    constructor(kopyService: KopyService);
-    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;
-}
-
-declare class KopySelectorComponent {
-    private kopyService;
-    isOpen: _angular_core.WritableSignal<boolean>;
-    languages: _angular_core.WritableSignal<string[]>;
-    currentLocale: _angular_core.WritableSignal<string>;
-    private flagMap;
-    private nameMap;
-    toggleDropdown(): void;
-    selectLanguage(lang: string): void;
-    getFlag(lang: string): string;
-    getNativeName(lang: string): string;
-}
-
-/**
- * Provides the Kopynator SDK configuration to the application.
- */
-declare function provideKopynator(config: KopyConfig): (Provider | EnvironmentProviders)[];
-
-export { KOPY_CONFIG, KopyDirective, KopyPipe, KopySelectorComponent, KopyService, provideKopynator };

package/dist/public-api.js

@@ -1,406 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-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);
-
-// src/public-api.ts
-var public_api_exports = {};
-__export(public_api_exports, {
-  KOPY_CONFIG: () => KOPY_CONFIG,
-  KopyDirective: () => KopyDirective,
-  KopyPipe: () => KopyPipe,
-  KopySelectorComponent: () => KopySelectorComponent,
-  KopyService: () => KopyService,
-  provideKopynator: () => provideKopynator
-});
-module.exports = __toCommonJS(public_api_exports);
-var import_core6 = require("@angular/core");
-
-// src/lib/kopy.service.ts
-var import_core = require("@angular/core");
-var import_core2 = require("@kopynator/core");
-function _ts_decorate(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;
-}
-__name(_ts_decorate, "_ts_decorate");
-function _ts_metadata(k, v) {
-  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-}
-__name(_ts_metadata, "_ts_metadata");
-function _ts_param(paramIndex, decorator) {
-  return function(target, key) {
-    decorator(target, key, paramIndex);
-  };
-}
-__name(_ts_param, "_ts_param");
-var KOPY_CONFIG = new import_core.InjectionToken("KOPY_CONFIG");
-var KopyService = class {
-  static {
-    __name(this, "KopyService");
-  }
-  config;
-  zone;
-  kopy;
-  // Signals for reactivity
-  isReady = (0, import_core.signal)(false);
-  availableLanguages = (0, import_core.signal)([]);
-  currentLocale = (0, import_core.signal)("en");
-  constructor(config, zone) {
-    this.config = config;
-    this.zone = zone;
-    const savedLocale = typeof localStorage !== "undefined" ? localStorage.getItem("kopy_locale") : null;
-    const initialLocale = savedLocale || config.defaultLocale || "en";
-    this.kopy = new import_core2.Kopynator({
-      ...config,
-      defaultLocale: initialLocale
-    });
-    this.currentLocale.set(initialLocale);
-  }
-  async init() {
-    await this.kopy.init();
-    this.zone.run(() => {
-      this.availableLanguages.set(this.kopy.getLanguages());
-      this.isReady.set(true);
-    });
-  }
-  async setLocale(locale) {
-    await this.kopy.setLocale(locale);
-    if (typeof localStorage !== "undefined") {
-      localStorage.setItem("kopy_locale", locale);
-    }
-    this.zone.run(() => {
-      this.currentLocale.set(locale);
-    });
-  }
-  translate(key, params = {}) {
-    return this.kopy.translate(key, params);
-  }
-  getKopynator() {
-    return this.kopy;
-  }
-};
-KopyService = _ts_decorate([
-  (0, import_core.Injectable)({
-    providedIn: "root"
-  }),
-  _ts_param(0, (0, import_core.Inject)(KOPY_CONFIG)),
-  _ts_metadata("design:type", Function),
-  _ts_metadata("design:paramtypes", [
-    typeof import_core2.KopyConfig === "undefined" ? Object : import_core2.KopyConfig,
-    typeof import_core.NgZone === "undefined" ? Object : import_core.NgZone
-  ])
-], KopyService);
-
-// src/lib/kopy.pipe.ts
-var import_core3 = require("@angular/core");
-function _ts_decorate2(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;
-}
-__name(_ts_decorate2, "_ts_decorate");
-function _ts_metadata2(k, v) {
-  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-}
-__name(_ts_metadata2, "_ts_metadata");
-var KopyPipe = class {
-  static {
-    __name(this, "KopyPipe");
-  }
-  kopyService;
-  constructor(kopyService) {
-    this.kopyService = kopyService;
-  }
-  transform(key, params = {}) {
-    const ready = this.kopyService.isReady();
-    const locale = this.kopyService.currentLocale();
-    if (!ready) return key;
-    return this.kopyService.translate(key, params);
-  }
-};
-KopyPipe = _ts_decorate2([
-  (0, import_core3.Pipe)({
-    name: "kopy",
-    pure: false,
-    standalone: true
-  }),
-  _ts_metadata2("design:type", Function),
-  _ts_metadata2("design:paramtypes", [
-    typeof KopyService === "undefined" ? Object : KopyService
-  ])
-], KopyPipe);
-
-// src/lib/kopy.directive.ts
-var import_core4 = require("@angular/core");
-function _ts_decorate3(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;
-}
-__name(_ts_decorate3, "_ts_decorate");
-function _ts_metadata3(k, v) {
-  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-}
-__name(_ts_metadata3, "_ts_metadata");
-var KopyDirective = class {
-  static {
-    __name(this, "KopyDirective");
-  }
-  el;
-  kopyService;
-  key;
-  kopyParams = {};
-  constructor(el, kopyService) {
-    this.el = el;
-    this.kopyService = kopyService;
-    (0, import_core4.effect)(() => {
-      this.kopyService.currentLocale();
-      this.kopyService.isReady();
-      this.render();
-    });
-  }
-  ngOnChanges(changes) {
-    this.render();
-  }
-  render() {
-    if (!this.key) return;
-    this.el.nativeElement.textContent = this.kopyService.translate(this.key, this.kopyParams);
-  }
-};
-_ts_decorate3([
-  (0, import_core4.Input)("kopy"),
-  _ts_metadata3("design:type", String)
-], KopyDirective.prototype, "key", void 0);
-_ts_decorate3([
-  (0, import_core4.Input)(),
-  _ts_metadata3("design:type", typeof Record === "undefined" ? Object : Record)
-], KopyDirective.prototype, "kopyParams", void 0);
-KopyDirective = _ts_decorate3([
-  (0, import_core4.Directive)({
-    selector: "[kopy]",
-    standalone: true
-  }),
-  _ts_metadata3("design:type", Function),
-  _ts_metadata3("design:paramtypes", [
-    typeof import_core4.ElementRef === "undefined" ? Object : import_core4.ElementRef,
-    typeof KopyService === "undefined" ? Object : KopyService
-  ])
-], KopyDirective);
-
-// src/lib/kopy.selector.component.ts
-var import_core5 = require("@angular/core");
-var import_common = require("@angular/common");
-function _ts_decorate4(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;
-}
-__name(_ts_decorate4, "_ts_decorate");
-var KopySelectorComponent = class {
-  static {
-    __name(this, "KopySelectorComponent");
-  }
-  kopyService = (0, import_core5.inject)(KopyService);
-  isOpen = (0, import_core5.signal)(false);
-  languages = this.kopyService.availableLanguages;
-  currentLocale = this.kopyService.currentLocale;
-  flagMap = {
-    "en": "\u{1F1FA}\u{1F1F8}",
-    "es": "\u{1F1EA}\u{1F1F8}",
-    "fr": "\u{1F1EB}\u{1F1F7}",
-    "de": "\u{1F1E9}\u{1F1EA}",
-    "it": "\u{1F1EE}\u{1F1F9}",
-    "pt": "\u{1F1F5}\u{1F1F9}",
-    "ja": "\u{1F1EF}\u{1F1F5}",
-    "zh": "\u{1F1E8}\u{1F1F3}",
-    "ru": "\u{1F1F7}\u{1F1FA}"
-  };
-  nameMap = {
-    "en": "English",
-    "es": "Espa\xF1ol",
-    "fr": "Fran\xE7ais",
-    "de": "Deutsch",
-    "it": "Italiano",
-    "pt": "Portugu\xEAs",
-    "ja": "\u65E5\u672C\u8A9E",
-    "zh": "\u4E2D\u6587",
-    "ru": "\u0420\u0443\u0441\u0441\u043A\u0438\u0439",
-    "en-us": "English (US)"
-  };
-  toggleDropdown() {
-    this.isOpen.set(!this.isOpen());
-  }
-  selectLanguage(lang) {
-    this.kopyService.setLocale(lang);
-    this.isOpen.set(false);
-  }
-  getFlag(lang) {
-    const code = lang.split("-")[0].toLowerCase();
-    return this.flagMap[code] || "\u{1F310}";
-  }
-  getNativeName(lang) {
-    return this.nameMap[lang.toLowerCase()] || lang.toUpperCase();
-  }
-};
-KopySelectorComponent = _ts_decorate4([
-  (0, import_core5.Component)({
-    selector: "kopy-selector",
-    standalone: true,
-    imports: [
-      import_common.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); }
-    }
-  `
-    ]
-  })
-], KopySelectorComponent);
-
-// src/public-api.ts
-function provideKopynator(config) {
-  return [
-    {
-      provide: KOPY_CONFIG,
-      useValue: config
-    },
-    KopyService,
-    (0, import_core6.provideAppInitializer)(() => {
-      const kopyService = (0, import_core6.inject)(KopyService);
-      return kopyService.init();
-    })
-  ];
-}
-__name(provideKopynator, "provideKopynator");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  KOPY_CONFIG,
-  KopyDirective,
-  KopyPipe,
-  KopySelectorComponent,
-  KopyService,
-  provideKopynator
-});

package/dist/public-api.mjs

@@ -1,378 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
-// src/public-api.ts
-import { provideAppInitializer, inject as inject2 } from "@angular/core";
-
-// src/lib/kopy.service.ts
-import { Injectable, Inject, InjectionToken, signal, NgZone } from "@angular/core";
-import { Kopynator, KopyConfig } from "@kopynator/core";
-function _ts_decorate(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;
-}
-__name(_ts_decorate, "_ts_decorate");
-function _ts_metadata(k, v) {
-  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-}
-__name(_ts_metadata, "_ts_metadata");
-function _ts_param(paramIndex, decorator) {
-  return function(target, key) {
-    decorator(target, key, paramIndex);
-  };
-}
-__name(_ts_param, "_ts_param");
-var KOPY_CONFIG = new InjectionToken("KOPY_CONFIG");
-var KopyService = class {
-  static {
-    __name(this, "KopyService");
-  }
-  config;
-  zone;
-  kopy;
-  // Signals for reactivity
-  isReady = signal(false);
-  availableLanguages = signal([]);
-  currentLocale = signal("en");
-  constructor(config, zone) {
-    this.config = config;
-    this.zone = zone;
-    const savedLocale = typeof localStorage !== "undefined" ? localStorage.getItem("kopy_locale") : null;
-    const initialLocale = savedLocale || config.defaultLocale || "en";
-    this.kopy = new Kopynator({
-      ...config,
-      defaultLocale: initialLocale
-    });
-    this.currentLocale.set(initialLocale);
-  }
-  async init() {
-    await this.kopy.init();
-    this.zone.run(() => {
-      this.availableLanguages.set(this.kopy.getLanguages());
-      this.isReady.set(true);
-    });
-  }
-  async setLocale(locale) {
-    await this.kopy.setLocale(locale);
-    if (typeof localStorage !== "undefined") {
-      localStorage.setItem("kopy_locale", locale);
-    }
-    this.zone.run(() => {
-      this.currentLocale.set(locale);
-    });
-  }
-  translate(key, params = {}) {
-    return this.kopy.translate(key, params);
-  }
-  getKopynator() {
-    return this.kopy;
-  }
-};
-KopyService = _ts_decorate([
-  Injectable({
-    providedIn: "root"
-  }),
-  _ts_param(0, Inject(KOPY_CONFIG)),
-  _ts_metadata("design:type", Function),
-  _ts_metadata("design:paramtypes", [
-    typeof KopyConfig === "undefined" ? Object : KopyConfig,
-    typeof NgZone === "undefined" ? Object : NgZone
-  ])
-], KopyService);
-
-// src/lib/kopy.pipe.ts
-import { Pipe } from "@angular/core";
-function _ts_decorate2(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;
-}
-__name(_ts_decorate2, "_ts_decorate");
-function _ts_metadata2(k, v) {
-  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-}
-__name(_ts_metadata2, "_ts_metadata");
-var KopyPipe = class {
-  static {
-    __name(this, "KopyPipe");
-  }
-  kopyService;
-  constructor(kopyService) {
-    this.kopyService = kopyService;
-  }
-  transform(key, params = {}) {
-    const ready = this.kopyService.isReady();
-    const locale = this.kopyService.currentLocale();
-    if (!ready) return key;
-    return this.kopyService.translate(key, params);
-  }
-};
-KopyPipe = _ts_decorate2([
-  Pipe({
-    name: "kopy",
-    pure: false,
-    standalone: true
-  }),
-  _ts_metadata2("design:type", Function),
-  _ts_metadata2("design:paramtypes", [
-    typeof KopyService === "undefined" ? Object : KopyService
-  ])
-], KopyPipe);
-
-// src/lib/kopy.directive.ts
-import { Directive, ElementRef, Input, effect } from "@angular/core";
-function _ts_decorate3(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;
-}
-__name(_ts_decorate3, "_ts_decorate");
-function _ts_metadata3(k, v) {
-  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-}
-__name(_ts_metadata3, "_ts_metadata");
-var KopyDirective = class {
-  static {
-    __name(this, "KopyDirective");
-  }
-  el;
-  kopyService;
-  key;
-  kopyParams = {};
-  constructor(el, kopyService) {
-    this.el = el;
-    this.kopyService = kopyService;
-    effect(() => {
-      this.kopyService.currentLocale();
-      this.kopyService.isReady();
-      this.render();
-    });
-  }
-  ngOnChanges(changes) {
-    this.render();
-  }
-  render() {
-    if (!this.key) return;
-    this.el.nativeElement.textContent = this.kopyService.translate(this.key, this.kopyParams);
-  }
-};
-_ts_decorate3([
-  Input("kopy"),
-  _ts_metadata3("design:type", String)
-], KopyDirective.prototype, "key", void 0);
-_ts_decorate3([
-  Input(),
-  _ts_metadata3("design:type", typeof Record === "undefined" ? Object : Record)
-], KopyDirective.prototype, "kopyParams", void 0);
-KopyDirective = _ts_decorate3([
-  Directive({
-    selector: "[kopy]",
-    standalone: true
-  }),
-  _ts_metadata3("design:type", Function),
-  _ts_metadata3("design:paramtypes", [
-    typeof ElementRef === "undefined" ? Object : ElementRef,
-    typeof KopyService === "undefined" ? Object : KopyService
-  ])
-], KopyDirective);
-
-// src/lib/kopy.selector.component.ts
-import { Component, inject, signal as signal2 } from "@angular/core";
-import { CommonModule } from "@angular/common";
-function _ts_decorate4(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;
-}
-__name(_ts_decorate4, "_ts_decorate");
-var KopySelectorComponent = class {
-  static {
-    __name(this, "KopySelectorComponent");
-  }
-  kopyService = inject(KopyService);
-  isOpen = signal2(false);
-  languages = this.kopyService.availableLanguages;
-  currentLocale = this.kopyService.currentLocale;
-  flagMap = {
-    "en": "\u{1F1FA}\u{1F1F8}",
-    "es": "\u{1F1EA}\u{1F1F8}",
-    "fr": "\u{1F1EB}\u{1F1F7}",
-    "de": "\u{1F1E9}\u{1F1EA}",
-    "it": "\u{1F1EE}\u{1F1F9}",
-    "pt": "\u{1F1F5}\u{1F1F9}",
-    "ja": "\u{1F1EF}\u{1F1F5}",
-    "zh": "\u{1F1E8}\u{1F1F3}",
-    "ru": "\u{1F1F7}\u{1F1FA}"
-  };
-  nameMap = {
-    "en": "English",
-    "es": "Espa\xF1ol",
-    "fr": "Fran\xE7ais",
-    "de": "Deutsch",
-    "it": "Italiano",
-    "pt": "Portugu\xEAs",
-    "ja": "\u65E5\u672C\u8A9E",
-    "zh": "\u4E2D\u6587",
-    "ru": "\u0420\u0443\u0441\u0441\u043A\u0438\u0439",
-    "en-us": "English (US)"
-  };
-  toggleDropdown() {
-    this.isOpen.set(!this.isOpen());
-  }
-  selectLanguage(lang) {
-    this.kopyService.setLocale(lang);
-    this.isOpen.set(false);
-  }
-  getFlag(lang) {
-    const code = lang.split("-")[0].toLowerCase();
-    return this.flagMap[code] || "\u{1F310}";
-  }
-  getNativeName(lang) {
-    return this.nameMap[lang.toLowerCase()] || lang.toUpperCase();
-  }
-};
-KopySelectorComponent = _ts_decorate4([
-  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); }
-    }
-  `
-    ]
-  })
-], KopySelectorComponent);
-
-// src/public-api.ts
-function provideKopynator(config) {
-  return [
-    {
-      provide: KOPY_CONFIG,
-      useValue: config
-    },
-    KopyService,
-    provideAppInitializer(() => {
-      const kopyService = inject2(KopyService);
-      return kopyService.init();
-    })
-  ];
-}
-__name(provideKopynator, "provideKopynator");
-export {
-  KOPY_CONFIG,
-  KopyDirective,
-  KopyPipe,
-  KopySelectorComponent,
-  KopyService,
-  provideKopynator
-};