@dialpad/dialtone-vue 2.152.0 → 2.153.0

package/dist/lib/pagination.js

@@ -4,7 +4,7 @@ import { DtIcon } from "./icon.js";
 import "vue";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-TdxqLsS2.js";
 import "@dialpad/dialtone-icons/icons.json";
 const _sfc_main = {
   name: "DtPagination",
@@ -125,27 +125,88 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("nav", { staticClass: "d-pagination", attrs: { "aria-label": _vm.ariaLabel } }, [_c("dt-button", { staticClass: "d-pagination__button", class: _vm.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary", attrs: { "data-qa": "dt-pagination-prev", "aria-label": _vm.prevAriaLabel, "kind": _vm.isFirstPage ? "default" : "muted", "importance": _vm.isFirstPage ? "primary" : "clear", "disabled": _vm.isFirstPage }, on: { "click": function($event) {
-    return _vm.changePage(_vm.currentPage - 1);
-  } } }, [_c("template", { slot: "icon" }, [_c("dt-icon", { attrs: { "name": "chevron-left", "size": "300" } })], 1)], 2), _vm._l(_vm.pages, function(page, index) {
-    return _c("div", { key: `page-${page}-${index}`, class: { "d-pagination__separator": isNaN(Number(page)) } }, [isNaN(Number(page)) ? _c("div", { staticClass: "d-pagination__separator-icon", attrs: { "data-qa": "dt-pagination-separator" } }, [_c("dt-icon", { attrs: { "name": "more-horizontal", "size": "300" } })], 1) : _c("dt-button", { attrs: { "aria-label": _vm.pageNumberAriaLabel(page), "kind": _vm.currentPage === page ? "default" : "muted", "importance": _vm.currentPage === page ? "primary" : "clear", "label-class": "" }, on: { "click": function($event) {
-      return _vm.changePage(page);
-    } } }, [_vm._v(" " + _vm._s(page) + " ")])], 1);
-  }), _c("dt-button", { staticClass: "d-pagination__button", class: _vm.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary", attrs: { "data-qa": "dt-pagination-next", "aria-label": _vm.nextAriaLabel, "disabled": _vm.isLastPage, "kind": "muted", "importance": _vm.isLastPage ? "primary" : "clear" }, on: { "click": function($event) {
-    return _vm.changePage(_vm.currentPage + 1);
-  } } }, [_c("template", { slot: "icon" }, [_c("dt-icon", { attrs: { "name": "chevron-right", "size": "300" } })], 1)], 2)], 2);
+  return _c("nav", {
+    staticClass: "d-pagination",
+    attrs: {
+      "aria-label": _vm.ariaLabel
+    }
+  }, [_c("dt-button", {
+    staticClass: "d-pagination__button",
+    class: _vm.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary",
+    attrs: {
+      "data-qa": "dt-pagination-prev",
+      "aria-label": _vm.prevAriaLabel,
+      "kind": _vm.isFirstPage ? "default" : "muted",
+      "importance": _vm.isFirstPage ? "primary" : "clear",
+      "disabled": _vm.isFirstPage
+    },
+    on: {
+      "click": function($event) {
+        return _vm.changePage(_vm.currentPage - 1);
+      }
+    }
+  }, [_c("template", {
+    slot: "icon"
+  }, [_c("dt-icon", {
+    attrs: {
+      "name": "chevron-left",
+      "size": "300"
+    }
+  })], 1)], 2), _vm._l(_vm.pages, function(page, index) {
+    return _c("div", {
+      key: `page-${page}-${index}`,
+      class: {
+        "d-pagination__separator": isNaN(Number(page))
+      }
+    }, [isNaN(Number(page)) ? _c("div", {
+      staticClass: "d-pagination__separator-icon",
+      attrs: {
+        "data-qa": "dt-pagination-separator"
+      }
+    }, [_c("dt-icon", {
+      attrs: {
+        "name": "more-horizontal",
+        "size": "300"
+      }
+    })], 1) : _c("dt-button", {
+      attrs: {
+        "aria-label": _vm.pageNumberAriaLabel(page),
+        "kind": _vm.currentPage === page ? "default" : "muted",
+        "importance": _vm.currentPage === page ? "primary" : "clear",
+        "label-class": ""
+      },
+      on: {
+        "click": function($event) {
+          return _vm.changePage(page);
+        }
+      }
+    }, [_vm._v(" " + _vm._s(page) + " ")])], 1);
+  }), _c("dt-button", {
+    staticClass: "d-pagination__button",
+    class: _vm.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary",
+    attrs: {
+      "data-qa": "dt-pagination-next",
+      "aria-label": _vm.nextAriaLabel,
+      "disabled": _vm.isLastPage,
+      "kind": "muted",
+      "importance": _vm.isLastPage ? "primary" : "clear"
+    },
+    on: {
+      "click": function($event) {
+        return _vm.changePage(_vm.currentPage + 1);
+      }
+    }
+  }, [_c("template", {
+    slot: "icon"
+  }, [_c("dt-icon", {
+    attrs: {
+      "name": "chevron-right",
+      "size": "300"
+    }
+  })], 1)], 2)], 2);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const pagination = __component__.exports;
 export {
   pagination as DtPagination

package/dist/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 slot=\"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 slot=\"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":[],"mappings":";;;;;;;;AA+EA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,aAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,gBAAA,KAAA;AAAA,IACA;AAAA,IAEA,QAAA;AACA,UAAA,KAAA,eAAA,GAAA;AACA,eAAA;MACA;AACA,UAAA,KAAA,cAAA,KAAA,YAAA;AACA,eAAA,KAAA,MAAA,GAAA,KAAA,UAAA;AAAA,MACA;AAEA,YAAA,QAAA,KAAA,aAAA;AACA,YAAA,MAAA,KAAA,aAAA,QAAA;AAEA,UAAA,KAAA,cAAA,OAAA;AACA,eAAA,CAAA,GAAA,KAAA,MAAA,GAAA,KAAA,GAAA,OAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,KAAA,cAAA,KAAA;AACA,eAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAA,KAAA,KAAA,UAAA,CAAA;AAAA,MACA;AAGA,YAAA,QAAA,KAAA,cAAA,IAAA,KAAA,aAAA;AACA,YAAA,cAAA,KAAA,MAAA,QAAA,CAAA;AACA,YAAA,OAAA,KAAA,cAAA;AACA,YAAA,QAAA,KAAA,cAAA;AACA,aAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAA,MAAA,KAAA,GAAA,OAAA,KAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,MAAA,IAAA;AACA,YAAA,QAAA,CAAA;AACA,aAAA,OAAA,IAAA,OAAA;AACA,eAAA,IAAA,MAAA,KAAA,IAAA,KAAA;AACA,cAAA,KAAA,CAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,WAAA,MAAA;AACA,WAAA,cAAA;AACA,WAAA,MAAA,UAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 slot=\"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 slot=\"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"],"mappings":";;;;;;;;AA+EA,MAAAA,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,IACAC;AAAAA,IACAC;AAAAA,EACA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,WAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,YAAA;AAAA,MACAH,MAAAI;AAAAA,MACAF,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAG,eAAA;AAAA,MACAL,MAAAC;AAAAA,MACAC,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAI,eAAA;AAAA,MACAN,MAAAC;AAAAA,MACAC,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAK,qBAAA;AAAA,MACAP,MAAAQ;AAAAA,MACAN,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAO,YAAA;AAAA,MACAT,MAAAI;AAAAA,MACAM,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOAC,YAAA;AAAA,MACAX,MAAAI;AAAAA,MACAM,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAE,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EAAA;AAAA,EAGAC,OAAA;AACA,WAAA;AAAA,MACAC,aAAA,KAAAL;AAAAA;EAEA;AAAA,EAEAM,UAAA;AAAA,IACAC,cAAA;AACA,aAAA,KAAAF,gBAAA;AAAA,IACA;AAAA,IAEAG,aAAA;AACA,aAAA,KAAAH,gBAAA,KAAAX;AAAAA,IACA;AAAA,IAEAe,QAAA;AACA,UAAA,KAAAP,eAAA,GAAA;AACA,eAAA;MACA;AACA,UAAA,KAAAR,cAAA,KAAAQ,YAAA;AACA,eAAA,KAAAQ,MAAA,GAAA,KAAAhB,UAAA;AAAA,MACA;AAEA,YAAAiB,QAAA,KAAAT,aAAA;AACA,YAAAU,MAAA,KAAAlB,aAAAiB,QAAA;AAEA,UAAA,KAAAN,cAAAM,OAAA;AACA,eAAA,CAAA,GAAA,KAAAD,MAAA,GAAAC,KAAA,GAAA,OAAA,KAAAjB,UAAA;AAAA,MACA;AAEA,UAAA,KAAAW,cAAAO,KAAA;AACA,eAAA,CAAA,GAAA,OAAA,GAAA,KAAAF,MAAAE,KAAA,KAAAlB,UAAA,CAAA;AAAA,MACA;AAGA,YAAAmB,QAAA,KAAAX,cAAA,IAAA,KAAAA,aAAA;AACA,YAAAY,cAAAC,KAAAC,MAAAH,QAAA,CAAA;AACA,YAAAI,OAAA,KAAAZ,cAAAS;AACA,YAAAI,QAAA,KAAAb,cAAAS;AACA,aAAA,CAAA,GAAA,OAAA,GAAA,KAAAJ,MAAAO,MAAAC,KAAA,GAAA,OAAA,KAAAxB,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAyB,SAAA;AAAA,IACAT,MAAAU,MAAAC,IAAA;AACA,YAAAX,QAAA,CAAA;AACAU,aAAAA,OAAA,IAAAA,OAAA;AACA,eAAAE,IAAAF,MAAAE,KAAAD,IAAAC,KAAA;AACAZ,cAAAa,KAAAD,CAAA;AAAA,MACA;AACA,aAAAZ;AAAAA,IACA;AAAA,IAEAc,WAAAC,MAAA;AACA,WAAApB,cAAAoB;AACA,WAAAC,MAAA,UAAA,KAAArB,WAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/popover.cjs

@@ -1,20 +1,20 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const popover_constants = require("../chunks/popover_constants-XnGWXaxX.js");
+const popover_constants = require("../chunks/popover_constants-h9MD6WUt.js");
 const common_utils = require("../common/utils.cjs");
 const vueSimplePortal = require("@linusborg/vue-simple-portal");
-const modal = require("../chunks/modal-VgxXAQFP.js");
+const modal = require("../chunks/modal-OaWxzqNt.js");
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
 const lib_button = require("./button.cjs");
 const lib_icon = require("./icon.cjs");
-const sr_only_close_button = require("../chunks/sr_only_close_button-ZaGdAHz7.js");
+const sr_only_close_button = require("../chunks/sr_only_close_button-2Q9Ny1Nc.js");
 const lib_lazyShow = require("./lazy-show.cjs");
 require("tippy.js");
 require("../common/constants.cjs");
 require("vue");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("@dialpad/dialtone-icons/vue2");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-VEA0wI5C.js");
 require("@dialpad/dialtone-icons/icons.json");
 const _sfc_main$1 = {
   name: "PopoverHeaderFooter",
@@ -74,32 +74,55 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { class: {
-    "d-popover__header": _vm.type === "header",
-    "d-popover__footer": _vm.type === "footer"
-  }, attrs: { "data-qa": "dt-popover-header-footer" } }, [_vm.$slots.content ? _c("div", { class: [{
-    "d-popover__header__content": _vm.type === "header",
-    "d-popover__footer__content": _vm.type === "footer"
-  }, _vm.contentClass], attrs: { "data-qa": "dt-popover-header-footer-content" } }, [_vm._t("content")], 2) : _vm._e(), _vm.showCloseButton ? _c("dt-button", _vm._b({ ref: "popover__close-button", class: {
-    "d-popover__header__close-button": _vm.type === "header",
-    "d-popover__footer__close-button": _vm.type === "footer"
-  }, attrs: { "data-qa": "dt-popover-close", "importance": "outlined", "kind": "muted", "circle": "" }, on: { "click": function($event) {
-    return _vm.$emit("close");
-  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon", { attrs: { "name": "close", "size": "300" } })];
-  }, proxy: true }], null, false, 2538694920) }, "dt-button", _vm.closeButtonProps, false)) : _vm._e()], 1);
+  return _c("div", {
+    class: {
+      "d-popover__header": _vm.type === "header",
+      "d-popover__footer": _vm.type === "footer"
+    },
+    attrs: {
+      "data-qa": "dt-popover-header-footer"
+    }
+  }, [_vm.$slots.content ? _c("div", {
+    class: [{
+      "d-popover__header__content": _vm.type === "header",
+      "d-popover__footer__content": _vm.type === "footer"
+    }, _vm.contentClass],
+    attrs: {
+      "data-qa": "dt-popover-header-footer-content"
+    }
+  }, [_vm._t("content")], 2) : _vm._e(), _vm.showCloseButton ? _c("dt-button", _vm._b({
+    ref: "popover__close-button",
+    class: {
+      "d-popover__header__close-button": _vm.type === "header",
+      "d-popover__footer__close-button": _vm.type === "footer"
+    },
+    attrs: {
+      "data-qa": "dt-popover-close",
+      "importance": "outlined",
+      "kind": "muted",
+      "circle": ""
+    },
+    on: {
+      "click": function($event) {
+        return _vm.$emit("close");
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "icon",
+      fn: function() {
+        return [_c("dt-icon", {
+          attrs: {
+            "name": "close",
+            "size": "300"
+          }
+        })];
+      },
+      proxy: true
+    }], null, false, 2538694920)
+  }, "dt-button", _vm.closeButtonProps, false)) : _vm._e()], 1);
 };
 var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main$1,
-  _sfc_render$1,
-  _sfc_staticRenderFns$1,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
 const PopoverHeaderFooter = __component__$1.exports;
 const _sfc_main = {
   name: "DtPopover",
@@ -705,7 +728,9 @@ const _sfc_main = {
           return;
         if (((_b = element.tagName) == null ? void 0 : _b.toLowerCase()) === "body") {
           element.classList.add("d-of-hidden");
-          this.tip.setProps({ offset: this.offset });
+          this.tip.setProps({
+            offset: this.offset
+          });
         } else {
           element.classList.add("d-zi-popover");
         }
@@ -721,7 +746,9 @@ const _sfc_main = {
         return;
       if (((_b = element.tagName) == null ? void 0 : _b.toLowerCase()) === "body") {
         element.classList.remove("d-of-hidden");
-        this.tip.setProps({ offset: this.offset });
+        this.tip.setProps({
+          offset: this.offset
+        });
       } else {
         element.classList.remove("d-zi-popover");
       }
@@ -945,53 +972,145 @@ const _sfc_main = {
 };
 var _sfc_render = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", [_vm.modal && _vm.isOpen ? _c("portal", [_c("div", { staticClass: "d-modal--transparent", attrs: { "aria-hidden": _vm.modal && _vm.isOpen ? "false" : "true" }, on: { "click": function($event) {
-    $event.preventDefault();
-    $event.stopPropagation();
-  } } })]) : _vm._e(), _c(_vm.elementType, _vm._g({ ref: "popover", tag: "component", class: ["d-popover", { "d-popover__anchor--opened": _vm.isOpen }], attrs: { "data-qa": "dt-popover-container" } }, _vm.$listeners), [_c("div", { ref: "anchor", attrs: { "id": !_vm.ariaLabelledby && _vm.labelledBy, "data-qa": _vm.$attrs["data-qa"] ? `${_vm.$attrs["data-qa"]}-anchor` : "dt-popover-anchor", "tabindex": _vm.openOnContext ? 0 : void 0 }, on: { "!click": function($event) {
-    return _vm.defaultToggleOpen.apply(null, arguments);
-  }, "contextmenu": _vm.onContext, "keydown": [function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
-      return null;
-    $event.preventDefault();
-    return _vm.onArrowKeyPress.apply(null, arguments);
-  }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
-      return null;
-    $event.preventDefault();
-    return _vm.onArrowKeyPress.apply(null, arguments);
-  }], "!keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "escape", void 0, $event.key, void 0))
-      return null;
-    return _vm.closePopover.apply(null, arguments);
-  }, "mouseenter": _vm.onEnterAnchor, "mouseleave": _vm.onLeaveAnchor } }, [_vm._t("anchor", null, { "attrs": {
-    "aria-expanded": _vm.isOpen.toString(),
-    "aria-controls": _vm.id,
-    "aria-haspopup": _vm.role
-  } })], 2), _c("dt-lazy-show", _vm._g({ ref: "content", class: ["d-popover__dialog", { "d-popover__dialog--modal": _vm.modal }, _vm.dialogClass], style: {
-    "max-height": _vm.calculatedMaxHeight,
-    "max-width": _vm.maxWidth
-  }, attrs: { "id": _vm.id, "role": _vm.role, "data-qa": _vm.$attrs["data-qa"] ? `${_vm.$attrs["data-qa"]}__dialog` : "dt-popover", "aria-hidden": `${!_vm.isOpen}`, "aria-labelledby": _vm.labelledBy, "aria-label": _vm.ariaLabel, "aria-modal": `${!_vm.modal}`, "transition": _vm.transition, "show": _vm.isOpen, "tabindex": _vm.contentTabindex, "appear": "" }, on: { "mouseenter": _vm.onEnterContent, "mouseleave": _vm.onLeaveContent } }, _vm.popoverListeners), [_vm.$slots.headerContent || _vm.showCloseButton ? _c("popover-header-footer", { ref: "popover__header", class: _vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding], attrs: { "content-class": _vm.headerClass, "type": "header", "show-close-button": _vm.showCloseButton, "close-button-props": _vm.closeButtonProps }, on: { "close": _vm.closePopover }, scopedSlots: _vm._u([{ key: "content", fn: function() {
-    return [_vm._t("headerContent", null, { "close": _vm.closePopover })];
-  }, proxy: true }], null, true) }) : _vm._e(), _c("div", { ref: "popover__content", class: [
-    "d-popover__content",
-    _vm.POPOVER_PADDING_CLASSES[_vm.padding],
-    _vm.contentClass
-  ], attrs: { "data-qa": _vm.$attrs["data-qa"] ? `${_vm.$attrs["data-qa"]}-content` : "dt-popover-content" } }, [_vm._t("content", null, { "close": _vm.closePopover })], 2), _vm.$slots.footerContent ? _c("popover-header-footer", { ref: "popover__footer", class: _vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding], attrs: { "type": "footer", "content-class": _vm.footerClass }, scopedSlots: _vm._u([{ key: "content", fn: function() {
-    return [_vm._t("footerContent", null, { "close": _vm.closePopover })];
-  }, proxy: true }], null, true) }) : _vm._e(), _vm.showVisuallyHiddenClose ? _c("sr-only-close-button", { attrs: { "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel }, on: { "close": _vm.closePopover } }) : _vm._e()], 1)], 1)], 1);
+  return _c("div", [_vm.modal && _vm.isOpen ? _c("portal", [_c("div", {
+    staticClass: "d-modal--transparent",
+    attrs: {
+      "aria-hidden": _vm.modal && _vm.isOpen ? "false" : "true"
+    },
+    on: {
+      "click": function($event) {
+        $event.preventDefault();
+        $event.stopPropagation();
+      }
+    }
+  })]) : _vm._e(), _c(_vm.elementType, _vm._g({
+    ref: "popover",
+    tag: "component",
+    class: ["d-popover", {
+      "d-popover__anchor--opened": _vm.isOpen
+    }],
+    attrs: {
+      "data-qa": "dt-popover-container"
+    }
+  }, _vm.$listeners), [_c("div", {
+    ref: "anchor",
+    attrs: {
+      "id": !_vm.ariaLabelledby && _vm.labelledBy,
+      "data-qa": _vm.$attrs["data-qa"] ? `${_vm.$attrs["data-qa"]}-anchor` : "dt-popover-anchor",
+      "tabindex": _vm.openOnContext ? 0 : void 0
+    },
+    on: {
+      "!click": function($event) {
+        return _vm.defaultToggleOpen.apply(null, arguments);
+      },
+      "contextmenu": _vm.onContext,
+      "keydown": [function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
+          return null;
+        $event.preventDefault();
+        return _vm.onArrowKeyPress.apply(null, arguments);
+      }, function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
+          return null;
+        $event.preventDefault();
+        return _vm.onArrowKeyPress.apply(null, arguments);
+      }],
+      "!keydown": function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "escape", void 0, $event.key, void 0))
+          return null;
+        return _vm.closePopover.apply(null, arguments);
+      },
+      "mouseenter": _vm.onEnterAnchor,
+      "mouseleave": _vm.onLeaveAnchor
+    }
+  }, [_vm._t("anchor", null, {
+    "attrs": {
+      "aria-expanded": _vm.isOpen.toString(),
+      "aria-controls": _vm.id,
+      "aria-haspopup": _vm.role
+    }
+  })], 2), _c("dt-lazy-show", _vm._g({
+    ref: "content",
+    class: ["d-popover__dialog", {
+      "d-popover__dialog--modal": _vm.modal
+    }, _vm.dialogClass],
+    style: {
+      "max-height": _vm.calculatedMaxHeight,
+      "max-width": _vm.maxWidth
+    },
+    attrs: {
+      "id": _vm.id,
+      "role": _vm.role,
+      "data-qa": _vm.$attrs["data-qa"] ? `${_vm.$attrs["data-qa"]}__dialog` : "dt-popover",
+      "aria-hidden": `${!_vm.isOpen}`,
+      "aria-labelledby": _vm.labelledBy,
+      "aria-label": _vm.ariaLabel,
+      "aria-modal": `${!_vm.modal}`,
+      "transition": _vm.transition,
+      "show": _vm.isOpen,
+      "tabindex": _vm.contentTabindex,
+      "appear": ""
+    },
+    on: {
+      "mouseenter": _vm.onEnterContent,
+      "mouseleave": _vm.onLeaveContent
+    }
+  }, _vm.popoverListeners), [_vm.$slots.headerContent || _vm.showCloseButton ? _c("popover-header-footer", {
+    ref: "popover__header",
+    class: _vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],
+    attrs: {
+      "content-class": _vm.headerClass,
+      "type": "header",
+      "show-close-button": _vm.showCloseButton,
+      "close-button-props": _vm.closeButtonProps
+    },
+    on: {
+      "close": _vm.closePopover
+    },
+    scopedSlots: _vm._u([{
+      key: "content",
+      fn: function() {
+        return [_vm._t("headerContent", null, {
+          "close": _vm.closePopover
+        })];
+      },
+      proxy: true
+    }], null, true)
+  }) : _vm._e(), _c("div", {
+    ref: "popover__content",
+    class: ["d-popover__content", _vm.POPOVER_PADDING_CLASSES[_vm.padding], _vm.contentClass],
+    attrs: {
+      "data-qa": _vm.$attrs["data-qa"] ? `${_vm.$attrs["data-qa"]}-content` : "dt-popover-content"
+    }
+  }, [_vm._t("content", null, {
+    "close": _vm.closePopover
+  })], 2), _vm.$slots.footerContent ? _c("popover-header-footer", {
+    ref: "popover__footer",
+    class: _vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],
+    attrs: {
+      "type": "footer",
+      "content-class": _vm.footerClass
+    },
+    scopedSlots: _vm._u([{
+      key: "content",
+      fn: function() {
+        return [_vm._t("footerContent", null, {
+          "close": _vm.closePopover
+        })];
+      },
+      proxy: true
+    }], null, true)
+  }) : _vm._e(), _vm.showVisuallyHiddenClose ? _c("sr-only-close-button", {
+    attrs: {
+      "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel
+    },
+    on: {
+      "close": _vm.closePopover
+    }
+  }) : _vm._e()], 1)], 1)], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const DtPopover = __component__.exports;
 exports.POPOVER_APPEND_TO_VALUES = popover_constants.POPOVER_APPEND_TO_VALUES;
 exports.POPOVER_CONTENT_WIDTHS = popover_constants.POPOVER_CONTENT_WIDTHS;