87 create pagination component

projects/ion/src/lib/pagination/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

projects/ion/src/lib/pagination/pagination.component.html

@@ -0,0 +1,96 @@
+<div class="ion-pagination">
+  <ion-button
+    [icon]="{ type: 'left2' }"
+    data-testid="arrow-left"
+    type="secondary"
+    [size]="size"
+    shape="rounded"
+    [disabled]="loading || !hasPrevius()"
+    (ionOnClick)="previous()" />
+
+  @if (isJumpButtonsVisible()) {
+    <div
+      class="ion-pagination__advanced-list"
+      data-testid="advanced-pagination">
+      <ion-button
+        [label]="pages()[0].page_number.toString()"
+        [attr.data-testid]="'page-' + pages()[0].page_number"
+        type="secondary"
+        class="ion-pagination__button--rounded"
+        [class.ion-pagination__button--selected]="pages()[0].selected"
+        [size]="size"
+        [disabled]="loading"
+        (ionOnClick)="selectPageOnClick(pages()[0].page_number)" />
+      @if (jumpButtons.left.visible()) {
+        <ion-button
+          [icon]="{ type: jumpButtons.left.hover ? 'left3' : 'more' }"
+          data-testid="more-left"
+          type="secondary"
+          [size]="size"
+          shape="rounded"
+          [disabled]="loading"
+          (mouseenter)="changeIconHover('left', IS_HOVER)"
+          (mouseleave)="changeIconHover('left', !IS_HOVER)"
+          (ionOnClick)="jumpPagesBackward()" />
+      }
+
+      @for (page of currentVisibleButtons; track page.page_number) {
+        <ion-button
+          [label]="page.page_number.toString()"
+          [attr.data-testid]="'page-' + page.page_number"
+          type="secondary"
+          class="ion-pagination__button--rounded"
+          [class.ion-pagination__button--selected]="page.selected"
+          [size]="size"
+          [disabled]="loading"
+          (ionOnClick)="selectPageOnClick(page.page_number)" />
+      }
+      @if (jumpButtons.right.visible()) {
+        <ion-button
+          [icon]="{ type: jumpButtons.right.hover ? 'right3' : 'more' }"
+          data-testid="more-right"
+          type="secondary"
+          [size]="size"
+          shape="rounded"
+          [disabled]="loading"
+          (mouseenter)="changeIconHover('right', IS_HOVER)"
+          (mouseleave)="changeIconHover('right', !IS_HOVER)"
+          (ionOnClick)="jumpPagesForward()" />
+      }
+      <ion-button
+        [label]="pages()[pages().length - 1].page_number.toString()"
+        [attr.data-testid]="'page-' + pages()[pages().length - 1].page_number"
+        type="secondary"
+        class="ion-pagination__button--rounded"
+        [class.ion-pagination__button--selected]="
+          pages()[pages().length - 1].selected
+        "
+        [size]="size"
+        [disabled]="loading"
+        (ionOnClick)="
+          selectPageOnClick(pages()[pages().length - 1].page_number)
+        " />
+    </div>
+  } @else {
+    @for (page of pages(); track page.page_number) {
+      <ion-button
+        [label]="page.page_number.toString()"
+        [attr.data-testid]="'page-' + page.page_number"
+        type="secondary"
+        class="ion-pagination__button--rounded"
+        [class.ion-pagination__button--selected]="page.selected"
+        [size]="size"
+        [disabled]="loading"
+        (ionOnClick)="selectPageOnClick(page.page_number)" />
+    }
+  }
+
+  <ion-button
+    [icon]="{ type: 'right2' }"
+    data-testid="arrow-right"
+    type="secondary"
+    [size]="size"
+    shape="rounded"
+    (ionOnClick)="next()"
+    [disabled]="loading || !hasNext()" />
+</div>

projects/ion/src/lib/pagination/pagination.component.scss

@@ -0,0 +1,41 @@
+@import '../../styles/index.scss';
+
+.ion-pagination {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+
+  &__advanced-list {
+    display: flex;
+    gap: 8px;
+  }
+
+  &__button {
+    &--rounded {
+      ::ng-deep button {
+        &.ion-btn--sm {
+          padding: spacing(0.5);
+        }
+        &.ion-btn--md {
+          padding: spacing(0.75);
+        }
+        &.ion-btn--lg {
+          padding: spacing(1);
+        }
+        &.ion-btn--xl {
+          padding: spacing(1.5);
+        }
+      }
+    }
+
+    &--selected {
+      ::ng-deep button {
+        &.ion-btn--secondary {
+          border: 1px solid $primary-color;
+          background-color: $primary-1;
+          color: $primary-color;
+        }
+      }
+    }
+  }
+}