@dialpad/dialtone 9.65.0 → 9.66.0

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

@@ -1,17 +1,17 @@
-import { DtCombobox, ComboboxLoadingList, ComboboxEmptyList, LABEL_SIZES } from "../chunks/index-eJ-WWRdf.js";
+import { DtCombobox, ComboboxLoadingList, ComboboxEmptyList, LABEL_SIZES } from "../chunks/index-mBWay1Qb.js";
 import { getUniqueString } from "../common/utils.js";
-import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-81bHIpPu.js";
+import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-IjMVfBDE.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-WsOUIY-m.js";
-import "../chunks/keyboard_list_navigation-ScXhrxya.js";
+import { POPOVER_CONTENT_WIDTHS, POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-6YkPPbnk.js";
+import "../chunks/keyboard_list_navigation-YIqTuw1W.js";
 import "./list-item.js";
 import "../chunks/list_item_constants-u1xcN9Dd.js";
 import "./item-layout.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-TdxqLsS2.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "../common/constants.js";
 import "vue";
@@ -19,7 +19,7 @@ import "./skeleton.js";
 import "./button.js";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "@linusborg/vue-simple-portal";
-import "../chunks/modal-XOr4kiNZ.js";
+import "../chunks/modal-8X6poIZW.js";
 import "./lazy-show.js";
 import "tippy.js";
 const _sfc_main = {
@@ -343,41 +343,132 @@ const _sfc_main = {
 };
 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));
+  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
-);
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const DtRecipeComboboxWithPopover = __component__.exports;
 export {
   DtRecipeComboboxWithPopover

package/dist/vue2/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":[],"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":["_sfc_main","name","components","DtCombobox","DtPopover","ComboboxLoadingList","ComboboxEmptyList","mixins","SrOnlyCloseButtonMixin","props","label","type","String","required","labelVisible","Boolean","default","size","validator","t","Object","values","LABEL_SIZES","includes","description","showList","listId","getUniqueString","listClass","Array","onBeginningOfList","Function","onEndOfList","maxHeight","maxWidth","padding","keys","DROPDOWN_PADDING_CLASSES","some","item","contentWidth","POPOVER_CONTENT_WIDTHS","openWithArrowKeys","popoverOffset","popoverSticky","hasSuggestionList","loading","emptyList","emptyStateMessage","appendTo","HTMLElement","POPOVER_APPEND_TO_VALUES","transition","emits","data","isListShown","isInputFocused","isListFocused","externalAnchor","computed","comboboxListeners","$listeners","select","onSelect","escape","onEscape","highlight","onHighlight","watch","handler","show","immediate","val","window","addEventListener","onFocusOut","removeEventListener","onOpened","methods","handleDisplayList","value","showComboboxList","closeComboboxList","highlightIndex","$emit","opened","onFocusIn","e","$refs","input","querySelector","target","popoverEl","popover","tip","popper","comboboxEl","composedPath","el","openOnArrowKeyPress"],"mappings":"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"}

package/dist/vue2/lib/combobox.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lib_combobox = require("../chunks/index-gj1jEXP4.js");
-require("../chunks/keyboard_list_navigation-fJnl_Iox.js");
+const lib_combobox = require("../chunks/index-DyqUqjvI.js");
+require("../chunks/keyboard_list_navigation-x3D6RcC7.js");
 require("../common/utils.cjs");
 require("../common/constants.cjs");
 require("vue");
@@ -11,7 +11,7 @@ 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("../chunks/icon_constants-VEA0wI5C.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("./skeleton.cjs");
 exports.DtCombobox = lib_combobox.DtCombobox;

package/dist/vue2/lib/combobox.js

@@ -1,5 +1,5 @@
-import { DtCombobox, LABEL_SIZES } from "../chunks/index-eJ-WWRdf.js";
-import "../chunks/keyboard_list_navigation-ScXhrxya.js";
+import { DtCombobox, LABEL_SIZES } from "../chunks/index-mBWay1Qb.js";
+import "../chunks/keyboard_list_navigation-YIqTuw1W.js";
 import "../common/utils.js";
 import "../common/constants.js";
 import "vue";
@@ -9,7 +9,7 @@ import "../chunks/list_item_constants-u1xcN9Dd.js";
 import "./item-layout.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-TdxqLsS2.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./skeleton.js";
 export {

package/dist/vue2/lib/contact-centers-row.cjs

@@ -9,9 +9,9 @@ const lib_button = require("./button.cjs");
 const lib_badge = require("./badge.cjs");
 require("../common/constants.cjs");
 require("vue");
-require("../chunks/index-anN_sx1F.js");
+require("../chunks/index-NYFNZeHH.js");
 require("emoji-toolkit/emoji_strategy.json");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-VEA0wI5C.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("./emoji.cjs");
 require("./skeleton.cjs");
@@ -95,14 +95,10 @@ const _sfc_main = {
   },
   computed: {
     leftbarContactCentersRowClasses() {
-      return [
-        "dt-leftbar-row",
-        "dt-leftbar-row--contact-centers",
-        {
-          "dt-leftbar-row--unread-count": this.showUnreadCount,
-          "dt-leftbar-row--selected": this.selected
-        }
-      ];
+      return ["dt-leftbar-row", "dt-leftbar-row--contact-centers", {
+        "dt-leftbar-row--unread-count": this.showUnreadCount,
+        "dt-leftbar-row--selected": this.selected
+      }];
     },
     getAriaLabel() {
       return this.ariaLabel ? this.ariaLabel : common_utils.safeConcatStrings([this.description, this.unreadCountTooltip]);
@@ -141,27 +137,88 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { class: [
-    "dt-leftbar-row__container",
-    { "dt-leftbar-row__container--off-duty": _vm.$slots.timer }
-  ] }, [_c("div", { class: _vm.leftbarContactCentersRowClasses, attrs: { "data-qa": "dt-recipe-contact-centers-row" } }, [_c("a", _vm._g(_vm._b({ staticClass: "dt-leftbar-row__primary", attrs: { "data-qa": _vm.$attrs["data-qa"] ?? "dt-leftbar-row-link", "aria-label": _vm.getAriaLabel, "title": _vm.description, "href": _vm.$attrs.href ?? "javascript:void(0)" } }, "a", _vm.$attrs, false), _vm.$listeners), [_c("div", { staticClass: "dt-leftbar-row__alpha" }, [_c("dt-icon-headphones", { attrs: { "size": "300", "data-qa": "dt-leftbar-row-icon" } })], 1), _c("div", { staticClass: "dt-leftbar-row__label", style: `flex-basis: ${_vm.labelWidth}` }, [_c("dt-emoji-text-wrapper", { staticClass: "dt-leftbar-row__description", attrs: { "data-qa": "dt-leftbar-row-description", "size": "200" } }, [_vm._v(" " + _vm._s(_vm.description) + " ")])], 1)]), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.hideActions, expression: "!hideActions" }], staticClass: "dt-leftbar-row__omega" }, [_vm._t("right"), _c("div", { staticClass: "dt-leftbar-row__action-container" }, [_vm.showUnreadCount ? _c("dt-badge", { staticClass: "dt-leftbar-row__unread-badge", attrs: { "data-qa": "dt-leftbar-row-unread-badge", "kind": "count", "type": "bulletin" } }, [_vm._v(" " + _vm._s(_vm.unreadCount) + " ")]) : _vm._e(), _c("dt-button", { staticClass: "dt-leftbar-row__action", attrs: { "data-qa": "dt-leftbar-row-action-button", "aria-label": _vm.menuButtonAriaLabel, "importance": "clear", "size": "xs", "circle": "" }, on: { "click": function($event) {
-    $event.stopPropagation();
-    return _vm.$emit("click-menu", $event);
-  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon-chevron-down", { attrs: { "size": "100" } })];
-  }, proxy: true }]) })], 1)], 2)]), _c("div", { staticClass: "dt-leftbar-row__bottom" }, [_vm._t("timer")], 2)]);
+  return _c("div", {
+    class: ["dt-leftbar-row__container", {
+      "dt-leftbar-row__container--off-duty": _vm.$slots.timer
+    }]
+  }, [_c("div", {
+    class: _vm.leftbarContactCentersRowClasses,
+    attrs: {
+      "data-qa": "dt-recipe-contact-centers-row"
+    }
+  }, [_c("a", _vm._g(_vm._b({
+    staticClass: "dt-leftbar-row__primary",
+    attrs: {
+      "data-qa": _vm.$attrs["data-qa"] ?? "dt-leftbar-row-link",
+      "aria-label": _vm.getAriaLabel,
+      "title": _vm.description,
+      "href": _vm.$attrs.href ?? "javascript:void(0)"
+    }
+  }, "a", _vm.$attrs, false), _vm.$listeners), [_c("div", {
+    staticClass: "dt-leftbar-row__alpha"
+  }, [_c("dt-icon-headphones", {
+    attrs: {
+      "size": "300",
+      "data-qa": "dt-leftbar-row-icon"
+    }
+  })], 1), _c("div", {
+    staticClass: "dt-leftbar-row__label",
+    style: `flex-basis: ${_vm.labelWidth}`
+  }, [_c("dt-emoji-text-wrapper", {
+    staticClass: "dt-leftbar-row__description",
+    attrs: {
+      "data-qa": "dt-leftbar-row-description",
+      "size": "200"
+    }
+  }, [_vm._v(" " + _vm._s(_vm.description) + " ")])], 1)]), _c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.hideActions,
+      expression: "!hideActions"
+    }],
+    staticClass: "dt-leftbar-row__omega"
+  }, [_vm._t("right"), _c("div", {
+    staticClass: "dt-leftbar-row__action-container"
+  }, [_vm.showUnreadCount ? _c("dt-badge", {
+    staticClass: "dt-leftbar-row__unread-badge",
+    attrs: {
+      "data-qa": "dt-leftbar-row-unread-badge",
+      "kind": "count",
+      "type": "bulletin"
+    }
+  }, [_vm._v(" " + _vm._s(_vm.unreadCount) + " ")]) : _vm._e(), _c("dt-button", {
+    staticClass: "dt-leftbar-row__action",
+    attrs: {
+      "data-qa": "dt-leftbar-row-action-button",
+      "aria-label": _vm.menuButtonAriaLabel,
+      "importance": "clear",
+      "size": "xs",
+      "circle": ""
+    },
+    on: {
+      "click": function($event) {
+        $event.stopPropagation();
+        return _vm.$emit("click-menu", $event);
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "icon",
+      fn: function() {
+        return [_c("dt-icon-chevron-down", {
+          attrs: {
+            "size": "100"
+          }
+        })];
+      },
+      proxy: true
+    }])
+  })], 1)], 2)]), _c("div", {
+    staticClass: "dt-leftbar-row__bottom"
+  }, [_vm._t("timer")], 2)]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "aeb8c657",
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "aeb8c657", null, null);
 const contact_centers_row = __component__.exports;
 exports.DtRecipeContactCentersRow = contact_centers_row;
 //# sourceMappingURL=contact-centers-row.cjs.map

package/dist/vue2/lib/contact-centers-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"contact-centers-row.cjs","sources":["../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'dt-leftbar-row__container',\n      { 'dt-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"dt-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"$attrs\"\n        v-on=\"$listeners\"\n      >\n        <div class=\"dt-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"dt-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </div>\n      </a>\n      <div\n        v-show=\"!hideActions\"\n        class=\"dt-leftbar-row__omega\"\n      >\n        <slot name=\"right\" />\n        <div class=\"dt-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"dt-leftbar-row__unread-badge\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"dt-leftbar-row__action\"\n            data-qa=\"dt-leftbar-row-action-button\"\n            :aria-label=\"menuButtonAriaLabel\"\n            importance=\"clear\"\n            size=\"xs\"\n            circle\n            @click.stop=\"$emit('click-menu', $event)\"\n          >\n            <template #icon>\n              <dt-icon-chevron-down size=\"100\" />\n            </template>\n          </dt-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"dt-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { safeConcatStrings } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue2/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue2/headphones';\n\nexport default {\n  name: 'DtRecipeContactCentersRow',\n\n  components: {\n    DtButton,\n    DtBadge,\n    DtEmojiTextWrapper,\n    DtIconHeadphones,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Making this true will hide the unread count badge, the chevron button, and the right slot\n     */\n    hideActions: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Aria label for the menu button.\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Menu button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click-menu',\n  ],\n\n  data () {\n    return {\n      labelWidth: 'auto',\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'dt-leftbar-row',\n        'dt-leftbar-row--contact-centers',\n        {\n          'dt-leftbar-row--unread-count': this.showUnreadCount,\n          'dt-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip]);\n    },\n\n    showUnreadCount () {\n      return this.unreadCount > 0;\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      async handler () {\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeDestroy: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["DtButton","DtBadge","DtEmojiTextWrapper","safeConcatStrings"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,WAAA;AAAA,IACA,SAAAC,UAAA;AAAA,IACA,oBAAAC,qBAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kCAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACA,gCAAA,KAAA;AAAA,UACA,4BAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,KAAA,YACA,KAAA,YACAC,aAAA,kBAAA,CAAA,KAAA,aAAA,KAAA,kBAAA,CAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA,UAAA;AACA,cAAA,KAAA;AACA,aAAA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA,IAAA,eAAA,KAAA,gBAAA;AACA,SAAA,eAAA,QAAA,KAAA,GAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,eAAA,WAAA;AACA,SAAA,eAAA;EACA;AAAA,EAEA,SAAA;AAAA,IACA,mBAAA;;AACA,YAAA,eAAA,gBAAA,QAAA,mBAAA,cAAA,gCAAA,mBAAA,gBAAA;AACA,YAAA,eAAA,gBAAA,QAAA,mBAAA,cAAA,8BAAA,mBAAA,gBAAA;AACA,YAAA,eAAA,gBAAA,QAAA,mBAAA,cAAA,8BAAA,mBAAA,gBAAA;AACA,YAAA,WAAA;AACA,WAAA,aAAA,cAAA,aAAA,aAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"contact-centers-row.cjs","sources":["../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'dt-leftbar-row__container',\n      { 'dt-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"dt-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"$attrs\"\n        v-on=\"$listeners\"\n      >\n        <div class=\"dt-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"dt-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </div>\n      </a>\n      <div\n        v-show=\"!hideActions\"\n        class=\"dt-leftbar-row__omega\"\n      >\n        <slot name=\"right\" />\n        <div class=\"dt-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"dt-leftbar-row__unread-badge\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"dt-leftbar-row__action\"\n            data-qa=\"dt-leftbar-row-action-button\"\n            :aria-label=\"menuButtonAriaLabel\"\n            importance=\"clear\"\n            size=\"xs\"\n            circle\n            @click.stop=\"$emit('click-menu', $event)\"\n          >\n            <template #icon>\n              <dt-icon-chevron-down size=\"100\" />\n            </template>\n          </dt-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"dt-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { safeConcatStrings } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue2/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue2/headphones';\n\nexport default {\n  name: 'DtRecipeContactCentersRow',\n\n  components: {\n    DtButton,\n    DtBadge,\n    DtEmojiTextWrapper,\n    DtIconHeadphones,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Making this true will hide the unread count badge, the chevron button, and the right slot\n     */\n    hideActions: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Aria label for the menu button.\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Menu button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click-menu',\n  ],\n\n  data () {\n    return {\n      labelWidth: 'auto',\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'dt-leftbar-row',\n        'dt-leftbar-row--contact-centers',\n        {\n          'dt-leftbar-row--unread-count': this.showUnreadCount,\n          'dt-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip]);\n    },\n\n    showUnreadCount () {\n      return this.unreadCount > 0;\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      async handler () {\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeDestroy: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["_sfc_main","name","components","DtButton","DtBadge","DtEmojiTextWrapper","DtIconHeadphones","DtIconChevronDown","inheritAttrs","props","ariaLabel","type","String","default","description","required","selected","Boolean","hideActions","unreadCount","Number","menuButtonAriaLabel","emits","data","labelWidth","computed","leftbarContactCentersRowClasses","showUnreadCount","getAriaLabel","safeConcatStrings","unreadCountTooltip","watch","$props","deep","handler","$nextTick","adjustLabelWidth","mounted","resizeObserver","ResizeObserver","observe","$el","beforeDestroy","disconnect","methods","querySelector","clientWidth","omegaWidth","alphaWidth","paddings"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoFA,MAAAA,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,cACAC,WAAA;AAAA,aACAC,UAAA;AAAA,wBACAC,qBAAA;AAAA,IACAC;AAAAA,IACAC;AAAAA,EACA;AAAA,EAEAC,cAAA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,WAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,aAAA;AAAA,MACAH,MAAAC;AAAAA,MACAG,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,UAAA;AAAA,MACAL,MAAAM;AAAAA,MACAJ,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAK,aAAA;AAAA,MACAP,MAAAM;AAAAA,MACAJ,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAM,aAAA;AAAA,MACAR,MAAAS;AAAAA,MACAP,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAQ,qBAAA;AAAA,MACAV,MAAAC;AAAAA,MACAG,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAO,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EAAA;AAAA,EAGAC,OAAA;AACA,WAAA;AAAA,MACAC,YAAA;AAAA;EAEA;AAAA,EAEAC,UAAA;AAAA,IACAC,kCAAA;AACA,aAAA,CACA,kBACA,mCACA;AAAA,QACA,gCAAA,KAAAC;AAAAA,QACA,4BAAA,KAAAX;AAAAA,MACA,CAAA;AAAA,IAEA;AAAA,IAEAY,eAAA;AACA,aAAA,KAAAlB,YACA,KAAAA,YACAmB,aAAAA,kBAAA,CAAA,KAAAf,aAAA,KAAAgB,kBAAA,CAAA;AAAA,IACA;AAAA,IAEAH,kBAAA;AACA,aAAA,KAAAR,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAY,OAAA;AAAA,IACAC,QAAA;AAAA,MACAC,MAAA;AAAA,MACA,MAAAC,UAAA;AACA,cAAA,KAAAC;AACA,aAAAC,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEAC,UAAA;AACA,SAAAC,iBAAA,IAAAC,eAAA,KAAAH,gBAAA;AACA,SAAAE,eAAAE,QAAA,KAAAC,GAAA;AACA,SAAAL,iBAAA;AAAA,EACA;AAAA,EAEAM,eAAA,WAAA;AACA,SAAAJ,eAAAK;EACA;AAAA,EAEAC,SAAA;AAAA,IACAR,mBAAA;;AACA,YAAAZ,eAAA,gBAAAiB,QAAA,mBAAAI,cAAA,gCAAA,mBAAAC,gBAAA;AACA,YAAAC,eAAA,gBAAAN,QAAA,mBAAAI,cAAA,8BAAA,mBAAAC,gBAAA;AACA,YAAAE,eAAA,gBAAAP,QAAA,mBAAAI,cAAA,8BAAA,mBAAAC,gBAAA;AACA,YAAAG,WAAA;AACA,WAAAzB,aAAAA,cAAAuB,aAAAC,aAAAC,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}