@aquera/nile-elements 1.2.1 → 1.2.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -80,11 +80,11 @@ export { NileFileUpload } from './nile-file-upload';
 export { NileFilePreview } from './nile-file-preview';
 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 { NileGridBody } from './nile-grid/nile-grid-body';
+export { NileGridRow } from './nile-grid/nile-grid-row';
+export { NileGridHeadItem } from './nile-grid/nile-grid-head-item';
+export { NileGridCellItem } from './nile-grid/nile-grid-cell-item';
+export { NileGridHead } from './nile-grid/nile-grid-head';
 export { NileRichTextEditor } from './nile-rich-text-editor';
 
 // Import version utility to set nile version in window object

package/src/{nile-grid-body → nile-grid/nile-grid-body}/nile-grid-body.css.ts

@@ -12,12 +12,8 @@ import { css } from 'lit';
  */
 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%;
   }
 `;
 

package/src/{nile-grid-body → nile-grid/nile-grid-body}/nile-grid-body.ts

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-grid-body.css';
-import NileElement from '../internal/nile-element';
+import NileElement from '../../internal/nile-element';
 
 /**
  * Nile grid-body component.
@@ -33,7 +33,7 @@ export class NileGridBody extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <div style="display: contents;">
+      <div part="grid-body-base">
         <slot></slot>
       </div>
     `;

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

@@ -0,0 +1,81 @@
+/**
+ * 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-10px);
+    box-sizing: border-box;
+    min-width: 0;
+    white-space: nowrap;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: var(--padding);
+    height: auto;
+    font-size: 14px;
+    font-weight: 400;
+    font-family: var(--nile-font-weight-regular);
+    min-height: 44px;
+  }
+
+  .cell-item-base {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :host(:last-child) .resize-handle {
+    border-right: none;
+    display: none;
+  }
+
+  .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);
+    display: none;
+  }
+
+  :host(.shadow-right) {
+    box-shadow: var(--nile-box-shadow-14);
+    background-color: #fff;
+  }
+
+  :host(.shadow-left) {
+    box-shadow: var(--nile-box-shadow-14);
+    background-color: #fff;
+  }
+
+  :host-context(nile-grid-row[hover]:hover),
+  :host-context(nile-grid-row[hover]:hover):host([data-sticky]) {
+    background-color: var(--nile-colors-neutral-100);
+  }
+
+  :host-context(nile-grid-row[selected]),
+  :host-context(nile-grid-row[selected]):host([data-sticky]) {
+    background-color: var(--nile-colors-primary-100) !important;
+  }
+`;
+
+export default [styles];

package/src/{nile-grid-cell-item → nile-grid/nile-grid-cell-item}/nile-grid-cell-item.ts

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-grid-cell-item.css';
-import NileElement from '../internal/nile-element';
+import NileElement from '../../internal/nile-element';
 import {
   initCellResize,
   cellResizeMove,
@@ -33,16 +33,7 @@ export class NileGridCellItem extends NileElement {
 
   @property({ type: Number, reflect: true, attribute: true }) colspan = 1;
   @property({ type: Number, reflect: true, attribute: true }) rowspan = 1;
-  @property({ type: String, reflect: true, attribute: true }) align?:
-    | 'start'
-    | 'center'
-    | 'end';
-  @property({ type: String, reflect: true, attribute: true }) valign?:
-    | 'top'
-    | 'middle'
-    | 'bottom';
   @property({ type: Boolean, reflect: true, attribute: true }) resizable = false;
-  @property({ type: Boolean, reflect: true, attribute: true }) textOverflowType: 'ellipsis' | 'clip' = 'ellipsis';
 
   connectedCallback() {
     super.connectedCallback();
@@ -50,6 +41,7 @@ export class NileGridCellItem extends NileElement {
   }
 
   private onHandlePointerDown = (ev: PointerEvent) => {
+    
     const el = this as HTMLElement;
 
     const downXRef = { value: 0 };
@@ -59,9 +51,7 @@ export class NileGridCellItem extends NileElement {
     if (!result) return;
 
     const { target, col } = result;
-
-    const move = (e: PointerEvent) =>
-      cellResizeMove(el, col, startWRef.value, downXRef.value, e);
+    const move = (e: PointerEvent) => cellResizeMove(el, col, startWRef.value, downXRef.value, e);
     const done = () => cellResizeDone(el, ev, target, move);
 
     target.addEventListener('pointermove', move);
@@ -71,7 +61,7 @@ export class NileGridCellItem extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <div style="display: contents;">
+      <div class="cell-item-base" part="grid-cell-item-base">
         <slot></slot>
         ${this.resizable
           ? html`

package/src/{nile-grid-head → nile-grid/nile-grid-head}/nile-grid-head.ts

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-grid-head.css';
-import NileElement from '../internal/nile-element';
+import NileElement from '../../internal/nile-element';
 
 /**
  * Nile grid-head component.
@@ -26,13 +26,15 @@ export class NileGridHead extends NileElement {
     return [styles];
   }
 
+  @property({ type: Boolean, reflect: true, attribute: true }) sticky: boolean = false;
+
   /* #endregion */
 
   /* #region Methods */
 
   public render(): TemplateResult {
     return html`
-      <div style="display: contents;">
+      <div part="grid-head-base">
         <slot></slot>
       </div>
     `;

package/src/{nile-grid-head-item → nile-grid/nile-grid-head-item}/nile-grid-head-item.css.ts

@@ -12,18 +12,28 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --padding: var(--nile-spacing-xl) var(--nile-spacing-3xl);
+    --padding: var(--nile-spacing-lg) var(--nile-spacing-10px);
+    --height: 50px;
     position: relative;
     box-sizing: border-box;
-    user-select: none;
     white-space: nowrap;
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     padding: var(--padding);
     background-color: var(--nile-colors-neutral-100);
-    border-bottom: 1px solid var(--nile-colors-neutral-400);
-    border-right: 1px solid var(--nile-colors-neutral-400);
+    font-size: var(--nile-font-size-small);
+    font-weight: var(--nile-font-weight-medium);
+    font-family: var(--nile-font-family-sans-serif);
+    min-height: var(--height);
+    display: flex;
+    align-items: center;
+  }
+
+  .head-item-base {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   ::slotted(*) {
@@ -32,17 +42,32 @@ export const styles = css`
     white-space: nowrap;
   }
 
+  :host(:last-child) .resize-handle {
+    border-right: none;
+    display: none;
+  }
+
   .resize-handle {
     position: absolute;
     top: 0;
     right: 0;
     height: 100%;
-    cursor: col-resize;
+    cursor: ew-resize;
     touch-action: none;
     z-index: 1;
     width: 2px;
     border-right: 1px solid var(--nile-colors-neutral-400);
   }
+
+  :host(.shadow-right) {
+    box-shadow: var(--nile-box-shadow-13);
+    background-color: var(--nile-colors-neutral-100);
+  }
+
+  :host(.shadow-left) {
+    box-shadow: var(--nile-box-shadow-13);
+    background-color: var(--nile-colors-neutral-100);
+  }
 `;
 
 export default [styles];

package/src/{nile-grid-head-item → nile-grid/nile-grid-head-item}/nile-grid-head-item.ts

@@ -5,15 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-grid-head-item.css';
-import NileElement from '../internal/nile-element';
+import NileElement from '../../internal/nile-element';
 import {
   initHeadResize,
   headResizeMove,
   headResizeDone,
 } from './nile-grid-head-item.utils';
+import { NileGrid } from '../nile-grid';
 
 /**
  * Nile grid-head-item component.
@@ -33,23 +34,18 @@ export class NileGridHeadItem extends NileElement {
 
   @property({ type: Number, reflect: true, attribute: true }) colspan = 1;
   @property({ type: Number, reflect: true, attribute: true }) rowspan = 1;
-  @property({ type: String, reflect: true, attribute: true }) scope:
-    | 'col'
-    | 'row' = 'col';
   @property({ type: Boolean, reflect: true, attribute: true }) resizable = false;
-  @property({ type: Boolean, reflect: true, attribute: true }) sticky = false;
+  @property({ type: String, reflect: true, attribute: true }) width: string | null = null;
+  @property({ type: String, reflect: true, attribute: true }) sticky: string | null = null;
 
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute(
-      'role',
-      this.scope === 'row' ? 'rowheader' : 'columnheader'
-    );
+    this.setAttribute('role','row');
   }
 
   private onHandlePointerDown = (ev: PointerEvent) => {
     const el = this as HTMLElement;
-
+    const nileGrid = this.closest('nile-grid') as NileGrid;
     const downXRef = { value: 0 };
     const startWRef = { value: 0 };
 
@@ -57,10 +53,7 @@ export class NileGridHeadItem extends NileElement {
     if (!result) return;
 
     const { target, col } = result;
-
-    const move = (e: PointerEvent) =>
-      headResizeMove(el, col, startWRef.value, downXRef.value, e);
-
+    const move = (e: PointerEvent) => headResizeMove(el, col, startWRef.value, downXRef.value, e, nileGrid);
     const done = () => headResizeDone(el, ev, target, move);
 
     target.addEventListener('pointermove', move);
@@ -68,15 +61,6 @@ export class NileGridHeadItem extends NileElement {
     target.addEventListener('pointercancel', done, { once: true });
   };
 
-  protected updated(changed: Map<string, unknown>) {
-    if (changed.has('scope')) {
-      this.setAttribute(
-        'role',
-        this.scope === 'row' ? 'rowheader' : 'columnheader'
-      );
-    }
-  }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeAttribute('role');
@@ -84,13 +68,14 @@ export class NileGridHeadItem extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <div style="display: contents;">
+      <div part="grid-head-item-base" class="head-item-base">
         <slot></slot>
         ${this.resizable
           ? html`
               <div
                 aria-hidden="false"
                 class="resize-handle"
+                part="resize-handle"
                 @pointerdown=${this.onHandlePointerDown}
               ></div>
             `

package/src/{nile-grid-head-item → nile-grid/nile-grid-head-item}/nile-grid-head-item.utils.ts

@@ -1,3 +1,12 @@
+import { NileGrid } from "../nile-grid";
+
+/** initHeadResize
+ * @param el Target element
+ * @param ev Pointer event
+ * @param downXRef Reference to store downX value
+ * @param startWRef Reference to store startW value
+ * @returns Object containing target element and column index
+ */
 export function initHeadResize(
   el: HTMLElement,
   ev: PointerEvent,
@@ -20,7 +29,7 @@ export function initHeadResize(
   target.setPointerCapture(ev.pointerId);
 
   el.dispatchEvent(
-    new CustomEvent('nile-resize', {
+    new CustomEvent('nile-column-resize', {
       detail: { col, widthPx: startWRef.value },
       bubbles: true,
       composed: true,
@@ -34,16 +43,26 @@ export function initHeadResize(
   return { target, col };
 }
 
+/** headResizeMove
+ * @param el Target element
+ * @param col Column index
+ * @param startW Starting width
+ * @param downX Down X coordinate
+ * @param e Pointer event
+ * @param nileGrid NileGrid instance
+ * @returns void
+ */
 export function headResizeMove(
   el: HTMLElement,
   col: number,
   startW: number,
   downX: number,
-  e: PointerEvent
+  e: PointerEvent,
+  nileGrid: NileGrid
 ) {
-  const widthPx = Math.max(40, Math.round(startW + (e.clientX - downX)));
+  const widthPx = Math.max(nileGrid.minColumnWidth, Math.round(startW + (e.clientX - downX)));
   el.dispatchEvent(
-    new CustomEvent('nile-resize', {
+    new CustomEvent('nile-column-resize', {
       detail: { col, widthPx },
       bubbles: true,
       composed: true,
@@ -51,6 +70,13 @@ export function headResizeMove(
   );
 }
 
+/** headResizeDone
+ * @param el Target element
+ * @param ev Pointer event
+ * @param target Target element
+ * @param move Pointer move handler
+ * @returns void
+ */
 export function headResizeDone(
   el: HTMLElement,
   ev: PointerEvent,

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

@@ -0,0 +1,50 @@
+/**
+ * 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';
+
+/**
+ * GridRow CSS
+ */
+export const styles = css`
+  .row-base {
+    display: grid;
+    grid-template-columns: var(--nile-grid-columns);
+    border-bottom: 1px solid var(--nile-colors-neutral-400);
+    background-color: var(--nile-colors-white-base);
+    position: relative;
+  }
+
+  .row-bg {
+    grid-column: 1 / -1;
+    pointer-events: none;
+    z-index: 0;
+    display: none;
+  }
+
+  .row-slot {
+    grid-column: 1 / -1;
+    display: contents;
+    z-index: 1;
+  }
+
+  :host([disabled]) {
+    background: var(--nile-colors-white-base);
+    border-bottom: 1px solid var(--nile-colors-neutral-400);
+    opacity: 0.3;
+  }
+
+  :host([selected]) {
+    background: var(--nile-colors-primary-100);
+  }
+
+  :host-context(nile-grid-body):host(:last-child) {
+    border-bottom: none;
+  }
+`;
+
+export default [styles];

package/src/{nile-grid-row → nile-grid/nile-grid-row}/nile-grid-row.ts

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-grid-row.css';
-import NileElement from '../internal/nile-element';
+import NileElement from '../../internal/nile-element';
 
 /**
  * Nile grid-row component.
@@ -26,17 +26,22 @@ export class NileGridRow extends NileElement {
     return [styles];
   }
 
+  @property({ type: Boolean, reflect: true, attribute: true }) disabled: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) hover: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) selected: boolean = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'row');
   }
 
-  public render(): TemplateResult {
+  protected render() {
     return html`
-      <div part="row-layer" class="row-layer" data-row-bg></div>
-
-      <div style="display: contents;">
-        <slot></slot>
+      <div part="grid-row-base" class="row-base">
+        <div part="row-slot" class="row-slot">
+          <slot></slot>
+        </div>
+        <div part="row-bg" class="row-bg"></div>
       </div>
     `;
   }

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

@@ -9,28 +9,31 @@ import { css } from 'lit';
 
 export const styles = css`
   :host {
+    --min-width: 180px;
     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);
+    background-color: var(--nile-colors-white-base);
     max-height: 100%;
+    width: 100%;
+    min-width: var(--min-width);
+    box-shadow: var(--nile-box-shadow-3);
   }
 
   ::slotted(nile-grid-head),
   ::slotted(nile-grid-body) {
     inline-size: 100%;
-    display: grid;
   }
 
   .nile-resize-start,
   .nile-resize-end {
-    position: fixed;
-    z-index: 2;
+    position: absolute;
+    z-index: 4;
     background-color: var(--nile-colors-neutral-400);
     width: 2px;
     height: 100%;