@dialpad/dialtone-vue 2.183.1 → 2.184.0

package/dist/lib/tooltip/tooltip.js

@@ -0,0 +1,371 @@
+import { TOOLTIP_DIRECTIONS as s, TOOLTIP_STICKY_VALUES as a, TOOLTIP_KIND_MODIFIERS as h, TOOLTIP_DELAY_MS as i } from "./tooltip-constants.js";
+import { POPOVER_APPEND_TO_VALUES as l } from "../popover/popover-constants.js";
+import { getUniqueString as c, flushPromises as d } from "../../common/utils/index.js";
+import { getPopperOptions as r, getAnchor as u, createTippy as p } from "../popover/tippy-utils.js";
+import { n as f } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+const m = {
+  name: "DtTooltip",
+  props: {
+    /**
+     * The id of the tooltip
+     */
+    id: {
+      type: String,
+      default() {
+        return c();
+      }
+    },
+    /**
+     * If the popover does not fit in the direction described by "placement",
+     * it will attempt to change its direction to the "fallbackPlacements"
+     * if defined, otherwise it will automatically position to a new location
+     * as it sees best fit. See
+     * <a
+     *   class="d-link"
+     *   href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements"
+     *   target="_blank"
+     * >
+     *   Popper.js docs
+     * </a>
+     * */
+    fallbackPlacements: {
+      type: Array,
+      default: () => ["auto"]
+    },
+    /**
+     * If true, applies inverted styles to the tooltip
+     * @values true, false
+     */
+    inverted: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     *  Displaces the tooltip from its reference element
+     *  by the specified number of pixels. See
+     *  <a
+     *    class="d-link"
+     *    href="https://atomiks.github.io/tippyjs/v6/all-props/#offset"
+     *    target="_blank"
+     *  >
+     *    Tippy.js docs
+     *  </a>
+     */
+    offset: {
+      type: Array,
+      default: () => [0, 12]
+    },
+    /**
+     * The direction the popover displays relative to the anchor. See
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#placement"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values top, top-start, top-end,
+     * right, right-start, right-end,
+     * left, left-start, left-end,
+     * bottom, bottom-start, bottom-end,
+     * auto, auto-start, auto-end
+     */
+    placement: {
+      type: String,
+      default: "top",
+      validator(e) {
+        return s.includes(e);
+      }
+    },
+    /**
+     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed
+     * if the reference element's position is animating, or to automatically update the popover
+     * position in those cases the DOM layout changes the reference element's position.
+     * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
+     * checks the "popper" rect for changes. See
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#sticky"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values true, false, reference, popper
+     */
+    sticky: {
+      type: [Boolean, String],
+      default: !0,
+      validator: (e) => a.includes(e)
+    },
+    /**
+     * Sets the element to which the tooltip is going to append to.
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * This prop is not reactive, must be set on initial render.
+     * @values 'body', 'parent', HTMLElement,
+     */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: "body",
+      validator: (e) => l.includes(e) || e instanceof HTMLElement
+    },
+    /**
+     * Additional css classes for the tooltip content element.
+     * Can accept all of String, Object, and Array, i.e. has the
+     * same api as Vue's built-in handling of the class attribute.
+     */
+    contentClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * A provided message for the tooltip content
+     */
+    message: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Controls whether hover/focus causes the tooltip to appear.
+     * Cannot be combined with the show prop. show value will be ignored.
+     * by default this is true, if you override with false, the tooltip will never show up.
+     */
+    enabled: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.
+     * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    show: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Whether the tooltip should have a transition effect (fade).
+     */
+    transition: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Whether the tooltip will have a delay when being focused or moused over.
+     * @values true, false
+     */
+    delay: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/
+     */
+    theme: {
+      type: String,
+      default: null
+    },
+    /**
+     * External anchor id to use in those cases the anchor can't be provided via the slot.
+     * For instance, using the combobox's input as the anchor for the popover.
+     */
+    externalAnchor: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    /**
+     * Emitted when tooltip is shown or hidden
+     *
+     * @event shown
+     * @type {Boolean}
+     */
+    "shown",
+    /**
+     * Sync show value
+     *
+     * @event update:show
+     */
+    "update:show"
+  ],
+  data() {
+    return {
+      TOOLTIP_KIND_MODIFIERS: h,
+      tip: null,
+      inTimer: null,
+      // Internal state for whether the tooltip is shown. Changing the prop
+      // will update this.
+      internalShow: !1,
+      // this is where the placement currently is, this can be different than
+      // the placement prop when there is not enough available room for the tip
+      // to display and it uses a fallback placement.
+      currentPlacement: this.placement
+    };
+  },
+  computed: {
+    // eslint-disable-next-line complexity
+    tippyProps() {
+      return {
+        offset: this.offset,
+        delay: this.delay ? i : !1,
+        placement: this.placement,
+        sticky: this.sticky,
+        theme: this.inverted ? "inverted" : this.theme,
+        animation: this.transition ? "fade" : !1,
+        // onShown only triggers when transition is truthy
+        onShown: (e) => this.onShow(e, "onShown"),
+        // onShown will always be called, but it will be called before the animation is complete
+        onShow: (e) => this.onShow(e, "onShow"),
+        onHidden: this.onHide,
+        popperOptions: r({
+          fallbackPlacements: this.fallbackPlacements,
+          hasHideModifierEnabled: !0,
+          onChangePlacement: this.onChangePlacement
+        })
+      };
+    },
+    anchor() {
+      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : u(this.$refs.anchor);
+    }
+  },
+  watch: {
+    tippyProps: {
+      handler: "setProps",
+      deep: !0
+    },
+    show: {
+      handler: function(e) {
+        e !== null && this.enabled && (this.internalShow = e);
+      },
+      immediate: !0
+    },
+    internalShow(e) {
+      e ? (this.setProps(), this.tip.show()) : this.tip.hide();
+    },
+    sticky(e) {
+      this.tip.setProps({
+        sticky: e
+      });
+    }
+  },
+  async mounted() {
+    !this.enabled && this.show != null && (console.warn("Tooltip: You cannot use both the enabled and show props at the same time."), console.warn("The show prop will be ignored.")), this.tip = p(this.anchor, this.initOptions()), this.externalAnchor && (await d(), this.addExternalAnchorEventListeners());
+  },
+  beforeDestroy() {
+    var e, t;
+    this.externalAnchor && this.removeExternalAnchorEventListeners(), (e = this.anchor) != null && e._tippy && ((t = this.tip) == null || t.destroy());
+  },
+  methods: {
+    calculateAnchorZindex() {
+      return this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]') || // Special case because we don't have any dialtone drawer component yet. Render at 651 when
+      // anchor of popover is within a drawer.
+      this.$el.closest(".d-zi-drawer") ? 651 : 400;
+    },
+    hasVisibleFocus() {
+      return this.anchor.matches(":focus-visible");
+    },
+    onEnterAnchor(e) {
+      this.enabled && (this.delay && this.inTimer === null ? this.inTimer = setTimeout(() => {
+        this.triggerShow(e);
+      }, i) : this.triggerShow(e));
+    },
+    triggerShow(e) {
+      e.type === "focusin" ? this.show === null && this.hasVisibleFocus() && (this.internalShow = !0) : this.show === null && (this.internalShow = !0);
+    },
+    onLeaveAnchor(e) {
+      e.type === "keydown" && e.code !== "Escape" || (clearTimeout(this.inTimer), this.inTimer = null, this.triggerHide());
+    },
+    triggerHide() {
+      this.show === null && (this.internalShow = !1);
+    },
+    onChangePlacement(e) {
+      this.currentPlacement = e;
+    },
+    onHide() {
+      var e;
+      (e = this.tip) == null || e.unmount(), this.$emit("shown", !1), this.show !== null && this.$emit("update:show", !1);
+    },
+    onShow(e, t) {
+      if (!this.tooltipHasContent(e))
+        return !1;
+      this.transition && t === "onShow" || (this.$emit("shown", !0), this.show !== null && this.$emit("update:show", !0));
+    },
+    setProps() {
+      var e, t;
+      this.tip && this.tip.setProps && this.tip.setProps({
+        ...this.tippyProps,
+        // these need to be set here rather than in tippyProps because they are non-reactive
+        appendTo: this.appendTo === "body" ? (t = (e = this.anchor) == null ? void 0 : e.getRootNode()) == null ? void 0 : t.querySelector("body") : this.appendTo,
+        zIndex: this.calculateAnchorZindex()
+      });
+    },
+    onMount() {
+      this.setProps();
+    },
+    tooltipHasContent(e) {
+      return e.props.content.textContent.trim().length !== 0;
+    },
+    // set initial options here. If any of the options need to dynamically change, they should be put in
+    // tippyProps instead.
+    initOptions() {
+      return {
+        content: this.$refs.content,
+        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>',
+        // transition duration - same as our custom fade delay in dialtone-globals.less
+        duration: 180,
+        interactive: !1,
+        trigger: "manual",
+        hideOnClick: !1,
+        // disable tooltip from displaying on touch devices
+        touch: !1,
+        onMount: this.onMount,
+        showOnCreate: this.internalShow,
+        popperOptions: r({
+          hasHideModifierEnabled: !0
+        })
+      };
+    },
+    addExternalAnchorEventListeners() {
+      ["focusin", "mouseenter"].forEach((e) => {
+        var t;
+        (t = this.anchor) == null || t.addEventListener(e, (n) => this.onEnterAnchor(n));
+      }), ["focusout", "mouseleave", "keydown"].forEach((e) => {
+        var t;
+        (t = this.anchor) == null || t.addEventListener(e, (n) => this.onLeaveAnchor(n));
+      });
+    },
+    removeExternalAnchorEventListeners() {
+      ["focusin", "mouseenter"].forEach((e) => {
+        var t;
+        (t = this.anchor) == null || t.removeEventListener(e, (n) => this.onEnterAnchor(n));
+      }), ["focusout", "mouseleave", "keydown"].forEach((e) => {
+        var t;
+        (t = this.anchor) == null || t.removeEventListener(e, (n) => this.onLeaveAnchor(n));
+      });
+    }
+  }
+};
+var y = function() {
+  var t = this, n = t._self._c;
+  return n("div", { attrs: { "data-qa": "dt-tooltip-container" } }, [t.externalAnchor ? t._e() : n("span", { ref: "anchor", attrs: { "data-qa": "dt-tooltip-anchor" }, on: { focusin: t.onEnterAnchor, focusout: t.onLeaveAnchor, mouseenter: t.onEnterAnchor, mouseleave: t.onLeaveAnchor, keydown: function(o) {
+    return !o.type.indexOf("key") && t._k(o.keyCode, "esc", 27, o.key, ["Esc", "Escape"]) ? null : t.onLeaveAnchor.apply(null, arguments);
+  } } }, [t._t("anchor")], 2), n("div", t._g({ ref: "content", class: [
+    "d-tooltip",
+    {
+      [t.TOOLTIP_KIND_MODIFIERS.inverted]: t.inverted
+    },
+    t.contentClass
+  ], attrs: { id: t.id, "data-qa": "dt-tooltip" } }, t.$listeners), [t._t("default", function() {
+    return [t._v(" " + t._s(t.message) + " ")];
+  })], 2)]);
+}, w = [], g = /* @__PURE__ */ f(
+  m,
+  y,
+  w
+);
+const T = g.exports;
+export {
+  T as default
+};
+//# sourceMappingURL=tooltip.js.map

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

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

package/dist/lib/tooltip-directive/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./tooltip.cjs");exports.DtTooltipDirective=t.DtTooltipDirective;
+//# sourceMappingURL=index.cjs.map

package/dist/lib/tooltip-directive/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,5 @@
+import { DtTooltipDirective as e } from "./tooltip.js";
+export {
+  e as DtTooltipDirective
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/lib/tooltip-directive/tooltip.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("../../common/utils/index.cjs"),n=require("../tooltip/tooltip.cjs"),a={name:"dt-tooltip-directive",install(d){const s=document.createElement("div");document.body.appendChild(s);const u="top",l=new d({name:"DtTooltipDirectiveApp",components:{DtTooltip:n.default},data(){return{tooltips:[]}},methods:{addOrUpdateTooltip(t,o,e){const i=this.tooltips.findIndex(p=>p.id===t);i!==-1?(this.tooltips[i].message=o,this.tooltips[i].placement=e):this.tooltips.push({id:t,message:o,placement:e})},removeTooltip(t){this.tooltips=this.tooltips.filter(o=>o.id!==t)}},render(t){return t("div",{domProps:{id:"dt-tooltip-directive-app"}},[this.tooltips.map(({id:o,message:e,placement:i})=>t(n.default,{key:o,props:{message:e,placement:i,sticky:!0,delay:process.env.NODE_ENV!=="test",externalAnchor:`[data-dt-tooltip-id="${o}"]`}}))])}});l.$mount(s),d.directive("dt-tooltip",{bind(t,o){r(t,o)},update(t,o){o.value!==o.oldValue&&r(t,o)},unbind(t){l.removeTooltip(t.getAttribute("data-dt-tooltip-id"))}});function r(t,o){const e=t.getAttribute("data-dt-tooltip-id")||c.getUniqueString(),i=o.value,p=o.arg||u;t.setAttribute("data-dt-tooltip-id",e),l.addOrUpdateTooltip(e,i,p)}}};exports.DtTooltipDirective=a;exports.default=a;
+//# sourceMappingURL=tooltip.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.cjs","sources":["../../../directives/tooltip_directive/tooltip.js"],"sourcesContent":["import { DtTooltip } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\n\nexport const DtTooltipDirective = {\n  name: 'dt-tooltip-directive',\n  install (Vue) {\n    const mountPoint = document.createElement('div');\n    document.body.appendChild(mountPoint);\n\n    const DEFAULT_PLACEMENT = 'top';\n    const DtTooltipDirectiveApp = new Vue({\n      name: 'DtTooltipDirectiveApp',\n      components: { DtTooltip },\n      data () {\n        return {\n          tooltips: [],\n        };\n      },\n\n      methods: {\n        addOrUpdateTooltip (id, message, placement) {\n          const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n          if (index !== -1) {\n            // Update existing tooltip\n            this.tooltips[index].message = message;\n            this.tooltips[index].placement = placement;\n          } else {\n            // Add new tooltip\n            this.tooltips.push({ id, message, placement });\n          }\n        },\n\n        removeTooltip (id) {\n          this.tooltips = this.tooltips.filter(tooltip => tooltip.id !== id);\n        },\n      },\n\n      render (h) {\n        return h('div',\n          {\n            domProps: { id: 'dt-tooltip-directive-app' },\n          },\n          [\n            this.tooltips.map(({ id, message, placement }) => {\n              return h(DtTooltip, {\n                key: id,\n                props: {\n                  message,\n                  placement,\n                  sticky: true,\n                  /**\n                   * Set the delay to false when running tests only.\n                   */\n                  delay: process.env.NODE_ENV !== 'test',\n                  externalAnchor: `[data-dt-tooltip-id=\"${id}\"]`,\n                },\n              });\n            }),\n          ],\n        );\n      },\n    });\n\n    DtTooltipDirectiveApp.$mount(mountPoint);\n\n    Vue.directive('dt-tooltip', {\n      bind (anchor, binding) {\n        // Initial tooltip setup\n        setupTooltip(anchor, binding);\n      },\n      update (anchor, binding) {\n        // Update tooltip on binding value change\n        if (binding.value !== binding.oldValue) {\n          setupTooltip(anchor, binding);\n        }\n      },\n      unbind (anchor) {\n        DtTooltipDirectiveApp.removeTooltip(anchor.getAttribute('data-dt-tooltip-id'));\n      },\n    });\n\n    function setupTooltip (anchor, binding) {\n      const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n      const message = binding.value;\n      const placement = binding.arg || DEFAULT_PLACEMENT;\n\n      anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n      DtTooltipDirectiveApp.addOrUpdateTooltip(tooltipId, message, placement);\n    }\n  },\n};\n\nexport default DtTooltipDirective;\n"],"names":["DtTooltipDirective","Vue","mountPoint","DEFAULT_PLACEMENT","DtTooltipDirectiveApp","DtTooltip","id","message","placement","index","tooltip","h","anchor","binding","setupTooltip","tooltipId","getUniqueString"],"mappings":"gMAGaA,EAAqB,CAChC,KAAM,uBACN,QAASC,EAAK,CACZ,MAAMC,EAAa,SAAS,cAAc,KAAK,EAC/C,SAAS,KAAK,YAAYA,CAAU,EAEpC,MAAMC,EAAoB,MACpBC,EAAwB,IAAIH,EAAI,CACpC,KAAM,wBACN,WAAY,CAAEI,UAAAA,EAAAA,OAAW,EACzB,MAAQ,CACN,MAAO,CACL,SAAU,CAAE,CACtB,CACO,EAED,QAAS,CACP,mBAAoBC,EAAIC,EAASC,EAAW,CAC1C,MAAMC,EAAQ,KAAK,SAAS,UAAUC,GAAWA,EAAQ,KAAOJ,CAAE,EAC9DG,IAAU,IAEZ,KAAK,SAASA,CAAK,EAAE,QAAUF,EAC/B,KAAK,SAASE,CAAK,EAAE,UAAYD,GAGjC,KAAK,SAAS,KAAK,CAAE,GAAAF,EAAI,QAAAC,EAAS,UAAAC,CAAS,CAAE,CAEhD,EAED,cAAeF,EAAI,CACjB,KAAK,SAAW,KAAK,SAAS,OAAOI,GAAWA,EAAQ,KAAOJ,CAAE,CAClE,CACF,EAED,OAAQK,EAAG,CACT,OAAOA,EAAE,MACP,CACE,SAAU,CAAE,GAAI,0BAA4B,CAC7C,EACD,CACE,KAAK,SAAS,IAAI,CAAC,CAAE,GAAAL,EAAI,QAAAC,EAAS,UAAAC,KACzBG,EAAEN,EAAAA,QAAW,CAClB,IAAKC,EACL,MAAO,CACL,QAAAC,EACA,UAAAC,EACA,OAAQ,GAIR,MAAO,QAAQ,IAAI,WAAa,OAChC,eAAgB,wBAAwBF,CAAE,IAC3C,CACjB,CAAe,CACF,CACF,CACX,CACO,CACP,CAAK,EAEDF,EAAsB,OAAOF,CAAU,EAEvCD,EAAI,UAAU,aAAc,CAC1B,KAAMW,EAAQC,EAAS,CAErBC,EAAaF,EAAQC,CAAO,CAC7B,EACD,OAAQD,EAAQC,EAAS,CAEnBA,EAAQ,QAAUA,EAAQ,UAC5BC,EAAaF,EAAQC,CAAO,CAE/B,EACD,OAAQD,EAAQ,CACdR,EAAsB,cAAcQ,EAAO,aAAa,oBAAoB,CAAC,CAC9E,CACP,CAAK,EAED,SAASE,EAAcF,EAAQC,EAAS,CACtC,MAAME,EAAYH,EAAO,aAAa,oBAAoB,GAAKI,EAAe,gBAAA,EACxET,EAAUM,EAAQ,MAClBL,EAAYK,EAAQ,KAAOV,EAEjCS,EAAO,aAAa,qBAAsBG,CAAS,EACnDX,EAAsB,mBAAmBW,EAAWR,EAASC,CAAS,CACvE,CACF,CACH"}

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

@@ -0,0 +1,70 @@
+import { getUniqueString as c } from "../../common/utils/index.js";
+import n from "../tooltip/tooltip.js";
+const v = {
+  name: "dt-tooltip-directive",
+  install(l) {
+    const s = document.createElement("div");
+    document.body.appendChild(s);
+    const a = "top", p = new l({
+      name: "DtTooltipDirectiveApp",
+      components: { DtTooltip: n },
+      data() {
+        return {
+          tooltips: []
+        };
+      },
+      methods: {
+        addOrUpdateTooltip(t, o, e) {
+          const i = this.tooltips.findIndex((d) => d.id === t);
+          i !== -1 ? (this.tooltips[i].message = o, this.tooltips[i].placement = e) : this.tooltips.push({ id: t, message: o, placement: e });
+        },
+        removeTooltip(t) {
+          this.tooltips = this.tooltips.filter((o) => o.id !== t);
+        }
+      },
+      render(t) {
+        return t(
+          "div",
+          {
+            domProps: { id: "dt-tooltip-directive-app" }
+          },
+          [
+            this.tooltips.map(({ id: o, message: e, placement: i }) => t(n, {
+              key: o,
+              props: {
+                message: e,
+                placement: i,
+                sticky: !0,
+                /**
+                 * Set the delay to false when running tests only.
+                 */
+                delay: process.env.NODE_ENV !== "test",
+                externalAnchor: `[data-dt-tooltip-id="${o}"]`
+              }
+            }))
+          ]
+        );
+      }
+    });
+    p.$mount(s), l.directive("dt-tooltip", {
+      bind(t, o) {
+        r(t, o);
+      },
+      update(t, o) {
+        o.value !== o.oldValue && r(t, o);
+      },
+      unbind(t) {
+        p.removeTooltip(t.getAttribute("data-dt-tooltip-id"));
+      }
+    });
+    function r(t, o) {
+      const e = t.getAttribute("data-dt-tooltip-id") || c(), i = o.value, d = o.arg || a;
+      t.setAttribute("data-dt-tooltip-id", e), p.addOrUpdateTooltip(e, i, d);
+    }
+  }
+};
+export {
+  v as DtTooltipDirective,
+  v as default
+};
+//# sourceMappingURL=tooltip.js.map

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

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./top-banner-info.cjs"),e=require("./top-banner-info-constants.cjs");exports.DtRecipeTopBannerInfo=n.default;exports.COLOR_CODES=e.COLOR_CODES;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,7 @@
+import { default as r } from "./top-banner-info.js";
+import { COLOR_CODES as p } from "./top-banner-info-constants.js";
+export {
+  p as COLOR_CODES,
+  r as DtRecipeTopBannerInfo
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=["green300","green100","red200","red100","gold100","gold200","black100","white"],t={COLOR_CODES:e};exports.COLOR_CODES=e;exports.default=t;
+//# sourceMappingURL=top-banner-info-constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"top-banner-info-constants.cjs","sources":["../../../recipes/notices/top_banner_info/top_banner_info_constants.js"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n"],"names":["COLOR_CODES","top_banner_info_constants"],"mappings":"4GAAY,MAACA,EAAc,CAAC,WAAY,WAAY,SAAU,SAAU,UACtE,UAAW,WAAY,OAAO,EAEjBC,EAAA,CACb,YAAAD,CACF"}

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

@@ -0,0 +1,17 @@
+const e = [
+  "green300",
+  "green100",
+  "red200",
+  "red100",
+  "gold100",
+  "gold200",
+  "black100",
+  "white"
+], n = {
+  COLOR_CODES: e
+};
+export {
+  e as COLOR_CODES,
+  n as default
+};
+//# sourceMappingURL=top-banner-info-constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"top-banner-info-constants.js","sources":["../../../recipes/notices/top_banner_info/top_banner_info_constants.js"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n"],"names":["COLOR_CODES","top_banner_info_constants"],"mappings":"AAAY,MAACA,IAAc;AAAA,EAAC;AAAA,EAAY;AAAA,EAAY;AAAA,EAAU;AAAA,EAAU;AAAA,EACtE;AAAA,EAAW;AAAA,EAAY;AAAO,GAEjBC,IAAA;AAAA,EACb,aAAAD;AACF;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"top-banner-info.cjs","sources":["../../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-recipe-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"d-recipe-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"d-recipe-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"d-recipe-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green100: 'd-recipe-top-banner-info--success',\n        green300: 'd-recipe-top-banner-info--success',\n        red100: 'd-recipe-top-banner-info--critical',\n        red200: 'd-recipe-top-banner-info--critical',\n        gold100: 'd-recipe-top-banner-info--warning',\n        gold200: 'd-recipe-top-banner-info--warning',\n        black100: 'd-recipe-top-banner-info--info',\n        white: 'd-recipe-top-banner-info--primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","kind","COLOR_CODES"],"mappings":"uNA0BAA,EAAA,CACA,KAAA,wBAEA,MAAA,CAIA,UAAA,CACA,KAAA,OACA,QAAA,WACA,UAAA,SAAAC,EAAA,CACA,OAAAC,EAAA,YAAA,SAAAD,CAAA,CACA,CACA,CACA,EAEA,SAAA,CACA,iBAAA,CAaA,MAAA,CAZA,CAGA,SAAA,oCACA,SAAA,oCACA,OAAA,qCACA,OAAA,qCACA,QAAA,oCACA,QAAA,oCACA,SAAA,iCACA,MAAA,mCACA,EACA,KAAA,SAAA,CAAA,CACA,CACA,CACA"}

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

@@ -0,0 +1,46 @@
+import { COLOR_CODES as o } from "./top-banner-info-constants.js";
+import { n as t } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+const i = {
+  name: "DtRecipeTopBannerInfo",
+  props: {
+    /**
+     * color of the banner background
+     */
+    colorCode: {
+      type: String,
+      default: "green300",
+      validator: function(r) {
+        return o.includes(r);
+      }
+    }
+  },
+  computed: {
+    bannerInfoClass() {
+      return [{
+        // these are too specific, so for now I'm at least updating the resultant semantic value
+        // TODO: breaking change: update to be more abstract
+        green100: "d-recipe-top-banner-info--success",
+        green300: "d-recipe-top-banner-info--success",
+        red100: "d-recipe-top-banner-info--critical",
+        red200: "d-recipe-top-banner-info--critical",
+        gold100: "d-recipe-top-banner-info--warning",
+        gold200: "d-recipe-top-banner-info--warning",
+        black100: "d-recipe-top-banner-info--info",
+        white: "d-recipe-top-banner-info--primary"
+      }[this.colorCode]];
+    }
+  }
+};
+var a = function() {
+  var n = this, e = n._self._c;
+  return e("div", { staticClass: "d-recipe-top-banner-info", class: n.bannerInfoClass, attrs: { "data-qa": "banner-info" } }, [e("div", { staticClass: "d-recipe-top-banner-info__left" }, [n._t("left")], 2), e("div", { staticClass: "d-recipe-top-banner-info__middle", attrs: { "data-qa": "banner-info--middle" } }, [n._t("default")], 2), e("div", { staticClass: "d-recipe-top-banner-info__right" }, [n._t("right")], 2)]);
+}, s = [], c = /* @__PURE__ */ t(
+  i,
+  a,
+  s
+);
+const f = c.exports;
+export {
+  f as default
+};
+//# sourceMappingURL=top-banner-info.js.map