@davincihealthcare/elty-design-system-vue 1.76.1 → 1.77.1

package/dist/src/table/ElMobileTable.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElMobileTable.vue.esm2.js","sources":["../../../src/table/ElMobileTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ElListItem, { ElListItemProps } from '@/ElListItem.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElButton, { ElButtonProps } from '@/ElButton.vue';\nimport { computed, ref, watch } from 'vue';\nimport ElTag, { ElTagColor } from '@/ElTag.vue';\nimport ElModal from '@/ElModal.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport { OptionType } from '@/types';\n\nexport type SelectOptions = OptionType[];\n\nexport type MobileTableFiltersStatus = {\n  freeSearch?: string;\n  fromDate?: number;\n  multiSelect: {\n    mainText?: string;\n    secondaryRow?: string;\n    tertiaryRow?: string;\n    tags?: string;\n    time?: string;\n    amount?: string;\n    avatar?: string;\n  };\n};\n\nexport type MobileTableFilter = {\n  freeSearch?: {\n    placeholder?: string;\n    filterOn: ('mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'tags' | 'time' | 'avatar')[];\n    initialValue?: string;\n  };\n  multiValue?: {\n    mainText?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n    secondaryRow?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n    tertiaryRow?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n    amount?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n    tags?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n    time?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n    avatar?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n  };\n  dateRange?: {\n    enabled: boolean;\n    label: string;\n    initialValue?: number;\n    placeholder?: string;\n  };\n  resetButton?: boolean;\n  // if true filters won't be applied by the table (used for server side table)\n  managed?: boolean;\n};\n\nexport type MobileTableRow = Omit<ElListItemProps, 'color'> & {\n  id: string;\n  rowNotSelectable?: boolean;\n  relatedObject?: any;\n  clickAction?: (payload: PointerEvent) => void;\n  actions?: {\n    primary: InstanceType<typeof ElButton>['$props'];\n    secondary?: InstanceType<typeof ElButton>['$props'];\n  };\n  sortableAndFilterableValue?: string;\n  details: {\n    label: string;\n    value:\n      | { type?: 'default'; text: string }\n      | { type: 'tag'; text: string; color?: ElTagColor }\n      | { type: 'avatar'; label?: string; picture?: string };\n  }[];\n};\n\nexport interface ElMobileTableProps {\n  color: 'primary' | 'secondary';\n  filters: MobileTableFilter;\n  loading?: boolean;\n  preventDefaultItemClick?: boolean;\n  selection?: {\n    enabled: boolean;\n    selectionMode?: 'single' | 'multiple'; // defaults to multiple\n    destructiveAction?: {\n      enabled: boolean;\n      button: Omit<ElButtonProps, 'variant' | 'type' | 'label' | 'error' | 'onClick'> & { label?: (count: number) => string };\n    };\n    bulkActionButton: Omit<ElButtonProps, 'variant' | 'type' | 'label' | 'error' | 'onClick'> & { label: (count: number) => string };\n    selectedLabel?: (selectionCount: number) => string;\n    cancelText?: (selectionCount: number) => string;\n  };\n  sortBy?: {\n    on: 'mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'tags' | 'time' | 'avatar';\n    order: 'asc' | 'desc';\n  };\n  itemsCountLabel?: (count: number) => string;\n  noItemsCountLabel?: boolean;\n  data: MobileTableRow[];\n}\n\nconst props = defineProps<ElMobileTableProps>();\n\nconst search = ref<string>('');\nconst selectedItems = ref<number[]>([]);\nconst selectedItemToShow = ref<MobileTableRow | null>(null);\nconst filterModalOpen = ref(false);\nconst filterDateFrom = ref<number>(0);\nconst managedSearchDebounceTimeout = ref<NodeJS.Timeout | undefined>(undefined);\n\nwatch(search, (newValue, oldValue) => {\n  if (managedSearchDebounceTimeout.value) {\n    clearTimeout(managedSearchDebounceTimeout.value);\n  }\n  managedSearchDebounceTimeout.value = setTimeout(() => {\n    if (oldValue !== newValue) {\n      emitFiltersUpdated();\n    }\n  }, 500);\n});\n\nconst filtersAreApplied = computed(() => {\n  return (\n    search.value.trim().length > 0 ||\n    Object.values(multiValueFiltersValues.value).some(filter => filter && filter.trim().length > 0) ||\n    filterDateFrom.value !== 0\n  );\n});\n\nconst getSelectedRows = () => selectedItems.value.map(index => props.data[index]);\n\nconst matchesSearch = (value: string): boolean => {\n  const searchText = search.value?.trim();\n  if (!searchText) return true;\n  return value.split(' ').some(part => part.toLowerCase().includes(searchText.toLowerCase()));\n};\n\nconst multiValueFiltersValues = ref<MobileTableFiltersStatus['multiSelect']>({\n  avatar: props.filters.multiValue?.avatar?.initialValue ?? '',\n  mainText: props.filters.multiValue?.mainText?.initialValue ?? '',\n  secondaryRow: props.filters.multiValue?.secondaryRow?.initialValue ?? '',\n  tertiaryRow: props.filters.multiValue?.tertiaryRow?.initialValue ?? '',\n  amount: props.filters.multiValue?.amount?.initialValue ?? '',\n  tags: props.filters.multiValue?.tags?.initialValue ?? '',\n  time: props.filters.multiValue?.time?.initialValue ?? '',\n});\n\nconst multiValueFiltersModalValues = ref<MobileTableFiltersStatus['multiSelect']>({\n  ...multiValueFiltersValues.value,\n});\n\nconst makeArrUnique = (arr: string[]): string[] => Array.from(new Set(arr));\nconst isDefined = <T,>(value: T | undefined): value is T => value !== undefined;\n\nconst multiValueAvailabeOptions = computed<{\n  mainText: SelectOptions;\n  secondaryRow: SelectOptions;\n  tertiaryRow: SelectOptions;\n  amount: SelectOptions;\n  tags: SelectOptions;\n  time: SelectOptions;\n  avatar: SelectOptions;\n}>(() => {\n  return {\n    mainText: props.filters.multiValue?.mainText\n      ? props.filters.multiValue.mainText.selectOptions ??\n        makeArrUnique(props.data.map(item => item.mainText.label)).map(value => ({ value, label: value }))\n      : [],\n    secondaryRow: props.filters.multiValue?.secondaryRow\n      ? props.filters.multiValue.secondaryRow.selectOptions ??\n        makeArrUnique(props.data.map(item => item.secondaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n      : [],\n    tertiaryRow: props.filters.multiValue?.tertiaryRow\n      ? props.filters.multiValue.tertiaryRow.selectOptions ??\n        makeArrUnique(props.data.map(item => item.tertiaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n      : [],\n    amount: props.filters.multiValue?.amount\n      ? props.filters.multiValue.amount.selectOptions ??\n        makeArrUnique(props.data.map(item => item.amount).filter(isDefined)).map(value => ({ value, label: value }))\n      : [],\n    tags: props.filters.multiValue?.tags\n      ? props.filters.multiValue.tags.selectOptions ??\n        makeArrUnique(props.data.flatMap(item => (item.tags ?? []).map(tag => tag.text).filter(isDefined))).map(value => ({\n          value,\n          label: value,\n        }))\n      : [],\n    time: props.filters.multiValue?.time\n      ? props.filters.multiValue.time.selectOptions ??\n        makeArrUnique(props.data.map(item => item.time).filter(isDefined)).map(value => ({ value, label: value }))\n      : [],\n    avatar: props.filters.multiValue?.avatar\n      ? props.filters.multiValue.avatar.selectOptions ??\n        makeArrUnique(props.data.map(item => item.avatar?.label).filter(isDefined)).map(value => ({ value, label: value }))\n      : [],\n  };\n});\n\nconst filteredData = computed(() => {\n  let data = props.data.slice();\n  if (props.filters.managed) return data;\n  if (props.filters.freeSearch && search.value.trim().length > 0) {\n    const searchParams = props.filters.freeSearch;\n    data = data.filter(item =>\n      searchParams.filterOn.some(filter => {\n        switch (filter) {\n          case 'avatar':\n            return item.avatar && item.avatar.label && matchesSearch(item.avatar.label);\n          case 'time':\n            return item.time && matchesSearch(item.time);\n          case 'mainText':\n            return item.mainText && matchesSearch(item.mainText.label);\n          case 'secondaryRow':\n            return item.secondaryRow && matchesSearch(item.secondaryRow);\n          case 'tertiaryRow':\n            return item.tertiaryRow && matchesSearch(item.tertiaryRow);\n          case 'amount':\n            return item.amount && matchesSearch(item.amount);\n          case 'tags':\n            return item.tags && item.tags.some(tag => matchesSearch(tag.text));\n        }\n      }),\n    );\n  }\n\n  if (props.filters.multiValue) {\n    if (props.filters.multiValue.mainText) {\n      data = data.filter(\n        item =>\n          !multiValueFiltersValues.value.mainText ||\n          multiValueFiltersValues.value.mainText.length === 0 ||\n          multiValueFiltersValues.value.mainText.includes(item.sortableAndFilterableValue ?? item.mainText.label),\n      );\n    }\n    if (props.filters.multiValue.secondaryRow) {\n      data = data.filter(\n        item =>\n          !multiValueFiltersValues.value.secondaryRow ||\n          multiValueFiltersValues.value.secondaryRow.length === 0 ||\n          multiValueFiltersValues.value.secondaryRow.includes(item.sortableAndFilterableValue ?? item.secondaryRow ?? ''),\n      );\n    }\n    if (props.filters.multiValue.tertiaryRow) {\n      data = data.filter(\n        item =>\n          !multiValueFiltersValues.value.tertiaryRow ||\n          multiValueFiltersValues.value.tertiaryRow.length === 0 ||\n          multiValueFiltersValues.value.tertiaryRow.includes(item.sortableAndFilterableValue ?? item.tertiaryRow ?? ''),\n      );\n    }\n    if (props.filters.multiValue.amount) {\n      data = data.filter(\n        item =>\n          !multiValueFiltersValues.value.amount ||\n          multiValueFiltersValues.value.amount.length === 0 ||\n          multiValueFiltersValues.value.amount.includes(item.sortableAndFilterableValue ?? item.amount ?? ''),\n      );\n    }\n    if (props.filters.multiValue.tags) {\n      data = data.filter(\n        item =>\n          !multiValueFiltersValues.value.tags ||\n          multiValueFiltersValues.value.tags.length === 0 ||\n          item.tags?.some(tag => multiValueFiltersValues.value.tags!.includes(tag.text)),\n      );\n    }\n    if (props.filters.multiValue.avatar) {\n      data = data.filter(\n        item =>\n          !multiValueFiltersValues.value.avatar ||\n          multiValueFiltersValues.value.avatar.length === 0 ||\n          multiValueFiltersValues.value.avatar.includes(item.sortableAndFilterableValue ?? item.avatar?.label ?? ''),\n      );\n    }\n  }\n\n  if (props.filters.dateRange?.enabled) {\n    data = data.filter(item => {\n      if (!filterDateFrom.value) return true;\n      return item.time && new Date(item.time).getTime() >= filterDateFrom.value;\n    });\n  }\n\n  if (props.sortBy) {\n    data = data.sort((a, b) => {\n      let result = 0;\n      if (a.sortableAndFilterableValue && b.sortableAndFilterableValue) {\n        result = a.sortableAndFilterableValue.localeCompare(b.sortableAndFilterableValue);\n      } else {\n        switch (props.sortBy!.on) {\n          case 'mainText':\n            result = a.mainText.label.localeCompare(b.mainText.label);\n            break;\n          case 'avatar':\n            result = (a.avatar?.label ?? '').localeCompare(b.avatar?.label ?? '');\n            break;\n          case 'time':\n          case 'secondaryRow':\n          case 'tertiaryRow':\n            result = (a[props.sortBy!.on] ?? '').localeCompare(b[props.sortBy!.on] ?? '');\n            break;\n          case 'amount':\n            const numA = parseFloat(a.amount ?? '0');\n            const numB = parseFloat(b.amount ?? '0');\n            result = numA - numB;\n            break;\n          case 'tags':\n            result = (a.tags?.map(tag => tag.text).join('') ?? '').localeCompare(b.tags?.map(tag => tag.text).join('') ?? '');\n            break;\n        }\n      }\n      if (props.sortBy?.order === 'desc') {\n        result *= -1;\n      }\n      return result;\n    });\n  }\n\n  return data;\n});\n\nconst enabledSelectFilters = computed(() => {\n  return Object.fromEntries(Object.entries(props.filters.multiValue ?? {}).filter(([_, filter]) => filter.enabled));\n});\n\nconst showFiltersButton = computed(() => {\n  return props.filters.dateRange?.enabled || Object.values(props.filters.multiValue ?? {}).some(filter => filter.enabled);\n});\n\nconst hasFiltersApplied = computed(() => {\n  return Object.values(multiValueFiltersValues.value).some(filter => filter.length > 0) || filterDateFrom.value !== 0;\n});\n\nconst selectRows = (rowsIds: string[]) => {\n  const indexes = rowsIds.map(id => getItemIndex({ id: id }));\n  if (props.selection?.selectionMode === 'single' && indexes.length > 0) {\n    selectedItems.value = [indexes.at(0)!];\n  }\n  selectedItems.value.push(...indexes);\n  selectedItems.value = Array.from(new Set(selectedItems.value));\n};\n\nconst selectRow = (rowIndex: number) => {\n  if (props.selection?.selectionMode === 'single') {\n    selectedItems.value = [rowIndex];\n  } else {\n    selectedItems.value.push(rowIndex);\n    selectedItems.value = Array.from(new Set(selectedItems.value));\n  }\n  emit('rows-selected', getSelectedRows());\n};\n\nconst deselectRow = (rowIndex: number) => {\n  selectedItems.value = selectedItems.value.filter(index => index !== rowIndex);\n};\n\nconst getItemIndex = (item: { id: string }) => {\n  const idx = props.data.findIndex(i => i.id === item.id);\n  if (idx === -1) throw new Error(`Item with id ${item.id} not found`);\n  return idx;\n};\n\nconst unselectAllRows = () => {\n  selectedItems.value = [];\n};\n\nconst getDataRows = () => props.data;\n\nconst openFiltersModal = () => {\n  filterModalOpen.value = true;\n};\n\nconst showItemDetails = (item: MobileTableRow) => {\n  selectedItemToShow.value = item;\n};\n\nconst closeItemDetails = () => {\n  selectedItemToShow.value = null;\n};\n\nconst detailsPrimaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>>(() => {\n  if (selectedItemToShow.value?.actions) {\n    return selectedItemToShow.value.actions.primary;\n  } else {\n    return {\n      label: 'Chiudi',\n      onClick: closeItemDetails,\n    };\n  }\n});\nconst detailsSecondaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'> | undefined>(() => {\n  if (selectedItemToShow.value?.actions?.secondary) {\n    return selectedItemToShow.value.actions.secondary;\n  } else if (selectedItemToShow.value?.actions?.primary) {\n    return {\n      label: 'Chiudi',\n      onClick: closeItemDetails,\n    };\n  } else {\n    return undefined;\n  }\n});\nconst detailsTertiaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'> | undefined>(() => {\n  if (selectedItemToShow.value?.actions?.secondary) {\n    return {\n      label: 'Chiudi',\n      onClick: closeItemDetails,\n    };\n  } else {\n    return undefined;\n  }\n});\n\nconst applyFilters = () => {\n  filterModalOpen.value = false;\n  multiValueFiltersValues.value = { ...multiValueFiltersModalValues.value };\n  emitFiltersUpdated();\n};\n\nconst resetFilters = () => {\n  multiValueFiltersValues.value = {\n    avatar: '',\n    time: '',\n    mainText: '',\n    secondaryRow: '',\n    tertiaryRow: '',\n    amount: '',\n    tags: '',\n  };\n  filterDateFrom.value = 0;\n  multiValueFiltersModalValues.value = {\n    avatar: '',\n    time: '',\n    mainText: '',\n    secondaryRow: '',\n    tertiaryRow: '',\n    amount: '',\n    tags: '',\n  };\n  emitFiltersUpdated();\n};\n\nconst emitFiltersUpdated = () => {\n  if (props.filters.managed) {\n    emit('filters-updated', {\n      freeSearch: props.filters.freeSearch ? search.value : undefined,\n      fromDate: props.filters.dateRange ? filterDateFrom.value : undefined,\n      multiSelect: multiValueFiltersValues.value,\n    });\n  }\n};\n\nconst emit = defineEmits<{\n  (event: 'destructive:click', selectedItems: MobileTableRow[]): void;\n  (event: 'bulk:click', selectedItems: MobileTableRow[]): void;\n  (event: 'item:click', item: MobileTableRow): void;\n  (event: 'selection:exit'): void;\n  (event: 'rows-selected', selectedItems: MobileTableRow[]): void;\n  (event: 'filters-updated', filters: MobileTableFiltersStatus): void;\n}>();\n\ndefineExpose({\n  filteredData,\n  selectRows,\n  unselectAllRows,\n  getDataRows,\n  getSelectedRows,\n  closeItemDetails,\n});\n</script>\n\n<template>\n  <div class=\"bg-neutral-surface flex flex-col px-4 pt-2 h-full min-w-80 overflow-auto\">\n    <div v-if=\"!props.selection?.enabled\" class=\"flex flex-row items-center gap-4 pb-2\">\n      <div class=\"flex-grow\">\n        <ElInputText\n          v-if=\"props.filters.freeSearch\"\n          v-model=\"search\"\n          :placeholder=\"props.filters.freeSearch.placeholder ?? 'Cerca'\"\n          :leading-icon=\"{ name: 'MagnifyingGlassIcon' }\"\n        />\n      </div>\n      <ElIconButton\n        v-if=\"showFiltersButton\"\n        :badge=\"hasFiltersApplied\"\n        :badge-color=\"props.color\"\n        :icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n        :class=\"\n          props.color === 'primary'\n            ? 'text-primary hover:text-primary-hover hover:bg-primary-light-hover active:bg-primary-light-active'\n            : 'text-secondary hover:text-secondary-hover hover:bg-secondary-light-hover active:bg-secondary-light-active'\n        \"\n        @click=\"openFiltersModal\"\n      />\n    </div>\n\n    <div v-if=\"props.selection?.enabled\" class=\"py-3 px-4 border-b border-b-neutral-surface grid grid-cols-3\">\n      <div class=\"flex flex-row justify-start items-center\">\n        <ElButton\n          error\n          variant=\"tertiary\"\n          type=\"button\"\n          :label=\"`Elimina (${selectedItems.length})`\"\n          @click=\"$emit('destructive:click', getSelectedRows())\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-center items-center\">\n        <span class=\"text-neutral-darker font-normal text-sm\">\n          <template v-if=\"props.selection.selectedLabel\">\n            {{ props.selection.selectedLabel(selectedItems.length) }}\n          </template>\n          <template v-else-if=\"props.selection.selectionMode !== 'single'\">{{ selectedItems.length }} Selezionati</template>\n        </span>\n      </div>\n    </div>\n    <slot />\n\n    <CustomTransition name=\"fade\">\n      <div class=\"relative\">\n        <ElSpinner\n          v-if=\"props.loading\"\n          label=\"Caricamento dati...\"\n          class=\"p-4 absolute bg-neutral-surface w-full\"\n          :extra-loading-msg-after-seconds=\"3\"\n        />\n      </div>\n    </CustomTransition>\n\n    <div v-if=\"filtersAreApplied && noItemsCountLabel !== true && filteredData.length !== 0\" class=\"pt-3 px-4\">\n      <span class=\"font-semibold text-neutral-darker\">{{\n        props.itemsCountLabel ? props.itemsCountLabel(filteredData.length) : `${filteredData.length} risultati per la tua ricerca`\n      }}</span>\n    </div>\n\n    <ul v-if=\"filteredData.length > 0\" class=\"m-0 flex flex-col flex-grow overflow-y-auto h-full\">\n      <ElListItem\n        v-for=\"item in filteredData\"\n        v-bind=\"item\"\n        :key=\"item.id\"\n        :color=\"props.color\"\n        :model-value=\"props.selection?.enabled ? selectedItems.includes(getItemIndex(item)) : undefined\"\n        @update:model-value=\"v => (v ? selectRow(getItemIndex(item)) : deselectRow(getItemIndex(item)))\"\n        @click=\"\n          () => {\n            $emit('item:click', item);\n            if (!props.selection?.enabled && !props.preventDefaultItemClick) {\n              showItemDetails(item);\n            }\n          }\n        \"\n      />\n      <slot name=\"after-list\" />\n    </ul>\n\n    <div v-else-if=\"!props.loading && filteredData.length === 0\" class=\"flex flex-grow flex-col justify-start items-center pt-8 px-8 gap-3\">\n      <ElIcon\n        name=\"MagnifyingGlassIcon\"\n        class=\"h-8 w-8\"\n        :class=\"props.color === 'primary' ? 'text-primary-active' : 'text-secondary-active'\"\n      />\n      <div class=\"flex flex-col gap-1 text-center\">\n        <span class=\"text-lg font-semibold text-neutral-darker\">Nessun risultato</span>\n        <p class=\"text-neutral-lighter text-sm\">Non abbiamo trovato risultati per questa ricerca. Prova con altre parole chiave.</p>\n      </div>\n    </div>\n\n    <div v-if=\"props.selection?.enabled\" class=\"border-t border-t-neutral-surface flex flex-row justify-between py-5 px-4\">\n      <ElButton size=\"l\" variant=\"tertiary\" label=\"Annulla\" @click=\"$emit('selection:exit')\" />\n      <ElButton\n        v-if=\"props.selection?.bulkActionButton\"\n        :variant=\"props.color\"\n        :label=\"props.selection.bulkActionButton.label(selectedItems.length)\"\n        :disabled=\"selectedItems.length === 0\"\n        size=\"l\"\n        @click=\"\n          $emit(\n            'bulk:click',\n            selectedItems.map(index => props.data[index]),\n          )\n        \"\n      />\n    </div>\n  </div>\n\n  <ElModal\n    size=\"xs\"\n    :is-open=\"selectedItemToShow !== null\"\n    :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n    title=\"Dettaglio\"\n    :color=\"props.color\"\n    :primary-action=\"detailsPrimaryAction\"\n    :secondary-action=\"detailsSecondaryAction\"\n    :tertiary-action=\"detailsTertiaryAction\"\n    @closed=\"closeItemDetails\"\n  >\n    <ul v-if=\"selectedItemToShow\" class=\"m-0 flex flex-col gap-5\">\n      <li v-for=\"(item, i) in selectedItemToShow.details\" :key=\"i\" class=\"flex flex-col gap-1\">\n        <span class=\"text-neutral-lighter\">{{ item.label }}</span>\n        <span v-if=\"item.value.type === 'default'\">{{ item.value.text }}</span>\n        <div v-else-if=\"item.value.type === 'tag'\">\n          <ElTag :text=\"item.value.text\" :color=\"item.value.color\" />\n        </div>\n        <div v-else-if=\"item.value.type === 'avatar'\">\n          <ElAvatar :label=\"item.value.label\" :picture=\"item.value.picture\" size=\"sm\" />\n        </div>\n      </li>\n    </ul>\n  </ElModal>\n\n  <ElModal\n    v-model:is-open=\"filterModalOpen\"\n    size=\"xs\"\n    :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n    title=\"Filtri\"\n    :color=\"props.color\"\n    :primary-action=\"{\n      label: 'Applica filtri',\n      onClick: applyFilters,\n    }\"\n    :secondary-action=\"props.filters.resetButton ? { label: 'Reset', onClick: resetFilters } : undefined\"\n    :tertiary-action=\"{\n      label: 'Chiudi',\n      onClick: () => {\n        filterModalOpen = false;\n      },\n    }\"\n  >\n    <div class=\"flex flex-col gap-6\">\n      <ElInputSelect\n        v-for=\"(filter, key) in enabledSelectFilters\"\n        :key=\"key\"\n        v-model=\"multiValueFiltersModalValues[key as keyof typeof multiValueFiltersModalValues]\"\n        :options=\"multiValueAvailabeOptions[key as keyof typeof multiValueAvailabeOptions]\"\n        :label=\"filter.label\"\n      />\n      <ElInputDate\n        v-if=\"props.filters.dateRange?.enabled\"\n        v-model=\"filterDateFrom\"\n        :label=\"props.filters.dateRange.label\"\n        :placeholder=\"props.filters.dateRange.placeholder\"\n        hidden-error-message\n      />\n    </div>\n  </ElModal>\n</template>\n"],"names":["props","__props","search","ref","selectedItems","selectedItemToShow","filterModalOpen","filterDateFrom","managedSearchDebounceTimeout","watch","newValue","oldValue","emitFiltersUpdated","filtersAreApplied","computed","multiValueFiltersValues","filter","getSelectedRows","index","matchesSearch","value","searchText","_a","part","_b","_d","_c","_f","_e","_h","_g","_j","_i","_l","_k","_n","_m","multiValueFiltersModalValues","makeArrUnique","arr","isDefined","multiValueAvailabeOptions","item","tag","filteredData","data","searchParams","b","result","numA","numB","enabledSelectFilters","_","showFiltersButton","hasFiltersApplied","selectRows","rowsIds","indexes","id","getItemIndex","selectRow","rowIndex","emit","deselectRow","idx","i","unselectAllRows","getDataRows","openFiltersModal","showItemDetails","closeItemDetails","detailsPrimaryAction","detailsSecondaryAction","detailsTertiaryAction","applyFilters","resetFilters","__emit","__expose"],"mappings":"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"}
+{"version":3,"file":"ElMobileTable.vue.esm2.js","sources":["../../../src/table/ElMobileTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ElListItem, { ElListItemProps } from '@/ElListItem.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElButton, { ElButtonProps } from '@/ElButton.vue';\nimport { computed, ref, watch } from 'vue';\nimport ElTag, { ElTagColor } from '@/ElTag.vue';\nimport ElModal from '@/ElModal.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport { OptionType } from '@/types';\n\nexport type SelectOptions = OptionType[];\n\nexport type MobileTableFiltersStatus = {\n  freeSearch?: string;\n  fromDate?: number;\n  multiSelect: {\n    mainText?: string;\n    secondaryRow?: string;\n    tertiaryRow?: string;\n    tags?: string;\n    time?: string;\n    amount?: string;\n    avatar?: string;\n  };\n};\n\nexport type MobileTableFilter = {\n  freeSearch?: {\n    placeholder?: string;\n    filterOn: ('mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'tags' | 'time' | 'avatar')[];\n    initialValue?: string;\n  };\n  multiValue?: {\n    mainText?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n    secondaryRow?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n    tertiaryRow?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n    amount?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n    tags?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n    time?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n    avatar?: {\n      enabled: boolean;\n      label: string;\n      selectOptions?: SelectOptions;\n      initialValue?: string;\n    };\n  };\n  dateRange?: {\n    enabled: boolean;\n    label: string;\n    initialValue?: number;\n    placeholder?: string;\n  };\n  resetButton?: boolean;\n  // if true filters won't be applied by the table (used for server side table)\n  managed?: boolean;\n};\n\nexport type MobileTableRow = Omit<ElListItemProps, 'color'> & {\n  id: string;\n  rowNotSelectable?: boolean;\n  relatedObject?: any;\n  clickAction?: (payload: PointerEvent) => void;\n  actions?: {\n    primary: InstanceType<typeof ElButton>['$props'];\n    secondary?: InstanceType<typeof ElButton>['$props'];\n  };\n  sortableAndFilterableValue?: string;\n  details: {\n    label: string;\n    value:\n      | { type?: 'default'; text: string }\n      | { type: 'tag'; text: string; color?: ElTagColor }\n      | { type: 'avatar'; label?: string; picture?: string };\n  }[];\n};\n\nexport interface ElMobileTableProps {\n  color: 'primary' | 'secondary';\n  filters: MobileTableFilter;\n  loading?: boolean;\n  preventDefaultItemClick?: boolean;\n  selection?: {\n    enabled: boolean;\n    selectionMode?: 'single' | 'multiple'; // defaults to multiple\n    destructiveAction?: {\n      enabled: boolean;\n      button: Omit<ElButtonProps, 'variant' | 'type' | 'label' | 'error' | 'onClick'> & { label?: (count: number) => string };\n    };\n    bulkActionButton: Omit<ElButtonProps, 'variant' | 'type' | 'label' | 'error' | 'onClick'> & { label: (count: number) => string };\n    selectedLabel?: (selectionCount: number) => string;\n    cancelText?: (selectionCount: number) => string;\n  };\n  sortBy?: {\n    on: 'mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'tags' | 'time' | 'avatar';\n    order: 'asc' | 'desc';\n  };\n  itemsCountLabel?: (count: number) => string;\n  noItemsCountLabel?: boolean;\n  data: MobileTableRow[];\n}\n\nconst props = defineProps<ElMobileTableProps>();\n\nconst search = ref<string>('');\nconst selectedItems = ref<number[]>([]);\nconst selectedItemToShow = ref<MobileTableRow | null>(null);\nconst filterModalOpen = ref(false);\nconst filterDateFrom = ref<number>(0);\nconst managedSearchDebounceTimeout = ref<ReturnType<typeof setTimeout> | undefined>(undefined);\n\nwatch(search, (newValue, oldValue) => {\n  if (managedSearchDebounceTimeout.value) {\n    clearTimeout(managedSearchDebounceTimeout.value);\n  }\n  managedSearchDebounceTimeout.value = setTimeout(() => {\n    if (oldValue !== newValue) {\n      emitFiltersUpdated();\n    }\n  }, 500);\n});\n\nconst filtersAreApplied = computed(() => {\n  return (\n    search.value.trim().length > 0 ||\n    Object.values(multiValueFiltersValues.value).some(filter => filter && filter.trim().length > 0) ||\n    filterDateFrom.value !== 0\n  );\n});\n\nconst getSelectedRows = () => selectedItems.value.map(index => props.data[index]);\n\nconst matchesSearch = (value: string): boolean => {\n  const searchText = search.value?.trim();\n  if (!searchText) return true;\n  return value.split(' ').some(part => part.toLowerCase().includes(searchText.toLowerCase()));\n};\n\nconst multiValueFiltersValues = ref<MobileTableFiltersStatus['multiSelect']>({\n  avatar: props.filters.multiValue?.avatar?.initialValue ?? '',\n  mainText: props.filters.multiValue?.mainText?.initialValue ?? '',\n  secondaryRow: props.filters.multiValue?.secondaryRow?.initialValue ?? '',\n  tertiaryRow: props.filters.multiValue?.tertiaryRow?.initialValue ?? '',\n  amount: props.filters.multiValue?.amount?.initialValue ?? '',\n  tags: props.filters.multiValue?.tags?.initialValue ?? '',\n  time: props.filters.multiValue?.time?.initialValue ?? '',\n});\n\nconst multiValueFiltersModalValues = ref<MobileTableFiltersStatus['multiSelect']>({\n  ...multiValueFiltersValues.value,\n});\n\nconst makeArrUnique = (arr: string[]): string[] => Array.from(new Set(arr));\nconst isDefined = <T,>(value: T | undefined): value is T => value !== undefined;\n\nconst multiValueAvailabeOptions = computed<{\n  mainText: SelectOptions;\n  secondaryRow: SelectOptions;\n  tertiaryRow: SelectOptions;\n  amount: SelectOptions;\n  tags: SelectOptions;\n  time: SelectOptions;\n  avatar: SelectOptions;\n}>(() => {\n  return {\n    mainText: props.filters.multiValue?.mainText\n      ? props.filters.multiValue.mainText.selectOptions ??\n        makeArrUnique(props.data.map(item => item.mainText.label)).map(value => ({ value, label: value }))\n      : [],\n    secondaryRow: props.filters.multiValue?.secondaryRow\n      ? props.filters.multiValue.secondaryRow.selectOptions ??\n        makeArrUnique(props.data.map(item => item.secondaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n      : [],\n    tertiaryRow: props.filters.multiValue?.tertiaryRow\n      ? props.filters.multiValue.tertiaryRow.selectOptions ??\n        makeArrUnique(props.data.map(item => item.tertiaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n      : [],\n    amount: props.filters.multiValue?.amount\n      ? props.filters.multiValue.amount.selectOptions ??\n        makeArrUnique(props.data.map(item => item.amount).filter(isDefined)).map(value => ({ value, label: value }))\n      : [],\n    tags: props.filters.multiValue?.tags\n      ? props.filters.multiValue.tags.selectOptions ??\n        makeArrUnique(props.data.flatMap(item => (item.tags ?? []).map(tag => tag.text).filter(isDefined))).map(value => ({\n          value,\n          label: value,\n        }))\n      : [],\n    time: props.filters.multiValue?.time\n      ? props.filters.multiValue.time.selectOptions ??\n        makeArrUnique(props.data.map(item => item.time).filter(isDefined)).map(value => ({ value, label: value }))\n      : [],\n    avatar: props.filters.multiValue?.avatar\n      ? props.filters.multiValue.avatar.selectOptions ??\n        makeArrUnique(props.data.map(item => item.avatar?.label).filter(isDefined)).map(value => ({ value, label: value }))\n      : [],\n  };\n});\n\nconst filteredData = computed(() => {\n  let data = props.data.slice();\n  if (props.filters.managed) return data;\n  if (props.filters.freeSearch && search.value.trim().length > 0) {\n    const searchParams = props.filters.freeSearch;\n    data = data.filter(item =>\n      searchParams.filterOn.some(filter => {\n        switch (filter) {\n          case 'avatar':\n            return item.avatar && item.avatar.label && matchesSearch(item.avatar.label);\n          case 'time':\n            return item.time && matchesSearch(item.time);\n          case 'mainText':\n            return item.mainText && matchesSearch(item.mainText.label);\n          case 'secondaryRow':\n            return item.secondaryRow && matchesSearch(item.secondaryRow);\n          case 'tertiaryRow':\n            return item.tertiaryRow && matchesSearch(item.tertiaryRow);\n          case 'amount':\n            return item.amount && matchesSearch(item.amount);\n          case 'tags':\n            return item.tags && item.tags.some(tag => matchesSearch(tag.text));\n        }\n      }),\n    );\n  }\n\n  if (props.filters.multiValue) {\n    if (props.filters.multiValue.mainText) {\n      data = data.filter(\n        item =>\n          !multiValueFiltersValues.value.mainText ||\n          multiValueFiltersValues.value.mainText.length === 0 ||\n          multiValueFiltersValues.value.mainText.includes(item.sortableAndFilterableValue ?? item.mainText.label),\n      );\n    }\n    if (props.filters.multiValue.secondaryRow) {\n      data = data.filter(\n        item =>\n          !multiValueFiltersValues.value.secondaryRow ||\n          multiValueFiltersValues.value.secondaryRow.length === 0 ||\n          multiValueFiltersValues.value.secondaryRow.includes(item.sortableAndFilterableValue ?? item.secondaryRow ?? ''),\n      );\n    }\n    if (props.filters.multiValue.tertiaryRow) {\n      data = data.filter(\n        item =>\n          !multiValueFiltersValues.value.tertiaryRow ||\n          multiValueFiltersValues.value.tertiaryRow.length === 0 ||\n          multiValueFiltersValues.value.tertiaryRow.includes(item.sortableAndFilterableValue ?? item.tertiaryRow ?? ''),\n      );\n    }\n    if (props.filters.multiValue.amount) {\n      data = data.filter(\n        item =>\n          !multiValueFiltersValues.value.amount ||\n          multiValueFiltersValues.value.amount.length === 0 ||\n          multiValueFiltersValues.value.amount.includes(item.sortableAndFilterableValue ?? item.amount ?? ''),\n      );\n    }\n    if (props.filters.multiValue.tags) {\n      data = data.filter(\n        item =>\n          !multiValueFiltersValues.value.tags ||\n          multiValueFiltersValues.value.tags.length === 0 ||\n          item.tags?.some(tag => multiValueFiltersValues.value.tags!.includes(tag.text)),\n      );\n    }\n    if (props.filters.multiValue.avatar) {\n      data = data.filter(\n        item =>\n          !multiValueFiltersValues.value.avatar ||\n          multiValueFiltersValues.value.avatar.length === 0 ||\n          multiValueFiltersValues.value.avatar.includes(item.sortableAndFilterableValue ?? item.avatar?.label ?? ''),\n      );\n    }\n  }\n\n  if (props.filters.dateRange?.enabled) {\n    data = data.filter(item => {\n      if (!filterDateFrom.value) return true;\n      return item.time && new Date(item.time).getTime() >= filterDateFrom.value;\n    });\n  }\n\n  if (props.sortBy) {\n    data = data.sort((a, b) => {\n      let result = 0;\n      if (a.sortableAndFilterableValue && b.sortableAndFilterableValue) {\n        result = a.sortableAndFilterableValue.localeCompare(b.sortableAndFilterableValue);\n      } else {\n        switch (props.sortBy!.on) {\n          case 'mainText':\n            result = a.mainText.label.localeCompare(b.mainText.label);\n            break;\n          case 'avatar':\n            result = (a.avatar?.label ?? '').localeCompare(b.avatar?.label ?? '');\n            break;\n          case 'time':\n          case 'secondaryRow':\n          case 'tertiaryRow':\n            result = (a[props.sortBy!.on] ?? '').localeCompare(b[props.sortBy!.on] ?? '');\n            break;\n          case 'amount':\n            const numA = parseFloat(a.amount ?? '0');\n            const numB = parseFloat(b.amount ?? '0');\n            result = numA - numB;\n            break;\n          case 'tags':\n            result = (a.tags?.map(tag => tag.text).join('') ?? '').localeCompare(b.tags?.map(tag => tag.text).join('') ?? '');\n            break;\n        }\n      }\n      if (props.sortBy?.order === 'desc') {\n        result *= -1;\n      }\n      return result;\n    });\n  }\n\n  return data;\n});\n\nconst enabledSelectFilters = computed(() => {\n  return Object.fromEntries(Object.entries(props.filters.multiValue ?? {}).filter(([_, filter]) => filter.enabled));\n});\n\nconst showFiltersButton = computed(() => {\n  return props.filters.dateRange?.enabled || Object.values(props.filters.multiValue ?? {}).some(filter => filter.enabled);\n});\n\nconst hasFiltersApplied = computed(() => {\n  return Object.values(multiValueFiltersValues.value).some(filter => filter.length > 0) || filterDateFrom.value !== 0;\n});\n\nconst selectRows = (rowsIds: string[]) => {\n  const indexes = rowsIds.map(id => getItemIndex({ id: id }));\n  if (props.selection?.selectionMode === 'single' && indexes.length > 0) {\n    selectedItems.value = [indexes.at(0)!];\n  }\n  selectedItems.value.push(...indexes);\n  selectedItems.value = Array.from(new Set(selectedItems.value));\n};\n\nconst selectRow = (rowIndex: number) => {\n  if (props.selection?.selectionMode === 'single') {\n    selectedItems.value = [rowIndex];\n  } else {\n    selectedItems.value.push(rowIndex);\n    selectedItems.value = Array.from(new Set(selectedItems.value));\n  }\n  emit('rows-selected', getSelectedRows());\n};\n\nconst deselectRow = (rowIndex: number) => {\n  selectedItems.value = selectedItems.value.filter(index => index !== rowIndex);\n};\n\nconst getItemIndex = (item: { id: string }) => {\n  const idx = props.data.findIndex(i => i.id === item.id);\n  if (idx === -1) throw new Error(`Item with id ${item.id} not found`);\n  return idx;\n};\n\nconst unselectAllRows = () => {\n  selectedItems.value = [];\n};\n\nconst getDataRows = () => props.data;\n\nconst openFiltersModal = () => {\n  filterModalOpen.value = true;\n};\n\nconst showItemDetails = (item: MobileTableRow) => {\n  selectedItemToShow.value = item;\n};\n\nconst closeItemDetails = () => {\n  selectedItemToShow.value = null;\n};\n\nconst detailsPrimaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>>(() => {\n  if (selectedItemToShow.value?.actions) {\n    return selectedItemToShow.value.actions.primary;\n  } else {\n    return {\n      label: 'Chiudi',\n      onClick: closeItemDetails,\n    };\n  }\n});\nconst detailsSecondaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'> | undefined>(() => {\n  if (selectedItemToShow.value?.actions?.secondary) {\n    return selectedItemToShow.value.actions.secondary;\n  } else if (selectedItemToShow.value?.actions?.primary) {\n    return {\n      label: 'Chiudi',\n      onClick: closeItemDetails,\n    };\n  } else {\n    return undefined;\n  }\n});\nconst detailsTertiaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'> | undefined>(() => {\n  if (selectedItemToShow.value?.actions?.secondary) {\n    return {\n      label: 'Chiudi',\n      onClick: closeItemDetails,\n    };\n  } else {\n    return undefined;\n  }\n});\n\nconst applyFilters = () => {\n  filterModalOpen.value = false;\n  multiValueFiltersValues.value = { ...multiValueFiltersModalValues.value };\n  emitFiltersUpdated();\n};\n\nconst resetFilters = () => {\n  multiValueFiltersValues.value = {\n    avatar: '',\n    time: '',\n    mainText: '',\n    secondaryRow: '',\n    tertiaryRow: '',\n    amount: '',\n    tags: '',\n  };\n  filterDateFrom.value = 0;\n  multiValueFiltersModalValues.value = {\n    avatar: '',\n    time: '',\n    mainText: '',\n    secondaryRow: '',\n    tertiaryRow: '',\n    amount: '',\n    tags: '',\n  };\n  emitFiltersUpdated();\n};\n\nconst emitFiltersUpdated = () => {\n  if (props.filters.managed) {\n    emit('filters-updated', {\n      freeSearch: props.filters.freeSearch ? search.value : undefined,\n      fromDate: props.filters.dateRange ? filterDateFrom.value : undefined,\n      multiSelect: multiValueFiltersValues.value,\n    });\n  }\n};\n\nconst emit = defineEmits<{\n  (event: 'destructive:click', selectedItems: MobileTableRow[]): void;\n  (event: 'bulk:click', selectedItems: MobileTableRow[]): void;\n  (event: 'item:click', item: MobileTableRow): void;\n  (event: 'selection:exit'): void;\n  (event: 'rows-selected', selectedItems: MobileTableRow[]): void;\n  (event: 'filters-updated', filters: MobileTableFiltersStatus): void;\n}>();\n\ndefineExpose({\n  filteredData,\n  selectRows,\n  unselectAllRows,\n  getDataRows,\n  getSelectedRows,\n  closeItemDetails,\n});\n</script>\n\n<template>\n  <div class=\"bg-neutral-surface flex flex-col px-4 pt-2 h-full min-w-80 overflow-auto\">\n    <div v-if=\"!props.selection?.enabled\" class=\"flex flex-row items-center gap-4 pb-2\">\n      <div class=\"flex-grow\">\n        <ElInputText\n          v-if=\"props.filters.freeSearch\"\n          v-model=\"search\"\n          :placeholder=\"props.filters.freeSearch.placeholder ?? 'Cerca'\"\n          :leading-icon=\"{ name: 'MagnifyingGlassIcon' }\"\n        />\n      </div>\n      <ElIconButton\n        v-if=\"showFiltersButton\"\n        :badge=\"hasFiltersApplied\"\n        :badge-color=\"props.color\"\n        :icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n        :class=\"\n          props.color === 'primary'\n            ? 'text-primary hover:text-primary-hover hover:bg-primary-light-hover active:bg-primary-light-active'\n            : 'text-secondary hover:text-secondary-hover hover:bg-secondary-light-hover active:bg-secondary-light-active'\n        \"\n        @click=\"openFiltersModal\"\n      />\n    </div>\n\n    <div v-if=\"props.selection?.enabled\" class=\"py-3 px-4 border-b border-b-neutral-surface grid grid-cols-3\">\n      <div class=\"flex flex-row justify-start items-center\">\n        <ElButton\n          error\n          variant=\"tertiary\"\n          type=\"button\"\n          :label=\"`Elimina (${selectedItems.length})`\"\n          @click=\"$emit('destructive:click', getSelectedRows())\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-center items-center\">\n        <span class=\"text-neutral-darker font-normal text-sm\">\n          <template v-if=\"props.selection.selectedLabel\">\n            {{ props.selection.selectedLabel(selectedItems.length) }}\n          </template>\n          <template v-else-if=\"props.selection.selectionMode !== 'single'\">{{ selectedItems.length }} Selezionati</template>\n        </span>\n      </div>\n    </div>\n    <slot />\n\n    <CustomTransition name=\"fade\">\n      <div class=\"relative\">\n        <ElSpinner\n          v-if=\"props.loading\"\n          label=\"Caricamento dati...\"\n          class=\"p-4 absolute bg-neutral-surface w-full\"\n          :extra-loading-msg-after-seconds=\"3\"\n        />\n      </div>\n    </CustomTransition>\n\n    <div v-if=\"filtersAreApplied && noItemsCountLabel !== true && filteredData.length !== 0\" class=\"pt-3 px-4\">\n      <span class=\"font-semibold text-neutral-darker\">{{\n        props.itemsCountLabel ? props.itemsCountLabel(filteredData.length) : `${filteredData.length} risultati per la tua ricerca`\n      }}</span>\n    </div>\n\n    <ul v-if=\"filteredData.length > 0\" class=\"m-0 flex flex-col flex-grow overflow-y-auto h-full\">\n      <ElListItem\n        v-for=\"item in filteredData\"\n        v-bind=\"item\"\n        :key=\"item.id\"\n        :color=\"props.color\"\n        :model-value=\"props.selection?.enabled ? selectedItems.includes(getItemIndex(item)) : undefined\"\n        @update:model-value=\"v => (v ? selectRow(getItemIndex(item)) : deselectRow(getItemIndex(item)))\"\n        @click=\"\n          () => {\n            $emit('item:click', item);\n            if (!props.selection?.enabled && !props.preventDefaultItemClick) {\n              showItemDetails(item);\n            }\n          }\n        \"\n      />\n      <slot name=\"after-list\" />\n    </ul>\n\n    <div v-else-if=\"!props.loading && filteredData.length === 0\" class=\"flex flex-grow flex-col justify-start items-center pt-8 px-8 gap-3\">\n      <ElIcon\n        name=\"MagnifyingGlassIcon\"\n        class=\"h-8 w-8\"\n        :class=\"props.color === 'primary' ? 'text-primary-active' : 'text-secondary-active'\"\n      />\n      <div class=\"flex flex-col gap-1 text-center\">\n        <span class=\"text-lg font-semibold text-neutral-darker\">Nessun risultato</span>\n        <p class=\"text-neutral-lighter text-sm\">Non abbiamo trovato risultati per questa ricerca. Prova con altre parole chiave.</p>\n      </div>\n    </div>\n\n    <div v-if=\"props.selection?.enabled\" class=\"border-t border-t-neutral-surface flex flex-row justify-between py-5 px-4\">\n      <ElButton size=\"l\" variant=\"tertiary\" label=\"Annulla\" @click=\"$emit('selection:exit')\" />\n      <ElButton\n        v-if=\"props.selection?.bulkActionButton\"\n        :variant=\"props.color\"\n        :label=\"props.selection.bulkActionButton.label(selectedItems.length)\"\n        :disabled=\"selectedItems.length === 0\"\n        size=\"l\"\n        @click=\"\n          $emit(\n            'bulk:click',\n            selectedItems.map(index => props.data[index]),\n          )\n        \"\n      />\n    </div>\n  </div>\n\n  <ElModal\n    size=\"xs\"\n    :is-open=\"selectedItemToShow !== null\"\n    :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n    title=\"Dettaglio\"\n    :color=\"props.color\"\n    :primary-action=\"detailsPrimaryAction\"\n    :secondary-action=\"detailsSecondaryAction\"\n    :tertiary-action=\"detailsTertiaryAction\"\n    @closed=\"closeItemDetails\"\n  >\n    <ul v-if=\"selectedItemToShow\" class=\"m-0 flex flex-col gap-5\">\n      <li v-for=\"(item, i) in selectedItemToShow.details\" :key=\"i\" class=\"flex flex-col gap-1\">\n        <span class=\"text-neutral-lighter\">{{ item.label }}</span>\n        <span v-if=\"item.value.type === 'default'\">{{ item.value.text }}</span>\n        <div v-else-if=\"item.value.type === 'tag'\">\n          <ElTag :text=\"item.value.text\" :color=\"item.value.color\" />\n        </div>\n        <div v-else-if=\"item.value.type === 'avatar'\">\n          <ElAvatar :label=\"item.value.label\" :picture=\"item.value.picture\" size=\"sm\" />\n        </div>\n      </li>\n    </ul>\n  </ElModal>\n\n  <ElModal\n    v-model:is-open=\"filterModalOpen\"\n    size=\"xs\"\n    :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n    title=\"Filtri\"\n    :color=\"props.color\"\n    :primary-action=\"{\n      label: 'Applica filtri',\n      onClick: applyFilters,\n    }\"\n    :secondary-action=\"props.filters.resetButton ? { label: 'Reset', onClick: resetFilters } : undefined\"\n    :tertiary-action=\"{\n      label: 'Chiudi',\n      onClick: () => {\n        filterModalOpen = false;\n      },\n    }\"\n  >\n    <div class=\"flex flex-col gap-6\">\n      <ElInputSelect\n        v-for=\"(filter, key) in enabledSelectFilters\"\n        :key=\"key\"\n        v-model=\"multiValueFiltersModalValues[key as keyof typeof multiValueFiltersModalValues]\"\n        :options=\"multiValueAvailabeOptions[key as keyof typeof multiValueAvailabeOptions]\"\n        :label=\"filter.label\"\n      />\n      <ElInputDate\n        v-if=\"props.filters.dateRange?.enabled\"\n        v-model=\"filterDateFrom\"\n        :label=\"props.filters.dateRange.label\"\n        :placeholder=\"props.filters.dateRange.placeholder\"\n        hidden-error-message\n      />\n    </div>\n  </ElModal>\n</template>\n"],"names":["props","__props","search","ref","selectedItems","selectedItemToShow","filterModalOpen","filterDateFrom","managedSearchDebounceTimeout","watch","newValue","oldValue","emitFiltersUpdated","filtersAreApplied","computed","multiValueFiltersValues","filter","getSelectedRows","index","matchesSearch","value","searchText","_a","part","_b","_d","_c","_f","_e","_h","_g","_j","_i","_l","_k","_n","_m","multiValueFiltersModalValues","makeArrUnique","arr","isDefined","multiValueAvailabeOptions","item","tag","filteredData","data","searchParams","b","result","numA","numB","enabledSelectFilters","_","showFiltersButton","hasFiltersApplied","selectRows","rowsIds","indexes","id","getItemIndex","selectRow","rowIndex","emit","deselectRow","idx","i","unselectAllRows","getDataRows","openFiltersModal","showItemDetails","closeItemDetails","detailsPrimaryAction","detailsSecondaryAction","detailsTertiaryAction","applyFilters","resetFilters","__emit","__expose"],"mappings":"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"}

package/dist/src/table/ElServerSideTable.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElServerSideTable.vue.cjs2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n  title: string;\n  filter?: TableColumnFilter;\n  alignRight?: boolean;\n  noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n  | TableColumnFilterFreeSearch\n  | TableColumnFilterDateRange\n  | TableColumnFilterMultiValue\n  | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n  id?: string;\n  type: Extract<FilterType, 'FREE_SEARCH'>;\n  placeholder?: string;\n  initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n  id?: string;\n  type: Extract<FilterType, 'DATE_RANGE'>;\n  placeholder?: string;\n  initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n  id?: string;\n  type: Extract<FilterType, 'MULTI_VALUE'>;\n  selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n  initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n  type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n  sortStatus: SortStatus;\n  paginationStatus: {\n    currentPage: number;\n  };\n  filterStatus: FilterStatus[];\n  triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n  columnToSort: number;\n  order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n  columns: TableColumn[];\n  sortByCol?: number; // initial sort by column\n  sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n  noFilters?: boolean;\n  noFooter?: boolean;\n  rowsSelectionMode?: 'single' | 'multiple';\n  rowsSelectionDisabled?: boolean;\n  rowsPerPage?: number;\n  dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus;\n\nexport type TextFilterStatus = {\n  id?: string;\n  textSearch: string;\n  columnTitle: string;\n  type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n  id?: string;\n  dateFrom: number;\n  columnTitle: string;\n  type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\nimport { useDebounceFn } from '@vueuse/core';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n  sortByCol: -1,\n  sortByColAsc: false,\n  rowsSelectionMode: undefined,\n  rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n  (event: 'rows-selected', rows: DataRow[]): void;\n  (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: 0,\n    },\n    sortStatus: currentSortStatus.value,\n    filterStatus: filterStatus.value,\n    triggeredEvent: 'firstLoad',\n  });\n  currentPageDataRows.value = newData.data;\n  totalRowsCount.value = newData.totalRows;\n  loading.value = false;\n});\n\nfunction usePagination() {\n  const totalRowsCount = ref(0);\n  const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n  const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n  const newPageSelected = async (newPage: number) => {\n    loading.value = true;\n    currentPageDataRows.value = (\n      await props.dataController({\n        paginationStatus: {\n          currentPage: newPage,\n        },\n        sortStatus: currentSortStatus.value,\n        filterStatus: filterStatus.value,\n        triggeredEvent: 'paginate',\n      })\n    ).data;\n    loading.value = false;\n  };\n\n  return {\n    newPageSelected,\n    totalRowsCount,\n    currentPage,\n    goToFirstPage,\n  };\n}\n\nfunction useSorting() {\n  const sortStatus = ref<{\n    currentlySortColIndex: number;\n    arrows: boolean[];\n  }>({\n    currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n    arrows: [],\n  });\n\n  const resetSort = () => {\n    sortStatus.value = {\n      currentlySortColIndex: -1,\n      arrows: [],\n    };\n  };\n  const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n    return {\n      columnToSort: sortStatus.value.currentlySortColIndex,\n      order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n    };\n  });\n\n  onMounted(async () => {\n    sortStatus.value.arrows = new Array(MAX_COLS);\n    if (props.sortByCol > -1) {\n      sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n    }\n  });\n\n  const toggleSortArrow = async (colIndex: number) => {\n    sortStatus.value.currentlySortColIndex = colIndex;\n    sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n    loading.value = true;\n    try {\n      const newData = await props.dataController({\n        paginationStatus: {\n          currentPage: currentPage.value,\n        },\n        sortStatus: currentSortStatus.value,\n        filterStatus: filterStatus.value,\n        triggeredEvent: 'sort',\n      });\n      currentPageDataRows.value = newData.data;\n      totalRowsCount.value = newData.totalRows;\n    } catch (error) {\n      // TODO handle error\n      console.error(error);\n    } finally {\n      loading.value = false;\n    }\n  };\n\n  return {\n    sortStatus,\n    toggleSortArrow,\n    currentSortStatus,\n    resetSort,\n  };\n}\n\nfunction useFilters() {\n  const filterStatus = ref<FilterStatus[]>([]);\n  const isResettingFilters = ref(false);\n\n  onMounted(() => {\n    resetFilters();\n    watchDeep(filterStatus, async filters => {\n      if (isResettingFilters.value) {\n        applyFilters(filters);\n        isResettingFilters.value = false;\n      } else {\n        applyFiltersDebounced(filters);\n      }\n    });\n  });\n\n  const resetFilters = () => {\n    isResettingFilters.value = true;\n\n    filterStatus.value = new Array(MAX_COLS);\n    for (let i = 0; i < MAX_COLS; i++) {\n      const filter = props.columns[i]?.filter;\n      if (filter) {\n        if (filter.type === 'FREE_SEARCH') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            textSearch: filter.initialValue ?? '',\n            type: 'FREE_SEARCH',\n            columnTitle: props.columns[i].title,\n          });\n        } else if (filter.type === 'MULTI_VALUE') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            textSearch: filter.initialValue ?? '',\n            type: 'MULTI_VALUE',\n            columnTitle: props.columns[i].title,\n          });\n        } else if (filter.type === 'DATE_RANGE') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            dateFrom: filter.initialValue ?? 0,\n            type: 'DATE_RANGE',\n            columnTitle: props.columns[i].title,\n          });\n        }\n      }\n    }\n  };\n\n  const applyFilters = async (filters: FilterStatus[]) => {\n    console.log('applyFilters');\n    loading.value = true;\n    goToFirstPage();\n    const newData = await props.dataController({\n      paginationStatus: {\n        currentPage: currentPage.value,\n      },\n      sortStatus: currentSortStatus.value,\n      filterStatus: filters,\n      triggeredEvent: 'filter',\n    });\n    currentPageDataRows.value = newData.data;\n    totalRowsCount.value = newData.totalRows;\n    loading.value = false;\n  };\n\n  const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n  return {\n    filterStatus,\n    resetFilters,\n  };\n}\n\nfunction useRowsSelection() {\n  const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n  const emitRowsSelected = () => {\n    emit('rows-selected', selectedRows.value);\n  };\n\n  const rowsSelected = (rows: DataRow[]) => {\n    selectRows(rows.map(r => r.id));\n  };\n\n  const rowUnselected = (rowId: string) => {\n    const index = selectedRows.value.findIndex(r => r.id === rowId);\n    selectedRows.value.splice(index, 1);\n    emitRowsSelected();\n  };\n\n  // select the rows with the given ids, possibly in addition to the rows that are already selected\n  const selectRows = async (rowsIds: string[]) => {\n    if (props.rowsSelectionMode === 'single') {\n      selectedRows.value = [];\n      await nextTick();\n    }\n    const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n    if (props.rowsSelectionMode === 'single') {\n      rowsToSelect.length = Math.min(1, rowsToSelect.length);\n    }\n\n    for (const row of rowsToSelect) {\n      if (!selectedRows.value.some(r => r.id === row.id)) {\n        selectedRows.value.push(row);\n      }\n    }\n\n    emitRowsSelected();\n  };\n\n  const unselectAllRows = () => {\n    selectedRows.value = [];\n    emitRowsSelected();\n  };\n\n  const getDataRows = (): DataRow[] => currentPageDataRows.value;\n  const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n  const allRowsSelected = computed(() => {\n    return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n  });\n\n  return {\n    selectedRows,\n    rowsSelected,\n    rowUnselected,\n    selectRows,\n    unselectAllRows,\n    getDataRows,\n    getSelectedRows,\n    allRowsSelected,\n  };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n  useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n  // Resetting filters and sort will trigger the dataController\n  resetSort();\n  resetFilters();\n  unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n  loading.value = true;\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: currentPage.value,\n    },\n    sortStatus: currentSortStatus.value,\n    filterStatus: filterStatus.value,\n    triggeredEvent: 'trigger',\n  });\n  currentPageDataRows.value = newData.data;\n  totalRowsCount.value = newData.totalRows;\n  loading.value = false;\n};\n\nwatch(\n  () => props.columns,\n  () => resetFilters(),\n  { deep: true, immediate: true },\n);\n\ndefineExpose({\n  selectRows,\n  resetAllAndFetch,\n  unselectAllRows,\n  getDataRows,\n  getSelectedRows,\n  triggerDataController,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col\">\n    <div class=\"overflow-x-auto\">\n      <div class=\"inline-block min-w-full bg-white align-middle\">\n        <table class=\"min-w-full\">\n          <thead>\n            <tr class=\"bg-neutral-surface-raised font-semibold\">\n              <th\n                v-if=\"rowsSelectionMode\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n                :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n              >\n                <ElInputCheckbox\n                  v-if=\"rowsSelectionMode === 'multiple'\"\n                  :model-value=\"allRowsSelected\"\n                  :disabled=\"rowsSelectionDisabled\"\n                  size=\"xxs\"\n                  @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n                />\n                <div v-else class=\"w-7\" />\n              </th>\n              <th\n                v-for=\"(col, index) in props.columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n                :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n                :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n                @click=\"!col.noSort && toggleSortArrow(index)\"\n              >\n                {{ col.title }}\n\n                <!-- //////////////////// SORT //////////////////////////// -->\n                <svg\n                  v-if=\"!col.noSort\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  class=\"ml-1 inline-flex h-3 w-3\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    v-if=\"sortStatus.arrows[index]\"\n                    d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n                  />\n                  <path\n                    v-else\n                    d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n                    title=\"Ordine Decrescente\"\n                  />\n                </svg>\n              </th>\n            </tr>\n            <!-- ///////////////////// FILTERS ///////////////////////// -->\n            <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n              <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n              <th\n                v-for=\"(col, index) in columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n              >\n                <!-- FILTER: TEXT SEARCH -->\n                <ElInputText\n                  v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index].type === 'FREE_SEARCH'\"\n                  v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n                  :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n                  :hidden-error-message=\"true\"\n                  :leading-icon=\"{\n                    name: 'MagnifyingGlassIcon',\n                  }\"\n                />\n\n                <!-- FILTER: DATE RANGE -->\n                <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index].type === 'DATE_RANGE'\" class=\"flex flex-col\">\n                  <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n                </div>\n\n                <!-- FILTER: MULTIPLE VALUES -->\n                <ElInputSelect\n                  v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index].type === 'MULTI_VALUE'\"\n                  v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n                  class=\"flex flex-col\"\n                  type=\"autocomplete\"\n                  :options=\"col.filter.selectOptions\"\n                  :hidden-error-message=\"true\"\n                />\n\n                <!-- TODO: change with new button when it'll be available in DS version 2 -->\n                <!-- FILTER: RESET -->\n\n                <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n                  <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <CustomTransition name=\"fade\">\n            <tbody v-if=\"loading\" key=\"loading\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\">\n                  <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n              <tr\n                v-for=\"row in currentPageDataRows\"\n                :key=\"row.id\"\n                class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n                :class=\"{\n                  'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n                }\"\n                data-cy=\"table-row\"\n              >\n                <!-- ROWS SELECTION -->\n                <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n                  <ElInputCheckbox\n                    :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n                    :disabled=\"rowsSelectionDisabled\"\n                    size=\"xxs\"\n                    @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n                  />\n                </td>\n\n                <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n                <td\n                  v-for=\"(cell, i) in row.cells\"\n                  :key=\"i\"\n                  class=\"max-w-sm px-2.5 py-2.5\"\n                  :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n                >\n                  <!-- TODO data-cy should stay inside ElTableCell -->\n                  <ElTableCell :cell=\"cell\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n              </tr>\n            </tbody>\n          </CustomTransition>\n        </table>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <ElServerSideTablePagination\n      ref=\"pagination\"\n      :total-rows-count=\"totalRowsCount\"\n      :rows-per-page=\"props.rowsPerPage\"\n      :hide-footer=\"props.noFooter\"\n      @update:current-page=\"newPageSelected\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","i","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"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"}
+{"version":3,"file":"ElServerSideTable.vue.cjs2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n  title: string;\n  filter?: TableColumnFilter;\n  alignRight?: boolean;\n  noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n  | TableColumnFilterFreeSearch\n  | TableColumnFilterDateRange\n  | TableColumnFilterMultiValue\n  | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n  id?: string;\n  type: Extract<FilterType, 'FREE_SEARCH'>;\n  placeholder?: string;\n  initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n  id?: string;\n  type: Extract<FilterType, 'DATE_RANGE'>;\n  placeholder?: string;\n  initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n  id?: string;\n  type: Extract<FilterType, 'MULTI_VALUE'>;\n  selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n  initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n  type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n  sortStatus: SortStatus;\n  paginationStatus: {\n    currentPage: number;\n  };\n  filterStatus: FilterStatus[];\n  triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n  columnToSort: number;\n  order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n  columns: TableColumn[];\n  sortByCol?: number; // initial sort by column\n  sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n  noFilters?: boolean;\n  noFooter?: boolean;\n  rowsSelectionMode?: 'single' | 'multiple';\n  rowsSelectionDisabled?: boolean;\n  rowsPerPage?: number;\n  dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus;\n\nexport type TextFilterStatus = {\n  id?: string;\n  textSearch: string;\n  columnTitle: string;\n  type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n  id?: string;\n  dateFrom: number;\n  columnTitle: string;\n  type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n  sortByCol: -1,\n  sortByColAsc: false,\n  rowsSelectionMode: undefined,\n  rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n  (event: 'rows-selected', rows: DataRow[]): void;\n  (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: 0,\n    },\n    sortStatus: currentSortStatus.value,\n    filterStatus: filterStatus.value,\n    triggeredEvent: 'firstLoad',\n  });\n  currentPageDataRows.value = newData.data;\n  totalRowsCount.value = newData.totalRows;\n  loading.value = false;\n});\n\nfunction usePagination() {\n  const totalRowsCount = ref(0);\n  const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n  const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n  const newPageSelected = async (newPage: number) => {\n    loading.value = true;\n    currentPageDataRows.value = (\n      await props.dataController({\n        paginationStatus: {\n          currentPage: newPage,\n        },\n        sortStatus: currentSortStatus.value,\n        filterStatus: filterStatus.value,\n        triggeredEvent: 'paginate',\n      })\n    ).data;\n    loading.value = false;\n  };\n\n  return {\n    newPageSelected,\n    totalRowsCount,\n    currentPage,\n    goToFirstPage,\n  };\n}\n\nfunction useSorting() {\n  const sortStatus = ref<{\n    currentlySortColIndex: number;\n    arrows: boolean[];\n  }>({\n    currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n    arrows: [],\n  });\n\n  const resetSort = () => {\n    sortStatus.value = {\n      currentlySortColIndex: -1,\n      arrows: [],\n    };\n  };\n  const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n    return {\n      columnToSort: sortStatus.value.currentlySortColIndex,\n      order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n    };\n  });\n\n  onMounted(async () => {\n    sortStatus.value.arrows = new Array(MAX_COLS);\n    if (props.sortByCol > -1) {\n      sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n    }\n  });\n\n  const toggleSortArrow = async (colIndex: number) => {\n    sortStatus.value.currentlySortColIndex = colIndex;\n    sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n    loading.value = true;\n    try {\n      const newData = await props.dataController({\n        paginationStatus: {\n          currentPage: currentPage.value,\n        },\n        sortStatus: currentSortStatus.value,\n        filterStatus: filterStatus.value,\n        triggeredEvent: 'sort',\n      });\n      currentPageDataRows.value = newData.data;\n      totalRowsCount.value = newData.totalRows;\n    } catch (error) {\n      // TODO handle error\n      console.error(error);\n    } finally {\n      loading.value = false;\n    }\n  };\n\n  return {\n    sortStatus,\n    toggleSortArrow,\n    currentSortStatus,\n    resetSort,\n  };\n}\n\nfunction useFilters() {\n  const filterStatus = ref<FilterStatus[]>([]);\n  const isResettingFilters = ref(false);\n\n  onMounted(() => {\n    resetFilters();\n    watchDeep(filterStatus, async filters => {\n      if (isResettingFilters.value) {\n        applyFilters(filters);\n        isResettingFilters.value = false;\n      } else {\n        applyFiltersDebounced(filters);\n      }\n    });\n  });\n\n  const resetFilters = () => {\n    isResettingFilters.value = true;\n\n    filterStatus.value = new Array(MAX_COLS);\n    for (let i = 0; i < MAX_COLS; i++) {\n      const filter = props.columns[i]?.filter;\n      if (filter) {\n        if (filter.type === 'FREE_SEARCH') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            textSearch: filter.initialValue ?? '',\n            type: 'FREE_SEARCH',\n            columnTitle: props.columns[i].title,\n          });\n        } else if (filter.type === 'MULTI_VALUE') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            textSearch: filter.initialValue ?? '',\n            type: 'MULTI_VALUE',\n            columnTitle: props.columns[i].title,\n          });\n        } else if (filter.type === 'DATE_RANGE') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            dateFrom: filter.initialValue ?? 0,\n            type: 'DATE_RANGE',\n            columnTitle: props.columns[i].title,\n          });\n        }\n      }\n    }\n  };\n\n  const applyFilters = async (filters: FilterStatus[]) => {\n    console.log('applyFilters');\n    loading.value = true;\n    goToFirstPage();\n    const newData = await props.dataController({\n      paginationStatus: {\n        currentPage: currentPage.value,\n      },\n      sortStatus: currentSortStatus.value,\n      filterStatus: filters,\n      triggeredEvent: 'filter',\n    });\n    currentPageDataRows.value = newData.data;\n    totalRowsCount.value = newData.totalRows;\n    loading.value = false;\n  };\n\n  const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n  return {\n    filterStatus,\n    resetFilters,\n  };\n}\n\nfunction useRowsSelection() {\n  const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n  const emitRowsSelected = () => {\n    emit('rows-selected', selectedRows.value);\n  };\n\n  const rowsSelected = (rows: DataRow[]) => {\n    selectRows(rows.map(r => r.id));\n  };\n\n  const rowUnselected = (rowId: string) => {\n    const index = selectedRows.value.findIndex(r => r.id === rowId);\n    selectedRows.value.splice(index, 1);\n    emitRowsSelected();\n  };\n\n  // select the rows with the given ids, possibly in addition to the rows that are already selected\n  const selectRows = async (rowsIds: string[]) => {\n    if (props.rowsSelectionMode === 'single') {\n      selectedRows.value = [];\n      await nextTick();\n    }\n    const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n    if (props.rowsSelectionMode === 'single') {\n      rowsToSelect.length = Math.min(1, rowsToSelect.length);\n    }\n\n    for (const row of rowsToSelect) {\n      if (!selectedRows.value.some(r => r.id === row.id)) {\n        selectedRows.value.push(row);\n      }\n    }\n\n    emitRowsSelected();\n  };\n\n  const unselectAllRows = () => {\n    selectedRows.value = [];\n    emitRowsSelected();\n  };\n\n  const getDataRows = (): DataRow[] => currentPageDataRows.value;\n  const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n  const allRowsSelected = computed(() => {\n    return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n  });\n\n  return {\n    selectedRows,\n    rowsSelected,\n    rowUnselected,\n    selectRows,\n    unselectAllRows,\n    getDataRows,\n    getSelectedRows,\n    allRowsSelected,\n  };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n  useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n  // Resetting filters and sort will trigger the dataController\n  resetSort();\n  resetFilters();\n  unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n  loading.value = true;\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: currentPage.value,\n    },\n    sortStatus: currentSortStatus.value,\n    filterStatus: filterStatus.value,\n    triggeredEvent: 'trigger',\n  });\n  currentPageDataRows.value = newData.data;\n  totalRowsCount.value = newData.totalRows;\n  loading.value = false;\n};\n\nwatch(\n  () => props.columns,\n  () => resetFilters(),\n  { deep: true, immediate: true },\n);\n\ndefineExpose({\n  selectRows,\n  resetAllAndFetch,\n  unselectAllRows,\n  getDataRows,\n  getSelectedRows,\n  triggerDataController,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col\">\n    <div class=\"overflow-x-auto\">\n      <div class=\"inline-block min-w-full bg-white align-middle\">\n        <table class=\"min-w-full\">\n          <thead>\n            <tr class=\"bg-neutral-surface-raised font-semibold\">\n              <th\n                v-if=\"rowsSelectionMode\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n                :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n              >\n                <ElInputCheckbox\n                  v-if=\"rowsSelectionMode === 'multiple'\"\n                  :model-value=\"allRowsSelected\"\n                  :disabled=\"rowsSelectionDisabled\"\n                  size=\"xxs\"\n                  @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n                />\n                <div v-else class=\"w-7\" />\n              </th>\n              <th\n                v-for=\"(col, index) in props.columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n                :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n                :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n                @click=\"!col.noSort && toggleSortArrow(index)\"\n              >\n                {{ col.title }}\n\n                <!-- //////////////////// SORT //////////////////////////// -->\n                <svg\n                  v-if=\"!col.noSort\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  class=\"ml-1 inline-flex h-3 w-3\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    v-if=\"sortStatus.arrows[index]\"\n                    d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n                  />\n                  <path\n                    v-else\n                    d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n                    title=\"Ordine Decrescente\"\n                  />\n                </svg>\n              </th>\n            </tr>\n            <!-- ///////////////////// FILTERS ///////////////////////// -->\n            <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n              <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n              <th\n                v-for=\"(col, index) in columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n              >\n                <!-- FILTER: TEXT SEARCH -->\n                <ElInputText\n                  v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index].type === 'FREE_SEARCH'\"\n                  v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n                  :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n                  :hidden-error-message=\"true\"\n                  :leading-icon=\"{\n                    name: 'MagnifyingGlassIcon',\n                  }\"\n                />\n\n                <!-- FILTER: DATE RANGE -->\n                <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index].type === 'DATE_RANGE'\" class=\"flex flex-col\">\n                  <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n                </div>\n\n                <!-- FILTER: MULTIPLE VALUES -->\n                <ElInputSelect\n                  v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index].type === 'MULTI_VALUE'\"\n                  v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n                  class=\"flex flex-col\"\n                  type=\"autocomplete\"\n                  :options=\"col.filter.selectOptions\"\n                  :hidden-error-message=\"true\"\n                />\n\n                <!-- TODO: change with new button when it'll be available in DS version 2 -->\n                <!-- FILTER: RESET -->\n\n                <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n                  <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <CustomTransition name=\"fade\">\n            <tbody v-if=\"loading\" key=\"loading\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\">\n                  <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n              <tr\n                v-for=\"row in currentPageDataRows\"\n                :key=\"row.id\"\n                class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n                :class=\"{\n                  'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n                }\"\n                data-cy=\"table-row\"\n              >\n                <!-- ROWS SELECTION -->\n                <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n                  <ElInputCheckbox\n                    :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n                    :disabled=\"rowsSelectionDisabled\"\n                    size=\"xxs\"\n                    @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n                  />\n                </td>\n\n                <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n                <td\n                  v-for=\"(cell, i) in row.cells\"\n                  :key=\"i\"\n                  class=\"max-w-sm px-2.5 py-2.5\"\n                  :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n                >\n                  <!-- TODO data-cy should stay inside ElTableCell -->\n                  <ElTableCell :cell=\"cell\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n              </tr>\n            </tbody>\n          </CustomTransition>\n        </table>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <ElServerSideTablePagination\n      ref=\"pagination\"\n      :total-rows-count=\"totalRowsCount\"\n      :rows-per-page=\"props.rowsPerPage\"\n      :hide-footer=\"props.noFooter\"\n      @update:current-page=\"newPageSelected\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","i","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"03DAgGA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAUC,MAAI,EAAI,EAElBC,EAAW,GAEXC,EAAsBF,MAAe,CAAA,CAAE,EAEvCG,EAAaH,MAA6D,IAAI,EAEpFI,EAAAA,UAAU,SAAY,CACd,MAAAC,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAa,CACf,EACA,WAAYW,EAAkB,MAC9B,aAAcC,EAAa,MAC3B,eAAgB,WAAA,CACjB,EACDL,EAAoB,MAAQG,EAAQ,KACpCG,EAAe,MAAQH,EAAQ,UAC/BN,EAAQ,MAAQ,EAAA,CACjB,EAED,SAASU,GAAgB,CACjBD,MAAAA,EAAiBR,MAAI,CAAC,EACtBU,EAAcC,EAAAA,SAAS,IAAM,OAAA,QAAAC,EAAAT,EAAW,QAAX,YAAAS,EAAkB,cAAe,EAAC,EAmB9D,MAAA,CACL,gBAhBsB,MAAOC,GAAoB,CACjDd,EAAQ,MAAQ,GACIG,EAAA,OAClB,MAAMP,EAAM,eAAe,CACzB,iBAAkB,CAChB,YAAakB,CACf,EACA,WAAYP,EAAkB,MAC9B,aAAcC,EAAa,MAC3B,eAAgB,UACjB,CAAA,GACD,KACFR,EAAQ,MAAQ,EAAA,EAKhB,eAAAS,EACA,YAAAE,EACA,cArBoB,WAAM,OAAAE,EAAAT,EAAW,QAAX,YAAAS,EAAkB,SAAS,EAAG,CAAE,eAAgB,EAAA,GAqB1E,CAEJ,CAEA,SAASE,GAAa,CACpB,MAAMC,EAAaf,EAAAA,IAGhB,CACD,sBAAuBL,EAAM,UAAY,GAAKA,EAAM,UAAY,GAChE,OAAQ,CAAC,CAAA,CACV,EAEKqB,EAAY,IAAM,CACtBD,EAAW,MAAQ,CACjB,sBAAuB,GACvB,OAAQ,CAAC,CAAA,CACX,EAEIT,EAAoBK,EAAAA,SAAqC,KACtD,CACL,aAAcI,EAAW,MAAM,sBAC/B,MAAOA,EAAW,MAAM,OAAOA,EAAW,MAAM,qBAAqB,EAAI,MAAQ,MAAA,EAEpF,EAEDX,OAAAA,EAAAA,UAAU,SAAY,CACpBW,EAAW,MAAM,OAAS,IAAI,MAAMd,CAAQ,EACxCN,EAAM,UAAY,KACpBoB,EAAW,MAAM,OAAOpB,EAAM,SAAS,EAAIA,EAAM,aACnD,CACD,EAyBM,CACL,WAAAoB,EACA,gBAzBsB,MAAOE,GAAqB,CAClDF,EAAW,MAAM,sBAAwBE,EACzCF,EAAW,MAAM,OAAO,OAAOE,EAAU,EAAG,CAACF,EAAW,MAAM,OAAOE,CAAQ,CAAC,EAC9ElB,EAAQ,MAAQ,GACZ,GAAA,CACI,MAAAM,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAae,EAAY,KAC3B,EACA,WAAYJ,EAAkB,MAC9B,aAAcC,EAAa,MAC3B,eAAgB,MAAA,CACjB,EACDL,EAAoB,MAAQG,EAAQ,KACpCG,EAAe,MAAQH,EAAQ,gBACxBa,EAAO,CAEd,QAAQ,MAAMA,CAAK,CAAA,QACnB,CACAnB,EAAQ,MAAQ,EAClB,CAAA,EAMA,kBAAAO,EACA,UAAAU,CAAA,CAEJ,CAEA,SAASG,GAAa,CACdZ,MAAAA,EAAeP,MAAoB,CAAA,CAAE,EACrCoB,EAAqBpB,MAAI,EAAK,EAEpCI,EAAAA,UAAU,IAAM,CACdiB,IACUd,YAAAA,EAAc,MAAMe,GAAW,CACnCF,EAAmB,OACrBG,EAAaD,CAAO,EACpBF,EAAmB,MAAQ,IAE3BI,EAAsBF,CAAO,CAC/B,CACD,CAAA,CACF,EAED,MAAMD,EAAe,IAAM,OACzBD,EAAmB,MAAQ,GAE3Bb,EAAa,MAAQ,IAAI,MAAMN,CAAQ,EACvC,QAASwB,EAAI,EAAGA,EAAIxB,EAAUwB,IAAK,CACjC,MAAMC,GAASd,EAAAjB,EAAM,QAAQ8B,CAAC,IAAf,YAAAb,EAAkB,OAC7Bc,IACEA,EAAO,OAAS,cAClBnB,EAAa,MAAM,OAAOkB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,WAAYA,EAAO,cAAgB,GACnC,KAAM,cACN,YAAa/B,EAAM,QAAQ8B,CAAC,EAAE,KAAA,CAC/B,EACQC,EAAO,OAAS,cACzBnB,EAAa,MAAM,OAAOkB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,WAAYA,EAAO,cAAgB,GACnC,KAAM,cACN,YAAa/B,EAAM,QAAQ8B,CAAC,EAAE,KAAA,CAC/B,EACQC,EAAO,OAAS,cACzBnB,EAAa,MAAM,OAAOkB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,SAAUA,EAAO,cAAgB,EACjC,KAAM,aACN,YAAa/B,EAAM,QAAQ8B,CAAC,EAAE,KAAA,CAC/B,EAGP,CAAA,EAGIF,EAAe,MAAOD,GAA4B,CACtD,QAAQ,IAAI,cAAc,EAC1BvB,EAAQ,MAAQ,GACF4B,IACR,MAAAtB,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAae,EAAY,KAC3B,EACA,WAAYJ,EAAkB,MAC9B,aAAcgB,EACd,eAAgB,QAAA,CACjB,EACDpB,EAAoB,MAAQG,EAAQ,KACpCG,EAAe,MAAQH,EAAQ,UAC/BN,EAAQ,MAAQ,EAAA,EAGZyB,EAAwBI,EAAAA,cAAcL,EAAc,GAAG,EAEtD,MAAA,CACL,aAAAhB,EACA,aAAAc,CAAA,CAEJ,CAEA,SAASQ,GAAmB,CACpBC,MAAAA,EAAe9B,MAAsC,CAAA,CAAE,EAEvD+B,EAAmB,IAAM,CACxBlC,EAAA,gBAAiBiC,EAAa,KAAK,CAAA,EAGpCE,EAAgBC,GAAoB,CACxCC,EAAWD,EAAK,IAASE,GAAAA,EAAE,EAAE,CAAC,CAAA,EAG1BC,EAAiBC,GAAkB,CACvC,MAAMC,EAAQR,EAAa,MAAM,UAAeK,GAAAA,EAAE,KAAOE,CAAK,EAC9DP,EAAa,MAAM,OAAOQ,EAAO,CAAC,EACjBP,GAAA,EAIbG,EAAa,MAAOK,GAAsB,CAC1C5C,EAAM,oBAAsB,WAC9BmC,EAAa,MAAQ,GACrB,MAAMU,EAAS,SAAA,GAEX,MAAAC,EAAevC,EAAoB,MAAM,UAAYqC,EAAQ,SAASJ,EAAE,EAAE,CAAC,EAC7ExC,EAAM,oBAAsB,WAC9B8C,EAAa,OAAS,KAAK,IAAI,EAAGA,EAAa,MAAM,GAGvD,UAAWC,KAAOD,EACXX,EAAa,MAAM,QAAUK,EAAE,KAAOO,EAAI,EAAE,GAC/CZ,EAAa,MAAM,KAAKY,CAAG,EAIdX,GAAA,EAGbY,EAAkB,IAAM,CAC5Bb,EAAa,MAAQ,GACJC,GAAA,EAGba,EAAc,IAAiB1C,EAAoB,MACnD2C,EAAkB,IAAiBf,EAAa,MAEhDgB,EAAkBnC,EAAAA,SAAS,IACxBmB,EAAa,MAAM,OAAS,GAAKA,EAAa,MAAM,SAAW5B,EAAoB,MAAM,MACjG,EAEM,MAAA,CACL,aAAA4B,EACA,aAAAE,EACA,cAAAI,EACA,WAAAF,EACA,gBAAAS,EACA,YAAAC,EACA,gBAAAC,EACA,gBAAAC,CAAA,CAEJ,CAEM,KAAA,CAAE,aAAAhB,EAAc,aAAAE,EAAc,cAAAI,EAAe,WAAAF,EAAY,gBAAAS,EAAiB,YAAAC,EAAa,gBAAAC,EAAiB,gBAAAC,CAAgB,EAC5HjB,EAAiB,EACb,CAAE,aAAAtB,EAAc,aAAAc,CAAa,EAAIF,EAAW,EAC5C,CAAE,WAAAJ,EAAY,gBAAAgC,EAAiB,kBAAAzC,EAAmB,UAAAU,CAAA,EAAcF,IAChE,CAAE,gBAAAkC,EAAiB,eAAAxC,EAAgB,YAAAE,EAAa,cAAAiB,CAAA,EAAkBlB,IAElEwC,EAAmB,SAAY,CAEzBjC,IACGK,IACGsB,GAAA,EAGZO,EAAwB,SAAY,CACxCnD,EAAQ,MAAQ,GACV,MAAAM,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAae,EAAY,KAC3B,EACA,WAAYJ,EAAkB,MAC9B,aAAcC,EAAa,MAC3B,eAAgB,SAAA,CACjB,EACDL,EAAoB,MAAQG,EAAQ,KACpCG,EAAe,MAAQH,EAAQ,UAC/BN,EAAQ,MAAQ,EAAA,EAGlBoD,OAAAA,EAAA,MACE,IAAMxD,EAAM,QACZ,IAAM0B,EAAa,EACnB,CAAE,KAAM,GAAM,UAAW,EAAK,CAAA,EAGnB+B,EAAA,CACX,WAAAlB,EACA,iBAAAe,EACA,gBAAAN,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAK,CAAA,CACD"}

package/dist/src/table/ElServerSideTable.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElServerSideTable.vue.esm2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n  title: string;\n  filter?: TableColumnFilter;\n  alignRight?: boolean;\n  noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n  | TableColumnFilterFreeSearch\n  | TableColumnFilterDateRange\n  | TableColumnFilterMultiValue\n  | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n  id?: string;\n  type: Extract<FilterType, 'FREE_SEARCH'>;\n  placeholder?: string;\n  initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n  id?: string;\n  type: Extract<FilterType, 'DATE_RANGE'>;\n  placeholder?: string;\n  initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n  id?: string;\n  type: Extract<FilterType, 'MULTI_VALUE'>;\n  selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n  initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n  type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n  sortStatus: SortStatus;\n  paginationStatus: {\n    currentPage: number;\n  };\n  filterStatus: FilterStatus[];\n  triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n  columnToSort: number;\n  order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n  columns: TableColumn[];\n  sortByCol?: number; // initial sort by column\n  sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n  noFilters?: boolean;\n  noFooter?: boolean;\n  rowsSelectionMode?: 'single' | 'multiple';\n  rowsSelectionDisabled?: boolean;\n  rowsPerPage?: number;\n  dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus;\n\nexport type TextFilterStatus = {\n  id?: string;\n  textSearch: string;\n  columnTitle: string;\n  type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n  id?: string;\n  dateFrom: number;\n  columnTitle: string;\n  type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\nimport { useDebounceFn } from '@vueuse/core';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n  sortByCol: -1,\n  sortByColAsc: false,\n  rowsSelectionMode: undefined,\n  rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n  (event: 'rows-selected', rows: DataRow[]): void;\n  (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: 0,\n    },\n    sortStatus: currentSortStatus.value,\n    filterStatus: filterStatus.value,\n    triggeredEvent: 'firstLoad',\n  });\n  currentPageDataRows.value = newData.data;\n  totalRowsCount.value = newData.totalRows;\n  loading.value = false;\n});\n\nfunction usePagination() {\n  const totalRowsCount = ref(0);\n  const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n  const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n  const newPageSelected = async (newPage: number) => {\n    loading.value = true;\n    currentPageDataRows.value = (\n      await props.dataController({\n        paginationStatus: {\n          currentPage: newPage,\n        },\n        sortStatus: currentSortStatus.value,\n        filterStatus: filterStatus.value,\n        triggeredEvent: 'paginate',\n      })\n    ).data;\n    loading.value = false;\n  };\n\n  return {\n    newPageSelected,\n    totalRowsCount,\n    currentPage,\n    goToFirstPage,\n  };\n}\n\nfunction useSorting() {\n  const sortStatus = ref<{\n    currentlySortColIndex: number;\n    arrows: boolean[];\n  }>({\n    currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n    arrows: [],\n  });\n\n  const resetSort = () => {\n    sortStatus.value = {\n      currentlySortColIndex: -1,\n      arrows: [],\n    };\n  };\n  const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n    return {\n      columnToSort: sortStatus.value.currentlySortColIndex,\n      order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n    };\n  });\n\n  onMounted(async () => {\n    sortStatus.value.arrows = new Array(MAX_COLS);\n    if (props.sortByCol > -1) {\n      sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n    }\n  });\n\n  const toggleSortArrow = async (colIndex: number) => {\n    sortStatus.value.currentlySortColIndex = colIndex;\n    sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n    loading.value = true;\n    try {\n      const newData = await props.dataController({\n        paginationStatus: {\n          currentPage: currentPage.value,\n        },\n        sortStatus: currentSortStatus.value,\n        filterStatus: filterStatus.value,\n        triggeredEvent: 'sort',\n      });\n      currentPageDataRows.value = newData.data;\n      totalRowsCount.value = newData.totalRows;\n    } catch (error) {\n      // TODO handle error\n      console.error(error);\n    } finally {\n      loading.value = false;\n    }\n  };\n\n  return {\n    sortStatus,\n    toggleSortArrow,\n    currentSortStatus,\n    resetSort,\n  };\n}\n\nfunction useFilters() {\n  const filterStatus = ref<FilterStatus[]>([]);\n  const isResettingFilters = ref(false);\n\n  onMounted(() => {\n    resetFilters();\n    watchDeep(filterStatus, async filters => {\n      if (isResettingFilters.value) {\n        applyFilters(filters);\n        isResettingFilters.value = false;\n      } else {\n        applyFiltersDebounced(filters);\n      }\n    });\n  });\n\n  const resetFilters = () => {\n    isResettingFilters.value = true;\n\n    filterStatus.value = new Array(MAX_COLS);\n    for (let i = 0; i < MAX_COLS; i++) {\n      const filter = props.columns[i]?.filter;\n      if (filter) {\n        if (filter.type === 'FREE_SEARCH') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            textSearch: filter.initialValue ?? '',\n            type: 'FREE_SEARCH',\n            columnTitle: props.columns[i].title,\n          });\n        } else if (filter.type === 'MULTI_VALUE') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            textSearch: filter.initialValue ?? '',\n            type: 'MULTI_VALUE',\n            columnTitle: props.columns[i].title,\n          });\n        } else if (filter.type === 'DATE_RANGE') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            dateFrom: filter.initialValue ?? 0,\n            type: 'DATE_RANGE',\n            columnTitle: props.columns[i].title,\n          });\n        }\n      }\n    }\n  };\n\n  const applyFilters = async (filters: FilterStatus[]) => {\n    console.log('applyFilters');\n    loading.value = true;\n    goToFirstPage();\n    const newData = await props.dataController({\n      paginationStatus: {\n        currentPage: currentPage.value,\n      },\n      sortStatus: currentSortStatus.value,\n      filterStatus: filters,\n      triggeredEvent: 'filter',\n    });\n    currentPageDataRows.value = newData.data;\n    totalRowsCount.value = newData.totalRows;\n    loading.value = false;\n  };\n\n  const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n  return {\n    filterStatus,\n    resetFilters,\n  };\n}\n\nfunction useRowsSelection() {\n  const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n  const emitRowsSelected = () => {\n    emit('rows-selected', selectedRows.value);\n  };\n\n  const rowsSelected = (rows: DataRow[]) => {\n    selectRows(rows.map(r => r.id));\n  };\n\n  const rowUnselected = (rowId: string) => {\n    const index = selectedRows.value.findIndex(r => r.id === rowId);\n    selectedRows.value.splice(index, 1);\n    emitRowsSelected();\n  };\n\n  // select the rows with the given ids, possibly in addition to the rows that are already selected\n  const selectRows = async (rowsIds: string[]) => {\n    if (props.rowsSelectionMode === 'single') {\n      selectedRows.value = [];\n      await nextTick();\n    }\n    const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n    if (props.rowsSelectionMode === 'single') {\n      rowsToSelect.length = Math.min(1, rowsToSelect.length);\n    }\n\n    for (const row of rowsToSelect) {\n      if (!selectedRows.value.some(r => r.id === row.id)) {\n        selectedRows.value.push(row);\n      }\n    }\n\n    emitRowsSelected();\n  };\n\n  const unselectAllRows = () => {\n    selectedRows.value = [];\n    emitRowsSelected();\n  };\n\n  const getDataRows = (): DataRow[] => currentPageDataRows.value;\n  const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n  const allRowsSelected = computed(() => {\n    return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n  });\n\n  return {\n    selectedRows,\n    rowsSelected,\n    rowUnselected,\n    selectRows,\n    unselectAllRows,\n    getDataRows,\n    getSelectedRows,\n    allRowsSelected,\n  };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n  useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n  // Resetting filters and sort will trigger the dataController\n  resetSort();\n  resetFilters();\n  unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n  loading.value = true;\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: currentPage.value,\n    },\n    sortStatus: currentSortStatus.value,\n    filterStatus: filterStatus.value,\n    triggeredEvent: 'trigger',\n  });\n  currentPageDataRows.value = newData.data;\n  totalRowsCount.value = newData.totalRows;\n  loading.value = false;\n};\n\nwatch(\n  () => props.columns,\n  () => resetFilters(),\n  { deep: true, immediate: true },\n);\n\ndefineExpose({\n  selectRows,\n  resetAllAndFetch,\n  unselectAllRows,\n  getDataRows,\n  getSelectedRows,\n  triggerDataController,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col\">\n    <div class=\"overflow-x-auto\">\n      <div class=\"inline-block min-w-full bg-white align-middle\">\n        <table class=\"min-w-full\">\n          <thead>\n            <tr class=\"bg-neutral-surface-raised font-semibold\">\n              <th\n                v-if=\"rowsSelectionMode\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n                :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n              >\n                <ElInputCheckbox\n                  v-if=\"rowsSelectionMode === 'multiple'\"\n                  :model-value=\"allRowsSelected\"\n                  :disabled=\"rowsSelectionDisabled\"\n                  size=\"xxs\"\n                  @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n                />\n                <div v-else class=\"w-7\" />\n              </th>\n              <th\n                v-for=\"(col, index) in props.columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n                :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n                :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n                @click=\"!col.noSort && toggleSortArrow(index)\"\n              >\n                {{ col.title }}\n\n                <!-- //////////////////// SORT //////////////////////////// -->\n                <svg\n                  v-if=\"!col.noSort\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  class=\"ml-1 inline-flex h-3 w-3\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    v-if=\"sortStatus.arrows[index]\"\n                    d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n                  />\n                  <path\n                    v-else\n                    d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n                    title=\"Ordine Decrescente\"\n                  />\n                </svg>\n              </th>\n            </tr>\n            <!-- ///////////////////// FILTERS ///////////////////////// -->\n            <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n              <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n              <th\n                v-for=\"(col, index) in columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n              >\n                <!-- FILTER: TEXT SEARCH -->\n                <ElInputText\n                  v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index].type === 'FREE_SEARCH'\"\n                  v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n                  :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n                  :hidden-error-message=\"true\"\n                  :leading-icon=\"{\n                    name: 'MagnifyingGlassIcon',\n                  }\"\n                />\n\n                <!-- FILTER: DATE RANGE -->\n                <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index].type === 'DATE_RANGE'\" class=\"flex flex-col\">\n                  <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n                </div>\n\n                <!-- FILTER: MULTIPLE VALUES -->\n                <ElInputSelect\n                  v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index].type === 'MULTI_VALUE'\"\n                  v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n                  class=\"flex flex-col\"\n                  type=\"autocomplete\"\n                  :options=\"col.filter.selectOptions\"\n                  :hidden-error-message=\"true\"\n                />\n\n                <!-- TODO: change with new button when it'll be available in DS version 2 -->\n                <!-- FILTER: RESET -->\n\n                <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n                  <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <CustomTransition name=\"fade\">\n            <tbody v-if=\"loading\" key=\"loading\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\">\n                  <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n              <tr\n                v-for=\"row in currentPageDataRows\"\n                :key=\"row.id\"\n                class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n                :class=\"{\n                  'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n                }\"\n                data-cy=\"table-row\"\n              >\n                <!-- ROWS SELECTION -->\n                <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n                  <ElInputCheckbox\n                    :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n                    :disabled=\"rowsSelectionDisabled\"\n                    size=\"xxs\"\n                    @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n                  />\n                </td>\n\n                <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n                <td\n                  v-for=\"(cell, i) in row.cells\"\n                  :key=\"i\"\n                  class=\"max-w-sm px-2.5 py-2.5\"\n                  :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n                >\n                  <!-- TODO data-cy should stay inside ElTableCell -->\n                  <ElTableCell :cell=\"cell\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n              </tr>\n            </tbody>\n          </CustomTransition>\n        </table>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <ElServerSideTablePagination\n      ref=\"pagination\"\n      :total-rows-count=\"totalRowsCount\"\n      :rows-per-page=\"props.rowsPerPage\"\n      :hide-footer=\"props.noFooter\"\n      @update:current-page=\"newPageSelected\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","i","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"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"}
+{"version":3,"file":"ElServerSideTable.vue.esm2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n  title: string;\n  filter?: TableColumnFilter;\n  alignRight?: boolean;\n  noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n  | TableColumnFilterFreeSearch\n  | TableColumnFilterDateRange\n  | TableColumnFilterMultiValue\n  | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n  id?: string;\n  type: Extract<FilterType, 'FREE_SEARCH'>;\n  placeholder?: string;\n  initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n  id?: string;\n  type: Extract<FilterType, 'DATE_RANGE'>;\n  placeholder?: string;\n  initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n  id?: string;\n  type: Extract<FilterType, 'MULTI_VALUE'>;\n  selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n  initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n  type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n  sortStatus: SortStatus;\n  paginationStatus: {\n    currentPage: number;\n  };\n  filterStatus: FilterStatus[];\n  triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n  columnToSort: number;\n  order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n  columns: TableColumn[];\n  sortByCol?: number; // initial sort by column\n  sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n  noFilters?: boolean;\n  noFooter?: boolean;\n  rowsSelectionMode?: 'single' | 'multiple';\n  rowsSelectionDisabled?: boolean;\n  rowsPerPage?: number;\n  dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus;\n\nexport type TextFilterStatus = {\n  id?: string;\n  textSearch: string;\n  columnTitle: string;\n  type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n  id?: string;\n  dateFrom: number;\n  columnTitle: string;\n  type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n  sortByCol: -1,\n  sortByColAsc: false,\n  rowsSelectionMode: undefined,\n  rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n  (event: 'rows-selected', rows: DataRow[]): void;\n  (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: 0,\n    },\n    sortStatus: currentSortStatus.value,\n    filterStatus: filterStatus.value,\n    triggeredEvent: 'firstLoad',\n  });\n  currentPageDataRows.value = newData.data;\n  totalRowsCount.value = newData.totalRows;\n  loading.value = false;\n});\n\nfunction usePagination() {\n  const totalRowsCount = ref(0);\n  const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n  const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n  const newPageSelected = async (newPage: number) => {\n    loading.value = true;\n    currentPageDataRows.value = (\n      await props.dataController({\n        paginationStatus: {\n          currentPage: newPage,\n        },\n        sortStatus: currentSortStatus.value,\n        filterStatus: filterStatus.value,\n        triggeredEvent: 'paginate',\n      })\n    ).data;\n    loading.value = false;\n  };\n\n  return {\n    newPageSelected,\n    totalRowsCount,\n    currentPage,\n    goToFirstPage,\n  };\n}\n\nfunction useSorting() {\n  const sortStatus = ref<{\n    currentlySortColIndex: number;\n    arrows: boolean[];\n  }>({\n    currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n    arrows: [],\n  });\n\n  const resetSort = () => {\n    sortStatus.value = {\n      currentlySortColIndex: -1,\n      arrows: [],\n    };\n  };\n  const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n    return {\n      columnToSort: sortStatus.value.currentlySortColIndex,\n      order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n    };\n  });\n\n  onMounted(async () => {\n    sortStatus.value.arrows = new Array(MAX_COLS);\n    if (props.sortByCol > -1) {\n      sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n    }\n  });\n\n  const toggleSortArrow = async (colIndex: number) => {\n    sortStatus.value.currentlySortColIndex = colIndex;\n    sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n    loading.value = true;\n    try {\n      const newData = await props.dataController({\n        paginationStatus: {\n          currentPage: currentPage.value,\n        },\n        sortStatus: currentSortStatus.value,\n        filterStatus: filterStatus.value,\n        triggeredEvent: 'sort',\n      });\n      currentPageDataRows.value = newData.data;\n      totalRowsCount.value = newData.totalRows;\n    } catch (error) {\n      // TODO handle error\n      console.error(error);\n    } finally {\n      loading.value = false;\n    }\n  };\n\n  return {\n    sortStatus,\n    toggleSortArrow,\n    currentSortStatus,\n    resetSort,\n  };\n}\n\nfunction useFilters() {\n  const filterStatus = ref<FilterStatus[]>([]);\n  const isResettingFilters = ref(false);\n\n  onMounted(() => {\n    resetFilters();\n    watchDeep(filterStatus, async filters => {\n      if (isResettingFilters.value) {\n        applyFilters(filters);\n        isResettingFilters.value = false;\n      } else {\n        applyFiltersDebounced(filters);\n      }\n    });\n  });\n\n  const resetFilters = () => {\n    isResettingFilters.value = true;\n\n    filterStatus.value = new Array(MAX_COLS);\n    for (let i = 0; i < MAX_COLS; i++) {\n      const filter = props.columns[i]?.filter;\n      if (filter) {\n        if (filter.type === 'FREE_SEARCH') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            textSearch: filter.initialValue ?? '',\n            type: 'FREE_SEARCH',\n            columnTitle: props.columns[i].title,\n          });\n        } else if (filter.type === 'MULTI_VALUE') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            textSearch: filter.initialValue ?? '',\n            type: 'MULTI_VALUE',\n            columnTitle: props.columns[i].title,\n          });\n        } else if (filter.type === 'DATE_RANGE') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            dateFrom: filter.initialValue ?? 0,\n            type: 'DATE_RANGE',\n            columnTitle: props.columns[i].title,\n          });\n        }\n      }\n    }\n  };\n\n  const applyFilters = async (filters: FilterStatus[]) => {\n    console.log('applyFilters');\n    loading.value = true;\n    goToFirstPage();\n    const newData = await props.dataController({\n      paginationStatus: {\n        currentPage: currentPage.value,\n      },\n      sortStatus: currentSortStatus.value,\n      filterStatus: filters,\n      triggeredEvent: 'filter',\n    });\n    currentPageDataRows.value = newData.data;\n    totalRowsCount.value = newData.totalRows;\n    loading.value = false;\n  };\n\n  const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n  return {\n    filterStatus,\n    resetFilters,\n  };\n}\n\nfunction useRowsSelection() {\n  const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n  const emitRowsSelected = () => {\n    emit('rows-selected', selectedRows.value);\n  };\n\n  const rowsSelected = (rows: DataRow[]) => {\n    selectRows(rows.map(r => r.id));\n  };\n\n  const rowUnselected = (rowId: string) => {\n    const index = selectedRows.value.findIndex(r => r.id === rowId);\n    selectedRows.value.splice(index, 1);\n    emitRowsSelected();\n  };\n\n  // select the rows with the given ids, possibly in addition to the rows that are already selected\n  const selectRows = async (rowsIds: string[]) => {\n    if (props.rowsSelectionMode === 'single') {\n      selectedRows.value = [];\n      await nextTick();\n    }\n    const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n    if (props.rowsSelectionMode === 'single') {\n      rowsToSelect.length = Math.min(1, rowsToSelect.length);\n    }\n\n    for (const row of rowsToSelect) {\n      if (!selectedRows.value.some(r => r.id === row.id)) {\n        selectedRows.value.push(row);\n      }\n    }\n\n    emitRowsSelected();\n  };\n\n  const unselectAllRows = () => {\n    selectedRows.value = [];\n    emitRowsSelected();\n  };\n\n  const getDataRows = (): DataRow[] => currentPageDataRows.value;\n  const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n  const allRowsSelected = computed(() => {\n    return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n  });\n\n  return {\n    selectedRows,\n    rowsSelected,\n    rowUnselected,\n    selectRows,\n    unselectAllRows,\n    getDataRows,\n    getSelectedRows,\n    allRowsSelected,\n  };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n  useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n  // Resetting filters and sort will trigger the dataController\n  resetSort();\n  resetFilters();\n  unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n  loading.value = true;\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: currentPage.value,\n    },\n    sortStatus: currentSortStatus.value,\n    filterStatus: filterStatus.value,\n    triggeredEvent: 'trigger',\n  });\n  currentPageDataRows.value = newData.data;\n  totalRowsCount.value = newData.totalRows;\n  loading.value = false;\n};\n\nwatch(\n  () => props.columns,\n  () => resetFilters(),\n  { deep: true, immediate: true },\n);\n\ndefineExpose({\n  selectRows,\n  resetAllAndFetch,\n  unselectAllRows,\n  getDataRows,\n  getSelectedRows,\n  triggerDataController,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col\">\n    <div class=\"overflow-x-auto\">\n      <div class=\"inline-block min-w-full bg-white align-middle\">\n        <table class=\"min-w-full\">\n          <thead>\n            <tr class=\"bg-neutral-surface-raised font-semibold\">\n              <th\n                v-if=\"rowsSelectionMode\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n                :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n              >\n                <ElInputCheckbox\n                  v-if=\"rowsSelectionMode === 'multiple'\"\n                  :model-value=\"allRowsSelected\"\n                  :disabled=\"rowsSelectionDisabled\"\n                  size=\"xxs\"\n                  @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n                />\n                <div v-else class=\"w-7\" />\n              </th>\n              <th\n                v-for=\"(col, index) in props.columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n                :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n                :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n                @click=\"!col.noSort && toggleSortArrow(index)\"\n              >\n                {{ col.title }}\n\n                <!-- //////////////////// SORT //////////////////////////// -->\n                <svg\n                  v-if=\"!col.noSort\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  class=\"ml-1 inline-flex h-3 w-3\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    v-if=\"sortStatus.arrows[index]\"\n                    d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n                  />\n                  <path\n                    v-else\n                    d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n                    title=\"Ordine Decrescente\"\n                  />\n                </svg>\n              </th>\n            </tr>\n            <!-- ///////////////////// FILTERS ///////////////////////// -->\n            <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n              <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n              <th\n                v-for=\"(col, index) in columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n              >\n                <!-- FILTER: TEXT SEARCH -->\n                <ElInputText\n                  v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index].type === 'FREE_SEARCH'\"\n                  v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n                  :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n                  :hidden-error-message=\"true\"\n                  :leading-icon=\"{\n                    name: 'MagnifyingGlassIcon',\n                  }\"\n                />\n\n                <!-- FILTER: DATE RANGE -->\n                <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index].type === 'DATE_RANGE'\" class=\"flex flex-col\">\n                  <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n                </div>\n\n                <!-- FILTER: MULTIPLE VALUES -->\n                <ElInputSelect\n                  v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index].type === 'MULTI_VALUE'\"\n                  v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n                  class=\"flex flex-col\"\n                  type=\"autocomplete\"\n                  :options=\"col.filter.selectOptions\"\n                  :hidden-error-message=\"true\"\n                />\n\n                <!-- TODO: change with new button when it'll be available in DS version 2 -->\n                <!-- FILTER: RESET -->\n\n                <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n                  <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <CustomTransition name=\"fade\">\n            <tbody v-if=\"loading\" key=\"loading\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\">\n                  <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n              <tr\n                v-for=\"row in currentPageDataRows\"\n                :key=\"row.id\"\n                class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n                :class=\"{\n                  'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n                }\"\n                data-cy=\"table-row\"\n              >\n                <!-- ROWS SELECTION -->\n                <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n                  <ElInputCheckbox\n                    :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n                    :disabled=\"rowsSelectionDisabled\"\n                    size=\"xxs\"\n                    @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n                  />\n                </td>\n\n                <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n                <td\n                  v-for=\"(cell, i) in row.cells\"\n                  :key=\"i\"\n                  class=\"max-w-sm px-2.5 py-2.5\"\n                  :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n                >\n                  <!-- TODO data-cy should stay inside ElTableCell -->\n                  <ElTableCell :cell=\"cell\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n              </tr>\n            </tbody>\n          </CustomTransition>\n        </table>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <ElServerSideTablePagination\n      ref=\"pagination\"\n      :total-rows-count=\"totalRowsCount\"\n      :rows-per-page=\"props.rowsPerPage\"\n      :hide-footer=\"props.noFooter\"\n      @update:current-page=\"newPageSelected\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","i","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"ioEAgGA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAUC,EAAI,EAAI,EAElBC,EAAW,GAEXC,EAAsBF,EAAe,CAAA,CAAE,EAEvCG,EAAaH,EAA6D,IAAI,EAEpFI,EAAU,SAAY,CACd,MAAAC,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAa,CACf,EACA,WAAYW,EAAkB,MAC9B,aAAcC,EAAa,MAC3B,eAAgB,WAAA,CACjB,EACDL,EAAoB,MAAQG,EAAQ,KACpCG,EAAe,MAAQH,EAAQ,UAC/BN,EAAQ,MAAQ,EAAA,CACjB,EAED,SAASU,GAAgB,CACjBD,MAAAA,EAAiBR,EAAI,CAAC,EACtBU,EAAcC,EAAS,IAAM,OAAA,QAAAC,EAAAT,EAAW,QAAX,YAAAS,EAAkB,cAAe,EAAC,EAmB9D,MAAA,CACL,gBAhBsB,MAAOC,GAAoB,CACjDd,EAAQ,MAAQ,GACIG,EAAA,OAClB,MAAMP,EAAM,eAAe,CACzB,iBAAkB,CAChB,YAAakB,CACf,EACA,WAAYP,EAAkB,MAC9B,aAAcC,EAAa,MAC3B,eAAgB,UACjB,CAAA,GACD,KACFR,EAAQ,MAAQ,EAAA,EAKhB,eAAAS,EACA,YAAAE,EACA,cArBoB,WAAM,OAAAE,EAAAT,EAAW,QAAX,YAAAS,EAAkB,SAAS,EAAG,CAAE,eAAgB,EAAA,GAqB1E,CAEJ,CAEA,SAASE,GAAa,CACpB,MAAMC,EAAaf,EAGhB,CACD,sBAAuBL,EAAM,UAAY,GAAKA,EAAM,UAAY,GAChE,OAAQ,CAAC,CAAA,CACV,EAEKqB,EAAY,IAAM,CACtBD,EAAW,MAAQ,CACjB,sBAAuB,GACvB,OAAQ,CAAC,CAAA,CACX,EAEIT,EAAoBK,EAAqC,KACtD,CACL,aAAcI,EAAW,MAAM,sBAC/B,MAAOA,EAAW,MAAM,OAAOA,EAAW,MAAM,qBAAqB,EAAI,MAAQ,MAAA,EAEpF,EAED,OAAAX,EAAU,SAAY,CACpBW,EAAW,MAAM,OAAS,IAAI,MAAMd,CAAQ,EACxCN,EAAM,UAAY,KACpBoB,EAAW,MAAM,OAAOpB,EAAM,SAAS,EAAIA,EAAM,aACnD,CACD,EAyBM,CACL,WAAAoB,EACA,gBAzBsB,MAAOE,GAAqB,CAClDF,EAAW,MAAM,sBAAwBE,EACzCF,EAAW,MAAM,OAAO,OAAOE,EAAU,EAAG,CAACF,EAAW,MAAM,OAAOE,CAAQ,CAAC,EAC9ElB,EAAQ,MAAQ,GACZ,GAAA,CACI,MAAAM,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAae,EAAY,KAC3B,EACA,WAAYJ,EAAkB,MAC9B,aAAcC,EAAa,MAC3B,eAAgB,MAAA,CACjB,EACDL,EAAoB,MAAQG,EAAQ,KACpCG,EAAe,MAAQH,EAAQ,gBACxBa,EAAO,CAEd,QAAQ,MAAMA,CAAK,CAAA,QACnB,CACAnB,EAAQ,MAAQ,EAClB,CAAA,EAMA,kBAAAO,EACA,UAAAU,CAAA,CAEJ,CAEA,SAASG,GAAa,CACdZ,MAAAA,EAAeP,EAAoB,CAAA,CAAE,EACrCoB,EAAqBpB,EAAI,EAAK,EAEpCI,EAAU,IAAM,CACdiB,IACUd,GAAAA,EAAc,MAAMe,GAAW,CACnCF,EAAmB,OACrBG,EAAaD,CAAO,EACpBF,EAAmB,MAAQ,IAE3BI,EAAsBF,CAAO,CAC/B,CACD,CAAA,CACF,EAED,MAAMD,EAAe,IAAM,OACzBD,EAAmB,MAAQ,GAE3Bb,EAAa,MAAQ,IAAI,MAAMN,CAAQ,EACvC,QAASwB,EAAI,EAAGA,EAAIxB,EAAUwB,IAAK,CACjC,MAAMC,GAASd,EAAAjB,EAAM,QAAQ8B,CAAC,IAAf,YAAAb,EAAkB,OAC7Bc,IACEA,EAAO,OAAS,cAClBnB,EAAa,MAAM,OAAOkB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,WAAYA,EAAO,cAAgB,GACnC,KAAM,cACN,YAAa/B,EAAM,QAAQ8B,CAAC,EAAE,KAAA,CAC/B,EACQC,EAAO,OAAS,cACzBnB,EAAa,MAAM,OAAOkB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,WAAYA,EAAO,cAAgB,GACnC,KAAM,cACN,YAAa/B,EAAM,QAAQ8B,CAAC,EAAE,KAAA,CAC/B,EACQC,EAAO,OAAS,cACzBnB,EAAa,MAAM,OAAOkB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,SAAUA,EAAO,cAAgB,EACjC,KAAM,aACN,YAAa/B,EAAM,QAAQ8B,CAAC,EAAE,KAAA,CAC/B,EAGP,CAAA,EAGIF,EAAe,MAAOD,GAA4B,CACtD,QAAQ,IAAI,cAAc,EAC1BvB,EAAQ,MAAQ,GACF4B,KACR,MAAAtB,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAae,EAAY,KAC3B,EACA,WAAYJ,EAAkB,MAC9B,aAAcgB,EACd,eAAgB,QAAA,CACjB,EACDpB,EAAoB,MAAQG,EAAQ,KACpCG,EAAe,MAAQH,EAAQ,UAC/BN,EAAQ,MAAQ,EAAA,EAGZyB,EAAwBI,GAAcL,EAAc,GAAG,EAEtD,MAAA,CACL,aAAAhB,EACA,aAAAc,CAAA,CAEJ,CAEA,SAASQ,GAAmB,CACpBC,MAAAA,EAAe9B,EAAsC,CAAA,CAAE,EAEvD+B,EAAmB,IAAM,CACxBlC,EAAA,gBAAiBiC,EAAa,KAAK,CAAA,EAGpCE,EAAgBC,GAAoB,CACxCC,EAAWD,EAAK,IAASE,GAAAA,EAAE,EAAE,CAAC,CAAA,EAG1BC,EAAiBC,GAAkB,CACvC,MAAMC,EAAQR,EAAa,MAAM,UAAeK,GAAAA,EAAE,KAAOE,CAAK,EAC9DP,EAAa,MAAM,OAAOQ,EAAO,CAAC,EACjBP,GAAA,EAIbG,EAAa,MAAOK,GAAsB,CAC1C5C,EAAM,oBAAsB,WAC9BmC,EAAa,MAAQ,GACrB,MAAMU,GAAS,GAEX,MAAAC,EAAevC,EAAoB,MAAM,UAAYqC,EAAQ,SAASJ,EAAE,EAAE,CAAC,EAC7ExC,EAAM,oBAAsB,WAC9B8C,EAAa,OAAS,KAAK,IAAI,EAAGA,EAAa,MAAM,GAGvD,UAAWC,KAAOD,EACXX,EAAa,MAAM,SAAUK,GAAE,KAAOO,EAAI,EAAE,GAC/CZ,EAAa,MAAM,KAAKY,CAAG,EAIdX,GAAA,EAGbY,EAAkB,IAAM,CAC5Bb,EAAa,MAAQ,GACJC,GAAA,EAGba,EAAc,IAAiB1C,EAAoB,MACnD2C,EAAkB,IAAiBf,EAAa,MAEhDgB,EAAkBnC,EAAS,IACxBmB,EAAa,MAAM,OAAS,GAAKA,EAAa,MAAM,SAAW5B,EAAoB,MAAM,MACjG,EAEM,MAAA,CACL,aAAA4B,EACA,aAAAE,EACA,cAAAI,EACA,WAAAF,EACA,gBAAAS,EACA,YAAAC,EACA,gBAAAC,EACA,gBAAAC,CAAA,CAEJ,CAEM,KAAA,CAAE,aAAAhB,EAAc,aAAAE,EAAc,cAAAI,EAAe,WAAAF,EAAY,gBAAAS,EAAiB,YAAAC,EAAa,gBAAAC,EAAiB,gBAAAC,CAAgB,EAC5HjB,EAAiB,EACb,CAAE,aAAAtB,EAAc,aAAAc,CAAa,EAAIF,EAAW,EAC5C,CAAE,WAAAJ,EAAY,gBAAAgC,EAAiB,kBAAAzC,EAAmB,UAAAU,EAAA,EAAcF,IAChE,CAAE,gBAAAkC,GAAiB,eAAAxC,EAAgB,YAAAE,EAAa,cAAAiB,EAAA,EAAkBlB,IAElEwC,GAAmB,SAAY,CAEzBjC,KACGK,IACGsB,GAAA,EAGZO,GAAwB,SAAY,CACxCnD,EAAQ,MAAQ,GACV,MAAAM,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAae,EAAY,KAC3B,EACA,WAAYJ,EAAkB,MAC9B,aAAcC,EAAa,MAC3B,eAAgB,SAAA,CACjB,EACDL,EAAoB,MAAQG,EAAQ,KACpCG,EAAe,MAAQH,EAAQ,UAC/BN,EAAQ,MAAQ,EAAA,EAGlB,OAAAoD,GACE,IAAMxD,EAAM,QACZ,IAAM0B,EAAa,EACnB,CAAE,KAAM,GAAM,UAAW,EAAK,CAAA,EAGnB+B,EAAA,CACX,WAAAlB,EACA,iBAAAe,GACA,gBAAAN,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAK,EAAA,CACD"}

package/dist/table/ElServerSideResponsiveTable.vue.d.ts

@@ -51,12 +51,14 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
             desktopBehaviour?: {
                 mainIcon?: {
                     name: import('..').IconNames;
+                    color?: ("pink" | "yellow" | "orange" | "cyan" | "rose" | "green" | "brand-blue" | "brand-green" | "red" | "purple" | "indigo") | undefined;
                     solid?: boolean | undefined;
                     cursorPointer?: boolean | undefined;
                     disabled?: boolean | undefined;
                 } | undefined;
                 subIcon?: {
                     name: import('..').IconNames;
+                    color?: ("pink" | "yellow" | "orange" | "cyan" | "rose" | "green" | "brand-blue" | "brand-green" | "red" | "purple" | "indigo") | undefined;
                     solid?: boolean | undefined;
                     cursorPointer?: boolean | undefined;
                     disabled?: boolean | undefined;
@@ -81,12 +83,14 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
                     outlined?: boolean | undefined;
                     leadingIcon?: {
                         name: import('..').IconNames;
+                        color?: ("pink" | "yellow" | "orange" | "cyan" | "rose" | "green" | "brand-blue" | "brand-green" | "red" | "purple" | "indigo") | undefined;
                         solid?: boolean | undefined;
                         cursorPointer?: boolean | undefined;
                         disabled?: boolean | undefined;
                     } | undefined;
                     trailingIcon?: {
                         name: import('..').IconNames;
+                        color?: ("pink" | "yellow" | "orange" | "cyan" | "rose" | "green" | "brand-blue" | "brand-green" | "red" | "purple" | "indigo") | undefined;
                         solid?: boolean | undefined;
                         cursorPointer?: boolean | undefined;
                         disabled?: boolean | undefined;
@@ -118,6 +122,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
                 disabled?: boolean | undefined;
                 icon?: {
                     name: import('..').IconNames;
+                    color?: ("pink" | "yellow" | "orange" | "cyan" | "rose" | "green" | "brand-blue" | "brand-green" | "red" | "purple" | "indigo") | undefined;
                     solid?: boolean | undefined;
                     cursorPointer?: boolean | undefined;
                     disabled?: boolean | undefined;
@@ -167,6 +172,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
                 onClick?: (() => any) | undefined;
                 readonly icon: {
                     name: import('..').IconNames;
+                    color?: ("pink" | "yellow" | "orange" | "cyan" | "rose" | "green" | "brand-blue" | "brand-green" | "red" | "purple" | "indigo") | undefined;
                     solid?: boolean | undefined;
                     cursorPointer?: boolean | undefined;
                     disabled?: boolean | undefined;
@@ -198,6 +204,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
                     disabled?: boolean | undefined;
                     icon?: {
                         name: import('..').IconNames;
+                        color?: ("pink" | "yellow" | "orange" | "cyan" | "rose" | "green" | "brand-blue" | "brand-green" | "red" | "purple" | "indigo") | undefined;
                         solid?: boolean | undefined;
                         cursorPointer?: boolean | undefined;
                         disabled?: boolean | undefined;
@@ -233,6 +240,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
                     onClick?: (() => any) | undefined;
                     readonly icon: {
                         name: import('..').IconNames;
+                        color?: ("pink" | "yellow" | "orange" | "cyan" | "rose" | "green" | "brand-blue" | "brand-green" | "red" | "purple" | "indigo") | undefined;
                         solid?: boolean | undefined;
                         cursorPointer?: boolean | undefined;
                         disabled?: boolean | undefined;
@@ -259,10 +267,11 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
                         avatarUrl: string | null | undefined;
                         role: import('..').Role;
                     } | undefined;
-                    disabled?: boolean | undefined;
                     color?: ("primary" | "secondary") | undefined;
+                    disabled?: boolean | undefined;
                     leadingIcon?: {
                         name: import('..').IconNames;
+                        color?: ("pink" | "yellow" | "orange" | "cyan" | "rose" | "green" | "brand-blue" | "brand-green" | "red" | "purple" | "indigo") | undefined;
                         solid?: boolean | undefined;
                         cursorPointer?: boolean | undefined;
                         disabled?: boolean | undefined;
@@ -297,6 +306,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
                     disabled?: boolean | undefined;
                     icon?: {
                         name: import('..').IconNames;
+                        color?: ("pink" | "yellow" | "orange" | "cyan" | "rose" | "green" | "brand-blue" | "brand-green" | "red" | "purple" | "indigo") | undefined;
                         solid?: boolean | undefined;
                         cursorPointer?: boolean | undefined;
                         disabled?: boolean | undefined;
@@ -328,6 +338,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
                     disabled?: boolean | undefined;
                     icon?: {
                         name: import('..').IconNames;
+                        color?: ("pink" | "yellow" | "orange" | "cyan" | "rose" | "green" | "brand-blue" | "brand-green" | "red" | "purple" | "indigo") | undefined;
                         solid?: boolean | undefined;
                         cursorPointer?: boolean | undefined;
                         disabled?: boolean | undefined;
@@ -356,6 +367,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
         mobileBehaviour?: {
             trailingIcon?: {
                 name: import('..').IconNames;
+                color?: ("pink" | "yellow" | "orange" | "cyan" | "rose" | "green" | "brand-blue" | "brand-green" | "red" | "purple" | "indigo") | undefined;
                 solid?: boolean | undefined;
                 cursorPointer?: boolean | undefined;
                 disabled?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@davincihealthcare/elty-design-system-vue",
-  "version": "1.76.1",
+  "version": "1.77.1",
   "license": "UNLICENSED",
   "main": "dist/index.umd.cjs",
   "types": "dist/index.d.ts",

package/dist/node_modules/swiper/modules/pagination.css

@@ -1 +0,0 @@
-.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0,-50%,0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translate(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}

package/dist/node_modules/swiper/swiper.css

@@ -1 +0,0 @@
-@font-face{font-family:swiper-icons;src:url(data:application/font-woff;charset=utf-8;base64,\ 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);font-weight:400;font-style:normal}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}