@dialpad/dialtone-vue 2.21.0 → 2.22.2

package/dist/dialtone-vue.common.js

@@ -1,6 +1,30 @@
 /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
+/***/ 651:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(481);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(400);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".enter-active,.leave-active{overflow:hidden;transition:height .3s linear}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
 /***/ 771:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
@@ -362,6 +386,22 @@ module.exports = function (i) {
 
 /***/ }),
 
+/***/ 627:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(651);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(402)/* ["default"] */ .Z)
+var update = add("056a7866", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 245:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -892,6 +932,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtCheckbox": () => (/* reexport */ checkbox_checkbox),
   "DtCheckboxGroup": () => (/* reexport */ checkbox_group),
   "DtChip": () => (/* reexport */ chip),
+  "DtCollapsible": () => (/* reexport */ collapsible),
   "DtCombobox": () => (/* reexport */ combobox),
   "DtDropdown": () => (/* reexport */ dropdown),
   "DtGroupableInputMixin": () => (/* reexport */ GroupableMixin),
@@ -3062,9 +3103,9 @@ var button_group_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/button_group/index.js
 
 
-;// 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=25daf05b&
-var comboboxvue_type_template_id_25daf05b_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.isLoading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.isListEmpty && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex,"isLoading":_vm.isLoading,"isListEmpty":_vm.isListEmpty})],2):_vm._e()])}
-var comboboxvue_type_template_id_25daf05b_staticRenderFns = []
+;// 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=f9b55a7e&
+var comboboxvue_type_template_id_f9b55a7e_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.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
+var comboboxvue_type_template_id_f9b55a7e_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
@@ -4649,8 +4690,6 @@ var combobox_empty_list_component = normalizeComponent(
 //
 //
 //
-//
-//
 
 
 
@@ -4732,6 +4771,14 @@ var combobox_empty_list_component = normalizeComponent(
       default: false
     },
 
+    /**
+     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
+     */
+    emptyList: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Message to show when the list is empty
      */
@@ -4774,9 +4821,7 @@ var combobox_empty_list_component = normalizeComponent(
       // If the list is rendered at the root, rather than as a child
       // of this component, this is the ref to that dom element. Set
       // by the onOpen method.
-      outsideRenderedListRef: null,
-      isListEmpty: undefined,
-      isLoading: undefined
+      outsideRenderedListRef: null
     };
   },
 
@@ -4792,149 +4837,750 @@ var combobox_empty_list_component = normalizeComponent(
       };
     },
 
-    listProps() {
-      return {
-        role: 'listbox',
-        id: this.listId,
-        // The list has to be positioned relatively so that the auto-scroll can
-        // calculate the correct offset for the list items.
-        class: 'd-ps-relative',
-        'aria-label': this.listAriaLabel
-      };
+    listProps() {
+      return {
+        role: 'listbox',
+        id: this.listId,
+        // The list has to be positioned relatively so that the auto-scroll can
+        // calculate the correct offset for the list items.
+        class: 'd-ps-relative',
+        'aria-label': this.listAriaLabel
+      };
+    },
+
+    beginningOfListMethod() {
+      return this.onBeginningOfList || this.jumpToEnd;
+    },
+
+    endOfListMethod() {
+      return this.onEndOfList || this.jumpToBeginning;
+    },
+
+    activeItemId() {
+      if (!this.showList || this.highlightIndex < 0 || this.loading) {
+        return;
+      }
+
+      return this.highlightId;
+    },
+
+    activeItemEl() {
+      if (!this.highlightId) return '';
+      return this.getListElement().querySelector('#' + this.highlightId);
+    }
+
+  },
+  watch: {
+    showList(showList) {
+      // When the list's visibility changes reset the highlight index.
+      if (!this.listRenderedOutside) {
+        this.setInitialHighlightIndex();
+        this.$emit('opened', showList);
+      }
+
+      if (!showList && this.outsideRenderedListRef) {
+        this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);
+        this.outsideRenderedListRef = null;
+      }
+    },
+
+    loading(loading) {
+      this.$nextTick(() => {
+        this.setInitialHighlightIndex();
+      });
+    },
+
+    $props: {
+      deep: true,
+      immediate: true,
+
+      handler() {
+        this.validateEmptyListProps();
+      }
+
+    }
+  },
+
+  created() {
+    this.validateEmptyListProps();
+  },
+
+  methods: {
+    onMouseHighlight(e) {
+      if (this.loading) return;
+      const liElement = e.target.closest('li');
+
+      if (liElement && this.highlightId !== liElement.id) {
+        this.setHighlightId(liElement.id);
+      }
+    },
+
+    getListElement() {
+      var _this$outsideRendered, _this$$refs$listWrapp;
+
+      return (_this$outsideRendered = this.outsideRenderedListRef) !== null && _this$outsideRendered !== void 0 ? _this$outsideRendered : (_this$$refs$listWrapp = this.$refs.listWrapper) === null || _this$$refs$listWrapp === void 0 ? void 0 : _this$$refs$listWrapp.querySelector("#".concat(this.listId));
+    },
+
+    clearHighlightIndex() {
+      if (this.showList) {
+        this.setHighlightIndex(-1);
+      }
+    },
+
+    afterHighlight() {
+      if (this.loading) return;
+      this.$emit('highlight', this.highlightIndex);
+    },
+
+    onEnterKey() {
+      if (this.loading || this.emptyList) return;
+
+      if (this.highlightIndex >= 0) {
+        this.$emit('select', this.highlightIndex);
+      }
+    },
+
+    onEscapeKey() {
+      this.$emit('escape');
+    },
+
+    onOpen(open, contentRef) {
+      var _this$outsideRendered2;
+
+      this.outsideRenderedListRef = contentRef;
+      (_this$outsideRendered2 = this.outsideRenderedListRef) === null || _this$outsideRendered2 === void 0 ? void 0 : _this$outsideRendered2.addEventListener('mousemove', this.onMouseHighlight);
+      this.$emit('opened', open);
+
+      if (open) {
+        this.setInitialHighlightIndex();
+      }
+    },
+
+    onKeyValidation(e, eventHandler) {
+      if (!this.showList || !this.getListElement()) return;
+      this[eventHandler](e);
+    },
+
+    setInitialHighlightIndex() {
+      if (!this.showList) return;
+      this.$nextTick(() => {
+        // When the list's is shown, reset the highlight index.
+        // If the list is loading, set to -1
+        this.setHighlightIndex(this.loading ? -1 : 0);
+      });
+    },
+
+    validateEmptyListProps() {
+      if (this.emptyList && !this.emptyStateMessage || !this.emptyList && this.emptyStateMessage) {
+        console.error("Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.");
+      }
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=script&lang=js&
+ /* harmony default export */ const combobox_comboboxvue_type_script_lang_js_ = (comboboxvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue
+
+
+
+
+
+/* normalize component */
+;
+var combobox_component = normalizeComponent(
+  combobox_comboboxvue_type_script_lang_js_,
+  comboboxvue_type_template_id_f9b55a7e_render,
+  comboboxvue_type_template_id_f9b55a7e_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const combobox = (combobox_component.exports);
+;// CONCATENATED MODULE: ./components/combobox/index.js
+
+;// 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=81ed658c&
+var collapsiblevue_type_template_id_81ed658c_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:[
+      'd-dt-collapsibe__anchor',
+      _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:({
+          'width': _vm.maxWidth,
+        }),attrs:{"importance":"clear","kind":"muted","aria-controls":_vm.id,"aria-expanded":("" + _vm.isOpen)}},[(_vm.isOpen)?_c('icon-arrow-accordion-open',{staticClass:"d-svg--size18 d-mr8 d-fl-shrink0"}):_c('icon-arrow-accordion-closed',{staticClass:"d-svg--size18 d-mr8 d-fl-shrink0"}),_c('span',{staticClass:"d-mr-auto d-truncate",attrs:{"title":_vm.anchorText}},[_vm._v(" "+_vm._s(_vm.anchorText)+" ")])],1)]},{"attrs":{
+        'aria-controls': _vm.id,
+        'aria-expanded': _vm.isOpen.toString(),
+        'role': 'button',
+      }})],2),_c('dt-collapsible-lazy-show',_vm._g({ref:"contentWrapper",class:[
+      'd-dt-collapsible__content',
+      _vm.contentClass ],style:({
+      'max-height': _vm.maxHeight,
+      'max-width': _vm.maxWidth,
+    }),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)}
+var collapsiblevue_type_template_id_81ed658c_staticRenderFns = []
+
+
+;// 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=22ec4864&
+var collapsible_lazy_showvue_type_template_id_22ec4864_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)}
+var collapsible_lazy_showvue_type_template_id_22ec4864_staticRenderFns = []
+
+
+;// 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&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+/* harmony default export */ const collapsible_lazy_showvue_type_script_lang_js_ = ({
+  name: 'DtCollapsibleLazyShow',
+
+  /******************
+   *     PROPS      *
+   ******************/
+  props: {
+    /**
+     * Whether the child slot is shown.
+     */
+    show: Boolean,
+    appear: {
+      type: Boolean,
+      default: false
+    },
+    elementType: {
+      type: String,
+      default: 'div'
+    }
+  },
+
+  /******************
+   *      DATA      *
+   ******************/
+  data() {
+    return {
+      initialized: !!this.show
+    };
+  },
+
+  /******************
+   *      WATCH     *
+   ******************/
+  watch: {
+    show: function (newValue) {
+      if (!newValue || this.initialized) return;
+      this.initialized = true;
+    }
+  },
+  methods: {
+    /**
+     * @param {HTMLElement} element
+     */
+    beforeEnter(element) {
+      requestAnimationFrame(() => {
+        if (!element.style.height) {
+          element.style.height = '0px';
+        }
+
+        element.style.display = null;
+      });
+    },
+
+    /**
+     * @param {HTMLElement} element
+     */
+    enter(element) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          element.style.height = "".concat(element.scrollHeight, "px");
+        });
+      });
+    },
+
+    /**
+     * @param {HTMLElement} element
+     */
+    afterEnter(element) {
+      element.style.height = null;
+    },
+
+    /**
+     * @param {HTMLElement} element
+     */
+    beforeLeave(element) {
+      requestAnimationFrame(() => {
+        if (!element.style.height) {
+          element.style.height = "".concat(element.offsetHeight, "px");
+        }
+      });
+    },
+
+    /**
+     * @param {HTMLElement} element
+     */
+    leave(element) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          element.style.height = '0px';
+        });
+      });
+    },
+
+    /**
+     * @param {HTMLElement} element
+     */
+    afterLeave(element) {
+      element.style.height = null;
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=script&lang=js&
+ /* harmony default export */ const collapsible_collapsible_lazy_showvue_type_script_lang_js_ = (collapsible_lazy_showvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-12[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[3]!./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=style&index=0&lang=css&
+var collapsible_lazy_showvue_type_style_index_0_lang_css_ = __webpack_require__(627);
+;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=style&index=0&lang=css&
+
+;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var collapsible_lazy_show_component = normalizeComponent(
+  collapsible_collapsible_lazy_showvue_type_script_lang_js_,
+  collapsible_lazy_showvue_type_template_id_22ec4864_render,
+  collapsible_lazy_showvue_type_template_id_22ec4864_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const collapsible_lazy_show = (collapsible_lazy_show_component.exports);
+;// 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/lazy_show/lazy_show.vue?vue&type=template&id=9ffa4e8c&
+var lazy_showvue_type_template_id_9ffa4e8c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"name":_vm.transition,"appear":_vm.appear}},_vm.$listeners),[_c('div',_vm._g({directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}]},_vm.$listeners),[(_vm.initialized)?_vm._t("default"):_vm._e()],2)])}
+var lazy_showvue_type_template_id_9ffa4e8c_staticRenderFns = []
+
+
+;// 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/lazy_show/lazy_show.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+/* harmony default export */ const lazy_showvue_type_script_lang_js_ = ({
+  name: 'DtLazyShow',
+
+  /******************
+   *     PROPS      *
+   ******************/
+  props: {
+    /**
+     * Whether the child slot is shown.
+     */
+    show: Boolean,
+
+    /**
+     * A valid Vue enter/leave CSS transition name.
+     */
+    transition: {
+      type: String,
+      default: null
+    },
+    appear: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  /******************
+   *      DATA      *
+   ******************/
+  data() {
+    return {
+      initialized: !!this.show
+    };
+  },
+
+  /******************
+   *      WATCH     *
+   ******************/
+  watch: {
+    show: function (newValue) {
+      if (!newValue || this.initialized) return;
+      this.initialized = true;
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue?vue&type=script&lang=js&
+ /* harmony default export */ const lazy_show_lazy_showvue_type_script_lang_js_ = (lazy_showvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue
+
+
+
+
+
+/* normalize component */
+;
+var lazy_show_component = normalizeComponent(
+  lazy_show_lazy_showvue_type_script_lang_js_,
+  lazy_showvue_type_template_id_9ffa4e8c_render,
+  lazy_showvue_type_template_id_9ffa4e8c_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const lazy_show = (lazy_show_component.exports);
+;// CONCATENATED MODULE: ./components/lazy_show/index.js
+
+;// 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!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionOpen.vue?vue&type=template&id=5f13df90&
+var IconArrowAccordionOpenvue_type_template_id_5f13df90_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{staticClass:"d-svg d-svg--system d-svg__arrowAccordionOpen",attrs:{"aria-hidden":"true","aria-label":"Arrow Accordion Open","viewBox":"0 0 24 24"}},[_c('path',{attrs:{"d":"M8.738 8a1 1 0 00-.865 1.502l3.262 5.614a1 1 0 001.73 0l3.262-5.614A1 1 0 0015.262 8H8.738z"}})])}
+var IconArrowAccordionOpenvue_type_template_id_5f13df90_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionOpen.vue
+
+var IconArrowAccordionOpen_script = {}
+
+
+/* normalize component */
+;
+var IconArrowAccordionOpen_component = normalizeComponent(
+  IconArrowAccordionOpen_script,
+  IconArrowAccordionOpenvue_type_template_id_5f13df90_render,
+  IconArrowAccordionOpenvue_type_template_id_5f13df90_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const IconArrowAccordionOpen = (IconArrowAccordionOpen_component.exports);
+;// 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!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionClosed.vue?vue&type=template&id=8c8269ea&
+var IconArrowAccordionClosedvue_type_template_id_8c8269ea_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{staticClass:"d-svg d-svg--system d-svg__arrowAccordionClosed",attrs:{"aria-hidden":"true","aria-label":"Arrow Accordion Closed","viewBox":"0 0 24 24"}},[_c('path',{attrs:{"d":"M8 15.262a1 1 0 001.502.865l5.614-3.262a1 1 0 000-1.73L9.502 7.873A1 1 0 008 8.738v6.524z"}})])}
+var IconArrowAccordionClosedvue_type_template_id_8c8269ea_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionClosed.vue
+
+var IconArrowAccordionClosed_script = {}
+
+
+/* normalize component */
+;
+var IconArrowAccordionClosed_component = normalizeComponent(
+  IconArrowAccordionClosed_script,
+  IconArrowAccordionClosedvue_type_template_id_8c8269ea_render,
+  IconArrowAccordionClosedvue_type_template_id_8c8269ea_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const IconArrowAccordionClosed = (IconArrowAccordionClosed_component.exports);
+;// 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.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+
+
+
+/* harmony default export */ const collapsiblevue_type_script_lang_js_ = ({
+  name: 'DtCollapsible',
+  components: {
+    DtButton: button_button,
+    DtCollapsibleLazyShow: collapsible_lazy_show,
+    DtLazyShow: lazy_show,
+    IconArrowAccordionOpen: IconArrowAccordionOpen,
+    IconArrowAccordionClosed: IconArrowAccordionClosed
+  },
+  props: {
+    /**
+     * Text that is displayed on the anchor if nothing is passed in the slot.
+     * Ignored if the anchor slot is used.
+     */
+    anchorText: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start
+     * expanded and trigger on click by default. If you set this value, the default trigger
+     * behavior will be disabled and you can control it as you need.
+     * Supports .sync modifier
+     */
+    open: {
+      type: Boolean,
+      default: null
+    },
+
+    /**
+     * The id of the content wrapper.
+     */
+    id: {
+      type: String,
+
+      default() {
+        return getUniqueString();
+      }
+
+    },
+
+    /**
+     * Element type (tag name) of the root element of the component.
+     */
+    elementType: {
+      type: String,
+      default: 'div'
+    },
+
+    /**
+     * Element type (tag name) of the content wrapper element.
+     */
+    contentElementType: {
+      type: String,
+      default: 'div'
+    },
+
+    /**
+     * Additional class name for the anchor wrapper element.
+     */
+    anchorClass: {
+      type: [String, Array, Object],
+      default: null
     },
 
-    beginningOfListMethod() {
-      return this.onBeginningOfList || this.jumpToEnd;
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: null
     },
 
-    endOfListMethod() {
-      return this.onEndOfList || this.jumpToBeginning;
+    /**
+     * The maximum width of the anchor and collapsible element.
+     * Possible units rem|px|%|em
+     */
+    maxWidth: {
+      type: String,
+      default: null
     },
 
-    activeItemId() {
-      if (!this.showList || this.highlightIndex < 0 || this.loading) {
-        return;
-      }
+    /**
+     * The maximum height of the collapsible element.
+     * Possible units rem|px|%|em
+     */
+    maxHeight: {
+      type: String,
+      default: null
+    },
 
-      return this.highlightId;
+    /**
+     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.
+     */
+    ariaLabel: {
+      type: String,
+      default: null
     },
 
-    activeItemEl() {
-      if (!this.highlightId) return '';
-      return this.getListElement().querySelector('#' + this.highlightId);
+    /**
+     * Id of the element that labels the collapsible content. Defaults to the anchor element.
+     * Should provide this or ariaLabel but not both.
+     */
+    ariaLabelledBy: {
+      type: String,
+      default: null
     }
+  },
+  emits: ['update:open', 'opened'],
 
+  data() {
+    return {
+      isOpen: true
+    };
   },
-  watch: {
-    showList(showList) {
-      // When the list's visibility changes reset the highlight index.
-      if (!this.listRenderedOutside) {
-        this.setInitialHighlightIndex();
-        this.$emit('opened', showList);
-      }
 
-      if (!showList && this.outsideRenderedListRef) {
-        this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);
-        this.outsideRenderedListRef = null;
-        this.isListEmpty = undefined;
-      }
+  computed: {
+    labelledBy() {
+      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if
+      // there is no aria-label and the labelledby should point to the anchor
+      return this.ariaLabelledby || !this.ariaLabel && getUniqueString('DtCollapsible__anchor');
     },
 
-    loading(isLoading) {
-      this.isListEmpty = undefined;
-      this.isLoading = isLoading;
-      this.$nextTick(() => {
-        this.isListEmpty = this.checkItemsLength();
-        this.setInitialHighlightIndex();
-      });
+    contentStyle() {
+      return {
+        'max-height': this.maxHeight,
+        'max-width': this.maxWidth
+      };
     }
 
   },
-
-  async mounted() {
-    this.isLoading = this.loading;
-    await this.$nextTick();
-    this.isListEmpty = this.checkItemsLength();
+  watch: {
+    open: {
+      handler: function (open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
+      },
+      immediate: true
+    }
   },
-
   methods: {
-    onMouseHighlight(e) {
-      if (this.loading) return;
-      const liElement = e.target.closest('li');
-
-      if (liElement && this.highlightId !== liElement.id) {
-        this.setHighlightId(liElement.id);
-      }
-    },
-
-    getListElement() {
-      var _this$outsideRendered, _this$$refs$listWrapp;
-
-      return (_this$outsideRendered = this.outsideRenderedListRef) !== null && _this$outsideRendered !== void 0 ? _this$outsideRendered : (_this$$refs$listWrapp = this.$refs.listWrapper) === null || _this$$refs$listWrapp === void 0 ? void 0 : _this$$refs$listWrapp.querySelector("#".concat(this.listId));
-    },
+    onLeaveTransitionComplete() {
+      this.$emit('opened', false);
 
-    clearHighlightIndex() {
-      if (this.showList) {
-        this.setHighlightIndex(-1);
+      if (this.open !== null) {
+        this.$emit('update:open', false);
       }
     },
 
-    afterHighlight() {
-      if (this.loading) return;
-      this.$emit('highlight', this.highlightIndex);
-    },
-
-    onEnterKey() {
-      if (this.loading || this.isListEmpty) return;
+    onEnterTransitionComplete() {
+      this.$emit('opened', true, this.$refs.content);
 
-      if (this.highlightIndex >= 0) {
-        this.$emit('select', this.highlightIndex);
+      if (this.open !== null) {
+        this.$emit('update:open', true);
       }
     },
 
-    onEscapeKey() {
-      this.$emit('escape');
-    },
-
-    onOpen(open, contentRef) {
-      var _this$outsideRendered2;
-
-      this.outsideRenderedListRef = contentRef;
-      (_this$outsideRendered2 = this.outsideRenderedListRef) === null || _this$outsideRendered2 === void 0 ? void 0 : _this$outsideRendered2.addEventListener('mousemove', this.onMouseHighlight);
-      this.$emit('opened', open);
-
-      if (open) {
-        this.isListEmpty = this.checkItemsLength();
-        this.setInitialHighlightIndex();
+    defaultToggleOpen() {
+      if (this.open === null) {
+        this.toggleOpen();
       }
     },
 
-    onKeyValidation(e, eventHandler) {
-      if (!this.showList || !this.getListElement()) return;
-      this[eventHandler](e);
-    },
-
-    setInitialHighlightIndex() {
-      if (!this.showList) return;
-      this.$nextTick(() => {
-        // When the list's is shown, reset the highlight index.
-        // If the list is loading, set to -1
-        this.setHighlightIndex(this.loading ? -1 : 0);
-      });
-    },
-
-    checkItemsLength() {
-      if (!this.showList) return undefined;
-      const list = this.getListElement();
-      const options = list === null || list === void 0 ? void 0 : list.querySelectorAll("[role=\"option\"]");
-      return (options === null || options === void 0 ? void 0 : options.length) === 0;
+    toggleOpen() {
+      this.isOpen = !this.isOpen;
     }
 
   }
 });
-;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=script&lang=js&
- /* harmony default export */ const combobox_comboboxvue_type_script_lang_js_ = (comboboxvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./components/combobox/combobox.vue
+;// CONCATENATED MODULE: ./components/collapsible/collapsible.vue?vue&type=script&lang=js&
+ /* harmony default export */ const collapsible_collapsiblevue_type_script_lang_js_ = (collapsiblevue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/collapsible/collapsible.vue
 
 
 
@@ -4942,10 +5588,10 @@ var combobox_empty_list_component = normalizeComponent(
 
 /* normalize component */
 ;
-var combobox_component = normalizeComponent(
-  combobox_comboboxvue_type_script_lang_js_,
-  comboboxvue_type_template_id_25daf05b_render,
-  comboboxvue_type_template_id_25daf05b_staticRenderFns,
+var collapsible_component = normalizeComponent(
+  collapsible_collapsiblevue_type_script_lang_js_,
+  collapsiblevue_type_template_id_81ed658c_render,
+  collapsiblevue_type_template_id_81ed658c_staticRenderFns,
   false,
   null,
   null,
@@ -4953,8 +5599,8 @@ var combobox_component = normalizeComponent(
   
 )
 
-/* harmony default export */ const combobox = (combobox_component.exports);
-;// CONCATENATED MODULE: ./components/combobox/index.js
+/* harmony default export */ const collapsible = (collapsible_component.exports);
+;// CONCATENATED MODULE: ./components/collapsible/index.js
 
 ;// 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/dropdown/dropdown.vue?vue&type=template&id=230c0da9&
 var dropdownvue_type_template_id_230c0da9_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.openedWithKeyboard ? 'first' : 'dialog',"fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true},on:{"opened":_vm.updateInitialHighlightIndex,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnterKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpaceKey.apply(null, arguments)},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, 'onUpKeyPress')},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, 'onDownKeyPress')},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, 'onHomeKeyPress')},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, 'onEndKeyPress')},function($event){return _vm.onKeyValidation($event, 'onKeyPress')}]},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
@@ -9475,94 +10121,6 @@ const POPOVER_CONTENT_WIDTHS = [null, 'anchor'];
 const POPOVER_INITIAL_FOCUS_STRINGS = ['none', 'dialog', 'first'];
 const POPOVER_STICKY_VALUES = [...TIPPY_STICKY_VALUES];
 const POPOVER_DIRECTIONS = [...BASE_TIPPY_DIRECTIONS];
-;// 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/lazy_show/lazy_show.vue?vue&type=template&id=9ffa4e8c&
-var lazy_showvue_type_template_id_9ffa4e8c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"name":_vm.transition,"appear":_vm.appear}},_vm.$listeners),[_c('div',_vm._g({directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}]},_vm.$listeners),[(_vm.initialized)?_vm._t("default"):_vm._e()],2)])}
-var lazy_showvue_type_template_id_9ffa4e8c_staticRenderFns = []
-
-
-;// 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/lazy_show/lazy_show.vue?vue&type=script&lang=js&
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-/* harmony default export */ const lazy_showvue_type_script_lang_js_ = ({
-  name: 'DtLazyShow',
-
-  /******************
-   *     PROPS      *
-   ******************/
-  props: {
-    /**
-     * Whether the child slot is shown.
-     */
-    show: Boolean,
-
-    /**
-     * A valid Vue enter/leave CSS transition name.
-     */
-    transition: {
-      type: String,
-      default: null
-    },
-    appear: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  /******************
-   *      DATA      *
-   ******************/
-  data() {
-    return {
-      initialized: !!this.show
-    };
-  },
-
-  /******************
-   *      WATCH     *
-   ******************/
-  watch: {
-    show: function (newValue) {
-      if (!newValue || this.initialized) return;
-      this.initialized = true;
-    }
-  }
-});
-;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue?vue&type=script&lang=js&
- /* harmony default export */ const lazy_show_lazy_showvue_type_script_lang_js_ = (lazy_showvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue
-
-
-
-
-
-/* normalize component */
-;
-var lazy_show_component = normalizeComponent(
-  lazy_show_lazy_showvue_type_script_lang_js_,
-  lazy_showvue_type_template_id_9ffa4e8c_render,
-  lazy_showvue_type_template_id_9ffa4e8c_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
-
-/* harmony default export */ const lazy_show = (lazy_show_component.exports);
 ;// CONCATENATED MODULE: ./node_modules/nanoid/non-secure/index.js
 let urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'
@@ -12814,8 +13372,6 @@ var modal_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/modal/index.js
 
 
-;// CONCATENATED MODULE: ./components/lazy_show/index.js
-
 ;// 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/list_section/list_section.vue?vue&type=template&id=8857acea&
 var list_sectionvue_type_template_id_8857acea_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['dt-list-section', 'd-fs14', 'd-lh6', 'd-py6', 'd-bc-black-200',
            { 'd-bb': _vm.separator }],attrs:{"id":_vm.id,"role":"group","aria-labelledby":(_vm.id + "-list-section-header"),"tabindex":"-1"}},[(_vm.header)?_c('h3',{staticClass:"d-pl12 d-mt6",attrs:{"id":(_vm.id + "-list-section-header")}},[_vm._v(" "+_vm._s(_vm.header)+" ")]):_vm._e(),(!_vm.isCollapsible || _vm.showAll)?_c('ol',{attrs:{"id":(_vm.id + "-list-section-content")}},[_vm._t("default")],2):_c('ol',{attrs:{"id":(_vm.id + "-list-section-content")}},[_c('vnodes',{attrs:{"vnodes":_vm.displayedItems}})],1),_c('div',{staticClass:"d-d-flex"},[(_vm.isCollapsible)?_c('dt-button',{staticClass:"d-ml12 d-py6",attrs:{"id":(_vm.id + "-list-section-show-more-less"),"link":""},on:{"click":_vm.showMoreLessClicked}},[_vm._v(" "+_vm._s(_vm.showMoreLessText)+" ")]):_vm._e(),_vm._t("footer")],2)])}
@@ -16787,17 +17343,15 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
-;// 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=5ee1c401&
-var combobox_with_popovervue_type_template_id_5ee1c401_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,"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){
+;// 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=58cb1065&
+var combobox_with_popovervue_type_template_id_58cb1065_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){
 var inputProps = ref.inputProps;
 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){
 var opened = ref.opened;
 var listProps = ref.listProps;
 var clearHighlightIndex = ref.clearHighlightIndex;
-var isLoading = ref.isLoading;
-var isListEmpty = ref.isListEmpty;
-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","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},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;}}},[(isLoading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(isListEmpty)?_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))}
-var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
+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","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},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))}
+var combobox_with_popovervue_type_template_id_58cb1065_staticRenderFns = []
 
 
 ;// 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&
@@ -16899,6 +17453,8 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
 //
 //
 //
+//
+//
 
 
 
@@ -17052,6 +17608,14 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
       default: false
     },
 
+    /**
+     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
+     */
+    emptyList: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Message to show when the list is empty
      */
@@ -17192,8 +17756,8 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_5ee1c401_render,
-  combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns,
+  combobox_with_popovervue_type_template_id_58cb1065_render,
+  combobox_with_popovervue_type_template_id_58cb1065_staticRenderFns,
   false,
   null,
   null,
@@ -18201,6 +18765,7 @@ var top_banner_info_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes