{"version":3,"file":"UiToggle-DpuN3o3c.js","sources":["../../src/ui/UiButton/UiButtonToggle.vue","../../src/ui/UiPagination/UiPagination.vue","../../src/ui/UiToggle/UiToggle.vue"],"sourcesContent":["<template>\n  <VBtnToggle\n    :density=\"density\"\n    :variant=\"variant\"\n    :model-value=\"modelValue\"\n    :selected-class=\"selectedClass\"\n    :tile=\"tile\"\n    :mandatory=\"mandatory\"\n    @update:model-value=\"handleChange\"\n  >\n    <slot />\n  </VBtnToggle>\n</template>\n\n<script setup lang=\"ts\">\nimport { VBtnToggle } from 'vuetify/components/VBtnToggle';\n\nexport type Variant =\n  | 'flat'\n  | 'text'\n  | 'elevated'\n  | 'tonal'\n  | 'outlined'\n  | 'plain';\n\nexport interface Props {\n  modelValue: any;\n  density?: 'default' | 'comfortable' | 'compact';\n  variant?: Variant;\n  selectedClass?: string;\n  tile?: boolean;\n  mandatory?: boolean | 'force';\n}\n\nwithDefaults(defineProps<Props>(), {\n  density: 'default',\n  variant: 'elevated',\n  selectedClass: undefined,\n  tile: false,\n  mandatory: true,\n});\n\nconst emit = defineEmits<(e: 'update:modelValue', value: any[]) => void>();\nconst handleChange = (value: any[]): void => {\n  emit('update:modelValue', value);\n};\n</script>\n","<template>\n  <div v-if=\"isVisible\" class=\"ui-pagination\">\n    <VPagination\n      v-if=\"isPaginationVisible\"\n      :model-value=\"currentPage\"\n      :length=\"currentPageLength\"\n      :total-visible=\"maxPagesShown\"\n      :size=\"40\"\n      rounded=\"xl\"\n      color=\"grey-600\"\n      class=\"text-body-3\"\n      data-test=\"ui-pagination\"\n      @update:model-value=\"$emit('pageChanged', $event)\"\n    >\n      <template #prev=\"{ onClick, disabled, ariaLabel, ariaDisabled }\">\n        <UiButton\n          v-if=\"!disabled\"\n          :disabled=\"disabled\"\n          :aria-label=\"ariaLabel\"\n          :aria-disabled=\"ariaDisabled\"\n          rounded=\"xl\"\n          size=\"default\"\n          icon=\"$chevronLeft\"\n          variant=\"outlined\"\n          @click=\"onClick\"\n        >\n        </UiButton>\n      </template>\n      <template #next=\"{ onClick, disabled, ariaLabel, ariaDisabled }\">\n        <UiButton\n          v-if=\"!disabled\"\n          :disabled=\"disabled\"\n          :aria-label=\"ariaLabel\"\n          :aria-disabled=\"ariaDisabled\"\n          rounded=\"xl\"\n          size=\"default\"\n          icon=\"$chevronRight\"\n          variant=\"outlined\"\n          @click=\"onClick\"\n        >\n        </UiButton>\n      </template>\n    </VPagination>\n\n    <UiRow no-gutters align=\"center\">\n      <UiCol cols=\"auto\" class=\"px-2\">\n        <UiText variant=\"body-3\" color=\"grey-400\">\n          <AppTranslate identifier=\"common.dictionary.itemsPerPage\" />:\n        </UiText>\n      </UiCol>\n      <UiCol cols=\"auto\" class=\"h-100\">\n        <UiToggle\n          :model-value=\"perPage\"\n          :items=\"itemsPerPage\"\n          variant=\"underline\"\n          class=\"ui-pagination__toggle-per-page\"\n          data-test=\"items-per-page-pagination\"\n          @update:model-value=\"handlePerPageChange\"\n        />\n      </UiCol>\n    </UiRow>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VPagination } from 'vuetify/components/VPagination';\nimport { UiButton, UiRow, UiCol, UiText, UiToggle } from '~/ui';\nimport { computed } from 'vue';\nimport { AppTranslate, type PagerLimit, useI18n } from '~/infrastructure';\n\ninterface Props {\n  total?: number | null;\n  perPage: PagerLimit;\n  maxPagesShown?: number;\n  currentPage: number;\n  initialLimit?: number | undefined;\n}\nconst props = withDefaults(defineProps<Props>(), {\n  total: null,\n  maxPagesShown: 6,\n  currentPage: 1,\n  initialLimit: undefined,\n});\n\nconst emit = defineEmits<{\n  (e: 'pageChanged', value: number): void;\n  (e: 'update:perPage', value: PagerLimit): void;\n}>();\n\nconst currentPageLength = computed(() => {\n  const res = props.perPage ?? +props.initialLimit;\n\n  return Math.ceil(+props.total / res);\n});\n\nconst isPaginationVisible = computed(\n  () => props.perPage !== 'all' && props.total > props.perPage,\n);\n\nconst isVisible = computed(() => props.total !== 0 && props.total !== null);\n\nconst { t } = useI18n();\n\nconst itemsPerPage = computed(() => {\n  const res =\n    props.total > 100\n      ? { id: 100, label: 100 }\n      : { id: 'all', label: t('components.pagination.itemsPerPage.all.text') };\n\n  return [{ id: 20, label: 20 }, { id: 50, label: 50 }, res];\n});\n\nconst handlePerPageChange = (value: PagerLimit): void => {\n  emit('update:perPage', value);\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.ui-pagination {\n  display: flex;\n  margin-top: 24px;\n  column-gap: 12px;\n  justify-content: space-between;\n  height: fit-content;\n  align-items: center;\n\n  &__toggle-per-page :deep(.ui-button-toggle__container .v-btn--size-small) {\n    min-width: 40px !important;\n    height: 100%;\n  }\n}\n\n:deep(.v-pagination__item--is-active) {\n  pointer-events: none;\n}\n\n:deep(.v-pagination__item--is-active .v-btn) {\n  background-color: rgb(var(--v-theme-primary));\n}\n\n:deep(.v-pagination__item--is-active .v-btn .v-btn__content) {\n  color: white;\n}\n\n:deep(.v-pagination__list) {\n  justify-content: flex-start;\n}\n\n:deep(.v-pagination__item .v-btn--disabled) {\n  opacity: 1;\n}\n\n.pagination-select {\n  max-width: 90px;\n  height: 40px;\n\n  :deep(.v-field__field) {\n    align-items: center;\n  }\n}\n</style>\n","<template>\n  <UiButtonToggle\n    :model-value=\"modelValue\"\n    variant=\"plain\"\n    tile\n    :selected-class=\"selectedClass\"\n    class=\"ui-button-toggle\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"variant === 'underline'\">\n      <div\n        v-for=\"(item, index) in items\"\n        :key=\"index\"\n        class=\"ui-button-toggle__container\"\n      >\n        <UiButton\n          :rounded=\"false\"\n          :value=\"item.id\"\n          variant=\"plain\"\n          size=\"small\"\n          class=\"button\"\n        >\n          <AppTranslate :identifier=\"item.label\" />\n        </UiButton>\n        <UiText\n          v-if=\"index < items.length - 1 && withSeparator\"\n          variant=\"body-4\"\n          class=\"px-2\"\n        >\n          /\n        </UiText>\n      </div>\n    </template>\n\n    <template v-else>\n      <UiButton\n        v-for=\"(item, index) in items\"\n        :key=\"index\"\n        :value=\"item.id\"\n        variant=\"plain\"\n        size=\"small\"\n        class=\"button\"\n      >\n        <AppTranslate :identifier=\"item.label\" />\n      </UiButton>\n    </template>\n  </UiButtonToggle>\n</template>\n\n<script setup lang=\"ts\">\nimport { UiButton, UiButtonToggle, UiText } from '~/ui';\nimport { AppTranslate } from '~/infrastructure';\nimport { computed } from 'vue';\n\nexport interface Props {\n  modelValue: any;\n  items: any[];\n  variant?: 'default' | 'underline';\n  withSeparator?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  withSeparator: false,\n});\n\ndefineEmits<(e: 'update:modelValue', value: string) => void>();\n\nconst selectedClass = computed(() =>\n  props.variant === 'default'\n    ? 'selected-class__default'\n    : 'selected-class__underline',\n);\n</script>\n\n<style scoped lang=\"scss\">\n.ui-button-toggle {\n  align-items: baseline;\n  color: rgb(var(--v-theme-grey-600));\n\n  :deep(.v-btn--variant-plain) {\n    opacity: 1 !important;\n  }\n\n  button {\n    line-height: 22px;\n  }\n\n  &__container {\n    display: flex;\n    align-items: center;\n    height: 100%;\n  }\n}\n\n.selected-class {\n  &__default {\n    color: rgb(var(--v-theme-blue-700));\n    border: 1px solid rgb(var(--v-theme-primary));\n    border-inline-start: 1px solid rgb(var(--v-theme-primary)) !important;\n    border-inline-end: 1px solid rgb(var(--v-theme-primary)) !important;\n  }\n\n  &__underline {\n    border-bottom: 1px solid rgb(var(--v-theme-blue-500));\n    border-start-end-radius: 0 !important;\n    border-end-end-radius: 0 !important;\n    border-start-start-radius: 0 !important;\n    border-end-start-radius: 0 !important;\n  }\n}\n\n:deep(.selected-class__underline.v-btn--variant-plain) {\n  opacity: 1;\n}\n</style>\n"],"names":["emit","__emit","handleChange","value","props","__props","currentPageLength","computed","res","isPaginationVisible","isVisible","t","useI18n","itemsPerPage","handlePerPageChange","selectedClass"],"mappings":"0eA0CA,MAAMA,EAAOC,EACPC,EAAgBC,GAAuB,CAC3CH,EAAK,oBAAqBG,CAAK,CACjC,+hBCgCA,MAAMC,EAAQC,EAORL,EAAOC,EAKPK,EAAoBC,EAAS,IAAM,CACvC,MAAMC,EAAMJ,EAAM,SAAW,CAACA,EAAM,aAEpC,OAAO,KAAK,KAAK,CAACA,EAAM,MAAQI,CAAG,CAAA,CACpC,EAEKC,EAAsBF,EAC1B,IAAMH,EAAM,UAAY,OAASA,EAAM,MAAQA,EAAM,OACvD,EAEMM,EAAYH,EAAS,IAAMH,EAAM,QAAU,GAAKA,EAAM,QAAU,IAAI,EAEpE,CAAE,EAAAO,CAAE,EAAIC,EAAQ,EAEhBC,EAAeN,EAAS,IAAM,CAClC,MAAMC,EACJJ,EAAM,MAAQ,IACV,CAAE,GAAI,IAAK,MAAO,GAAI,EACtB,CAAE,GAAI,MAAO,MAAOO,EAAE,6CAA6C,CAAE,EAE3E,MAAO,CAAC,CAAE,GAAI,GAAI,MAAO,EAAA,EAAM,CAAE,GAAI,GAAI,MAAO,EAAA,EAAMH,CAAG,CAAA,CAC1D,EAEKM,EAAuBX,GAA4B,CACvDH,EAAK,iBAAkBG,CAAK,CAC9B,4mDCrDA,MAAMC,EAAQC,EAORU,EAAgBR,EAAS,IAC7BH,EAAM,UAAY,UACd,0BACA,2BACN"}