@dialpad/dialtone 9.143.0 → 9.145.0

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        // eslint-disable-next-line vue/no-restricted-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\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 (!this.tip) return;\n\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(\n          `.d-modal[aria-hidden=\"false\"],\n          .d-modal--transparent[aria-hidden=\"false\"],\n          .d-modal:not([aria-hidden]),\n          .d-modal--transparent:not([aria-hidden])`) ||\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","e","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        // eslint-disable-next-line vue/no-restricted-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\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 (!this.tip || !this.anchor) return;\n\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(\n          `.d-modal[aria-hidden=\"false\"],\n          .d-modal--transparent[aria-hidden=\"false\"],\n          .d-modal:not([aria-hidden]),\n          .d-modal--transparent:not([aria-hidden])`) ||\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 || !this.anchor) return;\n\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","e","callingMethod","listener","event"],"mappings":"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"}

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

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

package/dist/vue3/lib/avatar/avatar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("../../common/utils/index.cjs"),i=require("./avatar-constants.cjs"),o=require("../icon/icon-constants.cjs"),c=require("./utils.cjs"),e=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../presence/presence.cjs"),m={compatConfig:{MODE:3},name:"DtAvatar",components:{DtPresence:u.default},inheritAttrs:!1,props:{id:{type:String,default(){return l.getUniqueString()}},seed:{type:String,default:void 0},color:{type:String,default:void 0},size:{type:String,default:"md",validator:t=>Object.keys(i.AVATAR_SIZE_MODIFIERS).includes(t)},avatarClass:{type:[String,Array,Object],default:""},canvasClass:{type:[String,Array,Object],default:""},iconClass:{type:[String,Array,Object],default:""},presence:{type:String,default:i.AVATAR_PRESENCE_STATES.NONE,validator:t=>Object.values(i.AVATAR_PRESENCE_STATES).includes(t)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:t=>i.AVATAR_GROUP_VALIDATOR(t)},overlayText:{type:String,default:""},overlayClass:{type:[String,Array,Object],default:""},imageSrc:{type:String,default:""},imageAlt:{type:String,default:void 0},iconSize:{type:String,default:"",validator:t=>!t||Object.keys(o.ICON_SIZE_MODIFIERS).includes(t)},fullName:{type:String,default:""},clickable:{type:Boolean,default:!1},iconAriaLabel:{type:String,default:void 0}},emits:["click"],data(){return{AVATAR_SIZE_MODIFIERS:i.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:i.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:i.AVATAR_PRESENCE_SIZE_MODIFIERS,AVATAR_ICON_SIZES:i.AVATAR_ICON_SIZES,imageLoadedSuccessfully:null,formattedInitials:"",initializing:!1,hasSlotContent:l.hasSlotContent}},computed:{hasOverlayIcon(){return l.hasSlotContent(this.$slots.overlayIcon)},iconDataQa(){return"dt-avatar-icon"},avatarClasses(){return["d-avatar",this.$attrs.class,i.AVATAR_SIZE_MODIFIERS[this.validatedSize],this.avatarClass,{"d-avatar--group":this.showGroup,[`d-avatar--color-${this.getColor()}`]:!this.isIconType(),"d-avatar--clickable":this.clickable}]},overlayClasses(){return["d-avatar__overlay",this.overlayClass,{"d-avatar__overlay-icon":this.hasOverlayIcon}]},showGroup(){return i.AVATAR_GROUP_VALIDATOR(this.group)},formattedGroup(){return this.group>99?"99+":this.group},validatedSize(){return this.group?"xs":this.size},showImage(){return this.imageLoadedSuccessfully!==!1&&this.imageSrc}},watch:{fullName:{immediate:!0,handler(){this.formatInitials()}},size:{immediate:!0,handler(){this.formatInitials()}},group:{immediate:!0,handler(){this.formatInitials()}},imageSrc(t){this.imageLoadedSuccessfully=null,t&&(this.validateProps(),this.setImageListeners())}},mounted(){this.validateProps(),this.setImageListeners()},methods:{isIconType(){return l.hasSlotContent(this.$slots.icon)},async setImageListeners(){await this.$nextTick();const t=this.$refs.avatarImage;t&&(t.addEventListener("load",()=>this._loadedImageEventHandler(t),{once:!0}),t.addEventListener("error",()=>this._erroredImageEventHandler(t),{once:!0}))},formatInitials(){const t=c.extractInitialsFromName(this.fullName);this.validatedSize==="xs"?this.formattedInitials="":this.validatedSize==="sm"?this.formattedInitials=t[0]:this.formattedInitials=t},getColor(){return this.color??l.getRandomElement(i.AVATAR_RANDOM_COLORS,this.seed)},_loadedImageEventHandler(t){this.imageLoadedSuccessfully=!0,t.classList.remove("d-d-none")},_erroredImageEventHandler(t){this.imageLoadedSuccessfully=!1,t.classList.add("d-d-none")},validateProps(){this.imageSrc&&this.imageAlt===void 0&&console.error('image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby')},handleClick(t){this.clickable&&this.$emit("click",t)}}},_=["src","alt"],S=["aria-label","data-qa","role"],v={key:1,class:"d-avatar__overlay-text"},A={key:1,class:"d-avatar__count","data-qa":"dt-avatar-count"};function I(t,y,a,g,s,r){const n=e.resolveComponent("dt-presence");return e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.clickable?"button":"div"),{id:a.id,class:e.normalizeClass(r.avatarClasses),style:e.normalizeStyle(t.$attrs.style),"data-qa":"dt-avatar",onClick:r.handleClick},{default:e.withCtx(()=>[e.createElementVNode("div",{ref:"canvas",class:e.normalizeClass([a.canvasClass,"d-avatar__canvas",{"d-avatar--image-loaded":s.imageLoadedSuccessfully}])},[r.showImage?(e.openBlock(),e.createElementBlock("img",{key:0,ref:"avatarImage",class:"d-avatar__image","data-qa":"dt-avatar-image",src:a.imageSrc,alt:a.imageAlt},null,8,_)):r.isIconType()?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([a.iconClass,s.AVATAR_KIND_MODIFIERS.icon]),"aria-label":a.clickable?a.iconAriaLabel:"","data-qa":r.iconDataQa,role:a.clickable?"button":""},[e.renderSlot(t.$slots,"icon",{iconSize:a.iconSize||s.AVATAR_ICON_SIZES[a.size]})],10,S)):(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass([s.AVATAR_KIND_MODIFIERS.initials])},e.toDisplayString(s.formattedInitials),3))],2),r.hasOverlayIcon||a.overlayText?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(r.overlayClasses)},[r.hasOverlayIcon?e.renderSlot(t.$slots,"overlayIcon",{key:0}):a.overlayText?(e.openBlock(),e.createElementBlock("p",v,e.toDisplayString(a.overlayText),1)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),r.showGroup?(e.openBlock(),e.createElementBlock("span",A,e.toDisplayString(r.formattedGroup),1)):e.createCommentVNode("",!0),a.presence&&!r.showGroup?(e.openBlock(),e.createBlock(n,e.mergeProps({key:2,presence:a.presence,class:["d-avatar__presence",s.AVATAR_PRESENCE_SIZE_MODIFIERS[a.size]]},a.presenceProps,{"data-qa":"dt-presence"}),null,16,["presence","class"])):e.createCommentVNode("",!0)]),_:3},8,["id","class","style","onClick"])}const h=d._(m,[["render",I]]);exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("../../common/utils/index.cjs"),s=require("./avatar-constants.cjs"),o=require("../icon/icon-constants.cjs"),c=require("./utils.cjs"),e=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../presence/presence.cjs"),m={compatConfig:{MODE:3},name:"DtAvatar",components:{DtPresence:u.default},inheritAttrs:!1,props:{id:{type:String,default(){return l.getUniqueString()}},seed:{type:String,default:void 0},color:{type:String,default:void 0},size:{type:String,default:"md",validator:t=>Object.keys(s.AVATAR_SIZE_MODIFIERS).includes(t)},avatarClass:{type:[String,Array,Object],default:""},canvasClass:{type:[String,Array,Object],default:""},iconClass:{type:[String,Array,Object],default:""},presence:{type:String,default:s.AVATAR_PRESENCE_STATES.NONE,validator:t=>Object.values(s.AVATAR_PRESENCE_STATES).includes(t)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:t=>s.AVATAR_GROUP_VALIDATOR(t)},overlayText:{type:String,default:""},overlayClass:{type:[String,Array,Object],default:""},imageSrc:{type:String,default:""},imageAlt:{type:String,default:void 0},iconSize:{type:String,default:"",validator:t=>!t||Object.keys(o.ICON_SIZE_MODIFIERS).includes(t)},fullName:{type:String,default:""},clickable:{type:Boolean,default:!1},iconAriaLabel:{type:String,default:void 0}},emits:["click"],data(){return{AVATAR_SIZE_MODIFIERS:s.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:s.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:s.AVATAR_PRESENCE_SIZE_MODIFIERS,AVATAR_ICON_SIZES:s.AVATAR_ICON_SIZES,imageLoadedSuccessfully:null,formattedInitials:"",initializing:!1,hasSlotContent:l.hasSlotContent}},computed:{hasOverlayIcon(){return l.hasSlotContent(this.$slots.overlayIcon)},iconDataQa(){return"dt-avatar-icon"},avatarClasses(){return["d-avatar",this.$attrs.class,s.AVATAR_SIZE_MODIFIERS[this.validatedSize],this.avatarClass,{"d-avatar--group":this.showGroup,"d-avatar--group-digits-2":this.showGroup&&this.group>9&&this.group<100,"d-avatar--group-digits-3":this.showGroup&&this.group>99,[`d-avatar--color-${this.getColor()}`]:!this.isIconType(),"d-avatar--clickable":this.clickable,"d-avatar--presence":this.presence&&!this.showGroup}]},overlayClasses(){return["d-avatar__overlay",this.overlayClass,{"d-avatar__overlay-icon":this.hasOverlayIcon}]},showGroup(){return s.AVATAR_GROUP_VALIDATOR(this.group)},formattedGroup(){return this.group>99?"99+":this.group},validatedSize(){return this.group?"xs":this.size},showImage(){return this.imageLoadedSuccessfully!==!1&&this.imageSrc}},watch:{fullName:{immediate:!0,handler(){this.formatInitials()}},size:{immediate:!0,handler(){this.formatInitials()}},group:{immediate:!0,handler(){this.formatInitials()}},imageSrc(t){this.imageLoadedSuccessfully=null,t&&(this.validateProps(),this.setImageListeners())}},mounted(){this.validateProps(),this.setImageListeners()},methods:{isIconType(){return l.hasSlotContent(this.$slots.icon)},async setImageListeners(){await this.$nextTick();const t=this.$refs.avatarImage;t&&(t.addEventListener("load",()=>this._loadedImageEventHandler(t),{once:!0}),t.addEventListener("error",()=>this._erroredImageEventHandler(t),{once:!0}))},formatInitials(){const t=c.extractInitialsFromName(this.fullName);this.validatedSize==="xs"?this.formattedInitials="":this.validatedSize==="sm"?this.formattedInitials=t[0]:this.formattedInitials=t},getColor(){return this.color??l.getRandomElement(s.AVATAR_RANDOM_COLORS,this.seed)},_loadedImageEventHandler(t){this.imageLoadedSuccessfully=!0,t.classList.remove("d-d-none")},_erroredImageEventHandler(t){this.imageLoadedSuccessfully=!1,t.classList.add("d-d-none")},validateProps(){this.imageSrc&&this.imageAlt===void 0&&console.error('image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby')},handleClick(t){this.clickable&&this.$emit("click",t)}}},_=["src","alt"],h=["aria-label","data-qa","role"],S={key:1,class:"d-avatar__overlay-text"},v={key:1,class:"d-avatar__count","data-qa":"dt-avatar-count"};function g(t,I,a,y,i,r){const n=e.resolveComponent("dt-presence");return e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.clickable?"button":"div"),{id:a.id,class:e.normalizeClass(r.avatarClasses),style:e.normalizeStyle(t.$attrs.style),"data-qa":"dt-avatar",onClick:r.handleClick},{default:e.withCtx(()=>[e.createElementVNode("div",{ref:"canvas",class:e.normalizeClass([a.canvasClass,"d-avatar__canvas",{"d-avatar--image-loaded":i.imageLoadedSuccessfully}])},[r.showImage?(e.openBlock(),e.createElementBlock("img",{key:0,ref:"avatarImage",class:"d-avatar__image","data-qa":"dt-avatar-image",src:a.imageSrc,alt:a.imageAlt},null,8,_)):r.isIconType()?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([a.iconClass,i.AVATAR_KIND_MODIFIERS.icon]),"aria-label":a.clickable?a.iconAriaLabel:"","data-qa":r.iconDataQa,role:a.clickable?"button":""},[e.renderSlot(t.$slots,"icon",{iconSize:a.iconSize||i.AVATAR_ICON_SIZES[a.size]})],10,h)):(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass([i.AVATAR_KIND_MODIFIERS.initials])},e.toDisplayString(i.formattedInitials),3))],2),r.hasOverlayIcon||a.overlayText?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(r.overlayClasses)},[r.hasOverlayIcon?e.renderSlot(t.$slots,"overlayIcon",{key:0}):a.overlayText?(e.openBlock(),e.createElementBlock("p",S,e.toDisplayString(a.overlayText),1)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),r.showGroup?(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(r.formattedGroup),1)):e.createCommentVNode("",!0),a.presence&&!r.showGroup?(e.openBlock(),e.createBlock(n,e.mergeProps({key:2,presence:a.presence,class:["d-avatar__presence",i.AVATAR_PRESENCE_SIZE_MODIFIERS[a.size]]},a.presenceProps,{"data-qa":"dt-presence"}),null,16,["presence","class"])):e.createCommentVNode("",!0)]),_:3},8,["id","class","style","onClick"])}const A=d._(m,[["render",g]]);exports.default=A;
 //# sourceMappingURL=avatar.cjs.map

package/dist/vue3/lib/avatar/avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <div\n        v-else-if=\"isIconType()\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        :aria-label=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","e","_hoisted_1","_hoisted_2","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_normalizeStyle","_ctx","_withCtx","_createElementVNode","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_createCommentVNode","_hoisted_4","_openBlock","_component_dt_presence","_mergeProps"],"mappings":"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"}
+{"version":3,"file":"avatar.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <div\n        v-else-if=\"isIconType()\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        :aria-label=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && this.group > 9 && this.group < 100,\n          'd-avatar--group-digits-3': this.showGroup && this.group > 99,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n          'd-avatar--presence': this.presence && !this.showGroup,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","e","_hoisted_1","_hoisted_2","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_normalizeStyle","_ctx","_withCtx","_createElementVNode","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_createCommentVNode","_hoisted_4","_openBlock","_component_dt_presence","_mergeProps"],"mappings":"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"}

package/dist/vue3/lib/avatar/avatar.js

@@ -1,8 +1,8 @@
-import { getRandomElement as y, hasSlotContent as d, getUniqueString as g } from "../../common/utils/index.js";
-import { AVATAR_GROUP_VALIDATOR as u, AVATAR_PRESENCE_STATES as m, AVATAR_SIZE_MODIFIERS as o, AVATAR_ICON_SIZES as _, AVATAR_PRESENCE_SIZE_MODIFIERS as S, AVATAR_KIND_MODIFIERS as I, AVATAR_RANDOM_COLORS as A } from "./avatar-constants.js";
-import { ICON_SIZE_MODIFIERS as E } from "../icon/icon-constants.js";
-import { extractInitialsFromName as C } from "./utils.js";
-import { resolveComponent as p, createBlock as f, openBlock as r, resolveDynamicComponent as O, normalizeStyle as k, normalizeClass as l, withCtx as R, createElementVNode as b, createElementBlock as s, createCommentVNode as n, renderSlot as v, toDisplayString as c, mergeProps as T } from "vue";
+import { getRandomElement as g, hasSlotContent as o, getUniqueString as y } from "../../common/utils/index.js";
+import { AVATAR_GROUP_VALIDATOR as u, AVATAR_PRESENCE_STATES as m, AVATAR_SIZE_MODIFIERS as d, AVATAR_ICON_SIZES as _, AVATAR_PRESENCE_SIZE_MODIFIERS as S, AVATAR_KIND_MODIFIERS as I, AVATAR_RANDOM_COLORS as A } from "./avatar-constants.js";
+import { ICON_SIZE_MODIFIERS as p } from "../icon/icon-constants.js";
+import { extractInitialsFromName as E } from "./utils.js";
+import { resolveComponent as C, createBlock as h, openBlock as r, resolveDynamicComponent as O, normalizeStyle as k, normalizeClass as l, withCtx as R, createElementVNode as b, createElementBlock as s, createCommentVNode as n, renderSlot as f, toDisplayString as c, mergeProps as T } from "vue";
 import { _ as D } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import N from "../presence/presence.js";
 const L = {
@@ -17,7 +17,7 @@ const L = {
     id: {
       type: String,
       default() {
-        return g();
+        return y();
       }
     },
     /**
@@ -43,7 +43,7 @@ const L = {
     size: {
       type: String,
       default: "md",
-      validator: (e) => Object.keys(o).includes(e)
+      validator: (e) => Object.keys(d).includes(e)
     },
     /**
      * Used to customize the avatar container
@@ -131,7 +131,7 @@ const L = {
     iconSize: {
       type: String,
       default: "",
-      validator: (e) => !e || Object.keys(E).includes(e)
+      validator: (e) => !e || Object.keys(p).includes(e)
     },
     /**
      * Full name used to extract initials.
@@ -168,19 +168,19 @@ const L = {
   ],
   data() {
     return {
-      AVATAR_SIZE_MODIFIERS: o,
+      AVATAR_SIZE_MODIFIERS: d,
       AVATAR_KIND_MODIFIERS: I,
       AVATAR_PRESENCE_SIZE_MODIFIERS: S,
       AVATAR_ICON_SIZES: _,
       imageLoadedSuccessfully: null,
       formattedInitials: "",
       initializing: !1,
-      hasSlotContent: d
+      hasSlotContent: o
     };
   },
   computed: {
     hasOverlayIcon() {
-      return d(this.$slots.overlayIcon);
+      return o(this.$slots.overlayIcon);
     },
     iconDataQa() {
       return "dt-avatar-icon";
@@ -189,12 +189,15 @@ const L = {
       return [
         "d-avatar",
         this.$attrs.class,
-        o[this.validatedSize],
+        d[this.validatedSize],
         this.avatarClass,
         {
           "d-avatar--group": this.showGroup,
+          "d-avatar--group-digits-2": this.showGroup && this.group > 9 && this.group < 100,
+          "d-avatar--group-digits-3": this.showGroup && this.group > 99,
           [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),
-          "d-avatar--clickable": this.clickable
+          "d-avatar--clickable": this.clickable,
+          "d-avatar--presence": this.presence && !this.showGroup
         }
       ];
     },
@@ -246,7 +249,7 @@ const L = {
   },
   methods: {
     isIconType() {
-      return d(this.$slots.icon);
+      return o(this.$slots.icon);
     },
     async setImageListeners() {
       await this.$nextTick();
@@ -254,11 +257,11 @@ const L = {
       e && (e.addEventListener("load", () => this._loadedImageEventHandler(e), { once: !0 }), e.addEventListener("error", () => this._erroredImageEventHandler(e), { once: !0 }));
     },
     formatInitials() {
-      const e = C(this.fullName);
+      const e = E(this.fullName);
       this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = e[0] : this.formattedInitials = e;
     },
     getColor() {
-      return this.color ?? y(A, this.seed);
+      return this.color ?? g(A, this.seed);
     },
     _loadedImageEventHandler(e) {
       this.imageLoadedSuccessfully = !0, e.classList.remove("d-d-none");
@@ -273,17 +276,17 @@ const L = {
       this.clickable && this.$emit("click", e);
     }
   }
-}, z = ["src", "alt"], V = ["aria-label", "data-qa", "role"], x = {
+}, z = ["src", "alt"], V = ["aria-label", "data-qa", "role"], w = {
   key: 1,
   class: "d-avatar__overlay-text"
-}, P = {
+}, x = {
   key: 1,
   class: "d-avatar__count",
   "data-qa": "dt-avatar-count"
 };
-function w(e, M, a, j, i, t) {
-  const h = p("dt-presence");
-  return r(), f(O(a.clickable ? "button" : "div"), {
+function P(e, G, a, M, i, t) {
+  const v = C("dt-presence");
+  return r(), h(O(a.clickable ? "button" : "div"), {
     id: a.id,
     class: l(t.avatarClasses),
     style: k(e.$attrs.style),
@@ -313,7 +316,7 @@ function w(e, M, a, j, i, t) {
           "data-qa": t.iconDataQa,
           role: a.clickable ? "button" : ""
         }, [
-          v(e.$slots, "icon", {
+          f(e.$slots, "icon", {
             iconSize: a.iconSize || i.AVATAR_ICON_SIZES[a.size]
           })
         ], 10, V)) : (r(), s("span", {
@@ -325,10 +328,10 @@ function w(e, M, a, j, i, t) {
         key: 0,
         class: l(t.overlayClasses)
       }, [
-        t.hasOverlayIcon ? v(e.$slots, "overlayIcon", { key: 0 }) : a.overlayText ? (r(), s("p", x, c(a.overlayText), 1)) : n("", !0)
+        t.hasOverlayIcon ? f(e.$slots, "overlayIcon", { key: 0 }) : a.overlayText ? (r(), s("p", w, c(a.overlayText), 1)) : n("", !0)
       ], 2)) : n("", !0),
-      t.showGroup ? (r(), s("span", P, c(t.formattedGroup), 1)) : n("", !0),
-      a.presence && !t.showGroup ? (r(), f(h, T({
+      t.showGroup ? (r(), s("span", x, c(t.formattedGroup), 1)) : n("", !0),
+      a.presence && !t.showGroup ? (r(), h(v, T({
         key: 2,
         presence: a.presence,
         class: [
@@ -340,7 +343,7 @@ function w(e, M, a, j, i, t) {
     _: 3
   }, 8, ["id", "class", "style", "onClick"]);
 }
-const Q = /* @__PURE__ */ D(L, [["render", w]]);
+const Q = /* @__PURE__ */ D(L, [["render", P]]);
 export {
   Q as default
 };

package/dist/vue3/lib/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <div\n        v-else-if=\"isIconType()\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        :aria-label=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","_hoisted_1","_hoisted_2","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_normalizeStyle","_ctx","_withCtx","_createElementVNode","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_createCommentVNode","_hoisted_4","_openBlock","_component_dt_presence","_mergeProps"],"mappings":"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"}
+{"version":3,"file":"avatar.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <div\n        v-else-if=\"isIconType()\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        :aria-label=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && this.group > 9 && this.group < 100,\n          'd-avatar--group-digits-3': this.showGroup && this.group > 99,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n          'd-avatar--presence': this.presence && !this.showGroup,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","_hoisted_1","_hoisted_2","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_normalizeStyle","_ctx","_withCtx","_createElementVNode","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_createCommentVNode","_hoisted_4","_openBlock","_component_dt_presence","_mergeProps"],"mappings":"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"}

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("../../shared/sr_only_close_button.cjs"),n=require("vue"),y=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),E=require("../lazy-show/lazy-show.cjs"),g={compatConfig:{MODE:3},name:"DtPopover",components:{SrOnlyCloseButton:v.default,DtLazyShow:E.default,PopoverHeaderFooter:m.default},mixins:[f.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},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":()=>{this.onLeaveTransitionComplete()},"after-enter":()=>{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")}}},C=["id","data-qa","tabindex"],O=["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","aria-hidden":"false",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,C),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,onClose:s.closePopover},{content:n.withCtx(()=>[n.renderSlot(e.$slots,"headerContent",{close:s.closePopover})]),_:3},8,["class","content-class","show-close-button","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,O),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),o.showCloseButton?n.createCommentVNode("",!0):(n.openBlock(),n.createBlock(h,{key:2,onClose:s.closePopover},null,8,["onClose"]))]),_: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 b=y._(g,[["render",w]]);exports.default=b;
+"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("../../shared/sr_only_close_button.cjs"),n=require("vue"),y=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),E=require("../lazy-show/lazy-show.cjs"),g={compatConfig:{MODE:3},name:"DtPopover",components:{SrOnlyCloseButton:v.default,DtLazyShow:E.default,PopoverHeaderFooter:m.default},mixins:[f.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},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":()=>{this.onLeaveTransitionComplete()},"after-enter":()=>{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){var o,i;e?(this.initTippyInstance(),(o=this.tip)==null||o.show()):!e&&t!==e&&(this.removeEventListeners(),(i=this.tip)==null||i.hide())}},mounted(){var t,o;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(),(o=this.tip)==null||o.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){var t;this.openOnContext&&(e.preventDefault(),this.isOpen=!0,await this.$nextTick(),(t=this.tip)==null||t.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,o;if(this.modal){const i=(e=this.anchorEl)==null?void 0:e.closest("body, .tippy-box");if(!i)return;((t=i.tagName)==null?void 0:t.toLowerCase())==="body"?(a.disableRootScrolling(this.anchorEl.getRootNode().host),(o=this.tip)==null||o.setProps({offset:this.offset})):i.classList.add("d-zi-popover")}},enableScrolling(){var t,o,i;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),(i=this.tip)==null||i.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")}}},C=["id","data-qa","tabindex"],O=["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","aria-hidden":"false",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,C),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,onClose:s.closePopover},{content:n.withCtx(()=>[n.renderSlot(e.$slots,"headerContent",{close:s.closePopover})]),_:3},8,["class","content-class","show-close-button","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,O),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),o.showCloseButton?n.createCommentVNode("",!0):(n.openBlock(),n.createBlock(h,{key:2,onClose:s.closePopover},null,8,["onClose"]))]),_: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 b=y._(g,[["render",w]]);exports.default=b;
 //# sourceMappingURL=popover.cjs.map