@dialpad/dialtone 9.123.1 → 9.123.2

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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./top-banner-info-constants.cjs"),o=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),i={name:"DtRecipeTopBannerInfo",props:{colorCode:{type:String,default:"green300",validator:function(r){return t.COLOR_CODES.includes(r)}}},computed:{bannerInfoClass(){return[{green100:"d-recipe-top-banner-info--success",green300:"d-recipe-top-banner-info--success",red100:"d-recipe-top-banner-info--critical",red200:"d-recipe-top-banner-info--critical",gold100:"d-recipe-top-banner-info--warning",gold200:"d-recipe-top-banner-info--warning",black100:"d-recipe-top-banner-info--info",white:"d-recipe-top-banner-info--primary"}[this.colorCode]]}}};var a=function(){var e=this,n=e._self._c;return n("div",{staticClass:"d-recipe-top-banner-info",class:e.bannerInfoClass,attrs:{"data-qa":"banner-info"}},[n("div",{staticClass:"d-recipe-top-banner-info__left"},[e._t("left")],2),n("div",{staticClass:"d-recipe-top-banner-info__middle",attrs:{"data-qa":"banner-info--middle"}},[e._t("default")],2),n("div",{staticClass:"d-recipe-top-banner-info__right"},[e._t("right")],2)])},s=[],c=o.n(i,a,s,!1,null,null);const d=c.exports;exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./top-banner-info-constants.cjs"),o=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),i={name:"DtRecipeTopBannerInfo",props:{colorCode:{type:String,default:"green300",validator:function(r){return t.COLOR_CODES.includes(r)}}},computed:{bannerInfoClass(){return[{green100:"d-recipe-top-banner-info--success",green300:"d-recipe-top-banner-info--success",red100:"d-recipe-top-banner-info--critical",red200:"d-recipe-top-banner-info--critical",gold100:"d-recipe-top-banner-info--warning",gold200:"d-recipe-top-banner-info--warning",black100:"d-recipe-top-banner-info--info",white:"d-recipe-top-banner-info--primary"}[this.colorCode]]}}};var a=function(){var e=this,n=e._self._c;return n("div",{staticClass:"d-recipe-top-banner-info",class:e.bannerInfoClass,attrs:{"data-qa":"banner-info"}},[n("div",{staticClass:"d-recipe-top-banner-info__left"},[e._t("left")],2),n("div",{staticClass:"d-recipe-top-banner-info__middle",attrs:{"data-qa":"banner-info--middle"}},[e._t("default")],2),n("div",{staticClass:"d-recipe-top-banner-info__right"},[e._t("right")],2)])},s=[],c=o.n(i,a,s);const d=c.exports;exports.default=d;
 //# sourceMappingURL=top-banner-info.cjs.map

package/dist/vue2/lib/top-banner-info/top-banner-info.js

@@ -1,5 +1,5 @@
 import { COLOR_CODES as o } from "./top-banner-info-constants.js";
-import { n as t } from "../../_plugin-vue2_normalizer-CeySl7Fu.js";
+import { n as t } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 const i = {
   name: "DtRecipeTopBannerInfo",
   props: {
@@ -37,10 +37,7 @@ var a = function() {
 }, s = [], c = /* @__PURE__ */ t(
   i,
   a,
-  s,
-  !1,
-  null,
-  null
+  s
 );
 const f = c.exports;
 export {

package/dist/vue2/lib/top-banner-info/top-banner-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-banner-info.js","sources":["../../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-recipe-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"d-recipe-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"d-recipe-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"d-recipe-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        green100: 'd-recipe-top-banner-info--success',\n        green300: 'd-recipe-top-banner-info--success',\n        red100: 'd-recipe-top-banner-info--critical',\n        red200: 'd-recipe-top-banner-info--critical',\n        gold100: 'd-recipe-top-banner-info--warning',\n        gold200: 'd-recipe-top-banner-info--warning',\n        black100: 'd-recipe-top-banner-info--info',\n        white: 'd-recipe-top-banner-info--primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","kind","COLOR_CODES"],"mappings":";;AA0BA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,SAAAC,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kBAAA;AAaA,aAAA,CAZA;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,EACA,KAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;"}
+{"version":3,"file":"top-banner-info.js","sources":["../../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-recipe-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"d-recipe-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"d-recipe-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"d-recipe-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        green100: 'd-recipe-top-banner-info--success',\n        green300: 'd-recipe-top-banner-info--success',\n        red100: 'd-recipe-top-banner-info--critical',\n        red200: 'd-recipe-top-banner-info--critical',\n        gold100: 'd-recipe-top-banner-info--warning',\n        gold200: 'd-recipe-top-banner-info--warning',\n        black100: 'd-recipe-top-banner-info--info',\n        white: 'd-recipe-top-banner-info--primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","kind","COLOR_CODES"],"mappings":";;AA0BA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,SAAAC,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kBAAA;AAaA,aAAA,CAZA;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,EACA,KAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;"}

package/dist/vue2/lib/unread-pill/unread-pill.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("@dialpad/dialtone-icons/vue2"),i=require("./unread-pill-constants.cjs"),a=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),l={name:"DtRecipeUnreadPill",components:{DtIconArrowUp:n.DtIconArrowUp,DtIconArrowDown:n.DtIconArrowDown},props:{kind:{type:String,required:!0,validator:r=>i.UNREAD_PILL_KINDS.includes(r)},direction:{type:String,required:!0,validator:r=>i.UNREAD_PILL_DIRECTIONS.includes(r)}},emits:["click"]};var o=function(){var e=this,t=e._self._c;return t("button",e._g({class:["d-recipe-leftbar-unread-pill",`d-recipe-leftbar-unread-pill-${e.kind}`],attrs:{type:"button","data-qa":"dt-recipe-leftbar-unread-pill"}},e.$listeners),[e.direction==="up"?t("dt-icon-arrow-up",{attrs:{size:"300"}}):t("dt-icon-arrow-down",{attrs:{size:"300"}}),t("span",{attrs:{"data-qa":"dt-recipe-leftbar-unread-pill__label"}},[e._t("default")],2)],1)},s=[],d=a.n(l,o,s,!1,null,null);const u=d.exports;exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("@dialpad/dialtone-icons/vue2"),i=require("./unread-pill-constants.cjs"),a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l={name:"DtRecipeUnreadPill",components:{DtIconArrowUp:n.DtIconArrowUp,DtIconArrowDown:n.DtIconArrowDown},props:{kind:{type:String,required:!0,validator:r=>i.UNREAD_PILL_KINDS.includes(r)},direction:{type:String,required:!0,validator:r=>i.UNREAD_PILL_DIRECTIONS.includes(r)}},emits:["click"]};var o=function(){var e=this,t=e._self._c;return t("button",e._g({class:["d-recipe-leftbar-unread-pill",`d-recipe-leftbar-unread-pill-${e.kind}`],attrs:{type:"button","data-qa":"dt-recipe-leftbar-unread-pill"}},e.$listeners),[e.direction==="up"?t("dt-icon-arrow-up",{attrs:{size:"300"}}):t("dt-icon-arrow-down",{attrs:{size:"300"}}),t("span",{attrs:{"data-qa":"dt-recipe-leftbar-unread-pill__label"}},[e._t("default")],2)],1)},d=[],s=a.n(l,o,d);const c=s.exports;exports.default=c;
 //# sourceMappingURL=unread-pill.cjs.map

package/dist/vue2/lib/unread-pill/unread-pill.js

@@ -1,7 +1,7 @@
 import { DtIconArrowUp as n, DtIconArrowDown as a } from "@dialpad/dialtone-icons/vue2";
 import { UNREAD_PILL_KINDS as i, UNREAD_PILL_DIRECTIONS as o } from "./unread-pill-constants.js";
-import { n as l } from "../../_plugin-vue2_normalizer-CeySl7Fu.js";
-const d = {
+import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+const l = {
   name: "DtRecipeUnreadPill",
   components: {
     DtIconArrowUp: n,
@@ -40,13 +40,10 @@ const d = {
 var s = function() {
   var r = this, t = r._self._c;
   return t("button", r._g({ class: ["d-recipe-leftbar-unread-pill", `d-recipe-leftbar-unread-pill-${r.kind}`], attrs: { type: "button", "data-qa": "dt-recipe-leftbar-unread-pill" } }, r.$listeners), [r.direction === "up" ? t("dt-icon-arrow-up", { attrs: { size: "300" } }) : t("dt-icon-arrow-down", { attrs: { size: "300" } }), t("span", { attrs: { "data-qa": "dt-recipe-leftbar-unread-pill__label" } }, [r._t("default")], 2)], 1);
-}, c = [], p = /* @__PURE__ */ l(
-  d,
+}, c = [], p = /* @__PURE__ */ d(
+  l,
   s,
-  c,
-  !1,
-  null,
-  null
+  c
 );
 const m = p.exports;
 export {

package/dist/vue2/lib/unread-pill/unread-pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"unread-pill.js","sources":["../../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"['d-recipe-leftbar-unread-pill', `d-recipe-leftbar-unread-pill-${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-recipe-leftbar-unread-pill\"\n    v-on=\"$listeners\"\n  >\n    <dt-icon-arrow-up\n      v-if=\"direction === 'up'\"\n      size=\"300\"\n    />\n    <dt-icon-arrow-down\n      v-else\n      size=\"300\"\n    />\n    <span data-qa=\"dt-recipe-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIconArrowUp, DtIconArrowDown } from '@dialpad/dialtone-icons/vue2';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIconArrowUp,\n    DtIconArrowDown,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n};\n</script>\n"],"names":["_sfc_main","DtIconArrowUp","DtIconArrowDown","kind","UNREAD_PILL_KINDS","dir","UNREAD_PILL_DIRECTIONS"],"mappings":";;;AAwBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AACA;;;;;;;;;;;;;"}
+{"version":3,"file":"unread-pill.js","sources":["../../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"['d-recipe-leftbar-unread-pill', `d-recipe-leftbar-unread-pill-${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-recipe-leftbar-unread-pill\"\n    v-on=\"$listeners\"\n  >\n    <dt-icon-arrow-up\n      v-if=\"direction === 'up'\"\n      size=\"300\"\n    />\n    <dt-icon-arrow-down\n      v-else\n      size=\"300\"\n    />\n    <span data-qa=\"dt-recipe-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIconArrowUp, DtIconArrowDown } from '@dialpad/dialtone-icons/vue2';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIconArrowUp,\n    DtIconArrowDown,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n};\n</script>\n"],"names":["_sfc_main","DtIconArrowUp","DtIconArrowDown","kind","UNREAD_PILL_KINDS","dir","UNREAD_PILL_DIRECTIONS"],"mappings":";;;AAwBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AACA;;;;;;;;;;"}

package/dist/vue2/lib/validation-messages/validation-messages.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../../common/validators/index.cjs"),t=require("../../common/utils/index.cjs"),l=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),d={name:"DtValidationMessages",props:{id:{type:String,default(){return t.getUniqueString()}},validationMessages:{type:Array,default:()=>[],validator:s=>o.validationMessageValidator(s)},showMessages:{type:Boolean,default:!0}},computed:{isFilteredValidationMessagesEmpty(){return this.filteredValidationMessages.length===0},filteredValidationMessages(){return t.filterFormattedMessages(this.validationMessages)},validationState(){return t.getValidationState(this.validationMessages)}},methods:{getMessageKey(s,e){return`validation-message-${s}-${e}-${this.id}`},messageTypeClass(s){return{error:"base-input__message--error d-validation-message--error",warning:"base-input__message--warning d-validation-message--warning",success:"base-input__message--success d-validation-message--success"}[s]}}};var g=function(){var e=this,a=e._self._c;return e.showMessages&&!e.isFilteredValidationMessagesEmpty?a("div",{staticClass:"base-input__messages d-validation-message__container",attrs:{"data-qa":"validation-messages-container"}},e._l(e.filteredValidationMessages,function({message:n,type:i},r){return a("div",{key:e.getMessageKey(i,r),class:["base-input__message","d-validation-message",e.messageTypeClass(i)],attrs:{role:"status","aria-live":"polite","data-qa":"validation-message"}},[a("p",{domProps:{innerHTML:e._s(n)}})])}),0):e._e()},u=[],_=l.n(d,g,u,!1,null,null);const m=_.exports;exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../../common/validators/index.cjs"),t=require("../../common/utils/index.cjs"),d=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l={name:"DtValidationMessages",props:{id:{type:String,default(){return t.getUniqueString()}},validationMessages:{type:Array,default:()=>[],validator:s=>o.validationMessageValidator(s)},showMessages:{type:Boolean,default:!0}},computed:{isFilteredValidationMessagesEmpty(){return this.filteredValidationMessages.length===0},filteredValidationMessages(){return t.filterFormattedMessages(this.validationMessages)},validationState(){return t.getValidationState(this.validationMessages)}},methods:{getMessageKey(s,e){return`validation-message-${s}-${e}-${this.id}`},messageTypeClass(s){return{error:"base-input__message--error d-validation-message--error",warning:"base-input__message--warning d-validation-message--warning",success:"base-input__message--success d-validation-message--success"}[s]}}};var g=function(){var e=this,a=e._self._c;return e.showMessages&&!e.isFilteredValidationMessagesEmpty?a("div",{staticClass:"base-input__messages d-validation-message__container",attrs:{"data-qa":"validation-messages-container"}},e._l(e.filteredValidationMessages,function({message:n,type:i},r){return a("div",{key:e.getMessageKey(i,r),class:["base-input__message","d-validation-message",e.messageTypeClass(i)],attrs:{role:"status","aria-live":"polite","data-qa":"validation-message"}},[a("p",{domProps:{innerHTML:e._s(n)}})])}),0):e._e()},u=[],_=d.n(l,g,u);const m=_.exports;exports.default=m;
 //# sourceMappingURL=validation-messages.cjs.map

package/dist/vue2/lib/validation-messages/validation-messages.js

@@ -1,6 +1,6 @@
 import { validationMessageValidator as r } from "../../common/validators/index.js";
-import { getUniqueString as o, filterFormattedMessages as l, getValidationState as d } from "../../common/utils/index.js";
-import { n as g } from "../../_plugin-vue2_normalizer-CeySl7Fu.js";
+import { getUniqueString as o, filterFormattedMessages as d, getValidationState as l } from "../../common/utils/index.js";
+import { n as g } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 const m = {
   name: "DtValidationMessages",
   props: {
@@ -36,10 +36,10 @@ const m = {
       return this.filteredValidationMessages.length === 0;
     },
     filteredValidationMessages() {
-      return l(this.validationMessages);
+      return d(this.validationMessages);
     },
     validationState() {
-      return d(this.validationMessages);
+      return l(this.validationMessages);
     }
   },
   methods: {
@@ -64,15 +64,12 @@ var _ = function() {
       e.messageTypeClass(t)
     ], attrs: { role: "status", "aria-live": "polite", "data-qa": "validation-message" } }, [a("p", { domProps: { innerHTML: e._s(i) } })]);
   }), 0) : e._e();
-}, u = [], p = /* @__PURE__ */ g(
+}, p = [], u = /* @__PURE__ */ g(
   m,
   _,
-  u,
-  !1,
-  null,
-  null
+  p
 );
-const M = p.exports;
+const M = u.exports;
 export {
   M as default
 };

package/dist/vue2/lib/validation-messages/validation-messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"validation-messages.js","sources":["../../../components/validation_messages/validation_messages.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"showMessages && !isFilteredValidationMessagesEmpty\"\n    class=\"base-input__messages d-validation-message__container\"\n    data-qa=\"validation-messages-container\"\n  >\n    <div\n      v-for=\"({ message, type }, index) in filteredValidationMessages\"\n      :key=\"getMessageKey(type, index)\"\n      role=\"status\"\n      aria-live=\"polite\"\n      data-qa=\"validation-message\"\n      :class=\"[\n        'base-input__message',\n        'd-validation-message',\n        messageTypeClass(type),\n      ]\"\n    >\n      <p v-html=\"message\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  filterFormattedMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * Validation messages are used to convey information to the user about the current state of the input element.\n * These messages can have an error, warning or success type.\n * @see https://dialtone.dialpad.com/components/validation_messages.html\n */\nexport default {\n  name: 'DtValidationMessages',\n\n  props: {\n    /**\n     * The id of the validation message\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * Array of validation messages. Each message has the following structure:\n     * `{ message: \"Some informative message\", type: \"error|warning|success\"}`\n     */\n    validationMessages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show Validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  computed: {\n    isFilteredValidationMessagesEmpty () {\n      return this.filteredValidationMessages.length === 0;\n    },\n\n    filteredValidationMessages () {\n      return filterFormattedMessages(this.validationMessages);\n    },\n\n    validationState () {\n      return getValidationState(this.validationMessages);\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `validation-message-${type}-${index}-${this.id}`;\n    },\n\n    messageTypeClass (type) {\n      const messageTypesClasses = {\n        error: 'base-input__message--error d-validation-message--error',\n        warning: 'base-input__message--warning d-validation-message--warning',\n        success: 'base-input__message--success d-validation-message--success',\n      };\n\n      return messageTypesClasses[type];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","getUniqueString","messages","validationMessageValidator","filterFormattedMessages","getValidationState","type","index"],"mappings":";;;AAoCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AACA,eAAAC,EAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAAC,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oCAAA;AACA,aAAA,KAAA,2BAAA,WAAA;AAAA,IACA;AAAA,IAEA,6BAAA;AACA,aAAAE,EAAA,KAAA,kBAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAAC,EAAA,KAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,cAAAC,GAAAC,GAAA;AACA,aAAA,sBAAAD,CAAA,IAAAC,CAAA,IAAA,KAAA,EAAA;AAAA,IACA;AAAA,IAEA,iBAAAD,GAAA;AAOA,aANA;AAAA,QACA,OAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,MACA,EAEAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"validation-messages.js","sources":["../../../components/validation_messages/validation_messages.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"showMessages && !isFilteredValidationMessagesEmpty\"\n    class=\"base-input__messages d-validation-message__container\"\n    data-qa=\"validation-messages-container\"\n  >\n    <div\n      v-for=\"({ message, type }, index) in filteredValidationMessages\"\n      :key=\"getMessageKey(type, index)\"\n      role=\"status\"\n      aria-live=\"polite\"\n      data-qa=\"validation-message\"\n      :class=\"[\n        'base-input__message',\n        'd-validation-message',\n        messageTypeClass(type),\n      ]\"\n    >\n      <p v-html=\"message\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  filterFormattedMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * Validation messages are used to convey information to the user about the current state of the input element.\n * These messages can have an error, warning or success type.\n * @see https://dialtone.dialpad.com/components/validation_messages.html\n */\nexport default {\n  name: 'DtValidationMessages',\n\n  props: {\n    /**\n     * The id of the validation message\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * Array of validation messages. Each message has the following structure:\n     * `{ message: \"Some informative message\", type: \"error|warning|success\"}`\n     */\n    validationMessages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show Validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  computed: {\n    isFilteredValidationMessagesEmpty () {\n      return this.filteredValidationMessages.length === 0;\n    },\n\n    filteredValidationMessages () {\n      return filterFormattedMessages(this.validationMessages);\n    },\n\n    validationState () {\n      return getValidationState(this.validationMessages);\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `validation-message-${type}-${index}-${this.id}`;\n    },\n\n    messageTypeClass (type) {\n      const messageTypesClasses = {\n        error: 'base-input__message--error d-validation-message--error',\n        warning: 'base-input__message--warning d-validation-message--warning',\n        success: 'base-input__message--success d-validation-message--success',\n      };\n\n      return messageTypesClasses[type];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","getUniqueString","messages","validationMessageValidator","filterFormattedMessages","getValidationState","type","index"],"mappings":";;;AAoCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AACA,eAAAC,EAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAAC,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oCAAA;AACA,aAAA,KAAA,2BAAA,WAAA;AAAA,IACA;AAAA,IAEA,6BAAA;AACA,aAAAE,EAAA,KAAA,kBAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAAC,EAAA,KAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,cAAAC,GAAAC,GAAA;AACA,aAAA,sBAAAD,CAAA,IAAAC,CAAA,IAAA,KAAA,EAAA;AAAA,IACA;AAAA,IAEA,iBAAAD,GAAA;AAOA,aANA;AAAA,QACA,OAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,MACA,EAEAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/vue2/shared/sr_only_close_button.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@dialpad/dialtone-icons/vue2"),n=require("../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),s=require("../lib/button/button.cjs"),r={name:"SrOnlyCloseButton",components:{DtIconClose:o.DtIconClose,DtButton:s.default},props:{visuallyHiddenCloseLabel:{type:String,default:null}},emits:["close"],methods:{close(){this.$emit("close")}}};var u=function(){var e=this,l=e._self._c;return l("dt-button",{staticClass:"d-vi-visible-sr",attrs:{id:"sr-only-close-button","data-qa":"dt-sr-only-close-button","aria-label":e.visuallyHiddenCloseLabel},on:{click:e.close,keydown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"space",32,t.key,[" ","Spacebar"])?null:(t.preventDefault(),t.stopPropagation(),e.close.apply(null,arguments))}}},[l("dt-icon-close")],1)},a=[],i=n.n(r,u,a,!1,null,null);const c=i.exports;exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("@dialpad/dialtone-icons/vue2"),l=require("../_plugin-vue2_normalizer-e_CkxkSV.cjs"),s=require("../lib/button/button.cjs"),r={name:"SrOnlyCloseButton",components:{DtIconClose:n.DtIconClose,DtButton:s.default},props:{visuallyHiddenCloseLabel:{type:String,default:null}},emits:["close"],methods:{close(){this.$emit("close")}}};var a=function(){var e=this,o=e._self._c;return o("dt-button",{staticClass:"d-vi-visible-sr",attrs:{id:"sr-only-close-button","data-qa":"dt-sr-only-close-button","aria-label":e.visuallyHiddenCloseLabel},on:{click:e.close,keydown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"space",32,t.key,[" ","Spacebar"])?null:(t.preventDefault(),t.stopPropagation(),e.close.apply(null,arguments))}}},[o("dt-icon-close")],1)},u=[],i=l.n(r,a,u);const c=i.exports;exports.default=c;
 //# sourceMappingURL=sr_only_close_button.cjs.map

package/dist/vue2/shared/sr_only_close_button.js

@@ -1,11 +1,11 @@
-import { DtIconClose as l } from "@dialpad/dialtone-icons/vue2";
-import { n } from "../_plugin-vue2_normalizer-CeySl7Fu.js";
-import s from "../lib/button/button.js";
+import { DtIconClose as n } from "@dialpad/dialtone-icons/vue2";
+import { n as s } from "../_plugin-vue2_normalizer-DSLOjnn3.js";
+import l from "../lib/button/button.js";
 const r = {
   name: "SrOnlyCloseButton",
   components: {
-    DtIconClose: l,
-    DtButton: s
+    DtIconClose: n,
+    DtButton: l
   },
   props: {
     /**
@@ -29,16 +29,13 @@ var a = function() {
   return e("dt-button", { staticClass: "d-vi-visible-sr", attrs: { id: "sr-only-close-button", "data-qa": "dt-sr-only-close-button", "aria-label": o.visuallyHiddenCloseLabel }, on: { click: o.close, keydown: function(t) {
     return !t.type.indexOf("key") && o._k(t.keyCode, "space", 32, t.key, [" ", "Spacebar"]) ? null : (t.preventDefault(), t.stopPropagation(), o.close.apply(null, arguments));
   } } }, [e("dt-icon-close")], 1);
-}, i = [], c = /* @__PURE__ */ n(
+}, i = [], c = /* @__PURE__ */ s(
   r,
   a,
-  i,
-  !1,
-  null,
-  null
+  i
 );
-const f = c.exports;
+const _ = c.exports;
 export {
-  f as default
+  _ as default
 };
 //# sourceMappingURL=sr_only_close_button.js.map

package/dist/vue2/shared/sr_only_close_button.js.map

@@ -1 +1 @@
-{"version":3,"file":"sr_only_close_button.js","sources":["../../common/sr_only_close_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    id=\"sr-only-close-button\"\n    data-qa=\"dt-sr-only-close-button\"\n    class=\"d-vi-visible-sr\"\n    :aria-label=\"visuallyHiddenCloseLabel\"\n    @click=\"close\"\n    @keydown.space.prevent.stop=\"close\"\n  >\n    <dt-icon-close />\n  </dt-button>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'SrOnlyCloseButton',\n  components: {\n    DtIconClose,\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Label for the visually hidden close button\n     * Required if visuallyHiddenClose is set to `true`\n     */\n    visuallyHiddenCloseLabel: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: ['close'],\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconClose","DtButton"],"mappings":";;;AAiBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AAAA,EAEA,SAAA;AAAA,IACA,QAAA;AACA,WAAA,MAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sr_only_close_button.js","sources":["../../common/sr_only_close_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    id=\"sr-only-close-button\"\n    data-qa=\"dt-sr-only-close-button\"\n    class=\"d-vi-visible-sr\"\n    :aria-label=\"visuallyHiddenCloseLabel\"\n    @click=\"close\"\n    @keydown.space.prevent.stop=\"close\"\n  >\n    <dt-icon-close />\n  </dt-button>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'SrOnlyCloseButton',\n  components: {\n    DtIconClose,\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Label for the visually hidden close button\n     * Required if visuallyHiddenClose is set to `true`\n     */\n    visuallyHiddenCloseLabel: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: ['close'],\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconClose","DtButton"],"mappings":";;;AAiBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AAAA,EAEA,SAAA;AAAA,IACA,QAAA;AACA,WAAA,MAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/vue2/types/components/popover/popover.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.vue.d.ts","sourceRoot":"","sources":["../../../../components/popover/popover.vue"],"names":[],"mappings":"AAwHA;"}
+{"version":3,"file":"popover.vue.d.ts","sourceRoot":"","sources":["../../../../components/popover/popover.vue"],"names":[],"mappings":"AAuHA;"}

package/dist/vue3/lib/popover/popover.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./popover-constants.cjs"),a=require("../../common/utils/index.cjs"),f=require("../../common/mixins/modal.cjs"),u=require("./tippy-utils.cjs"),m=require("./popover-header-footer.cjs"),v=require("../../common/mixins/sr-only-close-button.cjs"),y=require("../../shared/sr_only_close_button.cjs"),n=require("vue"),E=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),C=require("../lazy-show/lazy-show.cjs"),g={compatConfig:{MODE:3},name:"DtPopover",components:{SrOnlyCloseButton:y.default,DtLazyShow:C.default,PopoverHeaderFooter:m.default},mixins:[f.default,v.default],props:{open:{type:Boolean,default:null},openOnContext:{type:Boolean,default:!1},elementType:{type:String,default:"div"},transition:{type:String,default:"fade"},role:{type:String,default:"dialog",validator:e=>d.POPOVER_ROLES.includes(e)},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null},closeButtonProps:{type:Object,default:()=>({})},padding:{type:String,default:"large",validator:e=>Object.keys(d.POPOVER_PADDING_CLASSES).some(t=>t===e)},contentClass:{type:[String,Array,Object],default:""},contentWidth:{type:String,default:"",validator:e=>d.POPOVER_CONTENT_WIDTHS.includes(e)},contentAppear:{type:Boolean,default:null},contentTabindex:{type:Number||null,default:-1},externalAnchor:{type:String,default:""},id:{type:String,default(){return a.getUniqueString()}},offset:{type:Array,default:()=>[0,4]},hideOnClick:{type:Boolean,default:!0},modal:{type:Boolean,default:!0},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"bottom-end"},tether:{type:Boolean,default:!0},sticky:{type:[Boolean,String],default:!1,validator:e=>d.POPOVER_STICKY_VALUES.includes(e)},maxHeight:{type:String,default:""},maxWidth:{type:String,default:""},showCloseButton:{type:Boolean,default:!1},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""},dialogClass:{type:[String,Array,Object],default:""},initialFocusElement:{type:[String,HTMLElement],default:"first",validator:e=>d.POPOVER_INITIAL_FOCUS_STRINGS.includes(e)||e instanceof HTMLElement||e.startsWith("#")},openWithArrowKeys:{type:Boolean,default:!1},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>d.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement}},emits:["keydown","update:open","opened","mouseenter-popover","mouseleave-popover","mouseenter-popover-anchor","mouseleave-popover-anchor"],data(){return{POPOVER_PADDING_CLASSES:d.POPOVER_PADDING_CLASSES,POPOVER_HEADER_FOOTER_PADDING_CLASSES:d.POPOVER_HEADER_FOOTER_PADDING_CLASSES,intersectionObserver:null,isOutsideViewport:!1,isOpen:!1,toAppear:!1,anchorEl:null,popoverContentEl:null,hasSlotContent:a.hasSlotContent}},computed:{popoverListeners(){return{keydown:e=>{this.onKeydown(e)},"after-leave":e=>{this.onLeaveTransitionComplete()},"after-enter":e=>{this.onEnterTransitionComplete()}}},calculatedMaxHeight(){return this.isOutsideViewport&&this.modal?"calc(100vh - var(--dt-space-300))":this.maxHeight},labelledBy(){return this.ariaLabelledby||!this.ariaLabel&&a.getUniqueString("DtPopover__anchor")}},watch:{$props:{immediate:!0,deep:!0,handler(){this.validateProps()}},modal(e){var t;(t=this.tip)==null||t.setProps({zIndex:e?650:this.calculateAnchorZindex()})},offset(e){var t;(t=this.tip)==null||t.setProps({offset:e})},sticky(e){var t;(t=this.tip)==null||t.setProps({sticky:e})},fallbackPlacements(){var e;(e=this.tip)==null||e.setProps({popperOptions:this.popperOptions()})},tether(){var e;(e=this.tip)==null||e.setProps({popperOptions:this.popperOptions()})},placement(e){var t;(t=this.tip)==null||t.setProps({placement:e})},open:{handler:function(e){e!==null&&(this.isOpen=e),e===!0&&(this.toAppear=!0)},immediate:!0},contentAppear:{handler:function(e){e!==null&&(this.toAppear=e)}},isOpen(e,t){e?(this.initTippyInstance(),this.tip.show()):!e&&t!==e&&(this.removeEventListeners(),this.tip.hide())}},mounted(){var t;a.warnIfUnmounted(a.returnFirstEl(this.$el),this.$options.name);const e=this.externalAnchor?this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`):null;this.anchorEl=e??this.$refs.anchor.children[0],this.popoverContentEl=a.returnFirstEl((t=this.$refs.content)==null?void 0:t.$el),this.isOpen&&(this.initTippyInstance(),this.tip.show()),this.intersectionObserver=new IntersectionObserver(this.hasIntersectedViewport),this.intersectionObserver.observe(this.popoverContentEl)},beforeUnmount(){var e,t;(e=this.tip)==null||e.destroy(),(t=this.intersectionObserver)==null||t.disconnect(),this.removeReferences(),this.removeEventListeners()},methods:{hasIntersectedViewport(e){var i;const t=(i=e==null?void 0:e[0])==null?void 0:i.target;if(!t)return;const o=a.isOutOfViewPort(t);this.isOutsideViewport=o.bottom||o.top},popperOptions(){return u.getPopperOptions({fallbackPlacements:this.fallbackPlacements,tether:this.tether,hasHideModifierEnabled:!0})},validateProps(){this.modal&&this.initialFocusElement==="none"&&console.error('If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement')},calculateAnchorZindex(){var e;return a.returnFirstEl(this.$el).getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')||(e=this.anchorEl)!=null&&e.closest(".d-zi-drawer")?650:300},defaultToggleOpen(e){var t,o,i;if(!this.openOnContext&&(this.open===null||this.open===void 0)){if(!((t=this.anchorEl)!=null&&t.contains(e.target))&&!((o=this.anchorEl)!=null&&o.isEqualNode(e.target))||(i=this.anchorEl)!=null&&i.disabled)return;this.toggleOpen()}},async onContext(e){this.openOnContext&&(e.preventDefault(),this.isOpen=!0,await this.$nextTick(),this.tip.setProps({placement:"right-start",getReferenceClientRect:()=>({width:0,height:0,top:e.clientY,bottom:e.clientY,left:e.clientX,right:e.clientX})}))},toggleOpen(){this.isOpen=!this.isOpen},onArrowKeyPress(e){var t;this.open===null&&(this.openWithArrowKeys&&((t=this.anchorEl)!=null&&t.contains(e.target))&&(this.isOpen||(this.isOpen=!0)),this.$emit("keydown",e))},addEventListeners(){window.addEventListener("dt-popover-close",this.closePopover),this.contentWidth==="anchor"&&window.addEventListener("resize",this.onResize)},removeEventListeners(){window.removeEventListener("dt-popover-close",this.closePopover),this.contentWidth==="anchor"&&window.removeEventListener("resize",this.onResize)},closePopover(){this.isOpen=!1},preventScrolling(){var e,t;if(this.modal){const o=(e=this.anchorEl)==null?void 0:e.closest("body, .tippy-box");if(!o)return;((t=o.tagName)==null?void 0:t.toLowerCase())==="body"?(a.disableRootScrolling(this.anchorEl.getRootNode().host),this.tip.setProps({offset:this.offset})):o.classList.add("d-zi-popover")}},enableScrolling(){var t,o;const e=(t=this.anchorEl)==null?void 0:t.closest("body, .tippy-box");e&&(((o=e.tagName)==null?void 0:o.toLowerCase())==="body"?(a.enableRootScrolling(this.anchorEl.getRootNode().host),this.tip.setProps({offset:this.offset})):e.classList.remove("d-zi-popover"))},removeReferences(){this.anchorEl=null,this.popoverContentEl=null,this.tip=null},async onShow(){this.contentWidth==="anchor"&&await this.setPopoverContentAnchorWidth(),this.contentWidth===null&&(this.popoverContentEl.style.width="auto"),this.addEventListeners()},async onLeaveTransitionComplete(){var e;this.modal&&(await this.focusFirstElement(this.$refs.anchor),await this.$nextTick(),this.enableScrolling()),(e=this.tip)==null||e.unmount(),this.$emit("opened",!1),this.open!==null&&this.$emit("update:open",!1)},async onEnterTransitionComplete(){this.focusInitialElement(),await this.$nextTick(),this.preventScrolling(),this.$emit("opened",!0,this.$refs.popover__content),this.open!==null&&this.$emit("update:open",!0)},focusInitialElement(){var e,t;this.initialFocusElement==="dialog"&&((t=a.returnFirstEl((e=this.$refs.content)==null?void 0:e.$el))==null||t.focus()),this.initialFocusElement.startsWith("#")&&this.focusInitialElementById(),this.initialFocusElement==="first"&&this.focusFirstElementIfNeeded(this.$refs.popover__content),this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},focusInitialElementById(){var t,o,i;const e=(o=a.returnFirstEl((t=this.$refs.content)==null?void 0:t.$el))==null?void 0:o.querySelector(this.initialFocusElement);e?e.focus():console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'),e?e.focus():a.returnFirstEl((i=this.$refs.content)==null?void 0:i.$el).focus()},onResize(){this.closePopover()},onClickOutside(){var t;if(!this.hideOnClick)return;((t=this.popoverContentEl)==null?void 0:t.querySelector(".d-popover__anchor--opened"))||this.closePopover()},onKeydown(e){e.key==="Tab"&&this.modal&&this.focusTrappedTabPress(e,this.popoverContentEl),e.key==="Escape"&&this.closePopover(),this.$emit("keydown",e)},async setPopoverContentAnchorWidth(){var e;await this.$nextTick(),this.popoverContentEl.style.width=`${(e=this.anchorEl)==null?void 0:e.clientWidth}px`},focusFirstElementIfNeeded(e){var o,i;this._getFocusableElements(e,!0).length!==0?this.focusFirstElement(e):this.showCloseButton?(o=this.$refs.popover__header)==null||o.focusCloseButton():a.returnFirstEl((i=this.$refs.content)==null?void 0:i.$el).focus()},getReferenceClientRect(e){var p,h;const t=(p=this.anchorEl)==null?void 0:p.getBoundingClientRect();if(this.appendTo!=="root"||e)return t;const o=(h=this.anchorEl)==null?void 0:h.ownerDocument,i=(o==null?void 0:o.defaultView)||(o==null?void 0:o.parentWindow),r=i==null?void 0:i.frameElement;if(!r)return t;const s=r.getBoundingClientRect();return{width:t==null?void 0:t.width,height:t==null?void 0:t.height,top:(s==null?void 0:s.top)+(t==null?void 0:t.top),left:(s==null?void 0:s.left)+(t==null?void 0:t.left),right:(s==null?void 0:s.right)+(t==null?void 0:t.right),bottom:(s==null?void 0:s.bottom)+(t==null?void 0:t.bottom)}},initTippyInstance(){var o,i;let e=null,t=!1;switch(this.appendTo){case"body":e=(i=(o=this.anchorEl)==null?void 0:o.getRootNode())==null?void 0:i.querySelector("body");break;case"root":try{e=window.parent.document.body}catch(r){console.error("Could not attach the popover to iframe parent window: ",r),e="parent",t=!0}break;default:e=this.appendTo;break}this.tip=u.createTippyPopover(this.anchorEl,{popperOptions:this.popperOptions(),contentElement:this.popoverContentEl,placement:this.placement,offset:this.offset,sticky:this.sticky,appendTo:e,interactive:!0,trigger:"manual",getReferenceClientRect:()=>this.getReferenceClientRect(t),hideOnClick:!1,zIndex:this.modal?650:this.calculateAnchorZindex(),onClickOutside:this.onClickOutside,onShow:this.onShow})},onMouseEnter(){this.$emit("mouseenter-popover")},onMouseLeave(){this.$emit("mouseleave-popover")},onMouseEnterAnchor(){this.$emit("mouseenter-popover-anchor")},onMouseLeaveAnchor(){this.$emit("mouseleave-popover-anchor")}}},O=["aria-hidden"],b=["id","data-qa","tabindex"],w=["data-qa"];function P(e,t,o,i,r,s){const p=n.resolveComponent("popover-header-footer"),h=n.resolveComponent("sr-only-close-button"),c=n.resolveComponent("dt-lazy-show");return n.openBlock(),n.createElementBlock("div",null,[o.modal&&r.isOpen?(n.openBlock(),n.createBlock(n.Teleport,{key:0,to:"body"},[n.createElementVNode("div",{class:"d-modal--transparent","aria-hidden":o.modal&&r.isOpen?"false":"true",onClick:t[0]||(t[0]=n.withModifiers(()=>{},["prevent","stop"]))},null,8,O)])):n.createCommentVNode("",!0),(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.elementType),{ref:"popover",class:n.normalizeClass(["d-popover",{"d-popover__anchor--opened":r.isOpen}]),"data-qa":"dt-popover-container"},{default:n.withCtx(()=>[n.createElementVNode("div",{id:!o.ariaLabelledby&&s.labelledBy,ref:"anchor","data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-anchor`:"dt-popover-anchor",tabindex:o.openOnContext?0:void 0,onClickCapture:t[1]||(t[1]=(...l)=>s.defaultToggleOpen&&s.defaultToggleOpen(...l)),onContextmenu:t[2]||(t[2]=(...l)=>s.onContext&&s.onContext(...l)),onKeydown:[t[3]||(t[3]=n.withKeys(n.withModifiers((...l)=>s.onArrowKeyPress&&s.onArrowKeyPress(...l),["prevent"]),["up"])),t[4]||(t[4]=n.withKeys(n.withModifiers((...l)=>s.onArrowKeyPress&&s.onArrowKeyPress(...l),["prevent"]),["down"])),t[6]||(t[6]=n.withKeys(l=>e.$emit("keydown",l),["enter"])),t[7]||(t[7]=n.withKeys(l=>e.$emit("keydown",l),["space"]))],onKeydownCapture:t[5]||(t[5]=n.withKeys((...l)=>s.closePopover&&s.closePopover(...l),["escape"])),onMouseenter:t[8]||(t[8]=(...l)=>s.onMouseEnter&&s.onMouseEnter(...l)),onMouseleave:t[9]||(t[9]=(...l)=>s.onMouseLeave&&s.onMouseLeave(...l))},[n.renderSlot(e.$slots,"anchor",{attrs:{"aria-expanded":r.isOpen.toString(),"aria-controls":o.id,"aria-haspopup":o.role}})],40,b),n.createVNode(c,n.mergeProps({id:o.id,ref:"content",role:o.role,"data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}__dialog`:"dt-popover","aria-hidden":`${!r.isOpen}`,"aria-labelledby":s.labelledBy,"aria-label":o.ariaLabel,"aria-modal":`${!o.modal}`,transition:o.transition,show:r.isOpen,appear:r.toAppear,class:["d-popover__dialog",{"d-popover__dialog--modal":o.modal},o.dialogClass],style:{"max-height":s.calculatedMaxHeight,"max-width":o.maxWidth},css:e.$attrs.css,tabindex:o.contentTabindex},n.toHandlers(s.popoverListeners),{onMouseenter:s.onMouseEnterAnchor,onMouseleave:s.onMouseLeaveAnchor}),{default:n.withCtx(()=>[r.hasSlotContent(e.$slots.headerContent)||o.showCloseButton?(n.openBlock(),n.createBlock(p,{key:0,ref:"popover__header",class:n.normalizeClass(r.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),"content-class":o.headerClass,type:"header","show-close-button":o.showCloseButton,"close-button-props":o.closeButtonProps,onClose:s.closePopover},{content:n.withCtx(()=>[n.renderSlot(e.$slots,"headerContent",{close:s.closePopover})]),_:3},8,["class","content-class","show-close-button","close-button-props","onClose"])):n.createCommentVNode("",!0),n.createElementVNode("div",{ref:"popover__content","data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-content`:"dt-popover-content",class:n.normalizeClass(["d-popover__content",r.POPOVER_PADDING_CLASSES[o.padding],o.contentClass])},[n.renderSlot(e.$slots,"content",{close:s.closePopover})],10,w),r.hasSlotContent(e.$slots.footerContent)?(n.openBlock(),n.createBlock(p,{key:1,ref:"popover__footer",type:"footer",class:n.normalizeClass(r.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),"content-class":o.footerClass},{content:n.withCtx(()=>[n.renderSlot(e.$slots,"footerContent",{close:s.closePopover})]),_:3},8,["class","content-class"])):n.createCommentVNode("",!0),e.showVisuallyHiddenClose?(n.openBlock(),n.createBlock(h,{key:2,"visually-hidden-close-label":e.visuallyHiddenCloseLabel,onClose:s.closePopover},null,8,["visually-hidden-close-label","onClose"])):n.createCommentVNode("",!0)]),_:3},16,["id","role","data-qa","aria-hidden","aria-labelledby","aria-label","aria-modal","transition","show","appear","class","style","css","tabindex","onMouseenter","onMouseleave"])]),_:3},8,["class"]))])}const S=E._(g,[["render",P]]);exports.default=S;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./popover-constants.cjs"),a=require("../../common/utils/index.cjs"),f=require("../../common/mixins/modal.cjs"),u=require("./tippy-utils.cjs"),m=require("./popover-header-footer.cjs"),v=require("../../common/mixins/sr-only-close-button.cjs"),y=require("../../shared/sr_only_close_button.cjs"),n=require("vue"),E=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),C=require("../lazy-show/lazy-show.cjs"),g={compatConfig:{MODE:3},name:"DtPopover",components:{SrOnlyCloseButton:y.default,DtLazyShow:C.default,PopoverHeaderFooter:m.default},mixins:[f.default,v.default],props:{open:{type:Boolean,default:null},openOnContext:{type:Boolean,default:!1},elementType:{type:String,default:"div"},transition:{type:String,default:"fade"},role:{type:String,default:"dialog",validator:e=>d.POPOVER_ROLES.includes(e)},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null},closeButtonProps:{type:Object,default:()=>({})},padding:{type:String,default:"large",validator:e=>Object.keys(d.POPOVER_PADDING_CLASSES).some(t=>t===e)},contentClass:{type:[String,Array,Object],default:""},contentWidth:{type:String,default:"",validator:e=>d.POPOVER_CONTENT_WIDTHS.includes(e)},contentAppear:{type:Boolean,default:null},contentTabindex:{type:Number||null,default:-1},externalAnchor:{type:String,default:""},id:{type:String,default(){return a.getUniqueString()}},offset:{type:Array,default:()=>[0,4]},hideOnClick:{type:Boolean,default:!0},modal:{type:Boolean,default:!0},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"bottom-end"},tether:{type:Boolean,default:!0},sticky:{type:[Boolean,String],default:!1,validator:e=>d.POPOVER_STICKY_VALUES.includes(e)},maxHeight:{type:String,default:""},maxWidth:{type:String,default:""},showCloseButton:{type:Boolean,default:!1},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""},dialogClass:{type:[String,Array,Object],default:""},initialFocusElement:{type:[String,HTMLElement],default:"first",validator:e=>d.POPOVER_INITIAL_FOCUS_STRINGS.includes(e)||e instanceof HTMLElement||e.startsWith("#")},openWithArrowKeys:{type:Boolean,default:!1},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>d.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement}},emits:["keydown","update:open","opened","mouseenter-popover","mouseleave-popover","mouseenter-popover-anchor","mouseleave-popover-anchor"],data(){return{POPOVER_PADDING_CLASSES:d.POPOVER_PADDING_CLASSES,POPOVER_HEADER_FOOTER_PADDING_CLASSES:d.POPOVER_HEADER_FOOTER_PADDING_CLASSES,intersectionObserver:null,isOutsideViewport:!1,isOpen:!1,toAppear:!1,anchorEl:null,popoverContentEl:null,hasSlotContent:a.hasSlotContent}},computed:{popoverListeners(){return{keydown:e=>{this.onKeydown(e)},"after-leave":e=>{this.onLeaveTransitionComplete()},"after-enter":e=>{this.onEnterTransitionComplete()}}},calculatedMaxHeight(){return this.isOutsideViewport&&this.modal?"calc(100vh - var(--dt-space-300))":this.maxHeight},labelledBy(){return this.ariaLabelledby||!this.ariaLabel&&a.getUniqueString("DtPopover__anchor")}},watch:{$props:{immediate:!0,deep:!0,handler(){this.validateProps()}},modal(e){var t;(t=this.tip)==null||t.setProps({zIndex:e?650:this.calculateAnchorZindex()})},offset(e){var t;(t=this.tip)==null||t.setProps({offset:e})},sticky(e){var t;(t=this.tip)==null||t.setProps({sticky:e})},fallbackPlacements(){var e;(e=this.tip)==null||e.setProps({popperOptions:this.popperOptions()})},tether(){var e;(e=this.tip)==null||e.setProps({popperOptions:this.popperOptions()})},placement(e){var t;(t=this.tip)==null||t.setProps({placement:e})},open:{handler:function(e){e!==null&&(this.isOpen=e),e===!0&&(this.toAppear=!0)},immediate:!0},contentAppear:{handler:function(e){e!==null&&(this.toAppear=e)}},isOpen(e,t){e?(this.initTippyInstance(),this.tip.show()):!e&&t!==e&&(this.removeEventListeners(),this.tip.hide())}},mounted(){var t;a.warnIfUnmounted(a.returnFirstEl(this.$el),this.$options.name);const e=this.externalAnchor?this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`):null;this.anchorEl=e??this.$refs.anchor.children[0],this.popoverContentEl=a.returnFirstEl((t=this.$refs.content)==null?void 0:t.$el),this.isOpen&&(this.initTippyInstance(),this.tip.show()),this.intersectionObserver=new IntersectionObserver(this.hasIntersectedViewport),this.intersectionObserver.observe(this.popoverContentEl)},beforeUnmount(){var e,t;(e=this.tip)==null||e.destroy(),(t=this.intersectionObserver)==null||t.disconnect(),this.removeReferences(),this.removeEventListeners()},methods:{hasIntersectedViewport(e){var i;const t=(i=e==null?void 0:e[0])==null?void 0:i.target;if(!t)return;const o=a.isOutOfViewPort(t);this.isOutsideViewport=o.bottom||o.top},popperOptions(){return u.getPopperOptions({fallbackPlacements:this.fallbackPlacements,tether:this.tether,hasHideModifierEnabled:!0})},validateProps(){this.modal&&this.initialFocusElement==="none"&&console.error('If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement')},calculateAnchorZindex(){var e;return a.returnFirstEl(this.$el).getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')||(e=this.anchorEl)!=null&&e.closest(".d-zi-drawer")?650:300},defaultToggleOpen(e){var t,o,i;if(!this.openOnContext&&(this.open===null||this.open===void 0)){if(!((t=this.anchorEl)!=null&&t.contains(e.target))&&!((o=this.anchorEl)!=null&&o.isEqualNode(e.target))||(i=this.anchorEl)!=null&&i.disabled)return;this.toggleOpen()}},async onContext(e){this.openOnContext&&(e.preventDefault(),this.isOpen=!0,await this.$nextTick(),this.tip.setProps({placement:"right-start",getReferenceClientRect:()=>({width:0,height:0,top:e.clientY,bottom:e.clientY,left:e.clientX,right:e.clientX})}))},toggleOpen(){this.isOpen=!this.isOpen},onArrowKeyPress(e){var t;this.open===null&&(this.openWithArrowKeys&&((t=this.anchorEl)!=null&&t.contains(e.target))&&(this.isOpen||(this.isOpen=!0)),this.$emit("keydown",e))},addEventListeners(){window.addEventListener("dt-popover-close",this.closePopover),this.contentWidth==="anchor"&&window.addEventListener("resize",this.onResize)},removeEventListeners(){window.removeEventListener("dt-popover-close",this.closePopover),this.contentWidth==="anchor"&&window.removeEventListener("resize",this.onResize)},closePopover(){this.isOpen=!1},preventScrolling(){var e,t;if(this.modal){const o=(e=this.anchorEl)==null?void 0:e.closest("body, .tippy-box");if(!o)return;((t=o.tagName)==null?void 0:t.toLowerCase())==="body"?(a.disableRootScrolling(this.anchorEl.getRootNode().host),this.tip.setProps({offset:this.offset})):o.classList.add("d-zi-popover")}},enableScrolling(){var t,o;const e=(t=this.anchorEl)==null?void 0:t.closest("body, .tippy-box");e&&(((o=e.tagName)==null?void 0:o.toLowerCase())==="body"?(a.enableRootScrolling(this.anchorEl.getRootNode().host),this.tip.setProps({offset:this.offset})):e.classList.remove("d-zi-popover"))},removeReferences(){this.anchorEl=null,this.popoverContentEl=null,this.tip=null},async onShow(){this.contentWidth==="anchor"&&await this.setPopoverContentAnchorWidth(),this.contentWidth===null&&(this.popoverContentEl.style.width="auto"),this.addEventListeners()},async onLeaveTransitionComplete(){var e;this.modal&&(await this.focusFirstElement(this.$refs.anchor),await this.$nextTick(),this.enableScrolling()),(e=this.tip)==null||e.unmount(),this.$emit("opened",!1),this.open!==null&&this.$emit("update:open",!1)},async onEnterTransitionComplete(){this.focusInitialElement(),await this.$nextTick(),this.preventScrolling(),this.$emit("opened",!0,this.$refs.popover__content),this.open!==null&&this.$emit("update:open",!0)},focusInitialElement(){var e,t;this.initialFocusElement==="dialog"&&((t=a.returnFirstEl((e=this.$refs.content)==null?void 0:e.$el))==null||t.focus()),this.initialFocusElement.startsWith("#")&&this.focusInitialElementById(),this.initialFocusElement==="first"&&this.focusFirstElementIfNeeded(this.$refs.popover__content),this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},focusInitialElementById(){var t,o,i;const e=(o=a.returnFirstEl((t=this.$refs.content)==null?void 0:t.$el))==null?void 0:o.querySelector(this.initialFocusElement);e?e.focus():console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'),e?e.focus():a.returnFirstEl((i=this.$refs.content)==null?void 0:i.$el).focus()},onResize(){this.closePopover()},onClickOutside(){var t;if(!this.hideOnClick)return;((t=this.popoverContentEl)==null?void 0:t.querySelector(".d-popover__anchor--opened"))||this.closePopover()},onKeydown(e){e.key==="Tab"&&this.modal&&this.focusTrappedTabPress(e,this.popoverContentEl),e.key==="Escape"&&this.closePopover(),this.$emit("keydown",e)},async setPopoverContentAnchorWidth(){var e;await this.$nextTick(),this.popoverContentEl.style.width=`${(e=this.anchorEl)==null?void 0:e.clientWidth}px`},focusFirstElementIfNeeded(e){var o,i;this._getFocusableElements(e,!0).length!==0?this.focusFirstElement(e):this.showCloseButton?(o=this.$refs.popover__header)==null||o.focusCloseButton():a.returnFirstEl((i=this.$refs.content)==null?void 0:i.$el).focus()},getReferenceClientRect(e){var p,h;const t=(p=this.anchorEl)==null?void 0:p.getBoundingClientRect();if(this.appendTo!=="root"||e)return t;const o=(h=this.anchorEl)==null?void 0:h.ownerDocument,i=(o==null?void 0:o.defaultView)||(o==null?void 0:o.parentWindow),l=i==null?void 0:i.frameElement;if(!l)return t;const s=l.getBoundingClientRect();return{width:t==null?void 0:t.width,height:t==null?void 0:t.height,top:(s==null?void 0:s.top)+(t==null?void 0:t.top),left:(s==null?void 0:s.left)+(t==null?void 0:t.left),right:(s==null?void 0:s.right)+(t==null?void 0:t.right),bottom:(s==null?void 0:s.bottom)+(t==null?void 0:t.bottom)}},initTippyInstance(){var o,i;let e=null,t=!1;switch(this.appendTo){case"body":e=(i=(o=this.anchorEl)==null?void 0:o.getRootNode())==null?void 0:i.querySelector("body");break;case"root":try{e=window.parent.document.body}catch(l){console.error("Could not attach the popover to iframe parent window: ",l),e="parent",t=!0}break;default:e=this.appendTo;break}this.tip=u.createTippyPopover(this.anchorEl,{popperOptions:this.popperOptions(),contentElement:this.popoverContentEl,placement:this.placement,offset:this.offset,sticky:this.sticky,appendTo:e,interactive:!0,trigger:"manual",getReferenceClientRect:()=>this.getReferenceClientRect(t),hideOnClick:!1,zIndex:this.modal?650:this.calculateAnchorZindex(),onClickOutside:this.onClickOutside,onShow:this.onShow})},onMouseEnter(){this.$emit("mouseenter-popover")},onMouseLeave(){this.$emit("mouseleave-popover")},onMouseEnterAnchor(){this.$emit("mouseenter-popover-anchor")},onMouseLeaveAnchor(){this.$emit("mouseleave-popover-anchor")}}},O=["id","data-qa","tabindex"],b=["data-qa"];function w(e,t,o,i,l,s){const p=n.resolveComponent("popover-header-footer"),h=n.resolveComponent("sr-only-close-button"),c=n.resolveComponent("dt-lazy-show");return n.openBlock(),n.createElementBlock("div",null,[o.modal&&l.isOpen?(n.openBlock(),n.createBlock(n.Teleport,{key:0,to:"body"},[n.createElementVNode("div",{class:"d-modal--transparent",onClick:t[0]||(t[0]=n.withModifiers(()=>{},["prevent","stop"]))})])):n.createCommentVNode("",!0),(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.elementType),{ref:"popover",class:n.normalizeClass(["d-popover",{"d-popover__anchor--opened":l.isOpen}]),"data-qa":"dt-popover-container"},{default:n.withCtx(()=>[n.createElementVNode("div",{id:!o.ariaLabelledby&&s.labelledBy,ref:"anchor","data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-anchor`:"dt-popover-anchor",tabindex:o.openOnContext?0:void 0,onClickCapture:t[1]||(t[1]=(...r)=>s.defaultToggleOpen&&s.defaultToggleOpen(...r)),onContextmenu:t[2]||(t[2]=(...r)=>s.onContext&&s.onContext(...r)),onKeydown:[t[3]||(t[3]=n.withKeys(n.withModifiers((...r)=>s.onArrowKeyPress&&s.onArrowKeyPress(...r),["prevent"]),["up"])),t[4]||(t[4]=n.withKeys(n.withModifiers((...r)=>s.onArrowKeyPress&&s.onArrowKeyPress(...r),["prevent"]),["down"])),t[6]||(t[6]=n.withKeys(r=>e.$emit("keydown",r),["enter"])),t[7]||(t[7]=n.withKeys(r=>e.$emit("keydown",r),["space"]))],onKeydownCapture:t[5]||(t[5]=n.withKeys((...r)=>s.closePopover&&s.closePopover(...r),["escape"])),onMouseenter:t[8]||(t[8]=(...r)=>s.onMouseEnter&&s.onMouseEnter(...r)),onMouseleave:t[9]||(t[9]=(...r)=>s.onMouseLeave&&s.onMouseLeave(...r))},[n.renderSlot(e.$slots,"anchor",{attrs:{"aria-expanded":l.isOpen.toString(),"aria-controls":o.id,"aria-haspopup":o.role}})],40,O),n.createVNode(c,n.mergeProps({id:o.id,ref:"content",role:o.role,"data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}__dialog`:"dt-popover","aria-hidden":`${!l.isOpen}`,"aria-labelledby":s.labelledBy,"aria-label":o.ariaLabel,"aria-modal":`${!o.modal}`,transition:o.transition,show:l.isOpen,appear:l.toAppear,class:["d-popover__dialog",{"d-popover__dialog--modal":o.modal},o.dialogClass],style:{"max-height":s.calculatedMaxHeight,"max-width":o.maxWidth},css:e.$attrs.css,tabindex:o.contentTabindex},n.toHandlers(s.popoverListeners),{onMouseenter:s.onMouseEnterAnchor,onMouseleave:s.onMouseLeaveAnchor}),{default:n.withCtx(()=>[l.hasSlotContent(e.$slots.headerContent)||o.showCloseButton?(n.openBlock(),n.createBlock(p,{key:0,ref:"popover__header",class:n.normalizeClass(l.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),"content-class":o.headerClass,type:"header","show-close-button":o.showCloseButton,"close-button-props":o.closeButtonProps,onClose:s.closePopover},{content:n.withCtx(()=>[n.renderSlot(e.$slots,"headerContent",{close:s.closePopover})]),_:3},8,["class","content-class","show-close-button","close-button-props","onClose"])):n.createCommentVNode("",!0),n.createElementVNode("div",{ref:"popover__content","data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-content`:"dt-popover-content",class:n.normalizeClass(["d-popover__content",l.POPOVER_PADDING_CLASSES[o.padding],o.contentClass])},[n.renderSlot(e.$slots,"content",{close:s.closePopover})],10,b),l.hasSlotContent(e.$slots.footerContent)?(n.openBlock(),n.createBlock(p,{key:1,ref:"popover__footer",type:"footer",class:n.normalizeClass(l.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),"content-class":o.footerClass},{content:n.withCtx(()=>[n.renderSlot(e.$slots,"footerContent",{close:s.closePopover})]),_:3},8,["class","content-class"])):n.createCommentVNode("",!0),e.showVisuallyHiddenClose?(n.openBlock(),n.createBlock(h,{key:2,"visually-hidden-close-label":e.visuallyHiddenCloseLabel,onClose:s.closePopover},null,8,["visually-hidden-close-label","onClose"])):n.createCommentVNode("",!0)]),_:3},16,["id","role","data-qa","aria-hidden","aria-labelledby","aria-label","aria-modal","transition","show","appear","class","style","css","tabindex","onMouseenter","onMouseleave"])]),_:3},8,["class"]))])}const P=E._(g,[["render",w]]);exports.default=P;
 //# sourceMappingURL=popover.cjs.map