@moni-labs/moni-ui 0.4.13 → 0.4.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/custom-elements.json +91 -81
  2. package/dist/browser/moni-ui.iife.min.js +1537 -1384
  3. package/dist/browser/moni-ui.iife.min.js.br +0 -0
  4. package/dist/browser/moni-ui.iife.min.js.gz +0 -0
  5. package/dist/browser/moni-ui.iife.min.js.map +1 -1
  6. package/dist/browser/moni-ui.min.js +2703 -2481
  7. package/dist/browser/moni-ui.min.js.br +0 -0
  8. package/dist/browser/moni-ui.min.js.gz +0 -0
  9. package/dist/browser/moni-ui.min.js.map +1 -1
  10. package/dist/cdn/chunks/{class-map-DsL1Jr2T.js → class-map-QyT9W7rZ.js} +1 -1
  11. package/dist/cdn/chunks/{decorate-DxJYS4gw.js → decorate-B7wZvwrn.js} +629 -543
  12. package/dist/cdn/chunks/if-defined-5hr_ccFw.js +1 -0
  13. package/dist/cdn/chunks/{live-D52JqeKf.js → live-Hm1Di_ND.js} +1 -1
  14. package/dist/cdn/components/moni-app-bar.js +1 -1
  15. package/dist/cdn/components/moni-badge.js +1 -1
  16. package/dist/cdn/components/moni-bottom-sheet.js +1 -1
  17. package/dist/cdn/components/moni-button-group.js +1 -1
  18. package/dist/cdn/components/moni-button-segment.js +1 -1
  19. package/dist/cdn/components/moni-button.js +1 -1
  20. package/dist/cdn/components/moni-card.js +1 -1
  21. package/dist/cdn/components/moni-carousel.js +1 -1
  22. package/dist/cdn/components/moni-checkbox.js +1 -1
  23. package/dist/cdn/components/moni-chip.js +1 -1
  24. package/dist/cdn/components/moni-color-field.js +1 -1
  25. package/dist/cdn/components/moni-context-menu.js +1 -1
  26. package/dist/cdn/components/moni-dialog.js +1 -1
  27. package/dist/cdn/components/moni-divider.js +1 -1
  28. package/dist/cdn/components/moni-expansion.js +1 -1
  29. package/dist/cdn/components/moni-fab-menu.js +1 -1
  30. package/dist/cdn/components/moni-fab.js +1 -1
  31. package/dist/cdn/components/moni-file-field.js +1 -1
  32. package/dist/cdn/components/moni-icon.js +1 -1
  33. package/dist/cdn/components/moni-list-item.js +1 -1
  34. package/dist/cdn/components/moni-list.js +1 -1
  35. package/dist/cdn/components/moni-loading-indicator.js +1 -1
  36. package/dist/cdn/components/moni-menu-item.js +1 -1
  37. package/dist/cdn/components/moni-menu.js +1 -1
  38. package/dist/cdn/components/moni-morph-modal.js +3 -2
  39. package/dist/cdn/components/moni-nav-item.js +1 -1
  40. package/dist/cdn/components/moni-nav.js +1 -1
  41. package/dist/cdn/components/moni-progress.js +1 -1
  42. package/dist/cdn/components/moni-radio.js +1 -1
  43. package/dist/cdn/components/moni-ripple.js +1 -1
  44. package/dist/cdn/components/moni-segmented-button.js +1 -1
  45. package/dist/cdn/components/moni-select-option.js +1 -1
  46. package/dist/cdn/components/moni-select.js +512 -473
  47. package/dist/cdn/components/moni-shape.js +1 -1
  48. package/dist/cdn/components/moni-side-sheet.js +1 -1
  49. package/dist/cdn/components/moni-slider.js +1 -1
  50. package/dist/cdn/components/moni-snackbar.js +1 -1
  51. package/dist/cdn/components/moni-split-button.js +1 -1
  52. package/dist/cdn/components/moni-step.js +1 -1
  53. package/dist/cdn/components/moni-stepper.js +1 -1
  54. package/dist/cdn/components/moni-switch.js +1 -1
  55. package/dist/cdn/components/moni-tab.js +1 -1
  56. package/dist/cdn/components/moni-tabs.js +1 -1
  57. package/dist/cdn/components/moni-text-field.js +122 -95
  58. package/dist/cdn/components/moni-textarea.js +52 -52
  59. package/dist/cdn/components/moni-time-picker.js +1 -1
  60. package/dist/cdn/components/moni-toolbar.js +1 -1
  61. package/dist/cdn/components/moni-tooltip.js +1 -1
  62. package/dist/cdn/components/moni-typography.js +1 -1
  63. package/dist/cdn/importmap.json +98 -98
  64. package/dist/components/_base/field-styles.d.ts.map +1 -1
  65. package/dist/components/_base/field-styles.js +662 -576
  66. package/dist/components/moni-morph-modal.d.ts +10 -0
  67. package/dist/components/moni-morph-modal.d.ts.map +1 -1
  68. package/dist/components/moni-morph-modal.js +323 -217
  69. package/dist/components/moni-select.d.ts +16 -16
  70. package/dist/components/moni-select.d.ts.map +1 -1
  71. package/dist/components/moni-select.js +797 -727
  72. package/dist/components/moni-text-field.d.ts +15 -15
  73. package/dist/components/moni-text-field.d.ts.map +1 -1
  74. package/dist/components/moni-text-field.js +224 -180
  75. package/dist/components/moni-textarea.d.ts +13 -13
  76. package/dist/components/moni-textarea.d.ts.map +1 -1
  77. package/dist/components/moni-textarea.js +127 -122
  78. package/docs/api.json +97 -88
  79. package/docs/assets/moni-morph-modal/autoHeight--false.png +0 -0
  80. package/docs/assets/moni-morph-modal/autoHeight--true.png +0 -0
  81. package/docs/components/morph-modal.md +16 -7
  82. package/docs/components/select.md +74 -74
  83. package/docs/components/text-field.md +75 -66
  84. package/docs/components/textarea.md +51 -51
  85. package/docs/llms.txt +3 -3
  86. package/package.json +1 -1
  87. package/src/components/_base/field-styles.ts +723 -637
  88. package/src/components/moni-morph-modal.test.ts +490 -413
  89. package/src/components/moni-morph-modal.ts +2274 -2162
  90. package/src/components/moni-select.test.ts +489 -466
  91. package/src/components/moni-select.ts +1963 -1815
  92. package/src/components/moni-text-field.test.ts +366 -342
  93. package/src/components/moni-text-field.ts +717 -645
  94. package/src/components/moni-textarea.test.ts +201 -197
  95. package/src/components/moni-textarea.ts +476 -460
  96. package/dist/cdn/chunks/if-defined-DdzvcoI7.js +0 -1
@@ -1,336 +1,340 @@
1
- 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-DxJYS4gw.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-DdzvcoI7.js";import"./moni-progress.js";import{t as p}from"../chunks/class-map-DsL1Jr2T.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.required=!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()}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}_syncValidity(){if(this._internals?.setValidity){if(this.required&&!this.value){this._internals.setValidity({valueMissing:!0},`Selecciona una opción.`,this._input??void 0);return}this._internals.setValidity({})}}static{this.styles=[s,a,i`
2
- :host {
3
- position: relative;
4
- display: block;
5
- }
6
-
7
- .field {
8
- cursor: pointer;
9
- }
10
-
11
- input[type='text'] {
12
- cursor: pointer;
13
- width: 100%;
14
- }
15
-
16
- input[type='text'][readonly] {
17
- caret-color: transparent;
18
- user-select: none;
19
- }
20
-
21
- /* Dropdown menu overlay */
22
- .dropdown-menu {
23
- position: absolute;
24
- top: 100%;
25
- left: 0;
26
- right: 0;
27
- z-index: 100;
28
- background-color: var(--surface-container);
29
- box-shadow: var(--elevate3);
30
- border-radius: 0.5rem;
31
- margin-top: 4px;
32
- padding: 4px 0;
33
- list-style: none;
34
- opacity: 0;
35
- visibility: hidden;
36
- transform: scale(0.95) translateY(-8px);
37
- transform-origin: top;
38
- transition:
39
- opacity var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1),
40
- transform var(--speed3) cubic-bezier(0.34, 1.56, 0.64, 1),
41
- visibility var(--speed3);
42
- }
43
-
44
- .dropdown-menu.open {
45
- opacity: 1;
46
- visibility: visible;
47
- transform: scale(1) translateY(0);
48
- }
49
-
50
- /* positioning="body" promotes the menu to the browser's top layer.
1
+ 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-B7wZvwrn.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-5hr_ccFw.js";import"./moni-progress.js";import{t as p}from"../chunks/class-map-QyT9W7rZ.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.required=!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()}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}_syncValidity(){if(this._internals?.setValidity){if(this.required&&!this.value){this._internals.setValidity({valueMissing:!0},`Selecciona una opción.`,this._input??void 0);return}this._internals.setValidity({})}}static{this.styles=[s,a,i`
2
+ :host {
3
+ position: relative;
4
+ display: block;
5
+ }
6
+
7
+ .field {
8
+ cursor: pointer;
9
+ }
10
+
11
+ input[type="text"] {
12
+ cursor: pointer;
13
+ width: 100%;
14
+ }
15
+
16
+ input[type="text"][readonly] {
17
+ caret-color: transparent;
18
+ user-select: none;
19
+ }
20
+
21
+ /* Dropdown menu overlay */
22
+ .dropdown-menu {
23
+ position: absolute;
24
+ top: 100%;
25
+ left: 0;
26
+ right: 0;
27
+ z-index: 100;
28
+ background-color: var(--surface-container);
29
+ box-shadow: var(--elevate3);
30
+ border-radius: 0.5rem;
31
+ margin-top: 4px;
32
+ padding: 4px 0;
33
+ list-style: none;
34
+ opacity: 0;
35
+ visibility: hidden;
36
+ transform: scale(0.95) translateY(-8px);
37
+ transform-origin: top;
38
+ transition:
39
+ opacity var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1),
40
+ transform var(--speed3) cubic-bezier(0.34, 1.56, 0.64, 1),
41
+ visibility var(--speed3);
42
+ }
43
+
44
+ .dropdown-menu.open {
45
+ opacity: 1;
46
+ visibility: visible;
47
+ transform: scale(1) translateY(0);
48
+ }
49
+
50
+ /* positioning="body" promotes the menu to the browser's top layer.
51
51
  Reset the Popover UA box while retaining Shadow DOM styles. */
52
- .dropdown-menu[popover] {
53
- margin: 0;
54
- border: 0;
55
- }
56
-
57
- .dropdown-menu.placement-top {
58
- top: auto;
59
- bottom: 100%;
60
- margin-top: 0;
61
- margin-bottom: 4px;
62
- transform-origin: bottom;
63
- transform: scale(0.95) translateY(8px);
64
- }
65
-
66
- .dropdown-menu.placement-top.open {
67
- transform: scale(1) translateY(0);
68
- }
69
-
70
- .dropdown-menu.placement-left {
71
- top: 0;
72
- left: auto;
73
- right: 100%;
74
- margin-top: 0;
75
- margin-right: 4px;
76
- transform-origin: right center;
77
- transform: scale(0.95) translateX(8px);
78
- }
79
-
80
- .dropdown-menu.placement-left.open {
81
- transform: scale(1) translateX(0);
82
- }
83
-
84
- .dropdown-menu.placement-right {
85
- top: 0;
86
- left: 100%;
87
- right: auto;
88
- margin-top: 0;
89
- margin-left: 4px;
90
- transform-origin: left center;
91
- transform: scale(0.95) translateX(-8px);
92
- }
93
-
94
- .dropdown-menu.placement-right.open {
95
- transform: scale(1) translateX(0);
96
- }
97
-
98
- .dropdown-menu.open.scrollable {
99
- overflow-x: hidden;
100
- overflow-y: auto;
101
- overscroll-behavior: contain;
102
- }
103
-
104
- /* Desktop category flyouts need visible overflow. If the root list no
52
+ .dropdown-menu[popover] {
53
+ margin: 0;
54
+ border: 0;
55
+ }
56
+
57
+ .dropdown-menu.placement-top {
58
+ top: auto;
59
+ bottom: 100%;
60
+ margin-top: 0;
61
+ margin-bottom: 4px;
62
+ transform-origin: bottom;
63
+ transform: scale(0.95) translateY(8px);
64
+ }
65
+
66
+ .dropdown-menu.placement-top.open {
67
+ transform: scale(1) translateY(0);
68
+ }
69
+
70
+ .dropdown-menu.placement-left {
71
+ top: 0;
72
+ left: auto;
73
+ right: 100%;
74
+ margin-top: 0;
75
+ margin-right: 4px;
76
+ transform-origin: right center;
77
+ transform: scale(0.95) translateX(8px);
78
+ }
79
+
80
+ .dropdown-menu.placement-left.open {
81
+ transform: scale(1) translateX(0);
82
+ }
83
+
84
+ .dropdown-menu.placement-right {
85
+ top: 0;
86
+ left: 100%;
87
+ right: auto;
88
+ margin-top: 0;
89
+ margin-left: 4px;
90
+ transform-origin: left center;
91
+ transform: scale(0.95) translateX(-8px);
92
+ }
93
+
94
+ .dropdown-menu.placement-right.open {
95
+ transform: scale(1) translateX(0);
96
+ }
97
+
98
+ .dropdown-menu.open.scrollable {
99
+ overflow-x: hidden;
100
+ overflow-y: auto;
101
+ overscroll-behavior: contain;
102
+ }
103
+
104
+ /* Desktop category flyouts need visible overflow. If the root list no
105
105
  longer fits, the component switches to the inline drilldown layout. */
106
- .dropdown-menu.open:not(.scrollable) {
107
- overflow: visible;
108
- }
109
-
110
- /* Bottom sheet drawer styles */
111
- .sheet-backdrop {
112
- position: fixed;
113
- inset: 0;
114
- z-index: 1000;
115
- background-color: rgba(0, 0, 0, 0.4);
116
- opacity: 0;
117
- visibility: hidden;
118
- transition: opacity var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1), visibility var(--speed3);
119
- display: flex;
120
- flex-direction: column;
121
- justify-content: flex-end;
122
- }
123
-
124
- .sheet-backdrop.open {
125
- opacity: 1;
126
- visibility: visible;
127
- }
128
-
129
- .sheet-drawer {
130
- background-color: var(--surface-container);
131
- border-radius: 1.75rem 1.75rem 0 0;
132
- box-shadow: var(--elevate3);
133
- max-height: 70vh;
134
- display: flex;
135
- flex-direction: column;
136
- transform: translateY(100%);
137
- transition: transform var(--speed3) cubic-bezier(0.16, 1, 0.3, 1);
138
- padding: 16px 0;
139
- }
140
-
141
- .sheet-drawer.open {
142
- transform: translateY(0);
143
- }
144
-
145
- .sheet-handle {
146
- width: 40px;
147
- height: 4px;
148
- background-color: var(--outline-variant);
149
- border-radius: 2px;
150
- margin: 0 auto 16px;
151
- }
152
-
153
- .sheet-title {
154
- padding: 0 24px 8px;
155
- font-size: 1.125rem;
156
- font-weight: 700;
157
- color: var(--on-surface);
158
- }
159
-
160
- .sheet-search-wrapper {
161
- padding: 0 16px 12px;
162
- }
163
-
164
- .sheet-search-input {
165
- width: 100%;
166
- box-sizing: border-box;
167
- padding: 10px 16px;
168
- border: 1px solid var(--outline);
169
- border-radius: 9999px;
170
- background: var(--surface-container-high);
171
- color: var(--on-surface);
172
- font-size: 1rem;
173
- outline: none;
174
- }
175
-
176
- .sheet-search-input:focus {
177
- border-color: var(--primary);
178
- }
179
-
180
- .sheet-options-list {
181
- list-style: none;
182
- padding: 0;
183
- margin: 0;
184
- overflow-y: auto;
185
- flex: 1;
186
- }
187
-
188
- /* Animated Drilldown Slide Layout */
189
- .drilldown-wrapper {
190
- width: 100%;
191
- overflow: hidden;
192
- position: relative;
193
- transition: height var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1);
194
- }
195
-
196
- .drilldown-track {
197
- display: flex;
198
- width: 200%;
199
- transition: transform var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1);
200
- }
201
-
202
- .drilldown-track.slide-active {
203
- transform: translateX(-50%);
204
- }
205
-
206
- .drilldown-panel {
207
- width: 50%;
208
- box-sizing: border-box;
209
- list-style: none;
210
- padding: 0;
211
- margin: 0;
212
- flex-shrink: 0;
213
- }
214
-
215
- .drilldown-panel.panel-active {
216
- max-height: none;
217
- }
218
-
219
- .drilldown-panel.panel-inactive {
220
- max-height: 0;
221
- overflow: hidden;
222
- }
223
-
224
- /* Group / Subcategory header (Browsing mode - acts as a hover trigger for submenus) */
225
- .group-header {
226
- padding: 8px 16px;
227
- font-size: 0.875rem;
228
- font-weight: 500;
229
- color: var(--on-surface);
230
- cursor: pointer;
231
- display: flex;
232
- align-items: center;
233
- position: relative;
234
- user-select: none;
235
- transition: background-color var(--speed2) ease, color var(--speed2) ease;
236
- }
237
-
238
- .group-header:hover,
239
- .group-header.active {
240
- background-color: var(--surface-container-high);
241
- color: var(--primary);
242
- }
243
-
244
- /* Inline header (Searching mode & Sheet mode - flat layout) */
245
- .group-header-flat {
246
- padding: 6px 16px;
247
- font-size: 0.75rem;
248
- font-weight: 700;
249
- text-transform: uppercase;
250
- color: var(--primary);
251
- letter-spacing: 0.05em;
252
- background-color: var(--surface-container-low);
253
- user-select: none;
254
- }
255
-
256
- /* Hierarchical sub-menu with premium flyout animation */
257
- .submenu {
258
- display: block;
259
- opacity: 0;
260
- visibility: hidden;
261
- position: absolute;
262
- top: 0;
263
- /* Intermediate flyouts must keep overflow visible so deeper
106
+ .dropdown-menu.open:not(.scrollable) {
107
+ overflow: visible;
108
+ }
109
+
110
+ /* Bottom sheet drawer styles */
111
+ .sheet-backdrop {
112
+ position: fixed;
113
+ inset: 0;
114
+ z-index: 1000;
115
+ background-color: rgba(0, 0, 0, 0.4);
116
+ opacity: 0;
117
+ visibility: hidden;
118
+ transition:
119
+ opacity var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1),
120
+ visibility var(--speed3);
121
+ display: flex;
122
+ flex-direction: column;
123
+ justify-content: flex-end;
124
+ }
125
+
126
+ .sheet-backdrop.open {
127
+ opacity: 1;
128
+ visibility: visible;
129
+ }
130
+
131
+ .sheet-drawer {
132
+ background-color: var(--surface-container);
133
+ border-radius: 1.75rem 1.75rem 0 0;
134
+ box-shadow: var(--elevate3);
135
+ max-height: 70vh;
136
+ display: flex;
137
+ flex-direction: column;
138
+ transform: translateY(100%);
139
+ transition: transform var(--speed3) cubic-bezier(0.16, 1, 0.3, 1);
140
+ padding: 16px 0;
141
+ }
142
+
143
+ .sheet-drawer.open {
144
+ transform: translateY(0);
145
+ }
146
+
147
+ .sheet-handle {
148
+ width: 40px;
149
+ height: 4px;
150
+ background-color: var(--outline-variant);
151
+ border-radius: 2px;
152
+ margin: 0 auto 16px;
153
+ }
154
+
155
+ .sheet-title {
156
+ padding: 0 24px 8px;
157
+ font-size: 1.125rem;
158
+ font-weight: 700;
159
+ color: var(--on-surface);
160
+ }
161
+
162
+ .sheet-search-wrapper {
163
+ padding: 0 16px 12px;
164
+ }
165
+
166
+ .sheet-search-input {
167
+ width: 100%;
168
+ box-sizing: border-box;
169
+ padding: 10px 16px;
170
+ border: 1px solid var(--outline);
171
+ border-radius: 9999px;
172
+ background: var(--surface-container-high);
173
+ color: var(--on-surface);
174
+ font-size: 1rem;
175
+ outline: none;
176
+ }
177
+
178
+ .sheet-search-input:focus {
179
+ border-color: var(--primary);
180
+ }
181
+
182
+ .sheet-options-list {
183
+ list-style: none;
184
+ padding: 0;
185
+ margin: 0;
186
+ overflow-y: auto;
187
+ flex: 1;
188
+ }
189
+
190
+ /* Animated Drilldown Slide Layout */
191
+ .drilldown-wrapper {
192
+ width: 100%;
193
+ overflow: hidden;
194
+ position: relative;
195
+ transition: height var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1);
196
+ }
197
+
198
+ .drilldown-track {
199
+ display: flex;
200
+ width: 200%;
201
+ transition: transform var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1);
202
+ }
203
+
204
+ .drilldown-track.slide-active {
205
+ transform: translateX(-50%);
206
+ }
207
+
208
+ .drilldown-panel {
209
+ width: 50%;
210
+ box-sizing: border-box;
211
+ list-style: none;
212
+ padding: 0;
213
+ margin: 0;
214
+ flex-shrink: 0;
215
+ }
216
+
217
+ .drilldown-panel.panel-active {
218
+ max-height: none;
219
+ }
220
+
221
+ .drilldown-panel.panel-inactive {
222
+ max-height: 0;
223
+ overflow: hidden;
224
+ }
225
+
226
+ /* Group / Subcategory header (Browsing mode - acts as a hover trigger for submenus) */
227
+ .group-header {
228
+ padding: 8px 16px;
229
+ font-size: 0.875rem;
230
+ font-weight: 500;
231
+ color: var(--on-surface);
232
+ cursor: pointer;
233
+ display: flex;
234
+ align-items: center;
235
+ position: relative;
236
+ user-select: none;
237
+ transition:
238
+ background-color var(--speed2) ease,
239
+ color var(--speed2) ease;
240
+ }
241
+
242
+ .group-header:hover,
243
+ .group-header.active {
244
+ background-color: var(--surface-container-high);
245
+ color: var(--primary);
246
+ }
247
+
248
+ /* Inline header (Searching mode & Sheet mode - flat layout) */
249
+ .group-header-flat {
250
+ padding: 6px 16px;
251
+ font-size: 0.75rem;
252
+ font-weight: 700;
253
+ text-transform: uppercase;
254
+ color: var(--primary);
255
+ letter-spacing: 0.05em;
256
+ background-color: var(--surface-container-low);
257
+ user-select: none;
258
+ }
259
+
260
+ /* Hierarchical sub-menu with premium flyout animation */
261
+ .submenu {
262
+ display: block;
263
+ opacity: 0;
264
+ visibility: hidden;
265
+ position: absolute;
266
+ top: 0;
267
+ /* Intermediate flyouts must keep overflow visible so deeper
264
268
  subcategories are never clipped. Oversized trees switch to the
265
269
  scrollable inline drilldown layout before rendering. */
266
- overflow: visible;
267
- background-color: var(--surface-container-highest);
268
- box-shadow: var(--elevate3);
269
- border-radius: 0.5rem;
270
- padding: 4px 0;
271
- list-style: none;
272
- min-width: 160px;
273
- z-index: 110;
274
- transition:
275
- opacity var(--speed2) cubic-bezier(0.2, 0.8, 0.2, 1),
276
- transform var(--speed2) cubic-bezier(0.34, 1.56, 0.64, 1),
277
- visibility var(--speed2);
278
- }
279
-
280
- .submenu.open-right {
281
- left: 100%;
282
- margin-left: 2px;
283
- transform: scale(0.9) translateX(-10px);
284
- transform-origin: top left;
285
- }
286
-
287
- .submenu.open-left {
288
- right: 100%;
289
- margin-right: 2px;
290
- transform: scale(0.9) translateX(10px);
291
- transform-origin: top right;
292
- }
293
-
294
- .group-header:hover > .submenu.active,
295
- .group-header.active > .submenu.active {
296
- opacity: 1;
297
- visibility: visible;
298
- transform: scale(1) translateX(0);
299
- }
300
-
301
- .option-item {
302
- cursor: pointer;
303
- padding: 8px 16px;
304
- font-size: 0.875rem;
305
- color: var(--on-surface);
306
- display: flex;
307
- align-items: center;
308
- transition: background-color var(--speed2) ease;
309
- }
310
-
311
- .option-item:hover,
312
- .option-item.active-nav {
313
- background-color: var(--surface-container-high);
314
- }
315
-
316
- .option-item.selected {
317
- background-color: var(--tertiary-container);
318
- color: var(--on-tertiary-container);
319
- font-weight: 500;
320
- }
321
-
322
- .option-item.disabled {
323
- opacity: 0.5;
324
- pointer-events: none;
325
- }
326
-
327
- .no-options {
328
- padding: 12px 16px;
329
- font-size: 0.875rem;
330
- color: var(--outline);
331
- text-align: center;
332
- }
333
- `]}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),this._syncValidity(),(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=`
270
+ overflow: visible;
271
+ background-color: var(--surface-container-highest);
272
+ box-shadow: var(--elevate3);
273
+ border-radius: 0.5rem;
274
+ padding: 4px 0;
275
+ list-style: none;
276
+ min-width: 160px;
277
+ z-index: 110;
278
+ transition:
279
+ opacity var(--speed2) cubic-bezier(0.2, 0.8, 0.2, 1),
280
+ transform var(--speed2) cubic-bezier(0.34, 1.56, 0.64, 1),
281
+ visibility var(--speed2);
282
+ }
283
+
284
+ .submenu.open-right {
285
+ left: 100%;
286
+ margin-left: 2px;
287
+ transform: scale(0.9) translateX(-10px);
288
+ transform-origin: top left;
289
+ }
290
+
291
+ .submenu.open-left {
292
+ right: 100%;
293
+ margin-right: 2px;
294
+ transform: scale(0.9) translateX(10px);
295
+ transform-origin: top right;
296
+ }
297
+
298
+ .group-header:hover > .submenu.active,
299
+ .group-header.active > .submenu.active {
300
+ opacity: 1;
301
+ visibility: visible;
302
+ transform: scale(1) translateX(0);
303
+ }
304
+
305
+ .option-item {
306
+ cursor: pointer;
307
+ padding: 8px 16px;
308
+ font-size: 0.875rem;
309
+ color: var(--on-surface);
310
+ display: flex;
311
+ align-items: center;
312
+ transition: background-color var(--speed2) ease;
313
+ }
314
+
315
+ .option-item:hover,
316
+ .option-item.active-nav {
317
+ background-color: var(--surface-container-high);
318
+ }
319
+
320
+ .option-item.selected {
321
+ background-color: var(--tertiary-container);
322
+ color: var(--on-tertiary-container);
323
+ font-weight: 500;
324
+ }
325
+
326
+ .option-item.disabled {
327
+ opacity: 0.5;
328
+ pointer-events: none;
329
+ }
330
+
331
+ .no-options {
332
+ padding: 12px 16px;
333
+ font-size: 0.875rem;
334
+ color: var(--outline);
335
+ text-align: center;
336
+ }
337
+ `]}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),this._syncValidity(),(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=`
334
338
  position: fixed;
335
339
  bottom: ${window.innerHeight-e.top}px;
336
340
  left: ${e.left}px;
@@ -359,147 +363,182 @@ 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"../
359
363
  right: auto;
360
364
  bottom: auto;
361
365
  `}}_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`
362
- <li
363
- class="option-item ${i?`selected`:``} ${a?`active-nav`:``} ${t.disabled?`disabled`:``}"
364
- @click=${()=>this._selectOption(t)}
365
- >
366
- ${t.label}
367
- </li>
368
- `}return n`
369
- <li class="group-header" @click=${e=>{e.stopPropagation(),this._drilldownPath=[...this._drilldownPath,t]}}>
370
- <span>${t.label}</span>
371
- <moni-icon name="chevron_right" style="margin-inline-start: auto; font-size: 1.125rem;"></moni-icon>
372
- </li>
373
- `})}_renderSubcategoryList(){if(this._drilldownPath.length===0)return t;let e=this._drilldownPath[this._drilldownPath.length-1],r=0;return n`
374
- <li class="group-header" @click=${e=>{e.stopPropagation(),this._drilldownPath=this._drilldownPath.slice(0,-1)}}>
375
- <moni-icon name="arrow_back" style="font-size: 1.25rem; margin-inline-end: 8px;"></moni-icon>
376
- <span>Regresar</span>
377
- </li>
378
- <li class="group-header-flat">${e.label}</li>
379
- ${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`
380
- <li
381
- class="option-item ${i?`selected`:``} ${a?`active-nav`:``} ${e.disabled?`disabled`:``}"
382
- @click=${()=>this._selectOption(e)}
383
- >
384
- ${e.label}
385
- </li>
386
- `}return n`
387
- <li class="group-header" @click=${t=>{t.stopPropagation(),this._drilldownPath=[...this._drilldownPath,e]}}>
388
- <span>${e.label}</span>
389
- <moni-icon name="chevron_right" style="margin-inline-start: auto; font-size: 1.125rem;"></moni-icon>
390
- </li>
391
- `})}
392
- `}_renderDesktopNode(e,t){if(e.type===`option`){let r=t.value++,i=e.value===this.value,a=r===this._activeIndex;return n`
393
- <li
394
- class="option-item ${i?`selected`:``} ${a?`active-nav`:``} ${e.disabled?`disabled`:``}"
395
- @click=${()=>this._selectOption(e)}
396
- >
397
- ${e.label}
398
- </li>
399
- `}return n`
400
- <li
401
- class="group-header"
402
- @mouseenter=${this._onSubmenuMouseEnter}
403
- @click=${e=>e.stopPropagation()}
404
- >
405
- <span>${e.label}</span>
406
- <moni-icon name="chevron_right" style="margin-inline-start: auto; font-size: 1.125rem;"></moni-icon>
407
-
408
- <ul class="submenu active open-right">
409
- ${e.children.map(e=>this._renderDesktopNode(e,t))}
410
- </ul>
411
- </li>
412
- `}_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`
413
- ${e?n`<li class="group-header-flat">${e}</li>`:t}
414
- ${r.map(e=>{let t=i++,r=e.value===this.value,a=t===this._activeIndex;return n`
415
- <li
416
- class="option-item ${r?`selected`:``} ${a?`active-nav`:``} ${e.disabled?`disabled`:``}"
417
- @click=${()=>this._selectOption(e)}
418
- >
419
- ${e.label}
420
- </li>
421
- `})}
422
- `)}if(this.sheet||this._useInlineCategories){let e=this._drilldownPath.length===0,t=!e;return n`
423
- <div class="drilldown-wrapper">
424
- <div class="drilldown-track ${this._drilldownPath.length>0?`slide-active`:``}">
425
- <ul class="drilldown-panel ${e?`panel-active`:`panel-inactive`}">
426
- ${this._renderRootList()}
427
- </ul>
428
- <ul class="drilldown-panel ${t?`panel-active`:`panel-inactive`}">
429
- ${this._renderSubcategoryList()}
430
- </ul>
431
- </div>
432
- </div>
433
- `}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`,"small-round":this.shape===`small-round`,square:this.shape===`no-round`},c=this.icon?n`<i class="leading-icon" part="leading-icon"
434
- ><moni-icon name="${this.icon}"></moni-icon
435
- ></i>`:t,l=this.loading?n`<i class="trailing-icon" part="trailing-icon"
436
- ><moni-progress
437
- variant="circular"
438
- indeterminate
439
- size="small"
440
- style="inline-size: 1.25rem; block-size: 1.25rem; color: currentColor;"
441
- ></moni-progress
442
- ></i>`:n`<i class="trailing-icon" part="trailing-icon" @click=${this._toggleDropdown}
443
- ><moni-icon name="${this.trailingIcon}"></moni-icon
444
- ></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">
445
- ${c}
446
- <input
447
- id="input"
448
- type="text"
449
- part="input"
450
- .value=${a}
451
- ?readonly=${!this.searchable||this.sheet}
452
- ?disabled=${this.disabled}
453
- inputmode=${f(!this.searchable||this.sheet?`none`:void 0)}
454
- placeholder=${this.placeholder||``}
455
- class=${o?`active`:``}
456
- @click=${this._onInputClick}
457
- @input=${this._onSearchInput}
458
- @keydown=${this._onKeyDown}
459
- />
460
- ${this.label?n`<label
461
- for="input"
462
- part="label"
463
- class=${p({active:o})}
464
- >${this.label}</label
465
- >`:t}
466
- ${l}
467
-
468
- ${this.sheet?n`
469
- <div class="sheet-backdrop ${this._open?`open`:``}" @click=${this._closeDropdown}>
470
- <div class="sheet-drawer ${this._open?`open`:``}" @click=${e=>e.stopPropagation()}>
471
- <div class="sheet-handle"></div>
472
- ${this.label?n`<div class="sheet-title">${this.label}</div>`:t}
473
- ${this.searchable?n`
474
- <div class="sheet-search-wrapper">
475
- <input
476
- type="text"
477
- class="sheet-search-input"
478
- .value=${this._searchQuery}
479
- placeholder="Buscar..."
480
- @input=${this._onSearchInput}
481
- />
482
- </div>
483
- `:t}
484
- <ul class="sheet-options-list">
485
- ${this._renderOptionsList(r)}
486
- </ul>
487
- </div>
488
- </div>
489
- `:n`
490
- <ul
491
- class=${p(d)}
492
- part="menu"
493
- popover=${this.positioning===`body`?`manual`:t}
494
- style=${this._getMenuStyle()}
495
- >
496
- ${this._renderOptionsList(r)}
497
- </ul>
498
- `}
499
-
500
- <slot style="display: none;" @slotchange=${this._onSlotChange}></slot>
501
-
502
- ${this.error?n`<output part="helper" class="invalid"
503
- >${this.errorText||this.helper}</output
504
- >`:this.helper?n`<output part="helper">${this.helper}</output>`:t}
505
- </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,`required`,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);
366
+ <li
367
+ class="option-item ${i?`selected`:``} ${a?`active-nav`:``} ${t.disabled?`disabled`:``}"
368
+ @click=${()=>this._selectOption(t)}
369
+ >
370
+ ${t.label}
371
+ </li>
372
+ `}return n`
373
+ <li
374
+ class="group-header"
375
+ @click=${e=>{e.stopPropagation(),this._drilldownPath=[...this._drilldownPath,t]}}
376
+ >
377
+ <span>${t.label}</span>
378
+ <moni-icon
379
+ name="chevron_right"
380
+ style="margin-inline-start: auto; font-size: 1.125rem;"
381
+ ></moni-icon>
382
+ </li>
383
+ `})}_renderSubcategoryList(){if(this._drilldownPath.length===0)return t;let e=this._drilldownPath[this._drilldownPath.length-1],r=0;return n`
384
+ <li
385
+ class="group-header"
386
+ @click=${e=>{e.stopPropagation(),this._drilldownPath=this._drilldownPath.slice(0,-1)}}
387
+ >
388
+ <moni-icon
389
+ name="arrow_back"
390
+ style="font-size: 1.25rem; margin-inline-end: 8px;"
391
+ ></moni-icon>
392
+ <span>Regresar</span>
393
+ </li>
394
+ <li class="group-header-flat">${e.label}</li>
395
+ ${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`
396
+ <li
397
+ class="option-item ${i?`selected`:``} ${a?`active-nav`:``} ${e.disabled?`disabled`:``}"
398
+ @click=${()=>this._selectOption(e)}
399
+ >
400
+ ${e.label}
401
+ </li>
402
+ `}return n`
403
+ <li
404
+ class="group-header"
405
+ @click=${t=>{t.stopPropagation(),this._drilldownPath=[...this._drilldownPath,e]}}
406
+ >
407
+ <span>${e.label}</span>
408
+ <moni-icon
409
+ name="chevron_right"
410
+ style="margin-inline-start: auto; font-size: 1.125rem;"
411
+ ></moni-icon>
412
+ </li>
413
+ `})}
414
+ `}_renderDesktopNode(e,t){if(e.type===`option`){let r=t.value++,i=e.value===this.value,a=r===this._activeIndex;return n`
415
+ <li
416
+ class="option-item ${i?`selected`:``} ${a?`active-nav`:``} ${e.disabled?`disabled`:``}"
417
+ @click=${()=>this._selectOption(e)}
418
+ >
419
+ ${e.label}
420
+ </li>
421
+ `}return n`
422
+ <li
423
+ class="group-header"
424
+ @mouseenter=${this._onSubmenuMouseEnter}
425
+ @click=${e=>e.stopPropagation()}
426
+ >
427
+ <span>${e.label}</span>
428
+ <moni-icon
429
+ name="chevron_right"
430
+ style="margin-inline-start: auto; font-size: 1.125rem;"
431
+ ></moni-icon>
432
+
433
+ <ul class="submenu active open-right">
434
+ ${e.children.map(e=>this._renderDesktopNode(e,t))}
435
+ </ul>
436
+ </li>
437
+ `}_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`
438
+ ${e?n`<li class="group-header-flat">${e}</li>`:t}
439
+ ${r.map(e=>{let t=i++,r=e.value===this.value,a=t===this._activeIndex;return n`
440
+ <li
441
+ class="option-item ${r?`selected`:``} ${a?`active-nav`:``} ${e.disabled?`disabled`:``}"
442
+ @click=${()=>this._selectOption(e)}
443
+ >
444
+ ${e.label}
445
+ </li>
446
+ `})}
447
+ `)}if(this.sheet||this._useInlineCategories){let e=this._drilldownPath.length===0,t=!e;return n`
448
+ <div class="drilldown-wrapper">
449
+ <div
450
+ class="drilldown-track ${this._drilldownPath.length>0?`slide-active`:``}"
451
+ >
452
+ <ul
453
+ class="drilldown-panel ${e?`panel-active`:`panel-inactive`}"
454
+ >
455
+ ${this._renderRootList()}
456
+ </ul>
457
+ <ul
458
+ class="drilldown-panel ${t?`panel-active`:`panel-inactive`}"
459
+ >
460
+ ${this._renderSubcategoryList()}
461
+ </ul>
462
+ </div>
463
+ </div>
464
+ `}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`,"small-round":this.shape===`small-round`,square:this.shape===`no-round`},c=this.icon?n`<i class="leading-icon" part="leading-icon"
465
+ ><moni-icon name="${this.icon}"></moni-icon
466
+ ></i>`:t,l=this.loading?n`<i class="trailing-icon" part="trailing-icon"
467
+ ><moni-progress
468
+ variant="circular"
469
+ indeterminate
470
+ size="small"
471
+ style="inline-size: 1.25rem; block-size: 1.25rem; color: currentColor;"
472
+ ></moni-progress
473
+ ></i>`:n`<i
474
+ class="trailing-icon"
475
+ part="trailing-icon"
476
+ @click=${this._toggleDropdown}
477
+ ><moni-icon name="${this.trailingIcon}"></moni-icon
478
+ ></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">
479
+ ${c}
480
+ <input
481
+ id="input"
482
+ type="text"
483
+ part="input"
484
+ .value=${a}
485
+ ?readonly=${!this.searchable||this.sheet}
486
+ ?disabled=${this.disabled}
487
+ inputmode=${f(!this.searchable||this.sheet?`none`:void 0)}
488
+ placeholder=${this.placeholder||``}
489
+ class=${o?`active`:``}
490
+ @click=${this._onInputClick}
491
+ @input=${this._onSearchInput}
492
+ @keydown=${this._onKeyDown}
493
+ />
494
+ ${this.label?n`<label
495
+ for="input"
496
+ part="label"
497
+ class=${p({active:o})}
498
+ >${this.label}</label
499
+ >`:t}
500
+ ${l}
501
+ ${this.sheet?n`
502
+ <div
503
+ class="sheet-backdrop ${this._open?`open`:``}"
504
+ @click=${this._closeDropdown}
505
+ >
506
+ <div
507
+ class="sheet-drawer ${this._open?`open`:``}"
508
+ @click=${e=>e.stopPropagation()}
509
+ >
510
+ <div class="sheet-handle"></div>
511
+ ${this.label?n`<div class="sheet-title">${this.label}</div>`:t}
512
+ ${this.searchable?n`
513
+ <div class="sheet-search-wrapper">
514
+ <input
515
+ type="text"
516
+ class="sheet-search-input"
517
+ .value=${this._searchQuery}
518
+ placeholder="Buscar..."
519
+ @input=${this._onSearchInput}
520
+ />
521
+ </div>
522
+ `:t}
523
+ <ul class="sheet-options-list">
524
+ ${this._renderOptionsList(r)}
525
+ </ul>
526
+ </div>
527
+ </div>
528
+ `:n`
529
+ <ul
530
+ class=${p(d)}
531
+ part="menu"
532
+ popover=${this.positioning===`body`?`manual`:t}
533
+ style=${this._getMenuStyle()}
534
+ >
535
+ ${this._renderOptionsList(r)}
536
+ </ul>
537
+ `}
538
+
539
+ <slot style="display: none;" @slotchange=${this._onSlotChange}></slot>
540
+
541
+ ${this.error?n`<output part="helper" class="invalid"
542
+ >${this.errorText||this.helper}</output
543
+ >`:this.helper?n`<output part="helper">${this.helper}</output>`:t}
544
+ </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,`required`,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);