@fluid-topics/ft-pager 1.1.15

package/README.md

@@ -0,0 +1,19 @@
+A pagination component
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-pager
+yarn add @fluid-topics/ft-pager
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-pager"
+
+function render() {
+    return html` <ft-pager foo="bar"></ft-pager> `
+}
+```

package/build/ft-pager.css.d.ts

@@ -0,0 +1,2 @@
+export declare const FtPagerCssVariables: {};
+export declare const styles: import("lit").CSSResult;

package/build/ft-pager.css.js

@@ -0,0 +1,13 @@
+import { css } from "lit";
+export const FtPagerCssVariables = {};
+// language=CSS
+export const styles = css `
+
+    [part="container"] {
+        display: flex;
+        gap: 4px;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: center;
+    }
+`;

package/build/ft-pager.d.ts

@@ -0,0 +1,16 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtPagerProperties } from "./ft-pager.properties";
+export declare class FtPager extends FtLitElement implements FtPagerProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    currentPage: number;
+    maxPage?: number;
+    itemsPerPage?: number;
+    totalItemsCount?: number;
+    nextLabel: string;
+    previousLabel: string;
+    get resolvedMaxPage(): number;
+    get resolvedCurrentPage(): number;
+    protected render(): import("lit").TemplateResult<1>;
+    private setPage;
+}

package/build/ft-pager.js

@@ -0,0 +1,84 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { FtLitElement, minmax } 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 { FtTypography } from "@fluid-topics/ft-typography";
+class FtPager extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.currentPage = 1;
+        this.nextLabel = "Next";
+        this.previousLabel = "Previous";
+    }
+    get resolvedMaxPage() {
+        if (!!this.maxPage) {
+            return Math.max(1, this.maxPage);
+        }
+        if (!!this.totalItemsCount && !!this.itemsPerPage) {
+            return Math.ceil(Math.max(1, this.totalItemsCount) / Math.max(1, this.itemsPerPage));
+        }
+        return 1;
+    }
+    get resolvedCurrentPage() {
+        return minmax(1, this.currentPage, this.resolvedMaxPage);
+    }
+    render() {
+        return html `
+            <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">
+                </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-button icon=${FtIcons.THIN_ARROW_RIGHT}
+                           ?disabled="${this.resolvedCurrentPage == this.resolvedMaxPage}"
+                           @click="${() => this.setPage(this.resolvedCurrentPage + 1)}"
+                           label="${this.nextLabel}" tooltipPosition="top">
+                </ft-button>
+            </div>
+        `;
+    }
+    setPage(page) {
+        this.currentPage = page;
+        this.dispatchEvent(new CustomEvent("change", { detail: page }));
+    }
+}
+FtPager.elementDefinitions = {
+    "ft-button": FtButton,
+    "ft-text-field": FtTextField,
+    "ft-typography": FtTypography
+};
+FtPager.styles = styles;
+__decorate([
+    property({ type: Number, reflect: true })
+], FtPager.prototype, "currentPage", void 0);
+__decorate([
+    property({ type: Number })
+], FtPager.prototype, "maxPage", void 0);
+__decorate([
+    property({ type: Number })
+], FtPager.prototype, "itemsPerPage", void 0);
+__decorate([
+    property({ type: Number })
+], FtPager.prototype, "totalItemsCount", void 0);
+__decorate([
+    property()
+], FtPager.prototype, "nextLabel", void 0);
+__decorate([
+    property()
+], FtPager.prototype, "previousLabel", void 0);
+export { FtPager };