@dialpad/dialtone-vue 2.16.0 → 2.19.0

package/dist/dialtone-vue.umd.js

@@ -1131,6 +1131,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtListSection": () => (/* reexport */ list_section),
   "DtModal": () => (/* reexport */ modal_modal),
   "DtNotice": () => (/* reexport */ notice),
+  "DtPagination": () => (/* reexport */ pagination),
   "DtPopover": () => (/* reexport */ popover),
   "DtRadio": () => (/* reexport */ radio_radio),
   "DtRadioGroup": () => (/* reexport */ radio_group),
@@ -1186,6 +1187,7 @@ __webpack_require__.d(__webpack_exports__, {
   "TOOLTIP_DIRECTIONS": () => (/* reexport */ TOOLTIP_DIRECTIONS),
   "TOOLTIP_HIDE_ON_CLICK_VARIANTS": () => (/* reexport */ TOOLTIP_HIDE_ON_CLICK_VARIANTS),
   "TOOLTIP_KIND_MODIFIERS": () => (/* reexport */ TOOLTIP_KIND_MODIFIERS),
+  "TOOLTIP_STICKY_VALUES": () => (/* reexport */ TOOLTIP_STICKY_VALUES),
   "USER_STATUS_COLOR_MODIFIERS": () => (/* reexport */ USER_STATUS_COLOR_MODIFIERS),
   "VALIDATION_MESSAGE_TYPES": () => (/* reexport */ VALIDATION_MESSAGE_TYPES),
   "codeToEmojiData": () => (/* reexport */ codeToEmojiData),
@@ -3252,9 +3254,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=0f032a37&
-var comboboxvue_type_template_id_0f032a37_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)?_c('combobox-loading-list',_vm._b({},'combobox-loading-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_0f032a37_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=62892fd4&
+var comboboxvue_type_template_id_62892fd4_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_62892fd4_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
@@ -3554,22 +3556,20 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
         this.setHighlightIndex(this._itemsLength() - 1);
       },
 
-      async setHighlightIndex(num) {
+      setHighlightIndex(num) {
         this[indexKey] = num;
         this[idKey] = this._getItemId(num);
 
         if (this._itemsLength() && afterHighlightMethod) {
-          await this.$nextTick();
           this[afterHighlightMethod](num);
         }
       },
 
-      async setHighlightId(id) {
+      setHighlightId(id) {
         this[idKey] = id;
         this[indexKey] = this._getItemIndex(id);
 
         if (this._itemsLength() && afterHighlightMethod) {
-          await this.$nextTick();
           this[afterHighlightMethod](this._getItemIndex(id));
         }
       },
@@ -4711,6 +4711,62 @@ var combobox_loading_list_component = normalizeComponent(
 )
 
 /* harmony default export */ const combobox_loading_list = (combobox_loading_list_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/combobox/combobox_empty-list.vue?vue&type=template&id=85c21112&
+var combobox_empty_listvue_type_template_id_85c21112_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ol',{staticClass:"d-p0",attrs:{"data-qa":"dt-combobox-empty-list"}},[_c('dt-list-item',{staticClass:"d-d-flex d-jc-center",attrs:{"role":"option","navigation-type":"arrow-keys"}},[_c('span',[_vm._v(_vm._s(_vm.message))])])],1)}
+var combobox_empty_listvue_type_template_id_85c21112_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!./components/combobox/combobox_empty-list.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ const combobox_empty_listvue_type_script_lang_js_ = ({
+  name: 'ComboboxEmptyList',
+  components: {
+    DtListItem: list_item
+  },
+  props: {
+    message: {
+      type: String,
+      required: true
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue?vue&type=script&lang=js&
+ /* harmony default export */ const combobox_combobox_empty_listvue_type_script_lang_js_ = (combobox_empty_listvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue
+
+
+
+
+
+/* normalize component */
+;
+var combobox_empty_list_component = normalizeComponent(
+  combobox_combobox_empty_listvue_type_script_lang_js_,
+  combobox_empty_listvue_type_template_id_85c21112_render,
+  combobox_empty_listvue_type_template_id_85c21112_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const combobox_empty_list = (combobox_empty_list_component.exports);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=script&lang=js&
 //
 //
@@ -4752,13 +4808,22 @@ var combobox_loading_list_component = normalizeComponent(
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+
 
 
 
 /* harmony default export */ const comboboxvue_type_script_lang_js_ = ({
   name: 'DtCombobox',
   components: {
-    ComboboxLoadingList: combobox_loading_list
+    ComboboxLoadingList: combobox_loading_list,
+    ComboboxEmptyList: combobox_empty_list
   },
   mixins: [keyboard_list_navigation({
     indexKey: 'highlightIndex',
@@ -4829,6 +4894,14 @@ var combobox_loading_list_component = normalizeComponent(
     loading: {
       type: Boolean,
       default: false
+    },
+
+    /**
+     * Message to show when the list is empty
+     */
+    emptyStateMessage: {
+      type: String,
+      default: ''
     }
   },
   emits: ['select', 'escape', 'highlight', 'opened'],
@@ -4838,7 +4911,9 @@ var combobox_loading_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
+      outsideRenderedListRef: null,
+      isListEmpty: undefined,
+      isLoading: undefined
     };
   },
 
@@ -4889,20 +4964,35 @@ var combobox_loading_list_component = normalizeComponent(
   watch: {
     showList(showList) {
       // When the list's visibility changes reset the highlight index.
-      this.$nextTick(function () {
-        if (!this.listRenderedOutside) {
-          this.setInitialHighlightIndex();
-          this.$emit('opened', showList);
-        }
-      });
+      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;
       }
+    },
+
+    loading(isLoading) {
+      this.isListEmpty = undefined;
+      this.isLoading = isLoading;
+      this.$nextTick(() => {
+        this.isListEmpty = this.checkItemsLength();
+        this.setInitialHighlightIndex();
+      });
     }
 
   },
+
+  async mounted() {
+    this.isLoading = this.loading;
+    await this.$nextTick();
+    this.isListEmpty = this.checkItemsLength();
+  },
+
   methods: {
     onMouseHighlight(e) {
       if (this.loading) return;
@@ -4914,9 +5004,9 @@ var combobox_loading_list_component = normalizeComponent(
     },
 
     getListElement() {
-      var _this$outsideRendered;
+      var _this$outsideRendered, _this$$refs$listWrapp;
 
-      return (_this$outsideRendered = this.outsideRenderedListRef) !== null && _this$outsideRendered !== void 0 ? _this$outsideRendered : this.$refs.listWrapper.querySelector("#".concat(this.listId));
+      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() {
@@ -4931,7 +5021,7 @@ var combobox_loading_list_component = normalizeComponent(
     },
 
     onEnterKey() {
-      if (this.loading) return;
+      if (this.loading || this.isListEmpty) return;
 
       if (this.highlightIndex >= 0) {
         this.$emit('select', this.highlightIndex);
@@ -4950,24 +5040,30 @@ var combobox_loading_list_component = normalizeComponent(
       this.$emit('opened', open);
 
       if (open) {
+        this.isListEmpty = this.checkItemsLength();
         this.setInitialHighlightIndex();
       }
     },
 
     onKeyValidation(e, eventHandler) {
-      if (!this.showList || !this.getListElement()) {
-        return;
-      }
-
+      if (!this.showList || !this.getListElement()) return;
       this[eventHandler](e);
     },
 
     setInitialHighlightIndex() {
-      if (this.showList) {
+      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;
     }
 
   }
@@ -4984,8 +5080,8 @@ var combobox_loading_list_component = normalizeComponent(
 ;
 var combobox_component = normalizeComponent(
   combobox_comboboxvue_type_script_lang_js_,
-  comboboxvue_type_template_id_0f032a37_render,
-  comboboxvue_type_template_id_0f032a37_staticRenderFns,
+  comboboxvue_type_template_id_62892fd4_render,
+  comboboxvue_type_template_id_62892fd4_staticRenderFns,
   false,
   null,
   null,
@@ -5005,8 +5101,8 @@ return [_c('ul',{ref:"listWrapper",class:['d-ps-relative', 'd-px0', _vm.DROPDOWN
 var dropdownvue_type_template_id_02d3f006_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=97535496&
-var popovervue_type_template_id_97535496_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--modal-opened': _vm.modal && _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"},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"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)}],"wheel":function (e) { return (_vm.isOpen && _vm.modal) && e.preventDefault(); },"!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=52edae7f&
+var popovervue_type_template_id_52edae7f_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--modal-opened': _vm.modal && _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"},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"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)}],"wheel":function (e) { return (_vm.isOpen && _vm.modal) && e.preventDefault(); },"!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,
@@ -5017,7 +5113,7 @@ var popovervue_type_template_id_97535496_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()],1)],1)],1)}
-var popovervue_type_template_id_97535496_staticRenderFns = []
+var popovervue_type_template_id_52edae7f_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -9420,6 +9516,7 @@ const getArrowDetected = fn => ({
 
 
 const BASE_TIPPY_DIRECTIONS = ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'];
+const TIPPY_STICKY_VALUES = [true, false, 'reference', 'popper'];
 const tippy_utils_createTippy = (anchorElement, options) => {
   const {
     contentElement
@@ -9427,6 +9524,7 @@ const tippy_utils_createTippy = (anchorElement, options) => {
   };
   delete options.contentElement;
   return tippy_esm(anchorElement, { ...options,
+    plugins: [sticky],
     render: () => getContentWrapper(contentElement)
   });
 };
@@ -9435,18 +9533,27 @@ const getPopperOptions = function () {
     boundary = 'clippingParents',
     fallbackPlacements = [],
     onChangePlacement = () => {},
-    hasHideModifierEnabled = false
+    hasHideModifierEnabled = false,
+    // If set to false the dialog will display over top of the anchor when there is insufficient space.
+    // if set to true it will never move from its position relative to the anchor and will clip instead.
+    tether = true
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return {
     modifiers: [{
       name: 'flip',
       options: {
-        fallbackPlacements: fallbackPlacements,
+        fallbackPlacements,
         boundary
       }
     }, {
       name: 'hide',
       enabled: hasHideModifierEnabled
+    }, {
+      name: 'preventOverflow',
+      options: {
+        altAxis: !tether,
+        tether
+      }
     }, getArrowDetected(_ref => {
       let {
         state
@@ -9502,6 +9609,7 @@ const POPOVER_HEADER_FOOTER_PADDING_CLASSES = {
 const POPOVER_ROLES = ['dialog', 'menu', 'listbox', 'tree', 'grid'];
 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)])}
@@ -10221,6 +10329,30 @@ var popover_header_footer_component = normalizeComponent(
       default: 'bottom-end'
     },
 
+    /**
+     * If set to false the dialog will display over top of the anchor when there is insufficient space.
+     * If set to true it will never move from its position relative to the anchor and will clip instead.
+     */
+    tether: {
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * If the popover sticks to the anchor. This is usually not needed, but can be needed
+     * if the reference element's position is animating, or to automatically update the popover
+     * position in those cases the DOM layout changes the reference element's position.
+     * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
+     * checks the "popper" rect for changes.
+     */
+    sticky: {
+      type: [Boolean, String],
+      default: false,
+      validator: sticky => {
+        return POPOVER_STICKY_VALUES.includes(sticky);
+      }
+    },
+
     /**
      * Determines maximum height for the popover before overflow.
      * Possible units rem|px|em
@@ -10334,16 +10466,25 @@ var popover_header_footer_component = normalizeComponent(
 
     offset(offset) {
       this.tip.setProps({
-        offset: offset
+        offset
       });
     },
 
-    fallbackPlacements(fallbackPlacements) {
+    sticky(sticky) {
       this.tip.setProps({
-        popperOptions: getPopperOptions({
-          fallbackPlacements: fallbackPlacements,
-          hasHideModifierEnabled: true
-        })
+        sticky
+      });
+    },
+
+    fallbackPlacements() {
+      this.tip.setProps({
+        popperOptions: this.popperOptions()
+      });
+    },
+
+    tether() {
+      this.tip.setProps({
+        popperOptions: this.popperOptions()
       });
     },
 
@@ -10387,13 +10528,11 @@ var popover_header_footer_component = normalizeComponent(
     }
 
     this.tip = tippy_utils_createTippy(this.anchorEl, {
-      popperOptions: getPopperOptions({
-        fallbackPlacements: this.fallbackPlacements,
-        hasHideModifierEnabled: true
-      }),
+      popperOptions: this.popperOptions(),
       contentElement: this.popoverContentEl,
       placement: this.placement,
       offset: this.offset,
+      sticky: this.sticky,
       appendTo: document.body,
       interactive: true,
       trigger: 'manual',
@@ -10424,6 +10563,14 @@ var popover_header_footer_component = normalizeComponent(
    *     METHODS    *
    ******************/
   methods: {
+    popperOptions() {
+      return getPopperOptions({
+        fallbackPlacements: this.fallbackPlacements,
+        tether: this.tether,
+        hasHideModifierEnabled: true
+      });
+    },
+
     validateProps() {
       if (this.modal && this.initialFocusElement === 'none') {
         console.error('If the popover is modal you must set the ' + 'initialFocusElement prop. Possible values: "dialog", "first", HTMLElement');
@@ -10615,8 +10762,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_97535496_render,
-  popovervue_type_template_id_97535496_staticRenderFns,
+  popovervue_type_template_id_52edae7f_render,
+  popovervue_type_template_id_52edae7f_staticRenderFns,
   false,
   null,
   null,
@@ -13551,6 +13698,275 @@ var notice_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/notice/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/pagination/pagination.vue?vue&type=template&id=3592a77a&
+var paginationvue_type_template_id_3592a77a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"d-d-flex d-fd-row d-gg2 d-ai-center",attrs:{"aria-label":_vm.ariaLabel}},[_c('dt-button',{staticClass:"d-h32 d-w32",attrs:{"data-qa":"dt-pagination-prev","aria-label":_vm.prevAriaLabel,"importance":_vm.isFirstPage ? 'primary' : 'clear',"disabled":_vm.isFirstPage},on:{"click":function($event){return _vm.changePage(_vm.currentPage - 1)}}},[_c('template',{slot:"icon"},[_c('icon-chevron-left')],1)],2),_vm._l((_vm.pages),function(page,index){return _c('div',{key:("page-" + page + "-" + index)},[(isNaN(Number(page)))?_c('div',{staticClass:"d-h32 d-w32 d-d-flex d-ai-center d-jc-center",attrs:{"data-qa":"dt-pagination-separator"}},[_vm._v(" … ")]):_c('dt-button',{staticClass:"d-h32 d-w32",attrs:{"aria-label":_vm.pageNumberAriaLabel(page),"importance":_vm.currentPage === page ? 'primary' : 'clear',"label-class":"d-fs14"},on:{"click":function($event){return _vm.changePage(page)}}},[_vm._v(" "+_vm._s(page)+" ")])],1)}),_c('dt-button',{staticClass:"d-h32 d-w32",attrs:{"data-qa":"dt-pagination-next","aria-label":_vm.nextAriaLabel,"disabled":_vm.isLastPage,"importance":_vm.isLastPage ? 'primary' : 'clear'},on:{"click":function($event){return _vm.changePage(_vm.currentPage + 1)}}},[_c('template',{slot:"icon"},[_c('icon-chevron-right')],1)],2)],2)}
+var paginationvue_type_template_id_3592a77a_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!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronLeft.vue?vue&type=template&id=bdbc37f6&
+var IconChevronLeftvue_type_template_id_bdbc37f6_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__chevronLeft",attrs:{"aria-hidden":"true","aria-label":"Chevron Left","viewBox":"0 0 24 24"}},[_c('path',{attrs:{"d":"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"}})])}
+var IconChevronLeftvue_type_template_id_bdbc37f6_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronLeft.vue
+
+var IconChevronLeft_script = {}
+
+
+/* normalize component */
+;
+var IconChevronLeft_component = normalizeComponent(
+  IconChevronLeft_script,
+  IconChevronLeftvue_type_template_id_bdbc37f6_render,
+  IconChevronLeftvue_type_template_id_bdbc37f6_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const IconChevronLeft = (IconChevronLeft_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/IconChevronRight.vue?vue&type=template&id=c72b3d10&
+var IconChevronRightvue_type_template_id_c72b3d10_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__chevronRight",attrs:{"aria-hidden":"true","aria-label":"Chevron Right","viewBox":"0 0 24 24"}},[_c('path',{attrs:{"d":"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"}})])}
+var IconChevronRightvue_type_template_id_c72b3d10_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronRight.vue
+
+var IconChevronRight_script = {}
+
+
+/* normalize component */
+;
+var IconChevronRight_component = normalizeComponent(
+  IconChevronRight_script,
+  IconChevronRightvue_type_template_id_c72b3d10_render,
+  IconChevronRightvue_type_template_id_c72b3d10_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const IconChevronRight = (IconChevronRight_component.exports);
+;// 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/pagination/pagination.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+/* harmony default export */ const paginationvue_type_script_lang_js_ = ({
+  name: 'DtPagination',
+  components: {
+    DtButton: button_button,
+    IconChevronLeft: IconChevronLeft,
+    IconChevronRight: IconChevronRight
+  },
+  props: {
+    /**
+     * Descriptive label for the pagination content.
+     */
+    ariaLabel: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * The total number of the pages
+     */
+    totalPages: {
+      type: Number,
+      required: true
+    },
+
+    /**
+     * Descriptive label for the previous button.
+     */
+    prevAriaLabel: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Descriptive label for the next button.
+     */
+    nextAriaLabel: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * A method that will be called to get the aria label of each page.
+     */
+    pageNumberAriaLabel: {
+      type: Function,
+      required: true
+    },
+
+    /**
+     * The active current page in the list of pages, defaults to the first page
+     */
+    activePage: {
+      type: Number,
+      default: 1
+    },
+
+    /**
+     * Determines the max pages to be shown in the list. Using an odd number is recommended.
+     * If an even number is given, then it will be rounded down to the nearest odd number to always
+     * keep current page in the middle when current page is in the mid-range.
+     */
+    maxVisible: {
+      type: Number,
+      default: 5
+    }
+  },
+  emits: ['change'],
+
+  data() {
+    return {
+      currentPage: this.activePage
+    };
+  },
+
+  computed: {
+    isFirstPage() {
+      return this.currentPage === 1;
+    },
+
+    isLastPage() {
+      return this.currentPage === this.totalPages;
+    },
+
+    pages() {
+      if (this.maxVisible === 0) {
+        return [];
+      }
+
+      if (this.totalPages <= this.maxVisible) {
+        return this.range(1, this.totalPages);
+      }
+
+      const start = this.maxVisible - 1;
+      const end = this.totalPages - start + 1;
+
+      if (this.currentPage < start) {
+        return [...this.range(1, start), '...', this.totalPages];
+      }
+
+      if (this.currentPage > end) {
+        return [1, '...', ...this.range(end, this.totalPages)];
+      } // rounding to the nearest odd according to the maxlength to always show the page number in the middle.
+
+
+      const total = this.maxVisible - (3 - this.maxVisible % 2);
+      const centerIndex = Math.floor(total / 2);
+      const left = this.currentPage - centerIndex;
+      const right = this.currentPage + centerIndex;
+      return [1, '...', ...this.range(left, right), '...', this.totalPages];
+    }
+
+  },
+  watch: {},
+  methods: {
+    range(from, to) {
+      const range = [];
+      from = from > 0 ? from : 1;
+
+      for (let i = from; i <= to; i++) {
+        range.push(i);
+      }
+
+      return range;
+    },
+
+    changePage(page) {
+      this.currentPage = page;
+      this.$emit('change', this.currentPage);
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/pagination/pagination.vue?vue&type=script&lang=js&
+ /* harmony default export */ const pagination_paginationvue_type_script_lang_js_ = (paginationvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/pagination/pagination.vue
+
+
+
+
+
+/* normalize component */
+;
+var pagination_component = normalizeComponent(
+  pagination_paginationvue_type_script_lang_js_,
+  paginationvue_type_template_id_3592a77a_render,
+  paginationvue_type_template_id_3592a77a_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const pagination = (pagination_component.exports);
+;// CONCATENATED MODULE: ./components/pagination/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/radio/radio.vue?vue&type=template&id=1e978b0c&
 var radiovue_type_template_id_1e978b0c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('label',[_c('div',{class:['d-radio-group', { 'd-radio-group--disabled': _vm.internalDisabled }]},[_c('div',{staticClass:"d-radio__input"},[_c('input',_vm._g(_vm._b({class:['d-radio', _vm.inputValidationClass, _vm.inputClass],attrs:{"name":_vm.internalName,"disabled":_vm.internalDisabled,"type":"radio"},domProps:{"checked":_vm.internalChecked,"value":_vm.value}},'input',_vm.$attrs,false),_vm.inputListeners))]),_c('div',{staticClass:"d-radio__copy d-radio__label",attrs:{"data-qa":"radio-label-description-container"}},[_c('div',_vm._b({class:_vm.labelClass,attrs:{"data-qa":"radio-label"}},'div',_vm.labelChildProps,false),[_vm._t("default",function(){return [_vm._v(_vm._s(_vm.label))]})],2),(_vm.$slots.description || _vm.description)?_c('div',_vm._b({class:['d-description', _vm.descriptionClass],attrs:{"data-qa":"radio-description"}},'div',_vm.descriptionChildProps,false),[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.formattedMessages,"show-messages":_vm.showMessages,"data-qa":"dt-radio-validation-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1)])])}
 var radiovue_type_template_id_1e978b0c_staticRenderFns = []
@@ -15744,15 +16160,15 @@ var toggle_component = normalizeComponent(
 /* harmony default export */ const toggle = (toggle_component.exports);
 ;// CONCATENATED MODULE: ./components/toggle/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/tooltip/tooltip.vue?vue&type=template&id=06e65b4f&
-var tooltipvue_type_template_id_06e65b4f_render = function () {
+;// 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/tooltip/tooltip.vue?vue&type=template&id=662e4cf7&
+var tooltipvue_type_template_id_662e4cf7_render = function () {
 var _obj;
 var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"data-qa":"dt-tooltip-container"}},[_c('div',{ref:"anchor",attrs:{"data-qa":"dt-tooltip-anchor"},on:{"focusin":_vm.onEnterAnchor,"focusout":_vm.onLeaveAnchor,"mouseenter":_vm.onEnterAnchor,"mouseleave":_vm.onLeaveAnchor,"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.onLeaveAnchor.apply(null, arguments)}}},[_vm._t("anchor")],2),_c('dt-lazy-show',{ref:"content",class:[
       'd-tooltip',
       ("d-tooltip__arrow-tippy--" + _vm.currentPlacement),
       ( _obj = {}, _obj[ _vm.TOOLTIP_KIND_MODIFIERS.inverted ] = _vm.inverted, _obj ),
       _vm.contentClass ],attrs:{"id":_vm.id,"show":_vm.isShown && (!!_vm.message.trim() || !!_vm.$slots.default),"role":"tooltip","aria-hidden":"false","data-qa":"dt-tooltip","appear":"","transition":_vm.transition},on:{"after-leave":_vm.onLeaveTransitionComplete,"after-enter":_vm.onEnterTransitionComplete}},[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2)],1)}
-var tooltipvue_type_template_id_06e65b4f_staticRenderFns = []
+var tooltipvue_type_template_id_662e4cf7_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
@@ -15767,6 +16183,7 @@ const TOOLTIP_KIND_MODIFIERS = {
   inverted: "d-tooltip--inverted",
   hide: "d-tooltip--hide"
 };
+const TOOLTIP_STICKY_VALUES = [...TIPPY_STICKY_VALUES];
 const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 ;// 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/tooltip/tooltip.vue?vue&type=script&lang=js&
 //
@@ -15876,6 +16293,21 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 
     },
 
+    /**
+     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed
+     * if the reference element's position is animating, or to automatically update the popover
+     * position in those cases the DOM layout changes the reference element's position.
+     * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
+     * checks the "popper" rect for changes.
+     */
+    sticky: {
+      type: [Boolean, String],
+      default: false,
+      validator: sticky => {
+        return TOOLTIP_STICKY_VALUES.includes(sticky);
+      }
+    },
+
     /**
      * Additional css classes for the tooltip content element.
      * Can accept all of String, Object, and Array, i.e. has the
@@ -15937,6 +16369,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
         interactive: false,
         trigger: 'manual',
         placement: this.placement,
+        sticky: this.sticky,
         popperOptions: getPopperOptions({
           fallbackPlacements: this.fallbackPlacements,
           hasHideModifierEnabled: true,
@@ -15967,6 +16400,12 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
       } else {
         this.tip.hide();
       }
+    },
+
+    sticky(sticky) {
+      this.tip.setProps({
+        sticky
+      });
     }
 
   },
@@ -16087,8 +16526,8 @@ var tooltipvue_type_style_index_0_lang_less_ = __webpack_require__(228);
 
 var tooltip_component = normalizeComponent(
   tooltip_tooltipvue_type_script_lang_js_,
-  tooltipvue_type_template_id_06e65b4f_render,
-  tooltipvue_type_template_id_06e65b4f_staticRenderFns,
+  tooltipvue_type_template_id_662e4cf7_render,
+  tooltipvue_type_template_id_662e4cf7_staticRenderFns,
   false,
   null,
   null,
@@ -16723,15 +17162,17 @@ 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=0ce1b850&
-var combobox_with_popovervue_type_template_id_0ce1b850_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"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=108db852&
+var combobox_with_popovervue_type_template_id_108db852_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){
 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;
-return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":true,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"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({class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass]},'combobox-loading-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_0ce1b850_staticRenderFns = []
+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_108db852_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&
@@ -16827,6 +17268,13 @@ var combobox_with_popovervue_type_template_id_0ce1b850_staticRenderFns = []
 //
 //
 //
+//
+//
+//
+//
+//
+//
+
 
 
 
@@ -16836,7 +17284,8 @@ var combobox_with_popovervue_type_template_id_0ce1b850_staticRenderFns = []
   components: {
     DtCombobox: combobox,
     DtPopover: popover,
-    ComboboxLoadingList: combobox_loading_list
+    ComboboxLoadingList: combobox_loading_list,
+    ComboboxEmptyList: combobox_empty_list
   },
   props: {
     /**
@@ -16952,6 +17401,14 @@ var combobox_with_popovervue_type_template_id_0ce1b850_staticRenderFns = []
       default: () => [0, 4]
     },
 
+    /**
+     * If the popover sticks to the input.
+     */
+    popoverSticky: {
+      type: [Boolean, String],
+      default: false
+    },
+
     /**
      * Displays the list when the combobox is focused, before the user has typed anything.
      * When this is enabled the list will not close after selection.
@@ -16967,6 +17424,14 @@ var combobox_with_popovervue_type_template_id_0ce1b850_staticRenderFns = []
     loading: {
       type: Boolean,
       default: false
+    },
+
+    /**
+     * Message to show when the list is empty
+     */
+    emptyStateMessage: {
+      type: String,
+      default: ''
     }
   },
   emits: ['select', 'escape', 'highlight', 'opened'],
@@ -17007,13 +17472,7 @@ var combobox_with_popovervue_type_template_id_0ce1b850_staticRenderFns = []
 
   },
   methods: {
-    async handleDisplayList(value) {
-      if (this.isListShown) {
-        // After the list is updated, hightlight the first item
-        await this.$nextTick();
-        this.$refs.combobox.setInitialHighlightIndex();
-      }
-
+    handleDisplayList(value) {
       if (!this.hasSuggestionList) {
         if (value) {
           // Displays the list after the user has typed anything
@@ -17107,8 +17566,8 @@ var combobox_with_popovervue_type_template_id_0ce1b850_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_0ce1b850_render,
-  combobox_with_popovervue_type_template_id_0ce1b850_staticRenderFns,
+  combobox_with_popovervue_type_template_id_108db852_render,
+  combobox_with_popovervue_type_template_id_108db852_staticRenderFns,
   false,
   null,
   null,
@@ -17119,11 +17578,11 @@ var combobox_with_popover_component = normalizeComponent(
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/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_multi_select/combobox_multi_select.vue?vue&type=template&id=907d2f60&
-var combobox_multi_selectvue_type_template_id_907d2f60_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},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_multi_select/combobox_multi_select.vue?vue&type=template&id=50e5c78d&
+var combobox_multi_selectvue_type_template_id_50e5c78d_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var onInput = ref.onInput;
 return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,staticClass:"d-mt4 d-mx2 d-zi-base1",attrs:{"close-button-props":{ ariaLabel: 'close' },"size":_vm.size},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1 d-mb4",attrs:{"label":_vm.label,"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list"},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
-var combobox_multi_selectvue_type_template_id_907d2f60_staticRenderFns = []
+var combobox_multi_selectvue_type_template_id_50e5c78d_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -17558,7 +18017,6 @@ const MULTI_SELECT_SIZES = {
     var _this$resizeWindowObs;
 
     (_this$resizeWindowObs = this.resizeWindowObserver) === null || _this$resizeWindowObs === void 0 ? void 0 : _this$resizeWindowObs.unobserve(document.body);
-    console.log('Combobox Multi Select: Unobserve window resize before destory');
   },
 
   methods: {
@@ -17760,8 +18218,8 @@ const MULTI_SELECT_SIZES = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_907d2f60_render,
-  combobox_multi_selectvue_type_template_id_907d2f60_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_50e5c78d_render,
+  combobox_multi_selectvue_type_template_id_50e5c78d_staticRenderFns,
   false,
   null,
   null,
@@ -18119,6 +18577,7 @@ var top_banner_info_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes