@dialpad/dialtone 9.110.2 → 9.111.1

package/dist/vue3/lib/stack/validators.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.cjs","sources":["../../../components/stack/validators.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n"],"names":["directionValidator","direction","directionPropType","DT_STACK_DIRECTION","defaultStyle","gapValidator","gap","DT_STACK_GAP"],"mappings":"kJAGO,SAASA,EAAoBC,EAAW,CAC7C,GAAIC,EAAiB,kBAACD,CAAS,IAAM,SACnC,OAAO,OAAO,KAAKE,EAAAA,kBAAkB,EAAE,SAASF,CAAS,EACpD,GAAIC,EAAiB,kBAACD,CAAS,IAAM,SAAU,CACpD,KAAM,CAAE,QAASG,CAAc,EAAGH,EAElC,OAAO,OAAO,KAAKE,EAAAA,kBAAkB,EAAE,SAASC,CAAY,CAChE,KAAW,QAAO,IAClB,CAEO,SAASC,EAAcC,EAAK,CACjC,GAAI,OAAOA,GAAQ,SACjB,OAAOC,EAAY,aAAC,SAASD,CAAG,EAElC,GAAI,OAAOA,GAAQ,SAAU,CAC3B,KAAM,CAAE,QAASF,CAAc,EAAGE,EAElC,OAAOC,EAAY,aAAC,SAASH,CAAY,CAC1C,CACH"}

package/dist/vue3/lib/stack/validators.js

@@ -0,0 +1,24 @@
+import { DT_STACK_DIRECTION as r, DT_STACK_GAP as n } from "./stack-constants.js";
+import { directionPropType as l } from "./utils.js";
+function f(e) {
+  if (l(e) === "string")
+    return Object.keys(r).includes(e);
+  if (l(e) === "object") {
+    const { default: t } = e;
+    return Object.keys(r).includes(t);
+  } else
+    return null;
+}
+function i(e) {
+  if (typeof e == "string")
+    return n.includes(e);
+  if (typeof e == "object") {
+    const { default: t } = e;
+    return n.includes(t);
+  }
+}
+export {
+  f as directionValidator,
+  i as gapValidator
+};
+//# sourceMappingURL=validators.js.map

package/dist/vue3/lib/stack/validators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.js","sources":["../../../components/stack/validators.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n"],"names":["directionValidator","direction","directionPropType","DT_STACK_DIRECTION","defaultStyle","gapValidator","gap","DT_STACK_GAP"],"mappings":";;AAGO,SAASA,EAAoBC,GAAW;AAC7C,MAAIC,EAAkBD,CAAS,MAAM;AACnC,WAAO,OAAO,KAAKE,CAAkB,EAAE,SAASF,CAAS;AACpD,MAAIC,EAAkBD,CAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAASG,EAAc,IAAGH;AAElC,WAAO,OAAO,KAAKE,CAAkB,EAAE,SAASC,CAAY;AAAA,EAChE;AAAW,WAAO;AAClB;AAEO,SAASC,EAAcC,GAAK;AACjC,MAAI,OAAOA,KAAQ;AACjB,WAAOC,EAAa,SAASD,CAAG;AAElC,MAAI,OAAOA,KAAQ,UAAU;AAC3B,UAAM,EAAE,SAASF,EAAc,IAAGE;AAElC,WAAOC,EAAa,SAASH,CAAY;AAAA,EAC1C;AACH;"}

package/dist/vue3/lib/tab/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./tab-group.cjs"),I=require("./tab.cjs"),T=require("./tab-panel.cjs"),_=require("./tabs-constants.cjs");exports.DtTabGroup=t.default;exports.DtTab=I.default;exports.DtTabPanel=T.default;exports.TAB_IMPORTANCE_MODIFIERS=_.TAB_IMPORTANCE_MODIFIERS;exports.TAB_LIST_IMPORTANCE_MODIFIERS=_.TAB_LIST_IMPORTANCE_MODIFIERS;exports.TAB_LIST_KIND_MODIFIERS=_.TAB_LIST_KIND_MODIFIERS;exports.TAB_LIST_SIZES=_.TAB_LIST_SIZES;
+//# sourceMappingURL=index.cjs.map

package/dist/vue3/lib/tab/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/vue3/lib/tab/index.js

@@ -0,0 +1,14 @@
+import { default as a } from "./tab-group.js";
+import { default as _ } from "./tab.js";
+import { default as r } from "./tab-panel.js";
+import { TAB_IMPORTANCE_MODIFIERS as S, TAB_LIST_IMPORTANCE_MODIFIERS as f, TAB_LIST_KIND_MODIFIERS as D, TAB_LIST_SIZES as A } from "./tabs-constants.js";
+export {
+  _ as DtTab,
+  a as DtTabGroup,
+  r as DtTabPanel,
+  S as TAB_IMPORTANCE_MODIFIERS,
+  f as TAB_LIST_IMPORTANCE_MODIFIERS,
+  D as TAB_LIST_KIND_MODIFIERS,
+  A as TAB_LIST_SIZES
+};
+//# sourceMappingURL=index.js.map

package/dist/vue3/lib/tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/vue3/lib/tab/tab-group.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./tabs-constants.cjs"),i=require("vue"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),o={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(t){return n.TAB_LIST_SIZES.includes(t)}},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:n.TAB_LIST_SIZE_MODIFIERS,TAB_LIST_KIND_MODIFIERS:n.TAB_LIST_KIND_MODIFIERS,TAB_LIST_IMPORTANCE_MODIFIERS:n.TAB_LIST_IMPORTANCE_MODIFIERS}},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,l;return{context:e,panelId:(d=e.getAttribute("aria-controls"))==null?void 0:d.replace("dt-panel-",""),tabId:(l=e.getAttribute("id"))==null?void 0:l.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}}},u={"data-qa":"dt-tab-group"},c=["aria-label"];function h(t,e,d,l,r,s){return i.openBlock(),i.createElementBlock("div",u,[i.createElementVNode("div",i.mergeProps({ref:"tabs",class:["d-tablist",r.TAB_LIST_SIZE_MODIFIERS[d.size],{[r.TAB_LIST_KIND_MODIFIERS.inverted]:d.inverted,[r.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]:d.borderless},d.tabListClass]},d.tabListChildProps,{role:"tablist","aria-label":d.label,onKeyup:[e[0]||(e[0]=i.withKeys((...a)=>s.tabLeft&&s.tabLeft(...a),["left"])),e[1]||(e[1]=i.withKeys((...a)=>s.tabRight&&s.tabRight(...a),["right"])),e[2]||(e[2]=i.withKeys((...a)=>s.selectTab&&s.selectTab(...a),["enter"])),e[3]||(e[3]=i.withKeys((...a)=>s.selectTab&&s.selectTab(...a),["space"]))],onClick:e[4]||(e[4]=(...a)=>s.selectTab&&s.selectTab(...a)),onKeydown:[e[5]||(e[5]=i.withKeys((...a)=>s.onHomeButton&&s.onHomeButton(...a),["home"])),e[6]||(e[6]=i.withKeys((...a)=>s.onEndButton&&s.onEndButton(...a),["end"]))]}),[i.renderSlot(t.$slots,"tabs")],16,c),i.renderSlot(t.$slots,"default")])}const I=b._(o,[["render",h]]);exports.default=I;
+//# sourceMappingURL=tab-group.cjs.map

package/dist/vue3/lib/tab/tab-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-group.cjs","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  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            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      return this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected);\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","_hoisted_2","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","_cache","_withKeys","args","$options","_renderSlot","_ctx"],"mappings":"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"}

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

@@ -0,0 +1,229 @@
+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

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

@@ -0,0 +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  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            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      return this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected);\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","_hoisted_2","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","_cache","_withKeys","args","$options","_renderSlot","_ctx"],"mappings":"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"}

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

@@ -0,0 +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

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

@@ -0,0 +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","_hoisted_1","_createElementBlock","$props","$data","$options","_normalizeClass","_renderSlot","_ctx"],"mappings":"kRAwBKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,aAEN,OAAQ,CAACC,EAAAA,OAAK,EAEd,OAAQ,CAAC,cAAc,EAEvB,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,EACX,EAKD,MAAO,CACL,KAAM,OACN,SAAU,EACX,EAMD,OAAQ,CACN,KAAM,QACN,QAAS,EACV,EAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,wBAAyB,GAE5B,EAED,SAAU,CACR,WAAa,CACX,OAAO,KAAK,aAAa,WAAa,KAAK,IAAM,KAAK,MACvD,CACF,EAED,MAAM,SAAW,CACf,MAAMC,EAAwB,MAAM,KAAK,yBAAyBC,EAAAA,cAAc,KAAK,GAAG,CAAC,EAEpFD,EAMH,KAAK,wBAA0B,KAAK,sBAAsBA,CAAqB,EAL/E,KAAK,wBAA0B,EAOlC,EAED,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,gBAAc,KAAK,GAAG,EAAIE,EAAQ,WAAa,IAClF,CAEA,OAAOC,CACR,CACF,CACH,EA5GAC,EAAA,CAAA,KAAA,WAAA,kBAAA,aAAA,iEACEC,EAAAA,mBAYM,MAAA,CAVH,eAAgBC,EAAE,EAAA,GACnB,KAAK,WACJ,SAAUC,EAAuB,wBAAA,GAAA,EACjC,4BAA2BD,EAAK,KAAA,GAChC,iBAAgBE,EAAS,SAAA,GACzB,MARLC,EAAAA,eAQYH,EAAa,aAAA,EACrB,UAAQ,iBAGRI,aAAQC,EAAA,OAAA,SAAA,CAZZ,EAAA,GAAAP,CAAA,GAAA,WAEaI,EAAS,SAAA"}

package/dist/vue3/lib/tab/tab-panel.js

@@ -0,0 +1,88 @@
+import r from "../../common/mixins/modal.js";
+import { returnFirstEl as l } from "../../common/utils/index.js";
+import { withDirectives as s, openBlock as d, createElementBlock as o, normalizeClass as u, renderSlot as c, vShow as m } from "vue";
+import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const f = {
+  compatConfig: { MODE: 3 },
+  name: "DtTabPanel",
+  mixins: [r],
+  inject: ["groupContext"],
+  props: {
+    /**
+     * Id of the panel
+     */
+    id: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Id of the associated tab
+     */
+    tabId: {
+      type: String,
+      required: !0
+    },
+    /**
+    * If true, hides the tab content
+     * @values true, false
+    */
+    hidden: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Used to customize the tab element
+     */
+    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(l(this.$el));
+    e ? this.isFirstElementFocusable = this.isFirstElementOfPanel(e) : this.isFirstElementFocusable = !1;
+  },
+  methods: {
+    isFirstElementOfPanel(e) {
+      let t = e, a = !0;
+      for (; t; ) {
+        if (t.previousElementSibling !== null) {
+          a = !1;
+          break;
+        }
+        t = t.parentNode !== l(this.$el) ? t.parentNode : null;
+      }
+      return a;
+    }
+  }
+}, h = ["id", "tabindex", "aria-labelledby", "aria-hidden"];
+function p(e, t, a, F, n, i) {
+  return s((d(), o("div", {
+    id: `dt-panel-${a.id}`,
+    role: "tabpanel",
+    tabindex: n.isFirstElementFocusable ? -1 : 0,
+    "aria-labelledby": `dt-tab-${a.tabId}`,
+    "aria-hidden": `${i.hidePanel}`,
+    class: u(a.tabPanelClass),
+    "data-qa": "dt-tab-panel"
+  }, [
+    c(e.$slots, "default")
+  ], 10, h)), [
+    [m, !i.hidePanel]
+  ]);
+}
+const P = /* @__PURE__ */ b(f, [["render", p]]);
+export {
+  P as default
+};
+//# sourceMappingURL=tab-panel.js.map

package/dist/vue3/lib/tab/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","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","_hoisted_1","_createElementBlock","$props","$data","$options","_normalizeClass","_renderSlot","_ctx"],"mappings":";;;;AAwBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,QAAQ,CAACC,CAAK;AAAA,EAEd,QAAQ,CAAC,cAAc;AAAA,EAEvB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,yBAAyB;AAAA;EAE5B;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,aAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;AAAA,IACvD;AAAA,EACF;AAAA,EAED,MAAM,UAAW;AACf,UAAMC,IAAwB,MAAM,KAAK,yBAAyBC,EAAc,KAAK,GAAG,CAAC;AAEzF,IAAKD,IAMH,KAAK,0BAA0B,KAAK,sBAAsBA,CAAqB,IAL/E,KAAK,0BAA0B;AAAA,EAOlC;AAAA,EAED,SAAS;AAAA,IACP,sBAAuBE,GAAS;AAC9B,UAAIC,IAAUD,GACVE,IAAiB;AAErB,aAAOD,KAAS;AACd,YAAIA,EAAQ,2BAA2B,MAAM;AAC3C,UAAAC,IAAiB;AACjB;AAAA,QACF;AACA,QAAAD,IAAUA,EAAQ,eAAeF,EAAc,KAAK,GAAG,IAAIE,EAAQ,aAAa;AAAA,MAClF;AAEA,aAAOC;AAAA,IACR;AAAA,EACF;AACH,GA5GAC,IAAA,CAAA,MAAA,YAAA,mBAAA,aAAA;;iBACEC,EAYM,OAAA;AAAA,IAVH,gBAAgBC,EAAE,EAAA;AAAA,IACnB,MAAK;AAAA,IACJ,UAAUC,EAAuB,0BAAA,KAAA;AAAA,IACjC,6BAA2BD,EAAK,KAAA;AAAA,IAChC,kBAAgBE,EAAS,SAAA;AAAA,IACzB,OARLC,EAQYH,EAAa,aAAA;AAAA,IACrB,WAAQ;AAAA;IAGRI,EAAQC,EAAA,QAAA,SAAA;AAAA,EAZZ,GAAA,IAAAP,CAAA,IAAA;AAAA,SAEaI,EAAS,SAAA;AAAA;;;"}

package/dist/vue3/lib/tab/tab.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./tabs-constants.cjs"),e=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),n=require("../button/button.cjs"),o={compatConfig:{MODE:3},name:"DtTab",components:{DtButton:n.default},inject:["groupContext","setFocus"],inheritAttrs:!1,props:{id:{type:String,required:!0},panelId:{type:String,required:!0},label:{type:String,default:""},selected:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabClass:{type:[String,Array,Object],default:""}},emits:["focus","click"],data(){return{TAB_IMPORTANCE_MODIFIERS:i.TAB_IMPORTANCE_MODIFIERS}},computed:{tabListeners(){return{click:t=>{this.$emit("click",t)},focus:t=>{this.setFocus(this.id),this.$emit("focus",t)}}},isSelected(){return this.groupContext.selected===this.panelId}},mounted(){this.selected&&(this.groupContext.selected=this.panelId)}};function c(t,b,a,_,l,s){const r=e.resolveComponent("dt-button");return e.openBlock(),e.createBlock(r,e.mergeProps({id:`dt-tab-${a.id}`,class:["d-tab",{[l.TAB_IMPORTANCE_MODIFIERS.selected]:s.isSelected},a.tabClass],role:"tab","aria-selected":`${s.isSelected}`,"aria-controls":`dt-panel-${a.panelId}`,"aria-label":a.label,"data-qa":"dt-tab",tabindex:s.isSelected?"0":"-1",disabled:s.groupContext.disabled||a.disabled},t.$attrs,e.toHandlers(s.tabListeners)),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16,["id","class","aria-selected","aria-controls","aria-label","tabindex","disabled"])}const u=d._(o,[["render",c]]);exports.default=u;
+//# sourceMappingURL=tab.cjs.map

package/dist/vue3/lib/tab/tab.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.cjs","sources":["../../../components/tab/tab.vue"],"sourcesContent":["<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  compatConfig: { MODE: 3 },\n  name: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['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.$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    if (this.selected) {\n      this.groupContext.selected = this.panelId;\n    }\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","TAB_IMPORTANCE_MODIFIERS","event","_openBlock","_createBlock","_component_dt_button","_mergeProps","$props","$data","$options","_ctx","_toHandlers","_withCtx","_renderSlot"],"mappings":"iQAiCKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,QACN,WAAY,CACV,SAAAC,EAAQ,OACT,EAED,OAAQ,CAAC,eAAgB,UAAU,EAEnC,aAAc,GAEd,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,EACX,EAKD,QAAS,CACP,KAAM,OACN,SAAU,EACX,EAKD,MAAO,CACL,KAAM,OACN,QAAS,EACV,EAMD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAMD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAKD,SAAU,CACR,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,CACF,EAED,MAAO,CAOL,QAQA,OACD,EAED,MAAQ,CACN,MAAO,0BACLC,EAAwB,yBAE3B,EAED,SAAU,CACR,cAAgB,CACd,MAAO,CACL,MAAOC,GAAS,CACd,KAAK,MAAM,QAASA,CAAK,CAC1B,EAED,MAAOA,GAAS,CACd,KAAK,SAAS,KAAK,EAAE,EACrB,KAAK,MAAM,QAASA,CAAK,CAC1B,EAEJ,EAED,YAAc,CACZ,OAAO,KAAK,aAAa,WAAa,KAAK,OAC5C,CACF,EAED,SAAW,CACL,KAAK,WACP,KAAK,aAAa,SAAW,KAAK,QAErC,CACH,kEA/IE,OAAAC,YAAA,EAAAC,cAqBYC,EArBZC,EAAAA,WAqBY,CApBT,aAAcC,EAAE,EAAA,GAChB,MAAK,WAAoCC,EAAwB,yBAAC,QAAQ,EAAGC,EAAU,YAAiBF,EAAQ,UAOjH,KAAK,MACJ,mBAAkBE,EAAU,UAAA,GAC5B,4BAA2BF,EAAO,OAAA,GAClC,aAAYA,EAAK,MAClB,UAAQ,SACP,SAAUE,EAAU,WAAA,IAAA,KACpB,SAAUA,EAAA,aAAa,UAAYF,EAAQ,UACpCG,EAAM,OACdC,EAAAA,WAAMF,EAAY,YAAA,CAAA,EAAA,CAlBtB,QAAAG,EAAA,QAqBI,IAAQ,CAARC,aAAQH,EAAA,OAAA,SAAA,IArBZ,EAAA"}

package/dist/vue3/lib/tab/tab.js

@@ -0,0 +1,128 @@
+import { TAB_IMPORTANCE_MODIFIERS as r } from "./tabs-constants.js";
+import { resolveComponent as d, openBlock as i, createBlock as n, mergeProps as o, toHandlers as c, withCtx as u, renderSlot as b } from "vue";
+import { _ as f } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import m from "../button/button.js";
+const p = {
+  compatConfig: { MODE: 3 },
+  name: "DtTab",
+  components: {
+    DtButton: m
+  },
+  inject: ["groupContext", "setFocus"],
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Id of the tab
+     */
+    id: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Id of the associated content panel
+     */
+    panelId: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Describes the tab
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Controls the state of the tab
+     * @values true, false
+     */
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If true, disables the tab
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * 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: r
+    };
+  },
+  computed: {
+    tabListeners() {
+      return {
+        click: (e) => {
+          this.$emit("click", e);
+        },
+        focus: (e) => {
+          this.setFocus(this.id), this.$emit("focus", e);
+        }
+      };
+    },
+    isSelected() {
+      return this.groupContext.selected === this.panelId;
+    }
+  },
+  mounted() {
+    this.selected && (this.groupContext.selected = this.panelId);
+  }
+};
+function _(e, h, t, C, s, a) {
+  const l = d("dt-button");
+  return i(), n(l, o({
+    id: `dt-tab-${t.id}`,
+    class: [
+      "d-tab",
+      {
+        [s.TAB_IMPORTANCE_MODIFIERS.selected]: a.isSelected
+      },
+      t.tabClass
+    ],
+    role: "tab",
+    "aria-selected": `${a.isSelected}`,
+    "aria-controls": `dt-panel-${t.panelId}`,
+    "aria-label": t.label,
+    "data-qa": "dt-tab",
+    tabindex: a.isSelected ? "0" : "-1",
+    disabled: a.groupContext.disabled || t.disabled
+  }, e.$attrs, c(a.tabListeners)), {
+    default: u(() => [
+      b(e.$slots, "default")
+    ]),
+    _: 3
+  }, 16, ["id", "class", "aria-selected", "aria-controls", "aria-label", "tabindex", "disabled"]);
+}
+const y = /* @__PURE__ */ f(p, [["render", _]]);
+export {
+  y as default
+};
+//# sourceMappingURL=tab.js.map

package/dist/vue3/lib/tab/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sources":["../../../components/tab/tab.vue"],"sourcesContent":["<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  compatConfig: { MODE: 3 },\n  name: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['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.$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    if (this.selected) {\n      this.groupContext.selected = this.panelId;\n    }\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","TAB_IMPORTANCE_MODIFIERS","event","_openBlock","_createBlock","_component_dt_button","_mergeProps","$props","$data","$options","_ctx","_toHandlers","_withCtx","_renderSlot"],"mappings":";;;;AAiCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,EACD;AAAA,EAED,QAAQ,CAAC,gBAAgB,UAAU;AAAA,EAEnC,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,0BAAAC;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,eAAgB;AACd,aAAO;AAAA,QACL,OAAO,CAAAC,MAAS;AACd,eAAK,MAAM,SAASA,CAAK;AAAA,QAC1B;AAAA,QAED,OAAO,CAAAA,MAAS;AACd,eAAK,SAAS,KAAK,EAAE,GACrB,KAAK,MAAM,SAASA,CAAK;AAAA,QAC1B;AAAA;IAEJ;AAAA,IAED,aAAc;AACZ,aAAO,KAAK,aAAa,aAAa,KAAK;AAAA,IAC5C;AAAA,EACF;AAAA,EAED,UAAW;AACT,IAAI,KAAK,aACP,KAAK,aAAa,WAAW,KAAK;AAAA,EAErC;AACH;;;AA/IE,SAAAC,EAAA,GAAAC,EAqBYC,GArBZC,EAqBY;AAAA,IApBT,cAAcC,EAAE,EAAA;AAAA,IAChB,OAAK;AAAA;;SAAoCC,EAAwB,yBAAC,QAAQ,GAAGC,EAAU;AAAA;MAAiBF,EAAQ;AAAA;IAOjH,MAAK;AAAA,IACJ,oBAAkBE,EAAU,UAAA;AAAA,IAC5B,6BAA2BF,EAAO,OAAA;AAAA,IAClC,cAAYA,EAAK;AAAA,IAClB,WAAQ;AAAA,IACP,UAAUE,EAAU,aAAA,MAAA;AAAA,IACpB,UAAUA,EAAA,aAAa,YAAYF,EAAQ;AAAA,KACpCG,EAAM,QACdC,EAAMF,EAAY,YAAA,CAAA,GAAA;AAAA,IAlBtB,SAAAG,EAqBI,MAAQ;AAAA,MAARC,EAAQH,EAAA,QAAA,SAAA;AAAA;IArBZ,GAAA;AAAA;;;"}

package/dist/vue3/lib/tab/tabs-constants.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=["default","sm"],_={sm:"d-tablist--sm"},S={inverted:"d-tablist--inverted"},t={borderless:"d-tablist--no-border"},T={selected:"d-tab--selected"};exports.TAB_IMPORTANCE_MODIFIERS=T;exports.TAB_LIST_IMPORTANCE_MODIFIERS=t;exports.TAB_LIST_KIND_MODIFIERS=S;exports.TAB_LIST_SIZES=I;exports.TAB_LIST_SIZE_MODIFIERS=_;
+//# sourceMappingURL=tabs-constants.cjs.map

package/dist/vue3/lib/tab/tabs-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-constants.cjs","sources":["../../../components/tab/tabs_constants.js"],"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"],"names":["TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","TAB_IMPORTANCE_MODIFIERS"],"mappings":"gFAAY,MAACA,EAAiB,CAAC,UAAW,IAAI,EAEjCC,EAA0B,CACrC,GAAI,eACN,EAEaC,EAA0B,CACrC,SAAU,qBACZ,EAEaC,EAAgC,CAC3C,WAAY,sBACd,EAEaC,EAA2B,CACtC,SAAU,iBACZ"}