@dialpad/dialtone-vue 2.124.0 → 2.125.1-alpha.1

package/dist/lib/toggle.js

@@ -0,0 +1,169 @@
+import s from "vue";
+import i from "./utils.js";
+import { n } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import "./constants.js";
+const a = {
+  sm: "d-toggle--small",
+  md: ""
+}, r = [!1, !0, "mixed"], d = {
+  name: "DtToggle",
+  inheritAttrs: !1,
+  model: {
+    prop: "checked",
+    event: "change"
+  },
+  props: {
+    /**
+     * The id of the toggle
+     */
+    id: {
+      type: String,
+      default() {
+        return i.getUniqueString();
+      }
+    },
+    /**
+     * Disables the toggle interactions
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Value of the toggle
+     * @model checked
+     * @values true, false, 'mixed'
+     */
+    checked: {
+      type: [Boolean, String],
+      default: !1,
+      validator: (t) => r.includes(t)
+    },
+    /**
+     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually
+     * via the checked prop or v-model. Change events will still be triggered.
+     * @values true, false
+     */
+    toggleOnClick: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * The size of the toggle.
+     * @values sm, md
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (t) => Object.keys(a).includes(t)
+    },
+    /**
+     * Shows the icon
+     * @values true, false
+     */
+    showIcon: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Used to customize the label container
+     */
+    labelClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * A set of props that are passed into the label container
+     */
+    labelChildProps: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: [
+    /**
+     * Toggle change event
+     *
+     * @event change
+     * @type {Boolean}
+     * @model change
+     */
+    "change"
+  ],
+  data() {
+    return {
+      internalChecked: this.checked
+    };
+  },
+  computed: {
+    inputListeners() {
+      return {
+        ...this.$listeners,
+        click: (t) => this.toggleCheckedValue()
+      };
+    },
+    isIndeterminate() {
+      return this.internalChecked === "mixed";
+    },
+    toggleRole() {
+      return this.isIndeterminate ? "checkbox" : "switch";
+    },
+    toggleClasses() {
+      return [
+        "d-toggle",
+        a[this.size],
+        {
+          "d-toggle--checked": this.internalChecked === !0,
+          "d-toggle--disabled": this.disabled,
+          "d-toggle--indeterminate": this.isIndeterminate
+        }
+      ];
+    }
+  },
+  watch: {
+    checked(t) {
+      this.internalChecked = t;
+    }
+  },
+  mounted() {
+    this.runValidations();
+  },
+  methods: {
+    toggleCheckedValue() {
+      this.$emit("change", !this.internalChecked), this.toggleOnClick && (this.internalChecked = !this.internalChecked);
+    },
+    hasSlotLabel() {
+      return !!this.$slots.default;
+    },
+    runValidations() {
+      this.validateInputLabels(this.hasSlotLabel(), this.$attrs["aria-label"]);
+    },
+    validateInputLabels(t, e) {
+      !t && !e && s.util.warn(
+        "You must provide an aria-label when there is no label passed",
+        this
+      );
+    }
+  }
+};
+var o = function() {
+  var e = this, l = e._self._c;
+  return l("div", { staticClass: "d-toggle-wrapper" }, [e.$slots.default ? l("label", e._b({ class: e.labelClass, attrs: { for: e.id, "data-qa": "toggle-label" } }, "label", e.labelChildProps, !1), [e._t("default")], 2) : e._e(), l("button", e._g(e._b({ class: e.toggleClasses, attrs: { id: e.id, role: e.toggleRole, type: "button", "aria-checked": e.internalChecked.toString(), disabled: e.disabled, "aria-disabled": e.disabled.toString() } }, "button", e.$attrs, !1), e.inputListeners), [e.showIcon ? l("span", { staticClass: "d-toggle__inner" }) : e._e()])]);
+}, c = [], h = /* @__PURE__ */ n(
+  d,
+  o,
+  c,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const m = h.exports;
+export {
+  m as DtToggle,
+  r as TOGGLE_CHECKED_VALUES,
+  a as TOGGLE_SIZE_MODIFIERS
+};
+//# sourceMappingURL=toggle.js.map

package/dist/lib/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sources":["../../components/toggle/toggle_constants.js","../../components/toggle/toggle.vue"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n","<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"$slots.default\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"$attrs\"\n      v-on=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport utils from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.checked,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        click: _ => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        Vue.util.warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["TOGGLE_SIZE_MODIFIERS","TOGGLE_CHECKED_VALUES","_sfc_main","utils","v","s","_","newChecked","hasLabel","ariaLabel","Vue"],"mappings":"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"}

package/dist/{directives.js → lib/tooltip-directive.js}

@@ -1,11 +1,17 @@
-import { D as n, g as c } from "./tooltip-88U5vFMA.js";
+import { getUniqueString as m } from "./utils.js";
+import { DtTooltip as n } from "./tooltip.js";
+import "./constants.js";
 import "vue";
-const v = {
+import "../chunks/popover_constants-qjlEkroB.js";
+import "tippy.js";
+import "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import "./lazy-show.js";
+const E = {
   name: "dt-tooltip-directive",
-  install(s) {
+  install(r) {
     const l = document.createElement("div");
     document.body.appendChild(l);
-    const a = "top", p = new s({
+    const a = "top", p = new r({
       name: "DtTooltipDirectiveApp",
       components: { DtTooltip: n },
       data() {
@@ -14,9 +20,9 @@ const v = {
         };
       },
       methods: {
-        addOrUpdateTooltip(t, o, e) {
-          const i = this.tooltips.findIndex((d) => d.id === t);
-          i !== -1 ? (this.tooltips[i].message = o, this.tooltips[i].placement = e) : this.tooltips.push({ id: t, message: o, placement: e });
+        addOrUpdateTooltip(t, o, i) {
+          const e = this.tooltips.findIndex((d) => d.id === t);
+          e !== -1 ? (this.tooltips[e].message = o, this.tooltips[e].placement = i) : this.tooltips.push({ id: t, message: o, placement: i });
         },
         removeTooltip(t) {
           this.tooltips = this.tooltips.filter((o) => o.id !== t);
@@ -29,11 +35,11 @@ const v = {
             domProps: { id: "dt-tooltip-directive-app" }
           },
           [
-            this.tooltips.map(({ id: o, message: e, placement: i }) => t(n, {
+            this.tooltips.map(({ id: o, message: i, placement: e }) => t(n, {
               key: o,
               props: {
-                message: e,
-                placement: i,
+                message: i,
+                placement: e,
                 /**
                  * Set the delay to false when running tests only.
                  */
@@ -45,23 +51,24 @@ const v = {
         );
       }
     });
-    p.$mount(l), s.directive("dt-tooltip", {
+    p.$mount(l), r.directive("dt-tooltip", {
       bind(t, o) {
-        r(t, o);
+        s(t, o);
       },
       update(t, o) {
-        o.value !== o.oldValue && r(t, o);
+        o.value !== o.oldValue && s(t, o);
       },
       unbind(t) {
         p.removeTooltip(t.getAttribute("data-dt-tooltip-id"));
       }
     });
-    function r(t, o) {
-      const e = t.getAttribute("data-dt-tooltip-id") || c(), i = o.value, d = o.arg || a;
-      t.setAttribute("data-dt-tooltip-id", e), p.addOrUpdateTooltip(e, i, d);
+    function s(t, o) {
+      const i = t.getAttribute("data-dt-tooltip-id") || m(), e = o.value, d = o.arg || a;
+      t.setAttribute("data-dt-tooltip-id", i), p.addOrUpdateTooltip(i, e, d);
     }
   }
 };
 export {
-  v as DtTooltipDirective
+  E as DtTooltipDirective
 };
+//# sourceMappingURL=tooltip-directive.js.map

package/dist/lib/tooltip-directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-directive.js","sources":["../../directives/tooltip/tooltip.js"],"sourcesContent":["import { DtTooltip } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\n\nexport const DtTooltipDirective = {\n  name: 'dt-tooltip-directive',\n  install (Vue) {\n    const mountPoint = document.createElement('div');\n    document.body.appendChild(mountPoint);\n\n    const DEFAULT_PLACEMENT = 'top';\n    const DtTooltipDirectiveApp = new Vue({\n      name: 'DtTooltipDirectiveApp',\n      components: { DtTooltip },\n      data () {\n        return {\n          tooltips: [],\n        };\n      },\n\n      methods: {\n        addOrUpdateTooltip (id, message, placement) {\n          const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n          if (index !== -1) {\n            // Update existing tooltip\n            this.tooltips[index].message = message;\n            this.tooltips[index].placement = placement;\n          } else {\n            // Add new tooltip\n            this.tooltips.push({ id, message, placement });\n          }\n        },\n\n        removeTooltip (id) {\n          this.tooltips = this.tooltips.filter(tooltip => tooltip.id !== id);\n        },\n      },\n\n      render (h) {\n        return h('div',\n          {\n            domProps: { id: 'dt-tooltip-directive-app' },\n          },\n          [\n            this.tooltips.map(({ id, message, placement }) => {\n              return h(DtTooltip, {\n                key: id,\n                props: {\n                  message,\n                  placement,\n                  /**\n                   * Set the delay to false when running tests only.\n                   */\n                  delay: process.env.NODE_ENV !== 'test',\n                  externalAnchor: `[data-dt-tooltip-id=\"${id}\"]`,\n                },\n              });\n            }),\n          ],\n        );\n      },\n    });\n\n    DtTooltipDirectiveApp.$mount(mountPoint);\n\n    Vue.directive('dt-tooltip', {\n      bind (anchor, binding) {\n        // Initial tooltip setup\n        setupTooltip(anchor, binding);\n      },\n      update (anchor, binding) {\n        // Update tooltip on binding value change\n        if (binding.value !== binding.oldValue) {\n          setupTooltip(anchor, binding);\n        }\n      },\n      unbind (anchor) {\n        DtTooltipDirectiveApp.removeTooltip(anchor.getAttribute('data-dt-tooltip-id'));\n      },\n    });\n\n    function setupTooltip (anchor, binding) {\n      const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n      const message = binding.value;\n      const placement = binding.arg || DEFAULT_PLACEMENT;\n\n      anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n      DtTooltipDirectiveApp.addOrUpdateTooltip(tooltipId, message, placement);\n    }\n  },\n};\n\nexport default DtTooltipDirective;\n"],"names":["DtTooltipDirective","Vue","mountPoint","DEFAULT_PLACEMENT","DtTooltipDirectiveApp","DtTooltip","id","message","placement","index","tooltip","h","anchor","binding","setupTooltip","tooltipId","getUniqueString"],"mappings":";;;;;;;;AAGY,MAACA,IAAqB;AAAA,EAChC,MAAM;AAAA,EACN,QAASC,GAAK;AACZ,UAAMC,IAAa,SAAS,cAAc,KAAK;AAC/C,aAAS,KAAK,YAAYA,CAAU;AAEpC,UAAMC,IAAoB,OACpBC,IAAwB,IAAIH,EAAI;AAAA,MACpC,MAAM;AAAA,MACN,YAAY,EAAE,WAAAI,EAAW;AAAA,MACzB,OAAQ;AACN,eAAO;AAAA,UACL,UAAU,CAAE;AAAA,QACtB;AAAA,MACO;AAAA,MAED,SAAS;AAAA,QACP,mBAAoBC,GAAIC,GAASC,GAAW;AAC1C,gBAAMC,IAAQ,KAAK,SAAS,UAAU,CAAAC,MAAWA,EAAQ,OAAOJ,CAAE;AAClE,UAAIG,MAAU,MAEZ,KAAK,SAASA,CAAK,EAAE,UAAUF,GAC/B,KAAK,SAASE,CAAK,EAAE,YAAYD,KAGjC,KAAK,SAAS,KAAK,EAAE,IAAAF,GAAI,SAAAC,GAAS,WAAAC,EAAS,CAAE;AAAA,QAEhD;AAAA,QAED,cAAeF,GAAI;AACjB,eAAK,WAAW,KAAK,SAAS,OAAO,CAAAI,MAAWA,EAAQ,OAAOJ,CAAE;AAAA,QAClE;AAAA,MACF;AAAA,MAED,OAAQK,GAAG;AACT,eAAOA;AAAA,UAAE;AAAA,UACP;AAAA,YACE,UAAU,EAAE,IAAI,2BAA4B;AAAA,UAC7C;AAAA,UACD;AAAA,YACE,KAAK,SAAS,IAAI,CAAC,EAAE,IAAAL,GAAI,SAAAC,GAAS,WAAAC,QACzBG,EAAEN,GAAW;AAAA,cAClB,KAAKC;AAAA,cACL,OAAO;AAAA,gBACL,SAAAC;AAAA,gBACA,WAAAC;AAAA;AAAA;AAAA;AAAA,gBAIA,OAAO,QAAQ,IAAI,aAAa;AAAA,gBAChC,gBAAgB,wBAAwBF,CAAE;AAAA,cAC3C;AAAA,YACjB,CAAe,CACF;AAAA,UACF;AAAA,QACX;AAAA,MACO;AAAA,IACP,CAAK;AAED,IAAAF,EAAsB,OAAOF,CAAU,GAEvCD,EAAI,UAAU,cAAc;AAAA,MAC1B,KAAMW,GAAQC,GAAS;AAErB,QAAAC,EAAaF,GAAQC,CAAO;AAAA,MAC7B;AAAA,MACD,OAAQD,GAAQC,GAAS;AAEvB,QAAIA,EAAQ,UAAUA,EAAQ,YAC5BC,EAAaF,GAAQC,CAAO;AAAA,MAE/B;AAAA,MACD,OAAQD,GAAQ;AACd,QAAAR,EAAsB,cAAcQ,EAAO,aAAa,oBAAoB,CAAC;AAAA,MAC9E;AAAA,IACP,CAAK;AAED,aAASE,EAAcF,GAAQC,GAAS;AACtC,YAAME,IAAYH,EAAO,aAAa,oBAAoB,KAAKI,EAAe,GACxET,IAAUM,EAAQ,OAClBL,IAAYK,EAAQ,OAAOV;AAEjC,MAAAS,EAAO,aAAa,sBAAsBG,CAAS,GACnDX,EAAsB,mBAAmBW,GAAWR,GAASC,CAAS;AAAA,IACvE;AAAA,EACF;AACH;"}

package/dist/lib/tooltip.js

@@ -0,0 +1,376 @@
+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 "tippy.js";
+import "./constants.js";
+import "vue";
+const T = {
+  name: "DtTooltip",
+  components: {
+    DtLazyShow: y
+  },
+  props: {
+    /**
+     * The id of the tooltip
+     */
+    id: {
+      type: String,
+      default() {
+        return f();
+      }
+    },
+    /**
+     * If the popover does not fit in the direction described by "placement",
+     * it will attempt to change its direction to the "fallbackPlacements"
+     * if defined, otherwise it will automatically position to a new location
+     * as it sees best fit. See
+     * <a
+     *   class="d-link"
+     *   href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements"
+     *   target="_blank"
+     * >
+     *   Popper.js docs
+     * </a>
+     * */
+    fallbackPlacements: {
+      type: Array,
+      default: () => ["auto"]
+    },
+    /**
+     * If true, applies inverted styles to the tooltip
+     * @values true, false
+     */
+    inverted: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     *  Displaces the tooltip from its reference element
+     *  by the specified number of pixels. See
+     *  <a
+     *    class="d-link"
+     *    href="https://atomiks.github.io/tippyjs/v6/all-props/#offset"
+     *    target="_blank"
+     *  >
+     *    Tippy.js docs
+     *  </a>
+     */
+    offset: {
+      type: Array,
+      default: () => [0, -4]
+    },
+    /**
+     * The direction the popover displays relative to the anchor. See
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#placement"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values top, top-start, top-end,
+     * right, right-start, right-end,
+     * left, left-start, left-end,
+     * bottom, bottom-start, bottom-end,
+     * auto, auto-start, auto-end
+     */
+    placement: {
+      type: String,
+      default: "top",
+      validator(e) {
+        return r.includes(e);
+      }
+    },
+    /**
+     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed
+     * if the reference element's position is animating, or to automatically update the popover
+     * position in those cases the DOM layout changes the reference element's position.
+     * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
+     * checks the "popper" rect for changes. See
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#sticky"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values true, false, reference, popper
+     */
+    sticky: {
+      type: [Boolean, String],
+      default: !1,
+      validator: (e) => a.includes(e)
+    },
+    /**
+     * Sets the element to which the tooltip is going to append to.
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * This prop is not reactive, must be set on initial render.
+     * @values 'body', 'parent', HTMLElement,
+     */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: "body",
+      validator: (e) => h.includes(e) || e instanceof HTMLElement
+    },
+    /**
+     * Additional css classes for the tooltip content element.
+     * Can accept all of String, Object, and Array, i.e. has the
+     * same api as Vue's built-in handling of the class attribute.
+     */
+    contentClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * A provided message for the tooltip content
+     */
+    message: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Controls whether hover/focus causes the tooltip to appear.
+     * Cannot be combined with the show prop. show value will be ignored.
+     * by default this is true, if you override with false, the tooltip will never show up.
+     */
+    enabled: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.
+     * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    show: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Named transition when the content display is toggled.
+     * @see DtLazyShow
+     */
+    transition: {
+      type: String,
+      default: "fade"
+    },
+    /**
+     * Whether the tooltip will have a delay when being focused or moused over.
+     * @values true, false
+     */
+    delay: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * External anchor id to use in those cases the anchor can't be provided via the slot.
+     * For instance, using the combobox's input as the anchor for the popover.
+     */
+    externalAnchor: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    /**
+     * Emitted when tooltip is shown or hidden
+     *
+     * @event shown
+     * @type {Boolean}
+     */
+    "shown",
+    /**
+     * Sync show value
+     *
+     * @event update:show
+     */
+    "update:show"
+  ],
+  data() {
+    return {
+      TOOLTIP_KIND_MODIFIERS: l,
+      tip: null,
+      inTimer: null,
+      // Internal state for whether the tooltip is shown. Changing the prop
+      // will update this.
+      isShown: !1,
+      // 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
+    };
+  },
+  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;
+    },
+    tooltipListeners() {
+      return {
+        ...this.$listeners,
+        "after-leave": () => {
+          this.onLeaveTransitionComplete();
+        },
+        "after-enter": () => {
+          this.onEnterTransitionComplete();
+        }
+      };
+    },
+    tippyProps() {
+      return {
+        offset: this.offset,
+        interactive: !1,
+        trigger: "manual",
+        placement: this.placement,
+        sticky: this.sticky,
+        popperOptions: c({
+          fallbackPlacements: this.fallbackPlacements,
+          hasHideModifierEnabled: !0,
+          onChangePlacement: this.onChangePlacement
+        })
+      };
+    },
+    anchor() {
+      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : u(this.$refs.anchor);
+    }
+  },
+  watch: {
+    tippyProps: {
+      handler: "setProps",
+      deep: !0
+    },
+    show: {
+      handler: function(e) {
+        e !== null && (this.isShown = e);
+      },
+      immediate: !0
+    },
+    isShown(e) {
+      e ? (this.setProps(), this.tip.show()) : this.tip.hide();
+    },
+    sticky(e) {
+      this.tip.setProps({
+        sticky: e
+      });
+    }
+  },
+  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();
+  },
+  beforeDestroy() {
+    var e;
+    this.externalAnchor && this.removeExternalAnchorEventListeners(), this.tip && ((e = this.tip) == null || e.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
+      // anchor of popover is within a drawer.
+      this.$el.closest(".d-zi-drawer") ? 651 : 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);
+    },
+    triggerShow(e) {
+      e.type === "focusin" ? this.show === null && this.hasVisibleFocus() && (this.isShown = !0) : this.show === null && (this.isShown = !0);
+    },
+    onLeaveAnchor(e) {
+      e.type === "keydown" && e.code !== "Escape" || (clearTimeout(this.inTimer), this.triggerHide());
+    },
+    triggerHide() {
+      this.show === null && (this.isShown = !1);
+    },
+    onChangePlacement(e) {
+      this.currentPlacement = e;
+    },
+    onLeaveTransitionComplete() {
+      var e;
+      (e = this.tip) == null || e.unmount(), this.$emit("shown", !1), this.show !== null && this.$emit("update:show", !1);
+    },
+    onEnterTransitionComplete() {
+      this.$emit("shown", !0), this.show !== null && this.$emit("update:show", !0);
+    },
+    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
+      });
+    },
+    onMount() {
+      this.setProps();
+    },
+    initOptions() {
+      return {
+        contentElement: this.$refs.content.$el,
+        allowHTML: !0,
+        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));
+      });
+    },
+    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));
+      });
+    },
+    onTouchStart() {
+      this.isTouchDevice = !0;
+    }
+  }
+};
+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: [
+    "d-tooltip",
+    `d-tooltip__arrow-tippy--${t.currentPlacement}`,
+    {
+      [t.TOOLTIP_KIND_MODIFIERS.inverted]: t.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) + " ")];
+  })], 2)], 1);
+}, w = [], E = /* @__PURE__ */ m(
+  T,
+  v,
+  w,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const O = E.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
+};
+//# sourceMappingURL=tooltip.js.map