@saasquatch/mint-components 1.6.1-2 → 1.6.1-22

package/dist/collection/components/sqm-input-field/UseInputField.stories.js

@@ -1,77 +1,77 @@
-import { setUserIdentity } from "@saasquatch/component-boilerplate";
-import { useEffect } from "@saasquatch/universal-hooks";
-import { h } from "@stencil/core";
-import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-import scenario from "./sqm-input-field.feature";
-export default {
-  title: "Hooks / useInputField",
-  parameters: {
-    scenario,
-  },
-};
-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 FormData = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("div", { slot: "formData" },
-      h("sqm-input-field", { "field-name": "myData" }))));
-});
-export const FormDataWithLabel = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("div", { slot: "formData" },
-      h("sqm-input-field", { "field-label": "Custom Label", "field-name": "myData" }))));
-});
-export const MultipleInputs = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-name-fields", { slot: "formData" }),
-    h("sqm-input-field", { slot: "formData", "field-label": "Field One", "field-name": "fieldOne" }),
-    h("sqm-input-field", { slot: "formData", "field-label": "Field Two", "field-name": "fieldTwo" })));
-});
-export const OptionalInputs = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-name-fields", { slot: "formData" }),
-    h("sqm-input-field", { slot: "formData", "field-label": "Optional Field", "field-optional": "true", "field-name": "optionalField" })));
-});
-export const DateType = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-name-fields", { slot: "formData" }),
-    h("sqm-input-field", { slot: "formData", "field-label": "Date", "field-name": "date", "field-type": "date" })));
-});
-export const TelType = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-name-fields", { slot: "formData" }),
-    h("sqm-input-field", { slot: "formData", "field-label": "Phone Number", "field-name": "tel", "field-type": "tel" })));
-});
-export const MissingName = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-name-fields", { slot: "formData" }),
-    h("sqm-input-field", { slot: "formData", "field-label": "Phone Number", "field-type": "tel" })));
-});
+import { setUserIdentity } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import scenario from "./sqm-input-field.feature";
+export default {
+  title: "Hooks / useInputField",
+  parameters: {
+    scenario,
+  },
+};
+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 FormData = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("div", { slot: "formData" },
+      h("sqm-input-field", { "field-name": "myData" }))));
+});
+export const FormDataWithLabel = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("div", { slot: "formData" },
+      h("sqm-input-field", { "field-label": "Custom Label", "field-name": "myData" }))));
+});
+export const MultipleInputs = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-name-fields", { slot: "formData" }),
+    h("sqm-input-field", { slot: "formData", "field-label": "Field One", "field-name": "fieldOne" }),
+    h("sqm-input-field", { slot: "formData", "field-label": "Field Two", "field-name": "fieldTwo" })));
+});
+export const OptionalInputs = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-name-fields", { slot: "formData" }),
+    h("sqm-input-field", { slot: "formData", "field-label": "Optional Field", "field-optional": "true", "field-name": "optionalField" })));
+});
+export const DateType = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-name-fields", { slot: "formData" }),
+    h("sqm-input-field", { slot: "formData", "field-label": "Date", "field-name": "date", "field-type": "date" })));
+});
+export const TelType = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-name-fields", { slot: "formData" }),
+    h("sqm-input-field", { slot: "formData", "field-label": "Phone Number", "field-name": "tel", "field-type": "tel" })));
+});
+export const MissingName = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-name-fields", { slot: "formData" }),
+    h("sqm-input-field", { slot: "formData", "field-label": "Phone Number", "field-type": "tel" })));
+});

package/dist/collection/components/sqm-input-field/sqm-input-field-view.js

@@ -1,37 +1,37 @@
-import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-import { intl } from "../../global/global";
-import { ErrorStyles } from "../../global/mixins";
-const style = {
-  ErrorStyle: ErrorStyles,
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
-  },
-};
-const vanillaStyle = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-`;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
-export function InputFieldView(props) {
-  const { states, content } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
-  return (h("div", { class: sheet.classes.FieldContainer },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
-      class: sheet.classes.ErrorStyle,
-      helpText: intl.formatMessage({
-        id: `errorMessage-${content.fieldName}`,
-        defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
-      }),
-    }
-      : [])))));
-}
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { intl } from "../../global/global";
+import { ErrorStyles } from "../../global/mixins";
+const style = {
+  ErrorStyle: ErrorStyles,
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+`;
+jss.setup(preset());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+export function InputFieldView(props) {
+  const { states, content } = props;
+  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  return (h("div", { class: sheet.classes.FieldContainer },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: intl.formatMessage({
+        id: `errorMessage-${content.fieldName}`,
+        defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
+      }),
+    }
+      : [])))));
+}

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

@@ -1,204 +1,208 @@
-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 { InputFieldView } from "./sqm-input-field-view";
-import { useInputField } from "./useInputField";
-/**
- * @uiName Input Field
- */
-export class InputField {
-  constructor() {
-    this.ignored = true;
-    /**
-     * @uiName Input Type
-     * @uiType string
-     * @uiEnum ["text", "date", "tel"]
-     * @uiEnumNames ["Text", "Date", "Phone Number"]
-     */
-    this.fieldType = "text";
-    /**
-     * @uiName Required Error Message
-     */
-    this.errorMessage = "Cannot be empty";
-    /**
-     * @uiName Optional
-     */
-    this.fieldOptional = false;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const content = {
-      ...getProps(this),
-    };
-    const missingProps = getMissingProps([
-      {
-        attribute: "field-name",
-        value: this.fieldName,
-      },
-    ]);
-    if (!isDemo() && missingProps) {
-      return (h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this input field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
-    }
-    const { states } = isDemo() ? useInputFieldDemo(this) : useInputField();
-    return h(InputFieldView, { states: states, content: content });
-  }
-  static get is() { return "sqm-input-field"; }
-  static get properties() { return {
-    "fieldName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Input Name Attribute",
-            "name": "uiName"
-          }],
-        "text": "Used as the key of the inputs value in form data."
-      },
-      "attribute": "field-name",
-      "reflect": false
-    },
-    "fieldLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Input Label",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "field-label",
-      "reflect": false
-    },
-    "fieldType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"text\" | \"date\" | \"tel\"",
-        "resolved": "\"date\" | \"tel\" | \"text\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Input Type",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"text\", \"date\", \"tel\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Text\", \"Date\", \"Phone Number\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "field-type",
-      "reflect": false,
-      "defaultValue": "\"text\""
-    },
-    "errorMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Required Error Message",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "error-message",
-      "reflect": false,
-      "defaultValue": "\"Cannot be empty\""
-    },
-    "fieldOptional": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Optional",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "field-optional",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<InputFieldViewProps>",
-        "resolved": "{ states?: { validationErrors?: ValidationErrors; }; content?: { fieldName: string; fieldLabel: string; fieldType: \"text\" | \"date\" | \"tel\"; fieldOptional?: boolean; errorMessage: string; }; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "InputFieldViewProps": {
-            "location": "import",
-            "path": "./sqm-input-field-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
-function useInputFieldDemo(props) {
-  return deepmerge({
-    states: {
-      validationErrors: [],
-    },
-  }, 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 { InputFieldView } from "./sqm-input-field-view";
+import { useInputField } from "./useInputField";
+/**
+ * @uiName Input Field
+ */
+export class InputField {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Input Type
+     * @uiType string
+     * @uiEnum ["text", "date", "tel"]
+     * @uiEnumNames ["Text", "Date", "Phone Number"]
+     */
+    this.fieldType = "text";
+    /**
+     * @uiName Required Error Message
+     */
+    this.errorMessage = "Cannot be empty";
+    /**
+     * @uiName Optional
+     * @default
+     */
+    this.fieldOptional = false;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const content = {
+      ...getProps(this),
+    };
+    const missingProps = getMissingProps([
+      {
+        attribute: "field-name",
+        value: this.fieldName,
+      },
+    ]);
+    if (!isDemo() && missingProps) {
+      return (h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this input field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
+    }
+    const { states } = isDemo() ? useInputFieldDemo(this) : useInputField();
+    return h(InputFieldView, { states: states, content: content });
+  }
+  static get is() { return "sqm-input-field"; }
+  static get properties() { return {
+    "fieldName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Input Name Attribute",
+            "name": "uiName"
+          }],
+        "text": "Used as the key of the inputs value in form data."
+      },
+      "attribute": "field-name",
+      "reflect": false
+    },
+    "fieldLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Input Label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "field-label",
+      "reflect": false
+    },
+    "fieldType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"text\" | \"date\" | \"tel\"",
+        "resolved": "\"date\" | \"tel\" | \"text\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Input Type",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"text\", \"date\", \"tel\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Text\", \"Date\", \"Phone Number\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "field-type",
+      "reflect": false,
+      "defaultValue": "\"text\""
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Required Error Message",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": false,
+      "defaultValue": "\"Cannot be empty\""
+    },
+    "fieldOptional": {
+      "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": "field-optional",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<InputFieldViewProps>",
+        "resolved": "{ states?: { validationErrors?: ValidationErrors; }; content?: { fieldName: string; fieldLabel: string; fieldType: \"text\" | \"date\" | \"tel\"; fieldOptional?: boolean; errorMessage: string; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "InputFieldViewProps": {
+            "location": "import",
+            "path": "./sqm-input-field-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useInputFieldDemo(props) {
+  return deepmerge({
+    states: {
+      validationErrors: [],
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}