@saasquatch/mint-components 1.5.0-7 → 1.5.0-70

package/dist/esm/{sqm-text-span-view-1781df94.js → sqm-text-span-view-7e61c95c.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { c as createStyleSheet } from './JSS-96eeab98.js';
 
 function TextSpanView(props, children) {
   const style = {
@@ -40,8 +40,7 @@ function TextSpanView(props, children) {
       margin: "0",
     },
   };
-  jss.setup(create());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   const vanillaStyle = `
     sqm-text-span {

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

@@ -1,7 +1,8 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import './jss-preset-default.esm-71fae192.js';
-import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
+import { m as h } from './stencil-hooks.module-2f159754.js';
+import './extends-c31f1eff.js';
+import './JSS-96eeab98.js';
+import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
 
 const Text = class {
   constructor(hostRef) {

package/dist/esm/{extends-3a3f9fe2.js → stencil-hooks.module-2f159754.js}

@@ -1111,22 +1111,4 @@ function c$1(){return (c$1=Object.assign||function(e){for(var t=1;t<arguments.le
 
 function s$2(){return getRenderingRef()}function l$1(){var e=s$2();return 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=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,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);
-}
-
-export { _extends as _, commonjsGlobal as a, browser as b, createCommonjsModule as c, getDefaultExportFromCjs as d, useEffect as e, useRef as f, getAugmentedNamespace as g, h$1 as h, c as i, useState as j, useMemo as k, l$1 as l, h$2 as m, d$2 as n, m$2 as o, useReducer as u, y$1 as y };
+export { commonjsGlobal as a, browser as b, createCommonjsModule as c, getDefaultExportFromCjs as d, useReducer as e, useRef as f, getAugmentedNamespace as g, h$1 as h, useMemo as i, c as j, useState as k, l$1 as l, h$2 as m, m$2 as n, d$2 as o, useEffect as u, y$1 as y };

package/dist/esm/{use-callback-b38a1523.js → use-callback-d8ef4b5d.js}

@@ -1,4 +1,4 @@
-import { k as useMemo } from './extends-3a3f9fe2.js';
+import { i as useMemo } from './stencil-hooks.module-2f159754.js';
 
 const useCallback = (fn, inputs) => useMemo(() => fn, inputs);
 

package/dist/esm/{re-render-6d5b856e.js → useChildElements-c11d6189.js}

@@ -1,5 +1,5 @@
-import { e as useEffect } from './extends-3a3f9fe2.js';
-import { S, a as sn } from './index.module-eb50a8d2.js';
+import { u as useEffect, k as useState } from './stencil-hooks.module-2f159754.js';
+import { P, a as dn } from './index.module-ec3dcc82.js';
 
 const RENDER_EVENT = "sqm:request-rerender";
 /**
@@ -10,7 +10,7 @@ const RENDER_EVENT = "sqm:request-rerender";
  * @param deps an array of dependencies used for useEffect
  */
 function useRequestRerender(deps) {
-  const host = S();
+  const host = P();
   useEffect(() => {
     host.dispatchEvent(new CustomEvent(RENDER_EVENT, {
       detail: true,
@@ -23,8 +23,8 @@ function useRequestRerender(deps) {
  * Re-renders a parent component when child components make the request
  */
 function useRerenderListener() {
-  const host = S();
-  const [tick, rerender] = sn();
+  const host = P();
+  const [tick, rerender] = dn();
   useEffect(() => {
     const listener = (e) => {
       // Preventes recursively nested components from sending requests up all the way
@@ -39,4 +39,19 @@ function useRerenderListener() {
   return tick;
 }
 
-export { useRequestRerender as a, useRerenderListener as u };
+function useChildElements() {
+  const host = P();
+  const initialState = host.children.length ? Array.from(host.children) : [];
+  const [childElements, setChildElements] = useState(initialState);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const children = Array.from(host.children);
+      setChildElements([...children]);
+    });
+    observer.observe(host, { childList: true });
+    return () => observer.disconnect();
+  }, [host]);
+  return childElements;
+}
+
+export { useChildElements as a, useRequestRerender as b, useRerenderListener as u };

package/dist/esm/{useDemoBigStat-d227b2f9.js → useDemoBigStat-022e116d.js}

@@ -1,7 +1,5 @@
-import { h } from './index-17b4da69.js';
-import { b as browser, k as useMemo } from './extends-3a3f9fe2.js';
-import { M, R, n as ne, d as dist, c as cn } from './index.module-eb50a8d2.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { b as browser, i as useMemo } from './stencil-hooks.module-2f159754.js';
+import { M, R, n as ne, d as dist, b as mn } from './index.module-ec3dcc82.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 
 /**
@@ -298,50 +296,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,
-    },
-  };
-  jss.setup(create());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("div", { part: "stat-wrapper", class: sheet.classes.Container },
-    h("style", { type: "text/css" }, styleString),
-    h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
-    h("div", { part: "stat-description", class: sheet.classes.Description }, children)));
-}
-
 const debug = browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = cn(query, variables);
+  const res = 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
@@ -640,6 +603,7 @@ const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyRedeemedCredit
@@ -682,6 +646,7 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyAssignedCredit
@@ -724,6 +689,7 @@ const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyAvailableValue
@@ -772,6 +738,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)
@@ -893,14 +860,19 @@ const StatPaths = [
 const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment } = props;
-  const programId = M();
+  const { statType, flexReverse, alignment, programId = M(), } = props;
   const locale = R();
   const userIdent = ne();
   const re = 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",
     };
   }
@@ -926,6 +898,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,
     },
@@ -941,6 +914,7 @@ function useDemoBigStat(props) {
       props: {
         value: 0,
         statvalue: "!!!",
+        loading: false,
         flexReverse: false,
         alignment: "center",
       },
@@ -953,6 +927,7 @@ function useDemoBigStat(props) {
   return {
     props: cjs({
       statvalue: "12345",
+      value: 0,
       flexReverse: false,
       alignment: "center",
     }, props.demoData || {}, { arrayMerge: (_, a) => a }),
@@ -960,4 +935,4 @@ function useDemoBigStat(props) {
   };
 }
 
-export { BigStatView as B, useDemoBigStat as a, pathToRegexp as p, useBigStat as u };
+export { useBigStat as a, pathToRegexp as p, useDemoBigStat as u };

package/dist/esm/useReferralTable-bccb9ac0.js

@@ -0,0 +1,345 @@
+import { h } from './index-17b4da69.js';
+import { e as useReducer, u as useEffect } from './stencil-hooks.module-2f159754.js';
+import { d as dist, n as ne, M, R, b as mn, w as wn } from './index.module-ec3dcc82.js';
+import { u as useRerenderListener, a as useChildElements } from './useChildElements-c11d6189.js';
+
+const CSS_NAMESPACE = "sqm-referral-table";
+const GET_REFERRER_DATA = dist.gql `
+  query getReferrals(
+    $programId: ID
+    $rewardFilter: RewardFilterInput
+    $locale: RSLocale
+  ) {
+    viewer {
+      ... on User {
+        referredByReferral(programId: $programId) {
+          dateReferralStarted
+          dateConverted
+          referrerUser {
+            firstName
+            lastName
+          }
+          rewards(filter: $rewardFilter) {
+            id
+            type
+            value
+            unit
+            name
+            dateGiven
+            dateExpires
+            dateCancelled
+            dateRedeemed
+            dateScheduledFor
+            fuelTankCode
+            fuelTankType
+            currency
+            prettyValue(locale: $locale)
+            statuses
+            globalRewardKey
+            programRewardKey
+            rewardRedemptionTransactions {
+              data {
+                exchangedRewards {
+                  data {
+                    prettyValue(locale: $locale)
+                    type
+                    fuelTankCode
+                    globalRewardKey
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+const GET_REFERRAL_DATA = dist.gql `
+  query getReferrals(
+    $limit: Int!
+    $offset: Int!
+    $referralFilter: ReferralFilterInput
+    $rewardFilter: RewardFilterInput
+    $locale: RSLocale
+  ) {
+    viewer {
+      ... on User {
+        id
+        paidReferrals: referrals(
+          filter: { dateReferralPaid_timeframe: "this_10_years" }
+          limit: 1
+        ) {
+          totalCount
+        }
+        referrals(limit: $limit, offset: $offset, filter: $referralFilter) {
+          totalCount
+          count
+          data {
+            id
+            referredUser {
+              id
+              accountId
+              firstName
+              lastName
+              email
+              programGoals {
+                goalId
+                programId
+                count
+                firstDate
+                lastDate
+                conversionCount
+              }
+            }
+            shareLinkUsed
+            referralCodeUsed
+            moderationStatus
+            dateConverted
+            dateFraudChecksCompleted
+            dateModerated
+            dateModified
+            dateReferralEnded
+            dateReferralPaid
+            dateReferralStarted
+            dateUserModified
+            programId
+            program {
+              id
+              name
+            }
+            rewards(filter: $rewardFilter) {
+              id
+              type
+              value
+              unit
+              name
+              dateGiven
+              dateExpires
+              dateCancelled
+              dateRedeemed
+              dateScheduledFor
+              fuelTankCode
+              fuelTankType
+              currency
+              prettyValue(locale: $locale)
+              statuses
+              globalRewardKey
+              programRewardKey
+              rewardRedemptionTransactions {
+                data {
+                  exchangedRewards {
+                    data {
+                      prettyValue(locale: $locale)
+                      type
+                      fuelTankCode
+                      globalRewardKey
+                    }
+                  }
+                }
+              }
+            }
+            childNodes(limit: 10, offset: 0) {
+              data {
+                data {
+                  id
+                  ... on FlatReward {
+                    id
+                    statuses
+                    type
+                    value
+                  }
+                  ... on ProgramEmailTransaction {
+                    id
+                    rewardId
+                    dateCreated
+                    dateSent
+                    dateQueued
+                  }
+                }
+                depth
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function useReferralTable(props, emptyElement, loadingElement) {
+  var _a, _b, _c;
+  const user = ne();
+  const programIdContext = M();
+  // Default to context, overriden by props
+  const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
+  // If no program ID, shows all programs
+  const referralFilter = programId
+    ? programId === "classic"
+      ? { programId_exists: false }
+      : { programId_eq: programId }
+    : {};
+  const rewardFilter = {
+    userId_eq: user === null || user === void 0 ? void 0 : user.id,
+    accountId_eq: user === null || user === void 0 ? void 0 : user.accountId,
+  };
+  const [content, setContent] = useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    columns: [],
+    rows: [],
+    loading: false,
+    page: 0,
+  });
+  const locale = R();
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = mn(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, } = 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; }, {
+    limit: props.perPage,
+    offset: 0,
+  }, {
+    referralFilter,
+    rewardFilter,
+    locale,
+  }, (props.showReferrer && referrerLoading && !referrerResponse) || !(user === null || user === void 0 ? void 0 : user.jwt));
+  useEffect(() => {
+    if (states.currentPage === 0 && showReferrerRow)
+      callbacks.setLimit(props.perPage - 1);
+  }, [showReferrerRow]);
+  useEffect(() => {
+    if (props.showReferrer && showReferrerRow) {
+      callbacks.setLimit(props.perPage - 1);
+      callbacks.setCurrentPage(0);
+    }
+    else {
+      callbacks.setLimit(props.perPage);
+      callbacks.setCurrentPage(0);
+    }
+  }, [props.showReferrer]);
+  const tick = useRerenderListener();
+  const data = referralData === null || referralData === void 0 ? void 0 : referralData.data;
+  const components = useChildElements();
+  async function getComponentData(components) {
+    // filter out loading and empty states from columns array
+    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)
+    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);
+      }));
+      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);
+      return cells;
+    });
+    const rows = cellsPromise &&
+      [referrerRow, ...(await Promise.all(cellsPromise))].filter((value) => value);
+    setContent({ rows });
+    const columns = columnsPromise && await Promise.all(columnsPromise);
+    // Set the content to render and finish loading components
+    setContent({ columns, loading: false, page: states.currentPage });
+  }
+  useEffect(() => {
+    setContent({ loading: true });
+    referralData && getComponentData(components);
+  }, [referralData, components, tick]);
+  const isEmpty = !((_c = content === null || content === void 0 ? void 0 : content.rows) === null || _c === void 0 ? void 0 : _c.length) && !(data === null || data === void 0 ? void 0 : data.length);
+  const show = 
+  // 1 - Loading if loading
+  states.loading || content.loading
+    ? "loading"
+    : // 2 - Empty if empty
+      isEmpty
+        ? "empty"
+        : // 3 - Then show rows
+          "rows";
+  return {
+    states: {
+      hasNext: states.currentPage < states.pageCount - 1,
+      hasPrev: states.currentPage > 0,
+      show,
+      namespace: CSS_NAMESPACE,
+    },
+    data: {
+      textOverrides: {
+        showLabels: props.showLabels,
+        prevLabel: props.prevLabel,
+        moreLabel: props.moreLabel,
+      },
+      //   referralData: data,
+      hiddenColumns: props.hiddenColumns,
+      smBreakpoint: props.smBreakpoint,
+      mdBreakpoint: props.mdBreakpoint,
+    },
+    elements: {
+      columns: content.columns,
+      rows: content.rows,
+      emptyElement,
+      loadingElement,
+    },
+    callbacks: {
+      nextPage: () => {
+        if (states.currentPage === 0 && showReferrerRow)
+          callbacks.setLimit(props.perPage);
+        callbacks.setCurrentPage(states.currentPage + 1);
+      },
+      prevPage: () => {
+        if (states.currentPage === 1 && showReferrerRow)
+          callbacks.setLimit(props.perPage - 1);
+        callbacks.setCurrentPage(states.currentPage - 1);
+      },
+    },
+  };
+}
+function generateUserError(e) {
+  try {
+    return JSON.stringify(e);
+  }
+  catch (e) {
+    return "An unknown error";
+  }
+}
+async function tryMethod(c, callback) {
+  const tag = c.tagName.toLowerCase();
+  await customElements.whenDefined(tag);
+  let renderPromise;
+  try {
+    renderPromise = callback();
+  }
+  catch (e) {
+    // renderLabel did not return a promise, so this method probably doesn't exist
+    // therefore, we IGNORE the label
+    if (callback.name === "renderReferrerCell") {
+      console.error("column does not have a renderReferrerCell method.");
+    }
+    else {
+      console.error("label promise failed", e);
+    }
+    return h("span", null);
+  }
+  try {
+    return await renderPromise;
+  }
+  catch (e) {
+    // The column returned a promise, and that promise failed.
+    // This should not happen so we fail fast
+    console.error("Error rendering label", e);
+    const userError = generateUserError(e);
+    return (h("details", null,
+      h("summary", null, "Error"),
+      userError));
+  }
+}
+
+export { generateUserError as g, useReferralTable as u };

package/dist/esm/{utils-454405f5.js → utils-1d345130.js}

@@ -20,6 +20,14 @@ function getProps(obj) {
 function getMissingProps(props) {
   const missingProps = props.filter((prop) => !prop.value);
   return missingProps.length ? missingProps : false;
+}
+function luxonLocale(locale) {
+  const splitLocale = locale === null || locale === void 0 ? void 0 : locale.split("_");
+  if (!splitLocale || splitLocale.length === 1)
+    return locale;
+  const language = splitLocale[0];
+  const country = splitLocale[1];
+  return `${language}-${country.toUpperCase()}`;
 }
 
-export { getMissingProps as a, getProps as g };
+export { getMissingProps as a, getProps as g, luxonLocale as l };

package/dist/esm-es5/GenericTableView-79b65de0.js

@@ -0,0 +1 @@
+var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var a,t=1,l=arguments.length;t<l;t++){a=arguments[t];for(var s in a)if(Object.prototype.hasOwnProperty.call(a,s))e[s]=a[s]}return e};return __assign.apply(this,arguments)};import{h}from"./index-17b4da69.js";import{g as gap}from"./mixins-10353a39.js";import{c as createStyleSheet}from"./JSS-96eeab98.js";function GenericTableView(e){var a;var t=e.states,l=e.data,s=e.callbacks,r=e.elements;var n=r.columns,i=r.rows;var o=t.show;console.log("table",e);console.log("columns 0",n);var d=l.hiddenColumns.split(",").map(Number);var p="@media (max-width: "+l.mdBreakpoint+"px)";var m="@media (min-width: "+(!Boolean(i.length)?l.mdBreakpoint:l.smBreakpoint)+"px) and (max-width: "+l.mdBreakpoint+"px)";var c={Table:(a={tableLayout:"fixed",width:"100%","& th":{paddingBottom:"var(--sl-spacing-small)",textAlign:"left",fontWeight:"var(--sl-font-weight-semibold)",overflowWrap:"anywhere"},"& tr":{},"& td":{borderTop:"1px solid var(--sl-color-neutral-200)",padding:"var(--sl-spacing-small)",paddingLeft:"0",overflow:"hidden",textOverflow:"ellipsis"}},a[p]={"& thead":{display:"none"},"& tr":{display:"block",background:"#FFFFFF",border:"1px solid var(--sl-color-neutral-200)",boxShadow:"0px 2px 4px rgba(0, 0, 0, 0.1)",borderRadius:"var(--sl-border-radius-medium)",padding:"var(--sl-spacing-medium)",fontSize:"var(--sl-font-size-small)",marginBottom:"var(--sl-spacing-large)"},"& td":{display:"grid",gridTemplateColumns:"0.5fr 0.5fr",borderTop:"none",padding:"0",marginBottom:"var(--sl-spacing-medium)","&:first-child":{textAlign:"left"},"&:before":{content:"attr(data-label)",whiteSpace:"nowrap"},"&:last-child":{marginBottom:"0"},"&.hidden:before":{content:"none"}}},a[m]={"& tbody":{display:"grid",gridTemplateColumns:"0.5fr 0.5fr",gap:"25px"}},a),ButtonContainer:__assign({display:"flex","justify-content":"flex-end","margin-top":"var(--sl-spacing-small)"},gap({direction:"row",size:"var(--sl-spacing-small)"})),ButtonDisabled:{"&::part(base)":{opacity:"0.25"}}};var b=createStyleSheet(c);var g=b.toString();return h("div",null,h("style",{type:"text/css"},g),h("table",{class:b.classes.Table},l.textOverrides.showLabels&&h("thead",null,h("tr",null,n===null||n===void 0?void 0:n.map((function(e){return h("th",null,e)})))),h("tbody",null,o==="loading"&&r.loadingElement,o==="empty"&&r.emptyElement,o==="rows"&&(i===null||i===void 0?void 0:i.map((function(e,a){return h("tr",{style:{borderTop:""+(!l.textOverrides.showLabels&&a===0?"none":"")},part:"table-row"},e.map((function(e,a){return h("td",{class:d.includes(a)?"hidden":"","data-label":n[a]+":"},e)})))}))))),h("div",{class:b.classes.ButtonContainer,part:t.namespace+"-button-wrapper"},h("sl-button",{size:"small",disabled:!t.hasPrev,loading:o==="loading",onClick:s.prevPage,exportparts:"base: defaultbutton-base",class:!t.hasPrev?b.classes.ButtonDisabled:""},l.textOverrides.prevLabel),h("sl-button",{size:"small",loading:o==="loading",disabled:!t.hasNext,onClick:s.nextPage,exportparts:"base: defaultbutton-base",class:!t.hasNext?b.classes.ButtonDisabled:""},l.textOverrides.moreLabel)))}export{GenericTableView as G};