@dialpad/dialtone 9.99.0 → 9.100.0

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

@@ -21,74 +21,132 @@ const _sfc_main = {
     unstyled: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Set the class for the left section.
+     */
+    leftClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the content section.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the title section.
+     */
+    titleClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the subtitle section.
+     */
+    subtitleClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the bottom section.
+     */
+    bottomClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the right section.
+     */
+    rightClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the selected section.
+     */
+    selectedClass: {
+      type: String,
+      default: ""
     }
   },
-  methods: { hasSlotContent: common_utils.hasSlotContent }
-};
-const _hoisted_1 = {
-  key: 0,
-  "data-qa": "dt-item-layout-left-wrapper",
-  class: "d-item-layout--left"
-};
-const _hoisted_2 = {
-  "data-qa": "dt-item-layout-content-wrapper",
-  class: "d-item-layout--content"
-};
-const _hoisted_3 = {
-  key: 0,
-  "data-qa": "dt-item-layout-title-wrapper",
-  class: "d-item-layout--title"
-};
-const _hoisted_4 = {
-  key: 2,
-  "data-qa": "dt-item-layout-bottom-wrapper",
-  class: "d-item-layout--bottom"
-};
-const _hoisted_5 = {
-  key: 1,
-  "data-qa": "dt-item-layout-right-wrapper",
-  class: "d-item-layout--right"
-};
-const _hoisted_6 = {
-  key: 2,
-  "data-qa": "dt-item-layout-selected-wrapper",
-  class: "d-item-layout--selected"
+  methods: {
+    /**
+     * Generate dynamic grid template columns
+     */
+    dynamicGridTemplateColumns() {
+      const leftContentColumn = this.$slots.left ? "auto" : "";
+      const rightContentColumn = this.$slots.right ? "auto" : "";
+      const selectedContentColumn = this.$slots.selected ? "auto" : "";
+      return `
+        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};
+      `;
+    },
+    hasSlotContent: common_utils.hasSlotContent
+  }
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.as), {
-    class: vue.normalizeClass($props.unstyled ? "d-item-layout--custom" : "d-item-layout")
+    class: vue.normalizeClass($props.unstyled ? "d-item-layout--custom" : "d-item-layout"),
+    style: vue.normalizeStyle($props.unstyled && $options.dynamicGridTemplateColumns())
   }, {
     default: vue.withCtx(() => [
-      $options.hasSlotContent(_ctx.$slots.left) ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_1, [
+      $options.hasSlotContent(_ctx.$slots.left) ? (vue.openBlock(), vue.createElementBlock("section", {
+        key: 0,
+        "data-qa": "dt-item-layout-left-wrapper",
+        class: vue.normalizeClass([$props.leftClass, "d-item-layout__left"])
+      }, [
         vue.renderSlot(_ctx.$slots, "left")
-      ])) : vue.createCommentVNode("", true),
-      vue.createElementVNode("section", _hoisted_2, [
-        $options.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+      ], 2)) : vue.createCommentVNode("", true),
+      vue.createElementVNode("section", {
+        "data-qa": "dt-item-layout-content-wrapper",
+        class: vue.normalizeClass([$props.contentClass, "d-item-layout__content"])
+      }, [
+        $options.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          "data-qa": "dt-item-layout-title-wrapper",
+          class: vue.normalizeClass([$props.titleClass, "d-item-layout__title"])
+        }, [
           vue.renderSlot(_ctx.$slots, "default")
-        ])) : vue.createCommentVNode("", true),
+        ], 2)) : vue.createCommentVNode("", true),
         $options.hasSlotContent(_ctx.$slots.subtitle) ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
           "data-qa": "dt-item-layout-subtitle-wrapper",
           class: vue.normalizeClass([
+            $props.subtitleClass,
             "d-item-layout--subtitle",
             { "d-item-layout--subtitle--with-title": $options.hasSlotContent(_ctx.$slots.default) }
           ])
         }, [
           vue.renderSlot(_ctx.$slots, "subtitle")
         ], 2)) : vue.createCommentVNode("", true),
-        $options.hasSlotContent(_ctx.$slots.bottom) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+        $options.hasSlotContent(_ctx.$slots.bottom) ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 2,
+          "data-qa": "dt-item-layout-bottom-wrapper",
+          class: vue.normalizeClass([$props.bottomClass, "d-item-layout__bottom"])
+        }, [
           vue.renderSlot(_ctx.$slots, "bottom")
-        ])) : vue.createCommentVNode("", true)
-      ]),
-      $options.hasSlotContent(_ctx.$slots.right) ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_5, [
+        ], 2)) : vue.createCommentVNode("", true)
+      ], 2),
+      $options.hasSlotContent(_ctx.$slots.right) ? (vue.openBlock(), vue.createElementBlock("section", {
+        key: 1,
+        "data-qa": "dt-item-layout-right-wrapper",
+        class: vue.normalizeClass([$props.rightClass, "d-item-layout__right"])
+      }, [
         vue.renderSlot(_ctx.$slots, "right")
-      ])) : vue.createCommentVNode("", true),
-      $options.hasSlotContent(_ctx.$slots.selected) ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_6, [
+      ], 2)) : vue.createCommentVNode("", true),
+      $options.hasSlotContent(_ctx.$slots.selected) ? (vue.openBlock(), vue.createElementBlock("section", {
+        key: 2,
+        "data-qa": "dt-item-layout-selected-wrapper",
+        class: vue.normalizeClass([$props.selectedClass, "d-item-layout__selected"])
+      }, [
         vue.renderSlot(_ctx.$slots, "selected")
-      ])) : vue.createCommentVNode("", true)
+      ], 2)) : vue.createCommentVNode("", true)
     ]),
     _: 3
-  }, 8, ["class"]);
+  }, 8, ["class", "style"]);
 }
 const DtItemLayout = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
 exports.default = DtItemLayout;

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

@@ -1 +1 @@
-{"version":3,"file":"item_layout.vue.cjs","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      class=\"d-item-layout--left\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      class=\"d-item-layout--content\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        class=\"d-item-layout--title\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[\n          'd-item-layout--subtitle',\n          { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n        ]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        class=\"d-item-layout--bottom\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      class=\"d-item-layout--right\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      class=\"d-item-layout--selected\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  methods: { hasSlotContent },\n};\n</script>\n"],"names":["hasSlotContent","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":";;;;;AAwEA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,SAAS,EAAEA,gBAAAA,aAAAA,eAAgB;AAC7B;;EA/FA,KAAA;AAAA,EAOM,WAAQ;AAAA,EACR,OAAM;;;EAMN,WAAQ;AAAA,EACR,OAAM;;;EAfZ,KAAA;AAAA,EAmBQ,WAAQ;AAAA,EACR,OAAM;;;EApBd,KAAA;AAAA,EAsCQ,WAAQ;AAAA,EACR,OAAM;;;EAvCd,KAAA;AAAA,EA+CM,WAAQ;AAAA,EACR,OAAM;;;EAhDZ,KAAA;AAAA,EAuDM,WAAQ;AAAA,EACR,OAAM;;;0BAvDVC,IA4DY,YA7DdC,4BAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,IAAAA,eAGY,OAAQ,WAAA,0BAAA,eAAA;AAAA;IAHpB,SAAAC,IAAA,QAKI,MAOU;AAAA,MANF,SAAc,eAAC,KAAM,OAAC,IAAI,KADlCC,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAoB,KAAA,QAAA,MAAA;AAAA,YAX1BC,IAAA,mBAAA,IAAA,IAAA;AAAA,MAaIC,IAAA,mBA+BU,WA/BV,YA+BU;AAAA,QA1BA,SAAc,eAAC,KAAM,OAAC,OAAO,KADrCJ,IAAAA,aAAAC,IAAAA,mBAOM,OAPN,YAOM;AAAA,UADJC,eAAQ,KAAA,QAAA,SAAA;AAAA,cAvBhBC,IAAA,mBAAA,IAAA,IAAA;AAAA,QA0Bc,SAAc,eAAC,KAAM,OAAC,QAAQ,sBADtCF,IAUM,mBAAA,OAAA;AAAA,UAnCZ,KAAA;AAAA,UA2BQ,WAAQ;AAAA,UACP,OA5BTH,IAAAA,eAAA;AAAA;qDA4B0G,SAAc,eAAC,KAAM,OAAC,OAAO,EAAA;AAAA;;UAM/HI,eAAwB,KAAA,QAAA,UAAA;AAAA,iBAlChCC,IAAA,mBAAA,IAAA,IAAA;AAAA,QAqCc,SAAc,eAAC,KAAM,OAAC,MAAM,KADpCH,IAAAA,aAAAC,IAAAA,mBAOM,OAPN,YAOM;AAAA,UADJC,eAAsB,KAAA,QAAA,QAAA;AAAA,cA1C9BC,IAAA,mBAAA,IAAA,IAAA;AAAA;MA8CY,SAAc,eAAC,KAAM,OAAC,KAAK,KADnCH,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAqB,KAAA,QAAA,OAAA;AAAA,YAnD3BC,IAAA,mBAAA,IAAA,IAAA;AAAA,MAsDY,SAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAwB,KAAA,QAAA,UAAA;AAAA,YA3D9BC,IAAA,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;;"}
+{"version":3,"file":"item_layout.vue.cjs","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n    :style=\"unstyled && dynamicGridTemplateColumns()\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      :class=\"[leftClass, 'd-item-layout__left']\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      :class=\"[contentClass, 'd-item-layout__content']\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        :class=\"[titleClass, 'd-item-layout__title']\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[\n          subtitleClass,\n          'd-item-layout--subtitle',\n          { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n        ]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        :class=\"[bottomClass, 'd-item-layout__bottom']\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      :class=\"[rightClass, 'd-item-layout__right']\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      :class=\"[selectedClass, 'd-item-layout__selected']\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Set the class for the left section.\n     */\n    leftClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the content section.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the title section.\n     */\n    titleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the subtitle section.\n     */\n    subtitleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the bottom section.\n     */\n    bottomClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the right section.\n     */\n    rightClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the selected section.\n     */\n    selectedClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  methods: {\n    /**\n     * Generate dynamic grid template columns\n     */\n    dynamicGridTemplateColumns () {\n      const leftContentColumn = this.$slots.left ? 'auto' : '';\n      const rightContentColumn = this.$slots.right ? 'auto' : '';\n      const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n      return `\n        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n      `;\n    },\n\n    hasSlotContent,\n  },\n};\n</script>\n"],"names":["hasSlotContent","_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { hasSlotContent } from "../../common/utils.js";
-import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, renderSlot, createCommentVNode, createElementVNode } from "vue";
+import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, withCtx, createElementBlock, renderSlot, createCommentVNode, createElementVNode } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
   compatConfig: { MODE: 3 },
@@ -19,74 +19,132 @@ const _sfc_main = {
     unstyled: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Set the class for the left section.
+     */
+    leftClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the content section.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the title section.
+     */
+    titleClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the subtitle section.
+     */
+    subtitleClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the bottom section.
+     */
+    bottomClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the right section.
+     */
+    rightClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the selected section.
+     */
+    selectedClass: {
+      type: String,
+      default: ""
     }
   },
-  methods: { hasSlotContent }
-};
-const _hoisted_1 = {
-  key: 0,
-  "data-qa": "dt-item-layout-left-wrapper",
-  class: "d-item-layout--left"
-};
-const _hoisted_2 = {
-  "data-qa": "dt-item-layout-content-wrapper",
-  class: "d-item-layout--content"
-};
-const _hoisted_3 = {
-  key: 0,
-  "data-qa": "dt-item-layout-title-wrapper",
-  class: "d-item-layout--title"
-};
-const _hoisted_4 = {
-  key: 2,
-  "data-qa": "dt-item-layout-bottom-wrapper",
-  class: "d-item-layout--bottom"
-};
-const _hoisted_5 = {
-  key: 1,
-  "data-qa": "dt-item-layout-right-wrapper",
-  class: "d-item-layout--right"
-};
-const _hoisted_6 = {
-  key: 2,
-  "data-qa": "dt-item-layout-selected-wrapper",
-  class: "d-item-layout--selected"
+  methods: {
+    /**
+     * Generate dynamic grid template columns
+     */
+    dynamicGridTemplateColumns() {
+      const leftContentColumn = this.$slots.left ? "auto" : "";
+      const rightContentColumn = this.$slots.right ? "auto" : "";
+      const selectedContentColumn = this.$slots.selected ? "auto" : "";
+      return `
+        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};
+      `;
+    },
+    hasSlotContent
+  }
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent($props.as), {
-    class: normalizeClass($props.unstyled ? "d-item-layout--custom" : "d-item-layout")
+    class: normalizeClass($props.unstyled ? "d-item-layout--custom" : "d-item-layout"),
+    style: normalizeStyle($props.unstyled && $options.dynamicGridTemplateColumns())
   }, {
     default: withCtx(() => [
-      $options.hasSlotContent(_ctx.$slots.left) ? (openBlock(), createElementBlock("section", _hoisted_1, [
+      $options.hasSlotContent(_ctx.$slots.left) ? (openBlock(), createElementBlock("section", {
+        key: 0,
+        "data-qa": "dt-item-layout-left-wrapper",
+        class: normalizeClass([$props.leftClass, "d-item-layout__left"])
+      }, [
         renderSlot(_ctx.$slots, "left")
-      ])) : createCommentVNode("", true),
-      createElementVNode("section", _hoisted_2, [
-        $options.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+      ], 2)) : createCommentVNode("", true),
+      createElementVNode("section", {
+        "data-qa": "dt-item-layout-content-wrapper",
+        class: normalizeClass([$props.contentClass, "d-item-layout__content"])
+      }, [
+        $options.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          "data-qa": "dt-item-layout-title-wrapper",
+          class: normalizeClass([$props.titleClass, "d-item-layout__title"])
+        }, [
           renderSlot(_ctx.$slots, "default")
-        ])) : createCommentVNode("", true),
+        ], 2)) : createCommentVNode("", true),
         $options.hasSlotContent(_ctx.$slots.subtitle) ? (openBlock(), createElementBlock("div", {
           key: 1,
           "data-qa": "dt-item-layout-subtitle-wrapper",
           class: normalizeClass([
+            $props.subtitleClass,
             "d-item-layout--subtitle",
             { "d-item-layout--subtitle--with-title": $options.hasSlotContent(_ctx.$slots.default) }
           ])
         }, [
           renderSlot(_ctx.$slots, "subtitle")
         ], 2)) : createCommentVNode("", true),
-        $options.hasSlotContent(_ctx.$slots.bottom) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+        $options.hasSlotContent(_ctx.$slots.bottom) ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          "data-qa": "dt-item-layout-bottom-wrapper",
+          class: normalizeClass([$props.bottomClass, "d-item-layout__bottom"])
+        }, [
           renderSlot(_ctx.$slots, "bottom")
-        ])) : createCommentVNode("", true)
-      ]),
-      $options.hasSlotContent(_ctx.$slots.right) ? (openBlock(), createElementBlock("section", _hoisted_5, [
+        ], 2)) : createCommentVNode("", true)
+      ], 2),
+      $options.hasSlotContent(_ctx.$slots.right) ? (openBlock(), createElementBlock("section", {
+        key: 1,
+        "data-qa": "dt-item-layout-right-wrapper",
+        class: normalizeClass([$props.rightClass, "d-item-layout__right"])
+      }, [
         renderSlot(_ctx.$slots, "right")
-      ])) : createCommentVNode("", true),
-      $options.hasSlotContent(_ctx.$slots.selected) ? (openBlock(), createElementBlock("section", _hoisted_6, [
+      ], 2)) : createCommentVNode("", true),
+      $options.hasSlotContent(_ctx.$slots.selected) ? (openBlock(), createElementBlock("section", {
+        key: 2,
+        "data-qa": "dt-item-layout-selected-wrapper",
+        class: normalizeClass([$props.selectedClass, "d-item-layout__selected"])
+      }, [
         renderSlot(_ctx.$slots, "selected")
-      ])) : createCommentVNode("", true)
+      ], 2)) : createCommentVNode("", true)
     ]),
     _: 3
-  }, 8, ["class"]);
+  }, 8, ["class", "style"]);
 }
 const DtItemLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"item_layout.vue.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      class=\"d-item-layout--left\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      class=\"d-item-layout--content\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        class=\"d-item-layout--title\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[\n          'd-item-layout--subtitle',\n          { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n        ]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        class=\"d-item-layout--bottom\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      class=\"d-item-layout--right\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      class=\"d-item-layout--selected\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  methods: { hasSlotContent },\n};\n</script>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":";;;AAwEA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,SAAS,EAAE,eAAgB;AAC7B;;EA/FA,KAAA;AAAA,EAOM,WAAQ;AAAA,EACR,OAAM;;;EAMN,WAAQ;AAAA,EACR,OAAM;;;EAfZ,KAAA;AAAA,EAmBQ,WAAQ;AAAA,EACR,OAAM;;;EApBd,KAAA;AAAA,EAsCQ,WAAQ;AAAA,EACR,OAAM;;;EAvCd,KAAA;AAAA,EA+CM,WAAQ;AAAA,EACR,OAAM;;;EAhDZ,KAAA;AAAA,EAuDM,WAAQ;AAAA,EACR,OAAM;;;sBAvDVA,YADFC,wBAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,eAGY,OAAQ,WAAA,0BAAA,eAAA;AAAA;IAHpB,SAAAC,QAKI,MAOU;AAAA,MANF,SAAc,eAAC,KAAM,OAAC,IAAI,KADlCC,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAoB,KAAA,QAAA,MAAA;AAAA,YAX1BC,mBAAA,IAAA,IAAA;AAAA,MAaIC,mBA+BU,WA/BV,YA+BU;AAAA,QA1BA,SAAc,eAAC,KAAM,OAAC,OAAO,KADrCJ,aAAAC,mBAOM,OAPN,YAOM;AAAA,UADJC,WAAQ,KAAA,QAAA,SAAA;AAAA,cAvBhBC,mBAAA,IAAA,IAAA;AAAA,QA0Bc,SAAc,eAAC,KAAM,OAAC,QAAQ,kBADtCF,mBAUM,OAAA;AAAA,UAnCZ,KAAA;AAAA,UA2BQ,WAAQ;AAAA,UACP,OA5BTH,eAAA;AAAA;qDA4B0G,SAAc,eAAC,KAAM,OAAC,OAAO,EAAA;AAAA;;UAM/HI,WAAwB,KAAA,QAAA,UAAA;AAAA,iBAlChCC,mBAAA,IAAA,IAAA;AAAA,QAqCc,SAAc,eAAC,KAAM,OAAC,MAAM,KADpCH,aAAAC,mBAOM,OAPN,YAOM;AAAA,UADJC,WAAsB,KAAA,QAAA,QAAA;AAAA,cA1C9BC,mBAAA,IAAA,IAAA;AAAA;MA8CY,SAAc,eAAC,KAAM,OAAC,KAAK,KADnCH,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAqB,KAAA,QAAA,OAAA;AAAA,YAnD3BC,mBAAA,IAAA,IAAA;AAAA,MAsDY,SAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAwB,KAAA,QAAA,UAAA;AAAA,YA3D9BC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;"}
+{"version":3,"file":"item_layout.vue.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n    :style=\"unstyled && dynamicGridTemplateColumns()\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      :class=\"[leftClass, 'd-item-layout__left']\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      :class=\"[contentClass, 'd-item-layout__content']\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        :class=\"[titleClass, 'd-item-layout__title']\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[\n          subtitleClass,\n          'd-item-layout--subtitle',\n          { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n        ]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        :class=\"[bottomClass, 'd-item-layout__bottom']\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      :class=\"[rightClass, 'd-item-layout__right']\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      :class=\"[selectedClass, 'd-item-layout__selected']\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Set the class for the left section.\n     */\n    leftClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the content section.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the title section.\n     */\n    titleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the subtitle section.\n     */\n    subtitleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the bottom section.\n     */\n    bottomClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the right section.\n     */\n    rightClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the selected section.\n     */\n    selectedClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  methods: {\n    /**\n     * Generate dynamic grid template columns\n     */\n    dynamicGridTemplateColumns () {\n      const leftContentColumn = this.$slots.left ? 'auto' : '';\n      const rightContentColumn = this.$slots.right ? 'auto' : '';\n      const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n      return `\n        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n      `;\n    },\n\n    hasSlotContent,\n  },\n};\n</script>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":"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"}

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

@@ -110,13 +110,8 @@ const _sfc_main = {
     };
   },
   computed: {
-    listItemType() {
-      switch (this.type) {
-        case list_item_constants.LIST_ITEM_TYPES.DEFAULT:
-          return item_layout.default;
-        default:
-          return null;
-      }
+    isDefaultType() {
+      return this.type === list_item_constants.LIST_ITEM_TYPES.DEFAULT;
     },
     listItemListeners() {
       return {
@@ -170,19 +165,34 @@ const _sfc_main = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_check = vue.resolveComponent("dt-icon-check");
+  const _component_dt_item_layout = vue.resolveComponent("dt-item-layout");
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.elementType), vue.mergeProps({
     id: $props.id,
-    class: ["d-list-item", {
-      "d-list-item--focusable": $options.isFocusable,
-      "d-list-item--highlighted": $options.isHighlighted,
-      "d-list-item--static": !$options.isHoverable
-    }],
+    class: [
+      "d-list-item",
+      {
+        "d-list-item--focusable": $options.isFocusable,
+        "d-list-item--highlighted": $options.isHighlighted,
+        "d-list-item--static": !$options.isHoverable
+      }
+    ],
     tabindex: $options.isFocusable ? 0 : -1,
     role: $props.role,
     "aria-selected": $props.role === "listitem" ? void 0 : $options.isHighlighted
   }, vue.toHandlers($options.listItemListeners)), {
     default: vue.withCtx(() => [
-      $options.listItemType ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.listItemType), { key: 0 }, vue.createSlots({ _: 2 }, [
+      $options.isDefaultType ? (vue.openBlock(), vue.createBlock(_component_dt_item_layout, {
+        key: 0,
+        unstyled: "",
+        class: "d-list-item__wrapper",
+        "left-class": "d-list-item__left",
+        "content-class": "d-list-item__content",
+        "title-class": "d-list-item__title",
+        "subtitle-class": "d-list-item__subtitle",
+        "bottom-class": "d-list-item__bottom",
+        "right-class": "d-list-item__right",
+        "selected-class": "d-list-item__selected"
+      }, vue.createSlots({ _: 2 }, [
         vue.renderList(_ctx.$slots, (_, slotName) => {
           return {
             name: slotName,
@@ -194,10 +204,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         $props.selected ? {
           name: "selected",
           fn: vue.withCtx(() => [
-            vue.createVNode(_component_dt_icon_check, {
-              size: "400",
-              class: "d-list-item--selected-icon"
-            })
+            vue.createVNode(_component_dt_icon_check, { size: "400" })
           ]),
           key: "0"
         } : void 0

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

@@ -1 +1 @@
-{"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['d-list-item', {\n      'd-list-item--focusable': isFocusable,\n      'd-list-item--highlighted': isHighlighted,\n      'd-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-check\n          size=\"400\"\n          class=\"d-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 { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\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  compatConfig: { MODE: 3 },\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\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"],"names":["DtItemLayout","DtIconCheck","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createSlots","_renderList","_renderSlot","_createVNode"],"mappings":"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"}
+{"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"[\n      'd-list-item',\n      {\n        'd-list-item--focusable': isFocusable,\n        'd-list-item--highlighted': isHighlighted,\n        'd-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    <dt-item-layout\n      v-if=\"isDefaultType\"\n      unstyled\n      class=\"d-list-item__wrapper\"\n      left-class=\"d-list-item__left\"\n      content-class=\"d-list-item__content\"\n      title-class=\"d-list-item__title\"\n      subtitle-class=\"d-list-item__subtitle\"\n      bottom-class=\"d-list-item__bottom\"\n      right-class=\"d-list-item__right\"\n      selected-class=\"d-list-item__selected\"\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-check size=\"400\" />\n      </template>\n    </dt-item-layout>\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 { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\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  compatConfig: { MODE: 3 },\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\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    isDefaultType () {\n      return this.type === LIST_ITEM_TYPES.DEFAULT;\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"],"names":["DtItemLayout","DtIconCheck","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createSlots","_renderList","_renderSlot","_createVNode"],"mappings":";;;;;;;;AAyDA,MAAM,QAAQ,CAAC,YAAY,YAAY,QAAQ;AAM/C,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,kBACVA,YAAY;AAAA,iBACZC,KAAW;AAAA,EACZ;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,gBAAiB;AACf,aAAO,KAAK,SAASD,oBAAe,gBAAC;AAAA,IACtC;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,mBAAmBC,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;;;;AAhPE,SAAAC,IAAAA,UAAA,GAAAC,gBA2CYC,IAAAA,wBA1CL,OAAW,WAAA,GADlBC,eA2CY;AAAA,IAzCT,IAAI,OAAE;AAAA,IACN,OAAK;AAAA;;kCAAmE,SAAW;AAAA,oCAAsC,SAAa;AAAA,gCAAkC,SAAW;AAAA;;IAOnL,UAAU,SAAW,cAAA,IAAA;AAAA,IACrB,MAAM,OAAI;AAAA,IACV,iBAAe,OAAA,SAAsB,aAAA,SAAY,SAAa;AAAA,EAC/D,GAAAC,eAAwB,SAAD,iBAAA,CAAA,GAAA;AAAA,IAf3B,SAAAC,IAAA,QAiBI,MAyBiB;AAAA,MAxBT,SAAa,kCADrBJ,IAyBiB,YAAA,2BAAA;AAAA,QA1CrB,KAAA;AAAA,QAmBM,UAAA;AAAA,QACA,OAAM;AAAA,QACN,cAAW;AAAA,QACX,iBAAc;AAAA,QACd,eAAY;AAAA,QACZ,kBAAe;AAAA,QACf,gBAAa;AAAA,QACb,eAAY;AAAA,QACZ,kBAAe;AAAA,MA3BrB,GAAAK,gBAAA,EAAA,GAAA,KAAA;AAAA,QAAAC,IAAAA,WA8BgC,KAAM,QA9BtC,CA8BgB,GAAG,aAAQ;;YA9B3B,MA+BS;AAAA,YA/BT,IAAAF,IAAA,QAkCQ,MAAyB;AAAA,cAAzBG,eAAyB,aAAZ,QAAQ;AAAA;;;QAGf,OAAQ;UArCtB,MAsCS;AAAA,UAtCT,IAAAH,IAAA,QAwCQ,MAA4B;AAAA,YAA5BI,IAAAA,YAA4B,0BAAA,EAAb,MAAK,MAAK,CAAA;AAAA;UAxCjC,KAAA;AAAA,YAAA;AAAA,mBA4CID,IAAA,WAAe,0BA5CnB,KAAA,GAAA;AAAA;IAAA,GAAA;AAAA;;;;"}

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

@@ -108,13 +108,8 @@ const _sfc_main = {
     };
   },
   computed: {
-    listItemType() {
-      switch (this.type) {
-        case LIST_ITEM_TYPES.DEFAULT:
-          return DtItemLayout;
-        default:
-          return null;
-      }
+    isDefaultType() {
+      return this.type === LIST_ITEM_TYPES.DEFAULT;
     },
     listItemListeners() {
       return {
@@ -168,19 +163,34 @@ const _sfc_main = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_check = resolveComponent("dt-icon-check");
+  const _component_dt_item_layout = resolveComponent("dt-item-layout");
   return openBlock(), createBlock(resolveDynamicComponent($props.elementType), mergeProps({
     id: $props.id,
-    class: ["d-list-item", {
-      "d-list-item--focusable": $options.isFocusable,
-      "d-list-item--highlighted": $options.isHighlighted,
-      "d-list-item--static": !$options.isHoverable
-    }],
+    class: [
+      "d-list-item",
+      {
+        "d-list-item--focusable": $options.isFocusable,
+        "d-list-item--highlighted": $options.isHighlighted,
+        "d-list-item--static": !$options.isHoverable
+      }
+    ],
     tabindex: $options.isFocusable ? 0 : -1,
     role: $props.role,
     "aria-selected": $props.role === "listitem" ? void 0 : $options.isHighlighted
   }, toHandlers($options.listItemListeners)), {
     default: withCtx(() => [
-      $options.listItemType ? (openBlock(), createBlock(resolveDynamicComponent($options.listItemType), { key: 0 }, createSlots({ _: 2 }, [
+      $options.isDefaultType ? (openBlock(), createBlock(_component_dt_item_layout, {
+        key: 0,
+        unstyled: "",
+        class: "d-list-item__wrapper",
+        "left-class": "d-list-item__left",
+        "content-class": "d-list-item__content",
+        "title-class": "d-list-item__title",
+        "subtitle-class": "d-list-item__subtitle",
+        "bottom-class": "d-list-item__bottom",
+        "right-class": "d-list-item__right",
+        "selected-class": "d-list-item__selected"
+      }, createSlots({ _: 2 }, [
         renderList(_ctx.$slots, (_, slotName) => {
           return {
             name: slotName,
@@ -192,10 +202,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         $props.selected ? {
           name: "selected",
           fn: withCtx(() => [
-            createVNode(_component_dt_icon_check, {
-              size: "400",
-              class: "d-list-item--selected-icon"
-            })
+            createVNode(_component_dt_icon_check, { size: "400" })
           ]),
           key: "0"
         } : void 0