@aquera/nile-elements 1.0.4-beta-1.2 → 1.0.4-beta-1.4

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.0.4-beta-1.2",
+  "version": "1.0.4-beta-1.4",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -88,7 +88,13 @@
     "./nile-table": "./dist/src/nile-table/index.js",
     "./nile-pagination": "./dist/src/nile-pagination/index.js",
     "./nile-slider": "./dist/src/nile-slider/index.js",
-    "./nile-option-group": "./dist/src/nile-option-group/index.js"
+    "./nile-option-group": "./dist/src/nile-option-group/index.js",
+    "./nile-grid": "./dist/src/nile-grid/index.js",
+    "./nile-grid-body": "./dist/src/nile-grid-body/index.js",
+    "./nile-grid-cell-item": "./dist/src/nile-grid-cell-item/index.js",
+    "./nile-grid-head": "./dist/src/nile-grid-head/index.js",
+    "./nile-grid-head-item": "./dist/src/nile-grid-head-item/index.js",
+    "./nile-grid-row": "./dist/src/nile-grid-row/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -122,7 +128,8 @@
     "@lit-labs/virtualizer": "^2.0.15",
     "codemirror": "6.0.1",
     "chalk": "5.3.0",
-    "figlet": "1.7.0"
+    "figlet": "1.7.0",
+    "@lit-labs/observers": "^2.0.6"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
@@ -191,4 +198,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -82,4 +82,11 @@ export {NilePagination } from './nile-pagination';
 export { NileSlider } from './nile-slider';
 export { NileFileUpload } from './nile-file-upload';
 export { NileFilePreview } from './nile-file-preview';
-export { NileOptionGroup } from './nile-option-group';
+export { NileOptionGroup } from './nile-option-group';
+export { NileGrid } from './nile-grid';
+export { NileGridBody } from './nile-grid-body';
+export { NileGridRow } from './nile-grid-row';
+export { NileGridHeadItem } from './nile-grid-head-item';
+export { NileGridCellItem } from './nile-grid-cell-item';
+export { NileGridHead } from './nile-grid-head';
+export { NileRichTextEditor } from './nile-rich-text-editor';

package/src/nile-button/nile-button.ts

@@ -78,7 +78,7 @@ export class NileButton extends NileElement implements NileFormControl {
     | 'secondary-blue' = 'primary';
 
   /** The button's size. */
-  @property({ reflect: true }) size: 'medium' = 'medium';
+  @state() size = 'medium';
 
   /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
   @property({ type: Boolean, reflect: true }) caret = false;

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

@@ -159,7 +159,7 @@ export const styles = css`
 
  
 .checkbox--disabled:not(.checkbox--checked):not(.checkbox--indeterminate) .checkbox__control {
-  background-color: transparent;
+  background-color: var(--nile-colors-transparent, var(--ng-colors-bg-disabled-subtle));
   border-color: var(
     --nile-checkbox-color-border-standard,
     var(--ng-colors-border-disabled)

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';

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

@@ -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 { css } from 'lit';
+
+/**
+ * Grid Cell Item CSS
+ */
+export const styles = css`
+  :host {
+    --padding: var(--nile-spacing-xl) var(--nile-spacing-3xl);
+    box-sizing: border-box;
+    min-width: 0;
+    white-space: nowrap;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: var(--padding);
+    height: auto;
+    border-bottom: 1px solid var(--nile-colors-neutral-400);
+    border-right: 1px solid var(--nile-colors-neutral-400);
+    position: relative;
+  }
+
+  ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: min-content;
+  }
+
+  .resize-handle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    cursor: col-resize;
+    touch-action: none;
+    z-index: 1;
+    width: 2px;
+    border-right: 1px solid var(--nile-colors-neutral-400);
+  }
+`;
+
+export default [styles];