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

package/src/nile-code-editor/nile-code-editor.ts

@@ -105,7 +105,7 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true, attribute: true }) defaultFont: boolean = false;
 
-  @property({ type: Boolean, reflect: true, attribute: true }) containerWidth: boolean = false;
+  @property({ type: Object, attribute: false }) autoCompleteStyle: { width?: string; multiline?: boolean } | undefined = undefined;
 
   public view: EditorView;
   public viewState:EditorState;
@@ -121,7 +121,7 @@ export class NileCodeEditor extends NileElement {
   private defaultSyntaxHighlightingComp = new Compartment();
   private themeComp = new Compartment();
   private autoCompletionComp = new Compartment();
-  private containerWidthComp = new Compartment();
+  private autoCompleteStyleComp = new Compartment();
 
   private isSpacePressed:boolean = false;
   /**
@@ -147,8 +147,7 @@ export class NileCodeEditor extends NileElement {
   firstUpdated() {
     this.createNewView()
     
-    // Initialize ResizeObserver to watch for container resize
-    if (this.containerWidth) {
+    if (this.autoCompleteStyle?.width) {
       this.resizeObserver = new ResizeObserver(entries => {
         for (const entry of entries) {
           const width = entry.contentRect.width;
@@ -244,9 +243,8 @@ export class NileCodeEditor extends NileElement {
         ]
       })
     }
-    if(changedProperties.has('containerWidth') && this.view){
-      if (this.containerWidth) {
-        // Initialize ResizeObserver if containerWidth is enabled
+    if(changedProperties.has('autoCompleteStyle') && this.view){
+      if (this.autoCompleteStyle?.width) {
         if (!this.resizeObserver) {
           this.resizeObserver = new ResizeObserver(entries => {
             for (const entry of entries) {
@@ -257,14 +255,13 @@ export class NileCodeEditor extends NileElement {
           this.resizeObserver.observe(this.codeEditor);
         }
       } else {
-        // Disconnect ResizeObserver if containerWidth is disabled
         this.resizeObserver?.disconnect();
         this.resizeObserver = undefined;
       }
       
       this.view.dispatch({ 
         effects: [
-          this.containerWidthComp.reconfigure(this.getContainerWidthExtension())
+          this.autoCompleteStyleComp.reconfigure(this.getAutoCompleteStyleExtension())
         ]
       })
     }
@@ -349,7 +346,7 @@ export class NileCodeEditor extends NileElement {
     const placeholderExtension = this.placeholderComp.of(this.getPlaceholderExtension())
     const customThemeExtension=this.themeComp.of(this.getCustomThemeExtension());
     const defaultSyntaxHighlightingExtension = this.defaultSyntaxHighlightingComp.of(this.getDefaultSyntaxHighlightingExtension());
-    const containerWidthExtension = this.containerWidthComp.of(this.getContainerWidthExtension());
+    const autoCompleteStyleExtension = this.autoCompleteStyleComp.of(this.getAutoCompleteStyleExtension());
     const language = this.getLanguageExtension()
     const customAutoCompletions = this.customCompletionComp.of(javascriptLanguage.data.of({
       autocomplete: this.customAutocomplete
@@ -374,7 +371,7 @@ export class NileCodeEditor extends NileElement {
         ),
         language,
         customThemeExtension,
-        containerWidthExtension,
+        autoCompleteStyleExtension,
         this.getTabCompletionKeymap(),
         EditorView.updateListener.of((v: ViewUpdate) => {
           if (v.docChanged) {
@@ -607,19 +604,46 @@ export class NileCodeEditor extends NileElement {
     return [EditorView.theme(customisedThemeCss)];
   }
 
-  getContainerWidthExtension(width?: number): Extension {
-      if (this.containerWidth) {
-        const codeEditorWidth = width || (this.codeEditor ? this.codeEditor.getBoundingClientRect().width : 300);
-        return [
+  getAutoCompleteStyleExtension(width?: number): Extension {
+      if (this.autoCompleteStyle?.width) {
+        const containerWidth = width || (this.codeEditor ? this.codeEditor.getBoundingClientRect().width : 300);
+        const widthPercentage = parseFloat(this.autoCompleteStyle.width.replace('%', ''));
+        const codeEditorWidth = (containerWidth * widthPercentage) / 100;
+        
+        const multilineStyles: { [key: string]: string } = this.autoCompleteStyle.multiline ? {
+          overflow: "visible",
+          textOverflow: "unset",
+          whiteSpace: "normal",
+          wordWrap: "break-word"
+        } : {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        };
+        
+        return [ 
+          tooltips({
+            position: "fixed", 
+            tooltipSpace: () => {
+              const rect = this.codeEditor.getBoundingClientRect();
+              return {
+                left: rect.left,
+                top: 0,
+                right: rect.right,
+                bottom: 1000
+              };
+            }
+          }),
           EditorView.theme({
           ".cm-tooltip.cm-tooltip-autocomplete": {
-            maxWidth: (codeEditorWidth - 15) + "px"
+            maxWidth: (codeEditorWidth - 15) + "px !important"
           },
           ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
+            ...multilineStyles,
             maxWidth: "100%"
+          },
+          ".cm-tooltip.cm-tooltip-autocomplete > ul": {
+            minWidth: "unset !important"
           }
         })
       ];
@@ -630,7 +654,7 @@ export class NileCodeEditor extends NileElement {
   private updateAutocompleteWidth(width: number) {
     if (this.view) {
       this.view.dispatch({
-        effects: this.containerWidthComp.reconfigure(this.getContainerWidthExtension(width))
+        effects: this.autoCompleteStyleComp.reconfigure(this.getAutoCompleteStyleExtension(width))
       });
     }
   }

package/src/nile-grid/index.ts

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

package/src/nile-grid/nile-grid.css.ts

@@ -0,0 +1,43 @@
+/**
+ * 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 { css } from 'lit';
+
+export const styles = css`
+  :host {
+    display: grid;
+    grid-template-rows: auto;
+    overflow: auto;
+    inline-size: 100%;
+    position: relative;
+    contain: content;
+    box-sizing: border-box;
+    border: 1px solid var(--nile-colors-neutral-400);
+    border-radius: var(--nile-radius-radius-xl);
+    max-height: 100%;
+  }
+
+  ::slotted(nile-grid-head),
+  ::slotted(nile-grid-body) {
+    inline-size: 100%;
+    display: grid;
+  }
+
+  .nile-resize-start,
+  .nile-resize-end {
+    position: fixed;
+    z-index: 2;
+    background-color: var(--nile-colors-neutral-400);
+    width: 2px;
+    height: 100%;
+    top: 0;
+    display: none;
+    bottom: 0;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,185 @@
+/**
+ * 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 { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { styles } from './nile-grid.css';
+import NileElement from '../internal/nile-element';
+import {
+  resizeLinesHandler,
+  listenToEventListeners,
+  removeEventListeners,
+  getHead,
+  getBody,
+  rebuildTemplate,
+  applyTemplate,
+  layout,
+} from './nile-grid.utils';
+
+/**
+ * Nile grid component.
+ *
+ * @tag nile-grid
+ *
+ */
+@customElement('nile-grid')
+export class NileGrid extends NileElement {
+  /**
+   * The styles for nile-grid
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+  /** User can pass custom widths for the columns */
+  @property({ type: Array, attribute: true }) customWidths: number[] = [];
+
+  /** To set the grid template columns in rebuildTemplate method */
+  @state() public colTemplate = '';
+
+  /** To store the column widths in the beginning and after resizing */
+  @state() private columnWidths: number[] = [...this.customWidths];
+
+  /** To get the slot element */
+  @query('slot') private slotEl!: HTMLSlotElement;
+
+  /** To get the first resize line to show the resize handle */
+  @query('.nile-resize-start') resizeStart: HTMLElement;
+
+  /** To get the last resize line to show the resize handle */
+  @query('.nile-resize-end') resizeEnd: HTMLElement;
+
+  /** To store the mutation observer */
+  private mo?: MutationObserver;
+
+  /** To store the request animation frame */
+  private raf = 0;
+
+  private 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
+      );
+    });
+  }
+
+  private ensureWidths(colCount: number) {
+    if (this.columnWidths.length !== colCount) {
+      this.columnWidths = Array(colCount).fill('');
+    }
+  }
+
+  private onResize = (e: Event) => {
+    const { col, widthPx } = (e as CustomEvent).detail as {
+      col: number;
+      widthPx: number;
+    };
+    let w: any;
+    const floor = 60;
+
+    if (
+      (e.target as HTMLElement).getAttribute('colspan') &&
+      parseInt((e.target as HTMLElement).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);
+  };
+
+  protected firstUpdated() {
+    this.setAttribute('role', 'table');
+    listenToEventListeners(
+      this,
+      this.onResize,
+      this.slotEl,
+      this._attachObserverAndLayout.bind(this)
+    );
+  }
+
+  private _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
+    );
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div>
+        <slot></slot>
+        <div class="nile-resize-start"></div>
+        <div class="nile-resize-end"></div>
+      </div>
+    `;
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback?.();
+    this.mo?.disconnect();
+
+    if (this.raf) cancelAnimationFrame(this.raf);
+    removeEventListeners(
+      this,
+      this.onResize,
+      this.slotEl,
+      this._attachObserverAndLayout.bind(this)
+    );
+  }
+
+  /* #endregion */
+}
+
+export default NileGrid;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-grid': NileGrid;
+  }
+}

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

@@ -0,0 +1,252 @@
+import { NileGrid } from './nile-grid';
+
+export const resizeLinesHandler = (
+  resizeStart: any,
+  resizeEnd: any,
+  col: number,
+  widthPx: number,
+  scrollHeight: any,
+  columnWidths: any,
+  e: any
+) => {
+  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 as HTMLElement).getAttribute('colspan') &&
+      parseInt((e.target as HTMLElement).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: NileGrid,
+  onResize: any,
+  slotEl: any,
+  _attachObserverAndLayout: any
+) => {
+  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: NileGrid,
+  onResize: any,
+  slotEl: any,
+  _attachObserverAndLayout: any
+) => {
+  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: any) => {
+  const nodes = slotEl?.assignedElements() ?? [];
+  return (
+    (nodes.find(
+      (n: any) => n.tagName.toLowerCase() === 'nile-grid-head'
+    ) as HTMLElement) || null
+  );
+};
+
+export const getBody = (slotEl: any) => {
+  const nodes = slotEl?.assignedElements() ?? [];
+  return (
+    (nodes.find(
+      (n: any) => n.tagName.toLowerCase() === 'nile-grid-body'
+    ) as HTMLElement) || null
+  );
+};
+
+export const rebuildTemplate = (
+  colCount: number,
+  columnWidths: number[]
+): string => {
+  const parts: string[] = [];
+
+  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: HTMLElement | null,
+  body: HTMLElement | null,
+  colTemplate: string
+) => {
+  if (head) head.style.gridTemplateColumns = colTemplate;
+  if (body) {
+    body.style.gridTemplateColumns = colTemplate;
+    body.style.overflowX = 'auto';
+  }
+};
+
+function computeHeadLayout(
+  headRows: HTMLElement[],
+  carryHead: number[],
+  colCount: number
+): number {
+  headRows.forEach((row, rIdx) => {
+    let c = 1;
+    const cells = Array.from(
+      row.querySelectorAll('nile-grid-head-item, nile-grid-cell')
+    ) as HTMLElement[];
+    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 as any).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: HTMLElement[],
+  carryBody: number[],
+  colCount: number
+) {
+  bodyRows.forEach((row, rIdx) => {
+    let c = 1;
+    const cells = Array.from(
+      row.querySelectorAll('nile-grid-cell, nile-grid-header')
+    ) as HTMLElement[];
+    const rStart = rIdx + 1;
+    let maxRowspan = 1;
+
+    const bg = row.shadowRoot?.querySelector<HTMLElement>('[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 as any).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: NileGrid,
+  colCount: number,
+  columnWidths: number[]
+) {
+  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: NileGrid,
+  slotEl: any,
+  ensureWidths: any,
+  rebuildTemplate: any,
+  applyTemplate: any,
+  columnWidths: any
+) => {
+  const head = getHead(slotEl);
+  const body = getBody(slotEl);
+  if (!body) return;
+
+  const headRows = head
+    ? (Array.from(head.querySelectorAll('nile-grid-row')) as HTMLElement[])
+    : [];
+  const bodyRows = Array.from(
+    body.querySelectorAll('nile-grid-row')
+  ) as HTMLElement[];
+
+  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);
+};

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

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

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

@@ -0,0 +1,24 @@
+/**
+ * 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 { css } from 'lit';
+
+/**
+ * GridBody CSS
+ */
+export const styles = css`
+  :host {
+    display: grid;
+    overflow-y: auto;
+    overflow-x: visible;
+    box-sizing: border-box;
+    background-color: var(--nile-colors-white-base);
+    height: 100%;
+  }
+`;
+
+export default [styles];

package/src/nile-grid-body/nile-grid-body.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-grid-body.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile grid-body component.
+ *
+ * @tag nile-grid-body
+ *
+ */
+@customElement('nile-grid-body')
+export class NileGridBody extends NileElement {
+  /**
+   * The styles for nile-grid-body
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'rowgroup');
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div style="display: contents;">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileGridBody;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-grid-body': NileGridBody;
+  }
+}

package/src/nile-grid-cell-item/index.ts

@@ -0,0 +1 @@
+export { NileGridCellItem } from './nile-grid-cell-item';