feat: add input with scan capability for barcodes

src/app/components/bar-code-input/bar-code-input.html

@@ -0,0 +1,15 @@
+
+<div class="bar-code-input__container">
+  <div class="bar-code-input__input">
+    <mat-form-field appearance="outline" class="full-width">
+      <mat-label>{{'common.barcode'|translate|upperfirst}}</mat-label>
+      <input matInput #input [formControl]="control"/>
+    </mat-form-field>
+  </div>
+  <div class="bar-code-input__btn">
+    <button matMiniFab color="primary" class="upload-btn">
+      <mat-icon [fontSet]="'material-symbols-outlined'" (click)="scan.set({scan: true})">barcode_scanner</mat-icon>
+    </button>
+  </div>
+</div>
+<app-bar-code-reader [scan]="scan()" (result)="control.patchValue($event.detail?.code?.rawValue ?? '')"></app-bar-code-reader>

src/app/components/bar-code-input/bar-code-input.scss

@@ -0,0 +1,18 @@
+.bar-code-input {
+  &__container {
+    display: flex;
+    column-gap: 8px;
+  }
+
+  &__input {
+    flex-grow: 1;
+  }
+
+  &__btn {
+    margin-top: 0.5rem;
+  }
+}
+
+mat-form-field {
+  width: 100%;
+}

src/app/components/bar-code-input/bar-code-input.spec.ts

@@ -0,0 +1,44 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarCodeInput } from './bar-code-input';
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { provideTranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-bar-code-input-mock',
+  imports: [
+    BarCodeInput,
+    ReactiveFormsModule
+  ],
+  template: `
+  <form [formGroup]="form">
+    <app-bar-code-input formControlName="mock"/>
+  </form>
+  `,
+  styleUrl: './bar-code-input.scss'
+})
+class BarCodeInputTestbed {
+  form = new FormGroup({mock: new FormControl(null)})
+}
+
+describe('BarCodeInput', () => {
+  let component: BarCodeInputTestbed;
+  let fixture: ComponentFixture<BarCodeInputTestbed>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BarCodeInputTestbed],
+      providers: [provideTranslateService()]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BarCodeInputTestbed);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/bar-code-input/bar-code-input.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit, Optional, Self, signal } from '@angular/core';
+import { MatMiniFabButton } from '@angular/material/button';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatInput } from '@angular/material/input';
+import { BarCodeReaderWrapper } from '../bar-code-reader/bar-code-reader';
+import { ControlValueAccessor, FormControl, NgControl, ReactiveFormsModule } from '@angular/forms';
+import { UpperfirstPipe } from '../../pipes/upperfirst-pipe';
+import { TranslatePipe } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-bar-code-input',
+  imports: [
+    BarCodeReaderWrapper,
+    MatFormField,
+    MatIcon,
+    MatInput,
+    MatLabel,
+    MatMiniFabButton,
+    ReactiveFormsModule,
+    TranslatePipe,
+    UpperfirstPipe,
+  ],
+  templateUrl: './bar-code-input.html',
+  styleUrl: './bar-code-input.scss',
+})
+export class BarCodeInput implements ControlValueAccessor, OnInit {
+  scan = signal({ scan: false });
+  protected control = new FormControl();
+
+  constructor(@Self() @Optional() public controlDir: NgControl) {
+    if (this.controlDir) {
+      this.controlDir.valueAccessor = this;
+    }
+  }
+
+  ngOnInit() {
+    this.control = <FormControl>this.controlDir?.control;
+  }
+
+  writeValue(obj: any): void {}
+  registerOnChange(fn: any): void {}
+  registerOnTouched(fn: any): void {}
+  setDisabledState?(isDisabled: boolean): void {}
+}