@fluentui/web-components 3.0.0-beta.77 → 3.0.0-beta.79
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 +21 -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/menu-item/menu-item.d.ts +1 -6
- package/dist/dts/menu-item/menu-item.template.d.ts +1 -1
- 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 -19
- package/dist/esm/menu-item/menu-item.js.map +1 -1
- package/dist/esm/menu-item/menu-item.template.js +1 -2
- package/dist/esm/menu-item/menu-item.template.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 +1666 -448
- 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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"}
|
|
@@ -6,11 +6,6 @@ import { applyMixins } from '../utils/apply-mixins.js';
|
|
|
6
6
|
import { toggleState } from '../utils/element-internals.js';
|
|
7
7
|
import { MenuItemRole, roleForMenuItem } from './menu-item.options.js';
|
|
8
8
|
export { MenuItemRole, roleForMenuItem };
|
|
9
|
-
/**
|
|
10
|
-
* Creates a function that can be used to filter a Node array, selecting only elements with elementInternals role of "menu".
|
|
11
|
-
* @public
|
|
12
|
-
*/
|
|
13
|
-
export const menuFilter = () => value => value.nodeType === 1 && value.elementInternals.role === 'menu';
|
|
14
9
|
/**
|
|
15
10
|
* A Switch Custom HTML Element.
|
|
16
11
|
* Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
|
|
@@ -55,7 +50,6 @@ export class MenuItem extends FASTElement {
|
|
|
55
50
|
* @internal
|
|
56
51
|
*/
|
|
57
52
|
this.handleMenuItemKeyDown = (e) => {
|
|
58
|
-
var _a, _b, _c, _d;
|
|
59
53
|
if (e.defaultPrevented) {
|
|
60
54
|
return false;
|
|
61
55
|
}
|
|
@@ -67,16 +61,16 @@ export class MenuItem extends FASTElement {
|
|
|
67
61
|
case keyArrowRight:
|
|
68
62
|
//open/focus on submenu
|
|
69
63
|
if (!this.disabled) {
|
|
70
|
-
|
|
71
|
-
|
|
64
|
+
this.submenu?.togglePopover(true);
|
|
65
|
+
this.submenu?.focus();
|
|
72
66
|
}
|
|
73
67
|
return false;
|
|
74
68
|
case keyArrowLeft:
|
|
75
69
|
//close submenu
|
|
76
|
-
if (
|
|
70
|
+
if (this.parentElement?.hasAttribute('popover')) {
|
|
77
71
|
this.parentElement.togglePopover(false);
|
|
78
72
|
// focus the menu item containing the submenu
|
|
79
|
-
|
|
73
|
+
this.parentElement.parentElement?.focus();
|
|
80
74
|
}
|
|
81
75
|
return false;
|
|
82
76
|
}
|
|
@@ -96,22 +90,20 @@ export class MenuItem extends FASTElement {
|
|
|
96
90
|
* @internal
|
|
97
91
|
*/
|
|
98
92
|
this.handleMouseOver = (e) => {
|
|
99
|
-
var _a;
|
|
100
93
|
if (this.disabled) {
|
|
101
94
|
return false;
|
|
102
95
|
}
|
|
103
|
-
|
|
96
|
+
this.submenu?.togglePopover(true);
|
|
104
97
|
return false;
|
|
105
98
|
};
|
|
106
99
|
/**
|
|
107
100
|
* @internal
|
|
108
101
|
*/
|
|
109
102
|
this.handleMouseOut = (e) => {
|
|
110
|
-
var _a;
|
|
111
103
|
if (this.contains(document.activeElement)) {
|
|
112
104
|
return false;
|
|
113
105
|
}
|
|
114
|
-
|
|
106
|
+
this.submenu?.togglePopover(false);
|
|
115
107
|
return false;
|
|
116
108
|
};
|
|
117
109
|
/**
|
|
@@ -195,7 +187,7 @@ export class MenuItem extends FASTElement {
|
|
|
195
187
|
* @param next - the next state
|
|
196
188
|
*/
|
|
197
189
|
roleChanged(prev, next) {
|
|
198
|
-
this.elementInternals.role = next
|
|
190
|
+
this.elementInternals.role = next ?? MenuItemRole.menuitem;
|
|
199
191
|
}
|
|
200
192
|
/**
|
|
201
193
|
* Handles changes to checked attribute custom states and element internals
|
|
@@ -216,8 +208,7 @@ export class MenuItem extends FASTElement {
|
|
|
216
208
|
* @internal
|
|
217
209
|
*/
|
|
218
210
|
slottedSubmenuChanged(prev, next) {
|
|
219
|
-
|
|
220
|
-
(_a = this.submenu) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggleHandler);
|
|
211
|
+
this.submenu?.removeEventListener('toggle', this.toggleHandler);
|
|
221
212
|
if (next.length) {
|
|
222
213
|
this.submenu = next[0];
|
|
223
214
|
this.submenu.toggleAttribute('popover', true);
|
|
@@ -231,9 +222,8 @@ export class MenuItem extends FASTElement {
|
|
|
231
222
|
}
|
|
232
223
|
}
|
|
233
224
|
connectedCallback() {
|
|
234
|
-
var _a;
|
|
235
225
|
super.connectedCallback();
|
|
236
|
-
this.elementInternals.role =
|
|
226
|
+
this.elementInternals.role = this.role ?? MenuItemRole.menuitem;
|
|
237
227
|
this.elementInternals.ariaChecked = this.role !== MenuItemRole.menuitem ? `${!!this.checked}` : null;
|
|
238
228
|
}
|
|
239
229
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { html, slotted } from '@microsoft/fast-element';
|
|
2
2
|
import { staticallyCompose } from '../utils/template-helpers.js';
|
|
3
3
|
import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
|
|
4
|
-
import { menuFilter } from './menu-item.js';
|
|
5
4
|
const Checkmark16Filled = html.partial(`<svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
|
|
6
5
|
const chevronRight16Filled = html.partial(`<svg class="submenu-glyph" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`);
|
|
7
6
|
export function menuItemTemplate(options = {}) {
|
|
@@ -20,7 +19,7 @@ export function menuItemTemplate(options = {}) {
|
|
|
20
19
|
</div>
|
|
21
20
|
${endSlotTemplate(options)}
|
|
22
21
|
<slot name="submenu-glyph"> ${staticallyCompose(options.submenuGlyph)} </slot>
|
|
23
|
-
<slot name="submenu" ${slotted({ property: 'slottedSubmenu'
|
|
22
|
+
<slot name="submenu" ${slotted({ property: 'slottedSubmenu' })}></slot>
|
|
24
23
|
</template>
|
|
25
24
|
`;
|
|
26
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.template.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"menu-item.template.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG1E,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CACpC,8TAA8T,CAC/T,CAAC;AACF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CACvC,wTAAwT,CACzT,CAAC;AAEF,MAAM,UAAU,gBAAgB,CAAqB,UAA2B,EAAE;IAChF,OAAO,IAAI,CAAG;;kBAEE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAsB,CAAC;gBAC7D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAmB,CAAC;oBAClD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;mBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;iBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAoB,CAAC;;gCAElC,iBAAiB,CAAC,OAAO,CAAC,SAAS,CAAC;QAC5D,iBAAiB,CAAC,OAAO,CAAC;;;;QAI1B,eAAe,CAAC,OAAO,CAAC;oCACI,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAC;6BAC9C,OAAO,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;;GAEjE,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,CAAC;IACtE,SAAS,EAAE,iBAAiB;IAC5B,YAAY,EAAE,oBAAoB;CACnC,CAAC,CAAC"}
|