import { TAB_LIST_SIZES as b, TAB_LIST_SIZE_MODIFIERS as o, TAB_LIST_KIND_MODIFIERS as u, TAB_LIST_IMPORTANCE_MODIFIERS as c } from "./tabs-constants.js";
import { openBlock as h, createElementBlock as f, createElementVNode as I, mergeProps as T, withKeys as i, renderSlot as r } from "vue";
import { _ as g } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const m = {
  compatConfig: { MODE: 3 },
  name: "DtTabGroup",
  provide() {
    return {
      groupContext: this.provideObj,
      setFocus: this.setFocus
    };
  },
  props: {
    /**
     * Identifies the tab group
     */
    label: {
      type: String,
      default: ""
    },
    /**
     * The id of the selected tab panel which should be displayed
     */
    selected: {
      type: String,
      default: ""
    },
    /**
     * If true, disables the tab group
     * @values true, false
     */
    disabled: {
      type: Boolean,
      default: !1
    },
    /**
     * If true, applies inverted styles to the tab group
     * @values true, false
     */
    inverted: {
      type: Boolean,
      default: !1
    },
    /**
     * If true, applies borderless styles to the tab group
     * @values true, false
     */
    borderless: {
      type: Boolean,
      default: !1
    },
    /**
     * If provided, applies size styles to the tab group
     * @values default, sm
     */
    size: {
      type: String,
      default: "default",
      validate(t) {
        return b.includes(t);
      }
    },
    /**
     * Pass through classes, used to customize the tab list
     */
    tabListClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Pass through props, used to customize the tab list
     */
    tabListChildProps: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [
    /**
     * Change tab event with the arguments: selected id of the current tab and disabled value
     *
     * @event change
     * @type {Object}
     */
    "change",
    /**
     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.
     *
     * @event before-change
     * @type {Event}
     */
    "before-change"
  ],
  data() {
    return {
      provideObj: {
        selected: "",
        // the currently displayed tab id
        disabled: !1
        // disable group
      },
      focusId: null,
      tabs: [],
      TAB_LIST_SIZE_MODIFIERS: o,
      TAB_LIST_KIND_MODIFIERS: u,
      TAB_LIST_IMPORTANCE_MODIFIERS: c
    };
  },
  watch: {
    disabled: {
      immediate: !0,
      handler() {
        this.provideObj.disabled = this.disabled;
      }
    },
    selected: {
      immediate: !0,
      handler() {
        this.provideObj.selected = this.selected;
      }
    }
  },
  mounted() {
    this.updateSelected();
  },
  beforeUpdate() {
    this.updateSelected();
  },
  methods: {
    updateSelected() {
      this.provideObj.selected || (this.provideObj.selected = this.selected), this.tabs = this.getTabChildren();
    },
    setFocus(t) {
      this.focusId = t;
    },
    getTabChildren() {
      return Array.from(this.$refs.tabs.querySelectorAll(".d-tab")).map((e) => {
        var d, n;
        return {
          context: e,
          panelId: (d = e.getAttribute("aria-controls")) == null ? void 0 : d.replace("dt-panel-", ""),
          tabId: (n = e.getAttribute("id")) == null ? void 0 : n.replace("dt-tab-", ""),
          isSelected: e.getAttribute("aria-selected") === "true"
        };
      });
    },
    onChange() {
      this.$emit("change", { ...this.provideObj });
    },
    tabLeft() {
      const t = this.getFocusedTabIndex();
      if (t === -1) return;
      const e = t - 1 < 0 ? this.tabs.length - 1 : t - 1;
      this.selectFocusOnTab(e);
    },
    tabRight() {
      const t = this.getFocusedTabIndex();
      if (t === -1) return;
      const e = t + 1 > this.tabs.length - 1 ? 0 : t + 1;
      this.selectFocusOnTab(e);
    },
    selectFocusOnTab(t) {
      const { context: e } = this.tabs[t];
      e.focus();
    },
    selectTab(t) {
      if (this.isSameTabClicked() || (this.$emit("before-change", t), t.defaultPrevented)) return;
      const e = this.getFocusedTabIndex();
      this.selectTabByIndex(e), this.onChange();
    },
    selectTabByIndex(t) {
      const { context: e, panelId: d } = this.tabs[t];
      this.provideObj.selected = d, e.focus();
    },
    getFocusedTabIndex() {
      return this.tabs.findIndex((t) => this.focusId ? t.tabId === `${this.focusId}` : t.isSelected);
    },
    onHomeButton() {
      var t, e;
      this.tabs.length !== 0 && ((e = (t = this.tabs[0]) == null ? void 0 : t.context) == null || e.focus());
    },
    onEndButton() {
      var t, e;
      this.tabs.length !== 0 && ((e = (t = this.tabs[this.tabs.length - 1]) == null ? void 0 : t.context) == null || e.focus());
    },
    isSameTabClicked() {
      const t = this.tabs[this.getFocusedTabIndex()];
      return this.provideObj.selected === t.panelId;
    }
  }
}, S = { "data-qa": "dt-tab-group" }, p = ["aria-label"];
function O(t, e, d, n, l, s) {
  return h(), f("div", S, [
    I("div", T({
      ref: "tabs",
      class: [
        "d-tablist",
        l.TAB_LIST_SIZE_MODIFIERS[d.size],
        {
          [l.TAB_LIST_KIND_MODIFIERS.inverted]: d.inverted,
          [l.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: d.borderless
        },
        d.tabListClass
      ]
    }, d.tabListChildProps, {
      role: "tablist",
      "aria-label": d.label,
      onKeyup: [
        e[0] || (e[0] = i((...a) => s.tabLeft && s.tabLeft(...a), ["left"])),
        e[1] || (e[1] = i((...a) => s.tabRight && s.tabRight(...a), ["right"])),
        e[2] || (e[2] = i((...a) => s.selectTab && s.selectTab(...a), ["enter"])),
        e[3] || (e[3] = i((...a) => s.selectTab && s.selectTab(...a), ["space"]))
      ],
      onClick: e[4] || (e[4] = (...a) => s.selectTab && s.selectTab(...a)),
      onKeydown: [
        e[5] || (e[5] = i((...a) => s.onHomeButton && s.onHomeButton(...a), ["home"])),
        e[6] || (e[6] = i((...a) => s.onEndButton && s.onEndButton(...a), ["end"]))
      ]
    }), [
      r(t.$slots, "tabs")
    ], 16, p),
    r(t.$slots, "default")
  ]);
}
const F = /* @__PURE__ */ g(m, [["render", O]]);
export {
  F as default
};
//# sourceMappingURL=tab-group.js.map
