@benbraide/inlinejs-stripe 2.0.5 → 2.1.0

package/lib/common/components/stripe.js

@@ -32,6 +32,7 @@ class StripeElement extends inlinejs_element_1.CustomElement {
         this.fields_ = null;
         this.readyFields_ = null;
         this.instanceWaiters_ = new Array();
+        this.interactiveFields_ = null;
         this.completeFields_ = null;
         this.errorFields_ = null;
         this.options = null;
@@ -48,6 +49,10 @@ class StripeElement extends inlinejs_element_1.CustomElement {
         field.WaitReady().then(() => {
             this.readyFields_ = (this.readyFields_ || []);
             this.readyFields_.push(field);
+            if (field.IsInteractive()) {
+                this.interactiveFields_ = (this.interactiveFields_ || []);
+                this.interactiveFields_.push(field);
+            }
             (this.fields_ && this.readyFields_ && this.fields_.length <= this.readyFields_.length) && (0, inlinejs_1.JournalTry)(() => {
                 this.isReady_ = true;
                 this.onready && (0, inlinejs_1.EvaluateLater)({
@@ -65,11 +70,11 @@ class StripeElement extends inlinejs_element_1.CustomElement {
                 this.completeFields_ = (this.completeFields_ || []);
                 if (data && !this.completeFields_.includes(field)) {
                     this.completeFields_.push(field);
-                    changed = !!(this.readyFields_ && this.completeFields_.length == this.readyFields_.length);
+                    changed = !!(this.interactiveFields_ && this.completeFields_.length == this.interactiveFields_.length);
                 }
                 else if (!data && this.completeFields_.includes(field)) {
                     this.completeFields_ = this.completeFields_.filter(x => x !== field);
-                    changed = !!(this.readyFields_ && (this.completeFields_.length == (this.readyFields_.length - 1)));
+                    changed = !!(this.interactiveFields_ && (this.completeFields_.length == (this.interactiveFields_.length - 1)));
                 }
                 changed && this.oncomplete && (0, inlinejs_1.EvaluateLater)({
                     componentId: this.componentId_,
@@ -104,6 +109,9 @@ class StripeElement extends inlinejs_element_1.CustomElement {
     RemoveStripeField(field) {
         this.fields_ && (this.fields_ = this.fields_.filter(x => x !== field));
         this.readyFields_ && (this.readyFields_ = this.readyFields_.filter(x => x !== field));
+        this.interactiveFields_ && (this.interactiveFields_ = this.interactiveFields_.filter(x => x !== field));
+        this.completeFields_ && (this.completeFields_ = this.completeFields_.filter(x => x !== field));
+        this.errorFields_ && (this.errorFields_ = this.errorFields_.filter(x => x !== field));
     }
     FocusNextField(field) {
         if (this.fields_) {

package/lib/common/index.d.ts

@@ -2,4 +2,5 @@ export * from './components/stripe';
 export * from './components/field';
 export * from './components/detail';
 export * from './components/payment-method';
+export * from './directive/stripe';
 export * from './entry';

package/lib/common/index.js

@@ -18,4 +18,5 @@ __exportStar(require("./components/stripe"), exports);
 __exportStar(require("./components/field"), exports);
 __exportStar(require("./components/detail"), exports);
 __exportStar(require("./components/payment-method"), exports);
+__exportStar(require("./directive/stripe"), exports);
 __exportStar(require("./entry"), exports);

package/lib/common/types.d.ts

@@ -6,6 +6,7 @@ export interface IStripePaymentDetails {
 export declare type StripeFieldChangeType = 'error' | 'complete';
 export declare type StripeFieldChangeHandlerType = (type: StripeFieldChangeType, data: any) => void;
 export interface IStripeField {
+    IsInteractive(): boolean;
     WaitReady(): Promise<void>;
     AddChangeListener(listener: StripeFieldChangeHandlerType): void;
     RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;

package/lib/esm/components/field.d.ts

@@ -15,6 +15,7 @@ export declare class StripeFieldElement extends StripeGenericField {
     oncomplete: string;
     onerrors: string;
     constructor();
+    IsInteractive(): boolean;
     WaitReady(): Promise<void>;
     AddChangeListener(listener: StripeFieldChangeHandlerType): void;
     RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;

package/lib/esm/components/field.js

@@ -33,6 +33,9 @@ export class StripeFieldElement extends StripeGenericField {
         this.oncomplete = '';
         this.onerrors = '';
     }
+    IsInteractive() {
+        return true;
+    }
     WaitReady() {
         return new Promise(resolve => {
             this.isReady_ ? resolve() : this.readyWaiters_.push(() => resolve());

package/lib/esm/components/generic-field.d.ts

@@ -3,6 +3,7 @@ import { CustomElement } from "@benbraide/inlinejs-element";
 import { IStripeElement, IStripeField, IStripePaymentDetails, StripeFieldChangeHandlerType } from "../types";
 export declare class StripeGenericField extends CustomElement implements IStripeField {
     stripe: IStripeElement | null;
+    IsInteractive(): boolean;
     WaitReady(): Promise<void>;
     AddChangeListener(listener: StripeFieldChangeHandlerType): void;
     RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;

package/lib/esm/components/generic-field.js

@@ -22,6 +22,9 @@ export class StripeGenericField extends CustomElement {
         super(...arguments);
         this.stripe = null;
     }
+    IsInteractive() {
+        return false;
+    }
     WaitReady() {
         return Promise.resolve();
     }

package/lib/esm/components/stripe.d.ts

@@ -12,6 +12,7 @@ export declare class StripeElement extends CustomElement implements IStripeEleme
     protected fields_: Array<IStripeField> | null;
     protected readyFields_: Array<IStripeField> | null;
     protected instanceWaiters_: (() => void)[];
+    protected interactiveFields_: Array<IStripeField> | null;
     protected completeFields_: Array<IStripeField> | null;
     protected errorFields_: Array<IStripeField> | null;
     options: stripe.elements.ElementsOptions | null;

package/lib/esm/components/stripe.js

@@ -29,6 +29,7 @@ export class StripeElement extends CustomElement {
         this.fields_ = null;
         this.readyFields_ = null;
         this.instanceWaiters_ = new Array();
+        this.interactiveFields_ = null;
         this.completeFields_ = null;
         this.errorFields_ = null;
         this.options = null;
@@ -45,6 +46,10 @@ export class StripeElement extends CustomElement {
         field.WaitReady().then(() => {
             this.readyFields_ = (this.readyFields_ || []);
             this.readyFields_.push(field);
+            if (field.IsInteractive()) {
+                this.interactiveFields_ = (this.interactiveFields_ || []);
+                this.interactiveFields_.push(field);
+            }
             (this.fields_ && this.readyFields_ && this.fields_.length <= this.readyFields_.length) && JournalTry(() => {
                 this.isReady_ = true;
                 this.onready && EvaluateLater({
@@ -62,11 +67,11 @@ export class StripeElement extends CustomElement {
                 this.completeFields_ = (this.completeFields_ || []);
                 if (data && !this.completeFields_.includes(field)) {
                     this.completeFields_.push(field);
-                    changed = !!(this.readyFields_ && this.completeFields_.length == this.readyFields_.length);
+                    changed = !!(this.interactiveFields_ && this.completeFields_.length == this.interactiveFields_.length);
                 }
                 else if (!data && this.completeFields_.includes(field)) {
                     this.completeFields_ = this.completeFields_.filter(x => x !== field);
-                    changed = !!(this.readyFields_ && (this.completeFields_.length == (this.readyFields_.length - 1)));
+                    changed = !!(this.interactiveFields_ && (this.completeFields_.length == (this.interactiveFields_.length - 1)));
                 }
                 changed && this.oncomplete && EvaluateLater({
                     componentId: this.componentId_,
@@ -101,6 +106,9 @@ export class StripeElement extends CustomElement {
     RemoveStripeField(field) {
         this.fields_ && (this.fields_ = this.fields_.filter(x => x !== field));
         this.readyFields_ && (this.readyFields_ = this.readyFields_.filter(x => x !== field));
+        this.interactiveFields_ && (this.interactiveFields_ = this.interactiveFields_.filter(x => x !== field));
+        this.completeFields_ && (this.completeFields_ = this.completeFields_.filter(x => x !== field));
+        this.errorFields_ && (this.errorFields_ = this.errorFields_.filter(x => x !== field));
     }
     FocusNextField(field) {
         if (this.fields_) {

package/lib/esm/index.d.ts

@@ -2,4 +2,5 @@ export * from './components/stripe';
 export * from './components/field';
 export * from './components/detail';
 export * from './components/payment-method';
+export * from './directive/stripe';
 export * from './entry';

package/lib/esm/index.js

@@ -2,4 +2,5 @@ export * from './components/stripe';
 export * from './components/field';
 export * from './components/detail';
 export * from './components/payment-method';
+export * from './directive/stripe';
 export * from './entry';

package/lib/esm/types.d.ts

@@ -6,6 +6,7 @@ export interface IStripePaymentDetails {
 export declare type StripeFieldChangeType = 'error' | 'complete';
 export declare type StripeFieldChangeHandlerType = (type: StripeFieldChangeType, data: any) => void;
 export interface IStripeField {
+    IsInteractive(): boolean;
     WaitReady(): Promise<void>;
     AddChangeListener(listener: StripeFieldChangeHandlerType): void;
     RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@benbraide/inlinejs-stripe",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "Run javascript code by embedding them in your HTML using the element as context.",
   "main": "./lib/common/index.js",
   "module": "./lib/esm/index.js",
@@ -48,13 +48,14 @@
     "jsdom": "^16.6.0",
     "jsdom-global": "^3.0.2",
     "mocha": "^9.0.0",
+    "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^9.2.3",
     "ts-node": "^10.0.0",
     "webpack": "^5.41.0"
   },
   "dependencies": {
-    "@benbraide/inlinejs": "^1.1.2",
-    "@benbraide/inlinejs-element": "^2.0.4",
+    "@benbraide/inlinejs": "^1.2.1",
+    "@benbraide/inlinejs-element": "^2.1.0",
     "webpack-cli": "^4.7.2"
   }
 }