import { hasSlotContent as e } from "../../common/utils/index.js";
import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import n from "../loader/loader.js";
import { BUTTON_ICON_SIZES as r, BUTTON_IMPORTANCE_MODIFIERS as i, BUTTON_KIND_MODIFIERS as a, BUTTON_SIZE_MODIFIERS as o, BUTTON_TYPES as s, ICON_POSITION_MODIFIERS as c, INVALID_COMBINATION as l } from "./button-constants.js";
import { LINK_KIND_MODIFIERS as u, getLinkKindModifier as d } from "../link/link-constants.js";
import { DialtoneLocalization as f } from "../../localization/index.js";
import { createBlock as p, createCommentVNode as m, createElementBlock as h, mergeProps as g, normalizeClass as _, openBlock as v, renderSlot as y, resolveComponent as b, resolveDynamicComponent as x, toHandlers as S, warn as C, withCtx as w } from "vue";
//#region components/button/button.vue
var T = {
	compatConfig: { MODE: 3 },
	name: "DtButton",
	components: { DtLoader: n },
	props: {
		circle: {
			type: Boolean,
			default: !1
		},
		iconPosition: {
			type: String,
			default: "left",
			validator: (e) => Object.keys(c).includes(e)
		},
		importance: {
			type: String,
			default: "primary",
			validator: (e) => Object.keys(i).includes(e)
		},
		link: {
			type: Boolean,
			default: !1
		},
		linkKind: {
			type: String,
			default: "default",
			validator: (e) => Object.keys(u).includes(e)
		},
		linkInverted: {
			type: Boolean,
			default: !1
		},
		disabled: {
			type: Boolean,
			default: !1
		},
		type: {
			type: String,
			default: "button",
			validator: (e) => s.includes(e)
		},
		width: {
			type: String,
			default: null
		},
		size: {
			type: String,
			default: "md",
			validator: (e) => Object.keys(o).includes(e)
		},
		labelClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		loading: {
			type: Boolean,
			default: !1
		},
		kind: {
			type: String,
			default: "default",
			validator: (e) => Object.keys(a).includes(e)
		},
		assertiveOnFocus: {
			type: Boolean,
			default: !1
		},
		active: {
			type: Boolean,
			default: !1
		},
		to: {
			type: [String, Object],
			default: null
		},
		href: {
			type: String,
			default: null
		},
		target: {
			type: String,
			default: null
		},
		rel: {
			type: String,
			default: null
		},
		replace: {
			type: Boolean,
			default: !1
		}
	},
	emits: ["focusin", "focusout"],
	data() {
		return {
			ICON_POSITION_MODIFIERS: c,
			isInFocus: !1,
			hasSlotContent: e,
			i18n: new f()
		};
	},
	computed: {
		computedTag() {
			return this.to ? this.resolveRouterLink() : this.href ? "a" : "button";
		},
		isNativeButton() {
			return !this.to && !this.href;
		},
		computedAttrs() {
			return this.to ? {
				to: this.to,
				replace: this.replace,
				...this.disabled && {
					"aria-disabled": "true",
					tabindex: "-1"
				}
			} : this.href ? {
				href: this.disabled ? null : this.href,
				target: this.target,
				rel: this.rel,
				...this.disabled && {
					"aria-disabled": "true",
					tabindex: "-1"
				}
			} : {
				type: this.type,
				disabled: this.disabled
			};
		},
		computedListeners() {
			let e = {
				focusin: (e) => {
					this.isInFocus = this.assertiveOnFocus, this.$emit("focusin", e);
				},
				focusout: (e) => {
					this.isInFocus = !1, this.$emit("focusout", e);
				}
			};
			return this.isNativeButton || (this.disabled && (e.click = (e) => {
				e.preventDefault(), e.stopImmediatePropagation();
			}), e.keydown = (e) => {
				(e.key === " " || e.code === "Space") && (e.preventDefault(), this.disabled || e.target.click());
			}), e;
		},
		computedAriaLive() {
			return this.assertiveOnFocus && this.isInFocus ? "assertive" : this.$attrs.ariaLive;
		},
		iconSize() {
			return r[this.size];
		},
		loaderSize() {
			return r[this.size];
		}
	},
	watch: { $props: {
		deep: !0,
		immediate: !0,
		handler() {
			process.env.NODE_ENV !== "production" && (this.circle && this.link && C("You cannot enable circle and link at the same time", this), this.isInvalidPropCombination(this.circle, this.kind, this.importance));
		}
	} },
	methods: {
		resolveRouterLink() {
			try {
				return b("RouterLink");
			} catch {
				return C("DtButton: \"to\" prop requires vue-router. Falling back to <a>."), "a";
			}
		},
		buttonClasses() {
			return this.link ? [
				"d-link",
				d(this.linkKind, this.linkInverted),
				o[this.size]
			] : this.kind === "unstyled" ? ["d-btn--unstyled"] : [
				"d-btn",
				i[this.importance],
				a[this.kind],
				o[this.size],
				{
					"d-btn--circle": this.circle,
					"d-btn--loading": this.loading,
					"d-btn--icon-only": this.isIconOnly(),
					"d-btn--vertical": this.isVerticalIconLayout(),
					"d-btn--active": this.active
				}
			];
		},
		isInvalidPropCombination(e, t, n) {
			if (this.kind === "unstyled") return !0;
			for (let r of l) if (e === r.circle && t === r.kind && n === r.importance) return C(r.message), !1;
			return !0;
		},
		shouldRenderIcon() {
			return e(this.$slots.icon) && !this.link;
		},
		isIconOnly() {
			return this.shouldRenderIcon() && !e(this.$slots.default);
		},
		isVerticalIconLayout() {
			return !this.isIconOnly() && ["top", "bottom"].includes(this.iconPosition);
		}
	}
};
function E(e, t, n, r, i, a) {
	let o = b("dt-loader");
	return v(), p(x(a.computedTag), g({
		class: ["base-button__button", a.buttonClasses()],
		"data-qa": "dt-button",
		style: { width: n.width },
		"aria-live": a.computedAriaLive,
		"aria-label": n.loading ? i.i18n.$t("DIALTONE_LOADING") : e.$attrs["aria-label"]
	}, a.computedAttrs, S(a.computedListeners)), {
		default: w(() => [
			n.loading && n.kind !== "unstyled" ? (v(), p(o, {
				key: 0,
				class: "d-btn__loader",
				size: a.loaderSize,
				"aria-hidden": "true"
			}, null, 8, ["size"])) : m("", !0),
			a.shouldRenderIcon() ? (v(), h("span", {
				key: 1,
				"data-qa": "dt-button-icon",
				class: _(["base-button__icon", {
					"d-btn__icon": n.kind !== "unstyled",
					[i.ICON_POSITION_MODIFIERS[n.iconPosition]]: n.kind !== "unstyled"
				}])
			}, [y(e.$slots, "icon", { iconSize: a.iconSize })], 2)) : m("", !0),
			i.hasSlotContent(e.$slots.default) ? (v(), h("span", {
				key: 2,
				"data-qa": "dt-button-label",
				class: _([
					"base-button__label",
					{ "d-btn__label": n.kind !== "unstyled" },
					n.labelClass
				])
			}, [y(e.$slots, "default")], 2)) : m("", !0)
		]),
		_: 3
	}, 16, [
		"class",
		"style",
		"aria-live",
		"aria-label"
	]);
}
var D = /* @__PURE__ */ t(T, [["render", E]]);
//#endregion
export { D as default };

//# sourceMappingURL=button.js.map