@saasquatch/mint-components 1.5.6-8 → 1.6.0-2

package/dist/collection/components/sqm-task-card/useTaskCard.js

@@ -1,43 +1,43 @@
-import { useMutation, useUserIdentity, useRefreshDispatcher, useLocale, } from "@saasquatch/component-boilerplate";
-import { useEffect } from "@saasquatch/stencil-hooks";
-import { gql } from "graphql-request";
-const SEND_EVENT = gql `
-  mutation taskCardEvent($userEventInput: UserEventInput!) {
-    logUserEvent(userEventInput: $userEventInput) {
-      userId
-    }
-  }
-`;
-export function useTaskCard(props) {
-  const user = useUserIdentity();
-  const locale = useLocale();
-  const [sendUserEvent, { data, loading: loadingEvent }] = useMutation(SEND_EVENT);
-  const { refresh } = useRefreshDispatcher();
-  useEffect(() => {
-    if (data) {
-      refresh();
-      openLink();
-    }
-  }, [data]);
-  function openLink() {
-    props.openNewTab
-      ? window.open(props.buttonLink)
-      : window.open(props.buttonLink, "_parent");
-  }
-  function sendEvent(eventKey) {
-    sendUserEvent({
-      userEventInput: {
-        userId: user === null || user === void 0 ? void 0 : user.id,
-        accountId: user === null || user === void 0 ? void 0 : user.accountId,
-        events: [{ key: eventKey, fields: {} }],
-      },
-    });
-  }
-  function onClick() {
-    props.eventKey ? sendEvent(props.eventKey) : openLink();
-  }
-  return {
-    states: { loadingEvent, locale },
-    callbacks: { sendEvent, onClick },
-  };
-}
+import { useMutation, useUserIdentity, useRefreshDispatcher, useLocale, } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/stencil-hooks";
+import { gql } from "graphql-request";
+const SEND_EVENT = gql `
+  mutation taskCardEvent($userEventInput: UserEventInput!) {
+    logUserEvent(userEventInput: $userEventInput) {
+      userId
+    }
+  }
+`;
+export function useTaskCard(props) {
+  const user = useUserIdentity();
+  const locale = useLocale();
+  const [sendUserEvent, { data, loading: loadingEvent }] = useMutation(SEND_EVENT);
+  const { refresh } = useRefreshDispatcher();
+  useEffect(() => {
+    if (data) {
+      refresh();
+      openLink();
+    }
+  }, [data]);
+  function openLink() {
+    props.openNewTab
+      ? window.open(props.buttonLink)
+      : window.open(props.buttonLink, "_parent");
+  }
+  function sendEvent(eventKey) {
+    sendUserEvent({
+      userEventInput: {
+        userId: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        events: [{ key: eventKey, fields: {} }],
+      },
+    });
+  }
+  function onClick() {
+    props.eventKey ? sendEvent(props.eventKey) : openLink();
+  }
+  return {
+    states: { loadingEvent, locale },
+    callbacks: { sendEvent, onClick },
+  };
+}

package/dist/collection/components/sqm-text/sqm-text.js

@@ -1,77 +1,69 @@
-import { Component, h, State } from "@stencil/core";
-import { withHooks } from "@saasquatch/stencil-hooks";
-const vanillaStyle = `
-  sqm-text {
-    display: block;
-  }
-
-  sqm-text h1 {
-    font-size: var(--sl-font-size-xxx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h2 {
-    font-size: var(--sl-font-size-xx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h3 {
-    font-size: var(--sl-font-size-x-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h4 {
-    font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text p {
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text sub {
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-400);
-    margin: 0;
-  }
-`;
-/**
- * @uiName Text
- * @slots [{"name":"", "title":"Text"}]
- * @slotEditor richText
- * @exampleGroup Typography
- * @example H1 - <sqm-text><h1>H1 Header Text</h1></sqm-text>
- * @example H2 - <sqm-text><h2>H2 Header Text</h2></sqm-text>
- * @example H3 - <sqm-text><h3>H3 Header Text</h3></sqm-text>
- * @example H4 - <sqm-text><h4>H4 Header Text</h4></sqm-text>
- * @example Paragraph - <sqm-text><p>Paragraph Text</p></sqm-text>
- */
-export class Text {
-  constructor() {
-    this.ignored = true;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  render() {
-    return (h("div", null,
-      h("style", null, vanillaStyle),
-      h("slot", null)));
-  }
-  static get is() { return "sqm-text"; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
+import { Component, h, State } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+const vanillaStyle = `
+  sqm-text {
+    display: block;
+  }
+
+  sqm-text h1 {
+    font-size: var(--sl-font-size-xxx-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h2 {
+    font-size: var(--sl-font-size-xx-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h3 {
+    font-size: var(--sl-font-size-x-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h4 {
+    font-size: var(--sl-font-size-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text p {
+    font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text sub {
+    font-size: var(--sl-font-size-small);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-400);
+    margin: 0;
+  }
+`;
+/**
+ * @uiName Text
+ */
+export class Text {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  render() {
+    return (h("div", null,
+      h("style", null, vanillaStyle),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-text"; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-text-span/sqm-text-span-view.js

@@ -1,54 +1,54 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  p: {
-    "font-size": "var(--sl-font-size-small)",
-    "font-weight": "400",
-    color: "var(--sl-color-gray-800)",
-    margin: "0",
-  },
-  subtext: {
-    "font-size": "var(--sl-font-size-x-small)",
-    "font-weight": "400",
-    color: "var(--sl-color-gray-600)",
-    margin: "0",
-  },
-  h1: {
-    "font-size": "var(--sl-font-size-xx-large)",
-    "font-weight": "600",
-    color: "var(--sl-color-gray-800)",
-    margin: "0",
-  },
-  h2: {
-    "font-size": "var(--sl-font-size-x-large)",
-    "font-weight": "600",
-    color: "var(--sl-color-gray-800)",
-    margin: "0",
-  },
-  h3: {
-    "font-size": "var(--sl-font-size-large)",
-    "font-weight": "600",
-    color: "var(--sl-color-gray-800)",
-    margin: "0",
-  },
-  h4: {
-    "font-size": "13px",
-    "font-weight": "600",
-    color: "var(--sl-color-gray-800)",
-    margin: "0",
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
-    sqm-text-span {
-      display: inline;
-    }
-  `;
-export function TextSpanView(props, children) {
-  return (h("span", { class: sheet.classes[props.type] },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    children));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  p: {
+    "font-size": "var(--sl-font-size-small)",
+    "font-weight": "400",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+  subtext: {
+    "font-size": "var(--sl-font-size-x-small)",
+    "font-weight": "400",
+    color: "var(--sl-color-gray-600)",
+    margin: "0",
+  },
+  h1: {
+    "font-size": "var(--sl-font-size-xx-large)",
+    "font-weight": "600",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+  h2: {
+    "font-size": "var(--sl-font-size-x-large)",
+    "font-weight": "600",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+  h3: {
+    "font-size": "var(--sl-font-size-large)",
+    "font-weight": "600",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+  h4: {
+    "font-size": "13px",
+    "font-weight": "600",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
+    sqm-text-span {
+      display: inline;
+    }
+  `;
+export function TextSpanView(props, children) {
+  return (h("span", { class: sheet.classes[props.type] },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    children));
+}

package/dist/collection/components/sqm-text-span/sqm-text-span.js

@@ -1,72 +1,72 @@
-import { Component, h, Prop, State } from "@stencil/core";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { TextSpanView } from "./sqm-text-span-view";
-/**
- * @uiName Text Span
- */
-export class Text {
-  constructor() {
-    this.ignored = true;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  render() {
-    return h(TextSpanView, { type: this.type }, this.text);
-  }
-  static get is() { return "sqm-text-span"; }
-  static get properties() { return {
-    "text": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "text",
-      "reflect": false
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"p\" | \"subtext\" | \"h1\" | \"h2\" | \"h3\" | \"h4\"",
-        "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"subtext\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Type",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"p\", \"subtext\", \"h1\", \"h2\", \"h3\", \"h4\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Paragraph\", \"Subtext\", \"Header 1\", \"Header 2\", \"Header 3\", \"Header 4\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
+import { Component, h, Prop, State } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { TextSpanView } from "./sqm-text-span-view";
+/**
+ * @uiName Text Span
+ */
+export class Text {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  render() {
+    return h(TextSpanView, { type: this.type }, this.text);
+  }
+  static get is() { return "sqm-text-span"; }
+  static get properties() { return {
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"p\" | \"subtext\" | \"h1\" | \"h2\" | \"h3\" | \"h4\"",
+        "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"subtext\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Text",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"p\", \"subtext\", \"h1\", \"h2\", \"h3\", \"h4\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Paragraph\", \"Subtext\", \"Header 1\", \"Header 2\", \"Header 3\", \"Header 4\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-timeline/SVGs.js

@@ -1,10 +1,10 @@
-import { h } from "@stencil/core";
-export const Gift = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { d: "M22.5 7.5H18.6761H13.5V24H20.75C21.3023 24 21.75 23.5523 21.75 23V22.5V13.5H22.5H23C23.5523 13.5 24 13.0523 24 12.5V12V9V8.5C24 7.94772 23.5523 7.5 23 7.5H22.5Z", fill: "#F2C94C" }),
-  h("path", { d: "M2.25 22.5V23C2.25 23.5523 2.69772 24 3.25 24H10.5V7.5H6.96363H1.5H1C0.447715 7.5 0 7.94772 0 8.5V9V12V12.5C0 13.0523 0.447715 13.5 1 13.5H1.5H2.25V22.5Z", fill: "#F2C94C" }),
-  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.25 13.5V15H21.75V13.5H2.25Z", fill: "#BE9720" }),
-  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21 4.06424C21 5.39348 19.0041 7.4062 18 7.5H13.5V24H10.5027V7.5H6.88188C4.8187 7.05273 3 5.46806 3 3.78109C3 2.1371 3.71404 0.835051 5.01276 0.273062C6.25382 -0.26398 7.68678 0.0304991 8.81964 0.817C10.2101 1.78237 10.9902 3.59446 11.6978 5.2384C11.7599 5.38268 11.8215 5.52566 11.8828 5.66667C11.9426 5.53298 12.0028 5.3969 12.0638 5.25912C12.7649 3.67422 13.5654 1.86488 14.9106 0.893444C16.0997 0.0347157 17.6114 -0.289736 18.9181 0.298417C20.2693 0.906596 21 2.3018 21 4.06424ZM15.9185 2.25C16.6392 1.72957 17.502 1.63518 18.2396 2.25C18.8819 2.78542 18.9162 3.03745 18.9987 3.64389L19.0133 3.75C19.0133 4.64776 18.2396 6 17.4659 6C16.9177 6 16.4871 5.99537 16.0836 5.99103C15.3479 5.98312 14.702 5.97618 13.5974 6C13.808 5.59179 13.9761 5.20003 14.1365 4.82641C14.5654 3.82715 14.9386 2.95763 15.9185 2.25ZM7.40792 2.25C7.05911 2.00783 6.25921 2.11591 5.92748 2.25945C5.65341 2.37805 5.24403 2.73987 5.24403 3.78109C5.24403 4.79286 6.88188 5.66667 6.88188 5.66667C6.88188 5.66667 8.18161 6 10.5027 6C9.71258 4.04177 8.59336 3.073 7.40792 2.25Z", fill: "#EB5757" })));
-export const Circle = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
-export const Line = () => (h("svg", { width: "4", height: "90", viewBox: "0 0 4 90", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("line", { x1: "2", y1: "82", x2: "2", y2: "2", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" })));
+import { h } from "@stencil/core";
+export const Gift = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "M22.5 7.5H18.6761H13.5V24H20.75C21.3023 24 21.75 23.5523 21.75 23V22.5V13.5H22.5H23C23.5523 13.5 24 13.0523 24 12.5V12V9V8.5C24 7.94772 23.5523 7.5 23 7.5H22.5Z", fill: "#F2C94C" }),
+  h("path", { d: "M2.25 22.5V23C2.25 23.5523 2.69772 24 3.25 24H10.5V7.5H6.96363H1.5H1C0.447715 7.5 0 7.94772 0 8.5V9V12V12.5C0 13.0523 0.447715 13.5 1 13.5H1.5H2.25V22.5Z", fill: "#F2C94C" }),
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.25 13.5V15H21.75V13.5H2.25Z", fill: "#BE9720" }),
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21 4.06424C21 5.39348 19.0041 7.4062 18 7.5H13.5V24H10.5027V7.5H6.88188C4.8187 7.05273 3 5.46806 3 3.78109C3 2.1371 3.71404 0.835051 5.01276 0.273062C6.25382 -0.26398 7.68678 0.0304991 8.81964 0.817C10.2101 1.78237 10.9902 3.59446 11.6978 5.2384C11.7599 5.38268 11.8215 5.52566 11.8828 5.66667C11.9426 5.53298 12.0028 5.3969 12.0638 5.25912C12.7649 3.67422 13.5654 1.86488 14.9106 0.893444C16.0997 0.0347157 17.6114 -0.289736 18.9181 0.298417C20.2693 0.906596 21 2.3018 21 4.06424ZM15.9185 2.25C16.6392 1.72957 17.502 1.63518 18.2396 2.25C18.8819 2.78542 18.9162 3.03745 18.9987 3.64389L19.0133 3.75C19.0133 4.64776 18.2396 6 17.4659 6C16.9177 6 16.4871 5.99537 16.0836 5.99103C15.3479 5.98312 14.702 5.97618 13.5974 6C13.808 5.59179 13.9761 5.20003 14.1365 4.82641C14.5654 3.82715 14.9386 2.95763 15.9185 2.25ZM7.40792 2.25C7.05911 2.00783 6.25921 2.11591 5.92748 2.25945C5.65341 2.37805 5.24403 2.73987 5.24403 3.78109C5.24403 4.79286 6.88188 5.66667 6.88188 5.66667C6.88188 5.66667 8.18161 6 10.5027 6C9.71258 4.04177 8.59336 3.073 7.40792 2.25Z", fill: "#EB5757" })));
+export const Circle = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
+export const Line = () => (h("svg", { width: "4", height: "90", viewBox: "0 0 4 90", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("line", { x1: "2", y1: "82", x2: "2", y2: "2", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" })));