@oscarpalmer/oui 0.35.0 → 0.36.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/combobox.css +1 -1
- package/dist/css/listbox.css +152 -0
- package/dist/js/combobox/constants.combobox.d.mts +2 -2
- package/dist/js/combobox/constants.combobox.mjs +40 -33
- package/dist/js/combobox/dom.combobox.d.mts +8 -91
- package/dist/js/combobox/dom.combobox.mjs +204 -2
- package/dist/js/combobox/event.combobox.d.mts +14 -8
- package/dist/js/combobox/event.combobox.mjs +2 -2
- package/dist/js/combobox/index.d.mts +1 -1
- package/dist/js/combobox/index.mjs +20 -18
- package/dist/js/combobox/misc.combobox.d.mts +2 -2
- package/dist/js/combobox/misc.combobox.mjs +2 -2
- package/dist/js/combobox/models.combobox.d.mts +44 -2
- package/dist/js/combobox/state.combobox.d.mts +9 -10
- package/dist/js/combobox/state.combobox.mjs +2 -2
- package/dist/js/constants.combobox-DmRAMC64.d.mts +26 -0
- package/dist/js/constants.listbox-DRsXUxd3.d.mts +14 -0
- package/dist/js/index-EfkUSals.d.mts +139 -0
- package/dist/js/index.d.mts +4 -2
- package/dist/js/index.mjs +4 -2
- package/dist/js/internal/attributable.mjs +4 -3
- package/dist/js/internal/listbox/listbox.constants.d.mts +11 -0
- package/dist/js/internal/listbox/listbox.constants.mjs +23 -0
- package/dist/js/internal/listbox/listbox.data.d.mts +20 -0
- package/dist/js/internal/listbox/listbox.data.mjs +2 -0
- package/dist/js/internal/listbox/listbox.dom.d.mts +66 -0
- package/dist/js/internal/listbox/listbox.dom.mjs +2 -0
- package/dist/js/internal/listbox/listbox.event.d.mts +5 -0
- package/dist/js/internal/listbox/listbox.event.mjs +63 -0
- package/dist/js/internal/listbox/listbox.form.d.mts +6 -0
- package/dist/js/internal/listbox/listbox.form.mjs +52 -0
- package/dist/js/internal/listbox/listbox.misc.d.mts +12 -0
- package/dist/js/internal/listbox/listbox.misc.mjs +2 -0
- package/dist/js/internal/listbox/listbox.model.d.mts +2 -0
- package/dist/js/internal/listbox/listbox.model.mjs +1 -0
- package/dist/js/internal/listbox/listbox.state.d.mts +7 -0
- package/dist/js/internal/listbox/listbox.state.mjs +40 -0
- package/dist/js/internal/misc.d.mts +6 -0
- package/dist/js/internal/misc.mjs +13 -0
- package/dist/js/l10n-Bn-7RcwR.d.mts +20 -0
- package/dist/js/l10n.d.mts +2 -20
- package/dist/js/listbox/constants.listbox.d.mts +2 -0
- package/dist/js/listbox/constants.listbox.mjs +40 -0
- package/dist/js/listbox/event.listbox.d.mts +8 -0
- package/dist/js/listbox/event.listbox.mjs +2 -0
- package/dist/js/listbox/index.d.mts +116 -0
- package/dist/js/listbox/index.mjs +189 -0
- package/dist/js/listbox/misc.listbox.d.mts +2 -0
- package/dist/js/listbox/misc.listbox.mjs +2 -0
- package/dist/js/listbox/state.listbox.d.mts +11 -0
- package/dist/js/listbox/state.listbox.mjs +2 -0
- package/dist/js/listbox.data-BWd0PCy7.mjs +424 -0
- package/dist/js/listbox.model-CRReGOmu.d.mts +125 -0
- package/dist/js/misc.listbox-BI-XsTOf.mjs +197 -0
- package/dist/js/misc.listbox-gnoJhrTr.d.mts +20 -0
- package/dist/js/sortable/sortable.embedded.mjs +4 -2
- package/dist/js/state.combobox-4xq0FPCF.mjs +365 -0
- package/package.json +7 -3
- package/src/css/combobox.scss +1 -1
- package/src/css/listbox.scss +149 -0
- package/src/js/combobox/constants.combobox.ts +46 -25
- package/src/js/combobox/dom.combobox.ts +36 -454
- package/src/js/combobox/event.combobox.ts +129 -218
- package/src/js/combobox/index.ts +37 -30
- package/src/js/combobox/misc.combobox.ts +30 -114
- package/src/js/combobox/models.combobox.ts +7 -47
- package/src/js/combobox/state.combobox.ts +126 -127
- package/src/js/index.ts +1 -0
- package/src/js/internal/listbox/listbox.constants.ts +25 -0
- package/src/js/{combobox/data.combobox.ts → internal/listbox/listbox.data.ts} +94 -43
- package/src/js/internal/listbox/listbox.dom.ts +445 -0
- package/src/js/internal/listbox/listbox.event.ts +129 -0
- package/src/js/{combobox/form.combobox.ts → internal/listbox/listbox.form.ts} +12 -13
- package/src/js/internal/listbox/listbox.misc.ts +135 -0
- package/src/js/internal/listbox/listbox.model.ts +169 -0
- package/src/js/internal/listbox/listbox.state.ts +82 -0
- package/src/js/internal/misc.ts +27 -0
- package/src/js/l10n.ts +8 -8
- package/src/js/listbox/constants.listbox.ts +61 -0
- package/src/js/listbox/event.listbox.ts +106 -0
- package/src/js/listbox/index.ts +302 -0
- package/src/js/listbox/misc.listbox.ts +70 -0
- package/src/js/listbox/state.listbox.ts +196 -0
- package/dist/js/combobox/data.combobox.d.mts +0 -18
- package/dist/js/combobox/data.combobox.mjs +0 -2
- package/dist/js/combobox/form.combobox.d.mts +0 -6
- package/dist/js/combobox/form.combobox.mjs +0 -2
- package/dist/js/constants.combobox-h_kyDegw.d.mts +0 -248
- package/dist/js/data.combobox-B8HMkDOh.mjs +0 -1030
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { updateLocalizations } from "../l10n.mjs";
|
|
2
|
+
import { C as setListboxDisabled, D as setListboxReadonly, O as setListboxRequired, T as setListboxLimit, a as setListboxValue, o as setListboxValues, w as setListboxFilter } from "../listbox.data-BWd0PCy7.mjs";
|
|
3
|
+
import { attachListbox, detachListbox } from "../internal/listbox/listbox.state.mjs";
|
|
2
4
|
import { COMBOBOX_TAGNAME } from "./constants.combobox.mjs";
|
|
3
|
-
import {
|
|
5
|
+
import { D as setComboboxLocalizations, a as onDetachCombobox, i as onAttachCombobox, n as comboboxStates, r as createComboboxState } from "../state.combobox-4xq0FPCF.mjs";
|
|
4
6
|
import { getAttribute } from "@oscarpalmer/toretto/attribute";
|
|
5
7
|
import { parse } from "@oscarpalmer/atoms/string";
|
|
6
8
|
//#region src/js/combobox/index.ts
|
|
@@ -25,7 +27,7 @@ var OuiComboboxElement = class extends HTMLElement {
|
|
|
25
27
|
* Should the combobox be disabled?
|
|
26
28
|
*/
|
|
27
29
|
set disabled(value) {
|
|
28
|
-
if (typeof value === "boolean" && value !== this.disabled)
|
|
30
|
+
if (typeof value === "boolean" && value !== this.disabled) setListboxDisabled(this.#state, value);
|
|
29
31
|
}
|
|
30
32
|
/**
|
|
31
33
|
* Current filter value
|
|
@@ -37,7 +39,7 @@ var OuiComboboxElement = class extends HTMLElement {
|
|
|
37
39
|
* Set the filter value
|
|
38
40
|
*/
|
|
39
41
|
set filter(value) {
|
|
40
|
-
|
|
42
|
+
setListboxFilter(this.#state, value);
|
|
41
43
|
}
|
|
42
44
|
/**
|
|
43
45
|
* Maximum number of selected options
|
|
@@ -49,7 +51,7 @@ var OuiComboboxElement = class extends HTMLElement {
|
|
|
49
51
|
* Set the maximum number of selected options
|
|
50
52
|
*/
|
|
51
53
|
set max(value) {
|
|
52
|
-
|
|
54
|
+
setListboxLimit("max", this.#state, value);
|
|
53
55
|
}
|
|
54
56
|
/**
|
|
55
57
|
* Minimum number of selected options
|
|
@@ -61,7 +63,7 @@ var OuiComboboxElement = class extends HTMLElement {
|
|
|
61
63
|
* Set the minimum number of selected options
|
|
62
64
|
*/
|
|
63
65
|
set min(value) {
|
|
64
|
-
|
|
66
|
+
setListboxLimit("min", this.#state, value);
|
|
65
67
|
}
|
|
66
68
|
/**
|
|
67
69
|
* Does the combobox allow multiple values?
|
|
@@ -85,7 +87,7 @@ var OuiComboboxElement = class extends HTMLElement {
|
|
|
85
87
|
* Should the combobox be readonly?
|
|
86
88
|
*/
|
|
87
89
|
set readonly(value) {
|
|
88
|
-
if (typeof value === "boolean" && value !== this.readonly)
|
|
90
|
+
if (typeof value === "boolean" && value !== this.readonly) setListboxReadonly(this.#state, value);
|
|
89
91
|
}
|
|
90
92
|
/**
|
|
91
93
|
* Is the combobox required?
|
|
@@ -97,7 +99,7 @@ var OuiComboboxElement = class extends HTMLElement {
|
|
|
97
99
|
* Should the combobox be required?
|
|
98
100
|
*/
|
|
99
101
|
set required(value) {
|
|
100
|
-
if (typeof value === "boolean" && value !== this.required)
|
|
102
|
+
if (typeof value === "boolean" && value !== this.required) setListboxRequired(this.#state, value);
|
|
101
103
|
}
|
|
102
104
|
/**
|
|
103
105
|
* Selected options
|
|
@@ -121,7 +123,7 @@ var OuiComboboxElement = class extends HTMLElement {
|
|
|
121
123
|
* Set the value
|
|
122
124
|
*/
|
|
123
125
|
set value(value) {
|
|
124
|
-
|
|
126
|
+
setListboxValue(this.#state, value);
|
|
125
127
|
}
|
|
126
128
|
/**
|
|
127
129
|
* Current values
|
|
@@ -132,8 +134,8 @@ var OuiComboboxElement = class extends HTMLElement {
|
|
|
132
134
|
/**
|
|
133
135
|
* Set the values
|
|
134
136
|
*/
|
|
135
|
-
set values(
|
|
136
|
-
|
|
137
|
+
set values(values) {
|
|
138
|
+
setListboxValues(this.#state, values);
|
|
137
139
|
}
|
|
138
140
|
constructor() {
|
|
139
141
|
super();
|
|
@@ -147,7 +149,7 @@ var OuiComboboxElement = class extends HTMLElement {
|
|
|
147
149
|
break;
|
|
148
150
|
case "max":
|
|
149
151
|
case "min":
|
|
150
|
-
|
|
152
|
+
setListboxLimit(name, this.#state, value);
|
|
151
153
|
break;
|
|
152
154
|
case "value": this.value = value ?? "";
|
|
153
155
|
}
|
|
@@ -156,36 +158,36 @@ var OuiComboboxElement = class extends HTMLElement {
|
|
|
156
158
|
* Clear all selected options
|
|
157
159
|
*/
|
|
158
160
|
clear() {
|
|
159
|
-
|
|
161
|
+
setListboxValues(this.#state, []);
|
|
160
162
|
}
|
|
161
163
|
connectedCallback() {
|
|
162
164
|
if (this.#state == null) this.#initialize();
|
|
163
|
-
else
|
|
165
|
+
else attachListbox(this.#state, comboboxStates, onAttachCombobox);
|
|
164
166
|
}
|
|
165
167
|
disconnectedCallback() {
|
|
166
|
-
if (this.#state != null)
|
|
168
|
+
if (this.#state != null) detachListbox(this.#state, comboboxStates, onDetachCombobox);
|
|
167
169
|
}
|
|
168
170
|
formDisabledCallback(disabled) {
|
|
169
171
|
this.disabled = disabled;
|
|
170
172
|
}
|
|
171
173
|
formResetCallback() {
|
|
172
|
-
|
|
174
|
+
setListboxValues(this.#state, this.#state.values.initial);
|
|
173
175
|
}
|
|
174
176
|
formStateRestoreCallback(state, reason) {
|
|
175
177
|
if (reason !== "restore") return;
|
|
176
178
|
const parsed = typeof state === "string" ? parse(state) : void 0;
|
|
177
179
|
if (!Array.isArray(parsed)) return;
|
|
178
180
|
if (this.#state == null) this.#restored = parsed;
|
|
179
|
-
else
|
|
181
|
+
else setListboxValues(this.#state, parsed);
|
|
180
182
|
}
|
|
181
183
|
setLocalizations(first, second) {
|
|
182
|
-
updateLocalizations(
|
|
184
|
+
updateLocalizations(this.#state.localizations.global, typeof first === "string" ? { [first]: second } : first, this.#state.localizations.component);
|
|
183
185
|
}
|
|
184
186
|
#initialize() {
|
|
185
187
|
this.tabIndex = -1;
|
|
186
188
|
this.#state = createComboboxState(this, this.#internals);
|
|
187
189
|
if (this.#restored != null) {
|
|
188
|
-
|
|
190
|
+
setListboxValues(this.#state, this.#restored);
|
|
189
191
|
this.#restored = void 0;
|
|
190
192
|
}
|
|
191
193
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { a as setComboboxLocalizations, i as hasTextSelection, n as getComboboxAutoComplete, o as updateComboboxLocalizations, r as getComboboxId } from "../index-EfkUSals.mjs";
|
|
2
|
+
export { getComboboxAutoComplete, getComboboxId, hasTextSelection, setComboboxLocalizations, updateComboboxLocalizations };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { D as setComboboxLocalizations, E as hasTextSelection, O as updateComboboxLocalizations, T as getComboboxId, w as getComboboxAutoComplete } from "../state.combobox-4xq0FPCF.mjs";
|
|
2
|
+
export { getComboboxAutoComplete, getComboboxId, hasTextSelection, setComboboxLocalizations, updateComboboxLocalizations };
|
|
@@ -1,2 +1,44 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { d as OuiListboxType, l as OuiListboxState } from "../listbox.model-CRReGOmu.mjs";
|
|
2
|
+
import { r as OuiFloatable } from "../floatable.embedded-Bct4U5Dm.mjs";
|
|
3
|
+
//#region src/js/combobox/models.combobox.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 = {
|
|
34
|
+
anchor: OuiComboboxAnchor;
|
|
35
|
+
floatable: OuiFloatable;
|
|
36
|
+
selection?: OuiComboboxSelection;
|
|
37
|
+
type: OuiListboxType;
|
|
38
|
+
} & OuiListboxState;
|
|
39
|
+
type OuiComboboxValues = {
|
|
40
|
+
current: string[];
|
|
41
|
+
initial: string[];
|
|
42
|
+
};
|
|
43
|
+
//#endregion
|
|
44
|
+
export { OuiComboboxAnchor, OuiComboboxFilter, OuiComboboxGroup, OuiComboboxLabel, OuiComboboxOptions, OuiComboboxSelection, OuiComboboxSelectionItem, OuiComboboxState, OuiComboboxValues };
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { t as OuiLocalizations } from "../l10n-Bn-7RcwR.mjs";
|
|
2
|
+
import { o as OuiListboxLocalizations, u as OuiListboxStates } from "../listbox.model-CRReGOmu.mjs";
|
|
3
|
+
import { OuiComboboxState } from "./models.combobox.mjs";
|
|
4
|
+
import { t as OuiComboboxElement } from "../index-EfkUSals.mjs";
|
|
3
5
|
//#region src/js/combobox/state.combobox.d.ts
|
|
4
|
-
declare function attachCombobox(state: OuiComboboxState): void;
|
|
5
6
|
declare function createComboboxState(element: OuiComboboxElement, internals: ElementInternals): OuiComboboxState;
|
|
6
|
-
declare function
|
|
7
|
-
declare
|
|
8
|
-
declare const
|
|
9
|
-
|
|
10
|
-
set: Set<OuiComboboxState>;
|
|
11
|
-
};
|
|
7
|
+
declare function onAttachCombobox(state: OuiComboboxState): void;
|
|
8
|
+
declare function onDetachCombobox(state: OuiComboboxState): void;
|
|
9
|
+
declare const comboboxLocalizations: OuiLocalizations<OuiListboxLocalizations>;
|
|
10
|
+
declare const comboboxStates: OuiListboxStates<OuiComboboxState>;
|
|
12
11
|
//#endregion
|
|
13
|
-
export {
|
|
12
|
+
export { comboboxLocalizations, comboboxStates, createComboboxState, onAttachCombobox, onDetachCombobox };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { a as onDetachCombobox, i as onAttachCombobox, n as comboboxStates, r as createComboboxState, t as comboboxLocalizations } from "../state.combobox-4xq0FPCF.mjs";
|
|
2
|
+
export { comboboxLocalizations, comboboxStates, createComboboxState, onAttachCombobox, onDetachCombobox };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { r as OuiListboxAutoCompleteType, t as OuiListboxAttributes } from "./listbox.model-CRReGOmu.mjs";
|
|
2
|
+
//#region src/js/combobox/constants.combobox.d.ts
|
|
3
|
+
declare const COMBOBOX_TAGNAME = "oui-combobox";
|
|
4
|
+
declare const COMBOBOX_ATTRIBUTE_ANCHOR = "oui-combobox-anchor";
|
|
5
|
+
declare const COMBOBOX_ATTRIBUTE_SELECTION = "oui-combobox-selection";
|
|
6
|
+
declare const COMBOBOX_ATTRIBUTE_SELECTION_ITEM = "oui-combobox-selection-item";
|
|
7
|
+
declare const COMBOBOX_AUTOCOMPLETES: Set<OuiListboxAutoCompleteType>;
|
|
8
|
+
declare const messageLabel = "<oui-combobox> must contain a <label> element for the <select> element";
|
|
9
|
+
declare const messageSelect = "<oui-combobox> must contain a valid <select> element";
|
|
10
|
+
declare const selectorAnchor = "[oui-combobox-anchor]";
|
|
11
|
+
declare const selectorContent = "[oui-combobox-content]";
|
|
12
|
+
declare const selectorOption = "[oui-combobox-option]";
|
|
13
|
+
declare const selectorSelectionItem = "[oui-combobox-selection-item]";
|
|
14
|
+
declare const COMBOBOX_ATTRIBUTES: OuiListboxAttributes;
|
|
15
|
+
declare const COMBOBOX_MESSAGES: {
|
|
16
|
+
label: string;
|
|
17
|
+
select: string;
|
|
18
|
+
};
|
|
19
|
+
declare const COMBOBOX_SELECTORS: {
|
|
20
|
+
anchor: string;
|
|
21
|
+
content: string;
|
|
22
|
+
selectionItem: string;
|
|
23
|
+
option: string;
|
|
24
|
+
};
|
|
25
|
+
//#endregion
|
|
26
|
+
export { COMBOBOX_AUTOCOMPLETES as a, COMBOBOX_TAGNAME as c, selectorAnchor as d, selectorContent as f, COMBOBOX_ATTRIBUTE_SELECTION_ITEM as i, messageLabel as l, selectorSelectionItem as m, COMBOBOX_ATTRIBUTE_ANCHOR as n, COMBOBOX_MESSAGES as o, selectorOption as p, COMBOBOX_ATTRIBUTE_SELECTION as r, COMBOBOX_SELECTORS as s, COMBOBOX_ATTRIBUTES as t, messageSelect as u };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { t as OuiListboxAttributes } from "./listbox.model-CRReGOmu.mjs";
|
|
2
|
+
//#region src/js/listbox/constants.listbox.d.ts
|
|
3
|
+
declare const LISTBOX_TAGNAME = "oui-listbox";
|
|
4
|
+
declare const LISTBOX_ATTRIBUTES: OuiListboxAttributes;
|
|
5
|
+
declare const LISTBOX_MESSAGES: {
|
|
6
|
+
label: string;
|
|
7
|
+
select: string;
|
|
8
|
+
};
|
|
9
|
+
declare const LISTBOX_SELECTORS: {
|
|
10
|
+
filter: string;
|
|
11
|
+
option: string;
|
|
12
|
+
};
|
|
13
|
+
//#endregion
|
|
14
|
+
export { LISTBOX_TAGNAME as i, LISTBOX_MESSAGES as n, LISTBOX_SELECTORS as r, LISTBOX_ATTRIBUTES as t };
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
|
|
2
|
+
import { d as OuiListboxType, n as OuiListboxAutoComplete, o as OuiListboxLocalizations } from "./listbox.model-CRReGOmu.mjs";
|
|
3
|
+
import { c as COMBOBOX_TAGNAME } from "./constants.combobox-DmRAMC64.mjs";
|
|
4
|
+
//#region src/js/combobox/misc.combobox.d.ts
|
|
5
|
+
declare function getComboboxAutoComplete(element: OuiComboboxElement, select: boolean): OuiListboxAutoComplete;
|
|
6
|
+
declare function getComboboxId(): string;
|
|
7
|
+
declare function hasTextSelection(element: HTMLElement): element is HTMLInputElement;
|
|
8
|
+
/**
|
|
9
|
+
* Set combobox localizations for a specific language
|
|
10
|
+
*
|
|
11
|
+
* @param language Language code
|
|
12
|
+
* @param localizations Localizations for language
|
|
13
|
+
*/
|
|
14
|
+
declare function setComboboxLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
|
|
15
|
+
/**
|
|
16
|
+
* Set combobox localizations for one or more languages
|
|
17
|
+
*
|
|
18
|
+
* @param localizations Localizations for one or more languages
|
|
19
|
+
*/
|
|
20
|
+
declare function setComboboxLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
|
|
21
|
+
declare function updateComboboxLocalizations(instance: OuiLocalizations<OuiListboxLocalizations>, destination: Record<string, Partial<OuiListboxLocalizations>>, first: string | Record<string, Partial<OuiListboxLocalizations>>, second?: Partial<OuiListboxLocalizations>): void;
|
|
22
|
+
//#endregion
|
|
23
|
+
//#region src/js/combobox/index.d.ts
|
|
24
|
+
declare global {
|
|
25
|
+
interface HTMLElementTagNameMap {
|
|
26
|
+
[COMBOBOX_TAGNAME]: OuiComboboxElement;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
declare class OuiComboboxElement extends HTMLElement {
|
|
30
|
+
#private;
|
|
31
|
+
static formAssociated: boolean;
|
|
32
|
+
static observedAttributes: string[];
|
|
33
|
+
/**
|
|
34
|
+
* Is the combobox disabled?
|
|
35
|
+
*/
|
|
36
|
+
get disabled(): boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Should the combobox be disabled?
|
|
39
|
+
*/
|
|
40
|
+
set disabled(value: boolean);
|
|
41
|
+
/**
|
|
42
|
+
* Current filter value
|
|
43
|
+
*/
|
|
44
|
+
get filter(): string;
|
|
45
|
+
/**
|
|
46
|
+
* Set the filter value
|
|
47
|
+
*/
|
|
48
|
+
set filter(value: string);
|
|
49
|
+
/**
|
|
50
|
+
* Maximum number of selected options
|
|
51
|
+
*/
|
|
52
|
+
get max(): number | undefined;
|
|
53
|
+
/**
|
|
54
|
+
* Set the maximum number of selected options
|
|
55
|
+
*/
|
|
56
|
+
set max(value: number);
|
|
57
|
+
/**
|
|
58
|
+
* Minimum number of selected options
|
|
59
|
+
*/
|
|
60
|
+
get min(): number | undefined;
|
|
61
|
+
/**
|
|
62
|
+
* Set the minimum number of selected options
|
|
63
|
+
*/
|
|
64
|
+
set min(value: number);
|
|
65
|
+
/**
|
|
66
|
+
* Does the combobox allow multiple values?
|
|
67
|
+
*/
|
|
68
|
+
get multiple(): boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Name of the combobox
|
|
71
|
+
*/
|
|
72
|
+
get name(): string;
|
|
73
|
+
/**
|
|
74
|
+
* Is the combobox readonly?
|
|
75
|
+
*/
|
|
76
|
+
get readonly(): boolean;
|
|
77
|
+
/**
|
|
78
|
+
* Should the combobox be readonly?
|
|
79
|
+
*/
|
|
80
|
+
set readonly(value: boolean);
|
|
81
|
+
/**
|
|
82
|
+
* Is the combobox required?
|
|
83
|
+
*/
|
|
84
|
+
get required(): boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Should the combobox be required?
|
|
87
|
+
*/
|
|
88
|
+
set required(value: boolean);
|
|
89
|
+
/**
|
|
90
|
+
* Selected options
|
|
91
|
+
*/
|
|
92
|
+
get selected(): HTMLElement[];
|
|
93
|
+
/**
|
|
94
|
+
* Type of combobox
|
|
95
|
+
*/
|
|
96
|
+
get type(): OuiListboxType;
|
|
97
|
+
/**
|
|
98
|
+
* Current value
|
|
99
|
+
*/
|
|
100
|
+
get value(): string;
|
|
101
|
+
/**
|
|
102
|
+
* Set the value
|
|
103
|
+
*/
|
|
104
|
+
set value(value: unknown);
|
|
105
|
+
/**
|
|
106
|
+
* Current values
|
|
107
|
+
*/
|
|
108
|
+
get values(): string[];
|
|
109
|
+
/**
|
|
110
|
+
* Set the values
|
|
111
|
+
*/
|
|
112
|
+
set values(values: unknown[]);
|
|
113
|
+
constructor();
|
|
114
|
+
attributeChangedCallback(name: string, _: string | null, value: string | null): void;
|
|
115
|
+
/**
|
|
116
|
+
* Clear all selected options
|
|
117
|
+
*/
|
|
118
|
+
clear(): void;
|
|
119
|
+
connectedCallback(): void;
|
|
120
|
+
disconnectedCallback(): void;
|
|
121
|
+
formDisabledCallback(disabled: boolean): void;
|
|
122
|
+
formResetCallback(): void;
|
|
123
|
+
formStateRestoreCallback(state: string | File | FormData, reason: unknown): void;
|
|
124
|
+
/**
|
|
125
|
+
* Set combobox localizations for a specific language
|
|
126
|
+
*
|
|
127
|
+
* @param language Language code
|
|
128
|
+
* @param localizations Localizations for language
|
|
129
|
+
*/
|
|
130
|
+
setLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
|
|
131
|
+
/**
|
|
132
|
+
* Set combobox localizations for one or more languages
|
|
133
|
+
*
|
|
134
|
+
* @param localizations Localizations for one or more languages
|
|
135
|
+
*/
|
|
136
|
+
setLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
|
|
137
|
+
}
|
|
138
|
+
//#endregion
|
|
139
|
+
export { setComboboxLocalizations as a, hasTextSelection as i, getComboboxAutoComplete as n, updateComboboxLocalizations as o, getComboboxId as r, OuiComboboxElement as t };
|
package/dist/js/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
|
|
2
|
-
import {
|
|
2
|
+
import { a as setComboboxLocalizations, t as OuiComboboxElement } from "./index-EfkUSals.mjs";
|
|
3
3
|
import { d as OuiSortable, f as createSortable, g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-a6w0J1OD.mjs";
|
|
4
4
|
import "./movable/movable.standalone.mjs";
|
|
5
5
|
import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.embedded-3qoR0Bjm.mjs";
|
|
@@ -7,8 +7,10 @@ import "./resizable/resizable.standalone.mjs";
|
|
|
7
7
|
import { OuiDialog, getDialog } from "./dialog.mjs";
|
|
8
8
|
import "./floatable/floatable.standalone.mjs";
|
|
9
9
|
import { a as OuiFocusTrapOptions, i as OuiFocusTrap, o as createFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
|
|
10
|
+
import { n as setListboxLocalizations } from "./misc.listbox-gnoJhrTr.mjs";
|
|
11
|
+
import { OuiListboxElement } from "./listbox/index.mjs";
|
|
10
12
|
import { OuiPopover, getPopover } from "./popover.mjs";
|
|
11
13
|
import "./sortable/sortable.standalone.mjs";
|
|
12
14
|
import { OuiSplitterElement } from "./splitter.mjs";
|
|
13
15
|
import { OuiTooltip, getTooltip, setTooltipDelay } from "./tooltip.mjs";
|
|
14
|
-
export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, OuiComboboxElement, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setComboboxLocalizations, setTooltipDelay };
|
|
16
|
+
export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, OuiComboboxElement, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, OuiListboxElement, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };
|
package/dist/js/index.mjs
CHANGED
|
@@ -5,15 +5,17 @@ import { createResizable } from "./resizable/resizable.embedded.mjs";
|
|
|
5
5
|
import { getDialog } from "./dialog.mjs";
|
|
6
6
|
import "./menu.mjs";
|
|
7
7
|
import "./toolbar.mjs";
|
|
8
|
-
import {
|
|
8
|
+
import { D as setComboboxLocalizations } from "./state.combobox-4xq0FPCF.mjs";
|
|
9
9
|
import { OuiComboboxElement } from "./combobox/index.mjs";
|
|
10
10
|
import "./floatable/floatable.standalone.mjs";
|
|
11
11
|
import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
|
|
12
12
|
import "./focus-trap/focus-trap.standalone.mjs";
|
|
13
|
+
import { n as setListboxLocalizations } from "./misc.listbox-BI-XsTOf.mjs";
|
|
14
|
+
import { OuiListboxElement } from "./listbox/index.mjs";
|
|
13
15
|
import { getPopover } from "./popover.mjs";
|
|
14
16
|
import "./resizable/resizable.standalone.mjs";
|
|
15
17
|
import { createSortable } from "./sortable/sortable.embedded.mjs";
|
|
16
18
|
import "./sortable/sortable.standalone.mjs";
|
|
17
19
|
import { OuiSplitterElement } from "./splitter.mjs";
|
|
18
20
|
import { getTooltip, setTooltipDelay } from "./tooltip.mjs";
|
|
19
|
-
export { OuiComboboxElement, OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setComboboxLocalizations, setTooltipDelay };
|
|
21
|
+
export { OuiComboboxElement, OuiListboxElement, OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };
|
|
@@ -4,9 +4,10 @@ function attributable(attribute, add, remove) {
|
|
|
4
4
|
const { length } = entries;
|
|
5
5
|
for (let index = 0; index < length; index += 1) {
|
|
6
6
|
const entry = entries[index];
|
|
7
|
-
if (entry.type === "attributes" && entry.target instanceof Element)
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
if (entry.type === "attributes" && entry.target instanceof Element) {
|
|
8
|
+
if (entry.target.hasAttribute(attribute)) handleAdded(attribute, [entry.target], add);
|
|
9
|
+
else handleRemoved([entry.target], remove);
|
|
10
|
+
} else if (entry.type === "childList") {
|
|
10
11
|
handleAdded(attribute, entry.addedNodes, add);
|
|
11
12
|
handleRemoved(entry.removedNodes, remove);
|
|
12
13
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { d as OuiListboxType } from "../../listbox.model-CRReGOmu.mjs";
|
|
2
|
+
//#region src/js/internal/listbox/listbox.constants.d.ts
|
|
3
|
+
declare const LISTBOX_KEYS: {
|
|
4
|
+
activation: Set<string>;
|
|
5
|
+
navigation: Set<string>;
|
|
6
|
+
selection: Set<string>;
|
|
7
|
+
};
|
|
8
|
+
declare const LISTBOX_TYPES: Set<OuiListboxType>;
|
|
9
|
+
declare const listboxScrollOptions: ScrollIntoViewOptions;
|
|
10
|
+
//#endregion
|
|
11
|
+
export { LISTBOX_KEYS, LISTBOX_TYPES, listboxScrollOptions };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
const LISTBOX_KEYS = {
|
|
2
|
+
activation: /* @__PURE__ */ new Set([
|
|
3
|
+
" ",
|
|
4
|
+
"Backspace",
|
|
5
|
+
"Delete",
|
|
6
|
+
"Enter"
|
|
7
|
+
]),
|
|
8
|
+
navigation: /* @__PURE__ */ new Set([
|
|
9
|
+
"ArrowDown",
|
|
10
|
+
"ArrowUp",
|
|
11
|
+
"PageDown",
|
|
12
|
+
"PageUp"
|
|
13
|
+
]),
|
|
14
|
+
selection: /* @__PURE__ */ new Set(["ArrowRight", "End"])
|
|
15
|
+
};
|
|
16
|
+
const LISTBOX_TYPES = /* @__PURE__ */ new Set(["autocomplete", "select"]);
|
|
17
|
+
const listboxScrollOptions = {
|
|
18
|
+
behavior: "auto",
|
|
19
|
+
block: "nearest",
|
|
20
|
+
inline: "nearest"
|
|
21
|
+
};
|
|
22
|
+
//#endregion
|
|
23
|
+
export { LISTBOX_KEYS, LISTBOX_TYPES, listboxScrollOptions };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.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
|
+
declare function applyListboxSelection<State extends OuiListboxState>(parameters: ApplySelectionParameters<State>): void;
|
|
13
|
+
declare function filterListbox(type: InputEvent['inputType'], state: OuiListboxState): void;
|
|
14
|
+
declare function filterListboxOption(state: OuiListboxState, value: unknown, textContent?: boolean): HTMLElement | undefined;
|
|
15
|
+
declare function filterListboxOptions(state: OuiListboxState): HTMLElement | undefined;
|
|
16
|
+
declare function setListboxValue<State extends OuiListboxState>(state: State, value: unknown, emit?: boolean): void;
|
|
17
|
+
declare function setListboxValues<State extends OuiListboxState>(state: State, value: unknown[], emit?: boolean): void;
|
|
18
|
+
declare function toggleListboxOption<State extends OuiListboxState>(state: State, option?: HTMLElement): void;
|
|
19
|
+
//#endregion
|
|
20
|
+
export { applyListboxSelection, filterListbox, filterListboxOption, filterListboxOptions, setListboxValue, setListboxValues, toggleListboxOption };
|
|
@@ -0,0 +1,2 @@
|
|
|
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-BWd0PCy7.mjs";
|
|
2
|
+
export { applyListboxSelection, filterListbox, filterListboxOption, filterListboxOptions, setListboxValue, setListboxValues, toggleListboxOption };
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { a as OuiListboxGroup, c as OuiListboxPreview, d as OuiListboxType, l as OuiListboxState, n as OuiListboxAutoComplete, s as OuiListboxOptions, t as OuiListboxAttributes } from "../../listbox.model-CRReGOmu.mjs";
|
|
2
|
+
//#region src/js/internal/listbox/listbox.dom.d.ts
|
|
3
|
+
type CreateListboxContent = {
|
|
4
|
+
element: HTMLDivElement;
|
|
5
|
+
filter?: CreateListboxFilter;
|
|
6
|
+
list: CreateListboxList;
|
|
7
|
+
message: HTMLDivElement;
|
|
8
|
+
value: HTMLSpanElement;
|
|
9
|
+
};
|
|
10
|
+
type CreateListboxContentParameters = {
|
|
11
|
+
attributes: OuiListboxAttributes;
|
|
12
|
+
autocomplete: OuiListboxAutoComplete;
|
|
13
|
+
element: HTMLElement;
|
|
14
|
+
id: string;
|
|
15
|
+
label: HTMLLabelElement;
|
|
16
|
+
listbox: boolean;
|
|
17
|
+
multiple: boolean;
|
|
18
|
+
select: HTMLSelectElement;
|
|
19
|
+
type: OuiListboxType;
|
|
20
|
+
};
|
|
21
|
+
type CreateListboxFilter = {
|
|
22
|
+
container: HTMLElement;
|
|
23
|
+
element: HTMLInputElement;
|
|
24
|
+
};
|
|
25
|
+
type CreateListboxGroupParameters = {
|
|
26
|
+
group: HTMLOptGroupElement;
|
|
27
|
+
groupOptions: HTMLOptionElement[];
|
|
28
|
+
original: CreateListboxContentParameters;
|
|
29
|
+
selected: HTMLElement[];
|
|
30
|
+
type: OuiListboxType;
|
|
31
|
+
};
|
|
32
|
+
type CreateListboxList = {
|
|
33
|
+
element: HTMLUListElement;
|
|
34
|
+
groups?: OuiListboxGroup[];
|
|
35
|
+
options: OuiListboxOptions;
|
|
36
|
+
};
|
|
37
|
+
type CreateListboxOptionParameters = {
|
|
38
|
+
group?: string;
|
|
39
|
+
index: number;
|
|
40
|
+
option: HTMLOptionElement;
|
|
41
|
+
original: CreateListboxContentParameters;
|
|
42
|
+
type: OuiListboxType;
|
|
43
|
+
};
|
|
44
|
+
type CreateListboxOptionsParameters = {
|
|
45
|
+
group?: string;
|
|
46
|
+
list: HTMLElement;
|
|
47
|
+
options: HTMLOptionElement[];
|
|
48
|
+
original: CreateListboxContentParameters;
|
|
49
|
+
selected: HTMLElement[];
|
|
50
|
+
type: OuiListboxType;
|
|
51
|
+
};
|
|
52
|
+
declare function createListboxContent(parameters: CreateListboxContentParameters): CreateListboxContent;
|
|
53
|
+
declare function createListboxFilter(parameters: CreateListboxContentParameters): CreateListboxFilter | undefined;
|
|
54
|
+
declare function createListboxGroup(parameters: CreateListboxGroupParameters): OuiListboxGroup;
|
|
55
|
+
declare function createListboxHeader(parameters: CreateListboxGroupParameters, group: HTMLOptGroupElement): HTMLElement;
|
|
56
|
+
declare function createListboxInput(parameters: CreateListboxContentParameters, value: string): HTMLInputElement;
|
|
57
|
+
declare function createListboxList(parameters: CreateListboxContentParameters): CreateListboxList;
|
|
58
|
+
declare function createListboxMessage(attribute: string): HTMLDivElement;
|
|
59
|
+
declare function createListboxOption(parameters: CreateListboxOptionParameters): HTMLElement;
|
|
60
|
+
declare function createListboxOptions(parameters: CreateListboxOptionsParameters): HTMLElement[];
|
|
61
|
+
declare function createListboxValueLabel(id: string): HTMLSpanElement;
|
|
62
|
+
declare function updateListboxMessage(state: OuiListboxState): void;
|
|
63
|
+
declare function updateListboxPreview<State extends OuiListboxState>(preview: OuiListboxPreview, state: State, active?: HTMLElement, scroll?: boolean): void;
|
|
64
|
+
declare function updateListboxValueLabel<State extends OuiListboxState>(state: State): void;
|
|
65
|
+
//#endregion
|
|
66
|
+
export { CreateListboxContent, CreateListboxContentParameters, CreateListboxFilter, CreateListboxList, createListboxContent, createListboxFilter, createListboxGroup, createListboxHeader, createListboxInput, createListboxList, createListboxMessage, createListboxOption, createListboxOptions, createListboxValueLabel, updateListboxMessage, updateListboxPreview, updateListboxValueLabel };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { _ as createListboxValueLabel, b as updateListboxValueLabel, c as createListboxContent, d as createListboxHeader, f as createListboxInput, g as createListboxOptions, h as createListboxOption, l as createListboxFilter, m as createListboxMessage, p as createListboxList, u as createListboxGroup, v as updateListboxMessage, y as updateListboxPreview } from "../../listbox.data-BWd0PCy7.mjs";
|
|
2
|
+
export { createListboxContent, createListboxFilter, createListboxGroup, createListboxHeader, createListboxInput, createListboxList, createListboxMessage, createListboxOption, createListboxOptions, createListboxValueLabel, updateListboxMessage, updateListboxPreview, updateListboxValueLabel };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
|
|
2
|
+
//#region src/js/internal/listbox/listbox.event.d.ts
|
|
3
|
+
declare function processListboxKeydown<State extends OuiListboxState>(event: KeyboardEvent, state: State): void;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { processListboxKeydown };
|