skyflow-js 1.21.2 → 1.21.3

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.21.3] - 2022-10-18
+### Added
+- `cardIcon` and `copyIcon` style objects for collect and reveal elements.
+
 ## [1.21.2] - 2022-10-04
 ### Fixed
 - Fix regression in `card_number` element

package/README.md

@@ -230,6 +230,8 @@ The `inputStyles` field accepts a style object which consists of CSS properties
 - `empty`: applied when the Element has no input
 - `focus`: applied when the Element has focus
 - `invalid`: applied when the Element has invalid input
+- `cardIcon`: applied to the card type icon in `CARD_NUMBER` Element
+- `copyIcon`: applied to copy icon in Elements when `enableCopy` option is true
 
 Styles are specified with [JSS](https://cssinjs.org/?v=v10.7.1). 
 
@@ -250,8 +252,16 @@ inputStyles:{
     invalid: {
       color: "#f44336",
     },
+    cardIcon:{
+      position: "absolute",
+      left:"8px", 
+      bottom:"calc(50% - 12px)"
+    },
+    copyIcon:{
+      position: "absolute",
+      right:"8px",
+    }
   }
-}
 ```
 The states that are available for `labelStyles` are `base` and `focus`.
 
@@ -422,6 +432,11 @@ const element = container.create({
       base: {
         color: "#1d1d1d",
       },
+      cardIcon:{
+        position: "absolute",
+        left:"8px", 
+        bottom:"calc(50% - 12px)"
+    },
   },
   labelStyles: {
       base: {
@@ -890,7 +905,7 @@ const revealElement = {
 
 ```
 
-The `inputStyles`, `labelStyles` and  `errorTextStyles` parameters accepts a styles object as described in the [previous section](#step-2-create-a-collect-element) for collecting data but only a single variant is available i.e. base. 
+The `inputStyles`, `labelStyles` and  `errorTextStyles` parameters accepts a styles object as described in the [previous section](#step-2-create-a-collect-element) for collecting data. But for reveal element, `inputStyles` accepts only `base` variant and `copyIcon` style object. 
 
 An example of a inputStyles object:
 
@@ -898,6 +913,11 @@ An example of a inputStyles object:
 inputStyles: {
     base: {
       color: "#1d1d1d"
+    },
+    copyIcon:{
+      position: "absolute",
+      right:"8px",
+      top: "calc(50% - 10px)",
     }
 }
 ```

package/package.json

@@ -2,7 +2,7 @@
   "name": "skyflow-js",
   "preferGlobal": true,
   "analyze": false,
-  "version": "1.21.2",
+  "version": "1.21.3",
   "author": "Skyflow",
   "description": "Skyflow JavaScript SDK",
   "homepage": "https://github.com/skyflowapi/skyflow-js",

package/types/core/constants.d.ts

@@ -260,9 +260,9 @@ export declare const INPUT_WITH_ICON_DEFAULT_STYLES: {
     'text-indent': string;
     padding: string;
 };
-export declare const INPUT_ICON_STYLES = "position: absolute; left:8px; top:calc(50% - 10px)";
-export declare const COLLECT_COPY_ICON_STYLES = "position: absolute; right:8px; top:calc(50% - 10px); cursor:pointer;";
-export declare const REVEAL_COPY_ICON_STYLES = "position: absolute; right:8px; top:calc(50% - 16px); cursor:pointer;";
+export declare const INPUT_ICON_STYLES = "position: absolute; left:8px; bottom:calc(50% - 12px)";
+export declare const COLLECT_COPY_ICON_STYLES = "position: absolute; right:8px; bottom:calc(50% - 12px); cursor:pointer;";
+export declare const REVEAL_COPY_ICON_STYLES = "position: absolute; right:8px; top:calc(50% - 12px); cursor:pointer;";
 export declare const ERROR_TEXT_STYLES: {
     color: string;
     padding: string;

package/types/utils/helpers/index.d.ts

@@ -8,3 +8,4 @@ export declare const getReturnValue: (value: string | Blob, element: string, doe
 export declare const copyToClipboard: (text: string) => void;
 export declare const handleCopyIconClick: (textToCopy: string, domCopy: any) => void;
 export declare const fileValidation: (value: any) => boolean;
+export declare const styleToString: (style: any) => string;