@saasquatch/mint-components 1.10.2-9 → 1.10.3-1

package/dist/collection/components/sqm-portal-container/PortalContainer.stories.js

@@ -81,6 +81,18 @@ export const SpaceEvenly = () => {
             h("p", null, "Points Balance")))),
       h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
 };
+export const ResponsiveBox = () => {
+  return (h("div", { style: { width: "100%", maxWidth: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-between", "flex-wrap": "nowrap" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
 export const Start = () => {
   return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
     h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "start" },

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js

@@ -5,7 +5,7 @@ export function PortalContainerView(props, children) {
     Container: {
       boxSizing: "border-box",
       display: props.display || "grid",
-      flexWrap: "wrap",
+      flexWrap: props.flexWrap || "wrap",
       "grid-template-columns": props.direction === "row"
         ? `repeat(auto-fill, minmax(${props.minWidth}, auto))`
         : "100%",

package/dist/collection/components/sqm-portal-container/sqm-portal-container.js

@@ -37,6 +37,13 @@ export class PortalContainer {
      * @uiName Maximum width
      */
     this.maxWidth = "100%";
+    /**
+     * @uiName Flex wrap behavior
+     * @uiType string
+     * @uiEnum ["wrap", "nowrap"]
+     * @uiEnumNames ["Wrap", "No Wrap"]
+     */
+    this.flexWrap = "wrap";
     /**
      * @uiName Background color
      * @uiWidget color
@@ -253,6 +260,36 @@ export class PortalContainer {
       "reflect": false,
       "defaultValue": "\"100%\""
     },
+    "flexWrap": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Flex wrap behavior",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"wrap\", \"nowrap\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Wrap\", \"No Wrap\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "flex-wrap",
+      "reflect": false,
+      "defaultValue": "\"wrap\""
+    },
     "center": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view.js

@@ -116,7 +116,8 @@ const style = {
     background: "var(--sl-color-gray-200)",
   },
   LargeSkeleton: {
-    width: "320px",
+    width: "100%",
+    maxWidth: "320px",
     height: "40px",
     borderRadius: "50px",
     background: "var(--sl-color-gray-200)",

package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js

@@ -83,6 +83,27 @@ const style = {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
   },
+  PhoneInputsSection: {
+    display: "flex",
+    alignItems: "flex-start",
+    flexDirection: "column",
+    gap: "4px",
+    "& p": {
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sl-input-label-color)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+  },
+  PhoneInputsContainer: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "4px",
+    width: "100%",
+    "& #phoneNumber": {
+      width: "100%",
+      minWidth: "0px",
+    },
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -108,7 +129,7 @@ const vanillaStyle = `
     }
 
     sl-select#phoneNumberCountryCode::part(menu) {
-      width: 450px;
+      min-width: 250px;
     }
   `;
 export const UserInfoFormView = (props) => {
@@ -191,37 +212,39 @@ export const UserInfoFormView = (props) => {
               } }), (_e = data === null || data === void 0 ? void 0 : data.countries) === null || _e === void 0 ? void 0 :
             _e.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName))), (_f = data === null || data === void 0 ? void 0 : data.allCountries) === null || _f === void 0 ? void 0 :
             _f.map((c) => (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName)))),
-          h("div", { style: { display: "flex", gap: "4px" } },
-            h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", label: text.phoneNumber, style: { minWidth: "140px" }, value: formState.phoneNumberCountryCode, disabled: states.disabled || states.isPartner, ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
-              class: classes.ErrorInput,
-            }
-              : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("phoneCountry", e) }),
-              h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
-                  // Stop shoelace intercepting key presses
-                  e.stopPropagation();
-                }, "onSl-input": (e) => {
-                  callbacks.setPhoneCountrySearch(e.target.value);
-                } }), (_h = data === null || data === void 0 ? void 0 : data.phoneCountries) === null || _h === void 0 ? void 0 :
-              _h.map((c) => {
-                var _a, _b;
-                return (h("sl-menu-item", { style: { width: "500px" }, value: c.countryCode },
-                  h("div", { slot: "prefix", style: { marginRight: "8px" } }, `${(_a = PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
-                  _b.dial_code));
-              }), (_j = data === null || data === void 0 ? void 0 : data.allCountries) === null || _j === void 0 ? void 0 :
-              _j.map((c) => {
-                var _a, _b;
-                return (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } },
-                  h("div", { slot: "prefix", style: { marginRight: "8px" } }, `${(_a = PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
-                  _b.dial_code));
-              })),
-            h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: " ", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, style: { marginTop: "2px", width: "362px" }, validationError: ({ value }) => 
-              // Naive phone number validation
-              validateBillingField(/[a-zA-Z]+/, value) &&
-                formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError), disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
-              class: classes.ErrorInput,
-              helpText: formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
-            }
-              : {}), { required: true }))),
+          h("div", { class: classes.PhoneInputsSection },
+            h("p", null, text.phoneNumber),
+            h("div", { class: classes.PhoneInputsContainer },
+              h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", value: formState.phoneNumberCountryCode, disabled: states.disabled || states.isPartner, ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
+                class: classes.ErrorInput,
+              }
+                : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("phoneCountry", e) }),
+                h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
+                    // Stop shoelace intercepting key presses
+                    e.stopPropagation();
+                  }, "onSl-input": (e) => {
+                    callbacks.setPhoneCountrySearch(e.target.value);
+                  } }), (_h = data === null || data === void 0 ? void 0 : data.phoneCountries) === null || _h === void 0 ? void 0 :
+                _h.map((c) => {
+                  var _a, _b;
+                  return (h("sl-menu-item", { value: c.countryCode },
+                    h("div", { slot: "prefix" }, `${(_a = PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
+                    _b.dial_code));
+                }), (_j = data === null || data === void 0 ? void 0 : data.allCountries) === null || _j === void 0 ? void 0 :
+                _j.map((c) => {
+                  var _a, _b;
+                  return (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } },
+                    h("div", { slot: "prefix" }, `${(_a = PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
+                    _b.dial_code));
+                })),
+              h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, validationError: ({ value }) => 
+                // Naive phone number validation
+                validateBillingField(/[a-zA-Z]+/, value) &&
+                  formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError), disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
+                class: classes.ErrorInput,
+                helpText: formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
+              }
+                : {}), { required: true })))),
           h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.address, id: "address", name: "/address", value: formState.address, validationError: ({ value }) => 
             // Checks for non-ASCII characters
             !validateBillingField(/^[\x20-\xFF]+$/, value) &&

package/dist/esm/{ShadowViewAddon-31eb5b16.js → ShadowViewAddon-e012b2aa.js}

@@ -11,7 +11,7 @@ import { l as luxonLocale } from './utils-334c1e34.js';
 import { T as TextSpanView } from './sqm-text-span-view-8d140661.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { a as isValidColor, b as isMobile } from './utilities-3f5bba22.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-ab89c6cc.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-6c582684.js';
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -109,9 +109,10 @@ const style$1 = {
       fontWeight: "var(--sl-font-weight-normal)",
     },
     "& .ellipses": {
-      textAlign: "center",
+      textAlign: "left",
       padding: "0",
       color: "var(--sl-color-neutral-500)",
+      paddingLeft: "25%",
     },
     "& .highlight": {
       background: "var(--sl-color-primary-50)",
@@ -127,6 +128,12 @@ const style$1 = {
       width: "auto",
       whiteSpace: "nowrap",
     },
+    "& .Rank": {
+      whiteSpace: "nowrap",
+    },
+    "& .fullWidth": {
+      width: "100%",
+    },
   },
 };
 const sheet$1 = createStyleSheet(style$1);
@@ -137,58 +144,76 @@ const vanillaStyle = `
   }
 `;
 function LeaderboardView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c;
   const { states, data, elements } = props;
   const { styles } = states;
-  if (states.loading)
-    return (h("div", { class: sheet$1.classes.Leaderboard },
+  if (states.isEssentials) {
+    return (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" }));
+  }
+  if (states.loading) {
+    return (h("div", { class: sheet$1.classes.Leaderboard, style: { width: styles.width || "100%" } },
       h("style", { type: "text/css" },
         styleString$1,
         vanillaStyle),
-      elements.loadingstate));
-  if (states.isEssentials)
-    return elements.essentials;
+      h("table", null, [...Array(10)].map(() => {
+        return (h("tr", null,
+          h("td", null,
+            h("sl-skeleton", null))));
+      }))));
+  }
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  return (h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base" },
+  const getUsersName = (user) => {
+    if (!user.firstName && !user.lastInitial)
+      return styles.anonymousUser;
+    const { firstName, lastInitial } = user;
+    if (firstName && lastInitial)
+      return `${firstName} ${lastInitial}`;
+    if (firstName || lastInitial)
+      return firstName || lastInitial;
+    return styles.anonymousUser;
+  };
+  const getRankCellText = (userRank, isViewingUsersRow) => {
+    if (!userRank) {
+      return styles.hideNames ? `${styles.viewingUserText}` : "-";
+    }
+    const viewingUserText = ` - ${styles.viewingUserText}`;
+    return styles.rankSuffix
+      ? intl.formatMessage({
+        id: "rank",
+        defaultMessage: styles.rankSuffix,
+      }, {
+        rank: userRank,
+      }) + `${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`
+      : `${userRank} ${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`;
+  };
+  return (h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
     h("style", { type: "text/css" },
       styleString$1,
       vanillaStyle),
-    h("div", null, "Leaderboards"),
     h("table", { part: "sqm-table" },
       h("tr", null,
-        styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
-        h("th", { class: "User" }, styles.usersheading),
+        styles.showRank && (h("th", { class: `Rank ${styles.hideNames ? "fullWidth" : ""}` }, styles.rankheading)),
+        !styles.hideNames && h("th", { class: "User" }, styles.usersheading),
         h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
       _a.map((user) => {
         var _a, _b;
         if (user.rowNumber === ((_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
           userSeenFlag = true;
-        return (h("tr", { class: !styles.hideViewer &&
-            user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber)
-            ? "highlight"
-            : "" },
-          styles.showRank && h("td", { class: "Rank" }, user.rank),
-          h("td", { class: "User" }, user.firstName && user.lastInitial
-            ? user.firstName + " " + user.lastInitial
-            : user.firstName || user.lastInitial
-              ? user.firstName || user.lastInitial
-              : styles.anonymousUser),
+        const isViewingUsersRow = !styles.hideViewer && user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber);
+        return (h("tr", { class: isViewingUsersRow ? "highlight" : "" },
+          styles.showRank && (h("td", { class: "Rank" }, getRankCellText(user.rank, isViewingUsersRow))),
+          !styles.hideNames && h("td", { class: "User" }, getUsersName(user)),
           h("td", { class: "Score" }, user.textValue)));
       }),
       !userSeenFlag && !styles.hideViewer && (h("tr", null,
         h("td", { colSpan: 100, class: "ellipses" },
           h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
       !userSeenFlag && !styles.hideViewer && (h("tr", { class: "highlight" },
-        styles.showRank && (h("td", { class: "Rank" }, ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
-        h("td", { class: "User" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
-          ? ((_e = data.viewerRank) === null || _e === void 0 ? void 0 : _e.firstName) +
-            " " + ((_f = data.viewerRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
-          : ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
-            ? ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
-            : styles.anonymousUser),
-        h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
+        styles.showRank && (h("td", { class: "Rank" }, getRankCellText((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank, true))),
+        !styles.hideNames && (h("td", { class: "User" }, getUsersName(data.viewerRank || {}))),
+        h("td", { class: "Score" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.textValue) || "0"))))));
 }
 
 const style$2 = {