@jaak.ai/stamps 1.0.0-beta.1

package/dist/collection/components/shared/mb-overlay/mb-overlay.js

@@ -0,0 +1,76 @@
+import { Host, h } from "@stencil/core";
+import { setWebComponentParts, classNames, } from "../../../utils/generic.helpers";
+export class MbOverlay {
+  constructor() {
+    this.fullscreen = true;
+    this.visible = false;
+  }
+  componentDidLoad() {
+    setWebComponentParts(this.hostEl);
+  }
+  getHostClassNames() {
+    const classNames = [];
+    this.hostEl.classList.forEach((value) => {
+      if (value !== "visible" && value !== "non-fullscreen") {
+        classNames.push(value);
+      }
+    });
+    return classNames.join(" ");
+  }
+  render() {
+    return (h(Host, { class: `${classNames({ visible: this.visible, "non-fullscreen": !this.fullscreen })} ${this.getHostClassNames()}` }, h("slot", null)));
+  }
+  static get is() { return "mb-overlay"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mb-overlay.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mb-overlay.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "fullscreen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to 'false' if overlay should not cover whole screen."
+        },
+        "attribute": "fullscreen",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "visible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to 'true' if overlay should be visible."
+        },
+        "attribute": "visible",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "hostEl"; }
+}

package/dist/collection/components/shared/mb-progress-tracker/mb-progress-tracker.css

@@ -0,0 +1,24 @@
+:host {
+  --mb-progress-tracker-dot-active-color: #0062f2;
+  --mb-progress-tracker-dot-inactive-color: #c6c6c8;
+  display: block;
+}
+
+.mb-progress-tracker {
+  display: flex;
+  flex-direction: row;
+  align-items: space-between;
+}
+
+.mb-progress-tracker .dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  margin: 0px 6px;
+}
+.mb-progress-tracker .dot.active {
+  background-color: var(--mb-progress-tracker-dot-active-color);
+}
+.mb-progress-tracker .dot.inactive {
+  background-color: var(--mb-progress-tracker-dot-inactive-color);
+}

package/dist/collection/components/shared/mb-progress-tracker/mb-progress-tracker.js

@@ -0,0 +1,80 @@
+import { Host, h } from "@stencil/core";
+export class MbProgressTracker {
+  constructor() {
+    this.getCurrentCorrected = () => {
+      if (this.current < 1) {
+        return 1;
+      }
+      if (this.current > this.size) {
+        return this.size;
+      }
+      return this.current;
+    };
+    this.getSteps = () => {
+      const array = [];
+      for (let counter = 1; counter <= this.size; counter++) {
+        array.push(counter);
+      }
+      return array;
+    };
+    this.size = 3;
+    this.current = 1;
+  }
+  render() {
+    const currentCorrected = this.getCurrentCorrected();
+    const steps = this.getSteps();
+    return (h(Host, null, h("div", { class: "mb-progress-tracker" }, steps.map((step) => (h("div", { class: `dot ${currentCorrected === step ? "active" : "inactive"}` }))))));
+  }
+  static get is() { return "mb-progress-tracker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mb-progress-tracker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mb-progress-tracker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Steps count.\n\nDefault is 3."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "3"
+      },
+      "current": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Current step.\n\nSteps start from 1 up to the size number.\n\nDefault is 1."
+        },
+        "attribute": "current",
+        "reflect": false,
+        "defaultValue": "1"
+      }
+    };
+  }
+}

package/dist/collection/components/shared/mb-screen/mb-screen.css

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Microblink Ltd. All rights reserved.
+ *
+ * SASS variables, not customizable via CSS variables
+ */
+/**
+ * Camera experiences
+ */
+:host {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 8px 16px;
+  display: grid;
+}
+
+:host(:not(.visible)) {
+  display: none !important;
+}

package/dist/collection/components/shared/mb-screen/mb-screen.js

@@ -0,0 +1,48 @@
+import { Host, h } from "@stencil/core";
+import { setWebComponentParts, classNames, } from "../../../utils/generic.helpers";
+export class MbScreen {
+  constructor() {
+    this.visible = false;
+  }
+  componentDidLoad() {
+    setWebComponentParts(this.hostEl);
+  }
+  render() {
+    return (h(Host, { class: classNames({ visible: this.visible }) }, h("slot", null)));
+  }
+  static get is() { return "mb-screen"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mb-screen.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mb-screen.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "visible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to 'true' if screen should be visible."
+        },
+        "attribute": "visible",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "hostEl"; }
+}

package/dist/collection/components/shared/mb-spinner/mb-spinner.css

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Microblink Ltd. All rights reserved.
+ *
+ * SASS variables, not customizable via CSS variables
+ */
+/**
+ * Camera experiences
+ */
+:host {
+  display: block;
+  padding: 0;
+}
+:host img {
+  display: block;
+  width: 24px;
+  height: 24px;
+  animation: rotation 700ms linear infinite;
+}
+
+:host(.large) img {
+  width: 100px;
+  height: 100px;
+}
+
+@keyframes rotation {
+  100% {
+    transform-origin: center;
+    transform: rotate(360deg);
+  }
+}

package/dist/collection/components/shared/mb-spinner/mb-spinner.js

@@ -0,0 +1,67 @@
+import { Host, h } from "@stencil/core";
+import { setWebComponentParts } from "../../../utils/generic.helpers";
+export class MbSpinner {
+  constructor() {
+    this.icon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA2IiBoZWlnaHQ9IjEwNiIgdmlld0JveD0iMCAwIDEwNiAxMDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjUzIiBjeT0iNTMiIHI9IjUwIiBzdHJva2U9IiNEQ0VBRkYiIHN0cm9rZS13aWR0aD0iNiIvPgo8cGF0aCBkPSJNMyA1M0MzIDI1LjM4NTggMjUuMzg1OCAzIDUzIDMiIHN0cm9rZT0iIzAwNjJGMiIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==";
+    this.size = "default";
+  }
+  componentDidLoad() {
+    setWebComponentParts(this.hostEl);
+  }
+  render() {
+    return (h(Host, { class: this.size }, h("img", { src: this.icon })));
+  }
+  static get is() { return "mb-spinner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mb-spinner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mb-spinner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of `src` attribute for <img> element."
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA2IiBoZWlnaHQ9IjEwNiIgdmlld0JveD0iMCAwIDEwNiAxMDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjUzIiBjeT0iNTMiIHI9IjUwIiBzdHJva2U9IiNEQ0VBRkYiIHN0cm9rZS13aWR0aD0iNiIvPgo8cGF0aCBkPSJNMyA1M0MzIDI1LjM4NTggMjUuMzg1OCAzIDUzIDMiIHN0cm9rZT0iIzAwNjJGMiIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Spinner size, can be 'default' or 'large'."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      }
+    };
+  }
+  static get elementRef() { return "hostEl"; }
+}

package/dist/collection/components/shared/mb-tooltip/mb-tooltip.css

@@ -0,0 +1,62 @@
+:host {
+  display: block;
+}
+
+.mb-tooltip {
+  display: none;
+  position: absolute;
+  margin: 2px 40px 2px 32px;
+  padding: 8px;
+  font-size: 12px;
+  line-height: 16px;
+  color: #374151;
+  background-color: #fff;
+  border: 1px solid rgba(120, 120, 128, 0.2);
+  filter: drop-shadow(0px 2px 4px rgba(31, 41, 55, 0.06)) drop-shadow(0px 4px 6px rgba(31, 41, 55, 0.1));
+  border-radius: 4px;
+}
+.mb-tooltip.text-center {
+  text-align: center;
+}
+.mb-tooltip.text-left {
+  text-align: left;
+}
+.mb-tooltip.text-right {
+  text-align: right;
+}
+.mb-tooltip svg {
+  display: block;
+  float: left;
+  margin: 6px 14px 6px 6px;
+}
+.mb-tooltip::after {
+  position: absolute;
+  display: block;
+  content: " ";
+  background-color: #fff;
+  width: 10px;
+  height: 10px;
+  transform: rotate(-45deg);
+}
+.mb-tooltip.arrow-none::after {
+  display: none;
+}
+.mb-tooltip.arrow-left::after {
+  left: -3px;
+  top: calc(50% - 5px);
+}
+.mb-tooltip.arrow-right::after {
+  right: -3px;
+  top: calc(50% - 5px);
+}
+.mb-tooltip.arrow-up::after {
+  top: -3px;
+  left: calc(50% - 5px);
+}
+.mb-tooltip.arrow-down::after {
+  bottom: -3px;
+  left: calc(50% - 5px);
+}
+.mb-tooltip.visible {
+  display: block;
+}

package/dist/collection/components/shared/mb-tooltip/mb-tooltip.js

@@ -0,0 +1,150 @@
+import { Host, h } from "@stencil/core";
+export class MbTooltip {
+  constructor() {
+    this.show = undefined;
+    this.message = undefined;
+    this.arrowPosition = undefined;
+    this.showWarningIcon = undefined;
+    this.showInfoIcon = undefined;
+    this.textAlign = undefined;
+    this.containerWidth = undefined;
+  }
+  render() {
+    return (h(Host, null, h("p", { part: "tooltip", class: `mb-tooltip ${this.show ? "visible" : ""} ${this.arrowPosition ? this.arrowPosition : "arrow-none"} ${this.textAlign ? this.textAlign : "text-center"} ` }, this.message)));
+  }
+  static get is() { return "mb-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mb-tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mb-tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "show": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show",
+        "reflect": false
+      },
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "message",
+        "reflect": false
+      },
+      "arrowPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "| \"arrow-left\"\n    | \"arrow-right\"\n    | \"arrow-up\"\n    | \"arrow-down\"\n    | \"arrow-none\"",
+          "resolved": "\"arrow-down\" | \"arrow-left\" | \"arrow-none\" | \"arrow-right\" | \"arrow-up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "arrow-position",
+        "reflect": false
+      },
+      "showWarningIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-warning-icon",
+        "reflect": false
+      },
+      "showInfoIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-info-icon",
+        "reflect": false
+      },
+      "textAlign": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"text-center\" | \"text-left\" | \"text-right\"",
+          "resolved": "\"text-center\" | \"text-left\" | \"text-right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text-align",
+        "reflect": false
+      },
+      "containerWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "container-width",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/shared/mb-tooltip-advanced/mb-tooltip-advanced.css

@@ -0,0 +1,91 @@
+:host {
+  --background-color: #0062f2;
+  --font-color: white;
+  display: block;
+  font-family: inherit;
+}
+
+.mb-tooltip {
+  display: none;
+  position: absolute;
+  margin: 0px;
+  margin-bottom: 5px;
+  padding: 2px 4px 4px 4px;
+  font-family: inherit;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 16px;
+  color: var(--font-color);
+  background-color: var(--background-color);
+  border: 1px solid rgba(120, 120, 128, 0.2);
+  filter: drop-shadow(0px 2px 4px rgba(31, 41, 55, 0.06)) drop-shadow(0px 4px 6px rgba(31, 41, 55, 0.1));
+  border-radius: 4px;
+}
+.mb-tooltip.text-center {
+  text-align: center;
+}
+.mb-tooltip.text-left {
+  text-align: left;
+}
+.mb-tooltip.text-right {
+  text-align: right;
+}
+.mb-tooltip svg {
+  display: block;
+  float: left;
+  margin: 6px 14px 6px 6px;
+}
+.mb-tooltip::after {
+  position: absolute;
+  z-index: -1;
+  display: block;
+  content: " ";
+  background-color: var(--background-color);
+  width: 10px;
+  height: 10px;
+}
+.mb-tooltip.arrow-none::after {
+  display: none;
+}
+.mb-tooltip.arrow-left::after {
+  left: -3px;
+  top: calc(50% - 5px);
+}
+.mb-tooltip.arrow-right::after {
+  right: -3px;
+  top: calc(50% - 5px);
+}
+.mb-tooltip.arrow-up::after {
+  top: -3px;
+  left: calc(50% - 5px);
+  transform: rotate(-45deg) translateY(-3px);
+}
+.mb-tooltip.arrow-up-left::after {
+  top: -3px;
+  left: 15px;
+  transform: rotate(-45deg) translateY(-3px);
+}
+.mb-tooltip.arrow-up-right::after {
+  top: -3px;
+  right: 15px;
+  transform: rotate(-45deg) translateY(-3px);
+}
+.mb-tooltip.arrow-down::after {
+  bottom: -3px;
+  left: calc(50% - 5px);
+  transform: rotate(-45deg) translateY(3px);
+}
+.mb-tooltip.arrow-down-left::after {
+  bottom: -3px;
+  left: 15px;
+  transform: rotate(-45deg) translateY(3px);
+}
+.mb-tooltip.arrow-down-right::after {
+  bottom: -3px;
+  right: 15px;
+  transform: rotate(-45deg) translateY(3px);
+}
+.mb-tooltip.visible {
+  display: block;
+}