Update README.md

README.md

- ## Installation
+## Installation
 ### `1. Install dependencies :`
-** ~ For Windows run : **
-                            
-npm i skyid-sdk-web-win
 
-                        
-** ~ For Linux/Mac run : **
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+* ~  run :
                             
-npm i skyid-sdk-web-lx
+npm install skyid-sdk-web
+npm install jquery // version 3.7.0
+
+
 
 ### `2.In your components import the Jquery and the SDK Web :`
-                            
-<script>
-import $ from 'jquery';
-import * as skyid_imp from '../assets/skyid_impl_v1'; //Location of 'skyid_impl_v1.js' file
+       
+
+//@ts-ignore
+  import * as  $  from 'jquery' ; 
+//@ts-ignore
+import * as skyid_imp from '../assets/skyid_impl_v1.js'; //Location of 'skyid_impl_v1.js' file
+
 ...
-</script>
+
 
                         
-### `3.copy the code bellow inside the useEffect(){...} lifecycle Hook:`
-                            
-  useEffect(()=>{
-        skyid_imp.initViewComponent()
-        // init SDK
-        skyid_imp.skyid_fa_remote_sdk_initialization()
-    
+### `3.copy the code bellow inside the ngAfterView(){...} lifecycle Hook:`
+
+
+       ngAfterViewInit(): void {
+     skyid_imp.initViewComponent()
+      // init SDK
+    skyid_imp.skyid_fa_remote_sdk_initialization()
+
     $( document ).ready(function() {
-        $("#skyid_fa_document_container").show(500);
-    
-        $( "#skyid_da_smart_ocr_button" ).click(function() {
-                skyid_imp.skyid_fa_auth_request_smart_ocr();
-                $("#skyid_da_smart_ocr_button").prop('disabled', true);
-                $("#skyid_da_smart_ocr_button").html("extraction d'information en cours ...");
-        });
-    
-        $( "#skyid_fa_next" ).click(function() {
-            $( "#skyid_fa_start_button" ).show()
-          skyid_imp.show_matching_step();
-        });
-    
-        $( "#skyid_fa_start_button" ).click(function() {
-                  // start SDK face analysis
-                  skyid_imp.start_face_scan() ;
-                       $( "#skyid_fa_start_button" ).hide();
-                       $( "#msg" ).html("Scanne de visage en cours ....");
-         });
-    
+    $("#skyid_fa_document_container").show(500);
+
+    $( "#skyid_da_smart_ocr_button" ).click(function() {
+            skyid_imp.skyid_fa_auth_request_smart_ocr();
+            $("#skyid_da_smart_ocr_button").prop('disabled', true);
+            $("#skyid_da_smart_ocr_button").html("extraction d'information en cours ...");
+    });
+
+    $( "#skyid_fa_next" ).click(function() {
+        $( "#skyid_fa_start_button" ).show()
+      skyid_imp.show_matching_step();
     });
-    
+
+    $( "#skyid_fa_start_button" ).click(function() {
+              // start SDK face analysis
+              skyid_imp.start_face_scan() ;
+                   $( "#skyid_fa_start_button" ).hide();
+                   $( "#msg" ).html("Scanne de visage en cours ....");
+     });
+
+    });
+
     const fileSelector = document.getElementById('file-upload');
-      fileSelector.addEventListener('change', (event) => {
-        const myimage = event.target.files[0];
-        skyid_imp.readImage(myimage);
-      });
-    
+    fileSelector!.addEventListener('change', (event) => {
+      if(event.target instanceof HTMLInputElement) {
+      const myimage: File | null = event.target.files ? event.target.files[0] : null;
+      if(myimage) {
+           skyid_imp.readImage(myimage);
+      }
+    }
+
+    });
+
+
     // demo call
     skyid_imp.skyid_fa_auth_request_smart_ocr_recover("1671122267893033679")
-    },[])
+    }
 
                         
 ### `4.Copy the HTML code :`
@@ -85,116 +96,117 @@ import * as skyid_imp from '../assets/skyid_impl_v1'; //Location of 'skyid_impl_
     </div>
   </div>
   
+  
 
                         
 ### `5.Add CSS style:`
                             
-<style>
+
      html, body {
     height: 100%;
     width: 100%;
     margin: 0;
     background-color: #f5f5f5;
     display: table;
-}
+    }
 
-footer {
+    footer {
     background-color: black;
     font-size:12px;
     display: table-row;
     padding: 20px;
     height: 0;
     font-family: Arial, Helvetica, sans-serif;
-}
-
-.column {
-  float: left;
-  padding: 20px;
-}
-
-/* Clear floats after the columns */
-.row:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-.button-36 {
-background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
-border-radius: 8px;
-border-style: none;
-box-sizing: border-box;
-color: #FFFFFF;
-cursor: pointer;
-flex-shrink: 0;
-font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
-font-size: 16px;
-font-weight: 500;
-height: 4rem;
-padding: 0 1.6rem;
-text-align: center;
-text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
-transition: all .5s;
-user-select: none;
--webkit-user-select: none;
-touch-action: manipulation;
-}
-
-.button-36:hover {
-box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
-transition-duration: .1s;
-}
-
-@media (min-width: 768px) {
-.button-36 {
-  padding: 0 2.6rem;
-}
-}
-
-input[type="file"] {
-display: none;
-}
-
-.custom-file-upload {
-border: 1px solid #ccc;
-background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
-border-radius: 8px;
-color: #FFFFFF;
-flex-shrink: 0;
-font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
-display: inline-block;
-padding: 6px 12px;
-cursor: pointer;
-}
-
-.custom-file-upload:hover {
-box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
-transition-duration: .1s;
-}
-
-#skyid_fa_document_container{
-  margin: auto;
-  width: 90%;
-  text-align: center;
-}
-#skyid_da_smart_ocr_button, #skyid_fa_next,#skyid_fa_document_container,#skyid_fa_start_button{
-  display: none;
-}
-#extracted_feilds{
-  display:none;
-  border: 2px solid #000;
-  overflow: scroll;
-}
-#liveness_frame{
-  display: none;
-  text-align: center;
-}
-#skyid_liveness{
-  display: flex;
-  justify-content: center;
-}
-
-</style>
+    }
+
+    .column {
+    float: left;
+    padding: 20px;
+    }
+
+    /* Clear floats after the columns */
+    .row:after {
+    content: "";
+    display: table;
+    clear: both;
+    }
+    .button-36 {
+    background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+    border-radius: 8px;
+    border-style: none;
+    box-sizing: border-box;
+    color: #FFFFFF;
+    cursor: pointer;
+    flex-shrink: 0;
+    font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    height: 4rem;
+    padding: 0 1.6rem;
+    text-align: center;
+    text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+    transition: all .5s;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    }
+
+    .button-36:hover {
+    box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+    transition-duration: .1s;
+    }
+
+    @media (min-width: 768px) {
+    .button-36 {
+     padding: 0 2.6rem;
+     }
+     }
+
+     input[type="file"] {
+    display: none;
+    }
+
+     .custom-file-upload {
+     border: 1px solid #ccc;
+     background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+     border-radius: 8px;
+     color: #FFFFFF;
+    flex-shrink: 0;
+    font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+    display: inline-block;
+    padding: 6px 12px;
+    cursor: pointer;
+    }
+
+    .custom-file-upload:hover {
+    box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+    transition-duration: .1s;
+    }
+
+    #skyid_fa_document_container{
+      margin: auto;
+    width: 90%;
+    text-align: center;
+    }
+    #skyid_da_smart_ocr_button, #skyid_fa_next,#skyid_fa_document_container,#skyid_fa_start_button{
+      display: none;
+    }
+    #extracted_feilds{
+      display:none;
+    border: 2px solid #000;
+    overflow: scroll;
+    }
+    #liveness_frame{
+    display: none;
+    text-align: center;
+    }
+    #skyid_liveness{
+    display: flex;
+    justify-content: center;
+    }
+
+
+
 
 # SkyidAngularDemo