@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue3/lib/pagination.cjs

@@ -8,7 +8,7 @@ require("../common/utils.cjs");
 require("../common/constants.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 const _sfc_main = {
   name: "DtPagination",
@@ -139,55 +139,67 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("nav", {
     "aria-label": $props.ariaLabel,
     class: "d-pagination"
-  }, [vue.createVNode(_component_dt_button, {
-    class: vue.normalizeClass(["d-pagination__button", $options.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
-    "data-qa": "dt-pagination-prev",
-    "aria-label": $props.prevAriaLabel,
-    kind: $options.isFirstPage ? "default" : "muted",
-    importance: $options.isFirstPage ? "primary" : "clear",
-    disabled: $options.isFirstPage,
-    onClick: _cache[0] || (_cache[0] = ($event) => $options.changePage($data.currentPage - 1))
-  }, {
-    icon: vue.withCtx(() => [vue.createVNode(_component_dt_icon, {
-      name: "chevron-left",
-      size: "300"
-    })]),
-    _: 1
-  }, 8, ["aria-label", "kind", "importance", "disabled", "class"]), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.pages, (page, index) => {
-    return vue.openBlock(), vue.createElementBlock("div", {
-      key: `page-${page}-${index}`,
-      class: vue.normalizeClass({
-        "d-pagination__separator": isNaN(Number(page))
-      })
-    }, [isNaN(Number(page)) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [vue.createVNode(_component_dt_icon, {
-      name: "more-horizontal",
-      size: "300"
-    })])) : (vue.openBlock(), vue.createBlock(_component_dt_button, {
-      key: 1,
-      "aria-label": $props.pageNumberAriaLabel(page),
-      kind: $data.currentPage === page ? "default" : "muted",
-      importance: $data.currentPage === page ? "primary" : "clear",
-      "label-class": "",
-      onClick: ($event) => $options.changePage(page)
+  }, [
+    vue.createVNode(_component_dt_button, {
+      class: vue.normalizeClass(["d-pagination__button", $options.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
+      "data-qa": "dt-pagination-prev",
+      "aria-label": $props.prevAriaLabel,
+      kind: $options.isFirstPage ? "default" : "muted",
+      importance: $options.isFirstPage ? "primary" : "clear",
+      disabled: $options.isFirstPage,
+      onClick: _cache[0] || (_cache[0] = ($event) => $options.changePage($data.currentPage - 1))
     }, {
-      default: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(page), 1)]),
-      _: 2
-    }, 1032, ["aria-label", "kind", "importance", "onClick"]))], 2);
-  }), 128)), vue.createVNode(_component_dt_button, {
-    class: vue.normalizeClass(["d-pagination__button", $options.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
-    "data-qa": "dt-pagination-next",
-    "aria-label": $props.nextAriaLabel,
-    disabled: $options.isLastPage,
-    kind: "muted",
-    importance: $options.isLastPage ? "primary" : "clear",
-    onClick: _cache[1] || (_cache[1] = ($event) => $options.changePage($data.currentPage + 1))
-  }, {
-    icon: vue.withCtx(() => [vue.createVNode(_component_dt_icon, {
-      name: "chevron-right",
-      size: "300"
-    })]),
-    _: 1
-  }, 8, ["aria-label", "disabled", "importance", "class"])], 8, _hoisted_1);
+      icon: vue.withCtx(() => [
+        vue.createVNode(_component_dt_icon, {
+          name: "chevron-left",
+          size: "300"
+        })
+      ]),
+      _: 1
+    }, 8, ["aria-label", "kind", "importance", "disabled", "class"]),
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.pages, (page, index) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        key: `page-${page}-${index}`,
+        class: vue.normalizeClass({ "d-pagination__separator": isNaN(Number(page)) })
+      }, [
+        isNaN(Number(page)) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.createVNode(_component_dt_icon, {
+            name: "more-horizontal",
+            size: "300"
+          })
+        ])) : (vue.openBlock(), vue.createBlock(_component_dt_button, {
+          key: 1,
+          "aria-label": $props.pageNumberAriaLabel(page),
+          kind: $data.currentPage === page ? "default" : "muted",
+          importance: $data.currentPage === page ? "primary" : "clear",
+          "label-class": "",
+          onClick: ($event) => $options.changePage(page)
+        }, {
+          default: vue.withCtx(() => [
+            vue.createTextVNode(vue.toDisplayString(page), 1)
+          ]),
+          _: 2
+        }, 1032, ["aria-label", "kind", "importance", "onClick"]))
+      ], 2);
+    }), 128)),
+    vue.createVNode(_component_dt_button, {
+      class: vue.normalizeClass(["d-pagination__button", $options.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
+      "data-qa": "dt-pagination-next",
+      "aria-label": $props.nextAriaLabel,
+      disabled: $options.isLastPage,
+      kind: "muted",
+      importance: $options.isLastPage ? "primary" : "clear",
+      onClick: _cache[1] || (_cache[1] = ($event) => $options.changePage($data.currentPage + 1))
+    }, {
+      icon: vue.withCtx(() => [
+        vue.createVNode(_component_dt_icon, {
+          name: "chevron-right",
+          size: "300"
+        })
+      ]),
+      _: 1
+    }, 8, ["aria-label", "disabled", "importance", "class"])
+  ], 8, _hoisted_1);
 }
 const pagination = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtPagination = pagination;

package/dist/vue3/lib/pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.cjs","sources":["../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      :kind=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-left\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon\n          name=\"more-horizontal\"\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <!-- eslint-enable vue/no-bare-strings-in-template -->\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      :importance=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-right\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","components","DtButton","DtIcon","props","ariaLabel","type","String","required","totalPages","Number","prevAriaLabel","nextAriaLabel","pageNumberAriaLabel","Function","activePage","default","maxVisible","emits","data","currentPage","computed","isFirstPage","isLastPage","pages","range","start","end","total","centerIndex","Math","floor","left","right","methods","from","to","i","push","changePage","page","$emit","class","_createElementBlock","$props","_createVNode","_component_dt_button","_normalizeClass","$options","kind","importance","disabled","onClick","_cache","$event","$data","icon","_component_dt_icon","size","_openBlock","_Fragment","_renderList","index","key","isNaN","_hoisted_2","_createBlock"],"mappings":"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"}
+{"version":3,"file":"pagination.cjs","sources":["../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      :kind=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-left\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon\n          name=\"more-horizontal\"\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <!-- eslint-enable vue/no-bare-strings-in-template -->\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      :importance=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-right\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtIcon","_createElementBlock","_createVNode","_normalizeClass","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":"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"}

package/dist/vue3/lib/pagination.js

@@ -6,7 +6,7 @@ import "../common/utils.js";
 import "../common/constants.js";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-gIQj4mf7.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 const _sfc_main = {
   name: "DtPagination",
@@ -137,55 +137,67 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("nav", {
     "aria-label": $props.ariaLabel,
     class: "d-pagination"
-  }, [createVNode(_component_dt_button, {
-    class: normalizeClass(["d-pagination__button", $options.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
-    "data-qa": "dt-pagination-prev",
-    "aria-label": $props.prevAriaLabel,
-    kind: $options.isFirstPage ? "default" : "muted",
-    importance: $options.isFirstPage ? "primary" : "clear",
-    disabled: $options.isFirstPage,
-    onClick: _cache[0] || (_cache[0] = ($event) => $options.changePage($data.currentPage - 1))
-  }, {
-    icon: withCtx(() => [createVNode(_component_dt_icon, {
-      name: "chevron-left",
-      size: "300"
-    })]),
-    _: 1
-  }, 8, ["aria-label", "kind", "importance", "disabled", "class"]), (openBlock(true), createElementBlock(Fragment, null, renderList($options.pages, (page, index) => {
-    return openBlock(), createElementBlock("div", {
-      key: `page-${page}-${index}`,
-      class: normalizeClass({
-        "d-pagination__separator": isNaN(Number(page))
-      })
-    }, [isNaN(Number(page)) ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(_component_dt_icon, {
-      name: "more-horizontal",
-      size: "300"
-    })])) : (openBlock(), createBlock(_component_dt_button, {
-      key: 1,
-      "aria-label": $props.pageNumberAriaLabel(page),
-      kind: $data.currentPage === page ? "default" : "muted",
-      importance: $data.currentPage === page ? "primary" : "clear",
-      "label-class": "",
-      onClick: ($event) => $options.changePage(page)
+  }, [
+    createVNode(_component_dt_button, {
+      class: normalizeClass(["d-pagination__button", $options.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
+      "data-qa": "dt-pagination-prev",
+      "aria-label": $props.prevAriaLabel,
+      kind: $options.isFirstPage ? "default" : "muted",
+      importance: $options.isFirstPage ? "primary" : "clear",
+      disabled: $options.isFirstPage,
+      onClick: _cache[0] || (_cache[0] = ($event) => $options.changePage($data.currentPage - 1))
     }, {
-      default: withCtx(() => [createTextVNode(toDisplayString(page), 1)]),
-      _: 2
-    }, 1032, ["aria-label", "kind", "importance", "onClick"]))], 2);
-  }), 128)), createVNode(_component_dt_button, {
-    class: normalizeClass(["d-pagination__button", $options.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
-    "data-qa": "dt-pagination-next",
-    "aria-label": $props.nextAriaLabel,
-    disabled: $options.isLastPage,
-    kind: "muted",
-    importance: $options.isLastPage ? "primary" : "clear",
-    onClick: _cache[1] || (_cache[1] = ($event) => $options.changePage($data.currentPage + 1))
-  }, {
-    icon: withCtx(() => [createVNode(_component_dt_icon, {
-      name: "chevron-right",
-      size: "300"
-    })]),
-    _: 1
-  }, 8, ["aria-label", "disabled", "importance", "class"])], 8, _hoisted_1);
+      icon: withCtx(() => [
+        createVNode(_component_dt_icon, {
+          name: "chevron-left",
+          size: "300"
+        })
+      ]),
+      _: 1
+    }, 8, ["aria-label", "kind", "importance", "disabled", "class"]),
+    (openBlock(true), createElementBlock(Fragment, null, renderList($options.pages, (page, index) => {
+      return openBlock(), createElementBlock("div", {
+        key: `page-${page}-${index}`,
+        class: normalizeClass({ "d-pagination__separator": isNaN(Number(page)) })
+      }, [
+        isNaN(Number(page)) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(_component_dt_icon, {
+            name: "more-horizontal",
+            size: "300"
+          })
+        ])) : (openBlock(), createBlock(_component_dt_button, {
+          key: 1,
+          "aria-label": $props.pageNumberAriaLabel(page),
+          kind: $data.currentPage === page ? "default" : "muted",
+          importance: $data.currentPage === page ? "primary" : "clear",
+          "label-class": "",
+          onClick: ($event) => $options.changePage(page)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(page), 1)
+          ]),
+          _: 2
+        }, 1032, ["aria-label", "kind", "importance", "onClick"]))
+      ], 2);
+    }), 128)),
+    createVNode(_component_dt_button, {
+      class: normalizeClass(["d-pagination__button", $options.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
+      "data-qa": "dt-pagination-next",
+      "aria-label": $props.nextAriaLabel,
+      disabled: $options.isLastPage,
+      kind: "muted",
+      importance: $options.isLastPage ? "primary" : "clear",
+      onClick: _cache[1] || (_cache[1] = ($event) => $options.changePage($data.currentPage + 1))
+    }, {
+      icon: withCtx(() => [
+        createVNode(_component_dt_icon, {
+          name: "chevron-right",
+          size: "300"
+        })
+      ]),
+      _: 1
+    }, 8, ["aria-label", "disabled", "importance", "class"])
+  ], 8, _hoisted_1);
 }
 const pagination = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/vue3/lib/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      :kind=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-left\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon\n          name=\"more-horizontal\"\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <!-- eslint-enable vue/no-bare-strings-in-template -->\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      :importance=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-right\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","components","DtButton","DtIcon","props","ariaLabel","type","String","required","totalPages","Number","prevAriaLabel","nextAriaLabel","pageNumberAriaLabel","Function","activePage","default","maxVisible","emits","data","currentPage","computed","isFirstPage","isLastPage","pages","range","start","end","total","centerIndex","Math","floor","left","right","methods","from","to","i","push","changePage","page","$emit","class","_createElementBlock","$props","_createVNode","_component_dt_button","_normalizeClass","$options","kind","importance","disabled","onClick","_cache","$event","$data","icon","_component_dt_icon","size","_openBlock","_Fragment","_renderList","index","key","isNaN","_hoisted_2","_createBlock"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      :kind=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-left\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon\n          name=\"more-horizontal\"\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <!-- eslint-enable vue/no-bare-strings-in-template -->\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      :importance=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-right\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_createVNode","_normalizeClass","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":"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"}