@ni/nimble-components 31.1.1 → 31.1.3
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 +29 -67
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +4385 -4405
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/combobox/testing/combobox.pageobject.js +3 -3
- package/dist/esm/combobox/testing/combobox.pageobject.js.map +1 -1
- package/dist/esm/dialog/styles.js +6 -22
- package/dist/esm/dialog/styles.js.map +1 -1
- package/dist/esm/drawer/styles.js +7 -24
- package/dist/esm/drawer/styles.js.map +1 -1
- package/dist/esm/menu-button/testing/menu-button.pageobject.js +2 -2
- package/dist/esm/menu-button/testing/menu-button.pageobject.js.map +1 -1
- package/dist/esm/theme-provider/design-tokens.js +4 -5
- package/dist/esm/theme-provider/design-tokens.js.map +1 -1
- package/dist/esm/utilities/testing/component.d.ts +1 -10
- package/dist/esm/utilities/testing/component.js +7 -23
- package/dist/esm/utilities/testing/component.js.map +1 -1
- package/package.json +1 -1
- package/dist/esm/theme-provider/design-tokens-static.d.ts +0 -10
- package/dist/esm/theme-provider/design-tokens-static.js +0 -13
- package/dist/esm/theme-provider/design-tokens-static.js.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { keyEnter, keyArrowDown, keyArrowUp } from '@microsoft/fast-web-utilities';
|
|
2
2
|
import { listOptionTag } from '../../list-option';
|
|
3
3
|
import { waitForUpdatesAsync } from '../../testing/async-helpers';
|
|
4
|
-
import {
|
|
4
|
+
import { waitForEvent, waitAnimationFrame } from '../../utilities/testing/component';
|
|
5
5
|
/**
|
|
6
6
|
* Page object for the `nimble-combobox` component to provide consistent ways
|
|
7
7
|
* of querying and interacting with the component during tests.
|
|
@@ -9,7 +9,7 @@ import { createEventListener, waitAnimationFrame } from '../../utilities/testing
|
|
|
9
9
|
export class ComboboxPageObject {
|
|
10
10
|
constructor(comboboxElement) {
|
|
11
11
|
this.comboboxElement = comboboxElement;
|
|
12
|
-
this.regionLoadedListener =
|
|
12
|
+
this.regionLoadedListener = waitForEvent(this.comboboxElement, 'loaded');
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
15
|
* Gets the selectable options in the drop-down. Does not include options that are disabled or filtered out.
|
|
@@ -166,7 +166,7 @@ export class ComboboxPageObject {
|
|
|
166
166
|
return (this.comboboxElement.shadowRoot?.querySelector('.no-results-label') !== null);
|
|
167
167
|
}
|
|
168
168
|
async waitForAnchoredRegionLoaded() {
|
|
169
|
-
await this.regionLoadedListener
|
|
169
|
+
await this.regionLoadedListener;
|
|
170
170
|
}
|
|
171
171
|
}
|
|
172
172
|
//# sourceMappingURL=combobox.pageobject.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.pageobject.js","sourceRoot":"","sources":["../../../../src/combobox/testing/combobox.pageobject.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EACR,YAAY,EACZ,UAAU,EACb,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EACH,
|
|
1
|
+
{"version":3,"file":"combobox.pageobject.js","sourceRoot":"","sources":["../../../../src/combobox/testing/combobox.pageobject.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n keyEnter,\n keyArrowDown,\n keyArrowUp\n} from '@microsoft/fast-web-utilities';\nimport type { Combobox } from '..';\nimport { listOptionTag } from '../../list-option';\nimport { waitForUpdatesAsync } from '../../testing/async-helpers';\nimport {\n waitForEvent,\n waitAnimationFrame\n} from '../../utilities/testing/component';\n\n/**\n * Page object for the `nimble-combobox` component to provide consistent ways\n * of querying and interacting with the component during tests.\n */\nexport class ComboboxPageObject {\n private readonly regionLoadedListener = waitForEvent(\n this.comboboxElement,\n 'loaded'\n );\n\n public constructor(protected readonly comboboxElement: Combobox) {}\n\n /**\n * Gets the selectable options in the drop-down. Does not include options that are disabled or filtered out.\n */\n public getFilteredOptions(): string[] {\n return this.comboboxElement.filteredOptions.map(x => x.text);\n }\n\n /**\n * Sets the input text and commits the value by pressing Enter. Will emit a 'change' event.\n */\n public async commitValue(text: string): Promise<void> {\n await this.waitForAnchoredRegionLoaded();\n this.setInputText(text);\n this.pressEnterKey();\n }\n\n /**\n * @internal\n *\n * The Selection API currently isn't supported properly or consistently in shadow DOM,\n * so unfortunately our delete API has to be passed the post-deletion text.\n */\n public setInputText(text: string, asDelete = false): void {\n this.comboboxElement.control.value = text;\n const inputEvent = new InputEvent('input', {\n data: text,\n inputType: asDelete ? 'deleteContentForward' : 'insertText'\n });\n this.comboboxElement.control.dispatchEvent(inputEvent);\n }\n\n /**\n * @internal\n *\n * Either opens or closes the dropdown depending on its current state\n */\n public clickCombobox(): void {\n this.comboboxElement.click();\n }\n\n /**\n * @internal\n */\n public async clickAndWaitForOpen(): Promise<void> {\n this.clickCombobox();\n await this.waitForAnchoredRegionLoaded();\n await waitForUpdatesAsync();\n await waitAnimationFrame(); // necessary because scrolling is queued with requestAnimationFrame\n }\n\n /**\n * @internal\n *\n * Either opens or closes the dropdown depending on its current state\n */\n public clickDropdownButton(): void {\n this.comboboxElement.dropdownButton!.control.click();\n }\n\n /**\n * @internal\n */\n public async clickDropdownButtonAndWaitForOpen(): Promise<void> {\n this.clickDropdownButton();\n await this.waitForAnchoredRegionLoaded();\n await waitAnimationFrame(); // necessary because scrolling is queued with requestAnimationFrame\n }\n\n /**\n * @internal\n */\n public isDropdownButtonChecked(): boolean {\n return this.comboboxElement.dropdownButton!.checked;\n }\n\n /**\n * @internal\n */\n public isDropdownButtonDisabled(): boolean {\n return this.comboboxElement.dropdownButton!.disabled;\n }\n\n /**\n * @internal\n *\n * Either opens or closes the dropdown depending on its current state\n */\n public clickInput(): void {\n this.comboboxElement.control.click();\n }\n\n /**\n * @internal\n */\n public getInputTitle(): string | null {\n return this.comboboxElement.control.getAttribute('title');\n }\n\n /**\n * @internal\n */\n public getInputAriaLabel(): string | null {\n return this.comboboxElement.control.getAttribute('aria-label');\n }\n\n /**\n * @internal\n */\n public async mouseoverInput(): Promise<void> {\n this.comboboxElement.control.dispatchEvent(new MouseEvent('mouseover'));\n await waitForUpdatesAsync();\n }\n\n /**\n * @internal\n */\n public async mouseoutInput(): Promise<void> {\n this.comboboxElement.control.dispatchEvent(new MouseEvent('mouseout'));\n await waitForUpdatesAsync();\n }\n\n /**\n * @internal\n */\n public async prependOption(value: string, label: string): Promise<void> {\n this.comboboxElement.insertAdjacentHTML(\n 'afterbegin',\n `<${listOptionTag} value=\"${value}\">${label}</${listOptionTag}>`\n );\n await waitForUpdatesAsync();\n }\n\n /**\n * @internal\n */\n public async clickAway(): Promise<void> {\n this.comboboxElement.dispatchEvent(new Event('focusout'));\n await waitForUpdatesAsync();\n }\n\n /**\n * @internal\n */\n public pressEnterKey(): void {\n this.comboboxElement.dispatchEvent(\n new KeyboardEvent('keydown', { key: keyEnter })\n );\n }\n\n /**\n * @internal\n */\n public pressArrowDownKey(): void {\n this.comboboxElement.dispatchEvent(\n new KeyboardEvent('keydown', { key: keyArrowDown })\n );\n }\n\n /**\n * @internal\n */\n public pressArrowUpKey(): void {\n this.comboboxElement.dispatchEvent(\n new KeyboardEvent('keydown', { key: keyArrowUp })\n );\n }\n\n /**\n * @internal\n */\n public hideAllOptions(): void {\n this.comboboxElement.options.forEach(o => {\n o.hidden = true;\n });\n this.comboboxElement.filterOptions();\n }\n\n /**\n * @internal\n */\n public isNoResultsLabelVisible(): boolean {\n return (\n this.comboboxElement.shadowRoot?.querySelector(\n '.no-results-label'\n ) !== null\n );\n }\n\n private async waitForAnchoredRegionLoaded(): Promise<void> {\n await this.regionLoadedListener;\n }\n}\n"]}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '../utilities/style/display';
|
|
3
|
-
import { applicationBackgroundColor, standardPadding, actionRgbPartialColor, bodyFont, bodyFontColor, titlePlus1Font, titlePlus1FontColor, smallPadding, subtitleFont, subtitleFontColor, elevation3BoxShadow, dialogSmallWidth, dialogSmallHeight, dialogSmallMaxHeight, borderHoverColor } from '../theme-provider/design-tokens';
|
|
4
|
-
import { modalBackdropColorThemeColorStatic, modalBackdropColorThemeDarkStatic, modalBackdropColorThemeLightStatic } from '../theme-provider/design-tokens-static';
|
|
5
|
-
import { Theme } from '../theme-provider/types';
|
|
6
|
-
import { themeBehavior } from '../utilities/style/theme';
|
|
3
|
+
import { applicationBackgroundColor, standardPadding, actionRgbPartialColor, bodyFont, bodyFontColor, titlePlus1Font, titlePlus1FontColor, smallPadding, subtitleFont, subtitleFontColor, elevation3BoxShadow, dialogSmallWidth, dialogSmallHeight, dialogSmallMaxHeight, borderHoverColor, modalBackdropColor } from '../theme-provider/design-tokens';
|
|
7
4
|
import { accessiblyHidden } from '../utilities/style/accessibly-hidden';
|
|
8
5
|
import { focusVisible } from '../utilities/style/focus';
|
|
9
6
|
export const styles = css `
|
|
@@ -28,6 +25,10 @@ export const styles = css `
|
|
|
28
25
|
outline: 2px solid ${borderHoverColor};
|
|
29
26
|
}
|
|
30
27
|
|
|
28
|
+
dialog::backdrop {
|
|
29
|
+
background: ${modalBackdropColor};
|
|
30
|
+
}
|
|
31
|
+
|
|
31
32
|
header {
|
|
32
33
|
min-height: 48px;
|
|
33
34
|
padding: 24px 24px 0px 24px;
|
|
@@ -93,22 +94,5 @@ export const styles = css `
|
|
|
93
94
|
:host([footer-hidden]) footer {
|
|
94
95
|
display: none;
|
|
95
96
|
}
|
|
96
|
-
|
|
97
|
-
/*
|
|
98
|
-
* We cannot use the modalBackdropColor token directly because the backdrop
|
|
99
|
-
* element is not a descendant of the nimble-theme-provider element.
|
|
100
|
-
*/
|
|
101
|
-
themeBehavior(Theme.light, css `
|
|
102
|
-
dialog::backdrop {
|
|
103
|
-
background: ${modalBackdropColorThemeLightStatic};
|
|
104
|
-
}
|
|
105
|
-
`), themeBehavior(Theme.dark, css `
|
|
106
|
-
dialog::backdrop {
|
|
107
|
-
background: ${modalBackdropColorThemeDarkStatic};
|
|
108
|
-
}
|
|
109
|
-
`), themeBehavior(Theme.color, css `
|
|
110
|
-
dialog::backdrop {
|
|
111
|
-
background: ${modalBackdropColorThemeColorStatic};
|
|
112
|
-
}
|
|
113
|
-
`));
|
|
97
|
+
`;
|
|
114
98
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/dialog/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,eAAe,EACf,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/dialog/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,eAAe,EACf,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,EACrB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;4BAIO,0BAA0B;;sBAEhC,mBAAmB;;iBAExB,gBAAgB;kBACf,iBAAiB;sBACb,oBAAoB;;;;;;;YAO9B,YAAY;6BACK,gBAAgB;;;;sBAIvB,kBAAkB;;;;;;;;;eASzB,YAAY;;;;UAIjB,gBAAgB;;;;gBAIV,cAAc;iBACb,mBAAmB;;;;;;;gBAOpB,YAAY;iBACX,iBAAiB;;;;;;gBAMlB,QAAQ;iBACP,aAAa;;;eAGf,eAAe;;UAEpB;AACE;;;;;GAKG;AACH,EACJ;;;;;;qCAM6B,qBAAqB;;;;;eAK3C,eAAe;;;;;;;;;;;;CAY7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n applicationBackgroundColor,\n standardPadding,\n actionRgbPartialColor,\n bodyFont,\n bodyFontColor,\n titlePlus1Font,\n titlePlus1FontColor,\n smallPadding,\n subtitleFont,\n subtitleFontColor,\n elevation3BoxShadow,\n dialogSmallWidth,\n dialogSmallHeight,\n dialogSmallMaxHeight,\n borderHoverColor,\n modalBackdropColor\n} from '../theme-provider/design-tokens';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n ${display('grid')}\n\n dialog {\n flex-direction: column;\n background-color: ${applicationBackgroundColor};\n border: none;\n box-shadow: ${elevation3BoxShadow};\n padding: 0px;\n width: ${dialogSmallWidth};\n height: ${dialogSmallHeight};\n max-height: ${dialogSmallMaxHeight};\n }\n\n dialog[open] {\n display: flex;\n }\n\n dialog${focusVisible} {\n outline: 2px solid ${borderHoverColor};\n }\n\n dialog::backdrop {\n background: ${modalBackdropColor};\n }\n\n header {\n min-height: 48px;\n padding: 24px 24px 0px 24px;\n flex: none;\n display: flex;\n flex-direction: column;\n gap: ${smallPadding};\n }\n\n :host([header-hidden]) header {\n ${accessiblyHidden}\n }\n\n .title {\n font: ${titlePlus1Font};\n color: ${titlePlus1FontColor};\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .subtitle {\n font: ${subtitleFont};\n color: ${subtitleFontColor};\n }\n\n section {\n flex: auto;\n overflow-y: auto;\n font: ${bodyFont};\n color: ${bodyFontColor};\n display: flex;\n flex-direction: column;\n gap: ${standardPadding};\n\n ${\n /**\n * Use padding on all sides except the top because the padding is within\n * the scrollable area. The whole scrollable area, including the top of\n * the scrollbar, should be 24px away from the header, so use a margin\n * instead of padding for the top.\n */\n ''\n }\n padding: 0px 24px 24px 24px;\n margin-top: 24px;\n }\n\n footer {\n border-top: 2px solid rgba(${actionRgbPartialColor}, 0.1);\n padding: 24px;\n flex: none;\n display: flex;\n justify-content: flex-end;\n gap: ${standardPadding};\n }\n\n footer.empty {\n padding: 0px;\n height: 72px;\n border-top: none;\n }\n\n :host([footer-hidden]) footer {\n display: none;\n }\n`;\n"]}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '../utilities/style/display';
|
|
3
|
-
import { applicationBackgroundColor, bodyFont, bodyFontColor, standardPadding, titlePlus1Font, drawerWidth, largeDelay, actionRgbPartialColor } from '../theme-provider/design-tokens';
|
|
4
|
-
import { modalBackdropColorThemeColorStatic, modalBackdropColorThemeDarkStatic, modalBackdropColorThemeLightStatic, largeDelayStatic } from '../theme-provider/design-tokens-static';
|
|
5
|
-
import { Theme } from '../theme-provider/types';
|
|
6
|
-
import { themeBehavior } from '../utilities/style/theme';
|
|
3
|
+
import { applicationBackgroundColor, bodyFont, bodyFontColor, standardPadding, titlePlus1Font, drawerWidth, largeDelay, actionRgbPartialColor, modalBackdropColor } from '../theme-provider/design-tokens';
|
|
7
4
|
export const styles = css `
|
|
8
5
|
${display('block')}
|
|
9
6
|
|
|
@@ -42,9 +39,12 @@ export const styles = css `
|
|
|
42
39
|
}
|
|
43
40
|
}
|
|
44
41
|
|
|
42
|
+
dialog::backdrop {
|
|
43
|
+
background: ${modalBackdropColor};
|
|
44
|
+
}
|
|
45
|
+
|
|
45
46
|
dialog.animating::backdrop {
|
|
46
|
-
animation: ni-private-drawer-fade-in-keyframes ${
|
|
47
|
-
ease-in;
|
|
47
|
+
animation: ni-private-drawer-fade-in-keyframes ${largeDelay} ease-in;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
dialog.closing::backdrop {
|
|
@@ -137,22 +137,5 @@ export const styles = css `
|
|
|
137
137
|
justify-content: flex-end;
|
|
138
138
|
border-top: 2px solid rgba(${actionRgbPartialColor}, 0.1);
|
|
139
139
|
}
|
|
140
|
-
|
|
141
|
-
/*
|
|
142
|
-
* We cannot use the modalBackdropColor token directly because the backdrop
|
|
143
|
-
* element is not a descendant of the nimble-theme-provider element.
|
|
144
|
-
*/
|
|
145
|
-
themeBehavior(Theme.light, css `
|
|
146
|
-
dialog::backdrop {
|
|
147
|
-
background: ${modalBackdropColorThemeLightStatic};
|
|
148
|
-
}
|
|
149
|
-
`), themeBehavior(Theme.dark, css `
|
|
150
|
-
dialog::backdrop {
|
|
151
|
-
background: ${modalBackdropColorThemeDarkStatic};
|
|
152
|
-
}
|
|
153
|
-
`), themeBehavior(Theme.color, css `
|
|
154
|
-
dialog::backdrop {
|
|
155
|
-
background: ${modalBackdropColorThemeColorStatic};
|
|
156
|
-
}
|
|
157
|
-
`));
|
|
140
|
+
`;
|
|
158
141
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,eAAe,EACf,cAAc,EACd,WAAW,EACX,UAAU,EACV,qBAAqB,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,eAAe,EACf,cAAc,EACd,WAAW,EACX,UAAU,EACV,qBAAqB,EACrB,kBAAkB,EACrB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;gBAON,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA8BR,kBAAkB;;;;yDAIiB,UAAU;;;;;;;;;;;iBAWlD,WAAW;;4BAEA,0BAA0B;;;;;;;;;;;;;;;;;+DAiBS,UAAU;;;;;;;;;;;;;;;;;;;gEAmBT,UAAU;;;;;;;6DAOb,UAAU;;;;;;;;;;;;MAYjE;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;;gBAElB,cAAc;;;;mBAIX,eAAe;;;;;;mBAMf,eAAe;;;;qCAIG,qBAAqB;;CAEzD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n applicationBackgroundColor,\n bodyFont,\n bodyFontColor,\n standardPadding,\n titlePlus1Font,\n drawerWidth,\n largeDelay,\n actionRgbPartialColor,\n modalBackdropColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('block')}\n\n :host {\n position: absolute;\n width: auto;\n height: 100%;\n outline: none;\n font: ${bodyFont};\n color: ${bodyFontColor};\n }\n\n dialog {\n color: inherit;\n font: inherit;\n background-color: transparent;\n width: auto;\n top: 0px;\n bottom: 0px;\n border-radius: 0px;\n border-width: 0px;\n height: 100%;\n margin: 0px;\n padding: 0px;\n max-width: none;\n max-height: none;\n overflow: hidden;\n }\n\n @keyframes ni-private-drawer-fade-in-keyframes {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n dialog::backdrop {\n background: ${modalBackdropColor};\n }\n\n dialog.animating::backdrop {\n animation: ni-private-drawer-fade-in-keyframes ${largeDelay} ease-in;\n }\n\n dialog.closing::backdrop {\n animation-direction: reverse;\n }\n\n .dialog-contents {\n display: flex;\n flex-direction: column;\n position: absolute;\n width: ${drawerWidth};\n height: 100%;\n background-color: ${applicationBackgroundColor};\n }\n\n @keyframes ni-private-drawer-slide-in-left-keyframes {\n 0% {\n transform: translate(-100%);\n }\n 100% {\n transform: translate(0%);\n }\n }\n\n :host([location='left']) .dialog-contents {\n box-shadow: 3px 0px 8px #00000033;\n }\n\n :host([location='left']) dialog.animating .dialog-contents {\n animation: ni-private-drawer-slide-in-left-keyframes ${largeDelay}\n ease-in;\n }\n\n @keyframes ni-private-drawer-slide-in-right-keyframes {\n 0% {\n transform: translate(100%);\n }\n 100% {\n transform: translate(0%);\n }\n }\n\n :host([location='right']) .dialog-contents {\n right: 0px;\n box-shadow: -3px 0px 8px #00000033;\n }\n\n :host([location='right']) dialog.animating .dialog-contents {\n animation: ni-private-drawer-slide-in-right-keyframes ${largeDelay}\n ease-in;\n }\n\n @media (prefers-reduced-motion) {\n :host([location='left']) dialog.animating .dialog-contents,\n :host([location='right']) dialog.animating .dialog-contents {\n animation: ni-private-drawer-fade-in-keyframes ${largeDelay} ease-in;\n }\n }\n\n :host([location='left']) dialog.closing .dialog-contents {\n animation-direction: reverse;\n }\n\n :host([location='right']) dialog.closing .dialog-contents {\n animation-direction: reverse;\n }\n\n ${\n /*\n Styling for a 3-panel drawer with header, footer, and a content\n region filling the remaining space/height\n */ ''\n }\n\n ::slotted(header) {\n padding: ${standardPadding};\n flex: none;\n font: ${titlePlus1Font};\n }\n\n ::slotted(section) {\n padding: ${standardPadding};\n flex: auto;\n overflow-y: auto;\n }\n\n ::slotted(footer) {\n padding: ${standardPadding};\n flex: none;\n display: flex;\n justify-content: flex-end;\n border-top: 2px solid rgba(${actionRgbPartialColor}, 0.1);\n }\n`;\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { keyArrowDown, keyArrowUp, keyEnter, keyEscape, keySpace } from '@microsoft/fast-web-utilities';
|
|
2
|
-
import {
|
|
2
|
+
import { waitForEvent } from '../../utilities/testing/component';
|
|
3
3
|
/**
|
|
4
4
|
* Page object for `nimble-menu-button` component to provide consistent ways
|
|
5
5
|
* of querying and interacting with the component during tests.
|
|
@@ -25,7 +25,7 @@ export class MenuButtonPageObject {
|
|
|
25
25
|
if (this.isOpen()) {
|
|
26
26
|
return;
|
|
27
27
|
}
|
|
28
|
-
const toggleEventPromise =
|
|
28
|
+
const toggleEventPromise = waitForEvent(this.menuButtonElement, 'toggle');
|
|
29
29
|
this.clickMenuButton();
|
|
30
30
|
await toggleEventPromise;
|
|
31
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-button.pageobject.js","sourceRoot":"","sources":["../../../../src/menu-button/testing/menu-button.pageobject.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACX,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"menu-button.pageobject.js","sourceRoot":"","sources":["../../../../src/menu-button/testing/menu-button.pageobject.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n keyArrowDown,\n keyArrowUp,\n keyEnter,\n keyEscape,\n keySpace\n} from '@microsoft/fast-web-utilities';\nimport type { MenuButton } from '..';\nimport { waitForEvent } from '../../utilities/testing/component';\n\n/**\n * Page object for `nimble-menu-button` component to provide consistent ways\n * of querying and interacting with the component during tests.\n *\n * This page object is intended to be used to interact with a `nimble-menu-button`,\n * not the menu slotted into the button or the menu items.\n */\nexport class MenuButtonPageObject {\n public constructor(protected readonly menuButtonElement: MenuButton) {}\n\n /**\n * @returns Whether or not the menu is open.\n */\n public isOpen(): boolean {\n return this.menuButtonElement.open;\n }\n\n /**\n * Opens the menu.\n * @returns A promise that resolves when the menu opens.\n */\n public async openMenu(): Promise<void> {\n if (this.isOpen()) {\n return;\n }\n\n const toggleEventPromise = waitForEvent(\n this.menuButtonElement,\n 'toggle'\n );\n this.clickMenuButton();\n await toggleEventPromise;\n }\n\n /**\n * Closes the menu by pressing Escape.\n * Throws an error if the menu is not open.\n */\n public closeMenuWithEscape(): void {\n if (!this.isOpen()) {\n throw new Error('Cannot close menu when it is not open');\n }\n\n const event = new KeyboardEvent('keydown', {\n key: keyEscape\n });\n this.menuButtonElement.region!.dispatchEvent(event);\n }\n\n /**\n * Gets the text in the menu button.\n * @returns The trimmed text that is slotted into the menu button.\n */\n public getLabelText(): string {\n return this.menuButtonElement.textContent?.trim() ?? '';\n }\n\n /**\n * @returns Whether or not the menu button is focused.\n */\n public isFocused(): boolean {\n return this.menuButtonElement.shadowRoot?.activeElement !== null;\n }\n\n /**\n * @internal\n * Focuses and clicks the menu button.\n */\n public clickMenuButton(): void {\n // Focus the menu button before calling click() because ordinarily a mouse click\n // would bring focus to the button, but calling click() directly does not.\n this.menuButtonElement.focus();\n this.menuButtonElement.toggleButton!.control.click();\n }\n\n /**\n * @internal\n * Presses the Enter key on the menu button.\n */\n public pressEnterKey(): void {\n // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n this.menuButtonElement.focus();\n const event = new KeyboardEvent('keypress', {\n key: keyEnter\n });\n this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n }\n\n /**\n * @internal\n * Presses the Space key on the menu button.\n */\n public pressSpaceKey(): void {\n // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n this.menuButtonElement.focus();\n const event = new KeyboardEvent('keypress', {\n key: keySpace\n });\n this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n }\n\n /**\n * @internal\n * Presses the Arrow Up key on the menu button.\n */\n public pressArrowUpKey(): void {\n // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n this.menuButtonElement.focus();\n const event = new KeyboardEvent('keydown', {\n key: keyArrowUp\n });\n this.menuButtonElement.toggleButton!.dispatchEvent(event);\n }\n\n /**\n * @internal\n * Presses the Arrow Down key on the menu button.\n */\n public pressArrowDownKey(): void {\n // Focus the menu button before dispatching the event because a key event only makes sense on a focused element.\n this.menuButtonElement.focus();\n const event = new KeyboardEvent('keydown', {\n key: keyArrowDown\n });\n this.menuButtonElement.toggleButton!.dispatchEvent(event);\n }\n\n /**\n * @internal\n */\n public getTitle(): string {\n return this.menuButtonElement.title;\n }\n\n /**\n * @internal\n */\n public dispatchEvent(event: Event): void {\n this.menuButtonElement.dispatchEvent(event);\n }\n}\n"]}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { DesignToken } from '@microsoft/fast-foundation';
|
|
2
2
|
import { parseColorHexRGB } from '@microsoft/fast-colors';
|
|
3
3
|
import { Black, Black7, Black15, Black80, Black85, Black88, Black91, White, ForestGreen, DigitalGreenLight, Fail100LightUi, SmallDelay, MediumDelay, LargeDelay, Fail100DarkUi, Warning100LightUi, Warning100DarkUi, Pass100LightUi, Pass100DarkUi, BodyFamily, BodySize, BodyWeight, Body2Family, Body2Size, Body2Weight, 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, BodyEmphasized2Size, BodyEmphasized2Family, BodyEmphasized2Weight, ButtonLabel1Size, ButtonLabel1Family, ButtonLabel1Weight, TooltipCaptionSize, TooltipCaptionFamily, TooltipCaptionWeight, ErrorLightUiSize, ErrorLightUiFamily, ErrorLightUiWeight, Headline2LineHeight, Headline1LineHeight, Title3LineHeight, Title2LineHeight, Title1LineHeight, Subtitle2LineHeight, Subtitle1LineHeight, LinkLineHeight, PlaceholderLineHeight, BodyEmphasizedLineHeight, BodyEmphasized2LineHeight, BodyLineHeight, Body2LineHeight, GroupLabel1LineHeight, ControlLabel1LineHeight, ButtonLabel1LineHeight, TooltipCaptionLineHeight, Information100LightUi, Information100DarkUi, DigitalGreenDark, PowerGreen, GridHeaderFamily, GridHeaderWeight, GridHeaderSize, DigitalGreenDark105, NiFern, NiFernDark1, NiHoneyLight, NiIndigo, NiIndigoDark2, NiPlumDark1, NiScarlet, NiScarletDark1, NiScarletDark3, NiSea, NiSeaLight, NiSeaDark2, NiSky, NiTulip, DigitalGreenLight10, PowerGreen10, DigitalGreenDark110, Black82 } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
|
|
4
|
-
import { modalBackdropColorThemeColorStatic, modalBackdropColorThemeDarkStatic, modalBackdropColorThemeLightStatic } from './design-tokens-static';
|
|
5
4
|
import { Theme } from './types';
|
|
6
5
|
import { tokenNames, styleNameFromTokenName } from './design-token-names';
|
|
7
6
|
import { theme } from '.';
|
|
@@ -196,13 +195,13 @@ function getFillDownColorForTheme(element) {
|
|
|
196
195
|
function getModalBackdropForTheme(element) {
|
|
197
196
|
switch (theme.getValueFor(element)) {
|
|
198
197
|
case Theme.light:
|
|
199
|
-
return
|
|
198
|
+
return hexToRgbaCssColor(Black, 0.3);
|
|
200
199
|
case Theme.dark:
|
|
201
|
-
return
|
|
200
|
+
return hexToRgbaCssColor(Black, 0.6);
|
|
202
201
|
case Theme.color:
|
|
203
|
-
return
|
|
202
|
+
return hexToRgbaCssColor(Black, 0.6);
|
|
204
203
|
default:
|
|
205
|
-
return
|
|
204
|
+
return hexToRgbaCssColor(Black, 0.3);
|
|
206
205
|
}
|
|
207
206
|
}
|
|
208
207
|
//# sourceMappingURL=design-tokens.js.map
|