@dialpad/dialtone-vue 2.152.0 → 2.153.0

package/dist/chunks/{index-gj1jEXP4.js → index-DyqUqjvI.js}

@@ -1,34 +1,48 @@
 "use strict";
-const keyboard_list_navigation = require("./keyboard_list_navigation-fJnl_Iox.js");
+const keyboard_list_navigation = require("./keyboard_list_navigation-x3D6RcC7.js");
 const common_utils = require("../common/utils.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-1aBeR4AK.js");
 const lib_listItem = require("../lib/list-item.cjs");
 const lib_skeleton = require("../lib/skeleton.cjs");
 const _sfc_main$2 = {
   name: "ComboboxLoadingList",
-  components: { DtListItem: lib_listItem.DtListItem, DtSkeleton: lib_skeleton.DtSkeleton }
+  components: {
+    DtListItem: lib_listItem.DtListItem,
+    DtSkeleton: lib_skeleton.DtSkeleton
+  }
 };
 var _sfc_render$2 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("ol", { staticClass: "d-combobox__loading-list", attrs: { "aria-busy": "true" } }, _vm._l(7, function(index) {
-    return _c("dt-list-item", { key: index, attrs: { "role": "option", "navigation-type": "none" } }, [_c("dt-skeleton", { attrs: { "text-option": { type: "body" }, "offset": 0 } })], 1);
+  return _c("ol", {
+    staticClass: "d-combobox__loading-list",
+    attrs: {
+      "aria-busy": "true"
+    }
+  }, _vm._l(7, function(index) {
+    return _c("dt-list-item", {
+      key: index,
+      attrs: {
+        "role": "option",
+        "navigation-type": "none"
+      }
+    }, [_c("dt-skeleton", {
+      attrs: {
+        "text-option": {
+          type: "body"
+        },
+        "offset": 0
+      }
+    })], 1);
   }), 1);
 };
 var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main$2,
-  _sfc_render$2,
-  _sfc_staticRenderFns$2,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main$2, _sfc_render$2, _sfc_staticRenderFns$2, false, null, null, null, null);
 const ComboboxLoadingList = __component__$2.exports;
 const _sfc_main$1 = {
   name: "ComboboxEmptyList",
-  components: { DtListItem: lib_listItem.DtListItem },
+  components: {
+    DtListItem: lib_listItem.DtListItem
+  },
   props: {
     /**
      * Message to display when list is empty
@@ -50,21 +64,24 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("ol", { staticClass: "d-combobox__empty-list", attrs: { "data-qa": "dt-combobox-empty-list" } }, [_vm._t("default", function() {
-    return [_c("dt-list-item", { class: ["dt-empty-list-item", _vm.itemClass], attrs: { "role": "option", "navigation-type": "none", "type": "custom" } }, [_c("span", [_vm._v(_vm._s(_vm.message))])])];
+  return _c("ol", {
+    staticClass: "d-combobox__empty-list",
+    attrs: {
+      "data-qa": "dt-combobox-empty-list"
+    }
+  }, [_vm._t("default", function() {
+    return [_c("dt-list-item", {
+      class: ["dt-empty-list-item", _vm.itemClass],
+      attrs: {
+        "role": "option",
+        "navigation-type": "none",
+        "type": "custom"
+      }
+    }, [_c("span", [_vm._v(_vm._s(_vm.message))])])];
   })], 2);
 };
 var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main$1,
-  _sfc_render$1,
-  _sfc_staticRenderFns$1,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
 const ComboboxEmptyList = __component__$1.exports;
 const LABEL_SIZES = {
   EXTRA_SMALL: "xs",
@@ -79,17 +96,15 @@ const _sfc_main = {
     ComboboxLoadingList,
     ComboboxEmptyList
   },
-  mixins: [
-    keyboard_list_navigation.KeyboardNavigation({
-      indexKey: "highlightIndex",
-      idKey: "highlightId",
-      listElementKey: "getListElement",
-      afterHighlightMethod: "afterHighlight",
-      beginningOfListMethod: "beginningOfListMethod",
-      endOfListMethod: "endOfListMethod",
-      activeItemKey: "activeItemEl"
-    })
-  ],
+  mixins: [keyboard_list_navigation.KeyboardNavigation({
+    indexKey: "highlightIndex",
+    idKey: "highlightId",
+    listElementKey: "getListElement",
+    afterHighlightMethod: "afterHighlight",
+    beginningOfListMethod: "beginningOfListMethod",
+    endOfListMethod: "endOfListMethod",
+    activeItemKey: "activeItemEl"
+  })],
   props: {
     /**
      * String to use for the input label.
@@ -383,59 +398,79 @@ const _sfc_main = {
 };
 var _sfc_render = function render3() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { on: { "keydown": [function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
-      return null;
-    $event.stopPropagation();
-    return _vm.onKeyValidation($event, "onEscapeKey");
-  }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
-      return null;
-    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey)
-      return null;
-    return _vm.onKeyValidation($event, "onEnterKey");
-  }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
-      return null;
-    $event.stopPropagation();
-    $event.preventDefault();
-    return _vm.onKeyValidation($event, "onUpKey");
-  }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
-      return null;
-    $event.stopPropagation();
-    $event.preventDefault();
-    return _vm.onKeyValidation($event, "onDownKey");
-  }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "home", void 0, $event.key, void 0))
-      return null;
-    $event.stopPropagation();
-    $event.preventDefault();
-    return _vm.onKeyValidation($event, "onHomeKey");
-  }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "end", void 0, $event.key, void 0))
-      return null;
-    $event.stopPropagation();
-    $event.preventDefault();
-    return _vm.onKeyValidation($event, "onEndKey");
-  }] } }, [_c("div", { attrs: { "data-qa": "dt-combobox-input-wrapper" } }, [_vm._t("input", null, { "inputProps": _vm.inputProps })], 2), _vm.showList ? _c("div", { ref: "listWrapper", attrs: { "data-qa": "dt-combobox-list-wrapper" }, on: { "mouseleave": _vm.clearHighlightIndex, "focusout": _vm.clearHighlightIndex, "!mousemove": function($event) {
-    return _vm.onMouseHighlight.apply(null, arguments);
-  } } }, [_vm.loading && !_vm.listRenderedOutside ? _c("combobox-loading-list", _vm._b({}, "combobox-loading-list", _vm.listProps, false)) : _vm.emptyList && (_vm.emptyStateMessage || _vm.$slots.emptyListItem) && !_vm.listRenderedOutside ? _c("combobox-empty-list", _vm._b({ attrs: { "message": _vm.emptyStateMessage, "item-class": _vm.emptyStateClass } }, "combobox-empty-list", _vm.listProps, false), [_vm._t("emptyListItem")], 2) : _vm._t("list", null, { "listProps": _vm.listProps, "opened": _vm.onOpen, "clearHighlightIndex": _vm.clearHighlightIndex })], 2) : _vm._e()]);
+  return _c("div", {
+    on: {
+      "keydown": [function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+          return null;
+        $event.stopPropagation();
+        return _vm.onKeyValidation($event, "onEscapeKey");
+      }, function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
+          return null;
+        if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey)
+          return null;
+        return _vm.onKeyValidation($event, "onEnterKey");
+      }, function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
+          return null;
+        $event.stopPropagation();
+        $event.preventDefault();
+        return _vm.onKeyValidation($event, "onUpKey");
+      }, function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
+          return null;
+        $event.stopPropagation();
+        $event.preventDefault();
+        return _vm.onKeyValidation($event, "onDownKey");
+      }, function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "home", void 0, $event.key, void 0))
+          return null;
+        $event.stopPropagation();
+        $event.preventDefault();
+        return _vm.onKeyValidation($event, "onHomeKey");
+      }, function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "end", void 0, $event.key, void 0))
+          return null;
+        $event.stopPropagation();
+        $event.preventDefault();
+        return _vm.onKeyValidation($event, "onEndKey");
+      }]
+    }
+  }, [_c("div", {
+    attrs: {
+      "data-qa": "dt-combobox-input-wrapper"
+    }
+  }, [_vm._t("input", null, {
+    "inputProps": _vm.inputProps
+  })], 2), _vm.showList ? _c("div", {
+    ref: "listWrapper",
+    attrs: {
+      "data-qa": "dt-combobox-list-wrapper"
+    },
+    on: {
+      "mouseleave": _vm.clearHighlightIndex,
+      "focusout": _vm.clearHighlightIndex,
+      "!mousemove": function($event) {
+        return _vm.onMouseHighlight.apply(null, arguments);
+      }
+    }
+  }, [_vm.loading && !_vm.listRenderedOutside ? _c("combobox-loading-list", _vm._b({}, "combobox-loading-list", _vm.listProps, false)) : _vm.emptyList && (_vm.emptyStateMessage || _vm.$slots.emptyListItem) && !_vm.listRenderedOutside ? _c("combobox-empty-list", _vm._b({
+    attrs: {
+      "message": _vm.emptyStateMessage,
+      "item-class": _vm.emptyStateClass
+    }
+  }, "combobox-empty-list", _vm.listProps, false), [_vm._t("emptyListItem")], 2) : _vm._t("list", null, {
+    "listProps": _vm.listProps,
+    "opened": _vm.onOpen,
+    "clearHighlightIndex": _vm.clearHighlightIndex
+  })], 2) : _vm._e()]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const DtCombobox = __component__.exports;
 exports.ComboboxEmptyList = ComboboxEmptyList;
 exports.ComboboxLoadingList = ComboboxLoadingList;
 exports.DtCombobox = DtCombobox;
 exports.LABEL_SIZES = LABEL_SIZES;
-//# sourceMappingURL=index-gj1jEXP4.js.map
+//# sourceMappingURL=index-DyqUqjvI.js.map

package/dist/chunks/{index-gj1jEXP4.js.map → index-DyqUqjvI.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-gj1jEXP4.js","sources":["../../components/combobox/combobox_loading-list.vue","../../components/combobox/combobox_empty-list.vue","../../components/combobox/combobox_constants.js","../../components/combobox/combobox.vue"],"sourcesContent":["<template>\n  <ol\n    class=\"d-combobox__loading-list\"\n    aria-busy=\"true\"\n  >\n    <dt-list-item\n      v-for=\"index in 7\"\n      :key=\"index\"\n      role=\"option\"\n      navigation-type=\"none\"\n    >\n      <dt-skeleton\n        :text-option=\"{ type: 'body' }\"\n        :offset=\"0\"\n      />\n    </dt-list-item>\n  </ol>\n</template>\n\n<script>\nimport { DtListItem } from '../list_item';\nimport { DtSkeleton } from '../skeleton';\n\nexport default {\n  name: 'ComboboxLoadingList',\n\n  components: { DtListItem, DtSkeleton },\n};\n</script>\n","<template>\n  <ol\n    class=\"d-combobox__empty-list\"\n    data-qa=\"dt-combobox-empty-list\"\n  >\n    <slot>\n      <dt-list-item\n        role=\"option\"\n        navigation-type=\"none\"\n        type=\"custom\"\n        :class=\"['dt-empty-list-item', itemClass]\"\n      >\n        <span>{{ message }}</span>\n      </dt-list-item>\n    </slot>\n  </ol>\n</template>\n\n<script>\nimport { DtListItem } from '../list_item';\n\nexport default {\n  name: 'ComboboxEmptyList',\n\n  components: { DtListItem },\n\n  props: {\n    /**\n     * Message to display when list is empty\n     */\n    message: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Additional class name for the empty list element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    itemClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-empty-list-item {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--dt-font-size-200);\n  line-height: var(--lh4);\n  padding: var(--dt-space-300) var(--dt-space-450);\n}\n</style>\n","export const LABEL_SIZES = {\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\nexport default {\n  LABEL_SIZES,\n};\n","<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <div\n    @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n    @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n    @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n    @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n    @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n    @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n  >\n    <div data-qa=\"dt-combobox-input-wrapper\">\n      <!-- @slot Slot for the combobox input element -->\n      <slot\n        name=\"input\"\n        :input-props=\"inputProps\"\n      />\n    </div>\n\n    <div\n      v-if=\"showList\"\n      ref=\"listWrapper\"\n      data-qa=\"dt-combobox-list-wrapper\"\n      @mouseleave=\"clearHighlightIndex\"\n      @focusout=\"clearHighlightIndex\"\n      @mousemove.capture=\"onMouseHighlight\"\n    >\n      <combobox-loading-list\n        v-if=\"loading && !listRenderedOutside\"\n        v-bind=\"listProps\"\n      />\n      <combobox-empty-list\n        v-else-if=\"emptyList && (emptyStateMessage || $slots.emptyListItem) && !listRenderedOutside\"\n        v-bind=\"listProps\"\n        :message=\"emptyStateMessage\"\n        :item-class=\"emptyStateClass\"\n      >\n        <slot name=\"emptyListItem\" />\n      </combobox-empty-list>\n      <!-- @slot Slot for the combobox list element -->\n      <slot\n        v-else\n        name=\"list\"\n        :list-props=\"listProps\"\n        :opened=\"onOpen\"\n        :clear-highlight-index=\"clearHighlightIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { getUniqueString } from '@/common/utils';\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { LABEL_SIZES } from '@/components/combobox/combobox_constants';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n  name: 'DtCombobox',\n\n  components: {\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [\n    KeyboardNavigation({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n    }),\n  ],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * @values true, false\n     */\n    showList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If the list is rendered outside the component, like when using popover as the list wrapper.\n     * @values true, false\n     */\n    listRenderedOutside: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     * @values true, false\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the empty list element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    emptyStateClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Programmatically click on the active list item element when a selection\n     * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n     * @values true, false\n     */\n    clickOnSelect: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when pressing escape\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired when list is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      // If the list is rendered at the root, rather than as a child\n      // of this component, this is the ref to that dom element. Set\n      // by the onOpen method.\n      outsideRenderedListRef: null,\n    };\n  },\n\n  computed: {\n    inputProps () {\n      return {\n        label: this.label,\n        labelVisible: this.labelVisible,\n        size: this.size,\n        description: this.description,\n        role: 'combobox',\n        'aria-label': this.label,\n        'aria-expanded': this.showList.toString(),\n        'aria-owns': this.listId,\n        'aria-haspopup': 'listbox',\n        'aria-activedescendant': this.activeItemId,\n        'aria-controls': this.listId,\n      };\n    },\n\n    listProps () {\n      return {\n        role: 'listbox',\n        id: this.listId,\n        // The list has to be positioned relatively so that the auto-scroll can\n        // calculate the correct offset for the list items.\n        class: 'd-ps-relative',\n        'aria-label': this.label,\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemId () {\n      if (!this.showList || this.highlightIndex < 0 || this.loading) {\n        return;\n      }\n      return this.highlightId;\n    },\n\n    activeItemEl () {\n      if (!this.highlightId) return '';\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n  },\n\n  watch: {\n    showList (showList) {\n      // When the list's visibility changes reset the highlight index.\n\n      if (!this.listRenderedOutside) {\n        this.setInitialHighlightIndex();\n        this.$emit('opened', showList);\n      }\n\n      if (!showList && this.outsideRenderedListRef) {\n        this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n        this.outsideRenderedListRef = null;\n      }\n    },\n\n    loading (loading) {\n      this.$nextTick(() => {\n        this.setInitialHighlightIndex();\n      });\n    },\n\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        this.validateEmptyListProps();\n      },\n    },\n  },\n\n  created () {\n    this.validateEmptyListProps();\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      if (this.loading) return;\n\n      const liElement = e.target.closest('li');\n\n      if (liElement && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n      }\n    },\n\n    getListElement () {\n      return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n    },\n\n    clearHighlightIndex () {\n      if (this.showList) {\n        this.setHighlightIndex(-1);\n      }\n    },\n\n    afterHighlight () {\n      if (this.loading) return;\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    onEnterKey () {\n      if (this.loading || this.emptyList) return;\n\n      if (this.highlightIndex >= 0) {\n        this.$emit('select', this.highlightIndex);\n\n        if (this.clickOnSelect) {\n          this.activeItemEl?.click();\n        }\n      }\n    },\n\n    onEscapeKey () {\n      this.$emit('escape');\n    },\n\n    onOpen (open, contentRef) {\n      this.outsideRenderedListRef = contentRef;\n      this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n      this.$emit('opened', open);\n\n      if (open) {\n        this.setInitialHighlightIndex();\n      }\n    },\n\n    onKeyValidation (e, eventHandler) {\n      if (!this.showList || !this.getListElement()) return;\n\n      this[eventHandler](e);\n    },\n\n    setInitialHighlightIndex () {\n      if (!this.showList) return;\n      this.$nextTick(() => {\n      // When the list's is shown, reset the highlight index.\n      // If the list is loading, set to -1\n        this.setHighlightIndex(this.loading ? -1 : 0);\n      });\n    },\n\n    validateEmptyListProps () {\n      if (this.$slots.emptyListItem) { return; }\n\n      if (this.emptyList && !this.emptyStateMessage) {\n        console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtListItem","DtSkeleton","KeyboardNavigation","getUniqueString"],"mappings":"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"}
+{"version":3,"file":"index-DyqUqjvI.js","sources":["../../components/combobox/combobox_loading-list.vue","../../components/combobox/combobox_empty-list.vue","../../components/combobox/combobox_constants.js","../../components/combobox/combobox.vue"],"sourcesContent":["<template>\n  <ol\n    class=\"d-combobox__loading-list\"\n    aria-busy=\"true\"\n  >\n    <dt-list-item\n      v-for=\"index in 7\"\n      :key=\"index\"\n      role=\"option\"\n      navigation-type=\"none\"\n    >\n      <dt-skeleton\n        :text-option=\"{ type: 'body' }\"\n        :offset=\"0\"\n      />\n    </dt-list-item>\n  </ol>\n</template>\n\n<script>\nimport { DtListItem } from '../list_item';\nimport { DtSkeleton } from '../skeleton';\n\nexport default {\n  name: 'ComboboxLoadingList',\n\n  components: { DtListItem, DtSkeleton },\n};\n</script>\n","<template>\n  <ol\n    class=\"d-combobox__empty-list\"\n    data-qa=\"dt-combobox-empty-list\"\n  >\n    <slot>\n      <dt-list-item\n        role=\"option\"\n        navigation-type=\"none\"\n        type=\"custom\"\n        :class=\"['dt-empty-list-item', itemClass]\"\n      >\n        <span>{{ message }}</span>\n      </dt-list-item>\n    </slot>\n  </ol>\n</template>\n\n<script>\nimport { DtListItem } from '../list_item';\n\nexport default {\n  name: 'ComboboxEmptyList',\n\n  components: { DtListItem },\n\n  props: {\n    /**\n     * Message to display when list is empty\n     */\n    message: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Additional class name for the empty list element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    itemClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-empty-list-item {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--dt-font-size-200);\n  line-height: var(--lh4);\n  padding: var(--dt-space-300) var(--dt-space-450);\n}\n</style>\n","export const LABEL_SIZES = {\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\nexport default {\n  LABEL_SIZES,\n};\n","<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <div\n    @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n    @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n    @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n    @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n    @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n    @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n  >\n    <div data-qa=\"dt-combobox-input-wrapper\">\n      <!-- @slot Slot for the combobox input element -->\n      <slot\n        name=\"input\"\n        :input-props=\"inputProps\"\n      />\n    </div>\n\n    <div\n      v-if=\"showList\"\n      ref=\"listWrapper\"\n      data-qa=\"dt-combobox-list-wrapper\"\n      @mouseleave=\"clearHighlightIndex\"\n      @focusout=\"clearHighlightIndex\"\n      @mousemove.capture=\"onMouseHighlight\"\n    >\n      <combobox-loading-list\n        v-if=\"loading && !listRenderedOutside\"\n        v-bind=\"listProps\"\n      />\n      <combobox-empty-list\n        v-else-if=\"emptyList && (emptyStateMessage || $slots.emptyListItem) && !listRenderedOutside\"\n        v-bind=\"listProps\"\n        :message=\"emptyStateMessage\"\n        :item-class=\"emptyStateClass\"\n      >\n        <slot name=\"emptyListItem\" />\n      </combobox-empty-list>\n      <!-- @slot Slot for the combobox list element -->\n      <slot\n        v-else\n        name=\"list\"\n        :list-props=\"listProps\"\n        :opened=\"onOpen\"\n        :clear-highlight-index=\"clearHighlightIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { getUniqueString } from '@/common/utils';\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { LABEL_SIZES } from '@/components/combobox/combobox_constants';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n  name: 'DtCombobox',\n\n  components: {\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [\n    KeyboardNavigation({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n    }),\n  ],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * @values true, false\n     */\n    showList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If the list is rendered outside the component, like when using popover as the list wrapper.\n     * @values true, false\n     */\n    listRenderedOutside: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     * @values true, false\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the empty list element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    emptyStateClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Programmatically click on the active list item element when a selection\n     * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n     * @values true, false\n     */\n    clickOnSelect: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when pressing escape\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired when list is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      // If the list is rendered at the root, rather than as a child\n      // of this component, this is the ref to that dom element. Set\n      // by the onOpen method.\n      outsideRenderedListRef: null,\n    };\n  },\n\n  computed: {\n    inputProps () {\n      return {\n        label: this.label,\n        labelVisible: this.labelVisible,\n        size: this.size,\n        description: this.description,\n        role: 'combobox',\n        'aria-label': this.label,\n        'aria-expanded': this.showList.toString(),\n        'aria-owns': this.listId,\n        'aria-haspopup': 'listbox',\n        'aria-activedescendant': this.activeItemId,\n        'aria-controls': this.listId,\n      };\n    },\n\n    listProps () {\n      return {\n        role: 'listbox',\n        id: this.listId,\n        // The list has to be positioned relatively so that the auto-scroll can\n        // calculate the correct offset for the list items.\n        class: 'd-ps-relative',\n        'aria-label': this.label,\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemId () {\n      if (!this.showList || this.highlightIndex < 0 || this.loading) {\n        return;\n      }\n      return this.highlightId;\n    },\n\n    activeItemEl () {\n      if (!this.highlightId) return '';\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n  },\n\n  watch: {\n    showList (showList) {\n      // When the list's visibility changes reset the highlight index.\n\n      if (!this.listRenderedOutside) {\n        this.setInitialHighlightIndex();\n        this.$emit('opened', showList);\n      }\n\n      if (!showList && this.outsideRenderedListRef) {\n        this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n        this.outsideRenderedListRef = null;\n      }\n    },\n\n    loading (loading) {\n      this.$nextTick(() => {\n        this.setInitialHighlightIndex();\n      });\n    },\n\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        this.validateEmptyListProps();\n      },\n    },\n  },\n\n  created () {\n    this.validateEmptyListProps();\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      if (this.loading) return;\n\n      const liElement = e.target.closest('li');\n\n      if (liElement && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n      }\n    },\n\n    getListElement () {\n      return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n    },\n\n    clearHighlightIndex () {\n      if (this.showList) {\n        this.setHighlightIndex(-1);\n      }\n    },\n\n    afterHighlight () {\n      if (this.loading) return;\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    onEnterKey () {\n      if (this.loading || this.emptyList) return;\n\n      if (this.highlightIndex >= 0) {\n        this.$emit('select', this.highlightIndex);\n\n        if (this.clickOnSelect) {\n          this.activeItemEl?.click();\n        }\n      }\n    },\n\n    onEscapeKey () {\n      this.$emit('escape');\n    },\n\n    onOpen (open, contentRef) {\n      this.outsideRenderedListRef = contentRef;\n      this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n      this.$emit('opened', open);\n\n      if (open) {\n        this.setInitialHighlightIndex();\n      }\n    },\n\n    onKeyValidation (e, eventHandler) {\n      if (!this.showList || !this.getListElement()) return;\n\n      this[eventHandler](e);\n    },\n\n    setInitialHighlightIndex () {\n      if (!this.showList) return;\n      this.$nextTick(() => {\n      // When the list's is shown, reset the highlight index.\n      // If the list is loading, set to -1\n        this.setHighlightIndex(this.loading ? -1 : 0);\n      });\n    },\n\n    validateEmptyListProps () {\n      if (this.$slots.emptyListItem) { return; }\n\n      if (this.emptyList && !this.emptyStateMessage) {\n        console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","components","DtListItem","DtSkeleton","props","message","type","String","required","itemClass","Object","Array","default","LABEL_SIZES","EXTRA_SMALL","SMALL","DEFAULT","LARGE","EXTRA_LARGE","ComboboxLoadingList","ComboboxEmptyList","mixins","KeyboardNavigation","indexKey","idKey","listElementKey","afterHighlightMethod","beginningOfListMethod","endOfListMethod","activeItemKey","label","labelVisible","Boolean","size","validator","t","values","includes","description","listId","getUniqueString","onBeginningOfList","Function","onEndOfList","showList","listRenderedOutside","loading","emptyList","emptyStateMessage","emptyStateClass","clickOnSelect","emits","data","outsideRenderedListRef","computed","inputProps","role","toString","activeItemId","listProps","id","class","jumpToEnd","jumpToBeginning","highlightIndex","highlightId","activeItemEl","getListElement","querySelector","watch","setInitialHighlightIndex","$emit","removeEventListener","onMouseHighlight","$nextTick","$props","deep","immediate","handler","validateEmptyListProps","created","methods","e","liElement","target","closest","setHighlightId","$refs","listWrapper","clearHighlightIndex","setHighlightIndex","afterHighlight","onEnterKey","click","onEscapeKey","onOpen","open","contentRef","addEventListener","onKeyValidation","eventHandler","$slots","emptyListItem","console","error"],"mappings":"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"}