import { TAB_LIST_IMPORTANCE_MODIFIERS as i, TAB_LIST_KIND_MODIFIERS as a, TAB_LIST_SIZE_MODIFIERS as r, TAB_LIST_SIZES as d } from "./tabs-constants.js";
import { n as l } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const o = {
  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 d.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: r,
      TAB_LIST_KIND_MODIFIERS: a,
      TAB_LIST_IMPORTANCE_MODIFIERS: i
    };
  },
  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.$el.querySelectorAll(".d-tab")).map((t) => {
        var e, n;
        return {
          context: t,
          panelId: (e = t.getAttribute("aria-controls")) == null ? void 0 : e.replace("dt-panel-", ""),
          tabId: (n = t.getAttribute("id")) == null ? void 0 : n.replace("dt-tab-", ""),
          isSelected: t.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: n } = this.tabs[t];
      this.provideObj.selected = n, e.focus();
    },
    getFocusedTabIndex() {
      const t = this.tabs.findIndex(
        (e) => this.focusId ? e.tabId === `${this.focusId}` : e.isSelected
      );
      return t === -1 ? 0 : t;
    },
    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;
    }
  }
};
var u = function() {
  var e = this, n = e._self._c;
  return n("div", { attrs: { "data-qa": "dt-tab-group" } }, [n("div", e._b({ class: [
    "d-tablist",
    e.TAB_LIST_SIZE_MODIFIERS[e.size],
    {
      [e.TAB_LIST_KIND_MODIFIERS.inverted]: e.inverted,
      [e.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: e.borderless
    },
    e.tabListClass
  ], attrs: { role: "tablist", "aria-label": e.label }, on: { keyup: [function(s) {
    return !s.type.indexOf("key") && e._k(s.keyCode, "left", 37, s.key, ["Left", "ArrowLeft"]) || "button" in s && s.button !== 0 ? null : e.tabLeft.apply(null, arguments);
  }, function(s) {
    return !s.type.indexOf("key") && e._k(s.keyCode, "right", 39, s.key, ["Right", "ArrowRight"]) || "button" in s && s.button !== 2 ? null : e.tabRight.apply(null, arguments);
  }, function(s) {
    return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.selectTab.apply(null, arguments);
  }, function(s) {
    return !s.type.indexOf("key") && e._k(s.keyCode, "space", 32, s.key, [" ", "Spacebar"]) ? null : e.selectTab.apply(null, arguments);
  }], click: e.selectTab, keydown: [function(s) {
    return !s.type.indexOf("key") && e._k(s.keyCode, "home", void 0, s.key, void 0) ? null : e.onHomeButton.apply(null, arguments);
  }, function(s) {
    return !s.type.indexOf("key") && e._k(s.keyCode, "end", void 0, s.key, void 0) ? null : e.onEndButton.apply(null, arguments);
  }] } }, "div", e.tabListChildProps, !1), [e._t("tabs")], 2), e._t("default")], 2);
}, c = [], b = /* @__PURE__ */ l(
  o,
  u,
  c
);
const p = b.exports;
export {
  p as default
};
//# sourceMappingURL=tab-group.js.map
