import { defineComponent as F, defineAsyncComponent as s, computed as o, reactive as z, openBlock as i, createElementBlock as c, normalizeClass as $, unref as t, normalizeStyle as G, createCommentVNode as m, createElementVNode as D, toDisplayString as K, renderSlot as M, Fragment as H, renderList as I, createBlock as O, resolveDynamicComponent as A } from "vue";
const P = {
  key: 0,
  class: "cds-fields-group__label"
}, U = ["innerHTML"], j = ["textContent"], J = ["textContent"], Q = /* @__PURE__ */ F({
  __name: "Group",
  props: {
    group: null,
    decorations: null,
    formWidth: null,
    uploader: null
  },
  emits: ["change-data", "update-data", "file", "group", "list"],
  setup(T, { emit: g }) {
    var S;
    const n = T;
    s(() => import("./InputNumber-5457251d.mjs")), s(() => import("./InputText-7c424012.mjs")), s(() => import("./InputTextarea-7e85dfb1.mjs")), s(() => import("./InputTextEditor-6a89741d.mjs")), s(() => import("./InputCheckbox-4ac928df.mjs")), s(() => import("./index-db7a2498.mjs").then((e) => e.O)), s(() => import("./InputSelect-f114c8b8.mjs")), s(() => import("./index-db7a2498.mjs").then((e) => e.P)), s(() => import("./InputDate-d0133004.mjs")), s(() => import("./InputJson-c982eae4.mjs")), s(() => import("./InputFile-81e12fd2.mjs"));
    const p = o(() => n.formWidth || 0), y = o(() => n.group.id), _ = o(() => {
      var e;
      return (e = n.group) == null ? void 0 : e.groupKey;
    });
    o(() => n.group.name);
    const h = o(() => {
      var e;
      return (e = n.group) == null ? void 0 : e.icon;
    }), b = o(() => {
      var e;
      return (e = n.group) == null ? void 0 : e.label;
    }), C = o(() => {
      var e;
      return (e = n.group) == null ? void 0 : e.description;
    }), d = o(() => {
      var e;
      return ((e = n.group) == null ? void 0 : e.width) || 1;
    });
    o(() => {
      var e;
      return ((e = n.group) == null ? void 0 : e.height) || 1;
    }), o(() => {
      var e;
      return ((e = n.group) == null ? void 0 : e.order) || 0;
    });
    const a = o(() => n == null ? void 0 : n.decorations);
    o(() => {
      var e;
      return (e = a.value) == null ? void 0 : e.size;
    });
    const k = o(() => {
      var e;
      return (e = a.value) == null ? void 0 : e.inline;
    }), V = o(() => {
      var e;
      return (e = a.value) == null ? void 0 : e.groupsSeparately;
    });
    o(() => {
      var e;
      return (e = a.value) == null ? void 0 : e.grid;
    });
    const q = o(() => {
      var e;
      return (e = a.value) == null ? void 0 : e.card;
    });
    o(() => {
      var e;
      return (e = a.value) == null ? void 0 : e.line;
    }), o(() => {
      var e;
      return (e = a.value) == null ? void 0 : e.displayOnly;
    }), o(() => {
      var e;
      return (e = a.value) == null ? void 0 : e.disabled;
    });
    const L = z({}), v = z((S = n.group) == null ? void 0 : S.fields), w = o(() => ({ "cds-fields-group--card": q.value && V.value })), B = o(() => d.value ? p.value > 1500 ? `grid-column: span ${d.value}` : p.value <= 1500 && p.value > 1300 ? `grid-column: span ${d.value > 2 ? d.value - 1 : 2}` : p.value <= 1300 && p.value > 900 ? `grid-column: span ${d.value > 1, 2}` : "grid-column: span 4" : "grid-column: span 4"), f = (e, r) => {
      const { key: l, valid: u, value: E, query: x } = e;
      !l || !v || !v.length || (r === "file" && g(r, e), L[l] = { key: l, valid: u, value: E, query: x }, g(r, e), g("group", { groupId: y.value, groupKey: _.value, query: x, values: L }));
    }, W = (e) => g("list", e);
    return (e, r) => (i(), c("div", {
      class: $([t(w), "cds-fields-group"]),
      style: G(t(B))
    }, [
      t(b) ? (i(), c("h3", P, [
        t(h) ? (i(), c("span", {
          key: 0,
          class: "cds-fields-group__label-icon",
          innerHTML: t(h)
        }, null, 8, U)) : m("", !0),
        D("span", {
          class: "cds-fields-group__label-text",
          textContent: K(t(b))
        }, null, 8, j)
      ])) : m("", !0),
      t(C) ? (i(), c("p", {
        key: 1,
        class: "cds-fields-group__description",
        textContent: K(t(C))
      }, null, 8, J)) : m("", !0),
      M(e.$slots, "top"),
      D("div", {
        class: $([{ "cds-fields-group__fields--inline": t(k) }, "cds-fields-group__fields"])
      }, [
        (i(!0), c(H, null, I(v, (l) => (i(), O(A(l.component), {
          base: {
            autocapitalizationType: l.autocapitalizationType,
            description: l.description,
            groupId: t(y),
            groupKey: t(_),
            hint: l.hint,
            icon: l.icon,
            inline: t(k),
            label: l.label,
            key: l.key,
            required: l.required,
            validate: l.validate,
            validationMessage: l.validationMessage,
            value: l.value
          },
          decorations: t(a),
          params: l.params,
          uploader: n.uploader,
          value: l.value,
          onFile: r[0] || (r[0] = (u) => f(u, "file")),
          onList: r[1] || (r[1] = (u) => W(u)),
          onChangeData: r[2] || (r[2] = (u) => f(u, "change-data")),
          onUpdateData: r[3] || (r[3] = (u) => f(u, "update-data"))
        }, null, 40, ["base", "decorations", "params", "uploader", "value"]))), 256))
      ], 2),
      M(e.$slots, "bottom")
    ], 6));
  }
});
export {
  Q as default
};
//# sourceMappingURL=Group-a2f14bc3.mjs.map
