Merge pull request #876 from takenet/developer

Developer
takenet · Sep 6, 2024 · b018bf1 · b018bf1
2 parents dffba72 + 9c86fe1
commit b018bf1
Show file tree

Hide file tree

Showing 9 changed files with 886 additions and 100 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -1868,35 +1868,39 @@ export namespace Components {
     }
     interface BdsPagination {
         /**
-          * Data test is the prop to specifically test the component action object. dtButtonEnd is the data-test to button end
+          * Propriedade de teste para especificamente testar a ação do botão final. dtButtonEnd é o data-test para o botão final.
          */
         "dtButtonEnd"?: string;
         /**
-          * Data test is the prop to specifically test the component action object. dtButtonInitial is the data-test to button initial.
+          * Propriedade de teste para especificamente testar a ação do botão inicial. dtButtonInitial é o data-test para o botão inicial.
          */
         "dtButtonInitial"?: string;
         /**
-          * Data test is the prop to specifically test the component action object. dtButtonNext is the data-test to button next.
+          * Propriedade de teste para especificamente testar a ação do botão de próxima página. dtButtonNext é o data-test para o botão próximo.
          */
         "dtButtonNext"?: string;
         /**
-          * Data test is the prop to specifically test the component action object. dtButtonPrev is the data-test to button prev.
+          * Propriedade de teste para especificamente testar a ação do botão de página anterior. dtButtonPrev é o data-test para o botão anterior.
          */
         "dtButtonPrev"?: string;
         /**
-          * Data test is the prop to specifically test the component action object. dtSelectNumber is the data-test to select number.
+          * Propriedade de teste para especificamente testar o seletor de número de páginas. dtSelectNumber é o data-test para o seletor de número de páginas.
          */
         "dtSelectNumber"?: string;
+        "itemsPage"?: any;
+        "language"?: string;
+        "numberItems"?: number;
         /**
-          * Set the placement of the options menu. Can be 'bottom' or 'top'.
+          * Define a posição do menu de opções. Pode ser 'bottom' ou 'top'. Padrão é 'auto', que ajusta automaticamente a posição.
          */
         "optionsPosition"?: PaginationOptionsPositionType;
+        "pageCounter"?: boolean;
         /**
-          * Prop to recive the number of pages.
+          * Propriedade para receber o número total de páginas, baseado no total de itens e itens por página.
          */
         "pages"?: number;
         /**
-          * When the component are render this page are set.
+          * Propriedade que define a página inicial ao renderizar o componente.
          */
         "startedPage"?: number;
     }
@@ -5591,39 +5595,47 @@ declare namespace LocalJSX {
     }
     interface BdsPagination {
         /**
-          * Data test is the prop to specifically test the component action object. dtButtonEnd is the data-test to button end
+          * Propriedade de teste para especificamente testar a ação do botão final. dtButtonEnd é o data-test para o botão final.
          */
         "dtButtonEnd"?: string;
         /**
-          * Data test is the prop to specifically test the component action object. dtButtonInitial is the data-test to button initial.
+          * Propriedade de teste para especificamente testar a ação do botão inicial. dtButtonInitial é o data-test para o botão inicial.
          */
         "dtButtonInitial"?: string;
         /**
-          * Data test is the prop to specifically test the component action object. dtButtonNext is the data-test to button next.
+          * Propriedade de teste para especificamente testar a ação do botão de próxima página. dtButtonNext é o data-test para o botão próximo.
          */
         "dtButtonNext"?: string;
         /**
-          * Data test is the prop to specifically test the component action object. dtButtonPrev is the data-test to button prev.
+          * Propriedade de teste para especificamente testar a ação do botão de página anterior. dtButtonPrev é o data-test para o botão anterior.
          */
         "dtButtonPrev"?: string;
         /**
-          * Data test is the prop to specifically test the component action object. dtSelectNumber is the data-test to select number.
+          * Propriedade de teste para especificamente testar o seletor de número de páginas. dtSelectNumber é o data-test para o seletor de número de páginas.
          */
         "dtSelectNumber"?: string;
+        "itemsPage"?: any;
+        "language"?: string;
+        "numberItems"?: number;
+        /**
+          * Evento emitido quando o valor da página atual é alterado. Pode ser escutado para realizar ações específicas ao mudar de página.
+         */
+        "onBdsItemsPerPageChange"?: (event: BdsPaginationCustomEvent<any>) => void;
         /**
-          * When de value of component change, the event are dispache.
+          * Evento emitido quando o valor da página atual é alterado. Pode ser escutado para realizar ações específicas ao mudar de página.
          */
         "onBdsPaginationChange"?: (event: BdsPaginationCustomEvent<any>) => void;
         /**
-          * Set the placement of the options menu. Can be 'bottom' or 'top'.
+          * Define a posição do menu de opções. Pode ser 'bottom' ou 'top'. Padrão é 'auto', que ajusta automaticamente a posição.
          */
         "optionsPosition"?: PaginationOptionsPositionType;
+        "pageCounter"?: boolean;
         /**
-          * Prop to recive the number of pages.
+          * Propriedade para receber o número total de páginas, baseado no total de itens e itens por página.
          */
         "pages"?: number;
         /**
-          * When the component are render this page are set.
+          * Propriedade que define a página inicial ao renderizar o componente.
          */
         "startedPage"?: number;
     }

diff --git a/src/components/grid/readme.md b/src/components/grid/readme.md
@@ -46,6 +46,7 @@
  - [bds-carousel](../carousel)
  - [bds-datepicker](../datepicker)
  - [bds-list-item-content](../list)
+ - [bds-pagination](../pagination)
  - [bds-skeleton](../skeleton)
  - [bds-tab-group](../tabs)
  - [bds-test-component](../test-component)
@@ -62,6 +63,7 @@ graph TD;
   bds-carousel --> bds-grid
   bds-datepicker --> bds-grid
   bds-list-item-content --> bds-grid
+  bds-pagination --> bds-grid
   bds-skeleton --> bds-grid
   bds-tab-group --> bds-grid
   bds-test-component --> bds-grid

diff --git a/src/components/pagination/languages.tsx b/src/components/pagination/languages.tsx
@@ -0,0 +1,26 @@
+export const en_US = 
+    {
+        itemsPerPage: 'Items per page',
+        of: 'of',
+        items: 'items',
+        pages: 'pages'
+    }
+;
+
+export const pt_BR = 
+    {
+        itemsPerPage: 'Itens por página',
+        of: 'de',
+        items: 'itens',
+        pages: 'páginas'
+    }
+;
+
+export const es_MX = 
+    {
+        itemsPerPage: 'Itens por página',
+        of: 'de',
+        items: 'itens',
+        pages: 'páginas'
+    }
+;
diff --git a/src/components/pagination/pagination.scss b/src/components/pagination/pagination.scss
@@ -5,11 +5,30 @@
   display: block;
 
   .actions {
-    display: flex;
-    gap: 8px;
-
     &_select {
       width: 74px;
     }
   }
 }
+
+:host(.full_width) {
+  width: 100%;
+}
+
+@media screen and (max-width: 905px) {
+  .items_per_page {
+    display: none;
+  }
+  .actions {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .actions {
+    &--text {
+      display: none;
+    }
+  }
+}