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