'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-8277cbb3.js');
const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.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 Scroll animation style
     * @uiType string
     * @uiEnum ["smooth", "auto"]
     * @uiEnumNames ["Smooth", "Auto"]
     */
    this.scrollAnimation = "smooth";
    domContextHooks_module.h$1(this);
  }
  disconnectedCallback() { }
  render() {
    const { callbacks } = useScroll(this);
    const vanillaStyleString = `
    *::part(secondarybutton-base),
    sl-button[type="secondary"]::part(base) {
      font-family: var(--sqm-primary-font);
      background-color: var(--sqm-secondary-button-background);
      color: var(--sqm-secondary-button-color);
      border-color: var(--sqm-secondary-button-color-border);
      border-radius: var(--sqm-secondary-button-radius);
    }

    *::part(secondarybutton-base):hover,
    sl-button[type="secondary"]::part(base):hover {
      background-color: var(--sqm-secondary-button-background-hover);
      color: var(--sqm-secondary-button-color-hover);
      border-color: var(--sqm-secondary-button-border-color-hover);
    }
  `;
    return (index.h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.scroll, size: this.size, pill: this.pill, circle: this.circle }, index.h("style", { type: "text/css" }, vanillaStyleString), (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;
