@unoff/ui 1.21.0 → 1.21.2

package/dist/components/inputs/multiple-slider/MultipleSlider.js

@@ -1,20 +1,20 @@
 import '../../../assets/MultipleSlider.css';
-import { jsxs as S, jsx as m } from "react/jsx-runtime";
-import v from "react";
-import F from "../../tags/icon-chip/IconChip.js";
-import T from "../../tags/chip/Chip.js";
-import y from "../../actions/knob/Knob.js";
+import { jsx as m, jsxs as y } from "react/jsx-runtime";
+import T from "react";
 import { r as f } from "../../../do-map-2nhWP1KI.js";
-import { t as x } from "../../../do-classnames-DSDFCvzy.js";
-const E = (h, e, o, l = "LINEAR") => {
+import { t as I } from "../../../do-classnames-DSDFCvzy.js";
+import w from "../../tags/icon-chip/IconChip.js";
+import A from "../../tags/chip/Chip.js";
+import E from "../../actions/knob/Knob.js";
+const F = (h, e, a, o = "LINEAR") => {
   let t = 1;
-  const p = {};
+  const c = {};
   return h.map((r) => {
-    p[r] = l !== "NONE" ? parseFloat(f(w(l, t), 0, 1, e, o).toFixed(1)) : r, t -= 1 / (h.length - 1), t < 0.01 && (t = 0);
-  }), p;
-}, w = (h, e) => {
-  var o;
-  const l = {
+    c[r] = o !== "NONE" ? parseFloat(f(D(o, t), 0, 1, e, a).toFixed(1)) : r, t -= 1 / (h.length - 1), t < 0.01 && (t = 0);
+  }), c;
+}, D = (h, e) => {
+  var a;
+  const o = {
     LINEAR: (t) => t,
     EASEIN_SINE: (t) => Math.pow(t, 1.2),
     EASEOUT_SINE: (t) => 1 - Math.pow(1 - t, 1.2),
@@ -26,77 +26,77 @@ const E = (h, e, o, l = "LINEAR") => {
     EASEOUT_CUBIC: (t) => Math.sin(t * Math.PI / 2),
     EASEINOUT_CUBIC: (t) => -(Math.cos(Math.PI * t) - 1) / 2
   };
-  return (o = l[h ?? "LINEAR"]) == null ? void 0 : o.call(l, e);
-}, D = (h, e, o, l, t, p) => {
-  const r = [], a = o || l ? 0.1 : 1;
-  Object.entries(h).sort((c, u) => c[1] - u[1]).forEach((c) => {
-    r.push(c[0]);
+  return (a = o[h ?? "LINEAR"]) == null ? void 0 : a.call(o, e);
+}, _ = (h, e, a, o, t, c = 1) => {
+  const r = [], n = a ? c * 10 : c;
+  Object.entries(h).sort((d, u) => d[1] - u[1]).forEach((d) => {
+    r.push(d[0]);
   });
   const i = r.indexOf(
     e.dataset.id
-  ), n = h, s = n[r[i]];
-  return s + a <= t ? n[r[i]] = t : s + a >= p ? n[r[i]] = p : n[r[i]] = n[r[i]] + a, {
-    scale: n
+  ), l = h, s = l[r[i]];
+  return s + n <= o ? l[r[i]] = o : s + n >= t ? l[r[i]] = t : l[r[i]] = l[r[i]] + n, {
+    scale: l
   };
-}, A = (h, e, o, l, t, p) => {
-  const r = [], a = o || l ? 0.1 : 1;
-  Object.entries(h).sort((c, u) => c[1] - u[1]).forEach((c) => {
-    r.push(c[0]);
+}, N = (h, e, a, o, t, c = 1) => {
+  const r = [], n = a ? c * 10 : c;
+  Object.entries(h).sort((d, u) => d[1] - u[1]).forEach((d) => {
+    r.push(d[0]);
   });
   const i = r.indexOf(
     e.dataset.id
-  ), n = h, s = n[r[i]];
-  return s - a <= t ? n[r[i]] = t : s - a >= p ? n[r[i]] = p : n[r[i]] = n[r[i]] - a, {
-    scale: n
+  ), l = h, s = l[r[i]];
+  return s - n <= o ? l[r[i]] = o : s - n >= t ? l[r[i]] = t : l[r[i]] = l[r[i]] - n, {
+    scale: l
   };
-}, _ = (h) => {
+}, O = (h) => {
   const e = Math.floor(Math.abs(h)).toString().length;
   return Math.pow(10, e - 1);
-}, N = (h, e) => {
-  const o = Object.entries(h).map(([a, i]) => ({
-    index: parseFloat(a),
+}, L = (h, e) => {
+  const a = Object.entries(h).map(([n, i]) => ({
+    index: parseFloat(n),
     value: i
-  })).filter((a) => a.index > 0), l = Math.min(...o.map((a) => a.index)), t = _(l), p = o.filter(
-    (a) => a.index !== parseFloat(e.dataset.id)
-  ), r = p.reduce(
-    (a, i, n) => {
-      const s = Math.max(1, n + 1) * t;
-      return a[s] = p[n].value, a;
+  })).filter((n) => n.index > 0), o = Math.min(...a.map((n) => n.index)), t = O(o), c = a.filter(
+    (n) => n.index !== parseFloat(e.dataset.id)
+  ), r = c.reduce(
+    (n, i, l) => {
+      const s = Math.max(1, l + 1) * t;
+      return n[s] = c[l].value, n;
     },
     {}
   );
   return {
     scale: r,
-    stops: Object.keys(r).map((a) => parseFloat(a)),
+    stops: Object.keys(r).map((n) => parseFloat(n)),
     min: Math.min(...Object.values(r)),
     max: Math.max(...Object.values(r))
   };
-}, K = (h) => {
+}, C = (h) => {
   const e = Math.floor(Math.abs(h)).toString().length;
   return Math.pow(10, e - 1);
-}, O = (h, e, o, l) => {
-  const t = Object.entries(e).map(([s, c]) => ({
+}, K = (h, e, a, o) => {
+  const t = Object.entries(e).map(([s, d]) => ({
     index: Math.max(1, parseFloat(s)),
-    value: c
-  })).filter((s) => s.index > 0), p = K(Math.min(...t.map((s) => s.index))), r = t[0].value > t[t.length - 1].value, a = h.target, i = parseFloat(
-    f(h.layerX, 0, a.offsetWidth, o, l).toFixed(1)
+    value: d
+  })).filter((s) => s.index > 0), c = C(Math.min(...t.map((s) => s.index))), r = t[0].value > t[t.length - 1].value, n = h.target, i = parseFloat(
+    f(h.layerX, 0, n.offsetWidth, a, o).toFixed(1)
   );
   t.push({
-    index: Math.max(...t.map((s) => s.index)) + p,
+    index: Math.max(...t.map((s) => s.index)) + c,
     value: i
-  }), t.sort((s, c) => r ? c.value - s.value : s.value - c.value);
-  const n = t.reduce(
-    (s, c, u) => (s[(u + 1) * p] = c.value, s),
+  }), t.sort((s, d) => r ? d.value - s.value : s.value - d.value);
+  const l = t.reduce(
+    (s, d, u) => (s[(u + 1) * c] = d.value, s),
     {}
   );
   return {
-    scale: n,
-    stops: Object.keys(n).map((s) => parseFloat(s)),
-    min: Math.min(...Object.values(n)),
-    max: Math.max(...Object.values(n))
+    scale: l,
+    stops: Object.keys(l).map((s) => parseFloat(s)),
+    min: Math.min(...Object.values(l)),
+    max: Math.max(...Object.values(l))
   };
 };
-class B extends v.Component {
+class H extends T.Component {
   static defaultProps = {
     scale: {},
     stops: {
@@ -104,10 +104,8 @@ class B extends v.Component {
       min: 0,
       max: 100
     },
-    colors: {
-      min: "white",
-      max: "white"
-    },
+    hasProgressBar: !1,
+    hasPadding: !0,
     isBlocked: !1,
     isNew: !1
   };
@@ -118,168 +116,203 @@ class B extends v.Component {
     };
   }
   // Handlers
-  validHandler = (e, o) => {
-    const { scale: l, onChange: t, range: p } = this.props, r = p.step || 0.1, a = l ?? {}, i = o.target;
+  validHandler = (e, a) => {
+    const { scale: o, onChange: t, range: c } = this.props, r = c.step || 0.1, n = o ?? {}, i = a.target;
     if (i.value !== "") {
-      let n = parseFloat(i.value);
-      n = Math.round(n / r) * r, n > parseFloat(i.max) ? n = parseFloat(i.max) : n < parseFloat(i.min) && (n = parseFloat(i.min));
+      let l = parseFloat(i.value);
+      l = Math.round(l / r) * r, l > parseFloat(i.max) ? l = parseFloat(i.max) : l < parseFloat(i.min) && (l = parseFloat(i.min));
       const s = r.toString().split(".")[1]?.length || 0;
-      a[e] = parseFloat(n.toFixed(s)), t("TYPED", {
-        scale: a
+      n[e] = parseFloat(l.toFixed(s)), t("TYPED", {
+        scale: n
       });
     }
   };
   // Direct Actions
   onGrab = (e) => {
     e.stopPropagation();
-    const o = e.currentTarget, l = o.parentElement, t = e.clientX - e.currentTarget.getBoundingClientRect().left - e.currentTarget.getBoundingClientRect().width / 2, p = l.offsetWidth, r = l.parentElement, a = Array.from(l.children);
+    const a = e.currentTarget, o = a.parentElement, t = e.clientX - e.currentTarget.getBoundingClientRect().left - e.currentTarget.getBoundingClientRect().width / 2, c = o.getBoundingClientRect(), r = c.width, n = o.parentElement, i = Array.from(
+      o.children
+    ).filter((s) => s.dataset.id !== void 0);
     this.setState({
-      activeKnobId: o.dataset.id || null
+      activeKnobId: a.dataset.id || null
     });
-    const i = (n) => {
-      const { range: s, onChange: c } = this.props, u = {};
-      a.forEach(
-        (d) => u[d.dataset.id] = parseFloat(
+    const l = (s) => {
+      const { range: d, onChange: u } = this.props, p = {};
+      i.forEach(
+        (g) => p[g.dataset.id] = parseFloat(
           f(
-            parseFloat(d.style.left.replace("%", "")),
+            parseFloat(g.style.left.replace("%", "")),
             0,
             100,
-            s.min,
-            s.max
+            d.min,
+            d.max
           ).toFixed(1)
         )
-      ), c(n, {
-        scale: u
+      ), u(s, {
+        scale: p
       });
     };
-    o.style.zIndex = "2", document.onmousemove = (n) => this.onSlide(
+    a.style.zIndex = "2", document.onmousemove = (s) => this.onSlide(
+      s,
       n,
-      r,
-      l,
-      a,
       o,
+      i,
+      a,
       t,
-      p,
-      (s) => i(s)
-    ), document.onmouseup = () => this.onRelease(a, o, (n) => i(n));
+      r,
+      c,
+      (d) => l(d)
+    ), document.onmouseup = () => this.onRelease(i, a, (s) => l(s));
   };
-  onSlide = (e, o, l, t, p, r, a, i) => {
-    const { min: n, max: s, step: c = 0.1 } = this.props.range, u = parseFloat(
-      window.getComputedStyle(o, null).getPropertyValue("padding-left")
-    );
-    let d = e.clientX - o.offsetLeft - u - r;
-    if (d <= 0 ? d = 0 : d >= a && (d = a), p === l.firstChild && e.shiftKey)
+  onSlide = (e, a, o, t, c, r, n, i, l) => {
+    const { min: s, max: d, step: u = 0.1 } = this.props.range;
+    let p = e.clientX - i.left - r;
+    if (p <= 0 ? p = 0 : p >= n && (p = n), c === o.firstChild && e.shiftKey)
       return this.distributeStops(
         "MIN",
-        parseFloat(f(d, 0, a, n, s).toFixed(1)),
+        parseFloat(f(p, 0, n, s, d).toFixed(1)),
         t
       );
-    if (p === l.lastChild && e.shiftKey)
+    if (c === o.lastChild && e.shiftKey)
       return this.distributeStops(
         "MAX",
-        parseFloat(f(d, 0, a, n, s).toFixed(1)),
+        parseFloat(f(p, 0, n, s, d).toFixed(1)),
         t
       );
     if (e.ctrlKey || e.metaKey)
-      if (d < p.offsetLeft - l.firstChild.offsetLeft || d > a - l.lastChild.offsetLeft + p.offsetLeft)
-        d = p.offsetLeft;
+      if (p < c.offsetLeft - o.firstChild.offsetLeft || p > n - o.lastChild.offsetLeft + c.offsetLeft)
+        p = c.offsetLeft;
       else
         return this.linkStops(
-          parseFloat(f(d, 0, a, n, s).toFixed(1)),
-          p,
+          parseFloat(f(p, 0, n, s, d).toFixed(1)),
+          c,
           t
         );
     e.ctrlKey === !1 && e.metaKey === !1 && e.shiftKey === !1 && this.setState({
       isTooltipDisplay: Array(t.length).fill(!1)
     });
-    const g = f(d, 0, a, n, s), I = Math.round(g / c) * c, M = c.toString().split(".")[1]?.length || 0, b = f(I, n, s, 0, 100);
-    p.style.left = b.toFixed(M) + "%", requestAnimationFrame(() => {
-      p.focus();
-    }), i("UPDATING"), document.body.style.cursor = "ew-resize";
+    const g = f(p, 0, n, s, d), x = Math.round(g / u) * u, S = u.toString().split(".")[1]?.length || 0;
+    if (u >= 1) {
+      const v = parseFloat(
+        f(
+          parseFloat(c.style.left.replace("%", "")),
+          0,
+          100,
+          s,
+          d
+        ).toFixed(S)
+      ), b = parseFloat(x.toFixed(S));
+      if (v !== b) {
+        const M = f(x, s, d, 0, 100);
+        c.style.left = M.toFixed(S) + "%", requestAnimationFrame(() => {
+          c.focus();
+        }), l("UPDATING");
+      }
+    } else {
+      const v = f(x, s, d, 0, 100);
+      c.style.left = v.toFixed(S) + "%", requestAnimationFrame(() => {
+        c.focus();
+      }), l("UPDATING");
+    }
+    document.body.style.cursor = "ew-resize";
   };
-  onRelease = (e, o, l) => {
-    document.onmousemove = null, document.onmouseup = null, o.onmouseup = null, o.style.zIndex = "1", this.setState({
+  onRelease = (e, a, o) => {
+    document.onmousemove = null, document.onmouseup = null, a.onmouseup = null, a.style.zIndex = "1", this.setState({
       activeKnobId: null
     }), requestAnimationFrame(() => {
-      o.focus();
+      a.focus();
     }), this.setState({
       isTooltipDisplay: Array(e.length).fill(!1)
-    }), l("RELEASED"), document.body.style.cursor = "";
+    }), o("RELEASED"), document.body.style.cursor = "";
   };
   onAdd = (e) => {
-    const { scale: o, onChange: l } = this.props, { min: t, max: p } = this.props.range, r = O(e.nativeEvent, o, t, p);
-    l("SHIFTED", r, "ADD_STOP");
+    const { scale: a, onChange: o } = this.props, { min: t, max: c } = this.props.range, r = K(e.nativeEvent, a, t, c);
+    o("SHIFTED", r, "ADD_STOP");
   };
   onDelete = (e) => {
-    const { scale: o, onChange: l } = this.props, t = N(o, e);
-    l("SHIFTED", t, "DELETE_STOP");
+    const { scale: a, onChange: o } = this.props, t = L(a, e);
+    o("SHIFTED", t, "DELETE_STOP");
   };
-  onShiftRight = (e, o, l) => {
-    const { scale: t, onChange: p } = this.props, { min: r, max: a } = this.props.range, i = D(t, e, o, l, r, a);
-    p("SHIFTED", i), requestAnimationFrame(() => {
-      const n = e.closest(".multiple-slider__range");
-      if (n) {
-        const s = n.querySelector(
+  onShiftRight = (e, a) => {
+    const { scale: o, onChange: t } = this.props, { min: c, max: r, step: n = 1 } = this.props.range, i = _(o, e, a, c, r, n);
+    t("SHIFTED", i), requestAnimationFrame(() => {
+      const l = e.closest(".multiple-slider__range");
+      if (l) {
+        const s = l.querySelector(
           `[data-id="${e.dataset.id}"]`
         );
         s instanceof HTMLElement && s.focus();
       }
     });
   };
-  onShiftLeft = (e, o, l) => {
-    const { scale: t, onChange: p } = this.props, { min: r, max: a } = this.props.range, i = A(t, e, o, l, r, a);
-    p("SHIFTED", i), requestAnimationFrame(() => {
-      const n = e.closest(".multiple-slider__range");
-      if (n) {
-        const s = n.querySelector(
+  onShiftLeft = (e, a) => {
+    const { scale: o, onChange: t } = this.props, { min: c, max: r, step: n = 1 } = this.props.range, i = N(o, e, a, c, r, n);
+    t("SHIFTED", i), requestAnimationFrame(() => {
+      const l = e.closest(".multiple-slider__range");
+      if (l) {
+        const s = l.querySelector(
           `[data-id="${e.dataset.id}"]`
         );
         s instanceof HTMLElement && s.focus();
       }
     });
   };
-  distributeStops = (e, o, l) => {
-    const { scale: t, distributionEasing: p, onChange: r, range: a } = this.props, { min: i, max: n, step: s = 0.1 } = a, c = Math.round(o / s) * s, u = s.toString().split(".")[1]?.length || 0;
+  distributeStops = (e, a, o) => {
+    const { scale: t, distributionEasing: c, onChange: r, range: n } = this.props, { min: i, max: l, step: s = 0.1 } = n, d = Math.round(a / s) * s, u = s.toString().split(".")[1]?.length || 0;
     e === "MIN" ? r("UPDATING", {
-      scale: E(
-        Object.entries(t).sort((d, g) => g[1] - d[1]).map((d) => parseFloat(d[0])),
-        parseFloat(c.toFixed(u)),
-        Math.max(...Object.values(t)) ?? n,
-        p
+      scale: F(
+        Object.entries(t).sort((p, g) => g[1] - p[1]).map((p) => parseFloat(p[0])),
+        parseFloat(d.toFixed(u)),
+        Math.max(...Object.values(t)) ?? l,
+        c
       )
     }) : e === "MAX" && r("UPDATING", {
-      scale: E(
-        Object.entries(t).sort((d, g) => g[1] - d[1]).map((d) => parseFloat(d[0])),
+      scale: F(
+        Object.entries(t).sort((p, g) => g[1] - p[1]).map((p) => parseFloat(p[0])),
         Math.min(...Object.values(t)) ?? i,
-        parseFloat(c.toFixed(u)),
-        p
+        parseFloat(d.toFixed(u)),
+        c
       )
     }), this.setState({
-      isTooltipDisplay: Array(l.length).fill(!0)
+      isTooltipDisplay: Array(o.length).fill(!0)
     }), document.body.style.cursor = "ew-resize";
   };
-  linkStops = (e, o, l) => {
-    const { scale: t, onChange: p, range: r } = this.props, { step: a = 0.1 } = r, i = t, n = Math.round(e / a) * a, s = a.toString().split(".")[1]?.length || 0;
-    l.filter((c) => c !== o).forEach((c) => {
-      const u = i[c.dataset.id] - i[o.dataset.id] + n, d = Math.round(u / a) * a;
-      i[c.dataset.id] = parseFloat(
-        d.toFixed(s)
+  linkStops = (e, a, o) => {
+    const { scale: t, onChange: c, range: r } = this.props, { step: n = 0.1 } = r, i = t, l = Math.round(e / n) * n, s = n.toString().split(".")[1]?.length || 0;
+    o.filter((d) => d !== a).forEach((d) => {
+      const u = i[d.dataset.id] - i[a.dataset.id] + l, p = Math.round(u / n) * n;
+      i[d.dataset.id] = parseFloat(
+        p.toFixed(s)
       );
-    }), i[o.dataset.id] = parseFloat(
-      n.toFixed(s)
+    }), i[a.dataset.id] = parseFloat(
+      l.toFixed(s)
     ), this.setState({
-      isTooltipDisplay: this.state.isTooltipDisplay.fill(!0)
-    }), p("UPDATING", {
+      isTooltipDisplay: Array(o.length).fill(!0)
+    }), c("UPDATING", {
       scale: i
     }), document.body.style.cursor = "ew-resize";
   };
   // Templates
+  Progress = () => {
+    const { scale: e, range: a, hasProgressBar: o } = this.props;
+    if (!o) return null;
+    const t = Object.values(e).sort((n, i) => n - i);
+    if (t.length < 2) return null;
+    const c = f(t[0], a.min, a.max, 0, 100), r = f(t[t.length - 1], a.min, a.max, 0, 100);
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        className: "multiple-slider__progress",
+        style: { left: `${c}%`, width: `${r - c}%` }
+      }
+    );
+  };
   Status = () => {
-    const { warning: e, isBlocked: o, isNew: l } = this.props;
-    if (e || o || l)
-      return /* @__PURE__ */ S("div", { className: "multiple-slider__status", children: [
+    const { warning: e, isBlocked: a, isNew: o } = this.props;
+    if (e || a || o)
+      return /* @__PURE__ */ y("div", { className: "multiple-slider__status", children: [
         e !== void 0 && /* @__PURE__ */ m(
-          F,
+          w,
           {
             iconType: "PICTO",
             iconName: "warning",
@@ -288,130 +321,145 @@ class B extends v.Component {
             type: e.type
           }
         ),
-        (o || l) && /* @__PURE__ */ m(
-          T,
+        (a || o) && /* @__PURE__ */ m(
+          A,
           {
             isSolo: !0,
-            action: o ? this.props.onUnblock : void 0,
-            children: l ? "New" : "Pro"
+            action: a ? this.props.onUnblock : void 0,
+            children: o ? "New" : "Pro"
           }
         )
       ] });
   };
   Edit = () => {
-    const { scale: e, range: o, colors: l, tips: t, isBlocked: p } = this.props, { isTooltipDisplay: r } = this.state;
-    return /* @__PURE__ */ m(
+    const { scale: e, range: a, colors: o, tips: t, isBlocked: c } = this.props, { isTooltipDisplay: r } = this.state;
+    return /* @__PURE__ */ y(
       "div",
       {
-        className: x([
+        className: I([
           "multiple-slider__range",
-          p && "multiple-slider__range--blocked"
+          c && "multiple-slider__range--blocked"
         ]),
         style: {
-          background: `linear-gradient(90deg, ${l.min}, ${l.max})`
+          background: o !== void 0 ? `linear-gradient(90deg, ${o.min}, ${o.max})` : void 0
         },
         role: "presentation",
-        children: Object.entries(e).sort((a, i) => a[1] - i[1]).map((a, i, n) => /* @__PURE__ */ m(
-          y,
-          {
-            id: a[0],
-            shortId: a[0],
-            value: a[1],
-            offset: f(a[1], o.min, o.max, 0, 100),
-            min: o.min.toString(),
-            max: o.max.toString(),
-            helper: i === 0 || i === n.length - 1 ? {
-              label: t.minMax,
-              type: "MULTI_LINE"
-            } : void 0,
-            canBeTyped: !0,
-            isDisplayed: r[i],
-            isBlocked: p,
-            style: {
-              pointerEvents: this.state.activeKnobId && this.state.activeKnobId !== a[0] || p ? "none" : "auto"
-            },
-            onShiftRight: (s) => {
-              this.onShiftRight(s.target, s.metaKey, s.ctrlKey);
-            },
-            onShiftLeft: (s) => {
-              this.onShiftLeft(s.target, s.metaKey, s.ctrlKey);
-            },
-            onMouseDown: (s) => {
-              this.onGrab(s), s.target.focus();
+        children: [
+          /* @__PURE__ */ m(this.Progress, {}),
+          Object.entries(e).sort((n, i) => n[1] - i[1]).map((n, i, l) => /* @__PURE__ */ m(
+            E,
+            {
+              id: n[0],
+              shortId: n[0],
+              value: n[1],
+              offset: f(n[1], a.min, a.max, 0, 100),
+              min: a.min.toString(),
+              max: a.max.toString(),
+              helper: i === 0 || i === l.length - 1 ? {
+                label: t.minMax,
+                type: "MULTI_LINE"
+              } : void 0,
+              canBeTyped: !0,
+              isDisplayed: r[i],
+              isBlocked: c,
+              style: {
+                pointerEvents: this.state.activeKnobId && this.state.activeKnobId !== n[0] || c ? "none" : "auto"
+              },
+              onShiftRight: (s) => {
+                this.onShiftRight(s.target, s.shiftKey);
+              },
+              onShiftLeft: (s) => {
+                this.onShiftLeft(s.target, s.shiftKey);
+              },
+              onMouseDown: (s) => {
+                this.onGrab(s), s.target.focus();
+              },
+              onValidStopValue: (s, d) => this.validHandler(s, d),
+              "aria-valuenow": n[1]
             },
-            onValidStopValue: (s, c) => this.validHandler(s, c),
-            "aria-valuenow": a[1]
-          },
-          a[0]
-        ))
+            n[0]
+          ))
+        ]
       }
     );
   };
   FullyEdit = () => {
-    const { scale: e, stops: o, range: l, colors: t, tips: p, isBlocked: r } = this.props, { isTooltipDisplay: a } = this.state;
-    return /* @__PURE__ */ m(
+    const { scale: e, stops: a, range: o, colors: t, tips: c, isBlocked: r } = this.props, { isTooltipDisplay: n } = this.state;
+    return /* @__PURE__ */ y(
       "div",
       {
-        className: x([
+        className: I([
           "multiple-slider__range",
-          o.list.length < (o.max ?? 1 / 0) && !r && "multiple-slider__range--add",
-          o.list.length === (o.max ?? 1 / 0) && "multiple-slider__range--not-allowed",
+          a.list.length < (a.max ?? 1 / 0) && !r && "multiple-slider__range--add",
+          a.list.length === (a.max ?? 1 / 0) && "multiple-slider__range--not-allowed",
           r && "multiple-slider__range--blocked"
         ]),
         style: {
-          background: `linear-gradient(90deg, ${t.min}, ${t.max})`
+          background: t !== void 0 ? `linear-gradient(90deg, ${t.min}, ${t.max})` : void 0
         },
-        onMouseDown: (i) => o.list.length < (o.max ?? 1 / 0) && this.onAdd(i),
-        children: Object.entries(e).sort((i, n) => i[1] - n[1]).map((i, n, s) => /* @__PURE__ */ m(
-          y,
-          {
-            id: i[0],
-            shortId: i[0],
-            value: i[1],
-            offset: f(i[1], l.min, l.max, 0, 100),
-            min: l.min.toString(),
-            max: l.max.toString(),
-            helper: n === 0 || n === s.length - 1 ? {
-              label: p.minMax,
-              type: "MULTI_LINE"
-            } : void 0,
-            canBeTyped: !0,
-            isDisplayed: a[n],
-            isBlocked: r,
-            style: {
-              pointerEvents: this.state.activeKnobId && this.state.activeKnobId !== i[0] || r ? "none" : "auto"
-            },
-            onShiftRight: (c) => {
-              this.onShiftRight(c.target, c.metaKey, c.ctrlKey);
-            },
-            onShiftLeft: (c) => {
-              this.onShiftLeft(c.target, c.metaKey, c.ctrlKey);
+        onMouseDown: (i) => a.list.length < (a.max ?? 1 / 0) && this.onAdd(i),
+        children: [
+          /* @__PURE__ */ m(this.Progress, {}),
+          Object.entries(e).sort((i, l) => i[1] - l[1]).map((i, l, s) => /* @__PURE__ */ m(
+            E,
+            {
+              id: i[0],
+              shortId: i[0],
+              value: i[1],
+              offset: f(i[1], o.min, o.max, 0, 100),
+              min: o.min.toString(),
+              max: o.max.toString(),
+              helper: l === 0 || l === s.length - 1 ? {
+                label: c.minMax,
+                type: "MULTI_LINE"
+              } : void 0,
+              canBeTyped: !0,
+              isDisplayed: n[l],
+              isBlocked: r,
+              style: {
+                pointerEvents: this.state.activeKnobId && this.state.activeKnobId !== i[0] || r ? "none" : "auto"
+              },
+              onShiftRight: (d) => {
+                this.onShiftRight(d.target, d.shiftKey);
+              },
+              onShiftLeft: (d) => {
+                this.onShiftLeft(d.target, d.shiftKey);
+              },
+              onDelete: (d) => {
+                a.list.length > (a.min ?? 1 / 0) && this.onDelete(d.target);
+              },
+              onMouseDown: (d) => {
+                this.onGrab(d), d.target.focus();
+              },
+              onValidStopValue: (d, u) => this.validHandler(d, u),
+              "aria-valuenow": i[1]
             },
-            onDelete: (c) => {
-              o.list.length > (o.min ?? 1 / 0) && this.onDelete(c.target);
-            },
-            onMouseDown: (c) => {
-              this.onGrab(c), c.target.focus();
-            },
-            onValidStopValue: (c, u) => this.validHandler(c, u),
-            "aria-valuenow": i[1]
-          },
-          i[0]
-        ))
+            i[0]
+          ))
+        ]
       }
     );
   };
   // Render
   render() {
-    const { type: e } = this.props;
-    return /* @__PURE__ */ S("div", { className: "multiple-slider", children: [
-      e === "EDIT" && /* @__PURE__ */ m(this.Edit, {}),
-      e === "FULLY_EDIT" && /* @__PURE__ */ m(this.FullyEdit, {}),
-      this.Status()
-    ] });
+    const { type: e, hasPadding: a } = this.props;
+    return /* @__PURE__ */ y(
+      "div",
+      {
+        className: I([
+          "multiple-slider",
+          !a && "multiple-slider--no-padding"
+        ]),
+        children: [
+          e === "EDIT" && /* @__PURE__ */ m(this.Edit, {}),
+          e === "FULLY_EDIT" && /* @__PURE__ */ m(this.FullyEdit, {}),
+          this.Status()
+        ]
+      }
+    );
   }
 }
 export {
-  B as default
+  H as default
 };
 //# sourceMappingURL=MultipleSlider.js.map