dipping-charts 0.1.0

package/dist/react/components/IndicatorSettings.js

@@ -0,0 +1,748 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useState as w, useRef as z, useEffect as C } from "react";
+import { createPortal as N } from "react-dom";
+import { getLocaleStrings as B } from "../locale.js";
+const T = [
+  "#3C4043",
+  "#1A73E8",
+  "#9334E6",
+  "#B80000",
+  "#E37400",
+  "#F9AB00",
+  "#007B83",
+  "#1E8E3E",
+  "#5F6368",
+  "#4285F4",
+  "#A142F4",
+  "#D93025",
+  "#F57C00",
+  "#FDD835",
+  "#12B5CB",
+  "#34A853",
+  "#9AA0A6",
+  "#8AB4F8",
+  "#C58AF9",
+  "#EE675C",
+  "#FF8A65",
+  "#FFB300",
+  "#4DB6AC",
+  "#81C995",
+  "#DADCE0",
+  "#AECBFA",
+  "#D7AEFB",
+  "#F28B82",
+  "#FFAB91",
+  "#FFD54F",
+  "#80DEEA",
+  "#A5D6A7"
+], k = ["#26a69a", "#ef5350", "#2196f3", "#ff6f00", "#ab47bc", "#66bb6a", "#ffa726", "#42a5f5"];
+function R(o) {
+  return {
+    sma: { title: o.ind_sma, desc: o.ind_sma_desc, defaultValue: 20 },
+    ema: { title: o.ind_ema, desc: o.ind_ema_desc, defaultValue: 12 },
+    rsi: { title: o.ind_rsi, desc: o.ind_rsi_desc, defaultValue: 14 },
+    macd: { title: o.ind_macd, desc: o.ind_macd_desc, defaultValue: 26 },
+    bbands: { title: o.ind_bbands, desc: o.ind_bbands_desc, defaultValue: 20 },
+    stochastic: { title: o.ind_stochastic, desc: o.ind_stochastic_desc, defaultValue: 14 },
+    atr: { title: o.ind_atr, desc: o.ind_atr_desc, defaultValue: 14 },
+    vwap: { title: o.ind_vwap, desc: o.ind_vwap_desc, defaultValue: 0 },
+    williamsR: { title: o.ind_williamsR, desc: o.ind_williamsR_desc, defaultValue: 14 }
+  };
+}
+function u({ currentColor: o, onSelect: f, onClose: g, position: s, colorTitle: v = "Color" }) {
+  const b = z(null);
+  C(() => {
+    const t = (d) => {
+      b.current && !b.current.contains(d.target) && g();
+    }, y = setTimeout(() => {
+      document.addEventListener("mousedown", t);
+    }, 100);
+    return () => {
+      clearTimeout(y), document.removeEventListener("mousedown", t);
+    };
+  }, [g]);
+  const x = /* @__PURE__ */ r(
+    "div",
+    {
+      ref: b,
+      className: "color-palette-popup show",
+      style: {
+        top: s.top,
+        left: s.left
+      },
+      onClick: (t) => t.stopPropagation(),
+      children: [
+        /* @__PURE__ */ e("div", { className: "color-palette-title", children: v }),
+        /* @__PURE__ */ e("div", { className: "color-palette-grid", children: T.map((t) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: `color-palette-item ${t === o ? "selected" : ""}`,
+            style: { background: t },
+            onClick: (y) => {
+              y.stopPropagation(), f(t), g();
+            }
+          },
+          t
+        )) })
+      ]
+    }
+  );
+  return N(x, document.body);
+}
+function A({
+  indicator: o,
+  configs: f,
+  isChecked: g,
+  onConfigChange: s,
+  macdColors: v,
+  onMacdColorsChange: b,
+  locale: x = "en"
+}) {
+  const t = B(x), y = R(t), [d, a] = w(null);
+  if (!o)
+    return /* @__PURE__ */ e("div", { className: "indicator-empty-state", children: t.selectIndicator });
+  const c = y[o], n = f[o];
+  if (!g || n.length === 0)
+    return /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ e("div", { className: "indicator-settings-title", children: c.title }),
+      /* @__PURE__ */ e("div", { className: "indicator-settings-desc", children: c.desc }),
+      /* @__PURE__ */ e("div", { className: "indicator-empty-state", children: t.enableIndicator })
+    ] });
+  const h = (l, i, p) => {
+    l.preventDefault(), l.stopPropagation();
+    const m = l.target.getBoundingClientRect();
+    a({
+      index: i,
+      type: p,
+      position: { top: m.bottom + 5, left: m.left }
+    });
+  };
+  if (o === "rsi") {
+    const l = n[0];
+    return /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ e("div", { className: "indicator-settings-title", children: c.title }),
+      /* @__PURE__ */ e("div", { className: "indicator-settings-desc", children: c.desc }),
+      /* @__PURE__ */ r("div", { style: { marginTop: 16 }, children: [
+        /* @__PURE__ */ r("div", { style: { display: "flex", gap: 12, alignItems: "flex-start", marginBottom: 12 }, children: [
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.color }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "period-color-picker",
+                style: { background: l.color, width: "100%", height: 40, cursor: "pointer", borderRadius: 6, border: "1px solid #e0e0e0" },
+                onClick: (i) => h(i, 0)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.period }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "number",
+                value: l.value,
+                onChange: (i) => s(o, [{ ...l, value: parseInt(i.target.value) || 14 }]),
+                min: "1",
+                max: "500",
+                style: { width: "100%", padding: 8, border: "1px solid #e0e0e0", borderRadius: 6, fontSize: 14, height: 40, boxSizing: "border-box" }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { style: { display: "flex", gap: 12, alignItems: "flex-start" }, children: [
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.oversold }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "number",
+                value: l.oversold ?? 30,
+                onChange: (i) => s(o, [{ ...l, oversold: parseInt(i.target.value) || 30 }]),
+                min: "0",
+                max: "100",
+                style: { width: "100%", padding: 8, border: "1px solid #e0e0e0", borderRadius: 6, fontSize: 14, height: 40, boxSizing: "border-box" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.overbought }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "number",
+                value: l.overbought ?? 70,
+                onChange: (i) => s(o, [{ ...l, overbought: parseInt(i.target.value) || 70 }]),
+                min: "0",
+                max: "100",
+                style: { width: "100%", padding: 8, border: "1px solid #e0e0e0", borderRadius: 6, fontSize: 14, height: 40, boxSizing: "border-box" }
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      d && d.index === 0 && /* @__PURE__ */ e(
+        u,
+        {
+          currentColor: l.color,
+          onSelect: (i) => s(o, [{ ...l, color: i }]),
+          onClose: () => a(null),
+          position: d.position,
+          colorTitle: t.colorPaletteTitle
+        }
+      )
+    ] });
+  }
+  if (o === "macd") {
+    const l = n[0];
+    return /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ e("div", { className: "indicator-settings-title", children: c.title }),
+      /* @__PURE__ */ e("div", { className: "indicator-settings-desc", children: c.desc }),
+      /* @__PURE__ */ r("div", { style: { marginTop: 16 }, children: [
+        /* @__PURE__ */ r("div", { style: { display: "flex", gap: 8, marginBottom: 12 }, children: [
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.ind_macd }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "period-color-picker",
+                style: { background: v.line, width: "100%", height: 40, cursor: "pointer", borderRadius: 6, border: "1px solid #e0e0e0" },
+                onClick: (i) => h(i, void 0, "macd-line")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.signal }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "period-color-picker",
+                style: { background: v.signal, width: "100%", height: 40, cursor: "pointer", borderRadius: 6, border: "1px solid #e0e0e0" },
+                onClick: (i) => h(i, void 0, "macd-signal")
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { style: { display: "flex", gap: 8, marginBottom: 12 }, children: [
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.bullish }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "period-color-picker",
+                style: { background: l.histUpColor || "#26a69a", width: "100%", height: 40, cursor: "pointer", borderRadius: 6, border: "1px solid #e0e0e0" },
+                onClick: (i) => h(i, void 0, "hist-up")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.bearish }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "period-color-picker",
+                style: { background: l.histDownColor || "#ef5350", width: "100%", height: 40, cursor: "pointer", borderRadius: 6, border: "1px solid #e0e0e0" },
+                onClick: (i) => h(i, void 0, "hist-down")
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { style: { display: "flex", gap: 8 }, children: [
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.fast }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "number",
+                value: l.fastPeriod,
+                onChange: (i) => s(o, [{ ...l, fastPeriod: parseInt(i.target.value) || 12 }]),
+                min: "1",
+                max: "500",
+                style: { width: "100%", padding: 8, border: "1px solid #e0e0e0", borderRadius: 6, fontSize: 14, height: 40, boxSizing: "border-box" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.slow }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "number",
+                value: l.slowPeriod,
+                onChange: (i) => s(o, [{ ...l, slowPeriod: parseInt(i.target.value) || 26 }]),
+                min: "1",
+                max: "500",
+                style: { width: "100%", padding: 8, border: "1px solid #e0e0e0", borderRadius: 6, fontSize: 14, height: 40, boxSizing: "border-box" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.signal }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "number",
+                value: l.signalPeriod,
+                onChange: (i) => s(o, [{ ...l, signalPeriod: parseInt(i.target.value) || 9 }]),
+                min: "1",
+                max: "500",
+                style: { width: "100%", padding: 8, border: "1px solid #e0e0e0", borderRadius: 6, fontSize: 14, height: 40, boxSizing: "border-box" }
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      d && d.type === "macd-line" && /* @__PURE__ */ e(
+        u,
+        {
+          currentColor: v.line,
+          onSelect: (i) => b({ ...v, line: i }),
+          onClose: () => a(null),
+          position: d.position,
+          colorTitle: t.colorPaletteTitle
+        }
+      ),
+      d && d.type === "macd-signal" && /* @__PURE__ */ e(
+        u,
+        {
+          currentColor: v.signal,
+          onSelect: (i) => b({ ...v, signal: i }),
+          onClose: () => a(null),
+          position: d.position,
+          colorTitle: t.colorPaletteTitle
+        }
+      ),
+      d && d.type === "hist-up" && /* @__PURE__ */ e(
+        u,
+        {
+          currentColor: l.histUpColor || "#26a69a",
+          onSelect: (i) => s(o, [{ ...l, histUpColor: i }]),
+          onClose: () => a(null),
+          position: d.position,
+          colorTitle: t.colorPaletteTitle
+        }
+      ),
+      d && d.type === "hist-down" && /* @__PURE__ */ e(
+        u,
+        {
+          currentColor: l.histDownColor || "#ef5350",
+          onSelect: (i) => s(o, [{ ...l, histDownColor: i }]),
+          onClose: () => a(null),
+          position: d.position,
+          colorTitle: t.colorPaletteTitle
+        }
+      )
+    ] });
+  }
+  if (o === "bbands") {
+    const l = n[0];
+    return /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ e("div", { className: "indicator-settings-title", children: c.title }),
+      /* @__PURE__ */ e("div", { className: "indicator-settings-desc", children: c.desc }),
+      /* @__PURE__ */ r("div", { style: { marginTop: 16 }, children: [
+        /* @__PURE__ */ r("div", { style: { display: "flex", gap: 8, marginBottom: 12 }, children: [
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.upper }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "period-color-picker",
+                style: { background: l.upperColor, width: "100%", height: 40, cursor: "pointer", borderRadius: 6, border: "1px solid #e0e0e0" },
+                onClick: (i) => h(i, void 0, "bb-upper")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.middle }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "period-color-picker",
+                style: { background: l.middleColor, width: "100%", height: 40, cursor: "pointer", borderRadius: 6, border: "1px solid #e0e0e0" },
+                onClick: (i) => h(i, void 0, "bb-middle")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.lower }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "period-color-picker",
+                style: { background: l.lowerColor, width: "100%", height: 40, cursor: "pointer", borderRadius: 6, border: "1px solid #e0e0e0" },
+                onClick: (i) => h(i, void 0, "bb-lower")
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { style: { display: "flex", gap: 8 }, children: [
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.period }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "number",
+                value: l.value,
+                onChange: (i) => s(o, [{ ...l, value: parseInt(i.target.value) || 20 }]),
+                min: "1",
+                max: "500",
+                style: { width: "100%", padding: 8, border: "1px solid #e0e0e0", borderRadius: 6, fontSize: 14, height: 40 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.stdDev }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "number",
+                value: l.stdDev,
+                onChange: (i) => s(o, [{ ...l, stdDev: parseFloat(i.target.value) || 2 }]),
+                min: "0.5",
+                max: "5",
+                step: "0.1",
+                style: { width: "100%", padding: 8, border: "1px solid #e0e0e0", borderRadius: 6, fontSize: 14, height: 40 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.thickness }),
+            /* @__PURE__ */ r(
+              "div",
+              {
+                style: { width: "100%", height: 40, border: "1px solid #e0e0e0", borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 14, fontWeight: 500, cursor: "pointer", background: "white" },
+                onClick: () => s(o, [{ ...l, thickness: l.thickness % 5 + 1 }]),
+                children: [
+                  l.thickness,
+                  "px"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      d && d.type === "bb-upper" && /* @__PURE__ */ e(
+        u,
+        {
+          currentColor: l.upperColor,
+          onSelect: (i) => s(o, [{ ...l, upperColor: i }]),
+          onClose: () => a(null),
+          position: d.position,
+          colorTitle: t.colorPaletteTitle
+        }
+      ),
+      d && d.type === "bb-middle" && /* @__PURE__ */ e(
+        u,
+        {
+          currentColor: l.middleColor,
+          onSelect: (i) => s(o, [{ ...l, middleColor: i }]),
+          onClose: () => a(null),
+          position: d.position,
+          colorTitle: t.colorPaletteTitle
+        }
+      ),
+      d && d.type === "bb-lower" && /* @__PURE__ */ e(
+        u,
+        {
+          currentColor: l.lowerColor,
+          onSelect: (i) => s(o, [{ ...l, lowerColor: i }]),
+          onClose: () => a(null),
+          position: d.position,
+          colorTitle: t.colorPaletteTitle
+        }
+      )
+    ] });
+  }
+  if (o === "stochastic") {
+    const l = n[0];
+    return /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ e("div", { className: "indicator-settings-title", children: c.title }),
+      /* @__PURE__ */ e("div", { className: "indicator-settings-desc", children: c.desc }),
+      /* @__PURE__ */ r("div", { style: { marginTop: 16 }, children: [
+        /* @__PURE__ */ r("div", { style: { display: "flex", gap: 8, marginBottom: 12 }, children: [
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.kLine }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "period-color-picker",
+                style: { background: l.kColor, width: "100%", height: 40, cursor: "pointer", borderRadius: 6, border: "1px solid #e0e0e0" },
+                onClick: (i) => h(i, void 0, "stoch-k")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.dLine }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "period-color-picker",
+                style: { background: l.dColor, width: "100%", height: 40, cursor: "pointer", borderRadius: 6, border: "1px solid #e0e0e0" },
+                onClick: (i) => h(i, void 0, "stoch-d")
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { style: { display: "flex", gap: 8 }, children: [
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.kPeriod }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "number",
+                value: l.kPeriod,
+                onChange: (i) => s(o, [{ ...l, kPeriod: parseInt(i.target.value) || 14 }]),
+                min: "1",
+                max: "500",
+                style: { width: "100%", padding: 8, border: "1px solid #e0e0e0", borderRadius: 6, fontSize: 14, height: 40, boxSizing: "border-box" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.dPeriod }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "number",
+                value: l.dPeriod,
+                onChange: (i) => s(o, [{ ...l, dPeriod: parseInt(i.target.value) || 3 }]),
+                min: "1",
+                max: "500",
+                style: { width: "100%", padding: 8, border: "1px solid #e0e0e0", borderRadius: 6, fontSize: 14, height: 40, boxSizing: "border-box" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.smooth }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "number",
+                value: l.smooth,
+                onChange: (i) => s(o, [{ ...l, smooth: parseInt(i.target.value) || 3 }]),
+                min: "1",
+                max: "500",
+                style: { width: "100%", padding: 8, border: "1px solid #e0e0e0", borderRadius: 6, fontSize: 14, height: 40, boxSizing: "border-box" }
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      d && d.type === "stoch-k" && /* @__PURE__ */ e(
+        u,
+        {
+          currentColor: l.kColor,
+          onSelect: (i) => s(o, [{ ...l, kColor: i }]),
+          onClose: () => a(null),
+          position: d.position,
+          colorTitle: t.colorPaletteTitle
+        }
+      ),
+      d && d.type === "stoch-d" && /* @__PURE__ */ e(
+        u,
+        {
+          currentColor: l.dColor,
+          onSelect: (i) => s(o, [{ ...l, dColor: i }]),
+          onClose: () => a(null),
+          position: d.position,
+          colorTitle: t.colorPaletteTitle
+        }
+      )
+    ] });
+  }
+  if (o === "vwap") {
+    const l = n[0];
+    return /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ e("div", { className: "indicator-settings-title", children: c.title }),
+      /* @__PURE__ */ e("div", { className: "indicator-settings-desc", children: c.desc }),
+      /* @__PURE__ */ e("div", { style: { marginTop: 16 }, children: /* @__PURE__ */ r("div", { style: { display: "flex", gap: 12, alignItems: "flex-start" }, children: [
+        /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.color }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "period-color-picker",
+              style: { background: l.color, width: "100%", height: 40, cursor: "pointer", borderRadius: 6, border: "1px solid #e0e0e0" },
+              onClick: (i) => h(i, 0)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.thickness }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              style: { width: "100%", height: 40, border: "1px solid #e0e0e0", borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 14, fontWeight: 500, cursor: "pointer", background: "white" },
+              onClick: () => s(o, [{ ...l, thickness: l.thickness % 5 + 1 }]),
+              children: [
+                l.thickness,
+                "px"
+              ]
+            }
+          )
+        ] })
+      ] }) }),
+      d && d.index === 0 && /* @__PURE__ */ e(
+        u,
+        {
+          currentColor: l.color,
+          onSelect: (i) => s(o, [{ ...l, color: i }]),
+          onClose: () => a(null),
+          position: d.position,
+          colorTitle: t.colorPaletteTitle
+        }
+      )
+    ] });
+  }
+  if (o === "atr" || o === "williamsR") {
+    const l = n[0];
+    return /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ e("div", { className: "indicator-settings-title", children: c.title }),
+      /* @__PURE__ */ e("div", { className: "indicator-settings-desc", children: c.desc }),
+      /* @__PURE__ */ e("div", { style: { marginTop: 16 }, children: /* @__PURE__ */ r("div", { style: { display: "flex", gap: 12, alignItems: "flex-start" }, children: [
+        /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.color }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "period-color-picker",
+              style: { background: l.color, width: "100%", height: 40, cursor: "pointer", borderRadius: 6, border: "1px solid #e0e0e0" },
+              onClick: (i) => h(i, 0)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ e("div", { style: { fontSize: 13, color: "#666", marginBottom: 8 }, children: t.period }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "number",
+              value: l.value,
+              onChange: (i) => s(o, [{ ...l, value: parseInt(i.target.value) || 14 }]),
+              min: "1",
+              max: "500",
+              style: { width: "100%", padding: 8, border: "1px solid #e0e0e0", borderRadius: 6, fontSize: 14, height: 40, boxSizing: "border-box" }
+            }
+          )
+        ] })
+      ] }) }),
+      d && d.index === 0 && /* @__PURE__ */ e(
+        u,
+        {
+          currentColor: l.color,
+          onSelect: (i) => s(o, [{ ...l, color: i }]),
+          onClose: () => a(null),
+          position: d.position,
+          colorTitle: t.colorPaletteTitle
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ e("div", { className: "indicator-settings-title", children: c.title }),
+    /* @__PURE__ */ e("div", { className: "indicator-settings-desc", children: c.desc }),
+    n.map((l, i) => /* @__PURE__ */ r("div", { className: "indicator-period-row", children: [
+      /* @__PURE__ */ e("span", { className: "period-label-col", children: t.periodN(i + 1) }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "period-color-picker",
+          style: { background: l.color, cursor: "pointer" },
+          onClick: (p) => h(p, i)
+        }
+      ),
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: "period-thickness-display",
+          onClick: () => {
+            const p = [...n];
+            p[i] = { ...p[i], thickness: p[i].thickness % 5 + 1 }, s(o, p);
+          },
+          children: [
+            l.thickness,
+            "px"
+          ]
+        }
+      ),
+      /* @__PURE__ */ r(
+        "select",
+        {
+          className: "period-source-dropdown",
+          value: l.source,
+          onChange: (p) => {
+            const m = [...n];
+            m[i] = { ...m[i], source: p.target.value }, s(o, m);
+          },
+          children: [
+            /* @__PURE__ */ e("option", { value: "close", children: t.src_close }),
+            /* @__PURE__ */ e("option", { value: "open", children: t.src_open }),
+            /* @__PURE__ */ e("option", { value: "high", children: t.src_high }),
+            /* @__PURE__ */ e("option", { value: "low", children: t.src_low })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "number",
+          className: "period-value-field",
+          value: l.value,
+          onChange: (p) => {
+            const m = [...n];
+            m[i] = { ...m[i], value: parseInt(p.target.value) || 1 }, s(o, m);
+          },
+          min: "1",
+          max: "500"
+        }
+      ),
+      n.length > 1 && /* @__PURE__ */ e(
+        "button",
+        {
+          className: "period-delete-btn",
+          onClick: () => {
+            const p = n.filter((m, S) => S !== i);
+            s(o, p);
+          },
+          children: "×"
+        }
+      )
+    ] }, i)),
+    /* @__PURE__ */ e(
+      "button",
+      {
+        className: "add-period-button",
+        onClick: () => {
+          const l = n[n.length - 1], i = (k.indexOf(l.color) + 1) % k.length;
+          s(o, [
+            ...n,
+            {
+              color: k[i],
+              thickness: 2,
+              source: "close",
+              value: c.defaultValue
+            }
+          ]);
+        },
+        children: t.addPeriod
+      }
+    ),
+    d && d.index !== void 0 && /* @__PURE__ */ e(
+      u,
+      {
+        currentColor: n[d.index].color,
+        onSelect: (l) => {
+          const i = [...n];
+          i[d.index] = { ...i[d.index], color: l }, s(o, i);
+        },
+        onClose: () => a(null),
+        position: d.position,
+        colorTitle: t.colorPaletteTitle
+      }
+    )
+  ] });
+}
+export {
+  A as IndicatorSettings
+};
+//# sourceMappingURL=IndicatorSettings.js.map