@globalpayments/js 4.0.20 → 4.1.3

package/types/ui/form/index.d.ts

@@ -23,10 +23,6 @@ export declare const fieldStyles: () => {
             "margin-top": string;
             "background-position": string;
         };
-        "@font-face"?: {
-            "font-family": string;
-            src: string;
-        };
         "#secure-payment-field[type=text].field-validation-wrapper"?: {
             "font-family": string;
         };
@@ -134,6 +130,12 @@ export declare const fieldStyles: () => {
         };
         "img.card-number-icon.invalid.card-type-mastercard": {
             background: string;
+            /**
+             * Instantiates a new UIForm object for a group of hosted fields
+             *
+             * @param fields Hosted field configuration
+             * @param styles Custom CSS configuration
+             */
             "background-size": string;
             "background-position-y": string;
         };
@@ -192,10 +194,6 @@ export declare const fieldStyles: () => {
             "margin-top": string;
             "background-size": string;
         };
-        "@font-face"?: {
-            "font-family": string;
-            src: string;
-        };
         "#secure-payment-field[type=text].field-validation-wrapper"?: {
             "font-family": string;
         };
@@ -210,6 +208,10 @@ export declare const fieldStyles: () => {
             opacity: string;
             visibility: string;
         };
+        "@font-face": {
+            "font-family": string;
+            src: string;
+        };
         "*": {
             "box-sizing": string;
         };
@@ -334,10 +336,6 @@ export declare const fieldStyles: () => {
         "#field-validation-wrapper"?: {
             "margin-top": string;
         };
-        "@font-face"?: {
-            "font-family": string;
-            src: string;
-        };
         "#secure-payment-field[type=text].field-validation-wrapper"?: {
             "font-family": string;
         };
@@ -424,9 +422,6 @@ export declare const fieldStyles: () => {
         "img.card-number-icon.invalid.card-type-mastercard": {
             background: string;
             "background-size": string;
-            /**
-             * Represents logic surrounding a group of hosted fields.
-             */
             "background-position": string;
         };
         "img.card-number-icon.invalid.card-type-visa": {
@@ -754,6 +749,23 @@ export declare const parentStyles: () => {
             "font-family": string;
             margin: string;
         };
+        "@media(max-width: 340px)"?: {
+            ".secure-payment-form .credit-card-currency-conversion .radio-button": {
+                "margin-right": string;
+            };
+        };
+        "@media(max-width: 768px)"?: {
+            ".secure-payment-form .credit-card-currency-conversion .card-currency-content": {
+                width: string;
+                "margin-top": string;
+                "margin-left": string;
+            };
+            ".secure-payment-form .credit-card-currency-conversion .merchant-currency-content": {
+                width: string;
+                "margin-top": string;
+                "margin-left": string;
+            };
+        };
         ".secure-payment-form .currency-conversion-container"?: {
             display: string;
             "flex-direction": string;
@@ -764,6 +776,7 @@ export declare const parentStyles: () => {
         };
         ".secure-payment-form .credit-card-currency-conversion .radio-button:hover"?: {
             "border-color": string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button"?: {
             outline: string;
@@ -795,9 +808,11 @@ export declare const parentStyles: () => {
         ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked"?: {
             "background-color": string;
             border: string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus"?: {
             outline: string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .card-currency-content.visible"?: {
             display: string;
@@ -815,6 +830,8 @@ export declare const parentStyles: () => {
             "font-weight": number;
             margin: string;
             display: string;
+            "line-height": string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .tooltip"?: {
             width: string;
@@ -838,7 +855,12 @@ export declare const parentStyles: () => {
             display: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .tooltip-content p:last-child"?: {
-            "margin-bottom": string;
+            "margin-bottom": string; /**
+             * Sets a special-case event listener that fires when all hosted
+             * fields in a form have registered / loaded
+             *
+             * @param fn The listener function
+             */
         };
         ".secure-payment-form .credit-card-currency-conversion .tooltip-content::before"?: {
             left: string;
@@ -860,7 +882,9 @@ export declare const parentStyles: () => {
             ".secure-payment-form .credit-card-currency-conversion .radio-button": {
                 width: string;
                 "justify-content": string;
-            };
+            }; /**
+             * Deletes all hosted fields within the form
+             */
             ".secure-payment-form .credit-card-currency-conversion .radio-button:first-child": {
                 margin: string;
             };
@@ -1075,6 +1099,11 @@ export declare const parentStyles: () => {
             display: string;
             padding: string;
             transform: string;
+            /**
+             * Appends additional CSS rules to the group of hosted fields
+             *
+             * @param json New CSS rules
+             */
             "-webkit-transform": string;
             "z-index": string;
             top: string;
@@ -1191,6 +1220,14 @@ export declare const parentStyles: () => {
             "background-size": string;
             background: string;
             "font-family": string;
+            "font-size": string;
+            "line-height": string;
+        };
+        ".secure-payment-form .tooltip h4": {
+            "font-family": string;
+            "font-size": string;
+            "line-height": string;
+            color: string;
         };
         ".secure-payment-form .tooltip:focus": {
             border: string;
@@ -1290,6 +1327,9 @@ export declare const parentStyles: () => {
             "vertical-align": string;
             "text-align": string;
             "margin-left": string;
+            /**
+             * Deletes all hosted fields within the form
+             */
             "margin-right": string;
             "margin-top": string;
         };
@@ -1600,8 +1640,9 @@ export declare const parentStyles: () => {
             padding: number;
             display: string;
             "font-size": string;
-            "font-weight": number;
+            "font-weight": string;
             position: string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .radio-button"?: {
             display: string;
@@ -1618,6 +1659,7 @@ export declare const parentStyles: () => {
         };
         ".secure-payment-form .credit-card-currency-conversion .radio-button:hover"?: {
             "border-color": string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button"?: {
             outline: string;
@@ -1633,6 +1675,9 @@ export declare const parentStyles: () => {
             color: string;
             outline: string;
         };
+        ".secure-payment-form .credit-card-currency-conversion .radio-button.checked label"?: {
+            color: string;
+        };
         ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']"?: {
             margin: string;
             appearance: string;
@@ -1649,22 +1694,31 @@ export declare const parentStyles: () => {
         ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked"?: {
             "background-color": string;
             border: string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus"?: {
             outline: string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .radio-button label"?: {
             "font-family": string;
             "font-size": string;
-            "font-weight": number;
+            "font-weight": string;
             display: string;
             margin: string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .card-currency-content"?: {
             opacity: string;
             visibility: boolean;
             display: string;
             "flex-direction": string;
+            /**
+             * Instantiates a new UIForm object for a group of hosted fields
+             *
+             * @param fields Hosted field configuration
+             * @param styles Custom CSS configuration
+             */
             "margin-left": string;
             "align-items": string;
             height: string;
@@ -1675,6 +1729,16 @@ export declare const parentStyles: () => {
             visibility: boolean;
         };
         ".secure-payment-form .credit-card-currency-conversion .merchant-currency-content"?: {
+            /**
+             * Sets an event listener for an event type
+             *
+             * @param fieldTypeOrEventName The field type on which the listener should
+             *          be applied, or the type of event that should trigger the listener
+             * @param eventNameOrListener The type of event that should trigger the
+             *          listener, or the listener function
+             * @param listener The listener function when both field type and event type
+             *          are provided
+             */
             opacity: string;
             visibility: boolean;
             display: string;
@@ -1694,6 +1758,8 @@ export declare const parentStyles: () => {
             "font-weight": number;
             margin: string;
             display: string;
+            "line-height": string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .additional-info p"?: {
             margin: string;
@@ -1724,7 +1790,12 @@ export declare const parentStyles: () => {
             margin: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .tooltip-content p:last-child"?: {
-            "margin-bottom": string;
+            "margin-bottom": string; /**
+             * Sets a special-case event listener that fires when all hosted
+             * fields in a form have registered / loaded
+             *
+             * @param fn The listener function
+             */
         };
         ".secure-payment-form .credit-card-currency-conversion .tooltip-content::before"?: {
             left: string;
@@ -1746,7 +1817,9 @@ export declare const parentStyles: () => {
             ".secure-payment-form .credit-card-currency-conversion .radio-button": {
                 width: string;
                 "justify-content": string;
-            };
+            }; /**
+             * Deletes all hosted fields within the form
+             */
             ".secure-payment-form .credit-card-currency-conversion .radio-button:first-child": {
                 margin: string;
             };
@@ -1764,6 +1837,19 @@ export declare const parentStyles: () => {
                 right: string;
             };
         };
+        "@media(max-width: 340px)"?: {
+            ".secure-payment-form .credit-card-currency-conversion fieldset": {
+                "flex-flow": string;
+            };
+            ".secure-payment-form .credit-card-currency-conversion .radio-button": {
+                width: string;
+                "margin-bottom": string;
+                "margin-right": string;
+            };
+            ".secure-payment-form .credit-card-currency-conversion .radio-button:last-child": {
+                "margin-bottom": string;
+            };
+        };
         ".secure-payment-form .hf-cvv-tooltip-invalid"?: {
             border: string;
             "border-left": string;
@@ -1973,6 +2059,11 @@ export declare const parentStyles: () => {
             display: string;
             padding: string;
             transform: string;
+            /**
+             * Appends additional CSS rules to the group of hosted fields
+             *
+             * @param json New CSS rules
+             */
             "-webkit-transform": string;
             "z-index": string;
             top: string;
@@ -2189,6 +2280,9 @@ export declare const parentStyles: () => {
             margin: string;
         };
         ".secure-payment-form .installment-term-selector-title": {
+            /**
+             * Represents logic surrounding a group of hosted fields.
+             */
             "text-align": string;
             padding: string;
         };
@@ -2260,6 +2354,12 @@ export declare const parentStyles: () => {
             "line-height": string;
             "font-style": string;
             border: string;
+            /**
+             * Sets a special-case event listener that fires when all hosted
+             * fields in a form have registered / loaded
+             *
+             * @param fn The listener function
+             */
             cursor: string;
             "margin-top": string;
             "margin-bottom": string;
@@ -2280,6 +2380,9 @@ export declare const parentStyles: () => {
         };
         ".secure-payment-form .installment-button-explore-plans:focus": {
             background: string;
+            /**
+             * Deletes all hosted fields within the form
+             */
             border: string;
         };
         ".secure-payment-form .installment-button-learn-more": {
@@ -2421,6 +2524,14 @@ export declare const parentStyles: () => {
             "background-size": string;
             background: string;
             "font-family": string;
+            "font-size": string;
+            "line-height": string;
+        };
+        ".secure-payment-form .tooltip h4": {
+            "font-family": string;
+            "font-size": string;
+            "line-height": string;
+            color: string;
         };
         ".secure-payment-form .tooltip:focus": {
             border: string;
@@ -2483,7 +2594,16 @@ export declare const parentStyles: () => {
         ".secure-payment-form label": {
             margin: string;
             display: string;
-            "font-size": string;
+            "font-size": string; /**
+             * Sets an event listener for an event type
+             *
+             * @param fieldTypeOrEventName The field type on which the listener should
+             *          be applied, or the type of event that should trigger the listener
+             * @param eventNameOrListener The type of event that should trigger the
+             *          listener, or the listener function
+             * @param listener The listener function when both field type and event type
+             *          are provided
+             */
             "font-weight": string;
             "font-family": string;
         };
@@ -2689,6 +2809,7 @@ export declare const parentStyles: () => {
         };
         ".secure-payment-form .credit-card-currency-conversion .radio-button:hover"?: {
             "border-color": string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion fieldset:focus-within > .radio-button"?: {
             outline: string;
@@ -2720,9 +2841,11 @@ export declare const parentStyles: () => {
         ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:checked"?: {
             "background-color": string;
             border: string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .radio-button input[type='radio']:focus"?: {
             outline: string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .card-currency-content.visible"?: {
             display: string;
@@ -2740,6 +2863,8 @@ export declare const parentStyles: () => {
             "font-weight": number;
             margin: string;
             display: string;
+            "line-height": string;
+            color: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .tooltip"?: {
             width: string;
@@ -2758,7 +2883,12 @@ export declare const parentStyles: () => {
             display: string;
         };
         ".secure-payment-form .credit-card-currency-conversion .tooltip-content p:last-child"?: {
-            "margin-bottom": string;
+            "margin-bottom": string; /**
+             * Sets a special-case event listener that fires when all hosted
+             * fields in a form have registered / loaded
+             *
+             * @param fn The listener function
+             */
         };
         ".secure-payment-form .credit-card-currency-conversion .tooltip-content::before"?: {
             left: string;
@@ -2780,7 +2910,9 @@ export declare const parentStyles: () => {
             ".secure-payment-form .credit-card-currency-conversion .radio-button": {
                 width: string;
                 "justify-content": string;
-            };
+            }; /**
+             * Deletes all hosted fields within the form
+             */
             ".secure-payment-form .credit-card-currency-conversion .radio-button:first-child": {
                 margin: string;
             };
@@ -2798,6 +2930,19 @@ export declare const parentStyles: () => {
                 right: string;
             };
         };
+        "@media(max-width: 340px)"?: {
+            ".secure-payment-form .credit-card-currency-conversion fieldset": {
+                "flex-flow": string;
+            };
+            ".secure-payment-form .credit-card-currency-conversion .radio-button": {
+                width: string;
+                "margin-bottom": string;
+                "margin-right": string;
+            };
+            ".secure-payment-form .credit-card-currency-conversion .radio-button:last-child": {
+                "margin-bottom": string;
+            };
+        };
         ".secure-payment-form .credit-card-qr-code-payments"?: {
             "font-family": string;
         };
@@ -3108,6 +3253,11 @@ export declare const parentStyles: () => {
             display: string;
             padding: string;
             transform: string;
+            /**
+             * Appends additional CSS rules to the group of hosted fields
+             *
+             * @param json New CSS rules
+             */
             "-webkit-transform": string;
             "z-index": string;
             top: string;
@@ -3224,6 +3374,14 @@ export declare const parentStyles: () => {
             "background-size": string;
             background: string;
             "font-family": string;
+            "font-size": string;
+            "line-height": string;
+        };
+        ".secure-payment-form .tooltip h4": {
+            "font-family": string;
+            "font-size": string;
+            "line-height": string;
+            color: string;
         };
         ".secure-payment-form .tooltip:focus": {
             border: string;
@@ -3313,6 +3471,12 @@ export declare const parentStyles: () => {
             "margin-left": string;
             "vertical-align": string;
         };
+        /**
+         * Sets a special-case event listener that fires when all hosted
+         * fields in a form have registered / loaded
+         *
+         * @param fn The listener function
+         */
         ".secure-payment-form div[class$='-shield'] .ssl-msg": {
             "font-size": string;
             "font-weight": string;
@@ -3339,7 +3503,9 @@ export declare const parentStyles: () => {
         ".secure-payment-form div[class$='-logo'] .security-msg": {
             color: string;
             "font-size": string;
-            display: string;
+            display: string; /**
+             * Deletes all hosted fields within the form
+             */
             "vertical-align": string;
             "white-space": string;
             "margin-right": string;