@aquera/nile-elements 0.1.72 → 0.1.73-beta-1.4

package/dist/src/nile-virtual-table-body/nile-virtual-table-body.js

@@ -0,0 +1,135 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, } from 'lit';
+import { customElement, query, state, property } from 'lit/decorators.js';
+import { styles } from './nile-virtual-table-body.css';
+import NileElement from '../internal/nile-element';
+import { hasResizableColumns } from '../internal/resizable-table-helper';
+import { VirtualTableBodyRenderer } from './renderer.js';
+import { watch } from '../internal/watch';
+/**
+ * nile-virtual-table-body component.
+ *
+ * @tag nile-virtual-table-body
+ *
+ */
+let NileVirtualTableBody = class NileVirtualTableBody extends NileElement {
+    constructor() {
+        /**
+         * The styles for VirtualTableBody
+         * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+         */
+        super(...arguments);
+        this.type = 'primary';
+        /**
+         * Array of all table row data for virtual scrolling.
+         * Each row should be an object with a 'cells' property containing an array of cell data.
+         * Example: [{ cells: [{ content: 'Cell 1' }, { content: 'Cell 2' }] }]
+         */
+        this.data = [];
+        this.rows_data = [];
+        this.header_rows_data = [];
+        this.hasResizableColumns = false;
+        /* #endregion */
+    }
+    static get styles() {
+        return [styles];
+    }
+    firstUpdated(_changedProperties) {
+        this.emit('nile-body-load', { value: this.type, comp: this }, true, false);
+    }
+    /* #endregion */
+    /* #region Methods */
+    getChildren(child, tagname) {
+        return child.querySelectorAll(tagname);
+    }
+    getIndexValue(index__value) {
+        return this.header_rows_data.indexOf(index__value);
+    }
+    checkForResizableColumns() {
+        this.hasResizableColumns = hasResizableColumns(this);
+    }
+    handleSlotchange(e) {
+        // For virtual table body, we primarily use the data property
+        // Slot change is mainly for header content
+        this.checkForResizableColumns();
+    }
+    handleSort(e) {
+        const { curr_sort_string, order } = e.detail.value;
+        const header_index = this.getIndexValue(curr_sort_string);
+        this.emit('nile-sort', {
+            value: { header_index, curr_sort_string, order },
+        });
+    }
+    handleSearch(e) {
+        const searchText = e.detail.value;
+        this.search__index = this.getIndexValue(e.target.textContent);
+        this.emit('nile-table-search', {
+            index: this.search__index,
+            value: searchText,
+        });
+    }
+    render() {
+        return html `
+      <div class="base" part="base">
+        <slot name="table__header" class="table__header"></slot>
+        <div
+          class="nile__table__body"
+          ?resizable=${this.hasResizableColumns}
+          @nile-click-sort=${this.handleSort}
+          @nile-search=${this.handleSearch}
+        >
+          <slot
+            @slotchange=${this.handleSlotchange}
+            name="table__body"
+          ></slot>
+          ${this.getVirtualizedContent()}
+        </div>
+      </div>
+    `;
+    }
+    getVirtualizedContent() {
+        return VirtualTableBodyRenderer.getVirtualizedContent(this.data, this.hasResizableColumns);
+    }
+    handleDataChange() {
+        this.requestUpdate();
+    }
+};
+__decorate([
+    query('slot')
+], NileVirtualTableBody.prototype, "defaultSlot", void 0);
+__decorate([
+    property()
+], NileVirtualTableBody.prototype, "type", void 0);
+__decorate([
+    property({ type: Array })
+], NileVirtualTableBody.prototype, "data", void 0);
+__decorate([
+    state()
+], NileVirtualTableBody.prototype, "rows_data", void 0);
+__decorate([
+    state()
+], NileVirtualTableBody.prototype, "header_rows_data", void 0);
+__decorate([
+    state()
+], NileVirtualTableBody.prototype, "sort__index", void 0);
+__decorate([
+    state()
+], NileVirtualTableBody.prototype, "search__index", void 0);
+__decorate([
+    state()
+], NileVirtualTableBody.prototype, "hasResizableColumns", void 0);
+__decorate([
+    watch('data', { waitUntilFirstUpdate: true })
+], NileVirtualTableBody.prototype, "handleDataChange", null);
+NileVirtualTableBody = __decorate([
+    customElement('nile-virtual-table-body')
+], NileVirtualTableBody);
+export { NileVirtualTableBody };
+export default NileVirtualTableBody;
+//# sourceMappingURL=nile-virtual-table-body.js.map

package/dist/src/nile-virtual-table-body/nile-virtual-table-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-virtual-table-body.js","sourceRoot":"","sources":["../../../src/nile-virtual-table-body/nile-virtual-table-body.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport {\n  customElement,\n  query,\n  state,\n  property\n} from 'lit/decorators.js';\nimport { styles } from './nile-virtual-table-body.css';\nimport NileElement from '../internal/nile-element';\nimport { getInnerHTML } from '../slot';\nimport { hasResizableColumns } from '../internal/resizable-table-helper';\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\nimport { VirtualTableBodyRenderer } from './renderer.js';\nimport { watch } from '../internal/watch';\n\n/**\n * nile-virtual-table-body component.\n *\n * @tag nile-virtual-table-body\n *\n */\n@customElement('nile-virtual-table-body')\nexport class NileVirtualTableBody extends NileElement {\n  /**\n   * The styles for VirtualTableBody\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n  @property() type: 'primary' | 'secondary' = 'primary';\n\n  /** \n   * Array of all table row data for virtual scrolling.\n   * Each row should be an object with a 'cells' property containing an array of cell data.\n   * Example: [{ cells: [{ content: 'Cell 1' }, { content: 'Cell 2' }] }]\n   */\n  @property({ type: Array }) data: any[] = [];\n\n  @state() private rows_data: any[] = [];\n  @state() private header_rows_data: any[] = [];\n  @state() private sort__index: number;\n  @state() private search__index: number;\n  @state() private hasResizableColumns = false;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    this.emit('nile-body-load', { value: this.type, comp: this }, true, false);\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  private getChildren(child: any, tagname: string) {\n    return child.querySelectorAll(tagname);\n  }\n\n  private getIndexValue(index__value: string): number {\n    return this.header_rows_data.indexOf(index__value);\n  }\n\n  private checkForResizableColumns() {\n    this.hasResizableColumns = hasResizableColumns(this);\n  }\n\n  handleSlotchange(e: any) {\n    // For virtual table body, we primarily use the data property\n    // Slot change is mainly for header content\n    this.checkForResizableColumns();\n  }\n\n  private handleSort(e: any) {\n    const { curr_sort_string, order } = e.detail.value;\n    const header_index = this.getIndexValue(curr_sort_string);\n    this.emit('nile-sort', {\n      value: { header_index, curr_sort_string, order },\n    });\n  }\n\n  private handleSearch(e: any) {\n    const searchText = e.detail.value;\n    this.search__index = this.getIndexValue(e.target.textContent);\n    this.emit('nile-table-search', {\n      index: this.search__index,\n      value: searchText,\n    });\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"base\" part=\"base\">\n        <slot name=\"table__header\" class=\"table__header\"></slot>\n        <div\n          class=\"nile__table__body\"\n          ?resizable=${this.hasResizableColumns}\n          @nile-click-sort=${this.handleSort}\n          @nile-search=${this.handleSearch}\n        >\n          <slot\n            @slotchange=${this.handleSlotchange}\n            name=\"table__body\"\n          ></slot>\n          ${this.getVirtualizedContent()}\n        </div>\n      </div>\n    `;\n  }\n\n  private getVirtualizedContent(): TemplateResult {\n    return VirtualTableBodyRenderer.getVirtualizedContent(\n      this.data,\n      this.hasResizableColumns\n    );\n  }\n\n  @watch('data', { waitUntilFirstUpdate: true })\n  handleDataChange(): void {\n    this.requestUpdate();\n  }\n\n  /* #endregion */\n}\n\nexport default NileVirtualTableBody;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-virtual-table-body': NileVirtualTableBody;\n  }\n}\n"]}

package/dist/src/nile-virtual-table-body/renderer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type TemplateResult } from 'lit';
+export declare class VirtualTableBodyRenderer {
+    static getVirtualizedContent(data: any[], hasResizableColumns: boolean): TemplateResult;
+    static getRowRenderFunction(rowData: any, hasResizableColumns: boolean): TemplateResult;
+    /**
+     * Determines whether to use virtualizer based on dataset size
+     * For small datasets (less than 50 rows), use regular rendering for better performance
+     */
+    private static shouldUseVirtualizer;
+}

package/dist/src/nile-virtual-table-body/renderer.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { html } from 'lit';
+import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
+export class VirtualTableBodyRenderer {
+    static getVirtualizedContent(data, hasResizableColumns) {
+        return html `
+      <div class="virtualized-container">
+        ${VirtualTableBodyRenderer.shouldUseVirtualizer(data)
+            ? html `
+              ${virtualize({
+                items: data,
+                renderItem: (rowData) => VirtualTableBodyRenderer.getRowRenderFunction(rowData, hasResizableColumns),
+                scroller: true,
+            })}
+            `
+            : html `
+              ${data.map((rowData) => VirtualTableBodyRenderer.getRowRenderFunction(rowData, hasResizableColumns))}
+            `}
+      </div>
+    `;
+    }
+    static getRowRenderFunction(rowData, hasResizableColumns) {
+        // Create a table row with cell items based on the data
+        return html `
+      <div class="virtualized-row">
+        <nile-table-row>
+          ${rowData.cells ? rowData.cells.map((cell) => html `
+            <nile-table-cell-item ?resizable=${hasResizableColumns}>
+              ${cell.content || cell}
+            </nile-table-cell-item>
+          `) : ''}
+        </nile-table-row>
+      </div>
+    `;
+    }
+    /**
+     * Determines whether to use virtualizer based on dataset size
+     * For small datasets (less than 50 rows), use regular rendering for better performance
+     */
+    static shouldUseVirtualizer(data) {
+        return data.length >= 50;
+    }
+}
+//# sourceMappingURL=renderer.js.map

package/dist/src/nile-virtual-table-body/renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../../src/nile-virtual-table-body/renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAEjE,MAAM,OAAO,wBAAwB;IACnC,MAAM,CAAC,qBAAqB,CAC1B,IAAW,EACX,mBAA4B;QAE5B,OAAO,IAAI,CAAA;;UAEL,wBAAwB,CAAC,oBAAoB,CAAC,IAAI,CAAC;YACnD,CAAC,CAAC,IAAI,CAAA;gBACA,UAAU,CAAC;gBACX,KAAK,EAAE,IAAI;gBACX,UAAU,EAAE,CAAC,OAAY,EAAkB,EAAE,CAC3C,wBAAwB,CAAC,oBAAoB,CAAC,OAAO,EAAE,mBAAmB,CAAC;gBAC7E,QAAQ,EAAE,IAAI;aACf,CAAC;aACH;YACH,CAAC,CAAC,IAAI,CAAA;gBACA,IAAI,CAAC,GAAG,CAAC,CAAC,OAAY,EAAE,EAAE,CAC1B,wBAAwB,CAAC,oBAAoB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAC5E;aACF;;KAER,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,oBAAoB,CACzB,OAAY,EACZ,mBAA4B;QAE5B,uDAAuD;QACvD,OAAO,IAAI,CAAA;;;YAGH,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAE,CAAC,IAAI,CAAA;+CAClB,mBAAmB;gBAClD,IAAI,CAAC,OAAO,IAAI,IAAI;;WAEzB,CAAC,CAAC,CAAC,CAAC,EAAE;;;KAGZ,CAAC;IACJ,CAAC;IAED;;;OAGG;IACK,MAAM,CAAC,oBAAoB,CAAC,IAAW;QAC7C,OAAO,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC;IAC3B,CAAC;CACF","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, type TemplateResult } from 'lit';\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\n\nexport class VirtualTableBodyRenderer {\n  static getVirtualizedContent(\n    data: any[],\n    hasResizableColumns: boolean\n  ): TemplateResult {\n    return html`\n      <div class=\"virtualized-container\">\n        ${VirtualTableBodyRenderer.shouldUseVirtualizer(data)\n          ? html`\n              ${virtualize({\n                items: data,\n                renderItem: (rowData: any): TemplateResult =>\n                  VirtualTableBodyRenderer.getRowRenderFunction(rowData, hasResizableColumns),\n                scroller: true,\n              })}\n            `\n          : html`\n              ${data.map((rowData: any) => \n                VirtualTableBodyRenderer.getRowRenderFunction(rowData, hasResizableColumns)\n              )}\n            `}\n      </div>\n    `;\n  }\n\n  static getRowRenderFunction(\n    rowData: any, \n    hasResizableColumns: boolean\n  ): TemplateResult {\n    // Create a table row with cell items based on the data\n    return html`\n      <div class=\"virtualized-row\">\n        <nile-table-row>\n          ${rowData.cells ? rowData.cells.map((cell: any) => html`\n            <nile-table-cell-item ?resizable=${hasResizableColumns}>\n              ${cell.content || cell}\n            </nile-table-cell-item>\n          `) : ''}\n        </nile-table-row>\n      </div>\n    `;\n  }\n\n  /**\n   * Determines whether to use virtualizer based on dataset size\n   * For small datasets (less than 50 rows), use regular rendering for better performance\n   */\n  private static shouldUseVirtualizer(data: any[]): boolean {\n    return data.length >= 50;\n  }\n}\n"]}