@aquera/nile-elements 0.1.46-beta-2.1 → 0.1.46-beta-2.3

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,139 @@
+/**
+ * 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);
+  }
+
+ 
+
+  .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;
+  height: 32px;
+  padding: 0px 6px;
+  box-shadow: none;
+}
+
+  nile-button::part(base):active {
+  min-width: 32px;
+  height: 32px;
+  padding: 0px 6px;
+  box-shadow: none;
+  border:none;
+}
+ 
+ nile-button.down::part(base){
+  min-width: 62px;
+
+ }
+.page-size-dropdown .chevron {
+  transition: transform 0.2s;
+}
+.page-size-dropdown .open .chevron {
+  transform: rotate(180deg);
+}
+
+
+
+
+
+`;
+
+export default [styles];

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

@@ -0,0 +1,219 @@
+/**
+ * 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;
+  }
+}

package/src/nile-popup/nile-popup.ts

@@ -224,10 +224,27 @@ export class NilePopup extends NileElement {
       this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0] as HTMLElement;
     }
 
+    /**
+     * NOTE TO DEVELOPERS:
+     * The anchor element is essential for nile-popup to function correctly.
+     * This error was thrown when an anchor (slot="anchor") or anchor reference was not found.
+     *
+     * In many places, developers are using *ngIf or similar conditional rendering directly on the anchor slot
+     * inside <nile-tooltip>, which removes the anchor from the DOM.
+     * As a result, the tooltip remains but cannot be anchored — leading to this error.
+     *
+     * Suggested Fixes:
+     *  - Move *ngIf to a wrapper above <nile-tooltip>
+     *  - OR use the 'disabled' property of nile-tooltip to prevent it from activating without anchor
+     *
+     * For now, this error is commented out to avoid runtime crashes.
+     * Proper usage patterns should be followed instead.
+     */
     if (!this.anchorEl) {
-      throw new Error(
-        'Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute.'
-      );
+      // throw new Error(
+      //   'Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute.'
+      // );
+      return;
     }
 
     this.start();