@aquera/nile-elements 0.1.68 → 0.1.69

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.68",
+  "version": "0.1.69",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -192,4 +192,4 @@
       "prettier --write"
     ]
   }
-}
+}

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

@@ -103,6 +103,23 @@ export function synchronizeColumnWidth(sourceElement: HTMLElement, newWidth: num
   });
 }
 
+/**
+ * Resets all column widths in a table to their default values
+ * @param tableBody The table body element to reset
+ */
+export function resetAllColumnWidths(tableBody: HTMLElement): void {
+  const headerItems = tableBody.querySelectorAll('nile-table-header-item');
+  const cellItems = tableBody.querySelectorAll('nile-table-cell-item');
+  
+  headerItems.forEach(header => {
+    header.style.removeProperty('width');
+  });
+  
+  cellItems.forEach(cell => {
+    cell.style.removeProperty('width');
+  });
+}
+
 /**
  * Checks if an element has the resizable attribute
  * @param element The element to check
@@ -137,15 +154,21 @@ export function createResizeHandler(element: HTMLElement, minWidth: number = 50)
  * @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 directChildren = Array.from(tableBody.children);
+  
+  const hasResizableHeaders = directChildren.some(child => {
+    if (child.tagName.toLowerCase() === 'nile-table-header-item') {
+      return child.hasAttribute('resizable');
+    }
+    return false;
+  });
   
-  const hasResizableHeaders = Array.from(headerItems).some(item => 
-    isResizable(item)
-  );
-  const hasResizableCells = Array.from(cellItems).some(item => 
-    isResizable(item)
-  );
+  const hasResizableCells = directChildren.some(child => {
+    if (child.tagName.toLowerCase() === 'nile-table-cell-item') {
+      return child.hasAttribute('resizable');
+    }
+    return false;
+  });
   
   return hasResizableHeaders || hasResizableCells;
 } 

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

@@ -10,12 +10,13 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
+  PropertyValues,
 } from 'lit';
 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';
+import { createResizeHandler, resetAllColumnWidths } from '../internal/resizable-table-helper';
 
 /**
  * Nile table Cell Item component.
@@ -43,6 +44,19 @@ export class NileTableCellItem extends NileElement {
 
   private handleResizeStart = createResizeHandler(this, 50);
 
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has('resizable')) {
+      if (!this.resizable) {
+        const tableBody = this.closest('nile-table-body');
+        if (tableBody) {
+          resetAllColumnWidths(tableBody);
+        }
+      }
+    }
+  }
+
   /**
    * Render method
    * @slot This is a slot test

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

@@ -10,12 +10,13 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
+  PropertyValues,
 } from 'lit';
 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';
+import { createResizeHandler, resetAllColumnWidths } from '../internal/resizable-table-helper';
 
 /**
  * Nile icon component.
@@ -53,6 +54,19 @@ export class NileTableHeaderItem extends NileElement {
 
   /* #region Methods */
 
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has('resizable')) {
+      if (!this.resizable) {
+        const tableBody = this.closest('nile-table-body');
+        if (tableBody) {
+          resetAllColumnWidths(tableBody);
+        }
+      }
+    }
+  }
+
   /**
    * Render method
    * @slot This is a slot test