import r from "../../common/mixins/modal.js";
import { returnFirstEl as l } from "../../common/utils/index.js";
import { withDirectives as s, createElementBlock as d, openBlock as o, normalizeClass as u, renderSlot as c, vShow as m } from "vue";
import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const f = {
  compatConfig: { MODE: 3 },
  name: "DtTabPanel",
  mixins: [r],
  inject: ["groupContext"],
  props: {
    /**
     * Id of the panel
     */
    id: {
      type: String,
      required: !0
    },
    /**
     * Id of the associated tab
     */
    tabId: {
      type: String,
      required: !0
    },
    /**
    * If true, hides the tab content
     * @values true, false
    */
    hidden: {
      type: Boolean,
      default: !1
    },
    /**
     * Used to customize the tab element
     */
    tabPanelClass: {
      type: [String, Array, Object],
      default: ""
    }
  },
  data() {
    return {
      isFirstElementFocusable: !1
    };
  },
  computed: {
    hidePanel() {
      return this.groupContext.selected !== this.id || this.hidden;
    }
  },
  async mounted() {
    const e = await this.getFirstFocusableElement(l(this.$el));
    e ? this.isFirstElementFocusable = this.isFirstElementOfPanel(e) : this.isFirstElementFocusable = !1;
  },
  methods: {
    isFirstElementOfPanel(e) {
      let t = e, a = !0;
      for (; t; ) {
        if (t.previousElementSibling !== null) {
          a = !1;
          break;
        }
        t = t.parentNode !== l(this.$el) ? t.parentNode : null;
      }
      return a;
    }
  }
}, h = ["id", "tabindex", "aria-labelledby", "aria-hidden"];
function p(e, t, a, F, n, i) {
  return s((o(), d("div", {
    id: `dt-panel-${a.id}`,
    role: "tabpanel",
    tabindex: n.isFirstElementFocusable ? -1 : 0,
    "aria-labelledby": `dt-tab-${a.tabId}`,
    "aria-hidden": `${i.hidePanel}`,
    class: u(a.tabPanelClass),
    "data-qa": "dt-tab-panel"
  }, [
    c(e.$slots, "default")
  ], 10, h)), [
    [m, !i.hidePanel]
  ]);
}
const P = /* @__PURE__ */ b(f, [["render", p]]);
export {
  P as default
};
//# sourceMappingURL=tab-panel.js.map
