@kopynator/angular 1.0.3 → 1.0.4

package/dist/public-api.d.mts

@@ -1,24 +1,25 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, EnvironmentProviders, PipeTransform, ChangeDetectorRef, OnChanges, ElementRef, SimpleChanges } from '@angular/core';
-import { KopyConfig } from '@kopynator/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>;
-    constructor(config: KopyConfig);
-    private init;
-    translate(key: string, params?: Record<string, any>): string;
+    availableLanguages: _angular_core.WritableSignal<string[]>;
+    currentLocale: _angular_core.WritableSignal<string>;
+    constructor(config: KopyConfig, zone: NgZone);
+    init(): Promise<void>;
     setLocale(locale: string): Promise<void>;
-    t(key: string, params?: Record<string, any>): string;
+    translate(key: string, params?: Record<string, any>): string;
+    getKopynator(): Kopynator;
 }
-declare function provideKopynator(config: KopyConfig): EnvironmentProviders;
 
 declare class KopyPipe implements PipeTransform {
     private kopyService;
-    private cdr;
-    constructor(kopyService: KopyService, cdr: ChangeDetectorRef);
+    constructor(kopyService: KopyService);
     transform(key: string, params?: Record<string, any>): string;
 }
 
@@ -32,4 +33,22 @@ declare class KopyDirective implements OnChanges {
     private render;
 }
 
-export { KOPY_CONFIG, KopyDirective, KopyPipe, KopyService, provideKopynator };
+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,24 +1,25 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, EnvironmentProviders, PipeTransform, ChangeDetectorRef, OnChanges, ElementRef, SimpleChanges } from '@angular/core';
-import { KopyConfig } from '@kopynator/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>;
-    constructor(config: KopyConfig);
-    private init;
-    translate(key: string, params?: Record<string, any>): string;
+    availableLanguages: _angular_core.WritableSignal<string[]>;
+    currentLocale: _angular_core.WritableSignal<string>;
+    constructor(config: KopyConfig, zone: NgZone);
+    init(): Promise<void>;
     setLocale(locale: string): Promise<void>;
-    t(key: string, params?: Record<string, any>): string;
+    translate(key: string, params?: Record<string, any>): string;
+    getKopynator(): Kopynator;
 }
-declare function provideKopynator(config: KopyConfig): EnvironmentProviders;
 
 declare class KopyPipe implements PipeTransform {
     private kopyService;
-    private cdr;
-    constructor(kopyService: KopyService, cdr: ChangeDetectorRef);
+    constructor(kopyService: KopyService);
     transform(key: string, params?: Record<string, any>): string;
 }
 
@@ -32,4 +33,22 @@ declare class KopyDirective implements OnChanges {
     private render;
 }
 
-export { KOPY_CONFIG, KopyDirective, KopyPipe, KopyService, provideKopynator };
+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

@@ -3,6 +3,7 @@ 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 });
@@ -16,15 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   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 = {};
@@ -32,77 +24,160 @@ __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 {
-  constructor(config) {
+  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.isReady = (0, import_core.signal)(false);
-    this.kopy = new import_core2.Kopynator(config);
-    this.init();
+    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.isReady.set(true);
-  }
-  translate(key, params = {}) {
-    return this.kopy.translate(key, params);
+    this.zone.run(() => {
+      this.availableLanguages.set(this.kopy.getLanguages());
+      this.isReady.set(true);
+    });
   }
   async setLocale(locale) {
-    this.isReady.set(false);
     await this.kopy.setLocale(locale);
-    this.isReady.set(true);
+    if (typeof localStorage !== "undefined") {
+      localStorage.setItem("kopy_locale", locale);
+    }
+    this.zone.run(() => {
+      this.currentLocale.set(locale);
+    });
   }
-  t(key, params = {}) {
-    return this.translate(key, params);
+  translate(key, params = {}) {
+    return this.kopy.translate(key, params);
+  }
+  getKopynator() {
+    return this.kopy;
   }
 };
-KopyService = __decorateClass([
+KopyService = _ts_decorate([
   (0, import_core.Injectable)({
     providedIn: "root"
   }),
-  __decorateParam(0, (0, import_core.Inject)(KOPY_CONFIG))
+  _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);
-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");
+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 {
-  constructor(kopyService, cdr) {
+  static {
+    __name(this, "KopyPipe");
+  }
+  kopyService;
+  constructor(kopyService) {
     this.kopyService = kopyService;
-    this.cdr = cdr;
   }
   transform(key, params = {}) {
+    const ready = this.kopyService.isReady();
+    const locale = this.kopyService.currentLocale();
+    if (!ready) return key;
     return this.kopyService.translate(key, params);
   }
 };
-KopyPipe = __decorateClass([
+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;
-    this.kopyParams = {};
+    (0, import_core4.effect)(() => {
+      this.kopyService.currentLocale();
+      this.kopyService.isReady();
+      this.render();
+    });
   }
   ngOnChanges(changes) {
     this.render();
@@ -112,23 +187,220 @@ var KopyDirective = class {
     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([
+_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,81 +1,156 @@
 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);
+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, makeEnvironmentProviders } from "@angular/core";
-import { Kopynator } from "@kopynator/core";
+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 {
-  constructor(config) {
+  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.isReady = signal(false);
-    this.kopy = new Kopynator(config);
-    this.init();
+    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.isReady.set(true);
-  }
-  translate(key, params = {}) {
-    return this.kopy.translate(key, params);
+    this.zone.run(() => {
+      this.availableLanguages.set(this.kopy.getLanguages());
+      this.isReady.set(true);
+    });
   }
   async setLocale(locale) {
-    this.isReady.set(false);
     await this.kopy.setLocale(locale);
-    this.isReady.set(true);
+    if (typeof localStorage !== "undefined") {
+      localStorage.setItem("kopy_locale", locale);
+    }
+    this.zone.run(() => {
+      this.currentLocale.set(locale);
+    });
   }
-  t(key, params = {}) {
-    return this.translate(key, params);
+  translate(key, params = {}) {
+    return this.kopy.translate(key, params);
+  }
+  getKopynator() {
+    return this.kopy;
   }
 };
-KopyService = __decorateClass([
+KopyService = _ts_decorate([
   Injectable({
     providedIn: "root"
   }),
-  __decorateParam(0, Inject(KOPY_CONFIG))
+  _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);
-function provideKopynator(config) {
-  return makeEnvironmentProviders([
-    { provide: KOPY_CONFIG, useValue: config },
-    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 {
-  constructor(kopyService, cdr) {
+  static {
+    __name(this, "KopyPipe");
+  }
+  kopyService;
+  constructor(kopyService) {
     this.kopyService = kopyService;
-    this.cdr = cdr;
   }
   transform(key, params = {}) {
+    const ready = this.kopyService.isReady();
+    const locale = this.kopyService.currentLocale();
+    if (!ready) return key;
     return this.kopyService.translate(key, params);
   }
 };
-KopyPipe = __decorateClass([
+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, Input } from "@angular/core";
+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;
-    this.kopyParams = {};
+    effect(() => {
+      this.kopyService.currentLocale();
+      this.kopyService.isReady();
+      this.render();
+    });
   }
   ngOnChanges(changes) {
     this.render();
@@ -85,22 +160,219 @@ var KopyDirective = class {
     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([
+_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
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopynator/angular",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "./dist/public-api.js",
   "module": "./dist/public-api.mjs",
   "types": "./dist/public-api.d.ts",
@@ -22,13 +22,14 @@
     "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
   },
   "dependencies": {
-    "@kopynator/core": "1.0.0",
+    "@kopynator/core": "^1.0.1",
     "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",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   },