import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { TAB_LIST_IMPORTANCE_MODIFIERS as t, TAB_LIST_KIND_MODIFIERS as n, TAB_LIST_SIZES as r, TAB_LIST_SIZE_MODIFIERS as i } from "./tabs-constants.js";
import { createElementBlock as a, createElementVNode as o, mergeProps as s, openBlock as c, renderSlot as l, withKeys as u } from "vue";
//#region components/tab/tab_group.vue
var d = {
	compatConfig: { MODE: 3 },
	name: "DtTabGroup",
	provide() {
		return {
			groupContext: this.provideObj,
			setFocus: this.setFocus
		};
	},
	props: {
		label: {
			type: String,
			default: ""
		},
		selected: {
			type: String,
			default: ""
		},
		disabled: {
			type: Boolean,
			default: !1
		},
		inverted: {
			type: Boolean,
			default: !1
		},
		borderless: {
			type: Boolean,
			default: !1
		},
		size: {
			type: String,
			default: "default",
			validate(e) {
				return r.includes(e);
			}
		},
		tabListClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		tabListChildProps: {
			type: Object,
			default: () => ({})
		}
	},
	emits: ["change", "before-change"],
	data() {
		return {
			provideObj: {
				selected: "",
				disabled: !1
			},
			focusId: null,
			tabs: [],
			TAB_LIST_SIZE_MODIFIERS: i,
			TAB_LIST_KIND_MODIFIERS: n,
			TAB_LIST_IMPORTANCE_MODIFIERS: t
		};
	},
	watch: {
		disabled: {
			immediate: !0,
			handler() {
				this.provideObj.disabled = this.disabled;
			}
		},
		selected: {
			immediate: !0,
			handler() {
				this.provideObj.selected = this.selected;
			}
		}
	},
	mounted() {
		this.updateSelected();
	},
	updated() {
		this.updateSelected();
	},
	methods: {
		updateSelected() {
			this.provideObj.selected || (this.provideObj.selected = this.selected), this.tabs = this.getTabChildren();
		},
		setFocus(e) {
			this.focusId = e;
		},
		getTabChildren() {
			return Array.from(this.$refs.tabs.querySelectorAll(".d-tab")).map((e) => ({
				context: e,
				panelId: e.getAttribute("aria-controls")?.replace("dt-panel-", ""),
				tabId: e.getAttribute("id")?.replace("dt-tab-", ""),
				isSelected: e.getAttribute("aria-selected") === "true"
			}));
		},
		onChange() {
			this.$emit("change", { ...this.provideObj });
		},
		tabLeft() {
			let e = this.getFocusedTabIndex();
			if (e === -1) return;
			let t = e - 1 < 0 ? this.tabs.length - 1 : e - 1;
			this.selectFocusOnTab(t);
		},
		tabRight() {
			let e = this.getFocusedTabIndex();
			if (e === -1) return;
			let t = e + 1 > this.tabs.length - 1 ? 0 : e + 1;
			this.selectFocusOnTab(t);
		},
		selectFocusOnTab(e) {
			let { context: t } = this.tabs[e];
			t.focus();
		},
		selectTab(e) {
			if (this.isSameTabClicked() || (this.$emit("before-change", e), e.defaultPrevented)) return;
			let t = this.getFocusedTabIndex();
			this.selectTabByIndex(t), this.onChange();
		},
		selectTabByIndex(e) {
			let { context: t, panelId: n } = this.tabs[e];
			this.provideObj.selected = n, t.focus();
		},
		getFocusedTabIndex() {
			let e = this.tabs.findIndex((e) => this.focusId ? e.tabId === `${this.focusId}` : e.isSelected);
			return e === -1 ? 0 : e;
		},
		onHomeButton() {
			this.tabs.length !== 0 && this.tabs[0]?.context?.focus();
		},
		onEndButton() {
			this.tabs.length !== 0 && this.tabs[this.tabs.length - 1]?.context?.focus();
		},
		isSameTabClicked() {
			let e = this.tabs[this.getFocusedTabIndex()];
			return this.provideObj.selected === e.panelId;
		}
	}
}, f = { "data-qa": "dt-tab-group" }, p = ["aria-label"];
function m(e, t, n, r, i, d) {
	return c(), a("div", f, [o("div", s({
		ref: "tabs",
		class: [
			"d-tablist",
			i.TAB_LIST_SIZE_MODIFIERS[n.size],
			{
				[i.TAB_LIST_KIND_MODIFIERS.inverted]: n.inverted,
				[i.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: n.borderless
			},
			n.tabListClass
		]
	}, n.tabListChildProps, {
		role: "tablist",
		"aria-label": n.label,
		onKeyup: [
			t[0] || (t[0] = u((...e) => d.tabLeft && d.tabLeft(...e), ["left"])),
			t[1] || (t[1] = u((...e) => d.tabRight && d.tabRight(...e), ["right"])),
			t[2] || (t[2] = u((...e) => d.selectTab && d.selectTab(...e), ["enter"])),
			t[3] || (t[3] = u((...e) => d.selectTab && d.selectTab(...e), ["space"]))
		],
		onClick: t[4] || (t[4] = (...e) => d.selectTab && d.selectTab(...e)),
		onKeydown: [t[5] || (t[5] = u((...e) => d.onHomeButton && d.onHomeButton(...e), ["home"])), t[6] || (t[6] = u((...e) => d.onEndButton && d.onEndButton(...e), ["end"]))]
	}), [l(e.$slots, "tabs")], 16, p), l(e.$slots, "default")]);
}
var h = /* @__PURE__ */ e(d, [["render", m]]);
//#endregion
export { h as default };

//# sourceMappingURL=tab-group.js.map