@aquera/nile-elements 1.3.1-beta-1.0 → 1.3.1-beta-1

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

@@ -18,6 +18,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../internal/slot';
 import NileElement, { NileFormControl } from '../internal/nile-element';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
 
 interface CustomEventDetail {
   value: string;
@@ -111,6 +112,11 @@ export class NileChip extends NileElement {
 
   @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;
 
+  private visibilityManager?: VisibilityManager;
+
+  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
+
+  @property({ type: Boolean, reflect: true }) enableTabClose = false;
 
   @property({ type: Boolean }) showTooltip: boolean = false;
 
@@ -142,6 +148,45 @@ export class NileChip extends NileElement {
     }
   }
  
+  protected async firstUpdated(_changed: PropertyValues) {
+    await this.updateComplete;
+  
+    const inputTarget =
+      this.noAutoComplete
+        ? this.renderRoot.querySelector('nile-input')?.input
+        : this.autoComplete?.inputElement?.input || this.autoComplete?.inputElement;
+  
+    this.visibilityManager = new VisibilityManager({
+      host: this,
+      target: inputTarget,
+      enableVisibilityEffect: this.enableVisibilityEffect,
+      enableTabClose: this.enableTabClose,
+      isOpen: () => this.isDropdownOpen,
+      onAnchorOutOfView: () => {
+        this.isDropdownOpen = false;
+        if (this.autoComplete) {
+          this.autoComplete.isDropdownOpen = false;
+        }        
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'anchor-out-of-view',
+        });
+      },
+      onDocumentHidden: () => {
+        this.isDropdownOpen = false;
+        if (this.autoComplete) {
+          this.autoComplete.isDropdownOpen = false;
+        }
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'document-hidden',
+        });
+      },
+      emit: (event, detail) => this.emit(`nile-${event}`, detail),
+    });
+  }
+
+  
   private handleDocumentClick = (event: MouseEvent) => {
     const path = event.composedPath();
     if (!path.includes(this)) {
@@ -163,6 +208,7 @@ export class NileChip extends NileElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.visibilityManager?.cleanup();
     document.removeEventListener('click', this.handleDocumentClick);
     this.emit('nile-destroy');
   }
@@ -394,6 +440,7 @@ export class NileChip extends NileElement {
     if (this.noAutoComplete) {
       return;
     }
+    this.visibilityManager?.setup();
     this.isDropdownOpen = true;
   }
 
@@ -407,6 +454,7 @@ export class NileChip extends NileElement {
     // Reset the input-related properties
     this.inputValue = '';
     this.isDropdownOpen = false;
+    this.visibilityManager?.cleanup();
     if (!this.noAutoComplete && this.autoComplete) {
       this.autoComplete.value = '';
       this.autoComplete.handleFocus();

package/src/nile-dropdown/nile-dropdown.ts

@@ -23,6 +23,7 @@ import type { NileMenu } from '../nile-menu';
 import type { NilePopup } from '../nile-popup';
 import '../nile-popup';
 import { DropdownPortalManager } from './portal-manager';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
 
 /**
  * Nile icon component.
@@ -118,7 +119,13 @@ export class NileDropdown extends NileElement {
    */
   @property({ type: Boolean, reflect: true }) portal = false;
 
+  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
+
+  @property({ type: Boolean, reflect: true }) enableTabClose = false;
+
+
   private portalManager: DropdownPortalManager | null = null;
+  private visibilityManager?: VisibilityManager;
 
   connectedCallback() {
     super.connectedCallback();
@@ -139,7 +146,8 @@ export class NileDropdown extends NileElement {
     });
   }
 
-  firstUpdated() {
+  protected async firstUpdated(_changed: PropertyValues) {
+  
     this.panel.hidden = !this.open;
 
     // If the dropdown is visible on init, update its position
@@ -147,10 +155,38 @@ export class NileDropdown extends NileElement {
       this.addOpenListeners();
       this.popup.active = true;
     }
+  
+    await this.updateComplete;
+    const triggerNode = this.trigger.assignedElements({ flatten: true })[0] as HTMLElement | undefined;
+  
+    this.visibilityManager = new VisibilityManager({
+      host: this,
+      target: triggerNode || null,
+      enableVisibilityEffect: this.enableVisibilityEffect,
+      enableTabClose: this.enableTabClose,
+      isOpen: () => this.open,
+      onAnchorOutOfView: () => {
+        this.hide();
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'anchor-out-of-view',
+        });
+      },
+      onDocumentHidden: () => {
+        this.hide();
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'document-hidden',
+        });
+      },
+      emit: (event, detail) => this.emit(`nile-${event}`, detail),
+    });
   }
+  
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.visibilityManager?.cleanup();
     this.removeOpenListeners();
     this.hide();
     this.emit('nile-destroy');
@@ -408,6 +444,7 @@ export class NileDropdown extends NileElement {
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
+    this.visibilityManager?.setup();
     if (this.disabled) {
       this.open = false;
       return;
@@ -442,6 +479,7 @@ export class NileDropdown extends NileElement {
       // Hide
       this.emit('nile-hide');
       this.removeOpenListeners();
+      this.visibilityManager?.cleanup();
 
       if (this.portal && this.portalManager) {
         this.portalManager.cleanupPortalAppend();

package/src/nile-dropdown/portal-manager.ts

@@ -481,6 +481,8 @@ export class DropdownPortalManager {
   updatePortalPanel(): void {
     if (this.portalContainer && this.clonedPanel) {
       PortalContentUtils.updatePortalPanel(this.clonedPanel, this.component);
+      // Re-setup event listeners after updating the panel content
+      this.setupPortalEventListeners();
       this.forceReposition();
     }
   }

package/src/nile-dropdown/portal-utils.ts

@@ -203,6 +203,7 @@ export class PortalContentUtils {
     // Clone all assigned elements
     assignedElements.forEach((element: Element) => {
       const clonedElement = element.cloneNode(true) as HTMLElement;
+      this.processInlineEventHandlers(clonedElement);
       panelContainer.appendChild(clonedElement);
     });
 
@@ -229,9 +230,34 @@ export class PortalContentUtils {
 
     assignedElements.forEach((element: Element) => {
       const clonedElement = element.cloneNode(true) as HTMLElement;
+      this.processInlineEventHandlers(clonedElement);
       clonedPanel.appendChild(clonedElement);
     });
   }
+
+  static processInlineEventHandlers(element: HTMLElement): void {
+    const eventHandlerAttrs = ['onclick', 'onchange', 'oninput', 'onsubmit', 'onfocus', 'onblur', 'onkeydown', 'onkeyup'];
+    
+    eventHandlerAttrs.forEach(attr => {
+      const eventType = attr.replace('on', '');
+      const handler = element.getAttribute(attr);
+      if (handler) {
+        element.removeAttribute(attr);
+        element.addEventListener(eventType, (event: Event) => {
+          new Function('event', handler).call(element, event);
+        });
+      }
+      element.querySelectorAll(`[${attr}]`).forEach(child => {
+        const childHandler = child.getAttribute(attr);
+        if (childHandler) {
+          child.removeAttribute(attr);
+          child.addEventListener(eventType, (event: Event) => {
+            new Function('event', childHandler).call(child, event);
+          });
+        }
+      });
+    });
+  }
 }
 
 export class PortalEventUtils {

package/src/nile-inline-edit/nile-inline-edit-utils.ts

@@ -0,0 +1,94 @@
+/**
+ * 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.
+ */
+
+export function getSlottedElement(shadowRoot: ShadowRoot | null | undefined): HTMLElement | null {
+  if (!shadowRoot) return null;
+  const slot = shadowRoot.querySelector('slot');
+  if (!slot) return null;
+  const assignedElements = slot.assignedElements({ flatten: true });
+  return (assignedElements[0] as HTMLElement) || null;
+}
+
+export function getValueFromSlottedElement(shadowRoot: ShadowRoot | null | undefined): string {
+  const slottedElement = getSlottedElement(shadowRoot);
+  if (!slottedElement) return '';
+  const value = (slottedElement as any).value;
+  return value != null ? String(value) : '';
+}
+
+export function getDisplayValue(value: string, maxPlaceholderLength: number): string {
+  if (value && maxPlaceholderLength > 0 && value.length > maxPlaceholderLength) {
+    return value.substring(0, maxPlaceholderLength) + '...';
+  }
+  return value;
+}
+
+export function setSlottedElementValue(shadowRoot: ShadowRoot | null | undefined, value: string): void {
+  const slottedElement = getSlottedElement(shadowRoot);
+  if (slottedElement && value) {
+    (slottedElement as any).value = value;
+  }
+}
+
+export function updateSlottedElementValue(
+  updateComplete: Promise<boolean> | Promise<void>,
+  shadowRoot: ShadowRoot | null | undefined,
+  value: string
+): void {
+  updateComplete.then(() => {
+    setSlottedElementValue(shadowRoot, value);
+  });
+}
+
+export function updateValueFromSlottedElement(
+  shadowRoot: ShadowRoot | null | undefined,
+  currentValue: string
+): string {
+  const newValue = getValueFromSlottedElement(shadowRoot);
+  return newValue !== currentValue ? newValue : currentValue;
+}
+
+export function handleDocumentFocusIn(
+  event: FocusEvent,
+  component: HTMLElement,
+  isOpen: boolean
+): { shouldClose: boolean; newValue: string | null } {
+  if (!isOpen) return { shouldClose: false, newValue: null };
+  
+  const path = event.composedPath();
+  const isWithinComponent = path.includes(component);
+  
+  if (!isWithinComponent) {
+    const shadowRoot = (component as any).shadowRoot;
+    const currentValue = (component as any).value || '';
+    const newValue = updateValueFromSlottedElement(shadowRoot, currentValue);
+    return { shouldClose: true, newValue };
+  }
+  
+  return { shouldClose: false, newValue: null };
+}
+
+export function handleDocumentMouseDown(
+  event: MouseEvent,
+  component: HTMLElement,
+  isOpen: boolean
+): { shouldClose: boolean; newValue: string | null } {
+  if (!isOpen) return { shouldClose: false, newValue: null };
+  
+  const path = event.composedPath();
+  const isWithinComponent = path.includes(component);
+  
+  if (!isWithinComponent) {
+    const shadowRoot = (component as any).shadowRoot;
+    const currentValue = (component as any).value || '';
+    const newValue = updateValueFromSlottedElement(shadowRoot, currentValue);
+    return { shouldClose: true, newValue };
+  }
+  
+  return { shouldClose: false, newValue: null };
+}
+

package/src/nile-inline-edit/nile-inline-edit.ts

@@ -14,6 +14,12 @@ import {
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-inline-edit.css';
 import NileElement from '../internal/nile-element';
+import {
+  getDisplayValue,
+  updateSlottedElementValue,
+  handleDocumentFocusIn,
+  handleDocumentMouseDown,
+} from './nile-inline-edit-utils';
 
 /**
  * Nile inline-edit component.
@@ -43,6 +49,12 @@ export class NileInlineEdit extends NileElement {
   /** Gives the Value to the Inline Edit */
   @property({ type: String, reflect: true }) value = '';
 
+  /** Maximum length for the placeholder value. Values longer than this will be truncated */
+  @property({ type: Number, attribute: 'max-placeholder-length' }) maxPlaceholderLength: number = 25;
+
+  /** Enables automatic closing when focus moves outside the component or when clicking outside */
+  @property({ type: Boolean, attribute: 'auto-close' }) autoClose: boolean = false;
+
   /* #endregion */
 
   /* #region Methods */
@@ -52,11 +64,57 @@ export class NileInlineEdit extends NileElement {
    * @slot This is a slot test
    */
 
+  private handleCloseResult(result: { shouldClose: boolean; newValue: string | null }) {
+    if (result.shouldClose) {
+      if (result.newValue !== null) {
+        this.value = result.newValue;
+      }
+      this.open = false;
+    }
+  }
+
+  private handleDocumentFocusInWrapper = (event: FocusEvent) => {
+    const result = handleDocumentFocusIn(event, this, this.open);
+    this.handleCloseResult(result);
+  };
+
+  private handleDocumentMouseDownWrapper = (event: MouseEvent) => {
+    const result = handleDocumentMouseDown(event, this, this.open);
+    this.handleCloseResult(result);
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has('open') && this.autoClose) {
+      if (this.open) {
+        updateSlottedElementValue(this.updateComplete, this.shadowRoot, this.value);
+        document.addEventListener('focusin', this.handleDocumentFocusInWrapper, true);
+        document.addEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
+      } else {
+        document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);
+        document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);
+    document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
+  }
+
   private handleClick() {
     this.open = true;
   }
   public render(): TemplateResult {
-    const textInsideContainer = this.value || this.placeholder;
+    // Use truncated value for display, or placeholder if empty
+    const displayValue = this.autoClose ? getDisplayValue(this.value, this.maxPlaceholderLength) : this.value;
+    const textInsideContainer = displayValue || this.placeholder;
     return html`
       <div class="inline__edit--label" part="label">${this.label}</div>
       ${this.open

package/src/nile-inline-sidebar/nile-inline-sidebar.css.ts

@@ -50,8 +50,8 @@ export const styles = css`
     flex-direction: column;
     gap: var(--nile-spacing-xs);
     padding-right: var(--nile-spacing-xl);
-    padding-top: var(--nile-spacing-3xl);
-    padding-bottom: var(--nile-spacing-3xl);
+    padding-top: var(--nile-spacing-2xl);
+    padding-bottom: var(--nile-spacing-2xl);
   }
 
   nile-side-bar-action-menu {
@@ -72,13 +72,6 @@ export const styles = css`
     margin-left: 0;
     margin-right: 0;
     border-radius: 0;
-    color: black;
-  }
-
-
-  nile-side-bar-action-menu-item[active]::part(base):hover {
-    background: var(--nile-colors-primary-100);
-    color: black;
   }
 
   nile-side-bar-action-menu-item::part(label) {
@@ -87,7 +80,6 @@ export const styles = css`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
   }
 
   /* Transition for sidebar button when it is closed and opened */

package/src/nile-inline-sidebar/nile-inline-sidebar.ts

@@ -111,7 +111,6 @@ export class NileInlineSidebar extends NileElement {
   private toggleCollapse() {
     if (this.fixed) return;
     this.collapsed = !this.collapsed;
-    console.log('[Sidebar] Toggled collapse →', this.collapsed);
 
     this.dispatchEvent(
       new CustomEvent('nile-toggle', {
@@ -147,13 +146,8 @@ export class NileInlineSidebar extends NileElement {
 
   private get menuItemsTemplate() {
     if (!this.sidebarItems?.length) return null;
-  
+
     return this.sidebarItems.map((item, index) => {
-      const shouldShowTooltip = (item as any).tooltip;
-      const isTruncated =
-        item.scrollWidth > item.clientWidth ||
-        item.scrollHeight > item.clientHeight;
-  
       const content = html`
         <nile-side-bar-action-menu-item
           ?disabled=${item.hasAttribute('disabled')}
@@ -163,22 +157,16 @@ export class NileInlineSidebar extends NileElement {
           ${item.textContent}
         </nile-side-bar-action-menu-item>
       `;
-      return shouldShowTooltip || isTruncated
+
+      return this.showTooltip
         ? html`
-            <nile-inline-tooltip
-              content=${item.textContent?.trim() || ''}
-              hoist
-              placement="right"
-            >
+            <nile-tooltip content=${item.textContent} hoist placement="right">
               ${content}
-            </nile-inline-tooltip>
+            </nile-tooltip>
           `
         : content;
     });
   }
-  
-  
-  
 
   public render(): TemplateResult {
     return html`

package/src/nile-inline-sidebar-item/nile-inline-sidebar-item.css.ts

@@ -37,10 +37,6 @@ export const styles = css`
   font-weight: 500;
 }
 
-:host([active]) .item:hover {
-  background: var(--nile-colors-primary-100);
-}
-
  
 :host([disabled]) {
   color:   var(--nile-colors-neutral-500);  
@@ -66,6 +62,4 @@ a {
     text-decoration: none;
   }
 
- 
-
 `;

package/src/nile-inline-sidebar-item/nile-inline-sidebar-item.ts

@@ -29,7 +29,6 @@ export class NileInlineSidebarItem extends NileElement {
   @property({ type: Boolean, reflect: true }) active = false;
   @property({ type: Boolean, reflect: true }) disabled = false;
   @property({ type: String }) href?: string;
-  @property({ type: Boolean, reflect: true }) tooltip = false;
 
   public static get styles(): CSSResultArray {
     return [styles];

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

@@ -44,14 +44,14 @@ export const styles = css`
   }
 
   .link--disabled {
-    color: var(--nile-colors-primary-600-alt, var(--ng-colors-text-tertiary-600));
+    color: var(--nile-colors-primary-500, var(--ng-colors-text-tertiary-600));
     cursor: not-allowed;
     pointer-events: none;
     opacity: 0.6;
   }
 
   .link.link--disabled:not(.link__button) .link__label {
-    color: var(--nile-colors-primary-600-alt, var(--ng-colors-fg-disabled));
+    color: var(--nile-colors-primary-500, var(--ng-colors-fg-disabled));
   }
 
   
@@ -78,7 +78,7 @@ export const styles = css`
 
   .link__button.link--disabled:hover,
   .link__button.link--disabled:focus {
-    color: var(--nile-colors-primary-600-alt, var(--ng-colors-fg-disabled));
+    color: var(--nile-colors-primary-500, var(--ng-colors-fg-disabled));
     box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-none));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     background: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));

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

@@ -10,6 +10,7 @@ import tippy, {
   createSingleton,
 } from 'tippy.js';
 import { parseFollowCursor, parseDuration,  } from './utils';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
 
 /**
  * Nile lite-tooltip component.
@@ -115,6 +116,12 @@ export class NileliteTooltip extends NileElement {
 
   @property({ type: Number }) interactiveBorder = 2;
 
+  private visibilityManager?: VisibilityManager;
+
+  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
+  
+  @property({ type: Boolean, reflect: true }) enableTabClose = false;
+
   private tooltipInstances?: Instance[];
   private singleInstance?: Instance;
   private singletonInstance?: Instance;
@@ -126,9 +133,38 @@ export class NileliteTooltip extends NileElement {
     super();
   }
 
-  firstUpdated(): void {
+  protected firstUpdated(): void {
     this.attachTooltip();
+    const targetEl =
+      (this.for && document.getElementById(this.for)) ||
+      (this.firstElementChild as HTMLElement | null);
+  
+    this.visibilityManager = new VisibilityManager({
+      host: this,
+      target: targetEl,
+      enableVisibilityEffect: this.enableVisibilityEffect,
+      enableTabClose: this.enableTabClose,
+      isOpen: () => this.open,
+      onAnchorOutOfView: () => {
+        this.open = false;
+        this.hideAllTooltips();
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'anchor-out-of-view',
+        });
+      },
+      onDocumentHidden: () => {
+        this.open = false;
+        this.hideAllTooltips();
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'document-hidden',
+        });
+      },
+      emit: (event, detail) => this.emit(`nile-${event}`, detail),
+    });
   }
+  
 
   public refresh() {
     this.attachTooltip();
@@ -332,8 +368,16 @@ if (this.enableRecursiveMode) {
     }
   }
 
+  private hideAllTooltips(): void {
+    this.singleInstance?.hide();
+    this.singletonInstance?.hide();
+    this.tooltipInstances?.forEach(t => t.hide());
+  }
+
+  
   disconnectedCallback(): void {
     super.disconnectedCallback();
+    this.visibilityManager?.cleanup();
     this.destroyTooltips();
   }
 
@@ -360,10 +404,12 @@ if (this.enableRecursiveMode) {
 
     if (changed.has('open')) {
       if (this.open) {
+        this.visibilityManager?.setup();
         this.singleInstance?.show();
         this.singletonInstance?.show();
         this.tooltipInstances?.forEach(t => t.show());
       } else {
+        this.visibilityManager?.cleanup();
         this.singleInstance?.hide();
         this.singletonInstance?.hide();
         this.tooltipInstances?.forEach(t => t.hide());