@dialpad/dialtone-vue 3.218.3 → 3.218.4

package/dist/lib/tab/tab-group.js

@@ -1,232 +1,177 @@
-import { TAB_LIST_IMPORTANCE_MODIFIERS as b, TAB_LIST_KIND_MODIFIERS as o, TAB_LIST_SIZE_MODIFIERS as u, TAB_LIST_SIZES 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 c.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: u,
-      TAB_LIST_KIND_MODIFIERS: o,
-      TAB_LIST_IMPORTANCE_MODIFIERS: b
-    };
-  },
-  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(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() {
-      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;
-    }
-  }
-}, 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")
-  ]);
+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")]);
 }
-const F = /* @__PURE__ */ g(m, [["render", O]]);
-export {
-  F as default
-};
-//# sourceMappingURL=tab-group.js.map
+var h = /* @__PURE__ */ e(d, [["render", m]]);
+//#endregion
+export { h as default };
+
+//# sourceMappingURL=tab-group.js.map

package/dist/lib/tab/tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.js","sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      ref=\"tabs\"\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[size],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        tabListClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      @keyup.left=\"tabLeft\"\n      @keyup.right=\"tabRight\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home=\"onHomeButton\"\n      @keydown.end=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values default, sm\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validate (size) {\n        return TAB_LIST_SIZES.includes(size);\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n\n    /**\n     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n     *\n     * @event before-change\n     * @type {Event}\n     */\n    'before-change',\n  ],\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler () {\n        this.provideObj.selected = this.selected;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  updated () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabs = this.getTabChildren();\n    },\n\n    setFocus (focusId) {\n      this.focusId = focusId;\n    },\n\n    getTabChildren () {\n      const tabs = Array.from(this.$refs.tabs.querySelectorAll('.d-tab'));\n      return tabs\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    tabRight () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    selectFocusOnTab (index) {\n      const { context } = this.tabs[index];\n      context.focus();\n    },\n\n    selectTab (event) {\n      if (this.isSameTabClicked()) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\n\n      const index = this.getFocusedTabIndex();\n\n      this.selectTabByIndex(index);\n      this.onChange();\n    },\n\n    selectTabByIndex (index) {\n      const { context, panelId } = this.tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getFocusedTabIndex () {\n      // Hot fix https://github.com/dialpad/dialtone/pull/849\n      // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      return index === -1 ? 0 : index;\n    },\n\n    onHomeButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[0]?.context?.focus();\n    },\n\n    onEndButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[this.tabs.length - 1]?.context?.focus();\n    },\n\n    isSameTabClicked () {\n      const tab = this.tabs[this.getFocusedTabIndex()];\n      return this.provideObj.selected === tab.panelId;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab","_hoisted_1","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","$options","args","_renderSlot","_ctx"],"mappings":"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"}
+{"version":3,"file":"tab-group.js","names":[],"sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      ref=\"tabs\"\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[size],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        tabListClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      @keyup.left=\"tabLeft\"\n      @keyup.right=\"tabRight\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home=\"onHomeButton\"\n      @keydown.end=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values default, sm\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validate (size) {\n        return TAB_LIST_SIZES.includes(size);\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n\n    /**\n     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n     *\n     * @event before-change\n     * @type {Event}\n     */\n    'before-change',\n  ],\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler () {\n        this.provideObj.selected = this.selected;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  updated () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabs = this.getTabChildren();\n    },\n\n    setFocus (focusId) {\n      this.focusId = focusId;\n    },\n\n    getTabChildren () {\n      const tabs = Array.from(this.$refs.tabs.querySelectorAll('.d-tab'));\n      return tabs\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    tabRight () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    selectFocusOnTab (index) {\n      const { context } = this.tabs[index];\n      context.focus();\n    },\n\n    selectTab (event) {\n      if (this.isSameTabClicked()) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\n\n      const index = this.getFocusedTabIndex();\n\n      this.selectTabByIndex(index);\n      this.onChange();\n    },\n\n    selectTabByIndex (index) {\n      const { context, panelId } = this.tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getFocusedTabIndex () {\n      // Hot fix https://github.com/dialpad/dialtone/pull/849\n      // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      return index === -1 ? 0 : index;\n    },\n\n    onHomeButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[0]?.context?.focus();\n    },\n\n    onEndButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[this.tabs.length - 1]?.context?.focus();\n    },\n\n    isSameTabClicked () {\n      const tab = this.tabs[this.getFocusedTabIndex()];\n      return this.provideObj.selected === tab.panelId;\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/tab/tab-panel.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../common/mixins/modal.cjs"),n=require("../../common/utils/index.cjs"),l=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),o={compatConfig:{MODE:3},name:"DtTabPanel",mixins:[s.default],inject:["groupContext"],props:{id:{type:String,required:!0},tabId:{type:String,required:!0},hidden:{type:Boolean,default:!1},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(n.returnFirstEl(this.$el));e?this.isFirstElementFocusable=this.isFirstElementOfPanel(e):this.isFirstElementFocusable=!1},methods:{isFirstElementOfPanel(e){let t=e,i=!0;for(;t;){if(t.previousElementSibling!==null){i=!1;break}t=t.parentNode!==n.returnFirstEl(this.$el)?t.parentNode:null}return i}}},u=["id","tabindex","aria-labelledby","aria-hidden"];function c(e,t,i,m,r,a){return l.withDirectives((l.openBlock(),l.createElementBlock("div",{id:`dt-panel-${i.id}`,role:"tabpanel",tabindex:r.isFirstElementFocusable?-1:0,"aria-labelledby":`dt-tab-${i.tabId}`,"aria-hidden":`${a.hidePanel}`,class:l.normalizeClass(i.tabPanelClass),"data-qa":"dt-tab-panel"},[l.renderSlot(e.$slots,"default")],10,u)),[[l.vShow,!a.hidePanel]])}const b=d._(o,[["render",c]]);exports.default=b;
-//# sourceMappingURL=tab-panel.cjs.map
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/mixins/modal.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtTabPanel`,mixins:[n.default],inject:[`groupContext`],props:{id:{type:String,required:!0},tabId:{type:String,required:!0},hidden:{type:Boolean,default:!1},tabPanelClass:{type:[String,Array,Object],default:``}},data(){return{isFirstElementFocusable:!1}},computed:{hidePanel(){return this.groupContext.selected!==this.id||this.hidden}},async mounted(){let t=await this.getFirstFocusableElement(e.returnFirstEl(this.$el));t?this.isFirstElementFocusable=this.isFirstElementOfPanel(t):this.isFirstElementFocusable=!1},methods:{isFirstElementOfPanel(t){let n=t,r=!0;for(;n;){if(n.previousElementSibling!==null){r=!1;break}n=n.parentNode===e.returnFirstEl(this.$el)?null:n.parentNode}return r}}},a=[`id`,`tabindex`,`aria-labelledby`,`aria-hidden`];function o(e,t,n,i,o,s){return(0,r.withDirectives)(((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{id:`dt-panel-${n.id}`,role:`tabpanel`,tabindex:o.isFirstElementFocusable?-1:0,"aria-labelledby":`dt-tab-${n.tabId}`,"aria-hidden":`${s.hidePanel}`,class:(0,r.normalizeClass)(n.tabPanelClass),"data-qa":`dt-tab-panel`},[(0,r.renderSlot)(e.$slots,`default`)],10,a)),[[r.vShow,!s.hidePanel]])}var s=t.t(i,[[`render`,o]]);exports.default=s;
+//# sourceMappingURL=tab-panel.cjs.map

package/dist/lib/tab/tab-panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.cjs","sources":["../../../components/tab/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(returnFirstEl(this.$el));\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== returnFirstEl(this.$el) ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","Modal","firstFocusableElement","returnFirstEl","element","current","isFirstElement","_createElementBlock","$props","$data","$options","_renderSlot","_ctx"],"mappings":"kRAwBKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,aAEN,OAAQ,CAACC,EAAAA,OAAK,EAEd,OAAQ,CAAC,cAAc,EAEvB,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,IAMZ,MAAO,CACL,KAAM,OACN,SAAU,IAOZ,OAAQ,CACN,KAAM,QACN,QAAS,IAMX,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,wBAAyB,GAE7B,EAEA,SAAU,CACR,WAAa,CACX,OAAO,KAAK,aAAa,WAAa,KAAK,IAAM,KAAK,MACxD,GAGF,MAAM,SAAW,CACf,MAAMC,EAAwB,MAAM,KAAK,yBAAyBC,EAAAA,cAAc,KAAK,GAAG,CAAC,EAEpFD,EAMH,KAAK,wBAA0B,KAAK,sBAAsBA,CAAqB,EAL/E,KAAK,wBAA0B,EAOnC,EAEA,QAAS,CACP,sBAAuBE,EAAS,CAC9B,IAAIC,EAAUD,EACVE,EAAiB,GAErB,KAAOD,GAAS,CACd,GAAIA,EAAQ,yBAA2B,KAAM,CAC3CC,EAAiB,GACjB,KACF,CACAD,EAAUA,EAAQ,aAAeF,EAAAA,cAAc,KAAK,GAAG,EAAIE,EAAQ,WAAa,IAClF,CAEA,OAAOC,CACT,EAEJ,qHA3GEC,EAAAA,mBAYM,MAAA,CAVH,eAAgBC,EAAA,EAAE,GACnB,KAAK,WACJ,SAAUC,EAAA,wBAAuB,GAAA,EACjC,4BAA2BD,EAAA,KAAK,GAChC,iBAAgBE,EAAA,SAAS,GACzB,uBAAOF,EAAA,aAAa,EACrB,UAAQ,iBAGRG,aAAQC,EAAA,OAAA,SAAA,qBAVCF,EAAA,SAAS"}
+{"version":3,"file":"tab-panel.cjs","names":[],"sources":["../../../components/tab/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(returnFirstEl(this.$el));\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== returnFirstEl(this.$el) ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"mappings":"6SAwBA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,aAEN,OAAQ,CAAC,EAAA,QAAM,CAEf,OAAQ,CAAC,eAAe,CAExB,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,GACX,CAKD,MAAO,CACL,KAAM,OACN,SAAU,GACX,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,wBAAyB,GAC1B,EAGH,SAAU,CACR,WAAa,CACX,OAAO,KAAK,aAAa,WAAa,KAAK,IAAM,KAAK,QAEzD,CAED,MAAM,SAAW,CACf,IAAM,EAAwB,MAAM,KAAK,yBAAyB,EAAA,cAAc,KAAK,IAAI,CAAC,CAErF,EAMH,KAAK,wBAA0B,KAAK,sBAAsB,EAAsB,CALhF,KAAK,wBAA0B,IASnC,QAAS,CACP,sBAAuB,EAAS,CAC9B,IAAI,EAAU,EACV,EAAiB,GAErB,KAAO,GAAS,CACd,GAAI,EAAQ,yBAA2B,KAAM,CAC3C,EAAiB,GACjB,MAEF,EAAU,EAAQ,aAAe,EAAA,cAAc,KAAK,IAAG,CAAyB,KAArB,EAAQ,WAGrE,OAAO,GAEV,CACF,oJA/FO,MAAA,CAVH,GAAE,YAAc,EAAA,KACjB,KAAK,WACJ,SAAU,EAAA,wBAAuB,GAAA,EACjC,kBAAe,UAAY,EAAA,QAC3B,cAAW,GAAK,EAAA,YAChB,OAAA,EAAA,EAAA,gBAAO,EAAA,cAAa,CACrB,UAAQ,kCAGA,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,EAAA,MAAA,CAVC,EAAA,UAAS,CAAA,CAAA"}