@coinflowlabs/angular 0.2.1 → 0.2.2

package/fesm2022/coinflowlabs-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ViewChild, HostListener, Injectable, inject } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewChild, HostListener, Injectable, inject } from '@angular/core';
 import * as SolanaWeb3Js from '@solana/web3.js';
 import { Keypair, Transaction } from '@solana/web3.js';
 import base58Imported from 'bs58';
@@ -604,6 +604,7 @@ function CSSPropertiesToComponent(dict) {
 class CoinflowIFrameComponent {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
+        this.messageEvent = new EventEmitter();
     }
     ngOnInit() {
         const coinflowUrl = CoinflowUtils.getCoinflowUrl(this.iframeProps);
@@ -613,6 +614,7 @@ class CoinflowIFrameComponent {
     onPostMessage(event) {
         if (!event.origin.includes(CoinflowUtils.getCoinflowBaseUrl(this.iframeProps.env)))
             return;
+        this.messageEvent.emit(event);
         const promise = handleIFrameMessage(event.data, this.messageHandlers);
         if (!promise)
             return;
@@ -626,7 +628,7 @@ class CoinflowIFrameComponent {
         this.iframe.nativeElement.contentWindow.postMessage(message, '*');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowIFrameComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowIFrameComponent, isStandalone: true, selector: "lib-coinflow-iframe", inputs: { iframeProps: "iframeProps", messageHandlers: "messageHandlers" }, host: { listeners: { "window:message": "onPostMessage($event)" } }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: ` <iframe
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowIFrameComponent, isStandalone: true, selector: "lib-coinflow-iframe", inputs: { iframeProps: "iframeProps", messageHandlers: "messageHandlers" }, outputs: { messageEvent: "messageEvent" }, host: { listeners: { "window:message": "onPostMessage($event)" } }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: ` <iframe
     width="100%"
     height="100%"
     #iframe
@@ -658,6 +660,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                 type: Input
             }], messageHandlers: [{
                 type: Input
+            }], messageEvent: [{
+                type: Output
             }], iframe: [{
                 type: ViewChild,
                 args: ['iframe']
@@ -680,7 +684,7 @@ class CoinflowPurchaseComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowPurchaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowPurchaseComponent, isStandalone: true, selector: "lib-coinflow-purchase", inputs: { purchaseProps: "purchaseProps" }, ngImport: i0, template: ' <lib-coinflow-iframe ng-if="iframeProps && messageHandlers" [iframeProps]="iframeProps!" [messageHandlers]="messageHandlers!"></lib-coinflow-iframe> ', isInline: true, dependencies: [{ kind: "component", type: CoinflowIFrameComponent, selector: "lib-coinflow-iframe", inputs: ["iframeProps", "messageHandlers"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowPurchaseComponent, isStandalone: true, selector: "lib-coinflow-purchase", inputs: { purchaseProps: "purchaseProps" }, ngImport: i0, template: ' <lib-coinflow-iframe ng-if="iframeProps && messageHandlers" [iframeProps]="iframeProps!" [messageHandlers]="messageHandlers!"></lib-coinflow-iframe> ', isInline: true, dependencies: [{ kind: "component", type: CoinflowIFrameComponent, selector: "lib-coinflow-iframe", inputs: ["iframeProps", "messageHandlers"], outputs: ["messageEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowPurchaseComponent, decorators: [{
             type: Component,
@@ -736,7 +740,7 @@ class CoinflowWithdrawComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowWithdrawComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowWithdrawComponent, isStandalone: true, selector: "lib-coinflow-withdraw", inputs: { withdrawProps: "withdrawProps" }, ngImport: i0, template: '  <lib-coinflow-iframe ng-if="iframeProps && messageHandlers" [iframeProps]="iframeProps!" [messageHandlers]="messageHandlers!"></lib-coinflow-iframe> ', isInline: true, dependencies: [{ kind: "component", type: CoinflowIFrameComponent, selector: "lib-coinflow-iframe", inputs: ["iframeProps", "messageHandlers"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowWithdrawComponent, isStandalone: true, selector: "lib-coinflow-withdraw", inputs: { withdrawProps: "withdrawProps" }, ngImport: i0, template: '  <lib-coinflow-iframe ng-if="iframeProps && messageHandlers" [iframeProps]="iframeProps!" [messageHandlers]="messageHandlers!"></lib-coinflow-iframe> ', isInline: true, dependencies: [{ kind: "component", type: CoinflowIFrameComponent, selector: "lib-coinflow-iframe", inputs: ["iframeProps", "messageHandlers"], outputs: ["messageEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowWithdrawComponent, decorators: [{
             type: Component,
@@ -972,6 +976,447 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                 type: Input
             }] } });
 
+class CoinflowMobileWalletButtonComponent {
+    constructor() {
+        this.opacity = 0.8;
+        this.display = 'flex';
+    }
+    handleMessage({ data }) {
+        try {
+            const res = JSON.parse(data);
+            if ('method' in res && res.method === 'loaded') {
+                this.opacity = 1;
+                setTimeout(() => {
+                    this.display = 'none';
+                }, 2000);
+            }
+        }
+        catch (e) { }
+    }
+    ngOnInit() {
+        const walletPubkey = getWalletPubkey(this.purchaseProps);
+        this.messageHandlers = getHandlers(this.purchaseProps);
+        this.messageHandlers.handleHeightChange =
+            this.purchaseProps.handleHeightChange;
+        this.iframeProps = {
+            ...this.purchaseProps,
+            walletPubkey,
+            route: `/${this.route}/${this.purchaseProps?.merchantId}`,
+            routePrefix: 'form',
+            transaction: CoinflowUtils.getTransaction(this.purchaseProps),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowMobileWalletButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowMobileWalletButtonComponent, isStandalone: true, selector: "lib-coinflow-mobile-wallet-button", inputs: { purchaseProps: "purchaseProps", route: "route", overlayDisplayOverride: "overlayDisplayOverride", alignItems: "alignItems" }, ngImport: i0, template: ` <div style="position: relative; height: 100%;">
+    <div
+      [style.background-color]="purchaseProps.color"
+      [style.display]="overlayDisplayOverride ?? display"
+      [style.opacity]="opacity"
+      [style.align-items]="alignItems"
+      style="width: 100%; height: 40px; position: absolute; top: 0; bottom: 0; left: 0; z-index: 20; justify-content: center; pointer-events: none;"
+    >
+      <ng-content></ng-content>
+    </div>
+    <div style="position: relative; z-index: 10; height: 100%;">
+      <lib-coinflow-iframe
+        (messageEvent)="handleMessage($event)"
+        ng-if="iframeProps && messageHandlers"
+        [iframeProps]="iframeProps!"
+        [messageHandlers]="messageHandlers!"
+      ></lib-coinflow-iframe>
+    </div>
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: CoinflowIFrameComponent, selector: "lib-coinflow-iframe", inputs: ["iframeProps", "messageHandlers"], outputs: ["messageEvent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowMobileWalletButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-coinflow-mobile-wallet-button',
+                    standalone: true,
+                    imports: [CoinflowIFrameComponent],
+                    template: ` <div style="position: relative; height: 100%;">
+    <div
+      [style.background-color]="purchaseProps.color"
+      [style.display]="overlayDisplayOverride ?? display"
+      [style.opacity]="opacity"
+      [style.align-items]="alignItems"
+      style="width: 100%; height: 40px; position: absolute; top: 0; bottom: 0; left: 0; z-index: 20; justify-content: center; pointer-events: none;"
+    >
+      <ng-content></ng-content>
+    </div>
+    <div style="position: relative; z-index: 10; height: 100%;">
+      <lib-coinflow-iframe
+        (messageEvent)="handleMessage($event)"
+        ng-if="iframeProps && messageHandlers"
+        [iframeProps]="iframeProps!"
+        [messageHandlers]="messageHandlers!"
+      ></lib-coinflow-iframe>
+    </div>
+  </div>`,
+                }]
+        }], propDecorators: { purchaseProps: [{
+                type: Input
+            }], route: [{
+                type: Input
+            }], overlayDisplayOverride: [{
+                type: Input
+            }], alignItems: [{
+                type: Input
+            }] } });
+
+class CoinflowApplePayOverlayComponent {
+    fill() {
+        return this.color === 'white' ? '#000' : '#FFF';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowApplePayOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowApplePayOverlayComponent, isStandalone: true, selector: "coinflow-apple-pay-overlay", inputs: { color: "color" }, ngImport: i0, template: `
+    <svg id="svg-logo" viewBox="0 0 35 15">
+      <svg
+        id="svg-logo"
+        x="0"
+        y="3.85"
+        height="7.3"
+        width="35"
+        className="logo"
+        viewBox="0 0 105 43"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <title>Apple Logo</title>
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <g fill="#000">
+            <path
+              d="M19.4028,5.5674 C20.6008,4.0684 21.4138,2.0564 21.1998,0.0004 C19.4458,0.0874 17.3058,1.1574 16.0668,2.6564 C14.9538,3.9414 13.9688,6.0374 14.2258,8.0074 C16.1948,8.1784 18.1618,7.0244 19.4028,5.5674"
+            ></path>
+            <path
+              d="M21.1772,8.3926 C18.3182,8.2226 15.8872,10.0156 14.5212,10.0156 C13.1552,10.0156 11.0642,8.4786 8.8022,8.5196 C5.8592,8.5626 3.1282,10.2276 1.6342,12.8746 C-1.4378,18.1696 0.8232,26.0246 3.8112,30.3376 C5.2622,32.4716 7.0102,34.8206 9.3142,34.7366 C11.4912,34.6506 12.3442,33.3266 14.9902,33.3266 C17.6352,33.3266 18.4042,34.7366 20.7082,34.6936 C23.0972,34.6506 24.5922,32.5586 26.0422,30.4226 C27.7072,27.9906 28.3882,25.6426 28.4312,25.5126 C28.3882,25.4706 23.8232,23.7186 23.7812,18.4676 C23.7382,14.0706 27.3652,11.9786 27.5362,11.8496 C25.4882,8.8196 22.2872,8.4786 21.1772,8.3926"
+            ></path>
+            <path
+              d="M85.5508,43.0381 L85.5508,39.1991 C85.8628,39.2421 86.6158,39.2871 87.0158,39.2871 C89.2138,39.2871 90.4558,38.3551 91.2108,35.9581 L91.6548,34.5371 L83.2428,11.2321 L88.4368,11.2321 L94.2958,30.1421 L94.4068,30.1421 L100.2668,11.2321 L105.3278,11.2321 L96.6048,35.7141 C94.6078,41.3291 92.3208,43.1721 87.4828,43.1721 C87.1048,43.1721 85.8838,43.1271 85.5508,43.0381"
+            ></path>
+            <path
+              d="M42.6499,19.3555 L48.3549,19.3555 C52.6829,19.3555 55.1469,17.0255 55.1469,12.9855 C55.1469,8.9455 52.6829,6.6375 48.3769,6.6375 L42.6499,6.6375 L42.6499,19.3555 Z M49.6869,2.4425 C55.9009,2.4425 60.2289,6.7265 60.2289,12.9625 C60.2289,19.2225 55.8129,23.5285 49.5309,23.5285 L42.6499,23.5285 L42.6499,34.4705 L37.6779,34.4705 L37.6779,2.4425 L49.6869,2.4425 Z"
+            ></path>
+            <path
+              d="M76.5547,25.7705 L76.5547,23.9715 L71.0287,24.3275 C67.9207,24.5275 66.3007,25.6815 66.3007,27.7015 C66.3007,29.6545 67.9887,30.9195 70.6287,30.9195 C74.0027,30.9195 76.5547,28.7665 76.5547,25.7705 M61.4617,27.8345 C61.4617,23.7285 64.5917,21.3755 70.3627,21.0205 L76.5547,20.6425 L76.5547,18.8675 C76.5547,16.2705 74.8457,14.8495 71.8057,14.8495 C69.2967,14.8495 67.4777,16.1375 67.0997,18.1125 L62.6167,18.1125 C62.7497,13.9615 66.6567,10.9435 71.9387,10.9435 C77.6207,10.9435 81.3267,13.9175 81.3267,18.5345 L81.3267,34.4705 L76.7327,34.4705 L76.7327,30.6305 L76.6217,30.6305 C75.3127,33.1395 72.4267,34.7145 69.2967,34.7145 C64.6807,34.7145 61.4617,31.9625 61.4617,27.8345"
+            ></path>
+          </g>
+        </g>
+      </svg>
+    </svg>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowApplePayOverlayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'coinflow-apple-pay-overlay',
+                    standalone: true,
+                    imports: [],
+                    template: `
+    <svg id="svg-logo" viewBox="0 0 35 15">
+      <svg
+        id="svg-logo"
+        x="0"
+        y="3.85"
+        height="7.3"
+        width="35"
+        className="logo"
+        viewBox="0 0 105 43"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <title>Apple Logo</title>
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <g fill="#000">
+            <path
+              d="M19.4028,5.5674 C20.6008,4.0684 21.4138,2.0564 21.1998,0.0004 C19.4458,0.0874 17.3058,1.1574 16.0668,2.6564 C14.9538,3.9414 13.9688,6.0374 14.2258,8.0074 C16.1948,8.1784 18.1618,7.0244 19.4028,5.5674"
+            ></path>
+            <path
+              d="M21.1772,8.3926 C18.3182,8.2226 15.8872,10.0156 14.5212,10.0156 C13.1552,10.0156 11.0642,8.4786 8.8022,8.5196 C5.8592,8.5626 3.1282,10.2276 1.6342,12.8746 C-1.4378,18.1696 0.8232,26.0246 3.8112,30.3376 C5.2622,32.4716 7.0102,34.8206 9.3142,34.7366 C11.4912,34.6506 12.3442,33.3266 14.9902,33.3266 C17.6352,33.3266 18.4042,34.7366 20.7082,34.6936 C23.0972,34.6506 24.5922,32.5586 26.0422,30.4226 C27.7072,27.9906 28.3882,25.6426 28.4312,25.5126 C28.3882,25.4706 23.8232,23.7186 23.7812,18.4676 C23.7382,14.0706 27.3652,11.9786 27.5362,11.8496 C25.4882,8.8196 22.2872,8.4786 21.1772,8.3926"
+            ></path>
+            <path
+              d="M85.5508,43.0381 L85.5508,39.1991 C85.8628,39.2421 86.6158,39.2871 87.0158,39.2871 C89.2138,39.2871 90.4558,38.3551 91.2108,35.9581 L91.6548,34.5371 L83.2428,11.2321 L88.4368,11.2321 L94.2958,30.1421 L94.4068,30.1421 L100.2668,11.2321 L105.3278,11.2321 L96.6048,35.7141 C94.6078,41.3291 92.3208,43.1721 87.4828,43.1721 C87.1048,43.1721 85.8838,43.1271 85.5508,43.0381"
+            ></path>
+            <path
+              d="M42.6499,19.3555 L48.3549,19.3555 C52.6829,19.3555 55.1469,17.0255 55.1469,12.9855 C55.1469,8.9455 52.6829,6.6375 48.3769,6.6375 L42.6499,6.6375 L42.6499,19.3555 Z M49.6869,2.4425 C55.9009,2.4425 60.2289,6.7265 60.2289,12.9625 C60.2289,19.2225 55.8129,23.5285 49.5309,23.5285 L42.6499,23.5285 L42.6499,34.4705 L37.6779,34.4705 L37.6779,2.4425 L49.6869,2.4425 Z"
+            ></path>
+            <path
+              d="M76.5547,25.7705 L76.5547,23.9715 L71.0287,24.3275 C67.9207,24.5275 66.3007,25.6815 66.3007,27.7015 C66.3007,29.6545 67.9887,30.9195 70.6287,30.9195 C74.0027,30.9195 76.5547,28.7665 76.5547,25.7705 M61.4617,27.8345 C61.4617,23.7285 64.5917,21.3755 70.3627,21.0205 L76.5547,20.6425 L76.5547,18.8675 C76.5547,16.2705 74.8457,14.8495 71.8057,14.8495 C69.2967,14.8495 67.4777,16.1375 67.0997,18.1125 L62.6167,18.1125 C62.7497,13.9615 66.6567,10.9435 71.9387,10.9435 C77.6207,10.9435 81.3267,13.9175 81.3267,18.5345 L81.3267,34.4705 L76.7327,34.4705 L76.7327,30.6305 L76.6217,30.6305 C75.3127,33.1395 72.4267,34.7145 69.2967,34.7145 C64.6807,34.7145 61.4617,31.9625 61.4617,27.8345"
+            ></path>
+          </g>
+        </g>
+      </svg>
+    </svg>
+  `,
+                }]
+        }], propDecorators: { color: [{
+                type: Input
+            }] } });
+
+class CoinflowApplePayButtonComponent {
+    fill() {
+        return this.purchaseProps.color === 'white' ? '#000' : '#FFF';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowApplePayButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowApplePayButtonComponent, isStandalone: true, selector: "lib-coinflow-apple-pay-button", inputs: { purchaseProps: "purchaseProps" }, ngImport: i0, template: ` <lib-coinflow-mobile-wallet-button
+    ng-if="iframeProps && messageHandlers"
+    [purchaseProps]="purchaseProps"
+    route="apple-pay"
+  >
+    <svg id="svg-logo" viewBox="0 0 35 15">
+      <svg
+        id="svg-logo"
+        x="0"
+        y="3.85"
+        height="7.3"
+        width="35"
+        className="logo"
+        viewBox="0 0 105 43"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <title>Apple Logo</title>
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <g [attr.fill]="fill()">
+            <path
+              d="M19.4028,5.5674 C20.6008,4.0684 21.4138,2.0564 21.1998,0.0004 C19.4458,0.0874 17.3058,1.1574 16.0668,2.6564 C14.9538,3.9414 13.9688,6.0374 14.2258,8.0074 C16.1948,8.1784 18.1618,7.0244 19.4028,5.5674"
+            ></path>
+            <path
+              d="M21.1772,8.3926 C18.3182,8.2226 15.8872,10.0156 14.5212,10.0156 C13.1552,10.0156 11.0642,8.4786 8.8022,8.5196 C5.8592,8.5626 3.1282,10.2276 1.6342,12.8746 C-1.4378,18.1696 0.8232,26.0246 3.8112,30.3376 C5.2622,32.4716 7.0102,34.8206 9.3142,34.7366 C11.4912,34.6506 12.3442,33.3266 14.9902,33.3266 C17.6352,33.3266 18.4042,34.7366 20.7082,34.6936 C23.0972,34.6506 24.5922,32.5586 26.0422,30.4226 C27.7072,27.9906 28.3882,25.6426 28.4312,25.5126 C28.3882,25.4706 23.8232,23.7186 23.7812,18.4676 C23.7382,14.0706 27.3652,11.9786 27.5362,11.8496 C25.4882,8.8196 22.2872,8.4786 21.1772,8.3926"
+            ></path>
+            <path
+              d="M85.5508,43.0381 L85.5508,39.1991 C85.8628,39.2421 86.6158,39.2871 87.0158,39.2871 C89.2138,39.2871 90.4558,38.3551 91.2108,35.9581 L91.6548,34.5371 L83.2428,11.2321 L88.4368,11.2321 L94.2958,30.1421 L94.4068,30.1421 L100.2668,11.2321 L105.3278,11.2321 L96.6048,35.7141 C94.6078,41.3291 92.3208,43.1721 87.4828,43.1721 C87.1048,43.1721 85.8838,43.1271 85.5508,43.0381"
+            ></path>
+            <path
+              d="M42.6499,19.3555 L48.3549,19.3555 C52.6829,19.3555 55.1469,17.0255 55.1469,12.9855 C55.1469,8.9455 52.6829,6.6375 48.3769,6.6375 L42.6499,6.6375 L42.6499,19.3555 Z M49.6869,2.4425 C55.9009,2.4425 60.2289,6.7265 60.2289,12.9625 C60.2289,19.2225 55.8129,23.5285 49.5309,23.5285 L42.6499,23.5285 L42.6499,34.4705 L37.6779,34.4705 L37.6779,2.4425 L49.6869,2.4425 Z"
+            ></path>
+            <path
+              d="M76.5547,25.7705 L76.5547,23.9715 L71.0287,24.3275 C67.9207,24.5275 66.3007,25.6815 66.3007,27.7015 C66.3007,29.6545 67.9887,30.9195 70.6287,30.9195 C74.0027,30.9195 76.5547,28.7665 76.5547,25.7705 M61.4617,27.8345 C61.4617,23.7285 64.5917,21.3755 70.3627,21.0205 L76.5547,20.6425 L76.5547,18.8675 C76.5547,16.2705 74.8457,14.8495 71.8057,14.8495 C69.2967,14.8495 67.4777,16.1375 67.0997,18.1125 L62.6167,18.1125 C62.7497,13.9615 66.6567,10.9435 71.9387,10.9435 C77.6207,10.9435 81.3267,13.9175 81.3267,18.5345 L81.3267,34.4705 L76.7327,34.4705 L76.7327,30.6305 L76.6217,30.6305 C75.3127,33.1395 72.4267,34.7145 69.2967,34.7145 C64.6807,34.7145 61.4617,31.9625 61.4617,27.8345"
+            ></path>
+          </g>
+        </g>
+      </svg>
+    </svg>
+  </lib-coinflow-mobile-wallet-button>`, isInline: true, dependencies: [{ kind: "component", type: CoinflowMobileWalletButtonComponent, selector: "lib-coinflow-mobile-wallet-button", inputs: ["purchaseProps", "route", "overlayDisplayOverride", "alignItems"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowApplePayButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-coinflow-apple-pay-button',
+                    standalone: true,
+                    imports: [
+                        CoinflowMobileWalletButtonComponent,
+                        CoinflowApplePayOverlayComponent,
+                    ],
+                    template: ` <lib-coinflow-mobile-wallet-button
+    ng-if="iframeProps && messageHandlers"
+    [purchaseProps]="purchaseProps"
+    route="apple-pay"
+  >
+    <svg id="svg-logo" viewBox="0 0 35 15">
+      <svg
+        id="svg-logo"
+        x="0"
+        y="3.85"
+        height="7.3"
+        width="35"
+        className="logo"
+        viewBox="0 0 105 43"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        <title>Apple Logo</title>
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <g [attr.fill]="fill()">
+            <path
+              d="M19.4028,5.5674 C20.6008,4.0684 21.4138,2.0564 21.1998,0.0004 C19.4458,0.0874 17.3058,1.1574 16.0668,2.6564 C14.9538,3.9414 13.9688,6.0374 14.2258,8.0074 C16.1948,8.1784 18.1618,7.0244 19.4028,5.5674"
+            ></path>
+            <path
+              d="M21.1772,8.3926 C18.3182,8.2226 15.8872,10.0156 14.5212,10.0156 C13.1552,10.0156 11.0642,8.4786 8.8022,8.5196 C5.8592,8.5626 3.1282,10.2276 1.6342,12.8746 C-1.4378,18.1696 0.8232,26.0246 3.8112,30.3376 C5.2622,32.4716 7.0102,34.8206 9.3142,34.7366 C11.4912,34.6506 12.3442,33.3266 14.9902,33.3266 C17.6352,33.3266 18.4042,34.7366 20.7082,34.6936 C23.0972,34.6506 24.5922,32.5586 26.0422,30.4226 C27.7072,27.9906 28.3882,25.6426 28.4312,25.5126 C28.3882,25.4706 23.8232,23.7186 23.7812,18.4676 C23.7382,14.0706 27.3652,11.9786 27.5362,11.8496 C25.4882,8.8196 22.2872,8.4786 21.1772,8.3926"
+            ></path>
+            <path
+              d="M85.5508,43.0381 L85.5508,39.1991 C85.8628,39.2421 86.6158,39.2871 87.0158,39.2871 C89.2138,39.2871 90.4558,38.3551 91.2108,35.9581 L91.6548,34.5371 L83.2428,11.2321 L88.4368,11.2321 L94.2958,30.1421 L94.4068,30.1421 L100.2668,11.2321 L105.3278,11.2321 L96.6048,35.7141 C94.6078,41.3291 92.3208,43.1721 87.4828,43.1721 C87.1048,43.1721 85.8838,43.1271 85.5508,43.0381"
+            ></path>
+            <path
+              d="M42.6499,19.3555 L48.3549,19.3555 C52.6829,19.3555 55.1469,17.0255 55.1469,12.9855 C55.1469,8.9455 52.6829,6.6375 48.3769,6.6375 L42.6499,6.6375 L42.6499,19.3555 Z M49.6869,2.4425 C55.9009,2.4425 60.2289,6.7265 60.2289,12.9625 C60.2289,19.2225 55.8129,23.5285 49.5309,23.5285 L42.6499,23.5285 L42.6499,34.4705 L37.6779,34.4705 L37.6779,2.4425 L49.6869,2.4425 Z"
+            ></path>
+            <path
+              d="M76.5547,25.7705 L76.5547,23.9715 L71.0287,24.3275 C67.9207,24.5275 66.3007,25.6815 66.3007,27.7015 C66.3007,29.6545 67.9887,30.9195 70.6287,30.9195 C74.0027,30.9195 76.5547,28.7665 76.5547,25.7705 M61.4617,27.8345 C61.4617,23.7285 64.5917,21.3755 70.3627,21.0205 L76.5547,20.6425 L76.5547,18.8675 C76.5547,16.2705 74.8457,14.8495 71.8057,14.8495 C69.2967,14.8495 67.4777,16.1375 67.0997,18.1125 L62.6167,18.1125 C62.7497,13.9615 66.6567,10.9435 71.9387,10.9435 C77.6207,10.9435 81.3267,13.9175 81.3267,18.5345 L81.3267,34.4705 L76.7327,34.4705 L76.7327,30.6305 L76.6217,30.6305 C75.3127,33.1395 72.4267,34.7145 69.2967,34.7145 C64.6807,34.7145 61.4617,31.9625 61.4617,27.8345"
+            ></path>
+          </g>
+        </g>
+      </svg>
+    </svg>
+  </lib-coinflow-mobile-wallet-button>`,
+                }]
+        }], propDecorators: { purchaseProps: [{
+                type: Input
+            }] } });
+
+class CoinflowGooglePayOverlayComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowGooglePayOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: CoinflowGooglePayOverlayComponent, isStandalone: true, selector: "coinflow-google-pay-overlay", inputs: { color: "color" }, ngImport: i0, template: `
+    @if (color === 'white') {
+      <svg xmlns="http://www.w3.org/2000/svg" width="41" height="17">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z"
+            fill="#5F6368"
+          />
+          <path
+            d="M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944"
+            fill="#4285F4"
+          />
+          <path
+            d="M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703"
+            fill="#34A853"
+          />
+          <path
+            d="M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z"
+            fill="#FABB05"
+          />
+          <path
+            d="M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774"
+            fill="#E94235"
+          />
+          <path d="M0 0h41.285v18H0z" />
+        </g>
+      </svg>
+    } @else {
+      <svg xmlns="http://www.w3.org/2000/svg" width="41" height="17">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z"
+            fill="#FFF"
+          />
+          <path
+            d="M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944"
+            fill="#4285F4"
+          />
+          <path
+            d="M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703"
+            fill="#34A853"
+          />
+          <path
+            d="M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z"
+            fill="#FABB05"
+          />
+          <path
+            d="M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774"
+            fill="#E94235"
+          />
+        </g>
+      </svg>
+    }
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowGooglePayOverlayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'coinflow-google-pay-overlay',
+                    standalone: true,
+                    imports: [],
+                    template: `
+    @if (color === 'white') {
+      <svg xmlns="http://www.w3.org/2000/svg" width="41" height="17">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z"
+            fill="#5F6368"
+          />
+          <path
+            d="M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944"
+            fill="#4285F4"
+          />
+          <path
+            d="M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703"
+            fill="#34A853"
+          />
+          <path
+            d="M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z"
+            fill="#FABB05"
+          />
+          <path
+            d="M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774"
+            fill="#E94235"
+          />
+          <path d="M0 0h41.285v18H0z" />
+        </g>
+      </svg>
+    } @else {
+      <svg xmlns="http://www.w3.org/2000/svg" width="41" height="17">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z"
+            fill="#FFF"
+          />
+          <path
+            d="M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944"
+            fill="#4285F4"
+          />
+          <path
+            d="M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703"
+            fill="#34A853"
+          />
+          <path
+            d="M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z"
+            fill="#FABB05"
+          />
+          <path
+            d="M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774"
+            fill="#E94235"
+          />
+        </g>
+      </svg>
+    }
+  `,
+                }]
+        }], propDecorators: { color: [{
+                type: Input
+            }] } });
+
+class CoinflowGooglePayButtonComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowGooglePayButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CoinflowGooglePayButtonComponent, isStandalone: true, selector: "lib-coinflow-google-pay-button", inputs: { purchaseProps: "purchaseProps" }, ngImport: i0, template: `<lib-coinflow-mobile-wallet-button
+    ng-if="iframeProps && messageHandlers"
+    [purchaseProps]="purchaseProps"
+    route="google-pay"
+    alignItems="center"
+    overlayDisplayOverride="flex"
+  >
+    <coinflow-google-pay-overlay
+      [color]="purchaseProps.color"
+    ></coinflow-google-pay-overlay>
+  </lib-coinflow-mobile-wallet-button> `, isInline: true, dependencies: [{ kind: "component", type: CoinflowMobileWalletButtonComponent, selector: "lib-coinflow-mobile-wallet-button", inputs: ["purchaseProps", "route", "overlayDisplayOverride", "alignItems"] }, { kind: "component", type: CoinflowGooglePayOverlayComponent, selector: "coinflow-google-pay-overlay", inputs: ["color"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CoinflowGooglePayButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-coinflow-google-pay-button',
+                    standalone: true,
+                    imports: [
+                        CoinflowMobileWalletButtonComponent,
+                        CoinflowGooglePayOverlayComponent,
+                    ],
+                    template: `<lib-coinflow-mobile-wallet-button
+    ng-if="iframeProps && messageHandlers"
+    [purchaseProps]="purchaseProps"
+    route="google-pay"
+    alignItems="center"
+    overlayDisplayOverride="flex"
+  >
+    <coinflow-google-pay-overlay
+      [color]="purchaseProps.color"
+    ></coinflow-google-pay-overlay>
+  </lib-coinflow-mobile-wallet-button> `,
+                }]
+        }], propDecorators: { purchaseProps: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of coinflowlabs
  */
@@ -980,5 +1425,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CoinflowCardNumberInput, CoinflowCardNumberOnlyInput, CoinflowCvvInputComponent, CoinflowCvvOnlyInputComponent, CoinflowIFrameComponent, CoinflowPurchaseComponent, CoinflowPurchaseHistoryComponent, CoinflowPurchaseProtectionComponent, CoinflowWithdrawComponent, CoinflowWithdrawHistoryComponent };
+export { CoinflowApplePayButtonComponent, CoinflowCardNumberInput, CoinflowCardNumberOnlyInput, CoinflowCvvInputComponent, CoinflowCvvOnlyInputComponent, CoinflowGooglePayButtonComponent, CoinflowIFrameComponent, CoinflowPurchaseComponent, CoinflowPurchaseHistoryComponent, CoinflowPurchaseProtectionComponent, CoinflowWithdrawComponent, CoinflowWithdrawHistoryComponent };
 //# sourceMappingURL=coinflowlabs-angular.mjs.map