@dialpad/dialtone 9.66.0 → 9.67.0

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n  <div data-qa=\"dt-tooltip-container\">\n    <!-- disabling as the below events are for capturing events from interactive\n         elements within the span rather than on the span itself -->\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <span\n      v-if=\"!externalAnchor\"\n      ref=\"anchor\"\n      data-qa=\"dt-tooltip-anchor\"\n      @focusin=\"onEnterAnchor\"\n      @focusout=\"onLeaveAnchor\"\n      @mouseenter=\"onEnterAnchor\"\n      @mouseleave=\"onLeaveAnchor\"\n      @keydown.esc=\"onLeaveAnchor\"\n    >\n      <!-- @slot Slot for the anchor element -->\n      <slot\n        name=\"anchor\"\n      />\n    </span>\n    <div\n      :id=\"id\"\n      ref=\"content\"\n      data-qa=\"dt-tooltip\"\n      :class=\"[\n        'd-tooltip',\n        {\n          [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n        },\n        contentClass,\n      ]\"\n    >\n      <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n      <!-- after-leave event can be used instead of transitionend -->\n      <!-- @slot Slot for the content, defaults to message prop -->\n      <slot>\n        {{ message }}\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  TOOLTIP_KIND_MODIFIERS,\n  TOOLTIP_DIRECTIONS,\n  TOOLTIP_STICKY_VALUES,\n  TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport {\n  createTippy,\n  getAnchor,\n  getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/**\n * A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n */\nexport default {\n  name: 'DtTooltip',\n\n  props: {\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\"\n     * if defined, otherwise it will automatically position to a new location\n     * as it sees best fit. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => ['auto'],\n    },\n\n    /**\n     * If true, applies inverted styles to the tooltip\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the tooltip from its reference element\n     *  by the specified number of pixels. See\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 12],\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'top',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\n    },\n\n    /**\n     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: 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      hasSlotContent,\n      tip: null,\n\n      inTimer: null,\n\n      // Internal state for whether the tooltip is shown. Changing the prop\n      // will update this.\n      internalShow: false,\n\n      // this is where the placement currently is, this can be different than\n      // the placement prop when there is not enough available room for the tip\n      // to display and it uses a fallback placement.\n      currentPlacement: this.placement,\n    };\n  },\n\n  computed: {\n    // eslint-disable-next-line complexity\n    tippyProps () {\n      return {\n        offset: this.offset,\n        delay: this.delay ? TOOLTIP_DELAY_MS : false,\n        placement: this.placement,\n        sticky: this.sticky,\n        theme: this.inverted ? 'inverted' : this.theme,\n        animation: this.transition ? 'fade' : false,\n        // onShown only triggers when transition is truthy\n        onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n        // onShown will always be called, but it will be called before the animation is complete\n        onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n        onHidden: this.onHide,\n\n        popperOptions: getPopperOptions({\n          fallbackPlacements: this.fallbackPlacements,\n          hasHideModifierEnabled: true,\n          onChangePlacement: this.onChangePlacement,\n        }),\n      };\n    },\n\n    anchor () {\n      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n    },\n  },\n\n  watch: {\n\n    tippyProps: {\n      handler: 'setProps',\n      deep: true,\n    },\n\n    show: {\n      handler: function (show) {\n        if (show !== null && this.enabled) {\n          this.internalShow = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    internalShow (value) {\n      if (value) {\n        this.setProps();\n        this.tip.show();\n      } else {\n        this.tip.hide();\n      }\n    },\n\n    sticky (sticky) {\n      this.tip.setProps({\n        sticky,\n      });\n    },\n  },\n\n  mounted () {\n    if (!this.enabled && this.show != null) {\n      console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n      console.warn('The show prop will be ignored.');\n    }\n\n    this.externalAnchor && this.addExternalAnchorEventListeners();\n    this.tip = createTippy(this.anchor, this.initOptions());\n  },\n\n  beforeUnmount () {\n    this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n    if (this.tip) {\n      this.tip?.destroy();\n    }\n  },\n\n  methods: {\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n        // anchor of popover is within a drawer.\n        this.$el.closest('.d-zi-drawer')) {\n        return 651;\n      } else {\n        return 400;\n      }\n    },\n\n    hasVisibleFocus () {\n      return this.anchor.matches(':focus-visible');\n    },\n\n    onEnterAnchor (e) {\n      if (!this.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\n<style lang=\"less\">\n@import 'tippy.js/dist/svg-arrow.css';\n\n.tippy-box[data-reference-hidden] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.tippy-box > .tippy-svg-arrow {\n  fill: var(--dt-color-surface-contrast);\n}\n\n.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {\n  fill: var(--dt-color-surface-moderate);\n}\n\n.tippy-box[data-animation='fade'][data-state='hidden'] {\n  opacity: 0;\n}\n</style>\n"],"names":["_sfc_main","name","props","id","type","String","default","getUniqueString","fallbackPlacements","Array","inverted","Boolean","offset","placement","validator","TOOLTIP_DIRECTIONS","includes","sticky","TOOLTIP_STICKY_VALUES","appendTo","HTMLElement","POPOVER_APPEND_TO_VALUES","contentClass","Object","message","enabled","show","transition","delay","theme","externalAnchor","emits","data","TOOLTIP_KIND_MODIFIERS","hasSlotContent","tip","inTimer","internalShow","currentPlacement","computed","tippyProps","TOOLTIP_DELAY_MS","animation","onShown","tooltipInstance","onShow","onHidden","onHide","popperOptions","getPopperOptions","hasHideModifierEnabled","onChangePlacement","anchor","document","body","querySelector","getAnchor","$refs","watch","handler","deep","immediate","value","setProps","hide","mounted","console","warn","addExternalAnchorEventListeners","createTippy","initOptions","beforeUnmount","removeExternalAnchorEventListeners","destroy","methods","calculateAnchorZindex","$el","getRootNode","closest","hasVisibleFocus","matches","onEnterAnchor","e","setTimeout","triggerShow","onLeaveAnchor","code","clearTimeout","triggerHide","unmount","$emit","callingMethod","tooltipHasContent","zIndex","onMount","content","textContent","trim","length","template","arrow","duration","interactive","trigger","hideOnClick","touch","showOnCreate","forEach","listener","addEventListener","event","removeEventListener","_hoisted_1","_openBlock","_createElementBlock","$props","ref","onFocusin","$options","args","onFocusout","onMouseenter","onMouseleave","onKeydown","_renderSlot","_ctx","$slots","_createElementVNode","class","_normalizeClass","$data"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n  <div data-qa=\"dt-tooltip-container\">\n    <!-- disabling as the below events are for capturing events from interactive\n         elements within the span rather than on the span itself -->\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <span\n      v-if=\"!externalAnchor\"\n      ref=\"anchor\"\n      data-qa=\"dt-tooltip-anchor\"\n      @focusin=\"onEnterAnchor\"\n      @focusout=\"onLeaveAnchor\"\n      @mouseenter=\"onEnterAnchor\"\n      @mouseleave=\"onLeaveAnchor\"\n      @keydown.esc=\"onLeaveAnchor\"\n    >\n      <!-- @slot Slot for the anchor element -->\n      <slot\n        name=\"anchor\"\n      />\n    </span>\n    <div\n      :id=\"id\"\n      ref=\"content\"\n      data-qa=\"dt-tooltip\"\n      :class=\"[\n        'd-tooltip',\n        {\n          [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n        },\n        contentClass,\n      ]\"\n    >\n      <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n      <!-- after-leave event can be used instead of transitionend -->\n      <!-- @slot Slot for the content, defaults to message prop -->\n      <slot>\n        {{ message }}\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  TOOLTIP_KIND_MODIFIERS,\n  TOOLTIP_DIRECTIONS,\n  TOOLTIP_STICKY_VALUES,\n  TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport {\n  createTippy,\n  getAnchor,\n  getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/**\n * A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n */\nexport default {\n  name: 'DtTooltip',\n\n  props: {\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\"\n     * if defined, otherwise it will automatically position to a new location\n     * as it sees best fit. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => ['auto'],\n    },\n\n    /**\n     * If true, applies inverted styles to the tooltip\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the tooltip from its reference element\n     *  by the specified number of pixels. See\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 12],\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'top',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\n    },\n\n    /**\n     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: 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      hasSlotContent,\n      tip: null,\n\n      inTimer: null,\n\n      // Internal state for whether the tooltip is shown. Changing the prop\n      // will update this.\n      internalShow: false,\n\n      // this is where the placement currently is, this can be different than\n      // the placement prop when there is not enough available room for the tip\n      // to display and it uses a fallback placement.\n      currentPlacement: this.placement,\n    };\n  },\n\n  computed: {\n    // eslint-disable-next-line complexity\n    tippyProps () {\n      return {\n        offset: this.offset,\n        delay: this.delay ? TOOLTIP_DELAY_MS : false,\n        placement: this.placement,\n        sticky: this.sticky,\n        theme: this.inverted ? 'inverted' : this.theme,\n        animation: this.transition ? 'fade' : false,\n        // onShown only triggers when transition is truthy\n        onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n        // onShown will always be called, but it will be called before the animation is complete\n        onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n        onHidden: this.onHide,\n\n        popperOptions: getPopperOptions({\n          fallbackPlacements: this.fallbackPlacements,\n          hasHideModifierEnabled: true,\n          onChangePlacement: this.onChangePlacement,\n        }),\n      };\n    },\n\n    anchor () {\n      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n    },\n  },\n\n  watch: {\n\n    tippyProps: {\n      handler: 'setProps',\n      deep: true,\n    },\n\n    show: {\n      handler: function (show) {\n        if (show !== null && this.enabled) {\n          this.internalShow = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    internalShow (value) {\n      if (value) {\n        this.setProps();\n        this.tip.show();\n      } else {\n        this.tip.hide();\n      }\n    },\n\n    sticky (sticky) {\n      this.tip.setProps({\n        sticky,\n      });\n    },\n  },\n\n  mounted () {\n    if (!this.enabled && this.show != null) {\n      console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n      console.warn('The show prop will be ignored.');\n    }\n\n    this.externalAnchor && this.addExternalAnchorEventListeners();\n    this.tip = createTippy(this.anchor, this.initOptions());\n  },\n\n  beforeUnmount () {\n    this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n    if (this.tip) {\n      this.tip?.destroy();\n    }\n  },\n\n  methods: {\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n        // anchor of popover is within a drawer.\n        this.$el.closest('.d-zi-drawer')) {\n        return 651;\n      } else {\n        return 400;\n      }\n    },\n\n    hasVisibleFocus () {\n      return this.anchor.matches(':focus-visible');\n    },\n\n    onEnterAnchor (e) {\n      if (!this.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\n<style lang=\"less\">\n@import 'tippy.js/dist/svg-arrow.css';\n\n.tippy-box[data-reference-hidden] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.tippy-box > .tippy-svg-arrow {\n  fill: var(--dt-color-surface-contrast);\n}\n\n.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {\n  fill: var(--dt-color-surface-moderate);\n}\n\n.tippy-box[data-animation='fade'][data-state='hidden'] {\n  opacity: 0;\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass"],"mappings":"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"}

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

@@ -2,7 +2,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
-const COLOR_CODES = ["green300", "green100", "red200", "red100", "gold100", "gold200", "black100", "white"];
+const COLOR_CODES = [
+  "green300",
+  "green100",
+  "red200",
+  "red100",
+  "gold100",
+  "gold200",
+  "black100",
+  "white"
+];
 const _sfc_main = {
   name: "DtRecipeTopBannerInfo",
   props: {
@@ -35,21 +44,27 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = {
-  class: "dt-top-banner-info__left"
-};
+const _hoisted_1 = { class: "dt-top-banner-info__left" };
 const _hoisted_2 = {
   class: "dt-top-banner-info__middle",
   "data-qa": "banner-info--middle"
 };
-const _hoisted_3 = {
-  class: "dt-top-banner-info__right"
-};
+const _hoisted_3 = { class: "dt-top-banner-info__right" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(["dt-top-banner-info", $options.bannerInfoClass]),
     "data-qa": "banner-info"
-  }, [vue.createElementVNode("div", _hoisted_1, [vue.renderSlot(_ctx.$slots, "left")]), vue.createElementVNode("div", _hoisted_2, [vue.renderSlot(_ctx.$slots, "default")]), vue.createElementVNode("div", _hoisted_3, [vue.renderSlot(_ctx.$slots, "right")])], 2);
+  }, [
+    vue.createElementVNode("div", _hoisted_1, [
+      vue.renderSlot(_ctx.$slots, "left")
+    ]),
+    vue.createElementVNode("div", _hoisted_2, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ]),
+    vue.createElementVNode("div", _hoisted_3, [
+      vue.renderSlot(_ctx.$slots, "right")
+    ])
+  ], 2);
 }
 const top_banner_info = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.COLOR_CODES = COLOR_CODES;

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

@@ -1 +1 @@
-{"version":3,"file":"top-banner-info.cjs","sources":["../../recipes/notices/top_banner_info/top_banner_info_constants.js","../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n","<template>\n  <div\n    class=\"dt-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"dt-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"dt-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"dt-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-top-banner-info {\n  font-size: var(--dt-font-size-100);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--dt-color-foreground-primary);\n\n   &__left {\n     margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);\n     min-width: 20%;\n  }\n  &__middle {\n     display: flex;\n     align-items: center;\n     gap: var(--dt-size-300);\n     margin-top: var(--dt-space-300);\n    margin-bottom: var(--dt-space-300);\n  }\n  &__right {\n     display: flex;\n     align-items: baseline;\n     justify-content: flex-end;\n     gap: var(--dt-size-300);\n     margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;\n     min-width: 20%;\n     text-align: right;\n  }\n}\n</style>\n"],"names":["COLOR_CODES","_sfc_main","name","props","colorCode","type","String","default","validator","kind","includes","computed","bannerInfoClass","bgColors","green300","green100","red200","red100","gold200","gold100","black100","white","_hoisted_1","class","_hoisted_3","_createElementBlock","_normalizeClass","$options","_createElementVNode","_renderSlot","_ctx","$slots","_hoisted_2"],"mappings":";;;;MAAaA,cAAc,CAAC,YAAY,YAAY,UAAU,UAAU,WACtE,WAAW,YAAY,OAAO;ACyBhC,MAAKC,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,WAAW;AAAA,MACTC,MAAMC;AAAAA,MACNC,SAAS;AAAA,MACTC,WAAW,SAAUC,MAAM;AACzB,eAAOT,YAAYU,SAASD,IAAI;AAAA,MAClC;AAAA,IACF;AAAA,EACD;AAAA,EAEDE,UAAU;AAAA,IACRC,kBAAmB;AACjB,YAAMC,WAAW;AAAA;AAAA;AAAA,QAGfC,UAAU;AAAA,QACVC,UAAU;AAAA,QACVC,QAAQ;AAAA,QACRC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,SAAS;AAAA,QACTC,UAAU;AAAA,QACVC,OAAO;AAAA;AAET,aAAO,CAACR,SAAS,KAAKT,SAAS,CAAC;AAAA,IAClC;AAAA,EACF;AACF;AArDS,MAAAkB,aAAA;AAAA,EAAAC,OAAM;AAA0B;;EAKnCA,OAAM;AAAA,EACN,WAAQ;;AAKL,MAAAC,aAAA;AAAA,EAAAD,OAAM;AAA2B;;0BAhBxCE,IAmBM,mBAAA,OAAA;AAAA,IAlBJF,OAAKG,IAAAA,eAAA,CAAC,sBACEC,SAAef,eAAA,CAAA;AAAA,IACvB,WAAQ;AAAA,MAERgB,IAAAA,mBAEM,OAFNN,YAEM,CADJO,IAAoB,WAAAC,KAAAC,QAAA,MAAA,CAAA,IAGtBH,IAAAA,mBAKM,OALNI,YAKM,CADJH,IAAQ,WAAAC,KAAAC,QAAA,SAAA,CAAA,IAGVH,IAAAA,mBAEM,OAFNJ,YAEM,CADJK,IAAqB,WAAAC,KAAAC,QAAA,OAAA,CAAA;;;;;"}
+{"version":3,"file":"top-banner-info.cjs","sources":["../../recipes/notices/top_banner_info/top_banner_info_constants.js","../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n","<template>\n  <div\n    class=\"dt-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"dt-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"dt-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"dt-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-top-banner-info {\n  font-size: var(--dt-font-size-100);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--dt-color-foreground-primary);\n\n   &__left {\n     margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);\n     min-width: 20%;\n  }\n  &__middle {\n     display: flex;\n     align-items: center;\n     gap: var(--dt-size-300);\n     margin-top: var(--dt-space-300);\n    margin-bottom: var(--dt-space-300);\n  }\n  &__right {\n     display: flex;\n     align-items: baseline;\n     justify-content: flex-end;\n     gap: var(--dt-size-300);\n     margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;\n     min-width: 20%;\n     text-align: right;\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot"],"mappings":";;;;AAAY,MAAC,cAAc;AAAA,EAAC;AAAA,EAAY;AAAA,EAAY;AAAA,EAAU;AAAA,EAAU;AAAA,EACtE;AAAA,EAAW;AAAA,EAAY;AAAO;ACyBhC,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,SAAU,MAAM;AACzB,eAAO,YAAY,SAAS,IAAI;AAAA,MACjC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,kBAAmB;AACjB,YAAM,WAAW;AAAA;AAAA;AAAA,QAGf,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA;AAET,aAAO,CAAC,SAAS,KAAK,SAAS,CAAC;AAAA,IACjC;AAAA,EACF;AACH;AArDS,MAAA,aAAA,EAAA,OAAM,2BAA0B;;EAKnC,OAAM;AAAA,EACN,WAAQ;;AAKL,MAAA,aAAA,EAAA,OAAM,4BAA2B;;0BAhBxCA,IAmBM,mBAAA,OAAA;AAAA,IAlBJ,OAAKC,IAAAA,eAAA,CAAC,sBACE,SAAe,eAAA,CAAA;AAAA,IACvB,WAAQ;AAAA;IAERC,IAAA,mBAEM,OAFN,YAEM;AAAA,MADJC,eAAoB,KAAA,QAAA,MAAA;AAAA;IAGtBD,IAAA,mBAKM,OALN,YAKM;AAAA,MADJC,eAAQ,KAAA,QAAA,SAAA;AAAA;IAGVD,IAAA,mBAEM,OAFN,YAEM;AAAA,MADJC,eAAqB,KAAA,QAAA,OAAA;AAAA;;;;;;"}

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

@@ -1,6 +1,15 @@
 import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
-const COLOR_CODES = ["green300", "green100", "red200", "red100", "gold100", "gold200", "black100", "white"];
+const COLOR_CODES = [
+  "green300",
+  "green100",
+  "red200",
+  "red100",
+  "gold100",
+  "gold200",
+  "black100",
+  "white"
+];
 const _sfc_main = {
   name: "DtRecipeTopBannerInfo",
   props: {
@@ -33,21 +42,27 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = {
-  class: "dt-top-banner-info__left"
-};
+const _hoisted_1 = { class: "dt-top-banner-info__left" };
 const _hoisted_2 = {
   class: "dt-top-banner-info__middle",
   "data-qa": "banner-info--middle"
 };
-const _hoisted_3 = {
-  class: "dt-top-banner-info__right"
-};
+const _hoisted_3 = { class: "dt-top-banner-info__right" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["dt-top-banner-info", $options.bannerInfoClass]),
     "data-qa": "banner-info"
-  }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "left")]), createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")]), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "right")])], 2);
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      renderSlot(_ctx.$slots, "left")
+    ]),
+    createElementVNode("div", _hoisted_2, [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    createElementVNode("div", _hoisted_3, [
+      renderSlot(_ctx.$slots, "right")
+    ])
+  ], 2);
 }
 const top_banner_info = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"top-banner-info.js","sources":["../../recipes/notices/top_banner_info/top_banner_info_constants.js","../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n","<template>\n  <div\n    class=\"dt-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"dt-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"dt-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"dt-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-top-banner-info {\n  font-size: var(--dt-font-size-100);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--dt-color-foreground-primary);\n\n   &__left {\n     margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);\n     min-width: 20%;\n  }\n  &__middle {\n     display: flex;\n     align-items: center;\n     gap: var(--dt-size-300);\n     margin-top: var(--dt-space-300);\n    margin-bottom: var(--dt-space-300);\n  }\n  &__right {\n     display: flex;\n     align-items: baseline;\n     justify-content: flex-end;\n     gap: var(--dt-size-300);\n     margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;\n     min-width: 20%;\n     text-align: right;\n  }\n}\n</style>\n"],"names":["COLOR_CODES","_sfc_main","name","props","colorCode","type","String","default","validator","kind","includes","computed","bannerInfoClass","bgColors","green300","green100","red200","red100","gold200","gold100","black100","white","_hoisted_1","class","_hoisted_3","_createElementBlock","_normalizeClass","$options","_createElementVNode","_renderSlot","_ctx","$slots","_hoisted_2"],"mappings":";;MAAaA,cAAc,CAAC,YAAY,YAAY,UAAU,UAAU,WACtE,WAAW,YAAY,OAAO;ACyBhC,MAAKC,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,WAAW;AAAA,MACTC,MAAMC;AAAAA,MACNC,SAAS;AAAA,MACTC,WAAW,SAAUC,MAAM;AACzB,eAAOT,YAAYU,SAASD,IAAI;AAAA,MAClC;AAAA,IACF;AAAA,EACD;AAAA,EAEDE,UAAU;AAAA,IACRC,kBAAmB;AACjB,YAAMC,WAAW;AAAA;AAAA;AAAA,QAGfC,UAAU;AAAA,QACVC,UAAU;AAAA,QACVC,QAAQ;AAAA,QACRC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,SAAS;AAAA,QACTC,UAAU;AAAA,QACVC,OAAO;AAAA;AAET,aAAO,CAACR,SAAS,KAAKT,SAAS,CAAC;AAAA,IAClC;AAAA,EACF;AACF;AArDS,MAAAkB,aAAA;AAAA,EAAAC,OAAM;AAA0B;;EAKnCA,OAAM;AAAA,EACN,WAAQ;;AAKL,MAAAC,aAAA;AAAA,EAAAD,OAAM;AAA2B;;sBAhBxCE,mBAmBM,OAAA;AAAA,IAlBJF,OAAKG,eAAA,CAAC,sBACEC,SAAef,eAAA,CAAA;AAAA,IACvB,WAAQ;AAAA,MAERgB,mBAEM,OAFNN,YAEM,CADJO,WAAoBC,KAAAC,QAAA,MAAA,CAAA,IAGtBH,mBAKM,OALNI,YAKM,CADJH,WAAQC,KAAAC,QAAA,SAAA,CAAA,IAGVH,mBAEM,OAFNJ,YAEM,CADJK,WAAqBC,KAAAC,QAAA,OAAA,CAAA;;;"}
+{"version":3,"file":"top-banner-info.js","sources":["../../recipes/notices/top_banner_info/top_banner_info_constants.js","../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n","<template>\n  <div\n    class=\"dt-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"dt-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"dt-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"dt-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-top-banner-info {\n  font-size: var(--dt-font-size-100);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--dt-color-foreground-primary);\n\n   &__left {\n     margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);\n     min-width: 20%;\n  }\n  &__middle {\n     display: flex;\n     align-items: center;\n     gap: var(--dt-size-300);\n     margin-top: var(--dt-space-300);\n    margin-bottom: var(--dt-space-300);\n  }\n  &__right {\n     display: flex;\n     align-items: baseline;\n     justify-content: flex-end;\n     gap: var(--dt-size-300);\n     margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;\n     min-width: 20%;\n     text-align: right;\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot"],"mappings":";;AAAY,MAAC,cAAc;AAAA,EAAC;AAAA,EAAY;AAAA,EAAY;AAAA,EAAU;AAAA,EAAU;AAAA,EACtE;AAAA,EAAW;AAAA,EAAY;AAAO;ACyBhC,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,SAAU,MAAM;AACzB,eAAO,YAAY,SAAS,IAAI;AAAA,MACjC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,kBAAmB;AACjB,YAAM,WAAW;AAAA;AAAA;AAAA,QAGf,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA;AAET,aAAO,CAAC,SAAS,KAAK,SAAS,CAAC;AAAA,IACjC;AAAA,EACF;AACH;AArDS,MAAA,aAAA,EAAA,OAAM,2BAA0B;;EAKnC,OAAM;AAAA,EACN,WAAQ;;AAKL,MAAA,aAAA,EAAA,OAAM,4BAA2B;;sBAhBxCA,mBAmBM,OAAA;AAAA,IAlBJ,OAAKC,eAAA,CAAC,sBACE,SAAe,eAAA,CAAA;AAAA,IACvB,WAAQ;AAAA;IAERC,mBAEM,OAFN,YAEM;AAAA,MADJC,WAAoB,KAAA,QAAA,MAAA;AAAA;IAGtBD,mBAKM,OALN,YAKM;AAAA,MADJC,WAAQ,KAAA,QAAA,SAAA;AAAA;IAGVD,mBAEM,OAFN,YAEM;AAAA,MADJC,WAAqB,KAAA,QAAA,OAAA;AAAA;;;;"}

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

@@ -4,7 +4,7 @@ const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 const lib_icon = require("./icon.cjs");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 const UNREAD_PILL_DIRECTIONS = ["up", "down"];
 const UNREAD_PILL_KINDS = ["mentions", "messages"];
@@ -50,19 +50,22 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = {
-  "data-qa": "dt-leftbar-unread-pill__label"
-};
+const _hoisted_1 = { "data-qa": "dt-leftbar-unread-pill__label" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = vue.resolveComponent("dt-icon");
   return vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
     class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${$props.kind}`],
     type: "button",
     "data-qa": "dt-leftbar-unread-pill"
-  }, vue.toHandlers($options.unreadChipListeners, true)), [vue.createVNode(_component_dt_icon, {
-    name: `arrow-${$props.direction}`,
-    size: "300"
-  }, null, 8, ["name"]), vue.createElementVNode("span", _hoisted_1, [vue.renderSlot(_ctx.$slots, "default")])], 16);
+  }, vue.toHandlers($options.unreadChipListeners, true)), [
+    vue.createVNode(_component_dt_icon, {
+      name: `arrow-${$props.direction}`,
+      size: "300"
+    }, null, 8, ["name"]),
+    vue.createElementVNode("span", _hoisted_1, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ])
+  ], 16);
 }
 const unread_pill = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtRecipeUnreadPill = unread_pill;

package/dist/vue3/lib/unread-pill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"unread-pill.cjs","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"unreadChipListeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["UNREAD_PILL_DIRECTIONS","UNREAD_PILL_KINDS","_sfc_main","name","components","DtIcon","props","kind","type","String","required","validator","includes","direction","dir","emits","computed","unreadChipListeners","click","event","$emit","_hoisted_1","_openBlock","_createElementBlock","_mergeProps","class","$props","_toHandlers","$options","_createVNode","_component_dt_icon","size","_createElementVNode","_renderSlot","_ctx","$slots"],"mappings":";;;;;;;;MAAaA,yBAAyB,CAAC,MAAM,MAAM;MACtCC,oBAAoB,CAAC,YAAY,UAAU;ACmBxD,MAAKC,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,YAAY;AAAA,IACVC,QAAAA,SAAAA;AAAAA,EACD;AAAA,EAEDC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKLC,MAAM;AAAA,MACJC,MAAMC;AAAAA,MACNC,UAAU;AAAA,MACVC,WAAYJ,UAASN,kBAAkBW,SAASL,IAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDM,WAAW;AAAA,MACTL,MAAMC;AAAAA,MACNC,UAAU;AAAA,MACVC,WAAYG,SAAQd,uBAAuBY,SAASE,GAAG;AAAA,IACzD;AAAA,EACD;AAAA,EAEDC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EAAO;AAAA,EAGTC,UAAU;AAAA,IACRC,sBAAuB;AACrB,aAAO;AAAA,QACLC,OAAOC,WAAS,KAAKC,MAAM,SAASD,KAAK;AAAA;IAE7C;AAAA,EACF;AACF;AAvDU,MAAAE,aAAA;AAAA,EAAA,WAAQ;AAA+B;;;AAV/C,SAAAC,cAAA,GAAAC,uBAaS,UAbTC,IAAAA,WAaS;AAAA,IAZNC,6DAA6DC,OAAInB,IAAA,EAAA;AAAA,IAClEC,MAAK;AAAA,IACL,WAAQ;AAAA,EACR,GAAAmB,IAAAA,WAAMC,SAAmBX,qBAAA,IAAA,CAAA,GAAA,CAEzBY,IAGE,YAAAC,oBAAA;AAAA,IAFC3B,eAAeuB,OAASb,SAAA;AAAA,IACzBkB,MAAK;AAAA,yBAEPC,IAAA,mBAEO,QAFPX,YAEO,CADLY,IAAQ,WAAAC,KAAAC,QAAA,SAAA,CAAA;;;;;;"}
+{"version":3,"file":"unread-pill.cjs","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"unreadChipListeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["DtIcon","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_createVNode","_createElementVNode","_renderSlot"],"mappings":";;;;;;;;AAAY,MAAC,yBAAyB,CAAC,MAAM,MAAM;AACvC,MAAC,oBAAoB,CAAC,YAAY,UAAU;ACmBxD,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAA,SAAM;AAAA,EACP;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,SAAS,kBAAkB,SAAS,IAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,QAAQ,uBAAuB,SAAS,GAAG;AAAA,IACxD;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,sBAAuB;AACrB,aAAO;AAAA,QACL,OAAO,WAAS,KAAK,MAAM,SAAS,KAAK;AAAA;IAE5C;AAAA,EACF;AACH;AAvDU,MAAA,aAAA,EAAA,WAAQ,gCAA+B;;;AAV/C,SAAAC,cAAA,GAAAC,uBAaS,UAbTC,IAAAA,WAaS;AAAA,IAZN,6DAA6D,OAAI,IAAA,EAAA;AAAA,IAClE,MAAK;AAAA,IACL,WAAQ;AAAA,EACR,GAAAC,IAAA,WAAM,SAAmB,qBAAA,IAAA,CAAA,GAAA;AAAA,IAEzBC,IAAAA,YAGE,oBAAA;AAAA,MAFC,eAAe,OAAS,SAAA;AAAA,MACzB,MAAK;AAAA;IAEPC,IAAA,mBAEO,QAFP,YAEO;AAAA,MADLC,eAAQ,KAAA,QAAA,SAAA;AAAA;;;;;;;"}

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

@@ -2,7 +2,7 @@ import { resolveComponent, openBlock, createElementBlock, mergeProps, toHandlers
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtIcon } from "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-gIQj4mf7.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 const UNREAD_PILL_DIRECTIONS = ["up", "down"];
 const UNREAD_PILL_KINDS = ["mentions", "messages"];
@@ -48,19 +48,22 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = {
-  "data-qa": "dt-leftbar-unread-pill__label"
-};
+const _hoisted_1 = { "data-qa": "dt-leftbar-unread-pill__label" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = resolveComponent("dt-icon");
   return openBlock(), createElementBlock("button", mergeProps({
     class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${$props.kind}`],
     type: "button",
     "data-qa": "dt-leftbar-unread-pill"
-  }, toHandlers($options.unreadChipListeners, true)), [createVNode(_component_dt_icon, {
-    name: `arrow-${$props.direction}`,
-    size: "300"
-  }, null, 8, ["name"]), createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default")])], 16);
+  }, toHandlers($options.unreadChipListeners, true)), [
+    createVNode(_component_dt_icon, {
+      name: `arrow-${$props.direction}`,
+      size: "300"
+    }, null, 8, ["name"]),
+    createElementVNode("span", _hoisted_1, [
+      renderSlot(_ctx.$slots, "default")
+    ])
+  ], 16);
 }
 const unread_pill = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"unread-pill.js","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"unreadChipListeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["UNREAD_PILL_DIRECTIONS","UNREAD_PILL_KINDS","_sfc_main","name","components","DtIcon","props","kind","type","String","required","validator","includes","direction","dir","emits","computed","unreadChipListeners","click","event","$emit","_hoisted_1","_openBlock","_createElementBlock","_mergeProps","class","$props","_toHandlers","$options","_createVNode","_component_dt_icon","size","_createElementVNode","_renderSlot","_ctx","$slots"],"mappings":";;;;;;MAAaA,yBAAyB,CAAC,MAAM,MAAM;MACtCC,oBAAoB,CAAC,YAAY,UAAU;ACmBxD,MAAKC,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,YAAY;AAAA,IACVC;AAAAA,EACD;AAAA,EAEDC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKLC,MAAM;AAAA,MACJC,MAAMC;AAAAA,MACNC,UAAU;AAAA,MACVC,WAAYJ,UAASN,kBAAkBW,SAASL,IAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDM,WAAW;AAAA,MACTL,MAAMC;AAAAA,MACNC,UAAU;AAAA,MACVC,WAAYG,SAAQd,uBAAuBY,SAASE,GAAG;AAAA,IACzD;AAAA,EACD;AAAA,EAEDC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EAAO;AAAA,EAGTC,UAAU;AAAA,IACRC,sBAAuB;AACrB,aAAO;AAAA,QACLC,OAAOC,WAAS,KAAKC,MAAM,SAASD,KAAK;AAAA;IAE7C;AAAA,EACF;AACF;AAvDU,MAAAE,aAAA;AAAA,EAAA,WAAQ;AAA+B;;;AAV/C,SAAAC,UAAA,GAAAC,mBAaS,UAbTC,WAaS;AAAA,IAZNC,6DAA6DC,OAAInB,IAAA,EAAA;AAAA,IAClEC,MAAK;AAAA,IACL,WAAQ;AAAA,EACR,GAAAmB,WAAMC,SAAmBX,qBAAA,IAAA,CAAA,GAAA,CAEzBY,YAGEC,oBAAA;AAAA,IAFC3B,eAAeuB,OAASb,SAAA;AAAA,IACzBkB,MAAK;AAAA,yBAEPC,mBAEO,QAFPX,YAEO,CADLY,WAAQC,KAAAC,QAAA,SAAA,CAAA;;;"}
+{"version":3,"file":"unread-pill.js","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"unreadChipListeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_createVNode","_createElementVNode","_renderSlot"],"mappings":";;;;;;AAAY,MAAC,yBAAyB,CAAC,MAAM,MAAM;AACvC,MAAC,oBAAoB,CAAC,YAAY,UAAU;ACmBxD,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,SAAS,kBAAkB,SAAS,IAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,QAAQ,uBAAuB,SAAS,GAAG;AAAA,IACxD;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,sBAAuB;AACrB,aAAO;AAAA,QACL,OAAO,WAAS,KAAK,MAAM,SAAS,KAAK;AAAA;IAE5C;AAAA,EACF;AACH;AAvDU,MAAA,aAAA,EAAA,WAAQ,gCAA+B;;;AAV/C,SAAAA,UAAA,GAAAC,mBAaS,UAbTC,WAaS;AAAA,IAZN,6DAA6D,OAAI,IAAA,EAAA;AAAA,IAClE,MAAK;AAAA,IACL,WAAQ;AAAA,EACR,GAAAC,WAAM,SAAmB,qBAAA,IAAA,CAAA,GAAA;AAAA,IAEzBC,YAGE,oBAAA;AAAA,MAFC,eAAe,OAAS,SAAA;AAAA,MACzB,MAAK;AAAA;IAEPC,mBAEO,QAFP,YAEO;AAAA,MADLC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;;"}

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

@@ -67,20 +67,23 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = ["innerHTML"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return $props.showMessages && !$options.isFilteredValidationMessagesEmpty ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.filteredValidationMessages, ({
-    message,
-    type
-  }, index) => {
-    return vue.openBlock(), vue.createElementBlock("div", {
-      key: $options.getMessageKey(type, index),
-      role: "status",
-      "aria-live": "polite",
-      "data-qa": "validation-message",
-      class: vue.normalizeClass(["base-input__message", "d-validation-message", $options.messageTypeClass(type)])
-    }, [vue.createElementVNode("p", {
-      innerHTML: message
-    }, null, 8, _hoisted_2)], 2);
-  }), 128))])) : vue.createCommentVNode("", true);
+  return $props.showMessages && !$options.isFilteredValidationMessagesEmpty ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.filteredValidationMessages, ({ message, type }, index) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        key: $options.getMessageKey(type, index),
+        role: "status",
+        "aria-live": "polite",
+        "data-qa": "validation-message",
+        class: vue.normalizeClass([
+          "base-input__message",
+          "d-validation-message",
+          $options.messageTypeClass(type)
+        ])
+      }, [
+        vue.createElementVNode("p", { innerHTML: message }, null, 8, _hoisted_2)
+      ], 2);
+    }), 128))
+  ])) : vue.createCommentVNode("", true);
 }
 const DtValidationMessages = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtValidationMessages = DtValidationMessages;

package/dist/vue3/lib/validation-messages.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"validation-messages.cjs","sources":["../../components/validation_messages/validation_messages.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"showMessages && !isFilteredValidationMessagesEmpty\"\n    class=\"base-input__messages d-validation-message__container\"\n    data-qa=\"validation-messages-container\"\n  >\n    <div\n      v-for=\"({ message, type }, index) in filteredValidationMessages\"\n      :key=\"getMessageKey(type, index)\"\n      role=\"status\"\n      aria-live=\"polite\"\n      data-qa=\"validation-message\"\n      :class=\"[\n        'base-input__message',\n        'd-validation-message',\n        messageTypeClass(type),\n      ]\"\n    >\n      <p v-html=\"message\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  filterFormattedMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * Validation messages are used to convey information to the user about the current state of the input element.\n * These messages can have an error, warning or success type.\n * @see https://dialtone.dialpad.com/components/validation_messages.html\n */\nexport default {\n  name: 'DtValidationMessages',\n\n  props: {\n    /**\n     * The id of the validation message\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * Array of validation messages. Each message has the following structure:\n     * `{ message: \"Some informative message\", type: \"error|warning|success\"}`\n     */\n    validationMessages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show Validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  computed: {\n    isFilteredValidationMessagesEmpty () {\n      return this.filteredValidationMessages.length === 0;\n    },\n\n    filteredValidationMessages () {\n      return filterFormattedMessages(this.validationMessages);\n    },\n\n    validationState () {\n      return getValidationState(this.validationMessages);\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `validation-message-${type}-${index}-${this.id}`;\n    },\n\n    messageTypeClass (type) {\n      const messageTypesClasses = {\n        error: 'base-input__message--error d-validation-message--error',\n        warning: 'base-input__message--warning d-validation-message--warning',\n        success: 'base-input__message--success d-validation-message--success',\n      };\n\n      return messageTypesClasses[type];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","props","id","type","String","default","getUniqueString","validationMessages","Array","validator","messages","validationMessageValidator","showMessages","Boolean","computed","isFilteredValidationMessagesEmpty","filteredValidationMessages","length","filterFormattedMessages","validationState","getValidationState","methods","getMessageKey","index","messageTypeClass","messageTypesClasses","error","warning","success","class","$props","$options","_openBlock","_createElementBlock","_hoisted_1","_Fragment","message","key","role","_normalizeClass","_createElementVNode","innerHTML","_hoisted_2"],"mappings":";;;;;;;AAoCA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,IAAI;AAAA,MACFC,MAAMC;AAAAA,MACNC,UAAW;AACT,eAAOC,aAAe,gBAAA;AAAA,MACxB;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDC,oBAAoB;AAAA,MAClBJ,MAAMK;AAAAA,MACNH,SAASA,MAAM,CAAE;AAAA,MACjBI,WAAWC,cAAYC,kBAA0B,2BAACD,QAAQ;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDE,cAAc;AAAA,MACZT,MAAMU;AAAAA,MACNR,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDS,UAAU;AAAA,IACRC,oCAAqC;AACnC,aAAO,KAAKC,2BAA2BC,WAAW;AAAA,IACnD;AAAA,IAEDD,6BAA8B;AAC5B,aAAOE,aAAuB,wBAAC,KAAKX,kBAAkB;AAAA,IACvD;AAAA,IAEDY,kBAAmB;AACjB,aAAOC,aAAkB,mBAAC,KAAKb,kBAAkB;AAAA,IACnD;AAAA,EACD;AAAA,EAEDc,SAAS;AAAA,IACPC,cAAenB,MAAMoB,OAAO;AAC1B,aAAO,sBAAsBpB,IAAI,IAAIoB,KAAK,IAAI,KAAKrB,EAAE;AAAA,IACtD;AAAA,IAEDsB,iBAAkBrB,MAAM;AACtB,YAAMsB,sBAAsB;AAAA,QAC1BC,OAAO;AAAA,QACPC,SAAS;AAAA,QACTC,SAAS;AAAA;AAGX,aAAOH,oBAAoBtB,IAAI;AAAA,IACjC;AAAA,EACF;AACF;;;EAhGI0B,OAAM;AAAA,EACN,WAAQ;;;;AAFF,SAAAC,OAAAlB,iBAAiBmB,SAAiChB,qCAD1DiB,cAAA,GAAAC,IAAA,mBAmBM,OAnBNC,YAmBM,EAdJF,cAAA,IAAA,GAAAC,uBAaME,IAAAA,+BAZiCJ,SAA0Bf,4BAAA,CAAA;AAAA,IAArDoB;AAAAA,IAASjC;AAAAA,KAAQoB,UAAK;4BADlCU,IAaM,mBAAA,OAAA;AAAA,MAXHI,KAAKN,SAAAT,cAAcnB,MAAMoB,KAAK;AAAA,MAC/Be,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAQ;AAAA,MACPT,OAAKU,IAAAA,eAAA,gDAA2ER,SAAAP,iBAAiBrB,IAAI,CAAA;QAMtGqC,IAAsB,mBAAA,KAAA;AAAA,MAAnBC,WAAQL;AAAAA,IAAO,GAAA,MAAA,GAAAM,UAAA,CAAA;;;;;"}
+{"version":3,"file":"validation-messages.cjs","sources":["../../components/validation_messages/validation_messages.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"showMessages && !isFilteredValidationMessagesEmpty\"\n    class=\"base-input__messages d-validation-message__container\"\n    data-qa=\"validation-messages-container\"\n  >\n    <div\n      v-for=\"({ message, type }, index) in filteredValidationMessages\"\n      :key=\"getMessageKey(type, index)\"\n      role=\"status\"\n      aria-live=\"polite\"\n      data-qa=\"validation-message\"\n      :class=\"[\n        'base-input__message',\n        'd-validation-message',\n        messageTypeClass(type),\n      ]\"\n    >\n      <p v-html=\"message\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  filterFormattedMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * Validation messages are used to convey information to the user about the current state of the input element.\n * These messages can have an error, warning or success type.\n * @see https://dialtone.dialpad.com/components/validation_messages.html\n */\nexport default {\n  name: 'DtValidationMessages',\n\n  props: {\n    /**\n     * The id of the validation message\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * Array of validation messages. Each message has the following structure:\n     * `{ message: \"Some informative message\", type: \"error|warning|success\"}`\n     */\n    validationMessages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show Validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  computed: {\n    isFilteredValidationMessagesEmpty () {\n      return this.filteredValidationMessages.length === 0;\n    },\n\n    filteredValidationMessages () {\n      return filterFormattedMessages(this.validationMessages);\n    },\n\n    validationState () {\n      return getValidationState(this.validationMessages);\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `validation-message-${type}-${index}-${this.id}`;\n    },\n\n    messageTypeClass (type) {\n      const messageTypesClasses = {\n        error: 'base-input__message--error d-validation-message--error',\n        warning: 'base-input__message--warning d-validation-message--warning',\n        success: 'base-input__message--success d-validation-message--success',\n      };\n\n      return messageTypesClasses[type];\n    },\n  },\n};\n</script>\n"],"names":["getUniqueString","validationMessageValidator","filterFormattedMessages","getValidationState","_openBlock","_createElementBlock","_Fragment","_normalizeClass","_createElementVNode"],"mappings":";;;;;;;AAoCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AACT,eAAOA,aAAe,gBAAA;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,WAAW,cAAYC,kBAA0B,2BAAC,QAAQ;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,oCAAqC;AACnC,aAAO,KAAK,2BAA2B,WAAW;AAAA,IACnD;AAAA,IAED,6BAA8B;AAC5B,aAAOC,aAAuB,wBAAC,KAAK,kBAAkB;AAAA,IACvD;AAAA,IAED,kBAAmB;AACjB,aAAOC,aAAkB,mBAAC,KAAK,kBAAkB;AAAA,IAClD;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,sBAAsB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACtD;AAAA,IAED,iBAAkB,MAAM;AACtB,YAAM,sBAAsB;AAAA,QAC1B,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA;AAGX,aAAO,oBAAoB,IAAI;AAAA,IAChC;AAAA,EACF;AACH;;;EAhGI,OAAM;AAAA,EACN,WAAQ;;;;AAFF,SAAA,OAAA,iBAAiB,SAAiC,qCAD1DC,IAAAA,aAAAC,IAAAA,mBAmBM,OAnBN,YAmBM;AAAA,KAdJD,IAAAA,UAAA,IAAA,GAAAC,uBAaMC,IAAAA,+BAZiC,SAA0B,4BAAA,CAAA,EAArD,SAAS,KAAI,GAAI,UAAK;8BADlCD,IAaM,mBAAA,OAAA;AAAA,QAXH,KAAK,SAAA,cAAc,MAAM,KAAK;AAAA,QAC/B,MAAK;AAAA,QACL,aAAU;AAAA,QACV,WAAQ;AAAA,QACP,OAAKE,IAAAA,eAAA;AAAA;;UAA2E,SAAA,iBAAiB,IAAI;AAAA;;QAMtGC,IAAsB,mBAAA,KAAA,EAAnB,WAAQ,QAAO,GAAA,MAAA,GAAA,UAAA;AAAA;;;;;;"}

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

@@ -65,20 +65,23 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = ["innerHTML"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return $props.showMessages && !$options.isFilteredValidationMessagesEmpty ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList($options.filteredValidationMessages, ({
-    message,
-    type
-  }, index) => {
-    return openBlock(), createElementBlock("div", {
-      key: $options.getMessageKey(type, index),
-      role: "status",
-      "aria-live": "polite",
-      "data-qa": "validation-message",
-      class: normalizeClass(["base-input__message", "d-validation-message", $options.messageTypeClass(type)])
-    }, [createElementVNode("p", {
-      innerHTML: message
-    }, null, 8, _hoisted_2)], 2);
-  }), 128))])) : createCommentVNode("", true);
+  return $props.showMessages && !$options.isFilteredValidationMessagesEmpty ? (openBlock(), createElementBlock("div", _hoisted_1, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList($options.filteredValidationMessages, ({ message, type }, index) => {
+      return openBlock(), createElementBlock("div", {
+        key: $options.getMessageKey(type, index),
+        role: "status",
+        "aria-live": "polite",
+        "data-qa": "validation-message",
+        class: normalizeClass([
+          "base-input__message",
+          "d-validation-message",
+          $options.messageTypeClass(type)
+        ])
+      }, [
+        createElementVNode("p", { innerHTML: message }, null, 8, _hoisted_2)
+      ], 2);
+    }), 128))
+  ])) : createCommentVNode("", true);
 }
 const DtValidationMessages = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"validation-messages.js","sources":["../../components/validation_messages/validation_messages.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"showMessages && !isFilteredValidationMessagesEmpty\"\n    class=\"base-input__messages d-validation-message__container\"\n    data-qa=\"validation-messages-container\"\n  >\n    <div\n      v-for=\"({ message, type }, index) in filteredValidationMessages\"\n      :key=\"getMessageKey(type, index)\"\n      role=\"status\"\n      aria-live=\"polite\"\n      data-qa=\"validation-message\"\n      :class=\"[\n        'base-input__message',\n        'd-validation-message',\n        messageTypeClass(type),\n      ]\"\n    >\n      <p v-html=\"message\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  filterFormattedMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * Validation messages are used to convey information to the user about the current state of the input element.\n * These messages can have an error, warning or success type.\n * @see https://dialtone.dialpad.com/components/validation_messages.html\n */\nexport default {\n  name: 'DtValidationMessages',\n\n  props: {\n    /**\n     * The id of the validation message\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * Array of validation messages. Each message has the following structure:\n     * `{ message: \"Some informative message\", type: \"error|warning|success\"}`\n     */\n    validationMessages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show Validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  computed: {\n    isFilteredValidationMessagesEmpty () {\n      return this.filteredValidationMessages.length === 0;\n    },\n\n    filteredValidationMessages () {\n      return filterFormattedMessages(this.validationMessages);\n    },\n\n    validationState () {\n      return getValidationState(this.validationMessages);\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `validation-message-${type}-${index}-${this.id}`;\n    },\n\n    messageTypeClass (type) {\n      const messageTypesClasses = {\n        error: 'base-input__message--error d-validation-message--error',\n        warning: 'base-input__message--warning d-validation-message--warning',\n        success: 'base-input__message--success d-validation-message--success',\n      };\n\n      return messageTypesClasses[type];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","props","id","type","String","default","getUniqueString","validationMessages","Array","validator","messages","validationMessageValidator","showMessages","Boolean","computed","isFilteredValidationMessagesEmpty","filteredValidationMessages","length","filterFormattedMessages","validationState","getValidationState","methods","getMessageKey","index","messageTypeClass","messageTypesClasses","error","warning","success","class","$props","$options","_openBlock","_createElementBlock","_hoisted_1","_Fragment","message","key","role","_normalizeClass","_createElementVNode","innerHTML","_hoisted_2"],"mappings":";;;;;AAoCA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,IAAI;AAAA,MACFC,MAAMC;AAAAA,MACNC,UAAW;AACT,eAAOC,gBAAe;AAAA,MACxB;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDC,oBAAoB;AAAA,MAClBJ,MAAMK;AAAAA,MACNH,SAASA,MAAM,CAAE;AAAA,MACjBI,WAAWC,cAAYC,2BAA2BD,QAAQ;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDE,cAAc;AAAA,MACZT,MAAMU;AAAAA,MACNR,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDS,UAAU;AAAA,IACRC,oCAAqC;AACnC,aAAO,KAAKC,2BAA2BC,WAAW;AAAA,IACnD;AAAA,IAEDD,6BAA8B;AAC5B,aAAOE,wBAAwB,KAAKX,kBAAkB;AAAA,IACvD;AAAA,IAEDY,kBAAmB;AACjB,aAAOC,mBAAmB,KAAKb,kBAAkB;AAAA,IACnD;AAAA,EACD;AAAA,EAEDc,SAAS;AAAA,IACPC,cAAenB,MAAMoB,OAAO;AAC1B,aAAO,sBAAsBpB,IAAI,IAAIoB,KAAK,IAAI,KAAKrB,EAAE;AAAA,IACtD;AAAA,IAEDsB,iBAAkBrB,MAAM;AACtB,YAAMsB,sBAAsB;AAAA,QAC1BC,OAAO;AAAA,QACPC,SAAS;AAAA,QACTC,SAAS;AAAA;AAGX,aAAOH,oBAAoBtB,IAAI;AAAA,IACjC;AAAA,EACF;AACF;;;EAhGI0B,OAAM;AAAA,EACN,WAAQ;;;;AAFF,SAAAC,OAAAlB,iBAAiBmB,SAAiChB,qCAD1DiB,UAAA,GAAAC,mBAmBM,OAnBNC,YAmBM,EAdJF,UAAA,IAAA,GAAAC,mBAaME,2BAZiCJ,SAA0Bf,4BAAA,CAAA;AAAA,IAArDoB;AAAAA,IAASjC;AAAAA,KAAQoB,UAAK;wBADlCU,mBAaM,OAAA;AAAA,MAXHI,KAAKN,SAAAT,cAAcnB,MAAMoB,KAAK;AAAA,MAC/Be,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAQ;AAAA,MACPT,OAAKU,eAAA,gDAA2ER,SAAAP,iBAAiBrB,IAAI,CAAA;QAMtGqC,mBAAsB,KAAA;AAAA,MAAnBC,WAAQL;AAAAA,IAAO,GAAA,MAAA,GAAAM,UAAA,CAAA;;;;"}
+{"version":3,"file":"validation-messages.js","sources":["../../components/validation_messages/validation_messages.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"showMessages && !isFilteredValidationMessagesEmpty\"\n    class=\"base-input__messages d-validation-message__container\"\n    data-qa=\"validation-messages-container\"\n  >\n    <div\n      v-for=\"({ message, type }, index) in filteredValidationMessages\"\n      :key=\"getMessageKey(type, index)\"\n      role=\"status\"\n      aria-live=\"polite\"\n      data-qa=\"validation-message\"\n      :class=\"[\n        'base-input__message',\n        'd-validation-message',\n        messageTypeClass(type),\n      ]\"\n    >\n      <p v-html=\"message\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  filterFormattedMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * Validation messages are used to convey information to the user about the current state of the input element.\n * These messages can have an error, warning or success type.\n * @see https://dialtone.dialpad.com/components/validation_messages.html\n */\nexport default {\n  name: 'DtValidationMessages',\n\n  props: {\n    /**\n     * The id of the validation message\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * Array of validation messages. Each message has the following structure:\n     * `{ message: \"Some informative message\", type: \"error|warning|success\"}`\n     */\n    validationMessages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show Validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  computed: {\n    isFilteredValidationMessagesEmpty () {\n      return this.filteredValidationMessages.length === 0;\n    },\n\n    filteredValidationMessages () {\n      return filterFormattedMessages(this.validationMessages);\n    },\n\n    validationState () {\n      return getValidationState(this.validationMessages);\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `validation-message-${type}-${index}-${this.id}`;\n    },\n\n    messageTypeClass (type) {\n      const messageTypesClasses = {\n        error: 'base-input__message--error d-validation-message--error',\n        warning: 'base-input__message--warning d-validation-message--warning',\n        success: 'base-input__message--success d-validation-message--success',\n      };\n\n      return messageTypesClasses[type];\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_Fragment","_normalizeClass","_createElementVNode"],"mappings":";;;;;AAoCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AACT,eAAO,gBAAe;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,WAAW,cAAY,2BAA2B,QAAQ;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,oCAAqC;AACnC,aAAO,KAAK,2BAA2B,WAAW;AAAA,IACnD;AAAA,IAED,6BAA8B;AAC5B,aAAO,wBAAwB,KAAK,kBAAkB;AAAA,IACvD;AAAA,IAED,kBAAmB;AACjB,aAAO,mBAAmB,KAAK,kBAAkB;AAAA,IAClD;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,sBAAsB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACtD;AAAA,IAED,iBAAkB,MAAM;AACtB,YAAM,sBAAsB;AAAA,QAC1B,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA;AAGX,aAAO,oBAAoB,IAAI;AAAA,IAChC;AAAA,EACF;AACH;;;EAhGI,OAAM;AAAA,EACN,WAAQ;;;;AAFF,SAAA,OAAA,iBAAiB,SAAiC,qCAD1DA,aAAAC,mBAmBM,OAnBN,YAmBM;AAAA,KAdJD,UAAA,IAAA,GAAAC,mBAaMC,2BAZiC,SAA0B,4BAAA,CAAA,EAArD,SAAS,KAAI,GAAI,UAAK;0BADlCD,mBAaM,OAAA;AAAA,QAXH,KAAK,SAAA,cAAc,MAAM,KAAK;AAAA,QAC/B,MAAK;AAAA,QACL,aAAU;AAAA,QACV,WAAQ;AAAA,QACP,OAAKE,eAAA;AAAA;;UAA2E,SAAA,iBAAiB,IAAI;AAAA;;QAMtGC,mBAAsB,KAAA,EAAnB,WAAQ,QAAO,GAAA,MAAA,GAAA,UAAA;AAAA;;;;;"}