@dialpad/dialtone-vue 3.220.0-next.4 → 3.220.0

package/dist/attachment_carousel-BHxR7A76.cjs

@@ -0,0 +1,2 @@
+require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./localization/index.cjs`),n=require(`./lib/button/button.cjs`),r=require(`./lib/image-viewer/image-viewer.cjs`),i=require(`./lib/progress-circle/progress-circle.cjs`);let a=require(`vue`),o=require(`@dialpad/dialtone-icons/vue3`);var s={compatConfig:{MODE:3},name:`DtImageCarousel`,components:{DtImageViewer:r.default,DtButton:n.default,DtIconClose:o.DtIconClose,DtProgressCircle:i.default},props:{mediaItem:{type:Object,required:!0},index:{type:Number,required:!0}},emits:[`remove-media`],data(){return{i18n:new t.DialtoneLocalization}},computed:{closeButtonTitle(){return this.i18n.$t(`DIALTONE_CLOSE_BUTTON`)}},methods:{removeMediaItem(e){this.$emit(`remove-media`,e)}}},c={class:`d-recipe-attachment-carousel__image`},l={class:`d-recipe-attachment-carousel__image-top-right`},u={class:`d-recipe-attachment-carousel__image-progress-bar`};function d(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-image-viewer`),d=(0,a.resolveComponent)(`dt-progress-circle`),f=(0,a.resolveComponent)(`dt-icon-close`),p=(0,a.resolveComponent)(`dt-button`);return(0,a.openBlock)(),(0,a.createElementBlock)(`li`,c,[(0,a.createVNode)(s,{"image-button-class":`d-recipe-attachment-carousel__image-viewer`,"image-src":n.mediaItem.path,"image-alt":n.mediaItem.altText,"aria-label":i.i18n.$t(`DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL`)},null,8,[`image-src`,`image-alt`,`aria-label`]),(0,a.createElementVNode)(`div`,l,[(0,a.createElementVNode)(`span`,u,[n.mediaItem.isUploading?((0,a.openBlock)(),(0,a.createBlock)(d,{key:0,kind:`brand`,size:`400`,progress:n.mediaItem.progress,"aria-label":i.i18n.$t(`DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL`)},null,8,[`progress`,`aria-label`])):(0,a.createCommentVNode)(``,!0)]),(0,a.createVNode)(p,{id:`closeButton-${n.index}`,tabindex:`0`,class:`d-recipe-attachment-carousel__image-close-button`,circle:``,size:`xs`,importance:`clear`,"aria-label":o.closeButtonTitle,title:o.closeButtonTitle,onClick:t[0]||(t[0]=e=>o.removeMediaItem(n.index))},{icon:(0,a.withCtx)(()=>[(0,a.createVNode)(f,{size:`200`})]),_:1},8,[`id`,`aria-label`,`title`])])])}var f=e.t(s,[[`render`,d]]),p=64,m={compatConfig:{MODE:3},name:`DtRecipeAttachmentCarousel`,components:{DtButton:n.default,DtIconArrowRight:o.DtIconArrowRight,DtIconArrowLeft:o.DtIconArrowLeft,DtImageCarousel:f},props:{mediaList:{type:Array,default:()=>[]}},emits:[`remove-media`],data(){return{showCloseButton:{},showRightArrow:!0,showLeftArrow:!1,isMounted:!1,i18n:new t.DialtoneLocalization}},computed:{filteredMediaList(){return this.mediaList.filter(e=>e.type===`image`||e.type===`video`)}},mounted:function(){this.showLeftArrow=this.$refs.carousel.scrollLeft>0,this.showRightArrow=this.$refs.carousel.scrollWidth>this.$refs.carousel.clientWidth},methods:{onItemFocus(e){e.currentTarget.scrollIntoView({behavior:`smooth`})},mediaComponent(e){switch(e){case`image`:return`dt-image-carousel`;default:return null}},removeMediaItem(e){this.showRightArrow=this.$refs.carousel.scrollWidth>this.$refs.carousel.clientWidth+p,this.$emit(`remove-media`,e)},closeButton(e,t){this.showCloseButton[t]=e},handleScroll(){let e=this.$refs.carousel;this.showLeftArrow=e.scrollLeft>0,this.showRightArrow=e.scrollLeft+e.clientWidth!==e.scrollWidth},leftScroll(){this.$refs.carousel.scrollTo({left:this.$refs.carousel.scrollLeft-100,behavior:`smooth`})},rightScroll(){this.$refs.carousel.scrollTo({left:this.$refs.carousel.scrollLeft+100,behavior:`smooth`})}}},h={class:`d-recipe-attachment-carousel`,role:`presentation`};function g(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-icon-arrow-left`),c=(0,a.resolveComponent)(`dt-button`),l=(0,a.resolveComponent)(`dt-icon-arrow-right`);return(0,a.openBlock)(),(0,a.createElementBlock)(`div`,h,[n.mediaList.length>0?((0,a.openBlock)(),(0,a.createElementBlock)(`ul`,{key:0,ref:`carousel`,class:`d-recipe-attachment-carousel__media-list`,onScroll:t[0]||(t[0]=(...e)=>o.handleScroll&&o.handleScroll(...e))},[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(o.filteredMediaList,(e,t)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.resolveDynamicComponent)(o.mediaComponent(e.type)),{key:`media-${t}`,index:t,"media-item":e,onRemoveMedia:e=>o.removeMediaItem(t),onFocusin:o.onItemFocus},null,40,[`index`,`media-item`,`onRemoveMedia`,`onFocusin`]))),128))],544)):(0,a.createCommentVNode)(``,!0),(0,a.withDirectives)((0,a.createVNode)(c,{tabindex:`-1`,"aria-label":i.i18n.$t(`DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL`),class:`d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left`,circle:``,size:`xs`,importance:`clear`,onClick:o.leftScroll},{icon:(0,a.withCtx)(()=>[(0,a.createVNode)(s,{size:`100`})]),_:1},8,[`aria-label`,`onClick`]),[[a.vShow,i.showLeftArrow]]),(0,a.withDirectives)((0,a.createVNode)(c,{tabindex:`-1`,"aria-label":i.i18n.$t(`DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL`),class:`d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right`,circle:``,size:`xs`,importance:`clear`,onClick:o.rightScroll},{icon:(0,a.withCtx)(()=>[(0,a.createVNode)(l,{size:`100`})]),_:1},8,[`aria-label`,`onClick`]),[[a.vShow,i.showRightArrow]])])}var _=e.t(m,[[`render`,g]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return _}});
+//# sourceMappingURL=attachment_carousel-BHxR7A76.cjs.map

package/dist/attachment_carousel-BHxR7A76.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment_carousel-BHxR7A76.cjs","names":[],"sources":["../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<template>\n  <li\n    class=\"d-recipe-attachment-carousel__image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"d-recipe-attachment-carousel__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL')\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"d-recipe-attachment-carousel__image-top-right\"\n    >\n      <span\n        class=\"d-recipe-attachment-carousel__image-progress-bar\"\n      >\n        <dt-progress-circle\n          v-if=\"mediaItem.isUploading\"\n          kind=\"brand\"\n          size=\"400\"\n          :progress=\"mediaItem.progress\"\n          :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n        />\n      </span>\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"d-recipe-attachment-carousel__image-close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeButtonTitle\"\n        :title=\"closeButtonTitle\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon-close\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nimport { DtProgressCircle } from '@/components/progress_circle';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIconClose,\n    DtProgressCircle,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    class=\"d-recipe-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"d-recipe-attachment-carousel__media-list\"\n      @scroll=\"handleScroll\"\n    >\n      <!-- media list -->\n      <component\n        :is=\"mediaComponent(mediaItem.type)\"\n        v-for=\"(mediaItem, index) in filteredMediaList\"\n        :key=\"`media-${index}`\"\n        :index=\"index\"\n        :media-item=\"mediaItem\"\n        @remove-media=\"removeMediaItem(index)\"\n        @focusin=\"onItemFocus\"\n      />\n    </ul>\n\n    <!-- Carousel Arrows -->\n    <dt-button\n      v-show=\"showLeftArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-left\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-right\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIconArrowRight, DtIconArrowLeft } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtImageCarousel,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * media - object array of media objects\n     * @type {Array}\n     *\n     * Object: {\n     *  path: String,\n     *  altText: String | null,\n     * }\n     */\n    mediaList: {\n      type: Array,\n      default: () => [],\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      showCloseButton: {},\n      showRightArrow: true,\n      showLeftArrow: false,\n      isMounted: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    filteredMediaList () {\n      return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n    },\n  },\n\n  mounted: function () {\n    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n  },\n\n  methods: {\n    onItemFocus (e) {\n      e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n    },\n\n    mediaComponent (type) {\n      switch (type) {\n        case 'image':\n          return 'dt-image-carousel';\n        default:\n          // unknown media type\n          return null;\n      }\n    },\n\n    removeMediaItem (index) {\n      // make sure the carousel arrows is updated. 64 is the width of each media item\n      this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n      this.$emit('remove-media', index);\n    },\n\n    closeButton (val, index) {\n      this.showCloseButton[index] = val;\n    },\n\n    handleScroll () {\n      const carousel = this.$refs.carousel;\n      this.showLeftArrow = carousel.scrollLeft > 0;\n      this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n    },\n\n    leftScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft - 100,\n        behavior: 'smooth',\n      });\n    },\n\n    rightScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft + 100,\n        behavior: 'smooth',\n      });\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/{attachment_carousel-1qxTI-NN.js → attachment_carousel-CouFqFMw.js}

@@ -4,7 +4,7 @@ import n from "./lib/button/button.js";
 import r from "./lib/image-viewer/image-viewer.js";
 import i from "./lib/progress-circle/progress-circle.js";
 import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, openBlock as d, renderList as f, resolveComponent as p, resolveDynamicComponent as m, vShow as h, withCtx as g, withDirectives as _ } from "vue";
-import { DtIconArrowLeft as v, DtIconArrowRight as y, DtIconClose as b } from "@dialpad/dialtone-icons/vue";
+import { DtIconArrowLeft as v, DtIconArrowRight as y, DtIconClose as b } from "@dialpad/dialtone-icons/vue3";
 //#region recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue
 var x = {
 	compatConfig: { MODE: 3 },
@@ -58,7 +58,7 @@ function T(e, t, n, r, i, a) {
 		tabindex: "0",
 		class: "d-recipe-attachment-carousel__image-close-button",
 		circle: "",
-		size: 100,
+		size: "xs",
 		importance: "clear",
 		"aria-label": a.closeButtonTitle,
 		title: a.closeButtonTitle,
@@ -163,7 +163,7 @@ function A(e, t, n, r, i, l) {
 			"aria-label": i.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL"),
 			class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left",
 			circle: "",
-			size: 100,
+			size: "xs",
 			importance: "clear",
 			onClick: l.leftScroll
 		}, {
@@ -175,7 +175,7 @@ function A(e, t, n, r, i, l) {
 			"aria-label": i.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL"),
 			class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right",
 			circle: "",
-			size: 100,
+			size: "xs",
 			importance: "clear",
 			onClick: l.rightScroll
 		}, {
@@ -188,4 +188,4 @@ var j = /* @__PURE__ */ e(O, [["render", A]]);
 //#endregion
 export { j as t };
 
-//# sourceMappingURL=attachment_carousel-1qxTI-NN.js.map
+//# sourceMappingURL=attachment_carousel-CouFqFMw.js.map

package/dist/attachment_carousel-CouFqFMw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment_carousel-CouFqFMw.js","names":[],"sources":["../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<template>\n  <li\n    class=\"d-recipe-attachment-carousel__image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"d-recipe-attachment-carousel__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL')\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"d-recipe-attachment-carousel__image-top-right\"\n    >\n      <span\n        class=\"d-recipe-attachment-carousel__image-progress-bar\"\n      >\n        <dt-progress-circle\n          v-if=\"mediaItem.isUploading\"\n          kind=\"brand\"\n          size=\"400\"\n          :progress=\"mediaItem.progress\"\n          :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n        />\n      </span>\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"d-recipe-attachment-carousel__image-close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeButtonTitle\"\n        :title=\"closeButtonTitle\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon-close\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nimport { DtProgressCircle } from '@/components/progress_circle';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIconClose,\n    DtProgressCircle,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    class=\"d-recipe-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"d-recipe-attachment-carousel__media-list\"\n      @scroll=\"handleScroll\"\n    >\n      <!-- media list -->\n      <component\n        :is=\"mediaComponent(mediaItem.type)\"\n        v-for=\"(mediaItem, index) in filteredMediaList\"\n        :key=\"`media-${index}`\"\n        :index=\"index\"\n        :media-item=\"mediaItem\"\n        @remove-media=\"removeMediaItem(index)\"\n        @focusin=\"onItemFocus\"\n      />\n    </ul>\n\n    <!-- Carousel Arrows -->\n    <dt-button\n      v-show=\"showLeftArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-left\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-right\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIconArrowRight, DtIconArrowLeft } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtImageCarousel,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * media - object array of media objects\n     * @type {Array}\n     *\n     * Object: {\n     *  path: String,\n     *  altText: String | null,\n     * }\n     */\n    mediaList: {\n      type: Array,\n      default: () => [],\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      showCloseButton: {},\n      showRightArrow: true,\n      showLeftArrow: false,\n      isMounted: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    filteredMediaList () {\n      return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n    },\n  },\n\n  mounted: function () {\n    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n  },\n\n  methods: {\n    onItemFocus (e) {\n      e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n    },\n\n    mediaComponent (type) {\n      switch (type) {\n        case 'image':\n          return 'dt-image-carousel';\n        default:\n          // unknown media type\n          return null;\n      }\n    },\n\n    removeMediaItem (index) {\n      // make sure the carousel arrows is updated. 64 is the width of each media item\n      this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n      this.$emit('remove-media', index);\n    },\n\n    closeButton (val, index) {\n      this.showCloseButton[index] = val;\n    },\n\n    handleScroll () {\n      const carousel = this.$refs.carousel;\n      this.showLeftArrow = carousel.scrollLeft > 0;\n      this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n    },\n\n    leftScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft - 100,\n        behavior: 'smooth',\n      });\n    },\n\n    rightScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft + 100,\n        behavior: 'smooth',\n      });\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/{combobox-BQBKrDTW.js → combobox-DgClbLOg.js}

@@ -1,20 +1,19 @@
-import { COMPONENT_SIZES as e } from "./common/constants/sizes.js";
-import { getUniqueString as t, hasSlotContent as n } from "./common/utils/index.js";
-import { t as r } from "./_plugin-vue_export-helper-BTgDAbhb.js";
-import i from "./common/mixins/keyboard-list-navigation.js";
-import a from "./lib/combobox/combobox-loading-list.js";
-import o from "./lib/combobox/combobox-empty-list.js";
-import { COMBOBOX_LABEL_SIZES as s } from "./lib/combobox/combobox-constants.js";
-import { createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, mergeProps as f, normalizeProps as p, openBlock as m, renderSlot as h, resolveComponent as g, withCtx as _, withKeys as v, withModifiers as y } from "vue";
+import { getUniqueString as e, hasSlotContent as t } from "./common/utils/index.js";
+import { t as n } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import r from "./common/mixins/keyboard-list-navigation.js";
+import i from "./lib/combobox/combobox-loading-list.js";
+import a from "./lib/combobox/combobox-empty-list.js";
+import { COMBOBOX_LABEL_SIZES as o } from "./lib/combobox/combobox-constants.js";
+import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, mergeProps as d, normalizeProps as f, openBlock as p, renderSlot as m, resolveComponent as h, withCtx as g, withKeys as _, withModifiers as v } from "vue";
 //#region components/combobox/combobox.vue
-var b = {
+var y = {
 	compatConfig: { MODE: 3 },
 	name: "DtCombobox",
 	components: {
-		ComboboxLoadingList: a,
-		ComboboxEmptyList: o
+		ComboboxLoadingList: i,
+		ComboboxEmptyList: a
 	},
-	mixins: [i({
+	mixins: [r({
 		indexKey: "highlightIndex",
 		idKey: "highlightId",
 		listElementKey: "getListElement",
@@ -28,14 +27,14 @@ var b = {
 			type: String,
 			required: !0
 		},
-		showLabel: {
+		labelVisible: {
 			type: Boolean,
 			default: !0
 		},
 		size: {
-			type: [String, Number],
+			type: String,
 			default: null,
-			validator: (t) => t === null || Object.values(s).includes(t) || Object.keys(e).includes(String(t))
+			validator: (e) => Object.values(o).includes(e)
 		},
 		description: {
 			type: String,
@@ -44,7 +43,7 @@ var b = {
 		listId: {
 			type: String,
 			default() {
-				return t();
+				return e();
 			}
 		},
 		onBeginningOfList: {
@@ -97,14 +96,14 @@ var b = {
 	data() {
 		return {
 			outsideRenderedListRef: null,
-			hasSlotContent: n
+			hasSlotContent: t
 		};
 	},
 	computed: {
 		inputProps() {
 			return {
 				label: this.label,
-				showLabel: this.showLabel,
+				labelVisible: this.labelVisible,
 				size: this.size,
 				description: this.description,
 				role: "combobox",
@@ -193,38 +192,38 @@ var b = {
 			this.$slots.emptyListItem || this.emptyList && !this.emptyStateMessage && console.error("Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.");
 		}
 	}
-}, x = { "data-qa": "dt-combobox-input-wrapper" };
-function S(e, t, n, r, i, a) {
-	let o = g("combobox-loading-list"), s = g("combobox-empty-list");
-	return m(), u("div", { onKeydown: [
-		t[3] || (t[3] = v(y((e) => a.onKeyValidation(e, "onEscapeKey"), ["stop"]), ["esc"])),
-		t[4] || (t[4] = v(y((e) => a.onKeyValidation(e, "onEnterKey"), ["exact"]), ["enter"])),
-		t[5] || (t[5] = v(y((e) => a.onKeyValidation(e, "onUpKey"), ["stop", "prevent"]), ["up"])),
-		t[6] || (t[6] = v(y((e) => a.onKeyValidation(e, "onDownKey"), ["stop", "prevent"]), ["down"])),
-		t[7] || (t[7] = v(y((e) => a.onKeyValidation(e, "onHomeKey"), ["stop", "prevent"]), ["home"])),
-		t[8] || (t[8] = v(y((e) => a.onKeyValidation(e, "onEndKey"), ["stop", "prevent"]), ["end"]))
-	] }, [d("div", x, [h(e.$slots, "input", { inputProps: a.inputProps })]), n.showList ? (m(), u("div", {
+}, b = { "data-qa": "dt-combobox-input-wrapper" };
+function x(e, t, n, r, i, a) {
+	let o = h("combobox-loading-list"), y = h("combobox-empty-list");
+	return p(), l("div", { onKeydown: [
+		t[3] || (t[3] = _(v((e) => a.onKeyValidation(e, "onEscapeKey"), ["stop"]), ["esc"])),
+		t[4] || (t[4] = _(v((e) => a.onKeyValidation(e, "onEnterKey"), ["exact"]), ["enter"])),
+		t[5] || (t[5] = _(v((e) => a.onKeyValidation(e, "onUpKey"), ["stop", "prevent"]), ["up"])),
+		t[6] || (t[6] = _(v((e) => a.onKeyValidation(e, "onDownKey"), ["stop", "prevent"]), ["down"])),
+		t[7] || (t[7] = _(v((e) => a.onKeyValidation(e, "onHomeKey"), ["stop", "prevent"]), ["home"])),
+		t[8] || (t[8] = _(v((e) => a.onKeyValidation(e, "onEndKey"), ["stop", "prevent"]), ["end"]))
+	] }, [u("div", b, [m(e.$slots, "input", { inputProps: a.inputProps })]), n.showList ? (p(), l("div", {
 		key: 0,
 		ref: "listWrapper",
 		"data-qa": "dt-combobox-list-wrapper",
 		onMouseleave: t[0] || (t[0] = (...e) => a.clearHighlightIndex && a.clearHighlightIndex(...e)),
 		onFocusout: t[1] || (t[1] = (...e) => a.clearHighlightIndex && a.clearHighlightIndex(...e)),
 		onMousemoveCapture: t[2] || (t[2] = (...e) => a.onMouseHighlight && a.onMouseHighlight(...e))
-	}, [n.loading && !n.listRenderedOutside ? (m(), c(o, p(f({ key: 0 }, a.listProps)), null, 16)) : n.emptyList && (n.emptyStateMessage || i.hasSlotContent(e.$slots.emptyListItem)) && !n.listRenderedOutside ? (m(), c(s, f({ key: 1 }, a.listProps, {
+	}, [n.loading && !n.listRenderedOutside ? (p(), s(o, f(d({ key: 0 }, a.listProps)), null, 16)) : n.emptyList && (n.emptyStateMessage || i.hasSlotContent(e.$slots.emptyListItem)) && !n.listRenderedOutside ? (p(), s(y, d({ key: 1 }, a.listProps, {
 		message: n.emptyStateMessage,
 		"item-class": n.emptyStateClass
 	}), {
-		default: _(() => [h(e.$slots, "emptyListItem")]),
+		default: g(() => [m(e.$slots, "emptyListItem")]),
 		_: 3
-	}, 16, ["message", "item-class"])) : h(e.$slots, "list", {
+	}, 16, ["message", "item-class"])) : m(e.$slots, "list", {
 		key: 2,
 		listProps: a.listProps,
 		opened: a.onOpen,
 		clearHighlightIndex: a.clearHighlightIndex
-	})], 544)) : l("", !0)], 32);
+	})], 544)) : c("", !0)], 32);
 }
-var C = /* @__PURE__ */ r(b, [["render", S]]);
+var S = /* @__PURE__ */ n(y, [["render", x]]);
 //#endregion
-export { C as t };
+export { S as t };
 
-//# sourceMappingURL=combobox-BQBKrDTW.js.map
+//# sourceMappingURL=combobox-DgClbLOg.js.map

package/dist/combobox-DgClbLOg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-DgClbLOg.js","names":[],"sources":["../components/combobox/combobox.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <div\n    @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n    @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n    @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n    @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n    @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n    @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n  >\n    <div data-qa=\"dt-combobox-input-wrapper\">\n      <!-- @slot Slot for the combobox input element -->\n      <slot\n        name=\"input\"\n        :input-props=\"inputProps\"\n      />\n    </div>\n\n    <div\n      v-if=\"showList\"\n      ref=\"listWrapper\"\n      data-qa=\"dt-combobox-list-wrapper\"\n      @mouseleave=\"clearHighlightIndex\"\n      @focusout=\"clearHighlightIndex\"\n      @mousemove.capture=\"onMouseHighlight\"\n    >\n      <combobox-loading-list\n        v-if=\"loading && !listRenderedOutside\"\n        v-bind=\"listProps\"\n      />\n      <combobox-empty-list\n        v-else-if=\"emptyList && (emptyStateMessage || hasSlotContent($slots.emptyListItem)) && !listRenderedOutside\"\n        v-bind=\"listProps\"\n        :message=\"emptyStateMessage\"\n        :item-class=\"emptyStateClass\"\n      >\n        <slot name=\"emptyListItem\" />\n      </combobox-empty-list>\n      <!-- @slot Slot for the combobox list element -->\n      <slot\n        v-else\n        name=\"list\"\n        :list-props=\"listProps\"\n        :opened=\"onOpen\"\n        :clear-highlight-index=\"clearHighlightIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { DtKeyboardListNavigationMixin } from '@/common/mixins';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { COMBOBOX_LABEL_SIZES } from '@/components/combobox';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCombobox',\n\n  components: {\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [\n    DtKeyboardListNavigationMixin({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n    }),\n  ],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(COMBOBOX_LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * @values true, false\n     */\n    showList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If the list is rendered outside the component, like when using popover as the list wrapper.\n     * @values true, false\n     */\n    listRenderedOutside: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     * @values true, false\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the empty list element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    emptyStateClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Programmatically click on the active list item element when a selection\n     * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n     * @values true, false\n     */\n    clickOnSelect: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when pressing escape\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired when list is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      // If the list is rendered at the root, rather than as a child\n      // of this component, this is the ref to that dom element. Set\n      // by the onOpen method.\n      outsideRenderedListRef: null,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputProps () {\n      return {\n        label: this.label,\n        labelVisible: this.labelVisible,\n        size: this.size,\n        description: this.description,\n        role: 'combobox',\n        'aria-label': this.label,\n        'aria-expanded': this.showList.toString(),\n        'aria-owns': this.listId,\n        'aria-haspopup': 'listbox',\n        'aria-activedescendant': this.activeItemId,\n        'aria-controls': this.listId,\n      };\n    },\n\n    listProps () {\n      return {\n        role: 'listbox',\n        id: this.listId,\n        // The list has to be positioned relatively so that the auto-scroll can\n        // calculate the correct offset for the list items.\n        class: 'd-ps-relative',\n        'aria-label': this.label,\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemId () {\n      if (!this.showList || this.highlightIndex < 0 || this.loading) {\n        return;\n      }\n      return this.highlightId;\n    },\n\n    activeItemEl () {\n      if (!this.highlightId) return '';\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n  },\n\n  watch: {\n    showList (showList) {\n      // When the list's visibility changes reset the highlight index.\n\n      if (!this.listRenderedOutside) {\n        this.setInitialHighlightIndex();\n        this.$emit('opened', showList);\n      }\n\n      if (!showList && this.outsideRenderedListRef) {\n        this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n        this.outsideRenderedListRef = null;\n      }\n    },\n\n    loading () {\n      this.$nextTick(() => {\n        this.setInitialHighlightIndex();\n      });\n    },\n\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        this.validateEmptyListProps();\n      },\n    },\n  },\n\n  created () {\n    this.validateEmptyListProps();\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      if (this.loading) return;\n\n      const liElement = e.target.closest('li');\n\n      if (liElement && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n      }\n    },\n\n    getListElement () {\n      return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n    },\n\n    clearHighlightIndex () {\n      if (this.showList) {\n        this.setHighlightIndex(-1);\n      }\n    },\n\n    afterHighlight () {\n      if (this.loading) return;\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    onEnterKey () {\n      if (this.loading || this.emptyList) return;\n\n      if (this.highlightIndex >= 0) {\n        this.$emit('select', this.highlightIndex);\n\n        if (this.clickOnSelect) {\n          this.activeItemEl?.click();\n        }\n      }\n    },\n\n    onEscapeKey () {\n      this.$emit('escape');\n    },\n\n    onOpen (open, contentRef) {\n      this.outsideRenderedListRef = contentRef;\n      this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n      this.$emit('opened', open);\n\n      if (open) {\n        this.setInitialHighlightIndex();\n      }\n    },\n\n    onKeyValidation (e, eventHandler) {\n      if (!this.showList || !this.getListElement()) return;\n\n      this[eventHandler](e);\n    },\n\n    setInitialHighlightIndex () {\n      if (!this.showList) return;\n      this.$nextTick(() => {\n      // When the list's is shown, reset the highlight index.\n      // If the list is loading, set to -1\n        this.setHighlightIndex(this.loading ? -1 : 0);\n      });\n    },\n\n    validateEmptyListProps () {\n      if (this.$slots.emptyListItem) { return; }\n\n      if (this.emptyList && !this.emptyStateMessage) {\n        console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.`);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/combobox-DhjZxfUw.cjs

@@ -0,0 +1,3 @@
+require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./common/utils/index.cjs`),t=require(`./_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./common/mixins/keyboard-list-navigation.cjs`),r=require(`./lib/combobox/combobox-loading-list.cjs`),i=require(`./lib/combobox/combobox-empty-list.cjs`),a=require(`./lib/combobox/combobox-constants.cjs`);let o=require(`vue`);var s={compatConfig:{MODE:3},name:`DtCombobox`,components:{ComboboxLoadingList:r.default,ComboboxEmptyList:i.default},mixins:[n.default({indexKey:`highlightIndex`,idKey:`highlightId`,listElementKey:`getListElement`,afterHighlightMethod:`afterHighlight`,beginningOfListMethod:`beginningOfListMethod`,endOfListMethod:`endOfListMethod`,activeItemKey:`activeItemEl`})],props:{label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},size:{type:String,default:null,validator:e=>Object.values(a.COMBOBOX_LABEL_SIZES).includes(e)},description:{type:String,default:``},listId:{type:String,default(){return e.getUniqueString()}},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},showList:{type:Boolean,default:!1},listRenderedOutside:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},emptyList:{type:Boolean,default:!1},emptyStateMessage:{type:String,default:``},emptyStateClass:{type:[String,Object,Array],default:``},clickOnSelect:{type:Boolean,default:!1}},emits:[`select`,`escape`,`highlight`,`opened`],data(){return{outsideRenderedListRef:null,hasSlotContent:e.hasSlotContent}},computed:{inputProps(){return{label:this.label,labelVisible:this.labelVisible,size:this.size,description:this.description,role:`combobox`,"aria-label":this.label,"aria-expanded":this.showList.toString(),"aria-owns":this.listId,"aria-haspopup":`listbox`,"aria-activedescendant":this.activeItemId,"aria-controls":this.listId}},listProps(){return{role:`listbox`,id:this.listId,class:`d-ps-relative`,"aria-label":this.label}},beginningOfListMethod(){return this.onBeginningOfList||this.jumpToEnd},endOfListMethod(){return this.onEndOfList||this.jumpToBeginning},activeItemId(){if(!(!this.showList||this.highlightIndex<0||this.loading))return this.highlightId},activeItemEl(){return this.highlightId?this.getListElement().querySelector(`#`+this.highlightId):``}},watch:{showList(e){this.listRenderedOutside||(this.setInitialHighlightIndex(),this.$emit(`opened`,e)),!e&&this.outsideRenderedListRef&&(this.outsideRenderedListRef.removeEventListener(`mousemove`,this.onMouseHighlight),this.outsideRenderedListRef=null)},loading(){this.$nextTick(()=>{this.setInitialHighlightIndex()})},$props:{deep:!0,immediate:!0,handler(){this.validateEmptyListProps()}}},created(){this.validateEmptyListProps()},methods:{onMouseHighlight(e){if(this.loading)return;let t=e.target.closest(`li`);t&&this.highlightId!==t.id&&this.setHighlightId(t.id)},getListElement(){return this.outsideRenderedListRef??this.$refs.listWrapper?.querySelector(`#${this.listId}`)},clearHighlightIndex(){this.showList&&this.setHighlightIndex(-1)},afterHighlight(){this.loading||this.$emit(`highlight`,this.highlightIndex)},onEnterKey(){this.loading||this.emptyList||this.highlightIndex>=0&&(this.$emit(`select`,this.highlightIndex),this.clickOnSelect&&this.activeItemEl?.click())},onEscapeKey(){this.$emit(`escape`)},onOpen(e,t){this.outsideRenderedListRef=t,this.outsideRenderedListRef?.addEventListener(`mousemove`,this.onMouseHighlight),this.$emit(`opened`,e),e&&this.setInitialHighlightIndex()},onKeyValidation(e,t){!this.showList||!this.getListElement()||this[t](e)},setInitialHighlightIndex(){this.showList&&this.$nextTick(()=>{this.setHighlightIndex(this.loading?-1:0)})},validateEmptyListProps(){this.$slots.emptyListItem||this.emptyList&&!this.emptyStateMessage&&console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the
+      empty message.`)}}},c={"data-qa":`dt-combobox-input-wrapper`};function l(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`combobox-loading-list`),l=(0,o.resolveComponent)(`combobox-empty-list`);return(0,o.openBlock)(),(0,o.createElementBlock)(`div`,{onKeydown:[t[3]||(t[3]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onEscapeKey`),[`stop`]),[`esc`])),t[4]||(t[4]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onEnterKey`),[`exact`]),[`enter`])),t[5]||(t[5]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onUpKey`),[`stop`,`prevent`]),[`up`])),t[6]||(t[6]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onDownKey`),[`stop`,`prevent`]),[`down`])),t[7]||(t[7]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onHomeKey`),[`stop`,`prevent`]),[`home`])),t[8]||(t[8]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onEndKey`),[`stop`,`prevent`]),[`end`]))]},[(0,o.createElementVNode)(`div`,c,[(0,o.renderSlot)(e.$slots,`input`,{inputProps:a.inputProps})]),n.showList?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,ref:`listWrapper`,"data-qa":`dt-combobox-list-wrapper`,onMouseleave:t[0]||(t[0]=(...e)=>a.clearHighlightIndex&&a.clearHighlightIndex(...e)),onFocusout:t[1]||(t[1]=(...e)=>a.clearHighlightIndex&&a.clearHighlightIndex(...e)),onMousemoveCapture:t[2]||(t[2]=(...e)=>a.onMouseHighlight&&a.onMouseHighlight(...e))},[n.loading&&!n.listRenderedOutside?((0,o.openBlock)(),(0,o.createBlock)(s,(0,o.normalizeProps)((0,o.mergeProps)({key:0},a.listProps)),null,16)):n.emptyList&&(n.emptyStateMessage||i.hasSlotContent(e.$slots.emptyListItem))&&!n.listRenderedOutside?((0,o.openBlock)(),(0,o.createBlock)(l,(0,o.mergeProps)({key:1},a.listProps,{message:n.emptyStateMessage,"item-class":n.emptyStateClass}),{default:(0,o.withCtx)(()=>[(0,o.renderSlot)(e.$slots,`emptyListItem`)]),_:3},16,[`message`,`item-class`])):(0,o.renderSlot)(e.$slots,`list`,{key:2,listProps:a.listProps,opened:a.onOpen,clearHighlightIndex:a.clearHighlightIndex})],544)):(0,o.createCommentVNode)(``,!0)],32)}var u=t.t(s,[[`render`,l]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return u}});
+//# sourceMappingURL=combobox-DhjZxfUw.cjs.map

package/dist/combobox-DhjZxfUw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-DhjZxfUw.cjs","names":[],"sources":["../components/combobox/combobox.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <div\n    @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n    @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n    @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n    @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n    @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n    @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n  >\n    <div data-qa=\"dt-combobox-input-wrapper\">\n      <!-- @slot Slot for the combobox input element -->\n      <slot\n        name=\"input\"\n        :input-props=\"inputProps\"\n      />\n    </div>\n\n    <div\n      v-if=\"showList\"\n      ref=\"listWrapper\"\n      data-qa=\"dt-combobox-list-wrapper\"\n      @mouseleave=\"clearHighlightIndex\"\n      @focusout=\"clearHighlightIndex\"\n      @mousemove.capture=\"onMouseHighlight\"\n    >\n      <combobox-loading-list\n        v-if=\"loading && !listRenderedOutside\"\n        v-bind=\"listProps\"\n      />\n      <combobox-empty-list\n        v-else-if=\"emptyList && (emptyStateMessage || hasSlotContent($slots.emptyListItem)) && !listRenderedOutside\"\n        v-bind=\"listProps\"\n        :message=\"emptyStateMessage\"\n        :item-class=\"emptyStateClass\"\n      >\n        <slot name=\"emptyListItem\" />\n      </combobox-empty-list>\n      <!-- @slot Slot for the combobox list element -->\n      <slot\n        v-else\n        name=\"list\"\n        :list-props=\"listProps\"\n        :opened=\"onOpen\"\n        :clear-highlight-index=\"clearHighlightIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { DtKeyboardListNavigationMixin } from '@/common/mixins';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { COMBOBOX_LABEL_SIZES } from '@/components/combobox';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCombobox',\n\n  components: {\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [\n    DtKeyboardListNavigationMixin({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n    }),\n  ],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(COMBOBOX_LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * @values true, false\n     */\n    showList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If the list is rendered outside the component, like when using popover as the list wrapper.\n     * @values true, false\n     */\n    listRenderedOutside: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     * @values true, false\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the empty list element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    emptyStateClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Programmatically click on the active list item element when a selection\n     * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n     * @values true, false\n     */\n    clickOnSelect: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when pressing escape\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired when list is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      // If the list is rendered at the root, rather than as a child\n      // of this component, this is the ref to that dom element. Set\n      // by the onOpen method.\n      outsideRenderedListRef: null,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputProps () {\n      return {\n        label: this.label,\n        labelVisible: this.labelVisible,\n        size: this.size,\n        description: this.description,\n        role: 'combobox',\n        'aria-label': this.label,\n        'aria-expanded': this.showList.toString(),\n        'aria-owns': this.listId,\n        'aria-haspopup': 'listbox',\n        'aria-activedescendant': this.activeItemId,\n        'aria-controls': this.listId,\n      };\n    },\n\n    listProps () {\n      return {\n        role: 'listbox',\n        id: this.listId,\n        // The list has to be positioned relatively so that the auto-scroll can\n        // calculate the correct offset for the list items.\n        class: 'd-ps-relative',\n        'aria-label': this.label,\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemId () {\n      if (!this.showList || this.highlightIndex < 0 || this.loading) {\n        return;\n      }\n      return this.highlightId;\n    },\n\n    activeItemEl () {\n      if (!this.highlightId) return '';\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n  },\n\n  watch: {\n    showList (showList) {\n      // When the list's visibility changes reset the highlight index.\n\n      if (!this.listRenderedOutside) {\n        this.setInitialHighlightIndex();\n        this.$emit('opened', showList);\n      }\n\n      if (!showList && this.outsideRenderedListRef) {\n        this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n        this.outsideRenderedListRef = null;\n      }\n    },\n\n    loading () {\n      this.$nextTick(() => {\n        this.setInitialHighlightIndex();\n      });\n    },\n\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        this.validateEmptyListProps();\n      },\n    },\n  },\n\n  created () {\n    this.validateEmptyListProps();\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      if (this.loading) return;\n\n      const liElement = e.target.closest('li');\n\n      if (liElement && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n      }\n    },\n\n    getListElement () {\n      return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n    },\n\n    clearHighlightIndex () {\n      if (this.showList) {\n        this.setHighlightIndex(-1);\n      }\n    },\n\n    afterHighlight () {\n      if (this.loading) return;\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    onEnterKey () {\n      if (this.loading || this.emptyList) return;\n\n      if (this.highlightIndex >= 0) {\n        this.$emit('select', this.highlightIndex);\n\n        if (this.clickOnSelect) {\n          this.activeItemEl?.click();\n        }\n      }\n    },\n\n    onEscapeKey () {\n      this.$emit('escape');\n    },\n\n    onOpen (open, contentRef) {\n      this.outsideRenderedListRef = contentRef;\n      this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n      this.$emit('opened', open);\n\n      if (open) {\n        this.setInitialHighlightIndex();\n      }\n    },\n\n    onKeyValidation (e, eventHandler) {\n      if (!this.showList || !this.getListElement()) return;\n\n      this[eventHandler](e);\n    },\n\n    setInitialHighlightIndex () {\n      if (!this.showList) return;\n      this.$nextTick(() => {\n      // When the list's is shown, reset the highlight index.\n      // If the list is loading, set to -1\n        this.setHighlightIndex(this.loading ? -1 : 0);\n      });\n    },\n\n    validateEmptyListProps () {\n      if (this.$slots.emptyListItem) { return; }\n\n      if (this.emptyList && !this.emptyStateMessage) {\n        console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.`);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/common/constants/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./sizes.cjs`);var t={CRITICAL:`critical`,WARNING:`warning`,POSITIVE:`positive`},n={LARGE:`lg`,EXTRA_LARGE:`xl`},r={100:`d-description--xs`,200:`d-description--sm`,300:``,400:`d-description--lg`,500:`d-description--xl`,xs:`d-description--xs`,sm:`d-description--sm`,md:``,lg:`d-description--lg`,xl:`d-description--xl`},i={100:`d-label--xs`,200:`d-label--sm`,300:``,400:`d-label--lg`,500:`d-label--xl`,xs:`d-label--xs`,sm:`d-label--sm`,md:``,lg:`d-label--lg`,xl:`d-label--xl`},a={esc:`Esc`,escape:`Escape`,tab:`Tab`,enter:`Enter`,space:`Space`,spacebar:`Spacebar`,up:`Up`,arrowup:`ArrowUp`,left:`Left`,arrowleft:`ArrowLeft`,right:`Right`,arrowright:`ArrowRight`,down:`Down`,arrowdown:`ArrowDown`,home:`Home`,end:`End`},o=t.CRITICAL,s=`dt`,c={VALIDATION_MESSAGE_TYPES:t,DESCRIPTION_SIZE_TYPES:n,DEFAULT_VALIDATION_MESSAGE_TYPE:o,DEFAULT_PREFIX:`dt`};exports.COMPONENT_SIZES=e.COMPONENT_SIZES,exports.DEFAULT_PREFIX=s,exports.DEFAULT_VALIDATION_MESSAGE_TYPE=o,exports.DESCRIPTION_SIZE_MODIFIERS=r,exports.DESCRIPTION_SIZE_TYPES=n,exports.EVENT_KEYNAMES=a,exports.LABEL_SIZE_MODIFIERS=i,exports.TEXT_HEADLINE_SIZES=e.TEXT_HEADLINE_SIZES,exports.VALIDATION_MESSAGE_TYPES=t,exports.default=c;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={ERROR:`error`,WARNING:`warning`,SUCCESS:`success`},t={LARGE:`lg`,EXTRA_LARGE:`xl`},n={xs:``,sm:``,md:``,lg:`d-description--lg`,xl:`d-description--xl`},r={xs:`d-label--xs`,sm:`d-label--sm`,md:``,lg:`d-label--lg`,xl:`d-label--xl`},i={esc:`Esc`,escape:`Escape`,tab:`Tab`,enter:`Enter`,space:`Space`,spacebar:`Spacebar`,up:`Up`,arrowup:`ArrowUp`,left:`Left`,arrowleft:`ArrowLeft`,right:`Right`,arrowright:`ArrowRight`,down:`Down`,arrowdown:`ArrowDown`,home:`Home`,end:`End`},a=e.ERROR,o=`dt`,s={VALIDATION_MESSAGE_TYPES:e,DESCRIPTION_SIZE_TYPES:t,DEFAULT_VALIDATION_MESSAGE_TYPE:a,DEFAULT_PREFIX:`dt`};exports.DEFAULT_PREFIX=o,exports.DEFAULT_VALIDATION_MESSAGE_TYPE=a,exports.DESCRIPTION_SIZE_MODIFIERS=n,exports.DESCRIPTION_SIZE_TYPES=t,exports.EVENT_KEYNAMES=i,exports.LABEL_SIZE_MODIFIERS=r,exports.VALIDATION_MESSAGE_TYPES=e,exports.default=s;
 //# sourceMappingURL=index.cjs.map

package/dist/common/constants/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../../common/constants/index.js"],"sourcesContent":["/* TODO: Move and sort these in a constants directory\n\nExample:\n  constants/\n    forms.js\n    defaults.js\n    ...\n*/\n\n// Types of messages, also dictates what is the current state of the input.\nexport const VALIDATION_MESSAGE_TYPES = {\n  CRITICAL: 'critical',\n  WARNING: 'warning',\n  POSITIVE: 'positive',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_TYPES = {\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-description--xs',\n  200: 'd-description--sm',\n  300: '',\n  400: 'd-description--lg',\n  500: 'd-description--xl',\n  // T-shirt aliases (deprecated)\n  xs: 'd-description--xs',\n  sm: 'd-description--sm',\n  md: '',\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\n// Label size variants\nexport const LABEL_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-label--xs',\n  200: 'd-label--sm',\n  300: '',\n  400: 'd-label--lg',\n  500: 'd-label--xl',\n  // T-shirt aliases (deprecated)\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: '',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport const EVENT_KEYNAMES = {\n  esc: 'Esc',\n  escape: 'Escape',\n  tab: 'Tab',\n  enter: 'Enter',\n  space: 'Space',\n  spacebar: 'Spacebar',\n  up: 'Up',\n  arrowup: 'ArrowUp',\n  left: 'Left',\n  arrowleft: 'ArrowLeft',\n  right: 'Right',\n  arrowright: 'ArrowRight',\n  down: 'Down',\n  arrowdown: 'ArrowDown',\n  home: 'Home',\n  end: 'End',\n};\n\n/*\n * Any string message or message object in the messages prop that do not specify\n * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.\n */\nexport const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.CRITICAL;\n\n// Default prefix used for ids\nexport const DEFAULT_PREFIX = 'dt';\n\n// Component size scale\nexport { COMPONENT_SIZES, TEXT_HEADLINE_SIZES } from './sizes.js';\n\nexport default {\n  VALIDATION_MESSAGE_TYPES,\n  DESCRIPTION_SIZE_TYPES,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  DEFAULT_PREFIX,\n};\n"],"mappings":"8HAUA,IAAa,EAA2B,CACtC,SAAU,WACV,QAAS,UACT,SAAU,WACX,CAGY,EAAyB,CACpC,MAAO,KACP,YAAa,KACd,CAGY,EAA6B,CAExC,IAAK,oBACL,IAAK,oBACL,IAAK,GACL,IAAK,oBACL,IAAK,oBAEL,GAAI,oBACJ,GAAI,oBACJ,GAAI,GACJ,GAAI,oBACJ,GAAI,oBACL,CAGY,EAAuB,CAElC,IAAK,cACL,IAAK,cACL,IAAK,GACL,IAAK,cACL,IAAK,cAEL,GAAI,cACJ,GAAI,cACJ,GAAI,GACJ,GAAI,cACJ,GAAI,cACL,CAEY,EAAiB,CAC5B,IAAK,MACL,OAAQ,SACR,IAAK,MACL,MAAO,QACP,MAAO,QACP,SAAU,WACV,GAAI,KACJ,QAAS,UACT,KAAM,OACN,UAAW,YACX,MAAO,QACP,WAAY,aACZ,KAAM,OACN,UAAW,YACX,KAAM,OACN,IAAK,MACN,CAMY,EAAkC,EAAyB,SAG3D,EAAiB,KAK9B,EAAe,CACb,2BACA,yBACA,kCACA,eAAA,KACD"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../common/constants/index.js"],"sourcesContent":["/* TODO: Move and sort these in a constants directory\n\nExample:\n  constants/\n    forms.js\n    defaults.js\n    ...\n*/\n\n// Types of messages, also dictates what is the current state of the input.\nexport const VALIDATION_MESSAGE_TYPES = {\n  ERROR: 'error',\n  WARNING: 'warning',\n  SUCCESS: 'success',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_TYPES = {\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_MODIFIERS = {\n  xs: '',\n  sm: '',\n  md: '',\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\n// Label size variants\nexport const LABEL_SIZE_MODIFIERS = {\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: '',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport const EVENT_KEYNAMES = {\n  esc: 'Esc',\n  escape: 'Escape',\n  tab: 'Tab',\n  enter: 'Enter',\n  space: 'Space',\n  spacebar: 'Spacebar',\n  up: 'Up',\n  arrowup: 'ArrowUp',\n  left: 'Left',\n  arrowleft: 'ArrowLeft',\n  right: 'Right',\n  arrowright: 'ArrowRight',\n  down: 'Down',\n  arrowdown: 'ArrowDown',\n  home: 'Home',\n  end: 'End',\n};\n\n/*\n * Any string message or message object in the messages prop that do not specify\n * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.\n */\nexport const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.ERROR;\n\n// Default prefix used for ids\nexport const DEFAULT_PREFIX = 'dt';\n\nexport default {\n  VALIDATION_MESSAGE_TYPES,\n  DESCRIPTION_SIZE_TYPES,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  DEFAULT_PREFIX,\n};\n"],"mappings":"+FAUA,IAAa,EAA2B,CACtC,MAAO,QACP,QAAS,UACT,QAAS,UACV,CAGY,EAAyB,CACpC,MAAO,KACP,YAAa,KACd,CAGY,EAA6B,CACxC,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,oBACJ,GAAI,oBACL,CAGY,EAAuB,CAClC,GAAI,cACJ,GAAI,cACJ,GAAI,GACJ,GAAI,cACJ,GAAI,cACL,CAEY,EAAiB,CAC5B,IAAK,MACL,OAAQ,SACR,IAAK,MACL,MAAO,QACP,MAAO,QACP,SAAU,WACV,GAAI,KACJ,QAAS,UACT,KAAM,OACN,UAAW,YACX,MAAO,QACP,WAAY,aACZ,KAAM,OACN,UAAW,YACX,KAAM,OACN,IAAK,MACN,CAMY,EAAkC,EAAyB,MAG3D,EAAiB,KAE9B,EAAe,CACb,2BACA,yBACA,kCACA,eAAA,KACD"}

package/dist/common/constants/index.d.ts

@@ -1,36 +1,31 @@
 export namespace VALIDATION_MESSAGE_TYPES {
-    let CRITICAL: string;
+    let ERROR: string;
     let WARNING: string;
-    let POSITIVE: string;
+    let SUCCESS: string;
 }
 export namespace DESCRIPTION_SIZE_TYPES {
     let LARGE: string;
     let EXTRA_LARGE: string;
 }
-export const DESCRIPTION_SIZE_MODIFIERS: {
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-};
-export const LABEL_SIZE_MODIFIERS: {
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-};
+export namespace DESCRIPTION_SIZE_MODIFIERS {
+    let xs: string;
+    let sm: string;
+    let md: string;
+    let lg: string;
+    let xl: string;
+}
+export namespace LABEL_SIZE_MODIFIERS {
+    let xs_1: string;
+    export { xs_1 as xs };
+    let sm_1: string;
+    export { sm_1 as sm };
+    let md_1: string;
+    export { md_1 as md };
+    let lg_1: string;
+    export { lg_1 as lg };
+    let xl_1: string;
+    export { xl_1 as xl };
+}
 export namespace EVENT_KEYNAMES {
     let esc: string;
     let escape: string;
@@ -58,5 +53,4 @@ declare namespace _default {
     export { DEFAULT_PREFIX };
 }
 export default _default;
-export { COMPONENT_SIZES, TEXT_HEADLINE_SIZES } from './sizes.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/common/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/constants/index.js"],"names":[],"mappings":";;;;;;;;;AAuBA;;;;;;;;;;;EAaE;AAGF;;;;;;;;;;;EAaE;;;;;;;;;;;;;;;;;;;AAyBF,qDAAiF;AAGjF,6BAA8B,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/constants/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,qDAA8E;AAG9E,6BAA8B,IAAI,CAAC"}

package/dist/common/constants/index.js

@@ -1,35 +1,24 @@
-import { COMPONENT_SIZES as e, TEXT_HEADLINE_SIZES as t } from "./sizes.js";
 //#region common/constants/index.js
-var n = {
-	CRITICAL: "critical",
+var e = {
+	ERROR: "error",
 	WARNING: "warning",
-	POSITIVE: "positive"
-}, r = {
+	SUCCESS: "success"
+}, t = {
 	LARGE: "lg",
 	EXTRA_LARGE: "xl"
-}, i = {
-	100: "d-description--xs",
-	200: "d-description--sm",
-	300: "",
-	400: "d-description--lg",
-	500: "d-description--xl",
-	xs: "d-description--xs",
-	sm: "d-description--sm",
+}, n = {
+	xs: "",
+	sm: "",
 	md: "",
 	lg: "d-description--lg",
 	xl: "d-description--xl"
-}, a = {
-	100: "d-label--xs",
-	200: "d-label--sm",
-	300: "",
-	400: "d-label--lg",
-	500: "d-label--xl",
+}, r = {
 	xs: "d-label--xs",
 	sm: "d-label--sm",
 	md: "",
 	lg: "d-label--lg",
 	xl: "d-label--xl"
-}, o = {
+}, i = {
 	esc: "Esc",
 	escape: "Escape",
 	tab: "Tab",
@@ -46,13 +35,13 @@ var n = {
 	arrowdown: "ArrowDown",
 	home: "Home",
 	end: "End"
-}, s = n.CRITICAL, c = "dt", l = {
-	VALIDATION_MESSAGE_TYPES: n,
-	DESCRIPTION_SIZE_TYPES: r,
-	DEFAULT_VALIDATION_MESSAGE_TYPE: s,
+}, a = e.ERROR, o = "dt", s = {
+	VALIDATION_MESSAGE_TYPES: e,
+	DESCRIPTION_SIZE_TYPES: t,
+	DEFAULT_VALIDATION_MESSAGE_TYPE: a,
 	DEFAULT_PREFIX: "dt"
 };
 //#endregion
-export { e as COMPONENT_SIZES, c as DEFAULT_PREFIX, s as DEFAULT_VALIDATION_MESSAGE_TYPE, i as DESCRIPTION_SIZE_MODIFIERS, r as DESCRIPTION_SIZE_TYPES, o as EVENT_KEYNAMES, a as LABEL_SIZE_MODIFIERS, t as TEXT_HEADLINE_SIZES, n as VALIDATION_MESSAGE_TYPES, l as default };
+export { o as DEFAULT_PREFIX, a as DEFAULT_VALIDATION_MESSAGE_TYPE, n as DESCRIPTION_SIZE_MODIFIERS, t as DESCRIPTION_SIZE_TYPES, i as EVENT_KEYNAMES, r as LABEL_SIZE_MODIFIERS, e as VALIDATION_MESSAGE_TYPES, s as default };
 
 //# sourceMappingURL=index.js.map

package/dist/common/constants/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../common/constants/index.js"],"sourcesContent":["/* TODO: Move and sort these in a constants directory\n\nExample:\n  constants/\n    forms.js\n    defaults.js\n    ...\n*/\n\n// Types of messages, also dictates what is the current state of the input.\nexport const VALIDATION_MESSAGE_TYPES = {\n  CRITICAL: 'critical',\n  WARNING: 'warning',\n  POSITIVE: 'positive',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_TYPES = {\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-description--xs',\n  200: 'd-description--sm',\n  300: '',\n  400: 'd-description--lg',\n  500: 'd-description--xl',\n  // T-shirt aliases (deprecated)\n  xs: 'd-description--xs',\n  sm: 'd-description--sm',\n  md: '',\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\n// Label size variants\nexport const LABEL_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-label--xs',\n  200: 'd-label--sm',\n  300: '',\n  400: 'd-label--lg',\n  500: 'd-label--xl',\n  // T-shirt aliases (deprecated)\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: '',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport const EVENT_KEYNAMES = {\n  esc: 'Esc',\n  escape: 'Escape',\n  tab: 'Tab',\n  enter: 'Enter',\n  space: 'Space',\n  spacebar: 'Spacebar',\n  up: 'Up',\n  arrowup: 'ArrowUp',\n  left: 'Left',\n  arrowleft: 'ArrowLeft',\n  right: 'Right',\n  arrowright: 'ArrowRight',\n  down: 'Down',\n  arrowdown: 'ArrowDown',\n  home: 'Home',\n  end: 'End',\n};\n\n/*\n * Any string message or message object in the messages prop that do not specify\n * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.\n */\nexport const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.CRITICAL;\n\n// Default prefix used for ids\nexport const DEFAULT_PREFIX = 'dt';\n\n// Component size scale\nexport { COMPONENT_SIZES, TEXT_HEADLINE_SIZES } from './sizes.js';\n\nexport default {\n  VALIDATION_MESSAGE_TYPES,\n  DESCRIPTION_SIZE_TYPES,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  DEFAULT_PREFIX,\n};\n"],"mappings":";;AAUA,IAAa,IAA2B;CACtC,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAGY,IAAyB;CACpC,OAAO;CACP,aAAa;CACd,EAGY,IAA6B;CAExC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGY,IAAuB;CAElC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAiB;CAC5B,KAAK;CACL,QAAQ;CACR,KAAK;CACL,OAAO;CACP,OAAO;CACP,UAAU;CACV,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;CACX,OAAO;CACP,YAAY;CACZ,MAAM;CACN,WAAW;CACX,MAAM;CACN,KAAK;CACN,EAMY,IAAkC,EAAyB,UAG3D,IAAiB,MAK9B,IAAe;CACb;CACA;CACA;CACA,gBAAA;CACD"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../common/constants/index.js"],"sourcesContent":["/* TODO: Move and sort these in a constants directory\n\nExample:\n  constants/\n    forms.js\n    defaults.js\n    ...\n*/\n\n// Types of messages, also dictates what is the current state of the input.\nexport const VALIDATION_MESSAGE_TYPES = {\n  ERROR: 'error',\n  WARNING: 'warning',\n  SUCCESS: 'success',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_TYPES = {\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_MODIFIERS = {\n  xs: '',\n  sm: '',\n  md: '',\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\n// Label size variants\nexport const LABEL_SIZE_MODIFIERS = {\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: '',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport const EVENT_KEYNAMES = {\n  esc: 'Esc',\n  escape: 'Escape',\n  tab: 'Tab',\n  enter: 'Enter',\n  space: 'Space',\n  spacebar: 'Spacebar',\n  up: 'Up',\n  arrowup: 'ArrowUp',\n  left: 'Left',\n  arrowleft: 'ArrowLeft',\n  right: 'Right',\n  arrowright: 'ArrowRight',\n  down: 'Down',\n  arrowdown: 'ArrowDown',\n  home: 'Home',\n  end: 'End',\n};\n\n/*\n * Any string message or message object in the messages prop that do not specify\n * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.\n */\nexport const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.ERROR;\n\n// Default prefix used for ids\nexport const DEFAULT_PREFIX = 'dt';\n\nexport default {\n  VALIDATION_MESSAGE_TYPES,\n  DESCRIPTION_SIZE_TYPES,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  DEFAULT_PREFIX,\n};\n"],"mappings":";AAUA,IAAa,IAA2B;CACtC,OAAO;CACP,SAAS;CACT,SAAS;CACV,EAGY,IAAyB;CACpC,OAAO;CACP,aAAa;CACd,EAGY,IAA6B;CACxC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGY,IAAuB;CAClC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAiB;CAC5B,KAAK;CACL,QAAQ;CACR,KAAK;CACL,OAAO;CACP,OAAO;CACP,UAAU;CACV,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;CACX,OAAO;CACP,YAAY;CACZ,MAAM;CACN,WAAW;CACX,MAAM;CACN,KAAK;CACN,EAMY,IAAkC,EAAyB,OAG3D,IAAiB,MAE9B,IAAe;CACb;CACA;CACA;CACA,gBAAA;CACD"}

package/dist/common/mixins/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./dom.cjs`),t=require(`./input.cjs`),n=require(`./input-group.cjs`),r=require(`./keyboard-list-navigation.cjs`),i=require(`./modal.cjs`),a=require(`./skeleton.cjs`),o=require(`./mode.cjs`);exports.DtCheckableInputMixin=t.CheckableMixin,exports.DtDOMMixin=e.default,exports.DtGroupableInputMixin=t.GroupableMixin,exports.DtInputGroupMixin=n.InputGroupMixin,exports.DtInputMixin=t.InputMixin,exports.DtKeyboardListNavigationMixin=r.default,exports.DtModalMixin=i.default,exports.DtModeMixin=o.default,exports.DtSkeletonMixin=a.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./dom.cjs`),t=require(`./input.cjs`),n=require(`./input-group.cjs`),r=require(`./keyboard-list-navigation.cjs`),i=require(`./modal.cjs`),a=require(`./skeleton.cjs`);exports.DtCheckableInputMixin=t.CheckableMixin,exports.DtDOMMixin=e.default,exports.DtGroupableInputMixin=t.GroupableMixin,exports.DtInputGroupMixin=n.InputGroupMixin,exports.DtInputMixin=t.InputMixin,exports.DtKeyboardListNavigationMixin=r.default,exports.DtModalMixin=i.default,exports.DtSkeletonMixin=a.default;

package/dist/common/mixins/index.d.ts

@@ -3,6 +3,5 @@ export { InputGroupMixin as DtInputGroupMixin } from './input_group';
 export { default as DtKeyboardListNavigationMixin } from './keyboard_list_navigation';
 export { default as DtModalMixin } from './modal';
 export { default as DtSkeletonMixin } from './skeleton';
-export { default as DtModeMixin } from './mode';
 export { InputMixin as DtInputMixin, CheckableMixin as DtCheckableInputMixin, GroupableMixin as DtGroupableInputMixin } from './input';
 //# sourceMappingURL=index.d.ts.map

package/dist/common/mixins/index.js

@@ -4,5 +4,4 @@ import { InputGroupMixin as i } from "./input-group.js";
 import a from "./keyboard-list-navigation.js";
 import o from "./modal.js";
 import s from "./skeleton.js";
-import c from "./mode.js";
-export { t as DtCheckableInputMixin, e as DtDOMMixin, n as DtGroupableInputMixin, i as DtInputGroupMixin, r as DtInputMixin, a as DtKeyboardListNavigationMixin, o as DtModalMixin, c as DtModeMixin, s as DtSkeletonMixin };
+export { t as DtCheckableInputMixin, e as DtDOMMixin, n as DtGroupableInputMixin, i as DtInputGroupMixin, r as DtInputMixin, a as DtKeyboardListNavigationMixin, o as DtModalMixin, s as DtSkeletonMixin };

package/dist/common/mixins/input-group.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../validators/index.cjs`),t=require(`../utils/index.cjs`),n=require(`../../lib/validation-messages/validation-messages.cjs`);let r=require(`vue`);var i={components:{DtValidationMessages:n.default},provide(){return{groupContext:this.provideObj,setGroupValue:this.setGroupValue}},props:{id:{type:String,default(){return t.getUniqueString()}},value:{type:[String,Number,Boolean,Object],default:null},name:{type:String,required:!0},legend:{type:String,default:``},disabled:{type:Boolean,default:!1},messages:{type:Array,default:()=>[],validator:t=>e.validationMessageValidator(t)},showMessages:{type:Boolean,default:!0},legendClass:{type:[String,Array,Object],default:``},messagesClass:{type:[String,Array,Object],default:``},legendChildProps:{type:Object,default:()=>({})},messagesChildProps:{type:Object,default:()=>({})}},emits:[`update:modelValue`],data(){let e=t.formatMessages(this.messages);return{provideObj:{name:this.name,disabled:this.disabled,validationState:t.getValidationState(e)}}},computed:{formattedMessages(){return t.formatMessages(this.messages)},validationState(){return t.getValidationState(this.formattedMessages)}},watch:{disabled(e){this.provideObj.disabled=e},validationState(e){this.provideObj.validationState=e}},methods:{setGroupValue(e){this.internalValue=e,this.$emit(`update:modelValue`,e)}},mounted(){!this.legend&&!this.$slots.legend&&!this.$attrs[`aria-label`]&&(0,r.warn)(`It is expected that an aria-label is provided when there is no legend.`,this)}},a={InputGroupMixin:i};exports.InputGroupMixin=i,exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../validators/index.cjs`),t=require(`../utils/index.cjs`),n=require(`../../lib/validation-messages/validation-messages.cjs`);let r=require(`vue`);var i={components:{DtValidationMessages:n.default},provide(){return{groupContext:this.provideObj,setGroupValue:this.setGroupValue}},props:{id:{type:String,default(){return t.getUniqueString()}},value:{type:[String,Number,Boolean,Object],default:null},name:{type:String,required:!0},legend:{type:String,default:``},disabled:{type:Boolean,default:!1},messages:{type:Array,default:()=>[],validator:t=>e.validationMessageValidator(t)},showMessages:{type:Boolean,default:!0},legendClass:{type:[String,Array,Object],default:``},messagesClass:{type:[String,Array,Object],default:``},legendChildProps:{type:Object,default:()=>({})},messagesChildProps:{type:Object,default:()=>({})}},emits:[`input`],data(){let e=t.formatMessages(this.messages);return{provideObj:{name:this.name,disabled:this.disabled,validationState:t.getValidationState(e)}}},computed:{formattedMessages(){return t.formatMessages(this.messages)},validationState(){return t.getValidationState(this.formattedMessages)}},watch:{disabled(e){this.provideObj.disabled=e},validationState(e){this.provideObj.validationState=e}},methods:{setGroupValue(e){this.internalValue=e,this.$emit(`input`,e)}},mounted(){!this.legend&&!this.$slots.legend&&!this.$attrs[`aria-label`]&&(0,r.warn)(`It is expected that an aria-label is provided when there is no legend.`,this)}},a={InputGroupMixin:i};exports.InputGroupMixin=i,exports.default=a;
 //# sourceMappingURL=input-group.cjs.map

package/dist/common/mixins/input-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.cjs","names":["getUniqueString","validationMessageValidator","formatMessages","getValidationState"],"sources":["../../../common/mixins/input_group.js"],"sourcesContent":["import { warn } from 'vue';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { validationMessageValidator } from '@/common/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  emits: [\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {String | Number | Boolean | Object}\n     */\n    'update:modelValue',\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('update:modelValue', newValue);\n    },\n  },\n\n  mounted () {\n    if (!this.legend && !this.$slots.legend && !this.$attrs['aria-label']) {\n      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"],"mappings":"sSAcA,IAAa,EAAkB,CAC7B,WAAY,CAAE,qBAAA,EAAA,QAAsB,CAGpC,SAAW,CACT,MAAO,CACL,aAAc,KAAK,WACnB,cAAe,KAAK,cACrB,EAGH,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CACT,OAAOA,EAAAA,iBAAiB,EAE3B,CAKD,MAAO,CACL,KAAM,CAAC,OAAQ,OAAQ,QAAS,OAAO,CACvC,QAAS,KACV,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAKD,OAAQ,CACN,KAAM,OACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,MACN,YAAe,EAAE,CACjB,UAAW,GAAYC,EAAAA,2BAA2B,EAAS,CAC5D,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,iBAAkB,CAChB,KAAM,OACN,aAAgB,EAAE,EACnB,CAKD,mBAAoB,CAClB,KAAM,OACN,aAAgB,EAAE,EACnB,CACF,CAED,MAAO,CAOL,oBACD,CAED,MAAQ,CACN,IAAM,EAAoBC,EAAAA,eAAe,KAAK,SAAS,CAEvD,MAAO,CAEL,WAAY,CACV,KAAM,KAAK,KACX,SAAU,KAAK,SACf,gBAAiBC,EAAAA,mBAAmB,EAAkB,CACvD,CACF,EAGH,SAAU,CACR,mBAAqB,CACnB,OAAOD,EAAAA,eAAe,KAAK,SAAS,EAGtC,iBAAmB,CACjB,OAAOC,EAAAA,mBAAmB,KAAK,kBAAkB,EAEpD,CAED,MAAO,CACL,SAAU,EAAa,CACrB,KAAK,WAAW,SAAW,GAG7B,gBAAiB,EAAoB,CACnC,KAAK,WAAW,gBAAkB,GAErC,CAED,QAAS,CAKP,cAAe,EAAU,CACvB,KAAK,cAAgB,EACrB,KAAK,MAAM,oBAAqB,EAAS,EAE5C,CAED,SAAW,CACL,CAAC,KAAK,QAAU,CAAC,KAAK,OAAO,QAAU,CAAC,KAAK,OAAO,gBACtD,EAAA,EAAA,MAAK,yEAA0E,KAAK,EAGzF,CAED,EAAe,CACb,kBACD"}
+{"version":3,"file":"input-group.cjs","names":["getUniqueString","validationMessageValidator","formatMessages","getValidationState"],"sources":["../../../common/mixins/input_group.js"],"sourcesContent":["import { warn } from 'vue';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { validationMessageValidator } from '@/common/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  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {KeyboardEvent}\n     */\n    'input',\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      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"],"mappings":"sSAcA,IAAa,EAAkB,CAC7B,WAAY,CAAE,qBAAA,EAAA,QAAsB,CAGpC,SAAW,CACT,MAAO,CACL,aAAc,KAAK,WACnB,cAAe,KAAK,cACrB,EAGH,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CACT,OAAOA,EAAAA,iBAAiB,EAE3B,CAKD,MAAO,CACL,KAAM,CAAC,OAAQ,OAAQ,QAAS,OAAO,CACvC,QAAS,KACV,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAKD,OAAQ,CACN,KAAM,OACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,MACN,YAAe,EAAE,CACjB,UAAW,GAAYC,EAAAA,2BAA2B,EAAS,CAC5D,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,iBAAkB,CAChB,KAAM,OACN,aAAgB,EAAE,EACnB,CAKD,mBAAoB,CAClB,KAAM,OACN,aAAgB,EAAE,EACnB,CACF,CAED,MAAO,CAOL,QACD,CAED,MAAQ,CACN,IAAM,EAAoBC,EAAAA,eAAe,KAAK,SAAS,CAEvD,MAAO,CAEL,WAAY,CACV,KAAM,KAAK,KACX,SAAU,KAAK,SACf,gBAAiBC,EAAAA,mBAAmB,EAAkB,CACvD,CACF,EAGH,SAAU,CACR,mBAAqB,CACnB,OAAOD,EAAAA,eAAe,KAAK,SAAS,EAGtC,iBAAmB,CACjB,OAAOC,EAAAA,mBAAmB,KAAK,kBAAkB,EAEpD,CAED,MAAO,CACL,SAAU,EAAa,CACrB,KAAK,WAAW,SAAW,GAG7B,gBAAiB,EAAoB,CACnC,KAAK,WAAW,gBAAkB,GAErC,CAED,QAAS,CAKP,cAAe,EAAU,CACvB,KAAK,cAAgB,EACrB,KAAK,MAAM,QAAS,EAAS,EAEhC,CAED,SAAW,CACL,CAAC,KAAK,QAAU,CAAC,KAAK,OAAO,QAAU,CAAC,KAAK,OAAO,gBACtD,EAAA,EAAA,MAAK,yEAA0E,KAAK,EAGzF,CAED,EAAe,CACb,kBACD"}

package/dist/common/mixins/input-group.js

@@ -73,7 +73,7 @@ var o = {
 			default: () => ({})
 		}
 	},
-	emits: ["update:modelValue"],
+	emits: ["input"],
 	data() {
 		let e = t(this.messages);
 		return { provideObj: {
@@ -99,7 +99,7 @@ var o = {
 		}
 	},
 	methods: { setGroupValue(e) {
-		this.internalValue = e, this.$emit("update:modelValue", e);
+		this.internalValue = e, this.$emit("input", e);
 	} },
 	mounted() {
 		!this.legend && !this.$slots.legend && !this.$attrs["aria-label"] && a("It is expected that an aria-label is provided when there is no legend.", this);