@jaak.ai/stamps 1.0.0-beta.1

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

@@ -0,0 +1,201 @@
+import { Host, h } from "@stencil/core";
+import { setWebComponentParts, classNames, } from "../../../utils/generic.helpers";
+export class MbButton {
+  constructor() {
+    this.clickHandler = undefined;
+    this.disabled = false;
+    this.visible = false;
+    this.selected = false;
+    this.imageSrcDefault = undefined;
+    this.imageSrcActive = undefined;
+    this.imageAlt = "";
+    this.label = "";
+    this.buttonTitle = undefined;
+  }
+  connectedCallback() {
+    setWebComponentParts(this.hostEl);
+  }
+  render() {
+    return (h(Host, { class: classNames({
+        visible: this.visible,
+        selected: this.selected,
+      }) }, h("button", { onClick: this.clickHandler, title: this.buttonTitle, disabled: this.disabled }, h("img", { class: "icon-default", src: this.imageSrcDefault, alt: "" }), h("img", { class: "icon-active", src: this.imageSrcActive, alt: "" })), this.label !== "" && h("span", null, this.label)));
+  }
+  static get is() { return "mb-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mb-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mb-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "clickHandler": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(ev: UIEvent) => void",
+          "resolved": "(ev: UIEvent) => void",
+          "references": {
+            "UIEvent": {
+              "location": "global"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Function to call on click"
+        }
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to 'true' if button should be disabled, and if click events should not be triggered."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "visible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to 'true' if button should be visible."
+        },
+        "attribute": "visible",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to 'true' if button should enter 'selected' state."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "imageSrcDefault": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Passed image from parent component."
+        },
+        "attribute": "image-src-default",
+        "reflect": false
+      },
+      "imageSrcActive": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Passed image from parent component."
+        },
+        "attribute": "image-src-active",
+        "reflect": false
+      },
+      "imageAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Passed description text for image element from parent component."
+        },
+        "attribute": "image-alt",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to string which should be displayed below the icon.\n\nIf omitted, nothing will show."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "buttonTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-title",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "hostEl"; }
+}

package/dist/collection/components/shared/mb-button-classic/mb-button-classic.css

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) Microblink Ltd. All rights reserved.
+ *
+ * SASS variables, not customizable via CSS variables
+ */
+/**
+ * Camera experiences
+ */
+:host {
+  box-sizing: border-box;
+  display: block;
+}
+:host button {
+  display: block;
+  border: none;
+  margin: 0;
+  padding: 7px 16px;
+  color: var(--mb-component-button-classic-text-color);
+  background: var(--mb-component-button-classic-background);
+  border: 1px solid var(--mb-component-button-classic-background);
+  border-radius: var(--mb-component-button-classic-border-radius);
+  font-family: var(--mb-font-family);
+  font-size: var(--mb-component-button-classic-font-size);
+  font-weight: var(--mb-component-button-classic-font-weight);
+}
+:host button:not([disabled]) {
+  cursor: pointer;
+}
+:host button[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+:host(.mobile) {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+}
+:host(.mobile) button {
+  display: block;
+  border: none;
+  margin: 0;
+  padding: 7px 16px;
+  color: var(--mb-component-button-classic-text-color);
+  background: var(--mb-component-button-classic-background);
+  border: 1px solid var(--mb-component-button-classic-background);
+  border-radius: var(--mb-component-button-classic-border-radius);
+  font-family: var(--mb-font-family);
+  font-size: var(--mb-component-button-classic-font-size);
+  font-weight: var(--mb-component-button-classic-font-weight);
+}
+:host(.mobile) button:not([disabled]) {
+  cursor: pointer;
+}
+:host(.mobile) button[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+:host(.quit-mobile) {
+  width: 170%;
+  display: flex;
+  flex-direction: column;
+}
+:host(.quit-mobile) button {
+  display: block;
+  border: none;
+  margin: 0;
+  padding: 7px 16px;
+  color: var(--mb-component-button-classic-text-color);
+  background: var(--mb-component-button-classic-background);
+  border: 1px solid var(--mb-component-button-classic-background);
+  border-radius: var(--mb-component-button-classic-border-radius);
+  font-family: var(--mb-font-family);
+  font-size: var(--mb-component-button-classic-font-size);
+  font-weight: var(--mb-component-button-classic-font-weight);
+}
+:host(.quit-mobile) button:not([disabled]) {
+  cursor: pointer;
+}
+:host(.quit-mobile) button[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+:host(.inverted) a,
+:host(.inverted) button {
+  background-color: white;
+  color: var(--mb-component-button-classic-inverted-text-color);
+  border: 1px solid var(--mb-component-button-classic-inverted-border-color);
+}
+:host(.inverted) button:hover,
+:host(.inverted) button:active,
+:host(.inverted) button:focus {
+  cursor: pointer;
+  background-color: var(--mb-component-button-classic-inverted-hover-background);
+}
+:host(.inverted) button:focus {
+  border-color: var(--mb-component-button-classic-focused-border-color);
+}

package/dist/collection/components/shared/mb-button-classic/mb-button-classic.js

@@ -0,0 +1,130 @@
+import { Host, h } from "@stencil/core";
+import { setWebComponentParts } from "../../../utils/generic.helpers";
+import { classNames } from "../../../utils/generic.helpers";
+import { isDesktop } from "../../../utils/device.helpers";
+export class MbButtonClassic {
+  constructor() {
+    this.inverted = false;
+    this.quit = undefined;
+    this.disabled = false;
+    this.preventDefault = false;
+    this.clickHandler = undefined;
+  }
+  connectedCallback() {
+    setWebComponentParts(this.hostEl);
+  }
+  render() {
+    return (h(Host, { class: classNames({
+        inverted: this.inverted,
+        mobile: !isDesktop(),
+        "quit-mobile": this.quit && !isDesktop(),
+      }) }, h("button", { part: "button", disabled: this.disabled, onClick: this.clickHandler }, h("slot", null))));
+  }
+  static get is() { return "mb-button-classic"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mb-button-classic.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mb-button-classic.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "inverted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to 'true' if button should be inverted style."
+        },
+        "attribute": "inverted",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "quit": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "quit",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to 'true' if button should be disabled, and if click events should not be triggered."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "preventDefault": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to 'true' if default event should be prevented."
+        },
+        "attribute": "prevent-default",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "clickHandler": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(ev: UIEvent) => void",
+          "resolved": "(ev: UIEvent) => void",
+          "references": {
+            "UIEvent": {
+              "location": "global"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Function to call on click"
+        }
+      }
+    };
+  }
+  static get elementRef() { return "hostEl"; }
+}