npm - @saasquatch/mint-components - Versions diffs - 1.12.1-5 → 1.12.1-6 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (532) hide show

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

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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))));
+};