@dialpad/dialtone 9.70.1 → 9.71.0-beta.2

package/dist/vue2/lib/list-item.cjs

@@ -1,205 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const list_item_constants = require("../chunks/list_item_constants-EiqkqZvP.js");
-const common_utils = require("../common/utils.cjs");
-const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
-const lib_itemLayout = require("./item-layout.cjs");
-const lib_icon = require("./icon.cjs");
-require("../common/constants.cjs");
-require("vue");
-require("@dialpad/dialtone-icons/vue2");
-require("../chunks/icon_constants-da57m7BZ.js");
-require("@dialpad/dialtone-icons/icons.js");
-const ROLES = ["listitem", "menuitem", "option"];
-const _sfc_main = {
-  name: "DtListItem",
-  components: {
-    DtItemLayout: lib_itemLayout.DtItemLayout,
-    DtIcon: lib_icon.DtIcon
-  },
-  /**
-   * Value provided from keyboard_list_navigation.js using id prop.
-   */
-  inject: {
-    highlightId: { default: null }
-  },
-  props: {
-    /**
-     * Id for the item.
-     */
-    id: {
-      type: String,
-      default() {
-        return common_utils.default.getUniqueString();
-      }
-    },
-    /**
-     * String to use for the item's role.
-     */
-    role: {
-      type: String,
-      default: "listitem",
-      validator: (role) => ROLES.includes(role)
-    },
-    /**
-     * HTML element type (tag name) of the content wrapper element.
-     */
-    elementType: {
-      type: String,
-      default: "li"
-    },
-    /**
-     * The type of child list item to use.
-     * @values default, custom
-     */
-    type: {
-      type: String,
-      default: list_item_constants.LIST_ITEM_TYPES.DEFAULT,
-      validator: (t) => Object.values(list_item_constants.LIST_ITEM_TYPES).includes(t)
-    },
-    /**
-     * The type of navigation that this component should support.
-     * - "arrow-keys" for items that are navigated with UP/DOWN keys.
-     * - "tab" for items that are navigated using the TAB key.
-     * - "none" for static items that are not interactive.
-     * @values arrow-keys, tab, none
-     */
-    navigationType: {
-      type: String,
-      default: list_item_constants.LIST_ITEM_NAVIGATION_TYPES.NONE,
-      validator: (t) => Object.values(list_item_constants.LIST_ITEM_NAVIGATION_TYPES).includes(t)
-    },
-    /**
-     * Applies selected styles to the list item
-     */
-    selected: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: [
-    /**
-     * Native click event
-     *
-     * @event click
-     * @type {PointerEvent | KeyboardEvent}
-     */
-    "click",
-    /**
-     * Key down event
-     *
-     * @event keydown
-     * @type {KeyboardEvent}
-     */
-    "keydown",
-    /**
-     * Native mouse move event
-     *
-     * @event mousemove
-     * @type {MouseEvent}
-     */
-    "mousemove",
-    /**
-     * Native mouse leave event
-     *
-     * @event mouseleave
-     * @type {MouseEvent}
-     */
-    "mouseleave"
-  ],
-  data() {
-    return {
-      injected: false,
-      mouseHighlighted: false
-    };
-  },
-  computed: {
-    listItemType() {
-      switch (this.type) {
-        case list_item_constants.LIST_ITEM_TYPES.DEFAULT:
-          return lib_itemLayout.DtItemLayout;
-        default:
-          return null;
-      }
-    },
-    listItemListeners() {
-      return {
-        ...this.$listeners,
-        keydown: (event) => {
-          if (["enter", "space"].includes(event.code.toLowerCase())) {
-            this.onClick(event);
-          }
-          this.$emit("keydown", event);
-        },
-        mousemove: (event) => {
-          this.onMouseHover(event);
-          this.$emit("mousemove", event);
-        },
-        mouseleave: (event) => {
-          this.onMouseLeave(event);
-          this.$emit("mouseleave", event);
-        }
-      };
-    },
-    /**
-     * For keyboard navigation, whether this item is currently highlighted.
-     * An injected highlightId will override the default mouseover highlight.
-     */
-    isHighlighted() {
-      if (this.isHoverable) {
-        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;
-      }
-      return false;
-    },
-    isFocusable() {
-      return this.navigationType === list_item_constants.LIST_ITEM_NAVIGATION_TYPES.TAB;
-    },
-    /**
-     * Whether to apply hover styles.
-     */
-    isHoverable() {
-      return this.navigationType !== list_item_constants.LIST_ITEM_NAVIGATION_TYPES.NONE;
-    }
-  },
-  methods: {
-    onClick(e) {
-      this.$emit("click", e);
-    },
-    onMouseHover() {
-      this.mouseHighlighted = true;
-    },
-    onMouseLeave() {
-      this.mouseHighlighted = false;
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c(_vm.elementType, _vm._g({ tag: "component", class: ["dt-list-item", {
-    "dt-list-item--focusable": _vm.isFocusable,
-    "dt-list-item--highlighted": _vm.isHighlighted,
-    "dt-list-item--static": !_vm.isHoverable
-  }], attrs: { "id": _vm.id, "tabindex": _vm.isFocusable ? 0 : -1, "role": _vm.role, "aria-selected": _vm.role === "listitem" ? void 0 : _vm.isHighlighted } }, _vm.listItemListeners), [_vm.listItemType ? _c(_vm.listItemType, { tag: "component", scopedSlots: _vm._u([_vm._l(_vm.$slots, function(_, slotName) {
-    return { key: slotName, fn: function() {
-      return [_vm._t(slotName)];
-    }, proxy: true };
-  }), _vm.selected ? { key: "selected", fn: function() {
-    return [_c("dt-icon", { staticClass: "dt-list-item--selected-icon", attrs: { "name": "check", "size": "400" } })];
-  }, proxy: true } : null], null, true) }) : _vm._t("default")], 2);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const DtListItem = __component__.exports;
+const list_item = require("../components/list_item/list_item.vue.cjs");
+const list_item_constants = require("../components/list_item/list_item_constants.cjs");
+exports.DtListItem = list_item;
 exports.LIST_ITEM_NAVIGATION_TYPES = list_item_constants.LIST_ITEM_NAVIGATION_TYPES;
 exports.LIST_ITEM_TYPES = list_item_constants.LIST_ITEM_TYPES;
-exports.DtListItem = DtListItem;
 //# sourceMappingURL=list-item.cjs.map

package/dist/vue2/lib/list-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.cjs","sources":["../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['dt-list-item', {\n      'dt-list-item--focusable': isFocusable,\n      'dt-list-item--highlighted': isHighlighted,\n      'dt-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon\n          name=\"check\"\n          size=\"400\"\n          class=\"dt-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIcon } from '@/components/icon';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIcon,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        ...this.$listeners,\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item {\n  list-style: none;\n  background-color: var(--dt-action-color-background-muted-default);\n\n  &:not(.dt-list-item--static) {\n    cursor: pointer;\n    border-radius: var(--dt-size-radius-300);\n  }\n\n  &--focusable:focus,\n  &--focusable:focus-within,\n  &--highlighted {\n    background-color: var(--dt-action-color-background-muted-hover);\n  }\n\n  &--highlighted:active {\n    background-color: var(--dt-action-color-background-muted-active);\n  }\n\n  &--selected-icon {\n    margin-left: var(--dt-space-400);\n  }\n\n  :focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n}\n</style>\n"],"names":["DtItemLayout","DtIcon","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES"],"mappings":"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"}
+{"version":3,"file":"list-item.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/vue2/lib/list-item.js

@@ -1,204 +1,7 @@
-import { LIST_ITEM_TYPES, LIST_ITEM_NAVIGATION_TYPES } from "../chunks/list_item_constants-u1xcN9Dd.js";
-import utils from "../common/utils.js";
-import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
-import { DtItemLayout } from "./item-layout.js";
-import { DtIcon } from "./icon.js";
-import "../common/constants.js";
-import "vue";
-import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-H9ahUVCG.js";
-import "@dialpad/dialtone-icons/icons.js";
-const ROLES = ["listitem", "menuitem", "option"];
-const _sfc_main = {
-  name: "DtListItem",
-  components: {
-    DtItemLayout,
-    DtIcon
-  },
-  /**
-   * Value provided from keyboard_list_navigation.js using id prop.
-   */
-  inject: {
-    highlightId: { default: null }
-  },
-  props: {
-    /**
-     * Id for the item.
-     */
-    id: {
-      type: String,
-      default() {
-        return utils.getUniqueString();
-      }
-    },
-    /**
-     * String to use for the item's role.
-     */
-    role: {
-      type: String,
-      default: "listitem",
-      validator: (role) => ROLES.includes(role)
-    },
-    /**
-     * HTML element type (tag name) of the content wrapper element.
-     */
-    elementType: {
-      type: String,
-      default: "li"
-    },
-    /**
-     * The type of child list item to use.
-     * @values default, custom
-     */
-    type: {
-      type: String,
-      default: LIST_ITEM_TYPES.DEFAULT,
-      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t)
-    },
-    /**
-     * The type of navigation that this component should support.
-     * - "arrow-keys" for items that are navigated with UP/DOWN keys.
-     * - "tab" for items that are navigated using the TAB key.
-     * - "none" for static items that are not interactive.
-     * @values arrow-keys, tab, none
-     */
-    navigationType: {
-      type: String,
-      default: LIST_ITEM_NAVIGATION_TYPES.NONE,
-      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t)
-    },
-    /**
-     * Applies selected styles to the list item
-     */
-    selected: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: [
-    /**
-     * Native click event
-     *
-     * @event click
-     * @type {PointerEvent | KeyboardEvent}
-     */
-    "click",
-    /**
-     * Key down event
-     *
-     * @event keydown
-     * @type {KeyboardEvent}
-     */
-    "keydown",
-    /**
-     * Native mouse move event
-     *
-     * @event mousemove
-     * @type {MouseEvent}
-     */
-    "mousemove",
-    /**
-     * Native mouse leave event
-     *
-     * @event mouseleave
-     * @type {MouseEvent}
-     */
-    "mouseleave"
-  ],
-  data() {
-    return {
-      injected: false,
-      mouseHighlighted: false
-    };
-  },
-  computed: {
-    listItemType() {
-      switch (this.type) {
-        case LIST_ITEM_TYPES.DEFAULT:
-          return DtItemLayout;
-        default:
-          return null;
-      }
-    },
-    listItemListeners() {
-      return {
-        ...this.$listeners,
-        keydown: (event) => {
-          if (["enter", "space"].includes(event.code.toLowerCase())) {
-            this.onClick(event);
-          }
-          this.$emit("keydown", event);
-        },
-        mousemove: (event) => {
-          this.onMouseHover(event);
-          this.$emit("mousemove", event);
-        },
-        mouseleave: (event) => {
-          this.onMouseLeave(event);
-          this.$emit("mouseleave", event);
-        }
-      };
-    },
-    /**
-     * For keyboard navigation, whether this item is currently highlighted.
-     * An injected highlightId will override the default mouseover highlight.
-     */
-    isHighlighted() {
-      if (this.isHoverable) {
-        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;
-      }
-      return false;
-    },
-    isFocusable() {
-      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;
-    },
-    /**
-     * Whether to apply hover styles.
-     */
-    isHoverable() {
-      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;
-    }
-  },
-  methods: {
-    onClick(e) {
-      this.$emit("click", e);
-    },
-    onMouseHover() {
-      this.mouseHighlighted = true;
-    },
-    onMouseLeave() {
-      this.mouseHighlighted = false;
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c(_vm.elementType, _vm._g({ tag: "component", class: ["dt-list-item", {
-    "dt-list-item--focusable": _vm.isFocusable,
-    "dt-list-item--highlighted": _vm.isHighlighted,
-    "dt-list-item--static": !_vm.isHoverable
-  }], attrs: { "id": _vm.id, "tabindex": _vm.isFocusable ? 0 : -1, "role": _vm.role, "aria-selected": _vm.role === "listitem" ? void 0 : _vm.isHighlighted } }, _vm.listItemListeners), [_vm.listItemType ? _c(_vm.listItemType, { tag: "component", scopedSlots: _vm._u([_vm._l(_vm.$slots, function(_, slotName) {
-    return { key: slotName, fn: function() {
-      return [_vm._t(slotName)];
-    }, proxy: true };
-  }), _vm.selected ? { key: "selected", fn: function() {
-    return [_c("dt-icon", { staticClass: "dt-list-item--selected-icon", attrs: { "name": "check", "size": "400" } })];
-  }, proxy: true } : null], null, true) }) : _vm._t("default")], 2);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const DtListItem = __component__.exports;
+import { default as default2 } from "../components/list_item/list_item.vue.js";
+import { LIST_ITEM_NAVIGATION_TYPES, LIST_ITEM_TYPES } from "../components/list_item/list_item_constants.js";
 export {
-  DtListItem,
+  default2 as DtListItem,
   LIST_ITEM_NAVIGATION_TYPES,
   LIST_ITEM_TYPES
 };

package/dist/vue2/lib/list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sources":["../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['dt-list-item', {\n      'dt-list-item--focusable': isFocusable,\n      'dt-list-item--highlighted': isHighlighted,\n      'dt-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon\n          name=\"check\"\n          size=\"400\"\n          class=\"dt-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIcon } from '@/components/icon';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIcon,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        ...this.$listeners,\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item {\n  list-style: none;\n  background-color: var(--dt-action-color-background-muted-default);\n\n  &:not(.dt-list-item--static) {\n    cursor: pointer;\n    border-radius: var(--dt-size-radius-300);\n  }\n\n  &--focusable:focus,\n  &--focusable:focus-within,\n  &--highlighted {\n    background-color: var(--dt-action-color-background-muted-hover);\n  }\n\n  &--highlighted:active {\n    background-color: var(--dt-action-color-background-muted-active);\n  }\n\n  &--selected-icon {\n    margin-left: var(--dt-space-400);\n  }\n\n  :focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n}\n</style>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"list-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}