@dialpad/dialtone-vue 3.120.0 → 3.120.2

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

@@ -1,8 +1,8 @@
-import { getUniqueString as n } from "./utils.js";
-import { openBlock as a, createElementBlock as i, normalizeClass as d, renderSlot as r, createTextVNode as o, toDisplayString as l, createCommentVNode as s } from "vue";
-import { _ as g } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import "./constants.js";
-const c = {
+import { getUniqueString } from "../common/utils.js";
+import { openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import "../common/constants.js";
+const _sfc_main = {
   name: "DtListItemGroup",
   props: {
     /**
@@ -11,7 +11,7 @@ const c = {
     id: {
       type: String,
       default() {
-        return n();
+        return getUniqueString();
       }
     },
     /**
@@ -36,31 +36,33 @@ const c = {
       default: ""
     }
   }
-}, m = ["id", "aria-labelledby"], u = ["id"];
-function p(e, h, t, _, f, y) {
-  return a(), i("ul", {
-    id: t.id,
-    class: d(["d-list-item-group", t.listClass]),
+};
+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": `${t.id}-heading`
+    "aria-labelledby": `${$props.id}-heading`
   }, [
-    t.heading ? (a(), i("li", {
+    $props.heading ? (openBlock(), createElementBlock("li", {
       key: 0,
-      id: `${t.id}-heading`,
+      id: `${$props.id}-heading`,
       role: "presentation",
       "data-qa": "dt-dropdown-list-heading",
-      class: d(["dt-dropdown-list--header", t.headingClass])
+      class: normalizeClass(["dt-dropdown-list--header", $props.headingClass])
     }, [
-      r(e.$slots, "headingSlot", {}, () => [
-        o(l(t.heading), 1)
+      renderSlot(_ctx.$slots, "headingSlot", {}, () => [
+        createTextVNode(toDisplayString($props.heading), 1)
       ])
-    ], 10, u)) : s("", !0),
-    r(e.$slots, "default")
-  ], 10, m);
+    ], 10, _hoisted_2)) : createCommentVNode("", true),
+    renderSlot(_ctx.$slots, "default")
+  ], 10, _hoisted_1);
 }
-const k = /* @__PURE__ */ g(c, [["render", p]]);
+const list_item_group = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  k as DtListItemGroup
+  list_item_group as DtListItemGroup
 };
 //# sourceMappingURL=list-item-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"list-item-group.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":["_sfc_main","getUniqueString","_createElementBlock","$props","_renderSlot","_ctx"],"mappings":";;;;AA6BA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAOC,EAAe;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;;cAhEEC,EAqBK,MAAA;AAAA,IApBF,IAAIC,EAAE;AAAA,IACN,+BAA6BA,EAAS,SAAA,CAAA;AAAA,IACvC,MAAK;AAAA,IACL,WAAQ;AAAA,IACP,sBAAoBA,EAAE,EAAA;AAAA;IAGfA,EAAO,gBADfD,EAWK,MAAA;AAAA;MATF,OAAOC,EAAE,EAAA;AAAA,MACV,MAAK;AAAA,MACL,WAAQ;AAAA,MACP,sCAAoCA,EAAY,YAAA,CAAA;AAAA;MAGjDC,EAEOC,6BAFP,MAEO;AAAA,YADFF,EAAO,OAAA,GAAA,CAAA;AAAA;;IAIdC,EAAQC,EAAA,QAAA,SAAA;AAAA;;;"}
+{"version":3,"file":"list-item-group.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;;;"}

package/dist/lib/list-item.cjs

@@ -1,2 +1,217 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../chunks/list_item_constants-Tsz5CO1m.js"),a=require("./utils.cjs"),t=require("vue"),u=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),o=require("./item-layout.cjs"),d=require("./icon.cjs");require("./constants.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const c=["listitem","menuitem","option"],m={name:"DtListItem",components:{DtItemLayout:o.DtItemLayout,DtIcon:d.DtIcon},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return a.default.getUniqueString()}},role:{type:String,default:"listitem",validator:e=>c.includes(e)},elementType:{type:String,default:"li"},type:{type:String,default:i.L.DEFAULT,validator:e=>Object.values(i.L).includes(e)},navigationType:{type:String,default:i.a.NONE,validator:e=>Object.values(i.a).includes(e)},selected:{type:Boolean,default:!1}},emits:["keydown","mousemove","mouseleave","mousedown"],data(){return{injected:!1,mouseHighlighted:!1}},computed:{listItemType(){switch(this.type){case i.L.DEFAULT:return o.DtItemLayout;default:return null}},listItemListeners(){return{keydown:e=>{["enter","space"].includes(e.code.toLowerCase())&&this.onClick(e),this.$emit("keydown",e)},mousemove:e=>{this.onMouseHover(e),this.$emit("mousemove",e)},mouseleave:e=>{this.onMouseLeave(e),this.$emit("mouseleave",e)}}},isHighlighted(){return this.isHoverable?this.highlightId&&this.highlightId()?this.id===this.highlightId():this.mouseHighlighted:!1},isFocusable(){return this.navigationType===i.a.TAB},isHoverable(){return this.navigationType!==i.a.NONE}},methods:{onClick(e){this.$emit("click",e)},onMouseHover(){this.mouseHighlighted=!0},onMouseLeave(){this.mouseHighlighted=!1}}};function h(e,y,l,f,I,s){const r=t.resolveComponent("dt-icon");return t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.elementType),t.mergeProps({id:l.id,class:["dt-list-item",{"dt-list-item--focusable":s.isFocusable,"dt-list-item--highlighted":s.isHighlighted,"dt-list-item--static":!s.isHoverable}],tabindex:s.isFocusable?0:-1,role:l.role,"aria-selected":l.role==="listitem"?void 0:s.isHighlighted},t.toHandlers(s.listItemListeners)),{default:t.withCtx(()=>[s.listItemType?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(s.listItemType),{key:0},t.createSlots({_:2},[t.renderList(e.$slots,(v,n)=>({name:n,fn:t.withCtx(()=>[t.renderSlot(e.$slots,n)])})),l.selected?{name:"selected",fn:t.withCtx(()=>[t.createVNode(r,{name:"check",size:"400",class:"dt-list-item--selected-icon"})]),key:"0"}:void 0]),1024)):t.renderSlot(e.$slots,"default",{key:1})]),_:3},16,["id","class","tabindex","role","aria-selected"])}const g=u._(m,[["render",h]]);exports.LIST_ITEM_NAVIGATION_TYPES=i.a;exports.LIST_ITEM_TYPES=i.L;exports.DtListItem=g;
+"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 vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const lib_itemLayout = require("./item-layout.cjs");
+const lib_icon = require("./icon.cjs");
+require("../common/constants.cjs");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+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: [
+    /**
+     * 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 lib_itemLayout.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_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._export_sfc(_sfc_main, [["render", _sfc_render]]);
+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/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","DtItemLayout","DtIcon","utils","role","LIST_ITEM_TYPES","t","LIST_ITEM_NAVIGATION_TYPES","event","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_openBlock","_createSlots","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon"],"mappings":"4cAmDA,MAAMA,EAAQ,CAAC,WAAY,WAAY,QAAQ,EAM1CC,EAAU,CACb,KAAM,aAEN,WAAY,cACVC,EAAY,aACZ,OAAAC,EAAM,MACP,EAKD,OAAQ,CACN,YAAa,CAAE,QAAS,IAAM,CAC/B,EAED,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAOC,UAAM,gBAAiB,CAAG,CAC/C,EAKD,KAAM,CACJ,KAAM,OACN,QAAS,WACT,UAAYC,GAAUL,EAAO,SAASK,CAAI,CAC3C,EAKD,YAAa,CACX,KAAM,OACN,QAAS,IACV,EAMD,KAAM,CACJ,KAAM,OACN,QAASC,EAAe,EAAC,QACzB,UAAYC,GAAM,OAAO,OAAOD,GAAe,EAAE,SAASC,CAAC,CAC5D,EASD,eAAgB,CACd,KAAM,OACN,QAASC,EAA0B,EAAC,KACpC,UAAYD,GAAM,OAAO,OAAOC,GAA0B,EAAE,SAASD,CAAC,CACvE,EAKD,SAAU,CACR,KAAM,QACN,QAAS,EACV,CACF,EAED,MAAO,CAOL,UAQA,YAQA,aAOA,WACD,EAED,MAAQ,CACN,MAAO,CACL,SAAU,GACV,iBAAkB,GAErB,EAED,SAAU,CACR,cAAgB,CACd,OAAQ,KAAK,KAAI,CACf,KAAKD,EAAe,EAAC,QACnB,OAAOJ,eACT,QACE,OAAO,IACX,CACD,EAED,mBAAqB,CACnB,MAAO,CACL,QAASO,GAAS,CACZ,CAAC,QAAS,OAAO,EAAE,SAASA,EAAM,KAAK,YAAW,CAAE,GACtD,KAAK,QAAQA,CAAK,EAEpB,KAAK,MAAM,UAAWA,CAAK,CAC5B,EAED,UAAWA,GAAS,CAClB,KAAK,aAAaA,CAAK,EACvB,KAAK,MAAM,YAAaA,CAAK,CAC9B,EAED,WAAYA,GAAS,CACnB,KAAK,aAAaA,CAAK,EACvB,KAAK,MAAM,aAAcA,CAAK,CAC/B,EAEJ,EAMD,eAAiB,CACf,OAAI,KAAK,YACA,KAAK,aAAe,KAAK,YAAW,EAAK,KAAK,KAAO,KAAK,cAAgB,KAAK,iBAEjF,EACR,EAED,aAAe,CAEb,OAAO,KAAK,iBAAmBD,EAA0B,EAAC,GAC3D,EAKD,aAAe,CACb,OAAO,KAAK,iBAAmBA,EAA0B,EAAC,IAC3D,CACF,EAED,QAAS,CACP,QAAS,EAAG,CAGV,KAAK,MAAM,QAAS,CAAC,CACtB,EAED,cAAgB,CACd,KAAK,iBAAmB,EACzB,EAED,cAAgB,CACd,KAAK,iBAAmB,EACzB,CACF,CACH,qFA9OEE,cAqCYC,EAAAA,wBApCLC,EAAW,WAAA,EADlBC,aAqCY,CAnCT,GAAID,EAAE,GACN,MAAK,CAAA,eAAA,2BAAsDE,EAAW,wCAAqCA,EAAa,sCAAiCA,EAAW,cAKpK,SAAUA,EAAW,YAAA,EAAA,GACrB,KAAMF,EAAI,KACV,gBAAeA,EAAA,OAAsB,WAAA,OAAYE,EAAa,aAC/D,EAAAC,aAAMD,EAAiB,iBAAA,CAAA,EAAA,mBAEvB,IAqBY,CAnBJA,EAAY,cAFpBE,EAAAA,UAAA,EAAAN,EAAA,YAqBYC,0BApBLG,EAAY,YAAA,EAAA,CAAA,IAAA,CAAA,EAAAG,EAAAA,YAAA,CAAA,EAAA,CAAA,EAAA,cAISC,EAAM,OAAA,CAAtBC,EAAGC,WACVA,eAGD,IAAyB,CAAzBC,aAAyBH,SAAZE,CAAQ,OAGfR,EAAQ,eACb,wBAED,IAIE,CAJFU,EAAAA,YAIEC,EAAA,CAHA,KAAK,QACL,KAAK,MACL,MAAM,2DAKZF,EAAe,WAAAH,EAAA,OAAA,UAAA,CAAA,IAAA,EAAA"}
+{"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/lib/list-item.js

@@ -1,18 +1,19 @@
-import { L as l, a as s } from "../chunks/list_item_constants-LTUc74pD.js";
-import h from "./utils.js";
-import { resolveComponent as g, openBlock as n, createBlock as a, resolveDynamicComponent as d, mergeProps as f, toHandlers as p, withCtx as o, createSlots as y, renderList as v, renderSlot as m, createVNode as I } from "vue";
-import { _ as T } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtItemLayout as u } from "./item-layout.js";
-import { DtIcon as _ } from "./icon.js";
-import "./constants.js";
+import { LIST_ITEM_TYPES, LIST_ITEM_NAVIGATION_TYPES } from "../chunks/list_item_constants-u1xcN9Dd.js";
+import utils from "../common/utils.js";
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, mergeProps, toHandlers, withCtx, createSlots, renderList, renderSlot, createVNode } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtItemLayout } from "./item-layout.js";
+import { DtIcon } from "./icon.js";
+import "../common/constants.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-const L = ["listitem", "menuitem", "option"], H = {
+const ROLES = ["listitem", "menuitem", "option"];
+const _sfc_main = {
   name: "DtListItem",
   components: {
-    DtItemLayout: u,
-    DtIcon: _
+    DtItemLayout,
+    DtIcon
   },
   /**
    * Value provided from keyboard_list_navigation.js using id prop.
@@ -27,7 +28,7 @@ const L = ["listitem", "menuitem", "option"], H = {
     id: {
       type: String,
       default() {
-        return h.getUniqueString();
+        return utils.getUniqueString();
       }
     },
     /**
@@ -36,7 +37,7 @@ const L = ["listitem", "menuitem", "option"], H = {
     role: {
       type: String,
       default: "listitem",
-      validator: (e) => L.includes(e)
+      validator: (role) => ROLES.includes(role)
     },
     /**
      * HTML element type (tag name) of the content wrapper element.
@@ -51,8 +52,8 @@ const L = ["listitem", "menuitem", "option"], H = {
      */
     type: {
       type: String,
-      default: l.DEFAULT,
-      validator: (e) => Object.values(l).includes(e)
+      default: LIST_ITEM_TYPES.DEFAULT,
+      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t)
     },
     /**
      * The type of navigation that this component should support.
@@ -63,15 +64,15 @@ const L = ["listitem", "menuitem", "option"], H = {
      */
     navigationType: {
       type: String,
-      default: s.NONE,
-      validator: (e) => Object.values(s).includes(e)
+      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: !1
+      default: false
     }
   },
   emits: [
@@ -105,29 +106,34 @@ const L = ["listitem", "menuitem", "option"], H = {
   ],
   data() {
     return {
-      injected: !1,
-      mouseHighlighted: !1
+      injected: false,
+      mouseHighlighted: false
     };
   },
   computed: {
     listItemType() {
       switch (this.type) {
-        case l.DEFAULT:
-          return u;
+        case LIST_ITEM_TYPES.DEFAULT:
+          return DtItemLayout;
         default:
           return null;
       }
     },
     listItemListeners() {
       return {
-        keydown: (e) => {
-          ["enter", "space"].includes(e.code.toLowerCase()) && this.onClick(e), this.$emit("keydown", e);
+        keydown: (event) => {
+          if (["enter", "space"].includes(event.code.toLowerCase())) {
+            this.onClick(event);
+          }
+          this.$emit("keydown", event);
         },
-        mousemove: (e) => {
-          this.onMouseHover(e), this.$emit("mousemove", e);
+        mousemove: (event) => {
+          this.onMouseHover(event);
+          this.$emit("mousemove", event);
         },
-        mouseleave: (e) => {
-          this.onMouseLeave(e), this.$emit("mouseleave", e);
+        mouseleave: (event) => {
+          this.onMouseLeave(event);
+          this.$emit("mouseleave", event);
         }
       };
     },
@@ -136,16 +142,19 @@ const L = ["listitem", "menuitem", "option"], H = {
      * An injected highlightId will override the default mouseover highlight.
      */
     isHighlighted() {
-      return this.isHoverable ? this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted : !1;
+      if (this.isHoverable) {
+        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;
+      }
+      return false;
     },
     isFocusable() {
-      return this.navigationType === s.TAB;
+      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;
     },
     /**
      * Whether to apply hover styles.
      */
     isHoverable() {
-      return this.navigationType !== s.NONE;
+      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;
     }
   },
   methods: {
@@ -153,38 +162,40 @@ const L = ["listitem", "menuitem", "option"], H = {
       this.$emit("click", e);
     },
     onMouseHover() {
-      this.mouseHighlighted = !0;
+      this.mouseHighlighted = true;
     },
     onMouseLeave() {
-      this.mouseHighlighted = !1;
+      this.mouseHighlighted = false;
     }
   }
 };
-function S(e, k, i, b, E, t) {
-  const c = g("dt-icon");
-  return n(), a(d(i.elementType), f({
-    id: i.id,
+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": t.isFocusable,
-      "dt-list-item--highlighted": t.isHighlighted,
-      "dt-list-item--static": !t.isHoverable
+      "dt-list-item--focusable": $options.isFocusable,
+      "dt-list-item--highlighted": $options.isHighlighted,
+      "dt-list-item--static": !$options.isHoverable
     }],
-    tabindex: t.isFocusable ? 0 : -1,
-    role: i.role,
-    "aria-selected": i.role === "listitem" ? void 0 : t.isHighlighted
-  }, p(t.listItemListeners)), {
-    default: o(() => [
-      t.listItemType ? (n(), a(d(t.listItemType), { key: 0 }, y({ _: 2 }, [
-        v(e.$slots, (w, r) => ({
-          name: r,
-          fn: o(() => [
-            m(e.$slots, r)
-          ])
-        })),
-        i.selected ? {
+    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: o(() => [
-            I(c, {
+          fn: withCtx(() => [
+            createVNode(_component_dt_icon, {
               name: "check",
               size: "400",
               class: "dt-list-item--selected-icon"
@@ -192,15 +203,15 @@ function S(e, k, i, b, E, t) {
           ]),
           key: "0"
         } : void 0
-      ]), 1024)) : m(e.$slots, "default", { key: 1 })
+      ]), 1024)) : renderSlot(_ctx.$slots, "default", { key: 1 })
     ]),
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-const P = /* @__PURE__ */ T(H, [["render", S]]);
+const DtListItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  P as DtListItem,
-  s as LIST_ITEM_NAVIGATION_TYPES,
-  l as LIST_ITEM_TYPES
+  DtListItem,
+  LIST_ITEM_NAVIGATION_TYPES,
+  LIST_ITEM_TYPES
 };
 //# sourceMappingURL=list-item.js.map