angular-reccos-shop/src/app/design-system/pagination/pagination.html at bd5eea587371203e3dd990622b2d7b58ac86c604 · enterpriseShop/angular-reccos-shop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<div class="flex flex-col md:flex-row items-center justify-between gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-t border-gray-200/80 dark:border-slate-700/80 rounded-b-[12px] text-xs text-gray-600 dark:text-slate-400 select-none shadow-2xs">

  <!-- Left side: Items count & Page Size Selector -->
  <div class="flex flex-wrap items-center justify-center md:justify-start gap-3 w-full md:w-auto">
    @if (showItemRange()) {
      <div class="text-gray-600 dark:text-slate-300">
        Mostrando <span class="font-semibold text-gray-900 dark:text-slate-100">{{ startItemFormatted() }}</span> a <span class="font-semibold text-gray-900 dark:text-slate-100">{{ endItemFormatted() }}</span> de <span class="font-semibold text-gray-900 dark:text-slate-100">{{ totalItemsFormatted() }}</span> registros
      </div>
    }

    @if (showPageSize()) {
      <div class="flex items-center gap-1.5 text-gray-500 dark:text-slate-400">
        <span class="hidden sm:inline">Exibir</span>
        <div class="relative">
          <select
            [value]="pageSize()"
            (change)="onPageSizeChange($event)"
            class="appearance-none pl-2.5 pr-7 py-1 bg-gray-50 dark:bg-slate-700/80 border border-gray-200 dark:border-slate-600 rounded-lg text-xs font-semibold text-gray-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/30 hover:border-gray-300 dark:hover:border-slate-500 transition-all cursor-pointer"
            title="Itens por página"
          >
            @for (opt of pageSizeOptions(); track opt) {
              <option [value]="opt">{{ opt }} por pág.</option>
            }
          </select>
          <div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400 dark:text-slate-400">
            <app-icon name="chevron-down" size="w-3 h-3" />
          </div>
        </div>
      </div>
    }
  </div>

  <!-- Right side: Page Navigation Controls -->
  <div class="flex items-center justify-center gap-1 w-full md:w-auto">
    <!-- First Page Button -->
    <button
      type="button"
      [disabled]="currentPage() <= 1"
      (click)="goToPage(1)"
      class="p-1.5 rounded-lg border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all"
      title="Primeira Página"
    >
      <app-icon name="chevrons-left" size="w-4 h-4" />
    </button>

    <!-- Previous Page Button -->
    <button
      type="button"
      [disabled]="currentPage() <= 1"
      (click)="goToPage(currentPage() - 1)"
      class="p-1.5 rounded-lg border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all"
      title="Página Anterior"
    >
      <app-icon name="chevron-left" size="w-4 h-4" />
    </button>

    <!-- Mobile current page badge -->
    <div class="sm:hidden px-3 py-1 bg-[#EAF4EE] dark:bg-slate-700 text-[#4F8A6B] dark:text-[#5BAE6A] font-semibold rounded-lg text-xs">
      {{ currentPage() }} / {{ totalPages() }}
    </div>

    <!-- Desktop Page Number Buttons -->
    <div class="hidden sm:flex items-center gap-1 mx-1">
      @for (item of visiblePages(); track $index) {
        @if (item.type === 'page') {
          <button
            type="button"
            (click)="goToPage(item.page!)"
            [class]="item.page === currentPage()
              ? 'bg-[#4F8A6B] text-white font-bold border-[#4F8A6B] shadow-xs'
              : 'border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-200 font-medium'"
            class="min-w-[32px] h-[32px] px-2 rounded-lg flex items-center justify-center text-xs transition-all cursor-pointer"
          >
            {{ item.page }}
          </button>
        } @else {
          <span class="px-1 text-gray-400 dark:text-slate-500 font-semibold select-none">...</span>
        }
      }
    </div>

    <!-- Next Page Button -->
    <button
      type="button"
      [disabled]="currentPage() >= totalPages()"
      (click)="goToPage(currentPage() + 1)"
      class="p-1.5 rounded-lg border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all"
      title="Próxima Página"
    >
      <app-icon name="chevron-right" size="w-4 h-4" />
    </button>

    <!-- Last Page Button -->
    <button
      type="button"
      [disabled]="currentPage() >= totalPages()"
      (click)="goToPage(totalPages())"
      class="p-1.5 rounded-lg border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all"
      title="Última Página"
    >
      <app-icon name="chevrons-right" size="w-4 h-4" />
    </button>

    <!-- Quick Jump to Page (Optional Input) -->
    @if (totalPages() > 5) {
      <div class="hidden lg:flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-slate-700">
        <span class="text-[11px] text-gray-400 dark:text-slate-500">Ir p/:</span>
        <input
          type="number"
          min="1"
          [max]="totalPages()"
          [value]="currentPage()"
          (keydown.enter)="onDirectJump($event)"
          (blur)="onDirectJump($event)"
          class="w-11 px-1.5 py-1 text-center bg-gray-50 dark:bg-slate-700/80 border border-gray-200 dark:border-slate-600 rounded-lg text-xs font-medium text-gray-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-[#4F8A6B]"
          title="Pressione Enter para ir até a página"
        />
      </div>
    }
  </div>

</div>