@nuraly/lumenui 0.1.0 → 0.2.2

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/table.component.d.ts

@@ -6,7 +6,7 @@
 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;
+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) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Advanced table component with sorting, filtering, pagination, selection, and fixed columns.
  *
@@ -41,6 +41,7 @@ declare const HyTable_base: (new (...args: any[]) => import("@nuralyui/common/mi
  * @fires onSort - Fired when sorting is applied
  */
 export declare class HyTable extends HyTable_base implements TableHost {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     headers: IHeader[];
     rows: any[];

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

@@ -335,6 +335,7 @@ let HyTable = class HyTable extends NuralyUIBaseMixin(LitElement) {
     `;
     }
 };
+HyTable.useShadowDom = true;
 HyTable.styles = styles;
 __decorate([
     property({ type: Array })

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

@@ -3,9 +3,9 @@ export default css `
   :host {
     display: block;
     width: 100%;
-    font-family: var(--nuraly-font-family, Arial, sans-serif);
-    color: var(--nuraly-color-text);
-    background-color: var(--nuraly-color-background);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    color: #161616;
+    background-color: #ffffff;
   }
 
   /* Filter Container Styles */
@@ -13,7 +13,7 @@ export default css `
     display: flex;
     justify-content: flex-end;
     width: 100%;
-    padding: var(--nuraly-spacing-2, 0.5rem) 0;
+    padding: 0.5rem 0;
     position: relative;
     margin-bottom: 5px;
   }
@@ -23,13 +23,13 @@ export default css `
     padding-left: 30px;
     width: 100%;
     box-sizing: border-box;
-    background-color: var(--nuraly-table-filter-background, #ffffff);
-    color: var(--nuraly-table-filter-text, #000000);
+    background-color: #ffffff;
+    color: #000000;
   }
 
   .filter-container input:focus {
     outline-style: none;
-    border: 1px solid var(--nuraly-table-filter-border, #1890ff);
+    border: 1px solid #1890ff;
   }
 
   .filter-container .icon-container {
@@ -49,12 +49,12 @@ export default css `
 
   /* Actions Bar Styles */
   .actions-container {
-    background-color: var(--nuraly-table-action-color, #0f62fe);
+    background-color: #0f62fe;
     padding: 10px;
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
-    color: var(--nuraly-table-background, #ffffff);
+    color: #ffffff;
   }
 
   /* Fixed Header Styles */
@@ -69,26 +69,26 @@ export default css `
   }
 
   .table-content-wrapper.fixed-header thead {
-    background-color: var(--nuraly-table-header-background, #fafafa);
+    background-color: #fafafa;
   }
 
   .table-content-wrapper.fixed-header thead th {
     position: sticky;
     top: 0;
     z-index: 10;
-    background-color: var(--nuraly-table-header-background, #fafafa);
-    border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);
+    background-color: #fafafa;
+    border-bottom: 1px solid #f0f0f0;
   }
 
   .table-content-wrapper.fixed-header thead tr {
-    box-shadow: 0 1px 0 0 var(--nuraly-table-row-border-color, #f0f0f0);
+    box-shadow: 0 1px 0 0 #f0f0f0;
   }
 
   .actions-container button {
     cursor: pointer;
     border: none;
-    color: var(--nuraly-table-background, #ffffff);
-    background-color: var(--nuraly-table-action-color, #0f62fe);
+    color: #ffffff;
+    background-color: #0f62fe;
   }
 
   .actions-container[data-size='small'] {
@@ -110,8 +110,8 @@ export default css `
   input[type='checkbox'][data-indeterminate='true']::after {
     width: 13px;
     height: 13px;
-    background-color: var(--nuraly-table-checkbox-checked, #161616);
-    color: var(--nuraly-table-background, #ffffff);
+    background-color: #161616;
+    color: #ffffff;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -122,20 +122,20 @@ export default css `
   table {
     width: 100%;
     border-spacing: 0px;
-    color: var(--nuraly-table-text-color);
+    color: #161616;
   }
 
   td {
     text-align: center;
-    border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);
-    padding: var(--nuraly-table-cell-padding, 10px);
-    font-size: var(--nuraly-table-font-size, 14px);
+    border-bottom: 1px solid #f0f0f0;
+    padding: 10px;
+    font-size: 14px;
   }
 
   th {
     cursor: pointer;
-    padding: var(--nuraly-table-cell-padding, 10px);
-    font-size: var(--nuraly-table-font-size, 14px);
+    padding: 10px;
+    font-size: 14px;
   }
 
   th span {
@@ -148,15 +148,15 @@ export default css `
     display: flex;
     justify-content: center;
     align-items: center;
-    --nuraly-icon-color: var(--nuraly-table-text-color);
+    --nuraly-icon-color: #161616;
   }
 
   tbody tr {
-    background-color: var(--nuraly-table-row-background, #ffffff);
+    background-color: #ffffff;
   }
 
   tbody tr:hover {
-    background-color: var(--nuraly-table-row-hover-background, #f5f5f5);
+    background-color: #f5f5f5;
   }
 
   tbody tr.clickable {
@@ -164,29 +164,29 @@ export default css `
   }
 
   thead tr {
-    background-color: var(--nuraly-table-header-background, #fafafa);
+    background-color: #fafafa;
   }
 
   tbody tr:has(input:checked) {
-    background-color: var(--nuraly-table-row-selected-background, #e6f7ff);
+    background-color: #e6f7ff;
   }
 
   input,
   .expand-icon {
     cursor: pointer;
-    accent-color: var(--nuraly-table-checkbox-checked, #1890ff);
+    accent-color: #1890ff;
   }
 
   /* Size Variants for Table Content */
   :host([size='small']) td,
   :host([size='small']) th {
-    padding: var(--nuraly-table-cell-padding, 8px 16px);
+    padding: 8px 16px;
     font-size: 12px;
   }
 
   :host([size='large']) td,
   :host([size='large']) th {
-    padding: var(--nuraly-table-cell-padding, 15px);
+    padding: 15px;
     font-size: 16px;
   }
 
@@ -195,8 +195,8 @@ export default css `
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: var(--nuraly-pagination-background-color);
-    color: var(--nuraly-pagination-text-color);
+    background-color: #ffffff;
+    color: #161616;
   }
 
   .pagination-container .left-content {
@@ -205,7 +205,7 @@ export default css `
   }
 
   .pagination-container .left-content .items-details {
-    border-left: var(--nuraly-pagination-borders);
+    border-left: 1px solid #e0e0e0;
     padding: 10px;
   }
 
@@ -217,29 +217,29 @@ export default css `
   }
 
   .pagination-container .left-content .select-details label {
-    font-size: var(--nuraly-font-size-input, 14px);
-    color: var(--nuraly-table-pagination-text, #000000);
+    font-size: 14px;
+    color: #000000;
     white-space: nowrap;
   }
 
   .pagination-container .left-content .select-details nr-select {
     min-width: 60px;
     max-width: 80px;
-    --select-border-color: var(--nuraly-table-border-color, #d9d9d9);
-    --select-background: var(--nuraly-table-pagination-background, #fafafa);
-    --select-text-color: var(--nuraly-table-pagination-text, #000000);
+    --select-border-color: #d9d9d9;
+    --select-background: #fafafa;
+    --select-text-color: #000000;
   }
 
   .pagination-container .right-content {
     display: flex;
     align-items: center;
-    border-left: var(--nuraly-pagination-borders);
+    border-left: 1px solid #e0e0e0;
   }
 
   .pagination-container .right-content .icon-container {
     display: flex;
     align-items: center;
-    border-left: var(--nuraly-pagination-borders);
+    border-left: 1px solid #e0e0e0;
   }
 
   .pagination-container .right-content .page-details {
@@ -249,11 +249,11 @@ export default css `
   .pagination-container .icon-container .left-arrow,
   .pagination-container .icon-container .right-arrow {
     padding: 10px;
-    --nuraly-icon-color: var(--nuraly-pagination-text-color);
+    --nuraly-icon-color: #161616;
   }
 
   .pagination-container .icon-container .left-arrow {
-    border-right: var(--nuraly-pagination-borders);
+    border-right: 1px solid #e0e0e0;
   }
 
   .pagination-container nr-icon[data-enabled='false'] {
@@ -340,7 +340,7 @@ export default css `
   }
 
   .filter-trigger:hover {
-    background-color: var(--nuraly-table-filter-hover, rgba(0, 0, 0, 0.04));
+    background-color: rgba(0, 0, 0, 0.04);
   }
 
   .filter-icon {
@@ -351,7 +351,7 @@ export default css `
   }
 
   .filter-icon.has-filter {
-    color: var(--nuraly-table-filter-active, #1890ff);
+    color: #1890ff;
   }
 
   .filter-indicator {
@@ -361,15 +361,15 @@ export default css `
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background-color: var(--nuraly-table-filter-active, #1890ff);
+    background-color: #1890ff;
   }
 
   .column-filter-dropdown {
     position: absolute;
     top: calc(100% + 4px);
     right: 0;
-    background: var(--nuraly-table-background, #ffffff);
-    border: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);
+    background: #ffffff;
+    border: 1px solid #f0f0f0;
     border-radius: 4px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     z-index: 100;
@@ -385,7 +385,7 @@ export default css `
 
   .column-filter-input {
     padding: 8px;
-    border: 1px solid var(--nuraly-table-row-border-color, #d9d9d9);
+    border: 1px solid #d9d9d9;
     border-radius: 4px;
     font-size: 14px;
     width: 100%;
@@ -394,7 +394,7 @@ export default css `
 
   .column-filter-input:focus {
     outline: none;
-    border-color: var(--nuraly-table-filter-active, #1890ff);
+    border-color: #1890ff;
     box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
   }
 
@@ -406,58 +406,58 @@ export default css `
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--nuraly-table-text-color, #000);
+    color: #000;
     align-self: flex-end;
   }
 
   .column-filter-clear:hover {
-    color: var(--nuraly-table-filter-active, #1890ff);
+    color: #1890ff;
   }
 
   /* Fixed Columns Styles */
   th.fixed-column,
   td.fixed-column {
     position: sticky;
-    background-color: var(--nuraly-table-row-background, #ffffff);
+    background-color: #ffffff;
   }
 
   /* Fixed columns in header - highest priority */
   thead th.fixed-column {
     z-index: 20;
-    background-color: var(--nuraly-table-header-background, #fafafa);
+    background-color: #fafafa;
   }
 
   /* When table has fixed header, fixed columns in header need even higher z-index */
   .table-content-wrapper.fixed-header thead th.fixed-column {
     z-index: 25;
-    background-color: var(--nuraly-table-header-background, #fafafa);
+    background-color: #fafafa;
   }
 
   /* Fixed columns in body */
   tbody td.fixed-column {
     z-index: 8;
-    background-color: var(--nuraly-table-row-background, #ffffff);
+    background-color: #ffffff;
   }
 
   /* Ensure fixed columns in tbody have proper background */
   tbody tr td.fixed-column {
-    background-color: var(--nuraly-table-row-background, #ffffff);
+    background-color: #ffffff;
   }
 
   tbody tr:hover td.fixed-column {
-    background-color: var(--nuraly-table-row-hover-background, #f5f5f5);
+    background-color: #f5f5f5;
   }
 
   th.fixed-column-left,
   td.fixed-column-left {
     left: 0;
-    border-right: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);
+    border-right: 1px solid #f0f0f0;
   }
 
   th.fixed-column-right,
   td.fixed-column-right {
     right: 0;
-    border-left: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);
+    border-left: 1px solid #f0f0f0;
   }
 
   /* Shadow effect for fixed columns */
@@ -507,8 +507,8 @@ export default css `
   }
 
   .skeleton-cell {
-    padding: var(--nuraly-spacing-3, 0.75rem) var(--nuraly-spacing-4, 1rem);
-    border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid #f0f0f0;
   }
 
   .skeleton-cell.selection-skeleton {
@@ -555,27 +555,27 @@ export default css `
 
   /* Spinner Loading */
   .loading-row {
-    background-color: var(--nuraly-table-row-background, #ffffff);
+    background-color: #ffffff;
   }
 
   .loading-cell {
-    padding: var(--nuraly-spacing-8, 2rem) var(--nuraly-spacing-4, 1rem);
+    padding: 2rem 1rem;
     text-align: center;
-    border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);
+    border-bottom: 1px solid #f0f0f0;
   }
 
   .loading-spinner-container {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--nuraly-spacing-4, 1rem);
+    gap: 1rem;
   }
 
   .loading-spinner {
     width: 40px;
     height: 40px;
-    border: 4px solid var(--nuraly-table-border-color, #f0f0f0);
-    border-top-color: var(--nuraly-color-primary, #1890ff);
+    border: 4px solid #f0f0f0;
+    border-top-color: #7c3aed;
     border-radius: 50%;
     animation: spinner-rotate 0.8s linear infinite;
   }
@@ -591,23 +591,23 @@ export default css `
 
   .loading-text {
     margin: 0;
-    color: var(--nuraly-color-text-secondary, #666666);
+    color: #525252;
     font-size: 14px;
   }
 
   /* Empty State Styles */
   .empty-row {
-    background: var(--nuraly-table-row-bg-color, #ffffff);
+    background: #ffffff;
   }
 
   .empty-row:hover {
-    background: var(--nuraly-table-row-bg-color, #ffffff);
+    background: #ffffff;
   }
 
   .empty-cell {
     padding: 64px 24px;
     text-align: center;
-    border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);
+    border-bottom: 1px solid #f0f0f0;
   }
 
   .empty-state {
@@ -620,7 +620,7 @@ export default css `
   .empty-icon {
     width: 64px;
     height: 64px;
-    color: var(--nuraly-color-text-quaternary, #bfbfbf);
+    color: #bfbfbf;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -637,7 +637,7 @@ export default css `
 
   .empty-text {
     margin: 0;
-    color: var(--nuraly-color-text-secondary, #666666);
+    color: #525252;
     font-size: 14px;
     line-height: 1.5;
   }
@@ -651,12 +651,12 @@ export default css `
   }
 
   .expand-icon:hover {
-    background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);
+    background-color: #f5f5f5;
   }
 
   .expand-icon:focus {
-    background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);
-    box-shadow: inset 0 0 0 2px var(--nuraly-color-primary, #1890ff);
+    background-color: #f5f5f5;
+    box-shadow: inset 0 0 0 2px #7c3aed;
   }
 
   .expand-icon nr-icon {
@@ -684,8 +684,8 @@ export default css `
 
   .expansion-content {
     padding: 16px;
-    background-color: var(--nuraly-color-fill-quaternary, #fafafa);
-    border-top: 1px solid var(--nuraly-color-border, #d9d9d9);
+    background-color: #fafafa;
+    border-top: 1px solid #e0e0e0;
   }
 
   @keyframes slideDown {