@m3e/web 2.5.5 → 2.5.7

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 (211) hide show
  1. package/README.md +1 -1
  2. package/dist/all.js +511 -248
  3. package/dist/all.js.map +1 -1
  4. package/dist/all.min.js +31 -31
  5. package/dist/all.min.js.map +1 -1
  6. package/dist/autocomplete.js +3 -3
  7. package/dist/autocomplete.js.map +1 -1
  8. package/dist/autocomplete.min.js.map +1 -1
  9. package/dist/bottom-sheet.js +5 -5
  10. package/dist/bottom-sheet.js.map +1 -1
  11. package/dist/bottom-sheet.min.js.map +1 -1
  12. package/dist/breadcrumb.js +1 -1
  13. package/dist/breadcrumb.js.map +1 -1
  14. package/dist/breadcrumb.min.js.map +1 -1
  15. package/dist/button.js +7 -8
  16. package/dist/button.js.map +1 -1
  17. package/dist/button.min.js +1 -1
  18. package/dist/button.min.js.map +1 -1
  19. package/dist/calendar.js +1 -1
  20. package/dist/calendar.js.map +1 -1
  21. package/dist/calendar.min.js.map +1 -1
  22. package/dist/card.js +1 -1
  23. package/dist/card.js.map +1 -1
  24. package/dist/card.min.js.map +1 -1
  25. package/dist/checkbox.js +10 -9
  26. package/dist/checkbox.js.map +1 -1
  27. package/dist/checkbox.min.js +1 -1
  28. package/dist/checkbox.min.js.map +1 -1
  29. package/dist/chips.js +17 -16
  30. package/dist/chips.js.map +1 -1
  31. package/dist/chips.min.js +1 -1
  32. package/dist/chips.min.js.map +1 -1
  33. package/dist/core.js +5 -5
  34. package/dist/core.js.map +1 -1
  35. package/dist/core.min.js.map +1 -1
  36. package/dist/css-custom-data.json +314 -314
  37. package/dist/custom-elements.json +5222 -4838
  38. package/dist/datepicker.js +26 -2
  39. package/dist/datepicker.js.map +1 -1
  40. package/dist/datepicker.min.js +1 -1
  41. package/dist/datepicker.min.js.map +1 -1
  42. package/dist/dialog.js +5 -5
  43. package/dist/dialog.js.map +1 -1
  44. package/dist/dialog.min.js.map +1 -1
  45. package/dist/drawer-container.js +1 -1
  46. package/dist/drawer-container.js.map +1 -1
  47. package/dist/drawer-container.min.js.map +1 -1
  48. package/dist/expansion-panel.js +5 -5
  49. package/dist/expansion-panel.js.map +1 -1
  50. package/dist/expansion-panel.min.js.map +1 -1
  51. package/dist/fab-menu.js +1 -1
  52. package/dist/fab-menu.js.map +1 -1
  53. package/dist/fab-menu.min.js.map +1 -1
  54. package/dist/fab.js +1 -1
  55. package/dist/fab.js.map +1 -1
  56. package/dist/fab.min.js.map +1 -1
  57. package/dist/html-custom-data.json +296 -291
  58. package/dist/icon-button.js +7 -8
  59. package/dist/icon-button.js.map +1 -1
  60. package/dist/icon-button.min.js +1 -1
  61. package/dist/icon-button.min.js.map +1 -1
  62. package/dist/list.js +17 -16
  63. package/dist/list.js.map +1 -1
  64. package/dist/list.min.js +1 -1
  65. package/dist/list.min.js.map +1 -1
  66. package/dist/menu.js +3 -3
  67. package/dist/menu.js.map +1 -1
  68. package/dist/menu.min.js.map +1 -1
  69. package/dist/nav-bar.js +12 -9
  70. package/dist/nav-bar.js.map +1 -1
  71. package/dist/nav-bar.min.js +1 -1
  72. package/dist/nav-bar.min.js.map +1 -1
  73. package/dist/nav-menu.js +5 -5
  74. package/dist/nav-menu.js.map +1 -1
  75. package/dist/nav-menu.min.js.map +1 -1
  76. package/dist/nav-rail.js +3 -1
  77. package/dist/nav-rail.js.map +1 -1
  78. package/dist/nav-rail.min.js.map +1 -1
  79. package/dist/paginator.js +1 -1
  80. package/dist/paginator.js.map +1 -1
  81. package/dist/paginator.min.js.map +1 -1
  82. package/dist/radio-group.js +12 -9
  83. package/dist/radio-group.js.map +1 -1
  84. package/dist/radio-group.min.js +1 -1
  85. package/dist/radio-group.min.js.map +1 -1
  86. package/dist/segmented-button.js +12 -11
  87. package/dist/segmented-button.js.map +1 -1
  88. package/dist/segmented-button.min.js +1 -1
  89. package/dist/segmented-button.min.js.map +1 -1
  90. package/dist/select.js +9 -9
  91. package/dist/select.js.map +1 -1
  92. package/dist/select.min.js +1 -1
  93. package/dist/select.min.js.map +1 -1
  94. package/dist/slide-group.js +6 -1
  95. package/dist/slide-group.js.map +1 -1
  96. package/dist/slide-group.min.js +1 -1
  97. package/dist/slide-group.min.js.map +1 -1
  98. package/dist/slider.js +46 -25
  99. package/dist/slider.js.map +1 -1
  100. package/dist/slider.min.js +1 -1
  101. package/dist/slider.min.js.map +1 -1
  102. package/dist/split-pane.js +17 -19
  103. package/dist/split-pane.js.map +1 -1
  104. package/dist/split-pane.min.js +1 -1
  105. package/dist/split-pane.min.js.map +1 -1
  106. package/dist/src/autocomplete/AutocompleteElement.d.ts +3 -3
  107. package/dist/src/autocomplete/AutocompleteQueryEventDetail.d.ts +1 -1
  108. package/dist/src/autocomplete/QueryEventDetail.d.ts +1 -1
  109. package/dist/src/bottom-sheet/BottomSheetElement.d.ts +5 -5
  110. package/dist/src/breadcrumb/BreadcrumbItemElement.d.ts +1 -1
  111. package/dist/src/button/ButtonElement.d.ts +2 -1
  112. package/dist/src/button/ButtonElement.d.ts.map +1 -1
  113. package/dist/src/calendar/CalendarElement.d.ts +1 -1
  114. package/dist/src/card/CardElement.d.ts +1 -1
  115. package/dist/src/checkbox/CheckboxElement.d.ts +5 -4
  116. package/dist/src/checkbox/CheckboxElement.d.ts.map +1 -1
  117. package/dist/src/chips/AssistChipElement.d.ts +1 -1
  118. package/dist/src/chips/FilterChipElement.d.ts +4 -3
  119. package/dist/src/chips/FilterChipElement.d.ts.map +1 -1
  120. package/dist/src/chips/FilterChipSetElement.d.ts +3 -2
  121. package/dist/src/chips/FilterChipSetElement.d.ts.map +1 -1
  122. package/dist/src/chips/InputChipElement.d.ts +2 -2
  123. package/dist/src/chips/InputChipSetElement.d.ts +1 -1
  124. package/dist/src/chips/SuggestionChipElement.d.ts +1 -1
  125. package/dist/src/core/shared/primitives/CollapsibleElement.d.ts +4 -4
  126. package/dist/src/core/shared/primitives/TextHighlightElement.d.ts +1 -1
  127. package/dist/src/datepicker/DatepickerElement.d.ts +6 -0
  128. package/dist/src/datepicker/DatepickerElement.d.ts.map +1 -1
  129. package/dist/src/dialog/DialogElement.d.ts +5 -5
  130. package/dist/src/drawer-container/DrawerContainerElement.d.ts +1 -1
  131. package/dist/src/expansion-panel/ExpansionHeaderElement.d.ts +1 -1
  132. package/dist/src/expansion-panel/ExpansionPanelElement.d.ts +4 -4
  133. package/dist/src/fab/FabElement.d.ts +1 -1
  134. package/dist/src/fab-menu/FabMenuItemElement.d.ts +1 -1
  135. package/dist/src/icon-button/IconButtonElement.d.ts +2 -1
  136. package/dist/src/icon-button/IconButtonElement.d.ts.map +1 -1
  137. package/dist/src/list/ExpandableListItemElement.d.ts +4 -4
  138. package/dist/src/list/ListActionElement.d.ts +1 -1
  139. package/dist/src/list/ListOptionElement.d.ts +4 -3
  140. package/dist/src/list/ListOptionElement.d.ts.map +1 -1
  141. package/dist/src/list/SelectionListElement.d.ts +3 -2
  142. package/dist/src/list/SelectionListElement.d.ts.map +1 -1
  143. package/dist/src/menu/MenuItemCheckboxElement.d.ts +1 -1
  144. package/dist/src/menu/MenuItemElement.d.ts +1 -1
  145. package/dist/src/menu/MenuItemRadioElement.d.ts +1 -1
  146. package/dist/src/nav-bar/NavBarElement.d.ts +3 -1
  147. package/dist/src/nav-bar/NavBarElement.d.ts.map +1 -1
  148. package/dist/src/nav-bar/NavItemElement.d.ts +4 -3
  149. package/dist/src/nav-bar/NavItemElement.d.ts.map +1 -1
  150. package/dist/src/nav-menu/NavMenuItemElement.d.ts +5 -5
  151. package/dist/src/nav-rail/NavRailElement.d.ts +3 -1
  152. package/dist/src/nav-rail/NavRailElement.d.ts.map +1 -1
  153. package/dist/src/paginator/PageEventDetail.d.ts +1 -1
  154. package/dist/src/paginator/PaginatorElement.d.ts +1 -1
  155. package/dist/src/paginator/PaginatorPageEventDetail.d.ts +1 -1
  156. package/dist/src/paginator/PaginatorPageEventDetail.d.ts.map +1 -1
  157. package/dist/src/radio-group/RadioElement.d.ts +4 -3
  158. package/dist/src/radio-group/RadioElement.d.ts.map +1 -1
  159. package/dist/src/radio-group/RadioGroupElement.d.ts +3 -1
  160. package/dist/src/radio-group/RadioGroupElement.d.ts.map +1 -1
  161. package/dist/src/search/SearchViewQueryEventDetail.d.ts +1 -1
  162. package/dist/src/segmented-button/ButtonSegmentElement.d.ts +4 -3
  163. package/dist/src/segmented-button/ButtonSegmentElement.d.ts.map +1 -1
  164. package/dist/src/segmented-button/SegmentedButtonElement.d.ts +3 -2
  165. package/dist/src/segmented-button/SegmentedButtonElement.d.ts.map +1 -1
  166. package/dist/src/select/SelectElement.d.ts +3 -2
  167. package/dist/src/select/SelectElement.d.ts.map +1 -1
  168. package/dist/src/slide-group/SlideGroupElement.d.ts.map +1 -1
  169. package/dist/src/slider/SliderElement.d.ts +4 -0
  170. package/dist/src/slider/SliderElement.d.ts.map +1 -1
  171. package/dist/src/slider/SliderThumbElement.d.ts +4 -3
  172. package/dist/src/slider/SliderThumbElement.d.ts.map +1 -1
  173. package/dist/src/split-pane/SplitPaneElement.d.ts +3 -2
  174. package/dist/src/split-pane/SplitPaneElement.d.ts.map +1 -1
  175. package/dist/src/stepper/StepElement.d.ts +4 -3
  176. package/dist/src/stepper/StepElement.d.ts.map +1 -1
  177. package/dist/src/stepper/StepperElement.d.ts +5 -1
  178. package/dist/src/stepper/StepperElement.d.ts.map +1 -1
  179. package/dist/src/switch/SwitchElement.d.ts +4 -3
  180. package/dist/src/switch/SwitchElement.d.ts.map +1 -1
  181. package/dist/src/tabs/TabElement.d.ts +4 -3
  182. package/dist/src/tabs/TabElement.d.ts.map +1 -1
  183. package/dist/src/tabs/TabsElement.d.ts +5 -2
  184. package/dist/src/tabs/TabsElement.d.ts.map +1 -1
  185. package/dist/src/theme/ThemeElement.d.ts.map +1 -1
  186. package/dist/src/toc/TocItemElement.d.ts +1 -1
  187. package/dist/src/tree/TreeElement.d.ts +1 -1
  188. package/dist/src/tree/TreeItemElement.d.ts +5 -5
  189. package/dist/stepper.js +26 -17
  190. package/dist/stepper.js.map +1 -1
  191. package/dist/stepper.min.js +1 -1
  192. package/dist/stepper.min.js.map +1 -1
  193. package/dist/switch.js +9 -8
  194. package/dist/switch.js.map +1 -1
  195. package/dist/switch.min.js +1 -1
  196. package/dist/switch.min.js.map +1 -1
  197. package/dist/tabs.js +198 -24
  198. package/dist/tabs.js.map +1 -1
  199. package/dist/tabs.min.js +1 -1
  200. package/dist/tabs.min.js.map +1 -1
  201. package/dist/theme.js +34 -13
  202. package/dist/theme.js.map +1 -1
  203. package/dist/theme.min.js +23 -23
  204. package/dist/theme.min.js.map +1 -1
  205. package/dist/toc.js +1 -1
  206. package/dist/toc.js.map +1 -1
  207. package/dist/toc.min.js.map +1 -1
  208. package/dist/tree.js +6 -6
  209. package/dist/tree.js.map +1 -1
  210. package/dist/tree.min.js.map +1 -1
  211. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"segmented-button.min.js","sources":["../../src/segmented-button/ButtonSegmentElement.ts","../../src/segmented-button/SegmentedButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n Checked,\r\n customElement,\r\n DesignToken,\r\n Dirty,\r\n Disabled,\r\n hasAssignedNodes,\r\n M3eFocusRingElement,\r\n M3eRippleElement,\r\n M3eStateLayerElement,\r\n Role,\r\n setCustomState,\r\n Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * A option that can be selected within a segmented button.\r\n *\r\n * @description\r\n * The `m3e-button-segment` component represents a single selectable option within a segmented button group.\r\n * It behaves like a toggle-able button, supporting icon and label content, selection state, and accessibility\r\n * roles. Segments are visually unified but independently interactive, adapting shape, color, and ripple feedback\r\n * based on their position and state.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n * <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n * <m3e-button-segment>12 oz</m3e-button-segment>\r\n * <m3e-button-segment>16 oz</m3e-button-segment>\r\n * <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n * <m3e-button-segment checked>$</m3e-button-segment>\r\n * <m3e-button-segment checked>$$</m3e-button-segment>\r\n * <m3e-button-segment>$$$</m3e-button-segment>\r\n * <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-button-segment\r\n *\r\n * @slot - Renders the label of the option.\r\n * @slot icon - Renders an icon before the option's label.\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr value - A string representing the value of the segment.\r\n *\r\n * @fires input - Emitted when the checked state changes.\r\n * @fires change - Emitted when the checked state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-segmented-button-height - Total height of the segmented button.\r\n * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.\r\n * @cssprop --m3e-segmented-button-outline-color - Color of the button's border.\r\n * @cssprop --m3e-segmented-button-padding-start - Padding on the leading edge of the button content.\r\n * @cssprop --m3e-segmented-button-padding-end - Padding on the trailing edge of the button content.\r\n * @cssprop --m3e-segmented-button-spacing - Horizontal gap between icon and label.\r\n * @cssprop --m3e-segmented-button-font-size - Font size of the label text.\r\n * @cssprop --m3e-segmented-button-font-weight - Font weight of the label text.\r\n * @cssprop --m3e-segmented-button-line-height - Line height of the label text.\r\n * @cssprop --m3e-segmented-button-tracking - Letter spacing of the label text.\r\n * @cssprop --m3e-segmented-button-with-icon-padding-start - Leading padding when an icon is present.\r\n * @cssprop --m3e-segmented-button-selected-container-color - Background color of a selected segment.\r\n * @cssprop --m3e-segmented-button-selected-container-hover-color - Hover state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-container-focus-color - Focus state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-ripple-color - Ripple color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-label-text-color - Label text color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-icon-color - Icon color for selected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-hover-color - Hover state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-focus-color - Focus state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-ripple-color - Ripple color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-label-text-color - Label text color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-icon-color - Icon color for unselected segments.\r\n * @cssprop --m3e-segmented-button-icon-size - Font size of the icon.\r\n * @cssprop --m3e-segmented-button-disabled-outline-color - Base color for disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-outline-opacity - Opacity applied to disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-segmented-button-disabled-icon-opacity - Opacity applied to disabled icons.\r\n */\r\n@customElement(\"m3e-button-segment\")\r\nexport class M3eButtonSegmentElement extends Dirty(\r\n Touched(Checked(Disabled(AttachInternals(Role(LitElement, \"radio\"), true)))),\r\n) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: inline-block;\r\n position: relative;\r\n vertical-align: middle;\r\n outline: none;\r\n user-select: none;\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n }\r\n .base {\r\n display: inline-flex;\r\n vertical-align: middle;\r\n align-items: center;\r\n width: 100%;\r\n height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n box-sizing: border-box;\r\n border-width: var(--m3e-segmented-button-outline-thickness, 1px);\r\n border-color: var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline});\r\n border-style: solid;\r\n border-radius: inherit;\r\n border-inline-start-style: var(--_segmented-button-left-border, solid);\r\n transition: ${unsafeCSS(\r\n `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n .touch {\r\n position: absolute;\r\n height: 3rem;\r\n left: 0;\r\n right: 0;\r\n }\r\n .wrapper {\r\n width: 100%;\r\n overflow: hidden;\r\n display: inline-flex;\r\n align-items: center;\r\n padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem);\r\n padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem);\r\n column-gap: var(--m3e-segmented-button-spacing, 0.5rem);\r\n }\r\n .label {\r\n font-size: var(--m3e-segmented-button-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n line-height: var(--m3e-segmented-button-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n justify-self: center;\r\n flex: 1 1 auto;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n }\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n }\r\n :host(:not(:disabled)) {\r\n cursor: pointer;\r\n }\r\n :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper,\r\n :host(:is(:state(--with-icon), :--with-icon)) .wrapper {\r\n padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem);\r\n }\r\n :host(:not(:disabled)[checked]) .base {\r\n background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n --m3e-state-layer-hover-color: var(\r\n --m3e-segmented-button-selected-container-hover-color,\r\n ${DesignToken.color.onSecondaryContainer}\r\n );\r\n --m3e-state-layer-focus-color: var(\r\n --m3e-segmented-button-selected-container-focus-color,\r\n ${DesignToken.color.onSecondaryContainer}\r\n );\r\n --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n }\r\n :host(:not(:disabled)[checked]) .label {\r\n color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken.color.onSecondaryContainer});\r\n }\r\n :host(:not(:disabled)[checked]) .icon {\r\n color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n }\r\n :host(:not(:disabled):not([checked])) .base {\r\n --m3e-state-layer-hover-color: var(\r\n --m3e-segmented-button-unselected-container-hover-color,\r\n ${DesignToken.color.onSurface}\r\n );\r\n --m3e-state-layer-focus-color: var(\r\n --m3e-segmented-button-unselected-container-focus-color,\r\n ${DesignToken.color.onSurface}\r\n );\r\n --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n }\r\n :host(:not(:disabled):not([checked])) .label {\r\n color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken.color.onSurface});\r\n }\r\n :host(:not(:disabled):not([checked])) .icon {\r\n color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken.color.onSurface});\r\n }\r\n :host(:not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem));\r\n transition: margin-inline-start ${DesignToken.motion.spring.fastEffects};\r\n }\r\n .check,\r\n ::slotted([slot=\"icon\"]) {\r\n width: 1em;\r\n font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important;\r\n }\r\n :host(:not([checked])) .check,\r\n :host(:is(:state(--hide-selection), :--hide-selection)) .check,\r\n :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n display: none;\r\n }\r\n :host([checked]) .icon {\r\n margin-inline-start: 0;\r\n }\r\n :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot=\"icon\"]) {\r\n display: none !important;\r\n }\r\n :host(:disabled) .base {\r\n border-color: color-mix(\r\n in srgb,\r\n var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n transparent\r\n );\r\n border-inline-end-color: var(\r\n --_segmented-button-disabled-outline-color,\r\n color-mix(\r\n in srgb,\r\n var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n transparent\r\n )\r\n );\r\n }\r\n :host(:disabled) .label {\r\n color: color-mix(\r\n in srgb,\r\n var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n var(--m3e-segmented-button-disabled-label-text-opacity, 38%),\r\n transparent\r\n );\r\n }\r\n :host(:disabled) .icon {\r\n color: color-mix(\r\n in srgb,\r\n var(--m3e-segmented-button-disabled-icon-color, ${DesignToken.color.onSurface})\r\n var(--m3e-segmented-button-disabled-icon-opacity, 38%),\r\n transparent\r\n );\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base,\r\n .icon,\r\n .label {\r\n transition: none;\r\n }\r\n }\r\n @media (forced-colors: active) {\r\n .base,\r\n .icon,\r\n .label {\r\n transition: none !important;\r\n }\r\n\r\n :host(:disabled) .label,\r\n :host(:disabled) .icon {\r\n color: GrayText;\r\n }\r\n :host(:not([selected]):not(:disabled)) .label,\r\n :host(:not([selected]):not(:disabled)) .icon {\r\n color: ButtonText;\r\n }\r\n :host(:not(:disabled)[checked]) .base {\r\n background-color: ButtonText;\r\n }\r\n :host(:not(:disabled)[checked]) .label,\r\n :host(:not(:disabled)[checked]) .icon {\r\n forced-color-adjust: none;\r\n color: ButtonFace;\r\n }\r\n :host {\r\n --m3e-segmented-button-outline-color: ButtonText;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n /**\r\n * A string representing the value of the segment.\r\n * @default \"on\"\r\n */\r\n @property() value = \"on\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.addEventListener(\"click\", this.#clickHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.removeEventListener(\"click\", this.#clickHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n super.firstUpdated(_changedProperties);\r\n [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n if (segmentedButton) {\r\n this.role = segmentedButton.multi ? \"button\" : \"radio\";\r\n }\r\n\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"checked\")) {\r\n segmentedButton?.[selectionManager].notifySelectionChange(this);\r\n }\r\n\r\n if (changedProperties.has(\"disabled\")) {\r\n if (this.disabled) {\r\n if (this.nextElementSibling instanceof M3eButtonSegmentElement) {\r\n if (!this.nextElementSibling.disabled) {\r\n this.style.setProperty(\r\n \"--_segmented-button-disabled-outline-color\",\r\n `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n );\r\n } else {\r\n this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n }\r\n }\r\n } else {\r\n this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n if (this.previousElementSibling instanceof M3eButtonSegmentElement) {\r\n if (this.previousElementSibling.disabled) {\r\n this.previousElementSibling.style.setProperty(\r\n \"--_segmented-button-disabled-outline-color\",\r\n `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n );\r\n } else {\r\n this.previousElementSibling.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override render(): unknown {\r\n return html`<div class=\"base\">\r\n <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n <div class=\"touch\" aria-hidden=\"true\"></div>\r\n <div class=\"wrapper\">\r\n <div class=\"icon\" aria-hidden=\"true\">\r\n <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n </svg>\r\n <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n </div>\r\n <div class=\"label\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #handleIconSlotChange(e: Event): void {\r\n setCustomState(this, \"--with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n }\r\n\r\n /** @private */\r\n #handleClick(e: Event): void {\r\n if (e.defaultPrevented) return;\r\n\r\n const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n if (segmentedButton && (segmentedButton.multi || !this.checked)) {\r\n const checked = this.checked;\r\n this.checked = !this.checked;\r\n\r\n if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n this.closest(\"m3e-segmented-button\")?.[selectionManager].notifySelectionChange(this);\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n } else {\r\n this.checked = checked;\r\n }\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-button-segment\": M3eButtonSegmentElement;\r\n }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n customElement,\r\n DesignToken,\r\n Dirty,\r\n Disabled,\r\n FormAssociated,\r\n formValue,\r\n Labelled,\r\n Role,\r\n setCustomState,\r\n Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eButtonSegmentElement } from \"./ButtonSegmentElement\";\r\n\r\n/**\r\n * A button that allows a user to select from a limited set of options.\r\n *\r\n * @description\r\n * The `m3e-segmented-button` component allows users to select one or more options from a horizontal group.\r\n * Each segment behaves like a toggle-able button, supporting icon and label content, selection state, and\r\n * accessibility roles. Built with Material Design 3 principles, it adapts shape, color, and ripple feedback\r\n * based on interaction state and input modality. Segments are visually unified but independently interactive.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n * <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n * <m3e-button-segment>12 oz</m3e-button-segment>\r\n * <m3e-button-segment>16 oz</m3e-button-segment>\r\n * <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n * <m3e-button-segment checked>$</m3e-button-segment>\r\n * <m3e-button-segment checked>$$</m3e-button-segment>\r\n * <m3e-button-segment>$$$</m3e-button-segment>\r\n * <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-segmented-button\r\n *\r\n * @slot - Renders the segments of the button.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr multi - Whether multiple options can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n *\r\n * @fires input - Emitted when the checked state of a segment changes.\r\n * @fires change - Emitted when the checked state of a segment changes.\r\n *\r\n * @cssprop --m3e-segmented-button-start-shape - Border radius for the first segment in a segmented button.\r\n * @cssprop --m3e-segmented-button-end-shape - Border radius for the last segment in a segmented button.\r\n */\r\n@customElement(\"m3e-segmented-button\")\r\nexport class M3eSegmentedButtonElement extends Labelled(\r\n Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radiogroup\")))))),\r\n) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: inline-flex;\r\n vertical-align: middle;\r\n align-items: center;\r\n }\r\n ::slotted(:is(:state(--first), :--first)) {\r\n border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n }\r\n ::slotted(:is(:state(--last), :--last)) {\r\n border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n }\r\n ::slotted(:not(:is(:state(--first), :--first))) {\r\n --_segmented-button-left-border: none;\r\n }\r\n `;\r\n\r\n /** @private */ #directionalitySubscription?: () => void;\r\n\r\n /** @internal */\r\n readonly [selectionManager] = new SelectionManager<M3eButtonSegmentElement>()\r\n .withWrap()\r\n .withDirectionality(M3eDirectionality.current)\r\n .onActiveItemChange(() => this[selectionManager].activeItem?.click());\r\n\r\n /**\r\n * Whether multiple options can be selected.\r\n * @default false\r\n */\r\n @property({ type: Boolean }) multi = false;\r\n\r\n /**\r\n * Whether to hide the selection indicator.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n /** The segments of the button. */\r\n get segments(): readonly M3eButtonSegmentElement[] {\r\n return this[selectionManager]?.items ?? [];\r\n }\r\n\r\n /** The selected segment(s) of the button. */\r\n get selected(): readonly M3eButtonSegmentElement[] {\r\n return this[selectionManager]?.selectedItems ?? [];\r\n }\r\n\r\n /** The selected (enabled) value(s) of the button. */\r\n get value(): string | readonly string[] | null {\r\n const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n switch (values.length) {\r\n case 0:\r\n return null;\r\n case 1:\r\n return values[0];\r\n default:\r\n return values;\r\n }\r\n }\r\n\r\n /** @inheritdoc @internal */\r\n override get [formValue]() {\r\n const values = this.value;\r\n if (Array.isArray(values)) {\r\n const data = new FormData();\r\n for (const value of values) {\r\n data.append(this.name, value);\r\n }\r\n return data;\r\n }\r\n return <string | null>values;\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this[selectionManager].multi = this.multi;\r\n this[selectionManager].disableRovingTabIndex(this.multi);\r\n this.#directionalitySubscription = M3eDirectionality.observe(\r\n () => (this[selectionManager].directionality = M3eDirectionality.current),\r\n );\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.#directionalitySubscription?.();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"disabled\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n this[selectionManager].disabled = this.disabled;\r\n }\r\n\r\n if (changedProperties.has(\"multi\")) {\r\n this.role = this.multi ? \"group\" : \"radiogroup\";\r\n this[selectionManager].multi = this.multi;\r\n this[selectionManager].disableRovingTabIndex(this.multi);\r\n }\r\n\r\n if (changedProperties.has(\"multi\") || changedProperties.has(\"disabled\")) {\r\n // aria-disabled is not supported on radiogroup roles.\r\n this.ariaDisabled = this.multi && this.disabled ? \"true\" : null;\r\n }\r\n\r\n if (changedProperties.has(\"hideSelectionIndicator\")) {\r\n this.segments.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<slot\r\n @slotchange=\"${this.#handleSlotChange}\"\r\n @keydown=\"${this.#handleKeyDown}\"\r\n @change=\"${this.#handleChange}\"\r\n ></slot>`;\r\n }\r\n\r\n /** @private */\r\n #handleSlotChange() {\r\n const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-button-segment\")]);\r\n added.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\r\n this[selectionManager].items.forEach((segment, i) => {\r\n setCustomState(segment, \"--first\", i == 0);\r\n setCustomState(segment, \"--last\", i == this[selectionManager].items.length - 1);\r\n });\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n if (!this.multi) {\r\n this[selectionManager].onKeyDown(e);\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleChange(e: Event): void {\r\n e.stopPropagation();\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-segmented-button\": M3eSegmentedButtonElement;\r\n }\r\n}\r\n"],"names":["M3eButtonSegmentElement","M3eButtonSegmentElement_1","Dirty","Touched","Checked","Disabled","AttachInternals","Role","LitElement","constructor","_M3eButtonSegmentElement_clickHandler","set","this","e","__classPrivateFieldGet","call","value","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","attach","update","changedProperties","segmentedButton","closest","role","multi","has","selectionManager","notifySelectionChange","disabled","nextElementSibling","style","removeProperty","setProperty","DesignToken","color","outline","previousElementSibling","render","html","_M3eButtonSegmentElement_instances","_M3eButtonSegmentElement_handleIconSlotChange","setCustomState","hasAssignedNodes","target","defaultPrevented","checked","dispatchEvent","Event","bubbles","composed","cancelable","styles","css","density","calc","unsafeCSS","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","secondaryContainer","onSecondaryContainer","onSurface","spring","fastEffects","__decorate","query","prototype","property","customElement","M3eSegmentedButtonElement","Labelled","FormAssociated","_M3eSegmentedButtonElement_directionalitySubscription","_a","SelectionManager","withWrap","withDirectionality","M3eDirectionality","current","onActiveItemChange","activeItem","click","hideSelectionIndicator","segments","items","selected","selectedItems","values","filter","map","length","WeakMap","_M3eSegmentedButtonElement_instances","WeakSet","formValue","Array","isArray","data","FormData","append","name","disableRovingTabIndex","__classPrivateFieldSet","observe","directionality","undefined","get","ariaDisabled","_M3eSegmentedButtonElement_handleSlotChange","_M3eSegmentedButtonElement_handleKeyDown","_M3eSegmentedButtonElement_handleChange","added","setItems","querySelectorAll","segment","i","onKeyDown","stopPropagation","shape","corner","full","type","Boolean","attribute"],"mappings":"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"}
1
+ {"version":3,"file":"segmented-button.min.js","sources":["../../src/segmented-button/ButtonSegmentElement.ts","../../src/segmented-button/SegmentedButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n Checked,\r\n customElement,\r\n DesignToken,\r\n Dirty,\r\n Disabled,\r\n hasAssignedNodes,\r\n M3eFocusRingElement,\r\n M3eRippleElement,\r\n M3eStateLayerElement,\r\n Role,\r\n setCustomState,\r\n Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * A option that can be selected within a segmented button.\r\n *\r\n * @description\r\n * The `m3e-button-segment` component represents a single selectable option within a segmented button group.\r\n * It behaves like a toggle-able button, supporting icon and label content, selection state, and accessibility\r\n * roles. Segments are visually unified but independently interactive, adapting shape, color, and ripple feedback\r\n * based on their position and state.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n * <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n * <m3e-button-segment>12 oz</m3e-button-segment>\r\n * <m3e-button-segment>16 oz</m3e-button-segment>\r\n * <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n * <m3e-button-segment checked>$</m3e-button-segment>\r\n * <m3e-button-segment checked>$$</m3e-button-segment>\r\n * <m3e-button-segment>$$$</m3e-button-segment>\r\n * <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-button-segment\r\n *\r\n * @slot - Renders the label of the option.\r\n * @slot icon - Renders an icon before the option's label.\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr value - A string representing the value of the segment.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state changes.\r\n * @fires input - Dispatched when the checked state changes.\r\n * @fires change - Dispatched when the checked state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-segmented-button-height - Total height of the segmented button.\r\n * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.\r\n * @cssprop --m3e-segmented-button-outline-color - Color of the button's border.\r\n * @cssprop --m3e-segmented-button-padding-start - Padding on the leading edge of the button content.\r\n * @cssprop --m3e-segmented-button-padding-end - Padding on the trailing edge of the button content.\r\n * @cssprop --m3e-segmented-button-spacing - Horizontal gap between icon and label.\r\n * @cssprop --m3e-segmented-button-font-size - Font size of the label text.\r\n * @cssprop --m3e-segmented-button-font-weight - Font weight of the label text.\r\n * @cssprop --m3e-segmented-button-line-height - Line height of the label text.\r\n * @cssprop --m3e-segmented-button-tracking - Letter spacing of the label text.\r\n * @cssprop --m3e-segmented-button-with-icon-padding-start - Leading padding when an icon is present.\r\n * @cssprop --m3e-segmented-button-selected-container-color - Background color of a selected segment.\r\n * @cssprop --m3e-segmented-button-selected-container-hover-color - Hover state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-container-focus-color - Focus state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-ripple-color - Ripple color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-label-text-color - Label text color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-icon-color - Icon color for selected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-hover-color - Hover state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-focus-color - Focus state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-ripple-color - Ripple color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-label-text-color - Label text color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-icon-color - Icon color for unselected segments.\r\n * @cssprop --m3e-segmented-button-icon-size - Font size of the icon.\r\n * @cssprop --m3e-segmented-button-disabled-outline-color - Base color for disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-outline-opacity - Opacity applied to disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-segmented-button-disabled-icon-opacity - Opacity applied to disabled icons.\r\n */\r\n@customElement(\"m3e-button-segment\")\r\nexport class M3eButtonSegmentElement extends Dirty(\r\n Touched(Checked(Disabled(AttachInternals(Role(LitElement, \"radio\"), true)))),\r\n) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: inline-block;\r\n position: relative;\r\n vertical-align: middle;\r\n outline: none;\r\n user-select: none;\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n }\r\n .base {\r\n display: inline-flex;\r\n vertical-align: middle;\r\n align-items: center;\r\n width: 100%;\r\n height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n box-sizing: border-box;\r\n border-width: var(--m3e-segmented-button-outline-thickness, 1px);\r\n border-color: var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline});\r\n border-style: solid;\r\n border-radius: inherit;\r\n border-inline-start-style: var(--_segmented-button-left-border, solid);\r\n transition: ${unsafeCSS(\r\n `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n .touch {\r\n position: absolute;\r\n height: 3rem;\r\n left: 0;\r\n right: 0;\r\n }\r\n .wrapper {\r\n width: 100%;\r\n overflow: hidden;\r\n display: inline-flex;\r\n align-items: center;\r\n padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem);\r\n padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem);\r\n column-gap: var(--m3e-segmented-button-spacing, 0.5rem);\r\n }\r\n .label {\r\n font-size: var(--m3e-segmented-button-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n line-height: var(--m3e-segmented-button-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n justify-self: center;\r\n flex: 1 1 auto;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n }\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n }\r\n :host(:not(:disabled)) {\r\n cursor: pointer;\r\n }\r\n :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper,\r\n :host(:is(:state(--with-icon), :--with-icon)) .wrapper {\r\n padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem);\r\n }\r\n :host(:not(:disabled)[checked]) .base {\r\n background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n --m3e-state-layer-hover-color: var(\r\n --m3e-segmented-button-selected-container-hover-color,\r\n ${DesignToken.color.onSecondaryContainer}\r\n );\r\n --m3e-state-layer-focus-color: var(\r\n --m3e-segmented-button-selected-container-focus-color,\r\n ${DesignToken.color.onSecondaryContainer}\r\n );\r\n --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n }\r\n :host(:not(:disabled)[checked]) .label {\r\n color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken.color.onSecondaryContainer});\r\n }\r\n :host(:not(:disabled)[checked]) .icon {\r\n color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n }\r\n :host(:not(:disabled):not([checked])) .base {\r\n --m3e-state-layer-hover-color: var(\r\n --m3e-segmented-button-unselected-container-hover-color,\r\n ${DesignToken.color.onSurface}\r\n );\r\n --m3e-state-layer-focus-color: var(\r\n --m3e-segmented-button-unselected-container-focus-color,\r\n ${DesignToken.color.onSurface}\r\n );\r\n --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n }\r\n :host(:not(:disabled):not([checked])) .label {\r\n color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken.color.onSurface});\r\n }\r\n :host(:not(:disabled):not([checked])) .icon {\r\n color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken.color.onSurface});\r\n }\r\n :host(:not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem));\r\n transition: margin-inline-start ${DesignToken.motion.spring.fastEffects};\r\n }\r\n .check,\r\n ::slotted([slot=\"icon\"]) {\r\n width: 1em;\r\n font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important;\r\n }\r\n :host(:not([checked])) .check,\r\n :host(:is(:state(--hide-selection), :--hide-selection)) .check,\r\n :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n display: none;\r\n }\r\n :host([checked]) .icon {\r\n margin-inline-start: 0;\r\n }\r\n :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot=\"icon\"]) {\r\n display: none !important;\r\n }\r\n :host(:disabled) .base {\r\n border-color: color-mix(\r\n in srgb,\r\n var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n transparent\r\n );\r\n border-inline-end-color: var(\r\n --_segmented-button-disabled-outline-color,\r\n color-mix(\r\n in srgb,\r\n var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n transparent\r\n )\r\n );\r\n }\r\n :host(:disabled) .label {\r\n color: color-mix(\r\n in srgb,\r\n var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n var(--m3e-segmented-button-disabled-label-text-opacity, 38%),\r\n transparent\r\n );\r\n }\r\n :host(:disabled) .icon {\r\n color: color-mix(\r\n in srgb,\r\n var(--m3e-segmented-button-disabled-icon-color, ${DesignToken.color.onSurface})\r\n var(--m3e-segmented-button-disabled-icon-opacity, 38%),\r\n transparent\r\n );\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base,\r\n .icon,\r\n .label {\r\n transition: none;\r\n }\r\n }\r\n @media (forced-colors: active) {\r\n .base,\r\n .icon,\r\n .label {\r\n transition: none !important;\r\n }\r\n\r\n :host(:disabled) .label,\r\n :host(:disabled) .icon {\r\n color: GrayText;\r\n }\r\n :host(:not([selected]):not(:disabled)) .label,\r\n :host(:not([selected]):not(:disabled)) .icon {\r\n color: ButtonText;\r\n }\r\n :host(:not(:disabled)[checked]) .base {\r\n background-color: ButtonText;\r\n }\r\n :host(:not(:disabled)[checked]) .label,\r\n :host(:not(:disabled)[checked]) .icon {\r\n forced-color-adjust: none;\r\n color: ButtonFace;\r\n }\r\n :host {\r\n --m3e-segmented-button-outline-color: ButtonText;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n /**\r\n * A string representing the value of the segment.\r\n * @default \"on\"\r\n */\r\n @property() value = \"on\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.addEventListener(\"click\", this.#clickHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.removeEventListener(\"click\", this.#clickHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n super.firstUpdated(_changedProperties);\r\n [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n if (segmentedButton) {\r\n this.role = segmentedButton.multi ? \"button\" : \"radio\";\r\n }\r\n\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"checked\")) {\r\n segmentedButton?.[selectionManager].notifySelectionChange(this);\r\n }\r\n\r\n if (changedProperties.has(\"disabled\")) {\r\n if (this.disabled) {\r\n if (this.nextElementSibling instanceof M3eButtonSegmentElement) {\r\n if (!this.nextElementSibling.disabled) {\r\n this.style.setProperty(\r\n \"--_segmented-button-disabled-outline-color\",\r\n `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n );\r\n } else {\r\n this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n }\r\n }\r\n } else {\r\n this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n if (this.previousElementSibling instanceof M3eButtonSegmentElement) {\r\n if (this.previousElementSibling.disabled) {\r\n this.previousElementSibling.style.setProperty(\r\n \"--_segmented-button-disabled-outline-color\",\r\n `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n );\r\n } else {\r\n this.previousElementSibling.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override render(): unknown {\r\n return html`<div class=\"base\">\r\n <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n <div class=\"touch\" aria-hidden=\"true\"></div>\r\n <div class=\"wrapper\">\r\n <div class=\"icon\" aria-hidden=\"true\">\r\n <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n </svg>\r\n <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n </div>\r\n <div class=\"label\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #handleIconSlotChange(e: Event): void {\r\n setCustomState(this, \"--with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n }\r\n\r\n /** @private */\r\n #handleClick(e: Event): void {\r\n if (e.defaultPrevented) return;\r\n\r\n const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n if (segmentedButton && (segmentedButton.multi || !this.checked)) {\r\n if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n this.checked = !this.checked;\r\n this.closest(\"m3e-segmented-button\")?.[selectionManager].notifySelectionChange(this);\r\n\r\n this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-button-segment\": M3eButtonSegmentElement;\r\n }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n customElement,\r\n DesignToken,\r\n Dirty,\r\n Disabled,\r\n FormAssociated,\r\n formValue,\r\n Labelled,\r\n Role,\r\n setCustomState,\r\n Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eButtonSegmentElement } from \"./ButtonSegmentElement\";\r\n\r\n/**\r\n * A button that allows a user to select from a limited set of options.\r\n *\r\n * @description\r\n * The `m3e-segmented-button` component allows users to select one or more options from a horizontal group.\r\n * Each segment behaves like a toggle-able button, supporting icon and label content, selection state, and\r\n * accessibility roles. Built with Material Design 3 principles, it adapts shape, color, and ripple feedback\r\n * based on interaction state and input modality. Segments are visually unified but independently interactive.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n * <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n * <m3e-button-segment>12 oz</m3e-button-segment>\r\n * <m3e-button-segment>16 oz</m3e-button-segment>\r\n * <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n * <m3e-button-segment checked>$</m3e-button-segment>\r\n * <m3e-button-segment checked>$$</m3e-button-segment>\r\n * <m3e-button-segment>$$$</m3e-button-segment>\r\n * <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-segmented-button\r\n *\r\n * @slot - Renders the segments of the button.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr multi - Whether multiple options can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state of a segment changes.\r\n * @fires input - Dispatched when the checked state of a segment changes.\r\n * @fires change - Dispatched when the checked state of a segment changes.\r\n *\r\n * @cssprop --m3e-segmented-button-start-shape - Border radius for the first segment in a segmented button.\r\n * @cssprop --m3e-segmented-button-end-shape - Border radius for the last segment in a segmented button.\r\n */\r\n@customElement(\"m3e-segmented-button\")\r\nexport class M3eSegmentedButtonElement extends Labelled(\r\n Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radiogroup\")))))),\r\n) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: inline-flex;\r\n vertical-align: middle;\r\n align-items: center;\r\n }\r\n ::slotted(:is(:state(--first), :--first)) {\r\n border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n }\r\n ::slotted(:is(:state(--last), :--last)) {\r\n border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n }\r\n ::slotted(:not(:is(:state(--first), :--first))) {\r\n --_segmented-button-left-border: none;\r\n }\r\n `;\r\n\r\n /** @private */ #directionalitySubscription?: () => void;\r\n\r\n /** @internal */\r\n readonly [selectionManager] = new SelectionManager<M3eButtonSegmentElement>()\r\n .withWrap()\r\n .withDirectionality(M3eDirectionality.current)\r\n .onActiveItemChange(() => this[selectionManager].activeItem?.click());\r\n\r\n /**\r\n * Whether multiple options can be selected.\r\n * @default false\r\n */\r\n @property({ type: Boolean }) multi = false;\r\n\r\n /**\r\n * Whether to hide the selection indicator.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n /** The segments of the button. */\r\n get segments(): readonly M3eButtonSegmentElement[] {\r\n return this[selectionManager]?.items ?? [];\r\n }\r\n\r\n /** The selected segment(s) of the button. */\r\n get selected(): readonly M3eButtonSegmentElement[] {\r\n return this[selectionManager]?.selectedItems ?? [];\r\n }\r\n\r\n /** The selected (enabled) value(s) of the button. */\r\n get value(): string | readonly string[] | null {\r\n const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n switch (values.length) {\r\n case 0:\r\n return null;\r\n case 1:\r\n return values[0];\r\n default:\r\n return values;\r\n }\r\n }\r\n\r\n /** @inheritdoc @internal */\r\n override get [formValue]() {\r\n const values = this.value;\r\n if (Array.isArray(values)) {\r\n const data = new FormData();\r\n for (const value of values) {\r\n data.append(this.name, value);\r\n }\r\n return data;\r\n }\r\n return <string | null>values;\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this[selectionManager].multi = this.multi;\r\n this[selectionManager].disableRovingTabIndex(this.multi);\r\n this.#directionalitySubscription = M3eDirectionality.observe(\r\n () => (this[selectionManager].directionality = M3eDirectionality.current),\r\n );\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.#directionalitySubscription?.();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"disabled\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n this[selectionManager].disabled = this.disabled;\r\n }\r\n\r\n if (changedProperties.has(\"multi\")) {\r\n this.role = this.multi ? \"group\" : \"radiogroup\";\r\n this[selectionManager].multi = this.multi;\r\n this[selectionManager].disableRovingTabIndex(this.multi);\r\n }\r\n\r\n if (changedProperties.has(\"multi\") || changedProperties.has(\"disabled\")) {\r\n // aria-disabled is not supported on radiogroup roles.\r\n this.ariaDisabled = this.multi && this.disabled ? \"true\" : null;\r\n }\r\n\r\n if (changedProperties.has(\"hideSelectionIndicator\")) {\r\n this.segments.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<slot\r\n @slotchange=\"${this.#handleSlotChange}\"\r\n @keydown=\"${this.#handleKeyDown}\"\r\n @change=\"${this.#handleChange}\"\r\n ></slot>`;\r\n }\r\n\r\n /** @private */\r\n #handleSlotChange() {\r\n const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-button-segment\")]);\r\n added.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\r\n this[selectionManager].items.forEach((segment, i) => {\r\n setCustomState(segment, \"--first\", i == 0);\r\n setCustomState(segment, \"--last\", i == this[selectionManager].items.length - 1);\r\n });\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n if (!this.multi) {\r\n this[selectionManager].onKeyDown(e);\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleChange(e: Event): void {\r\n e.stopPropagation();\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-segmented-button\": M3eSegmentedButtonElement;\r\n }\r\n}\r\n"],"names":["M3eButtonSegmentElement","M3eButtonSegmentElement_1","Dirty","Touched","Checked","Disabled","AttachInternals","Role","LitElement","constructor","_M3eButtonSegmentElement_clickHandler","set","this","e","__classPrivateFieldGet","call","value","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","attach","update","changedProperties","segmentedButton","closest","role","multi","has","selectionManager","notifySelectionChange","disabled","nextElementSibling","style","removeProperty","setProperty","DesignToken","color","outline","previousElementSibling","render","html","_M3eButtonSegmentElement_instances","_M3eButtonSegmentElement_handleIconSlotChange","setCustomState","hasAssignedNodes","target","defaultPrevented","checked","dispatchEvent","Event","bubbles","cancelable","styles","css","density","calc","unsafeCSS","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","secondaryContainer","onSecondaryContainer","onSurface","spring","fastEffects","__decorate","query","prototype","property","customElement","M3eSegmentedButtonElement","Labelled","FormAssociated","_M3eSegmentedButtonElement_directionalitySubscription","_a","SelectionManager","withWrap","withDirectionality","M3eDirectionality","current","onActiveItemChange","activeItem","click","hideSelectionIndicator","segments","items","selected","selectedItems","values","filter","map","length","WeakMap","_M3eSegmentedButtonElement_instances","WeakSet","formValue","Array","isArray","data","FormData","append","name","disableRovingTabIndex","__classPrivateFieldSet","observe","directionality","undefined","get","ariaDisabled","_M3eSegmentedButtonElement_handleSlotChange","_M3eSegmentedButtonElement_handleKeyDown","_M3eSegmentedButtonElement_handleChange","added","setItems","querySelectorAll","segment","i","onKeyDown","stopPropagation","shape","corner","full","type","Boolean","attribute"],"mappings":"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"}
package/dist/select.js CHANGED
@@ -52,8 +52,9 @@ var M3eSelectElement_1;
52
52
  * @attr panel-class - Class or list of classes to be applied to the select's overlay panel.
53
53
  * @attr required - Whether the element is required.
54
54
  *
55
- * @fires input - Emitted when the selected state changes.
56
- * @fires change - Emitted when the selected state changes.
55
+ * @fires beforeinput - Dispatched before the selected state changes.
56
+ * @fires input - Dispatched when the selected state changes.
57
+ * @fires change - Dispatched when the selected state changes.
57
58
  *
58
59
  * @cssprop --m3e-form-field-font-size - The font size of the select control.
59
60
  * @cssprop --m3e-form-field-font-weight - The font weight of the select control.
@@ -473,13 +474,12 @@ _M3eSelectElement_updateSelectionState = function _M3eSelectElement_updateSelect
473
474
  _M3eSelectElement_selectOption = function _M3eSelectElement_selectOption(option) {
474
475
  const selected = this.multi ? !option.selected : true;
475
476
  if (option.selected === selected) return;
476
- option.selected = selected;
477
- __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_updateSelectionState).call(this, option);
478
- if (this.dispatchEvent(new Event("input", {
477
+ if (this.dispatchEvent(new Event("beforeinput", {
479
478
  bubbles: true,
480
- composed: true,
481
479
  cancelable: true
482
480
  }))) {
481
+ option.selected = selected;
482
+ __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_updateSelectionState).call(this, option);
483
483
  if (!this.multi) {
484
484
  __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_selected_get).filter(x => x !== option).forEach(x => {
485
485
  x.selected = false;
@@ -488,12 +488,12 @@ _M3eSelectElement_selectOption = function _M3eSelectElement_selectOption(option)
488
488
  }
489
489
  this.requestUpdate();
490
490
  __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
491
+ this.dispatchEvent(new Event("input", {
492
+ bubbles: true
493
+ }));
491
494
  this.dispatchEvent(new Event("change", {
492
495
  bubbles: true
493
496
  }));
494
- } else {
495
- option.selected = !selected;
496
- __classPrivateFieldGet(this, _M3eSelectElement_instances, "m", _M3eSelectElement_updateSelectionState).call(this, option);
497
497
  }
498
498
  };
499
499
  /** The styles of the element. */
@@ -1 +1 @@
1
- {"version":3,"file":"select.js","sources":["../../src/select/SelectElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n Labelled,\r\n ConstraintValidation,\r\n Dirty,\r\n Disabled,\r\n FormAssociated,\r\n Required,\r\n RequiredConstraintValidation,\r\n Touched,\r\n DesignToken,\r\n formValue,\r\n M3eFocusRingElement,\r\n scrollIntoViewIfNeeded,\r\n Role,\r\n Focusable,\r\n prefersReducedMotion,\r\n forcedColorsActive,\r\n deleteCustomState,\r\n addCustomState,\r\n setCustomState,\r\n customElement,\r\n MutationController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ListKeyManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eFormFieldElement, FormFieldControl } from \"@m3e/web/form-field\";\r\nimport { M3eOptionElement, M3eOptionPanelElement } from \"@m3e/web/option\";\r\n\r\n/**\r\n * A form control that allows users to select a value from a set of predefined options.\r\n *\r\n * @description\r\n * The `m3e-select` component follows Material Design 3 principles and provides a comprehensive\r\n * selection interface for capturing user input. It supports both single and multiple selection modes,\r\n * customizable validation states, and accessible keyboard navigation. The component integrates seamlessly\r\n * with form field containers and dynamically positions its option list menu to ensure optimal viewport\r\n * visibility. Selection changes are communicated through standard form events, enabling predictable integration\r\n * with form submission and reactive state management systems.\r\n *\r\n * @example\r\n * The following demonstrates a `m3e-select` component wrapped in a `m3e-form-field` with a slotted label.\r\n * The label is associated with the select via the `for` and `id` attributes, ensuring accessible form semantics.\r\n * Each `m3e-option` defines an option within the dropdown.\r\n *\r\n * ```html\r\n * <m3e-form-field>\r\n * <label slot=\"label\" for=\"select\">Choose your favorite fruit</label>\r\n * <m3e-select id=\"select\">\r\n * <m3e-option>Apples</m3e-option>\r\n * <m3e-option>Oranges</m3e-option>\r\n * <m3e-option>Bananas</m3e-option>\r\n * <m3e-option>Grapes</m3e-option>\r\n * </m3e-select>\r\n * </m3e-form-field>\r\n * ```\r\n *\r\n * @tag m3e-select\r\n *\r\n * @slot - Renders the options of the select.\r\n * @slot arrow - Renders the dropdown arrow.\r\n * @slot value - Renders the selected value(s).\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator for single select options.\r\n * @attr multi - Whether multiple options can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr panel-class - Class or list of classes to be applied to the select's overlay panel.\r\n * @attr required - Whether the element is required.\r\n *\r\n * @fires input - Emitted when the selected state changes.\r\n * @fires change - Emitted when the selected state changes.\r\n *\r\n * @cssprop --m3e-form-field-font-size - The font size of the select control.\r\n * @cssprop --m3e-form-field-font-weight - The font weight of the select control.\r\n * @cssprop --m3e-form-field-line-height - The line height of the select control.\r\n * @cssprop --m3e-form-field-tracking - The letter spacing of the select control.\r\n * @cssprop --m3e-select-container-shape - The corner radius of the select container.\r\n * @cssprop --m3e-select-disabled-color - The text color when the select is disabled.\r\n * @cssprop --m3e-select-disabled-color-opacity - The opacity level applied to the disabled text color.\r\n * @cssprop --m3e-select-icon-size - The size of the dropdown arrow icon.\r\n */\r\n@customElement(\"m3e-select\")\r\nexport class M3eSelectElement\r\n extends Focusable(\r\n Labelled(\r\n RequiredConstraintValidation(\r\n Dirty(\r\n Touched(\r\n Required(ConstraintValidation(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"combobox\")))))),\r\n ),\r\n ),\r\n ),\r\n ),\r\n )\r\n implements FormFieldControl\r\n{\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: inline-flex;\r\n vertical-align: middle;\r\n outline: none;\r\n position: relative;\r\n font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n min-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n border-radius: var(--m3e-select-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n }\r\n :host(:not(:disabled)) {\r\n cursor: pointer;\r\n }\r\n :host(:disabled) {\r\n color: color-mix(\r\n in srgb,\r\n var(--m3e-select-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-select-disabled-color-opacity, 38%),\r\n transparent\r\n );\r\n }\r\n .options {\r\n display: none;\r\n }\r\n .base {\r\n flex: 1 1 auto;\r\n display: inline-flex;\r\n align-items: center;\r\n overflow: hidden;\r\n }\r\n .arrow-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: var(--_select-arrow-margin-top);\r\n }\r\n ::slotted([slot=\"arrow\"]),\r\n .arrow {\r\n vertical-align: middle;\r\n width: 1em;\r\n height: 1em;\r\n font-size: var(--m3e-select-icon-size, 1.5rem);\r\n }\r\n :host(:is(:state(--open), :--open)) .focus-ring {\r\n display: none;\r\n }\r\n `;\r\n\r\n /** @private */ static __nextId = 0;\r\n\r\n /** @private */ private _options = new Array<M3eOptionElement>();\r\n /** @private */ #clone?: HTMLElement;\r\n\r\n /** @private */ #menu?: M3eOptionPanelElement;\r\n /** @private */ #ignoreKeyUp = false;\r\n /** @private */ #ignoreFocusVisible = false;\r\n\r\n /** @private */ readonly #id = `m3e-select-${M3eSelectElement.__nextId++}`;\r\n /** @private */ readonly #listId = `${this.#id}-list`;\r\n\r\n /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n /** @private */ readonly #keyUpHandler = (e: KeyboardEvent) => this.#handleKeyUp(e);\r\n /** @private */ readonly #menuToggleHandler = (e: ToggleEvent) => this.#handleMenuToggle(e);\r\n /** @private */ readonly #menuPointerDownHandler = (e: PointerEvent) => this.#handleMenuPointerDown(e);\r\n /** @private */ readonly #menuPointerUpHandler = (e: PointerEvent) => this.#handleMenuPointerUp(e);\r\n /** @private */ #menuPressedOption?: M3eOptionElement;\r\n\r\n /** @private */ private readonly _listKeyManager = new ListKeyManager<M3eOptionElement>()\r\n .withWrap()\r\n .withHomeAndEnd()\r\n .withPageUpAndDown()\r\n .withVerticalOrientation()\r\n .withTypeahead()\r\n .onActiveItemChange(() => {\r\n if (this._listKeyManager.activeItem) {\r\n this.#activateOption(this._listKeyManager.activeItem);\r\n }\r\n });\r\n\r\n /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n\r\n constructor() {\r\n super();\r\n\r\n new MutationController(this, {\r\n config: {\r\n childList: true,\r\n subtree: true,\r\n },\r\n callback: () => this.#handleMutation(),\r\n });\r\n }\r\n\r\n /**\r\n * Whether to hide the selection indicator for single select options.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n /**\r\n * Whether multiple options can be selected.\r\n * @default false\r\n */\r\n @property({ type: Boolean }) multi = false;\r\n\r\n /**\r\n * Class or list of classes to be applied to the select's overlay panel.\r\n * @default \"\"\r\n */\r\n @property({ attribute: \"panel-class\" }) panelClass = \"\";\r\n\r\n get #options(): readonly M3eOptionElement[] {\r\n return this._listKeyManager?.items ?? [];\r\n }\r\n\r\n get #selected(): readonly M3eOptionElement[] {\r\n return this.#options.filter((x) => x.selected);\r\n }\r\n\r\n /** The options that can be selected. */\r\n get options(): readonly M3eOptionElement[] {\r\n return this._options ?? [];\r\n }\r\n\r\n /** The selected option(s). */\r\n get selected(): readonly M3eOptionElement[] {\r\n return this.options.filter((x) => x.selected);\r\n }\r\n\r\n /** The selected (enabled) value(s). */\r\n get value(): string | readonly string[] | null {\r\n const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n switch (values.length) {\r\n case 0:\r\n return null;\r\n case 1:\r\n return values[0];\r\n default:\r\n return values;\r\n }\r\n }\r\n\r\n /** @inheritdoc @internal */\r\n override get [formValue]() {\r\n const values = this.value;\r\n if (Array.isArray(values)) {\r\n const data = new FormData();\r\n for (const value of values) {\r\n data.append(this.name, value);\r\n }\r\n return data;\r\n }\r\n return <string | null>values;\r\n }\r\n\r\n /** @inheritdoc */\r\n get shouldLabelFloat(): boolean {\r\n return this.selected.filter((x) => !x.isEmpty).length > 0;\r\n }\r\n\r\n /** @private */\r\n get #formField(): M3eFormFieldElement | null {\r\n return this.closest(\"m3e-form-field\");\r\n }\r\n\r\n /** @inheritdoc */\r\n onContainerClick(): void {\r\n this.#ignoreFocusVisible = true;\r\n this.#toggleMenu();\r\n this.focus({ preventScroll: true });\r\n }\r\n\r\n /**\r\n * Clears the value of the element.\r\n * @param [restoreFocus=false] Whether to restore input focus.\r\n */\r\n clear(restoreFocus = false): void {\r\n const selected = this.#selected;\r\n const willChange = selected.length > 0;\r\n\r\n if (willChange) {\r\n selected.forEach((x) => {\r\n x.selected = false;\r\n this.#updateSelectionState(x);\r\n });\r\n this.requestUpdate();\r\n }\r\n\r\n this.#hideMenu();\r\n\r\n if (willChange) {\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n\r\n if (restoreFocus) {\r\n this.focus();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.ariaHasPopup = \"listbox\";\r\n this.ariaExpanded = \"false\";\r\n\r\n this.addEventListener(\"click\", this.#clickHandler);\r\n this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n this.addEventListener(\"keyup\", this.#keyUpHandler);\r\n\r\n this.#handleMutation();\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n\r\n this.removeEventListener(\"click\", this.#clickHandler);\r\n this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n this.removeEventListener(\"keyup\", this.#keyUpHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"hideSelectionIndicator\")) {\r\n this.#options.forEach((x) => setCustomState(x, \"--hide-selection-indicator\", this.hideSelectionIndicator));\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n super.firstUpdated(_changedProperties);\r\n\r\n this._focusRing?.attach(this);\r\n\r\n if (this.#formField && this._focusRing) {\r\n this._focusRing.style.display = \"none\";\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html` <m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>\r\n <div class=\"base\">\r\n <m3e-text-overflow>\r\n <slot name=\"value\">\r\n ${this.selected\r\n .filter((x) => !x.isEmpty)\r\n .map((x, i) => (i > 0 ? html`<span>, </span>${x.label}` : x.label))}\r\n </slot>\r\n </m3e-text-overflow>\r\n <div class=\"arrow-wrapper\" aria-hidden=\"true\">\r\n <slot name=\"arrow\">\r\n <svg class=\"arrow\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"M480-360 280-560h400L480-360Z\" />\r\n </svg>\r\n </slot>\r\n </div>\r\n </div>\r\n <div class=\"options\" aria-hidden=\"true\">\r\n <slot></slot>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #handleMutation(): void {\r\n this.#clone = <HTMLElement>this.cloneNode(true);\r\n\r\n const { added } = this._listKeyManager.setItems([...this.#clone.querySelectorAll(\"m3e-option\")]);\r\n added.forEach((x) => {\r\n x.id = x.id || `${this.#id}-option-${this._listKeyManager.items.indexOf(x)}`;\r\n setCustomState(x, \"--hide-selection-indicator\", this.hideSelectionIndicator);\r\n });\r\n\r\n this._options = [...this.querySelectorAll(\"m3e-option\")];\r\n\r\n this.#formField?.notifyControlStateChange();\r\n if (this.#menu) {\r\n this.#menu.replaceChildren(...this.#clone.childNodes);\r\n if (this._options.length == 0) {\r\n this.#hideMenu();\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleClick(e: Event): void {\r\n if (e.defaultPrevented || this.disabled) return;\r\n this.#toggleMenu();\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n if (e.defaultPrevented) return;\r\n this.#ignoreFocusVisible = false;\r\n\r\n switch (e.key) {\r\n case \" \":\r\n case \"Enter\":\r\n e.preventDefault();\r\n if (!this.multi) {\r\n if (this.#menu && this._listKeyManager.activeItem) {\r\n this.#selectOption(this._listKeyManager.activeItem);\r\n }\r\n if (this.#menu?.isOpen) {\r\n if (!prefersReducedMotion()) {\r\n setTimeout(() => this.#hideMenu(), 150);\r\n } else {\r\n this.#hideMenu();\r\n }\r\n } else {\r\n this.#showMenu();\r\n }\r\n } else if (!this.#menu) {\r\n this.#ignoreKeyUp = true;\r\n this.#toggleMenu();\r\n }\r\n\r\n break;\r\n\r\n case \"Escape\":\r\n case \"Tab\":\r\n this.#hideMenu();\r\n break;\r\n\r\n case \"Down\":\r\n case \"ArrowDown\":\r\n if (this.multi && !this.#menu) {\r\n this.#toggleMenu();\r\n } else {\r\n this._listKeyManager.onKeyDown(e);\r\n if (!this.#menu && this._listKeyManager.activeItem) {\r\n this.#selectOption(this._listKeyManager.activeItem);\r\n }\r\n }\r\n break;\r\n\r\n default:\r\n this._listKeyManager.onKeyDown(e);\r\n if (!this.multi && !this.#menu && this._listKeyManager.activeItem) {\r\n this.#selectOption(this._listKeyManager.activeItem);\r\n }\r\n break;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleKeyUp(e: KeyboardEvent): void {\r\n if (e.defaultPrevented) return;\r\n\r\n if (this.#ignoreKeyUp) {\r\n this.#ignoreKeyUp = false;\r\n return;\r\n }\r\n\r\n switch (e.key) {\r\n case \" \":\r\n case \"Enter\":\r\n if (!this.multi) return;\r\n e.preventDefault();\r\n if (this.#menu && this._listKeyManager.activeItem) {\r\n this.#selectOption(this._listKeyManager.activeItem);\r\n }\r\n break;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuPointerDown(e: PointerEvent): void {\r\n this.#menuPressedOption = undefined;\r\n\r\n if (e.button === 2) return;\r\n // Prevent click to avoid stealing focus.\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n\r\n const option = <M3eOptionElement | undefined>(\r\n e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n );\r\n\r\n if (option && !option.disabled) {\r\n this.#menuPressedOption = option;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuPointerUp(e: PointerEvent): void {\r\n const pressedOption = this.#menuPressedOption;\r\n this.#menuPressedOption = undefined;\r\n\r\n if (e.button === 2) return;\r\n\r\n if (!pressedOption) return;\r\n\r\n const option = <M3eOptionElement | undefined>(\r\n e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n );\r\n\r\n if (option === pressedOption) {\r\n this.#selectOption(option);\r\n this._listKeyManager.setActiveItem(option);\r\n if (this.multi) {\r\n this.requestUpdate();\r\n }\r\n }\r\n\r\n if (!this.multi) {\r\n if (!prefersReducedMotion()) {\r\n setTimeout(() => this.#hideMenu(), 150);\r\n } else {\r\n this.#hideMenu();\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuToggle(e: ToggleEvent): void {\r\n if (!this.#menu) return;\r\n\r\n if (e.newState !== \"closed\") {\r\n const option = this.#selected.find((x) => !x.disabled) ?? this._listKeyManager.items.find((x) => !x.disabled);\r\n this._listKeyManager.setActiveItem(option);\r\n if (option) {\r\n scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n }\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: e.oldState,\r\n newState: e.newState,\r\n }),\r\n );\r\n } else {\r\n if (prefersReducedMotion()) {\r\n this.#destroyMenu(e);\r\n } else {\r\n // NOTE: use transitionend is preferred but doesn't fire when used here.\r\n // This is a workaround until that is fixed.\r\n setTimeout(() => this.#destroyMenu(e), 100);\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #destroyMenu(e: ToggleEvent): void {\r\n if (!this.#menu) return;\r\n\r\n this.#clone?.replaceChildren(...this.#menu.childNodes);\r\n this.#menu.remove();\r\n this.#menu.removeEventListener(\"toggle\", this.#menuToggleHandler);\r\n this.#menu.removeEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n this.#menu.removeEventListener(\"pointerup\", this.#menuPointerUpHandler);\r\n this.#menu = undefined;\r\n\r\n this.ariaExpanded = \"false\";\r\n this.removeAttribute(\"aria-controls\");\r\n this.removeAttribute(\"aria-owns\");\r\n this.removeAttribute(\"aria-activedescendant\");\r\n this.requestUpdate();\r\n\r\n deleteCustomState(this, \"--open\");\r\n this.#formField?.notifyControlStateChange();\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: e.oldState,\r\n newState: e.newState,\r\n }),\r\n );\r\n }\r\n\r\n /** @private */\r\n #toggleMenu(): void {\r\n if (this.disabled) return;\r\n if (this.#menu) {\r\n this.#hideMenu();\r\n } else {\r\n this.#showMenu();\r\n }\r\n }\r\n\r\n /** @private */\r\n #showMenu(): void {\r\n if (this.#menu || this._options.length == 0) return;\r\n\r\n this.#menu = document.createElement(\"m3e-option-panel\");\r\n if (this.multi) {\r\n this.#menu.ariaMultiSelectable = \"true\";\r\n }\r\n\r\n this.#menu.id = this.#listId;\r\n\r\n if (this.panelClass) {\r\n for (const klass of this.panelClass\r\n .split(/\\s+/)\r\n .map((d) => d.trim())\r\n .filter(Boolean)) {\r\n this.#menu.classList.add(klass);\r\n }\r\n }\r\n\r\n this.#menu.style.overflowX = \"hidden\";\r\n this.#menu.fitAnchorWidth = true;\r\n this.#menu.addEventListener(\"toggle\", this.#menuToggleHandler);\r\n this.#menu.addEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n this.#menu.addEventListener(\"pointerup\", this.#menuPointerUpHandler);\r\n\r\n if (this.#clone) {\r\n this.#menu.replaceChildren(...this.#clone.childNodes);\r\n }\r\n\r\n (this.#formField ?? this).insertAdjacentElement(\"afterend\", this.#menu);\r\n\r\n this.ariaExpanded = \"true\";\r\n this.setAttribute(\"aria-controls\", this.#listId);\r\n this.setAttribute(\"aria-owns\", this.#listId);\r\n this.#formField?.notifyControlStateChange();\r\n\r\n setTimeout(() => {\r\n this.#menu?.show(this, this.#formField?.menuAnchor);\r\n addCustomState(this, \"--open\");\r\n });\r\n }\r\n\r\n /** @private */\r\n #hideMenu(): void {\r\n if (!this.#menu) return;\r\n\r\n this.#menu.hide();\r\n deleteCustomState(this, \"--open\");\r\n }\r\n\r\n /** @private */\r\n #activateOption(option: M3eOptionElement): void {\r\n this.setAttribute(\"aria-activedescendant\", option.id);\r\n if (this.#menu) {\r\n scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n\r\n const focusVisible = !this.#ignoreFocusVisible && (this.matches(\":focus-visible\") || forcedColorsActive());\r\n\r\n this.#options.forEach((x) => {\r\n const active = x === option && focusVisible;\r\n if (active) {\r\n x.focusRing?.show();\r\n x.stateLayer?.show(\"focused\");\r\n } else {\r\n x.focusRing?.hide();\r\n x.stateLayer?.hide(\"focused\");\r\n }\r\n });\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateSelectionState(clone: M3eOptionElement): void {\r\n const option = this._options[this._listKeyManager.items.indexOf(clone)];\r\n if (option) {\r\n option.selected = clone.selected;\r\n }\r\n }\r\n\r\n /** @private */\r\n #selectOption(option: M3eOptionElement): void {\r\n const selected = this.multi ? !option.selected : true;\r\n if (option.selected === selected) return;\r\n\r\n option.selected = selected;\r\n this.#updateSelectionState(option);\r\n\r\n if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n if (!this.multi) {\r\n this.#selected\r\n .filter((x) => x !== option)\r\n .forEach((x) => {\r\n x.selected = false;\r\n this.#updateSelectionState(x);\r\n });\r\n }\r\n\r\n this.requestUpdate();\r\n this.#formField?.notifyControlStateChange();\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n } else {\r\n option.selected = !selected;\r\n this.#updateSelectionState(option);\r\n }\r\n }\r\n}\r\n\r\ninterface M3eSelectElementEventMap extends HTMLElementEventMap {\r\n toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSelectElement {\r\n addEventListener<K extends keyof M3eSelectElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSelectElement, ev: M3eSelectElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eSelectElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSelectElement, ev: M3eSelectElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-select\": M3eSelectElement;\r\n }\r\n}\r\n"],"names":["M3eSelectElement","M3eSelectElement_1","Focusable","Labelled","RequiredConstraintValidation","Dirty","Touched","Required","ConstraintValidation","FormAssociated","Disabled","AttachInternals","Role","LitElement","constructor","_options","Array","_M3eSelectElement_clone","set","_M3eSelectElement_menu","_M3eSelectElement_ignoreKeyUp","_M3eSelectElement_ignoreFocusVisible","_M3eSelectElement_id","__nextId","_M3eSelectElement_listId","__classPrivateFieldGet","_M3eSelectElement_clickHandler","e","call","_M3eSelectElement_keyDownHandler","_M3eSelectElement_keyUpHandler","_M3eSelectElement_menuToggleHandler","_M3eSelectElement_menuPointerDownHandler","_M3eSelectElement_menuPointerUpHandler","_M3eSelectElement_menuPressedOption","_listKeyManager","ListKeyManager","withWrap","withHomeAndEnd","withPageUpAndDown","withVerticalOrientation","withTypeahead","onActiveItemChange","activeItem","_M3eSelectElement_instances","_M3eSelectElement_activateOption","hideSelectionIndicator","multi","panelClass","MutationController","config","childList","subtree","callback","_M3eSelectElement_handleMutation","options","selected","filter","x","value","values","disabled","map","length","WeakMap","WeakSet","_M3eSelectElement_options_get","items","_M3eSelectElement_selected_get","formValue","isArray","data","FormData","append","name","shouldLabelFloat","isEmpty","onContainerClick","__classPrivateFieldSet","_M3eSelectElement_toggleMenu","focus","preventScroll","clear","restoreFocus","willChange","forEach","_M3eSelectElement_updateSelectionState","requestUpdate","_M3eSelectElement_hideMenu","dispatchEvent","Event","bubbles","connectedCallback","ariaHasPopup","ariaExpanded","addEventListener","disconnectedCallback","removeEventListener","update","changedProperties","has","setCustomState","firstUpdated","_changedProperties","_focusRing","attach","_M3eSelectElement_formField_get","style","display","render","html","i","label","closest","cloneNode","added","setItems","querySelectorAll","id","indexOf","notifyControlStateChange","replaceChildren","childNodes","defaultPrevented","key","preventDefault","_M3eSelectElement_selectOption","isOpen","prefersReducedMotion","setTimeout","_M3eSelectElement_showMenu","onKeyDown","undefined","button","stopImmediatePropagation","option","composedPath","find","HTMLElement","tagName","pressedOption","setActiveItem","newState","scrollIntoViewIfNeeded","block","behavior","ToggleEvent","oldState","_M3eSelectElement_destroyMenu","remove","removeAttribute","deleteCustomState","document","createElement","ariaMultiSelectable","klass","split","d","trim","Boolean","classList","add","overflowX","fitAnchorWidth","insertAdjacentElement","setAttribute","show","menuAnchor","addCustomState","hide","focusVisible","matches","forcedColorsActive","active","focusRing","stateLayer","clone","composed","cancelable","styles","css","DesignToken","typescale","standard","body","large","fontSize","fontWeight","lineHeight","tracking","shape","corner","extraSmall","color","onSurface","__decorate","query","prototype","property","attribute","type","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"select.js","sources":["../../src/select/SelectElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n Labelled,\r\n ConstraintValidation,\r\n Dirty,\r\n Disabled,\r\n FormAssociated,\r\n Required,\r\n RequiredConstraintValidation,\r\n Touched,\r\n DesignToken,\r\n formValue,\r\n M3eFocusRingElement,\r\n scrollIntoViewIfNeeded,\r\n Role,\r\n Focusable,\r\n prefersReducedMotion,\r\n forcedColorsActive,\r\n deleteCustomState,\r\n addCustomState,\r\n setCustomState,\r\n customElement,\r\n MutationController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ListKeyManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eFormFieldElement, FormFieldControl } from \"@m3e/web/form-field\";\r\nimport { M3eOptionElement, M3eOptionPanelElement } from \"@m3e/web/option\";\r\n\r\n/**\r\n * A form control that allows users to select a value from a set of predefined options.\r\n *\r\n * @description\r\n * The `m3e-select` component follows Material Design 3 principles and provides a comprehensive\r\n * selection interface for capturing user input. It supports both single and multiple selection modes,\r\n * customizable validation states, and accessible keyboard navigation. The component integrates seamlessly\r\n * with form field containers and dynamically positions its option list menu to ensure optimal viewport\r\n * visibility. Selection changes are communicated through standard form events, enabling predictable integration\r\n * with form submission and reactive state management systems.\r\n *\r\n * @example\r\n * The following demonstrates a `m3e-select` component wrapped in a `m3e-form-field` with a slotted label.\r\n * The label is associated with the select via the `for` and `id` attributes, ensuring accessible form semantics.\r\n * Each `m3e-option` defines an option within the dropdown.\r\n *\r\n * ```html\r\n * <m3e-form-field>\r\n * <label slot=\"label\" for=\"select\">Choose your favorite fruit</label>\r\n * <m3e-select id=\"select\">\r\n * <m3e-option>Apples</m3e-option>\r\n * <m3e-option>Oranges</m3e-option>\r\n * <m3e-option>Bananas</m3e-option>\r\n * <m3e-option>Grapes</m3e-option>\r\n * </m3e-select>\r\n * </m3e-form-field>\r\n * ```\r\n *\r\n * @tag m3e-select\r\n *\r\n * @slot - Renders the options of the select.\r\n * @slot arrow - Renders the dropdown arrow.\r\n * @slot value - Renders the selected value(s).\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator for single select options.\r\n * @attr multi - Whether multiple options can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr panel-class - Class or list of classes to be applied to the select's overlay panel.\r\n * @attr required - Whether the element is required.\r\n *\r\n * @fires beforeinput - Dispatched before the selected state changes.\r\n * @fires input - Dispatched when the selected state changes.\r\n * @fires change - Dispatched when the selected state changes.\r\n *\r\n * @cssprop --m3e-form-field-font-size - The font size of the select control.\r\n * @cssprop --m3e-form-field-font-weight - The font weight of the select control.\r\n * @cssprop --m3e-form-field-line-height - The line height of the select control.\r\n * @cssprop --m3e-form-field-tracking - The letter spacing of the select control.\r\n * @cssprop --m3e-select-container-shape - The corner radius of the select container.\r\n * @cssprop --m3e-select-disabled-color - The text color when the select is disabled.\r\n * @cssprop --m3e-select-disabled-color-opacity - The opacity level applied to the disabled text color.\r\n * @cssprop --m3e-select-icon-size - The size of the dropdown arrow icon.\r\n */\r\n@customElement(\"m3e-select\")\r\nexport class M3eSelectElement\r\n extends Focusable(\r\n Labelled(\r\n RequiredConstraintValidation(\r\n Dirty(\r\n Touched(\r\n Required(ConstraintValidation(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"combobox\")))))),\r\n ),\r\n ),\r\n ),\r\n ),\r\n )\r\n implements FormFieldControl\r\n{\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: inline-flex;\r\n vertical-align: middle;\r\n outline: none;\r\n position: relative;\r\n font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n min-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n border-radius: var(--m3e-select-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n }\r\n :host(:not(:disabled)) {\r\n cursor: pointer;\r\n }\r\n :host(:disabled) {\r\n color: color-mix(\r\n in srgb,\r\n var(--m3e-select-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-select-disabled-color-opacity, 38%),\r\n transparent\r\n );\r\n }\r\n .options {\r\n display: none;\r\n }\r\n .base {\r\n flex: 1 1 auto;\r\n display: inline-flex;\r\n align-items: center;\r\n overflow: hidden;\r\n }\r\n .arrow-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: var(--_select-arrow-margin-top);\r\n }\r\n ::slotted([slot=\"arrow\"]),\r\n .arrow {\r\n vertical-align: middle;\r\n width: 1em;\r\n height: 1em;\r\n font-size: var(--m3e-select-icon-size, 1.5rem);\r\n }\r\n :host(:is(:state(--open), :--open)) .focus-ring {\r\n display: none;\r\n }\r\n `;\r\n\r\n /** @private */ static __nextId = 0;\r\n\r\n /** @private */ private _options = new Array<M3eOptionElement>();\r\n /** @private */ #clone?: HTMLElement;\r\n\r\n /** @private */ #menu?: M3eOptionPanelElement;\r\n /** @private */ #ignoreKeyUp = false;\r\n /** @private */ #ignoreFocusVisible = false;\r\n\r\n /** @private */ readonly #id = `m3e-select-${M3eSelectElement.__nextId++}`;\r\n /** @private */ readonly #listId = `${this.#id}-list`;\r\n\r\n /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n /** @private */ readonly #keyUpHandler = (e: KeyboardEvent) => this.#handleKeyUp(e);\r\n /** @private */ readonly #menuToggleHandler = (e: ToggleEvent) => this.#handleMenuToggle(e);\r\n /** @private */ readonly #menuPointerDownHandler = (e: PointerEvent) => this.#handleMenuPointerDown(e);\r\n /** @private */ readonly #menuPointerUpHandler = (e: PointerEvent) => this.#handleMenuPointerUp(e);\r\n /** @private */ #menuPressedOption?: M3eOptionElement;\r\n\r\n /** @private */ private readonly _listKeyManager = new ListKeyManager<M3eOptionElement>()\r\n .withWrap()\r\n .withHomeAndEnd()\r\n .withPageUpAndDown()\r\n .withVerticalOrientation()\r\n .withTypeahead()\r\n .onActiveItemChange(() => {\r\n if (this._listKeyManager.activeItem) {\r\n this.#activateOption(this._listKeyManager.activeItem);\r\n }\r\n });\r\n\r\n /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n\r\n constructor() {\r\n super();\r\n\r\n new MutationController(this, {\r\n config: {\r\n childList: true,\r\n subtree: true,\r\n },\r\n callback: () => this.#handleMutation(),\r\n });\r\n }\r\n\r\n /**\r\n * Whether to hide the selection indicator for single select options.\r\n * @default false\r\n */\r\n @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n /**\r\n * Whether multiple options can be selected.\r\n * @default false\r\n */\r\n @property({ type: Boolean }) multi = false;\r\n\r\n /**\r\n * Class or list of classes to be applied to the select's overlay panel.\r\n * @default \"\"\r\n */\r\n @property({ attribute: \"panel-class\" }) panelClass = \"\";\r\n\r\n get #options(): readonly M3eOptionElement[] {\r\n return this._listKeyManager?.items ?? [];\r\n }\r\n\r\n get #selected(): readonly M3eOptionElement[] {\r\n return this.#options.filter((x) => x.selected);\r\n }\r\n\r\n /** The options that can be selected. */\r\n get options(): readonly M3eOptionElement[] {\r\n return this._options ?? [];\r\n }\r\n\r\n /** The selected option(s). */\r\n get selected(): readonly M3eOptionElement[] {\r\n return this.options.filter((x) => x.selected);\r\n }\r\n\r\n /** The selected (enabled) value(s). */\r\n get value(): string | readonly string[] | null {\r\n const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n switch (values.length) {\r\n case 0:\r\n return null;\r\n case 1:\r\n return values[0];\r\n default:\r\n return values;\r\n }\r\n }\r\n\r\n /** @inheritdoc @internal */\r\n override get [formValue]() {\r\n const values = this.value;\r\n if (Array.isArray(values)) {\r\n const data = new FormData();\r\n for (const value of values) {\r\n data.append(this.name, value);\r\n }\r\n return data;\r\n }\r\n return <string | null>values;\r\n }\r\n\r\n /** @inheritdoc */\r\n get shouldLabelFloat(): boolean {\r\n return this.selected.filter((x) => !x.isEmpty).length > 0;\r\n }\r\n\r\n /** @private */\r\n get #formField(): M3eFormFieldElement | null {\r\n return this.closest(\"m3e-form-field\");\r\n }\r\n\r\n /** @inheritdoc */\r\n onContainerClick(): void {\r\n this.#ignoreFocusVisible = true;\r\n this.#toggleMenu();\r\n this.focus({ preventScroll: true });\r\n }\r\n\r\n /**\r\n * Clears the value of the element.\r\n * @param [restoreFocus=false] Whether to restore input focus.\r\n */\r\n clear(restoreFocus = false): void {\r\n const selected = this.#selected;\r\n const willChange = selected.length > 0;\r\n\r\n if (willChange) {\r\n selected.forEach((x) => {\r\n x.selected = false;\r\n this.#updateSelectionState(x);\r\n });\r\n this.requestUpdate();\r\n }\r\n\r\n this.#hideMenu();\r\n\r\n if (willChange) {\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n\r\n if (restoreFocus) {\r\n this.focus();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.ariaHasPopup = \"listbox\";\r\n this.ariaExpanded = \"false\";\r\n\r\n this.addEventListener(\"click\", this.#clickHandler);\r\n this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n this.addEventListener(\"keyup\", this.#keyUpHandler);\r\n\r\n this.#handleMutation();\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n\r\n this.removeEventListener(\"click\", this.#clickHandler);\r\n this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n this.removeEventListener(\"keyup\", this.#keyUpHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"hideSelectionIndicator\")) {\r\n this.#options.forEach((x) => setCustomState(x, \"--hide-selection-indicator\", this.hideSelectionIndicator));\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n super.firstUpdated(_changedProperties);\r\n\r\n this._focusRing?.attach(this);\r\n\r\n if (this.#formField && this._focusRing) {\r\n this._focusRing.style.display = \"none\";\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html` <m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>\r\n <div class=\"base\">\r\n <m3e-text-overflow>\r\n <slot name=\"value\">\r\n ${this.selected\r\n .filter((x) => !x.isEmpty)\r\n .map((x, i) => (i > 0 ? html`<span>, </span>${x.label}` : x.label))}\r\n </slot>\r\n </m3e-text-overflow>\r\n <div class=\"arrow-wrapper\" aria-hidden=\"true\">\r\n <slot name=\"arrow\">\r\n <svg class=\"arrow\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"M480-360 280-560h400L480-360Z\" />\r\n </svg>\r\n </slot>\r\n </div>\r\n </div>\r\n <div class=\"options\" aria-hidden=\"true\">\r\n <slot></slot>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #handleMutation(): void {\r\n this.#clone = <HTMLElement>this.cloneNode(true);\r\n\r\n const { added } = this._listKeyManager.setItems([...this.#clone.querySelectorAll(\"m3e-option\")]);\r\n added.forEach((x) => {\r\n x.id = x.id || `${this.#id}-option-${this._listKeyManager.items.indexOf(x)}`;\r\n setCustomState(x, \"--hide-selection-indicator\", this.hideSelectionIndicator);\r\n });\r\n\r\n this._options = [...this.querySelectorAll(\"m3e-option\")];\r\n\r\n this.#formField?.notifyControlStateChange();\r\n if (this.#menu) {\r\n this.#menu.replaceChildren(...this.#clone.childNodes);\r\n if (this._options.length == 0) {\r\n this.#hideMenu();\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleClick(e: Event): void {\r\n if (e.defaultPrevented || this.disabled) return;\r\n this.#toggleMenu();\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n if (e.defaultPrevented) return;\r\n this.#ignoreFocusVisible = false;\r\n\r\n switch (e.key) {\r\n case \" \":\r\n case \"Enter\":\r\n e.preventDefault();\r\n if (!this.multi) {\r\n if (this.#menu && this._listKeyManager.activeItem) {\r\n this.#selectOption(this._listKeyManager.activeItem);\r\n }\r\n if (this.#menu?.isOpen) {\r\n if (!prefersReducedMotion()) {\r\n setTimeout(() => this.#hideMenu(), 150);\r\n } else {\r\n this.#hideMenu();\r\n }\r\n } else {\r\n this.#showMenu();\r\n }\r\n } else if (!this.#menu) {\r\n this.#ignoreKeyUp = true;\r\n this.#toggleMenu();\r\n }\r\n\r\n break;\r\n\r\n case \"Escape\":\r\n case \"Tab\":\r\n this.#hideMenu();\r\n break;\r\n\r\n case \"Down\":\r\n case \"ArrowDown\":\r\n if (this.multi && !this.#menu) {\r\n this.#toggleMenu();\r\n } else {\r\n this._listKeyManager.onKeyDown(e);\r\n if (!this.#menu && this._listKeyManager.activeItem) {\r\n this.#selectOption(this._listKeyManager.activeItem);\r\n }\r\n }\r\n break;\r\n\r\n default:\r\n this._listKeyManager.onKeyDown(e);\r\n if (!this.multi && !this.#menu && this._listKeyManager.activeItem) {\r\n this.#selectOption(this._listKeyManager.activeItem);\r\n }\r\n break;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleKeyUp(e: KeyboardEvent): void {\r\n if (e.defaultPrevented) return;\r\n\r\n if (this.#ignoreKeyUp) {\r\n this.#ignoreKeyUp = false;\r\n return;\r\n }\r\n\r\n switch (e.key) {\r\n case \" \":\r\n case \"Enter\":\r\n if (!this.multi) return;\r\n e.preventDefault();\r\n if (this.#menu && this._listKeyManager.activeItem) {\r\n this.#selectOption(this._listKeyManager.activeItem);\r\n }\r\n break;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuPointerDown(e: PointerEvent): void {\r\n this.#menuPressedOption = undefined;\r\n\r\n if (e.button === 2) return;\r\n // Prevent click to avoid stealing focus.\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n\r\n const option = <M3eOptionElement | undefined>(\r\n e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n );\r\n\r\n if (option && !option.disabled) {\r\n this.#menuPressedOption = option;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuPointerUp(e: PointerEvent): void {\r\n const pressedOption = this.#menuPressedOption;\r\n this.#menuPressedOption = undefined;\r\n\r\n if (e.button === 2) return;\r\n\r\n if (!pressedOption) return;\r\n\r\n const option = <M3eOptionElement | undefined>(\r\n e.composedPath().find((x) => x instanceof HTMLElement && x.tagName === \"M3E-OPTION\")\r\n );\r\n\r\n if (option === pressedOption) {\r\n this.#selectOption(option);\r\n this._listKeyManager.setActiveItem(option);\r\n if (this.multi) {\r\n this.requestUpdate();\r\n }\r\n }\r\n\r\n if (!this.multi) {\r\n if (!prefersReducedMotion()) {\r\n setTimeout(() => this.#hideMenu(), 150);\r\n } else {\r\n this.#hideMenu();\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleMenuToggle(e: ToggleEvent): void {\r\n if (!this.#menu) return;\r\n\r\n if (e.newState !== \"closed\") {\r\n const option = this.#selected.find((x) => !x.disabled) ?? this._listKeyManager.items.find((x) => !x.disabled);\r\n this._listKeyManager.setActiveItem(option);\r\n if (option) {\r\n scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n }\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: e.oldState,\r\n newState: e.newState,\r\n }),\r\n );\r\n } else {\r\n if (prefersReducedMotion()) {\r\n this.#destroyMenu(e);\r\n } else {\r\n // NOTE: use transitionend is preferred but doesn't fire when used here.\r\n // This is a workaround until that is fixed.\r\n setTimeout(() => this.#destroyMenu(e), 100);\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #destroyMenu(e: ToggleEvent): void {\r\n if (!this.#menu) return;\r\n\r\n this.#clone?.replaceChildren(...this.#menu.childNodes);\r\n this.#menu.remove();\r\n this.#menu.removeEventListener(\"toggle\", this.#menuToggleHandler);\r\n this.#menu.removeEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n this.#menu.removeEventListener(\"pointerup\", this.#menuPointerUpHandler);\r\n this.#menu = undefined;\r\n\r\n this.ariaExpanded = \"false\";\r\n this.removeAttribute(\"aria-controls\");\r\n this.removeAttribute(\"aria-owns\");\r\n this.removeAttribute(\"aria-activedescendant\");\r\n this.requestUpdate();\r\n\r\n deleteCustomState(this, \"--open\");\r\n this.#formField?.notifyControlStateChange();\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: e.oldState,\r\n newState: e.newState,\r\n }),\r\n );\r\n }\r\n\r\n /** @private */\r\n #toggleMenu(): void {\r\n if (this.disabled) return;\r\n if (this.#menu) {\r\n this.#hideMenu();\r\n } else {\r\n this.#showMenu();\r\n }\r\n }\r\n\r\n /** @private */\r\n #showMenu(): void {\r\n if (this.#menu || this._options.length == 0) return;\r\n\r\n this.#menu = document.createElement(\"m3e-option-panel\");\r\n if (this.multi) {\r\n this.#menu.ariaMultiSelectable = \"true\";\r\n }\r\n\r\n this.#menu.id = this.#listId;\r\n\r\n if (this.panelClass) {\r\n for (const klass of this.panelClass\r\n .split(/\\s+/)\r\n .map((d) => d.trim())\r\n .filter(Boolean)) {\r\n this.#menu.classList.add(klass);\r\n }\r\n }\r\n\r\n this.#menu.style.overflowX = \"hidden\";\r\n this.#menu.fitAnchorWidth = true;\r\n this.#menu.addEventListener(\"toggle\", this.#menuToggleHandler);\r\n this.#menu.addEventListener(\"pointerdown\", this.#menuPointerDownHandler);\r\n this.#menu.addEventListener(\"pointerup\", this.#menuPointerUpHandler);\r\n\r\n if (this.#clone) {\r\n this.#menu.replaceChildren(...this.#clone.childNodes);\r\n }\r\n\r\n (this.#formField ?? this).insertAdjacentElement(\"afterend\", this.#menu);\r\n\r\n this.ariaExpanded = \"true\";\r\n this.setAttribute(\"aria-controls\", this.#listId);\r\n this.setAttribute(\"aria-owns\", this.#listId);\r\n this.#formField?.notifyControlStateChange();\r\n\r\n setTimeout(() => {\r\n this.#menu?.show(this, this.#formField?.menuAnchor);\r\n addCustomState(this, \"--open\");\r\n });\r\n }\r\n\r\n /** @private */\r\n #hideMenu(): void {\r\n if (!this.#menu) return;\r\n\r\n this.#menu.hide();\r\n deleteCustomState(this, \"--open\");\r\n }\r\n\r\n /** @private */\r\n #activateOption(option: M3eOptionElement): void {\r\n this.setAttribute(\"aria-activedescendant\", option.id);\r\n if (this.#menu) {\r\n scrollIntoViewIfNeeded(option, this.#menu, { block: \"nearest\", behavior: \"instant\" });\r\n\r\n const focusVisible = !this.#ignoreFocusVisible && (this.matches(\":focus-visible\") || forcedColorsActive());\r\n\r\n this.#options.forEach((x) => {\r\n const active = x === option && focusVisible;\r\n if (active) {\r\n x.focusRing?.show();\r\n x.stateLayer?.show(\"focused\");\r\n } else {\r\n x.focusRing?.hide();\r\n x.stateLayer?.hide(\"focused\");\r\n }\r\n });\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateSelectionState(clone: M3eOptionElement): void {\r\n const option = this._options[this._listKeyManager.items.indexOf(clone)];\r\n if (option) {\r\n option.selected = clone.selected;\r\n }\r\n }\r\n\r\n /** @private */\r\n #selectOption(option: M3eOptionElement): void {\r\n const selected = this.multi ? !option.selected : true;\r\n if (option.selected === selected) return;\r\n\r\n if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n option.selected = selected;\r\n this.#updateSelectionState(option);\r\n\r\n if (!this.multi) {\r\n this.#selected\r\n .filter((x) => x !== option)\r\n .forEach((x) => {\r\n x.selected = false;\r\n this.#updateSelectionState(x);\r\n });\r\n }\r\n\r\n this.requestUpdate();\r\n this.#formField?.notifyControlStateChange();\r\n\r\n this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n }\r\n}\r\n\r\ninterface M3eSelectElementEventMap extends HTMLElementEventMap {\r\n toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSelectElement {\r\n addEventListener<K extends keyof M3eSelectElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSelectElement, ev: M3eSelectElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eSelectElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSelectElement, ev: M3eSelectElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-select\": M3eSelectElement;\r\n }\r\n}\r\n"],"names":["M3eSelectElement","M3eSelectElement_1","Focusable","Labelled","RequiredConstraintValidation","Dirty","Touched","Required","ConstraintValidation","FormAssociated","Disabled","AttachInternals","Role","LitElement","constructor","_options","Array","_M3eSelectElement_clone","set","_M3eSelectElement_menu","_M3eSelectElement_ignoreKeyUp","_M3eSelectElement_ignoreFocusVisible","_M3eSelectElement_id","__nextId","_M3eSelectElement_listId","__classPrivateFieldGet","_M3eSelectElement_clickHandler","e","call","_M3eSelectElement_keyDownHandler","_M3eSelectElement_keyUpHandler","_M3eSelectElement_menuToggleHandler","_M3eSelectElement_menuPointerDownHandler","_M3eSelectElement_menuPointerUpHandler","_M3eSelectElement_menuPressedOption","_listKeyManager","ListKeyManager","withWrap","withHomeAndEnd","withPageUpAndDown","withVerticalOrientation","withTypeahead","onActiveItemChange","activeItem","_M3eSelectElement_instances","_M3eSelectElement_activateOption","hideSelectionIndicator","multi","panelClass","MutationController","config","childList","subtree","callback","_M3eSelectElement_handleMutation","options","selected","filter","x","value","values","disabled","map","length","WeakMap","WeakSet","_M3eSelectElement_options_get","items","_M3eSelectElement_selected_get","formValue","isArray","data","FormData","append","name","shouldLabelFloat","isEmpty","onContainerClick","__classPrivateFieldSet","_M3eSelectElement_toggleMenu","focus","preventScroll","clear","restoreFocus","willChange","forEach","_M3eSelectElement_updateSelectionState","requestUpdate","_M3eSelectElement_hideMenu","dispatchEvent","Event","bubbles","connectedCallback","ariaHasPopup","ariaExpanded","addEventListener","disconnectedCallback","removeEventListener","update","changedProperties","has","setCustomState","firstUpdated","_changedProperties","_focusRing","attach","_M3eSelectElement_formField_get","style","display","render","html","i","label","closest","cloneNode","added","setItems","querySelectorAll","id","indexOf","notifyControlStateChange","replaceChildren","childNodes","defaultPrevented","key","preventDefault","_M3eSelectElement_selectOption","isOpen","prefersReducedMotion","setTimeout","_M3eSelectElement_showMenu","onKeyDown","undefined","button","stopImmediatePropagation","option","composedPath","find","HTMLElement","tagName","pressedOption","setActiveItem","newState","scrollIntoViewIfNeeded","block","behavior","ToggleEvent","oldState","_M3eSelectElement_destroyMenu","remove","removeAttribute","deleteCustomState","document","createElement","ariaMultiSelectable","klass","split","d","trim","Boolean","classList","add","overflowX","fitAnchorWidth","insertAdjacentElement","setAttribute","show","menuAnchor","addCustomState","hide","focusVisible","matches","forcedColorsActive","active","focusRing","stateLayer","clone","cancelable","styles","css","DesignToken","typescale","standard","body","large","fontSize","fontWeight","lineHeight","tracking","shape","corner","extraSmall","color","onSurface","__decorate","query","prototype","property","attribute","type","customElement"],"mappings":";;;;;;;;;;;;;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDG;AAEI,IAAMA,gBAAgB,GAAAC,kBAAA,GAAtB,MAAMD,gBACX,SAAQE,SAAS,CACfC,QAAQ,CACNC,4BAA4B,CAC1BC,KAAK,CACHC,OAAO,CACLC,QAAQ,CAACC,oBAAoB,CAACC,cAAc,CAACC,QAAQ,CAACC,eAAe,CAACC,IAAI,CAACC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACxG,CACF,CACF,CACF,CACF,CAAA;AAwFDC,EAAAA,WAAAA,GAAA;AACE,IAAA,KAAK,EAAE;;AAjCT;AAAwB,IAAA,IAAA,CAAAC,QAAQ,GAAG,IAAIC,KAAK,EAAoB;AAChE;AAAgBC,IAAAA,uBAAA,CAAAC,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAEhB;AAAgBC,IAAAA,sBAAA,CAAAD,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAChB;AAAgBE,IAAAA,6BAAA,CAAAF,GAAA,CAAA,IAAA,EAAe,KAAK,CAAA;AACpC;AAAgBG,IAAAA,oCAAA,CAAAH,GAAA,CAAA,IAAA,EAAsB,KAAK,CAAA;AAE3C;IAAyBI,+BAAM,CAAA,WAAA,EAAcrB,kBAAgB,CAACsB,QAAQ,EAAE,CAAA,CAAE,CAAA;AAC1E;AAAyBC,IAAAA,wBAAA,CAAAN,GAAA,CAAA,IAAA,EAAU,CAAA,EAAGO,uBAAA,IAAI,EAAAH,oBAAA,EAAA,GAAA,CAAI,OAAO,CAAA;AAErD;IAAyBI,8BAAA,CAAAR,GAAA,CAAA,IAAA,EAAiBS,CAAQ,IAAKF,sBAAA,CAAA,IAAI,kEAAa,CAAAG,IAAA,CAAjB,IAAI,EAAcD,CAAC,CAAC,CAAA;AAC3E;IAAyBE,gCAAA,CAAAX,GAAA,CAAA,IAAA,EAAmBS,CAAgB,IAAKF,sBAAA,CAAA,IAAI,oEAAe,CAAAG,IAAA,CAAnB,IAAI,EAAgBD,CAAC,CAAC,CAAA;AACvF;IAAyBG,8BAAA,CAAAZ,GAAA,CAAA,IAAA,EAAiBS,CAAgB,IAAKF,sBAAA,CAAA,IAAI,kEAAa,CAAAG,IAAA,CAAjB,IAAI,EAAcD,CAAC,CAAC,CAAA;AACnF;IAAyBI,mCAAA,CAAAb,GAAA,CAAA,IAAA,EAAsBS,CAAc,IAAKF,sBAAA,CAAA,IAAI,uEAAkB,CAAAG,IAAA,CAAtB,IAAI,EAAmBD,CAAC,CAAC,CAAA;AAC3F;IAAyBK,wCAAA,CAAAd,GAAA,CAAA,IAAA,EAA2BS,CAAe,IAAKF,sBAAA,CAAA,IAAI,4EAAuB,CAAAG,IAAA,CAA3B,IAAI,EAAwBD,CAAC,CAAC,CAAA;AACtG;IAAyBM,sCAAA,CAAAf,GAAA,CAAA,IAAA,EAAyBS,CAAe,IAAKF,sBAAA,CAAA,IAAI,0EAAqB,CAAAG,IAAA,CAAzB,IAAI,EAAsBD,CAAC,CAAC,CAAA;AAClG;AAAgBO,IAAAA,mCAAA,CAAAhB,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAEhB;AAAiC,IAAA,IAAA,CAAAiB,eAAe,GAAG,IAAIC,cAAc,EAAoB,CACtFC,QAAQ,EAAE,CACVC,cAAc,EAAE,CAChBC,iBAAiB,EAAE,CACnBC,uBAAuB,EAAE,CACzBC,aAAa,EAAE,CACfC,kBAAkB,CAAC,MAAK;AACvB,MAAA,IAAI,IAAI,CAACP,eAAe,CAACQ,UAAU,EAAE;AACnClB,QAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAC,gCAAA,CAAgB,CAAAjB,IAAA,CAApB,IAAI,EAAiB,IAAI,CAACO,eAAe,CAACQ,UAAU,CAAC;AACvD,MAAA;AACF,IAAA,CAAC,CAAC;AAgBJ;;;AAGG;IACiE,IAAA,CAAAG,sBAAsB,GAAG,KAAK;AAElG;;;AAGG;IAC0B,IAAA,CAAAC,KAAK,GAAG,KAAK;AAE1C;;;AAGG;IACqC,IAAA,CAAAC,UAAU,GAAG,EAAE;IAzBrD,IAAIC,kBAAkB,CAAC,IAAI,EAAE;AAC3BC,MAAAA,MAAM,EAAE;AACNC,QAAAA,SAAS,EAAE,IAAI;AACfC,QAAAA,OAAO,EAAE;OACV;AACDC,MAAAA,QAAQ,EAAEA,MAAM5B,uBAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAU,gCAAA,CAAgB,CAAA1B,IAAA,CAApB,IAAI;AACrB,KAAA,CAAC;AACJ,EAAA;AA4BA;EACA,IAAI2B,OAAOA,GAAA;AACT,IAAA,OAAO,IAAI,CAACxC,QAAQ,IAAI,EAAE;AAC5B,EAAA;AAEA;EACA,IAAIyC,QAAQA,GAAA;IACV,OAAO,IAAI,CAACD,OAAO,CAACE,MAAM,CAAEC,CAAC,IAAKA,CAAC,CAACF,QAAQ,CAAC;AAC/C,EAAA;AAEA;EACA,IAAIG,KAAKA,GAAA;IACP,MAAMC,MAAM,GAAG,IAAI,CAACJ,QAAQ,CAACC,MAAM,CAAEC,CAAC,IAAK,CAACA,CAAC,CAACG,QAAQ,CAAC,CAACC,GAAG,CAAEJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAAC;IAC3E,QAAQC,MAAM,CAACG,MAAM;AACnB,MAAA,KAAK,CAAC;AACJ,QAAA,OAAO,IAAI;AACb,MAAA,KAAK,CAAC;QACJ,OAAOH,MAAM,CAAC,CAAC,CAAC;AAClB,MAAA;AACE,QAAA,OAAOA,MAAM;AACjB;AACF,EAAA;AAEA;EACA,MAAa3C,uBAAA,GAAA,IAAA+C,OAAA,EAAA,EAAA7C,sBAAA,GAAA,IAAA6C,OAAA,EAAA,EAAA5C,6BAAA,GAAA,IAAA4C,OAAA,EAAA,EAAA3C,oCAAA,GAAA,IAAA2C,OAAA,EAAA,EAAA1C,oBAAA,GAAA,IAAA0C,OAAA,EAAA,EAAAxC,wBAAA,GAAA,IAAAwC,OAAA,EAAA,EAAAtC,8BAAA,GAAA,IAAAsC,OAAA,EAAA,EAAAnC,gCAAA,GAAA,IAAAmC,OAAA,EAAA,EAAAlC,8BAAA,GAAA,IAAAkC,OAAA,EAAA,EAAAjC,mCAAA,GAAA,IAAAiC,OAAA,EAAA,EAAAhC,wCAAA,GAAA,IAAAgC,OAAA,EAAA,EAAA/B,sCAAA,GAAA,IAAA+B,OAAA,EAAA,EAAA9B,mCAAA,GAAA,IAAA8B,OAAA,EAAA,EAAApB,2BAAA,GAAA,IAAAqB,OAAA,EAAA,EAAAC,6BAAA,GAAA,SAAAA,6BAAAA,GAAA;AA/BX,IAAA,OAAO,IAAI,CAAC/B,eAAe,EAAEgC,KAAK,IAAI,EAAE;AAC1C,EAAA,CAAC,EAAAC,8BAAA,GAAA,SAAAA,8BAAAA,GAAA;AAGC,IAAA,OAAO3C,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAsB,6BAAA,CAAS,CAACT,MAAM,CAAEC,CAAC,IAAKA,CAAC,CAACF,QAAQ,CAAC;EAChD,CAAC,EA0Baa,SAAS,EAAA,GAAC;AACtB,IAAA,MAAMT,MAAM,GAAG,IAAI,CAACD,KAAK;AACzB,IAAA,IAAI3C,KAAK,CAACsD,OAAO,CAACV,MAAM,CAAC,EAAE;AACzB,MAAA,MAAMW,IAAI,GAAG,IAAIC,QAAQ,EAAE;AAC3B,MAAA,KAAK,MAAMb,KAAK,IAAIC,MAAM,EAAE;QAC1BW,IAAI,CAACE,MAAM,CAAC,IAAI,CAACC,IAAI,EAAEf,KAAK,CAAC;AAC/B,MAAA;AACA,MAAA,OAAOY,IAAI;AACb,IAAA;AACA,IAAA,OAAsBX,MAAM;AAC9B,EAAA;AAEA;EACA,IAAIe,gBAAgBA,GAAA;AAClB,IAAA,OAAO,IAAI,CAACnB,QAAQ,CAACC,MAAM,CAAEC,CAAC,IAAK,CAACA,CAAC,CAACkB,OAAO,CAAC,CAACb,MAAM,GAAG,CAAC;AAC3D,EAAA;AAOA;AACAc,EAAAA,gBAAgBA,GAAA;IACdC,sBAAA,CAAA,IAAI,EAAAzD,oCAAA,EAAuB,IAAI,EAAA,GAAA,CAAA;AAC/BI,IAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAmC,4BAAA,CAAY,CAAAnD,IAAA,CAAhB,IAAI,CAAc;IAClB,IAAI,CAACoD,KAAK,CAAC;AAAEC,MAAAA,aAAa,EAAE;AAAI,KAAE,CAAC;AACrC,EAAA;AAEA;;;AAGG;AACHC,EAAAA,KAAKA,CAACC,YAAY,GAAG,KAAK,EAAA;IACxB,MAAM3B,QAAQ,GAAG/B,sBAAA,CAAA,IAAI,mEAAU;AAC/B,IAAA,MAAM2D,UAAU,GAAG5B,QAAQ,CAACO,MAAM,GAAG,CAAC;AAEtC,IAAA,IAAIqB,UAAU,EAAE;AACd5B,MAAAA,QAAQ,CAAC6B,OAAO,CAAE3B,CAAC,IAAI;QACrBA,CAAC,CAACF,QAAQ,GAAG,KAAK;AAClB/B,QAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA0C,sCAAA,CAAsB,CAAA1D,IAAA,CAA1B,IAAI,EAAuB8B,CAAC,CAAC;AAC/B,MAAA,CAAC,CAAC;MACF,IAAI,CAAC6B,aAAa,EAAE;AACtB,IAAA;AAEA9D,IAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA4C,0BAAA,CAAU,CAAA5D,IAAA,CAAd,IAAI,CAAY;AAEhB,IAAA,IAAIwD,UAAU,EAAE;AACd,MAAA,IAAI,CAACK,aAAa,CAAC,IAAIC,KAAK,CAAC,QAAQ,EAAE;AAAEC,QAAAA,OAAO,EAAE;AAAI,OAAE,CAAC,CAAC;AAC5D,IAAA;AAEA,IAAA,IAAIR,YAAY,EAAE;MAChB,IAAI,CAACH,KAAK,EAAE;AACd,IAAA;AACF,EAAA;AAEA;AACSY,EAAAA,iBAAiBA,GAAA;IACxB,KAAK,CAACA,iBAAiB,EAAE;IAEzB,IAAI,CAACC,YAAY,GAAG,SAAS;IAC7B,IAAI,CAACC,YAAY,GAAG,OAAO;AAE3B,IAAA,IAAI,CAACC,gBAAgB,CAAC,OAAO,EAAEtE,sBAAA,CAAA,IAAI,EAAAC,8BAAA,EAAA,GAAA,CAAc,CAAC;AAClD,IAAA,IAAI,CAACqE,gBAAgB,CAAC,SAAS,EAAEtE,sBAAA,CAAA,IAAI,EAAAI,gCAAA,EAAA,GAAA,CAAgB,CAAC;AACtD,IAAA,IAAI,CAACkE,gBAAgB,CAAC,OAAO,EAAEtE,sBAAA,CAAA,IAAI,EAAAK,8BAAA,EAAA,GAAA,CAAc,CAAC;AAElDL,IAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAU,gCAAA,CAAgB,CAAA1B,IAAA,CAApB,IAAI,CAAkB;AACxB,EAAA;AAEA;AACSoE,EAAAA,oBAAoBA,GAAA;IAC3B,KAAK,CAACA,oBAAoB,EAAE;AAE5B,IAAA,IAAI,CAACC,mBAAmB,CAAC,OAAO,EAAExE,sBAAA,CAAA,IAAI,EAAAC,8BAAA,EAAA,GAAA,CAAc,CAAC;AACrD,IAAA,IAAI,CAACuE,mBAAmB,CAAC,SAAS,EAAExE,sBAAA,CAAA,IAAI,EAAAI,gCAAA,EAAA,GAAA,CAAgB,CAAC;AACzD,IAAA,IAAI,CAACoE,mBAAmB,CAAC,OAAO,EAAExE,sBAAA,CAAA,IAAI,EAAAK,8BAAA,EAAA,GAAA,CAAc,CAAC;AACvD,EAAA;AAEA;EACmBoE,MAAMA,CAACC,iBAAuC,EAAA;AAC/D,IAAA,KAAK,CAACD,MAAM,CAACC,iBAAiB,CAAC;AAE/B,IAAA,IAAIA,iBAAiB,CAACC,GAAG,CAAC,wBAAwB,CAAC,EAAE;MACnD3E,sBAAA,CAAA,IAAI,kEAAS,CAAC4D,OAAO,CAAE3B,CAAC,IAAK2C,cAAc,CAAC3C,CAAC,EAAE,4BAA4B,EAAE,IAAI,CAACZ,sBAAsB,CAAC,CAAC;AAC5G,IAAA;AACF,EAAA;AAEA;EACmBwD,YAAYA,CAACC,kBAAwC,EAAA;AACtE,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;AAEtC,IAAA,IAAI,CAACC,UAAU,EAAEC,MAAM,CAAC,IAAI,CAAC;AAE7B,IAAA,IAAIhF,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA8D,+BAAA,CAAW,IAAI,IAAI,CAACF,UAAU,EAAE;AACtC,MAAA,IAAI,CAACA,UAAU,CAACG,KAAK,CAACC,OAAO,GAAG,MAAM;AACxC,IAAA;AACF,EAAA;AAEA;AACmBC,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,4GAAA,EAID,IAAI,CAACtD,QAAQ,CACZC,MAAM,CAAEC,CAAC,IAAK,CAACA,CAAC,CAACkB,OAAO,CAAC,CACzBd,GAAG,CAAC,CAACJ,CAAC,EAAEqD,CAAC,KAAMA,CAAC,GAAG,CAAC,GAAGD,IAAI,CAAA,eAAA,EAAkBpD,CAAC,CAACsD,KAAK,CAAA,CAAE,GAAGtD,CAAC,CAACsD,KAAM,CAAC,CAAA,yRAAA,CAapE;AACX,EAAA;;;AAtGE,EAAA,OAAO,IAAI,CAACC,OAAO,CAAC,gBAAgB,CAAC;AACvC,CAAC;;AAyGCnC,EAAAA,sBAAA,CAAA,IAAI,2BAAuB,IAAI,CAACoC,SAAS,CAAC,IAAI,CAAC,EAAA,GAAA,CAAA;EAE/C,MAAM;AAAEC,IAAAA;GAAO,GAAG,IAAI,CAAChF,eAAe,CAACiF,QAAQ,CAAC,CAAC,GAAG3F,sBAAA,CAAA,IAAI,+BAAO,CAAC4F,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;AAChGF,EAAAA,KAAK,CAAC9B,OAAO,CAAE3B,CAAC,IAAI;IAClBA,CAAC,CAAC4D,EAAE,GAAG5D,CAAC,CAAC4D,EAAE,IAAI,CAAA,EAAG7F,sBAAA,CAAA,IAAI,EAAAH,oBAAA,EAAA,GAAA,CAAI,CAAA,QAAA,EAAW,IAAI,CAACa,eAAe,CAACgC,KAAK,CAACoD,OAAO,CAAC7D,CAAC,CAAC,CAAA,CAAE;IAC5E2C,cAAc,CAAC3C,CAAC,EAAE,4BAA4B,EAAE,IAAI,CAACZ,sBAAsB,CAAC;AAC9E,EAAA,CAAC,CAAC;EAEF,IAAI,CAAC/B,QAAQ,GAAG,CAAC,GAAG,IAAI,CAACsG,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAExD5F,EAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA8D,+BAAA,CAAW,EAAEc,wBAAwB,EAAE;EAC3C,IAAI/F,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,EAAE;IACdM,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAACsG,eAAe,CAAC,GAAGhG,sBAAA,CAAA,IAAI,EAAAR,uBAAA,EAAA,GAAA,CAAO,CAACyG,UAAU,CAAC;AACrD,IAAA,IAAI,IAAI,CAAC3G,QAAQ,CAACgD,MAAM,IAAI,CAAC,EAAE;AAC7BtC,MAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA4C,0BAAA,CAAU,CAAA5D,IAAA,CAAd,IAAI,CAAY;AAClB,IAAA;AACF,EAAA;AACF,CAAC;uEAGYD,CAAQ,EAAA;AACnB,EAAA,IAAIA,CAAC,CAACgG,gBAAgB,IAAI,IAAI,CAAC9D,QAAQ,EAAE;AACzCpC,EAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAmC,4BAAA,CAAY,CAAAnD,IAAA,CAAhB,IAAI,CAAc;AACpB,CAAC;2EAGcD,CAAgB,EAAA;EAC7B,IAAIA,CAAC,CAACgG,gBAAgB,EAAE;EACxB7C,sBAAA,CAAA,IAAI,EAAAzD,oCAAA,EAAuB,KAAK,EAAA,GAAA,CAAA;EAEhC,QAAQM,CAAC,CAACiG,GAAG;AACX,IAAA,KAAK,GAAG;AACR,IAAA,KAAK,OAAO;MACVjG,CAAC,CAACkG,cAAc,EAAE;AAClB,MAAA,IAAI,CAAC,IAAI,CAAC9E,KAAK,EAAE;AACf,QAAA,IAAItB,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,IAAI,IAAI,CAACgB,eAAe,CAACQ,UAAU,EAAE;AACjDlB,UAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAkF,8BAAA,CAAc,CAAAlG,IAAA,CAAlB,IAAI,EAAe,IAAI,CAACO,eAAe,CAACQ,UAAU,CAAC;AACrD,QAAA;QACA,IAAIlB,uBAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,EAAE4G,MAAM,EAAE;AACtB,UAAA,IAAI,CAACC,oBAAoB,EAAE,EAAE;AAC3BC,YAAAA,UAAU,CAAC,MAAMxG,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA4C,0BAAA,CAAU,CAAA5D,IAAA,CAAd,IAAI,CAAY,EAAE,GAAG,CAAC;AACzC,UAAA,CAAC,MAAM;AACLH,YAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA4C,0BAAA,CAAU,CAAA5D,IAAA,CAAd,IAAI,CAAY;AAClB,UAAA;AACF,QAAA,CAAC,MAAM;AACLH,UAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAsF,0BAAA,CAAU,CAAAtG,IAAA,CAAd,IAAI,CAAY;AAClB,QAAA;MACF,CAAC,MAAM,IAAI,CAACH,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,EAAE;QACtB2D,sBAAA,CAAA,IAAI,EAAA1D,6BAAA,EAAgB,IAAI,EAAA,GAAA,CAAA;AACxBK,QAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAmC,4BAAA,CAAY,CAAAnD,IAAA,CAAhB,IAAI,CAAc;AACpB,MAAA;AAEA,MAAA;AAEF,IAAA,KAAK,QAAQ;AACb,IAAA,KAAK,KAAK;AACRH,MAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA4C,0BAAA,CAAU,CAAA5D,IAAA,CAAd,IAAI,CAAY;AAChB,MAAA;AAEF,IAAA,KAAK,MAAM;AACX,IAAA,KAAK,WAAW;AACd,MAAA,IAAI,IAAI,CAACmB,KAAK,IAAI,CAACtB,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,EAAE;AAC7BM,QAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAmC,4BAAA,CAAY,CAAAnD,IAAA,CAAhB,IAAI,CAAc;AACpB,MAAA,CAAC,MAAM;AACL,QAAA,IAAI,CAACO,eAAe,CAACgG,SAAS,CAACxG,CAAC,CAAC;AACjC,QAAA,IAAI,CAACF,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,IAAI,IAAI,CAACgB,eAAe,CAACQ,UAAU,EAAE;AAClDlB,UAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAkF,8BAAA,CAAc,CAAAlG,IAAA,CAAlB,IAAI,EAAe,IAAI,CAACO,eAAe,CAACQ,UAAU,CAAC;AACrD,QAAA;AACF,MAAA;AACA,MAAA;AAEF,IAAA;AACE,MAAA,IAAI,CAACR,eAAe,CAACgG,SAAS,CAACxG,CAAC,CAAC;MACjC,IAAI,CAAC,IAAI,CAACoB,KAAK,IAAI,CAACtB,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,IAAI,IAAI,CAACgB,eAAe,CAACQ,UAAU,EAAE;AACjElB,QAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAkF,8BAAA,CAAc,CAAAlG,IAAA,CAAlB,IAAI,EAAe,IAAI,CAACO,eAAe,CAACQ,UAAU,CAAC;AACrD,MAAA;AACA,MAAA;AACJ;AACF,CAAC;uEAGYhB,CAAgB,EAAA;EAC3B,IAAIA,CAAC,CAACgG,gBAAgB,EAAE;EAExB,IAAIlG,sBAAA,CAAA,IAAI,EAAAL,6BAAA,EAAA,GAAA,CAAa,EAAE;IACrB0D,sBAAA,CAAA,IAAI,EAAA1D,6BAAA,EAAgB,KAAK,EAAA,GAAA,CAAA;AACzB,IAAA;AACF,EAAA;EAEA,QAAQO,CAAC,CAACiG,GAAG;AACX,IAAA,KAAK,GAAG;AACR,IAAA,KAAK,OAAO;AACV,MAAA,IAAI,CAAC,IAAI,CAAC7E,KAAK,EAAE;MACjBpB,CAAC,CAACkG,cAAc,EAAE;AAClB,MAAA,IAAIpG,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,IAAI,IAAI,CAACgB,eAAe,CAACQ,UAAU,EAAE;AACjDlB,QAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAkF,8BAAA,CAAc,CAAAlG,IAAA,CAAlB,IAAI,EAAe,IAAI,CAACO,eAAe,CAACQ,UAAU,CAAC;AACrD,MAAA;AACA,MAAA;AACJ;AACF,CAAC;2FAGsBhB,CAAe,EAAA;EACpCmD,sBAAA,CAAA,IAAI,EAAA5C,mCAAA,EAAsBkG,SAAS,EAAA,GAAA,CAAA;AAEnC,EAAA,IAAIzG,CAAC,CAAC0G,MAAM,KAAK,CAAC,EAAE;AACpB;EACA1G,CAAC,CAACkG,cAAc,EAAE;EAClBlG,CAAC,CAAC2G,wBAAwB,EAAE;EAE5B,MAAMC,MAAM,GACV5G,CAAC,CAAC6G,YAAY,EAAE,CAACC,IAAI,CAAE/E,CAAC,IAAKA,CAAC,YAAYgF,WAAW,IAAIhF,CAAC,CAACiF,OAAO,KAAK,YAAY,CACpF;AAED,EAAA,IAAIJ,MAAM,IAAI,CAACA,MAAM,CAAC1E,QAAQ,EAAE;IAC9BiB,sBAAA,CAAA,IAAI,EAAA5C,mCAAA,EAAsBqG,MAAM,EAAA,GAAA,CAAA;AAClC,EAAA;AACF,CAAC;uFAGoB5G,CAAe,EAAA;EAClC,MAAMiH,aAAa,GAAGnH,sBAAA,CAAA,IAAI,2CAAmB;EAC7CqD,sBAAA,CAAA,IAAI,EAAA5C,mCAAA,EAAsBkG,SAAS,EAAA,GAAA,CAAA;AAEnC,EAAA,IAAIzG,CAAC,CAAC0G,MAAM,KAAK,CAAC,EAAE;EAEpB,IAAI,CAACO,aAAa,EAAE;EAEpB,MAAML,MAAM,GACV5G,CAAC,CAAC6G,YAAY,EAAE,CAACC,IAAI,CAAE/E,CAAC,IAAKA,CAAC,YAAYgF,WAAW,IAAIhF,CAAC,CAACiF,OAAO,KAAK,YAAY,CACpF;EAED,IAAIJ,MAAM,KAAKK,aAAa,EAAE;AAC5BnH,IAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAkF,8BAAA,CAAc,CAAAlG,IAAA,CAAlB,IAAI,EAAe2G,MAAM,CAAC;AAC1B,IAAA,IAAI,CAACpG,eAAe,CAAC0G,aAAa,CAACN,MAAM,CAAC;IAC1C,IAAI,IAAI,CAACxF,KAAK,EAAE;MACd,IAAI,CAACwC,aAAa,EAAE;AACtB,IAAA;AACF,EAAA;AAEA,EAAA,IAAI,CAAC,IAAI,CAACxC,KAAK,EAAE;AACf,IAAA,IAAI,CAACiF,oBAAoB,EAAE,EAAE;AAC3BC,MAAAA,UAAU,CAAC,MAAMxG,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA4C,0BAAA,CAAU,CAAA5D,IAAA,CAAd,IAAI,CAAY,EAAE,GAAG,CAAC;AACzC,IAAA,CAAC,MAAM;AACLH,MAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA4C,0BAAA,CAAU,CAAA5D,IAAA,CAAd,IAAI,CAAY;AAClB,IAAA;AACF,EAAA;AACF,CAAC;iFAGiBD,CAAc,EAAA;EAC9B,IAAI,CAACF,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,EAAE;AAEjB,EAAA,IAAIQ,CAAC,CAACmH,QAAQ,KAAK,QAAQ,EAAE;AAC3B,IAAA,MAAMP,MAAM,GAAG9G,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAwB,8BAAA,CAAU,CAACqE,IAAI,CAAE/E,CAAC,IAAK,CAACA,CAAC,CAACG,QAAQ,CAAC,IAAI,IAAI,CAAC1B,eAAe,CAACgC,KAAK,CAACsE,IAAI,CAAE/E,CAAC,IAAK,CAACA,CAAC,CAACG,QAAQ,CAAC;AAC7G,IAAA,IAAI,CAAC1B,eAAe,CAAC0G,aAAa,CAACN,MAAM,CAAC;AAC1C,IAAA,IAAIA,MAAM,EAAE;MACVQ,sBAAsB,CAACR,MAAM,EAAE9G,sBAAA,CAAA,IAAI,8BAAM,EAAE;AAAEuH,QAAAA,KAAK,EAAE,SAAS;AAAEC,QAAAA,QAAQ,EAAE;AAAS,OAAE,CAAC;AACvF,IAAA;AACA,IAAA,IAAI,CAACxD,aAAa,CAChB,IAAIyD,WAAW,CAAC,QAAQ,EAAE;MACxBC,QAAQ,EAAExH,CAAC,CAACwH,QAAQ;MACpBL,QAAQ,EAAEnH,CAAC,CAACmH;AACb,KAAA,CAAC,CACH;AACH,EAAA,CAAC,MAAM;IACL,IAAId,oBAAoB,EAAE,EAAE;AAC1BvG,MAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAwG,6BAAA,CAAa,CAAAxH,IAAA,CAAjB,IAAI,EAAcD,CAAC,CAAC;AACtB,IAAA,CAAC,MAAM;AACL;AACA;MACAsG,UAAU,CAAC,MAAMxG,uBAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAwG,6BAAA,CAAa,CAAAxH,IAAA,CAAjB,IAAI,EAAcD,CAAC,CAAC,EAAE,GAAG,CAAC;AAC7C,IAAA;AACF,EAAA;AACF,CAAC;uEAGYA,CAAc,EAAA;EACzB,IAAI,CAACF,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,EAAE;EAEjBM,sBAAA,CAAA,IAAI,EAAAR,uBAAA,EAAA,GAAA,CAAO,EAAEwG,eAAe,CAAC,GAAGhG,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAACuG,UAAU,CAAC;EACtDjG,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAACkI,MAAM,EAAE;EACnB5H,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAAC8E,mBAAmB,CAAC,QAAQ,EAAExE,sBAAA,CAAA,IAAI,EAAAM,mCAAA,EAAA,GAAA,CAAmB,CAAC;EACjEN,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAAC8E,mBAAmB,CAAC,aAAa,EAAExE,sBAAA,CAAA,IAAI,EAAAO,wCAAA,EAAA,GAAA,CAAwB,CAAC;EAC3EP,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAAC8E,mBAAmB,CAAC,WAAW,EAAExE,sBAAA,CAAA,IAAI,EAAAQ,sCAAA,EAAA,GAAA,CAAsB,CAAC;EACvE6C,sBAAA,CAAA,IAAI,EAAA3D,sBAAA,EAASiH,SAAS,EAAA,GAAA,CAAA;EAEtB,IAAI,CAACtC,YAAY,GAAG,OAAO;AAC3B,EAAA,IAAI,CAACwD,eAAe,CAAC,eAAe,CAAC;AACrC,EAAA,IAAI,CAACA,eAAe,CAAC,WAAW,CAAC;AACjC,EAAA,IAAI,CAACA,eAAe,CAAC,uBAAuB,CAAC;EAC7C,IAAI,CAAC/D,aAAa,EAAE;AAEpBgE,EAAAA,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC;AACjC9H,EAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA8D,+BAAA,CAAW,EAAEc,wBAAwB,EAAE;AAE3C,EAAA,IAAI,CAAC/B,aAAa,CAChB,IAAIyD,WAAW,CAAC,QAAQ,EAAE;IACxBC,QAAQ,EAAExH,CAAC,CAACwH,QAAQ;IACpBL,QAAQ,EAAEnH,CAAC,CAACmH;AACb,GAAA,CAAC,CACH;AACH,CAAC;;EAIC,IAAI,IAAI,CAACjF,QAAQ,EAAE;EACnB,IAAIpC,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,EAAE;AACdM,IAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA4C,0BAAA,CAAU,CAAA5D,IAAA,CAAd,IAAI,CAAY;AAClB,EAAA,CAAC,MAAM;AACLH,IAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAsF,0BAAA,CAAU,CAAAtG,IAAA,CAAd,IAAI,CAAY;AAClB,EAAA;AACF,CAAC;;AAIC,EAAA,IAAIH,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,IAAI,IAAI,CAACJ,QAAQ,CAACgD,MAAM,IAAI,CAAC,EAAE;AAE7Ce,EAAAA,sBAAA,CAAA,IAAI,0BAAS0E,QAAQ,CAACC,aAAa,CAAC,kBAAkB,CAAC,EAAA,GAAA,CAAA;EACvD,IAAI,IAAI,CAAC1G,KAAK,EAAE;IACdtB,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAACuI,mBAAmB,GAAG,MAAM;AACzC,EAAA;AAEAjI,EAAAA,sBAAA,CAAA,IAAI,8BAAM,CAAC6F,EAAE,GAAG7F,sBAAA,CAAA,IAAI,gCAAQ;EAE5B,IAAI,IAAI,CAACuB,UAAU,EAAE;IACnB,KAAK,MAAM2G,KAAK,IAAI,IAAI,CAAC3G,UAAU,CAChC4G,KAAK,CAAC,KAAK,CAAC,CACZ9F,GAAG,CAAE+F,CAAC,IAAKA,CAAC,CAACC,IAAI,EAAE,CAAC,CACpBrG,MAAM,CAACsG,OAAO,CAAC,EAAE;AAClBtI,MAAAA,sBAAA,CAAA,IAAI,8BAAM,CAACuI,SAAS,CAACC,GAAG,CAACN,KAAK,CAAC;AACjC,IAAA;AACF,EAAA;AAEAlI,EAAAA,sBAAA,CAAA,IAAI,8BAAM,CAACkF,KAAK,CAACuD,SAAS,GAAG,QAAQ;EACrCzI,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAACgJ,cAAc,GAAG,IAAI;EAChC1I,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAAC4E,gBAAgB,CAAC,QAAQ,EAAEtE,sBAAA,CAAA,IAAI,EAAAM,mCAAA,EAAA,GAAA,CAAmB,CAAC;EAC9DN,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAAC4E,gBAAgB,CAAC,aAAa,EAAEtE,sBAAA,CAAA,IAAI,EAAAO,wCAAA,EAAA,GAAA,CAAwB,CAAC;EACxEP,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAAC4E,gBAAgB,CAAC,WAAW,EAAEtE,sBAAA,CAAA,IAAI,EAAAQ,sCAAA,EAAA,GAAA,CAAsB,CAAC;EAEpE,IAAIR,sBAAA,CAAA,IAAI,EAAAR,uBAAA,EAAA,GAAA,CAAO,EAAE;IACfQ,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAACsG,eAAe,CAAC,GAAGhG,sBAAA,CAAA,IAAI,EAAAR,uBAAA,EAAA,GAAA,CAAO,CAACyG,UAAU,CAAC;AACvD,EAAA;EAEA,CAACjG,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA8D,+BAAA,CAAW,IAAI,IAAI,EAAE0D,qBAAqB,CAAC,UAAU,EAAE3I,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAAC;EAEvE,IAAI,CAAC2E,YAAY,GAAG,MAAM;AAC1B,EAAA,IAAI,CAACuE,YAAY,CAAC,eAAe,EAAE5I,sBAAA,CAAA,IAAI,EAAAD,wBAAA,EAAA,GAAA,CAAQ,CAAC;AAChD,EAAA,IAAI,CAAC6I,YAAY,CAAC,WAAW,EAAE5I,sBAAA,CAAA,IAAI,EAAAD,wBAAA,EAAA,GAAA,CAAQ,CAAC;AAC5CC,EAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA8D,+BAAA,CAAW,EAAEc,wBAAwB,EAAE;AAE3CS,EAAAA,UAAU,CAAC,MAAK;IACdxG,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,EAAEmJ,IAAI,CAAC,IAAI,EAAE7I,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA8D,+BAAA,CAAW,EAAE6D,UAAU,CAAC;AACnDC,IAAAA,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC;AAChC,EAAA,CAAC,CAAC;AACJ,CAAC;;EAIC,IAAI,CAAC/I,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,EAAE;EAEjBM,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,CAACsJ,IAAI,EAAE;AACjBlB,EAAAA,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC;AACnC,CAAC;6EAGehB,MAAwB,EAAA;EACtC,IAAI,CAAC8B,YAAY,CAAC,uBAAuB,EAAE9B,MAAM,CAACjB,EAAE,CAAC;EACrD,IAAI7F,sBAAA,CAAA,IAAI,EAAAN,sBAAA,EAAA,GAAA,CAAM,EAAE;IACd4H,sBAAsB,CAACR,MAAM,EAAE9G,sBAAA,CAAA,IAAI,8BAAM,EAAE;AAAEuH,MAAAA,KAAK,EAAE,SAAS;AAAEC,MAAAA,QAAQ,EAAE;AAAS,KAAE,CAAC;IAErF,MAAMyB,YAAY,GAAG,CAACjJ,uBAAA,IAAI,EAAAJ,oCAAA,EAAA,GAAA,CAAoB,KAAK,IAAI,CAACsJ,OAAO,CAAC,gBAAgB,CAAC,IAAIC,kBAAkB,EAAE,CAAC;AAE1GnJ,IAAAA,sBAAA,CAAA,IAAI,kEAAS,CAAC4D,OAAO,CAAE3B,CAAC,IAAI;AAC1B,MAAA,MAAMmH,MAAM,GAAGnH,CAAC,KAAK6E,MAAM,IAAImC,YAAY;AAC3C,MAAA,IAAIG,MAAM,EAAE;AACVnH,QAAAA,CAAC,CAACoH,SAAS,EAAER,IAAI,EAAE;AACnB5G,QAAAA,CAAC,CAACqH,UAAU,EAAET,IAAI,CAAC,SAAS,CAAC;AAC/B,MAAA,CAAC,MAAM;AACL5G,QAAAA,CAAC,CAACoH,SAAS,EAAEL,IAAI,EAAE;AACnB/G,QAAAA,CAAC,CAACqH,UAAU,EAAEN,IAAI,CAAC,SAAS,CAAC;AAC/B,MAAA;AACF,IAAA,CAAC,CAAC;AACJ,EAAA;AACF,CAAC;yFAGqBO,KAAuB,EAAA;AAC3C,EAAA,MAAMzC,MAAM,GAAG,IAAI,CAACxH,QAAQ,CAAC,IAAI,CAACoB,eAAe,CAACgC,KAAK,CAACoD,OAAO,CAACyD,KAAK,CAAC,CAAC;AACvE,EAAA,IAAIzC,MAAM,EAAE;AACVA,IAAAA,MAAM,CAAC/E,QAAQ,GAAGwH,KAAK,CAACxH,QAAQ;AAClC,EAAA;AACF,CAAC;yEAGa+E,MAAwB,EAAA;EACpC,MAAM/E,QAAQ,GAAG,IAAI,CAACT,KAAK,GAAG,CAACwF,MAAM,CAAC/E,QAAQ,GAAG,IAAI;AACrD,EAAA,IAAI+E,MAAM,CAAC/E,QAAQ,KAAKA,QAAQ,EAAE;EAElC,IAAI,IAAI,CAACiC,aAAa,CAAC,IAAIC,KAAK,CAAC,aAAa,EAAE;AAAEC,IAAAA,OAAO,EAAE,IAAI;AAAEsF,IAAAA,UAAU,EAAE;GAAM,CAAC,CAAC,EAAE;IACrF1C,MAAM,CAAC/E,QAAQ,GAAGA,QAAQ;AAC1B/B,IAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA0C,sCAAA,CAAsB,CAAA1D,IAAA,CAA1B,IAAI,EAAuB2G,MAAM,CAAC;AAElC,IAAA,IAAI,CAAC,IAAI,CAACxF,KAAK,EAAE;MACftB,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAAwB,8BAAA,CAAU,CACXX,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAK6E,MAAM,CAAC,CAC3BlD,OAAO,CAAE3B,CAAC,IAAI;QACbA,CAAC,CAACF,QAAQ,GAAG,KAAK;AAClB/B,QAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA0C,sCAAA,CAAsB,CAAA1D,IAAA,CAA1B,IAAI,EAAuB8B,CAAC,CAAC;AAC/B,MAAA,CAAC,CAAC;AACN,IAAA;IAEA,IAAI,CAAC6B,aAAa,EAAE;AACpB9D,IAAAA,sBAAA,CAAA,IAAI,EAAAmB,2BAAA,EAAA,GAAA,EAAA8D,+BAAA,CAAW,EAAEc,wBAAwB,EAAE;AAE3C,IAAA,IAAI,CAAC/B,aAAa,CAAC,IAAIC,KAAK,CAAC,OAAO,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAI,KAAE,CAAC,CAAC;AACzD,IAAA,IAAI,CAACF,aAAa,CAAC,IAAIC,KAAK,CAAC,QAAQ,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAI,KAAE,CAAC,CAAC;AAC5D,EAAA;AACF,CAAC;AA9kBD;AACgB3F,gBAAA,CAAAkL,MAAM,GAAmBC,GAAG,CAAA,oIAAA,EAMKC,WAAW,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,CAAA,kDAAA,EAC9CL,WAAW,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACE,UAAU,CAAA,kDAAA,EACpDN,WAAW,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACG,UAAU,CAAA,kDAAA,EACpDP,WAAW,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACI,QAAQ,CAAA,iDAAA,EACnDR,WAAW,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACG,UAAU,CAAA,oDAAA,EACjDP,WAAW,CAACS,KAAK,CAACC,MAAM,CAACC,UAAU,CAAA,gIAAA,EAQjDX,WAAW,CAACY,KAAK,CAACC,SAAS,CAAA,2fAAA,CAnB9C;AAkDtB;AAAuBjM,gBAAA,CAAAuB,QAAQ,GAAG,CAAC;AAgCoB2K,UAAA,CAAA,CAAtCC,KAAK,CAAC,aAAa,CAAC,CAAmD,EAAAnM,gBAAA,CAAAoM,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAkBpBF,UAAA,CAAA,CAAnEG,QAAQ,CAAC;AAAEC,EAAAA,SAAS,EAAE,0BAA0B;AAAEC,EAAAA,IAAI,EAAExC;AAAO,CAAE,CAAC,CAAgC,EAAA/J,gBAAA,CAAAoM,SAAA,EAAA,wBAAA,EAAA,MAAA,CAAA;AAMtEF,UAAA,CAAA,CAA5BG,QAAQ,CAAC;AAAEE,EAAAA,IAAI,EAAExC;CAAS,CAAC,CAAe,EAAA/J,gBAAA,CAAAoM,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMHF,UAAA,CAAA,CAAvCG,QAAQ,CAAC;AAAEC,EAAAA,SAAS,EAAE;CAAe,CAAC,CAAiB,EAAAtM,gBAAA,CAAAoM,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AA/H7CpM,gBAAgB,GAAAC,kBAAA,GAAAiM,UAAA,CAAA,CAD5BM,aAAa,CAAC,YAAY,CAAC,CACf,EAAAxM,gBAAgB,CA6lB5B;;;;"}
@@ -3,5 +3,5 @@
3
3
  * Copyright (c) 2025–2026 matraic
4
4
  * See LICENSE file in the project root for full license text.
5
5
  */
6
- import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as i}from"tslib";import{LitElement as s,html as a,css as n}from"lit";import{query as h,property as l}from"lit/decorators.js";import{Focusable as o,Labelled as r,RequiredConstraintValidation as c,Dirty as d,Touched as f,Required as m,ConstraintValidation as p,FormAssociated as u,Disabled as v,AttachInternals as g,Role as w,MutationController as y,formValue as b,setCustomState as E,prefersReducedMotion as M,scrollIntoViewIfNeeded as k,deleteCustomState as _,addCustomState as S,forcedColorsActive as I,DesignToken as C,customElement as K}from"@m3e/web/core";import{ListKeyManager as x}from"@m3e/web/core/a11y";var A,L,W,T,$,P,D,N,O,U,q,H,R,z,B,j,F,V,X,Z,G,J,Q,Y,tt,et,it,st,at,nt,ht,lt;let ot=lt=class extends(o(r(c(d(f(m(p(u(v(g(w(s,"combobox")))))))))))){constructor(){super(),A.add(this),this._options=new Array,L.set(this,void 0),W.set(this,void 0),T.set(this,!1),$.set(this,!1),P.set(this,"m3e-select-"+lt.__nextId++),D.set(this,`${t(this,P,"f")}-list`),N.set(this,e=>t(this,A,"m",X).call(this,e)),O.set(this,e=>t(this,A,"m",Z).call(this,e)),U.set(this,e=>t(this,A,"m",G).call(this,e)),q.set(this,e=>t(this,A,"m",Y).call(this,e)),H.set(this,e=>t(this,A,"m",J).call(this,e)),R.set(this,e=>t(this,A,"m",Q).call(this,e)),z.set(this,void 0),this._listKeyManager=(new x).withWrap().withHomeAndEnd().withPageUpAndDown().withVerticalOrientation().withTypeahead().onActiveItemChange(()=>{this._listKeyManager.activeItem&&t(this,A,"m",at).call(this,this._listKeyManager.activeItem)}),this.hideSelectionIndicator=!1,this.multi=!1,this.panelClass="",new y(this,{config:{childList:!0,subtree:!0},callback:()=>t(this,A,"m",V).call(this)})}get options(){return this._options??[]}get selected(){return this.options.filter(t=>t.selected)}get value(){const t=this.selected.filter(t=>!t.disabled).map(t=>t.value);switch(t.length){case 0:return null;case 1:return t[0];default:return t}}get[(L=new WeakMap,W=new WeakMap,T=new WeakMap,$=new WeakMap,P=new WeakMap,D=new WeakMap,N=new WeakMap,O=new WeakMap,U=new WeakMap,q=new WeakMap,H=new WeakMap,R=new WeakMap,z=new WeakMap,A=new WeakSet,B=function(){return this._listKeyManager?.items??[]},j=function(){return t(this,A,"a",B).filter(t=>t.selected)},b)](){const t=this.value;if(Array.isArray(t)){const e=new FormData;for(const i of t)e.append(this.name,i);return e}return t}get shouldLabelFloat(){return this.selected.filter(t=>!t.isEmpty).length>0}onContainerClick(){e(this,$,!0,"f"),t(this,A,"m",et).call(this),this.focus({preventScroll:!0})}clear(e=!1){const i=t(this,A,"a",j),s=i.length>0;s&&(i.forEach(e=>{e.selected=!1,t(this,A,"m",nt).call(this,e)}),this.requestUpdate()),t(this,A,"m",st).call(this),s&&this.dispatchEvent(new Event("change",{bubbles:!0})),e&&this.focus()}connectedCallback(){super.connectedCallback(),this.ariaHasPopup="listbox",this.ariaExpanded="false",this.addEventListener("click",t(this,N,"f")),this.addEventListener("keydown",t(this,O,"f")),this.addEventListener("keyup",t(this,U,"f")),t(this,A,"m",V).call(this)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,N,"f")),this.removeEventListener("keydown",t(this,O,"f")),this.removeEventListener("keyup",t(this,U,"f"))}update(e){super.update(e),e.has("hideSelectionIndicator")&&t(this,A,"a",B).forEach(t=>E(t,"--hide-selection-indicator",this.hideSelectionIndicator))}firstUpdated(e){super.firstUpdated(e),this._focusRing?.attach(this),t(this,A,"a",F)&&this._focusRing&&(this._focusRing.style.display="none")}render(){return a`<m3e-focus-ring class="focus-ring"></m3e-focus-ring><div class="base"><m3e-text-overflow><slot name="value">${this.selected.filter(t=>!t.isEmpty).map((t,e)=>e>0?a`<span>, </span>${t.label}`:t.label)}</slot></m3e-text-overflow><div class="arrow-wrapper" aria-hidden="true"><slot name="arrow"><svg class="arrow" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg></slot></div></div><div class="options" aria-hidden="true"><slot></slot></div>`}};F=function(){return this.closest("m3e-form-field")},V=function(){e(this,L,this.cloneNode(!0),"f");const{added:i}=this._listKeyManager.setItems([...t(this,L,"f").querySelectorAll("m3e-option")]);i.forEach(e=>{e.id=e.id||`${t(this,P,"f")}-option-${this._listKeyManager.items.indexOf(e)}`,E(e,"--hide-selection-indicator",this.hideSelectionIndicator)}),this._options=[...this.querySelectorAll("m3e-option")],t(this,A,"a",F)?.notifyControlStateChange(),t(this,W,"f")&&(t(this,W,"f").replaceChildren(...t(this,L,"f").childNodes),0==this._options.length&&t(this,A,"m",st).call(this))},X=function(e){e.defaultPrevented||this.disabled||t(this,A,"m",et).call(this)},Z=function(i){if(!i.defaultPrevented)switch(e(this,$,!1,"f"),i.key){case" ":case"Enter":i.preventDefault(),this.multi?t(this,W,"f")||(e(this,T,!0,"f"),t(this,A,"m",et).call(this)):(t(this,W,"f")&&this._listKeyManager.activeItem&&t(this,A,"m",ht).call(this,this._listKeyManager.activeItem),t(this,W,"f")?.isOpen?M()?t(this,A,"m",st).call(this):setTimeout(()=>t(this,A,"m",st).call(this),150):t(this,A,"m",it).call(this));break;case"Escape":case"Tab":t(this,A,"m",st).call(this);break;case"Down":case"ArrowDown":this.multi&&!t(this,W,"f")?t(this,A,"m",et).call(this):(this._listKeyManager.onKeyDown(i),!t(this,W,"f")&&this._listKeyManager.activeItem&&t(this,A,"m",ht).call(this,this._listKeyManager.activeItem));break;default:this._listKeyManager.onKeyDown(i),this.multi||t(this,W,"f")||!this._listKeyManager.activeItem||t(this,A,"m",ht).call(this,this._listKeyManager.activeItem)}},G=function(i){if(!i.defaultPrevented)if(t(this,T,"f"))e(this,T,!1,"f");else switch(i.key){case" ":case"Enter":if(!this.multi)return;i.preventDefault(),t(this,W,"f")&&this._listKeyManager.activeItem&&t(this,A,"m",ht).call(this,this._listKeyManager.activeItem)}},J=function(t){if(e(this,z,void 0,"f"),2===t.button)return;t.preventDefault(),t.stopImmediatePropagation();const i=t.composedPath().find(t=>t instanceof HTMLElement&&"M3E-OPTION"===t.tagName);i&&!i.disabled&&e(this,z,i,"f")},Q=function(i){const s=t(this,z,"f");if(e(this,z,void 0,"f"),2===i.button)return;if(!s)return;const a=i.composedPath().find(t=>t instanceof HTMLElement&&"M3E-OPTION"===t.tagName);a===s&&(t(this,A,"m",ht).call(this,a),this._listKeyManager.setActiveItem(a),this.multi&&this.requestUpdate()),this.multi||(M()?t(this,A,"m",st).call(this):setTimeout(()=>t(this,A,"m",st).call(this),150))},Y=function(e){if(t(this,W,"f"))if("closed"!==e.newState){const i=t(this,A,"a",j).find(t=>!t.disabled)??this._listKeyManager.items.find(t=>!t.disabled);this._listKeyManager.setActiveItem(i),i&&k(i,t(this,W,"f"),{block:"nearest",behavior:"instant"}),this.dispatchEvent(new ToggleEvent("toggle",{oldState:e.oldState,newState:e.newState}))}else M()?t(this,A,"m",tt).call(this,e):setTimeout(()=>t(this,A,"m",tt).call(this,e),100)},tt=function(i){t(this,W,"f")&&(t(this,L,"f")?.replaceChildren(...t(this,W,"f").childNodes),t(this,W,"f").remove(),t(this,W,"f").removeEventListener("toggle",t(this,q,"f")),t(this,W,"f").removeEventListener("pointerdown",t(this,H,"f")),t(this,W,"f").removeEventListener("pointerup",t(this,R,"f")),e(this,W,void 0,"f"),this.ariaExpanded="false",this.removeAttribute("aria-controls"),this.removeAttribute("aria-owns"),this.removeAttribute("aria-activedescendant"),this.requestUpdate(),_(this,"--open"),t(this,A,"a",F)?.notifyControlStateChange(),this.dispatchEvent(new ToggleEvent("toggle",{oldState:i.oldState,newState:i.newState})))},et=function(){this.disabled||(t(this,W,"f")?t(this,A,"m",st).call(this):t(this,A,"m",it).call(this))},it=function(){if(!t(this,W,"f")&&0!=this._options.length){if(e(this,W,document.createElement("m3e-option-panel"),"f"),this.multi&&(t(this,W,"f").ariaMultiSelectable="true"),t(this,W,"f").id=t(this,D,"f"),this.panelClass)for(const e of this.panelClass.split(/\s+/).map(t=>t.trim()).filter(Boolean))t(this,W,"f").classList.add(e);t(this,W,"f").style.overflowX="hidden",t(this,W,"f").fitAnchorWidth=!0,t(this,W,"f").addEventListener("toggle",t(this,q,"f")),t(this,W,"f").addEventListener("pointerdown",t(this,H,"f")),t(this,W,"f").addEventListener("pointerup",t(this,R,"f")),t(this,L,"f")&&t(this,W,"f").replaceChildren(...t(this,L,"f").childNodes),(t(this,A,"a",F)??this).insertAdjacentElement("afterend",t(this,W,"f")),this.ariaExpanded="true",this.setAttribute("aria-controls",t(this,D,"f")),this.setAttribute("aria-owns",t(this,D,"f")),t(this,A,"a",F)?.notifyControlStateChange(),setTimeout(()=>{t(this,W,"f")?.show(this,t(this,A,"a",F)?.menuAnchor),S(this,"--open")})}},st=function(){t(this,W,"f")&&(t(this,W,"f").hide(),_(this,"--open"))},at=function(e){if(this.setAttribute("aria-activedescendant",e.id),t(this,W,"f")){k(e,t(this,W,"f"),{block:"nearest",behavior:"instant"});const i=!t(this,$,"f")&&(this.matches(":focus-visible")||I());t(this,A,"a",B).forEach(t=>{t===e&&i?(t.focusRing?.show(),t.stateLayer?.show("focused")):(t.focusRing?.hide(),t.stateLayer?.hide("focused"))})}},nt=function(t){const e=this._options[this._listKeyManager.items.indexOf(t)];e&&(e.selected=t.selected)},ht=function(e){const i=!this.multi||!e.selected;e.selected!==i&&(e.selected=i,t(this,A,"m",nt).call(this,e),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.multi||t(this,A,"a",j).filter(t=>t!==e).forEach(e=>{e.selected=!1,t(this,A,"m",nt).call(this,e)}),this.requestUpdate(),t(this,A,"a",F)?.notifyControlStateChange(),this.dispatchEvent(new Event("change",{bubbles:!0}))):(e.selected=!i,t(this,A,"m",nt).call(this,e)))},ot.styles=n`:host { display: inline-flex; vertical-align: middle; outline: none; position: relative; font-size: var(--m3e-form-field-font-size, ${C.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${C.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${C.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${C.typescale.standard.body.large.tracking}); min-height: var(--m3e-form-field-line-height, ${C.typescale.standard.body.large.lineHeight}); border-radius: var(--m3e-select-container-shape, ${C.shape.corner.extraSmall}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) { color: color-mix( in srgb, var(--m3e-select-disabled-color, ${C.color.onSurface}) var(--m3e-select-disabled-color-opacity, 38%), transparent ); } .options { display: none; } .base { flex: 1 1 auto; display: inline-flex; align-items: center; overflow: hidden; } .arrow-wrapper { display: flex; align-items: center; justify-content: center; margin-top: var(--_select-arrow-margin-top); } ::slotted([slot="arrow"]), .arrow { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-select-icon-size, 1.5rem); } :host(:is(:state(--open), :--open)) .focus-ring { display: none; }`,ot.__nextId=0,i([h(".focus-ring")],ot.prototype,"_focusRing",void 0),i([l({attribute:"hide-selection-indicator",type:Boolean})],ot.prototype,"hideSelectionIndicator",void 0),i([l({type:Boolean})],ot.prototype,"multi",void 0),i([l({attribute:"panel-class"})],ot.prototype,"panelClass",void 0),ot=lt=i([K("m3e-select")],ot);export{ot as M3eSelectElement};
6
+ import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as i}from"tslib";import{LitElement as s,html as a,css as n}from"lit";import{query as h,property as l}from"lit/decorators.js";import{Focusable as o,Labelled as r,RequiredConstraintValidation as c,Dirty as d,Touched as f,Required as m,ConstraintValidation as p,FormAssociated as u,Disabled as v,AttachInternals as g,Role as w,MutationController as y,formValue as b,setCustomState as E,prefersReducedMotion as M,scrollIntoViewIfNeeded as k,deleteCustomState as _,addCustomState as S,forcedColorsActive as I,DesignToken as C,customElement as K}from"@m3e/web/core";import{ListKeyManager as x}from"@m3e/web/core/a11y";var A,L,W,T,$,P,D,N,O,U,q,H,R,z,B,j,F,V,X,Z,G,J,Q,Y,tt,et,it,st,at,nt,ht,lt;let ot=lt=class extends(o(r(c(d(f(m(p(u(v(g(w(s,"combobox")))))))))))){constructor(){super(),A.add(this),this._options=new Array,L.set(this,void 0),W.set(this,void 0),T.set(this,!1),$.set(this,!1),P.set(this,"m3e-select-"+lt.__nextId++),D.set(this,`${t(this,P,"f")}-list`),N.set(this,e=>t(this,A,"m",X).call(this,e)),O.set(this,e=>t(this,A,"m",Z).call(this,e)),U.set(this,e=>t(this,A,"m",G).call(this,e)),q.set(this,e=>t(this,A,"m",Y).call(this,e)),H.set(this,e=>t(this,A,"m",J).call(this,e)),R.set(this,e=>t(this,A,"m",Q).call(this,e)),z.set(this,void 0),this._listKeyManager=(new x).withWrap().withHomeAndEnd().withPageUpAndDown().withVerticalOrientation().withTypeahead().onActiveItemChange(()=>{this._listKeyManager.activeItem&&t(this,A,"m",at).call(this,this._listKeyManager.activeItem)}),this.hideSelectionIndicator=!1,this.multi=!1,this.panelClass="",new y(this,{config:{childList:!0,subtree:!0},callback:()=>t(this,A,"m",V).call(this)})}get options(){return this._options??[]}get selected(){return this.options.filter(t=>t.selected)}get value(){const t=this.selected.filter(t=>!t.disabled).map(t=>t.value);switch(t.length){case 0:return null;case 1:return t[0];default:return t}}get[(L=new WeakMap,W=new WeakMap,T=new WeakMap,$=new WeakMap,P=new WeakMap,D=new WeakMap,N=new WeakMap,O=new WeakMap,U=new WeakMap,q=new WeakMap,H=new WeakMap,R=new WeakMap,z=new WeakMap,A=new WeakSet,B=function(){return this._listKeyManager?.items??[]},j=function(){return t(this,A,"a",B).filter(t=>t.selected)},b)](){const t=this.value;if(Array.isArray(t)){const e=new FormData;for(const i of t)e.append(this.name,i);return e}return t}get shouldLabelFloat(){return this.selected.filter(t=>!t.isEmpty).length>0}onContainerClick(){e(this,$,!0,"f"),t(this,A,"m",et).call(this),this.focus({preventScroll:!0})}clear(e=!1){const i=t(this,A,"a",j),s=i.length>0;s&&(i.forEach(e=>{e.selected=!1,t(this,A,"m",nt).call(this,e)}),this.requestUpdate()),t(this,A,"m",st).call(this),s&&this.dispatchEvent(new Event("change",{bubbles:!0})),e&&this.focus()}connectedCallback(){super.connectedCallback(),this.ariaHasPopup="listbox",this.ariaExpanded="false",this.addEventListener("click",t(this,N,"f")),this.addEventListener("keydown",t(this,O,"f")),this.addEventListener("keyup",t(this,U,"f")),t(this,A,"m",V).call(this)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,N,"f")),this.removeEventListener("keydown",t(this,O,"f")),this.removeEventListener("keyup",t(this,U,"f"))}update(e){super.update(e),e.has("hideSelectionIndicator")&&t(this,A,"a",B).forEach(t=>E(t,"--hide-selection-indicator",this.hideSelectionIndicator))}firstUpdated(e){super.firstUpdated(e),this._focusRing?.attach(this),t(this,A,"a",F)&&this._focusRing&&(this._focusRing.style.display="none")}render(){return a`<m3e-focus-ring class="focus-ring"></m3e-focus-ring><div class="base"><m3e-text-overflow><slot name="value">${this.selected.filter(t=>!t.isEmpty).map((t,e)=>e>0?a`<span>, </span>${t.label}`:t.label)}</slot></m3e-text-overflow><div class="arrow-wrapper" aria-hidden="true"><slot name="arrow"><svg class="arrow" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg></slot></div></div><div class="options" aria-hidden="true"><slot></slot></div>`}};F=function(){return this.closest("m3e-form-field")},V=function(){e(this,L,this.cloneNode(!0),"f");const{added:i}=this._listKeyManager.setItems([...t(this,L,"f").querySelectorAll("m3e-option")]);i.forEach(e=>{e.id=e.id||`${t(this,P,"f")}-option-${this._listKeyManager.items.indexOf(e)}`,E(e,"--hide-selection-indicator",this.hideSelectionIndicator)}),this._options=[...this.querySelectorAll("m3e-option")],t(this,A,"a",F)?.notifyControlStateChange(),t(this,W,"f")&&(t(this,W,"f").replaceChildren(...t(this,L,"f").childNodes),0==this._options.length&&t(this,A,"m",st).call(this))},X=function(e){e.defaultPrevented||this.disabled||t(this,A,"m",et).call(this)},Z=function(i){if(!i.defaultPrevented)switch(e(this,$,!1,"f"),i.key){case" ":case"Enter":i.preventDefault(),this.multi?t(this,W,"f")||(e(this,T,!0,"f"),t(this,A,"m",et).call(this)):(t(this,W,"f")&&this._listKeyManager.activeItem&&t(this,A,"m",ht).call(this,this._listKeyManager.activeItem),t(this,W,"f")?.isOpen?M()?t(this,A,"m",st).call(this):setTimeout(()=>t(this,A,"m",st).call(this),150):t(this,A,"m",it).call(this));break;case"Escape":case"Tab":t(this,A,"m",st).call(this);break;case"Down":case"ArrowDown":this.multi&&!t(this,W,"f")?t(this,A,"m",et).call(this):(this._listKeyManager.onKeyDown(i),!t(this,W,"f")&&this._listKeyManager.activeItem&&t(this,A,"m",ht).call(this,this._listKeyManager.activeItem));break;default:this._listKeyManager.onKeyDown(i),this.multi||t(this,W,"f")||!this._listKeyManager.activeItem||t(this,A,"m",ht).call(this,this._listKeyManager.activeItem)}},G=function(i){if(!i.defaultPrevented)if(t(this,T,"f"))e(this,T,!1,"f");else switch(i.key){case" ":case"Enter":if(!this.multi)return;i.preventDefault(),t(this,W,"f")&&this._listKeyManager.activeItem&&t(this,A,"m",ht).call(this,this._listKeyManager.activeItem)}},J=function(t){if(e(this,z,void 0,"f"),2===t.button)return;t.preventDefault(),t.stopImmediatePropagation();const i=t.composedPath().find(t=>t instanceof HTMLElement&&"M3E-OPTION"===t.tagName);i&&!i.disabled&&e(this,z,i,"f")},Q=function(i){const s=t(this,z,"f");if(e(this,z,void 0,"f"),2===i.button)return;if(!s)return;const a=i.composedPath().find(t=>t instanceof HTMLElement&&"M3E-OPTION"===t.tagName);a===s&&(t(this,A,"m",ht).call(this,a),this._listKeyManager.setActiveItem(a),this.multi&&this.requestUpdate()),this.multi||(M()?t(this,A,"m",st).call(this):setTimeout(()=>t(this,A,"m",st).call(this),150))},Y=function(e){if(t(this,W,"f"))if("closed"!==e.newState){const i=t(this,A,"a",j).find(t=>!t.disabled)??this._listKeyManager.items.find(t=>!t.disabled);this._listKeyManager.setActiveItem(i),i&&k(i,t(this,W,"f"),{block:"nearest",behavior:"instant"}),this.dispatchEvent(new ToggleEvent("toggle",{oldState:e.oldState,newState:e.newState}))}else M()?t(this,A,"m",tt).call(this,e):setTimeout(()=>t(this,A,"m",tt).call(this,e),100)},tt=function(i){t(this,W,"f")&&(t(this,L,"f")?.replaceChildren(...t(this,W,"f").childNodes),t(this,W,"f").remove(),t(this,W,"f").removeEventListener("toggle",t(this,q,"f")),t(this,W,"f").removeEventListener("pointerdown",t(this,H,"f")),t(this,W,"f").removeEventListener("pointerup",t(this,R,"f")),e(this,W,void 0,"f"),this.ariaExpanded="false",this.removeAttribute("aria-controls"),this.removeAttribute("aria-owns"),this.removeAttribute("aria-activedescendant"),this.requestUpdate(),_(this,"--open"),t(this,A,"a",F)?.notifyControlStateChange(),this.dispatchEvent(new ToggleEvent("toggle",{oldState:i.oldState,newState:i.newState})))},et=function(){this.disabled||(t(this,W,"f")?t(this,A,"m",st).call(this):t(this,A,"m",it).call(this))},it=function(){if(!t(this,W,"f")&&0!=this._options.length){if(e(this,W,document.createElement("m3e-option-panel"),"f"),this.multi&&(t(this,W,"f").ariaMultiSelectable="true"),t(this,W,"f").id=t(this,D,"f"),this.panelClass)for(const e of this.panelClass.split(/\s+/).map(t=>t.trim()).filter(Boolean))t(this,W,"f").classList.add(e);t(this,W,"f").style.overflowX="hidden",t(this,W,"f").fitAnchorWidth=!0,t(this,W,"f").addEventListener("toggle",t(this,q,"f")),t(this,W,"f").addEventListener("pointerdown",t(this,H,"f")),t(this,W,"f").addEventListener("pointerup",t(this,R,"f")),t(this,L,"f")&&t(this,W,"f").replaceChildren(...t(this,L,"f").childNodes),(t(this,A,"a",F)??this).insertAdjacentElement("afterend",t(this,W,"f")),this.ariaExpanded="true",this.setAttribute("aria-controls",t(this,D,"f")),this.setAttribute("aria-owns",t(this,D,"f")),t(this,A,"a",F)?.notifyControlStateChange(),setTimeout(()=>{t(this,W,"f")?.show(this,t(this,A,"a",F)?.menuAnchor),S(this,"--open")})}},st=function(){t(this,W,"f")&&(t(this,W,"f").hide(),_(this,"--open"))},at=function(e){if(this.setAttribute("aria-activedescendant",e.id),t(this,W,"f")){k(e,t(this,W,"f"),{block:"nearest",behavior:"instant"});const i=!t(this,$,"f")&&(this.matches(":focus-visible")||I());t(this,A,"a",B).forEach(t=>{t===e&&i?(t.focusRing?.show(),t.stateLayer?.show("focused")):(t.focusRing?.hide(),t.stateLayer?.hide("focused"))})}},nt=function(t){const e=this._options[this._listKeyManager.items.indexOf(t)];e&&(e.selected=t.selected)},ht=function(e){const i=!this.multi||!e.selected;e.selected!==i&&this.dispatchEvent(new Event("beforeinput",{bubbles:!0,cancelable:!0}))&&(e.selected=i,t(this,A,"m",nt).call(this,e),this.multi||t(this,A,"a",j).filter(t=>t!==e).forEach(e=>{e.selected=!1,t(this,A,"m",nt).call(this,e)}),this.requestUpdate(),t(this,A,"a",F)?.notifyControlStateChange(),this.dispatchEvent(new Event("input",{bubbles:!0})),this.dispatchEvent(new Event("change",{bubbles:!0})))},ot.styles=n`:host { display: inline-flex; vertical-align: middle; outline: none; position: relative; font-size: var(--m3e-form-field-font-size, ${C.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${C.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${C.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${C.typescale.standard.body.large.tracking}); min-height: var(--m3e-form-field-line-height, ${C.typescale.standard.body.large.lineHeight}); border-radius: var(--m3e-select-container-shape, ${C.shape.corner.extraSmall}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) { color: color-mix( in srgb, var(--m3e-select-disabled-color, ${C.color.onSurface}) var(--m3e-select-disabled-color-opacity, 38%), transparent ); } .options { display: none; } .base { flex: 1 1 auto; display: inline-flex; align-items: center; overflow: hidden; } .arrow-wrapper { display: flex; align-items: center; justify-content: center; margin-top: var(--_select-arrow-margin-top); } ::slotted([slot="arrow"]), .arrow { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-select-icon-size, 1.5rem); } :host(:is(:state(--open), :--open)) .focus-ring { display: none; }`,ot.__nextId=0,i([h(".focus-ring")],ot.prototype,"_focusRing",void 0),i([l({attribute:"hide-selection-indicator",type:Boolean})],ot.prototype,"hideSelectionIndicator",void 0),i([l({type:Boolean})],ot.prototype,"multi",void 0),i([l({attribute:"panel-class"})],ot.prototype,"panelClass",void 0),ot=lt=i([K("m3e-select")],ot);export{ot as M3eSelectElement};
7
7
  //# sourceMappingURL=select.min.js.map