@apolopay-sdk/angular 1.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,2 @@
+[?9001h[?1004h[?25l> @apolopay-sdk/angular@0.1.0 build D:\Repositories\DV Consultores\Apolo Pay\apolo-pay-sdk\javascript-sdk\packages\angular
+> ngc -p tsconfig.lib.json]0;C:\WINDOWS\system32\cmd.exe[?25h]0;Angular Compiler (ngc)[?9001l[?1004l

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @apolopay-sdk/angular
+
+## 1.0.0
+
+### Major Changes
+
+- 220bf24: initial version
+
+### Patch Changes
+
+- Updated dependencies [220bf24]
+  - @apolopay-sdk/ui@1.0.0

package/README.md

@@ -0,0 +1,63 @@
+# @apolopay-sdk/angular
+
+Angular wrapper for the Apolo Pay SDK. Provides a component to integrate the Apolo Pay payment button into Angular applications.
+
+## Installation
+
+```bash
+npm install @apolopay-sdk/angular
+# or
+pnpm add @apolopay-sdk/angular
+```
+
+## Usage
+
+### 1. Add the component to your Module or Component
+
+```typescript
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { ApoloPayButtonComponent, ApoloPayClient, type ClientResponse, type ClientError } from '@apolopay-sdk/angular';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [ApoloPayButtonComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Required for Web Components
+  template: `
+    <apolopay-button
+      [client]="client"
+      [processId]="processId"
+      productTitle="Order #ANG-1"
+      (success)="handleSuccess($event)"
+      (error)="handleError($event)"
+    ></apolopay-button>
+  `
+})
+export class AppComponent {
+  client = new ApoloPayClient({ publicKey: 'pk_test_...' });
+  processId = 'your-process-id';
+
+  handleSuccess(response: ClientResponse) {
+    console.log('Payment successful!', response);
+  }
+
+  handleError(error: ClientError) {
+    console.error('Payment error:', error);
+  }
+}
+```
+
+## Props and Events
+
+- `[client]`: (ApoloPayClient) **Required**.
+- `[processId]`: (string) **Required**.
+- `[productTitle]`: (string)
+- `[lang]`: ('es' | 'en')
+- `[label]`: (string)
+- `[barrierDismissible]`: (boolean)
+- `(success)`: Event fired on success.
+- `(error)`: Event fired on error.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/apolopay-button.module';
+export * from './lib/apolopay-button.component';
+export * from '@apolopay-sdk/ui';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC;AAGhD,cAAc,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+/*
+ * API Pública de @apolopay-sdk/angular
+ */
+export * from './lib/apolopay-button.module';
+export * from './lib/apolopay-button.component';
+// Re-exporta los tipos
+export * from '@apolopay-sdk/ui';

package/dist/lib/apolopay-button.component.d.ts

@@ -0,0 +1,20 @@
+import { EventEmitter } from '@angular/core';
+import type { ClientResponse, ClientError, Locale, ApoloPayClient } from '@apolopay-sdk/ui';
+import * as i0 from "@angular/core";
+export declare class ApoloPayButtonComponent {
+    client?: ApoloPayClient;
+    processId?: string;
+    productTitle?: string;
+    lang?: Locale;
+    label?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    barrierDismissible?: boolean;
+    success: EventEmitter<ClientResponse<any>>;
+    error: EventEmitter<ClientError>;
+    onSuccess(event: Event): void;
+    onError(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ApoloPayButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ApoloPayButtonComponent, "apolopay-button-component", never, { "client": { "alias": "client"; "required": false; }; "processId": { "alias": "processId"; "required": false; }; "productTitle": { "alias": "productTitle"; "required": false; }; "lang": { "alias": "lang"; "required": false; }; "label": { "alias": "label"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "barrierDismissible": { "alias": "barrierDismissible"; "required": false; }; }, { "success": "success"; "error": "error"; }, never, ["*"], true, never>;
+}
+//# sourceMappingURL=apolopay-button.component.d.ts.map

package/dist/lib/apolopay-button.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apolopay-button.component.d.ts","sourceRoot":"","sources":["../../src/lib/apolopay-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAA0B,MAAM,eAAe,CAAC;AAC/F,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;;AAE5F,qBA6Ba,uBAAuB;IAEzB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAG5B,OAAO,oCAAsC;IAC7C,KAAK,4BAAmC;IAGlD,SAAS,CAAC,KAAK,EAAE,KAAK;IAKtB,OAAO,CAAC,KAAK,EAAE,KAAK;yCArBT,uBAAuB;2CAAvB,uBAAuB;CAwBnC"}

package/dist/lib/apolopay-button.component.js

@@ -0,0 +1,71 @@
+import { Component, Input, Output, EventEmitter, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+export class ApoloPayButtonComponent {
+    constructor() {
+        // 6. Define los Outputs (eventos)
+        this.success = new EventEmitter();
+        this.error = new EventEmitter();
+    }
+    // 7. Traduce el CustomEvent ($event) a un EventEmitter de Angular
+    onSuccess(event) {
+        // $event.detail contiene los datos del evento del Web Component
+        this.success.emit(event.detail);
+    }
+    onError(event) {
+        this.error.emit(event.detail);
+    }
+    static { this.ɵfac = function ApoloPayButtonComponent_Factory(t) { return new (t || ApoloPayButtonComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApoloPayButtonComponent, selectors: [["apolopay-button-component"]], inputs: { client: "client", processId: "processId", productTitle: "productTitle", lang: "lang", label: "label", loading: "loading", disabled: "disabled", barrierDismissible: "barrierDismissible" }, outputs: { success: "success", error: "error" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0, decls: 2, vars: 8, consts: [[3, "success", "error", "client", "label", "lang", "loading", "disabled"]], template: function ApoloPayButtonComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "apolopay-button", 0);
+            i0.ɵɵlistener("success", function ApoloPayButtonComponent_Template_apolopay_button_success_0_listener($event) { return ctx.onSuccess($event); })("error", function ApoloPayButtonComponent_Template_apolopay_button_error_0_listener($event) { return ctx.onError($event); });
+            i0.ɵɵprojection(1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("client", ctx.client)("label", ctx.label)("lang", ctx.lang)("loading", ctx.loading)("disabled", ctx.disabled);
+            i0.ɵɵattribute("process-id", ctx.processId)("product-title", ctx.productTitle)("barrier-dismissible", ctx.barrierDismissible ? "" : null);
+        } }, styles: ["[_nghost-%COMP%] { display: inline-block; }\n\n    apolopay-button[_ngcontent-%COMP%] { display: block; }"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApoloPayButtonComponent, [{
+        type: Component,
+        args: [{ selector: 'apolopay-button-component', standalone: true, template: `
+    <apolopay-button
+      [client]="client"
+      [attr.process-id]="processId"
+      [label]="label"
+      [lang]="lang"
+      [attr.product-title]="productTitle"
+      [loading]="loading"
+      [disabled]="disabled"
+      [attr.barrier-dismissible]="barrierDismissible ? '' : null"
+      (success)="onSuccess($event)"
+      (error)="onError($event)"
+    >
+      <ng-content></ng-content>
+    </apolopay-button>
+  `, schemas: [
+                    CUSTOM_ELEMENTS_SCHEMA
+                ], styles: ["\n    :host { display: inline-block; }\n\n    apolopay-button { display: block; }\n  "] }]
+    }], null, { client: [{
+            type: Input
+        }], processId: [{
+            type: Input
+        }], productTitle: [{
+            type: Input
+        }], lang: [{
+            type: Input
+        }], label: [{
+            type: Input
+        }], loading: [{
+            type: Input
+        }], disabled: [{
+            type: Input
+        }], barrierDismissible: [{
+            type: Input
+        }], success: [{
+            type: Output
+        }], error: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ApoloPayButtonComponent, { className: "ApoloPayButtonComponent", filePath: "lib\\apolopay-button.component.ts", lineNumber: 33 }); })();

package/dist/lib/apolopay-button.module.d.ts

@@ -0,0 +1,10 @@
+import '@apolopay-sdk/ui';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./apolopay-button.component";
+export declare class ApoloPayButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ApoloPayButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ApoloPayButtonModule, never, [typeof i1.CommonModule, typeof i2.ApoloPayButtonComponent], [typeof i2.ApoloPayButtonComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ApoloPayButtonModule>;
+}
+//# sourceMappingURL=apolopay-button.module.d.ts.map

package/dist/lib/apolopay-button.module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apolopay-button.module.d.ts","sourceRoot":"","sources":["../../src/lib/apolopay-button.module.ts"],"names":[],"mappings":"AAGA,OAAO,kBAAkB,CAAC;;;;AAE1B,qBAaa,oBAAoB;yCAApB,oBAAoB;0CAApB,oBAAoB;0CAApB,oBAAoB;CAAI"}

package/dist/lib/apolopay-button.module.js

@@ -0,0 +1,28 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ApoloPayButtonComponent } from './apolopay-button.component';
+import '@apolopay-sdk/ui';
+import * as i0 from "@angular/core";
+export class ApoloPayButtonModule {
+    static { this.ɵfac = function ApoloPayButtonModule_Factory(t) { return new (t || ApoloPayButtonModule)(); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ApoloPayButtonModule }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApoloPayButtonModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [],
+                imports: [
+                    CommonModule,
+                    ApoloPayButtonComponent
+                ],
+                exports: [
+                    ApoloPayButtonComponent
+                ],
+                schemas: [
+                    CUSTOM_ELEMENTS_SCHEMA
+                ]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ApoloPayButtonModule, { imports: [CommonModule,
+        ApoloPayButtonComponent], exports: [ApoloPayButtonComponent] }); })();

package/dist/lib/payment-button.component.d.ts

@@ -0,0 +1,20 @@
+import { EventEmitter } from '@angular/core';
+import type { ClientResponse, ClientError, Locale, ApoloPayClient } from '@payment-button-sdk/ui';
+import * as i0 from "@angular/core";
+export declare class PaymentButtonComponent {
+    client?: ApoloPayClient;
+    processId?: string;
+    productTitle?: string;
+    lang?: Locale;
+    label?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    barrierDismissible?: boolean;
+    success: EventEmitter<ClientResponse<any>>;
+    error: EventEmitter<ClientError>;
+    onSuccess(event: Event): void;
+    onError(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaymentButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaymentButtonComponent, "apolo-payment-button", never, { "client": { "alias": "client"; "required": false; }; "processId": { "alias": "processId"; "required": false; }; "productTitle": { "alias": "productTitle"; "required": false; }; "lang": { "alias": "lang"; "required": false; }; "label": { "alias": "label"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "barrierDismissible": { "alias": "barrierDismissible"; "required": false; }; }, { "success": "success"; "error": "error"; }, never, ["*"], true, never>;
+}
+//# sourceMappingURL=payment-button.component.d.ts.map

package/dist/lib/payment-button.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-button.component.d.ts","sourceRoot":"","sources":["../../src/lib/payment-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAA0B,MAAM,eAAe,CAAC;AAC/F,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;;AAElG,qBA6Ba,sBAAsB;IAExB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAG5B,OAAO,oCAAsC;IAC7C,KAAK,4BAAmC;IAGlD,SAAS,CAAC,KAAK,EAAE,KAAK;IAKtB,OAAO,CAAC,KAAK,EAAE,KAAK;yCArBT,sBAAsB;2CAAtB,sBAAsB;CAwBlC"}

package/dist/lib/payment-button.component.js

@@ -0,0 +1,71 @@
+import { Component, Input, Output, EventEmitter, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+export class PaymentButtonComponent {
+    constructor() {
+        // 6. Define los Outputs (eventos)
+        this.success = new EventEmitter();
+        this.error = new EventEmitter();
+    }
+    // 7. Traduce el CustomEvent ($event) a un EventEmitter de Angular
+    onSuccess(event) {
+        // $event.detail contiene los datos del evento del Web Component
+        this.success.emit(event.detail);
+    }
+    onError(event) {
+        this.error.emit(event.detail);
+    }
+    static { this.ɵfac = function PaymentButtonComponent_Factory(t) { return new (t || PaymentButtonComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PaymentButtonComponent, selectors: [["apolo-payment-button"]], inputs: { client: "client", processId: "processId", productTitle: "productTitle", lang: "lang", label: "label", loading: "loading", disabled: "disabled", barrierDismissible: "barrierDismissible" }, outputs: { success: "success", error: "error" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0, decls: 2, vars: 8, consts: [[3, "success", "error", "client", "label", "lang", "loading", "disabled"]], template: function PaymentButtonComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "payment-button", 0);
+            i0.ɵɵlistener("success", function PaymentButtonComponent_Template_payment_button_success_0_listener($event) { return ctx.onSuccess($event); })("error", function PaymentButtonComponent_Template_payment_button_error_0_listener($event) { return ctx.onError($event); });
+            i0.ɵɵprojection(1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("client", ctx.client)("label", ctx.label)("lang", ctx.lang)("loading", ctx.loading)("disabled", ctx.disabled);
+            i0.ɵɵattribute("process-id", ctx.processId)("product-title", ctx.productTitle)("barrier-dismissible", ctx.barrierDismissible ? "" : null);
+        } }, styles: ["[_nghost-%COMP%] { display: inline-block; }\n\n    payment-button[_ngcontent-%COMP%] { display: block; }"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaymentButtonComponent, [{
+        type: Component,
+        args: [{ selector: 'apolo-payment-button', standalone: true, template: `
+    <payment-button
+      [client]="client"
+      [attr.process-id]="processId"
+      [label]="label"
+      [lang]="lang"
+      [attr.product-title]="productTitle"
+      [loading]="loading"
+      [disabled]="disabled"
+      [attr.barrier-dismissible]="barrierDismissible ? '' : null"
+      (success)="onSuccess($event)"
+      (error)="onError($event)"
+    >
+      <ng-content></ng-content>
+    </payment-button>
+  `, schemas: [
+                    CUSTOM_ELEMENTS_SCHEMA
+                ], styles: ["\n    :host { display: inline-block; }\n\n    payment-button { display: block; }\n  "] }]
+    }], null, { client: [{
+            type: Input
+        }], processId: [{
+            type: Input
+        }], productTitle: [{
+            type: Input
+        }], lang: [{
+            type: Input
+        }], label: [{
+            type: Input
+        }], loading: [{
+            type: Input
+        }], disabled: [{
+            type: Input
+        }], barrierDismissible: [{
+            type: Input
+        }], success: [{
+            type: Output
+        }], error: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaymentButtonComponent, { className: "PaymentButtonComponent", filePath: "lib\\payment-button.component.ts", lineNumber: 33 }); })();

package/dist/lib/payment-button.module.d.ts

@@ -0,0 +1,10 @@
+import '@payment-button-sdk/ui';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./payment-button.component";
+export declare class PaymentButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaymentButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PaymentButtonModule, never, [typeof i1.CommonModule, typeof i2.PaymentButtonComponent], [typeof i2.PaymentButtonComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PaymentButtonModule>;
+}
+//# sourceMappingURL=payment-button.module.d.ts.map

package/dist/lib/payment-button.module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-button.module.d.ts","sourceRoot":"","sources":["../../src/lib/payment-button.module.ts"],"names":[],"mappings":"AAGA,OAAO,wBAAwB,CAAC;;;;AAEhC,qBAaa,mBAAmB;yCAAnB,mBAAmB;0CAAnB,mBAAmB;0CAAnB,mBAAmB;CAAI"}

package/dist/lib/payment-button.module.js

@@ -0,0 +1,28 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PaymentButtonComponent } from './payment-button.component';
+import '@payment-button-sdk/ui';
+import * as i0 from "@angular/core";
+export class PaymentButtonModule {
+    static { this.ɵfac = function PaymentButtonModule_Factory(t) { return new (t || PaymentButtonModule)(); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PaymentButtonModule }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaymentButtonModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [],
+                imports: [
+                    CommonModule,
+                    PaymentButtonComponent
+                ],
+                exports: [
+                    PaymentButtonComponent
+                ],
+                schemas: [
+                    CUSTOM_ELEMENTS_SCHEMA
+                ]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PaymentButtonModule, { imports: [CommonModule,
+        PaymentButtonComponent], exports: [PaymentButtonComponent] }); })();

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@apolopay-sdk/angular",
+  "version": "1.0.0",
+  "description": "Botón de pago de Tu Plataforma para Angular",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@apolopay-sdk/ui": "1.0.0"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=16.0.0",
+    "@angular/core": ">=16.0.0",
+    "rxjs": ">=7.0.0"
+  },
+  "devDependencies": {
+    "@angular/compiler": "17.3.0",
+    "@angular/compiler-cli": "17.3.0",
+    "@angular/core": "17.3.0",
+    "@angular/common": "17.3.0",
+    "tslib": "2.6.2",
+    "typescript": "5.4.5"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "ngc -p tsconfig.lib.json",
+    "dev": "ngc -p tsconfig.lib.json --watch"
+  }
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+/*
+ * API Pública de @apolopay-sdk/angular
+ */
+
+export * from './lib/apolopay-button.module';
+export * from './lib/apolopay-button.component';
+
+// Re-exporta los tipos
+export * from '@apolopay-sdk/ui';

package/src/lib/apolopay-button.component.ts

@@ -0,0 +1,57 @@
+import { Component, Input, Output, EventEmitter, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import type { ClientResponse, ClientError, Locale, ApoloPayClient } from '@apolopay-sdk/ui';
+
+@Component({
+  selector: 'apolopay-button-component',
+  standalone: true,
+  template: `
+    <apolopay-button
+      [client]="client"
+      [attr.process-id]="processId"
+      [label]="label"
+      [lang]="lang"
+      [attr.product-title]="productTitle"
+      [loading]="loading"
+      [disabled]="disabled"
+      [attr.barrier-dismissible]="barrierDismissible ? '' : null"
+      (success)="onSuccess($event)"
+      (error)="onError($event)"
+    >
+      <ng-content></ng-content>
+    </apolopay-button>
+  `,
+  // 4. Asegura que el wrapper se comporte como un bloque
+  styles: [`
+    :host { display: inline-block; }
+
+    apolopay-button { display: block; }
+  `],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class ApoloPayButtonComponent {
+  // 5. Define los Inputs (props)
+  @Input() client?: ApoloPayClient;
+  @Input() processId?: string;
+  @Input() productTitle?: string;
+  @Input() lang?: Locale;
+  @Input() label?: string;
+  @Input() loading?: boolean;
+  @Input() disabled?: boolean;
+  @Input() barrierDismissible?: boolean;
+
+  // 6. Define los Outputs (eventos)
+  @Output() success = new EventEmitter<ClientResponse>();
+  @Output() error = new EventEmitter<ClientError>();
+
+  // 7. Traduce el CustomEvent ($event) a un EventEmitter de Angular
+  onSuccess(event: Event) {
+    // $event.detail contiene los datos del evento del Web Component
+    this.success.emit((event as CustomEvent<ClientResponse>).detail);
+  }
+
+  onError(event: Event) {
+    this.error.emit((event as CustomEvent<ClientError>).detail);
+  }
+}

package/src/lib/apolopay-button.module.ts

@@ -0,0 +1,19 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ApoloPayButtonComponent } from './apolopay-button.component';
+import '@apolopay-sdk/ui';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    ApoloPayButtonComponent
+  ],
+  exports: [
+    ApoloPayButtonComponent
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class ApoloPayButtonModule { }

package/tsconfig.lib.json

@@ -0,0 +1,29 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "declarationMap": true,
+    "types": [],
+    "lib": ["DOM", "ES2022"],
+    "target": "ES2022",
+    "module": "es2020",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts", 
+    "**/*.spec.ts"
+  ],
+  "include": [
+    "src/**/*.ts"
+  ]
+}