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

package/dist/collection/components/sqm-navigation-menu/useNavigationMenu.js

@@ -1,27 +1,27 @@
-import { navigation, useTick, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { useRef } from "@saasquatch/universal-hooks";
-import { useEffect } from "haunted";
-function handleMenu(e) {
-  navigation.push(e.detail.item.value);
-}
-export function useNavigationMenu(props) {
-  const ref = useRef();
-  const [, rerender] = useTick();
-  const user = useUserIdentity();
-  useEffect(() => {
-    var _a;
-    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => handleMenu(e));
-  }, [ref.current]);
-  return {
-    states: {
-      includeDropdown: ((user === null || user === void 0 ? void 0 : user.id) || (user === null || user === void 0 ? void 0 : user.accountId) || (user === null || user === void 0 ? void 0 : user.jwt)) !== undefined,
-      styles: {
-        menuLabel: props.menuLabel,
-      },
-    },
-    callbacks: {
-      rerender,
-    },
-    ref,
-  };
-}
+import { navigation, useTick, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useRef } from "@saasquatch/universal-hooks";
+import { useEffect } from "haunted";
+function handleMenu(e) {
+  navigation.push(e.detail.item.value);
+}
+export function useNavigationMenu(props) {
+  const ref = useRef();
+  const [, rerender] = useTick();
+  const user = useUserIdentity();
+  useEffect(() => {
+    var _a;
+    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => handleMenu(e));
+  }, [ref.current]);
+  return {
+    states: {
+      includeDropdown: ((user === null || user === void 0 ? void 0 : user.id) || (user === null || user === void 0 ? void 0 : user.accountId) || (user === null || user === void 0 ? void 0 : user.jwt)) !== undefined,
+      styles: {
+        menuLabel: props.menuLabel,
+      },
+    },
+    callbacks: {
+      rerender,
+    },
+    ref,
+  };
+}

package/dist/collection/{stories → components/sqm-navigation-sidebar}/NavigationSidebar.stories.js

@@ -1,45 +1,45 @@
-import { h } from "@stencil/core";
-import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
-export default {
-  title: "Navigation Sidebar",
-};
-export const DefaultNavigationSidebar = () => {
-  const barProps = {
-    data: {
-      programs: [
-        {
-          key: "program1",
-          label: "My Referral Program",
-        },
-        {
-          key: "program2",
-          label: "My Rewards Program",
-        },
-      ],
-    },
-  };
-  const item1Props = {
-    states: {
-      active: false,
-    },
-    data: {
-      label: "Dashboard",
-      icon: "house",
-      path: "/",
-    },
-  };
-  const item2Props = {
-    states: {
-      active: true,
-    },
-    data: {
-      label: "Activity",
-      icon: "bar-chart",
-      path: "/",
-    },
-  };
-  return (h(NavigationSidebarView, Object.assign({}, barProps),
-    h(NavigationSidebarItemView, Object.assign({}, item1Props)),
-    h(NavigationSidebarItemView, Object.assign({}, item2Props))));
-};
+import { h } from "@stencil/core";
+import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
+import { NavigationSidebarItemView } from "../sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
+export default {
+  title: "Components/Navigation Sidebar",
+};
+export const DefaultNavigationSidebar = () => {
+  const barProps = {
+    data: {
+      programs: [
+        {
+          key: "program1",
+          label: "My Referral Program",
+        },
+        {
+          key: "program2",
+          label: "My Rewards Program",
+        },
+      ],
+    },
+  };
+  const item1Props = {
+    states: {
+      active: false,
+    },
+    data: {
+      label: "Dashboard",
+      icon: "house",
+      path: "/",
+    },
+  };
+  const item2Props = {
+    states: {
+      active: true,
+    },
+    data: {
+      label: "Activity",
+      icon: "bar-chart",
+      path: "/",
+    },
+  };
+  return (h(NavigationSidebarView, Object.assign({}, barProps),
+    h(NavigationSidebarItemView, Object.assign({}, item1Props)),
+    h(NavigationSidebarItemView, Object.assign({}, item2Props))));
+};

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

@@ -1,33 +1,33 @@
-import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-import { gap } from "../../global/mixins";
-const style = {
-  ItemsContainer: {
-    "min-width": "290px",
-    "max-width": "320px",
-    "box-sizing": "border-box",
-    padding: "20px 15px",
-    ...gap({ direction: "column", size: "4px" }),
-  },
-};
-const vanillaStyle = `
-  :host{    
-    width: 30vw;
-    min-width: min-content;
-    max-width: 320px;
-  }
-`;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
-export function NavigationSidebarView(
-// @ts-ignore - Stencil requires props (even if empty)
-props, children) {
-  return (h("div", null,
-    h("div", { class: sheet.classes.ItemsContainer },
-      h("style", { type: "text/css" },
-        vanillaStyle,
-        styleString),
-      children)));
-}
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { gap } from "../../global/mixins";
+const style = {
+  ItemsContainer: {
+    "min-width": "290px",
+    "max-width": "320px",
+    "box-sizing": "border-box",
+    padding: "20px 15px",
+    ...gap({ direction: "column", size: "4px" }),
+  },
+};
+const vanillaStyle = `
+  :host{    
+    width: 30vw;
+    min-width: min-content;
+    max-width: 320px;
+  }
+`;
+jss.setup(preset());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+export function NavigationSidebarView(
+// @ts-ignore - Stencil requires props (even if empty)
+props, children) {
+  return (h("div", null,
+    h("div", { class: sheet.classes.ItemsContainer },
+      h("style", { type: "text/css" },
+        vanillaStyle,
+        styleString),
+      children)));
+}

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

@@ -1,24 +1,24 @@
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, State } from "@stencil/core";
-import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
-/**
- * A holder for navigation menu items
- *
- * @uiName Navigation Sidebar
- */
-export class NavigationSidebar {
-  constructor() {
-    this.ignored = true;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    return (h(NavigationSidebarView, null,
-      h("slot", null)));
-  }
-  static get is() { return "sqm-navigation-sidebar"; }
-  static get encapsulation() { return "shadow"; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, State } from "@stencil/core";
+import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
+/**
+ * A holder for navigation menu items
+ *
+ * @uiName Navigation Sidebar
+ */
+export class NavigationSidebar {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(NavigationSidebarView, null,
+      h("slot", null)));
+  }
+  static get is() { return "sqm-navigation-sidebar"; }
+  static get encapsulation() { return "shadow"; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/{stories → components/sqm-navigation-sidebar-item}/SidebarItem.stories.js

@@ -1,31 +1,31 @@
-import { h } from "@stencil/core";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
-export default {
-  title: "Sidebar Item",
-};
-export const InactiveItem = () => {
-  const props = {
-    states: {
-      active: false,
-    },
-    data: {
-      label: "Dashboard",
-      icon: "house",
-      path: "/",
-    },
-  };
-  return h(NavigationSidebarItemView, Object.assign({}, props));
-};
-export const ActiveItem = () => {
-  const props = {
-    states: {
-      active: true,
-    },
-    data: {
-      label: "Dashboard",
-      icon: "house",
-      path: "/",
-    },
-  };
-  return h(NavigationSidebarItemView, Object.assign({}, props));
-};
+import { h } from "@stencil/core";
+import { NavigationSidebarItemView } from "./sqm-navigation-sidebar-item-view";
+export default {
+  title: "Components/Sidebar Item",
+};
+export const InactiveItem = () => {
+  const props = {
+    states: {
+      active: false,
+    },
+    data: {
+      label: "Dashboard",
+      icon: "house",
+      path: "/",
+    },
+  };
+  return h(NavigationSidebarItemView, Object.assign({}, props));
+};
+export const ActiveItem = () => {
+  const props = {
+    states: {
+      active: true,
+    },
+    data: {
+      label: "Dashboard",
+      icon: "house",
+      path: "/",
+    },
+  };
+  return h(NavigationSidebarItemView, Object.assign({}, props));
+};

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

@@ -1,40 +1,40 @@
-import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-import { gap } from "../../global/mixins";
-import { navigation } from "@saasquatch/component-boilerplate";
-export function NavigationSidebarItemView(props) {
-  const { states, data } = props;
-  const style = {
-    ItemContainer: {
-      display: "flex",
-      "background-color": `${states.active ? "var(--sl-color-gray-200)" : "var(--sl-color-white)"}`,
-      "border-radius": "8px",
-      padding: "8px",
-      "text-decoration": "none",
-      color: "#454444",
-      "align-items": "center",
-      ...gap({ direction: "row", size: "var(--sl-font-size-small)" }),
-      "&:hover": {
-        cursor: "pointer",
-        background: states.active ? "var(--sl-color-gray-300)" : "var(--sl-color-gray-50)",
-      },
-    },
-    Label: {
-      margin: "0",
-    },
-    Icon: {
-      "flex-shrink": "0",
-    },
-  };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("a", { href: data.path, onClick: (e) => {
-      e.preventDefault();
-      navigation.push(data.path);
-    }, class: sheet.classes.ItemContainer },
-    h("style", { type: "text/css" }, styleString),
-    h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
-    h("p", { class: sheet.classes.Label }, data.label)));
-}
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { gap } from "../../global/mixins";
+import { navigation } from "@saasquatch/component-boilerplate";
+export function NavigationSidebarItemView(props) {
+  const { states, data } = props;
+  const style = {
+    ItemContainer: {
+      display: "flex",
+      "background-color": `${states.active ? "var(--sl-color-gray-200)" : "var(--sl-color-white)"}`,
+      "border-radius": "8px",
+      padding: "8px",
+      "text-decoration": "none",
+      color: "#454444",
+      "align-items": "center",
+      ...gap({ direction: "row", size: "var(--sl-font-size-small)" }),
+      "&:hover": {
+        cursor: "pointer",
+        background: states.active ? "var(--sl-color-gray-300)" : "var(--sl-color-gray-50)",
+      },
+    },
+    Label: {
+      margin: "0",
+    },
+    Icon: {
+      "flex-shrink": "0",
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("a", { href: data.path, onClick: (e) => {
+      e.preventDefault();
+      navigation.push(data.path);
+    }, class: sheet.classes.ItemContainer },
+    h("style", { type: "text/css" }, styleString),
+    h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
+    h("p", { class: sheet.classes.Label }, data.label)));
+}

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": ""
-      },
-      "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": ""
+      },
+      "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 });
+}