{"version":3,"file":"Pagination.vue.mjs","sources":["../../lib/widgets/Pagination.vue"],"sourcesContent":["<template>\n  <div class=\"pagination-container d-flex flex-row justify-content-between flex-wrap\">\n    <!-- PAGINATION -->\n    <ul v-if=\"usePagination\" class=\"d-flex pagination align-self-center mb-0\">\n      <li class=\"page-item page-item-previous\" :class=\"{ 'disabled': !clickedPageValid(getPage - 1) }\" @click=\"pageClickedHandler(getPage - 1)\">\n        <i class=\"page-link material-icons\" v-if=\"usePaginationArrows\">keyboard_arrow_left</i>\n        <button class=\"page-link prev-button\">{{ $t('message.pagination.previousPage') }}</button>\n      </li>\n      <li class=\"page-item\"\n          v-for=\"(page, i) in getPagesDisplayed(getPage, getPageCount)\"\n          :key=\"i\"\n          :class=\"{ 'active': page === getPage}\"\n          @click=\"pageClickedHandler(page)\">\n        <button class=\"page-link page-button\">{{ page.toLocaleString('fi') }}</button>\n      </li>\n      <li class=\"page-item page-item-next\" :class=\"{ 'disabled': !clickedPageValid(getPage + 1) }\" @click=\"pageClickedHandler(getPage + 1)\">\n        <button class=\"page-link next-button\">{{ $t('message.pagination.nextPage') }}</button>\n        <i class=\"page-link material-icons\" v-if=\"usePaginationArrows\">keyboard_arrow_right</i>\n      </li>\n    </ul>\n    <!-- ITEMS PER PAGE -->\n      <div v-if=\"useItemsPerPage\" class=\"d-flex flex-row flex-wrap align-items-center items-per-page\">\n        <div class=\"d-inline align-middle mr-2\">{{ $t('message.pagination.itemsPerPage') }}</div>\n        <div class=\"col-right mr-2 d-inline\" role=\"group\" :aria-label=\"$t('message.pagination.itemsPerPage')\" >\n          <div class=\"btn-group items-per-page-dropdown\" role=\"group\">\n            <button\n              class=\"value-display list-group-item col d-flex flex-row justify-content-between p-0 align-items-center\"\n              id=\"itemsPerPageDropdown\" type=\"button\" data-toggle=\"dropdown\" aria-expanded=\"false\">\n              <div class=\"pl-2 d-flex align-items-center\">\n                {{ itemsPerPage }}\n              </div>\n              <div class=\"items-per-page-icon ecl-select__icon text-white\">\n                <i class=\"material-icons\">keyboard_arrow_down</i>\n              </div>\n            </button>\n            <ul class=\"dropdown-menu ec-ds-dropdown-items\" aria-labelledby=\"itemsPerPageDropdown\">\n              <button\n                class=\"dropdown-item\"\n                @click=\"setPageLimit(item)\"\n                v-for=\"(item, index) in defaultItemsPerPageOptions\"\n                :key=\"index\">{{ item }}</button>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n</template>\n\n<script>\nexport default {\n  name: 'pagination',\n  components: {},\n  props: {\n    itemsCount: {\n      type: Number,\n      default: () => 0,\n    },\n    itemsPerPage: {\n      type: Number,\n      default: () => 0,\n    },\n    getPage: {\n      type: Number,\n      default: () => 1,\n    },\n    getPageCount: {\n      type: Number,\n      default: () => 1,\n    },\n  },\n  data() {\n    return {\n      pagesDisplayed: [],\n      usePagination: this.$env.routing.pagination.usePagination,\n      usePaginationArrows: this.$env.routing.pagination.usePaginationArrows,\n      useItemsPerPage: this.$env.routing.pagination.useItemsPerPage,\n      defaultItemsPerPageOptions: this.$env.routing.pagination.defaultItemsPerPageOptions,\n    };\n  },\n  computed: {},\n  methods: {\n    /**\n     * @description Determines displayed pagenumbers and delimiters in the pagination.\n     * @param currentPage {number} The currently active page.\n     * @param lastPage {number} The number of the last page (also the pageCount).\n     * @returns {array}\n     */\n    getPagesDisplayed(currentPage, lastPage) {\n      const current = currentPage;\n      const last = lastPage;\n      const delta = currentPage < 1000 ? 2 : 1;\n      const left = current - delta;\n      const right = current + delta + 1;\n      const range = [];\n      const rangeWithDots = [];\n      let l;\n\n      for (let i = 1; i <= last; i += 1) {\n        if (i === 1 || i === last || (i >= left && i < right)) {\n          range.push(i);\n        }\n      }\n\n      for (const i of range) {\n        if (l) {\n          if (i - l === 2) {\n            rangeWithDots.push(l + 1);\n          } else if (i - l !== 1) {\n            rangeWithDots.push('...');\n          }\n        }\n        rangeWithDots.push(i);\n        l = i;\n      }\n      return rangeWithDots;\n    },\n    setPageLimit(limit) {\n      this.$emit('setPageLimit', limit);\n      this.changePageTo(1, limit);\n    },\n    pageClickedHandler(page) {\n      if (this.clickedPageValid(page)) this.changePageTo(page, this.itemsPerPage);\n    },\n    clickedPageValid(page) {\n      return typeof page === 'number' && page > 0 && page <= this.getPageCount;\n    },\n    changePageTo(page, limit) {\n      this.$router.replace({ query: Object.assign({}, this.$route.query, { page, limit }) }).catch(error => { console.error(error); });\n      this.scrollTo(0, 0);\n    },\n    scrollTo(x, y) {\n      window.scrollTo(x, y);\n    },\n  },\n  created() {},\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.page-item {\n  display: flex;\n\n  &.disabled {\n    color: rgba(0,0,0,0.7);\n  }\n\n  .page-link {\n    line-height: normal;\n  }\n}\n\n.items-per-page {\n  display: inline;\n  margin-left: auto;\n\n  .items-per-page-dropdown {\n    width: 100px;\n    height: 48px;\n  }\n\n  .items-per-page-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    right: 0;\n    height: 100%;\n    width: 2.75rem;\n    background-color: var(--primary);\n    .material-icons {\n      font-size: 30px;\n    }\n  }\n}\n</style>\n"],"names":["_sfc_main","currentPage","lastPage","current","last","delta","left","right","range","rangeWithDots","l","i","limit","page","error","x","y","_hoisted_1","_hoisted_4","_hoisted_6","_hoisted_7","_hoisted_10","_hoisted_14","_openBlock","_createElementBlock","$data","_hoisted_2","_createElementVNode","_normalizeClass","$options","$props","_cache","$event","_hoisted_3","_toDisplayString","_ctx","_Fragment","_renderList","_hoisted_8","_hoisted_9","_hoisted_12","_hoisted_13","_hoisted_15","item","index","_hoisted_16"],"mappings":"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"}