@dialpad/dialtone-vue 3.220.0-next.7 → 3.221.0

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

@@ -1,38 +1,36 @@
-import { COMPONENT_SIZES as e } from "../../common/constants/sizes.js";
-import { getUniqueString as t, hasSlotContent as n } from "../../common/utils/index.js";
-import { t as r } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { t as i } from "../../mode_constants-tb7TL85q.js";
-import a from "../combobox/combobox-loading-list.js";
-import o from "../combobox/combobox-empty-list.js";
-import { t as s } from "../../Combobox-CAnDv0OR.js";
-import { COMBOBOX_LABEL_SIZES as c } from "../combobox/combobox-constants.js";
-import { POPOVER_APPEND_TO_VALUES as l, POPOVER_CONTENT_WIDTHS as u } from "../popover/popover-constants.js";
-import d from "../popover/popover.js";
-import { DROPDOWN_PADDING_CLASSES as f } from "../dropdown/dropdown-constants.js";
-import { createBlock as p, createElementVNode as m, createSlots as h, createVNode as g, mergeProps as _, normalizeClass as v, normalizeProps as y, openBlock as b, renderSlot as x, resolveComponent as S, withCtx as C, withKeys as w } from "vue";
-//#region components/ComboboxWithPopover/ComboboxWithPopover.vue
-var T = {
+import { getUniqueString as e, hasSlotContent as t } from "../../common/utils/index.js";
+import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import r from "../combobox/combobox-loading-list.js";
+import i from "../combobox/combobox-empty-list.js";
+import { t as a } from "../../combobox-DgClbLOg.js";
+import { COMBOBOX_LABEL_SIZES as o } from "../combobox/combobox-constants.js";
+import { POPOVER_APPEND_TO_VALUES as s, POPOVER_CONTENT_WIDTHS as c } from "../popover/popover-constants.js";
+import l from "../popover/popover.js";
+import { DROPDOWN_PADDING_CLASSES as u } from "../dropdown/dropdown-constants.js";
+import { createBlock as d, createElementVNode as f, createSlots as p, createVNode as m, mergeProps as h, normalizeClass as g, normalizeProps as _, openBlock as v, renderSlot as y, resolveComponent as b, withCtx as x, withKeys as S } from "vue";
+//#region components/combobox_with_popover/combobox_with_popover.vue
+var C = {
+	compatConfig: { MODE: 3 },
 	name: "DtComboboxWithPopover",
 	components: {
-		DtCombobox: s,
-		DtPopover: d,
-		ComboboxLoadingList: a,
-		ComboboxEmptyList: o
+		DtCombobox: a,
+		DtPopover: l,
+		ComboboxLoadingList: r,
+		ComboboxEmptyList: i
 	},
 	props: {
-		contentMode: i,
 		label: {
 			type: String,
 			required: !0
 		},
-		showLabel: {
+		labelVisible: {
 			type: Boolean,
 			default: !0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: null,
-			validator: (t) => t === null || Object.values(c).includes(t) || Object.keys(e).includes(String(t))
+			validator: (e) => Object.values(o).includes(e)
 		},
 		description: {
 			type: String,
@@ -45,7 +43,7 @@ var T = {
 		listId: {
 			type: String,
 			default() {
-				return t();
+				return e();
 			}
 		},
 		listClass: {
@@ -56,15 +54,7 @@ var T = {
 			],
 			default: ""
 		},
-		headerClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		footerClass: {
+		dialogClass: {
 			type: [
 				String,
 				Array,
@@ -91,12 +81,12 @@ var T = {
 		padding: {
 			type: String,
 			default: "small",
-			validator: (e) => Object.keys(f).some((t) => t === e)
+			validator: (e) => Object.keys(u).some((t) => t === e)
 		},
 		contentWidth: {
 			type: String,
 			default: null,
-			validator: (e) => u.includes(e)
+			validator: (e) => c.includes(e)
 		},
 		openWithArrowKeys: {
 			type: Boolean,
@@ -129,7 +119,7 @@ var T = {
 		appendTo: {
 			type: [HTMLElement, String],
 			default: "body",
-			validator: (e) => l.includes(e) || e instanceof HTMLElement
+			validator: (e) => s.includes(e) || e instanceof HTMLElement
 		},
 		transition: {
 			type: String,
@@ -144,12 +134,12 @@ var T = {
 	],
 	data() {
 		return {
-			DROPDOWN_PADDING_CLASSES: f,
+			DROPDOWN_PADDING_CLASSES: u,
 			isListShown: !1,
 			isInputFocused: !1,
 			isListFocused: !1,
-			externalAnchor: t(),
-			hasSlotContent: n
+			externalAnchor: e(),
+			hasSlotContent: t
 		};
 	},
 	computed: { comboboxListeners() {
@@ -204,14 +194,14 @@ var T = {
 			this.showList !== null || this.isListShown || !this.openWithArrowKeys || this.showComboboxList();
 		}
 	}
-}, E = ["id"], D = ["onMouseleave", "onFocusout"];
+}, w = ["id"], T = { ref: "header" }, E = ["onMouseleave", "onFocusout"], D = { ref: "footer" };
 function O(e, t, n, r, i, a) {
-	let o = S("combobox-loading-list"), s = S("combobox-empty-list"), c = S("dt-popover"), l = S("dt-combobox");
-	return b(), p(l, _({
+	let o = b("combobox-loading-list"), s = b("combobox-empty-list"), c = b("dt-popover"), l = b("dt-combobox");
+	return v(), d(l, h({
 		ref: "combobox",
 		loading: n.loading,
 		label: n.label,
-		"show-label": n.showLabel,
+		"label-visible": n.labelVisible,
 		size: n.size,
 		description: n.description,
 		"empty-list": n.emptyList,
@@ -223,25 +213,24 @@ function O(e, t, n, r, i, a) {
 		"list-id": n.listId,
 		"data-qa": "dt-combobox"
 	}, a.comboboxListeners), {
-		input: C(({ inputProps: n }) => [m("div", {
+		input: x(({ inputProps: n }) => [f("div", {
 			id: i.externalAnchor,
 			ref: "input",
 			onFocusin: t[0] || (t[0] = (...e) => a.onFocusIn && a.onFocusIn(...e)),
-			onKeydown: [t[1] || (t[1] = w((e) => a.openOnArrowKeyPress(e), ["up"])), t[2] || (t[2] = w((e) => a.openOnArrowKeyPress(e), ["down"]))]
-		}, [x(e.$slots, "input", {
+			onKeydown: [t[1] || (t[1] = S((e) => a.openOnArrowKeyPress(e), ["up"])), t[2] || (t[2] = S((e) => a.openOnArrowKeyPress(e), ["down"]))]
+		}, [y(e.$slots, "input", {
 			inputProps: n,
 			onInput: a.handleDisplayList
-		})], 40, E)]),
-		list: C(({ opened: r, listProps: a, clearHighlightIndex: l }) => [g(c, {
+		})], 40, w)]),
+		list: x(({ opened: r, listProps: a, clearHighlightIndex: l }) => [m(c, {
 			ref: "popover",
 			open: i.isListShown,
 			"onUpdate:open": t[3] || (t[3] = (e) => i.isListShown = e),
-			"close-on-click": !1,
+			"hide-on-click": !1,
 			"max-height": n.maxHeight,
 			"max-width": n.maxWidth,
 			offset: n.popoverOffset,
 			sticky: n.popoverSticky,
-			"content-mode": n.contentMode,
 			placement: "bottom-start",
 			"initial-focus-element": "none",
 			padding: "none",
@@ -253,36 +242,31 @@ function O(e, t, n, r, i, a) {
 			modal: !1,
 			"auto-focus": !1,
 			"append-to": n.appendTo,
+			"dialog-class": n.dialogClass,
 			transition: n.transition,
 			onOpened: r
-		}, h({
-			content: C(() => [m("div", {
+		}, p({
+			content: x(() => [f("div", {
 				ref: "listWrapper",
-				class: v([
+				class: g([
 					"d-recipe-combobox-with-popover__list",
 					i.DROPDOWN_PADDING_CLASSES[n.padding],
 					n.listClass
 				]),
 				onMouseleave: l,
 				onFocusout: l
-			}, [n.loading ? (b(), p(o, y(_({ key: 0 }, a)), null, 16)) : n.emptyList && n.emptyStateMessage ? (b(), p(s, _({ key: 1 }, a, { message: n.emptyStateMessage }), null, 16, ["message"])) : x(e.$slots, "list", {
+			}, [n.loading ? (v(), d(o, _(h({ key: 0 }, a)), null, 16)) : n.emptyList && n.emptyStateMessage ? (v(), d(s, h({ key: 1 }, a, { message: n.emptyStateMessage }), null, 16, ["message"])) : y(e.$slots, "list", {
 				key: 2,
 				listProps: a
-			})], 42, D)]),
+			})], 42, E)]),
 			_: 2
 		}, [i.hasSlotContent(e.$slots.header) ? {
 			name: "headerContent",
-			fn: C(() => [m("div", {
-				ref: "header",
-				class: v(n.headerClass)
-			}, [x(e.$slots, "header")], 2)]),
+			fn: x(() => [f("div", T, [y(e.$slots, "header")], 512)]),
 			key: "0"
 		} : void 0, i.hasSlotContent(e.$slots.footer) ? {
 			name: "footerContent",
-			fn: C(() => [m("div", {
-				ref: "footer",
-				class: v(n.footerClass)
-			}, [x(e.$slots, "footer")], 2)]),
+			fn: x(() => [f("div", D, [y(e.$slots, "footer")], 512)]),
 			key: "1"
 		} : void 0]), 1032, [
 			"open",
@@ -290,10 +274,10 @@ function O(e, t, n, r, i, a) {
 			"max-width",
 			"offset",
 			"sticky",
-			"content-mode",
 			"external-anchor",
 			"content-width",
 			"append-to",
+			"dialog-class",
 			"transition",
 			"onOpened"
 		])]),
@@ -301,7 +285,7 @@ function O(e, t, n, r, i, a) {
 	}, 16, [
 		"loading",
 		"label",
-		"show-label",
+		"label-visible",
 		"size",
 		"description",
 		"empty-list",
@@ -312,7 +296,7 @@ function O(e, t, n, r, i, a) {
 		"list-id"
 	]);
 }
-var k = /* @__PURE__ */ r(T, [["render", O]]);
+var k = /* @__PURE__ */ n(C, [["render", O]]);
 //#endregion
 export { k as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-with-popover.js","names":[],"sources":["../../../components/ComboboxWithPopover/ComboboxWithPopover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :show-label=\"showLabel\"\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        :close-on-click=\"false\"\n        :max-height=\"maxHeight\"\n        :max-width=\"maxWidth\"\n        :offset=\"popoverOffset\"\n        :sticky=\"popoverSticky\"\n        :content-mode=\"contentMode\"\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        @opened=\"opened\"\n      >\n        <template\n          v-if=\"hasSlotContent($slots.header)\"\n          #headerContent\n        >\n          <div\n            ref=\"header\"\n            :class=\"headerClass\"\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=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\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            :class=\"footerClass\"\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/ComboboxLoadingList.vue';\nimport ComboboxEmptyList from '@/components/Combobox/ComboboxEmptyList.vue';\nimport { DtCombobox, COMBOBOX_LABEL_SIZES } from '@/components/Combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/Popover';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { COMPONENT_SIZES } from '@/common/constants';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/Dropdown';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\n\nexport default {\n  name: 'DtComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  props: {\n    /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n    contentMode: CONTENT_MODE_PROP,\n\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    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: null,\n      validator: (t) => t === null\n        || Object.values(COMBOBOX_LABEL_SIZES).includes(t)\n        || Object.keys(COMPONENT_SIZES).includes(String(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     * Additional class for the header wrapper element.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the footer wrapper element.\n     */\n    footerClass: {\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"],"mappings":"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"}
+{"version":3,"file":"combobox-with-popover.js","names":[],"sources":["../../../components/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        :dialog-class=\"dialogClass\"\n        :transition=\"transition\"\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=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\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, COMBOBOX_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';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\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(COMBOBOX_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     * Additional class for the popover dialog element.\n     */\n    dialogClass: {\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"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../badge/badge.cjs`),r=require(`../../localization/index.cjs`),i=require(`../button/button.cjs`),a=require(`../emoji-text-wrapper/emoji-text-wrapper.cjs`);let o=require(`vue`),s=require(`@dialpad/dialtone-icons/vue`);var c={compatConfig:{MODE:3},name:`DtRecipeContactCentersRow`,components:{DtButton:i.default,DtBadge:n.default,DtEmojiTextWrapper:a.default,DtIconHeadphones:s.DtIconHeadphones,DtIconChevronDown:s.DtIconChevronDown},inheritAttrs:!1,props:{ariaLabel:{type:String,default:``},description:{type:String,required:!0},selected:{type:Boolean,default:!1},showActions:{type:Boolean,default:!0},unreadCount:{type:String,default:null,validator(e){return e?/^\d+\+?$/.test(e):!0}}},emits:[`click`,`click-menu`],data(){return{labelWidth:`auto`,i18n:new r.DialtoneLocalization}},computed:{leftbarContactCentersRowClasses(){return[`d-recipe-leftbar-row`,`d-recipe-leftbar-row--contact-centers`,{"d-recipe-leftbar-row__unread-count":this.showUnreadCount,"d-recipe-leftbar-row--selected":this.selected}]},getAriaLabel(){let t=isNaN(this.unreadCount)?this.unreadCount:Number(this.unreadCount);return this.ariaLabel?this.ariaLabel:e.safeConcatStrings([this.description,this.i18n.$t(`DIALTONE_UNREAD_MESSAGE_COUNT_TEXT`,{unreadCount:t})])},contactRowListeners(){return e.extractVueListeners(this.$attrs)},showUnreadCount(){return!!this.unreadCount},menuButtonLabel(){return this.i18n.$t(`DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL`)}},watch:{$props:{deep:!0,async handler(){await this.$nextTick(),this.adjustLabelWidth()}}},mounted(){this.resizeObserver=new ResizeObserver(this.adjustLabelWidth),this.resizeObserver.observe(e.returnFirstEl(this.$el)),this.adjustLabelWidth()},beforeUnmount:function(){this.resizeObserver.disconnect()},methods:{removeClassStyleAttrs:e.removeClassStyleAttrs,adjustLabelWidth(){this.labelWidth=(e.returnFirstEl(this.$el)?.querySelector(`.d-recipe-leftbar-row__primary`)?.clientWidth||0)-((e.returnFirstEl(this.$el)?.querySelector(`.d-recipe-leftbar-row__omega`)?.clientWidth||0)+(e.returnFirstEl(this.$el)?.querySelector(`.d-recipe-leftbar-row__alpha`)?.clientWidth||0)+12)+`px`}}},l=[`data-qa`,`aria-label`,`title`,`href`],u={class:`d-recipe-leftbar-row__alpha`},d={key:0,class:`d-recipe-leftbar-row__omega`},f={class:`d-recipe-leftbar-row__action-container`},p={class:`d-recipe-leftbar-row__bottom`};function m(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-icon-headphones`),c=(0,o.resolveComponent)(`dt-emoji-text-wrapper`),m=(0,o.resolveComponent)(`dt-badge`),h=(0,o.resolveComponent)(`dt-icon-chevron-down`),g=(0,o.resolveComponent)(`dt-button`);return(0,o.openBlock)(),(0,o.createElementBlock)(`div`,{class:(0,o.normalizeClass)([`d-recipe-leftbar-row__container`,{"d-recipe-leftbar-row__container--off-duty":e.$slots.timer},e.$attrs.class]),style:(0,o.normalizeStyle)(e.$attrs.style)},[(0,o.createElementVNode)(`div`,{class:(0,o.normalizeClass)(a.leftbarContactCentersRowClasses),"data-qa":`dt-recipe-contact-centers-row`},[(0,o.createElementVNode)(`a`,(0,o.mergeProps)({class:`d-recipe-leftbar-row__primary`,"data-qa":e.$attrs[`data-qa`]??`d-recipe-leftbar-row-link`,"aria-label":a.getAriaLabel,title:n.description,href:e.$attrs.href??`javascript:void(0)`},a.removeClassStyleAttrs(e.$attrs),(0,o.toHandlers)(a.contactRowListeners,!0),{onClick:t[0]||(t[0]=t=>e.$emit(`click`,t))}),[(0,o.createElementVNode)(`div`,u,[(0,o.createVNode)(s,{size:`300`,"data-qa":`dt-recipe-leftbar-row-icon`})]),(0,o.createElementVNode)(`div`,{class:`d-recipe-leftbar-row__label`,style:(0,o.normalizeStyle)(`flex-basis: ${i.labelWidth}`)},[(0,o.createVNode)(c,{class:`d-recipe-leftbar-row__description`,"data-qa":`dt-recipe-leftbar-row-description`,size:`200`},{default:(0,o.withCtx)(()=>[(0,o.createTextVNode)((0,o.toDisplayString)(n.description),1)]),_:1})],4)],16,l),n.showActions?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,d,[e.$slots.end?(0,o.renderSlot)(e.$slots,`end`,{key:0}):(0,o.renderSlot)(e.$slots,`right`,{key:1}),(0,o.createElementVNode)(`div`,f,[a.showUnreadCount?((0,o.openBlock)(),(0,o.createBlock)(m,{key:0,class:`d-recipe-leftbar-row__unread-badge`,"data-qa":`dt-recipe-leftbar-row-unread-badge`,kind:`count`,type:`bulletin`},{default:(0,o.withCtx)(()=>[(0,o.createTextVNode)((0,o.toDisplayString)(n.unreadCount),1)]),_:1})):(0,o.createCommentVNode)(``,!0),(0,o.createVNode)(g,{class:`d-recipe-leftbar-row__action`,"data-qa":`dt-recipe-leftbar-row-action-button`,"aria-label":a.menuButtonLabel,title:a.menuButtonLabel,importance:`clear`,size:100,circle:``,onClick:t[1]||(t[1]=(0,o.withModifiers)(t=>e.$emit(`click-menu`,t),[`stop`]))},{icon:(0,o.withCtx)(()=>[(0,o.createVNode)(h,{size:`100`})]),_:1},8,[`aria-label`,`title`])])])):(0,o.createCommentVNode)(``,!0)],2),(0,o.createElementVNode)(`div`,p,[(0,o.renderSlot)(e.$slots,`timer`)])],6)}var h=t.t(c,[[`render`,m]]);exports.default=h;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../badge/badge.cjs`),r=require(`../../localization/index.cjs`),i=require(`../button/button.cjs`),a=require(`../emoji-text-wrapper/emoji-text-wrapper.cjs`);let o=require(`vue`),s=require(`@dialpad/dialtone-icons/vue3`);var c={compatConfig:{MODE:3},name:`DtRecipeContactCentersRow`,components:{DtButton:i.default,DtBadge:n.default,DtEmojiTextWrapper:a.default,DtIconHeadphones:s.DtIconHeadphones,DtIconChevronDown:s.DtIconChevronDown},inheritAttrs:!1,props:{ariaLabel:{type:String,default:``},description:{type:String,required:!0},selected:{type:Boolean,default:!1},hideActions:{type:Boolean,default:!1},unreadCount:{type:String,default:null,validator(e){return e?/^\d+\+?$/.test(e):!0}}},emits:[`click`,`click-menu`],data(){return{labelWidth:`auto`,i18n:new r.DialtoneLocalization}},computed:{leftbarContactCentersRowClasses(){return[`d-recipe-leftbar-row`,`d-recipe-leftbar-row--contact-centers`,{"d-recipe-leftbar-row__unread-count":this.showUnreadCount,"d-recipe-leftbar-row--selected":this.selected}]},getAriaLabel(){let t=isNaN(this.unreadCount)?this.unreadCount:Number(this.unreadCount);return this.ariaLabel?this.ariaLabel:e.safeConcatStrings([this.description,this.i18n.$t(`DIALTONE_UNREAD_MESSAGE_COUNT_TEXT`,{unreadCount:t})])},contactRowListeners(){return e.extractVueListeners(this.$attrs)},showUnreadCount(){return!!this.unreadCount},menuButtonLabel(){return this.i18n.$t(`DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL`)}},watch:{$props:{deep:!0,async handler(){await this.$nextTick(),this.adjustLabelWidth()}}},mounted(){this.resizeObserver=new ResizeObserver(this.adjustLabelWidth),this.resizeObserver.observe(e.returnFirstEl(this.$el)),this.adjustLabelWidth()},beforeUnmount:function(){this.resizeObserver.disconnect()},methods:{removeClassStyleAttrs:e.removeClassStyleAttrs,addClassStyleAttrs:e.addClassStyleAttrs,adjustLabelWidth(){this.labelWidth=(e.returnFirstEl(this.$el)?.querySelector(`.d-recipe-leftbar-row__primary`)?.clientWidth||0)-((e.returnFirstEl(this.$el)?.querySelector(`.d-recipe-leftbar-row__omega`)?.clientWidth||0)+(e.returnFirstEl(this.$el)?.querySelector(`.d-recipe-leftbar-row__alpha`)?.clientWidth||0)+12)+`px`}}},l=[`data-qa`,`aria-label`,`title`,`href`],u={class:`d-recipe-leftbar-row__alpha`},d={key:0,class:`d-recipe-leftbar-row__omega`},f={class:`d-recipe-leftbar-row__action-container`},p={class:`d-recipe-leftbar-row__bottom`};function m(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-icon-headphones`),c=(0,o.resolveComponent)(`dt-emoji-text-wrapper`),m=(0,o.resolveComponent)(`dt-badge`),h=(0,o.resolveComponent)(`dt-icon-chevron-down`),g=(0,o.resolveComponent)(`dt-button`);return(0,o.openBlock)(),(0,o.createElementBlock)(`div`,(0,o.mergeProps)({class:[`d-recipe-leftbar-row__container`,{"d-recipe-leftbar-row__container--off-duty":e.$slots.timer}]},a.addClassStyleAttrs(e.$attrs)),[(0,o.createElementVNode)(`div`,{class:(0,o.normalizeClass)(a.leftbarContactCentersRowClasses),"data-qa":`dt-recipe-contact-centers-row`},[(0,o.createElementVNode)(`a`,(0,o.mergeProps)({class:`d-recipe-leftbar-row__primary`,"data-qa":e.$attrs[`data-qa`]??`d-recipe-leftbar-row-link`,"aria-label":a.getAriaLabel,title:n.description,href:e.$attrs.href??`javascript:void(0)`},a.removeClassStyleAttrs(e.$attrs),(0,o.toHandlers)(a.contactRowListeners,!0),{onClick:t[0]||(t[0]=t=>e.$emit(`click`,t))}),[(0,o.createElementVNode)(`div`,u,[(0,o.createVNode)(s,{size:`300`,"data-qa":`dt-recipe-leftbar-row-icon`})]),(0,o.createElementVNode)(`div`,{class:`d-recipe-leftbar-row__label`,style:(0,o.normalizeStyle)(`flex-basis: ${i.labelWidth}`)},[(0,o.createVNode)(c,{class:`d-recipe-leftbar-row__description`,"data-qa":`dt-recipe-leftbar-row-description`,size:`200`},{default:(0,o.withCtx)(()=>[(0,o.createTextVNode)((0,o.toDisplayString)(n.description),1)]),_:1})],4)],16,l),n.hideActions?(0,o.createCommentVNode)(``,!0):((0,o.openBlock)(),(0,o.createElementBlock)(`div`,d,[(0,o.renderSlot)(e.$slots,`right`),(0,o.createElementVNode)(`div`,f,[a.showUnreadCount?((0,o.openBlock)(),(0,o.createBlock)(m,{key:0,class:`d-recipe-leftbar-row__unread-badge`,"data-qa":`dt-recipe-leftbar-row-unread-badge`,kind:`count`,type:`bulletin`},{default:(0,o.withCtx)(()=>[(0,o.createTextVNode)((0,o.toDisplayString)(n.unreadCount),1)]),_:1})):(0,o.createCommentVNode)(``,!0),(0,o.createVNode)(g,{class:`d-recipe-leftbar-row__action`,"data-qa":`dt-recipe-leftbar-row-action-button`,"aria-label":a.menuButtonLabel,title:a.menuButtonLabel,importance:`clear`,size:`xs`,circle:``,onClick:t[1]||(t[1]=(0,o.withModifiers)(t=>e.$emit(`click-menu`,t),[`stop`]))},{icon:(0,o.withCtx)(()=>[(0,o.createVNode)(h,{size:`100`})]),_:1},8,[`aria-label`,`title`])])]))],2),(0,o.createElementVNode)(`div`,p,[(0,o.renderSlot)(e.$slots,`timer`)])],16)}var h=t.t(c,[[`render`,m]]);exports.default=h;
 //# sourceMappingURL=contact-centers-row.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"contact-centers-row.cjs","names":[],"sources":["../../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-leftbar-row__container',\n      { 'd-recipe-leftbar-row__container--off-duty': $slots.timer },\n      $attrs.class,\n    ]\"\n    :style=\"$attrs.style\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"d-recipe-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'd-recipe-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"removeClassStyleAttrs($attrs)\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"d-recipe-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-recipe-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"d-recipe-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"d-recipe-leftbar-row__description\"\n            data-qa=\"dt-recipe-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </div>\n      </a>\n      <div\n        v-if=\"showActions\"\n        class=\"d-recipe-leftbar-row__omega\"\n      >\n        <!-- @slot Slot for end content -->\n        <slot\n          v-if=\"$slots.end\"\n          name=\"end\"\n        />\n        <!-- @slot @deprecated Use end -->\n        <slot\n          v-else\n          name=\"right\"\n        />\n        <div class=\"d-recipe-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"d-recipe-leftbar-row__unread-badge\"\n            data-qa=\"dt-recipe-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"d-recipe-leftbar-row__action\"\n            data-qa=\"dt-recipe-leftbar-row-action-button\"\n            :aria-label=\"menuButtonLabel\"\n            :title=\"menuButtonLabel\"\n            importance=\"clear\"\n            :size=\"100\"\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=\"d-recipe-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl } from '@/common/utils';\nimport { DtBadge } from '@/components/Badge';\nimport { DtButton } from '@/components/Button';\nimport { DtEmojiTextWrapper } from '@/components/EmojiTextWrapper';\nimport { DtIconChevronDown, DtIconHeadphones } from '@dialpad/dialtone-icons/vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\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     * Shows the unread count badge, the chevron button, and the right slot.\n     */\n    showActions: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Number of unread messages, could be a string to support '99+'\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n      validator (value) {\n        if (!value) return true;\n        return /^\\d+\\+?$/.test(value);\n      },\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      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'd-recipe-leftbar-row',\n        'd-recipe-leftbar-row--contact-centers',\n        {\n          'd-recipe-leftbar-row__unread-count': this.showUnreadCount,\n          'd-recipe-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      const count = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([\n          this.description,\n          this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: count }),\n        ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount;\n    },\n\n    menuButtonLabel () {\n      return this.i18n.$t('DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL');\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(returnFirstEl(this.$el));\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n\n    adjustLabelWidth () {\n      const labelWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"contact-centers-row.cjs","names":[],"sources":["../../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-leftbar-row__container',\n      { 'd-recipe-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"d-recipe-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'd-recipe-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"removeClassStyleAttrs($attrs)\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"d-recipe-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-recipe-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"d-recipe-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"d-recipe-leftbar-row__description\"\n            data-qa=\"dt-recipe-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=\"d-recipe-leftbar-row__omega\"\n      >\n        <slot name=\"right\" />\n        <div class=\"d-recipe-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"d-recipe-leftbar-row__unread-badge\"\n            data-qa=\"dt-recipe-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"d-recipe-leftbar-row__action\"\n            data-qa=\"dt-recipe-leftbar-row-action-button\"\n            :aria-label=\"menuButtonLabel\"\n            :title=\"menuButtonLabel\"\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=\"d-recipe-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl, addClassStyleAttrs } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DtIconChevronDown, DtIconHeadphones } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\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, could be a string to support '99+'\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n      validator (value) {\n        if (!value) return true;\n        return /^\\d+\\+?$/.test(value);\n      },\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      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'd-recipe-leftbar-row',\n        'd-recipe-leftbar-row--contact-centers',\n        {\n          'd-recipe-leftbar-row__unread-count': this.showUnreadCount,\n          'd-recipe-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      const count = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([\n          this.description,\n          this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: count }),\n        ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount;\n    },\n\n    menuButtonLabel () {\n      return this.i18n.$t('DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL');\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(returnFirstEl(this.$el));\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    adjustLabelWidth () {\n      const labelWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/contact-centers-row/contact-centers-row.js

@@ -1,21 +1,21 @@
-import { extractVueListeners as e, removeClassStyleAttrs as t, returnFirstEl as n, safeConcatStrings as r } from "../../common/utils/index.js";
-import { t as i } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import a from "../badge/badge.js";
-import { DialtoneLocalization as o } from "../../localization/index.js";
-import s from "../button/button.js";
-import c from "../emoji-text-wrapper/emoji-text-wrapper.js";
-import { createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, mergeProps as h, normalizeClass as g, normalizeStyle as _, openBlock as v, renderSlot as y, resolveComponent as b, toDisplayString as x, toHandlers as S, withCtx as C, withModifiers as w } from "vue";
-import { DtIconChevronDown as T, DtIconHeadphones as E } from "@dialpad/dialtone-icons/vue";
+import { addClassStyleAttrs as e, extractVueListeners as t, removeClassStyleAttrs as n, returnFirstEl as r, safeConcatStrings as i } from "../../common/utils/index.js";
+import { t as a } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import o from "../badge/badge.js";
+import { DialtoneLocalization as s } from "../../localization/index.js";
+import c from "../button/button.js";
+import l from "../emoji-text-wrapper/emoji-text-wrapper.js";
+import { createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, mergeProps as g, normalizeClass as _, normalizeStyle as v, openBlock as y, renderSlot as b, resolveComponent as x, toDisplayString as S, toHandlers as C, withCtx as w, withModifiers as T } from "vue";
+import { DtIconChevronDown as E, DtIconHeadphones as D } from "@dialpad/dialtone-icons/vue3";
 //#region recipes/leftbar/contact_centers_row/contact_centers_row.vue
-var D = {
+var O = {
 	compatConfig: { MODE: 3 },
 	name: "DtRecipeContactCentersRow",
 	components: {
-		DtButton: s,
-		DtBadge: a,
-		DtEmojiTextWrapper: c,
-		DtIconHeadphones: E,
-		DtIconChevronDown: T
+		DtButton: c,
+		DtBadge: o,
+		DtEmojiTextWrapper: l,
+		DtIconHeadphones: D,
+		DtIconChevronDown: E
 	},
 	inheritAttrs: !1,
 	props: {
@@ -31,9 +31,9 @@ var D = {
 			type: Boolean,
 			default: !1
 		},
-		showActions: {
+		hideActions: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		unreadCount: {
 			type: String,
@@ -47,7 +47,7 @@ var D = {
 	data() {
 		return {
 			labelWidth: "auto",
-			i18n: new o()
+			i18n: new s()
 		};
 	},
 	computed: {
@@ -63,10 +63,10 @@ var D = {
 		},
 		getAriaLabel() {
 			let e = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
-			return this.ariaLabel ? this.ariaLabel : r([this.description, this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: e })]);
+			return this.ariaLabel ? this.ariaLabel : i([this.description, this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: e })]);
 		},
 		contactRowListeners() {
-			return e(this.$attrs);
+			return t(this.$attrs);
 		},
 		showUnreadCount() {
 			return !!this.unreadCount;
@@ -82,82 +82,76 @@ var D = {
 		}
 	} },
 	mounted() {
-		this.resizeObserver = new ResizeObserver(this.adjustLabelWidth), this.resizeObserver.observe(n(this.$el)), this.adjustLabelWidth();
+		this.resizeObserver = new ResizeObserver(this.adjustLabelWidth), this.resizeObserver.observe(r(this.$el)), this.adjustLabelWidth();
 	},
 	beforeUnmount: function() {
 		this.resizeObserver.disconnect();
 	},
 	methods: {
-		removeClassStyleAttrs: t,
+		removeClassStyleAttrs: n,
+		addClassStyleAttrs: e,
 		adjustLabelWidth() {
-			this.labelWidth = (n(this.$el)?.querySelector(".d-recipe-leftbar-row__primary")?.clientWidth || 0) - ((n(this.$el)?.querySelector(".d-recipe-leftbar-row__omega")?.clientWidth || 0) + (n(this.$el)?.querySelector(".d-recipe-leftbar-row__alpha")?.clientWidth || 0) + 12) + "px";
+			this.labelWidth = (r(this.$el)?.querySelector(".d-recipe-leftbar-row__primary")?.clientWidth || 0) - ((r(this.$el)?.querySelector(".d-recipe-leftbar-row__omega")?.clientWidth || 0) + (r(this.$el)?.querySelector(".d-recipe-leftbar-row__alpha")?.clientWidth || 0) + 12) + "px";
 		}
 	}
-}, O = [
+}, k = [
 	"data-qa",
 	"aria-label",
 	"title",
 	"href"
-], k = { class: "d-recipe-leftbar-row__alpha" }, A = {
+], A = { class: "d-recipe-leftbar-row__alpha" }, j = {
 	key: 0,
 	class: "d-recipe-leftbar-row__omega"
-}, j = { class: "d-recipe-leftbar-row__action-container" }, M = { class: "d-recipe-leftbar-row__bottom" };
-function N(e, t, n, r, i, a) {
-	let o = b("dt-icon-headphones"), s = b("dt-emoji-text-wrapper"), c = b("dt-badge"), T = b("dt-icon-chevron-down"), E = b("dt-button");
-	return v(), d("div", {
-		class: g([
-			"d-recipe-leftbar-row__container",
-			{ "d-recipe-leftbar-row__container--off-duty": e.$slots.timer },
-			e.$attrs.class
-		]),
-		style: _(e.$attrs.style)
-	}, [f("div", {
-		class: g(a.leftbarContactCentersRowClasses),
+}, M = { class: "d-recipe-leftbar-row__action-container" }, N = { class: "d-recipe-leftbar-row__bottom" };
+function P(e, t, n, r, i, a) {
+	let o = x("dt-icon-headphones"), s = x("dt-emoji-text-wrapper"), c = x("dt-badge"), l = x("dt-icon-chevron-down"), E = x("dt-button");
+	return y(), f("div", g({ class: ["d-recipe-leftbar-row__container", { "d-recipe-leftbar-row__container--off-duty": e.$slots.timer }] }, a.addClassStyleAttrs(e.$attrs)), [p("div", {
+		class: _(a.leftbarContactCentersRowClasses),
 		"data-qa": "dt-recipe-contact-centers-row"
-	}, [f("a", h({
+	}, [p("a", g({
 		class: "d-recipe-leftbar-row__primary",
 		"data-qa": e.$attrs["data-qa"] ?? "d-recipe-leftbar-row-link",
 		"aria-label": a.getAriaLabel,
 		title: n.description,
 		href: e.$attrs.href ?? "javascript:void(0)"
-	}, a.removeClassStyleAttrs(e.$attrs), S(a.contactRowListeners, !0), { onClick: t[0] || (t[0] = (t) => e.$emit("click", t)) }), [f("div", k, [m(o, {
+	}, a.removeClassStyleAttrs(e.$attrs), C(a.contactRowListeners, !0), { onClick: t[0] || (t[0] = (t) => e.$emit("click", t)) }), [p("div", A, [h(o, {
 		size: "300",
 		"data-qa": "dt-recipe-leftbar-row-icon"
-	})]), f("div", {
+	})]), p("div", {
 		class: "d-recipe-leftbar-row__label",
-		style: _(`flex-basis: ${i.labelWidth}`)
-	}, [m(s, {
+		style: v(`flex-basis: ${i.labelWidth}`)
+	}, [h(s, {
 		class: "d-recipe-leftbar-row__description",
 		"data-qa": "dt-recipe-leftbar-row-description",
 		size: "200"
 	}, {
-		default: C(() => [p(x(n.description), 1)]),
+		default: w(() => [m(S(n.description), 1)]),
 		_: 1
-	})], 4)], 16, O), n.showActions ? (v(), d("div", A, [e.$slots.end ? y(e.$slots, "end", { key: 0 }) : y(e.$slots, "right", { key: 1 }), f("div", j, [a.showUnreadCount ? (v(), l(c, {
+	})], 4)], 16, k), n.hideActions ? d("", !0) : (y(), f("div", j, [b(e.$slots, "right"), p("div", M, [a.showUnreadCount ? (y(), u(c, {
 		key: 0,
 		class: "d-recipe-leftbar-row__unread-badge",
 		"data-qa": "dt-recipe-leftbar-row-unread-badge",
 		kind: "count",
 		type: "bulletin"
 	}, {
-		default: C(() => [p(x(n.unreadCount), 1)]),
+		default: w(() => [m(S(n.unreadCount), 1)]),
 		_: 1
-	})) : u("", !0), m(E, {
+	})) : d("", !0), h(E, {
 		class: "d-recipe-leftbar-row__action",
 		"data-qa": "dt-recipe-leftbar-row-action-button",
 		"aria-label": a.menuButtonLabel,
 		title: a.menuButtonLabel,
 		importance: "clear",
-		size: 100,
+		size: "xs",
 		circle: "",
-		onClick: t[1] || (t[1] = w((t) => e.$emit("click-menu", t), ["stop"]))
+		onClick: t[1] || (t[1] = T((t) => e.$emit("click-menu", t), ["stop"]))
 	}, {
-		icon: C(() => [m(T, { size: "100" })]),
+		icon: w(() => [h(l, { size: "100" })]),
 		_: 1
-	}, 8, ["aria-label", "title"])])])) : u("", !0)], 2), f("div", M, [y(e.$slots, "timer")])], 6);
+	}, 8, ["aria-label", "title"])])]))], 2), p("div", N, [b(e.$slots, "timer")])], 16);
 }
-var P = /* @__PURE__ */ i(D, [["render", N]]);
+var F = /* @__PURE__ */ a(O, [["render", P]]);
 //#endregion
-export { P as default };
+export { F as default };
 
 //# sourceMappingURL=contact-centers-row.js.map