@jaak.ai/stamps 1.0.0-dev.7

package/dist/collection/components/shared/mb-help/mb-help.model.js

@@ -0,0 +1,5 @@
+export const DEFEAULT_MB_HELP_ALLOW = false;
+export const DEFEAULT_MB_HELP_ALLOW_LOBBY = false;
+export const DEFEAULT_MB_HELP_ALLOW_ONBOARDING = false;
+export const DEFEAULT_MB_HELP_ALLOW_ONBOARDING_PERPETUITY = false;
+export const DEFAULT_MB_HELP_TOOLTOP_PAUSE_TIMEOUT_MS = 15000;

package/dist/collection/components/shared/mb-image-box/mb-image-box.css

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Microblink Ltd. All rights reserved.
+ *
+ * SASS variables, not customizable via CSS variables
+ */
+/**
+ * Camera experiences
+ */
+:host {
+  display: block;
+  padding: 8px;
+  border: var(--mb-component-image-box-border-width) solid var(--mb-component-image-box-border-color);
+  border-radius: var(--mb-component-image-box-border-radius);
+  max-width: 100%;
+}
+:host .label {
+  margin: 0;
+  padding: 0 0 4px 0;
+  height: var(--mb-component-image-box-label-height);
+  line-height: var(--mb-component-image-box-label-height);
+  color: var(--mb-component-image-box-label-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: var(--mb-font-family);
+  font-size: var(--mb-component-image-box-label-font-size);
+  font-weight: var(--mb-component-image-box-label-font-weight);
+}
+:host .cta {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  height: var(--mb-component-image-box-cta-height);
+  max-width: 100%;
+  color: var(--mb-component-image-box-cta-color);
+  text-decoration: none;
+  font-family: var(--mb-font-family);
+  font-size: var(--mb-component-image-box-cta-font-size);
+  font-weight: var(--mb-component-image-box-cta-font-weight);
+  cursor: pointer;
+}
+:host .cta:hover {
+  color: var(--mb-component-image-box-cta-color-hover);
+}
+:host .cta .cta-label,
+:host .cta .cta-label {
+  max-width: calc(100% - 28px);
+  height: var(--mb-component-image-box-cta-label-height);
+  line-height: var(--mb-component-image-box-cta-label-height);
+  margin: 0;
+  padding: 0 8px 0 0;
+}
+:host .cta .cta-label.filename,
+:host .cta .cta-label.filename {
+  padding: 0;
+  color: var(--mb-component-image-box-file-color);
+  font-weight: var(--mb-component-image-box-file-font-weight);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+:host .cta svg {
+  display: none;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+}
+:host .cta svg.visible {
+  display: inline-block;
+}
+
+:host input[type=file] {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+}

package/dist/collection/components/shared/mb-image-box/mb-image-box.js

@@ -0,0 +1,150 @@
+import { Host, h, } from "@stencil/core";
+import { setWebComponentParts, extractFilenameFromPath, } from "../../../utils/generic.helpers";
+export class MbImageBox {
+  constructor() {
+    this.hasImage = false;
+    this.boxTitle = undefined;
+    this.anchorText = undefined;
+  }
+  componentDidLoad() {
+    setWebComponentParts(this.hostEl);
+  }
+  componentDidRender() {
+    this.ctaLabel.innerText = this.anchorText;
+  }
+  /**
+   * Clear input image.
+   */
+  async clear() {
+    this.onClearImage();
+  }
+  onFromImageClicked(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    if (this.hasImage) {
+      this.onClearImage();
+    }
+    else {
+      this.scanFromImageInput.click();
+    }
+  }
+  onImageChange(ev) {
+    const target = ev.target;
+    if (target.files && target.files.length) {
+      this.ctaLabel.innerText = extractFilenameFromPath(target.value);
+      this.ctaLabel.classList.add("filename");
+      this.addIcon.classList.remove("visible");
+      this.removeIcon.classList.add("visible");
+      this.hasImage = true;
+      this.imageChange.emit(target.files);
+    }
+    else {
+      this.onClearImage();
+    }
+  }
+  onClearImage() {
+    this.ctaLabel.innerText = this.anchorText;
+    this.ctaLabel.classList.remove("filename");
+    this.addIcon.classList.add("visible");
+    this.removeIcon.classList.remove("visible");
+    this.hasImage = false;
+    this.scanFromImageInput.value = "";
+    this.imageChange.emit();
+  }
+  render() {
+    return (h(Host, null, h("p", { class: "label" }, this.boxTitle), h("input", { id: "scan-from-image-input", ref: (el) => (this.scanFromImageInput = el), type: "file", accept: "image/*", onChange: (ev) => this.onImageChange(ev) }), h("button", { class: "cta", onClick: (ev) => this.onFromImageClicked(ev) }, h("p", { class: "cta-label", ref: (el) => (this.ctaLabel = el) }), h("svg", { ref: (el) => (this.addIcon = el), class: "visible", 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: "M10.8333 4.16666C10.8333 3.70642 10.4602 3.33333 9.99992 3.33333C9.53968 3.33333 9.16659 3.70642 9.16659 4.16666V9.16666H4.16659C3.70635 9.16666 3.33325 9.53976 3.33325 10C3.33325 10.4602 3.70635 10.8333 4.16659 10.8333H9.16659V15.8333C9.16659 16.2936 9.53968 16.6667 9.99992 16.6667C10.4602 16.6667 10.8333 16.2936 10.8333 15.8333V10.8333H15.8333C16.2935 10.8333 16.6666 10.4602 16.6666 10C16.6666 9.53976 16.2935 9.16666 15.8333 9.16666H10.8333V4.16666Z", fill: "currentColor" })), h("svg", { ref: (el) => (this.removeIcon = el), 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: "M16.0893 5.58928C16.4147 5.26384 16.4147 4.7362 16.0893 4.41076C15.7638 4.08533 15.2362 4.08533 14.9108 4.41076L10.5 8.82151L6.08928 4.41076C5.76384 4.08533 5.2362 4.08533 4.91076 4.41076C4.58533 4.7362 4.58533 5.26384 4.91076 5.58928L9.32151 10L4.91076 14.4108C4.58533 14.7362 4.58533 15.2638 4.91076 15.5893C5.2362 15.9147 5.76384 15.9147 6.08928 15.5893L10.5 11.1785L14.9108 15.5893C15.2362 15.9147 15.7638 15.9147 16.0893 15.5893C16.4147 15.2638 16.4147 14.7362 16.0893 14.4108L11.6785 10L16.0893 5.58928Z", fill: "currentColor" })))));
+  }
+  static get is() { return "mb-image-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mb-image-box.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mb-image-box.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "boxTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text which represents name of the image."
+        },
+        "attribute": "box-title",
+        "reflect": false
+      },
+      "anchorText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text which should be displayed inside 'Add image' anchor element when file\nis not selected."
+        },
+        "attribute": "anchor-text",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "imageChange",
+        "name": "imageChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event which is triggered when selected image file is changed."
+        },
+        "complexType": {
+          "original": "FileList",
+          "resolved": "FileList",
+          "references": {
+            "FileList": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "clear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Clear input image.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "hostEl"; }
+}

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

@@ -0,0 +1,106 @@
+:host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  visibility: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 24px;
+}
+:host .mb-modal {
+  border-radius: var(--mb-modal-border-radius);
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  align-self: center;
+  position: relative;
+  max-height: 600px;
+  max-width: 640px;
+  width: 100%;
+  background-color: var(--mb-modal-background);
+  color: var(--mb-component-font-color);
+  box-shadow: 0px 25px 50px rgba(31, 41, 55, 0.25);
+}
+:host .mb-modal .inner {
+  padding: 24px;
+}
+:host .mb-modal .footer {
+  background-color: rgba(116, 116, 128, 0.08);
+  border-radius: 0px 0px 4px 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  max-width: 640px;
+  max-height: 109px;
+}
+:host .mb-modal .close-wrapper {
+  position: absolute;
+  right: 24px;
+  top: 24px;
+  cursor: pointer;
+}
+:host .mb-modal .close-wrapper svg {
+  width: 20px;
+  height: 20px;
+}
+:host .mb-modal .back-wrapper {
+  position: absolute;
+  left: 24px;
+  top: 20px;
+  cursor: pointer;
+}
+:host .mb-modal .back-wrapper svg {
+  width: 20px;
+  height: 20px;
+}
+:host .mb-modal .title {
+  text-align: center;
+  font-weight: 400;
+  font-size: var(--mb-modal-title-font-size);
+  line-height: var(--mb-modal-title-line-height);
+  margin-top: 16px;
+}
+:host .mb-modal .content {
+  margin: 24px 0;
+  font-weight: 400;
+  font-size: var(--mb-modal-content-font-size);
+  line-height: var(--mb-modal-content-line-height);
+}
+:host .mb-modal .content.centered {
+  text-align: center;
+}
+:host .mb-modal .actions {
+  display: flex;
+  justify-content: center;
+}
+:host .mb-modal .actions button {
+  width: 126px;
+  height: 32px;
+  border-radius: 0;
+  border: 0;
+  background: #48b2e8;
+  color: #ffffff;
+  cursor: pointer;
+}
+
+:host(.visible) {
+  visibility: visible;
+  opacity: 1;
+}
+
+:host(.elevated) .mb-modal {
+  box-shadow: 0px 2px 24px 0px #0000001a;
+  box-shadow: 0px 2px 8px 0px #0000000d;
+}
+
+:host(.centered) {
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,239 @@
+import { Host, h, } from "@stencil/core";
+import { getWebComponentParts, setWebComponentParts, classNames, } from "../../../utils/generic.helpers";
+export class MbModal {
+  constructor() {
+    this.visible = false;
+    this.elevated = false;
+    this.centered = false;
+    this.modalTitle = "";
+    this.content = "";
+    this.contentCentered = true;
+    this.showBackButton = false;
+    this.hideFooter = false;
+    this.hideCloseButton = false;
+  }
+  componentDidLoad() {
+    setWebComponentParts(this.hostEl);
+    const parts = getWebComponentParts(this.hostEl.shadowRoot);
+    this.hostEl.setAttribute("exportparts", parts.join(", "));
+  }
+  render() {
+    return (h(Host, { class: classNames({
+        visible: this.visible,
+        elevated: this.elevated,
+        centered: this.centered,
+      }) }, h("div", { class: "mb-modal" }, h("div", { part: "mb-modal-inner", class: "inner" }, this.hideCloseButton ? null : (h("div", { class: "close-wrapper" }, h("div", { class: "close-icon", onClick: () => this.close.emit() }, 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: "M15.5892 4.41058C15.9147 4.73602 15.9147 5.26366 15.5892 5.58909L5.58925 15.5891C5.26381 15.9145 4.73617 15.9145 4.41073 15.5891C4.0853 15.2637 4.0853 14.736 4.41073 14.4106L14.4107 4.41058C14.7362 4.08514 15.2638 4.08514 15.5892 4.41058Z", fill: "#9CA3AF" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.41073 4.41058C4.73617 4.08514 5.26381 4.08514 5.58925 4.41058L15.5892 14.4106C15.9147 14.736 15.9147 15.2637 15.5892 15.5891C15.2638 15.9145 14.7362 15.9145 14.4107 15.5891L4.41073 5.58909C4.0853 5.26366 4.0853 4.73602 4.41073 4.41058Z", fill: "#9CA3AF" }))))), this.showBackButton ? (h("div", { class: "back-wrapper" }, h("div", { onClick: () => this.back.emit() }, 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: "M9.75596 4.41058C10.0814 4.73602 10.0814 5.26366 9.75596 5.58909L6.17855 9.1665H15.8334C16.2936 9.1665 16.6667 9.5396 16.6667 9.99984C16.6667 10.4601 16.2936 10.8332 15.8334 10.8332H6.17855L9.75596 14.4106C10.0814 14.736 10.0814 15.2637 9.75596 15.5891C9.43053 15.9145 8.90289 15.9145 8.57745 15.5891L3.57745 10.5891C3.25201 10.2637 3.25201 9.73602 3.57745 9.41058L3.57799 9.41005L8.57745 4.41058C8.90289 4.08514 9.43053 4.08514 9.75596 4.41058Z", fill: "#9CA3AF" }))))) : null, h("div", { class: "title" }, this.modalTitle), h("div", { class: this.contentCentered ? "centered" : "" }, this.content), h("slot", { name: "content" }), h("div", { class: "actions" }, h("slot", { name: "actionButtons" }))), this.hideFooter ? null : (h("div", { class: "footer" }, h("slot", { name: "footer" }))))));
+  }
+  static get is() { return "mb-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mb-modal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mb-modal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "visible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show modal content"
+        },
+        "attribute": "visible",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "elevated": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show shadow drop"
+        },
+        "attribute": "elevated",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "centered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Center component"
+        },
+        "attribute": "centered",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "modalTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Passed title content from parent component"
+        },
+        "attribute": "modal-title",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "content": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Passed body content from parent component"
+        },
+        "attribute": "content",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "contentCentered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Center content inside modal"
+        },
+        "attribute": "content-centered",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showBackButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to show back arrow or not"
+        },
+        "attribute": "show-back-button",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hideFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to hide the footer or not"
+        },
+        "attribute": "hide-footer",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hideCloseButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to hide the close button or not."
+        },
+        "attribute": "hide-close-button",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "close",
+        "name": "close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when user clicks on 'X' button."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "back",
+        "name": "back",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when user clicks on 'Back Arrow' button."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostEl"; }
+}

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

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Microblink Ltd. All rights reserved.
+ *
+ * SASS variables, not customizable via CSS variables
+ */
+/**
+ * Camera experiences
+ */
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  opacity: 0;
+  border-radius: 0px;
+  visibility: hidden;
+  overflow: hidden;
+  background-color: transparent;
+  border-style: none;
+  border-color: transparent;
+  transform: translate(0, 0);
+  transform-origin: center;
+  transition: background-color 0.2s ease 0.4s, border-style 0.2s ease 0.4s, border-color 0.2s ease 0.4s, opacity 0.2s ease 0.4s, visibility 0.1s ease 0.5s, z-index 0.7s;
+}
+
+:host(.visible) {
+  z-index: 200;
+  visibility: visible;
+  opacity: 1;
+  background-color: transparent;
+  transform: translate(0, 0);
+  transition: opacity 0.2s ease, visibility 0.1s ease;
+}
+
+:host(.non-fullscreen) {
+  width: auto;
+  height: auto;
+  position: absolute;
+  top: calc(0px - var(--mb-component-border-width));
+  bottom: calc(0px - var(--mb-component-border-width));
+  left: calc(0px - var(--mb-component-border-width));
+  right: calc(0px - var(--mb-component-border-width));
+}