@paydock/client-sdk 1.104.3-beta → 1.105.1

package/lib/widget/html-multi-widget.js

@@ -0,0 +1,422 @@
+import { MultiWidget } from "./multi-widget";
+import { Container } from "../components/container";
+import { IFrame } from "../components/iframe";
+import { IFrameEvent, EVENT } from "../components/iframe-event";
+import { Trigger, TRIGGER } from "../components/trigger";
+import { Event as EventHelper } from "../helper/event";
+import { FormInterceptor } from "../components/form-Interceptor";
+import { ELEMENT, FORM_FIELD, STYLE, TEXT } from '../components/param';
+import { ObjectHelper } from "../helper/object";
+/**
+ * Interface of data from validation event.
+ *
+ * @interface IFormValidation
+ *
+ * @param {string} event The name of the event.
+ * @param {string} message_source A system variable that identifies the event source.
+ * @param {string} purpose A system variable that states the purpose of the event.
+ * @param {string} [ref_id] Custom unique value that identifies result of processed operation.
+ * @param {boolean} [form_valid] Indicates wether or not the form is valid.
+ * @param {Array<string>} [invalid_fields] Names of form fields with invalid data.
+ * @param {Array<string>} [invalid_showed_fields] Names of invalid form fields which are already displaying the error.
+ * @param {Partial<Record<CardValidatorValue | GenericValidatorValue, Array<string>>>} [validators] Object containing validator identifiers as keys and the fields subject to that validator as an array of form field names.
+ *  See list of available [Generic Vallidators]{@link GENERIC_VALIDATORS} and [Card Validators]{@link CARD_VALIDATORS},
+ */
+/**
+ * Contains basic information associated with the event and additional meta data
+ * specific to the event. E.g., card info, gateway info, etc.
+ *
+ * @interface IEventMetaData
+ *
+ * @param {string} event The name of the event.
+ * @param {string} purpose A system variable that states the purpose of the event.
+ * @param {string} message_source A system variable that identifies the event source.
+ * @param {string} [ref_id] Custom unique value that identifies result of processed operation.
+ * @param {string} configuration_token Token received from our API with widget data
+ * @param {string} type Payment type 'card', 'bank_account'
+ * @param {string} gateway_type Gateway type
+ * @param {string} [card_number_last4] Last 4 digit of your card
+ * @param {string} [card_scheme] Card scheme, e.g., (Visa, Mastercard and American Express (AmEx))
+ * @param {number} [card_number_length] Card number length
+ * @param {string} [account_name] Bank account account name
+ * @param {string} [account_number] Bank account account number
+ * */
+/**
+ * Interface of data from event.
+ * @interface IEventAfterLoadData
+ *
+ * @param {string} event The name of the event.
+ * @param {string} purpose A system variable that states the purpose of the event.
+ * @param {string} message_source A system variable that identifies the event source.
+ * @param {string} [ref_id] Custom unique value that identifies result of processed operation.
+ * */
+/**
+ * Interface of data from event.
+ * @interface IEventFinishData
+ *
+ * @param {string} event The name of the event.
+ * @param {string} purpose A system variable that states the purpose of the event.
+ * @param {string} message_source A system variable that identifies the event source.
+ * @param {string} [ref_id] Custom unique value that identifies result of processed operation.
+ * @param {string} payment_source One time token. Result from this endpoint [API docs](https://docs.paydock.com/#tokens)
+ * */
+/**
+ * List of available event's name
+ * @const EVENT
+ *
+ * @type {object}
+ * @param {string} AFTER_LOAD=afterLoad
+ * @param {string} SUBMIT=submit
+ * @param {string} FINISH=finish
+ * @param {string} VALIDATION=validation
+ * @param {string} VALIDATION_ERROR=validationError
+ * @param {string} SYSTEM_ERROR=systemError
+ * @param {string} META_CHANGE=metaChange
+ * @param {string} RESIZE=resize
+ */
+/**
+ * List of available event's name
+ * @const VAULT_DISPLAY_EVENT
+ *
+ * @type {object}
+ * @param {string} AFTER_LOAD=afterLoad
+ * @param {string} SYSTEM_ERROR=system_error
+ * @param {string} CVV_SECURE_CODE_REQUESTED=cvv_secure_code_requested
+ * @param {string} CARD_NUMBER_SECURE_CODE_REQUESTED=card_number_secure_code_requested
+ * @param {string} ACCESS_FORBIDDEN=access_forbidden
+ * @param {string} SESSION_EXPIRED=systemError
+ * @param {string} SYSTEM_ERROR=session_expired
+ * @param {string} OPERATION_FORBIDDEN=operation_forbidden
+ */
+/**
+ * Class HtmlMultiWidget include method for working with html
+ * @constructor
+ * @extends MultiWidget
+ *
+ * @param {string} selector - Selector of html element. Container for widget
+ * @param {string} publicKey - PayDock users public key
+ * @param {(Configuration | string | Configuration[] | string[])} conf - exemplar[s] Configuration class OR configuration token
+ * @example
+ * var widget = new MultiWidget('#widget', 'publicKey','configurationToken'); // With a pre-created configuration token
+ *
+ * var widget = new MultiWidget('#widget', 'publicKey',['configurationToken', 'configurationToken2']); // With pre-created configuration tokens
+ *
+ * var widget = new MultiWidget('#widget', 'publicKey', new Configuration('gatewayId')); With Configuration
+ *
+ * var widget = new MultiWidget('#widget', 'publicKey',[ With Configurations
+ *      Configuration(), // default gateway_id,
+ *      Configuration('not_configured'), // without gateway,
+ *      Configuration('gatewayId'),
+ *      Configuration('gatewayId', 'bank_account')
+ * ]);
+ */
+class HtmlMultiWidget extends MultiWidget {
+    /** @constructs */ // constructs added for correct parse classes jsdoc2md
+    constructor(selector, publicKey, conf) {
+        super(publicKey, conf);
+        this.validationData = {};
+        this.container = new Container(selector);
+        this.iFrame = new IFrame(this.container);
+        this.triggerElement = new Trigger(this.iFrame);
+        this.event = new IFrameEvent(window);
+    }
+    /**
+     * Loads the widget.
+     *
+     * Calling this method results in an iframe element being inserted and rendered in the DOM.
+     */
+    load() {
+        this.setStyles(this.container.getStyles(ObjectHelper.values(STYLE)));
+        this.setTexts(this.container.getAttr(ObjectHelper.values(TEXT)));
+        this.loadIFrameUrl((url) => {
+            this.iFrame.load(url, { title: 'Card details' });
+            this.afterLoad();
+        }, (errors) => {
+            console.error('Errors when creating a token[s, widget will not be load:');
+            for (let index in errors) {
+                if (errors.hasOwnProperty(index))
+                    console.error(`--- | ${errors[index]}`);
+            }
+        });
+    }
+    /**
+     * Registers a form validation callback for validation events.
+     */
+    afterLoad() {
+        this.on(EVENT.VALIDATION, (data) => {
+            this.validationData = data;
+        });
+    }
+    on(eventName, cb) {
+        if (typeof cb === "function")
+            return this.event.on(eventName, this.link.getParams().widget_id, cb);
+        return new Promise((resolve) => this.event.on(eventName, this.link.getParams().widget_id, (res) => resolve(res)));
+    }
+    /**
+     * Registers callback that will be invoked for every trigger.
+     *
+     * @param {'submit_form' | 'tab'} triggers - The Widget element identifier that caused the trigger.
+     * @param {ITriggerData} data - Data that will be sent to the widget when the trigger occurs.
+     */
+    trigger(triggerName, data = {}) {
+        this.triggerElement.push(triggerName, data);
+    }
+    /**
+     * Gets a reference to the form current validation state.
+     *
+     * !Warning: do not directly modify the values of the returned object.
+     *
+     * @return {IFormValidation} Form validation object
+     */
+    getValidationState() {
+        return this.validationData;
+    }
+    /**
+     * Checks if a given form is valid.
+     *
+     * A form is valid if all form fields are valid.
+     *
+     * @return {boolean} Indicates wether or not form is valid.
+     */
+    isValidForm() {
+        return !!this.validationData.form_valid;
+    }
+    /**
+     * Using this method you can check if a specific form field is invalid
+     *
+     * @param {string} field - Field name
+     * @return {boolean} Field is invalid
+     */
+    isInvalidField(field = '') {
+        if (!this.validationData.invalid_fields)
+            return false;
+        return this.validationData.invalid_fields.indexOf(field) !== -1;
+    }
+    /**
+     * Checks if a given form field is displaying an error.
+     *
+     * @param {string} field - The form field name
+     *
+     * @return {boolean} Indicates wether or not the Error message is being displayed on the associated field.
+     */
+    isFieldErrorShowed(field = '') {
+        if (!this.validationData.invalid_showed_fields)
+            return false;
+        return this.validationData.invalid_showed_fields.indexOf(field) !== -1;
+    }
+    /**
+     * Checks if a given form field is valid or invalid by name.
+     *
+     * @param {string} field - The form field name
+     * @param validator - The name of the validator.
+     *
+     * @return {boolean} Indicates wether or not the field is invalid based on validator intepretation.
+     */
+    isInvalidFieldByValidator(field = '', validator) {
+        const isValid = false; // is not invalid
+        if (!this.validationData.validators) {
+            return isValid;
+        }
+        const subjectFields = this.validationData.validators[validator];
+        if (!subjectFields) {
+            return isValid;
+        }
+        return subjectFields.indexOf(field) !== -1;
+    }
+    /**
+     * Hides the widget.
+     *
+     * E.g., use this method to hide the widget after it loads.
+     *
+     * @param {boolean} [saveSize=false] Wether the original iframe element size should be saved before being hidden.
+     */
+    hide(saveSize) {
+        this.iFrame.hide(saveSize);
+    }
+    /**
+     * Shows the widget.
+     *
+     * E.g., use this method to show the widget after it was explicitly hidden.
+     */
+    show() {
+        this.iFrame.show();
+    }
+    /**
+     * Reloads the widget.
+     */
+    reload() {
+        this.iFrame.remove();
+        this.load();
+    }
+    /**
+     * Hides the specified Widget elements by their identifier.
+     *
+     * @example
+     *
+     * ```javascript
+     * widget.hideElements(['submit_button', 'email']);
+     * ```
+     *
+     * @param {string[]} elements - List of element which can be hidden [ELEMENT]{@link ELEMENT} || [FORM_FIELD]{@link FORM_FIELD}
+     */
+    hideElements(elements) {
+        let filteredElements = [];
+        let supportedElements = ObjectHelper.values(ELEMENT).concat(ObjectHelper.values(FORM_FIELD));
+        for (let index in elements) {
+            if (!elements.hasOwnProperty(index))
+                continue;
+            if (supportedElements.indexOf(elements[index]) !== -1)
+                filteredElements.push(elements[index]);
+            else
+                console.warn(`Widget::hideElements: unsupported element ${elements[index]}`);
+        }
+        if (filteredElements.length)
+            this.trigger(TRIGGER.HIDE_ELEMENTS, { elements: filteredElements.join(',') });
+    }
+    /**
+     * Shows the specified Widget elements by their identifier.
+     *
+     * @example
+     *
+     * ```javascript
+     * widget.showElements(['submit_button', 'email']);
+     * ```
+     *
+     * @param {string[]} elements - List of elements which can be showed [ELEMENT]{@link ELEMENT} || [FORM_FIELD]{@link FORM_FIELD}
+     */
+    showElements(elements) {
+        let filteredElements = [];
+        let supportedElements = ObjectHelper.values(ELEMENT).concat(ObjectHelper.values(FORM_FIELD));
+        for (let index in elements) {
+            if (!elements.hasOwnProperty(index))
+                continue;
+            if (supportedElements.indexOf(elements[index]) !== -1)
+                filteredElements.push(elements[index]);
+            else
+                console.warn(`Widget::showElements: unsupported element ${elements[index]}`);
+        }
+        if (filteredElements.length)
+            this.trigger(TRIGGER.SHOW_ELEMENTS, { elements: filteredElements.join(',') });
+    }
+    /**
+     * Updates the form field values inside the widget.
+     *
+     * @example
+     *
+     * ```javascript
+     * widget.updateFormValues({
+     *   email: 'predefined@email.com',
+     *   card_name: 'Houston'
+     * });
+     *```
+     *
+     * @param {IFormValues} fieldValues - Fields with values
+     */
+    updateFormValues(fieldValues) {
+        for (let key in fieldValues) {
+            if (fieldValues.hasOwnProperty(key))
+                this.updateFormValue(key, fieldValues[key]);
+        }
+    }
+    /**
+     * Updates a single form field values inside the widget by the form field name.
+     *
+     * @example
+     *
+     * ```javascript
+     * widget.updateFormValue("card_name", "John Doe");
+     *```
+     *
+     * @param {string} key - The form field name
+     * @param {string} value - The form field value
+     */
+    updateFormValue(key, value) {
+        if (ObjectHelper.values(FORM_FIELD).indexOf(key) === -1)
+            return console.warn(`Widget::setFormValues[s: unsupported field ${key}`);
+        if (/\,/.test(value) || /\:/.test(value))
+            return console.warn(`Widget::setFormValues[s: ${key} - unsupported symbols (: or ,) in value`);
+        this.trigger(TRIGGER.UPDATE_FORM_VALUES, { form_values: `${key}:${value}` });
+    }
+    /**
+     * Inserts the event data (after finish event) onto the input field associated with the provided CSS selector.
+     *
+     * @param {string} selector - A CSS selector. E.g., ".my-class", "#my-id", or others
+     * @param {string} dataType - The data type of IEventData object.
+     */
+    onFinishInsert(selector, dataType) {
+        this.on(EVENT.FINISH, (event) => {
+            EventHelper.insertToInput(selector, dataType, event);
+        });
+    }
+    /**
+     * Intercepts a form submission and delegates processing to the widget.
+     *
+     * An simplified example of the process:
+     * - User clicks submit button in your form
+     * - This implicitly triggers a submission to the widget
+     * - The widget submits your form
+     *
+     * @note The widget's submit button will be hidden.
+     *
+     * @param {string} selector - css selector of your form
+     *
+     * @example
+     *
+     * ```html
+     * <body>
+     *  <form id="myForm">
+     *      <input name="amount">
+     *      <button type="submit">Submit</button>
+     *  </form>
+     *  <script>
+     *     widget.interceptSubmitForm('#myForm');
+     *  </script>
+     * </body>
+     * ```
+     */
+    interceptSubmitForm(selector) {
+        this.setHiddenElements([ELEMENT.SUBMIT_BUTTON]);
+        let formInterceptor = new FormInterceptor(selector);
+        formInterceptor.beforeSubmit(() => {
+            this.triggerElement.push(TRIGGER.SUBMIT_FORM, {});
+            this.event.on(EVENT.FINISH, this.link.getParams().widget_id, () => {
+                formInterceptor.continueSubmit();
+            });
+        });
+    }
+    /**
+     * This method hides a submit button and automatically execute form submit
+     */
+    useCheckoutAutoSubmit() {
+        this.setHiddenElements([ELEMENT.SUBMIT_BUTTON]);
+        this.on(EVENT.CHECKOUT_SUCCESS, (data) => {
+            this.trigger(TRIGGER.SUBMIT_FORM);
+        });
+        this.on(EVENT.VALIDATION_ERROR, (data) => {
+            this.trigger(TRIGGER.REFRESH_CHECKOUT);
+        });
+        this.on(EVENT.SYSTEM_ERROR, (data) => {
+            this.trigger(TRIGGER.REFRESH_CHECKOUT);
+        });
+    }
+    /**
+     * Use this method for resize iFrame according content height
+     *
+     * @example
+     *
+     * ```javascript
+     * widget.useAutoResize();
+     *```
+     */
+    useAutoResize() {
+        this.on(EVENT.RESIZE, (data) => {
+            if (this.iFrame.getElement()) {
+                this.iFrame.getElement().scrolling = 'no';
+                if (data.height)
+                    this.iFrame.setStyle('height', data.height + 'px');
+            }
+        });
+    }
+}
+export { HtmlMultiWidget };
+//# sourceMappingURL=../../src/lib/widget/html-multi-widget.js.map

package/lib/widget/html-multi-widget.js.map

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

package/{bundles/types → lib}/widget/html-widget.d.ts

@@ -20,7 +20,7 @@ import { IBamboraMeta, IFormElement, IPayPalMeta } from "../components/param";
  * @param {string} [purpose=payment_source] - Purpose of widget form. Available parameters: ‘payment_source’, ‘card_payment_source_with_cvv’, ‘card_payment_source_without_cvv’
  */
 declare class HtmlWidget extends HtmlMultiWidget {
-    constructor(selector: string, publicKey: string, gatewayID?: string, paymentType?: string, purpose?: string);
+    /** @constructs */ constructor(selector: string, publicKey: string, gatewayID?: string, paymentType?: string, purpose?: string);
     /**
      * Destination, where customer will receive all successful responses.
      * Response will contain “data” object with “payment_source” or other parameters, in depending on 'purpose'
@@ -103,4 +103,3 @@ declare class HtmlWidget extends HtmlMultiWidget {
     setGiftCardScheme(giftCardScheme: any, processingNetwork: any): void;
 }
 export { HtmlWidget };
-//# sourceMappingURL=html-widget.d.ts.map

package/lib/widget/html-widget.js

@@ -0,0 +1,127 @@
+import { Configuration } from "./configuration";
+import { HtmlMultiWidget } from "./html-multi-widget";
+/**
+ * Class Widget include method for working on html and include extended by HtmlMultiWidget methods
+ * @constructor
+ * @extends HtmlMultiWidget
+ * @extends MultiWidget
+ *
+ * @example
+ * var widget = new HtmlWidget('#widget', 'publicKey', 'gatewayID'); // short
+ *
+ * var widget = new HtmlWidget('#widget', 'publicKey', 'gatewayID', 'bank_account', 'payment_source'); // extend
+ *
+ * var widget = new HtmlWidget('#widget', 'publicKey', 'not_configured'); // without gateway
+ *
+ * @param {string} selector - Selector of html element. Container for widget
+ * @param {string} publicKey - PayDock users public key
+ * @param {string} [gatewayID=default] - ID of a gateway connected to PayDock. By default or if put 'default', it will use the selected default gateway. If put 'not_configured', it won’t use gateway to create downstream token.
+ * @param {string} [paymentType=card] - Type of payment source which shows in widget form. Available parameters : “card”, “bank_account”.
+ * @param {string} [purpose=payment_source] - Purpose of widget form. Available parameters: ‘payment_source’, ‘card_payment_source_with_cvv’, ‘card_payment_source_without_cvv’
+ */
+class HtmlWidget extends HtmlMultiWidget {
+    /** @constructs */ // constructs added for correct parse classes jsdoc2md
+    constructor(selector, publicKey, gatewayID = 'default', paymentType, purpose) {
+        let conf = new Configuration(gatewayID, paymentType, purpose);
+        super(selector, publicKey, conf);
+    }
+    /**
+     * Destination, where customer will receive all successful responses.
+     * Response will contain “data” object with “payment_source” or other parameters, in depending on 'purpose'
+     *
+     * @example
+     * widget.setWebHookDestination('http://google.com');
+     *
+     * @param {string} url - Your endpoint for post request.
+     */
+    setWebHookDestination(url) {
+        this.configs[0].setWebHookDestination(url);
+    }
+    /**
+     * URL to which the Customer will be redirected to after the success finish
+     *
+     * @example
+     * widget.setSuccessRedirectUrl('google.com/search?q=success');
+     *
+     * @param {string}  url
+     */
+    setSuccessRedirectUrl(url) {
+        this.configs[0].setSuccessRedirectUrl(url);
+    }
+    /**
+     * URL to which the Customer will be redirected to if an error is triggered in the process of operation
+     *
+     * @example
+     * widget.setErrorRedirectUrl('google.com/search?q=error');
+     *
+     * @param {string} url
+     */
+    setErrorRedirectUrl(url) {
+        this.configs[0].setErrorRedirectUrl(url);
+    }
+    /**
+     *  Set list with widget form field, which will be shown in form. Also you can set the required validation for these fields
+     *
+     * @example
+     * widget.setFormFields(['phone', 'email', 'first_name*']);
+     *
+     * @param {string[]} fields - name of fields which can be shown in a widget.
+     * If after a name of a field, you put “*”, this field will be required on client-side. (For validation, you can specify any fields, even those that are shown by default: card_number, expiration, etc... ) [FORM_FIELD]{@link FORM_FIELD}
+     */
+    setFormFields(fields) {
+        this.configs[0].setFormFields(fields);
+    }
+    /**
+     * The method to set the full configuration for the all specific form elements (visibility, required, label, placeholder, value)
+     * You can also use the other method for the partial configuration like: setFormFields, setFormValues, setFormPlaceholder, setFormLabel
+     *
+     * @example
+     *   widget.setFormElements([
+     *       {
+     *           field:  'card_name*',
+     *           placeholder: 'Input your card holder name...',
+     *           label: 'Card Holder Name',
+     *           value: 'Houston',
+     *       },
+     *       {
+     *           field:  'email',
+     *           placeholder: 'Input your email, like test@example.com',
+     *           label: 'Email for the receipt',
+     *           value: 'predefined@email.com',
+     *       },
+     *   ])
+     *
+     * @param { Object[] } elements - List of elements
+     * @param { string } elements[].field - Field name of element. If after a name of a field, you put “*”, this field will be required on client-side. (For validation, you can specify any fields, even those that are shown by default: card_number, expiration, etc... ) [FORM_FIELD]{@link FORM_FIELD}
+     * @param { string } elements[].placeholder - Set custom placeholders in form fields
+     * @param { string } elements[].label - Set a custom labels near the form field
+     * @param { string } elements[].value - Set predefined values for the form field
+     */
+    setFormElements(elements) {
+        elements.forEach((element) => this.setFormElement(element));
+    }
+    setFormElement(element) {
+        this.configs[0].setFormFields([element.field]);
+        super.setFormElement(Object.assign(Object.assign({}, element), { field: element.field.replace('*', '') }));
+    }
+    /**
+     * The method to set meta information for the checkout page
+     *
+     * @example
+     * config.setMeta({
+            brand_name: 'paydock',
+            reference: '15',
+            email: 'wault@paydock.com'
+        });
+     *
+     * @param {IPayPalMeta | IBamboraMeta} object - data which can be shown on checkout page [IPayPalMeta]{@link IPayPalMeta} [IBamboraMeta]{@link IBamboraMeta}
+     */
+    setMeta(meta) {
+        this.configs[0].setMeta(meta);
+    }
+    setGiftCardScheme(giftCardScheme, processingNetwork) {
+        this.configs[0].setGiftCardSchemeData(giftCardScheme, processingNetwork);
+    }
+}
+export { HtmlWidget };
+//# sourceMappingURL=../../src/lib/widget/html-widget.js.map

package/lib/widget/html-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-widget.js","sourceRoot":"","sources":["../../widget/html-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAItD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAW,SAAQ,eAAe;IAEpC,kBAAkB,CAAC,sDAAsD;IACzE,YAAY,QAAgB,EAAE,SAAiB,EAAE,YAAoB,SAAS,EAAE,WAAoB,EAAE,OAAgB;QAClH,IAAI,IAAI,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC;QAC9D,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IACrC,CAAC;IAGD;;;;;;;;OAQG;IACI,qBAAqB,CAAC,GAAW;QACpC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;IAC/C,CAAC;IAED;;;;;;;OAOG;IACI,qBAAqB,CAAC,GAAW;QACpC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;IAC/C,CAAC;IAGD;;;;;;;OAOG;IACI,mBAAmB,CAAC,GAAW;QAClC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;IAC7C,CAAC;IAGD;;;;;;;;OAQG;IACI,aAAa,CAAC,MAAgB;QACjC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC;IAGH;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACM,eAAe,CAAC,QAAwB;QAC7C,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;IAC7D,CAAC;IAGM,cAAc,CAAC,OAAqB;QACzC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;QAC/C,KAAK,CAAC,cAAc,iCAAK,OAAO,KAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,IAAE,CAAC;IAC5E,CAAC;IAED;;;;;;;;;;;OAWG;IACI,OAAO,CAAC,IAAgC;QAC3C,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAGM,iBAAiB,CAAC,cAAc,EAAE,iBAAiB;QACtD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAE,cAAc,EAAE,iBAAiB,CAAE,CAAC;IAC/E,CAAC;CACJ;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/{bundles/types → lib}/widget/index.d.ts

@@ -2,7 +2,7 @@ export { MultiWidget } from './multi-widget';
 export { HtmlMultiWidget } from './html-multi-widget';
 export { HtmlWidget } from './html-widget';
 export { Configuration, PAYMENT_TYPE, PURPOSE } from './configuration';
-export { STYLABLE_ELEMENT, type IElementStyleInput, STYLABLE_ELEMENT_STATE } from './style';
+export { STYLABLE_ELEMENT, IElementStyleInput, STYLABLE_ELEMENT_STATE } from './style';
 /**
  * Interface for PayPal checkout meta information
  * @interface IPayPalMeta
@@ -129,4 +129,3 @@ export { STYLABLE_ELEMENT, type IElementStyleInput, STYLABLE_ELEMENT_STATE } fro
  * @param {string} VISA=visa
  * @param {string} VISA_WHITE=visa_white
  */
-//# sourceMappingURL=index.d.ts.map