@dialpad/dialtone 9.73.0-beta.2 → 9.74.1

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

@@ -1,14 +1,12 @@
-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,
-    DtIconChevronLeft,
-    DtIconChevronRight,
-    DtIconMoreHorizontal
+    DtIcon
   },
   props: {
     /**
@@ -128,10 +126,8 @@ const _hoisted_2 = {
   "data-qa": "dt-pagination-separator"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon_chevron_left = resolveComponent("dt-icon-chevron-left");
+  const _component_dt_icon = resolveComponent("dt-icon");
   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"
@@ -146,7 +142,10 @@ 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_chevron_left, { size: "300" })
+        createVNode(_component_dt_icon, {
+          name: "chevron-left",
+          size: "300"
+        })
       ]),
       _: 1
     }, 8, ["aria-label", "kind", "importance", "disabled", "class"]),
@@ -156,7 +155,10 @@ 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_more_horizontal, { size: "300" })
+          createVNode(_component_dt_icon, {
+            name: "more-horizontal",
+            size: "300"
+          })
         ])) : (openBlock(), createBlock(_component_dt_button, {
           key: 1,
           "aria-label": $props.pageNumberAriaLabel(page),
@@ -182,7 +184,10 @@ 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_chevron_right, { size: "300" })
+        createVNode(_component_dt_icon, {
+          name: "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-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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"}
+{"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":"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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,
-    DtIconClose: vue3.DtIconClose
+    DtIcon: icon
   },
   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_close = vue.resolveComponent("dt-icon-close");
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_button = vue.resolveComponent("dt-button");
   return vue.openBlock(), vue.createElementBlock("div", {
     "data-qa": "dt-popover-header-footer",
@@ -100,7 +100,10 @@ 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_close, { size: "300" })
+        vue.createVNode(_component_dt_icon, {
+          name: "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-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;;;;;;;"}
+{"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;;;;;;;;"}

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,
-    DtIconClose
+    DtIcon
   },
   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_close = resolveComponent("dt-icon-close");
+  const _component_dt_icon = resolveComponent("dt-icon");
   const _component_dt_button = resolveComponent("dt-button");
   return openBlock(), createElementBlock("div", {
     "data-qa": "dt-popover-header-footer",
@@ -99,7 +99,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
     }), {
       icon: withCtx(() => [
-        createVNode(_component_dt_icon_close, { size: "300" })
+        createVNode(_component_dt_icon, {
+          name: "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-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;;;;;;"}
+{"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;;;;;;;"}

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

@@ -264,13 +264,16 @@ const _sfc_main = {
       });
     }
   },
-  mounted() {
+  async mounted() {
     if (!this.enabled && this.show != null) {
       console.warn("Tooltip: You cannot use both the enabled and show props at the same time.");
       console.warn("The show prop will be ignored.");
     }
-    this.externalAnchor && this.addExternalAnchorEventListeners();
     this.tip = tippy_utils.createTippy(this.anchor, this.initOptions());
+    if (this.externalAnchor) {
+      await common_utils.flushPromises();
+      this.addExternalAnchorEventListeners();
+    }
   },
   beforeUnmount() {
     var _a;
@@ -386,18 +389,22 @@ const _sfc_main = {
     },
     addExternalAnchorEventListeners() {
       ["focusin", "mouseenter"].forEach((listener) => {
-        this.anchor.addEventListener(listener, (event) => this.onEnterAnchor(event));
+        var _a;
+        (_a = this.anchor) == null ? void 0 : _a.addEventListener(listener, (event) => this.onEnterAnchor(event));
       });
       ["focusout", "mouseleave", "keydown"].forEach((listener) => {
-        this.anchor.addEventListener(listener, (event) => this.onLeaveAnchor(event));
+        var _a;
+        (_a = this.anchor) == null ? void 0 : _a.addEventListener(listener, (event) => this.onLeaveAnchor(event));
       });
     },
     removeExternalAnchorEventListeners() {
       ["focusin", "mouseenter"].forEach((listener) => {
-        this.anchor.removeEventListener(listener, (event) => this.onEnterAnchor(event));
+        var _a;
+        (_a = this.anchor) == null ? void 0 : _a.removeEventListener(listener, (event) => this.onEnterAnchor(event));
       });
       ["focusout", "mouseleave", "keydown"].forEach((listener) => {
-        this.anchor.removeEventListener(listener, (event) => this.onLeaveAnchor(event));
+        var _a;
+        (_a = this.anchor) == null ? void 0 : _a.removeEventListener(listener, (event) => this.onLeaveAnchor(event));
       });
     }
   }

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.vue.cjs","sources":["../../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n  <div data-qa=\"dt-tooltip-container\">\n    <!-- disabling as the below events are for capturing events from interactive\n         elements within the span rather than on the span itself -->\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <span\n      v-if=\"!externalAnchor\"\n      ref=\"anchor\"\n      data-qa=\"dt-tooltip-anchor\"\n      @focusin=\"onEnterAnchor\"\n      @focusout=\"onLeaveAnchor\"\n      @mouseenter=\"onEnterAnchor\"\n      @mouseleave=\"onLeaveAnchor\"\n      @keydown.esc=\"onLeaveAnchor\"\n    >\n      <!-- @slot Slot for the anchor element -->\n      <slot\n        name=\"anchor\"\n      />\n    </span>\n    <div\n      :id=\"id\"\n      ref=\"content\"\n      data-qa=\"dt-tooltip\"\n      :class=\"[\n        'd-tooltip',\n        {\n          [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n        },\n        contentClass,\n      ]\"\n    >\n      <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n      <!-- after-leave event can be used instead of transitionend -->\n      <!-- @slot Slot for the content, defaults to message prop -->\n      <slot>\n        {{ message }}\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  TOOLTIP_KIND_MODIFIERS,\n  TOOLTIP_DIRECTIONS,\n  TOOLTIP_STICKY_VALUES,\n  TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport {\n  createTippy,\n  getAnchor,\n  getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/**\n * A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n */\nexport default {\n  name: 'DtTooltip',\n\n  props: {\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\"\n     * if defined, otherwise it will automatically position to a new location\n     * as it sees best fit. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => ['auto'],\n    },\n\n    /**\n     * If true, applies inverted styles to the tooltip\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the tooltip from its reference element\n     *  by the specified number of pixels. See\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 12],\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'top',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\n    },\n\n    /**\n     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: true,\n      validator: (sticky) => {\n        return TOOLTIP_STICKY_VALUES.includes(sticky);\n      },\n    },\n\n    /**\n     * Sets the element to which the tooltip is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * This prop is not reactive, must be set on initial render.\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Additional css classes for the tooltip content element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * A provided message for the tooltip content\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls whether hover/focus causes the tooltip to appear.\n     * Cannot be combined with the show prop. show value will be ignored.\n     * by default this is true, if you override with false, the tooltip will never show up.\n     */\n    enabled: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n     * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Whether the tooltip should have a transition effect (fade).\n     */\n    transition: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the tooltip will have a delay when being focused or moused over.\n     * @values true, false\n     */\n    delay: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/\n     */\n    theme: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * External anchor id to use in those cases the anchor can't be provided via the slot.\n     * For instance, using the combobox's input as the anchor for the popover.\n     */\n    externalAnchor: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when tooltip is shown or hidden\n     *\n     * @event shown\n     * @type {Boolean}\n     */\n    'shown',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      TOOLTIP_KIND_MODIFIERS,\n      hasSlotContent,\n      tip: null,\n\n      inTimer: null,\n\n      // Internal state for whether the tooltip is shown. Changing the prop\n      // will update this.\n      internalShow: false,\n\n      // this is where the placement currently is, this can be different than\n      // the placement prop when there is not enough available room for the tip\n      // to display and it uses a fallback placement.\n      currentPlacement: this.placement,\n    };\n  },\n\n  computed: {\n    // eslint-disable-next-line complexity\n    tippyProps () {\n      return {\n        offset: this.offset,\n        delay: this.delay ? TOOLTIP_DELAY_MS : false,\n        placement: this.placement,\n        sticky: this.sticky,\n        theme: this.inverted ? 'inverted' : this.theme,\n        animation: this.transition ? 'fade' : false,\n        // onShown only triggers when transition is truthy\n        onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n        // onShown will always be called, but it will be called before the animation is complete\n        onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n        onHidden: this.onHide,\n\n        popperOptions: getPopperOptions({\n          fallbackPlacements: this.fallbackPlacements,\n          hasHideModifierEnabled: true,\n          onChangePlacement: this.onChangePlacement,\n        }),\n      };\n    },\n\n    anchor () {\n      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n    },\n  },\n\n  watch: {\n\n    tippyProps: {\n      handler: 'setProps',\n      deep: true,\n    },\n\n    show: {\n      handler: function (show) {\n        if (show !== null && this.enabled) {\n          this.internalShow = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    internalShow (value) {\n      if (value) {\n        this.setProps();\n        this.tip.show();\n      } else {\n        this.tip.hide();\n      }\n    },\n\n    sticky (sticky) {\n      this.tip.setProps({\n        sticky,\n      });\n    },\n  },\n\n  mounted () {\n    if (!this.enabled && this.show != null) {\n      console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n      console.warn('The show prop will be ignored.');\n    }\n\n    this.externalAnchor && this.addExternalAnchorEventListeners();\n    this.tip = createTippy(this.anchor, this.initOptions());\n  },\n\n  beforeUnmount () {\n    this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n    if (this.tip) {\n      this.tip?.destroy();\n    }\n  },\n\n  methods: {\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n        // anchor of popover is within a drawer.\n        this.$el.closest('.d-zi-drawer')) {\n        return 651;\n      } else {\n        return 400;\n      }\n    },\n\n    hasVisibleFocus () {\n      return this.anchor.matches(':focus-visible');\n    },\n\n    onEnterAnchor (e) {\n      if (!this.enabled) return;\n      if (this.delay && this.inTimer === null) {\n        this.inTimer = setTimeout(() => {\n          this.triggerShow(e);\n        }, TOOLTIP_DELAY_MS);\n      } else {\n        this.triggerShow(e);\n      }\n    },\n\n    triggerShow (e) {\n      if (e.type === 'focusin') {\n        // only show tooltips on visible focus when triggered via focus.\n        // when the user is using the mouse they only want tooltips to display\n        // on mouseover.\n        //\n        // Example: anchor of a popover is a button with tooltip.\n        // closing it with the mouse would trigger the tooltip to display as\n        // the anchor is focused on close. Not what we want.\n        if (this.show === null && this.hasVisibleFocus()) {\n          this.internalShow = true;\n        }\n      } else {\n        if (this.show === null) this.internalShow = true;\n      }\n    },\n\n    onLeaveAnchor (e) {\n      if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n      clearTimeout(this.inTimer);\n      this.inTimer = null;\n      this.triggerHide();\n    },\n\n    triggerHide () {\n      if (this.show === null) this.internalShow = false;\n    },\n\n    onChangePlacement (placement) {\n      this.currentPlacement = placement;\n    },\n\n    onHide () {\n      this.tip?.unmount();\n      this.$emit('shown', false);\n      if (this.show !== null) {\n        this.$emit('update:show', false);\n      }\n    },\n\n    onShow (tooltipInstance, callingMethod) {\n      if (!this.tooltipHasContent(tooltipInstance)) {\n        return false;\n      }\n      if (this.transition && callingMethod === 'onShow') {\n        return;\n      }\n      this.$emit('shown', true);\n      if (this.show !== null) {\n        this.$emit('update:show', true);\n      }\n    },\n\n    setProps () {\n      if (this.tip && this.tip.setProps) {\n        this.tip.setProps({\n          ...this.tippyProps,\n          // these need to be set here rather than in tippyProps because they are non-reactive\n          appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n          zIndex: this.calculateAnchorZindex(),\n        });\n      }\n    },\n\n    onMount () {\n      this.setProps();\n    },\n\n    tooltipHasContent (tooltipInstance) {\n      // don't show tooltip when no content\n      if (tooltipInstance.props.content.textContent.trim().length === 0) {\n        return false;\n      }\n      return true;\n    },\n\n    // set initial options here. If any of the options need to dynamically change, they should be put in\n    // tippyProps instead.\n    initOptions () {\n      const template = this.$refs.content;\n      return {\n        content: template,\n        arrow: '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"7\"><path d=\"M 14.5,7 8,0 1.5,7 Z\"/></svg>',\n        // transition duration - same as our custom fade delay in dialtone-globals.less\n        duration: 180,\n        interactive: false,\n        trigger: 'manual',\n        hideOnClick: false,\n        // disable tooltip from displaying on touch devices\n        touch: false,\n        onMount: this.onMount,\n        showOnCreate: this.internalShow,\n        popperOptions: getPopperOptions({\n          hasHideModifierEnabled: true,\n        }),\n      };\n    },\n\n    addExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor.addEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n\n    removeExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n@import 'tippy.js/dist/svg-arrow.css';\n\n.tippy-box[data-reference-hidden] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.tippy-box > .tippy-svg-arrow {\n  fill: var(--dt-color-surface-contrast);\n}\n\n.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {\n  fill: var(--dt-color-surface-moderate);\n}\n\n.tippy-box[data-animation='fade'][data-state='hidden'] {\n  opacity: 0;\n}\n</style>\n"],"names":["getUniqueString","TOOLTIP_DIRECTIONS","TOOLTIP_STICKY_VALUES","POPOVER_APPEND_TO_VALUES","TOOLTIP_KIND_MODIFIERS","hasSlotContent","TOOLTIP_DELAY_MS","getPopperOptions","getAnchor","createTippy","_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"tooltip.vue.cjs","sources":["../../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n  <div data-qa=\"dt-tooltip-container\">\n    <!-- disabling as the below events are for capturing events from interactive\n         elements within the span rather than on the span itself -->\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <span\n      v-if=\"!externalAnchor\"\n      ref=\"anchor\"\n      data-qa=\"dt-tooltip-anchor\"\n      @focusin=\"onEnterAnchor\"\n      @focusout=\"onLeaveAnchor\"\n      @mouseenter=\"onEnterAnchor\"\n      @mouseleave=\"onLeaveAnchor\"\n      @keydown.esc=\"onLeaveAnchor\"\n    >\n      <!-- @slot Slot for the anchor element -->\n      <slot\n        name=\"anchor\"\n      />\n    </span>\n    <div\n      :id=\"id\"\n      ref=\"content\"\n      data-qa=\"dt-tooltip\"\n      :class=\"[\n        'd-tooltip',\n        {\n          [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n        },\n        contentClass,\n      ]\"\n    >\n      <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n      <!-- after-leave event can be used instead of transitionend -->\n      <!-- @slot Slot for the content, defaults to message prop -->\n      <slot>\n        {{ message }}\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  TOOLTIP_KIND_MODIFIERS,\n  TOOLTIP_DIRECTIONS,\n  TOOLTIP_STICKY_VALUES,\n  TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { flushPromises, getUniqueString, hasSlotContent } from '@/common/utils';\nimport {\n  createTippy,\n  getAnchor,\n  getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/**\n * A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n */\nexport default {\n  name: 'DtTooltip',\n\n  props: {\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\"\n     * if defined, otherwise it will automatically position to a new location\n     * as it sees best fit. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => ['auto'],\n    },\n\n    /**\n     * If true, applies inverted styles to the tooltip\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the tooltip from its reference element\n     *  by the specified number of pixels. See\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 12],\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'top',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\n    },\n\n    /**\n     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: true,\n      validator: (sticky) => {\n        return TOOLTIP_STICKY_VALUES.includes(sticky);\n      },\n    },\n\n    /**\n     * Sets the element to which the tooltip is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * This prop is not reactive, must be set on initial render.\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Additional css classes for the tooltip content element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * A provided message for the tooltip content\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls whether hover/focus causes the tooltip to appear.\n     * Cannot be combined with the show prop. show value will be ignored.\n     * by default this is true, if you override with false, the tooltip will never show up.\n     */\n    enabled: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n     * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Whether the tooltip should have a transition effect (fade).\n     */\n    transition: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the tooltip will have a delay when being focused or moused over.\n     * @values true, false\n     */\n    delay: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/\n     */\n    theme: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * External anchor id to use in those cases the anchor can't be provided via the slot.\n     * For instance, using the combobox's input as the anchor for the popover.\n     */\n    externalAnchor: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when tooltip is shown or hidden\n     *\n     * @event shown\n     * @type {Boolean}\n     */\n    'shown',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      TOOLTIP_KIND_MODIFIERS,\n      hasSlotContent,\n      tip: null,\n\n      inTimer: null,\n\n      // Internal state for whether the tooltip is shown. Changing the prop\n      // will update this.\n      internalShow: false,\n\n      // this is where the placement currently is, this can be different than\n      // the placement prop when there is not enough available room for the tip\n      // to display and it uses a fallback placement.\n      currentPlacement: this.placement,\n    };\n  },\n\n  computed: {\n    // eslint-disable-next-line complexity\n    tippyProps () {\n      return {\n        offset: this.offset,\n        delay: this.delay ? TOOLTIP_DELAY_MS : false,\n        placement: this.placement,\n        sticky: this.sticky,\n        theme: this.inverted ? 'inverted' : this.theme,\n        animation: this.transition ? 'fade' : false,\n        // onShown only triggers when transition is truthy\n        onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n        // onShown will always be called, but it will be called before the animation is complete\n        onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n        onHidden: this.onHide,\n\n        popperOptions: getPopperOptions({\n          fallbackPlacements: this.fallbackPlacements,\n          hasHideModifierEnabled: true,\n          onChangePlacement: this.onChangePlacement,\n        }),\n      };\n    },\n\n    anchor () {\n      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n    },\n  },\n\n  watch: {\n\n    tippyProps: {\n      handler: 'setProps',\n      deep: true,\n    },\n\n    show: {\n      handler: function (show) {\n        if (show !== null && this.enabled) {\n          this.internalShow = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    internalShow (value) {\n      if (value) {\n        this.setProps();\n        this.tip.show();\n      } else {\n        this.tip.hide();\n      }\n    },\n\n    sticky (sticky) {\n      this.tip.setProps({\n        sticky,\n      });\n    },\n  },\n\n  async mounted () {\n    if (!this.enabled && this.show != null) {\n      console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n      console.warn('The show prop will be ignored.');\n    }\n\n    this.tip = createTippy(this.anchor, this.initOptions());\n    if (this.externalAnchor) {\n      await flushPromises();\n      this.addExternalAnchorEventListeners();\n    }\n  },\n\n  beforeUnmount () {\n    this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n    if (this.tip) {\n      this.tip?.destroy();\n    }\n  },\n\n  methods: {\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n        // anchor of popover is within a drawer.\n        this.$el.closest('.d-zi-drawer')) {\n        return 651;\n      } else {\n        return 400;\n      }\n    },\n\n    hasVisibleFocus () {\n      return this.anchor.matches(':focus-visible');\n    },\n\n    onEnterAnchor (e) {\n      if (!this.enabled) return;\n      if (this.delay && this.inTimer === null) {\n        this.inTimer = setTimeout(() => {\n          this.triggerShow(e);\n        }, TOOLTIP_DELAY_MS);\n      } else {\n        this.triggerShow(e);\n      }\n    },\n\n    triggerShow (e) {\n      if (e.type === 'focusin') {\n        // only show tooltips on visible focus when triggered via focus.\n        // when the user is using the mouse they only want tooltips to display\n        // on mouseover.\n        //\n        // Example: anchor of a popover is a button with tooltip.\n        // closing it with the mouse would trigger the tooltip to display as\n        // the anchor is focused on close. Not what we want.\n        if (this.show === null && this.hasVisibleFocus()) {\n          this.internalShow = true;\n        }\n      } else {\n        if (this.show === null) this.internalShow = true;\n      }\n    },\n\n    onLeaveAnchor (e) {\n      if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n      clearTimeout(this.inTimer);\n      this.inTimer = null;\n      this.triggerHide();\n    },\n\n    triggerHide () {\n      if (this.show === null) this.internalShow = false;\n    },\n\n    onChangePlacement (placement) {\n      this.currentPlacement = placement;\n    },\n\n    onHide () {\n      this.tip?.unmount();\n      this.$emit('shown', false);\n      if (this.show !== null) {\n        this.$emit('update:show', false);\n      }\n    },\n\n    onShow (tooltipInstance, callingMethod) {\n      if (!this.tooltipHasContent(tooltipInstance)) {\n        return false;\n      }\n      if (this.transition && callingMethod === 'onShow') {\n        return;\n      }\n      this.$emit('shown', true);\n      if (this.show !== null) {\n        this.$emit('update:show', true);\n      }\n    },\n\n    setProps () {\n      if (this.tip && this.tip.setProps) {\n        this.tip.setProps({\n          ...this.tippyProps,\n          // these need to be set here rather than in tippyProps because they are non-reactive\n          appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n          zIndex: this.calculateAnchorZindex(),\n        });\n      }\n    },\n\n    onMount () {\n      this.setProps();\n    },\n\n    tooltipHasContent (tooltipInstance) {\n      // don't show tooltip when no content\n      if (tooltipInstance.props.content.textContent.trim().length === 0) {\n        return false;\n      }\n      return true;\n    },\n\n    // set initial options here. If any of the options need to dynamically change, they should be put in\n    // tippyProps instead.\n    initOptions () {\n      const template = this.$refs.content;\n      return {\n        content: template,\n        arrow: '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"7\"><path d=\"M 14.5,7 8,0 1.5,7 Z\"/></svg>',\n        // transition duration - same as our custom fade delay in dialtone-globals.less\n        duration: 180,\n        interactive: false,\n        trigger: 'manual',\n        hideOnClick: false,\n        // disable tooltip from displaying on touch devices\n        touch: false,\n        onMount: this.onMount,\n        showOnCreate: this.internalShow,\n        popperOptions: getPopperOptions({\n          hasHideModifierEnabled: true,\n        }),\n      };\n    },\n\n    addExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor?.addEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor?.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n\n    removeExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor?.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor?.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n@import 'tippy.js/dist/svg-arrow.css';\n\n.tippy-box[data-reference-hidden] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.tippy-box > .tippy-svg-arrow {\n  fill: var(--dt-color-surface-contrast);\n}\n\n.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {\n  fill: var(--dt-color-surface-moderate);\n}\n\n.tippy-box[data-animation='fade'][data-state='hidden'] {\n  opacity: 0;\n}\n</style>\n"],"names":["getUniqueString","TOOLTIP_DIRECTIONS","TOOLTIP_STICKY_VALUES","POPOVER_APPEND_TO_VALUES","TOOLTIP_KIND_MODIFIERS","hasSlotContent","TOOLTIP_DELAY_MS","getPopperOptions","getAnchor","createTippy","flushPromises","_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { TOOLTIP_DIRECTIONS, TOOLTIP_STICKY_VALUES, TOOLTIP_KIND_MODIFIERS, TOOLTIP_DELAY_MS } from "./tooltip_constants.js";
 import { POPOVER_APPEND_TO_VALUES } from "../popover/popover_constants.js";
-import { getUniqueString, hasSlotContent } from "../../common/utils.js";
+import { getUniqueString, hasSlotContent, flushPromises } from "../../common/utils.js";
 import { getPopperOptions, getAnchor, createTippy } from "../popover/tippy_utils.js";
 import { openBlock, createElementBlock, withKeys, renderSlot, createCommentVNode, createElementVNode, normalizeClass, createTextVNode, toDisplayString } from "vue";
 /* empty css             */
@@ -263,13 +263,16 @@ const _sfc_main = {
       });
     }
   },
-  mounted() {
+  async mounted() {
     if (!this.enabled && this.show != null) {
       console.warn("Tooltip: You cannot use both the enabled and show props at the same time.");
       console.warn("The show prop will be ignored.");
     }
-    this.externalAnchor && this.addExternalAnchorEventListeners();
     this.tip = createTippy(this.anchor, this.initOptions());
+    if (this.externalAnchor) {
+      await flushPromises();
+      this.addExternalAnchorEventListeners();
+    }
   },
   beforeUnmount() {
     var _a;
@@ -385,18 +388,22 @@ const _sfc_main = {
     },
     addExternalAnchorEventListeners() {
       ["focusin", "mouseenter"].forEach((listener) => {
-        this.anchor.addEventListener(listener, (event) => this.onEnterAnchor(event));
+        var _a;
+        (_a = this.anchor) == null ? void 0 : _a.addEventListener(listener, (event) => this.onEnterAnchor(event));
       });
       ["focusout", "mouseleave", "keydown"].forEach((listener) => {
-        this.anchor.addEventListener(listener, (event) => this.onLeaveAnchor(event));
+        var _a;
+        (_a = this.anchor) == null ? void 0 : _a.addEventListener(listener, (event) => this.onLeaveAnchor(event));
       });
     },
     removeExternalAnchorEventListeners() {
       ["focusin", "mouseenter"].forEach((listener) => {
-        this.anchor.removeEventListener(listener, (event) => this.onEnterAnchor(event));
+        var _a;
+        (_a = this.anchor) == null ? void 0 : _a.removeEventListener(listener, (event) => this.onEnterAnchor(event));
       });
       ["focusout", "mouseleave", "keydown"].forEach((listener) => {
-        this.anchor.removeEventListener(listener, (event) => this.onLeaveAnchor(event));
+        var _a;
+        (_a = this.anchor) == null ? void 0 : _a.removeEventListener(listener, (event) => this.onLeaveAnchor(event));
       });
     }
   }

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.vue.js","sources":["../../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n  <div data-qa=\"dt-tooltip-container\">\n    <!-- disabling as the below events are for capturing events from interactive\n         elements within the span rather than on the span itself -->\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <span\n      v-if=\"!externalAnchor\"\n      ref=\"anchor\"\n      data-qa=\"dt-tooltip-anchor\"\n      @focusin=\"onEnterAnchor\"\n      @focusout=\"onLeaveAnchor\"\n      @mouseenter=\"onEnterAnchor\"\n      @mouseleave=\"onLeaveAnchor\"\n      @keydown.esc=\"onLeaveAnchor\"\n    >\n      <!-- @slot Slot for the anchor element -->\n      <slot\n        name=\"anchor\"\n      />\n    </span>\n    <div\n      :id=\"id\"\n      ref=\"content\"\n      data-qa=\"dt-tooltip\"\n      :class=\"[\n        'd-tooltip',\n        {\n          [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n        },\n        contentClass,\n      ]\"\n    >\n      <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n      <!-- after-leave event can be used instead of transitionend -->\n      <!-- @slot Slot for the content, defaults to message prop -->\n      <slot>\n        {{ message }}\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  TOOLTIP_KIND_MODIFIERS,\n  TOOLTIP_DIRECTIONS,\n  TOOLTIP_STICKY_VALUES,\n  TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport {\n  createTippy,\n  getAnchor,\n  getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/**\n * A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n */\nexport default {\n  name: 'DtTooltip',\n\n  props: {\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\"\n     * if defined, otherwise it will automatically position to a new location\n     * as it sees best fit. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => ['auto'],\n    },\n\n    /**\n     * If true, applies inverted styles to the tooltip\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the tooltip from its reference element\n     *  by the specified number of pixels. See\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 12],\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'top',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\n    },\n\n    /**\n     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: true,\n      validator: (sticky) => {\n        return TOOLTIP_STICKY_VALUES.includes(sticky);\n      },\n    },\n\n    /**\n     * Sets the element to which the tooltip is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * This prop is not reactive, must be set on initial render.\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Additional css classes for the tooltip content element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * A provided message for the tooltip content\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls whether hover/focus causes the tooltip to appear.\n     * Cannot be combined with the show prop. show value will be ignored.\n     * by default this is true, if you override with false, the tooltip will never show up.\n     */\n    enabled: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n     * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Whether the tooltip should have a transition effect (fade).\n     */\n    transition: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the tooltip will have a delay when being focused or moused over.\n     * @values true, false\n     */\n    delay: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/\n     */\n    theme: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * External anchor id to use in those cases the anchor can't be provided via the slot.\n     * For instance, using the combobox's input as the anchor for the popover.\n     */\n    externalAnchor: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when tooltip is shown or hidden\n     *\n     * @event shown\n     * @type {Boolean}\n     */\n    'shown',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      TOOLTIP_KIND_MODIFIERS,\n      hasSlotContent,\n      tip: null,\n\n      inTimer: null,\n\n      // Internal state for whether the tooltip is shown. Changing the prop\n      // will update this.\n      internalShow: false,\n\n      // this is where the placement currently is, this can be different than\n      // the placement prop when there is not enough available room for the tip\n      // to display and it uses a fallback placement.\n      currentPlacement: this.placement,\n    };\n  },\n\n  computed: {\n    // eslint-disable-next-line complexity\n    tippyProps () {\n      return {\n        offset: this.offset,\n        delay: this.delay ? TOOLTIP_DELAY_MS : false,\n        placement: this.placement,\n        sticky: this.sticky,\n        theme: this.inverted ? 'inverted' : this.theme,\n        animation: this.transition ? 'fade' : false,\n        // onShown only triggers when transition is truthy\n        onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n        // onShown will always be called, but it will be called before the animation is complete\n        onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n        onHidden: this.onHide,\n\n        popperOptions: getPopperOptions({\n          fallbackPlacements: this.fallbackPlacements,\n          hasHideModifierEnabled: true,\n          onChangePlacement: this.onChangePlacement,\n        }),\n      };\n    },\n\n    anchor () {\n      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n    },\n  },\n\n  watch: {\n\n    tippyProps: {\n      handler: 'setProps',\n      deep: true,\n    },\n\n    show: {\n      handler: function (show) {\n        if (show !== null && this.enabled) {\n          this.internalShow = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    internalShow (value) {\n      if (value) {\n        this.setProps();\n        this.tip.show();\n      } else {\n        this.tip.hide();\n      }\n    },\n\n    sticky (sticky) {\n      this.tip.setProps({\n        sticky,\n      });\n    },\n  },\n\n  mounted () {\n    if (!this.enabled && this.show != null) {\n      console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n      console.warn('The show prop will be ignored.');\n    }\n\n    this.externalAnchor && this.addExternalAnchorEventListeners();\n    this.tip = createTippy(this.anchor, this.initOptions());\n  },\n\n  beforeUnmount () {\n    this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n    if (this.tip) {\n      this.tip?.destroy();\n    }\n  },\n\n  methods: {\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n        // anchor of popover is within a drawer.\n        this.$el.closest('.d-zi-drawer')) {\n        return 651;\n      } else {\n        return 400;\n      }\n    },\n\n    hasVisibleFocus () {\n      return this.anchor.matches(':focus-visible');\n    },\n\n    onEnterAnchor (e) {\n      if (!this.enabled) return;\n      if (this.delay && this.inTimer === null) {\n        this.inTimer = setTimeout(() => {\n          this.triggerShow(e);\n        }, TOOLTIP_DELAY_MS);\n      } else {\n        this.triggerShow(e);\n      }\n    },\n\n    triggerShow (e) {\n      if (e.type === 'focusin') {\n        // only show tooltips on visible focus when triggered via focus.\n        // when the user is using the mouse they only want tooltips to display\n        // on mouseover.\n        //\n        // Example: anchor of a popover is a button with tooltip.\n        // closing it with the mouse would trigger the tooltip to display as\n        // the anchor is focused on close. Not what we want.\n        if (this.show === null && this.hasVisibleFocus()) {\n          this.internalShow = true;\n        }\n      } else {\n        if (this.show === null) this.internalShow = true;\n      }\n    },\n\n    onLeaveAnchor (e) {\n      if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n      clearTimeout(this.inTimer);\n      this.inTimer = null;\n      this.triggerHide();\n    },\n\n    triggerHide () {\n      if (this.show === null) this.internalShow = false;\n    },\n\n    onChangePlacement (placement) {\n      this.currentPlacement = placement;\n    },\n\n    onHide () {\n      this.tip?.unmount();\n      this.$emit('shown', false);\n      if (this.show !== null) {\n        this.$emit('update:show', false);\n      }\n    },\n\n    onShow (tooltipInstance, callingMethod) {\n      if (!this.tooltipHasContent(tooltipInstance)) {\n        return false;\n      }\n      if (this.transition && callingMethod === 'onShow') {\n        return;\n      }\n      this.$emit('shown', true);\n      if (this.show !== null) {\n        this.$emit('update:show', true);\n      }\n    },\n\n    setProps () {\n      if (this.tip && this.tip.setProps) {\n        this.tip.setProps({\n          ...this.tippyProps,\n          // these need to be set here rather than in tippyProps because they are non-reactive\n          appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n          zIndex: this.calculateAnchorZindex(),\n        });\n      }\n    },\n\n    onMount () {\n      this.setProps();\n    },\n\n    tooltipHasContent (tooltipInstance) {\n      // don't show tooltip when no content\n      if (tooltipInstance.props.content.textContent.trim().length === 0) {\n        return false;\n      }\n      return true;\n    },\n\n    // set initial options here. If any of the options need to dynamically change, they should be put in\n    // tippyProps instead.\n    initOptions () {\n      const template = this.$refs.content;\n      return {\n        content: template,\n        arrow: '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"7\"><path d=\"M 14.5,7 8,0 1.5,7 Z\"/></svg>',\n        // transition duration - same as our custom fade delay in dialtone-globals.less\n        duration: 180,\n        interactive: false,\n        trigger: 'manual',\n        hideOnClick: false,\n        // disable tooltip from displaying on touch devices\n        touch: false,\n        onMount: this.onMount,\n        showOnCreate: this.internalShow,\n        popperOptions: getPopperOptions({\n          hasHideModifierEnabled: true,\n        }),\n      };\n    },\n\n    addExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor.addEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n\n    removeExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n@import 'tippy.js/dist/svg-arrow.css';\n\n.tippy-box[data-reference-hidden] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.tippy-box > .tippy-svg-arrow {\n  fill: var(--dt-color-surface-contrast);\n}\n\n.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {\n  fill: var(--dt-color-surface-moderate);\n}\n\n.tippy-box[data-animation='fade'][data-state='hidden'] {\n  opacity: 0;\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"tooltip.vue.js","sources":["../../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n  <div data-qa=\"dt-tooltip-container\">\n    <!-- disabling as the below events are for capturing events from interactive\n         elements within the span rather than on the span itself -->\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <span\n      v-if=\"!externalAnchor\"\n      ref=\"anchor\"\n      data-qa=\"dt-tooltip-anchor\"\n      @focusin=\"onEnterAnchor\"\n      @focusout=\"onLeaveAnchor\"\n      @mouseenter=\"onEnterAnchor\"\n      @mouseleave=\"onLeaveAnchor\"\n      @keydown.esc=\"onLeaveAnchor\"\n    >\n      <!-- @slot Slot for the anchor element -->\n      <slot\n        name=\"anchor\"\n      />\n    </span>\n    <div\n      :id=\"id\"\n      ref=\"content\"\n      data-qa=\"dt-tooltip\"\n      :class=\"[\n        'd-tooltip',\n        {\n          [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n        },\n        contentClass,\n      ]\"\n    >\n      <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n      <!-- after-leave event can be used instead of transitionend -->\n      <!-- @slot Slot for the content, defaults to message prop -->\n      <slot>\n        {{ message }}\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  TOOLTIP_KIND_MODIFIERS,\n  TOOLTIP_DIRECTIONS,\n  TOOLTIP_STICKY_VALUES,\n  TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { flushPromises, getUniqueString, hasSlotContent } from '@/common/utils';\nimport {\n  createTippy,\n  getAnchor,\n  getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/**\n * A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n */\nexport default {\n  name: 'DtTooltip',\n\n  props: {\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\"\n     * if defined, otherwise it will automatically position to a new location\n     * as it sees best fit. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => ['auto'],\n    },\n\n    /**\n     * If true, applies inverted styles to the tooltip\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the tooltip from its reference element\n     *  by the specified number of pixels. See\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 12],\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'top',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\n    },\n\n    /**\n     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: true,\n      validator: (sticky) => {\n        return TOOLTIP_STICKY_VALUES.includes(sticky);\n      },\n    },\n\n    /**\n     * Sets the element to which the tooltip is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * This prop is not reactive, must be set on initial render.\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Additional css classes for the tooltip content element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * A provided message for the tooltip content\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls whether hover/focus causes the tooltip to appear.\n     * Cannot be combined with the show prop. show value will be ignored.\n     * by default this is true, if you override with false, the tooltip will never show up.\n     */\n    enabled: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n     * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Whether the tooltip should have a transition effect (fade).\n     */\n    transition: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the tooltip will have a delay when being focused or moused over.\n     * @values true, false\n     */\n    delay: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/\n     */\n    theme: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * External anchor id to use in those cases the anchor can't be provided via the slot.\n     * For instance, using the combobox's input as the anchor for the popover.\n     */\n    externalAnchor: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when tooltip is shown or hidden\n     *\n     * @event shown\n     * @type {Boolean}\n     */\n    'shown',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      TOOLTIP_KIND_MODIFIERS,\n      hasSlotContent,\n      tip: null,\n\n      inTimer: null,\n\n      // Internal state for whether the tooltip is shown. Changing the prop\n      // will update this.\n      internalShow: false,\n\n      // this is where the placement currently is, this can be different than\n      // the placement prop when there is not enough available room for the tip\n      // to display and it uses a fallback placement.\n      currentPlacement: this.placement,\n    };\n  },\n\n  computed: {\n    // eslint-disable-next-line complexity\n    tippyProps () {\n      return {\n        offset: this.offset,\n        delay: this.delay ? TOOLTIP_DELAY_MS : false,\n        placement: this.placement,\n        sticky: this.sticky,\n        theme: this.inverted ? 'inverted' : this.theme,\n        animation: this.transition ? 'fade' : false,\n        // onShown only triggers when transition is truthy\n        onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n        // onShown will always be called, but it will be called before the animation is complete\n        onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n        onHidden: this.onHide,\n\n        popperOptions: getPopperOptions({\n          fallbackPlacements: this.fallbackPlacements,\n          hasHideModifierEnabled: true,\n          onChangePlacement: this.onChangePlacement,\n        }),\n      };\n    },\n\n    anchor () {\n      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n    },\n  },\n\n  watch: {\n\n    tippyProps: {\n      handler: 'setProps',\n      deep: true,\n    },\n\n    show: {\n      handler: function (show) {\n        if (show !== null && this.enabled) {\n          this.internalShow = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    internalShow (value) {\n      if (value) {\n        this.setProps();\n        this.tip.show();\n      } else {\n        this.tip.hide();\n      }\n    },\n\n    sticky (sticky) {\n      this.tip.setProps({\n        sticky,\n      });\n    },\n  },\n\n  async mounted () {\n    if (!this.enabled && this.show != null) {\n      console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n      console.warn('The show prop will be ignored.');\n    }\n\n    this.tip = createTippy(this.anchor, this.initOptions());\n    if (this.externalAnchor) {\n      await flushPromises();\n      this.addExternalAnchorEventListeners();\n    }\n  },\n\n  beforeUnmount () {\n    this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n    if (this.tip) {\n      this.tip?.destroy();\n    }\n  },\n\n  methods: {\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n        // anchor of popover is within a drawer.\n        this.$el.closest('.d-zi-drawer')) {\n        return 651;\n      } else {\n        return 400;\n      }\n    },\n\n    hasVisibleFocus () {\n      return this.anchor.matches(':focus-visible');\n    },\n\n    onEnterAnchor (e) {\n      if (!this.enabled) return;\n      if (this.delay && this.inTimer === null) {\n        this.inTimer = setTimeout(() => {\n          this.triggerShow(e);\n        }, TOOLTIP_DELAY_MS);\n      } else {\n        this.triggerShow(e);\n      }\n    },\n\n    triggerShow (e) {\n      if (e.type === 'focusin') {\n        // only show tooltips on visible focus when triggered via focus.\n        // when the user is using the mouse they only want tooltips to display\n        // on mouseover.\n        //\n        // Example: anchor of a popover is a button with tooltip.\n        // closing it with the mouse would trigger the tooltip to display as\n        // the anchor is focused on close. Not what we want.\n        if (this.show === null && this.hasVisibleFocus()) {\n          this.internalShow = true;\n        }\n      } else {\n        if (this.show === null) this.internalShow = true;\n      }\n    },\n\n    onLeaveAnchor (e) {\n      if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n      clearTimeout(this.inTimer);\n      this.inTimer = null;\n      this.triggerHide();\n    },\n\n    triggerHide () {\n      if (this.show === null) this.internalShow = false;\n    },\n\n    onChangePlacement (placement) {\n      this.currentPlacement = placement;\n    },\n\n    onHide () {\n      this.tip?.unmount();\n      this.$emit('shown', false);\n      if (this.show !== null) {\n        this.$emit('update:show', false);\n      }\n    },\n\n    onShow (tooltipInstance, callingMethod) {\n      if (!this.tooltipHasContent(tooltipInstance)) {\n        return false;\n      }\n      if (this.transition && callingMethod === 'onShow') {\n        return;\n      }\n      this.$emit('shown', true);\n      if (this.show !== null) {\n        this.$emit('update:show', true);\n      }\n    },\n\n    setProps () {\n      if (this.tip && this.tip.setProps) {\n        this.tip.setProps({\n          ...this.tippyProps,\n          // these need to be set here rather than in tippyProps because they are non-reactive\n          appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n          zIndex: this.calculateAnchorZindex(),\n        });\n      }\n    },\n\n    onMount () {\n      this.setProps();\n    },\n\n    tooltipHasContent (tooltipInstance) {\n      // don't show tooltip when no content\n      if (tooltipInstance.props.content.textContent.trim().length === 0) {\n        return false;\n      }\n      return true;\n    },\n\n    // set initial options here. If any of the options need to dynamically change, they should be put in\n    // tippyProps instead.\n    initOptions () {\n      const template = this.$refs.content;\n      return {\n        content: template,\n        arrow: '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"7\"><path d=\"M 14.5,7 8,0 1.5,7 Z\"/></svg>',\n        // transition duration - same as our custom fade delay in dialtone-globals.less\n        duration: 180,\n        interactive: false,\n        trigger: 'manual',\n        hideOnClick: false,\n        // disable tooltip from displaying on touch devices\n        touch: false,\n        onMount: this.onMount,\n        showOnCreate: this.internalShow,\n        popperOptions: getPopperOptions({\n          hasHideModifierEnabled: true,\n        }),\n      };\n    },\n\n    addExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor?.addEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor?.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n\n    removeExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor?.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor?.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n@import 'tippy.js/dist/svg-arrow.css';\n\n.tippy-box[data-reference-hidden] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.tippy-box > .tippy-svg-arrow {\n  fill: var(--dt-color-surface-contrast);\n}\n\n.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {\n  fill: var(--dt-color-surface-moderate);\n}\n\n.tippy-box[data-animation='fade'][data-state='hidden'] {\n  opacity: 0;\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass"],"mappings":"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"}

package/dist/vue3/dialtone-vue.cjs

@@ -266,6 +266,8 @@ exports.DtInputGroup = input_group$1;
 exports.DtItemLayout = item_layout;
 exports.DtKeyboardShortcut = keyboard_shortcut;
 exports.SHORTCUTS_ALIASES_LIST = keyboard_shortcut_constants.SHORTCUTS_ALIASES_LIST;
+exports.SHORTCUTS_ICON_ALIASES = keyboard_shortcut_constants.SHORTCUTS_ICON_ALIASES;
+exports.SHORTCUTS_ICON_SEPARATOR = keyboard_shortcut_constants.SHORTCUTS_ICON_SEPARATOR;
 exports.DtLazyShow = lazy_show;
 exports.DtLink = link;
 exports.LINK_KIND_MODIFIERS = link_constants.LINK_KIND_MODIFIERS;
@@ -391,6 +393,7 @@ exports.DtRecipeContactRow = contact_row;
 exports.DtRecipeGeneralRow = general_row;
 exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = general_row_constants.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS;
 exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = general_row_constants.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR;
+exports.LEFTBAR_GENERAL_ROW_ICON_MAPPING = general_row_constants.LEFTBAR_GENERAL_ROW_ICON_MAPPING;
 exports.LEFTBAR_GENERAL_ROW_ICON_SIZES = general_row_constants.LEFTBAR_GENERAL_ROW_ICON_SIZES;
 exports.LEFTBAR_GENERAL_ROW_TYPES = general_row_constants.LEFTBAR_GENERAL_ROW_TYPES;
 exports.DtRecipeGroupRow = group_row;

package/dist/vue3/dialtone-vue.cjs.map

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