feat: add pagination component

projects/angular-ui/src/lib/bao.module.ts

@@ -19,6 +19,7 @@ import { BaoIconModule } from './icon';
 import { BaoListModule } from './list';
 import { BaoMessageBarModule } from './message-bar';
 import { BaoModalModule } from './modal/module';
+import { BaoPaginationModule } from './pagination';
 import { BaoRadioModule } from './radio';
 import { BaoSnackBarModule } from './snack-bar/module';
 import { BaoSummaryModule } from './summary';
@@ -56,8 +57,8 @@ import { BaoTagModule } from './tag';
     BaoFileModule,
     BaoSnackBarModule,
     BaoSystemHeaderModule,
-    BaoMessageBarModule
-    // TODO: reactivate once component does not depend on global css BaoBadgeModule,
+    BaoMessageBarModule,
+    BaoPaginationModule
   ]
 })
 export class BaoModule {}

projects/angular-ui/src/lib/pagination/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2025 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+export * from './module';
+export * from './pagination.component';

projects/angular-ui/src/lib/pagination/module.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2025 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BaoIconModule } from '../icon';
+import { BaoPaginationComponent } from './pagination.component';
+
+@NgModule({
+  imports: [CommonModule, BaoIconModule, FormsModule],
+  declarations: [BaoPaginationComponent],
+  exports: [BaoPaginationComponent]
+})
+export class BaoPaginationModule {}

projects/angular-ui/src/lib/pagination/pagination.component.html

@@ -0,0 +1,77 @@
+<div class="items-diplayed-controls">
+  <span class="range-display">
+    {{ rangeLabel }}
+  </span>
+  <div *ngIf="showItemsPerPageSelector" class="items-per-page">
+    <label for="items-per-page-select" class="select-label"
+      >Items par page
+    </label>
+    <select
+      [(ngModel)]="itemsPerPage"
+      (ngModelChange)="handlePageSizeChange($event)"
+      name="items-per-page"
+      id="items-per-page-select"
+      class="dropdown-select"
+    >
+      <option *ngFor="let size of pageSizeOptions" [value]="size">
+        {{ size }}
+      </option>
+    </select>
+  </div>
+</div>
+<nav aria-label="Pagination" class="page-controls">
+  <ul>
+    <li
+      class="page-item"
+      [ngClass]="{ disabled: !hasPrevious }"
+      [attr.aria-disabled]="!hasPrevious ? 'true' : null"
+    >
+      <a
+        class="page-link"
+        (click)="$event.preventDefault(); handlePreviousClick()"
+        (keydown.enter)="$event.preventDefault(); handlePreviousClick()"
+        (keydown.space)="$event.preventDefault(); handlePreviousClick()"
+        tabindex="0"
+      >
+        <bao-icon title="Page précédente" svgIcon="icon-chevron-left"></bao-icon
+      ></a>
+    </li>
+    <li
+      class="page-item"
+      *ngFor="let page of displayedPages"
+      [ngClass]="{ active: page === currentPage }"
+      [attr.aria-current]="page === currentPage ? 'page' : null"
+    >
+      <ng-container *ngIf="page > 0; else ellipsis">
+        <span class="sr-only">{{ page }}</span>
+        <a
+          class="page-link"
+          (click)="$event.preventDefault(); goTo(page)"
+          (keydown.enter)="$event.preventDefault(); goTo(page)"
+          (keydown.space)="$event.preventDefault(); goTo(page)"
+          tabindex="0"
+          >{{ page }}</a
+        >
+      </ng-container>
+      <ng-template #ellipsis>
+        <span class="page-link ellipsis" aria-hidden="true">...</span>
+      </ng-template>
+    </li>
+
+    <li
+      class="page-item"
+      [ngClass]="{ disabled: !hasNext }"
+      [attr.aria-disabled]="!hasNext ? 'true' : null"
+    >
+      <a
+        class="page-link"
+        (click)="$event.preventDefault(); handleNextClick()"
+        (keydown.enter)="$event.preventDefault(); handleNextClick()"
+        (keydown.space)="$event.preventDefault(); handleNextClick()"
+        tabindex="0"
+      >
+        <bao-icon title="Page suivante" svgIcon="icon-chevron-right"></bao-icon
+      ></a>
+    </li>
+  </ul>
+</nav>

projects/angular-ui/src/lib/pagination/pagination.component.scss

@@ -0,0 +1,93 @@
+@import '../core/typography';
+@import '../core/colors';
+@import '../core//grid';
+
+.bao-pagination {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  @include respond-to(md) {
+    justify-content: flex-start;
+  }
+  > .items-diplayed-controls {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-self: center;
+    @include respond-to(md) {
+      flex-direction: row;
+      justify-content: space-between;
+      align-self: auto;
+      margin-bottom: 1rem;
+    }
+    .range-display {
+      @include typo-interface-small-bold;
+      margin-bottom: 1rem;
+      @include respond-to(md) {
+        margin-bottom: 0rem;
+      }
+    }
+    > .items-per-page {
+      display: flex;
+      align-items: baseline;
+      margin-bottom: 2rem;
+      @include respond-to(md) {
+        margin-bottom: 0rem;
+      }
+      > .select-label {
+        @include typo-interface-small-bold;
+        color: $neutral-secondary;
+        margin-right: 1rem;
+      }
+      > .dropdown-select {
+        background-color: $neutral-ground;
+        border-radius: 0.25rem;
+        border-color: $neutral-stroke;
+        border-style: solid;
+        border-width: thin;
+        padding: 0.4375rem 2.4375rem 0.4375rem 0.4375rem;
+        @include typo-interface-medium-normal;
+        color: $ground-reversed;
+        appearance: none;
+        background: $white
+          url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23adb2bd' d='M12 12.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L12 12.586z'/%3e%3c/svg%3e")
+          right 0.4375rem center/24px 24px no-repeat;
+      }
+    }
+  }
+  .page-controls {
+    align-self: center;
+    > ul {
+      display: flex;
+      padding-left: 0;
+      margin-bottom: 0;
+      > .page-item {
+        &.disabled > .page-link > .bao-icon {
+          color: $neutral-tertiary;
+        }
+        > .page-link {
+          border-style: none;
+        }
+        &.active {
+          > .page-link {
+            background-color: $highlight-light;
+            border: 1px solid $action;
+            border-radius: 0.25rem;
+          }
+        }
+        > .page-link {
+          font-size: 0.875rem;
+          &:focus {
+            box-shadow: inset 0px 0px 0px 2px $informative-reversed;
+          }
+        }
+        > .ellipsis {
+          font-weight: bold;
+          &:hover {
+            background-color: $neutral-ground;
+          }
+        }
+      }
+    }
+  }
+}