@aquera/nile-elements 1.0.1-beta-1.4 → 1.0.1-beta-1.6

package/src/nile-file-upload/utils/file-validation.util.ts

@@ -1,75 +1,89 @@
 import { DragHandler } from "./drag-drop.util";
 import { FileUploadState, FileUploadError, FileUploadEvent } from "../types";
 import { NileFileUpload } from "../nile-file-upload";
+import { RemoveFileDetail } from "../../nile-file-preview/types";
 
-// write a function to check for duplicatse in the files name it as areDuplicates
-export const areDuplicates = (files: File[], uploadedFiles: File[]): boolean => {
-  return files.some(file =>
-    uploadedFiles.some(existing =>
-      file.name === existing.name &&
-      file.size === existing.size &&
-      file.lastModified === existing.lastModified
-    )
-  );
-};
-
-// set up the drag handler
 export const setUpDragHandler = (
   nileFileUpload: NileFileUpload,
-  dragHandler: DragHandler
+  dragHandler: DragHandler,
 ): void => {
   dragHandler.onStateChange((newState: FileUploadState) => {
     nileFileUpload.state = newState;
   });
 
   dragHandler.onFileDrop((files: File[]) => {
-    let { allowMultiple, uploadedFiles, errorMessage, requestUpdate } = nileFileUpload;
-
-    if (!allowMultiple) {
-      const total = uploadedFiles.length + files.length;
-      if (total > 1) {
-        errorMessage = FileUploadError.MULTIPLE_NOT_ALLOWED;
-        requestUpdate();
-        return;
-      }
+    const maxSize = parseSize(nileFileUpload.size);
+    const uploadedFiles = nileFileUpload.uploadedFiles;
+  
+    if (!nileFileUpload.allowMultiple && (uploadedFiles.length + files.length > 1)) {
+      nileFileUpload.errorMessage = FileUploadError.MULTIPLE_NOT_ALLOWED;
+      console.error(nileFileUpload.errorMessage);
+      nileFileUpload.requestUpdate();
+      return;
     }
-
-    let newFiles = files;
-
-    if (!nileFileUpload.allowDuplicates) {
-      newFiles = files.filter(file =>
-        !nileFileUpload.uploadedFiles.some(
-          uploaded =>
+  
+    let sizeExceeded = false;
+    let duplicatesFound = false;
+    const newFiles: File[] = [];
+    const rejectedFiles: File[] = [];
+  
+    for (const file of files) {
+      if (file.size > maxSize) {
+        sizeExceeded = true;
+        rejectedFiles.push(file);
+        continue;
+      }
+  
+      if (
+        !nileFileUpload.allowDuplicates &&
+        uploadedFiles.some(
+          (uploaded) =>
             uploaded.name === file.name &&
             uploaded.size === file.size &&
             uploaded.type === file.type
         )
-      );
-
-      if (newFiles.length === 0) {
-        nileFileUpload.errorMessage = FileUploadError.DUPLICATES_NOT_ALLOWED;
-        nileFileUpload.requestUpdate();
-        return;
+      ) {
+        duplicatesFound = true;
+        rejectedFiles.push(file);
+        continue;
+      }
+  
+      if(!rejectedFiles.includes(file)) {
+        newFiles.push(file);
       }
     }
 
-    nileFileUpload.uploadedFiles = [...nileFileUpload.uploadedFiles, ...newFiles];
+    if (sizeExceeded) {
+      nileFileUpload.errorMessage = FileUploadError.SIZE_LIMIT_EXCEEDED;
+      console.error(nileFileUpload.errorMessage);
+      nileFileUpload.requestUpdate();
+      nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_SIZE_EXCEED_FILES, {
+        detail: { files: rejectedFiles }
+      }));
+    }
+  
+    if (duplicatesFound && newFiles.length === 0) {
+      nileFileUpload.errorMessage = FileUploadError.DUPLICATES_NOT_ALLOWED;
+      console.error(nileFileUpload.errorMessage);
+      nileFileUpload.requestUpdate();
+    }
+  
+    nileFileUpload.uploadedFiles = [...uploadedFiles, ...newFiles];
     nileFileUpload.requestUpdate();
   });
+  
 
   dragHandler.setErrorMessage((errorMessage: string) => {
+    console.error(nileFileUpload.errorMessage);
     nileFileUpload.errorMessage = errorMessage;
   });
 };
 
-
-// global listenrers
 export const addGlobalListeners = (dragHandler: DragHandler): void => {
   document.addEventListener('dragover', dragHandler.preventDragOver, { passive: false });
   document.addEventListener('drop', dragHandler.preventDrop, { passive: false });
 }
 
-// for hover & dragging functionality
 export const addInternalListeners = (nileFileUpload: NileFileUpload, dragHandler: DragHandler, uploadRequests: any): void => {
   nileFileUpload.addEventListener('mouseenter', (e) => handleHoverIn(nileFileUpload.setState, nileFileUpload.state));
   nileFileUpload.addEventListener('mouseleave', (e) => handleHoverOut(nileFileUpload.setState, nileFileUpload.state));
@@ -79,6 +93,7 @@ export const addInternalListeners = (nileFileUpload: NileFileUpload, dragHandler
   nileFileUpload.addEventListener('drop', (e) => dragHandler.drop(e));  
 
   cancelFileUpload(nileFileUpload, uploadRequests);
+  removeFile(nileFileUpload.uploadedFiles, nileFileUpload);
 }
 
 export function handleHoverIn(
@@ -104,29 +119,32 @@ export function uploadFiles(nileFileUpload: NileFileUpload) {
   if (!fileUploadUrl || !uploadedFiles?.length) return;
 
   for (const file of uploadedFiles) {
+    if (uploadRequests.has(file)) continue;
+    
     const formData = new FormData();
     formData.append('file', file);
 
     const xhr = new XMLHttpRequest();
     uploadRequests.set(file, xhr);
 
+    nileFileUpload.emit(FileUploadEvent.NILE_UPLOADING);
+
     xhr.upload.onprogress = (e) => {
       const percent = Math.floor((e.loaded / e.total) * 100);
+      
       nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_PROGRESS, {
         detail: { file, progress: percent }
       }));
     };
 
     xhr.onload = () => {
-      uploadRequests.delete(file);
-      if (xhr.status === 201) {
-        // Remove the successfully uploaded file
-        nileFileUpload.uploadedFiles = nileFileUpload.uploadedFiles.filter(f => f !== file);
-
+      if (xhr.status >= 200 && xhr.status < 300) {
         nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_SUCCESS, {
           detail: { file, response: xhr.response }
         }));
       } else {
+        nileFileUpload.errorMessage = FileUploadError.SERVER_SIDE_ERROR;
+        nileFileUpload.requestUpdate();
         nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.SERVER_SIDE_ERROR, {
           detail: { file, status: xhr.status, response: xhr.response }
         }));
@@ -135,8 +153,11 @@ export function uploadFiles(nileFileUpload: NileFileUpload) {
 
     xhr.onerror = () => {
       uploadRequests.delete(file);
+      nileFileUpload.errorMessage = FileUploadError.NETWORK_ERROR;
       nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_NETWORK_ERROR, {
-        detail: { file, status: xhr.status, response: xhr.response }
+        detail: { file, status: xhr.status, response: xhr.response },
+        bubbles: true,
+        composed: true,
       }));
     };
 
@@ -161,3 +182,35 @@ export const cancelFileUpload = (nileFileUpload: NileFileUpload, uploadRequests:
     }));
   });
 };
+
+function parseSize(sizeStr: string): number {
+  const units = { B: 1, KB: 1024, MB: 1024 ** 2, GB: 1024 ** 3 };
+  const num = parseFloat(sizeStr);
+  const unit = sizeStr.replace(/[0-9.\s]/g, '').toUpperCase();
+  const multiplier = units[unit as keyof typeof units] || 1;
+  return num * multiplier;
+}
+
+export const preventDefaultAndStopPropagation = (event: Event | DragEvent): void => {
+  event.preventDefault?.();
+  event.stopPropagation();
+}
+
+export const removeFile = (uploadedFiles: File[], nileFileUpload: NileFileUpload) => {
+  document.addEventListener('nile-remove', (e: CustomEvent<RemoveFileDetail>) => {
+    const { value } = e.detail;
+    uploadedFiles = uploadedFiles.filter(file => file !== value);
+    nileFileUpload.uploadedFiles = uploadedFiles;
+    nileFileUpload.requestUpdate();
+  });
+}
+
+export const truncateString = (nileFileUpload: NileFileUpload): void => {
+  if(nileFileUpload.variant === 'vertical' && nileFileUpload.errorMessage.length > 34) {
+    nileFileUpload.isStringTruncated = true;
+    nileFileUpload.requestUpdate();
+  } else if(nileFileUpload.variant === 'horizontal' && nileFileUpload.errorMessage.length > 96) {
+    nileFileUpload.isStringTruncated = true;
+    nileFileUpload.requestUpdate();
+  }
+}

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

@@ -541,7 +541,6 @@ export const styles = css`
   }
 
   .input__password {
-    font-family: 'disc';
     letter-spacing: 2px;
   }
 

package/src/nile-option/nile-option.ts

@@ -68,6 +68,9 @@ export class NileOption extends NileElement {
   /** Indicates whether the option is selected. */
   @property({ type: Boolean, reflect: true }) selected = false;
 
+  /* used to pass group name to the option, so that grouped options can be shown */
+  @property({ type: String, reflect: true }) groupName: string = '';
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'option');
@@ -181,7 +184,7 @@ export class NileOption extends NileElement {
             @mouseleave=${this.handleMouseLeave}
           >
 
-          ${this.isMultipleSelect ? html`<nile-checkbox class="option--checkbox" .checked=${this.selected}></nile-checkbox>` : ''}
+          ${this.isMultipleSelect ? html`<nile-checkbox part="checkbox" class="option--checkbox" .checked=${this.selected}></nile-checkbox>` : ''}
 
             <slot part="prefix" name="prefix" class="option__prefix"></slot>
             <slot

package/src/nile-option-group/index.ts

@@ -0,0 +1 @@
+export { NileOptionGroup } from './nile-option-group';

package/src/nile-option-group/nile-option-group.css.ts

@@ -0,0 +1,60 @@
+/**
+* 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';
+
+/**
+ * OptionHeader CSS
+ */
+export const styles = css`
+	.option-group-header {
+		height: 40px;
+		display: flex;
+		align-items: center;
+		padding: 0px 12px;
+		background-color: var(--nile-colors-dark-200);
+		color: var(--nile-colors-dark-900);
+		font-feature-settings: 'liga' off, 'clig' off;
+		font-family: 'colfax-medium';
+		font-size: 12px;
+		font-weight: 500;
+		width: 100%;
+		box-sizing: border-box;
+		justify-content: space-between;
+	}
+
+	.content-container {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.gap-18px {
+		gap: 14px;
+	}
+
+	.option-group-prefix,
+  .option-group-suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .option-group-prefix::slotted(*) {
+    margin-inline-end: 0.5rem;
+  }
+
+  .option-group-suffix::slotted(*) {
+    margin-inline-start: 0.5rem;
+  }
+
+  :host(.nile-group-hidden)::part(option-group-header) {
+	display: none !important;
+  }
+`;
+
+export default [styles];

package/src/nile-option-group/nile-option-group.interface.ts

@@ -0,0 +1,25 @@
+export interface IconData {
+  name: string;
+  size?: string;
+  color?: string;
+  method?: string;
+}
+
+export interface ImageData {
+  src?: string;
+  height?: string;
+  width?: string;
+}
+
+export interface PrefixSuffixData {
+  icon?: IconData;
+  prefixText?: string;
+  suffixText?: string;
+  image?: ImageData;
+}
+
+export interface OptionGroupData {
+  prefix?: PrefixSuffixData;
+  suffix?: PrefixSuffixData;
+  textContent?: string;
+}

package/src/nile-option-group/nile-option-group.ts

@@ -0,0 +1,84 @@
+/**
+ * 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} from 'lit/decorators.js';
+import {styles} from './nile-option-group.css';
+import NileElement from '../internal/nile-element';
+import { OptionGroupData } from './nile-option-group.interface';
+
+@customElement('nile-option-group')
+export class NileOptionGroup extends NileElement {
+
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	@property({type: String, reflect: true, attribute: true}) name: string = "";
+	@property({type: Object, attribute: true}) data: OptionGroupData | null = null;
+
+	private checkForImageOrIcon() {
+		return this.data?.prefix?.icon?.name || this.data?.prefix?.image?.src || this.data?.prefix?.prefixText;
+	}
+
+	private normalizeImageDimension(value?: string | number): string {
+		if (value === undefined || value === null || value === "") {
+			return "20";
+		}
+		
+		const dimension = Number(value);
+		if (isNaN(dimension) || dimension <= 0) {
+			return "20";
+		}	
+		return dimension > 40 ? "25" : dimension.toString();
+	}	
+
+	public render(): TemplateResult {
+		return html`
+			<div part="option-group-header" class="option-group-header">
+				<div part="content-container" class="content-container ${this.checkForImageOrIcon() ? 'gap-18px' : ''}">
+					<!-- prefix content -->
+					${
+						this.data?.prefix?.icon?.name
+						? html`<nile-icon part="prefix-icon" name="${this.data?.prefix?.icon?.name}" size="${this.data?.prefix?.icon?.size || "16"}" color="${this.data?.prefix?.icon?.color || "var(--nile-colors-dark-500)"}" method="${this.data?.prefix?.icon?.method || "fill"}"></nile-icon>`
+						: this.data?.prefix?.prefixText
+							? html`<span part="prefix-text">${this.data?.prefix?.prefixText}</span>`
+							: this.data?.prefix?.image?.src
+								? html`<img part="prefix-image" src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.prefix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.prefix?.image?.height)}">`
+								: html`<slot part="prefix" name="prefix" class="option-group-prefix"></slot>`
+					}
+
+					<!-- main content -->
+					${
+						this.data?.textContent
+						? html`<span part="content-text">${this.data?.textContent}</span>`
+						: html`<slot part="content"></slot>`
+					}
+				</div>
+
+				<!-- suffix content -->
+				${
+					this.data?.suffix?.icon?.name
+					? html`<nile-icon part="suffix-icon" name="${this.data?.suffix?.icon?.name}" size="${this.data?.suffix?.icon?.size || "16"}" color="${this.data?.suffix?.icon?.color || "var(--nile-colors-dark-500)"}" method="${this.data?.suffix?.icon?.method || "fill"}"></nile-icon>`
+					: this.data?.suffix?.suffixText
+						? html`<span part="suffix-text">${this.data?.suffix?.suffixText}</span>`
+						: this.data?.suffix?.image?.src
+							? html`<img part="suffix-image" src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.suffix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.suffix?.image?.height)}">`
+							: html`<slot part="suffix" name="suffix" class="option-group-suffix"></slot>`
+				}
+			</div>
+			`;
+	}
+}
+
+export default NileOptionGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-option-group': NileOptionGroup;
+  }
+}

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

@@ -263,6 +263,13 @@ export const styles = css`
     transform: rotate(180deg);
   }
 
+  .prev-button::part(base) {
+    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+  }
+
+  .next-button::part(base) {
+    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+  }
 
 `;
 

package/src/nile-pagination/nile-pagination.ts

@@ -207,6 +207,7 @@ private renderCompactRangeText(): TemplateResult {
           variant="tertiary"
           ?disabled=${this.currentPage === 1 || this.disabled}
           @click=${() => this.goToPage(this.currentPage - 1)}
+          class="prev-button"
         >
           <nile-icon name="var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14"></nile-icon>
         </nile-button>
@@ -221,8 +222,9 @@ private renderCompactRangeText(): TemplateResult {
           variant="tertiary"
           ?disabled=${this.currentPage === this.totalPages || this.disabled}
           @click=${() => this.goToPage(this.currentPage + 1)}
+          class="next-button"
         >
-          <nile-icon name="var(--nile-icon-arrow-right, var(--ng-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14"></nile-icon>
+          <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14"></nile-icon>
         </nile-button>
       </li>
     `;

package/src/nile-select/nile-select.interface.ts

@@ -0,0 +1,5 @@
+export interface GroupAttributes {
+  name: string;
+  data: any;
+  element: HTMLElement;
+}

package/src/nile-select/nile-select.ts

@@ -38,6 +38,8 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '../nile-virtual-select/nile-virtual-select';
 import { VirtualScrollHelper } from './virtual-scroll-helper';
+import NileOptionGroup from '../nile-option-group/nile-option-group';
+import { GroupAttributes } from './nile-select.interface';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -259,6 +261,9 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ type: Boolean }) enableVirtualScroll = false;
 
+  /** To enable the group header in the select */
+  @property({ type: Boolean, reflect: true, attribute: true }) enableGroupHeader = false;
+
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -304,6 +309,10 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
+    if(this.enableGroupHeader) {
+      this.handleGroupSearchChange();
+    }
+
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
@@ -380,6 +389,9 @@ export class NileSelect extends NileElement implements NileFormControl{
       }
     });
 
+    if(this.enableGroupHeader) {
+      this.handleGroupShowSelected();
+    }
     // this.requestUpdate();
   }
 
@@ -393,6 +405,9 @@ export class NileSelect extends NileElement implements NileFormControl{
       el.selected = false;
       el.hidden = false;
     });
+    if(this.enableGroupHeader) {
+      this.handleGroupShowSelected();
+    }
     this.value = '';
     this.selectionChanged();
     this.emit('nile-change', { value: this.value, name: this.name });
@@ -542,6 +557,9 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.showSelected = false;
       this.value = '';
       this.displayInput.focus({ preventScroll: true });
+      if(this.enableGroupHeader) {
+        this.handleGroupShowSelected();
+      }
 
       // Emit after update
       this.updateComplete.then(() => {
@@ -605,7 +623,9 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
-
+      if(this.enableGroupHeader) {
+        this.handleGroupShowSelected();
+      }
       this.requestUpdate();
     }
   }
@@ -643,6 +663,9 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
+      if(this.enableGroupHeader) {
+        this.handleGroupShowSelected();
+      }
 
       // Emit after updating
       this.updateComplete.then(() => {
@@ -812,6 +835,9 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   handleSearchChange(e: any) {
     this.searchValue = e.detail.value;
+    if(this.enableGroupHeader) {
+      this.handleGroupSearchChange();
+    }
     if (!this.disableLocalSearch) {
       let filteredOptions = this.filterOptions(this.searchValue);
       if (filteredOptions.length === 0) {
@@ -875,8 +901,14 @@ export class NileSelect extends NileElement implements NileFormControl{
       // Reset the current option
       this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
 
-      // Show
       this.emit('nile-show', { value: this.value, name: this.name });
+
+      if(this.enableGroupHeader) {
+        this.getAllGroupAttributes().forEach((el: GroupAttributes) => {
+          el.element.classList.remove('nile-group-hidden');
+        });
+      }
+
       this.addOpenListeners();
 
       this.showNoResults = !this.getAllOptions()?.length;
@@ -922,6 +954,46 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
+  private getAllGroupAttributes() {
+    return Array.from(
+      this.querySelectorAll<NileOptionGroup>('nile-option-group[name]')
+    ).map((el: HTMLElement) => ({
+      name: el?.getAttribute('name') || '',
+      data: el?.getAttribute('data'),
+      element: el
+    }));
+  }
+
+  getUniqueGroupNames(arr: NileOption[]) {
+    return Array.from(new Set(arr.map(obj => obj?.groupName)));
+  }
+  
+  handleGroupSearchChange() {
+    const filtered = new Set(
+      this.getUniqueGroupNames(this.filterOptions(this.searchValue))
+    );
+    this.getAllGroupAttributes().forEach(({ name, element }) => {
+      element?.classList.toggle('nile-group-hidden', !filtered.has(name));
+    });
+  }
+  
+  handleGroupShowSelected() {
+    const visibleGroups = new Set<string>();
+  
+    if (this.showSelected) {
+      this.getAllOptions().forEach((option: NileOption) => {
+        if (!option.hidden) visibleGroups.add(option.groupName);
+      });
+    }
+  
+    this.getAllGroupAttributes().forEach(({ name, element }) => {
+      element?.classList.toggle(
+        'nile-group-hidden',
+        this.showSelected && !visibleGroups.has(name)
+      );
+    });
+  }
+
   /** Shows the listbox. */
   async show() {
     if (this.open || this.disabled) {

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

@@ -42,6 +42,7 @@ export class NileTableBody extends NileElement {
   @query('slot') defaultSlot: HTMLSlotElement;
   @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;
   @property() type: 'primary' | 'secondary' = 'primary';
+  @property() bodyStyle: string;
 
   @state() private rows_data: any[] = [];
   @state() private header_rows_data: any[] = [];
@@ -123,6 +124,7 @@ export class NileTableBody extends NileElement {
           @slotchange=${this.handleSlotchange}
           @nile-click-sort=${this.handleSort}
           class="nile__table__body"
+          style="display: ${this.bodyStyle}"
           ?resizable=${this.hasResizableColumns}
           @nile-search=${this.handleSearch}
         ></slot>

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