@saasquatch/mint-components 1.6.3-3 → 1.6.3-4

package/dist/collection/components/sqm-portal-frame/PortalFrame.stories.js

@@ -1,118 +1,118 @@
-import { navigation, useCurrentPage } from "@saasquatch/component-boilerplate";
-import { h } from "@stencil/core";
-import { PortalFrameView } from "./sqm-portal-frame-view";
-function setupGraphQL() {
-  const id = "worried-camera@uexwltgh.mailosaur.net";
-  const accountId = id;
-  const programId = "a-referral-program";
-  //@ts-ignore
-  window.SquatchAndroid = true;
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_as36zjtpfy7oo",
-    appDomain: "https://staging.referralsaasquatch.com",
-    token: 
-    // you have to change this if you change the id or accountId
-    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJpZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQifX0.-WGV4_bzGCFp-OTIO-h-yp0MlgtkdufT_GgI4T691OY",
-    userId: id,
-    accountId,
-    programId,
-  };
-  return { id, accountId };
-}
-function setupLoggedOut() {
-  const programId = "a-referral-program";
-  //@ts-ignore
-  window.SquatchAndroid = true;
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_as36zjtpfy7oo",
-    appDomain: "https://staging.referralsaasquatch.com",
-    programId,
-  };
-}
-export default {
-  title: "Components/Portal Frame",
-};
-const defaultProps = {
-  data: {
-    footer: h("span", null, "example@example.com"),
-    header: (h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
-      h("span", { style: {
-          fontSize: "var(--sl-font-size-large)",
-          fontWeight: "bold",
-        } }, "Portal Header"),
-      h("span", { style: { fontSize: "var(--sl-font-size-small)" } }, "A description for the portal"))),
-  },
-  callbacks: {
-    rerender: () => { },
-  },
-  ref: { current: undefined },
-};
-export const FrameWithMenu = () => {
-  const props = {
-    ...defaultProps,
-  };
-  return (h(PortalFrameView, Object.assign({}, props),
-    h("sqm-navigation-menu", { "menu-label": "Menu" },
-      h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/widget" }, "Dashboard"),
-      h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/editProfile" }, "Edit Profile"),
-      h("sl-menu-divider", null),
-      h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/logout" }, "Logout"))));
-};
-export const FrameWithoutMenu = () => {
-  const props = {
-    ...defaultProps,
-  };
-  return h(PortalFrameView, Object.assign({}, props));
-};
-export const FullStackFrame = () => {
-  var _a;
-  setupGraphQL();
-  return (h("div", null,
-    h("sqm-portal-frame", null,
-      h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
-        h("span", { style: {
-            fontSize: "var(--sl-font-size-large)",
-            fontWeight: "bold",
-          } }, "Portal Header"),
-        h("span", { style: { fontSize: "var(--sl-font-size-small)" } }, "A description for the portal")),
-      h("a", { slot: "footer", class: "FooterEmail", href: "mailto:referrals@servicetitan.com" }, "referrals@servicetitan.com"),
-      h("sqm-navigation-menu", { "menu-label": "Menu" },
-        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/widget" }, "Dashboard"),
-        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/editProfile" }, "Edit Profile"),
-        h("sl-menu-divider", null),
-        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/logout" }, "Logout")),
-      h("h1", null, "Something")),
-    h("p", null,
-      "Current path:",
-      " ",
-      h("code", null,
-        h("strong", null, (_a = useCurrentPage()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h("button", { onClick: navigation.back }, "Go Back")));
-};
-export const FullStackFrameLoggedOut = () => {
-  var _a;
-  setupLoggedOut();
-  return (h("div", null,
-    h("sqm-portal-frame", null,
-      h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
-        h("span", { style: {
-            fontSize: "var(--sl-font-size-large)",
-            fontWeight: "bold",
-          } }, "Portal Header"),
-        h("span", { style: { fontSize: "var(--sl-font-size-small)" } }, "A description for the portal")),
-      h("span", { slot: "footer" }, "sample@example.com"),
-      h("sqm-navigation-menu", { "menu-label": "Menu" },
-        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/widget" }, "Dashboard"),
-        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/editProfile" }, "Edit Profile"),
-        h("sl-menu-divider", null),
-        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/logout" }, "Logout")),
-      h("h1", null, "Something")),
-    h("p", null,
-      "Current path:",
-      " ",
-      h("code", null,
-        h("strong", null, (_a = useCurrentPage()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h("button", { onClick: navigation.back }, "Go Back")));
-};
+import { navigation, useCurrentPage } from "@saasquatch/component-boilerplate";
+import { h } from "@stencil/core";
+import { PortalFrameView } from "./sqm-portal-frame-view";
+function setupGraphQL() {
+  const id = "worried-camera@uexwltgh.mailosaur.net";
+  const accountId = id;
+  const programId = "a-referral-program";
+  //@ts-ignore
+  window.SquatchAndroid = true;
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_as36zjtpfy7oo",
+    appDomain: "https://staging.referralsaasquatch.com",
+    token: 
+    // you have to change this if you change the id or accountId
+    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJpZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQifX0.-WGV4_bzGCFp-OTIO-h-yp0MlgtkdufT_GgI4T691OY",
+    userId: id,
+    accountId,
+    programId,
+  };
+  return { id, accountId };
+}
+function setupLoggedOut() {
+  const programId = "a-referral-program";
+  //@ts-ignore
+  window.SquatchAndroid = true;
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_as36zjtpfy7oo",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+}
+export default {
+  title: "Components/Portal Frame",
+};
+const defaultProps = {
+  data: {
+    footer: h("span", null, "example@example.com"),
+    header: (h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
+      h("span", { style: {
+          fontSize: "var(--sl-font-size-large)",
+          fontWeight: "bold",
+        } }, "Portal Header"),
+      h("span", { style: { fontSize: "var(--sl-font-size-small)" } }, "A description for the portal"))),
+  },
+  callbacks: {
+    rerender: () => { },
+  },
+  ref: { current: undefined },
+};
+export const FrameWithMenu = () => {
+  const props = {
+    ...defaultProps,
+  };
+  return (h(PortalFrameView, Object.assign({}, props),
+    h("sqm-navigation-menu", { "menu-label": "Menu" },
+      h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/widget" }, "Dashboard"),
+      h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/editProfile" }, "Edit Profile"),
+      h("sl-menu-divider", null),
+      h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/logout" }, "Logout"))));
+};
+export const FrameWithoutMenu = () => {
+  const props = {
+    ...defaultProps,
+  };
+  return h(PortalFrameView, Object.assign({}, props));
+};
+export const FullStackFrame = () => {
+  var _a;
+  setupGraphQL();
+  return (h("div", null,
+    h("sqm-portal-frame", null,
+      h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
+        h("span", { style: {
+            fontSize: "var(--sl-font-size-large)",
+            fontWeight: "bold",
+          } }, "Portal Header"),
+        h("span", { style: { fontSize: "var(--sl-font-size-small)" } }, "A description for the portal")),
+      h("a", { slot: "footer", class: "FooterEmail", href: "mailto:referrals@servicetitan.com" }, "referrals@servicetitan.com"),
+      h("sqm-navigation-menu", { "menu-label": "Menu" },
+        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/widget" }, "Dashboard"),
+        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/editProfile" }, "Edit Profile"),
+        h("sl-menu-divider", null),
+        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/logout" }, "Logout")),
+      h("h1", null, "Something")),
+    h("p", null,
+      "Current path:",
+      " ",
+      h("code", null,
+        h("strong", null, (_a = useCurrentPage()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h("button", { onClick: navigation.back }, "Go Back")));
+};
+export const FullStackFrameLoggedOut = () => {
+  var _a;
+  setupLoggedOut();
+  return (h("div", null,
+    h("sqm-portal-frame", null,
+      h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
+        h("span", { style: {
+            fontSize: "var(--sl-font-size-large)",
+            fontWeight: "bold",
+          } }, "Portal Header"),
+        h("span", { style: { fontSize: "var(--sl-font-size-small)" } }, "A description for the portal")),
+      h("span", { slot: "footer" }, "sample@example.com"),
+      h("sqm-navigation-menu", { "menu-label": "Menu" },
+        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/widget" }, "Dashboard"),
+        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/editProfile" }, "Edit Profile"),
+        h("sl-menu-divider", null),
+        h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/logout" }, "Logout")),
+      h("h1", null, "Something")),
+    h("p", null,
+      "Current path:",
+      " ",
+      h("code", null,
+        h("strong", null, (_a = useCurrentPage()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h("button", { onClick: navigation.back }, "Go Back")));
+};

package/dist/collection/components/sqm-portal-frame/sqm-portal-frame-view.js

@@ -1,49 +1,49 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-import { HostBlock } from "../../global/mixins";
-const style = {
-  HostBlock: HostBlock,
-  Frame: {
-    display: "flex",
-    "flex-direction": "column",
-    "box-sizing": "border-box",
-  },
-  FooterWrapper: {
-    width: "100%",
-    "max-width": "100%",
-    padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
-    background: "var(--sqm-footer-background)",
-    display: "flex",
-    "justify-content": "flex-end",
-    "align-items": "center",
-    "box-sizing": "border-box",
-    "margin-top": "auto",
-  },
-  HeaderWrapper: {
-    width: "100%",
-    "max-width": "100%",
-    "box-sizing": "border-box",
-    display: "flex",
-    "justify-content": "space-between",
-    padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
-    "align-items": "center",
-    "background-color": "var(--sqm-header-background)",
-    "@media screen and (max-width: 499px)": {
-      "flex-direction": "row-reverse",
-      "justify-content": "flex-end",
-      padding: "0",
-    },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-export function PortalFrameView(props, children) {
-  const { data, notFullScreen } = props;
-  return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet.classes.Frame },
-    h("style", { type: "text/css" }, styleString),
-    h("div", { class: sheet.classes.HeaderWrapper },
-      data.header,
-      h("slot", { name: "sqm-navigation-menu" })),
-    children,
-    h("div", { class: sheet.classes.FooterWrapper }, data.footer)));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+import { HostBlock } from "../../global/mixins";
+const style = {
+  HostBlock: HostBlock,
+  Frame: {
+    display: "flex",
+    "flex-direction": "column",
+    "box-sizing": "border-box",
+  },
+  FooterWrapper: {
+    width: "100%",
+    "max-width": "100%",
+    padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
+    background: "var(--sqm-footer-background)",
+    display: "flex",
+    "justify-content": "flex-end",
+    "align-items": "center",
+    "box-sizing": "border-box",
+    "margin-top": "auto",
+  },
+  HeaderWrapper: {
+    width: "100%",
+    "max-width": "100%",
+    "box-sizing": "border-box",
+    display: "flex",
+    "justify-content": "space-between",
+    padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
+    "align-items": "center",
+    "background-color": "var(--sqm-header-background)",
+    "@media screen and (max-width: 499px)": {
+      "flex-direction": "row-reverse",
+      "justify-content": "flex-end",
+      padding: "0",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function PortalFrameView(props, children) {
+  const { data, notFullScreen } = props;
+  return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet.classes.Frame },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: sheet.classes.HeaderWrapper },
+      data.header,
+      h("slot", { name: "sqm-navigation-menu" })),
+    children,
+    h("div", { class: sheet.classes.FooterWrapper }, data.footer)));
+}

package/dist/collection/components/sqm-portal-frame/sqm-portal-frame.js

@@ -1,105 +1,105 @@
-import { Component, h, Prop, State } from "@stencil/core";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { PortalFrameView } from "./sqm-portal-frame-view";
-import { usePortalFrame } from "./usePortalFrame";
-import deepmerge from "deepmerge";
-/**
- * @uiName Microsite Frame
- * @slots [{"name":"header","title":"Header Content"},{"name":"footer","title":"Footer Content"},{"name":"","title":"Body Content"}]
- */
-export class PortalFrame {
-  constructor() {
-    this.ignored = true;
-    /**
-     * @undocumented
-     */
-    this.notFullScreen = false;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const footerContent = h("slot", { name: "footer" });
-    const headerContent = h("slot", { name: "header" });
-    const props = isDemo()
-      ? usePortalFrameDemo(footerContent, headerContent, this)
-      : usePortalFrame(footerContent, headerContent);
-    return (h(PortalFrameView, Object.assign({}, props),
-      h("slot", null)));
-  }
-  static get is() { return "sqm-portal-frame"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "notFullScreen": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }],
-        "text": ""
-      },
-      "attribute": "not-full-screen",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<PortalFrameViewProps>",
-        "resolved": "{ data?: { footer: VNode; header: VNode; }; notFullScreen?: boolean; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "PortalFrameViewProps": {
-            "location": "import",
-            "path": "./sqm-portal-frame-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
-function usePortalFrameDemo(footerContent, headerContent, props) {
-  return deepmerge({
-    notFullScreen: true,
-    data: {
-      footer: footerContent ? (footerContent) : (h("span", null, "example@example.com")),
-      header: headerContent ? (headerContent) : (h("div", { style: { display: "flex", flexDirection: "column" } },
-        h("span", { style: {
-            fontSize: "var(--sl-font-size-large)",
-            fontWeight: "bold",
-          } }, "Portal Header"),
-        h("span", { style: { fontSize: "var(--sl-font-size-small)" } }, "A description for the portal"))),
-    },
-    callbacks: {
-      rerender: () => { },
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
+import { Component, h, Prop, State } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { PortalFrameView } from "./sqm-portal-frame-view";
+import { usePortalFrame } from "./usePortalFrame";
+import deepmerge from "deepmerge";
+/**
+ * @uiName Microsite Frame
+ * @slots [{"name":"header","title":"Header Content"},{"name":"footer","title":"Footer Content"},{"name":"","title":"Body Content"}]
+ */
+export class PortalFrame {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @undocumented
+     */
+    this.notFullScreen = false;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const footerContent = h("slot", { name: "footer" });
+    const headerContent = h("slot", { name: "header" });
+    const props = isDemo()
+      ? usePortalFrameDemo(footerContent, headerContent, this)
+      : usePortalFrame(footerContent, headerContent);
+    return (h(PortalFrameView, Object.assign({}, props),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-portal-frame"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "notFullScreen": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": ""
+      },
+      "attribute": "not-full-screen",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<PortalFrameViewProps>",
+        "resolved": "{ data?: { footer: VNode; header: VNode; }; notFullScreen?: boolean; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "PortalFrameViewProps": {
+            "location": "import",
+            "path": "./sqm-portal-frame-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function usePortalFrameDemo(footerContent, headerContent, props) {
+  return deepmerge({
+    notFullScreen: true,
+    data: {
+      footer: footerContent ? (footerContent) : (h("span", null, "example@example.com")),
+      header: headerContent ? (headerContent) : (h("div", { style: { display: "flex", flexDirection: "column" } },
+        h("span", { style: {
+            fontSize: "var(--sl-font-size-large)",
+            fontWeight: "bold",
+          } }, "Portal Header"),
+        h("span", { style: { fontSize: "var(--sl-font-size-small)" } }, "A description for the portal"))),
+    },
+    callbacks: {
+      rerender: () => { },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-portal-frame/usePortalFrame.js

@@ -1,13 +1,13 @@
-import { useTick } from "@saasquatch/component-boilerplate";
-export function usePortalFrame(footerContent, headerContent) {
-  const [, rerender] = useTick();
-  return {
-    data: {
-      footer: footerContent,
-      header: headerContent,
-    },
-    callbacks: {
-      rerender,
-    },
-  };
-}
+import { useTick } from "@saasquatch/component-boilerplate";
+export function usePortalFrame(footerContent, headerContent) {
+  const [, rerender] = useTick();
+  return {
+    data: {
+      footer: footerContent,
+      header: headerContent,
+    },
+    callbacks: {
+      rerender,
+    },
+  };
+}