{"version":3,"file":"EverydayPagination-kH5MgHnO.js","sources":["../../../app/javascript/src/components/EverydayPagination.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"moreThanOnePage\"\n    class=\"everyday-pagination__container cd-br-small\"\n    data-pendo-ds=\"everyday_pagination\"\n  >\n    <div\n      v-if=\"showLabel\"\n      class=\"everyday-pagination__label\"\n    >\n      <span class=\"body-s-regular\">Showing</span>\n      <span class=\"body-s-high\">{{ itemRangeStart }}-{{ itemRangeEnd }}</span>\n      <span class=\"body-s-regular\">of</span>\n      <span class=\"body-s-high\">{{ totalItems }}</span>\n    </div>\n    <BaseButton\n      :disabled=\"currentPage === firstPage\"\n      emphasis=\"low\"\n      icon=\"fas fa-chevron-left\"\n      size=\"compact\"\n      theme=\"mono\"\n      @click=\"changePage(currentPage - 1)\"\n    />\n    <BaseButton\n      data-testid=\"previous-page\"\n      :emphasis=\"currentPage === firstPage ? 'high' : 'low'\"\n      size=\"compact\"\n      :theme=\"firstPage === currentPage ? 'default' : 'mono'\"\n      @click=\"changePage(firstPage)\"\n    >\n      {{ firstPage }}\n    </BaseButton>\n    <BaseButton\n      v-if=\"shouldShowLeftEllipsis\"\n      class=\"everyday-pagination__ellipsis\"\n      emphasis=\"low\"\n      icon=\"fas fa-ellipsis-h\"\n      size=\"compact\"\n      theme=\"mono\"\n    />\n    <BaseButton\n      v-for=\"page in pagesToShow\"\n      :key=\"page\"\n      :emphasis=\"page === currentPage ? 'high' : 'low'\"\n      size=\"compact\"\n      :theme=\"page === currentPage ? 'default' : 'mono'\"\n      @click=\"changePage(page)\"\n    >\n      {{ page }}\n    </BaseButton>\n    <BaseButton\n      v-if=\"shouldShowRightEllipsis\"\n      class=\"everyday-pagination__ellipsis\"\n      emphasis=\"low\"\n      icon=\"fas fa-ellipsis-h\"\n      size=\"compact\"\n      theme=\"mono\"\n    />\n    <BaseButton\n      v-if=\"shouldShowLastPage\"\n      :emphasis=\"currentPage === lastPage ? 'high' : 'low'\"\n      size=\"compact\"\n      :theme=\"lastPage === currentPage ? 'default' : 'mono'\"\n      @click=\"changePage(lastPage)\"\n    >\n      {{ lastPage }}\n    </BaseButton>\n    <BaseButton\n      data-testid=\"next-page\"\n      :disabled=\"currentPage === lastPage\"\n      emphasis=\"low\"\n      icon=\"fas fa-chevron-right\"\n      size=\"compact\"\n      theme=\"mono\"\n      @click=\"changePage(currentPage + 1)\"\n    />\n  </div>\n</template>\n\n<script>\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport { faEllipsisH, faChevronRight, faChevronLeft } from '@fortawesome/pro-solid-svg-icons'\nimport {\n  faEllipsisH as farEllipsisH,\n  faChevronRight as farChevronRight,\n  faChevronLeft as farChevronLeft,\n} from '@fortawesome/pro-regular-svg-icons'\nlibrary.add(faEllipsisH, farEllipsisH, faChevronRight, farChevronRight, faChevronLeft, farChevronLeft)\nconst TOTAL_VISIBLE_BUTTONS = 7\n\nimport BaseButton from './BaseButton.vue'\n\nexport default {\n  name: 'EverydayPagination',\n  components: {\n    BaseButton,\n  },\n  props: {\n    currentPage: {\n      type: Number,\n      required: true,\n    },\n    totalItems: {\n      type: Number,\n      required: true,\n    },\n    itemsPerPage: {\n      type: Number,\n      required: true,\n    },\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  emits: ['change:current-page'],\n  computed: {\n    firstPage() {\n      return 1\n    },\n    lastPage() {\n      return Math.ceil(this.totalItems / this.itemsPerPage)\n    },\n    pagesToShow() {\n      if (this.shouldShowExtraButtons) {\n        return this.complexPagination\n      } else {\n        return Array.from({ length: this.lastPage - 1 }, (_, i) => i + 2)\n      }\n    },\n    complexPagination() {\n      const pages = []\n      const totalPages = this.lastPage\n\n      const showLeftEllipsis = this.currentPage > 3\n      const showRightEllipsis = this.currentPage < totalPages - 3\n\n      let startPage\n      let endPage\n      if (showLeftEllipsis && showRightEllipsis) {\n        startPage = this.currentPage - 1\n        endPage = this.currentPage + 1\n      } else if (showLeftEllipsis) {\n        endPage = totalPages - 1\n        startPage = endPage - (TOTAL_VISIBLE_BUTTONS - 4)\n      } else if (showRightEllipsis) {\n        startPage = 2\n        endPage = TOTAL_VISIBLE_BUTTONS - 2\n      } else {\n        startPage = 2\n        endPage = totalPages - 1\n      }\n      for (let i = startPage; i <= endPage; i++) {\n        pages.push(i)\n      }\n\n      return pages\n    },\n    shouldShowFirstPage() {\n      return (this.pagesToShow.at(0) > this.firstPage + 1) && this.shouldShowExtraButtons\n    },\n    shouldShowLeftEllipsis() {\n      return (this.pagesToShow.at(0) > this.firstPage + 1) && this.shouldShowExtraButtons\n    },\n    shouldShowRightEllipsis() {\n      return (this.pagesToShow.at(this.pagesToShow.length - 1) < this.lastPage - 1) && this.shouldShowExtraButtons\n    },\n    shouldShowLastPage() {\n      return (this.pagesToShow.at(this.pagesToShow.length - 1) < this.lastPage) && this.shouldShowExtraButtons\n    },\n    shouldShowExtraButtons() {\n      return this.lastPage > TOTAL_VISIBLE_BUTTONS\n    },\n    itemRangeStart() {\n      return (this.currentPage - 1) * this.itemsPerPage + 1\n    },\n    itemRangeEnd() {\n      return Math.min(this.currentPage * this.itemsPerPage, this.totalItems)\n    },\n    moreThanOnePage() {\n      return this.lastPage > 1\n    },\n  },\n  methods: {\n    changePage(newPage) {\n      if (newPage >= this.firstPage && newPage <= this.lastPage) {\n        this.$emit('change:current-page', newPage)\n      }\n    },\n  },\n}\n</script>\n\n<style scoped>\n.everyday-pagination__container {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-width: 330px;\n  border-radius: 6px;\n  border: 1px solid var(--grey-300);\n  padding: var(--space-2);\n  gap: 0;\n}\n\n.cd-br-small {\n  border-radius: 6px;\n}\n\n.everyday-pagination__ellipsis {\n  pointer-events: none;\n}\n\n.everyday-pagination__label {\n  margin-right: var(--space-3);\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n}\n\n.body-s-regular {\n  font-size: 12px;\n  font-weight: normal;\n}\n\n.body-s-high {\n  font-size: 12px;\n  font-weight: bold;\n}\n\n.pagination-container .active {\n  font-weight: bold;\n  background-color: var(--blueberry-1000);\n  color: white;\n}\n</style>\n"],"names":["library","faEllipsisH","farEllipsisH","faChevronRight","farChevronRight","faChevronLeft","farChevronLeft","TOTAL_VISIBLE_BUTTONS","_sfc_main","BaseButton","_","i","pages","totalPages","showLeftEllipsis","showRightEllipsis","startPage","endPage","newPage","_hoisted_3","_withScopeId","_createElementVNode","_hoisted_4","_hoisted_5","_hoisted_6","$options","_openBlock","_createElementBlock","_hoisted_1","$props","_hoisted_2","_toDisplayString","_createVNode","_component_BaseButton","_cache","$event","_createBlock","_Fragment","_renderList","page"],"mappings":"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"}