@aquera/nile-elements 0.1.39 → 0.1.40-beta-1.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.39",
+  "version": "0.1.40-beta-1.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -85,7 +85,8 @@
     "./nile-toolbar": "./dist/src/nile-toolbar/index.js",
     "./nile-inline-edit": "./dist/src/nile-inline-edit/index.js",
     "./nile-tour": "./dist/src/nile-tour/index.js",
-    "./nile-table": "./dist/src/nile-table/index.js"
+    "./nile-table": "./dist/src/nile-table/index.js",
+    "./nile-pagination": "./dist/src/nile-pagination/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -189,4 +190,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -76,4 +76,5 @@ export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
 export { NileTable } from './nile-table';
-export { NileFilterChip } from './nile-filter-chip'
+export { NileFilterChip } from './nile-filter-chip'
+export { NilePagination } from './nile-pagination';

package/src/nile-pagination/index.ts

@@ -0,0 +1 @@
+export { NilePagination } from './nile-pagination';

package/src/nile-pagination/nile-pagination-utils.ts

@@ -0,0 +1,63 @@
+export function calculateTotalPages(
+  totalItems: number,
+  pageSize: number
+): number {
+  return Math.ceil(totalItems / pageSize);
+}
+
+export function getPaginationItems(
+  totalPages: number,
+  currentPage: number
+): (number | string)[] {
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  const pages: (number | string)[] = [1];
+  if (currentPage <= 4) {
+    pages.push(2, 3, 4, 5, '…');
+  } else if (currentPage >= totalPages - 3) {
+    pages.push(
+      '…',
+      totalPages - 4,
+      totalPages - 3,
+      totalPages - 2,
+      totalPages - 1
+    );
+  } else {
+    pages.push('…', currentPage - 1, currentPage, currentPage + 1, '…');
+  }
+  pages.push(totalPages);
+  return pages;
+}
+
+export function getHiddenPages(
+  totalPages: number,
+  items: (number | string)[],
+  currentPage: number,
+  position: 'left' | 'right'
+): number[] {
+  if (totalPages <= 7) return [];
+
+  const all = Array.from({ length: totalPages }, (_, i) => i + 1);
+  const visible = items.filter(x => typeof x === 'number') as number[];
+  const hidden = all.filter(p => !visible.includes(p));
+
+  if (position === 'left') {
+    const firstAfterEllipsis = visible[1] as number;
+    return hidden.filter(p => p < firstAfterEllipsis);
+  } else {
+    const lastBeforeEllipsis = visible[visible.length - 2] as number;
+    return hidden.filter(p => p > lastBeforeEllipsis);
+  }
+}
+
+export function getRangeText(
+  totalItems: number,
+  pageSize: number,
+  currentPage: number
+): string {
+  const start = (currentPage - 1) * pageSize + 1;
+  const end = Math.min(currentPage * pageSize, totalItems);
+  return `Showing ${start}–${end} of ${totalItems}`;
+}

package/src/nile-pagination/nile-pagination.css.ts

@@ -0,0 +1,115 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+/**
+ * Pagination CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .pagination-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg);
+  }
+
+  .pagination-wrapper.v2 {
+    justify-content: flex-start;
+    gap: var(--nile-spacing-spacing-lg);
+  }
+
+  .pagination-wrapper.v2 .pager-container {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--nile-spacing-spacing-md);
+    margin-right: var(--nile-spacing-spacing-xl);
+  }
+
+  .pagination-wrapper.v2 .range-text {
+    margin-right: var(--nile-spacing-spacing-md);
+    font-size: var(--nile-font-size-small);
+    color: var(--nile-colors-dark-900);
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .pager-container {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-spacing-3xl);
+  }
+
+  .range-text {
+    font-size: var(--nile-font-size-small);
+    color: var(--nile-colors-dark-900);
+    white-space: nowrap;
+  }
+
+  .page-size-select {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  ul.pagination {
+    display: flex;
+    list-style: none;
+    padding: var(--nile-spacing-spacing-none);
+    margin: var(--nile-spacing-spacing-none);
+    gap: var(--nile-radius-radius-xxs);
+  }
+
+  ul.pagination li {
+    margin: var(--nile-spacing-spacing-none);
+  }
+
+  .ellipsis-scroll-wrapper {
+    max-height: 194px;
+    overflow-y: auto;
+    width: 66px;
+  }
+
+  .ellipsis-dropdown nile-menu {
+    overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+  }
+
+  .ellipsis-dropdown nile-menu-item {
+    padding: var(--nile-spacing-spacing-sm) var(--nile-spacing-spacing-lg);
+    text-align: center;
+  }
+
+  .page-size-menu {
+    max-height: 144px;
+    overflow-y: auto;
+  }
+
+  ul.pagination li:first-child {
+    margin-right: var(--nile-spacing-spacing-xs);
+  }
+  ul.pagination li:last-child {
+    margin-left: var(--nile-spacing-spacing-md);
+  }
+
+  .page-size-label {
+    font-size: var(--nile-type-scale-3);
+    color: var(--nile-colors-dark-500);
+    margin-left: var(--nile-spacing-spacing-md);
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .nile-button::part(base) {
+    min-width: 32px;
+  }
+`;
+
+export default [styles];

package/src/nile-pagination/nile-pagination.ts

@@ -0,0 +1,184 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-pagination.css';
+import NileElement from '../internal/nile-element';
+import {
+  calculateTotalPages,
+  getPaginationItems,
+  getHiddenPages,
+  getRangeText,
+} from './nile-pagination-utils';
+
+@customElement('nile-pagination')
+export class NilePagination extends NileElement {
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ type: Number }) totalItems = 0;
+  @property({ type: Number }) pageSize = 50;
+  @property({ type: Number }) currentPage = 1;
+  @property({ type: String }) variant: 'v1' | 'v2' = 'v1';
+  @property({ type: Boolean }) disabled = false;
+  @property({ type: Boolean }) showTitle = true;
+  @property({ type: Array }) pageSizeOptions: number[] = [10, 25, 50, 100];
+
+  private get totalPages(): number {
+    return calculateTotalPages(this.totalItems, this.pageSize);
+  }
+
+  private goToPage(page: number) {
+    if (this.disabled) return;
+    const safe = Math.max(1, Math.min(page, this.totalPages));
+    this.currentPage = safe;
+    this.emit('nile-change', { page: safe, pageSize: this.pageSize });
+  }
+
+  private onPageSizeSelect(size: number) {
+    if (this.disabled || this.pageSize === size) return;
+    this.pageSize = size;
+    this.currentPage = 1;
+    this.emit('nile-change', { page: 1, pageSize: size });
+  }
+
+  private renderRangeText(): TemplateResult {
+    return html`<div class="range-text">
+      ${getRangeText(this.totalItems, this.pageSize, this.currentPage)}
+    </div>`;
+  }
+
+  private renderPageSizeSelect(): TemplateResult | null {
+    if (this.variant !== 'v1') return null;
+    return html`
+      <div class="page-size-select">
+        <nile-dropdown class="page-size-dropdown" ?disabled=${this.disabled}>
+          <nile-button slot="trigger" variant="tertiary" ?disabled=${this.disabled}>
+            ${this.pageSize}
+            <nile-icon name="chevrondown" size="14" class="chevron"></nile-icon>
+          </nile-button>
+          <nile-menu class="page-size-menu">
+            ${this.pageSizeOptions.map(size => html`
+              <nile-menu-item
+                ?disabled=${this.disabled}
+                @click=${() => this.onPageSizeSelect(size)}
+              >
+                ${size}
+              </nile-menu-item>
+            `)}
+          </nile-menu>
+        </nile-dropdown>
+        <span class="page-size-label">Items per page</span>
+      </div>
+    `;
+  }
+
+  private renderPrevButton(): TemplateResult {
+    return html`
+      <li>
+        <nile-button
+          variant="tertiary"
+          ?disabled=${this.currentPage === 1 || this.disabled}
+          @click=${() => this.goToPage(this.currentPage - 1)}
+        >
+          <nile-icon name="arrowleft" size="14"></nile-icon>
+        </nile-button>
+      </li>
+    `;
+  }
+
+  private renderNextButton(): TemplateResult {
+    const total = this.totalPages;
+    return html`
+      <li>
+        <nile-button
+          variant="tertiary"
+          ?disabled=${this.currentPage === total || this.disabled}
+          @click=${() => this.goToPage(this.currentPage + 1)}
+        >
+          <nile-icon name="arrowright" size="14"></nile-icon>
+        </nile-button>
+      </li>
+    `;
+  }
+
+  private renderPageItem(item: number | string, idx: number, items: (number | string)[]): TemplateResult {
+    if (item === '…') {
+      return html`
+        <li>
+          <nile-dropdown class="ellipsis-dropdown" ?disabled=${this.disabled}>
+            <nile-button slot="trigger" variant="ghost" class="ellipsis-button" ?disabled=${this.disabled}>
+              …
+            </nile-button>
+            <nile-menu>
+              <div class="ellipsis-scroll-wrapper">
+                ${getHiddenPages(
+                  this.totalPages,
+                  items,
+                  this.currentPage,
+                  idx < items.indexOf(this.currentPage) ? 'left' : 'right'
+                ).map(page => html`
+                  <nile-menu-item
+                    ?disabled=${this.disabled}
+                    @click=${() => this.goToPage(page)}
+                  >
+                    ${page}
+                  </nile-menu-item>
+                `)}
+              </div>
+            </nile-menu>
+          </nile-dropdown>
+        </li>
+      `;
+    }
+
+    return html`
+      <li>
+        <nile-button
+          variant=${item === this.currentPage ? 'primary' : 'ghost'}
+          ?disabled=${this.disabled}
+          @click=${() => this.goToPage(item as number)}
+        >
+          ${item}
+        </nile-button>
+      </li>
+    `;
+  }
+
+  private renderPageList(): TemplateResult {
+    const total = this.totalPages;
+    const items = getPaginationItems(total, this.currentPage);
+    return html`
+      <nav aria-label="Pagination">
+        <ul class="pagination">
+          ${this.renderPrevButton()}
+          ${items.map((item, idx) => this.renderPageItem(item, idx, items))}
+          ${this.renderNextButton()}
+        </ul>
+      </nav>
+    `;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="pagination-wrapper ${this.variant}">
+        <div class="pager-container">
+          ${this.showTitle ? this.renderRangeText() : null}
+          ${this.renderPageSizeSelect()}
+        </div>
+        ${this.renderPageList()}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-pagination': NilePagination;
+  }
+}

package/vscode-html-custom-data.json

@@ -2339,6 +2339,50 @@
         }
       ]
     },
+    {
+      "name": "nile-pagination",
+      "description": "Attributes:\n\n  * `totalItems` {`number`} - \n\n  * `pageSize` {`number`} - \n\n  * `currentPage` {`number`} - \n\n  * `variant` {`\"v1\" | \"v2\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\nProperties:\n\n  * `totalItems` {`number`} - \n\n  * `pageSize` {`number`} - \n\n  * `currentPage` {`number`} - \n\n  * `variant` {`\"v1\" | \"v2\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\n  * `totalPages` {`number`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "totalItems",
+          "description": "`totalItems` {`number`} - \n\nProperty: totalItems\n\nDefault: 0"
+        },
+        {
+          "name": "pageSize",
+          "description": "`pageSize` {`number`} - \n\nProperty: pageSize\n\nDefault: 50"
+        },
+        {
+          "name": "currentPage",
+          "description": "`currentPage` {`number`} - \n\nProperty: currentPage\n\nDefault: 1"
+        },
+        {
+          "name": "variant",
+          "description": "`variant` {`\"v1\" | \"v2\"`} - \n\nProperty: variant\n\nDefault: v1",
+          "values": [
+            {
+              "name": "v1"
+            },
+            {
+              "name": "v2"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "showTitle",
+          "description": "`showTitle` {`boolean`} - \n\nProperty: showTitle\n\nDefault: true",
+          "valueSet": "v"
+        },
+        {
+          "name": "pageSizeOptions",
+          "description": "`pageSizeOptions` {`number[]`} - \n\nProperty: pageSizeOptions\n\nDefault: 10,25,50,100"
+        }
+      ]
+    },
     {
       "name": "nile-popover",
       "description": "Nile icon component.\n\nAttributes:\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the popover away from its target.\n\n  * `preventOverlayClose` {`boolean`} - \n\n  * `arrow` {`boolean`} - \n\n  * `title` {`string`} - Gives the title to the popover\n\n  * `open` {`boolean`} - \n\n  * `arrow-placement` {`\"end\" | \"start\" | \"center\" | \"anchor\"`} - \n\n  * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `flip` {`boolean`} - \n\nProperties:\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the popover away from its target.\n\n  * `preventOverlayClose` {`boolean`} - \n\n  * `arrow` {`boolean`} - \n\n  * `title` {`string`} - Gives the title to the popover\n\n  * `open` {`boolean`} - \n\n  * `isShow` {`boolean`} - \n\n  * `arrowPlacement` {`\"end\" | \"start\" | \"center\" | \"anchor\"`} - \n\n  * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `flip` {`boolean`} - \n\n  * `handleClick` - \n\n  * `handleDocumentClick` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",