@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/table/controllers/selection.controller.js

@@ -0,0 +1,120 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseTableController } from './base.controller.js';
+/**
+ * Selection controller manages row selection state and logic
+ */
+export class TableSelectionController extends BaseTableController {
+    /**
+     * Initialize selection state array based on rows length
+     */
+    initSelection() {
+        if (this.host.selectionMode) {
+            this.host.selectedItems = new Array(this.host.rows.length).fill(false);
+        }
+    }
+    /**
+     * Handle check all rows event (only for current page)
+     */
+    handleCheckAll(isEveryItemChecked) {
+        try {
+            // Calculate the range for current page
+            const startIndex = (this.host.currentPage - 1) * this.host.selectedItemPerPage;
+            const endIndex = Math.min(startIndex + this.host.selectedItemPerPage, this.host.selectedItems.length);
+            // Create a copy of the selection array
+            const newSelection = [...this.host.selectedItems];
+            // Toggle only the items on the current page
+            for (let i = startIndex; i < endIndex; i++) {
+                newSelection[i] = !isEveryItemChecked;
+            }
+            this.host.selectedItems = newSelection;
+            const selectedRows = this.host.rowsCopy.filter((_, i) => this.host.selectedItems[i]);
+            this.dispatchEvent(new CustomEvent('onSelect', {
+                bubbles: true,
+                composed: true,
+                detail: { value: selectedRows }
+            }));
+            this.requestUpdate();
+        }
+        catch (error) {
+            this.handleError(error, 'handleCheckAll');
+        }
+    }
+    /**
+     * Handle check single row event
+     */
+    handleCheckOne(index, value) {
+        try {
+            const actualIndex = index + (this.host.currentPage - 1) * this.host.selectedItemPerPage;
+            this.host.selectedItems[actualIndex] = value;
+            this.host.selectedItems = [...this.host.selectedItems];
+            const selectedRows = this.host.rowsCopy.filter((_, i) => this.host.selectedItems[i]);
+            this.dispatchEvent(new CustomEvent('nr-select', {
+                bubbles: true,
+                composed: true,
+                detail: { value: selectedRows }
+            }));
+            this.requestUpdate();
+        }
+        catch (error) {
+            this.handleError(error, 'handleCheckOne');
+        }
+    }
+    /**
+     * Handle select single row event (radio button mode)
+     */
+    handleSelectOne(index) {
+        try {
+            const previousSelected = this.host.selectedItems.findIndex((isSelected) => isSelected);
+            if (previousSelected > -1) {
+                this.host.selectedItems[previousSelected] = false;
+            }
+            const actualIndex = index + (this.host.currentPage - 1) * this.host.selectedItemPerPage;
+            this.host.selectedItems[actualIndex] = true;
+            this.host.selectedItems = [...this.host.selectedItems];
+            const selectedRows = this.host.rowsCopy.filter((_, i) => this.host.selectedItems[i]);
+            this.dispatchEvent(new CustomEvent('nr-select', {
+                bubbles: true,
+                composed: true,
+                detail: { value: selectedRows }
+            }));
+            this.requestUpdate();
+        }
+        catch (error) {
+            this.handleError(error, 'handleSelectOne');
+        }
+    }
+    /**
+     * Handle cancel selection action
+     */
+    cancelSelection() {
+        try {
+            this.host.selectedItems = this.host.selectedItems.map(() => false);
+            this.dispatchEvent(new CustomEvent('nr-select', {
+                bubbles: true,
+                composed: true,
+                detail: { value: [] }
+            }));
+            this.requestUpdate();
+        }
+        catch (error) {
+            this.handleError(error, 'cancelSelection');
+        }
+    }
+    /**
+     * Check if any items are selected
+     */
+    hasSelection() {
+        return this.host.selectedItems.some((isSelected) => isSelected);
+    }
+    /**
+     * Get count of selected items
+     */
+    getSelectedCount() {
+        return this.host.selectedItems.filter((isSelected) => isSelected).length;
+    }
+}
+//# sourceMappingURL=selection.controller.js.map

package/dist/src/components/table/controllers/sort.controller.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseTableController } from './base.controller.js';
+/**
+ * Sort controller manages column sorting logic
+ */
+export declare class TableSortController extends BaseTableController {
+    /**
+     * Handle column sort order change
+     */
+    handleSortOrderChange(index: number): void;
+    /**
+     * Sort rows based on current sort attribute
+     */
+    sort(): void;
+    /**
+     * Reset sort to original row order
+     */
+    resetSort(): void;
+    /**
+     * Check if sorting is active
+     */
+    isSortActive(): boolean;
+    /**
+     * Check if sort order is default
+     */
+    isSortDefault(): boolean;
+}
+//# sourceMappingURL=sort.controller.d.ts.map

package/dist/src/components/table/controllers/sort.controller.js

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseTableController } from './base.controller.js';
+/**
+ * Sort controller manages column sorting logic
+ */
+export class TableSortController extends BaseTableController {
+    /**
+     * Handle column sort order change
+     */
+    handleSortOrderChange(index) {
+        try {
+            if (index !== this.host.sortAttribute.index) {
+                this.host.sortAttribute.index = index;
+                this.host.sortAttribute.order = "ascending" /* SortOrder.Ascending */;
+            }
+            else {
+                if (this.host.sortAttribute.order === "default" /* SortOrder.Default */) {
+                    this.host.sortAttribute.order = "ascending" /* SortOrder.Ascending */;
+                }
+                else if (this.host.sortAttribute.order === "ascending" /* SortOrder.Ascending */) {
+                    this.host.sortAttribute.order = "descending" /* SortOrder.Descending */;
+                }
+                else {
+                    this.host.sortAttribute.order = "default" /* SortOrder.Default */;
+                }
+            }
+            this.host.sortAttribute = Object.assign({}, this.host.sortAttribute);
+            this.requestUpdate();
+        }
+        catch (error) {
+            this.handleError(error, 'handleSortOrderChange');
+        }
+    }
+    /**
+     * Sort rows based on current sort attribute
+     */
+    sort() {
+        try {
+            if (!this.host.rowsCopy.length) {
+                return;
+            }
+            const sortOrder = this.host.sortAttribute.order === "default" /* SortOrder.Default */
+                ? 0 /* SortValue.Default */
+                : this.host.sortAttribute.order === "ascending" /* SortOrder.Ascending */
+                    ? 1 /* SortValue.Ascending */
+                    : -1 /* SortValue.Descending */;
+            this.host.rowsCopy.sort((a, b) => {
+                const key = this.host.headers[this.host.sortAttribute.index].key;
+                const stringifyA = JSON.stringify(a[key]);
+                const stringifyB = JSON.stringify(b[key]);
+                const result = stringifyA < stringifyB ? -1 : stringifyA > stringifyB ? 1 : 0;
+                return result * sortOrder;
+            });
+            this.dispatchEvent(new CustomEvent('onSort', {
+                bubbles: true,
+                composed: true,
+                detail: { value: this.host.rowsCopy }
+            }));
+            this.requestUpdate();
+        }
+        catch (error) {
+            this.handleError(error, 'sort');
+        }
+    }
+    /**
+     * Reset sort to original row order
+     */
+    resetSort() {
+        try {
+            this.host.rowsCopy.sort((copyA, copyB) => {
+                const positionInOriginalArrayA = this.host.rows.findIndex((originalA) => JSON.stringify(originalA) === JSON.stringify(copyA));
+                const positionInOriginalArrayB = this.host.rows.findIndex((originalB) => JSON.stringify(originalB) === JSON.stringify(copyB));
+                return positionInOriginalArrayA > positionInOriginalArrayB
+                    ? 1 /* SortValue.Ascending */
+                    : positionInOriginalArrayA < positionInOriginalArrayB
+                        ? -1 /* SortValue.Descending */
+                        : 0 /* SortValue.Default */;
+            });
+            this.requestUpdate();
+        }
+        catch (error) {
+            this.handleError(error, 'resetSort');
+        }
+    }
+    /**
+     * Check if sorting is active
+     */
+    isSortActive() {
+        return this.host.sortAttribute.index > -1;
+    }
+    /**
+     * Check if sort order is default
+     */
+    isSortDefault() {
+        return this.host.sortAttribute.order === "default" /* SortOrder.Default */;
+    }
+}
+//# sourceMappingURL=sort.controller.js.map

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

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export type { TableHost, TableBaseController, ErrorHandler } from './table-host.interface.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=index.js.map

package/dist/src/components/table/interfaces/table-host.interface.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { IHeader, SelectionMode, Sizes, SortAttribute } from '../table.types.js';
+/**
+ * Interface for the table host component
+ */
+export interface TableHost {
+    headers: IHeader[];
+    rows: any[];
+    size: Sizes;
+    withFilter: boolean;
+    expandable?: string;
+    selectionMode?: SelectionMode;
+    loading: boolean;
+    emptyText: string;
+    emptyIcon?: string;
+    serverSide: boolean;
+    totalCount: number;
+    itemPerPage: number[];
+    selectedItemPerPage: number;
+    displayedRows: any[];
+    selectedItems: boolean[];
+    currentPage: number;
+    rowsCopy: any[];
+    activeSearch: boolean;
+    sortAttribute: SortAttribute;
+    filterValue: string;
+    columnFilters: Map<string, string | number>;
+    activeFilterColumn: string | null;
+    requestUpdate(): void;
+    dispatchEvent(event: Event): boolean;
+}
+/**
+ * Base controller interface
+ */
+export interface TableBaseController {
+    host: TableHost;
+}
+/**
+ * Error handler interface
+ */
+export interface ErrorHandler {
+    handleError(error: Error, context: string): void;
+}
+//# sourceMappingURL=table-host.interface.d.ts.map

package/dist/src/components/table/interfaces/table-host.interface.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=table-host.interface.js.map

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