@dialpad/dialtone-vue 2.126.0 → 2.127.1

package/dist/chunks/tab-V4cb44Ry.js

@@ -0,0 +1,387 @@
+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 = {
+  name: "DtTabGroup",
+  provide() {
+    return {
+      groupContext: this.provideObj,
+      changeContentPanel: this.changeContentPanel,
+      setFocus: this.setFocus
+    };
+  },
+  props: {
+    /**
+     * Identifies the tab group
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The id of the selected tab panel which should be displayed
+     */
+    selected: {
+      type: String,
+      default: ""
+    },
+    /**
+     * If true, disables the tab group
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * If true, applies inverted styles to the tab group
+     * @values true, false
+     */
+    inverted: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * If true, applies borderless styles to the tab group
+     * @values true, false
+     */
+    borderless: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * If provided, applies size styles to the tab group
+     * @values default, sm
+     */
+    size: {
+      type: String,
+      default: "default",
+      validate(size) {
+        return TAB_LIST_SIZES.includes(size);
+      }
+    },
+    /**
+     * Pass through classes, used to customize the tab list
+     */
+    tabListClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Pass through props, used to customize the tab list
+     */
+    tabListChildProps: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: [
+    /**
+     * Change tab event with the arguments: selected id of the current tab and disabled value
+     *
+     * @event change
+     * @type {Object}
+     */
+    "change"
+  ],
+  data() {
+    return {
+      provideObj: {
+        selected: "",
+        // the currently displayed tab id
+        disabled: false
+        // disable group
+      },
+      focusId: null,
+      tabs: [],
+      TAB_LIST_SIZE_MODIFIERS,
+      TAB_LIST_KIND_MODIFIERS,
+      TAB_LIST_IMPORTANCE_MODIFIERS
+    };
+  },
+  watch: {
+    disabled: {
+      immediate: true,
+      handler() {
+        this.provideObj.disabled = this.disabled;
+      }
+    },
+    selected: {
+      immediate: true,
+      handler() {
+        this.provideObj.selected = this.selected;
+      }
+    }
+  },
+  mounted() {
+    this.updateSelected();
+  },
+  beforeUpdate() {
+    this.updateSelected();
+  },
+  methods: {
+    updateSelected() {
+      if (!this.provideObj.selected) {
+        this.provideObj.selected = this.selected;
+      }
+      this.tabs = this.getTabChildren();
+    },
+    setFocus(focusId) {
+      this.focusId = focusId;
+    },
+    getTabChildren() {
+      return Array.from(this.$el.querySelectorAll(".d-tab")).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();
+    }
+  }
+};
+var _sfc_render$1 = 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",
+    _vm.TAB_LIST_SIZE_MODIFIERS[_vm.size],
+    {
+      [_vm.TAB_LIST_KIND_MODIFIERS.inverted]: _vm.inverted,
+      [_vm.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: _vm.borderless
+    },
+    _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;
+    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;
+    return _vm.tabRight.apply(null, arguments);
+  }, function($event) {
+    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;
+    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;
+    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;
+    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,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtTab = __component__.exports;
+export {
+  DtTab,
+  DtTabGroup,
+  TAB_IMPORTANCE_MODIFIERS,
+  TAB_LIST_IMPORTANCE_MODIFIERS,
+  TAB_LIST_KIND_MODIFIERS,
+  TAB_LIST_SIZES
+};
+//# sourceMappingURL=tab-V4cb44Ry.js.map

package/dist/chunks/{tab-Qm9LVkYj.js.map → tab-V4cb44Ry.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tab-Qm9LVkYj.js","sources":["../../components/tabs/tabs_constants.js","../../components/tabs/tab_group.vue","../../components/tabs/tab.vue"],"sourcesContent":["export const TAB_LIST_SIZES = ['default', 'sm'];\n\nexport const TAB_LIST_SIZE_MODIFIERS = {\n  sm: 'd-tablist--sm',\n};\n\nexport const TAB_LIST_KIND_MODIFIERS = {\n  inverted: 'd-tablist--inverted',\n};\n\nexport const TAB_LIST_IMPORTANCE_MODIFIERS = {\n  borderless: 'd-tablist--no-border',\n};\n\nexport const TAB_IMPORTANCE_MODIFIERS = {\n  selected: 'd-tab--selected',\n};\n","<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      :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","<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  data () {\n    return {\n      TAB_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n\n    tabListeners () {\n      return {\n        ...this.$listeners,\n\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\n  mounted () {\n    this.setSelectedPanelByDefault();\n  },\n\n  methods: {\n    setSelectedPanelByDefault () {\n      if (this.selected) {\n        this.selectPanel(true);\n      }\n    },\n\n    selectPanel (selectOverride = false) {\n      this.changeContentPanel({\n        selected: this.panelId,\n        selectOverride,\n      });\n    },\n  },\n};\n</script>\n"],"names":["TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","TAB_IMPORTANCE_MODIFIERS","_sfc_main","size","focusId","el","_a","_b","selected","selectOverride","index","tabs","indexElement","context","panelId","DtButton","event"],"mappings":"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"}
+{"version":3,"file":"tab-V4cb44Ry.js","sources":["../../components/tabs/tabs_constants.js","../../components/tabs/tab_group.vue","../../components/tabs/tab.vue"],"sourcesContent":["export const TAB_LIST_SIZES = ['default', 'sm'];\n\nexport const TAB_LIST_SIZE_MODIFIERS = {\n  sm: 'd-tablist--sm',\n};\n\nexport const TAB_LIST_KIND_MODIFIERS = {\n  inverted: 'd-tablist--inverted',\n};\n\nexport const TAB_LIST_IMPORTANCE_MODIFIERS = {\n  borderless: 'd-tablist--no-border',\n};\n\nexport const TAB_IMPORTANCE_MODIFIERS = {\n  selected: 'd-tab--selected',\n};\n","<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      :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","<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  data () {\n    return {\n      TAB_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n\n    tabListeners () {\n      return {\n        ...this.$listeners,\n\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\n  mounted () {\n    this.setSelectedPanelByDefault();\n  },\n\n  methods: {\n    setSelectedPanelByDefault () {\n      if (this.selected) {\n        this.selectPanel(true);\n      }\n    },\n\n    selectPanel (selectOverride = false) {\n      this.changeContentPanel({\n        selected: this.panelId,\n        selectOverride,\n      });\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main"],"mappings":"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"}

package/dist/common/constants.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const VALIDATION_MESSAGE_TYPES = {
+  ERROR: "error",
+  WARNING: "warning",
+  SUCCESS: "success"
+};
+const DESCRIPTION_SIZE_TYPES = {
+  LARGE: "lg",
+  EXTRA_LARGE: "xl"
+};
+const DESCRIPTION_SIZE_MODIFIERS = {
+  xs: "",
+  sm: "",
+  md: "",
+  lg: "d-description--lg",
+  xl: "d-description--xl"
+};
+const LABEL_SIZE_MODIFIERS = {
+  xs: "d-label--xs",
+  sm: "d-label--sm",
+  md: "",
+  lg: "d-label--lg",
+  xl: "d-label--xl"
+};
+const EVENT_KEYNAMES = {
+  esc: "Esc",
+  escape: "Escape",
+  tab: "Tab",
+  enter: "Enter",
+  space: "Space",
+  spacebar: "Spacebar",
+  up: "Up",
+  arrowup: "ArrowUp",
+  left: "Left",
+  arrowleft: "ArrowLeft",
+  right: "Right",
+  arrowright: "ArrowRight",
+  down: "Down",
+  arrowdown: "ArrowDown",
+  home: "Home",
+  end: "End"
+};
+const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.ERROR;
+const DEFAULT_PREFIX = "dt";
+const index = {
+  VALIDATION_MESSAGE_TYPES,
+  DESCRIPTION_SIZE_TYPES,
+  DEFAULT_VALIDATION_MESSAGE_TYPE,
+  DEFAULT_PREFIX
+};
+exports.DEFAULT_PREFIX = DEFAULT_PREFIX;
+exports.DEFAULT_VALIDATION_MESSAGE_TYPE = DEFAULT_VALIDATION_MESSAGE_TYPE;
+exports.DESCRIPTION_SIZE_MODIFIERS = DESCRIPTION_SIZE_MODIFIERS;
+exports.DESCRIPTION_SIZE_TYPES = DESCRIPTION_SIZE_TYPES;
+exports.EVENT_KEYNAMES = EVENT_KEYNAMES;
+exports.LABEL_SIZE_MODIFIERS = LABEL_SIZE_MODIFIERS;
+exports.VALIDATION_MESSAGE_TYPES = VALIDATION_MESSAGE_TYPES;
+exports.default = index;
+//# sourceMappingURL=constants.cjs.map

package/dist/common/constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.cjs","sources":["../../common/constants/index.js"],"sourcesContent":["/* TODO: Move and sort these in a constants directory\n\nExample:\n  constants/\n    forms.js\n    defaults.js\n    ...\n*/\n\n// Types of messages, also dictates what is the current state of the input.\nexport const VALIDATION_MESSAGE_TYPES = {\n  ERROR: 'error',\n  WARNING: 'warning',\n  SUCCESS: 'success',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_TYPES = {\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_MODIFIERS = {\n  xs: '',\n  sm: '',\n  md: '',\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\n// Label size variants\nexport const LABEL_SIZE_MODIFIERS = {\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: '',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport const EVENT_KEYNAMES = {\n  esc: 'Esc',\n  escape: 'Escape',\n  tab: 'Tab',\n  enter: 'Enter',\n  space: 'Space',\n  spacebar: 'Spacebar',\n  up: 'Up',\n  arrowup: 'ArrowUp',\n  left: 'Left',\n  arrowleft: 'ArrowLeft',\n  right: 'Right',\n  arrowright: 'ArrowRight',\n  down: 'Down',\n  arrowdown: 'ArrowDown',\n  home: 'Home',\n  end: 'End',\n};\n\n/*\n * Any string message or message object in the messages prop that do not specify\n * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.\n */\nexport const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.ERROR;\n\n// Default prefix used for ids\nexport const DEFAULT_PREFIX = 'dt';\n\nexport default {\n  VALIDATION_MESSAGE_TYPES,\n  DESCRIPTION_SIZE_TYPES,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  DEFAULT_PREFIX,\n};\n"],"names":[],"mappings":";;AAUY,MAAC,2BAA2B;AAAA,EACtC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX;AAGY,MAAC,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,aAAa;AACf;AAGY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGY,MAAC,uBAAuB;AAAA,EAClC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,iBAAiB;AAAA,EAC5B,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,WAAW;AAAA,EACX,MAAM;AAAA,EACN,KAAK;AACP;AAMY,MAAC,kCAAkC,yBAAyB;AAG5D,MAAC,iBAAiB;AAE9B,MAAe,QAAA;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;;;;;;;"}

package/dist/{lib → common}/constants.js

@@ -1,23 +1,27 @@
-const E = {
+const VALIDATION_MESSAGE_TYPES = {
   ERROR: "error",
   WARNING: "warning",
   SUCCESS: "success"
-}, e = {
+};
+const DESCRIPTION_SIZE_TYPES = {
   LARGE: "lg",
   EXTRA_LARGE: "xl"
-}, s = {
+};
+const DESCRIPTION_SIZE_MODIFIERS = {
   xs: "",
   sm: "",
   md: "",
   lg: "d-description--lg",
   xl: "d-description--xl"
-}, t = {
+};
+const LABEL_SIZE_MODIFIERS = {
   xs: "d-label--xs",
   sm: "d-label--sm",
   md: "",
   lg: "d-label--lg",
   xl: "d-label--xl"
-}, a = {
+};
+const EVENT_KEYNAMES = {
   esc: "Esc",
   escape: "Escape",
   tab: "Tab",
@@ -34,20 +38,23 @@ const E = {
   arrowdown: "ArrowDown",
   home: "Home",
   end: "End"
-}, r = E.ERROR, o = "dt", l = {
-  VALIDATION_MESSAGE_TYPES: E,
-  DESCRIPTION_SIZE_TYPES: e,
-  DEFAULT_VALIDATION_MESSAGE_TYPE: r,
-  DEFAULT_PREFIX: o
+};
+const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.ERROR;
+const DEFAULT_PREFIX = "dt";
+const index = {
+  VALIDATION_MESSAGE_TYPES,
+  DESCRIPTION_SIZE_TYPES,
+  DEFAULT_VALIDATION_MESSAGE_TYPE,
+  DEFAULT_PREFIX
 };
 export {
-  o as DEFAULT_PREFIX,
-  r as DEFAULT_VALIDATION_MESSAGE_TYPE,
-  s as DESCRIPTION_SIZE_MODIFIERS,
-  e as DESCRIPTION_SIZE_TYPES,
-  a as EVENT_KEYNAMES,
-  t as LABEL_SIZE_MODIFIERS,
-  E as VALIDATION_MESSAGE_TYPES,
-  l as default
+  DEFAULT_PREFIX,
+  DEFAULT_VALIDATION_MESSAGE_TYPE,
+  DESCRIPTION_SIZE_MODIFIERS,
+  DESCRIPTION_SIZE_TYPES,
+  EVENT_KEYNAMES,
+  LABEL_SIZE_MODIFIERS,
+  VALIDATION_MESSAGE_TYPES,
+  index as default
 };
 //# sourceMappingURL=constants.js.map

package/dist/{lib → common}/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../common/constants/index.js"],"sourcesContent":["/* TODO: Move and sort these in a constants directory\n\nExample:\n  constants/\n    forms.js\n    defaults.js\n    ...\n*/\n\n// Types of messages, also dictates what is the current state of the input.\nexport const VALIDATION_MESSAGE_TYPES = {\n  ERROR: 'error',\n  WARNING: 'warning',\n  SUCCESS: 'success',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_TYPES = {\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_MODIFIERS = {\n  xs: '',\n  sm: '',\n  md: '',\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\n// Label size variants\nexport const LABEL_SIZE_MODIFIERS = {\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: '',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport const EVENT_KEYNAMES = {\n  esc: 'Esc',\n  escape: 'Escape',\n  tab: 'Tab',\n  enter: 'Enter',\n  space: 'Space',\n  spacebar: 'Spacebar',\n  up: 'Up',\n  arrowup: 'ArrowUp',\n  left: 'Left',\n  arrowleft: 'ArrowLeft',\n  right: 'Right',\n  arrowright: 'ArrowRight',\n  down: 'Down',\n  arrowdown: 'ArrowDown',\n  home: 'Home',\n  end: 'End',\n};\n\n/*\n * Any string message or message object in the messages prop that do not specify\n * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.\n */\nexport const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.ERROR;\n\n// Default prefix used for ids\nexport const DEFAULT_PREFIX = 'dt';\n\nexport default {\n  VALIDATION_MESSAGE_TYPES,\n  DESCRIPTION_SIZE_TYPES,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  DEFAULT_PREFIX,\n};\n"],"names":["VALIDATION_MESSAGE_TYPES","DESCRIPTION_SIZE_TYPES","DESCRIPTION_SIZE_MODIFIERS","LABEL_SIZE_MODIFIERS","EVENT_KEYNAMES","DEFAULT_VALIDATION_MESSAGE_TYPE","DEFAULT_PREFIX","index"],"mappings":"AAUY,MAACA,IAA2B;AAAA,EACtC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX,GAGaC,IAAyB;AAAA,EACpC,OAAO;AAAA,EACP,aAAa;AACf,GAGaC,IAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAGaC,IAAuB;AAAA,EAClC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAiB;AAAA,EAC5B,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,WAAW;AAAA,EACX,MAAM;AAAA,EACN,KAAK;AACP,GAMaC,IAAkCL,EAAyB,OAG3DM,IAAiB,MAEfC,IAAA;AAAA,EACb,0BAAAP;AAAA,EACA,wBAAAC;AAAA,EACA,iCAAAI;AAAA,EACA,gBAAAC;AACF;"}
+{"version":3,"file":"constants.js","sources":["../../common/constants/index.js"],"sourcesContent":["/* TODO: Move and sort these in a constants directory\n\nExample:\n  constants/\n    forms.js\n    defaults.js\n    ...\n*/\n\n// Types of messages, also dictates what is the current state of the input.\nexport const VALIDATION_MESSAGE_TYPES = {\n  ERROR: 'error',\n  WARNING: 'warning',\n  SUCCESS: 'success',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_TYPES = {\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_MODIFIERS = {\n  xs: '',\n  sm: '',\n  md: '',\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\n// Label size variants\nexport const LABEL_SIZE_MODIFIERS = {\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: '',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport const EVENT_KEYNAMES = {\n  esc: 'Esc',\n  escape: 'Escape',\n  tab: 'Tab',\n  enter: 'Enter',\n  space: 'Space',\n  spacebar: 'Spacebar',\n  up: 'Up',\n  arrowup: 'ArrowUp',\n  left: 'Left',\n  arrowleft: 'ArrowLeft',\n  right: 'Right',\n  arrowright: 'ArrowRight',\n  down: 'Down',\n  arrowdown: 'ArrowDown',\n  home: 'Home',\n  end: 'End',\n};\n\n/*\n * Any string message or message object in the messages prop that do not specify\n * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.\n */\nexport const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.ERROR;\n\n// Default prefix used for ids\nexport const DEFAULT_PREFIX = 'dt';\n\nexport default {\n  VALIDATION_MESSAGE_TYPES,\n  DESCRIPTION_SIZE_TYPES,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  DEFAULT_PREFIX,\n};\n"],"names":[],"mappings":"AAUY,MAAC,2BAA2B;AAAA,EACtC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX;AAGY,MAAC,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,aAAa;AACf;AAGY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGY,MAAC,uBAAuB;AAAA,EAClC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,iBAAiB;AAAA,EAC5B,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,WAAW;AAAA,EACX,MAAM;AAAA,EACN,KAAK;AACP;AAMY,MAAC,kCAAkC,yBAAyB;AAG5D,MAAC,iBAAiB;AAE9B,MAAe,QAAA;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/common/dates.cjs

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dateFns = require("date-fns");
+const common_utils = require("./utils.cjs");
+require("./constants.cjs");
+require("vue");
+let dialtoneLocale;
+function _baseFormat(date, formatString) {
+  _checkLocaleSet();
+  return dateFns.format(date, formatString, {
+    locale: dialtoneLocale
+  });
+}
+function _baseFormatDuration(duration, formatString) {
+  _checkLocaleSet();
+  return dateFns.formatDuration(duration, {
+    locale: dialtoneLocale,
+    format: formatString
+  });
+}
+function _baseFormatDistance(date, baseDate) {
+  _checkLocaleSet();
+  return dateFns.formatDistance(date, baseDate, {
+    locale: dialtoneLocale
+  });
+}
+function _isLocaleSet() {
+  return dialtoneLocale !== void 0;
+}
+function _checkLocaleSet() {
+  if (!_isLocaleSet()) {
+    throw new Error("Locale not set, please call setDateLocale(locale) and pass in a datefns locale object as the locale param before calling this function");
+  }
+}
+function setDateLocale(locale) {
+  dialtoneLocale = locale;
+}
+function getDateMedium(date) {
+  return _baseFormat(date, "MMMM d, y");
+}
+function durationInHHMM(durationInSeconds) {
+  if (durationInSeconds < 60) {
+    return _baseFormatDistance(0, 29 * 1e3);
+  }
+  const duration = dateFns.intervalToDuration({
+    start: 0,
+    end: durationInSeconds * 1e3
+  });
+  return _baseFormatDuration(duration, ["hours", "minutes"]);
+}
+function _getRelativeDaysText(days) {
+  const rtl = new Intl.RelativeTimeFormat(dialtoneLocale.code, { numeric: "auto" });
+  return common_utils.capitalizeFirstLetter(rtl.formatToParts(days, "day")[0].value, dialtoneLocale.code);
+}
+function relativeDate(date) {
+  if (dateFns.isToday(date)) {
+    return _getRelativeDaysText(0);
+  } else if (dateFns.isYesterday(date)) {
+    return _getRelativeDaysText(-1);
+  } else if (dateFns.isThisWeek(date)) {
+    return _baseFormat(date, "EEEE");
+  } else if (dateFns.isThisYear(date)) {
+    return _baseFormat(date, "EEEE, MMMM d");
+  } else {
+    return _baseFormat(date, "MMMM d, y");
+  }
+}
+exports.durationInHHMM = durationInHHMM;
+exports.getDateMedium = getDateMedium;
+exports.relativeDate = relativeDate;
+exports.setDateLocale = setDateLocale;
+//# sourceMappingURL=dates.cjs.map