@aquera/nile-elements 1.2.7-beta-1.5 → 1.2.7-beta-1.6

package/src/nile-lite-tooltip/nile-lite-tooltip.ts

@@ -0,0 +1,364 @@
+import { customElement, property } from 'lit/decorators.js';
+import { CSSResultArray, PropertyValues } from 'lit';
+import { styles } from './nile-lite-tooltip.css';
+import NileElement from '../internal/nile-element';
+import tippy, { Instance, Props, followCursor, roundArrow, createSingleton } from 'tippy.js';
+import { parseFollowCursor, parseDuration } from './utils';
+
+/**
+ * Nile lite-tooltip component.
+ *	
+ * Supports wrapper, sibling (for), and singleton modes.
+ * Aligns with Tippy.js props and Nile design system.
+ *
+ * @tag nile-lite-tooltip
+ */
+@customElement('nile-lite-tooltip')
+export class NileliteTooltip extends NileElement {
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  protected createRenderRoot() {
+    return this; // lite DOM
+  }
+
+  // ───────────── Props ─────────────
+  /** ID of the target element (for sibling mode) */
+  @property({ type: String, attribute: 'for' }) for: string | null = null;
+
+  /** Tooltip content text or HTML */
+  @property({ type: String, reflect: true }) content = '';
+
+  /** Tooltip size (applies CSS class) */
+  @property({ type: String, reflect: true }) size: 'small' | 'large' = 'small';
+
+  /** Animation duration for show/hide (ms). Can be a single value or [show, hide]. */
+  @property({ type: String, reflect: true }) duration: string | number | [number, number] = 200;
+
+  /** Interactive mode */
+  @property({ type: Boolean, reflect: true }) interactive = false;
+
+  /** Placement of the tooltip */
+  @property({ type: String })
+  placement:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'auto'
+    | 'auto-start'
+    | 'auto-end' = 'top';
+
+  /** Disabled state */
+  @property({ type: Boolean }) disabled = false;
+
+  /** Distance (Popper offset Y or main axis) */
+  @property({ type: Number }) distance = 8;
+
+  /** Skidding (Popper offset X or cross axis) */
+  @property({ type: Number }) skidding = 0;
+
+  /** Whether tooltip is open (controlled mode) */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /** Trigger behavior */
+  @property({ type: String }) trigger: Props['trigger'] = 'mouseenter focus';
+ 
+
+  /** Allow HTML content rendering */
+  @property({ type: Boolean, reflect: true }) allowHTML = false;
+
+  /** Cursor following mode */
+  @property({ type: String, reflect: true, attribute: true })
+  followCursor:
+    | boolean
+    | 'initial'
+    | 'horizontal'
+    | 'vertical'
+    | 'true'
+    | 'false' = false;
+
+  /** Arrow type for tooltip */
+  @property({ type: String, reflect: true, attribute: true })
+  arrow: 'default' | 'round' | 'large' | 'small' | 'wide' | 'narrow' | 'none' =
+    'default';
+
+  /** Enables singleton mode when multiple children exist */
+  @property({ type: Boolean, reflect: true }) singleton = false;
+
+
+  /** Not added in Doc */
+
+
+  /** Delay before show/hide (ms or [show, hide]) */
+@property({ type: String, reflect: true }) delay: number | [number, number] = 0;
+
+/** Tooltip max width */
+@property({ type: String, reflect: true }) maxWidth: string | number = 'auto';
+
+/** Z-index of tooltip */
+@property({ type: Number }) zIndex = 9999;
+
+/** Whether tooltip hides on click */
+@property({ type: [Boolean, String], reflect: true }) hideOnClick: boolean | 'toggle' = true;
+
+/** Enables inertia motion effect */
+@property({ type: Boolean, reflect: true }) inertia = false;
+
+/** Interactive border (px) */
+@property({ type: Number }) interactiveBorder = 2;
+
+ 
+
+
+  private tooltipInstances?: Instance[];
+  private singleInstance?: Instance;
+  private singletonInstance?: Instance;
+  private targetEl?: HTMLElement | null;
+  private generatedId?: string;
+  private prevDescribedby?: string | null;
+
+  constructor() {
+    super();
+    this.injectTippyStyles();
+  }
+
+  // Inject custom styles for tooltips
+  private injectTippyStyles(): void {
+    const STYLE_ID = 'nile-lite-tooltip-styles';
+    if (document.getElementById(STYLE_ID)) return;
+
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+      .tippy-box[data-animation=fade][data-state=hidden] { opacity: 0; }
+      [data-tippy-root] { max-width: calc(100vw - 10px); }
+      .tippy-box {
+        position: relative;
+        background-color: #333;
+        color: #fff;
+        border-radius: 4px;
+        font-size: 14px;
+        line-height: 1.4;
+        white-space: normal;
+        outline: 0;
+        transition-property: transform, visibility, opacity;
+      }
+
+      /* Placement-specific arrows */
+      .tippy-box[data-placement^=top] > .tippy-arrow { bottom: 0; }
+      .tippy-box[data-placement^=top] > .tippy-arrow:before {
+        bottom: -7px;
+        border-width: 8px 8px 0;
+        border-top-color: initial;
+      }
+
+      .tippy-box[data-placement^=bottom] > .tippy-arrow { top: 0; }
+      .tippy-box[data-placement^=bottom] > .tippy-arrow:before {
+        top: -7px;
+        border-width: 0 8px 8px;
+        border-bottom-color: initial;
+      }
+
+      .tippy-box[data-placement^=left] > .tippy-arrow { right: 0; }
+      .tippy-box[data-placement^=left] > .tippy-arrow:before {
+        right: -7px;
+        border-width: 8px 0 8px 8px;
+        border-left-color: initial;
+      }
+
+      .tippy-box[data-placement^=right] > .tippy-arrow { left: 0; }
+      .tippy-box[data-placement^=right] > .tippy-arrow:before {
+        left: -7px;
+        border-width: 8px 8px 8px 0;
+        border-right-color: initial;
+      }
+
+      .tippy-box[data-inertia][data-state=visible] {
+        transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
+      }
+
+      .tippy-box.large { font-size: 16px; padding: 8px 12px; }
+      .tippy-arrow { width: 16px; height: 16px; color: #333; }
+      .tippy-arrow:before {
+        content: "";
+        position: absolute;
+        border-color: transparent;
+        border-style: solid;
+      }
+
+      .tippy-content {
+        position: relative;
+        padding: 2px 6px;
+        z-index: 1;
+      }
+		.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}
+    `;
+    document.head.appendChild(style);
+  }
+
+  firstUpdated(): void {
+    this.attachTooltip();
+  }
+
+  
+  private attachTooltip(): void {
+    this.destroyTooltips();
+    if (this.disabled) return;
+
+    const options: Partial<Props> = {
+      content: this.content || this.getAttribute('data-tippy-content') || undefined,
+      placement: this.placement,
+      trigger: this.trigger,
+      offset: [this.skidding, this.distance],
+      theme: 'lite',
+      animation: 'fade',
+      interactive: this.interactive,
+      arrow: roundArrow,
+      duration: parseDuration(this.duration),
+      allowHTML: this.allowHTML,
+      delay: this.delay,
+      maxWidth: this.maxWidth,
+      zIndex: this.zIndex,
+      hideOnClick: false,  
+      inertia: this.inertia,
+      interactiveBorder: this.interactiveBorder,
+      appendTo: document.body ,
+      followCursor: parseFollowCursor(this.followCursor),
+      plugins: parseFollowCursor(this.followCursor) ? [followCursor] : [],
+      onShow: instance => {
+        this.open = true;
+        this.dispatchEvent(new CustomEvent('nile-show', { detail: { instance, target: instance.reference } }));
+        this.dispatchEvent(new CustomEvent('nile-toggle', { detail: { open: true, instance, target: instance.reference } }));
+        return undefined;
+      },
+      onHide: instance => {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('nile-hide', { detail: { instance, target: instance.reference } }));
+        this.dispatchEvent(new CustomEvent('nile-toggle', { detail: { open: false, instance, target: instance.reference } }));
+        return undefined;
+      },
+    };
+    if (this.for) {
+      this.targetEl = document.getElementById(this.for);
+      if (!this.targetEl) return;
+
+      if (!this.id) {
+        this.generatedId = `nile-tooltip-${Math.random().toString(36).slice(2, 9)}`;
+        this.id = this.generatedId;
+      }
+
+      this.prevDescribedby = this.targetEl.getAttribute('aria-describedby');
+      const describedby = this.prevDescribedby
+        ? `${this.prevDescribedby} ${this.id}`
+        : this.id;
+      this.targetEl.setAttribute('aria-describedby', describedby);
+
+      this.singleInstance = tippy(this.targetEl, options);
+      if (this.size)
+        this.singleInstance.popper
+          .querySelector('.tippy-box')
+          ?.classList.add(this.size);
+      if (this.open) {
+        queueMicrotask(() => this.singleInstance?.show());
+      }
+      return;
+    }
+
+const children = Array.from(this.querySelectorAll('*'));
+if (children.length > 0) {
+ 
+  this.tooltipInstances = children.map(child => {
+    const el = child as HTMLElement;
+    const localContent = el.getAttribute('content') || this.content; 
+    const instance = tippy(el, { ...options, content: localContent });
+    instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
+    return instance;
+  });
+
+
+  if (this.singleton && this.tooltipInstances.length > 1) {
+    this.singletonInstance = createSingleton(this.tooltipInstances, {
+      delay: [75, 0],
+      arrow: roundArrow,
+      moveTransition: 'transform 0.15s ease-out',
+    });
+  }
+
+  if (this.open) {
+    if (this.singletonInstance) this.singletonInstance.show();
+    else this.tooltipInstances.forEach(t => t.show());
+  }
+}
+
+  }
+
+  private destroyTooltips(): void {
+    this.tooltipInstances?.forEach(t => t.destroy());
+    this.singleInstance?.destroy();
+    this.singletonInstance?.destroy();
+
+    this.tooltipInstances = undefined;
+    this.singleInstance = undefined;
+    this.singletonInstance = undefined;
+
+    if (this.targetEl && this.id) {
+      const current = this.targetEl
+        .getAttribute('aria-describedby')
+        ?.split(' ')
+        .filter(id => id !== this.id)
+        .join(' ')
+        .trim();
+      if (current) {
+        this.targetEl.setAttribute('aria-describedby', current);
+      } else {
+        this.targetEl.removeAttribute('aria-describedby');
+      }
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.destroyTooltips();
+  }
+
+  updated(changed: PropertyValues): void {
+    super.updated(changed);
+
+    if (
+      ['for', 'content', 'placement', 'distance', 'skidding', 'trigger', 'disabled', 'hoist', 'size', 'arrow', 'singleton']
+        .some(p => changed.has(p))
+    ) {
+      this.attachTooltip();
+    }
+
+    if (changed.has('open')) {
+      if (this.open) {
+        this.singleInstance?.show();
+        this.singletonInstance?.show();
+        this.tooltipInstances?.forEach(t => t.show());
+      } else {
+        this.singleInstance?.hide();
+        this.singletonInstance?.hide();
+        this.tooltipInstances?.forEach(t => t.hide());
+      }
+    }
+  }
+}
+
+export default NileliteTooltip;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-lite-tooltip': NileliteTooltip;
+  }
+}

package/src/nile-lite-tooltip/utils.ts

@@ -0,0 +1,33 @@
+ 
+export function parseFollowCursor(
+  value: boolean | 'initial' | 'horizontal' | 'vertical' | 'true' | 'false'
+): boolean | 'initial' | 'horizontal' | 'vertical' {
+  if (value === true || value === 'true') return true;
+  if (value === false || value === 'false') return false;
+  if (['initial', 'horizontal', 'vertical'].includes(String(value))) {
+    return value as 'initial' | 'horizontal' | 'vertical';
+  }
+  return false;
+}
+
+
+export function parseDuration(
+    value: string | number | [number, number] | undefined
+  ): number | [number, number] {
+    if (Array.isArray(value)) return value;
+    if (typeof value === 'number') return value;
+  
+    if (typeof value === 'string') {
+      // Handle comma-separated (e.g. "200,100")
+      if (value.includes(',')) {
+        const parts = value.split(',').map(v => parseInt(v.trim(), 10));
+        return parts as [number, number];
+      }
+  
+      // Single numeric string
+      const num = parseInt(value, 10);
+      if (!isNaN(num)) return num;
+    }
+  
+    return 200; // default fallback
+  }

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

@@ -69,7 +69,8 @@ export class VirtualScrollHelper {
             listbox,
             search,
             loader,
-            footer
+            footer,
+            tag__content 
           "
         >
           <slot name="prefix" slot="prefix"></slot>

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -19,11 +19,7 @@ export const styles = css`
     box-sizing: border-box;
     -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
     -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));  
   }
 
   .header__item__wrapper{

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

@@ -393,7 +393,6 @@ export const styles = css`
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));
     padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));
-    overflow: auto;
     overscroll-behavior: none;
     /* Make sure it adheres to the popup's auto size */
     max-width: var(--auto-size-available-width);
@@ -448,6 +447,7 @@ export const styles = css`
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
     gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
     justify-content: space-between;
+    box-sizing: unset;
   }
 
   .tag__prefix[slot='prefix'] {

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

@@ -501,6 +501,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.showSelected = !this.showSelected;
 
     if (this.showSelected) {
+      this.searchValue = "";
       const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
       this.data = this.originalOptionItems.filter((item: any) => {
         const itemValue = this.getItemValue(item);
@@ -709,7 +710,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
     if (this.selectedOptions.length === 0) {
       this.showSelected = false;
-      this.filterVirtualOptions('');
+      if(this.originalOptionItems?.length > 0 && !this.searchValue) {
+          this.data = [...this.originalOptionItems];
+      }
       this.repaintOptionsContainer();
     }
 
@@ -727,6 +730,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   handleSearchChange(e: any): void {
     this.searchValue = e.detail.value;
+    if (this.portal) {
+      this.portalManager.updatePortalAppendPosition();
+    }
     
     this.emit('nile-search', { 
       query: this.searchValue,
@@ -804,7 +810,16 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.getDisplayText.bind(this),
       this.renderItemConfig?.getSearchText
     );
-
+    if (this.portal) {
+      this.portalManager.updatePortalAppendPosition();
+      this.updateComplete.then(() => {
+        requestAnimationFrame(() => {
+            this.resetScrollPosition();
+          });
+      });
+    } else {
+      this.resetScrollPosition();
+    }
     this.data = result.filteredItems;
     this.showNoResults = result.showNoResults;
     this.showSelected = false;
@@ -840,11 +855,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     if (this.data.length > 0 && this.open && !this.showSelected && !this.searchValue) {
       this.originalOptionItems = [...this.data];
     }
-
-    if(this.data.length > 0 && this.open && this.searchValue) {
-      this.originalOptionItems = [...this.originalOptionItems, ...this.data];
-    }
-    
     this.selectionChanged();
     // Show no results message when data is empty and not loading
     if (!this.optionsLoading && !this.loading && this.data.length === 0) {
@@ -934,8 +944,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.wasShowSelectedCheckedOnClose = false;
     }
 
-    this.initializeOriginalItems();
-    this.filterVirtualOptions(this.searchValue);
+    this.filterVirtualOptions("");
     this.resetScrollPosition();
     this.emit('nile-after-show', { value: this.value, name: this.name });
   }
@@ -961,12 +970,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.emit('nile-after-hide', { value: this.value, name: this.name });
   }
 
-  private initializeOriginalItems(): void {
-    if (this.data.length > 0) {
-      this.originalOptionItems = [...this.data];
-    }
-  }
-
   async show(): Promise<unknown> {
     if (this.open || this.disabled) {
       this.open = false;
@@ -1107,6 +1110,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
         sync=${ifDefined(!this.noWidthSync ? 'width' : undefined)}
         auto-size="vertical"
         auto-size-padding="10"
+        exportparts="tag__content"
       >
         ${this.renderCustomSelect(hasCustomSelect)}
         ${this.renderCombobox(hasCustomSelect, hasClearIcon)}
@@ -1499,24 +1503,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }, 1);
   }
 
-  private resetScrollPosition(): void {
-    this.updateComplete.then(() => {
-      if (this.virtualizedContainer && this.virtualizedContainer.isConnected) {
-        this.virtualizedContainer.scrollTop = 0;
-        
-        const listbox = this.shadowRoot?.querySelector('.select__listbox') as HTMLElement;
-        if (listbox && listbox.isConnected) {
-          listbox.scrollTop = 0;
-        }
-        
-        const virtualizer = this.virtualizedContainer.querySelector('lit-virtualizer') as HTMLElement;
-        if (virtualizer && virtualizer.isConnected) {
-          virtualizer.scrollTop = 0;
-        }
-      }
-    });
+  private async resetScrollPosition(): Promise<void> {
+    await this.portalManager.resetScrollPosition();
   }
-
 }
 
 setDefaultAnimation('select.show', {

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

@@ -374,6 +374,48 @@ export class PortalManager {
     this.currentMiddlewareData = null;
   }
 
+  async resetScrollPosition(): Promise<void> {
+    await this.component.updateComplete;
+
+    requestAnimationFrame(() => {
+      let listbox: HTMLElement | null = null;
+
+      if (this.component.portal && this.portalContainer) {
+        listbox = this.portalContainer.querySelector('#listbox') as HTMLElement;
+      } else {
+        listbox = this.component.shadowRoot?.querySelector('#listbox') as HTMLElement;
+      }
+
+      if (!listbox || !listbox.isConnected) return;
+      listbox.scrollTop = 0;
+
+      const virtualized = listbox.querySelector('.virtualized') as HTMLElement;
+      if (virtualized && virtualized.isConnected) {
+        const fewItems = this.component.data?.length <= 5;
+
+        if (fewItems) {
+          virtualized.style.overflowY = 'hidden';
+          virtualized.style.maxHeight = 'none';
+          listbox.style.overflowY = 'hidden';
+          listbox.style.maxHeight = 'fit-content';
+        } else {
+          virtualized.style.overflowY = 'auto';
+          virtualized.style.maxHeight = '';
+          listbox.style.overflowY = 'auto';
+          listbox.style.maxHeight = '';
+        }
+
+        virtualized.scrollTop = 0;
+      }
+
+      const virtualizer = listbox.querySelector('lit-virtualizer') as HTMLElement;
+      if (virtualizer && virtualizer.isConnected) {
+        virtualizer.scrollTop = 0;
+      }
+    });
+  }
+
+
   get portalContainerElement(): HTMLElement | null {
     return this.portalContainer;
   }
@@ -424,4 +466,7 @@ export class PortalManager {
     
     return true;
   }
+
+
 }
+

package/src/version.ts

@@ -6,4 +6,6 @@ export const NILE_VERSION = '__NILE_VERSION__';
 if (typeof window !== 'undefined') {
   (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;
   (window as any).nileVersion = NILE_VERSION;
+  window.process = window.process || { env: { NODE_ENV: 'production' } };
+  console.error = () => {};
 }