@aquera/nile-elements 0.1.61-beta-1.0 → 0.1.61

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

@@ -0,0 +1,144 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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';
+
+/**
+ * Resizable Styles Utility
+ * Centralized styles for resizable table functionality
+ */
+
+export const resizableHostStyles = css`
+  :host([resizable]) {
+    position: relative;
+    overflow: hidden;
+    table-layout: fixed;
+  }
+`;
+
+export const resizableHeaderStyles = css`
+  :host([resizable]) {
+    position: relative;
+  }
+
+  :host([resizable]) .header__item__wrapper {
+    border-right: 1px solid var(--nile-colors-neutral-400);
+    position: relative;
+  }
+`;
+
+export const resizerStyles = css`
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: col-resize;
+    user-select: none;
+    background-color: var(--nile-colors-neutral-100);
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    right: 3px;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background-color: var(--nile-colors-neutral-500);
+    opacity: 0.8;
+  }
+
+  .resizer:hover {
+    background-color: var(--nile-colors-neutral-400);
+  }
+
+  .resizer:hover::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+  }
+
+  .resizer.resizing {
+    background-color: var(--nile-colors-neutral-400);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer.resizing::before {
+    background-color: var(--nile-colors-neutral-700);
+    opacity: 1;
+    width: 3px;
+  }
+`;
+
+export const headerResizerStyles = css`
+  .resizer {
+    position: absolute;
+    right: -2px;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: ew-resize;
+    user-select: none;
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    height: 100%;
+    opacity: 0.8;
+  }
+
+  .resizer.resizing {
+    border-right: 4px double var(--nile-colors-neutral-400);
+    background-color: transparent;
+    opacity: 1;
+  }
+`;
+
+export const resizableSlotStyles = css`
+  :host([resizable]) ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  :host([resizable]) ::slotted(span),
+  :host([resizable]) ::slotted(div),
+  :host([resizable]) ::slotted(p) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`;
+
+export const tableLayoutStyles = css`
+  .nile__table__body[resizable] {
+    table-layout: fixed;
+  }
+`; 

package/src/nile-chip/nile-chip.ts

@@ -100,7 +100,15 @@ export class NileChip extends NileElement {
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     if (changedProperties.has('autoCompleteOptions')) {
-      this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];
+      let options = this.autoCompleteOptions;
+      if (typeof options === 'string') {
+        try {
+          options = JSON.parse(options);
+        } catch (e) {
+          options = [];
+        }
+      }
+      this.filteredAutoCompleteOptions = Array.isArray(options) ? [...options] : [];
       if (this.noDuplicates) {
         this.filteredAutoCompleteOptions =
           this.filteredAutoCompleteOptions.filter(

package/src/nile-empty-state/nile-empty-state.ts

@@ -52,20 +52,20 @@ export class NileEmptyState extends NileElement {
    */
   public render(): TemplateResult {
     return html`
-		<div class="${classMap({
+		<div part="container" class="${classMap({
       'empty-state': true,
       'empty-state--sm': this.size == 'sm',
       'empty-state--md': this.size == 'md',
       'empty-state--lg': this.size == 'lg'
     })}">
-      <div class="${classMap({ 'empty-state__body': true })}">
+      <div  part="body" class="${classMap({ 'empty-state__body': true })}">
 
         ${this.variant == 'content' ? html`
-        <div class="empty-state__body--content">
+        <div part="content-image" class="empty-state__body--content">
           
-          <div src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale':this.grayscale  })}"></div>
+          <div part="image" src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale':this.grayscale  })}"></div>
           ${!this.icon ? nothing : html`
-          <div class="empty-state__img__icon">
+          <div part="icon-wrapper" class="empty-state__img__icon">
             <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
           </div>`
           }
@@ -73,26 +73,26 @@ export class NileEmptyState extends NileElement {
         }
 				
 			  ${this.variant == 'tonal' ? html`
-				<div class="empty-state__body--tonal">
+				<div part="tonal-body" class="empty-state__body--tonal">
 					<nile-icon name="${this.icon}" size="40"></nile-icon>
 				</div>`: nothing
         }
 
 			  ${this.variant == 'flat' ? html`
-				<div class="empty-state__body--flat">
+				<div part="flat-body" class="empty-state__body--flat">
 					<span class="nile-flat-type-icon">
 						<nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
 					</span>
 				</div>`: nothing
         }
       
-        <div class="empty__state__text-section">
-          <div class="empty-state__text">${this.text}</div>
-          <div class="empty-state__subtext">${this.subText}</div>
+        <div part="text-section" class="empty__state__text-section">
+          <div part="text" class="empty-state__text">${this.text}</div>
+          <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
         </div>
 			</div>
 
-			<div class="empty-state-actions">
+			<div part="actions" class="empty-state-actions">
 				<slot></slot>
 			</div>
 		</div>

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

@@ -49,7 +49,6 @@ export class NileOption extends NileElement {
   @query('.option__label') defaultSlot: HTMLSlotElement;
 
   @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
-  @state() selected = false; // the option is selected and has aria-selected="true"
   @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
   @state() hidden = false; // the option is hidden
   @state() isMultipleSelect = false;
@@ -66,17 +65,22 @@ export class NileOption extends NileElement {
   /** Draws the option in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** Indicates whether the option is selected. */
+  @property({ type: Boolean, reflect: true }) selected = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 
+    // Find the closest parent 'nile-select' or 'nile-virtual-select' element
+    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');
     this.checkIfMultipleSelect();
   }
 
   checkIfMultipleSelect() {
     // Find the closest parent 'nile-select' element
-    const parentSelect = this.closest('nile-select');
+    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');
 
     // Check if the parent has the 'multiple' attribute
     if (parentSelect && parentSelect.hasAttribute('multiple')) {

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

@@ -33,8 +33,11 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
 import type { NileFormControl } from '../internal/nile-element';
 import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
+import type { RenderItemConfig } from '../nile-virtual-select/types.js';
 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';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -53,6 +56,7 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  * @dependency nile-icon
  * @dependency nile-popup
  * @dependency nile-tag
+ * @dependency nile-virtual-select
  *
  * @slot - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
@@ -91,14 +95,15 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  */
 
 @customElement('nile-select')
-export class NileSelect extends NileElement implements NileFormControl {
+export class NileSelect extends NileElement implements NileFormControl{
   static styles: CSSResultGroup = styles;
 
   // protected override BUBBLES=false;
 
-  private readonly formControlController = new FormControlController(this, {
-    assumeInteractionOn: ['nile-blur', 'nile-input'],
-  });
+  private formControlController: FormControlController | null;
+  private virtualScrollHelper!: VirtualScrollHelper;
+
+
   private readonly hasSlotController = new HasSlotController(
     this,
     'help-text',
@@ -246,6 +251,13 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: String }) noResultsMessage: string = 'No results found';
 
+  /** Enhanced configuration for rendering items with support for display text, value, and search text */
+  @property({ attribute: false }) renderItemConfig?: RenderItemConfig;
+
+  @property({ type: Array }) data: any = [];
+
+  @property({ type: Boolean }) enableVirtualScroll = false;
+
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -256,8 +268,18 @@ export class NileSelect extends NileElement implements NileFormControl {
     return this.valueInput?.validationMessage;
   }
 
+  constructor() {
+    super();
+  }
+
   connectedCallback() {
     super.connectedCallback();
+    if(!this.enableVirtualScroll) {
+      this.formControlController = new FormControlController(this, {
+          assumeInteractionOn: ['nile-blur', 'nile-input'],
+      });
+    }
+    this.virtualScrollHelper = new VirtualScrollHelper(this);
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -771,7 +793,7 @@ export class NileSelect extends NileElement implements NileFormControl {
 
     // Update validity
     this.updateComplete.then(() => {
-      this.formControlController.updateValidity();
+      this.formControlController?.updateValidity();
     });
 
     this.calculateTotalWidthOfTags();
@@ -822,8 +844,8 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleInvalid(event: Event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
+    this.formControlController?.setValidity(false);
+    this.formControlController?.emitInvalidEvent(event);
   }
 
   @watch('disabled', { waitUntilFirstUpdate: true })
@@ -926,7 +948,7 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Gets the associated form, if one exists. */
   getForm(): HTMLFormElement | null {
-    return this.formControlController.getForm();
+    return this.formControlController?.getForm() || null;
   }
 
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
@@ -937,7 +959,7 @@ export class NileSelect extends NileElement implements NileFormControl {
   /** Sets a custom validation message. Pass an empty string to restore validity. */
   setCustomValidity(message: string) {
     this.valueInput.setCustomValidity(message);
-    this.formControlController.updateValidity();
+    this.formControlController?.updateValidity();
   }
 
   /** Sets focus on the control. */
@@ -1010,6 +1032,10 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   render() {
+    if(this.enableVirtualScroll) {
+      return this.virtualScrollHelper.renderVirtualizedContent();
+    }
+
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');

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

@@ -0,0 +1,56 @@
+import { html } from 'lit';
+import type NileElement from '../internal/nile-element';
+
+/**
+ * Helper class to manage virtual scroll functionality for nile-select component
+ */
+export class VirtualScrollHelper {
+  private component: NileElement;
+
+  constructor(component: NileElement) {
+    this.component = component;
+  }
+
+  renderVirtualizedContent(): any {
+    const component = this.component as any;
+
+    return html`
+      <div class="virtual-select">
+        <nile-virtual-select
+          .name=${component.name}
+          .value=${component.value}
+          .placeholder=${component.placeholder}
+          .size=${component.size}
+          .searchEnabled=${component.searchEnabled}
+          .internalSearchPlaceHolder=${component.internalSearchPlaceHolder}
+          .disableLocalSearch=${component.disableLocalSearch}
+          .optionsLoading=${component.optionsLoading}
+          .multiple=${component.multiple}
+          .helpText=${component.helpText}
+          .errorMessage=${component.errorMessage}
+          .warning=${component.warning}
+          .error=${component.error}
+          .success=${component.success}
+          .disabled=${component.disabled}
+          .clearable=${component.clearable}
+          .hoist=${component.hoist}
+          .filled=${component.filled}
+          .pill=${component.pill}
+          .label=${component.label}
+          .placement=${component.placement}
+          .form=${component.form}
+          .required=${component.required}
+          .showNoResults=${component.showNoResults}
+          .noResultsMessage=${component.noResultsMessage}
+          .renderItemConfig=${component.renderItemConfig}
+          .blockValueChange=${component.blockValueChange}
+          .noWidthSync=${component.noWidthSync}
+          .maxOptionsVisible=${component.maxOptionsVisible}
+          .data=${component.data}
+        >
+          <slot name="prefix" slot="prefix"></slot>
+        </nile-virtual-select>
+      </div>
+    `;
+  }
+}

package/src/nile-slider/index.ts

@@ -0,0 +1 @@
+export { NileSlider } from './nile-slider';

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

@@ -0,0 +1,119 @@
+/**
+* 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';
+
+/**
+* Slider CSS
+*/
+export const styles = css`
+  :host {
+    display: block;
+  }
+
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    height: 100px;
+  }
+
+  .align-item-center {
+    align-items: center;
+  }
+
+  slot.span {
+    font-size: var(--nile-font-size-micro);
+    margin-top: 14px;
+  }
+
+  .range-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-sm);
+  }
+
+  .column-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .label-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .label-container span {
+    margin: var(--nile-spacing-none);
+    padding: var(--nile-spacing-none);
+    font-size: var(--nile-font-size-micro);
+  }
+
+  .range {
+    position: relative;
+    width: 228px;
+    height: 4px;
+    background-color: var(--nile-colors-neutral-400);
+    user-select: none;
+    border-radius: var(--nile-radius-radius-3xl);
+  }
+
+  .range:hover {
+    cursor: pointer;
+  }
+
+  .range-completed {
+    position: absolute;
+    height: 100%;
+    width: 0%;
+    background-color: var(--nile-colors-primary-600);
+    top: 0px;
+    left: 0px;
+    z-index: 98;
+    border-radius: var(--nile-radius-radius-3xl);
+  }
+
+  .range-button {
+    height: 12px;
+    width: 12px;
+    background-color: var(--nile-colors-primary-600);
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: var(--nile-radius-radius-3xl);
+    left: 0;
+    z-index: 100;
+    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;
+    transition: box-shadow var(--nile-transition-duration-default) ease;
+  }
+
+  .range-button:hover, .range-button-two:hover {
+    cursor: pointer;
+    background-color: var(--nile-colors-primary-700);
+  }
+
+  .range-button:active, .range-button-two:active {
+    transition: box-shadow var(--nile-transition-duration-default) ease;
+    background-color: var(--nile-colors-primary-700);
+    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;
+  }
+
+  .range-button-two {
+    height: 12px;
+    width: 12px;
+    background-color: var(--nile-colors-primary-600);
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: var(--nile-radius-radius-3xl);
+    left: 100%;
+    z-index: 100;
+    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;
+    transition: box-shadow var(--nile-transition-duration-default) ease;
+  }
+`;
+
+export default [styles];

package/src/nile-slider/nile-slider.template.ts

@@ -0,0 +1,77 @@
+import { TemplateResult, html } from 'lit';
+import NileSlider from './nile-slider';
+import { classMap } from 'lit/directives/class-map.js';
+
+export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
+  return html`
+    <div>
+      <nile-tooltip
+        content=${nileSlider.rangeOneValue}
+        placement=${nileSlider.tooltipPosition}
+      >
+        <div 
+          id="range-one" 
+          class="range-button"
+          part="range-button"
+          role="slider"
+          tabindex="0"
+          aria-valuemin=${nileSlider.minValue}
+          aria-valuemax=${nileSlider.maxValue}
+          aria-valuenow=${nileSlider.rangeOneValue}
+          aria-label="Minimum value"
+        ></div>
+      </nile-tooltip>
+      <nile-tooltip
+        content=${nileSlider.rangeTwoValue}
+        placement=${nileSlider.tooltipPosition}
+      >
+        <div
+          id="range-two"
+          class="range-button-two"
+          part="range-button-two"
+          role="slider"
+          tabindex="0"
+          aria-valuemin=${nileSlider.minValue}
+          aria-valuemax=${nileSlider.maxValue}
+          aria-valuenow=${nileSlider.rangeTwoValue}
+          aria-label="Maximum value"
+        ></div>
+      </nile-tooltip>
+    </div>
+  `;
+};
+
+export const singleSlider = (nileSlider: NileSlider): TemplateResult => {
+  return html`
+    <div>
+      <nile-tooltip
+        content=${nileSlider.value}
+        placement=${nileSlider.tooltipPosition}
+      >
+        <div 
+          class=${classMap({
+            'range-button': true,
+            'range-button-active': nileSlider.activeThumb === 'one',
+          })} 
+          part="range-button"
+          role="slider"
+          tabindex="0"
+          aria-valuemin=${nileSlider.minValue}
+          aria-valuemax=${nileSlider.maxValue}
+          aria-valuenow=${nileSlider.value}
+          aria-label=${nileSlider.ariaLabel || "Slider value"}
+        ></div>
+      </nile-tooltip>
+    </div>
+  `;
+};
+
+
+export const lableContaier = (nileSlider: NileSlider): TemplateResult => {
+  return html`
+    <div part="label-container" class="label-container">
+      <span id="label-start">${nileSlider.labelStart}</span>
+      <span id="label-end">${nileSlider.labelEnd}</span>
+    </div>
+  `;
+};