@dialpad/dialtone-vue 2.127.0 → 2.127.1

package/dist/chunks/input_group-m3cWYUfI.js

@@ -0,0 +1,143 @@
+"use strict";
+const Vue = require("vue");
+const common_validators = require("../common/validators.cjs");
+const common_utils = require("../common/utils.cjs");
+const lib_validationMessages = require("../lib/validation-messages.cjs");
+const InputGroupMixin = {
+  components: { DtValidationMessages: lib_validationMessages.DtValidationMessages },
+  // provide data to slotted components
+  provide() {
+    return {
+      groupContext: this.provideObj,
+      setGroupValue: this.setGroupValue
+    };
+  },
+  props: {
+    /**
+     * The id of the input group
+     */
+    id: {
+      type: String,
+      default() {
+        return common_utils.getUniqueString();
+      }
+    },
+    /**
+     * The value of the input group
+     */
+    value: {
+      type: [String, Number, Boolean, Object],
+      default: null
+    },
+    /**
+     * The name of the input group
+     */
+    name: {
+      type: String,
+      required: true
+    },
+    /**
+     * The legend of the input group
+     */
+    legend: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Disables the input group
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Validation messages
+     */
+    messages: {
+      type: Array,
+      default: () => [],
+      validator: (messages) => common_validators.validationMessageValidator(messages)
+    },
+    /**
+     * Show validation messages
+     * @values true, false
+     */
+    showMessages: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Used to customize the legend element
+     */
+    legendClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Used to customize the messages container
+     */
+    messagesClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * A set of props that are passed into the legend element
+     */
+    legendChildProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * A set of props that are passed into the messages container
+     */
+    messagesChildProps: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    const formattedMessages = common_utils.formatMessages(this.messages);
+    return {
+      // wrap values in object to make reactive
+      provideObj: {
+        name: this.name,
+        disabled: this.disabled,
+        validationState: common_utils.getValidationState(formattedMessages)
+      }
+    };
+  },
+  computed: {
+    formattedMessages() {
+      return common_utils.formatMessages(this.messages);
+    },
+    validationState() {
+      return common_utils.getValidationState(this.formattedMessages);
+    }
+  },
+  watch: {
+    disabled(newDisabled) {
+      this.provideObj.disabled = newDisabled;
+    },
+    validationState(newValidationState) {
+      this.provideObj.validationState = newValidationState;
+    }
+  },
+  methods: {
+    /*
+     * provided value to support 2 way binding for slotted input components.
+     * slotted input components will change this value and need to emit new value up.
+     */
+    setGroupValue(newValue) {
+      this.internalValue = newValue;
+      this.$emit("input", newValue);
+    }
+  },
+  mounted() {
+    if (!this.legend && !this.$slots.legend && !this.$attrs["aria-label"]) {
+      Vue.util.warn("It is expected that an aria-label is provided when there is no legend.", this);
+    }
+  }
+};
+exports.InputGroupMixin = InputGroupMixin;
+//# sourceMappingURL=input_group-m3cWYUfI.js.map

package/dist/chunks/{input_group-zcAq3DQl.js.map → input_group-m3cWYUfI.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input_group-zcAq3DQl.js","sources":["../../common/mixins/input_group.js"],"sourcesContent":["import Vue from 'vue';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { validationMessageValidator } from '../validators';\nimport {\n  getUniqueString,\n  formatMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * This mixin provides a base provide obj and set of components, props, computed, watchers and data attributes that are\n * commonly used in our input group components.\n * @displayName Input Group Mixin\n */\nexport const InputGroupMixin = {\n  components: { DtValidationMessages },\n\n  // provide data to slotted components\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setGroupValue: this.setGroupValue,\n    };\n  },\n\n  props: {\n    /**\n     * The id of the input group\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * The value of the input group\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * The name of the input group\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The legend of the input group\n     */\n    legend: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the legend element\n     */\n    legendClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the messages container\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the legend element\n     */\n    legendChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the messages container\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  data () {\n    const formattedMessages = formatMessages(this.messages);\n\n    return {\n      // wrap values in object to make reactive\n      provideObj: {\n        name: this.name,\n        disabled: this.disabled,\n        validationState: getValidationState(formattedMessages),\n      },\n    };\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n\n    validationState () {\n      return getValidationState(this.formattedMessages);\n    },\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      this.provideObj.disabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      this.provideObj.validationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted input components.\n     * slotted input components will change this value and need to emit new value up.\n     */\n    setGroupValue (newValue) {\n      this.internalValue = newValue;\n      this.$emit('input', newValue);\n    },\n  },\n\n  mounted () {\n    if (!this.legend && !this.$slots.legend && !this.$attrs['aria-label']) {\n      Vue.util.warn('It is expected that an aria-label is provided when there is no legend.', this);\n    }\n  },\n};\n\nexport default {\n  InputGroupMixin,\n};\n"],"names":["InputGroupMixin","DtValidationMessages","getUniqueString","messages","validationMessageValidator","formattedMessages","formatMessages","getValidationState","newDisabled","newValidationState","newValue","Vue"],"mappings":";;;;AAcY,MAACA,IAAkB;AAAA,EAC7B,YAAY,EAAE,sBAAAC,EAAsB;AAAA;AAAA,EAGpC,UAAW;AACT,WAAO;AAAA,MACL,cAAc,KAAK;AAAA,MACnB,eAAe,KAAK;AAAA,IAC1B;AAAA,EACG;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AACT,eAAOC,EAAe;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,QAAQ,SAAS,MAAM;AAAA,MACtC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,WAAW,CAAAC,MAAYC,EAA2BD,CAAQ;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA,IAKD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA,EACF;AAAA,EAED,OAAQ;AACN,UAAME,IAAoBC,EAAe,KAAK,QAAQ;AAEtD,WAAO;AAAA;AAAA,MAEL,YAAY;AAAA,QACV,MAAM,KAAK;AAAA,QACX,UAAU,KAAK;AAAA,QACf,iBAAiBC,EAAmBF,CAAiB;AAAA,MACtD;AAAA,IACP;AAAA,EACG;AAAA,EAED,UAAU;AAAA,IACR,oBAAqB;AACnB,aAAOC,EAAe,KAAK,QAAQ;AAAA,IACpC;AAAA,IAED,kBAAmB;AACjB,aAAOC,EAAmB,KAAK,iBAAiB;AAAA,IACjD;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,SAAUC,GAAa;AACrB,WAAK,WAAW,WAAWA;AAAA,IAC5B;AAAA,IAED,gBAAiBC,GAAoB;AACnC,WAAK,WAAW,kBAAkBA;AAAA,IACnC;AAAA,EACF;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,cAAeC,GAAU;AACvB,WAAK,gBAAgBA,GACrB,KAAK,MAAM,SAASA,CAAQ;AAAA,IAC7B;AAAA,EACF;AAAA,EAED,UAAW;AACT,IAAI,CAAC,KAAK,UAAU,CAAC,KAAK,OAAO,UAAU,CAAC,KAAK,OAAO,YAAY,KAClEC,EAAI,KAAK,KAAK,0EAA0E,IAAI;AAAA,EAE/F;AACH;"}
+{"version":3,"file":"input_group-m3cWYUfI.js","sources":["../../common/mixins/input_group.js"],"sourcesContent":["import Vue from 'vue';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { validationMessageValidator } from '../validators';\nimport {\n  getUniqueString,\n  formatMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * This mixin provides a base provide obj and set of components, props, computed, watchers and data attributes that are\n * commonly used in our input group components.\n * @displayName Input Group Mixin\n */\nexport const InputGroupMixin = {\n  components: { DtValidationMessages },\n\n  // provide data to slotted components\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setGroupValue: this.setGroupValue,\n    };\n  },\n\n  props: {\n    /**\n     * The id of the input group\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * The value of the input group\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * The name of the input group\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The legend of the input group\n     */\n    legend: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the legend element\n     */\n    legendClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the messages container\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the legend element\n     */\n    legendChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the messages container\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  data () {\n    const formattedMessages = formatMessages(this.messages);\n\n    return {\n      // wrap values in object to make reactive\n      provideObj: {\n        name: this.name,\n        disabled: this.disabled,\n        validationState: getValidationState(formattedMessages),\n      },\n    };\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n\n    validationState () {\n      return getValidationState(this.formattedMessages);\n    },\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      this.provideObj.disabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      this.provideObj.validationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted input components.\n     * slotted input components will change this value and need to emit new value up.\n     */\n    setGroupValue (newValue) {\n      this.internalValue = newValue;\n      this.$emit('input', newValue);\n    },\n  },\n\n  mounted () {\n    if (!this.legend && !this.$slots.legend && !this.$attrs['aria-label']) {\n      Vue.util.warn('It is expected that an aria-label is provided when there is no legend.', this);\n    }\n  },\n};\n\nexport default {\n  InputGroupMixin,\n};\n"],"names":["DtValidationMessages","getUniqueString","validationMessageValidator","formatMessages","getValidationState"],"mappings":";;;;;AAcY,MAAC,kBAAkB;AAAA,EAC7B,YAAY,EAAEA,sBAAAA,uBAAAA,qBAAsB;AAAA;AAAA,EAGpC,UAAW;AACT,WAAO;AAAA,MACL,cAAc,KAAK;AAAA,MACnB,eAAe,KAAK;AAAA,IAC1B;AAAA,EACG;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AACT,eAAOC,aAAe,gBAAA;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,QAAQ,SAAS,MAAM;AAAA,MACtC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,WAAW,cAAYC,kBAA0B,2BAAC,QAAQ;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA,IAKD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA,EACF;AAAA,EAED,OAAQ;AACN,UAAM,oBAAoBC,aAAAA,eAAe,KAAK,QAAQ;AAEtD,WAAO;AAAA;AAAA,MAEL,YAAY;AAAA,QACV,MAAM,KAAK;AAAA,QACX,UAAU,KAAK;AAAA,QACf,iBAAiBC,aAAkB,mBAAC,iBAAiB;AAAA,MACtD;AAAA,IACP;AAAA,EACG;AAAA,EAED,UAAU;AAAA,IACR,oBAAqB;AACnB,aAAOD,aAAc,eAAC,KAAK,QAAQ;AAAA,IACpC;AAAA,IAED,kBAAmB;AACjB,aAAOC,aAAkB,mBAAC,KAAK,iBAAiB;AAAA,IACjD;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,SAAU,aAAa;AACrB,WAAK,WAAW,WAAW;AAAA,IAC5B;AAAA,IAED,gBAAiB,oBAAoB;AACnC,WAAK,WAAW,kBAAkB;AAAA,IACnC;AAAA,EACF;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,cAAe,UAAU;AACvB,WAAK,gBAAgB;AACrB,WAAK,MAAM,SAAS,QAAQ;AAAA,IAC7B;AAAA,EACF;AAAA,EAED,UAAW;AACT,QAAI,CAAC,KAAK,UAAU,CAAC,KAAK,OAAO,UAAU,CAAC,KAAK,OAAO,YAAY,GAAG;AACrE,UAAI,KAAK,KAAK,0EAA0E,IAAI;AAAA,IAC7F;AAAA,EACF;AACH;;"}

package/dist/chunks/{input_group-zcAq3DQl.js → input_group-qVZaS5Bb.js}

@@ -1,9 +1,9 @@
-import s from "vue";
-import { validationMessageValidator as i } from "../lib/validators.js";
-import { getUniqueString as r, formatMessages as t, getValidationState as a } from "../lib/utils.js";
-import { DtValidationMessages as d } from "../lib/validation-messages.js";
-const u = {
-  components: { DtValidationMessages: d },
+import Vue from "vue";
+import { validationMessageValidator } from "../common/validators.js";
+import { getUniqueString, formatMessages, getValidationState } from "../common/utils.js";
+import { DtValidationMessages } from "../lib/validation-messages.js";
+const InputGroupMixin = {
+  components: { DtValidationMessages },
   // provide data to slotted components
   provide() {
     return {
@@ -18,7 +18,7 @@ const u = {
     id: {
       type: String,
       default() {
-        return r();
+        return getUniqueString();
       }
     },
     /**
@@ -33,7 +33,7 @@ const u = {
      */
     name: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * The legend of the input group
@@ -48,7 +48,7 @@ const u = {
      */
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Validation messages
@@ -56,7 +56,7 @@ const u = {
     messages: {
       type: Array,
       default: () => [],
-      validator: (e) => i(e)
+      validator: (messages) => validationMessageValidator(messages)
     },
     /**
      * Show validation messages
@@ -64,7 +64,7 @@ const u = {
      */
     showMessages: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Used to customize the legend element
@@ -96,30 +96,30 @@ const u = {
     }
   },
   data() {
-    const e = t(this.messages);
+    const formattedMessages = formatMessages(this.messages);
     return {
       // wrap values in object to make reactive
       provideObj: {
         name: this.name,
         disabled: this.disabled,
-        validationState: a(e)
+        validationState: getValidationState(formattedMessages)
       }
     };
   },
   computed: {
     formattedMessages() {
-      return t(this.messages);
+      return formatMessages(this.messages);
     },
     validationState() {
-      return a(this.formattedMessages);
+      return getValidationState(this.formattedMessages);
     }
   },
   watch: {
-    disabled(e) {
-      this.provideObj.disabled = e;
+    disabled(newDisabled) {
+      this.provideObj.disabled = newDisabled;
     },
-    validationState(e) {
-      this.provideObj.validationState = e;
+    validationState(newValidationState) {
+      this.provideObj.validationState = newValidationState;
     }
   },
   methods: {
@@ -127,15 +127,18 @@ const u = {
      * provided value to support 2 way binding for slotted input components.
      * slotted input components will change this value and need to emit new value up.
      */
-    setGroupValue(e) {
-      this.internalValue = e, this.$emit("input", e);
+    setGroupValue(newValue) {
+      this.internalValue = newValue;
+      this.$emit("input", newValue);
     }
   },
   mounted() {
-    !this.legend && !this.$slots.legend && !this.$attrs["aria-label"] && s.util.warn("It is expected that an aria-label is provided when there is no legend.", this);
+    if (!this.legend && !this.$slots.legend && !this.$attrs["aria-label"]) {
+      Vue.util.warn("It is expected that an aria-label is provided when there is no legend.", this);
+    }
   }
 };
 export {
-  u as I
+  InputGroupMixin
 };
-//# sourceMappingURL=input_group-zcAq3DQl.js.map
+//# sourceMappingURL=input_group-qVZaS5Bb.js.map

package/dist/chunks/{input_group-j2gTtc1C.js.map → input_group-qVZaS5Bb.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input_group-j2gTtc1C.js","sources":["../../common/mixins/input_group.js"],"sourcesContent":["import Vue from 'vue';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { validationMessageValidator } from '../validators';\nimport {\n  getUniqueString,\n  formatMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * This mixin provides a base provide obj and set of components, props, computed, watchers and data attributes that are\n * commonly used in our input group components.\n * @displayName Input Group Mixin\n */\nexport const InputGroupMixin = {\n  components: { DtValidationMessages },\n\n  // provide data to slotted components\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setGroupValue: this.setGroupValue,\n    };\n  },\n\n  props: {\n    /**\n     * The id of the input group\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * The value of the input group\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * The name of the input group\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The legend of the input group\n     */\n    legend: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the legend element\n     */\n    legendClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the messages container\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the legend element\n     */\n    legendChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the messages container\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  data () {\n    const formattedMessages = formatMessages(this.messages);\n\n    return {\n      // wrap values in object to make reactive\n      provideObj: {\n        name: this.name,\n        disabled: this.disabled,\n        validationState: getValidationState(formattedMessages),\n      },\n    };\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n\n    validationState () {\n      return getValidationState(this.formattedMessages);\n    },\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      this.provideObj.disabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      this.provideObj.validationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted input components.\n     * slotted input components will change this value and need to emit new value up.\n     */\n    setGroupValue (newValue) {\n      this.internalValue = newValue;\n      this.$emit('input', newValue);\n    },\n  },\n\n  mounted () {\n    if (!this.legend && !this.$slots.legend && !this.$attrs['aria-label']) {\n      Vue.util.warn('It is expected that an aria-label is provided when there is no legend.', this);\n    }\n  },\n};\n\nexport default {\n  InputGroupMixin,\n};\n"],"names":["InputGroupMixin","DtValidationMessages","getUniqueString","messages","validationMessageValidator","formattedMessages","formatMessages","getValidationState","newDisabled","newValidationState","newValue","Vue"],"mappings":"iJAcaA,EAAkB,CAC7B,WAAY,CAAEC,qBAAAA,EAAAA,oBAAsB,EAGpC,SAAW,CACT,MAAO,CACL,aAAc,KAAK,WACnB,cAAe,KAAK,aAC1B,CACG,EAED,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CACT,OAAOC,EAAe,gBAAA,CACvB,CACF,EAKD,MAAO,CACL,KAAM,CAAC,OAAQ,OAAQ,QAAS,MAAM,EACtC,QAAS,IACV,EAKD,KAAM,CACJ,KAAM,OACN,SAAU,EACX,EAKD,OAAQ,CACN,KAAM,OACN,QAAS,EACV,EAMD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAKD,SAAU,CACR,KAAM,MACN,QAAS,IAAM,CAAE,EACjB,UAAWC,GAAYC,EAA0B,2BAACD,CAAQ,CAC3D,EAMD,aAAc,CACZ,KAAM,QACN,QAAS,EACV,EAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,iBAAkB,CAChB,KAAM,OACN,QAAS,KAAO,CAAA,EACjB,EAKD,mBAAoB,CAClB,KAAM,OACN,QAAS,KAAO,CAAA,EACjB,CACF,EAED,MAAQ,CACN,MAAME,EAAoBC,EAAAA,eAAe,KAAK,QAAQ,EAEtD,MAAO,CAEL,WAAY,CACV,KAAM,KAAK,KACX,SAAU,KAAK,SACf,gBAAiBC,EAAkB,mBAACF,CAAiB,CACtD,CACP,CACG,EAED,SAAU,CACR,mBAAqB,CACnB,OAAOC,EAAc,eAAC,KAAK,QAAQ,CACpC,EAED,iBAAmB,CACjB,OAAOC,EAAkB,mBAAC,KAAK,iBAAiB,CACjD,CACF,EAED,MAAO,CACL,SAAUC,EAAa,CACrB,KAAK,WAAW,SAAWA,CAC5B,EAED,gBAAiBC,EAAoB,CACnC,KAAK,WAAW,gBAAkBA,CACnC,CACF,EAED,QAAS,CAKP,cAAeC,EAAU,CACvB,KAAK,cAAgBA,EACrB,KAAK,MAAM,QAASA,CAAQ,CAC7B,CACF,EAED,SAAW,CACL,CAAC,KAAK,QAAU,CAAC,KAAK,OAAO,QAAU,CAAC,KAAK,OAAO,YAAY,GAClEC,EAAI,KAAK,KAAK,yEAA0E,IAAI,CAE/F,CACH"}
+{"version":3,"file":"input_group-qVZaS5Bb.js","sources":["../../common/mixins/input_group.js"],"sourcesContent":["import Vue from 'vue';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { validationMessageValidator } from '../validators';\nimport {\n  getUniqueString,\n  formatMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * This mixin provides a base provide obj and set of components, props, computed, watchers and data attributes that are\n * commonly used in our input group components.\n * @displayName Input Group Mixin\n */\nexport const InputGroupMixin = {\n  components: { DtValidationMessages },\n\n  // provide data to slotted components\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setGroupValue: this.setGroupValue,\n    };\n  },\n\n  props: {\n    /**\n     * The id of the input group\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * The value of the input group\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * The name of the input group\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The legend of the input group\n     */\n    legend: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the legend element\n     */\n    legendClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the messages container\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the legend element\n     */\n    legendChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the messages container\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  data () {\n    const formattedMessages = formatMessages(this.messages);\n\n    return {\n      // wrap values in object to make reactive\n      provideObj: {\n        name: this.name,\n        disabled: this.disabled,\n        validationState: getValidationState(formattedMessages),\n      },\n    };\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n\n    validationState () {\n      return getValidationState(this.formattedMessages);\n    },\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      this.provideObj.disabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      this.provideObj.validationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted input components.\n     * slotted input components will change this value and need to emit new value up.\n     */\n    setGroupValue (newValue) {\n      this.internalValue = newValue;\n      this.$emit('input', newValue);\n    },\n  },\n\n  mounted () {\n    if (!this.legend && !this.$slots.legend && !this.$attrs['aria-label']) {\n      Vue.util.warn('It is expected that an aria-label is provided when there is no legend.', this);\n    }\n  },\n};\n\nexport default {\n  InputGroupMixin,\n};\n"],"names":[],"mappings":";;;;AAcY,MAAC,kBAAkB;AAAA,EAC7B,YAAY,EAAE,qBAAsB;AAAA;AAAA,EAGpC,UAAW;AACT,WAAO;AAAA,MACL,cAAc,KAAK;AAAA,MACnB,eAAe,KAAK;AAAA,IAC1B;AAAA,EACG;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AACT,eAAO,gBAAe;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,QAAQ,SAAS,MAAM;AAAA,MACtC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,WAAW,cAAY,2BAA2B,QAAQ;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA,IAKD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA,EACF;AAAA,EAED,OAAQ;AACN,UAAM,oBAAoB,eAAe,KAAK,QAAQ;AAEtD,WAAO;AAAA;AAAA,MAEL,YAAY;AAAA,QACV,MAAM,KAAK;AAAA,QACX,UAAU,KAAK;AAAA,QACf,iBAAiB,mBAAmB,iBAAiB;AAAA,MACtD;AAAA,IACP;AAAA,EACG;AAAA,EAED,UAAU;AAAA,IACR,oBAAqB;AACnB,aAAO,eAAe,KAAK,QAAQ;AAAA,IACpC;AAAA,IAED,kBAAmB;AACjB,aAAO,mBAAmB,KAAK,iBAAiB;AAAA,IACjD;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,SAAU,aAAa;AACrB,WAAK,WAAW,WAAW;AAAA,IAC5B;AAAA,IAED,gBAAiB,oBAAoB;AACnC,WAAK,WAAW,kBAAkB;AAAA,IACnC;AAAA,EACF;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,cAAe,UAAU;AACvB,WAAK,gBAAgB;AACrB,WAAK,MAAM,SAAS,QAAQ;AAAA,IAC7B;AAAA,EACF;AAAA,EAED,UAAW;AACT,QAAI,CAAC,KAAK,UAAU,CAAC,KAAK,OAAO,UAAU,CAAC,KAAK,OAAO,YAAY,GAAG;AACrE,UAAI,KAAK,KAAK,0EAA0E,IAAI;AAAA,IAC7F;AAAA,EACF;AACH;"}

package/dist/chunks/keyboard_list_navigation-ScXhrxya.js

@@ -0,0 +1,284 @@
+const Dom = {
+  methods: {
+    /**
+     * Scroll an element into view if it is not fully visible in its nearest scrollable ancestor.
+     * @param {Element} ref
+     */
+    scrollElementIntoViewIfNeeded(ref, opt_center, opt_behavior, opt_parent) {
+      if (ref.scrollIntoViewIfNeeded) {
+        this.scrollIntoViewIfNeeded(ref, opt_center, opt_behavior, opt_parent);
+      } else {
+        this.scrollIntoView(ref, "bottom", false, opt_behavior, opt_parent);
+      }
+    },
+    /**
+     * Scroll an element to the top or bottom of its scroll ancestor.
+     * @param {Element} ref
+     */
+    scrollElementIntoView(ref, opt_scrollToTop, opt_behavior, opt_parent) {
+      if (opt_scrollToTop === "center") {
+        this.scrollIntoView(ref, "center", false, opt_behavior, opt_parent);
+        return;
+      }
+      if (opt_scrollToTop === false) {
+        this.scrollIntoView(ref, "bottom", false, opt_behavior, opt_parent);
+      } else {
+        this.scrollIntoView(ref, "top", false, opt_behavior, opt_parent);
+      }
+    },
+    scrollIntoViewIfNeeded(ref, opt_center, opt_behavior, opt_parent) {
+      const dir = opt_center ? "center" : void 0;
+      this.scrollIntoView(ref, dir, true, opt_behavior, opt_parent);
+    },
+    scrollIntoView(ref, opt_dir, opt_ifNeeded, opt_behavior, opt_parent) {
+      if (!ref || !ref.parentElement) {
+        return;
+      }
+      const offsetTop = ref.offsetTop;
+      const refParent = opt_parent || ref.parentElement;
+      const scrollBounds = this._getScrollBounds(refParent);
+      const parentHeight = scrollBounds.bottom - scrollBounds.top;
+      const elHeight = this._getElementHeight(ref);
+      const offsetBottom = offsetTop + elHeight;
+      let scrollTop = -1;
+      switch (opt_dir) {
+        case "top":
+          scrollTop = offsetTop;
+          break;
+        case "center":
+          scrollTop = offsetTop + (elHeight - parentHeight) / 2;
+          break;
+        case "bottom":
+          scrollTop = scrollTop = offsetBottom - parentHeight;
+          break;
+        default:
+          if (offsetTop - scrollBounds.top <= parentHeight / 2) {
+            scrollTop = offsetTop;
+          } else {
+            scrollTop = offsetBottom - parentHeight;
+          }
+          break;
+      }
+      this._setScrollTop(refParent, scrollTop, scrollBounds, offsetTop, offsetBottom, opt_ifNeeded, opt_behavior);
+    },
+    _setScrollTop(el, scrollTop, bounds, offsetTop, offsetBottom, opt_isNeeded, opt_behavior) {
+      bounds = bounds || this._getScrollBounds(el);
+      const parentHeight = bounds.bottom - bounds.top;
+      if (opt_isNeeded && this._inScrollBounds(offsetTop, offsetBottom, bounds)) {
+        if (offsetTop < bounds.top) {
+          scrollTop = offsetTop;
+        } else if (offsetBottom > bounds.bottom) {
+          scrollTop = offsetBottom - parentHeight;
+        } else {
+          return;
+        }
+      }
+      if (opt_behavior) {
+        el.scrollTo({ top: scrollTop, behavior: opt_behavior });
+      } else {
+        el.scrollTop = scrollTop;
+      }
+    },
+    _getElementHeight(el) {
+      return el.getBoundingClientRect().height;
+    },
+    _getScrollBounds(el) {
+      const height = this._getElementHeight(el);
+      const scrollTop = el.scrollTop;
+      return {
+        top: scrollTop,
+        bottom: scrollTop + height
+      };
+    },
+    _inScrollBounds(top, bottom, bounds) {
+      const height = bottom - top;
+      return bottom <= bounds.bottom + 3 * height / 4 && top >= bounds.top - height / 4;
+    }
+  }
+};
+const ERROR_INVALID_LIST_ELEMENT = "listElementKey is required or the referenced element doesn't exist. Received listElement: ";
+const KeyboardNavigation = ({
+  // Role of the list items in the component. This is used to identify the list items
+  // so you must update this if the role of your list items is anything other than 'option'
+  listItemRole = "option",
+  // Key of the data prop that will be added to the component.
+  indexKey = "highlightIndex",
+  idKey = "highlightId",
+  // Key of the method that references the list element.
+  listElementKey = "listRef",
+  // Optional, Key of the computed prop that references the currently active item element.
+  activeItemKey = "",
+  // Optional, name of the method that toggles the list visibility. Used for
+  // opening the list when up or down is pressed.
+  openMethod = null,
+  // Optional, method to call when the highlightIndex is changed.
+  afterHighlightMethod = null,
+  // Optional, method to call when the highlightIndex goes past the beginning of the list.
+  beginningOfListMethod = null,
+  // Optional, method to call when the highlightIndex goes past the end of the list.
+  endOfListMethod = null,
+  // Scroll the active element into view when highlighted by a keyboard event.
+  scrollToOnHighlight = true,
+  // Focus the active element on keyboard navigation.
+  focusOnKeyboardNavigation = false
+} = {}) => ({
+  mixins: [Dom],
+  data() {
+    return {
+      [indexKey]: -1,
+      [idKey]: "",
+      scrollToOnHighlight,
+      focusOnKeyboardNavigation
+    };
+  },
+  provide() {
+    return {
+      highlightId: () => this[idKey]
+    };
+  },
+  methods: {
+    // Returns the list element
+    // this[listElement]() can return a Vue component, in which case we need to target
+    // the $el property, or it can simply be an html element.
+    _getListElement() {
+      var _a;
+      return ((_a = this[listElementKey]()) == null ? void 0 : _a.$el) || this[listElementKey]();
+    },
+    // Gets the length of all the items in the list, uses the listItemRole param to determine
+    // whether an element is a list item.
+    _itemsLength() {
+      const listItems = this._getListItemNodes();
+      if (listItems === null) {
+        return 0;
+      }
+      return listItems.length;
+    },
+    // Gets all the list item nodes within the list element
+    _getListItemNodes() {
+      const listElement = this._getListElement();
+      if (!listElement) {
+        console.error(ERROR_INVALID_LIST_ELEMENT, listElement);
+        return null;
+      }
+      return Array.from(listElement.querySelectorAll(`[role="${listItemRole}"], #sr-only-close-button`));
+    },
+    onUpKey() {
+      if (openMethod) {
+        this[openMethod](true);
+      }
+      if (this[indexKey] > 0) {
+        this.setHighlightIndex(this[indexKey] - 1);
+      } else if (beginningOfListMethod) {
+        this[beginningOfListMethod]();
+      }
+      this.scrollActiveItemIntoViewIfNeeded();
+      this.focusActiveItemIfNeeded();
+    },
+    onDownKey() {
+      if (openMethod) {
+        this[openMethod](true);
+      }
+      if (this[indexKey] < this._itemsLength() - 1) {
+        this.setHighlightIndex(this[indexKey] + 1);
+      } else if (endOfListMethod) {
+        this[endOfListMethod]();
+      }
+      this.scrollActiveItemIntoViewIfNeeded();
+      this.focusActiveItemIfNeeded();
+    },
+    onHomeKey() {
+      this.jumpToBeginning();
+      this.scrollActiveItemIntoViewIfNeeded();
+      this.focusActiveItemIfNeeded();
+    },
+    onEndKey() {
+      this.jumpToEnd();
+      this.scrollActiveItemIntoViewIfNeeded();
+      this.focusActiveItemIfNeeded();
+    },
+    onNavigationKey(key) {
+      const listItems = this._getListItemNodes();
+      const matchingItems = listItems.filter((item) => {
+        const content = item.textContent.trim().toLowerCase();
+        return content.startsWith(key.toLowerCase());
+      });
+      if (matchingItems.length <= 0) {
+        return;
+      }
+      const highlightedMatchingItemIndex = matchingItems.findIndex((item) => {
+        return this[indexKey] === listItems.indexOf(item);
+      });
+      const nextHighlightedItemIndex = listItems.indexOf(
+        highlightedMatchingItemIndex < matchingItems.length - 1 ? matchingItems[highlightedMatchingItemIndex + 1] : matchingItems[0]
+      );
+      this.setHighlightIndex(nextHighlightedItemIndex);
+      this.scrollActiveItemIntoViewIfNeeded();
+      this.focusActiveItemIfNeeded();
+    },
+    isValidLetter(key) {
+      if (key.length > 1) {
+        return false;
+      }
+      return key >= "a" && key <= "z" || key >= "A" && key <= "Z";
+    },
+    jumpToBeginning() {
+      this.setHighlightIndex(0);
+    },
+    jumpToEnd() {
+      this.setHighlightIndex(this._itemsLength() - 1);
+    },
+    setHighlightIndex(num) {
+      this[indexKey] = num;
+      this[idKey] = this._getItemId(num);
+      if (this._itemsLength() && afterHighlightMethod) {
+        this[afterHighlightMethod](num);
+      }
+    },
+    setHighlightId(id) {
+      this[idKey] = id;
+      this[indexKey] = this._getItemIndex(id);
+      if (this._itemsLength() && afterHighlightMethod) {
+        this[afterHighlightMethod](this._getItemIndex(id));
+      }
+    },
+    _getItemIndex(id) {
+      const listElement = this._getListElement();
+      if (!listElement) {
+        return;
+      }
+      const listItems = Array.from(listElement.querySelectorAll(`[role="${listItemRole}"], #sr-only-close-button`));
+      return listItems.indexOf(listElement.querySelector(`#${id}`));
+    },
+    _getItemId(index) {
+      var _a;
+      const listElement = this._getListElement();
+      if (!listElement) {
+        return;
+      }
+      return (_a = listElement.querySelectorAll(`[role="${listItemRole}"], #sr-only-close-button`)[index]) == null ? void 0 : _a.id;
+    },
+    scrollActiveItemIntoViewIfNeeded() {
+      if (!this.scrollToOnHighlight) {
+        return;
+      }
+      const activeItemEl = this[activeItemKey];
+      if (activeItemEl) {
+        const listElement = this._getListElement();
+        this.scrollElementIntoViewIfNeeded(activeItemEl, null, null, listElement);
+      }
+    },
+    focusActiveItemIfNeeded() {
+      if (!this.focusOnKeyboardNavigation) {
+        return;
+      }
+      const activeItemEl = this[activeItemKey];
+      if (activeItemEl) {
+        activeItemEl.focus();
+      }
+    }
+  }
+});
+export {
+  KeyboardNavigation
+};
+//# sourceMappingURL=keyboard_list_navigation-ScXhrxya.js.map