@aquera/nile-elements 0.1.57 → 0.1.58-beta-1.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.57",
+  "version": "0.1.58-beta-1.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -86,8 +86,7 @@
     "./nile-inline-edit": "./dist/src/nile-inline-edit/index.js",
     "./nile-tour": "./dist/src/nile-tour/index.js",
     "./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-pagination": "./dist/src/nile-pagination/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -191,4 +190,5 @@
       "prettier --write"
     ]
   }
-}
+}
+

package/src/index.ts

@@ -77,5 +77,4 @@ export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
 export { NileTable } from './nile-table';
 export { NileFilterChip } from './nile-filter-chip';
-export {NilePagination } from './nile-pagination';
-export { NileSlider } from './nile-slider';
+export {NilePagination } from './nile-pagination';

package/src/internal/resizable-table-helper.ts

@@ -0,0 +1,151 @@
+/**
+ * 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.
+ */
+
+/**
+ * Resizable Helper Utility
+ * Provides common functionality for resizable table columns
+ */
+
+export interface ResizeOptions {
+  minWidth?: number;
+  startX: number;
+  startWidth: number;
+  element: HTMLElement;
+}
+
+export interface ColumnResizeData {
+  columnIndex: number;
+  newWidth: number;
+}
+
+/**
+ * Handles the start of a resize operation
+ * @param e Mouse event
+ * @param options Resize configuration options
+ * @returns Cleanup function to remove event listeners
+ */
+export function handleResizeStart(e: MouseEvent, options: ResizeOptions): () => void {
+  e.preventDefault();
+  e.stopPropagation();
+  
+  const { minWidth = 50, startX, startWidth, element } = options;
+  const resizer = e.target as HTMLElement;
+  
+  resizer.classList.add('resizing');
+
+  const onMouseMove = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    const delta = e.pageX - startX;
+    const newWidth = Math.max(minWidth, startWidth + delta);
+
+    element.style.width = newWidth + 'px';
+
+    synchronizeColumnWidth(element, newWidth);
+  };
+
+  const onMouseUp = () => {
+    resizer.classList.remove('resizing');
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  };
+
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp);
+
+  return () => {
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  };
+}
+
+/**
+ * Gets the column index of an element within its table row
+ * @param element The table cell or header element
+ * @param selector The CSS selector for the column elements
+ * @returns Column index (0-based)
+ */
+export function getColumnIndex(element: HTMLElement, selector: string): number {
+  const tableRow = element.closest('nile-table-row');
+  if (tableRow) {
+    const columns = tableRow.querySelectorAll(selector);
+    return Array.from(columns).indexOf(element);
+  }
+  return 0;
+}
+
+/**
+ * Synchronizes the width of all cells in the same column
+ * @param sourceElement The element that was resized
+ * @param newWidth The new width to apply
+ */
+export function synchronizeColumnWidth(sourceElement: HTMLElement, newWidth: number): void {
+  const tableBody = sourceElement.closest('nile-table-body');
+  if (!tableBody) return;
+
+  const isHeader = sourceElement.tagName.toLowerCase() === 'nile-table-header-item';
+  const selector = isHeader ? 'nile-table-header-item' : 'nile-table-cell-item';
+  const targetSelector = isHeader ? 'nile-table-cell-item' : 'nile-table-cell-item';
+  
+  const columnIndex = getColumnIndex(sourceElement, selector);
+  const rows = tableBody.querySelectorAll('nile-table-row');
+  
+  rows.forEach(row => {
+    const cells = row.querySelectorAll(targetSelector);
+    if (cells[columnIndex]) {
+      cells[columnIndex].style.width = newWidth + 'px';
+    }
+  });
+}
+
+/**
+ * Checks if an element has the resizable attribute
+ * @param element The element to check
+ * @returns True if the element is resizable
+ */
+export function isResizable(element: HTMLElement): boolean {
+  return element.hasAttribute('resizable');
+}
+
+/**
+ * Creates a resize handler function for use in component event listeners
+ * @param element The element to make resizable
+ * @param minWidth Minimum width constraint
+ * @returns Event handler function
+ */
+export function createResizeHandler(element: HTMLElement, minWidth: number = 50): (e: MouseEvent) => void {
+  return (e: MouseEvent) => {
+    const options: ResizeOptions = {
+      minWidth,
+      startX: e.pageX,
+      startWidth: element.offsetWidth,
+      element
+    };
+    
+    handleResizeStart(e, options);
+  };
+}
+
+/**
+ * Detects if any columns in a table are resizable
+ * @param tableBody The table body element
+ * @returns True if any columns have resizable attribute
+ */
+export function hasResizableColumns(tableBody: HTMLElement): boolean {
+  const headerItems = tableBody.querySelectorAll('nile-table-header-item');
+  const cellItems = tableBody.querySelectorAll('nile-table-cell-item');
+  
+  const hasResizableHeaders = Array.from(headerItems).some(item => 
+    isResizable(item)
+  );
+  const hasResizableCells = Array.from(cellItems).some(item => 
+    isResizable(item)
+  );
+  
+  return hasResizableHeaders || hasResizableCells;
+} 

package/src/internal/resizable-table-styles.ts

@@ -0,0 +1,144 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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';
+
+/**
+ * Resizable Styles Utility
+ * Centralized styles for resizable table functionality
+ */
+
+export const resizableHostStyles = css`
+  :host([resizable]) {
+    position: relative;
+    overflow: hidden;
+    table-layout: fixed;
+  }
+`;
+
+export const resizableHeaderStyles = css`
+  :host([resizable]) {
+    position: relative;
+  }
+
+  :host([resizable]) .header__item__wrapper {
+    border-right: 1px solid var(--nile-colors-neutral-400);
+    position: relative;
+  }
+`;
+
+export const resizerStyles = css`
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: col-resize;
+    user-select: none;
+    background-color: var(--nile-colors-neutral-100);
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    right: 3px;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background-color: var(--nile-colors-neutral-500);
+    opacity: 0.8;
+  }
+
+  .resizer:hover {
+    background-color: var(--nile-colors-neutral-400);
+  }
+
+  .resizer:hover::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+  }
+
+  .resizer.resizing {
+    background-color: var(--nile-colors-neutral-400);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer.resizing::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+    width: 3px;
+  }
+`;
+
+export const headerResizerStyles = css`
+  .resizer {
+    position: absolute;
+    right: -2px;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: ew-resize;
+    user-select: none;
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    height: 100%;
+    opacity: 0.8;
+  }
+
+  .resizer.resizing {
+    border-right: 4px double var(--nile-colors-neutral-400);
+    background-color: transparent;
+    opacity: 1;
+  }
+`;
+
+export const resizableSlotStyles = css`
+  :host([resizable]) ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  :host([resizable]) ::slotted(span),
+  :host([resizable]) ::slotted(div),
+  :host([resizable]) ::slotted(p) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`;
+
+export const tableLayoutStyles = css`
+  .nile__table__body[resizable] {
+    table-layout: fixed;
+  }
+`; 

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

@@ -6,6 +6,7 @@
  */
 
 import { css } from 'lit';
+import { tableLayoutStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableBody CSS
@@ -48,6 +49,9 @@ export const styles = css`
   slot::slotted(nile-table-row:last-child) {
     border-bottom: 0px;
   }
+
+  /* Import resizable styles */
+  ${tableLayoutStyles}
 `;
 
 export default [styles];

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

@@ -24,6 +24,7 @@ import {
 import { styles } from './nile-table-body.css';
 import NileElement from '../internal/nile-element';
 import { getInnerHTML } from '../slot';
+import { hasResizableColumns } from '../internal/resizable-table-helper';
 
 /**
  * nile-table-body component.
@@ -46,6 +47,7 @@ export class NileTableBody extends NileElement {
   @state() private header_rows_data: any[] = [];
   @state() private sort__index: number;
   @state() private search__index: number;
+  @state() private hasResizableColumns = false;
 
   public static get styles(): CSSResultArray {
     return [styles];
@@ -67,6 +69,10 @@ export class NileTableBody extends NileElement {
     return this.header_rows_data.indexOf(index__value);
   }
 
+  private checkForResizableColumns() {
+    this.hasResizableColumns = hasResizableColumns(this);
+  }
+
   handleSlotchange(e: any) {
     let row_data: any = [];
     this._childNodes.forEach((child: any) => {
@@ -88,6 +94,9 @@ export class NileTableBody extends NileElement {
         row_data = [];
       }
     });
+    
+    // Check for resizable columns after slot change
+    this.checkForResizableColumns();
   }
 
   private handleSort(e: any) {
@@ -115,6 +124,7 @@ export class NileTableBody extends NileElement {
           @slotchange=${this.handleSlotchange}
           @nile-click-sort=${this.handleSort}
           class="nile__table__body"
+          ?resizable=${this.hasResizableColumns}
           @nile-search=${this.handleSearch}
         ></slot>
       </div>

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

@@ -6,6 +6,7 @@
  */
 
 import { css } from 'lit';
+import { resizableHostStyles, resizerStyles, resizableSlotStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableCellItem CSS
@@ -19,11 +20,20 @@ export const styles = css`
     box-sizing: border-box;
     display: table-cell;
     vertical-align: middle;
-    max-width: var(--max--cell-width);
     padding: 16px 24px;
+    max-width: var(--max--cell-width);  
     min-height: var(--min--height);
   }
 
+  .cell__wrapper {
+    height: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    width: 100%;
+  }
+
   .column {
     min-width:var(--min-cell-width);
     width:var(--cell-width);
@@ -36,7 +46,16 @@ export const styles = css`
     /* line-height: var(--nile-type-scale-6); */
     line-height: normal;
     letter-spacing: 0.2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
   }
+
+  /* Import resizable styles */
+  ${resizableHostStyles}
+  ${resizerStyles}
+  ${resizableSlotStyles}
 `;
 
 export default [styles];

package/src/nile-table-cell-item/nile-table-cell-item.ts

@@ -15,6 +15,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-table-cell-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
+import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile table Cell Item component.
@@ -33,20 +34,36 @@ export class NileTableCellItem extends NileElement {
     return [styles];
   }
 
+  /** Enables the resize functionality. */
+  @property({ type: Boolean, reflect: true }) resizable = false;
+
   /* #endregion */
 
   /* #region Methods */
 
+  private handleResizeStart = createResizeHandler(this, 50);
+
   /**
    * Render method
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    return html`
-      ${this.hasSlotController.test('[default]')
-        ? html` <slot class="column" part="nile__table-cell"> </slot>`
-        : ''}
-    `;
+    if (this.resizable) {
+      return html`
+        <div class="cell__wrapper" part="nile__table-cell">
+          ${this.hasSlotController.test('[default]')
+            ? html` <div class="column" part="nile__table-cell"><slot></slot></div>`
+            : ''}
+          <div class="resizer" @mousedown=${this.handleResizeStart}></div>
+        </div>
+      `;
+    } else {
+      return html`
+        ${this.hasSlotController.test('[default]')
+          ? html` <slot class="column" part="nile__table-cell"> </slot>`
+          : ''}
+      `;
+    }
   }
 
   /* #endregion */

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -6,6 +6,7 @@
  */
 
 import { css } from 'lit';
+import { resizableHeaderStyles, headerResizerStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableHeaderItem CSS
@@ -44,6 +45,8 @@ export const styles = css`
     font-style: normal;
     /* line-height: var(--nile-type-scale-5); */
     line-height: normal;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   nile-icon {
@@ -67,6 +70,10 @@ export const styles = css`
   .headers:hover .hover__arrow {
     opacity: 0.3;
   }
+
+  /* Import resizable styles */
+  ${resizableHeaderStyles}
+  ${headerResizerStyles}
 `;
 
 export default [styles];

package/src/nile-table-header-item/nile-table-header-item.ts

@@ -15,6 +15,7 @@ import { customElement, state, property } from 'lit/decorators.js';
 import { styles } from './nile-table-header-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
+import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile icon component.
@@ -43,6 +44,9 @@ export class NileTableHeaderItem extends NileElement {
   @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =
     '';
 
+  /** Enables the resize functionality. */
+  @property({ type: Boolean, reflect: true }) resizable = false;
+
   @state() sorting_ct = 0;
 
   /* #endregion */
@@ -66,53 +70,98 @@ export class NileTableHeaderItem extends NileElement {
     this.emit('nile-search', { value: e.detail.value });
   }
 
+  private handleResizeStart = createResizeHandler(this, 50);
+
   public render(): TemplateResult {
-    return html` ${this.hasSlotController.test('[default]')
-      ? html`
-      <div class="header__item__wrapper" part="nile__table-header-cell">
-        <div class="headers">
-          <slot> </slot>
-          ${this.havesort && this.sorting_ct % 3 === 0
-            ? html`<nile-icon
-                name="sortdown"
-                size="16"
-                @click=${this.handleSort}
-                class="hover__arrow"
-              ></nile-icon>`
-            : null}
-          ${this.havesort && this.sorting_ct % 3 === 1
-            ? html`<nile-icon
-                name="sortdown"
-                size="16"
-                @click=${this.handleSort}
-              ></nile-icon>`
-            : null}
-          ${this.havesort && this.sorting_ct % 3 === 2
-            ? html`<nile-icon
-                name="sortup"
-                size="16"
-                @click=${this.handleSort}
-              ></nile-icon>`
-            : null}
-          ${this.iconName
-            ? html` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
-            : html``}
-          ${this.havefilter
-            ? html` <nile-popover title="Filter" placement="bottom">
-                <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
-                <nile-input
-                  placeholder="Search"
-                  @nile-input=${this.handleSearch}
-                  part="filter__search"
-                ></nile-input>
-                <slot name="filter__content" part="filter__content"></slot>
-              </nile-popover>`
-            : html``}
-        </div>
-      </div>`
-      : null}`;
+    if (this.resizable) {
+      return html`
+        <div class="header__item__wrapper" part="nile__table-header-cell">
+          <div class="headers">
+            <slot> </slot>
+            ${this.havesort && this.sorting_ct % 3 === 0
+              ? html`<nile-icon
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                  class="hover__arrow"
+                ></nile-icon>`
+              : null}
+            ${this.havesort && this.sorting_ct % 3 === 1
+              ? html`<nile-icon
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+              : null}
+            ${this.havesort && this.sorting_ct % 3 === 2
+              ? html`<nile-icon
+                  name="sortup"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+              : null}
+            ${this.iconName
+              ? html` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
+              : html``}
+            ${this.havefilter
+              ? html` <nile-popover title="Filter" placement="bottom">
+                  <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
+                  <nile-input
+                    placeholder="Search"
+                    @nile-input=${this.handleSearch}
+                    part="filter__search"
+                  ></nile-input>
+                  <slot name="filter__content" part="filter__content"></slot>
+                </nile-popover>`
+              : html``}
+          </div>
+          <div class="resizer" @mousedown=${this.handleResizeStart}></div>
+        </div>`;
+    } else {
+      return html`
+        <div class="header__item__wrapper" part="nile__table-header-cell">
+          <div class="headers">
+            <slot> </slot>
+            ${this.havesort && this.sorting_ct % 3 === 0
+              ? html`<nile-icon
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                  class="hover__arrow"
+                ></nile-icon>`
+              : null}
+            ${this.havesort && this.sorting_ct % 3 === 1
+              ? html`<nile-icon
+                  name="sortdown"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+              : null}
+            ${this.havesort && this.sorting_ct % 3 === 2
+              ? html`<nile-icon
+                  name="sortup"
+                  size="16"
+                  @click=${this.handleSort}
+                ></nile-icon>`
+              : null}
+            ${this.iconName
+              ? html` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
+              : html``}
+            ${this.havefilter
+              ? html` <nile-popover title="Filter" placement="bottom">
+                  <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
+                  <nile-input
+                    placeholder="Search"
+                    @nile-input=${this.handleSearch}
+                    part="filter__search"
+                  ></nile-input>
+                  <slot name="filter__content" part="filter__content"></slot>
+                </nile-popover>`
+              : html``}
+          </div>
+        </div>`;
+    }
   }
-  /* #endregion */
 }
 
 export default NileTableHeaderItem;