Merged PR 1858: feat(scanner): add full-screen scanner styles and components

feat(scanner): add full-screen scanner styles and components

Implemented full-screen scanner styles in styles.scss.
Added ScannerButtonComponent to trigger barcode scanning.
Created ScannerComponent for rendering camera view and processing scans.
Updated ScannerService to handle scanning operations and configuration.
Enhanced README.md with detailed library features and usage examples.
Refactored return process components to utilize new scanner button.
Updated search bar input to integrate scanner functionality.
Added tests for new components and services, ensuring proper functionality.
Improved UI button styles for better integration with scanner features.
Ref:
#5123
DS // Scanner Overlay
QA
#5056
Retoure // Scan-Button lösen Suche aus
QA
#5147

Related work items: #5147

libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.html

@@ -36,14 +36,5 @@
     }
   </ui-search-bar>
 
-  <ui-icon-button
-    *sharedScannerReady
-    class="desktop:invisible"
-    type="submit"
-    [color]="'primary'"
-    [disabled]="control.invalid"
-    (click)="triggerSearch.emit()"
-    name="isaActionScanner"
-    data-which="scan-button"
-  ></ui-icon-button>
+  <shared-scanner-button (scan)="onScan($event)"></shared-scanner-button>
 }

libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.ts

@@ -20,7 +20,7 @@ import { isaActionSearch, isaActionScanner } from '@isa/icons';
 import { FilterService, TextFilterInput } from '../../core';
 import { InputType } from '../../types';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { ScannerReadyDirective } from '@isa/core/scanner';
+import { ScannerButtonComponent } from '@isa/core/scanner';
 
 @Component({
   selector: 'filter-search-bar-input',
@@ -34,7 +34,7 @@ import { ScannerReadyDirective } from '@isa/core/scanner';
     IconButtonComponent,
     ReactiveFormsModule,
     UiSearchBarClearComponent,
-    ScannerReadyDirective,
+    ScannerButtonComponent,
   ],
   host: {
     '[class]': "['filter-search-bar-input', appearanceClass()]",
@@ -86,4 +86,11 @@ export class SearchBarInputComponent {
       });
     });
   }
+
+  onScan(value: string | null): void {
+    if (value) {
+      this.filterService.setInputTextValue(this.inputKey(), value);
+      this.triggerSearch.emit();
+    }
+  }
 }

libs/shared/filter/src/lib/menus/filter-menu/filter-menu-button.component.spec.ts

@@ -12,6 +12,9 @@ import { NgIconComponent } from '@ng-icons/core';
 import { IconButtonComponent } from '@isa/ui/buttons';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
+jest.mock('scandit-web-datacapture-core', () => ({}));
+jest.mock('scandit-web-datacapture-barcode', () => ({}));
+
 describe('FilterMenuButtonComponent', () => {
   let spectator: Spectator<FilterMenuButtonComponent>;
   let filterService: jest.Mocked<FilterService>;