@gr4vy/secure-fields 1.10.1 → 1.11.1

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# v1.11.0 (Mon Jun 26 2023)
+
+#### 🚀 Enhancement
+
+- feat: add autofill field attribute and event property [#355](https://github.com/gr4vy/secure-fields/pull/355) ([@theturboboy](https://github.com/theturboboy) [@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### 🏠 Internal
+
+- chore(dev-deps): update dependency dotenv to ^16.3.1 [#362](https://github.com/gr4vy/secure-fields/pull/362) ([@renovate[bot]](https://github.com/renovate[bot]))
+
+#### Authors: 3
+
+- [@renovate[bot]](https://github.com/renovate[bot])
+- Andrei Haidukevich ([@theturboboy](https://github.com/theturboboy))
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
 # v1.10.1 (Thu Jun 15 2023)
 
 #### 🐛 Bug Fix

package/README.md

@@ -113,6 +113,9 @@ The outer styling of every Secure Field is completely in your control by applyin
 /* Applied to an invalid field */
 .secure-fields__input[data-secure-fields-invalid] {
 }
+/* Applied to an autofilled field */
+.secure-fields__input[data-secure-fields-autofilled] {
+}
 ```
 
 To set the CSS of the content of a field an object of CSS rules can be passed to the `addCardNumberField`, `addExpiryDateField` and `addSecurityCodeField` methods.
@@ -197,11 +200,11 @@ The following events can be listened to by attaching an event handler to a field
 
 Some of these provide additional useful data like the card BIN, validation status, and scheme. For example, the input event on a card number field might include `{ schema: 'visa', codeLabel: 'CVV', valid: true, ... }`.
 
-| Name    | Description                                      | Example                                                                                                                                                        |
-| ------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `blur`  | Triggered when the field loses focus.            | `cardNumberField.addEventListener('blur', (data) => { console.log(data) /* { type: 'number' } */ })`                                                           |
-| `focus` | Triggered when the field gains focus.            | `cardNumberField.addEventListener('focus', (data) => { console.log(data) /* { type: 'number' } */ })`                                                          |
-| `input` | Triggered when the field value has been changed. | `cardNumberField.addEventListener('input', (data) => { console.log(data) /* { type: 'number', schema: 'visa', codeLabel: 'CVV', valid: true, empty: true } */` |
+| Name    | Description                                      | Example                                                                                                                                                                           |
+| ------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `blur`  | Triggered when the field loses focus.            | `cardNumberField.addEventListener('blur', (data) => { console.log(data) /* { type: 'number' } */ })`                                                                              |
+| `focus` | Triggered when the field gains focus.            | `cardNumberField.addEventListener('focus', (data) => { console.log(data) /* { type: 'number' } */ })`                                                                             |
+| `input` | Triggered when the field value has been changed. | `cardNumberField.addEventListener('input', (data) => { console.log(data) /* { type: 'number', schema: 'visa', codeLabel: 'CVV', valid: true, empty: true, autofilled: false } */` |
 
 ### API reference
 

package/lib/constants.d.ts

@@ -7,6 +7,7 @@ export declare enum Events {
 }
 export declare enum FieldAttributes {
     FOCUSED = "data-secure-fields-focused",
-    INVALID = "data-secure-fields-invalid"
+    INVALID = "data-secure-fields-invalid",
+    AUTOFILLED = "data-secure-fields-autofilled"
 }
 export declare const MESSAGE_CHANNEL = "secure-fields";

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={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[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})}},t={};e.r(t),e.d(t,{SecureFields:()=>P,SecureInput:()=>j});var n,r,o="@gr4vy-secure-fields-debug";!function(e){e.CARD_VAULT_SUCCESS="card-vault-success",e.CARD_VAULT_FAILURE="card-vault-failure",e.FORM_CHANGE="form-change",e.READY="ready"}(n||(n={})),function(e){e.FOCUSED="data-secure-fields-focused",e.INVALID="data-secure-fields-invalid"}(r||(r={}));var i="secure-fields";function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function s(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 c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i=[],a=!0,s=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){s=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(s)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return a(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(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.")}()}var l=new(function(){function e(){var t,n;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),n=void 0,(t="subscribers")in this?Object.defineProperty(this,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):this[t]=n,this.subscribers=[]}var t,n;return t=e,(n=[{key:"subscribe",value:function(e,t){this.subscribers.push([e,t])}},{key:"unsubscribe",value:function(e,t){this.subscribers=this.subscribers.filter((function(n){var r=c(n,2),o=r[0],i=r[1];return o!==e||i.toString()!==t.toString()}))}},{key:"publish",value:function(e,t){this.subscribers.forEach((function(n){var r=c(n,2),o=r[0],i=r[1];return setTimeout((function(){return o===e?i(t):null}),0)}))}}])&&s(t.prototype,n),e}()),u=["accesskey","autocapitalize","autocomplete","autofocus","aria-.","class","contenteditable","data-.","dir","draggable","enterkeyhint","hidden","id","inert","inputmode","is","itemid","itemprop","itemref","itemscope","itemtype","lang","nonce","onabort","onautocomplete","onautocompleteerror","onblur","oncancel","oncanplay","oncanplaythrough","onchange","onclick","onclose","oncontextmenu","oncuechange","ondblclick","ondrag","ondragend","ondragenter","ondragleave","ondragover","ondragstart","ondrop","ondurationchange","onemptied","onended","onerror","onfocus","oninput","oninvalid","onkeydown","onkeypress","onkeyup","onload","onloadeddata","onloadedmetadata","onloadstart","onmousedown","onmouseenter","onmouseleave","onmousemove","onmouseout","onmouseover","onmouseup","onmousewheel","onpause","onplay","onplaying","onprogress","onratechange","onreset","onresize","onscroll","onseeked","onseeking","onselect","onshow","onsort","onstalled","onsubmit","onsuspend","ontimeupdate","ontoggle","onvolumechange","onwaiting","popover","role","slot","spellcheck","style","tabindex","title","translate"];function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var f={debug:!1,level:"log"},p=function(e,t,n){var r=function(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){d(e,t,n[t])}))}return e}({},f,n),i=r.debug,a=r.level;(i||"true"===localStorage.getItem(o))&&console[a]("Gr4vy - Secure Fields - ".concat(e),t||{})},y=function(e){return e!=e.toLowerCase()&&(e=e.replace(/[A-Z]/g,(function(e){return"-"+e.toLowerCase()}))),e};function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function b(e,t){if(e){if("string"==typeof e)return h(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?h(e,t):void 0}}var v=function(){var e=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return Object.entries(t).reduce((function(r,o){var i,a,s,c=(s=2,function(e){if(Array.isArray(e))return e}(a=o)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i=[],a=!0,s=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){s=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(s)throw o}}return i}}(a,s)||b(a,s)||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.")}()),l=c[0],u=c[1];return!function(e){return"[object Object]"===Object.prototype.toString.call(e)}(u)?(l=y(l).replace(/^-/,""),r.push(["--".concat(n).concat(l),u])):(i=r).push.apply(i,function(e){return function(e){if(Array.isArray(e))return h(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||b(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.")}()}(e(t[l],"".concat((n+l).match(/[a-zA-Z0-9]+/g).join("-"),"-")))),r}),[])};return e(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{})};function m(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 g(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function O(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){g(e,t,n[t])}))}return e}function w(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}var j=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),g(this,"frameUrl",void 0),g(this,"parentOrigin",void 0),g(this,"frame",void 0),g(this,"type",void 0),g(this,"options",void 0),g(this,"addEventListener",void 0),g(this,"removeEventListener",void 0);var r=t.frameUrl,o=t.parentOrigin,i=t.font,a=t.options.type,s=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(t.options,["type"]);this.frameUrl=r,this.parentOrigin=o,this.type=a,this.options=s;var c=v(s.styles);this.frame=document.createElement("iframe"),this.frame.id=a,this.frame.src="".concat(r,"/input.html?parentOrigin=").concat(o,"&type=").concat(this.type),this.frame.style.display="block",this.frame.style.height="100%",this.frame.style.border="none",this.frame.style.width="100%",i&&(this.frame.src+="&font=".concat(i)),this.frame.onload=function(){n._postMessage({type:"update",data:w(O({},n.options),{styles:c})}),p("Added field",n.options)}}var t,n;return t=e,(n=[{key:"_postMessage",value:function(e){this.frame.contentWindow.postMessage(O({channel:i},e),this.frameUrl)}},{key:"update",value:function(e){this.options=O({},this.options,e);var t=v(O({},this.options.styles,e.styles)),n=w(O({},this.options,e),{styles:t});this._postMessage({type:"update",data:w(O({},n),{styles:t})}),p("Updated field",this.options)}},{key:"setPlaceholder",value:function(e){this.update({placeholder:e})}},{key:"setStyles",value:function(e){this.update({styles:e})}}])&&m(t.prototype,n),e}();function S(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 E(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function k(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){E(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}var P=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),E(this,"config",void 0),E(this,"controller",void 0),E(this,"frameUrl",void 0),E(this,"apiUrl",void 0),E(this,"parentOrigin",void 0),E(this,"font",void 0),E(this,"cardNumber",void 0),E(this,"securityCode",void 0),E(this,"expiryDate",void 0),this.config=k({environment:"production"},t);var o="sandbox"===this.config.environment?"sandbox.":"";this.frameUrl=window.SECURE_FIELDS_FRAME_URL||"https://secure-fields.".concat(o).concat(this.config.gr4vyId,".gr4vy.app"),this.parentOrigin=window.location.origin,this.controller=document.createElement("iframe"),this.controller.id="controller",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),window.onload=function(){l.publish(n.READY,k({version:e.version},r.config))},p("Initialized",A(k({},this.config),{frameUrl:this.frameUrl,parentOrigin:this.parentOrigin})),window.addEventListener("message",(function(e){e.origin===r.frameUrl&&"form-change"===e.data.type&&(l.publish(n.FORM_CHANGE,e.data.data),p("Form change",e.data.data))}))}var t,a,s;return t=e,s=[{key:"Events",get:function(){return n}},{key:"version",get:function(){}}],(a=[{key:"_addField",value:function(e,t){var n=this;if(!(e="string"==typeof e?document.querySelector(e):e))return t;var o,i,a=document.createElement("div");return o=e,i=a,Array.from(o.attributes).forEach((function(e){var t=e.name,n=e.value;u.some((function(e){return new RegExp(e).test(t)}))&&i.setAttribute(t,n)})),(a=i).classList.add("secure-fields__input","secure-fields__input--".concat(y(t.type))),a.appendChild(t.frame),e.parentNode.replaceChild(a,e),window.addEventListener("message",(function(e){var o;if(e.origin===n.frameUrl&&(null===(o=e.data.data)||void 0===o?void 0:o.id)===t.type)switch(e.data.type){case"blur":l.publish("".concat(t.type,":blur"),e.data.data),a.removeAttribute(r.FOCUSED),p("Field blurred",e.data.data);break;case"focus":l.publish("".concat(t.type,":focus"),e.data.data),a.setAttribute(r.FOCUSED,""),p("Field focused",e.data.data);break;case"input":l.publish("".concat(t.type,":input"),e.data.data),e.data.data.valid?a.removeAttribute(r.INVALID):a.setAttribute(r.INVALID,""),p("Field input changed",e.data.data)}})),t.addEventListener=this.addEventListener,t.removeEventListener=this.removeEventListener,t}},{key:"addCardNumberField",value:function(e,t){return this.cardNumber||(this.cardNumber=new j({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:A(k({label:"Card number"},t),{type:"number"})})),this._addField(e,this.cardNumber)}},{key:"addSecurityCodeField",value:function(e,t){return this.securityCode||(this.securityCode=new j({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:A(k({label:"Security code"},t),{type:"securityCode"})})),this._addField(e,this.securityCode)}},{key:"addExpiryDateField",value:function(e,t){return this.expiryDate||(this.expiryDate=new j({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:A(k({label:"Expiry date"},t),{type:"expiryDate"})})),this._addField(e,this.expiryDate)}},{key:"addEventListener",value:function(e,t){var n=this.type,r="".concat(this.constructor===j?"".concat(n,":"):"").concat(e);l.subscribe(r,t)}},{key:"removeEventListener",value:function(e,t){var n=this.type,r="".concat(this.constructor===j?"".concat(n,":"):"").concat(e);l.unsubscribe(r,t)}},{key:"submit",value:function(){var e=this,t=function(r){if(["success","error"].includes(r.data.type)&&r.origin===e.frameUrl&&r.data.channel===i){switch(r.data.type){case"success":l.publish(n.CARD_VAULT_SUCCESS),p("Payment method tokenized successfully");break;case"error":l.publish(n.CARD_VAULT_FAILURE,r.data),p("Failed to update checkout session",r.data.data)}window.removeEventListener("message",t)}};window.addEventListener("message",t),this.controller.contentWindow.postMessage({type:"submit",channel:i},this.frameUrl)}},{key:"setDebug",value:function(e){localStorage.setItem(o,String(e))}},{key:"addFont",value:function(e){this.font=e.replace(/\s/g,"+")}}])&&S(t.prototype,a),s&&S(t,s),e}();return t})()));
+!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={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[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})}},t={};e.r(t),e.d(t,{SecureFields:()=>U,SecureInput:()=>j});var n,r,o="@gr4vy-secure-fields-debug";!function(e){e.CARD_VAULT_SUCCESS="card-vault-success",e.CARD_VAULT_FAILURE="card-vault-failure",e.FORM_CHANGE="form-change",e.READY="ready"}(n||(n={})),function(e){e.FOCUSED="data-secure-fields-focused",e.INVALID="data-secure-fields-invalid",e.AUTOFILLED="data-secure-fields-autofilled"}(r||(r={}));var i="secure-fields";function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function s(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 c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i=[],a=!0,s=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){s=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(s)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return a(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(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.")}()}var u=new(function(){function e(){var t,n;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),n=void 0,(t="subscribers")in this?Object.defineProperty(this,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):this[t]=n,this.subscribers=[]}var t,n;return t=e,(n=[{key:"subscribe",value:function(e,t){this.subscribers.push([e,t])}},{key:"unsubscribe",value:function(e,t){this.subscribers=this.subscribers.filter((function(n){var r=c(n,2),o=r[0],i=r[1];return o!==e||i.toString()!==t.toString()}))}},{key:"publish",value:function(e,t){this.subscribers.forEach((function(n){var r=c(n,2),o=r[0],i=r[1];return setTimeout((function(){return o===e?i(t):null}),0)}))}}])&&s(t.prototype,n),e}()),l=["accesskey","autocapitalize","autocomplete","autofocus","aria-.","class","contenteditable","data-.","dir","draggable","enterkeyhint","hidden","id","inert","inputmode","is","itemid","itemprop","itemref","itemscope","itemtype","lang","nonce","onabort","onautocomplete","onautocompleteerror","onblur","oncancel","oncanplay","oncanplaythrough","onchange","onclick","onclose","oncontextmenu","oncuechange","ondblclick","ondrag","ondragend","ondragenter","ondragleave","ondragover","ondragstart","ondrop","ondurationchange","onemptied","onended","onerror","onfocus","oninput","oninvalid","onkeydown","onkeypress","onkeyup","onload","onloadeddata","onloadedmetadata","onloadstart","onmousedown","onmouseenter","onmouseleave","onmousemove","onmouseout","onmouseover","onmouseup","onmousewheel","onpause","onplay","onplaying","onprogress","onratechange","onreset","onresize","onscroll","onseeked","onseeking","onselect","onshow","onsort","onstalled","onsubmit","onsuspend","ontimeupdate","ontoggle","onvolumechange","onwaiting","popover","role","slot","spellcheck","style","tabindex","title","translate"];function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var f={debug:!1,level:"log"},p=function(e,t,n){var r=function(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){d(e,t,n[t])}))}return e}({},f,n),i=r.debug,a=r.level;(i||"true"===localStorage.getItem(o))&&console[a]("Gr4vy - Secure Fields - ".concat(e),t||{})},y=function(e){return e!=e.toLowerCase()&&(e=e.replace(/[A-Z]/g,(function(e){return"-"+e.toLowerCase()}))),e};function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function b(e,t){if(e){if("string"==typeof e)return h(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?h(e,t):void 0}}var m=function(){var e=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return Object.entries(t).reduce((function(r,o){var i,a,s,c=(s=2,function(e){if(Array.isArray(e))return e}(a=o)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i=[],a=!0,s=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){s=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(s)throw o}}return i}}(a,s)||b(a,s)||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.")}()),u=c[0],l=c[1];return!function(e){return"[object Object]"===Object.prototype.toString.call(e)}(l)?(u=y(u).replace(/^-/,""),r.push(["--".concat(n).concat(u),l])):(i=r).push.apply(i,function(e){return function(e){if(Array.isArray(e))return h(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||b(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.")}()}(e(t[u],"".concat((n+u).match(/[a-zA-Z0-9]+/g).join("-"),"-")))),r}),[])};return e(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{})};function v(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 g(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function O(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){g(e,t,n[t])}))}return e}function w(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}var j=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),g(this,"frameUrl",void 0),g(this,"parentOrigin",void 0),g(this,"frame",void 0),g(this,"type",void 0),g(this,"options",void 0),g(this,"addEventListener",void 0),g(this,"removeEventListener",void 0);var r=t.frameUrl,o=t.parentOrigin,i=t.font,a=t.options.type,s=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(t.options,["type"]);this.frameUrl=r,this.parentOrigin=o,this.type=a,this.options=s;var c=m(s.styles);this.frame=document.createElement("iframe"),this.frame.id=a,this.frame.src="".concat(r,"/input.html?parentOrigin=").concat(o,"&type=").concat(this.type),this.frame.style.display="block",this.frame.style.height="100%",this.frame.style.border="none",this.frame.style.width="100%",i&&(this.frame.src+="&font=".concat(i)),this.frame.onload=function(){n._postMessage({type:"update",data:w(O({},n.options),{styles:c})}),p("Added field",n.options)}}var t,n;return t=e,(n=[{key:"_postMessage",value:function(e){this.frame.contentWindow.postMessage(O({channel:i},e),this.frameUrl)}},{key:"update",value:function(e){this.options=O({},this.options,e);var t=m(O({},this.options.styles,e.styles)),n=w(O({},this.options,e),{styles:t});this._postMessage({type:"update",data:w(O({},n),{styles:t})}),p("Updated field",this.options)}},{key:"setPlaceholder",value:function(e){this.update({placeholder:e})}},{key:"setStyles",value:function(e){this.update({styles:e})}}])&&v(t.prototype,n),e}();function S(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 E(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function A(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){E(e,t,n[t])}))}return e}function k(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}var U=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),E(this,"config",void 0),E(this,"controller",void 0),E(this,"frameUrl",void 0),E(this,"apiUrl",void 0),E(this,"parentOrigin",void 0),E(this,"font",void 0),E(this,"cardNumber",void 0),E(this,"securityCode",void 0),E(this,"expiryDate",void 0),this.config=A({environment:"production"},t);var o="sandbox"===this.config.environment?"sandbox.":"";this.frameUrl=window.SECURE_FIELDS_FRAME_URL||"https://secure-fields.".concat(o).concat(this.config.gr4vyId,".gr4vy.app"),this.parentOrigin=window.location.origin,this.controller=document.createElement("iframe"),this.controller.id="controller",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),window.onload=function(){u.publish(n.READY,A({version:e.version},r.config))},p("Initialized",k(A({},this.config),{frameUrl:this.frameUrl,parentOrigin:this.parentOrigin})),window.addEventListener("message",(function(e){e.origin===r.frameUrl&&"form-change"===e.data.type&&(u.publish(n.FORM_CHANGE,e.data.data),p("Form change",e.data.data))}))}var t,a,s;return t=e,s=[{key:"Events",get:function(){return n}},{key:"version",get:function(){}}],(a=[{key:"_addField",value:function(e,t){var n=this;if(!(e="string"==typeof e?document.querySelector(e):e))return t;var o,i,a=document.createElement("div");return o=e,i=a,Array.from(o.attributes).forEach((function(e){var t=e.name,n=e.value;l.some((function(e){return new RegExp(e).test(t)}))&&i.setAttribute(t,n)})),(a=i).classList.add("secure-fields__input","secure-fields__input--".concat(y(t.type))),a.appendChild(t.frame),e.parentNode.replaceChild(a,e),window.addEventListener("message",(function(e){if(e.origin===n.frameUrl&&e.data.data?.id===t.type)switch(e.data.type){case"blur":u.publish("".concat(t.type,":blur"),e.data.data),a.removeAttribute(r.FOCUSED),p("Field blurred",e.data.data);break;case"focus":u.publish("".concat(t.type,":focus"),e.data.data),a.setAttribute(r.FOCUSED,""),p("Field focused",e.data.data);break;case"input":u.publish("".concat(t.type,":input"),e.data.data),e.data.data.valid?a.removeAttribute(r.INVALID):a.setAttribute(r.INVALID,""),e.data.data.autofilled?a.setAttribute(r.AUTOFILLED,""):a.removeAttribute(r.AUTOFILLED),p("Field input changed",e.data.data)}})),t.addEventListener=this.addEventListener,t.removeEventListener=this.removeEventListener,t}},{key:"addCardNumberField",value:function(e,t){return this.cardNumber||(this.cardNumber=new j({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:k(A({label:"Card number"},t),{type:"number"})})),this._addField(e,this.cardNumber)}},{key:"addSecurityCodeField",value:function(e,t){return this.securityCode||(this.securityCode=new j({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:k(A({label:"Security code"},t),{type:"securityCode"})})),this._addField(e,this.securityCode)}},{key:"addExpiryDateField",value:function(e,t){return this.expiryDate||(this.expiryDate=new j({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:k(A({label:"Expiry date"},t),{type:"expiryDate"})})),this._addField(e,this.expiryDate)}},{key:"addEventListener",value:function(e,t){var n=this.type,r="".concat(this.constructor===j?"".concat(n,":"):"").concat(e);u.subscribe(r,t)}},{key:"removeEventListener",value:function(e,t){var n=this.type,r="".concat(this.constructor===j?"".concat(n,":"):"").concat(e);u.unsubscribe(r,t)}},{key:"submit",value:function(){var e=this,t=function(r){if(["success","error"].includes(r.data.type)&&r.origin===e.frameUrl&&r.data.channel===i){switch(r.data.type){case"success":u.publish(n.CARD_VAULT_SUCCESS),p("Payment method tokenized successfully");break;case"error":u.publish(n.CARD_VAULT_FAILURE,r.data),p("Failed to update checkout session",r.data.data)}window.removeEventListener("message",t)}};window.addEventListener("message",t),this.controller.contentWindow.postMessage({type:"submit",channel:i},this.frameUrl)}},{key:"setDebug",value:function(e){localStorage.setItem(o,String(e))}},{key:"addFont",value:function(e){this.font=e.replace(/\s/g,"+")}}])&&S(t.prototype,a),s&&S(t,s),e}();return t})()));

package/lib/types.d.ts

@@ -23,6 +23,7 @@ export type FieldEvent = {
     data: Omit<Field, 'type' | 'styles'> & {
         id: Field['type'];
         valid: boolean;
+        autofilled: boolean;
     };
 };
 export type CombinedEvents = Events | keyof HTMLElementEventMap;
@@ -40,14 +41,17 @@ export type FormChangeEventData = {
         number: {
             valid: boolean;
             empty: boolean;
+            autofilled: boolean;
         };
         expiryDate: {
             valid: boolean;
             empty: boolean;
+            autofilled: boolean;
         };
         securityCode: {
             valid: boolean;
             empty: boolean;
+            autofilled: boolean;
         };
     };
     complete: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gr4vy/secure-fields",
-  "version": "1.10.1",
+  "version": "1.11.1",
   "description": "Gr4vy-hosted secure fields offering advanced theming, PCI compliance, event handling, and more.",
   "main": "lib/index",
   "types": "lib/index",
@@ -43,7 +43,7 @@
   "devDependencies": {
     "css-loader": "^6.8.1",
     "csstype": "^3.1.2",
-    "dotenv": "^16.1.4",
+    "dotenv": "^16.3.1",
     "style-loader": "^3.3.3",
     "ts-patch": "^2.1.0",
     "typedoc": "^0.24.8",
@@ -53,5 +53,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "73d52d8c6c31581d6dc22d0c8841c528b1d58b99"
+  "gitHead": "5bfa72d3cd1aae8b02f11fa40047ea398d2c9334"
 }