{"version":3,"file":"BasePagination-S9Nazmy9.js","sources":["../../Vue/src/components/Common/BasePagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nconst translations = useTranslationStore();\r\nconst { t } = useI18n();\r\n\r\nconst props = defineProps<{\r\n  numPerPage: number;\r\n  page: number;\r\n  count: number;\r\n  placeholder?: boolean;\r\n  disableNumPerPageSelect?: boolean;\r\n}>();\r\n\r\nconst emit = defineEmits<{\r\n  (e: \"update:numPerPage\", numPerPage: number): void;\r\n  (e: \"update:page\", page: number): void;\r\n}>();\r\n\r\nconst numPages = computed(() => Math.ceil(props.count / props.numPerPage));\r\nconst _numPerPage = computed<number>({\r\n  get: () => {\r\n    return props.numPerPage;\r\n  },\r\n  set: (page: string | number) => {\r\n    if (typeof page === \"string\") {\r\n      emit(\"update:numPerPage\", parseInt(page));\r\n    } else {\r\n      emit(\"update:numPerPage\", page);\r\n    }\r\n  },\r\n});\r\n\r\nconst _page = computed<number>({\r\n  get: () => {\r\n    return props.page;\r\n  },\r\n  set: (page: string | number) => {\r\n    if (typeof page === \"string\") {\r\n      emit(\"update:page\", parseInt(page));\r\n    } else {\r\n      emit(\"update:page\", page);\r\n    }\r\n  },\r\n});\r\n\r\nconst buttonPages = computed(() => {\r\n  let startPage = Math.max(1, _page.value - 2);\r\n  const endPage = Math.min(startPage + 4, numPages.value);\r\n  if (endPage - startPage < 5) {\r\n    startPage = Math.max(1, endPage - 4);\r\n  }\r\n  const pages: number[] = [];\r\n  for (let p = startPage; p <= endPage; p++) {\r\n    pages.push(p);\r\n  }\r\n  return pages;\r\n});\r\n\r\nconst startIndex = computed(() => (_page.value - 1) * props.numPerPage);\r\nconst endIndex = computed(() =>\r\n  Math.min(_page.value * props.numPerPage, props.count),\r\n);\r\n\r\nwatch(_numPerPage, sanitizePage);\r\nwatch(_page, sanitizePage);\r\nwatch(props, sanitizePage, { deep: true });\r\n\r\nfunction sanitizePage() {\r\n  if (_page.value < 1) {\r\n    _page.value = 1;\r\n  } else if (_page.value > numPages.value) {\r\n    _page.value = numPages.value;\r\n  }\r\n}\r\n\r\nfunction goToPage(p: number) {\r\n  _page.value = p;\r\n}\r\n\r\nconst numPerPageOptions = computed(() => [\r\n  {\r\n    label: t(\"SV.LIT_NumberOfItemsPerPage\", { count: \"10\" }),\r\n    value: \"10\",\r\n  },\r\n  {\r\n    label: t(\"SV.LIT_NumberOfItemsPerPage\", { count: \"20\" }),\r\n    value: \"20\",\r\n  },\r\n  {\r\n    label: t(\"SV.LIT_NumberOfItemsPerPage\", { count: \"50\" }),\r\n    value: \"50\",\r\n  },\r\n  {\r\n    label: t(\"SV.LIT_NumberOfItemsPerPage\", { count: \"100\" }),\r\n    value: \"100\",\r\n  },\r\n]);\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    v-if=\"(numPages > 1 && count > 0) || placeholder\"\r\n    class=\"pagination\"\r\n  >\r\n    <div class=\"pagination-wrapper\">\r\n      <div\r\n        v-if=\"!placeholder\"\r\n        class=\"pagination-start\"\r\n      >\r\n        <button\r\n          id=\"SearchResultsPaginationFirstPageButton\"\r\n          type=\"button\"\r\n          :disabled=\"page <= 1\"\r\n          :title=\"$t('SV.LIT_GoToFirstPage')\"\r\n          class=\"hidden md:inline\"\r\n          @click=\"goToPage(1)\"\r\n        >\r\n          <FAIcon class=\"fa-light fa-chevrons-left\" />\r\n        </button>\r\n        <button\r\n          id=\"SearchResultsPaginationPreviousPageButton\"\r\n          type=\"button\"\r\n          :disabled=\"page <= 1\"\r\n          :title=\"$t('SV.LIT_GoToPrevioustPage')\"\r\n          @click=\"goToPage(page - 1)\"\r\n        >\r\n          <FAIcon class=\"fa-light fa-chevron-left\" />\r\n        </button>\r\n        <button\r\n          v-for=\"p of buttonPages\"\r\n          :key=\"`pagination${p}`\"\r\n          type=\"button\"\r\n          class=\"search-results-pagination-go-to-page-button\"\r\n          :data-page=\"p\"\r\n          :class=\"{\r\n            active: p === page,\r\n            'hidden md:inline': p < page - 1 || p > page + 1,\r\n          }\"\r\n          :title=\"$t('SV.LIT_GoToPage', { page: p })\"\r\n          @click=\"goToPage(p)\"\r\n        >\r\n          {{ p }}\r\n        </button>\r\n        <button\r\n          id=\"SearchResultsPaginationNextPageButton\"\r\n          type=\"button\"\r\n          :disabled=\"page >= numPages\"\r\n          :title=\"$t('SV.LIT_GoToNextPage')\"\r\n          @click=\"goToPage(page + 1)\"\r\n        >\r\n          <FAIcon class=\"fa-light fa-chevron-right\" />\r\n        </button>\r\n        <button\r\n          id=\"SearchResultsPaginationLastPageButton\"\r\n          type=\"button\"\r\n          :disabled=\"page >= numPages\"\r\n          :title=\"$t('SV.LIT_GoToLastPage')\"\r\n          class=\"hidden md:inline\"\r\n          @click=\"goToPage(numPages)\"\r\n        >\r\n          <FAIcon class=\"fa-light fa-chevrons-right\" />\r\n        </button>\r\n      </div>\r\n      <div\r\n        v-else\r\n        class=\"pagination-start\"\r\n      >\r\n        <span>\r\n          <span\r\n            class=\"placeholder\"\r\n            style=\"width: 24px; height: 32px\"\r\n          />\r\n        </span>\r\n        <span>\r\n          <span\r\n            class=\"placeholder\"\r\n            style=\"width: 24px; height: 32px\"\r\n          />\r\n        </span>\r\n        <span\r\n          v-for=\"i of 5\"\r\n          :key=\"`paginationplaceholder${i}`\"\r\n          style=\"width: 24px; height: 32px\"\r\n        >\r\n          <span\r\n            class=\"placeholder\"\r\n            style=\"width: 24px; height: 32px\"\r\n          />\r\n        </span>\r\n        <span>\r\n          <span\r\n            class=\"placeholder\"\r\n            style=\"width: 24px; height: 32px\"\r\n          />\r\n        </span>\r\n\r\n        <span>\r\n          <span\r\n            class=\"placeholder\"\r\n            style=\"width: 24px; height: 32px\"\r\n          />\r\n        </span>\r\n      </div>\r\n      <div class=\"pagination-end\">\r\n        <div\r\n          v-if=\"!placeholder\"\r\n          class=\"pagination-status\"\r\n        >\r\n          {{\r\n            $t(\"SV.MES_PaginationShowing\", {\r\n              start: translations.formatNumbers(startIndex + 1),\r\n              end: translations.formatNumbers(endIndex),\r\n              count: translations.formatNumbers(count),\r\n            })\r\n          }}\r\n        </div>\r\n        <div\r\n          v-else\r\n          class=\"pagination-status\"\r\n        >\r\n          <span\r\n            class=\"placeholder\"\r\n            style=\"width: 150px\"\r\n          />\r\n        </div>\r\n        <template v-if=\"!disableNumPerPageSelect\">\r\n          <FormSelect\r\n            v-if=\"placeholder\"\r\n            id=\"SearchResultsNumPerPageSelect\"\r\n            :label=\"$t('SV.LIT_NumberOfRowsPerPage')\"\r\n            hide-label\r\n            class=\"num-page-select\"\r\n            small\r\n            style=\"width: 100px\"\r\n          />\r\n          <FormSelect\r\n            v-else\r\n            id=\"SearchResultsNumPerPageSelect\"\r\n            :model-value=\"_numPerPage.toString()\"\r\n            :label=\"$t('SV.LIT_NumberOfRowsPerPage')\"\r\n            :options=\"numPerPageOptions\"\r\n            hide-label\r\n            class=\"num-page-select\"\r\n            small\r\n            @update:model-value=\"(e) => (_numPerPage = parseInt(e))\"\r\n          />\r\n        </template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <div\r\n    v-if=\"numPages > 1 && count > 0\"\r\n    class=\"pagination-footer\"\r\n  >\r\n    {{\r\n      $t(\"SV.MES_PaginationShowing\", {\r\n        start: translations.formatNumbers(startIndex + 1),\r\n        end: translations.formatNumbers(endIndex),\r\n        count: translations.formatNumbers(count),\r\n      })\r\n    }}\r\n  </div> -->\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.pagination {\r\n  @apply sticky bottom-0 bg-white px-5 py-2;\r\n}\r\n.pagination-wrapper {\r\n  @apply flex items-center justify-between;\r\n}\r\n.pagination-status {\r\n  @apply text-sm text-gray-600 max-md:hidden;\r\n}\r\n.num-page-select {\r\n  @apply inline;\r\n}\r\n.pagination-end {\r\n  @apply flex items-center gap-2;\r\n}\r\n\r\n.pagination-start {\r\n  @apply flex items-center gap-1;\r\n}\r\n\r\nbutton {\r\n  @apply rounded p-1 px-2 text-gray-600 transition-all;\r\n  &:hover {\r\n    @apply bg-light-700 text-black;\r\n  }\r\n  &.active {\r\n    @apply pointer-events-none cursor-default bg-ccli-blue text-white;\r\n  }\r\n}\r\n</style>\r\n"],"names":["translations","useTranslationStore","t","useI18n","props","__props","emit","__emit","numPages","computed","_numPerPage","page","_page","buttonPages","startPage","endPage","pages","p","startIndex","endIndex","watch","sanitizePage","goToPage","numPerPageOptions"],"mappings":"8zBACA,MAAMA,EAAeC,IACf,CAAE,EAAAC,GAAMC,EAAAA,UAERC,EAAQC,EAQRC,EAAOC,EAKPC,EAAWC,EAAS,IAAM,KAAK,KAAKL,EAAM,MAAQA,EAAM,UAAU,CAAC,EACnEM,EAAcD,EAAiB,CACnC,IAAK,IACIL,EAAM,WAEf,IAAMO,GAA0B,CAC1B,OAAOA,GAAS,SACbL,EAAA,oBAAqB,SAASK,CAAI,CAAC,EAExCL,EAAK,oBAAqBK,CAAI,CAElC,CAAA,CACD,EAEKC,EAAQH,EAAiB,CAC7B,IAAK,IACIL,EAAM,KAEf,IAAMO,GAA0B,CAC1B,OAAOA,GAAS,SACbL,EAAA,cAAe,SAASK,CAAI,CAAC,EAElCL,EAAK,cAAeK,CAAI,CAE5B,CAAA,CACD,EAEKE,EAAcJ,EAAS,IAAM,CACjC,IAAIK,EAAY,KAAK,IAAI,EAAGF,EAAM,MAAQ,CAAC,EAC3C,MAAMG,EAAU,KAAK,IAAID,EAAY,EAAGN,EAAS,KAAK,EAClDO,EAAUD,EAAY,IACxBA,EAAY,KAAK,IAAI,EAAGC,EAAU,CAAC,GAErC,MAAMC,EAAkB,CAAA,EACxB,QAASC,EAAIH,EAAWG,GAAKF,EAASE,IACpCD,EAAM,KAAKC,CAAC,EAEP,OAAAD,CAAA,CACR,EAEKE,EAAaT,EAAS,KAAOG,EAAM,MAAQ,GAAKR,EAAM,UAAU,EAChEe,EAAWV,EAAS,IACxB,KAAK,IAAIG,EAAM,MAAQR,EAAM,WAAYA,EAAM,KAAK,CAAA,EAGtDgB,EAAMV,EAAaW,CAAY,EAC/BD,EAAMR,EAAOS,CAAY,EACzBD,EAAMhB,EAAOiB,EAAc,CAAE,KAAM,EAAM,CAAA,EAEzC,SAASA,GAAe,CAClBT,EAAM,MAAQ,EAChBA,EAAM,MAAQ,EACLA,EAAM,MAAQJ,EAAS,QAChCI,EAAM,MAAQJ,EAAS,MAE3B,CAEA,SAASc,EAASL,EAAW,CAC3BL,EAAM,MAAQK,CAChB,CAEM,MAAAM,EAAoBd,EAAS,IAAM,CACvC,CACE,MAAOP,EAAE,8BAA+B,CAAE,MAAO,KAAM,EACvD,MAAO,IACT,EACA,CACE,MAAOA,EAAE,8BAA+B,CAAE,MAAO,KAAM,EACvD,MAAO,IACT,EACA,CACE,MAAOA,EAAE,8BAA+B,CAAE,MAAO,KAAM,EACvD,MAAO,IACT,EACA,CACE,MAAOA,EAAE,8BAA+B,CAAE,MAAO,MAAO,EACxD,MAAO,KACT,CAAA,CACD"}