@dialpad/dialtone-vue 3.10.0 → 3.11.0

package/dist/dialtone-vue.common.js

@@ -97,7 +97,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-section[tabindex=\"-1\"]:focu
 
 /***/ }),
 
-/***/ 515:
+/***/ 222:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -457,19 +457,19 @@ var update = add("69c9bdad", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 683:
+/***/ 888:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(515);
+var content = __webpack_require__(222);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("85e99f52", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("e3b11816", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1133,6 +1133,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),
@@ -2924,13 +2925,13 @@ const button_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(butto
 ;// CONCATENATED MODULE: ./components/button_group/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=template&id=83040a60
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=template&id=3a8030f9
 
-const comboboxvue_type_template_id_83040a60_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
-const comboboxvue_type_template_id_83040a60_hoisted_2 = {
+const comboboxvue_type_template_id_3a8030f9_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
+const comboboxvue_type_template_id_3a8030f9_hoisted_2 = {
   "data-qa": "dt-combobox-input-wrapper"
 };
-function comboboxvue_type_template_id_83040a60_render(_ctx, _cache, $props, $setup, $data, $options) {
+function comboboxvue_type_template_id_3a8030f9_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
@@ -2942,7 +2943,7 @@ function comboboxvue_type_template_id_83040a60_render(_ctx, _cache, $props, $set
     "aria-owns": $props.listId,
     "aria-haspopup": "listbox",
     onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEscapeKey'), ["stop"]), ["esc"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEnterKey'), ["exact"]), ["enter"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onUpKey'), ["stop", "prevent"]), ["up"])), _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onDownKey'), ["stop", "prevent"]), ["down"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKey'), ["stop", "prevent"]), ["home"])), _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEndKey'), ["stop", "prevent"]), ["end"]))]
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_83040a60_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_3a8030f9_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
     inputProps: $options.inputProps
   })]), $props.showList ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
@@ -2970,9 +2971,9 @@ function comboboxvue_type_template_id_83040a60_render(_ctx, _cache, $props, $set
     clearHighlightIndex: $options.clearHighlightIndex,
     isLoading: $data.isLoading,
     isListEmpty: $data.isListEmpty
-  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_83040a60_hoisted_1);
+  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_3a8030f9_hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=83040a60
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=3a8030f9
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
 /* harmony default export */ const dom = ({
@@ -4506,9 +4507,9 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
     },
 
     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() {
@@ -4578,7 +4579,7 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
 
 
 ;
-const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_83040a60_render]])
+const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_3a8030f9_render]])
 
 /* harmony default export */ const combobox = (combobox_exports_);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
@@ -4638,11 +4639,11 @@ function dropdownvue_type_template_id_b0e1f8ba_render(_ctx, _cache, $props, $set
 }
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=b0e1f8ba
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=582f9c98
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=fee82b00
 
-const popovervue_type_template_id_582f9c98_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_582f9c98_hoisted_2 = ["id"];
-function popovervue_type_template_id_582f9c98_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_fee82b00_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_fee82b00_hoisted_2 = ["id"];
+function popovervue_type_template_id_fee82b00_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_popover_header_footer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("popover-header-footer");
 
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
@@ -4654,13 +4655,13 @@ function popovervue_type_template_id_582f9c98_render(_ctx, _cache, $props, $setu
     class: "d-modal--transparent",
     "aria-hidden": $props.modal && $data.isOpen ? 'false' : 'true',
     onClick: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 8, popovervue_type_template_id_582f9c98_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, null, 8, popovervue_type_template_id_fee82b00_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
     ref: "popover",
-    class: ['d-popover', {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover', {
       'd-popover__anchor--modal-opened': $props.modal && $data.isOpen
-    }],
+    }]),
     "data-qa": "dt-popover-container"
-  }, _ctx.$attrs), {
+  }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
       id: !$props.ariaLabelledby && $options.labelledBy,
       ref: "anchor",
@@ -4683,7 +4684,7 @@ function popovervue_type_template_id_582f9c98_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_582f9c98_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    })], 40, popovervue_type_template_id_fee82b00_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, {
       id: $props.id,
       ref: "content",
       role: $props.role,
@@ -4695,19 +4696,19 @@ function popovervue_type_template_id_582f9c98_render(_ctx, _cache, $props, $setu
       transition: $props.transition,
       show: $data.isOpen,
       appear: "",
-      class: ['d-popover__dialog', {
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover__dialog', {
         'd-popover__dialog--modal': $props.modal
-      }, $props.dialogClass],
-      style: {
+      }, $props.dialogClass]),
+      style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
         'max-height': $props.maxHeight,
         'max-width': $props.maxWidth
-      },
-      tabindex: $props.contentTabindex
-    }, _ctx.$attrs, {
+      }),
+      css: _ctx.$attrs.css,
+      tabindex: $props.contentTabindex,
       onKeydownCapture: $options.onKeydown,
       onAfterLeave: $options.onLeaveTransitionComplete,
       onAfterEnter: $options.onEnterTransitionComplete
-    }), {
+    }, {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [_ctx.$slots.headerContent || $props.showCloseButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_popover_header_footer, {
         key: 0,
         ref: "popover__header",
@@ -4741,11 +4742,11 @@ function popovervue_type_template_id_582f9c98_render(_ctx, _cache, $props, $setu
         _: 3
       }, 8, ["class", "content-class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
       _: 3
-    }, 16, ["id", "role", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "class", "style", "tabindex", "onKeydownCapture", "onAfterLeave", "onAfterEnter"])]),
+    }, 8, ["id", "role", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "class", "style", "css", "tabindex", "onKeydownCapture", "onAfterLeave", "onAfterEnter"])]),
     _: 3
-  }, 16, ["class"]))]);
+  }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=582f9c98
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=fee82b00
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -9214,7 +9215,10 @@ 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: [{
@@ -9226,6 +9230,12 @@ const getPopperOptions = function () {
     }, {
       name: 'hide',
       enabled: hasHideModifierEnabled
+    }, {
+      name: 'preventOverflow',
+      options: {
+        altAxis: !tether,
+        tether
+      }
     }, getArrowDetected(_ref => {
       let {
         state
@@ -9475,7 +9485,6 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     PopoverHeaderFooter: popover_header_footer
   },
   mixins: [modal],
-  inheritAttrs: false,
   props: {
     /**
      * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
@@ -9650,6 +9659,15 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       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
@@ -9788,12 +9806,15 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       });
     },
 
-    fallbackPlacements(fallbackPlacements) {
+    fallbackPlacements() {
       this.tip.setProps({
-        popperOptions: getPopperOptions({
-          fallbackPlacements,
-          hasHideModifierEnabled: true
-        })
+        popperOptions: this.popperOptions()
+      });
+    },
+
+    tether() {
+      this.tip.setProps({
+        popperOptions: this.popperOptions()
       });
     },
 
@@ -9837,10 +9858,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     }
 
     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,
@@ -9875,6 +9893,14 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
    *     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');
@@ -10057,9 +10083,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 });
 ;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=582f9c98&lang=less
-var popovervue_type_style_index_0_id_582f9c98_lang_less = __webpack_require__(683);
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=582f9c98&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=fee82b00&lang=less
+var popovervue_type_style_index_0_id_fee82b00_lang_less = __webpack_require__(888);
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=fee82b00&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -10069,7 +10095,7 @@ var popovervue_type_style_index_0_id_582f9c98_lang_less = __webpack_require__(68
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_582f9c98_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_fee82b00_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -12761,6 +12787,265 @@ const notice_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(noticevue_t
 ;// CONCATENATED MODULE: ./components/notice/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/pagination/pagination.vue?vue&type=template&id=679081ce
+
+const paginationvue_type_template_id_679081ce_hoisted_1 = ["aria-label"];
+const paginationvue_type_template_id_679081ce_hoisted_2 = {
+  key: 0,
+  "data-qa": "dt-pagination-separator",
+  class: "d-h32 d-w32 d-d-flex d-ai-center d-jc-center"
+};
+function paginationvue_type_template_id_679081ce_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_icon_chevron_left = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-chevron-left");
+
+  const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
+
+  const _component_icon_chevron_right = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-chevron-right");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("nav", {
+    "aria-label": $props.ariaLabel,
+    class: "d-d-flex d-fd-row d-gg2 d-ai-center"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+    class: "d-h32 d-w32",
+    "data-qa": "dt-pagination-prev",
+    "aria-label": $props.prevAriaLabel,
+    importance: $options.isFirstPage ? 'primary' : 'clear',
+    disabled: $options.isFirstPage,
+    onClick: _cache[0] || (_cache[0] = $event => $options.changePage($data.currentPage - 1))
+  }, {
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_chevron_left)]),
+    _: 1
+  }, 8, ["aria-label", "importance", "disabled"]), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($options.pages, (page, index) => {
+    return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+      key: "page-".concat(page, "-").concat(index)
+    }, [isNaN(Number(page)) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", paginationvue_type_template_id_679081ce_hoisted_2, " … ")) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
+      key: 1,
+      "aria-label": $props.pageNumberAriaLabel(page),
+      importance: $data.currentPage === page ? 'primary' : 'clear',
+      class: "d-h32 d-w32",
+      "label-class": "d-fs14",
+      onClick: $event => $options.changePage(page)
+    }, {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(page), 1)]),
+      _: 2
+    }, 1032, ["aria-label", "importance", "onClick"]))]);
+  }), 128)), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+    class: "d-h32 d-w32",
+    "data-qa": "dt-pagination-next",
+    "aria-label": $props.nextAriaLabel,
+    disabled: $options.isLastPage,
+    importance: $options.isLastPage ? 'primary' : 'clear',
+    onClick: _cache[1] || (_cache[1] = $event => $options.changePage($data.currentPage + 1))
+  }, {
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_chevron_right)]),
+    _: 1
+  }, 8, ["aria-label", "disabled", "importance"])], 8, paginationvue_type_template_id_679081ce_hoisted_1);
+}
+;// CONCATENATED MODULE: ./components/pagination/pagination.vue?vue&type=template&id=679081ce
+
+;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronLeft.vue?vue&type=template&id=bdbc37f6
+
+
+const IconChevronLeftvue_type_template_id_bdbc37f6_hoisted_1 = {
+  "aria-hidden": "true",
+  "aria-label": "Chevron Left",
+  class: "d-svg d-svg--system d-svg__chevronLeft",
+  viewBox: "0 0 24 24"
+}
+const IconChevronLeftvue_type_template_id_bdbc37f6_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z" }, null, -1)
+const IconChevronLeftvue_type_template_id_bdbc37f6_hoisted_3 = [
+  IconChevronLeftvue_type_template_id_bdbc37f6_hoisted_2
+]
+
+function IconChevronLeftvue_type_template_id_bdbc37f6_render(_ctx, _cache) {
+  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconChevronLeftvue_type_template_id_bdbc37f6_hoisted_1, IconChevronLeftvue_type_template_id_bdbc37f6_hoisted_3))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronLeft.vue?vue&type=template&id=bdbc37f6
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronLeft.vue
+
+const IconChevronLeft_script = {}
+
+;
+const IconChevronLeft_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconChevronLeft_script, [['render',IconChevronLeftvue_type_template_id_bdbc37f6_render]])
+
+/* harmony default export */ const IconChevronLeft = (IconChevronLeft_exports_);
+;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronRight.vue?vue&type=template&id=c72b3d10
+
+
+const IconChevronRightvue_type_template_id_c72b3d10_hoisted_1 = {
+  "aria-hidden": "true",
+  "aria-label": "Chevron Right",
+  class: "d-svg d-svg--system d-svg__chevronRight",
+  viewBox: "0 0 24 24"
+}
+const IconChevronRightvue_type_template_id_c72b3d10_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z" }, null, -1)
+const IconChevronRightvue_type_template_id_c72b3d10_hoisted_3 = [
+  IconChevronRightvue_type_template_id_c72b3d10_hoisted_2
+]
+
+function IconChevronRightvue_type_template_id_c72b3d10_render(_ctx, _cache) {
+  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconChevronRightvue_type_template_id_c72b3d10_hoisted_1, IconChevronRightvue_type_template_id_c72b3d10_hoisted_3))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronRight.vue?vue&type=template&id=c72b3d10
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronRight.vue
+
+const IconChevronRight_script = {}
+
+;
+const IconChevronRight_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconChevronRight_script, [['render',IconChevronRightvue_type_template_id_c72b3d10_render]])
+
+/* harmony default export */ const IconChevronRight = (IconChevronRight_exports_);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./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
+ 
+;// CONCATENATED MODULE: ./components/pagination/pagination.vue
+
+
+
+
+;
+const pagination_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(paginationvue_type_script_lang_js, [['render',paginationvue_type_template_id_679081ce_render]])
+
+/* harmony default export */ const pagination = (pagination_exports_);
+;// CONCATENATED MODULE: ./components/pagination/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/radio/radio.vue?vue&type=template&id=36afe768
 
 const radiovue_type_template_id_36afe768_hoisted_1 = {
@@ -16939,6 +17224,7 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
 
 
 
+
 
 
  /// Recipes