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

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

@@ -54,12 +54,6 @@ 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
@@ -267,7 +261,7 @@ export class ReferralCard {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Background color",
@@ -282,8 +276,7 @@ export class ReferralCard {
         "text": ""
       },
       "attribute": "background-color",
-      "reflect": false,
-      "defaultValue": "\"#ffffff\""
+      "reflect": false
     },
     "borderColor": {
       "type": "string",

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

@@ -1,9 +1,9 @@
 import { Component, h, Prop } from "@stencil/core";
 import { DateTime } from "luxon";
-import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
-import { createStyleSheet } from "../../../styling/JSS";
 import { intl } from "../../../global/global";
+import { createStyleSheet } from "../../../styling/JSS";
 import { luxonLocale } from "../../../utils/utils";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
 export class ReferralTableRewardsCell {
   constructor() {
     this.statusText = "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
@@ -60,7 +60,7 @@ export class ReferralTableRewardsCell {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
-          background: "var(--sqm-informative-color-background)",
+          background: "var(--sqm-informative-color-icon)",
           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-background)",
+          background: "var(--sqm-danger-color-icon)",
           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-background)",
+          background: "var(--sqm-warning-color-icon)",
           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-background)",
+          background: "var(--sqm-success-color-icon)",
           color: "var(--sqm-success-color-text)",
         },
       },
@@ -312,7 +312,8 @@ export class ReferralTableRewardsCell {
         "resolved": "Reward[]",
         "references": {
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },
@@ -331,7 +332,8 @@ export class ReferralTableRewardsCell {
         "resolved": "ImpactConnection",
         "references": {
           "ImpactConnection": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },

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-background)",
+      background: "var(--sqm-informative-color-icon)",
       color: "var(--sqm-informative-color-text)",
     },
   },
@@ -24,7 +24,7 @@ const style = {
       textAlign: "center",
       maxWidth: "170px",
       whiteSpace: "pre-line",
-      background: "var(--sqm-danger-color-background)",
+      background: "var(--sqm-danger-color-icon)",
       color: "var(--sqm-danger-color-text)",
     },
   },
@@ -35,7 +35,7 @@ const style = {
       textAlign: "center",
       maxWidth: "170px",
       whiteSpace: "pre-line",
-      background: "var(--sqm-warning-color-background)",
+      background: "var(--sqm-warning-color-icon)",
       color: "var(--sqm-warning-color-text)",
     },
   },
@@ -46,7 +46,7 @@ const style = {
       textAlign: "center",
       maxWidth: "170px",
       whiteSpace: "pre-line",
-      background: "var(--sqm-success-color-background)",
+      background: "var(--sqm-success-color-icon)",
       color: "var(--sqm-success-color-text)",
     },
   },
@@ -107,11 +107,11 @@ export class ReferralTableStatusCell {
       "reflect": false
     },
     "fraudStatus": {
-      "type": "string",
+      "type": "any",
       "mutable": false,
       "complexType": {
         "original": "FraudStatus",
-        "resolved": "\"APPROVED\" | \"DENIED\" | \"PENDING\"",
+        "resolved": "any",
         "references": {
           "FraudStatus": {
             "location": "global"

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-column.js

@@ -49,7 +49,7 @@ export class ReferralTableGenericColumn {
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(_: Referral) => Promise<any>",
+        "signature": "(_: any) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-date-column.js

@@ -115,7 +115,7 @@ export class ReferralTableDateColumn {
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Referral, options?: { locale: string; }) => Promise<any>",
+        "signature": "(data: any, options?: { locale: string; }) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""
@@ -156,7 +156,7 @@ export class ReferralTableDateColumn {
     },
     "renderReferrerCell": {
       "complexType": {
-        "signature": "(data: Referrer) => Promise<any>",
+        "signature": "(data: any) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-rewards-column.js

@@ -293,7 +293,7 @@ export class ReferralTableRewardsColumn {
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Referral, options?: { locale: string; taxConnection: ImpactConnection; }) => Promise<any>",
+        "signature": "(data: any, options?: { locale: string; taxConnection: ImpactConnection; }) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""
@@ -337,7 +337,7 @@ export class ReferralTableRewardsColumn {
     },
     "renderReferrerCell": {
       "complexType": {
-        "signature": "(data: Referrer) => Promise<any>",
+        "signature": "(data: any) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-status-column.js

@@ -233,7 +233,7 @@ export class ReferralTableStatusColumn {
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Referral) => Promise<any>",
+        "signature": "(data: any) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""
@@ -274,7 +274,7 @@ export class ReferralTableStatusColumn {
     },
     "renderReferrerCell": {
       "complexType": {
-        "signature": "(data: Referrer) => Promise<any>",
+        "signature": "(data: any) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-user-column.js

@@ -143,7 +143,7 @@ export class ReferralTableUserColumn {
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Referral) => Promise<any>",
+        "signature": "(data: any) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""
@@ -181,7 +181,7 @@ export class ReferralTableUserColumn {
     },
     "renderReferrerCell": {
       "complexType": {
-        "signature": "(data: Referrer) => Promise<any>",
+        "signature": "(data: any) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

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

@@ -272,7 +272,8 @@ export class ReferralTable {
             "path": "../../tables/GenericTableView"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../saasquatch"
           }
         }
       },

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: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+          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: 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/RewardsTableCell.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import scenario1 from "./columns/sqm-rewards-table-date-column.feature";
 import scenario2 from "./columns/sqm-rewards-table-reward-column.feature";
-import scenario3 from "./columns/sqm-rewards-table-status-column.feature";
 import scenario4 from "./columns/sqm-rewards-table-source-column.feature";
+import scenario3 from "./columns/sqm-rewards-table-status-column.feature";
 const scenario = scenario1 + scenario2 + scenario3 + scenario4;
 export default {
   title: "Components/Rewards Table Cell",

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

@@ -163,11 +163,11 @@ export class RewardTableRewardsCell {
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "reward": {
-      "type": "unknown",
+      "type": "any",
       "mutable": false,
       "complexType": {
         "original": "Reward",
-        "resolved": "Reward",
+        "resolved": "any",
         "references": {
           "Reward": {
             "location": "global"
@@ -179,7 +179,9 @@ export class RewardTableRewardsCell {
       "docs": {
         "tags": [],
         "text": ""
-      }
+      },
+      "attribute": "reward",
+      "reflect": false
     },
     "redeemedText": {
       "type": "string",

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

@@ -69,11 +69,11 @@ export class RewardTableSourceCell {
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "reward": {
-      "type": "unknown",
+      "type": "any",
       "mutable": false,
       "complexType": {
         "original": "Reward",
-        "resolved": "Reward",
+        "resolved": "any",
         "references": {
           "Reward": {
             "location": "global"
@@ -85,7 +85,9 @@ export class RewardTableSourceCell {
       "docs": {
         "tags": [],
         "text": ""
-      }
+      },
+      "attribute": "reward",
+      "reflect": false
     },
     "deletedUserText": {
       "type": "string",

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-background)",
+      background: "var(--sqm-informative-color-icon)",
       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-background)",
+      background: "var(--sqm-danger-color-icon)",
       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-background)",
+      background: "var(--sqm-warning-color-icon)",
       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-background)",
+      background: "var(--sqm-success-color-icon)",
       color: "var(--sqm-success-color-text)",
     },
   },
@@ -202,20 +202,6 @@ export class RewardTableStatusCell {
         ? this.deniedText
         : null;
     const getBadgeCSSClass = (badgeType) => {
-      console.log("badgeType", badgeType);
-      // switch (badgeType) {
-      //   case "primary":
-      //     return sheet.classes.RedeemBadge;
-      //   case "danger":
-      //     return sheet.classes.DangerBadge;
-      //   case "success":
-      //     return sheet.classes.SuccessBadge;
-      //   case "warning":
-      //   case "info":
-      //     return sheet.classes.WarningBadge;
-      //   default:
-      //     return sheet.classes.WarningBadge;
-      // }
       switch (rewardStatus) {
         case "AVAILABLE":
           return sheet.classes.SuccessBadge;
@@ -232,13 +218,7 @@ export class RewardTableStatusCell {
     const badgeCSSClass = getBadgeCSSClass(badgeType);
     return (h("div", { style: { display: "contents" } },
       h("style", { type: "text/css" }, styleString),
-      h("sl-badge", { type: badgeType, pill: true, 
-        // class={
-        //   rewardStatus === "REDEEMED" || rewardStatus === "PAYOUT_APPROVED"
-        //     ? sheet.classes.RedeemBadge
-        //     : sheet.classes.Badge
-        // }
-        class: badgeCSSClass }, statusText),
+      h("sl-badge", { type: badgeType, pill: true, class: badgeCSSClass }, statusText),
       h("p", { class: sheet.classes.Date }, fraudStatusText ||
         pendingReasons ||
         this.getPayoutStatusText(rewardStatus) ||
@@ -283,11 +263,11 @@ export class RewardTableStatusCell {
       "reflect": false
     },
     "reward": {
-      "type": "unknown",
+      "type": "any",
       "mutable": false,
       "complexType": {
         "original": "Reward",
-        "resolved": "Reward",
+        "resolved": "any",
         "references": {
           "Reward": {
             "location": "global"
@@ -299,14 +279,16 @@ export class RewardTableStatusCell {
       "docs": {
         "tags": [],
         "text": ""
-      }
+      },
+      "attribute": "reward",
+      "reflect": false
     },
     "taxConnection": {
-      "type": "unknown",
+      "type": "any",
       "mutable": false,
       "complexType": {
         "original": "ImpactConnection",
-        "resolved": "ImpactConnection",
+        "resolved": "any",
         "references": {
           "ImpactConnection": {
             "location": "global"
@@ -318,7 +300,9 @@ export class RewardTableStatusCell {
       "docs": {
         "tags": [],
         "text": ""
-      }
+      },
+      "attribute": "tax-connection",
+      "reflect": false
     },
     "expiryText": {
       "type": "string",

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-date-column.js

@@ -95,7 +95,7 @@ export class RewardTableDateColumn {
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Reward, options?: { locale: string; }) => Promise<any>",
+        "signature": "(data: any, options?: { locale: string; }) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.js

@@ -56,7 +56,7 @@ export class RewardTableCustomerNoteColumn {
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Reward, options?: { locale: string; }) => Promise<any>",
+        "signature": "(data: any, options?: { locale: string; }) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.js

@@ -134,7 +134,7 @@ export class RewardsTableColumn {
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Reward, options?: { locale: string; }) => Promise<any>",
+        "signature": "(data: any, options?: { locale: string; }) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.js

@@ -202,7 +202,7 @@ export class RewardTableUserColumn {
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Reward, options?: { locale: string; }) => Promise<any>",
+        "signature": "(data: any, options?: { locale: string; }) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js

@@ -442,7 +442,7 @@ export class RewardTableStatusColumn {
   static get methods() { return {
     "renderCell": {
       "complexType": {
-        "signature": "(data: Reward, options?: { locale: string; taxConnection: ImpactConnection; }) => Promise<any>",
+        "signature": "(data: any, options?: { locale: string; taxConnection: ImpactConnection; }) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table.js

@@ -224,7 +224,7 @@ export class RewardsTable {
       "mutable": false,
       "complexType": {
         "original": "DemoData<GenericTableViewProps> & {\n    mockData?: { data: Referral[] };\n  }",
-        "resolved": "Partial<Pick<GenericTableViewProps, \"states\" | \"data\" | \"elements\">> & { mockData?: { data: Referral[]; }; }",
+        "resolved": "Partial<Pick<GenericTableViewProps, \"states\" | \"data\" | \"elements\">> & { mockData?: { data: any[]; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -1,12 +1,10 @@
-import { useState, withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Host } from "@stencil/core";
+import { Component, State, 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",
@@ -25,19 +23,37 @@ export class SqmBrandSelector {
         logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803168/pngimg.com_-_google_PNG19644_jvypwl.png",
       },
     ];
-    withHooks(this); // Initialize hooks for this component instance
+    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;
   }
   disconnectedCallback() { }
-  // Handler function for when a brand logo is clicked
-  // private handleBrandClick = (brandName: string) => {
-  // };
+  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);
+  }
   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');
@@ -52,13 +68,15 @@ 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: 500px;
+            max-width: 350px;
             overflow: hidden;
-            padding: 20px 10px;
-            position: absolute;
-            top: 0;
+            padding: 10px;
+            position: fixed;
+            bottom: 0;
             right: 0;
             z-index: 999999;
+            border: 1px solid #ccc;
+            margin: 10px;
           }
 
           .card-heading {
@@ -68,6 +86,7 @@ export class SqmBrandSelector {
             padding-bottom: 10px;
             color: black;
             margin: 0;
+            font-size: 16px;
           }
 
           .segmented-control-container {
@@ -87,7 +106,7 @@ export class SqmBrandSelector {
             align-items: center;
             justify-content: center;
             flex: 1;
-            padding 4px 8px
+            padding: 0px 8px; 
             cursor: pointer;
             transition: all 300ms ease-in-out;
             border-radius: 9999px;
@@ -164,16 +183,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) => (
-        // Individual brand segment/pill
-        h("div", { key: brand.name, class: `brand-segment ${selectedBrand === brand.name ? "active" : ""}`, onClick: () => handleBrandClick(brand.name) },
+        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("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": {}
+  }; }
 }