@nuraly/lumenui 0.1.0

package/dist/src/components/document/index.js

@@ -0,0 +1,3 @@
+export * from './document.component.js';
+export * from './document.types.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/document/react.d.ts

@@ -0,0 +1,8 @@
+import { NrDocumentElement } from './document.component.js';
+export declare const NrDocument: import("@lit-labs/react").ReactWebComponent<NrDocumentElement, {
+    onLoad: string;
+    onError: string;
+    onPreviewOpen: string;
+    onPreviewClose: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/document/react.js

@@ -0,0 +1,15 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrDocumentElement } from './document.component.js';
+export const NrDocument = createComponent({
+    tagName: 'nr-document',
+    elementClass: NrDocumentElement,
+    react: React,
+    events: {
+        onLoad: 'nr-document-load',
+        onError: 'nr-document-error',
+        onPreviewOpen: 'nr-document-preview-open',
+        onPreviewClose: 'nr-document-preview-close',
+    },
+});
+//# sourceMappingURL=react.js.map

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

@@ -0,0 +1,528 @@
+import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property as e,customElement as r}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{styleMap as s}from"lit/directives/style-map.js";import{unsafeHTML as a}from"lit/directives/unsafe-html.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";import{BaseComponentController as p}from"@nuralyui/common/controllers";const h=o`
+  :host {
+    display: inline-block;
+    position: relative;
+    color: var(--nuraly-color-text);
+    font-family: var(--nuraly-dropdown-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif);
+  }
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown__trigger {
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  .dropdown__trigger:focus-within {
+    outline: var(--nuraly-focus-outline, 2px solid #0f62fe);
+    outline-offset: var(--nuraly-focus-outline-offset, 1px);
+  }
+
+  .dropdown__panel {
+    position: fixed;
+    z-index: var(--nuraly-dropdown-z-index, 9999);
+    background: var(--nuraly-color-dropdown-background, #ffffff);
+    border: var(--nuraly-dropdown-border-width, 1px) solid var(--nuraly-color-dropdown-border, #e0e0e0);
+    border-radius: var(--nuraly-dropdown-border-radius, 6px);
+    box-shadow: var(--nuraly-dropdown-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));
+    min-width: var(--nuraly-dropdown-min-width, 10rem);
+    max-width: var(--nuraly-dropdown-max-width, 20rem);
+    max-height: var(--nuraly-dropdown-max-height, 200px);
+    overflow: auto;
+    /* Use display none to fully hide when closed */
+    display: none;
+    /* Use opacity and visibility for smooth animations */
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-8px);
+    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
+                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
+                transform var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);
+    /* Ensure proper containment */
+    box-sizing: border-box;
+    /* Create new stacking context to prevent layering issues */
+    isolation: isolate;
+    /* Force above other elements */
+    transform-origin: top center;
+    /* Prevent clipping by overflow containers */
+    pointer-events: none;
+  }
+
+  .dropdown__panel--open {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    pointer-events: auto;
+  }
+
+  /* Alternative attribute-based selector (like select component) */
+  :host([open]) .dropdown__panel {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    pointer-events: auto;
+  }
+
+  /* Placement variants - transform origin adjustments */
+  .dropdown__panel--top,
+  .dropdown__panel--top-start,
+  .dropdown__panel--top-end {
+    transform-origin: bottom center;
+    transform: translateY(8px);
+  }
+
+  .dropdown__panel--top.dropdown__panel--open,
+  .dropdown__panel--top-start.dropdown__panel--open,
+  .dropdown__panel--top-end.dropdown__panel--open {
+    transform: none;
+  }
+
+  .dropdown__panel--bottom,
+  .dropdown__panel--bottom-start,
+  .dropdown__panel--bottom-end {
+    transform-origin: top center;
+  }
+
+  /* Size variants */
+  .dropdown__panel--small {
+    font-size: var(--nuraly-dropdown-small-font-size, 0.75rem);
+  }
+
+  .dropdown__panel--medium {
+    font-size: var(--nuraly-dropdown-font-size, 0.875rem);
+  }
+
+  .dropdown__panel--large {
+    font-size: var(--nuraly-dropdown-large-font-size, 1rem);
+  }
+
+  /* Animation variants */
+  
+  /* No animation - instant show/hide */
+  .dropdown__panel--none {
+    transition: none;
+  }
+
+  .dropdown__panel--none:not(.dropdown__panel--open) {
+    opacity: 0;
+    visibility: hidden;
+    transform: none;
+  }
+
+  .dropdown__panel--none.dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  /* Fade animation - opacity only */
+  .dropdown__panel--fade {
+    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
+                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);
+  }
+
+  .dropdown__panel--fade:not(.dropdown__panel--open) {
+    opacity: 0;
+    visibility: hidden;
+    transform: none;
+  }
+
+  .dropdown__panel--fade.dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  /* Slide animation - slide down/up with opacity */
+  .dropdown__panel--slide {
+    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
+                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
+                transform var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);
+  }
+
+  .dropdown__panel--slide:not(.dropdown__panel--open) {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-12px);
+  }
+
+  .dropdown__panel--slide.dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  /* For top-positioned dropdowns, slide direction is reversed */
+  .dropdown__panel--slide.dropdown__panel--top:not(.dropdown__panel--open),
+  .dropdown__panel--slide.dropdown__panel--top-start:not(.dropdown__panel--open),
+  .dropdown__panel--slide.dropdown__panel--top-end:not(.dropdown__panel--open) {
+    transform: translateY(12px);
+  }
+
+  /* Scale animation - scale and opacity */
+  .dropdown__panel--scale {
+    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
+                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
+                transform var(--nuraly-dropdown-animation-duration, 0.15s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  .dropdown__panel--scale:not(.dropdown__panel--open) {
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.9) translateY(-8px);
+  }
+
+  .dropdown__panel--scale.dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  /* For top-positioned scale dropdowns */
+  .dropdown__panel--scale.dropdown__panel--top:not(.dropdown__panel--open),
+  .dropdown__panel--scale.dropdown__panel--top-start:not(.dropdown__panel--open),
+  .dropdown__panel--scale.dropdown__panel--top-end:not(.dropdown__panel--open) {
+    transform: scale(0.9) translateY(8px);
+  }
+
+  .dropdown__panel--scale.dropdown__panel--top.dropdown__panel--open,
+  .dropdown__panel--scale.dropdown__panel--top-start.dropdown__panel--open,
+  .dropdown__panel--scale.dropdown__panel--top-end.dropdown__panel--open {
+    transform: none;
+  }
+
+  /* Arrow */
+  .dropdown__arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: var(--nuraly-dropdown-arrow-size) solid transparent;
+    border-bottom-color: var(--nuraly-dropdown-background);
+    top: calc(-1 * var(--nuraly-dropdown-arrow-size) * 2);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .dropdown__arrow::before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: calc(var(--nuraly-dropdown-arrow-size) + 1px) solid transparent;
+    border-bottom-color: var(--nuraly-dropdown-border-color);
+    top: calc(-1 * var(--nuraly-dropdown-arrow-size) - 1px);
+    left: calc(-1 * var(--nuraly-dropdown-arrow-size) - 1px);
+  }
+
+  /* Content areas */
+  .dropdown__content {
+    overflow: auto;
+  }
+
+  .dropdown__items {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow: visible; /* Allow submenus to extend outside */
+  }
+
+  .dropdown__item {
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-dropdown-item-gap);
+    padding: var(--nuraly-dropdown-item-padding);
+    background: var(--nuraly-color-dropdown-item-background);
+    border: none;
+    color: var(--nuraly-color-dropdown-item-text);
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+    min-height: var(--nuraly-dropdown-item-min-height);
+    transition: var(--nuraly-dropdown-item-transition);
+    font-size: inherit;
+    font-family: inherit;
+    line-height: var(--nuraly-dropdown-item-line-height);
+    position: relative;
+  }
+
+  .dropdown__item:hover:not(.dropdown__item--disabled) {
+    background: var(--nuraly-color-dropdown-item-background-hover);
+    color: var(--nuraly-color-dropdown-item-text-hover);
+  }
+
+  .dropdown__item:focus {
+    outline: none;
+    background: var(--nuraly-color-dropdown-item-background-focus);
+    color: var(--nuraly-color-dropdown-item-text-focus);
+  }
+
+  .dropdown__item:focus-visible {
+    outline: 2px solid var(--nuraly-focus-color, #0f62fe);
+    outline-offset: -2px;
+    background: var(--nuraly-color-dropdown-item-background-focus);
+    color: var(--nuraly-color-dropdown-item-text-focus);
+  }
+
+  .dropdown__item:active:not(.dropdown__item--disabled) {
+    background: var(--nuraly-color-dropdown-item-background-active);
+    color: var(--nuraly-color-dropdown-item-text-active);
+  }
+
+  .dropdown__item--disabled {
+    opacity: var(--nuraly-dropdown-item-disabled-opacity, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .dropdown__item-icon {
+    flex-shrink: 0;
+    width: var(--nuraly-dropdown-item-icon-size);
+    height: var(--nuraly-dropdown-item-icon-size);
+  }
+
+  .dropdown__item-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dropdown__divider {
+    height: 1px;
+    background: var(--nuraly-dropdown-divider-color);
+    margin: var(--nuraly-dropdown-divider-margin);
+  }
+
+  /* Cascading dropdown styles */
+  .dropdown__item-container {
+    position: relative;
+  }
+
+  /* Allow submenus to overflow when dropdown has cascading items */
+  :host([has-cascading]) .dropdown__panel {
+    overflow: visible !important;
+    max-height: none !important; /* Remove height restriction for cascading */
+  }
+
+  :host([has-cascading]) .dropdown__items {
+    overflow: visible !important;
+  }
+
+  /* For cascading dropdowns, we need to handle scrolling differently */
+  :host([has-cascading]) .dropdown__content {
+    overflow: visible !important;
+  }
+
+  .dropdown__item--has-submenu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .dropdown__submenu-arrow {
+    margin-left: auto;
+    font-size: 0.75em;
+    opacity: 0.6;
+    transition: transform 0.15s ease;
+  }
+
+  .dropdown__item--has-submenu:hover .dropdown__submenu-arrow {
+    opacity: 1;
+  }
+
+  .dropdown__submenu {
+    position: absolute;
+    top: 0;
+    z-index: calc(var(--nuraly-dropdown-z-index, 9999) + 1);
+    background: var(--nuraly-color-dropdown-background, #ffffff);
+    border: var(--nuraly-dropdown-border-width, 1px) solid var(--nuraly-color-dropdown-border, #e0e0e0);
+    border-radius: var(--nuraly-dropdown-border-radius, 6px);
+    box-shadow: var(--nuraly-dropdown-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));
+    min-width: var(--nuraly-dropdown-min-width, 10rem);
+    max-width: var(--nuraly-dropdown-max-width, 20rem);
+    max-height: var(--nuraly-dropdown-max-height, auto);
+    overflow: auto;
+    box-sizing: border-box;
+    animation: fadeInSubmenu 0.15s ease;
+    /* Ensure submenu is visible */
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .dropdown__custom-content {
+    padding: var(--nuraly-dropdown-item-padding, 8px 12px);
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  /* Custom content styling */
+  .dropdown__custom-content h3,
+  .dropdown__custom-content h4 {
+    margin: 0 0 8px 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--nuraly-color-text-primary);
+  }
+
+  .dropdown__custom-content p {
+    margin: 0 0 8px 0;
+    font-size: 0.75rem;
+    color: var(--nuraly-color-text-secondary);
+    line-height: 1.4;
+  }
+
+  .dropdown__custom-content button,
+  .dropdown__custom-content input,
+  .dropdown__custom-content select {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+
+  .dropdown__custom-content button:last-child,
+  .dropdown__custom-content input:last-child,
+  .dropdown__custom-content p:last-child {
+    margin-bottom: 0;
+  }
+
+  .dropdown__submenu--right {
+    left: 100%;
+    margin-left: 4px;
+  }
+
+  .dropdown__submenu--left {
+    right: 100%;
+    margin-right: 4px;
+  }
+
+  @keyframes fadeInSubmenu {
+    from {
+      opacity: 0;
+      transform: translateX(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .dropdown__submenu--left {
+    animation-name: fadeInSubmenuLeft;
+  }
+
+  @keyframes fadeInSubmenuLeft {
+    from {
+      opacity: 0;
+      transform: translateX(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  /* Focus styles for accessibility */
+  :host(:focus-within) .dropdown__trigger {
+    outline: var(--nuraly-dropdown-focus-outline);
+    outline-offset: var(--nuraly-dropdown-focus-offset);
+  }
+
+  /* Disabled state */
+  :host([disabled]) {
+    opacity: var(--nuraly-dropdown-disabled-opacity, 0.5);
+    pointer-events: none;
+  }
+
+  /* Allow overflow for nested dropdowns/selects */
+  :host([allow-overflow]) .dropdown__panel {
+    overflow: visible !important;
+    max-height: none !important;
+  }
+
+  :host([allow-overflow]) .dropdown__content {
+    overflow: visible !important;
+  }
+
+  /* Hidden state */
+  [hidden] {
+    display: none !important;
+  }
+
+`;class c extends p{findElement(o){var t;return null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(o)}findElements(o){var t;return null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelectorAll(o)}}class u extends c{constructor(o){super(o),this._isOpen=!1,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=o.open}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}hostConnected(){}hostUpdated(){this._isOpen!==this.host.open&&(this._isOpen=this.host.open),this._triggerElement||this.setupTriggerListeners()}hostDisconnected(){this.cleanup()}open(){try{this._isOpen||this.host.disabled||(this._isOpen=!0,this.host.open=!0,this.requestUpdate(),setTimeout(()=>{this.calculatePosition(),this.setupEventListeners()},10),this.dispatchEvent(new CustomEvent("nr-dropdown-open",{bubbles:!0,composed:!0,detail:{dropdown:this.host}})))}catch(o){this.handleError(o,"open")}}close(){try{this._isOpen&&(this.removeEventListeners(),this._isOpen=!1,this.host.open=!1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-dropdown-close",{bubbles:!0,composed:!0,detail:{dropdown:this.host}})))}catch(o){this.handleError(o,"close")}}toggle(){try{this._isOpen?this.close():this.open()}catch(o){this.handleError(o,"toggle")}}removeTriggerListeners(){this._triggerElement&&(this._triggerClickHandler&&(this._triggerElement.removeEventListener("click",this._triggerClickHandler),this._triggerClickHandler=null),this._triggerHoverHandler&&(this._triggerElement.removeEventListener("mouseenter",this._triggerHoverHandler),this._triggerHoverHandler=null),this._triggerLeaveHandler&&(this._triggerElement.removeEventListener("mouseleave",this._triggerLeaveHandler),this._triggerLeaveHandler=null),this._triggerFocusHandler&&(this._triggerElement.removeEventListener("focusin",this._triggerFocusHandler),this._triggerFocusHandler=null),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(){if(this.findDropdownElements(),this._triggerElement)switch(this.removeTriggerListeners(),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)}}setupEventListeners(){this.host.closeOnOutsideClick&&(this._outsideClickHandler=this.handleOutsideClick.bind(this),document.addEventListener("click",this._outsideClickHandler,!0)),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,!0),window.addEventListener("resize",this._resizeHandler)}removeEventListeners(){this._outsideClickHandler&&(document.removeEventListener("click",this._outsideClickHandler,!0),this._outsideClickHandler=null),this._keydownHandler&&(document.removeEventListener("keydown",this._keydownHandler),this._keydownHandler=null),this._scrollHandler&&(window.removeEventListener("scroll",this._scrollHandler,!0),this._scrollHandler=null),this._resizeHandler&&(window.removeEventListener("resize",this._resizeHandler),this._resizeHandler=null)}handleTriggerClick(){this.host.disabled||this.toggle()}handleTriggerHover(){this.host.disabled||(this._hoverTimer&&clearTimeout(this._hoverTimer),this._hoverTimer=window.setTimeout(()=>{this.open()},this.host.delay))}handleTriggerLeave(){this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=null),setTimeout(()=>{this.isHoveringDropdown()||this.close()},100)}handleTriggerFocus(){this.host.disabled||this.open()}handleTriggerBlur(){setTimeout(()=>{this.isDropdownFocused()||this.close()},100)}handleOutsideClick(o){var t,n,i,e;if(!this.host.closeOnOutsideClick)return;const r=o.target;if(null===(t=this._triggerElement)||void 0===t?void 0:t.contains(r))return;if(null===(n=this._dropdownElement)||void 0===n?void 0:n.contains(r))return;const d=o.composedPath();for(const o of d){if(o===this._dropdownElement)return;if(o instanceof Element&&(null===(i=this._dropdownElement)||void 0===i?void 0:i.contains(o)))return}let s=r;for(;s;){const o=s.getRootNode();if(!(o instanceof ShadowRoot&&o.host))break;if(null===(e=this._dropdownElement)||void 0===e?void 0:e.contains(o.host))return;s=o.host}this.close()}handleKeydown(o){"Escape"===o.key&&this.close()}handleScroll(){this._isOpen&&this.calculatePosition()}handleResize(){this._isOpen&&this.calculatePosition()}calculatePosition(){var o,t;try{if(this._dropdownElement&&this._triggerElement||this.findDropdownElements(),!this._dropdownElement||!this._triggerElement)return;const n=this._triggerElement.getBoundingClientRect(),i=this._dropdownElement.getBoundingClientRect(),e=(null===(o=window.visualViewport)||void 0===o?void 0:o.height)||window.innerHeight,r=(null===(t=window.visualViewport)||void 0===t?void 0:t.width)||window.innerWidth,d=e-n.bottom,s=n.top,a=r-n.right,l=n.left,p=i.height||200,h=i.width||300,c=function(o,t,n){return n>=o?"bottom":t>=o||t>n?"top":"bottom"}(p,s,d),u=this.determineHorizontalPlacement(h,l,a);let w,m;w="bottom"===c?n.bottom+this.host.offset:n.top-p-this.host.offset,m="left"===u?n.right-h:n.left,m=Math.max(8,Math.min(m,r-h-8)),w=Math.max(8,Math.min(w,e-p-8)),this._dropdownElement.style.top=`${w}px`,this._dropdownElement.style.left=`${m}px`,this.applyPlacement(c,u)}catch(o){this.handleError(o,"calculatePosition")}}determineHorizontalPlacement(o,t,n){const i=this.host.placement;if(i.includes("left")||i.includes("right")){if(i.includes("left")&&t>=o)return"left";if(i.includes("right")&&n>=o)return"right"}return n>=o?"right":t>=o?"left":n>t?"right":"left"}applyPlacement(o,t){this._dropdownElement&&(this._dropdownElement.classList.remove("dropdown__panel--top","dropdown__panel--bottom","dropdown__panel--left-aligned","dropdown__panel--right-aligned"),this._dropdownElement.classList.add(`dropdown__panel--${o}`),"left"===t?this._dropdownElement.classList.add("dropdown__panel--right-aligned"):"right"===t&&this._dropdownElement.classList.add("dropdown__panel--left-aligned"),this._position.placement=o)}isHoveringDropdown(){var o;return(null===(o=this._dropdownElement)||void 0===o?void 0:o.matches(":hover"))||!1}isDropdownFocused(){var o;const t=document.activeElement;if(!t)return!1;if(null===(o=this._dropdownElement)||void 0===o?void 0:o.contains(t))return!0;if(t.closest(".dropdown__custom-content"))return!0;if(["INPUT","BUTTON","TEXTAREA","SELECT","A"].includes(t.tagName)){if(t.closest(".dropdown__panel"))return!0}return!1}handleItemClick(o,t){this.dispatchEvent(new CustomEvent("nr-dropdown-item-click",{bubbles:!0,composed:!0,detail:{item:o,dropdown:this.host,originalEvent:t}})),this.host.autoClose&&this.close()}cleanup(){this.removeEventListeners(),this.removeTriggerListeners(),this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=null)}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var w=function(o,t,n,i){for(var e,r=arguments.length,d=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i,s=o.length-1;s>=0;s--)(e=o[s])&&(d=(r<3?e(d):r>3?e(t,n,d):e(t,n))||d);return r>3&&d&&Object.defineProperty(t,n,d),d};let m=class extends(l(t)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.items=[],this.open=!1,this.placement="bottom",this.trigger="hover",this.size="medium",this.animation="fade",this.disabled=!1,this.arrow=!1,this.autoClose=!1,this.closeOnOutsideClick=!0,this.closeOnEscape=!0,this.offset=4,this.delay=50,this.maxHeight="300px",this.minWidth="auto",this.cascadeDirection="auto",this.cascadeDelay=50,this.cascadeOnHover=!0,this.allowOverflow=!1,this.dropdownController=new u(this),this.openSubmenus=new Set,this.submenuTimers=new Map,this.handleDropdownPanelClick=o=>{o.stopPropagation()},this.handleItemClick=(o,t)=>{o.disabled||(o.options&&o.options.length>0||o.customContent?this.toggleSubmenu(o.id):this.dropdownController.handleItemClick(o,t))},this.handleItemHover=o=>{var t;if(((null===(t=o.options)||void 0===t?void 0:t.length)||o.customContent)&&(this.clearSubmenuTimer(o.id),this.cascadeOnHover)){const t=window.setTimeout(()=>{this.showSubmenu(o.id)},this.cascadeDelay);this.submenuTimers.set(o.id,t)}},this.handleItemLeave=o=>{var t;if(!(null===(t=o.options)||void 0===t?void 0:t.length)&&!o.customContent)return;this.clearSubmenuTimer(o.id);const n=window.setTimeout(()=>{this.hideSubmenu(o.id)},100);this.submenuTimers.set(`hide-${o.id}`,n)},this.handleSubmenuEnter=o=>{this.clearSubmenuTimer(`hide-${o}`)},this.handleSubmenuLeave=o=>{const t=window.setTimeout(()=>{this.hideSubmenu(o)},100);this.submenuTimers.set(`hide-${o}`,t)}}connectedCallback(){super.connectedCallback(),this.updateCascadingAttribute()}updated(o){super.updated(o),o.has("items")&&this.updateCascadingAttribute()}disconnectedCallback(){super.disconnectedCallback()}firstUpdated(){}updateCascadingAttribute(){this.items.some(o=>o.options&&o.options.length>0||!!o.customContent)?this.setAttribute("has-cascading",""):this.removeAttribute("has-cascading")}clearSubmenuTimer(o){const t=this.submenuTimers.get(o);t&&(clearTimeout(t),this.submenuTimers.delete(o))}toggleSubmenu(o){this.openSubmenus.has(o)?this.hideSubmenu(o):this.showSubmenu(o)}showSubmenu(o){this.openSubmenus.add(o),this.requestUpdate()}hideSubmenu(o){this.openSubmenus.delete(o),this.requestUpdate()}show(){this.dropdownController.open()}hide(){this.dropdownController.close()}toggle(){this.dropdownController.toggle()}renderCustomContent(o){return"string"==typeof o.customContent?n`<div>${a(o.customContent)}</div>`:o.customContent}renderSubmenuContent(o){return o.customContent?n`
+        <div class="dropdown__custom-content">
+          ${this.renderCustomContent(o)}
+        </div>
+      `:n`
+      <div class="dropdown__items">
+        ${(o.options||[]).map(o=>o.divider?n`<div class="dropdown__divider"></div>`:n`
+            <button
+              class="dropdown__item ${d({"dropdown__item--disabled":!!o.disabled})}"
+              ?disabled="${o.disabled}"
+              @click="${t=>this.handleItemClick(o,t)}"
+            >
+              ${o.icon?n`<nr-icon name="${o.icon}" class="dropdown__item-icon"></nr-icon>`:i}
+              <span class="dropdown__item-label">${o.label}</span>
+            </button>
+          `)}
+      </div>
+    `}renderItems(){return this.items.length?n`
+      <div class="dropdown__items">
+        ${this.items.map(o=>{if(o.divider)return n`<div class="dropdown__divider"></div>`;const t=!!(o.options&&o.options.length>0)||!!o.customContent,e=t&&this.openSubmenus.has(o.id);return n`
+            <div class="dropdown__item-container ${d({"dropdown__item-container--has-submenu":t})}">
+              <button
+                class="dropdown__item ${d({"dropdown__item--disabled":!!o.disabled,"dropdown__item--has-submenu":t})}"
+                ?disabled="${o.disabled}"
+                @click="${t=>this.handleItemClick(o,t)}"
+                @mouseenter="${()=>t&&this.handleItemHover(o)}"
+                @mouseleave="${()=>t&&this.handleItemLeave(o)}"
+              >
+                ${o.icon?n`<nr-icon name="${o.icon}" class="dropdown__item-icon"></nr-icon>`:i}
+                <span class="dropdown__item-label">${o.label}</span>
+                ${t?n`<nr-icon name="chevron-right" class="dropdown__submenu-arrow"></nr-icon>`:i}
+              </button>
+              
+              ${t&&e?n`
+                <div class="dropdown__submenu ${d({"dropdown__submenu--right":"right"===this.cascadeDirection||"auto"===this.cascadeDirection,"dropdown__submenu--left":"left"===this.cascadeDirection})}"
+                @mouseenter="${()=>this.handleSubmenuEnter(o.id)}"
+                @mouseleave="${()=>this.handleSubmenuLeave(o.id)}">
+                  ${this.renderSubmenuContent(o)}
+                </div>
+              `:i}
+            </div>
+          `})}
+      </div>
+    `:i}render(){const o={dropdown__panel:!0,"dropdown__panel--open":this.open,[`dropdown__panel--${this.size}`]:!0,[`dropdown__panel--${this.animation}`]:!0,[`dropdown__panel--${this.placement}`]:!0,"dropdown__panel--with-arrow":this.arrow},t={maxHeight:this.maxHeight,minWidth:this.minWidth};return n`
+      <div class="dropdown">
+        <div class="dropdown__trigger">
+          <slot name="trigger"></slot>
+        </div>
+        
+        <div 
+          class="${d(o)}"
+          style="${s(t)}"
+          @click="${this.handleDropdownPanelClick}"
+        >
+          ${this.arrow?n`<div class="dropdown__arrow"></div>`:i}
+          
+          <slot name="header"></slot>
+          
+          <div class="dropdown__content">
+            <slot name="content">${this.renderItems()}</slot>
+          </div>
+          
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `}};m.styles=h,w([e({type:Array})],m.prototype,"items",void 0),w([e({type:Boolean,reflect:!0})],m.prototype,"open",void 0),w([e({type:String})],m.prototype,"placement",void 0),w([e({type:String})],m.prototype,"trigger",void 0),w([e({type:String})],m.prototype,"size",void 0),w([e({type:String})],m.prototype,"animation",void 0),w([e({type:Boolean})],m.prototype,"disabled",void 0),w([e({type:Boolean})],m.prototype,"arrow",void 0),w([e({type:Boolean,attribute:"auto-close"})],m.prototype,"autoClose",void 0),w([e({type:Boolean,attribute:"close-on-outside-click"})],m.prototype,"closeOnOutsideClick",void 0),w([e({type:Boolean,attribute:"close-on-escape"})],m.prototype,"closeOnEscape",void 0),w([e({type:Number})],m.prototype,"offset",void 0),w([e({type:Number})],m.prototype,"delay",void 0),w([e({type:String,attribute:"max-height"})],m.prototype,"maxHeight",void 0),w([e({type:String,attribute:"min-width"})],m.prototype,"minWidth",void 0),w([e({type:String,attribute:"cascade-direction"})],m.prototype,"cascadeDirection",void 0),w([e({type:Number,attribute:"cascade-delay"})],m.prototype,"cascadeDelay",void 0),w([e({type:Boolean,attribute:"cascade-on-hover"})],m.prototype,"cascadeOnHover",void 0),w([e({type:Boolean,attribute:"allow-overflow"})],m.prototype,"allowOverflow",void 0),m=w([r("nr-dropdown")],m);export{m as NrDropdownElement};