@dialpad/dialtone-vue 2.55.2 → 2.56.1

package/dist/dialtone-vue.umd.js

@@ -268,7 +268,7 @@ __webpack_require__.r(__webpack_exports__);
 
 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, ".root-layout__body{display:flex;flex-wrap:wrap;gap:0}.root-layout__body--invert{flex-direction:row-reverse}.root-layout__sidebar{flex-grow:1}.root-layout__content{flex-basis:0;flex-grow:999}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".root-layout__body{display:flex;flex-wrap:wrap;gap:0}.root-layout__body--invert{flex-direction:row-reverse}.root-layout__sidebar{flex-grow:1}.root-layout__content{flex-basis:0;flex-grow:999;overflow-y:auto}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -1562,7 +1562,7 @@ var update = add("63ce6251", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 329:
+/***/ 422:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
@@ -2335,14 +2335,10 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ const setPublicPath = (null);
 
-;// 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/avatar/avatar.vue?vue&type=template&id=4839e656&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
-    'd-avatar',
-    _vm.AVATAR_KIND_MODIFIERS[_vm.kind],
-    _vm.AVATAR_SIZE_MODIFIERS[_vm.size],
-    _vm.avatarClass ],style:(_vm.initialKindStyle),attrs:{"id":_vm.id,"data-qa":"dt-avatar"}},[(_vm.showDefaultSlot)?_vm._t("default"):(_vm.showInitials)?_c('span',[_vm._v(" "+_vm._s(_vm.formattedInitials)+" ")]):_vm._e(),(_vm.presence)?_c('dt-presence',_vm._b({class:[
+;// 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/avatar/avatar.vue?vue&type=template&id=f68dc5f0&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.avatarClasses,style:(_vm.initialKindStyle),attrs:{"id":_vm.id,"data-qa":"dt-avatar"}},[_c('div',{ref:"canvas",staticClass:"d-avatar__canvas"},[(_vm.showDefaultSlot)?_vm._t("default"):(_vm.showInitials)?_c('span',{class:_vm.AVATAR_KIND_MODIFIERS.initials},[_vm._v(" "+_vm._s(_vm.formattedInitials)+" ")]):_vm._e()],2),(_vm.showGroup)?_c('span',{staticClass:"d-avatar__count",attrs:{"data-qa":"dt-avatar-count"}},[_vm._v(_vm._s(_vm.formattedGroup))]):_vm._e(),(_vm.presence && !_vm.showGroup)?_c('dt-presence',_vm._b({class:[
       'd-avatar__presence',
-      _vm.AVATAR_PRESENCE_SIZE_MODIFIERS[_vm.size] ],attrs:{"presence":_vm.presence,"data-qa":"dt-presence"}},'dt-presence',_vm.presenceProps,false)):_vm._e()],2)}
+      _vm.AVATAR_PRESENCE_SIZE_MODIFIERS[_vm.size] ],attrs:{"presence":_vm.presence,"data-qa":"dt-presence"}},'dt-presence',_vm.presenceProps,false)):_vm._e()],1)}
 var staticRenderFns = []
 
 
@@ -2771,11 +2767,6 @@ var component = normalizeComponent(
 var node_modules_seedrandom = __webpack_require__(377);
 var seedrandom_default = /*#__PURE__*/__webpack_require__.n(node_modules_seedrandom);
 ;// CONCATENATED MODULE: ./components/avatar/avatar_constants.js
-const AVATAR_KIND_MODIFIERS = {
-  default: '',
-  icon: 'd-avatar--icon',
-  initials: 'd-avatar--initials'
-};
 const AVATAR_SIZE_MODIFIERS = {
   xs: 'd-avatar--xs',
   sm: 'd-avatar--sm',
@@ -2783,6 +2774,11 @@ const AVATAR_SIZE_MODIFIERS = {
   lg: 'd-avatar--lg',
   xl: 'd-avatar--xl'
 };
+const AVATAR_KIND_MODIFIERS = {
+  default: '',
+  icon: 'd-avatar__icon',
+  initials: 'd-avatar__initials'
+};
 const AVATAR_PRESENCE_SIZE_MODIFIERS = {
   md: 'd-avatar__presence--md',
   lg: 'd-avatar__presence--lg'
@@ -2801,11 +2797,13 @@ const GRADIENT_COLORS = {
 };
 const MAX_GRADIENT_COLORS = 3;
 const MAX_GRADIENT_COLORS_100 = 2;
+const AVATAR_GROUP_VALIDATOR = group => group > 1;
 /* harmony default export */ const avatar_constants = ({
   AVATAR_KIND_MODIFIERS,
   AVATAR_SIZE_MODIFIERS,
   AVATAR_ICON_SIZES,
-  AVATAR_ANGLES
+  AVATAR_ANGLES,
+  AVATAR_GROUP_VALIDATOR
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/avatar/avatar.vue?vue&type=script&lang=js&
 //
@@ -2838,6 +2836,14 @@ const MAX_GRADIENT_COLORS_100 = 2;
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -2918,6 +2924,25 @@ const MAX_GRADIENT_COLORS_100 = 2;
     initials: {
       type: String,
       default: ''
+    },
+
+    /**
+     * Determines whether to show a gradient background for the avatar.
+     */
+    gradient: {
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * Determines whether to show a group avatar.
+     * Limit to 2 digits max, more than 99 will be rendered as “99+”.
+     * if the number is 1 or less it would just show the regular avatar as if group had not been set.
+     */
+    group: {
+      type: Number,
+      default: undefined,
+      validator: group => AVATAR_GROUP_VALIDATOR(group)
     }
   },
 
@@ -2935,6 +2960,13 @@ const MAX_GRADIENT_COLORS_100 = 2;
   },
 
   computed: {
+    avatarClasses() {
+      return ['d-avatar', AVATAR_SIZE_MODIFIERS[this.size], this.avatarClass, {
+        'd-avatar--no-gradient': !this.gradient,
+        'd-avatar--group': this.showGroup
+      }];
+    },
+
     showDefaultSlot() {
       return this.kind !== 'initials' && this.imageLoadedSuccessfully !== false;
     },
@@ -2943,6 +2975,10 @@ const MAX_GRADIENT_COLORS_100 = 2;
       return this.kind === 'initials' || this.initials;
     },
 
+    showGroup() {
+      return AVATAR_GROUP_VALIDATOR(this.group);
+    },
+
     initialKindStyle() {
       const randomGradientColorStops = this.randomizeGradientColorStops();
       return {
@@ -2951,6 +2987,10 @@ const MAX_GRADIENT_COLORS_100 = 2;
         '--avatar-gradient-stop-2': `var(--${randomGradientColorStops[1]})`,
         '--avatar-gradient-stop-3': `var(--${randomGradientColorStops[2]})`
       };
+    },
+
+    formattedGroup() {
+      return this.group > 99 ? '99+' : this.group;
     }
 
   },
@@ -2968,31 +3008,46 @@ const MAX_GRADIENT_COLORS_100 = 2;
 
   methods: {
     init() {
-      const firstChild = this.$el.firstChild;
+      const firstChild = this.$refs.canvas.firstChild;
+
+      if (!firstChild) {
+        return;
+      }
 
-      if (firstChild) {
-        this.setKind(firstChild);
+      this.setKind(firstChild);
+      this.kindHandler(firstChild);
+    },
 
-        if (this.kind === 'image') {
-          firstChild.classList.add('d-avatar__image');
+    kindHandler(el) {
+      switch (this.kind) {
+        case 'image':
+          el.classList.add('d-avatar__image');
           this.validateImageAttrsPresence();
-          firstChild.addEventListener('error', () => {
-            this.formatInitials(this.initials);
-            this.imageLoadedSuccessfully = false;
-          });
-          firstChild.addEventListener('load', () => {
-            firstChild.classList.add('d-avatar--image-loaded');
-            this.imageLoadedSuccessfully = true;
-          });
-        }
+          this.setImageListeners(el);
+          break;
+
+        case 'icon':
+          el.classList.add(AVATAR_KIND_MODIFIERS.icon);
+          break;
 
-        if (this.kind === 'initials') {
-          this.slottedInitials = firstChild.text || firstChild.textContent;
+        case 'initials':
+          this.slottedInitials = el.text || el.textContent;
           this.formatInitials(this.slottedInitials);
-        }
+          break;
       }
     },
 
+    setImageListeners(el) {
+      el.addEventListener('error', () => {
+        this.formatInitials(this.initials);
+        this.imageLoadedSuccessfully = false;
+      });
+      el.addEventListener('load', () => {
+        el.classList.add('d-avatar--image-loaded');
+        this.imageLoadedSuccessfully = true;
+      });
+    },
+
     formatInitials(initials) {
       if (!initials) return;
 
@@ -3059,8 +3114,8 @@ const MAX_GRADIENT_COLORS_100 = 2;
     },
 
     validateImageAttrsPresence() {
-      const isSrcMissing = !this.$el.firstChild.getAttribute('src');
-      const isAltMissing = !this.$el.firstChild.getAttribute('alt');
+      const isSrcMissing = !this.$refs.canvas.firstChild.getAttribute('src');
+      const isAltMissing = !this.$refs.canvas.firstChild.getAttribute('alt');
 
       if (isSrcMissing || isAltMissing) {
         external_commonjs_vue_commonjs2_vue_root_Vue_default().util.warn('src and alt attributes are required for image avatars', this);
@@ -3072,7 +3127,7 @@ const MAX_GRADIENT_COLORS_100 = 2;
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=script&lang=js&
  /* harmony default export */ const avatar_avatarvue_type_script_lang_js_ = (avatarvue_type_script_lang_js_); 
 // EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-72[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-72[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-72[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-72[0].rules[0].use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-72[0].rules[0].use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/avatar/avatar.vue?vue&type=style&index=0&lang=less&
-var avatarvue_type_style_index_0_lang_less_ = __webpack_require__(329);
+var avatarvue_type_style_index_0_lang_less_ = __webpack_require__(422);
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&lang=less&
 
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
@@ -3387,9 +3442,9 @@ var badge_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/badge/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/banner/banner.vue?vue&type=template&id=756779c1&
-var bannervue_type_template_id_756779c1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{class:_vm.bannerClass,style:(_vm.bannerBackgroundImage),attrs:{"role":_vm.role},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.trapFocus.apply(null, arguments)}}},[_c('div',{staticClass:"d-banner__dialog",class:_vm.dialogClass,attrs:{"aria-labelledby":_vm.titleId,"aria-describedby":_vm.contentId}},[(!_vm.hideIcon)?_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2):_vm._e(),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default")],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps,"visually-hidden-close":_vm.visuallyHiddenClose,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel}},_vm.$listeners),[_vm._t("action")],2)],1)])}
-var bannervue_type_template_id_756779c1_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/banner/banner.vue?vue&type=template&id=d982e6ae&
+var bannervue_type_template_id_d982e6ae_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{class:_vm.bannerClass,style:(_vm.bannerBackgroundImage),attrs:{"role":_vm.role},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.trapFocus.apply(null, arguments)}}},[_c('div',{staticClass:"d-banner__dialog",class:_vm.dialogClass,attrs:{"aria-labelledby":_vm.titleId,"aria-describedby":_vm.contentId}},[(!_vm.hideIcon)?_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2):_vm._e(),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default")],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps,"visually-hidden-close":_vm.visuallyHiddenClose,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel}},_vm.$listeners),[_vm._t("action")],2)],1)])}
+var bannervue_type_template_id_d982e6ae_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/notice/notice_icon.vue?vue&type=template&id=dbeeebfa&
@@ -4415,6 +4470,7 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 //
 //
 //
+//
 
 
 
@@ -4618,8 +4674,8 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 ;
 var banner_component = normalizeComponent(
   banner_bannervue_type_script_lang_js_,
-  bannervue_type_template_id_756779c1_render,
-  bannervue_type_template_id_756779c1_staticRenderFns,
+  bannervue_type_template_id_d982e6ae_render,
+  bannervue_type_template_id_d982e6ae_staticRenderFns,
   false,
   null,
   null,
@@ -5171,9 +5227,9 @@ var card_component = normalizeComponent(
 /* harmony default export */ const card = (card_component.exports);
 ;// CONCATENATED MODULE: ./components/card/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=3595da7e&
-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()])}
-var comboboxvue_type_template_id_3595da7e_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=5e29b120&
+var comboboxvue_type_template_id_5e29b120_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()])}
+var comboboxvue_type_template_id_5e29b120_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
@@ -7012,6 +7068,8 @@ const LABEL_SIZES = {
 //
 //
 //
+//
+//
 
 
 
@@ -7386,8 +7444,8 @@ const LABEL_SIZES = {
 ;
 var combobox_component = normalizeComponent(
   combobox_comboboxvue_type_script_lang_js_,
-  comboboxvue_type_template_id_3595da7e_render,
-  comboboxvue_type_template_id_3595da7e_staticRenderFns,
+  comboboxvue_type_template_id_5e29b120_render,
+  comboboxvue_type_template_id_5e29b120_staticRenderFns,
   false,
   null,
   null,
@@ -7991,17 +8049,17 @@ var collapsible_component = normalizeComponent(
 /* 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=5944f754&
-var dropdownvue_type_template_id_5944f754_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":_vm.shouldOpenWithArrowKeys,"open-on-context":_vm.openOnContext},scopedSlots:_vm._u([{key:"anchor",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!./components/dropdown/dropdown.vue?vue&type=template&id=3c1dacf6&
+var dropdownvue_type_template_id_3c1dacf6_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":_vm.shouldOpenWithArrowKeys,"open-on-context":_vm.openOnContext},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
 var attrs = ref.attrs;
 return [_vm._t("anchor",null,null,attrs)]}},{key:"content",fn:function(ref){
 var close = ref.close;
 return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,"data-qa":"dt-dropdown-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[_vm._t("list",null,{"close":close}),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"tabindex":_vm.isArrowKeyNav ? -1 : 0},on:{"close":close}}):_vm._e()],2)]}}],null,true)},_vm.dropdownListeners))}
-var dropdownvue_type_template_id_5944f754_staticRenderFns = []
+var dropdownvue_type_template_id_3c1dacf6_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/popover/popover.vue?vue&type=template&id=fec53cb4&
-var popovervue_type_template_id_fec53cb4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// 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/popover/popover.vue?vue&type=template&id=1fe3451a&
+var popovervue_type_template_id_1fe3451a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -8012,7 +8070,7 @@ var popovervue_type_template_id_fec53cb4_render = function () {var _vm=this;var
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_fec53cb4_staticRenderFns = []
+var popovervue_type_template_id_1fe3451a_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -12960,6 +13018,7 @@ var popover_header_footer_component = normalizeComponent(
 //
 //
 //
+//
 
 /* eslint-disable max-lines */
 
@@ -13423,11 +13482,9 @@ var popover_header_footer_component = normalizeComponent(
     isOpen(isOpen, isPrev) {
       if (isOpen) {
         this.initTippyInstance();
-        this.preventScrolling();
       } else if (!isOpen && isPrev !== isOpen) {
         this.removeEventListeners();
         this.tip.hide();
-        this.enableScrolling();
       }
     }
 
@@ -13610,6 +13667,7 @@ var popover_header_footer_component = normalizeComponent(
       }
 
       (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
+      this.enableScrolling();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -13618,7 +13676,8 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     async onEnterTransitionComplete() {
-      this.focusInitialElement(); // await next tick in case the user wants to change focus themselves.
+      this.focusInitialElement();
+      this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
 
       await this.$nextTick();
       this.$emit('opened', true, this.$refs.popover__content);
@@ -13748,8 +13807,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(532);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_fec53cb4_render,
-  popovervue_type_template_id_fec53cb4_staticRenderFns,
+  popovervue_type_template_id_1fe3451a_render,
+  popovervue_type_template_id_1fe3451a_staticRenderFns,
   false,
   null,
   null,
@@ -13819,6 +13878,7 @@ const DROPDOWN_PADDING_CLASSES = {
 //
 //
 //
+//
 
 
 
@@ -14213,8 +14273,8 @@ var dropdownvue_type_style_index_0_lang_less_ = __webpack_require__(774);
 
 var dropdown_component = normalizeComponent(
   dropdown_dropdownvue_type_script_lang_js_,
-  dropdownvue_type_template_id_5944f754_render,
-  dropdownvue_type_template_id_5944f754_staticRenderFns,
+  dropdownvue_type_template_id_3c1dacf6_render,
+  dropdownvue_type_template_id_3c1dacf6_staticRenderFns,
   false,
   null,
   null,
@@ -20185,14 +20245,14 @@ var keyboard_shortcut_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/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/root_layout/root_layout.vue?vue&type=template&id=0bf64ed3&
-var root_layoutvue_type_template_id_0bf64ed3_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"root-layout d-root-layout"},[(_vm.$slots.header)?_c('header',{class:['root-layout__header', _vm.headerClass, { 'root-layout__header--sticky': _vm.headerSticky }],style:({ 'height': _vm.headerHeight }),attrs:{"data-qa":"root-layout-header"}},[_vm._t("header")],2):_vm._e(),_c('dt-root-layout-body',{attrs:{"body-class":_vm.bodyClass,"content-class":_vm.contentClass,"content-wrap-width-percent":_vm.contentWrapWidthPercent,"sidebar-class":_vm.sidebarClass,"sidebar-width":_vm.sidebarWidth,"sidebar-position":_vm.sidebarPosition},scopedSlots:_vm._u([(_vm.$slots.sidebar)?{key:"sidebar",fn:function(){return [_vm._t("sidebar")]},proxy:true}:null,(_vm.$slots.default)?{key:"content",fn:function(){return [_vm._t("default")]},proxy:true}:null],null,true)}),(_vm.$slots.footer)?_c('footer',{class:['root-layout__footer', _vm.footerClass],style:({ 'height': _vm.footerHeight }),attrs:{"data-qa":"root-layout-footer"}},[_vm._t("footer")],2):_vm._e()],1)}
-var root_layoutvue_type_template_id_0bf64ed3_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/root_layout/root_layout.vue?vue&type=template&id=29e484da&
+var root_layoutvue_type_template_id_29e484da_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"root-layout d-root-layout"},[(_vm.$slots.header)?_c('header',{class:['root-layout__header', _vm.headerClass, { 'root-layout__header--sticky': _vm.headerSticky }],style:({ 'height': _vm.headerHeight, 'min-height': _vm.headerHeight }),attrs:{"data-qa":"root-layout-header"}},[_vm._t("header")],2):_vm._e(),_c('dt-root-layout-body',{attrs:{"body-class":_vm.bodyClass,"content-class":_vm.contentClass,"content-wrap-width-percent":_vm.contentWrapWidthPercent,"sidebar-class":_vm.sidebarClass,"sidebar-width":_vm.sidebarWidth,"sidebar-position":_vm.sidebarPosition,"header-height":_vm.$slots.header ? _vm.headerHeight : '0px',"footer-height":_vm.$slots.footer ? _vm.footerHeight : '0px',"fixed":_vm.fixed},scopedSlots:_vm._u([(_vm.$slots.sidebar)?{key:"sidebar",fn:function(){return [_vm._t("sidebar")]},proxy:true}:null,(_vm.$slots.default)?{key:"content",fn:function(){return [_vm._t("default")]},proxy:true}:null],null,true)}),(_vm.$slots.footer)?_c('footer',{class:['root-layout__footer', _vm.footerClass],style:({ 'height': _vm.footerHeight, 'min-height': _vm.footerHeight }),attrs:{"data-qa":"root-layout-footer"}},[_vm._t("footer")],2):_vm._e()],1)}
+var root_layoutvue_type_template_id_29e484da_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/root_layout/root_layout_body.vue?vue&type=template&id=a07ea7ec&
-var root_layout_bodyvue_type_template_id_a07ea7ec_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['root-layout__body', 'd-fl-grow1', _vm.bodyClasses],attrs:{"data-qa":"root-layout-body"}},[(_vm.$slots.sidebar)?_c('aside',{class:['root-layout__sidebar', _vm.sidebarClass],style:({ 'flex-basis': _vm.sidebarWidth }),attrs:{"data-qa":"root-layout-sidebar"}},[_vm._t("sidebar")],2):_vm._e(),(_vm.$slots.content)?_c('main',{class:['root-layout__content', _vm.contentClass],style:({ 'min-inline-size': _vm.contentWrapWidthPercent }),attrs:{"data-qa":"root-layout-content"}},[_vm._t("content")],2):_vm._e()])}
-var root_layout_bodyvue_type_template_id_a07ea7ec_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/root_layout/root_layout_body.vue?vue&type=template&id=d8938174&
+var root_layout_bodyvue_type_template_id_d8938174_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"root-layout-body",class:['root-layout__body', 'd-fl-grow1', _vm.bodyClasses],attrs:{"data-qa":"root-layout-body"}},[(_vm.$slots.sidebar)?_c('aside',{ref:"root-layout-sidebar",class:['root-layout__sidebar', _vm.sidebarClass],style:({ 'flex-basis': _vm.sidebarWidth }),attrs:{"data-qa":"root-layout-sidebar"}},[_vm._t("sidebar")],2):_vm._e(),(_vm.$slots.content)?_c('main',{ref:"root-layout-content",class:['root-layout__content', _vm.contentClass],style:({ 'min-inline-size': _vm.contentWrapWidthPercent, 'height': _vm.mainHeight }),attrs:{"data-qa":"root-layout-content"}},[_vm._t("content")],2):_vm._e()])}
+var root_layout_bodyvue_type_template_id_d8938174_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_constants.js
@@ -20230,6 +20290,9 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 //
 //
 //
+//
+//
+//
 
 /* harmony default export */ const root_layout_bodyvue_type_script_lang_js_ = ({
   name: 'DtRootLayoutBody',
@@ -20285,13 +20348,80 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
     contentWrapWidthPercent: {
       type: String,
       default: undefined
+    },
+    headerHeight: {
+      type: String,
+      default: undefined
+    },
+    footerHeight: {
+      type: String,
+      default: undefined
+    },
+    fixed: {
+      type: Boolean,
+      default: undefined
     }
   },
+
+  data() {
+    return {
+      sidebarTop: null,
+      contentTop: null,
+      documentHeight: null
+    };
+  },
+
   computed: {
     bodyClasses() {
       return [this.bodyClass, {
         'root-layout__body--invert': this.sidebarPosition === ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT
       }];
+    },
+
+    mainHeight() {
+      if (this.fixed) {
+        return `calc(${this.documentHeight}
+          - (${this.headerHeight} + ${this.extraSidebarHeight} + ${this.footerHeight}))`;
+      }
+
+      return null;
+    },
+
+    // When the sidebar is above the header due to contentWrapWidthPercent, it needs to be excluded
+    // in the main content height calculation. Otherwise it is 0 since it is at equal height with the main content.
+    extraSidebarHeight() {
+      if (this.contentTop > this.sidebarTop) {
+        return this.$refs['root-layout-sidebar'].offsetHeight + 'px';
+      }
+
+      return '0px';
+    }
+
+  },
+
+  mounted() {
+    window.addEventListener('resize', this.onResize);
+    this.getDocumentHeight();
+    this.getElementTops();
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResize);
+  },
+
+  methods: {
+    onResize() {
+      this.getDocumentHeight();
+      this.getElementTops();
+    },
+
+    getElementTops() {
+      this.sidebarTop = this.$refs['root-layout-sidebar'].offsetTop;
+      this.contentTop = this.$refs['root-layout-content'].offsetTop;
+    },
+
+    getDocumentHeight() {
+      this.documentHeight = window.innerHeight + 'px';
     }
 
   }
@@ -20313,8 +20443,8 @@ var root_layout_bodyvue_type_style_index_0_lang_less_ = __webpack_require__(75);
 
 var root_layout_body_component = normalizeComponent(
   root_layout_root_layout_bodyvue_type_script_lang_js_,
-  root_layout_bodyvue_type_template_id_a07ea7ec_render,
-  root_layout_bodyvue_type_template_id_a07ea7ec_staticRenderFns,
+  root_layout_bodyvue_type_template_id_d8938174_render,
+  root_layout_bodyvue_type_template_id_d8938174_staticRenderFns,
   false,
   null,
   null,
@@ -20370,6 +20500,9 @@ var root_layout_body_component = normalizeComponent(
 //
 //
 //
+//
+//
+//
 
 
 /**
@@ -20382,6 +20515,15 @@ var root_layout_body_component = normalizeComponent(
     DtRootLayoutBody: root_layout_body
   },
   props: {
+    /**
+     * When true, the header / footer will be locked in position and the content will
+     * be scrollable. When false the header / footer will scroll out of view.
+     */
+    fixed: {
+      type: Boolean,
+      default: true
+    },
+
     /**
      * Additional class name for the header element
      */
@@ -20498,8 +20640,8 @@ var root_layoutvue_type_style_index_0_lang_less_ = __webpack_require__(253);
 
 var root_layout_component = normalizeComponent(
   root_layout_root_layoutvue_type_script_lang_js_,
-  root_layoutvue_type_template_id_0bf64ed3_render,
-  root_layoutvue_type_template_id_0bf64ed3_staticRenderFns,
+  root_layoutvue_type_template_id_29e484da_render,
+  root_layoutvue_type_template_id_29e484da_staticRenderFns,
   false,
   null,
   null,
@@ -20511,15 +20653,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=ad3e7dce&
-var combobox_with_popovervue_type_template_id_ad3e7dce_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){
+;// 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=7027b3a3&
+var combobox_with_popovervue_type_template_id_7027b3a3_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){
 var inputProps = ref.inputProps;
 return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"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;
 return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":false,"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"},[_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":clearHighlightIndex}},[(_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"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
-var combobox_with_popovervue_type_template_id_ad3e7dce_staticRenderFns = []
+var combobox_with_popovervue_type_template_id_7027b3a3_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -20626,6 +20768,8 @@ var combobox_with_popovervue_type_template_id_ad3e7dce_staticRenderFns = []
 //
 //
 //
+//
+//
 
 
 
@@ -20987,8 +21131,8 @@ var combobox_with_popovervue_type_template_id_ad3e7dce_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_ad3e7dce_render,
-  combobox_with_popovervue_type_template_id_ad3e7dce_staticRenderFns,
+  combobox_with_popovervue_type_template_id_7027b3a3_render,
+  combobox_with_popovervue_type_template_id_7027b3a3_staticRenderFns,
   false,
   null,
   null,