@dialpad/dialtone-vue 2.126.0 → 2.127.1

package/dist/lib/combobox-with-popover.js

@@ -1,43 +1,43 @@
-import { D as p, C as u, a as d, L as f } from "../chunks/index-nIyl_PL6.js";
-import { getUniqueString as l } from "./utils.js";
-import { a as m } from "../chunks/sr_only_close_button-JGole5Xi.js";
-import { n as h } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { DtPopover as c } from "./popover.js";
-import { D as a } from "../chunks/dropdown_constants-EUcDxBrX.js";
-import { c as y, e as b } from "../chunks/popover_constants-qjlEkroB.js";
-import "../chunks/keyboard_list_navigation-F0O8nht0.js";
+import { DtCombobox, ComboboxLoadingList, ComboboxEmptyList, LABEL_SIZES } from "../chunks/index-DUr1xHR0.js";
+import { getUniqueString } from "../common/utils.js";
+import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-81bHIpPu.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtPopover } from "./popover.js";
+import { DROPDOWN_PADDING_CLASSES } from "../chunks/dropdown_constants-w1MXGC3Z.js";
+import { POPOVER_CONTENT_WIDTHS, POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-Qkpb0yh2.js";
+import "../chunks/keyboard_list_navigation-ScXhrxya.js";
 import "./list-item.js";
-import "../chunks/list_item_constants-LTUc74pD.js";
+import "../chunks/list_item_constants-u1xcN9Dd.js";
 import "./item-layout.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
-import "./constants.js";
+import "../common/constants.js";
 import "vue";
+import "./skeleton.js";
 import "./button.js";
-import "../chunks/link_constants-vIUB92L4.js";
+import "../chunks/link_constants-nWVlXQBs.js";
 import "@linusborg/vue-simple-portal";
-import "../chunks/modal-VuMFkZFH.js";
+import "../chunks/modal-XOr4kiNZ.js";
 import "./lazy-show.js";
 import "tippy.js";
-const g = {
+const _sfc_main = {
   name: "DtRecipeComboboxWithPopover",
   components: {
-    DtCombobox: p,
-    DtPopover: c,
-    ComboboxLoadingList: u,
-    ComboboxEmptyList: d
+    DtCombobox,
+    DtPopover,
+    ComboboxLoadingList,
+    ComboboxEmptyList
   },
-  mixins: [m],
+  mixins: [SrOnlyCloseButtonMixin],
   props: {
     /**
      * String to use for the input label.
      */
     label: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Determines visibility of input label.
@@ -45,7 +45,7 @@ const g = {
      */
     labelVisible: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
@@ -54,7 +54,7 @@ const g = {
     size: {
       type: String,
       default: null,
-      validator: (e) => Object.values(f).includes(e)
+      validator: (t) => Object.values(LABEL_SIZES).includes(t)
     },
     /**
      * Description for the input
@@ -80,7 +80,7 @@ const g = {
     listId: {
       type: String,
       default() {
-        return l();
+        return getUniqueString();
       }
     },
     /**
@@ -126,7 +126,9 @@ const g = {
     padding: {
       type: String,
       default: "small",
-      validator: (e) => Object.keys(a).some((t) => t === e)
+      validator: (padding) => {
+        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);
+      }
     },
     /**
      * Width configuration for the popover content. When its value is 'anchor',
@@ -135,7 +137,7 @@ const g = {
     contentWidth: {
       type: String,
       default: null,
-      validator: (e) => y.includes(e)
+      validator: (contentWidth) => POPOVER_CONTENT_WIDTHS.includes(contentWidth)
     },
     /**
      * If the list should be shown by pressing up or down arrow key on the input element.
@@ -143,7 +145,7 @@ const g = {
      */
     openWithArrowKeys: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      *  Displaces the popover content box from its anchor element
@@ -158,7 +160,7 @@ const g = {
      */
     popoverSticky: {
       type: [Boolean, String],
-      default: !1
+      default: false
     },
     /**
      * Displays the list when the combobox is focused, before the user has typed anything.
@@ -166,21 +168,21 @@ const g = {
      */
     hasSuggestionList: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Determines when to show the skeletons and also controls aria-busy attribute.
      */
     loading: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
      */
     emptyList: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Message to show when the list is empty
@@ -197,7 +199,9 @@ const g = {
     appendTo: {
       type: [HTMLElement, String],
       default: "body",
-      validator: (e) => b.includes(e) || e instanceof HTMLElement
+      validator: (appendTo) => {
+        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
+      }
     },
     /**
      * Named transition when the content display is toggled.
@@ -239,11 +243,11 @@ const g = {
   ],
   data() {
     return {
-      DROPDOWN_PADDING_CLASSES: a,
-      isListShown: !1,
-      isInputFocused: !1,
-      isListFocused: !1,
-      externalAnchor: l()
+      DROPDOWN_PADDING_CLASSES,
+      isListShown: false,
+      isInputFocused: false,
+      isListFocused: false,
+      externalAnchor: getUniqueString()
     };
   },
   computed: {
@@ -258,84 +262,124 @@ const g = {
   },
   watch: {
     showList: {
-      handler: function(e) {
-        e !== null && (this.isListShown = e);
+      handler: function(show) {
+        if (show !== null) {
+          this.isListShown = show;
+        }
       },
-      immediate: !0
+      immediate: true
     },
-    isListShown(e) {
-      e ? window.addEventListener("mousedown", this.onFocusOut) : window.removeEventListener("mousedown", this.onFocusOut), this.onOpened(e);
+    isListShown(val) {
+      if (val) {
+        window.addEventListener("mousedown", this.onFocusOut);
+      } else {
+        window.removeEventListener("mousedown", this.onFocusOut);
+      }
+      this.onOpened(val);
     }
   },
   methods: {
-    handleDisplayList(e) {
-      !this.hasSuggestionList && e && this.showComboboxList(), !this.hasSuggestionList && !e && this.closeComboboxList();
+    handleDisplayList(value) {
+      if (!this.hasSuggestionList && value) {
+        this.showComboboxList();
+      }
+      if (!this.hasSuggestionList && !value) {
+        this.closeComboboxList();
+      }
     },
     showComboboxList() {
-      this.showList == null && (this.isListShown = !0);
+      if (this.showList != null) {
+        return;
+      }
+      this.isListShown = true;
     },
     closeComboboxList() {
-      this.showList == null && (this.isListShown = !1);
+      if (this.showList != null) {
+        return;
+      }
+      this.isListShown = false;
     },
-    onSelect(e) {
-      this.loading || (this.$emit("select", e), this.hasSuggestionList || this.closeComboboxList());
+    onSelect(highlightIndex) {
+      if (this.loading)
+        return;
+      this.$emit("select", highlightIndex);
+      if (!this.hasSuggestionList) {
+        this.closeComboboxList();
+      }
     },
     onEscape() {
-      this.$emit("escape"), this.closeComboboxList();
+      this.$emit("escape");
+      this.closeComboboxList();
     },
-    onHighlight(e) {
-      this.loading || this.$emit("highlight", e);
+    onHighlight(highlightIndex) {
+      if (this.loading)
+        return;
+      this.$emit("highlight", highlightIndex);
     },
-    onOpened(e) {
-      this.$emit("opened", e);
+    onOpened(opened) {
+      this.$emit("opened", opened);
     },
     onFocusIn(e) {
-      var t;
-      this.hasSuggestionList && e && ((t = this.$refs.input) == null ? void 0 : t.querySelector("input")) === e.target && this.showComboboxList();
+      var _a;
+      if (this.hasSuggestionList && e && ((_a = this.$refs.input) == null ? void 0 : _a.querySelector("input")) === e.target) {
+        this.showComboboxList();
+      }
     },
     onFocusOut(e) {
-      var s, o, n;
-      const t = (o = (s = this.$refs.popover) == null ? void 0 : s.tip) == null ? void 0 : o.popper, i = this.$refs.input;
-      (n = e.composedPath()) != null && n.some((r) => [t, i].includes(r)) || this.closeComboboxList();
+      var _a, _b, _c;
+      const popoverEl = (_b = (_a = this.$refs.popover) == null ? void 0 : _a.tip) == null ? void 0 : _b.popper;
+      const comboboxEl = this.$refs.input;
+      if ((_c = e.composedPath()) == null ? void 0 : _c.some((el) => [popoverEl, comboboxEl].includes(el)))
+        return;
+      this.closeComboboxList();
     },
     openOnArrowKeyPress() {
-      this.showList !== null || this.isListShown || !this.openWithArrowKeys || this.showComboboxList();
+      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) {
+        return;
+      }
+      this.showComboboxList();
     }
   }
 };
-var L = function() {
-  var t = this, i = t._self._c;
-  return i("dt-combobox", t._g({ ref: "combobox", attrs: { loading: t.loading, label: t.label, "label-visible": t.labelVisible, size: t.size, description: t.description, "empty-list": t.emptyList, "empty-state-message": t.emptyStateMessage, "show-list": t.isListShown, "on-beginning-of-list": t.onBeginningOfList, "on-end-of-list": t.onEndOfList, "list-rendered-outside": !0, "list-id": t.listId, "data-qa": "dt-combobox" }, scopedSlots: t._u([{ key: "input", fn: function({ inputProps: s }) {
-    return [i("div", { ref: "input", attrs: { id: t.externalAnchor }, on: { focusin: t.onFocusIn, keydown: [function(o) {
-      return !o.type.indexOf("key") && t._k(o.keyCode, "up", 38, o.key, ["Up", "ArrowUp"]) ? null : t.openOnArrowKeyPress(o);
-    }, function(o) {
-      return !o.type.indexOf("key") && t._k(o.keyCode, "down", 40, o.key, ["Down", "ArrowDown"]) ? null : t.openOnArrowKeyPress(o);
-    }] } }, [t._t("input", null, { inputProps: s, onInput: t.handleDisplayList })], 2)];
-  } }, { key: "list", fn: function({ opened: s, listProps: o, clearHighlightIndex: n }) {
-    return [i("dt-popover", { ref: "popover", attrs: { open: t.isListShown, "hide-on-click": !1, "max-height": t.maxHeight, "max-width": t.maxWidth, offset: t.popoverOffset, sticky: t.popoverSticky, placement: "bottom-start", "initial-focus-element": "none", padding: "none", role: "listbox", "external-anchor": t.externalAnchor, "content-width": t.contentWidth, "content-appear": !0, "content-tabindex": null, modal: !1, "auto-focus": !1, "append-to": t.appendTo, transition: t.transition, "visually-hidden-close-label": t.visuallyHiddenCloseLabel, "visually-hidden-close": t.visuallyHiddenClose }, on: { "update:open": function(r) {
-      t.isListShown = r;
-    }, opened: function(r) {
-      return s(r, arguments[1]);
-    } }, scopedSlots: t._u([t.$slots.header ? { key: "headerContent", fn: function() {
-      return [i("div", { ref: "header" }, [t._t("header")], 2)];
-    }, proxy: !0 } : null, { key: "content", fn: function() {
-      return [i("div", { ref: "listWrapper", class: [t.DROPDOWN_PADDING_CLASSES[t.padding], t.listClass], on: { mouseleave: n, focusout: n } }, [t.loading ? i("combobox-loading-list", t._b({}, "combobox-loading-list", o, !1)) : t.emptyList && t.emptyStateMessage ? i("combobox-empty-list", t._b({ attrs: { message: t.emptyStateMessage } }, "combobox-empty-list", o, !1)) : t._t("list", null, { listProps: o })], 2)];
-    }, proxy: !0 }, t.$slots.footer ? { key: "footerContent", fn: function() {
-      return [i("div", { ref: "footer" }, [t._t("footer")], 2)];
-    }, proxy: !0 } : null], null, !0) })];
-  } }], null, !0) }, t.comboboxListeners));
-}, S = [], x = /* @__PURE__ */ h(
-  g,
-  L,
-  S,
-  !1,
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-combobox", _vm._g({ ref: "combobox", attrs: { "loading": _vm.loading, "label": _vm.label, "label-visible": _vm.labelVisible, "size": _vm.size, "description": _vm.description, "empty-list": _vm.emptyList, "empty-state-message": _vm.emptyStateMessage, "show-list": _vm.isListShown, "on-beginning-of-list": _vm.onBeginningOfList, "on-end-of-list": _vm.onEndOfList, "list-rendered-outside": true, "list-id": _vm.listId, "data-qa": "dt-combobox" }, scopedSlots: _vm._u([{ key: "input", fn: function({ inputProps }) {
+    return [_c("div", { ref: "input", attrs: { "id": _vm.externalAnchor }, on: { "focusin": _vm.onFocusIn, "keydown": [function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
+        return null;
+      return _vm.openOnArrowKeyPress($event);
+    }, function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
+        return null;
+      return _vm.openOnArrowKeyPress($event);
+    }] } }, [_vm._t("input", null, { "inputProps": inputProps, "onInput": _vm.handleDisplayList })], 2)];
+  } }, { key: "list", fn: function({ opened, listProps, clearHighlightIndex }) {
+    return [_c("dt-popover", { ref: "popover", attrs: { "open": _vm.isListShown, "hide-on-click": false, "max-height": _vm.maxHeight, "max-width": _vm.maxWidth, "offset": _vm.popoverOffset, "sticky": _vm.popoverSticky, "placement": "bottom-start", "initial-focus-element": "none", "padding": "none", "role": "listbox", "external-anchor": _vm.externalAnchor, "content-width": _vm.contentWidth, "content-appear": true, "content-tabindex": null, "modal": false, "auto-focus": false, "append-to": _vm.appendTo, "transition": _vm.transition, "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel, "visually-hidden-close": _vm.visuallyHiddenClose }, on: { "update:open": function($event) {
+      _vm.isListShown = $event;
+    }, "opened": function($event) {
+      return opened($event, arguments[1]);
+    } }, scopedSlots: _vm._u([_vm.$slots.header ? { key: "headerContent", fn: function() {
+      return [_c("div", { ref: "header" }, [_vm._t("header")], 2)];
+    }, proxy: true } : null, { key: "content", fn: function() {
+      return [_c("div", { ref: "listWrapper", class: [_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass], on: { "mouseleave": clearHighlightIndex, "focusout": clearHighlightIndex } }, [_vm.loading ? _c("combobox-loading-list", _vm._b({}, "combobox-loading-list", listProps, false)) : _vm.emptyList && _vm.emptyStateMessage ? _c("combobox-empty-list", _vm._b({ attrs: { "message": _vm.emptyStateMessage } }, "combobox-empty-list", listProps, false)) : _vm._t("list", null, { "listProps": listProps })], 2)];
+    }, proxy: true }, _vm.$slots.footer ? { key: "footerContent", fn: function() {
+      return [_c("div", { ref: "footer" }, [_vm._t("footer")], 2)];
+    }, proxy: true } : null], null, true) })];
+  } }], null, true) }, _vm.comboboxListeners));
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const $ = x.exports;
+const DtRecipeComboboxWithPopover = __component__.exports;
 export {
-  $ as DtRecipeComboboxWithPopover
+  DtRecipeComboboxWithPopover
 };
 //# sourceMappingURL=combobox-with-popover.js.map

package/dist/lib/combobox-with-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-with-popover.js","sources":["../../recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :label-visible=\"labelVisible\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-on=\"comboboxListeners\"\n  >\n    <template\n      #input=\"{ inputProps }\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"externalAnchor\"\n        ref=\"input\"\n        @focusin=\"onFocusIn\"\n        @keydown.up=\"openOnArrowKeyPress($event)\"\n        @keydown.down=\"openOnArrowKeyPress($event)\"\n      >\n        <slot\n          name=\"input\"\n          :input-props=\"inputProps\"\n          :on-input=\"handleDisplayList\"\n        />\n      </div>\n    </template>\n    <template #list=\"{ opened, listProps, clearHighlightIndex }\">\n      <dt-popover\n        ref=\"popover\"\n        :open.sync=\"isListShown\"\n        :hide-on-click=\"false\"\n        :max-height=\"maxHeight\"\n        :max-width=\"maxWidth\"\n        :offset=\"popoverOffset\"\n        :sticky=\"popoverSticky\"\n        placement=\"bottom-start\"\n        initial-focus-element=\"none\"\n        padding=\"none\"\n        role=\"listbox\"\n        :external-anchor=\"externalAnchor\"\n        :content-width=\"contentWidth\"\n        :content-appear=\"true\"\n        :content-tabindex=\"null\"\n        :modal=\"false\"\n        :auto-focus=\"false\"\n        :append-to=\"appendTo\"\n        :transition=\"transition\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        @opened=\"opened($event, arguments[1]);\"\n      >\n        <template\n          v-if=\"$slots.header\"\n          #headerContent\n        >\n          <div\n            ref=\"header\"\n          >\n            <slot name=\"header\" />\n          </div>\n        </template>\n\n        <template #content>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n          <div\n            ref=\"listWrapper\"\n            :class=\"[DROPDOWN_PADDING_CLASSES[padding], listClass]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"$slots.footer\"\n          #footerContent\n        >\n          <div\n            ref=\"footer\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </template>\n      </dt-popover>\n    </template>\n  </dt-combobox>\n</template>\n\n<script>\nimport ComboboxLoadingList from '@/components/combobox/combobox_loading-list.vue';\nimport ComboboxEmptyList from '@/components/combobox/combobox_empty-list.vue';\nimport { DtCombobox, LABEL_SIZES } from '@/components/combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/popover';\nimport { getUniqueString } from '@/common/utils';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/dropdown';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\nexport default {\n  name: 'DtRecipeComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * If the list should be shown by pressing up or down arrow key on the input element.\n     * This can be set when not passing showList prop.\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the popover content box from its anchor element\n     *  by the specified number of pixels.\n     */\n    popoverOffset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * If the popover sticks to the input.\n     */\n    popoverSticky: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\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     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when 'escape' key is pressed\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when an item is highlighted\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Emitted when items are shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      DROPDOWN_PADDING_CLASSES,\n      isListShown: false,\n      isInputFocused: false,\n      isListFocused: false,\n      externalAnchor: getUniqueString(),\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$listeners,\n\n        select: this.onSelect,\n\n        escape: this.onEscape,\n\n        highlight: this.onHighlight,\n      };\n    },\n  },\n\n  watch: {\n    showList: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isListShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isListShown (val) {\n      if (val) {\n        window.addEventListener('mousedown', this.onFocusOut);\n      } else {\n        window.removeEventListener('mousedown', this.onFocusOut);\n      }\n      this.onOpened(val);\n    },\n  },\n\n  methods: {\n    handleDisplayList (value) {\n      if (!this.hasSuggestionList && value) { this.showComboboxList(); }\n      if (!this.hasSuggestionList && !value) { this.closeComboboxList(); }\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = true;\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = false;\n    },\n\n    onSelect (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('select', highlightIndex);\n      if (!this.hasSuggestionList) {\n        // we don't display the list before the user has typed anything\n        this.closeComboboxList();\n      }\n    },\n\n    onEscape () {\n      this.$emit('escape');\n      this.closeComboboxList();\n    },\n\n    onHighlight (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('highlight', highlightIndex);\n    },\n\n    onOpened (opened) {\n      this.$emit('opened', opened);\n    },\n\n    onFocusIn (e) {\n      if (this.hasSuggestionList && e && this.$refs.input?.querySelector('input') === e.target) {\n        // only trigger if we show suggestion list when focused, and\n        // it's the input specifically that was focused\n        this.showComboboxList();\n      }\n    },\n\n    onFocusOut (e) {\n      // Check if the focus change was to another target within the combobox component\n      const popoverEl = this.$refs.popover?.tip?.popper;\n      const comboboxEl = this.$refs.input;\n\n      if (e.composedPath()?.some(el => [popoverEl, comboboxEl].includes(el))) return;\n\n      // If outside the combobox then close\n      this.closeComboboxList();\n    },\n\n    openOnArrowKeyPress () {\n      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) { return; }\n\n      this.showComboboxList();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtCombobox","DtPopover","ComboboxLoadingList","ComboboxEmptyList","SrOnlyCloseButtonMixin","t","LABEL_SIZES","getUniqueString","padding","DROPDOWN_PADDING_CLASSES","item","contentWidth","POPOVER_CONTENT_WIDTHS","appendTo","POPOVER_APPEND_TO_VALUES","show","val","value","highlightIndex","opened","_a","popoverEl","_b","comboboxEl","_c","el"],"mappings":"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"}
+{"version":3,"file":"combobox-with-popover.js","sources":["../../recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :label-visible=\"labelVisible\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-on=\"comboboxListeners\"\n  >\n    <template\n      #input=\"{ inputProps }\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"externalAnchor\"\n        ref=\"input\"\n        @focusin=\"onFocusIn\"\n        @keydown.up=\"openOnArrowKeyPress($event)\"\n        @keydown.down=\"openOnArrowKeyPress($event)\"\n      >\n        <slot\n          name=\"input\"\n          :input-props=\"inputProps\"\n          :on-input=\"handleDisplayList\"\n        />\n      </div>\n    </template>\n    <template #list=\"{ opened, listProps, clearHighlightIndex }\">\n      <dt-popover\n        ref=\"popover\"\n        :open.sync=\"isListShown\"\n        :hide-on-click=\"false\"\n        :max-height=\"maxHeight\"\n        :max-width=\"maxWidth\"\n        :offset=\"popoverOffset\"\n        :sticky=\"popoverSticky\"\n        placement=\"bottom-start\"\n        initial-focus-element=\"none\"\n        padding=\"none\"\n        role=\"listbox\"\n        :external-anchor=\"externalAnchor\"\n        :content-width=\"contentWidth\"\n        :content-appear=\"true\"\n        :content-tabindex=\"null\"\n        :modal=\"false\"\n        :auto-focus=\"false\"\n        :append-to=\"appendTo\"\n        :transition=\"transition\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        @opened=\"opened($event, arguments[1]);\"\n      >\n        <template\n          v-if=\"$slots.header\"\n          #headerContent\n        >\n          <div\n            ref=\"header\"\n          >\n            <slot name=\"header\" />\n          </div>\n        </template>\n\n        <template #content>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n          <div\n            ref=\"listWrapper\"\n            :class=\"[DROPDOWN_PADDING_CLASSES[padding], listClass]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"$slots.footer\"\n          #footerContent\n        >\n          <div\n            ref=\"footer\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </template>\n      </dt-popover>\n    </template>\n  </dt-combobox>\n</template>\n\n<script>\nimport ComboboxLoadingList from '@/components/combobox/combobox_loading-list.vue';\nimport ComboboxEmptyList from '@/components/combobox/combobox_empty-list.vue';\nimport { DtCombobox, LABEL_SIZES } from '@/components/combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/popover';\nimport { getUniqueString } from '@/common/utils';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/dropdown';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\nexport default {\n  name: 'DtRecipeComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * If the list should be shown by pressing up or down arrow key on the input element.\n     * This can be set when not passing showList prop.\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the popover content box from its anchor element\n     *  by the specified number of pixels.\n     */\n    popoverOffset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * If the popover sticks to the input.\n     */\n    popoverSticky: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\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     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when 'escape' key is pressed\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when an item is highlighted\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Emitted when items are shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      DROPDOWN_PADDING_CLASSES,\n      isListShown: false,\n      isInputFocused: false,\n      isListFocused: false,\n      externalAnchor: getUniqueString(),\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$listeners,\n\n        select: this.onSelect,\n\n        escape: this.onEscape,\n\n        highlight: this.onHighlight,\n      };\n    },\n  },\n\n  watch: {\n    showList: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isListShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isListShown (val) {\n      if (val) {\n        window.addEventListener('mousedown', this.onFocusOut);\n      } else {\n        window.removeEventListener('mousedown', this.onFocusOut);\n      }\n      this.onOpened(val);\n    },\n  },\n\n  methods: {\n    handleDisplayList (value) {\n      if (!this.hasSuggestionList && value) { this.showComboboxList(); }\n      if (!this.hasSuggestionList && !value) { this.closeComboboxList(); }\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = true;\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = false;\n    },\n\n    onSelect (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('select', highlightIndex);\n      if (!this.hasSuggestionList) {\n        // we don't display the list before the user has typed anything\n        this.closeComboboxList();\n      }\n    },\n\n    onEscape () {\n      this.$emit('escape');\n      this.closeComboboxList();\n    },\n\n    onHighlight (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('highlight', highlightIndex);\n    },\n\n    onOpened (opened) {\n      this.$emit('opened', opened);\n    },\n\n    onFocusIn (e) {\n      if (this.hasSuggestionList && e && this.$refs.input?.querySelector('input') === e.target) {\n        // only trigger if we show suggestion list when focused, and\n        // it's the input specifically that was focused\n        this.showComboboxList();\n      }\n    },\n\n    onFocusOut (e) {\n      // Check if the focus change was to another target within the combobox component\n      const popoverEl = this.$refs.popover?.tip?.popper;\n      const comboboxEl = this.$refs.input;\n\n      if (e.composedPath()?.some(el => [popoverEl, comboboxEl].includes(el))) return;\n\n      // If outside the combobox then close\n      this.closeComboboxList();\n    },\n\n    openOnArrowKeyPress () {\n      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) { return; }\n\n      this.showComboboxList();\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}

package/dist/lib/combobox.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lib_combobox = require("../chunks/index-IA-Z8fgm.js");
+require("../chunks/keyboard_list_navigation-fJnl_Iox.js");
+require("../common/utils.cjs");
+require("../common/constants.cjs");
+require("vue");
+require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+require("./list-item.cjs");
+require("../chunks/list_item_constants-EiqkqZvP.js");
+require("./item-layout.cjs");
+require("./icon.cjs");
+require("@dialpad/dialtone-icons/vue2");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("./skeleton.cjs");
+exports.DtCombobox = lib_combobox.DtCombobox;
+exports.LABEL_SIZES = lib_combobox.LABEL_SIZES;
+//# sourceMappingURL=combobox.cjs.map

package/dist/lib/combobox.cjs.map

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

package/dist/lib/combobox.js

@@ -1,19 +1,19 @@
-import { D as f, L as A } from "../chunks/index-nIyl_PL6.js";
-import "../chunks/keyboard_list_navigation-F0O8nht0.js";
-import "./utils.js";
-import "./constants.js";
+import { DtCombobox, LABEL_SIZES } from "../chunks/index-DUr1xHR0.js";
+import "../chunks/keyboard_list_navigation-ScXhrxya.js";
+import "../common/utils.js";
+import "../common/constants.js";
 import "vue";
-import "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
 import "./list-item.js";
-import "../chunks/list_item_constants-LTUc74pD.js";
+import "../chunks/list_item_constants-u1xcN9Dd.js";
 import "./item-layout.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./skeleton.js";
 export {
-  f as DtCombobox,
-  A as LABEL_SIZES
+  DtCombobox,
+  LABEL_SIZES
 };
 //# sourceMappingURL=combobox.js.map

package/dist/lib/contact-info.cjs

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lib_itemLayout = require("./item-layout.cjs");
+const lib_avatar = require("./avatar.cjs");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+require("../common/utils.cjs");
+require("../common/constants.cjs");
+require("vue");
+require("@dialpad/dialtone-icons/icons.json");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("./presence.cjs");
+require("./icon.cjs");
+require("@dialpad/dialtone-icons/vue2");
+const _sfc_main = {
+  name: "DtRecipeContactInfo",
+  components: {
+    DtAvatar: lib_avatar.DtAvatar,
+    DtItemLayout: lib_itemLayout.DtItemLayout
+  },
+  /* inheritAttrs: false is generally an option we want to set on library
+    components. This allows any attributes passed in that are not recognized
+    as props to be passed down to another element or component using v-bind:$attrs
+    more info: https://vuejs.org/v2/api/#inheritAttrs */
+  // inheritAttrs: false,
+  props: {
+    /**
+     * String to use for the item's role.
+     */
+    role: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Display avatar if `showAvatar` property is true.
+     */
+    showAvatar: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Optional avatar image url.
+     */
+    avatarSrc: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
+     */
+    avatarSeed: {
+      type: String,
+      default: null
+    },
+    /**
+     * Avatar's full name, used to extract initials
+     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.
+     */
+    avatarFullName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Avatar icon to display if `avatarSrc` is empty.
+     */
+    avatarIcon: {
+      type: String,
+      default: null
+    },
+    /**
+     * The size of the avatar
+     * @values xs, sm, md, lg, xl
+     */
+    avatarSize: {
+      type: String,
+      default: "lg"
+    },
+    /**
+     * The aria-labelledby of the button containing avatars
+     */
+    avatarLabelledBy: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     * @values null, busy, away, offline, active
+     */
+    presence: {
+      type: String,
+      default: null
+    },
+    /**
+     * Showing multiple avatars in contact info.
+     * The props of array items are: <br>
+     * `src` - avatar image url (optional) <br>
+     * `fullName` - full name, used to extract initials to display in avatar<br>
+     *  if `avatarSrc` and `avatarIcon` are empty<br>
+     * `seed` - determines uniqueness of avatar background <br>
+     * `text` - text that overlays the avatar (optional) <br>
+     * `icon` - icon that overlays the avatar (optional) <br>
+     * `halo` - halo highlight around the avatar. boolean true/false
+     */
+    avatarList: {
+      type: Array,
+      default: null
+    }
+  },
+  emits: ["avatar-click"],
+  methods: {
+    avatarClick() {
+      this.$emit("avatar-click");
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-item-layout", { staticClass: "dt-contact-info", attrs: { "role": _vm.role, "data-qa": "contact-info" }, scopedSlots: _vm._u([_vm.showAvatar ? { key: "left", fn: function() {
+    return [_c("button", { staticClass: "dt-contact-info__left", attrs: { "data-qa": "contact-info-left", "aria-labelledby": _vm.avatarLabelledBy }, on: { "click": _vm.avatarClick } }, [_vm.avatarList ? _c("span", { staticClass: "dt-contact-info--avatars" }, _vm._l(_vm.avatarList, function(avatar, index) {
+      return _c("dt-avatar", { key: index, attrs: { "size": _vm.avatarSize, "seed": avatar.seed, "full-name": avatar.fullName, "image-src": avatar.src, "image-alt": "", "icon-name": _vm.avatarIcon, "overlay-icon": avatar.icon, "overlay-text": avatar.text, "avatar-class": [{ "d-mln24": index > 0, "d-bc-brand": !!avatar.halo }] } });
+    }), 1) : _c("dt-avatar", { attrs: { "size": _vm.avatarSize, "full-name": _vm.avatarFullName, "image-src": _vm.avatarSrc, "image-alt": "", "icon-name": _vm.avatarIcon, "seed": _vm.avatarSeed, "presence": _vm.presence } })], 1)];
+  }, proxy: true } : null, { key: "default", fn: function() {
+    return [_c("div", { attrs: { "data-qa": "contact-info-header" } }, [_vm._t("header")], 2)];
+  }, proxy: true }, { key: "subtitle", fn: function() {
+    return [_c("div", { attrs: { "data-qa": "contact-info-subtitle" } }, [_vm._t("subtitle")], 2)];
+  }, proxy: true }, _vm.$slots.bottom ? { key: "bottom", fn: function() {
+    return [_c("div", { attrs: { "data-qa": "contact-info-bottom" } }, [_vm._t("bottom")], 2)];
+  }, proxy: true } : null, _vm.$slots.right ? { key: "right", fn: function() {
+    return [_c("div", { attrs: { "data-qa": "contact-info-right" } }, [_vm._t("right")], 2)];
+  }, proxy: true } : null], null, true) });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "a3c913d1",
+  null,
+  null
+);
+const contact_info = __component__.exports;
+exports.DtRecipeContactInfo = contact_info;
+//# sourceMappingURL=contact-info.cjs.map