dap-design-system/dist/components/scroll-area/scroll-area.component.js

Official design system for the DÁP (dap.gov.hu)

import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as b } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as g } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { html as v } from "../../node_modules/lit-html/static.js";
import { DdsElement as w } from "../../internal/dds-hu-element.js";
import _ from "./scroll-area.scss.js";
import { unsafeCSS as z } from "../../node_modules/@lit/reactive-element/css-tag.js";
var H = Object.defineProperty, y = (p, s, e, h) => {
  for (var r = void 0, a = p.length - 1, n; a >= 0; a--)
    (n = p[a]) && (r = n(s, e, r) || r);
  return r && H(s, e, r), r;
};
const c = class c extends w {
  constructor() {
    super(...arguments), this.orientation = "vertical", this.viewport = null, this.scrollbar = null, this.thumbHorizontal = null, this.thumbVertical = null, this.isDragging = !1, this.startY = 0, this.startScrollTop = 0;
  }
  firstUpdated() {
    var s, e, h, r;
    this.viewport = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
      ".scroll-area__viewport"
    ), this.scrollbar = (e = this.shadowRoot) == null ? void 0 : e.querySelector(
      ".scroll-area__scrollbar"
    ), this.thumbHorizontal = (h = this.shadowRoot) == null ? void 0 : h.querySelector(
      ".scroll-area__thumb--horizontal"
    ), this.thumbVertical = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
      ".scroll-area__thumb--vertical"
    ), this.viewport && this.scrollbar && (this.thumbHorizontal || this.thumbVertical) && this.setupScrollbar();
  }
  setupScrollbar() {
    var n, d;
    if (!this.viewport || !this.scrollbar || !this.thumbHorizontal && !this.thumbVertical)
      return;
    const s = () => {
      if (this.orientation === "vertical" || this.orientation === "both") {
        const { scrollHeight: t, clientHeight: i } = this.viewport, o = i / t * i;
        this.thumbVertical.style.height = `${o}px`;
      }
      if (this.orientation === "horizontal" || this.orientation === "both") {
        const { scrollWidth: t, clientWidth: i } = this.viewport, o = i / t * i;
        this.thumbHorizontal.style.width = `${o}px`;
      }
    }, e = () => {
      if (this.orientation === "vertical" || this.orientation === "both") {
        const { scrollTop: t, scrollHeight: i, clientHeight: o } = this.viewport, l = t / (i - o) * (o - this.thumbVertical.offsetHeight);
        this.thumbVertical.style.transform = `translateY(${l}px)`;
      }
      if (this.orientation === "horizontal" || this.orientation === "both") {
        const { scrollLeft: t, scrollWidth: i, clientWidth: o } = this.viewport, l = t / (i - o) * (o - this.thumbHorizontal.offsetWidth);
        this.thumbHorizontal.style.transform = `translateX(${l}px)`;
      }
    }, h = (t) => {
      t.preventDefault(), this.isDragging = !0, (this.orientation === "vertical" || this.orientation === "both") && (this.startY = t.clientY, this.startScrollTop = this.viewport.scrollTop), (this.orientation === "horizontal" || this.orientation === "both") && (this.startY = t.clientX, this.startScrollTop = this.viewport.scrollLeft), document.addEventListener("mousemove", r), document.addEventListener("mouseup", a);
    }, r = (t) => {
      if (this.isDragging) {
        if (this.orientation === "vertical" || this.orientation === "both") {
          const i = t.clientY - this.startY, { scrollHeight: o, clientHeight: l } = this.viewport, u = o / l;
          this.viewport.scrollTop = this.startScrollTop + i * u;
        }
        if (this.orientation === "horizontal" || this.orientation === "both") {
          const i = t.clientX - this.startY, { scrollWidth: o, clientWidth: l } = this.viewport, u = o / l;
          this.viewport.scrollLeft = this.startScrollTop + i * u;
        }
      }
    }, a = () => {
      this.isDragging = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", a);
    };
    s(), e(), this.viewport.addEventListener("scroll", e), this.viewport.addEventListener("resize", s), (n = this.thumbHorizontal) == null || n.addEventListener("mousedown", h), (d = this.thumbVertical) == null || d.addEventListener("mousedown", h);
  }
  getScrollbar(s) {
    return v`<div
      part="scrollbar"
      class=${f(
      "scroll-area__scrollbar",
      `scroll-area__scrollbar--${s}`
    )}>
      <div part="thumb" class="scroll-area__thumb--${s}"></div>
    </div> `;
  }
  render() {
    return v`
      <div part="base" class="scroll-area">
        <div part="viewport" class="scroll-area__viewport">
          <slot></slot>
        </div>

        ${this.orientation === "horizontal" || this.orientation === "both" ? this.getScrollbar("horizontal") : b}
        ${this.orientation === "vertical" || this.orientation === "both" ? this.getScrollbar("vertical") : b}
      </div>
    `;
  }
};
c.tagName = "dap-ds-scroll-area", c.styles = z(_);
let m = c;
y([
  g({ type: String })
], m.prototype, "orientation");
export {
  m as default
};
//# sourceMappingURL=scroll-area.component.js.map