@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/dropdown/controllers/dropdown.controller.js

@@ -0,0 +1,408 @@
+import { BaseDropdownController } from './base.controller.js';
+import { determineOptimalPlacement } from '../../../shared/utils/dropdown-positioning.js';
+export class NrDropdownController extends BaseDropdownController {
+    constructor(host) {
+        super(host);
+        this._isOpen = false;
+        this._position = { top: 0, left: 0, width: 0, placement: 'bottom' };
+        this._triggerElement = null;
+        this._dropdownElement = null;
+        this._outsideClickHandler = null;
+        this._keydownHandler = null;
+        this._hoverTimer = null;
+        this._triggerClickHandler = null;
+        this._triggerHoverHandler = null;
+        this._triggerLeaveHandler = null;
+        this._triggerFocusHandler = null;
+        this._triggerBlurHandler = null;
+        this._scrollHandler = null;
+        this._resizeHandler = null;
+        this._isOpen = host.open;
+    }
+    get isOpen() {
+        return this._isOpen;
+    }
+    get position() {
+        return Object.assign({}, this._position);
+    }
+    hostConnected() {
+    }
+    hostUpdated() {
+        if (this._isOpen !== this.host.open) {
+            this._isOpen = this.host.open;
+        }
+        if (!this._triggerElement) {
+            this.setupTriggerListeners();
+        }
+    }
+    hostDisconnected() {
+        this.cleanup();
+    }
+    open() {
+        try {
+            if (!this._isOpen && !this.host.disabled) {
+                this._isOpen = true;
+                this.host.open = true;
+                this.requestUpdate();
+                setTimeout(() => {
+                    this.calculatePosition();
+                    this.setupEventListeners();
+                }, 10);
+                this.dispatchEvent(new CustomEvent('nr-dropdown-open', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { dropdown: this.host }
+                }));
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'open');
+        }
+    }
+    close() {
+        try {
+            if (this._isOpen) {
+                this.removeEventListeners();
+                this._isOpen = false;
+                this.host.open = false;
+                this.requestUpdate();
+                this.dispatchEvent(new CustomEvent('nr-dropdown-close', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { dropdown: this.host }
+                }));
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'close');
+        }
+    }
+    toggle() {
+        try {
+            if (this._isOpen) {
+                this.close();
+            }
+            else {
+                this.open();
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'toggle');
+        }
+    }
+    removeTriggerListeners() {
+        if (!this._triggerElement)
+            return;
+        if (this._triggerClickHandler) {
+            this._triggerElement.removeEventListener('click', this._triggerClickHandler);
+            this._triggerClickHandler = null;
+        }
+        if (this._triggerHoverHandler) {
+            this._triggerElement.removeEventListener('mouseenter', this._triggerHoverHandler);
+            this._triggerHoverHandler = null;
+        }
+        if (this._triggerLeaveHandler) {
+            this._triggerElement.removeEventListener('mouseleave', this._triggerLeaveHandler);
+            this._triggerLeaveHandler = null;
+        }
+        if (this._triggerFocusHandler) {
+            this._triggerElement.removeEventListener('focusin', this._triggerFocusHandler);
+            this._triggerFocusHandler = null;
+        }
+        if (this._triggerBlurHandler) {
+            this._triggerElement.removeEventListener('focusout', this._triggerBlurHandler);
+            this._triggerBlurHandler = null;
+        }
+    }
+    findDropdownElements() {
+        this._dropdownElement = this.findElement('.dropdown__panel');
+        this._triggerElement = this.findElement('.dropdown__trigger');
+    }
+    setupTriggerListeners() {
+        this.findDropdownElements();
+        if (!this._triggerElement) {
+            return;
+        }
+        this.removeTriggerListeners();
+        switch (this.host.trigger) {
+            case 'click':
+                this._triggerClickHandler = this.handleTriggerClick.bind(this);
+                this._triggerElement.addEventListener('click', this._triggerClickHandler);
+                break;
+            case 'hover':
+                this._triggerHoverHandler = this.handleTriggerHover.bind(this);
+                this._triggerLeaveHandler = this.handleTriggerLeave.bind(this);
+                this._triggerElement.addEventListener('mouseenter', this._triggerHoverHandler);
+                this._triggerElement.addEventListener('mouseleave', this._triggerLeaveHandler);
+                break;
+            case 'focus':
+                this._triggerFocusHandler = this.handleTriggerFocus.bind(this);
+                this._triggerBlurHandler = this.handleTriggerBlur.bind(this);
+                this._triggerElement.addEventListener('focusin', this._triggerFocusHandler);
+                this._triggerElement.addEventListener('focusout', this._triggerBlurHandler);
+                break;
+        }
+    }
+    setupEventListeners() {
+        if (this.host.closeOnOutsideClick) {
+            this._outsideClickHandler = this.handleOutsideClick.bind(this);
+            document.addEventListener('click', this._outsideClickHandler, true);
+        }
+        if (this.host.closeOnEscape) {
+            this._keydownHandler = this.handleKeydown.bind(this);
+            document.addEventListener('keydown', this._keydownHandler);
+        }
+        this._scrollHandler = this.handleScroll.bind(this);
+        this._resizeHandler = this.handleResize.bind(this);
+        window.addEventListener('scroll', this._scrollHandler, true);
+        window.addEventListener('resize', this._resizeHandler);
+    }
+    removeEventListeners() {
+        if (this._outsideClickHandler) {
+            document.removeEventListener('click', this._outsideClickHandler, true);
+            this._outsideClickHandler = null;
+        }
+        if (this._keydownHandler) {
+            document.removeEventListener('keydown', this._keydownHandler);
+            this._keydownHandler = null;
+        }
+        if (this._scrollHandler) {
+            window.removeEventListener('scroll', this._scrollHandler, true);
+            this._scrollHandler = null;
+        }
+        if (this._resizeHandler) {
+            window.removeEventListener('resize', this._resizeHandler);
+            this._resizeHandler = null;
+        }
+    }
+    handleTriggerClick() {
+        if (this.host.disabled) {
+            return;
+        }
+        this.toggle();
+    }
+    handleTriggerHover() {
+        if (this.host.disabled) {
+            return;
+        }
+        if (this._hoverTimer) {
+            clearTimeout(this._hoverTimer);
+        }
+        this._hoverTimer = window.setTimeout(() => {
+            this.open();
+        }, this.host.delay);
+    }
+    handleTriggerLeave() {
+        if (this._hoverTimer) {
+            clearTimeout(this._hoverTimer);
+            this._hoverTimer = null;
+        }
+        setTimeout(() => {
+            if (!this.isHoveringDropdown()) {
+                this.close();
+            }
+        }, 100);
+    }
+    handleTriggerFocus() {
+        if (this.host.disabled) {
+            return;
+        }
+        this.open();
+    }
+    handleTriggerBlur() {
+        setTimeout(() => {
+            if (!this.isDropdownFocused()) {
+                this.close();
+            }
+        }, 100);
+    }
+    handleOutsideClick(event) {
+        var _a, _b, _c, _d;
+        if (!this.host.closeOnOutsideClick) {
+            return;
+        }
+        const target = event.target;
+        // Check if click is on trigger
+        if ((_a = this._triggerElement) === null || _a === void 0 ? void 0 : _a.contains(target)) {
+            return;
+        }
+        // Check if dropdown panel contains the target directly
+        if ((_b = this._dropdownElement) === null || _b === void 0 ? void 0 : _b.contains(target)) {
+            return;
+        }
+        // Walk up the composed path (includes shadow DOM boundaries)
+        const composedPath = event.composedPath();
+        for (const element of composedPath) {
+            if (element === this._dropdownElement) {
+                return;
+            }
+            // Check if any element in the path is within the dropdown panel
+            if (element instanceof Element && ((_c = this._dropdownElement) === null || _c === void 0 ? void 0 : _c.contains(element))) {
+                return;
+            }
+        }
+        // Additional check: traverse shadow DOM tree
+        let currentElement = target;
+        while (currentElement) {
+            const root = currentElement.getRootNode();
+            if (root instanceof ShadowRoot && root.host) {
+                // Check if the shadow host is within dropdown
+                if ((_d = this._dropdownElement) === null || _d === void 0 ? void 0 : _d.contains(root.host)) {
+                    return;
+                }
+                currentElement = root.host;
+            }
+            else {
+                break;
+            }
+        }
+        this.close();
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            this.close();
+        }
+    }
+    handleScroll() {
+        if (this._isOpen) {
+            this.calculatePosition();
+        }
+    }
+    handleResize() {
+        if (this._isOpen) {
+            this.calculatePosition();
+        }
+    }
+    calculatePosition() {
+        var _a, _b;
+        try {
+            if (!this._dropdownElement || !this._triggerElement) {
+                this.findDropdownElements();
+            }
+            if (!this._dropdownElement || !this._triggerElement) {
+                return;
+            }
+            const triggerRect = this._triggerElement.getBoundingClientRect();
+            const dropdownRect = this._dropdownElement.getBoundingClientRect();
+            const viewportHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight;
+            const viewportWidth = ((_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.width) || window.innerWidth;
+            const spaceBelow = viewportHeight - triggerRect.bottom;
+            const spaceAbove = triggerRect.top;
+            const spaceRight = viewportWidth - triggerRect.right;
+            const spaceLeft = triggerRect.left;
+            const estimatedDropdownHeight = dropdownRect.height || 200;
+            const dropdownWidth = dropdownRect.width || 300;
+            // Use shared positioning utility for vertical placement
+            const verticalPlacement = determineOptimalPlacement(estimatedDropdownHeight, spaceAbove, spaceBelow);
+            const horizontalPlacement = this.determineHorizontalPlacement(dropdownWidth, spaceLeft, spaceRight);
+            // Calculate fixed position based on trigger's viewport position
+            let top;
+            let left;
+            // Vertical positioning
+            if (verticalPlacement === 'bottom') {
+                top = triggerRect.bottom + this.host.offset;
+            }
+            else {
+                top = triggerRect.top - estimatedDropdownHeight - this.host.offset;
+            }
+            // Horizontal positioning
+            if (horizontalPlacement === 'left') {
+                left = triggerRect.right - dropdownWidth;
+            }
+            else {
+                left = triggerRect.left;
+            }
+            // Ensure dropdown stays within viewport bounds
+            left = Math.max(8, Math.min(left, viewportWidth - dropdownWidth - 8));
+            top = Math.max(8, Math.min(top, viewportHeight - estimatedDropdownHeight - 8));
+            // Apply fixed positioning
+            this._dropdownElement.style.top = `${top}px`;
+            this._dropdownElement.style.left = `${left}px`;
+            this.applyPlacement(verticalPlacement, horizontalPlacement);
+        }
+        catch (error) {
+            this.handleError(error, 'calculatePosition');
+        }
+    }
+    determineHorizontalPlacement(dropdownWidth, spaceLeft, spaceRight) {
+        // If using host placement prop, check if it's a horizontal placement
+        const hostPlacement = this.host.placement;
+        if (hostPlacement.includes('left') || hostPlacement.includes('right')) {
+            // Use the host's specified placement if there's enough space
+            if (hostPlacement.includes('left') && spaceLeft >= dropdownWidth) {
+                return 'left';
+            }
+            if (hostPlacement.includes('right') && spaceRight >= dropdownWidth) {
+                return 'right';
+            }
+        }
+        // Auto-detect based on available space
+        if (spaceRight >= dropdownWidth) {
+            return 'right';
+        }
+        if (spaceLeft >= dropdownWidth) {
+            return 'left';
+        }
+        return spaceRight > spaceLeft ? 'right' : 'left';
+    }
+    applyPlacement(verticalPlacement, horizontalPlacement) {
+        if (!this._dropdownElement)
+            return;
+        // Remove all placement classes
+        this._dropdownElement.classList.remove('dropdown__panel--top', 'dropdown__panel--bottom', 'dropdown__panel--left-aligned', 'dropdown__panel--right-aligned');
+        // Apply vertical placement
+        this._dropdownElement.classList.add(`dropdown__panel--${verticalPlacement}`);
+        // Apply horizontal alignment if specified
+        if (horizontalPlacement === 'left') {
+            this._dropdownElement.classList.add('dropdown__panel--right-aligned');
+        }
+        else if (horizontalPlacement === 'right') {
+            this._dropdownElement.classList.add('dropdown__panel--left-aligned');
+        }
+        this._position.placement = verticalPlacement;
+    }
+    isHoveringDropdown() {
+        var _a;
+        return ((_a = this._dropdownElement) === null || _a === void 0 ? void 0 : _a.matches(':hover')) || false;
+    }
+    isDropdownFocused() {
+        var _a;
+        const activeElement = document.activeElement;
+        if (!activeElement)
+            return false;
+        if ((_a = this._dropdownElement) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) {
+            return true;
+        }
+        const customContent = activeElement.closest('.dropdown__custom-content');
+        if (customContent) {
+            return true;
+        }
+        const interactiveElements = ['INPUT', 'BUTTON', 'TEXTAREA', 'SELECT', 'A'];
+        if (interactiveElements.includes(activeElement.tagName)) {
+            const dropdownPanel = activeElement.closest('.dropdown__panel');
+            if (dropdownPanel) {
+                return true;
+            }
+        }
+        return false;
+    }
+    handleItemClick(item, originalEvent) {
+        this.dispatchEvent(new CustomEvent('nr-dropdown-item-click', {
+            bubbles: true,
+            composed: true,
+            detail: { item, dropdown: this.host, originalEvent }
+        }));
+        if (this.host.autoClose) {
+            this.close();
+        }
+    }
+    cleanup() {
+        this.removeEventListeners();
+        this.removeTriggerListeners();
+        if (this._hoverTimer) {
+            clearTimeout(this._hoverTimer);
+            this._hoverTimer = null;
+        }
+    }
+}
+//# sourceMappingURL=dropdown.controller.js.map

package/dist/src/components/dropdown/controllers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './base.controller.js';
+export * from './dropdown.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/dropdown/controllers/index.js

@@ -0,0 +1,3 @@
+export * from './base.controller.js';
+export * from './dropdown.controller.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/dropdown/dropdown.component.d.ts

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { DropdownPlacement, DropdownTrigger, DropdownSize, DropdownAnimation, DropdownItem } from './dropdown.types.js';
-declare const NrDropdownElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const NrDropdownElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin").LightDomContent) & typeof LitElement;
 /**
  * # Dropdown Component
  *
@@ -69,6 +69,7 @@ declare const NrDropdownElement_base: (new (...args: any[]) => import("@nuralyui
  * @cssproperty --dropdown-max-height - Maximum height of dropdown panel
  */
 export declare class NrDropdownElement extends NrDropdownElement_base {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     requiredComponents: string[];
     items: DropdownItem[];

package/dist/src/components/dropdown/dropdown.component.js

@@ -325,6 +325,7 @@ let NrDropdownElement = class NrDropdownElement extends NuralyUIBaseMixin(LitEle
     `;
     }
 };
+NrDropdownElement.useShadowDom = true;
 NrDropdownElement.styles = styles;
 __decorate([
     property({ type: Array })