@oscarpalmer/oui 0.38.0 → 0.40.0

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 (264) hide show
  1. package/README.md +1 -1
  2. package/dist/css/badge.css +11 -8
  3. package/dist/css/button.css +106 -14
  4. package/dist/css/color-picker.css +555 -73
  5. package/dist/css/color.css +86 -86
  6. package/dist/css/combobox.css +98 -4
  7. package/dist/css/content.css +7 -6
  8. package/dist/css/floatable.css +1 -3
  9. package/dist/css/form.css +99 -6
  10. package/dist/css/icon.css +99 -0
  11. package/dist/css/listbox.css +3 -0
  12. package/dist/css/message.css +4 -3
  13. package/dist/css/mixins/button.mixins.css +1 -0
  14. package/dist/css/reset.css +1 -1
  15. package/dist/css/tabs.css +95 -3
  16. package/dist/css/typography.css +90 -0
  17. package/dist/js/color-picker/color-picker.constants.d.mts +2 -0
  18. package/dist/js/color-picker/color-picker.constants.mjs +60 -0
  19. package/dist/js/color-picker/color-picker.dom.d.mts +8 -0
  20. package/dist/js/color-picker/color-picker.dom.mjs +191 -0
  21. package/dist/js/color-picker/color-picker.event.d.mts +9 -0
  22. package/dist/js/color-picker/color-picker.event.mjs +2 -0
  23. package/dist/js/color-picker/color-picker.form.d.mts +5 -0
  24. package/dist/js/color-picker/color-picker.form.mjs +27 -0
  25. package/dist/js/color-picker/color-picker.misc.d.mts +2 -0
  26. package/dist/js/color-picker/color-picker.misc.mjs +2 -0
  27. package/dist/js/color-picker/color-picker.model.d.mts +2 -0
  28. package/dist/js/color-picker/color-picker.model.mjs +24 -0
  29. package/dist/js/color-picker/color-picker.output.d.mts +8 -0
  30. package/dist/js/color-picker/color-picker.output.mjs +235 -0
  31. package/dist/js/color-picker/color-picker.state.d.mts +8 -0
  32. package/dist/js/color-picker/color-picker.state.mjs +2 -0
  33. package/dist/js/{color-picker.d.mts → color-picker/index.d.mts} +10 -43
  34. package/dist/js/color-picker/index.mjs +305 -0
  35. package/dist/js/color-picker.constants-D1mxw_Le.d.mts +179 -0
  36. package/dist/js/color-picker.event-Cksj5TvS.mjs +500 -0
  37. package/dist/js/color-picker.misc-CtsXGrOe.d.mts +27 -0
  38. package/dist/js/combobox/combobox.constants.d.mts +2 -0
  39. package/dist/js/combobox/{constants.combobox.mjs → combobox.constants.mjs} +21 -21
  40. package/dist/js/combobox/combobox.dom.d.mts +26 -0
  41. package/dist/js/combobox/{dom.combobox.mjs → combobox.dom.mjs} +44 -37
  42. package/dist/js/combobox/combobox.event.d.mts +22 -0
  43. package/dist/js/combobox/{event.combobox.mjs → combobox.event.mjs} +1 -1
  44. package/dist/js/combobox/combobox.misc.d.mts +2 -0
  45. package/dist/js/combobox/{misc.combobox.mjs → combobox.misc.mjs} +1 -1
  46. package/dist/js/combobox/combobox.model.d.mts +2 -0
  47. package/dist/js/combobox/combobox.state.d.mts +10 -0
  48. package/dist/js/combobox/combobox.state.mjs +2 -0
  49. package/dist/js/combobox/index.d.mts +163 -2
  50. package/dist/js/combobox/index.mjs +53 -52
  51. package/dist/js/combobox.constants-DZVkMP5g.d.mts +19 -0
  52. package/dist/js/combobox.misc-C1tPZZDi.d.mts +22 -0
  53. package/dist/js/{combobox/models.combobox.d.mts → combobox.model-oDV06XCN.d.mts} +6 -6
  54. package/dist/js/{state.combobox-Qm3FWzYW.mjs → combobox.state-BfJ3Hxg8.mjs} +96 -82
  55. package/dist/js/constants.listbox-C5Ap6Ag_.d.mts +9 -0
  56. package/dist/js/dialog/dialog.model.d.mts +2 -0
  57. package/dist/js/dialog/dialog.model.mjs +11 -0
  58. package/dist/js/dialog/index.d.mts +12 -0
  59. package/dist/js/dialog/index.mjs +123 -0
  60. package/dist/js/dialog.model-DX2mndMh.d.mts +45 -0
  61. package/dist/js/floatable/floatable.embedded.d.mts +2 -2
  62. package/dist/js/floatable/floatable.embedded.mjs +64 -92
  63. package/dist/js/floatable/floatable.model.d.mts +2 -0
  64. package/dist/js/floatable/floatable.model.mjs +23 -0
  65. package/dist/js/floatable/floatable.standalone.d.mts +2 -1
  66. package/dist/js/floatable.embedded-MeTyXjFn.d.mts +17 -0
  67. package/dist/js/floatable.model-DXsQgoU7.d.mts +62 -0
  68. package/dist/js/focus-trap/focus-trap.embedded.d.mts +2 -2
  69. package/dist/js/focus-trap/focus-trap.embedded.mjs +112 -134
  70. package/dist/js/focus-trap/focus-trap.model.d.mts +2 -0
  71. package/dist/js/focus-trap/focus-trap.model.mjs +15 -0
  72. package/dist/js/focus-trap/focus-trap.standalone.d.mts +2 -1
  73. package/dist/js/focus-trap.embedded-DIU05m1z.d.mts +13 -0
  74. package/dist/js/{focus-trap.embedded-DR8NpZfr.d.mts → focus-trap.model-BeX6UYlw.d.mts} +16 -18
  75. package/dist/js/index.d.mts +26 -14
  76. package/dist/js/index.mjs +18 -15
  77. package/dist/js/internal/attributable.d.mts +2 -3
  78. package/dist/js/internal/attributable.mjs +3 -2
  79. package/dist/js/internal/draggable/draggable.model.d.mts +2 -0
  80. package/dist/js/internal/draggable/draggable.model.mjs +37 -0
  81. package/dist/js/internal/draggable/index.d.mts +13 -0
  82. package/dist/js/internal/{draggable.mjs → draggable/index.mjs} +83 -114
  83. package/dist/js/internal/listbox/listbox.constants.d.mts +7 -10
  84. package/dist/js/internal/listbox/listbox.constants.mjs +15 -16
  85. package/dist/js/internal/listbox/listbox.data.d.mts +9 -10
  86. package/dist/js/internal/listbox/listbox.data.mjs +1 -1
  87. package/dist/js/internal/listbox/listbox.dom.d.mts +19 -20
  88. package/dist/js/internal/listbox/listbox.dom.mjs +1 -1
  89. package/dist/js/internal/listbox/listbox.event.d.mts +3 -4
  90. package/dist/js/internal/listbox/listbox.event.mjs +23 -20
  91. package/dist/js/internal/listbox/listbox.form.d.mts +4 -5
  92. package/dist/js/internal/listbox/listbox.form.mjs +15 -12
  93. package/dist/js/internal/listbox/listbox.misc.d.mts +10 -11
  94. package/dist/js/internal/listbox/listbox.misc.mjs +1 -1
  95. package/dist/js/internal/listbox/listbox.model.d.mts +2 -2
  96. package/dist/js/internal/listbox/listbox.state.d.mts +5 -6
  97. package/dist/js/internal/listbox/listbox.state.mjs +19 -20
  98. package/dist/js/internal/misc.d.mts +5 -4
  99. package/dist/js/internal/misc.mjs +7 -1
  100. package/dist/js/internal/navigable/index.d.mts +6 -0
  101. package/dist/js/internal/navigable/index.mjs +125 -0
  102. package/dist/js/internal/navigable/navigable.model.d.mts +2 -0
  103. package/dist/js/internal/navigable/navigable.model.mjs +18 -0
  104. package/dist/js/l10n/index.d.mts +9 -0
  105. package/dist/js/{l10n.mjs → l10n/index.mjs} +50 -23
  106. package/dist/js/l10n/l10n.model.d.mts +2 -0
  107. package/dist/js/l10n/l10n.model.mjs +9 -0
  108. package/dist/js/l10n.model-D6a9frgl.d.mts +26 -0
  109. package/dist/js/listbox/constants.listbox.d.mts +2 -2
  110. package/dist/js/listbox/constants.listbox.mjs +10 -14
  111. package/dist/js/listbox/event.listbox.d.mts +6 -7
  112. package/dist/js/listbox/event.listbox.mjs +47 -1
  113. package/dist/js/listbox/index.d.mts +8 -6
  114. package/dist/js/listbox/index.mjs +47 -49
  115. package/dist/js/listbox/misc.listbox.d.mts +1 -1
  116. package/dist/js/listbox/misc.listbox.mjs +1 -1
  117. package/dist/js/listbox/state.listbox.d.mts +8 -10
  118. package/dist/js/listbox/state.listbox.mjs +2 -2
  119. package/dist/js/{listbox.data-C7CRa5Ya.mjs → listbox.data-BQyZGKgr.mjs} +83 -66
  120. package/dist/js/{listbox.model-CRReGOmu.d.mts → listbox.model-CuBOj4qe.d.mts} +15 -11
  121. package/dist/js/menu/index.mjs +167 -0
  122. package/dist/js/menu/menu.model.d.mts +33 -0
  123. package/dist/js/menu/menu.model.mjs +15 -0
  124. package/dist/js/{misc.listbox-Cyz2CRDy.mjs → misc.listbox-CjfBUbHD.mjs} +27 -69
  125. package/dist/js/{misc.listbox-gnoJhrTr.d.mts → misc.listbox-CtoGvXQo.d.mts} +2 -2
  126. package/dist/js/movable/movable.embedded.d.mts +2 -2
  127. package/dist/js/movable/movable.embedded.mjs +60 -72
  128. package/dist/js/movable/movable.model.d.mts +2 -0
  129. package/dist/js/movable/movable.model.mjs +12 -0
  130. package/dist/js/movable/movable.standalone.d.mts +2 -1
  131. package/dist/js/movable.embedded-DoyXLegc.d.mts +11 -0
  132. package/dist/js/movable.model-BHaK_mKw.d.mts +186 -0
  133. package/dist/js/navigable.model-BPOM8DZk.d.mts +44 -0
  134. package/dist/js/popover/index.d.mts +12 -0
  135. package/dist/js/{popover.mjs → popover/index.mjs} +40 -50
  136. package/dist/js/popover/popover.model.d.mts +2 -0
  137. package/dist/js/popover/popover.model.mjs +12 -0
  138. package/dist/js/popover.model-ubKNG612.d.mts +38 -0
  139. package/dist/js/resizable/resizable.embedded.d.mts +2 -2
  140. package/dist/js/resizable/resizable.embedded.mjs +44 -59
  141. package/dist/js/resizable/resizable.model.d.mts +2 -0
  142. package/dist/js/resizable/resizable.model.mjs +21 -0
  143. package/dist/js/resizable/resizable.standalone.d.mts +2 -1
  144. package/dist/js/resizable.embedded-Bf1qBUdt.d.mts +11 -0
  145. package/dist/js/resizable.model-BwzJcTVJ.d.mts +46 -0
  146. package/dist/js/sortable/sortable.embedded.d.mts +2 -2
  147. package/dist/js/sortable/sortable.embedded.mjs +69 -82
  148. package/dist/js/sortable/sortable.model.d.mts +2 -0
  149. package/dist/js/sortable/sortable.model.mjs +24 -0
  150. package/dist/js/sortable/sortable.standalone.d.mts +2 -1
  151. package/dist/js/sortable.embedded-DzBKAwSG.d.mts +11 -0
  152. package/dist/js/{splitter.d.mts → splitter/index.d.mts} +8 -7
  153. package/dist/js/splitter/index.mjs +284 -0
  154. package/dist/js/splitter/splitter.model.d.mts +2 -0
  155. package/dist/js/splitter/splitter.model.mjs +37 -0
  156. package/dist/js/splitter.model-DOLNjLVS.d.mts +57 -0
  157. package/dist/js/{tabs.d.mts → tabs/index.d.mts} +7 -8
  158. package/dist/js/{tabs.mjs → tabs/index.mjs} +58 -58
  159. package/dist/js/tabs/tabs.model.d.mts +2 -0
  160. package/dist/js/tabs/tabs.model.mjs +18 -0
  161. package/dist/js/tabs.model-DRBX_JtI.d.mts +40 -0
  162. package/dist/js/toolbar/index.mjs +27 -0
  163. package/dist/js/toolbar/toolbar.model.d.mts +11 -0
  164. package/dist/js/toolbar/toolbar.model.mjs +7 -0
  165. package/dist/js/tooltip/index.d.mts +19 -0
  166. package/dist/js/{tooltip.mjs → tooltip/index.mjs} +60 -85
  167. package/dist/js/tooltip/tooltip.model.d.mts +2 -0
  168. package/dist/js/tooltip/tooltip.model.mjs +15 -0
  169. package/dist/js/tooltip.model-DRkY_BsL.d.mts +37 -0
  170. package/package.json +43 -37
  171. package/dist/js/color-picker.mjs +0 -924
  172. package/dist/js/combobox/constants.combobox.d.mts +0 -2
  173. package/dist/js/combobox/dom.combobox.d.mts +0 -27
  174. package/dist/js/combobox/event.combobox.d.mts +0 -23
  175. package/dist/js/combobox/misc.combobox.d.mts +0 -2
  176. package/dist/js/combobox/state.combobox.d.mts +0 -12
  177. package/dist/js/combobox/state.combobox.mjs +0 -2
  178. package/dist/js/constants.combobox-DmRAMC64.d.mts +0 -26
  179. package/dist/js/constants.listbox-DRsXUxd3.d.mts +0 -14
  180. package/dist/js/dialog.d.mts +0 -47
  181. package/dist/js/dialog.mjs +0 -131
  182. package/dist/js/draggable-a6w0J1OD.d.mts +0 -154
  183. package/dist/js/floatable.embedded-Bct4U5Dm.d.mts +0 -69
  184. package/dist/js/index-DJdFlTLm.d.mts +0 -177
  185. package/dist/js/internal/draggable.d.mts +0 -2
  186. package/dist/js/internal/navigable.d.mts +0 -37
  187. package/dist/js/internal/navigable.mjs +0 -135
  188. package/dist/js/l10n-Bn-7RcwR.d.mts +0 -20
  189. package/dist/js/l10n.d.mts +0 -2
  190. package/dist/js/menu.mjs +0 -172
  191. package/dist/js/popover.d.mts +0 -38
  192. package/dist/js/resizable.embedded-3qoR0Bjm.d.mts +0 -34
  193. package/dist/js/splitter.mjs +0 -322
  194. package/dist/js/toolbar.mjs +0 -31
  195. package/dist/js/tooltip.d.mts +0 -45
  196. package/src/css/a11y.scss +0 -13
  197. package/src/css/badge.scss +0 -62
  198. package/src/css/button.scss +0 -50
  199. package/src/css/color-picker.scss +0 -344
  200. package/src/css/color.scss +0 -113
  201. package/src/css/combobox.scss +0 -255
  202. package/src/css/content.scss +0 -181
  203. package/src/css/flex.scss +0 -107
  204. package/src/css/floatable.scss +0 -155
  205. package/src/css/form.scss +0 -575
  206. package/src/css/listbox.scss +0 -121
  207. package/src/css/message.scss +0 -74
  208. package/src/css/mixins/badge.mixins.scss +0 -53
  209. package/src/css/mixins/button.mixins.scss +0 -112
  210. package/src/css/mixins/input.mixins.scss +0 -114
  211. package/src/css/mixins/message.mixins.scss +0 -41
  212. package/src/css/mixins/misc.mixins.scss +0 -48
  213. package/src/css/mixins/shadow.mixins.scss +0 -57
  214. package/src/css/reset.scss +0 -392
  215. package/src/css/splitter.scss +0 -89
  216. package/src/css/table.scss +0 -107
  217. package/src/css/tabs.scss +0 -74
  218. package/src/js/color-picker.ts +0 -1653
  219. package/src/js/combobox/constants.combobox.ts +0 -83
  220. package/src/js/combobox/dom.combobox.ts +0 -411
  221. package/src/js/combobox/event.combobox.ts +0 -365
  222. package/src/js/combobox/index.ts +0 -382
  223. package/src/js/combobox/misc.combobox.ts +0 -104
  224. package/src/js/combobox/models.combobox.ts +0 -54
  225. package/src/js/combobox/state.combobox.ts +0 -246
  226. package/src/js/dialog.ts +0 -255
  227. package/src/js/floatable/floatable.embedded.ts +0 -336
  228. package/src/js/floatable/floatable.standalone.ts +0 -6
  229. package/src/js/focus-trap/focus-trap.embedded.ts +0 -411
  230. package/src/js/focus-trap/focus-trap.standalone.ts +0 -1
  231. package/src/js/index.ts +0 -16
  232. package/src/js/internal/attributable.ts +0 -73
  233. package/src/js/internal/draggable.ts +0 -657
  234. package/src/js/internal/listbox/listbox.constants.ts +0 -25
  235. package/src/js/internal/listbox/listbox.data.ts +0 -287
  236. package/src/js/internal/listbox/listbox.dom.ts +0 -446
  237. package/src/js/internal/listbox/listbox.event.ts +0 -129
  238. package/src/js/internal/listbox/listbox.form.ts +0 -125
  239. package/src/js/internal/listbox/listbox.misc.ts +0 -135
  240. package/src/js/internal/listbox/listbox.model.ts +0 -169
  241. package/src/js/internal/listbox/listbox.state.ts +0 -82
  242. package/src/js/internal/misc.ts +0 -27
  243. package/src/js/internal/navigable.ts +0 -317
  244. package/src/js/l10n.ts +0 -192
  245. package/src/js/listbox/constants.listbox.ts +0 -61
  246. package/src/js/listbox/event.listbox.ts +0 -106
  247. package/src/js/listbox/index.ts +0 -364
  248. package/src/js/listbox/misc.listbox.ts +0 -70
  249. package/src/js/listbox/state.listbox.ts +0 -194
  250. package/src/js/menu.ts +0 -348
  251. package/src/js/movable/movable.embedded.ts +0 -318
  252. package/src/js/movable/movable.standalone.ts +0 -2
  253. package/src/js/popover.ts +0 -229
  254. package/src/js/resizable/resizable.embedded.ts +0 -413
  255. package/src/js/resizable/resizable.standalone.ts +0 -5
  256. package/src/js/sortable/sortable.embedded.ts +0 -527
  257. package/src/js/sortable/sortable.standalone.ts +0 -2
  258. package/src/js/splitter.ts +0 -583
  259. package/src/js/tabs.ts +0 -441
  260. package/src/js/toolbar.ts +0 -63
  261. package/src/js/tooltip.ts +0 -367
  262. /package/dist/js/combobox/{models.combobox.mjs → combobox.model.mjs} +0 -0
  263. /package/dist/js/{menu.d.mts → menu/index.d.mts} +0 -0
  264. /package/dist/js/{toolbar.d.mts → toolbar/index.d.mts} +0 -0
@@ -1,177 +0,0 @@
1
- import { t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
2
- import { d as OuiListboxType, n as OuiListboxAutoComplete, o as OuiListboxLocalizations } from "./listbox.model-CRReGOmu.mjs";
3
- import { c as COMBOBOX_TAGNAME } from "./constants.combobox-DmRAMC64.mjs";
4
- //#region src/js/combobox/misc.combobox.d.ts
5
- declare function getComboboxAutoComplete(element: OuiComboboxElement, select: boolean): OuiListboxAutoComplete;
6
- declare function getComboboxId(): string;
7
- declare function hasTextSelection(element: HTMLElement): element is HTMLInputElement;
8
- /**
9
- * Set combobox localizations for a specific language
10
- *
11
- * @param language Language code
12
- * @param localizations Localizations for language
13
- */
14
- declare function setComboboxLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
15
- /**
16
- * Set combobox localizations for one or more languages
17
- *
18
- * @param localizations Localizations for one or more languages
19
- */
20
- declare function setComboboxLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
21
- declare function updateComboboxLocalizations(instance: OuiLocalizations<OuiListboxLocalizations>, destination: Record<string, Partial<OuiListboxLocalizations>>, first: string | Record<string, Partial<OuiListboxLocalizations>>, second?: Partial<OuiListboxLocalizations>): void;
22
- //#endregion
23
- //#region src/js/combobox/index.d.ts
24
- declare global {
25
- interface HTMLElementTagNameMap {
26
- [COMBOBOX_TAGNAME]: OuiComboboxElement;
27
- }
28
- }
29
- declare class OuiComboboxElement extends HTMLElement {
30
- #private;
31
- static formAssociated: boolean;
32
- static observedAttributes: string[];
33
- /**
34
- * Is the combobox disabled?
35
- */
36
- get disabled(): boolean;
37
- /**
38
- * Should the combobox be disabled?
39
- */
40
- set disabled(value: boolean);
41
- /**
42
- * Current filter value
43
- */
44
- get filter(): string;
45
- /**
46
- * Set the filter value
47
- */
48
- set filter(value: string);
49
- /**
50
- * Form element associated with the combobox
51
- */
52
- get form(): HTMLFormElement | null;
53
- /**
54
- * Label elements associated with the combobox
55
- */
56
- get labels(): NodeList;
57
- /**
58
- * Maximum number of selected options
59
- */
60
- get max(): number | undefined;
61
- /**
62
- * Set the maximum number of selected options
63
- */
64
- set max(value: number);
65
- /**
66
- * Minimum number of selected options
67
- */
68
- get min(): number | undefined;
69
- /**
70
- * Set the minimum number of selected options
71
- */
72
- set min(value: number);
73
- /**
74
- * Does the combobox allow multiple values?
75
- */
76
- get multiple(): boolean;
77
- /**
78
- * Name of the combobox
79
- */
80
- get name(): string;
81
- /**
82
- * Is the combobox readonly?
83
- */
84
- get readonly(): boolean;
85
- /**
86
- * Should the combobox be readonly?
87
- */
88
- set readonly(value: boolean);
89
- /**
90
- * Is the combobox required?
91
- */
92
- get required(): boolean;
93
- /**
94
- * Should the combobox be required?
95
- */
96
- set required(value: boolean);
97
- /**
98
- * Selected options
99
- */
100
- get selected(): HTMLElement[];
101
- /**
102
- * Type of combobox
103
- */
104
- get type(): OuiListboxType;
105
- /**
106
- * Validation message for the combobox
107
- */
108
- get validationMessage(): string;
109
- /**
110
- * Validity state for the combobox
111
- */
112
- get validity(): ValidityState;
113
- /**
114
- * Current value
115
- */
116
- get value(): string;
117
- /**
118
- * Set the value
119
- */
120
- set value(value: unknown);
121
- /**
122
- * Current values
123
- */
124
- get values(): string[];
125
- /**
126
- * Set the values
127
- */
128
- set values(values: unknown[]);
129
- /**
130
- * Can the combobox be validated?
131
- */
132
- get willValidate(): boolean;
133
- constructor();
134
- attributeChangedCallback(name: string, _: string | null, value: string | null): void;
135
- /**
136
- * Check if the combobox is valid
137
- *
138
- * @returns `true` if the combobox is valid, otherwise `false`
139
- */
140
- checkValidity(): boolean;
141
- /**
142
- * Clear all selected options
143
- */
144
- clear(): void;
145
- connectedCallback(): void;
146
- disconnectedCallback(): void;
147
- formDisabledCallback(disabled: boolean): void;
148
- formResetCallback(): void;
149
- formStateRestoreCallback(state: unknown, reason: unknown): void;
150
- /**
151
- * Check if the combobox is valid and report any validation errors
152
- *
153
- * @returns `true` if the combobox is valid, otherwise `false`
154
- */
155
- reportValidity(): boolean;
156
- /**
157
- * Set a custom validation message for the combobox
158
- *
159
- * @param message Validation message
160
- */
161
- setCustomValidity(message: string): void;
162
- /**
163
- * Set combobox localizations for a specific language
164
- *
165
- * @param language Language code
166
- * @param localizations Localizations for language
167
- */
168
- setLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
169
- /**
170
- * Set combobox localizations for one or more languages
171
- *
172
- * @param localizations Localizations for one or more languages
173
- */
174
- setLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
175
- }
176
- //#endregion
177
- export { setComboboxLocalizations as a, hasTextSelection as i, getComboboxAutoComplete as n, updateComboboxLocalizations as o, getComboboxId as r, OuiComboboxElement as t };
@@ -1,2 +0,0 @@
1
- import { a as OuiDraggableGlobals, c as addDraggable, i as OuiDraggableBound, l as getDraggableStates, n as OuiDragMovePosition, o as OuiDraggableItem, r as OuiDraggable, s as OuiDraggableState, t as CreateOuiDraggableOptions, u as removeDraggable } from "../draggable-a6w0J1OD.mjs";
2
- export { CreateOuiDraggableOptions, OuiDragMovePosition, OuiDraggable, OuiDraggableBound, OuiDraggableGlobals, OuiDraggableItem, OuiDraggableState, addDraggable, getDraggableStates, removeDraggable };
@@ -1,37 +0,0 @@
1
- import { AriaRole, RemovableEventListener } from "@oscarpalmer/toretto/models";
2
- //#region src/js/internal/navigable.d.ts
3
- declare class OuiNavigable {
4
- active: OuiNavigableActive;
5
- element: HTMLElement;
6
- listeners: RemovableEventListener[];
7
- options: OuiNavigableOptions;
8
- orientation: OuiNavigableOrientation;
9
- constructor(element: HTMLElement, options: OuiNavigableOptions);
10
- destroy(): void;
11
- navigate(index: number, focus?: boolean): void;
12
- }
13
- type OuiNavigableActive = {
14
- element?: HTMLElement;
15
- index: number;
16
- };
17
- type OuiNavigableCallback<ReturnType> = (event: KeyboardEvent, navigable: OuiNavigable) => ReturnType;
18
- type OuiNavigableOptions = {
19
- orientation?: OuiNavigableOrientation;
20
- role?: AriaRole;
21
- selector: string;
22
- vertical: boolean;
23
- onActivate?: (navigable: OuiNavigable) => void;
24
- onDeactivate?: OuiNavigableCallback<void>;
25
- onNavigation?: (navigable: OuiNavigable) => void;
26
- onPreventNavigation?: OuiNavigableCallback<boolean>;
27
- onShouldActivate?: OuiNavigableCallback<boolean>;
28
- onShouldDeactivate?: OuiNavigableCallback<boolean | undefined>;
29
- };
30
- type OuiNavigableOrientation = 'horizontal' | 'vertical';
31
- declare function getNavigable(element: HTMLElement, options: OuiNavigableOptions): OuiNavigable;
32
- declare function getNavigableOrientation(element: HTMLElement, vertical: boolean, aria?: boolean): OuiNavigableOrientation;
33
- declare function updateNavigableFocus(navigable: OuiNavigable, focus: boolean, items?: HTMLElement[]): void;
34
- declare const NAVIGABLE_KEYS_HORIZONTAL: Set<string>;
35
- declare const NAVIGABLE_KEYS_VERTICAL: Set<string>;
36
- //#endregion
37
- export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, OuiNavigableOptions, OuiNavigableOrientation, getNavigable, getNavigableOrientation, updateNavigableFocus };
@@ -1,135 +0,0 @@
1
- import { clamp } from "@oscarpalmer/atoms/number";
2
- import { getAria, setAria, setRole } from "@oscarpalmer/toretto/aria";
3
- import { getAttribute } from "@oscarpalmer/toretto/attribute";
4
- import { on } from "@oscarpalmer/toretto/event";
5
- import { findAncestor } from "@oscarpalmer/toretto/find";
6
- import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
7
- //#region src/js/internal/navigable.ts
8
- var OuiNavigable = class {
9
- active = { index: 0 };
10
- element;
11
- listeners;
12
- options;
13
- orientation;
14
- constructor(element, options) {
15
- this.element = element;
16
- this.options = options;
17
- this.listeners = [
18
- on(element, "click", (event) => {
19
- onClick(this, event);
20
- }, { passive: false }),
21
- on(element, "focusin", (event) => {
22
- onFocusin(this, event);
23
- }),
24
- on(element, "keydown", (event) => {
25
- onKeydown(this, event);
26
- }, { passive: false })
27
- ];
28
- this.orientation = options?.orientation ?? getNavigableOrientation(element, options.vertical);
29
- setAria(element, "orientation", this.orientation);
30
- if (options.role != null) setRole(element, options.role);
31
- }
32
- destroy() {
33
- const listeners = this.listeners.splice(0);
34
- for (const listener of listeners) listener();
35
- this.active.element = void 0;
36
- this.element = void 0;
37
- }
38
- navigate(index, focus) {
39
- const items = getItems(this.element, this.options.selector);
40
- if (index >= 0 && index < items.length) onNavigate(this, index, items, focus ?? false);
41
- }
42
- };
43
- function getItems(container, selector) {
44
- return [...container.querySelectorAll(selector)].filter(isValidItem);
45
- }
46
- function getNavigable(element, options) {
47
- return new OuiNavigable(element, options);
48
- }
49
- function getNavigableOrientation(element, vertical, aria) {
50
- const attribute = aria ?? true ? getAria(element, "orientation") : getAttribute(element, "orientation");
51
- return ORIENTATIONS.has(attribute) ? attribute : vertical ? ORIENTATION_VERTICAL : ORIENTATION_HORIZONTAL;
52
- }
53
- function isValidItem(element) {
54
- return "disabled" in element ? element.disabled !== true : true;
55
- }
56
- function onClick(navigable, event) {
57
- const item = findAncestor(event, navigable.options.selector);
58
- const items = getItems(navigable.element, navigable.options.selector);
59
- const index = items.indexOf(item);
60
- if (index === -1) return;
61
- if (index !== navigable.active.index) onNavigate(navigable, index, items, false);
62
- navigable.options.onActivate?.(navigable);
63
- item.focus();
64
- }
65
- function onNavigate(navigable, index, items, focus) {
66
- navigable.active.element = items[index];
67
- navigable.active.index = index;
68
- updateNavigableFocus(navigable, focus, items);
69
- navigable.options.onNavigation?.(navigable);
70
- }
71
- function onFocusin(navigable, event) {
72
- const item = findAncestor(event, navigable.options.selector);
73
- if (!isHTMLOrSVGElement(item) || !isValidItem(item)) return;
74
- const items = getItems(navigable.element, navigable.options.selector);
75
- const index = items.indexOf(item);
76
- if (index === -1) return;
77
- navigable.active.element = item;
78
- navigable.active.index = index;
79
- updateNavigableFocus(navigable, false, items);
80
- }
81
- function onKeydown(navigable, event) {
82
- const escaped = event.key === "Escape";
83
- const stopPropagation = navigable.options.onShouldDeactivate?.(event, navigable);
84
- if (escaped || stopPropagation != null) {
85
- if (escaped || stopPropagation) event.stopPropagation();
86
- navigable.options.onDeactivate?.(event, navigable);
87
- return;
88
- }
89
- if (!KEYS_ALL.has(event.key)) return;
90
- const mustActivate = KEYS_ACTIVATE.has(event.key);
91
- const shouldActivate = navigable.options.onShouldActivate?.(event, navigable) === true;
92
- if (mustActivate || shouldActivate || navigable.options.onPreventNavigation?.(event, navigable) === true) event.stopPropagation();
93
- if (mustActivate || shouldActivate) {
94
- navigable.options.onActivate?.(navigable);
95
- return;
96
- }
97
- const items = getItems(navigable.element, navigable.options.selector);
98
- const { length } = items;
99
- if (length === 0) return;
100
- event.preventDefault();
101
- let index;
102
- if (KEYS_ABSOLUTE.has(event.key)) index = event.key === "Home" ? 0 : items.length - 1;
103
- else {
104
- const direction = NAVIGABLE_KEYS_HORIZONTAL.has(event.key) ? ORIENTATION_HORIZONTAL : ORIENTATION_VERTICAL;
105
- if (navigable.orientation === direction) {
106
- if (navigable.active.element instanceof HTMLSelectElement) event.preventDefault();
107
- index = clamp(navigable.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1), 0, length - 1, true);
108
- }
109
- }
110
- if (index != null && index !== navigable.active.index) onNavigate(navigable, index, items, true);
111
- }
112
- function updateNavigableFocus(navigable, focus, items) {
113
- const updated = items ?? getItems(navigable.element, navigable.options.selector);
114
- const { length } = updated;
115
- if (length === 0) return;
116
- for (let index = 0; index < length; index += 1) updated[index].tabIndex = index === navigable.active.index ? 0 : -1;
117
- navigable.active.element ??= updated[navigable.active.index];
118
- if (focus) navigable.active.element?.focus();
119
- }
120
- const KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
121
- const KEYS_ACTIVATE = /* @__PURE__ */ new Set(["Enter", " "]);
122
- const NAVIGABLE_KEYS_HORIZONTAL = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
123
- const NAVIGABLE_KEYS_VERTICAL = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
124
- const KEYS_ALL = /* @__PURE__ */ new Set([
125
- ...KEYS_ABSOLUTE,
126
- ...KEYS_ACTIVATE,
127
- ...NAVIGABLE_KEYS_HORIZONTAL,
128
- ...NAVIGABLE_KEYS_VERTICAL
129
- ]);
130
- const KEYS_NEXT = /* @__PURE__ */ new Set(["ArrowDown", "ArrowRight"]);
131
- const ORIENTATION_HORIZONTAL = "horizontal";
132
- const ORIENTATION_VERTICAL = "vertical";
133
- const ORIENTATIONS = /* @__PURE__ */ new Set([ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL]);
134
- //#endregion
135
- export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, getNavigable, getNavigableOrientation, updateNavigableFocus };
@@ -1,20 +0,0 @@
1
- import { GenericCallback } from "@oscarpalmer/atoms/models";
2
- //#region src/js/l10n.d.ts
3
- type LocalizationParameters<Localization> = Localization extends GenericCallback ? Parameters<Localization> : never;
4
- declare class OuiLocalizations<Localizations extends OuiLocalizationsValues> {
5
- readonly defaults: Localizations;
6
- readonly keys: Set<keyof Localizations>;
7
- readonly values: Record<string, Partial<Localizations>>;
8
- constructor(defaults: Localizations);
9
- get<Key extends keyof Localizations>(element: Element, key: Key, localizations: Record<string, Partial<Localizations>>): string | GenericCallback;
10
- set(language: string, localizations: Partial<Localizations>): void;
11
- set(localizations: Record<string, Partial<Localizations>>): void;
12
- }
13
- type OuiLocalizationsValues = Record<string, string | GenericCallback>;
14
- declare function getLanguage(element: Element): string;
15
- declare function getLocalization<Localizations extends OuiLocalizationsValues, Key extends keyof Localizations>(localizations: OuiLocalizations<Localizations>, element: Element, key: Key, value: Record<string, Partial<Localizations>>): Localizations[Key] | GenericCallback;
16
- declare function getLocalizations<Localizations extends OuiLocalizationsValues>(defaults: Localizations): OuiLocalizations<Localizations>;
17
- declare function localize<Localizations extends OuiLocalizationsValues, Key extends keyof Localizations, Localization extends Localizations[Key]>(localization: Localization, data: Record<string, unknown>, parameters: LocalizationParameters<Localization>): string;
18
- declare function updateLocalizations<Localizations extends OuiLocalizationsValues>(instance: OuiLocalizations<Localizations>, values: Record<string, Partial<Localizations>>, destination: Record<string, Partial<Localizations>>, onAfter?: () => void): void;
19
- //#endregion
20
- export { getLocalizations as a, getLocalization as i, OuiLocalizationsValues as n, localize as o, getLanguage as r, updateLocalizations as s, OuiLocalizations as t };
@@ -1,2 +0,0 @@
1
- import { a as getLocalizations, i as getLocalization, n as OuiLocalizationsValues, o as localize, r as getLanguage, s as updateLocalizations, t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
2
- export { OuiLocalizations, OuiLocalizationsValues, getLanguage, getLocalization, getLocalizations, localize, updateLocalizations };
package/dist/js/menu.mjs DELETED
@@ -1,172 +0,0 @@
1
- import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/floatable.embedded.mjs";
2
- import { attributable } from "./internal/attributable.mjs";
3
- import { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, getNavigable, updateNavigableFocus } from "./internal/navigable.mjs";
4
- import { setAria, setRole } from "@oscarpalmer/toretto/aria";
5
- import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
6
- import { on } from "@oscarpalmer/toretto/event";
7
- import { findAncestor } from "@oscarpalmer/toretto/find";
8
- //#region src/js/menu.ts
9
- var OuiMenu = class {
10
- content;
11
- element;
12
- floatable;
13
- navigable;
14
- toggle;
15
- get open() {
16
- return this.floatable.open;
17
- }
18
- constructor(element, navigable) {
19
- this.element = element;
20
- this.navigable = navigable;
21
- this.content = navigable.element;
22
- this.toggle = element.querySelector(SELECTOR_MENU_TOGGLE);
23
- this.floatable = createEmbeddedFloatable(this.toggle, this.content, {
24
- attribute: ATTRIBUTE_MENU_POSITION,
25
- position: findAncestor(element.parentElement, SELECTOR_MENU_CONTENT) == null ? "below-start" : "end-top",
26
- reusable: false
27
- });
28
- this.navigable.listeners.push(getOnBeforeToggleListener(this.content), on(this.content, "click", (event) => {
29
- event.stopPropagation();
30
- if (findAncestor(event, SELECTOR_MENU_TOGGLE) != null) return;
31
- const elements = document.querySelectorAll(SELECTOR_MENU_CONTENT);
32
- for (const element of elements) menus.get(element)?.floatable.hide();
33
- const menu = menus.get(elements[0]);
34
- if (menu != null && event.pointerId === -1) updateNavigableFocus(menu.navigable, true);
35
- }), on(this.content, "toggle", (event) => {
36
- const expanded = event.newState === "open";
37
- if (expanded) {
38
- this.floatable?.update();
39
- updateNavigableFocus(this.navigable, true);
40
- }
41
- setAria(this.toggle, "expanded", expanded);
42
- }));
43
- this.floatable.update();
44
- initializeMenu(this);
45
- updateNavigableFocus(this.navigable, false);
46
- }
47
- destroy() {
48
- this.floatable.destroy();
49
- this.navigable.destroy();
50
- this.floatable = void 0;
51
- this.navigable = void 0;
52
- }
53
- };
54
- var OuiMenubar = class {
55
- element;
56
- navigable;
57
- constructor(element, navigable) {
58
- this.element = element;
59
- this.navigable = navigable;
60
- updateNavigableFocus(this.navigable, false);
61
- }
62
- destroy() {
63
- this.navigable.destroy();
64
- this.navigable = void 0;
65
- }
66
- };
67
- function addInstance(instances, ctor, element, content, options) {
68
- if (!instances.has(content)) instances.set(content, new ctor(element, getNavigable(content, {
69
- ...options,
70
- onDeactivate,
71
- onPreventNavigation,
72
- onShouldActivate,
73
- onShouldDeactivate
74
- })));
75
- }
76
- function addMenu(element) {
77
- const content = element.querySelector(SELECTOR_MENU_CONTENT);
78
- const toggle = element.querySelector(SELECTOR_MENU_TOGGLE);
79
- if (content != null && toggle != null) addInstance(menus, OuiMenu, element, content, {
80
- selector: SELECTOR_MENU_ITEM,
81
- vertical: true
82
- });
83
- }
84
- function addMenubar(element) {
85
- addInstance(menubars, OuiMenubar, element, element, {
86
- role: "menubar",
87
- selector: SELECTOR_MENUBAR_ITEM,
88
- vertical: false
89
- });
90
- }
91
- function getId(element, value) {
92
- let { id } = element;
93
- if (id == null || id.trim().length === 0) {
94
- id = value == null ? `oui_menu_${++index}` : `${value}_toggle`;
95
- element.id = id;
96
- }
97
- return id;
98
- }
99
- function initializeMenu(menu) {
100
- const id = getId(menu.content);
101
- setAttribute(menu.toggle, "popovertarget", id);
102
- setAria(menu.toggle, {
103
- controls: id,
104
- expanded: "false",
105
- haspopup: "menu"
106
- });
107
- setAttributes(menu.content, {
108
- popover: "",
109
- tabindex: "-1"
110
- });
111
- setRole(menu.content, "menu");
112
- }
113
- function onDeactivate(_, navigable) {
114
- const menu = menus.get(navigable.element);
115
- if (menu == null) return;
116
- menu.floatable.hide();
117
- const element = findAncestor(menu.element.parentElement, SELECTORS);
118
- if (element == null) return;
119
- const instance = menubars.get(element) ?? menus.get(element);
120
- if (instance != null) updateNavigableFocus(instance.navigable, true);
121
- }
122
- function onPreventNavigation(_, navigable) {
123
- const instance = menubars.get(navigable.element) ?? menus.get(navigable.element);
124
- return findAncestor(instance?.element.parentElement, SELECTORS) != null;
125
- }
126
- function onShouldActivate(event, navigable) {
127
- let activate = false;
128
- if (menubars.has(navigable.element)) activate = navigable.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : NAVIGABLE_KEYS_HORIZONTAL.has(event.key);
129
- else if (menus.has(navigable.element)) activate = navigable.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : event.key === "ArrowRight";
130
- if (activate) {
131
- const target = event.target instanceof HTMLElement && event.target.matches(SELECTOR_MENU_TOGGLE) ? event.target : void 0;
132
- if (target == null) activate = false;
133
- else target.click();
134
- }
135
- return activate;
136
- }
137
- function onShouldDeactivate(event, navigable) {
138
- if (menubars.has(navigable.element)) return;
139
- const menu = menus.get(navigable.element);
140
- if (menu == null) return;
141
- const horizontal = navigable.orientation === "horizontal";
142
- const altKey = horizontal ? "ArrowDown" : "ArrowRight";
143
- const baseKey = horizontal ? "ArrowUp" : "ArrowLeft";
144
- if (event.key === baseKey) return findAncestor(menu.element.parentElement, SELECTOR_MENU_CONTENT) != null;
145
- if (event.key === altKey && event.target instanceof HTMLElement && !event.target.hasAttribute("popovertarget")) return false;
146
- }
147
- function removeInstance(instances, element) {
148
- instances.get(element)?.destroy();
149
- instances.delete(element);
150
- }
151
- function removeMenu(element) {
152
- removeInstance(menus, element);
153
- }
154
- function removeMenubar(element) {
155
- removeInstance(menubars, element);
156
- }
157
- const ATTRIBUTE_MENU = "oui-menu";
158
- const ATTRIBUTE_MENU_POSITION = "oui-menu-position";
159
- const ATTRIBUTE_MENUBAR = "oui-menubar";
160
- const SELECTOR_MENUBAR = `[${ATTRIBUTE_MENUBAR}]`;
161
- const SELECTOR_MENUBAR_ITEM = `:scope > [${ATTRIBUTE_MENUBAR}-item], :scope > * > [${ATTRIBUTE_MENUBAR}-item]`;
162
- const SELECTOR_MENU_CONTENT = `[${ATTRIBUTE_MENU}-content]`;
163
- const SELECTOR_MENU_ITEM = `:scope > [${ATTRIBUTE_MENU}-item], :scope > * > [${ATTRIBUTE_MENU}-item]`;
164
- const SELECTOR_MENU_TOGGLE = `[${ATTRIBUTE_MENU}-toggle]`;
165
- const SELECTORS = `${SELECTOR_MENUBAR}, ${SELECTOR_MENU_CONTENT}`;
166
- const menubars = /* @__PURE__ */ new WeakMap();
167
- const menus = /* @__PURE__ */ new WeakMap();
168
- let index = 0;
169
- attributable(ATTRIBUTE_MENU, addMenu, removeMenu);
170
- attributable(ATTRIBUTE_MENUBAR, addMenubar, removeMenubar);
171
- //#endregion
172
- export {};
@@ -1,38 +0,0 @@
1
- import { r as OuiFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
2
- import { i as OuiFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
3
- import { RemovableEventListener } from "@oscarpalmer/toretto/models";
4
- //#region src/js/popover.d.ts
5
- declare class OuiPopover {
6
- #private;
7
- /**
8
- * Is the popover open?
9
- */
10
- get open(): boolean;
11
- set open(value: boolean);
12
- constructor(state: OuiPopoverState);
13
- /**
14
- * Closes the popover
15
- */
16
- hide(): void;
17
- /**
18
- * Opens the popover
19
- */
20
- show(): void;
21
- }
22
- type OuiPopoverState = {
23
- anchor: HTMLElement;
24
- content: HTMLElement;
25
- floatable: OuiFloatable;
26
- focusTrap?: OuiFocusTrap;
27
- listeners: RemovableEventListener[];
28
- popover: OuiPopover;
29
- };
30
- /**
31
- * Get the _OuiPopover_ for an element
32
- *
33
- * @param element Element to get _OuiPopover_ for
34
- * @returns _OuiPopover_ instance
35
- */
36
- declare function getPopover(element: HTMLElement): OuiPopover | undefined;
37
- //#endregion
38
- export { type OuiPopover, getPopover };
@@ -1,34 +0,0 @@
1
- import { StyleToggler } from "@oscarpalmer/toretto/style";
2
- //#region src/js/resizable/resizable.embedded.d.ts
3
- type CreateOuiResizableOptions = {
4
- maximumHeight?: number;
5
- maximumWidth?: number;
6
- minimumHeight?: number;
7
- minimumWidth?: number;
8
- };
9
- declare class OuiResizable {
10
- #private;
11
- constructor(state: OuiResizableState);
12
- destroy(): void;
13
- set(): void;
14
- reset(): void;
15
- }
16
- type OuiResizableState = {
17
- element: HTMLElement;
18
- handle: HTMLElement;
19
- height: number;
20
- options: Required<CreateOuiResizableOptions>;
21
- styles: StyleToggler;
22
- width: number;
23
- };
24
- /**
25
- * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
26
- *
27
- * @param element Element to make resizable
28
- * @returns _OuiResizable_ instance
29
- */
30
- declare function createResizable(element: HTMLElement, options?: CreateOuiResizableOptions): OuiResizable;
31
- declare const RESIZABLE_ATTRIBUTE = "oui-resizable";
32
- declare const RESIZABLE_ATTRIBUTE_HANDLE = "oui-resizable-handle";
33
- //#endregion
34
- export { createResizable as a, RESIZABLE_ATTRIBUTE_HANDLE as i, OuiResizable as n, RESIZABLE_ATTRIBUTE as r, CreateOuiResizableOptions as t };