import n from "./split-button-alpha.js";
import s from "./split-button-omega.js";
import { warnIfUnmounted as l } from "../../common/utils/index.js";
import { n as r } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import p from "../dropdown/dropdown.js";
import { ICON_POSITION_MODIFIERS as d, BUTTON_IMPORTANCE_MODIFIERS as u, BUTTON_KIND_MODIFIERS as c, BUTTON_SIZE_MODIFIERS as h } from "../button/button-constants.js";
import "./split-button-constants.js";
const f = {
  name: "DtSplitButton",
  components: {
    SplitButtonOmega: s,
    DtDropdown: p,
    SplitButtonAlpha: n
  },
  inheritAttrs: !1,
  props: {
    /**
     * Determines whether the alpha button should have active styling
     * @values true, false
     */
    alphaActive: {
      type: Boolean,
      default: !1
    },
    /**
     * Descriptive label for the alpha button
     */
    alphaAriaLabel: {
      type: String,
      default: null
    },
    /**
     * The position of the icon slot within the alpha button.
     * @values left, right, top, bottom
     */
    alphaIconPosition: {
      type: String,
      default: "left",
      validator: (e) => Object.keys(d).includes(e)
    },
    /**
     * Used to customize the alpha label container
     */
    alphaLabelClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Whether the alpha button should display a loading animation or not.
     * @values true, false
     */
    alphaLoading: {
      type: Boolean,
      default: !1
    },
    /**
     * Text shown in tooltip when you hover the alpha button,
     * required if no content is passed to default slot
     */
    alphaTooltipText: {
      type: String,
      default: void 0
    },
    /**
     * Determines whether a screenreader reads live updates of
     * the button content to the user while the button
     * is in focus.
     * @values true, false
     */
    assertiveOnFocus: {
      type: Boolean,
      default: !1
    },
    /**
     * HTML button disabled attribute
     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank">
     *  (Reference)
     * </a>
     * @values true, false
     */
    disabled: {
      type: Boolean,
      default: !1
    },
    /**
     * The direction the dropdown displays relative to the anchor.
     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end
     */
    dropdownPlacement: {
      type: String,
      default: "bottom-end"
    },
    /**
     * The fill and outline of the button associated with its visual importance.
     * @values clear, outlined, primary
     */
    importance: {
      type: String,
      default: "primary",
      validator: (e) => Object.keys(u).includes(e)
    },
    /**
     * The color of the button.
     * @values default, muted, danger, inverted
     */
    kind: {
      type: String,
      default: "default",
      validator: (e) => Object.keys(c).includes(e)
    },
    /**
     * Determines whether the omega button should have active styling
     * @values true, false
     */
    omegaActive: {
      type: Boolean,
      default: !1
    },
    /**
     * Descriptive label for the omega button
     */
    omegaAriaLabel: {
      type: String,
      default: null
    },
    /**
     * Element ID, useful in case you need to reference the button
     * as an external anchor for popover
     */
    omegaId: {
      type: String,
      default: void 0
    },
    /**
     * Text shown in tooltip when you hover the omega button,
     * required as it is an icon only button
     */
    omegaTooltipText: {
      type: String,
      default: void 0
    },
    /**
     * The size of the button.
     * @values xs, sm, md, lg, xl
     */
    size: {
      type: String,
      default: "md",
      validator: (e) => Object.keys(h).includes(e)
    },
    /**
     * Button width, accepts
     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" target="_blank">
     *   CSS width attribute
     * </a>
     * values
     */
    width: {
      type: String,
      default: null
    }
  },
  emits: [
    /**
     * Native alpha button click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "alpha-clicked",
    /**
     * Native omega button click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "omega-clicked"
  ],
  data() {
    return {
      isDropdownOpen: !1
    };
  },
  computed: {
    alphaButtonProps() {
      return {
        active: this.alphaActive,
        ariaLabel: this.alphaAriaLabel,
        assertiveOnFocus: this.assertiveOnFocus,
        disabled: this.disabled,
        iconPosition: this.alphaIconPosition,
        labelClass: this.alphaLabelClass,
        loading: this.alphaLoading,
        importance: this.importance,
        kind: this.kind,
        size: this.size,
        tooltipText: this.alphaTooltipText,
        class: this.$attrs.class
      };
    },
    omegaButtonProps() {
      return {
        id: this.omegaId,
        active: this.omegaActive,
        ariaLabel: this.omegaAriaLabel,
        disabled: this.disabled,
        importance: this.importance,
        kind: this.kind,
        size: this.size,
        tooltipText: this.omegaTooltipText,
        class: this.$attrs.class
      };
    },
    defaultSlotHasContent() {
      var e, t;
      return this.$scopedSlots.default && this.$scopedSlots.default() && ((t = (e = this.$scopedSlots.default()[0]) == null ? void 0 : e.text) == null ? void 0 : t.trim());
    },
    omegaSlotIsSet() {
      return this.$scopedSlots.omega && this.$scopedSlots.omega();
    }
  },
  created() {
    this.validateProps();
  },
  updated() {
    this.validateProps();
  },
  mounted() {
    l(this.$el, this.$options.name);
  },
  methods: {
    validateProps() {
      this.validateAlphaButtonProps(), this.validateOmegaButtonProps();
    },
    validateAlphaButtonProps() {
      var t;
      if (this.defaultSlotHasContent) return;
      ((t = this.$refs.alphaButton) == null ? void 0 : t.$scopedSlots.icon) && this.$refs.alphaButton.$scopedSlots.icon() && !this.alphaTooltipText && console.warn("alpha-tooltip-text prop must be set if alpha button has an icon only");
    },
    validateOmegaButtonProps() {
      this.omegaSlotIsSet || this.omegaTooltipText || console.warn("omega-tooltip-text prop is required as it is an icon-only button");
    }
  }
};
var m = function() {
  var t = this, a = t._self._c;
  return a("span", { staticClass: "d-split-btn", style: { width: t.width }, attrs: { "data-qa": "dt-split-button" } }, [a("split-button-alpha", t._b({ ref: "alphaButton", nativeOn: { click: function(o) {
    return t.$emit("alpha-clicked");
  } }, scopedSlots: t._u([{ key: "icon", fn: function({ size: o }) {
    return [t._t("alphaIcon", null, { size: o })];
  } }], null, !0) }, "split-button-alpha", t.alphaButtonProps, !1), [t._t("default")], 2), t._t("omega", function() {
    return [t.$slots.dropdownList ? a("dt-dropdown", { attrs: { placement: t.dropdownPlacement }, on: { click: function(o) {
      t.isDropdownOpen = !0;
    }, opened: (o) => t.isDropdownOpen = o }, scopedSlots: t._u([{ key: "anchor", fn: function(o) {
      return [a("split-button-omega", t._b({ attrs: { active: t.isDropdownOpen }, nativeOn: { click: function(i) {
        return t.$emit("omega-clicked");
      } }, scopedSlots: t._u([{ key: "icon", fn: function({ size: i }) {
        return [t._t("omegaIcon", null, { size: i })];
      } }], null, !0) }, "split-button-omega", { ...o, ...t.omegaButtonProps }, !1))];
    } }, { key: "list", fn: function({ close: o }) {
      return [t._t("dropdownList", null, { close: o })];
    } }], null, !0) }) : a("split-button-omega", t._b({ nativeOn: { click: function(o) {
      return t.$emit("omega-clicked");
    } }, scopedSlots: t._u([{ key: "icon", fn: function({ size: o }) {
      return [t._t("omegaIcon", null, { size: o })];
    } }], null, !0) }, "split-button-omega", t.omegaButtonProps, !1))];
  })], 2);
}, g = [], S = /* @__PURE__ */ r(
  f,
  m,
  g
);
const B = S.exports;
export {
  B as default
};
//# sourceMappingURL=split-button.js.map
