@aquera/nile-elements 0.1.70-beta-1.2 → 0.1.72-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.70-beta-1.2",
+  "version": "0.1.72-beta-1.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -43,19 +43,37 @@ export class NileTableBody extends NileElement {
   @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;
   @property() type: 'primary' | 'secondary' = 'primary';
   @property() bodyStyle: string;
+  @property({ type: Boolean, reflect: true, attribute: true }) expandableRows = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) collapsible = false;
 
   @state() private rows_data: any[] = [];
   @state() private header_rows_data: any[] = [];
   @state() private sort__index: number;
   @state() private search__index: number;
   @state() private hasResizableColumns = false;
+  private expandedRow: HTMLElement | null = null;
 
   public static get styles(): CSSResultArray {
     return [styles];
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
-    this.emit('nile-body-load', { value: this.type, comp:this },true,false)
+    this.emit('nile-body-load', { value: this.type, comp: this }, true, false)
+    
+    if (this.collapsible) {
+      this.addEventListener('nile-change', (e: any) => {
+        const targetRow = e.target as HTMLElement;
+
+        if (e.detail.expanded) {
+          if (this.expandedRow && this.expandedRow !== targetRow) {
+            (this.expandedRow as any).expanded = false;
+          }
+          this.expandedRow = targetRow;
+        } else if (this.expandedRow === targetRow) {
+          this.expandedRow = null;
+        }
+      });
+    }
   }
 
   /* #endregion */
@@ -78,6 +96,14 @@ export class NileTableBody extends NileElement {
     let row_data: any = [];
     this._childNodes.forEach((child: any) => {
       if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {
+        if (this.expandableRows) {
+          const expandable = child.getAttribute('expandable');
+          if (expandable) {
+            (child as any).expandable = expandable === 'false' || expandable === false ? false : true;
+          } else {
+            (child as any).expandable = true;
+          }
+        }
         let nilerows = this.getChildren(child, 'nile-table-cell-item');
         if (nilerows.length > 0) {
           nilerows.forEach((element: { innerHTML: any }) => {

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

@@ -51,6 +51,11 @@ export const styles = css`
   ${resizableHostStyles}
   ${resizerStyles}
   ${resizableSlotStyles}
+
+  ::slotted([slot="expansionTrigger"]),
+  ::slotted([slot="expansionTrigger"]) {
+    cursor: pointer;
+  }
 `;
 
 export default [styles];

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

@@ -57,6 +57,13 @@ export class NileTableCellItem extends NileElement {
     }
   }
 
+  private handleClick(e: MouseEvent): void {
+    this.dispatchEvent(new CustomEvent('nile-expand-click', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
   /**
    * Render method
    * @slot This is a slot test
@@ -66,7 +73,11 @@ export class NileTableCellItem extends NileElement {
       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>`
+        ? html`
+          <div class="column" part="nile__table-cell">
+            <slot name="expansionTrigger" @click=${this.handleClick} part="expansionTrigger"></slot>
+            <slot></slot>
+          </div>`
             : ''}
           <div class="resizer" @mousedown=${this.handleResizeStart}></div>
         </div>
@@ -74,7 +85,9 @@ export class NileTableCellItem extends NileElement {
     } else {
       return html`
         ${this.hasSlotController.test('[default]')
-          ? html` <slot class="column" part="nile__table-cell"> </slot>`
+        ? html`
+          <slot name="expansionTrigger" @click=${this.handleClick} part="expansionTrigger"></slot>
+          <slot class="column" part="nile__table-cell"> </slot>`
           : ''}
       `;
     }

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

@@ -27,6 +27,58 @@ export const styles = css`
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
     color: red;
   }
+
+.row-container {
+  /* display: flex; */
+  /* flex-direction: column; */
+  /* overflow: hidden; */
+  /* contain: layout style; */
+}
+
+.row {
+  cursor: default;
+  position: relative;       
+  display: flex;
+  align-items: center;
+}
+
+.row.expandable {
+  border-bottom: 1px solid var(--nile-table-row-border-color);
+  /* overflow: hidden; */
+  /* contain: layout style; */
+}
+
+.expanded-content {
+  transition: max-height 0.3s ease;
+}
+
+.row.expandable {
+  margin-right: 4px;
+}
+ 
+.row ::slotted(nile-table-cell-item),
+.row ::slotted(nile-table-header-item) {
+  width: 100%;
+  box-sizing: border-box; 
+}
+
+.row ::slotted([slot="expandable-icon"]), slot[name="expandable-icon"] > nile-icon {
+  cursor: pointer;
+  position: absolute;
+  left: 0.40em;            
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 1em;
+  line-height: 1;
+  user-select: none;
+  z-index: 2;
+}
+
+:host([expandIconRight]) .row ::slotted([slot="expandable-icon"]), :host([expandIconRight]) slot[name="expandable-icon"] > nile-icon {
+  right: 0.40em;
+  left: auto;
+}
 `;
 
 export default [styles];

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

@@ -10,6 +10,7 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
+  PropertyValues,
 } from 'lit';
 import { customElement, query, property } from 'lit/decorators.js';
 import { styles } from './nile-table-row.css';
@@ -31,6 +32,33 @@ export class NileTableRow extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
+  @property({ type: Boolean, reflect: true, attribute: true }) expandable = false;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) expanded = false;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) expansionTriggerMode = false;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) expandIconRight = false;
+
+  @query('slot[name="expanded"]')
+	private _expandedSlot!: HTMLSlotElement;
+	
+	@query('slot[name="expandable-icon"]')
+	private _iconSlot!: HTMLSlotElement;
+
+	private tableBodyHasExpandable: any;
+
+	private _fallbackIcon?: HTMLElement | null;
+
+  private toggleExpand(e: MouseEvent): void {
+    this.expanded = !this.expanded;
+    this.dispatchEvent(new CustomEvent('nile-change', {
+      detail: { expanded: this.expanded },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
 
   /* #endregion */
 
@@ -41,6 +69,18 @@ export class NileTableRow extends NileElement {
    * @slot This is a slot test
    */
 
+	protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+    this.tableBodyHasExpandable = this.closest('nile-table-body');
+
+    if (this.expansionTriggerMode) {
+      this.addEventListener('nile-expand-click', (e: MouseEvent) => {
+        e.stopPropagation();
+        this.toggleExpand(e);
+      });
+    }
+	}
+
   private handleSortingAlter(event: CustomEvent) {
     const header_items: any = [
       ...this.querySelectorAll('nile-table-header-item'),
@@ -54,15 +94,78 @@ export class NileTableRow extends NileElement {
     }
   }
 
+	protected updated(changedProperties: PropertyValues): void {
+		if (!changedProperties.has('expandable') || !this._iconSlot) return;
+
+		if (!this._fallbackIcon) {
+			this._fallbackIcon = this.shadowRoot?.querySelector('nile-icon') ?? null;
+		}
+
+		const assigned = this._iconSlot.assignedElements();
+		const hasAssigned = assigned.length > 0;
+    const displayValue = this.expandable ? '' : 'none';
+
+		if (hasAssigned) {
+			for (const el of assigned) {
+				(el as HTMLElement).style.display = displayValue;
+			}
+		} else if (this._fallbackIcon) {
+			this._fallbackIcon.style.display = displayValue;
+    }
+    
+    if (this.expansionTriggerMode) {
+      if (hasAssigned) {
+        for (const el of assigned) {
+          (el as HTMLElement).style.display = 'none';
+        }
+      } else if (this._fallbackIcon) {
+        this._fallbackIcon.style.display = 'none';
+      }
+    }
+	}
+
   public render(): TemplateResult {
+		if (!this.expandable && !this.tableBodyHasExpandable?.expandableRows) {
+      return html`
+        <slot
+          part="nile-row"
+          @nile-click-sort="${this.handleSortingAlter}"
+        ></slot>
+      `;
+    }
+  
+ 
     return html`
-      <slot
-        part="nile-row"
-        @nile-click-sort="${this.handleSortingAlter}"
-      ></slot>
+      <div part="row-container" class="row-container">
+        <div
+          part="nile-row"
+          class="row expandable ${this.expanded ? 'expanded' : ''}"
+          @nile-click-sort="${this.handleSortingAlter}"
+        >
+          <slot
+            name="expandable-icon"
+            @click=${this.toggleExpand} 
+            part="expandable-icon"
+          >
+            <nile-icon
+              name="${this.expanded ? 'arrowup' : 'arrowdown'}"
+              role="button"
+              size="10"
+              aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
+            </nile-icon>
+          </slot>
+          <slot></slot>
+        </div>
+  
+        ${this.expanded && this.expandable
+          ? html`
+              <div class="expanded-content" part="expanded-content">
+                <slot name="expanded"></slot>
+              </div>`
+          : null}
+      </div>
     `;
   }
-
   /* #endregion */
 }
 

package/vscode-html-custom-data.json

@@ -3681,7 +3681,7 @@
     },
     {
       "name": "nile-table-body",
-      "description": "nile-table-body component.\n\nAttributes:\n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `bodyStyle` {`string`} - \n\nProperties:\n\n  * `defaultSlot` {`HTMLSlotElement`} - The styles for TableBody\n\n  * `_childNodes` {`HTMLElement[]`} - \n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `bodyStyle` {`string`} - \n\n  * `rows_data` {`any[]`} - \n\n  * `header_rows_data` {`any[]`} - \n\n  * `sort__index` {`number`} - \n\n  * `search__index` {`number`} - \n\n  * `hasResizableColumns` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "nile-table-body component.\n\nAttributes:\n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `bodyStyle` {`string`} - \n\n  * `expandableRows` {`boolean`} - \n\n  * `collapsible` {`boolean`} - \n\nProperties:\n\n  * `defaultSlot` {`HTMLSlotElement`} - The styles for TableBody\n\n  * `_childNodes` {`HTMLElement[]`} - \n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `bodyStyle` {`string`} - \n\n  * `expandableRows` {`boolean`} - \n\n  * `collapsible` {`boolean`} - \n\n  * `rows_data` {`any[]`} - \n\n  * `header_rows_data` {`any[]`} - \n\n  * `sort__index` {`number`} - \n\n  * `search__index` {`number`} - \n\n  * `hasResizableColumns` {`boolean`} - \n\n  * `expandedRow` {`HTMLElement | null`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "type",
@@ -3698,17 +3698,31 @@
         {
           "name": "bodyStyle",
           "description": "`bodyStyle` {`string`} - \n\nProperty: bodyStyle"
+        },
+        {
+          "name": "expandableRows",
+          "description": "`expandableRows` {`boolean`} - \n\nProperty: expandableRows\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "collapsible",
+          "description": "`collapsible` {`boolean`} - \n\nProperty: collapsible\n\nDefault: false",
+          "valueSet": "v"
         }
       ]
     },
     {
       "name": "nile-table-cell-item",
-      "description": "Nile table Cell Item component.\n\nAttributes:\n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\n  * `handleResizeStart` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile table Cell Item component.\n\nEvents:\n\n  * `nile-expand-click` {`CustomEvent<unknown>`} - \n\nAttributes:\n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\nProperties:\n\n  * `hasSlotController` - \n\n  * `resizable` {`boolean`} - Enables the resize functionality.\n\n  * `handleResizeStart` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "resizable",
           "description": "`resizable` {`boolean`} - Enables the resize functionality.\n\nProperty: resizable\n\nDefault: false",
           "valueSet": "v"
+        },
+        {
+          "name": "onnile-expand-click",
+          "description": "`nile-expand-click` {`CustomEvent<unknown>`} - "
         }
       ]
     },
@@ -3739,8 +3753,33 @@
     },
     {
       "name": "nile-table-row",
-      "description": "nile-table-row component.\n\nProperties:\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
-      "attributes": []
+      "description": "nile-table-row component.\n\nEvents:\n\n  * `nile-change` {`CustomEvent<{ expanded: boolean; }>`} - \n\nAttributes:\n\n  * `expandable` {`boolean`} - \n\n  * `expanded` {`boolean`} - \n\n  * `expansionTriggerMode` {`boolean`} - \n\n  * `expandIconRight` {`boolean`} - \n\nProperties:\n\n  * `expandable` {`boolean`} - \n\n  * `expanded` {`boolean`} - \n\n  * `expansionTriggerMode` {`boolean`} - \n\n  * `expandIconRight` {`boolean`} - \n\n  * `_expandedSlot` {`HTMLSlotElement`} - \n\n  * `_iconSlot` {`HTMLSlotElement`} - \n\n  * `tableBodyHasExpandable` - \n\n  * `_fallbackIcon` {`HTMLElement | null | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "expandable",
+          "description": "`expandable` {`boolean`} - \n\nProperty: expandable\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "expanded",
+          "description": "`expanded` {`boolean`} - \n\nProperty: expanded\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "expansionTriggerMode",
+          "description": "`expansionTriggerMode` {`boolean`} - \n\nProperty: expansionTriggerMode\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "expandIconRight",
+          "description": "`expandIconRight` {`boolean`} - \n\nProperty: expandIconRight\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "onnile-change",
+          "description": "`nile-change` {`CustomEvent<{ expanded: boolean; }>`} - "
+        }
+      ]
     },
     {
       "name": "nile-table",

package/dist/src/internal/resizable-helper.d.ts

@@ -1,59 +0,0 @@
-/**
- * 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.
- */
-/**
- * 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 declare function handleResizeStart(e: MouseEvent, options: ResizeOptions): () => void;
-/**
- * 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 declare function getColumnIndex(element: HTMLElement, selector: string): number;
-/**
- * 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 declare function synchronizeColumnWidth(sourceElement: HTMLElement, newWidth: number): void;
-/**
- * Checks if an element has the resizable attribute
- * @param element The element to check
- * @returns True if the element is resizable
- */
-export declare function isResizable(element: HTMLElement): boolean;
-/**
- * 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 declare function createResizeHandler(element: HTMLElement, minWidth?: number): (e: MouseEvent) => void;
-/**
- * Detects if any columns in a table are resizable
- * @param tableBody The table body element
- * @returns True if any columns have resizable attribute
- */
-export declare function hasResizableColumns(tableBody: HTMLElement): boolean;

package/dist/src/internal/resizable-helper.js

@@ -1,115 +0,0 @@
-/**
- * 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.
- */
-/**
- * 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, options) {
-    e.preventDefault();
-    e.stopPropagation();
-    const { minWidth = 50, startX, startWidth, element } = options;
-    const resizer = e.target;
-    // Add resizing class for visual feedback
-    resizer.classList.add('resizing');
-    const onMouseMove = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const delta = e.pageX - startX;
-        const newWidth = Math.max(minWidth, startWidth + delta);
-        // Apply width to the current element
-        element.style.width = newWidth + 'px';
-        // Synchronize width across all cells in the same column
-        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 cleanup function
-    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, selector) {
-    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, newWidth) {
-    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) {
-    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, minWidth = 50) {
-    return (e) => {
-        const options = {
-            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) {
-    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;
-}
-//# sourceMappingURL=resizable-helper.js.map

package/dist/src/internal/resizable-helper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"resizable-helper.js","sourceRoot":"","sources":["../../../src/internal/resizable-helper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAmBH;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,CAAa,EAAE,OAAsB;IACrE,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAC/D,MAAM,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAC;IAExC,yCAAyC;IACzC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAElC,MAAM,WAAW,GAAG,CAAC,CAAa,EAAE,EAAE;QACpC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC;QAC/B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;QAExD,qCAAqC;QACrC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,QAAQ,GAAG,IAAI,CAAC;QAEtC,wDAAwD;QACxD,sBAAsB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACrC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACvD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACpD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAEhD,0BAA0B;IAC1B,OAAO,GAAG,EAAE;QACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACvD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IACrD,CAAC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,OAAoB,EAAE,QAAgB;IACnE,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACnD,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QACpD,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC9C,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,sBAAsB,CAAC,aAA0B,EAAE,QAAgB;IACjF,MAAM,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC3D,IAAI,CAAC,SAAS;QAAE,OAAO;IAEvB,MAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,wBAAwB,CAAC;IAClF,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,sBAAsB,CAAC;IAC9E,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAC;IAElF,MAAM,WAAW,GAAG,cAAc,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;IAC5D,MAAM,IAAI,GAAG,SAAS,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAE1D,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QACjB,MAAM,KAAK,GAAG,GAAG,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;QACnD,IAAI,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;YACvB,KAAK,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,QAAQ,GAAG,IAAI,CAAC;QACnD,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,OAAoB;IAC9C,OAAO,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;AAC3C,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,mBAAmB,CAAC,OAAoB,EAAE,WAAmB,EAAE;IAC7E,OAAO,CAAC,CAAa,EAAE,EAAE;QACvB,MAAM,OAAO,GAAkB;YAC7B,QAAQ;YACR,MAAM,EAAE,CAAC,CAAC,KAAK;YACf,UAAU,EAAE,OAAO,CAAC,WAAW;YAC/B,OAAO;SACR,CAAC;QAEF,iBAAiB,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAChC,CAAC,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,SAAsB;IACxD,MAAM,WAAW,GAAG,SAAS,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;IACzE,MAAM,SAAS,GAAG,SAAS,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IAErE,MAAM,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAC9D,WAAW,CAAC,IAAI,CAAC,CAClB,CAAC;IACF,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAC1D,WAAW,CAAC,IAAI,CAAC,CAClB,CAAC;IAEF,OAAO,mBAAmB,IAAI,iBAAiB,CAAC;AAClD,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\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\n/**\n * Resizable Helper Utility\n * Provides common functionality for resizable table columns\n */\n\nexport interface ResizeOptions {\n  minWidth?: number;\n  startX: number;\n  startWidth: number;\n  element: HTMLElement;\n}\n\nexport interface ColumnResizeData {\n  columnIndex: number;\n  newWidth: number;\n}\n\n/**\n * Handles the start of a resize operation\n * @param e Mouse event\n * @param options Resize configuration options\n * @returns Cleanup function to remove event listeners\n */\nexport function handleResizeStart(e: MouseEvent, options: ResizeOptions): () => void {\n  e.preventDefault();\n  e.stopPropagation();\n  \n  const { minWidth = 50, startX, startWidth, element } = options;\n  const resizer = e.target as HTMLElement;\n  \n  // Add resizing class for visual feedback\n  resizer.classList.add('resizing');\n\n  const onMouseMove = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    \n    const delta = e.pageX - startX;\n    const newWidth = Math.max(minWidth, startWidth + delta);\n\n    // Apply width to the current element\n    element.style.width = newWidth + 'px';\n\n    // Synchronize width across all cells in the same column\n    synchronizeColumnWidth(element, newWidth);\n  };\n\n  const onMouseUp = () => {\n    resizer.classList.remove('resizing');\n    document.removeEventListener('mousemove', onMouseMove);\n    document.removeEventListener('mouseup', onMouseUp);\n  };\n\n  document.addEventListener('mousemove', onMouseMove);\n  document.addEventListener('mouseup', onMouseUp);\n\n  // Return cleanup function\n  return () => {\n    document.removeEventListener('mousemove', onMouseMove);\n    document.removeEventListener('mouseup', onMouseUp);\n  };\n}\n\n/**\n * Gets the column index of an element within its table row\n * @param element The table cell or header element\n * @param selector The CSS selector for the column elements\n * @returns Column index (0-based)\n */\nexport function getColumnIndex(element: HTMLElement, selector: string): number {\n  const tableRow = element.closest('nile-table-row');\n  if (tableRow) {\n    const columns = tableRow.querySelectorAll(selector);\n    return Array.from(columns).indexOf(element);\n  }\n  return 0;\n}\n\n/**\n * Synchronizes the width of all cells in the same column\n * @param sourceElement The element that was resized\n * @param newWidth The new width to apply\n */\nexport function synchronizeColumnWidth(sourceElement: HTMLElement, newWidth: number): void {\n  const tableBody = sourceElement.closest('nile-table-body');\n  if (!tableBody) return;\n\n  const isHeader = sourceElement.tagName.toLowerCase() === 'nile-table-header-item';\n  const selector = isHeader ? 'nile-table-header-item' : 'nile-table-cell-item';\n  const targetSelector = isHeader ? 'nile-table-cell-item' : 'nile-table-cell-item';\n  \n  const columnIndex = getColumnIndex(sourceElement, selector);\n  const rows = tableBody.querySelectorAll('nile-table-row');\n  \n  rows.forEach(row => {\n    const cells = row.querySelectorAll(targetSelector);\n    if (cells[columnIndex]) {\n      cells[columnIndex].style.width = newWidth + 'px';\n    }\n  });\n}\n\n/**\n * Checks if an element has the resizable attribute\n * @param element The element to check\n * @returns True if the element is resizable\n */\nexport function isResizable(element: HTMLElement): boolean {\n  return element.hasAttribute('resizable');\n}\n\n/**\n * Creates a resize handler function for use in component event listeners\n * @param element The element to make resizable\n * @param minWidth Minimum width constraint\n * @returns Event handler function\n */\nexport function createResizeHandler(element: HTMLElement, minWidth: number = 50): (e: MouseEvent) => void {\n  return (e: MouseEvent) => {\n    const options: ResizeOptions = {\n      minWidth,\n      startX: e.pageX,\n      startWidth: element.offsetWidth,\n      element\n    };\n    \n    handleResizeStart(e, options);\n  };\n}\n\n/**\n * Detects if any columns in a table are resizable\n * @param tableBody The table body element\n * @returns True if any columns have resizable attribute\n */\nexport function hasResizableColumns(tableBody: HTMLElement): boolean {\n  const headerItems = tableBody.querySelectorAll('nile-table-header-item');\n  const cellItems = tableBody.querySelectorAll('nile-table-cell-item');\n  \n  const hasResizableHeaders = Array.from(headerItems).some(item => \n    isResizable(item)\n  );\n  const hasResizableCells = Array.from(cellItems).some(item => \n    isResizable(item)\n  );\n  \n  return hasResizableHeaders || hasResizableCells;\n} \n"]}

package/dist/src/internal/resizable-styles.d.ts

@@ -1,16 +0,0 @@
-/**
- * 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.
- */
-/**
- * Resizable Styles Utility
- * Centralized styles for resizable table functionality
- */
-export declare const resizableHostStyles: import("lit").CSSResult;
-export declare const resizableHeaderStyles: import("lit").CSSResult;
-export declare const resizerStyles: import("lit").CSSResult;
-export declare const headerResizerStyles: import("lit").CSSResult;
-export declare const resizableSlotStyles: import("lit").CSSResult;
-export declare const tableLayoutStyles: import("lit").CSSResult;