@dialpad/dialtone 9.72.1 → 9.73.0-beta.1

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

@@ -1,12 +1,14 @@
+import { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from "@dialpad/dialtone-icons/vue3";
 import { resolveComponent, openBlock, createElementBlock, createVNode, normalizeClass, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtButton from "../button/button.vue.js";
-import DtIcon from "../icon/icon.vue.js";
 const _sfc_main = {
   name: "DtPagination",
   components: {
     DtButton,
-    DtIcon
+    DtIconChevronLeft,
+    DtIconChevronRight,
+    DtIconMoreHorizontal
   },
   props: {
     /**
@@ -126,8 +128,10 @@ const _hoisted_2 = {
   "data-qa": "dt-pagination-separator"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = resolveComponent("dt-icon");
+  const _component_dt_icon_chevron_left = resolveComponent("dt-icon-chevron-left");
   const _component_dt_button = resolveComponent("dt-button");
+  const _component_dt_icon_more_horizontal = resolveComponent("dt-icon-more-horizontal");
+  const _component_dt_icon_chevron_right = resolveComponent("dt-icon-chevron-right");
   return openBlock(), createElementBlock("nav", {
     "aria-label": $props.ariaLabel,
     class: "d-pagination"
@@ -142,10 +146,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => $options.changePage($data.currentPage - 1))
     }, {
       icon: withCtx(() => [
-        createVNode(_component_dt_icon, {
-          name: "chevron-left",
-          size: "300"
-        })
+        createVNode(_component_dt_icon_chevron_left, { size: "300" })
       ]),
       _: 1
     }, 8, ["aria-label", "kind", "importance", "disabled", "class"]),
@@ -155,10 +156,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass({ "d-pagination__separator": isNaN(Number(page)) })
       }, [
         isNaN(Number(page)) ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          createVNode(_component_dt_icon, {
-            name: "more-horizontal",
-            size: "300"
-          })
+          createVNode(_component_dt_icon_more_horizontal, { size: "300" })
         ])) : (openBlock(), createBlock(_component_dt_button, {
           key: 1,
           "aria-label": $props.pageNumberAriaLabel(page),
@@ -184,10 +182,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[1] || (_cache[1] = ($event) => $options.changePage($data.currentPage + 1))
     }, {
       icon: withCtx(() => [
-        createVNode(_component_dt_icon, {
-          name: "chevron-right",
-          size: "300"
-        })
+        createVNode(_component_dt_icon_chevron_right, { size: "300" })
       ]),
       _: 1
     }, 8, ["aria-label", "disabled", "importance", "class"])

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.vue.js","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      :kind=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-left\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon\n          name=\"more-horizontal\"\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <!-- eslint-enable vue/no-bare-strings-in-template -->\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      :importance=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-right\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_createVNode","_normalizeClass","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":";;;;AA+EA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,aAAa,KAAK;AAAA;EAErB;AAAA,EAED,UAAU;AAAA,IACR,cAAe;AACb,aAAO,KAAK,gBAAgB;AAAA,IAC7B;AAAA,IAED,aAAc;AACZ,aAAO,KAAK,gBAAgB,KAAK;AAAA,IAClC;AAAA,IAED,QAAS;AACP,UAAI,KAAK,eAAe,GAAG;AACzB,eAAO;MACT;AACA,UAAI,KAAK,cAAc,KAAK,YAAY;AACtC,eAAO,KAAK,MAAM,GAAG,KAAK,UAAU;AAAA,MACtC;AAEA,YAAM,QAAQ,KAAK,aAAa;AAChC,YAAM,MAAM,KAAK,aAAa,QAAQ;AAEtC,UAAI,KAAK,cAAc,OAAO;AAC5B,eAAO,CAAC,GAAG,KAAK,MAAM,GAAG,KAAK,GAAG,OAAO,KAAK,UAAU;AAAA,MACzD;AAEA,UAAI,KAAK,cAAc,KAAK;AAC1B,eAAO,CAAC,GAAG,OAAO,GAAG,KAAK,MAAM,KAAK,KAAK,UAAU,CAAC;AAAA,MACvD;AAGA,YAAM,QAAQ,KAAK,cAAc,IAAI,KAAK,aAAa;AACvD,YAAM,cAAc,KAAK,MAAM,QAAQ,CAAC;AACxC,YAAM,OAAO,KAAK,cAAc;AAChC,YAAM,QAAQ,KAAK,cAAc;AACjC,aAAO,CAAC,GAAG,OAAO,GAAG,KAAK,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,UAAU;AAAA,IACrE;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,MAAO,MAAM,IAAI;AACf,YAAM,QAAQ,CAAA;AACd,aAAO,OAAO,IAAI,OAAO;AACzB,eAAS,IAAI,MAAM,KAAK,IAAI,KAAK;AAC/B,cAAM,KAAK,CAAC;AAAA,MACd;AACA,aAAO;AAAA,IACR;AAAA,IAED,WAAY,MAAM;AAChB,WAAK,cAAc;AACnB,WAAK,MAAM,UAAU,KAAK,WAAW;AAAA,IACtC;AAAA,EACF;AACH;;;;EAzLQ,OAAM;AAAA,EACN,WAAQ;;;;;sBA9BdA,mBAmEM,OAAA;AAAA,IAlEH,cAAY,OAAS;AAAA,IACtB,OAAM;AAAA;IAENC,YAgBY,sBAAA;AAAA,MAfV,OAAKC,eAAA,CAAC,wBAME,SAAW,cAAA,qCAAA,eAAA,CAAA;AAAA,MALnB,WAAQ;AAAA,MACP,cAAY,OAAa;AAAA,MACzB,MAAM,SAAW,cAAA,YAAA;AAAA,MACjB,YAAY,SAAW,cAAA,YAAA;AAAA,MACvB,UAAU,SAAW;AAAA,MAErB,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,SAAU,WAAC,MAAW,cAAA,CAAA;AAAA;MAEnB,cACT,MAGE;AAAA,QAHFD,YAGE,oBAAA;AAAA,UAFA,MAAK;AAAA,UACL,MAAK;AAAA;;;;KAIXE,UAAA,IAAA,GAAAH,mBA4BMI,UA3BoB,MAAAC,WAAA,SAAA,OAAhB,CAAA,MAAM,UAAK;0BADrBL,mBA4BM,OAAA;AAAA,QA1BH,KAAG,QAAU,IAAI,IAAI,KAAK;AAAA,QAC1B,OAAoCE,eAAA,EAAA,2BAAA,MAAM,OAAO,IAAI,CAAA,GAAA;AAAA;QAI9C,MAAM,OAAO,IAAI,CAAA,KADzBC,aAAAH,mBAUM,OAVN,YAUM;AAAA,UALJC,YAGE,oBAAA;AAAA,YAFA,MAAK;AAAA,YACL,MAAK;AAAA;4BAKTK,YASY,sBAAA;AAAA;UAPT,cAAY,OAAmB,oBAAC,IAAI;AAAA,UACpC,MAAM,MAAW,gBAAK,OAAI,YAAA;AAAA,UAC1B,YAAY,MAAW,gBAAK,OAAI,YAAA;AAAA,UACjC,eAAY;AAAA,UACX,SAAK,YAAE,SAAU,WAAC,IAAI;AAAA;2BAEvB,MAAU;AAAA,4CAAP,IAAI,GAAA,CAAA;AAAA;;;;;IAGXL,YAgBY,sBAAA;AAAA,MAfV,OAAKC,eAAA,CAAC,wBAME,SAAU,aAAA,qCAAA,eAAA,CAAA;AAAA,MALlB,WAAQ;AAAA,MACP,cAAY,OAAa;AAAA,MACzB,UAAU,SAAU;AAAA,MACrB,MAAK;AAAA,MACJ,YAAY,SAAU,aAAA,YAAA;AAAA,MAEtB,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,SAAU,WAAC,MAAW,cAAA,CAAA;AAAA;MAEnB,cACT,MAGE;AAAA,QAHFD,YAGE,oBAAA;AAAA,UAFA,MAAK;AAAA,UACL,MAAK;AAAA;;;;;;;"}
+{"version":3,"file":"pagination.vue.js","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      :kind=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-left\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon-more-horizontal\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <!-- eslint-enable vue/no-bare-strings-in-template -->\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      :importance=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-right\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue3';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIconChevronLeft,\n    DtIconChevronRight,\n    DtIconMoreHorizontal,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_createVNode","_normalizeClass","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":"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"}

package/dist/vue3/components/popover/popover_header_footer.vue.cjs

@@ -1,14 +1,14 @@
 "use strict";
+const vue3 = require("@dialpad/dialtone-icons/vue3");
 const common_utils = require("../../common/utils.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const button = require("../button/button.vue.cjs");
-const icon = require("../icon/icon.vue.cjs");
 const _sfc_main = {
   name: "PopoverHeaderFooter",
   components: {
     DtButton: button,
-    DtIcon: icon
+    DtIconClose: vue3.DtIconClose
   },
   props: {
     // eslint-disable-next-line vue/require-default-prop
@@ -66,7 +66,7 @@ const _sfc_main = {
   }
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
   const _component_dt_button = vue.resolveComponent("dt-button");
   return vue.openBlock(), vue.createElementBlock("div", {
     "data-qa": "dt-popover-header-footer",
@@ -100,10 +100,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
     }), {
       icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon, {
-          name: "close",
-          size: "300"
-        })
+        vue.createVNode(_component_dt_icon_close, { size: "300" })
       ]),
       _: 1
     }, 16, ["class"])) : vue.createCommentVNode("", true)

package/dist/vue3/components/popover/popover_header_footer.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover_header_footer.vue.cjs","sources":["../../../components/popover/popover_header_footer.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-popover-header-footer\"\n    :class=\"{\n      'd-popover__header': type === 'header',\n      'd-popover__footer': type === 'footer',\n    }\"\n  >\n    <div\n      v-if=\"hasSlotContent($slots.content)\"\n      data-qa=\"dt-popover-header-footer-content\"\n      :class=\"[{\n        'd-popover__header__content': type === 'header',\n        'd-popover__footer__content': type === 'footer',\n      }, contentClass]\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot name=\"content\" />\n    </div>\n    <dt-button\n      v-if=\"showCloseButton\"\n      ref=\"popover__close-button\"\n      data-qa=\"dt-popover-close\"\n      :class=\"{\n        'd-popover__header__close-button': type === 'header',\n        'd-popover__footer__close-button': type === 'footer',\n      }\"\n      importance=\"outlined\"\n      kind=\"muted\"\n      circle\n      v-bind=\"closeButtonProps\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"close\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'PopoverHeaderFooter',\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    // eslint-disable-next-line vue/require-default-prop\n    type: {\n      type: String,\n      validator: function (value) {\n        return ['header', 'footer'].includes(value);\n      },\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines visibility for close button\n     * @values true, false\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A set of props to be passed into the popover's header close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => {},\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is closed\n     *\n     * @event close\n     * @type { Boolean }\n     */\n    'close',\n  ],\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  methods: {\n    focusCloseButton () {\n      const closeButton = this.$refs['popover__close-button']?.$el;\n      closeButton?.focus();\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtIcon","hasSlotContent","_createElementBlock","_normalizeClass","_renderSlot","_openBlock","_createBlock","_mergeProps","_createVNode"],"mappings":";;;;;;AAgDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAA;AAAAA,IACA,QAAAC;AAAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAW,SAAU,OAAO;AAC1B,eAAO,CAAC,UAAU,QAAQ,EAAE,SAAS,KAAK;AAAA,MAC3C;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA,MAAE;AAAA,IAClB;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC,aAAc;AAAA;EAEjB;AAAA,EAED,SAAS;AAAA,IACP,mBAAoB;;AAClB,YAAM,eAAc,UAAK,MAAM,uBAAuB,MAAlC,mBAAqC;AACzD,iDAAa;AAAA,IACd;AAAA,EACF;AACH;;;;0BAhHEC,IAuCM,mBAAA,OAAA;AAAA,IAtCJ,WAAQ;AAAA,IACP,OAAKC,IAAAA,eAAA;AAAA,2BAA+B,OAAI,SAAA;AAAA,2BAA0C,OAAI,SAAA;AAAA;;IAM/E,MAAc,eAAC,KAAM,OAAC,OAAO,sBADrCD,IAUM,mBAAA,OAAA;AAAA;MARJ,WAAQ;AAAA,MACP,OAAKC,IAAA,eAAA,CAAA;AAAA,sCAA2C,OAAI,SAAA;AAAA,sCAAqD,OAAI,SAAA;AAAA,SAAwB,OAAY,YAAA,CAAA;AAAA;MAMlJC,eAAuB,KAAA,QAAA,SAAA;AAAA;IAGjB,OAAe,mBADvBC,IAAAA,aAAAC,IAAAA,YAoBY,sBApBZC,eAoBY;AAAA;MAlBV,KAAI;AAAA,MACJ,WAAQ;AAAA,MACP,OAAK;AAAA,2CAA+C,OAAI,SAAA;AAAA,2CAA0D,OAAI,SAAA;AAAA;MAIvH,YAAW;AAAA,MACX,MAAK;AAAA,MACL,QAAA;AAAA,OACQ,OAAgB,kBAAA;AAAA,MACvB,+CAAO,KAAK,MAAA,OAAA;AAAA;MAEF,kBACT,MAGE;AAAA,QAHFC,IAAAA,YAGE,oBAAA;AAAA,UAFA,MAAK;AAAA,UACL,MAAK;AAAA;;;;;;;;"}
+{"version":3,"file":"popover_header_footer.vue.cjs","sources":["../../../components/popover/popover_header_footer.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-popover-header-footer\"\n    :class=\"{\n      'd-popover__header': type === 'header',\n      'd-popover__footer': type === 'footer',\n    }\"\n  >\n    <div\n      v-if=\"hasSlotContent($slots.content)\"\n      data-qa=\"dt-popover-header-footer-content\"\n      :class=\"[{\n        'd-popover__header__content': type === 'header',\n        'd-popover__footer__content': type === 'footer',\n      }, contentClass]\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot name=\"content\" />\n    </div>\n    <dt-button\n      v-if=\"showCloseButton\"\n      ref=\"popover__close-button\"\n      data-qa=\"dt-popover-close\"\n      :class=\"{\n        'd-popover__header__close-button': type === 'header',\n        'd-popover__footer__close-button': type === 'footer',\n      }\"\n      importance=\"outlined\"\n      kind=\"muted\"\n      circle\n      v-bind=\"closeButtonProps\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'PopoverHeaderFooter',\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    // eslint-disable-next-line vue/require-default-prop\n    type: {\n      type: String,\n      validator: function (value) {\n        return ['header', 'footer'].includes(value);\n      },\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines visibility for close button\n     * @values true, false\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A set of props to be passed into the popover's header close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => {},\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is closed\n     *\n     * @event close\n     * @type { Boolean }\n     */\n    'close',\n  ],\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  methods: {\n    focusCloseButton () {\n      const closeButton = this.$refs['popover__close-button']?.$el;\n      closeButton?.focus();\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtIconClose","hasSlotContent","_createElementBlock","_normalizeClass","_renderSlot","_openBlock","_createBlock","_mergeProps","_createVNode"],"mappings":";;;;;;AA+CA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAA;AAAAA,iBACAC,KAAW;AAAA,EACZ;AAAA,EAED,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAW,SAAU,OAAO;AAC1B,eAAO,CAAC,UAAU,QAAQ,EAAE,SAAS,KAAK;AAAA,MAC3C;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA,MAAE;AAAA,IAClB;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC,aAAc;AAAA;EAEjB;AAAA,EAED,SAAS;AAAA,IACP,mBAAoB;;AAClB,YAAM,eAAc,UAAK,MAAM,uBAAuB,MAAlC,mBAAqC;AACzD,iDAAa;AAAA,IACd;AAAA,EACF;AACH;;;;0BA/GEC,IAsCM,mBAAA,OAAA;AAAA,IArCJ,WAAQ;AAAA,IACP,OAAKC,IAAAA,eAAA;AAAA,2BAA+B,OAAI,SAAA;AAAA,2BAA0C,OAAI,SAAA;AAAA;;IAM/E,MAAc,eAAC,KAAM,OAAC,OAAO,sBADrCD,IAUM,mBAAA,OAAA;AAAA;MARJ,WAAQ;AAAA,MACP,OAAKC,IAAA,eAAA,CAAA;AAAA,sCAA2C,OAAI,SAAA;AAAA,sCAAqD,OAAI,SAAA;AAAA,SAAwB,OAAY,YAAA,CAAA;AAAA;MAMlJC,eAAuB,KAAA,QAAA,SAAA;AAAA;IAGjB,OAAe,mBADvBC,IAAAA,aAAAC,IAAAA,YAmBY,sBAnBZC,eAmBY;AAAA;MAjBV,KAAI;AAAA,MACJ,WAAQ;AAAA,MACP,OAAK;AAAA,2CAA+C,OAAI,SAAA;AAAA,2CAA0D,OAAI,SAAA;AAAA;MAIvH,YAAW;AAAA,MACX,MAAK;AAAA,MACL,QAAA;AAAA,OACQ,OAAgB,kBAAA;AAAA,MACvB,+CAAO,KAAK,MAAA,OAAA;AAAA;MAEF,kBACT,MAEE;AAAA,QAFFC,IAAAA,YAEE,0BAAA,EADA,MAAK,MAAK,CAAA;AAAA;;;;;;;"}

package/dist/vue3/components/popover/popover_header_footer.vue.js

@@ -1,13 +1,13 @@
+import { DtIconClose } from "@dialpad/dialtone-icons/vue3";
 import { hasSlotContent } from "../../common/utils.js";
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createBlock, mergeProps, withCtx, createVNode } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtButton from "../button/button.vue.js";
-import DtIcon from "../icon/icon.vue.js";
 const _sfc_main = {
   name: "PopoverHeaderFooter",
   components: {
     DtButton,
-    DtIcon
+    DtIconClose
   },
   props: {
     // eslint-disable-next-line vue/require-default-prop
@@ -65,7 +65,7 @@ const _sfc_main = {
   }
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = resolveComponent("dt-icon");
+  const _component_dt_icon_close = resolveComponent("dt-icon-close");
   const _component_dt_button = resolveComponent("dt-button");
   return openBlock(), createElementBlock("div", {
     "data-qa": "dt-popover-header-footer",
@@ -99,10 +99,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
     }), {
       icon: withCtx(() => [
-        createVNode(_component_dt_icon, {
-          name: "close",
-          size: "300"
-        })
+        createVNode(_component_dt_icon_close, { size: "300" })
       ]),
       _: 1
     }, 16, ["class"])) : createCommentVNode("", true)

package/dist/vue3/components/popover/popover_header_footer.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover_header_footer.vue.js","sources":["../../../components/popover/popover_header_footer.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-popover-header-footer\"\n    :class=\"{\n      'd-popover__header': type === 'header',\n      'd-popover__footer': type === 'footer',\n    }\"\n  >\n    <div\n      v-if=\"hasSlotContent($slots.content)\"\n      data-qa=\"dt-popover-header-footer-content\"\n      :class=\"[{\n        'd-popover__header__content': type === 'header',\n        'd-popover__footer__content': type === 'footer',\n      }, contentClass]\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot name=\"content\" />\n    </div>\n    <dt-button\n      v-if=\"showCloseButton\"\n      ref=\"popover__close-button\"\n      data-qa=\"dt-popover-close\"\n      :class=\"{\n        'd-popover__header__close-button': type === 'header',\n        'd-popover__footer__close-button': type === 'footer',\n      }\"\n      importance=\"outlined\"\n      kind=\"muted\"\n      circle\n      v-bind=\"closeButtonProps\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"close\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'PopoverHeaderFooter',\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    // eslint-disable-next-line vue/require-default-prop\n    type: {\n      type: String,\n      validator: function (value) {\n        return ['header', 'footer'].includes(value);\n      },\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines visibility for close button\n     * @values true, false\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A set of props to be passed into the popover's header close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => {},\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is closed\n     *\n     * @event close\n     * @type { Boolean }\n     */\n    'close',\n  ],\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  methods: {\n    focusCloseButton () {\n      const closeButton = this.$refs['popover__close-button']?.$el;\n      closeButton?.focus();\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot","_openBlock","_createBlock","_mergeProps","_createVNode"],"mappings":";;;;;AAgDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAW,SAAU,OAAO;AAC1B,eAAO,CAAC,UAAU,QAAQ,EAAE,SAAS,KAAK;AAAA,MAC3C;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA,MAAE;AAAA,IAClB;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,mBAAoB;;AAClB,YAAM,eAAc,UAAK,MAAM,uBAAuB,MAAlC,mBAAqC;AACzD,iDAAa;AAAA,IACd;AAAA,EACF;AACH;;;;sBAhHEA,mBAuCM,OAAA;AAAA,IAtCJ,WAAQ;AAAA,IACP,OAAKC,eAAA;AAAA,2BAA+B,OAAI,SAAA;AAAA,2BAA0C,OAAI,SAAA;AAAA;;IAM/E,MAAc,eAAC,KAAM,OAAC,OAAO,kBADrCD,mBAUM,OAAA;AAAA;MARJ,WAAQ;AAAA,MACP,OAAKC,eAAA,CAAA;AAAA,sCAA2C,OAAI,SAAA;AAAA,sCAAqD,OAAI,SAAA;AAAA,SAAwB,OAAY,YAAA,CAAA;AAAA;MAMlJC,WAAuB,KAAA,QAAA,SAAA;AAAA;IAGjB,OAAe,mBADvBC,aAAAC,YAoBY,sBApBZC,WAoBY;AAAA;MAlBV,KAAI;AAAA,MACJ,WAAQ;AAAA,MACP,OAAK;AAAA,2CAA+C,OAAI,SAAA;AAAA,2CAA0D,OAAI,SAAA;AAAA;MAIvH,YAAW;AAAA,MACX,MAAK;AAAA,MACL,QAAA;AAAA,OACQ,OAAgB,kBAAA;AAAA,MACvB,+CAAO,KAAK,MAAA,OAAA;AAAA;MAEF,cACT,MAGE;AAAA,QAHFC,YAGE,oBAAA;AAAA,UAFA,MAAK;AAAA,UACL,MAAK;AAAA;;;;;;;"}
+{"version":3,"file":"popover_header_footer.vue.js","sources":["../../../components/popover/popover_header_footer.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-popover-header-footer\"\n    :class=\"{\n      'd-popover__header': type === 'header',\n      'd-popover__footer': type === 'footer',\n    }\"\n  >\n    <div\n      v-if=\"hasSlotContent($slots.content)\"\n      data-qa=\"dt-popover-header-footer-content\"\n      :class=\"[{\n        'd-popover__header__content': type === 'header',\n        'd-popover__footer__content': type === 'footer',\n      }, contentClass]\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot name=\"content\" />\n    </div>\n    <dt-button\n      v-if=\"showCloseButton\"\n      ref=\"popover__close-button\"\n      data-qa=\"dt-popover-close\"\n      :class=\"{\n        'd-popover__header__close-button': type === 'header',\n        'd-popover__footer__close-button': type === 'footer',\n      }\"\n      importance=\"outlined\"\n      kind=\"muted\"\n      circle\n      v-bind=\"closeButtonProps\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'PopoverHeaderFooter',\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    // eslint-disable-next-line vue/require-default-prop\n    type: {\n      type: String,\n      validator: function (value) {\n        return ['header', 'footer'].includes(value);\n      },\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines visibility for close button\n     * @values true, false\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A set of props to be passed into the popover's header close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => {},\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is closed\n     *\n     * @event close\n     * @type { Boolean }\n     */\n    'close',\n  ],\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  methods: {\n    focusCloseButton () {\n      const closeButton = this.$refs['popover__close-button']?.$el;\n      closeButton?.focus();\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot","_openBlock","_createBlock","_mergeProps","_createVNode"],"mappings":";;;;;AA+CA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAW,SAAU,OAAO;AAC1B,eAAO,CAAC,UAAU,QAAQ,EAAE,SAAS,KAAK;AAAA,MAC3C;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA,MAAE;AAAA,IAClB;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,mBAAoB;;AAClB,YAAM,eAAc,UAAK,MAAM,uBAAuB,MAAlC,mBAAqC;AACzD,iDAAa;AAAA,IACd;AAAA,EACF;AACH;;;;sBA/GEA,mBAsCM,OAAA;AAAA,IArCJ,WAAQ;AAAA,IACP,OAAKC,eAAA;AAAA,2BAA+B,OAAI,SAAA;AAAA,2BAA0C,OAAI,SAAA;AAAA;;IAM/E,MAAc,eAAC,KAAM,OAAC,OAAO,kBADrCD,mBAUM,OAAA;AAAA;MARJ,WAAQ;AAAA,MACP,OAAKC,eAAA,CAAA;AAAA,sCAA2C,OAAI,SAAA;AAAA,sCAAqD,OAAI,SAAA;AAAA,SAAwB,OAAY,YAAA,CAAA;AAAA;MAMlJC,WAAuB,KAAA,QAAA,SAAA;AAAA;IAGjB,OAAe,mBADvBC,aAAAC,YAmBY,sBAnBZC,WAmBY;AAAA;MAjBV,KAAI;AAAA,MACJ,WAAQ;AAAA,MACP,OAAK;AAAA,2CAA+C,OAAI,SAAA;AAAA,2CAA0D,OAAI,SAAA;AAAA;MAIvH,YAAW;AAAA,MACX,MAAK;AAAA,MACL,QAAA;AAAA,OACQ,OAAgB,kBAAA;AAAA,MACvB,+CAAO,KAAK,MAAA,OAAA;AAAA;MAEF,cACT,MAEE;AAAA,QAFFC,YAEE,0BAAA,EADA,MAAK,MAAK,CAAA;AAAA;;;;;;"}

package/dist/vue3/components/rich_text_editor/extensions/emoji/emoji.cjs

@@ -1,24 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const core = require("@tiptap/core");
+const state = require("@tiptap/pm/state");
 const vue3 = require("@tiptap/vue-3");
+const Suggestion = require("@tiptap/suggestion");
+const regexCombinedEmojis = require("regex-combined-emojis");
 const EmojiComponent = require("./EmojiComponent.vue.cjs");
 const common_emoji = require("../../../../common/emoji.cjs");
-const state = require("@tiptap/pm/state");
-const Suggestion = require("@tiptap/suggestion");
 const suggestion = require("./suggestion.cjs");
-const regexCombinedEmojis = require("regex-combined-emojis");
-const EmojiPluginKey = new state.PluginKey("emoji");
-const inputShortCodeRegex = new RegExp("(^| |(?<=:))(:\\w+:)$");
+const inputShortCodeRegex = /(:\w+:)$/;
 const inputUnicodeRegex = new RegExp(regexCombinedEmojis.emojiPattern + "$");
 const inputRuleMatch = (match) => {
   if (match && common_emoji.codeToEmojiData(match[0])) {
     const text = match[2] || match[0];
-    return {
-      index: match.index,
-      text,
-      match
-    };
+    return { text };
   }
 };
 const shortCodePasteMatch = (text) => {
@@ -30,19 +25,16 @@ const shortCodePasteMatch = (text) => {
   }));
 };
 const Emoji = core.Node.create({
+  name: "emoji",
   addOptions() {
     return {
-      HTMLAttributes: {},
-      suggestion: {
-        char: ":",
-        pluginKey: EmojiPluginKey
-      }
+      HTMLAttributes: {}
     };
   },
-  name: "emoji",
   group: "inline",
   inline: true,
-  selectable: true,
+  selectable: false,
+  atom: true,
   addNodeView() {
     return vue3.VueNodeViewRenderer(EmojiComponent);
   },
@@ -69,32 +61,17 @@ const Emoji = core.Node.create({
   },
   addInputRules() {
     return [
-      // shortcode input
-      core.nodeInputRule({
+      new core.InputRule({
         find: (text) => {
-          const match = text.match(inputShortCodeRegex);
+          const match = text.match(inputShortCodeRegex) || text.match(inputUnicodeRegex);
           if (!match) return;
           return inputRuleMatch(match);
         },
-        type: this.type,
-        getAttributes(attrs) {
-          return {
-            code: attrs[0]
-          };
-        }
-      }),
-      core.nodeInputRule({
-        find: (text) => {
-          const match = text.match(inputUnicodeRegex);
-          if (!match) return;
-          return inputRuleMatch(match);
-        },
-        type: this.type,
-        getAttributes(attrs) {
-          const emoji = common_emoji.codeToEmojiData(attrs[0]).shortname;
-          return {
-            code: emoji
-          };
+        handler: ({ state: state2, range, match, commands, chain, can }) => {
+          const { tr } = state2;
+          const start = range.from;
+          const end = range.to;
+          tr.replaceWith(start, end, this.type.create({ code: match[0] }));
         }
       })
     ];
@@ -124,13 +101,34 @@ const Emoji = core.Node.create({
   addProseMirrorPlugins() {
     return [
       Suggestion({
+        char: ":",
+        pluginKey: new state.PluginKey("emoji"),
         editor: this.editor,
         ...this.options.suggestion,
         ...suggestion
       })
     ];
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => this.editor.commands.command(({ tr, state: state2 }) => {
+        let isEmoji = false;
+        const { selection } = state2;
+        const { empty, anchor } = selection;
+        if (!empty) {
+          return false;
+        }
+        state2.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+          if (node.type.name === this.name) {
+            isEmoji = true;
+            tr.insertText("", pos, pos + node.nodeSize);
+            return false;
+          }
+        });
+        return isEmoji;
+      })
+    };
   }
 });
 exports.Emoji = Emoji;
-exports.EmojiPluginKey = EmojiPluginKey;
 //# sourceMappingURL=emoji.cjs.map

package/dist/vue3/components/rich_text_editor/extensions/emoji/emoji.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.cjs","sources":["../../../../../components/rich_text_editor/extensions/emoji/emoji.js"],"sourcesContent":["import { mergeAttributes, Node, nodeInputRule, nodePasteRule } from '@tiptap/core';\nimport { VueNodeViewRenderer } from '@tiptap/vue-3';\nimport EmojiComponent from './EmojiComponent.vue';\nimport { codeToEmojiData, emojiShortCodeRegex, emojiRegex, stringToUnicode } from '@/common/emoji';\nimport { PluginKey } from '@tiptap/pm/state';\n\nimport Suggestion from '@tiptap/suggestion';\nimport suggestionOptions from './suggestion';\nimport { emojiPattern } from 'regex-combined-emojis';\n\nexport const EmojiPluginKey = new PluginKey('emoji');\n\nconst inputShortCodeRegex = /(^| |(?<=:))(:\\w+:)$/;\nconst inputUnicodeRegex = new RegExp(emojiPattern + '$');\n\nconst inputRuleMatch = (match) => {\n  if (match && codeToEmojiData(match[0])) {\n    const text = match[2] || match[0];\n    // needs to be a dict returned\n    // ref type InputRuleMatch:\n    // https://github.com/ueberdosis/tiptap/blob/main/packages/core/src/InputRule.ts#L16\n    return {\n      index: match.index,\n      text,\n      match,\n    };\n  }\n};\n\nconst shortCodePasteMatch = (text) => {\n  const matches = [...text.matchAll(emojiShortCodeRegex)];\n\n  return matches\n    .filter(match => codeToEmojiData(match[0]))\n    .map(match => ({\n      index: match.index,\n      text: match[0],\n      match,\n    }));\n};\n\nexport const Emoji = Node.create({\n  addOptions () {\n    return {\n      HTMLAttributes: {},\n      suggestion: {\n        char: ':',\n        pluginKey: EmojiPluginKey,\n      },\n    };\n  },\n  name: 'emoji',\n  group: 'inline',\n  inline: true,\n  selectable: true,\n\n  addNodeView () {\n    return VueNodeViewRenderer(EmojiComponent);\n  },\n\n  addAttributes () {\n    return {\n      code: {\n        default: null,\n      },\n    };\n  },\n\n  parseHTML () {\n    return [\n      {\n        tag: 'emoji-component',\n      },\n    ];\n  },\n\n  renderText ({ node }) {\n    // output emoji in text as unicode character rather than shortname for backwards compatibility with\n    // our backend.\n    const unicodeEmoji = stringToUnicode(codeToEmojiData(node.attrs.code).unicode_output);\n    return unicodeEmoji;\n  },\n\n  renderHTML ({ HTMLAttributes }) {\n    return ['emoji-component', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];\n  },\n\n  addInputRules () {\n    return [\n      // shortcode input\n      nodeInputRule({\n        find: (text) => {\n          const match = text.match(inputShortCodeRegex);\n          if (!match) return;\n          return inputRuleMatch(match);\n        },\n        type: this.type,\n        getAttributes (attrs) {\n          return {\n            code: attrs[0],\n          };\n        },\n      }),\n\n      nodeInputRule({\n        find: (text) => {\n          const match = text.match(inputUnicodeRegex);\n          if (!match) return;\n          return inputRuleMatch(match);\n        },\n        type: this.type,\n        getAttributes (attrs) {\n          const emoji = codeToEmojiData(attrs[0]).shortname;\n          return {\n            code: emoji,\n          };\n        },\n      }),\n    ];\n  },\n\n  addPasteRules () {\n    return [\n      nodePasteRule({\n        find: shortCodePasteMatch,\n        type: this.type,\n        getAttributes (attrs) {\n          return {\n            code: attrs[0],\n          };\n        },\n      }),\n      nodePasteRule({\n        find: emojiRegex,\n        type: this.type,\n        getAttributes (attrs) {\n          return {\n            code: attrs[0],\n          };\n        },\n      }),\n    ];\n  },\n\n  addProseMirrorPlugins () {\n    return [\n      Suggestion({\n        editor: this.editor,\n        ...this.options.suggestion,\n        ...suggestionOptions,\n      }),\n    ];\n  },\n});\n"],"names":["PluginKey","emojiPattern","codeToEmojiData","emojiShortCodeRegex","Node","VueNodeViewRenderer","stringToUnicode","mergeAttributes","nodeInputRule","nodePasteRule","emojiRegex","suggestionOptions"],"mappings":"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"}
+{"version":3,"file":"emoji.cjs","sources":["../../../../../components/rich_text_editor/extensions/emoji/emoji.js"],"sourcesContent":["import { InputRule, mergeAttributes, Node, nodePasteRule } from '@tiptap/core';\nimport { PluginKey } from '@tiptap/pm/state';\nimport { VueNodeViewRenderer } from '@tiptap/vue-3';\nimport Suggestion from '@tiptap/suggestion';\nimport { emojiPattern } from 'regex-combined-emojis';\n\nimport EmojiComponent from './EmojiComponent.vue';\nimport { codeToEmojiData, emojiShortCodeRegex, emojiRegex, stringToUnicode } from '@/common/emoji';\nimport suggestionOptions from './suggestion';\n\nconst inputShortCodeRegex = /(:\\w+:)$/;\nconst inputUnicodeRegex = new RegExp(emojiPattern + '$');\n\nconst inputRuleMatch = (match) => {\n  if (match && codeToEmojiData(match[0])) {\n    const text = match[2] || match[0];\n    // needs to be a dict returned\n    // ref type InputRuleMatch:\n    // https://github.com/ueberdosis/tiptap/blob/main/packages/core/src/InputRule.ts#L16\n    return { text };\n  }\n};\n\nconst shortCodePasteMatch = (text) => {\n  const matches = [...text.matchAll(emojiShortCodeRegex)];\n\n  return matches\n    .filter(match => codeToEmojiData(match[0]))\n    .map(match => ({\n      index: match.index,\n      text: match[0],\n      match,\n    }));\n};\n\nexport const Emoji = Node.create({\n  name: 'emoji',\n  addOptions () {\n    return {\n      HTMLAttributes: {},\n    };\n  },\n  group: 'inline',\n  inline: true,\n  selectable: false,\n  atom: true,\n\n  addNodeView () {\n    return VueNodeViewRenderer(EmojiComponent);\n  },\n\n  addAttributes () {\n    return {\n      code: {\n        default: null,\n      },\n    };\n  },\n\n  parseHTML () {\n    return [\n      {\n        tag: 'emoji-component',\n      },\n    ];\n  },\n\n  renderText ({ node }) {\n    // output emoji in text as unicode character rather than shortname for backwards compatibility with\n    // our backend.\n    const unicodeEmoji = stringToUnicode(codeToEmojiData(node.attrs.code).unicode_output);\n    return unicodeEmoji;\n  },\n\n  renderHTML ({ HTMLAttributes }) {\n    return ['emoji-component', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];\n  },\n\n  addInputRules () {\n    return [\n      new InputRule({\n        find: (text) => {\n          const match = text.match(inputShortCodeRegex) || text.match(inputUnicodeRegex);\n          if (!match) return;\n\n          return inputRuleMatch(match);\n        },\n        handler: ({ state, range, match, commands, chain, can }) => {\n          const { tr } = state;\n          const start = range.from;\n          const end = range.to;\n          tr.replaceWith(start, end, this.type.create({ code: match[0] }));\n        },\n      }),\n    ];\n  },\n\n  addPasteRules () {\n    return [\n      nodePasteRule({\n        find: shortCodePasteMatch,\n        type: this.type,\n        getAttributes (attrs) {\n          return {\n            code: attrs[0],\n          };\n        },\n      }),\n      nodePasteRule({\n        find: emojiRegex,\n        type: this.type,\n        getAttributes (attrs) {\n          return {\n            code: attrs[0],\n          };\n        },\n      }),\n    ];\n  },\n\n  addProseMirrorPlugins () {\n    return [\n      Suggestion({\n        char: ':',\n        pluginKey: new PluginKey('emoji'),\n        editor: this.editor,\n        ...this.options.suggestion,\n        ...suggestionOptions,\n      }),\n    ];\n  },\n\n  addKeyboardShortcuts () {\n    return {\n      Backspace: () => this.editor.commands.command(({ tr, state }) => {\n        let isEmoji = false;\n        const { selection } = state;\n        const { empty, anchor } = selection;\n        if (!empty) { return false; }\n        state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n          if (node.type.name === this.name) {\n            isEmoji = true;\n            tr.insertText('', pos, pos + node.nodeSize);\n            return false;\n          }\n        });\n        return isEmoji;\n      }),\n    };\n  },\n});\n"],"names":["emojiPattern","codeToEmojiData","emojiShortCodeRegex","Node","VueNodeViewRenderer","stringToUnicode","mergeAttributes","InputRule","state","nodePasteRule","emojiRegex","PluginKey","suggestionOptions"],"mappings":"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"}

package/dist/vue3/components/rich_text_editor/extensions/emoji/emoji.js

@@ -1,22 +1,17 @@
-import { Node, mergeAttributes, nodeInputRule, nodePasteRule } from "@tiptap/core";
+import { Node, mergeAttributes, InputRule, nodePasteRule } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
 import { VueNodeViewRenderer } from "@tiptap/vue-3";
+import Suggestion from "@tiptap/suggestion";
+import { emojiPattern } from "regex-combined-emojis";
 import EmojiComponent from "./EmojiComponent.vue.js";
 import { stringToUnicode, codeToEmojiData, emojiRegex, emojiShortCodeRegex } from "../../../../common/emoji.js";
-import { PluginKey } from "@tiptap/pm/state";
-import Suggestion from "@tiptap/suggestion";
 import suggestionOptions from "./suggestion.js";
-import { emojiPattern } from "regex-combined-emojis";
-const EmojiPluginKey = new PluginKey("emoji");
-const inputShortCodeRegex = new RegExp("(^| |(?<=:))(:\\w+:)$");
+const inputShortCodeRegex = /(:\w+:)$/;
 const inputUnicodeRegex = new RegExp(emojiPattern + "$");
 const inputRuleMatch = (match) => {
   if (match && codeToEmojiData(match[0])) {
     const text = match[2] || match[0];
-    return {
-      index: match.index,
-      text,
-      match
-    };
+    return { text };
   }
 };
 const shortCodePasteMatch = (text) => {
@@ -28,19 +23,16 @@ const shortCodePasteMatch = (text) => {
   }));
 };
 const Emoji = Node.create({
+  name: "emoji",
   addOptions() {
     return {
-      HTMLAttributes: {},
-      suggestion: {
-        char: ":",
-        pluginKey: EmojiPluginKey
-      }
+      HTMLAttributes: {}
     };
   },
-  name: "emoji",
   group: "inline",
   inline: true,
-  selectable: true,
+  selectable: false,
+  atom: true,
   addNodeView() {
     return VueNodeViewRenderer(EmojiComponent);
   },
@@ -67,32 +59,17 @@ const Emoji = Node.create({
   },
   addInputRules() {
     return [
-      // shortcode input
-      nodeInputRule({
+      new InputRule({
         find: (text) => {
-          const match = text.match(inputShortCodeRegex);
+          const match = text.match(inputShortCodeRegex) || text.match(inputUnicodeRegex);
           if (!match) return;
           return inputRuleMatch(match);
         },
-        type: this.type,
-        getAttributes(attrs) {
-          return {
-            code: attrs[0]
-          };
-        }
-      }),
-      nodeInputRule({
-        find: (text) => {
-          const match = text.match(inputUnicodeRegex);
-          if (!match) return;
-          return inputRuleMatch(match);
-        },
-        type: this.type,
-        getAttributes(attrs) {
-          const emoji = codeToEmojiData(attrs[0]).shortname;
-          return {
-            code: emoji
-          };
+        handler: ({ state, range, match, commands, chain, can }) => {
+          const { tr } = state;
+          const start = range.from;
+          const end = range.to;
+          tr.replaceWith(start, end, this.type.create({ code: match[0] }));
         }
       })
     ];
@@ -122,15 +99,36 @@ const Emoji = Node.create({
   addProseMirrorPlugins() {
     return [
       Suggestion({
+        char: ":",
+        pluginKey: new PluginKey("emoji"),
         editor: this.editor,
         ...this.options.suggestion,
         ...suggestionOptions
       })
     ];
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => this.editor.commands.command(({ tr, state }) => {
+        let isEmoji = false;
+        const { selection } = state;
+        const { empty, anchor } = selection;
+        if (!empty) {
+          return false;
+        }
+        state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+          if (node.type.name === this.name) {
+            isEmoji = true;
+            tr.insertText("", pos, pos + node.nodeSize);
+            return false;
+          }
+        });
+        return isEmoji;
+      })
+    };
   }
 });
 export {
-  Emoji,
-  EmojiPluginKey
+  Emoji
 };
 //# sourceMappingURL=emoji.js.map

package/dist/vue3/components/rich_text_editor/extensions/emoji/emoji.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.js","sources":["../../../../../components/rich_text_editor/extensions/emoji/emoji.js"],"sourcesContent":["import { mergeAttributes, Node, nodeInputRule, nodePasteRule } from '@tiptap/core';\nimport { VueNodeViewRenderer } from '@tiptap/vue-3';\nimport EmojiComponent from './EmojiComponent.vue';\nimport { codeToEmojiData, emojiShortCodeRegex, emojiRegex, stringToUnicode } from '@/common/emoji';\nimport { PluginKey } from '@tiptap/pm/state';\n\nimport Suggestion from '@tiptap/suggestion';\nimport suggestionOptions from './suggestion';\nimport { emojiPattern } from 'regex-combined-emojis';\n\nexport const EmojiPluginKey = new PluginKey('emoji');\n\nconst inputShortCodeRegex = /(^| |(?<=:))(:\\w+:)$/;\nconst inputUnicodeRegex = new RegExp(emojiPattern + '$');\n\nconst inputRuleMatch = (match) => {\n  if (match && codeToEmojiData(match[0])) {\n    const text = match[2] || match[0];\n    // needs to be a dict returned\n    // ref type InputRuleMatch:\n    // https://github.com/ueberdosis/tiptap/blob/main/packages/core/src/InputRule.ts#L16\n    return {\n      index: match.index,\n      text,\n      match,\n    };\n  }\n};\n\nconst shortCodePasteMatch = (text) => {\n  const matches = [...text.matchAll(emojiShortCodeRegex)];\n\n  return matches\n    .filter(match => codeToEmojiData(match[0]))\n    .map(match => ({\n      index: match.index,\n      text: match[0],\n      match,\n    }));\n};\n\nexport const Emoji = Node.create({\n  addOptions () {\n    return {\n      HTMLAttributes: {},\n      suggestion: {\n        char: ':',\n        pluginKey: EmojiPluginKey,\n      },\n    };\n  },\n  name: 'emoji',\n  group: 'inline',\n  inline: true,\n  selectable: true,\n\n  addNodeView () {\n    return VueNodeViewRenderer(EmojiComponent);\n  },\n\n  addAttributes () {\n    return {\n      code: {\n        default: null,\n      },\n    };\n  },\n\n  parseHTML () {\n    return [\n      {\n        tag: 'emoji-component',\n      },\n    ];\n  },\n\n  renderText ({ node }) {\n    // output emoji in text as unicode character rather than shortname for backwards compatibility with\n    // our backend.\n    const unicodeEmoji = stringToUnicode(codeToEmojiData(node.attrs.code).unicode_output);\n    return unicodeEmoji;\n  },\n\n  renderHTML ({ HTMLAttributes }) {\n    return ['emoji-component', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];\n  },\n\n  addInputRules () {\n    return [\n      // shortcode input\n      nodeInputRule({\n        find: (text) => {\n          const match = text.match(inputShortCodeRegex);\n          if (!match) return;\n          return inputRuleMatch(match);\n        },\n        type: this.type,\n        getAttributes (attrs) {\n          return {\n            code: attrs[0],\n          };\n        },\n      }),\n\n      nodeInputRule({\n        find: (text) => {\n          const match = text.match(inputUnicodeRegex);\n          if (!match) return;\n          return inputRuleMatch(match);\n        },\n        type: this.type,\n        getAttributes (attrs) {\n          const emoji = codeToEmojiData(attrs[0]).shortname;\n          return {\n            code: emoji,\n          };\n        },\n      }),\n    ];\n  },\n\n  addPasteRules () {\n    return [\n      nodePasteRule({\n        find: shortCodePasteMatch,\n        type: this.type,\n        getAttributes (attrs) {\n          return {\n            code: attrs[0],\n          };\n        },\n      }),\n      nodePasteRule({\n        find: emojiRegex,\n        type: this.type,\n        getAttributes (attrs) {\n          return {\n            code: attrs[0],\n          };\n        },\n      }),\n    ];\n  },\n\n  addProseMirrorPlugins () {\n    return [\n      Suggestion({\n        editor: this.editor,\n        ...this.options.suggestion,\n        ...suggestionOptions,\n      }),\n    ];\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"emoji.js","sources":["../../../../../components/rich_text_editor/extensions/emoji/emoji.js"],"sourcesContent":["import { InputRule, mergeAttributes, Node, nodePasteRule } from '@tiptap/core';\nimport { PluginKey } from '@tiptap/pm/state';\nimport { VueNodeViewRenderer } from '@tiptap/vue-3';\nimport Suggestion from '@tiptap/suggestion';\nimport { emojiPattern } from 'regex-combined-emojis';\n\nimport EmojiComponent from './EmojiComponent.vue';\nimport { codeToEmojiData, emojiShortCodeRegex, emojiRegex, stringToUnicode } from '@/common/emoji';\nimport suggestionOptions from './suggestion';\n\nconst inputShortCodeRegex = /(:\\w+:)$/;\nconst inputUnicodeRegex = new RegExp(emojiPattern + '$');\n\nconst inputRuleMatch = (match) => {\n  if (match && codeToEmojiData(match[0])) {\n    const text = match[2] || match[0];\n    // needs to be a dict returned\n    // ref type InputRuleMatch:\n    // https://github.com/ueberdosis/tiptap/blob/main/packages/core/src/InputRule.ts#L16\n    return { text };\n  }\n};\n\nconst shortCodePasteMatch = (text) => {\n  const matches = [...text.matchAll(emojiShortCodeRegex)];\n\n  return matches\n    .filter(match => codeToEmojiData(match[0]))\n    .map(match => ({\n      index: match.index,\n      text: match[0],\n      match,\n    }));\n};\n\nexport const Emoji = Node.create({\n  name: 'emoji',\n  addOptions () {\n    return {\n      HTMLAttributes: {},\n    };\n  },\n  group: 'inline',\n  inline: true,\n  selectable: false,\n  atom: true,\n\n  addNodeView () {\n    return VueNodeViewRenderer(EmojiComponent);\n  },\n\n  addAttributes () {\n    return {\n      code: {\n        default: null,\n      },\n    };\n  },\n\n  parseHTML () {\n    return [\n      {\n        tag: 'emoji-component',\n      },\n    ];\n  },\n\n  renderText ({ node }) {\n    // output emoji in text as unicode character rather than shortname for backwards compatibility with\n    // our backend.\n    const unicodeEmoji = stringToUnicode(codeToEmojiData(node.attrs.code).unicode_output);\n    return unicodeEmoji;\n  },\n\n  renderHTML ({ HTMLAttributes }) {\n    return ['emoji-component', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];\n  },\n\n  addInputRules () {\n    return [\n      new InputRule({\n        find: (text) => {\n          const match = text.match(inputShortCodeRegex) || text.match(inputUnicodeRegex);\n          if (!match) return;\n\n          return inputRuleMatch(match);\n        },\n        handler: ({ state, range, match, commands, chain, can }) => {\n          const { tr } = state;\n          const start = range.from;\n          const end = range.to;\n          tr.replaceWith(start, end, this.type.create({ code: match[0] }));\n        },\n      }),\n    ];\n  },\n\n  addPasteRules () {\n    return [\n      nodePasteRule({\n        find: shortCodePasteMatch,\n        type: this.type,\n        getAttributes (attrs) {\n          return {\n            code: attrs[0],\n          };\n        },\n      }),\n      nodePasteRule({\n        find: emojiRegex,\n        type: this.type,\n        getAttributes (attrs) {\n          return {\n            code: attrs[0],\n          };\n        },\n      }),\n    ];\n  },\n\n  addProseMirrorPlugins () {\n    return [\n      Suggestion({\n        char: ':',\n        pluginKey: new PluginKey('emoji'),\n        editor: this.editor,\n        ...this.options.suggestion,\n        ...suggestionOptions,\n      }),\n    ];\n  },\n\n  addKeyboardShortcuts () {\n    return {\n      Backspace: () => this.editor.commands.command(({ tr, state }) => {\n        let isEmoji = false;\n        const { selection } = state;\n        const { empty, anchor } = selection;\n        if (!empty) { return false; }\n        state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n          if (node.type.name === this.name) {\n            isEmoji = true;\n            tr.insertText('', pos, pos + node.nodeSize);\n            return false;\n          }\n        });\n        return isEmoji;\n      }),\n    };\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAUA,MAAM,sBAAsB;AAC5B,MAAM,oBAAoB,IAAI,OAAO,eAAe,GAAG;AAEvD,MAAM,iBAAiB,CAAC,UAAU;AAChC,MAAI,SAAS,gBAAgB,MAAM,CAAC,CAAC,GAAG;AACtC,UAAM,OAAO,MAAM,CAAC,KAAK,MAAM,CAAC;AAIhC,WAAO,EAAE,KAAI;AAAA,EACd;AACH;AAEA,MAAM,sBAAsB,CAAC,SAAS;AACpC,QAAM,UAAU,CAAC,GAAG,KAAK,SAAS,mBAAmB,CAAC;AAEtD,SAAO,QACJ,OAAO,WAAS,gBAAgB,MAAM,CAAC,CAAC,CAAC,EACzC,IAAI,YAAU;AAAA,IACb,OAAO,MAAM;AAAA,IACb,MAAM,MAAM,CAAC;AAAA,IACb;AAAA,EACD,EAAC;AACN;AAEY,MAAC,QAAQ,KAAK,OAAO;AAAA,EAC/B,MAAM;AAAA,EACN,aAAc;AACZ,WAAO;AAAA,MACL,gBAAgB,CAAE;AAAA,IACxB;AAAA,EACG;AAAA,EACD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,MAAM;AAAA,EAEN,cAAe;AACb,WAAO,oBAAoB,cAAc;AAAA,EAC1C;AAAA,EAED,gBAAiB;AACf,WAAO;AAAA,MACL,MAAM;AAAA,QACJ,SAAS;AAAA,MACV;AAAA,IACP;AAAA,EACG;AAAA,EAED,YAAa;AACX,WAAO;AAAA,MACL;AAAA,QACE,KAAK;AAAA,MACN;AAAA,IACP;AAAA,EACG;AAAA,EAED,WAAY,EAAE,QAAQ;AAGpB,UAAM,eAAe,gBAAgB,gBAAgB,KAAK,MAAM,IAAI,EAAE,cAAc;AACpF,WAAO;AAAA,EACR;AAAA,EAED,WAAY,EAAE,kBAAkB;AAC9B,WAAO,CAAC,mBAAmB,gBAAgB,KAAK,QAAQ,gBAAgB,cAAc,CAAC;AAAA,EACxF;AAAA,EAED,gBAAiB;AACf,WAAO;AAAA,MACL,IAAI,UAAU;AAAA,QACZ,MAAM,CAAC,SAAS;AACd,gBAAM,QAAQ,KAAK,MAAM,mBAAmB,KAAK,KAAK,MAAM,iBAAiB;AAC7E,cAAI,CAAC,MAAO;AAEZ,iBAAO,eAAe,KAAK;AAAA,QAC5B;AAAA,QACD,SAAS,CAAC,EAAE,OAAO,OAAO,OAAO,UAAU,OAAO,UAAU;AAC1D,gBAAM,EAAE,GAAI,IAAG;AACf,gBAAM,QAAQ,MAAM;AACpB,gBAAM,MAAM,MAAM;AAClB,aAAG,YAAY,OAAO,KAAK,KAAK,KAAK,OAAO,EAAE,MAAM,MAAM,CAAC,EAAC,CAAE,CAAC;AAAA,QAChE;AAAA,MACT,CAAO;AAAA,IACP;AAAA,EACG;AAAA,EAED,gBAAiB;AACf,WAAO;AAAA,MACL,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM,KAAK;AAAA,QACX,cAAe,OAAO;AACpB,iBAAO;AAAA,YACL,MAAM,MAAM,CAAC;AAAA,UACzB;AAAA,QACS;AAAA,MACT,CAAO;AAAA,MACD,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM,KAAK;AAAA,QACX,cAAe,OAAO;AACpB,iBAAO;AAAA,YACL,MAAM,MAAM,CAAC;AAAA,UACzB;AAAA,QACS;AAAA,MACT,CAAO;AAAA,IACP;AAAA,EACG;AAAA,EAED,wBAAyB;AACvB,WAAO;AAAA,MACL,WAAW;AAAA,QACT,MAAM;AAAA,QACN,WAAW,IAAI,UAAU,OAAO;AAAA,QAChC,QAAQ,KAAK;AAAA,QACb,GAAG,KAAK,QAAQ;AAAA,QAChB,GAAG;AAAA,MACX,CAAO;AAAA,IACP;AAAA,EACG;AAAA,EAED,uBAAwB;AACtB,WAAO;AAAA,MACL,WAAW,MAAM,KAAK,OAAO,SAAS,QAAQ,CAAC,EAAE,IAAI,YAAY;AAC/D,YAAI,UAAU;AACd,cAAM,EAAE,UAAW,IAAG;AACtB,cAAM,EAAE,OAAO,OAAQ,IAAG;AAC1B,YAAI,CAAC,OAAO;AAAE,iBAAO;AAAA,QAAQ;AAC7B,cAAM,IAAI,aAAa,SAAS,GAAG,QAAQ,CAAC,MAAM,QAAQ;AACxD,cAAI,KAAK,KAAK,SAAS,KAAK,MAAM;AAChC,sBAAU;AACV,eAAG,WAAW,IAAI,KAAK,MAAM,KAAK,QAAQ;AAC1C,mBAAO;AAAA,UACR;AAAA,QACX,CAAS;AACD,eAAO;AAAA,MACf,CAAO;AAAA,IACP;AAAA,EACG;AACH,CAAC;"}

package/dist/vue3/components/rich_text_editor/extensions/emoji/index.cjs

@@ -1,4 +1,6 @@
 "use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const emoji = require("./emoji.cjs");
-module.exports = emoji.Emoji;
+exports.Emoji = emoji.Emoji;
+exports.default = emoji.Emoji;
 //# sourceMappingURL=index.cjs.map

package/dist/vue3/components/rich_text_editor/extensions/emoji/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/vue3/components/rich_text_editor/extensions/emoji/index.js

@@ -1,5 +1,6 @@
 import { Emoji } from "./emoji.js";
 export {
+  Emoji,
   Emoji as default
 };
 //# sourceMappingURL=index.js.map

package/dist/vue3/components/rich_text_editor/extensions/emoji/suggestion.cjs

@@ -33,10 +33,6 @@ const suggestionOptions = {
       {
         type: "emoji",
         attrs: props
-      },
-      {
-        type: "text",
-        text: " "
       }
     ]).run();
     (_b = window.getSelection()) == null ? void 0 : _b.collapseToEnd();