@nuraly/lumenui 0.2.1 → 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/interfaces/controller-interfaces.d.ts

@@ -0,0 +1,79 @@
+import { ReactiveControllerHost } from 'lit';
+import { DropdownItem, DropdownPlacement, DropdownTrigger, DropdownAnimation, DropdownSize } from '../dropdown.types.js';
+/**
+ * Base dropdown controller interface
+ */
+export interface DropdownBaseController {
+    host: DropdownHost;
+}
+/**
+ * Dropdown host interface - represents the dropdown component
+ */
+export interface DropdownHost extends ReactiveControllerHost {
+    open: boolean;
+    disabled: boolean;
+    placement: DropdownPlacement;
+    trigger: DropdownTrigger;
+    size: DropdownSize;
+    animation: DropdownAnimation;
+    arrow: boolean;
+    autoClose: boolean;
+    closeOnOutsideClick: boolean;
+    closeOnEscape: boolean;
+    offset: number;
+    delay: number;
+    maxHeight: string;
+    minWidth: string;
+    items?: DropdownItem[];
+    shadowRoot: ShadowRoot | null;
+    requestUpdate(): void;
+}
+/**
+ * Error handler interface
+ */
+export interface ErrorHandler {
+    handleError(error: Error, context: string): void;
+}
+/**
+ * Dropdown positioning information
+ */
+export interface DropdownPosition {
+    top: number;
+    left: number;
+    width: number;
+    placement: 'bottom' | 'top' | 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+}
+/**
+ * Available space calculation for dropdown positioning
+ */
+export interface DropdownSpace {
+    above: number;
+    below: number;
+    left: number;
+    right: number;
+}
+/**
+ * Dropdown controller specific interface
+ */
+export interface DropdownController extends DropdownBaseController {
+    isOpen: boolean;
+    position: DropdownPosition;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    calculatePosition?(): void;
+}
+/**
+ * Event data interfaces
+ */
+export interface DropdownOpenEventDetail {
+    dropdown: DropdownHost;
+}
+export interface DropdownCloseEventDetail {
+    dropdown: DropdownHost;
+}
+export interface DropdownItemClickEventDetail {
+    item: DropdownItem;
+    dropdown: DropdownHost;
+}
+//# sourceMappingURL=controller-interfaces.d.ts.map

package/dist/src/components/dropdown/interfaces/controller-interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=controller-interfaces.js.map

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

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

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

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

package/dist/src/components/dropdown/templates/nr-dropdown-item.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export declare class HyDropdownItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    icon: string;
+    disabled: boolean;
+    label: string;
+    value: string;
+    additionalData: any;
+    onClick(clickItemEvent: Event): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=nr-dropdown-item.d.ts.map

package/dist/src/components/dropdown/templates/nr-dropdown-item.js

@@ -0,0 +1,55 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nr-dropdown-item.style.js';
+let HyDropdownItem = class HyDropdownItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+    }
+    onClick(clickItemEvent) {
+        console.log(this.additionalData, 'clickItemEvent');
+        clickItemEvent.stopPropagation();
+        if (!this.disabled) {
+            this.dispatchEvent(new CustomEvent('click-item', {
+                detail: { value: this.value, additionalData: this.additionalData },
+                composed: true,
+                bubbles: true,
+            }));
+        }
+    }
+    render() {
+        return html `
+      <div @click=${this.onClick}>
+        ${this.icon ? html `<nr-icon name=${this.icon}></nr-icon>` : nothing}
+        <nr-label class="option-label">${this.label}</nr-label>
+      </div>
+    `;
+    }
+};
+HyDropdownItem.styles = styles;
+__decorate([
+    property({ reflect: true, type: String })
+], HyDropdownItem.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HyDropdownItem.prototype, "disabled", void 0);
+__decorate([
+    property()
+], HyDropdownItem.prototype, "label", void 0);
+__decorate([
+    property()
+], HyDropdownItem.prototype, "value", void 0);
+__decorate([
+    property()
+], HyDropdownItem.prototype, "additionalData", void 0);
+HyDropdownItem = __decorate([
+    customElement('nr-dropdown-item')
+], HyDropdownItem);
+export { HyDropdownItem };
+//# sourceMappingURL=nr-dropdown-item.js.map

package/dist/src/components/dropdown/templates/nr-dropdown-item.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult[];
+//# sourceMappingURL=nr-dropdown-item.style.d.ts.map

package/dist/src/components/dropdown/templates/nr-dropdown-item.style.js

@@ -0,0 +1,34 @@
+import { css } from 'lit';
+const dropdownItemStyle = css `
+    div {
+        padding: 0;
+        cursor: pointer;
+        background-color: #ffffff;
+        display: flex;
+        align-items: center;
+        color: #161616;
+        font-size: 0.875rem; /* Default value added */
+
+    }
+    nr-icon {
+        display: flex;
+    }
+    :host(:not([disabled])) div:hover {
+        background-color: #f4f4f4;
+        margin-left: -1px;
+    }
+    :host([disabled]) div {
+        background-color: #f4f4f4;
+        cursor: not-allowed;
+        color: #c6c6c6;
+    }
+
+    :host(:not([icon])) .option-label {
+        padding-left: 1rem;
+    }
+    :host([icon]) .option-label {
+        padding-left: 0.5rem;
+    }
+`;
+export const styles = [dropdownItemStyle];
+//# sourceMappingURL=nr-dropdown-item.style.js.map

package/dist/src/components/dropdown/templates/nr-dropdown-menu.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+import { DropDownDirection } from '../dropdown.types';
+export declare class HyDropdownMenu extends LitElement {
+    static styles: import("lit").CSSResult[];
+    menuOption: HTMLElement;
+    disabled: boolean;
+    icon: string;
+    label: string;
+    direction: DropDownDirection;
+    showChildren: boolean;
+    firstUpdated(): void;
+    onMouseEnterMenu: () => void;
+    onMouseLeaveMenu: () => void;
+    onClickMenu(menuClickEvent: Event): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=nr-dropdown-menu.d.ts.map