@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.
@@ -2028,9 +2028,9 @@ var notice_iconvue_type_template_id_dbeeebfa_render = function () {var _vm=this;
2028
2028
  var notice_iconvue_type_template_id_dbeeebfa_staticRenderFns = []
2029
2029
 
2030
2030
 
2031
- ;// 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&
2032
- 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"}})}
2033
- var iconvue_type_template_id_1ca37c55_staticRenderFns = []
2031
+ ;// 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&
2032
+ 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}})}
2033
+ var iconvue_type_template_id_0c7462d0_staticRenderFns = []
2034
2034
 
2035
2035
 
2036
2036
  ;// CONCATENATED MODULE: ./components/icon/icon_constants.js
@@ -2058,6 +2058,8 @@ const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
2058
2058
  //
2059
2059
  //
2060
2060
  //
2061
+ //
2062
+ //
2061
2063
 
2062
2064
 
2063
2065
 
@@ -2085,6 +2087,14 @@ const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
2085
2087
  name: {
2086
2088
  type: String,
2087
2089
  required: true
2090
+ },
2091
+
2092
+ /**
2093
+ * The label of the icon as read out by a screenreader. Leave this unset if your icon is purely presentational
2094
+ */
2095
+ ariaLabel: {
2096
+ type: String,
2097
+ default: undefined
2088
2098
  }
2089
2099
  },
2090
2100
 
@@ -2121,8 +2131,8 @@ const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
2121
2131
  ;
2122
2132
  var icon_component = normalizeComponent(
2123
2133
  icon_iconvue_type_script_lang_js_,
2124
- iconvue_type_template_id_1ca37c55_render,
2125
- iconvue_type_template_id_1ca37c55_staticRenderFns,
2134
+ iconvue_type_template_id_0c7462d0_render,
2135
+ iconvue_type_template_id_0c7462d0_staticRenderFns,
2126
2136
  false,
2127
2137
  null,
2128
2138
  null,
@@ -3916,9 +3926,9 @@ var card_component = normalizeComponent(
3916
3926
  /* harmony default export */ const card = (card_component.exports);
3917
3927
  ;// CONCATENATED MODULE: ./components/card/index.js
3918
3928
 
3919
- ;// 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&
3920
- 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()])}
3921
- var comboboxvue_type_template_id_66a9d4d5_staticRenderFns = []
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=3595da7e&
3930
+ 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()])}
3931
+ var comboboxvue_type_template_id_3595da7e_staticRenderFns = []
3922
3932
 
3923
3933
 
3924
3934
  ;// CONCATENATED MODULE: ./common/mixins/dom.js
@@ -5700,6 +5710,14 @@ var combobox_empty_list_component = normalizeComponent(
5700
5710
  )
5701
5711
 
5702
5712
  /* harmony default export */ const combobox_empty_list = (combobox_empty_list_component.exports);
5713
+ ;// CONCATENATED MODULE: ./components/combobox/combobox_constants.js
5714
+ const LABEL_SIZES = {
5715
+ EXTRA_SMALL: 'xs',
5716
+ SMALL: 'sm',
5717
+ DEFAULT: 'md',
5718
+ LARGE: 'lg',
5719
+ EXTRA_LARGE: 'xl'
5720
+ };
5703
5721
  ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[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&
5704
5722
  //
5705
5723
  //
@@ -5753,6 +5771,7 @@ var combobox_empty_list_component = normalizeComponent(
5753
5771
 
5754
5772
 
5755
5773
 
5774
+
5756
5775
  /**
5757
5776
  * A combobox is a semantic component that displays an input element combined with a listbox,
5758
5777
  * which enables the user to select items from the list.
@@ -5776,13 +5795,40 @@ var combobox_empty_list_component = normalizeComponent(
5776
5795
  })],
5777
5796
  props: {
5778
5797
  /**
5779
- * String to use for the list's aria-label.
5798
+ * String to use for the input label.
5780
5799
  */
5781
- listAriaLabel: {
5800
+ label: {
5782
5801
  type: String,
5783
5802
  required: true
5784
5803
  },
5785
5804
 
5805
+ /**
5806
+ * Determines visibility of input label.
5807
+ * @values true, false
5808
+ */
5809
+ labelVisible: {
5810
+ type: Boolean,
5811
+ default: true
5812
+ },
5813
+
5814
+ /**
5815
+ * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
5816
+ * @values null, xs, sm, md, lg, xl
5817
+ */
5818
+ size: {
5819
+ type: String,
5820
+ default: null,
5821
+ validator: t => Object.values(LABEL_SIZES).includes(t)
5822
+ },
5823
+
5824
+ /**
5825
+ * Description for the input
5826
+ */
5827
+ description: {
5828
+ type: String,
5829
+ default: ''
5830
+ },
5831
+
5786
5832
  /**
5787
5833
  * Sets an ID on the list element of the component. Used by several aria attributes
5788
5834
  * as well as when deriving the IDs for each item.
@@ -5917,7 +5963,12 @@ var combobox_empty_list_component = normalizeComponent(
5917
5963
  computed: {
5918
5964
  inputProps() {
5919
5965
  return {
5966
+ label: this.label,
5967
+ labelVisible: this.labelVisible,
5968
+ size: this.size,
5969
+ description: this.description,
5920
5970
  role: 'combobox',
5971
+ 'aria-label': this.label,
5921
5972
  'aria-expanded': this.showList.toString(),
5922
5973
  'aria-owns': this.listId,
5923
5974
  'aria-haspopup': 'listbox',
@@ -5933,7 +5984,7 @@ var combobox_empty_list_component = normalizeComponent(
5933
5984
  // The list has to be positioned relatively so that the auto-scroll can
5934
5985
  // calculate the correct offset for the list items.
5935
5986
  class: 'd-ps-relative',
5936
- 'aria-label': this.listAriaLabel
5987
+ 'aria-label': this.label
5937
5988
  };
5938
5989
  },
5939
5990
 
@@ -6090,8 +6141,8 @@ var combobox_empty_list_component = normalizeComponent(
6090
6141
  ;
6091
6142
  var combobox_component = normalizeComponent(
6092
6143
  combobox_comboboxvue_type_script_lang_js_,
6093
- comboboxvue_type_template_id_66a9d4d5_render,
6094
- comboboxvue_type_template_id_66a9d4d5_staticRenderFns,
6144
+ comboboxvue_type_template_id_3595da7e_render,
6145
+ comboboxvue_type_template_id_3595da7e_staticRenderFns,
6095
6146
  false,
6096
6147
  null,
6097
6148
  null,
@@ -6102,12 +6153,12 @@ var combobox_component = normalizeComponent(
6102
6153
  /* harmony default export */ const combobox = (combobox_component.exports);
6103
6154
  ;// CONCATENATED MODULE: ./components/combobox/index.js
6104
6155
 
6105
- ;// 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&
6106
- 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:[
6156
+ ;// 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&
6157
+ 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:[
6107
6158
  'd-dt-collapsibe__anchor',
6108
- _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:({
6159
+ _vm.anchorClass ],attrs:{"id":!_vm.ariaLabelledBy && _vm.labelledBy}},[_vm._t("anchor",function(){return [_c('dt-button',{style:({
6109
6160
  'width': _vm.maxWidth,
6110
- }),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":{
6161
+ }),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":{
6111
6162
  'aria-controls': _vm.id,
6112
6163
  'aria-expanded': _vm.isOpen.toString(),
6113
6164
  'role': 'button',
@@ -6116,13 +6167,13 @@ var collapsiblevue_type_template_id_7bb16f26_render = function () {var _vm=this;
6116
6167
  _vm.contentClass ],style:({
6117
6168
  'max-height': _vm.maxHeight,
6118
6169
  'max-width': _vm.maxWidth,
6119
- }),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)}
6120
- var collapsiblevue_type_template_id_7bb16f26_staticRenderFns = []
6170
+ }),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)}
6171
+ var collapsiblevue_type_template_id_85d2157c_staticRenderFns = []
6121
6172
 
6122
6173
 
6123
- ;// 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&
6124
- 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)}
6125
- var collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns = []
6174
+ ;// 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&
6175
+ 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)}
6176
+ var collapsible_lazy_showvue_type_template_id_cc3472b8_staticRenderFns = []
6126
6177
 
6127
6178
 
6128
6179
  ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[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&
@@ -6151,6 +6202,32 @@ var collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns = []
6151
6202
  //
6152
6203
  //
6153
6204
  //
6205
+ //
6206
+ //
6207
+ //
6208
+ //
6209
+ //
6210
+ //
6211
+ //
6212
+ //
6213
+ //
6214
+ //
6215
+ //
6216
+ //
6217
+ //
6218
+ //
6219
+ //
6220
+ //
6221
+ //
6222
+ //
6223
+ //
6224
+ //
6225
+ //
6226
+ //
6227
+ //
6228
+ //
6229
+ //
6230
+ //
6154
6231
  /* harmony default export */ const collapsible_lazy_showvue_type_script_lang_js_ = ({
6155
6232
  name: 'DtCollapsibleLazyShow',
6156
6233
 
@@ -6161,7 +6238,7 @@ var collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns = []
6161
6238
  /**
6162
6239
  * Whether the child slot is shown.
6163
6240
  */
6164
- show: {
6241
+ isExpanded: {
6165
6242
  type: Boolean,
6166
6243
  default: null
6167
6244
  },
@@ -6182,29 +6259,7 @@ var collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns = []
6182
6259
  default: 'div'
6183
6260
  }
6184
6261
  },
6185
-
6186
- /******************
6187
- * DATA *
6188
- ******************/
6189
- data() {
6190
- return {
6191
- initialized: !!this.show
6192
- };
6193
- },
6194
-
6195
- /******************
6196
- * WATCH *
6197
- ******************/
6198
- watch: {
6199
- show: function (newValue) {
6200
- if (!newValue || this.initialized) return;
6201
- this.initialized = true;
6202
- }
6203
- },
6204
6262
  methods: {
6205
- /**
6206
- * @param {HTMLElement} element
6207
- */
6208
6263
  beforeEnter(element) {
6209
6264
  requestAnimationFrame(() => {
6210
6265
  if (!element.style.height) {
@@ -6281,8 +6336,8 @@ var collapsible_lazy_showvue_type_style_index_0_lang_css_ = __webpack_require__(
6281
6336
 
6282
6337
  var collapsible_lazy_show_component = normalizeComponent(
6283
6338
  collapsible_collapsible_lazy_showvue_type_script_lang_js_,
6284
- collapsible_lazy_showvue_type_template_id_2bfe7a0c_render,
6285
- collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns,
6339
+ collapsible_lazy_showvue_type_template_id_cc3472b8_render,
6340
+ collapsible_lazy_showvue_type_template_id_cc3472b8_staticRenderFns,
6286
6341
  false,
6287
6342
  null,
6288
6343
  null,
@@ -6476,6 +6531,10 @@ var lazy_show_component = normalizeComponent(
6476
6531
  //
6477
6532
  //
6478
6533
  //
6534
+ //
6535
+ //
6536
+ //
6537
+ //
6479
6538
 
6480
6539
 
6481
6540
 
@@ -6579,7 +6638,7 @@ var lazy_show_component = normalizeComponent(
6579
6638
  },
6580
6639
 
6581
6640
  /**
6582
- * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.
6641
+ * Label on the anchor. Should provide this or ariaLabelledBy but not both.
6583
6642
  */
6584
6643
  ariaLabel: {
6585
6644
  type: String,
@@ -6619,14 +6678,11 @@ var lazy_show_component = normalizeComponent(
6619
6678
  labelledBy() {
6620
6679
  // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if
6621
6680
  // there is no aria-label and the labelledby should point to the anchor
6622
- return this.ariaLabelledby || !this.ariaLabel && getUniqueString('DtCollapsible__anchor');
6681
+ return this.ariaLabelledBy || !this.ariaLabel && getUniqueString('DtCollapsible__anchor');
6623
6682
  },
6624
6683
 
6625
- contentStyle() {
6626
- return {
6627
- 'max-height': this.maxHeight,
6628
- 'max-width': this.maxWidth
6629
- };
6684
+ hasContentOnCollapse() {
6685
+ return !!this.$slots.contentOnCollapsed;
6630
6686
  }
6631
6687
 
6632
6688
  },
@@ -6640,31 +6696,26 @@ var lazy_show_component = normalizeComponent(
6640
6696
  immediate: true
6641
6697
  }
6642
6698
  },
6643
- methods: {
6644
- onLeaveTransitionComplete() {
6645
- this.$emit('opened', false);
6646
-
6647
- if (this.open !== null) {
6648
- this.$emit('update:open', false);
6649
- }
6650
- },
6651
-
6652
- onEnterTransitionComplete() {
6653
- this.$emit('opened', true, this.$refs.content);
6654
6699
 
6655
- if (this.open !== null) {
6656
- this.$emit('update:open', true);
6657
- }
6658
- },
6700
+ created() {
6701
+ this.validateProperAnchor();
6702
+ },
6659
6703
 
6704
+ methods: {
6660
6705
  defaultToggleOpen() {
6706
+ this.$emit('opened', !this.isOpen);
6707
+
6661
6708
  if (this.open === null) {
6662
- this.toggleOpen();
6709
+ this.isOpen = !this.isOpen;
6710
+ } else {
6711
+ this.$emit('update:open', !this.isOpen);
6663
6712
  }
6664
6713
  },
6665
6714
 
6666
- toggleOpen() {
6667
- this.isOpen = !this.isOpen;
6715
+ validateProperAnchor() {
6716
+ if (!this.anchorText && !this.$scopedSlots.anchor) {
6717
+ console.error('anchor text and anchor slot content cannot both be falsy');
6718
+ }
6668
6719
  }
6669
6720
 
6670
6721
  }
@@ -6681,8 +6732,8 @@ var lazy_show_component = normalizeComponent(
6681
6732
  ;
6682
6733
  var collapsible_component = normalizeComponent(
6683
6734
  collapsible_collapsiblevue_type_script_lang_js_,
6684
- collapsiblevue_type_template_id_7bb16f26_render,
6685
- collapsiblevue_type_template_id_7bb16f26_staticRenderFns,
6735
+ collapsiblevue_type_template_id_85d2157c_render,
6736
+ collapsiblevue_type_template_id_85d2157c_staticRenderFns,
6686
6737
  false,
6687
6738
  null,
6688
6739
  null,
@@ -12981,8 +13032,8 @@ var dropdown_separator_component = normalizeComponent(
12981
13032
 
12982
13033
 
12983
13034
 
12984
- ;// 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&
12985
- 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:[
13035
+ ;// 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&
13036
+ 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:[
12986
13037
  'base-input__label-text',
12987
13038
  'd-label',
12988
13039
  _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:[
@@ -12991,7 +13042,7 @@ var inputvue_type_template_id_868d44b4_render = function () {var _vm=this;var _h
12991
13042
  'd-fd-column',
12992
13043
  _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:[
12993
13044
  '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)}
12994
- var inputvue_type_template_id_868d44b4_staticRenderFns = []
13045
+ var inputvue_type_template_id_356ee040_staticRenderFns = []
12995
13046
 
12996
13047
 
12997
13048
  ;// CONCATENATED MODULE: ./components/input/input_constants.js
@@ -13715,7 +13766,17 @@ const MessagesMixin = {
13715
13766
  */
13716
13767
  label: {
13717
13768
  type: String,
13718
- default: ''
13769
+ default: '',
13770
+ required: true
13771
+ },
13772
+
13773
+ /**
13774
+ * Determines visibility of input label.
13775
+ * @values true, false
13776
+ */
13777
+ labelVisible: {
13778
+ type: Boolean,
13779
+ default: true
13719
13780
  },
13720
13781
 
13721
13782
  /**
@@ -14135,8 +14196,8 @@ const MessagesMixin = {
14135
14196
  ;
14136
14197
  var input_component = normalizeComponent(
14137
14198
  input_inputvue_type_script_lang_js_,
14138
- inputvue_type_template_id_868d44b4_render,
14139
- inputvue_type_template_id_868d44b4_staticRenderFns,
14199
+ inputvue_type_template_id_356ee040_render,
14200
+ inputvue_type_template_id_356ee040_staticRenderFns,
14140
14201
  false,
14141
14202
  null,
14142
14203
  null,
@@ -19025,15 +19086,15 @@ var root_layout_component = normalizeComponent(
19025
19086
  ;// CONCATENATED MODULE: ./components/root_layout/index.js
19026
19087
 
19027
19088
 
19028
- ;// 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&
19029
- 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){
19089
+ ;// 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&
19090
+ 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){
19030
19091
  var inputProps = ref.inputProps;
19031
19092
  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){
19032
19093
  var opened = ref.opened;
19033
19094
  var listProps = ref.listProps;
19034
19095
  var clearHighlightIndex = ref.clearHighlightIndex;
19035
19096
  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))}
19036
- var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
19097
+ var combobox_with_popovervue_type_template_id_dea81786_staticRenderFns = []
19037
19098
 
19038
19099
 
19039
19100
  ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[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&
@@ -19140,6 +19201,10 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
19140
19201
  //
19141
19202
  //
19142
19203
  //
19204
+ //
19205
+ //
19206
+ //
19207
+
19143
19208
 
19144
19209
 
19145
19210
 
@@ -19158,13 +19223,40 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
19158
19223
  mixins: [sr_only_close_button],
19159
19224
  props: {
19160
19225
  /**
19161
- * String to use for the list's aria-label.
19226
+ * String to use for the input label.
19162
19227
  */
19163
- listAriaLabel: {
19228
+ label: {
19164
19229
  type: String,
19165
19230
  required: true
19166
19231
  },
19167
19232
 
19233
+ /**
19234
+ * Determines visibility of input label.
19235
+ * @values true, false
19236
+ */
19237
+ labelVisible: {
19238
+ type: Boolean,
19239
+ default: true
19240
+ },
19241
+
19242
+ /**
19243
+ * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
19244
+ * @values null, xs, sm, md, lg, xl
19245
+ */
19246
+ size: {
19247
+ type: String,
19248
+ default: null,
19249
+ validator: t => Object.values(LABEL_SIZES).includes(t)
19250
+ },
19251
+
19252
+ /**
19253
+ * Description for the input
19254
+ */
19255
+ description: {
19256
+ type: String,
19257
+ default: ''
19258
+ },
19259
+
19168
19260
  /**
19169
19261
  * Determines when to show the list element and also controls the aria-expanded attribute.
19170
19262
  * Leaving this null will have the combobox trigger on input focus by default.
@@ -19377,13 +19469,12 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
19377
19469
  },
19378
19470
  methods: {
19379
19471
  handleDisplayList(value) {
19380
- if (!this.hasSuggestionList) {
19381
- if (value) {
19382
- // Displays the list after the user has typed anything
19383
- this.showComboboxList();
19384
- } else {
19385
- this.closeComboboxList();
19386
- }
19472
+ if (!this.hasSuggestionList && value) {
19473
+ this.showComboboxList();
19474
+ }
19475
+
19476
+ if (!this.hasSuggestionList && !value) {
19477
+ this.closeComboboxList();
19387
19478
  }
19388
19479
  },
19389
19480
 
@@ -19449,7 +19540,7 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
19449
19540
  }
19450
19541
  },
19451
19542
 
19452
- openOnArrowKeyPress(e) {
19543
+ openOnArrowKeyPress() {
19453
19544
  if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) {
19454
19545
  return;
19455
19546
  }
@@ -19471,8 +19562,8 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
19471
19562
  ;
19472
19563
  var combobox_with_popover_component = normalizeComponent(
19473
19564
  combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
19474
- combobox_with_popovervue_type_template_id_96ff85ec_render,
19475
- combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns,
19565
+ combobox_with_popovervue_type_template_id_dea81786_render,
19566
+ combobox_with_popovervue_type_template_id_dea81786_staticRenderFns,
19476
19567
  false,
19477
19568
  null,
19478
19569
  null,
@@ -19483,11 +19574,11 @@ var combobox_with_popover_component = normalizeComponent(
19483
19574
  /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
19484
19575
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
19485
19576
 
19486
- ;// 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&
19487
- 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){
19577
+ ;// 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&
19578
+ 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){
19488
19579
  var onInput = ref.onInput;
19489
- 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)})}
19490
- var combobox_multi_selectvue_type_template_id_652b0440_staticRenderFns = []
19580
+ 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)})}
19581
+ var combobox_multi_selectvue_type_template_id_e5d9bc3a_staticRenderFns = []
19491
19582
 
19492
19583
 
19493
19584
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -19691,6 +19782,7 @@ const MULTI_SELECT_SIZES = {
19691
19782
  //
19692
19783
  //
19693
19784
  //
19785
+ //
19694
19786
 
19695
19787
 
19696
19788
 
@@ -19709,19 +19801,28 @@ const MULTI_SELECT_SIZES = {
19709
19801
  mixins: [sr_only_close_button],
19710
19802
  props: {
19711
19803
  /**
19712
- * Label for the combobox
19804
+ * String to use for the input label.
19713
19805
  */
19714
19806
  label: {
19715
19807
  type: String,
19716
- default: null
19808
+ required: true
19717
19809
  },
19718
19810
 
19719
19811
  /**
19720
- * Description for the combobox
19812
+ * Determines visibility of input label.
19813
+ * @values true, false
19814
+ */
19815
+ labelVisible: {
19816
+ type: Boolean,
19817
+ default: true
19818
+ },
19819
+
19820
+ /**
19821
+ * Description for the input
19721
19822
  */
19722
19823
  description: {
19723
19824
  type: String,
19724
- default: null
19825
+ default: ''
19725
19826
  },
19726
19827
 
19727
19828
  /**
@@ -19832,7 +19933,7 @@ const MULTI_SELECT_SIZES = {
19832
19933
  },
19833
19934
 
19834
19935
  /**
19835
- * Size of the input and chip, one of `xs`, `sm`, `md`
19936
+ * Size of the chip, one of `xs`, `sm`, `md`
19836
19937
  */
19837
19938
  size: {
19838
19939
  type: String,
@@ -20159,8 +20260,8 @@ const MULTI_SELECT_SIZES = {
20159
20260
  ;
20160
20261
  var combobox_multi_select_component = normalizeComponent(
20161
20262
  combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
20162
- combobox_multi_selectvue_type_template_id_652b0440_render,
20163
- combobox_multi_selectvue_type_template_id_652b0440_staticRenderFns,
20263
+ combobox_multi_selectvue_type_template_id_e5d9bc3a_render,
20264
+ combobox_multi_selectvue_type_template_id_e5d9bc3a_staticRenderFns,
20164
20265
  false,
20165
20266
  null,
20166
20267
  null,