@aquera/nile-elements 1.3.5-beta-1.0 → 1.3.6-beta-1.0

package/package.json

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

package/src/index.ts

@@ -72,6 +72,7 @@ export { NileTitle } from './nile-title';
 export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
+export { NileFloatingPanel } from './nile-floating-panel';
 export { NileTable } from './nile-table';
 export { NileFilterChip } from './nile-filter-chip';
 export {NilePagination } from './nile-pagination';
@@ -107,4 +108,4 @@ export { NileSideBarActionMenu } from './nile-side-bar-action-menu';
 export { NileInlineSidebarGroup } from './nile-inline-sidebar-group';
 export { NileInlineSidebar } from './nile-inline-sidebar';
 export { NileInlineSidebarItem } from './nile-inline-sidebar-item';
-export { NileliteTooltip } from './nile-lite-tooltip';
+export { NileliteTooltip } from './nile-lite-tooltip';

package/src/nile-date-picker/nile-date-picker.ts

@@ -196,7 +196,9 @@ export class NileDatePicker extends NileElement {
     this.emit('nile-changed', event.detail);
     this.emit('nile-change', event.detail);
 
-    this.dropdown?.hide();
+    if (this.dropdown) {
+      this.dropdown.hide();
+    }
   }
 
   connectedCallback() {

package/src/nile-floating-panel/anchor-manager.ts

@@ -0,0 +1,33 @@
+import type { FloatingPanelAnchor } from './types';
+
+export class AnchorManager {
+  static resolveAnchor(anchor: FloatingPanelAnchor): HTMLElement {
+    if (anchor instanceof HTMLElement) {
+      return anchor;
+    }
+
+    if (typeof anchor === 'string') {
+      const element = document.querySelector(anchor) as HTMLElement;
+      if (element) {
+        return element;
+      }
+      const byId = document.getElementById(anchor);
+      if (byId) {
+        return byId;
+      }
+    }
+
+    return document.body;
+  }
+
+  static appendToAnchor(anchor: HTMLElement, panelContainer: HTMLElement): void {
+    anchor.appendChild(panelContainer);
+  }
+
+  static removeFromAnchor(panelContainer: HTMLElement): void {
+    if (panelContainer.parentNode) {
+      panelContainer.parentNode.removeChild(panelContainer);
+    }
+  }
+}
+

package/src/nile-floating-panel/content-manager.ts

@@ -0,0 +1,54 @@
+import type { FloatingPanelContentConfig } from './types';
+
+export class ContentManager {
+  static updatePanelContent(
+    panelContainer: HTMLElement,
+    slot: HTMLSlotElement | null,
+    dataContent: string
+  ): void {
+    panelContainer.innerHTML = '';
+
+    const slotContent = slot ? slot.assignedNodes({ flatten: true }) : [];
+
+    const hasSlotContent = slotContent.length > 0 &&
+      slotContent.some(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          return node.textContent?.trim() !== '';
+        }
+        return node instanceof HTMLElement;
+      });
+
+    if (hasSlotContent) {
+      slotContent.forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          const textNode = document.createTextNode(node.textContent || '');
+          panelContainer.appendChild(textNode);
+        } else if (node instanceof HTMLElement) {
+          panelContainer.appendChild(node.cloneNode(true));
+        }
+      });
+    } else if (dataContent) {
+      panelContainer.textContent = dataContent;
+    }
+  }
+
+  static hasSlotContent(slot: HTMLSlotElement | null): boolean {
+    if (!slot) {
+      return false;
+    }
+
+    const slotContent = slot.assignedNodes({ flatten: true });
+    return slotContent.length > 0 &&
+      slotContent.some(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          return node.textContent?.trim() !== '';
+        }
+        return node instanceof HTMLElement;
+      });
+  }
+
+  static getSlotContent(slot: HTMLSlotElement | null): Node[] {
+    return slot ? slot.assignedNodes({ flatten: true }) : [];
+  }
+}
+

package/src/nile-floating-panel/event-manager.ts

@@ -0,0 +1,74 @@
+export class EventManager {
+  private component: HTMLElement;
+  private panelContainer: HTMLElement | null = null;
+  private closeOnOutsideClick: boolean = true;
+  private isOpen: boolean = false;
+  private boundHandleDocumentClick: ((event: MouseEvent) => void) | null = null;
+  private onCloseCallback: (() => void) | null = null;
+
+  constructor(component: HTMLElement) {
+    this.component = component;
+  }
+
+  setupOutsideClickHandler(
+    panelContainer: HTMLElement,
+    closeOnOutsideClick: boolean,
+    isOpen: boolean,
+    onClose: () => void
+  ): void {
+    this.panelContainer = panelContainer;
+    this.closeOnOutsideClick = closeOnOutsideClick;
+    this.isOpen = isOpen;
+    this.onCloseCallback = onClose;
+
+    if (!this.closeOnOutsideClick || this.boundHandleDocumentClick) {
+      return;
+    }
+
+    this.boundHandleDocumentClick = this.handleDocumentClick.bind(this);
+    document.addEventListener('mousedown', this.boundHandleDocumentClick, true);
+  }
+
+  updateOutsideClickHandler(
+    panelContainer: HTMLElement | null,
+    closeOnOutsideClick: boolean,
+    isOpen: boolean
+  ): void {
+    this.panelContainer = panelContainer;
+    this.closeOnOutsideClick = closeOnOutsideClick;
+    this.isOpen = isOpen;
+
+    this.cleanupOutsideClickHandler();
+
+    if (isOpen && closeOnOutsideClick && panelContainer) {
+      this.boundHandleDocumentClick = this.handleDocumentClick.bind(this);
+      document.addEventListener('mousedown', this.boundHandleDocumentClick, true);
+    }
+  }
+
+  cleanupOutsideClickHandler(): void {
+    if (this.boundHandleDocumentClick) {
+      document.removeEventListener('mousedown', this.boundHandleDocumentClick, true);
+      this.boundHandleDocumentClick = null;
+    }
+  }
+
+  private handleDocumentClick(event: MouseEvent): void {
+    if (!this.isOpen || !this.closeOnOutsideClick || !this.panelContainer || !this.onCloseCallback) {
+      return;
+    }
+
+    const target = event.target as Node;
+
+    if (!this.panelContainer.contains(target) && !this.component.contains(target)) {
+      this.onCloseCallback();
+    }
+  }
+
+  destroy(): void {
+    this.cleanupOutsideClickHandler();
+    this.panelContainer = null;
+    this.onCloseCallback = null;
+  }
+}
+

package/src/nile-floating-panel/index.ts

@@ -0,0 +1,2 @@
+export { NileFloatingPanel } from './nile-floating-panel';
+

package/src/nile-floating-panel/nile-floating-panel.css.ts

@@ -0,0 +1,50 @@
+/**
+ * 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';
+export const styles = css`
+  :host {
+    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));
+    display: inline-block;
+    position: relative;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  slot {
+    display: none;
+  }
+`;
+
+export const panelContainerStyles = css`
+  .nile-floating-panel__container {
+    position: fixed;
+    box-sizing: border-box;
+    z-index: 800;
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    min-width: var(--nile-width-352px, var(--ng-width-80));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
+    letter-spacing: var(--nile-spacing-one-by-five-x, var(--ng-spacing-none));
+  }
+`;
+
+export default [styles];
+

package/src/nile-floating-panel/nile-floating-panel.ts

@@ -0,0 +1,291 @@
+import {
+  LitElement,
+  html,
+  CSSResultArray,
+  TemplateResult,
+  PropertyValues,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-floating-panel.css';
+import NileElement from '../internal/nile-element';
+import { PositionManager } from './position-manager';
+import { StyleManager } from './style-manager';
+import { ContentManager } from './content-manager';
+import { AnchorManager } from './anchor-manager';
+import { EventManager } from './event-manager';
+import { VisibilityManager } from '../utilities/visibility-manager';
+import type { FloatingPanelPosition, FloatingPanelAnchor } from './types';
+
+/**
+ * Nile floating panel component.
+ *
+ * @tag nile-floating-panel
+ * @event nile-show - Emitted when the panel opens.
+ * @event nile-hide - Emitted when the panel closes.
+ */
+@customElement('nile-floating-panel')
+export class NileFloatingPanel extends NileElement {
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property() anchor: FloatingPanelAnchor = null;
+
+  @property() position: FloatingPanelPosition = 'bottom';
+
+  @property({ type: Boolean, reflect: true, attribute: true }) open = false;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: 'close-on-outside-click',
+    converter: {
+      fromAttribute: (value: string | null) => (!value || value === 'false' ? false : true),
+      toAttribute: (value: boolean) => (value ? 'true' : 'false'),
+    },
+  })
+  closeOnOutsideClick = true;
+
+  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = true;
+
+  @property({ type: Boolean, reflect: true }) enableTabClose = false;
+
+  private panelContainer: HTMLElement | null = null;
+  private positionManager: PositionManager | null = null;
+  private styleManager: StyleManager = new StyleManager();
+  private eventManager: EventManager = new EventManager(this);
+  private visibilityManager?: VisibilityManager;
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanupPanel();
+    this.visibilityManager?.cleanup();
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        this.emit('nile-show');
+        this.setupPanel();
+        this.visibilityManager?.setup();
+      } else {
+        this.emit('nile-hide');
+        this.visibilityManager?.cleanup();
+        this.cleanupPanel();
+      }
+    }
+
+    if (
+      changedProperties.has('closeOnOutsideClick') &&
+      this.open &&
+      this.panelContainer
+    ) {
+      this.eventManager.updateOutsideClickHandler(
+        this.panelContainer,
+        this.closeOnOutsideClick,
+        this.open
+      );
+    }
+
+    if (changedProperties.has('anchor') && this.open) {
+      this.cleanupPanel();
+      this.setupPanel();
+    }
+
+    if (
+      (changedProperties.has('enableVisibilityEffect') ||
+        changedProperties.has('enableTabClose')) &&
+      this.open
+    ) {
+      this.setupVisibilityManager();
+    }
+
+    if (
+      changedProperties.has('position') &&
+      this.open &&
+      this.positionManager
+    ) {
+      this.positionManager.updatePosition(this.position);
+    }
+
+    if (changedProperties.has('open') && this.open && this.panelContainer) {
+      this.updatePanelContent();
+    }
+  }
+
+  private setupPanel() {
+    if (this.panelContainer) {
+      return;
+    }
+
+    const componentStyles = (this.constructor as typeof NileFloatingPanel)
+      .styles;
+    if (componentStyles) {
+      this.styleManager.injectStyles(componentStyles);
+    }
+
+    this.panelContainer = document.createElement('div');
+    this.panelContainer.setAttribute('part', 'panel');
+    this.panelContainer.className = 'nile-floating-panel__container';
+
+    this.updatePanelContent();
+
+    const anchorElement = AnchorManager.resolveAnchor(this.anchor);
+    AnchorManager.appendToAnchor(anchorElement, this.panelContainer);
+
+    requestAnimationFrame(() => {
+      this.setupPositionManager();
+      this.setupEventHandlers();
+      this.setupVisibilityManager();
+    });
+  }
+
+  private setupEventHandlers() {
+    if (!this.panelContainer) {
+      return;
+    }
+
+    this.eventManager.setupOutsideClickHandler(
+      this.panelContainer,
+      this.closeOnOutsideClick,
+      this.open,
+      () => {
+        this.open = false;
+      }
+    );
+  }
+
+  private setupPositionManager() {
+    if (!this.panelContainer) {
+      return;
+    }
+
+    const referenceElement = this.findTriggerElement() || this;
+    this.positionManager = new PositionManager(
+      referenceElement,
+      this.panelContainer,
+      this.position
+    );
+
+    this.positionManager.reposition();
+    this.positionManager.setupAutoUpdate();
+  }
+
+  private findTriggerElement(): HTMLElement | null {
+    // Try to find the next sibling element as the trigger
+    let nextSibling = this.nextElementSibling;
+    while (nextSibling) {
+      if (nextSibling instanceof HTMLElement) {
+        return nextSibling;
+      }
+      nextSibling = nextSibling.nextElementSibling;
+    }
+
+    // Try to find the previous sibling element
+    let previousSibling = this.previousElementSibling;
+    while (previousSibling) {
+      if (previousSibling instanceof HTMLElement) {
+        return previousSibling;
+      }
+      previousSibling = previousSibling.previousElementSibling;
+    }
+
+    return null;
+  }
+
+  private setupVisibilityManager(): void {
+    if (!this.enableVisibilityEffect) {
+      return;
+    }
+
+    const triggerElement = this.findTriggerElement();
+    
+    // Cleanup existing visibility manager if it exists
+    if (this.visibilityManager) {
+      this.visibilityManager.cleanup();
+    }
+
+    this.visibilityManager = new VisibilityManager({
+      host: this,
+      target: triggerElement || null,
+      enableVisibilityEffect: this.enableVisibilityEffect,
+      enableTabClose: this.enableTabClose,
+      isOpen: () => this.open,
+      onAnchorOutOfView: () => {
+        this.open = false;
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'anchor-out-of-view',
+        });
+      },
+      onDocumentHidden: () => {
+        this.open = false;
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'document-hidden',
+        });
+      },
+      emit: (event, detail) => this.emit(`nile-${event}`, detail),
+    });
+
+    if (this.open) {
+      this.visibilityManager.setup();
+    }
+  }
+
+  private updatePanelContent() {
+    if (!this.panelContainer) {
+      return;
+    }
+
+    const slot = this.shadowRoot?.querySelector('slot') || null;
+    ContentManager.updatePanelContent(this.panelContainer, slot, '');
+  }
+
+  private reposition() {
+    if (this.positionManager) {
+      this.positionManager.reposition();
+    }
+  }
+
+  private cleanupPanel() {
+    this.eventManager.destroy();
+
+    if (this.positionManager) {
+      this.positionManager.destroy();
+      this.positionManager = null;
+    }
+
+    if (this.panelContainer) {
+      AnchorManager.removeFromAnchor(this.panelContainer);
+    }
+
+    this.panelContainer = null;
+
+    this.styleManager.cleanupStyles();
+  }
+
+  public render(): TemplateResult {
+    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+
+  private handleSlotChange = () => {
+    if (this.open && this.panelContainer) {
+      this.updatePanelContent();
+    }
+  };
+}
+
+export default NileFloatingPanel;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-floating-panel': NileFloatingPanel;
+  }
+}

package/src/nile-floating-panel/position-manager.ts

@@ -0,0 +1,102 @@
+import { autoUpdate, computePosition, offset, shift, flip } from '@floating-ui/dom';
+import type { Placement } from '@floating-ui/dom';
+import type { FloatingPanelPosition } from './types';
+
+export class PositionManager {
+  private cleanup: (() => void) | null = null;
+  private referenceElement: HTMLElement;
+  private floatingElement: HTMLElement;
+  private position: FloatingPanelPosition;
+  private offsetValue: number;
+  private shiftPadding: number;
+
+  constructor(
+    referenceElement: HTMLElement,
+    floatingElement: HTMLElement,
+    position: FloatingPanelPosition,
+    offsetValue: number = 8,
+    shiftPadding: number = 8
+  ) {
+    this.referenceElement = referenceElement;
+    this.floatingElement = floatingElement;
+    this.position = position;
+    this.offsetValue = offsetValue;
+    this.shiftPadding = shiftPadding;
+  }
+
+  setupAutoUpdate(): void {
+    this.cleanupAutoUpdate();
+
+    this.cleanup = autoUpdate(
+      this.referenceElement,
+      this.floatingElement,
+      () => {
+        this.reposition();
+      },
+      {
+        ancestorScroll: true,
+        ancestorResize: true,
+        elementResize: true,
+        layoutShift: true,
+        animationFrame: false,
+      }
+    );
+  }
+
+  cleanupAutoUpdate(): void {
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = null;
+    }
+  }
+
+  reposition(): void {
+    const placement: Placement = this.position;
+
+    computePosition(this.referenceElement, this.floatingElement, {
+      placement,
+      strategy: 'fixed',
+      middleware: [
+        offset(this.offsetValue),
+        flip(),
+        shift({
+          padding: this.shiftPadding,
+        }),
+      ],
+    }).then(({ x, y, placement: finalPlacement }) => {
+      let adjustedY = y;
+      
+      if (finalPlacement.startsWith('bottom')) {
+        adjustedY = y + 10;
+      } else if (finalPlacement.startsWith('top')) {
+        adjustedY = y - 20;
+      }
+      
+      Object.assign(this.floatingElement.style, {
+        left: `${x}px`,
+        top: `${adjustedY}px`,
+        position: 'fixed',
+      });
+    });
+  }
+
+  updatePosition(position: FloatingPanelPosition): void {
+    this.position = position;
+    this.reposition();
+  }
+
+  updateOffset(offset: number): void {
+    this.offsetValue = offset;
+    this.reposition();
+  }
+
+  updateShiftPadding(padding: number): void {
+    this.shiftPadding = padding;
+    this.reposition();
+  }
+
+  destroy(): void {
+    this.cleanupAutoUpdate();
+  }
+}
+

package/src/nile-floating-panel/style-manager.ts

@@ -0,0 +1,54 @@
+import type { CSSResultArray } from 'lit';
+import { panelContainerStyles } from './nile-floating-panel.css';
+
+export class StyleManager {
+  private injectedStyleId: string | null = null;
+  private static injectedStyleIds: Set<string> = new Set();
+
+  injectStyles(componentStyles: CSSResultArray): void {
+    const globalStyleId = 'nile-floating-panel-styles-global';
+    if (StyleManager.injectedStyleIds.has(globalStyleId)) {
+      return;
+    }
+
+    if (this.injectedStyleId && document.getElementById(this.injectedStyleId)) {
+      return;
+    }
+
+    this.injectedStyleId = globalStyleId;
+    StyleManager.injectedStyleIds.add(globalStyleId);
+
+    const cssText = this.extractCSSFromStyles(componentStyles);
+
+    const styleElement = document.createElement('style');
+    styleElement.id = globalStyleId;
+    styleElement.textContent = cssText;
+    document.head.appendChild(styleElement);
+  }
+
+  private extractCSSFromStyles(styles: CSSResultArray): string {
+    const containerStyles = panelContainerStyles.cssText || '';
+
+    const componentStyles = styles
+      .map(style => {
+        if (typeof style === 'string') {
+          return style;
+        }
+        if (style && 'cssText' in style) {
+          return (style as any).cssText;
+        }
+        return '';
+      })
+      .join('\n');
+
+    return containerStyles + '\n' + componentStyles;
+  }
+
+  cleanupStyles(): void {
+  }
+
+  getInjectedStyleId(): string | null {
+    return this.injectedStyleId;
+  }
+}
+