@dialpad/dialtone-vue 2.124.0 → 2.125.1-alpha.1

package/dist/lib/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      @touchstart=\"onTouchStart\"\n    >\n      <!-- @slot Slot for the anchor element -->\n      <slot\n        name=\"anchor\"\n      />\n    </span>\n    <dt-lazy-show\n      :id=\"id\"\n      ref=\"content\"\n      :show=\"isVisible\"\n      role=\"tooltip\"\n      aria-hidden=\"false\"\n      data-qa=\"dt-tooltip\"\n      appear\n      :transition=\"transition\"\n      :class=\"[\n        'd-tooltip',\n        `d-tooltip__arrow-tippy--${currentPlacement}`,\n        {\n          [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n        },\n        contentClass,\n      ]\"\n      v-on=\"tooltipListeners\"\n    >\n      <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n      <!-- after-leave event can be used instead of transitionend -->\n      <!-- @slot Slot for the content, defaults to message prop -->\n      <slot>\n        {{ message }}\n      </slot>\n    </dt-lazy-show>\n  </div>\n</template>\n\n<script>\nimport {\n  TOOLTIP_KIND_MODIFIERS,\n  TOOLTIP_DIRECTIONS,\n  TOOLTIP_STICKY_VALUES,\n  TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport {\n  createTippy,\n  getAnchor,\n  getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/**\n * A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n */\nexport default {\n  name: 'DtTooltip',\n  components: {\n    DtLazyShow,\n  },\n\n  props: {\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\"\n     * if defined, otherwise it will automatically position to a new location\n     * as it sees best fit. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => ['auto'],\n    },\n\n    /**\n     * If true, applies inverted styles to the tooltip\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the tooltip from its reference element\n     *  by the specified number of pixels. See\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, -4],\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'top',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\n    },\n\n    /**\n     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: false,\n      validator: (sticky) => {\n        return TOOLTIP_STICKY_VALUES.includes(sticky);\n      },\n    },\n\n    /**\n     * Sets the element to which the tooltip is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * This prop is not reactive, must be set on initial render.\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Additional css classes for the tooltip content element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * A provided message for the tooltip content\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls whether hover/focus causes the tooltip to appear.\n     * Cannot be combined with the show prop. show value will be ignored.\n     * by default this is true, if you override with false, the tooltip will never show up.\n     */\n    enabled: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n     * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Whether the tooltip will have a delay when being focused or moused over.\n     * @values true, false\n     */\n    delay: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * External anchor id to use in those cases the anchor can't be provided via the slot.\n     * For instance, using the combobox's input as the anchor for the popover.\n     */\n    externalAnchor: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when tooltip is shown or hidden\n     *\n     * @event shown\n     * @type {Boolean}\n     */\n    'shown',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      TOOLTIP_KIND_MODIFIERS,\n      tip: null,\n\n      inTimer: null,\n\n      // Internal state for whether the tooltip is shown. Changing the prop\n      // will update this.\n      isShown: false,\n\n      // this is where the placement currently is, this can be different than\n      // the placement prop when there is not enough available room for the tip\n      // to display and it uses a fallback placement.\n      currentPlacement: this.placement,\n\n      // flag check touch based device\n      isTouchDevice: false,\n    };\n  },\n\n  computed: {\n    // whether the tooltip is visible or not.\n    isVisible () {\n      const hasMessage = !!this.message?.trim();\n      const hasDefaultSlot = !!this.$slots?.default;\n      const isDeviceCompatible = !this.isTouchDevice;\n\n      const shouldBeVisible = this.isShown && this.enabled && (hasMessage || hasDefaultSlot);\n\n      return shouldBeVisible && isDeviceCompatible;\n    },\n\n    tooltipListeners () {\n      return {\n        ...this.$listeners,\n\n        'after-leave': () => {\n          this.onLeaveTransitionComplete();\n        },\n\n        'after-enter': () => {\n          this.onEnterTransitionComplete();\n        },\n      };\n    },\n\n    tippyProps () {\n      return {\n        offset: this.offset,\n        interactive: false,\n        trigger: 'manual',\n        placement: this.placement,\n        sticky: this.sticky,\n        popperOptions: getPopperOptions({\n          fallbackPlacements: this.fallbackPlacements,\n          hasHideModifierEnabled: true,\n          onChangePlacement: this.onChangePlacement,\n        }),\n      };\n    },\n\n    anchor () {\n      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n    },\n  },\n\n  watch: {\n\n    tippyProps: {\n      handler: 'setProps',\n      deep: true,\n    },\n\n    show: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isShown (isShown) {\n      if (isShown) {\n        this.setProps();\n        this.tip.show();\n      } else {\n        this.tip.hide();\n      }\n    },\n\n    sticky (sticky) {\n      this.tip.setProps({\n        sticky,\n      });\n    },\n  },\n\n  mounted () {\n    if (!this.enabled && this.show != null) {\n      console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n      console.warn('The show prop will be ignored.');\n    }\n    this.externalAnchor && this.addExternalAnchorEventListeners();\n    this.tip = createTippy(this.anchor, this.initOptions());\n\n    // immediate watcher fires before mounted, so have this here in case\n    // show prop was initially set to true.\n    if (this.isShown) {\n      this.tip.show();\n    }\n  },\n\n  beforeDestroy () {\n    this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n    if (this.tip) {\n      this.tip?.destroy();\n    }\n  },\n\n  methods: {\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n        // anchor of popover is within a drawer.\n        this.$el.closest('.d-zi-drawer')) {\n        return 651;\n      } else {\n        return 400;\n      }\n    },\n\n    hasVisibleFocus () {\n      return this.anchor.matches(':focus-visible');\n    },\n\n    onEnterAnchor (e) {\n      // Note: This is to stop the call of mouseenter event when touchstart event is triggered,\n      //       as when triggered by click or touch, the relatedTarget property of MouseEvent is null\n      if (this.isTouchDevice && !e.relatedTarget) return;\n\n      if (this.delay) {\n        this.inTimer = setTimeout(function (event) {\n          this.triggerShow(event);\n        }.bind(this, e), TOOLTIP_DELAY_MS);\n      } else {\n        this.triggerShow(e);\n      }\n\n      // since this method will be trigger by mouse event, updating the flag is non-touch device\n      this.isTouchDevice = false;\n    },\n\n    triggerShow (e) {\n      if (e.type === 'focusin') {\n        // only show tooltips on visible focus when triggered via focus.\n        // when the user is using the mouse they only want tooltips to display\n        // on mouseover.\n        //\n        // Example: anchor of a popover is a button with tooltip.\n        // closing it with the mouse would trigger the tooltip to display as\n        // the anchor is focused on close. Not what we want.\n        if (this.show === null && this.hasVisibleFocus()) {\n          this.isShown = true;\n        }\n      } else {\n        if (this.show === null) this.isShown = true;\n      }\n    },\n\n    onLeaveAnchor (e) {\n      if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n      clearTimeout(this.inTimer);\n      this.triggerHide();\n    },\n\n    triggerHide () {\n      if (this.show === null) this.isShown = false;\n    },\n\n    onChangePlacement (placement) {\n      this.currentPlacement = placement;\n    },\n\n    onLeaveTransitionComplete () {\n      this.tip?.unmount();\n      this.$emit('shown', false);\n      if (this.show !== null) {\n        this.$emit('update:show', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('shown', true);\n      if (this.show !== null) {\n        this.$emit('update:show', true);\n      }\n    },\n\n    setProps () {\n      if (this.tip && this.tip.setProps) {\n        this.tip.setProps({\n          ...this.tippyProps,\n          zIndex: this.calculateAnchorZindex(),\n          appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n        });\n      }\n    },\n\n    onMount () {\n      this.setProps();\n    },\n\n    initOptions () {\n      return {\n        contentElement: this.$refs.content.$el,\n        allowHTML: true,\n        zIndex: this.calculateAnchorZindex(),\n        onMount: this.onMount,\n        ...this.tippyProps,\n      };\n    },\n\n    addExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor.addEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n\n    removeExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n\n    onTouchStart () {\n      this.isTouchDevice = true;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.tippy-box[data-popper-reference-hidden] {\n  .d-tooltip {\n    visibility: hidden;\n    pointer-events: none;\n  }\n}\n</style>\n"],"names":["_sfc_main","DtLazyShow","getUniqueString","placement","TOOLTIP_DIRECTIONS","sticky","TOOLTIP_STICKY_VALUES","appendTo","POPOVER_APPEND_TO_VALUES","TOOLTIP_KIND_MODIFIERS","hasMessage","_a","hasDefaultSlot","_b","isDeviceCompatible","getPopperOptions","getAnchor","show","isShown","createTippy","event","TOOLTIP_DELAY_MS","listener"],"mappings":"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"}

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

@@ -0,0 +1,60 @@
+import { n as r } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+const a = [
+  "green300",
+  "green100",
+  "red200",
+  "red100",
+  "gold100",
+  "gold200",
+  "black100",
+  "white"
+], o = {
+  name: "DtRecipeTopBannerInfo",
+  props: {
+    /**
+     * color of the banner background
+     */
+    colorCode: {
+      type: String,
+      default: "green300",
+      validator: function(t) {
+        return a.includes(t);
+      }
+    }
+  },
+  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
+        green300: "d-bgc-success",
+        green100: "d-bgc-success",
+        red200: "d-bgc-critical",
+        red100: "d-bgc-critical",
+        gold200: "d-bgc-warning",
+        gold100: "d-bgc-warning",
+        black100: "d-bgc-info",
+        white: "d-bgc-primary"
+      }[this.colorCode]];
+    }
+  }
+};
+var s = function() {
+  var n = this, e = n._self._c;
+  return e("div", { staticClass: "dt-top-banner-info", class: n.bannerInfoClass, attrs: { "data-qa": "banner-info" } }, [e("div", { staticClass: "dt-top-banner-info__left" }, [n._t("left")], 2), e("div", { staticClass: "dt-top-banner-info__middle", attrs: { "data-qa": "banner-info--middle" } }, [n._t("default")], 2), e("div", { staticClass: "dt-top-banner-info__right" }, [n._t("right")], 2)]);
+}, c = [], i = /* @__PURE__ */ r(
+  o,
+  s,
+  c,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const l = i.exports;
+export {
+  a as COLOR_CODES,
+  l as DtRecipeTopBannerInfo
+};
+//# sourceMappingURL=top-banner-info.js.map

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

@@ -0,0 +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","kind"],"mappings":";AAAY,MAACA,IAAc;AAAA,EAAC;AAAA,EAAY;AAAA,EAAY;AAAA,EAAU;AAAA,EAAU;AAAA,EACtE;AAAA,EAAW;AAAA,EAAY;AAAO,GCyBhCC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,SAAAC,GAAA;AACA,eAAAF,EAAA,SAAAE,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kBAAA;AAaA,aAAA,CAZA;AAAA;AAAA;AAAA,QAGA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA;AAAA,QACA,OAAA;AAAA,MACA,EACA,KAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/lib/unread-pill.js

@@ -0,0 +1,61 @@
+import { n } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtIcon as a } from "./icon.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./skeleton.js";
+const i = ["up", "down"], l = ["mentions", "messages"], o = {
+  name: "DtRecipeUnreadPill",
+  components: {
+    DtIcon: a
+  },
+  props: {
+    /**
+     * The kind of unread pill which determines the styling
+     * @values 'mentions', 'messages'
+     **/
+    kind: {
+      type: String,
+      required: !0,
+      validator: (e) => l.includes(e)
+    },
+    /**
+     * The direction of the arrow icon
+     * @values 'up', 'down'
+     **/
+    direction: {
+      type: String,
+      required: !0,
+      validator: (e) => i.includes(e)
+    }
+  },
+  emits: [
+    /**
+     * Native click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ]
+};
+var s = function() {
+  var t = this, r = t._self._c;
+  return r("button", t._g({ class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${t.kind}`], attrs: { type: "button", "data-qa": "dt-leftbar-unread-pill" } }, t.$listeners), [r("dt-icon", { attrs: { name: `arrow-${t.direction}`, size: "300" } }), r("span", { attrs: { "data-qa": "dt-leftbar-unread-pill__label" } }, [t._t("default")], 2)], 1);
+}, d = [], p = /* @__PURE__ */ n(
+  o,
+  s,
+  d,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const v = p.exports;
+export {
+  v as DtRecipeUnreadPill,
+  i as UNREAD_PILL_DIRECTIONS,
+  l as UNREAD_PILL_KINDS
+};
+//# sourceMappingURL=unread-pill.js.map

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

@@ -0,0 +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=\"$listeners\"\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</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","DtIcon","kind","dir"],"mappings":";;;;;;AAAY,MAACA,IAAyB,CAAC,MAAM,MAAM,GACtCC,IAAoB,CAAC,YAAY,UAAU,GCmBxDC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAAH,EAAA,SAAAG,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAAL,EAAA,SAAAK,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/lib/utils.js

@@ -0,0 +1,175 @@
+import { DEFAULT_PREFIX as p, DEFAULT_VALIDATION_MESSAGE_TYPE as R, VALIDATION_MESSAGE_TYPES as o } from "./constants.js";
+import g from "vue";
+let b = 0, c;
+const x = "input:not([type=hidden]):not(:disabled)", S = "select:not(:disabled),textarea:not(:disabled),button:not(:disabled)", C = `${x},${S}`, O = `a,frame,iframe,${C},*[tabindex]`, _ = typeof setImmediate == "function" ? setImmediate : setTimeout;
+function A(e = p) {
+  return `${e}${b++}`;
+}
+function w(e, t) {
+  if (t) {
+    const n = T(t);
+    return e[Math.abs(n) % e.length];
+  } else
+    return e[u(e.length)];
+}
+function T(e) {
+  let t;
+  for (let n = 0; n < e.length; n++)
+    t = Math.imul(31, t) + e.charCodeAt(n) | 0;
+  return t;
+}
+function u(e) {
+  return Math.floor(Math.random() * e);
+}
+function I(e) {
+  return e ? e.map((t) => typeof t == "string" ? {
+    message: t,
+    type: R
+  } : t) : [];
+}
+function L(e) {
+  const t = s(e);
+  return !e || !t ? [] : e.filter((n) => !!n.message && n.type === t);
+}
+function s(e) {
+  return e ? r(e, o.ERROR) ? o.ERROR : r(e, o.WARNING) ? o.WARNING : r(e, o.SUCCESS) ? o.SUCCESS : null : null;
+}
+function r(e, t) {
+  return !e || !t ? !1 : e.some((n) => (n == null ? void 0 : n.type) === t);
+}
+function q(e) {
+  return e == null ? void 0 : e.querySelector(O);
+}
+const N = {
+  name: "html-fragment",
+  functional: !0,
+  props: ["html"],
+  render(e, t) {
+    return new g({
+      // eslint-disable-next-line vue/multi-word-component-names
+      name: "Inner",
+      beforeCreate() {
+        this.$createElement = e;
+      },
+      template: `<div>${t.props.html}</div>`
+    }).$mount()._vnode.children;
+  }
+}, U = () => new Promise((e) => {
+  _(e);
+}), $ = (e) => e == null ? void 0 : e.toLowerCase().split("-").map((t) => t.charAt(0).toUpperCase() + t.slice(1)).join(""), Q = (e) => e.replace(/\.?([A-Z0-9]+)/g, (t, n) => "-" + n.toLowerCase()).replace(/^-/, "");
+function F(e, t = 300) {
+  clearTimeout(c), c = setTimeout(e, t);
+}
+function v(e) {
+  const t = e.getBoundingClientRect(), n = {
+    top: t.top < 0,
+    left: t.left < 0,
+    bottom: t.bottom > (window.innerHeight || document.documentElement.clientHeight),
+    right: t.right > (window.innerWidth || document.documentElement.clientWidth)
+  };
+  return n.any = Object.values(n).some((i) => i), n.all = Object.values(n).every((i) => i), n;
+}
+const y = /(?:(?:[^\s!@#$%^&*()_=+[\]{}\\|;:'",.<>/?]+)\.)/, D = new RegExp(
+  "(?:com|ru|org|net|de|jp|uk|br|it|pl|fr|in|au|ir|info|nl|cn|es|cz|kr|ca|eu|ua|co|gr|za|ro|biz|ch|se|tw|mx|vn|hu|be|tr|at|dk|tv|me|ar|sk|no|us|fi|id|cl|xyz|io|pt|by|il|ie|nz|kz|hk|lt|cc|my|sg|club|bg|edu|рф|pk|su|top|th|hr|rs|pe|pro|si|az|lv|pw|ae|ph|online|ng|ee|ws|ve|cat)"
+), P = new RegExp(
+  "(?:(?:[0-9]|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])\\.){3}(?:[0-9]|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])"
+), l = new RegExp(
+  "(?:" + [
+    [
+      y.source,
+      D.source
+    ].join("+"),
+    P.source
+  ].join("|") + ")"
+), j = /(?:(?:[;/][^#?<>\s]*)?)/, a = /(?:(?:\?[^#<>\s]+)?(?:#[^<>\s]+)?)/, f = new RegExp(
+  "\\b" + [
+    l.source,
+    j.source,
+    a.source,
+    "(?!\\w)"
+  ].join("+")
+), d = /\b[a-z\d.-]+:\/\/[^<>\s]+/, E = new RegExp(
+  "(?:mailto:)?[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@" + [
+    l.source,
+    a.source
+  ].join("+") + "(?!\\w)"
+);
+function m(e = 7, t = 15) {
+  return new RegExp(
+    `(?:^|(?<=\\W))(?![\\s\\-])\\+?(?:[0-9()\\- \\t]{${e},${t}})(?=\\b)(?=\\W(?=\\W|$)|\\s|$)`
+  );
+}
+const h = m(), z = new RegExp(
+  [
+    f.source,
+    d.source,
+    E.source,
+    h.source
+  ].join("|"),
+  "gi"
+);
+function W(e) {
+  var t;
+  return !e || !["string", "number"].includes(typeof e) ? !1 : (e = e.toString(), ((t = h.exec(e)) == null ? void 0 : t[0]) === e);
+}
+function k(e) {
+  var t, n;
+  return !e || typeof e != "string" ? !1 : ((t = f.exec(e)) == null ? void 0 : t[0]) === e || ((n = d.exec(e)) == null ? void 0 : n[0]) === e;
+}
+function B(e) {
+  var t;
+  return !e || typeof e != "string" ? !1 : ((t = E.exec(e)) == null ? void 0 : t[0]) === e;
+}
+function H(e) {
+  return e.filter((t) => !!t).join(" ");
+}
+function V(e, t = "en-US") {
+  return e.replace(new RegExp("^\\p{CWU}", "u"), (n) => n.toLocaleUpperCase(t));
+}
+const Y = {
+  getUniqueString: A,
+  getRandomElement: w,
+  getRandomInt: u,
+  formatMessages: I,
+  filterFormattedMessages: L,
+  hasFormattedMessageOfType: r,
+  getValidationState: s,
+  htmlFragment: N,
+  flushPromises: U,
+  kebabCaseToPascalCase: $,
+  debounce: F,
+  isOutOfViewPort: v,
+  getPhoneNumberRegex: m,
+  linkRegex: z,
+  isEmailAddress: B,
+  isPhoneNumber: W,
+  isURL: k,
+  safeConcatStrings: H,
+  capitalizeFirstLetter: V
+};
+export {
+  V as capitalizeFirstLetter,
+  F as debounce,
+  Y as default,
+  L as filterFormattedMessages,
+  q as findFirstFocusableNode,
+  U as flushPromises,
+  I as formatMessages,
+  m as getPhoneNumberRegex,
+  w as getRandomElement,
+  u as getRandomInt,
+  A as getUniqueString,
+  s as getValidationState,
+  r as hasFormattedMessageOfType,
+  N as htmlFragment,
+  B as isEmailAddress,
+  v as isOutOfViewPort,
+  W as isPhoneNumber,
+  k as isURL,
+  T as javaHashCode,
+  $ as kebabCaseToPascalCase,
+  z as linkRegex,
+  Q as pascalCaseToKebabCase,
+  H as safeConcatStrings
+};
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../common/utils/index.js"],"sourcesContent":["import {\n  DEFAULT_PREFIX,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  VALIDATION_MESSAGE_TYPES,\n} from '../constants';\nimport Vue from 'vue';\n\nlet UNIQUE_ID_COUNTER = 0;\nlet TIMER;\n\n// selector to find focusable not hidden inputs\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN = 'input:not([type=hidden]):not(:disabled)';\n// selector to find focusable not disables elements\nconst FOCUSABLE_SELECTOR_NOT_DISABLED = 'select:not(:disabled),textarea:not(:disabled),button:not(:disabled)';\n// // selector to find focusable not hidden and disabled elements\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED = `${FOCUSABLE_SELECTOR_NOT_HIDDEN},${FOCUSABLE_SELECTOR_NOT_DISABLED}`;\n// selector to find focusable elements\nconst FOCUSABLE_SELECTOR = `a,frame,iframe,${FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED},*[tabindex]`;\n\nconst scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout;\n\nexport function getUniqueString (prefix = DEFAULT_PREFIX) {\n  return `${prefix}${UNIQUE_ID_COUNTER++}`;\n}\n\n/**\n * Returns a random element from array\n * @param array - the array to return a random element from\n * @param {string} seed - use a string to seed the randomization, so it returns the same element each time\n * based on that string.\n * @returns {*} - the random element\n */\nexport function getRandomElement (array, seed) {\n  if (seed) {\n    const hash = javaHashCode(seed);\n    return array[Math.abs(hash) % array.length];\n  } else {\n    return array[getRandomInt(array.length)];\n  }\n}\n\n/**\n * Returns a hash code for a string.\n * (Compatible to Java's String.hashCode())\n * We use this algo to be in sync with android.\n *\n * The hash code for a string object is computed as\n *     s[0]*31^(n-1) + s[1]*31^(n-2) + ... + s[n-1]\n * using number arithmetic, where s[i] is the i th character\n * of the given string, n is the length of the string,\n * and ^ indicates exponentiation.\n * (The hash value of the empty string is zero.)\n *\n * @param {string} str a string\n * @return {number} a hash code value for the given string.\n */\nexport function javaHashCode (str) {\n  let h;\n  for (let i = 0; i < str.length; i++) {\n    h = Math.imul(31, h) + str.charCodeAt(i) | 0;\n  }\n\n  return h;\n}\n\n/**\n * Generate a random integer\n * @param {number} max - max range of integer to generate\n * @returns {number} randomly generated integer between 0 and max\n */\nexport function getRandomInt (max) {\n  return Math.floor(Math.random() * max);\n}\n\nexport function formatMessages (messages) {\n  if (!messages) {\n    return [];\n  }\n\n  return messages.map(message => {\n    if (typeof message === 'string') {\n      return {\n        message,\n        type: DEFAULT_VALIDATION_MESSAGE_TYPE,\n      };\n    }\n\n    return message;\n  });\n}\n\nexport function filterFormattedMessages (formattedMessages) {\n  const validationState = getValidationState(formattedMessages);\n\n  if (!formattedMessages || !validationState) {\n    return [];\n  }\n\n  return formattedMessages.filter(message => !!message.message && message.type === validationState);\n}\n\n/*\n * The priority order of message types is as flows: 'error' > 'warning' > 'success'.\n * If any message of type 'error' is present in messages, the input state is considered\n * to be 'error', then 'warning' and lastly 'success'.\n */\nexport function getValidationState (formattedMessages) {\n  if (!formattedMessages) {\n    return null;\n  }\n\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.ERROR)) {\n    return VALIDATION_MESSAGE_TYPES.ERROR;\n  }\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.WARNING)) {\n    return VALIDATION_MESSAGE_TYPES.WARNING;\n  }\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.SUCCESS)) {\n    return VALIDATION_MESSAGE_TYPES.SUCCESS;\n  }\n\n  return null;\n}\n\nexport function hasFormattedMessageOfType (formattedMessages, messageType) {\n  if (!formattedMessages || !messageType) {\n    return false;\n  }\n\n  return formattedMessages.some(message => message?.type === messageType);\n}\n\nexport function findFirstFocusableNode (element) {\n  return element?.querySelector(FOCUSABLE_SELECTOR);\n}\n\n/* html-fragment component:\n * To render html without wrapping in another element as when using v-html.\n * props: html\n */\nexport const htmlFragment = {\n  name: 'html-fragment',\n  functional: true,\n  props: ['html'],\n  render (h, ctx) {\n    return new Vue({\n      // eslint-disable-next-line vue/multi-word-component-names\n      name: 'Inner',\n      beforeCreate () { this.$createElement = h; },\n      template: `<div>${ctx.props.html}</div>`,\n    }).$mount()._vnode.children;\n  },\n};\n\nexport const flushPromises = () => {\n  return new Promise((resolve) => {\n    scheduler(resolve);\n  });\n};\n\n/**\n * Transform a string from kebab-case to PascalCase\n * @param string\n * @returns {string}\n */\nexport const kebabCaseToPascalCase = (string) => {\n  return string?.toLowerCase()\n    .split('-')\n    .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n    .join('');\n};\n\n/**\n * Transform a string from PascalCase to kebab-case\n * @param string\n * @returns {string}\n */\nexport const pascalCaseToKebabCase = (string) => {\n  return string\n    .replace(/\\.?([A-Z0-9]+)/g, (x, y) => '-' + y.toLowerCase())\n    .replace(/^-/, '');\n};\n\n/*\n* Set's a global timer to debounce the execution of a function.\n* @param { object } func - the function that is going to be called after timeout\n* @param { number } [timeout=300] timeout\n* */\nexport function debounce (func, timeout = 300) {\n  clearTimeout(TIMER);\n  TIMER = setTimeout(func, timeout);\n}\n\n/**\n * Checks if the element is out of the viewport\n * https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/\n * @param  {HTMLElement} element The element to check\n * @return {Object} A set of booleans for each side of the element\n */\n\nexport function isOutOfViewPort (element) {\n  const bounding = element.getBoundingClientRect();\n\n  const isOut = {\n    top: bounding.top < 0,\n    left: bounding.left < 0,\n    bottom: bounding.bottom > (window.innerHeight || document.documentElement.clientHeight),\n    right: bounding.right > (window.innerWidth || document.documentElement.clientWidth),\n  };\n  isOut.any = Object.values(isOut).some(val => val);\n  isOut.all = Object.values(isOut).every(val => val);\n  return isOut;\n}\n\n// match valid characters for a domain name followed by a dot, e.g. \"dialpad.\"\nconst domainNameRegex = /(?:(?:[^\\s!@#$%^&*()_=+[\\]{}\\\\|;:'\",.<>/?]+)\\.)/;\n\n// match valid TLDs for a hostname (outdated list from ~2017)\nconst tldRegerx = new RegExp(\n  '(?:' +\n  'com|ru|org|net|de|jp|uk|br|it|pl|fr|in|au|ir|info|nl|cn|es|cz|kr|ca|eu|ua|co|gr|' +\n  'za|ro|biz|ch|se|tw|mx|vn|hu|be|tr|at|dk|tv|me|ar|sk|no|us|fi|id|cl|xyz|io|pt|by|' +\n  'il|ie|nz|kz|hk|lt|cc|my|sg|club|bg|edu|рф|pk|su|top|th|hr|rs|pe|pro|si|az|lv|pw|' +\n  'ae|ph|online|ng|ee|ws|ve|cat' +\n  ')',\n);\n\n// match valid IPv4 addresses, e.g. \"192.158.1.38\"\nconst ipv4Regex = new RegExp(\n  '(?:(?:[0-9]|[1-9]\\\\d|1\\\\d{2}|2[0-4]\\\\d|25[0-5])\\\\.){3}' +\n  '(?:[0-9]|[1-9]\\\\d|1\\\\d{2}|2[0-4]\\\\d|25[0-5])',\n);\n\n// match hostnames OR IPv4 addresses, e.g. \"dialpad.com\" or \"192.158.1.38\"\nconst hostnameOrIpRegex = new RegExp(\n  '(?:' +\n  [\n    [\n      domainNameRegex.source,\n      tldRegerx.source,\n    ].join('+'),\n    ipv4Regex.source,\n  ].join('|') +\n  ')',\n);\n\n// match URL paths, e.g. \"/news\"\nconst urlPathRegex = /(?:(?:[;/][^#?<>\\s]*)?)/;\n\n// match URL queries and fragments, e.g. \"?cache=1&new=true\" or \"#heading1\"\nconst urlQueryOrFragmentRegex = /(?:(?:\\?[^#<>\\s]+)?(?:#[^<>\\s]+)?)/;\n\n// match complete hostnames or IPv4 addresses without a protocol and with optional\n// URL paths, queries and fragments e.g. \"dialpad.com/news?cache=1#heading1\"\nconst urlWithoutProtocolRegex = new RegExp(\n  '\\\\b' +\n  [\n    hostnameOrIpRegex.source,\n    urlPathRegex.source,\n    urlQueryOrFragmentRegex.source,\n    '(?!\\\\w)',\n  ].join('+'),\n);\n\n// match complete hostnames with protocols and optional URL paths, queries and fragments,\n// e.g. \"ws://localhost:9010\" or \"https://dialpad.com/news?cache=1#heading1\"\nconst urlWithProtocolRegex = /\\b[a-z\\d.-]+:\\/\\/[^<>\\s]+/;\n\n// match email addresses with an optional \"mailto:\" prefix and URL queries, e.g.\n// \"hey@dialpad.com\" or \"mailto:hey@dialpad.com?subject=Hi&body=Hey%20there\"\nconst emailAddressRegex = new RegExp(\n  '(?:mailto:)?' +\n  '[a-z0-9!#$%&\\'*+/=?^_`{|}~-]+(?:\\\\.[a-z0-9!#$%&\\'*+/=?^_`{|}~-]+)*@' +\n  [\n    hostnameOrIpRegex.source,\n    urlQueryOrFragmentRegex.source,\n  ].join('+') +\n  '(?!\\\\w)',\n);\n\n/**\n * Match phone numbers, e.g. \"765-8813\", \"(778) 765-8813\" or \"+17787658813\".\n * @param {number} minLength\n * @param {number} maxLength\n * @returns {RegExp}\n */\nexport function getPhoneNumberRegex (minLength = 7, maxLength = 15) {\n  // Some older browser versions don't support lookbehind, so provide a RegExp\n  // version without it. It fails just one test case, so IMO it's still good\n  // enough to use. https://caniuse.com/js-regexp-lookbehind\n  let canUseLookBehind = true;\n  try {\n    // eslint-disable-next-line prefer-regex-literals\n    RegExp('(?<=\\\\W)');\n  } catch (e) {\n    canUseLookBehind = false;\n  }\n  return new RegExp(\n    `${canUseLookBehind ? '(?:^|(?<=\\\\W))' : ''}` +\n    '(?![\\\\s\\\\-])\\\\+?(?:[0-9()\\\\- \\\\t]' +\n    `{${minLength},${maxLength}}` +\n    ')(?=\\\\b)(?=\\\\W(?=\\\\W|$)|\\\\s|$)',\n  );\n}\n\nconst phoneNumberRegex = getPhoneNumberRegex();\n\n// match all link types\nexport const linkRegex = new RegExp(\n  [\n    urlWithoutProtocolRegex.source,\n    urlWithProtocolRegex.source,\n    emailAddressRegex.source,\n    phoneNumberRegex.source,\n  ].join('|'),\n  'gi',\n);\n\n/**\n * Check if a string is a phone number. Validates only exact matches.\n * @param {string|number} input\n * @returns {boolean}\n */\nexport function isPhoneNumber (input) {\n  if (!input || (!['string', 'number'].includes(typeof input))) return false;\n  input = input.toString();\n  return phoneNumberRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Check if a string is an URL. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n */\nexport function isURL (input) {\n  if (!input || typeof input !== 'string') return false;\n  return urlWithoutProtocolRegex.exec(input)?.[0] === input ||\n    urlWithProtocolRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Check if a string is an email address. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n */\nexport function isEmailAddress (input) {\n  if (!input || typeof input !== 'string') return false;\n  return emailAddressRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Concatenate a string removing null or undefined elements\n * avoiding parsing them as string with template strings\n * @param {Array} elements\n * @returns {String}\n */\nexport function safeConcatStrings (elements) {\n  return elements.filter(str => !!str).join(' ');\n}\n\n/**\n * Locale safe function to capitalize the first letter of a string.\n * @param {string} str the string to capitalize the first letter of\n * @param {string} locale a string representing the locale to be used. Defaults to 'en-US'\n * @returns The passed in string with the first letter capitalized\n */\nexport function capitalizeFirstLetter (str, locale = 'en-US') {\n  return str.replace(/^\\p{CWU}/u, char => char.toLocaleUpperCase(locale));\n}\n\nexport default {\n  getUniqueString,\n  getRandomElement,\n  getRandomInt,\n  formatMessages,\n  filterFormattedMessages,\n  hasFormattedMessageOfType,\n  getValidationState,\n  htmlFragment,\n  flushPromises,\n  kebabCaseToPascalCase,\n  debounce,\n  isOutOfViewPort,\n  getPhoneNumberRegex,\n  linkRegex,\n  isEmailAddress,\n  isPhoneNumber,\n  isURL,\n  safeConcatStrings,\n  capitalizeFirstLetter,\n};\n"],"names":["UNIQUE_ID_COUNTER","TIMER","FOCUSABLE_SELECTOR_NOT_HIDDEN","FOCUSABLE_SELECTOR_NOT_DISABLED","FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED","FOCUSABLE_SELECTOR","scheduler","getUniqueString","prefix","DEFAULT_PREFIX","getRandomElement","array","seed","hash","javaHashCode","getRandomInt","str","h","i","max","formatMessages","messages","message","DEFAULT_VALIDATION_MESSAGE_TYPE","filterFormattedMessages","formattedMessages","validationState","getValidationState","hasFormattedMessageOfType","VALIDATION_MESSAGE_TYPES","messageType","findFirstFocusableNode","element","htmlFragment","ctx","Vue","flushPromises","resolve","kebabCaseToPascalCase","string","word","pascalCaseToKebabCase","x","y","debounce","func","timeout","isOutOfViewPort","bounding","isOut","val","domainNameRegex","tldRegerx","ipv4Regex","hostnameOrIpRegex","urlPathRegex","urlQueryOrFragmentRegex","urlWithoutProtocolRegex","urlWithProtocolRegex","emailAddressRegex","getPhoneNumberRegex","minLength","maxLength","phoneNumberRegex","linkRegex","isPhoneNumber","input","_a","isURL","_b","isEmailAddress","safeConcatStrings","elements","capitalizeFirstLetter","locale","char","utils"],"mappings":";;AAOA,IAAIA,IAAoB,GACpBC;AAGJ,MAAMC,IAAgC,2CAEhCC,IAAkC,uEAElCC,IAAyC,GAAGF,CAA6B,IAAIC,CAA+B,IAE5GE,IAAqB,kBAAkBD,CAAsC,gBAE7EE,IAAY,OAAO,gBAAiB,aAAa,eAAe;AAE/D,SAASC,EAAiBC,IAASC,GAAgB;AACxD,SAAO,GAAGD,CAAM,GAAGR,GAAmB;AACxC;AASO,SAASU,EAAkBC,GAAOC,GAAM;AAC7C,MAAIA,GAAM;AACR,UAAMC,IAAOC,EAAaF,CAAI;AAC9B,WAAOD,EAAM,KAAK,IAAIE,CAAI,IAAIF,EAAM,MAAM;AAAA,EAC9C;AACI,WAAOA,EAAMI,EAAaJ,EAAM,MAAM,CAAC;AAE3C;AAiBO,SAASG,EAAcE,GAAK;AACjC,MAAIC;AACJ,WAASC,IAAI,GAAGA,IAAIF,EAAI,QAAQE;AAC9B,IAAAD,IAAI,KAAK,KAAK,IAAIA,CAAC,IAAID,EAAI,WAAWE,CAAC,IAAI;AAG7C,SAAOD;AACT;AAOO,SAASF,EAAcI,GAAK;AACjC,SAAO,KAAK,MAAM,KAAK,OAAQ,IAAGA,CAAG;AACvC;AAEO,SAASC,EAAgBC,GAAU;AACxC,SAAKA,IAIEA,EAAS,IAAI,CAAAC,MACd,OAAOA,KAAY,WACd;AAAA,IACL,SAAAA;AAAA,IACA,MAAMC;AAAA,EACd,IAGWD,CACR,IAZQ;AAaX;AAEO,SAASE,EAAyBC,GAAmB;AAC1D,QAAMC,IAAkBC,EAAmBF,CAAiB;AAE5D,SAAI,CAACA,KAAqB,CAACC,IAClB,KAGFD,EAAkB,OAAO,CAAAH,MAAW,CAAC,CAACA,EAAQ,WAAWA,EAAQ,SAASI,CAAe;AAClG;AAOO,SAASC,EAAoBF,GAAmB;AACrD,SAAKA,IAIDG,EAA0BH,GAAmBI,EAAyB,KAAK,IACtEA,EAAyB,QAE9BD,EAA0BH,GAAmBI,EAAyB,OAAO,IACxEA,EAAyB,UAE9BD,EAA0BH,GAAmBI,EAAyB,OAAO,IACxEA,EAAyB,UAG3B,OAbE;AAcX;AAEO,SAASD,EAA2BH,GAAmBK,GAAa;AACzE,SAAI,CAACL,KAAqB,CAACK,IAClB,KAGFL,EAAkB,KAAK,CAAAH,OAAWA,KAAA,gBAAAA,EAAS,UAASQ,CAAW;AACxE;AAEO,SAASC,EAAwBC,GAAS;AAC/C,SAAOA,KAAA,gBAAAA,EAAS,cAAc3B;AAChC;AAMY,MAAC4B,IAAe;AAAA,EAC1B,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,OAAO,CAAC,MAAM;AAAA,EACd,OAAQhB,GAAGiB,GAAK;AACd,WAAO,IAAIC,EAAI;AAAA;AAAA,MAEb,MAAM;AAAA,MACN,eAAgB;AAAE,aAAK,iBAAiBlB;AAAA,MAAI;AAAA,MAC5C,UAAU,QAAQiB,EAAI,MAAM,IAAI;AAAA,IACjC,CAAA,EAAE,OAAM,EAAG,OAAO;AAAA,EACpB;AACH,GAEaE,IAAgB,MACpB,IAAI,QAAQ,CAACC,MAAY;AAC9B,EAAA/B,EAAU+B,CAAO;AACrB,CAAG,GAQUC,IAAwB,CAACC,MAC7BA,KAAA,gBAAAA,EAAQ,cACZ,MAAM,KACN,IAAI,CAAAC,MAAQA,EAAK,OAAO,CAAC,EAAE,YAAW,IAAKA,EAAK,MAAM,CAAC,GACvD,KAAK,KAQGC,IAAwB,CAACF,MAC7BA,EACJ,QAAQ,mBAAmB,CAACG,GAAGC,MAAM,MAAMA,EAAE,aAAa,EAC1D,QAAQ,MAAM,EAAE;AAQd,SAASC,EAAUC,GAAMC,IAAU,KAAK;AAC7C,eAAa7C,CAAK,GAClBA,IAAQ,WAAW4C,GAAMC,CAAO;AAClC;AASO,SAASC,EAAiBf,GAAS;AACxC,QAAMgB,IAAWhB,EAAQ,yBAEnBiB,IAAQ;AAAA,IACZ,KAAKD,EAAS,MAAM;AAAA,IACpB,MAAMA,EAAS,OAAO;AAAA,IACtB,QAAQA,EAAS,UAAU,OAAO,eAAe,SAAS,gBAAgB;AAAA,IAC1E,OAAOA,EAAS,SAAS,OAAO,cAAc,SAAS,gBAAgB;AAAA,EAC3E;AACE,SAAAC,EAAM,MAAM,OAAO,OAAOA,CAAK,EAAE,KAAK,CAAAC,MAAOA,CAAG,GAChDD,EAAM,MAAM,OAAO,OAAOA,CAAK,EAAE,MAAM,CAAAC,MAAOA,CAAG,GAC1CD;AACT;AAGA,MAAME,IAAkB,mDAGlBC,IAAY,IAAI;AAAA,EACpB;AAMF,GAGMC,IAAY,IAAI;AAAA,EACpB;AAEF,GAGMC,IAAoB,IAAI;AAAA,EAC5B,QACA;AAAA,IACE;AAAA,MACEH,EAAgB;AAAA,MAChBC,EAAU;AAAA,IAChB,EAAM,KAAK,GAAG;AAAA,IACVC,EAAU;AAAA,EACd,EAAI,KAAK,GAAG,IACV;AACF,GAGME,IAAe,2BAGfC,IAA0B,sCAI1BC,IAA0B,IAAI;AAAA,EAClC,QACA;AAAA,IACEH,EAAkB;AAAA,IAClBC,EAAa;AAAA,IACbC,EAAwB;AAAA,IACxB;AAAA,EACJ,EAAI,KAAK,GAAG;AACZ,GAIME,IAAuB,6BAIvBC,IAAoB,IAAI;AAAA,EAC5B,kFAEA;AAAA,IACEL,EAAkB;AAAA,IAClBE,EAAwB;AAAA,EAC5B,EAAI,KAAK,GAAG,IACV;AACF;AAQO,SAASI,EAAqBC,IAAY,GAAGC,IAAY,IAAI;AAWlE,SAAO,IAAI;AAAA,IACT,mDAEID,CAAS,IAAIC,CAAS;AAAA,EAE9B;AACA;AAEA,MAAMC,IAAmBH,EAAmB,GAG/BI,IAAY,IAAI;AAAA,EAC3B;AAAA,IACEP,EAAwB;AAAA,IACxBC,EAAqB;AAAA,IACrBC,EAAkB;AAAA,IAClBI,EAAiB;AAAA,EACrB,EAAI,KAAK,GAAG;AAAA,EACV;AACF;AAOO,SAASE,EAAeC,GAAO;;AACpC,SAAI,CAACA,KAAU,CAAC,CAAC,UAAU,QAAQ,EAAE,SAAS,OAAOA,CAAK,IAAW,MACrEA,IAAQA,EAAM,cACPC,IAAAJ,EAAiB,KAAKG,CAAK,MAA3B,gBAAAC,EAA+B,QAAOD;AAC/C;AAOO,SAASE,EAAOF,GAAO;;AAC5B,SAAI,CAACA,KAAS,OAAOA,KAAU,WAAiB,OACzCC,IAAAV,EAAwB,KAAKS,CAAK,MAAlC,gBAAAC,EAAsC,QAAOD,OAClDG,IAAAX,EAAqB,KAAKQ,CAAK,MAA/B,gBAAAG,EAAmC,QAAOH;AAC9C;AAOO,SAASI,EAAgBJ,GAAO;;AACrC,SAAI,CAACA,KAAS,OAAOA,KAAU,WAAiB,OACzCC,IAAAR,EAAkB,KAAKO,CAAK,MAA5B,gBAAAC,EAAgC,QAAOD;AAChD;AAQO,SAASK,EAAmBC,GAAU;AAC3C,SAAOA,EAAS,OAAO,CAAAxD,MAAO,CAAC,CAACA,CAAG,EAAE,KAAK,GAAG;AAC/C;AAQO,SAASyD,EAAuBzD,GAAK0D,IAAS,SAAS;AAC5D,SAAO1D,EAAI,QAAQ,2BAAW,GAAE,CAAA2D,MAAQA,EAAK,kBAAkBD,CAAM,CAAC;AACxE;AAEA,MAAeE,IAAA;AAAA,EACb,iBAAArE;AAAA,EACA,kBAAAG;AAAA,EACA,cAAAK;AAAA,EACA,gBAAAK;AAAA,EACA,yBAAAI;AAAA,EACA,2BAAAI;AAAA,EACA,oBAAAD;AAAA,EACA,cAAAM;AAAA,EACA,eAAAG;AAAA,EACA,uBAAAE;AAAA,EACA,UAAAM;AAAA,EACA,iBAAAG;AAAA,EACA,qBAAAa;AAAA,EACA,WAAAI;AAAA,EACA,gBAAAM;AAAA,EACA,eAAAL;AAAA,EACA,OAAAG;AAAA,EACA,mBAAAG;AAAA,EACA,uBAAAE;AACF;"}

package/dist/lib/validation-messages.js

@@ -0,0 +1,83 @@
+import { validationMessageValidator as r } from "./validators.js";
+import { getUniqueString as o, filterFormattedMessages as l, getValidationState as d } from "./utils.js";
+import { n as g } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import "./constants.js";
+import "vue";
+const m = {
+  name: "DtValidationMessages",
+  props: {
+    /**
+     * The id of the validation message
+     */
+    id: {
+      type: String,
+      default() {
+        return o();
+      }
+    },
+    /**
+     * Array of validation messages. Each message has the following structure:
+     * `{ message: "Some informative message", type: "error|warning|success"}`
+     */
+    validationMessages: {
+      type: Array,
+      default: () => [],
+      validator: (s) => r(s)
+    },
+    /**
+     * Show Validation messages
+     * @values true, false
+     */
+    showMessages: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  computed: {
+    isFilteredValidationMessagesEmpty() {
+      return this.filteredValidationMessages.length === 0;
+    },
+    filteredValidationMessages() {
+      return l(this.validationMessages);
+    },
+    validationState() {
+      return d(this.validationMessages);
+    }
+  },
+  methods: {
+    getMessageKey(s, e) {
+      return `validation-message-${s}-${e}-${this.id}`;
+    },
+    messageTypeClass(s) {
+      return {
+        error: "base-input__message--error d-validation-message--error",
+        warning: "base-input__message--warning d-validation-message--warning",
+        success: "base-input__message--success d-validation-message--success"
+      }[s];
+    }
+  }
+};
+var u = function() {
+  var e = this, a = e._self._c;
+  return e.showMessages && !e.isFilteredValidationMessagesEmpty ? a("div", { staticClass: "base-input__messages d-validation-message__container", attrs: { "data-qa": "validation-messages-container" } }, e._l(e.filteredValidationMessages, function({ message: i, type: t }, n) {
+    return a("div", { key: e.getMessageKey(t, n), class: [
+      "base-input__message",
+      "d-validation-message",
+      e.messageTypeClass(t)
+    ], attrs: { role: "status", "aria-live": "polite", "data-qa": "validation-message" } }, [a("p", { domProps: { innerHTML: e._s(i) } })]);
+  }), 0) : e._e();
+}, _ = [], p = /* @__PURE__ */ g(
+  m,
+  u,
+  _,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const h = p.exports;
+export {
+  h as DtValidationMessages
+};
+//# sourceMappingURL=validation-messages.js.map

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

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

package/dist/lib/validators.js

@@ -0,0 +1,12 @@
+import { VALIDATION_MESSAGE_TYPES as n } from "./constants.js";
+function i(r) {
+  return r ? r.every((t) => typeof t == "string" ? !0 : typeof t == "object" ? Object.values(n).includes(t == null ? void 0 : t.type) : !1) : !0;
+}
+const o = {
+  validationMessageValidator: i
+};
+export {
+  o as default,
+  i as validationMessageValidator
+};
+//# sourceMappingURL=validators.js.map

package/dist/lib/validators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.js","sources":["../../common/validators/index.js"],"sourcesContent":["import {\n  VALIDATION_MESSAGE_TYPES,\n} from '../constants';\n\nexport function validationMessageValidator (rawMessages) {\n  if (!rawMessages) {\n    return true;\n  }\n\n  return rawMessages.every(message => {\n    if (typeof message === 'string') {\n      return true;\n    }\n\n    if (typeof message === 'object') {\n      return Object.values(VALIDATION_MESSAGE_TYPES).includes(message?.type);\n    }\n\n    return false;\n  });\n}\n\nexport default {\n  validationMessageValidator,\n};\n"],"names":["validationMessageValidator","rawMessages","message","VALIDATION_MESSAGE_TYPES","index"],"mappings":";AAIO,SAASA,EAA4BC,GAAa;AACvD,SAAKA,IAIEA,EAAY,MAAM,CAAAC,MACnB,OAAOA,KAAY,WACd,KAGL,OAAOA,KAAY,WACd,OAAO,OAAOC,CAAwB,EAAE,SAASD,KAAA,gBAAAA,EAAS,IAAI,IAGhE,EACR,IAbQ;AAcX;AAEA,MAAeE,IAAA;AAAA,EACb,4BAAAJ;AACF;"}