@nuraly/lumenui 0.2.1 → 0.3.2

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

package/dist/src/components/tabs/controllers/base.controller.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveControllerHost } from 'lit';
+import { TabItem } from '../tabs.types.js';
+import { BaseComponentController } from '@nuralyui/common/controllers';
+export type { ErrorHandler } from '@nuralyui/common/controllers';
+/**
+ * Base interface for tabs host element
+ */
+export interface TabsHost extends EventTarget {
+    /** Currently active tab index */
+    activeTab: number;
+    /** Array of tab items */
+    tabs: TabItem[];
+    /** Whether component is disabled */
+    disabled?: boolean;
+    /** Current theme */
+    currentTheme: string;
+    /** Whether component is available */
+    isComponentAvailable(component: string): boolean;
+    /** Shadow root access */
+    shadowRoot: ShadowRoot | null;
+    /** Request update */
+    requestUpdate(): void;
+}
+/**
+ * Base interface for tabs controllers
+ */
+export interface TabsBaseController {
+    readonly host: TabsHost;
+}
+/**
+ * Abstract base controller class that implements common functionality
+ * for all tabs component controllers
+ */
+export declare abstract class BaseTabsController extends BaseComponentController<TabsHost & ReactiveControllerHost> implements TabsBaseController {
+    /**
+     * Helper method to check if tab is valid
+     */
+    protected isValidTabIndex(index: number): boolean;
+    /**
+     * Helper method to get tab element by index
+     */
+    protected getTabElement(index: number): Element | null;
+}
+//# sourceMappingURL=base.controller.d.ts.map

package/dist/src/components/tabs/controllers/base.controller.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Abstract base controller class that implements common functionality
+ * for all tabs component controllers
+ */
+export class BaseTabsController extends BaseComponentController {
+    /**
+     * Helper method to check if tab is valid
+     */
+    isValidTabIndex(index) {
+        return index >= 0 && index < this.host.tabs.length;
+    }
+    /**
+     * Helper method to get tab element by index
+     */
+    getTabElement(index) {
+        var _a;
+        return ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-index="${index}"]`)) || null;
+    }
+}
+//# sourceMappingURL=base.controller.js.map

package/dist/src/components/tabs/controllers/dragdrop.controller.d.ts

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TabsHost, BaseTabsController } from './base.controller.js';
+import { ReactiveControllerHost } from 'lit';
+/**
+ * Drag and drop controller interface for tabs components
+ */
+export interface DragDropController {
+    handleDragStart(event: DragEvent): void;
+    handleDragOver(event: DragEvent): void;
+    handleDragEnter(event: DragEvent): void;
+    handleDragLeave(event: DragEvent): void;
+    handleDrop(event: DragEvent): void;
+}
+/**
+ * Enhanced tabs host interface for drag and drop functionality
+ */
+export interface TabsDragDropHost extends TabsHost {
+    editable?: {
+        canMove?: boolean;
+    };
+    dispatchEventWithMetadata(eventName: string, detail: any): void;
+}
+/**
+ * Drag and drop controller manages drag and drop functionality for tabs components
+ * Handles all drag events and tab reordering
+ */
+export declare class TabsDragDropController extends BaseTabsController implements DragDropController {
+    protected _host: TabsDragDropHost & ReactiveControllerHost;
+    private dragOverHandler;
+    constructor(host: TabsDragDropHost & ReactiveControllerHost);
+    get host(): TabsDragDropHost & ReactiveControllerHost;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Handle drag start event
+     * @param event - The drag event
+     */
+    handleDragStart(event: DragEvent): void;
+    /**
+     * Handle drag over event
+     * @param event - The drag event
+     */
+    handleDragOver(event: DragEvent): void;
+    /**
+     * Handle drag enter event
+     * @param event - The drag event
+     */
+    handleDragEnter(event: DragEvent): void;
+    /**
+     * Handle drag leave event
+     * @param event - The drag event
+     */
+    handleDragLeave(event: DragEvent): void;
+    /**
+     * Handle drop event
+     * @param event - The drag event
+     */
+    handleDrop(event: DragEvent): void;
+    /**
+     * Check if tab can be moved (drag and drop enabled)
+     */
+    canMoveTab(): boolean;
+    /**
+     * Validate if tab reorder is valid
+     */
+    private isValidTabReorder;
+    /**
+     * Perform tab reordering
+     */
+    private performTabReorder;
+    /**
+     * Clean up drag-related CSS classes
+     */
+    private cleanupDragClasses;
+    /**
+     * Get draggable state for tab element
+     */
+    getDraggableState(): boolean;
+}
+//# sourceMappingURL=dragdrop.controller.d.ts.map