@dialpad/dialtone-vue 2.40.0 → 2.42.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2038,9 +2038,9 @@ var notice_iconvue_type_template_id_dbeeebfa_render = function () {var _vm=this;
2038
2038
  var notice_iconvue_type_template_id_dbeeebfa_staticRenderFns = []
2039
2039
 
2040
2040
 
2041
- ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=template&id=1ca37c55&
2042
- var iconvue_type_template_id_1ca37c55_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.currentIcon,{tag:"component",class:_vm.iconSize,attrs:{"data-qa":"dt-icon"}})}
2043
- var iconvue_type_template_id_1ca37c55_staticRenderFns = []
2041
+ ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=template&id=0c7462d0&
2042
+ var iconvue_type_template_id_0c7462d0_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.currentIcon,{tag:"component",class:_vm.iconSize,attrs:{"data-qa":"dt-icon","aria-hidden":_vm.ariaLabel ? 'false' : 'true',"aria-label":_vm.ariaLabel}})}
2043
+ var iconvue_type_template_id_0c7462d0_staticRenderFns = []
2044
2044
 
2045
2045
 
2046
2046
  ;// CONCATENATED MODULE: ./components/icon/icon_constants.js
@@ -2068,6 +2068,8 @@ const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
2068
2068
  //
2069
2069
  //
2070
2070
  //
2071
+ //
2072
+ //
2071
2073
 
2072
2074
 
2073
2075
 
@@ -2095,6 +2097,14 @@ const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
2095
2097
  name: {
2096
2098
  type: String,
2097
2099
  required: true
2100
+ },
2101
+
2102
+ /**
2103
+ * The label of the icon as read out by a screenreader. Leave this unset if your icon is purely presentational
2104
+ */
2105
+ ariaLabel: {
2106
+ type: String,
2107
+ default: undefined
2098
2108
  }
2099
2109
  },
2100
2110
 
@@ -2131,8 +2141,8 @@ const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
2131
2141
  ;
2132
2142
  var icon_component = normalizeComponent(
2133
2143
  icon_iconvue_type_script_lang_js_,
2134
- iconvue_type_template_id_1ca37c55_render,
2135
- iconvue_type_template_id_1ca37c55_staticRenderFns,
2144
+ iconvue_type_template_id_0c7462d0_render,
2145
+ iconvue_type_template_id_0c7462d0_staticRenderFns,
2136
2146
  false,
2137
2147
  null,
2138
2148
  null,
@@ -3926,9 +3936,9 @@ var card_component = normalizeComponent(
3926
3936
  /* harmony default export */ const card = (card_component.exports);
3927
3937
  ;// CONCATENATED MODULE: ./components/card/index.js
3928
3938
 
3929
- ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=template&id=66a9d4d5&
3930
- var comboboxvue_type_template_id_66a9d4d5_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.emptyList && (_vm.emptyStateMessage || _vm.$slots.emptyListItem) && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage,"item-class":_vm.emptyStateClass}},'combobox-empty-list',_vm.listProps,false),[_vm._t("emptyListItem")],2):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
3931
- var comboboxvue_type_template_id_66a9d4d5_staticRenderFns = []
3939
+ ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=template&id=3595da7e&
3940
+ var comboboxvue_type_template_id_3595da7e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.emptyList && (_vm.emptyStateMessage || _vm.$slots.emptyListItem) && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage,"item-class":_vm.emptyStateClass}},'combobox-empty-list',_vm.listProps,false),[_vm._t("emptyListItem")],2):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
3941
+ var comboboxvue_type_template_id_3595da7e_staticRenderFns = []
3932
3942
 
3933
3943
 
3934
3944
  ;// CONCATENATED MODULE: ./common/mixins/dom.js
@@ -5710,6 +5720,14 @@ var combobox_empty_list_component = normalizeComponent(
5710
5720
  )
5711
5721
 
5712
5722
  /* harmony default export */ const combobox_empty_list = (combobox_empty_list_component.exports);
5723
+ ;// CONCATENATED MODULE: ./components/combobox/combobox_constants.js
5724
+ const LABEL_SIZES = {
5725
+ EXTRA_SMALL: 'xs',
5726
+ SMALL: 'sm',
5727
+ DEFAULT: 'md',
5728
+ LARGE: 'lg',
5729
+ EXTRA_LARGE: 'xl'
5730
+ };
5713
5731
  ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=script&lang=js&
5714
5732
  //
5715
5733
  //
@@ -5763,6 +5781,7 @@ var combobox_empty_list_component = normalizeComponent(
5763
5781
 
5764
5782
 
5765
5783
 
5784
+
5766
5785
  /**
5767
5786
  * A combobox is a semantic component that displays an input element combined with a listbox,
5768
5787
  * which enables the user to select items from the list.
@@ -5786,13 +5805,40 @@ var combobox_empty_list_component = normalizeComponent(
5786
5805
  })],
5787
5806
  props: {
5788
5807
  /**
5789
- * String to use for the list's aria-label.
5808
+ * String to use for the input label.
5790
5809
  */
5791
- listAriaLabel: {
5810
+ label: {
5792
5811
  type: String,
5793
5812
  required: true
5794
5813
  },
5795
5814
 
5815
+ /**
5816
+ * Determines visibility of input label.
5817
+ * @values true, false
5818
+ */
5819
+ labelVisible: {
5820
+ type: Boolean,
5821
+ default: true
5822
+ },
5823
+
5824
+ /**
5825
+ * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
5826
+ * @values null, xs, sm, md, lg, xl
5827
+ */
5828
+ size: {
5829
+ type: String,
5830
+ default: null,
5831
+ validator: t => Object.values(LABEL_SIZES).includes(t)
5832
+ },
5833
+
5834
+ /**
5835
+ * Description for the input
5836
+ */
5837
+ description: {
5838
+ type: String,
5839
+ default: ''
5840
+ },
5841
+
5796
5842
  /**
5797
5843
  * Sets an ID on the list element of the component. Used by several aria attributes
5798
5844
  * as well as when deriving the IDs for each item.
@@ -5927,7 +5973,12 @@ var combobox_empty_list_component = normalizeComponent(
5927
5973
  computed: {
5928
5974
  inputProps() {
5929
5975
  return {
5976
+ label: this.label,
5977
+ labelVisible: this.labelVisible,
5978
+ size: this.size,
5979
+ description: this.description,
5930
5980
  role: 'combobox',
5981
+ 'aria-label': this.label,
5931
5982
  'aria-expanded': this.showList.toString(),
5932
5983
  'aria-owns': this.listId,
5933
5984
  'aria-haspopup': 'listbox',
@@ -5943,7 +5994,7 @@ var combobox_empty_list_component = normalizeComponent(
5943
5994
  // The list has to be positioned relatively so that the auto-scroll can
5944
5995
  // calculate the correct offset for the list items.
5945
5996
  class: 'd-ps-relative',
5946
- 'aria-label': this.listAriaLabel
5997
+ 'aria-label': this.label
5947
5998
  };
5948
5999
  },
5949
6000
 
@@ -6100,8 +6151,8 @@ var combobox_empty_list_component = normalizeComponent(
6100
6151
  ;
6101
6152
  var combobox_component = normalizeComponent(
6102
6153
  combobox_comboboxvue_type_script_lang_js_,
6103
- comboboxvue_type_template_id_66a9d4d5_render,
6104
- comboboxvue_type_template_id_66a9d4d5_staticRenderFns,
6154
+ comboboxvue_type_template_id_3595da7e_render,
6155
+ comboboxvue_type_template_id_3595da7e_staticRenderFns,
6105
6156
  false,
6106
6157
  null,
6107
6158
  null,
@@ -6112,12 +6163,12 @@ var combobox_component = normalizeComponent(
6112
6163
  /* harmony default export */ const combobox = (combobox_component.exports);
6113
6164
  ;// CONCATENATED MODULE: ./components/combobox/index.js
6114
6165
 
6115
- ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/collapsible/collapsible.vue?vue&type=template&id=7bb16f26&
6116
- var collapsiblevue_type_template_id_7bb16f26_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({ref:"collapsible",tag:"component"},_vm.$listeners),[_c('div',{ref:"anchor",class:[
6166
+ ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/collapsible/collapsible.vue?vue&type=template&id=85d2157c&
6167
+ var collapsiblevue_type_template_id_85d2157c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({ref:"collapsible",tag:"component"},_vm.$listeners),[_c('div',{ref:"anchor",class:[
6117
6168
  'd-dt-collapsibe__anchor',
6118
- _vm.anchorClass ],attrs:{"id":!_vm.ariaLabelledBy && _vm.labelledBy},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.defaultToggleOpen.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.defaultToggleOpen.apply(null, arguments)}]}},[_vm._t("anchor",function(){return [_c('dt-button',{style:({
6169
+ _vm.anchorClass ],attrs:{"id":!_vm.ariaLabelledBy && _vm.labelledBy}},[_vm._t("anchor",function(){return [_c('dt-button',{style:({
6119
6170
  'width': _vm.maxWidth,
6120
- }),attrs:{"importance":"clear","kind":"muted","aria-controls":_vm.id,"aria-expanded":("" + _vm.isOpen)}},[_c('dt-icon',{staticClass:"d-icon d-icon--size-300 d-mr8 d-fl-shrink0",attrs:{"name":_vm.isOpen ? 'chevron-down' : 'chevron-right'}}),_c('span',{staticClass:"d-mr-auto d-truncate",attrs:{"title":_vm.anchorText}},[_vm._v(" "+_vm._s(_vm.anchorText)+" ")])],1)]},{"attrs":{
6171
+ }),attrs:{"importance":"clear","kind":"muted","aria-controls":_vm.id,"aria-expanded":("" + _vm.isOpen),"aria-label":_vm.ariaLabel},on:{"click":_vm.defaultToggleOpen}},[_c('dt-icon',{staticClass:"d-icon d-icon--size-300 d-mr8 d-fl-shrink0",attrs:{"name":_vm.isOpen ? 'chevron-down' : 'chevron-right'}}),_c('span',{staticClass:"d-mr-auto d-truncate",attrs:{"title":_vm.anchorText}},[_vm._v(" "+_vm._s(_vm.anchorText)+" ")])],1)]},{"attrs":{
6121
6172
  'aria-controls': _vm.id,
6122
6173
  'aria-expanded': _vm.isOpen.toString(),
6123
6174
  'role': 'button',
@@ -6126,13 +6177,13 @@ var collapsiblevue_type_template_id_7bb16f26_render = function () {var _vm=this;
6126
6177
  _vm.contentClass ],style:({
6127
6178
  'max-height': _vm.maxHeight,
6128
6179
  'max-width': _vm.maxWidth,
6129
- }),attrs:{"id":_vm.id,"aria-hidden":("" + (!_vm.isOpen)),"aria-labelledby":_vm.labelledBy,"aria-label":_vm.ariaLabel,"show":_vm.isOpen,"element-type":_vm.contentElementType,"tabindex":"-1","appear":""},on:{"after-leave":_vm.onLeaveTransitionComplete,"after-enter":_vm.onEnterTransitionComplete}},_vm.$listeners),[_vm._t("content")],2)],1)}
6130
- var collapsiblevue_type_template_id_7bb16f26_staticRenderFns = []
6180
+ }),attrs:{"id":_vm.id,"aria-hidden":("" + (!_vm.isOpen && !_vm.hasContentOnCollapse)),"aria-labelledby":_vm.labelledBy,"is-expanded":_vm.isOpen,"element-type":_vm.contentElementType,"tabindex":"-1","appear":""},scopedSlots:_vm._u([{key:"contentOnExpanded",fn:function(){return [_vm._t("contentOnExpanded")]},proxy:true},{key:"contentOnCollapsed",fn:function(){return [_vm._t("contentOnCollapsed")]},proxy:true}],null,true)},_vm.$listeners))],1)}
6181
+ var collapsiblevue_type_template_id_85d2157c_staticRenderFns = []
6131
6182
 
6132
6183
 
6133
- ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/collapsible/collapsible_lazy_show.vue?vue&type=template&id=2bfe7a0c&
6134
- var collapsible_lazy_showvue_type_template_id_2bfe7a0c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"appear":_vm.appear,"enter-active-class":"enter-active","leave-active-class":"leave-active"},on:{"before-enter":_vm.beforeEnter,"enter":_vm.enter,"after-enter":_vm.afterEnter,"before-leave":_vm.beforeLeave,"leave":_vm.leave,"after-leave":_vm.afterLeave}},_vm.$listeners),[_c(_vm.elementType,_vm._g({directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}],tag:"component"},_vm.$listeners),[(_vm.initialized)?_vm._t("default"):_vm._e()],2)],1)}
6135
- var collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns = []
6184
+ ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/collapsible/collapsible_lazy_show.vue?vue&type=template&id=cc3472b8&
6185
+ var collapsible_lazy_showvue_type_template_id_cc3472b8_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"appear":_vm.appear,"mode":"out-in","enter-active-class":"enter-active","leave-active-class":"leave-active"},on:{"before-enter":_vm.beforeEnter,"enter":_vm.enter,"after-enter":_vm.afterEnter,"before-leave":_vm.beforeLeave,"leave":_vm.leave,"after-leave":_vm.afterLeave}},_vm.$listeners),[((_vm.isExpanded && _vm.$slots.contentOnExpanded))?_c(_vm.elementType,_vm._g({key:"onOpen",tag:"component"},_vm.$listeners),[_vm._t("contentOnExpanded")],2):((!_vm.isExpanded && _vm.$slots.contentOnCollapsed))?_c(_vm.elementType,_vm._g({key:"onClose",tag:"component"},_vm.$listeners),[_vm._t("contentOnCollapsed")],2):_vm._e()],1)}
6186
+ var collapsible_lazy_showvue_type_template_id_cc3472b8_staticRenderFns = []
6136
6187
 
6137
6188
 
6138
6189
  ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/collapsible/collapsible_lazy_show.vue?vue&type=script&lang=js&
@@ -6161,6 +6212,32 @@ var collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns = []
6161
6212
  //
6162
6213
  //
6163
6214
  //
6215
+ //
6216
+ //
6217
+ //
6218
+ //
6219
+ //
6220
+ //
6221
+ //
6222
+ //
6223
+ //
6224
+ //
6225
+ //
6226
+ //
6227
+ //
6228
+ //
6229
+ //
6230
+ //
6231
+ //
6232
+ //
6233
+ //
6234
+ //
6235
+ //
6236
+ //
6237
+ //
6238
+ //
6239
+ //
6240
+ //
6164
6241
  /* harmony default export */ const collapsible_lazy_showvue_type_script_lang_js_ = ({
6165
6242
  name: 'DtCollapsibleLazyShow',
6166
6243
 
@@ -6171,7 +6248,7 @@ var collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns = []
6171
6248
  /**
6172
6249
  * Whether the child slot is shown.
6173
6250
  */
6174
- show: {
6251
+ isExpanded: {
6175
6252
  type: Boolean,
6176
6253
  default: null
6177
6254
  },
@@ -6192,29 +6269,7 @@ var collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns = []
6192
6269
  default: 'div'
6193
6270
  }
6194
6271
  },
6195
-
6196
- /******************
6197
- * DATA *
6198
- ******************/
6199
- data() {
6200
- return {
6201
- initialized: !!this.show
6202
- };
6203
- },
6204
-
6205
- /******************
6206
- * WATCH *
6207
- ******************/
6208
- watch: {
6209
- show: function (newValue) {
6210
- if (!newValue || this.initialized) return;
6211
- this.initialized = true;
6212
- }
6213
- },
6214
6272
  methods: {
6215
- /**
6216
- * @param {HTMLElement} element
6217
- */
6218
6273
  beforeEnter(element) {
6219
6274
  requestAnimationFrame(() => {
6220
6275
  if (!element.style.height) {
@@ -6291,8 +6346,8 @@ var collapsible_lazy_showvue_type_style_index_0_lang_css_ = __webpack_require__(
6291
6346
 
6292
6347
  var collapsible_lazy_show_component = normalizeComponent(
6293
6348
  collapsible_collapsible_lazy_showvue_type_script_lang_js_,
6294
- collapsible_lazy_showvue_type_template_id_2bfe7a0c_render,
6295
- collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns,
6349
+ collapsible_lazy_showvue_type_template_id_cc3472b8_render,
6350
+ collapsible_lazy_showvue_type_template_id_cc3472b8_staticRenderFns,
6296
6351
  false,
6297
6352
  null,
6298
6353
  null,
@@ -6486,6 +6541,10 @@ var lazy_show_component = normalizeComponent(
6486
6541
  //
6487
6542
  //
6488
6543
  //
6544
+ //
6545
+ //
6546
+ //
6547
+ //
6489
6548
 
6490
6549
 
6491
6550
 
@@ -6589,7 +6648,7 @@ var lazy_show_component = normalizeComponent(
6589
6648
  },
6590
6649
 
6591
6650
  /**
6592
- * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.
6651
+ * Label on the anchor. Should provide this or ariaLabelledBy but not both.
6593
6652
  */
6594
6653
  ariaLabel: {
6595
6654
  type: String,
@@ -6629,14 +6688,11 @@ var lazy_show_component = normalizeComponent(
6629
6688
  labelledBy() {
6630
6689
  // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if
6631
6690
  // there is no aria-label and the labelledby should point to the anchor
6632
- return this.ariaLabelledby || !this.ariaLabel && getUniqueString('DtCollapsible__anchor');
6691
+ return this.ariaLabelledBy || !this.ariaLabel && getUniqueString('DtCollapsible__anchor');
6633
6692
  },
6634
6693
 
6635
- contentStyle() {
6636
- return {
6637
- 'max-height': this.maxHeight,
6638
- 'max-width': this.maxWidth
6639
- };
6694
+ hasContentOnCollapse() {
6695
+ return !!this.$slots.contentOnCollapsed;
6640
6696
  }
6641
6697
 
6642
6698
  },
@@ -6650,31 +6706,26 @@ var lazy_show_component = normalizeComponent(
6650
6706
  immediate: true
6651
6707
  }
6652
6708
  },
6653
- methods: {
6654
- onLeaveTransitionComplete() {
6655
- this.$emit('opened', false);
6656
-
6657
- if (this.open !== null) {
6658
- this.$emit('update:open', false);
6659
- }
6660
- },
6661
-
6662
- onEnterTransitionComplete() {
6663
- this.$emit('opened', true, this.$refs.content);
6664
6709
 
6665
- if (this.open !== null) {
6666
- this.$emit('update:open', true);
6667
- }
6668
- },
6710
+ created() {
6711
+ this.validateProperAnchor();
6712
+ },
6669
6713
 
6714
+ methods: {
6670
6715
  defaultToggleOpen() {
6716
+ this.$emit('opened', !this.isOpen);
6717
+
6671
6718
  if (this.open === null) {
6672
- this.toggleOpen();
6719
+ this.isOpen = !this.isOpen;
6720
+ } else {
6721
+ this.$emit('update:open', !this.isOpen);
6673
6722
  }
6674
6723
  },
6675
6724
 
6676
- toggleOpen() {
6677
- this.isOpen = !this.isOpen;
6725
+ validateProperAnchor() {
6726
+ if (!this.anchorText && !this.$scopedSlots.anchor) {
6727
+ console.error('anchor text and anchor slot content cannot both be falsy');
6728
+ }
6678
6729
  }
6679
6730
 
6680
6731
  }
@@ -6691,8 +6742,8 @@ var lazy_show_component = normalizeComponent(
6691
6742
  ;
6692
6743
  var collapsible_component = normalizeComponent(
6693
6744
  collapsible_collapsiblevue_type_script_lang_js_,
6694
- collapsiblevue_type_template_id_7bb16f26_render,
6695
- collapsiblevue_type_template_id_7bb16f26_staticRenderFns,
6745
+ collapsiblevue_type_template_id_85d2157c_render,
6746
+ collapsiblevue_type_template_id_85d2157c_staticRenderFns,
6696
6747
  false,
6697
6748
  null,
6698
6749
  null,
@@ -12991,8 +13042,8 @@ var dropdown_separator_component = normalizeComponent(
12991
13042
 
12992
13043
 
12993
13044
 
12994
- ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/input/input.vue?vue&type=template&id=868d44b4&
12995
- var inputvue_type_template_id_868d44b4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"base-input",attrs:{"data-qa":"dt-input"}},[_c('label',{staticClass:"base-input__label",attrs:{"aria-details":_vm.$slots.description || _vm.description ? _vm.descriptionKey : undefined,"data-qa":"dt-input-label-wrapper"}},[_vm._t("labelSlot",function(){return [(_vm.label)?_c('div',{ref:"label",class:[
13045
+ ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/input/input.vue?vue&type=template&id=356ee040&
13046
+ var inputvue_type_template_id_356ee040_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"base-input",attrs:{"data-qa":"dt-input"}},[_c('label',{staticClass:"base-input__label",attrs:{"aria-details":_vm.$slots.description || _vm.description ? _vm.descriptionKey : undefined,"data-qa":"dt-input-label-wrapper"}},[_vm._t("labelSlot",function(){return [(_vm.labelVisible && _vm.label)?_c('div',{ref:"label",class:[
12996
13047
  'base-input__label-text',
12997
13048
  'd-label',
12998
13049
  _vm.labelSizeClasses[_vm.size] ],attrs:{"data-qa":"dt-input-label"}},[_vm._v(" "+_vm._s(_vm.label)+" ")]):_vm._e()]}),(_vm.$slots.description || _vm.description || _vm.shouldValidateLength)?_c('div',{ref:"description",class:[
@@ -13001,7 +13052,7 @@ var inputvue_type_template_id_868d44b4_render = function () {var _vm=this;var _h
13001
13052
  'd-fd-column',
13002
13053
  _vm.descriptionSizeClasses[_vm.size] ],attrs:{"id":_vm.descriptionKey,"data-qa":"dt-input-description"}},[(_vm.$slots.description || _vm.description)?_c('div',[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),(_vm.shouldValidateLength)?_c('div',{class:[
13003
13054
  'd-mb2' ],attrs:{"data-qa":"dt-input-length-description"}},[_vm._v(" "+_vm._s(_vm.validationProps.length.description)+" ")]):_vm._e()]):_vm._e(),_c('div',{class:_vm.inputWrapperClasses(),attrs:{"read-only":_vm.disabled}},[(_vm.$slots.leftIcon)?_c('span',{class:_vm.inputIconClasses('left'),attrs:{"data-qa":"dt-input-left-icon-wrapper"},on:{"focusout":_vm.onBlur}},[_vm._t("leftIcon")],2):_vm._e(),(_vm.isTextarea)?_c('textarea',_vm._g(_vm._b({ref:"input",class:_vm.inputClasses(),attrs:{"name":_vm.name,"disabled":_vm.disabled,"maxlength":_vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null,"data-qa":"dt-input-input"},domProps:{"value":_vm.value}},'textarea',_vm.$attrs,false),_vm.inputListeners)):_c('input',_vm._g(_vm._b({ref:"input",class:_vm.inputClasses(),attrs:{"name":_vm.name,"type":_vm.type,"disabled":_vm.disabled,"maxlength":_vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null,"data-qa":"dt-input-input"},domProps:{"value":_vm.value}},'input',_vm.$attrs,false),_vm.inputListeners)),(_vm.$slots.rightIcon)?_c('span',{class:_vm.inputIconClasses('right'),attrs:{"data-qa":"dt-input-right-icon-wrapper"},on:{"focusout":_vm.onBlur}},[_vm._t("rightIcon")],2):_vm._e()])],2),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.validationMessages,"show-messages":_vm.showMessages,"data-qa":"dt-input-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1)}
13004
- var inputvue_type_template_id_868d44b4_staticRenderFns = []
13055
+ var inputvue_type_template_id_356ee040_staticRenderFns = []
13005
13056
 
13006
13057
 
13007
13058
  ;// CONCATENATED MODULE: ./components/input/input_constants.js
@@ -13725,7 +13776,17 @@ const MessagesMixin = {
13725
13776
  */
13726
13777
  label: {
13727
13778
  type: String,
13728
- default: ''
13779
+ default: '',
13780
+ required: true
13781
+ },
13782
+
13783
+ /**
13784
+ * Determines visibility of input label.
13785
+ * @values true, false
13786
+ */
13787
+ labelVisible: {
13788
+ type: Boolean,
13789
+ default: true
13729
13790
  },
13730
13791
 
13731
13792
  /**
@@ -14145,8 +14206,8 @@ const MessagesMixin = {
14145
14206
  ;
14146
14207
  var input_component = normalizeComponent(
14147
14208
  input_inputvue_type_script_lang_js_,
14148
- inputvue_type_template_id_868d44b4_render,
14149
- inputvue_type_template_id_868d44b4_staticRenderFns,
14209
+ inputvue_type_template_id_356ee040_render,
14210
+ inputvue_type_template_id_356ee040_staticRenderFns,
14150
14211
  false,
14151
14212
  null,
14152
14213
  null,
@@ -19035,15 +19096,15 @@ var root_layout_component = normalizeComponent(
19035
19096
  ;// CONCATENATED MODULE: ./components/root_layout/index.js
19036
19097
 
19037
19098
 
19038
- ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=96ff85ec&
19039
- var combobox_with_popovervue_type_template_id_96ff85ec_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
19099
+ ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=dea81786&
19100
+ var combobox_with_popovervue_type_template_id_dea81786_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
19040
19101
  var inputProps = ref.inputProps;
19041
19102
  return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"focusout":_vm.onFocusOut,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
19042
19103
  var opened = ref.opened;
19043
19104
  var listProps = ref.listProps;
19044
19105
  var clearHighlightIndex = ref.clearHighlightIndex;
19045
19106
  return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","initial-focus-element":"none","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
19046
- var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
19107
+ var combobox_with_popovervue_type_template_id_dea81786_staticRenderFns = []
19047
19108
 
19048
19109
 
19049
19110
  ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -19150,6 +19211,10 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
19150
19211
  //
19151
19212
  //
19152
19213
  //
19214
+ //
19215
+ //
19216
+ //
19217
+
19153
19218
 
19154
19219
 
19155
19220
 
@@ -19168,13 +19233,40 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
19168
19233
  mixins: [sr_only_close_button],
19169
19234
  props: {
19170
19235
  /**
19171
- * String to use for the list's aria-label.
19236
+ * String to use for the input label.
19172
19237
  */
19173
- listAriaLabel: {
19238
+ label: {
19174
19239
  type: String,
19175
19240
  required: true
19176
19241
  },
19177
19242
 
19243
+ /**
19244
+ * Determines visibility of input label.
19245
+ * @values true, false
19246
+ */
19247
+ labelVisible: {
19248
+ type: Boolean,
19249
+ default: true
19250
+ },
19251
+
19252
+ /**
19253
+ * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
19254
+ * @values null, xs, sm, md, lg, xl
19255
+ */
19256
+ size: {
19257
+ type: String,
19258
+ default: null,
19259
+ validator: t => Object.values(LABEL_SIZES).includes(t)
19260
+ },
19261
+
19262
+ /**
19263
+ * Description for the input
19264
+ */
19265
+ description: {
19266
+ type: String,
19267
+ default: ''
19268
+ },
19269
+
19178
19270
  /**
19179
19271
  * Determines when to show the list element and also controls the aria-expanded attribute.
19180
19272
  * Leaving this null will have the combobox trigger on input focus by default.
@@ -19387,13 +19479,12 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
19387
19479
  },
19388
19480
  methods: {
19389
19481
  handleDisplayList(value) {
19390
- if (!this.hasSuggestionList) {
19391
- if (value) {
19392
- // Displays the list after the user has typed anything
19393
- this.showComboboxList();
19394
- } else {
19395
- this.closeComboboxList();
19396
- }
19482
+ if (!this.hasSuggestionList && value) {
19483
+ this.showComboboxList();
19484
+ }
19485
+
19486
+ if (!this.hasSuggestionList && !value) {
19487
+ this.closeComboboxList();
19397
19488
  }
19398
19489
  },
19399
19490
 
@@ -19459,7 +19550,7 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
19459
19550
  }
19460
19551
  },
19461
19552
 
19462
- openOnArrowKeyPress(e) {
19553
+ openOnArrowKeyPress() {
19463
19554
  if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) {
19464
19555
  return;
19465
19556
  }
@@ -19481,8 +19572,8 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
19481
19572
  ;
19482
19573
  var combobox_with_popover_component = normalizeComponent(
19483
19574
  combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
19484
- combobox_with_popovervue_type_template_id_96ff85ec_render,
19485
- combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns,
19575
+ combobox_with_popovervue_type_template_id_dea81786_render,
19576
+ combobox_with_popovervue_type_template_id_dea81786_staticRenderFns,
19486
19577
  false,
19487
19578
  null,
19488
19579
  null,
@@ -19493,11 +19584,11 @@ var combobox_with_popover_component = normalizeComponent(
19493
19584
  /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
19494
19585
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
19495
19586
 
19496
- ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=652b0440&
19497
- var combobox_multi_selectvue_type_template_id_652b0440_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
19587
+ ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=e5d9bc3a&
19588
+ var combobox_multi_selectvue_type_template_id_e5d9bc3a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
19498
19589
  var onInput = ref.onInput;
19499
- return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,staticClass:"d-mt4 d-mx2 d-zi-base1",attrs:{"close-button-props":{ ariaLabel: 'close' },"size":_vm.size},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1 d-mb4",attrs:{"label":_vm.label,"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
19500
- var combobox_multi_selectvue_type_template_id_652b0440_staticRenderFns = []
19590
+ return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,staticClass:"d-mt4 d-mx2 d-zi-base1",attrs:{"close-button-props":{ ariaLabel: 'close' },"size":_vm.size},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1 d-mb4",attrs:{"aria-label":_vm.label,"label":_vm.labelVisible ? _vm.label : '',"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
19591
+ var combobox_multi_selectvue_type_template_id_e5d9bc3a_staticRenderFns = []
19501
19592
 
19502
19593
 
19503
19594
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -19701,6 +19792,7 @@ const MULTI_SELECT_SIZES = {
19701
19792
  //
19702
19793
  //
19703
19794
  //
19795
+ //
19704
19796
 
19705
19797
 
19706
19798
 
@@ -19719,19 +19811,28 @@ const MULTI_SELECT_SIZES = {
19719
19811
  mixins: [sr_only_close_button],
19720
19812
  props: {
19721
19813
  /**
19722
- * Label for the combobox
19814
+ * String to use for the input label.
19723
19815
  */
19724
19816
  label: {
19725
19817
  type: String,
19726
- default: null
19818
+ required: true
19727
19819
  },
19728
19820
 
19729
19821
  /**
19730
- * Description for the combobox
19822
+ * Determines visibility of input label.
19823
+ * @values true, false
19824
+ */
19825
+ labelVisible: {
19826
+ type: Boolean,
19827
+ default: true
19828
+ },
19829
+
19830
+ /**
19831
+ * Description for the input
19731
19832
  */
19732
19833
  description: {
19733
19834
  type: String,
19734
- default: null
19835
+ default: ''
19735
19836
  },
19736
19837
 
19737
19838
  /**
@@ -19842,7 +19943,7 @@ const MULTI_SELECT_SIZES = {
19842
19943
  },
19843
19944
 
19844
19945
  /**
19845
- * Size of the input and chip, one of `xs`, `sm`, `md`
19946
+ * Size of the chip, one of `xs`, `sm`, `md`
19846
19947
  */
19847
19948
  size: {
19848
19949
  type: String,
@@ -20169,8 +20270,8 @@ const MULTI_SELECT_SIZES = {
20169
20270
  ;
20170
20271
  var combobox_multi_select_component = normalizeComponent(
20171
20272
  combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
20172
- combobox_multi_selectvue_type_template_id_652b0440_render,
20173
- combobox_multi_selectvue_type_template_id_652b0440_staticRenderFns,
20273
+ combobox_multi_selectvue_type_template_id_e5d9bc3a_render,
20274
+ combobox_multi_selectvue_type_template_id_e5d9bc3a_staticRenderFns,
20174
20275
  false,
20175
20276
  null,
20176
20277
  null,