Update README.md

README.md

- ## Installation
+## Installation
 ### `1. Install dependencies :`
-** ~ For Windows run : **
 
-npm i skyid-sdk-web-win
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
 
+* ~  run :
+                            
+npm install skyid-sdk-web
+npm install jquery // version 3.7.0
 
-** ~ For Linux/Mac run : **
 
-npm i skyid-sdk-web-lx
 
 ### `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(()=>{
+### `3.copy the code bellow inside the ngAfterView(){...} lifecycle Hook:`
+
+
+       ngAfterViewInit(): void {
      skyid_imp.initViewComponent()
       // init SDK
     skyid_imp.skyid_fa_remote_sdk_initialization()
@@ -49,14 +54,20 @@ import * as skyid_imp from '../assets/skyid_impl_v1'; //Location of 'skyid_impl_
     });
 
     const fileSelector = document.getElementById('file-upload');
-      fileSelector.addEventListener('change', (event) => {
-        const myimage = event.target.files[0];
+    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 :`
@@ -87,114 +98,115 @@ import * as skyid_imp from '../assets/skyid_impl_v1'; //Location of 'skyid_impl_
   
   
 
+                        
 ### `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 {
+    .column {
     float: left;
     padding: 20px;
-}
+    }
 
-/* Clear floats after the columns */
-.row:after {
+    /* 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 {
+    }
+    .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{
+     }
+     }
+
+     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{
+    }
+    #skyid_da_smart_ocr_button, #skyid_fa_next,#skyid_fa_document_container,#skyid_fa_start_button{
       display: none;
-}
-#extracted_feilds{
+    }
+    #extracted_feilds{
       display:none;
     border: 2px solid #000;
     overflow: scroll;
-}
-#liveness_frame{
+    }
+    #liveness_frame{
     display: none;
     text-align: center;
-}
-#skyid_liveness{
+    }
+    #skyid_liveness{
     display: flex;
     justify-content: center;
-}
+    }
+
+
 
-</style>
 
 # SkyidAngularDemo