@fluid-topics/ft-pager 1.3.22 → 1.3.24

package/build/ft-pager.d.ts

@@ -1,16 +1,21 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtPagerProperties } from "./ft-pager.properties";
-export declare class FtPager extends FtLitElement implements FtPagerProperties {
+declare const FtPager_base: typeof FtLitElement & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtPager extends FtPager_base implements FtPagerProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     currentPage: number;
     maxPage?: number;
     itemsPerPage?: number;
     totalItemsCount?: number;
-    nextLabel: string;
-    previousLabel: string;
+    nextLabel?: string;
+    previousLabel?: string;
+    private announcement;
+    constructor();
     get resolvedMaxPage(): number;
     protected render(): import("lit-html").TemplateResult<1>;
     private onChange;
     private setPage;
+    private resolveAnnouncement;
 }
+export {};

package/build/ft-pager.js

@@ -5,22 +5,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html } from "lit";
-import { property } from "lit/decorators.js";
-import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { property, state } from "lit/decorators.js";
+import { FtLitElement, screenReaderStyles } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-pager.styles";
 import { FtButton } from "@fluid-topics/ft-button";
 import { FtIcons } from "@fluid-topics/ft-icon";
 import { FtNumberField } from "@fluid-topics/ft-number-field";
 import { FtTypography } from "@fluid-topics/ft-typography";
-class FtPager extends FtLitElement {
+import { defaultMessages, pager } from "./ft-pager.messages";
+import { withI18n } from "@fluid-topics/ft-i18n";
+class FtPager extends withI18n(FtLitElement) {
     constructor() {
-        super(...arguments);
+        super();
         this.currentPage = 1;
-        this.nextLabel = "Next";
-        this.previousLabel = "Previous";
+        this.announcement = "";
+        this.addI18nContext(pager, defaultMessages);
     }
     get resolvedMaxPage() {
-        if (!!this.maxPage) {
+        if (this.maxPage) {
             return Math.max(1, this.maxPage);
         }
         if (!!this.totalItemsCount && !!this.itemsPerPage) {
@@ -29,7 +31,8 @@ class FtPager extends FtLitElement {
         return 1;
     }
     render() {
-        let maxPage = this.resolvedMaxPage;
+        var _a, _b;
+        const maxPage = this.resolvedMaxPage;
         return html `
             <style>
                 ft-number-field::part(input) {
@@ -37,27 +40,31 @@ class FtPager extends FtLitElement {
                 }
 
             </style>
-            <div part="container">
-                <ft-button icon=${FtIcons.THIN_ARROW_LEFT}
-                           ?disabled="${this.currentPage == 1}"
-                           @click="${() => this.setPage(this.currentPage - 1)}"
-                           label="${this.previousLabel}"
+            <nav part="container" aria-label="pagination">
+                <ft-button icon="${FtIcons.THIN_ARROW_LEFT}"
+                           ?disabled=${this.currentPage === 1}
+                           @click=${() => this.setPage(this.currentPage - 1)}
+                           label="${(_a = this.previousLabel) !== null && _a !== void 0 ? _a : pager.messages.previousLabel()}"
                            tooltipPosition="top">
                 </ft-button>
                 <ft-number-field outlined
                                  value="${this.currentPage}"
                                  min="1"
                                  max="${maxPage}"
-                                 @change="${this.onChange}">
+                                 aria-label="${pager.messages.currentPageNumberLabel()}"
+                                 @change=${this.onChange}>
                 </ft-number-field>
                 <ft-typography variant="body1"> / ${maxPage}</ft-typography>
-                <ft-button icon=${FtIcons.THIN_ARROW_RIGHT}
-                           ?disabled="${this.currentPage == maxPage}"
-                           @click="${() => this.setPage(this.currentPage + 1)}"
-                           label="${this.nextLabel}"
+                <ft-button icon="${FtIcons.THIN_ARROW_RIGHT}"
+                           ?disabled=${this.currentPage === maxPage}
+                           @click=${() => this.setPage(this.currentPage + 1)}
+                           label="${(_b = this.nextLabel) !== null && _b !== void 0 ? _b : pager.messages.nextLabel()}"
                            tooltipPosition="top">
                 </ft-button>
-            </div>
+                <div aria-live="polite" aria-atomic="true" class="sr-only">
+                    ${this.announcement}
+                </div>
+            </nav>
         `;
     }
     onChange(event) {
@@ -66,15 +73,24 @@ class FtPager extends FtLitElement {
     }
     setPage(page) {
         this.currentPage = page;
+        this.announcement = this.resolveAnnouncement();
         this.dispatchEvent(new CustomEvent("change", { detail: page }));
     }
+    resolveAnnouncement() {
+        const announcement = pager.messages.openingPageAnnouncement(this.currentPage);
+        const isLastPage = this.currentPage === this.maxPage;
+        if (isLastPage) {
+            return announcement + pager.messages.lastPageSuffix();
+        }
+        return announcement;
+    }
 }
 FtPager.elementDefinitions = {
     "ft-button": FtButton,
     "ft-number-field": FtNumberField,
-    "ft-typography": FtTypography
+    "ft-typography": FtTypography,
 };
-FtPager.styles = styles;
+FtPager.styles = [styles, screenReaderStyles];
 __decorate([
     property({ type: Number, reflect: true })
 ], FtPager.prototype, "currentPage", void 0);
@@ -93,4 +109,7 @@ __decorate([
 __decorate([
     property()
 ], FtPager.prototype, "previousLabel", void 0);
+__decorate([
+    state()
+], FtPager.prototype, "announcement", void 0);
 export { FtPager };