@dialpad/dialtone 9.71.0-beta.1 → 9.71.0

package/dist/vue3/components/list_item/list_item.vue.cjs

@@ -0,0 +1,211 @@
+"use strict";
+const list_item_constants = require("./list_item_constants.cjs");
+const common_utils = require("../../common/utils.cjs");
+const vue = require("vue");
+;/* empty css                 */
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const item_layout = require("../item_layout/item_layout.vue.cjs");
+const icon = require("../icon/icon.vue.cjs");
+const ROLES = ["listitem", "menuitem", "option"];
+const _sfc_main = {
+  name: "DtListItem",
+  components: {
+    DtItemLayout: item_layout,
+    DtIcon: icon
+  },
+  /**
+   * 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: [
+    /**
+     * 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",
+    /**
+     * Mouse down event
+     *
+     * @event mousedown
+     */
+    "mousedown"
+  ],
+  data() {
+    return {
+      injected: false,
+      mouseHighlighted: false
+    };
+  },
+  computed: {
+    listItemType() {
+      switch (this.type) {
+        case list_item_constants.LIST_ITEM_TYPES.DEFAULT:
+          return item_layout;
+        default:
+          return null;
+      }
+    },
+    listItemListeners() {
+      return {
+        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;
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.elementType), vue.mergeProps({
+    id: $props.id,
+    class: ["dt-list-item", {
+      "dt-list-item--focusable": $options.isFocusable,
+      "dt-list-item--highlighted": $options.isHighlighted,
+      "dt-list-item--static": !$options.isHoverable
+    }],
+    tabindex: $options.isFocusable ? 0 : -1,
+    role: $props.role,
+    "aria-selected": $props.role === "listitem" ? void 0 : $options.isHighlighted
+  }, vue.toHandlers($options.listItemListeners)), {
+    default: vue.withCtx(() => [
+      $options.listItemType ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.listItemType), { key: 0 }, vue.createSlots({ _: 2 }, [
+        vue.renderList(_ctx.$slots, (_, slotName) => {
+          return {
+            name: slotName,
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, slotName)
+            ])
+          };
+        }),
+        $props.selected ? {
+          name: "selected",
+          fn: vue.withCtx(() => [
+            vue.createVNode(_component_dt_icon, {
+              name: "check",
+              size: "400",
+              class: "dt-list-item--selected-icon"
+            })
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1024)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
+    ]),
+    _: 3
+  }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
+}
+const DtListItem = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = DtListItem;
+//# sourceMappingURL=list_item.vue.cjs.map

package/dist/vue3/components/list_item/list_item.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"list_item.vue.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/components/list_item/list_item.vue.js

@@ -0,0 +1,212 @@
+import { LIST_ITEM_TYPES, LIST_ITEM_NAVIGATION_TYPES } from "./list_item_constants.js";
+import utils from "../../common/utils.js";
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, mergeProps, toHandlers, withCtx, createSlots, renderList, renderSlot, createVNode } from "vue";
+/* empty css               */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+import DtItemLayout from "../item_layout/item_layout.vue.js";
+import DtIcon from "../icon/icon.vue.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: [
+    /**
+     * 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",
+    /**
+     * Mouse down event
+     *
+     * @event mousedown
+     */
+    "mousedown"
+  ],
+  data() {
+    return {
+      injected: false,
+      mouseHighlighted: false
+    };
+  },
+  computed: {
+    listItemType() {
+      switch (this.type) {
+        case LIST_ITEM_TYPES.DEFAULT:
+          return DtItemLayout;
+        default:
+          return null;
+      }
+    },
+    listItemListeners() {
+      return {
+        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;
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = resolveComponent("dt-icon");
+  return openBlock(), createBlock(resolveDynamicComponent($props.elementType), mergeProps({
+    id: $props.id,
+    class: ["dt-list-item", {
+      "dt-list-item--focusable": $options.isFocusable,
+      "dt-list-item--highlighted": $options.isHighlighted,
+      "dt-list-item--static": !$options.isHoverable
+    }],
+    tabindex: $options.isFocusable ? 0 : -1,
+    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 })
+    ]),
+    _: 3
+  }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
+}
+const DtListItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtListItem as default
+};
+//# sourceMappingURL=list_item.vue.js.map

package/dist/vue3/components/list_item/list_item.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list_item.vue.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":";;;;;;;AAmDA,MAAM,QAAQ,CAAC,YAAY,YAAY,QAAQ;AAM/C,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA;AAAA;AAAA;AAAA,EAKD,QAAQ;AAAA,IACN,aAAa,EAAE,SAAS,KAAM;AAAA,EAC/B;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAO,MAAM,gBAAiB;AAAA,MAAG;AAAA,IAC/C;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAU,MAAO,SAAS,IAAI;AAAA,IAC3C;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS,gBAAgB;AAAA,MACzB,WAAW,CAAC,MAAM,OAAO,OAAO,eAAe,EAAE,SAAS,CAAC;AAAA,IAC5D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS,2BAA2B;AAAA,MACpC,WAAW,CAAC,MAAM,OAAO,OAAO,0BAA0B,EAAE,SAAS,CAAC;AAAA,IACvE;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,UAAU;AAAA,MACV,kBAAkB;AAAA;EAErB;AAAA,EAED,UAAU;AAAA,IACR,eAAgB;AACd,cAAQ,KAAK,MAAI;AAAA,QACf,KAAK,gBAAgB;AACnB,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACX;AAAA,IACD;AAAA,IAED,oBAAqB;AACnB,aAAO;AAAA,QACL,SAAS,WAAS;AAChB,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,MAAM,KAAK,YAAW,CAAE,GAAG;AACzD,iBAAK,QAAQ,KAAK;AAAA,UACpB;AACA,eAAK,MAAM,WAAW,KAAK;AAAA,QAC5B;AAAA,QAED,WAAW,WAAS;AAClB,eAAK,aAAa,KAAK;AACvB,eAAK,MAAM,aAAa,KAAK;AAAA,QAC9B;AAAA,QAED,YAAY,WAAS;AACnB,eAAK,aAAa,KAAK;AACvB,eAAK,MAAM,cAAc,KAAK;AAAA,QAC/B;AAAA;IAEJ;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAiB;AACf,UAAI,KAAK,aAAa;AACpB,eAAO,KAAK,eAAe,KAAK,YAAW,IAAK,KAAK,OAAO,KAAK,gBAAgB,KAAK;AAAA,MACxF;AACA,aAAO;AAAA,IACR;AAAA,IAED,cAAe;AAEb,aAAO,KAAK,mBAAmB,2BAA2B;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA,IAKD,cAAe;AACb,aAAO,KAAK,mBAAmB,2BAA2B;AAAA,IAC3D;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,QAAS,GAAG;AAGV,WAAK,MAAM,SAAS,CAAC;AAAA,IACtB;AAAA,IAED,eAAgB;AACd,WAAK,mBAAmB;AAAA,IACzB;AAAA,IAED,eAAgB;AACd,WAAK,mBAAmB;AAAA,IACzB;AAAA,EACF;AACH;;;sBA9OEA,YAqCYC,wBApCL,OAAW,WAAA,GADlBC,WAqCY;AAAA,IAnCT,IAAI,OAAE;AAAA,IACN,OAAK,CAAA,gBAAA;AAAA,iCAAsD,SAAW;AAAA,mCAAqC,SAAa;AAAA,+BAAiC,SAAW;AAAA;IAKpK,UAAU,SAAW,cAAA,IAAA;AAAA,IACrB,MAAM,OAAI;AAAA,IACV,iBAAe,OAAA,SAAsB,aAAA,SAAY,SAAa;AAAA,EAC/D,GAAAC,WAAM,SAAiB,iBAAA,CAAA,GAAA;AAAA,qBAEvB,MAqBY;AAAA,MAnBJ,SAAY,gBAFpBC,UAAA,GAAAJ,YAqBYC,wBApBL,SAAY,YAAA,GAAA,EAAA,KAAA,EAAA,GAAAI,YAAA,EAAA,GAAA,EAAA,GAAA;AAAA,mBAIS,KAAM,QAAA,CAAtB,GAAG,aAAQ;;kBAClB;AAAA,wBAGD,MAAyB;AAAA,cAAzBC,WAAyB,aAAZ,QAAQ;AAAA;;;QAGf,OAAQ;gBACb;AAAA,sBAED,MAIE;AAAA,YAJFC,YAIE,oBAAA;AAAA,cAHA,MAAK;AAAA,cACL,MAAK;AAAA,cACL,OAAM;AAAA;;;;mBAKZD,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA;AAAA;;;;;"}

package/dist/vue3/components/list_item/list_item_constants.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const LIST_ITEM_TYPES = {
+  DEFAULT: "default",
+  CUSTOM: "custom"
+};
+const LIST_ITEM_NAVIGATION_TYPES = {
+  ARROW_KEYS: "arrow-keys",
+  TAB: "tab",
+  NONE: "none"
+};
+exports.LIST_ITEM_NAVIGATION_TYPES = LIST_ITEM_NAVIGATION_TYPES;
+exports.LIST_ITEM_TYPES = LIST_ITEM_TYPES;
+//# sourceMappingURL=list_item_constants.cjs.map

package/dist/vue3/components/list_item/list_item_constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"list_item_constants.cjs","sources":["../../../components/list_item/list_item_constants.js"],"sourcesContent":["export const LIST_ITEM_TYPES = {\n  DEFAULT: 'default',\n  CUSTOM: 'custom',\n};\n\nexport const LIST_ITEM_NAVIGATION_TYPES = {\n  ARROW_KEYS: 'arrow-keys',\n  TAB: 'tab',\n  NONE: 'none',\n};\n\nexport default {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,kBAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,QAAQ;AACV;AAEY,MAAC,6BAA6B;AAAA,EACxC,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,MAAM;AACR;;;"}

package/dist/vue3/components/list_item/list_item_constants.js

@@ -0,0 +1,14 @@
+const LIST_ITEM_TYPES = {
+  DEFAULT: "default",
+  CUSTOM: "custom"
+};
+const LIST_ITEM_NAVIGATION_TYPES = {
+  ARROW_KEYS: "arrow-keys",
+  TAB: "tab",
+  NONE: "none"
+};
+export {
+  LIST_ITEM_NAVIGATION_TYPES,
+  LIST_ITEM_TYPES
+};
+//# sourceMappingURL=list_item_constants.js.map

package/dist/vue3/components/list_item/list_item_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list_item_constants.js","sources":["../../../components/list_item/list_item_constants.js"],"sourcesContent":["export const LIST_ITEM_TYPES = {\n  DEFAULT: 'default',\n  CUSTOM: 'custom',\n};\n\nexport const LIST_ITEM_NAVIGATION_TYPES = {\n  ARROW_KEYS: 'arrow-keys',\n  TAB: 'tab',\n  NONE: 'none',\n};\n\nexport default {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n};\n"],"names":[],"mappings":"AAAY,MAAC,kBAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,QAAQ;AACV;AAEY,MAAC,6BAA6B;AAAA,EACxC,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,MAAM;AACR;"}

package/dist/vue3/components/list_item_group/list_item_group.vue.cjs

@@ -0,0 +1,66 @@
+"use strict";
+const common_utils = require("../../common/utils.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const _sfc_main = {
+  name: "DtListItemGroup",
+  props: {
+    /**
+     * Id of the List Item Group
+     */
+    id: {
+      type: String,
+      default() {
+        return common_utils.getUniqueString();
+      }
+    },
+    /**
+     * List's heading.
+     */
+    heading: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class to style the heading
+     */
+    headingClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class for the wrapper list element.
+     */
+    listClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  }
+};
+const _hoisted_1 = ["id", "aria-labelledby"];
+const _hoisted_2 = ["id"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("ul", {
+    id: $props.id,
+    class: vue.normalizeClass(["d-list-item-group", $props.listClass]),
+    role: "group",
+    "data-qa": "dt-dropdown-list-wrapper",
+    "aria-labelledby": `${$props.id}-heading`
+  }, [
+    $props.heading ? (vue.openBlock(), vue.createElementBlock("li", {
+      key: 0,
+      id: `${$props.id}-heading`,
+      role: "presentation",
+      "data-qa": "dt-dropdown-list-heading",
+      class: vue.normalizeClass(["dt-dropdown-list--header", $props.headingClass])
+    }, [
+      vue.renderSlot(_ctx.$slots, "headingSlot", {}, () => [
+        vue.createTextVNode(vue.toDisplayString($props.heading), 1)
+      ])
+    ], 10, _hoisted_2)) : vue.createCommentVNode("", true),
+    vue.renderSlot(_ctx.$slots, "default")
+  ], 10, _hoisted_1);
+}
+const list_item_group = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = list_item_group;
+//# sourceMappingURL=list_item_group.vue.cjs.map

package/dist/vue3/components/list_item_group/list_item_group.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"list_item_group.vue.cjs","sources":["../../../components/list_item_group/list_item_group.vue"],"sourcesContent":["<template>\n  <ul\n    :id=\"id\"\n    :class=\"['d-list-item-group', listClass]\"\n    role=\"group\"\n    data-qa=\"dt-dropdown-list-wrapper\"\n    :aria-labelledby=\"`${id}-heading`\"\n  >\n    <li\n      v-if=\"heading\"\n      :id=\"`${id}-heading`\"\n      role=\"presentation\"\n      data-qa=\"dt-dropdown-list-heading\"\n      :class=\"['dt-dropdown-list--header', headingClass]\"\n    >\n      <!-- @slot Slot for heading, will override heading prop. -->\n      <slot name=\"headingSlot\">\n        {{ heading }}\n      </slot>\n    </li>\n    <!-- @slot Slot for the list component -->\n    <slot />\n  </ul>\n</template>\n\n<script>\nimport {} from './list_item_group_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtListItemGroup',\n\n  props: {\n    /**\n     * Id of the List Item Group\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * List's heading.\n     */\n    heading: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class to style the heading\n     */\n    headingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["getUniqueString","_createElementBlock","_renderSlot"],"mappings":";;;;AA6BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAOA,aAAe,gBAAA;AAAA,MAAK;AAAA,IACzC;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AACH;;;;0BAhEEC,IAqBK,mBAAA,MAAA;AAAA,IApBF,IAAI,OAAE;AAAA,IACN,gDAA6B,OAAS,SAAA,CAAA;AAAA,IACvC,MAAK;AAAA,IACL,WAAQ;AAAA,IACP,sBAAoB,OAAE,EAAA;AAAA;IAGf,OAAO,4BADfA,IAWK,mBAAA,MAAA;AAAA;MATF,OAAO,OAAE,EAAA;AAAA,MACV,MAAK;AAAA,MACL,WAAQ;AAAA,MACP,uDAAoC,OAAY,YAAA,CAAA;AAAA;MAGjDC,IAAAA,WAEO,gCAFP,MAEO;AAAA,gDADF,OAAO,OAAA,GAAA,CAAA;AAAA;;IAIdA,eAAQ,KAAA,QAAA,SAAA;AAAA;;;;"}

package/dist/vue3/components/list_item_group/list_item_group.vue.js

@@ -0,0 +1,67 @@
+import { getUniqueString } from "../../common/utils.js";
+import { openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "DtListItemGroup",
+  props: {
+    /**
+     * Id of the List Item Group
+     */
+    id: {
+      type: String,
+      default() {
+        return getUniqueString();
+      }
+    },
+    /**
+     * List's heading.
+     */
+    heading: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class to style the heading
+     */
+    headingClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class for the wrapper list element.
+     */
+    listClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  }
+};
+const _hoisted_1 = ["id", "aria-labelledby"];
+const _hoisted_2 = ["id"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("ul", {
+    id: $props.id,
+    class: normalizeClass(["d-list-item-group", $props.listClass]),
+    role: "group",
+    "data-qa": "dt-dropdown-list-wrapper",
+    "aria-labelledby": `${$props.id}-heading`
+  }, [
+    $props.heading ? (openBlock(), createElementBlock("li", {
+      key: 0,
+      id: `${$props.id}-heading`,
+      role: "presentation",
+      "data-qa": "dt-dropdown-list-heading",
+      class: normalizeClass(["dt-dropdown-list--header", $props.headingClass])
+    }, [
+      renderSlot(_ctx.$slots, "headingSlot", {}, () => [
+        createTextVNode(toDisplayString($props.heading), 1)
+      ])
+    ], 10, _hoisted_2)) : createCommentVNode("", true),
+    renderSlot(_ctx.$slots, "default")
+  ], 10, _hoisted_1);
+}
+const list_item_group = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  list_item_group as default
+};
+//# sourceMappingURL=list_item_group.vue.js.map

package/dist/vue3/components/list_item_group/list_item_group.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list_item_group.vue.js","sources":["../../../components/list_item_group/list_item_group.vue"],"sourcesContent":["<template>\n  <ul\n    :id=\"id\"\n    :class=\"['d-list-item-group', listClass]\"\n    role=\"group\"\n    data-qa=\"dt-dropdown-list-wrapper\"\n    :aria-labelledby=\"`${id}-heading`\"\n  >\n    <li\n      v-if=\"heading\"\n      :id=\"`${id}-heading`\"\n      role=\"presentation\"\n      data-qa=\"dt-dropdown-list-heading\"\n      :class=\"['dt-dropdown-list--header', headingClass]\"\n    >\n      <!-- @slot Slot for heading, will override heading prop. -->\n      <slot name=\"headingSlot\">\n        {{ heading }}\n      </slot>\n    </li>\n    <!-- @slot Slot for the list component -->\n    <slot />\n  </ul>\n</template>\n\n<script>\nimport {} from './list_item_group_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtListItemGroup',\n\n  props: {\n    /**\n     * Id of the List Item Group\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * List's heading.\n     */\n    heading: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class to style the heading\n     */\n    headingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;AA6BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAO,gBAAe;AAAA,MAAK;AAAA,IACzC;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AACH;;;;sBAhEEA,mBAqBK,MAAA;AAAA,IApBF,IAAI,OAAE;AAAA,IACN,4CAA6B,OAAS,SAAA,CAAA;AAAA,IACvC,MAAK;AAAA,IACL,WAAQ;AAAA,IACP,sBAAoB,OAAE,EAAA;AAAA;IAGf,OAAO,wBADfA,mBAWK,MAAA;AAAA;MATF,OAAO,OAAE,EAAA;AAAA,MACV,MAAK;AAAA,MACL,WAAQ;AAAA,MACP,mDAAoC,OAAY,YAAA,CAAA;AAAA;MAGjDC,WAEO,gCAFP,MAEO;AAAA,wCADF,OAAO,OAAA,GAAA,CAAA;AAAA;;IAIdA,WAAQ,KAAA,QAAA,SAAA;AAAA;;;"}