@bloonio/lokotro-pay 1.1.1 → 1.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bloonio/lokotro-pay",
-  "version": "1.1.1",
-  "description": "Angular SDK for Lokotro Pay - Payment processing library with multiple payment methods",
+  "version": "1.2.0",
+  "description": "Angular SDK for Lokotro Pay - Clean white-surface payment checkout with themeable brand colors and support for cards, mobile money, e-wallets, and more.",
   "keywords": [
     "angular",
     "payment",
@@ -18,9 +18,9 @@
     "url": "https://github.com/bloonio/lokotro-pay-angular.git"
   },
   "peerDependencies": {
-    "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/forms": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@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/forms": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
     "rxjs": "^7.8.0"
   },
   "dependencies": {
@@ -28,14 +28,15 @@
   },
   "sideEffects": false,
   "module": "fesm2022/bloonio-lokotro-pay.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/bloonio-lokotro-pay.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/bloonio-lokotro-pay.d.ts",
       "default": "./fesm2022/bloonio-lokotro-pay.mjs"
     }
-  }
+  },
+  "type": "module"
 }

package/{index.d.ts → types/bloonio-lokotro-pay.d.ts}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnDestroy, EventEmitter, InjectionToken, ModuleWithProviders } from '@angular/core';
+import { OnInit, OnChanges, OnDestroy, EventEmitter, ElementRef, SimpleChanges, InjectionToken, ModuleWithProviders } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { Observable } from 'rxjs';
@@ -447,14 +447,34 @@ interface LokotroOtpResendRequest {
     paymentId?: string;
 }
 /**
- * Theme configuration
+ * Theme configuration for the checkout widget.
+ *
+ * All fields are optional — anything left undefined falls back to the
+ * package's clean white default (or inherits from the host app's CSS).
+ *
+ * Pass to `<lokotro-pay-checkout [themeConfig]="...">` to brand the widget:
+ * ```ts
+ * themeConfig: LokotroPayThemeConfig = {
+ *   primaryColor: '#2563EB',
+ *   secondaryColor: '#1E40AF',
+ *   tertiaryColor: '#3BFBDA',
+ * };
+ * ```
  */
 interface LokotroPayThemeConfig {
+    /** Brand primary — primary buttons, focused inputs, key accents. */
     primaryColor?: string;
+    /** Brand secondary — gradient companion to primary, secondary actions. */
     secondaryColor?: string;
+    /** Brand tertiary — highlights, OTP focus rings, gradient end stop. */
+    tertiaryColor?: string;
+    /** @deprecated use `tertiaryColor`. Kept for backward compatibility. */
     accentColor?: string;
     backgroundColor?: string;
+    surfaceColor?: string;
     textColor?: string;
+    secondaryTextColor?: string;
+    borderColor?: string;
     errorColor?: string;
     successColor?: string;
     warningColor?: string;
@@ -927,9 +947,10 @@ declare class LokotroLocalizationService {
  * Main checkout widget with clean, theme-based design
  */
 
-declare class LokotroPayCheckoutComponent implements OnInit, OnDestroy {
+declare class LokotroPayCheckoutComponent implements OnInit, OnChanges, OnDestroy {
     private paymentService;
     localization: LokotroLocalizationService;
+    private elementRef;
     title?: string;
     titleStyle?: Record<string, string>;
     titleBackgroundColor?: string;
@@ -944,15 +965,24 @@ declare class LokotroPayCheckoutComponent implements OnInit, OnDestroy {
     error: EventEmitter<LokotroPayOnError>;
     closed: EventEmitter<void>;
     state?: LokotroPaymentState;
+    /** Default to light theme — payment widgets should look like clean white cards. */
     isDarkTheme: boolean;
     private static readonly MAX_RETRY_ATTEMPTS;
     private retryAttempts;
     private stateSubscription?;
-    constructor(paymentService: LokotroPaymentService, localization: LokotroLocalizationService);
+    constructor(paymentService: LokotroPaymentService, localization: LokotroLocalizationService, elementRef: ElementRef<HTMLElement>);
     /** Check if user has retries left */
     get hasRetriesLeft(): boolean;
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
+    /**
+     * Apply the merchant-provided theme as CSS custom properties on the
+     * checkout host element. Only sets variables for fields the merchant
+     * provided — undefined fields fall back to the package defaults defined
+     * in lokotro-pay.scss.
+     */
+    private applyThemeConfig;
     private initializeEnvironment;
     private initializeLocalization;
     private subscribeToState;
@@ -1088,6 +1118,9 @@ declare class LokotroProcessingComponent {
 /**
  * Lokotro Pay - Result Component
  * Success, Error, Warning, Info screens
+ *
+ * Designed for financial UX: clean white surface, prominent amount focal
+ * on success, filled status badge, restrained transaction-detail panel.
  */
 
 type ResultType = 'success' | 'error' | 'warning' | 'info';
@@ -1118,6 +1151,7 @@ declare class LokotroResultComponent implements OnInit, OnDestroy {
     private clearCountdown;
     private triggerAutoRedirect;
     getCountdownProgress(): number;
+    formatNumber(amount: number): string;
     formatAmount(amount: number, currency?: string): string;
     onPrimaryClick(): void;
     onSecondaryClick(): void;
@@ -1191,10 +1225,11 @@ declare class LokotroPayModule {
 
 /**
  * Lokotro Pay - Color Constants
- * Angular version of the Flutter Lokotro Pay plugin colors
- */
-/**
- * Color scheme for Lokotro Pay - matching Lokotroo App design
+ *
+ * Neutral white-background palette intended for payment surfaces.
+ * Brand colors (primary/secondary/tertiary) default to slate so the
+ * widget renders correctly with no themeConfig provided. Merchants
+ * override at runtime via `<lokotro-pay-checkout [themeConfig]>`.
  */
 declare const LokotroPayColors: {
     primary: string;
@@ -1205,6 +1240,9 @@ declare const LokotroPayColors: {
     secondaryDark: string;
     secondaryLight: string;
     secondaryVariant: string;
+    tertiary: string;
+    tertiaryDark: string;
+    tertiaryLight: string;
     accent: string;
     accentDark: string;
     accentLight: string;