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

package/dist/cjs/{mixins-fe9d4112.js → mixins-338ca5f1.js}

@@ -1,90 +1,90 @@
 'use strict';
 
-const gap = (props) => {
-  if (props.direction === "row") {
-    return {
-      "& > :not(:last-child)": {
-        "margin-right": props.size,
-      },
-    };
-  }
-  else {
-    return {
-      "& > :not(:last-child)": {
-        "margin-bottom": props.size,
-      },
-    };
-  }
-};
-const HostBlock = {
-  ":host": {
-    display: "block",
-  },
-  ":host([hidden])": {
-    display: "none",
-  },
-};
-const Column = {
-  display: "flex",
-  "flex-direction": "column",
-};
-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)",
-  },
-};
-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",
-};
-const AuthWrapper = {
-  margin: "auto",
-  ...Wrapper,
-  "max-width": "500px",
-  ...Column,
-  ...gap({ direction: "column", size: "var(--sl-spacing-x-large)" }),
-};
-const AuthColumn = {
-  ...Column,
-  "& > *:not(style, div, slot)": { display: "block" },
-  ...gap({ direction: "column", size: "var(--sl-spacing-large)" }),
-};
-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",
-  },
+const gap = (props) => {
+  if (props.direction === "row") {
+    return {
+      "& > :not(:last-child)": {
+        "margin-right": props.size,
+      },
+    };
+  }
+  else {
+    return {
+      "& > :not(:last-child)": {
+        "margin-bottom": props.size,
+      },
+    };
+  }
+};
+const HostBlock = {
+  ":host": {
+    display: "block",
+  },
+  ":host([hidden])": {
+    display: "none",
+  },
+};
+const Column = {
+  display: "flex",
+  "flex-direction": "column",
+};
+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)",
+  },
+};
+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",
+};
+const AuthWrapper = {
+  margin: "auto",
+  ...Wrapper,
+  "max-width": "500px",
+  ...Column,
+  ...gap({ direction: "column", size: "var(--sl-spacing-x-large)" }),
+};
+const AuthColumn = {
+  ...Column,
+  "& > *:not(style, div, slot)": { display: "block" },
+  ...gap({ direction: "column", size: "var(--sl-spacing-large)" }),
+};
+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",
+  },
 };
 
 exports.AuthButtonsContainer = AuthButtonsContainer;

package/dist/cjs/{re-render-111a3ebb.js → re-render-c02c16c0.js}

@@ -1,44 +1,44 @@
 'use strict';
 
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-7eab8006.js');
+const index_module = require('./index.module-1c799b1f.js');
 
-const RENDER_EVENT = "sqm:request-rerender";
-/**
- * Requests a re-render for the wrapping table
- *
- * Useful when an attribute or other internal state changes
- *
- * @param deps an array of dependencies used for useEffect
- */
-function useRequestRerender(deps) {
-  const host = index_module.P();
-  stencilHooks_module.useEffect(() => {
-    host.dispatchEvent(new CustomEvent(RENDER_EVENT, {
-      detail: true,
-      bubbles: true,
-      composed: true,
-    }));
-  }, deps);
-}
-/**
- * Re-renders a parent component when child components make the request
- */
-function useRerenderListener() {
-  const host = index_module.P();
-  const [tick, rerender] = index_module.pn();
-  stencilHooks_module.useEffect(() => {
-    const listener = (e) => {
-      // Preventes recursively nested components from sending requests up all the way
-      e.stopPropagation();
-      rerender();
-    };
-    host.addEventListener(RENDER_EVENT, listener);
-    return () => {
-      host.removeEventListener(RENDER_EVENT, listener);
-    };
-  }, []);
-  return tick;
+const RENDER_EVENT = "sqm:request-rerender";
+/**
+ * Requests a re-render for the wrapping table
+ *
+ * Useful when an attribute or other internal state changes
+ *
+ * @param deps an array of dependencies used for useEffect
+ */
+function useRequestRerender(deps) {
+  const host = index_module.P();
+  stencilHooks_module.useEffect(() => {
+    host.dispatchEvent(new CustomEvent(RENDER_EVENT, {
+      detail: true,
+      bubbles: true,
+      composed: true,
+    }));
+  }, deps);
+}
+/**
+ * Re-renders a parent component when child components make the request
+ */
+function useRerenderListener() {
+  const host = index_module.P();
+  const [tick, rerender] = index_module.mn();
+  stencilHooks_module.useEffect(() => {
+    const listener = (e) => {
+      // Preventes recursively nested components from sending requests up all the way
+      e.stopPropagation();
+      rerender();
+    };
+    host.addEventListener(RENDER_EVENT, listener);
+    return () => {
+      host.removeEventListener(RENDER_EVENT, listener);
+    };
+  }, []);
+  return tick;
 }
 
 exports.useRequestRerender = useRequestRerender;

package/dist/cjs/{sqm-asset-card-view-3da8cac1.js → sqm-asset-card-view-07420209.js}

@@ -1,51 +1,51 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const JSS = require('./JSS-97fd087e.js');
+const JSS = require('./JSS-a75f3a9a.js');
 
-const style = {
-  CardContainer: {
-    "box-sizing": "border-box",
-    width: "100%",
-    "max-width": "260px",
-    border: "1px solid #EAEAEA",
-    padding: "0px 16px 16px 16px",
-    "border-radius": "8px",
-  },
-  TextContainer: {
-    display: "flex",
-    "justify-content": "space-between",
-    "align-items": "center",
-  },
-  Title: {
-    "font-weight": 600,
-    color: "var(--sl-color-gray-800)",
-    "max-width": "85%",
-    "overflow-wrap": "break-word",
-  },
-  CardImg: {
-    width: "100%",
-    height: "228px",
-    "border-radius": "4px",
-  },
-  Icon: {
-    "&:hover": {
-      cursor: "pointer",
-    },
-  },
-};
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-const AssetCardView = (props) => {
-  const { text: { titleText }, imgUrl, } = props;
-  return (index.h("div", { class: sheet.classes.CardContainer },
-    index.h("style", { type: "text/css" }, styleString),
-    index.h("div", { class: sheet.classes.TextContainer },
-      index.h("p", { class: sheet.classes.Title }, titleText),
-      index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", class: `bi bi-download ${sheet.classes.Icon}`, viewBox: "0 0 16 16" },
-        index.h("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" }),
-        index.h("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" }))),
-    index.h("img", { src: index.getAssetPath(imgUrl), class: sheet.classes.CardImg })));
+const style = {
+  CardContainer: {
+    "box-sizing": "border-box",
+    width: "100%",
+    "max-width": "260px",
+    border: "1px solid #EAEAEA",
+    padding: "0px 16px 16px 16px",
+    "border-radius": "8px",
+  },
+  TextContainer: {
+    display: "flex",
+    "justify-content": "space-between",
+    "align-items": "center",
+  },
+  Title: {
+    "font-weight": 600,
+    color: "var(--sl-color-gray-800)",
+    "max-width": "85%",
+    "overflow-wrap": "break-word",
+  },
+  CardImg: {
+    width: "100%",
+    height: "228px",
+    "border-radius": "4px",
+  },
+  Icon: {
+    "&:hover": {
+      cursor: "pointer",
+    },
+  },
+};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const AssetCardView = (props) => {
+  const { text: { titleText }, imgUrl, } = props;
+  return (index.h("div", { class: sheet.classes.CardContainer },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { class: sheet.classes.TextContainer },
+      index.h("p", { class: sheet.classes.Title }, titleText),
+      index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", class: `bi bi-download ${sheet.classes.Icon}`, viewBox: "0 0 16 16" },
+        index.h("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" }),
+        index.h("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" }))),
+    index.h("img", { src: index.getAssetPath(imgUrl), class: sheet.classes.CardImg })));
 };
 
 exports.AssetCardView = AssetCardView;

package/dist/cjs/sqm-asset-card.cjs.entry.js

@@ -5,43 +5,43 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./use-callback-e754042f.js');
-const index_module = require('./index.module-7eab8006.js');
+const index_module = require('./index.module-1c799b1f.js');
 require('./extends-08099afd.js');
 const cjs = require('./cjs-1066ec21.js');
-require('./JSS-97fd087e.js');
-const sqmAssetCardView = require('./sqm-asset-card-view-3da8cac1.js');
+require('./JSS-a75f3a9a.js');
+const sqmAssetCardView = require('./sqm-asset-card-view-07420209.js');
 
-const useAssetCard = (_props) => {
-  return {
-    text: {
-      titleText: "Marketing Banner",
-    },
-    imgUrl: null,
-    callbacks: {},
-  };
+const useAssetCard = (_props) => {
+  return {
+    text: {
+      titleText: "Marketing Banner",
+    },
+    imgUrl: null,
+    callbacks: {},
+  };
 };
 
-const AssetCard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ignored = true;
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = index_module.L() ? useAssetCardDemo(this) : useAssetCard();
-    return index.h(sqmAssetCardView.AssetCardView, Object.assign({}, props));
-  }
-  static get assetsDirs() { return ["../../assets"]; }
-};
-function useAssetCardDemo(props) {
-  return cjs.cjs({
-    text: {
-      titleText: "Marketing Banner",
-    },
-    imgUrl: "../../assets/saasquatch-logo.png",
-    callbacks: {},
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+const AssetCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = index_module.L() ? useAssetCardDemo(this) : useAssetCard();
+    return index.h(sqmAssetCardView.AssetCardView, Object.assign({}, props));
+  }
+  static get assetsDirs() { return ["../../assets"]; }
+};
+function useAssetCardDemo(props) {
+  return cjs.cjs({
+    text: {
+      titleText: "Marketing Banner",
+    },
+    imgUrl: "../../assets/saasquatch-logo.png",
+    callbacks: {},
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
 exports.sqm_asset_card = AssetCard;