@dialpad/dialtone-vue/dist/lib/editor/EditorToolbarDropdownButton.js

Vue component library for Dialpad's design system Dialtone

import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import t from "../button/button.js";
import n from "../dropdown/dropdown.js";
import { createBlock as r, mergeProps as i, openBlock as a, renderSlot as o, resolveComponent as s, resolveDirective as c, resolveDynamicComponent as l, withCtx as u, withDirectives as d, withKeys as f, withModifiers as p } from "vue";
//#region recipes/conversation_view/editor/EditorToolbarDropdownButton.vue
var m = {
	name: "EditorToolbardropdownButton",
	components: {
		DtButton: t,
		DtDropdown: n
	},
	props: {
		isActive: {
			type: Boolean,
			default: !1
		},
		tooltipMessage: {
			type: String,
			required: !0
		},
		dataQa: {
			type: String,
			default: ""
		},
		dropdownDataQa: {
			type: String,
			default: ""
		},
		tabindex: {
			type: Number,
			default: -1
		},
		icon: {
			type: Object,
			required: !0
		}
	},
	emits: ["shift-focus-right", "shift-focus-left"],
	data() {
		return { pendingCallback: null };
	},
	methods: { onDropdownOpened(e) {
		!e && typeof this.pendingCallback == "function" && (this.pendingCallback(), this.pendingCallback = null);
	} }
};
function h(e, t, n, m, h, g) {
	let _ = s("dt-button"), v = s("dt-dropdown"), y = c("dt-tooltip");
	return a(), r(v, {
		"data-qa": n.dropdownDataQa || `${n.dataQa}-dropdown`,
		padding: "small",
		"navigation-type": "arrow-keys",
		placement: "bottom-start",
		onOpened: g.onDropdownOpened
	}, {
		anchor: u(({ attrs: o }) => [d((a(), r(_, i({ ref: "buttonRef" }, o, {
			active: n.isActive,
			"aria-label": n.tooltipMessage,
			"data-qa": n.dataQa,
			tabindex: n.tabindex,
			importance: "clear",
			kind: "muted",
			size: "xs",
			onKeydown: [t[0] || (t[0] = f(p((t) => e.$emit("shift-focus-right"), ["stop"]), ["right"])), t[1] || (t[1] = f(p((t) => e.$emit("shift-focus-left"), ["stop"]), ["left"]))]
		}), {
			icon: u(() => [(a(), r(l(n.icon), { size: "200" }))]),
			_: 1
		}, 16, [
			"active",
			"aria-label",
			"data-qa",
			"tabindex"
		])), [[y, {
			message: n.tooltipMessage,
			placement: "top",
			externalAnchorElement: e.$refs.buttonRef?.$el
		}]])]),
		list: u(({ close: t }) => [o(e.$slots, "list", { close: (e) => {
			h.pendingCallback = e, t();
		} })]),
		_: 3
	}, 8, ["data-qa", "onOpened"]);
}
var g = /* @__PURE__ */ e(m, [["render", h]]);
//#endregion
export { g as default };

//# sourceMappingURL=EditorToolbarDropdownButton.js.map