@jaak.ai/stamps 1.0.0-beta.1

package/dist/collection/components/shared/mb-camera-experience/mb-camera-experience.utils.js

@@ -0,0 +1,55 @@
+import { CameraExperienceState } from "../../../utils/data-structures";
+// TODO: do we need anything except CardSingleSide, CardMultiSide and Barcode?
+function getStateClass(state) {
+  let stateClass = "is-default";
+  switch (state) {
+    case CameraExperienceState.BarcodeScanning:
+    case CameraExperienceState.Classification:
+      stateClass = "is-classification";
+      break;
+    case CameraExperienceState.Default:
+      stateClass = "is-default";
+      break;
+    case CameraExperienceState.Detection:
+      stateClass = "is-detection";
+      break;
+    case CameraExperienceState.FacePhotoCovered:
+      stateClass = "is-error-move-closer";
+      console.log("Face photo covered");
+      break;
+    case CameraExperienceState.MoveFarther:
+      stateClass = "is-error-move-farther";
+      break;
+    case CameraExperienceState.MoveCloser:
+      stateClass = "is-error-move-closer";
+      break;
+    case CameraExperienceState.AdjustAngle:
+      stateClass = "is-error-adjust-angle";
+      break;
+    case CameraExperienceState.Flip:
+      stateClass = "is-flip";
+      break;
+    case CameraExperienceState.Done:
+      stateClass = "is-done";
+      break;
+    case CameraExperienceState.DoneAll:
+      stateClass = "is-done-all";
+      break;
+    // We use the same class for blur and glare
+    case CameraExperienceState.BlurDetected:
+    case CameraExperienceState.GlareDetected:
+    // and for wrong side
+    case CameraExperienceState.WrongSide:
+    // and for passport page errors
+    case CameraExperienceState.MovePassportDownError:
+    case CameraExperienceState.MovePassportUpError:
+    case CameraExperienceState.MovePassportLeftError:
+    case CameraExperienceState.MovePassportRightError:
+      stateClass = "is-error-move-closer";
+      break;
+    default:
+    // Reset class
+  }
+  return stateClass;
+}
+export { getStateClass };

package/dist/collection/components/shared/mb-camera-selection/mb-camera-selection.css

@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) Microblink Ltd. All rights reserved.
+ *
+ * SASS variables, not customizable via CSS variables
+ */
+/**
+ * Camera experiences
+ */
+:host {
+  display: grid;
+  font-family: inherit;
+  font-size: var(--mb-font-size);
+}
+:host * {
+  box-sizing: border-box;
+}
+:host .active-camera {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  cursor: pointer;
+  min-width: 0;
+  max-width: 100%;
+  align-items: center;
+  color: var(--mb-toolbar-color);
+  line-height: var(--mb-line-height);
+  text-align: center;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: var(--mb-toolbar-border-radius);
+}
+:host .active-camera .icon {
+  width: 20px;
+  height: 20px;
+}
+:host .active-camera .icon svg {
+  width: 20px;
+  height: 20px;
+}
+:host .active-camera .name {
+  font-weight: var(--mb-toolbar-camera-name-font-weight);
+  padding: 0 8px 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:host .active-camera {
+  padding: 4px 16px;
+  background-color: transparent;
+}
+:host .active-camera:hover, :host .active-camera:active, :host .active-camera:focus {
+  background-color: rgba(107, 114, 128, 0.3);
+}
+:host .active-camera.active, :host .active-camera:active, :host .active-camera:focus {
+  padding: 4px 16px;
+  border-color: var(--mb-toolbar-border-color);
+}
+:host #list-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+:host #list-background:not(.visible) {
+  display: none;
+}
+:host .list {
+  position: absolute;
+  top: calc(var(--mb-font-size) * 1.5 + 16px);
+  left: calc(50% - var(--mb-toolbar-selection-width) / 2);
+  width: var(--mb-toolbar-selection-width);
+  padding: 0;
+  background-color: var(--mb-toolbar-list-background);
+  border-radius: var(--mb-toolbar-border-radius);
+  box-shadow: var(--mb-toolbar-list-shadow);
+}
+:host .list:not(.visible) {
+  display: none;
+}
+:host .list svg,
+:host .list .name,
+:host .list .spacer {
+  display: inline-block;
+  vertical-align: middle;
+}
+:host .list .spacer,
+:host .list svg {
+  width: 24px;
+  height: 20px;
+}
+:host .list .name {
+  max-width: calc(100% - 24px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host .list ul {
+  margin: 0;
+  padding: 8px;
+  border-radius: var(--mb-toolbar-list-border-radius);
+  list-style: none;
+}
+:host .list ul li {
+  display: block;
+}
+:host .list ul li.active {
+  color: #0062f2;
+}
+:host .list ul button {
+  all: unset;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: var(--mb-toolbar-list-item-border-radius);
+  padding: 4px 16px;
+  line-height: var(--mb-line-height);
+  cursor: pointer;
+}
+:host .list ul button:hover, :host .list ul button:focus {
+  background-color: rgba(116, 116, 128, 0.08);
+}

package/dist/collection/components/shared/mb-camera-selection/mb-camera-selection.js

@@ -0,0 +1,194 @@
+import { Host, h, } from "@stencil/core";
+import { setWebComponentParts, classNames, } from "../../../utils/generic.helpers";
+import { getCameraDevices } from "../../../utils/sdk.service";
+export class MbCameraSelection {
+  constructor() {
+    this.activeCamera = {
+      prettyName: "-",
+      details: null,
+    };
+    this.cameraList = [];
+    this.isListVisible = false;
+    this.clearIsCameraActive = false;
+  }
+  /**
+   * Change active camera.
+   */
+  async setActiveCamera(cameraId) {
+    const camera = this.cameraList.find((el) => el.details.deviceId === cameraId);
+    if (!camera) {
+      return;
+    }
+    this.activeCamera = camera;
+  }
+  /**
+   * Populate list of camera devices.
+   */
+  async populateCameraDevices() {
+    try {
+      const devices = await getCameraDevices();
+      this.cameraList = devices;
+    }
+    catch (error) {
+      // Camera access error is handled by the video recognizer.
+      this.cameraList = [];
+    }
+  }
+  handleListOpen(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.setListVisibility(!this.isListVisible);
+  }
+  handleCameraSelection(ev, camera) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.changeCameraDevice.emit(camera);
+    this.activeCamera = camera;
+    this.setListVisibility(false);
+  }
+  setListVisibility(visible) {
+    this.isListVisible = visible;
+  }
+  componentDidLoad() {
+    setWebComponentParts(this.hostEl);
+  }
+  render() {
+    const cameraListElements = this.cameraList.map((camera) => {
+      const isActive = !this.clearIsCameraActive &&
+        this.activeCamera?.details?.deviceId === camera.details.deviceId;
+      let content = h("span", { class: "spacer" });
+      if (isActive) {
+        content = (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17.2559 5.24408C17.5813 5.56951 17.5813 6.09715 17.2559 6.42259L8.92257 14.7559C8.59713 15.0814 8.06949 15.0814 7.74406 14.7559L3.57739 10.5893C3.25195 10.2638 3.25195 9.73618 3.57739 9.41074C3.90283 9.08531 4.43047 9.08531 4.7559 9.41074L8.33331 12.9882L16.0774 5.24408C16.4028 4.91864 16.9305 4.91864 17.2559 5.24408Z", fill: "#0062F2" })));
+      }
+      return (h("li", { class: classNames({ active: isActive }) }, h("button", { onClick: (ev) => this.handleCameraSelection(ev, camera) }, content, h("span", { class: "name" }, camera.prettyName))));
+    });
+    const doNotRender = !(this.cameraList?.length > 1);
+    if (doNotRender) {
+      return undefined;
+    }
+    return (h(Host, null, h("button", { class: this.isListVisible ? "active-camera active" : "active-camera", onClick: (ev) => this.handleListOpen(ev) }, h("span", { class: "icon" }, h("svg", { width: "21", height: "20", viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.82145 2.98816C7.13401 2.6756 7.55793 2.5 7.99996 2.5H13C13.442 2.5 13.8659 2.6756 14.1785 2.98816C14.491 3.30072 14.6666 3.72464 14.6666 4.16667C14.6666 4.38768 14.7544 4.59964 14.9107 4.75592C15.067 4.9122 15.2789 5 15.5 5H16.3333C16.9963 5 17.6322 5.26339 18.1011 5.73223C18.5699 6.20107 18.8333 6.83696 18.8333 7.5V15C18.8333 15.663 18.5699 16.2989 18.1011 16.7678C17.6322 17.2366 16.9963 17.5 16.3333 17.5H4.66663C4.00358 17.5 3.3677 17.2366 2.89886 16.7678C2.43002 16.2989 2.16663 15.663 2.16663 15V7.5C2.16663 6.83696 2.43002 6.20107 2.89886 5.73223C3.3677 5.26339 4.00358 5 4.66663 5H5.49996C5.72097 5 5.93293 4.9122 6.08922 4.75592C6.2455 4.59964 6.33329 4.38768 6.33329 4.16667C6.33329 3.72464 6.50889 3.30072 6.82145 2.98816ZM4.66663 6.66667C4.44561 6.66667 4.23365 6.75446 4.07737 6.91074C3.92109 7.06702 3.83329 7.27899 3.83329 7.5V15C3.83329 15.221 3.92109 15.433 4.07737 15.5893C4.23365 15.7455 4.44561 15.8333 4.66663 15.8333H16.3333C16.5543 15.8333 16.7663 15.7455 16.9225 15.5893C17.0788 15.433 17.1666 15.221 17.1666 15V7.5C17.1666 7.27899 17.0788 7.06702 16.9225 6.91074C16.7663 6.75446 16.5543 6.66667 16.3333 6.66667H15.5C14.8369 6.66667 14.201 6.40327 13.7322 5.93443C13.2634 5.46559 13 4.82971 13 4.16667L7.99996 4.16667C7.99996 4.82971 7.73657 5.46559 7.26773 5.93443C6.79889 6.40327 6.163 6.66667 5.49996 6.66667H4.66663Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.5 9.16667C9.57948 9.16667 8.83329 9.91286 8.83329 10.8333C8.83329 11.7538 9.57948 12.5 10.5 12.5C11.4204 12.5 12.1666 11.7538 12.1666 10.8333C12.1666 9.91286 11.4204 9.16667 10.5 9.16667ZM7.16663 10.8333C7.16663 8.99238 8.65901 7.5 10.5 7.5C12.3409 7.5 13.8333 8.99238 13.8333 10.8333C13.8333 12.6743 12.3409 14.1667 10.5 14.1667C8.65901 14.1667 7.16663 12.6743 7.16663 10.8333Z", fill: "white" }))), h("span", { class: "name" }, this.activeCamera.prettyName), h("span", { class: "icon" }, h("svg", { width: "21", height: "20", viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.9107 6.91076C5.23614 6.58533 5.76378 6.58533 6.08922 6.91076L10.5 11.3215L14.9107 6.91076C15.2361 6.58533 15.7638 6.58533 16.0892 6.91076C16.4147 7.2362 16.4147 7.76384 16.0892 8.08928L11.0892 13.0893C10.7638 13.4147 10.2361 13.4147 9.9107 13.0893L4.9107 8.08928C4.58527 7.76384 4.58527 7.2362 4.9107 6.91076Z", fill: "white" })))), h("div", { id: "list-background", class: classNames({ visible: this.isListVisible }), onClick: () => this.setListVisibility(false) }), h("div", { class: this.isListVisible ? "list visible" : "list" }, h("ul", null, cameraListElements))));
+  }
+  static get is() { return "mb-camera-selection"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mb-camera-selection.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mb-camera-selection.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "clearIsCameraActive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clear-is-camera-active",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "activeCamera": {},
+      "cameraList": {},
+      "isListVisible": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "setIsCameraActive",
+        "name": "setIsCameraActive",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when camera stream becomes active."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "changeCameraDevice",
+        "name": "changeCameraDevice",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when user selects a different camera device."
+        },
+        "complexType": {
+          "original": "CameraEntry",
+          "resolved": "CameraEntry",
+          "references": {
+            "CameraEntry": {
+              "location": "import",
+              "path": "../../../utils/data-structures"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setActiveCamera": {
+        "complexType": {
+          "signature": "(cameraId: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "CameraEntry": {
+              "location": "import",
+              "path": "../../../utils/data-structures"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Change active camera.",
+          "tags": []
+        }
+      },
+      "populateCameraDevices": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Populate list of camera devices.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "hostEl"; }
+}

package/dist/collection/components/shared/mb-camera-toolbar/mb-camera-toolbar.css

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Microblink Ltd. All rights reserved.
+ *
+ * SASS variables, not customizable via CSS variables
+ */
+/**
+ * Camera experiences
+ */
+:host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(107, 114, 128, 0.7);
+  -webkit-backdrop-filter: blur(var(--mb-blur-filter));
+  backdrop-filter: blur(var(--mb-blur-filter));
+}
+:host header {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  height: 44px;
+  align-items: center;
+}
+:host .camera-selection-wrapper {
+  min-width: 0;
+  position: relative;
+}
+
+@media only screen and (min-width: 1280px) {
+  :host header {
+    max-width: 1024px;
+    margin: 0 auto;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+/**
+ * Toolbar buttons
+ */
+:host .toolbar-button {
+  all: unset;
+  flex-shrink: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  box-sizing: border-box;
+  border-radius: var(--mb-toolbar-border-radius);
+  display: grid;
+  place-content: center;
+}
+:host .toolbar-button.close-button {
+  justify-self: end;
+}
+:host .toolbar-button svg {
+  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.4));
+}
+:host .toolbar-button:hover {
+  background-color: rgba(107, 114, 128, 0.3);
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+}
+:host .toolbar-button:focus, :host .toolbar-button:active {
+  box-shadow: 0 0 0 1px var(--mb-toolbar-border-color);
+}
+:host .flip-button {
+  transform-style: preserve-3d;
+  perspective: 600px;
+  z-index: 1;
+  justify-self: flex-start;
+}
+:host .flip-button svg {
+  transition: transform 300ms;
+  backface-visibility: visible;
+  will-change: transform;
+}
+:host .flip-button.flipped svg {
+  transform: rotateY(180deg);
+}