@gr4vy/secure-fields 0.1.0 → 0.4.0

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v0.4.0 (Mon Sep 05 2022)
+
+#### 🚀 Enhancement
+
+- feat: submit [#33](https://github.com/gr4vy/secure-fields/pull/33) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- feat: event listening methods [#30](https://github.com/gr4vy/secure-fields/pull/30) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- feat: debug mode [#27](https://github.com/gr4vy/secure-fields/pull/27) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### 🐛 Bug Fix
+
+- feat: refactoring inputs [#29](https://github.com/gr4vy/secure-fields/pull/29) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- feat: styling updates [#25](https://github.com/gr4vy/secure-fields/pull/25) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- feat: add field public methods [#26](https://github.com/gr4vy/secure-fields/pull/26) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### 🏠 Internal
+
+- Define empty process.env.SECURE_FIELDS_FRAME_URL for prod [#31](https://github.com/gr4vy/secure-fields/pull/31) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- Fix process undefined error and update sample form [#28](https://github.com/gr4vy/secure-fields/pull/28) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### Authors: 1
+
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
+# v0.3.0 (Wed Aug 17 2022)
+
+#### 🚀 Enhancement
+
+- feat: styling [#17](https://github.com/gr4vy/secure-fields/pull/17) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### Authors: 1
+
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
 # v0.1.0 (Fri Aug 12 2022)
 
 #### 🚀 Enhancement
@@ -6,6 +43,7 @@
 
 #### 🐛 Bug Fix
 
+- docs: update readme [#23](https://github.com/gr4vy/secure-fields/pull/23) ([@douglaseggleton](https://github.com/douglaseggleton))
 - ci: add npm release configuration [#16](https://github.com/gr4vy/secure-fields/pull/16) ([@douglaseggleton](https://github.com/douglaseggleton))
 - fix: removing share constant [#15](https://github.com/gr4vy/secure-fields/pull/15) ([@douglaseggleton](https://github.com/douglaseggleton))
 - feat: add field [#13](https://github.com/gr4vy/secure-fields/pull/13) ([@luca-gr4vy](https://github.com/luca-gr4vy))

package/README.md

@@ -88,7 +88,7 @@ form.addEventListener('submit', (e) => {
 
 The outer styling (any containers around fields, etc) is completely in the your control. SecureFields will also generate a set of so-called managed CSS classes and attach them to the outer iframe containers, so you can target them with your own CSS. Finally, an object of CSS rules can be passed to the `addField` options to style elements inside the iframe(s).
 
-```
+```js
 const styles = {
   // Default styles
   base: { ... },
@@ -146,21 +146,28 @@ WebkitFontSmoothing
 
 Here are the managed classes generated by Secure Fields:
 
-```
+```css
 /* Applied to the (form) container */
-.secure-fields {}
+.secure-fields {
+}
 /* Applied to each field */
-.secure-fields__field {}
+.secure-fields__field {
+}
 /* Applied to a disabled field */
-.secure-fields__field--disabled {}
+.secure-fields__field--disabled {
+}
 /* Applied to a focused field */
-.secure-fields__field--focused {}
+.secure-fields__field--focused {
+}
 /* Applied to a valid field */
-.secure-fields__field--valid {}
+.secure-fields__field--valid {
+}
 /* Applied to an invalid field */
-.secure-fields__field--invalid {}
+.secure-fields__field--invalid {
+}
 /* Applied to a autofilled field */
-.secure-fields__field--autofilled {}
+.secure-fields__field--autofilled {
+}
 ```
 
 ### Events

package/lib/constants.d.ts

@@ -1,3 +1,4 @@
+export declare const LOCAL_STORAGE_DEBUG_FLAG = "@gr4vy-secure-fields-debug";
 export declare enum Events {
     CARD_VAULT_SUCCESS = "card-vault-success",
     CARD_VAULT_FAILURE = "card-vault-failure",

package/lib/event-bus.d.ts

@@ -0,0 +1,9 @@
+import { CombinedEvents } from './types';
+declare class EventBus {
+    subscribers: [CombinedEvents, (...args: any[]) => void][];
+    constructor();
+    subscribe(event: CombinedEvents, callback: (...args: any[]) => void): void;
+    unsubscribe(event: CombinedEvents, callback: (...args: any[]) => void): void;
+    publish(event: CombinedEvents, args?: unknown): void;
+}
+export { EventBus };

package/lib/index.d.ts

@@ -1,11 +1,16 @@
 import { Events } from './constants';
-import type { Config, Field } from './types';
+import { SecureInput } from './input';
+import type { CombinedEvents, Config, Field } from './types';
 declare class SecureFields {
     config: Config;
     controller: HTMLIFrameElement;
     frameUrl: string;
     apiUrl: string;
     parentOrigin: string;
+    private eventBus;
+    cardNumber: SecureInput;
+    securityCode: SecureInput;
+    expiryDate: SecureInput;
     /**
      * CARD_VAULT_SUCCESS: Triggered when the card is successfully vaulted.
      *
@@ -17,29 +22,14 @@ declare class SecureFields {
     static get version(): string;
     constructor(config: Config);
     private _addField;
-    addCardNumberField(element: string | HTMLElement, options: Omit<Field, 'element' | 'type'>): {
-        element: HTMLElement;
-        type: "number" | "securityCode" | "expirationDate";
-        placeholder?: string;
-        styles?: import("./types").Styles;
-    };
-    addSecurityCodeField(element: string | HTMLElement, options: Omit<Field, 'element' | 'type'>): {
-        element: HTMLElement;
-        type: "number" | "securityCode" | "expirationDate";
-        placeholder?: string;
-        styles?: import("./types").Styles;
-    };
-    addExpirationDateField(element: string | HTMLElement, options: Omit<Field, 'element' | 'type'>): {
-        element: HTMLElement;
-        type: "number" | "securityCode" | "expirationDate";
-        placeholder?: string;
-        styles?: import("./types").Styles;
-    };
-    addEventListener(event: keyof typeof Events, callback: () => void): void;
-    removeEventListener(event: keyof typeof Events, callback: () => void): void;
+    addCardNumberField(element: string | HTMLElement, options?: Omit<Field, 'element' | 'type'>): SecureInput;
+    addSecurityCodeField(element: string | HTMLElement, options?: Omit<Field, 'element' | 'type'>): SecureInput;
+    addExpiryDateField(element: string | HTMLElement, options?: Omit<Field, 'element' | 'type'>): SecureInput;
+    addEventListener(event: CombinedEvents, callback: (...args: any[]) => void): void;
+    removeEventListener(event: CombinedEvents, callback: (...args: any[]) => void): void;
     submit(callback: (error: string) => void): void;
     setDebug(debug: boolean): void;
     isFormValid(): void;
 }
 export { SecureFields };
-export type { Field } from './types';
+export type { Field, Styles, StylesTuple } from './types';

package/lib/index.js

@@ -1 +1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,(()=>(()=>{"use strict";var e,t,n={d:(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},r={};function o(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){i(e,t,n[t])}))}return e}function a(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}n.r(r),n.d(r,{SecureFields:()=>s}),function(e){e.CARD_VAULT_SUCCESS="card-vault-success",e.CARD_VAULT_FAILURE="card-vault-failure",e.READY="ready"}(e||(e={})),function(e){e.AUTOFILLED="data-secure-fields-autofilled",e.DISABLED="data-secure-fields-disabled",e.FOCUSED="data-secure-fields-focused",e.VALID="data-secure-fields-valid"}(t||(t={}));var s=function(){function n(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.config=c({environment:"production"},e);var t="sandbox"===this.config.environment?"sandbox.":"";this.frameUrl=process.env.SECURE_FIELDS_FRAME_URL||"https://secure-fields.".concat(t).concat(this.config.gr4vyId,".gr4vy.app"),this.parentOrigin=window.location.origin,this.controller=document.createElement("iframe"),this.controller.src="".concat(this.frameUrl,"/controller.html?parentOrigin=").concat(this.parentOrigin,"&sessionId=").concat(this.config.sessionId,"&gr4vyId=").concat(this.config.gr4vyId,"&environment=").concat(this.config.environment),this.controller.style.position="absolute",this.controller.style.left="-9999999px",document.body.appendChild(this.controller)}var r,i,s=n.prototype;return s._addField=function(e,n){var r=this;e="string"==typeof e?document.querySelector(e):e;var o=document.createElement("iframe");o.id=n.type,o.src="".concat(this.frameUrl,"/input.html?parentOrigin=").concat(this.parentOrigin,"&placeholder=").concat(n.placeholder,"&type=").concat(n.type),o.style.height="48px",o.style.border="none",o.style.width="100%";var i=document.createElement("div");return i.appendChild(o),e.parentNode.replaceChild(i,e),window.addEventListener("message",(function(e){if(e.origin===r.frameUrl&&e.data.data.id===n.type)switch(e.data.type){case"blur":i.removeAttribute(t.FOCUSED);break;case"focus":i.setAttribute(t.FOCUSED,"")}})),a(c({},n),{element:e})},s.addCardNumberField=function(e,t){return this._addField(e,a(c({},t),{type:"number"}))},s.addSecurityCodeField=function(e,t){return this._addField(e,a(c({},t),{type:"securityCode"}))},s.addExpirationDateField=function(e,t){return this._addField(e,a(c({},t),{type:"expirationDate"}))},s.addEventListener=function(e,t){console.log(e,t)},s.removeEventListener=function(e,t){console.log(e,t)},s.submit=function(e){var t=this,n=function(r){if(r.origin===t.frameUrl&&"secure-fields"===r.data.channel){switch(r.data.type){case"success":e(null);break;case"error":e("Failed to update checkout session")}window.removeEventListener("message",n)}};window.addEventListener("message",n),this.controller.contentWindow.postMessage("submit",this.frameUrl)},s.setDebug=function(e){console.log(e)},s.isFormValid=function(){},r=n,i=[{key:"Events",get:function(){return e}},{key:"version",get:function(){}}],null&&o(r.prototype,null),i&&o(r,i),n}();return r})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var r=t();for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{SecureFields:()=>P});var r,n,i="@gr4vy-secure-fields-debug";function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,i,o=[],s=!0,a=!1;try{for(r=r.call(e);!(s=(n=r.next()).done)&&(o.push(n.value),!t||o.length!==t);s=!0);}catch(e){a=!0,i=e}finally{try{s||null==r.return||r.return()}finally{if(a)throw i}}return o}}(e,t)||function(e,t){if(e){if("string"==typeof e)return o(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(r):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?o(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}!function(e){e.CARD_VAULT_SUCCESS="card-vault-success",e.CARD_VAULT_FAILURE="card-vault-failure",e.READY="ready"}(r||(r={})),function(e){e.AUTOFILLED="data-secure-fields-autofilled",e.DISABLED="data-secure-fields-disabled",e.FOCUSED="data-secure-fields-focused",e.VALID="data-secure-fields-valid"}(n||(n={}));var a=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.subscribers=[]}var t=e.prototype;return t.subscribe=function(e,t){this.subscribers.push([e,t])},t.unsubscribe=function(e,t){this.subscribers=this.subscribers.filter((function(r){var n=s(r,2),i=n[0],o=n[1];return i!==e||o.toString()!==t.toString()}))},t.publish=function(e,t){this.subscribers.forEach((function(r){var n=s(r,2),i=n[0],o=n[1];return setTimeout((function(){return i===e?o(t):null}),0)}))},e}(),c=function(e){return"[object Object]"===Object.prototype.toString.call(e)};function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var l={debug:!1,level:"log"},f=function(e,t,r){var n=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){u(e,t,r[t])}))}return e}({},l,r),o=n.debug,s=n.level;(o||"true"===localStorage.getItem(i))&&console[s]("Gr4vy - Secure Fields - ".concat(e),t||{})},d=function(e){return e!=e.toLowerCase()&&(e=e.replace(/[A-Z]/g,(function(e){return"-"+e.toLowerCase()}))),e};function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function y(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,i,o=[],s=!0,a=!1;try{for(r=r.call(e);!(s=(n=r.next()).done)&&(o.push(n.value),!t||o.length!==t);s=!0);}catch(e){a=!0,i=e}finally{try{s||null==r.return||r.return()}finally{if(a)throw i}}return o}}(e,t)||h(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function b(e){return function(e){if(Array.isArray(e))return p(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||h(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function h(e,t){if(e){if("string"==typeof e)return p(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(r):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?p(e,t):void 0}}var m=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return Object.entries(e).reduce((function(n,i){var o,s=y(i,2),a=s[0],u=s[1];return c(u)?(o=n).push.apply(o,b(t(e[a],"".concat((r+a).match(/[a-zA-Z0-9]+/g).join("-"),"-")))):n.push(["--".concat(r).concat(d(a)),u]),n}),[])};return t(e)};function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){v(e,t,r[t])}))}return e}function O(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}var w=function(){function e(t){var r=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e);var n=t.frameUrl,i=t.parentOrigin,o=t.options.type,s=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(t.options,["type"]);this.frameUrl=n,this.parentOrigin=i,this.type=o,this.options=s;var a=m(s.styles);this.frame=document.createElement("iframe"),this.frame.id=o,this.frame.src="".concat(n,"/input.html?parentOrigin=").concat(i,"&type=").concat(this.type),this.frame.style.display="block",this.frame.style.height="100%",this.frame.style.border="none",this.frame.style.width="100%",this.frame.onload=function(){r._postMessage({type:"update",data:O(g({},r.options),{styles:a})}),f("Added field",r.options)}}var t=e.prototype;return t._postMessage=function(e){this.frame.contentWindow.postMessage(e,this.frameUrl)},t.update=function(e){this.options=g({},this.options,e);var t=m(g({},this.options.styles,e.styles)),r=O(g({},this.options,e),{styles:t});this._postMessage({type:"update",data:O(g({},r),{styles:t})}),f("Updated field",this.options)},t.setPlaceholder=function(e){this.update({placeholder:e})},t.setStyles=function(e){this.update({styles:e})},e}();function j(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function S(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function E(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){S(e,t,r[t])}))}return e}function A(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}var P=function(){function e(t){var n=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.config=E({environment:"production"},t);var i="sandbox"===this.config.environment?"sandbox.":"";this.frameUrl="https://secure-fields.".concat(i).concat(this.config.gr4vyId,".gr4vy.app"),this.parentOrigin=window.location.origin,this.controller=document.createElement("iframe"),this.controller.src="".concat(this.frameUrl,"/controller.html?parentOrigin=").concat(this.parentOrigin,"&sessionId=").concat(this.config.sessionId,"&gr4vyId=").concat(this.config.gr4vyId,"&environment=").concat(this.config.environment),this.controller.style.position="absolute",this.controller.style.left="-9999999px",document.body.appendChild(this.controller),this.addEventListener=this.addEventListener.bind(this),this.removeEventListener=this.removeEventListener.bind(this),this.eventBus=new a,window.onload=function(){n.eventBus.publish(r.READY,E({version:e.version},n.config))},f("Initialized",A(E({},this.config),{frameUrl:this.frameUrl,parentOrigin:this.parentOrigin}))}var t,o,s=e.prototype;return s._addField=function(e,t){var r=this;if(!(e="string"==typeof e?document.querySelector(e):e))return t;var i=document.createElement("div");return i.classList.add("secure-fields__input","secure-fields__input--".concat(d(t.type))),i.appendChild(t.frame),e.parentNode.replaceChild(i,e),window.addEventListener("message",(function(e){var o;if(e.origin===r.frameUrl&&(null===(o=e.data.data)||void 0===o?void 0:o.id)===t.type)switch(e.data.type){case"blur":r.eventBus.publish("blur",e.data.data),i.removeAttribute(n.FOCUSED),f("Field blurred",{type:t.type});break;case"focus":r.eventBus.publish("focus",e.data.data),i.setAttribute(n.FOCUSED,""),f("Field focused",{type:t.type});break;case"input":r.eventBus.publish("input",e.data.data)}})),t.addEventListener=this.addEventListener,t.removeEventListener=this.removeEventListener,t},s.addCardNumberField=function(e,t){return this.cardNumber||(this.cardNumber=new w({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,options:A(E({},t),{type:"number"})})),this._addField(e,this.cardNumber)},s.addSecurityCodeField=function(e,t){return this.securityCode||(this.securityCode=new w({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,options:A(E({},t),{type:"securityCode"})})),this._addField(e,this.securityCode)},s.addExpiryDateField=function(e,t){return this.expiryDate||(this.expiryDate=new w({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,options:A(E({},t),{type:"expiryDate"})})),this._addField(e,this.expiryDate)},s.addEventListener=function(e,t){this.eventBus.subscribe(e,t)},s.removeEventListener=function(e,t){this.eventBus.unsubscribe(e,t)},s.submit=function(e){var t=this,n=function(i){if(i.origin===t.frameUrl&&"secure-fields"===i.data.channel){switch(i.data.type){case"success":e("Checkout session updated"),t.eventBus.publish(r.CARD_VAULT_SUCCESS),f("Payment method tokenized successfully");break;case"error":e("Failed to update checkout session"),t.eventBus.publish(r.CARD_VAULT_FAILURE),f("Failed to update checkout session")}window.removeEventListener("message",n)}};window.addEventListener("message",n),this.controller.contentWindow.postMessage("submit",this.frameUrl)},s.setDebug=function(e){localStorage.setItem(i,String(e))},s.isFormValid=function(){},t=e,o=[{key:"Events",get:function(){return r}},{key:"version",get:function(){}}],null&&j(t.prototype,null),o&&j(t,o),e}();return t})()));

package/lib/input.d.ts

@@ -0,0 +1,23 @@
+import { Field, StylesTuple } from './types';
+declare type Options = Omit<Field, 'element' | 'type'>;
+declare type EventListener = (event: keyof HTMLElementEventMap, callback: (...args: any[]) => void) => void;
+declare class SecureInput {
+    frameUrl: string;
+    parentOrigin: string;
+    frame: HTMLIFrameElement;
+    type: 'number' | 'securityCode' | 'expiryDate';
+    options: Options;
+    addEventListener: EventListener;
+    removeEventListener: EventListener;
+    constructor(config: any);
+    _postMessage(message: {
+        type: string;
+        data: Options & {
+            styles: StylesTuple;
+        };
+    }): void;
+    update(data: Options): void;
+    setPlaceholder(placeholder: Options['placeholder']): void;
+    setStyles(styles: Options['styles']): void;
+}
+export { SecureInput };

package/lib/types.d.ts

@@ -1,17 +1,30 @@
 import type * as CSS from 'csstype';
+import { Events } from './constants';
 export declare type Config = {
     environment?: 'sandbox' | 'production';
     gr4vyId: string;
     sessionId: string;
 };
+export declare type CombinedEvents = Events | keyof HTMLElementEventMap;
 export declare type Field = {
     type: 'number' | 'securityCode' | 'expirationDate';
     placeholder?: string;
     styles?: Styles;
 };
-export declare type Styles = {
-    [key in 'base' | 'autofill' | 'hover' | 'focus' | 'disabled' | 'valid' | 'invalid' | 'placeholder']: Pick<CSS.Properties, 'backgroundColor' | 'caretColor' | 'color' | 'colorScheme' | 'cursor' | 'font' | 'fontFamily' | 'fontFeatureSettings' | 'fontKerning' | 'fontSize' | 'fontSizeAdjust' | 'fontStretch' | 'fontStyle' | 'fontVariant' | 'fontVariantAlternates' | 'fontVariantCaps' | 'fontVariantEastAsian' | 'fontVariantLigatures' | 'fontVariantNumeric' | 'fontVariationSettings' | 'fontWeight' | 'letterSpacing' | 'lineHeight' | 'opacity' | 'textAlign' | 'textShadow' | 'textRendering' | 'transition' | 'MozOsxFontSmoothing' | 'WebkitFontSmoothing'>;
+export declare type FieldEvent = {
+    type: keyof HTMLElementEventMap;
+    data: Omit<Field, 'type' | 'styles'> & {
+        id: Field['type'];
+    };
+};
+export declare type SupportedCSSProperties = Pick<CSS.Properties, 'backgroundColor' | 'boxShadow' | 'caretColor' | 'color' | 'colorScheme' | 'cursor' | 'font' | 'fontFamily' | 'fontFeatureSettings' | 'fontKerning' | 'fontSize' | 'fontSizeAdjust' | 'fontStretch' | 'fontStyle' | 'fontVariant' | 'fontVariantAlternates' | 'fontVariantCaps' | 'fontVariantEastAsian' | 'fontVariantLigatures' | 'fontVariantNumeric' | 'fontVariationSettings' | 'fontWeight' | 'letterSpacing' | 'lineHeight' | 'opacity' | 'padding' | 'textAlign' | 'textShadow' | 'textRendering' | 'transition' | 'MozOsxFontSmoothing' | 'WebkitFontSmoothing'>;
+export declare type SupportedCSSVariables = {
+    [K in keyof SupportedCSSProperties as `--${K}`]: SupportedCSSProperties[K];
 };
+export declare type Styles = {
+    [key in ':autofill' | ':hover' | ':focus' | ':disabled' | ':valid' | ':invalid' | '::placeholder']?: SupportedCSSProperties;
+} & SupportedCSSProperties;
+export declare type StylesTuple = [string, string][];
 export declare type VaultSessionResponse = {
     type: 'vault-session';
     id: string;

package/lib/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './is';
+export * from './logger';
+export * from './strings';
+export * from './styles';

package/lib/utils/is.d.ts

@@ -0,0 +1,3 @@
+export declare const is: {
+    plainObject: (value: unknown) => boolean;
+};

package/lib/utils/logger.d.ts

@@ -0,0 +1,11 @@
+declare type Options = {
+    debug?: boolean;
+    level?: 'log' | 'warn' | 'debug' | 'info' | 'error';
+};
+declare type LogFunction = (key: string, object?: Record<string, unknown>, options?: Options) => void;
+export declare const log: LogFunction;
+export declare const warn: LogFunction;
+export declare const debug: LogFunction;
+export declare const info: LogFunction;
+export declare const error: LogFunction;
+export {};

package/lib/utils/strings.d.ts

@@ -0,0 +1 @@
+export declare const camelToKebab: (str: string) => string;

package/lib/utils/styles.d.ts

@@ -0,0 +1,2 @@
+import type { Styles, StylesTuple } from '../types';
+export declare const stylesTransformer: (styles?: Styles) => StylesTuple;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gr4vy/secure-fields",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "description": "Gr4vy-hosted secure fields offering advanced theming, PCI compliance, event handling, and more.",
   "main": "lib/index",
   "types": "lib/index",
@@ -31,20 +31,25 @@
   "scripts": {
     "build": "tsc && webpack --config webpack.prod.js",
     "clean": "rm -rf lib *.tgz",
-    "dev": "webpack serve --config webpack.dev.js",
+    "dev": "TOKEN=$(yarn --silent token) webpack serve --config webpack.dev.js",
     "docs": "typedoc --plugin typedoc-plugin-missing-exports",
     "lint": "eslint src --ext .ts",
     "prebuild": "yarn clean",
     "prepack": "yarn build",
-    "test": "jest --colors"
+    "test": "jest --colors",
+    "token": "node generate-token"
   },
   "devDependencies": {
+    "@gr4vy/node": "^0.27.0",
+    "css-loader": "^6.7.1",
     "csstype": "^3.1.0",
+    "dotenv": "^16.0.1",
+    "style-loader": "^3.3.1",
     "typedoc": "^0.23.5",
     "typedoc-plugin-missing-exports": "^0.23.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c8e8a5d43d547fe325b18e2e294862ae1b29f6e1"
+  "gitHead": "a94d2d7231462961f9730f9ab45d15615399cf5c"
 }