doo · Nikituh · Mar 26, 2025 · Mar 27, 2025 · Mar 28, 2025 · Mar 28, 2025
diff --git a/angular-js/package-lock.json b/angular-js/package-lock.json
diff --git a/angular-js/package.json b/angular-js/package.json
@@ -28,7 +28,7 @@
     "tslib": "1.14.1",
     "zone.js": "0.13.1",
     "@types/node": "^12.19.15",
-    "scanbot-web-sdk": "7.1.0"
+    "scanbot-web-sdk": "7.2.0-rc.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "16.1.3",

diff --git a/angular-js/src/app/app.component.scss b/angular-js/src/app/app.component.scss
@@ -1,3 +1,4 @@
+
 :host {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -8,24 +9,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.toolbar {
-  position: absolute;
-  z-index: 500;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  background-color: #c8193c;
-  color: white;
-  font-weight: 600;
-}
-
-.toolbar img {
-  margin: 0 16px;
-}
-
 svg#clouds {
   position: fixed;
   bottom: -160px;
@@ -35,15 +18,15 @@ svg#clouds {
 }
 
 .content {
-  margin-top: calc(8px + 60px);
-  height: calc(100vh - (2 * 8px + 60px));
-  width: calc(100vw - 16px);
+  height: calc(100vh - 60px);
+  width: calc(100vw);
 }
 
 .toolbar-logo {
   margin-left: 5px !important;
   margin-right: 5px !important;
 }
+
 .back-button {
   height: 50px;
   width: 50px;
@@ -62,4 +45,4 @@ svg#clouds {
 
 .spacer {
   flex-grow: 1;
-}
+}
diff --git a/angular-js/src/app/barcode-scanner/barcode-scanner.component.scss b/angular-js/src/app/barcode-scanner/barcode-scanner.component.scss
@@ -1,7 +1,7 @@
 @import "src/app/common/styles/bottom-bar";
 
 #barcode-scanner-container {
-  margin-top: 68px;
+  margin-top: 60px;
   width: 100%;
   height: calc(100% - 50px);
 }
diff --git a/angular-js/src/app/barcode-scanner/barcode-scanner.component.ts b/angular-js/src/app/barcode-scanner/barcode-scanner.component.ts
@@ -1,5 +1,5 @@
 
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewEncapsulation } from "@angular/core";
 import { Router } from "@angular/router";
 import { ToastrService } from "ngx-toastr";
 
@@ -22,6 +22,7 @@ import ScanbotSDK from "scanbot-web-sdk/webpack";
   selector: "app-barcode-scanner",
   templateUrl: "./barcode-scanner.component.html",
   styleUrls: ["./barcode-scanner.component.scss"],
+  encapsulation: ViewEncapsulation.ShadowDom
 })
 export class BarcodeScannerComponent implements OnInit {
   router: Router;
@@ -98,9 +99,17 @@ export class BarcodeScannerComponent implements OnInit {
 
     const isOverlyScanner = this.isOverlayScanner();
 
+    /**
+     * If you're using ViewEncapsulation.ShadowDom, providing 'containerId' will not work,
+     * as it's not accessible using conventional methods. In this case, it's required that you provide
+     * the container property directly, by accessing the shadowRoot yourself, as shown below.
+     */
+    const shadow = document.querySelector("app-barcode-scanner").shadowRoot;
+    const container = shadow.getElementById(ScanbotSdkService.BARCODE_SCANNER_CONTAINER_ID);
+
     const configuration: BarcodeScannerViewConfiguration = {
       onBarcodesDetected: this.onBarcodesDetected.bind(this),
-      containerId: ScanbotSdkService.BARCODE_SCANNER_CONTAINER_ID,
+      container: container,
       detectionParameters: {
         barcodeFormatConfigurations: [
           new ScanbotSDK.Config.BarcodeFormatCommonConfiguration({

diff --git a/angular-js/src/app/common/components/toolbar/toolbar.component.scss b/angular-js/src/app/common/components/toolbar/toolbar.component.scss
@@ -1,44 +1,40 @@
 .toolbar {
-    position: absolute;
-    z-index: 500;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    background-color: #c8193c;
-    color: white;
-    font-weight: 600;
-}
-
-.toolbar img {
-    margin: 0 16px;
+  position: absolute;
+  z-index: 500;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  background-color: #c8193c;
+  color: white;
+  font-weight: 600;
 }
 
 .toolbar-logo {
-    margin-left: 5px !important;
-    margin-right: 5px !important;
+  margin-left: 5px !important;
+  margin-right: 5px !important;
 }
 
 .back-button {
-    height: 50px;
-    width: 50px;
-    line-height: 50px;
-    font-size: 25px;
-    text-align: center;
+  height: 50px;
+  width: 50px;
+  line-height: 50px;
+  font-size: 25px;
+  text-align: center;
 }
 
 
 .camera-swap-button,
 .camera-switch-button {
-    height: 50px;
-    width: 50px;
-    line-height: 50px;
-    font-size: 25px;
-    text-align: center;
+  height: 50px;
+  width: 50px;
+  line-height: 50px;
+  font-size: 25px;
+  text-align: center;
 }
 
 .spacer {
-    flex-grow: 1;
-}
+  flex-grow: 1;
+}
diff --git a/angular-js/src/app/cropping/cropping.component.scss b/angular-js/src/app/cropping/cropping.component.scss
@@ -1,7 +1,7 @@
 @import "src/app/common/styles/bottom-bar";
 
 #cropping-view-container {
-  margin-top: 68px;
+  margin-top: 60px;
   width: 100%;
   height: calc(100% - 150px);
 }
diff --git a/angular-js/src/app/document-scanner/document-scanner.component.scss b/angular-js/src/app/document-scanner/document-scanner.component.scss
@@ -1,7 +1,7 @@
 @import "src/app/common/styles/bottom-bar";
 
 #scanbot-camera-container {
-  margin-top: 68px;
+  margin-top: 60px;
   width: 100%;
   height: calc(100% - 50px);
 }

diff --git a/angular-js/src/app/document-scanner/document-scanner.component.ts b/angular-js/src/app/document-scanner/document-scanner.component.ts
@@ -1,8 +1,6 @@
 import { Component, OnInit, ViewEncapsulation } from "@angular/core";
 import {
-  CroppedDetectionResult,
-  DocumentDetectionResult,
-  DocumentScannerConfiguration, DocumentScannerViewConfiguration,
+  CroppedDetectionResult, DocumentScannerViewConfiguration,
 } from "scanbot-web-sdk/@types";
 import { ScanbotSdkService } from "../service/scanbot-sdk-service";
 import { Router } from "@angular/router";
@@ -14,8 +12,7 @@ import { Utils } from "../service/utils";
 @Component({
   selector: "app-document-scanner",
   templateUrl: "./document-scanner.component.html",
-  styleUrls: ["./document-scanner.component.scss"],
-  encapsulation: ViewEncapsulation.ShadowDom
+  styleUrls: ["./document-scanner.component.scss"]
 })
 export class DocumentScannerComponent implements OnInit {
   router: Router;
@@ -47,17 +44,10 @@ export class DocumentScannerComponent implements OnInit {
   }
 
   async startScanner() {
-    /**
-     * If you're using ViewEncapsulation.ShadowDom, providing 'containerId' will not work,
-     * as it's not accessible using conventional methods. In this case, it's required that you provide
-     * the container property directly, by accessing the shadowRoot yourself, as shown below.
-     */
-    const shadow = document.querySelector("app-document-scanner").shadowRoot;
-    const container = shadow.getElementById(ScanbotSdkService.CONTAINER_ID);
 
     const configuration: DocumentScannerViewConfiguration = {
       onDocumentDetected: this.onDocumentDetected.bind(this),
-      container,
+      containerId: ScanbotSdkService.CONTAINER_ID,
       text: {
         hint: {
           OK: "Capturing your document...",

diff --git a/angular-js/src/app/home/home.component.scss b/angular-js/src/app/home/home.component.scss
@@ -1,5 +1,6 @@
 ul {
   padding-inline-start: 0;
+  margin-top: 60px;
 }
 
 .list {

diff --git a/angular-js/src/app/image-details/image-details.component.scss b/angular-js/src/app/image-details/image-details.component.scss
@@ -7,7 +7,7 @@ img {
 }
 
 .content-container {
-  margin-top: 68px;
+  margin-top: 60px;
   width: 100%;
   height: calc(100% - 50px);
 }

diff --git a/angular-js/src/app/image-results/image-results.component.scss b/angular-js/src/app/image-results/image-results.component.scss
@@ -7,7 +7,7 @@ img {
 }
 
 .content-container {
-  margin-top: 68px;
+  margin-top: 60px;
   width: 100%;
   height: calc(100% - 50px);
 }

diff --git a/angular-js/src/app/mrz-scanner/mrz-scanner.component.scss b/angular-js/src/app/mrz-scanner/mrz-scanner.component.scss
@@ -1,7 +1,7 @@
 @import "src/app/common/styles/bottom-bar";
 
 #mrz-scanner-container {
-  margin-top: 68px;
+  margin-top: 60px;
   width: 100%;
   height: calc(100% - 50px);
 }
diff --git a/angular-js/src/app/text-data-scanner/text-data-scanner.component.scss b/angular-js/src/app/text-data-scanner/text-data-scanner.component.scss
@@ -1,7 +1,7 @@
 @import "src/app/common/styles/bottom-bar";
 
 #textdata-scanner-container {
-  margin-top: 68px;
+  margin-top: 60px;
   width: 100%;
   height: calc(100% - 50px);
 }
diff --git a/angular-js/src/styles.scss b/angular-js/src/styles.scss
@@ -7,3 +7,7 @@
 // or import a bootstrap 4 alert styled design (SASS ONLY)
 // should be after your bootstrap imports, it uses bs4 variables, mixins, functions
 //@import '~ngx-toastr/toastr-bs4-alert';
+
+body {
+  margin: 0 !important;
+}
diff --git a/rtu-ui-data/.gitignore b/rtu-ui-data/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/rtu-ui-data/README.md b/rtu-ui-data/README.md
@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```
diff --git a/rtu-ui-data/declaration.d.ts b/rtu-ui-data/declaration.d.ts
@@ -0,0 +1 @@
+declare module "*.module.css";