@aquera/nile-elements 1.4.8 → 1.4.9

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -117,6 +117,32 @@ export const styles = css`
       outline-offset: -1px;
     }
   }
+
+  .option__label-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .option__description {
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+  }
+
+  .text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+    width: 99%;
+  }
+
+  .option__label-text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+    width: 99%;
+  }
 `;
 
 export default [styles];

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

@@ -71,6 +71,19 @@ export class NileOption extends NileElement {
   /* used to pass group name to the option, so that grouped options can be shown */
   @property({ type: String, reflect: true, attribute: true }) groupName: string = '';
 
+  /* used to pass description to the option, so that description can be shown */
+  @property({ type: String, reflect: true, attribute: true }) description: string = '';
+
+  @query('slot[name="prefix"]') prefixSlot!: HTMLSlotElement;
+
+  @query('slot[name="suffix"]') suffixSlot!: HTMLSlotElement;
+
+  @query('.option__label-container') labelContainer!: HTMLElement;
+
+  @state() isParentVirtualSelect = false;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) isDescriptionEnabled = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'option');
@@ -79,6 +92,28 @@ export class NileOption extends NileElement {
     this.checkIfMultipleSelect();
   }
 
+  protected firstUpdated() {
+    if (this.parentElement?.tagName === 'NILE-SELECT') {
+      return;
+    }
+
+    this.isParentVirtualSelect = true;
+    this.applyWidthToLabelContainer();
+  }
+
+  applyWidthToLabelContainer() {
+    const hasPrefix = (this.prefixSlot?.assignedNodes({ flatten: true }) ?? []).length > 0;
+    const hasSuffix = (this.suffixSlot?.assignedNodes({ flatten: true }) ?? []).length > 0;
+
+    let totalWidth = 0;
+    if (hasPrefix) totalWidth += 30;
+    if (hasSuffix) totalWidth += 30;
+    if (this.showCheckbox) totalWidth += 50;
+    if (this.labelContainer) {
+      this.labelContainer.style.width = `calc(100% - ${totalWidth}px)`;
+    }
+  }
+
   checkIfMultipleSelect() {
     // Find the closest parent 'nile-select' element
     const parentSelect = this.closest('nile-select');
@@ -186,11 +221,20 @@ export class NileOption extends NileElement {
           ${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
-              part="label"
-              class="option__label"
-              @slotchange=${this.handleDefaultSlotChange}
-            ></slot>
+            <div class="option__label-container" part="option_label_container">
+              <slot
+                part="label"
+                @slotchange=${this.handleDefaultSlotChange}
+                class=${classMap({
+                  'option__label': true,
+                  'option__label-text-ellipsis': this.isParentVirtualSelect,
+                })}
+              ></slot>
+              ${this.isDescriptionEnabled && this.description ? html`<span part="option_description" class=${classMap({
+                'option__description': true,
+                'text-ellipsis': this.isParentVirtualSelect,
+              })}>${this.description}</span>` : ''}
+            </div>
             <slot part="suffix" name="suffix" class="option__suffix"></slot>
           </div>`
         : ''}

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

@@ -298,6 +298,19 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ type: Boolean, reflect: true }) stickyHeader = false;
 
+  @property({ type: Boolean, reflect: true, attribute: true }) descriptionSearchEnabled = false;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) enableDescription = false;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: true,
+    converter: {
+      fromAttribute: (value) => value === 'true' || value === '',
+      toAttribute: (value) => String(value),
+    },
+  }) allowHtmlLabel = true;
 
   /** Gets the validity state object */
   get validity() {
@@ -372,11 +385,16 @@ export class NileSelect extends NileElement implements NileFormControl{
     if (_changedProperties.has('autoResize')) {
       this.setupResizeObserver();
     }
+    if(_changedProperties.has('enableDescription')) {
+      this.setEnableDescriptionInOptions();
+    }
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
     if(this.enableGroupHeader) {
-      this.handleGroupSearchChange();
+      if(!this.disableLocalSearch) {
+        this.handleGroupSearchChange();
+      }
       this.applyStickyToGroups();
     }
 
@@ -384,6 +402,10 @@ export class NileSelect extends NileElement implements NileFormControl{
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
+    if(_changedProperties.has('enableDescription')) {
+      this.setEnableDescriptionInOptions();
+    }
+
   this.visibilityManager = new VisibilityManager({
     host: this,
     target: this.combobox,
@@ -420,6 +442,18 @@ export class NileSelect extends NileElement implements NileFormControl{
     })
   }
 
+  setEnableDescriptionInOptions() {
+    if (!this.options.length) {
+      this.options = this.getAllOptions();
+    }
+
+    this.options.forEach((option: NileOption) => {
+      if (option) {
+        option.isDescriptionEnabled = !!this.enableDescription;
+      }
+    });
+  }
+
   private addOpenListeners() {
     document.addEventListener('focusin', this.handleDocumentFocusIn);
     document.addEventListener('keydown', this.handleDocumentKeyDown);
@@ -1011,7 +1045,7 @@ export class NileSelect extends NileElement implements NileFormControl{
       name: this.name
     });
 
-    if(this.enableGroupHeader) {
+    if(this.enableGroupHeader && !this.disableLocalSearch) {
       this.handleGroupSearchChange();
     }
     if (!this.disableLocalSearch) {
@@ -1070,15 +1104,15 @@ export class NileSelect extends NileElement implements NileFormControl{
     allOptions.forEach(el => {
       const lowerCaseLabel = el.getTextLabel().toLowerCase();
       const lowerCaseValue = (el.value || '').toLowerCase();
-      if (
+      const lowerCaseDescription = (el.description || '').toLowerCase();
+
+      const matches =
         lowerCaseLabel.includes(lowerCaseSearchValue) ||
-        lowerCaseValue.includes(lowerCaseSearchValue)
-      ) {
-        el.hidden = false;
-        filteredOptions.push(el);
-      } else {
-        el.hidden = true;
-      }
+        lowerCaseValue.includes(lowerCaseSearchValue) ||
+        (this.descriptionSearchEnabled && lowerCaseDescription.includes(lowerCaseSearchValue));
+
+      el.hidden = !matches;
+      if (matches) filteredOptions.push(el);
     });
 
     // Update portal content if portal is active

package/src/nile-select/virtual-scroll-helper.ts

@@ -53,6 +53,9 @@ export class VirtualScrollHelper {
           .open=${component.open}
           .loading=${component.loading}
           .portal=${component.portal}
+          .descriptionSearchEnabled=${component.descriptionSearchEnabled}
+          .allowHtmlLabel=${component.allowHtmlLabel}
+          .enableDescription=${component.enableDescription}
           exportparts="
             select-options,
             select-no-results,

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

@@ -537,8 +537,11 @@ export const styles = css`
   .select.select--open .select__combobox {
     border-color: var(--ng-colors-border-brand);
     box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;
-}
+  }
 
+  :host([enableDescription]) .option::part(base) {
+    height: 41px;
+  }
 `;
 
 export default [styles];

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

@@ -271,6 +271,19 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean, reflect: true, attribute: true }) enableTabClose = false;
 
+  @property({ type: Boolean, reflect: true, attribute: true }) descriptionSearchEnabled = false;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: true,
+    converter: {
+      fromAttribute: (value) => value === 'true',
+      toAttribute: (value) => String(value),
+    },
+  }) allowHtmlLabel = true;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) enableDescription = false;
 
   @state() showListbox: boolean = false;
   @state() private wasShowSelectedCheckedOnClose: boolean = false;
@@ -349,6 +362,36 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     return item?.value || item;
   }
 
+  /**
+   * Get description for an item using renderItemConfig or fallback to item.description
+   */
+  private getItemDescription(item: any): string {
+    if (this.renderItemConfig?.getDescription) {
+      return this.renderItemConfig.getDescription(item);
+    }
+    return item?.description || item || '';
+  }
+
+  /**
+   * Get description for an item using renderItemConfig or fallback to item.description
+   */
+  private getItemPrefix(item: any): string {
+    if (this.renderItemConfig?.getPrefix) {
+      return this.renderItemConfig.getPrefix(item);
+    }
+    return item?.prefix || item || '';
+  }
+
+  /**
+   * Get suffix for an item using renderItemConfig or fallback to item.suffix
+   */
+  private getItemSuffix(item: any): string {
+    if (this.renderItemConfig?.getSuffix) {
+      return this.renderItemConfig.getSuffix(item);
+    }
+    return item?.suffix || item || '';
+  }
+
   /**
    * Get search text for an item using renderItemConfig or fallback to display text
    */
@@ -731,7 +774,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.value, 
       itemsToSearch, 
       this.getDisplayText.bind(this),
-      this.renderItemConfig?.getValue
+      this.renderItemConfig?.getValue,
+      this.allowHtmlLabel
     );
 
     if (this.multiple) {
@@ -848,6 +892,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.originalOptionItems,
       this.data,
       this.getDisplayText.bind(this),
+      this.getItemDescription.bind(this),
+      this.descriptionSearchEnabled,
       this.renderItemConfig?.getSearchText
     );
     if (this.portal) {
@@ -1493,10 +1539,15 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.multiple,
       this.renderItemConfig?.getDisplayText,
       this.renderItemConfig?.getValue,
+      this.renderItemConfig?.getDescription,
+      this.renderItemConfig?.getPrefix,
+      this.renderItemConfig?.getSuffix,
       this.showNoResults,
       this.noResultsMessage,
       this.optionsLoading || this.loading,
-      this.handleScroll.bind(this)
+      this.handleScroll.bind(this),
+      this.allowHtmlLabel,
+      this.enableDescription
     );
   }
 

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

@@ -9,6 +9,7 @@ import { html, type TemplateResult } from 'lit';
 import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 export class VirtualSelectRenderer {
   static getVirtualizedContent(
@@ -19,10 +20,15 @@ export class VirtualSelectRenderer {
     multiple: boolean,
     getDisplayText?: (item: any) => string,
     getItemValue?: (item: any) => string,
+    getItemDescription?: (item: any) => string,
+    getItemPrefix?: (item: any) => string,
+    getItemSuffix?: (item: any) => string,
     showNoResults?: boolean,
     noResultsMessage?: string,
     loading?: boolean,
-    onScroll?: (e: Event) => void
+    onScroll?: (e: Event) => void,
+    allowHtmlLabel?: boolean,
+    enableDescription?: boolean
   ): TemplateResult {
     return html`
       <div part="select-options" class="select__options ${
@@ -45,13 +51,13 @@ export class VirtualSelectRenderer {
                       ${virtualize({
                         items: data,
                         renderItem: (item: any): TemplateResult =>
-                          VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue),
+                          VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue, getItemDescription, getItemPrefix, getItemSuffix, allowHtmlLabel, enableDescription),
                         scroller: true,
                       })}
                     `
                   : html`
                       ${data.map((item: any) => 
-                        VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue)
+                        VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue, getItemDescription, getItemPrefix, getItemSuffix, allowHtmlLabel, enableDescription)
                       )}
                     `}
               </div>
@@ -65,7 +71,12 @@ export class VirtualSelectRenderer {
     value: string | string[], 
     multiple: boolean,
     getDisplayText?: (item: any) => string,
-    getItemValue?: (item: any) => string
+    getItemValue?: (item: any) => string,
+    getItemDescription?: (item: any) => string,
+    getItemPrefix?: (item: any) => string,
+    getItemSuffix?: (item: any) => string,
+    allowHtmlLabel?: boolean,
+    enableDescription?: boolean,
   ): TemplateResult {
     if(!item) {
       return html``;
@@ -77,6 +88,9 @@ export class VirtualSelectRenderer {
     const displayText = displayTextFn(item);
     const isDisabled = item?.disabled || false;
     const className = item?.className;
+    const description = (getItemDescription ? getItemDescription(item) : item?.description) ?? '';
+    const prefix = (getItemPrefix ? getItemPrefix(item) : item?.prefix) ?? '';
+    const suffix = (getItemSuffix ? getItemSuffix(item) : item?.suffix) ?? '';
     
     let isSelected = false;
     if (multiple) {
@@ -84,16 +98,23 @@ export class VirtualSelectRenderer {
     } else {
       isSelected = (Array.isArray(value) ? value[0] : value) === optionValue;
     }
-    
+
     return html`
-      <nile-option 
+      <nile-option
         value=${optionValue} 
         .selected=${isSelected} 
         .disabled=${isDisabled}
         .showCheckbox=${multiple}
-        class=${ifDefined(className || undefined)}
+        class=${classMap({
+          option: enableDescription ?? false,
+          [className ?? '']: !!className,
+        })}
+        .description=${description}
+        .isDescriptionEnabled=${enableDescription}
       >
-        ${unsafeHTML(displayText)}
+        ${unsafeHTML(prefix)}
+        ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}
+        ${unsafeHTML(suffix)}
       </nile-option>
     `;
   }

package/src/nile-virtual-select/search-manager.ts

@@ -11,6 +11,8 @@ export class VirtualSelectSearchManager {
     originalOptionItems: any[],
     data: any[], 
     renderItemFunction: (item: any) => string,
+    getItemDescription: (item: any) => string,
+    descriptionSearchEnabled: boolean,
     getSearchText?: (item: any) => string
   ): { filteredItems: any[], showNoResults: boolean } {
     if (originalOptionItems.length === 0 && data.length > 0) {
@@ -39,6 +41,10 @@ export class VirtualSelectSearchManager {
     const filteredItems = originalOptionItems.filter((item: any) => {
       const itemValue = searchTextFn(item);
       const lowerCaseItemValue = itemValue.toLowerCase();
+      const itemDescription = getItemDescription(item);
+      if (descriptionSearchEnabled && itemDescription) {
+        return lowerCaseItemValue.includes(lowerCaseSearchValue) || itemDescription.includes(lowerCaseSearchValue);
+      }
       return lowerCaseItemValue.includes(lowerCaseSearchValue);
     });
 

package/src/nile-virtual-select/selection-manager.ts

@@ -12,7 +12,8 @@ export class VirtualSelectSelectionManager {
     value: string | string[], 
     data: any[], 
     getDisplayText: (item: any) => string,
-    getItemValue?: (item: any) => string
+    getItemValue?: (item: any) => string,
+    allowHtmlLabel?: boolean
   ): VirtualOption[] {
     if (!value || (Array.isArray(value) && value.length === 0)) {
       return [];
@@ -37,6 +38,10 @@ export class VirtualSelectSelectionManager {
         value: valueItem,
         selected: true,
         getTextLabel: () => {
+          if(!allowHtmlLabel){
+            return displayText;
+          }
+
           // If displayText contains HTML, strip tags
           if (typeof displayText === 'string' && /<[^>]+>/.test(displayText)) {
             const div = document.createElement('div');

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

@@ -18,6 +18,9 @@ export interface RenderItemConfig {
   getDisplayText: (item: any) => string;
   getValue?: (item: any) => string;
   getSearchText?: (item: any) => string;
+  getDescription?: (item: any) => string;
+  getPrefix?: (item: any) => string;
+  getSuffix?: (item: any) => string;
 }
 
 export interface VirtualSelectProperties {