@gr4vy/secure-fields 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# 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

package/lib/index.d.ts

@@ -42,4 +42,4 @@ declare class SecureFields {
     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 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={};n.r(r),n.d(r,{SecureFields:()=>y}),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 o=function(e){return"[object Object]"===Object.prototype.toString.call(e)},i=function(e){return e!=e.toLowerCase()&&(e=e.replace(/[A-Z]/g,(function(e){return"-"+e.toLowerCase()}))),e};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 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,c=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(c)throw o}}return i}}(e,t)||s(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 l(e){return function(e){if(Array.isArray(e))return a(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||s(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 s(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}}function u(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 d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(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}function p(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 y=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=f({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,a,s=n.prototype;return s._addField=function(e,n){var r=this;e="string"==typeof e?document.querySelector(e):e;var a=function(){var e=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return Object.entries(t).reduce((function(r,a){var s,u=c(a,2),d=u[0],f=u[1];return o(f)?(s=r).push.apply(s,l(e(t[d],"".concat((n+d).match(/[a-zA-Z0-9]+/g).join("-"),"-")))):r.push(["--".concat(n).concat(i(d)),f]),r}),[])};return e(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{})}(null==n?void 0:n.styles),s=document.createElement("iframe");s.id=n.type,s.src="".concat(this.frameUrl,"/input.html?parentOrigin=").concat(this.parentOrigin,"&type=").concat(n.type),s.style.display="block",s.style.height="48px",s.style.border="none",s.style.width="100%",s.onload=function(){s.contentWindow.postMessage({type:"init",data:p(f({},n),{styles:a})},r.frameUrl)};var u=document.createElement("div");return u.classList.add("secure-fields__input","secure-fields__input--".concat(i(n.type))),u.appendChild(s),e.parentNode.replaceChild(u,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)===n.type)switch(e.data.type){case"blur":u.removeAttribute(t.FOCUSED);break;case"focus":u.setAttribute(t.FOCUSED,"")}})),p(f({},n),{element:e})},s.addCardNumberField=function(e,t){return this._addField(e,p(f({},t),{type:"number"}))},s.addSecurityCodeField=function(e,t){return this._addField(e,p(f({},t),{type:"securityCode"}))},s.addExpirationDateField=function(e,t){return this._addField(e,p(f({},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,a=[{key:"Events",get:function(){return e}},{key:"version",get:function(){}}],null&&u(r.prototype,null),a&&u(r,a),n}();return r})()));

package/lib/types.d.ts

@@ -9,9 +9,14 @@ export declare type Field = {
     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 SupportedCSSProperties = 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 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,3 @@
+export * from './is';
+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/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.2.0",
+  "version": "0.3.0",
   "description": "Gr4vy-hosted secure fields offering advanced theming, PCI compliance, event handling, and more.",
   "main": "lib/index",
   "types": "lib/index",
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5c07139edd2d6f5ea95bfd2b850ff3bb8434609b"
+  "gitHead": "a4c39f0df7915ec2faa50de468e6431161cf0bed"
 }