@dialpad/dialtone-vue 3.124.0 → 3.125.0

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=\"contentAppear\"\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, hasSlotContent } 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 to apply transition on initial render in the content lazy show component.\n     * @values true, false\n     */\n    contentAppear: {\n      type: Boolean,\n      default: false,\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      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      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        '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\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  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      // 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 && this.inTimer === null) {\n        this.inTimer = setTimeout(() => {\n          this.triggerShow(e);\n        }, 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.inTimer = null;\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":["_openBlock","_createElementBlock","_renderSlot","_createVNode","_mergeProps","_toHandlers"],"mappings":";;;;;;;;AA0EA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAO,gBAAe;AAAA,MAAK;AAAA,IACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAeD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,MAAM,CAAC,MAAM;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS,MAAM,CAAC,GAAG,EAAE;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAW,WAAW;AACpB,eAAO,mBAAmB,SAAS,SAAS;AAAA,MAC7C;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBD,QAAQ;AAAA,MACN,MAAM,CAAC,SAAS,MAAM;AAAA,MACtB,SAAS;AAAA,MACT,WAAW,CAAC,WAAW;AACrB,eAAO,sBAAsB,SAAS,MAAM;AAAA,MAC7C;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,UAAU;AAAA,MACR,MAAM,CAAC,aAAa,MAAM;AAAA,MAC1B,SAAS;AAAA,MACT,WAAW,cAAY;AACrB,eAAO,yBAAyB,SAAS,QAAQ,KAC5C,oBAAoB;AAAA,MAC1B;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MAEL,SAAS;AAAA;AAAA;AAAA,MAIT,SAAS;AAAA;AAAA;AAAA;AAAA,MAKT,kBAAkB,KAAK;AAAA;AAAA,MAGvB,eAAe;AAAA;EAElB;AAAA,EAED,UAAU;AAAA;AAAA,IAER,YAAa;;AACX,YAAM,aAAa,CAAC,GAAC,UAAK,YAAL,mBAAc;AACnC,YAAM,iBAAiB,CAAC,GAAC,UAAK,WAAL,mBAAa;AACtC,YAAM,qBAAqB,CAAC,KAAK;AAEjC,YAAM,kBAAkB,KAAK,WAAW,KAAK,YAAY,cAAc;AAEvE,aAAO,mBAAmB;AAAA,IAC3B;AAAA,IAED,mBAAoB;AAClB,aAAO;AAAA,QACL,eAAe,MAAM;AACnB,eAAK,0BAAyB;AAAA,QAC/B;AAAA,QAED,eAAe,MAAM;AACnB,eAAK,0BAAyB;AAAA,QAC/B;AAAA;IAEJ;AAAA,IAED,aAAc;AACZ,aAAO;AAAA,QACL,QAAQ,KAAK;AAAA,QACb,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW,KAAK;AAAA,QAChB,QAAQ,KAAK;AAAA,QACb,eAAe,iBAAiB;AAAA,UAC9B,oBAAoB,KAAK;AAAA,UACzB,wBAAwB;AAAA,UACxB,mBAAmB,KAAK;AAAA,QAC1B,CAAC;AAAA;IAEJ;AAAA,IAED,SAAU;AACR,aAAO,KAAK,iBAAiB,SAAS,KAAK,cAAc,KAAK,cAAc,IAAI,UAAU,KAAK,MAAM,MAAM;AAAA,IAC5G;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IAEL,YAAY;AAAA,MACV,SAAS;AAAA,MACT,MAAM;AAAA,IACP;AAAA,IAED,MAAM;AAAA,MACJ,SAAS,SAAU,MAAM;AACvB,YAAI,SAAS,MAAM;AACjB,eAAK,UAAU;AAAA,QACjB;AAAA,MACD;AAAA,MAED,WAAW;AAAA,IACZ;AAAA,IAED,QAAS,SAAS;AAChB,UAAI,SAAS;AACX,aAAK,SAAQ;AACb,aAAK,IAAI;aACJ;AACL,aAAK,IAAI;MACX;AAAA,IACD;AAAA,IAED,OAAQ,QAAQ;AACd,WAAK,IAAI,SAAS;AAAA,QAChB;AAAA,MACF,CAAC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAW;AACT,QAAI,CAAC,KAAK,WAAW,KAAK,QAAQ,MAAM;AACtC,cAAQ,KAAK,2EAA2E;AACxF,cAAQ,KAAK,gCAAgC;AAAA,IAC/C;AAEA,SAAK,kBAAkB,KAAK;AAC5B,SAAK,MAAM,YAAY,KAAK,QAAQ,KAAK,YAAW,CAAE;AAItD,QAAI,KAAK,SAAS;AAChB,WAAK,IAAI;IACX;AAAA,EACD;AAAA,EAED,gBAAiB;;AACf,SAAK,kBAAkB,KAAK;AAE5B,QAAI,KAAK,KAAK;AACZ,iBAAK,QAAL,mBAAU;AAAA,IACZ;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,wBAAyB;AAEvB,UAAI,KAAK,IAAI,YAAY,EACtB,cAAc,2EAA2E;AAAA;AAAA,MAG1F,KAAK,IAAI,QAAQ,cAAc,GAAG;AAClC,eAAO;AAAA,aACF;AACL,eAAO;AAAA,MACT;AAAA,IACD;AAAA,IAED,kBAAmB;AACjB,aAAO,KAAK,OAAO,QAAQ,gBAAgB;AAAA,IAC5C;AAAA,IAED,cAAe,GAAG;AAGhB,UAAI,KAAK,iBAAiB,CAAC,EAAE;AAAe;AAE5C,UAAI,KAAK,SAAS,KAAK,YAAY,MAAM;AACvC,aAAK,UAAU,WAAW,MAAM;AAC9B,eAAK,YAAY,CAAC;AAAA,QACnB,GAAE,gBAAgB;AAAA,aACd;AACL,aAAK,YAAY,CAAC;AAAA,MACpB;AAGA,WAAK,gBAAgB;AAAA,IACtB;AAAA,IAED,YAAa,GAAG;AACd,UAAI,EAAE,SAAS,WAAW;AAQxB,YAAI,KAAK,SAAS,QAAQ,KAAK,gBAAe,GAAI;AAChD,eAAK,UAAU;AAAA,QACjB;AAAA,aACK;AACL,YAAI,KAAK,SAAS;AAAM,eAAK,UAAU;AAAA,MACzC;AAAA,IACD;AAAA,IAED,cAAe,GAAG;AAChB,UAAI,EAAE,SAAS,aAAa,EAAE,SAAS;AAAU;AAEjD,mBAAa,KAAK,OAAO;AACzB,WAAK,UAAU;AACf,WAAK,YAAW;AAAA,IACjB;AAAA,IAED,cAAe;AACb,UAAI,KAAK,SAAS;AAAM,aAAK,UAAU;AAAA,IACxC;AAAA,IAED,kBAAmB,WAAW;AAC5B,WAAK,mBAAmB;AAAA,IACzB;AAAA,IAED,4BAA6B;;AAC3B,iBAAK,QAAL,mBAAU;AACV,WAAK,MAAM,SAAS,KAAK;AACzB,UAAI,KAAK,SAAS,MAAM;AACtB,aAAK,MAAM,eAAe,KAAK;AAAA,MACjC;AAAA,IACD;AAAA,IAED,4BAA6B;AAC3B,WAAK,MAAM,SAAS,IAAI;AACxB,UAAI,KAAK,SAAS,MAAM;AACtB,aAAK,MAAM,eAAe,IAAI;AAAA,MAChC;AAAA,IACD;AAAA,IAED,WAAY;;AACV,UAAI,KAAK,OAAO,KAAK,IAAI,UAAU;AACjC,aAAK,IAAI,SAAS;AAAA,UAChB,GAAG,KAAK;AAAA,UACR,QAAQ,KAAK,sBAAuB;AAAA,UACpC,UAAU,KAAK,aAAa,UAAS,gBAAK,WAAL,mBAAa,kBAAb,mBAA4B,cAAc,UAAU,KAAK;AAAA,QAChG,CAAC;AAAA,MACH;AAAA,IACD;AAAA,IAED,UAAW;AACT,WAAK,SAAQ;AAAA,IACd;AAAA,IAED,cAAe;AACb,aAAO;AAAA,QACL,gBAAgB,KAAK,MAAM,QAAQ;AAAA,QACnC,WAAW;AAAA,QACX,QAAQ,KAAK,sBAAuB;AAAA,QACpC,SAAS,KAAK;AAAA,QACd,GAAG,KAAK;AAAA;IAEX;AAAA,IAED,kCAAmC;AACjC,OAAC,WAAW,YAAY,EAAE,QAAQ,cAAY;AAC5C,aAAK,OAAO,iBAAiB,UAAU,CAAC,UAAU,KAAK,cAAc,KAAK,CAAC;AAAA,MAC7E,CAAC;AACD,OAAC,YAAY,cAAc,SAAS,EAAE,QAAQ,cAAY;AACxD,aAAK,OAAO,iBAAiB,UAAU,CAAC,UAAU,KAAK,cAAc,KAAK,CAAC;AAAA,MAC7E,CAAC;AAAA,IACF;AAAA,IAED,qCAAsC;AACpC,OAAC,WAAW,YAAY,EAAE,QAAQ,cAAY;AAC5C,aAAK,OAAO,oBAAoB,UAAU,CAAC,UAAU,KAAK,cAAc,KAAK,CAAC;AAAA,MAChF,CAAC;AACD,OAAC,YAAY,cAAc,SAAS,EAAE,QAAQ,cAAY;AACxD,aAAK,OAAO,oBAAoB,UAAU,CAAC,UAAU,KAAK,cAAc,KAAK,CAAC;AAAA,MAChF,CAAC;AAAA,IACF;AAAA,IAED,eAAgB;AACd,WAAK,gBAAgB;AAAA,IACtB;AAAA,EACF;AACH;AAzhBO,MAAA,aAAA,EAAA,WAAQ,uBAAsB;;;AAAnC,SAAAA,UAAA,GAAAC,mBA8CM,OA9CN,YA8CM;AAAA,KAzCK,OAAc,+BADvBA,mBAeO,QAAA;AAAA;MAbL,KAAI;AAAA,MACJ,WAAQ;AAAA,MACP,kDAAS,SAAa,iBAAA,SAAA,cAAA,GAAA,IAAA;AAAA,MACtB,mDAAU,SAAa,iBAAA,SAAA,cAAA,GAAA,IAAA;AAAA,MACvB,qDAAY,SAAa,iBAAA,SAAA,cAAA,GAAA,IAAA;AAAA,MACzB,qDAAY,SAAa,iBAAA,SAAA,cAAA,GAAA,IAAA;AAAA,MACzB,2DAAa,SAAa,iBAAA,SAAA,cAAA,GAAA,IAAA,GAAA,CAAA,KAAA,CAAA;AAAA,MAC1B,qDAAY,SAAY,gBAAA,SAAA,aAAA,GAAA,IAAA;AAAA;MAGzBC,WAEE,KAAA,QAAA,QAAA;AAAA;IAEJC,YAyBe,yBAzBfC,WAyBe;AAAA,MAxBZ,IAAI,OAAE;AAAA,MACP,KAAI;AAAA,MACH,MAAM,SAAS;AAAA,MAChB,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAQ;AAAA,MACP,QAAQ,OAAa;AAAA,MACrB,YAAY,OAAU;AAAA,MACtB,OAAK;AAAA;mCAA4D,MAAgB,gBAAA;AAAA;WAA0B,MAAsB,uBAAC,QAAQ,GAAI,OAAQ;AAAA;QAAqB,OAAY;AAAA;IAQxL,GAAAC,WAAM,SAAgB,gBAAA,CAAA,GAAA;AAAA,uBAKtB,MAEO;AAAA,QAFPH,WAEO,4BAFP,MAEO;AAAA,0CADF,OAAO,OAAA,GAAA,CAAA;AAAA;;;;;;;"}
+{"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    >\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      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    </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: 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     * Whether the tooltip should have a transition effect.\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     * 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      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  },\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        '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        delay: this.delay ? TOOLTIP_DELAY_MS : false,\n        placement: this.placement,\n        sticky: this.sticky,\n        theme: this.inverted ? 'inverted' : undefined,\n        animation: this.transition ? 'fade' : false,\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) {\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\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  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.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.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.inTimer = null;\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          // 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    onShow (tooltipInstance) {\n      // don't show tooltip when no content\n      if (tooltipInstance.props.content.textContent.length === 0) {\n        return false;\n      }\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=\"6\"><path transform=\"rotate(180 6.21875 3.575)\" d=\"m12.844.45-6 6-6-6h12Z\"/></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        onShow: this.onShow,\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","_mergeProps","_toHandlers"],"mappings":"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"}

package/dist/style.css

@@ -10,9 +10,15 @@
 .d-dropdown-list > .dt-list-item {
   margin-top: var(--dt-space-200);
 }
-.tippy-box[data-popper-reference-hidden] .d-tooltip {
+.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.tippy-box[data-reference-hidden] {
   visibility: hidden;
   pointer-events: none;
+}.tippy-box > .tippy-svg-arrow {
+  fill: var(--dt-color-surface-contrast);
+}.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {
+  fill: var(--dt-color-surface-moderate);
+}.tippy-box[data-animation='fade'][data-state='hidden'] {
+  opacity: 0;
 }
 .skeleton-placeholder {
   display: flex;
@@ -303,7 +309,7 @@
   background-color: var(--dt-color-surface-contrast);
   color: var(--dt-color-foreground-secondary-inverted);
 }
-.dt-leftbar-row[data-v-49d75ce6] {
+.dt-leftbar-row[data-v-6ac4ceaa] {
   --leftbar-row-color-foreground: var(--dt-theme-sidebar-color-foreground);
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background);
   --leftbar-row-radius: var(--dt-size-radius-pill);
@@ -334,52 +340,65 @@
   transition-timing-function: var(--ttf-out-quint);
   cursor: pointer;
 }
-.dt-leftbar-row[data-v-49d75ce6]:not(.dt-leftbar-row--no-action):hover,
-.dt-leftbar-row[data-v-49d75ce6]:not(.dt-leftbar-row--no-action):focus-within {
+.dt-leftbar-row[data-v-6ac4ceaa]:not(.dt-leftbar-row--no-action):hover,
+.dt-leftbar-row[data-v-6ac4ceaa]:not(.dt-leftbar-row--no-action):focus-within {
   --leftbar-row-unread-badge-display: none;
 }
-.dt-leftbar-row[data-v-49d75ce6]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
-.dt-leftbar-row[data-v-49d75ce6]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
+.dt-leftbar-row[data-v-6ac4ceaa]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
+.dt-leftbar-row[data-v-6ac4ceaa]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
   display: inline-flex;
 }
-.dt-leftbar-row[data-v-49d75ce6]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
-.dt-leftbar-row[data-v-49d75ce6]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
+.dt-leftbar-row[data-v-6ac4ceaa]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
+.dt-leftbar-row[data-v-6ac4ceaa]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
   opacity: 1;
 }
-.dt-leftbar-row[data-v-49d75ce6]:hover,
-.dt-leftbar-row[data-v-49d75ce6]:focus-within {
+.dt-leftbar-row[data-v-6ac4ceaa]:hover,
+.dt-leftbar-row[data-v-6ac4ceaa]:focus-within {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
 }
-.dt-leftbar-row[data-v-49d75ce6]:hover .d-presence,
-.dt-leftbar-row[data-v-49d75ce6]:focus-within .d-presence {
+.dt-leftbar-row[data-v-6ac4ceaa]:hover .d-presence,
+.dt-leftbar-row[data-v-6ac4ceaa]:focus-within .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-leftbar-row[data-v-49d75ce6]:hover .d-avatar__count,
-.dt-leftbar-row[data-v-49d75ce6]:focus-within .d-avatar__count {
+.dt-leftbar-row[data-v-6ac4ceaa]:hover .d-avatar__count,
+.dt-leftbar-row[data-v-6ac4ceaa]:focus-within .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-leftbar-row--has-unread[data-v-49d75ce6] {
+.dt-leftbar-row--has-unread[data-v-6ac4ceaa] {
   --leftbar-row-description-font-weight: var(--dt-font-weight-bold);
   --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
   --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
 }
-.dt-leftbar-row--unread-count[data-v-49d75ce6] .dt-leftbar-row__action {
+.dt-leftbar-row--unread-count[data-v-6ac4ceaa] .dt-leftbar-row__action {
   display: none;
 }
-.dt-leftbar-row--muted[data-v-49d75ce6] {
+.dt-leftbar-row__unread-count-badge[data-v-6ac4ceaa] {
+  border-top-right-radius: var(--dt-size-radius-0);
+  border-bottom-right-radius: var(--dt-size-radius-0);
+}
+.dt-leftbar-row__unread-mention-count-badge[data-v-6ac4ceaa] {
+  border-top-left-radius: var(--dt-size-radius-0);
+  border-bottom-left-radius: var(--dt-size-radius-0);
+  background-color: var(--dt-color-purple-500);
+}
+.dt-leftbar-row__unread-mention-count-only-badge[data-v-6ac4ceaa] {
+  background-color: var(--dt-color-purple-500);
+  color: var(--dt-color-foreground-primary-inverted);
+}
+.dt-leftbar-row--muted[data-v-6ac4ceaa] {
   --leftbar-row-opacity: 60%;
 }
-.dt-leftbar-row--selected[data-v-49d75ce6] {
+.dt-leftbar-row--selected[data-v-6ac4ceaa] {
   --leftbar-row-color-background: var(--dt-theme-sidebar-selected-row-color-background);
   --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-selected-row-color-foreground);
 }
-.dt-leftbar-row--selected[data-v-49d75ce6] .d-presence {
+.dt-leftbar-row--selected[data-v-6ac4ceaa] .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-leftbar-row--selected[data-v-49d75ce6] .d-avatar__count {
+.dt-leftbar-row--selected[data-v-6ac4ceaa] .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-leftbar-row__is-typing[data-v-49d75ce6] {
+.dt-leftbar-row__is-typing[data-v-6ac4ceaa] {
   --is-typing-size-shape: var(--dt-size-550);
   height: var(--is-typing-size-shape);
   width: var(--is-typing-size-shape);
@@ -391,7 +410,7 @@
   border-radius: var(--dt-size-radius-pill);
   opacity: 0.75;
 }
-.dt-leftbar-row__is-typing span[data-v-49d75ce6] {
+.dt-leftbar-row__is-typing span[data-v-6ac4ceaa] {
   transition: all 500ms ease;
   background: var(--dt-color-surface-strong);
   height: 4px;
@@ -400,18 +419,18 @@
   padding: 0;
   opacity: 0.3;
   border-radius: var(--dt-size-radius-pill);
-  animation: wave-49d75ce6 1.5s ease infinite;
+  animation: wave-6ac4ceaa 1.5s ease infinite;
 }
-.dt-leftbar-row__is-typing span[data-v-49d75ce6]:nth-child(1) {
+.dt-leftbar-row__is-typing span[data-v-6ac4ceaa]:nth-child(1) {
   animation-delay: 0ms;
 }
-.dt-leftbar-row__is-typing span[data-v-49d75ce6]:nth-child(2) {
+.dt-leftbar-row__is-typing span[data-v-6ac4ceaa]:nth-child(2) {
   animation-delay: var(--td100);
 }
-.dt-leftbar-row__is-typing span[data-v-49d75ce6]:nth-child(3) {
+.dt-leftbar-row__is-typing span[data-v-6ac4ceaa]:nth-child(3) {
   animation-delay: var(--td200);
 }
-.dt-leftbar-row__primary[data-v-49d75ce6] {
+.dt-leftbar-row__primary[data-v-6ac4ceaa] {
   display: flex;
   align-items: center;
   flex: 1;
@@ -428,18 +447,18 @@
   padding: 0;
   border-radius: var(--leftbar-row-radius);
 }
-.dt-leftbar-row__primary[data-v-49d75ce6]:active {
+.dt-leftbar-row__primary[data-v-6ac4ceaa]:active {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
 }
-.dt-leftbar-row__primary[data-v-49d75ce6]:focus-visible {
+.dt-leftbar-row__primary[data-v-6ac4ceaa]:focus-visible {
   box-shadow: var(--dt-shadow-focus-inset);
 }
-.dt-leftbar-row__action-button[data-v-49d75ce6] {
+.dt-leftbar-row__action-button[data-v-6ac4ceaa] {
   opacity: 0;
   width: var(--leftbar-row-action-width);
   height: var(--leftbar-row-action-height);
 }
-.dt-leftbar-row__alpha[data-v-49d75ce6] {
+.dt-leftbar-row__alpha[data-v-6ac4ceaa] {
   color: var(--leftbar-row-alpha-color-foreground);
   display: flex;
   box-sizing: border-box;
@@ -451,11 +470,11 @@
   height: var(--leftbar-row-alpha-height);
   border-radius: var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius);
 }
-.dt-leftbar-row__label[data-v-49d75ce6] {
+.dt-leftbar-row__label[data-v-6ac4ceaa] {
   flex: 0 1;
   min-width: 0;
 }
-.dt-leftbar-row__omega[data-v-49d75ce6] {
+.dt-leftbar-row__omega[data-v-6ac4ceaa] {
   position: absolute;
   display: flex;
   right: var(--leftbar-row-action-position-right);
@@ -467,26 +486,26 @@
   box-sizing: border-box;
   border-radius: var(--leftbar-row-radius);
 }
-.dt-leftbar-row__unread-badge[data-v-49d75ce6] {
+.dt-leftbar-row__unread-badge[data-v-6ac4ceaa] {
   display: var(--leftbar-row-unread-badge-display);
 }
-.dt-leftbar-row__active-voice[data-v-49d75ce6] {
+.dt-leftbar-row__active-voice[data-v-6ac4ceaa] {
   color: var(--dt-color-purple-400);
   display: inline-flex;
-  -webkit-animation-name: opacity-pulsate-49d75ce6;
+  -webkit-animation-name: opacity-pulsate-6ac4ceaa;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-fill-mode: both;
-  -moz-animation-name: opacity-pulsate-49d75ce6;
+  -moz-animation-name: opacity-pulsate-6ac4ceaa;
   -moz-animation-duration: 1s;
   -moz-animation-iteration-count: infinite;
   -moz-animation-fill-mode: both;
-  animation-name: opacity-pulsate-49d75ce6;
+  animation-name: opacity-pulsate-6ac4ceaa;
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-fill-mode: both;
 }
-.dt-leftbar-row__dnd[data-v-49d75ce6] {
+.dt-leftbar-row__dnd[data-v-6ac4ceaa] {
   padding-top: var(--dt-space-200);
   padding-right: var(--dt-space-300);
   color: var(--dt-color-foreground-tertiary);
@@ -494,26 +513,26 @@
   line-height: var(--dt-font-line-height-400);
   font-weight: var(--dt-font-weight-medium);
 }
-.dt-leftbar-row__container--off-duty[data-v-49d75ce6] {
+.dt-leftbar-row__container--off-duty[data-v-6ac4ceaa] {
   border-radius: var(--dt-size-radius-500);
   background-color: var(--dt-badge-color-background-critical);
   border: var(--dt-size-100) solid var(--dt-color-border-subtle);
 }
-.dt-leftbar-row__container--off-duty[data-v-49d75ce6] .dt-leftbar-row__primary {
+.dt-leftbar-row__container--off-duty[data-v-6ac4ceaa] .dt-leftbar-row__primary {
   margin: calc(var(--dt-size-100) * -1);
 }
-.dt-leftbar-row--contact-centers[data-v-49d75ce6] .dt-leftbar-row__alpha {
+.dt-leftbar-row--contact-centers[data-v-6ac4ceaa] .dt-leftbar-row__alpha {
   padding-right: var(--dt-space-450);
   padding-left: var(--dt-space-450);
 }
-.dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-49d75ce6] {
+.dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-6ac4ceaa] {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
   min-width: var(--dt-size-600);
   height: var(--dt-size-500);
 }
-.dt-leftbar-row[data-v-49d75ce6] .dt-leftbar-row__description {
+.dt-leftbar-row[data-v-6ac4ceaa] .dt-leftbar-row__description {
   display: block;
   font-weight: var(--leftbar-row-description-font-weight);
   font-size: var(--leftbar-row-description-font-size);
@@ -523,7 +542,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.dt-leftbar-row[data-v-49d75ce6] .dt-leftbar-row__status {
+.dt-leftbar-row[data-v-6ac4ceaa] .dt-leftbar-row__status {
   display: block;
   color: var(--leftbar-row-status-color-foreground);
   font-size: var(--leftbar-row-status-font-size);
@@ -533,30 +552,30 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.dt-leftbar-row[data-v-49d75ce6] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty):before {
+.dt-leftbar-row[data-v-6ac4ceaa] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty):before {
   content: ' • ';
   color: var(--dt-theme-sidebar-status-color-foreground);
 }
-.dt-leftbar-row__icon-cc[data-v-49d75ce6] {
+.dt-leftbar-row__icon-cc[data-v-6ac4ceaa] {
   border-radius: var(--dt-size-200);
   width: calc(var(--dt-size-300) * 3.5);
   height: calc(var(--dt-size-300) * 3.5);
 }
-.opacity-pulsate[data-v-49d75ce6] {
-  -webkit-animation-name: opacity-pulsate-49d75ce6;
+.opacity-pulsate[data-v-6ac4ceaa] {
+  -webkit-animation-name: opacity-pulsate-6ac4ceaa;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-fill-mode: both;
-  -moz-animation-name: opacity-pulsate-49d75ce6;
+  -moz-animation-name: opacity-pulsate-6ac4ceaa;
   -moz-animation-duration: 1s;
   -moz-animation-iteration-count: infinite;
   -moz-animation-fill-mode: both;
-  animation-name: opacity-pulsate-49d75ce6;
+  animation-name: opacity-pulsate-6ac4ceaa;
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-fill-mode: both;
 }
-@-webkit-keyframes opacity-pulsate-49d75ce6 {
+@-webkit-keyframes opacity-pulsate-6ac4ceaa {
 0%,
   100% {
     opacity: 0.2;
@@ -565,7 +584,7 @@
     opacity: 1;
 }
 }
-@-moz-keyframes opacity-pulsate-49d75ce6 {
+@-moz-keyframes opacity-pulsate-6ac4ceaa {
 0%,
   100% {
     opacity: 0.2;
@@ -574,7 +593,7 @@
     opacity: 1;
 }
 }
-@keyframes opacity-pulsate-49d75ce6 {
+@keyframes opacity-pulsate-6ac4ceaa {
 0%,
   100% {
     opacity: 0.2;
@@ -583,7 +602,7 @@
     opacity: 1;
 }
 }
-@keyframes wave-49d75ce6 {
+@keyframes wave-6ac4ceaa {
 0%,
   50%,
   100% {
@@ -657,6 +676,19 @@
 .dt-leftbar-row--unread-count[data-v-094eaef1] .dt-leftbar-row__action {
   display: none;
 }
+.dt-leftbar-row__unread-count-badge[data-v-094eaef1] {
+  border-top-right-radius: var(--dt-size-radius-0);
+  border-bottom-right-radius: var(--dt-size-radius-0);
+}
+.dt-leftbar-row__unread-mention-count-badge[data-v-094eaef1] {
+  border-top-left-radius: var(--dt-size-radius-0);
+  border-bottom-left-radius: var(--dt-size-radius-0);
+  background-color: var(--dt-color-purple-500);
+}
+.dt-leftbar-row__unread-mention-count-only-badge[data-v-094eaef1] {
+  background-color: var(--dt-color-purple-500);
+  color: var(--dt-color-foreground-primary-inverted);
+}
 .dt-leftbar-row--muted[data-v-094eaef1] {
   --leftbar-row-opacity: 60%;
 }

package/dist/types/components/popover/tippy_utils.d.ts

@@ -1,5 +1,6 @@
 export const BASE_TIPPY_DIRECTIONS: string[];
 export const TIPPY_STICKY_VALUES: (string | boolean)[];
+export function createTippyPopover(anchorElement: any, options: any): import("tippy.js").Instance<import("tippy.js").Props>[];
 export function createTippy(anchorElement: any, options: any): import("tippy.js").Instance<import("tippy.js").Props>[];
 export function getPopperOptions({ boundary, fallbackPlacements, onChangePlacement, hasHideModifierEnabled, tether, }?: {
     boundary?: string | undefined;
@@ -9,12 +10,6 @@ export function getPopperOptions({ boundary, fallbackPlacements, onChangePlaceme
     tether?: boolean | undefined;
 }): {
     modifiers: ({
-        name: string;
-        enabled: boolean;
-        phase: string;
-        fn: any;
-        requiresIfExists: string[];
-    } | {
         name: string;
         options: {
             fallbackPlacements: any[];

package/dist/types/components/popover/tippy_utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tippy_utils.d.ts","sourceRoot":"","sources":["../../../../components/popover/tippy_utils.js"],"names":[],"mappings":"AAGA,6CAKE;AAEF,uDAAwE;AAEjE,uHAQN;AAEM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCN;AAUM,mDAIN;AAEM;;EAQN"}
+{"version":3,"file":"tippy_utils.d.ts","sourceRoot":"","sources":["../../../../components/popover/tippy_utils.js"],"names":[],"mappings":"AAEA,6CAKE;AAEF,uDAAwE;AACjE,8HAQN;AAEM,uHAKN;AAEM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BN;AAUM,mDAIN;AAEM;;EAQN"}

package/dist/types/components/tooltip/tooltip.vue.d.ts

@@ -136,18 +136,9 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     /**
-     * Named transition when the content display is toggled.
-     * @see DtLazyShow
+     * Whether the tooltip should have a transition effect.
      */
     transition: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Whether to apply transition on initial render in the content lazy show component.
-     * @values true, false
-     */
-    contentAppear: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -179,7 +170,6 @@ declare const _default: import("vue").DefineComponent<{
     inTimer: null;
     isShown: boolean;
     currentPlacement: string;
-    isTouchDevice: boolean;
 }, {
     isVisible(): boolean;
     tooltipListeners(): {
@@ -188,18 +178,13 @@ declare const _default: import("vue").DefineComponent<{
     };
     tippyProps(): {
         offset: unknown[];
-        interactive: boolean;
-        trigger: string;
+        delay: number | boolean;
         placement: string;
         sticky: string | boolean;
+        theme: string | undefined;
+        animation: string | boolean;
         popperOptions: {
             modifiers: ({
-                name: string;
-                enabled: boolean;
-                phase: string;
-                fn: any;
-                requiresIfExists: string[];
-            } | {
                 name: string;
                 options: {
                     fallbackPlacements: any[];
@@ -221,7 +206,10 @@ declare const _default: import("vue").DefineComponent<{
                     boundary?: undefined;
                 };
                 enabled?: undefined;
-            })[];
+            })[]; /**
+             * If true, applies inverted styles to the tooltip
+             * @values true, false
+             */
         };
     };
     anchor(): any;
@@ -237,20 +225,19 @@ declare const _default: import("vue").DefineComponent<{
     onEnterTransitionComplete(): void;
     setProps(): void;
     onMount(): void;
+    onShow(tooltipInstance: any): false | undefined;
     initOptions(): {
-        offset: unknown[];
+        content: unknown;
+        arrow: string;
+        duration: number;
         interactive: boolean;
         trigger: string;
-        placement: string;
-        sticky: string | boolean;
+        hideOnClick: boolean;
+        touch: boolean;
+        onMount: () => void;
+        onShow: (tooltipInstance: any) => false | undefined;
         popperOptions: {
             modifiers: ({
-                name: string;
-                enabled: boolean;
-                phase: string;
-                fn: any;
-                requiresIfExists: string[];
-            } | {
                 name: string;
                 options: {
                     fallbackPlacements: any[];
@@ -272,16 +259,14 @@ declare const _default: import("vue").DefineComponent<{
                     boundary?: undefined;
                 };
                 enabled?: undefined;
-            })[];
+            })[]; /**
+             * If true, applies inverted styles to the tooltip
+             * @values true, false
+             */
         };
-        contentElement: any;
-        allowHTML: boolean;
-        zIndex: number;
-        onMount: () => void;
     };
     addExternalAnchorEventListeners(): void;
     removeExternalAnchorEventListeners(): void;
-    onTouchStart(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("shown" | "update:show")[], "shown" | "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The id of the tooltip
@@ -420,18 +405,9 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     /**
-     * Named transition when the content display is toggled.
-     * @see DtLazyShow
+     * Whether the tooltip should have a transition effect.
      */
     transition: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Whether to apply transition on initial render in the content lazy show component.
-     * @values true, false
-     */
-    contentAppear: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -458,7 +434,7 @@ declare const _default: import("vue").DefineComponent<{
     message: string;
     id: string;
     inverted: boolean;
-    transition: string;
+    transition: boolean;
     contentClass: string | Record<string, any> | unknown[];
     show: boolean;
     offset: unknown[];
@@ -468,7 +444,6 @@ declare const _default: import("vue").DefineComponent<{
     placement: string;
     sticky: string | boolean;
     enabled: boolean;
-    contentAppear: boolean;
     externalAnchor: string;
 }, {}>;
 export default _default;

package/dist/types/components/tooltip/tooltip.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.vue.d.ts","sourceRoot":"","sources":["../../../../components/tooltip/tooltip.vue.js"],"names":[],"mappings":";IAgCI;;OAEG;;;;;IAMH;;;;;;;;;;;;SAYK;;;;;IAML;;;OAGG;;;;;IAMH;;;;;;;;;;OAUG;;;;;IAMH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;OAKG;;;;;;;;;IAUH;;;;OAIG;;;;;IAMH;;OAEG;;;;;IAMH;;;;OAIG;;;;;IAMH;;;;;OAKG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IArLH;;OAEG;;;;;IAMH;;;;;;;;;;;;SAYK;;;;;IAML;;;OAGG;;;;;IAMH;;;;;;;;;;OAUG;;;;;IAMH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;OAKG;;;;;;;;;IAUH;;;;OAIG;;;;;IAMH;;OAEG;;;;;IAMH;;;;OAIG;;;;;IAMH;;;;;OAKG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;+BA1MyC,gBAAgB"}
+{"version":3,"file":"tooltip.vue.d.ts","sourceRoot":"","sources":["../../../../components/tooltip/tooltip.vue.js"],"names":[],"mappings":";IA4BI;;OAEG;;;;;IAMH;;;;;;;;;;;;SAYK;;;;;IAML;;;OAGG;;;;;IAMH;;;;;;;;;;OAUG;;;;;IAMH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;OAKG;;;;;;;;;IAUH;;;;OAIG;;;;;IAMH;;OAEG;;;;;IAMH;;;;OAIG;;;;;IAMH;;;;;OAKG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAjJH;;;eAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAHH;;;eAGG;;;;;;IA7BH;;OAEG;;;;;IAMH;;;;;;;;;;;;SAYK;;;;;IAML;;;OAGG;;;;;IAMH;;;;;;;;;;OAUG;;;;;IAMH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;;;;;;;;;;OAcG;;;;;;IASH;;;;;OAKG;;;;;;;;;IAUH;;;;OAIG;;;;;IAMH;;OAEG;;;;;IAMH;;;;OAIG;;;;;IAMH;;;;;OAKG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;+BA5LyC,gBAAgB"}