@moni-labs/moni-ui 0.4.1 → 0.4.2

package/dist/cdn/components/moni-select.js

@@ -0,0 +1,503 @@
+import{a as e,c as t,d as n,i as r,m as i,n as a,o,r as s,s as c,t as l}from"../chunks/decorate-DxX3e27g.js";import{t as u}from"../chunks/query-SWT-tzvq.js";import{t as d}from"../chunks/event-emitter-CGhsijUg.js";import"./moni-icon.js";import{t as f}from"../chunks/if-defined-CuEAJKpp.js";import"./moni-progress.js";import{t as p}from"../chunks/class-map-DBljv-_e.js";import"./moni-select-option.js";var m=class extends r{static{this.formAssociated=!0}constructor(){super(),this.name=``,this.label=``,this.variant=`filled`,this.size=`medium`,this.shape=`no-round`,this.disabled=!1,this.loading=!1,this.helper=``,this.errorText=``,this.error=!1,this.value=``,this.icon=``,this.trailingIcon=`arrow_drop_down`,this.searchable=!1,this.clearable=!1,this.sheet=!1,this.placeholder=``,this.positioning=`absolute`,this.placement=`auto`,this.dropdownWidth=`trigger`,this.dropdownMaxHeight=``,this._open=!1,this._searchQuery=``,this._actualPlacement=`bottom`,this._parsedOptions=[],this._activeIndex=-1,this._menuStyle=``,this._menuMaxHeight=`75vh`,this._useInlineCategories=!1,this._drilldownPath=[],this._handleOutsideClick=e=>{this._open&&!e.composedPath().includes(this)&&this._closeDropdown()},this._handlePeerOpen=e=>{let t=e.detail?.item;t&&t!==this&&this._open&&this._closeDropdown()},this._handleScroll=()=>{this._open&&(this._determineActualPlacement(),this._updateMenuPosition())},this._handleResize=()=>{this._open&&(this._determineActualPlacement(),this._updateMenuPosition())},this._internals=this.attachInternals()}static{this.styles=[s,a,i`
+			:host {
+				position: relative;
+				display: block;
+			}
+
+			.field {
+				cursor: pointer;
+			}
+
+			input[type='text'] {
+				cursor: pointer;
+				width: 100%;
+			}
+
+			input[type='text'][readonly] {
+				caret-color: transparent;
+				user-select: none;
+			}
+
+			/* Dropdown menu overlay */
+			.dropdown-menu {
+				position: absolute;
+				top: 100%;
+				left: 0;
+				right: 0;
+				z-index: 100;
+				background-color: var(--surface-container);
+				box-shadow: var(--elevate3);
+				border-radius: 0.5rem;
+				margin-top: 4px;
+				padding: 4px 0;
+				list-style: none;
+				opacity: 0;
+				visibility: hidden;
+				transform: scale(0.95) translateY(-8px);
+				transform-origin: top;
+				transition: 
+					opacity var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1), 
+					transform var(--speed3) cubic-bezier(0.34, 1.56, 0.64, 1), 
+					visibility var(--speed3);
+			}
+
+			.dropdown-menu.open {
+				opacity: 1;
+				visibility: visible;
+				transform: scale(1) translateY(0);
+			}
+
+			/* positioning="body" promotes the menu to the browser's top layer.
+			   Reset the Popover UA box while retaining Shadow DOM styles. */
+			.dropdown-menu[popover] {
+				margin: 0;
+				border: 0;
+			}
+
+			.dropdown-menu.placement-top {
+				top: auto;
+				bottom: 100%;
+				margin-top: 0;
+				margin-bottom: 4px;
+				transform-origin: bottom;
+				transform: scale(0.95) translateY(8px);
+			}
+
+			.dropdown-menu.placement-top.open {
+				transform: scale(1) translateY(0);
+			}
+
+			.dropdown-menu.placement-left {
+				top: 0;
+				left: auto;
+				right: 100%;
+				margin-top: 0;
+				margin-right: 4px;
+				transform-origin: right center;
+				transform: scale(0.95) translateX(8px);
+			}
+
+			.dropdown-menu.placement-left.open {
+				transform: scale(1) translateX(0);
+			}
+
+			.dropdown-menu.placement-right {
+				top: 0;
+				left: 100%;
+				right: auto;
+				margin-top: 0;
+				margin-left: 4px;
+				transform-origin: left center;
+				transform: scale(0.95) translateX(-8px);
+			}
+
+			.dropdown-menu.placement-right.open {
+				transform: scale(1) translateX(0);
+			}
+
+			.dropdown-menu.open.scrollable {
+				overflow-x: hidden;
+				overflow-y: auto;
+				overscroll-behavior: contain;
+			}
+
+			/* Desktop category flyouts need visible overflow. If the root list no
+			   longer fits, the component switches to the inline drilldown layout. */
+			.dropdown-menu.open:not(.scrollable) {
+				overflow: visible;
+			}
+
+			/* Bottom sheet drawer styles */
+			.sheet-backdrop {
+				position: fixed;
+				inset: 0;
+				z-index: 1000;
+				background-color: rgba(0, 0, 0, 0.4);
+				opacity: 0;
+				visibility: hidden;
+				transition: opacity var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1), visibility var(--speed3);
+				display: flex;
+				flex-direction: column;
+				justify-content: flex-end;
+			}
+
+			.sheet-backdrop.open {
+				opacity: 1;
+				visibility: visible;
+			}
+
+			.sheet-drawer {
+				background-color: var(--surface-container);
+				border-radius: 1.75rem 1.75rem 0 0;
+				box-shadow: var(--elevate3);
+				max-height: 70vh;
+				display: flex;
+				flex-direction: column;
+				transform: translateY(100%);
+				transition: transform var(--speed3) cubic-bezier(0.16, 1, 0.3, 1);
+				padding: 16px 0;
+			}
+
+			.sheet-drawer.open {
+				transform: translateY(0);
+			}
+
+			.sheet-handle {
+				width: 40px;
+				height: 4px;
+				background-color: var(--outline-variant);
+				border-radius: 2px;
+				margin: 0 auto 16px;
+			}
+
+			.sheet-title {
+				padding: 0 24px 8px;
+				font-size: 1.125rem;
+				font-weight: 700;
+				color: var(--on-surface);
+			}
+
+			.sheet-search-wrapper {
+				padding: 0 16px 12px;
+			}
+
+			.sheet-search-input {
+				width: 100%;
+				box-sizing: border-box;
+				padding: 10px 16px;
+				border: 1px solid var(--outline);
+				border-radius: 9999px;
+				background: var(--surface-container-high);
+				color: var(--on-surface);
+				font-size: 1rem;
+				outline: none;
+			}
+
+			.sheet-search-input:focus {
+				border-color: var(--primary);
+			}
+
+			.sheet-options-list {
+				list-style: none;
+				padding: 0;
+				margin: 0;
+				overflow-y: auto;
+				flex: 1;
+			}
+
+			/* Animated Drilldown Slide Layout */
+			.drilldown-wrapper {
+				width: 100%;
+				overflow: hidden;
+				position: relative;
+				transition: height var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1);
+			}
+
+			.drilldown-track {
+				display: flex;
+				width: 200%;
+				transition: transform var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1);
+			}
+
+			.drilldown-track.slide-active {
+				transform: translateX(-50%);
+			}
+
+			.drilldown-panel {
+				width: 50%;
+				box-sizing: border-box;
+				list-style: none;
+				padding: 0;
+				margin: 0;
+				flex-shrink: 0;
+			}
+
+			.drilldown-panel.panel-active {
+				max-height: none;
+			}
+
+			.drilldown-panel.panel-inactive {
+				max-height: 0;
+				overflow: hidden;
+			}
+
+			/* Group / Subcategory header (Browsing mode - acts as a hover trigger for submenus) */
+			.group-header {
+				padding: 8px 16px;
+				font-size: 0.875rem;
+				font-weight: 500;
+				color: var(--on-surface);
+				cursor: pointer;
+				display: flex;
+				align-items: center;
+				position: relative;
+				user-select: none;
+				transition: background-color var(--speed2) ease, color var(--speed2) ease;
+			}
+
+			.group-header:hover,
+			.group-header.active {
+				background-color: var(--surface-container-high);
+				color: var(--primary);
+			}
+
+			/* Inline header (Searching mode & Sheet mode - flat layout) */
+			.group-header-flat {
+				padding: 6px 16px;
+				font-size: 0.75rem;
+				font-weight: 700;
+				text-transform: uppercase;
+				color: var(--primary);
+				letter-spacing: 0.05em;
+				background-color: var(--surface-container-low);
+				user-select: none;
+			}
+
+			/* Hierarchical sub-menu with premium flyout animation */
+			.submenu {
+				display: block;
+				opacity: 0;
+				visibility: hidden;
+				position: absolute;
+				top: 0;
+				/* Intermediate flyouts must keep overflow visible so deeper
+				   subcategories are never clipped. Oversized trees switch to the
+				   scrollable inline drilldown layout before rendering. */
+				overflow: visible;
+				background-color: var(--surface-container-highest);
+				box-shadow: var(--elevate3);
+				border-radius: 0.5rem;
+				padding: 4px 0;
+				list-style: none;
+				min-width: 160px;
+				z-index: 110;
+				transition: 
+					opacity var(--speed2) cubic-bezier(0.2, 0.8, 0.2, 1), 
+					transform var(--speed2) cubic-bezier(0.34, 1.56, 0.64, 1), 
+					visibility var(--speed2);
+			}
+
+			.submenu.open-right {
+				left: 100%;
+				margin-left: 2px;
+				transform: scale(0.9) translateX(-10px);
+				transform-origin: top left;
+			}
+
+			.submenu.open-left {
+				right: 100%;
+				margin-right: 2px;
+				transform: scale(0.9) translateX(10px);
+				transform-origin: top right;
+			}
+
+			.group-header:hover > .submenu.active,
+			.group-header.active > .submenu.active {
+				opacity: 1;
+				visibility: visible;
+				transform: scale(1) translateX(0);
+			}
+
+			.option-item {
+				cursor: pointer;
+				padding: 8px 16px;
+				font-size: 0.875rem;
+				color: var(--on-surface);
+				display: flex;
+				align-items: center;
+				transition: background-color var(--speed2) ease;
+			}
+
+			.option-item:hover,
+			.option-item.active-nav {
+				background-color: var(--surface-container-high);
+			}
+
+			.option-item.selected {
+				background-color: var(--tertiary-container);
+				color: var(--on-tertiary-container);
+				font-weight: 500;
+			}
+
+			.option-item.disabled {
+				opacity: 0.5;
+				pointer-events: none;
+			}
+
+			.no-options {
+				padding: 12px 16px;
+				font-size: 0.875rem;
+				color: var(--outline);
+				text-align: center;
+			}
+		`]}connectedCallback(){super.connectedCallback(),document.addEventListener(`click`,this._handleOutsideClick),document.addEventListener(`moni-select-open`,this._handlePeerOpen),window.addEventListener(`scroll`,this._handleScroll,{capture:!0}),window.addEventListener(`resize`,this._handleResize),window.visualViewport?.addEventListener(`scroll`,this._handleScroll),window.visualViewport?.addEventListener(`resize`,this._handleResize)}disconnectedCallback(){this._hideBodyPopover(),super.disconnectedCallback(),document.removeEventListener(`click`,this._handleOutsideClick),document.removeEventListener(`moni-select-open`,this._handlePeerOpen),window.removeEventListener(`scroll`,this._handleScroll,{capture:!0}),window.removeEventListener(`resize`,this._handleResize),window.visualViewport?.removeEventListener(`scroll`,this._handleScroll),window.visualViewport?.removeEventListener(`resize`,this._handleResize)}updated(e){super.updated(e),e.has(`value`)&&this._internals?.setFormValue?.(this.value),(e.has(`_open`)||e.has(`_drilldownPath`)||e.has(`_searchQuery`)||e.has(`_useInlineCategories`)||e.has(`_parsedOptions`))&&this._updateWrapperHeight(),this._open&&(e.has(`positioning`)||e.has(`placement`)||e.has(`dropdownWidth`)||e.has(`dropdownMaxHeight`))&&this._updateMenuPosition(),(e.has(`_open`)||e.has(`positioning`)||e.has(`sheet`))&&this._syncBodyPopover()}_updateWrapperHeight(){let e=this.shadowRoot?.querySelector(`.drilldown-wrapper`);if(e){if(!this._open||this.sheet){e.style.height=``;return}requestAnimationFrame(()=>{let t=this.shadowRoot?.querySelector(`.drilldown-panel.panel-active`);t?e.style.height=`${t.scrollHeight}px`:e.style.height=``})}}_syncBodyPopover(){let e=this._menu;if(!e||typeof e.showPopover!=`function`)return;let t=this._open&&!this.sheet&&this.positioning===`body`;try{let n=e.matches(`:popover-open`);t&&!n?e.showPopover():!t&&n&&e.hidePopover()}catch{}}_hideBodyPopover(){let e=this._menu;if(!(!e||typeof e.hidePopover!=`function`))try{e.matches(`:popover-open`)&&e.hidePopover()}catch{}}_getViewportMetrics(){let e=window.visualViewport,t=e?.offsetTop??0,n=e?.offsetLeft??0,r=e?.height??window.innerHeight,i=e?.width??window.innerWidth;return{top:t,left:n,height:r,width:i,bottom:t+r,right:n+i}}_getDirectionalAvailableHeight(e,t){let n=this._getViewportMetrics(),r=n.height*.75;if(e===`bottom`){let e=n.bottom-t.bottom-8,i=t.bottom-n.top+8;return Math.max(0,Math.floor(Math.min(r,e,r-i)))}let i=t.top-n.top-8,a=n.bottom-t.top+8;return Math.max(0,Math.floor(Math.min(r,i,r-a)))}_normalizeManualMaxHeight(){let e=this.dropdownMaxHeight.trim();if(!e)return``;let t=/^\d+(?:\.\d+)?$/.test(e)?`${e}px`:e;return typeof CSS<`u`&&typeof CSS.supports==`function`&&!CSS.supports(`max-height`,t)?``:t}_resolveManualMaxHeightPx(e,t){let n=e.match(/^(\d+(?:\.\d+)?)(px|vh|dvh|svh|lvh|%|rem)$/i);if(!n)return null;let r=Number(n[1]),i=n[2].toLowerCase();return i===`px`?r:i===`rem`?r*(Number.parseFloat(getComputedStyle(document.documentElement).fontSize)||16):r/100*t}_getMenuHeightConstraint(e,t=this._actualPlacement){let n=this._getViewportMetrics(),r=t===`top`||t===`bottom`?this._getDirectionalAvailableHeight(t,e):Math.max(0,Math.floor(Math.min(n.height*.75,n.height-16))),i=this._normalizeManualMaxHeight(),a=i?this._resolveManualMaxHeightPx(i,n.height):null,o=a===null?r:Math.min(r,a);return{css:i?`min(${r}px, ${i})`:`${r}px`,px:Math.max(0,o)}}_estimateDesiredMenuHeight(){let e=this._getViewportMetrics(),t=this._searchQuery?this._getFilteredOptions().length:this._parsedOptions.length,n=Math.min(e.height*.75,Math.max(48,t*40+8)),r=this._normalizeManualMaxHeight(),i=r?this._resolveManualMaxHeightPx(r,e.height):null;return i!==null&&(n=Math.min(n,i)),n}_getGroupDepth(e){return e.reduce((e,t)=>t.type===`option`?e:Math.max(e,1+this._getGroupDepth(t.children)),0)}_hasOversizedGroupPanel(e,t){return e.some(e=>e.type===`option`?!1:e.children.length*40+8>t||this._hasOversizedGroupPanel(e.children,t))}_getAvailableFlyoutWidth(e){let t=this._getViewportMetrics(),n=t.left,r=t.right;if(this.positioning!==`body`){let e=this;for(;e;){let t=e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentNode;if(t instanceof HTMLElement){let e=getComputedStyle(t);if(/(auto|scroll|hidden|clip)/.test(e.overflowX)){let e=t.getBoundingClientRect();n=Math.max(n,e.left),r=Math.min(r,e.right)}}e=t}}return Math.max(0,Math.max(r-e.right,e.left-n))}_determineActualPlacement(){if(this.sheet){this._actualPlacement=`bottom`;return}let e=this.getBoundingClientRect(),t=this._getViewportMetrics(),n=this._getDirectionalAvailableHeight(`bottom`,e),r=this._getDirectionalAvailableHeight(`top`,e),i=t.right-e.right,a=e.left-t.left,o=this._estimateDesiredMenuHeight(),s=this.placement;s===`auto`&&(s=n>=o?`bottom`:r>n?`top`:`bottom`),s===`top`?this._actualPlacement=r<o&&n>r?`bottom`:`top`:s===`bottom`?this._actualPlacement=n<o&&r>n?`top`:`bottom`:s===`left`?this._actualPlacement=a<180&&i>a?`right`:`left`:s===`right`&&(this._actualPlacement=i<180&&a>i?`left`:`right`)}_updateMenuPosition(){if(!this._open||this.sheet)return;this._determineActualPlacement();let e=this.getBoundingClientRect(),t=this._getViewportMetrics(),n=this._getMenuHeightConstraint(e);this._menuMaxHeight=n.css;let r=this._parsedOptions.some(e=>e.type===`group`),i=this._parsedOptions.length*40+8,a=this._getGroupDepth(this._parsedOptions)*160,o=this._getAvailableFlyoutWidth(e),s=t.width<600||r&&o<a,c=r&&(i>n.px||this._hasOversizedGroupPanel(this._parsedOptions,n.px));if(this._useInlineCategories=s||c,this.positioning!==`fixed`&&this.positioning!==`body`){this._menuStyle=``;return}let l=``;if(l=this.dropdownWidth===`trigger`?`width: ${e.width}px;`:this.dropdownWidth===`auto`?`width: auto; min-width: 160px; max-width: 320px;`:`width: ${this.dropdownWidth};`,this._actualPlacement===`top`)this._menuStyle=`
+				position: fixed;
+				bottom: ${window.innerHeight-e.top}px;
+				left: ${e.left}px;
+				${l}
+				top: auto;
+				right: auto;
+			`;else if(this._actualPlacement===`bottom`)this._menuStyle=`
+				position: fixed;
+				top: ${e.bottom}px;
+				left: ${e.left}px;
+				${l}
+				bottom: auto;
+				right: auto;
+			`;else{let r=Math.max(t.top+8,Math.min(e.top,t.bottom-n.px-8));this._menuStyle=this._actualPlacement===`left`?`
+					position: fixed;
+					top: ${r}px;
+					right: ${window.innerWidth-e.left+4}px;
+					${l}
+					left: auto;
+					bottom: auto;
+				`:`
+					position: fixed;
+					top: ${r}px;
+					left: ${e.right+4}px;
+					${l}
+					right: auto;
+					bottom: auto;
+				`}}_getMenuStyle(){let e=`max-height: ${this._menuMaxHeight}; --_select-menu-max-height: ${this._menuMaxHeight};`;return this.positioning===`fixed`||this.positioning===`body`?`${this._menuStyle} ${e}`:this.dropdownWidth===`auto`?`width: max-content; min-width: 160px; max-width: 320px; ${e}`:this.dropdownWidth===`trigger`?e:`width: ${this.dropdownWidth}; ${e}`}_onSlotChange(){if(!this._slot)return;let e=this._slot.assignedElements({flatten:!0}),t=[],n=(e,t)=>{let n=e.find(e=>e.type===`group`&&e.label===t);return n||(n={type:`group`,label:t,children:[]},e.push(n)),n},r=(e,t,r)=>{let i=e;r.length>0&&(t.group=r.join(` / `)),r.forEach(e=>{i=n(i,e).children}),i.push(t)},i=(e,n)=>{let a=e.tagName.toLowerCase();if(a===`option`||a===`moni-select-option`){let i={type:`option`,value:e.getAttribute(`value`)||``,label:e.textContent?.trim()||e.getAttribute(`label`)||e.getAttribute(`value`)||``,disabled:e.hasAttribute(`disabled`),element:e},a=e.getAttribute(`group`),o=a?a.split(`/`).map(e=>e.trim()).filter(Boolean):[],s=[...n,...o];r(t,i,s)}else if(a===`optgroup`){let t=e.getAttribute(`label`)||``,r=[...n,t];Array.from(e.children).forEach(e=>i(e,r))}};e.forEach(e=>i(e,[])),this._parsedOptions=t,this.requestUpdate()}_toggleDropdown(e){e&&e.stopPropagation(),!this.disabled&&(this._open?this._closeDropdown():this._openDropdown())}_onInputClick(e){this.disabled||(this.searchable&&!this.sheet?this._open||this._openDropdown():this._toggleDropdown(e))}_openDropdown(){this.disabled||this._open||(this._open=!0,this._activeIndex=-1,this._drilldownPath=[],this._searchQuery=``,d(this,`moni-select-open`,{detail:{item:this}}),this._updateMenuPosition(),this.searchable&&setTimeout(()=>{this._open&&(this._input&&!this.sheet?this._input.focus():this.sheet&&(this.shadowRoot?.querySelector(`.sheet-search-input`))?.focus())},50))}_closeDropdown(){this._open&&(this._open=!1,this._searchQuery=``,this._hideBodyPopover())}_findOptionByValue(e){return this._getFlatOptions(this._parsedOptions).find(t=>t.value===e)}_onSearchInput(e){let t=e.target.value;if(this._open||this._openDropdown(),this._searchQuery=t,this._activeIndex=-1,this.clearable&&t.trim()===``){this.value=``,d(this,`moni-change`,{detail:{value:this.value,originalEvent:e}});return}let n=this._getFlatOptions(this._parsedOptions).find(e=>e.label.toLowerCase()===t.trim().toLowerCase());n&&!n.disabled&&this._selectOption(n)}_selectOption(e){e.disabled||(this.value=e.value,this._closeDropdown(),this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0})),d(this,`moni-change`,{detail:{value:this.value}}))}_onSubmenuMouseEnter(e){let t=e.currentTarget,n=t.querySelector(`:scope > .submenu`);if(!n)return;let r=t.getBoundingClientRect(),i=window.innerWidth-r.right,a=r.left;i<160&&a>i?(n.classList.remove(`open-right`),n.classList.add(`open-left`)):(n.classList.remove(`open-left`),n.classList.add(`open-right`))}_onKeyDown(e){if(this.disabled)return;let t=this._getVisibleOptions();e.key===`ArrowDown`?(e.preventDefault(),this._open?t.length>0&&(this._activeIndex=(this._activeIndex+1)%t.length,this._scrollToActive()):this._openDropdown()):e.key===`ArrowUp`?(e.preventDefault(),this._open&&t.length>0&&(this._activeIndex=(this._activeIndex-1+t.length)%t.length,this._scrollToActive())):e.key===`Enter`?(e.preventDefault(),this._open?this._activeIndex>=0&&this._activeIndex<t.length&&this._selectOption(t[this._activeIndex]):this._openDropdown()):e.key===`Escape`&&(e.preventDefault(),this._closeDropdown())}_scrollToActive(){setTimeout(()=>{let e=this.shadowRoot?.querySelector(`.option-item.active-nav`);e&&e.scrollIntoView({block:`nearest`})},0)}_getFlatOptions(e){let t=[],n=e=>{e.type===`option`?t.push(e):e.children.forEach(n)};return e.forEach(n),t}_getFilteredOptions(){let e=this._getFlatOptions(this._parsedOptions);if(!this._searchQuery)return e;let t=this._searchQuery.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(t)||e.value.toLowerCase().includes(t))}_getVisibleOptions(){let e=this._getFilteredOptions();return this._searchQuery?e:this.sheet||this._useInlineCategories?this._drilldownPath.length>0?this._drilldownPath[this._drilldownPath.length-1].children.filter(e=>e.type===`option`):this._parsedOptions.filter(e=>e.type===`option`):e}_renderRootList(){let e=0;return this._parsedOptions.map(t=>{if(t.type===`option`){let r=e++,i=t.value===this.value,a=this._drilldownPath.length===0&&r===this._activeIndex;return n`
+					<li
+						class="option-item ${i?`selected`:``} ${a?`active-nav`:``} ${t.disabled?`disabled`:``}"
+						@click=${()=>this._selectOption(t)}
+					>
+						${t.label}
+					</li>
+				`}return n`
+				<li class="group-header" @click=${e=>{e.stopPropagation(),this._drilldownPath=[...this._drilldownPath,t]}}>
+					<span>${t.label}</span>
+					<moni-icon name="chevron_right" style="margin-inline-start: auto; font-size: 1.125rem;"></moni-icon>
+				</li>
+			`})}_renderSubcategoryList(){if(this._drilldownPath.length===0)return t;let e=this._drilldownPath[this._drilldownPath.length-1],r=0;return n`
+			<li class="group-header" @click=${e=>{e.stopPropagation(),this._drilldownPath=this._drilldownPath.slice(0,-1)}}>
+				<moni-icon name="arrow_back" style="font-size: 1.25rem; margin-inline-end: 8px;"></moni-icon>
+				<span>Regresar</span>
+			</li>
+			<li class="group-header-flat">${e.label}</li>
+			${e.children.map(e=>{if(e.type===`option`){let t=r++,i=e.value===this.value,a=this._drilldownPath.length>0&&t===this._activeIndex;return n`
+						<li
+							class="option-item ${i?`selected`:``} ${a?`active-nav`:``} ${e.disabled?`disabled`:``}"
+							@click=${()=>this._selectOption(e)}
+						>
+							${e.label}
+						</li>
+					`}return n`
+					<li class="group-header" @click=${t=>{t.stopPropagation(),this._drilldownPath=[...this._drilldownPath,e]}}>
+						<span>${e.label}</span>
+						<moni-icon name="chevron_right" style="margin-inline-start: auto; font-size: 1.125rem;"></moni-icon>
+					</li>
+				`})}
+		`}_renderDesktopNode(e,t){if(e.type===`option`){let r=t.value++,i=e.value===this.value,a=r===this._activeIndex;return n`
+				<li
+					class="option-item ${i?`selected`:``} ${a?`active-nav`:``} ${e.disabled?`disabled`:``}"
+					@click=${()=>this._selectOption(e)}
+				>
+					${e.label}
+				</li>
+			`}return n`
+			<li 
+				class="group-header"
+				@mouseenter=${this._onSubmenuMouseEnter}
+				@click=${e=>e.stopPropagation()}
+			>
+				<span>${e.label}</span>
+				<moni-icon name="chevron_right" style="margin-inline-start: auto; font-size: 1.125rem;"></moni-icon>
+				
+				<ul class="submenu active open-right">
+					${e.children.map(e=>this._renderDesktopNode(e,t))}
+				</ul>
+			</li>
+		`}_renderOptionsList(e){if(this._parsedOptions.length===0)return n`<li class="no-options">No options found</li>`;if(this._searchQuery){let r={};e.forEach(e=>{let t=e.group||``;r[t]||(r[t]=[]),r[t].push(e)});let i=0;return Object.entries(r).map(([e,r])=>n`
+				${e?n`<li class="group-header-flat">${e}</li>`:t}
+				${r.map(e=>{let t=i++,r=e.value===this.value,a=t===this._activeIndex;return n`
+						<li
+							class="option-item ${r?`selected`:``} ${a?`active-nav`:``} ${e.disabled?`disabled`:``}"
+							@click=${()=>this._selectOption(e)}
+						>
+							${e.label}
+						</li>
+					`})}
+			`)}if(this.sheet||this._useInlineCategories){let e=this._drilldownPath.length===0,t=!e;return n`
+				<div class="drilldown-wrapper">
+					<div class="drilldown-track ${this._drilldownPath.length>0?`slide-active`:``}">
+						<ul class="drilldown-panel ${e?`panel-active`:`panel-inactive`}">
+							${this._renderRootList()}
+						</ul>
+						<ul class="drilldown-panel ${t?`panel-active`:`panel-inactive`}">
+							${this._renderSubcategoryList()}
+						</ul>
+					</div>
+				</div>
+			`}let r={value:0};return this._parsedOptions.map(e=>this._renderDesktopNode(e,r))}render(){let e=!!this.icon,r=this._getFilteredOptions(),i=this._findOptionByValue(this.value),a=this._open&&this.searchable&&!this.sheet?this._searchQuery:i?i.label:``,o=!!(a||this.placeholder),s={field:!0,label:!!this.label,fill:this.variant===`filled`,border:this.variant===`outlined`,small:this.size===`small`,large:this.size===`large`,extra:this.size===`extra`,prefix:e,suffix:!0,invalid:this.error,round:this.shape===`round`,square:this.shape===`no-round`},c=this.icon?n`<i class="leading-icon" part="leading-icon"
+					><moni-icon name="${this.icon}"></moni-icon
+				></i>`:t,l=this.loading?n`<i class="trailing-icon" part="trailing-icon"
+					><moni-progress
+						variant="circular"
+						indeterminate
+						size="small"
+						style="inline-size: 1.25rem; block-size: 1.25rem; color: currentColor;"
+					></moni-progress
+				></i>`:n`<i class="trailing-icon" part="trailing-icon" @click=${this._toggleDropdown}
+					><moni-icon name="${this.trailingIcon}"></moni-icon
+				></i>`,u=this._parsedOptions.some(e=>e.type===`group`)&&!this._searchQuery&&!this._useInlineCategories,d={"dropdown-menu":!0,open:this._open,scrollable:!u,searching:!!this._searchQuery,"inline-categories":this._useInlineCategories,"placement-top":this._actualPlacement===`top`,"placement-bottom":this._actualPlacement===`bottom`,"placement-left":this._actualPlacement===`left`,"placement-right":this._actualPlacement===`right`};return n`<div class=${p(s)} part="field">
+			${c}
+			<input
+				type="text"
+				part="input"
+				.value=${a}
+				?readonly=${!this.searchable||this.sheet}
+				?disabled=${this.disabled}
+				inputmode=${f(!this.searchable||this.sheet?`none`:void 0)}
+				placeholder=${this.placeholder||``}
+				class=${o?`active`:``}
+				@click=${this._onInputClick}
+				@input=${this._onSearchInput}
+				@keydown=${this._onKeyDown}
+			/>
+			${this.label?n`<label
+						part="label"
+						class=${p({active:o})}
+						>${this.label}</label
+					>`:t}
+			${l}
+			
+			${this.sheet?n`
+					<div class="sheet-backdrop ${this._open?`open`:``}" @click=${this._closeDropdown}>
+						<div class="sheet-drawer ${this._open?`open`:``}" @click=${e=>e.stopPropagation()}>
+							<div class="sheet-handle"></div>
+							${this.label?n`<div class="sheet-title">${this.label}</div>`:t}
+							${this.searchable?n`
+									<div class="sheet-search-wrapper">
+										<input
+											type="text"
+											class="sheet-search-input"
+											.value=${this._searchQuery}
+											placeholder="Buscar..."
+											@input=${this._onSearchInput}
+										/>
+									</div>
+								`:t}
+							<ul class="sheet-options-list">
+								${this._renderOptionsList(r)}
+							</ul>
+						</div>
+					</div>
+				`:n`
+					<ul
+						class=${p(d)}
+						part="menu"
+						popover=${this.positioning===`body`?`manual`:t}
+						style=${this._getMenuStyle()}
+					>
+						${this._renderOptionsList(r)}
+					</ul>
+				`}
+
+			<slot style="display: none;" @slotchange=${this._onSlotChange}></slot>
+
+			${this.error?n`<output part="helper" class="invalid"
+						>${this.errorText||this.helper}</output
+					>`:this.helper?n`<output part="helper">${this.helper}</output>`:t}
+		</div>`}};l([o({reflect:!0})],m.prototype,`name`,void 0),l([o({reflect:!0})],m.prototype,`label`,void 0),l([o({reflect:!0})],m.prototype,`variant`,void 0),l([o({reflect:!0})],m.prototype,`size`,void 0),l([o({reflect:!0})],m.prototype,`shape`,void 0),l([o({type:Boolean,reflect:!0})],m.prototype,`disabled`,void 0),l([o({type:Boolean,reflect:!0})],m.prototype,`loading`,void 0),l([o({reflect:!0})],m.prototype,`helper`,void 0),l([o({reflect:!0,attribute:`error-text`})],m.prototype,`errorText`,void 0),l([o({type:Boolean,reflect:!0})],m.prototype,`error`,void 0),l([o({reflect:!0})],m.prototype,`value`,void 0),l([o({reflect:!0})],m.prototype,`icon`,void 0),l([o({reflect:!0,attribute:`trailing-icon`})],m.prototype,`trailingIcon`,void 0),l([o({type:Boolean,reflect:!0})],m.prototype,`searchable`,void 0),l([o({type:Boolean,reflect:!0})],m.prototype,`clearable`,void 0),l([o({type:Boolean,reflect:!0})],m.prototype,`sheet`,void 0),l([o({reflect:!0})],m.prototype,`placeholder`,void 0),l([o({reflect:!0})],m.prototype,`positioning`,void 0),l([o({reflect:!0})],m.prototype,`placement`,void 0),l([o({reflect:!0,attribute:`dropdown-width`})],m.prototype,`dropdownWidth`,void 0),l([o({reflect:!0,attribute:`dropdown-max-height`})],m.prototype,`dropdownMaxHeight`,void 0),l([e()],m.prototype,`_open`,void 0),l([e()],m.prototype,`_searchQuery`,void 0),l([e()],m.prototype,`_actualPlacement`,void 0),l([e()],m.prototype,`_parsedOptions`,void 0),l([e()],m.prototype,`_activeIndex`,void 0),l([e()],m.prototype,`_menuStyle`,void 0),l([e()],m.prototype,`_menuMaxHeight`,void 0),l([e()],m.prototype,`_useInlineCategories`,void 0),l([e()],m.prototype,`_drilldownPath`,void 0),l([u(`slot`)],m.prototype,`_slot`,void 0),l([u(`input`)],m.prototype,`_input`,void 0),l([u(`.dropdown-menu`)],m.prototype,`_menu`,void 0),m=l([c(`moni-select`)],m);