@saasquatch/mint-components 1.12.1-4 → 1.12.1-6

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js

@@ -10,7 +10,7 @@ import { useCheckboxField } from "./useCheckboxField";
  * @uiName Form Checkbox Field
  * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
  * @exampleGroup Microsite Components
- * @example Form Checkbox Field - <sqm-checkbox-field checkbox-name="terms" checkbox-label="By signing up you agree to the {labelLink}" checkbox-label-link="https://example.com" checkbox-label-link-text="Terms and Conditions" error-message="Must be checked" ></sqm-checkbox-field>
+ * @example Form Checkbox Field - <sqm-checkbox-field checkbox-label="By signing up you agree to the {labelLink}" checkbox-label-link="https://example.com" checkbox-label-link-text="Terms and Conditions" error-message="Must be checked" ></sqm-checkbox-field>
  */
 export class CheckboxField {
   constructor() {
@@ -70,7 +70,7 @@ export class CheckboxField {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Checkbox name attribute",
@@ -117,7 +117,7 @@ export class CheckboxField {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Checkbox label link",
@@ -138,7 +138,7 @@ export class CheckboxField {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Checkbox label link lext",
@@ -159,7 +159,7 @@ export class CheckboxField {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Unchecked error message",
@@ -197,7 +197,7 @@ export class CheckboxField {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CheckboxFieldViewProps>",
-        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; checked: boolean; }; content?: { checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage?: string; }; }",
+        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-coupon-code/sqm-coupon-code.js

@@ -475,7 +475,7 @@ export class CouponCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CouponCodeViewProps>",
-        "resolved": "{ loading?: boolean; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-empty/sqm-empty.js

@@ -5,6 +5,13 @@ import { EmptyStateView } from "./sqm-empty-view";
  * @validParents ["sqm-referral-table","sqm-rewards-table","sqm-leaderboard","sqm-reward-exchange-list"]
  */
 export class Empty {
+  constructor() {
+    /**
+     * @uiWidget ImageUpload
+     * @format url
+     * @uiName Image */
+    this.emptyStateImage = "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png";
+  }
   render() {
     return (h(Host, { slot: "empty" },
       h(EmptyStateView, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText, supportText: this.supportText })));
@@ -21,7 +28,7 @@ export class Empty {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "ImageUpload",
@@ -36,7 +43,8 @@ export class Empty {
         "text": ""
       },
       "attribute": "empty-state-image",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png\""
     },
     "emptyStateHeader": {
       "type": "string",

package/dist/collection/components/sqm-google-sign-in/sqm-google-sign-in.js

@@ -0,0 +1,78 @@
+import { getEnvironmentSDK } from "@saasquatch/component-boilerplate";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { Event, Component, h, Prop } from "@stencil/core";
+/**
+ * @uiName Google Sign-In Button
+ * @description Requires <script src="https://accounts.google.com/gsi/client" async></script> be added to the <head> section.
+ */
+export class GoogleSignIn {
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const sdk = getEnvironmentSDK();
+    const [googleButtonDiv, setGoogleButtonDiv] = useState(null);
+    useEffect(() => {
+      if (sdk.type !== "SquatchPortal")
+        return;
+      if (!googleButtonDiv)
+        return;
+      const cb = (res) => {
+        this.initComplete.emit(res);
+      };
+      //@ts-expect-error
+      google.accounts.id.initialize({
+        //@ts-expect-error: link component-env/boilerplate for new types
+        client_id: sdk.env.googleClientId,
+        callback: cb,
+      });
+      //@ts-expect-error
+      google.accounts.id.renderButton(googleButtonDiv, {
+        theme: "outline",
+        size: "large",
+        text: this.text,
+      });
+    }, [googleButtonDiv]);
+    // TODO: Maybe a loading placeholder while initialising
+    return h("div", { ref: setGoogleButtonDiv });
+  }
+  static get is() { return "sqm-google-sign-in"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "initComplete",
+      "name": "initComplete",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/sqm-logout-current-user/sqm-logout-current-user.js

@@ -122,7 +122,7 @@ export class LogoutCurrentUser {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-pagination/Pagination.stories.js

@@ -0,0 +1,12 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Link Button",
+};
+const defaultProps = {
+  link: "https://example.com",
+  openInNewTab: false,
+  buttonText: "Button Text",
+};
+export const Default = () => {
+  return h("sqm-pagination", null);
+};

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

@@ -0,0 +1,32 @@
+import { Fragment, h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  Container: {
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: "var(--sl-spacing-small)",
+    width: "100%",
+  },
+  TextContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-xx-small)",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function PaginationView(props) {
+  const { states, callbacks, text } = props;
+  const { onNext, onPrev } = callbacks;
+  const { currentPage, totalPages, loading } = states;
+  if (totalPages === 1)
+    return h(Fragment, null);
+  return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString),
+    !loading && (h(Fragment, null,
+      h("sl-button", { onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+        h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
+      h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
+    h("sl-button", { onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
+      h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
+}

package/dist/collection/components/sqm-pagination/sqm-pagination.js

@@ -0,0 +1,112 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { useState } from "@saasquatch/universal-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { intl } from "../../global/global";
+import { getProps } from "../../utils/utils";
+import { PaginationView } from "./sqm-pagination-view";
+import { usePagination } from "./usePagination";
+/**
+ * @uiName Pagination
+ * @exampleGroup Common Components
+ * @example Link Button - <sqm-pagination></sqm-pagination>
+ */
+export class Pagination {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Pagination text
+     */
+    this.paginationText = "{currentPage} of {totalPages}";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const hookProps = isDemo()
+      ? useDemoPagination(getProps(this))
+      : usePagination(getProps(this));
+    return h(PaginationView, Object.assign({}, hookProps));
+  }
+  static get is() { return "sqm-pagination"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "paginationText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Pagination text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "pagination-text",
+      "reflect": false,
+      "defaultValue": "\"{currentPage} of {totalPages}\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<UsePagination>",
+        "resolved": "{}",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "UsePagination": {
+            "location": "import",
+            "path": "./usePagination"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useDemoPagination(props) {
+  const [currentPage, setCurrentPage] = useState(1);
+  return deepmerge({
+    states: {
+      currentPage,
+      totalPages: 5,
+      loading: false,
+    },
+    callbacks: {
+      onNext: () => setCurrentPage(currentPage + 1),
+      onPrev: () => setCurrentPage(currentPage - 1),
+    },
+    text: {
+      paginationText: intl.formatMessage({
+        id: `paginationText`,
+        defaultMessage: props.paginationText || "{currentPage} of {totalPages}",
+      }, {
+        currentPage: currentPage,
+        totalPages: 5,
+      }),
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-pagination/usePagination.js

@@ -0,0 +1,29 @@
+import { useParentValue } from "@saasquatch/component-boilerplate";
+import { REFERRAL_CODES_PAGINATION_CONTEXT, } from "../sqm-referral-codes/useReferralCodes";
+import { intl } from "../../global/global";
+export function usePagination(props) {
+  var _a;
+  const context = useParentValue(REFERRAL_CODES_PAGINATION_CONTEXT);
+  const currentPage = context.states.currentPage + 1;
+  const totalPages = (_a = context.states) === null || _a === void 0 ? void 0 : _a.pageCount;
+  return {
+    states: {
+      currentPage,
+      totalPages,
+      loading: context.states.loading,
+    },
+    callbacks: {
+      onNext: () => { var _a, _b; return (_a = context.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = context.states) === null || _b === void 0 ? void 0 : _b.currentPage) + 1); },
+      onPrev: () => { var _a, _b; return (_a = context.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = context.states) === null || _b === void 0 ? void 0 : _b.currentPage) - 1); },
+    },
+    text: {
+      paginationText: intl.formatMessage({
+        id: `paginationText`,
+        defaultMessage: props.paginationText,
+      }, {
+        currentPage,
+        totalPages,
+      }),
+    },
+  };
+}

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

@@ -47,7 +47,6 @@ export class PortalContainer {
     /**
      * @uiName Background color
      * @uiWidget color
-     * @uiGroup Card style
      * @uiType string
      */
     this.backgroundColor = "#ffffff00";
@@ -327,9 +326,6 @@ export class PortalContainer {
           }, {
             "text": "color",
             "name": "uiWidget"
-          }, {
-            "text": "Card style",
-            "name": "uiGroup"
           }, {
             "text": "string",
             "name": "uiType"

package/dist/collection/components/sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories.js

@@ -0,0 +1,78 @@
+import { h } from "@stencil/core";
+import { PortalRegistrationFormView, } from "../sqm-portal-registration-form/sqm-portal-registration-form-view";
+export default {
+  title: "Components/Microsite Google Register",
+};
+const defaultProps = {
+  states: {
+    error: "",
+    loading: false,
+    confirmPassword: false,
+    hideInputs: false,
+    hideNameFields: false,
+    loginPath: "/login",
+    hidePasswords: true,
+    registrationFormState: {
+      initialData: {
+        email: "testuser@example.com",
+      },
+    },
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Register",
+    passwordField: null,
+    formData: (h("div", null,
+      " ",
+      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
+      h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
+  },
+};
+const errorProps = {
+  ...defaultProps,
+  states: {
+    error: "Something went wrong. Please try again.",
+    loading: false,
+    confirmPassword: false,
+    hideInputs: false,
+    loginPath: "/login",
+    hidePasswords: true,
+    registrationFormState: {
+      initialData: {
+        email: "testuser@example.com",
+      },
+    },
+  },
+};
+const loadingProps = {
+  ...defaultProps,
+  states: {
+    error: "",
+    loading: true,
+    hideInputs: false,
+    loginPath: "/login",
+    confirmPassword: false,
+    hidePasswords: true,
+    registrationFormState: {
+      initialData: {
+        email: "testuser@example.com",
+      },
+    },
+  },
+};
+export const Default = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps)));
+export const RegisterWithError = () => (h(PortalRegistrationFormView, Object.assign({}, errorProps)));
+export const RegisterLoading = () => (h(PortalRegistrationFormView, Object.assign({}, loadingProps)));
+export const TermsAndConditions = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps, { content: {
+    ...defaultProps.content,
+    terms: (h("p", null,
+      "By signing up you agree to the",
+      " ",
+      h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"))),
+  } })));

package/dist/collection/components/sqm-portal-google-registration-form/small-views/RegistrationFieldsView.js

@@ -0,0 +1,86 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../../styling/JSS";
+const style = {
+  Container: {
+    width: "100%",
+  },
+  InputsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-medium)",
+  },
+  HR: {
+    border: "1px solid #E0E0E0",
+    margin: "10px 0",
+  },
+  Input: { maxWidth: "500px" },
+  Checkbox: {
+    "&::part(control)": {
+      borderRadius: "0 !important",
+    },
+  },
+  SearchInput: {
+    padding: "var(--sl-spacing-x-small)",
+  },
+  ErrorInput: {
+    maxWidth: "500px",
+    "&::part(base)": {
+      border: "1px solid var(--sl-color-danger-500)",
+      borderRadius: "var(--sl-input-border-radius-medium)",
+    },
+    "&::part(help-text)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+    * {
+       margin: 0;
+       padding: 0;
+       box-sizing: border-box;
+    }
+  `;
+export const RegistrationFieldsView = (props) => {
+  //AL :TODO callbacks
+  const { states, callbacks, content } = props;
+  const { classes } = sheet;
+  const RegularFields = () => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return (h("div", { class: classes.InputsContainer },
+      h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": !states.enablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText }),
+      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.disabled), required: true }, (((_c = (_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.initialData) === null || _c === void 0 ? void 0 : _c.confirmPassword) ? {
+        value: (_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.confirmPassword,
+      }
+        : {}), (((_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.validationErrors) === null || _g === void 0 ? void 0 : _g.confirmPassword) ? {
+        class: sheet.classes.ErrorInput,
+        helpText: ((_j = (_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.validationErrors) === null || _j === void 0 ? void 0 : _j.confirmPassword) || content.requiredFieldErrorMessage,
+      }
+        : [])))));
+  };
+  const GoogleFields = () => {
+    //AL:TODO
+    const countries = [
+      {
+        countryCode: "CA",
+        displayName: "Canada",
+      },
+      {
+        countryCode: "ES",
+        displayName: "Spain",
+      },
+    ];
+    return (h("sl-select", { id: "countryCode", exportparts: "label: input-label, base: input-base", name: "/countryCode", label: "Country", value: "CA" }, countries === null || countries === void 0 ? void 0 : countries.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName)))));
+  };
+  const activeInput = states.isGoogle ? h(GoogleFields, null) : h(RegularFields, null);
+  return (h("div", null,
+    h("form", { class: classes.Container },
+      h("style", { type: "text/css" },
+        styleString,
+        vanillaStyle),
+      h("div", null, activeInput))));
+};