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

package/dist/collection/global/global.js

@@ -1,80 +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);
-}
+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

@@ -1,100 +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",
-  },
-};
+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",
+  },
+};