@saasquatch/mint-components 1.5.0-41 → 1.5.0-45

package/dist/esm/sqm-referral-table_11.entry.js

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, g as getElement, c as Host } from './index-17b4da69.js';
 import { e as useReducer, u as useEffect, m as h$1 } from './stencil-hooks.module-2f159754.js';
-import { i as intl } from './global-cf2ab5b2.js';
+import { i as intl } from './global-baef42b7.js';
 import './use-callback-d8ef4b5d.js';
 import { i as ie, M, A as An, b as sn, a as mn, j as jn } from './index.module-c6efec0e.js';
 import './extends-c31f1eff.js';
@@ -9,9 +9,10 @@ import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
 import { G as GenericTableView } from './GenericTableView-25965d2b.js';
-import { g as gql } from './index-57b23da1.js';
+import { g as gql } from './index-0e5ee1c5.js';
 import { u as useRerenderListener, a as useChildElements, b as useRequestRerender } from './useChildElements-b6a77993.js';
 import { l as luxon } from './luxon-5fa22651.js';
+import { l as luxonLocale } from './utils-1d345130.js';
 import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
 
 const CSS_NAMESPACE = "sqm-referral-table";
@@ -216,6 +217,7 @@ function useReferralTable(props, emptyElement, loadingElement) {
   }, {
     referralFilter,
     rewardFilter,
+    locale,
   }, (props.showReferrer && referrerLoading && !referrerResponse) || !(user === null || user === void 0 ? void 0 : user.jwt));
   useEffect(() => {
     if (states.currentPage === 0 && showReferrerRow)
@@ -249,7 +251,7 @@ function useReferralTable(props, emptyElement, loadingElement) {
     }
     // 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, c)));
+      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;
     });
@@ -469,15 +471,15 @@ const ReferralTableDateCell = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
+    this.locale = "en";
     h$1(this);
   }
   disconnectedCallback() { }
   render() {
     var _a;
-    // needs hook to use locale
     const date = !this.date
       ? "-"
-      : (_a = luxon.DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.toLocaleString(luxon.DateTime.DATE_MED);
+      : (_a = luxon.DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(this.locale)).toLocaleString(luxon.DateTime.DATE_MED);
     return date;
   }
 };
@@ -505,9 +507,10 @@ const ReferralTableDateColumn = class {
     h$1(this);
   }
   disconnectedCallback() { }
-  async renderCell(data) {
+  async renderCell(data, locale) {
     // TODO - Validate `dateShown` against a set of known values
-    return (h("sqm-referral-table-date-cell", { date: data[this.dateShown] }));
+    console.log("date column - referral", { locale });
+    return (h("sqm-referral-table-date-cell", { date: data[this.dateShown], locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -521,9 +524,15 @@ const ReferralTableDateColumn = class {
 const ReferralTableRewardsCell = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.locale = "en";
   }
   render() {
+    intl.locale = this.locale;
     const style = {
+      "@keyframes slideRight": {
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+      },
       DetailsContainer: {
         width: "100%",
         display: "flex",
@@ -549,10 +558,12 @@ const ReferralTableRewardsCell = class {
         "&::part(summary-icon)": {
           display: `${this.hideDetails ? "none" : "flex"}`,
         },
+        "&::part(summary-icon[open])": {
+          transform: "rotate(-90deg)",
+          background: "red",
+        },
       },
       BadgeContainer: {
-        float: "right",
-        marginRight: "var(--sl-spacing-medium)",
         "& > :not(:last-child)": {
           "margin-right": "var(--sl-spacing-x-small)",
         },
@@ -569,47 +580,6 @@ const ReferralTableRewardsCell = class {
           background: "var(--sl-color-blue-600)",
         },
       },
-      Description: {
-        maxWidth: "500px",
-        padding: "var(--sl-spacing-x-small)",
-        border: "1px solid var(--sl-color-neutral-200)",
-        borderRadius: "var(--sl-border-radius-medium)",
-        boxSizing: "border-box",
-        marginBottom: "var(--sl-spacing-small)",
-        "& input[type=checkbox]": {
-          display: "none",
-        },
-        "& input:checked ~ .details": {
-          transform: "rotate(-180deg)",
-        },
-        "& .details": {
-          float: "right",
-          top: "var(--sl-spacing-medium)",
-          right: "var(--sl-spacing-medium)",
-          color: "var(--sl-color-neutral-700)",
-          fontSize: "var(--sl-font-size-large)",
-          "& :hover": {
-            color: "var(--sl-color-primary-700)",
-          },
-          transformOrigin: "50% 37%",
-          transition: "transform var(--sl-transition-medium) ease",
-          cursor: "pointer",
-        },
-        "& input:checked ~ .summary": {
-          transition: "all var(--sl-transition-slow) ease",
-          maxHeight: "200px",
-        },
-        "& .content": {
-          padding: "var(--sl-spacing-small)",
-        },
-        "& .summary": {
-          display: "block",
-          overflow: "hidden",
-          fontSize: "var(--sl-font-size-small)",
-          maxHeight: "0px",
-          transition: "all var(--sl-transition-fast) ease",
-        },
-      },
     };
     const sheet = createStyleSheet(style);
     const styleString = sheet.toString();
@@ -641,7 +611,11 @@ const ReferralTableRewardsCell = class {
     };
     const getTimeDiff = (endTime) => {
       // Current implementation only calculates the difference from current time
-      return luxon.DateTime.fromMillis(endTime).toRelative().replace("in", "").trim();
+      return luxon.DateTime.fromMillis(endTime)
+        .setLocale(luxonLocale(this.locale))
+        .toRelative()
+        .replace("in", "")
+        .trim();
     };
     return this.rewards.map((reward) => {
       const state = getState(reward.statuses);
@@ -656,7 +630,7 @@ const ReferralTableRewardsCell = class {
         status: state,
       });
       const rid = Math.random().toString(36).slice(2);
-      return (h("div", null, h("style", { type: "text/css" }, styleString), h("div", { class: sheet.classes.Description }, h("input", { type: "checkbox", id: "details-" + rid }), h("label", { class: "details", htmlFor: "details-" + rid }, h("sl-icon", { name: "chevron-down" })), h(TextSpanView, { type: "p" }, h("span", { class: sheet.classes.BoldText }, reward.prettyValue)), h("span", { class: sheet.classes.BadgeContainer }, state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: slBadgeType === "primary"
+      return (h("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails }, h("style", { type: "text/css" }, styleString), h("div", { slot: "summary", class: sheet.classes.DetailsContainer }, h(TextSpanView, { type: "p" }, h("span", { class: sheet.classes.BoldText }, reward.prettyValue)), h("div", { class: sheet.classes.BadgeContainer }, state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: slBadgeType === "primary"
           ? sheet.classes.RedeemBadge
           : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, intl.formatMessage({
         id: "pendingForText",
@@ -668,7 +642,17 @@ const ReferralTableRewardsCell = class {
           ? sheet.classes.RedeemBadge
           : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, badgeText)), reward.dateExpires && state === "AVAILABLE" && (h("sl-badge", { class: slBadgeType === "primary"
           ? sheet.classes.RedeemBadge
-          : sheet.classes.StatusBadge, type: "info", pill: true }, this.expiringText, ` ${getTimeDiff(reward.dateExpires)}`))), h("div", { class: "summary" }, h("div", { class: "content" }, reward.dateGiven && (h("div", null, h(TextSpanView, { type: "p" }, this.rewardReceivedText, " ", h("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateGiven).toLocaleString(luxon.DateTime.DATE_MED))))), state === "EXPIRED" && reward.dateExpires && (h("div", null, h(TextSpanView, { type: "p" }, statusText, " ", h("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateExpires).toLocaleString(luxon.DateTime.DATE_MED))))), state === "CANCELLED" && reward.dateCancelled && (h("div", null, h(TextSpanView, { type: "p" }, statusText, " ", h("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateCancelled).toLocaleString(luxon.DateTime.DATE_MED))))), state === "PENDING" && reward.dateScheduledFor && (h("div", null, h(TextSpanView, { type: "p" }, statusText, " ", h("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateScheduledFor).toLocaleString(luxon.DateTime.DATE_MED))))), " ", state === "AVAILABLE" && reward.dateExpires && (h("div", null, h(TextSpanView, { type: "p" }, statusText, " ", h("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateExpires).toLocaleString(luxon.DateTime.DATE_MED))))), reward.fuelTankCode && (h("div", null, this.fuelTankText, " ", h("span", { class: sheet.classes.BoldText }, reward.fuelTankCode))))))));
+          : sheet.classes.StatusBadge, type: "info", pill: true }, this.expiringText, ` ${getTimeDiff(reward.dateExpires)}`)))), h("div", null, reward.dateGiven && (h("div", null, h(TextSpanView, { type: "p" }, this.rewardReceivedText, " ", h("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateGiven)
+        .setLocale(luxonLocale(this.locale))
+        .toLocaleString(luxon.DateTime.DATE_MED))))), state === "EXPIRED" && reward.dateExpires && (h("div", null, h(TextSpanView, { type: "p" }, statusText, " ", h("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateExpires)
+        .setLocale(luxonLocale(this.locale))
+        .toLocaleString(luxon.DateTime.DATE_MED))))), state === "CANCELLED" && reward.dateCancelled && (h("div", null, h(TextSpanView, { type: "p" }, statusText, " ", h("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateCancelled)
+        .setLocale(luxonLocale(this.locale))
+        .toLocaleString(luxon.DateTime.DATE_MED))))), state === "PENDING" && reward.dateScheduledFor && (h("div", null, h(TextSpanView, { type: "p" }, statusText, " ", h("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateScheduledFor)
+        .setLocale(luxonLocale(this.locale))
+        .toLocaleString(luxon.DateTime.DATE_MED))))), " ", state === "AVAILABLE" && reward.dateExpires && (h("div", null, h(TextSpanView, { type: "p" }, statusText, " ", h("span", { class: sheet.classes.BoldText }, luxon.DateTime.fromMillis(reward.dateExpires)
+        .setLocale(luxonLocale(this.locale))
+        .toLocaleString(luxon.DateTime.DATE_MED))))), reward.fuelTankCode && (h("div", null, this.fuelTankText, " ", h("span", { class: sheet.classes.BoldText }, reward.fuelTankCode))))));
     });
   }
 };
@@ -711,9 +695,9 @@ const ReferralTableRewardsColumn = class {
     h$1(this);
   }
   disconnectedCallback() { }
-  async renderCell(data) {
+  async renderCell(data, locale) {
     // TODO: Do the right thing with many rewards, pending rewards, canceled rewards
-    return (h("sqm-referral-table-rewards-cell", { rewards: data.rewards, statusText: this.statusText, statusLongText: this.statusLongText, fuelTankText: this.fuelTankText, rewardReceivedText: this.rewardReceivedText, expiringText: this.expiringText, pendingForText: this.pendingForText, hideDetails: this.hideDetails }));
+    return (h("sqm-referral-table-rewards-cell", { rewards: data.rewards, statusText: this.statusText, statusLongText: this.statusLongText, fuelTankText: this.fuelTankText, rewardReceivedText: this.rewardReceivedText, expiringText: this.expiringText, pendingForText: this.pendingForText, hideDetails: this.hideDetails, locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;

package/dist/esm/sqm-refresh-button.entry.js

@@ -3,7 +3,7 @@ import { m as h$1 } from './stencil-hooks.module-2f159754.js';
 import './use-callback-d8ef4b5d.js';
 import { j as jn } from './index.module-c6efec0e.js';
 import './extends-c31f1eff.js';
-import { g as getProps } from './utils-454405f5.js';
+import { g as getProps } from './utils-1d345130.js';
 
 function RefreshButtonView(props, children) {
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h(Host, null,

package/dist/esm/sqm-rewards-table_9.entry.js

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
 import { e as useReducer, u as useEffect, m as h$1 } from './stencil-hooks.module-2f159754.js';
-import { i as intl } from './global-cf2ab5b2.js';
+import { i as intl } from './global-baef42b7.js';
 import './use-callback-d8ef4b5d.js';
 import { i as ie, M, A as An, a as mn, j as jn } from './index.module-c6efec0e.js';
 import './extends-c31f1eff.js';
@@ -9,9 +9,10 @@ import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
 import { G as GenericTableView } from './GenericTableView-25965d2b.js';
-import { g as gql } from './index-57b23da1.js';
+import { g as gql } from './index-0e5ee1c5.js';
 import { u as useRerenderListener, a as useChildElements, b as useRequestRerender } from './useChildElements-b6a77993.js';
 import { l as luxon } from './luxon-5fa22651.js';
+import { l as luxonLocale } from './utils-1d345130.js';
 import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
 
 const CSS_NAMESPACE = "sqm-rewards-table";
@@ -144,7 +145,7 @@ function useRewardsTable(props, emptyElement, loadingElement) {
     const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderLabel()));
     // 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], c)));
+      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;
     });
@@ -318,14 +319,15 @@ const RewardTableDateCell = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
+    this.locale = "en";
     h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    var _a;
+    var _a, _b;
     const date = !this.date
       ? "-"
-      : (_a = luxon.DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.toLocaleString(luxon.DateTime.DATE_MED);
+      : (_b = (_a = luxon.DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(this.locale))) === null || _b === void 0 ? void 0 : _b.toLocaleString(luxon.DateTime.DATE_MED);
     return h(TextSpanView, { type: "p" }, date);
   }
 };
@@ -350,10 +352,11 @@ const RewardTableDateColumn = class {
     h$1(this);
   }
   disconnectedCallback() { }
-  async renderCell(data) {
+  async renderCell(data, locale) {
     const reward = data === null || data === void 0 ? void 0 : data[0];
     // TODO: dateShown validation?
-    return (h("sqm-rewards-table-date-cell", { date: reward[this.dateShown] }));
+    console.log("reward column - locale", { locale });
+    return (h("sqm-rewards-table-date-cell", { date: reward[this.dateShown], locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -370,6 +373,7 @@ const RewardTableRewardsCell = class {
   }
   // TODO: value function from portalv2
   render() {
+    intl.locale = this.locale;
     const style = {
       DetailsContainer: {
         width: "100%",
@@ -496,8 +500,8 @@ const RewardsTableColumn = class {
     h$1(this);
   }
   disconnectedCallback() { }
-  async renderCell(data) {
-    return (h("sqm-rewards-table-reward-cell", { reward: data === null || data === void 0 ? void 0 : data[0], redeemedText: this.redeemedText, availableText: this.availableText }));
+  async renderCell(data, locale) {
+    return (h("sqm-rewards-table-reward-cell", { reward: data === null || data === void 0 ? void 0 : data[0], redeemedText: this.redeemedText, availableText: this.availableText, locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -511,8 +515,10 @@ const RewardsTableColumn = class {
 const RewardTableSourceCell = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.locale = "en";
   }
   render() {
+    intl.locale = this.locale;
     const RewardSource = ({ reward }) => {
       return (h("span", null, intl.formatMessage({
         id: "rewardSourceText",
@@ -595,8 +601,8 @@ const RewardTableUserColumn = class {
     h$1(this);
   }
   disconnectedCallback() { }
-  async renderCell(data) {
-    return (h("sqm-rewards-table-source-cell", { reward: data === null || data === void 0 ? void 0 : data[0], anonymousUserText: this.anonymousUser, deletedUserText: this.deletedUser, rewardExchangeText: this.rewardExchangeText, referralText: this.referralText, rewardSourceText: this.rewardSourceText }));
+  async renderCell(data, locale) {
+    return (h("sqm-rewards-table-source-cell", { reward: data === null || data === void 0 ? void 0 : data[0], anonymousUserText: this.anonymousUser, deletedUserText: this.deletedUser, rewardExchangeText: this.rewardExchangeText, referralText: this.referralText, rewardSourceText: this.rewardSourceText, locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -614,6 +620,7 @@ const RewardTableUserColumn = class {
 const RewardTableStatusCell = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.locale = "en";
   }
   rewardStatus(reward) {
     if (reward.dateCancelled)
@@ -643,6 +650,7 @@ const RewardTableStatusCell = class {
   }
   render() {
     var _a;
+    intl.locale = this.locale;
     const style = {
       Badge: {
         "&::part(base)": {
@@ -683,7 +691,7 @@ const RewardTableStatusCell = class {
     const date = dateShown &&
       `${rewardStatus === "AVAILABLE" && this.reward.dateExpires
         ? this.expiryText + " "
-        : ""}${(_a = luxon.DateTime.fromMillis(dateShown)) === null || _a === void 0 ? void 0 : _a.toLocaleString(luxon.DateTime.DATE_MED)}`;
+        : ""}${(_a = luxon.DateTime.fromMillis(dateShown)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(luxonLocale(this.locale))).toLocaleString(luxon.DateTime.DATE_MED)}`;
     return (h("div", { style: { display: "contents" } }, h("style", { type: "text/css" }, styleString), h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED"
         ? sheet.classes.RedeemBadge
         : sheet.classes.Badge }, statusText), h("p", { class: sheet.classes.Date }, date)));
@@ -708,9 +716,9 @@ const RewardTableStatusColumn = class {
     h$1(this);
   }
   disconnectedCallback() { }
-  async renderCell(data) {
+  async renderCell(data, locale) {
     const rewardData = data === null || data === void 0 ? void 0 : data[0];
-    return (h("sqm-rewards-table-status-cell", { statusText: this.statusText, reward: rewardData, expiryText: this.expiryText }));
+    return (h("sqm-rewards-table-status-cell", { statusText: this.statusText, reward: rewardData, expiryText: this.expiryText, locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;

package/dist/esm/sqm-share-code.entry.js

@@ -6,7 +6,7 @@ import './extends-c31f1eff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import './JSS-96eeab98.js';
-import { g as getProps } from './utils-454405f5.js';
+import { g as getProps } from './utils-1d345130.js';
 import { S as ShareLinkView } from './sqm-share-link-view-18f5387c.js';
 
 const MessageLinkQuery = dist.gql `

package/dist/esm/sqm-stat-container.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
 import { m as h } from './stencil-hooks.module-2f159754.js';
 import './extends-c31f1eff.js';
 import './JSS-96eeab98.js';
-import { g as getProps } from './utils-454405f5.js';
+import { g as getProps } from './utils-1d345130.js';
 import { S as StatContainerView } from './sqm-stat-container-view-8a565c5a.js';
 
 const StatContainer = class {