@saasquatch/mint-components 1.15.0-42 → 1.15.0-43

package/dist/collection/components/sqm-asset-card/sqm-asset-card.js

@@ -0,0 +1,107 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, Prop, h, State } from "@stencil/core";
+import { AssetCardView } from "./sqm-asset-card-view";
+import { useAssetCard } from "./useAssetCard";
+import deepmerge from "deepmerge";
+/**
+ * @uiName Asset Card
+ */
+export class AssetCard {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = isDemo() ? useAssetCardDemo(this) : useAssetCard(this);
+    return h(AssetCardView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-asset-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get assetsDirs() { return ["../../assets"]; }
+  static get properties() { return {
+    "titleText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Banner title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "title-text",
+      "reflect": false
+    },
+    "imgUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Banner image",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "img-url",
+      "reflect": false
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<AssetCardViewProps>",
+        "resolved": "{ imgUrl?: string; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "AssetCardViewProps": {
+            "location": "import",
+            "path": "./sqm-asset-card-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useAssetCardDemo(props) {
+  return deepmerge({
+    text: {
+      titleText: "Marketing Banner",
+    },
+    imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
+    callbacks: {},
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-asset-card/useAssetCard.js

@@ -0,0 +1,9 @@
+export const useAssetCard = (_props) => {
+  return {
+    text: {
+      titleText: "Marketing Banner",
+    },
+    imgUrl: null,
+    callbacks: {},
+  };
+};

package/dist/collection/components/sqm-edit-profile/sqm-edit-profile-view.js

@@ -32,7 +32,7 @@ const EditProfileView = (props) => {
             }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext),
           h("sl-button", { onClick: () => {
               callbacks.setShowEdit(false);
-            }, type: "secondary", exportparts: "base: secondarybutton-base" }, text.canceltext)))));
+            }, exportparts: "base: secondarybutton-base" }, text.canceltext)))));
   }
   return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
     h("div", { class: "FormSection" },

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard-view.js

@@ -21,7 +21,7 @@ export function LeaderboardView(props) {
         fontWeight: "var(--sl-font-weight-semibold)",
       },
       "& tr:not(:first-child)": {
-        borderTop: `var(--sqm-bordr-thickness) solid ${styles.borderColor || "var(--sqm-border-color)"}`,
+        borderTop: `1px solid ${styles.borderColor || "var(--sl-color-neutral-200)"}`,
       },
       "& td": {
         fontSize: "var(--sl-font-size-medium)",

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password-view.js

@@ -66,13 +66,13 @@ export function PortalChangePasswordView(props) {
               h("sl-input", { exportparts: "label: input-label, base: input-base", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
             h(PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
               h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", exportparts: "base: primarybutton-base", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
-              h("sl-button", { class: sheet.classes.CancelButton, type: "secondary", exportparts: "base: secondarybutton-base", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
+              h("sl-button", { class: sheet.classes.CancelButton, type: "text", exportparts: "base: secondarybutton-base", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
       }))),
     h(PortalSectionView, Object.assign({}, {
       labelMargin: "x-large",
       padding: "xxx-large",
       label: (h(TextSpanView, Object.assign({}, { type: "h2" }), states.content.portalChangePasswordHeader)),
-      content: (h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
+      content: (h("sl-button", { exportparts: "base: primarybutton-base", onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
     }),
       h("style", { type: "text/css" }, styleString))));
 }

package/dist/collection/components/sqm-portal-login/PortalLogin.stories.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { PortalLoginView } from "./sqm-portal-login-view";
 export default {
   title: "Components/Microsite Login",
 };
@@ -47,17 +48,13 @@ const loadingProps = {
     pageLabel: "Sign in to your account",
   },
 };
-const googleProps = {
-  ...defaultProps,
-  content: {
+export const Default = () => (h("sqm-portal-login", { demoData: { ...defaultProps } }));
+export const IsGoogle = () => (h(PortalLoginView, Object.assign({}, defaultProps, { content: {
     secondaryButton: (h("span", null,
       "Don't have an account?",
       " ",
       h("sl-button", { style: { width: "50px" }, size: "large", type: "text" }, "Register"))),
     googleButton: h("sl-button", null, "Sign in with Google"),
-  },
-};
-export const Default = () => (h("sqm-portal-login", { demoData: { ...defaultProps } }));
-export const IsGoogle = () => (h("sqm-portal-login", { demoData: { ...googleProps } }));
-export const LoginWithError = () => (h("sqm-portal-login", { demoData: { ...errorProps } }));
-export const LoginLoading = () => (h("sqm-portal-login", { demoData: { ...loadingProps } }));
+  } })));
+export const LoginWithError = () => h(PortalLoginView, Object.assign({}, errorProps));
+export const LoginLoading = () => h(PortalLoginView, Object.assign({}, loadingProps));

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

@@ -87,7 +87,7 @@ export class PortalLogin {
       googleButton: null,
       secondaryButton: (h("slot", { name: "secondaryButton" },
         h("style", null, styleString),
-        h("sl-button", { exportparts: "base: tertiarybutton-base", type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel))),
+        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,

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

@@ -10,7 +10,7 @@ import { usePortalRegister } from "./usePortalRegister";
  */
 export class PortalRegister {
   constructor() {
-    this.ignored = false;
+    this.ignored = true;
     /**
      * Redirect participants to this page from their verification email
      *
@@ -151,6 +151,7 @@ export class PortalRegister {
     return (h(PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
   static get is() { return "sqm-portal-register"; }
+  static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "nextPage": {
       "type": "string",

package/dist/collection/components/sqm-referral-card/sqm-referral-card.js

@@ -54,6 +54,12 @@ export class ReferralCard {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingLeft = "large";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.backgroundColor = "#ffffff";
     /**
      * @uiName Limit width
      * @uiType boolean
@@ -261,7 +267,7 @@ export class ReferralCard {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Background color",
@@ -276,7 +282,8 @@ export class ReferralCard {
         "text": ""
       },
       "attribute": "background-color",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"#ffffff\""
     },
     "borderColor": {
       "type": "string",

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.js

@@ -60,7 +60,7 @@ export class ReferralTableRewardsCell {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
-          background: "var(--sqm-informative-color-icon)",
+          background: "var(--sqm-informative-color-background)",
           color: "var(--sqm-informative-color-text)",
         },
       },
@@ -70,7 +70,7 @@ export class ReferralTableRewardsCell {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
-          background: "var(--sqm-danger-color-icon)",
+          background: "var(--sqm-danger-color-background)",
           color: "var(--sqm-danger-color-text)",
         },
       },
@@ -80,7 +80,7 @@ export class ReferralTableRewardsCell {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
-          background: "var(--sqm-warning-color-icon)",
+          background: "var(--sqm-warning-color-background)",
           color: "var(--sqm-warning-color-text)",
         },
       },
@@ -90,7 +90,7 @@ export class ReferralTableRewardsCell {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
-          background: "var(--sqm-success-color-icon)",
+          background: "var(--sqm-success-color-background)",
           color: "var(--sqm-success-color-text)",
         },
       },

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-status-cell.js

@@ -13,7 +13,7 @@ const style = {
       textAlign: "center",
       maxWidth: "170px",
       whiteSpace: "pre-line",
-      background: "var(--sqm-informative-color-icon)",
+      background: "var(--sqm-informative-color-background)",
       color: "var(--sqm-informative-color-text)",
     },
   },
@@ -24,7 +24,7 @@ const style = {
       textAlign: "center",
       maxWidth: "170px",
       whiteSpace: "pre-line",
-      background: "var(--sqm-danger-color-icon)",
+      background: "var(--sqm-danger-color-background)",
       color: "var(--sqm-danger-color-text)",
     },
   },
@@ -35,7 +35,7 @@ const style = {
       textAlign: "center",
       maxWidth: "170px",
       whiteSpace: "pre-line",
-      background: "var(--sqm-warning-color-icon)",
+      background: "var(--sqm-warning-color-background)",
       color: "var(--sqm-warning-color-text)",
     },
   },
@@ -46,7 +46,7 @@ const style = {
       textAlign: "center",
       maxWidth: "170px",
       whiteSpace: "pre-line",
-      background: "var(--sqm-success-color-icon)",
+      background: "var(--sqm-success-color-background)",
       color: "var(--sqm-success-color-text)",
     },
   },

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js

@@ -495,7 +495,7 @@ export function RewardExchangeView(props) {
             ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h("div", null, input)),
             h("div", { class: "space" }))),
         h("div", { class: sheet.classes.Button },
-          h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "secondary", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+          h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
           h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
   function confirmation() {

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.js

@@ -18,7 +18,7 @@ const style = {
       fontSize: "var(--sl-font-size-small)",
       textAlign: "center",
       whiteSpace: "pre-line",
-      background: "var(--sqm-informative-color-icon)",
+      background: "var(--sqm-informative-color-background)",
       color: "var(--sqm-informative-color-text)",
     },
   },
@@ -28,7 +28,7 @@ const style = {
       fontSize: "var(--sl-font-size-small)",
       textAlign: "center",
       whiteSpace: "pre-line",
-      background: "var(--sqm-danger-color-icon)",
+      background: "var(--sqm-danger-color-background)",
       color: "var(--sqm-danger-color-text)",
     },
   },
@@ -38,7 +38,7 @@ const style = {
       fontSize: "var(--sl-font-size-small)",
       textAlign: "center",
       whiteSpace: "pre-line",
-      background: "var(--sqm-warning-color-icon)",
+      background: "var(--sqm-warning-color-background)",
       color: "var(--sqm-warning-color-text)",
     },
   },
@@ -48,7 +48,7 @@ const style = {
       fontSize: "var(--sl-font-size-small)",
       textAlign: "center",
       whiteSpace: "pre-line",
-      background: "var(--sqm-success-color-icon)",
+      background: "var(--sqm-success-color-background)",
       color: "var(--sqm-success-color-text)",
     },
   },

package/dist/collection/components/sqm-stencilbook/BrandSelector.js

@@ -1,10 +1,12 @@
-import { Component, State, h, Host } from "@stencil/core";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host } from "@stencil/core";
 import * as Themes from "./Themes";
-const LOCAL_STORAGE_BRAND_KEY = "localStorageBrandKey";
-const LOCAL_STORAGE_BRAND_CONFIG_KEY = "localStorageBrandConfigKey";
 export class SqmBrandSelector {
+  // State to keep track of the currently selected brand
+  // Array of brand objects, each containing a name and an image URL.
+  // Using placeholder images for now. In a real application, you would
+  // replace these with actual logo URLs or local assets.
   constructor() {
-    this.selectedBrand = "Netflix";
     this.brands = [
       {
         name: "Netflix",
@@ -23,37 +25,19 @@ export class SqmBrandSelector {
         logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803168/pngimg.com_-_google_PNG19644_jvypwl.png",
       },
     ];
-    const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY);
-    const initialBrandName = storedBrand;
-    this.selectedBrand = initialBrandName;
-    // Initialize window.SquatchBrandingConfig based on the loaded brand
-    const initialConfig = Themes[initialBrandName] || Themes.Netflix;
-    window.SquatchBrandingConfig = initialConfig;
-    const event = new CustomEvent("brandingConfigUpdated", {
-      detail: window.SquatchBrandingConfig,
-    });
-    window.dispatchEvent(event);
-  }
-  componentDidLoad() {
-    const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY);
-    const initialBrandName = storedBrand;
-    this.selectedBrand = initialBrandName;
+    withHooks(this); // Initialize hooks for this component instance
   }
   disconnectedCallback() { }
-  updateBrand(brandName) {
-    this.selectedBrand = brandName;
-    const configToSet = Themes[brandName] || Themes.Netflix;
-    const brandConfigString = JSON.stringify(configToSet);
-    localStorage.setItem(LOCAL_STORAGE_BRAND_KEY, brandName);
-    localStorage.setItem(LOCAL_STORAGE_BRAND_CONFIG_KEY, brandConfigString);
-    window.SquatchBrandingConfig = configToSet;
-    window.location.reload();
-    const event = new CustomEvent("brandingConfigUpdated", {
-      detail: window.SquatchBrandingConfig,
-    });
-    window.dispatchEvent(event);
-  }
+  // Handler function for when a brand logo is clicked
+  // private handleBrandClick = (brandName: string) => {
+  // };
   render() {
+    const [selectedBrand, setSelectedBrand] = useState("Default");
+    const themes = Object.keys(Themes);
+    const theme = Themes[selectedBrand];
+    const handleBrandClick = (brandName) => {
+      setSelectedBrand(brandName);
+    };
     return (h(Host, null,
       h("style", null, `
           @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@@ -68,14 +52,13 @@ export class SqmBrandSelector {
             border-radius: 18px; 
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 
             width: 100%;
-            max-width: 350px;
+            max-width: 500px;
             overflow: hidden;
-            padding: 10px;
+            padding: 20px 10px;
             position: absolute;
-            bottom: 0;
+            top: 0;
             right: 0;
             z-index: 999999;
-            border: 1px solid #ccc;
           }
 
           .card-heading {
@@ -104,7 +87,7 @@ export class SqmBrandSelector {
             align-items: center;
             justify-content: center;
             flex: 1;
-            padding: 4px 8px; /* Fixed spacing syntax */
+            padding 4px 8px
             cursor: pointer;
             transition: all 300ms ease-in-out;
             border-radius: 9999px;
@@ -181,16 +164,16 @@ export class SqmBrandSelector {
               }
           }
           `),
+      h("style", null, theme),
       h("div", { class: "card-container" },
         h("h2", { class: "card-heading" }, "Select Branding"),
-        h("div", { class: "segmented-control-container" }, this.brands.map((brand) => (h("div", { key: brand.name, class: `brand-segment ${this.selectedBrand === brand.name ? "active" : ""}`, onClick: () => this.updateBrand(brand.name) },
+        h("div", { class: "segmented-control-container" }, this.brands.map((brand) => (
+        // Individual brand segment/pill
+        h("div", { key: brand.name, class: `brand-segment ${selectedBrand === brand.name ? "active" : ""}`, onClick: () => handleBrandClick(brand.name) },
           h("img", { src: brand.logoUrl, alt: `${brand.name} Logo`, class: "brand-logo", onError: (e) => {
               e.target.src =
                 "https://placehold.co/80x40/cccccc/000000?text=Logo";
             } }))))))));
   }
   static get is() { return "sqm-brand-selector"; }
-  static get states() { return {
-    "selectedBrand": {}
-  }; }
 }