@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/table/templates/actions.template.d.ts

@@ -0,0 +1,14 @@
+import { TemplateResult } from 'lit';
+import { Sizes } from '../table.types.js';
+export interface ActionsTemplateData {
+    selectedItems: number;
+    size: Sizes;
+    onCancelSelection: () => void;
+}
+/**
+ * Renders the actions bar template for selected items
+ * @param data - Actions data and event handlers
+ * @returns Template for actions bar
+ */
+export declare function renderActionsTemplate(data: ActionsTemplateData): TemplateResult;
+//# sourceMappingURL=actions.template.d.ts.map

package/dist/src/components/table/templates/actions.template.js

@@ -0,0 +1,15 @@
+import { html } from 'lit';
+/**
+ * Renders the actions bar template for selected items
+ * @param data - Actions data and event handlers
+ * @returns Template for actions bar
+ */
+export function renderActionsTemplate(data) {
+    return html `
+    <div class="actions-container" data-size="${data.size}">
+      <span>${data.selectedItems} selected</span>
+      <button @click=${data.onCancelSelection}>Cancel</button>
+    </div>
+  `;
+}
+//# sourceMappingURL=actions.template.js.map

package/dist/src/components/table/templates/column-filter.template.d.ts

@@ -0,0 +1,24 @@
+import { TemplateResult } from 'lit';
+import { ColumnFilter } from '../table.types.js';
+export interface ColumnFilterTemplateData {
+    columnKey: string;
+    filterConfig: ColumnFilter;
+    currentValue: string | number | undefined;
+    isActive: boolean;
+    onFilterChange: (value: string | number) => void;
+    onClearFilter: () => void;
+}
+/**
+ * Renders the column filter dropdown template
+ * @param data - Column filter data and event handlers
+ * @returns Template for column filter dropdown
+ */
+export declare function renderColumnFilterTemplate(data: ColumnFilterTemplateData): TemplateResult;
+/**
+ * Renders filter icon with active indicator
+ * @param isActive - Whether the filter is active
+ * @param hasFilter - Whether a filter value is set
+ * @returns Template for filter icon
+ */
+export declare function renderFilterIcon(_isActive: boolean, hasFilter: boolean): TemplateResult;
+//# sourceMappingURL=column-filter.template.d.ts.map

package/dist/src/components/table/templates/column-filter.template.js

@@ -0,0 +1,76 @@
+import { html, nothing } from 'lit';
+/**
+ * Renders the column filter dropdown template
+ * @param data - Column filter data and event handlers
+ * @returns Template for column filter dropdown
+ */
+export function renderColumnFilterTemplate(data) {
+    const { filterConfig, currentValue, onFilterChange, onClearFilter } = data;
+    return html `
+    <div class="column-filter-dropdown">
+      <div class="column-filter-content">
+        ${filterConfig.type === "select" /* FilterType.Select */
+        ? html `
+              <nr-select
+                .options=${filterConfig.options || []}
+                .value=${currentValue || ''}
+                placeholder=${filterConfig.placeholder || 'Filter...'}
+                @nr-change=${(e) => onFilterChange(e.detail.value)}
+              ></nr-select>
+            `
+        : filterConfig.type === "number" /* FilterType.Number */
+            ? html `
+              <input
+                type="number"
+                class="column-filter-input"
+                placeholder=${filterConfig.placeholder || 'Filter by number...'}
+                .value=${currentValue || ''}
+                @input=${(e) => onFilterChange(e.target.value)}
+              />
+            `
+            : filterConfig.type === "date" /* FilterType.Date */
+                ? html `
+              <input
+                type="date"
+                class="column-filter-input"
+                placeholder=${filterConfig.placeholder || 'Filter by date...'}
+                .value=${currentValue || ''}
+                @input=${(e) => onFilterChange(e.target.value)}
+              />
+            `
+                : html `
+              <input
+                type="text"
+                class="column-filter-input"
+                placeholder=${filterConfig.placeholder || 'Filter...'}
+                .value=${currentValue || ''}
+                @input=${(e) => onFilterChange(e.target.value)}
+              />
+            `}
+        
+        ${currentValue
+        ? html `
+              <button class="column-filter-clear" @click=${onClearFilter}>
+                <nr-icon name="x" size="small"></nr-icon>
+              </button>
+            `
+        : nothing}
+      </div>
+    </div>
+  `;
+}
+/**
+ * Renders filter icon with active indicator
+ * @param isActive - Whether the filter is active
+ * @param hasFilter - Whether a filter value is set
+ * @returns Template for filter icon
+ */
+export function renderFilterIcon(_isActive, hasFilter) {
+    return html `
+    <span class="filter-icon ${hasFilter ? 'has-filter' : ''}">
+      <nr-icon name="filter" size="small"></nr-icon>
+      ${hasFilter ? html `<span class="filter-indicator"></span>` : nothing}
+    </span>
+  `;
+}
+//# sourceMappingURL=column-filter.template.js.map

package/dist/src/components/table/templates/content.template.d.ts

@@ -0,0 +1,37 @@
+import { TemplateResult } from 'lit';
+import { IHeader, SelectionMode, SortAttribute } from '../table.types.js';
+import { TableHost } from '../interfaces/index.js';
+export interface ContentTemplateData {
+    headers: IHeader[];
+    rows: any[];
+    expandable: string | undefined;
+    expansionRenderer: ((row: any, index: number) => any) | undefined;
+    selectionMode: SelectionMode | undefined;
+    selectedItems: boolean[];
+    currentPage: number;
+    itemPerPage: number;
+    sortAttribute: SortAttribute;
+    expand: boolean[];
+    columnFilters: Map<string, string | number>;
+    activeFilterColumn: string | null;
+    loading: boolean;
+    host: TableHost;
+    clickable: boolean;
+    globalCheckRef?: (el: HTMLInputElement | null) => void;
+    onCheckAll: () => void;
+    onCheckOne: (event: Event, index: number) => void;
+    onSelectOne: (index: number) => void;
+    onUpdateSort: (index: number) => void;
+    onShowExpandedContent: (index: number) => void;
+    onToggleColumnFilter: (columnKey: string) => void;
+    onApplyColumnFilter: (columnKey: string, value: string | number) => void;
+    onClearColumnFilter: (columnKey: string) => void;
+    onRowClick?: (row: any, index: number) => void;
+}
+/**
+ * Renders the table content template
+ * @param data - Table content data and event handlers
+ * @returns Template for table content
+ */
+export declare function renderContentTemplate(data: ContentTemplateData): TemplateResult;
+//# sourceMappingURL=content.template.d.ts.map

package/dist/src/components/table/templates/content.template.js

@@ -0,0 +1,208 @@
+import { html, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { choose } from 'lit/directives/choose.js';
+import { renderColumnFilterTemplate, renderFilterIcon } from './column-filter.template.js';
+import { renderLoadingTemplate } from './loading.template.js';
+import { renderEmptyTemplate } from './empty.template.js';
+/**
+ * Calculate cumulative left position for fixed columns
+ */
+function calculateFixedColumnLeft(headers, currentIndex, hasSelection) {
+    let left = 0;
+    // Add selection column width if present
+    if (hasSelection) {
+        left += 50; // Default selection column width
+    }
+    // Sum up widths of all previous fixed left columns
+    for (let i = 0; i < currentIndex; i++) {
+        if (headers[i].fixed === 'left') {
+            const width = headers[i].width;
+            left += typeof width === 'number' ? width : Number.parseInt(String(width)) || 150;
+        }
+    }
+    return left;
+}
+/**
+ * Get CSS classes for fixed columns
+ */
+function getFixedColumnClasses(header) {
+    const classes = [];
+    if (header.fixed) {
+        classes.push('fixed-column');
+        classes.push(`fixed-column-${header.fixed}`);
+    }
+    return classes.join(' ');
+}
+/**
+ * Renders the table content template
+ * @param data - Table content data and event handlers
+ * @returns Template for table content
+ */
+export function renderContentTemplate(data) {
+    // Check if any columns are fixed left
+    const hasFixedLeftColumns = data.headers.some(h => h.fixed === 'left');
+    const selectionColumnClass = hasFixedLeftColumns ? 'fixed-column fixed-column-left' : '';
+    return html `
+    <table>
+      <thead>
+        <tr>
+          ${(data.expandable || data.expansionRenderer) || data.selectionMode
+        ? html `<th class="${selectionColumnClass}" style="${hasFixedLeftColumns ? 'left: 0; width: 50px; min-width: 50px;' : ''}">
+                ${data.selectionMode === "multiple" /* SelectionMode.Multiple */
+            ? html `<nr-checkbox 
+                      id="global-check"
+                      @nr-change=${data.onCheckAll}
+                    ></nr-checkbox>`
+            : nothing}
+              </th>`
+        : nothing}
+          ${repeat(data.headers, (header, index) => {
+        const fixedClasses = getFixedColumnClasses(header);
+        const hasSelection = (data.expandable || data.expansionRenderer) || data.selectionMode;
+        const leftPosition = header.fixed === 'left'
+            ? calculateFixedColumnLeft(data.headers, index, !!hasSelection)
+            : undefined;
+        const width = header.width
+            ? typeof header.width === 'number' ? `${header.width}px` : header.width
+            : undefined;
+        return html `
+                ${data.expandable !== header.key
+            ? html `<th 
+                      class="${[header.filterable ? 'filterable' : '', fixedClasses].filter(Boolean).join(' ')}"
+                      style="${leftPosition !== undefined ? `left: ${leftPosition}px;` : ''} ${width ? `width: ${width}; min-width: ${width};` : ''}">
+                      <div class="th-content">
+                        <span class="th-text" @click=${() => data.onUpdateSort(index)}>
+                          ${header.name}
+                          ${index === data.sortAttribute.index
+                ? choose(data.sortAttribute.order, [
+                    ["default" /* SortOrder.Default */, () => html `<nr-icon name="arrow-up-down" size="small"></nr-icon>`],
+                    ["ascending" /* SortOrder.Ascending */, () => html `<nr-icon name="arrow-up" size="small"></nr-icon>`],
+                    ["descending" /* SortOrder.Descending */, () => html `<nr-icon name="arrow-down" size="small"></nr-icon>`],
+                ])
+                : html `<nr-icon name="arrow-up-down" size="small"></nr-icon>`}
+                        </span>
+                        ${header.filterable && header.filterConfig
+                ? html `
+                              <div class="filter-wrapper">
+                                <button 
+                                  class="filter-trigger"
+                                  @click=${(e) => {
+                    e.stopPropagation();
+                    data.onToggleColumnFilter(header.key);
+                }}
+                                >
+                                  ${renderFilterIcon(data.activeFilterColumn === header.key, data.columnFilters.has(header.key))}
+                                </button>
+                                ${data.activeFilterColumn === header.key
+                    ? renderColumnFilterTemplate({
+                        columnKey: header.key,
+                        filterConfig: header.filterConfig,
+                        currentValue: data.columnFilters.get(header.key),
+                        isActive: true,
+                        onFilterChange: (value) => data.onApplyColumnFilter(header.key, value),
+                        onClearFilter: () => data.onClearColumnFilter(header.key),
+                    })
+                    : nothing}
+                              </div>
+                            `
+                : nothing}
+                      </div>
+                    </th>`
+            : nothing}
+              `;
+    })}
+        </tr>
+      </thead>
+      <tbody>
+        ${data.loading
+        ? renderLoadingTemplate(data.host, 5)
+        : data.rows.length === 0
+            ? renderEmptyTemplate(data.host)
+            : repeat(data.rows, (row, index) => html `
+            <tr class="${data.clickable ? 'clickable' : ''}" @click=${() => { var _a; return (_a = data.onRowClick) === null || _a === void 0 ? void 0 : _a.call(data, row, index); }}>
+              ${(data.expandable || data.expansionRenderer) && !data.selectionMode
+                ? html `
+                  <td 
+                    @click=${() => data.onShowExpandedContent(index)} 
+                    @keydown=${(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        data.onShowExpandedContent(index);
+                    }
+                }}
+                    tabindex="0"
+                    role="button"
+                    aria-expanded="${data.expand[index]}"
+                    aria-label="${data.expand[index] ? 'Collapse row' : 'Expand row'}"
+                    class="expand-icon ${data.expand[index] ? 'expanded' : ''} ${selectionColumnClass}" 
+                    style="${hasFixedLeftColumns ? 'left: 0; width: 50px; min-width: 50px;' : ''}">
+                    <nr-icon name="chevron-down" size="small"></nr-icon>
+                  </td>
+                `
+                : data.selectionMode
+                    ? choose(data.selectionMode, [
+                        [
+                            "multiple" /* SelectionMode.Multiple */,
+                            () => html `<td class="${selectionColumnClass}" style="${hasFixedLeftColumns ? 'left: 0; width: 50px; min-width: 50px;' : ''}">
+                        <nr-checkbox
+                          @nr-change=${(checkOneEvent) => data.onCheckOne(checkOneEvent, index)}
+                          .checked=${data.selectedItems[index + (data.currentPage - 1) * data.itemPerPage]}
+                        ></nr-checkbox>
+                      </td>`,
+                        ],
+                        [
+                            "single" /* SelectionMode.Single */,
+                            () => html `<td class="${selectionColumnClass}" style="${hasFixedLeftColumns ? 'left: 0; width: 50px; min-width: 50px;' : ''}">
+                      <nr-radio
+                        name="table-row-selection"
+                        value="${index}"
+                        @nr-change=${() => data.onSelectOne(index)}
+                        .checked=${data.selectedItems[index + (data.currentPage - 1) * data.itemPerPage]}
+                      ></nr-radio>
+                    </td>`,
+                        ],
+                    ])
+                    : nothing}
+            ${repeat(data.headers, (header, headerIndex) => {
+                const fixedClasses = getFixedColumnClasses(header);
+                const hasSelection = (data.expandable || data.expansionRenderer) || data.selectionMode;
+                const leftPosition = header.fixed === 'left'
+                    ? calculateFixedColumnLeft(data.headers, headerIndex, !!hasSelection)
+                    : undefined;
+                const width = header.width
+                    ? typeof header.width === 'number' ? `${header.width}px` : header.width
+                    : undefined;
+                const cellValue = row[header.key];
+                const cellContent = header.render
+                    ? header.render(cellValue, row, index)
+                    : cellValue;
+                return html `${data.expandable !== header.key
+                    ? html `<td
+                      class="${fixedClasses}"
+                      style="${leftPosition !== undefined ? `left: ${leftPosition}px;` : ''} ${width ? `width: ${width}; min-width: ${width};` : ''}">
+                      ${cellContent}
+                    </td>`
+                    : nothing}`;
+            })}
+            </tr>
+            ${data.expand[index]
+                ? html `
+                <tr class="expansion-row expanded">
+                  <td colspan=${data.headers.length + ((data.expandable || data.expansionRenderer) || data.selectionMode ? 1 : 0)}>
+                    <div class="expansion-content">
+                      ${data.expansionRenderer
+                    ? data.expansionRenderer(row, index)
+                    : data.expandable
+                        ? row[data.expandable]
+                        : nothing}
+                    </div>
+                  </td>
+                </tr>
+              `
+                : nothing}
+          `)}
+      </tbody>
+    </table>
+  `;
+}
+//# sourceMappingURL=content.template.js.map

package/dist/src/components/table/templates/empty.template.d.ts

@@ -0,0 +1,8 @@
+import type { TableHost } from '../interfaces/table-host.interface';
+/**
+ * Renders the empty state template for the table when there is no data
+ * @param host - The table host component
+ * @returns Empty state template
+ */
+export declare function renderEmptyTemplate(host: TableHost): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=empty.template.d.ts.map

package/dist/src/components/table/templates/empty.template.js

@@ -0,0 +1,47 @@
+import { html } from 'lit';
+/**
+ * Renders the empty state template for the table when there is no data
+ * @param host - The table host component
+ * @returns Empty state template
+ */
+export function renderEmptyTemplate(host) {
+    // Calculate colspan: headers + selection column (if present)
+    const colspan = host.headers.length + (host.selectionMode ? 1 : 0);
+    return html `
+    <tr class="empty-row">
+      <td colspan="${colspan}" class="empty-cell">
+        <div class="empty-state">
+          ${host.emptyIcon
+        ? html `
+                <div class="empty-icon">
+                  <nr-icon name="${host.emptyIcon}"></nr-icon>
+                </div>
+              `
+        : html `
+                <div class="empty-icon">
+                  <svg
+                    width="64"
+                    height="64"
+                    viewBox="0 0 64 64"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M32 8C18.745 8 8 18.745 8 32s10.745 24 24 24 24-10.745 24-24S45.255 8 32 8zm0 44c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z"
+                      fill="currentColor"
+                      opacity="0.3"
+                    />
+                    <path
+                      d="M32 20c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2s2-.895 2-2V22c0-1.105-.895-2-2-2zm0 20c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              `}
+          <div class="empty-text">${host.emptyText}</div>
+        </div>
+      </td>
+    </tr>
+  `;
+}
+//# sourceMappingURL=empty.template.js.map

package/dist/src/components/table/templates/filter.template.d.ts

@@ -0,0 +1,14 @@
+import { TemplateResult } from 'lit';
+export interface FilterTemplateData {
+    showInput: boolean;
+    value: string;
+    onToggleInput: () => void;
+    onChange: (event: Event) => void;
+}
+/**
+ * Renders the filter/search template for the table
+ * @param data - Filter data and event handlers
+ * @returns Template for search filter
+ */
+export declare function renderFilterTemplate(data: FilterTemplateData): TemplateResult;
+//# sourceMappingURL=filter.template.d.ts.map

package/dist/src/components/table/templates/filter.template.js

@@ -0,0 +1,28 @@
+import { html, nothing } from 'lit';
+/**
+ * Renders the filter/search template for the table
+ * @param data - Filter data and event handlers
+ * @returns Template for search filter
+ */
+export function renderFilterTemplate(data) {
+    return html `
+    <div class="filter-container">
+      ${data.showInput
+        ? html `
+            <nr-icon name="search" size="small" class="search-icon"></nr-icon>
+            <input
+              type="text"
+              placeholder="search"
+              @blur=${!data.value.trim() ? data.onToggleInput : nothing}
+              @input=${data.onChange}
+            />
+          `
+        : html `
+            <div class="icon-container" @click=${data.onToggleInput}>
+              <nr-icon name="search" size="small"></nr-icon>
+            </div>
+          `}
+    </div>
+  `;
+}
+//# sourceMappingURL=filter.template.js.map

package/dist/src/components/table/templates/index.d.ts

@@ -0,0 +1,8 @@
+export { renderPaginationTemplate, type PaginationTemplateData } from './pagination.template.js';
+export { renderContentTemplate, type ContentTemplateData } from './content.template.js';
+export { renderActionsTemplate, type ActionsTemplateData } from './actions.template.js';
+export { renderFilterTemplate, type FilterTemplateData } from './filter.template.js';
+export { renderColumnFilterTemplate, renderFilterIcon, type ColumnFilterTemplateData } from './column-filter.template.js';
+export { renderLoadingTemplate, renderSpinnerLoadingTemplate } from './loading.template.js';
+export { renderEmptyTemplate } from './empty.template.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/table/templates/index.js

@@ -0,0 +1,8 @@
+export { renderPaginationTemplate } from './pagination.template.js';
+export { renderContentTemplate } from './content.template.js';
+export { renderActionsTemplate } from './actions.template.js';
+export { renderFilterTemplate } from './filter.template.js';
+export { renderColumnFilterTemplate, renderFilterIcon } from './column-filter.template.js';
+export { renderLoadingTemplate, renderSpinnerLoadingTemplate } from './loading.template.js';
+export { renderEmptyTemplate } from './empty.template.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/table/templates/loading.template.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult } from 'lit';
+import { TableHost } from '../interfaces/index.js';
+/**
+ * Renders skeleton loading rows for the table
+ * @param host - The table host component
+ * @param rowCount - Number of skeleton rows to show (default: 5)
+ * @returns Template with skeleton rows
+ */
+export declare function renderLoadingTemplate(host: TableHost, rowCount?: number): TemplateResult;
+/**
+ * Renders a centered spinner loading indicator
+ * @param host - The table host component
+ * @returns Template with centered spinner
+ */
+export declare function renderSpinnerLoadingTemplate(host: TableHost): TemplateResult;
+//# sourceMappingURL=loading.template.d.ts.map

package/dist/src/components/table/templates/loading.template.js

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html } from 'lit';
+/**
+ * Renders skeleton loading rows for the table
+ * @param host - The table host component
+ * @param rowCount - Number of skeleton rows to show (default: 5)
+ * @returns Template with skeleton rows
+ */
+export function renderLoadingTemplate(host, rowCount = 5) {
+    const hasSelection = !!host.selectionMode;
+    return html `
+    ${Array.from({ length: rowCount }, () => html `
+      <tr class="skeleton-row">
+        ${hasSelection ? html `
+          <td class="skeleton-cell selection-skeleton">
+            <div class="skeleton-checkbox"></div>
+          </td>
+        ` : ''}
+        ${host.headers.map(() => html `
+          <td class="skeleton-cell">
+            <div class="skeleton-content"></div>
+          </td>
+        `)}
+      </tr>
+    `)}
+  `;
+}
+/**
+ * Renders a centered spinner loading indicator
+ * @param host - The table host component
+ * @returns Template with centered spinner
+ */
+export function renderSpinnerLoadingTemplate(host) {
+    const hasSelection = !!host.selectionMode;
+    const columnCount = host.headers.length + (hasSelection ? 1 : 0);
+    return html `
+    <tr class="loading-row">
+      <td colspan="${columnCount}" class="loading-cell">
+        <div class="loading-spinner-container">
+          <div class="loading-spinner"></div>
+          <p class="loading-text">Loading data...</p>
+        </div>
+      </td>
+    </tr>
+  `;
+}
+//# sourceMappingURL=loading.template.js.map

package/dist/src/components/table/templates/pagination.template.d.ts

@@ -0,0 +1,24 @@
+import { TemplateResult } from 'lit';
+import { Sizes } from '../table.types.js';
+export interface PaginationTemplateData {
+    numberOfItems: number;
+    itemPerPage: number[];
+    selectedItemPerPage: number;
+    currentPage: number;
+    size: Sizes;
+    numberOfPages: number;
+    fromItem: number;
+    toItem: number;
+    enableNext: boolean;
+    enablePrevious: boolean;
+    onItemPerPageChange: (event: CustomEvent) => void;
+    onNextPage: () => void;
+    onPreviousPage: () => void;
+}
+/**
+ * Renders the pagination template for the table
+ * @param data - Pagination data and event handlers
+ * @returns Template for pagination UI
+ */
+export declare function renderPaginationTemplate(data: PaginationTemplateData): TemplateResult;
+//# sourceMappingURL=pagination.template.d.ts.map

package/dist/src/components/table/templates/pagination.template.js

@@ -0,0 +1,52 @@
+import { html, nothing } from 'lit';
+/**
+ * Renders the pagination template for the table
+ * @param data - Pagination data and event handlers
+ * @returns Template for pagination UI
+ */
+export function renderPaginationTemplate(data) {
+    const selectOptions = data.itemPerPage.map(item => ({
+        label: String(item),
+        value: String(item)
+    }));
+    return html `
+    <div class="pagination-container" data-size="${data.size}">
+      <div class="left-content">
+        <span class="select-details">
+          <label>Items per page:</label>
+          <nr-select
+            .options=${selectOptions}
+            .value=${String(data.selectedItemPerPage)}
+            size="small"
+            @nr-change=${data.onItemPerPageChange}
+          ></nr-select>
+        </span>
+        <span class="items-details">
+          ${data.fromItem} - ${data.toItem} of ${data.numberOfItems} items
+        </span>
+      </div>
+
+      <div class="right-content">
+        <span class="page-details">
+          ${data.currentPage} of ${data.numberOfPages} pages
+        </span>
+        <span class="icon-container">
+          <nr-icon
+            class="left-arrow"
+            data-enabled=${data.enablePrevious}
+            name="chevron-left" size="small"
+            @click=${data.enablePrevious ? data.onPreviousPage : nothing}
+          ></nr-icon>
+
+          <nr-icon
+            class="right-arrow"
+            data-enabled=${data.enableNext}
+            name="chevron-right" size="small"
+            @click=${data.enableNext ? data.onNextPage : nothing}
+          ></nr-icon>
+        </span>
+      </div>
+    </div>
+  `;
+}
+//# sourceMappingURL=pagination.template.js.map