@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+
+const TabView = ({}, children) => {
+  return index.h(index.Host, null, children);
+};
+
+const Tab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(TabView, null, index.h("slot", null)));
+  }
+};
+
+exports.sqm_tab = Tab;

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

@@ -0,0 +1,89 @@
+'use strict';
+
+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');
+const index_module = require('./index.module-54724339.js');
+require('./extends-08099afd.js');
+const useChildElements = require('./useChildElements-a68699b4.js');
+const utils = require('./utils-01dbfd4a.js');
+
+const TabsView = ({ content, placement, }) => {
+  // Vertical padding for top & bottom placement, horizontal for left & right.
+  const padding = !placement || placement === "top" || 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),
+    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, id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
+        index.h("sl-tab-panel", { name: slotName },
+          index.h("slot", { name: slotName })),
+      ];
+    })),
+    index.h("div", { style: { display: "none" } },
+      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 } };
+}
+
+const Tabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { content } = useTabs();
+    const { placement } = utils.getProps(this);
+    return (index.h(TabsView, { placement: placement, content: content }, index.h("slot", null)));
+  }
+};
+
+exports.sqm_tabs = Tabs;

package/dist/cjs/{sqm-text-span-view-b5ae787b.js → sqm-text-span-view-f101dedf.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-c65a40f1.js');
 
 function TextSpanView(props, children) {
   const style = {
@@ -42,8 +42,7 @@ function TextSpanView(props, children) {
       margin: "0",
     },
   };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
   const vanillaStyle = `
     sqm-text-span {

package/dist/cjs/sqm-text-span.cjs.entry.js

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const _extends = require('./extends-0302d27d.js');
-require('./jss-preset-default.esm-6304d24f.js');
-const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+require('./extends-08099afd.js');
+require('./JSS-c65a40f1.js');
+const sqmTextSpanView = require('./sqm-text-span-view-f101dedf.js');
 
 const Text = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    _extends.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   componentWillLoad() { }

package/dist/cjs/{extends-0302d27d.js → stencil-hooks.module-87a1f4f7.js}

@@ -1113,25 +1113,6 @@ function c$1(){return (c$1=Object.assign||function(e){for(var t=1;t<arguments.le
 
 function s$2(){return index.getRenderingRef()}function l$1(){var e=s$2();return index.getElement(e)}function d$2(e,t){void 0===t&&(t={});var n=l$1();return h$1(n,e,t)}function m$2(e,t){var n=l$1();return y$1(n,e,t)}var p$1=browser("stencil-hook");function h$2(t){var r,u=index.getElement(t),c=(r=!1,new State(function(){p$1("Queue update on element",u),r||(r=!0,Promise.resolve().then(function(){p$1("Forced update on element",u),r=!1,index.forceUpdate(u);}));},u)),a=t.disconnectedCallback;if(!a)throw new Error("Stencil hooks requires `disconnectedCallback` to be defined (even if it's empty). This is because of how the Stencil compiler works internally");t.disconnectedCallback=function(){c.teardown(),v(a);};var i=t.connectedCallback;t.connectedCallback=function(){c.update(),v(i);};var f=t.render.bind(t);t.render=function(){var e=c.run(f);return c.runEffects(),e};}function v(e){"function"==typeof e&&e();}
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-exports._extends = _extends;
 exports.browser = browser;
 exports.c = c;
 exports.commonjsGlobal = commonjsGlobal;

package/dist/cjs/use-callback-e754042f.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+
+const useCallback = (fn, inputs) => stencilHooks_module.useMemo(() => fn, inputs);
+
+exports.useCallback = useCallback;

package/dist/cjs/useChildElements-a68699b4.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+const index_module = require('./index.module-54724339.js');
+
+function useChildElements() {
+  const host = index_module.P();
+  const initialState = host.children.length ? Array.from(host.children) : [];
+  const [childElements, setChildElements] = stencilHooks_module.useState(initialState);
+  stencilHooks_module.useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const children = Array.from(host.children);
+      setChildElements([...children]);
+    });
+    observer.observe(host, { childList: true });
+    return () => observer.disconnect();
+  }, [host]);
+  return childElements;
+}
+
+exports.useChildElements = useChildElements;

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

@@ -1,9 +1,7 @@
 'use strict';
 
-const index = require('./index-b0129cd6.js');
-const _extends = require('./extends-0302d27d.js');
-const index_module = require('./index.module-7dd4b981.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+const index_module = require('./index.module-54724339.js');
 const cjs = require('./cjs-1066ec21.js');
 
 /**
@@ -300,50 +298,15 @@ function pathToRegexp(path, keys, options) {
     return stringToRegexp(path, keys, options);
 }
 
-function BigStatView(props, children) {
-  const { statvalue, flexReverse, alignment } = props;
-  const style = {
-    Container: {
-      display: "flex",
-      height: "inherit",
-      "justify-content": "space-between",
-      "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
-      "align-items": `${alignment === "left"
-        ? "flex-start"
-        : alignment === "right"
-          ? "flex-end"
-          : "center"}`,
-    },
-    Stat: {
-      "font-size": "var(--sl-font-size-x-large)",
-      "text-align": alignment,
-    },
-    Description: {
-      "font-size": "var(--sl-font-size-small)",
-      "font-weight": "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-gray-600)",
-      "text-transform": "uppercase",
-      "text-align": alignment,
-    },
-  };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (index.h("div", { part: "stat-wrapper", class: sheet.classes.Container },
-    index.h("style", { type: "text/css" }, styleString),
-    index.h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
-    index.h("div", { part: "stat-description", class: sheet.classes.Description }, children)));
-}
-
-const debug = _extends.browser("sq:useBigStat");
+const debug = stencilHooks_module.browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = index_module.en(query, variables);
+  const res = index_module.mn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
   const stat = getStat(res);
-  return stat;
+  return { ...stat, loading: res.loading };
 };
 const referralsCountQuery = (programId, 
 // locale
@@ -642,6 +605,7 @@ const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyRedeemedCredit
@@ -684,6 +648,7 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyAssignedCredit
@@ -726,6 +691,7 @@ const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyAvailableValue
@@ -774,6 +740,7 @@ const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValu
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyAvailableValue(formatType: $format)
@@ -895,14 +862,19 @@ const StatPaths = [
 const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment } = props;
-  const programId = index_module.M();
+  const { statType, flexReverse, alignment, programId = index_module.M(), } = props;
   const locale = index_module.R();
-  const userIdent = index_module.T();
-  const re = _extends.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
+  const userIdent = index_module.ne();
+  const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
-      props: { value: 0, statvalue: "!!!", flexReverse, alignment },
+      props: {
+        value: 0,
+        statvalue: "!!!",
+        flexReverse,
+        alignment,
+        loading: false,
+      },
       label: "BAD PROP TYPE",
     };
   }
@@ -928,6 +900,7 @@ function useBigStat(props) {
     props: {
       value: stat === null || stat === void 0 ? void 0 : stat.value,
       statvalue: (_a = stat === null || stat === void 0 ? void 0 : stat.statvalue) !== null && _a !== void 0 ? _a : LOADING,
+      loading: stat === null || stat === void 0 ? void 0 : stat.loading,
       flexReverse,
       alignment,
     },
@@ -937,12 +910,13 @@ function useBigStat(props) {
 
 function useDemoBigStat(props) {
   const { statType } = props;
-  const re = _extends.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
+  const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
       props: {
         value: 0,
         statvalue: "!!!",
+        loading: false,
         flexReverse: false,
         alignment: "center",
       },
@@ -955,6 +929,7 @@ function useDemoBigStat(props) {
   return {
     props: cjs.cjs({
       statvalue: "12345",
+      value: 0,
       flexReverse: false,
       alignment: "center",
     }, props.demoData || {}, { arrayMerge: (_, a) => a }),
@@ -962,7 +937,6 @@ function useDemoBigStat(props) {
   };
 }
 
-exports.BigStatView = BigStatView;
 exports.pathToRegexp = pathToRegexp;
 exports.useBigStat = useBigStat;
 exports.useDemoBigStat = useDemoBigStat;