@dialpad/dialtone-vue 2.157.1-beta.1 → 2.157.1

package/dist/components/tabs/tab_group.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab_group.vue.cjs","sources":["../../../components/tabs/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      :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      return Array.from(this.$el.querySelectorAll('.d-tab'))\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"],"names":["TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS"],"mappings":"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"}

package/dist/{chunks/tab-V4cb44Ry.js → components/tabs/tab_group.vue.js}

@@ -1,19 +1,6 @@
-import { normalizeComponent } from "./_plugin-vue2_normalizer-sOSkiPF3.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 = {
+import { TAB_LIST_SIZES, TAB_LIST_SIZE_MODIFIERS, TAB_LIST_KIND_MODIFIERS, TAB_LIST_IMPORTANCE_MODIFIERS } from "./tabs_constants.js";
+import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
+const _sfc_main = {
   name: "DtTabGroup",
   provide() {
     return {
@@ -163,15 +150,13 @@ const _sfc_main$1 = {
     },
     tabLeft() {
       const { index, tabs } = this.getIndexAndTabs();
-      if (index === -1)
-        return;
+      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;
+      if (index === -1) return;
       const indexElement = index + 1 > tabs.length - 1 ? 0 : index + 1;
       this.selectFocusOnTab(indexElement, tabs);
     },
@@ -197,19 +182,17 @@ const _sfc_main$1 = {
     },
     onHomeButton() {
       var _a, _b;
-      if (this.tabs.length === 0)
-        return;
+      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;
+      if (this.tabs.length === 0) return;
       (_b = (_a = this.tabs[this.tabs.length - 1]) == null ? void 0 : _a.context) == null ? void 0 : _b.focus();
     }
   }
 };
-var _sfc_render$1 = function render() {
+var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("div", { attrs: { "data-qa": "dt-tab-group" } }, [_c("div", _vm._b({ class: [
     "d-tablist",
@@ -220,150 +203,27 @@ var _sfc_render$1 = function render() {
     },
     _vm.tabListClass
   ], attrs: { "role": "tablist", "aria-label": _vm.label }, on: { "keyup": [function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "left", 37, $event.key, ["Left", "ArrowLeft"]))
-      return null;
-    if ("button" in $event && $event.button !== 0)
-      return null;
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "left", 37, $event.key, ["Left", "ArrowLeft"])) return null;
+    if ("button" in $event && $event.button !== 0) return null;
     return _vm.tabLeft.apply(null, arguments);
   }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "right", 39, $event.key, ["Right", "ArrowRight"]))
-      return null;
-    if ("button" in $event && $event.button !== 2)
-      return null;
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "right", 39, $event.key, ["Right", "ArrowRight"])) return null;
+    if ("button" in $event && $event.button !== 2) return null;
     return _vm.tabRight.apply(null, arguments);
   }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
-      return null;
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
     return _vm.selectTab.apply(null, arguments);
   }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "space", 32, $event.key, [" ", "Spacebar"]))
-      return null;
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "space", 32, $event.key, [" ", "Spacebar"])) return null;
     return _vm.selectTab.apply(null, arguments);
   }], "keydown": [function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "home", void 0, $event.key, void 0))
-      return null;
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "home", void 0, $event.key, void 0)) return null;
     return _vm.onHomeButton.apply(null, arguments);
   }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "end", void 0, $event.key, void 0))
-      return null;
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "end", void 0, $event.key, void 0)) return null;
     return _vm.onEndButton.apply(null, arguments);
   }] } }, "div", _vm.tabListChildProps, false), [_vm._t("tabs")], 2), _vm._t("default")], 2);
 };
-var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$1,
-  _sfc_render$1,
-  _sfc_staticRenderFns$1,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const DtTabGroup = __component__$1.exports;
-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: ""
-    }
-  },
-  data() {
-    return {
-      TAB_IMPORTANCE_MODIFIERS
-    };
-  },
-  computed: {
-    isSelected() {
-      return this.groupContext.selected === this.panelId;
-    },
-    tabListeners() {
-      return {
-        ...this.$listeners,
-        click: (event) => {
-          this.selectPanel();
-          this.$emit("click", event);
-        },
-        focus: (event) => {
-          this.setFocus(this.id);
-          this.$emit("focus", event);
-        }
-      };
-    }
-  },
-  mounted() {
-    this.setSelectedPanelByDefault();
-  },
-  methods: {
-    setSelectedPanelByDefault() {
-      if (this.selected) {
-        this.selectPanel(true);
-      }
-    },
-    selectPanel(selectOverride = false) {
-      this.changeContentPanel({
-        selected: this.panelId,
-        selectOverride
-      });
-    }
-  }
-};
-var _sfc_render = function render2() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("dt-button", _vm._g(_vm._b({ class: [
-    "d-tab",
-    {
-      [_vm.TAB_IMPORTANCE_MODIFIERS.selected]: _vm.isSelected
-    },
-    _vm.tabClass
-  ], attrs: { "id": `dt-tab-${_vm.id}`, "role": "tab", "aria-selected": `${_vm.isSelected}`, "aria-controls": `dt-panel-${_vm.panelId}`, "aria-label": _vm.label, "data-qa": "dt-tab", "tabindex": _vm.isSelected ? "0" : "-1", "disabled": _vm.groupContext.disabled || _vm.disabled } }, "dt-button", _vm.$attrs, false), _vm.tabListeners), [_vm._t("default")], 2);
-};
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
@@ -371,17 +231,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  null,
-  null,
   null
 );
-const DtTab = __component__.exports;
+const DtTabGroup = __component__.exports;
 export {
-  DtTab,
-  DtTabGroup,
-  TAB_IMPORTANCE_MODIFIERS,
-  TAB_LIST_IMPORTANCE_MODIFIERS,
-  TAB_LIST_KIND_MODIFIERS,
-  TAB_LIST_SIZES
+  DtTabGroup as default
 };
-//# sourceMappingURL=tab-V4cb44Ry.js.map
+//# sourceMappingURL=tab_group.vue.js.map

package/dist/components/tabs/tab_group.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab_group.vue.js","sources":["../../../components/tabs/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      :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      return Array.from(this.$el.querySelectorAll('.d-tab'))\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"],"names":[],"mappings":";;AA6CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,UAAA;AACA,WAAA;AAAA,MACA,cAAA,KAAA;AAAA,MACA,oBAAA,KAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAA,eAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,YAAA;AAAA,QACA,UAAA;AAAA;AAAA,QACA,UAAA;AAAA;AAAA,MACA;AAAA,MAEA,SAAA;AAAA,MACA,MAAA,CAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AACA,aAAA,WAAA,WAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AACA,aAAA,WAAA,WAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,eAAA;AAAA,EACA;AAAA,EAEA,eAAA;AACA,SAAA,eAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA;AAIA,UAAA,CAAA,KAAA,WAAA,UAAA;AACA,aAAA,WAAA,WAAA,KAAA;AAAA,MACA;AACA,WAAA,OAAA,KAAA;IACA;AAAA,IAEA,SAAA,SAAA;AACA,WAAA,UAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,MAAA,KAAA,KAAA,IAAA,iBAAA,QAAA,CAAA,EACA,IAAA,QAAA;;AACA,eAAA;AAAA,UACA,SAAA;AAAA,UACA,UAAA,QAAA,aAAA,eAAA,MAAA,mBAAA,QAAA,aAAA;AAAA,UACA,KAAA,QAAA,aAAA,IAAA,MAAA,mBAAA,QAAA,WAAA;AAAA,UACA,YAAA,GAAA,aAAA,eAAA,MAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,WAAA,MAAA,UAAA,EAAA,GAAA,KAAA,WAAA,CAAA;AAAA,IACA;AAAA,IAEA,mBAAA,EAAA,UAAA,kBAAA;AACA,WAAA,WAAA,WAAA;AACA,UAAA,CAAA,gBAAA;AACA,aAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,UAAA;AACA,YAAA,EAAA,OAAA,KAAA,IAAA,KAAA,gBAAA;AACA,UAAA,UAAA,GAAA;AACA,YAAA,eAAA,QAAA,IAAA,IAAA,KAAA,SAAA,IAAA,QAAA;AACA,WAAA,iBAAA,cAAA,IAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,YAAA,EAAA,OAAA,KAAA,IAAA,KAAA,gBAAA;AACA,UAAA,UAAA,GAAA;AAEA,YAAA,eAAA,QAAA,IAAA,KAAA,SAAA,IAAA,IAAA,QAAA;AACA,WAAA,iBAAA,cAAA,IAAA;AAAA,IACA;AAAA,IAEA,iBAAA,OAAA,MAAA;AACA,YAAA,EAAA,QAAA,IAAA,KAAA,KAAA;AACA,cAAA,MAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,YAAA,EAAA,MAAA,MAAA,IAAA,KAAA,gBAAA;AACA,WAAA,iBAAA,OAAA,IAAA;AAAA,IACA;AAAA,IAEA,iBAAA,OAAA,MAAA;AACA,YAAA,EAAA,SAAA,QAAA,IAAA,KAAA,KAAA;AACA,WAAA,WAAA,WAAA;AACA,cAAA,MAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAA,QAAA,KAAA,KAAA,UAAA,CAAA,YACA,KAAA,UAAA,QAAA,OAAA,GAAA,KAAA,OAAA,KAAA,QAAA,UAAA;AACA,aAAA;AAAA,QACA,MAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,eAAA;;AACA,UAAA,KAAA,KAAA,WAAA,EAAA;AACA,uBAAA,KAAA,CAAA,MAAA,mBAAA,YAAA,mBAAA;AAAA,IACA;AAAA,IAEA,cAAA;;AACA,UAAA,KAAA,KAAA,WAAA,EAAA;AACA,uBAAA,KAAA,KAAA,KAAA,SAAA,CAAA,MAAA,mBAAA,YAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/tabs/tab_panel.vue.cjs

@@ -0,0 +1,87 @@
+"use strict";
+const modal = require("../../common/mixins/modal.cjs");
+const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
+const _sfc_main = {
+  name: "DtTabPanel",
+  mixins: [modal],
+  inject: ["groupContext"],
+  props: {
+    /**
+     * Id of the panel
+     */
+    id: {
+      type: String,
+      required: true
+    },
+    /**
+     * Id of the associated tab
+     */
+    tabId: {
+      type: String,
+      required: true
+    },
+    /**
+    * If true, hides the tab content
+     * @values true, false
+    */
+    hidden: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Used to customize the tab element
+     */
+    tabPanelClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  data() {
+    return {
+      isFirstElementFocusable: false
+    };
+  },
+  computed: {
+    hidePanel() {
+      return this.groupContext.selected !== this.id || this.hidden;
+    }
+  },
+  async mounted() {
+    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);
+    if (!firstFocusableElement) {
+      this.isFirstElementFocusable = false;
+    } else {
+      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);
+    }
+  },
+  methods: {
+    isFirstElementOfPanel(element) {
+      let current = element;
+      let isFirstElement = true;
+      while (current) {
+        if (current.previousElementSibling !== null) {
+          isFirstElement = false;
+          break;
+        }
+        current = current.parentNode !== this.$el ? current.parentNode : null;
+      }
+      return isFirstElement;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.hidePanel, expression: "!hidePanel" }], class: _vm.tabPanelClass, attrs: { "id": `dt-panel-${_vm.id}`, "role": "tabpanel", "tabindex": _vm.isFirstElementFocusable ? -1 : 0, "aria-labelledby": `dt-tab-${_vm.tabId}`, "aria-hidden": `${_vm.hidePanel}`, "data-qa": "dt-tab-panel" } }, [_vm._t("default")], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const tab_panel = __component__.exports;
+module.exports = tab_panel;
+//# sourceMappingURL=tab_panel.vue.cjs.map

package/dist/components/tabs/tab_panel.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab_panel.vue.cjs","sources":["../../../components/tabs/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 v-show=\"!hidden\" />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\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: '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(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 !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["Modal"],"mappings":";;;AAuBA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAA,KAAA;AAAA,EAEA,QAAA,CAAA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,yBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,UAAA,wBAAA,MAAA,KAAA,yBAAA,KAAA,GAAA;AAEA,QAAA,CAAA,uBAAA;AACA,WAAA,0BAAA;AAAA,IACA,OAAA;AAIA,WAAA,0BAAA,KAAA,sBAAA,qBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,sBAAA,SAAA;AACA,UAAA,UAAA;AACA,UAAA,iBAAA;AAEA,aAAA,SAAA;AACA,YAAA,QAAA,2BAAA,MAAA;AACA,2BAAA;AACA;AAAA,QACA;AACA,kBAAA,QAAA,eAAA,KAAA,MAAA,QAAA,aAAA;AAAA,MACA;AAEA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/components/tabs/tab_panel.vue.js

@@ -0,0 +1,88 @@
+import Modal from "../../common/mixins/modal.js";
+import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
+const _sfc_main = {
+  name: "DtTabPanel",
+  mixins: [Modal],
+  inject: ["groupContext"],
+  props: {
+    /**
+     * Id of the panel
+     */
+    id: {
+      type: String,
+      required: true
+    },
+    /**
+     * Id of the associated tab
+     */
+    tabId: {
+      type: String,
+      required: true
+    },
+    /**
+    * If true, hides the tab content
+     * @values true, false
+    */
+    hidden: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Used to customize the tab element
+     */
+    tabPanelClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  data() {
+    return {
+      isFirstElementFocusable: false
+    };
+  },
+  computed: {
+    hidePanel() {
+      return this.groupContext.selected !== this.id || this.hidden;
+    }
+  },
+  async mounted() {
+    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);
+    if (!firstFocusableElement) {
+      this.isFirstElementFocusable = false;
+    } else {
+      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);
+    }
+  },
+  methods: {
+    isFirstElementOfPanel(element) {
+      let current = element;
+      let isFirstElement = true;
+      while (current) {
+        if (current.previousElementSibling !== null) {
+          isFirstElement = false;
+          break;
+        }
+        current = current.parentNode !== this.$el ? current.parentNode : null;
+      }
+      return isFirstElement;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.hidePanel, expression: "!hidePanel" }], class: _vm.tabPanelClass, attrs: { "id": `dt-panel-${_vm.id}`, "role": "tabpanel", "tabindex": _vm.isFirstElementFocusable ? -1 : 0, "aria-labelledby": `dt-tab-${_vm.tabId}`, "aria-hidden": `${_vm.hidePanel}`, "data-qa": "dt-tab-panel" } }, [_vm._t("default")], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const tab_panel = __component__.exports;
+export {
+  tab_panel as default
+};
+//# sourceMappingURL=tab_panel.vue.js.map

package/dist/components/tabs/tab_panel.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab_panel.vue.js","sources":["../../../components/tabs/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 v-show=\"!hidden\" />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\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: '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(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 !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;AAuBA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAA,KAAA;AAAA,EAEA,QAAA,CAAA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,yBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,UAAA,wBAAA,MAAA,KAAA,yBAAA,KAAA,GAAA;AAEA,QAAA,CAAA,uBAAA;AACA,WAAA,0BAAA;AAAA,IACA,OAAA;AAIA,WAAA,0BAAA,KAAA,sBAAA,qBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,sBAAA,SAAA;AACA,UAAA,UAAA;AACA,UAAA,iBAAA;AAEA,aAAA,SAAA;AACA,YAAA,QAAA,2BAAA,MAAA;AACA,2BAAA;AACA;AAAA,QACA;AACA,kBAAA,QAAA,eAAA,KAAA,MAAA,QAAA,aAAA;AAAA,MACA;AAEA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/components/tabs/tabs_constants.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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"
+};
+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;
+exports.TAB_LIST_SIZE_MODIFIERS = TAB_LIST_SIZE_MODIFIERS;
+//# sourceMappingURL=tabs_constants.cjs.map

package/dist/components/tabs/tabs_constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs_constants.cjs","sources":["../../../components/tabs/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":[],"mappings":";;AAAY,MAAC,iBAAiB,CAAC,WAAW,IAAI;AAElC,MAAC,0BAA0B;AAAA,EACrC,IAAI;AACN;AAEY,MAAC,0BAA0B;AAAA,EACrC,UAAU;AACZ;AAEY,MAAC,gCAAgC;AAAA,EAC3C,YAAY;AACd;AAEY,MAAC,2BAA2B;AAAA,EACtC,UAAU;AACZ;;;;;;"}

package/dist/components/tabs/tabs_constants.js

@@ -0,0 +1,21 @@
+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"
+};
+export {
+  TAB_IMPORTANCE_MODIFIERS,
+  TAB_LIST_IMPORTANCE_MODIFIERS,
+  TAB_LIST_KIND_MODIFIERS,
+  TAB_LIST_SIZES,
+  TAB_LIST_SIZE_MODIFIERS
+};
+//# sourceMappingURL=tabs_constants.js.map

package/dist/components/tabs/tabs_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs_constants.js","sources":["../../../components/tabs/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":[],"mappings":"AAAY,MAAC,iBAAiB,CAAC,WAAW,IAAI;AAElC,MAAC,0BAA0B;AAAA,EACrC,IAAI;AACN;AAEY,MAAC,0BAA0B;AAAA,EACrC,UAAU;AACZ;AAEY,MAAC,gCAAgC;AAAA,EAC3C,YAAY;AACd;AAEY,MAAC,2BAA2B;AAAA,EACtC,UAAU;AACZ;"}