@saasquatch/mint-components 1.5.0-85 → 1.5.0-89

package/dist/cjs/sqm-tabs.cjs.entry.js

@@ -5,28 +5,29 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./use-callback-e754042f.js');
-require('./index.module-54724339.js');
+const index_module = require('./index.module-f972f103.js');
 require('./extends-08099afd.js');
-const JSS = require('./JSS-c65a40f1.js');
-const useChildElements = require('./useChildElements-a68699b4.js');
+const useChildElements = require('./useChildElements-3ce892db.js');
+const utils = require('./utils-01dbfd4a.js');
 
-const style = {};
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
-sl-tab-panel::part(base) {
-	padding: var(--sl-spacing-x-large) 0;
-}
-`;
-const TabsView = ({ content }) => {
+const TabsView = ({ content, placement, }) => {
+  // Vertical padding for top & bottom placement, horizontal for left & right.
+  const padding = !placement || placement === "bottom"
+    ? "var(--sl-spacing-x-large) 0;"
+    : "0 var(--sl-spacing-xx-large);";
+  const vanillaStyle = `
+    sl-tab-panel::part(base) {
+      padding: ${padding};
+    }
+  `;
+  const host = stencilHooks_module.l();
+  console.log("sam host", host);
   return (index.h(index.Host, null,
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    index.h("sl-tab-group", null, content.tabs.map((tab) => {
+    index.h("style", { type: "text/css" }, vanillaStyle),
+    index.h("sl-tab-group", { placement: placement }, content.tabs.map((tab) => {
       const slotName = tab.getAttribute("slot");
       return [
-        index.h("sl-tab", { slot: "nav", panel: slotName }, tab.getAttribute("header")),
+        index.h("sl-tab", { slot: "nav", panel: slotName, id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
         index.h("sl-tab-panel", { name: slotName },
           index.h("slot", { name: slotName })),
       ];
@@ -35,14 +36,40 @@ const TabsView = ({ content }) => {
       index.h("slot", null))));
 };
 
+const REVEAL_EVENT = "sq:reveal";
 function useTabs() {
   const rawTabs = useChildElements.useChildElements();
+  const host = index_module.P();
   const tabs = stencilHooks_module.useMemo(() => rawTabs
     .filter((tab) => tab.tagName === "SQM-TAB")
     .map((tab, i) => {
     tab.setAttribute("slot", "tab-" + i);
+    // set id as targets for scroll component
+    tab.setAttribute("id", "tab-" + i);
     return tab;
   }), [rawTabs]);
+  stencilHooks_module.useEffect(() => {
+    const listener = (e) => {
+      var _a, _b, _c, _d, _e, _f;
+      // Prevents recursively nested components from sending requests up all the way
+      e.stopPropagation();
+      //@ts-ignore
+      if (!host.contains(e === null || e === void 0 ? void 0 : e.target) || !((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.shadowRoot))
+        return;
+      const element = (_e = (_d = (_c = 
+      //@ts-ignore
+      e === null || 
+      //@ts-ignore
+      e === void 0 ? void 0 : 
+      //@ts-ignore
+      e.target) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector(`#${e.target.id}`);
+      (_f = element.parentElement) === null || _f === void 0 ? void 0 : _f.show(element === null || element === void 0 ? void 0 : element.panel);
+    };
+    host.addEventListener(REVEAL_EVENT, listener);
+    return () => {
+      host.removeEventListener(REVEAL_EVENT, listener);
+    };
+  }, []);
   return { content: { tabs } };
 }
 
@@ -54,7 +81,8 @@ const Tabs = class {
   disconnectedCallback() { }
   render() {
     const { content } = useTabs();
-    return (index.h(TabsView, { content: content }, index.h("slot", null)));
+    const { placement } = utils.getProps(this);
+    return (index.h(TabsView, { placement: placement, content: content }, index.h("slot", null)));
   }
 };
 

package/dist/cjs/{useChildElements-a68699b4.js → useChildElements-3ce892db.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-54724339.js');
+const index_module = require('./index.module-f972f103.js');
 
 function useChildElements() {
   const host = index_module.P();

package/dist/cjs/{useDemoBigStat-426e3319.js → useDemoBigStat-99093687.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-54724339.js');
+const index_module = require('./index.module-f972f103.js');
 const cjs = require('./cjs-1066ec21.js');
 
 /**
@@ -301,7 +301,7 @@ function pathToRegexp(path, keys, options) {
 const debug = stencilHooks_module.browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = index_module.mn(query, variables);
+  const res = index_module.sn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -863,8 +863,8 @@ const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
   const { statType, flexReverse, alignment, programId = index_module.M(), } = props;
-  const locale = index_module.R();
-  const userIdent = index_module.ne();
+  const locale = index_module.An();
+  const userIdent = index_module.ie();
   const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {

package/dist/cjs/{useReferralTable-45f295ba.js → useReferralTable-464dd3a0.js}

@@ -2,9 +2,9 @@
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-54724339.js');
-const reRender = require('./re-render-2f8d0f37.js');
-const useChildElements = require('./useChildElements-a68699b4.js');
+const index_module = require('./index.module-f972f103.js');
+const reRender = require('./re-render-1ef744c7.js');
+const useChildElements = require('./useChildElements-3ce892db.js');
 
 const CSS_NAMESPACE = "sqm-referral-table";
 const GET_REFERRER_DATA = index_module.dist.gql `
@@ -16,8 +16,14 @@ const GET_REFERRER_DATA = index_module.dist.gql `
     viewer {
       ... on User {
         referredByReferral(programId: $programId) {
-          dateReferralStarted
           dateConverted
+          dateFraudChecksCompleted
+          dateModerated
+          dateModified
+          dateReferralEnded
+          dateReferralPaid
+          dateReferralStarted
+          dateUserModified
           referrerUser {
             firstName
             lastName
@@ -171,7 +177,7 @@ const GET_REFERRAL_DATA = index_module.dist.gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b, _c;
-  const user = index_module.ne();
+  const user = index_module.ie();
   const programIdContext = index_module.M();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
@@ -194,15 +200,15 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const locale = index_module.R();
-  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.mn(GET_REFERRER_DATA, {
+  const locale = index_module.An();
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.sn(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,
     locale,
   }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
   const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
   const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
-  const { envelope: referralData, states, callbacks, } = index_module.wn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+  const { envelope: referralData, states, callbacks, } = index_module.mn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
     limit: props.perPage,
     offset: 0,
   }, {
@@ -232,24 +238,22 @@ function useReferralTable(props, emptyElement, loadingElement) {
     const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
     // get the column titles (renderLabel is asynchronous)
     const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderLabel()));
-    // show the referrer row before any other rows (renderReferrerCell is asynchronous)
+    // show the referrer row before any other rows
     let referrerRow;
     if (showReferrerRow && states.currentPage === 0) {
-      const referrerPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, function renderReferrerCell() {
-        return c.renderReferrerCell(referrerData, c);
-      }));
+      const referrerPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderReferrerCell(referrerData, locale)));
       referrerRow = await Promise.all(referrerPromise);
     }
     // get the column cells (renderCell is asynchronous)
     const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
       const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, locale)));
-      const cells = await Promise.all(cellPromise);
+      const cells = (await Promise.all(cellPromise));
       return cells;
     });
     const rows = cellsPromise &&
       [referrerRow, ...(await Promise.all(cellsPromise))].filter((value) => value);
     setContent({ rows });
-    const columns = columnsPromise && await Promise.all(columnsPromise);
+    const columns = columnsPromise && (await Promise.all(columnsPromise));
     // Set the content to render and finish loading components
     setContent({ columns, loading: false, page: states.currentPage });
   }
@@ -329,6 +333,7 @@ async function tryMethod(c, callback) {
     else {
       console.error("label promise failed", e);
     }
+    console.error("label promise failed", e);
     return index.h("span", null);
   }
   try {
@@ -346,4 +351,5 @@ async function tryMethod(c, callback) {
 }
 
 exports.generateUserError = generateUserError;
+exports.tryMethod = tryMethod;
 exports.useReferralTable = useReferralTable;

package/dist/collection/components/sqm-empty/sqm-empty-view.js

@@ -12,7 +12,7 @@ export function EmptyStateView(props) {
   if (table) {
     return (h("div", { style: { display: "contents" } },
       h("sqm-table-row", null,
-        h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } }, emptyBase()))));
+        h("sqm-table-cell", { colspan: 1000, style: { textAlign: "center" } }, emptyBase()))));
   }
   return h("div", null, emptyBase());
 }

package/dist/collection/components/sqm-referral-table/ReferralTable.stories.js

@@ -85,7 +85,7 @@ const availableReward = {
 const nullExpiresIn = {
   dateExpires: null,
 };
-export const simpleUserTableProps = {
+const simpleUserTableProps = {
   states: {
     hasPrev: false,
     hasNext: true,

package/dist/collection/components/sqm-referral-table/UseReferralTable.stories.js

@@ -63,6 +63,36 @@ export const ReferralTable = createHookStory(() => {
     h("sqm-referral-table-date-column", null),
     h("sqm-referral-table-rewards-column", null)));
 });
+export const ReferralTableDemoHook = createHookStory(() => {
+  // setupGraphQL();
+  // setProgramId("sam-partner-test-2");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-referral-table", null,
+    h("sqm-referral-table-user-column", null),
+    h("sqm-referral-table-status-column", null),
+    h("sqm-referral-table-date-column", null),
+    h("sqm-referral-table-rewards-column", null)));
+});
+export const ReferralTableDemoHookShowReferrer = createHookStory(() => {
+  // setupGraphQL();
+  // setProgramId("sam-partner-test-2");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-referral-table", { "show-referrer": "true" },
+    h("sqm-referral-table-user-column", null),
+    h("sqm-referral-table-status-column", null),
+    h("sqm-referral-table-date-column", null),
+    h("sqm-referral-table-rewards-column", null)));
+});
 export const ReferralTableEn = createHookStory(() => {
   setupGraphQLKlip({
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-date-column.js

@@ -34,6 +34,10 @@ export class ReferralTableDateColumn {
   async renderLabel() {
     return this.columnTitle;
   }
+  async renderReferrerCell(data) {
+    // TODO - Validate `dateShown` against a set of known values
+    return (h("sqm-referral-table-date-cell", { date: data[this.dateShown] }));
+  }
   render() {
     useRequestRerender([this.dateShown, this.columnTitle]);
     return h(Host, { style: { display: "none" } });
@@ -136,6 +140,28 @@ export class ReferralTableDateColumn {
         "text": "",
         "tags": []
       }
+    },
+    "renderReferrerCell": {
+      "complexType": {
+        "signature": "(data: Referrer) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Referrer": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
 }

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-rewards-column.js

@@ -48,6 +48,10 @@ export class ReferralTableRewardsColumn {
   async renderLabel() {
     return this.columnTitle;
   }
+  async renderReferrerCell(data) {
+    // TODO: Do the right thing with many rewards, pending rewards, canceled rewards
+    return (h("sqm-referral-table-rewards-cell", { rewards: data.rewards }));
+  }
   render() {
     useRequestRerender([this.columnTitle]);
     return h(Host, { style: { display: "none" } });
@@ -265,6 +269,28 @@ export class ReferralTableRewardsColumn {
         "text": "",
         "tags": []
       }
+    },
+    "renderReferrerCell": {
+      "complexType": {
+        "signature": "(data: Referrer) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Referrer": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
 }

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-status-column.js

@@ -31,6 +31,13 @@ export class ReferralTableStatusColumn {
   async renderLabel() {
     return this.columnTitle;
   }
+  async renderReferrerCell(data) {
+    // TODO: Make ICU and more complete
+    const statusText = data.dateConverted
+      ? this.convertedStatusText
+      : this.inProgressStatusText;
+    return (h("sqm-referral-table-status-cell", { "status-text": statusText, converted: data.dateConverted ? true : false }));
+  }
   render() {
     useRequestRerender([this.columnTitle]);
     return h(Host, { style: { display: "none" } });
@@ -140,6 +147,28 @@ export class ReferralTableStatusColumn {
         "text": "",
         "tags": []
       }
+    },
+    "renderReferrerCell": {
+      "complexType": {
+        "signature": "(data: Referrer) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Referrer": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
 }

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-user-column.js

@@ -22,23 +22,42 @@ export class ReferralTableUserColumn {
   }
   disconnectedCallback() { }
   async renderCell(data) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     let name;
-    if (!(data === null || data === void 0 ? void 0 : data.referredUser)) {
+    if (!(data === null || data === void 0 ? void 0 : data.referredUser) && !(data === null || data === void 0 ? void 0 : data.referrerUser)) {
       name = this.deletedUser;
     }
     else if (!((_a = data === null || data === void 0 ? void 0 : data.referredUser) === null || _a === void 0 ? void 0 : _a.firstName) &&
-      !((_b = data === null || data === void 0 ? void 0 : data.referredUser) === null || _b === void 0 ? void 0 : _b.lastName)) {
+      !((_b = data === null || data === void 0 ? void 0 : data.referredUser) === null || _b === void 0 ? void 0 : _b.lastName) &&
+      !((_c = data === null || data === void 0 ? void 0 : data.referrerUser) === null || _c === void 0 ? void 0 : _c.firstName) &&
+      !((_d = data === null || data === void 0 ? void 0 : data.referrerUser) === null || _d === void 0 ? void 0 : _d.lastName)) {
       name = this.anonymousUser;
     }
+    else if (data === null || data === void 0 ? void 0 : data.referrerUser) {
+      name = `${(_e = data === null || data === void 0 ? void 0 : data.referrerUser) === null || _e === void 0 ? void 0 : _e.firstName} ${(_f = data === null || data === void 0 ? void 0 : data.referrerUser) === null || _f === void 0 ? void 0 : _f.lastName}`;
+    }
     else {
-      name = `${(_c = data === null || data === void 0 ? void 0 : data.referredUser) === null || _c === void 0 ? void 0 : _c.firstName} ${(_d = data === null || data === void 0 ? void 0 : data.referredUser) === null || _d === void 0 ? void 0 : _d.lastName}`;
+      name = `${(_g = data === null || data === void 0 ? void 0 : data.referredUser) === null || _g === void 0 ? void 0 : _g.firstName} ${(_h = data === null || data === void 0 ? void 0 : data.referredUser) === null || _h === void 0 ? void 0 : _h.lastName}`;
     }
     return (h("sqm-referral-table-user-cell", { name: name }));
   }
   async renderLabel() {
     return this.columnTitle;
   }
+  async renderReferrerCell(data) {
+    var _a, _b, _c, _d;
+    let name;
+    if (!data) {
+      name = this.deletedUser;
+    }
+    else if (!((_a = data === null || data === void 0 ? void 0 : data.referrerUser) === null || _a === void 0 ? void 0 : _a.firstName) && !((_b = data.referrerUser) === null || _b === void 0 ? void 0 : _b.lastName)) {
+      name = this.anonymousUser;
+    }
+    else {
+      name = `${(_c = data === null || data === void 0 ? void 0 : data.referrerUser) === null || _c === void 0 ? void 0 : _c.firstName} ${(_d = data === null || data === void 0 ? void 0 : data.referrerUser) === null || _d === void 0 ? void 0 : _d.lastName}`;
+    }
+    return (h("sqm-referral-table-user-cell", { name: name }));
+  }
   render() {
     useRequestRerender([
       this.deletedUser,
@@ -152,6 +171,28 @@ export class ReferralTableUserColumn {
         "text": "",
         "tags": []
       }
+    },
+    "renderReferrerCell": {
+      "complexType": {
+        "signature": "(data: Referrer) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Referrer": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
 }