@dialpad/dialtone 9.66.0 → 9.67.0

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.cjs","sources":["../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<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     * 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     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\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        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      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\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":["ROLES","_sfc_main","name","components","DtItemLayout","DtIcon","inject","highlightId","default","props","id","type","String","utils","getUniqueString","role","validator","includes","elementType","LIST_ITEM_TYPES","DEFAULT","t","Object","values","navigationType","LIST_ITEM_NAVIGATION_TYPES","NONE","selected","Boolean","emits","data","injected","mouseHighlighted","computed","listItemType","listItemListeners","keydown","event","code","toLowerCase","onClick","$emit","mousemove","onMouseHover","mouseleave","onMouseLeave","isHighlighted","isHoverable","isFocusable","TAB","methods","e","_createBlock","_resolveDynamicComponent","$props","_mergeProps","class","$options","tabindex","undefined","_toHandlers","_openBlock","key","_createSlots","_","_ctx","$slots","slotName","_renderSlot","_createVNode","_component_dt_icon","size"],"mappings":"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"}
+{"version":3,"file":"list-item.cjs","sources":["../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<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     * 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     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\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        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      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\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","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_openBlock","_createSlots","_renderSlot","_createVNode"],"mappings":"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"}

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

@@ -6,7 +6,7 @@ import { DtItemLayout } from "./item-layout.js";
 import { DtIcon } from "./icon.js";
 import "../common/constants.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-gIQj4mf7.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 const ROLES = ["listitem", "menuitem", "option"];
 const _sfc_main = {
@@ -19,9 +19,7 @@ const _sfc_main = {
    * Value provided from keyboard_list_navigation.js using id prop.
    */
   inject: {
-    highlightId: {
-      default: null
-    }
+    highlightId: { default: null }
   },
   props: {
     /**
@@ -184,26 +182,29 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     role: $props.role,
     "aria-selected": $props.role === "listitem" ? void 0 : $options.isHighlighted
   }, toHandlers($options.listItemListeners)), {
-    default: withCtx(() => [$options.listItemType ? (openBlock(), createBlock(resolveDynamicComponent($options.listItemType), {
-      key: 0
-    }, createSlots({
-      _: 2
-    }, [renderList(_ctx.$slots, (_, slotName) => {
-      return {
-        name: slotName,
-        fn: withCtx(() => [renderSlot(_ctx.$slots, slotName)])
-      };
-    }), $props.selected ? {
-      name: "selected",
-      fn: withCtx(() => [createVNode(_component_dt_icon, {
-        name: "check",
-        size: "400",
-        class: "dt-list-item--selected-icon"
-      })]),
-      key: "0"
-    } : void 0]), 1024)) : renderSlot(_ctx.$slots, "default", {
-      key: 1
-    })]),
+    default: withCtx(() => [
+      $options.listItemType ? (openBlock(), createBlock(resolveDynamicComponent($options.listItemType), { key: 0 }, createSlots({ _: 2 }, [
+        renderList(_ctx.$slots, (_, slotName) => {
+          return {
+            name: slotName,
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, slotName)
+            ])
+          };
+        }),
+        $props.selected ? {
+          name: "selected",
+          fn: withCtx(() => [
+            createVNode(_component_dt_icon, {
+              name: "check",
+              size: "400",
+              class: "dt-list-item--selected-icon"
+            })
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1024)) : renderSlot(_ctx.$slots, "default", { key: 1 })
+    ]),
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sources":["../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<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     * 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     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\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        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      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\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":["ROLES","_sfc_main","name","components","DtItemLayout","DtIcon","inject","highlightId","default","props","id","type","String","utils","getUniqueString","role","validator","includes","elementType","LIST_ITEM_TYPES","DEFAULT","t","Object","values","navigationType","LIST_ITEM_NAVIGATION_TYPES","NONE","selected","Boolean","emits","data","injected","mouseHighlighted","computed","listItemType","listItemListeners","keydown","event","code","toLowerCase","onClick","$emit","mousemove","onMouseHover","mouseleave","onMouseLeave","isHighlighted","isHoverable","isFocusable","TAB","methods","e","_createBlock","_resolveDynamicComponent","$props","_mergeProps","class","$options","tabindex","undefined","_toHandlers","_openBlock","key","_createSlots","_","_ctx","$slots","slotName","_renderSlot","_createVNode","_component_dt_icon","size"],"mappings":"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"}
+{"version":3,"file":"list-item.js","sources":["../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<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     * 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     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\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        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      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\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":["_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_openBlock","_createSlots","_renderSlot","_createVNode"],"mappings":"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"}