@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/chunks/tab-RTDgnD9-.js

@@ -0,0 +1,391 @@
+import { openBlock, createElementBlock, createElementVNode, mergeProps, withKeys, renderSlot, resolveComponent, createBlock, toHandlers, withCtx } from "vue";
+import { _export_sfc } from "./_plugin-vue_export-helper-caHeSgYY.js";
+import { DtButton } from "../lib/button.js";
+const TAB_LIST_SIZES = ["default", "sm"];
+const TAB_LIST_SIZE_MODIFIERS = {
+  sm: "d-tablist--sm"
+};
+const TAB_LIST_KIND_MODIFIERS = {
+  inverted: "d-tablist--inverted"
+};
+const TAB_LIST_IMPORTANCE_MODIFIERS = {
+  borderless: "d-tablist--no-border"
+};
+const TAB_IMPORTANCE_MODIFIERS = {
+  selected: "d-tab--selected"
+};
+const _sfc_main$1 = {
+  name: "DtTabGroup",
+  provide() {
+    return {
+      groupContext: this.provideObj,
+      changeContentPanel: this.changeContentPanel,
+      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: false
+    },
+    /**
+     * If true, applies inverted styles to the tab group
+     * @values true, false
+     */
+    inverted: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * If true, applies borderless styles to the tab group
+     * @values true, false
+     */
+    borderless: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * If provided, applies size styles to the tab group
+     * @values default, sm
+     */
+    size: {
+      type: String,
+      default: "default",
+      validate(size) {
+        return TAB_LIST_SIZES.includes(size);
+      }
+    },
+    /**
+     * 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"
+  ],
+  data() {
+    return {
+      provideObj: {
+        selected: "",
+        // the currently displayed tab id
+        disabled: false
+        // disable group
+      },
+      focusId: null,
+      tabs: [],
+      TAB_LIST_SIZE_MODIFIERS,
+      TAB_LIST_KIND_MODIFIERS,
+      TAB_LIST_IMPORTANCE_MODIFIERS
+    };
+  },
+  watch: {
+    disabled: {
+      immediate: true,
+      handler() {
+        this.provideObj.disabled = this.disabled;
+      }
+    },
+    selected: {
+      immediate: true,
+      handler() {
+        this.provideObj.selected = this.selected;
+      }
+    }
+  },
+  mounted() {
+    this.updateSelected();
+  },
+  beforeUpdate() {
+    this.updateSelected();
+  },
+  methods: {
+    updateSelected() {
+      if (!this.provideObj.selected) {
+        this.provideObj.selected = this.selected;
+      }
+      this.tabs = this.getTabChildren();
+    },
+    setFocus(focusId) {
+      this.focusId = focusId;
+    },
+    getTabChildren() {
+      const tabs = Array.from(this.$refs.tabs.querySelectorAll(".d-tab"));
+      return tabs.map((el) => {
+        var _a, _b;
+        return {
+          context: el,
+          panelId: (_a = el.getAttribute("aria-controls")) == null ? void 0 : _a.replace("dt-panel-", ""),
+          id: (_b = el.getAttribute("id")) == null ? void 0 : _b.replace("dt-tab-", ""),
+          isSelected: el.getAttribute("aria-selected") === "true"
+        };
+      });
+    },
+    onChange() {
+      this.$emit("change", { ...this.provideObj });
+    },
+    changeContentPanel({ selected, selectOverride }) {
+      this.provideObj.selected = selected;
+      if (!selectOverride) {
+        this.onChange();
+      }
+    },
+    tabLeft() {
+      const { index, tabs } = this.getIndexAndTabs();
+      if (index === -1)
+        return;
+      const indexElement = index - 1 < 0 ? tabs.length - 1 : index - 1;
+      this.selectFocusOnTab(indexElement, tabs);
+    },
+    tabRight() {
+      const { index, tabs } = this.getIndexAndTabs();
+      if (index === -1)
+        return;
+      const indexElement = index + 1 > tabs.length - 1 ? 0 : index + 1;
+      this.selectFocusOnTab(indexElement, tabs);
+    },
+    selectFocusOnTab(index, tabs) {
+      const { context } = tabs[index];
+      context.focus();
+    },
+    selectTab() {
+      const { tabs, index } = this.getIndexAndTabs();
+      this.selectTabByIndex(index, tabs);
+    },
+    selectTabByIndex(index, tabs) {
+      const { context, panelId } = tabs[index];
+      this.provideObj.selected = panelId;
+      context.focus();
+    },
+    getIndexAndTabs() {
+      const index = this.tabs.findIndex((context) => this.focusId ? context.id === `${this.focusId}` : context.isSelected);
+      return {
+        tabs: this.tabs,
+        index
+      };
+    },
+    onHomeButton() {
+      var _a, _b;
+      if (this.tabs.length === 0)
+        return;
+      (_b = (_a = this.tabs[0]) == null ? void 0 : _a.context) == null ? void 0 : _b.focus();
+    },
+    onEndButton() {
+      var _a, _b;
+      if (this.tabs.length === 0)
+        return;
+      (_b = (_a = this.tabs[this.tabs.length - 1]) == null ? void 0 : _a.context) == null ? void 0 : _b.focus();
+    }
+  }
+};
+const _hoisted_1 = { "data-qa": "dt-tab-group" };
+const _hoisted_2 = ["aria-label"];
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", mergeProps({
+      ref: "tabs",
+      class: [
+        "d-tablist",
+        $data.TAB_LIST_SIZE_MODIFIERS[$props.size],
+        {
+          [$data.TAB_LIST_KIND_MODIFIERS.inverted]: $props.inverted,
+          [$data.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: $props.borderless
+        },
+        $props.tabListClass
+      ]
+    }, $props.tabListChildProps, {
+      role: "tablist",
+      "aria-label": $props.label,
+      onKeyup: [
+        _cache[0] || (_cache[0] = withKeys((...args) => $options.tabLeft && $options.tabLeft(...args), ["left"])),
+        _cache[1] || (_cache[1] = withKeys((...args) => $options.tabRight && $options.tabRight(...args), ["right"])),
+        _cache[2] || (_cache[2] = withKeys((...args) => $options.selectTab && $options.selectTab(...args), ["enter"])),
+        _cache[3] || (_cache[3] = withKeys((...args) => $options.selectTab && $options.selectTab(...args), ["space"]))
+      ],
+      onKeydown: [
+        _cache[4] || (_cache[4] = withKeys((...args) => $options.onHomeButton && $options.onHomeButton(...args), ["home"])),
+        _cache[5] || (_cache[5] = withKeys((...args) => $options.onEndButton && $options.onEndButton(...args), ["end"]))
+      ]
+    }), [
+      renderSlot(_ctx.$slots, "tabs")
+    ], 16, _hoisted_2),
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+const DtTabGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
+  name: "DtTab",
+  components: {
+    DtButton
+  },
+  inject: ["changeContentPanel", "groupContext", "setFocus"],
+  inheritAttrs: false,
+  props: {
+    /**
+     * Id of the tab
+     */
+    id: {
+      type: String,
+      required: true
+    },
+    /**
+     * Id of the associated content panel
+     */
+    panelId: {
+      type: String,
+      required: true
+    },
+    /**
+     * Describes the tab
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Controls the state of the tab
+     * @values true, false
+     */
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * If true, disables the tab
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Used to customize the tab element
+     */
+    tabClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  emits: [
+    /**
+     * Native button focus in event
+     *
+     * @event focus
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Native button click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  data() {
+    return {
+      TAB_IMPORTANCE_MODIFIERS
+    };
+  },
+  computed: {
+    tabListeners() {
+      return {
+        click: (event) => {
+          this.selectPanel();
+          this.$emit("click", event);
+        },
+        focus: (event) => {
+          this.setFocus(this.id);
+          this.$emit("focus", event);
+        }
+      };
+    },
+    isSelected() {
+      return this.groupContext.selected === this.panelId;
+    }
+  },
+  mounted() {
+    this.setSelectedPanelByDefault();
+  },
+  methods: {
+    setSelectedPanelByDefault() {
+      if (this.selected) {
+        this.selectPanel(true);
+      }
+    },
+    selectPanel(selectOverride = false) {
+      this.changeContentPanel({
+        selected: this.panelId,
+        selectOverride
+      });
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_button = resolveComponent("dt-button");
+  return openBlock(), createBlock(_component_dt_button, mergeProps({
+    id: `dt-tab-${$props.id}`,
+    class: [
+      "d-tab",
+      {
+        [$data.TAB_IMPORTANCE_MODIFIERS.selected]: $options.isSelected
+      },
+      $props.tabClass
+    ],
+    role: "tab",
+    "aria-selected": `${$options.isSelected}`,
+    "aria-controls": `dt-panel-${$props.panelId}`,
+    "aria-label": $props.label,
+    "data-qa": "dt-tab",
+    tabindex: $options.isSelected ? "0" : "-1",
+    disabled: $options.groupContext.disabled || $props.disabled
+  }, _ctx.$attrs, toHandlers($options.tabListeners)), {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 16, ["id", "class", "aria-selected", "aria-controls", "aria-label", "tabindex", "disabled"]);
+}
+const DtTab = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtTab,
+  DtTabGroup,
+  TAB_IMPORTANCE_MODIFIERS,
+  TAB_LIST_IMPORTANCE_MODIFIERS,
+  TAB_LIST_KIND_MODIFIERS,
+  TAB_LIST_SIZES
+};
+//# sourceMappingURL=tab-RTDgnD9-.js.map

package/dist/chunks/{tab-at7WWglk.js.map → tab-RTDgnD9-.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tab-at7WWglk.js","sources":["../../components/tabs/tabs_constants.js","../../components/tabs/tab_group.vue","../../components/tabs/tab.vue"],"sourcesContent":["export const TAB_LIST_SIZES = ['default', 'sm'];\n\nexport const TAB_LIST_SIZE_MODIFIERS = {\n  sm: 'd-tablist--sm',\n};\n\nexport const TAB_LIST_KIND_MODIFIERS = {\n  inverted: 'd-tablist--inverted',\n};\n\nexport const TAB_LIST_IMPORTANCE_MODIFIERS = {\n  borderless: 'd-tablist--no-border',\n};\n\nexport const TAB_IMPORTANCE_MODIFIERS = {\n  selected: 'd-tab--selected',\n};\n","<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      @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  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      changeContentPanel: this.changeContentPanel,\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  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  beforeUpdate () {\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            id: 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    changeContentPanel ({ selected, selectOverride }) {\n      this.provideObj.selected = selected;\n      if (!selectOverride) {\n        this.onChange();\n      }\n    },\n\n    tabLeft () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n      const indexElement = index - 1 < 0 ? tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    tabRight () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    selectFocusOnTab (index, tabs) {\n      const { context } = tabs[index];\n      context.focus();\n    },\n\n    selectTab () {\n      const { tabs, index } = this.getIndexAndTabs();\n      this.selectTabByIndex(index, tabs);\n    },\n\n    selectTabByIndex (index, tabs) {\n      const { context, panelId } = tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getIndexAndTabs () {\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.id === `${this.focusId}` : context.isSelected);\n      return {\n        tabs: this.tabs,\n        index,\n      };\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};\n</script>\n","<template>\n  <dt-button\n    :id=\"`dt-tab-${id}`\"\n    :class=\"[\n      'd-tab',\n      {\n        [TAB_IMPORTANCE_MODIFIERS.selected]: isSelected,\n      },\n      tabClass,\n    ]\"\n    role=\"tab\"\n    :aria-selected=\"`${isSelected}`\"\n    :aria-controls=\"`dt-panel-${panelId}`\"\n    :aria-label=\"label\"\n    data-qa=\"dt-tab\"\n    :tabindex=\"isSelected ? '0' : '-1'\"\n    :disabled=\"groupContext.disabled || disabled\"\n    v-bind=\"$attrs\"\n    v-on=\"tabListeners\"\n  >\n    <!-- @slot default slot, defaults contains dt-button -->\n    <slot />\n  </dt-button>\n</template>\n\n<script>\nimport { TAB_IMPORTANCE_MODIFIERS } from './tabs_constants';\nimport { DtButton } from '../button';\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  name: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['changeContentPanel', 'groupContext', 'setFocus'],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the tab\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated content panel\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Describes the tab\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls the state of the tab\n     * @values true, false\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, disables the tab\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      TAB_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    tabListeners () {\n      return {\n        click: event => {\n          this.selectPanel();\n          this.$emit('click', event);\n        },\n\n        focus: event => {\n          this.setFocus(this.id);\n          this.$emit('focus', event);\n        },\n      };\n    },\n\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n  },\n\n  mounted () {\n    this.setSelectedPanelByDefault();\n  },\n\n  methods: {\n    setSelectedPanelByDefault () {\n      if (this.selected) {\n        this.selectPanel(true);\n      }\n    },\n\n    selectPanel (selectOverride = false) {\n      this.changeContentPanel({\n        selected: this.panelId,\n        selectOverride,\n      });\n    },\n  },\n};\n</script>\n"],"names":["TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","TAB_IMPORTANCE_MODIFIERS","_sfc_main","size","focusId","el","_a","_b","selected","selectOverride","index","tabs","indexElement","context","panelId","_hoisted_1","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","$options","args","_renderSlot","_ctx","DtButton","event","_createBlock","_component_dt_button","_toHandlers"],"mappings":"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"}
+{"version":3,"file":"tab-RTDgnD9-.js","sources":["../../components/tabs/tabs_constants.js","../../components/tabs/tab_group.vue","../../components/tabs/tab.vue"],"sourcesContent":["export const TAB_LIST_SIZES = ['default', 'sm'];\n\nexport const TAB_LIST_SIZE_MODIFIERS = {\n  sm: 'd-tablist--sm',\n};\n\nexport const TAB_LIST_KIND_MODIFIERS = {\n  inverted: 'd-tablist--inverted',\n};\n\nexport const TAB_LIST_IMPORTANCE_MODIFIERS = {\n  borderless: 'd-tablist--no-border',\n};\n\nexport const TAB_IMPORTANCE_MODIFIERS = {\n  selected: 'd-tab--selected',\n};\n","<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      @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  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      changeContentPanel: this.changeContentPanel,\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  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  beforeUpdate () {\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            id: 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    changeContentPanel ({ selected, selectOverride }) {\n      this.provideObj.selected = selected;\n      if (!selectOverride) {\n        this.onChange();\n      }\n    },\n\n    tabLeft () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n      const indexElement = index - 1 < 0 ? tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    tabRight () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    selectFocusOnTab (index, tabs) {\n      const { context } = tabs[index];\n      context.focus();\n    },\n\n    selectTab () {\n      const { tabs, index } = this.getIndexAndTabs();\n      this.selectTabByIndex(index, tabs);\n    },\n\n    selectTabByIndex (index, tabs) {\n      const { context, panelId } = tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getIndexAndTabs () {\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.id === `${this.focusId}` : context.isSelected);\n      return {\n        tabs: this.tabs,\n        index,\n      };\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};\n</script>\n","<template>\n  <dt-button\n    :id=\"`dt-tab-${id}`\"\n    :class=\"[\n      'd-tab',\n      {\n        [TAB_IMPORTANCE_MODIFIERS.selected]: isSelected,\n      },\n      tabClass,\n    ]\"\n    role=\"tab\"\n    :aria-selected=\"`${isSelected}`\"\n    :aria-controls=\"`dt-panel-${panelId}`\"\n    :aria-label=\"label\"\n    data-qa=\"dt-tab\"\n    :tabindex=\"isSelected ? '0' : '-1'\"\n    :disabled=\"groupContext.disabled || disabled\"\n    v-bind=\"$attrs\"\n    v-on=\"tabListeners\"\n  >\n    <!-- @slot default slot, defaults contains dt-button -->\n    <slot />\n  </dt-button>\n</template>\n\n<script>\nimport { TAB_IMPORTANCE_MODIFIERS } from './tabs_constants';\nimport { DtButton } from '../button';\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  name: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['changeContentPanel', 'groupContext', 'setFocus'],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the tab\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated content panel\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Describes the tab\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls the state of the tab\n     * @values true, false\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, disables the tab\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      TAB_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    tabListeners () {\n      return {\n        click: event => {\n          this.selectPanel();\n          this.$emit('click', event);\n        },\n\n        focus: event => {\n          this.setFocus(this.id);\n          this.$emit('focus', event);\n        },\n      };\n    },\n\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n  },\n\n  mounted () {\n    this.setSelectedPanelByDefault();\n  },\n\n  methods: {\n    setSelectedPanelByDefault () {\n      if (this.selected) {\n        this.selectPanel(true);\n      }\n    },\n\n    selectPanel (selectOverride = false) {\n      this.changeContentPanel({\n        selected: this.panelId,\n        selectOverride,\n      });\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","_renderSlot","_createBlock","_toHandlers"],"mappings":"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"}