@aquera/nile-elements 0.1.70-beta-1.0 → 0.1.70-beta-1.2

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.0",
+  "version": "0.1.70-beta-1.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -87,7 +87,8 @@
     "./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-slider": "./dist/src/nile-slider/index.js",
+    "./nile-option-group": "./dist/src/nile-option-group/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",

package/src/index.ts

@@ -81,4 +81,5 @@ export { NileFilterChip } from './nile-filter-chip';
 export {NilePagination } from './nile-pagination';
 export { NileSlider } from './nile-slider';
 export { NileFileUpload } from './nile-file-upload';
-export { NileFilePreview } from './nile-file-preview'
+export { NileFilePreview } from './nile-file-preview';
+export { NileOptionGroup } from './nile-option-group';

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-code-editor/nile-code-editor.ts

@@ -35,13 +35,12 @@ import {
 import { sql } from '@codemirror/lang-sql';
 import { json } from '@codemirror/lang-json';
 import { html as htmlLang } from '@codemirror/lang-html';
-import { autocompletion,closeCompletion,CompletionContext,CompletionResult, completionStatus } from '@codemirror/autocomplete';
+import { autocompletion,acceptCompletion, closeCompletion,CompletionContext,CompletionResult, completionStatus } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { Theme as DefaultTheme, customisedThemeCss } from './theme';
+import { Theme as DefaultTheme, customisedThemeCss, fontFamily } from './theme';
 import { keymap } from '@codemirror/view';
-import { acceptCompletion } from '@codemirror/autocomplete';
 
 // Choose the appropriate mode for your use case
 
@@ -104,6 +103,8 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true, attribute: true }) tabCompletion: boolean = true;
 
+  @property({ type: Boolean, reflect: true, attribute: true }) defaultFont: boolean = false;
+
   public view: EditorView;
   public viewState:EditorState;
   private timeOut: any = null;
@@ -116,6 +117,7 @@ export class NileCodeEditor extends NileElement {
   private placeholderComp = new Compartment();
   private defaultSyntaxHighlightingComp = new Compartment();
   private themeComp = new Compartment();
+  private autoCompletionComp = new Compartment();
 
   private isSpacePressed:boolean = false;
   /**
@@ -179,6 +181,15 @@ export class NileCodeEditor extends NileElement {
         ]
       })
     }
+    if (changedProperties.has('aboveCursor')) {
+      this.view.dispatch({
+        effects: [
+          this.autoCompletionComp.reconfigure(
+            autocompletion({ aboveCursor: this.aboveCursor })
+          )
+        ]
+      });
+    }    
     if (changedProperties.has('placeholder')) {
       this.view.dispatch({ 
         effects: [
@@ -310,7 +321,9 @@ export class NileCodeEditor extends NileElement {
         customAutoCompletions,
         placeholderExtension,
         defaultSyntaxHighlightingExtension,
-        autocompletion({aboveCursor: this.aboveCursor}),
+        this.autoCompletionComp.of(
+          autocompletion({ aboveCursor: this.aboveCursor })
+        ),
         language,
         customThemeExtension,
         this.getTabCompletionKeymap(),
@@ -533,10 +546,16 @@ export class NileCodeEditor extends NileElement {
   }
 
   getCustomThemeExtension(): Extension {
-    if (this.customThemeCSS) {
+    if(this.customThemeCSS) {
+      if(this.defaultFont){
+        return [EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec }), EditorView.theme(customisedThemeCss),EditorView.theme(fontFamily)];
+      }
       return [EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec }), EditorView.theme(customisedThemeCss)];
     }
-    return [EditorView.theme(customisedThemeCss), EditorView.theme(DefaultTheme)];
+    if(this.defaultFont){
+      return [EditorView.theme(customisedThemeCss), EditorView.theme(fontFamily)];
+    }
+    return [EditorView.theme(customisedThemeCss)];
   }
 
   restrictSingleLine() {

package/src/nile-code-editor/theme.ts

@@ -38,6 +38,16 @@ export const CustomTheme = {
   },
 };
 
+export const fontFamily = {
+  '.cm-tooltip.cm-tooltip-autocomplete > ul' : {
+    fontFamily: 'monospace !important',
+    fontWeight: '400',
+  },
+  '.cm-content' : {
+    fontFamily: 'monospace !important',
+  }
+}
+
 export const customisedThemeCss = {
   '.cm-content' : {
     fontFamily: 'inherit',
@@ -153,4 +163,4 @@ export const customisedThemeCss = {
   '.cm-completionLabel': {
     marginLeft: '18px',
   }
-};
+};

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');

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-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>>;
 
@@ -258,6 +260,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;
@@ -303,6 +308,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);
     }
@@ -379,6 +388,9 @@ export class NileSelect extends NileElement implements NileFormControl{
       }
     });
 
+    if(this.enableGroupHeader) {
+      this.handleGroupShowSelected();
+    }
     // this.requestUpdate();
   }
 
@@ -392,6 +404,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 });
@@ -541,6 +556,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(() => {
@@ -604,7 +622,9 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
-
+      if(this.enableGroupHeader) {
+        this.handleGroupShowSelected();
+      }
       this.requestUpdate();
     }
   }
@@ -642,6 +662,9 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
+      if(this.enableGroupHeader) {
+        this.handleGroupShowSelected();
+      }
 
       // Emit after updating
       this.updateComplete.then(() => {
@@ -811,6 +834,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) {
@@ -874,8 +900,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;
@@ -921,6 +953,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,37 +42,20 @@ export class NileTableBody extends NileElement {
   @query('slot') defaultSlot: HTMLSlotElement;
   @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;
   @property() type: 'primary' | 'secondary' = 'primary';
-  @property({ type: Boolean, reflect: true, attribute: true }) expandableRows = false;
-  @property({ type: Boolean, reflect: true, attribute: true }) singleRowExpand = false;
+  @property() bodyStyle: string;
 
   @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)
-    
-    if (this.singleRowExpand) {
-      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;
-        }
-      });
-    }
+    this.emit('nile-body-load', { value: this.type, comp:this },true,false)
   }
 
   /* #endregion */
@@ -95,14 +78,6 @@ 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 }) => {
@@ -149,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

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