@aquera/nile-elements 0.1.67-beta-2.4 → 0.1.67-beta-2.5

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.67-beta-2.4",
+  "version": "0.1.67-beta-2.5",
   "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",
@@ -191,4 +192,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -82,4 +82,4 @@ export {NilePagination } from './nile-pagination';
 export { NileSlider } from './nile-slider';
 export { NileFileUpload } from './nile-file-upload';
 export { NileFilePreview } from './nile-file-preview';
-export { NileRichTextEditor } from './nile-rich-text-editor';
+export { NileOptionGroup } from './nile-option-group';

package/src/nile-icon/icons/svg/index.ts

@@ -171,16 +171,6 @@ export { default as flowmapworkflow } from './flowmap-workflow';
 export { default as flowmap } from './flowmap';
 export { default as folder } from './folder';
 export { default as foreach } from './foreach';
-export { default as format_align_justify } from './format_align_justify';
-export { default as format_align_left } from './format_align_left';
-export { default as format_align_middle } from './format_align_middle';
-export { default as format_align_right } from './format_align_right';
-export { default as format_bold } from './format_bold';
-export { default as format_clear } from './format_clear';
-export { default as format_italic } from './format_italic';
-export { default as format_list_bulleted } from './format_list_bulleted';
-export { default as format_list_numbered } from './format_list_numbered';
-export { default as format_underline } from './format_underline';
 export { default as frequency } from './frequency';
 export { default as fullunion } from './full-union';
 export { default as fullscreen } from './fullscreen';
@@ -224,7 +214,6 @@ export { default as identityledger } from './identityledger';
 export { default as ifelse } from './ifelse';
 export { default as ifelsenew } from './ifelsenew';
 export { default as image } from './image';
-export { default as image_2 } from './image_2';
 export { default as immutable } from './immutable';
 export { default as infoicon } from './info-icon';
 export { default as info } from './info';
@@ -248,7 +237,6 @@ export { default as leftpointarrow } from './leftpointarrow';
 export { default as lifebuoy01 } from './life-buoy-01';
 export { default as line } from './line';
 export { default as link } from './link';
-export { default as link_2 } from './link_2';
 export { default as listattribute } from './list-attribute';
 export { default as list } from './list';
 export { default as loader } from './loader';

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,24 @@
+export interface IconData {
+  name: string;
+  size?: string;
+  color?: 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 name="${this.data?.prefix?.icon?.name}" size="${this.data?.prefix?.icon?.size || "16"}" color="${this.data?.prefix?.icon?.color || "var(--nile-colors-dark-500)"}"></nile-icon>`
+						: this.data?.prefix?.prefixText
+							? html`<span>${this.data?.prefix?.prefixText}</span>`
+							: this.data?.prefix?.image?.src
+								? html`<img 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>${this.data?.textContent}</span>`
+						: html`<slot part="content"></slot>`
+					}
+				</div>
+
+				<!-- suffix content -->
+				${
+					this.data?.suffix?.icon?.name
+					? html`<nile-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)"}"></nile-icon>`
+					: this.data?.suffix?.suffixText
+						? html`<span>${this.data?.suffix?.suffixText}</span>`
+						: this.data?.suffix?.image?.src
+							? html`<img 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) {