import { hasSlotContent as u } from "../../common/utils/index.js";
import { createBlock as r, openBlock as s, resolveDynamicComponent as m, normalizeStyle as y, normalizeClass as a, withCtx as c, createElementBlock as o, createCommentVNode as n, createElementVNode as C, renderSlot as d } from "vue";
import { _ as f } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const h = {
  compatConfig: { MODE: 3 },
  name: "DtItemLayout",
  props: {
    /**
     * Set this prop to render layout as a specific HTML element.
     */
    as: {
      type: String,
      default: "div"
    },
    /**
     * Set this prop to remove the default styling.
     * @values true, false
     */
    unstyled: {
      type: Boolean,
      default: !1
    },
    /**
     * Set the class for the left section.
     */
    leftClass: {
      type: String,
      default: ""
    },
    /**
     * Set the class for the content section.
     */
    contentClass: {
      type: String,
      default: ""
    },
    /**
     * Set the class for the title section.
     */
    titleClass: {
      type: String,
      default: ""
    },
    /**
     * Set the class for the subtitle section.
     */
    subtitleClass: {
      type: String,
      default: ""
    },
    /**
     * Set the class for the bottom section.
     */
    bottomClass: {
      type: String,
      default: ""
    },
    /**
     * Set the class for the right section.
     */
    rightClass: {
      type: String,
      default: ""
    },
    /**
     * Set the class for the selected section.
     */
    selectedClass: {
      type: String,
      default: ""
    }
  },
  methods: {
    /**
     * Generate dynamic grid template columns
     */
    dynamicGridTemplateColumns() {
      const t = this.$slots.left ? "auto" : "", i = this.$slots.right ? "auto" : "", e = this.$slots.selected ? "auto" : "";
      return `
        grid-template-columns: ${t} 1fr ${i} ${e};
      `;
    },
    hasSlotContent: u
  }
};
function g(t, i, e, S, b, l) {
  return s(), r(m(e.as), {
    class: a(e.unstyled ? "d-item-layout--custom" : "d-item-layout"),
    style: y(e.unstyled && l.dynamicGridTemplateColumns())
  }, {
    default: c(() => [
      l.hasSlotContent(t.$slots.left) ? (s(), o("section", {
        key: 0,
        "data-qa": "dt-item-layout-left-wrapper",
        class: a([e.leftClass, "d-item-layout__left"])
      }, [
        d(t.$slots, "left")
      ], 2)) : n("", !0),
      C("section", {
        "data-qa": "dt-item-layout-content-wrapper",
        class: a([e.contentClass, "d-item-layout__content"])
      }, [
        l.hasSlotContent(t.$slots.default) ? (s(), o("div", {
          key: 0,
          "data-qa": "dt-item-layout-title-wrapper",
          class: a([e.titleClass, "d-item-layout__title"])
        }, [
          d(t.$slots, "default")
        ], 2)) : n("", !0),
        l.hasSlotContent(t.$slots.subtitle) ? (s(), o("div", {
          key: 1,
          "data-qa": "dt-item-layout-subtitle-wrapper",
          class: a([
            e.subtitleClass,
            "d-item-layout--subtitle",
            { "d-item-layout--subtitle--with-title": l.hasSlotContent(t.$slots.default) }
          ])
        }, [
          d(t.$slots, "subtitle")
        ], 2)) : n("", !0),
        l.hasSlotContent(t.$slots.bottom) ? (s(), o("div", {
          key: 2,
          "data-qa": "dt-item-layout-bottom-wrapper",
          class: a([e.bottomClass, "d-item-layout__bottom"])
        }, [
          d(t.$slots, "bottom")
        ], 2)) : n("", !0)
      ], 2),
      l.hasSlotContent(t.$slots.right) ? (s(), o("section", {
        key: 1,
        "data-qa": "dt-item-layout-right-wrapper",
        class: a([e.rightClass, "d-item-layout__right"])
      }, [
        d(t.$slots, "right")
      ], 2)) : n("", !0),
      l.hasSlotContent(t.$slots.selected) ? (s(), o("section", {
        key: 2,
        "data-qa": "dt-item-layout-selected-wrapper",
        class: a([e.selectedClass, "d-item-layout__selected"])
      }, [
        d(t.$slots, "selected")
      ], 2)) : n("", !0)
    ]),
    _: 3
  }, 8, ["class", "style"]);
}
const _ = /* @__PURE__ */ f(h, [["render", g]]);
export {
  _ as default
};
//# sourceMappingURL=item-layout.js.map
