@dialpad/dialtone-vue 2.125.0 → 2.125.1-alpha.1

package/dist/chunks/index-nIyl_PL6.js

@@ -0,0 +1,372 @@
+import { K as l } from "./keyboard_list_navigation-F0O8nht0.js";
+import { getUniqueString as r } from "../lib/utils.js";
+import { n } from "./_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtListItem as o } from "../lib/list-item.js";
+import { DtSkeleton as a } from "../lib/skeleton.js";
+const d = {
+  name: "ComboboxLoadingList",
+  components: { DtListItem: o, DtSkeleton: a }
+};
+var h = function() {
+  var t = this, s = t._self._c;
+  return s("ol", { staticClass: "d-combobox__loading-list", attrs: { "aria-busy": "true" } }, t._l(7, function(e) {
+    return s("dt-list-item", { key: e, attrs: { role: "option", "navigation-type": "none" } }, [s("dt-skeleton", { attrs: { "text-option": { type: "body" }, offset: 0 } })], 1);
+  }), 1);
+}, p = [], u = /* @__PURE__ */ n(
+  d,
+  h,
+  p,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const m = u.exports, g = {
+  name: "ComboboxEmptyList",
+  components: { DtListItem: o },
+  props: {
+    /**
+     * Message to display when list is empty
+     */
+    message: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Additional class name for the empty list element.
+     * Can accept all of String, Object, and Array, i.e. has the
+     * same api as Vue's built-in handling of the class attribute.
+     */
+    itemClass: {
+      type: [String, Object, Array],
+      default: ""
+    }
+  }
+};
+var f = function() {
+  var t = this, s = t._self._c;
+  return s("ol", { staticClass: "d-combobox__empty-list", attrs: { "data-qa": "dt-combobox-empty-list" } }, [t._t("default", function() {
+    return [s("dt-list-item", { class: ["dt-empty-list-item", t.itemClass], attrs: { role: "option", "navigation-type": "none", type: "custom" } }, [s("span", [t._v(t._s(t.message))])])];
+  })], 2);
+}, c = [], y = /* @__PURE__ */ n(
+  g,
+  f,
+  c,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const _ = y.exports, b = {
+  EXTRA_SMALL: "xs",
+  SMALL: "sm",
+  DEFAULT: "md",
+  LARGE: "lg",
+  EXTRA_LARGE: "xl"
+}, L = {
+  name: "DtCombobox",
+  components: {
+    ComboboxLoadingList: m,
+    ComboboxEmptyList: _
+  },
+  mixins: [
+    l({
+      indexKey: "highlightIndex",
+      idKey: "highlightId",
+      listElementKey: "getListElement",
+      afterHighlightMethod: "afterHighlight",
+      beginningOfListMethod: "beginningOfListMethod",
+      endOfListMethod: "endOfListMethod",
+      activeItemKey: "activeItemEl"
+    })
+  ],
+  props: {
+    /**
+     * String to use for the input label.
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Determines visibility of input label.
+     * @values true, false
+     */
+    labelVisible: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
+     * @values null, xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: null,
+      validator: (i) => Object.values(b).includes(i)
+    },
+    /**
+     * Description for the input
+     */
+    description: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Sets an ID on the list element of the component. Used by several aria attributes
+     * as well as when deriving the IDs for each item.
+     */
+    listId: {
+      type: String,
+      default() {
+        return r();
+      }
+    },
+    /**
+     * A method that will be called when the selection goes past the beginning of the list.
+     */
+    onBeginningOfList: {
+      type: Function,
+      default: null
+    },
+    /**
+     * A method that will be called when the selection goes past the end of the list.
+     */
+    onEndOfList: {
+      type: Function,
+      default: null
+    },
+    /**
+     * Determines when to show the list element and also controls the aria-expanded attribute.
+     * @values true, false
+     */
+    showList: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If the list is rendered outside the component, like when using popover as the list wrapper.
+     * @values true, false
+     */
+    listRenderedOutside: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Determines when to show the skeletons and also controls aria-busy attribute.
+     * @values true, false
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
+     * @values true, false
+     */
+    emptyList: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Message to show when the list is empty
+     */
+    emptyStateMessage: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the empty list element.
+     * Can accept all of String, Object, and Array, i.e. has the
+     * same api as Vue's built-in handling of the class attribute.
+     */
+    emptyStateClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Programmatically click on the active list item element when a selection
+     * comes from keyboard navigation, i.e. pressing the "Enter" key.
+     * @values true, false
+     */
+    clickOnSelect: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    /**
+     * Event fired when item selected
+     *
+     * @event select
+     * @type {Number}
+     */
+    "select",
+    /**
+     * Event fired when pressing escape
+     *
+     * @event escape
+     */
+    "escape",
+    /**
+     * Event fired when the highlight changes
+     *
+     * @event highlight
+     * @type {Number}
+     */
+    "highlight",
+    /**
+     * Event fired when list is shown or hidden
+     *
+     * @event opened
+     * @type {Boolean}
+     */
+    "opened"
+  ],
+  data() {
+    return {
+      // If the list is rendered at the root, rather than as a child
+      // of this component, this is the ref to that dom element. Set
+      // by the onOpen method.
+      outsideRenderedListRef: null
+    };
+  },
+  computed: {
+    inputProps() {
+      return {
+        label: this.label,
+        labelVisible: this.labelVisible,
+        size: this.size,
+        description: this.description,
+        role: "combobox",
+        "aria-label": this.label,
+        "aria-expanded": this.showList.toString(),
+        "aria-owns": this.listId,
+        "aria-haspopup": "listbox",
+        "aria-activedescendant": this.activeItemId,
+        "aria-controls": this.listId
+      };
+    },
+    listProps() {
+      return {
+        role: "listbox",
+        id: this.listId,
+        // The list has to be positioned relatively so that the auto-scroll can
+        // calculate the correct offset for the list items.
+        class: "d-ps-relative",
+        "aria-label": this.label
+      };
+    },
+    beginningOfListMethod() {
+      return this.onBeginningOfList || this.jumpToEnd;
+    },
+    endOfListMethod() {
+      return this.onEndOfList || this.jumpToBeginning;
+    },
+    activeItemId() {
+      if (!(!this.showList || this.highlightIndex < 0 || this.loading))
+        return this.highlightId;
+    },
+    activeItemEl() {
+      return this.highlightId ? this.getListElement().querySelector("#" + this.highlightId) : "";
+    }
+  },
+  watch: {
+    showList(i) {
+      this.listRenderedOutside || (this.setInitialHighlightIndex(), this.$emit("opened", i)), !i && this.outsideRenderedListRef && (this.outsideRenderedListRef.removeEventListener("mousemove", this.onMouseHighlight), this.outsideRenderedListRef = null);
+    },
+    loading(i) {
+      this.$nextTick(() => {
+        this.setInitialHighlightIndex();
+      });
+    },
+    $props: {
+      deep: !0,
+      immediate: !0,
+      handler() {
+        this.validateEmptyListProps();
+      }
+    }
+  },
+  created() {
+    this.validateEmptyListProps();
+  },
+  methods: {
+    onMouseHighlight(i) {
+      if (this.loading)
+        return;
+      const t = i.target.closest("li");
+      t && this.highlightId !== t.id && this.setHighlightId(t.id);
+    },
+    getListElement() {
+      var i;
+      return this.outsideRenderedListRef ?? ((i = this.$refs.listWrapper) == null ? void 0 : i.querySelector(`#${this.listId}`));
+    },
+    clearHighlightIndex() {
+      this.showList && this.setHighlightIndex(-1);
+    },
+    afterHighlight() {
+      this.loading || this.$emit("highlight", this.highlightIndex);
+    },
+    onEnterKey() {
+      var i;
+      this.loading || this.emptyList || this.highlightIndex >= 0 && (this.$emit("select", this.highlightIndex), this.clickOnSelect && ((i = this.activeItemEl) == null || i.click()));
+    },
+    onEscapeKey() {
+      this.$emit("escape");
+    },
+    onOpen(i, t) {
+      var s;
+      this.outsideRenderedListRef = t, (s = this.outsideRenderedListRef) == null || s.addEventListener("mousemove", this.onMouseHighlight), this.$emit("opened", i), i && this.setInitialHighlightIndex();
+    },
+    onKeyValidation(i, t) {
+      !this.showList || !this.getListElement() || this[t](i);
+    },
+    setInitialHighlightIndex() {
+      this.showList && this.$nextTick(() => {
+        this.setHighlightIndex(this.loading ? -1 : 0);
+      });
+    },
+    validateEmptyListProps() {
+      this.$slots.emptyListItem || (this.emptyList && !this.emptyStateMessage || !this.emptyList && this.emptyStateMessage) && console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the
+      empty message.`);
+    }
+  }
+};
+var x = function() {
+  var t = this, s = t._self._c;
+  return s("div", { on: { keydown: [function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "esc", 27, e.key, ["Esc", "Escape"]) ? null : (e.stopPropagation(), t.onKeyValidation(e, "onEscapeKey"));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "enter", 13, e.key, "Enter") || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : t.onKeyValidation(e, "onEnterKey");
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "up", 38, e.key, ["Up", "ArrowUp"]) ? null : (e.stopPropagation(), e.preventDefault(), t.onKeyValidation(e, "onUpKey"));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "down", 40, e.key, ["Down", "ArrowDown"]) ? null : (e.stopPropagation(), e.preventDefault(), t.onKeyValidation(e, "onDownKey"));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "home", void 0, e.key, void 0) ? null : (e.stopPropagation(), e.preventDefault(), t.onKeyValidation(e, "onHomeKey"));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "end", void 0, e.key, void 0) ? null : (e.stopPropagation(), e.preventDefault(), t.onKeyValidation(e, "onEndKey"));
+  }] } }, [s("div", { attrs: { "data-qa": "dt-combobox-input-wrapper" } }, [t._t("input", null, { inputProps: t.inputProps })], 2), t.showList ? s("div", { ref: "listWrapper", attrs: { "data-qa": "dt-combobox-list-wrapper" }, on: { mouseleave: t.clearHighlightIndex, focusout: t.clearHighlightIndex, "!mousemove": function(e) {
+    return t.onMouseHighlight.apply(null, arguments);
+  } } }, [t.loading && !t.listRenderedOutside ? s("combobox-loading-list", t._b({}, "combobox-loading-list", t.listProps, !1)) : t.emptyList && (t.emptyStateMessage || t.$slots.emptyListItem) && !t.listRenderedOutside ? s("combobox-empty-list", t._b({ attrs: { message: t.emptyStateMessage, "item-class": t.emptyStateClass } }, "combobox-empty-list", t.listProps, !1), [t._t("emptyListItem")], 2) : t._t("list", null, { listProps: t.listProps, opened: t.onOpen, clearHighlightIndex: t.clearHighlightIndex })], 2) : t._e()]);
+}, I = [], E = /* @__PURE__ */ n(
+  L,
+  x,
+  I,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const C = E.exports;
+export {
+  m as C,
+  C as D,
+  b as L,
+  _ as a
+};
+//# sourceMappingURL=index-nIyl_PL6.js.map

package/dist/chunks/index-nIyl_PL6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-nIyl_PL6.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) || (!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","LABEL_SIZES","ComboboxLoadingList","ComboboxEmptyList","KeyboardNavigation","t","getUniqueString","showList","loading","e","liElement","_a","open","contentRef","eventHandler"],"mappings":"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"}

package/dist/chunks/index-o4OMWMuv.js

@@ -0,0 +1,244 @@
+import S from "emoji-regex";
+import y from "emoji-toolkit/emoji_strategy.json";
+import { n as D } from "./_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtSkeleton as v } from "../lib/skeleton.js";
+import { I as c } from "./icon_constants-OpYAAKwF.js";
+const _ = "6.6", u = "https://cdn.jsdelivr.net/joypixels/assets/" + _ + "/png/unicode/32/";
+let d = null, f = u, j = ".png", h = u, g = ".png";
+const r = y;
+function L() {
+  return r;
+}
+function T(t, e = ".png") {
+  t.endsWith("/") || (t = t + "/"), f = t, j = e;
+}
+function F(t, e = ".svg") {
+  t.endsWith("/") || (t = t + "/"), h = t, g = e;
+}
+function J(t) {
+  d = t;
+}
+function W(t) {
+  w(t);
+}
+function w(t) {
+  const e = ["extension", "custom"], i = [
+    "name",
+    "category",
+    "shortname",
+    "extension",
+    "custom"
+  ], o = (s, n, a) => {
+    if (s[n] === void 0) {
+      if (!e.includes(n))
+        return;
+      s[n] = a;
+    } else
+      Array.isArray(s[n]) ? s[n] = s[n].concat(a) : s[n] = a;
+  };
+  Object.entries(t).forEach((s) => {
+    const [n, a] = s;
+    if (n in r) {
+      const l = r[n];
+      for (const m in a) {
+        const E = a[m];
+        o(l, m, E);
+      }
+    } else
+      i.every((m) => a[m] !== void 0) ? r[n] = a : console.error(
+        "The following custom emoji doesn't contain the required properties:",
+        a
+      );
+  });
+}
+function p(t) {
+  function e(o, s) {
+    if (!(!o || typeof o != "object")) {
+      if ("shortname" in o && (o.shortname === t || o.shortname_alternates.includes(t)))
+        return o.key = s, i = o, !0;
+      Object.keys(o).some(function(n) {
+        return e(o[n], n);
+      });
+    }
+  }
+  let i;
+  return e(L(), null), i;
+}
+function b(t) {
+  let e = "";
+  for (const i of t) {
+    const o = i.codePointAt(0).toString(16).padStart(4, "0");
+    ["200d", "fe0f"].includes(o) || (e !== "" && (e = e + "-"), e = e + o);
+  }
+  return e;
+}
+function k(t) {
+  const e = t.split("-");
+  let i = "";
+  return e.forEach((o) => {
+    i = i + String.fromCodePoint(parseInt(o, 16));
+  }), i;
+}
+function x(t) {
+  if (t.startsWith(":") && t.endsWith(":"))
+    return p(t);
+  {
+    const e = b(t), i = r[e];
+    return i && (i.key = e), i;
+  }
+}
+function B(t) {
+  const e = t.match(/:\w+:/g);
+  return A(e);
+}
+function A(t) {
+  const e = t ? t.filter((i) => p(i)) : [];
+  return new Set(e);
+}
+function K(t) {
+  const e = [...t.matchAll(S())], i = e.length ? e.map((o) => o[0]) : [];
+  return new Set(i);
+}
+const C = {
+  name: "DtEmoji",
+  components: {
+    DtSkeleton: v
+  },
+  props: {
+    /**
+     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
+     * <a class="d-link" href="https://emojipedia.org/joypixels/" target="_blank">JoyPixels</a>
+     * for all supported shortcode/unicode or the docs for setting up custom emojis.
+     */
+    code: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The size of the emoji. Can be any of the icon size utility classes from
+     * <a class="d-link" href="https://dialtone.dialpad.com/components/icon.html" target="_blank"> Dialpad Icon Size</a>
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (t) => Object.keys(c).includes(t)
+    },
+    /**
+     * Additional class name for the emoji img element.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    imgClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n
+     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will
+     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the
+     * getEmojiData() function
+     */
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Shows a skeleton loader while the emoji asset is loading.
+     * @values true, false
+     */
+    showSkeleton: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  data() {
+    return {
+      emojiData: null,
+      imgLoading: !1
+    };
+  },
+  computed: {
+    emojiDataValid() {
+      return !!this.emojiData;
+    },
+    emojiSrc() {
+      var t;
+      return this.emojiDataValid ? (t = this.emojiData) != null && t.custom ? d + this.emojiData.key + this.emojiData.extension : ["100", "200"].includes(this.size) ? f + this.emojiData.key + j : h + this.emojiData.key + g : "invalid";
+    },
+    emojiAlt() {
+      if (this.emojiDataValid)
+        return this.emojiData.unicode_output ? k(this.emojiData.unicode_output) : this.emojiData.name;
+    },
+    emojiLabel() {
+      return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
+    },
+    emojiSize() {
+      return c[this.size];
+    }
+  },
+  watch: {
+    code: {
+      handler: function() {
+        this.getEmojiData();
+      },
+      immediate: !0
+    },
+    emojiSrc: {
+      handler: async function() {
+        this.imgLoading = !0;
+      },
+      immediate: !0
+    }
+  },
+  methods: {
+    getEmojiData() {
+      this.emojiData = x(this.code);
+    },
+    imageLoaded() {
+      this.imgLoading = !1;
+    },
+    imageErrored() {
+      this.imgLoading = !1;
+    }
+  }
+};
+var I = function() {
+  var e = this, i = e._self._c;
+  return i("span", { class: ["d-emoji", "d-icon", e.emojiSize] }, [i("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: e.imgLoading && e.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", e.emojiSize], attrs: { offset: 0, "shape-option": { shape: "circle", size: "100%" } } }), i("img", { directives: [{ name: "show", rawName: "v-show", value: !e.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", e.emojiSize, e.imgClass], attrs: { "aria-label": e.emojiLabel, alt: e.emojiAlt, title: e.emojiLabel, src: e.emojiSrc }, on: { load: e.imageLoaded, error: e.imageErrored } })], 1);
+}, z = [], P = /* @__PURE__ */ D(
+  C,
+  I,
+  z,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const M = P.exports;
+export {
+  M as D,
+  f as a,
+  j as b,
+  d as c,
+  u as d,
+  _ as e,
+  h as f,
+  g,
+  r as h,
+  L as i,
+  F as j,
+  J as k,
+  W as l,
+  p as m,
+  k as n,
+  x as o,
+  B as p,
+  A as q,
+  K as r,
+  T as s,
+  b as u,
+  w as v
+};
+//# sourceMappingURL=index-o4OMWMuv.js.map