@saasquatch/mint-components 1.11.0-5 → 1.11.0-7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "1.11.0-5",
+  "version": "1.11.0-7",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",

package/dist/cjs/sqm-cash-payouts.cjs.entry.js

@@ -1,19 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-
-const CashPayouts = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    return index.h("div", null);
-  }
-};
-
-exports.sqm_cash_payouts = CashPayouts;

package/dist/cjs/sqm-widget-verification.cjs.entry.js

@@ -1,89 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-
-function useWidgetVerification() {
-  const [step, setStep] = stencilHooks_module.useState("email");
-  const [email, setEmail] = stencilHooks_module.useState(null);
-  const [codeRef, setCodeRef] = stencilHooks_module.useState(null);
-  // const [code, setCode] = useState<string[]>(["-", "-", "-", "-", "-"]);
-  const [verified, setVerified] = stencilHooks_module.useState(false);
-  const onSubmitEmail = () => {
-    setStep("code");
-    setVerified(false);
-  };
-  stencilHooks_module.useEffect(() => {
-    if (!codeRef)
-      return;
-    const codeElements = Array.from(codeRef.querySelectorAll(`input[name="code"]`));
-    console.log({ codeElements });
-    codeElements.forEach((element, idx) => {
-      element.addEventListener("keydown", (e) => {
-        if (e.key === "Backspace" && e.target.value === "") {
-          codeElements[Math.max(0, idx - 1)].focus();
-        }
-      });
-      element.addEventListener("input", (e) => {
-        const input = e.target.value;
-        if (!input)
-          return;
-        if (idx === codeElements.length - 1) {
-          e.target.value = input.slice(-1);
-          return;
-        }
-        if (input.length > 1) {
-          const rest = input.slice(1);
-          e.target.value = input.slice(0, 1);
-          codeElements[idx + 1].value = rest;
-          codeElements[idx + 1].dispatchEvent(new Event("input"));
-        }
-        codeElements[idx + 1].focus();
-      });
-    });
-  }, [codeRef]);
-  const onCheckCode = () => {
-    setVerified(true);
-  };
-  return {
-    step,
-    email,
-    setEmail,
-    setCodeRef,
-    onCheckCode,
-    onSubmitEmail,
-    verified,
-  };
-}
-
-const WidgetVerification = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = useWidgetVerification();
-    if (props.verified)
-      return (index.h("slot", { name: "verified" }, index.h("h1", null, "VERIFIED")));
-    const Email = () => {
-      return (index.h("div", null, index.h("input", { type: "email", value: props.email, onChange: (e) => props.setEmail(e.target.value) }), index.h("button", { onClick: props.onSubmitEmail }, "Verify")));
-    };
-    const Code = () => {
-      return (index.h("div", { ref: props.setCodeRef }, index.h("input", { name: "code" }), index.h("input", { name: "code" }), index.h("input", { name: "code" }), index.h("input", { name: "code" }), index.h("input", { name: "code" }), index.h("hr", null), index.h("button", { onClick: props.onCheckCode }, "Check code")));
-    };
-    const verificationStep = () => {
-      switch (props.step) {
-        case "email":
-          return index.h(Email, null);
-        case "code":
-          return index.h(Code, null);
-      }
-    };
-    return (index.h("div", null, index.h("h3", null, "Cash Payouts"), verificationStep()));
-  }
-};
-
-exports.sqm_widget_verification = WidgetVerification;

package/dist/collection/components/sqm-cash-payouts/sqm-cash-payouts.js

@@ -1,16 +0,0 @@
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h } from "@stencil/core";
-/**
- * @uiName Cash Payouts
- */
-export class CashPayouts {
-  constructor() {
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    return h("div", null);
-  }
-  static get is() { return "sqm-cash-payouts"; }
-  static get encapsulation() { return "shadow"; }
-}

package/dist/collection/components/sqm-cash-payouts/sqm-widget-verification/sqm-widget-verification.js

@@ -1,47 +0,0 @@
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h } from "@stencil/core";
-import { useWidgetVerification } from "./useWidgetVerification";
-/**
- * @uiName Widget Verification Gate
- * @slots [{ "name": "verified", "title": "Verified Content" }]
- */
-export class WidgetVerification {
-  constructor() {
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = useWidgetVerification();
-    if (props.verified)
-      return (h("slot", { name: "verified" },
-        h("h1", null, "VERIFIED")));
-    const Email = () => {
-      return (h("div", null,
-        h("input", { type: "email", value: props.email, onChange: (e) => props.setEmail(e.target.value) }),
-        h("button", { onClick: props.onSubmitEmail }, "Verify")));
-    };
-    const Code = () => {
-      return (h("div", { ref: props.setCodeRef },
-        h("input", { name: "code" }),
-        h("input", { name: "code" }),
-        h("input", { name: "code" }),
-        h("input", { name: "code" }),
-        h("input", { name: "code" }),
-        h("hr", null),
-        h("button", { onClick: props.onCheckCode }, "Check code")));
-    };
-    const verificationStep = () => {
-      switch (props.step) {
-        case "email":
-          return h(Email, null);
-        case "code":
-          return h(Code, null);
-      }
-    };
-    return (h("div", null,
-      h("h3", null, "Cash Payouts"),
-      verificationStep()));
-  }
-  static get is() { return "sqm-widget-verification"; }
-  static get encapsulation() { return "shadow"; }
-}

package/dist/collection/components/sqm-cash-payouts/sqm-widget-verification/useWidgetVerification.js

@@ -1,53 +0,0 @@
-import { useEffect, useState } from "@saasquatch/universal-hooks";
-export function useWidgetVerification() {
-  const [step, setStep] = useState("email");
-  const [email, setEmail] = useState(null);
-  const [codeRef, setCodeRef] = useState(null);
-  // const [code, setCode] = useState<string[]>(["-", "-", "-", "-", "-"]);
-  const [verified, setVerified] = useState(false);
-  const onSubmitEmail = () => {
-    setStep("code");
-    setVerified(false);
-  };
-  useEffect(() => {
-    if (!codeRef)
-      return;
-    const codeElements = Array.from(codeRef.querySelectorAll(`input[name="code"]`));
-    console.log({ codeElements });
-    codeElements.forEach((element, idx) => {
-      element.addEventListener("keydown", (e) => {
-        if (e.key === "Backspace" && e.target.value === "") {
-          codeElements[Math.max(0, idx - 1)].focus();
-        }
-      });
-      element.addEventListener("input", (e) => {
-        const input = e.target.value;
-        if (!input)
-          return;
-        if (idx === codeElements.length - 1) {
-          e.target.value = input.slice(-1);
-          return;
-        }
-        if (input.length > 1) {
-          const rest = input.slice(1);
-          e.target.value = input.slice(0, 1);
-          codeElements[idx + 1].value = rest;
-          codeElements[idx + 1].dispatchEvent(new Event("input"));
-        }
-        codeElements[idx + 1].focus();
-      });
-    });
-  }, [codeRef]);
-  const onCheckCode = () => {
-    setVerified(true);
-  };
-  return {
-    step,
-    email,
-    setEmail,
-    setCodeRef,
-    onCheckCode,
-    onSubmitEmail,
-    verified,
-  };
-}

package/dist/esm/sqm-cash-payouts.entry.js

@@ -1,15 +0,0 @@
-import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { n as h } from './stencil-hooks.module-ac12ca1c.js';
-
-const CashPayouts = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    h(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    return h$1("div", null);
-  }
-};
-
-export { CashPayouts as sqm_cash_payouts };

package/dist/esm/sqm-widget-verification.entry.js

@@ -1,85 +0,0 @@
-import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { k as useState, f as useEffect, n as h } from './stencil-hooks.module-ac12ca1c.js';
-
-function useWidgetVerification() {
-  const [step, setStep] = useState("email");
-  const [email, setEmail] = useState(null);
-  const [codeRef, setCodeRef] = useState(null);
-  // const [code, setCode] = useState<string[]>(["-", "-", "-", "-", "-"]);
-  const [verified, setVerified] = useState(false);
-  const onSubmitEmail = () => {
-    setStep("code");
-    setVerified(false);
-  };
-  useEffect(() => {
-    if (!codeRef)
-      return;
-    const codeElements = Array.from(codeRef.querySelectorAll(`input[name="code"]`));
-    console.log({ codeElements });
-    codeElements.forEach((element, idx) => {
-      element.addEventListener("keydown", (e) => {
-        if (e.key === "Backspace" && e.target.value === "") {
-          codeElements[Math.max(0, idx - 1)].focus();
-        }
-      });
-      element.addEventListener("input", (e) => {
-        const input = e.target.value;
-        if (!input)
-          return;
-        if (idx === codeElements.length - 1) {
-          e.target.value = input.slice(-1);
-          return;
-        }
-        if (input.length > 1) {
-          const rest = input.slice(1);
-          e.target.value = input.slice(0, 1);
-          codeElements[idx + 1].value = rest;
-          codeElements[idx + 1].dispatchEvent(new Event("input"));
-        }
-        codeElements[idx + 1].focus();
-      });
-    });
-  }, [codeRef]);
-  const onCheckCode = () => {
-    setVerified(true);
-  };
-  return {
-    step,
-    email,
-    setEmail,
-    setCodeRef,
-    onCheckCode,
-    onSubmitEmail,
-    verified,
-  };
-}
-
-const WidgetVerification = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    h(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = useWidgetVerification();
-    if (props.verified)
-      return (h$1("slot", { name: "verified" }, h$1("h1", null, "VERIFIED")));
-    const Email = () => {
-      return (h$1("div", null, h$1("input", { type: "email", value: props.email, onChange: (e) => props.setEmail(e.target.value) }), h$1("button", { onClick: props.onSubmitEmail }, "Verify")));
-    };
-    const Code = () => {
-      return (h$1("div", { ref: props.setCodeRef }, h$1("input", { name: "code" }), h$1("input", { name: "code" }), h$1("input", { name: "code" }), h$1("input", { name: "code" }), h$1("input", { name: "code" }), h$1("hr", null), h$1("button", { onClick: props.onCheckCode }, "Check code")));
-    };
-    const verificationStep = () => {
-      switch (props.step) {
-        case "email":
-          return h$1(Email, null);
-        case "code":
-          return h$1(Code, null);
-      }
-    };
-    return (h$1("div", null, h$1("h3", null, "Cash Payouts"), verificationStep()));
-  }
-};
-
-export { WidgetVerification as sqm_widget_verification };