@dialpad/dialtone-vue 2.126.0 → 2.127.1

package/dist/lib/tooltip.js

@@ -1,15 +1,15 @@
-import { T as r, j as a, e as h, i as l, l as c, m as u, n as p, h as d } from "../chunks/popover_constants-qjlEkroB.js";
-import { k as D } from "../chunks/popover_constants-qjlEkroB.js";
-import { getUniqueString as f } from "./utils.js";
-import { n as m } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { DtLazyShow as y } from "./lazy-show.js";
+import { TOOLTIP_DIRECTIONS, TOOLTIP_STICKY_VALUES, POPOVER_APPEND_TO_VALUES, TOOLTIP_KIND_MODIFIERS, getPopperOptions, getAnchor, createTippy, TOOLTIP_DELAY_MS } from "../chunks/popover_constants-Qkpb0yh2.js";
+import { TOOLTIP_HIDE_ON_CLICK_VARIANTS } from "../chunks/popover_constants-Qkpb0yh2.js";
+import { getUniqueString } from "../common/utils.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtLazyShow } from "./lazy-show.js";
 import "tippy.js";
-import "./constants.js";
+import "../common/constants.js";
 import "vue";
-const T = {
+const _sfc_main = {
   name: "DtTooltip",
   components: {
-    DtLazyShow: y
+    DtLazyShow
   },
   props: {
     /**
@@ -18,7 +18,7 @@ const T = {
     id: {
       type: String,
       default() {
-        return f();
+        return getUniqueString();
       }
     },
     /**
@@ -44,7 +44,7 @@ const T = {
      */
     inverted: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      *  Displaces the tooltip from its reference element
@@ -79,8 +79,8 @@ const T = {
     placement: {
       type: String,
       default: "top",
-      validator(e) {
-        return r.includes(e);
+      validator(placement) {
+        return TOOLTIP_DIRECTIONS.includes(placement);
       }
     },
     /**
@@ -100,8 +100,10 @@ const T = {
      */
     sticky: {
       type: [Boolean, String],
-      default: !1,
-      validator: (e) => a.includes(e)
+      default: false,
+      validator: (sticky) => {
+        return TOOLTIP_STICKY_VALUES.includes(sticky);
+      }
     },
     /**
      * Sets the element to which the tooltip is going to append to.
@@ -112,7 +114,9 @@ const T = {
     appendTo: {
       type: [HTMLElement, String],
       default: "body",
-      validator: (e) => h.includes(e) || e instanceof HTMLElement
+      validator: (appendTo) => {
+        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
+      }
     },
     /**
      * Additional css classes for the tooltip content element.
@@ -137,7 +141,7 @@ const T = {
      */
     enabled: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.
@@ -163,7 +167,7 @@ const T = {
      */
     delay: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * External anchor id to use in those cases the anchor can't be provided via the slot.
@@ -191,26 +195,29 @@ const T = {
   ],
   data() {
     return {
-      TOOLTIP_KIND_MODIFIERS: l,
+      TOOLTIP_KIND_MODIFIERS,
       tip: null,
       inTimer: null,
       // Internal state for whether the tooltip is shown. Changing the prop
       // will update this.
-      isShown: !1,
+      isShown: false,
       // this is where the placement currently is, this can be different than
       // the placement prop when there is not enough available room for the tip
       // to display and it uses a fallback placement.
       currentPlacement: this.placement,
       // flag check touch based device
-      isTouchDevice: !1
+      isTouchDevice: false
     };
   },
   computed: {
     // whether the tooltip is visible or not.
     isVisible() {
-      var i, o;
-      const e = !!((i = this.message) != null && i.trim()), t = !!((o = this.$slots) != null && o.default), n = !this.isTouchDevice;
-      return this.isShown && this.enabled && (e || t) && n;
+      var _a, _b;
+      const hasMessage = !!((_a = this.message) == null ? void 0 : _a.trim());
+      const hasDefaultSlot = !!((_b = this.$slots) == null ? void 0 : _b.default);
+      const isDeviceCompatible = !this.isTouchDevice;
+      const shouldBeVisible = this.isShown && this.enabled && (hasMessage || hasDefaultSlot);
+      return shouldBeVisible && isDeviceCompatible;
     },
     tooltipListeners() {
       return {
@@ -226,88 +233,137 @@ const T = {
     tippyProps() {
       return {
         offset: this.offset,
-        interactive: !1,
+        interactive: false,
         trigger: "manual",
         placement: this.placement,
         sticky: this.sticky,
-        popperOptions: c({
+        popperOptions: getPopperOptions({
           fallbackPlacements: this.fallbackPlacements,
-          hasHideModifierEnabled: !0,
+          hasHideModifierEnabled: true,
           onChangePlacement: this.onChangePlacement
         })
       };
     },
     anchor() {
-      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : u(this.$refs.anchor);
+      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);
     }
   },
   watch: {
     tippyProps: {
       handler: "setProps",
-      deep: !0
+      deep: true
     },
     show: {
-      handler: function(e) {
-        e !== null && (this.isShown = e);
+      handler: function(show) {
+        if (show !== null) {
+          this.isShown = show;
+        }
       },
-      immediate: !0
-    },
-    isShown(e) {
-      e ? (this.setProps(), this.tip.show()) : this.tip.hide();
+      immediate: true
+    },
+    isShown(isShown) {
+      if (isShown) {
+        this.setProps();
+        this.tip.show();
+      } else {
+        this.tip.hide();
+      }
     },
-    sticky(e) {
+    sticky(sticky) {
       this.tip.setProps({
-        sticky: e
+        sticky
       });
     }
   },
   mounted() {
-    !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 = p(this.anchor, this.initOptions()), this.isShown && this.tip.show();
+    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.isShown) {
+      this.tip.show();
+    }
   },
   beforeDestroy() {
-    var e;
-    this.externalAnchor && this.removeExternalAnchorEventListeners(), this.tip && ((e = this.tip) == null || e.destroy());
+    var _a;
+    this.externalAnchor && this.removeExternalAnchorEventListeners();
+    if (this.tip) {
+      (_a = this.tip) == null ? void 0 : _a.destroy();
+    }
   },
   methods: {
     calculateAnchorZindex() {
-      return this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]') || // Special case because we don't have any dialtone drawer component yet. Render at 651 when
+      if (this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]') || // Special case because we don't have any dialtone drawer component yet. Render at 651 when
       // anchor of popover is within a drawer.
-      this.$el.closest(".d-zi-drawer") ? 651 : 400;
+      this.$el.closest(".d-zi-drawer")) {
+        return 651;
+      } else {
+        return 400;
+      }
     },
     hasVisibleFocus() {
       return this.anchor.matches(":focus-visible");
     },
     onEnterAnchor(e) {
-      this.isTouchDevice && !e.relatedTarget || (this.delay ? this.inTimer = setTimeout((function(t) {
-        this.triggerShow(t);
-      }).bind(this, e), d) : this.triggerShow(e), this.isTouchDevice = !1);
+      if (this.isTouchDevice && !e.relatedTarget)
+        return;
+      if (this.delay) {
+        this.inTimer = setTimeout((function(event) {
+          this.triggerShow(event);
+        }).bind(this, e), TOOLTIP_DELAY_MS);
+      } else {
+        this.triggerShow(e);
+      }
+      this.isTouchDevice = false;
     },
     triggerShow(e) {
-      e.type === "focusin" ? this.show === null && this.hasVisibleFocus() && (this.isShown = !0) : this.show === null && (this.isShown = !0);
+      if (e.type === "focusin") {
+        if (this.show === null && this.hasVisibleFocus()) {
+          this.isShown = true;
+        }
+      } else {
+        if (this.show === null)
+          this.isShown = true;
+      }
     },
     onLeaveAnchor(e) {
-      e.type === "keydown" && e.code !== "Escape" || (clearTimeout(this.inTimer), this.triggerHide());
+      if (e.type === "keydown" && e.code !== "Escape")
+        return;
+      clearTimeout(this.inTimer);
+      this.triggerHide();
     },
     triggerHide() {
-      this.show === null && (this.isShown = !1);
+      if (this.show === null)
+        this.isShown = false;
     },
-    onChangePlacement(e) {
-      this.currentPlacement = e;
+    onChangePlacement(placement) {
+      this.currentPlacement = placement;
     },
     onLeaveTransitionComplete() {
-      var e;
-      (e = this.tip) == null || e.unmount(), this.$emit("shown", !1), this.show !== null && this.$emit("update:show", !1);
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.unmount();
+      this.$emit("shown", false);
+      if (this.show !== null) {
+        this.$emit("update:show", false);
+      }
     },
     onEnterTransitionComplete() {
-      this.$emit("shown", !0), this.show !== null && this.$emit("update:show", !0);
+      this.$emit("shown", true);
+      if (this.show !== null) {
+        this.$emit("update:show", true);
+      }
     },
     setProps() {
-      var e, t;
-      this.tip && this.tip.setProps && this.tip.setProps({
-        ...this.tippyProps,
-        zIndex: this.calculateAnchorZindex(),
-        appendTo: this.appendTo === "body" ? (t = (e = this.anchor) == null ? void 0 : e.getRootNode()) == null ? void 0 : t.querySelector("body") : this.appendTo
-      });
+      var _a, _b;
+      if (this.tip && this.tip.setProps) {
+        this.tip.setProps({
+          ...this.tippyProps,
+          zIndex: this.calculateAnchorZindex(),
+          appendTo: this.appendTo === "body" ? (_b = (_a = this.anchor) == null ? void 0 : _a.getRootNode()) == null ? void 0 : _b.querySelector("body") : this.appendTo
+        });
+      }
     },
     onMount() {
       this.setProps();
@@ -315,62 +371,68 @@ const T = {
     initOptions() {
       return {
         contentElement: this.$refs.content.$el,
-        allowHTML: !0,
+        allowHTML: true,
         zIndex: this.calculateAnchorZindex(),
         onMount: this.onMount,
         ...this.tippyProps
       };
     },
     addExternalAnchorEventListeners() {
-      ["focusin", "mouseenter"].forEach((e) => {
-        this.anchor.addEventListener(e, (t) => this.onEnterAnchor(t));
-      }), ["focusout", "mouseleave", "keydown"].forEach((e) => {
-        this.anchor.addEventListener(e, (t) => this.onLeaveAnchor(t));
+      ["focusin", "mouseenter"].forEach((listener) => {
+        this.anchor.addEventListener(listener, (event) => this.onEnterAnchor(event));
+      });
+      ["focusout", "mouseleave", "keydown"].forEach((listener) => {
+        this.anchor.addEventListener(listener, (event) => this.onLeaveAnchor(event));
       });
     },
     removeExternalAnchorEventListeners() {
-      ["focusin", "mouseenter"].forEach((e) => {
-        this.anchor.removeEventListener(e, (t) => this.onEnterAnchor(t));
-      }), ["focusout", "mouseleave", "keydown"].forEach((e) => {
-        this.anchor.removeEventListener(e, (t) => this.onLeaveAnchor(t));
+      ["focusin", "mouseenter"].forEach((listener) => {
+        this.anchor.removeEventListener(listener, (event) => this.onEnterAnchor(event));
+      });
+      ["focusout", "mouseleave", "keydown"].forEach((listener) => {
+        this.anchor.removeEventListener(listener, (event) => this.onLeaveAnchor(event));
       });
     },
     onTouchStart() {
-      this.isTouchDevice = !0;
+      this.isTouchDevice = true;
     }
   }
 };
-var v = function() {
-  var t = this, n = t._self._c;
-  return n("div", { attrs: { "data-qa": "dt-tooltip-container" } }, [t.externalAnchor ? t._e() : n("span", { ref: "anchor", attrs: { "data-qa": "dt-tooltip-anchor" }, on: { focusin: t.onEnterAnchor, focusout: t.onLeaveAnchor, mouseenter: t.onEnterAnchor, mouseleave: t.onLeaveAnchor, keydown: function(s) {
-    return !s.type.indexOf("key") && t._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : t.onLeaveAnchor.apply(null, arguments);
-  }, touchstart: t.onTouchStart } }, [t._t("anchor")], 2), n("dt-lazy-show", t._g({ ref: "content", class: [
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { attrs: { "data-qa": "dt-tooltip-container" } }, [!_vm.externalAnchor ? _c("span", { ref: "anchor", attrs: { "data-qa": "dt-tooltip-anchor" }, on: { "focusin": _vm.onEnterAnchor, "focusout": _vm.onLeaveAnchor, "mouseenter": _vm.onEnterAnchor, "mouseleave": _vm.onLeaveAnchor, "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    return _vm.onLeaveAnchor.apply(null, arguments);
+  }, "touchstart": _vm.onTouchStart } }, [_vm._t("anchor")], 2) : _vm._e(), _c("dt-lazy-show", _vm._g({ ref: "content", class: [
     "d-tooltip",
-    `d-tooltip__arrow-tippy--${t.currentPlacement}`,
+    `d-tooltip__arrow-tippy--${_vm.currentPlacement}`,
     {
-      [t.TOOLTIP_KIND_MODIFIERS.inverted]: t.inverted
+      [_vm.TOOLTIP_KIND_MODIFIERS.inverted]: _vm.inverted
     },
-    t.contentClass
-  ], attrs: { id: t.id, show: t.isVisible, role: "tooltip", "aria-hidden": "false", "data-qa": "dt-tooltip", appear: "", transition: t.transition } }, t.tooltipListeners), [t._t("default", function() {
-    return [t._v(" " + t._s(t.message) + " ")];
+    _vm.contentClass
+  ], attrs: { "id": _vm.id, "show": _vm.isVisible, "role": "tooltip", "aria-hidden": "false", "data-qa": "dt-tooltip", "appear": "", "transition": _vm.transition } }, _vm.tooltipListeners), [_vm._t("default", function() {
+    return [_vm._v(" " + _vm._s(_vm.message) + " ")];
   })], 2)], 1);
-}, w = [], E = /* @__PURE__ */ m(
-  T,
-  v,
-  w,
-  !1,
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const O = E.exports;
+const DtTooltip = __component__.exports;
 export {
-  O as DtTooltip,
-  d as TOOLTIP_DELAY_MS,
-  r as TOOLTIP_DIRECTIONS,
-  D as TOOLTIP_HIDE_ON_CLICK_VARIANTS,
-  l as TOOLTIP_KIND_MODIFIERS,
-  a as TOOLTIP_STICKY_VALUES
+  DtTooltip,
+  TOOLTIP_DELAY_MS,
+  TOOLTIP_DIRECTIONS,
+  TOOLTIP_HIDE_ON_CLICK_VARIANTS,
+  TOOLTIP_KIND_MODIFIERS,
+  TOOLTIP_STICKY_VALUES
 };
 //# sourceMappingURL=tooltip.js.map

package/dist/lib/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.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      @touchstart=\"onTouchStart\"\n    >\n      <!-- @slot Slot for the anchor element -->\n      <slot\n        name=\"anchor\"\n      />\n    </span>\n    <dt-lazy-show\n      :id=\"id\"\n      ref=\"content\"\n      :show=\"isVisible\"\n      role=\"tooltip\"\n      aria-hidden=\"false\"\n      data-qa=\"dt-tooltip\"\n      appear\n      :transition=\"transition\"\n      :class=\"[\n        'd-tooltip',\n        `d-tooltip__arrow-tippy--${currentPlacement}`,\n        {\n          [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n        },\n        contentClass,\n      ]\"\n      v-on=\"tooltipListeners\"\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    </dt-lazy-show>\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 } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\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  components: {\n    DtLazyShow,\n  },\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, -4],\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: false,\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     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\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     * 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      tip: null,\n\n      inTimer: null,\n\n      // Internal state for whether the tooltip is shown. Changing the prop\n      // will update this.\n      isShown: 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      // flag check touch based device\n      isTouchDevice: false,\n    };\n  },\n\n  computed: {\n    // whether the tooltip is visible or not.\n    isVisible () {\n      const hasMessage = !!this.message?.trim();\n      const hasDefaultSlot = !!this.$slots?.default;\n      const isDeviceCompatible = !this.isTouchDevice;\n\n      const shouldBeVisible = this.isShown && this.enabled && (hasMessage || hasDefaultSlot);\n\n      return shouldBeVisible && isDeviceCompatible;\n    },\n\n    tooltipListeners () {\n      return {\n        ...this.$listeners,\n\n        'after-leave': () => {\n          this.onLeaveTransitionComplete();\n        },\n\n        'after-enter': () => {\n          this.onEnterTransitionComplete();\n        },\n      };\n    },\n\n    tippyProps () {\n      return {\n        offset: this.offset,\n        interactive: false,\n        trigger: 'manual',\n        placement: this.placement,\n        sticky: this.sticky,\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) {\n          this.isShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isShown (isShown) {\n      if (isShown) {\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    this.externalAnchor && this.addExternalAnchorEventListeners();\n    this.tip = createTippy(this.anchor, this.initOptions());\n\n    // immediate watcher fires before mounted, so have this here in case\n    // show prop was initially set to true.\n    if (this.isShown) {\n      this.tip.show();\n    }\n  },\n\n  beforeDestroy () {\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      // Note: This is to stop the call of mouseenter event when touchstart event is triggered,\n      //       as when triggered by click or touch, the relatedTarget property of MouseEvent is null\n      if (this.isTouchDevice && !e.relatedTarget) return;\n\n      if (this.delay) {\n        this.inTimer = setTimeout(function (event) {\n          this.triggerShow(event);\n        }.bind(this, e), TOOLTIP_DELAY_MS);\n      } else {\n        this.triggerShow(e);\n      }\n\n      // since this method will be trigger by mouse event, updating the flag is non-touch device\n      this.isTouchDevice = false;\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.isShown = true;\n        }\n      } else {\n        if (this.show === null) this.isShown = true;\n      }\n    },\n\n    onLeaveAnchor (e) {\n      if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n      clearTimeout(this.inTimer);\n      this.triggerHide();\n    },\n\n    triggerHide () {\n      if (this.show === null) this.isShown = false;\n    },\n\n    onChangePlacement (placement) {\n      this.currentPlacement = placement;\n    },\n\n    onLeaveTransitionComplete () {\n      this.tip?.unmount();\n      this.$emit('shown', false);\n      if (this.show !== null) {\n        this.$emit('update:show', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\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          zIndex: this.calculateAnchorZindex(),\n          appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n        });\n      }\n    },\n\n    onMount () {\n      this.setProps();\n    },\n\n    initOptions () {\n      return {\n        contentElement: this.$refs.content.$el,\n        allowHTML: true,\n        zIndex: this.calculateAnchorZindex(),\n        onMount: this.onMount,\n        ...this.tippyProps,\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    onTouchStart () {\n      this.isTouchDevice = true;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.tippy-box[data-popper-reference-hidden] {\n  .d-tooltip {\n    visibility: hidden;\n    pointer-events: none;\n  }\n}\n</style>\n"],"names":["_sfc_main","DtLazyShow","getUniqueString","placement","TOOLTIP_DIRECTIONS","sticky","TOOLTIP_STICKY_VALUES","appendTo","POPOVER_APPEND_TO_VALUES","TOOLTIP_KIND_MODIFIERS","hasMessage","_a","hasDefaultSlot","_b","isDeviceCompatible","getPopperOptions","getAnchor","show","isShown","createTippy","event","TOOLTIP_DELAY_MS","listener"],"mappings":";;;;;;;;AA0EA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAC,EAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAeA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA,GAAA,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAAC,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBA,QAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAE,MACAC,EAAA,SAAAD,CAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA,CAAA,aAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAE,MACAC,EAAA,SAAAD,CAAA,KACAA,aAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,wBAAAE;AAAA,MACA,KAAA;AAAA,MAEA,SAAA;AAAA;AAAA;AAAA,MAIA,SAAA;AAAA;AAAA;AAAA;AAAA,MAKA,kBAAA,KAAA;AAAA;AAAA,MAGA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,YAAA;;AACA,YAAAC,IAAA,CAAA,GAAAC,IAAA,KAAA,YAAA,QAAAA,EAAA,SACAC,IAAA,CAAA,GAAAC,IAAA,KAAA,WAAA,QAAAA,EAAA,UACAC,IAAA,CAAA,KAAA;AAIA,aAFA,KAAA,WAAA,KAAA,YAAAJ,KAAAE,MAEAE;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QAEA,eAAA,MAAA;AACA,eAAA,0BAAA;AAAA,QACA;AAAA,QAEA,eAAA,MAAA;AACA,eAAA,0BAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA;AAAA,QACA,QAAA,KAAA;AAAA,QACA,aAAA;AAAA,QACA,SAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,QAAA,KAAA;AAAA,QACA,eAAAC,EAAA;AAAA,UACA,oBAAA,KAAA;AAAA,UACA,wBAAA;AAAA,UACA,mBAAA,KAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,SAAA;AACA,aAAA,KAAA,iBAAA,SAAA,KAAA,cAAA,KAAA,cAAA,IAAAC,EAAA,KAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IAEA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,MAAA;AAAA,MACA,SAAA,SAAAC,GAAA;AACA,QAAAA,MAAA,SACA,KAAA,UAAAA;AAAA,MAEA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,QAAAC,GAAA;AACA,MAAAA,KACA,KAAA,SAAA,GACA,KAAA,IAAA,UAEA,KAAA,IAAA;IAEA;AAAA,IAEA,OAAAb,GAAA;AACA,WAAA,IAAA,SAAA;AAAA,QACA,QAAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,IAAA,CAAA,KAAA,WAAA,KAAA,QAAA,SACA,QAAA,KAAA,2EAAA,GACA,QAAA,KAAA,gCAAA,IAEA,KAAA,kBAAA,KAAA,mCACA,KAAA,MAAAc,EAAA,KAAA,QAAA,KAAA,YAAA,CAAA,GAIA,KAAA,WACA,KAAA,IAAA;EAEA;AAAA,EAEA,gBAAA;;AACA,SAAA,kBAAA,KAAA,sCAEA,KAAA,SACAR,IAAA,KAAA,QAAA,QAAAA,EAAA;AAAA,EAEA;AAAA,EAEA,SAAA;AAAA,IACA,wBAAA;AAEA,aAAA,KAAA,IAAA,YAAA,EACA,cAAA,2EAAA;AAAA;AAAA,MAGA,KAAA,IAAA,QAAA,cAAA,IACA,MAEA;AAAA,IAEA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,OAAA,QAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA,GAAA;AAGA,MAAA,KAAA,iBAAA,CAAA,EAAA,kBAEA,KAAA,QACA,KAAA,UAAA,YAAA,SAAAS,GAAA;AACA,aAAA,YAAAA,CAAA;AAAA,MACA,GAAA,KAAA,MAAA,CAAA,GAAAC,CAAA,IAEA,KAAA,YAAA,CAAA,GAIA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,YAAA,GAAA;AACA,MAAA,EAAA,SAAA,YAQA,KAAA,SAAA,QAAA,KAAA,gBAAA,MACA,KAAA,UAAA,MAGA,KAAA,SAAA,SAAA,KAAA,UAAA;AAAA,IAEA;AAAA,IAEA,cAAA,GAAA;AACA,MAAA,EAAA,SAAA,aAAA,EAAA,SAAA,aAEA,aAAA,KAAA,OAAA,GACA,KAAA,YAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,MAAA,KAAA,SAAA,SAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,kBAAAlB,GAAA;AACA,WAAA,mBAAAA;AAAA,IACA;AAAA,IAEA,4BAAA;;AACA,OAAAQ,IAAA,KAAA,QAAA,QAAAA,EAAA,WACA,KAAA,MAAA,SAAA,EAAA,GACA,KAAA,SAAA,QACA,KAAA,MAAA,eAAA,EAAA;AAAA,IAEA;AAAA,IAEA,4BAAA;AACA,WAAA,MAAA,SAAA,EAAA,GACA,KAAA,SAAA,QACA,KAAA,MAAA,eAAA,EAAA;AAAA,IAEA;AAAA,IAEA,WAAA;;AACA,MAAA,KAAA,OAAA,KAAA,IAAA,YACA,KAAA,IAAA,SAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,QAAA,KAAA,sBAAA;AAAA,QACA,UAAA,KAAA,aAAA,UAAAE,KAAAF,IAAA,KAAA,WAAA,gBAAAA,EAAA,kBAAA,gBAAAE,EAAA,cAAA,UAAA,KAAA;AAAA,MACA,CAAA;AAAA,IAEA;AAAA,IAEA,UAAA;AACA,WAAA,SAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA;AAAA,QACA,gBAAA,KAAA,MAAA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAA,KAAA,sBAAA;AAAA,QACA,SAAA,KAAA;AAAA,QACA,GAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kCAAA;AACA,OAAA,WAAA,YAAA,EAAA,QAAA,CAAAS,MAAA;AACA,aAAA,OAAA,iBAAAA,GAAA,CAAAF,MAAA,KAAA,cAAAA,CAAA,CAAA;AAAA,MACA,CAAA,GACA,CAAA,YAAA,cAAA,SAAA,EAAA,QAAA,CAAAE,MAAA;AACA,aAAA,OAAA,iBAAAA,GAAA,CAAAF,MAAA,KAAA,cAAAA,CAAA,CAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,qCAAA;AACA,OAAA,WAAA,YAAA,EAAA,QAAA,CAAAE,MAAA;AACA,aAAA,OAAA,oBAAAA,GAAA,CAAAF,MAAA,KAAA,cAAAA,CAAA,CAAA;AAAA,MACA,CAAA,GACA,CAAA,YAAA,cAAA,SAAA,EAAA,QAAA,CAAAE,MAAA;AACA,aAAA,OAAA,oBAAAA,GAAA,CAAAF,MAAA,KAAA,cAAAA,CAAA,CAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tooltip.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      @touchstart=\"onTouchStart\"\n    >\n      <!-- @slot Slot for the anchor element -->\n      <slot\n        name=\"anchor\"\n      />\n    </span>\n    <dt-lazy-show\n      :id=\"id\"\n      ref=\"content\"\n      :show=\"isVisible\"\n      role=\"tooltip\"\n      aria-hidden=\"false\"\n      data-qa=\"dt-tooltip\"\n      appear\n      :transition=\"transition\"\n      :class=\"[\n        'd-tooltip',\n        `d-tooltip__arrow-tippy--${currentPlacement}`,\n        {\n          [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n        },\n        contentClass,\n      ]\"\n      v-on=\"tooltipListeners\"\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    </dt-lazy-show>\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 } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\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  components: {\n    DtLazyShow,\n  },\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, -4],\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: false,\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     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\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     * 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      tip: null,\n\n      inTimer: null,\n\n      // Internal state for whether the tooltip is shown. Changing the prop\n      // will update this.\n      isShown: 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      // flag check touch based device\n      isTouchDevice: false,\n    };\n  },\n\n  computed: {\n    // whether the tooltip is visible or not.\n    isVisible () {\n      const hasMessage = !!this.message?.trim();\n      const hasDefaultSlot = !!this.$slots?.default;\n      const isDeviceCompatible = !this.isTouchDevice;\n\n      const shouldBeVisible = this.isShown && this.enabled && (hasMessage || hasDefaultSlot);\n\n      return shouldBeVisible && isDeviceCompatible;\n    },\n\n    tooltipListeners () {\n      return {\n        ...this.$listeners,\n\n        'after-leave': () => {\n          this.onLeaveTransitionComplete();\n        },\n\n        'after-enter': () => {\n          this.onEnterTransitionComplete();\n        },\n      };\n    },\n\n    tippyProps () {\n      return {\n        offset: this.offset,\n        interactive: false,\n        trigger: 'manual',\n        placement: this.placement,\n        sticky: this.sticky,\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) {\n          this.isShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isShown (isShown) {\n      if (isShown) {\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    this.externalAnchor && this.addExternalAnchorEventListeners();\n    this.tip = createTippy(this.anchor, this.initOptions());\n\n    // immediate watcher fires before mounted, so have this here in case\n    // show prop was initially set to true.\n    if (this.isShown) {\n      this.tip.show();\n    }\n  },\n\n  beforeDestroy () {\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      // Note: This is to stop the call of mouseenter event when touchstart event is triggered,\n      //       as when triggered by click or touch, the relatedTarget property of MouseEvent is null\n      if (this.isTouchDevice && !e.relatedTarget) return;\n\n      if (this.delay) {\n        this.inTimer = setTimeout(function (event) {\n          this.triggerShow(event);\n        }.bind(this, e), TOOLTIP_DELAY_MS);\n      } else {\n        this.triggerShow(e);\n      }\n\n      // since this method will be trigger by mouse event, updating the flag is non-touch device\n      this.isTouchDevice = false;\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.isShown = true;\n        }\n      } else {\n        if (this.show === null) this.isShown = true;\n      }\n    },\n\n    onLeaveAnchor (e) {\n      if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n      clearTimeout(this.inTimer);\n      this.triggerHide();\n    },\n\n    triggerHide () {\n      if (this.show === null) this.isShown = false;\n    },\n\n    onChangePlacement (placement) {\n      this.currentPlacement = placement;\n    },\n\n    onLeaveTransitionComplete () {\n      this.tip?.unmount();\n      this.$emit('shown', false);\n      if (this.show !== null) {\n        this.$emit('update:show', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\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          zIndex: this.calculateAnchorZindex(),\n          appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n        });\n      }\n    },\n\n    onMount () {\n      this.setProps();\n    },\n\n    initOptions () {\n      return {\n        contentElement: this.$refs.content.$el,\n        allowHTML: true,\n        zIndex: this.calculateAnchorZindex(),\n        onMount: this.onMount,\n        ...this.tippyProps,\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    onTouchStart () {\n      this.isTouchDevice = true;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.tippy-box[data-popper-reference-hidden] {\n  .d-tooltip {\n    visibility: hidden;\n    pointer-events: none;\n  }\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/lib/top-banner-info.cjs

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const COLOR_CODES = [
+  "green300",
+  "green100",
+  "red200",
+  "red100",
+  "gold100",
+  "gold200",
+  "black100",
+  "white"
+];
+const _sfc_main = {
+  name: "DtRecipeTopBannerInfo",
+  props: {
+    /**
+     * color of the banner background
+     */
+    colorCode: {
+      type: String,
+      default: "green300",
+      validator: function(kind) {
+        return COLOR_CODES.includes(kind);
+      }
+    }
+  },
+  computed: {
+    bannerInfoClass() {
+      const bgColors = {
+        // these are too specific, so for now I'm at least updating the resultant semantic value
+        // TODO: breaking change: update to be more abstract
+        green300: "d-bgc-success",
+        green100: "d-bgc-success",
+        red200: "d-bgc-critical",
+        red100: "d-bgc-critical",
+        gold200: "d-bgc-warning",
+        gold100: "d-bgc-warning",
+        black100: "d-bgc-info",
+        white: "d-bgc-primary"
+      };
+      return [bgColors[this.colorCode]];
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "dt-top-banner-info", class: _vm.bannerInfoClass, attrs: { "data-qa": "banner-info" } }, [_c("div", { staticClass: "dt-top-banner-info__left" }, [_vm._t("left")], 2), _c("div", { staticClass: "dt-top-banner-info__middle", attrs: { "data-qa": "banner-info--middle" } }, [_vm._t("default")], 2), _c("div", { staticClass: "dt-top-banner-info__right" }, [_vm._t("right")], 2)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const top_banner_info = __component__.exports;
+exports.COLOR_CODES = COLOR_CODES;
+exports.DtRecipeTopBannerInfo = top_banner_info;
+//# sourceMappingURL=top-banner-info.cjs.map

package/dist/lib/top-banner-info.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-banner-info.cjs","sources":["../../recipes/notices/top_banner_info/top_banner_info_constants.js","../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n","<template>\n  <div\n    class=\"dt-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"dt-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"dt-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"dt-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-top-banner-info {\n  font-size: var(--dt-font-size-100);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--dt-color-foreground-primary);\n\n   &__left {\n     margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);\n     min-width: 20%;\n  }\n  &__middle {\n     display: flex;\n     align-items: center;\n     gap: var(--dt-size-300);\n     margin-top: var(--dt-space-300);\n    margin-bottom: var(--dt-space-300);\n  }\n  &__right {\n     display: flex;\n     align-items: baseline;\n     justify-content: flex-end;\n     gap: var(--dt-size-300);\n     margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;\n     min-width: 20%;\n     text-align: right;\n  }\n}\n</style>\n"],"names":[],"mappings":";;;AAAY,MAAC,cAAc;AAAA,EAAC;AAAA,EAAY;AAAA,EAAY;AAAA,EAAU;AAAA,EAAU;AAAA,EACtE;AAAA,EAAW;AAAA,EAAY;AAAO;ACyBhC,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,SAAA,MAAA;AACA,eAAA,YAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kBAAA;AACA,YAAA,WAAA;AAAA;AAAA;AAAA,QAGA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA;AAAA,QACA,OAAA;AAAA,MACA;AACA,aAAA,CAAA,SAAA,KAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}