@villedemontreal/angular-ui 16.1.2 → 16.2.1

package/fesm2022/villedemontreal-angular-ui.mjs

@@ -1,10 +1,11 @@
-import * as i0 from '@angular/core';
-import { SecurityContext, Injectable, Inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, NgModule, Directive, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, ViewChild, forwardRef, HostListener, ContentChildren, Optional, SkipSelf, ViewChildren, InjectionToken, Injector, TemplateRef, inject, ContentChild } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { SecurityContext, Injectable, Inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, NgModule, Directive, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, ViewChild, forwardRef, HostListener, ContentChildren, Optional, SkipSelf, ViewChildren, InjectionToken, Injector, TemplateRef, inject, ContentChild } from '@angular/core';
 import * as i1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/cdk/observers';
 import { ObserversModule } from '@angular/cdk/observers';
+import * as i3$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$3 from '@angular/cdk/a11y';
 import * as i1$4 from '@angular/cdk/overlay';
@@ -838,6 +839,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
  * See LICENSE file in the project root for full license information.
  */
 
+/*
+ * 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.
+ */
+class BaoBadgeComponent {
+    constructor() {
+        this.type = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: BaoBadgeComponent, selector: "bao-badge", inputs: { type: "type" }, host: { properties: { "class.positive": "type === \"success\"", "class.negative": "type === \"danger\"", "class.warning": "type === \"warning\"", "class.informative": "type === \"info\"" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block;border:.0625rem solid transparent;color:#fff;padding:0 .4375rem;border-radius:10rem;min-width:1.5rem;font-size:.875rem;font-weight:700;line-height:1.25rem;text-align:center;white-space:nowrap;overflow:hidden;vertical-align:baseline}:host.informative{background-color:#0079c4}:host.positive{background-color:#0da566}:host.warning{background-color:#ffb833;color:#000}:host.negative{background-color:#d3310a}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bao-badge', host: {
+                        class: '',
+                        '[class.positive]': 'type === "success"',
+                        '[class.negative]': 'type === "danger"',
+                        '[class.warning]': 'type === "warning"',
+                        '[class.informative]': 'type === "info"'
+                    }, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block;border:.0625rem solid transparent;color:#fff;padding:0 .4375rem;border-radius:10rem;min-width:1.5rem;font-size:.875rem;font-weight:700;line-height:1.25rem;text-align:center;white-space:nowrap;overflow:hidden;vertical-align:baseline}:host.informative{background-color:#0079c4}:host.positive{background-color:#0da566}:host.warning{background-color:#ffb833;color:#000}:host.negative{background-color:#d3310a}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }] } });
+
+/*
+ * 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.
+ */
+const BADGE_DIRECTIVES = [BaoBadgeComponent];
+class BaoBadgeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: BaoBadgeModule, declarations: [BaoBadgeComponent], imports: [CommonModule], exports: [BaoBadgeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoBadgeModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoBadgeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [BADGE_DIRECTIVES],
+                    exports: [BADGE_DIRECTIVES]
+                }]
+        }] });
+
+/*
+ * 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.
+ */
+
 /*
  * Copyright (c) 2025 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
@@ -3978,6 +4030,237 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                 }]
         }] });
 
+/*
+ * 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.
+ */
+class BaoPaginationComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        /**
+         * The number of items per page as selected.
+         */
+        this.itemsPerPage = 10;
+        /**
+         * The current page number.
+         */
+        this.currentPage = 1;
+        /**
+         * The different page size options.
+         */
+        this.pageSizeOptions = [10, 25, 50, 100];
+        /**
+         * The label for the type of items that are displayed on the page
+         */
+        this.itemLabel = 'items';
+        /**
+         * If selector for number of items per page should be displayed or not
+         */
+        this.showItemsPerPageSelector = true;
+        /**
+         * EventEmitter that triggers when there is a page change and emits page number (index adjusted)
+         */
+        this.pageChanged = new EventEmitter();
+        /**
+         * EventEmitter that triggers when the number of items per page is changed.
+         */
+        this.itemsPerPageChanged = new EventEmitter();
+        /**
+         * Max number of pages to display
+         */
+        this._maxPages = 5;
+        this.displayedPages = [];
+    }
+    get totalPages() {
+        return this._totalPages;
+    }
+    set totalPages(value) {
+        this._totalPages = value;
+    }
+    get startItem() {
+        return this._startItem;
+    }
+    set startItem(value) {
+        this._startItem = value;
+    }
+    get endItem() {
+        return this._endItem;
+    }
+    set endItem(value) {
+        this._endItem = value;
+    }
+    get rangeLabel() {
+        return `${this.startItem} à ${this.endItem} sur ${this.totalItems} ${this.itemLabel}`;
+    }
+    /**
+     * Flag that indicates if a previous page exists for the current list
+     */
+    get hasPrevious() {
+        return this.currentPage !== 1;
+    }
+    /**
+     * Flag that indicates if a next page exists for the current list
+     */
+    get hasNext() {
+        return this.currentPage < this.totalPages;
+    }
+    ngOnInit() {
+        this.startItem = this.updateStartItem();
+        this.endItem = this.updateEndItem();
+        this.totalPages = this.updateTotalPages();
+        this.displayedPages = this.buildPageNumbers();
+        this.cdr.detectChanges();
+    }
+    /**
+     * Update list of displayed pages when current page is changed.
+     */
+    ngOnChanges(changes) {
+        if (changes.hasOwnProperty('currentPage')) {
+            this.displayedPages = this.buildPageNumbers();
+        }
+    }
+    /**
+     * Navigate to specific page
+     */
+    goTo(page) {
+        this.currentPage = page;
+        this.startItem = this.updateStartItem();
+        this.endItem = this.updateEndItem();
+        this.displayedPages = this.buildPageNumbers();
+        this.pageChanged.emit(page - 1);
+    }
+    /**
+     * Navigate to previous page
+     */
+    handlePreviousClick() {
+        if (this.hasPrevious) {
+            this.goTo(this.currentPage - 1);
+        }
+    }
+    /**
+     * Navigate to next page
+     */
+    handleNextClick() {
+        if (this.hasNext) {
+            this.goTo(this.currentPage + 1);
+        }
+    }
+    /**
+     * Update all required variables whenever the number of items displayed per page is changed.
+     * @param value New amount of items per page
+     */
+    handlePageSizeChange(value) {
+        this.currentPage = 1;
+        this.startItem = this.updateStartItem();
+        this.endItem = this.updateEndItem();
+        this.totalPages = this.updateTotalPages();
+        this.displayedPages = this.buildPageNumbers();
+        this.itemsPerPageChanged.emit(value);
+    }
+    updateTotalPages() {
+        return Math.ceil(this.totalItems / this.itemsPerPage);
+    }
+    updateStartItem() {
+        const startItem = Math.min((this.currentPage - 1) * this.itemsPerPage + 1, Math.floor(this.totalItems / 10) * 10);
+        return startItem || 1;
+    }
+    updateEndItem() {
+        return Math.min(this.startItem + Number(this.itemsPerPage) - 1, this.totalItems);
+    }
+    /**
+     * Generate series of page numbers to display. The list always starts with page 1
+     * and ends with last page.
+     * Adds negative numbers for ellipsis.
+     */
+    buildPageNumbers() {
+        const pages = [];
+        // If total pages are 5 or less, include all pages
+        if (this.totalPages <= this._maxPages) {
+            for (let i = 1; i <= this.totalPages; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            pages.push(1);
+            // Determine middle pages
+            let middlePages = [];
+            if (this.currentPage <= 3) {
+                middlePages = [2, 3, 4, -1];
+            }
+            else if (this.currentPage >= this.totalPages - 2) {
+                middlePages = [
+                    -1,
+                    this.totalPages - 3,
+                    this.totalPages - 2,
+                    this.totalPages - 1
+                ];
+            }
+            else {
+                middlePages = [
+                    -1,
+                    this.currentPage - 1,
+                    this.currentPage,
+                    this.currentPage + 1,
+                    -1
+                ];
+            }
+            pages.push(...middlePages);
+            pages.push(this.totalPages);
+        }
+        return pages;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoPaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: BaoPaginationComponent, selector: "bao-pagination", inputs: { totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions", itemLabel: "itemLabel", showItemsPerPageSelector: "showItemsPerPageSelector" }, outputs: { pageChanged: "pageChanged", itemsPerPageChanged: "itemsPerPageChanged" }, host: { classAttribute: "bao-pagination" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"items-diplayed-controls\">\n  <span class=\"range-display\">\n    {{ rangeLabel }}\n  </span>\n  <div *ngIf=\"showItemsPerPageSelector\" class=\"items-per-page\">\n    <label for=\"items-per-page-select\" class=\"select-label\"\n      >Items par page\n    </label>\n    <select\n      [(ngModel)]=\"itemsPerPage\"\n      (ngModelChange)=\"handlePageSizeChange($event)\"\n      name=\"items-per-page\"\n      id=\"items-per-page-select\"\n      class=\"dropdown-select\"\n    >\n      <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">\n        {{ size }}\n      </option>\n    </select>\n  </div>\n</div>\n<nav aria-label=\"Pagination\" class=\"page-controls\">\n  <ul>\n    <li\n      class=\"page-item\"\n      [ngClass]=\"{ disabled: !hasPrevious }\"\n      [attr.aria-disabled]=\"!hasPrevious ? 'true' : null\"\n    >\n      <a\n        class=\"page-link\"\n        (click)=\"$event.preventDefault(); handlePreviousClick()\"\n        (keydown.enter)=\"$event.preventDefault(); handlePreviousClick()\"\n        (keydown.space)=\"$event.preventDefault(); handlePreviousClick()\"\n        tabindex=\"0\"\n      >\n        <bao-icon title=\"Page pr\u00E9c\u00E9dente\" svgIcon=\"icon-chevron-left\"></bao-icon\n      ></a>\n    </li>\n    <li\n      class=\"page-item\"\n      *ngFor=\"let page of displayedPages\"\n      [ngClass]=\"{ active: page === currentPage }\"\n      [attr.aria-current]=\"page === currentPage ? 'page' : null\"\n    >\n      <ng-container *ngIf=\"page > 0; else ellipsis\">\n        <span class=\"sr-only\">{{ page }}</span>\n        <a\n          class=\"page-link\"\n          (click)=\"$event.preventDefault(); goTo(page)\"\n          (keydown.enter)=\"$event.preventDefault(); goTo(page)\"\n          (keydown.space)=\"$event.preventDefault(); goTo(page)\"\n          tabindex=\"0\"\n          >{{ page }}</a\n        >\n      </ng-container>\n      <ng-template #ellipsis>\n        <span class=\"page-link ellipsis\" aria-hidden=\"true\">...</span>\n      </ng-template>\n    </li>\n\n    <li\n      class=\"page-item\"\n      [ngClass]=\"{ disabled: !hasNext }\"\n      [attr.aria-disabled]=\"!hasNext ? 'true' : null\"\n    >\n      <a\n        class=\"page-link\"\n        (click)=\"$event.preventDefault(); handleNextClick()\"\n        (keydown.enter)=\"$event.preventDefault(); handleNextClick()\"\n        (keydown.space)=\"$event.preventDefault(); handleNextClick()\"\n        tabindex=\"0\"\n      >\n        <bao-icon title=\"Page suivante\" svgIcon=\"icon-chevron-right\"></bao-icon\n      ></a>\n    </li>\n  </ul>\n</nav>\n", styles: [".bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.bao-pagination{display:flex;flex-direction:column;justify-content:center}@media (min-width: 768px){.bao-pagination{justify-content:flex-start}}.bao-pagination>.items-diplayed-controls{display:flex;flex-direction:column;justify-content:center;align-self:center}@media (min-width: 768px){.bao-pagination>.items-diplayed-controls{flex-direction:row;justify-content:space-between;align-self:auto;margin-bottom:1rem}}.bao-pagination>.items-diplayed-controls .range-display{font-weight:700;font-size:.875rem;line-height:1.25rem;margin-bottom:1rem}@media (min-width: 768px){.bao-pagination>.items-diplayed-controls .range-display{margin-bottom:0rem}}.bao-pagination>.items-diplayed-controls>.items-per-page{display:flex;align-items:baseline;margin-bottom:2rem}@media (min-width: 768px){.bao-pagination>.items-diplayed-controls>.items-per-page{margin-bottom:0rem}}.bao-pagination>.items-diplayed-controls>.items-per-page>.select-label{font-weight:700;font-size:.875rem;line-height:1.25rem;color:#637381;margin-right:1rem}.bao-pagination>.items-diplayed-controls>.items-per-page>.dropdown-select{background-color:#fff;border-radius:.25rem;border-color:#ced4da;border-style:solid;border-width:thin;padding:.4375rem 2.4375rem .4375rem .4375rem;font-weight:400;font-size:1rem;line-height:1.5rem;color:#212529;-webkit-appearance:none;appearance:none;background:#ffffff 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 .4375rem center/24px 24px no-repeat}.bao-pagination .page-controls{align-self:center}.bao-pagination .page-controls>ul{display:flex;padding-left:0;margin-bottom:0}.bao-pagination .page-controls>ul>.page-item.disabled>.page-link>.bao-icon{color:#adb2bd}.bao-pagination .page-controls>ul>.page-item>.page-link{border-style:none}.bao-pagination .page-controls>ul>.page-item.active>.page-link{background-color:#eefaf8;border:1px solid #097d6c;border-radius:.25rem}.bao-pagination .page-controls>ul>.page-item>.page-link{font-size:.875rem}.bao-pagination .page-controls>ul>.page-item>.page-link:focus{box-shadow:inset 0 0 0 2px #0079c4}.bao-pagination .page-controls>ul>.page-item>.ellipsis{font-weight:700}.bao-pagination .page-controls>ul>.page-item>.ellipsis:hover{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BaoIconComponent, selector: "bao-icon", inputs: ["color", "size", "svgIcon", "title"], exportAs: ["baoIcon"] }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bao-pagination', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'bao-pagination'
+                    }, template: "<div class=\"items-diplayed-controls\">\n  <span class=\"range-display\">\n    {{ rangeLabel }}\n  </span>\n  <div *ngIf=\"showItemsPerPageSelector\" class=\"items-per-page\">\n    <label for=\"items-per-page-select\" class=\"select-label\"\n      >Items par page\n    </label>\n    <select\n      [(ngModel)]=\"itemsPerPage\"\n      (ngModelChange)=\"handlePageSizeChange($event)\"\n      name=\"items-per-page\"\n      id=\"items-per-page-select\"\n      class=\"dropdown-select\"\n    >\n      <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">\n        {{ size }}\n      </option>\n    </select>\n  </div>\n</div>\n<nav aria-label=\"Pagination\" class=\"page-controls\">\n  <ul>\n    <li\n      class=\"page-item\"\n      [ngClass]=\"{ disabled: !hasPrevious }\"\n      [attr.aria-disabled]=\"!hasPrevious ? 'true' : null\"\n    >\n      <a\n        class=\"page-link\"\n        (click)=\"$event.preventDefault(); handlePreviousClick()\"\n        (keydown.enter)=\"$event.preventDefault(); handlePreviousClick()\"\n        (keydown.space)=\"$event.preventDefault(); handlePreviousClick()\"\n        tabindex=\"0\"\n      >\n        <bao-icon title=\"Page pr\u00E9c\u00E9dente\" svgIcon=\"icon-chevron-left\"></bao-icon\n      ></a>\n    </li>\n    <li\n      class=\"page-item\"\n      *ngFor=\"let page of displayedPages\"\n      [ngClass]=\"{ active: page === currentPage }\"\n      [attr.aria-current]=\"page === currentPage ? 'page' : null\"\n    >\n      <ng-container *ngIf=\"page > 0; else ellipsis\">\n        <span class=\"sr-only\">{{ page }}</span>\n        <a\n          class=\"page-link\"\n          (click)=\"$event.preventDefault(); goTo(page)\"\n          (keydown.enter)=\"$event.preventDefault(); goTo(page)\"\n          (keydown.space)=\"$event.preventDefault(); goTo(page)\"\n          tabindex=\"0\"\n          >{{ page }}</a\n        >\n      </ng-container>\n      <ng-template #ellipsis>\n        <span class=\"page-link ellipsis\" aria-hidden=\"true\">...</span>\n      </ng-template>\n    </li>\n\n    <li\n      class=\"page-item\"\n      [ngClass]=\"{ disabled: !hasNext }\"\n      [attr.aria-disabled]=\"!hasNext ? 'true' : null\"\n    >\n      <a\n        class=\"page-link\"\n        (click)=\"$event.preventDefault(); handleNextClick()\"\n        (keydown.enter)=\"$event.preventDefault(); handleNextClick()\"\n        (keydown.space)=\"$event.preventDefault(); handleNextClick()\"\n        tabindex=\"0\"\n      >\n        <bao-icon title=\"Page suivante\" svgIcon=\"icon-chevron-right\"></bao-icon\n      ></a>\n    </li>\n  </ul>\n</nav>\n", styles: [".bao-container{padding-right:16px;padding-left:16px;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 576px){.bao-container{max-width:576px}}@media (min-width: 768px){.bao-container{max-width:768px}}@media (min-width: 992px){.bao-container{max-width:992px}}@media (min-width: 1200px){.bao-container{max-width:1200px}}.bao-row{display:flex;flex-wrap:wrap;margin-right:-16px;margin-left:-16px}.bao-col-12,.bao-col-lg-7{position:relative;width:100%;padding-right:1rem;padding-left:1rem}@media (min-width: 992px){.bao-col-lg-7{flex:0 0 58.33333%;max-width:58.33333%}}.bao-pagination{display:flex;flex-direction:column;justify-content:center}@media (min-width: 768px){.bao-pagination{justify-content:flex-start}}.bao-pagination>.items-diplayed-controls{display:flex;flex-direction:column;justify-content:center;align-self:center}@media (min-width: 768px){.bao-pagination>.items-diplayed-controls{flex-direction:row;justify-content:space-between;align-self:auto;margin-bottom:1rem}}.bao-pagination>.items-diplayed-controls .range-display{font-weight:700;font-size:.875rem;line-height:1.25rem;margin-bottom:1rem}@media (min-width: 768px){.bao-pagination>.items-diplayed-controls .range-display{margin-bottom:0rem}}.bao-pagination>.items-diplayed-controls>.items-per-page{display:flex;align-items:baseline;margin-bottom:2rem}@media (min-width: 768px){.bao-pagination>.items-diplayed-controls>.items-per-page{margin-bottom:0rem}}.bao-pagination>.items-diplayed-controls>.items-per-page>.select-label{font-weight:700;font-size:.875rem;line-height:1.25rem;color:#637381;margin-right:1rem}.bao-pagination>.items-diplayed-controls>.items-per-page>.dropdown-select{background-color:#fff;border-radius:.25rem;border-color:#ced4da;border-style:solid;border-width:thin;padding:.4375rem 2.4375rem .4375rem .4375rem;font-weight:400;font-size:1rem;line-height:1.5rem;color:#212529;-webkit-appearance:none;appearance:none;background:#ffffff 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 .4375rem center/24px 24px no-repeat}.bao-pagination .page-controls{align-self:center}.bao-pagination .page-controls>ul{display:flex;padding-left:0;margin-bottom:0}.bao-pagination .page-controls>ul>.page-item.disabled>.page-link>.bao-icon{color:#adb2bd}.bao-pagination .page-controls>ul>.page-item>.page-link{border-style:none}.bao-pagination .page-controls>ul>.page-item.active>.page-link{background-color:#eefaf8;border:1px solid #097d6c;border-radius:.25rem}.bao-pagination .page-controls>ul>.page-item>.page-link{font-size:.875rem}.bao-pagination .page-controls>ul>.page-item>.page-link:focus{box-shadow:inset 0 0 0 2px #0079c4}.bao-pagination .page-controls>ul>.page-item>.ellipsis{font-weight:700}.bao-pagination .page-controls>ul>.page-item>.ellipsis:hover{background-color:#fff}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { totalItems: [{
+                type: Input
+            }], itemsPerPage: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], itemLabel: [{
+                type: Input
+            }], showItemsPerPageSelector: [{
+                type: Input
+            }], pageChanged: [{
+                type: Output
+            }], itemsPerPageChanged: [{
+                type: Output
+            }] } });
+
+/*
+ * 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.
+ */
+class BaoPaginationModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: BaoPaginationModule, declarations: [BaoPaginationComponent], imports: [CommonModule, BaoIconModule, FormsModule], exports: [BaoPaginationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoPaginationModule, imports: [CommonModule, BaoIconModule, FormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoPaginationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, BaoIconModule, FormsModule],
+                    declarations: [BaoPaginationComponent],
+                    exports: [BaoPaginationComponent]
+                }]
+        }] });
+
+/*
+ * 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.
+ */
+
 /*
  * Copyright (c) 2025 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
@@ -6118,9 +6401,8 @@ class BaoModule {
             BaoFileModule,
             BaoSnackBarModule,
             BaoSystemHeaderModule,
-            BaoMessageBarModule
-            // TODO: reactivate once component does not depend on global css BaoBadgeModule,
-        ] }); }
+            BaoMessageBarModule,
+            BaoPaginationModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoModule, imports: [BaoIconModule,
             BaoButtonModule,
             BaoAlertModule,
@@ -6146,9 +6428,8 @@ class BaoModule {
             BaoFileModule,
             BaoSnackBarModule,
             BaoSystemHeaderModule,
-            BaoMessageBarModule
-            // TODO: reactivate once component does not depend on global css BaoBadgeModule,
-        ] }); }
+            BaoMessageBarModule,
+            BaoPaginationModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoModule, decorators: [{
             type: NgModule,
@@ -6182,63 +6463,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                         BaoFileModule,
                         BaoSnackBarModule,
                         BaoSystemHeaderModule,
-                        BaoMessageBarModule
-                        // TODO: reactivate once component does not depend on global css BaoBadgeModule,
+                        BaoMessageBarModule,
+                        BaoPaginationModule
                     ]
                 }]
         }] });
 
-/*
- * 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.
- */
-class BaoBadgeComponent {
-    constructor() {
-        this.type = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: BaoBadgeComponent, selector: "bao-badge", inputs: { type: "type" }, host: { properties: { "class.positive": "type === \"success\"", "class.negative": "type === \"danger\"", "class.warning": "type === \"warning\"", "class.informative": "type === \"info\"" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block;border:.0625rem solid transparent;color:#fff;padding:0 .4375rem;border-radius:10rem;min-width:1.5rem;font-size:.875rem;font-weight:700;line-height:1.25rem;text-align:center;white-space:nowrap;overflow:hidden;vertical-align:baseline}:host.informative{background-color:#0079c4}:host.positive{background-color:#0da566}:host.warning{background-color:#ffb833;color:#000}:host.negative{background-color:#d3310a}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoBadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bao-badge', host: {
-                        class: '',
-                        '[class.positive]': 'type === "success"',
-                        '[class.negative]': 'type === "danger"',
-                        '[class.warning]': 'type === "warning"',
-                        '[class.informative]': 'type === "info"'
-                    }, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block;border:.0625rem solid transparent;color:#fff;padding:0 .4375rem;border-radius:10rem;min-width:1.5rem;font-size:.875rem;font-weight:700;line-height:1.25rem;text-align:center;white-space:nowrap;overflow:hidden;vertical-align:baseline}:host.informative{background-color:#0079c4}:host.positive{background-color:#0da566}:host.warning{background-color:#ffb833;color:#000}:host.negative{background-color:#d3310a}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }] } });
-
-/*
- * 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.
- */
-const BADGE_DIRECTIVES = [BaoBadgeComponent];
-class BaoBadgeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: BaoBadgeModule, declarations: [BaoBadgeComponent], imports: [CommonModule], exports: [BaoBadgeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoBadgeModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoBadgeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [BADGE_DIRECTIVES],
-                    exports: [BADGE_DIRECTIVES]
-                }]
-        }] });
-
-/*
- * 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.
- */
-
 /*
  * Copyright (c) 2025 Ville de Montreal. All rights reserved.
  * Licensed under the MIT license.
@@ -6273,5 +6503,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BAO_FILE_INTL_PROVIDER, BAO_FILE_INTL_PROVIDER_FACTORY, BAO_MODAL_DATA, BAO_RADIO_GROUP, BAO_SNACK_BAR_DATA, BAO_SNACK_BAR_DEFAULT_OPTIONS, BaoAlertActions, BaoAlertComponent, BaoAlertContent, BaoAlertLink, BaoAlertModule, BaoAlertTitle, BaoAvatarComponent, BaoAvatarContent, BaoAvatarModule, BaoBackNavigationComponent, BaoBackNavigationInsert, BaoBadgeComponent, BaoBadgeModule, BaoBreadcrumbComponent, BaoBreadcrumbModule, BaoButtonComponent, BaoButtonModule, BaoCardComponent, BaoCardContent, BaoCardHeader, BaoCardModule, BaoCardTextInterface, BaoCardTitle, BaoCheckBoxDescription, BaoCheckboxComponent, BaoCheckboxGroupComponent, BaoCheckboxModule, BaoCommonComponentsModule, BaoDropdownMenuComponent, BaoDropdownMenuDivider, BaoDropdownMenuItem, BaoDropdownMenuItemDescription, BaoDropdownMenuItemLabel, BaoDropdownMenuModule, BaoDropdownMenuSection, BaoDropdownMenuTrigger, BaoErrorTextComponent, BaoFileDropDirective, BaoFileDropzoneIntructions, BaoFileInputComponent, BaoFileIntl, BaoFileIntlEnglish, BaoFileModule, BaoFilePreviewComponent, BaoGuidingTextComponent, BaoHeaderInfoComponent, BaoHeaderInfoContent, BaoHeaderInfoModule, BaoHeaderInfoSubtitle, BaoHeaderInfoSurtitle, BaoHeaderInfoTitle, BaoHeaderInfoTitleGroupComponent, BaoHyperlinkComponent, BaoHyperlinkModule, BaoIconComponent, BaoIconModule, BaoLabelTextComponent, BaoList, BaoListItem, BaoListItemDescription, BaoListItemTitle, BaoListModule, BaoListSummary, BaoListSummaryItem, BaoMessageBarComponent, BaoMessageBarContent, BaoMessageBarModule, BaoModal, BaoModalBase, BaoModalClose, BaoModalContainer, BaoModalInitialConfig, BaoModalModule, BaoModalRef, BaoModule, BaoNavList, BaoRadioButtonComponent, BaoRadioButtonGroupComponent, BaoRadioDescription, BaoRadioModule, BaoSimpleSnackBarComponent, BaoSnackBarConfig, BaoSnackBarContainerComponent, BaoSnackBarModule, BaoSnackBarRef, BaoSnackBarService, BaoSummaryComponent, BaoSummaryDescription, BaoSummaryModule, BaoSystemHeaderComponent, BaoSystemHeaderModule, BaoTabHeader, BaoTabPanel, BaoTablistComponent, BaoTabsContainer, BaoTabsModule, BaoTagComponent, BaoTagModule, BaoTitleTextComponent, _BaoModalContainerBase, _closeModalVia, baoFactory, eModalDesktopWidthSize, eModalMobileWidthSize, throwBaoModalContentAlreadyAttachedError };
+export { BAO_FILE_INTL_PROVIDER, BAO_FILE_INTL_PROVIDER_FACTORY, BAO_MODAL_DATA, BAO_RADIO_GROUP, BAO_SNACK_BAR_DATA, BAO_SNACK_BAR_DEFAULT_OPTIONS, BaoAlertActions, BaoAlertComponent, BaoAlertContent, BaoAlertLink, BaoAlertModule, BaoAlertTitle, BaoAvatarComponent, BaoAvatarContent, BaoAvatarModule, BaoBackNavigationComponent, BaoBackNavigationInsert, BaoBadgeComponent, BaoBadgeModule, BaoBreadcrumbComponent, BaoBreadcrumbModule, BaoButtonComponent, BaoButtonModule, BaoCardComponent, BaoCardContent, BaoCardHeader, BaoCardModule, BaoCardTextInterface, BaoCardTitle, BaoCheckBoxDescription, BaoCheckboxComponent, BaoCheckboxGroupComponent, BaoCheckboxModule, BaoCommonComponentsModule, BaoDropdownMenuComponent, BaoDropdownMenuDivider, BaoDropdownMenuItem, BaoDropdownMenuItemDescription, BaoDropdownMenuItemLabel, BaoDropdownMenuModule, BaoDropdownMenuSection, BaoDropdownMenuTrigger, BaoErrorTextComponent, BaoFileDropDirective, BaoFileDropzoneIntructions, BaoFileInputComponent, BaoFileIntl, BaoFileIntlEnglish, BaoFileModule, BaoFilePreviewComponent, BaoGuidingTextComponent, BaoHeaderInfoComponent, BaoHeaderInfoContent, BaoHeaderInfoModule, BaoHeaderInfoSubtitle, BaoHeaderInfoSurtitle, BaoHeaderInfoTitle, BaoHeaderInfoTitleGroupComponent, BaoHyperlinkComponent, BaoHyperlinkModule, BaoIconComponent, BaoIconModule, BaoLabelTextComponent, BaoList, BaoListItem, BaoListItemDescription, BaoListItemTitle, BaoListModule, BaoListSummary, BaoListSummaryItem, BaoMessageBarComponent, BaoMessageBarContent, BaoMessageBarModule, BaoModal, BaoModalBase, BaoModalClose, BaoModalContainer, BaoModalInitialConfig, BaoModalModule, BaoModalRef, BaoModule, BaoNavList, BaoPaginationComponent, BaoPaginationModule, BaoRadioButtonComponent, BaoRadioButtonGroupComponent, BaoRadioDescription, BaoRadioModule, BaoSimpleSnackBarComponent, BaoSnackBarConfig, BaoSnackBarContainerComponent, BaoSnackBarModule, BaoSnackBarRef, BaoSnackBarService, BaoSummaryComponent, BaoSummaryDescription, BaoSummaryModule, BaoSystemHeaderComponent, BaoSystemHeaderModule, BaoTabHeader, BaoTabPanel, BaoTablistComponent, BaoTabsContainer, BaoTabsModule, BaoTagComponent, BaoTagModule, BaoTitleTextComponent, _BaoModalContainerBase, _closeModalVia, baoFactory, eModalDesktopWidthSize, eModalMobileWidthSize, throwBaoModalContentAlreadyAttachedError };
 //# sourceMappingURL=villedemontreal-angular-ui.mjs.map