@oscarpalmer/oui 0.39.0 → 0.41.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 (227) hide show
  1. package/README.md +1 -1
  2. package/dist/css/color-picker.css +80 -69
  3. package/dist/css/listbox.css +169 -0
  4. package/dist/js/color-picker/color-picker.constants.d.mts +2 -0
  5. package/dist/js/color-picker/{constants.color-picker.mjs → color-picker.constants.mjs} +7 -4
  6. package/dist/js/color-picker/{dom.color-picker.d.mts → color-picker.dom.d.mts} +2 -2
  7. package/dist/js/color-picker/{dom.color-picker.mjs → color-picker.dom.mjs} +33 -16
  8. package/dist/js/color-picker/{event.color-picker.d.mts → color-picker.event.d.mts} +3 -3
  9. package/dist/js/color-picker/color-picker.event.mjs +233 -0
  10. package/dist/js/color-picker/{form.color-picker.d.mts → color-picker.form.d.mts} +2 -2
  11. package/dist/js/color-picker/{form.color-picker.mjs → color-picker.form.mjs} +9 -8
  12. package/dist/js/color-picker/color-picker.misc.d.mts +2 -0
  13. package/dist/js/color-picker/color-picker.misc.mjs +104 -0
  14. package/dist/js/color-picker/color-picker.model.d.mts +2 -0
  15. package/dist/js/color-picker/{models.color-picker.mjs → color-picker.model.mjs} +1 -1
  16. package/dist/js/color-picker/{output.color-picker.d.mts → color-picker.output.d.mts} +2 -2
  17. package/dist/js/color-picker/{output.color-picker.mjs → color-picker.output.mjs} +19 -18
  18. package/dist/js/color-picker/color-picker.state.d.mts +8 -0
  19. package/dist/js/color-picker/color-picker.state.mjs +168 -0
  20. package/dist/js/color-picker/index.d.mts +172 -2
  21. package/dist/js/color-picker/index.mjs +66 -59
  22. package/dist/js/color-picker.constants-BZgXQr5o.d.mts +177 -0
  23. package/dist/js/color-picker.misc-BIS3R6jk.d.mts +31 -0
  24. package/dist/js/combobox/combobox.constants.d.mts +2 -0
  25. package/dist/js/combobox/{constants.combobox.mjs → combobox.constants.mjs} +21 -21
  26. package/dist/js/combobox/combobox.dom.d.mts +25 -0
  27. package/dist/js/combobox/{dom.combobox.mjs → combobox.dom.mjs} +51 -49
  28. package/dist/js/combobox/{event.combobox.d.mts → combobox.event.d.mts} +9 -9
  29. package/dist/js/combobox/{event.combobox.mjs → combobox.event.mjs} +1 -1
  30. package/dist/js/combobox/combobox.misc.d.mts +2 -0
  31. package/dist/js/combobox/combobox.misc.mjs +2 -0
  32. package/dist/js/combobox/combobox.model.d.mts +2 -0
  33. package/dist/js/combobox/combobox.state.d.mts +9 -0
  34. package/dist/js/combobox/combobox.state.mjs +2 -0
  35. package/dist/js/combobox/index.d.mts +152 -2
  36. package/dist/js/combobox/index.mjs +54 -55
  37. package/dist/js/combobox.constants-Hb3bqqQJ.d.mts +19 -0
  38. package/dist/js/combobox.misc-DRDFk6X8.d.mts +26 -0
  39. package/dist/js/combobox.model-gjEI2VqZ.d.mts +46 -0
  40. package/dist/js/{state.combobox-BWDFHwoi.mjs → combobox.state-AstCICiH.mjs} +109 -106
  41. package/dist/js/dialog/dialog.model.d.mts +2 -0
  42. package/dist/js/dialog/dialog.model.mjs +11 -0
  43. package/dist/js/dialog/index.d.mts +12 -0
  44. package/dist/js/dialog/index.mjs +123 -0
  45. package/dist/js/dialog.model-HVzYWoDo.d.mts +45 -0
  46. package/dist/js/floatable/floatable.embedded.d.mts +2 -2
  47. package/dist/js/floatable/floatable.embedded.mjs +64 -92
  48. package/dist/js/floatable/floatable.model.d.mts +2 -0
  49. package/dist/js/floatable/floatable.model.mjs +23 -0
  50. package/dist/js/floatable/floatable.standalone.d.mts +2 -1
  51. package/dist/js/floatable.embedded-ncshL3Sa.d.mts +17 -0
  52. package/dist/js/{floatable.embedded-DQYkXt8X.d.mts → floatable.model-DXsQgoU7.d.mts} +13 -20
  53. package/dist/js/focus-trap/focus-trap.embedded.d.mts +2 -2
  54. package/dist/js/focus-trap/focus-trap.embedded.mjs +117 -138
  55. package/dist/js/focus-trap/focus-trap.model.d.mts +2 -0
  56. package/dist/js/focus-trap/focus-trap.model.mjs +15 -0
  57. package/dist/js/focus-trap/focus-trap.standalone.d.mts +2 -1
  58. package/dist/js/focus-trap.embedded-DpcPkP7c.d.mts +13 -0
  59. package/dist/js/{focus-trap.embedded-CjyFQYow.d.mts → focus-trap.model-CpltX5B5.d.mts} +16 -18
  60. package/dist/js/index.d.mts +26 -14
  61. package/dist/js/index.mjs +18 -17
  62. package/dist/js/internal/attributable.d.mts +1 -1
  63. package/dist/js/internal/attributable.mjs +3 -2
  64. package/dist/js/internal/draggable/draggable.model.d.mts +2 -0
  65. package/dist/js/internal/draggable/draggable.model.mjs +37 -0
  66. package/dist/js/internal/draggable/index.d.mts +13 -0
  67. package/dist/js/internal/draggable/index.mjs +243 -0
  68. package/dist/js/internal/l10n/index.d.mts +5 -0
  69. package/dist/js/internal/l10n/index.mjs +147 -0
  70. package/dist/js/internal/l10n/l10n.model.d.mts +2 -0
  71. package/dist/js/internal/l10n/l10n.model.mjs +12 -0
  72. package/dist/js/internal/misc.d.mts +3 -2
  73. package/dist/js/internal/misc.mjs +4 -6
  74. package/dist/js/internal/navigable/index.d.mts +6 -0
  75. package/dist/js/internal/navigable/index.mjs +125 -0
  76. package/dist/js/internal/navigable/navigable.model.d.mts +2 -0
  77. package/dist/js/internal/navigable/navigable.model.mjs +18 -0
  78. package/dist/js/internal/option-list/option-list.constants.d.mts +8 -0
  79. package/dist/js/internal/option-list/option-list.constants.mjs +22 -0
  80. package/dist/js/internal/option-list/option-list.data.d.mts +21 -0
  81. package/dist/js/internal/option-list/option-list.data.mjs +2 -0
  82. package/dist/js/internal/option-list/option-list.dom.d.mts +18 -0
  83. package/dist/js/internal/option-list/option-list.dom.mjs +2 -0
  84. package/dist/js/internal/option-list/option-list.event.d.mts +6 -0
  85. package/dist/js/internal/option-list/option-list.event.mjs +66 -0
  86. package/dist/js/internal/option-list/option-list.form.d.mts +7 -0
  87. package/dist/js/internal/option-list/option-list.form.mjs +53 -0
  88. package/dist/js/internal/option-list/option-list.misc.d.mts +13 -0
  89. package/dist/js/internal/option-list/option-list.misc.mjs +2 -0
  90. package/dist/js/internal/option-list/option-list.model.d.mts +2 -0
  91. package/dist/js/internal/option-list/option-list.state.d.mts +8 -0
  92. package/dist/js/internal/option-list/option-list.state.mjs +39 -0
  93. package/dist/js/l10n/index.d.mts +3 -0
  94. package/dist/js/l10n/index.mjs +2 -0
  95. package/dist/js/l10n.model-D1E1u35L.d.mts +54 -0
  96. package/dist/js/listbox/index.d.mts +9 -18
  97. package/dist/js/listbox/index.mjs +49 -52
  98. package/dist/js/listbox/listbox.constants.d.mts +2 -0
  99. package/dist/js/listbox/{constants.listbox.mjs → listbox.constants.mjs} +11 -15
  100. package/dist/js/listbox/listbox.dom.d.mts +5 -0
  101. package/dist/js/listbox/listbox.dom.mjs +2 -0
  102. package/dist/js/listbox/listbox.event.d.mts +9 -0
  103. package/dist/js/listbox/listbox.event.mjs +2 -0
  104. package/dist/js/listbox/listbox.misc.d.mts +2 -0
  105. package/dist/js/listbox/listbox.misc.mjs +2 -0
  106. package/dist/js/listbox/listbox.model.d.mts +2 -0
  107. package/dist/js/listbox/listbox.model.mjs +1 -0
  108. package/dist/js/listbox/listbox.state.d.mts +9 -0
  109. package/dist/js/listbox/listbox.state.mjs +2 -0
  110. package/dist/js/listbox.constants-DOBMwKup.d.mts +9 -0
  111. package/dist/js/listbox.misc-DwfB4Mu_.d.mts +24 -0
  112. package/dist/js/listbox.model-C0MYWXZe.d.mts +20 -0
  113. package/dist/js/listbox.state-BrN296BM.mjs +240 -0
  114. package/dist/js/menu/index.mjs +171 -0
  115. package/dist/js/menu/menu.model.d.mts +33 -0
  116. package/dist/js/menu/menu.model.mjs +15 -0
  117. package/dist/js/movable/movable.embedded.d.mts +2 -2
  118. package/dist/js/movable/movable.embedded.mjs +77 -86
  119. package/dist/js/movable/movable.model.d.mts +2 -0
  120. package/dist/js/movable/movable.model.mjs +12 -0
  121. package/dist/js/movable/movable.standalone.d.mts +2 -1
  122. package/dist/js/movable.embedded-C1bDTLGs.d.mts +11 -0
  123. package/dist/js/movable.model-D9nnPWKk.d.mts +186 -0
  124. package/dist/js/navigable.model-BqoR6iBv.d.mts +44 -0
  125. package/dist/js/option-list.data-CgMyUwPc.mjs +441 -0
  126. package/dist/js/option-list.model-CCPUlPeX.d.mts +169 -0
  127. package/dist/js/popover/index.d.mts +12 -0
  128. package/dist/js/{popover.mjs → popover/index.mjs} +41 -51
  129. package/dist/js/popover/popover.model.d.mts +2 -0
  130. package/dist/js/popover/popover.model.mjs +12 -0
  131. package/dist/js/popover.model-DiLdz0Hc.d.mts +38 -0
  132. package/dist/js/resizable/resizable.embedded.d.mts +2 -2
  133. package/dist/js/resizable/resizable.embedded.mjs +43 -58
  134. package/dist/js/resizable/resizable.model.d.mts +2 -0
  135. package/dist/js/resizable/resizable.model.mjs +21 -0
  136. package/dist/js/resizable/resizable.standalone.d.mts +2 -1
  137. package/dist/js/resizable.embedded-BemH-7Re.d.mts +11 -0
  138. package/dist/js/resizable.model-YEtcC9li.d.mts +46 -0
  139. package/dist/js/sortable/sortable.embedded.d.mts +2 -2
  140. package/dist/js/sortable/sortable.embedded.mjs +111 -116
  141. package/dist/js/sortable/sortable.model.d.mts +2 -0
  142. package/dist/js/sortable/sortable.model.mjs +24 -0
  143. package/dist/js/sortable/sortable.standalone.d.mts +2 -1
  144. package/dist/js/sortable.embedded-CrEGff9k.d.mts +11 -0
  145. package/dist/js/{splitter.d.mts → splitter/index.d.mts} +6 -4
  146. package/dist/js/{splitter.mjs → splitter/index.mjs} +90 -128
  147. package/dist/js/splitter/splitter.model.d.mts +2 -0
  148. package/dist/js/splitter/splitter.model.mjs +37 -0
  149. package/dist/js/splitter.model-C24W6eZ7.d.mts +57 -0
  150. package/dist/js/{tabs.d.mts → tabs/index.d.mts} +8 -8
  151. package/dist/js/{tabs.mjs → tabs/index.mjs} +58 -58
  152. package/dist/js/tabs/tabs.model.d.mts +2 -0
  153. package/dist/js/tabs/tabs.model.mjs +18 -0
  154. package/dist/js/tabs.model-BHPy7fPo.d.mts +40 -0
  155. package/dist/js/toolbar/index.mjs +27 -0
  156. package/dist/js/toolbar/toolbar.model.d.mts +11 -0
  157. package/dist/js/toolbar/toolbar.model.mjs +7 -0
  158. package/dist/js/tooltip/index.d.mts +19 -0
  159. package/dist/js/{tooltip.mjs → tooltip/index.mjs} +61 -86
  160. package/dist/js/tooltip/tooltip.model.d.mts +2 -0
  161. package/dist/js/tooltip/tooltip.model.mjs +15 -0
  162. package/dist/js/tooltip.model-BpNStw5z.d.mts +37 -0
  163. package/package.json +30 -24
  164. package/dist/js/color-picker/constants.color-picker.d.mts +0 -2
  165. package/dist/js/color-picker/event.color-picker.mjs +0 -2
  166. package/dist/js/color-picker/misc.color-picker.d.mts +0 -2
  167. package/dist/js/color-picker/misc.color-picker.mjs +0 -2
  168. package/dist/js/color-picker/models.color-picker.d.mts +0 -2
  169. package/dist/js/color-picker/state.color-picker.d.mts +0 -8
  170. package/dist/js/color-picker/state.color-picker.mjs +0 -2
  171. package/dist/js/combobox/constants.combobox.d.mts +0 -2
  172. package/dist/js/combobox/dom.combobox.d.mts +0 -26
  173. package/dist/js/combobox/misc.combobox.d.mts +0 -2
  174. package/dist/js/combobox/misc.combobox.mjs +0 -2
  175. package/dist/js/combobox/models.combobox.d.mts +0 -43
  176. package/dist/js/combobox/state.combobox.d.mts +0 -11
  177. package/dist/js/combobox/state.combobox.mjs +0 -2
  178. package/dist/js/constants.color-picker-B-gFjL8m.d.mts +0 -364
  179. package/dist/js/constants.combobox-8EMRmv09.d.mts +0 -18
  180. package/dist/js/constants.listbox-DGnX32kv.d.mts +0 -8
  181. package/dist/js/dialog.d.mts +0 -47
  182. package/dist/js/dialog.mjs +0 -131
  183. package/dist/js/draggable-B5-70SZm.d.mts +0 -155
  184. package/dist/js/event.color-picker-BEpq0Adu.mjs +0 -485
  185. package/dist/js/index-C5D3-oiI.d.mts +0 -177
  186. package/dist/js/internal/draggable.d.mts +0 -2
  187. package/dist/js/internal/draggable.mjs +0 -265
  188. package/dist/js/internal/listbox/listbox.constants.d.mts +0 -8
  189. package/dist/js/internal/listbox/listbox.constants.mjs +0 -22
  190. package/dist/js/internal/listbox/listbox.data.d.mts +0 -19
  191. package/dist/js/internal/listbox/listbox.data.mjs +0 -2
  192. package/dist/js/internal/listbox/listbox.dom.d.mts +0 -65
  193. package/dist/js/internal/listbox/listbox.dom.mjs +0 -2
  194. package/dist/js/internal/listbox/listbox.event.d.mts +0 -4
  195. package/dist/js/internal/listbox/listbox.event.mjs +0 -63
  196. package/dist/js/internal/listbox/listbox.form.d.mts +0 -5
  197. package/dist/js/internal/listbox/listbox.form.mjs +0 -53
  198. package/dist/js/internal/listbox/listbox.misc.d.mts +0 -11
  199. package/dist/js/internal/listbox/listbox.misc.mjs +0 -2
  200. package/dist/js/internal/listbox/listbox.model.d.mts +0 -2
  201. package/dist/js/internal/listbox/listbox.state.d.mts +0 -6
  202. package/dist/js/internal/listbox/listbox.state.mjs +0 -40
  203. package/dist/js/internal/navigable.d.mts +0 -36
  204. package/dist/js/internal/navigable.mjs +0 -135
  205. package/dist/js/l10n-Bn-7RcwR.d.mts +0 -20
  206. package/dist/js/l10n.d.mts +0 -2
  207. package/dist/js/l10n.mjs +0 -80
  208. package/dist/js/listbox/constants.listbox.d.mts +0 -2
  209. package/dist/js/listbox/event.listbox.d.mts +0 -7
  210. package/dist/js/listbox/event.listbox.mjs +0 -2
  211. package/dist/js/listbox/misc.listbox.d.mts +0 -2
  212. package/dist/js/listbox/misc.listbox.mjs +0 -2
  213. package/dist/js/listbox/state.listbox.d.mts +0 -10
  214. package/dist/js/listbox/state.listbox.mjs +0 -2
  215. package/dist/js/listbox.data-DQ7-x2uY.mjs +0 -425
  216. package/dist/js/listbox.model-BHPA7GM4.d.mts +0 -125
  217. package/dist/js/menu.mjs +0 -172
  218. package/dist/js/misc.listbox-DKB-j0UK.mjs +0 -196
  219. package/dist/js/misc.listbox-mZMuYOxg.d.mts +0 -20
  220. package/dist/js/popover.d.mts +0 -38
  221. package/dist/js/resizable.embedded-dvhdfQgt.d.mts +0 -34
  222. package/dist/js/toolbar.mjs +0 -31
  223. package/dist/js/tooltip.d.mts +0 -45
  224. /package/dist/js/combobox/{models.combobox.mjs → combobox.model.mjs} +0 -0
  225. /package/dist/js/internal/{listbox/listbox.model.mjs → option-list/option-list.model.mjs} +0 -0
  226. /package/dist/js/{menu.d.mts → menu/index.d.mts} +0 -0
  227. /package/dist/js/{toolbar.d.mts → toolbar/index.d.mts} +0 -0
@@ -1,485 +0,0 @@
1
- import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
2
- import { getLocalization, localize, updateLocalizations } from "./l10n.mjs";
3
- import { COLOR_PICKER_ATTRIBUTE_COPY_ERROR, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, COLOR_PICKER_EXPRESSION_HEX_PREFIX, COLOR_PICKER_INPUT_TYPES, COLOR_PICKER_KEYS, COLOR_PICKER_MESSAGE_INPUT, COLOR_PICKER_MESSAGE_LABEL, COLOR_PICKER_OUTPUTS, COLOR_PICKER_SELECTOR_COPY, COLOR_PICKER_SELECTOR_INPUT, COLOR_PICKER_SELECTOR_OUTPUT_INPUT, COLOR_PICKER_SELECTOR_WELL, COLOR_PICKER_SELECTOR_WELL_KNOB, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./color-picker/constants.color-picker.mjs";
4
- import { copyValue } from "./internal/misc.mjs";
5
- import { OuiColorPickerEvent } from "./color-picker/models.color-picker.mjs";
6
- import { updateColorPickerForm, updateColorPickerValidity } from "./color-picker/form.color-picker.mjs";
7
- import { getColorPickerOutputFormat, updateColorPickerOutputCopyLabel, updateColorPickerOutputInputs, updateColorPickerOutputLabels } from "./color-picker/output.color-picker.mjs";
8
- import { createColorPickerAnchor, createColorPickerContent } from "./color-picker/dom.color-picker.mjs";
9
- import { getAria, setAria } from "@oscarpalmer/toretto/aria";
10
- import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
11
- import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
12
- import { toggleStyles } from "@oscarpalmer/toretto/style";
13
- import { findAncestor } from "@oscarpalmer/toretto/find";
14
- import { supportsTouch } from "@oscarpalmer/toretto/touch";
15
- import { getColor, getForegroundColor, isHexColor, isHslColor, isHslaColor, isHwbColor, isHwbaColor, isRgbColor, isRgbaColor } from "@oscarpalmer/atoms/color";
16
- import { clamp } from "@oscarpalmer/atoms";
17
- import { getAttribute as getAttribute$1, setAria as setAria$1, setProperty } from "@oscarpalmer/toretto";
18
- import { createElement as createElement$1 } from "@oscarpalmer/toretto/create";
19
- //#region src/js/color-picker/state.color-picker.ts
20
- function attachColorPicker(state) {
21
- const { anchor, content, host, id, inline, input, label, listeners, style } = state;
22
- if (!inline) {
23
- state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.container, content.element, {
24
- position: "below-start",
25
- reusable: false
26
- });
27
- state.floatable.update();
28
- }
29
- const labelId = `${id}_label`;
30
- setAria(host, {
31
- describedby: getAria(input, "describedby"),
32
- labelledby: labelId
33
- });
34
- setAttributes(host, { name: input.name === "" ? input.id : input.name });
35
- label.element.htmlFor = anchor.input.id;
36
- label.element.id = labelId;
37
- if (anchor.toggle != null) setAria(anchor.toggle, "expanded", false);
38
- input.before(style, anchor.container, content.element);
39
- input.remove();
40
- listeners.push(on(host, "focusout", () => {
41
- setTimeout(() => {
42
- if (colorPickerMovement.parameters == null && !host.contains(document.activeElement)) state.floatable?.hide();
43
- });
44
- }), on(anchor.input, "change", () => {
45
- onColorPickerInput(state);
46
- }), on(anchor.input, "input", () => {
47
- onColorPickerInput(state);
48
- }), on(content.element, "beforetoggle", (event) => {
49
- if (state.disabled) event.preventDefault();
50
- }, { passive: false }), on(content.element, "toggle", (event) => {
51
- const open = event.newState === "open";
52
- if (anchor.toggle != null) setAria(anchor.toggle, "expanded", open);
53
- if (open) content.well.knob.focus();
54
- }), on(content.hue.input, "input", () => {
55
- onColorPickerHue(state);
56
- }));
57
- if (content.opacity != null) listeners.push(on(content.opacity.input, "input", () => {
58
- onColorPickerOpacity(state);
59
- }));
60
- if (content.output?.toggle != null) listeners.push(on(content.element, "change", (event) => {
61
- onColorPickerOutputValue(event, state);
62
- }), on(content.element, "input", (event) => {
63
- onColorPickerOutputValue(event, state);
64
- }), on(content.output.toggle, "change", () => {
65
- onColorPickerOutputFormat(state);
66
- }));
67
- colorPickerMap.set(host, state);
68
- colorPickerSet.add(state);
69
- }
70
- function detachColorPicker(state) {
71
- const { anchor, content, floatable, host, input, label, style } = state;
72
- floatable?.destroy();
73
- setAria(host, {
74
- describedby: void 0,
75
- labelledby: void 0
76
- });
77
- setAttributes(host, { name: void 0 });
78
- label.element.htmlFor = input.id;
79
- label.element.id = label.id;
80
- anchor.container.before(input);
81
- anchor.container.remove();
82
- content.element.remove();
83
- style.remove();
84
- const listeners = state.listeners.splice(0);
85
- const { length } = listeners;
86
- for (let index = 0; index < length; index += 1) listeners[index]();
87
- colorPickerMap.delete(state.host);
88
- colorPickerSet.delete(state);
89
- }
90
- function initializeColorPicker(element, internals) {
91
- const input = element.querySelector("input");
92
- if (input == null || !COLOR_PICKER_INPUT_TYPES.has(input.type)) throw new Error(COLOR_PICKER_MESSAGE_INPUT);
93
- const label = element.querySelector(`label[for="${input.id}"]`);
94
- if (label == null) throw new Error(COLOR_PICKER_MESSAGE_LABEL);
95
- element.id = input.id;
96
- const id = getColorPickerId();
97
- const labelId = label.id;
98
- const alpha = element.hasAttribute("alpha");
99
- const color = getColor(input.value);
100
- const copy = element.hasAttribute("copy");
101
- const disabled = element.hasAttribute("disabled") || input.disabled;
102
- const inline = element.hasAttribute("inline");
103
- const output = getColorPickerOutput(element);
104
- const readonly = element.hasAttribute("readonly") || input.readOnly;
105
- const required = element.hasAttribute("required") || input.required;
106
- const parameters = {
107
- alpha,
108
- color,
109
- copy,
110
- id,
111
- inline,
112
- input,
113
- output
114
- };
115
- const anchor = createColorPickerAnchor(parameters);
116
- const content = createColorPickerContent(parameters);
117
- const formatted = color.toHexString(alpha);
118
- const state = {
119
- alpha,
120
- anchor,
121
- content,
122
- copy,
123
- disabled,
124
- id,
125
- inline,
126
- input,
127
- internals,
128
- output,
129
- readonly,
130
- required,
131
- color: {
132
- foreground: "",
133
- value: color
134
- },
135
- host: element,
136
- label: {
137
- element: label,
138
- id: labelId
139
- },
140
- listeners: [],
141
- localizations: {
142
- component: {},
143
- global: colorPickerLocalizations
144
- },
145
- style: createElement$1("style"),
146
- value: {
147
- current: formatted,
148
- initial: formatted
149
- }
150
- };
151
- attachColorPicker(state);
152
- setAttributes(element, {
153
- output,
154
- alpha: alpha ? "" : void 0,
155
- copy: copy ? "" : void 0,
156
- inline: inline ? "" : void 0
157
- });
158
- setColorPickerDisabled(state, "disabled", disabled);
159
- setColorPickerDisabled(state, "readonly", readonly);
160
- setColorPickerRequired(state, required);
161
- setColorPickerValues(state, false);
162
- updateColorPickerLabels(state);
163
- updateColorPickerValidity(state, isHexColor(state.value.current, alpha));
164
- return state;
165
- }
166
- const colorPickerMap = /* @__PURE__ */ new WeakMap();
167
- const colorPickerSet = /* @__PURE__ */ new Set();
168
- //#endregion
169
- //#region src/js/color-picker/misc.color-picker.ts
170
- function getColorPickerId() {
171
- index += 1;
172
- return `oui_color_picker_${index}`;
173
- }
174
- function getColorPickerOutput(element) {
175
- const attribute = getAttribute$1(element, "output");
176
- return COLOR_PICKER_OUTPUTS.has(attribute) ? attribute : "none";
177
- }
178
- function getColorPickerValueType(state, value) {
179
- switch (true) {
180
- case isHexColor(value, state.alpha): return state.alpha ? "hexa" : "hex";
181
- case isHslColor(value): return "hsl";
182
- case isHslaColor(value): return "hsla";
183
- case isHwbColor(value): return "hwb";
184
- case isHwbaColor(value): return "hwba";
185
- case isRgbColor(value): return "rgb";
186
- case isRgbaColor(value): return "rgba";
187
- }
188
- }
189
- function setColorPickerLocalizations(first, second) {
190
- updateColorPickerLocalizations(colorPickerLocalizations, colorPickerLocalizations.values, first, second);
191
- }
192
- function setColorPickerDisabled(state, type, value) {
193
- state[type] = value;
194
- setAria$1(state.host, type, value);
195
- state.anchor.input.readOnly = value;
196
- setAria$1(state.anchor.input, type, value);
197
- setProperty(state.content.hue.input, "disabled", state.disabled || state.readonly);
198
- if (state.anchor.toggle != null) setAria$1(state.anchor.toggle, "disabled", state.disabled);
199
- if (state.content.opacity != null) setProperty(state.content.opacity.input, "disabled", state.disabled || state.readonly);
200
- }
201
- function setColorPickerRequired(state, value) {
202
- state.required = value;
203
- setAria$1(state.host, "required", value);
204
- setAria$1(state.anchor.input, "required", value);
205
- updateColorPickerValidity(state, isHexColor(state.value.current, state.alpha));
206
- }
207
- function setColorPickerValue(state, value, type) {
208
- if (state == null) return;
209
- const actual = type ?? getColorPickerValueType(state, value);
210
- if (actual == null || type != null && type !== actual) return;
211
- state.color.value[actual] = value;
212
- setColorPickerValues(state, true);
213
- }
214
- function setColorPickerValues(state, focus, input) {
215
- const { anchor, color, content, host, style } = state;
216
- color.foreground = getForegroundColor(color.value).hex;
217
- const { alpha, hex, hsl, rgb } = color.value;
218
- const { hue, lightness, saturation } = hsl;
219
- const { blue, green, red } = rgb;
220
- const value = input ?? color.value.toHexString(state.alpha);
221
- anchor.input.value = value;
222
- content.hue.input.valueAsNumber = hue;
223
- if (content.opacity != null) content.opacity.input.valueAsNumber = alpha;
224
- state.value.current = value;
225
- style.textContent = `#${host.id} {
226
- --oui-color-picker-alpha: ${alpha};
227
- --oui-color-picker-blue: ${blue};
228
- --oui-color-picker-green: ${green};
229
- --oui-color-picker-foreground: #${color.foreground};
230
- --oui-color-picker-hex: #${hex};
231
- --oui-color-picker-hue: ${hue};
232
- --oui-color-picker-lightness: ${lightness};
233
- --oui-color-picker-red: ${red};
234
- --oui-color-picker-saturation: ${saturation};
235
- }`;
236
- updateColorPickerForm(state, isHexColor(state.value.current, state.alpha));
237
- updateColorPickerOutputInputs(state);
238
- updateColorPickerWell(state);
239
- if (focus) content.well.knob.focus();
240
- }
241
- function updateColorPickerLabels(state) {
242
- const { anchor, content, host, localizations } = state;
243
- const { component, global } = localizations;
244
- if (anchor.toggle != null) setAria$1(anchor.toggle, "label", localize(getLocalization(global, host, "toggle", component), {}, []));
245
- content.hue.label.textContent = localize(getLocalization(global, host, "hue", component), {}, []);
246
- content.well.label.textContent = localize(getLocalization(global, host, "wellLabel", component), {}, []);
247
- updateColorPickerOutputLabels(state);
248
- updateColorPickerWell(state);
249
- if (content.opacity != null) content.opacity.label.textContent = localize(getLocalization(global, host, "opacity", component), {}, []);
250
- }
251
- function updateColorPickerLocalizations(instance, destination, first, second) {
252
- updateLocalizations(instance, typeof first === "string" ? { [first]: second } : first, destination, () => {
253
- for (const state of colorPickerSet) updateColorPickerLabels(state);
254
- });
255
- }
256
- function updateColorPickerWell(state) {
257
- const { color, content, host, localizations } = state;
258
- const { component, global } = localizations;
259
- const { lightness, saturation } = color.value.hsl;
260
- setAria$1(content.well.knob, "valuetext", localize(getLocalization(global, host, "wellValue", component), {
261
- lightness,
262
- saturation
263
- }, [lightness, saturation]));
264
- }
265
- let index = 0;
266
- //#endregion
267
- //#region src/js/color-picker/event.color-picker.ts
268
- function cancelMove(parameters) {
269
- parameters.state.color.value.hexa = parameters.value;
270
- setColorPickerValues(parameters.state, true);
271
- colorPickerMovement.parameters = void 0;
272
- styleToggler.remove();
273
- }
274
- function onClick(event) {
275
- const button = findAncestor(event, COLOR_PICKER_SELECTOR_COPY);
276
- if (!(button instanceof HTMLButtonElement)) return;
277
- setAttributes(button, {
278
- [COLOR_PICKER_ATTRIBUTE_COPY_ERROR]: void 0,
279
- [COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS]: void 0
280
- });
281
- const state = colorPickerMap.get(findAncestor(event, COLOR_PICKER_TAGNAME));
282
- if (state == null || state.disabled) return;
283
- const copy = button.dataset.color == null ? state.content.output?.copy : state.anchor.copy;
284
- if (copy == null) return;
285
- if (copy.timer != null) {
286
- clearTimeout(copy.timer);
287
- copy.timer = void 0;
288
- }
289
- const color = button.dataset.color ?? getColorPickerOutputFormat(state);
290
- if (color == null) return;
291
- let value;
292
- switch (color) {
293
- case "hex":
294
- value = state.color.value.toHexString(state.alpha);
295
- break;
296
- case "hsl":
297
- value = state.color.value.toHslString(state.alpha);
298
- break;
299
- case "hwb":
300
- value = state.color.value.toHwbString(state.alpha);
301
- break;
302
- case "rgb": value = state.color.value.toRgbString(state.alpha);
303
- }
304
- if (value != null) copyValue(value, () => {
305
- console.log("Copied value to clipboard:", value);
306
- updateColorPickerCopy(copy, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS);
307
- }, () => {
308
- console.warn("Failed to copy value to clipboard:", value);
309
- updateColorPickerCopy(copy, COLOR_PICKER_ATTRIBUTE_COPY_ERROR);
310
- });
311
- }
312
- function onColorPickerHue(state) {
313
- const hue = state.content.hue.input.valueAsNumber;
314
- state.color.value.hsla = {
315
- ...state.color.value.hsla,
316
- hue
317
- };
318
- setColorPickerValues(state, false);
319
- }
320
- function onColorPickerInput(state) {
321
- const { alpha, anchor, color, host } = state;
322
- const value = anchor.input.value.replace(COLOR_PICKER_EXPRESSION_HEX_PREFIX, "");
323
- if (value.toLowerCase() === (alpha ? color.value.hexa : color.value.hex).toLowerCase()) return;
324
- state.value.current = anchor.input.value;
325
- const { length } = value;
326
- let valid;
327
- if (alpha) valid = isHexColor(value, true) && (length === 4 || length === 8);
328
- else valid = isHexColor(value) && (length === 3 || length === 6);
329
- if (valid) {
330
- if (length === 3 || length === 6) color.value.hex = value;
331
- else color.value.hexa = value;
332
- }
333
- setColorPickerValues(state, false, anchor.input.value);
334
- dispatch(host, new OuiColorPickerEvent("oui:input", color.value, valid));
335
- }
336
- function onColorPickerOpacity(state) {
337
- const opacity = state.content.opacity?.input.valueAsNumber;
338
- if (opacity == null) return;
339
- state.color.value.alpha = opacity;
340
- setColorPickerValues(state, false);
341
- }
342
- function onColorPickerOutputFormat(state) {
343
- const { items, toggle } = state.content.output ?? {};
344
- if (items == null || toggle == null) return;
345
- const attribute = `${COLOR_PICKER_TAGNAME}-output-${toggle.value}`;
346
- for (const item of items) item.hidden = !item.hasAttribute(attribute);
347
- if (state.content.output?.copy != null) updateColorPickerOutputCopyLabel(state, state.content.output.copy.button);
348
- }
349
- function onColorPickerOutputValue(event, state) {
350
- const input = findAncestor(event, COLOR_PICKER_SELECTOR_OUTPUT_INPUT);
351
- if (!(input instanceof HTMLInputElement)) return;
352
- const color = input.dataset.color;
353
- const property = input.dataset.property;
354
- if (color == null || property == null) return;
355
- if (outputTimer != null) clearTimeout(outputTimer);
356
- outputTimer = setTimeout(() => {
357
- outputTimer = void 0;
358
- state.color.value[color] = {
359
- ...state.color.value[color],
360
- [property]: input.valueAsNumber
361
- };
362
- setColorPickerValues(state, false);
363
- });
364
- }
365
- function onEnter(state) {
366
- const { alpha, anchor, color, internals } = state;
367
- const input = anchor.input.value.replace(COLOR_PICKER_EXPRESSION_HEX_PREFIX, "");
368
- const short = alpha ? input.length === 4 : input.length === 3;
369
- if (isHexColor(input, alpha) && short) anchor.input.value = color.value.toHexString(alpha);
370
- internals.form?.requestSubmit();
371
- }
372
- function onKeydown(event) {
373
- if (colorPickerMovement.parameters != null && event.key === "Escape") {
374
- cancelMove(colorPickerMovement.parameters);
375
- return;
376
- }
377
- const knob = findAncestor(event, COLOR_PICKER_SELECTOR_WELL_KNOB);
378
- if (!(event.key === "Enter" && findAncestor(event, COLOR_PICKER_SELECTOR_INPUT) != null || COLOR_PICKER_KEYS.has(event.key) && knob != null)) return;
379
- const state = colorPickerMap.get(findAncestor(event, COLOR_PICKER_TAGNAME));
380
- if (state == null || state.disabled || state.readonly) return;
381
- event.preventDefault();
382
- if (event.key === "Enter") {
383
- onEnter(state);
384
- return;
385
- }
386
- if (knob == null) return;
387
- const modifier = event.shiftKey ? 10 : 1;
388
- let { lightness, saturation } = state.color.value.hsl;
389
- switch (event.key) {
390
- case "ArrowDown":
391
- lightness -= 1 * modifier;
392
- break;
393
- case "ArrowLeft":
394
- saturation -= 1 * modifier;
395
- break;
396
- case "ArrowRight":
397
- saturation += 1 * modifier;
398
- break;
399
- case "ArrowUp":
400
- lightness += 1 * modifier;
401
- break;
402
- case "End":
403
- lightness = 0;
404
- break;
405
- case "Home":
406
- lightness = 100;
407
- break;
408
- case "PageDown":
409
- lightness -= 10;
410
- break;
411
- case "PageUp": lightness += 10;
412
- }
413
- state.color.value.hsl = {
414
- ...state.color.value.hsl,
415
- lightness: clamp(lightness, 0, 100),
416
- saturation: clamp(saturation, 0, 100)
417
- };
418
- setColorPickerValues(state, false);
419
- }
420
- function onPointerdown(event) {
421
- if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart" || event.button !== 0)) return;
422
- const well = findAncestor(event, COLOR_PICKER_SELECTOR_WELL);
423
- if (well == null) return;
424
- const element = findAncestor(event, COLOR_PICKER_TAGNAME);
425
- if (element == null) return;
426
- if (supportsTouch.value) event.preventDefault();
427
- if (getEventPosition(event) == null) return;
428
- const state = colorPickerMap.get(element);
429
- if (state == null || state.disabled || state.readonly) return;
430
- colorPickerMovement.parameters = {
431
- state,
432
- rectangle: well.getBoundingClientRect(),
433
- value: state.color.value.hexa
434
- };
435
- styleToggler.set();
436
- }
437
- function onPointermove(event) {
438
- if (colorPickerMovement.parameters == null) return;
439
- const position = getEventPosition(event);
440
- if (position != null) updateColorPickerValues(colorPickerMovement.parameters, position);
441
- }
442
- function onPointerup(event) {
443
- if (colorPickerMovement.parameters == null) return;
444
- const position = getEventPosition(event);
445
- if (position != null) updateColorPickerValues(colorPickerMovement.parameters, position);
446
- colorPickerMovement.parameters = void 0;
447
- styleToggler.remove();
448
- }
449
- function updateColorPickerCopy(copy, attribute) {
450
- const { button } = copy;
451
- setAttribute(button, attribute, "");
452
- copy.timer = setTimeout(() => {
453
- copy.timer = void 0;
454
- setAttribute(button, attribute, void 0);
455
- }, styleTime);
456
- }
457
- function updateColorPickerValues(parameters, position) {
458
- const { rectangle, state } = parameters;
459
- const { x, y } = position;
460
- const top = clamp((y - rectangle.top) / rectangle.height, 0, 1);
461
- const left = clamp((x - rectangle.left) / rectangle.width, 0, 1);
462
- state.color.value.hsl = {
463
- ...state.color.value.hsl,
464
- lightness: (1 - top) * 100,
465
- saturation: left * 100
466
- };
467
- setColorPickerValues(state, true);
468
- }
469
- const styleToggler = toggleStyles(document.body, {
470
- touchAction: "none",
471
- userSelect: "none",
472
- webkitUserSelect: "none"
473
- });
474
- const colorPickerMovement = {};
475
- const styleTime = 2500;
476
- let outputTimer;
477
- on(document, "click", onClick);
478
- on(document, "keydown", onKeydown, { passive: false });
479
- on(document, "mousedown", onPointerdown);
480
- on(document, "pointermove", onPointermove);
481
- on(document, "pointerup", onPointerup);
482
- on(document, "touchcancel", onPointerup);
483
- on(document, "touchstart", onPointerdown, { passive: false });
484
- //#endregion
485
- export { attachColorPicker as _, onColorPickerOutputFormat as a, detachColorPicker as b, getColorPickerOutput as c, setColorPickerLocalizations as d, setColorPickerRequired as f, updateColorPickerLocalizations as g, updateColorPickerLabels as h, onColorPickerOpacity as i, getColorPickerValueType as l, setColorPickerValues as m, onColorPickerHue as n, onColorPickerOutputValue as o, setColorPickerValue as p, onColorPickerInput as r, getColorPickerId as s, colorPickerMovement as t, setColorPickerDisabled as u, colorPickerMap as v, initializeColorPicker as x, colorPickerSet as y };
@@ -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-BHPA7GM4.mjs";
3
- import { c as COMBOBOX_TAGNAME } from "./constants.combobox-8EMRmv09.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-B5-70SZm.mjs";
2
- export { CreateOuiDraggableOptions, OuiDragMovePosition, OuiDraggable, OuiDraggableBound, OuiDraggableGlobals, OuiDraggableItem, OuiDraggableState, addDraggable, getDraggableStates, removeDraggable };