@dialpad/dialtone-vue 2.127.0 → 2.127.1

package/dist/lib/list-item.cjs

@@ -1,2 +1,205 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../chunks/list_item_constants-Tsz5CO1m.js"),o=require("./utils.cjs"),r=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),n=require("./item-layout.cjs"),u=require("./icon.cjs");require("./constants.cjs");require("vue");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const a=["listitem","menuitem","option"],c={name:"DtListItem",components:{DtItemLayout:n.DtItemLayout,DtIcon:u.DtIcon},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return o.default.getUniqueString()}},role:{type:String,default:"listitem",validator:t=>a.includes(t)},elementType:{type:String,default:"li"},type:{type:String,default:i.L.DEFAULT,validator:t=>Object.values(i.L).includes(t)},navigationType:{type:String,default:i.a.NONE,validator:t=>Object.values(i.a).includes(t)},selected:{type:Boolean,default:!1}},emits:["click","keydown","mousemove","mouseleave"],data(){return{injected:!1,mouseHighlighted:!1}},computed:{listItemType(){switch(this.type){case i.L.DEFAULT:return n.DtItemLayout;default:return null}},listItemListeners(){return{...this.$listeners,keydown:t=>{["enter","space"].includes(t.code.toLowerCase())&&this.onClick(t),this.$emit("keydown",t)},mousemove:t=>{this.onMouseHover(t),this.$emit("mousemove",t)},mouseleave:t=>{this.onMouseLeave(t),this.$emit("mouseleave",t)}}},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(t){this.$emit("click",t)},onMouseHover(){this.mouseHighlighted=!0},onMouseLeave(){this.mouseHighlighted=!1}}};var d=function(){var e=this,s=e._self._c;return s(e.elementType,e._g({tag:"component",class:["dt-list-item",{"dt-list-item--focusable":e.isFocusable,"dt-list-item--highlighted":e.isHighlighted,"dt-list-item--static":!e.isHoverable}],attrs:{id:e.id,tabindex:e.isFocusable?0:-1,role:e.role,"aria-selected":e.role==="listitem"?void 0:e.isHighlighted}},e.listItemListeners),[e.listItemType?s(e.listItemType,{tag:"component",scopedSlots:e._u([e._l(e.$slots,function(_,l){return{key:l,fn:function(){return[e._t(l)]},proxy:!0}}),e.selected?{key:"selected",fn:function(){return[s("dt-icon",{staticClass:"dt-list-item--selected-icon",attrs:{name:"check",size:"400"}})]},proxy:!0}:null],null,!0)}):e._t("default")],2)},m=[],h=r.n(c,d,m,!1,null,null,null,null);const g=h.exports;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 _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_itemLayout = require("./item-layout.cjs");
+const lib_icon = require("./icon.cjs");
+require("../common/constants.cjs");
+require("vue");
+require("@dialpad/dialtone-icons/vue2");
+require("../chunks/icon_constants-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: [
+    /**
+     * Native click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
+    /**
+     * Key down event
+     *
+     * @event keydown
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Native mouse move event
+     *
+     * @event mousemove
+     * @type {MouseEvent}
+     */
+    "mousemove",
+    /**
+     * Native mouse leave event
+     *
+     * @event mouseleave
+     * @type {MouseEvent}
+     */
+    "mouseleave"
+  ],
+  data() {
+    return {
+      injected: false,
+      mouseHighlighted: false
+    };
+  },
+  computed: {
+    listItemType() {
+      switch (this.type) {
+        case list_item_constants.LIST_ITEM_TYPES.DEFAULT:
+          return lib_itemLayout.DtItemLayout;
+        default:
+          return null;
+      }
+    },
+    listItemListeners() {
+      return {
+        ...this.$listeners,
+        keydown: (event) => {
+          if (["enter", "space"].includes(event.code.toLowerCase())) {
+            this.onClick(event);
+          }
+          this.$emit("keydown", event);
+        },
+        mousemove: (event) => {
+          this.onMouseHover(event);
+          this.$emit("mousemove", event);
+        },
+        mouseleave: (event) => {
+          this.onMouseLeave(event);
+          this.$emit("mouseleave", event);
+        }
+      };
+    },
+    /**
+     * For keyboard navigation, whether this item is currently highlighted.
+     * An injected highlightId will override the default mouseover highlight.
+     */
+    isHighlighted() {
+      if (this.isHoverable) {
+        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;
+      }
+      return false;
+    },
+    isFocusable() {
+      return this.navigationType === list_item_constants.LIST_ITEM_NAVIGATION_TYPES.TAB;
+    },
+    /**
+     * Whether to apply hover styles.
+     */
+    isHoverable() {
+      return this.navigationType !== list_item_constants.LIST_ITEM_NAVIGATION_TYPES.NONE;
+    }
+  },
+  methods: {
+    onClick(e) {
+      this.$emit("click", e);
+    },
+    onMouseHover() {
+      this.mouseHighlighted = true;
+    },
+    onMouseLeave() {
+      this.mouseHighlighted = false;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c(_vm.elementType, _vm._g({ tag: "component", class: ["dt-list-item", {
+    "dt-list-item--focusable": _vm.isFocusable,
+    "dt-list-item--highlighted": _vm.isHighlighted,
+    "dt-list-item--static": !_vm.isHoverable
+  }], attrs: { "id": _vm.id, "tabindex": _vm.isFocusable ? 0 : -1, "role": _vm.role, "aria-selected": _vm.role === "listitem" ? void 0 : _vm.isHighlighted } }, _vm.listItemListeners), [_vm.listItemType ? _c(_vm.listItemType, { tag: "component", scopedSlots: _vm._u([_vm._l(_vm.$slots, function(_, slotName) {
+    return { key: slotName, fn: function() {
+      return [_vm._t(slotName)];
+    }, proxy: true };
+  }), _vm.selected ? { key: "selected", fn: function() {
+    return [_c("dt-icon", { staticClass: "dt-list-item--selected-icon", attrs: { "name": "check", "size": "400" } })];
+  }, proxy: true } : null], null, true) }) : _vm._t("default")], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtListItem = __component__.exports;
+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":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['dt-list-item', {\n      'dt-list-item--focusable': isFocusable,\n      'dt-list-item--highlighted': isHighlighted,\n      'dt-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon\n          name=\"check\"\n          size=\"400\"\n          class=\"dt-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIcon } from '@/components/icon';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIcon,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        ...this.$listeners,\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item {\n  list-style: none;\n  background-color: var(--dt-action-color-background-muted-default);\n\n  &:not(.dt-list-item--static) {\n    cursor: pointer;\n    border-radius: var(--dt-size-radius-300);\n  }\n\n  &--focusable:focus,\n  &--focusable:focus-within,\n  &--highlighted {\n    background-color: var(--dt-action-color-background-muted-hover);\n  }\n\n  &--highlighted:active {\n    background-color: var(--dt-action-color-background-muted-active);\n  }\n\n  &--selected-icon {\n    margin-left: var(--dt-space-400);\n  }\n\n  :focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n}\n</style>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIcon","utils","role","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","event","e"],"mappings":"wcAkDA,MAAAA,EAAA,CAAA,WAAA,WAAA,QAAA,EAMAC,EAAA,CACA,KAAA,aAEA,WAAA,CACA,aAAAC,EAAA,aACA,OAAAC,EAAA,MACA,EAKA,OAAA,CACA,YAAA,CAAA,QAAA,IAAA,CACA,EAEA,MAAA,CAIA,GAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAC,UAAA,gBAAA,CAAA,CACA,EAKA,KAAA,CACA,KAAA,OACA,QAAA,WACA,UAAAC,GAAAL,EAAA,SAAAK,CAAA,CACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,KAAA,CACA,KAAA,OACA,QAAAC,EAAA,EAAA,QACA,UAAA,GAAA,OAAA,OAAAA,GAAA,EAAA,SAAA,CAAA,CACA,EASA,eAAA,CACA,KAAA,OACA,QAAAC,EAAA,EAAA,KACA,UAAA,GAAA,OAAA,OAAAA,GAAA,EAAA,SAAA,CAAA,CACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QAQA,UAQA,YAQA,YACA,EAEA,MAAA,CACA,MAAA,CACA,SAAA,GACA,iBAAA,EACA,CACA,EAEA,SAAA,CACA,cAAA,CACA,OAAA,KAAA,KAAA,CACA,KAAAD,EAAA,EAAA,QACA,OAAAJ,eACA,QACA,OAAA,IACA,CACA,EAEA,mBAAA,CACA,MAAA,CACA,GAAA,KAAA,WACA,QAAAM,GAAA,CACA,CAAA,QAAA,OAAA,EAAA,SAAAA,EAAA,KAAA,YAAA,CAAA,GACA,KAAA,QAAAA,CAAA,EAEA,KAAA,MAAA,UAAAA,CAAA,CACA,EAEA,UAAAA,GAAA,CACA,KAAA,aAAAA,CAAA,EACA,KAAA,MAAA,YAAAA,CAAA,CACA,EAEA,WAAAA,GAAA,CACA,KAAA,aAAAA,CAAA,EACA,KAAA,MAAA,aAAAA,CAAA,CACA,CACA,CACA,EAMA,eAAA,CACA,OAAA,KAAA,YACA,KAAA,aAAA,KAAA,YAAA,EAAA,KAAA,KAAA,KAAA,cAAA,KAAA,iBAEA,EACA,EAEA,aAAA,CAEA,OAAA,KAAA,iBAAAD,EAAA,EAAA,GACA,EAKA,aAAA,CACA,OAAA,KAAA,iBAAAA,EAAA,EAAA,IACA,CACA,EAEA,QAAA,CACA,QAAAE,EAAA,CACA,KAAA,MAAA,QAAAA,CAAA,CACA,EAEA,cAAA,CACA,KAAA,iBAAA,EACA,EAEA,cAAA,CACA,KAAA,iBAAA,EACA,CACA,CACA"}
+{"version":3,"file":"list-item.cjs","sources":["../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['dt-list-item', {\n      'dt-list-item--focusable': isFocusable,\n      'dt-list-item--highlighted': isHighlighted,\n      'dt-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon\n          name=\"check\"\n          size=\"400\"\n          class=\"dt-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIcon } from '@/components/icon';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIcon,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        ...this.$listeners,\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item {\n  list-style: none;\n  background-color: var(--dt-action-color-background-muted-default);\n\n  &:not(.dt-list-item--static) {\n    cursor: pointer;\n    border-radius: var(--dt-size-radius-300);\n  }\n\n  &--focusable:focus,\n  &--focusable:focus-within,\n  &--highlighted {\n    background-color: var(--dt-action-color-background-muted-hover);\n  }\n\n  &--highlighted:active {\n    background-color: var(--dt-action-color-background-muted-active);\n  }\n\n  &--selected-icon {\n    margin-left: var(--dt-space-400);\n  }\n\n  :focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n}\n</style>\n"],"names":["DtItemLayout","DtIcon","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES"],"mappings":"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"}

package/dist/lib/list-item.js

@@ -1,18 +1,19 @@
-import { L as l, a as i } from "../chunks/list_item_constants-LTUc74pD.js";
-import r from "./utils.js";
-import { n as a } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { DtItemLayout as n } from "./item-layout.js";
-import { DtIcon as u } 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 { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtItemLayout } from "./item-layout.js";
+import { DtIcon } from "./icon.js";
+import "../common/constants.js";
 import "vue";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-const m = ["listitem", "menuitem", "option"], d = {
+const ROLES = ["listitem", "menuitem", "option"];
+const _sfc_main = {
   name: "DtListItem",
   components: {
-    DtItemLayout: n,
-    DtIcon: u
+    DtItemLayout,
+    DtIcon
   },
   /**
    * Value provided from keyboard_list_navigation.js using id prop.
@@ -27,7 +28,7 @@ const m = ["listitem", "menuitem", "option"], d = {
     id: {
       type: String,
       default() {
-        return r.getUniqueString();
+        return utils.getUniqueString();
       }
     },
     /**
@@ -36,7 +37,7 @@ const m = ["listitem", "menuitem", "option"], d = {
     role: {
       type: String,
       default: "listitem",
-      validator: (t) => m.includes(t)
+      validator: (role) => ROLES.includes(role)
     },
     /**
      * HTML element type (tag name) of the content wrapper element.
@@ -51,8 +52,8 @@ const m = ["listitem", "menuitem", "option"], d = {
      */
     type: {
       type: String,
-      default: l.DEFAULT,
-      validator: (t) => Object.values(l).includes(t)
+      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 m = ["listitem", "menuitem", "option"], d = {
      */
     navigationType: {
       type: String,
-      default: i.NONE,
-      validator: (t) => Object.values(i).includes(t)
+      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: [
@@ -106,15 +107,15 @@ const m = ["listitem", "menuitem", "option"], d = {
   ],
   data() {
     return {
-      injected: !1,
-      mouseHighlighted: !1
+      injected: false,
+      mouseHighlighted: false
     };
   },
   computed: {
     listItemType() {
       switch (this.type) {
-        case l.DEFAULT:
-          return n;
+        case LIST_ITEM_TYPES.DEFAULT:
+          return DtItemLayout;
         default:
           return null;
       }
@@ -122,14 +123,19 @@ const m = ["listitem", "menuitem", "option"], d = {
     listItemListeners() {
       return {
         ...this.$listeners,
-        keydown: (t) => {
-          ["enter", "space"].includes(t.code.toLowerCase()) && this.onClick(t), this.$emit("keydown", t);
+        keydown: (event) => {
+          if (["enter", "space"].includes(event.code.toLowerCase())) {
+            this.onClick(event);
+          }
+          this.$emit("keydown", event);
         },
-        mousemove: (t) => {
-          this.onMouseHover(t), this.$emit("mousemove", t);
+        mousemove: (event) => {
+          this.onMouseHover(event);
+          this.$emit("mousemove", event);
         },
-        mouseleave: (t) => {
-          this.onMouseLeave(t), this.$emit("mouseleave", t);
+        mouseleave: (event) => {
+          this.onMouseLeave(event);
+          this.$emit("mouseleave", event);
         }
       };
     },
@@ -138,57 +144,62 @@ const m = ["listitem", "menuitem", "option"], d = {
      * 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 === i.TAB;
+      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;
     },
     /**
      * Whether to apply hover styles.
      */
     isHoverable() {
-      return this.navigationType !== i.NONE;
+      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;
     }
   },
   methods: {
-    onClick(t) {
-      this.$emit("click", t);
+    onClick(e) {
+      this.$emit("click", e);
     },
     onMouseHover() {
-      this.mouseHighlighted = !0;
+      this.mouseHighlighted = true;
     },
     onMouseLeave() {
-      this.mouseHighlighted = !1;
+      this.mouseHighlighted = false;
     }
   }
 };
-var c = function() {
-  var e = this, s = e._self._c;
-  return s(e.elementType, e._g({ tag: "component", class: ["dt-list-item", {
-    "dt-list-item--focusable": e.isFocusable,
-    "dt-list-item--highlighted": e.isHighlighted,
-    "dt-list-item--static": !e.isHoverable
-  }], attrs: { id: e.id, tabindex: e.isFocusable ? 0 : -1, role: e.role, "aria-selected": e.role === "listitem" ? void 0 : e.isHighlighted } }, e.listItemListeners), [e.listItemType ? s(e.listItemType, { tag: "component", scopedSlots: e._u([e._l(e.$slots, function(g, o) {
-    return { key: o, fn: function() {
-      return [e._t(o)];
-    }, proxy: !0 };
-  }), e.selected ? { key: "selected", fn: function() {
-    return [s("dt-icon", { staticClass: "dt-list-item--selected-icon", attrs: { name: "check", size: "400" } })];
-  }, proxy: !0 } : null], null, !0) }) : e._t("default")], 2);
-}, h = [], p = /* @__PURE__ */ a(
-  d,
-  c,
-  h,
-  !1,
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c(_vm.elementType, _vm._g({ tag: "component", class: ["dt-list-item", {
+    "dt-list-item--focusable": _vm.isFocusable,
+    "dt-list-item--highlighted": _vm.isHighlighted,
+    "dt-list-item--static": !_vm.isHoverable
+  }], attrs: { "id": _vm.id, "tabindex": _vm.isFocusable ? 0 : -1, "role": _vm.role, "aria-selected": _vm.role === "listitem" ? void 0 : _vm.isHighlighted } }, _vm.listItemListeners), [_vm.listItemType ? _c(_vm.listItemType, { tag: "component", scopedSlots: _vm._u([_vm._l(_vm.$slots, function(_, slotName) {
+    return { key: slotName, fn: function() {
+      return [_vm._t(slotName)];
+    }, proxy: true };
+  }), _vm.selected ? { key: "selected", fn: function() {
+    return [_c("dt-icon", { staticClass: "dt-list-item--selected-icon", attrs: { "name": "check", "size": "400" } })];
+  }, proxy: true } : null], null, true) }) : _vm._t("default")], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const k = p.exports;
+const DtListItem = __component__.exports;
 export {
-  k as DtListItem,
-  i as LIST_ITEM_NAVIGATION_TYPES,
-  l as LIST_ITEM_TYPES
+  DtListItem,
+  LIST_ITEM_NAVIGATION_TYPES,
+  LIST_ITEM_TYPES
 };
 //# sourceMappingURL=list-item.js.map

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

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