@nuralyui/dropdown 0.0.19 → 0.0.20

package/bundle.js

@@ -1,6 +1,519 @@
-import{css as o,LitElement as t,nothing as n,html as i}from"lit";import{property as r,customElement as e}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{NuralyUIBaseMixin as a}from"@nuralyui/common/mixins";const l=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:absolute;top:100%;left:0;z-index:var(--nuraly-dropdown-z-index,9999);background:var(--nuraly-color-dropdown-background,#fff);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,.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;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease);box-sizing:border-box;isolation:isolate;transform-origin:top center}.dropdown__panel--open{opacity:1;visibility:visible;transform:translateY(0)}:host([open]) .dropdown__panel{opacity:1;visibility:visible;transform:translateY(0)}.dropdown__panel--top,.dropdown__panel--top-end,.dropdown__panel--top-start{top:auto;bottom:100%;margin-bottom:1px;margin-top:0;transform:translateY(8px)}.dropdown__panel--top-end.dropdown__panel--open,.dropdown__panel--top-start.dropdown__panel--open,.dropdown__panel--top.dropdown__panel--open{transform:translateY(0)}.dropdown__panel--bottom-end,.dropdown__panel--top-end{left:auto;right:0}.dropdown__panel--bottom-start,.dropdown__panel--top-start{left:0;right:auto}.dropdown__panel--small{font-size:var(--nuraly-dropdown-small-font-size,.75rem)}.dropdown__panel--medium{font-size:var(--nuraly-dropdown-font-size,.875rem)}.dropdown__panel--large{font-size:var(--nuraly-dropdown-large-font-size,1rem)}.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}.dropdown__panel--fade{transition:opacity var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease),visibility var(--nuraly-dropdown-animation-duration,.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}.dropdown__panel--slide{transition:opacity var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease),visibility var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease),transform var(--nuraly-dropdown-animation-duration,.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:translateY(0)}.dropdown__panel--slide.dropdown__panel--top-end:not(.dropdown__panel--open),.dropdown__panel--slide.dropdown__panel--top-start:not(.dropdown__panel--open),.dropdown__panel--slide.dropdown__panel--top:not(.dropdown__panel--open){transform:translateY(12px)}.dropdown__panel--scale{transition:opacity var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease),visibility var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease),transform var(--nuraly-dropdown-animation-duration,.15s) cubic-bezier(.25,.46,.45,.94)}.dropdown__panel--scale:not(.dropdown__panel--open){opacity:0;visibility:hidden;transform:scale(.9) translateY(-8px)}.dropdown__panel--scale.dropdown__panel--open{opacity:1;visibility:visible;transform:scale(1) translateY(0)}.dropdown__panel--scale.dropdown__panel--top-end:not(.dropdown__panel--open),.dropdown__panel--scale.dropdown__panel--top-start:not(.dropdown__panel--open),.dropdown__panel--scale.dropdown__panel--top:not(.dropdown__panel--open){transform:scale(.9) translateY(8px)}.dropdown__panel--scale.dropdown__panel--top-end.dropdown__panel--open,.dropdown__panel--scale.dropdown__panel--top-start.dropdown__panel--open,.dropdown__panel--scale.dropdown__panel--top.dropdown__panel--open{transform:scale(1) translateY(0)}.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)}.dropdown__content{overflow:auto}.dropdown__items{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;overflow:visible}.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:0;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,.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)}.dropdown__item-container{position:relative}:host([has-cascading]) .dropdown__panel{overflow:visible!important;max-height:none!important}:host([has-cascading]) .dropdown__items{overflow:visible!important}: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:.75em;opacity:.6;transition:transform .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,#fff);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,.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;box-sizing:border-box;animation:fadeInSubmenu .15s ease;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}.dropdown__custom-content h3,.dropdown__custom-content h4{margin:0 0 8px 0;font-size:.875rem;font-weight:600;color:var(--nuraly-color-text-primary)}.dropdown__custom-content p{margin:0 0 8px 0;font-size:.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)}}:host(:focus-within) .dropdown__trigger{outline:var(--nuraly-dropdown-focus-outline);outline-offset:var(--nuraly-dropdown-focus-offset)}:host([disabled]){opacity:var(--nuraly-dropdown-disabled-opacity,.5);pointer-events:none}[hidden]{display:none!important}`;class p{constructor(o){this._host=o,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){this._host.requestUpdate()}dispatchEvent(o){return this._host.dispatchEvent(o)}handleError(o,t){console.error(`Dropdown Controller Error in ${t}:`,o)}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 h extends p{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;const i=o.target;if(null===(t=this._triggerElement)||void 0===t?void 0:t.contains(i))return;if(i.closest(".dropdown__panel"))return;if(null===(n=this._dropdownElement)||void 0===n?void 0:n.contains(i))return;if(i.closest("nr-dropdown"))return;if(i.closest(".dropdown__custom-content"))return;if(["INPUT","BUTTON","TEXTAREA","SELECT","A"].includes(i.tagName)){if(i.closest(".dropdown__panel"))return}i.closest(".dropdown")||i.closest('[class*="dropdown"]')||this.host.closeOnOutsideClick&&this.close()}handleKeydown(o){"Escape"===o.key&&this.close()}handleScroll(){}handleResize(){this._isOpen&&this.calculatePosition()}calculatePosition(){var o;try{if(this._dropdownElement&&this._triggerElement||this.findDropdownElements(),!this._dropdownElement||!this._triggerElement)return;const t=this._triggerElement.getBoundingClientRect(),n=((null===(o=window.visualViewport)||void 0===o?void 0:o.height)||window.innerHeight)-t.bottom,i=t.top,r=200,e=this.determineOptimalPlacement(r,i,n);this.applyPlacement(e)}catch(o){this.handleError(o,"calculatePosition")}}determineOptimalPlacement(o,t,n){return n>=o?"bottom":t>=o||t>n?"top":"bottom"}applyPlacement(o){this._dropdownElement&&(this._dropdownElement.classList.remove("dropdown__panel--top","dropdown__panel--bottom"),this._dropdownElement.classList.add(`dropdown__panel--${o}`),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){this.dispatchEvent(new CustomEvent("nr-dropdown-item-click",{bubbles:!0,composed:!0,detail:{item:o,dropdown:this.host}})),this.host.autoClose&&this.close()}cleanup(){this.removeEventListeners(),this.removeTriggerListeners(),this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=null)}}
+import{css as o,LitElement as t,nothing as n,html 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{NuralyUIBaseMixin as a}from"@nuralyui/common/mixins";const l=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: absolute;
+    top: 100%;
+    left: 0;
+    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 opacity and visibility for smooth animations */
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-8px);
+    transition: all 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;
+  }
+
+  .dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  /* Alternative attribute-based selector (like select component) */
+  :host([open]) .dropdown__panel {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  /* Placement variants */
+  .dropdown__panel--top,
+  .dropdown__panel--top-start,
+  .dropdown__panel--top-end {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: 1px;
+    margin-top: 0;
+    transform: translateY(8px);
+  }
+
+  .dropdown__panel--top.dropdown__panel--open,
+  .dropdown__panel--top-start.dropdown__panel--open,
+  .dropdown__panel--top-end.dropdown__panel--open {
+    transform: translateY(0);
+  }
+
+  .dropdown__panel--bottom-end,
+  .dropdown__panel--top-end {
+    left: auto;
+    right: 0;
+  }
+
+  .dropdown__panel--bottom-start,
+  .dropdown__panel--top-start {
+    left: 0;
+    right: auto;
+  }
+
+  /* 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: translateY(0);
+  }
+
+  /* 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: scale(1) translateY(0);
+  }
+
+  /* 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: scale(1) translateY(0);
+  }
+
+  /* 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, 200px);
+    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;
+  }
+
+  /* Hidden state */
+  [hidden] {
+    display: none !important;
+  }
+
+`;class p{constructor(o){this._host=o,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){this._host.requestUpdate()}dispatchEvent(o){return this._host.dispatchEvent(o)}handleError(o,t){console.error(`Dropdown Controller Error in ${t}:`,o)}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 h extends p{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;const i=o.target;if(null===(t=this._triggerElement)||void 0===t?void 0:t.contains(i))return;if(i.closest(".dropdown__panel"))return;if(null===(n=this._dropdownElement)||void 0===n?void 0:n.contains(i))return;if(i.closest("nr-dropdown"))return;if(i.closest(".dropdown__custom-content"))return;if(["INPUT","BUTTON","TEXTAREA","SELECT","A"].includes(i.tagName)){if(i.closest(".dropdown__panel"))return}i.closest(".dropdown")||i.closest('[class*="dropdown"]')||this.host.closeOnOutsideClick&&this.close()}handleKeydown(o){"Escape"===o.key&&this.close()}handleScroll(){}handleResize(){this._isOpen&&this.calculatePosition()}calculatePosition(){var o;try{if(this._dropdownElement&&this._triggerElement||this.findDropdownElements(),!this._dropdownElement||!this._triggerElement)return;const t=this._triggerElement.getBoundingClientRect(),n=((null===(o=window.visualViewport)||void 0===o?void 0:o.height)||window.innerHeight)-t.bottom,i=t.top,e=200,r=this.determineOptimalPlacement(e,i,n);this.applyPlacement(r)}catch(o){this.handleError(o,"calculatePosition")}}determineOptimalPlacement(o,t,n){return n>=o?"bottom":t>=o||t>n?"top":"bottom"}applyPlacement(o){this._dropdownElement&&(this._dropdownElement.classList.remove("dropdown__panel--top","dropdown__panel--bottom"),this._dropdownElement.classList.add(`dropdown__panel--${o}`),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){this.dispatchEvent(new CustomEvent("nr-dropdown-item-click",{bubbles:!0,composed:!0,detail:{item:o,dropdown:this.host}})),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 u=function(o,t,n,i){for(var r,e=arguments.length,d=e<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i,s=o.length-1;s>=0;s--)(r=o[s])&&(d=(e<3?r(d):e>3?r(t,n,d):r(t,n))||d);return e>3&&d&&Object.defineProperty(t,n,d),d};let c=class extends(a(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.dropdownController=new h(this),this.openSubmenus=new Set,this.submenuTimers=new Map,this.handleDropdownPanelClick=o=>{o.stopPropagation()},this.handleItemClick=o=>{o.disabled||(o.options&&o.options.length>0||o.customContent?this.toggleSubmenu(o.id):this.dropdownController.handleItemClick(o))},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()}renderItems(){return this.items.length?i`<div class="dropdown__items">${this.items.map((o=>{if(o.divider)return i`<div class="dropdown__divider"></div>`;const t=!!(o.options&&o.options.length>0)||!!o.customContent,r=t&&this.openSubmenus.has(o.id);return i`<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="${()=>this.handleItemClick(o)}" @mouseenter="${()=>t&&this.handleItemHover(o)}" @mouseleave="${()=>t&&this.handleItemLeave(o)}">${o.icon?i`<nr-icon name="${o.icon}" class="dropdown__item-icon"></nr-icon>`:n} <span class="dropdown__item-label">${o.label}</span> ${t?i`<nr-icon name="chevron-right" class="dropdown__submenu-arrow"></nr-icon>`:n}</button> ${t&&r?i`<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)}">${o.customContent?i`<div class="dropdown__custom-content">${"string"==typeof o.customContent?i`<div .innerHTML="${o.customContent}"></div>`:o.customContent}</div>`:i`<div class="dropdown__items">${o.options.map((o=>o.divider?i`<div class="dropdown__divider"></div>`:i`<button class="dropdown__item ${d({"dropdown__item--disabled":!!o.disabled})}" ?disabled="${o.disabled}" @click="${()=>this.handleItemClick(o)}">${o.icon?i`<nr-icon name="${o.icon}" class="dropdown__item-icon"></nr-icon>`:n} <span class="dropdown__item-label">${o.label}</span></button>`))}</div>`}</div>`:n}</div>`}))}</div>`:n}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 i`<div class="dropdown"><div class="dropdown__trigger"><slot name="trigger"></slot></div><div class="${d(o)}" style="${s(t)}" @click="${this.handleDropdownPanelClick}">${this.arrow?i`<div class="dropdown__arrow"></div>`:n}<slot name="header"></slot><div class="dropdown__content"><slot name="content">${this.renderItems()}</slot></div><slot name="footer"></slot></div></div>`}};c.styles=l,u([r({type:Array})],c.prototype,"items",void 0),u([r({type:Boolean,reflect:!0})],c.prototype,"open",void 0),u([r({type:String})],c.prototype,"placement",void 0),u([r({type:String})],c.prototype,"trigger",void 0),u([r({type:String})],c.prototype,"size",void 0),u([r({type:String})],c.prototype,"animation",void 0),u([r({type:Boolean})],c.prototype,"disabled",void 0),u([r({type:Boolean})],c.prototype,"arrow",void 0),u([r({type:Boolean,attribute:"auto-close"})],c.prototype,"autoClose",void 0),u([r({type:Boolean,attribute:"close-on-outside-click"})],c.prototype,"closeOnOutsideClick",void 0),u([r({type:Boolean,attribute:"close-on-escape"})],c.prototype,"closeOnEscape",void 0),u([r({type:Number})],c.prototype,"offset",void 0),u([r({type:Number})],c.prototype,"delay",void 0),u([r({type:String,attribute:"max-height"})],c.prototype,"maxHeight",void 0),u([r({type:String,attribute:"min-width"})],c.prototype,"minWidth",void 0),u([r({type:String,attribute:"cascade-direction"})],c.prototype,"cascadeDirection",void 0),u([r({type:Number,attribute:"cascade-delay"})],c.prototype,"cascadeDelay",void 0),u([r({type:Boolean,attribute:"cascade-on-hover"})],c.prototype,"cascadeOnHover",void 0),c=u([e("nr-dropdown")],c);export{c as NrDropdownElement};
+ */var c=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 u=class extends(a(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.dropdownController=new h(this),this.openSubmenus=new Set,this.submenuTimers=new Map,this.handleDropdownPanelClick=o=>{o.stopPropagation()},this.handleItemClick=o=>{o.disabled||(o.options&&o.options.length>0||o.customContent?this.toggleSubmenu(o.id):this.dropdownController.handleItemClick(o))},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()}renderItems(){return this.items.length?i`
+      <div class="dropdown__items">
+        ${this.items.map((o=>{if(o.divider)return i`<div class="dropdown__divider"></div>`;const t=!!(o.options&&o.options.length>0)||!!o.customContent,e=t&&this.openSubmenus.has(o.id);return i`
+            <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="${()=>this.handleItemClick(o)}"
+                @mouseenter="${()=>t&&this.handleItemHover(o)}"
+                @mouseleave="${()=>t&&this.handleItemLeave(o)}"
+              >
+                ${o.icon?i`<nr-icon name="${o.icon}" class="dropdown__item-icon"></nr-icon>`:n}
+                <span class="dropdown__item-label">${o.label}</span>
+                ${t?i`<nr-icon name="chevron-right" class="dropdown__submenu-arrow"></nr-icon>`:n}
+              </button>
+              
+              ${t&&e?i`
+                <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)}">
+                  ${o.customContent?i`
+                    <div class="dropdown__custom-content">
+                      ${"string"==typeof o.customContent?i`<div .innerHTML="${o.customContent}"></div>`:o.customContent}
+                    </div>
+                  `:i`
+                    <div class="dropdown__items">
+                      ${o.options.map((o=>o.divider?i`<div class="dropdown__divider"></div>`:i`
+                          <button
+                            class="dropdown__item ${d({"dropdown__item--disabled":!!o.disabled})}"
+                            ?disabled="${o.disabled}"
+                            @click="${()=>this.handleItemClick(o)}"
+                          >
+                            ${o.icon?i`<nr-icon name="${o.icon}" class="dropdown__item-icon"></nr-icon>`:n}
+                            <span class="dropdown__item-label">${o.label}</span>
+                          </button>
+                        `))}
+                    </div>
+                  `}
+                </div>
+              `:n}
+            </div>
+          `}))}
+      </div>
+    `:n}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 i`
+      <div class="dropdown">
+        <div class="dropdown__trigger">
+          <slot name="trigger"></slot>
+        </div>
+        
+        <div 
+          class="${d(o)}"
+          style="${s(t)}"
+          @click="${this.handleDropdownPanelClick}"
+        >
+          ${this.arrow?i`<div class="dropdown__arrow"></div>`:n}
+          
+          <slot name="header"></slot>
+          
+          <div class="dropdown__content">
+            <slot name="content">${this.renderItems()}</slot>
+          </div>
+          
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `}};u.styles=l,c([e({type:Array})],u.prototype,"items",void 0),c([e({type:Boolean,reflect:!0})],u.prototype,"open",void 0),c([e({type:String})],u.prototype,"placement",void 0),c([e({type:String})],u.prototype,"trigger",void 0),c([e({type:String})],u.prototype,"size",void 0),c([e({type:String})],u.prototype,"animation",void 0),c([e({type:Boolean})],u.prototype,"disabled",void 0),c([e({type:Boolean})],u.prototype,"arrow",void 0),c([e({type:Boolean,attribute:"auto-close"})],u.prototype,"autoClose",void 0),c([e({type:Boolean,attribute:"close-on-outside-click"})],u.prototype,"closeOnOutsideClick",void 0),c([e({type:Boolean,attribute:"close-on-escape"})],u.prototype,"closeOnEscape",void 0),c([e({type:Number})],u.prototype,"offset",void 0),c([e({type:Number})],u.prototype,"delay",void 0),c([e({type:String,attribute:"max-height"})],u.prototype,"maxHeight",void 0),c([e({type:String,attribute:"min-width"})],u.prototype,"minWidth",void 0),c([e({type:String,attribute:"cascade-direction"})],u.prototype,"cascadeDirection",void 0),c([e({type:Number,attribute:"cascade-delay"})],u.prototype,"cascadeDelay",void 0),c([e({type:Boolean,attribute:"cascade-on-hover"})],u.prototype,"cascadeOnHover",void 0),u=c([r("nr-dropdown")],u);export{u as NrDropdownElement};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/dropdown",
-    "version": "0.0.19",
+    "version": "0.0.20",
     "description": "Dropdown component for NuralyUI",
     "main": "index.js",
     "type": "module",