@ni/nimble-components 8.4.0 → 8.6.1
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/all-components-bundle.js +44 -13
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +35 -10
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/drawer/index.js +9 -3
- package/dist/esm/drawer/index.js.map +1 -1
- package/dist/esm/menu-button/index.d.ts +50 -0
- package/dist/esm/menu-button/index.js +154 -0
- package/dist/esm/menu-button/index.js.map +1 -0
- package/dist/esm/menu-button/styles.d.ts +1 -0
- package/dist/esm/menu-button/styles.js +29 -0
- package/dist/esm/menu-button/styles.js.map +1 -0
- package/dist/esm/menu-button/template.d.ts +2 -0
- package/dist/esm/menu-button/template.js +48 -0
- package/dist/esm/menu-button/template.js.map +1 -0
- package/dist/esm/menu-button/types.d.ts +15 -0
- package/dist/esm/menu-button/types.js +11 -0
- package/dist/esm/menu-button/types.js.map +1 -0
- package/dist/esm/nimble-components/src/menu-button/index.d.ts +50 -0
- package/dist/esm/nimble-components/src/menu-button/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/menu-button/template.d.ts +2 -0
- package/dist/esm/nimble-components/src/menu-button/types.d.ts +15 -0
- package/dist/esm/nimble-components/src/theme-provider/design-tokens.d.ts +1 -1
- package/dist/esm/text-field/styles.js +31 -7
- package/dist/esm/text-field/styles.js.map +1 -1
- package/dist/esm/theme-provider/design-tokens.d.ts +1 -1
- package/dist/esm/theme-provider/design-tokens.js +2 -2
- package/dist/esm/theme-provider/design-tokens.js.map +1 -1
- package/package.json +2 -2
package/dist/esm/drawer/index.js
CHANGED
|
@@ -133,9 +133,15 @@ export class Drawer extends FoundationDialog {
|
|
|
133
133
|
}
|
|
134
134
|
updateAnimationDuration() {
|
|
135
135
|
const disableAnimations = prefersReducedMotionMediaQuery.matches;
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
136
|
+
if (disableAnimations) {
|
|
137
|
+
this.animationDurationMilliseconds = animationDurationWhenDisabledMilliseconds;
|
|
138
|
+
}
|
|
139
|
+
else {
|
|
140
|
+
// string ends in 's' unit specifier
|
|
141
|
+
const secondsString = largeDelay.getValueFor(this);
|
|
142
|
+
const secondsNumber = parseFloat(secondsString);
|
|
143
|
+
this.animationDurationMilliseconds = 1000 * secondsNumber;
|
|
144
|
+
}
|
|
139
145
|
}
|
|
140
146
|
animateOpening() {
|
|
141
147
|
this.animateOpenClose(true);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EACH,IAAI,EAEJ,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAC1B,cAAc,IAAI,QAAQ,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,8BAA8B,EAAE,MAAM,2CAA2C,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAQtD,MAAM,yCAAyC,GAAG,KAAK,CAAC;AAExD;;;;GAIG;AACH,MAAM,OAAO,MAAO,SAAQ,gBAAgB;IAA5C;;QAEW,aAAQ,GAAmB,cAAc,CAAC,IAAI,CAAC;QAG/C,UAAK,GAAgB,WAAW,CAAC,MAAM,CAAC;QAE/C;;;;WAIG;QAEI,mBAAc,GAAG,KAAK,CAAC;QAEb,sBAAiB,GAAG,CAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;QAG7D,kCAA6B,GACrC,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
|
+
import { ButtonAppearance } from '../button/types';
|
|
3
|
+
import type { ToggleButton } from '../toggle-button';
|
|
4
|
+
import { MenuButtonPosition } from './types';
|
|
5
|
+
import type { IButton } from '../patterns/button/types';
|
|
6
|
+
import type { AnchoredRegion } from '../anchored-region';
|
|
7
|
+
declare global {
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'nimble-menu-button': MenuButton;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* A nimble-styled menu button control.
|
|
14
|
+
*/
|
|
15
|
+
export declare class MenuButton extends FoundationElement implements IButton {
|
|
16
|
+
appearance: ButtonAppearance;
|
|
17
|
+
disabled: boolean;
|
|
18
|
+
contentHidden: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Specifies whether or not the menu is open.
|
|
21
|
+
*/
|
|
22
|
+
open: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Configures where the menu should be placed relative to the button that opens the menu.
|
|
25
|
+
*/
|
|
26
|
+
position: MenuButtonPosition;
|
|
27
|
+
/** @internal */
|
|
28
|
+
readonly toggleButton: ToggleButton | undefined;
|
|
29
|
+
/** @internal */
|
|
30
|
+
readonly region: AnchoredRegion | undefined;
|
|
31
|
+
/** @internal */
|
|
32
|
+
readonly slottedMenus: HTMLElement[] | undefined;
|
|
33
|
+
/**
|
|
34
|
+
* Used to maintain the internal state of whether the last menu item should be focused instead
|
|
35
|
+
* of the first menu item the next time the menu is opened.
|
|
36
|
+
*/
|
|
37
|
+
private focusLastItemWhenOpened;
|
|
38
|
+
toggleButtonChanged(_prev: ToggleButton | undefined, _next: ToggleButton | undefined): void;
|
|
39
|
+
regionChanged(_prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void;
|
|
40
|
+
openChanged(_prev: boolean | undefined, _next: boolean): void;
|
|
41
|
+
regionLoadedHandler(): void;
|
|
42
|
+
focusoutHandler(e: FocusEvent): boolean;
|
|
43
|
+
toggleButtonCheckedChangeHandler(e: Event): boolean;
|
|
44
|
+
toggleButtonKeyDownHandler(e: KeyboardEvent): boolean;
|
|
45
|
+
menuChangeHandler(): void;
|
|
46
|
+
menuKeyDownHandler(e: KeyboardEvent): boolean;
|
|
47
|
+
private get menu();
|
|
48
|
+
private focusMenu;
|
|
49
|
+
private focusLastMenuItem;
|
|
50
|
+
}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { attr, observable } from '@microsoft/fast-element';
|
|
3
|
+
import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
|
|
4
|
+
import { keyArrowDown, keyArrowUp, keyEscape } from '@microsoft/fast-web-utilities';
|
|
5
|
+
import { ButtonAppearance } from '../button/types';
|
|
6
|
+
import { styles } from './styles';
|
|
7
|
+
import { template } from './template';
|
|
8
|
+
import { MenuButtonPosition } from './types';
|
|
9
|
+
/**
|
|
10
|
+
* A nimble-styled menu button control.
|
|
11
|
+
*/
|
|
12
|
+
export class MenuButton extends FoundationElement {
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments);
|
|
15
|
+
this.appearance = ButtonAppearance.Outline;
|
|
16
|
+
this.disabled = false;
|
|
17
|
+
this.contentHidden = false;
|
|
18
|
+
/**
|
|
19
|
+
* Specifies whether or not the menu is open.
|
|
20
|
+
*/
|
|
21
|
+
this.open = false;
|
|
22
|
+
/**
|
|
23
|
+
* Configures where the menu should be placed relative to the button that opens the menu.
|
|
24
|
+
*/
|
|
25
|
+
this.position = MenuButtonPosition.auto;
|
|
26
|
+
/**
|
|
27
|
+
* Used to maintain the internal state of whether the last menu item should be focused instead
|
|
28
|
+
* of the first menu item the next time the menu is opened.
|
|
29
|
+
*/
|
|
30
|
+
this.focusLastItemWhenOpened = false;
|
|
31
|
+
}
|
|
32
|
+
toggleButtonChanged(_prev, _next) {
|
|
33
|
+
if (this.region && this.toggleButton) {
|
|
34
|
+
this.region.anchorElement = this.toggleButton;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
regionChanged(_prev, _next) {
|
|
38
|
+
if (this.region && this.toggleButton) {
|
|
39
|
+
this.region.anchorElement = this.toggleButton;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
openChanged(_prev, _next) {
|
|
43
|
+
if (this.toggleButton) {
|
|
44
|
+
this.toggleButton.checked = this.open;
|
|
45
|
+
}
|
|
46
|
+
if (!this.open) {
|
|
47
|
+
// Only fire an event here if the menu is changing to being closed. Otherwise,
|
|
48
|
+
// wait until the menu is actually opened before firing the event.
|
|
49
|
+
this.$emit('open-change');
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
regionLoadedHandler() {
|
|
53
|
+
if (this.focusLastItemWhenOpened) {
|
|
54
|
+
this.focusLastMenuItem();
|
|
55
|
+
this.focusLastItemWhenOpened = false;
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
this.focusMenu();
|
|
59
|
+
}
|
|
60
|
+
this.$emit('open-change');
|
|
61
|
+
}
|
|
62
|
+
focusoutHandler(e) {
|
|
63
|
+
if (!this.open) {
|
|
64
|
+
return true;
|
|
65
|
+
}
|
|
66
|
+
const focusTarget = e.relatedTarget;
|
|
67
|
+
if (!this.contains(focusTarget)) {
|
|
68
|
+
this.open = false;
|
|
69
|
+
return false;
|
|
70
|
+
}
|
|
71
|
+
return true;
|
|
72
|
+
}
|
|
73
|
+
toggleButtonCheckedChangeHandler(e) {
|
|
74
|
+
this.open = this.toggleButton.checked;
|
|
75
|
+
// Don't bubble the 'change' event from the toggle button because
|
|
76
|
+
// the menu button has its own 'open-change' event.
|
|
77
|
+
e.stopPropagation();
|
|
78
|
+
return false;
|
|
79
|
+
}
|
|
80
|
+
toggleButtonKeyDownHandler(e) {
|
|
81
|
+
switch (e.key) {
|
|
82
|
+
case keyArrowUp:
|
|
83
|
+
this.focusLastItemWhenOpened = true;
|
|
84
|
+
this.open = true;
|
|
85
|
+
return false;
|
|
86
|
+
case keyArrowDown:
|
|
87
|
+
this.open = true;
|
|
88
|
+
return false;
|
|
89
|
+
default:
|
|
90
|
+
return true;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
menuChangeHandler() {
|
|
94
|
+
this.open = false;
|
|
95
|
+
this.toggleButton.focus();
|
|
96
|
+
}
|
|
97
|
+
menuKeyDownHandler(e) {
|
|
98
|
+
switch (e.key) {
|
|
99
|
+
case keyEscape:
|
|
100
|
+
this.open = false;
|
|
101
|
+
this.toggleButton.focus();
|
|
102
|
+
return false;
|
|
103
|
+
default:
|
|
104
|
+
return true;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
get menu() {
|
|
108
|
+
return this.slottedMenus?.length ? this.slottedMenus[0] : undefined;
|
|
109
|
+
}
|
|
110
|
+
focusMenu() {
|
|
111
|
+
this.menu?.focus();
|
|
112
|
+
}
|
|
113
|
+
focusLastMenuItem() {
|
|
114
|
+
const menuItems = this.menu?.querySelectorAll('[role=menuitem]');
|
|
115
|
+
if (menuItems?.length) {
|
|
116
|
+
const lastMenuItem = menuItems[menuItems.length - 1];
|
|
117
|
+
lastMenuItem.focus();
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
__decorate([
|
|
122
|
+
attr
|
|
123
|
+
], MenuButton.prototype, "appearance", void 0);
|
|
124
|
+
__decorate([
|
|
125
|
+
attr({ mode: 'boolean' })
|
|
126
|
+
], MenuButton.prototype, "disabled", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
attr({ attribute: 'content-hidden', mode: 'boolean' })
|
|
129
|
+
], MenuButton.prototype, "contentHidden", void 0);
|
|
130
|
+
__decorate([
|
|
131
|
+
attr({ mode: 'boolean' })
|
|
132
|
+
], MenuButton.prototype, "open", void 0);
|
|
133
|
+
__decorate([
|
|
134
|
+
attr({ attribute: 'position' })
|
|
135
|
+
], MenuButton.prototype, "position", void 0);
|
|
136
|
+
__decorate([
|
|
137
|
+
observable
|
|
138
|
+
], MenuButton.prototype, "toggleButton", void 0);
|
|
139
|
+
__decorate([
|
|
140
|
+
observable
|
|
141
|
+
], MenuButton.prototype, "region", void 0);
|
|
142
|
+
__decorate([
|
|
143
|
+
observable
|
|
144
|
+
], MenuButton.prototype, "slottedMenus", void 0);
|
|
145
|
+
const nimbleMenuButton = MenuButton.compose({
|
|
146
|
+
baseName: 'menu-button',
|
|
147
|
+
template,
|
|
148
|
+
styles,
|
|
149
|
+
shadowOptions: {
|
|
150
|
+
delegatesFocus: true
|
|
151
|
+
}
|
|
152
|
+
});
|
|
153
|
+
DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
|
|
154
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-button/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { css } from '@microsoft/fast-element';
|
|
2
|
+
import { display } from '@microsoft/fast-foundation';
|
|
3
|
+
import { controlHeight, smallPadding } from '../theme-provider/design-tokens';
|
|
4
|
+
export const styles = css `
|
|
5
|
+
${display('inline-block')}
|
|
6
|
+
|
|
7
|
+
:host {
|
|
8
|
+
height: ${controlHeight};
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
[part='button'] {
|
|
12
|
+
width: 100%;
|
|
13
|
+
height: 100%;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
[part='start'] {
|
|
17
|
+
display: contents;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
[part='end'] {
|
|
21
|
+
display: contents;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
slot[name='menu']::slotted(*) {
|
|
25
|
+
margin-top: ${smallPadding};
|
|
26
|
+
margin-bottom: ${smallPadding};
|
|
27
|
+
}
|
|
28
|
+
`;
|
|
29
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE9E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;kBAGX,aAAa;;;;;;;;;;;;;;;;;sBAiBT,YAAY;yBACT,YAAY;;CAEpC,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { elements, html, ref, slotted, when } from '@microsoft/fast-element';
|
|
2
|
+
// prettier-ignore
|
|
3
|
+
export const template = html `
|
|
4
|
+
<template
|
|
5
|
+
?open="${x => x.open}"
|
|
6
|
+
@focusout="${(x, c) => x.focusoutHandler(c.event)}"
|
|
7
|
+
>
|
|
8
|
+
<nimble-toggle-button
|
|
9
|
+
part="button"
|
|
10
|
+
appearance="${x => x.appearance}"
|
|
11
|
+
content-hidden="${x => x.contentHidden}"
|
|
12
|
+
?checked="${x => x.open}"
|
|
13
|
+
?disabled="${x => x.disabled}"
|
|
14
|
+
aria-haspopup="true"
|
|
15
|
+
aria-expanded="${x => x.open}"
|
|
16
|
+
@change="${(x, c) => x.toggleButtonCheckedChangeHandler(c.event)}"
|
|
17
|
+
@keydown="${(x, c) => x.toggleButtonKeyDownHandler(c.event)}"
|
|
18
|
+
${ref('toggleButton')}
|
|
19
|
+
>
|
|
20
|
+
<span slot="start" part="start">
|
|
21
|
+
<slot name="start"></slot>
|
|
22
|
+
</span>
|
|
23
|
+
<slot></slot>
|
|
24
|
+
<span slot="end" part="end">
|
|
25
|
+
<slot name="end"></slot>
|
|
26
|
+
</span>
|
|
27
|
+
</nimble-toggle-button>
|
|
28
|
+
${when(x => x.open, html `
|
|
29
|
+
<nimble-anchored-region
|
|
30
|
+
fixed-placement="true"
|
|
31
|
+
auto-update-mode="auto"
|
|
32
|
+
horizontal-inset="true"
|
|
33
|
+
horizontal-positioning-mode="dynamic"
|
|
34
|
+
vertical-positioning-mode="${x => (x.position === 'auto' ? 'dynamic' : 'locktodefault')}"
|
|
35
|
+
vertical-default-position="${x => (x.position === 'above' ? 'top' : 'bottom')}"
|
|
36
|
+
@loaded="${x => x.regionLoadedHandler()}"
|
|
37
|
+
@change="${x => x.menuChangeHandler()}"
|
|
38
|
+
@keydown="${(x, c) => x.menuKeyDownHandler(c.event)}"
|
|
39
|
+
${ref('region')}
|
|
40
|
+
>
|
|
41
|
+
<span part="menu">
|
|
42
|
+
<slot name="menu" ${slotted({ property: 'slottedMenus', filter: elements('[role=menu]') })}></slot>
|
|
43
|
+
</span>
|
|
44
|
+
</nimble-anchored-region>
|
|
45
|
+
`)}
|
|
46
|
+
</template>
|
|
47
|
+
`;
|
|
48
|
+
//# sourceMappingURL=template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/menu-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG7E,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAY;;iBAEvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;;;0BAI7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;8BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;wBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;6BAEX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,KAAK,CAAC;wBACpD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAsB,CAAC;cAC1E,GAAG,CAAC,cAAc,CAAC;;;;;;;;;;UAUvB,IAAI,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAY;;;;;;6CAMqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;6CAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;2BAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;2BAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE;4BACzB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAClE,GAAG,CAAC,QAAQ,CAAC;;;wCAGS,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;;;SAGrG,CACJ;;CAEJ,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Types of menu button appearance.
|
|
3
|
+
* @public
|
|
4
|
+
*/
|
|
5
|
+
export type { ButtonAppearanceAttribute } from '../patterns/button/types';
|
|
6
|
+
export { ButtonAppearance } from '../patterns/button/types';
|
|
7
|
+
/**
|
|
8
|
+
* The options of where to position the menu relative to the menu button.
|
|
9
|
+
*/
|
|
10
|
+
export declare const MenuButtonPosition: {
|
|
11
|
+
readonly above: "above";
|
|
12
|
+
readonly below: "below";
|
|
13
|
+
readonly auto: "auto";
|
|
14
|
+
};
|
|
15
|
+
export declare type MenuButtonPosition = typeof MenuButtonPosition[keyof typeof MenuButtonPosition];
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { ButtonAppearance } from '../patterns/button/types';
|
|
2
|
+
/**
|
|
3
|
+
* The options of where to position the menu relative to the menu button.
|
|
4
|
+
*/
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
6
|
+
export const MenuButtonPosition = {
|
|
7
|
+
above: 'above',
|
|
8
|
+
below: 'below',
|
|
9
|
+
auto: 'auto'
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/menu-button/types.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;GAEG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACN,CAAC"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
|
+
import { ButtonAppearance } from '../button/types';
|
|
3
|
+
import type { ToggleButton } from '../toggle-button';
|
|
4
|
+
import { MenuButtonPosition } from './types';
|
|
5
|
+
import type { IButton } from '../patterns/button/types';
|
|
6
|
+
import type { AnchoredRegion } from '../anchored-region';
|
|
7
|
+
declare global {
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'nimble-menu-button': MenuButton;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* A nimble-styled menu button control.
|
|
14
|
+
*/
|
|
15
|
+
export declare class MenuButton extends FoundationElement implements IButton {
|
|
16
|
+
appearance: ButtonAppearance;
|
|
17
|
+
disabled: boolean;
|
|
18
|
+
contentHidden: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Specifies whether or not the menu is open.
|
|
21
|
+
*/
|
|
22
|
+
open: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Configures where the menu should be placed relative to the button that opens the menu.
|
|
25
|
+
*/
|
|
26
|
+
position: MenuButtonPosition;
|
|
27
|
+
/** @internal */
|
|
28
|
+
readonly toggleButton: ToggleButton | undefined;
|
|
29
|
+
/** @internal */
|
|
30
|
+
readonly region: AnchoredRegion | undefined;
|
|
31
|
+
/** @internal */
|
|
32
|
+
readonly slottedMenus: HTMLElement[] | undefined;
|
|
33
|
+
/**
|
|
34
|
+
* Used to maintain the internal state of whether the last menu item should be focused instead
|
|
35
|
+
* of the first menu item the next time the menu is opened.
|
|
36
|
+
*/
|
|
37
|
+
private focusLastItemWhenOpened;
|
|
38
|
+
toggleButtonChanged(_prev: ToggleButton | undefined, _next: ToggleButton | undefined): void;
|
|
39
|
+
regionChanged(_prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void;
|
|
40
|
+
openChanged(_prev: boolean | undefined, _next: boolean): void;
|
|
41
|
+
regionLoadedHandler(): void;
|
|
42
|
+
focusoutHandler(e: FocusEvent): boolean;
|
|
43
|
+
toggleButtonCheckedChangeHandler(e: Event): boolean;
|
|
44
|
+
toggleButtonKeyDownHandler(e: KeyboardEvent): boolean;
|
|
45
|
+
menuChangeHandler(): void;
|
|
46
|
+
menuKeyDownHandler(e: KeyboardEvent): boolean;
|
|
47
|
+
private get menu();
|
|
48
|
+
private focusMenu;
|
|
49
|
+
private focusLastMenuItem;
|
|
50
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Types of menu button appearance.
|
|
3
|
+
* @public
|
|
4
|
+
*/
|
|
5
|
+
export type { ButtonAppearanceAttribute } from '../patterns/button/types';
|
|
6
|
+
export { ButtonAppearance } from '../patterns/button/types';
|
|
7
|
+
/**
|
|
8
|
+
* The options of where to position the menu relative to the menu button.
|
|
9
|
+
*/
|
|
10
|
+
export declare const MenuButtonPosition: {
|
|
11
|
+
readonly above: "above";
|
|
12
|
+
readonly below: "below";
|
|
13
|
+
readonly auto: "auto";
|
|
14
|
+
};
|
|
15
|
+
export declare type MenuButtonPosition = typeof MenuButtonPosition[keyof typeof MenuButtonPosition];
|
|
@@ -43,4 +43,4 @@ export declare const errorTextFont: CSSDesignToken<string>, errorTextFontColor:
|
|
|
43
43
|
export declare const groupHeaderTextTransform: CSSDesignToken<string>;
|
|
44
44
|
export declare const smallDelay: CSSDesignToken<string>;
|
|
45
45
|
export declare const mediumDelay: CSSDesignToken<string>;
|
|
46
|
-
export declare const largeDelay: CSSDesignToken<
|
|
46
|
+
export declare const largeDelay: CSSDesignToken<string>;
|
|
@@ -43,6 +43,7 @@ export const styles = css `
|
|
|
43
43
|
--ni-private-hover-bottom-border-width: 2px;
|
|
44
44
|
border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
|
|
45
45
|
border-bottom-width: var(--ni-private-bottom-border-width);
|
|
46
|
+
gap: calc(${standardPadding} / 2);
|
|
46
47
|
padding-bottom: calc(
|
|
47
48
|
var(--ni-private-hover-bottom-border-width) -
|
|
48
49
|
var(--ni-private-bottom-border-width)
|
|
@@ -86,12 +87,40 @@ export const styles = css `
|
|
|
86
87
|
border-bottom-color: ${borderHoverColor};
|
|
87
88
|
}
|
|
88
89
|
|
|
90
|
+
:host([appearance='frameless'].clear-inline-padding) .root {
|
|
91
|
+
padding-left: 0px;
|
|
92
|
+
padding-right: 0px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.root::before {
|
|
96
|
+
${ /* Empty string causes alignment issue */''}
|
|
97
|
+
content: ' ';
|
|
98
|
+
color: transparent;
|
|
99
|
+
width: 0px;
|
|
100
|
+
user-select: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
:host([appearance='frameless'].clear-inline-padding) .root::before {
|
|
104
|
+
display: none;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.root::after {
|
|
108
|
+
${ /* Empty string causes alignment issue */''}
|
|
109
|
+
content: ' ';
|
|
110
|
+
color: transparent;
|
|
111
|
+
width: 0px;
|
|
112
|
+
user-select: none;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
:host([appearance='frameless'].clear-inline-padding) .root::after {
|
|
116
|
+
display: none;
|
|
117
|
+
}
|
|
118
|
+
|
|
89
119
|
[part='start'] {
|
|
90
120
|
display: contents;
|
|
91
121
|
}
|
|
92
122
|
|
|
93
123
|
slot[name='start']::slotted(*) {
|
|
94
|
-
margin-left: calc(${standardPadding} / 2);
|
|
95
124
|
flex: none;
|
|
96
125
|
}
|
|
97
126
|
|
|
@@ -100,8 +129,7 @@ export const styles = css `
|
|
|
100
129
|
font: inherit;
|
|
101
130
|
background: transparent;
|
|
102
131
|
color: inherit;
|
|
103
|
-
padding
|
|
104
|
-
padding-bottom: 0px;
|
|
132
|
+
padding: 0px;
|
|
105
133
|
height: calc(
|
|
106
134
|
${controlHeight} - ${borderWidth} -
|
|
107
135
|
var(--ni-private-hover-bottom-border-width)
|
|
@@ -109,8 +137,6 @@ export const styles = css `
|
|
|
109
137
|
width: 100%;
|
|
110
138
|
margin-top: auto;
|
|
111
139
|
margin-bottom: auto;
|
|
112
|
-
padding-left: calc(${standardPadding} / 2);
|
|
113
|
-
padding-right: calc(${standardPadding} / 2);
|
|
114
140
|
border: none;
|
|
115
141
|
text-overflow: ellipsis;
|
|
116
142
|
}
|
|
@@ -154,7 +180,6 @@ export const styles = css `
|
|
|
154
180
|
:host(.invalid) .error-content svg {
|
|
155
181
|
height: ${iconSize};
|
|
156
182
|
width: ${iconSize};
|
|
157
|
-
padding-right: 8px;
|
|
158
183
|
flex: none;
|
|
159
184
|
}
|
|
160
185
|
|
|
@@ -195,7 +220,6 @@ export const styles = css `
|
|
|
195
220
|
}
|
|
196
221
|
|
|
197
222
|
slot[name='actions']::slotted(*) {
|
|
198
|
-
margin-right: 8px;
|
|
199
223
|
${controlHeight.cssCustomProperty}: 24px;
|
|
200
224
|
}
|
|
201
225
|
`.withBehaviors(appearanceBehavior(TextFieldAppearance.Underline, css `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,QAAQ,EACR,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;;;;iBAIpC,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;oCAUV,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,QAAQ,EACR,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;;;;iBAIpC,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;oCAUV,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;oBAElC,eAAe;;;;;;;;;;;;;;+BAcJ,SAAS;;;;6BAIX,qBAAqB;;;;6BAIrB,qBAAqB;;;;;;;+BAOnB,gBAAgB;;;;;;;;;;;;+BAYhB,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;;;;;;;;;UAY5C,CAAA,yCAA0C,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;cA0BxC,aAAa,MAAM,WAAW;;;;;;;;;;;;;;;;;;iBAkB3B,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;;;;;;;kBAgBpB,QAAQ;iBACT,QAAQ;;;;;gBAKT,SAAS;;;;gBAIT,qBAAqB;;;;;;;;;gBASrB,aAAa;iBACZ,SAAS;;;eAGX,aAAa;;;;;;;;;;;iBAWX,qBAAqB;;;;;;;;UAQ5B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACP,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;;;qCAIP,qBAAqB;;;;;;SAMjD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE0B,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;;;;;;;;;;;;yCAwBH,qBAAqB;;;;;yCAKrB,qBAAqB;;;;;;;;;;SAUrD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGiB,WAAW;;;;;4BAKf,aAAa,MAAM,WAAW;;SAEjD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;SAUnC,CACA,EACD,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}
|
|
@@ -43,4 +43,4 @@ export declare const errorTextFont: CSSDesignToken<string>, errorTextFontColor:
|
|
|
43
43
|
export declare const groupHeaderTextTransform: CSSDesignToken<string>;
|
|
44
44
|
export declare const smallDelay: CSSDesignToken<string>;
|
|
45
45
|
export declare const mediumDelay: CSSDesignToken<string>;
|
|
46
|
-
export declare const largeDelay: CSSDesignToken<
|
|
46
|
+
export declare const largeDelay: CSSDesignToken<string>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DesignToken } from '@microsoft/fast-foundation';
|
|
2
2
|
import hexRgb from 'hex-rgb';
|
|
3
|
-
import { Black7, Black91, Black85, Black15, Black30, Black75, Black80, White, ForestGreen, DigitalGreenLight, Fail100LightUi, SmallDelay, MediumDelay, Fail100DarkUi, Warning100LightUi, Warning100DarkUi, Pass100LightUi, Pass100DarkUi, BodyFamily, BodySize, BodyWeight, ControlLabel1Family, ControlLabel1Size, ControlLabel1Weight, GroupLabel1Family, GroupLabel1Size, GroupLabel1Weight, Headline2Size, Headline2Family, Headline2Weight, Headline1Size, Headline1Family, Headline1Weight, Title3Size, Title3Family, Title3Weight, Title2Size, Title2Family, Title2Weight, Title1Size, Title1Family, Title1Weight, Subtitle2Size, Subtitle2Family, Subtitle2Weight, Subtitle1Size, Subtitle1Family, Subtitle1Weight, LinkLightUiSize, LinkLightUiFamily, LinkLightUiWeight, PlaceholderSize, PlaceholderFamily, PlaceholderWeight, BodyEmphasizedSize, BodyEmphasizedFamily, BodyEmphasizedWeight, ButtonLabel1Size, ButtonLabel1Family, ButtonLabel1Weight, TooltipCaptionSize, TooltipCaptionFamily, TooltipCaptionWeight, ErrorLightUiSize, ErrorLightUiFamily, ErrorLightUiWeight, Headline2LineHeight, Headline1LineHeight, Title3LineHeight, Title2LineHeight, Title1LineHeight, Subtitle2LineHeight, Subtitle1LineHeight, LinkLineHeight, PlaceholderLineHeight, BodyEmphasizedLineHeight, BodyLineHeight, GroupLabel1LineHeight, ControlLabel1LineHeight, ButtonLabel1LineHeight, TooltipCaptionLineHeight } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
|
|
3
|
+
import { Black7, Black91, Black85, Black15, Black30, Black75, Black80, White, ForestGreen, DigitalGreenLight, Fail100LightUi, SmallDelay, MediumDelay, LargeDelay, Fail100DarkUi, Warning100LightUi, Warning100DarkUi, Pass100LightUi, Pass100DarkUi, BodyFamily, BodySize, BodyWeight, ControlLabel1Family, ControlLabel1Size, ControlLabel1Weight, GroupLabel1Family, GroupLabel1Size, GroupLabel1Weight, Headline2Size, Headline2Family, Headline2Weight, Headline1Size, Headline1Family, Headline1Weight, Title3Size, Title3Family, Title3Weight, Title2Size, Title2Family, Title2Weight, Title1Size, Title1Family, Title1Weight, Subtitle2Size, Subtitle2Family, Subtitle2Weight, Subtitle1Size, Subtitle1Family, Subtitle1Weight, LinkLightUiSize, LinkLightUiFamily, LinkLightUiWeight, PlaceholderSize, PlaceholderFamily, PlaceholderWeight, BodyEmphasizedSize, BodyEmphasizedFamily, BodyEmphasizedWeight, ButtonLabel1Size, ButtonLabel1Family, ButtonLabel1Weight, TooltipCaptionSize, TooltipCaptionFamily, TooltipCaptionWeight, ErrorLightUiSize, ErrorLightUiFamily, ErrorLightUiWeight, Headline2LineHeight, Headline1LineHeight, Title3LineHeight, Title2LineHeight, Title1LineHeight, Subtitle2LineHeight, Subtitle1LineHeight, LinkLineHeight, PlaceholderLineHeight, BodyEmphasizedLineHeight, BodyLineHeight, GroupLabel1LineHeight, ControlLabel1LineHeight, ButtonLabel1LineHeight, TooltipCaptionLineHeight } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
|
|
4
4
|
import { Theme } from './types';
|
|
5
5
|
import { tokenNames, styleNameFromTokenName } from './design-token-names';
|
|
6
6
|
import { theme } from '.';
|
|
@@ -55,7 +55,7 @@ export const groupHeaderTextTransform = DesignToken.create(styleNameFromTokenNam
|
|
|
55
55
|
// Animation Tokens
|
|
56
56
|
export const smallDelay = DesignToken.create(styleNameFromTokenName(tokenNames.smallDelay)).withDefault(SmallDelay);
|
|
57
57
|
export const mediumDelay = DesignToken.create(styleNameFromTokenName(tokenNames.mediumDelay)).withDefault(MediumDelay);
|
|
58
|
-
export const largeDelay = DesignToken.create(styleNameFromTokenName(tokenNames.largeDelay)).withDefault(
|
|
58
|
+
export const largeDelay = DesignToken.create(styleNameFromTokenName(tokenNames.largeDelay)).withDefault(LargeDelay);
|
|
59
59
|
// Private helpers functions
|
|
60
60
|
function hexToRgbPartial(hexValue) {
|
|
61
61
|
const { red, green, blue } = hexRgb(hexValue);
|