@paydock/client-sdk 1.104.3-beta → 1.105.1

package/lib/components/iframe-event.js

@@ -0,0 +1,75 @@
+import { Event } from "../helper/event";
+export const EVENT = {
+    AFTER_LOAD: 'afterLoad',
+    SUBMIT: 'submit',
+    FINISH: 'finish',
+    VALIDATION_ERROR: 'validationError',
+    SYSTEM_ERROR: 'systemError',
+    CHECKOUT_SUCCESS: 'checkoutSuccess',
+    CHECKOUT_READY: 'checkoutReady',
+    CHECKOUT_ERROR: 'checkoutError',
+    CHECKOUT_COMPLETED: 'checkoutCompleted',
+    VALIDATION: 'validation',
+    SELECT: 'select',
+    UNSELECT: 'unselect',
+    NEXT: 'next',
+    PREV: 'prev',
+    META_CHANGE: 'metaChange',
+    RESIZE: 'resize',
+    CHARGE_AUTH_SUCCESS: 'chargeAuthSuccess',
+    CHARGE_AUTH_REJECT: 'chargeAuthReject',
+    CHARGE_AUTH_CANCELLED: 'chargeAuthCancelled',
+    ADDITIONAL_DATA_SUCCESS: 'additionalDataCollectSuccess',
+    ADDITIONAL_DATA_REJECT: 'additionalDataCollectReject',
+    CHARGE_AUTH: 'chargeAuth',
+    DISPATCH_SUCCESS: 'dispatchSuccess',
+    DISPATCH_ERROR: 'dispatchError',
+};
+export class IFrameEvent {
+    constructor(subject) {
+        this.listeners = [];
+        if (!subject)
+            return;
+        Event.subscribe('message', subject, (event) => {
+            let data;
+            try {
+                data = JSON.parse(event.data);
+            }
+            catch (error) { }
+            if (!data) // @TODO add filter on message_source
+                return;
+            this.emit(data);
+        });
+    }
+    emit(data) {
+        for (let key in this.listeners) {
+            if (this.listeners[key].event === data.event && data.widget_id === this.listeners[key].widget_id)
+                this.listeners[key].listener.apply(this, [data]);
+        }
+    }
+    on(eventName, widgetId, cb) {
+        for (let event in EVENT) {
+            if (!EVENT.hasOwnProperty(event))
+                continue;
+            if (eventName === EVENT[event]) {
+                this.listeners.push({
+                    event: eventName,
+                    listener: cb,
+                    widget_id: widgetId,
+                });
+            }
+        }
+    }
+    clear() {
+        this.listeners = [];
+    }
+    subscribe(subject, listener) {
+        if (subject.addEventListener) {
+            subject.addEventListener("message", listener);
+        }
+        else {
+            subject.attachEvent("onmessage", listener);
+        }
+    }
+}
+//# sourceMappingURL=../../src/lib/components/iframe-event.js.map

package/lib/components/iframe-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iframe-event.js","sourceRoot":"","sources":["../../components/iframe-event.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,iBAAiB,CAAC;AAwBtC,MAAM,CAAC,MAAM,KAAK,GAAG;IACjB,UAAU,EAAE,WAAW;IACvB,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,gBAAgB,EAAE,iBAAiB;IACnC,YAAY,EAAE,aAAa;IAC3B,gBAAgB,EAAE,iBAAiB;IACnC,cAAc,EAAE,eAAe;IAC/B,cAAc,EAAE,eAAe;IAC/B,kBAAkB,EAAE,mBAAmB;IACvC,UAAU,EAAE,YAAY;IACxB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,YAAY;IACzB,MAAM,EAAE,QAAQ;IAChB,mBAAmB,EAAE,mBAAmB;IACxC,kBAAkB,EAAE,kBAAkB;IACtC,qBAAqB,EAAE,qBAAqB;IAC5C,uBAAuB,EAAE,8BAA8B;IACvD,sBAAsB,EAAE,6BAA6B;IACrD,WAAW,EAAE,YAAY;IACzB,gBAAgB,EAAE,iBAAiB;IACnC,cAAc,EAAE,eAAe;CAClC,CAAC;AAUF,MAAM,OAAO,WAAW;IAGpB,YAAY,OAAsB;QAFxB,cAAS,GAAc,EAAE,CAAC;QAGhC,IAAI,CAAC,OAAO;YACR,OAAO;QAEX,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,KAAmB,EAAE,EAAE;YACxD,IAAI,IAAuB,CAAC;YAC5B,IAAI;gBACA,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;aACjC;YAAC,OAAO,KAAK,EAAE,GAAE;YAElB,IAAI,CAAC,IAAI,EAAE,qCAAqC;gBAC5C,OAAO;YAEX,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC,CAAC,CAAC;IACP,CAAC;IAEM,IAAI,CAAC,IAAgB;QACxB,KAAI,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE;YAC3B,IAAI,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,SAAS;gBAC5F,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;SACxD;IACL,CAAC;IAEM,EAAE,CAAI,SAAiB,EAAE,QAAgB,EAAE,EAAqB;QACnE,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE;YACrB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;gBAC5B,SAAS;YAEb,IAAI,SAAS,KAAK,KAAK,CAAC,KAAK,CAAC,EAAE;gBAC5B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;oBAChB,KAAK,EAAE,SAAS;oBAChB,QAAQ,EAAE,EAAE;oBACZ,SAAS,EAAE,QAAQ;iBACtB,CAAC,CAAC;aACN;SACJ;IACL,CAAC;IAEM,KAAK;QACR,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;IACxB,CAAC;IAEO,SAAS,CAAC,OAAe,EAAE,QAAuC;QACtE,IAAI,OAAO,CAAC,gBAAgB,EAAE;YAC1B,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;SACjD;aAAM;YACG,OAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;SACrD;IACL,CAAC;CACJ"}

package/{bundles/types → lib}/components/iframe.d.ts

@@ -15,4 +15,3 @@ export declare class IFrame {
     getElement(): HTMLIFrameElement;
     setStyle(property: string, value: string): void;
 }
-//# sourceMappingURL=iframe.d.ts.map

package/lib/components/iframe.js

@@ -0,0 +1,62 @@
+export class IFrame {
+    constructor(container) {
+        this.container = container;
+    }
+    load(link, options = {}) {
+        if (!this.container.isExist() || this.isExist())
+            return;
+        let iFrame = document.createElement('iframe');
+        iFrame.setAttribute('src', link);
+        if (options.title)
+            iFrame.title = options.title;
+        this.container.getElement().appendChild(iFrame);
+    }
+    loadFromHtml(content, options = {}) {
+        if (!this.container.isExist() || this.isExist())
+            return;
+        let iFrame = document.createElement('iframe');
+        iFrame.setAttribute('height', '100%');
+        iFrame.setAttribute('width', '100%');
+        if (options.title)
+            iFrame.title = options.title;
+        const template = "<html><head><style>html, body {margin: 0;} iframe {border: 0; width: 100%}</style><title></title></head><body>{{content}}</body></html>";
+        this.container.getElement().appendChild(iFrame);
+        let iFrameDocument = this.getElement().contentDocument;
+        iFrameDocument.open();
+        iFrameDocument.write(template.replace('{{content}}', content));
+        iFrameDocument.close();
+    }
+    remove() {
+        if (!this.container.isExist() || !this.isExist())
+            return;
+        let iFrame = this.getElement();
+        this.container.getElement().removeChild(iFrame);
+    }
+    show() {
+        if (!this.isExist())
+            return;
+        this.setStyle('visibility', 'visible');
+        this.setStyle('display', 'block');
+    }
+    hide(saveSize = false) {
+        if (!this.isExist())
+            return;
+        if (saveSize)
+            this.setStyle('visibility', 'hidden');
+        else
+            this.setStyle('display', 'none');
+    }
+    isExist() {
+        return !!(this.getElement());
+    }
+    getElement() {
+        if (!this.container.isExist())
+            return null;
+        return this.container.getElement().querySelector('iframe');
+    }
+    setStyle(property, value) {
+        let iFrame = this.getElement();
+        iFrame.style[property] = value;
+    }
+}
+//# sourceMappingURL=../../src/lib/components/iframe.js.map

package/lib/components/iframe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iframe.js","sourceRoot":"","sources":["../../components/iframe.ts"],"names":[],"mappings":"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"}

package/{bundles/types → lib}/components/link.d.ts

@@ -1,5 +1,5 @@
 import { IParams, IVisaSRCParams, IWalletParams } from './param';
-import { Env } from '../configs/env';
+import { Env } from '../configs/env/env';
 export declare const WIDGET_LINK = "/remote-action";
 export declare const VAULT_DISPLAY_WIDGET_LINK = "/vault-display";
 export declare const PAYMENT_SOURCE_LINK = "/payment-sources";
@@ -22,4 +22,3 @@ export declare class Link {
     getEnv(): string;
     getBaseUrl(): string;
 }
-//# sourceMappingURL=link.d.ts.map

package/lib/components/link.js

@@ -0,0 +1,59 @@
+import { Env, WIDGET_URL } from '../configs/env/env';
+import { Url } from "../helper/url";
+import { Uuid } from '../helper/uuid';
+export const WIDGET_LINK = '/remote-action';
+export const VAULT_DISPLAY_WIDGET_LINK = '/vault-display';
+export const PAYMENT_SOURCE_LINK = '/payment-sources';
+export const SECURE_3D = '/3ds/webhook';
+export const FLYPAY_LINK = '/wallet/flypay';
+export const FLYPAY_LOGO_LINK = '/images/logo.png';
+export const VISA_SRC = '/secure-remote-commerce/visa';
+export class Link {
+    constructor(linkResource) {
+        this.params = {};
+        this.widgetId = Uuid.generate();
+        this.linkResource = linkResource;
+        this.env = new Env(WIDGET_URL);
+        this.setParams({ widget_id: this.widgetId });
+    }
+    getNetUrl() {
+        return this.env.getConf().url + this.linkResource;
+    }
+    getUrl() {
+        let url = this.getNetUrl();
+        let params = this.getParams();
+        for (let key in params) {
+            if (params.hasOwnProperty(key))
+                url = Url.extendSearchParams(url, key, params[key]);
+        }
+        return url;
+    }
+    setParams(params) {
+        this.params = Object.assign({}, this.params, params);
+    }
+    concatParams(params) {
+        for (let key in params) {
+            if (!params.hasOwnProperty(key) || !params[key].length)
+                continue;
+            if (typeof this.params[key] !== 'string')
+                this.params[key] = '';
+            if (this.params[key].length)
+                this.params[key] += ',' + params[key];
+            else
+                this.params[key] += params[key];
+        }
+    }
+    getParams() {
+        return this.params;
+    }
+    setEnv(env, alias) {
+        this.env.setEnv(env, alias);
+    }
+    getEnv() {
+        return this.env.getEnv();
+    }
+    getBaseUrl() {
+        return this.env.getConf().url;
+    }
+}
+//# sourceMappingURL=../../src/lib/components/link.js.map

package/lib/components/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../components/link.ts"],"names":[],"mappings":"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"}

package/{bundles/types → lib}/components/loader.d.ts

@@ -2,4 +2,3 @@ export declare const TEMPLATE = "\n    <div class=\"cs-loader\">\n      <div cla
 export declare const STYLE = "\n    <style> \n        .cs-loader {\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n        }\n        \n        .cs-loader-inner {\n          transform: translateY(-50%);\n          top: 50%;\n          position: absolute;\n          width: calc(100% - 200px);\n          color: #8e8d8c;\n          padding: 0 100px;\n          text-align: center;\n        }\n        \n        \n        .cs-loader-inner label {\n          font-size: 20px;\n          opacity: 0;\n          display:inline-block;\n        }\n        \n        @keyframes lol {\n          0% {\n            opacity: 0;\n            transform: translateX(-300px);\n          }\n          33% {\n            opacity: 1;\n            transform: translateX(0px);\n          }\n          66% {\n            opacity: 1;\n            transform: translateX(0px);\n          }\n          100% {\n            opacity: 0;\n            transform: translateX(300px);\n          }\n        }\n        \n        @-webkit-keyframes lol {\n          0% {\n            opacity: 0;\n            -webkit-transform: translateX(-300px);\n          }\n          33% {\n            opacity: 1;\n            -webkit-transform: translateX(0px);\n          }\n          66% {\n            opacity: 1;\n            -webkit-transform: translateX(0px);\n          }\n          100% {\n            opacity: 0;\n            -webkit-transform: translateX(300px);\n            -moz-transform: translateX(300px);\n          }\n        }\n        \n        .cs-loader-inner label:nth-child(6) {\n          -webkit-animation: lol 3s infinite ease-in-out;\n          -moz-animation: lol 3s infinite ease-in-out;\n          animation: lol 3s infinite ease-in-out;\n        }\n        \n        .cs-loader-inner label:nth-child(5) {\n          -webkit-animation: lol 3s 100ms infinite ease-in-out;\n          -moz-animation: lol 3s 100ms infinite ease-in-out;\n          animation: lol 3s 100ms infinite ease-in-out;\n        }\n        \n        .cs-loader-inner label:nth-child(4) {\n          -webkit-animation: lol 3s 200ms infinite ease-in-out;\n          -moz-animation: lol 3s 200ms infinite ease-in-out;\n          animation: lol 3s 200ms infinite ease-in-out;\n        }\n        \n        .cs-loader-inner label:nth-child(3) {\n          -webkit-animation: lol 3s 300ms infinite ease-in-out;\n          -moz-animation: lol 3s 300ms infinite ease-in-out;\n          animation: lol 3s 300ms infinite ease-in-out;\n        }\n        \n        .cs-loader-inner label:nth-child(2) {\n          -webkit-animation: lol 3s 400ms infinite ease-in-out;\n          -moz-animation: lol 3s 400ms infinite ease-in-out;\n          animation: lol 3s 400ms infinite ease-in-out;\n        }\n        \n        .cs-loader-inner label:nth-child(1) {\n          -webkit-animation: lol 3s 500ms infinite ease-in-out;\n          -moz-animation: lol 3s 500ms infinite ease-in-out;\n          animation: lol 3s 500ms infinite ease-in-out;\n        }\n    </style>\n";
 export declare const EXTRA_TEMPLATE = "\n    <div class=\"circ\">\n      <div class=\"load\">A little patience ...</div>\n      <div class=\"hands\"></div>\n      <div class=\"body\"></div>\n      <div class=\"head\">\n        <div class=\"eye\"></div>\n      </div>\n    </div>\n";
 export declare const EXTRA_STYLE = "\n    <style>\n        html{width: 100%;height: 100%;}\n        body{margin: 0px;padding: 0px;background-color: #111;}\n        \n        .eye{\n          width: 20px; height: 8px;\n          background-color: #eee;\n          border-radius:0px 0px 20px 20px;\n          position: relative;\n          top: 40px;\n          left: 10px;\n          box-shadow:  40px 0px 0px 0px #eee;              \n        }\n        \n        .head{\n          -webkit-backface-visibility: hidden;\n          -moz-backface-visibility: hidden;\n          backface-visibility: hidden;          \n          position: relative;\n          margin: -250px auto;\n          width: 80px; height: 80px;\n          background-color: #111;\n          border-radius:50px;\n          box-shadow: inset -4px 2px 0px 0px #eee;\n           -webkit-animation:node 1.5s infinite alternate;\n          -webkit-animation-timing-function:ease-out;\n          -moz-animation:node 1.5s infinite alternate;\n          -moz-animation-timing-function:ease-out;\n          animation:node 1.5s infinite alternate;\n          animation-timing-function:ease-out;\n        }\n        .body{ \n          position: relative;\n          margin: 90px auto;\n          width: 140px; height: 120px;\n          background-color: #111;\n          border-radius: 50px/25px ;\n          box-shadow: inset -5px 2px 0px 0px #eee;\n          -webkit-animation:node2 1.5s infinite alternate;\n          -webkit-animation-timing-function:ease-out;  \n          -moz-animation:node2 1.5s infinite alternate;\n          -moz-animation-timing-function:ease-out;  \n          animation:node2 1.5s infinite alternate;\n          animation-timing-function:ease-out; \n        }\n        \n        @keyframes node {0%{ top:0px; }50%{ top:10px; }100% { top:0px;} }\n        @keyframes node2 {0%{ top:-5px; }50%{ top:10px; }100% { top:-5px;}}\n        @-moz-keyframes node {0%{ top:0px; }50%{ top:10px; }100% { top:0px;} }\n        @-moz-keyframes node2 {0%{ top:-5px; }50%{ top:10px; }100% { top:-5px;}}\n        @-webkit-keyframes node {0%{ top:0px; }50%{ top:10px; }100% { top:0px;} }\n        @-webkit-keyframes node2 {0%{ top:-5px; }50%{ top:10px; }100% { top:-5px;}}\n      \n               \n        .circ{\n          -webkit-backface-visibility: hidden;\n          -moz-backface-visibility: hidden;\n          backface-visibility: hidden;\n           margin: 60px auto;\n          width: 180px; height: 180px;\n          background-color: #111;\n          border-radius: 0px 0px 50px 50px;\n          position: relative;\n          z-index: -1;  \n          left: 0%;\n          top: 20%;\n          overflow: hidden;\n        }\n        \n        .hands{\n          -webkit-backface-visibility: hidden;\n          -moz-backface-visibility: hidden;\n          backface-visibility: hidden;\n          margin-top: 140px;\n          width: 120px;height: 120px;\n          position: absolute;\n          background-color: #111;\n          border-radius:20px;\n          box-shadow:-1px -4px 0px 0px #eee;\n          transform:rotate(45deg);\n          -webkit-transform:rotate(45deg);\n          -mox-transform:rotate(45deg);\n          top:75%;left: 16%;\n          z-index: 1;\n          -webkit-animation:node2 1.5s infinite alternate;\n          -webkit-animation-timing-function:ease-out;\n          -moz-animation:node2 1.5s infinite alternate;\n          -moz-animation-timing-function:ease-out;\n          animation:node2 1.5s infinite alternate;\n          animation-timing-function:ease-out;\n        }\n        \n        .load{  position: absolute;\n          width: 100px; height: 20px;\n           margin: -10px auto;\n           -webkit-font-smoothing: antialiased;\n          -moz-font-smoothing: antialiased;\n          font-smoothing: antialiased;\n          font-family: 'Julius Sans One', sans-serif;\n          font-size:30px;\n          font-weight:400;\n          color:#eee;\n          left: 10%;\n          top: 5%;\n        }\n    </style>\n";
-//# sourceMappingURL=loader.d.ts.map

package/lib/components/loader.js

@@ -0,0 +1,234 @@
+export const TEMPLATE = `
+    <div class="cs-loader">
+      <div class="cs-loader-inner">
+        <label>	●</label>
+        <label>	●</label>
+        <label>	●</label>
+        <label>	●</label>
+        <label>	●</label>
+        <label>	●</label>
+      </div>
+    </div>
+`;
+export const STYLE = `
+    <style> 
+        .cs-loader {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          width: 100%;
+        }
+        
+        .cs-loader-inner {
+          transform: translateY(-50%);
+          top: 50%;
+          position: absolute;
+          width: calc(100% - 200px);
+          color: #8e8d8c;
+          padding: 0 100px;
+          text-align: center;
+        }
+        
+        
+        .cs-loader-inner label {
+          font-size: 20px;
+          opacity: 0;
+          display:inline-block;
+        }
+        
+        @keyframes lol {
+          0% {
+            opacity: 0;
+            transform: translateX(-300px);
+          }
+          33% {
+            opacity: 1;
+            transform: translateX(0px);
+          }
+          66% {
+            opacity: 1;
+            transform: translateX(0px);
+          }
+          100% {
+            opacity: 0;
+            transform: translateX(300px);
+          }
+        }
+        
+        @-webkit-keyframes lol {
+          0% {
+            opacity: 0;
+            -webkit-transform: translateX(-300px);
+          }
+          33% {
+            opacity: 1;
+            -webkit-transform: translateX(0px);
+          }
+          66% {
+            opacity: 1;
+            -webkit-transform: translateX(0px);
+          }
+          100% {
+            opacity: 0;
+            -webkit-transform: translateX(300px);
+            -moz-transform: translateX(300px);
+          }
+        }
+        
+        .cs-loader-inner label:nth-child(6) {
+          -webkit-animation: lol 3s infinite ease-in-out;
+          -moz-animation: lol 3s infinite ease-in-out;
+          animation: lol 3s infinite ease-in-out;
+        }
+        
+        .cs-loader-inner label:nth-child(5) {
+          -webkit-animation: lol 3s 100ms infinite ease-in-out;
+          -moz-animation: lol 3s 100ms infinite ease-in-out;
+          animation: lol 3s 100ms infinite ease-in-out;
+        }
+        
+        .cs-loader-inner label:nth-child(4) {
+          -webkit-animation: lol 3s 200ms infinite ease-in-out;
+          -moz-animation: lol 3s 200ms infinite ease-in-out;
+          animation: lol 3s 200ms infinite ease-in-out;
+        }
+        
+        .cs-loader-inner label:nth-child(3) {
+          -webkit-animation: lol 3s 300ms infinite ease-in-out;
+          -moz-animation: lol 3s 300ms infinite ease-in-out;
+          animation: lol 3s 300ms infinite ease-in-out;
+        }
+        
+        .cs-loader-inner label:nth-child(2) {
+          -webkit-animation: lol 3s 400ms infinite ease-in-out;
+          -moz-animation: lol 3s 400ms infinite ease-in-out;
+          animation: lol 3s 400ms infinite ease-in-out;
+        }
+        
+        .cs-loader-inner label:nth-child(1) {
+          -webkit-animation: lol 3s 500ms infinite ease-in-out;
+          -moz-animation: lol 3s 500ms infinite ease-in-out;
+          animation: lol 3s 500ms infinite ease-in-out;
+        }
+    </style>
+`;
+export const EXTRA_TEMPLATE = `
+    <div class="circ">
+      <div class="load">A little patience ...</div>
+      <div class="hands"></div>
+      <div class="body"></div>
+      <div class="head">
+        <div class="eye"></div>
+      </div>
+    </div>
+`;
+export const EXTRA_STYLE = `
+    <style>
+        html{width: 100%;height: 100%;}
+        body{margin: 0px;padding: 0px;background-color: #111;}
+        
+        .eye{
+          width: 20px; height: 8px;
+          background-color: #eee;
+          border-radius:0px 0px 20px 20px;
+          position: relative;
+          top: 40px;
+          left: 10px;
+          box-shadow:  40px 0px 0px 0px #eee;              
+        }
+        
+        .head{
+          -webkit-backface-visibility: hidden;
+          -moz-backface-visibility: hidden;
+          backface-visibility: hidden;          
+          position: relative;
+          margin: -250px auto;
+          width: 80px; height: 80px;
+          background-color: #111;
+          border-radius:50px;
+          box-shadow: inset -4px 2px 0px 0px #eee;
+           -webkit-animation:node 1.5s infinite alternate;
+          -webkit-animation-timing-function:ease-out;
+          -moz-animation:node 1.5s infinite alternate;
+          -moz-animation-timing-function:ease-out;
+          animation:node 1.5s infinite alternate;
+          animation-timing-function:ease-out;
+        }
+        .body{ 
+          position: relative;
+          margin: 90px auto;
+          width: 140px; height: 120px;
+          background-color: #111;
+          border-radius: 50px/25px ;
+          box-shadow: inset -5px 2px 0px 0px #eee;
+          -webkit-animation:node2 1.5s infinite alternate;
+          -webkit-animation-timing-function:ease-out;  
+          -moz-animation:node2 1.5s infinite alternate;
+          -moz-animation-timing-function:ease-out;  
+          animation:node2 1.5s infinite alternate;
+          animation-timing-function:ease-out; 
+        }
+        
+        @keyframes node {0%{ top:0px; }50%{ top:10px; }100% { top:0px;} }
+        @keyframes node2 {0%{ top:-5px; }50%{ top:10px; }100% { top:-5px;}}
+        @-moz-keyframes node {0%{ top:0px; }50%{ top:10px; }100% { top:0px;} }
+        @-moz-keyframes node2 {0%{ top:-5px; }50%{ top:10px; }100% { top:-5px;}}
+        @-webkit-keyframes node {0%{ top:0px; }50%{ top:10px; }100% { top:0px;} }
+        @-webkit-keyframes node2 {0%{ top:-5px; }50%{ top:10px; }100% { top:-5px;}}
+      
+               
+        .circ{
+          -webkit-backface-visibility: hidden;
+          -moz-backface-visibility: hidden;
+          backface-visibility: hidden;
+           margin: 60px auto;
+          width: 180px; height: 180px;
+          background-color: #111;
+          border-radius: 0px 0px 50px 50px;
+          position: relative;
+          z-index: -1;  
+          left: 0%;
+          top: 20%;
+          overflow: hidden;
+        }
+        
+        .hands{
+          -webkit-backface-visibility: hidden;
+          -moz-backface-visibility: hidden;
+          backface-visibility: hidden;
+          margin-top: 140px;
+          width: 120px;height: 120px;
+          position: absolute;
+          background-color: #111;
+          border-radius:20px;
+          box-shadow:-1px -4px 0px 0px #eee;
+          transform:rotate(45deg);
+          -webkit-transform:rotate(45deg);
+          -mox-transform:rotate(45deg);
+          top:75%;left: 16%;
+          z-index: 1;
+          -webkit-animation:node2 1.5s infinite alternate;
+          -webkit-animation-timing-function:ease-out;
+          -moz-animation:node2 1.5s infinite alternate;
+          -moz-animation-timing-function:ease-out;
+          animation:node2 1.5s infinite alternate;
+          animation-timing-function:ease-out;
+        }
+        
+        .load{  position: absolute;
+          width: 100px; height: 20px;
+           margin: -10px auto;
+           -webkit-font-smoothing: antialiased;
+          -moz-font-smoothing: antialiased;
+          font-smoothing: antialiased;
+          font-family: 'Julius Sans One', sans-serif;
+          font-size:30px;
+          font-weight:400;
+          color:#eee;
+          left: 10%;
+          top: 5%;
+        }
+    </style>
+`;
+//# sourceMappingURL=../../src/lib/components/loader.js.map

package/lib/components/loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../components/loader.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;CAWvB,CAAC;AAGF,MAAM,CAAC,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGpB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;CAS7B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2G1B,CAAC"}

package/{bundles/types → lib}/components/param.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="applepayjs" />
 /// <reference types="googlepay" />
 import { IVisaSRCMeta } from "../secure-remote-commerce/interfaces";
+import type { CardValidatorValue, GenericValidatorValue } from "../constants/validators";
 export declare const PAYMENT_SOURCE_TYPE: {
     CARD: string;
     BANK_ACCOUNT: string;
@@ -126,16 +127,13 @@ export interface IFormElement {
     placeholder?: string;
     value?: string;
 }
+export declare type ValidatorFieldsMapKey = CardValidatorValue | GenericValidatorValue;
+export declare type ValidatorFieldsMap = Partial<Record<ValidatorFieldsMapKey, string[]>>;
 export interface IFormValidation {
     form_valid?: boolean;
     invalid_fields?: string[];
     invalid_showed_fields?: string[];
-    validators?: IValidators;
-}
-export interface IValidators {
-    required?: string[];
-    cardNumberValidator?: string[];
-    expireDateValidation?: string[];
+    validators?: ValidatorFieldsMap;
 }
 export interface IStyles {
     background_color?: string;
@@ -332,7 +330,7 @@ export interface IPayPalShippingOption {
     currency: string;
     type: 'SHIPPING' | 'PICKUP';
 }
-export type IShippingOption = IApplePayShippingOption | IGooglePayShippingOption | IPayPalShippingOption;
+export declare type IShippingOption = IApplePayShippingOption | IGooglePayShippingOption | IPayPalShippingOption;
 export declare enum WALLET_GATEWAY {
     STRIPE = "Stripe",
     FLYPAY = "Flypay",
@@ -361,17 +359,17 @@ export interface AfterpayStyles {
     button_type?: 'black' | 'mint' | 'white';
     height?: string;
 }
-export type WalletStyles = {
+export declare type WalletStyles = {
     apple?: ApplePayStyles;
     google?: GooglePayStyles;
     afterpay?: AfterpayStyles;
 } | object;
-export type WalletRawDataInitialization = {
+export declare type WalletRawDataInitialization = {
     apple?: ApplePayRawDataInitialization;
     google?: GooglePayRawDataInitialization;
 } | object;
-export type ApplePayRawDataInitialization = ApplePayJS.ApplePayPaymentRequest;
-export type GooglePayRawDataInitialization = google.payments.api.IsReadyToPayPaymentMethodSpecification | google.payments.api.PaymentMethodSpecification;
+export declare type ApplePayRawDataInitialization = ApplePayJS.ApplePayPaymentRequest;
+export declare type GooglePayRawDataInitialization = google.payments.api.IsReadyToPayPaymentMethodSpecification | google.payments.api.PaymentMethodSpecification;
 export interface IWalletMeta {
     amount_label?: string;
     country?: string;
@@ -412,4 +410,3 @@ export interface ITokenWalletMeta {
         client_auth: string;
     };
 }
-//# sourceMappingURL=param.d.ts.map