import { r as n, h as e } from "./reactcomponent-44b70bf6.mjs";
import "react";
import "react-dom";
const i = 'a.mi-button{cursor:default}.mi-button{border-radius:4px;border-width:1px;border-style:solid;font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;font-weight:500;padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px;display:inline-flex;align-items:center}.mi-button:disabled{opacity:0.48;cursor:not-allowed}.mi-button object{filter:invert(9%) sepia(13%) saturate(692%) hue-rotate(185deg) brightness(98%) contrast(91%);width:16px;height:16px}.mi-button--small{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:0.875rem;height:32px}.mi-button--small object{width:16px;height:16px}.mi-button--large{padding-left:16px;padding-right:16px;font-size:1.25rem}.mi-button--large object{width:20px;height:20px}.mi-button--full-width{width:100%;justify-content:center}.mi-button--icon-left{padding-left:12px}.mi-button--icon-left object{margin-right:8px}.mi-button--icon-right{padding-right:12px}.mi-button--icon-right object{margin-left:8px}.mi-button--icon-both{padding-top:12px;padding-bottom:12px}.mi-button--icon-both object:first-of-type{margin-right:8px}.mi-button--icon-both object:last-of-type{margin-left:8px}.mi-button--base{background:linear-gradient(#f5f7fa, #ebeff5);color:#1e2025;border-color:#c8d0e0}.mi-button--base:not(:disabled):hover{background:linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-button--base:not(:disabled):active{background:linear-gradient(#dee3ed, #ebeff5)}.mi-button--primary{color:#ffffff;border-color:#20693e;background:linear-gradient(#3ba064, #2a844e)}.mi-button--primary object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--primary:not(:disabled):hover{background:linear-gradient(#2a844e, #20693e)}.mi-button--primary:not(:disabled):active{background:linear-gradient(#20693e, #2a844e)}.mi-button--delete{background:linear-gradient(#f55151, #de1b1b);color:#ffffff;border-color:#ba0d0d}.mi-button--delete object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--delete:not(:disabled):hover{background:linear-gradient(#de1b1b, #ba0d0d)}.mi-button--delete:not(:disabled):active{background:linear-gradient(#ba0d0d, #de1b1b)}.mi-button--outline{color:#3071d9;border-color:#3071d9;background-color:transparent}.mi-button--outline object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--outline:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--outline:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-button--link{color:#3071d9;border-style:none;background-color:transparent;cursor:pointer}.mi-button--link object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--link:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--link:disabled:hover{cursor:not-allowed}.mi-button--link:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.scroll-buttons{height:100%;width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:16px}.scroll-buttons .btn{margin:0;padding:0;background:none;width:64px;height:64px;background-color:#ffffff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center}.scroll-buttons .btn mi-icon{width:32px}.scroll-buttons .btn:hover{background:none;background-color:#ffffff;cursor:pointer}.scroll-buttons .btn:disabled{opacity:1}.scroll-buttons .btn:disabled mi-icon{background-color:#a5a9af}', r = class {
  constructor(t) {
    n(this, t), this.scrollContainerElementRef = void 0, this.scrollLength = 100;
  }
  /**
   * Update scroll buttons enabled/disabled states.
   */
  async updateScrollButtons() {
    this.updateScrollButtonsState();
  }
  /**
   * Watch for container scroll events.
   */
  addScrollEventListener() {
    var t, o;
    (t = this.resizeObserver) === null || t === void 0 || t.disconnect(), (o = this.scrollContainerElementRef) === null || o === void 0 || o.addEventListener("scroll", () => {
      this.updateScrollButtonsState();
    }), this.scrollContainerElementRef && (this.resizeObserver = new ResizeObserver(() => {
      this.updateScrollButtonsState();
    }), this.resizeObserver.observe(this.scrollContainerElementRef));
  }
  /**
   * Adds scroll event listener to the container element when this component is first attached to the DOM.
   */
  connectedCallback() {
    this.addScrollEventListener();
  }
  /**
   * Disconnects ResizeObserver.
   */
  disconnectedCallback() {
    var t;
    (t = this.resizeObserver) === null || t === void 0 || t.disconnect();
  }
  /**
   * Updates enable/disable state for scroll up and down buttons.
   *
   * @returns {Promise<void>}
   */
  async updateScrollButtonsState() {
    this.scrollContainerElementRef.scrollTop === 0 ? this.upButtonElement.disabled = !0 : this.upButtonElement.disabled && (this.upButtonElement.disabled = !1), this.scrollContainerElementRef.scrollHeight - this.scrollContainerElementRef.scrollTop === this.scrollContainerElementRef.clientHeight && this.upButtonElement.disabled === !0 ? this.downButtonElement.disabled = !0 : this.scrollContainerElementRef.scrollHeight - this.scrollContainerElementRef.scrollTop > this.scrollContainerElementRef.clientHeight ? this.downButtonElement.disabled = !1 : this.downButtonElement.disabled = !0;
  }
  /**
   * Update scroll position.
   *
   * @param {number} value - Value to scroll.
   */
  updateScrollPosition(t) {
    "scrollBehavior" in document.documentElement.style ? this.scrollContainerElementRef.scroll({
      top: this.scrollContainerElementRef.scrollTop + t,
      behavior: "smooth"
    }) : this.scrollContainerElementRef.scrollTop = t;
  }
  /**
   * Render scroll buttons.
   *
   * @returns {JSX.Element}
   */
  render() {
    return e("div", { part: "container", class: "scroll-buttons" }, e("button", { part: "button button-up", class: "mi-button mi-button--base btn btn-up", type: "button", disabled: !0, "aria-label": "Scroll Up", ref: (t) => {
      this.upButtonElement = t;
    }, onClick: (t) => {
      t.stopPropagation(), this.updateScrollPosition(-this.scrollLength);
    } }, e("mi-icon", { "icon-name": "chevron-up" })), e("button", { part: "button button-down", class: "mi-button mi-button--base btn btn-down", type: "button", "aria-label": "Scroll Down", ref: (t) => {
      this.downButtonElement = t;
    }, onClick: (t) => {
      t.stopPropagation(), this.updateScrollPosition(this.scrollLength);
    } }, e("mi-icon", { "icon-name": "chevron-down" })));
  }
  static get watchers() {
    return {
      scrollContainerElementRef: ["addScrollEventListener"]
    };
  }
};
r.style = i;
export {
  r as mi_scroll_buttons
};
//# sourceMappingURL=mi-scroll-buttons.entry-ab84dbde.mjs.map
