From ae8973b73ae73f00d596daa44bf2d7dcb46db4a8 Mon Sep 17 00:00:00 2001
From: Larissa Cardoso <106749260+larissacard@users.noreply.github.com>
Date: Thu, 5 Jan 2023 09:01:04 -0300
Subject: [PATCH] feat: add select from items per page in table and smart table
 pagination (#360)

* feat: select from items per page in table and smart-table pagination #352

* feat: add select from items per page in table and smart table pagination

* feat: adjust dropdown position when his at bottom's page

* fix: dropdown showing up above footer table

Co-authored-by: Pedro Miguel <93842972+PedroMiguel7@users.noreply.github.com>
Co-authored-by: Iury Nogueira <iunog@hotmail.com>
---
 projects/ion/src/lib/dropdown/dropdown.component.ts         | 4 ++++
 projects/ion/src/lib/pagination/pagination.component.html   | 1 +
 projects/ion/src/lib/smart-table/smart-table.component.html | 2 +-
 projects/ion/src/lib/table/table.component.scss             | 6 +++---
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/projects/ion/src/lib/dropdown/dropdown.component.ts b/projects/ion/src/lib/dropdown/dropdown.component.ts
index 60e733d23..9d01a7e52 100644
--- a/projects/ion/src/lib/dropdown/dropdown.component.ts
+++ b/projects/ion/src/lib/dropdown/dropdown.component.ts
@@ -45,6 +45,10 @@ export class DropdownComponent implements AfterViewInit {
     const elementProps = element.getBoundingClientRect();
     const elementRight = elementProps.right;
     elementRight > widthContainer && (element.style.right = '0');
+
+    const heightContainer = window.innerHeight;
+    const elementBottom = elementProps.bottom;
+    elementBottom > heightContainer && (element.style.bottom = '42px');
   }
 
   mouseEnter(option: DropdownItem): void {
diff --git a/projects/ion/src/lib/pagination/pagination.component.html b/projects/ion/src/lib/pagination/pagination.component.html
index c6e0141a1..6fe14e1e6 100644
--- a/projects/ion/src/lib/pagination/pagination.component.html
+++ b/projects/ion/src/lib/pagination/pagination.component.html
@@ -6,6 +6,7 @@
     [options]="optionsPage"
     customId="btn-select"
     (selected)="changeItemsPerPage($event)"
+    type="secondary"
   ></ion-button>
 
   <ion-button
diff --git a/projects/ion/src/lib/smart-table/smart-table.component.html b/projects/ion/src/lib/smart-table/smart-table.component.html
index 58f8fdbb8..77a315392 100644
--- a/projects/ion/src/lib/smart-table/smart-table.component.html
+++ b/projects/ion/src/lib/smart-table/smart-table.component.html
@@ -117,7 +117,6 @@
     <ion-icon size="40" type="exclamation-rounded"></ion-icon>
     <span>Não há dados</span>
   </div>
-
   <div
     *ngIf="config.pagination && config.data && config.data.length"
     data-testid="pagination-container"
@@ -137,6 +136,7 @@
         [page]="config.pagination.page"
         size="md"
         (events)="paginationEvents($event)"
+        [allowChangeQtdItems]="true"
       ></ion-pagination>
     </div>
   </div>
diff --git a/projects/ion/src/lib/table/table.component.scss b/projects/ion/src/lib/table/table.component.scss
index 78b3eb92e..70dc161cf 100644
--- a/projects/ion/src/lib/table/table.component.scss
+++ b/projects/ion/src/lib/table/table.component.scss
@@ -5,14 +5,14 @@ $radius: 8px;
 .ion-table {
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
   border-radius: $radius;
-  max-height: 660px;
-  overflow-y: auto;
 }
 
 table {
   border-collapse: collapse;
   position: relative;
   width: 100%;
+  max-height: 592px;
+  overflow-y: auto;
 
   & .border-header {
     border-bottom: 1px solid $neutral-4;
@@ -135,7 +135,6 @@ table {
   display: flex;
   justify-content: space-between;
   padding: 16px;
-  overflow-x: auto;
   gap: spacing(2);
 
   position: sticky;
@@ -152,6 +151,7 @@ table {
   font-size: 14px;
   line-height: 20px;
   color: $neutral-7;
+
 }
 
 .noData {