@dialpad/dialtone/dist/vue3/lib/callbar-button-with-dropdown/callbar-button-with-dropdown.js

Dialpad's Dialtone design system monorepo

import e, { addClassStyleAttrs as t, removeClassStyleAttrs as n, returnFirstEl as r, warnIfUnmounted as i } from "../../common/utils/index.js";
import { t as a } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { DialtoneLocalization as o } from "../../localization/index.js";
import s from "../button/button.js";
import c from "../dropdown/dropdown.js";
import { CALLBAR_BUTTON_VALID_WIDTH_SIZE as l } from "../callbar-button/callbar-button-constants.js";
import u from "../callbar-button/callbar-button.js";
import { createBlock as d, createCommentVNode as f, createElementBlock as p, createVNode as m, mergeProps as h, normalizeClass as g, openBlock as _, renderSlot as v, resolveComponent as y, withCtx as b } from "vue";
import { DtIconChevronUp as x } from "@dialpad/dialtone-icons/vue3";
//#region recipes/buttons/callbar_button_with_dropdown/callbar_button_with_dropdown.vue
var S = {
	name: "DtRecipeCallbarButtonWithDropdown",
	components: {
		DtRecipeCallbarButton: u,
		DtDropdown: c,
		DtButton: s,
		DtIconChevronUp: x
	},
	inheritAttrs: !1,
	props: {
		id: {
			type: String,
			default() {
				return e.getUniqueString();
			}
		},
		ariaLabel: {
			type: String,
			default: null,
			validator: (e) => e || (void 0).$slots.default
		},
		placement: {
			type: String,
			default: "top"
		},
		fallbackPlacements: {
			type: Array,
			default: () => ["auto"]
		},
		disabled: {
			type: Boolean,
			default: !1
		},
		forceShowArrow: {
			type: Boolean,
			default: !1
		},
		active: {
			type: Boolean,
			default: !1
		},
		danger: {
			type: Boolean,
			default: !1
		},
		onClick: {
			type: Function,
			default: null
		},
		buttonClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		textClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		buttonWidthSize: {
			type: String,
			default: "xl",
			validator: (e) => l.includes(e)
		},
		invertedTooltip: {
			type: Boolean,
			default: !1
		},
		showTooltip: {
			type: Boolean,
			default: null
		},
		tooltipText: {
			type: String,
			default: void 0
		},
		tooltipDelay: {
			type: Boolean,
			default: void 0
		}
	},
	emits: [
		"arrow-click",
		"click",
		"opened"
	],
	data() {
		return {
			open: !1,
			i18n: new o()
		};
	},
	computed: {
		showArrowButton() {
			return this.forceShowArrow || !this.disabled;
		},
		isCompactMode() {
			return this.buttonWidthSize === "sm" || this.buttonWidthSize === "md";
		},
		arrowButtonLabel() {
			return this.i18n.$t("DIALTONE_CALLBAR_BUTTON_WITH_DROPDOWN_ARROW_BUTTON_ARIA_LABEL");
		}
	},
	mounted() {
		i(r(this.$el), this.$options.name);
	},
	methods: {
		removeClassStyleAttrs: n,
		addClassStyleAttrs: t,
		arrowClick(e) {
			return this.$emit("arrow-click", e), this.toggleOpen();
		},
		toggleOpen() {
			return this.open = !this.open;
		},
		syncOpenState() {
			this.open = this.openDropdown;
		},
		buttonClick(e) {
			this.$props.onClick ? this.$emit("click", e) : this.arrowClick(e);
		},
		onModalIsOpened(e) {
			this.open = e, this.$emit("opened", e);
		}
	}
};
function C(e, t, n, r, i, a) {
	let o = y("dt-recipe-callbar-button"), s = y("dt-icon-chevron-up"), c = y("dt-button"), l = y("dt-dropdown");
	return _(), p("div", h({ class: "dt-recipe--callbar-button-with-dropdown" }, a.addClassStyleAttrs(e.$attrs)), [m(o, {
		active: n.active,
		"aria-label": n.ariaLabel,
		"button-class": n.buttonClass,
		"button-width-size": n.buttonWidthSize,
		danger: n.danger,
		disabled: n.disabled,
		"inverted-tooltip": n.invertedTooltip,
		"show-tooltip": n.showTooltip,
		"text-class": n.textClass,
		"tooltip-delay": n.tooltipDelay,
		"tooltip-text": n.tooltipText,
		class: "dt-recipe--callbar-button-with-dropdown--main-button",
		onClick: a.buttonClick
	}, {
		icon: b(() => [v(e.$slots, "icon")]),
		tooltip: b(() => [v(e.$slots, "tooltip")]),
		default: b(() => [v(e.$slots, "default")]),
		_: 3
	}, 8, [
		"active",
		"aria-label",
		"button-class",
		"button-width-size",
		"danger",
		"disabled",
		"inverted-tooltip",
		"show-tooltip",
		"text-class",
		"tooltip-delay",
		"tooltip-text",
		"onClick"
	]), a.showArrowButton ? (_(), d(l, h({
		key: 0,
		id: n.id,
		"fallback-placements": n.fallbackPlacements,
		open: i.open,
		modal: !1,
		placement: n.placement,
		class: "dt-recipe--callbar-button-with-dropdown--dropdown-wrapper",
		padding: "none"
	}, a.removeClassStyleAttrs(e.$attrs), { onOpened: a.onModalIsOpened }), {
		anchor: b(() => [m(c, {
			active: i.open,
			class: g(["dt-recipe--callbar-button-with-dropdown--arrow", { "dt-recipe--callbar-button-with-dropdown--arrow--large": !a.isCompactMode }]),
			circle: !0,
			importance: "clear",
			size: "lg",
			"aria-label": a.arrowButtonLabel,
			title: a.arrowButtonLabel,
			width: "2rem",
			onClick: a.arrowClick
		}, {
			icon: b(() => [m(s, {
				class: "dt-recipe--callbar-button-with-dropdown--arrow__icon",
				size: "200"
			})]),
			_: 1
		}, 8, [
			"active",
			"class",
			"aria-label",
			"title",
			"onClick"
		])]),
		list: b(({ close: t }) => [v(e.$slots, "list", { close: t })]),
		_: 3
	}, 16, [
		"id",
		"fallback-placements",
		"open",
		"placement",
		"onOpened"
	])) : f("", !0)], 16);
}
var w = /* @__PURE__ */ a(S, [["render", C]]);
//#endregion
export { w as default };

//# sourceMappingURL=callbar-button-with-dropdown.js.map