@hakit/components/dist/es/Cards/MediaPlayerCard/Marquee.js

A series of components to work with @hakit/core

import { j as s, a as X } from "../../../emotion-react-jsx-runtime.browser.esm-Tq_btErF.js";
import { c as U } from "../../../emotion-styled-base.browser.esm-Dyg8Y4aq.js";
import { forwardRef as H, useState as g, useRef as _, useCallback as D, useEffect as y, useMemo as c, Children as w, Fragment as F } from "react";
function ee() {
  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
const ae = /* @__PURE__ */ U("div", process.env.NODE_ENV === "production" ? {
  target: "erk7x4w0"
} : {
  target: "erk7x4w0",
  label: "StyledMarquee"
})(process.env.NODE_ENV === "production" ? {
  name: "10ku7y1",
  styles: 'overflow-x:hidden!important;display:flex!important;flex-direction:row!important;position:relative;width:var(--ha-marquee-width);transform:var(--ha-marquee-transform);&:hover div{animation-play-state:var(--ha-marquee-pause-on-hover);}&:active div{animation-play-state:var(--ha-marquee-pause-on-click);}.overlay{position:absolute;width:100%;height:100%;&::before,&::after{background:linear-gradient(to right, var(--ha-marquee-gradient-color));content:"";height:100%;position:absolute;width:var(--ha-marquee-gradient-width);z-index:2;}&::after{right:0;top:0;transform:rotateZ(180deg);}&::before{left:0;top:0;}}.marquee{flex:0 0 auto;min-width:var(--ha-marquee-min-width);z-index:1;display:flex;flex-direction:row;align-items:center;animation:scroll var(--ha-marquee-duration) linear var(--ha-marquee-delay) var(--ha-marquee-iteration-count);animation-play-state:var(--ha-marquee-play);animation-delay:var(--ha-marquee-delay);animation-direction:var(--ha-marquee-direction);@keyframes scroll{0%{transform:translateX(0%);}100%{transform:translateX(-100%);}}}.initial-child-container{flex:0 0 auto;display:flex;min-width:auto;flex-direction:row;}.child{transform:var(--ha-marquee-transform);&.last-child{padding-right:var(--ha-marquee-padding-right);}}'
} : {
  name: "10ku7y1",
  styles: 'overflow-x:hidden!important;display:flex!important;flex-direction:row!important;position:relative;width:var(--ha-marquee-width);transform:var(--ha-marquee-transform);&:hover div{animation-play-state:var(--ha-marquee-pause-on-hover);}&:active div{animation-play-state:var(--ha-marquee-pause-on-click);}.overlay{position:absolute;width:100%;height:100%;&::before,&::after{background:linear-gradient(to right, var(--ha-marquee-gradient-color));content:"";height:100%;position:absolute;width:var(--ha-marquee-gradient-width);z-index:2;}&::after{right:0;top:0;transform:rotateZ(180deg);}&::before{left:0;top:0;}}.marquee{flex:0 0 auto;min-width:var(--ha-marquee-min-width);z-index:1;display:flex;flex-direction:row;align-items:center;animation:scroll var(--ha-marquee-duration) linear var(--ha-marquee-delay) var(--ha-marquee-iteration-count);animation-play-state:var(--ha-marquee-play);animation-delay:var(--ha-marquee-delay);animation-direction:var(--ha-marquee-direction);@keyframes scroll{0%{transform:translateX(0%);}100%{transform:translateX(-100%);}}}.initial-child-container{flex:0 0 auto;display:flex;min-width:auto;flex-direction:row;}.child{transform:var(--ha-marquee-transform);&.last-child{padding-right:var(--ha-marquee-padding-right);}}',
  toString: ee
}), oe = H(function({
  style: I = {},
  className: O = "",
  autoFill: r = !1,
  play: u = !0,
  pauseOnHover: x = !1,
  pauseOnClick: b = !1,
  direction: e = "left",
  speed: f = 50,
  delay: z = 0,
  loop: N = 0,
  gradient: B = !1,
  gradientColor: R = [255, 255, 255],
  gradientWidth: v = 200,
  onFinish: G,
  onCycleComplete: T,
  onMount: S,
  children: o
}, V) {
  const [$, Z] = g(0), [q, Y] = g(0), [p, A] = g(1), [k, J] = g(!1), K = _(null), t = V || K, l = _(null), m = _(null), d = D(() => {
    if (l.current && t.current) {
      const a = t.current.getBoundingClientRect(), h = l.current.getBoundingClientRect();
      let n = a.width, i = h.width;
      (e === "up" || e === "down") && (n = a.height, i = h.height), A(r && n && i && i < n ? Math.ceil(n / i) : 1), Z(n), Y(i);
    }
  }, [r, t, e]);
  y(() => {
    k && (d(), l.current && t.current && (m.current = new ResizeObserver(() => d()), m.current.observe(t.current), m.current.observe(l.current)));
  }, [d, t, k]), y(() => {
    d();
  }, [d, o]), y(() => (J(!0), () => {
    m.current && m.current.disconnect();
  }), []), y(() => {
    typeof S == "function" && S();
  }, [S]);
  const j = c(() => r ? q * p / f : q < $ ? $ / f : q / f, [r, $, q, p, f]), E = `rgba(${R[0]}, ${R[1]}, ${R[2]}`, L = c(() => ({
    ...I,
    "--ha-marquee-pause-on-hover": !u || x ? "paused" : "running",
    "--ha-marquee-pause-on-click": !u || x && !b || b ? "paused" : "running",
    "--ha-marquee-width": e === "up" || e === "down" ? "100vh" : "100%",
    "--ha-marquee-transform": e === "up" ? "rotate(-90deg)" : e === "down" ? "rotate(90deg)" : "none"
  }), [I, u, x, b, e]), P = c(() => ({
    "--ha-marquee-gradient-color": `${E}, 1), ${E}, 0)`,
    "--ha-marquee-gradient-width": typeof v == "number" ? `${v}px` : v
  }), [E, v]), C = c(() => ({
    "--ha-marquee-play": u ? "running" : "paused",
    "--ha-marquee-direction": e === "left" ? "normal" : "reverse",
    "--ha-marquee-duration": `${j}s`,
    "--ha-marquee-delay": `${z}s`,
    "--ha-marquee-iteration-count": N > 0 ? `${N}` : "infinite",
    "--ha-marquee-min-width": r ? "auto" : "100%",
    "--ha-marquee-padding-right": r ? "4rem" : "0"
  }), [u, e, j, z, N, r]), M = c(() => ({
    "--ha-marquee-transform": e === "up" ? "rotate(90deg)" : e === "down" ? "rotate(-90deg)" : "none"
  }), [e]), W = D((a) => [...Array(Number.isFinite(a) && a >= 0 ? a : 0)].map((h, n) => /* @__PURE__ */ s(F, { children: w.map(o, (i, Q) => /* @__PURE__ */ s("div", { style: M, className: `child ${Q === w.toArray(o).length - 1 ? "last-child" : ""}`, children: i })) }, n)), [M, o]);
  return k ? /* @__PURE__ */ X(ae, { ref: t, style: L, className: "marquee-container " + O, children: [
    B && /* @__PURE__ */ s("div", { style: P, className: "overlay" }),
    /* @__PURE__ */ X("div", { className: "marquee", style: C, onAnimationIteration: T, onAnimationEnd: G, children: [
      /* @__PURE__ */ s("div", { className: "initial-child-container", ref: l, children: w.map(o, (a, h) => /* @__PURE__ */ s("div", { style: M, className: `child ${h === w.toArray(o).length - 1 ? "last-child" : ""}`, children: a })) }),
      W(p - 1)
    ] }),
    /* @__PURE__ */ s("div", { className: "marquee", style: C, children: W(p) })
  ] }) : null;
});
export {
  oe as Marquee
};
//# sourceMappingURL=Marquee.js.map