@aquera/nile-elements 1.3.4 → 1.3.5

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;
+  }
+}
+

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

@@ -0,0 +1,15 @@
+export type FloatingPanelPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export type FloatingPanelAnchor = HTMLElement | string | null;
+
+export interface FloatingPanelPositionConfig {
+  position: FloatingPanelPosition;
+  offset?: number;
+  shiftPadding?: number;
+}
+
+export interface FloatingPanelContentConfig {
+  slotContent: Node[];
+  dataContent: string;
+}
+

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

@@ -793,7 +793,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.updateComplete.then(() => {
         const virtualized = this.shadowRoot?.querySelector('.virtualized') as HTMLElement;
         if (virtualized) {
-          if (this.data.length <= 5) {
+          if (this.data.length < 5) {
             virtualized.classList.add('no-scroll');
           } else {
             virtualized.classList.remove('no-scroll');

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

@@ -391,7 +391,7 @@ export class PortalManager {
 
       const virtualized = listbox.querySelector('.virtualized') as HTMLElement;
       if (virtualized && virtualized.isConnected) {
-        const fewItems = this.component.data?.length <= 5;
+        const fewItems = this.component.data?.length < 5;
 
         if (fewItems) {
           virtualized.style.overflowY = 'hidden';

package/vscode-html-custom-data.json

@@ -1102,7 +1102,7 @@
     },
     {
       "name": "nile-date-picker",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hide-time-zone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hide-duration-fields` - \n\n  * `allowedDates` - \n\nProperties:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hideTimeZone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hideDurationFields` - \n\n  * `allowedDates` - \n\n  * `dropdown` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hide-time-zone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hide-duration-fields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\nProperties:\n\n  * `range` {`boolean`} - \n\n  * `hideTypes` {`boolean`} - \n\n  * `doubleClickUnselect` {`boolean`} - \n\n  * `allowClear` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `hideTimeZone` {`boolean`} - \n\n  * `type` {`\"absolute\" | \"relative\"`} - \n\n  * `showManualInputs` {`boolean`} - \n\n  * `value` - \n\n  * `hideDurationFields` - \n\n  * `allowedDates` - \n\n  * `syncDatePicker` {`boolean`} - \n\n  * `dateFormat` {`string`} - \n\n  * `rangeSeparator` {`string`} - \n\n  * `dropdown` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "range",
@@ -1162,6 +1162,19 @@
         {
           "name": "allowedDates",
           "description": "`allowedDates` - \n\nProperty: allowedDates\n\nDefault: {}"
+        },
+        {
+          "name": "syncDatePicker",
+          "description": "`syncDatePicker` {`boolean`} - \n\nProperty: syncDatePicker\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "dateFormat",
+          "description": "`dateFormat` {`string`} - \n\nProperty: dateFormat\n\nDefault: DD/MM/YYYY"
+        },
+        {
+          "name": "rangeSeparator",
+          "description": "`rangeSeparator` {`string`} - \n\nProperty: rangeSeparator\n\nDefault:  - "
         }
       ]
     },
@@ -1727,6 +1740,63 @@
         }
       ]
     },
+    {
+      "name": "nile-floating-panel",
+      "description": "Nile floating panel component.\n\nEvents:\n\n  * `nile-show` {} - Emitted when the panel opens.\n\n  * `nile-hide` {} - Emitted when the panel closes.\n\nAttributes:\n\n  * `anchor` {`FloatingPanelAnchor`} - \n\n  * `position` {`FloatingPanelPosition`} - \n\n  * `open` {`boolean`} - \n\n  * `close-on-outside-click` {`boolean`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\nProperties:\n\n  * `anchor` {`FloatingPanelAnchor`} - \n\n  * `position` {`FloatingPanelPosition`} - \n\n  * `open` {`boolean`} - \n\n  * `closeOnOutsideClick` {`boolean`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `panelContainer` {`HTMLElement | null`} - \n\n  * `positionManager` - \n\n  * `styleManager` - \n\n  * `eventManager` - \n\n  * `visibilityManager` - \n\n  * `handleSlotChange` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "anchor",
+          "description": "`anchor` {`FloatingPanelAnchor`} - \n\nProperty: anchor\n\nDefault: null",
+          "values": []
+        },
+        {
+          "name": "position",
+          "description": "`position` {`FloatingPanelPosition`} - \n\nProperty: position\n\nDefault: bottom",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "bottom"
+            }
+          ]
+        },
+        {
+          "name": "open",
+          "description": "`open` {`boolean`} - \n\nProperty: open\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "close-on-outside-click",
+          "description": "`close-on-outside-click` {`boolean`} - \n\nProperty: closeOnOutsideClick\n\nDefault: true",
+          "valueSet": "v"
+        },
+        {
+          "name": "enableVisibilityEffect",
+          "description": "`enableVisibilityEffect` {`boolean`} - \n\nProperty: enableVisibilityEffect\n\nDefault: true",
+          "valueSet": "v"
+        },
+        {
+          "name": "enableTabClose",
+          "description": "`enableTabClose` {`boolean`} - \n\nProperty: enableTabClose\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "onnile-show",
+          "description": "`nile-show` {} - Emitted when the panel opens."
+        },
+        {
+          "name": "onnile-hide",
+          "description": "`nile-hide` {} - Emitted when the panel closes."
+        }
+      ]
+    },
     {
       "name": "nile-footer",
       "description": "Nile icon component.\n\n",