@saasquatch/mint-components 1.5.2-0 → 1.5.2

package/dist/collection/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item.js

@@ -1,127 +1,127 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop } from "@stencil/core";
-import deepmerge from "deepmerge";
-import { getProps } from "../../utils/utils";
-import { NavigationSidebarItemView, } from "./sqm-navigation-sidebar-item-view";
-import { useNavigationSidebarItem } from "./useNavigationSidebarItem";
-/**
- * @uiName Navigation Link
- */
-export class NavigationSidebarItem {
-  constructor() {
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = isDemo()
-      ? useSidebarItemDemo(getProps(this))
-      : useNavigationSidebarItem(getProps(this));
-    return h(NavigationSidebarItemView, Object.assign({}, props));
-  }
-  static get is() { return "sqm-navigation-sidebar-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "path": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Navigation path",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "path",
-      "reflect": false
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Icon",
-            "name": "uiName"
-          }],
-        "text": "Options available at https://shoelace.style/components/icon"
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Label",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<NavigationSidebarItemViewProps>",
-        "resolved": "{ states?: { active: boolean; }; data?: { label: string; icon: string; path: string; }; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "NavigationSidebarItemViewProps": {
-            "location": "import",
-            "path": "./sqm-navigation-sidebar-item-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-}
-function useSidebarItemDemo(props) {
-  return deepmerge({
-    states: {
-      active: false,
-    },
-    data: {
-      label: props.label || "Dashboard",
-      icon: props.icon || "house",
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { getProps } from "../../utils/utils";
+import { NavigationSidebarItemView, } from "./sqm-navigation-sidebar-item-view";
+import { useNavigationSidebarItem } from "./useNavigationSidebarItem";
+/**
+ * @uiName Navigation Link
+ */
+export class NavigationSidebarItem {
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = isDemo()
+      ? useSidebarItemDemo(getProps(this))
+      : useNavigationSidebarItem(getProps(this));
+    return h(NavigationSidebarItemView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-navigation-sidebar-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "path": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Navigation path",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "path",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Icon",
+            "name": "uiName"
+          }],
+        "text": "Options available at https://shoelace.style/components/icon"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<NavigationSidebarItemViewProps>",
+        "resolved": "{ states?: { active: boolean; }; data?: { label: string; icon: string; path: string; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "NavigationSidebarItemViewProps": {
+            "location": "import",
+            "path": "./sqm-navigation-sidebar-item-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function useSidebarItemDemo(props) {
+  return deepmerge({
+    states: {
+      active: false,
+    },
+    data: {
+      label: props.label || "Dashboard",
+      icon: props.icon || "house",
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-navigation-sidebar-item/useNavigationSidebarItem.js

@@ -1,14 +1,14 @@
-import { useCurrentPage } from "@saasquatch/component-boilerplate";
-export function useNavigationSidebarItem(props) {
-  const currentPage = useCurrentPage();
-  return {
-    states: {
-      active: currentPage.pathname === props.path,
-    },
-    data: {
-      label: props.label,
-      icon: props.icon,
-      path: props.path
-    },
-  };
-}
+import { useCurrentPage } from "@saasquatch/component-boilerplate";
+export function useNavigationSidebarItem(props) {
+  const currentPage = useCurrentPage();
+  return {
+    states: {
+      active: currentPage.pathname === props.path,
+    },
+    data: {
+      label: props.label,
+      icon: props.icon,
+      path: props.path
+    },
+  };
+}

package/dist/collection/components/sqm-password-field/PasswordField.stories.js

@@ -1,40 +1,40 @@
-import { h } from "@stencil/core";
-export default {
-  title: "Components/Portal Password Field",
-};
-export const Start = () => {
-  return (h("sqm-password-field", { demoData: {
-      initValue: "",
-      states: {
-        enableValidation: true,
-        validationErrors: {},
-        content: {
-          fieldLabel: "Password",
-        },
-      },
-    } }));
-};
-export const EmptyError = () => {
-  return (h("sqm-password-field", { demoData: {
-      initValue: "",
-      states: {
-        enableValidation: true,
-        validationErrors: { password: "Cannot be empty" },
-        content: {
-          fieldLabel: "Password",
-        },
-      },
-    } }));
-};
-export const ValidationError = () => {
-  return (h("sqm-password-field", { demoData: {
-      initValue: "asdf",
-      states: {
-        enableValidation: true,
-        validationErrors: { password: "Incomplete" },
-        content: {
-          fieldLabel: "Password",
-        },
-      },
-    } }));
-};
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Portal Password Field",
+};
+export const Start = () => {
+  return (h("sqm-password-field", { demoData: {
+      initValue: "",
+      states: {
+        enableValidation: true,
+        validationErrors: {},
+        content: {
+          fieldLabel: "Password",
+        },
+      },
+    } }));
+};
+export const EmptyError = () => {
+  return (h("sqm-password-field", { demoData: {
+      initValue: "",
+      states: {
+        enableValidation: true,
+        validationErrors: { password: "Cannot be empty" },
+        content: {
+          fieldLabel: "Password",
+        },
+      },
+    } }));
+};
+export const ValidationError = () => {
+  return (h("sqm-password-field", { demoData: {
+      initValue: "asdf",
+      states: {
+        enableValidation: true,
+        validationErrors: { password: "Incomplete" },
+        content: {
+          fieldLabel: "Password",
+        },
+      },
+    } }));
+};

package/dist/collection/components/sqm-password-field/passwordValidation.js

@@ -1,76 +1,76 @@
-import { h } from "@stencil/core";
-import PasswordValidator from "password-validator";
-import { createStyleSheet } from "../../styling/JSS";
-const passwordSchema = new PasswordValidator()
-  .is()
-  .min(8) // Minimum length 8
-  .has()
-  .uppercase() // Must have uppercase letters
-  .has()
-  .lowercase() // Must have lowercase letters
-  .has(/([\d`~\!@#\$%\^\&\*\(\)\-_\=\+\[\{\}\]\\\|;:'",<.>\/\?€£¥₹§±].*){1,}/); // Must contain at least 1 digit or symbol
-// Taken from combining https://github.com/tarunbatra/password-validator/blob/40184970e4f65efa8aed7a64185a011a3b5d0e54/src/constants.js#L9
-export const validateNewPassword = (password) => {
-  const errors = passwordSchema.validate(password, { list: true });
-  const message = getErrorMessage(errors, password);
-  return message;
-};
-const Valid = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
-  h("path", { d: "M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM4.8 9L1.8 6L2.646 5.154L4.8 7.302L9.354 2.748L10.2 3.6L4.8 9Z", fill: "#259053" })));
-const Invalid = () => (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { d: "M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM6 10.8C3.354 10.8 1.2 8.646 1.2 6C1.2 3.354 3.354 1.2 6 1.2C8.646 1.2 10.8 3.354 10.8 6C10.8 8.646 8.646 10.8 6 10.8ZM8.754 3.348L4.8 7.302L3.246 5.754L2.4 6.6L4.8 9L9.6 4.2L8.754 3.348Z", fill: "#555555" })));
-const validationMessages = {
-  min: "be a minimum of 8 characters",
-  uppercase: "contain at least 1 uppercase character",
-  lowercase: "contain at least 1 lowercase character",
-  has: "contain at least 1 number or symbol",
-};
-const baseItem = {
-  display: "flex",
-  alignItems: "center",
-  fontSize: "var(--sl-font-size-small)",
-  "& > :not(:last-child)": {
-    "margin-right": "var(--sl-spacing-x-small)",
-  },
-};
-const style = {
-  Base: {
-    fontSize: "var(--sl-font-size-small)",
-  },
-  ValidationList: {
-    "list-style-type": "none",
-    paddingRight: "var(--sl-spacing-large)",
-    margin: "var(--sl-spacing-small) 0 var(--sl-spacing-x-large)",
-    "& > :not(:last-child)": {
-      "margin-bottom": "var(--sl-spacing-xx-small)",
-    },
-    "& *": {
-      "line-height": "var(--sl-line-height-dense)",
-    },
-  },
-  ValidationItemValid: {
-    ...baseItem,
-    color: "var(--sl-color-success-600)",
-  },
-  ValidationItemInvalid: { ...baseItem },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const getErrorMessage = (errorKeys, password) => {
-  if (!errorKeys.length && password)
-    return (h("div", { class: sheet.classes.ValidationItemValid, style: { paddingBottom: "var(--sl-spacing-x-large)" } },
-      h("style", { type: "text/css" }, styleString),
-      h(Valid, null),
-      " ",
-      h("span", null, "Password has met all requirements")));
-  return (h("div", { class: sheet.classes.Base },
-    h("style", { type: "text/css" }, styleString),
-    "Password must meet the following requirements:",
-    h("ul", { class: sheet.classes.ValidationList }, Object.keys(validationMessages).map((errorKey) => errorKeys.includes(errorKey) ? (h("li", { class: sheet.classes.ValidationItemInvalid },
-      h(Invalid, null),
-      " ",
-      h("span", null, validationMessages[errorKey]))) : (h("li", { class: sheet.classes.ValidationItemValid },
-      h(Valid, null),
-      " ",
-      h("span", null, validationMessages[errorKey])))))));
-};
+import { h } from "@stencil/core";
+import PasswordValidator from "password-validator";
+import { createStyleSheet } from "../../styling/JSS";
+const passwordSchema = new PasswordValidator()
+  .is()
+  .min(8) // Minimum length 8
+  .has()
+  .uppercase() // Must have uppercase letters
+  .has()
+  .lowercase() // Must have lowercase letters
+  .has(/([\d`~\!@#\$%\^\&\*\(\)\-_\=\+\[\{\}\]\\\|;:'",<.>\/\?€£¥₹§±].*){1,}/); // Must contain at least 1 digit or symbol
+// Taken from combining https://github.com/tarunbatra/password-validator/blob/40184970e4f65efa8aed7a64185a011a3b5d0e54/src/constants.js#L9
+export const validateNewPassword = (password) => {
+  const errors = passwordSchema.validate(password, { list: true });
+  const message = getErrorMessage(errors, password);
+  return message;
+};
+const Valid = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
+  h("path", { d: "M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM4.8 9L1.8 6L2.646 5.154L4.8 7.302L9.354 2.748L10.2 3.6L4.8 9Z", fill: "#259053" })));
+const Invalid = () => (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM6 10.8C3.354 10.8 1.2 8.646 1.2 6C1.2 3.354 3.354 1.2 6 1.2C8.646 1.2 10.8 3.354 10.8 6C10.8 8.646 8.646 10.8 6 10.8ZM8.754 3.348L4.8 7.302L3.246 5.754L2.4 6.6L4.8 9L9.6 4.2L8.754 3.348Z", fill: "#555555" })));
+const validationMessages = {
+  min: "be a minimum of 8 characters",
+  uppercase: "contain at least 1 uppercase character",
+  lowercase: "contain at least 1 lowercase character",
+  has: "contain at least 1 number or symbol",
+};
+const baseItem = {
+  display: "flex",
+  alignItems: "center",
+  fontSize: "var(--sl-font-size-small)",
+  "& > :not(:last-child)": {
+    "margin-right": "var(--sl-spacing-x-small)",
+  },
+};
+const style = {
+  Base: {
+    fontSize: "var(--sl-font-size-small)",
+  },
+  ValidationList: {
+    "list-style-type": "none",
+    paddingRight: "var(--sl-spacing-large)",
+    margin: "var(--sl-spacing-small) 0 var(--sl-spacing-x-large)",
+    "& > :not(:last-child)": {
+      "margin-bottom": "var(--sl-spacing-xx-small)",
+    },
+    "& *": {
+      "line-height": "var(--sl-line-height-dense)",
+    },
+  },
+  ValidationItemValid: {
+    ...baseItem,
+    color: "var(--sl-color-success-600)",
+  },
+  ValidationItemInvalid: { ...baseItem },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const getErrorMessage = (errorKeys, password) => {
+  if (!errorKeys.length && password)
+    return (h("div", { class: sheet.classes.ValidationItemValid, style: { paddingBottom: "var(--sl-spacing-x-large)" } },
+      h("style", { type: "text/css" }, styleString),
+      h(Valid, null),
+      " ",
+      h("span", null, "Password has met all requirements")));
+  return (h("div", { class: sheet.classes.Base },
+    h("style", { type: "text/css" }, styleString),
+    "Password must meet the following requirements:",
+    h("ul", { class: sheet.classes.ValidationList }, Object.keys(validationMessages).map((errorKey) => errorKeys.includes(errorKey) ? (h("li", { class: sheet.classes.ValidationItemInvalid },
+      h(Invalid, null),
+      " ",
+      h("span", null, validationMessages[errorKey]))) : (h("li", { class: sheet.classes.ValidationItemValid },
+      h(Valid, null),
+      " ",
+      h("span", null, validationMessages[errorKey])))))));
+};

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

@@ -1,41 +1,41 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-import { ErrorStyles } from "../../global/mixins";
-const style = {
-  InputContainer: {
-    "& > :not(:last-child)": {
-      "margin-bottom": "20px",
-    },
-  },
-  ErrorStyle: ErrorStyles,
-};
-const vanillaStyle = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
-`;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-export function PortalResetPasswordView(props) {
-  var _a, _b;
-  const { states, callbacks } = props;
-  return (h("div", { class: sheet.classes.InputContainer },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/password", label: states.content.fieldLabel || "Password", required: true, validationError: ({ value }) => {
-        if (!value) {
-          return "Cannot be empty";
-        }
-      } }, (((_a = states.validationErrors) === null || _a === void 0 ? void 0 : _a.password) ? {
-      class: sheet.classes.ErrorStyle,
-      helpText: ((_b = states.validationErrors) === null || _b === void 0 ? void 0 : _b.password) || "Cannot be empty",
-    }
-      : []), { onInput: (input) => states.enableValidation && callbacks.onInput(input) })),
-    states.dynamicValidation));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+import { ErrorStyles } from "../../global/mixins";
+const style = {
+  InputContainer: {
+    "& > :not(:last-child)": {
+      "margin-bottom": "20px",
+    },
+  },
+  ErrorStyle: ErrorStyles,
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function PortalResetPasswordView(props) {
+  var _a, _b;
+  const { states, callbacks } = props;
+  return (h("div", { class: sheet.classes.InputContainer },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/password", label: states.content.fieldLabel || "Password", required: true, validationError: ({ value }) => {
+        if (!value) {
+          return "Cannot be empty";
+        }
+      } }, (((_a = states.validationErrors) === null || _a === void 0 ? void 0 : _a.password) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: ((_b = states.validationErrors) === null || _b === void 0 ? void 0 : _b.password) || "Cannot be empty",
+    }
+      : []), { onInput: (input) => states.enableValidation && callbacks.onInput(input) })),
+    states.dynamicValidation));
+}