@saasquatch/mint-components 1.11.1-1 → 1.12.0-1

package/dist/cjs/sqm-scroll.cjs.entry.js

@@ -0,0 +1,109 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const JSS = require('./JSS-8503a151.js');
+
+const REVEAL_EVENT = "sq:reveal";
+function useScroll(props) {
+  const { scrollTagName, scrollId } = props;
+  async function scroll() {
+    const element = document === null || document === void 0 ? void 0 : document.querySelector(scrollTagName || `#${scrollId}`);
+    element.dispatchEvent(new CustomEvent(REVEAL_EVENT, {
+      detail: scrollTagName || `#${scrollId}`,
+      bubbles: true,
+      composed: true,
+    }));
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    element.scrollIntoView({ behavior: props.scrollAnimation });
+  }
+  return {
+    callbacks: { scroll },
+  };
+}
+
+const Scroll = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Button type
+     * @uiType string
+     * @uiEnum ["default", "primary", "success", "neutral", "warning", "danger", "text"]
+     * @uiEnumNames ["Default", "Primary", "Success", "Neutral", "Warning", "Danger", "Text"]
+  
+     */
+    this.buttonType = "default";
+    /**
+     * @uiName Scroll animation style
+     * @uiType string
+     * @uiEnum ["smooth", "auto"]
+     * @uiEnumNames ["Smooth", "Auto"]
+     */
+    this.scrollAnimation = "smooth";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a;
+    const { callbacks } = useScroll(this);
+    const outlineColor = (_a = this.buttonType) !== null && _a !== void 0 ? _a : "primary";
+    const style = {
+      Button: {
+        "& .outline": {
+          "&::part(base)": {
+            color: "var(--sl-color-" + outlineColor + "-500)",
+            borderColor: "var(--sl-color-" + outlineColor + "-500)",
+            backgroundColor: "transparent",
+            "&:hover": {
+              color: "var(--sl-color-primary-text)",
+              backgroundColor: "var(--sl-color-" + outlineColor + "-500)",
+            },
+          },
+        },
+        "& .neutral": {
+          "&::part(base)": {
+            color: "var(--sl-color-primary-text)",
+            background: "var(--sl-color-neutral-500)",
+            "&:hover": {
+              opacity: "0.8",
+            },
+          },
+        },
+        "& .mobile": {
+          "@media (max-width: 499px)": {
+            width: "100%",
+          },
+        },
+      },
+    };
+    const sheet = JSS.createStyleSheet(style);
+    const styleString = sheet.toString();
+    const vanillaStyle = `
+		:host{
+			display: contents;
+		}
+		${this.mobile &&
+      `
+		@media only screen and (max-width: 499px) {
+			:host {
+				display: block;
+				width: 100%;
+			}
+		}
+	  `}
+	`;
+    let classStack = "";
+    if (this.outline && this.buttonType != "default")
+      classStack += "outline ";
+    if (this.buttonType === "neutral")
+      classStack += "neutral ";
+    if (this.mobile)
+      classStack += "mobile ";
+    return (index.h("div", { class: sheet.classes.Button }, index.h("style", { type: "text/css" }, vanillaStyle, styleString), index.h("sl-button", { type: this.buttonType, onClick: callbacks.scroll, size: this.size, pill: this.pill, circle: this.circle, class: classStack }, (this.iconSlot || this.iconName) && (index.h("sl-icon", { slot: this.iconSlot || "prefix", name: this.iconName })), this.buttonText, index.h("slot", null))));
+  }
+};
+
+exports.sqm_scroll = Scroll;