@fluentui/web-components 3.0.0-beta.77 → 3.0.0-beta.78
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/CHANGELOG.md +12 -2
- package/dist/dts/dropdown/define.d.ts +1 -0
- package/dist/dts/dropdown/dropdown.d.ts +492 -0
- package/dist/dts/dropdown/dropdown.definition.d.ts +9 -0
- package/dist/dts/dropdown/dropdown.options.d.ts +53 -0
- package/dist/dts/dropdown/dropdown.styles.d.ts +6 -0
- package/dist/dts/dropdown/dropdown.template.d.ts +38 -0
- package/dist/dts/dropdown/index.d.ts +5 -0
- package/dist/dts/index-rollup.d.ts +3 -0
- package/dist/dts/index.d.ts +3 -0
- package/dist/dts/listbox/define.d.ts +1 -0
- package/dist/dts/listbox/index.d.ts +5 -0
- package/dist/dts/listbox/listbox.d.ts +116 -0
- package/dist/dts/listbox/listbox.definition.d.ts +9 -0
- package/dist/dts/listbox/listbox.options.d.ts +10 -0
- package/dist/dts/listbox/listbox.styles.d.ts +6 -0
- package/dist/dts/listbox/listbox.template.d.ts +17 -0
- package/dist/dts/option/define.d.ts +1 -0
- package/dist/dts/option/index.d.ts +5 -0
- package/dist/dts/option/option.d.ts +260 -0
- package/dist/dts/option/option.definition.d.ts +9 -0
- package/dist/dts/option/option.options.d.ts +20 -0
- package/dist/dts/option/option.styles.d.ts +6 -0
- package/dist/dts/option/option.template.d.ts +16 -0
- package/dist/dts/patterns/start-end.d.ts +16 -2
- package/dist/dts/styles/states/index.d.ts +34 -0
- package/dist/dts/utils/element-internals.d.ts +3 -6
- package/dist/dts/utils/index.d.ts +1 -0
- package/dist/dts/utils/language.d.ts +9 -0
- package/dist/dts/utils/support.d.ts +15 -0
- package/dist/dts/utils/unique-id.d.ts +9 -0
- package/dist/esm/accordion/accordion.js +2 -3
- package/dist/esm/accordion/accordion.js.map +1 -1
- package/dist/esm/anchor-button/anchor-button.js +2 -4
- package/dist/esm/anchor-button/anchor-button.js.map +1 -1
- package/dist/esm/avatar/avatar.js +11 -12
- package/dist/esm/avatar/avatar.js.map +1 -1
- package/dist/esm/button/button.js +19 -23
- package/dist/esm/button/button.js.map +1 -1
- package/dist/esm/button/button.template.js +1 -1
- package/dist/esm/button/button.template.js.map +1 -1
- package/dist/esm/checkbox/checkbox.js +10 -11
- package/dist/esm/checkbox/checkbox.js.map +1 -1
- package/dist/esm/compound-button/compound-button.template.js +1 -1
- package/dist/esm/compound-button/compound-button.template.js.map +1 -1
- package/dist/esm/counter-badge/counter-badge.js +1 -2
- package/dist/esm/counter-badge/counter-badge.js.map +1 -1
- package/dist/esm/dialog-body/dialog-body.template.js +2 -2
- package/dist/esm/dialog-body/dialog-body.template.js.map +1 -1
- package/dist/esm/divider/divider.js +4 -5
- package/dist/esm/divider/divider.js.map +1 -1
- package/dist/esm/dropdown/define.js +4 -0
- package/dist/esm/dropdown/define.js.map +1 -0
- package/dist/esm/dropdown/dropdown.definition.js +20 -0
- package/dist/esm/dropdown/dropdown.definition.js.map +1 -0
- package/dist/esm/dropdown/dropdown.js +779 -0
- package/dist/esm/dropdown/dropdown.js.map +1 -0
- package/dist/esm/dropdown/dropdown.options.js +43 -0
- package/dist/esm/dropdown/dropdown.options.js.map +1 -0
- package/dist/esm/dropdown/dropdown.styles.js +213 -0
- package/dist/esm/dropdown/dropdown.styles.js.map +1 -0
- package/dist/esm/dropdown/dropdown.template.js +92 -0
- package/dist/esm/dropdown/dropdown.template.js.map +1 -0
- package/dist/esm/dropdown/index.js +6 -0
- package/dist/esm/dropdown/index.js.map +1 -0
- package/dist/esm/field/field.js +3 -4
- package/dist/esm/field/field.js.map +1 -1
- package/dist/esm/form-associated/form-associated.js +3 -5
- package/dist/esm/form-associated/form-associated.js.map +1 -1
- package/dist/esm/index-rollup.js +3 -0
- package/dist/esm/index-rollup.js.map +1 -1
- package/dist/esm/index.js +3 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/listbox/define.js +4 -0
- package/dist/esm/listbox/define.js.map +1 -0
- package/dist/esm/listbox/index.js +6 -0
- package/dist/esm/listbox/index.js.map +1 -0
- package/dist/esm/listbox/listbox.definition.js +17 -0
- package/dist/esm/listbox/listbox.definition.js.map +1 -0
- package/dist/esm/listbox/listbox.js +175 -0
- package/dist/esm/listbox/listbox.js.map +1 -0
- package/dist/esm/listbox/listbox.options.js +15 -0
- package/dist/esm/listbox/listbox.options.js.map +1 -0
- package/dist/esm/listbox/listbox.styles.js +26 -0
- package/dist/esm/listbox/listbox.styles.js.map +1 -0
- package/dist/esm/listbox/listbox.template.js +33 -0
- package/dist/esm/listbox/listbox.template.js.map +1 -0
- package/dist/esm/menu/menu.js +23 -32
- package/dist/esm/menu/menu.js.map +1 -1
- package/dist/esm/menu-item/menu-item.js +9 -14
- package/dist/esm/menu-item/menu-item.js.map +1 -1
- package/dist/esm/menu-list/menu-list.js +4 -5
- package/dist/esm/menu-list/menu-list.js.map +1 -1
- package/dist/esm/option/define.js +4 -0
- package/dist/esm/option/define.js.map +1 -0
- package/dist/esm/option/index.js +6 -0
- package/dist/esm/option/index.js.map +1 -0
- package/dist/esm/option/option.definition.js +17 -0
- package/dist/esm/option/option.definition.js.map +1 -0
- package/dist/esm/option/option.js +296 -0
- package/dist/esm/option/option.js.map +1 -0
- package/dist/esm/option/option.options.js +15 -0
- package/dist/esm/option/option.options.js.map +1 -0
- package/dist/esm/option/option.styles.js +127 -0
- package/dist/esm/option/option.styles.js.map +1 -0
- package/dist/esm/option/option.template.js +42 -0
- package/dist/esm/option/option.template.js.map +1 -0
- package/dist/esm/patterns/start-end.js +12 -0
- package/dist/esm/patterns/start-end.js.map +1 -1
- package/dist/esm/progress-bar/progress-bar.js +3 -4
- package/dist/esm/progress-bar/progress-bar.js.map +1 -1
- package/dist/esm/radio-group/radio-group.js +27 -38
- package/dist/esm/radio-group/radio-group.js.map +1 -1
- package/dist/esm/rating-display/rating-display.js +7 -13
- package/dist/esm/rating-display/rating-display.js.map +1 -1
- package/dist/esm/slider/slider.js +13 -16
- package/dist/esm/slider/slider.js.map +1 -1
- package/dist/esm/styles/states/index.js +34 -0
- package/dist/esm/styles/states/index.js.map +1 -1
- package/dist/esm/tablist/tablist.js +5 -7
- package/dist/esm/tablist/tablist.js.map +1 -1
- package/dist/esm/tabs/tabs.js +5 -8
- package/dist/esm/tabs/tabs.js.map +1 -1
- package/dist/esm/text-input/text-input.js +13 -15
- package/dist/esm/text-input/text-input.js.map +1 -1
- package/dist/esm/textarea/textarea.js +20 -29
- package/dist/esm/textarea/textarea.js.map +1 -1
- package/dist/esm/theme/set-theme.js +1 -2
- package/dist/esm/theme/set-theme.js.map +1 -1
- package/dist/esm/tooltip/tooltip.js +13 -18
- package/dist/esm/tooltip/tooltip.js.map +1 -1
- package/dist/esm/utils/direction.js +1 -2
- package/dist/esm/utils/direction.js.map +1 -1
- package/dist/esm/utils/element-internals.js +8 -11
- package/dist/esm/utils/element-internals.js.map +1 -1
- package/dist/esm/utils/get-initials.js +2 -2
- package/dist/esm/utils/get-initials.js.map +1 -1
- package/dist/esm/utils/index.js +1 -0
- package/dist/esm/utils/index.js.map +1 -1
- package/dist/esm/utils/language.js +12 -0
- package/dist/esm/utils/language.js.map +1 -0
- package/dist/esm/utils/support.js +16 -0
- package/dist/esm/utils/support.js.map +1 -0
- package/dist/esm/utils/unique-id.js +14 -0
- package/dist/esm/utils/unique-id.js.map +1 -0
- package/dist/esm/utils/whitespace-filter.js +1 -1
- package/dist/esm/utils/whitespace-filter.js.map +1 -1
- package/dist/web-components.d.ts +1928 -862
- package/dist/web-components.js +1665 -445
- package/dist/web-components.min.js +344 -322
- package/package.json +1 -1
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { FluentDesignSystem } from '../fluent-design-system.js';
|
|
2
|
+
import { Listbox } from './listbox.js';
|
|
3
|
+
import { styles } from './listbox.styles.js';
|
|
4
|
+
import { template } from './listbox.template.js';
|
|
5
|
+
/**
|
|
6
|
+
* The Fluent Listbox Element
|
|
7
|
+
*
|
|
8
|
+
* @public
|
|
9
|
+
* @remarks
|
|
10
|
+
* HTML Element: `<fluent-listbox>`
|
|
11
|
+
*/
|
|
12
|
+
export const definition = Listbox.compose({
|
|
13
|
+
name: `${FluentDesignSystem.prefix}-listbox`,
|
|
14
|
+
template,
|
|
15
|
+
styles,
|
|
16
|
+
});
|
|
17
|
+
//# sourceMappingURL=listbox.definition.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"listbox.definition.js","sourceRoot":"","sources":["../../../src/listbox/listbox.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,UAAU;IAC5C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
|
|
3
|
+
import { isDropdownOption } from '../option/option.options.js';
|
|
4
|
+
import { toggleState } from '../utils/element-internals.js';
|
|
5
|
+
import { uniqueId } from '../utils/unique-id.js';
|
|
6
|
+
/**
|
|
7
|
+
* A Listbox Custom HTML Element.
|
|
8
|
+
* Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox } role.
|
|
9
|
+
*
|
|
10
|
+
* @slot - The default slot for the options.
|
|
11
|
+
* @emits connected - Dispatched when the element is connected to the DOM.
|
|
12
|
+
*
|
|
13
|
+
* @remarks
|
|
14
|
+
* The listbox component represents a list of options that can be selected.
|
|
15
|
+
* It is intended to be used in conjunction with the {@link BaseDropdown | Dropdown} component.
|
|
16
|
+
*
|
|
17
|
+
* @public
|
|
18
|
+
*/
|
|
19
|
+
export class Listbox extends FASTElement {
|
|
20
|
+
/**
|
|
21
|
+
* Updates the multiple selection state of the listbox and its options.
|
|
22
|
+
*
|
|
23
|
+
* @param prev - the previous multiple value
|
|
24
|
+
* @param next - the current multiple value
|
|
25
|
+
*/
|
|
26
|
+
multipleChanged(prev, next) {
|
|
27
|
+
this.elementInternals.ariaMultiSelectable = next ? 'true' : 'false';
|
|
28
|
+
toggleState(this.elementInternals, 'multiple', next);
|
|
29
|
+
Updates.enqueue(() => {
|
|
30
|
+
this.options.forEach(x => {
|
|
31
|
+
x.multiple = !!next;
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Updates the enabled options collection when properties on the child options change.
|
|
37
|
+
*
|
|
38
|
+
* @param prev - the previous options
|
|
39
|
+
* @param next - the current options
|
|
40
|
+
*
|
|
41
|
+
* @internal
|
|
42
|
+
*/
|
|
43
|
+
optionsChanged(prev, next) {
|
|
44
|
+
next?.forEach((option, index) => {
|
|
45
|
+
option.elementInternals.ariaPosInSet = `${index + 1}`;
|
|
46
|
+
option.elementInternals.ariaSetSize = `${next.length}`;
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Handles the `beforetoggle` event on the listbox.
|
|
51
|
+
*
|
|
52
|
+
* @param e - the toggle event
|
|
53
|
+
* @returns true to allow the default popover behavior, undefined to prevent it
|
|
54
|
+
* @internal
|
|
55
|
+
*/
|
|
56
|
+
beforetoggleHandler(e) {
|
|
57
|
+
if (!this.dropdown) {
|
|
58
|
+
return true;
|
|
59
|
+
}
|
|
60
|
+
if (this.dropdown.disabled) {
|
|
61
|
+
this.dropdown.open = false;
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
this.dropdown.open = e.newState === 'open';
|
|
65
|
+
return true;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* The collection of child options that are not disabled.
|
|
69
|
+
*
|
|
70
|
+
* @internal
|
|
71
|
+
*/
|
|
72
|
+
get enabledOptions() {
|
|
73
|
+
return this.options?.filter(x => !x.disabled) ?? [];
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* The collection of child options that are selected.
|
|
77
|
+
*
|
|
78
|
+
* @public
|
|
79
|
+
*/
|
|
80
|
+
get selectedOptions() {
|
|
81
|
+
return this.options?.filter(x => x.selected) ?? [];
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Sets the `selected` state on a target option when clicked.
|
|
85
|
+
*
|
|
86
|
+
* @param e - The pointer event
|
|
87
|
+
* @public
|
|
88
|
+
*/
|
|
89
|
+
clickHandler(e) {
|
|
90
|
+
const target = e.target;
|
|
91
|
+
if (isDropdownOption(target)) {
|
|
92
|
+
this.selectOption(this.enabledOptions.indexOf(target));
|
|
93
|
+
}
|
|
94
|
+
return true;
|
|
95
|
+
}
|
|
96
|
+
constructor() {
|
|
97
|
+
super();
|
|
98
|
+
/**
|
|
99
|
+
* Sets the listbox ID to a unique value if one is not provided.
|
|
100
|
+
*
|
|
101
|
+
* @override
|
|
102
|
+
* @public
|
|
103
|
+
* @remarks
|
|
104
|
+
* HTML Attribute: `id`
|
|
105
|
+
*/
|
|
106
|
+
this.id = uniqueId('listbox-');
|
|
107
|
+
/**
|
|
108
|
+
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
109
|
+
*
|
|
110
|
+
* @internal
|
|
111
|
+
*/
|
|
112
|
+
this.elementInternals = this.attachInternals();
|
|
113
|
+
this.elementInternals.role = 'listbox';
|
|
114
|
+
}
|
|
115
|
+
connectedCallback() {
|
|
116
|
+
super.connectedCallback();
|
|
117
|
+
this.$emit('connected');
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Handles observable subscriptions for the listbox.
|
|
121
|
+
*
|
|
122
|
+
* @param source - The source of the observed change
|
|
123
|
+
* @param propertyName - The name of the property that changed
|
|
124
|
+
*
|
|
125
|
+
* @internal
|
|
126
|
+
*/
|
|
127
|
+
handleChange(source, propertyName) {
|
|
128
|
+
if (propertyName === 'multiple') {
|
|
129
|
+
this.multiple = source.multiple;
|
|
130
|
+
return;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
/**
|
|
134
|
+
* Selects an option by index.
|
|
135
|
+
*
|
|
136
|
+
* @param index - The index of the option to select.
|
|
137
|
+
* @public
|
|
138
|
+
*/
|
|
139
|
+
selectOption(index = this.selectedIndex) {
|
|
140
|
+
let selectedIndex = this.selectedIndex;
|
|
141
|
+
if (!this.multiple) {
|
|
142
|
+
this.enabledOptions.forEach((item, i) => {
|
|
143
|
+
const shouldCheck = i === index;
|
|
144
|
+
item.selected = shouldCheck;
|
|
145
|
+
if (shouldCheck) {
|
|
146
|
+
selectedIndex = i;
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
else {
|
|
151
|
+
const option = this.enabledOptions[index];
|
|
152
|
+
if (option) {
|
|
153
|
+
option.selected = !option.selected;
|
|
154
|
+
}
|
|
155
|
+
selectedIndex = index;
|
|
156
|
+
}
|
|
157
|
+
this.selectedIndex = selectedIndex;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
__decorate([
|
|
161
|
+
attr({ attribute: 'id', mode: 'fromView' })
|
|
162
|
+
], Listbox.prototype, "id", void 0);
|
|
163
|
+
__decorate([
|
|
164
|
+
observable
|
|
165
|
+
], Listbox.prototype, "multiple", void 0);
|
|
166
|
+
__decorate([
|
|
167
|
+
observable
|
|
168
|
+
], Listbox.prototype, "options", void 0);
|
|
169
|
+
__decorate([
|
|
170
|
+
observable
|
|
171
|
+
], Listbox.prototype, "selectedIndex", void 0);
|
|
172
|
+
__decorate([
|
|
173
|
+
observable
|
|
174
|
+
], Listbox.prototype, "dropdown", void 0);
|
|
175
|
+
//# sourceMappingURL=listbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"listbox.js","sourceRoot":"","sources":["../../../src/listbox/listbox.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Predicate function that determines if the element should be considered a listbox.
|
|
3
|
+
*
|
|
4
|
+
* @param element - The element to check.
|
|
5
|
+
* @param tagName - The tag name to check.
|
|
6
|
+
* @returns true if the element is a listbox.
|
|
7
|
+
* @public
|
|
8
|
+
*/
|
|
9
|
+
export function isListbox(element, tagName = '-listbox') {
|
|
10
|
+
if (element?.nodeType !== Node.ELEMENT_NODE) {
|
|
11
|
+
return false;
|
|
12
|
+
}
|
|
13
|
+
return element.tagName.toLowerCase().endsWith(tagName);
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=listbox.options.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"listbox.options.js","sourceRoot":"","sources":["../../../src/listbox/listbox.options.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,OAAqB,EAAE,UAAkB,UAAU;IAC3E,IAAI,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAQ,OAAmB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACtE,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { css } from '@microsoft/fast-element';
|
|
2
|
+
import { borderRadiusMedium, colorNeutralBackground1, shadow16, spacingHorizontalXS, spacingHorizontalXXS, } from '../theme/design-tokens.js';
|
|
3
|
+
import { display } from '../utils/display.js';
|
|
4
|
+
/**
|
|
5
|
+
* Styles for the {@link (Listbox:class)} component.
|
|
6
|
+
*
|
|
7
|
+
* @public
|
|
8
|
+
*/
|
|
9
|
+
export const styles = css `
|
|
10
|
+
${display('inline-flex')}
|
|
11
|
+
|
|
12
|
+
:host {
|
|
13
|
+
background-color: ${colorNeutralBackground1};
|
|
14
|
+
border-radius: ${borderRadiusMedium};
|
|
15
|
+
border: none;
|
|
16
|
+
box-shadow: ${shadow16};
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
margin: 0;
|
|
20
|
+
min-width: 160px;
|
|
21
|
+
padding: ${spacingHorizontalXS};
|
|
22
|
+
row-gap: ${spacingHorizontalXXS};
|
|
23
|
+
width: auto;
|
|
24
|
+
}
|
|
25
|
+
`;
|
|
26
|
+
//# sourceMappingURL=listbox.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"listbox.styles.js","sourceRoot":"","sources":["../../../src/listbox/listbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;wBAGF,uBAAuB;qBAC1B,kBAAkB;;kBAErB,QAAQ;;;;;eAKX,mBAAmB;eACnB,oBAAoB;;;CAGlC,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { html, slotted } from '@microsoft/fast-element';
|
|
2
|
+
import { isDropdownOption } from '../option/option.options.js';
|
|
3
|
+
/**
|
|
4
|
+
* Generates a template for the {@link (Dropdown:class)} component.
|
|
5
|
+
*
|
|
6
|
+
* @param options - The {@link (DropdownOptions:interface)} to use for generating the template.
|
|
7
|
+
* @returns The template object.
|
|
8
|
+
*
|
|
9
|
+
* @public
|
|
10
|
+
*/
|
|
11
|
+
export function listboxTemplate() {
|
|
12
|
+
return html `
|
|
13
|
+
<template
|
|
14
|
+
id="${x => x.id}"
|
|
15
|
+
@beforetoggle="${(x, c) => x.beforetoggleHandler(c.event)}"
|
|
16
|
+
@click="${(x, c) => x.clickHandler(c.event)}"
|
|
17
|
+
>
|
|
18
|
+
<slot
|
|
19
|
+
${slotted({
|
|
20
|
+
property: 'options',
|
|
21
|
+
filter: node => isDropdownOption(node),
|
|
22
|
+
})}
|
|
23
|
+
></slot>
|
|
24
|
+
</template>
|
|
25
|
+
`;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Template for the Listbox component.
|
|
29
|
+
*
|
|
30
|
+
* @public
|
|
31
|
+
*/
|
|
32
|
+
export const template = listboxTemplate();
|
|
33
|
+
//# sourceMappingURL=listbox.template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"listbox.template.js","sourceRoot":"","sources":["../../../src/listbox/listbox.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAG/D;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO,IAAI,CAAG;;YAEJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;uBACE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAoB,CAAC;gBAC9D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAqB,CAAC;;;UAGvD,OAAO,CAAC;QACR,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC;KACvC,CAAC;;;GAGP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAiC,eAAe,EAAE,CAAC"}
|
package/dist/esm/menu/menu.js
CHANGED
|
@@ -67,22 +67,20 @@ export class Menu extends FASTElement {
|
|
|
67
67
|
* @public
|
|
68
68
|
*/
|
|
69
69
|
this.toggleMenu = () => {
|
|
70
|
-
|
|
71
|
-
(_a = this._menuList) === null || _a === void 0 ? void 0 : _a.togglePopover(!this._open);
|
|
70
|
+
this._menuList?.togglePopover(!this._open);
|
|
72
71
|
};
|
|
73
72
|
/**
|
|
74
73
|
* Closes the menu.
|
|
75
74
|
* @public
|
|
76
75
|
*/
|
|
77
76
|
this.closeMenu = (event) => {
|
|
78
|
-
var _a;
|
|
79
77
|
// Keep menu open if the event target is a menu item checkbox or radio
|
|
80
|
-
if (
|
|
78
|
+
if (event?.target instanceof MenuItem &&
|
|
81
79
|
(event.target.getAttribute('role') === MenuItemRole.menuitemcheckbox ||
|
|
82
80
|
event.target.getAttribute('role') === MenuItemRole.menuitemradio)) {
|
|
83
81
|
return;
|
|
84
82
|
}
|
|
85
|
-
|
|
83
|
+
this._menuList?.togglePopover(false);
|
|
86
84
|
if (this.closeOnScroll) {
|
|
87
85
|
document.removeEventListener('scroll', this.closeMenu);
|
|
88
86
|
}
|
|
@@ -92,8 +90,7 @@ export class Menu extends FASTElement {
|
|
|
92
90
|
* @public
|
|
93
91
|
*/
|
|
94
92
|
this.openMenu = (e) => {
|
|
95
|
-
|
|
96
|
-
(_a = this._menuList) === null || _a === void 0 ? void 0 : _a.togglePopover(true);
|
|
93
|
+
this._menuList?.togglePopover(true);
|
|
97
94
|
if (e && this.openOnContext) {
|
|
98
95
|
e.preventDefault();
|
|
99
96
|
}
|
|
@@ -108,12 +105,11 @@ export class Menu extends FASTElement {
|
|
|
108
105
|
* @returns void
|
|
109
106
|
*/
|
|
110
107
|
this.toggleHandler = (e) => {
|
|
111
|
-
var _a;
|
|
112
108
|
// @ts-expect-error - Baseline 2024
|
|
113
109
|
if (e.type === 'toggle' && e.newState) {
|
|
114
110
|
// @ts-expect-error - Baseline 2024
|
|
115
111
|
const newState = e.newState === 'open' ? true : false;
|
|
116
|
-
|
|
112
|
+
this._trigger?.setAttribute('aria-expanded', `${newState}`);
|
|
117
113
|
this._open = newState;
|
|
118
114
|
this.focusMenuList();
|
|
119
115
|
}
|
|
@@ -211,12 +207,11 @@ export class Menu extends FASTElement {
|
|
|
211
207
|
* @public
|
|
212
208
|
*/
|
|
213
209
|
openOnHoverChanged(oldValue, newValue) {
|
|
214
|
-
var _a, _b;
|
|
215
210
|
if (newValue) {
|
|
216
|
-
|
|
211
|
+
this._trigger?.addEventListener('mouseover', this.openMenu);
|
|
217
212
|
}
|
|
218
213
|
else {
|
|
219
|
-
|
|
214
|
+
this._trigger?.removeEventListener('mouseover', this.openMenu);
|
|
220
215
|
}
|
|
221
216
|
}
|
|
222
217
|
/**
|
|
@@ -227,12 +222,11 @@ export class Menu extends FASTElement {
|
|
|
227
222
|
* @param newValue - The new value of 'persistOnItemClick'.
|
|
228
223
|
*/
|
|
229
224
|
persistOnItemClickChanged(oldValue, newValue) {
|
|
230
|
-
var _a, _b;
|
|
231
225
|
if (!newValue) {
|
|
232
|
-
|
|
226
|
+
this._menuList?.addEventListener('change', this.closeMenu);
|
|
233
227
|
}
|
|
234
228
|
else {
|
|
235
|
-
|
|
229
|
+
this._menuList?.removeEventListener('change', this.closeMenu);
|
|
236
230
|
}
|
|
237
231
|
}
|
|
238
232
|
/**
|
|
@@ -243,12 +237,11 @@ export class Menu extends FASTElement {
|
|
|
243
237
|
* @param newValue - The new value of 'openOnContext'.
|
|
244
238
|
*/
|
|
245
239
|
openOnContextChanged(oldValue, newValue) {
|
|
246
|
-
var _a, _b;
|
|
247
240
|
if (newValue) {
|
|
248
|
-
|
|
241
|
+
this._trigger?.addEventListener('contextmenu', this.openMenu);
|
|
249
242
|
}
|
|
250
243
|
else {
|
|
251
|
-
|
|
244
|
+
this._trigger?.removeEventListener('contextmenu', this.openMenu);
|
|
252
245
|
}
|
|
253
246
|
}
|
|
254
247
|
/**
|
|
@@ -275,21 +268,20 @@ export class Menu extends FASTElement {
|
|
|
275
268
|
* @internal
|
|
276
269
|
*/
|
|
277
270
|
addListeners() {
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
(_b = this._trigger) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.triggerKeydownHandler);
|
|
271
|
+
this._menuList?.addEventListener('toggle', this.toggleHandler);
|
|
272
|
+
this._trigger?.addEventListener('keydown', this.triggerKeydownHandler);
|
|
281
273
|
if (!this.persistOnItemClick) {
|
|
282
|
-
|
|
274
|
+
this._menuList?.addEventListener('change', this.closeMenu);
|
|
283
275
|
}
|
|
284
276
|
if (this.openOnHover) {
|
|
285
|
-
|
|
277
|
+
this._trigger?.addEventListener('mouseover', this.openMenu);
|
|
286
278
|
}
|
|
287
279
|
else if (this.openOnContext) {
|
|
288
|
-
|
|
280
|
+
this._trigger?.addEventListener('contextmenu', this.openMenu);
|
|
289
281
|
document.addEventListener('click', this.documentClickHandler);
|
|
290
282
|
}
|
|
291
283
|
else {
|
|
292
|
-
|
|
284
|
+
this._trigger?.addEventListener('click', this.toggleMenu);
|
|
293
285
|
}
|
|
294
286
|
}
|
|
295
287
|
/**
|
|
@@ -301,21 +293,20 @@ export class Menu extends FASTElement {
|
|
|
301
293
|
* @internal
|
|
302
294
|
*/
|
|
303
295
|
removeListeners() {
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
(_b = this._trigger) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', this.triggerKeydownHandler);
|
|
296
|
+
this._menuList?.removeEventListener('toggle', this.toggleHandler);
|
|
297
|
+
this._trigger?.removeEventListener('keydown', this.triggerKeydownHandler);
|
|
307
298
|
if (!this.persistOnItemClick) {
|
|
308
|
-
|
|
299
|
+
this._menuList?.removeEventListener('change', this.closeMenu);
|
|
309
300
|
}
|
|
310
301
|
if (this.openOnHover) {
|
|
311
|
-
|
|
302
|
+
this._trigger?.removeEventListener('mouseover', this.openMenu);
|
|
312
303
|
}
|
|
313
304
|
if (this.openOnContext) {
|
|
314
|
-
|
|
305
|
+
this._trigger?.removeEventListener('contextmenu', this.openMenu);
|
|
315
306
|
document.removeEventListener('click', this.documentClickHandler);
|
|
316
307
|
}
|
|
317
308
|
else {
|
|
318
|
-
|
|
309
|
+
this._trigger?.removeEventListener('click', this.toggleMenu);
|
|
319
310
|
}
|
|
320
311
|
}
|
|
321
312
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/menu/menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtF,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,OAAO,IAAK,SAAQ,WAAW;IAArC;;QAoCE;;;WAGG;QAEI,oBAAe,GAAe,EAAE,CAAC;QAExC;;;WAGG;QAEI,oBAAe,GAAkB,EAAE,CAAC;QAS3C;;;WAGG;QACK,UAAK,GAAY,KAAK,CAAC;QAkD/B;;;WAGG;QACI,eAAU,GAAG,GAAG,EAAE
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/menu/menu.ts"],"names":[],"mappings":"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"}
|
|
@@ -55,7 +55,6 @@ export class MenuItem extends FASTElement {
|
|
|
55
55
|
* @internal
|
|
56
56
|
*/
|
|
57
57
|
this.handleMenuItemKeyDown = (e) => {
|
|
58
|
-
var _a, _b, _c, _d;
|
|
59
58
|
if (e.defaultPrevented) {
|
|
60
59
|
return false;
|
|
61
60
|
}
|
|
@@ -67,16 +66,16 @@ export class MenuItem extends FASTElement {
|
|
|
67
66
|
case keyArrowRight:
|
|
68
67
|
//open/focus on submenu
|
|
69
68
|
if (!this.disabled) {
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
this.submenu?.togglePopover(true);
|
|
70
|
+
this.submenu?.focus();
|
|
72
71
|
}
|
|
73
72
|
return false;
|
|
74
73
|
case keyArrowLeft:
|
|
75
74
|
//close submenu
|
|
76
|
-
if (
|
|
75
|
+
if (this.parentElement?.hasAttribute('popover')) {
|
|
77
76
|
this.parentElement.togglePopover(false);
|
|
78
77
|
// focus the menu item containing the submenu
|
|
79
|
-
|
|
78
|
+
this.parentElement.parentElement?.focus();
|
|
80
79
|
}
|
|
81
80
|
return false;
|
|
82
81
|
}
|
|
@@ -96,22 +95,20 @@ export class MenuItem extends FASTElement {
|
|
|
96
95
|
* @internal
|
|
97
96
|
*/
|
|
98
97
|
this.handleMouseOver = (e) => {
|
|
99
|
-
var _a;
|
|
100
98
|
if (this.disabled) {
|
|
101
99
|
return false;
|
|
102
100
|
}
|
|
103
|
-
|
|
101
|
+
this.submenu?.togglePopover(true);
|
|
104
102
|
return false;
|
|
105
103
|
};
|
|
106
104
|
/**
|
|
107
105
|
* @internal
|
|
108
106
|
*/
|
|
109
107
|
this.handleMouseOut = (e) => {
|
|
110
|
-
var _a;
|
|
111
108
|
if (this.contains(document.activeElement)) {
|
|
112
109
|
return false;
|
|
113
110
|
}
|
|
114
|
-
|
|
111
|
+
this.submenu?.togglePopover(false);
|
|
115
112
|
return false;
|
|
116
113
|
};
|
|
117
114
|
/**
|
|
@@ -195,7 +192,7 @@ export class MenuItem extends FASTElement {
|
|
|
195
192
|
* @param next - the next state
|
|
196
193
|
*/
|
|
197
194
|
roleChanged(prev, next) {
|
|
198
|
-
this.elementInternals.role = next
|
|
195
|
+
this.elementInternals.role = next ?? MenuItemRole.menuitem;
|
|
199
196
|
}
|
|
200
197
|
/**
|
|
201
198
|
* Handles changes to checked attribute custom states and element internals
|
|
@@ -216,8 +213,7 @@ export class MenuItem extends FASTElement {
|
|
|
216
213
|
* @internal
|
|
217
214
|
*/
|
|
218
215
|
slottedSubmenuChanged(prev, next) {
|
|
219
|
-
|
|
220
|
-
(_a = this.submenu) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggleHandler);
|
|
216
|
+
this.submenu?.removeEventListener('toggle', this.toggleHandler);
|
|
221
217
|
if (next.length) {
|
|
222
218
|
this.submenu = next[0];
|
|
223
219
|
this.submenu.toggleAttribute('popover', true);
|
|
@@ -231,9 +227,8 @@ export class MenuItem extends FASTElement {
|
|
|
231
227
|
}
|
|
232
228
|
}
|
|
233
229
|
connectedCallback() {
|
|
234
|
-
var _a;
|
|
235
230
|
super.connectedCallback();
|
|
236
|
-
this.elementInternals.role =
|
|
231
|
+
this.elementInternals.role = this.role ?? MenuItemRole.menuitem;
|
|
237
232
|
this.elementInternals.ariaChecked = this.role !== MenuItemRole.menuitem ? `${!!this.checked}` : null;
|
|
238
233
|
}
|
|
239
234
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAuB,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC7F,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAGhG,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAIvE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC;AAWzC;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAmB,EAAE,CAAC,KAAK,CAAC,EAAE,CACtD,KAAK,CAAC,QAAQ,KAAK,CAAC,IAAK,KAAkB,CAAC,gBAAgB,CAAC,IAAI,KAAK,MAAM,CAAC;AAE/E;;;;;;;;;;;;;;GAcG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAsBnE;;;;;;WAMG;QAEI,SAAI,GAAiB,YAAY,CAAC,QAAQ,CAAC;QAWlD;;;;;;WAMG;QAEI,YAAO,GAAY,KAAK,CAAC;QAoEhC;;WAEG;QACI,0BAAqB,GAAG,CAAC,CAAgB,EAAW,EAAE
|
|
1
|
+
{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.ts"],"names":[],"mappings":"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"}
|
|
@@ -20,6 +20,7 @@ export class MenuList extends FASTElement {
|
|
|
20
20
|
this.setItems();
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
+
static { this.focusableElementRoles = MenuItemRole; }
|
|
23
24
|
constructor() {
|
|
24
25
|
super();
|
|
25
26
|
/**
|
|
@@ -189,7 +190,6 @@ export class MenuList extends FASTElement {
|
|
|
189
190
|
return startSlot ? 1 : 0;
|
|
190
191
|
}
|
|
191
192
|
setItems() {
|
|
192
|
-
var _a;
|
|
193
193
|
const children = Array.from(this.children);
|
|
194
194
|
this.removeItemListeners(children);
|
|
195
195
|
children.forEach((child) => Observable.getNotifier(child).subscribe(this, 'hidden'));
|
|
@@ -209,12 +209,12 @@ export class MenuList extends FASTElement {
|
|
|
209
209
|
* position in the MenuList. Each MenuItem element has a data-indent attribute that is
|
|
210
210
|
* used to set the indent of the element's start slot content.
|
|
211
211
|
*/
|
|
212
|
-
const filteredMenuListItems =
|
|
213
|
-
const indent = filteredMenuListItems
|
|
212
|
+
const filteredMenuListItems = this.menuItems?.filter(this.isMenuItemElement);
|
|
213
|
+
const indent = filteredMenuListItems?.reduce((accum, current) => {
|
|
214
214
|
const elementValue = MenuList.elementIndent(current);
|
|
215
215
|
return Math.max(accum, elementValue);
|
|
216
216
|
}, 0);
|
|
217
|
-
filteredMenuListItems
|
|
217
|
+
filteredMenuListItems?.forEach((item) => {
|
|
218
218
|
if (item instanceof MenuItem) {
|
|
219
219
|
item.setAttribute('data-indent', `${indent}`);
|
|
220
220
|
}
|
|
@@ -251,7 +251,6 @@ export class MenuList extends FASTElement {
|
|
|
251
251
|
}
|
|
252
252
|
}
|
|
253
253
|
}
|
|
254
|
-
MenuList.focusableElementRoles = MenuItemRole;
|
|
255
254
|
__decorate([
|
|
256
255
|
observable
|
|
257
256
|
], MenuList.prototype, "items", void 0);
|