@dialpad/dialtone 9.70.1 → 9.71.0-beta.2

package/dist/vue3/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/vue3/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/vue3/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/vue3/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/vue3/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/vue3/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/vue3/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/vue3/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/vue3/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/vue3/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/vue3/components/tabs/tab_group.vue.cjs

@@ -0,0 +1,234 @@
+"use strict";
+const tabs_constants = require("./tabs_constants.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const _sfc_main = {
+  name: "DtTabGroup",
+  provide() {
+    return {
+      groupContext: this.provideObj,
+      changeContentPanel: this.changeContentPanel,
+      setFocus: this.setFocus
+    };
+  },
+  props: {
+    /**
+     * Identifies the tab group
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The id of the selected tab panel which should be displayed
+     */
+    selected: {
+      type: String,
+      default: ""
+    },
+    /**
+     * If true, disables the tab group
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * If true, applies inverted styles to the tab group
+     * @values true, false
+     */
+    inverted: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * If true, applies borderless styles to the tab group
+     * @values true, false
+     */
+    borderless: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * If provided, applies size styles to the tab group
+     * @values default, sm
+     */
+    size: {
+      type: String,
+      default: "default",
+      validate(size) {
+        return tabs_constants.TAB_LIST_SIZES.includes(size);
+      }
+    },
+    /**
+     * Pass through classes, used to customize the tab list
+     */
+    tabListClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Pass through props, used to customize the tab list
+     */
+    tabListChildProps: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: [
+    /**
+     * Change tab event with the arguments: selected id of the current tab and disabled value
+     *
+     * @event change
+     * @type {Object}
+     */
+    "change"
+  ],
+  data() {
+    return {
+      provideObj: {
+        selected: "",
+        // the currently displayed tab id
+        disabled: false
+        // disable group
+      },
+      focusId: null,
+      tabs: [],
+      TAB_LIST_SIZE_MODIFIERS: 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: {
+    disabled: {
+      immediate: true,
+      handler() {
+        this.provideObj.disabled = this.disabled;
+      }
+    },
+    selected: {
+      immediate: true,
+      handler() {
+        this.provideObj.selected = this.selected;
+      }
+    }
+  },
+  mounted() {
+    this.updateSelected();
+  },
+  beforeUpdate() {
+    this.updateSelected();
+  },
+  methods: {
+    updateSelected() {
+      if (!this.provideObj.selected) {
+        this.provideObj.selected = this.selected;
+      }
+      this.tabs = this.getTabChildren();
+    },
+    setFocus(focusId) {
+      this.focusId = focusId;
+    },
+    getTabChildren() {
+      const tabs = Array.from(this.$refs.tabs.querySelectorAll(".d-tab"));
+      return tabs.map((el) => {
+        var _a, _b;
+        return {
+          context: el,
+          panelId: (_a = el.getAttribute("aria-controls")) == null ? void 0 : _a.replace("dt-panel-", ""),
+          id: (_b = el.getAttribute("id")) == null ? void 0 : _b.replace("dt-tab-", ""),
+          isSelected: el.getAttribute("aria-selected") === "true"
+        };
+      });
+    },
+    onChange() {
+      this.$emit("change", { ...this.provideObj });
+    },
+    changeContentPanel({ selected, selectOverride }) {
+      this.provideObj.selected = selected;
+      if (!selectOverride) {
+        this.onChange();
+      }
+    },
+    tabLeft() {
+      const { index, tabs } = this.getIndexAndTabs();
+      if (index === -1) return;
+      const indexElement = index - 1 < 0 ? tabs.length - 1 : index - 1;
+      this.selectFocusOnTab(indexElement, tabs);
+    },
+    tabRight() {
+      const { index, tabs } = this.getIndexAndTabs();
+      if (index === -1) return;
+      const indexElement = index + 1 > tabs.length - 1 ? 0 : index + 1;
+      this.selectFocusOnTab(indexElement, tabs);
+    },
+    selectFocusOnTab(index, tabs) {
+      const { context } = tabs[index];
+      context.focus();
+    },
+    selectTab() {
+      const { tabs, index } = this.getIndexAndTabs();
+      this.selectTabByIndex(index, tabs);
+    },
+    selectTabByIndex(index, tabs) {
+      const { context, panelId } = tabs[index];
+      this.provideObj.selected = panelId;
+      context.focus();
+    },
+    getIndexAndTabs() {
+      const index = this.tabs.findIndex((context) => this.focusId ? context.id === `${this.focusId}` : context.isSelected);
+      return {
+        tabs: this.tabs,
+        index
+      };
+    },
+    onHomeButton() {
+      var _a, _b;
+      if (this.tabs.length === 0) return;
+      (_b = (_a = this.tabs[0]) == null ? void 0 : _a.context) == null ? void 0 : _b.focus();
+    },
+    onEndButton() {
+      var _a, _b;
+      if (this.tabs.length === 0) return;
+      (_b = (_a = this.tabs[this.tabs.length - 1]) == null ? void 0 : _a.context) == null ? void 0 : _b.focus();
+    }
+  }
+};
+const _hoisted_1 = { "data-qa": "dt-tab-group" };
+const _hoisted_2 = ["aria-label"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.createElementVNode("div", vue.mergeProps({
+      ref: "tabs",
+      class: [
+        "d-tablist",
+        $data.TAB_LIST_SIZE_MODIFIERS[$props.size],
+        {
+          [$data.TAB_LIST_KIND_MODIFIERS.inverted]: $props.inverted,
+          [$data.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: $props.borderless
+        },
+        $props.tabListClass
+      ]
+    }, $props.tabListChildProps, {
+      role: "tablist",
+      "aria-label": $props.label,
+      onKeyup: [
+        _cache[0] || (_cache[0] = vue.withKeys((...args) => $options.tabLeft && $options.tabLeft(...args), ["left"])),
+        _cache[1] || (_cache[1] = vue.withKeys((...args) => $options.tabRight && $options.tabRight(...args), ["right"])),
+        _cache[2] || (_cache[2] = vue.withKeys((...args) => $options.selectTab && $options.selectTab(...args), ["enter"])),
+        _cache[3] || (_cache[3] = vue.withKeys((...args) => $options.selectTab && $options.selectTab(...args), ["space"]))
+      ],
+      onKeydown: [
+        _cache[4] || (_cache[4] = vue.withKeys((...args) => $options.onHomeButton && $options.onHomeButton(...args), ["home"])),
+        _cache[5] || (_cache[5] = vue.withKeys((...args) => $options.onEndButton && $options.onEndButton(...args), ["end"]))
+      ]
+    }), [
+      vue.renderSlot(_ctx.$slots, "tabs")
+    ], 16, _hoisted_2),
+    vue.renderSlot(_ctx.$slots, "default")
+  ]);
+}
+const DtTabGroup = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = DtTabGroup;
+//# sourceMappingURL=tab_group.vue.cjs.map