@dialpad/dialtone-vue 3.145.1 → 3.146.0

package/dist/lib/link.cjs

@@ -34,10 +34,7 @@ const _sfc_main = {
   },
   methods: {
     getLinkClasses() {
-      return [
-        "d-link",
-        link_constants.getLinkKindModifier(this.kind, this.inverted)
-      ];
+      return ["d-link", link_constants.getLinkKindModifier(this.kind, this.inverted)];
     }
   }
 };
@@ -47,9 +44,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: vue.normalizeClass($options.getLinkClasses()),
     "data-qa": "dt-link",
     href: "href" in _ctx.$attrs ? _ctx.$attrs.href : "javascript:void(0)"
-  }, [
-    vue.renderSlot(_ctx.$slots, "default")
-  ], 10, _hoisted_1);
+  }, [vue.renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
 }
 const DtLink = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.LINK_KIND_MODIFIERS = link_constants.LINK_KIND_MODIFIERS;

package/dist/lib/link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"link.cjs","sources":["../../components/link/link.vue"],"sourcesContent":["<template>\n  <a\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n      ];\n    },\n  },\n};\n</script>\n"],"names":["LINK_VARIANTS","LINK_KIND_MODIFIERS","getLinkKindModifier","_createElementBlock","_renderSlot"],"mappings":";;;;;AAoBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAW,MAAM;AACf,eAAOA,eAAa,cAAC,SAAS,IAAI;AAAA,MACnC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,qBAAAC,eAAmB;AAAA;EAEtB;AAAA,EAED,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACAC,eAAAA,oBAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA;IAE/C;AAAA,EACF;AACH;;;0BA5DEC,IAOI,mBAAA,KAAA;AAAA,IAND,0BAAO,SAAc,gBAAA;AAAA,IACtB,WAAQ;AAAA,IACP,MAAgB,UAAA,KAAA,SAAS,KAAA,OAAO,OAAI;AAAA;IAGrCC,eAAQ,KAAA,QAAA,SAAA;AAAA;;;;;;;"}
+{"version":3,"file":"link.cjs","sources":["../../components/link/link.vue"],"sourcesContent":["<template>\n  <a\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","props","kind","type","String","default","validator","LINK_VARIANTS","includes","inverted","Boolean","data","LINK_KIND_MODIFIERS","methods","getLinkClasses","getLinkKindModifier","_createElementBlock","class","$options","href","_ctx","$attrs","_renderSlot","$slots"],"mappings":";;;;;AAoBA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKLC,MAAM;AAAA,MACJC,MAAMC;AAAAA,MACNC,SAAS;AAAA,MACTC,UAAWJ,MAAM;AACf,eAAOK,eAAa,cAACC,SAASN,IAAI;AAAA,MACpC;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAODO,UAAU;AAAA,MACRN,MAAMO;AAAAA,MACNL,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDM,OAAQ;AACN,WAAO;AAAA,MACLC,qBAAAA,eAAAA;AAAAA;EAEH;AAAA,EAEDC,SAAS;AAAA,IACPC,iBAAkB;AAChB,aAAO,CACL,UACAC,mCAAoB,KAAKb,MAAM,KAAKO,QAAQ,CAAC;AAAA,IAEjD;AAAA,EACF;AACF;;;0BA5DEO,IAOI,mBAAA,KAAA;AAAA,IANDC,0BAAOC,SAAcJ,gBAAA;AAAA,IACtB,WAAQ;AAAA,IACPK,MAAgB,UAAAC,KAAAC,SAASD,KAAAC,OAAOF,OAAI;AAAA,MAGrCG,IAAAA,WAAQF,KAAAG,QAAA,SAAA,CAAA;;;;;;;"}

package/dist/lib/link.js

@@ -32,10 +32,7 @@ const _sfc_main = {
   },
   methods: {
     getLinkClasses() {
-      return [
-        "d-link",
-        getLinkKindModifier(this.kind, this.inverted)
-      ];
+      return ["d-link", getLinkKindModifier(this.kind, this.inverted)];
     }
   }
 };
@@ -45,9 +42,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass($options.getLinkClasses()),
     "data-qa": "dt-link",
     href: "href" in _ctx.$attrs ? _ctx.$attrs.href : "javascript:void(0)"
-  }, [
-    renderSlot(_ctx.$slots, "default")
-  ], 10, _hoisted_1);
+  }, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
 }
 const DtLink = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/lib/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["../../components/link/link.vue"],"sourcesContent":["<template>\n  <a\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;AAoBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAW,MAAM;AACf,eAAO,cAAc,SAAS,IAAI;AAAA,MACnC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACA,oBAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA;IAE/C;AAAA,EACF;AACH;;;sBA5DEA,mBAOI,KAAA;AAAA,IAND,sBAAO,SAAc,gBAAA;AAAA,IACtB,WAAQ;AAAA,IACP,MAAgB,UAAA,KAAA,SAAS,KAAA,OAAO,OAAI;AAAA;IAGrCC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;"}
+{"version":3,"file":"link.js","sources":["../../components/link/link.vue"],"sourcesContent":["<template>\n  <a\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","props","kind","type","String","default","validator","LINK_VARIANTS","includes","inverted","Boolean","data","LINK_KIND_MODIFIERS","methods","getLinkClasses","getLinkKindModifier","_createElementBlock","class","$options","href","_ctx","$attrs","_renderSlot","$slots"],"mappings":";;;AAoBA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKLC,MAAM;AAAA,MACJC,MAAMC;AAAAA,MACNC,SAAS;AAAA,MACTC,UAAWJ,MAAM;AACf,eAAOK,cAAcC,SAASN,IAAI;AAAA,MACpC;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAODO,UAAU;AAAA,MACRN,MAAMO;AAAAA,MACNL,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDM,OAAQ;AACN,WAAO;AAAA,MACLC;AAAAA;EAEH;AAAA,EAEDC,SAAS;AAAA,IACPC,iBAAkB;AAChB,aAAO,CACL,UACAC,oBAAoB,KAAKb,MAAM,KAAKO,QAAQ,CAAC;AAAA,IAEjD;AAAA,EACF;AACF;;;sBA5DEO,mBAOI,KAAA;AAAA,IANDC,sBAAOC,SAAcJ,gBAAA;AAAA,IACtB,WAAQ;AAAA,IACPK,MAAgB,UAAAC,KAAAC,SAASD,KAAAC,OAAOF,OAAI;AAAA,MAGrCG,WAAQF,KAAAG,QAAA,SAAA,CAAA;;;"}

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

@@ -48,20 +48,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     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);
+  }, [$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._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtListItemGroup = list_item_group;

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

@@ -1 +1 @@
-{"version":3,"file":"list-item-group.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;;;;"}
+{"version":3,"file":"list-item-group.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":["_sfc_main","name","props","id","type","String","default","getUniqueString","heading","headingClass","Array","Object","listClass","_createElementBlock","$props","class","role","_renderSlot","_ctx","$slots"],"mappings":";;;;;;AA6BA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,IAAI;AAAA,MACFC,MAAMC;AAAAA,MACNC,UAAW;AAAE,eAAOC,aAAe,gBAAA;AAAA,MAAI;AAAA,IACxC;AAAA;AAAA;AAAA;AAAA,IAKDC,SAAS;AAAA,MACPJ,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDG,cAAc;AAAA,MACZL,MAAM,CAACC,QAAQK,OAAOC,MAAM;AAAA,MAC5BL,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDM,WAAW;AAAA,MACTR,MAAM,CAACC,QAAQK,OAAOC,MAAM;AAAA,MAC5BL,SAAS;AAAA,IACX;AAAA,EACF;AACF;;;;0BAhEEO,IAqBK,mBAAA,MAAA;AAAA,IApBFV,IAAIW,OAAEX;AAAAA,IACNY,gDAA6BD,OAASF,SAAA,CAAA;AAAA,IACvCI,MAAK;AAAA,IACL,WAAQ;AAAA,IACP,sBAAoBF,OAAEX,EAAA;AAAA,MAGfW,OAAON,4BADfK,IAAAA,mBAWK,MAAA;AAAA;IATFV,OAAOW,OAAEX,EAAA;AAAA,IACVa,MAAK;AAAA,IACL,WAAQ;AAAA,IACPD,uDAAoCD,OAAYL,YAAA,CAAA;AAAA,MAGjDQ,IAAAA,WAEOC,gCAFP,MAEO,yCADFJ,OAAON,OAAA,GAAA,CAAA,CAAA,0DAIdS,IAAAA,WAAQC,KAAAC,QAAA,SAAA,CAAA;;;;"}

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

@@ -46,20 +46,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     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);
+  }, [$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 {

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":["_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;;;"}
+{"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","name","props","id","type","String","default","getUniqueString","heading","headingClass","Array","Object","listClass","_createElementBlock","$props","class","role","_renderSlot","_ctx","$slots"],"mappings":";;;;AA6BA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,IAAI;AAAA,MACFC,MAAMC;AAAAA,MACNC,UAAW;AAAE,eAAOC,gBAAe;AAAA,MAAI;AAAA,IACxC;AAAA;AAAA;AAAA;AAAA,IAKDC,SAAS;AAAA,MACPJ,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDG,cAAc;AAAA,MACZL,MAAM,CAACC,QAAQK,OAAOC,MAAM;AAAA,MAC5BL,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDM,WAAW;AAAA,MACTR,MAAM,CAACC,QAAQK,OAAOC,MAAM;AAAA,MAC5BL,SAAS;AAAA,IACX;AAAA,EACF;AACF;;;;sBAhEEO,mBAqBK,MAAA;AAAA,IApBFV,IAAIW,OAAEX;AAAAA,IACNY,4CAA6BD,OAASF,SAAA,CAAA;AAAA,IACvCI,MAAK;AAAA,IACL,WAAQ;AAAA,IACP,sBAAoBF,OAAEX,EAAA;AAAA,MAGfW,OAAON,wBADfK,mBAWK,MAAA;AAAA;IATFV,OAAOW,OAAEX,EAAA;AAAA,IACVa,MAAK;AAAA,IACL,WAAQ;AAAA,IACPD,mDAAoCD,OAAYL,YAAA,CAAA;AAAA,MAGjDQ,WAEOC,gCAFP,MAEO,iCADFJ,OAAON,OAAA,GAAA,CAAA,CAAA,sDAIdS,WAAQC,KAAAC,QAAA,SAAA,CAAA;;;"}

package/dist/lib/list-item.cjs

@@ -8,7 +8,7 @@ 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("../chunks/icon_constants-bvhFNOPu.js");
 require("@dialpad/dialtone-icons/icons.json");
 const ROLES = ["listitem", "menuitem", "option"];
 const _sfc_main = {
@@ -21,7 +21,9 @@ const _sfc_main = {
    * Value provided from keyboard_list_navigation.js using id prop.
    */
   inject: {
-    highlightId: { default: null }
+    highlightId: {
+      default: null
+    }
   },
   props: {
     /**
@@ -184,29 +186,26 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     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 })
-    ]),
+    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"]);
 }

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":["DtItemLayout","DtIcon","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","_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,kBACVA,eAAY;AAAA,IACZ,QAAAC,SAAM;AAAA,EACP;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,eAAOC,qBAAM,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,SAASC,oBAAe,gBAAC;AAAA,MACzB,WAAW,CAAC,MAAM,OAAO,OAAOA,mCAAe,EAAE,SAAS,CAAC;AAAA,IAC5D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAASC,oBAA0B,2BAAC;AAAA,MACpC,WAAW,CAAC,MAAM,OAAO,OAAOA,8CAA0B,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,KAAKD,oBAAe,gBAAC;AACnB,iBAAOH;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,mBAAmBI,oBAA0B,2BAAC;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA,IAKD,cAAe;AACb,aAAO,KAAK,mBAAmBA,oBAA0B,2BAAC;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;;;0BA9OEC,gBAqCYC,IAAAA,wBApCL,OAAW,WAAA,GADlBC,eAqCY;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,eAAM,SAAiB,iBAAA,CAAA,GAAA;AAAA,yBAEvB,MAqBY;AAAA,MAnBJ,SAAY,gBAFpBC,IAAAA,UAAA,GAAAJ,IAAA,YAqBYC,4BApBL,SAAY,YAAA,GAAA,EAAA,KAAA,EAAA,GAAAI,IAAAA,YAAA,EAAA,GAAA,EAAA,GAAA;AAAA,uBAIS,KAAM,QAAA,CAAtB,GAAG,aAAQ;;kBAClB;AAAA,4BAGD,MAAyB;AAAA,cAAzBC,eAAyB,aAAZ,QAAQ;AAAA;;;QAGf,OAAQ;gBACb;AAAA,0BAED,MAIE;AAAA,YAJFC,IAAAA,YAIE,oBAAA;AAAA,cAHA,MAAK;AAAA,cACL,MAAK;AAAA,cACL,OAAM;AAAA;;;;mBAKZD,IAAe,WAAA,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA;AAAA;;;;;;;;"}
+{"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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"}

package/dist/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-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "@dialpad/dialtone-icons/icons.json";
 const ROLES = ["listitem", "menuitem", "option"];
 const _sfc_main = {
@@ -19,7 +19,9 @@ const _sfc_main = {
    * Value provided from keyboard_list_navigation.js using id prop.
    */
   inject: {
-    highlightId: { default: null }
+    highlightId: {
+      default: null
+    }
   },
   props: {
     /**
@@ -182,29 +184,26 @@ 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/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":["_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_openBlock","_createSlots","_renderSlot","_createVNode"],"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":["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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"}