@fluid-topics/ft-pager 1.1.18 → 1.1.19

package/build/ft-pager.d.ts

@@ -10,7 +10,7 @@ export declare class FtPager extends FtLitElement implements FtPagerProperties {
     nextLabel: string;
     previousLabel: string;
     get resolvedMaxPage(): number;
-    get resolvedCurrentPage(): number;
     protected render(): import("lit").TemplateResult<1>;
+    private onChange;
     private setPage;
 }

package/build/ft-pager.js

@@ -6,11 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html } from "lit";
 import { property } from "lit/decorators.js";
-import { FtLitElement, minmax } from "@fluid-topics/ft-wc-utils";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-pager.css";
 import { FtButton } from "@fluid-topics/ft-button";
 import { FtIcons } from "@fluid-topics/ft-icon";
-import { FtTextField } from "@fluid-topics/ft-text-field";
+import { FtNumberField } from "@fluid-topics/ft-number-field";
 import { FtTypography } from "@fluid-topics/ft-typography";
 class FtPager extends FtLitElement {
     constructor() {
@@ -28,30 +28,42 @@ class FtPager extends FtLitElement {
         }
         return 1;
     }
-    get resolvedCurrentPage() {
-        return minmax(1, this.currentPage, this.resolvedMaxPage);
-    }
     render() {
+        let maxPage = this.resolvedMaxPage;
         return html `
+            <style>
+                ft-number-field::part(input) {
+                    width: ${Math.max(2, ("" + maxPage).length)}ch;
+                }
+
+            </style>
             <div part="container">
                 <ft-button icon=${FtIcons.THIN_ARROW_LEFT}
-                           ?disabled="${this.resolvedCurrentPage == 1}"
-                           @click="${() => this.setPage(this.resolvedCurrentPage - 1)}"
-                           label="${this.previousLabel}" tooltipPosition="top">
+                           ?disabled="${this.currentPage == 1}"
+                           @click="${() => this.setPage(this.currentPage - 1)}"
+                           label="${this.previousLabel}"
+                           tooltipPosition="top">
                 </ft-button>
-                <ft-text-field outlined value="${this.resolvedCurrentPage}"
-                               type="number" min="1" max="${this.resolvedMaxPage}"
-                               @change="${(e) => this.setPage(+e.detail)}">
-                </ft-text-field>
-                <ft-typography variant="body1"> / ${this.resolvedMaxPage}</ft-typography>
+                <ft-number-field outlined
+                                 value="${this.currentPage}"
+                                 min="1"
+                                 max="${maxPage}"
+                                 @change="${this.onChange}">
+                </ft-number-field>
+                <ft-typography variant="body1"> / ${maxPage}</ft-typography>
                 <ft-button icon=${FtIcons.THIN_ARROW_RIGHT}
-                           ?disabled="${this.resolvedCurrentPage == this.resolvedMaxPage}"
-                           @click="${() => this.setPage(this.resolvedCurrentPage + 1)}"
-                           label="${this.nextLabel}" tooltipPosition="top">
+                           ?disabled="${this.currentPage == maxPage}"
+                           @click="${() => this.setPage(this.currentPage + 1)}"
+                           label="${this.nextLabel}"
+                           tooltipPosition="top">
                 </ft-button>
             </div>
         `;
     }
+    onChange(event) {
+        event.stopPropagation();
+        this.setPage(event.detail);
+    }
     setPage(page) {
         this.currentPage = page;
         this.dispatchEvent(new CustomEvent("change", { detail: page }));
@@ -59,7 +71,7 @@ class FtPager extends FtLitElement {
 }
 FtPager.elementDefinitions = {
     "ft-button": FtButton,
-    "ft-text-field": FtTextField,
+    "ft-number-field": FtNumberField,
     "ft-typography": FtTypography
 };
 FtPager.styles = styles;