@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/components/stack/utils.js

@@ -0,0 +1,68 @@
+import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from "./stack_constants.js";
+function _isDefaultDirection(direction) {
+  return direction === DT_STACK_DIRECTION.default;
+}
+function _getValidDirection(direction) {
+  if (directionPropType(direction) === "string") {
+    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;
+  } else if (directionPropType(direction) === "object") {
+    const { default: defaultStyle } = direction;
+    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;
+  } else {
+    return null;
+  }
+}
+function _getValidGap(gap) {
+  if (typeof gap === "string") {
+    return gap;
+  } else if (typeof gap === "object") {
+    return gap.default;
+  } else {
+    return null;
+  }
+}
+function directionPropType(value) {
+  return typeof value;
+}
+function getDefaultDirectionClass(direction) {
+  return _getValidDirection(direction) ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}` : null;
+}
+function getResposiveDirectionClasses(direction) {
+  if (directionPropType(direction) === "object") {
+    return [
+      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
+        return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
+      })
+    ];
+  } else {
+    return [];
+  }
+}
+function getResposiveGapClasses(gap) {
+  if (typeof gap === "object") {
+    return [
+      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
+        return DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
+      })
+    ];
+  } else {
+    return [];
+  }
+}
+function getResponsiveClasses(direction, gap) {
+  return [
+    ...getResposiveDirectionClasses(direction),
+    ...getResposiveGapClasses(gap)
+  ];
+}
+function getDefaultGapClass(gap) {
+  const validGap = _getValidGap(gap);
+  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;
+}
+export {
+  directionPropType,
+  getDefaultDirectionClass,
+  getDefaultGapClass,
+  getResponsiveClasses
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/stack/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../components/stack/utils.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n  if (typeof gap === 'string') {\n    return gap;\n  } else if (typeof gap === 'object') {\n    return gap.default;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n  if (typeof gap === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return DT_STACK_GAP.includes(gap[breakpoint])\n          ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n  return [\n    ...getResposiveDirectionClasses(direction),\n    ...getResposiveGapClasses(gap),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getValidGap(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n"],"names":[],"mappings":";AAEA,SAAS,oBAAqB,WAAW;AACvC,SAAO,cAAc,mBAAmB;AAC1C;AAEA,SAAS,mBAAoB,WAAW;AACtC,MAAI,kBAAkB,SAAS,MAAM,UAAU;AAC7C,WAAO,CAAC,oBAAoB,SAAS,IAAI,mBAAmB,SAAS,IAAI;AAAA,EAC1E,WAAU,kBAAkB,SAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAAS,aAAc,IAAG;AAElC,WAAO,CAAC,oBAAoB,YAAY,IAAI,mBAAmB,YAAY,IAAI;AAAA,EACnF,OAAS;AAAE,WAAO;AAAA,EAAO;AACzB;AAEA,SAAS,aAAc,KAAK;AAC1B,MAAI,OAAO,QAAQ,UAAU;AAC3B,WAAO;AAAA,EACX,WAAa,OAAO,QAAQ,UAAU;AAClC,WAAO,IAAI;AAAA,EACf,OAAS;AAAE,WAAO;AAAA,EAAO;AACzB;AAEO,SAAS,kBAAmB,OAAO;AACxC,SAAO,OAAO;AAChB;AAEO,SAAS,yBAA0B,WAAW;AACnD,SAAO,mBAAmB,SAAS,IAC/B,YAAY,mBAAmB,mBAAmB,SAAS,CAAC,CAAC,KAC7D;AACN;AAEA,SAAS,6BAA8B,WAAW;AAChD,MAAI,kBAAkB,SAAS,MAAM,UAAU;AAC7C,WAAO;AAAA,MACL,GAAG,gCAAgC,IAAI,CAAC,eAAe;AACrD,eAAO,UAAU,UAAU,IACvB,YAAY,UAAU,IAAI,UAAU,UAAU,CAAC,KAC/C;AAAA,MACL,CAAA;AAAA,IAAC;AAAA,EACR,OAAS;AAAE,WAAO,CAAA;AAAA,EAAK;AACvB;AAEA,SAAS,uBAAwB,KAAK;AACpC,MAAI,OAAO,QAAQ,UAAU;AAC3B,WAAO;AAAA,MACL,GAAG,gCAAgC,IAAI,CAAC,eAAe;AACrD,eAAO,aAAa,SAAS,IAAI,UAAU,CAAC,IACxC,YAAY,UAAU,QAAQ,IAAI,UAAU,CAAC,KAC7C;AAAA,MACL,CAAA;AAAA,IAAC;AAAA,EACR,OAAS;AAAE,WAAO,CAAA;AAAA,EAAK;AACvB;AAEO,SAAS,qBAAsB,WAAW,KAAK;AACpD,SAAO;AAAA,IACL,GAAG,6BAA6B,SAAS;AAAA,IACzC,GAAG,uBAAuB,GAAG;AAAA,EACjC;AACA;AAEO,SAAS,mBAAoB,KAAK;AACvC,QAAM,WAAW,aAAa,GAAG;AACjC,SAAO,aAAa,SAAS,QAAQ,IAAI,gBAAgB,QAAQ,KAAK;AACxE;"}

package/dist/components/stack/validators.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const stack_constants = require("./stack_constants.cjs");
+const utils = require("./utils.cjs");
+function directionValidator(direction) {
+  if (utils.directionPropType(direction) === "string") {
+    return Object.keys(stack_constants.DT_STACK_DIRECTION).includes(direction);
+  } else if (utils.directionPropType(direction) === "object") {
+    const { default: defaultStyle } = direction;
+    return Object.keys(stack_constants.DT_STACK_DIRECTION).includes(defaultStyle);
+  } else {
+    return null;
+  }
+}
+function gapValidator(gap) {
+  if (typeof gap === "string") {
+    return stack_constants.DT_STACK_GAP.includes(gap);
+  }
+  if (typeof gap === "object") {
+    const { default: defaultStyle } = gap;
+    return stack_constants.DT_STACK_GAP.includes(defaultStyle);
+  }
+}
+exports.directionValidator = directionValidator;
+exports.gapValidator = gapValidator;
+//# sourceMappingURL=validators.cjs.map

package/dist/components/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":["directionPropType","DT_STACK_DIRECTION","DT_STACK_GAP"],"mappings":";;;;AAGO,SAAS,mBAAoB,WAAW;AAC7C,MAAIA,MAAiB,kBAAC,SAAS,MAAM,UAAU;AAC7C,WAAO,OAAO,KAAKC,gBAAAA,kBAAkB,EAAE,SAAS,SAAS;AAAA,EAC1D,WAAUD,MAAiB,kBAAC,SAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAAS,aAAc,IAAG;AAElC,WAAO,OAAO,KAAKC,gBAAAA,kBAAkB,EAAE,SAAS,YAAY;AAAA,EAChE,OAAS;AAAE,WAAO;AAAA,EAAO;AACzB;AAEO,SAAS,aAAc,KAAK;AACjC,MAAI,OAAO,QAAQ,UAAU;AAC3B,WAAOC,gBAAY,aAAC,SAAS,GAAG;AAAA,EACjC;AACD,MAAI,OAAO,QAAQ,UAAU;AAC3B,UAAM,EAAE,SAAS,aAAc,IAAG;AAElC,WAAOA,gBAAY,aAAC,SAAS,YAAY;AAAA,EAC1C;AACH;;;"}

package/dist/components/stack/validators.js

@@ -0,0 +1,26 @@
+import { DT_STACK_DIRECTION, DT_STACK_GAP } from "./stack_constants.js";
+import { directionPropType } from "./utils.js";
+function directionValidator(direction) {
+  if (directionPropType(direction) === "string") {
+    return Object.keys(DT_STACK_DIRECTION).includes(direction);
+  } else if (directionPropType(direction) === "object") {
+    const { default: defaultStyle } = direction;
+    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);
+  } else {
+    return null;
+  }
+}
+function gapValidator(gap) {
+  if (typeof gap === "string") {
+    return DT_STACK_GAP.includes(gap);
+  }
+  if (typeof gap === "object") {
+    const { default: defaultStyle } = gap;
+    return DT_STACK_GAP.includes(defaultStyle);
+  }
+}
+export {
+  directionValidator,
+  gapValidator
+};
+//# sourceMappingURL=validators.js.map

package/dist/components/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":[],"mappings":";;AAGO,SAAS,mBAAoB,WAAW;AAC7C,MAAI,kBAAkB,SAAS,MAAM,UAAU;AAC7C,WAAO,OAAO,KAAK,kBAAkB,EAAE,SAAS,SAAS;AAAA,EAC1D,WAAU,kBAAkB,SAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAAS,aAAc,IAAG;AAElC,WAAO,OAAO,KAAK,kBAAkB,EAAE,SAAS,YAAY;AAAA,EAChE,OAAS;AAAE,WAAO;AAAA,EAAO;AACzB;AAEO,SAAS,aAAc,KAAK;AACjC,MAAI,OAAO,QAAQ,UAAU;AAC3B,WAAO,aAAa,SAAS,GAAG;AAAA,EACjC;AACD,MAAI,OAAO,QAAQ,UAAU;AAC3B,UAAM,EAAE,SAAS,aAAc,IAAG;AAElC,WAAO,aAAa,SAAS,YAAY;AAAA,EAC1C;AACH;"}

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

@@ -0,0 +1,141 @@
+"use strict";
+const tabs_constants = require("./tabs_constants.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const button = require("../button/button.vue.cjs");
+const _sfc_main = {
+  name: "DtTab",
+  components: {
+    DtButton: button
+  },
+  inject: ["changeContentPanel", "groupContext", "setFocus"],
+  inheritAttrs: false,
+  props: {
+    /**
+     * Id of the tab
+     */
+    id: {
+      type: String,
+      required: true
+    },
+    /**
+     * Id of the associated content panel
+     */
+    panelId: {
+      type: String,
+      required: true
+    },
+    /**
+     * Describes the tab
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Controls the state of the tab
+     * @values true, false
+     */
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * If true, disables the tab
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Used to customize the tab element
+     */
+    tabClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  emits: [
+    /**
+     * Native button focus in event
+     *
+     * @event focus
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Native button click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  data() {
+    return {
+      TAB_IMPORTANCE_MODIFIERS: tabs_constants.TAB_IMPORTANCE_MODIFIERS
+    };
+  },
+  computed: {
+    tabListeners() {
+      return {
+        click: (event) => {
+          this.selectPanel();
+          this.$emit("click", event);
+        },
+        focus: (event) => {
+          this.setFocus(this.id);
+          this.$emit("focus", event);
+        }
+      };
+    },
+    isSelected() {
+      return this.groupContext.selected === this.panelId;
+    }
+  },
+  mounted() {
+    this.setSelectedPanelByDefault();
+  },
+  methods: {
+    setSelectedPanelByDefault() {
+      if (this.selected) {
+        this.selectPanel(true);
+      }
+    },
+    selectPanel(selectOverride = false) {
+      this.changeContentPanel({
+        selected: this.panelId,
+        selectOverride
+      });
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  return vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps({
+    id: `dt-tab-${$props.id}`,
+    class: [
+      "d-tab",
+      {
+        [$data.TAB_IMPORTANCE_MODIFIERS.selected]: $options.isSelected
+      },
+      $props.tabClass
+    ],
+    role: "tab",
+    "aria-selected": `${$options.isSelected}`,
+    "aria-controls": `dt-panel-${$props.panelId}`,
+    "aria-label": $props.label,
+    "data-qa": "dt-tab",
+    tabindex: $options.isSelected ? "0" : "-1",
+    disabled: $options.groupContext.disabled || $props.disabled
+  }, _ctx.$attrs, vue.toHandlers($options.tabListeners)), {
+    default: vue.withCtx(() => [
+      vue.renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 16, ["id", "class", "aria-selected", "aria-controls", "aria-label", "tabindex", "disabled"]);
+}
+const DtTab = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = DtTab;
+//# sourceMappingURL=tab.vue.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab.vue.cjs","sources":["../../../components/tabs/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  name: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['changeContentPanel', 'groupContext', 'setFocus'],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the tab\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated content panel\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Describes the tab\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls the state of the tab\n     * @values true, false\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, disables the tab\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      TAB_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    tabListeners () {\n      return {\n        click: event => {\n          this.selectPanel();\n          this.$emit('click', event);\n        },\n\n        focus: event => {\n          this.setFocus(this.id);\n          this.$emit('focus', event);\n        },\n      };\n    },\n\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n  },\n\n  mounted () {\n    this.setSelectedPanelByDefault();\n  },\n\n  methods: {\n    setSelectedPanelByDefault () {\n      if (this.selected) {\n        this.selectPanel(true);\n      }\n    },\n\n    selectPanel (selectOverride = false) {\n      this.changeContentPanel({\n        selected: this.panelId,\n        selectOverride,\n      });\n    },\n  },\n};\n</script>\n"],"names":["DtButton","TAB_IMPORTANCE_MODIFIERS","_openBlock","_createBlock","_mergeProps","_toHandlers","_renderSlot"],"mappings":";;;;;AAiCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAA;AAAAA,EACD;AAAA,EAED,QAAQ,CAAC,sBAAsB,gBAAgB,UAAU;AAAA,EAEzD,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,gCACLC,eAAwB;AAAA;EAE3B;AAAA,EAED,UAAU;AAAA,IACR,eAAgB;AACd,aAAO;AAAA,QACL,OAAO,WAAS;AACd,eAAK,YAAW;AAChB,eAAK,MAAM,SAAS,KAAK;AAAA,QAC1B;AAAA,QAED,OAAO,WAAS;AACd,eAAK,SAAS,KAAK,EAAE;AACrB,eAAK,MAAM,SAAS,KAAK;AAAA,QAC1B;AAAA;IAEJ;AAAA,IAED,aAAc;AACZ,aAAO,KAAK,aAAa,aAAa,KAAK;AAAA,IAC5C;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,0BAAyB;AAAA,EAC/B;AAAA,EAED,SAAS;AAAA,IACP,4BAA6B;AAC3B,UAAI,KAAK,UAAU;AACjB,aAAK,YAAY,IAAI;AAAA,MACvB;AAAA,IACD;AAAA,IAED,YAAa,iBAAiB,OAAO;AACnC,WAAK,mBAAmB;AAAA,QACtB,UAAU,KAAK;AAAA,QACf;AAAA,MACF,CAAC;AAAA,IACF;AAAA,EACF;AACH;;;AA5JE,SAAAC,cAAA,GAAAC,gBAqBY,sBArBZC,IAAAA,WAqBY;AAAA,IApBT,cAAc,OAAE,EAAA;AAAA,IAChB,OAAK;AAAA;;SAAoC,MAAwB,yBAAC,QAAQ,GAAG,SAAU;AAAA;MAAiB,OAAQ;AAAA;IAOjH,MAAK;AAAA,IACJ,oBAAkB,SAAU,UAAA;AAAA,IAC5B,6BAA2B,OAAO,OAAA;AAAA,IAClC,cAAY,OAAK;AAAA,IAClB,WAAQ;AAAA,IACP,UAAU,SAAU,aAAA,MAAA;AAAA,IACpB,UAAU,SAAA,aAAa,YAAY,OAAQ;AAAA,KACpC,KAAM,QACdC,IAAAA,WAAmB,SAAD,YAAA,CAAA,GAAA;AAAA,yBAGlB,MAAQ;AAAA,MAARC,eAAQ,KAAA,QAAA,SAAA;AAAA;;;;;;"}

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

@@ -0,0 +1,142 @@
+import { TAB_IMPORTANCE_MODIFIERS } from "./tabs_constants.js";
+import { resolveComponent, openBlock, createBlock, mergeProps, toHandlers, withCtx, renderSlot } from "vue";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+import DtButton from "../button/button.vue.js";
+const _sfc_main = {
+  name: "DtTab",
+  components: {
+    DtButton
+  },
+  inject: ["changeContentPanel", "groupContext", "setFocus"],
+  inheritAttrs: false,
+  props: {
+    /**
+     * Id of the tab
+     */
+    id: {
+      type: String,
+      required: true
+    },
+    /**
+     * Id of the associated content panel
+     */
+    panelId: {
+      type: String,
+      required: true
+    },
+    /**
+     * Describes the tab
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Controls the state of the tab
+     * @values true, false
+     */
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * If true, disables the tab
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Used to customize the tab element
+     */
+    tabClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  emits: [
+    /**
+     * Native button focus in event
+     *
+     * @event focus
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Native button click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  data() {
+    return {
+      TAB_IMPORTANCE_MODIFIERS
+    };
+  },
+  computed: {
+    tabListeners() {
+      return {
+        click: (event) => {
+          this.selectPanel();
+          this.$emit("click", event);
+        },
+        focus: (event) => {
+          this.setFocus(this.id);
+          this.$emit("focus", event);
+        }
+      };
+    },
+    isSelected() {
+      return this.groupContext.selected === this.panelId;
+    }
+  },
+  mounted() {
+    this.setSelectedPanelByDefault();
+  },
+  methods: {
+    setSelectedPanelByDefault() {
+      if (this.selected) {
+        this.selectPanel(true);
+      }
+    },
+    selectPanel(selectOverride = false) {
+      this.changeContentPanel({
+        selected: this.panelId,
+        selectOverride
+      });
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_button = resolveComponent("dt-button");
+  return openBlock(), createBlock(_component_dt_button, mergeProps({
+    id: `dt-tab-${$props.id}`,
+    class: [
+      "d-tab",
+      {
+        [$data.TAB_IMPORTANCE_MODIFIERS.selected]: $options.isSelected
+      },
+      $props.tabClass
+    ],
+    role: "tab",
+    "aria-selected": `${$options.isSelected}`,
+    "aria-controls": `dt-panel-${$props.panelId}`,
+    "aria-label": $props.label,
+    "data-qa": "dt-tab",
+    tabindex: $options.isSelected ? "0" : "-1",
+    disabled: $options.groupContext.disabled || $props.disabled
+  }, _ctx.$attrs, toHandlers($options.tabListeners)), {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 16, ["id", "class", "aria-selected", "aria-controls", "aria-label", "tabindex", "disabled"]);
+}
+const DtTab = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtTab as default
+};
+//# sourceMappingURL=tab.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab.vue.js","sources":["../../../components/tabs/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  name: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['changeContentPanel', 'groupContext', 'setFocus'],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the tab\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated content panel\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Describes the tab\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls the state of the tab\n     * @values true, false\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, disables the tab\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      TAB_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    tabListeners () {\n      return {\n        click: event => {\n          this.selectPanel();\n          this.$emit('click', event);\n        },\n\n        focus: event => {\n          this.setFocus(this.id);\n          this.$emit('focus', event);\n        },\n      };\n    },\n\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n  },\n\n  mounted () {\n    this.setSelectedPanelByDefault();\n  },\n\n  methods: {\n    setSelectedPanelByDefault () {\n      if (this.selected) {\n        this.selectPanel(true);\n      }\n    },\n\n    selectPanel (selectOverride = false) {\n      this.changeContentPanel({\n        selected: this.panelId,\n        selectOverride,\n      });\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_mergeProps","_toHandlers","_renderSlot"],"mappings":";;;;AAiCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,QAAQ,CAAC,sBAAsB,gBAAgB,UAAU;AAAA,EAEzD,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;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,eAAgB;AACd,aAAO;AAAA,QACL,OAAO,WAAS;AACd,eAAK,YAAW;AAChB,eAAK,MAAM,SAAS,KAAK;AAAA,QAC1B;AAAA,QAED,OAAO,WAAS;AACd,eAAK,SAAS,KAAK,EAAE;AACrB,eAAK,MAAM,SAAS,KAAK;AAAA,QAC1B;AAAA;IAEJ;AAAA,IAED,aAAc;AACZ,aAAO,KAAK,aAAa,aAAa,KAAK;AAAA,IAC5C;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,0BAAyB;AAAA,EAC/B;AAAA,EAED,SAAS;AAAA,IACP,4BAA6B;AAC3B,UAAI,KAAK,UAAU;AACjB,aAAK,YAAY,IAAI;AAAA,MACvB;AAAA,IACD;AAAA,IAED,YAAa,iBAAiB,OAAO;AACnC,WAAK,mBAAmB;AAAA,QACtB,UAAU,KAAK;AAAA,QACf;AAAA,MACF,CAAC;AAAA,IACF;AAAA,EACF;AACH;;;AA5JE,SAAAA,UAAA,GAAAC,YAqBY,sBArBZC,WAqBY;AAAA,IApBT,cAAc,OAAE,EAAA;AAAA,IAChB,OAAK;AAAA;;SAAoC,MAAwB,yBAAC,QAAQ,GAAG,SAAU;AAAA;MAAiB,OAAQ;AAAA;IAOjH,MAAK;AAAA,IACJ,oBAAkB,SAAU,UAAA;AAAA,IAC5B,6BAA2B,OAAO,OAAA;AAAA,IAClC,cAAY,OAAK;AAAA,IAClB,WAAQ;AAAA,IACP,UAAU,SAAU,aAAA,MAAA;AAAA,IACpB,UAAU,SAAA,aAAa,YAAY,OAAQ;AAAA,KACpC,KAAM,QACdC,WAAmB,SAAD,YAAA,CAAA,GAAA;AAAA,qBAGlB,MAAQ;AAAA,MAARC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;;;"}

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

@@ -1,21 +1,8 @@
 "use strict";
+const tabs_constants = require("./tabs_constants.cjs");
 const vue = require("vue");
-const _pluginVue_exportHelper = require("./_plugin-vue_export-helper-fhnQq0tA.js");
-const lib_button = require("../lib/button.cjs");
-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 = {
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const _sfc_main = {
   name: "DtTabGroup",
   provide() {
     return {
@@ -71,7 +58,7 @@ const _sfc_main$1 = {
       type: String,
       default: "default",
       validate(size) {
-        return TAB_LIST_SIZES.includes(size);
+        return tabs_constants.TAB_LIST_SIZES.includes(size);
       }
     },
     /**
@@ -108,9 +95,9 @@ const _sfc_main$1 = {
       },
       focusId: null,
       tabs: [],
-      TAB_LIST_SIZE_MODIFIERS,
-      TAB_LIST_KIND_MODIFIERS,
-      TAB_LIST_IMPORTANCE_MODIFIERS
+      TAB_LIST_SIZE_MODIFIERS: tabs_constants.TAB_LIST_SIZE_MODIFIERS,
+      TAB_LIST_KIND_MODIFIERS: tabs_constants.TAB_LIST_KIND_MODIFIERS,
+      TAB_LIST_IMPORTANCE_MODIFIERS: tabs_constants.TAB_LIST_IMPORTANCE_MODIFIERS
     };
   },
   watch: {
@@ -166,15 +153,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);
     },
@@ -200,21 +185,19 @@ 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();
     }
   }
 };
 const _hoisted_1 = { "data-qa": "dt-tab-group" };
 const _hoisted_2 = ["aria-label"];
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
     vue.createElementVNode("div", vue.mergeProps({
       ref: "tabs",
@@ -246,145 +229,6 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     vue.renderSlot(_ctx.$slots, "default")
   ]);
 }
-const DtTabGroup = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-const _sfc_main = {
-  name: "DtTab",
-  components: {
-    DtButton: lib_button.DtButton
-  },
-  inject: ["changeContentPanel", "groupContext", "setFocus"],
-  inheritAttrs: false,
-  props: {
-    /**
-     * Id of the tab
-     */
-    id: {
-      type: String,
-      required: true
-    },
-    /**
-     * Id of the associated content panel
-     */
-    panelId: {
-      type: String,
-      required: true
-    },
-    /**
-     * Describes the tab
-     */
-    label: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Controls the state of the tab
-     * @values true, false
-     */
-    selected: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * If true, disables the tab
-     * @values true, false
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Used to customize the tab element
-     */
-    tabClass: {
-      type: [String, Array, Object],
-      default: ""
-    }
-  },
-  emits: [
-    /**
-     * Native button focus in event
-     *
-     * @event focus
-     * @type {FocusEvent}
-     */
-    "focus",
-    /**
-     * Native button click event
-     *
-     * @event click
-     * @type {PointerEvent | KeyboardEvent}
-     */
-    "click"
-  ],
-  data() {
-    return {
-      TAB_IMPORTANCE_MODIFIERS
-    };
-  },
-  computed: {
-    tabListeners() {
-      return {
-        click: (event) => {
-          this.selectPanel();
-          this.$emit("click", event);
-        },
-        focus: (event) => {
-          this.setFocus(this.id);
-          this.$emit("focus", event);
-        }
-      };
-    },
-    isSelected() {
-      return this.groupContext.selected === this.panelId;
-    }
-  },
-  mounted() {
-    this.setSelectedPanelByDefault();
-  },
-  methods: {
-    setSelectedPanelByDefault() {
-      if (this.selected) {
-        this.selectPanel(true);
-      }
-    },
-    selectPanel(selectOverride = false) {
-      this.changeContentPanel({
-        selected: this.panelId,
-        selectOverride
-      });
-    }
-  }
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_button = vue.resolveComponent("dt-button");
-  return vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps({
-    id: `dt-tab-${$props.id}`,
-    class: [
-      "d-tab",
-      {
-        [$data.TAB_IMPORTANCE_MODIFIERS.selected]: $options.isSelected
-      },
-      $props.tabClass
-    ],
-    role: "tab",
-    "aria-selected": `${$options.isSelected}`,
-    "aria-controls": `dt-panel-${$props.panelId}`,
-    "aria-label": $props.label,
-    "data-qa": "dt-tab",
-    tabindex: $options.isSelected ? "0" : "-1",
-    disabled: $options.groupContext.disabled || $props.disabled
-  }, _ctx.$attrs, vue.toHandlers($options.tabListeners)), {
-    default: vue.withCtx(() => [
-      vue.renderSlot(_ctx.$slots, "default")
-    ]),
-    _: 3
-  }, 16, ["id", "class", "aria-selected", "aria-controls", "aria-label", "tabindex", "disabled"]);
-}
-const DtTab = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
-exports.DtTab = DtTab;
-exports.DtTabGroup = DtTabGroup;
-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=tab-qc3f42Yp.js.map
+const DtTabGroup = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = DtTabGroup;
+//# sourceMappingURL=tab_group.vue.cjs.map