@oscarpalmer/oui 0.40.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.
- package/dist/css/color-picker.css +80 -69
- package/dist/css/listbox.css +169 -0
- package/dist/js/color-picker/color-picker.constants.d.mts +2 -2
- package/dist/js/color-picker/color-picker.constants.mjs +5 -3
- package/dist/js/color-picker/color-picker.dom.d.mts +1 -1
- package/dist/js/color-picker/color-picker.dom.mjs +31 -14
- package/dist/js/color-picker/color-picker.event.d.mts +2 -2
- package/dist/js/color-picker/color-picker.event.mjs +232 -1
- package/dist/js/color-picker/color-picker.form.d.mts +1 -1
- package/dist/js/color-picker/color-picker.form.mjs +1 -3
- package/dist/js/color-picker/color-picker.misc.d.mts +2 -2
- package/dist/js/color-picker/color-picker.misc.mjs +104 -2
- package/dist/js/color-picker/color-picker.model.d.mts +2 -2
- package/dist/js/color-picker/color-picker.output.d.mts +1 -1
- package/dist/js/color-picker/color-picker.output.mjs +7 -8
- package/dist/js/color-picker/color-picker.state.d.mts +1 -1
- package/dist/js/color-picker/color-picker.state.mjs +167 -1
- package/dist/js/color-picker/index.d.mts +7 -15
- package/dist/js/color-picker/index.mjs +11 -6
- package/dist/js/{color-picker.constants-D1mxw_Le.d.mts → color-picker.constants-BZgXQr5o.d.mts} +6 -8
- package/dist/js/{color-picker.misc-CtsXGrOe.d.mts → color-picker.misc-BIS3R6jk.d.mts} +8 -4
- package/dist/js/combobox/combobox.constants.d.mts +1 -1
- package/dist/js/combobox/combobox.dom.d.mts +12 -13
- package/dist/js/combobox/combobox.dom.mjs +15 -17
- package/dist/js/combobox/combobox.event.d.mts +8 -8
- package/dist/js/combobox/combobox.event.mjs +1 -1
- package/dist/js/combobox/combobox.misc.d.mts +2 -2
- package/dist/js/combobox/combobox.misc.mjs +2 -2
- package/dist/js/combobox/combobox.model.d.mts +2 -2
- package/dist/js/combobox/combobox.state.d.mts +3 -4
- package/dist/js/combobox/combobox.state.mjs +1 -1
- package/dist/js/combobox/index.d.mts +8 -19
- package/dist/js/combobox/index.mjs +21 -23
- package/dist/js/{combobox.constants-DZVkMP5g.d.mts → combobox.constants-Hb3bqqQJ.d.mts} +3 -3
- package/dist/js/combobox.misc-DRDFk6X8.d.mts +26 -0
- package/dist/js/combobox.model-gjEI2VqZ.d.mts +46 -0
- package/dist/js/{combobox.state-BfJ3Hxg8.mjs → combobox.state-AstCICiH.mjs} +30 -41
- package/dist/js/dialog/dialog.model.d.mts +1 -1
- package/dist/js/dialog/index.d.mts +1 -1
- package/dist/js/{dialog.model-DX2mndMh.d.mts → dialog.model-HVzYWoDo.d.mts} +3 -3
- package/dist/js/floatable/floatable.embedded.d.mts +1 -1
- package/dist/js/floatable/floatable.embedded.mjs +2 -2
- package/dist/js/floatable/floatable.standalone.d.mts +1 -1
- package/dist/js/{floatable.embedded-MeTyXjFn.d.mts → floatable.embedded-ncshL3Sa.d.mts} +3 -3
- package/dist/js/focus-trap/focus-trap.embedded.d.mts +1 -1
- package/dist/js/focus-trap/focus-trap.embedded.mjs +10 -9
- package/dist/js/focus-trap/focus-trap.model.d.mts +1 -1
- package/dist/js/focus-trap/focus-trap.standalone.d.mts +2 -2
- package/dist/js/{focus-trap.embedded-DIU05m1z.d.mts → focus-trap.embedded-DpcPkP7c.d.mts} +3 -3
- package/dist/js/{focus-trap.model-BeX6UYlw.d.mts → focus-trap.model-CpltX5B5.d.mts} +1 -1
- package/dist/js/index.d.mts +16 -16
- package/dist/js/index.mjs +3 -3
- package/dist/js/internal/attributable.d.mts +1 -1
- package/dist/js/internal/draggable/draggable.model.d.mts +1 -1
- package/dist/js/internal/draggable/index.d.mts +8 -8
- package/dist/js/internal/draggable/index.mjs +27 -18
- package/dist/js/internal/l10n/index.d.mts +5 -0
- package/dist/js/internal/l10n/index.mjs +147 -0
- package/dist/js/internal/l10n/l10n.model.d.mts +2 -0
- package/dist/js/{l10n → internal/l10n}/l10n.model.mjs +5 -2
- package/dist/js/internal/misc.d.mts +2 -2
- package/dist/js/internal/navigable/index.d.mts +3 -3
- package/dist/js/internal/navigable/index.mjs +1 -1
- package/dist/js/internal/navigable/navigable.model.d.mts +1 -1
- package/dist/js/internal/option-list/option-list.constants.d.mts +8 -0
- package/dist/js/internal/option-list/option-list.constants.mjs +22 -0
- package/dist/js/internal/option-list/option-list.data.d.mts +21 -0
- package/dist/js/internal/option-list/option-list.data.mjs +2 -0
- package/dist/js/internal/option-list/option-list.dom.d.mts +18 -0
- package/dist/js/internal/option-list/option-list.dom.mjs +2 -0
- package/dist/js/internal/option-list/option-list.event.d.mts +6 -0
- package/dist/js/internal/{listbox/listbox.event.mjs → option-list/option-list.event.mjs} +7 -7
- package/dist/js/internal/option-list/option-list.form.d.mts +7 -0
- package/dist/js/internal/{listbox/listbox.form.mjs → option-list/option-list.form.mjs} +10 -13
- package/dist/js/internal/option-list/option-list.misc.d.mts +13 -0
- package/dist/js/internal/option-list/option-list.misc.mjs +2 -0
- package/dist/js/internal/option-list/option-list.model.d.mts +2 -0
- package/dist/js/internal/option-list/option-list.state.d.mts +8 -0
- package/dist/js/internal/option-list/option-list.state.mjs +39 -0
- package/dist/js/l10n/index.d.mts +3 -9
- package/dist/js/l10n/index.mjs +2 -107
- package/dist/js/l10n.model-D1E1u35L.d.mts +54 -0
- package/dist/js/listbox/index.d.mts +6 -17
- package/dist/js/listbox/index.mjs +22 -23
- package/dist/js/listbox/{constants.listbox.d.mts → listbox.constants.d.mts} +1 -1
- package/dist/js/listbox/{constants.listbox.mjs → listbox.constants.mjs} +1 -1
- package/dist/js/listbox/listbox.dom.d.mts +5 -0
- package/dist/js/listbox/listbox.dom.mjs +2 -0
- package/dist/js/listbox/listbox.event.d.mts +9 -0
- package/dist/js/listbox/listbox.event.mjs +2 -0
- package/dist/js/listbox/listbox.misc.d.mts +2 -0
- package/dist/js/listbox/listbox.misc.mjs +2 -0
- package/dist/js/listbox/listbox.model.d.mts +2 -0
- package/dist/js/listbox/listbox.model.mjs +1 -0
- package/dist/js/listbox/listbox.state.d.mts +9 -0
- package/dist/js/listbox/listbox.state.mjs +2 -0
- package/dist/js/{constants.listbox-C5Ap6Ag_.d.mts → listbox.constants-DOBMwKup.d.mts} +3 -3
- package/dist/js/listbox.misc-DwfB4Mu_.d.mts +24 -0
- package/dist/js/listbox.model-C0MYWXZe.d.mts +20 -0
- package/dist/js/listbox.state-BrN296BM.mjs +240 -0
- package/dist/js/menu/index.mjs +7 -3
- package/dist/js/menu/menu.model.d.mts +7 -7
- package/dist/js/movable/movable.embedded.d.mts +1 -1
- package/dist/js/movable/movable.embedded.mjs +21 -18
- package/dist/js/movable/movable.model.d.mts +1 -1
- package/dist/js/movable/movable.standalone.d.mts +2 -2
- package/dist/js/{movable.embedded-DoyXLegc.d.mts → movable.embedded-C1bDTLGs.d.mts} +2 -2
- package/dist/js/{movable.model-BHaK_mKw.d.mts → movable.model-D9nnPWKk.d.mts} +41 -41
- package/dist/js/{navigable.model-BPOM8DZk.d.mts → navigable.model-BqoR6iBv.d.mts} +1 -1
- package/dist/js/{listbox.data-BQyZGKgr.mjs → option-list.data-CgMyUwPc.mjs} +70 -71
- package/dist/js/option-list.model-CCPUlPeX.d.mts +169 -0
- package/dist/js/popover/index.d.mts +2 -2
- package/dist/js/popover/index.mjs +1 -1
- package/dist/js/popover/popover.model.d.mts +1 -1
- package/dist/js/{popover.model-ubKNG612.d.mts → popover.model-DiLdz0Hc.d.mts} +4 -4
- package/dist/js/resizable/resizable.embedded.d.mts +1 -1
- package/dist/js/resizable/resizable.model.d.mts +1 -1
- package/dist/js/resizable/resizable.standalone.d.mts +2 -2
- package/dist/js/{resizable.embedded-Bf1qBUdt.d.mts → resizable.embedded-BemH-7Re.d.mts} +2 -2
- package/dist/js/{resizable.model-BwzJcTVJ.d.mts → resizable.model-YEtcC9li.d.mts} +3 -3
- package/dist/js/sortable/sortable.embedded.d.mts +1 -1
- package/dist/js/sortable/sortable.embedded.mjs +46 -38
- package/dist/js/sortable/sortable.model.d.mts +1 -1
- package/dist/js/sortable/sortable.standalone.d.mts +2 -2
- package/dist/js/{sortable.embedded-DzBKAwSG.d.mts → sortable.embedded-CrEGff9k.d.mts} +2 -2
- package/dist/js/splitter/index.d.mts +1 -1
- package/dist/js/splitter/splitter.model.d.mts +1 -1
- package/dist/js/{splitter.model-DOLNjLVS.d.mts → splitter.model-C24W6eZ7.d.mts} +2 -2
- package/dist/js/tabs/index.d.mts +2 -2
- package/dist/js/tabs/index.mjs +1 -1
- package/dist/js/tabs/tabs.model.d.mts +1 -1
- package/dist/js/{tabs.model-DRBX_JtI.d.mts → tabs.model-BHPy7fPo.d.mts} +1 -1
- package/dist/js/toolbar/toolbar.model.d.mts +2 -2
- package/dist/js/tooltip/index.d.mts +2 -2
- package/dist/js/tooltip/tooltip.model.d.mts +1 -1
- package/dist/js/{tooltip.model-DRkY_BsL.d.mts → tooltip.model-BpNStw5z.d.mts} +3 -3
- package/package.json +1 -1
- package/dist/js/color-picker.event-Cksj5TvS.mjs +0 -500
- package/dist/js/combobox.misc-C1tPZZDi.d.mts +0 -22
- package/dist/js/combobox.model-oDV06XCN.d.mts +0 -44
- package/dist/js/internal/listbox/listbox.constants.d.mts +0 -8
- package/dist/js/internal/listbox/listbox.constants.mjs +0 -22
- package/dist/js/internal/listbox/listbox.data.d.mts +0 -19
- package/dist/js/internal/listbox/listbox.data.mjs +0 -2
- package/dist/js/internal/listbox/listbox.dom.d.mts +0 -65
- package/dist/js/internal/listbox/listbox.dom.mjs +0 -2
- package/dist/js/internal/listbox/listbox.event.d.mts +0 -4
- package/dist/js/internal/listbox/listbox.form.d.mts +0 -5
- package/dist/js/internal/listbox/listbox.misc.d.mts +0 -11
- package/dist/js/internal/listbox/listbox.misc.mjs +0 -2
- package/dist/js/internal/listbox/listbox.model.d.mts +0 -2
- package/dist/js/internal/listbox/listbox.state.d.mts +0 -6
- package/dist/js/internal/listbox/listbox.state.mjs +0 -39
- package/dist/js/l10n/l10n.model.d.mts +0 -2
- package/dist/js/l10n.model-D6a9frgl.d.mts +0 -26
- package/dist/js/listbox/event.listbox.d.mts +0 -7
- package/dist/js/listbox/event.listbox.mjs +0 -48
- package/dist/js/listbox/misc.listbox.d.mts +0 -2
- package/dist/js/listbox/misc.listbox.mjs +0 -2
- package/dist/js/listbox/state.listbox.d.mts +0 -9
- package/dist/js/listbox/state.listbox.mjs +0 -2
- package/dist/js/listbox.model-CuBOj4qe.d.mts +0 -129
- package/dist/js/misc.listbox-CjfBUbHD.mjs +0 -154
- package/dist/js/misc.listbox-CtoGvXQo.d.mts +0 -20
- /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 };
|