import l from "vue";
import { DESCRIPTION_SIZE_MODIFIERS as r, LABEL_SIZE_MODIFIERS as o } from "../../common/constants/index.js";
import { SELECT_STATE_MODIFIERS as n, SELECT_SIZE_MODIFIERS as i } from "./select-menu-constants.js";
import { getUniqueString as d, getValidationState as p } from "../../common/utils/index.js";
import { MessagesMixin as c } from "../../common/mixins/input.js";
import { optionsValidator as u } from "./select-menu-validators.js";
import { n as _ } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import f from "../validation-messages/validation-messages.js";
const m = {
  name: "DtSelectMenu",
  components: { DtValidationMessages: f },
  mixins: [c],
  inheritAttrs: !1,
  props: {
    /**
     * Label for the select
     */
    label: {
      type: String,
      default: ""
    },
    /**
     * Description for the select
     */
    description: {
      type: String,
      default: ""
    },
    /**
     * Select Menu Options, overridden by default slot. Each option has the following structure:
     * `{ value: number || string (required), label: string (required) }`
     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options
     * @param {number|string} options[].value - Required - The option value
     * @param {string} options[].label - Required - The option Label
     */
    options: {
      type: Array,
      default: () => [],
      validator: (t) => u(t)
    },
    /**
     * Sets the selected value of the select menu. If it does not match a value in the options array, then it will be
     * 'unselected'.
     */
    value: {
      type: String,
      default: null
    },
    /**
     * Controls the size of the select
     * @values xs, sm, md, lg, xl
     */
    size: {
      type: String,
      default: "md",
      validator: (t) => Object.keys(i).includes(t)
    },
    /**
     * Used to customize the label container
     */
    labelClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Used to customize the description container
     */
    descriptionClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Used to customize the select
     */
    selectClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Used to customize each option, should options be provided via prop
     */
    optionClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * A set of props that are passed into the label container
     */
    labelChildProps: {
      type: Object,
      default: () => ({})
    },
    /**
     * A set of props that are passed into the description container
     */
    descriptionChildProps: {
      type: Object,
      default: () => ({})
    },
    /**
     * A set of props that are passed into each option, should options be provided via prop
     */
    optionChildProps: {
      type: Object,
      default: () => ({})
    },
    /**
     * Disabled state of the select
     * @values true, false
     */
    disabled: {
      type: Boolean,
      default: !1
    }
  },
  emits: [
    /**
     * Native input event
     *
     * @event input
     * @type {String | Number}
     */
    "input",
    /**
     * Native change event
     *
     * @event change
     * @type {String | Number}
     */
    "change"
  ],
  data() {
    return {
      LABEL_SIZE_MODIFIERS: o,
      DESCRIPTION_SIZE_MODIFIERS: r,
      SELECT_SIZE_MODIFIERS: i,
      SELECT_STATE_MODIFIERS: n
    };
  },
  computed: {
    selectListeners() {
      return {
        /* TODO
            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal
            and migration prior to upgrading to Vue 3.x
        */
        ...this.$listeners,
        /*
         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input
         * element which will result in the hander being called twice (once on the select element and once by the
         * emitted input event by the change listener).
        */
        input: () => {
        },
        change: (t) => this.emitValue(t.target.value, t)
      };
    },
    state() {
      return p(this.formattedMessages);
    },
    selectKey() {
      return d();
    },
    descriptionKey() {
      return `select-${this.selectKey}-description`;
    },
    labelAriaDetails() {
      return this.$slots.description || this.description ? this.descriptionKey : this.$attrs["aria-details"];
    }
  },
  mounted() {
    this.validateOptionsPresence();
  },
  beforeUpdate() {
    this.validateOptionsPresence();
  },
  methods: {
    emitValue(t, e) {
      this.$emit("input", t, e), this.$emit("change", t, e);
    },
    getOptionKey(t) {
      return `select-${this.selectKey}-option-${t}`;
    },
    validateOptionsPresence() {
      var t;
      ((t = this.options) == null ? void 0 : t.length) < 1 && !this.$slots.default && l.util.warn("Options are expected to be provided via prop or slot", this);
    }
  }
};
var b = function() {
  var e = this, s = e._self._c;
  return s("div", [s("label", [e.$slots.label || e.label ? s("div", e._b({ class: [
    "d-label",
    e.LABEL_SIZE_MODIFIERS[e.size],
    e.labelClass
  ], attrs: { "aria-details": e.labelAriaDetails, "data-qa": "dt-select-label" } }, "div", e.labelChildProps, !1), [e._t("label", function() {
    return [e._v(e._s(e.label))];
  })], 2) : e._e(), e.$slots.description || e.description ? s("div", e._b({ class: [
    "d-description",
    e.DESCRIPTION_SIZE_MODIFIERS[e.size],
    e.descriptionClass
  ], attrs: { id: e.descriptionKey, "data-qa": "dt-select-description" } }, "div", e.descriptionChildProps, !1), [e._t("description", function() {
    return [e._v(e._s(e.description))];
  })], 2) : e._e(), s("div", { class: [
    "d-select",
    e.SELECT_SIZE_MODIFIERS[e.size],
    e.selectClass,
    { "d-select--disabled": e.disabled }
  ], attrs: { "data-qa": "dt-select-wrapper" } }, [s("select", e._g(e._b({ ref: "selectElement", class: [
    "d-select__input",
    e.SELECT_STATE_MODIFIERS[e.state]
  ], attrs: { "data-qa": "dt-select", disabled: e.disabled }, domProps: { value: e.value } }, "select", e.$attrs, !1), e.selectListeners), [e._t("default", function() {
    return e._l(e.options, function(a) {
      return s("option", e._b({ key: e.getOptionKey(a.value), class: e.optionClass, domProps: { value: a.value } }, "option", e.optionChildProps, !1), [e._v(" " + e._s(a.label) + " ")]);
    });
  })], 2)])]), s("dt-validation-messages", e._b({ class: e.messagesClass, attrs: { "validation-messages": e.formattedMessages, "show-messages": e.showMessages, "data-qa": "dt-select-messages" } }, "dt-validation-messages", e.messagesChildProps, !1))], 1);
}, S = [], h = /* @__PURE__ */ _(
  m,
  b,
  S
);
const D = h.exports;
export {
  D as default
};
//# sourceMappingURL=select-menu.js.map
