@aquera/nile-elements 0.1.75-beta-1.1 → 0.1.75-beta-2.0

package/dist/src/nile-grid/nile-grid.d.ts

@@ -1,35 +1,46 @@
-import { TemplateResult } from 'lit';
-import type { CSSResultGroup } from 'lit';
+/**
+ * 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 { CSSResultArray, TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element';
-import type { ColumnDef, GridOptions } from './types.js';
 /**
- * @summary A simple data grid component
- * @status stable
- * @since 2.0
+ * Nile grid component.
+ *
+ * @tag nile-grid
  *
- * @event grid-ready - Emitted when the grid is ready
  */
 export declare class NileGrid extends NileElement {
-    static styles: CSSResultGroup;
-    /** Column definitions for the grid */
-    columnDefs: ColumnDef[];
-    /** Row data to display in the grid */
-    rowData: any[];
-    /** Grid options for configuration */
-    gridOptions: GridOptions;
-    private gridApi;
-    connectedCallback(): void;
-    firstUpdated(): void;
-    private initializeGridApi;
-    private emitGridReady;
-    private handleResizeStart;
-    private renderHeader;
-    private shouldShowResizeHandle;
-    private renderBody;
-    private renderRowCells;
-    private calculateColSpan;
-    private getGridTemplateColumns;
+    /**
+     * The styles for nile-grid
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    /** User can pass custom widths for the columns */
+    customWidths: number[];
+    /** To set the grid template columns in rebuildTemplate method */
+    colTemplate: string;
+    /** To store the column widths in the beginning and after resizing */
+    private columnWidths;
+    /** To get the slot element */
+    private slotEl;
+    /** To get the first resize line to show the resize handle */
+    resizeStart: HTMLElement;
+    /** To get the last resize line to show the resize handle */
+    resizeEnd: HTMLElement;
+    /** To store the mutation observer */
+    private mo?;
+    /** To store the request animation frame */
+    private raf;
+    private scheduleLayout;
+    private ensureWidths;
+    private onResize;
+    protected firstUpdated(): void;
+    private _attachObserverAndLayout;
     render(): TemplateResult;
+    disconnectedCallback(): void;
 }
 export default NileGrid;
 declare global {

package/dist/src/nile-grid/nile-grid.js

@@ -1,179 +1,127 @@
+/**
+ * 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 { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { styles } from './nile-grid.css';
 import NileElement from '../internal/nile-element';
-import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
-import { GridRenderer } from './renderer.js';
-import { ResizeHandler } from './resize-handler.js';
+import { resizeLinesHandler, listenToEventListeners, removeEventListeners, getHead, getBody, rebuildTemplate, applyTemplate, layout, } from './nile-grid.utils';
 /**
- * @summary A simple data grid component
- * @status stable
- * @since 2.0
+ * Nile grid component.
+ *
+ * @tag nile-grid
  *
- * @event grid-ready - Emitted when the grid is ready
  */
 let NileGrid = class NileGrid extends NileElement {
     constructor() {
         super(...arguments);
-        /** Column definitions for the grid */
-        this.columnDefs = [];
-        /** Row data to display in the grid */
-        this.rowData = [];
-        /** Grid options for configuration */
-        this.gridOptions = {};
-        this.gridApi = null;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.initializeGridApi();
-    }
-    firstUpdated() {
-        this.emitGridReady();
-    }
-    initializeGridApi() {
-        this.gridApi = {
-            getSelectedRows: () => [],
-            setRowData: (data) => {
-                this.rowData = data;
-                this.requestUpdate();
-            },
-            setColumnDefs: (defs) => {
-                this.columnDefs = defs;
-                this.requestUpdate();
+        /** User can pass custom widths for the columns */
+        this.customWidths = [];
+        /** To set the grid template columns in rebuildTemplate method */
+        this.colTemplate = '';
+        /** To store the column widths in the beginning and after resizing */
+        this.columnWidths = [...this.customWidths];
+        /** To store the request animation frame */
+        this.raf = 0;
+        this.onResize = (e) => {
+            const { col, widthPx } = e.detail;
+            let w;
+            const floor = 60;
+            if (e.target.getAttribute('colspan') &&
+                parseInt(e.target.getAttribute('colspan')) > 1) {
+                w = Math.max(floor, Math.round(widthPx - this.columnWidths[col - 1]));
+            }
+            else {
+                w = Math.max(floor, Math.round(widthPx));
             }
+            this.columnWidths[col] = w;
+            resizeLinesHandler(this.resizeStart, this.resizeEnd, col, widthPx, this.scrollHeight, this.columnWidths, e);
+            this.colTemplate = rebuildTemplate(this.columnWidths.length, this.columnWidths);
+            applyTemplate(getHead(this.slotEl), getBody(this.slotEl), this.colTemplate);
         };
+        /* #endregion */
     }
-    emitGridReady() {
-        if (this.gridApi) {
-            const event = {
-                api: this.gridApi,
-                type: 'gridReady'
-            };
-            this.emit('grid-ready', event);
-        }
-    }
-    handleResizeStart(event, col, columnIndex) {
-        ResizeHandler.handleResizeStart(event, col, columnIndex, this.columnDefs, this.gridOptions, () => this.requestUpdate());
-    }
-    renderHeader() {
-        return html `
-      <div class="grid-header" style="grid-template-columns: ${this.getGridTemplateColumns()};">
-        ${this.columnDefs.map((col, index) => html `
-          <div class="grid-header-cell">
-            <span>${col.headerName || col.field}</span>
-            ${this.shouldShowResizeHandle(col) ? html `
-              <div 
-                class="grid-resize-handle"
-                @mousedown=${(e) => this.handleResizeStart(e, col, index)}
-                title="Drag to resize column"
-              ></div>
-            ` : ''}
-          </div>
-        `)}
-      </div>
-    `;
-    }
-    shouldShowResizeHandle(col) {
-        if (!this.gridOptions.enableColResize)
-            return false;
-        if (col.resizable === false)
-            return false;
-        return true;
+    /**
+     * The styles for nile-grid
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
     }
-    renderBody() {
-        if (this.gridOptions.enableVirtualScroll && this.rowData.length > 0) {
-            return html `
-        <div class="grid-body">
-          ${virtualize({
-                items: this.rowData,
-                renderItem: (row, rowIndex) => html `
-              <div class="grid-row" style="grid-template-columns: ${this.getGridTemplateColumns()};">
-                ${this.renderRowCells(row, rowIndex)}
-              </div>
-            `,
-                scroller: true,
-            })}
-        </div>
-      `;
-        }
-        return GridRenderer.renderBody(this.rowData, this.columnDefs, false, () => html ``);
+    scheduleLayout() {
+        if (this.raf)
+            cancelAnimationFrame(this.raf);
+        this.raf = requestAnimationFrame(() => {
+            this.raf = 0;
+            layout(this, this.slotEl, this.ensureWidths.bind(this), rebuildTemplate, applyTemplate, this.columnWidths);
+        });
     }
-    renderRowCells(row, rowIndex) {
-        const cells = [];
-        let currentColIndex = 0;
-        for (let colIndex = 0; colIndex < this.columnDefs.length; colIndex++) {
-            const col = this.columnDefs[colIndex];
-            // Check if this column should be skipped due to previous spanning
-            if (currentColIndex > colIndex) {
-                continue;
-            }
-            // Calculate column span
-            const colSpan = this.calculateColSpan(col, row, rowIndex, colIndex);
-            if (colSpan > 0) {
-                const cellStyle = `grid-column: ${currentColIndex + 1} / span ${colSpan};`;
-                cells.push(html `
-          <div class="grid-cell" style="${cellStyle}">
-            <span>${row[col.field]}</span>
-          </div>
-        `);
-                currentColIndex += colSpan;
-            }
+    ensureWidths(colCount) {
+        if (this.columnWidths.length !== colCount) {
+            this.columnWidths = Array(colCount).fill('');
         }
-        return html `${cells}`;
     }
-    calculateColSpan(col, row, rowIndex, colIndex) {
-        if (col.colSpan) {
-            const params = {
-                data: row,
-                field: col.field,
-                rowIndex,
-                columnIndex: colIndex
-            };
-            return col.colSpan(params);
-        }
-        return 1;
+    firstUpdated() {
+        this.setAttribute('role', 'table');
+        listenToEventListeners(this, this.onResize, this.slotEl, this._attachObserverAndLayout.bind(this));
     }
-    getGridTemplateColumns() {
-        return this.columnDefs.map((col, index) => {
-            if (col.width) {
-                return `${col.width}px`;
-            }
-            // Last column takes remaining space
-            if (index === this.columnDefs.length - 1) {
-                return '1fr';
-            }
-            return 'auto';
-        }).join(' ');
+    _attachObserverAndLayout() {
+        this.mo?.disconnect();
+        this.mo = new MutationObserver(() => {
+            this.scheduleLayout();
+        });
+        const head = getHead(this.slotEl);
+        const body = getBody(this.slotEl);
+        if (!head && !body)
+            return;
+        const target = body ?? this;
+        this.mo.observe(target, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ['colspan', 'rowspan'],
+        });
+        layout(this, this.slotEl, this.ensureWidths.bind(this), rebuildTemplate, applyTemplate, this.columnWidths);
     }
     render() {
-        if (!this.columnDefs || this.columnDefs.length === 0) {
-            return html `
-        <div class="grid-container">
-          <div class="grid-empty">
-            <div class="empty-text">No columns defined</div>
-          </div>
-        </div>
-      `;
-        }
         return html `
-      <div class="grid-container">
-        ${this.renderHeader()}
-        ${this.renderBody()}
+      <div>
+        <slot></slot>
+        <div class="nile-resize-start"></div>
+        <div class="nile-resize-end"></div>
       </div>
     `;
     }
+    disconnectedCallback() {
+        super.disconnectedCallback?.();
+        this.mo?.disconnect();
+        if (this.raf)
+            cancelAnimationFrame(this.raf);
+        removeEventListeners(this, this.onResize, this.slotEl, this._attachObserverAndLayout.bind(this));
+    }
 };
-NileGrid.styles = styles;
 __decorate([
-    property({ type: Array, attribute: 'columnDefs' })
-], NileGrid.prototype, "columnDefs", void 0);
+    property({ type: Array, attribute: true })
+], NileGrid.prototype, "customWidths", void 0);
+__decorate([
+    state()
+], NileGrid.prototype, "colTemplate", void 0);
+__decorate([
+    state()
+], NileGrid.prototype, "columnWidths", void 0);
+__decorate([
+    query('slot')
+], NileGrid.prototype, "slotEl", void 0);
 __decorate([
-    property({ type: Array, attribute: 'rowData' })
-], NileGrid.prototype, "rowData", void 0);
+    query('.nile-resize-start')
+], NileGrid.prototype, "resizeStart", void 0);
 __decorate([
-    property({ type: Object, attribute: 'gridOptions' })
-], NileGrid.prototype, "gridOptions", void 0);
+    query('.nile-resize-end')
+], NileGrid.prototype, "resizeEnd", void 0);
 NileGrid = __decorate([
     customElement('nile-grid')
 ], NileGrid);

package/dist/src/nile-grid/nile-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-grid.js","sourceRoot":"","sources":["../../../src/nile-grid/nile-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property } from 'lit/decorators.js';\nimport { html, TemplateResult } from 'lit';\nimport { styles } from './nile-grid.css';\nimport type { CSSResultGroup } from 'lit';\nimport NileElement from '../internal/nile-element';\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\nimport type { ColumnDef, GridOptions, GridApi, GridReadyEvent } from './types.js';\nimport { GridRenderer } from './renderer.js';\nimport { ResizeHandler } from './resize-handler.js';\n\n/**\n * @summary A simple data grid component\n * @status stable\n * @since 2.0\n *\n * @event grid-ready - Emitted when the grid is ready\n */\n\n@customElement('nile-grid')\nexport class NileGrid extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  /** Column definitions for the grid */\n  @property({ type: Array, attribute: 'columnDefs' }) columnDefs: ColumnDef[] = [];\n\n  /** Row data to display in the grid */\n  @property({ type: Array, attribute: 'rowData' }) rowData: any[] = [];\n\n  /** Grid options for configuration */\n  @property({ type: Object, attribute: 'gridOptions' }) gridOptions: GridOptions = {};\n\n  private gridApi: GridApi | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.initializeGridApi();\n  }\n\n  firstUpdated() {\n    this.emitGridReady();\n  }\n\n  private initializeGridApi() {\n    this.gridApi = {\n      getSelectedRows: () => [],\n      setRowData: (data: any[]) => {\n        this.rowData = data;\n        this.requestUpdate();\n      },\n      setColumnDefs: (defs: ColumnDef[]) => {\n        this.columnDefs = defs;\n        this.requestUpdate();\n      }\n    };\n  }\n\n  private emitGridReady() {\n    if (this.gridApi) {\n      const event: GridReadyEvent = {\n        api: this.gridApi,\n        type: 'gridReady'\n      };\n      this.emit('grid-ready', event);\n    }\n  }\n\n  private handleResizeStart(event: MouseEvent, col: ColumnDef, columnIndex: number): void {\n    ResizeHandler.handleResizeStart(\n      event, \n      col, \n      columnIndex, \n      this.columnDefs, \n      this.gridOptions, \n      () => this.requestUpdate()\n    );\n  }\n\n  private renderHeader(): TemplateResult {\n    return html`\n      <div class=\"grid-header\" style=\"grid-template-columns: ${this.getGridTemplateColumns()};\">\n        ${this.columnDefs.map((col, index) => html`\n          <div class=\"grid-header-cell\">\n            <span>${col.headerName || col.field}</span>\n            ${this.shouldShowResizeHandle(col) ? html`\n              <div \n                class=\"grid-resize-handle\"\n                @mousedown=${(e: MouseEvent) => this.handleResizeStart(e, col, index)}\n                title=\"Drag to resize column\"\n              ></div>\n            ` : ''}\n          </div>\n        `)}\n      </div>\n    `;\n  }\n\n  private shouldShowResizeHandle(col: any): boolean {\n    if (!this.gridOptions.enableColResize) return false;\n    if (col.resizable === false) return false;\n    return true;\n  }\n\n  private renderBody(): TemplateResult {\n    if (this.gridOptions.enableVirtualScroll && this.rowData.length > 0) {\n      return html`\n        <div class=\"grid-body\">\n          ${virtualize({\n            items: this.rowData,\n            renderItem: (row: any, rowIndex: number) => html`\n              <div class=\"grid-row\" style=\"grid-template-columns: ${this.getGridTemplateColumns()};\">\n                ${this.renderRowCells(row, rowIndex)}\n              </div>\n            `,\n            scroller: true,\n          })}\n        </div>\n      `;\n    }\n\n    return GridRenderer.renderBody(\n      this.rowData,\n      this.columnDefs,\n      false,\n      () => html``\n    );\n  }\n\n  private renderRowCells(row: any, rowIndex: number): TemplateResult {\n    const cells: TemplateResult[] = [];\n    let currentColIndex = 0;\n\n    for (let colIndex = 0; colIndex < this.columnDefs.length; colIndex++) {\n      const col = this.columnDefs[colIndex];\n      \n      // Check if this column should be skipped due to previous spanning\n      if (currentColIndex > colIndex) {\n        continue;\n      }\n\n      // Calculate column span\n      const colSpan = this.calculateColSpan(col, row, rowIndex, colIndex);\n      \n      if (colSpan > 0) {\n        const cellStyle = `grid-column: ${currentColIndex + 1} / span ${colSpan};`;\n        \n        cells.push(html`\n          <div class=\"grid-cell\" style=\"${cellStyle}\">\n            <span>${row[col.field]}</span>\n          </div>\n        `);\n        \n        currentColIndex += colSpan;\n      }\n    }\n\n    return html`${cells}`;\n  }\n\n  private calculateColSpan(col: any, row: any, rowIndex: number, colIndex: number): number {\n    if (col.colSpan) {\n      const params = {\n        data: row,\n        field: col.field,\n        rowIndex,\n        columnIndex: colIndex\n      };\n      return col.colSpan(params);\n    }\n    return 1;\n  }\n\n  private getGridTemplateColumns(): string {\n    return this.columnDefs.map((col, index) => {\n      if (col.width) {\n        return `${col.width}px`;\n      }\n      // Last column takes remaining space\n      if (index === this.columnDefs.length - 1) {\n        return '1fr';\n      }\n      return 'auto';\n    }).join(' ');\n  }\n\n  render(): TemplateResult {\n    if (!this.columnDefs || this.columnDefs.length === 0) {\n      return html`\n        <div class=\"grid-container\">\n          <div class=\"grid-empty\">\n            <div class=\"empty-text\">No columns defined</div>\n          </div>\n        </div>\n      `;\n    }\n\n    return html`\n      <div class=\"grid-container\">\n        ${this.renderHeader()}\n        ${this.renderBody()}\n      </div>\n    `;\n  }\n}\n\nexport default NileGrid;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-grid': NileGrid;\n  }\n}\n"]}
+{"version":3,"file":"nile-grid.js","sourceRoot":"","sources":["../../../src/nile-grid/nile-grid.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 { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-grid.css';\nimport NileElement from '../internal/nile-element';\nimport {\n  resizeLinesHandler,\n  listenToEventListeners,\n  removeEventListeners,\n  getHead,\n  getBody,\n  rebuildTemplate,\n  applyTemplate,\n  layout,\n} from './nile-grid.utils';\n\n/**\n * Nile grid component.\n *\n * @tag nile-grid\n *\n */\n@customElement('nile-grid')\nexport class NileGrid extends NileElement {\n  /**\n   * The styles for nile-grid\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n  /** User can pass custom widths for the columns */\n  @property({ type: Array, attribute: true }) customWidths: number[] = [];\n\n  /** To set the grid template columns in rebuildTemplate method */\n  @state() public colTemplate = '';\n\n  /** To store the column widths in the beginning and after resizing */\n  @state() private columnWidths: number[] = [...this.customWidths];\n\n  /** To get the slot element */\n  @query('slot') private slotEl!: HTMLSlotElement;\n\n  /** To get the first resize line to show the resize handle */\n  @query('.nile-resize-start') resizeStart: HTMLElement;\n\n  /** To get the last resize line to show the resize handle */\n  @query('.nile-resize-end') resizeEnd: HTMLElement;\n\n  /** To store the mutation observer */\n  private mo?: MutationObserver;\n\n  /** To store the request animation frame */\n  private raf = 0;\n\n  private scheduleLayout() {\n    if (this.raf) cancelAnimationFrame(this.raf);\n    this.raf = requestAnimationFrame(() => {\n      this.raf = 0;\n      layout(\n        this,\n        this.slotEl,\n        this.ensureWidths.bind(this),\n        rebuildTemplate,\n        applyTemplate,\n        this.columnWidths\n      );\n    });\n  }\n\n  private ensureWidths(colCount: number) {\n    if (this.columnWidths.length !== colCount) {\n      this.columnWidths = Array(colCount).fill('');\n    }\n  }\n\n  private onResize = (e: Event) => {\n    const { col, widthPx } = (e as CustomEvent).detail as {\n      col: number;\n      widthPx: number;\n    };\n    let w: any;\n    const floor = 60;\n\n    if (\n      (e.target as HTMLElement).getAttribute('colspan') &&\n      parseInt((e.target as HTMLElement).getAttribute('colspan')!) > 1\n    ) {\n      w = Math.max(floor, Math.round(widthPx - this.columnWidths[col - 1]));\n    } else {\n      w = Math.max(floor, Math.round(widthPx));\n    }\n    this.columnWidths[col] = w;\n    resizeLinesHandler(\n      this.resizeStart,\n      this.resizeEnd,\n      col,\n      widthPx,\n      this.scrollHeight,\n      this.columnWidths,\n      e\n    );\n    this.colTemplate = rebuildTemplate(\n      this.columnWidths.length,\n      this.columnWidths\n    );\n    applyTemplate(getHead(this.slotEl), getBody(this.slotEl), this.colTemplate);\n  };\n\n  protected firstUpdated() {\n    this.setAttribute('role', 'table');\n    listenToEventListeners(\n      this,\n      this.onResize,\n      this.slotEl,\n      this._attachObserverAndLayout.bind(this)\n    );\n  }\n\n  private _attachObserverAndLayout() {\n    this.mo?.disconnect();\n    this.mo = new MutationObserver(() => {\n      this.scheduleLayout();\n    });\n\n    const head = getHead(this.slotEl);\n    const body = getBody(this.slotEl);\n    if (!head && !body) return;\n\n    const target = body ?? this;\n    this.mo.observe(target, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      attributeFilter: ['colspan', 'rowspan'],\n    });\n    layout(\n      this,\n      this.slotEl,\n      this.ensureWidths.bind(this),\n      rebuildTemplate,\n      applyTemplate,\n      this.columnWidths\n    );\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div>\n        <slot></slot>\n        <div class=\"nile-resize-start\"></div>\n        <div class=\"nile-resize-end\"></div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    this.mo?.disconnect();\n\n    if (this.raf) cancelAnimationFrame(this.raf);\n    removeEventListeners(\n      this,\n      this.onResize,\n      this.slotEl,\n      this._attachObserverAndLayout.bind(this)\n    );\n  }\n\n  /* #endregion */\n}\n\nexport default NileGrid;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-grid': NileGrid;\n  }\n}\n"]}

package/dist/src/nile-grid/nile-grid.utils.d.ts

@@ -0,0 +1,9 @@
+import { NileGrid } from './nile-grid';
+export declare const resizeLinesHandler: (resizeStart: any, resizeEnd: any, col: number, widthPx: number, scrollHeight: any, columnWidths: any, e: any) => void;
+export declare const listenToEventListeners: (nileGrid: NileGrid, onResize: any, slotEl: any, _attachObserverAndLayout: any) => void;
+export declare const removeEventListeners: (nileGrid: NileGrid, onResize: any, slotEl: any, _attachObserverAndLayout: any) => void;
+export declare const getHead: (slotEl: any) => HTMLElement;
+export declare const getBody: (slotEl: any) => HTMLElement;
+export declare const rebuildTemplate: (colCount: number, columnWidths: number[]) => string;
+export declare const applyTemplate: (head: HTMLElement | null, body: HTMLElement | null, colTemplate: string) => void;
+export declare const layout: (nileGrid: NileGrid, slotEl: any, ensureWidths: any, rebuildTemplate: any, applyTemplate: any, columnWidths: any) => void;

package/dist/src/nile-grid/nile-grid.utils.js

@@ -0,0 +1,170 @@
+export const resizeLinesHandler = (resizeStart, resizeEnd, col, widthPx, scrollHeight, columnWidths, e) => {
+    resizeStart.style.display = 'block';
+    resizeEnd.style.display = 'block';
+    resizeStart.style.height = scrollHeight + 'px';
+    resizeEnd.style.height = scrollHeight + 'px';
+    if (col === 0) {
+        resizeStart.style.left = `${Math.max(60, widthPx) - 6}px`;
+        resizeEnd.style.left = `${Math.max(60, widthPx) - 2}px`;
+    }
+    else {
+        let totalWidth = 0;
+        if (e.target.getAttribute('colspan') &&
+            parseInt(e.target.getAttribute('colspan')) > 1) {
+            widthPx = widthPx - columnWidths[col - 1];
+            for (let i = 0; i < col; i++) {
+                totalWidth += columnWidths[i];
+            }
+        }
+        else {
+            for (let i = 0; i < col; i++) {
+                totalWidth += columnWidths[i];
+            }
+        }
+        resizeStart.style.left = `${totalWidth + Math.max(60, widthPx) - 6}px`;
+        resizeEnd.style.left = `${totalWidth + Math.max(60, widthPx) - 2}px`;
+    }
+};
+export const listenToEventListeners = (nileGrid, onResize, slotEl, _attachObserverAndLayout) => {
+    nileGrid.addEventListener('nile-resize', onResize);
+    nileGrid.addEventListener('nile-resize-start', () => {
+        nileGrid.resizeStart.style.display = 'block';
+    });
+    nileGrid.addEventListener('nile-resize-end', () => {
+        nileGrid.resizeStart.style.display = 'none';
+        nileGrid.resizeEnd.style.display = 'none';
+    });
+    slotEl.addEventListener('slotchange', () => _attachObserverAndLayout());
+};
+export const removeEventListeners = (nileGrid, onResize, slotEl, _attachObserverAndLayout) => {
+    nileGrid.removeEventListener('nile-resize', onResize);
+    nileGrid.removeEventListener('nile-resize-start', () => {
+        nileGrid.resizeStart.style.display = 'block';
+    });
+    nileGrid.removeEventListener('nile-resize-end', () => {
+        nileGrid.resizeStart.style.display = 'none';
+        nileGrid.resizeEnd.style.display = 'none';
+    });
+    slotEl.removeEventListener('slotchange', () => _attachObserverAndLayout());
+};
+export const getHead = (slotEl) => {
+    const nodes = slotEl?.assignedElements() ?? [];
+    return (nodes.find((n) => n.tagName.toLowerCase() === 'nile-grid-head') || null);
+};
+export const getBody = (slotEl) => {
+    const nodes = slotEl?.assignedElements() ?? [];
+    return (nodes.find((n) => n.tagName.toLowerCase() === 'nile-grid-body') || null);
+};
+export const rebuildTemplate = (colCount, columnWidths) => {
+    const parts = [];
+    for (let i = 0; i < colCount; i++) {
+        const explicit = columnWidths[i];
+        if (i === colCount - 1) {
+            parts.push(`minmax(${explicit}px, auto)`);
+        }
+        else {
+            parts.push(`${explicit}px`);
+        }
+    }
+    return parts.join(' ');
+};
+export const applyTemplate = (head, body, colTemplate) => {
+    if (head)
+        head.style.gridTemplateColumns = colTemplate;
+    if (body) {
+        body.style.gridTemplateColumns = colTemplate;
+        body.style.overflowX = 'auto';
+    }
+};
+function computeHeadLayout(headRows, carryHead, colCount) {
+    headRows.forEach((row, rIdx) => {
+        let c = 1;
+        const cells = Array.from(row.querySelectorAll('nile-grid-head-item, nile-grid-cell'));
+        const rStart = rIdx + 1;
+        cells.forEach(cell => {
+            while (carryHead[c - 1] > 0)
+                c++;
+            const colspan = Math.max(1, Number(cell.getAttribute('colspan')) || 1);
+            const rowspan = Math.max(1, Number(cell.getAttribute('rowspan')) || 1);
+            const cStart = c, cEnd = c + colspan;
+            const rEnd = rStart + rowspan;
+            cell.style.gridColumn = `${cStart} / ${cEnd}`;
+            cell.style.gridRow = `${rStart} / ${rEnd}`;
+            cell.dataset.cStart = String(cStart);
+            for (let k = 0; k < colspan; k++) {
+                const idx = c - 1 + k;
+                carryHead[idx] = Math.max(carryHead[idx] || 0, rowspan);
+            }
+            c = cEnd;
+            colCount = Math.max(colCount, cEnd - 1);
+        });
+        for (let i = 0; i < carryHead.length; i++)
+            if (carryHead[i] > 0)
+                carryHead[i]--;
+    });
+    return colCount;
+}
+function computeBodyLayout(bodyRows, carryBody, colCount) {
+    bodyRows.forEach((row, rIdx) => {
+        let c = 1;
+        const cells = Array.from(row.querySelectorAll('nile-grid-cell, nile-grid-header'));
+        const rStart = rIdx + 1;
+        let maxRowspan = 1;
+        const bg = row.shadowRoot?.querySelector('[data-row-bg]');
+        if (bg)
+            bg.style.gridColumn = `1 / -1`;
+        cells.forEach(cell => {
+            while (carryBody[c - 1] > 0)
+                c++;
+            const colspan = Math.max(1, Number(cell.getAttribute('colspan')) || 1);
+            const rowspan = Math.max(1, Number(cell.getAttribute('rowspan')) || 1);
+            const cStart = c, cEnd = c + colspan;
+            const rEnd = rStart + rowspan;
+            cell.style.gridColumn = `${cStart} / ${cEnd}`;
+            cell.style.gridRow = `${rStart} / ${rEnd}`;
+            cell.dataset.cStart = String(cStart);
+            for (let k = 0; k < colspan; k++) {
+                const idx = c - 1 + k;
+                carryBody[idx] = Math.max(carryBody[idx] || 0, rowspan);
+            }
+            maxRowspan = Math.max(maxRowspan, rowspan);
+            c = cEnd;
+            colCount = Math.max(colCount, cEnd - 1);
+        });
+        if (bg) {
+            const rEnd = rStart + maxRowspan;
+            bg.style.gridRow = `${rStart} / ${rEnd}`;
+        }
+        for (let i = 0; i < carryBody.length; i++)
+            if (carryBody[i] > 0)
+                carryBody[i]--;
+    });
+    return colCount;
+}
+function computeColumnWidths(nileGrid, colCount, columnWidths) {
+    for (let col = 0; col < colCount; col++) {
+        const containerWidth = (nileGrid.getBoundingClientRect().width || 1) - 2;
+        columnWidths[col] =
+            nileGrid.customWidths[col] || containerWidth / Math.max(colCount, 1);
+    }
+}
+export const layout = (nileGrid, slotEl, ensureWidths, rebuildTemplate, applyTemplate, columnWidths) => {
+    const head = getHead(slotEl);
+    const body = getBody(slotEl);
+    if (!body)
+        return;
+    const headRows = head
+        ? Array.from(head.querySelectorAll('nile-grid-row'))
+        : [];
+    const bodyRows = Array.from(body.querySelectorAll('nile-grid-row'));
+    let colCount = 0;
+    colCount = computeHeadLayout(headRows, [], colCount);
+    colCount = computeBodyLayout(bodyRows, [], colCount);
+    computeColumnWidths(nileGrid, colCount, columnWidths);
+    ensureWidths(colCount);
+    body.style.gridAutoRows = 'auto';
+    body.style.overflowY = 'auto';
+    nileGrid.colTemplate = rebuildTemplate(colCount, columnWidths);
+    applyTemplate(head, body, nileGrid.colTemplate, nileGrid.colTemplate);
+};
+//# sourceMappingURL=nile-grid.utils.js.map

package/dist/src/nile-grid/nile-grid.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-grid.utils.js","sourceRoot":"","sources":["../../../src/nile-grid/nile-grid.utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,WAAgB,EAChB,SAAc,EACd,GAAW,EACX,OAAe,EACf,YAAiB,EACjB,YAAiB,EACjB,CAAM,EACN,EAAE;IACF,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;IAC/C,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;IAC7C,IAAI,GAAG,KAAK,CAAC,EAAE,CAAC;QACd,WAAW,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;QAC1D,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;IAC1D,CAAC;SAAM,CAAC;QACN,IAAI,UAAU,GAAG,CAAC,CAAC;QACnB,IACG,CAAC,CAAC,MAAsB,CAAC,YAAY,CAAC,SAAS,CAAC;YACjD,QAAQ,CAAE,CAAC,CAAC,MAAsB,CAAC,YAAY,CAAC,SAAS,CAAE,CAAC,GAAG,CAAC,EAChE,CAAC;YACD,OAAO,GAAG,OAAO,GAAG,YAAY,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;YAC1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC7B,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC;YAChC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC7B,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC;YAChC,CAAC;QACH,CAAC;QACD,WAAW,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;QACvE,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;IACvE,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,QAAkB,EAClB,QAAa,EACb,MAAW,EACX,wBAA6B,EAC7B,EAAE;IACF,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;IACnD,QAAQ,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,GAAG,EAAE;QAClD,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;IAC/C,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,GAAG,EAAE;QAChD,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC5C,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5C,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,wBAAwB,EAAE,CAAC,CAAC;AAC1E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,QAAkB,EAClB,QAAa,EACb,MAAW,EACX,wBAA6B,EAC7B,EAAE;IACF,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;IACtD,QAAQ,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,GAAG,EAAE;QACrD,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;IAC/C,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,GAAG,EAAE;QACnD,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC5C,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5C,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,wBAAwB,EAAE,CAAC,CAAC;AAC7E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,MAAW,EAAE,EAAE;IACrC,MAAM,KAAK,GAAG,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC;IAC/C,OAAO,CACJ,KAAK,CAAC,IAAI,CACT,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,CACzC,IAAI,IAAI,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,MAAW,EAAE,EAAE;IACrC,MAAM,KAAK,GAAG,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC;IAC/C,OAAO,CACJ,KAAK,CAAC,IAAI,CACT,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB,CACzC,IAAI,IAAI,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,QAAgB,EAChB,YAAsB,EACd,EAAE;IACV,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC;QAClC,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;QACjC,IAAI,CAAC,KAAK,QAAQ,GAAG,CAAC,EAAE,CAAC;YACvB,KAAK,CAAC,IAAI,CAAC,UAAU,QAAQ,WAAW,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,IAAI,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IACD,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,IAAwB,EACxB,IAAwB,EACxB,WAAmB,EACnB,EAAE;IACF,IAAI,IAAI;QAAE,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,WAAW,CAAC;IACvD,IAAI,IAAI,EAAE,CAAC;QACT,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,WAAW,CAAC;QAC7C,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,CAAC;AACH,CAAC,CAAC;AAEF,SAAS,iBAAiB,CACxB,QAAuB,EACvB,SAAmB,EACnB,QAAgB;IAEhB,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;QAC7B,IAAI,CAAC,GAAG,CAAC,CAAC;QACV,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,GAAG,CAAC,gBAAgB,CAAC,qCAAqC,CAAC,CAC3C,CAAC;QACnB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,CAAC;QAExB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACnB,OAAO,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;gBAAE,CAAC,EAAE,CAAC;YACjC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YACvE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YAEvE,MAAM,MAAM,GAAG,CAAC,EACd,IAAI,GAAG,CAAC,GAAG,OAAO,CAAC;YACrB,MAAM,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC;YAE9B,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,MAAM,MAAM,IAAI,EAAE,CAAC;YAC9C,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,MAAM,MAAM,IAAI,EAAE,CAAC;YAC1C,IAAY,CAAC,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;YAE9C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;gBACjC,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;gBACtB,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;YAC1D,CAAC;YACD,CAAC,GAAG,IAAI,CAAC;YACT,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;QAEH,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE;YACvC,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC;gBAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IACH,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,SAAS,iBAAiB,CACxB,QAAuB,EACvB,SAAmB,EACnB,QAAgB;IAEhB,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;QAC7B,IAAI,CAAC,GAAG,CAAC,CAAC;QACV,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,GAAG,CAAC,gBAAgB,CAAC,kCAAkC,CAAC,CACxC,CAAC;QACnB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,CAAC;QACxB,IAAI,UAAU,GAAG,CAAC,CAAC;QAEnB,MAAM,EAAE,GAAG,GAAG,CAAC,UAAU,EAAE,aAAa,CAAc,eAAe,CAAC,CAAC;QACvE,IAAI,EAAE;YAAE,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QAEvC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACnB,OAAO,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;gBAAE,CAAC,EAAE,CAAC;YACjC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YACvE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YAEvE,MAAM,MAAM,GAAG,CAAC,EACd,IAAI,GAAG,CAAC,GAAG,OAAO,CAAC;YACrB,MAAM,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC;YAE9B,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,MAAM,MAAM,IAAI,EAAE,CAAC;YAC9C,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,MAAM,MAAM,IAAI,EAAE,CAAC;YAC1C,IAAY,CAAC,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;YAE9C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;gBACjC,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;gBACtB,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;YAC1D,CAAC;YACD,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;YAC3C,CAAC,GAAG,IAAI,CAAC;YACT,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;QAEH,IAAI,EAAE,EAAE,CAAC;YACP,MAAM,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;YACjC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,MAAM,MAAM,IAAI,EAAE,CAAC;QAC3C,CAAC;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE;YACvC,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC;gBAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,SAAS,mBAAmB,CAC1B,QAAkB,EAClB,QAAgB,EAChB,YAAsB;IAEtB,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,QAAQ,EAAE,GAAG,EAAE,EAAE,CAAC;QACxC,MAAM,cAAc,GAAG,CAAC,QAAQ,CAAC,qBAAqB,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACzE,YAAY,CAAC,GAAG,CAAC;YACf,QAAQ,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACzE,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CACpB,QAAkB,EAClB,MAAW,EACX,YAAiB,EACjB,eAAoB,EACpB,aAAkB,EAClB,YAAiB,EACjB,EAAE;IACF,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7B,IAAI,CAAC,IAAI;QAAE,OAAO;IAElB,MAAM,QAAQ,GAAG,IAAI;QACnB,CAAC,CAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAmB;QACvE,CAAC,CAAC,EAAE,CAAC;IACP,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CACzB,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CACtB,CAAC;IAEnB,IAAI,QAAQ,GAAG,CAAC,CAAC;IAEjB,QAAQ,GAAG,iBAAiB,CAAC,QAAQ,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC;IACrD,QAAQ,GAAG,iBAAiB,CAAC,QAAQ,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC;IAErD,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAEtD,YAAY,CAAC,QAAQ,CAAC,CAAC;IACvB,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACjC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,WAAW,GAAG,eAAe,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAC/D,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,WAAW,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;AACxE,CAAC,CAAC","sourcesContent":["import { NileGrid } from './nile-grid';\n\nexport const resizeLinesHandler = (\n  resizeStart: any,\n  resizeEnd: any,\n  col: number,\n  widthPx: number,\n  scrollHeight: any,\n  columnWidths: any,\n  e: any\n) => {\n  resizeStart.style.display = 'block';\n  resizeEnd.style.display = 'block';\n  resizeStart.style.height = scrollHeight + 'px';\n  resizeEnd.style.height = scrollHeight + 'px';\n  if (col === 0) {\n    resizeStart.style.left = `${Math.max(60, widthPx) - 6}px`;\n    resizeEnd.style.left = `${Math.max(60, widthPx) - 2}px`;\n  } else {\n    let totalWidth = 0;\n    if (\n      (e.target as HTMLElement).getAttribute('colspan') &&\n      parseInt((e.target as HTMLElement).getAttribute('colspan')!) > 1\n    ) {\n      widthPx = widthPx - columnWidths[col - 1];\n      for (let i = 0; i < col; i++) {\n        totalWidth += columnWidths[i];\n      }\n    } else {\n      for (let i = 0; i < col; i++) {\n        totalWidth += columnWidths[i];\n      }\n    }\n    resizeStart.style.left = `${totalWidth + Math.max(60, widthPx) - 6}px`;\n    resizeEnd.style.left = `${totalWidth + Math.max(60, widthPx) - 2}px`;\n  }\n};\n\nexport const listenToEventListeners = (\n  nileGrid: NileGrid,\n  onResize: any,\n  slotEl: any,\n  _attachObserverAndLayout: any\n) => {\n  nileGrid.addEventListener('nile-resize', onResize);\n  nileGrid.addEventListener('nile-resize-start', () => {\n    nileGrid.resizeStart.style.display = 'block';\n  });\n  nileGrid.addEventListener('nile-resize-end', () => {\n    nileGrid.resizeStart.style.display = 'none';\n    nileGrid.resizeEnd.style.display = 'none';\n  });\n  slotEl.addEventListener('slotchange', () => _attachObserverAndLayout());\n};\n\nexport const removeEventListeners = (\n  nileGrid: NileGrid,\n  onResize: any,\n  slotEl: any,\n  _attachObserverAndLayout: any\n) => {\n  nileGrid.removeEventListener('nile-resize', onResize);\n  nileGrid.removeEventListener('nile-resize-start', () => {\n    nileGrid.resizeStart.style.display = 'block';\n  });\n  nileGrid.removeEventListener('nile-resize-end', () => {\n    nileGrid.resizeStart.style.display = 'none';\n    nileGrid.resizeEnd.style.display = 'none';\n  });\n  slotEl.removeEventListener('slotchange', () => _attachObserverAndLayout());\n};\n\nexport const getHead = (slotEl: any) => {\n  const nodes = slotEl?.assignedElements() ?? [];\n  return (\n    (nodes.find(\n      (n: any) => n.tagName.toLowerCase() === 'nile-grid-head'\n    ) as HTMLElement) || null\n  );\n};\n\nexport const getBody = (slotEl: any) => {\n  const nodes = slotEl?.assignedElements() ?? [];\n  return (\n    (nodes.find(\n      (n: any) => n.tagName.toLowerCase() === 'nile-grid-body'\n    ) as HTMLElement) || null\n  );\n};\n\nexport const rebuildTemplate = (\n  colCount: number,\n  columnWidths: number[]\n): string => {\n  const parts: string[] = [];\n\n  for (let i = 0; i < colCount; i++) {\n    const explicit = columnWidths[i];\n    if (i === colCount - 1) {\n      parts.push(`minmax(${explicit}px, auto)`);\n    } else {\n      parts.push(`${explicit}px`);\n    }\n  }\n  return parts.join(' ');\n};\n\nexport const applyTemplate = (\n  head: HTMLElement | null,\n  body: HTMLElement | null,\n  colTemplate: string\n) => {\n  if (head) head.style.gridTemplateColumns = colTemplate;\n  if (body) {\n    body.style.gridTemplateColumns = colTemplate;\n    body.style.overflowX = 'auto';\n  }\n};\n\nfunction computeHeadLayout(\n  headRows: HTMLElement[],\n  carryHead: number[],\n  colCount: number\n): number {\n  headRows.forEach((row, rIdx) => {\n    let c = 1;\n    const cells = Array.from(\n      row.querySelectorAll('nile-grid-head-item, nile-grid-cell')\n    ) as HTMLElement[];\n    const rStart = rIdx + 1;\n\n    cells.forEach(cell => {\n      while (carryHead[c - 1] > 0) c++;\n      const colspan = Math.max(1, Number(cell.getAttribute('colspan')) || 1);\n      const rowspan = Math.max(1, Number(cell.getAttribute('rowspan')) || 1);\n\n      const cStart = c,\n        cEnd = c + colspan;\n      const rEnd = rStart + rowspan;\n\n      cell.style.gridColumn = `${cStart} / ${cEnd}`;\n      cell.style.gridRow = `${rStart} / ${rEnd}`;\n      (cell as any).dataset.cStart = String(cStart);\n\n      for (let k = 0; k < colspan; k++) {\n        const idx = c - 1 + k;\n        carryHead[idx] = Math.max(carryHead[idx] || 0, rowspan);\n      }\n      c = cEnd;\n      colCount = Math.max(colCount, cEnd - 1);\n    });\n\n    for (let i = 0; i < carryHead.length; i++)\n      if (carryHead[i] > 0) carryHead[i]--;\n  });\n  return colCount;\n}\n\nfunction computeBodyLayout(\n  bodyRows: HTMLElement[],\n  carryBody: number[],\n  colCount: number\n) {\n  bodyRows.forEach((row, rIdx) => {\n    let c = 1;\n    const cells = Array.from(\n      row.querySelectorAll('nile-grid-cell, nile-grid-header')\n    ) as HTMLElement[];\n    const rStart = rIdx + 1;\n    let maxRowspan = 1;\n\n    const bg = row.shadowRoot?.querySelector<HTMLElement>('[data-row-bg]');\n    if (bg) bg.style.gridColumn = `1 / -1`;\n\n    cells.forEach(cell => {\n      while (carryBody[c - 1] > 0) c++;\n      const colspan = Math.max(1, Number(cell.getAttribute('colspan')) || 1);\n      const rowspan = Math.max(1, Number(cell.getAttribute('rowspan')) || 1);\n\n      const cStart = c,\n        cEnd = c + colspan;\n      const rEnd = rStart + rowspan;\n\n      cell.style.gridColumn = `${cStart} / ${cEnd}`;\n      cell.style.gridRow = `${rStart} / ${rEnd}`;\n      (cell as any).dataset.cStart = String(cStart);\n\n      for (let k = 0; k < colspan; k++) {\n        const idx = c - 1 + k;\n        carryBody[idx] = Math.max(carryBody[idx] || 0, rowspan);\n      }\n      maxRowspan = Math.max(maxRowspan, rowspan);\n      c = cEnd;\n      colCount = Math.max(colCount, cEnd - 1);\n    });\n\n    if (bg) {\n      const rEnd = rStart + maxRowspan;\n      bg.style.gridRow = `${rStart} / ${rEnd}`;\n    }\n\n    for (let i = 0; i < carryBody.length; i++)\n      if (carryBody[i] > 0) carryBody[i]--;\n  });\n\n  return colCount;\n}\n\nfunction computeColumnWidths(\n  nileGrid: NileGrid,\n  colCount: number,\n  columnWidths: number[]\n) {\n  for (let col = 0; col < colCount; col++) {\n    const containerWidth = (nileGrid.getBoundingClientRect().width || 1) - 2;\n    columnWidths[col] =\n      nileGrid.customWidths[col] || containerWidth / Math.max(colCount, 1);\n  }\n}\n\nexport const layout = (\n  nileGrid: NileGrid,\n  slotEl: any,\n  ensureWidths: any,\n  rebuildTemplate: any,\n  applyTemplate: any,\n  columnWidths: any\n) => {\n  const head = getHead(slotEl);\n  const body = getBody(slotEl);\n  if (!body) return;\n\n  const headRows = head\n    ? (Array.from(head.querySelectorAll('nile-grid-row')) as HTMLElement[])\n    : [];\n  const bodyRows = Array.from(\n    body.querySelectorAll('nile-grid-row')\n  ) as HTMLElement[];\n\n  let colCount = 0;\n\n  colCount = computeHeadLayout(headRows, [], colCount);\n  colCount = computeBodyLayout(bodyRows, [], colCount);\n\n  computeColumnWidths(nileGrid, colCount, columnWidths);\n\n  ensureWidths(colCount);\n  body.style.gridAutoRows = 'auto';\n  body.style.overflowY = 'auto';\n  nileGrid.colTemplate = rebuildTemplate(colCount, columnWidths);\n  applyTemplate(head, body, nileGrid.colTemplate, nileGrid.colTemplate);\n};\n"]}

package/dist/src/nile-grid-body/index.d.ts

@@ -0,0 +1 @@
+export { NileGridBody } from './nile-grid-body';

package/dist/src/nile-grid-body/index.js

@@ -0,0 +1,2 @@
+export { NileGridBody } from './nile-grid-body';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-grid-body/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-grid-body/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { NileGridBody } from './nile-grid-body';"]}

package/dist/src/nile-grid-body/nile-grid-body.css.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+/**
+ * GridBody CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;