@smileid/web-components 2.0.2 → 10.0.2

package/dist/esm/SignaturePad-C7MtmT8m.js

@@ -0,0 +1,324 @@
+import p from "signature_pad";
+class n {
+  static memoryLimit = 2048e3;
+  static supportedTypes = ["image/jpeg", "image/png", "image/svg+xml"];
+  static getHumanSize(e) {
+    const t = ["B", "kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], a = Math.min(
+      Math.floor(Math.log(e) / Math.log(1024)),
+      t.length - 1
+    ), r = e / 1024 ** a;
+    return a === 0 ? `${e} bytes` : `${r.toFixed(0)} ${t[a]}`;
+  }
+  static getData(e) {
+    return new Promise((t, a) => {
+      const r = new FileReader();
+      r.onload = (i) => {
+        t(i.target.result);
+      }, r.onerror = () => {
+        a(
+          new Error(
+            "An error occurred reading the file. Please check the file, and try again"
+          )
+        );
+      }, r.readAsDataURL(e);
+    });
+  }
+  static async retrieve(e) {
+    if (e.length > 1)
+      throw new Error("Only one file upload is permitted at a time");
+    const t = e[0];
+    if (!n.supportedTypes.includes(t.type))
+      throw new Error(
+        "Unsupported file format. Please ensure that you are providing a JPG, PNG or SVG image"
+      );
+    if (t.size > n.memoryLimit)
+      throw new Error(
+        `${t.name} is too large. Please ensure that the file is less than ${n.getHumanSize(
+          n.memoryLimit
+        )}.`
+      );
+    return await n.getData(t);
+  }
+}
+class g extends HTMLElement {
+  connectedCallback() {
+    const e = this.attachShadow({ mode: "open" }), t = document.createElement("style");
+    t.textContent = `
+:host {
+  display: block;
+  block-size: auto;
+  inline-size: 30rem;
+  max-inline-size: 100%;
+  position: relative;
+  --color-active: #2D2B2A;
+  --color-default: #001096;
+  --color-disabled: #848282;
+}
+
+:host::part(upload) {
+  text-align: center;
+}
+
+:host::part(signature-controls) {
+  display: inline-flex;
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
+
+:host::part(upload) svg + * {
+  margin-inline-start: .5rem;
+}
+
+:host::part(canvas) {
+  background-color: #F9F0E7;
+  --dot-bg: #F9F0E7;
+  --dot-color: black;
+  --dot-size: 1px;
+  --dot-space: 22px;
+  background:
+    linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
+    linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
+    var(--dot-color);
+  border-radius: 2rem;
+  inline-size: 30rem;
+  max-inline-size: 100%;
+  aspect-ratio: 2 / 1;
+}
+
+:host::part(upload-preview-image) {
+  max-inline-size: 10rem;
+  margin-inline: auto;
+}
+
+.visually-hidden {
+  clip: rect(0 0 0 0); 
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap; 
+  width: 1px;
+}
+
+button,
+label {
+  font: inherit;
+  cursor: pointer;
+}
+
+label {
+  display: inline-flex;
+  text-decoration: underline;
+}
+
+label svg + * {
+  margin-inline-start: .5rem;
+}
+
+[type="file"] {
+  display: none;
+}
+
+.center {
+  text-align: center;
+  margin-inline: auto;
+}
+
+.color-red {
+  color: red;
+}
+
+button[data-variant="icon"] {
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: transparent;
+  border: 0px;
+}
+
+button[data-variant="text"] {
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: transparent;
+  border: 0px;
+  text-decoration: underline;
+  display: inline-flex;
+  align-items: baseline;
+}
+
+button[data-variant="solid"] {
+  --button-color: ${this.themeColor};
+  border-radius: 2.5rem;
+  border: 0;
+  background-color: transparent;
+  color: #fff;
+  cursor: pointer;
+  inline-size: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 600;
+  padding: .75rem 1.5rem;
+  text-align: center;
+  background-color: var(--button-color);
+  border: 2px solid var(--button-color);
+}
+
+button:hover,
+button:focus,
+button:active {
+  --button-color: var(--color-active);
+}
+
+button:disabled {
+  --button-color: var(--color-disabled);
+}
+`;
+    const a = document.createElement("div"), r = document.createElement("div");
+    r.innerHTML = `
+      <p id="error" class="color-red | center"><p>
+    `;
+    const i = document.createElement("div");
+    i.setAttribute("id", "controls"), i.setAttribute("part", "signature-controls"), i.innerHTML = `
+      <button data-variant="icon" type="button" name="clear" id="clear">
+        <span class="visually-hidden">
+          Clear Signature
+        </span>
+        <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="18" viewBox="0 0 17 18">
+          <path d="M3.314 15.646a8.004 8.004 0 01-2.217-4.257 8.06 8.06 0 01.545-4.655l1.789.788a6.062 6.062 0 001.264 6.737 6.033 6.033 0 008.551 0c2.358-2.37 2.358-6.224 0-8.592a5.996 5.996 0 00-4.405-1.782l.662 2.354-3.128-.796-3.127-.796 2.25-2.324L7.748 0l.55 1.953a7.966 7.966 0 016.33 2.326 8.004 8.004 0 012.342 5.684 8.005 8.005 0 01-2.343 5.683A7.928 7.928 0 018.97 18a7.928 7.928 0 01-5.656-2.354z" fill="currentColor" />
+        </svg>
+      </button>
+    `;
+    const o = document.createElement("canvas"), s = this.parentElement.closest(":not([hidden])").querySelector(":not([hidden])").offsetWidth, l = 30 * getComputedStyle(document.documentElement).fontSize.split(
+      "px"
+    )[0], u = 2;
+    o.width = s < l ? s : l, o.height = (s < l ? s : l) / u, o.setAttribute("id", "signature-canvas"), o.setAttribute("part", "canvas");
+    const c = document.createElement("div");
+    c.setAttribute("id", "signature-upload-wrapper"), c.innerHTML = `
+      <p part="upload">
+        <strong>or</strong>
+        <label>
+          <input type='file' onclick='this.value=null;' id='upload-signature' accept='image/jpeg, image/png, image/svg+xml' />
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
+            <rect width="16" height="16" fill="#F9F0E7" rx="2"/>
+            <mask id="sign" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha">
+              <rect width="16" height="16" fill="#D9D9D9" rx="2"/>
+            </mask>
+            <g mask="url(#sign)">
+              <path fill="#2D2B2A" d="M0 13.333h16V16H0z"/>
+            </g>
+            <path fill="#2D2B2A" fill-rule="evenodd" d="M2.69 7.346a.23.23 0 0 1 .059-.073.275.275 0 0 1 .284-.034c.07.036.146.064.224.084h.12c0-.012.105-.048.105-.395a.796.796 0 0 1 .211-.61.667.667 0 0 1 .607-.096c.202.061.39.154.555.275.194.138.38.286.555.443.146.134.31.25.489.347l.092.047c.119.06.238-.023.185-.143l-.04-.12a.817.817 0 0 1-.066-.694.675.675 0 0 1 .244-.273.774.774 0 0 1 .364-.12c.324-.028.651 0 .964.083h.026c.027-.861.225-1.83.82-2.523.593-.694 1.478-.993 2.205-.837.726.155 1.307.73 1.307 1.602 0 1.34-.872 2.26-1.915 2.93.471.374.85.835 1.11 1.351.027.046.05.094.065.144h.014a.55.55 0 0 0 .079.203.44.44 0 0 0 .04.18c.002.025.011.05.026.07h-.013c.037.17.041.344.013.515a.955.955 0 0 1-.188.493 1.097 1.097 0 0 1-.433.344 1.346 1.346 0 0 1-1.122.012 2.194 2.194 0 0 1-.846-.67 5.024 5.024 0 0 1-.462-.681h-.026a.502.502 0 0 0-.106-.144.014.014 0 0 1-.01-.003.011.011 0 0 1-.003-.009.035.035 0 0 1-.013-.023.047.047 0 0 1-.011-.017.626.626 0 0 0-.055-.163.24.24 0 0 0-.014-.095h.014a3.477 3.477 0 0 1-.198-.49 6.318 6.318 0 0 1-.278-1.699L7.51 6.51c-.243-.07-.5-.094-.753-.071-.158.024-.198.071-.211.107-.014.036-.04.168.053.359.092.191.171.478.118.658a.45.45 0 0 1-.21.25.66.66 0 0 1-.305.06 1.521 1.521 0 0 1-.568-.19 3.533 3.533 0 0 1-.58-.42 3.54 3.54 0 0 0-.49-.394 1.49 1.49 0 0 0-.409-.203c-.053-.024-.079-.024-.092-.012H4.05c-.014.012-.066.072-.066.275 0 .395-.12.705-.423.813a.813.813 0 0 1-.41.024 1.646 1.646 0 0 1-.343-.12.237.237 0 0 1-.126-.127.208.208 0 0 1 .007-.172Zm5.731.766c.068.204.152.404.251.598.011.053.03.105.053.155.036.068.08.132.132.191.02.05.047.099.08.144.085.152.186.296.303.43.167.22.389.4.647.526a.847.847 0 0 0 .687-.011.655.655 0 0 0 .247-.204.573.573 0 0 0 .11-.287 1.435 1.435 0 0 0-.04-.454h-.014a.496.496 0 0 0-.079-.335.491.491 0 0 0-.119-.191 3.842 3.842 0 0 0-1.017-1.16l-.356.18a.253.253 0 0 1-.193.027.248.248 0 0 1-.088-.041.22.22 0 0 1-.063-.07.219.219 0 0 1-.02-.172.242.242 0 0 1 .113-.14l.172-.083a3.388 3.388 0 0 0-.463-.251l-.58-.24c.022.47.101.935.237 1.388Zm.568-1.555c.24.12.474.252.7.395 1.017-.634 1.81-1.459 1.81-2.63 0-.67-.41-1.053-.912-1.16-.502-.108-1.189.083-1.704.669-.515.586-.7 1.47-.713 2.32v.083c.251.084.515.192.819.323Z" clip-rule="evenodd"/>
+          </svg>
+          <span>upload a signature</span>
+        </label>
+      </p>
+    `;
+    const d = document.createElement("p");
+    d.innerHTML = `
+      <button data-variant="solid" type="button" name="publish" id="publish">
+        <span>
+          Continue
+        </span>
+        <svg
+          aria-hidden="true"
+          width="25"
+          height="24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7 12h11m0 0-4.588-4M18 12l-4.588 4"
+            stroke="#fff"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    `, a.appendChild(r), a.appendChild(i), a.appendChild(o), this.allowUpload && a.appendChild(c), a.appendChild(d), e.appendChild(t), e.appendChild(a), this.core = new p(o), this.errorMessage = r.querySelector("#error"), window && (window.onresize = this.resizeCanvas()), this.clearSignatureButton = i.querySelector("#clear"), this.clearSignatureButton.addEventListener(
+      "click",
+      () => this.clearSignature()
+    ), this.uploadSignatureButton = c.querySelector("#upload-signature"), this.uploadSignatureButton.addEventListener(
+      "change",
+      (h) => this.uploadSignature(h)
+    ), this.publishSignatureButton = d.querySelector("#publish"), this.publishSignatureButton.addEventListener(
+      "click",
+      () => this.publishSignature()
+    );
+  }
+  disconnectedCallback() {
+    this.publishSignatureButton.removeEventListener(
+      "click",
+      () => this.publishSignature()
+    ), this.clearSignatureButton.removeEventListener(
+      "click",
+      () => this.clearSignature()
+    ), this.uploadSignatureButton.removeEventListener(
+      "change",
+      (e) => this.uploadSignature(e)
+    );
+  }
+  // Adjust canvas coordinate space taking into account pixel ratio,
+  // to make it look crisp on mobile devices.
+  // This also causes canvas to be cleared.
+  resizeCanvas() {
+    const e = this.shadowRoot.querySelector("canvas"), t = Math.max(window.devicePixelRatio || 1, 1);
+    e.width = (e.offsetWidth || e.width) * t, e.height = (e.offsetHeight || e.height) * t, e.getContext("2d").scale(t, t), this.core.fromData(this.core.toData());
+  }
+  publishSignature() {
+    try {
+      this.resetErrorMessage();
+      const e = this.shadowRoot.querySelector("img");
+      let t = e ? e.src : void 0;
+      if (!t && !this.core.isEmpty() && (t = this.core.toDataURL("image/svg+xml")), t)
+        this.dispatchEvent(
+          new CustomEvent("signature-pad.publish", {
+            detail: t
+          })
+        );
+      else
+        throw new Error(
+          `No signature present. ${this.allowUpload ? "Draw or upload" : "Draw"} a signature`
+        );
+    } catch (e) {
+      this.handleError(e.message);
+    }
+  }
+  resetErrorMessage() {
+    this.errorMessage.textContent = "";
+  }
+  handleError(e) {
+    this.errorMessage.textContent = e;
+  }
+  clearSignature() {
+    this.resetErrorMessage();
+    const e = this.shadowRoot.querySelector("canvas"), t = this.shadowRoot.querySelector("img");
+    t && (t.remove(), e.removeAttribute("hidden")), this.core.clear();
+  }
+  previewUpload(e) {
+    const t = this.shadowRoot.querySelector("canvas");
+    let a = this.shadowRoot.querySelector("img");
+    a || (a = document.createElement("img")), a.src = e, a.setAttribute("part", "upload-preview-image"), t.setAttribute("hidden", !0), t.insertAdjacentElement("afterend", a);
+  }
+  async uploadSignature(e) {
+    try {
+      this.resetErrorMessage();
+      const { files: t } = e.target, a = await n.retrieve(t);
+      this.previewUpload(a);
+    } catch (t) {
+      this.handleError(t.message);
+    }
+  }
+  get allowUpload() {
+    return this.hasAttribute("allow-upload");
+  }
+  get themeColor() {
+    return this.getAttribute("theme-color") || "#001096";
+  }
+}
+"customElements" in window && !window.customElements.get("smileid-signature-pad") && window.customElements.define("smileid-signature-pad", g);
+export {
+  g as S
+};
+//# sourceMappingURL=SignaturePad-C7MtmT8m.js.map

package/dist/esm/SignaturePad-C7MtmT8m.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignaturePad-C7MtmT8m.js","sources":["../../lib/components/signature-pad/src/SignaturePad.js"],"sourcesContent":["import SignaturePadCore from 'signature_pad';\r\n\r\nclass SmartFileUpload {\r\n  static memoryLimit = 2048000;\r\n\r\n  static supportedTypes = ['image/jpeg', 'image/png', 'image/svg+xml'];\r\n\r\n  static getHumanSize(numberOfBytes) {\r\n    // Approximate to the closest prefixed unit\r\n    const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\r\n    const exponent = Math.min(\r\n      Math.floor(Math.log(numberOfBytes) / Math.log(1024)),\r\n      units.length - 1,\r\n    );\r\n    const approx = numberOfBytes / 1024 ** exponent;\r\n    const output =\r\n      exponent === 0\r\n        ? `${numberOfBytes} bytes`\r\n        : `${approx.toFixed(0)} ${units[exponent]}`;\r\n\r\n    return output;\r\n  }\r\n\r\n  static getData(file) {\r\n    return new Promise((resolve, reject) => {\r\n      const reader = new FileReader();\r\n\r\n      reader.onload = (e) => {\r\n        resolve(e.target.result);\r\n      };\r\n      reader.onerror = () => {\r\n        reject(\r\n          new Error(\r\n            'An error occurred reading the file. Please check the file, and try again',\r\n          ),\r\n        );\r\n      };\r\n      reader.readAsDataURL(file);\r\n    });\r\n  }\r\n\r\n  static async retrieve(files) {\r\n    if (files.length > 1) {\r\n      throw new Error('Only one file upload is permitted at a time');\r\n    }\r\n\r\n    const file = files[0];\r\n\r\n    if (!SmartFileUpload.supportedTypes.includes(file.type)) {\r\n      throw new Error(\r\n        'Unsupported file format. Please ensure that you are providing a JPG, PNG or SVG image',\r\n      );\r\n    }\r\n\r\n    if (file.size > SmartFileUpload.memoryLimit) {\r\n      throw new Error(\r\n        `${\r\n          file.name\r\n        } is too large. Please ensure that the file is less than ${SmartFileUpload.getHumanSize(\r\n          SmartFileUpload.memoryLimit,\r\n        )}.`,\r\n      );\r\n    }\r\n\r\n    const imageAsDataUrl = await SmartFileUpload.getData(file);\r\n\r\n    return imageAsDataUrl;\r\n  }\r\n}\r\n\r\nclass SignaturePad extends HTMLElement {\r\n  connectedCallback() {\r\n    const shadow = this.attachShadow({ mode: 'open' });\r\n\r\n    const style = document.createElement('style');\r\n    style.textContent = `\r\n:host {\r\n  display: block;\r\n  block-size: auto;\r\n  inline-size: 30rem;\r\n  max-inline-size: 100%;\r\n  position: relative;\r\n  --color-active: #2D2B2A;\r\n  --color-default: #001096;\r\n  --color-disabled: #848282;\r\n}\r\n\r\n:host::part(upload) {\r\n  text-align: center;\r\n}\r\n\r\n:host::part(signature-controls) {\r\n  display: inline-flex;\r\n  position: absolute;\r\n  top: 1rem;\r\n  right: 1rem;\r\n}\r\n\r\n:host::part(upload) svg + * {\r\n  margin-inline-start: .5rem;\r\n}\r\n\r\n:host::part(canvas) {\r\n  background-color: #F9F0E7;\r\n  --dot-bg: #F9F0E7;\r\n  --dot-color: black;\r\n  --dot-size: 1px;\r\n  --dot-space: 22px;\r\n  background:\r\n    linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),\r\n    linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),\r\n    var(--dot-color);\r\n  border-radius: 2rem;\r\n  inline-size: 30rem;\r\n  max-inline-size: 100%;\r\n  aspect-ratio: 2 / 1;\r\n}\r\n\r\n:host::part(upload-preview-image) {\r\n  max-inline-size: 10rem;\r\n  margin-inline: auto;\r\n}\r\n\r\n.visually-hidden {\r\n  clip: rect(0 0 0 0); \r\n  clip-path: inset(50%);\r\n  height: 1px;\r\n  overflow: hidden;\r\n  position: absolute;\r\n  white-space: nowrap; \r\n  width: 1px;\r\n}\r\n\r\nbutton,\r\nlabel {\r\n  font: inherit;\r\n  cursor: pointer;\r\n}\r\n\r\nlabel {\r\n  display: inline-flex;\r\n  text-decoration: underline;\r\n}\r\n\r\nlabel svg + * {\r\n  margin-inline-start: .5rem;\r\n}\r\n\r\n[type=\"file\"] {\r\n  display: none;\r\n}\r\n\r\n.center {\r\n  text-align: center;\r\n  margin-inline: auto;\r\n}\r\n\r\n.color-red {\r\n  color: red;\r\n}\r\n\r\nbutton[data-variant=\"icon\"] {\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  background-color: transparent;\r\n  border: 0px;\r\n}\r\n\r\nbutton[data-variant=\"text\"] {\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  background-color: transparent;\r\n  border: 0px;\r\n  text-decoration: underline;\r\n  display: inline-flex;\r\n  align-items: baseline;\r\n}\r\n\r\nbutton[data-variant=\"solid\"] {\r\n  --button-color: ${this.themeColor};\r\n  border-radius: 2.5rem;\r\n  border: 0;\r\n  background-color: transparent;\r\n  color: #fff;\r\n  cursor: pointer;\r\n  inline-size: 100%;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 18px;\r\n  font-weight: 600;\r\n  padding: .75rem 1.5rem;\r\n  text-align: center;\r\n  background-color: var(--button-color);\r\n  border: 2px solid var(--button-color);\r\n}\r\n\r\nbutton:hover,\r\nbutton:focus,\r\nbutton:active {\r\n  --button-color: var(--color-active);\r\n}\r\n\r\nbutton:disabled {\r\n  --button-color: var(--color-disabled);\r\n}\r\n`;\r\n\r\n    const wrapper = document.createElement('div');\r\n    const errorMessage = document.createElement('div');\r\n    errorMessage.innerHTML = `\r\n      <p id=\"error\" class=\"color-red | center\"><p>\r\n    `;\r\n\r\n    const signatureControls = document.createElement('div');\r\n    signatureControls.setAttribute('id', 'controls');\r\n    signatureControls.setAttribute('part', 'signature-controls');\r\n    signatureControls.innerHTML = `\r\n      <button data-variant=\"icon\" type=\"button\" name=\"clear\" id=\"clear\">\r\n        <span class=\"visually-hidden\">\r\n          Clear Signature\r\n        </span>\r\n        <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" viewBox=\"0 0 17 18\">\r\n          <path d=\"M3.314 15.646a8.004 8.004 0 01-2.217-4.257 8.06 8.06 0 01.545-4.655l1.789.788a6.062 6.062 0 001.264 6.737 6.033 6.033 0 008.551 0c2.358-2.37 2.358-6.224 0-8.592a5.996 5.996 0 00-4.405-1.782l.662 2.354-3.128-.796-3.127-.796 2.25-2.324L7.748 0l.55 1.953a7.966 7.966 0 016.33 2.326 8.004 8.004 0 012.342 5.684 8.005 8.005 0 01-2.343 5.683A7.928 7.928 0 018.97 18a7.928 7.928 0 01-5.656-2.354z\" fill=\"currentColor\" />\r\n        </svg>\r\n      </button>\r\n    `;\r\n\r\n    const canvas = document.createElement('canvas');\r\n\r\n    /**\r\n     * NOTE: In order to make this responsive, we need to calculate the width\r\n     * / height of the canvas element relative to the closest visible element\r\n     *\r\n     * Within our consuming context, we do follow these steps:\r\n     * - Find the closest ancestor that is visible\r\n     * - Find the visible child of that ancestor\r\n     * - Get the reference width / inline-size of the element\r\n     * - Compute the canvas.height as the lesser of the reference width or the\r\n     *   inline size of the canvas set in CSS\r\n     * - Compute the canvas.height as half the size of the canvas.width or the\r\n     *   block size computed by the aspect-ratio property\r\n     */\r\n\r\n    const closestVisibleAncestor = this.parentElement.closest(':not([hidden])');\r\n    const visibleChild = closestVisibleAncestor.querySelector(':not([hidden])');\r\n    const containerWidth = visibleChild.offsetWidth;\r\n\r\n    const remInPx = getComputedStyle(document.documentElement).fontSize.split(\r\n      'px',\r\n    )[0];\r\n    const componentMaxInlineSize = 30 * remInPx; // 30rem from the style declaration\r\n    const aspectRatio = 2; // 2 from the canvas style aspect ratio declaration\r\n\r\n    canvas.width =\r\n      containerWidth < componentMaxInlineSize\r\n        ? containerWidth\r\n        : componentMaxInlineSize;\r\n    canvas.height =\r\n      (containerWidth < componentMaxInlineSize\r\n        ? containerWidth\r\n        : componentMaxInlineSize) / aspectRatio;\r\n\r\n    canvas.setAttribute('id', 'signature-canvas');\r\n    canvas.setAttribute('part', 'canvas');\r\n\r\n    const uploadControl = document.createElement('div');\r\n    uploadControl.setAttribute('id', 'signature-upload-wrapper');\r\n    uploadControl.innerHTML = `\r\n      <p part=\"upload\">\r\n        <strong>or</strong>\r\n        <label>\r\n          <input type='file' onclick='this.value=null;' id='upload-signature' accept='image/jpeg, image/png, image/svg+xml' />\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\r\n            <rect width=\"16\" height=\"16\" fill=\"#F9F0E7\" rx=\"2\"/>\r\n            <mask id=\"sign\" width=\"16\" height=\"16\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\">\r\n              <rect width=\"16\" height=\"16\" fill=\"#D9D9D9\" rx=\"2\"/>\r\n            </mask>\r\n            <g mask=\"url(#sign)\">\r\n              <path fill=\"#2D2B2A\" d=\"M0 13.333h16V16H0z\"/>\r\n            </g>\r\n            <path fill=\"#2D2B2A\" fill-rule=\"evenodd\" d=\"M2.69 7.346a.23.23 0 0 1 .059-.073.275.275 0 0 1 .284-.034c.07.036.146.064.224.084h.12c0-.012.105-.048.105-.395a.796.796 0 0 1 .211-.61.667.667 0 0 1 .607-.096c.202.061.39.154.555.275.194.138.38.286.555.443.146.134.31.25.489.347l.092.047c.119.06.238-.023.185-.143l-.04-.12a.817.817 0 0 1-.066-.694.675.675 0 0 1 .244-.273.774.774 0 0 1 .364-.12c.324-.028.651 0 .964.083h.026c.027-.861.225-1.83.82-2.523.593-.694 1.478-.993 2.205-.837.726.155 1.307.73 1.307 1.602 0 1.34-.872 2.26-1.915 2.93.471.374.85.835 1.11 1.351.027.046.05.094.065.144h.014a.55.55 0 0 0 .079.203.44.44 0 0 0 .04.18c.002.025.011.05.026.07h-.013c.037.17.041.344.013.515a.955.955 0 0 1-.188.493 1.097 1.097 0 0 1-.433.344 1.346 1.346 0 0 1-1.122.012 2.194 2.194 0 0 1-.846-.67 5.024 5.024 0 0 1-.462-.681h-.026a.502.502 0 0 0-.106-.144.014.014 0 0 1-.01-.003.011.011 0 0 1-.003-.009.035.035 0 0 1-.013-.023.047.047 0 0 1-.011-.017.626.626 0 0 0-.055-.163.24.24 0 0 0-.014-.095h.014a3.477 3.477 0 0 1-.198-.49 6.318 6.318 0 0 1-.278-1.699L7.51 6.51c-.243-.07-.5-.094-.753-.071-.158.024-.198.071-.211.107-.014.036-.04.168.053.359.092.191.171.478.118.658a.45.45 0 0 1-.21.25.66.66 0 0 1-.305.06 1.521 1.521 0 0 1-.568-.19 3.533 3.533 0 0 1-.58-.42 3.54 3.54 0 0 0-.49-.394 1.49 1.49 0 0 0-.409-.203c-.053-.024-.079-.024-.092-.012H4.05c-.014.012-.066.072-.066.275 0 .395-.12.705-.423.813a.813.813 0 0 1-.41.024 1.646 1.646 0 0 1-.343-.12.237.237 0 0 1-.126-.127.208.208 0 0 1 .007-.172Zm5.731.766c.068.204.152.404.251.598.011.053.03.105.053.155.036.068.08.132.132.191.02.05.047.099.08.144.085.152.186.296.303.43.167.22.389.4.647.526a.847.847 0 0 0 .687-.011.655.655 0 0 0 .247-.204.573.573 0 0 0 .11-.287 1.435 1.435 0 0 0-.04-.454h-.014a.496.496 0 0 0-.079-.335.491.491 0 0 0-.119-.191 3.842 3.842 0 0 0-1.017-1.16l-.356.18a.253.253 0 0 1-.193.027.248.248 0 0 1-.088-.041.22.22 0 0 1-.063-.07.219.219 0 0 1-.02-.172.242.242 0 0 1 .113-.14l.172-.083a3.388 3.388 0 0 0-.463-.251l-.58-.24c.022.47.101.935.237 1.388Zm.568-1.555c.24.12.474.252.7.395 1.017-.634 1.81-1.459 1.81-2.63 0-.67-.41-1.053-.912-1.16-.502-.108-1.189.083-1.704.669-.515.586-.7 1.47-.713 2.32v.083c.251.084.515.192.819.323Z\" clip-rule=\"evenodd\"/>\r\n          </svg>\r\n          <span>upload a signature</span>\r\n        </label>\r\n      </p>\r\n    `;\r\n\r\n    const publishSignatureContainer = document.createElement('p');\r\n    publishSignatureContainer.innerHTML = `\r\n      <button data-variant=\"solid\" type=\"button\" name=\"publish\" id=\"publish\">\r\n        <span>\r\n          Continue\r\n        </span>\r\n        <svg\r\n          aria-hidden=\"true\"\r\n          width=\"25\"\r\n          height=\"24\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <path\r\n            d=\"M7 12h11m0 0-4.588-4M18 12l-4.588 4\"\r\n            stroke=\"#fff\"\r\n            stroke-width=\"1.5\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    `;\r\n\r\n    wrapper.appendChild(errorMessage);\r\n    wrapper.appendChild(signatureControls);\r\n    wrapper.appendChild(canvas);\r\n    if (this.allowUpload) wrapper.appendChild(uploadControl);\r\n    wrapper.appendChild(publishSignatureContainer);\r\n\r\n    shadow.appendChild(style);\r\n    shadow.appendChild(wrapper);\r\n\r\n    this.core = new SignaturePadCore(canvas);\r\n\r\n    // Error Message\r\n    this.errorMessage = errorMessage.querySelector('#error');\r\n\r\n    // Canvas Resize / Sizing\r\n    if (window) {\r\n      window.onresize = this.resizeCanvas();\r\n    }\r\n\r\n    // Signature Pad Controls\r\n    this.clearSignatureButton = signatureControls.querySelector('#clear');\r\n    this.clearSignatureButton.addEventListener('click', () =>\r\n      this.clearSignature(),\r\n    );\r\n\r\n    // Upload Controls\r\n    this.uploadSignatureButton =\r\n      uploadControl.querySelector('#upload-signature');\r\n    this.uploadSignatureButton.addEventListener('change', (event) =>\r\n      this.uploadSignature(event),\r\n    );\r\n\r\n    // Publish Signature\r\n    this.publishSignatureButton =\r\n      publishSignatureContainer.querySelector('#publish');\r\n    this.publishSignatureButton.addEventListener('click', () =>\r\n      this.publishSignature(),\r\n    );\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.publishSignatureButton.removeEventListener('click', () =>\r\n      this.publishSignature(),\r\n    );\r\n    this.clearSignatureButton.removeEventListener('click', () =>\r\n      this.clearSignature(),\r\n    );\r\n    this.uploadSignatureButton.removeEventListener('change', (event) =>\r\n      this.uploadSignature(event),\r\n    );\r\n  }\r\n\r\n  // Adjust canvas coordinate space taking into account pixel ratio,\r\n  // to make it look crisp on mobile devices.\r\n  // This also causes canvas to be cleared.\r\n  resizeCanvas() {\r\n    // When zoomed out to less than 100%, for some very strange reason,\r\n    // some browsers report devicePixelRatio as less than 1\r\n    // and only part of the canvas is cleared then.\r\n    const canvas = this.shadowRoot.querySelector('canvas');\r\n    const ratio = Math.max(window.devicePixelRatio || 1, 1);\r\n\r\n    // This part causes the canvas to be cleared\r\n    canvas.width = (canvas.offsetWidth || canvas.width) * ratio;\r\n    canvas.height = (canvas.offsetHeight || canvas.height) * ratio;\r\n    canvas.getContext('2d').scale(ratio, ratio);\r\n\r\n    // This library does not listen for canvas changes, so after the canvas is automatically\r\n    // cleared by the browser, SignaturePad#isEmpty might still return false, even though the\r\n    // canvas looks empty, because the internal data of this library wasn't cleared. To make sure\r\n    // that the state of this library is consistent with visual state of the canvas, you\r\n    // have to clear it manually.\r\n    // signaturePad.clear();\r\n\r\n    // If you want to keep the drawing on resize instead of clearing it you can reset the data.\r\n    this.core.fromData(this.core.toData());\r\n  }\r\n\r\n  publishSignature() {\r\n    try {\r\n      this.resetErrorMessage();\r\n      const previewImage = this.shadowRoot.querySelector('img');\r\n      let image = previewImage ? previewImage.src : undefined;\r\n      if (!image && !this.core.isEmpty()) {\r\n        image = this.core.toDataURL('image/svg+xml');\r\n      }\r\n\r\n      if (image) {\r\n        this.dispatchEvent(\r\n          new CustomEvent('signature-pad.publish', {\r\n            detail: image,\r\n          }),\r\n        );\r\n      } else {\r\n        throw new Error(\r\n          `No signature present. ${\r\n            this.allowUpload ? 'Draw or upload' : 'Draw'\r\n          } a signature`,\r\n        );\r\n      }\r\n    } catch (error) {\r\n      this.handleError(error.message);\r\n    }\r\n  }\r\n\r\n  resetErrorMessage() {\r\n    this.errorMessage.textContent = '';\r\n  }\r\n\r\n  handleError(error) {\r\n    this.errorMessage.textContent = error;\r\n  }\r\n\r\n  clearSignature() {\r\n    this.resetErrorMessage();\r\n    const canvas = this.shadowRoot.querySelector('canvas');\r\n    const img = this.shadowRoot.querySelector('img');\r\n\r\n    if (img) {\r\n      img.remove();\r\n      canvas.removeAttribute('hidden');\r\n    }\r\n\r\n    this.core.clear();\r\n  }\r\n\r\n  previewUpload(fileData) {\r\n    const canvas = this.shadowRoot.querySelector('canvas');\r\n    let img = this.shadowRoot.querySelector('img');\r\n\r\n    if (!img) {\r\n      img = document.createElement('img');\r\n    }\r\n\r\n    img.src = fileData;\r\n    img.setAttribute('part', 'upload-preview-image');\r\n    canvas.setAttribute('hidden', true);\r\n    canvas.insertAdjacentElement('afterend', img);\r\n  }\r\n\r\n  async uploadSignature(event) {\r\n    try {\r\n      this.resetErrorMessage();\r\n      const { files } = event.target;\r\n\r\n      // validate file, and convert file to data url\r\n      const fileData = await SmartFileUpload.retrieve(files);\r\n\r\n      // swap out canvas for an image for preview\r\n      this.previewUpload(fileData);\r\n    } catch (error) {\r\n      this.handleError(error.message);\r\n    }\r\n  }\r\n\r\n  get allowUpload() {\r\n    return this.hasAttribute('allow-upload');\r\n  }\r\n\r\n  get themeColor() {\r\n    return this.getAttribute('theme-color') || '#001096';\r\n  }\r\n}\r\n\r\nif (\r\n  'customElements' in window &&\r\n  !window.customElements.get('smileid-signature-pad')\r\n) {\r\n  window.customElements.define('smileid-signature-pad', SignaturePad);\r\n}\r\n\r\nexport default SignaturePad;\r\n"],"names":["SmartFileUpload","numberOfBytes","units","exponent","approx","file","resolve","reject","reader","e","files","SignaturePad","shadow","style","wrapper","errorMessage","signatureControls","canvas","containerWidth","componentMaxInlineSize","aspectRatio","uploadControl","publishSignatureContainer","SignaturePadCore","event","ratio","previewImage","image","error","img","fileData"],"mappings":"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"}