@aquera/nile-elements 0.1.40-beta-2.3 → 0.1.40-beta-2.5

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

@@ -1,219 +0,0 @@
-/**
- * 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, query, state } 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({attribute: 'totalitems',reflect: true, converter: { fromAttribute: (v: string) => {const n = Number(v);
-        return Number.isFinite(n) && n >= 0 ? Math.floor(n) : 0; }}})totalItems: number = 0;
-
-  @property({ attribute: 'currentpage',reflect: true,converter: { fromAttribute: (v: string) => { const n = Number(v);
-        return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 1;}}}) currentPage : number = 1;
-
-
-  @property({attribute: 'pagesize',reflect: true, converter: { fromAttribute: (v: string) => {
-        const n = Number(v);
-        return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 50;}}}) pageSize: number = 50;
-
-
-  @property({ attribute: 'pagesizeoptions', reflect: false,converter: { fromAttribute: (v: string) => { try { const arr = JSON.parse(v);
-          if (Array.isArray(arr) && arr.every(x => typeof x === 'number')) {
-            return arr as number[];
-          }
-        } catch {}return [10, 25, 50, 100];}}}) pageSizeOptions: number[] = [10, 25, 50, 100];
-
-  @property({ type: String }) variant: 'fluid' | 'compact' = 'fluid';
-  @property({ type: Boolean }) disabled = false;
-  @property({ type: Boolean }) showTitle = true;
-
-  @state() private _pageSizeOpen = false;
-  @query('.page-size-dropdown') private _pageSizeDropdown!: HTMLElement;
-
-  firstUpdated() {
-    this._pageSizeDropdown.addEventListener('nile-show', () => {
-      this._pageSizeOpen = true;
-    });
-    this._pageSizeDropdown.addEventListener('nile-after-hide', () => {
-      this._pageSizeOpen = false;
-    });
-  }
- 
-  private get totalPages(): number {
-    return Math.max(1, calculateTotalPages(this.totalItems, this.pageSize));
-  }
-
-  private goToPage(page: number) {
-    if (this.disabled) return;
-    this.currentPage = page;  
-    this.emit('nile-change', { page: this.currentPage, 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 {
-    if (this.totalItems === 0) {
-      return html`<div class="range-text">Showing 0 of 0</div>`;
-    }
-    return html`<div class="range-text">
-      ${getRangeText(this.totalItems, this.pageSize, this.currentPage)}
-    </div>`;
-  }
-
-  private renderPageSizeSelect(): TemplateResult | null {
-    if (this.variant !== 'fluid') return null;
-    return html`
-      <div class="page-size-select">
-        <nile-dropdown class="page-size-dropdown" ?disabled=${this.disabled}>
-          <nile-button slot="trigger" variant="tertiary" class="down ${this._pageSizeOpen ? 'open' : ''}"
-            ?disabled=${this.disabled}
-          >
-            ${this.pageSize}
-            <nile-icon name="chevrondown" size="14" color="var(--nile-colors-dark-500)" 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 {
-    return html`
-      <li>
-        <nile-button
-          variant="tertiary"
-          ?disabled=${this.currentPage === this.totalPages || 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" ?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 items = getPaginationItems(this.totalPages, 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;
-  }
-}