@saasquatch/mint-components 1.15.0-4 → 1.15.0-41

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

@@ -1,23 +1,24 @@
 import { h } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
-import { GeneralLoadingView } from "../TaxForm.stories";
-import { FORM_STEPS } from "../sqm-tax-and-cash/data";
-import { formatErrorMessage, validateBillingField } from "../utils";
+// import { GeneralLoadingView } from "../TaxForm.stories";
+import { FORM_STEPS } from "../data";
 import { PHONE_EXTENSIONS } from "../phoneExtensions";
+import LoadingView from "../sqm-tax-and-cash/LoadingView";
+import { formatErrorMessage, validateBillingField } from "../utils";
 const style = {
   FormWrapper: {},
   ErrorInput: {
     "&::part(base)": {
-      border: "1px solid var(--sl-color-danger-500)",
+      border: "1px solid var(--sqm-danger-color-icon)",
       borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   TextContainer: {
@@ -48,9 +49,6 @@ const style = {
     justifyContent: "flex-start",
     flexDirection: "column",
   },
-  DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
-  },
   BoldText: {
     fontWeight: "bold",
   },
@@ -61,26 +59,31 @@ const style = {
   },
   AlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      color: "var(--sqm-danger-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   PartnerAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
       padding: "0 16px",
+      border: "none",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
   PhoneInputsSection: {
@@ -114,11 +117,15 @@ const vanillaStyle = `
        padding: 0;
        box-sizing: border-box;
     }
+    a {
+      color: var(--sqm-text);
+      color: inherit !important;
+      text-decoration: underline;
+    }
 
     p {
       line-height: 18px;
-      color: var(--sl-color-gray-800);
-       font-size: var(--sl-font-size-small);
+      font-size: var(--sl-font-size-small);
     }
 
     sl-radio-group::part(base) {
@@ -129,7 +136,153 @@ const vanillaStyle = `
     sl-select#phoneNumberCountryCode::part(menu) {
       min-width: 250px;
     }
-  `;
+
+    /* Corrected: Target sl-button::part(base) for primary button */
+    sl-button[type="primary"]::part(base){
+        background-color: var(--sqm-primary-button-background);
+        color: var(--sqm-primary-button-color);
+        border-color: var(--sqm-primary-button-color-border);
+        border-radius: var(--sqm-primary-button-radius);
+    }
+
+    sl-button[type="primary"]::part(base):hover{
+        background-color: var(--sqm-primary-button-background-hover);
+    }
+
+    sl-button[type="primary"]::part(base):focus{
+        box-shadow: none;
+    }
+
+    /* Corrected: Target sl-button::part(base) for secondary button */
+    sl-button[type="secondary"]::part(base){
+        background-color: var(--sqm-secondary-button-background);
+        color: var(--sqm-secondary-button-color);
+        border-color: var(--sqm-secondary-button-color-border);
+        border-radius: var(--sqm-secondary-button-radius);
+    }
+
+    sl-button[type="secondary"]::part(base):hover{
+        background-color: var(--sqm-secondary-button-background-hover);
+    }
+
+    /* Corrected: Target sl-button::part(base) for tertiary button */
+    sl-button[type="tertiary"]::part(base){
+        color: var(--sqm-text, var(--sl-color-neutral-800));
+        width: max-content;
+        display: flex;
+        margin: auto;
+    }
+
+*::part(primarybutton-base){
+  background-color: var(--sqm-primary-button-background);
+  color: var(--sqm-primary-button-color);
+  border-color: var(--sqm-primary-button-color-border);
+  border-radius: var(--sqm-primary-button-radius);
+}
+
+*::part(primarybutton-base):hover{
+  background-color: var(--sqm-primary-button-background-hover);
+}
+
+*::part(primarybutton-base):focus{
+  box-shadow: none;
+}
+
+*::part(secondarybutton-base){
+  background-color: var(--sqm-secondary-button-background);
+  color: var(--sqm-secondary-button-color);
+  border-color: var(--sqm-secondary-button-color-border);
+  border-radius: var(--sqm-secondary-button-radius);
+}
+
+*::part(secondarybutton-base):hover{
+  background-color: var(--sqm-secondary-button-background-hover);
+}
+
+*::part(tertiarybutton-base){
+  background-color: var(--sqm-tertiary-button-background);
+  color: var(--sqm-tertiary-button-color);
+  border-color: var(--sqm-tertiary-button-color-border);
+  border-radius: var(--sqm-tertiary-button-radius);
+  width: max-content;
+  display: flex;
+  margin: auto;
+}
+
+*::part(tertiarybutton-base):hover{
+  background: var(--sqm-tertiary-button-background-hover);
+}
+
+    sl-input::part(label),
+    sl-select::part(label),
+    sl-textarea::part(label){
+      font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
+      font-weight: var(--sl-font-weight-semibold);
+      color: var(--sqm-input-label-color, var(--sqm-text), black);
+    }
+
+    /* Corrected: Target sl-input, sl-select, sl-textarea base elements */
+    sl-input::part(base),
+    sl-dropdown::part(base),
+    sl-textarea::part(base){
+      background-color: var(--sqm-input-background, #fff);
+      border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+      color: var(--sqm-input-color, white);
+      border-width: var(--sqm-border-width, 1px);
+      border-style: solid; 
+      border-color: var(--sqm-input-border-color, #ccc); 
+    }
+
+
+    sl-select::part(menu) {
+      background: var(--sqm-input-background, inherit);
+      color: var(--sqm-input-color, inherit);
+      border:none;
+    }
+
+    sl-select::part(panel) {
+      border-radius: var(--sqm-border-radius-normal);
+    }
+
+    sl-select::part(help-text) {
+      color: var(--sqm-text-subdued, var(--sl-input-help-text-color, #6c757d));
+    }
+
+    sl-input::part(base):focus,
+    sl-select::part(base):focus, /* Corrected part name for sl-select */
+    sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */
+      border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */
+    }
+
+    sl-input[disabled]::part(label),
+    sl-select[disabled]::part(label),
+    sl-textarea[disabled]::part(label){
+      color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+    }
+
+    sl-input[disabled]::part(base),
+    sl-select[disabled]::part(base),
+    sl-textarea[disabled]::part(base){
+      background: var(--sqm-input-disabled-background, #f5f5f5);
+      border-color: var(--sl-input-border-color-disabled, #e0e0e0); /* Example disabled border color */
+    }
+
+
+    sl-input::part(input):-webkit-autofill {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:hover {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:focus {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+`;
 export const UserInfoFormView = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const { states, states: { formState }, callbacks, text, refs, data, } = props;
@@ -170,7 +323,7 @@ export const UserInfoFormView = (props) => {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })),
       h("br", null))),
-    states.loading ? (h(GeneralLoadingView, null)) : (h("div", null,
+    states.loading ? (h(LoadingView, null)) : (h("div", null,
       h("div", { class: classes.TextContainer },
         h("div", null,
           !states.hideSteps && (h("p", null, intl.formatMessage({
@@ -201,7 +354,7 @@ export const UserInfoFormView = (props) => {
         }))),
       h("div", null,
         h("div", { class: classes.InputContainer },
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+          h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.firstName, formState.errors.firstName),
           }

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

@@ -1,9 +1,10 @@
 import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, Host, Prop, State, h } from "@stencil/core";
+import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { parseStates } from "../../../utils/parseStates";
 import { getProps } from "../../../utils/utils";
-import { TAX_CONTEXT_NAMESPACE } from "../sqm-tax-and-cash/data";
+import { TAX_CONTEXT_NAMESPACE } from "../data";
 import { UserInfoFormView } from "./sqm-user-info-form-view";
 import { useUserInfoForm } from "./useUserInfoForm";
 /**
@@ -163,6 +164,13 @@ export class TaxForm {
      * @uiName Support link text
      */
     this.supportLink = "support team";
+    /**
+     * @uiName States
+     * @parentState { "parent": "sqm-tax-and-cash", "title": "Step 1" }
+     * @componentState { "title": "Errors", "props": { "states": { "loadingError": true, "formState": { "errors": { "email": true, "firstName": true, "lastName": true, "countryCode": true, "currency": true } } } } }
+     * @componentState { "title": "Loading", "props": { "states": { "loading": true } } }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -183,13 +191,12 @@ export class TaxForm {
   }
   render() {
     const props = isDemo() ? useDemoUserInfoForm(this) : useUserInfoForm(this);
-    return (h(Host, null,
-      h(UserInfoFormView, { data: props.data, 
-        // @ts-ignore
-        states: props.states, callbacks: {
-          ...props.callbacks,
-          onSubmit: props.onSubmit,
-        }, text: props.text, refs: props.refs })));
+    return (h(UserInfoFormView, { data: props.data, 
+      // @ts-ignore
+      states: props.states, callbacks: {
+        ...props.callbacks,
+        onSubmit: props.onSubmit,
+      }, text: props.text, refs: props.refs }));
   }
   static get is() { return "sqm-user-info-form"; }
   static get encapsulation() { return "shadow"; }
@@ -887,6 +894,36 @@ export class TaxForm {
       "reflect": false,
       "defaultValue": "\"support team\""
     },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "States",
+            "name": "uiName"
+          }, {
+            "text": "{ \"parent\": \"sqm-tax-and-cash\", \"title\": \"Step 1\" }",
+            "name": "parentState"
+          }, {
+            "text": "{ \"title\": \"Errors\", \"props\": { \"states\": { \"loadingError\": true, \"formState\": { \"errors\": { \"email\": true, \"firstName\": true, \"lastName\": true, \"countryCode\": true, \"currency\": true } } } } }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Loading\", \"props\": { \"states\": { \"loading\": true } } }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -924,9 +961,10 @@ export class TaxForm {
 }
 function useDemoUserInfoForm(props) {
   const setStep = useSetParent(TAX_CONTEXT_NAMESPACE);
+  // @ts-ignore
   return deepmerge({
     setStep,
-    onSubmit: () => {
+    onSubmit: async () => {
       setStep("/2");
     },
     onRadioClick: () => { },
@@ -966,5 +1004,5 @@ function useDemoUserInfoForm(props) {
         },
       },
     },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || parseStates(props.stateController) || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -1,9 +1,9 @@
+import { useParent, useParentQueryValue, useParentValue, } from "@saasquatch/component-boilerplate";
 import { useEffect, useMemo, useRef, useState, } from "@saasquatch/universal-hooks";
 import jsonpointer from "jsonpointer";
-import { CURRENCIES_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
-import { objectIsFull } from "../utils";
-import { useParent, useParentQueryValue, useParentValue, } from "@saasquatch/component-boilerplate";
+import { CURRENCIES_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
 import { ADDRESS_REGIONS } from "../subregions";
+import { objectIsFull } from "../utils";
 export function useUserInfoForm(props) {
   var _a, _b, _c, _d;
   const currencyRef = useRef(undefined);

package/dist/collection/components/views/copy-text-view.js

@@ -1,41 +1,6 @@
 import { h } from "@stencil/core";
 import { HostBlock } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  HostBlock: HostBlock,
-  inputStyle: {
-    "&::part(input)": { textOverflow: "ellipsis", width: "100%" },
-    "&::part(base)": { cursor: "pointer", overflow: "visible" },
-    width: "100%",
-  },
-  inputErrorStyle: {
-    "&::part(base)": {
-      border: "2px solid red",
-    },
-  },
-  ContainerDiv: {
-    display: "flex",
-    alignItems: "flex-start",
-    flexDirection: "column",
-    justifyContent: "center",
-    gap: "var(--sl-spacing-x-small)",
-    width: "100%",
-  },
-  containerStyle: {
-    display: "flex",
-    alignItems: "center",
-    gap: "var(--sl-spacing-x-small)",
-    width: "100%",
-  },
-  errorTextStyle: {
-    margin: "0",
-    color: "var(--sl-color-danger-500)",
-  },
-  notificationTextStyle: {
-    margin: "0",
-    color: "var(--sl-color-neutral-500)",
-  },
-};
 const vanillaStyle = `
   :host{
     display: block;   
@@ -58,10 +23,60 @@ const disabledStyles = `
     cursor: default;
   }
 `;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
 export function CopyTextView(props) {
   const { buttonStyle = "icon" } = props;
+  const style = {
+    HostBlock: HostBlock,
+    inputStyle: {
+      "&::part(input)": {
+        textOverflow: "ellipsis",
+        width: "100%",
+        color: props.textColor || "var(--sqm-text)",
+      },
+      "&::part(base)": {
+        cursor: "pointer",
+        overflow: "visible",
+        borderRadius: `${props.borderRadius}px` || "var(--sl-border-radius-medium)",
+        background: props.backgroundColor || "var(--sl-color-white)",
+        border: `1px solid ${props.borderColor || "transparent"}`,
+      },
+      width: "100%",
+    },
+    icon: {
+      "&::part(base)": {
+        color: props.textColor || "var(--sqm-text)",
+      },
+    },
+    inputErrorStyle: {
+      "&::part(base)": {
+        border: "2px solid red",
+      },
+    },
+    ContainerDiv: {
+      display: "flex",
+      alignItems: "flex-start",
+      flexDirection: "column",
+      justifyContent: "center",
+      gap: "var(--sl-spacing-x-small)",
+      width: "100%",
+    },
+    containerStyle: {
+      display: "flex",
+      alignItems: "center",
+      gap: "var(--sl-spacing-x-small)",
+      width: "100%",
+    },
+    errorTextStyle: {
+      margin: "0",
+      color: "var(--sqm-danger-color-text)",
+    },
+    notificationTextStyle: {
+      margin: "0",
+      color: "inherit",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   const error = !props.loading && props.error;
   const inputText = error ? props.inputPlaceholderText : props.copyString;
   const disabled = error || props.loading || props.disabled;
@@ -70,7 +85,7 @@ export function CopyTextView(props) {
     : props.buttonStyle === "button-outside"
       ? "top"
       : "top-end";
-  const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { exportparts: "base: copy-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
+  const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { class: sheet.classes.icon, exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { exportparts: `base: ${props.buttonType || "primary"}button-base`, onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
   return (h("div", { class: sheet.classes.ContainerDiv },
     h("style", { type: "text/css" },
       styleString,

package/dist/collection/components/views/email-registration-view.js

@@ -43,7 +43,7 @@ export function EmailRegistrationView(props) {
   };
   const emailValidationRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return (h("div", { part: "sqm-base", class: sheet.classes.Wrapper, style: {
-      border: `${content.hideBorder ? "none" : "1px solid #eaeaea"}`,
+      border: `${content.hideBorder ? "none" : "1px solid var(--sqm-border-color)"}`,
       backgroundColor: content.backgroundColor,
       "padding-top": `var(--sl-spacing-${content.paddingTop})`,
       "padding-right": `var(--sl-spacing-${content.paddingRight})`,

package/dist/collection/global/mixins.js

@@ -24,10 +24,10 @@ export const HostBlock = {
 };
 export const P = {
   "font-size": "var(--sl-font-size-small)",
-  color: "var(--sl-color-gray-800)",
+  color: "var(--sqm-text)",
   "margin-top": "0px",
   "&.Subtitle": {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     margin: "0px",
   },
 };
@@ -62,20 +62,20 @@ export const ErrorStyles = {
   },
 };
 export const Wrapper = {
-  "box-sizing": "border-box",
+  boxSizing: "border-box",
   width: "100%",
-  "max-width": "var(--sqm-content-max-width)",
+  maxWidth: "var(--sqm-content-max-width)",
   height: "auto",
-  "background-color": "var(--sqm-content-background)",
   display: "flex",
   padding: "var(--sl-spacing-xxx-large)",
-  border: "1px solid #eaeaea",
-  "border-radius": "8px",
+  background: "var(--sqm-portal-background)",
+  border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+  borderRadius: "var(--sqm-border-radius-normal)",
 };
 export const AuthWrapper = {
   margin: "auto",
   ...Wrapper,
-  "max-width": "500px",
+  maxWidth: "500px",
   ...Column,
   ...gap({ direction: "column", size: "var(--sl-spacing-x-large)" }),
 };