npm - @saasquatch/mint-components - Versions diffs - 1.7.0-13 → 1.7.0-15 - Mend

@saasquatch/mint-components 1.7.0-13 → 1.7.0-15

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 (852) hide show

package/dist/collection/components/sqm-dropdown-field/UseDropdownField.stories.js CHANGED Viewed

@@ -1,54 +1,54 @@
-import { setUserIdentity } from "@saasquatch/component-boilerplate";
-import { useEffect } from "@saasquatch/universal-hooks";
-import { h } from "@stencil/core";
-import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-export default {
-  title: "Hooks / useDropdownField",
-};
-function setupGraphQL() {
-  const id = "testestest";
-  const accountId = id;
-  const programId = "sam-partner-test-2";
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a8b41jotf8a1v",
-    appDomain: "https://staging.referralsaasquatch.com",
-    programId,
-  };
-  useEffect(() => {
-    setUserIdentity({
-      accountId,
-      id,
-      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
-    });
-    return () => {
-      window.widgetIdent = undefined;
-      setUserIdentity(undefined);
-    };
-  }, []);
-  return { id, accountId };
-}
-export const SelectOptions = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Select an option", "dropdown-name": "options" },
-      h("sl-menu-item", { value: "option-1" }, "Option 1"),
-      h("sl-menu-item", { value: "option-2" }, "Option 2"),
-      h("sl-menu-item", { value: "option-3" }, "Option 3"))));
-});
-export const Countries = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Country", "dropdown-name": "countryCode" },
-      h("sl-menu-item", { value: "CA" }, "Canada"),
-      h("sl-menu-item", { value: "US" }, "United States"),
-      h("sl-menu-item", { value: "GB" }, "United Kingdom"))));
-});
-export const MissingName = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Country" },
-      h("sl-menu-item", { value: "CA" }, "Canada"),
-      h("sl-menu-item", { value: "US" }, "United States"),
-      h("sl-menu-item", { value: "GB" }, "United Kingdom"))));
-});
+import { setUserIdentity } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+export default {
+  title: "Hooks / useDropdownField",
+};
+function setupGraphQL() {
+  const id = "testestest";
+  const accountId = id;
+  const programId = "sam-partner-test-2";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+export const SelectOptions = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Select an option", "dropdown-name": "options" },
+      h("sl-menu-item", { value: "option-1" }, "Option 1"),
+      h("sl-menu-item", { value: "option-2" }, "Option 2"),
+      h("sl-menu-item", { value: "option-3" }, "Option 3"))));
+});
+export const Countries = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Country", "dropdown-name": "countryCode" },
+      h("sl-menu-item", { value: "CA" }, "Canada"),
+      h("sl-menu-item", { value: "US" }, "United States"),
+      h("sl-menu-item", { value: "GB" }, "United Kingdom"))));
+});
+export const MissingName = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-dropdown-field", { slot: "formData", "dropdown-label": "Country" },
+      h("sl-menu-item", { value: "CA" }, "Canada"),
+      h("sl-menu-item", { value: "US" }, "United States"),
+      h("sl-menu-item", { value: "GB" }, "United Kingdom"))));
+});

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field-view.js CHANGED Viewed

@@ -1,23 +1,23 @@
-import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-import { intl } from "../../global/global";
-const style = {
-  ErrorStyle: {
-    "--sl-input-border-color": "var(--sl-color-danger-500)",
-    "--sl-input-background-color": "var(--sl-color-danger-10)",
-    "--sl-input-border-color-focus": "var(--sl-color-danger-500)",
-    "--sl-input-border-color-hover": "var(--sl-color-danger-500)",
-  },
-  ErrorMessageStyle: {
-    margin: 0,
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-input-help-text-font-size-medium)",
-  },
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
-  },
-};
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { intl } from "../../global/global";
+const style = {
+  ErrorStyle: {
+    "--sl-input-border-color": "var(--sl-color-danger-500)",
+    "--sl-input-background-color": "var(--sl-color-danger-10)",
+    "--sl-input-border-color-focus": "var(--sl-color-danger-500)",
+    "--sl-input-border-color-hover": "var(--sl-color-danger-500)",
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
 const vanillaStyle = `
 :host {
   margin: 0 auto;
@@ -28,27 +28,27 @@ sl-select::part(label){
   font-size: var(--sl-input-label-font-size-small);
   font-weight: var(--sl-font-weight-semibold);
 }
-`;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
-export function DropdownFieldView(props) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const { states, content } = props;
-  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (h("div", { class: sheet.classes.FieldContainer },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
-      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
-    }
-      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
-      class: sheet.classes.ErrorStyle,
-    }
-      : [])), content.selectOptions),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, intl.formatMessage({
-      id: `errorMessage-${content.dropdownName}`,
-      defaultMessage: content.errorMessage,
-    })))));
-}
+`;
+jss.setup(preset());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+export function DropdownFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { states, content } = props;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
+  return (h("div", { class: sheet.classes.FieldContainer },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
+      class: sheet.classes.ErrorStyle,
+    }
+      : [])), content.selectOptions),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, intl.formatMessage({
+      id: `errorMessage-${content.dropdownName}`,
+      defaultMessage: content.errorMessage,
+    })))));
+}

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js CHANGED Viewed

@@ -1,187 +1,187 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop, State } from "@stencil/core";
-import deepmerge from "deepmerge";
-import { RequiredPropsError } from "../../utils/RequiredPropsError";
-import { getMissingProps, getProps } from "../../utils/utils";
-import { DropdownFieldView, } from "./sqm-dropdown-field-view";
-import { useDropdownField } from "./useDropdownField";
-/**
- * @uiName Form Dropdown Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
- * @slots [{"name":"", "title":"Drop Down Option"}]
- * @exampleGroup Microsite Components
- * @example Form Dropdown Field - <sqm-dropdown-field dropdown-label="Select an option" error-message="Select an option"><sl-menu-item value="option-1">Option 1</sl-menu-item><sl-menu-item value="option-2">Option 2</sl-menu-item><sl-menu-item value="option-3">Option 3</sl-menu-item></sqm-dropdown-field>
- */
-export class DropdownField {
-  constructor() {
-    this.ignored = true;
-    /**
-     * @uiName Dropdown Label
-     */
-    this.dropdownLabel = "Select an option";
-    /**
-     * @uiName Unselected Error Message
-     */
-    this.errorMessage = "Select an option";
-    /**
-     * @uiName Optional
-     * @default
-     */
-    this.dropdownOptional = false;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const missingProps = getMissingProps([
-      {
-        attribute: "dropdown-name",
-        value: this.dropdownName,
-      },
-    ]);
-    if (!isDemo() && missingProps) {
-      return (h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this drop down field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" },
-        h("slot", null)));
-    }
-    const content = {
-      ...getProps(this),
-      selectOptions: h("slot", null),
-    };
-    const { states } = isDemo()
-      ? useDropdownFieldDemo(this)
-      : useDropdownField();
-    return (h(DropdownFieldView, { states: states, content: content }));
-  }
-  static get is() { return "sqm-dropdown-field"; }
-  static get properties() { return {
-    "dropdownName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Dropdown Name Attribute",
-            "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "required"
-          }],
-        "text": "This name is used as the key for this form field on submission. The name must be unique within this specific form."
-      },
-      "attribute": "dropdown-name",
-      "reflect": false
-    },
-    "dropdownLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Dropdown Label",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "dropdown-label",
-      "reflect": false,
-      "defaultValue": "\"Select an option\""
-    },
-    "errorMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Unselected Error Message",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "error-message",
-      "reflect": false,
-      "defaultValue": "\"Select an option\""
-    },
-    "dropdownOptional": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Optional",
-            "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "default"
-          }],
-        "text": ""
-      },
-      "attribute": "dropdown-optional",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<DropdownFieldViewProps>",
-        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; }; content?: { dropdownName: string; dropdownLabel: string; dropdownOptional?: boolean; errorMessage: string; selectOptions?: VNode | VNode[]; }; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "DropdownFieldViewProps": {
-            "location": "import",
-            "path": "./sqm-dropdown-field-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
-function useDropdownFieldDemo(props) {
-  return deepmerge({
-    states: {
-      registrationFormState: {},
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { RequiredPropsError } from "../../utils/RequiredPropsError";
+import { getMissingProps, getProps } from "../../utils/utils";
+import { DropdownFieldView, } from "./sqm-dropdown-field-view";
+import { useDropdownField } from "./useDropdownField";
+/**
+ * @uiName Form Dropdown Field
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @slots [{"name":"", "title":"Drop Down Option"}]
+ * @exampleGroup Microsite Components
+ * @example Form Dropdown Field - <sqm-dropdown-field dropdown-label="Select an option" error-message="Select an option"><sl-menu-item value="option-1">Option 1</sl-menu-item><sl-menu-item value="option-2">Option 2</sl-menu-item><sl-menu-item value="option-3">Option 3</sl-menu-item></sqm-dropdown-field>
+ */
+export class DropdownField {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Dropdown Label
+     */
+    this.dropdownLabel = "Select an option";
+    /**
+     * @uiName Unselected Error Message
+     */
+    this.errorMessage = "Select an option";
+    /**
+     * @uiName Optional
+     * @default
+     */
+    this.dropdownOptional = false;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const missingProps = getMissingProps([
+      {
+        attribute: "dropdown-name",
+        value: this.dropdownName,
+      },
+    ]);
+    if (!isDemo() && missingProps) {
+      return (h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this drop down field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" },
+        h("slot", null)));
+    }
+    const content = {
+      ...getProps(this),
+      selectOptions: h("slot", null),
+    };
+    const { states } = isDemo()
+      ? useDropdownFieldDemo(this)
+      : useDropdownField();
+    return (h(DropdownFieldView, { states: states, content: content }));
+  }
+  static get is() { return "sqm-dropdown-field"; }
+  static get properties() { return {
+    "dropdownName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Dropdown Name Attribute",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "required"
+          }],
+        "text": "This name is used as the key for this form field on submission. The name must be unique within this specific form."
+      },
+      "attribute": "dropdown-name",
+      "reflect": false
+    },
+    "dropdownLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Dropdown Label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "dropdown-label",
+      "reflect": false,
+      "defaultValue": "\"Select an option\""
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Unselected Error Message",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": false,
+      "defaultValue": "\"Select an option\""
+    },
+    "dropdownOptional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Optional",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "default"
+          }],
+        "text": ""
+      },
+      "attribute": "dropdown-optional",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<DropdownFieldViewProps>",
+        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; }; content?: { dropdownName: string; dropdownLabel: string; dropdownOptional?: boolean; errorMessage: string; selectOptions?: VNode | VNode[]; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "DropdownFieldViewProps": {
+            "location": "import",
+            "path": "./sqm-dropdown-field-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useDropdownFieldDemo(props) {
+  return deepmerge({
+    states: {
+      registrationFormState: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-dropdown-field/useDropdownField.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { useDomContext } from "@saasquatch/stencil-hooks";
-import { REGISTRATION_FORM_STATE_CONTEXT, } from "../sqm-portal-registration-form/useRegistrationFormState";
-export function useDropdownField() {
-  const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
-  return {
-    states: {
-      registrationFormState,
-    },
-  };
-}
+import { useDomContext } from "@saasquatch/stencil-hooks";
+import { REGISTRATION_FORM_STATE_CONTEXT, } from "../sqm-portal-registration-form/useRegistrationFormState";
+export function useDropdownField() {
+  const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      registrationFormState,
+    },
+  };
+}