@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.
- package/README.md +1 -1
- 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 -0
- package/dist/js/color-picker/{constants.color-picker.mjs → color-picker.constants.mjs} +7 -4
- package/dist/js/color-picker/{dom.color-picker.d.mts → color-picker.dom.d.mts} +2 -2
- package/dist/js/color-picker/{dom.color-picker.mjs → color-picker.dom.mjs} +33 -16
- package/dist/js/color-picker/{event.color-picker.d.mts → color-picker.event.d.mts} +3 -3
- package/dist/js/color-picker/color-picker.event.mjs +233 -0
- package/dist/js/color-picker/{form.color-picker.d.mts → color-picker.form.d.mts} +2 -2
- package/dist/js/color-picker/{form.color-picker.mjs → color-picker.form.mjs} +9 -8
- package/dist/js/color-picker/color-picker.misc.d.mts +2 -0
- package/dist/js/color-picker/color-picker.misc.mjs +104 -0
- package/dist/js/color-picker/color-picker.model.d.mts +2 -0
- package/dist/js/color-picker/{models.color-picker.mjs → color-picker.model.mjs} +1 -1
- package/dist/js/color-picker/{output.color-picker.d.mts → color-picker.output.d.mts} +2 -2
- package/dist/js/color-picker/{output.color-picker.mjs → color-picker.output.mjs} +19 -18
- package/dist/js/color-picker/color-picker.state.d.mts +8 -0
- package/dist/js/color-picker/color-picker.state.mjs +168 -0
- package/dist/js/color-picker/index.d.mts +172 -2
- package/dist/js/color-picker/index.mjs +66 -59
- package/dist/js/color-picker.constants-BZgXQr5o.d.mts +177 -0
- package/dist/js/color-picker.misc-BIS3R6jk.d.mts +31 -0
- package/dist/js/combobox/combobox.constants.d.mts +2 -0
- package/dist/js/combobox/{constants.combobox.mjs → combobox.constants.mjs} +21 -21
- package/dist/js/combobox/combobox.dom.d.mts +25 -0
- package/dist/js/combobox/{dom.combobox.mjs → combobox.dom.mjs} +51 -49
- package/dist/js/combobox/{event.combobox.d.mts → combobox.event.d.mts} +9 -9
- package/dist/js/combobox/{event.combobox.mjs → combobox.event.mjs} +1 -1
- package/dist/js/combobox/combobox.misc.d.mts +2 -0
- package/dist/js/combobox/combobox.misc.mjs +2 -0
- package/dist/js/combobox/combobox.model.d.mts +2 -0
- package/dist/js/combobox/combobox.state.d.mts +9 -0
- package/dist/js/combobox/combobox.state.mjs +2 -0
- package/dist/js/combobox/index.d.mts +152 -2
- package/dist/js/combobox/index.mjs +54 -55
- package/dist/js/combobox.constants-Hb3bqqQJ.d.mts +19 -0
- package/dist/js/combobox.misc-DRDFk6X8.d.mts +26 -0
- package/dist/js/combobox.model-gjEI2VqZ.d.mts +46 -0
- package/dist/js/{state.combobox-BWDFHwoi.mjs → combobox.state-AstCICiH.mjs} +109 -106
- package/dist/js/dialog/dialog.model.d.mts +2 -0
- package/dist/js/dialog/dialog.model.mjs +11 -0
- package/dist/js/dialog/index.d.mts +12 -0
- package/dist/js/dialog/index.mjs +123 -0
- package/dist/js/dialog.model-HVzYWoDo.d.mts +45 -0
- package/dist/js/floatable/floatable.embedded.d.mts +2 -2
- package/dist/js/floatable/floatable.embedded.mjs +64 -92
- package/dist/js/floatable/floatable.model.d.mts +2 -0
- package/dist/js/floatable/floatable.model.mjs +23 -0
- package/dist/js/floatable/floatable.standalone.d.mts +2 -1
- package/dist/js/floatable.embedded-ncshL3Sa.d.mts +17 -0
- package/dist/js/{floatable.embedded-DQYkXt8X.d.mts → floatable.model-DXsQgoU7.d.mts} +13 -20
- package/dist/js/focus-trap/focus-trap.embedded.d.mts +2 -2
- package/dist/js/focus-trap/focus-trap.embedded.mjs +117 -138
- package/dist/js/focus-trap/focus-trap.model.d.mts +2 -0
- package/dist/js/focus-trap/focus-trap.model.mjs +15 -0
- package/dist/js/focus-trap/focus-trap.standalone.d.mts +2 -1
- package/dist/js/focus-trap.embedded-DpcPkP7c.d.mts +13 -0
- package/dist/js/{focus-trap.embedded-CjyFQYow.d.mts → focus-trap.model-CpltX5B5.d.mts} +16 -18
- package/dist/js/index.d.mts +26 -14
- package/dist/js/index.mjs +18 -17
- package/dist/js/internal/attributable.d.mts +1 -1
- package/dist/js/internal/attributable.mjs +3 -2
- package/dist/js/internal/draggable/draggable.model.d.mts +2 -0
- package/dist/js/internal/draggable/draggable.model.mjs +37 -0
- package/dist/js/internal/draggable/index.d.mts +13 -0
- package/dist/js/internal/draggable/index.mjs +243 -0
- 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/internal/l10n/l10n.model.mjs +12 -0
- package/dist/js/internal/misc.d.mts +3 -2
- package/dist/js/internal/misc.mjs +4 -6
- package/dist/js/internal/navigable/index.d.mts +6 -0
- package/dist/js/internal/navigable/index.mjs +125 -0
- package/dist/js/internal/navigable/navigable.model.d.mts +2 -0
- package/dist/js/internal/navigable/navigable.model.mjs +18 -0
- 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/option-list/option-list.event.mjs +66 -0
- package/dist/js/internal/option-list/option-list.form.d.mts +7 -0
- package/dist/js/internal/option-list/option-list.form.mjs +53 -0
- 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 -0
- package/dist/js/l10n/index.mjs +2 -0
- package/dist/js/l10n.model-D1E1u35L.d.mts +54 -0
- package/dist/js/listbox/index.d.mts +9 -18
- package/dist/js/listbox/index.mjs +49 -52
- package/dist/js/listbox/listbox.constants.d.mts +2 -0
- package/dist/js/listbox/{constants.listbox.mjs → listbox.constants.mjs} +11 -15
- 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/listbox.constants-DOBMwKup.d.mts +9 -0
- 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 +171 -0
- package/dist/js/menu/menu.model.d.mts +33 -0
- package/dist/js/menu/menu.model.mjs +15 -0
- package/dist/js/movable/movable.embedded.d.mts +2 -2
- package/dist/js/movable/movable.embedded.mjs +77 -86
- package/dist/js/movable/movable.model.d.mts +2 -0
- package/dist/js/movable/movable.model.mjs +12 -0
- package/dist/js/movable/movable.standalone.d.mts +2 -1
- package/dist/js/movable.embedded-C1bDTLGs.d.mts +11 -0
- package/dist/js/movable.model-D9nnPWKk.d.mts +186 -0
- package/dist/js/navigable.model-BqoR6iBv.d.mts +44 -0
- package/dist/js/option-list.data-CgMyUwPc.mjs +441 -0
- package/dist/js/option-list.model-CCPUlPeX.d.mts +169 -0
- package/dist/js/popover/index.d.mts +12 -0
- package/dist/js/{popover.mjs → popover/index.mjs} +41 -51
- package/dist/js/popover/popover.model.d.mts +2 -0
- package/dist/js/popover/popover.model.mjs +12 -0
- package/dist/js/popover.model-DiLdz0Hc.d.mts +38 -0
- package/dist/js/resizable/resizable.embedded.d.mts +2 -2
- package/dist/js/resizable/resizable.embedded.mjs +43 -58
- package/dist/js/resizable/resizable.model.d.mts +2 -0
- package/dist/js/resizable/resizable.model.mjs +21 -0
- package/dist/js/resizable/resizable.standalone.d.mts +2 -1
- package/dist/js/resizable.embedded-BemH-7Re.d.mts +11 -0
- package/dist/js/resizable.model-YEtcC9li.d.mts +46 -0
- package/dist/js/sortable/sortable.embedded.d.mts +2 -2
- package/dist/js/sortable/sortable.embedded.mjs +111 -116
- package/dist/js/sortable/sortable.model.d.mts +2 -0
- package/dist/js/sortable/sortable.model.mjs +24 -0
- package/dist/js/sortable/sortable.standalone.d.mts +2 -1
- package/dist/js/sortable.embedded-CrEGff9k.d.mts +11 -0
- package/dist/js/{splitter.d.mts → splitter/index.d.mts} +6 -4
- package/dist/js/{splitter.mjs → splitter/index.mjs} +90 -128
- package/dist/js/splitter/splitter.model.d.mts +2 -0
- package/dist/js/splitter/splitter.model.mjs +37 -0
- package/dist/js/splitter.model-C24W6eZ7.d.mts +57 -0
- package/dist/js/{tabs.d.mts → tabs/index.d.mts} +8 -8
- package/dist/js/{tabs.mjs → tabs/index.mjs} +58 -58
- package/dist/js/tabs/tabs.model.d.mts +2 -0
- package/dist/js/tabs/tabs.model.mjs +18 -0
- package/dist/js/tabs.model-BHPy7fPo.d.mts +40 -0
- package/dist/js/toolbar/index.mjs +27 -0
- package/dist/js/toolbar/toolbar.model.d.mts +11 -0
- package/dist/js/toolbar/toolbar.model.mjs +7 -0
- package/dist/js/tooltip/index.d.mts +19 -0
- package/dist/js/{tooltip.mjs → tooltip/index.mjs} +61 -86
- package/dist/js/tooltip/tooltip.model.d.mts +2 -0
- package/dist/js/tooltip/tooltip.model.mjs +15 -0
- package/dist/js/tooltip.model-BpNStw5z.d.mts +37 -0
- package/package.json +30 -24
- package/dist/js/color-picker/constants.color-picker.d.mts +0 -2
- package/dist/js/color-picker/event.color-picker.mjs +0 -2
- package/dist/js/color-picker/misc.color-picker.d.mts +0 -2
- package/dist/js/color-picker/misc.color-picker.mjs +0 -2
- package/dist/js/color-picker/models.color-picker.d.mts +0 -2
- package/dist/js/color-picker/state.color-picker.d.mts +0 -8
- package/dist/js/color-picker/state.color-picker.mjs +0 -2
- package/dist/js/combobox/constants.combobox.d.mts +0 -2
- package/dist/js/combobox/dom.combobox.d.mts +0 -26
- package/dist/js/combobox/misc.combobox.d.mts +0 -2
- package/dist/js/combobox/misc.combobox.mjs +0 -2
- package/dist/js/combobox/models.combobox.d.mts +0 -43
- package/dist/js/combobox/state.combobox.d.mts +0 -11
- package/dist/js/combobox/state.combobox.mjs +0 -2
- package/dist/js/constants.color-picker-B-gFjL8m.d.mts +0 -364
- package/dist/js/constants.combobox-8EMRmv09.d.mts +0 -18
- package/dist/js/constants.listbox-DGnX32kv.d.mts +0 -8
- package/dist/js/dialog.d.mts +0 -47
- package/dist/js/dialog.mjs +0 -131
- package/dist/js/draggable-B5-70SZm.d.mts +0 -155
- package/dist/js/event.color-picker-BEpq0Adu.mjs +0 -485
- package/dist/js/index-C5D3-oiI.d.mts +0 -177
- package/dist/js/internal/draggable.d.mts +0 -2
- package/dist/js/internal/draggable.mjs +0 -265
- 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.event.mjs +0 -63
- package/dist/js/internal/listbox/listbox.form.d.mts +0 -5
- package/dist/js/internal/listbox/listbox.form.mjs +0 -53
- 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 -40
- package/dist/js/internal/navigable.d.mts +0 -36
- package/dist/js/internal/navigable.mjs +0 -135
- package/dist/js/l10n-Bn-7RcwR.d.mts +0 -20
- package/dist/js/l10n.d.mts +0 -2
- package/dist/js/l10n.mjs +0 -80
- package/dist/js/listbox/constants.listbox.d.mts +0 -2
- package/dist/js/listbox/event.listbox.d.mts +0 -7
- package/dist/js/listbox/event.listbox.mjs +0 -2
- 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 -10
- package/dist/js/listbox/state.listbox.mjs +0 -2
- package/dist/js/listbox.data-DQ7-x2uY.mjs +0 -425
- package/dist/js/listbox.model-BHPA7GM4.d.mts +0 -125
- package/dist/js/menu.mjs +0 -172
- package/dist/js/misc.listbox-DKB-j0UK.mjs +0 -196
- package/dist/js/misc.listbox-mZMuYOxg.d.mts +0 -20
- package/dist/js/popover.d.mts +0 -38
- package/dist/js/resizable.embedded-dvhdfQgt.d.mts +0 -34
- package/dist/js/toolbar.mjs +0 -31
- package/dist/js/tooltip.d.mts +0 -45
- /package/dist/js/combobox/{models.combobox.mjs → combobox.model.mjs} +0 -0
- /package/dist/js/internal/{listbox/listbox.model.mjs → option-list/option-list.model.mjs} +0 -0
- /package/dist/js/{menu.d.mts → menu/index.d.mts} +0 -0
- /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 };
|