@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,2 @@
+export * from './table.component.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,2 @@
+export * from './table.component.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/table/react.d.ts

@@ -0,0 +1,7 @@
+import { HyTable } from './table.component.js';
+export declare const HyTableComponent: import("@lit-labs/react").ReactWebComponent<HyTable, {
+    rowClick: string;
+    sortChange: string;
+    selectionChange: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/table/react.js

@@ -0,0 +1,14 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { HyTable } from './table.component.js';
+export const HyTableComponent = createComponent({
+    tagName: 'nr-table',
+    elementClass: HyTable,
+    react: React,
+    events: {
+        rowClick: 'row-click',
+        sortChange: 'sort-change',
+        selectionChange: 'nr-select',
+    },
+});
+//# sourceMappingURL=react.js.map

package/dist/src/components/table/table.component.d.ts

@@ -0,0 +1,140 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, PropertyValueMap } from 'lit';
+import { IHeader, SelectionMode, Sizes, SortAttribute } from './table.types.js';
+import { TableHost } from './interfaces/index.js';
+declare const HyTable_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * Advanced table component with sorting, filtering, pagination, selection, and fixed columns.
+ *
+ * @example
+ * ```html
+ * <!-- Basic table with fixed header -->
+ * <nr-table
+ *   .headers=${headers}
+ *   .rows=${data}
+ *   size="normal"
+ *   selectionMode="multiple"
+ *   fixedHeader
+ *   .scrollConfig=${{ y: 400 }}>
+ * </nr-table>
+ *
+ * <!-- Table with fixed columns -->
+ * <nr-table
+ *   .headers=${[
+ *     { name: 'ID', key: 'id', fixed: 'left', width: 80 },
+ *     { name: 'Name', key: 'name', fixed: 'left', width: 150 },
+ *     { name: 'Email', key: 'email' },
+ *     { name: 'Status', key: 'status' }
+ *   ]}
+ *   .rows=${data}
+ *   .scrollConfig=${{ x: 800 }}>
+ * </nr-table>
+ * ```
+ *
+ * @fires onPaginate - Fired when pagination changes
+ * @fires nr-select - Fired when row selection changes
+ * @fires onSearch - Fired when search/filter is applied
+ * @fires onSort - Fired when sorting is applied
+ */
+export declare class HyTable extends HyTable_base implements TableHost {
+    static styles: import("lit").CSSResult;
+    headers: IHeader[];
+    rows: any[];
+    size: Sizes;
+    withFilter: boolean;
+    expandable: string | undefined;
+    expansionRenderer: ((row: any, index: number) => any) | undefined;
+    selectionMode: SelectionMode | undefined;
+    fixedHeader: boolean;
+    scrollConfig: {
+        x?: number | string;
+        y?: number | string;
+    } | undefined;
+    loading: boolean;
+    emptyText: string;
+    emptyIcon: string | undefined;
+    serverSide: boolean;
+    totalCount: number;
+    clickable: boolean;
+    pageSize: number;
+    itemPerPage: number[];
+    selectedItemPerPage: number;
+    displayedRows: any[];
+    selectedItems: boolean[];
+    currentPage: number;
+    rowsCopy: any[];
+    activeSearch: boolean;
+    sortAttribute: SortAttribute;
+    expand: boolean[];
+    showFilterInput: boolean;
+    filterValue: string;
+    columnFilters: Map<string, string | number>;
+    activeFilterColumn: string | null;
+    globalCheck?: HTMLElement;
+    requiredComponents: string[];
+    private selectionController;
+    private paginationController;
+    private sortController;
+    private filterController;
+    connectedCallback(): void;
+    updated(_changedProperties: PropertyValueMap<this> | Map<PropertyKey, unknown>): void;
+    willUpdate(_changedProperties: PropertyValueMap<this>): void;
+    /**
+     * Initialize or reset pagination state
+     */
+    private _initPagination;
+    /**
+     * Handle items per page change event
+     */
+    _handleItemPerPage(itemPerPageEvent: CustomEvent): void;
+    /**
+     * Handle page navigation event
+     */
+    _handleUpdatePage(updatePageEvent: CustomEvent): void;
+    /**
+     * Handle check all rows event
+     */
+    _handleCheckAll(checkAllEvent: CustomEvent): void;
+    /**
+     * Handle check single row event
+     */
+    _handleCheckOne(checkOneEvent: CustomEvent): void;
+    /**
+     * Handle select single row event (radio button mode)
+     */
+    _handleSelectOne(selectOneEvent: CustomEvent): void;
+    /**
+     * Handle cancel selection action
+     */
+    _handleCancelSelection(): void;
+    /**
+     * Handle search/filter input
+     */
+    _handleSearch(searchEvent: CustomEvent): void;
+    /**
+     * Handle column sort order change
+     */
+    _handleSortOrder(sortOrderEvent: CustomEvent): void;
+    /**
+     * Toggle expanded content for a row
+     */
+    private _showExpandedContent;
+    /**
+     * Toggle filter input visibility
+     */
+    private _toggleFilterInput;
+    /**
+     * Handle filter input change
+     */
+    private _handleFilterInputChange;
+    /**
+     * Render the table component with all templates
+     */
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=table.component.d.ts.map

package/dist/src/components/table/table.component.js

@@ -0,0 +1,433 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import styles from './table.style.js';
+import { EMPTY_STRING } from './table.types.js';
+// Import controllers
+import { TableSelectionController, TablePaginationController, TableSortController, TableFilterController } from './controllers/index.js';
+// Import templates
+import { renderPaginationTemplate, renderContentTemplate, renderActionsTemplate, renderFilterTemplate } from './templates/index.js';
+/**
+ * Advanced table component with sorting, filtering, pagination, selection, and fixed columns.
+ *
+ * @example
+ * ```html
+ * <!-- Basic table with fixed header -->
+ * <nr-table
+ *   .headers=${headers}
+ *   .rows=${data}
+ *   size="normal"
+ *   selectionMode="multiple"
+ *   fixedHeader
+ *   .scrollConfig=${{ y: 400 }}>
+ * </nr-table>
+ *
+ * <!-- Table with fixed columns -->
+ * <nr-table
+ *   .headers=${[
+ *     { name: 'ID', key: 'id', fixed: 'left', width: 80 },
+ *     { name: 'Name', key: 'name', fixed: 'left', width: 150 },
+ *     { name: 'Email', key: 'email' },
+ *     { name: 'Status', key: 'status' }
+ *   ]}
+ *   .rows=${data}
+ *   .scrollConfig=${{ x: 800 }}>
+ * </nr-table>
+ * ```
+ *
+ * @fires onPaginate - Fired when pagination changes
+ * @fires nr-select - Fired when row selection changes
+ * @fires onSearch - Fired when search/filter is applied
+ * @fires onSort - Fired when sorting is applied
+ */
+let HyTable = class HyTable extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.rows = [];
+        this.size = "normal" /* Sizes.Normal */;
+        this.withFilter = false;
+        this.fixedHeader = false;
+        this.loading = false;
+        this.emptyText = 'No data available';
+        this.serverSide = false;
+        this.totalCount = 0;
+        this.clickable = false;
+        this.pageSize = 5;
+        this.itemPerPage = [5, 10, 15, 20];
+        this.selectedItemPerPage = 5;
+        this.displayedRows = [];
+        this.selectedItems = [];
+        this.rowsCopy = [];
+        this.activeSearch = false;
+        this.sortAttribute = { index: -1, order: "default" /* SortOrder.Default */ };
+        this.expand = [];
+        this.showFilterInput = false;
+        this.filterValue = EMPTY_STRING;
+        this.columnFilters = new Map();
+        this.activeFilterColumn = null;
+        this.requiredComponents = ['nr-select', 'nr-icon', 'nr-checkbox', 'nr-radio'];
+        // Controllers
+        this.selectionController = new TableSelectionController(this);
+        this.paginationController = new TablePaginationController(this);
+        this.sortController = new TableSortController(this);
+        this.filterController = new TableFilterController(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.selectionController.initSelection();
+        // Initialize selectedItemPerPage from pageSize property
+        if (this.pageSize && this.itemPerPage.includes(this.pageSize)) {
+            this.selectedItemPerPage = this.pageSize;
+        }
+    }
+    updated(_changedProperties) {
+        var _a, _b;
+        if (this.globalCheck && (_changedProperties.has('selectedItems') || _changedProperties.has('currentPage') || _changedProperties.has('displayedRows'))) {
+            const checkbox = this.globalCheck;
+            // Get the selection state for the current page only
+            const startIndex = (this.currentPage - 1) * this.selectedItemPerPage;
+            const endIndex = Math.min(startIndex + this.displayedRows.length, this.selectedItems.length);
+            const currentPageSelections = this.selectedItems.slice(startIndex, endIndex);
+            if (currentPageSelections.length > 0 && currentPageSelections.every((isSelected) => isSelected)) {
+                checkbox.checked = true;
+                checkbox.indeterminate = false;
+            }
+            else if (currentPageSelections.some((isSelected) => isSelected)) {
+                checkbox.checked = false;
+                checkbox.indeterminate = true;
+            }
+            else {
+                checkbox.checked = false;
+                checkbox.indeterminate = false;
+            }
+        }
+        if (this.showFilterInput && _changedProperties.has('showFilterInput')) {
+            (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    willUpdate(_changedProperties) {
+        if (_changedProperties.has('rows')) {
+            this.expand = new Array(this.rows.length).fill(false);
+        }
+        // Server-side pagination: rows are already paginated from backend
+        if (this.serverSide) {
+            if (_changedProperties.has('rows')) {
+                this.displayedRows = [...this.rows];
+                // Initialize currentPage on first data load
+                if (!this.currentPage && this.rows.length > 0) {
+                    this.currentPage = 1;
+                }
+            }
+            return;
+        }
+        // Client-side pagination logic
+        if (_changedProperties.has('sortAttribute') && this.sortController.isSortActive()) {
+            this._initPagination();
+            this.selectionController.initSelection();
+        }
+        if (_changedProperties.has('rowsCopy')) {
+            if (this.filterController.isSearchActive()) {
+                this._initPagination();
+            }
+        }
+        if (_changedProperties.has('activeSearch') || _changedProperties.has('rows')) {
+            if (!this.filterController.isSearchActive()) {
+                this.rowsCopy = [...this.rows];
+                this._initPagination();
+            }
+        }
+    }
+    /**
+     * Initialize or reset pagination state
+     */
+    _initPagination() {
+        if (this.sortController.isSortActive()) {
+            if (!this.sortController.isSortDefault()) {
+                this.sortController.sort();
+            }
+            else {
+                this.sortController.resetSort();
+            }
+        }
+        this.paginationController.initPagination();
+    }
+    /**
+     * Handle items per page change event
+     */
+    _handleItemPerPage(itemPerPageEvent) {
+        const value = itemPerPageEvent.detail.value || itemPerPageEvent.detail.selectedItemPerPage;
+        this.paginationController.handleItemPerPageChange(Number(value));
+    }
+    /**
+     * Handle page navigation event
+     */
+    _handleUpdatePage(updatePageEvent) {
+        this.paginationController.handlePageChange(updatePageEvent.detail.page);
+    }
+    /**
+     * Handle check all rows event
+     */
+    _handleCheckAll(checkAllEvent) {
+        this.selectionController.handleCheckAll(checkAllEvent.detail.isEveryItemChecked);
+    }
+    /**
+     * Handle check single row event
+     */
+    _handleCheckOne(checkOneEvent) {
+        this.selectionController.handleCheckOne(checkOneEvent.detail.index, checkOneEvent.detail.value);
+    }
+    /**
+     * Handle select single row event (radio button mode)
+     */
+    _handleSelectOne(selectOneEvent) {
+        this.selectionController.handleSelectOne(selectOneEvent.detail.index);
+    }
+    /**
+     * Handle cancel selection action
+     */
+    _handleCancelSelection() {
+        this.selectionController.cancelSelection();
+    }
+    /**
+     * Handle search/filter input
+     */
+    _handleSearch(searchEvent) {
+        this.filterController.handleSearch(searchEvent.detail.value);
+    }
+    /**
+     * Handle column sort order change
+     */
+    _handleSortOrder(sortOrderEvent) {
+        this.sortController.handleSortOrderChange(sortOrderEvent.detail.index);
+    }
+    /**
+     * Toggle expanded content for a row
+     */
+    _showExpandedContent(index) {
+        this.expand[index] = !this.expand[index];
+        this.requestUpdate();
+    }
+    /**
+     * Toggle filter input visibility
+     */
+    _toggleFilterInput() {
+        this.showFilterInput = !this.showFilterInput;
+    }
+    /**
+     * Handle filter input change
+     */
+    _handleFilterInputChange(event) {
+        this.filterValue = event.target.value;
+        this.filterController.handleSearch(this.filterValue);
+    }
+    /**
+     * Render the table component with all templates
+     */
+    render() {
+        var _a, _b;
+        const totalItems = this.serverSide ? this.totalCount : this.rowsCopy.length;
+        const numberOfPages = Math.ceil(totalItems / this.selectedItemPerPage);
+        const fromItem = this.currentPage > 0
+            ? this.currentPage * this.selectedItemPerPage - this.selectedItemPerPage + 1
+            : 0;
+        const toItem = this.currentPage * this.selectedItemPerPage <= totalItems
+            ? this.currentPage * this.selectedItemPerPage
+            : totalItems;
+        const enableNext = toItem < totalItems;
+        const enablePrevious = fromItem > 1;
+        return html `
+      ${this.selectionMode && !this.withFilter && this.selectionController.hasSelection()
+            ? renderActionsTemplate({
+                selectedItems: this.selectionController.getSelectedCount(),
+                size: this.size,
+                onCancelSelection: () => this._handleCancelSelection()
+            })
+            : this.withFilter
+                ? html `
+            <div class="filter-container">
+              ${renderFilterTemplate({
+                    showInput: this.showFilterInput,
+                    value: this.filterValue,
+                    onToggleInput: () => this._toggleFilterInput(),
+                    onChange: (e) => this._handleFilterInputChange(e)
+                })}
+            </div>
+          `
+                : nothing}
+
+      <div class="table-content-wrapper ${this.fixedHeader ? 'fixed-header' : ''}" 
+           style="${((_a = this.scrollConfig) === null || _a === void 0 ? void 0 : _a.y) ? `${this.fixedHeader ? 'height' : 'max-height'}: ${typeof this.scrollConfig.y === 'number' ? this.scrollConfig.y + 'px' : this.scrollConfig.y};` : ''}
+                  ${((_b = this.scrollConfig) === null || _b === void 0 ? void 0 : _b.x) ? `${this.fixedHeader ? 'width' : 'max-width'}: ${typeof this.scrollConfig.x === 'number' ? this.scrollConfig.x + 'px' : this.scrollConfig.x};` : ''}">
+        ${renderContentTemplate({
+            headers: this.headers,
+            rows: this.displayedRows,
+            expandable: this.expandable && !this.selectionMode ? this.expandable : undefined,
+            expansionRenderer: !this.selectionMode ? this.expansionRenderer : undefined,
+            selectionMode: this.selectionMode && !this.withFilter ? this.selectionMode : undefined,
+            selectedItems: this.selectedItems,
+            currentPage: this.currentPage,
+            itemPerPage: this.selectedItemPerPage,
+            sortAttribute: this.sortAttribute,
+            expand: this.expand,
+            columnFilters: this.columnFilters,
+            activeFilterColumn: this.activeFilterColumn,
+            loading: this.loading,
+            host: this,
+            clickable: this.clickable,
+            onCheckAll: () => {
+                const startIndex = (this.currentPage - 1) * this.selectedItemPerPage;
+                const endIndex = Math.min(startIndex + this.selectedItemPerPage, this.selectedItems.length);
+                const currentPageItems = this.selectedItems.slice(startIndex, endIndex);
+                const isEveryItemChecked = currentPageItems.every(i => i) && currentPageItems.length > 0;
+                this._handleCheckAll({ detail: { isEveryItemChecked } });
+            },
+            onCheckOne: (e, index) => this._handleCheckOne({ detail: { index, value: e.detail.checked } }),
+            onSelectOne: (index) => this._handleSelectOne({ detail: { index } }),
+            onUpdateSort: (index) => this._handleSortOrder({ detail: { index } }),
+            onShowExpandedContent: (index) => this._showExpandedContent(index),
+            onToggleColumnFilter: (columnKey) => this.filterController.toggleColumnFilterDropdown(columnKey),
+            onApplyColumnFilter: (columnKey, value) => this.filterController.applyColumnFilter(columnKey, value),
+            onClearColumnFilter: (columnKey) => this.filterController.clearColumnFilter(columnKey),
+            onRowClick: (row, index) => {
+                if (this.clickable) {
+                    this.dispatchEvent(new CustomEvent('nr-row-click', {
+                        detail: { row, index },
+                        bubbles: true,
+                        composed: true
+                    }));
+                }
+            }
+        })}
+      </div>
+
+      ${renderPaginationTemplate({
+            numberOfItems: totalItems,
+            itemPerPage: this.itemPerPage,
+            selectedItemPerPage: this.selectedItemPerPage,
+            currentPage: this.currentPage,
+            size: this.size,
+            numberOfPages,
+            fromItem,
+            toItem,
+            enableNext,
+            enablePrevious,
+            onItemPerPageChange: (e) => this._handleItemPerPage(e),
+            onNextPage: () => {
+                this.currentPage++;
+                this._handleUpdatePage({ detail: { page: this.currentPage } });
+            },
+            onPreviousPage: () => {
+                this.currentPage--;
+                this._handleUpdatePage({ detail: { page: this.currentPage } });
+            }
+        })}
+    `;
+    }
+};
+HyTable.styles = styles;
+__decorate([
+    property({ type: Array })
+], HyTable.prototype, "headers", void 0);
+__decorate([
+    property({ type: Array })
+], HyTable.prototype, "rows", void 0);
+__decorate([
+    property({ type: String })
+], HyTable.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyTable.prototype, "withFilter", void 0);
+__decorate([
+    property({ type: String })
+], HyTable.prototype, "expandable", void 0);
+__decorate([
+    property({ attribute: false })
+], HyTable.prototype, "expansionRenderer", void 0);
+__decorate([
+    property({ type: String })
+], HyTable.prototype, "selectionMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyTable.prototype, "fixedHeader", void 0);
+__decorate([
+    property({ type: Object })
+], HyTable.prototype, "scrollConfig", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyTable.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], HyTable.prototype, "emptyText", void 0);
+__decorate([
+    property({ type: String })
+], HyTable.prototype, "emptyIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyTable.prototype, "serverSide", void 0);
+__decorate([
+    property({ type: Number })
+], HyTable.prototype, "totalCount", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyTable.prototype, "clickable", void 0);
+__decorate([
+    property({ type: Number })
+], HyTable.prototype, "pageSize", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "itemPerPage", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "selectedItemPerPage", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "displayedRows", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "selectedItems", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "currentPage", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "rowsCopy", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "activeSearch", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "sortAttribute", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "expand", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "showFilterInput", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "filterValue", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "columnFilters", void 0);
+__decorate([
+    state()
+], HyTable.prototype, "activeFilterColumn", void 0);
+__decorate([
+    query('#global-check')
+], HyTable.prototype, "globalCheck", void 0);
+HyTable = __decorate([
+    customElement('nr-table')
+], HyTable);
+export { HyTable };
+//# sourceMappingURL=table.component.js.map

package/dist/src/components/table/table.style.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=table.style.d.ts.map