@saasquatch/mint-components 1.6.2-3 → 1.7.0-0

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

@@ -1,50 +1,50 @@
-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;
-  width: 100%;
-  display: block;
-}
-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) {
-  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-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), ((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,
-    })))));
-}
+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;
+  width: 100%;
+  display: block;
+}
+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) {
+  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-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), ((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

@@ -1,180 +1,176 @@
-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 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": ""
-      },
-      "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?: { validationErrors?: ValidationErrors; }; 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: {
-      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 { DropdownFieldView, } from "./sqm-dropdown-field-view";
+import { useDropdownField } from "./useDropdownField";
+/**
+ * @uiName 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
+     */
+    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": ""
+      },
+      "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": ""
+      },
+      "attribute": "dropdown-optional",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<DropdownFieldViewProps>",
+        "resolved": "{ states?: { validationErrors?: ValidationErrors; }; 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: {
+      validationErrors: [],
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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

@@ -1,10 +1,10 @@
-import { useDomContext } from "@saasquatch/stencil-hooks";
-import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
-export function useDropdownField() {
-  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
-  return {
-    states: {
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
-    },
-  };
-}
+import { useDomContext } from "@saasquatch/stencil-hooks";
+import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
+export function useDropdownField() {
+  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
+  return {
+    states: {
+      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+    },
+  };
+}

package/dist/collection/components/sqm-edit-profile/EditProfileForm.stories.js

@@ -1,61 +1,61 @@
-import { h } from "@stencil/core";
-import EditProfileView from "./sqm-edit-profile-view";
-export default {
-  title: "Components/Edit Profile Form",
-};
-const defaultProps = {
-  states: {
-    loading: false,
-    submitDisabled: false,
-    formState: {
-      currentRegion: "Canada",
-      firstName: "Bill",
-      lastName: "Bob",
-      errors: {},
-      error: "An error string",
-    },
-    user: {
-      firstName: "Bill",
-      lastName: "Bob",
-      email: "billbob@example.com",
-    },
-    showEdit: false,
-    text: {
-      editprofileheader: "Edit Profile",
-      editprofiletext: "Update your profile.",
-      firstnametext: "Bill",
-      lastnametext: "Bob",
-      canceltext: "Cancel",
-      updatetext: "Update",
-      currentregiontext: "Canada",
-    },
-  },
-  callbacks: {
-    onSubmit: (props) => {
-      console.log(props);
-    },
-    resetForm: () => {
-      console.log("reset");
-    },
-    onChange: () => {
-      console.log("change");
-    },
-    setShowEdit: (props) => {
-      console.log(props);
-    },
-  },
-};
-export const EditProfileFormDisabled = () => {
-  const props = defaultProps;
-  return h(EditProfileView, Object.assign({}, props));
-};
-export const EditProfileFormEnabled = () => {
-  const props = {
-    ...defaultProps,
-    states: { ...defaultProps.states, showEdit: true },
-  };
-  return h(EditProfileView, Object.assign({}, props));
-};
-export const FullStackFrameWithMenu = () => {
-  return (h("sqm-edit-profile", { editprofileheader: "Edit Profile", editprofiletext: "Update your profile.", firstnametext: "Bill", lastnametext: "Bob", canceltext: "Cancel", updatetext: "Update", currentregiontext: "Current Region", showregion: true }));
-};
+import { h } from "@stencil/core";
+import EditProfileView from "./sqm-edit-profile-view";
+export default {
+  title: "Components/Edit Profile Form",
+};
+const defaultProps = {
+  states: {
+    loading: false,
+    submitDisabled: false,
+    formState: {
+      currentRegion: "Canada",
+      firstName: "Bill",
+      lastName: "Bob",
+      errors: {},
+      error: "An error string",
+    },
+    user: {
+      firstName: "Bill",
+      lastName: "Bob",
+      email: "billbob@example.com",
+    },
+    showEdit: false,
+    text: {
+      editprofileheader: "Edit Profile",
+      editprofiletext: "Update your profile.",
+      firstnametext: "Bill",
+      lastnametext: "Bob",
+      canceltext: "Cancel",
+      updatetext: "Update",
+      currentregiontext: "Canada",
+    },
+  },
+  callbacks: {
+    onSubmit: (props) => {
+      console.log(props);
+    },
+    resetForm: () => {
+      console.log("reset");
+    },
+    onChange: () => {
+      console.log("change");
+    },
+    setShowEdit: (props) => {
+      console.log(props);
+    },
+  },
+};
+export const EditProfileFormDisabled = () => {
+  const props = defaultProps;
+  return h(EditProfileView, Object.assign({}, props));
+};
+export const EditProfileFormEnabled = () => {
+  const props = {
+    ...defaultProps,
+    states: { ...defaultProps.states, showEdit: true },
+  };
+  return h(EditProfileView, Object.assign({}, props));
+};
+export const FullStackFrameWithMenu = () => {
+  return (h("sqm-edit-profile", { editprofileheader: "Edit Profile", editprofiletext: "Update your profile.", firstnametext: "Bill", lastnametext: "Bob", canceltext: "Cancel", updatetext: "Update", currentregiontext: "Current Region", showregion: true }));
+};