Ready: {{isReady}}
<div style="justify-content: space-between; align-items: flex-start;">
  <ul>
    <li>
      Aspect ratio
      <ul>
        <li>
          <button (click)="width = '60vw'; height = '35vw'">Wide</button>
        </li>
        <li>
          <button (click)="width = '20vw'; height = '45vw'">Tall</button>
        </li>
        <li>
          <button (click)="width = '40vw'; height = '40vw'">Square</button>
        </li>
      </ul>
    </li>
    <li>
      Scan settings samples
      <ul>
        <li>
          <button (click)="activeSettings = settings128">Code128</button>
        </li>
        <li>
          <button (click)="activeSettings = settings39">Code39</button>
        </li>
      </ul>
    </li>
    <li>
      Cameras (curently {{activeCamera?.label || 'not specified'}})
      <ul>
        <li *ngFor="let camera of possibleCameras">
          <button (click)="activeCamera = camera">{{camera.label}}</button>
        </li>
      </ul>
    </li>
    <li>
      Enable camera switcher (currently {{enableCameraSwitcher}})
      <button (click)="enableCameraSwitcher = !enableCameraSwitcher">Toggle</button>
    </li>
    <li>
      Enable pinch to zoom (currently {{enablePinchToZoom}})
      <button (click)="enablePinchToZoom = !enablePinchToZoom">Toggle</button>
    </li>
    <li>
      Enable tap to focus (currently {{enableTapToFocus}})
      <button (click)="enableTapToFocus = !enableTapToFocus">Toggle</button>
    </li>
    <li>
      Enable torch toggle (currently {{enableTorchToggle}})
      <button (click)="enableTorchToggle = !enableTorchToggle">Toggle</button>
    </li>
    <li>
      Enable vibrate on scan (currently {{enableVibrateOnScan}})
      <button (click)="enableVibrateOnScan = !enableVibrateOnScan">Toggle</button>
    </li>
    <li>
      Enable sound on scan (currently {{enableSoundOnScan}})
      <button (click)="enableSoundOnScan = !enableSoundOnScan">Toggle</button>
    </li>
    <li>
      GUI style (currently {{scannerGuiStyle}})
      <button (click)="toggleGuiStyle()">Toggle</button>
    </li>
    <li>
      Scanning pause (currently {{scanningPaused}})
      <button (click)="scanningPaused = !scanningPaused">Toggle</button>
    </li>
    <li>
      Camera access (currently {{cameraAccess}})
      <button (click)="cameraAccess = !cameraAccess">Toggle</button>
    </li>
    <li>
      Visible (currently {{visible}})
      <button (click)="visible = !visible">Toggle</button>
    </li>
    <li>
      FPS (currently {{fps}})
      <button (click)="fps = fps == 5 ? 30 : 5">Toggle</button>
    </li>
    <li>
      Video fit (currently {{videoFit}})
      <button (click)="videoFit = videoFit == videoFitContain ? videoFitCover : videoFitContain">Toggle</button>
    </li>
  </ul>
  <ul style="margin-right: 5vw;">
    Scanned Codes
    <li *ngFor="let barcode of scannedCodes.reverse()">
      {{barcode.data}}
    </li>
  </ul>
</div>

<hr>

<scandit-sdk-barcode-picker #picker [accessCamera]="cameraAccess"
                            [camera]="activeCamera"
                            [cameraSettings]="cameraSettings"
                            [enableCameraSwitcher]="enableCameraSwitcher"
                            [enablePinchToZoom]="enablePinchToZoom"
                            [enableTapToFocus]="enableTapToFocus"
                            [enableTorchToggle]="enableTorchToggle"
                            [guiStyle]="scannerGuiStyle"
                            [paused]="scanningPaused"
                            [playSoundOnScan]="enableSoundOnScan"
                            [scanSettings]="activeSettings"
                            [targetScanningFPS]="fps"
                            [vibrateOnScan]="enableVibrateOnScan"
                            [videoFit]="videoFit"
                            [visible]="visible"
                            [style.height]="height || '35vw'"
                            [style.width]="width || '60vw'"
                            (scan)="onScan($event)"
                            (init)="isReady = false" (ready)="isReady = true"></scandit-sdk-barcode-picker>