@golstats/gsc-table-scrollable 1.0.13 → 1.0.15

package/dist/gsc-table-scrollable.js

@@ -1,19 +1,19 @@
-import { useCssVars as st, ref as w, computed as R, watch as F, createElementBlock as n, openBlock as l, normalizeClass as m, createElementVNode as t, createCommentVNode as L, normalizeStyle as $, Fragment as T, toDisplayString as u, pushScopeId as A, popScopeId as W, onMounted as it, renderList as I, onBeforeUnmount as vt, createVNode as Q, createBlock as Y, Transition as pt, withCtx as gt, withDirectives as _t, createTextVNode as O, vShow as mt, unref as tt, createStaticVNode as Ct } from "vue";
-const bt = (o, d) => {
-  const s = o.__vccOpts || o;
-  for (const [c, v] of d)
-    s[c] = v;
-  return s;
-}, wt = { key: 1 }, kt = {
+import { useCssVars as at, ref as g, computed as O, watch as V, createElementBlock as r, openBlock as n, normalizeClass as y, createElementVNode as t, createCommentVNode as L, normalizeStyle as B, Fragment as T, toDisplayString as h, pushScopeId as W, popScopeId as H, onMounted as rt, renderList as z, onBeforeUnmount as Ct, createVNode as ot, createBlock as st, Transition as kt, withCtx as wt, withDirectives as bt, createTextVNode as D, vShow as yt, unref as it } from "vue";
+const xt = (s, u) => {
+  const i = s.__vccOpts || s;
+  for (const [f, _] of u)
+    i[f] = _;
+  return i;
+}, St = { key: 1 }, Mt = {
   width: "10",
   height: "8",
   viewBox: "0 0 10 8",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, yt = ["fill"], xt = {
+}, Lt = ["fill"], $t = {
   key: 0,
   class: "checkbox__teams"
-}, St = { class: "checkbox__teams__logo" }, Lt = ["src"], $t = { class: "checkbox__teams__logo" }, Mt = ["src"], Bt = {
+}, Bt = { class: "checkbox__teams__logo" }, Rt = ["src"], Et = { class: "checkbox__teams__logo" }, Pt = ["src"], It = {
   __name: "GSC-Checkbox",
   props: {
     width: {
@@ -72,8 +72,8 @@ const bt = (o, d) => {
       type: String,
       default: "left",
       // values can be 'left', 'right', 'top', 'bottom'
-      validator(o) {
-        return ["left", "right", "top", "bottom"].includes(o);
+      validator(s) {
+        return ["left", "right", "top", "bottom"].includes(s);
       }
     },
     boxMarginTop: {
@@ -122,100 +122,100 @@ const bt = (o, d) => {
     }
   },
   emits: ["update:modelValue"],
-  setup(o, { emit: d }) {
-    const s = o;
-    st((h) => ({
-      "7bd9d47b": o.width,
-      "34dc7ddc": o.height
+  setup(s, { emit: u }) {
+    const i = s;
+    at((p) => ({
+      "7bd9d47b": s.width,
+      "34dc7ddc": s.height
     }));
-    const c = w(!1), v = R(() => {
-      const h = {
-        color: s.boxValueColor,
-        "font-family": s.fontFamily,
-        height: s.boxWidthAndHeight,
-        width: s.boxWidthAndHeight,
-        minWidth: s.boxWidthAndHeight,
-        "border-radius": s.boxBorderRadius,
-        "margin-top": s.boxMarginTop
+    const f = g(!1), _ = O(() => {
+      const p = {
+        color: i.boxValueColor,
+        "font-family": i.fontFamily,
+        height: i.boxWidthAndHeight,
+        width: i.boxWidthAndHeight,
+        minWidth: i.boxWidthAndHeight,
+        "border-radius": i.boxBorderRadius,
+        "margin-top": i.boxMarginTop
       };
-      return c.value ? (h["background-color"] = s.boxBackgroundColor, h.border = `solid ${s.boxBorderWidth} ${s.boxBackgroundColor}`) : h.border = `solid ${s.boxBorderWidth} ${s.boxBorderColor}`, h;
-    }), f = R(() => ({
-      "font-family": s.boxValueFontFamily,
-      "font-size": s.boxValueFontSize,
-      color: s.boxValueColor,
+      return f.value ? (p["background-color"] = i.boxBackgroundColor, p.border = `solid ${i.boxBorderWidth} ${i.boxBackgroundColor}`) : p.border = `solid ${i.boxBorderWidth} ${i.boxBorderColor}`, p;
+    }), m = O(() => ({
+      "font-family": i.boxValueFontFamily,
+      "font-size": i.boxValueFontSize,
+      color: i.boxValueColor,
       "line-height": 1
-    })), k = R(() => {
-      const h = {
-        color: s.labelColor,
-        "font-family": s.fontFamily,
-        "font-size": s.labelFontSize,
-        "white-space": s.labelWhiteSpace,
-        "text-align": s.boxPosition === "top" || s.boxPosition === "bottom" ? "center" : s.boxPosition
+    })), S = O(() => {
+      const p = {
+        color: i.labelColor,
+        "font-family": i.fontFamily,
+        "font-size": i.labelFontSize,
+        "white-space": i.labelWhiteSpace,
+        "text-align": i.boxPosition === "top" || i.boxPosition === "bottom" ? "center" : i.boxPosition
       };
-      return (s.boxPosition === "left" || s.boxPosition === "right") && (h[`margin-${s.boxPosition}`] = s.isBoxOnly ? "0" : s.teamsIds ? "8px" : "10px"), h;
+      return (i.boxPosition === "left" || i.boxPosition === "right") && (p[`margin-${i.boxPosition}`] = i.isBoxOnly ? "0" : i.teamsIds ? "8px" : "10px"), p;
     });
-    F(
-      () => s.modelValue,
-      (h) => {
-        h !== c.value && (c.value = h);
+    V(
+      () => i.modelValue,
+      (p) => {
+        p !== f.value && (f.value = p);
       },
       { immediate: !0 }
     );
-    function M() {
-      s.avoidInteraction || !c.value && s.avoidToCheck || (c.value = !c.value, d("update:modelValue", c.value));
+    function R() {
+      i.avoidInteraction || !f.value && i.avoidToCheck || (f.value = !f.value, u("update:modelValue", f.value));
     }
-    function B(h) {
-      return `${{}.TEAM_LOGOS_URL || "https://golstatsimages.blob.core.windows.net/teams-80/"}${h}.png`;
+    function E(p) {
+      return `${{}.TEAM_LOGOS_URL || "https://golstatsimages.blob.core.windows.net/teams-80/"}${p}.png`;
     }
-    return (h, V) => (l(), n("div", {
-      class: m(["checkbox", `box-${o.boxPosition}`]),
-      onClick: M
+    return (p, I) => (n(), r("div", {
+      class: y(["checkbox", `box-${s.boxPosition}`]),
+      onClick: R
     }, [
       t("div", {
         class: "checkbox__box",
-        style: $(v.value)
+        style: B(_.value)
       }, [
-        c.value ? (l(), n(T, { key: 0 }, [
-          s.boxValue ? (l(), n("div", {
+        f.value ? (n(), r(T, { key: 0 }, [
+          i.boxValue ? (n(), r("div", {
             key: 0,
             class: "checkbox__box__value",
-            style: $(f.value)
-          }, u(o.boxValue), 5)) : (l(), n("div", wt, [
-            (l(), n("svg", kt, [
+            style: B(m.value)
+          }, h(s.boxValue), 5)) : (n(), r("div", St, [
+            (n(), r("svg", Mt, [
               t("path", {
                 d: "M9.77994 1.70133L4.10994 7.37133C3.96994 7.51133 3.77994 7.59133 3.57994 7.59133C3.37994 7.59133 3.18994 7.51133 3.04994 7.37133L0.219941 4.54133C-0.0700586 4.25133 -0.0700586 3.77133 0.219941 3.48133C0.509941 3.19133 0.989941 3.19133 1.27994 3.48133L3.57994 5.78133L8.71994 0.641328C9.00994 0.351328 9.48994 0.351328 9.77994 0.641328C10.0699 0.931328 10.0699 1.40133 9.77994 1.70133Z",
-                fill: o.boxValueColor
-              }, null, 8, yt)
+                fill: s.boxValueColor
+              }, null, 8, Lt)
             ]))
           ]))
         ], 64)) : L("", !0)
       ], 4),
-      o.teamsIds && o.teamsIds.length ? (l(), n("div", xt, [
-        t("div", St, [
+      s.teamsIds && s.teamsIds.length ? (n(), r("div", $t, [
+        t("div", Bt, [
           t("img", {
-            src: B(o.teamsIds[0]),
+            src: E(s.teamsIds[0]),
             alt: ""
-          }, null, 8, Lt)
+          }, null, 8, Rt)
         ]),
-        t("div", $t, [
+        t("div", Et, [
           t("img", {
-            src: B(o.teamsIds[1]),
+            src: E(s.teamsIds[1]),
             alt: ""
-          }, null, 8, Mt)
+          }, null, 8, Pt)
         ])
       ])) : L("", !0),
       t("div", {
         class: "checkbox__label",
-        style: $(k.value)
-      }, u(o.label), 5)
+        style: B(S.value)
+      }, h(s.label), 5)
     ], 2));
   }
-}, Vt = /* @__PURE__ */ bt(Bt, [["__scopeId", "data-v-b6f124d8"]]), Rt = (o, d) => {
-  const s = o.__vccOpts || o;
-  for (const [c, v] of d)
-    s[c] = v;
-  return s;
-}, j = {
+}, Ot = /* @__PURE__ */ xt(It, [["__scopeId", "data-v-b6f124d8"]]), Tt = (s, u) => {
+  const i = s.__vccOpts || s;
+  for (const [f, _] of u)
+    i[f] = _;
+  return i;
+}, N = {
   props: {
     type: { type: Number, default: 0 },
     value: { type: Boolean, default: !1 },
@@ -252,8 +252,8 @@ const bt = (o, d) => {
     value: {
       deep: !0,
       immediate: !0,
-      handler(o) {
-        this.status = o;
+      handler(s) {
+        this.status = s;
       }
     }
   },
@@ -285,79 +285,79 @@ const bt = (o, d) => {
     }
   },
   methods: {
-    btnClick(o) {
-      this.$emit("click", o), this.typeOnOff && (this.status = !this.status, this.$emit("status", this.status));
+    btnClick(s) {
+      this.$emit("click", s), this.typeOnOff && (this.status = !this.status, this.$emit("status", this.status));
     }
   }
-}, et = () => {
-  st((o) => ({
-    "9d01acb4": o.height,
-    "14e95081": o.borderWidthBtn,
-    "38fec285": o.borderType,
-    34353510: o.borderColor,
-    "20d20dc6": o.borderRadius,
-    17130967: o.width,
-    "4ccb7d36": o.backgroundColor,
-    "5d1e86a2": o.cursorType,
-    ce65d4a2: o.fontSize,
-    fe4ac47a: o.fontStyle,
-    f98e44dc: o.fontFamily,
-    "93b87770": o.marginLeftStat,
-    c7f7beba: o.fontSizeStat
+}, lt = () => {
+  at((s) => ({
+    "9d01acb4": s.height,
+    "14e95081": s.borderWidthBtn,
+    "38fec285": s.borderType,
+    34353510: s.borderColor,
+    "20d20dc6": s.borderRadius,
+    17130967: s.width,
+    "4ccb7d36": s.backgroundColor,
+    "5d1e86a2": s.cursorType,
+    ce65d4a2: s.fontSize,
+    fe4ac47a: s.fontStyle,
+    f98e44dc: s.fontFamily,
+    "93b87770": s.marginLeftStat,
+    c7f7beba: s.fontSizeStat
   }));
-}, ot = j.setup;
-j.setup = ot ? (o, d) => (et(), ot(o, d)) : et;
-const Tt = (o) => (A("data-v-f3ee6b2b"), o = o(), W(), o), Et = ["src"], Ot = {
+}, nt = N.setup;
+N.setup = nt ? (s, u) => (lt(), nt(s, u)) : lt;
+const Ft = (s) => (W("data-v-f3ee6b2b"), s = s(), H(), s), Dt = ["src"], Vt = {
   key: 1,
   class: "text"
-}, It = ["src"], Pt = { class: "stats" }, Ft = /* @__PURE__ */ Tt(() => /* @__PURE__ */ t("img", {
+}, zt = ["src"], jt = { class: "stats" }, At = /* @__PURE__ */ Ft(() => /* @__PURE__ */ t("img", {
   class: "iconstats",
   src: "https://golstatsimages.blob.core.windows.net/todoelfut/playdes.png"
-}, null, -1)), zt = { class: "numstats" }, Dt = { class: "leyend" };
-function Zt(o, d, s, c, v, f) {
-  return l(), n("div", null, [
-    s.type == 0 ? (l(), n("div", {
+}, null, -1)), Zt = { class: "numstats" }, Wt = { class: "leyend" };
+function Ht(s, u, i, f, _, m) {
+  return n(), r("div", null, [
+    i.type == 0 ? (n(), r("div", {
       key: 0,
-      class: m(["button", v.status && s.typeOnOff && "button-active"]),
-      style: $([f.customStyle, v.status && s.typeOnOff && f.customActive]),
-      onClick: d[0] || (d[0] = (...k) => f.btnClick && f.btnClick(...k))
+      class: y(["button", _.status && i.typeOnOff && "button-active"]),
+      style: B([m.customStyle, _.status && i.typeOnOff && m.customActive]),
+      onClick: u[0] || (u[0] = (...S) => m.btnClick && m.btnClick(...S))
     }, [
-      s.icon && s.iconPosition.toLowerCase() === "left" ? (l(), n("img", {
+      i.icon && i.iconPosition.toLowerCase() === "left" ? (n(), r("img", {
         key: 0,
         class: "icon",
-        style: $({ width: s.iconSize }),
-        src: s.icon
-      }, null, 12, Et)) : L("", !0),
-      s.textValue ? (l(), n("div", Ot, u(s.textValue), 1)) : L("", !0),
-      s.icon && s.iconPosition.toLowerCase() === "right" ? (l(), n("img", {
+        style: B({ width: i.iconSize }),
+        src: i.icon
+      }, null, 12, Dt)) : L("", !0),
+      i.textValue ? (n(), r("div", Vt, h(i.textValue), 1)) : L("", !0),
+      i.icon && i.iconPosition.toLowerCase() === "right" ? (n(), r("img", {
         key: 2,
         class: "icon",
-        style: $({ width: s.iconSize }),
-        src: s.icon
-      }, null, 12, It)) : L("", !0)
+        style: B({ width: i.iconSize }),
+        src: i.icon
+      }, null, 12, zt)) : L("", !0)
     ], 6)) : L("", !0),
-    s.type == 1 ? (l(), n("div", {
+    i.type == 1 ? (n(), r("div", {
       key: 1,
       class: "button-target",
-      onClick: d[1] || (d[1] = (...k) => f.btnClick && f.btnClick(...k))
+      onClick: u[1] || (u[1] = (...S) => m.btnClick && m.btnClick(...S))
     }, [
-      t("div", Pt, [
-        Ft,
-        t("div", zt, u(s.textStat), 1)
+      t("div", jt, [
+        At,
+        t("div", Zt, h(i.textStat), 1)
       ]),
-      t("div", Dt, u(s.textCategory), 1)
+      t("div", Wt, h(i.textCategory), 1)
     ])) : L("", !0)
   ]);
 }
-const At = /* @__PURE__ */ Rt(j, [["render", Zt], ["__scopeId", "data-v-f3ee6b2b"]]), lt = (o, d) => {
-  const s = o.__vccOpts || o;
-  for (const [c, v] of d)
-    s[c] = v;
-  return s;
-}, nt = (o) => (A("data-v-16177785"), o = o(), W(), o), Wt = {
+const Nt = /* @__PURE__ */ Tt(N, [["render", Ht], ["__scopeId", "data-v-f3ee6b2b"]]), dt = (s, u) => {
+  const i = s.__vccOpts || s;
+  for (const [f, _] of u)
+    i[f] = _;
+  return i;
+}, G = (s) => (W("data-v-df83603b"), s = s(), H(), s), Gt = {
   key: 0,
   class: "overlay"
-}, jt = { class: "name" }, Ht = ["onClick"], Nt = /* @__PURE__ */ nt(() => /* @__PURE__ */ t("svg", {
+}, Ut = ["onClick"], qt = /* @__PURE__ */ G(() => /* @__PURE__ */ t("svg", {
   width: "11",
   height: "12",
   viewBox: "0 0 11 12",
@@ -368,9 +368,19 @@ const At = /* @__PURE__ */ Rt(j, [["render", Zt], ["__scopeId", "data-v-f3ee6b2b
     d: "M7.50558 0C6.78112 0 6.10558 0.475441 5.89478 1.14401L1.21987 1.14286C0.904267 1.14286 0.648438 1.39886 0.648438 1.71429C0.648438 2.02972 0.904267 2.28572 1.21987 2.28572L5.89478 2.28516C6.15083 2.98516 6.78112 3.42858 7.50558 3.42858C8.23004 3.42858 8.86678 2.98402 9.1273 2.28059L10.3627 2.28572C10.6783 2.28572 10.9342 2.02972 10.9342 1.71429C10.9342 1.39886 10.6783 1.14286 10.3627 1.14286H9.12244C8.8473 0.446287 8.23004 0 7.50558 0ZM7.50558 1.14286C7.82118 1.14286 8.07701 1.39886 8.07701 1.71429C8.07701 2.02972 7.82118 2.28572 7.50558 2.28572C7.18998 2.28572 6.93415 2.02972 6.93415 1.71429C6.93415 1.39886 7.18998 1.14286 7.50558 1.14286ZM4.07701 4.28572C3.32387 4.28572 2.69347 4.7543 2.4633 5.42971C2.38295 5.43485 1.21987 5.42856 1.21987 5.42856C0.904267 5.42856 0.648438 5.68456 0.648438 5.99999C0.648438 6.31542 0.904267 6.57142 1.21987 6.57142C1.21987 6.57142 2.39267 6.55942 2.46575 6.56685C2.69593 7.24228 3.32387 7.71428 4.07701 7.71428C4.80146 7.71428 5.42226 7.27028 5.69381 6.57314L10.3627 6.57142C10.6783 6.57142 10.9342 6.31542 10.9342 5.99999C10.9342 5.68456 10.6783 5.42856 10.3627 5.42856L5.69083 5.42348C5.44038 4.74174 4.80146 4.28572 4.07701 4.28572ZM4.07701 5.42856C4.39261 5.42856 4.64844 5.68456 4.64844 5.99999C4.64844 6.31542 4.39261 6.57142 4.07701 6.57142C3.76141 6.57142 3.50558 6.31542 3.50558 5.99999C3.50558 5.68456 3.76141 5.42856 4.07701 5.42856ZM7.50558 8.57142C6.78112 8.57142 6.11844 9.04857 5.89438 9.70857L1.21987 9.71428C0.904267 9.71428 0.648438 9.97028 0.648438 10.2857C0.648438 10.6011 0.904267 10.8571 1.21987 10.8571L5.88592 10.8577C6.12301 11.5349 6.78112 12 7.50558 12C8.23004 12 8.85467 11.5469 9.12987 10.8577L10.3627 10.8571C10.6783 10.8571 10.9342 10.6011 10.9342 10.2857C10.9342 9.97028 10.6783 9.71428 10.3627 9.71428L9.12467 9.71091C8.87798 9.03491 8.23004 8.57142 7.50558 8.57142ZM7.50558 9.71428C7.82118 9.71428 8.07701 9.97028 8.07701 10.2857C8.07701 10.6011 7.82118 10.8571 7.50558 10.8571C7.18998 10.8571 6.93415 10.6011 6.93415 10.2857C6.93415 9.97028 7.18998 9.71428 7.50558 9.71428Z",
     fill: "white"
   })
-], -1)), Gt = [
-  Nt
-], Ut = /* @__PURE__ */ nt(() => /* @__PURE__ */ t("div", { class: "column-title-2" }, null, -1)), qt = ["onClick"], Jt = {
+], -1)), Jt = [
+  qt
+], Xt = { class: "name" }, Kt = ["onClick"], Qt = /* @__PURE__ */ G(() => /* @__PURE__ */ t("g", {
+  opacity: ".5",
+  stroke: "#fff",
+  "stroke-width": "1.677",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [
+  /* @__PURE__ */ t("path", { d: "M4.532 2.13v13.74M8.202 12.2l-3.67 3.669-3.669-3.67M12.919 15.87V2.132M16.589 5.802l-3.67-3.67-3.669 3.67" })
+], -1)), Yt = [
+  Qt
+], te = /* @__PURE__ */ G(() => /* @__PURE__ */ t("div", { class: "column-title-2" }, null, -1)), ee = ["onClick"], oe = {
   __name: "ScrollColumns",
   props: {
     availablePlayers: {
@@ -382,82 +392,119 @@ const At = /* @__PURE__ */ Rt(j, [["render", Zt], ["__scopeId", "data-v-f3ee6b2b
       default: !1
     }
   },
-  emits: ["expand", "open-media", "click-parameters"],
-  setup(o, { expose: d, emit: s }) {
-    const c = o, v = w(null), f = w(null), k = w(0);
-    w(!1);
-    const M = R(() => {
-      const p = c.availablePlayers[0];
-      return p ? p.stats : [];
-    }), B = R(() => {
-      const p = `repeat(${M.value.length}, max-content) 36px`;
-      let g = "";
-      return k.value > 0 && document.querySelectorAll(".column-title-2").forEach((x) => {
-        g += `${x.offsetWidth}px `;
+  emits: ["expand", "open-media", "click-parameters", "sort"],
+  setup(s, { expose: u, emit: i }) {
+    const f = s, _ = g(null), m = g(null), S = g(0);
+    g(!1);
+    const R = O(() => {
+      const c = f.availablePlayers[0];
+      return c ? c.stats : [];
+    }), E = O(() => {
+      const c = `repeat(${R.value.length}, max-content) 36px`;
+      let v = "";
+      return S.value > 0 && document.querySelectorAll(".column-title-2").forEach((M) => {
+        v += `${M.offsetWidth}px `;
       }), {
-        "--grid-template-columns": p,
-        "--grid-template-columns-totals": g || p
+        "--grid-template-columns": c,
+        "--grid-template-columns-totals": v || c
       };
     });
-    function h() {
-      v.value = new ResizeObserver((p) => {
-        for (const g of p) {
-          const { width: b } = g.contentRect;
-          k.value = b;
+    function p() {
+      _.value = new ResizeObserver((c) => {
+        for (const v of c) {
+          const { width: w } = v.contentRect;
+          S.value = w;
         }
-      }), v.value.observe(f.value);
+      }), _.value.observe(m.value);
     }
-    function V(p, g) {
-      const x = document.querySelectorAll(".scrollable-row-totals")[p + 1];
-      x && (x.style.marginTop = `${g}px`);
+    function I(c, v) {
+      const M = document.querySelectorAll(".scrollable-row-totals")[c + 1];
+      M && (M.style.marginTop = `${v}px`);
     }
-    function E({ player: p, stat: g }) {
-      !g.total || g === "0%" || !g.seasons || !g.seasons.length || s("open-media", { ...p, stat: g });
+    function F({ player: c, stat: v }) {
+      !v.total || v === "0%" || !v.seasons || !v.seasons.length || i("open-media", { ...c, stat: v });
     }
-    function _(p) {
-      !p || p === "no" || s("click-parameters", p);
+    function k(c) {
+      !c || c === "no" || i("click-parameters", c);
     }
-    return it(() => {
-      h();
-    }), d({
-      setMarginTopDetails: V
-    }), (p, g) => (l(), n("div", {
+    function j(c) {
+      i("sort", c);
+    }
+    return rt(() => {
+      p();
+    }), u({
+      setMarginTopDetails: I
+    }), (c, v) => (n(), r("div", {
       class: "scroll-columns",
-      style: $(B.value)
+      style: B(E.value)
     }, [
-      o.isEditMode ? (l(), n("div", Wt)) : L("", !0),
+      s.isEditMode ? (n(), r("div", Gt)) : L("", !0),
       t("div", {
         ref_key: "titlesRow",
-        ref: f,
+        ref: m,
         class: "scrollable-row-2"
       }, [
-        (l(!0), n(T, null, I(M.value, (b, x) => (l(), n("div", {
-          key: `t-${x}`,
+        (n(!0), r(T, null, z(R.value, (w, M) => (n(), r("div", {
+          key: `t-${M}`,
           class: "column-title-2"
         }, [
-          t("div", jt, u(b.name), 1),
-          b.parameters && b.parameters !== "no" ? (l(), n("div", {
+          w.parameters && w.parameters !== "no" ? (n(), r("div", {
             key: 0,
             class: "parameters",
             role: "button",
-            onClick: (y) => _(b.parameters)
-          }, Gt, 8, Ht)) : L("", !0)
+            onClick: (x) => k(w.parameters)
+          }, Jt, 8, Ut)) : L("", !0),
+          t("div", Xt, h(w.name), 1),
+          (n(), r("svg", {
+            width: "18",
+            height: "18",
+            viewBox: "0 0 18 18",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            onClick: (x) => j(w)
+          }, Yt, 8, Kt))
         ]))), 128)),
-        Ut
+        te
       ], 512),
-      (l(!0), n(T, null, I(o.availablePlayers, (b, x) => (l(), n("div", {
-        key: `i-${b.id}`,
+      (n(!0), r(T, null, z(s.availablePlayers, (w, M) => (n(), r("div", {
+        key: `i-${w.id}`,
         class: "row scrollable-row-totals"
       }, [
-        (l(!0), n(T, null, I(b.stats, (y) => (l(), n("div", {
-          key: y.category_id,
-          class: m(["row data-info", { odd: x % 2 !== 0, underline: !!y.total && y.total !== "0%" && y.seasons && y.seasons.length }]),
-          onClick: (H) => E({ player: b, stat: y })
-        }, u(y.total), 11, qt))), 128))
+        (n(!0), r(T, null, z(w.stats, (x) => (n(), r("div", {
+          key: x.category_id,
+          class: y(["row data-info", { odd: M % 2 !== 0, underline: !!x.total && x.total !== "0%" && x.seasons && x.seasons.length }])
+        }, [
+          t("span", {
+            onClick: (U) => F({ player: w, stat: x })
+          }, h(x.total), 9, ee)
+        ], 2))), 128))
       ]))), 128))
     ], 4));
   }
-}, Xt = /* @__PURE__ */ lt(Jt, [["__scopeId", "data-v-16177785"]]), C = (o) => (A("data-v-bfcf1c28"), o = o(), W(), o), Kt = { class: "table__static-column" }, Qt = /* @__PURE__ */ C(() => /* @__PURE__ */ t("div", { class: "static-title column-title" }, null, -1)), Yt = { class: "container" }, te = { class: "details-row__info" }, ee = { class: "details-row__info__personal" }, oe = { class: "bold" }, se = { class: "bold" }, ie = { class: "bold" }, le = { class: "bold" }, ne = { class: "details-row__info__games" }, ae = { class: "bold" }, de = { class: "bold" }, re = ["onClick"], ce = /* @__PURE__ */ C(() => /* @__PURE__ */ t("div", null, "Ver gráfica", -1)), ue = /* @__PURE__ */ C(() => /* @__PURE__ */ t("svg", {
+}, se = /* @__PURE__ */ dt(oe, [["__scopeId", "data-v-df83603b"]]), d = (s) => (W("data-v-18f2714a"), s = s(), H(), s), ie = { class: "table__static-column" }, le = { class: "static-title column-title restore" }, ne = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", { class: "titles-left" }, [
+  /* @__PURE__ */ t("div", { class: "title" }, "Ranking"),
+  /* @__PURE__ */ t("div", { class: "title" }, "Agregar a lista")
+], -1)), ae = /* @__PURE__ */ d(() => /* @__PURE__ */ t("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, [
+  /* @__PURE__ */ t("g", {
+    opacity: ".6",
+    stroke: "#fff",
+    "stroke-width": "1.333",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }, [
+    /* @__PURE__ */ t("path", { d: "M15.333 2.667v4h-4M.667 13.333v-4h4" }),
+    /* @__PURE__ */ t("path", { d: "M2.34 6a6 6 0 0 1 9.9-2.24l3.094 2.906M.667 9.333l3.093 2.906a6 6 0 0 0 9.9-2.24" })
+  ])
+], -1)), re = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", null, "Restaurar orden", -1)), de = [
+  ae,
+  re
+], ce = ["id"], ue = { class: "container" }, fe = { class: "details-row__info" }, he = { class: "details-row__info__personal" }, ve = { class: "bold" }, pe = { class: "bold" }, _e = { class: "bold" }, ge = { class: "bold" }, me = { class: "details-row__info__games" }, Ce = { class: "bold" }, ke = { class: "bold" }, we = ["onClick"], be = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", null, "Ver gráfica", -1)), ye = /* @__PURE__ */ d(() => /* @__PURE__ */ t("svg", {
   width: "17",
   height: "16",
   viewBox: "0 0 17 16",
@@ -480,10 +527,10 @@ const At = /* @__PURE__ */ Rt(j, [["render", Zt], ["__scopeId", "data-v-f3ee6b2b
       })
     ])
   ])
-], -1)), fe = [
-  ce,
-  ue
-], he = ["onClick"], ve = /* @__PURE__ */ C(() => /* @__PURE__ */ t("div", null, "Eliminar de lista", -1)), pe = /* @__PURE__ */ C(() => /* @__PURE__ */ t("svg", {
+], -1)), xe = [
+  be,
+  ye
+], Se = ["onClick"], Me = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", null, "Eliminar de lista", -1)), Le = /* @__PURE__ */ d(() => /* @__PURE__ */ t("svg", {
   width: "17",
   height: "15",
   viewBox: "0 0 20 18",
@@ -514,10 +561,10 @@ const At = /* @__PURE__ */ Rt(j, [["render", Zt], ["__scopeId", "data-v-f3ee6b2b
     "stroke-linecap": "round",
     "stroke-linejoin": "round"
   })
-], -1)), ge = [
-  ve,
-  pe
-], _e = ["onClick"], me = /* @__PURE__ */ C(() => /* @__PURE__ */ t("div", null, "Agregar a lista", -1)), Ce = /* @__PURE__ */ C(() => /* @__PURE__ */ t("svg", {
+], -1)), $e = [
+  Me,
+  Le
+], Be = ["onClick"], Re = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", null, "Agregar a lista", -1)), Ee = /* @__PURE__ */ d(() => /* @__PURE__ */ t("svg", {
   width: "20",
   height: "20",
   viewBox: "0 0 20 20",
@@ -548,69 +595,132 @@ const At = /* @__PURE__ */ Rt(j, [["render", Zt], ["__scopeId", "data-v-f3ee6b2b
     "stroke-linecap": "round",
     "stroke-linejoin": "round"
   })
-], -1)), be = [
-  me,
-  Ce
-], we = ["onClick"], ke = /* @__PURE__ */ C(() => /* @__PURE__ */ t("div", null, "Ver perfil", -1)), ye = [
-  ke
-], xe = { class: "static-row__info-player" }, Se = { class: "position" }, Le = ["onClick"], $e = /* @__PURE__ */ C(() => /* @__PURE__ */ t("path", {
+], -1)), Pe = [
+  Re,
+  Ee
+], Ie = ["onClick"], Oe = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", null, "Ver perfil", -1)), Te = [
+  Oe
+], Fe = { class: "static-row__info-player" }, De = { class: "position" }, Ve = ["onClick"], ze = /* @__PURE__ */ d(() => /* @__PURE__ */ t("path", {
   d: "M13.3345 16.5001V14.8334C13.3345 13.9494 12.9833 13.1015 12.3582 12.4764C11.7331 11.8513 10.8852 11.5001 10.0012 11.5001H5.00126C4.11722 11.5001 3.26938 11.8513 2.64427 12.4764C2.01915 13.1015 1.66797 13.9494 1.66797 14.8334V16.5001",
   stroke: "white",
   "stroke-opacity": "0.5",
   "stroke-width": "1.5",
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
-}, null, -1)), Me = /* @__PURE__ */ C(() => /* @__PURE__ */ t("path", {
+}, null, -1)), je = /* @__PURE__ */ d(() => /* @__PURE__ */ t("path", {
   d: "M7.50126 8.16658C9.34219 8.16658 10.8346 6.67422 10.8346 4.83329C10.8346 2.99237 9.34219 1.5 7.50126 1.5C5.66033 1.5 4.16797 2.99237 4.16797 4.83329C4.16797 6.67422 5.66033 8.16658 7.50126 8.16658Z",
   stroke: "white",
   "stroke-opacity": "0.5",
   "stroke-width": "1.5",
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
-}, null, -1)), Be = /* @__PURE__ */ C(() => /* @__PURE__ */ t("path", {
+}, null, -1)), Ae = /* @__PURE__ */ d(() => /* @__PURE__ */ t("path", {
   d: "M18.332 8.16663H13.332",
   stroke: "white",
   "stroke-opacity": "0.5",
   "stroke-width": "1.5",
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
-}, null, -1)), Ve = [
-  $e,
-  Me,
-  Be
-], Re = ["onClick"], Te = /* @__PURE__ */ C(() => /* @__PURE__ */ t("path", {
+}, null, -1)), Ze = [
+  ze,
+  je,
+  Ae
+], We = {
+  key: 1,
+  class: "add-to-list"
+}, He = ["onClick"], Ne = /* @__PURE__ */ d(() => /* @__PURE__ */ t("path", {
   d: "M13.2016 17.2012V15.601C13.2016 14.7522 12.8645 13.9381 12.2643 13.3379C11.664 12.7377 10.85 12.4005 10.0012 12.4005H5.20047C4.35165 12.4005 3.5376 12.7377 2.9374 13.3379C2.33719 13.9381 2 14.7522 2 15.601V17.2012",
   stroke: "white",
   "stroke-opacity": "1",
   "stroke-width": "1.44023",
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
-}, null, -1)), Ee = /* @__PURE__ */ C(() => /* @__PURE__ */ t("path", {
+}, null, -1)), Ge = /* @__PURE__ */ d(() => /* @__PURE__ */ t("path", {
   d: "M7.60086 9.19977C9.36843 9.19977 10.8013 7.76687 10.8013 5.9993C10.8013 4.23173 9.36843 2.79883 7.60086 2.79883C5.83329 2.79883 4.40039 4.23173 4.40039 5.9993C4.40039 7.76687 5.83329 9.19977 7.60086 9.19977Z",
   stroke: "white",
   "stroke-opacity": "1",
   "stroke-width": "1.44023",
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
-}, null, -1)), Oe = /* @__PURE__ */ C(() => /* @__PURE__ */ t("path", {
+}, null, -1)), Ue = /* @__PURE__ */ d(() => /* @__PURE__ */ t("path", {
   d: "M15.5996 6.79944V11.6001M17.9999 9.19979H13.1992",
   stroke: "white",
   "stroke-opacity": "1",
   "stroke-width": "1.44023",
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
-}, null, -1)), Ie = [
-  Te,
-  Ee,
-  Oe
-], Pe = { class: "player-photo" }, Fe = ["src"], ze = { class: "player-name" }, De = { class: "arrow" }, Ze = ["onClick"], Ae = /* @__PURE__ */ C(() => /* @__PURE__ */ t("path", {
+}, null, -1)), qe = [
+  Ne,
+  Ge,
+  Ue
+], Je = { class: "player-photo" }, Xe = ["src"], Ke = { class: "player-name" }, Qe = { class: "arrow" }, Ye = ["onClick"], to = /* @__PURE__ */ d(() => /* @__PURE__ */ t("path", {
   "fill-rule": "evenodd",
   "clip-rule": "evenodd",
   d: "M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z",
   fill: "#D9D9D9"
-}, null, -1)), We = [
-  Ae
-], je = /* @__PURE__ */ Ct('<div class="titles scrollable-row" data-v-bfcf1c28><div class="column-title" data-v-bfcf1c28>Equipo</div><div class="column-title" data-v-bfcf1c28>Posición</div><div class="column-title" data-v-bfcf1c28>Edad</div><div class="column-title" data-v-bfcf1c28>País</div><div class="column-title" data-v-bfcf1c28>Partidos Jugados</div><div class="column-title" data-v-bfcf1c28>Minutos Jugados</div><div class="column-title" data-v-bfcf1c28>Liga</div><div class="column-title" data-v-bfcf1c28>Videos</div><div class="column-title" data-v-bfcf1c28></div></div>', 1), He = { class: "team-logo" }, Ne = ["src"], Ge = { class: "team-name data-info" }, Ue = ["src"], qe = {
+}, null, -1)), eo = [
+  to
+], oo = { class: "titles scrollable-row" }, so = { class: "column-title" }, io = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", null, " Equipo ", -1)), lo = /* @__PURE__ */ d(() => /* @__PURE__ */ t("g", {
+  opacity: ".5",
+  stroke: "#fff",
+  "stroke-width": "1.677",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [
+  /* @__PURE__ */ t("path", { d: "M4.532 2.13v13.74M8.202 12.2l-3.67 3.669-3.669-3.67M12.919 15.87V2.132M16.589 5.802l-3.67-3.67-3.669 3.67" })
+], -1)), no = [
+  lo
+], ao = { class: "column-title" }, ro = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", null, " Posición ", -1)), co = /* @__PURE__ */ d(() => /* @__PURE__ */ t("g", {
+  opacity: ".5",
+  stroke: "#fff",
+  "stroke-width": "1.677",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [
+  /* @__PURE__ */ t("path", { d: "M4.532 2.13v13.74M8.202 12.2l-3.67 3.669-3.669-3.67M12.919 15.87V2.132M16.589 5.802l-3.67-3.67-3.669 3.67" })
+], -1)), uo = [
+  co
+], fo = { class: "column-title" }, ho = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", null, " Edad ", -1)), vo = /* @__PURE__ */ d(() => /* @__PURE__ */ t("g", {
+  opacity: ".5",
+  stroke: "#fff",
+  "stroke-width": "1.677",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [
+  /* @__PURE__ */ t("path", { d: "M4.532 2.13v13.74M8.202 12.2l-3.67 3.669-3.669-3.67M12.919 15.87V2.132M16.589 5.802l-3.67-3.67-3.669 3.67" })
+], -1)), po = [
+  vo
+], _o = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", { class: "column-title" }, "País", -1)), go = { class: "column-title" }, mo = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", null, " Partidos Jugados ", -1)), Co = /* @__PURE__ */ d(() => /* @__PURE__ */ t("g", {
+  opacity: ".5",
+  stroke: "#fff",
+  "stroke-width": "1.677",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [
+  /* @__PURE__ */ t("path", { d: "M4.532 2.13v13.74M8.202 12.2l-3.67 3.669-3.669-3.67M12.919 15.87V2.132M16.589 5.802l-3.67-3.67-3.669 3.67" })
+], -1)), ko = [
+  Co
+], wo = { class: "column-title" }, bo = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", null, " Minutos Jugados ", -1)), yo = /* @__PURE__ */ d(() => /* @__PURE__ */ t("g", {
+  opacity: ".5",
+  stroke: "#fff",
+  "stroke-width": "1.677",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [
+  /* @__PURE__ */ t("path", { d: "M4.532 2.13v13.74M8.202 12.2l-3.67 3.669-3.669-3.67M12.919 15.87V2.132M16.589 5.802l-3.67-3.67-3.669 3.67" })
+], -1)), xo = [
+  yo
+], So = { class: "column-title" }, Mo = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", null, " Liga ", -1)), Lo = /* @__PURE__ */ d(() => /* @__PURE__ */ t("g", {
+  opacity: ".5",
+  stroke: "#fff",
+  "stroke-width": "1.677",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [
+  /* @__PURE__ */ t("path", { d: "M4.532 2.13v13.74M8.202 12.2l-3.67 3.669-3.669-3.67M12.919 15.87V2.132M16.589 5.802l-3.67-3.67-3.669 3.67" })
+], -1)), $o = [
+  Lo
+], Bo = /* @__PURE__ */ d(() => /* @__PURE__ */ t("div", { class: "column-title" }, "Videos", -1)), Ro = { class: "team-logo" }, Eo = ["src"], Po = { class: "team-name data-info" }, Io = ["src"], Oo = {
   __name: "GSC-TableScrollable",
   props: {
     players: {
@@ -638,63 +748,120 @@ const At = /* @__PURE__ */ Rt(j, [["render", Zt], ["__scopeId", "data-v-f3ee6b2b
     "open-media",
     "click-parameters"
   ],
-  setup(o, { emit: d }) {
-    const s = o;
-    let c = null, v = null;
-    const f = w([]), k = w(null), M = w(null), B = w(0), h = w(0), V = w(-1);
-    w(!1);
-    const E = w(null), _ = w(null), p = R(() => ({
-      "--width-details": `${B.value}px`,
-      "--gap-static-row": `${g.value ? "8px" : "18px"}`,
-      "--width-static-column": `${g.value ? "50%" : "256px"}`
-    })), g = R(() => B.value < 600);
-    F(
-      () => s.players,
+  setup(s, { emit: u }) {
+    const i = s;
+    let f = null, _ = null;
+    const m = g([]), S = g(null), R = g(null), E = g(0), p = g(0), I = g(-1);
+    g(!1);
+    const F = g(null), k = g(null), j = g(null), c = g([]), v = g([
+      {
+        name: "team_abrev",
+        isDesc: !1,
+        isRoot: !0
+      },
+      {
+        name: "player_position",
+        isDesc: !1,
+        isRoot: !0
+      },
+      {
+        name: "player_age",
+        isDesc: !1,
+        isRoot: !0
+      },
+      {
+        name: "player_games",
+        isDesc: !1,
+        isRoot: !0
+      },
+      {
+        name: "player_min",
+        isDesc: !1,
+        isRoot: !0
+      },
+      {
+        name: "league_name",
+        isDesc: !1,
+        isRoot: !0
+      }
+    ]), w = g(0), M = O(() => ({
+      "--width-details": `${E.value}px`,
+      "--gap-static-row": `${x.value ? "8px" : "18px"}`,
+      "--width-static-column": `${x.value ? "50%" : "436px"}`
+    })), x = O(() => E.value < 600);
+    V(
+      () => i.players,
       (e) => {
-        e && e.length && (f.value = e.map((r, i) => {
-          const a = i + 1, S = {
-            ...r,
+        e && e.length && (m.value = e.map((l, o) => {
+          const a = o + 1, C = {
+            ...l,
             position: a < 10 ? `0${a}` : `${a}`,
             isSelected: !1,
             isExpanded: !1,
-            isOdd: i % 2 !== 0,
-            index: i
+            isOdd: o % 2 !== 0,
+            index: o
           };
-          return S.parameters && Object.entries(S.parameters).forEach(([D, Z]) => {
-            const K = S.stats.find((ht) => ht.custom_category_id === Number(D));
-            K && (K.parameters = Z);
-          }), S;
-        }));
+          return l.stats && l.stats.length && (C.stats = l.stats.map((b) => ({
+            ...b,
+            isDesc: !1,
+            isRoot: !1
+          }))), C.parameters && Object.entries(C.parameters).forEach(([b, $]) => {
+            const et = C.stats.find((mt) => mt.custom_category_id === Number(b));
+            et && (et.parameters = $);
+          }), C;
+        }), c.value = m.value.map((l) => ({
+          ...l
+        })));
       },
       { immediate: !0, deep: !0 }
-    ), F(
-      () => s.isEditMode,
+    ), V(
+      () => i.isEditMode,
       (e) => {
-        e && f.value.forEach((r) => {
-          r.isSelected = !1;
+        e && m.value.forEach((l) => {
+          l.isSelected = !1;
         });
       }
-    ), F(
-      h,
+    ), V(
+      () => j.value,
+      (e) => {
+        if (e) {
+          let l = [...c.value];
+          e.isRoot ? l.sort((o, a) => typeof o[e.name] == "string" ? e.isDesc ? o[e.name].localeCompare(a[e.name]) : o[e.name].localeCompare(a[e.name]) * -1 : e.isDesc ? a[e.name] - o[e.name] : o[e.name] - a[e.name]) : l.sort((o, a) => {
+            const C = o.stats.find(($) => $.name === e.name), b = a.stats.find(($) => $.name === e.name);
+            return typeof C.value == "string" ? e.isDesc ? C.total.localeCompare(b.total) : C.total.localeCompare(b.total) * -1 : e.isDesc ? b.total - C.total : C.total - b.total;
+          }), l.forEach((o, a) => {
+            o.isOdd = a % 2 !== 0;
+          }), c.value = l;
+        } else
+          c.value.sort((l, o) => l.index - o.index).forEach((l, o) => {
+            l.isOdd = o % 2 !== 0;
+          });
+      },
+      { immediate: !0, deep: !0 }
+    ), V(
+      p,
       (e) => {
-        const i = document.querySelectorAll(".static-row")[V.value + 1];
-        i && (i.style.marginTop = `${e}px`), s.isGeneral ? b(V.value, e) : M.value && M.value.setMarginTopDetails(V.value, e), e === 0 && E.value && U(E.value);
+        const o = document.querySelectorAll(".static-row")[I.value + 1];
+        o && (o.style.marginTop = `${e}px`), i.isGeneral ? U(I.value, e) : R.value && R.value.setMarginTopDetails(I.value, e), e === 0 && F.value && K(F.value);
       }
     );
-    function b(e, r) {
+    function U(e, l) {
       const a = document.querySelectorAll(".scrollable-row")[e + 2];
-      a && (a.style.marginTop = `${r}px`);
+      a && (a.style.marginTop = `${l}px`);
+    }
+    function ct(e) {
+      u("click-parameters", e);
     }
-    function x(e) {
-      d("click-parameters", e);
+    function P(e) {
+      e && (e.isDesc = !e.isDesc), j.value = e;
     }
-    function y(e) {
-      const r = e.player || e.objeto_player, i = r ? r.player_id || r.id || r.playerId : e.id || e.player_id, a = {
+    function q(e) {
+      const l = e.player || e.objeto_player, o = l ? l.player_id || l.id || l.playerId : e.id || e.player_id, a = {
         isFeaturedPlayers: !1,
         mainSectionType: 1,
         playListType: 2,
         gameIds: null,
-        playerIds: i ? [i] : [],
+        playerIds: o ? [o] : [],
         goalkeeperIds: [],
         matchResult: [1, 2, 3],
         categorySingleName: "",
@@ -709,26 +876,26 @@ const At = /* @__PURE__ */ Rt(j, [["render", Zt], ["__scopeId", "data-v-f3ee6b2b
         }
       };
       if (e.stat && e.stat.parameters && (a.parameters = e.stat.parameters), e.stat && e.stat.seasons && e.stat.seasons.length || e.seasons && e.seasons.length) {
-        const S = [
+        const C = [
           ...e.stat && e.stat.seasons && e.stat.seasons.length ? e.stat.seasons : e.seasons
         ];
-        S.sort((D, Z) => D - Z), a.seasonId = S.shift(), a.seasonsIds = S;
+        C.sort((b, $) => b - $), a.seasonId = C.shift(), a.seasonsIds = C;
       } else (e.season_id || e.seasonId) && (a.seasonId = e.season_id || e.seasonId);
-      e.stat ? e.stat.category_id && e.stat.category_id.length ? a.categoryIds = e.stat.category_id : e.stat.custom_category_id && (a.customCategoryIds = [e.stat.custom_category_id]) : a.categoryIds = dt(e.player_position), d("open-media", a);
+      e.stat ? e.stat.category_id && e.stat.category_id.length ? a.categoryIds = e.stat.category_id : e.stat.custom_category_id && (a.customCategoryIds = [e.stat.custom_category_id]) : a.categoryIds = ht(e.player_position), u("open-media", a);
     }
-    function H() {
-      c = new ResizeObserver((e) => {
-        for (const r of e)
-          B.value = r.contentRect.width;
-      }), c.observe(k.value);
+    function ut() {
+      f = new ResizeObserver((e) => {
+        for (const l of e)
+          E.value = l.contentRect.width;
+      }), f.observe(S.value);
     }
-    function at(e) {
-      v = new ResizeObserver((r) => {
-        for (const i of r)
-          h.value = i.contentRect.height;
-      }), v.observe(e);
+    function ft(e) {
+      _ = new ResizeObserver((l) => {
+        for (const o of l)
+          p.value = o.contentRect.height;
+      }), _.observe(e);
     }
-    function dt(e) {
+    function ht(e) {
       return e === "POR" ? [39, 40, 52, 53, 54, 55, 323, 324, 608, 774, 802] : [
         10,
         12,
@@ -775,233 +942,317 @@ const At = /* @__PURE__ */ Rt(j, [["render", Zt], ["__scopeId", "data-v-f3ee6b2b
         488
       ];
     }
-    function rt(e, r) {
-      r.isSelected = e;
-      const i = f.value.filter((a) => a.isSelected);
-      d("change-selected-players", i);
+    function vt(e, l) {
+      l.isSelected = e;
+      const o = m.value.filter((a) => a.isSelected);
+      u("change-selected-players", o);
     }
-    function ct(e) {
-      d("view-profile", e);
+    function pt(e) {
+      u("view-profile", e);
     }
-    function N(e) {
-      d("delete-from-list", e);
+    function J(e) {
+      u("delete-from-list", e);
     }
-    function G(e) {
-      d("add-to-list", e);
+    function X(e) {
+      u("add-to-list", e);
     }
-    function ut(e) {
-      d("show-graph", e);
+    function _t(e) {
+      u("show-graph", e);
     }
-    function U(e) {
+    function K(e) {
       if (e.isExpanded) {
-        e.isExpanded = !1, E.value = null;
+        e.isExpanded = !1, F.value = null;
         return;
       }
-      const r = f.value.find((S) => S.isExpanded);
-      if (r && (r.isExpanded = !1), r) {
-        E.value = e;
+      const l = m.value.find((b) => b.isExpanded);
+      if (l && (l.isExpanded = !1), l) {
+        F.value = e;
         return;
       }
-      const a = document.querySelectorAll(".details-row")[e.index];
-      V.value = e.index, at(a), e.isExpanded = !0;
+      const o = document.querySelectorAll(".details-row");
+      let a = -1;
+      o.forEach((b, $) => {
+        b.id === `dr-${e.id}` && (a = $);
+      });
+      const C = o[a];
+      I.value = a, ft(C), e.isExpanded = !0;
     }
-    let z = !1, q, J, X = function(e) {
-      z = !0, q = e.pageX - _.value.offsetLeft, J = _.value.scrollLeft;
-    }, P = function() {
-      z = !1;
+    let Z = !1, Q, Y, tt = function(e) {
+      Z = !0, Q = e.pageX - k.value.offsetLeft, Y = k.value.scrollLeft;
+    }, A = function() {
+      Z = !1;
     };
-    function ft() {
-      _.value && (_.value.addEventListener("mousemove", (e) => {
-        if (!z)
+    function gt() {
+      k.value && (k.value.addEventListener("mousemove", (e) => {
+        if (!Z)
           return;
-        const i = e.pageX - _.value.offsetLeft - q;
-        _.value.scrollLeft = J - i;
-      }), _.value.addEventListener("mousedown", X, !1), _.value.addEventListener("mouseup", P, !1), _.value.addEventListener("mouseleave", P, !1));
+        const o = e.pageX - k.value.offsetLeft - Q;
+        k.value.scrollLeft = Y - o;
+      }), k.value.addEventListener("mousedown", tt, !1), k.value.addEventListener("mouseup", A, !1), k.value.addEventListener("mouseleave", A, !1));
     }
-    return it(() => {
-      H(), ft();
-    }), vt(() => {
-      c && c.disconnect(), v && v.disconnect(), _.value && (_.value.removeEventListener("mousemove", X, !1), _.value.removeEventListener("mouseup", P, !1), _.value.removeEventListener("mouseleave", P, !1));
-    }), (e, r) => (l(), n("div", {
+    return rt(() => {
+      ut(), gt();
+    }), Ct(() => {
+      f && f.disconnect(), _ && _.disconnect(), k.value && (k.value.removeEventListener("mousemove", tt, !1), k.value.removeEventListener("mouseup", A, !1), k.value.removeEventListener("mouseleave", A, !1));
+    }), (e, l) => (n(), r("div", {
       class: "table",
       ref_key: "tableSC",
-      ref: k,
-      style: $(p.value)
+      ref: S,
+      style: B(M.value),
+      key: w.value
     }, [
-      t("div", Kt, [
-        Qt,
-        (l(!0), n(T, null, I(f.value, (i) => (l(), n("div", {
-          key: `s-${i.id}`,
-          class: m(["row static-row", { odd: i.isOdd }])
+      t("div", ie, [
+        t("div", le, [
+          ne,
+          t("div", {
+            role: "button",
+            class: "restore-button",
+            onClick: l[0] || (l[0] = (o) => P(null))
+          }, de)
+        ]),
+        (n(!0), r(T, null, z(c.value, (o) => (n(), r("div", {
+          key: `s-${o.id}`,
+          class: y(["row static-row", { odd: o.isOdd }])
         }, [
-          Q(pt, null, {
-            default: gt(() => [
-              _t(t("div", {
-                class: m(["details-row", { odd: i.isOdd }])
+          ot(kt, null, {
+            default: wt(() => [
+              bt(t("div", {
+                id: `dr-${o.id}`,
+                class: y(["details-row", { odd: o.isOdd }])
               }, [
-                t("div", Yt, [
-                  t("div", te, [
-                    t("div", ee, [
+                t("div", ue, [
+                  t("div", fe, [
+                    t("div", he, [
                       t("div", null, [
-                        O("Equipo: "),
-                        t("span", oe, u(i.team_name), 1)
+                        D("Equipo: "),
+                        t("span", ve, h(o.team_name), 1)
                       ]),
                       t("div", null, [
-                        O("Edad: "),
-                        t("span", se, u(i.player_age) + " Años", 1)
+                        D("Edad: "),
+                        t("span", pe, h(o.player_age) + " Años", 1)
                       ]),
                       t("div", null, [
-                        O("Nacionalidad: "),
-                        t("span", ie, u(i.player_country), 1)
+                        D("Nacionalidad: "),
+                        t("span", _e, h(o.player_country), 1)
                       ]),
                       t("div", null, [
-                        O("Posición: "),
-                        t("span", le, u(i.position_name), 1)
+                        D("Posición: "),
+                        t("span", ge, h(o.position_name), 1)
                       ])
                     ]),
-                    t("div", ne, [
+                    t("div", me, [
                       t("div", null, [
-                        O("Partidos Jugados: "),
-                        t("span", ae, u(i.player_games), 1)
+                        D("Partidos Jugados: "),
+                        t("span", Ce, h(o.player_games), 1)
                       ]),
                       t("div", null, [
-                        O("Minutos Jugados: "),
-                        t("span", de, u(i.player_min), 1)
+                        D("Minutos Jugados: "),
+                        t("span", ke, h(o.player_min), 1)
                       ])
                     ])
                   ]),
                   t("div", {
                     class: "details-row__buttons",
-                    style: $(g.value ? "margin-left: 0; gap: 8px;" : "")
+                    style: B(x.value ? "margin-left: 0; gap: 8px;" : "")
                   }, [
                     t("div", {
                       role: "button",
                       class: "button",
-                      onClick: (a) => ut(i)
-                    }, fe, 8, re),
-                    o.isTableFromList ? (l(), n("div", {
+                      onClick: (a) => _t(o)
+                    }, xe, 8, we),
+                    s.isTableFromList ? (n(), r("div", {
                       key: 0,
                       role: "button",
                       class: "button",
-                      onClick: (a) => N(i)
-                    }, ge, 8, he)) : (l(), n("div", {
+                      onClick: (a) => J(o)
+                    }, $e, 8, Se)) : (n(), r("div", {
                       key: 1,
                       role: "button",
                       class: "button",
-                      onClick: (a) => G(i)
-                    }, be, 8, _e)),
+                      onClick: (a) => X(o)
+                    }, Pe, 8, Be)),
                     t("div", {
                       role: "button",
                       class: "button green",
-                      onClick: (a) => ct(i)
-                    }, ye, 8, we)
+                      onClick: (a) => pt(o)
+                    }, Te, 8, Ie)
                   ], 4)
                 ])
-              ], 2), [
-                [mt, i.isExpanded]
+              ], 10, ce), [
+                [yt, o.isExpanded]
               ])
             ]),
             _: 2
           }, 1024),
-          o.isEditMode ? (l(), Y(tt(Vt), {
+          s.isEditMode ? (n(), st(it(Ot), {
             key: 0,
             fontFamily: "Poppins-Regular",
             labelFontSize: "14px",
-            "model-value": i.isSelected,
-            "onUpdate:modelValue": (a) => rt(a, i)
+            "model-value": o.isSelected,
+            "onUpdate:modelValue": (a) => vt(a, o)
           }, null, 8, ["model-value", "onUpdate:modelValue"])) : L("", !0),
-          t("div", xe, [
-            t("div", Se, u(i.position), 1),
-            o.isTableFromList ? (l(), n("svg", {
+          t("div", Fe, [
+            t("div", De, h(o.position), 1),
+            s.isTableFromList ? (n(), r("svg", {
               key: 0,
               width: "20",
               height: "20",
               viewBox: "0 0 20 20",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              onClick: (a) => N(i)
-            }, Ve, 8, Le)) : (l(), n("svg", {
-              key: 1,
-              width: "20",
-              height: "20",
-              viewBox: "0 0 20 20",
-              fill: "none",
-              xmlns: "http://www.w3.org/2000/svg",
-              onClick: (a) => G(i)
-            }, Ie, 8, Re)),
-            t("div", Pe, [
+              onClick: (a) => J(o)
+            }, Ze, 8, Ve)) : (n(), r("div", We, [
+              (n(), r("svg", {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 20 20",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                onClick: (a) => X(o)
+              }, qe, 8, He))
+            ])),
+            t("div", Je, [
               t("div", null, [
                 t("img", {
-                  src: i.player_photo,
+                  src: o.player_photo,
                   alt: "player photo"
-                }, null, 8, Fe)
+                }, null, 8, Xe)
               ])
             ]),
-            t("div", ze, u(i.player_name), 1)
+            t("div", Ke, h(o.player_name), 1)
           ]),
-          t("div", De, [
-            (l(), n("svg", {
-              class: m(["_arrowExpandIcon_6ak64_1115 _rotate_6ak64_5", { expanded: i.isExpanded }]),
+          t("div", Qe, [
+            (n(), r("svg", {
+              class: y(["_arrowExpandIcon_6ak64_1115 _rotate_6ak64_5", { expanded: o.isExpanded }]),
               width: "12",
               height: "8",
               viewBox: "0 0 12 8",
               fill: "#D9D9D9",
               xmlns: "http://www.w3.org/2000/svg",
-              onClick: (a) => U(i)
-            }, We, 10, Ze))
+              onClick: (a) => K(o)
+            }, eo, 10, Ye))
           ])
         ], 2))), 128))
       ]),
       t("div", {
         ref_key: "scrollableColumns",
-        ref: _,
+        ref: k,
         class: "table__scrollable-columns"
       }, [
-        o.isGeneral ? (l(), n(T, { key: 0 }, [
-          je,
-          (l(!0), n(T, null, I(f.value, (i) => (l(), n("div", {
-            key: `i-${i.id}`,
+        s.isGeneral ? (n(), r(T, { key: 0 }, [
+          t("div", oo, [
+            t("div", so, [
+              io,
+              (n(), r("svg", {
+                width: "18",
+                height: "18",
+                viewBox: "0 0 18 18",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                onClick: l[1] || (l[1] = (o) => P(v.value[0]))
+              }, no))
+            ]),
+            t("div", ao, [
+              ro,
+              (n(), r("svg", {
+                width: "18",
+                height: "18",
+                viewBox: "0 0 18 18",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                onClick: l[2] || (l[2] = (o) => P(v.value[1]))
+              }, uo))
+            ]),
+            t("div", fo, [
+              ho,
+              (n(), r("svg", {
+                width: "18",
+                height: "18",
+                viewBox: "0 0 18 18",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                onClick: l[3] || (l[3] = (o) => P(v.value[2]))
+              }, po))
+            ]),
+            _o,
+            t("div", go, [
+              mo,
+              (n(), r("svg", {
+                width: "18",
+                height: "18",
+                viewBox: "0 0 18 18",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                onClick: l[4] || (l[4] = (o) => P(v.value[3]))
+              }, ko))
+            ]),
+            t("div", wo, [
+              bo,
+              (n(), r("svg", {
+                width: "18",
+                height: "18",
+                viewBox: "0 0 18 18",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                onClick: l[5] || (l[5] = (o) => P(v.value[4]))
+              }, xo))
+            ]),
+            t("div", So, [
+              Mo,
+              (n(), r("svg", {
+                width: "18",
+                height: "18",
+                viewBox: "0 0 18 18",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                onClick: l[6] || (l[6] = (o) => P(v.value[5]))
+              }, $o))
+            ]),
+            Bo
+          ]),
+          (n(!0), r(T, null, z(c.value, (o) => (n(), r("div", {
+            key: `i-${o.id}`,
             class: "row scrollable-row"
           }, [
             t("div", {
-              class: m(["row team-info", { odd: i.isOdd }])
+              class: y(["row team-info", { odd: o.isOdd }])
             }, [
-              t("div", He, [
+              t("div", Ro, [
                 t("img", {
-                  src: i.team_logo,
+                  src: o.team_logo,
                   alt: "team logo"
-                }, null, 8, Ne)
+                }, null, 8, Eo)
               ]),
-              t("div", Ge, u(i.team_abrev), 1)
+              t("div", Po, h(o.team_abrev), 1)
             ], 2),
             t("div", {
-              class: m(["row data-info", { odd: i.isOdd }])
-            }, u(i.player_position), 3),
+              class: y(["row data-info", { odd: o.isOdd }])
+            }, h(o.player_position), 3),
             t("div", {
-              class: m(["row data-info", { odd: i.isOdd }])
-            }, u(i.player_age), 3),
+              class: y(["row data-info", { odd: o.isOdd }])
+            }, h(o.player_age), 3),
             t("div", {
-              class: m(["row data-info", { odd: i.isOdd }])
+              class: y(["row data-info", { odd: o.isOdd }])
             }, [
               t("img", {
-                src: i.player_country_flag,
+                src: o.player_country_flag,
                 alt: "player country flag",
                 class: "country-flag"
-              }, null, 8, Ue)
+              }, null, 8, Io)
             ], 2),
             t("div", {
-              class: m(["row data-info", { odd: i.isOdd }])
-            }, u(i.player_games), 3),
+              class: y(["row data-info", { odd: o.isOdd }])
+            }, h(o.player_games), 3),
             t("div", {
-              class: m(["row data-info", { odd: i.isOdd }])
-            }, u(i.player_min), 3),
+              class: y(["row data-info", { odd: o.isOdd }])
+            }, h(o.player_min), 3),
             t("div", {
-              class: m(["row data-info", { odd: i.isOdd }])
-            }, u(i.league_name), 3),
+              class: y(["row data-info", { odd: o.isOdd }])
+            }, h(o.league_name), 3),
             t("div", {
-              class: m(["row data-info", { odd: i.isOdd }])
+              class: y(["row data-info", { odd: o.isOdd }])
             }, [
-              Q(tt(At), {
+              ot(it(Nt), {
                 icon: "https://golstatsimages.blob.core.windows.net/images-library/arrow-btn.png",
                 "icon-size": "19px",
                 "icon-position": "left",
@@ -1014,26 +1265,24 @@ const At = /* @__PURE__ */ Rt(j, [["render", Zt], ["__scopeId", "data-v-f3ee6b2b
                 "border-color": "#55636e",
                 "text-value": "Ver videos",
                 "font-size": "10px",
-                onClick: (a) => y(i)
+                onClick: (a) => q(o)
               }, null, 8, ["onClick"])
-            ], 2),
-            t("div", {
-              class: m(["row data-info", { odd: i.isOdd }])
-            }, null, 2)
+            ], 2)
           ]))), 128))
-        ], 64)) : (l(), Y(Xt, {
+        ], 64)) : (n(), st(se, {
           key: 1,
           ref_key: "scrollColumns",
-          ref: M,
-          "available-players": f.value,
-          "is-edit-mode": o.isEditMode,
-          onOpenMedia: y,
-          onClickParameters: x
+          ref: R,
+          "available-players": c.value,
+          "is-edit-mode": s.isEditMode,
+          onOpenMedia: q,
+          onClickParameters: ct,
+          onSort: P
         }, null, 8, ["available-players", "is-edit-mode"]))
       ], 512)
     ], 4));
   }
-}, Xe = /* @__PURE__ */ lt(qe, [["__scopeId", "data-v-bfcf1c28"]]);
+}, Fo = /* @__PURE__ */ dt(Oo, [["__scopeId", "data-v-18f2714a"]]);
 export {
-  Xe as GSCTableScrollable
+  Fo as GSCTableScrollable
 };