@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/image-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.js","sources":["../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      to=\"body\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            size=\"lg\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeAriaLabel\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon\n                class=\"d-image-viewer__close-button\"\n                name=\"close\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'DtImageViewer',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Controls whether the image modal is shown. Leaving this null will have the image modal\n     * trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * URL of the image to be shown\n     */\n    imageSrc: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Alt text of image\n     */\n    imageAlt: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Image Class\n     */\n    imageButtonClass: {\n      type: String,\n      required: false,\n      default: '',\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Aria label for close button\n     */\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      showCloseButton: true,\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          (event.target === event.currentTarget) && this.close();\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n        },\n      };\n    },\n  },\n\n  watch: {\n    isOpen: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    openModal () {\n      // Has custom control passed in\n      if (this.open !== null) {\n        return;\n      }\n      this.isOpen = true;\n      this.showCloseButton = true;\n      this.$emit('opened', true);\n\n      setTimeout(() => {\n        this.focusAfterOpen();\n      });\n    },\n\n    close () {\n      this.isOpen = false;\n      this.$emit('opened', false);\n\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    focusAfterOpen () {\n      this.$refs.closeImage?.$el.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIcon","Modal","event","EVENT_KEYNAMES","isShowing","_a","open","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_createElementVNode","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon"],"mappings":"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"}
+{"version":3,"file":"image-viewer.js","sources":["../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      to=\"body\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            size=\"lg\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeAriaLabel\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon\n                class=\"d-image-viewer__close-button\"\n                name=\"close\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'DtImageViewer',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Controls whether the image modal is shown. Leaving this null will have the image modal\n     * trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * URL of the image to be shown\n     */\n    imageSrc: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Alt text of image\n     */\n    imageAlt: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Image Class\n     */\n    imageButtonClass: {\n      type: String,\n      required: false,\n      default: '',\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Aria label for close button\n     */\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      showCloseButton: true,\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          (event.target === event.currentTarget) && this.close();\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n        },\n      };\n    },\n  },\n\n  watch: {\n    isOpen: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    openModal () {\n      // Has custom control passed in\n      if (this.open !== null) {\n        return;\n      }\n      this.isOpen = true;\n      this.showCloseButton = true;\n      this.$emit('opened', true);\n\n      setTimeout(() => {\n        this.focusAfterOpen();\n      });\n    },\n\n    close () {\n      this.isOpen = false;\n      this.$emit('opened', false);\n\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    focusAfterOpen () {\n      this.$refs.closeImage?.$el.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_createVNode","_createElementVNode","_createBlock","_Teleport","_mergeProps","_toHandlers","_Transition"],"mappings":"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"}

package/dist/lib/input-group.cjs

@@ -1,2 +1,92 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../chunks/input_group-AS760Cp7.js"),l=require("./utils.cjs"),s=require("vue"),i=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),d=require("./validation-messages.cjs");require("./validators.cjs");require("./constants.cjs");const u={name:"DtInputGroup",components:{DtValidationMessages:d.DtValidationMessages},mixins:[r.I],props:{dataQaGroup:{type:String,default:"input-group"},dataQaGroupLegend:{type:String,default:"input-group-legend"},dataQaGroupMessages:{type:String,default:"input-group-messages"}},data(){return{internalValue:this.value,hasSlotContent:l.hasSlotContent}},watch:{value(e){this.internalValue=e},internalValue:{immediate:!0,handler(e){this.provideObj.value=e}}},methods:{getMessageKey(e,t){return`input-group-message-${e}-${t}-${this.id}`}}},g=["data-qa"],p=["data-qa"];function m(e,t,a,h,n,q){const o=s.resolveComponent("dt-validation-messages");return s.openBlock(),s.createElementBlock("fieldset",{class:"d-input-group__fieldset","data-qa":a.dataQaGroup},[n.hasSlotContent(e.$slots.legend)||e.legend?(s.openBlock(),s.createElementBlock("legend",s.mergeProps({key:0,class:["d-label",e.legendClass]},e.legendChildProps,{"data-qa":a.dataQaGroupLegend}),[s.renderSlot(e.$slots,"legend",{},()=>[s.createTextVNode(s.toDisplayString(e.legend),1)])],16,p)):s.createCommentVNode("",!0),s.renderSlot(e.$slots,"default"),s.createVNode(o,s.mergeProps({"validation-messages":e.formattedMessages,"show-messages":e.showMessages,class:e.messagesClass,"data-qa":a.dataQaGroupMessages},e.messagesChildProps),null,16,["validation-messages","show-messages","class","data-qa"])],8,g)}const c=i._(u,[["render",m]]);exports.DtInputGroup=c;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const input_group = require("../chunks/input_group-M-D25pOJ.js");
+const common_utils = require("../common/utils.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const lib_validationMessages = require("./validation-messages.cjs");
+require("../common/validators.cjs");
+require("../common/constants.cjs");
+const _sfc_main = {
+  name: "DtInputGroup",
+  components: { DtValidationMessages: lib_validationMessages.DtValidationMessages },
+  mixins: [input_group.InputGroupMixin],
+  props: {
+    /**
+     * A data qa tag for the input group
+     */
+    dataQaGroup: {
+      type: String,
+      default: "input-group"
+    },
+    /**
+     * A data qa tag for the input group legend
+     */
+    dataQaGroupLegend: {
+      type: String,
+      default: "input-group-legend"
+    },
+    /**
+     * A data qa tag for the input group messages
+     */
+    dataQaGroupMessages: {
+      type: String,
+      default: "input-group-messages"
+    }
+  },
+  data() {
+    return {
+      internalValue: this.value,
+      hasSlotContent: common_utils.hasSlotContent
+    };
+  },
+  watch: {
+    value(newValue) {
+      this.internalValue = newValue;
+    },
+    /*
+     * watching value to support 2 way binding for slotted inputs.
+     * need this to pass value to slotted inputs if modified outside
+     * input group.
+     */
+    internalValue: {
+      immediate: true,
+      handler(newInternalValue) {
+        this.provideObj.value = newInternalValue;
+      }
+    }
+  },
+  methods: {
+    getMessageKey(type, index) {
+      return `input-group-message-${type}-${index}-${this.id}`;
+    }
+  }
+};
+const _hoisted_1 = ["data-qa"];
+const _hoisted_2 = ["data-qa"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_validation_messages = vue.resolveComponent("dt-validation-messages");
+  return vue.openBlock(), vue.createElementBlock("fieldset", {
+    class: "d-input-group__fieldset",
+    "data-qa": $props.dataQaGroup
+  }, [
+    $data.hasSlotContent(_ctx.$slots.legend) || _ctx.legend ? (vue.openBlock(), vue.createElementBlock("legend", vue.mergeProps({
+      key: 0,
+      class: ["d-label", _ctx.legendClass]
+    }, _ctx.legendChildProps, { "data-qa": $props.dataQaGroupLegend }), [
+      vue.renderSlot(_ctx.$slots, "legend", {}, () => [
+        vue.createTextVNode(vue.toDisplayString(_ctx.legend), 1)
+      ])
+    ], 16, _hoisted_2)) : vue.createCommentVNode("", true),
+    vue.renderSlot(_ctx.$slots, "default"),
+    vue.createVNode(_component_dt_validation_messages, vue.mergeProps({
+      "validation-messages": _ctx.formattedMessages,
+      "show-messages": _ctx.showMessages,
+      class: _ctx.messagesClass,
+      "data-qa": $props.dataQaGroupMessages
+    }, _ctx.messagesChildProps), null, 16, ["validation-messages", "show-messages", "class", "data-qa"])
+  ], 8, _hoisted_1);
+}
+const DtInputGroup = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtInputGroup = DtInputGroup;
 //# sourceMappingURL=input-group.cjs.map

package/dist/lib/input-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.cjs","sources":["../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"hasSlotContent($slots.legend) || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","InputGroupMixin","hasSlotContent","newValue","newInternalValue","type","index","_createElementBlock","$props","$data","_ctx","_openBlock","_mergeProps","_renderSlot","_createVNode","_component_dt_validation_messages"],"mappings":"0UAuCA,MAAKA,EAAU,CACb,KAAM,eAEN,WAAY,CAAEC,qBAAAA,EAAAA,oBAAsB,EAEpC,OAAQ,CAACC,EAAAA,CAAe,EAExB,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,aACV,EAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,oBACV,EAKD,oBAAqB,CACnB,KAAM,OACN,QAAS,sBACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,MACpB,eAAAC,EAAc,eAEjB,EAED,MAAO,CACL,MAAOC,EAAU,CACf,KAAK,cAAgBA,CACtB,EAOD,cAAe,CACb,UAAW,GACX,QAASC,EAAkB,CACzB,KAAK,WAAW,MAAQA,CACzB,CACF,CACF,EAED,QAAS,CACP,cAAeC,EAAMC,EAAO,CAC1B,MAAO,uBAAuBD,CAAI,IAAIC,CAAK,IAAI,KAAK,EAAE,EACvD,CACF,CACH,gIArGEC,EAwBW,mBAAA,WAAA,CAvBT,MAAM,0BACL,UAASC,EAAW,cAGbC,EAAA,eAAeC,EAAA,OAAO,MAAM,GAAKA,EAAM,QAD/CC,EAAAA,YAAAJ,EAAAA,mBAUS,SAVTK,aAUS,OARN,iBAAmBF,EAAW,WAAA,GACvBA,EAAgB,iBAAA,CACvB,UAASF,EAAiB,iBAAA,CAAA,EAAA,CAG3BK,EAAAA,WAEOH,qBAFP,IAEO,qCADFA,EAAM,MAAA,EAAA,CAAA,wCAIbG,aAAQH,EAAA,OAAA,SAAA,EACRI,EAAA,YAMEC,EANFH,aAME,CALC,sBAAqBF,EAAiB,kBACtC,gBAAeA,EAAY,aAC3B,MAAOA,EAAa,cACpB,UAASF,EAAmB,qBACrBE,EAAkB,kBAAA,EAAA,KAAA,GAAA,CAAA,sBAAA,gBAAA,QAAA,SAAA,CAAA"}
+{"version":3,"file":"input-group.cjs","sources":["../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"hasSlotContent($slots.legend) || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["DtValidationMessages","InputGroupMixin","hasSlotContent","_createElementBlock","_openBlock","_mergeProps","_renderSlot","_createVNode"],"mappings":";;;;;;;;;AAuCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAEA,sBAAAA,uBAAAA,qBAAsB;AAAA,EAEpC,QAAQ,CAACC,YAAAA,eAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB,gBAAAC,aAAc;AAAA;EAEjB;AAAA,EAED,OAAO;AAAA,IACL,MAAO,UAAU;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,QAAQ;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,uBAAuB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACvD;AAAA,EACF;AACH;;;;;0BArGEC,IAwBW,mBAAA,YAAA;AAAA,IAvBT,OAAM;AAAA,IACL,WAAS,OAAW;AAAA;IAGb,MAAA,eAAe,KAAA,OAAO,MAAM,KAAK,KAAM,UAD/CC,IAAAA,aAAAD,IAAAA,mBAUS,UAVTE,eAUS;AAAA;MARN,mBAAmB,KAAW,WAAA;AAAA,OACvB,KAAgB,kBAAA,EACvB,WAAS,OAAiB,kBAAA,CAAA,GAAA;AAAA,MAG3BC,IAAAA,WAEO,2BAFP,MAEO;AAAA,gDADF,KAAM,MAAA,GAAA,CAAA;AAAA;;IAIbA,eAAQ,KAAA,QAAA,SAAA;AAAA,IACRC,IAAA,YAME,mCANFF,eAME;AAAA,MALC,uBAAqB,KAAiB;AAAA,MACtC,iBAAe,KAAY;AAAA,MAC3B,OAAO,KAAa;AAAA,MACpB,WAAS,OAAmB;AAAA,OACrB,KAAkB,kBAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA;AAAA;;;;"}

package/dist/lib/input-group.js

@@ -1,14 +1,14 @@
-import { I as i } from "../chunks/input_group-bBKaq3Wi.js";
-import { hasSlotContent as p } from "./utils.js";
-import { resolveComponent as u, openBlock as t, createElementBlock as o, mergeProps as n, renderSlot as r, createTextVNode as g, toDisplayString as m, createCommentVNode as h, createVNode as f } from "vue";
-import { _ as c } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtValidationMessages as v } from "./validation-messages.js";
-import "./validators.js";
-import "./constants.js";
-const G = {
+import { InputGroupMixin } from "../chunks/input_group-jWnq2DJT.js";
+import { hasSlotContent } from "../common/utils.js";
+import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtValidationMessages } from "./validation-messages.js";
+import "../common/validators.js";
+import "../common/constants.js";
+const _sfc_main = {
   name: "DtInputGroup",
-  components: { DtValidationMessages: v },
-  mixins: [i],
+  components: { DtValidationMessages },
+  mixins: [InputGroupMixin],
   props: {
     /**
      * A data qa tag for the input group
@@ -35,12 +35,12 @@ const G = {
   data() {
     return {
       internalValue: this.value,
-      hasSlotContent: p
+      hasSlotContent
     };
   },
   watch: {
-    value(e) {
-      this.internalValue = e;
+    value(newValue) {
+      this.internalValue = newValue;
     },
     /*
      * watching value to support 2 way binding for slotted inputs.
@@ -48,43 +48,45 @@ const G = {
      * input group.
      */
     internalValue: {
-      immediate: !0,
-      handler(e) {
-        this.provideObj.value = e;
+      immediate: true,
+      handler(newInternalValue) {
+        this.provideObj.value = newInternalValue;
       }
     }
   },
   methods: {
-    getMessageKey(e, s) {
-      return `input-group-message-${e}-${s}-${this.id}`;
+    getMessageKey(type, index) {
+      return `input-group-message-${type}-${index}-${this.id}`;
     }
   }
-}, C = ["data-qa"], _ = ["data-qa"];
-function M(e, s, a, S, d, V) {
-  const l = u("dt-validation-messages");
-  return t(), o("fieldset", {
+};
+const _hoisted_1 = ["data-qa"];
+const _hoisted_2 = ["data-qa"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_validation_messages = resolveComponent("dt-validation-messages");
+  return openBlock(), createElementBlock("fieldset", {
     class: "d-input-group__fieldset",
-    "data-qa": a.dataQaGroup
+    "data-qa": $props.dataQaGroup
   }, [
-    d.hasSlotContent(e.$slots.legend) || e.legend ? (t(), o("legend", n({
+    $data.hasSlotContent(_ctx.$slots.legend) || _ctx.legend ? (openBlock(), createElementBlock("legend", mergeProps({
       key: 0,
-      class: ["d-label", e.legendClass]
-    }, e.legendChildProps, { "data-qa": a.dataQaGroupLegend }), [
-      r(e.$slots, "legend", {}, () => [
-        g(m(e.legend), 1)
+      class: ["d-label", _ctx.legendClass]
+    }, _ctx.legendChildProps, { "data-qa": $props.dataQaGroupLegend }), [
+      renderSlot(_ctx.$slots, "legend", {}, () => [
+        createTextVNode(toDisplayString(_ctx.legend), 1)
       ])
-    ], 16, _)) : h("", !0),
-    r(e.$slots, "default"),
-    f(l, n({
-      "validation-messages": e.formattedMessages,
-      "show-messages": e.showMessages,
-      class: e.messagesClass,
-      "data-qa": a.dataQaGroupMessages
-    }, e.messagesChildProps), null, 16, ["validation-messages", "show-messages", "class", "data-qa"])
-  ], 8, C);
+    ], 16, _hoisted_2)) : createCommentVNode("", true),
+    renderSlot(_ctx.$slots, "default"),
+    createVNode(_component_dt_validation_messages, mergeProps({
+      "validation-messages": _ctx.formattedMessages,
+      "show-messages": _ctx.showMessages,
+      class: _ctx.messagesClass,
+      "data-qa": $props.dataQaGroupMessages
+    }, _ctx.messagesChildProps), null, 16, ["validation-messages", "show-messages", "class", "data-qa"])
+  ], 8, _hoisted_1);
 }
-const k = /* @__PURE__ */ c(G, [["render", M]]);
+const DtInputGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  k as DtInputGroup
+  DtInputGroup
 };
 //# sourceMappingURL=input-group.js.map

package/dist/lib/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","sources":["../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"hasSlotContent($slots.legend) || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","InputGroupMixin","hasSlotContent","newValue","newInternalValue","type","index","_createElementBlock","$props","$data","_ctx","_openBlock","_mergeProps","_renderSlot","_createVNode","_component_dt_validation_messages"],"mappings":";;;;;;;AAuCA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAE,sBAAAC,EAAsB;AAAA,EAEpC,QAAQ,CAACC,CAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB,gBAAAC;AAAA;EAEH;AAAA,EAED,OAAO;AAAA,IACL,MAAOC,GAAU;AACf,WAAK,gBAAgBA;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAASC,GAAkB;AACzB,aAAK,WAAW,QAAQA;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAeC,GAAMC,GAAO;AAC1B,aAAO,uBAAuBD,CAAI,IAAIC,CAAK,IAAI,KAAK,EAAE;AAAA,IACvD;AAAA,EACF;AACH;;;cArGEC,EAwBW,YAAA;AAAA,IAvBT,OAAM;AAAA,IACL,WAASC,EAAW;AAAA;IAGbC,EAAA,eAAeC,EAAA,OAAO,MAAM,KAAKA,EAAM,UAD/CC,KAAAJ,EAUS,UAVTK,EAUS;AAAA;MARN,mBAAmBF,EAAW,WAAA;AAAA,OACvBA,EAAgB,kBAAA,EACvB,WAASF,EAAiB,kBAAA,CAAA,GAAA;AAAA,MAG3BK,EAEOH,wBAFP,MAEO;AAAA,YADFA,EAAM,MAAA,GAAA,CAAA;AAAA;;IAIbG,EAAQH,EAAA,QAAA,SAAA;AAAA,IACRI,EAMEC,GANFH,EAME;AAAA,MALC,uBAAqBF,EAAiB;AAAA,MACtC,iBAAeA,EAAY;AAAA,MAC3B,OAAOA,EAAa;AAAA,MACpB,WAASF,EAAmB;AAAA,OACrBE,EAAkB,kBAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA;AAAA;;;"}
+{"version":3,"file":"input-group.js","sources":["../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"hasSlotContent($slots.legend) || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_openBlock","_mergeProps","_renderSlot","_createVNode"],"mappings":";;;;;;;AAuCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAE,qBAAsB;AAAA,EAEpC,QAAQ,CAAC,eAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB;AAAA;EAEH;AAAA,EAED,OAAO;AAAA,IACL,MAAO,UAAU;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,QAAQ;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,uBAAuB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACvD;AAAA,EACF;AACH;;;;;sBArGEA,mBAwBW,YAAA;AAAA,IAvBT,OAAM;AAAA,IACL,WAAS,OAAW;AAAA;IAGb,MAAA,eAAe,KAAA,OAAO,MAAM,KAAK,KAAM,UAD/CC,aAAAD,mBAUS,UAVTE,WAUS;AAAA;MARN,mBAAmB,KAAW,WAAA;AAAA,OACvB,KAAgB,kBAAA,EACvB,WAAS,OAAiB,kBAAA,CAAA,GAAA;AAAA,MAG3BC,WAEO,2BAFP,MAEO;AAAA,wCADF,KAAM,MAAA,GAAA,CAAA;AAAA;;IAIbA,WAAQ,KAAA,QAAA,SAAA;AAAA,IACRC,YAME,mCANFF,WAME;AAAA,MALC,uBAAqB,KAAiB;AAAA,MACtC,iBAAe,KAAY;AAAA,MAC3B,OAAO,KAAa;AAAA,MACpB,WAAS,OAAmB;AAAA,OACrB,KAAkB,kBAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA;AAAA;;;"}