@dialpad/dialtone-vue 2.126.0 → 2.127.1

package/dist/lib/select-menu.cjs

@@ -0,0 +1,283 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Vue = require("vue");
+const common_constants = require("../common/constants.cjs");
+const common_utils = require("../common/utils.cjs");
+const input = require("../chunks/input-Axw-wFj2.js");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_validationMessages = require("./validation-messages.cjs");
+require("../common/validators.cjs");
+const SELECT_SIZE_MODIFIERS = {
+  xs: "d-select--xs",
+  sm: "d-select--sm",
+  md: "",
+  lg: "d-select--lg",
+  xl: "d-select--xl"
+};
+const SELECT_STATE_MODIFIERS = {
+  error: "d-select__input--error",
+  warning: "d-select__input--warning",
+  success: "d-select__input--success"
+};
+const hasValidOptionIndex = (option) => !option.index || typeof option.index === "number";
+const hasValidOptionValue = (option) => {
+  if (!option.value) {
+    return false;
+  }
+  return typeof option.value === "string" || typeof option.value === "number";
+};
+const hasValidOptionLabel = (option) => {
+  if (!option.label) {
+    return false;
+  }
+  return typeof option.label === "string";
+};
+const optionsValidator = (options) => {
+  if (!options) {
+    return true;
+  }
+  return options.every((option) => {
+    if (!hasValidOptionIndex(option)) {
+      return false;
+    }
+    if (!hasValidOptionValue(option)) {
+      return false;
+    }
+    if (!hasValidOptionLabel(option)) {
+      return false;
+    }
+    return true;
+  });
+};
+const _sfc_main = {
+  name: "DtSelectMenu",
+  components: { DtValidationMessages: lib_validationMessages.DtValidationMessages },
+  mixins: [input.MessagesMixin],
+  inheritAttrs: false,
+  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:
+     * `{ index: number (optional), 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} options[].index - Optional - The index of the option
+     * @param {number|string} options[].value - Required - The option value
+     * @param {string} options[].label - Required - The option Label
+     */
+    options: {
+      type: Array,
+      default: () => [],
+      validator: (options) => optionsValidator(options)
+    },
+    /**
+     * 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: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s)
+    },
+    /**
+     * 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: false
+    }
+  },
+  emits: [
+    /**
+     * Native input event
+     *
+     * @event input
+     * @type {String | Number}
+     */
+    "input",
+    /**
+     * Native change event
+     *
+     * @event change
+     * @type {String | Number}
+     */
+    "change"
+  ],
+  data() {
+    return {
+      LABEL_SIZE_MODIFIERS: common_constants.LABEL_SIZE_MODIFIERS,
+      DESCRIPTION_SIZE_MODIFIERS: common_constants.DESCRIPTION_SIZE_MODIFIERS,
+      SELECT_SIZE_MODIFIERS,
+      SELECT_STATE_MODIFIERS
+    };
+  },
+  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: (event) => this.emitValue(event.target.value, event)
+      };
+    },
+    state() {
+      return common_utils.getValidationState(this.formattedMessages);
+    },
+    selectKey() {
+      return common_utils.getUniqueString();
+    },
+    descriptionKey() {
+      return `select-${this.selectKey}-description`;
+    },
+    labelAriaDetails() {
+      if (this.$slots.description || this.description) {
+        return this.descriptionKey;
+      }
+      return this.$attrs["aria-details"];
+    }
+  },
+  mounted() {
+    this.validateOptionsPresence();
+  },
+  beforeUpdate() {
+    this.validateOptionsPresence();
+  },
+  methods: {
+    emitValue(value, event) {
+      this.$emit("input", value, event);
+      this.$emit("change", value, event);
+    },
+    getOptionKey(value) {
+      return `select-${this.selectKey}-option-${value}`;
+    },
+    validateOptionsPresence() {
+      var _a;
+      if (((_a = this.options) == null ? void 0 : _a.length) < 1 && !this.$slots.default) {
+        Vue.util.warn("Options are expected to be provided via prop or slot", this);
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", [_c("label", [_vm.$slots.label || _vm.label ? _c("div", _vm._b({ class: [
+    "d-label",
+    _vm.LABEL_SIZE_MODIFIERS[_vm.size],
+    _vm.labelClass
+  ], attrs: { "aria-details": _vm.labelAriaDetails, "data-qa": "dt-select-label" } }, "div", _vm.labelChildProps, false), [_vm._t("label", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e(), _vm.$slots.description || _vm.description ? _c("div", _vm._b({ class: [
+    "d-description",
+    _vm.DESCRIPTION_SIZE_MODIFIERS[_vm.size],
+    _vm.descriptionClass
+  ], attrs: { "id": _vm.descriptionKey, "data-qa": "dt-select-description" } }, "div", _vm.descriptionChildProps, false), [_vm._t("description", function() {
+    return [_vm._v(_vm._s(_vm.description))];
+  })], 2) : _vm._e(), _c("div", { class: [
+    "d-select",
+    _vm.SELECT_SIZE_MODIFIERS[_vm.size],
+    _vm.selectClass,
+    { "d-select--disabled": _vm.disabled }
+  ], attrs: { "data-qa": "dt-select-wrapper" } }, [_c("select", _vm._g(_vm._b({ ref: "selectElement", class: [
+    "d-select__input",
+    _vm.SELECT_STATE_MODIFIERS[_vm.state]
+  ], attrs: { "data-qa": "dt-select", "disabled": _vm.disabled }, domProps: { "value": _vm.value } }, "select", _vm.$attrs, false), _vm.selectListeners), [_vm._t("default", function() {
+    return _vm._l(_vm.options, function(option) {
+      return _c("option", _vm._b({ key: _vm.getOptionKey(option.value), class: _vm.optionClass, domProps: { "value": option.value } }, "option", _vm.optionChildProps, false), [_vm._v(" " + _vm._s(option.label) + " ")]);
+    });
+  })], 2)])]), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.formattedMessages, "show-messages": _vm.showMessages, "data-qa": "dt-select-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const select_menu = __component__.exports;
+exports.DtSelectMenu = select_menu;
+exports.SELECT_SIZE_MODIFIERS = SELECT_SIZE_MODIFIERS;
+exports.SELECT_STATE_MODIFIERS = SELECT_STATE_MODIFIERS;
+//# sourceMappingURL=select-menu.cjs.map

package/dist/lib/select-menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-menu.cjs","sources":["../../components/select_menu/select_menu_constants.js","../../components/select_menu/select_menu_validators.js","../../components/select_menu/select_menu.vue"],"sourcesContent":["export const SELECT_SIZE_MODIFIERS = {\n  xs: 'd-select--xs',\n  sm: 'd-select--sm',\n  md: '',\n  lg: 'd-select--lg',\n  xl: 'd-select--xl',\n};\n\nexport const SELECT_STATE_MODIFIERS = {\n  error: 'd-select__input--error',\n  warning: 'd-select__input--warning',\n  success: 'd-select__input--success',\n};\n\nexport default {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n};\n","const hasValidOptionIndex = option => !option.index || typeof option.index === 'number';\n\nconst hasValidOptionValue = option => {\n  if (!option.value) {\n    return false;\n  }\n\n  return typeof option.value === 'string' || typeof option.value === 'number';\n};\n\nconst hasValidOptionLabel = option => {\n  if (!option.label) {\n    return false;\n  }\n\n  return typeof option.label === 'string';\n};\n\nexport const optionsValidator = options => {\n  if (!options) {\n    return true;\n  }\n\n  return options.every(option => {\n    if (!hasValidOptionIndex(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionValue(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionLabel(option)) {\n      return false;\n    }\n\n    return true;\n  });\n};\n","<template>\n  <div>\n    <label>\n      <div\n        v-if=\"$slots.label || label\"\n        :aria-details=\"labelAriaDetails\"\n        :class=\"[\n          'd-label',\n          LABEL_SIZE_MODIFIERS[size],\n          labelClass,\n        ]\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"dt-select-label\"\n      >\n        <!-- @slot Slot for label, defaults to label prop -->\n        <slot name=\"label\">{{ label }}</slot>\n      </div>\n      <div\n        v-if=\"$slots.description || description\"\n        :id=\"descriptionKey\"\n        :class=\"[\n          'd-description',\n          DESCRIPTION_SIZE_MODIFIERS[size],\n          descriptionClass,\n        ]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"dt-select-description\"\n      >\n        <!-- @slot Slot for description, defaults to description prop -->\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n      <div\n        :class=\"[\n          'd-select',\n          SELECT_SIZE_MODIFIERS[size],\n          selectClass,\n          { 'd-select--disabled': disabled },\n        ]\"\n        data-qa=\"dt-select-wrapper\"\n      >\n        <select\n          ref=\"selectElement\"\n          :class=\"[\n            'd-select__input',\n            SELECT_STATE_MODIFIERS[state],\n          ]\"\n          v-bind=\"$attrs\"\n          :value=\"value\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\n          v-on=\"selectListeners\"\n        >\n          <!-- @slot Slot for select menu options, defaults to options prop -->\n          <slot>\n            <option\n              v-for=\"option in options\"\n              :key=\"getOptionKey(option.value)\"\n              :value=\"option.value\"\n              :class=\"optionClass\"\n              v-bind=\"optionChildProps\"\n            >\n              {{ option.label }}\n            </option>\n          </slot>\n        </select>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-select-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport {\n  LABEL_SIZE_MODIFIERS,\n  DESCRIPTION_SIZE_MODIFIERS,\n} from '@/common/constants';\nimport {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n} from './select_menu_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n} from '@/common/utils';\nimport { MessagesMixin } from '@/common/mixins/input';\nimport { optionsValidator } from './select_menu_validators.js';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * A select menu is an input control that allows users to choose one option from a list.\n * @property {Boolean} disabled attribute\n * @property {String} name attribute\n * @property {String} value attribute\n * @see https://dialtone.dialpad.com/components/select.html\n */\nexport default {\n  name: 'DtSelectMenu',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Label for the select\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Description for the select\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Select Menu Options, overridden by default slot. Each option has the following structure:\n     * `{ index: number (optional), value: number || string (required), label: string (required) }`\n     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options\n     * @param {number} options[].index - Optional - The index of the option\n     * @param {number|string} options[].value - Required - The option value\n     * @param {string} options[].label - Required - The option Label\n     */\n    options: {\n      type: Array,\n      default: () => [],\n      validator: options => optionsValidator(options),\n    },\n\n    /**\n     * Sets the selected value of the select menu. If it does not match a value in the options array, then it will be\n     * 'unselected'.\n     */\n    value: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls the size of the select\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the select\n     */\n    selectClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize each option, should options be provided via prop\n     */\n    optionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into each option, should options be provided via prop\n     */\n    optionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Disabled state of the select\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n\n    /**\n     * Native change event\n     *\n     * @event change\n     * @type {String | Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      LABEL_SIZE_MODIFIERS,\n      DESCRIPTION_SIZE_MODIFIERS,\n      SELECT_SIZE_MODIFIERS,\n      SELECT_STATE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    selectListeners () {\n      return {\n        /* TODO\n            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n            and migration prior to upgrading to Vue 3.x\n        */\n        ...this.$listeners,\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the hander being called twice (once on the select element and once by the\n         * emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value, event),\n      };\n    },\n\n    state () {\n      return getValidationState(this.formattedMessages);\n    },\n\n    selectKey () {\n      return getUniqueString();\n    },\n\n    descriptionKey () {\n      return `select-${this.selectKey}-description`;\n    },\n\n    labelAriaDetails () {\n      if (this.$slots.description || this.description) {\n        return this.descriptionKey;\n      }\n\n      return this.$attrs['aria-details'];\n    },\n  },\n\n  mounted () {\n    this.validateOptionsPresence();\n  },\n\n  beforeUpdate () {\n    this.validateOptionsPresence();\n  },\n\n  methods: {\n    emitValue (value, event) {\n      this.$emit('input', value, event);\n      this.$emit('change', value, event);\n    },\n\n    getOptionKey (value) {\n      return `select-${this.selectKey}-option-${value}`;\n    },\n\n    validateOptionsPresence () {\n      if (this.options?.length < 1 && !this.$slots.default) {\n        Vue.util.warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtValidationMessages","MessagesMixin","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","getValidationState","getUniqueString"],"mappings":"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"}

package/dist/lib/select-menu.js

@@ -1,25 +1,57 @@
-import i from "vue";
-import { LABEL_SIZE_MODIFIERS as r, DESCRIPTION_SIZE_MODIFIERS as n } from "./constants.js";
-import { getValidationState as d, getUniqueString as o } from "./utils.js";
-import { M as c } from "../chunks/input-1tm09l_-.js";
-import { n as p } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { DtValidationMessages as u } from "./validation-messages.js";
-import "./validators.js";
-const l = {
+import Vue from "vue";
+import { LABEL_SIZE_MODIFIERS, DESCRIPTION_SIZE_MODIFIERS } from "../common/constants.js";
+import { getValidationState, getUniqueString } from "../common/utils.js";
+import { MessagesMixin } from "../chunks/input-6kbd8Pju.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtValidationMessages } from "./validation-messages.js";
+import "../common/validators.js";
+const SELECT_SIZE_MODIFIERS = {
   xs: "d-select--xs",
   sm: "d-select--sm",
   md: "",
   lg: "d-select--lg",
   xl: "d-select--xl"
-}, f = {
+};
+const SELECT_STATE_MODIFIERS = {
   error: "d-select__input--error",
   warning: "d-select__input--warning",
   success: "d-select__input--success"
-}, _ = (t) => !t.index || typeof t.index == "number", m = (t) => t.value ? typeof t.value == "string" || typeof t.value == "number" : !1, b = (t) => t.label ? typeof t.label == "string" : !1, g = (t) => t ? t.every((e) => !(!_(e) || !m(e) || !b(e))) : !0, h = {
+};
+const hasValidOptionIndex = (option) => !option.index || typeof option.index === "number";
+const hasValidOptionValue = (option) => {
+  if (!option.value) {
+    return false;
+  }
+  return typeof option.value === "string" || typeof option.value === "number";
+};
+const hasValidOptionLabel = (option) => {
+  if (!option.label) {
+    return false;
+  }
+  return typeof option.label === "string";
+};
+const optionsValidator = (options) => {
+  if (!options) {
+    return true;
+  }
+  return options.every((option) => {
+    if (!hasValidOptionIndex(option)) {
+      return false;
+    }
+    if (!hasValidOptionValue(option)) {
+      return false;
+    }
+    if (!hasValidOptionLabel(option)) {
+      return false;
+    }
+    return true;
+  });
+};
+const _sfc_main = {
   name: "DtSelectMenu",
-  components: { DtValidationMessages: u },
-  mixins: [c],
-  inheritAttrs: !1,
+  components: { DtValidationMessages },
+  mixins: [MessagesMixin],
+  inheritAttrs: false,
   props: {
     /**
      * Label for the select
@@ -46,7 +78,7 @@ const l = {
     options: {
       type: Array,
       default: () => [],
-      validator: (t) => g(t)
+      validator: (options) => optionsValidator(options)
     },
     /**
      * Sets the selected value of the select menu. If it does not match a value in the options array, then it will be
@@ -63,7 +95,7 @@ const l = {
     size: {
       type: String,
       default: "md",
-      validator: (t) => Object.keys(l).includes(t)
+      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s)
     },
     /**
      * Used to customize the label container
@@ -120,7 +152,7 @@ const l = {
      */
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
   emits: [
@@ -141,10 +173,10 @@ const l = {
   ],
   data() {
     return {
-      LABEL_SIZE_MODIFIERS: r,
-      DESCRIPTION_SIZE_MODIFIERS: n,
-      SELECT_SIZE_MODIFIERS: l,
-      SELECT_STATE_MODIFIERS: f
+      LABEL_SIZE_MODIFIERS,
+      DESCRIPTION_SIZE_MODIFIERS,
+      SELECT_SIZE_MODIFIERS,
+      SELECT_STATE_MODIFIERS
     };
   },
   computed: {
@@ -162,20 +194,23 @@ const l = {
         */
         input: () => {
         },
-        change: (t) => this.emitValue(t.target.value, t)
+        change: (event) => this.emitValue(event.target.value, event)
       };
     },
     state() {
-      return d(this.formattedMessages);
+      return getValidationState(this.formattedMessages);
     },
     selectKey() {
-      return o();
+      return getUniqueString();
     },
     descriptionKey() {
       return `select-${this.selectKey}-description`;
     },
     labelAriaDetails() {
-      return this.$slots.description || this.description ? this.descriptionKey : this.$attrs["aria-details"];
+      if (this.$slots.description || this.description) {
+        return this.descriptionKey;
+      }
+      return this.$attrs["aria-details"];
     }
   },
   mounted() {
@@ -185,59 +220,64 @@ const l = {
     this.validateOptionsPresence();
   },
   methods: {
-    emitValue(t, e) {
-      this.$emit("input", t, e), this.$emit("change", t, e);
+    emitValue(value, event) {
+      this.$emit("input", value, event);
+      this.$emit("change", value, event);
     },
-    getOptionKey(t) {
-      return `select-${this.selectKey}-option-${t}`;
+    getOptionKey(value) {
+      return `select-${this.selectKey}-option-${value}`;
     },
     validateOptionsPresence() {
-      var t;
-      ((t = this.options) == null ? void 0 : t.length) < 1 && !this.$slots.default && i.util.warn("Options are expected to be provided via prop or slot", this);
+      var _a;
+      if (((_a = this.options) == null ? void 0 : _a.length) < 1 && !this.$slots.default) {
+        Vue.util.warn("Options are expected to be provided via prop or slot", this);
+      }
     }
   }
 };
-var S = function() {
-  var e = this, s = e._self._c;
-  return s("div", [s("label", [e.$slots.label || e.label ? s("div", e._b({ class: [
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", [_c("label", [_vm.$slots.label || _vm.label ? _c("div", _vm._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: [
+    _vm.LABEL_SIZE_MODIFIERS[_vm.size],
+    _vm.labelClass
+  ], attrs: { "aria-details": _vm.labelAriaDetails, "data-qa": "dt-select-label" } }, "div", _vm.labelChildProps, false), [_vm._t("label", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e(), _vm.$slots.description || _vm.description ? _c("div", _vm._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: [
+    _vm.DESCRIPTION_SIZE_MODIFIERS[_vm.size],
+    _vm.descriptionClass
+  ], attrs: { "id": _vm.descriptionKey, "data-qa": "dt-select-description" } }, "div", _vm.descriptionChildProps, false), [_vm._t("description", function() {
+    return [_vm._v(_vm._s(_vm.description))];
+  })], 2) : _vm._e(), _c("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: [
+    _vm.SELECT_SIZE_MODIFIERS[_vm.size],
+    _vm.selectClass,
+    { "d-select--disabled": _vm.disabled }
+  ], attrs: { "data-qa": "dt-select-wrapper" } }, [_c("select", _vm._g(_vm._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) + " ")]);
+    _vm.SELECT_STATE_MODIFIERS[_vm.state]
+  ], attrs: { "data-qa": "dt-select", "disabled": _vm.disabled }, domProps: { "value": _vm.value } }, "select", _vm.$attrs, false), _vm.selectListeners), [_vm._t("default", function() {
+    return _vm._l(_vm.options, function(option) {
+      return _c("option", _vm._b({ key: _vm.getOptionKey(option.value), class: _vm.optionClass, domProps: { "value": option.value } }, "option", _vm.optionChildProps, false), [_vm._v(" " + _vm._s(option.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);
-}, y = [], v = /* @__PURE__ */ p(
-  h,
-  S,
-  y,
-  !1,
+  })], 2)])]), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.formattedMessages, "show-messages": _vm.showMessages, "data-qa": "dt-select-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const x = v.exports;
+const select_menu = __component__.exports;
 export {
-  x as DtSelectMenu,
-  l as SELECT_SIZE_MODIFIERS,
-  f as SELECT_STATE_MODIFIERS
+  select_menu as DtSelectMenu,
+  SELECT_SIZE_MODIFIERS,
+  SELECT_STATE_MODIFIERS
 };
 //# sourceMappingURL=select-menu.js.map

package/dist/lib/select-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-menu.js","sources":["../../components/select_menu/select_menu_constants.js","../../components/select_menu/select_menu_validators.js","../../components/select_menu/select_menu.vue"],"sourcesContent":["export const SELECT_SIZE_MODIFIERS = {\n  xs: 'd-select--xs',\n  sm: 'd-select--sm',\n  md: '',\n  lg: 'd-select--lg',\n  xl: 'd-select--xl',\n};\n\nexport const SELECT_STATE_MODIFIERS = {\n  error: 'd-select__input--error',\n  warning: 'd-select__input--warning',\n  success: 'd-select__input--success',\n};\n\nexport default {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n};\n","const hasValidOptionIndex = option => !option.index || typeof option.index === 'number';\n\nconst hasValidOptionValue = option => {\n  if (!option.value) {\n    return false;\n  }\n\n  return typeof option.value === 'string' || typeof option.value === 'number';\n};\n\nconst hasValidOptionLabel = option => {\n  if (!option.label) {\n    return false;\n  }\n\n  return typeof option.label === 'string';\n};\n\nexport const optionsValidator = options => {\n  if (!options) {\n    return true;\n  }\n\n  return options.every(option => {\n    if (!hasValidOptionIndex(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionValue(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionLabel(option)) {\n      return false;\n    }\n\n    return true;\n  });\n};\n","<template>\n  <div>\n    <label>\n      <div\n        v-if=\"$slots.label || label\"\n        :aria-details=\"labelAriaDetails\"\n        :class=\"[\n          'd-label',\n          LABEL_SIZE_MODIFIERS[size],\n          labelClass,\n        ]\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"dt-select-label\"\n      >\n        <!-- @slot Slot for label, defaults to label prop -->\n        <slot name=\"label\">{{ label }}</slot>\n      </div>\n      <div\n        v-if=\"$slots.description || description\"\n        :id=\"descriptionKey\"\n        :class=\"[\n          'd-description',\n          DESCRIPTION_SIZE_MODIFIERS[size],\n          descriptionClass,\n        ]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"dt-select-description\"\n      >\n        <!-- @slot Slot for description, defaults to description prop -->\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n      <div\n        :class=\"[\n          'd-select',\n          SELECT_SIZE_MODIFIERS[size],\n          selectClass,\n          { 'd-select--disabled': disabled },\n        ]\"\n        data-qa=\"dt-select-wrapper\"\n      >\n        <select\n          ref=\"selectElement\"\n          :class=\"[\n            'd-select__input',\n            SELECT_STATE_MODIFIERS[state],\n          ]\"\n          v-bind=\"$attrs\"\n          :value=\"value\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\n          v-on=\"selectListeners\"\n        >\n          <!-- @slot Slot for select menu options, defaults to options prop -->\n          <slot>\n            <option\n              v-for=\"option in options\"\n              :key=\"getOptionKey(option.value)\"\n              :value=\"option.value\"\n              :class=\"optionClass\"\n              v-bind=\"optionChildProps\"\n            >\n              {{ option.label }}\n            </option>\n          </slot>\n        </select>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-select-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport {\n  LABEL_SIZE_MODIFIERS,\n  DESCRIPTION_SIZE_MODIFIERS,\n} from '@/common/constants';\nimport {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n} from './select_menu_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n} from '@/common/utils';\nimport { MessagesMixin } from '@/common/mixins/input';\nimport { optionsValidator } from './select_menu_validators.js';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * A select menu is an input control that allows users to choose one option from a list.\n * @property {Boolean} disabled attribute\n * @property {String} name attribute\n * @property {String} value attribute\n * @see https://dialtone.dialpad.com/components/select.html\n */\nexport default {\n  name: 'DtSelectMenu',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Label for the select\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Description for the select\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Select Menu Options, overridden by default slot. Each option has the following structure:\n     * `{ index: number (optional), value: number || string (required), label: string (required) }`\n     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options\n     * @param {number} options[].index - Optional - The index of the option\n     * @param {number|string} options[].value - Required - The option value\n     * @param {string} options[].label - Required - The option Label\n     */\n    options: {\n      type: Array,\n      default: () => [],\n      validator: options => optionsValidator(options),\n    },\n\n    /**\n     * Sets the selected value of the select menu. If it does not match a value in the options array, then it will be\n     * 'unselected'.\n     */\n    value: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls the size of the select\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the select\n     */\n    selectClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize each option, should options be provided via prop\n     */\n    optionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into each option, should options be provided via prop\n     */\n    optionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Disabled state of the select\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n\n    /**\n     * Native change event\n     *\n     * @event change\n     * @type {String | Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      LABEL_SIZE_MODIFIERS,\n      DESCRIPTION_SIZE_MODIFIERS,\n      SELECT_SIZE_MODIFIERS,\n      SELECT_STATE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    selectListeners () {\n      return {\n        /* TODO\n            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n            and migration prior to upgrading to Vue 3.x\n        */\n        ...this.$listeners,\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the hander being called twice (once on the select element and once by the\n         * emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value, event),\n      };\n    },\n\n    state () {\n      return getValidationState(this.formattedMessages);\n    },\n\n    selectKey () {\n      return getUniqueString();\n    },\n\n    descriptionKey () {\n      return `select-${this.selectKey}-description`;\n    },\n\n    labelAriaDetails () {\n      if (this.$slots.description || this.description) {\n        return this.descriptionKey;\n      }\n\n      return this.$attrs['aria-details'];\n    },\n  },\n\n  mounted () {\n    this.validateOptionsPresence();\n  },\n\n  beforeUpdate () {\n    this.validateOptionsPresence();\n  },\n\n  methods: {\n    emitValue (value, event) {\n      this.$emit('input', value, event);\n      this.$emit('change', value, event);\n    },\n\n    getOptionKey (value) {\n      return `select-${this.selectKey}-option-${value}`;\n    },\n\n    validateOptionsPresence () {\n      if (this.options?.length < 1 && !this.$slots.default) {\n        Vue.util.warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n  },\n};\n</script>\n"],"names":["SELECT_SIZE_MODIFIERS","SELECT_STATE_MODIFIERS","hasValidOptionIndex","option","hasValidOptionValue","hasValidOptionLabel","optionsValidator","options","_sfc_main","DtValidationMessages","MessagesMixin","s","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","event","getValidationState","getUniqueString","value","_a","Vue"],"mappings":";;;;;;;AAAY,MAACA,IAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAyB;AAAA,EACpC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX,GCZMC,IAAsB,CAAAC,MAAU,CAACA,EAAO,SAAS,OAAOA,EAAO,SAAU,UAEzEC,IAAsB,CAAAD,MACrBA,EAAO,QAIL,OAAOA,EAAO,SAAU,YAAY,OAAOA,EAAO,SAAU,WAH1D,IAMLE,IAAsB,CAAAF,MACrBA,EAAO,QAIL,OAAOA,EAAO,SAAU,WAHtB,IAMEG,IAAmB,CAAAC,MACzBA,IAIEA,EAAQ,MAAM,CAAAJ,MACf,GAACD,EAAoBC,CAAM,KAI3B,CAACC,EAAoBD,CAAM,KAI3B,CAACE,EAAoBF,CAAM,EAKhC,IAjBQ,ICkFXK,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,sBAAAC,EAAA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAAH,MAAAD,EAAAC,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAI,MAAA,OAAA,KAAAX,CAAA,EAAA,SAAAW,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,uBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,sBAAAC;AAAA,MACA,4BAAAC;AAAA,MACA,uBAAAb;AAAA,MACA,wBAAAC;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kBAAA;AACA,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA,GAAA,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMA,OAAA,MAAA;AAAA,QAAA;AAAA,QACA,QAAA,CAAAa,MAAA,KAAA,UAAAA,EAAA,OAAA,OAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,QAAA;AACA,aAAAC,EAAA,KAAA,iBAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAAC,EAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,UAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA,KAAA,OAAA,eAAA,KAAA,cACA,KAAA,iBAGA,KAAA,OAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,wBAAA;AAAA,EACA;AAAA,EAEA,eAAA;AACA,SAAA,wBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAAC,GAAAH,GAAA;AACA,WAAA,MAAA,SAAAG,GAAAH,CAAA,GACA,KAAA,MAAA,UAAAG,GAAAH,CAAA;AAAA,IACA;AAAA,IAEA,aAAAG,GAAA;AACA,aAAA,UAAA,KAAA,SAAA,WAAAA,CAAA;AAAA,IACA;AAAA,IAEA,0BAAA;;AACA,QAAAC,IAAA,KAAA,YAAA,gBAAAA,EAAA,UAAA,KAAA,CAAA,KAAA,OAAA,WACAC,EAAA,KAAA,KAAA,wDAAA,IAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"select-menu.js","sources":["../../components/select_menu/select_menu_constants.js","../../components/select_menu/select_menu_validators.js","../../components/select_menu/select_menu.vue"],"sourcesContent":["export const SELECT_SIZE_MODIFIERS = {\n  xs: 'd-select--xs',\n  sm: 'd-select--sm',\n  md: '',\n  lg: 'd-select--lg',\n  xl: 'd-select--xl',\n};\n\nexport const SELECT_STATE_MODIFIERS = {\n  error: 'd-select__input--error',\n  warning: 'd-select__input--warning',\n  success: 'd-select__input--success',\n};\n\nexport default {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n};\n","const hasValidOptionIndex = option => !option.index || typeof option.index === 'number';\n\nconst hasValidOptionValue = option => {\n  if (!option.value) {\n    return false;\n  }\n\n  return typeof option.value === 'string' || typeof option.value === 'number';\n};\n\nconst hasValidOptionLabel = option => {\n  if (!option.label) {\n    return false;\n  }\n\n  return typeof option.label === 'string';\n};\n\nexport const optionsValidator = options => {\n  if (!options) {\n    return true;\n  }\n\n  return options.every(option => {\n    if (!hasValidOptionIndex(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionValue(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionLabel(option)) {\n      return false;\n    }\n\n    return true;\n  });\n};\n","<template>\n  <div>\n    <label>\n      <div\n        v-if=\"$slots.label || label\"\n        :aria-details=\"labelAriaDetails\"\n        :class=\"[\n          'd-label',\n          LABEL_SIZE_MODIFIERS[size],\n          labelClass,\n        ]\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"dt-select-label\"\n      >\n        <!-- @slot Slot for label, defaults to label prop -->\n        <slot name=\"label\">{{ label }}</slot>\n      </div>\n      <div\n        v-if=\"$slots.description || description\"\n        :id=\"descriptionKey\"\n        :class=\"[\n          'd-description',\n          DESCRIPTION_SIZE_MODIFIERS[size],\n          descriptionClass,\n        ]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"dt-select-description\"\n      >\n        <!-- @slot Slot for description, defaults to description prop -->\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n      <div\n        :class=\"[\n          'd-select',\n          SELECT_SIZE_MODIFIERS[size],\n          selectClass,\n          { 'd-select--disabled': disabled },\n        ]\"\n        data-qa=\"dt-select-wrapper\"\n      >\n        <select\n          ref=\"selectElement\"\n          :class=\"[\n            'd-select__input',\n            SELECT_STATE_MODIFIERS[state],\n          ]\"\n          v-bind=\"$attrs\"\n          :value=\"value\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\n          v-on=\"selectListeners\"\n        >\n          <!-- @slot Slot for select menu options, defaults to options prop -->\n          <slot>\n            <option\n              v-for=\"option in options\"\n              :key=\"getOptionKey(option.value)\"\n              :value=\"option.value\"\n              :class=\"optionClass\"\n              v-bind=\"optionChildProps\"\n            >\n              {{ option.label }}\n            </option>\n          </slot>\n        </select>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-select-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport {\n  LABEL_SIZE_MODIFIERS,\n  DESCRIPTION_SIZE_MODIFIERS,\n} from '@/common/constants';\nimport {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n} from './select_menu_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n} from '@/common/utils';\nimport { MessagesMixin } from '@/common/mixins/input';\nimport { optionsValidator } from './select_menu_validators.js';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * A select menu is an input control that allows users to choose one option from a list.\n * @property {Boolean} disabled attribute\n * @property {String} name attribute\n * @property {String} value attribute\n * @see https://dialtone.dialpad.com/components/select.html\n */\nexport default {\n  name: 'DtSelectMenu',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Label for the select\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Description for the select\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Select Menu Options, overridden by default slot. Each option has the following structure:\n     * `{ index: number (optional), value: number || string (required), label: string (required) }`\n     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options\n     * @param {number} options[].index - Optional - The index of the option\n     * @param {number|string} options[].value - Required - The option value\n     * @param {string} options[].label - Required - The option Label\n     */\n    options: {\n      type: Array,\n      default: () => [],\n      validator: options => optionsValidator(options),\n    },\n\n    /**\n     * Sets the selected value of the select menu. If it does not match a value in the options array, then it will be\n     * 'unselected'.\n     */\n    value: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls the size of the select\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the select\n     */\n    selectClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize each option, should options be provided via prop\n     */\n    optionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into each option, should options be provided via prop\n     */\n    optionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Disabled state of the select\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n\n    /**\n     * Native change event\n     *\n     * @event change\n     * @type {String | Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      LABEL_SIZE_MODIFIERS,\n      DESCRIPTION_SIZE_MODIFIERS,\n      SELECT_SIZE_MODIFIERS,\n      SELECT_STATE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    selectListeners () {\n      return {\n        /* TODO\n            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n            and migration prior to upgrading to Vue 3.x\n        */\n        ...this.$listeners,\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the hander being called twice (once on the select element and once by the\n         * emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value, event),\n      };\n    },\n\n    state () {\n      return getValidationState(this.formattedMessages);\n    },\n\n    selectKey () {\n      return getUniqueString();\n    },\n\n    descriptionKey () {\n      return `select-${this.selectKey}-description`;\n    },\n\n    labelAriaDetails () {\n      if (this.$slots.description || this.description) {\n        return this.descriptionKey;\n      }\n\n      return this.$attrs['aria-details'];\n    },\n  },\n\n  mounted () {\n    this.validateOptionsPresence();\n  },\n\n  beforeUpdate () {\n    this.validateOptionsPresence();\n  },\n\n  methods: {\n    emitValue (value, event) {\n      this.$emit('input', value, event);\n      this.$emit('change', value, event);\n    },\n\n    getOptionKey (value) {\n      return `select-${this.selectKey}-option-${value}`;\n    },\n\n    validateOptionsPresence () {\n      if (this.options?.length < 1 && !this.$slots.default) {\n        Vue.util.warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}