@dialpad/dialtone 9.66.0 → 9.67.0

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

@@ -1,24 +1,24 @@
-import { DtCombobox, ComboboxLoadingList, ComboboxEmptyList, LABEL_SIZES } from "../chunks/index-T15rAIdX.js";
+import { DtCombobox, ComboboxLoadingList, ComboboxEmptyList, LABEL_SIZES } from "../chunks/index-b_MgDylR.js";
 import { getUniqueString, hasSlotContent } from "../common/utils.js";
-import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-Ji3Zlts6.js";
+import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-3EdsV-dH.js";
 import { resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementVNode, withKeys, renderSlot, createVNode, createSlots, normalizeClass, normalizeProps } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.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-6YkPPbnk.js";
-import "../chunks/keyboard_list_navigation-YIqTuw1W.js";
+import { POPOVER_CONTENT_WIDTHS, POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-WsOUIY-m.js";
+import "../chunks/keyboard_list_navigation-ScXhrxya.js";
 import "./list-item.js";
 import "../chunks/list_item_constants-u1xcN9Dd.js";
 import "./item-layout.js";
 import "../common/constants.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-gIQj4mf7.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./skeleton.js";
 import "./button.js";
 import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/modal-8X6poIZW.js";
+import "../chunks/modal-XOr4kiNZ.js";
 import "./lazy-show.js";
 import "tippy.js";
 const _sfc_main = {
@@ -342,13 +342,9 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = ["id"];
-const _hoisted_2 = {
-  ref: "header"
-};
+const _hoisted_2 = { ref: "header" };
 const _hoisted_3 = ["onMouseleave", "onFocusout"];
-const _hoisted_4 = {
-  ref: "footer"
-};
+const _hoisted_4 = { ref: "footer" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = resolveComponent("combobox-loading-list");
   const _component_combobox_empty_list = resolveComponent("combobox-empty-list");
@@ -370,71 +366,83 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "list-id": $props.listId,
     "data-qa": "dt-combobox"
   }, $options.comboboxListeners), {
-    input: withCtx(({
-      inputProps
-    }) => [createElementVNode("div", {
-      id: $data.externalAnchor,
-      ref: "input",
-      onFocusin: _cache[0] || (_cache[0] = (...args) => $options.onFocusIn && $options.onFocusIn(...args)),
-      onKeydown: [_cache[1] || (_cache[1] = withKeys(($event) => $options.openOnArrowKeyPress($event), ["up"])), _cache[2] || (_cache[2] = withKeys(($event) => $options.openOnArrowKeyPress($event), ["down"]))]
-    }, [renderSlot(_ctx.$slots, "input", {
-      inputProps,
-      onInput: $options.handleDisplayList
-    })], 40, _hoisted_1)]),
-    list: withCtx(({
-      opened,
-      listProps,
-      clearHighlightIndex
-    }) => [createVNode(_component_dt_popover, {
-      ref: "popover",
-      open: $data.isListShown,
-      "onUpdate:open": _cache[3] || (_cache[3] = ($event) => $data.isListShown = $event),
-      "hide-on-click": false,
-      "max-height": $props.maxHeight,
-      "max-width": $props.maxWidth,
-      offset: $props.popoverOffset,
-      sticky: $props.popoverSticky,
-      placement: "bottom-start",
-      "initial-focus-element": "none",
-      padding: "none",
-      role: "listbox",
-      "external-anchor": $data.externalAnchor,
-      "content-width": $props.contentWidth,
-      "content-appear": true,
-      "content-tabindex": null,
-      modal: false,
-      "auto-focus": false,
-      "append-to": $props.appendTo,
-      transition: $props.transition,
-      "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-      "visually-hidden-close": _ctx.visuallyHiddenClose,
-      onOpened: opened
-    }, createSlots({
-      content: withCtx(() => [createElementVNode("div", {
-        ref: "listWrapper",
-        class: normalizeClass([$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
-        onMouseleave: clearHighlightIndex,
-        onFocusout: clearHighlightIndex
-      }, [$props.loading ? (openBlock(), createBlock(_component_combobox_loading_list, normalizeProps(mergeProps({
-        key: 0
-      }, listProps)), null, 16)) : $props.emptyList && $props.emptyStateMessage ? (openBlock(), createBlock(_component_combobox_empty_list, mergeProps({
-        key: 1
-      }, listProps, {
-        message: $props.emptyStateMessage
-      }), null, 16, ["message"])) : renderSlot(_ctx.$slots, "list", {
-        key: 2,
-        listProps
-      })], 42, _hoisted_3)]),
-      _: 2
-    }, [$data.hasSlotContent(_ctx.$slots.header) ? {
-      name: "headerContent",
-      fn: withCtx(() => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "header")], 512)]),
-      key: "0"
-    } : void 0, $data.hasSlotContent(_ctx.$slots.footer) ? {
-      name: "footerContent",
-      fn: withCtx(() => [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "footer")], 512)]),
-      key: "1"
-    } : void 0]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "append-to", "transition", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])]),
+    input: withCtx(({ inputProps }) => [
+      createElementVNode("div", {
+        id: $data.externalAnchor,
+        ref: "input",
+        onFocusin: _cache[0] || (_cache[0] = (...args) => $options.onFocusIn && $options.onFocusIn(...args)),
+        onKeydown: [
+          _cache[1] || (_cache[1] = withKeys(($event) => $options.openOnArrowKeyPress($event), ["up"])),
+          _cache[2] || (_cache[2] = withKeys(($event) => $options.openOnArrowKeyPress($event), ["down"]))
+        ]
+      }, [
+        renderSlot(_ctx.$slots, "input", {
+          inputProps,
+          onInput: $options.handleDisplayList
+        })
+      ], 40, _hoisted_1)
+    ]),
+    list: withCtx(({ opened, listProps, clearHighlightIndex }) => [
+      createVNode(_component_dt_popover, {
+        ref: "popover",
+        open: $data.isListShown,
+        "onUpdate:open": _cache[3] || (_cache[3] = ($event) => $data.isListShown = $event),
+        "hide-on-click": false,
+        "max-height": $props.maxHeight,
+        "max-width": $props.maxWidth,
+        offset: $props.popoverOffset,
+        sticky: $props.popoverSticky,
+        placement: "bottom-start",
+        "initial-focus-element": "none",
+        padding: "none",
+        role: "listbox",
+        "external-anchor": $data.externalAnchor,
+        "content-width": $props.contentWidth,
+        "content-appear": true,
+        "content-tabindex": null,
+        modal: false,
+        "auto-focus": false,
+        "append-to": $props.appendTo,
+        transition: $props.transition,
+        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+        "visually-hidden-close": _ctx.visuallyHiddenClose,
+        onOpened: opened
+      }, createSlots({
+        content: withCtx(() => [
+          createElementVNode("div", {
+            ref: "listWrapper",
+            class: normalizeClass([$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
+            onMouseleave: clearHighlightIndex,
+            onFocusout: clearHighlightIndex
+          }, [
+            $props.loading ? (openBlock(), createBlock(_component_combobox_loading_list, normalizeProps(mergeProps({ key: 0 }, listProps)), null, 16)) : $props.emptyList && $props.emptyStateMessage ? (openBlock(), createBlock(_component_combobox_empty_list, mergeProps({ key: 1 }, listProps, { message: $props.emptyStateMessage }), null, 16, ["message"])) : renderSlot(_ctx.$slots, "list", {
+              key: 2,
+              listProps
+            })
+          ], 42, _hoisted_3)
+        ]),
+        _: 2
+      }, [
+        $data.hasSlotContent(_ctx.$slots.header) ? {
+          name: "headerContent",
+          fn: withCtx(() => [
+            createElementVNode("div", _hoisted_2, [
+              renderSlot(_ctx.$slots, "header")
+            ], 512)
+          ]),
+          key: "0"
+        } : void 0,
+        $data.hasSlotContent(_ctx.$slots.footer) ? {
+          name: "footerContent",
+          fn: withCtx(() => [
+            createElementVNode("div", _hoisted_4, [
+              renderSlot(_ctx.$slots, "footer")
+            ], 512)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "append-to", "transition", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])
+    ]),
     _: 3
   }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id"]);
 }

package/dist/vue3/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-bind=\"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        v-model:open=\"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\"\n      >\n        <template\n          v-if=\"hasSlotContent($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=\"hasSlotContent($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, hasSlotContent } 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      hasSlotContent,\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$attrs,\n\n        onSelect: this.onSelect,\n\n        onEscape: this.onEscape,\n\n        onHighlight: 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","hasSlotContent","computed","comboboxListeners","$attrs","onSelect","onEscape","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","_hoisted_2","ref","_hoisted_4","_openBlock","_createBlock","_component_dt_combobox","_mergeProps","$props","$data","$options","_withCtx","inputProps","_createElementVNode","id","onFocusin","args","onKeydown","_cache","_withKeys","$event","_renderSlot","_ctx","$slots","onInput","list","listProps","clearHighlightIndex","_createVNode","_component_dt_popover","open","offset","sticky","placement","role","modal","visuallyHiddenCloseLabel","visuallyHiddenClose","content","class","_normalizeClass","onMouseleave","onFocusout","_component_combobox_loading_list","_component_combobox_empty_list","key","message","header","footer"],"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-bind=\"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        v-model:open=\"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\"\n      >\n        <template\n          v-if=\"hasSlotContent($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=\"hasSlotContent($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, hasSlotContent } 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      hasSlotContent,\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$attrs,\n\n        onSelect: this.onSelect,\n\n        onEscape: this.onEscape,\n\n        onHighlight: 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":["_openBlock","_createBlock","_mergeProps","_withCtx","_createElementVNode","_withKeys","_renderSlot","_createVNode","_normalizeClass"],"mappings":"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"}

package/dist/vue3/lib/combobox.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lib_combobox = require("../chunks/index-ouh7Bvm-.js");
-require("../chunks/keyboard_list_navigation-x3D6RcC7.js");
+const lib_combobox = require("../chunks/index-4qgKeErp.js");
+require("../chunks/keyboard_list_navigation-fJnl_Iox.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/vue3");
-require("../chunks/icon_constants-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("./skeleton.cjs");
 exports.DtCombobox = lib_combobox.DtCombobox;

package/dist/vue3/lib/combobox.js

@@ -1,5 +1,5 @@
-import { DtCombobox, LABEL_SIZES } from "../chunks/index-T15rAIdX.js";
-import "../chunks/keyboard_list_navigation-YIqTuw1W.js";
+import { DtCombobox, LABEL_SIZES } from "../chunks/index-b_MgDylR.js";
+import "../chunks/keyboard_list_navigation-ScXhrxya.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/vue3";
-import "../chunks/icon_constants-gIQj4mf7.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./skeleton.js";
 export {

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

@@ -9,9 +9,9 @@ const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhn
 const lib_button = require("./button.cjs");
 const lib_badge = require("./badge.cjs");
 require("../common/constants.cjs");
-require("../chunks/index-fEp0B-5Z.js");
+require("../chunks/index-lu2o2f4r.js");
 require("@dialpad/dialtone-emojis");
-require("../chunks/icon_constants-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("./emoji.cjs");
 require("./skeleton.cjs");
@@ -95,10 +95,14 @@ 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]);
@@ -139,19 +143,13 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = ["data-qa", "aria-label", "title", "href"];
-const _hoisted_2 = {
-  class: "dt-leftbar-row__alpha"
-};
+const _hoisted_2 = { class: "dt-leftbar-row__alpha" };
 const _hoisted_3 = {
   key: 0,
   class: "dt-leftbar-row__omega"
 };
-const _hoisted_4 = {
-  class: "dt-leftbar-row__action-container"
-};
-const _hoisted_5 = {
-  class: "dt-leftbar-row__bottom"
-};
+const _hoisted_4 = { class: "dt-leftbar-row__action-container" };
+const _hoisted_5 = { class: "dt-leftbar-row__bottom" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_headphones = vue.resolveComponent("dt-icon-headphones");
   const _component_dt_emoji_text_wrapper = vue.resolveComponent("dt-emoji-text-wrapper");
@@ -159,56 +157,82 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_chevron_down = vue.resolveComponent("dt-icon-chevron-down");
   const _component_dt_button = vue.resolveComponent("dt-button");
   return vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass(["dt-leftbar-row__container", {
-      "dt-leftbar-row__container--off-duty": _ctx.$slots.timer
-    }])
-  }, [vue.createElementVNode("div", {
-    class: vue.normalizeClass($options.leftbarContactCentersRowClasses),
-    "data-qa": "dt-recipe-contact-centers-row"
-  }, [vue.createElementVNode("a", vue.mergeProps({
-    class: "dt-leftbar-row__primary",
-    "data-qa": _ctx.$attrs["data-qa"] ?? "dt-leftbar-row-link",
-    "aria-label": $options.getAriaLabel,
-    title: $props.description,
-    href: _ctx.$attrs.href ?? "javascript:void(0)"
-  }, _ctx.$attrs, vue.toHandlers($options.contactRowListeners, true), {
-    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
-  }), [vue.createElementVNode("div", _hoisted_2, [vue.createVNode(_component_dt_icon_headphones, {
-    size: "300",
-    "data-qa": "dt-leftbar-row-icon"
-  })]), vue.createElementVNode("div", {
-    class: "dt-leftbar-row__label",
-    style: vue.normalizeStyle(`flex-basis: ${$data.labelWidth}`)
-  }, [vue.createVNode(_component_dt_emoji_text_wrapper, {
-    class: "dt-leftbar-row__description",
-    "data-qa": "dt-leftbar-row-description",
-    size: "200"
-  }, {
-    default: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString($props.description), 1)]),
-    _: 1
-  })], 4)], 16, _hoisted_1), !$props.hideActions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [vue.renderSlot(_ctx.$slots, "right", {}, void 0, true), vue.createElementVNode("div", _hoisted_4, [$options.showUnreadCount ? (vue.openBlock(), vue.createBlock(_component_dt_badge, {
-    key: 0,
-    class: "dt-leftbar-row__unread-badge",
-    "data-qa": "dt-leftbar-row-unread-badge",
-    kind: "count",
-    type: "bulletin"
-  }, {
-    default: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString($props.unreadCount), 1)]),
-    _: 1
-  })) : vue.createCommentVNode("", true), vue.createVNode(_component_dt_button, {
-    class: "dt-leftbar-row__action",
-    "data-qa": "dt-leftbar-row-action-button",
-    "aria-label": $props.menuButtonAriaLabel,
-    importance: "clear",
-    size: "xs",
-    circle: "",
-    onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => _ctx.$emit("click-menu", $event), ["stop"]))
-  }, {
-    icon: vue.withCtx(() => [vue.createVNode(_component_dt_icon_chevron_down, {
-      size: "100"
-    })]),
-    _: 1
-  }, 8, ["aria-label"])])])) : vue.createCommentVNode("", true)], 2), vue.createElementVNode("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "timer", {}, void 0, true)])], 2);
+    class: vue.normalizeClass([
+      "dt-leftbar-row__container",
+      { "dt-leftbar-row__container--off-duty": _ctx.$slots.timer }
+    ])
+  }, [
+    vue.createElementVNode("div", {
+      class: vue.normalizeClass($options.leftbarContactCentersRowClasses),
+      "data-qa": "dt-recipe-contact-centers-row"
+    }, [
+      vue.createElementVNode("a", vue.mergeProps({
+        class: "dt-leftbar-row__primary",
+        "data-qa": _ctx.$attrs["data-qa"] ?? "dt-leftbar-row-link",
+        "aria-label": $options.getAriaLabel,
+        title: $props.description,
+        href: _ctx.$attrs.href ?? "javascript:void(0)"
+      }, _ctx.$attrs, vue.toHandlers($options.contactRowListeners, true), {
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+      }), [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createVNode(_component_dt_icon_headphones, {
+            size: "300",
+            "data-qa": "dt-leftbar-row-icon"
+          })
+        ]),
+        vue.createElementVNode("div", {
+          class: "dt-leftbar-row__label",
+          style: vue.normalizeStyle(`flex-basis: ${$data.labelWidth}`)
+        }, [
+          vue.createVNode(_component_dt_emoji_text_wrapper, {
+            class: "dt-leftbar-row__description",
+            "data-qa": "dt-leftbar-row-description",
+            size: "200"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString($props.description), 1)
+            ]),
+            _: 1
+          })
+        ], 4)
+      ], 16, _hoisted_1),
+      !$props.hideActions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+        vue.renderSlot(_ctx.$slots, "right", {}, void 0, true),
+        vue.createElementVNode("div", _hoisted_4, [
+          $options.showUnreadCount ? (vue.openBlock(), vue.createBlock(_component_dt_badge, {
+            key: 0,
+            class: "dt-leftbar-row__unread-badge",
+            "data-qa": "dt-leftbar-row-unread-badge",
+            kind: "count",
+            type: "bulletin"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString($props.unreadCount), 1)
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("", true),
+          vue.createVNode(_component_dt_button, {
+            class: "dt-leftbar-row__action",
+            "data-qa": "dt-leftbar-row-action-button",
+            "aria-label": $props.menuButtonAriaLabel,
+            importance: "clear",
+            size: "xs",
+            circle: "",
+            onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => _ctx.$emit("click-menu", $event), ["stop"]))
+          }, {
+            icon: vue.withCtx(() => [
+              vue.createVNode(_component_dt_icon_chevron_down, { size: "100" })
+            ]),
+            _: 1
+          }, 8, ["aria-label"])
+        ])
+      ])) : vue.createCommentVNode("", true)
+    ], 2),
+    vue.createElementVNode("div", _hoisted_5, [
+      vue.renderSlot(_ctx.$slots, "timer", {}, void 0, true)
+    ])
+  ], 2);
 }
 const contact_centers_row = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-cc2f5ae8"]]);
 exports.DtRecipeContactCentersRow = contact_centers_row;

package/dist/vue3/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=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\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-if=\"!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 { extractVueListeners, 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/vue3/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/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    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\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  beforeUnmount: 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","contactRowListeners","extractVueListeners","$attrs","watch","$props","deep","handler","$nextTick","adjustLabelWidth","mounted","resizeObserver","ResizeObserver","observe","$el","beforeUnmount","disconnect","methods","querySelector","clientWidth","omegaWidth","alphaWidth","paddings","_hoisted_2","class","_hoisted_4","_hoisted_5","_createElementBlock","_normalizeClass","_ctx","$slots","timer","_createElementVNode","$options","_mergeProps","title","href","_toHandlers","onClick","_cache","$event","$emit","_createVNode","_component_dt_icon_headphones","size","style","$data","_component_dt_emoji_text_wrapper","_openBlock","_hoisted_3","_renderSlot","undefined","_createBlock","_component_dt_badge","kind","_component_dt_button","importance","circle","_withModifiers","icon","_component_dt_icon_chevron_down"],"mappings":"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"}
+{"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=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\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-if=\"!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 { extractVueListeners, 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/vue3/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/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    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\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  beforeUnmount: 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","extractVueListeners","_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_toHandlers","_createVNode","_openBlock","_renderSlot","_createBlock","_withModifiers"],"mappings":"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"}