@golstats/gsc-landing 1.0.6 → 1.0.8

package/dist/FilterField-1d2fb579-C1_TSEIn.js

@@ -0,0 +1,781 @@
+import { ref as x, openBlock as a, createElementBlock as d, createVNode as C, unref as m, useCssVars as F, resolveComponent as k, createElementVNode as s, createBlock as f, normalizeStyle as h, normalizeClass as w, createCommentVNode as b, toDisplayString as p, computed as v, watch as B, Fragment as _, pushScopeId as W, popScopeId as A } from "vue";
+import { q as V } from "./index-H-2dNVfw.js";
+const D = (e, i) => {
+  const t = e.__vccOpts || e;
+  for (const [l, o] of i)
+    t[l] = o;
+  return t;
+}, z = {
+  props: {
+    value: { type: Boolean, default: !1 },
+    textValue: String,
+    icon: String,
+    iconPosition: { type: String, default: "left" },
+    iconSize: String,
+    fontColor: { type: String, default: "#FFFFFF" },
+    textDecoration: String,
+    fontSize: { type: String, default: "16px" },
+    fontStyle: String,
+    fontFamily: { type: String, default: "Poppins-Regular" },
+    height: { type: String, default: "fit-content" },
+    width: { type: String, default: "fit-content" },
+    borderRadius: { type: String, default: "0px" },
+    borderType: { type: String, default: "solid" },
+    borderWidth: { type: Number, default: 0 },
+    borderColor: String,
+    backgroundColor: { type: String, default: "none" },
+    activeBackgroundColor: { type: String, default: "#000000" },
+    activeBorderWidth: { type: Number, default: 2 },
+    activeBorderType: { type: String, default: "solid" },
+    activeBorderColor: { type: String, default: "#cbee6b" },
+    activeColorText: { type: String, default: "#FFFFFF" },
+    cursorType: { type: String, default: "default" },
+    typeOnOff: { type: Boolean, default: !1 }
+  },
+  watch: {
+    value: {
+      deep: !0,
+      immediate: !0,
+      handler(e) {
+        this.status = e;
+      }
+    }
+  },
+  data() {
+    return { status: !1 };
+  },
+  computed: {
+    customStyle() {
+      return {
+        height: this.height,
+        width: this.width,
+        backgroundColor: this.backgroundColor,
+        borderRadius: this.borderRadius,
+        border: `${this.borderType} ${this.borderWidth}px ${this.borderColor}`,
+        color: this.fontColor,
+        textDecoration: this.textDecoration,
+        cursor: this.cursorType,
+        fontSize: this.fontSize,
+        fontStyle: this.fontStyle,
+        fontFamily: `${this.fontFamily} !important`
+      };
+    },
+    customActive() {
+      return {
+        backgroundColor: this.activeBackgroundColor,
+        color: this.activeColorText,
+        border: `${this.activeBorderType} ${this.activeBorderWidth}px ${this.activeBorderColor}`
+      };
+    }
+  },
+  methods: {
+    btnClick(e) {
+      this.$emit("click", e), this.typeOnOff && (this.status = !this.status, this.$emit("status", this.status));
+    }
+  }
+}, L = ["src"], $ = {
+  key: 1,
+  class: "text"
+}, P = ["src"];
+function N(e, i, t, l, o, r) {
+  return a(), d("div", {
+    class: w(["button", o.status && t.typeOnOff && "button-active"]),
+    style: h([r.customStyle, o.status && t.typeOnOff && r.customActive]),
+    onClick: i[0] || (i[0] = (...u) => r.btnClick && r.btnClick(...u))
+  }, [
+    t.icon && t.iconPosition.toLowerCase() === "left" ? (a(), d("img", {
+      key: 0,
+      class: "icon",
+      style: h({ width: t.iconSize }),
+      src: t.icon
+    }, null, 12, L)) : b("", !0),
+    t.textValue ? (a(), d("div", $, p(t.textValue), 1)) : b("", !0),
+    t.icon && t.iconPosition.toLowerCase() === "right" ? (a(), d("img", {
+      key: 2,
+      class: "icon",
+      style: h({ width: t.iconSize }),
+      src: t.icon
+    }, null, 12, P)) : b("", !0)
+  ], 6);
+}
+const O = /* @__PURE__ */ D(z, [["render", N], ["__scopeId", "data-v-1bfd444b"]]), G = (e, i) => {
+  const t = e.__vccOpts || e;
+  for (const [l, o] of i)
+    t[l] = o;
+  return t;
+}, I = { key: 1 }, T = {
+  width: "10",
+  height: "8",
+  viewBox: "0 0 10 8",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, M = ["fill"], E = {
+  __name: "GSC-Checkbox",
+  props: {
+    width: {
+      type: String,
+      default: "fit-content"
+    },
+    height: {
+      type: String,
+      default: "fit-content"
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    labelColor: {
+      type: String,
+      default: "white"
+    },
+    fontFamily: {
+      type: String,
+      default: "sans-serif"
+    },
+    labelFontSize: {
+      type: String,
+      default: "12px"
+    },
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    justifyContent: {
+      type: String,
+      default: "flex-start"
+    },
+    alignItems: {
+      type: String,
+      default: "center"
+    },
+    boxBackgroundColor: {
+      type: String,
+      default: "#CBEE6B"
+    },
+    boxValueColor: {
+      type: String,
+      default: "#0d1d29"
+    },
+    boxValue: {
+      type: [String, Number],
+      default: ""
+    },
+    boxPosition: {
+      type: String,
+      default: "left",
+      // values can be 'left', 'right', 'top', 'bottom'
+      validator(e) {
+        return ["left", "right", "top", "bottom"].includes(e);
+      }
+    },
+    boxWidthAndHeight: {
+      type: String,
+      default: "16px"
+    },
+    boxBorderColor: {
+      type: String,
+      default: "#969da2"
+    },
+    boxBorderWidth: {
+      type: String,
+      default: "2px"
+    },
+    boxBorderRadius: {
+      type: String,
+      default: "4px"
+    },
+    boxValueFontSize: {
+      type: String,
+      default: "10px"
+    },
+    boxValueFontFamily: {
+      type: String,
+      default: "sans-serif"
+    },
+    avoidInteraction: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: i }) {
+    const t = e, l = x(!1), o = v(() => {
+      const c = {
+        color: t.boxValueColor,
+        "font-family": t.fontFamily,
+        height: t.boxWidthAndHeight,
+        width: t.boxWidthAndHeight,
+        minWidth: t.boxWidthAndHeight,
+        "border-radius": t.boxBorderRadius
+      };
+      return l.value ? (c["background-color"] = t.boxBackgroundColor, c.border = `solid ${t.boxBorderWidth} ${t.boxBackgroundColor}`) : c.border = `solid ${t.boxBorderWidth} ${t.boxBorderColor}`, c;
+    }), r = v(() => ({
+      "font-family": t.boxValueFontFamily,
+      "font-size": t.boxValueFontSize,
+      color: t.boxValueColor,
+      "line-height": 1
+    })), u = v(() => {
+      const c = {
+        color: t.labelColor,
+        "font-family": t.fontFamily,
+        "font-size": t.labelFontSize
+      };
+      return (t.boxPosition === "left" || t.boxPosition === "right") && (c[`margin-${t.boxPosition}`] = "10px"), c;
+    });
+    B(
+      () => t.modelValue,
+      (c) => {
+        c !== l.value && (l.value = c);
+      },
+      { immediate: !0 }
+    );
+    function n() {
+      t.avoidInteraction || (l.value = !l.value, i("update:modelValue", l.value));
+    }
+    return (c, mt) => (a(), d("div", {
+      class: w(["checkbox", e.boxPosition]),
+      onClick: n
+    }, [
+      s("div", {
+        class: "checkbox__box",
+        style: h(o.value)
+      }, [
+        l.value ? (a(), d(_, { key: 0 }, [
+          t.boxValue ? (a(), d("div", {
+            key: 0,
+            class: "checkbox__box__value",
+            style: h(r.value)
+          }, p(e.boxValue), 5)) : (a(), d("div", I, [
+            (a(), d("svg", T, [
+              s("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: e.boxValueColor
+              }, null, 8, M)
+            ]))
+          ]))
+        ], 64)) : b("", !0)
+      ], 4),
+      s("div", {
+        class: "checkbox__label",
+        style: h(u.value)
+      }, p(e.label), 5)
+    ], 2));
+  }
+}, R = /* @__PURE__ */ G(E, [["__scopeId", "data-v-dcd61b4d"]]), H = (e, i) => {
+  const t = e.__vccOpts || e;
+  for (const [l, o] of i)
+    t[l] = o;
+  return t;
+}, y = {
+  components: {
+    GSCButton: O,
+    GSCCheckbox: R
+  },
+  data() {
+    return {
+      update: 0,
+      all: !1,
+      refreshBtn14: 0,
+      refreshBtn24: 0,
+      refreshBtn34: 0,
+      refreshBtn44: 0,
+      sectors: Array.from(
+        {
+          length: 16
+        },
+        (e, i) => ({
+          sector: i + 1,
+          active: !1
+        })
+      )
+    };
+  },
+  props: {
+    backgroundColor: {
+      type: String,
+      default: "#2e3b46"
+    },
+    heightContainer: {
+      type: String,
+      default: "370px"
+    },
+    widthContainer: {
+      type: String,
+      default: "455px"
+    },
+    heightField: {
+      type: Number,
+      default: 230
+    },
+    widthField: {
+      type: Number,
+      default: 350
+    },
+    heightFieldGrid: {
+      type: String,
+      default: "230px"
+    },
+    widthFieldGrid: {
+      type: String,
+      default: "350px"
+    },
+    backgroundSectorActive: {
+      type: String,
+      default: "#cbee6b"
+    },
+    backgroundSectorDisabled: {
+      type: String,
+      default: "#2e3b46"
+    },
+    borderWidth: {
+      type: Number,
+      default: 1
+    },
+    opacitySector: {
+      type: Number,
+      default: 0.5
+    },
+    borderColor: {
+      type: String,
+      default: "#FFFFFF"
+    },
+    colorLineField: {
+      type: String,
+      default: "#bfc2c5"
+    },
+    borderWidthLineField: {
+      type: Number,
+      default: 2
+    },
+    value: {
+      type: Array,
+      default: () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
+    }
+  },
+  watch: {
+    value: {
+      deep: !0,
+      immediate: !0,
+      handler(e) {
+        this.sectors.forEach((i, t) => {
+          i.active = e.includes(t + 1), this.validateField(t);
+        }), this.$emit("update:modelValue", e);
+      }
+    },
+    sectors: {
+      handler(e) {
+        var i = [];
+        for (let t = 0; t < e.length; t++)
+          e[t].active && i.push(t + 1);
+        this.$emit("update:modelValue", i);
+      },
+      deep: !0
+    }
+  },
+  computed: {
+    translx() {
+      var e = 0;
+      return this.widthField > 305 && (e = this.widthField - 305), e;
+    },
+    transly() {
+      var e = 0;
+      return this.heightField > 195 && (e = this.heightField - 195, e = e / 2), e;
+    },
+    translxcircle() {
+      var e = 0;
+      return this.widthField > 305 && (e = this.widthField - 305, e = e / 2), e;
+    }
+  },
+  methods: {
+    clickAll(e) {
+      if (e)
+        for (let i = 0; i < this.sectors.length; i++)
+          this.sectors[i].active = !0, this.validateField(i);
+      else
+        for (let i = 0; i < this.sectors.length; i++)
+          this.sectors[i].active = !0, this.validateField(i);
+      this.status14 = !0, this.status24 = !0, this.status34 = !0, this.status44 = !0, this.refreshBtn14 += 1, this.refreshBtn24 += 1, this.refreshBtn34 += 1, this.refreshBtn44 += 1;
+    },
+    selectSector(e) {
+      var i = 0;
+      this.sectors[e].active = !this.sectors[e].active;
+      for (let t = 0; t < this.sectors.length; t++)
+        this.sectors[t].active && (i += 1);
+      i == 0 && (this.sectors[e].active = !0), this.validateField(e);
+    },
+    btn14(e) {
+      this.sectors[0].active = e ? this.sectors[0].active = !0 : this.sectors[0].active = !1, this.sectors[1].active = e ? this.sectors[1].active = !0 : this.sectors[1].active = !1, this.sectors[2].active = e ? this.sectors[2].active = !0 : this.sectors[2].active = !1, this.sectors[3].active = e ? this.sectors[3].active = !0 : this.sectors[3].active = !1;
+      var i = 0;
+      for (let t = 0; t < this.sectors.length; t++)
+        this.sectors[t].active && (i += 1);
+      i == 0 ? (this.sectors[0].active = !0, this.sectors[1].active = !0, this.sectors[2].active = !0, this.sectors[3].active = !0, this.status14 = !0, this.refreshBtn14 += 1) : this.status14 = !1, i == 16 && (this.all = !0, this.update += 1);
+    },
+    btn24(e) {
+      this.sectors[4].active = e ? this.sectors[4].active = !0 : this.sectors[4].active = !1, this.sectors[5].active = e ? this.sectors[5].active = !0 : this.sectors[5].active = !1, this.sectors[6].active = e ? this.sectors[6].active = !0 : this.sectors[6].active = !1, this.sectors[7].active = e ? this.sectors[7].active = !0 : this.sectors[7].active = !1;
+      var i = 0;
+      for (let t = 0; t < this.sectors.length; t++)
+        this.sectors[t].active && (i += 1);
+      i == 0 ? (this.sectors[4].active = !0, this.sectors[5].active = !0, this.sectors[6].active = !0, this.sectors[7].active = !0, this.status24 = !0, this.refreshBtn24 += 1) : this.status24 = !1, i == 16 && (this.all = !0, this.update += 1);
+    },
+    btn34(e) {
+      this.sectors[8].active = e ? this.sectors[8].active = !0 : this.sectors[8].active = !1, this.sectors[9].active = e ? this.sectors[9].active = !0 : this.sectors[9].active = !1, this.sectors[10].active = e ? this.sectors[10].active = !0 : this.sectors[10].active = !1, this.sectors[11].active = e ? this.sectors[11].active = !0 : this.sectors[11].active = !1;
+      var i = 0;
+      for (let t = 0; t < this.sectors.length; t++)
+        this.sectors[t].active && (i += 1);
+      i == 0 ? (this.sectors[8].active = !0, this.sectors[9].active = !0, this.sectors[10].active = !0, this.sectors[11].active = !0, this.status34 = !0, this.refreshBtn34 += 1) : this.status34 = !1, i == 16 && (this.all = !0, this.update += 1);
+    },
+    btn44(e) {
+      this.sectors[12].active = e ? this.sectors[12].active = !0 : this.sectors[12].active = !1, this.sectors[13].active = e ? this.sectors[13].active = !0 : this.sectors[13].active = !1, this.sectors[14].active = e ? this.sectors[14].active = !0 : this.sectors[14].active = !1, this.sectors[15].active = e ? this.sectors[15].active = !0 : this.sectors[15].active = !1;
+      var i = 0;
+      for (let t = 0; t < this.sectors.length; t++)
+        this.sectors[t].active && (i += 1);
+      i == 0 ? (this.sectors[12].active = !0, this.sectors[13].active = !0, this.sectors[14].active = !0, this.sectors[15].active = !0, this.status44 = !0, this.refreshBtn44 += 1) : this.status44 = !1, i == 16 && (this.all = !0, this.update += 1);
+    },
+    validateField(e) {
+      (e === 0 || e === 1 || e === 2 || e === 3) && (this.status14 = !!(this.sectors[0].active && this.sectors[1].active && this.sectors[2].active && this.sectors[3].active)), (e === 4 || e === 5 || e === 6 || e === 7) && (this.status24 = !!(this.sectors[4].active && this.sectors[5].active && this.sectors[6].active && this.sectors[7].active)), (e === 8 || e === 9 || e === 10 || e === 11) && (this.status34 = !!(this.sectors[8].active && this.sectors[9].active && this.sectors[10].active && this.sectors[11].active)), (e === 12 || e === 13 || e === 14 || e === 15) && (this.status44 = !!(this.sectors[12].active && this.sectors[13].active && this.sectors[14].active && this.sectors[15].active)), this.status14 && this.status34 && this.status24 && this.status44 ? this.all = !0 : this.all = !1, this.update += 1, this.status14 && (this.refreshBtn14 += 1), this.status24 && (this.refreshBtn24 += 1), this.status34 && (this.refreshBtn34 += 1), this.status44 && (this.refreshBtn44 += 1);
+    }
+  }
+}, g = () => {
+  F((e) => ({
+    "5d18a1c4": e.widthContainer,
+    "4ff37fd1": e.heightContainer,
+    f4a580e8: e.backgroundColor,
+    "7e0a2eba": e.widthFieldGrid,
+    "985472a0": e.heightFieldGrid
+  }));
+}, S = y.setup;
+y.setup = S ? (e, i) => (g(), S(e, i)) : g;
+const q = (e) => (W("data-v-6929519f"), e = e(), A(), e), U = { class: "gsc-field" }, Z = { class: "gsc-field__title-checked" }, j = /* @__PURE__ */ q(() => /* @__PURE__ */ s("div", { class: "gsc-field__title-checked__title" }, "Elige el area o zona de cancha", -1)), Y = { class: "gsc-field__title-checked__check-cont" }, J = { class: "gsc-field__container-field" }, K = { class: "gsc-field__container-field__field" }, Q = {
+  width: "100%",
+  height: "100%",
+  fill: "#2e3b46",
+  xmlns: "http://www.w3.org/2000/svg"
+}, X = ["stroke"], tt = ["stroke", "stroke-width"], et = ["stroke", "stroke-width"], it = ["stroke-width", "stroke"], ot = ["fill", "fill-opacity", "stroke", "stroke-width"], rt = ["fill", "fill-opacity", "stroke", "stroke-width"], st = ["fill", "fill-opacity", "stroke", "stroke-width"], ct = ["fill", "fill-opacity", "stroke", "stroke-width"], lt = ["fill", "fill-opacity", "stroke", "stroke-width"], at = ["fill", "fill-opacity", "stroke", "stroke-width"], dt = ["fill", "fill-opacity", "stroke", "stroke-width"], ht = ["fill", "fill-opacity", "stroke", "stroke-width"], nt = ["fill", "fill-opacity", "stroke", "stroke-width"], ut = ["fill", "fill-opacity", "stroke", "stroke-width"], ft = ["fill", "fill-opacity", "stroke", "stroke-width"], bt = ["fill", "fill-opacity", "stroke", "stroke-width"], vt = ["fill", "fill-opacity", "stroke", "stroke-width"], pt = ["fill", "fill-opacity", "stroke", "stroke-width"], yt = ["fill", "fill-opacity", "stroke", "stroke-width"], kt = ["fill", "fill-opacity", "stroke", "stroke-width"], gt = { class: "gsc-field__container-field__bar-buttons" };
+function St(e, i, t, l, o, r) {
+  const u = k("GSCCheckbox"), n = k("GSCButton");
+  return a(), d("div", U, [
+    s("div", Z, [
+      j,
+      s("div", Y, [
+        (a(), f(u, {
+          label: "Todas las zonas",
+          "box-value-font-family": "Poppins-Regular",
+          "box-position": "right",
+          "onUpdate:modelValue": r.clickAll,
+          value: o.all,
+          key: o.update,
+          "model-value": o.all
+        }, null, 8, ["onUpdate:modelValue", "value", "model-value"]))
+      ])
+    ]),
+    s("div", J, [
+      s("div", K, [
+        (a(), d("svg", Q, [
+          s("rect", {
+            x: "1.5",
+            y: "0.5",
+            width: "100%",
+            height: "100%",
+            rx: "1.5",
+            stroke: t.colorLineField
+          }, null, 8, X),
+          s("path", {
+            style: h("transform: translate(" + r.translx + "px, " + r.transly + "px);"),
+            d: "M303.597 39.9799H263.371C262.817 39.9799 262.369 40.4301 262.371 40.984L262.842 155.176C262.845 155.726 263.292 156.172 263.842 156.172H302.884",
+            stroke: t.colorLineField,
+            "stroke-width": t.borderWidthLineField,
+            "stroke-linecap": "square"
+          }, null, 12, tt),
+          s("path", {
+            style: h("transform: translateY(" + r.transly + "px);"),
+            class: "porteria1",
+            d: "M1.09097 156.172L41.3162 156.172C41.8701 156.172 42.3185 155.722 42.3162 155.168L41.845 40.9758C41.8427 40.4252 41.3957 39.98 40.845 39.98L1.80338 39.98",
+            stroke: t.colorLineField,
+            "stroke-width": t.borderWidthLineField,
+            "stroke-linecap": "square"
+          }, null, 12, et),
+          s("path", {
+            style: h("transform: translate(" + r.translxcircle + "px, " + r.transly + "px);"),
+            class: "circle",
+            d: "M182.911 97.4512C182.911 113.726 169.44 126.936 152.801 126.936C136.162 126.936 122.691 113.726 122.691 97.4512C122.691 81.1767 136.162 67.9662 152.801 67.9662C169.44 67.9662 182.911 81.1767 182.911 97.4512Z",
+            "stroke-width": t.borderWidthLineField,
+            stroke: t.colorLineField
+          }, null, 12, it),
+          s("rect", {
+            x: "0%",
+            y: "0%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[0].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[0] || (i[0] = (c) => r.selectSector(0))
+          }, null, 8, ot),
+          s("rect", {
+            x: "0%",
+            y: "25%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[1].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[1] || (i[1] = (c) => r.selectSector(1))
+          }, null, 8, rt),
+          s("rect", {
+            x: "0%",
+            y: "50%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[2].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[2] || (i[2] = (c) => r.selectSector(2))
+          }, null, 8, st),
+          s("rect", {
+            x: "0%",
+            y: "75%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[3].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[3] || (i[3] = (c) => r.selectSector(3))
+          }, null, 8, ct),
+          s("rect", {
+            x: "25%",
+            y: "0%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[4].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[4] || (i[4] = (c) => r.selectSector(4))
+          }, null, 8, lt),
+          s("rect", {
+            x: "25%",
+            y: "25%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[5].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[5] || (i[5] = (c) => r.selectSector(5))
+          }, null, 8, at),
+          s("rect", {
+            x: "25%",
+            y: "50%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[6].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[6] || (i[6] = (c) => r.selectSector(6))
+          }, null, 8, dt),
+          s("rect", {
+            x: "25%",
+            y: "75%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[7].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[7] || (i[7] = (c) => r.selectSector(7))
+          }, null, 8, ht),
+          s("rect", {
+            x: "50%",
+            y: "0%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[8].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[8] || (i[8] = (c) => r.selectSector(8))
+          }, null, 8, nt),
+          s("rect", {
+            x: "50%",
+            y: "25%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[9].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[9] || (i[9] = (c) => r.selectSector(9))
+          }, null, 8, ut),
+          s("rect", {
+            x: "50%",
+            y: "50%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[10].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[10] || (i[10] = (c) => r.selectSector(10))
+          }, null, 8, ft),
+          s("rect", {
+            x: "50%",
+            y: "75%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[11].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[11] || (i[11] = (c) => r.selectSector(11))
+          }, null, 8, bt),
+          s("rect", {
+            x: "75%",
+            y: "0%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[12].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[12] || (i[12] = (c) => r.selectSector(12))
+          }, null, 8, vt),
+          s("rect", {
+            x: "75%",
+            y: "25%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[13].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[13] || (i[13] = (c) => r.selectSector(13))
+          }, null, 8, pt),
+          s("rect", {
+            x: "75%",
+            y: "50%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[14].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[14] || (i[14] = (c) => r.selectSector(14))
+          }, null, 8, yt),
+          s("rect", {
+            x: "75%",
+            y: "75%",
+            width: "25%",
+            height: "25%",
+            fill: o.sectors[15].active ? t.backgroundSectorActive : t.backgroundSectorDisabled,
+            "fill-opacity": t.opacitySector,
+            stroke: t.borderColor,
+            "stroke-width": t.borderWidth,
+            onClick: i[15] || (i[15] = (c) => r.selectSector(15))
+          }, null, 8, kt)
+        ]))
+      ]),
+      s("div", gt, [
+        (a(), f(n, {
+          "text-value": "1/4 tos",
+          "font-size": "12px",
+          height: "26px",
+          width: "65px",
+          "type-on-off": !0,
+          "border-width": 1,
+          "font-color": "#bfc2c5",
+          "border-color": "#8c9399",
+          "border-radius": "4px",
+          "font-family": "Poppins-Medium",
+          "active-border-width": 1,
+          "background-color": "",
+          "active-background-color": "#cbee6b33",
+          ref: "btn14",
+          onStatus: r.btn14,
+          key: o.refreshBtn14,
+          value: e.status14
+        }, null, 8, ["onStatus", "value"])),
+        (a(), f(n, {
+          "text-value": "2/4 tos",
+          "font-size": "12px",
+          height: "26px",
+          width: "65px",
+          "type-on-off": !0,
+          "border-width": 1,
+          "font-color": "#bfc2c5",
+          "border-color": "#8c9399",
+          "border-radius": "4px",
+          "font-family": "Poppins-Medium",
+          "active-border-width": 1,
+          "background-color": "",
+          "active-background-color": "#cbee6b33",
+          ref: "btn24",
+          onStatus: r.btn24,
+          key: o.refreshBtn24,
+          value: e.status24
+        }, null, 8, ["onStatus", "value"])),
+        (a(), f(n, {
+          "text-value": "3/4 tos",
+          "font-size": "12px",
+          height: "26px",
+          width: "65px",
+          "type-on-off": !0,
+          "border-width": 1,
+          "font-color": "#bfc2c5",
+          "border-color": "#8c9399",
+          "border-radius": "4px",
+          "font-family": "Poppins-Medium",
+          "active-border-width": 1,
+          "background-color": "",
+          "active-background-color": "#cbee6b33",
+          ref: "btn34",
+          onStatus: r.btn34,
+          key: o.refreshBtn34,
+          value: e.status34
+        }, null, 8, ["onStatus", "value"])),
+        (a(), f(n, {
+          "text-value": "4/4 tos",
+          "font-size": "12px",
+          height: "26px",
+          width: "65px",
+          "type-on-off": !0,
+          "border-width": 1,
+          "font-color": "#bfc2c5",
+          "border-color": "#8c9399",
+          "border-radius": "4px",
+          "font-family": "Poppins-Medium",
+          "active-border-width": 1,
+          "background-color": "",
+          "active-background-color": "#cbee6b33",
+          ref: "btn44",
+          onStatus: r.btn44,
+          key: o.refreshBtn44,
+          value: e.status44
+        }, null, 8, ["onStatus", "value"]))
+      ])
+    ])
+  ]);
+}
+const xt = /* @__PURE__ */ H(y, [["render", St], ["__scopeId", "data-v-6929519f"]]), wt = { class: "filter-field" }, Ct = {
+  __name: "FilterField",
+  setup(e) {
+    const i = x(Array.from({ length: 16 }, (l, o) => o + 1));
+    function t(l) {
+    }
+    return (l, o) => (a(), d("div", wt, [
+      C(m(xt), {
+        width: "100%",
+        "background-color": "#2E3B46",
+        value: i.value,
+        "onUpdate:modelValue": t
+      }, null, 8, ["value"])
+    ]));
+  }
+}, _t = /* @__PURE__ */ V(Ct, [["__scopeId", "data-v-95dd6111"]]);
+export {
+  _t as default
+};