@nuralyui/dropdown 0.0.10 → 0.0.15

package/dropdown.component.d.ts

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import '../icon/index.js';
+import { DropdownPlacement, DropdownTrigger, DropdownSize, DropdownAnimation, DropdownItem } from './dropdown.types.js';
+declare const NrDropdownElement_base: (new (...args: any[]) => import("../../shared").DependencyAware) & (new (...args: any[]) => import("../../shared").ThemeAware) & (new (...args: any[]) => import("../../shared").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;
+    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 renderItems;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=dropdown.component.d.ts.map

package/dropdown.component.js

@@ -0,0 +1,376 @@
+/**
+ * @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 { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NrDropdownController } from './controllers/dropdown.controller.js';
+import '../icon/index.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.dropdownController = new NrDropdownController(this);
+        this.openSubmenus = new Set();
+        this.submenuTimers = new Map();
+        this.handleDropdownPanelClick = (e) => {
+            e.stopPropagation();
+        };
+        this.handleItemClick = (item) => {
+            if (item.disabled)
+                return;
+            if ((item.options && item.options.length > 0) || item.customContent) {
+                this.toggleSubmenu(item.id);
+                return;
+            }
+            this.dropdownController.handleItemClick(item);
+        };
+        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();
+    }
+    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="${() => this.handleItemClick(item)}"
+                @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)}">
+                  ${item.customContent ? html `
+                    <div class="dropdown__custom-content">
+                      ${typeof item.customContent === 'string'
+                ? html `<div .innerHTML="${item.customContent}"></div>`
+                : item.customContent}
+                    </div>
+                  ` : 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="${() => this.handleItemClick(subItem)}"
+                          >
+                            ${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>
+                  `}
+                </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);
+NrDropdownElement = __decorate([
+    customElement('nr-dropdown')
+], NrDropdownElement);
+export { NrDropdownElement };
+//# sourceMappingURL=dropdown.component.js.map

package/dropdown.component.js.map

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

package/{hy-dropdown.style.d.ts → dropdown.style.d.ts}

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