@saasquatch/mint-components 1.3.3-1 → 1.3.3-2

package/dist/collection/components/sqm-text/sqm-text.js

@@ -0,0 +1,77 @@
+import { Component, h, State } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { insertCSS } from "../../insertcss";
+import debugFn from "debug";
+const debug = debugFn("sq:global");
+const textStyles = `
+  sqm-text {
+    display: block;
+  }
+
+  sqm-text h1 {
+    font-size: var(--sl-font-size-xx-large);
+    font-weight: 600;
+    color: var(--sl-color-gray-800);
+    margin: 0;
+  }
+
+  sqm-text h2 {
+    font-size: var(--sl-font-size-x-large);
+    font-weight: 600;
+    color: var(--sl-color-gray-800);
+    margin: 0;
+  }
+
+  sqm-text h3 {
+    font-size: var(--sl-font-size-large);
+    font-weight: 600;
+    color: var(--sl-color-gray-800);
+    margin: 0;
+  }
+
+  sqm-text h4 {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--sl-color-gray-800);
+    margin: 0;
+  }
+
+  sqm-text p {
+    font-size: var(--sl-font-size-small);
+    font-weight: 400;
+    color: var(--sl-color-gray-800);
+    margin: 0;
+  }
+
+  sqm-text p[light] {
+    font-size: var(--sl-font-size-x-small);
+    font-weight: 400;
+    color: var(--sl-color-gray-600);
+    margin: 0;
+  }
+`;
+/**
+ * @uiName Text
+ */
+export class Text {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  componentWillLoad() {
+    try {
+      insertCSS(textStyles);
+    }
+    catch (error) {
+      debug(error);
+    }
+  }
+  render() {
+    return h("slot", null);
+  }
+  static get is() { return "sqm-text"; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-text-span/sqm-text-span-view.js

@@ -0,0 +1,56 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+export function TextSpanView(props, children) {
+  const style = {
+    p: {
+      "font-size": "var(--sl-font-size-small)",
+      "font-weight": "400",
+      color: "var(--sl-color-gray-800)",
+      margin: "0",
+    },
+    subtext: {
+      "font-size": "var(--sl-font-size-x-small)",
+      "font-weight": "400",
+      color: "var(--sl-color-gray-600)",
+      margin: "0",
+    },
+    h1: {
+      "font-size": "var(--sl-font-size-xx-large)",
+      "font-weight": "600",
+      color: "var(--sl-color-gray-800)",
+      margin: "0",
+    },
+    h2: {
+      "font-size": "var(--sl-font-size-x-large)",
+      "font-weight": "600",
+      color: "var(--sl-color-gray-800)",
+      margin: "0",
+    },
+    h3: {
+      "font-size": "var(--sl-font-size-large)",
+      "font-weight": "600",
+      color: "var(--sl-color-gray-800)",
+      margin: "0",
+    },
+    h4: {
+      "font-size": "13px",
+      "font-weight": "600",
+      color: "var(--sl-color-gray-800)",
+      margin: "0",
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+    sqm-text-span {
+      display: inline;
+    }
+  `;
+  return (h("span", { class: sheet.classes[props.type] },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    children));
+}

package/dist/collection/components/sqm-text-span/sqm-text-span.js

@@ -0,0 +1,69 @@
+import { Component, h, Prop, State } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { TextSpanView } from "./sqm-text-span-view";
+/**
+ * @uiName Text Span
+ */
+export class Text {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  render() {
+    return h(TextSpanView, { type: this.type }, this.text);
+  }
+  static get is() { return "sqm-text-span"; }
+  static get properties() { return {
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"p\" | \"subtext\" | \"h1\" | \"h2\" | \"h3\" | \"h4\"",
+        "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"subtext\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Text",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"p\", \"subtext\", \"h1\", \"h2\", \"h3\", \"h4\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-titled-section/sqm-portal-section-view.js

@@ -0,0 +1,24 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+export function PortalSectionView(props) {
+  const style = {
+    LabelContainer: {
+      "margin-bottom": props.labelMargin === "none"
+        ? props.labelMargin
+        : `var(--sl-spacing-${props.labelMargin})`,
+    },
+    SectionContainer: {
+      padding: props.padding === "none"
+        ? "0"
+        : `var(--sl-spacing-${props.padding})`,
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.SectionContainer },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: sheet.classes.LabelContainer }, props.label),
+    props.content));
+}

package/dist/collection/components/sqm-titled-section/sqm-titled-section.js

@@ -0,0 +1,115 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { PortalSectionView } from "./sqm-portal-section-view";
+/**
+ * @uiName Section (with title)
+ */
+export class TitledSection {
+  constructor() {
+    /**
+     * @uiName Label margin style
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     */
+    this.labelMargin = "small";
+    /**
+     * @uiName Section padding
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     */
+    this.padding = "none";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const label = h("slot", { name: "label" }, this.label);
+    const content = h("slot", { name: "content" });
+    return h(PortalSectionView, Object.assign({}, { ...getProps(this), label, content }));
+  }
+  static get is() { return "sqm-titled-section"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "labelMargin": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Spacing",
+        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
+        "references": {
+          "Spacing": {
+            "location": "import",
+            "path": "../../global/mixins"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Label margin style",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "label-margin",
+      "reflect": false,
+      "defaultValue": "\"small\""
+    },
+    "padding": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Spacing",
+        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
+        "references": {
+          "Spacing": {
+            "location": "import",
+            "path": "../../global/mixins"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Section padding",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "padding",
+      "reflect": false,
+      "defaultValue": "\"none\""
+    }
+  }; }
+}

package/dist/collection/components/sqm-user-name/sqm-user-name-view.js

@@ -0,0 +1,4 @@
+import { h, Host } from "@stencil/core";
+export function UserNameView(props) {
+  return h(Host, null, props.loading ? props.loadingText : props.username);
+}

package/dist/collection/components/sqm-user-name/sqm-user-name.js

@@ -0,0 +1,114 @@
+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 { UserNameView } from "./sqm-user-name-view";
+import { useUserName } from "./useUserName";
+/**
+ * @uiName Navigation Link
+ */
+export class UserName {
+  constructor() {
+    this._ignored = true;
+    /**
+     * @uiName Fallback name for nameless users
+     */
+    this.fallback = "Anonymous User";
+    /**
+     * @uiName Loading text
+     */
+    this.loadingText = "...";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = isDemo() ? useUserNameDemo(this) : useUserName(this);
+    return h(UserNameView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-user-name"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "fallback": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Fallback name for nameless users",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "fallback",
+      "reflect": false,
+      "defaultValue": "\"Anonymous User\""
+    },
+    "loadingText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Loading text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "loading-text",
+      "reflect": false,
+      "defaultValue": "\"...\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<UserNameViewProps>",
+        "resolved": "{ loading?: boolean; loadingText?: string; username?: string; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "UserNameViewProps": {
+            "location": "import",
+            "path": "./sqm-user-name-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "_ignored": {}
+  }; }
+}
+function useUserNameDemo(props) {
+  return deepmerge({
+    loading: false,
+    loadingText: "...",
+    username: "John Smith",
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-user-name/useUserName.js

@@ -0,0 +1,26 @@
+import { useQuery, useUserIdentity } from "@saasquatch/component-boilerplate";
+import gql from "graphql-tag";
+const GET_USER_NAME = gql `
+  query getUserName {
+    viewer {
+      ... on User {
+        firstName
+        lastName
+      }
+    }
+  }
+`;
+export function useUserName(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const user = useUserIdentity();
+  const res = useQuery(GET_USER_NAME, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const loading = res.loading;
+  const username = ((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.firstName) || ((_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.viewer) === null || _d === void 0 ? void 0 : _d.lastName)
+    ? `${(_f = (_e = res.data) === null || _e === void 0 ? void 0 : _e.viewer) === null || _f === void 0 ? void 0 : _f.firstName} ${(_h = (_g = res.data) === null || _g === void 0 ? void 0 : _g.viewer) === null || _h === void 0 ? void 0 : _h.lastName}`
+    : props.fallback;
+  return {
+    loadingText: props.loadingText,
+    loading,
+    username,
+  };
+}

package/dist/collection/global/global.js

@@ -0,0 +1,80 @@
+import "@formatjs/intl-relativetimeformat/polyfill";
+import "@formatjs/intl-relativetimeformat/dist/locale-data/en";
+import "@formatjs/intl-pluralrules/polyfill";
+import "@formatjs/intl-pluralrules/dist/locale-data/en";
+import "babel-polyfill";
+import { useHost } from "@saasquatch/stencil-hooks";
+import { setUseHostImplementation } from "@saasquatch/component-boilerplate";
+import { createIntl, createIntlCache } from "@formatjs/intl";
+import debugFn from "debug";
+setUseHostImplementation(useHost);
+const debug = debugFn("sq:global");
+const cache = createIntlCache();
+export const intl = createIntl({
+  locale: "en",
+}, cache);
+import { SlAlert, SlAnimation, SlAvatar, SlBadge, SlButton, SlButtonGroup, SlCard, SlCheckbox, SlColorPicker, SlDetails, SlDialog, SlDrawer, SlDropdown, SlForm, SlFormatBytes, SlFormatDate, SlFormatNumber, SlIcon, SlIconButton, SlImageComparer, SlInclude, SlInput, SlMenu, SlMenuDivider, SlMenuItem, SlMenuLabel, SlProgressBar, SlProgressRing, SlRadio, SlRange, SlRating, SlRelativeTime, SlResizeObserver, SlResponsiveEmbed, SlSelect, SlSkeleton, SlSpinner, SlSwitch, SlTab, SlTabGroup, SlTabPanel, SlTag, SlTextarea, SlTooltip, setBasePath, registerIconLibrary, } from "@shoelace-style/shoelace";
+try {
+  setBasePath("/dist/shoelace");
+  // SlAlert.register();
+  registerIconLibrary("default", {
+    // same link that shoelace uses internally
+    resolver: (name) => `https://fast.ssqt.io/npm/bootstrap-icons@1.2.0/icons/${name}.svg`,
+  });
+  // SlAlert.register();
+  customElements.define("sl-alert", SlAlert);
+  customElements.define("sl-animation", SlAnimation);
+  customElements.define("sl-avatar", SlAvatar);
+  customElements.define("sl-badge", SlBadge);
+  customElements.define("sl-button", SlButton);
+  customElements.define("sl-button-group", SlButtonGroup);
+  customElements.define("sl-card", SlCard);
+  customElements.define("sl-checkbox", SlCheckbox);
+  customElements.define("sl-color-picker", SlColorPicker);
+  customElements.define("sl-details", SlDetails);
+  customElements.define("sl-dialog", SlDialog);
+  customElements.define("sl-drawer", SlDrawer);
+  customElements.define("sl-dropdown", SlDropdown);
+  customElements.define("sl-form", SlForm);
+  customElements.define("sl-format-bytes", SlFormatBytes);
+  customElements.define("sl-format-date", SlFormatDate);
+  customElements.define("sl-format-number", SlFormatNumber);
+  customElements.define("sl-icon", SlIcon);
+  customElements.define("sl-icon-button", SlIconButton);
+  customElements.define("sl-image-comparer", SlImageComparer);
+  customElements.define("sl-include", SlInclude);
+  customElements.define("sl-input", SlInput);
+  customElements.define("sl-menu", SlMenu);
+  customElements.define("sl-menu-divider", SlMenuDivider);
+  customElements.define("sl-menu-item", SlMenuItem);
+  customElements.define("sl-menu-label", SlMenuLabel);
+  customElements.define("sl-progress-bar", SlProgressBar);
+  customElements.define("sl-progress-ring", SlProgressRing);
+  customElements.define("sl-radio", SlRadio);
+  customElements.define("sl-range", SlRange);
+  customElements.define("sl-rating", SlRating);
+  customElements.define("sl-relative-time", SlRelativeTime);
+  customElements.define("sl-resize-observer", SlResizeObserver);
+  customElements.define("sl-responsive-embed", SlResponsiveEmbed);
+  customElements.define("sl-select", SlSelect);
+  customElements.define("sl-skeleton", SlSkeleton);
+  customElements.define("sl-spinner", SlSpinner);
+  customElements.define("sl-switch", SlSwitch);
+  customElements.define("sl-tab", SlTab);
+  customElements.define("sl-tab-group", SlTabGroup);
+  customElements.define("sl-tab-panel", SlTabPanel);
+  customElements.define("sl-tag", SlTag);
+  customElements.define("sl-textarea", SlTextarea);
+  customElements.define("sl-tooltip", SlTooltip);
+}
+catch (error) {
+  debug("components already registered");
+}
+import { insertCSS } from "../insertcss";
+import CSS from "./styles";
+try {
+  insertCSS(CSS);
+}
+catch (error) {
+  debug(error);
+}

package/dist/collection/global/mixins.js

@@ -0,0 +1,100 @@
+export const gap = (props) => {
+  if (props.direction === "row") {
+    return {
+      "& > :not(:last-child)": {
+        "margin-right": props.size,
+      },
+    };
+  }
+  else {
+    return {
+      "& > :not(:last-child)": {
+        "margin-bottom": props.size,
+      },
+    };
+  }
+};
+export const HostBlock = {
+  ":host": {
+    display: "block",
+  },
+  ":host([hidden])": {
+    display: "none",
+  },
+};
+export const P = {
+  "font-size": "var(--sl-font-size-small)",
+  color: "var(--sl-color-gray-800)",
+  "margin-top": "0px",
+  "&.Subtitle": {
+    color: "var(--sl-color-gray-500)",
+    margin: "0px",
+  },
+};
+export const Column = {
+  display: "flex",
+  "flex-direction": "column",
+};
+export const SeparateContent = {
+  display: "flex",
+  "justify-content": "space-between",
+  "align-items": "center",
+};
+export const ErrorStyles = {
+  "&::part(base)": {
+    background: "var(--sl-color-danger-10)",
+    borderColor: "var(--sl-color-danger-500)",
+    outline: "var(--sl-color-danger-500)",
+  },
+  "&:host": {
+    "--something-random": "red",
+    "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
+  },
+  "&::part(input)": {
+    color: "var(--sl-color-danger-500) !important",
+    "&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active": {
+      boxShadow: "0 0 0 var(--sl-input-height-large) var(--sl-input-background-color-hover) inset !important",
+      "-webkit-text-fill-color": "var(--sl-color-danger-500)",
+    },
+  },
+  "&::part(help-text)": {
+    color: "var(--sl-color-danger-500)",
+  },
+};
+export const Wrapper = {
+  "box-sizing": "border-box",
+  width: "100%",
+  "max-width": "var(--sqm-content-max-width)",
+  height: "auto",
+  "background-color": "var(--sqm-content-background)",
+  display: "flex",
+  padding: "var(--sl-spacing-xxx-large)",
+  border: "1px solid #eaeaea",
+  "border-radius": "8px",
+};
+export const AuthWrapper = {
+  margin: "auto",
+  ...Wrapper,
+  "max-width": "500px",
+  ...Column,
+  ...gap({ direction: "column", size: "var(--sl-spacing-x-large)" }),
+};
+export const AuthColumn = {
+  ...Column,
+  "& > *:not(style, div)": { display: "block" },
+  ...gap({ direction: "column", size: "var(--sl-spacing-large)" }),
+};
+export const AuthButtonsContainer = {
+  "padding-top": "var(--sl-spacing-medium)",
+  display: "flex",
+  "flex-direction": "column",
+  width: "100%",
+  "align-items": "center",
+  "&>*": {
+    width: "100%",
+  },
+  ...gap({ direction: "column", size: "var(--sl-spacing-x-large)" }),
+  "& > div": {
+    "text-align": "center",
+  },
+};