@saasquatch/mint-components 1.5.0-8 → 1.5.0-80

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

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+require('./extends-08099afd.js');
+const JSS = require('./JSS-c65a40f1.js');
+const utils = require('./utils-01dbfd4a.js');
+
+const style = {
+  OpenStyle: {
+    "sl-button::part(base)": {
+      background: "orange",
+    },
+  },
+};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const TabView = ({ open }, children) => {
+  console.log("OPEN IS ", open);
+  return (index.h(index.Host, null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { style: { display: open ? "block" : "none" } }, children)));
+};
+
+function useTab() {
+  const [open, setOpen] = stencilHooks_module.useState(false);
+  stencilHooks_module.useEffect(() => {
+    return setOpen(!open);
+  }, []);
+  return {
+    state: {
+      open,
+    },
+    callbacks: {
+      setOpen,
+    },
+  };
+}
+
+const Tab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { header, open } = utils.getProps(this);
+    const { callbacks, state } = useTab();
+    return (index.h(TabView, { open: open }, index.h("slot", null)));
+  }
+};
+
+exports.sqm_tab = Tab;

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

@@ -0,0 +1,54 @@
+'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');
+require('./index.module-54724339.js');
+require('./extends-08099afd.js');
+const JSS = require('./JSS-c65a40f1.js');
+const useChildElements = require('./useChildElements-a68699b4.js');
+
+const style = {};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const TabsView = ({ callbacks, content }, children) => {
+  return (index.h(index.Host, null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { class: `code-container` },
+      index.h("div", { class: "sq-tabs" }, content.tabs.map((tab, i) => {
+        const openClass = tab.open ? "sq-open" : "";
+        return (index.h("div", { class: `sq-tab ${openClass} ` },
+          index.h("button", { role: "tab", class: `sq-tab-button`, onClick: () => callbacks.openTab(i) }, tab.header)));
+      })),
+      index.h("slot", null)),
+    children));
+};
+
+function useTabs() {
+  const tabs = useChildElements.useChildElements();
+  console.log({ tabs });
+  function openTab(tabIndex) {
+    const currentTabs = tabs.map((tab) => {
+      tab.open = false;
+      return tab;
+    });
+    currentTabs[tabIndex].open = true;
+  }
+  return { callbacks: { openTab }, content: { tabs } };
+}
+
+const Tabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { content, callbacks } = useTabs();
+    return (index.h(TabsView, { callbacks: callbacks, 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-5d71bbdf.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-c0bf9df0.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.cn(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.ne();
-  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: "!!!", 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;