@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,120 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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;
+/**
+ * # Dropdown Component
+ *
+ * A versatile dropdown component that provides floating panel functionality with customizable triggers,
+ * content, and positioning. Supports both predefined item lists and custom slot content with
+ * cascading submenus and interactive elements.
+ *
+ * ## Features
+ * - Multiple trigger modes (hover, click, focus, manual)
+ * - Flexible positioning with auto-placement
+ * - Cascading submenus with custom content support
+ * - Interactive elements (forms, buttons) within dropdowns
+ * - Keyboard navigation and accessibility
+ * - Customizable animations and styling
+ * - Event delegation and outside click detection
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic dropdown with slot content -->
+ * <nr-dropdown trigger="hover">
+ *   <button slot="trigger">Menu</button>
+ *   <div slot="content">
+ *     <p>Custom content here</p>
+ *   </div>
+ * </nr-dropdown>
+ *
+ * <!-- Dropdown with predefined items -->
+ * <nr-dropdown
+ *   .items="${items}"
+ *   placement="bottom-start"
+ *   trigger="click">
+ *   <button slot="trigger">Menu</button>
+ * </nr-dropdown>
+ *
+ * <!-- Hover dropdown with custom positioning -->
+ * <nr-dropdown
+ *   trigger="hover"
+ *   placement="top"
+ *   size="large">
+ *   <span slot="trigger">Hover me</span>
+ *   <div slot="content">Tooltip content</div>
+ * </nr-dropdown>
+ * ```
+ *
+ * @element nr-dropdown
+ * @fires nr-dropdown-open - Fired when dropdown opens
+ * @fires nr-dropdown-close - Fired when dropdown closes
+ * @fires nr-dropdown-item-click - Fired when dropdown item is clicked
+ *
+ * @slot trigger - Element that triggers the dropdown
+ * @slot content - Custom content for the dropdown panel
+ * @slot header - Optional header content
+ * @slot footer - Optional footer content
+ *
+ * @cssproperty --dropdown-background - Background color of dropdown panel
+ * @cssproperty --dropdown-border - Border of dropdown panel
+ * @cssproperty --dropdown-shadow - Shadow of dropdown panel
+ * @cssproperty --dropdown-border-radius - Border radius of dropdown panel
+ * @cssproperty --dropdown-max-width - Maximum width of dropdown panel
+ * @cssproperty --dropdown-min-width - Minimum width of dropdown panel
+ * @cssproperty --dropdown-max-height - Maximum height of dropdown panel
+ */
+export declare class NrDropdownElement extends NrDropdownElement_base {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    items: DropdownItem[];
+    open: boolean;
+    placement: DropdownPlacement;
+    trigger: DropdownTrigger;
+    size: DropdownSize;
+    animation: DropdownAnimation;
+    disabled: boolean;
+    arrow: boolean;
+    autoClose: boolean;
+    closeOnOutsideClick: boolean;
+    closeOnEscape: boolean;
+    offset: number;
+    delay: number;
+    maxHeight: string;
+    minWidth: string;
+    cascadeDirection: 'right' | 'left' | 'auto';
+    cascadeDelay: number;
+    cascadeOnHover: boolean;
+    allowOverflow: boolean;
+    private dropdownController;
+    private openSubmenus;
+    private submenuTimers;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, any>): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private updateCascadingAttribute;
+    private handleDropdownPanelClick;
+    private handleItemClick;
+    private handleItemHover;
+    private handleItemLeave;
+    private handleSubmenuEnter;
+    private handleSubmenuLeave;
+    private clearSubmenuTimer;
+    private toggleSubmenu;
+    private showSubmenu;
+    private hideSubmenu;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    private renderCustomContent;
+    private renderSubmenuContent;
+    private renderItems;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=dropdown.component.d.ts.map

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

@@ -0,0 +1,390 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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 { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './dropdown.style';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { NrDropdownController } from './controllers/dropdown.controller.js';
+/**
+ * # Dropdown Component
+ *
+ * A versatile dropdown component that provides floating panel functionality with customizable triggers,
+ * content, and positioning. Supports both predefined item lists and custom slot content with
+ * cascading submenus and interactive elements.
+ *
+ * ## Features
+ * - Multiple trigger modes (hover, click, focus, manual)
+ * - Flexible positioning with auto-placement
+ * - Cascading submenus with custom content support
+ * - Interactive elements (forms, buttons) within dropdowns
+ * - Keyboard navigation and accessibility
+ * - Customizable animations and styling
+ * - Event delegation and outside click detection
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic dropdown with slot content -->
+ * <nr-dropdown trigger="hover">
+ *   <button slot="trigger">Menu</button>
+ *   <div slot="content">
+ *     <p>Custom content here</p>
+ *   </div>
+ * </nr-dropdown>
+ *
+ * <!-- Dropdown with predefined items -->
+ * <nr-dropdown
+ *   .items="${items}"
+ *   placement="bottom-start"
+ *   trigger="click">
+ *   <button slot="trigger">Menu</button>
+ * </nr-dropdown>
+ *
+ * <!-- Hover dropdown with custom positioning -->
+ * <nr-dropdown
+ *   trigger="hover"
+ *   placement="top"
+ *   size="large">
+ *   <span slot="trigger">Hover me</span>
+ *   <div slot="content">Tooltip content</div>
+ * </nr-dropdown>
+ * ```
+ *
+ * @element nr-dropdown
+ * @fires nr-dropdown-open - Fired when dropdown opens
+ * @fires nr-dropdown-close - Fired when dropdown closes
+ * @fires nr-dropdown-item-click - Fired when dropdown item is clicked
+ *
+ * @slot trigger - Element that triggers the dropdown
+ * @slot content - Custom content for the dropdown panel
+ * @slot header - Optional header content
+ * @slot footer - Optional footer content
+ *
+ * @cssproperty --dropdown-background - Background color of dropdown panel
+ * @cssproperty --dropdown-border - Border of dropdown panel
+ * @cssproperty --dropdown-shadow - Shadow of dropdown panel
+ * @cssproperty --dropdown-border-radius - Border radius of dropdown panel
+ * @cssproperty --dropdown-max-width - Maximum width of dropdown panel
+ * @cssproperty --dropdown-min-width - Minimum width of dropdown panel
+ * @cssproperty --dropdown-max-height - Maximum height of dropdown panel
+ */
+let NrDropdownElement = class NrDropdownElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-icon'];
+        this.items = [];
+        this.open = false;
+        this.placement = "bottom" /* DropdownPlacement.Bottom */;
+        this.trigger = "hover" /* DropdownTrigger.Hover */;
+        this.size = "medium" /* DropdownSize.Medium */;
+        this.animation = "fade" /* DropdownAnimation.Fade */;
+        this.disabled = false;
+        this.arrow = false;
+        this.autoClose = false;
+        this.closeOnOutsideClick = true;
+        this.closeOnEscape = true;
+        this.offset = 4;
+        this.delay = 50;
+        this.maxHeight = '300px';
+        this.minWidth = 'auto';
+        this.cascadeDirection = 'auto';
+        this.cascadeDelay = 50;
+        this.cascadeOnHover = true;
+        this.allowOverflow = false;
+        this.dropdownController = new NrDropdownController(this);
+        this.openSubmenus = new Set();
+        this.submenuTimers = new Map();
+        this.handleDropdownPanelClick = (e) => {
+            e.stopPropagation();
+        };
+        this.handleItemClick = (item, e) => {
+            if (item.disabled)
+                return;
+            if ((item.options && item.options.length > 0) || item.customContent) {
+                this.toggleSubmenu(item.id);
+                return;
+            }
+            this.dropdownController.handleItemClick(item, e);
+        };
+        this.handleItemHover = (item) => {
+            var _a;
+            if (!((_a = item.options) === null || _a === void 0 ? void 0 : _a.length) && !item.customContent)
+                return;
+            this.clearSubmenuTimer(item.id);
+            if (this.cascadeOnHover) {
+                const timer = window.setTimeout(() => {
+                    this.showSubmenu(item.id);
+                }, this.cascadeDelay);
+                this.submenuTimers.set(item.id, timer);
+            }
+        };
+        this.handleItemLeave = (item) => {
+            var _a;
+            if (!((_a = item.options) === null || _a === void 0 ? void 0 : _a.length) && !item.customContent)
+                return;
+            this.clearSubmenuTimer(item.id);
+            const timer = window.setTimeout(() => {
+                this.hideSubmenu(item.id);
+            }, 100);
+            this.submenuTimers.set(`hide-${item.id}`, timer);
+        };
+        this.handleSubmenuEnter = (itemId) => {
+            this.clearSubmenuTimer(`hide-${itemId}`);
+        };
+        this.handleSubmenuLeave = (itemId) => {
+            const timer = window.setTimeout(() => {
+                this.hideSubmenu(itemId);
+            }, 100);
+            this.submenuTimers.set(`hide-${itemId}`, timer);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateCascadingAttribute();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('items')) {
+            this.updateCascadingAttribute();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+    }
+    updateCascadingAttribute() {
+        const hasCascading = this.items.some(item => (item.options && item.options.length > 0) || !!item.customContent);
+        if (hasCascading) {
+            this.setAttribute('has-cascading', '');
+        }
+        else {
+            this.removeAttribute('has-cascading');
+        }
+    }
+    clearSubmenuTimer(key) {
+        const timer = this.submenuTimers.get(key);
+        if (timer) {
+            clearTimeout(timer);
+            this.submenuTimers.delete(key);
+        }
+    }
+    toggleSubmenu(itemId) {
+        if (this.openSubmenus.has(itemId)) {
+            this.hideSubmenu(itemId);
+        }
+        else {
+            this.showSubmenu(itemId);
+        }
+    }
+    showSubmenu(itemId) {
+        this.openSubmenus.add(itemId);
+        this.requestUpdate();
+    }
+    hideSubmenu(itemId) {
+        this.openSubmenus.delete(itemId);
+        this.requestUpdate();
+    }
+    show() {
+        this.dropdownController.open();
+    }
+    hide() {
+        this.dropdownController.close();
+    }
+    toggle() {
+        this.dropdownController.toggle();
+    }
+    renderCustomContent(item) {
+        if (typeof item.customContent === 'string') {
+            return html `<div>${unsafeHTML(item.customContent)}</div>`;
+        }
+        return item.customContent;
+    }
+    renderSubmenuContent(item) {
+        if (item.customContent) {
+            return html `
+        <div class="dropdown__custom-content">
+          ${this.renderCustomContent(item)}
+        </div>
+      `;
+        }
+        return html `
+      <div class="dropdown__items">
+        ${(item.options || []).map(subItem => {
+            if (subItem.divider) {
+                return html `<div class="dropdown__divider"></div>`;
+            }
+            return html `
+            <button
+              class="dropdown__item ${classMap({
+                'dropdown__item--disabled': !!subItem.disabled
+            })}"
+              ?disabled="${subItem.disabled}"
+              @click="${(e) => this.handleItemClick(subItem, e)}"
+            >
+              ${subItem.icon ? html `<nr-icon name="${subItem.icon}" class="dropdown__item-icon"></nr-icon>` : nothing}
+              <span class="dropdown__item-label">${subItem.label}</span>
+            </button>
+          `;
+        })}
+      </div>
+    `;
+    }
+    renderItems() {
+        if (!this.items.length)
+            return nothing;
+        return html `
+      <div class="dropdown__items">
+        ${this.items.map(item => {
+            if (item.divider) {
+                return html `<div class="dropdown__divider"></div>`;
+            }
+            const hasSubmenu = !!(item.options && item.options.length > 0) || !!item.customContent;
+            const isSubmenuOpen = hasSubmenu && this.openSubmenus.has(item.id);
+            return html `
+            <div class="dropdown__item-container ${classMap({
+                'dropdown__item-container--has-submenu': hasSubmenu
+            })}">
+              <button
+                class="dropdown__item ${classMap({
+                'dropdown__item--disabled': !!item.disabled,
+                'dropdown__item--has-submenu': hasSubmenu
+            })}"
+                ?disabled="${item.disabled}"
+                @click="${(e) => this.handleItemClick(item, e)}"
+                @mouseenter="${() => hasSubmenu && this.handleItemHover(item)}"
+                @mouseleave="${() => hasSubmenu && this.handleItemLeave(item)}"
+              >
+                ${item.icon ? html `<nr-icon name="${item.icon}" class="dropdown__item-icon"></nr-icon>` : nothing}
+                <span class="dropdown__item-label">${item.label}</span>
+                ${hasSubmenu ? html `<nr-icon name="chevron-right" class="dropdown__submenu-arrow"></nr-icon>` : nothing}
+              </button>
+              
+              ${hasSubmenu && isSubmenuOpen ? html `
+                <div class="dropdown__submenu ${classMap({
+                'dropdown__submenu--right': this.cascadeDirection === 'right' || this.cascadeDirection === 'auto',
+                'dropdown__submenu--left': this.cascadeDirection === 'left'
+            })}"
+                @mouseenter="${() => this.handleSubmenuEnter(item.id)}"
+                @mouseleave="${() => this.handleSubmenuLeave(item.id)}">
+                  ${this.renderSubmenuContent(item)}
+                </div>
+              ` : nothing}
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+    render() {
+        const panelClasses = {
+            'dropdown__panel': true,
+            'dropdown__panel--open': this.open,
+            [`dropdown__panel--${this.size}`]: true,
+            [`dropdown__panel--${this.animation}`]: true,
+            [`dropdown__panel--${this.placement}`]: true,
+            'dropdown__panel--with-arrow': this.arrow
+        };
+        const panelStyles = {
+            maxHeight: this.maxHeight,
+            minWidth: this.minWidth
+        };
+        return html `
+      <div class="dropdown">
+        <div class="dropdown__trigger">
+          <slot name="trigger"></slot>
+        </div>
+        
+        <div 
+          class="${classMap(panelClasses)}"
+          style="${styleMap(panelStyles)}"
+          @click="${this.handleDropdownPanelClick}"
+        >
+          ${this.arrow ? html `<div class="dropdown__arrow"></div>` : nothing}
+          
+          <slot name="header"></slot>
+          
+          <div class="dropdown__content">
+            <slot name="content">${this.renderItems()}</slot>
+          </div>
+          
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+NrDropdownElement.styles = styles;
+__decorate([
+    property({ type: Array })
+], NrDropdownElement.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrDropdownElement.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], NrDropdownElement.prototype, "placement", void 0);
+__decorate([
+    property({ type: String })
+], NrDropdownElement.prototype, "trigger", void 0);
+__decorate([
+    property({ type: String })
+], NrDropdownElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NrDropdownElement.prototype, "animation", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrDropdownElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrDropdownElement.prototype, "arrow", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-close' })
+], NrDropdownElement.prototype, "autoClose", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-outside-click' })
+], NrDropdownElement.prototype, "closeOnOutsideClick", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-escape' })
+], NrDropdownElement.prototype, "closeOnEscape", void 0);
+__decorate([
+    property({ type: Number })
+], NrDropdownElement.prototype, "offset", void 0);
+__decorate([
+    property({ type: Number })
+], NrDropdownElement.prototype, "delay", void 0);
+__decorate([
+    property({ type: String, attribute: 'max-height' })
+], NrDropdownElement.prototype, "maxHeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'min-width' })
+], NrDropdownElement.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String, attribute: 'cascade-direction' })
+], NrDropdownElement.prototype, "cascadeDirection", void 0);
+__decorate([
+    property({ type: Number, attribute: 'cascade-delay' })
+], NrDropdownElement.prototype, "cascadeDelay", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'cascade-on-hover' })
+], NrDropdownElement.prototype, "cascadeOnHover", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'allow-overflow' })
+], NrDropdownElement.prototype, "allowOverflow", void 0);
+NrDropdownElement = __decorate([
+    customElement('nr-dropdown')
+], NrDropdownElement);
+export { NrDropdownElement };
+//# sourceMappingURL=dropdown.component.js.map

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

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