@stihl-design-system/components/scroller.CQxmQU6U.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsxs as J, jsx as w } from "react/jsx-runtime";
import { d as K } from "./chunks/index.CgTHIF3K.js";
import { c as y } from "./chunks/index.CEyLAtio.js";
import { useState as M, useRef as T } from "react";
import { i as j, g as A } from "./chunks/is-animation-disabled.CUl4N3LI.js";
import { g as Q } from "./chunks/helpers.BbWkXTr3.js";
import { u as O } from "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
import { D as $ } from "./chunks/Button.Cf1CKq8N.js";
import './assets/scroller.Hszs1Yq4.css';const U = "ds-scroller_root_3ktti_1", Y = "ds-scroller_scroll-wrapper_3ktti_6", Z = "ds-scroller_scroller_3ktti_45", tt = "ds-scroller_scroll-button_3ktti_60", et = "ds-scroller_scroll-button--hidden_3ktti_65", rt = "ds-scroller_scroll-button--right_3ktti_69", n = {
  root: U,
  scrollWrapper: Y,
  scroller: Z,
  scrollButton: tt,
  scrollButtonHidden: et,
  scrollButtonRight: rt
}, dt = (c) => {
  const t = K.c(37);
  let a, f, u, r;
  t[0] !== c ? ({
    children: a,
    className: f,
    scrollToPosition: r,
    ...u
  } = c, t[0] = c, t[1] = a, t[2] = f, t[3] = u, t[4] = r) : (a = t[1], f = t[2], u = t[3], r = t[4]);
  const [z, q] = M(!1), [H, V] = M(!1), S = T(null), e = T(null), X = T(!1), D = () => {
    I();
  };
  let R;
  t[5] === Symbol.for("react.memo_cache_sentinel") ? (R = [], t[5] = R) : R = t[5], O(() => {
    const l = new ResizeObserver(D);
    return e.current && l.observe(e.current), () => {
      l.disconnect();
    };
  }, R);
  let x;
  t[6] !== r ? (x = [r], t[6] = r, t[7] = x) : x = t[7], O(() => {
    var s;
    const l = ["18px 'STIHL Contraface Digital Text Bold'"];
    return Promise.all(l.map(ot)).then(() => {
      X.current = !0, I(), F();
    }).catch(lt), (s = e.current) == null || s.addEventListener("scroll", D), () => {
      var i;
      (i = e.current) == null || i.removeEventListener("scroll", D);
    };
  }, x);
  const F = () => {
    e.current && (r != null && r.scrollPosition) && e.current.scrollTo({
      left: r.scrollPosition,
      behavior: j() || !r.isSmooth ? "instant" : "smooth"
    });
  }, I = () => {
    if (e.current && S.current) {
      const l = A(e.current), s = A(S.current);
      q(s.left < l.left), V(s.right > l.right + 4);
    }
  };
  let o;
  if (t[8] === Symbol.for("react.memo_cache_sentinel")) {
    o = (s) => {
      var N;
      const i = l(s);
      (N = e.current) == null || N.scrollTo({
        left: i,
        behavior: j() ? "instant" : "smooth"
      });
    };
    const l = (s) => {
      if (!S.current || !e.current)
        return 0;
      const {
        scrollLeft: i,
        offsetWidth: N
      } = e.current, W = Math.round(N * 0.2);
      return s === "next" ? i + W : i - W;
    };
    t[8] = o;
  } else
    o = t[8];
  let L;
  t[9] === Symbol.for("react.memo_cache_sentinel") ? (L = y(n.scroller), t[9] = L) : L = t[9];
  const G = L;
  let m;
  t[10] !== f ? (m = y(n.root, f), t[10] = f, t[11] = m) : m = t[11];
  const C = z || H ? 0 : -1;
  let d;
  t[12] !== a ? (d = /* @__PURE__ */ w("div", { className: G, ref: S, children: a }), t[12] = a, t[13] = d) : d = t[13];
  let h;
  t[14] !== C || t[15] !== d ? (h = /* @__PURE__ */ w("div", { className: n.scrollWrapper, ref: e, tabIndex: C, children: d }), t[14] = C, t[15] = d, t[16] = h) : h = t[16];
  const E = !z;
  let p;
  t[17] !== E ? (p = y(n.scrollButton, {
    [n.scrollButtonHidden]: E
  }), t[17] = E, t[18] = p) : p = t[18];
  let _;
  t[19] !== o ? (_ = () => o("prev"), t[19] = o, t[20] = _) : _ = t[20];
  let b;
  t[21] !== _ || t[22] !== p ? (b = /* @__PURE__ */ w($, { variant: "filled", className: p, hideLabel: !0, iconName: "chevron-left", tabIndex: -1, size: "small", onClick: _, children: "Left" }), t[21] = _, t[22] = p, t[23] = b) : b = t[23];
  const P = !H;
  let B;
  t[24] !== P ? (B = y(n.scrollButton, n.scrollButtonRight, {
    [n.scrollButtonHidden]: P
  }), t[24] = P, t[25] = B) : B = t[25];
  let g;
  t[26] !== o ? (g = () => o("next"), t[26] = o, t[27] = g) : g = t[27];
  let v;
  t[28] !== B || t[29] !== g ? (v = /* @__PURE__ */ w($, { variant: "filled", className: B, hideLabel: !0, iconName: "chevron-right", tabIndex: -1, size: "small", onClick: g, children: "Right" }), t[28] = B, t[29] = g, t[30] = v) : v = t[30];
  let k;
  return t[31] !== u || t[32] !== b || t[33] !== v || t[34] !== m || t[35] !== h ? (k = /* @__PURE__ */ J("div", { className: m, ...u, children: [
    h,
    b,
    v
  ] }), t[31] = u, t[32] = b, t[33] = v, t[34] = m, t[35] = h, t[36] = k) : k = t[36], k;
};
function ot(c) {
  return document.fonts.load(c);
}
function lt(c) {
  throw new Error(Q("DSScroller", `The component requires the fonts to be loaded: ${c}`));
}
export {
  dt as DSScroller
};