@ni/nimble-components 21.8.2 → 21.9.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 +383 -293
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +2065 -2040
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/list-option/index.d.ts +17 -0
- package/dist/esm/list-option/index.js +24 -1
- package/dist/esm/list-option/index.js.map +1 -1
- package/dist/esm/list-option/styles.js +15 -11
- package/dist/esm/list-option/styles.js.map +1 -1
- package/dist/esm/patterns/button/styles.js +2 -1
- package/dist/esm/patterns/button/styles.js.map +1 -1
- package/dist/esm/select/index.d.ts +10 -14
- package/dist/esm/select/index.js +143 -86
- package/dist/esm/select/index.js.map +1 -1
- package/dist/esm/select/styles.js +6 -1
- package/dist/esm/select/styles.js.map +1 -1
- package/dist/esm/select/template.js +3 -3
- package/dist/esm/select/template.js.map +1 -1
- package/dist/esm/select/testing/select.pageobject.d.ts +7 -0
- package/dist/esm/select/testing/select.pageobject.js +28 -12
- package/dist/esm/select/testing/select.pageobject.js.map +1 -1
- package/dist/esm/switch/styles.js +3 -2
- package/dist/esm/switch/styles.js.map +1 -1
- package/package.json +15 -15
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EACH,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,aAAa,EACb,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;MAEX;AACE;gGACgG,CAAC,EACrG
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EACH,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,aAAa,EACb,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;MAEX;AACE;gGACgG,CAAC,EACrG;;;iBAGa,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAmCnB,aAAa;;;;;;;;8BAQD,qBAAqB;uBAC5B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIrC,WAAW;;;;;;;8BAOf,qBAAqB;oBAC/B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIlC,WAAW;;;;wBAIrB,YAAY;;;;;;;;;qBASf,YAAY,MAAM,aAAa;;;;;iBAKnC,oBAAoB;;;mBAGlB,YAAY;;;;;;;;;iBASd,oBAAoB;kBACnB,aAAa;;;mBAGZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;8BAGmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport {\n borderRgbPartialColor,\n borderWidth,\n controlHeight,\n mediumPadding,\n placeholderFontColor,\n smallPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from './types';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\n\nexport const styles = css`\n ${dropdownStyles}\n ${errorStyles}\n\n ${\n /* We are using flex `order` to define the visual ordering of the selected value,\n error icon, and dropdown arrow because they are not \"interactive\" i.e. part of the tab order */ ''\n }\n\n .selected-value.placeholder {\n color: ${placeholderFontColor};\n }\n\n .selected-value {\n order: 1;\n }\n\n [part='indicator'] {\n order: 3;\n }\n\n .error-icon {\n order: 2;\n }\n\n [part='end'] {\n display: contents;\n }\n\n .listbox {\n overflow-x: clip;\n }\n\n .listbox.empty slot {\n display: none;\n }\n\n .listbox.above {\n flex-flow: column-reverse;\n }\n\n .filter-field {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: ${controlHeight};\n background: transparent;\n }\n\n .filter-field::before {\n content: '';\n position: absolute;\n height: 0px;\n border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n bottom: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n }\n\n .filter-field.above::before {\n width: calc(100% - (2 * ${borderWidth}));\n }\n\n .filter-field::after {\n content: '';\n position: absolute;\n height: 0px;\n border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n top: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n }\n\n .filter-field:not(.above)::after {\n width: calc(100% - (2 * ${borderWidth}));\n }\n\n .filter-icon {\n padding-left: ${smallPadding};\n }\n\n .filter-input {\n background: transparent;\n border: none;\n color: inherit;\n font: inherit;\n height: var(--ni-nimble-control-height);\n padding: 0 ${smallPadding} 0 ${mediumPadding};\n width: 100%;\n }\n\n .filter-input::placeholder {\n color: ${placeholderFontColor};\n }\n\n .filter-input${focusVisible} {\n outline: 0px;\n }\n\n .scrollable-region {\n overflow: auto;\n }\n\n .no-results-label {\n color: ${placeholderFontColor};\n height: ${controlHeight};\n display: inline-flex;\n align-items: center;\n padding: ${smallPadding} ${mediumPadding};\n }\n`.withBehaviors(\n appearanceBehavior(\n DropdownAppearance.block,\n css`\n :host([error-visible]) .control {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n .filter-field,\n .no-results-label {\n background: ${hexToRgbaCssColor(White, 0.15)};\n }\n `\n )\n);\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { html, ref, slotted, when } from '@microsoft/fast-element';
|
|
2
|
-
import { endSlotTemplate,
|
|
2
|
+
import { endSlotTemplate, startSlotTemplate, isListboxOption } from '@microsoft/fast-foundation';
|
|
3
3
|
import { anchoredRegionTag } from '../anchored-region';
|
|
4
4
|
import { DropdownPosition } from '../patterns/dropdown/types';
|
|
5
5
|
import { overflow } from '../utilities/directive/overflow';
|
|
@@ -42,7 +42,7 @@ export const template = (context, definition) => html `
|
|
|
42
42
|
>
|
|
43
43
|
${startSlotTemplate(context, definition)}
|
|
44
44
|
<slot name="button-container">
|
|
45
|
-
<div class="selected-value" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
|
|
45
|
+
<div class="selected-value ${x => (x.displayPlaceholder ? 'placeholder' : '')}" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
|
|
46
46
|
<slot name="selected-value">${x => x.displayValue}</slot>
|
|
47
47
|
</div>
|
|
48
48
|
<div aria-hidden="true" class="indicator" part="indicator">
|
|
@@ -98,7 +98,7 @@ export const template = (context, definition) => html `
|
|
|
98
98
|
class="scrollable-region">
|
|
99
99
|
<slot
|
|
100
100
|
${slotted({
|
|
101
|
-
filter: (n) => n instanceof HTMLElement &&
|
|
101
|
+
filter: (n) => n instanceof HTMLElement && isListboxOption(n),
|
|
102
102
|
flatten: true,
|
|
103
103
|
property: 'slottedOptions',
|
|
104
104
|
})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/select/template.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n html,\n ref,\n slotted,\n ViewTemplate,\n when\n} from '@microsoft/fast-element';\nimport {\n endSlotTemplate,\n FoundationElementTemplate,\n Listbox,\n SelectOptions,\n startSlotTemplate\n} from '@microsoft/fast-foundation';\nimport type { Select } from '.';\nimport { anchoredRegionTag } from '../anchored-region';\nimport { DropdownPosition } from '../patterns/dropdown/types';\nimport { overflow } from '../utilities/directive/overflow';\nimport { iconMagnifyingGlassTag } from '../icons/magnifying-glass';\nimport {\n filterNoResultsLabel,\n filterSearchLabel\n} from '../label-provider/core/label-tokens';\nimport { FilterMode } from './types';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<Select>,\nSelectOptions\n> = (context, definition) => html<Select>`\n <template\n class=\"${x => [\n x.collapsible && 'collapsible',\n x.collapsible && x.open && 'open',\n x.disabled && 'disabled',\n x.collapsible && x.position,\n ].filter(Boolean).join(' ')}\"\n aria-activedescendant=\"${x => (x.filterMode === FilterMode.none ? x.ariaActiveDescendant : null)}\"\n aria-controls=\"${x => (x.filterMode === FilterMode.none ? x.ariaControls : null)}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-expanded=\"${x => x.ariaExpanded}\"\n aria-haspopup=\"${x => (x.collapsible ? 'listbox' : null)}\"\n aria-multiselectable=\"${x => x.ariaMultiSelectable}\"\n ?open=\"${x => x.open}\"\n role=\"combobox\"\n tabindex=\"${x => (!x.disabled ? '0' : null)}\"\n @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n @change=\"${x => x.changeValueHandler()}\"\n @contentchange=\"${x => x.updateDisplayValue()}\"\n @focusin=\"${(x, c) => x.focusinHandler(c.event as FocusEvent)}\"\n @focusout=\"${(x, c) => x.focusoutHandler(c.event as FocusEvent)}\"\n @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n @mousedown=\"${(x, c) => x.mousedownHandler(c.event as MouseEvent)}\"\n >\n ${when(x => x.collapsible, html<Select>`\n <div\n class=\"control\"\n part=\"control\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('control')}\n >\n ${startSlotTemplate(context, definition)}\n <slot name=\"button-container\">\n <div class=\"selected-value\" part=\"selected-value\" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>\n <slot name=\"selected-value\">${x => x.displayValue}</slot>\n </div>\n <div aria-hidden=\"true\" class=\"indicator\" part=\"indicator\">\n <slot name=\"indicator\">\n ${definition.indicator || ''}\n </slot>\n </div>\n </slot>\n ${endSlotTemplate(context, definition)}\n </div>\n `)\n }\n <${anchoredRegionTag}\n ${ref('anchoredRegion')}\n class=\"anchored-region\"\n fixed-placement\n auto-update-mode=\"auto\"\n vertical-default-position=\"${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}\"\n vertical-positioning-mode=\"${x => (!x.positionAttribute ? 'dynamic' : 'locktodefault')}\"\n horizontal-default-position=\"center\"\n horizontal-positioning-mode=\"locktodefault\"\n horizontal-scaling=\"anchor\"\n @loaded=\"${x => x.regionLoadedHandler()}\"\n ?hidden=\"${x => (x.collapsible ? !x.open : false)}\">\n <div class=\"listbox-background\">\n <div\n class=\"\n listbox \n ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}\n ${x => x.positionAttribute}\n \"\n id=\"${x => x.listboxId}\"\n part=\"listbox\"\n role=\"listbox\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('listbox')}\n >\n ${when(x => x.filterMode !== FilterMode.none, html<Select>`\n <div class=\"filter-field ${x => x.positionAttribute}\">\n <${iconMagnifyingGlassTag} class=\"filter-icon\"></${iconMagnifyingGlassTag}>\n <input\n ${ref('filterInput')}\n class=\"filter-input\"\n aria-controls=\"${x => x.ariaControls}\"\n aria-activedescendant=\"${x => x.ariaActiveDescendant}\"\n @input=\"${(x, c) => x.inputHandler(c.event as InputEvent)}\"\n @click=\"${(x, c) => x.inputClickHandler(c.event as MouseEvent)}\"\n placeholder=\"${x => filterSearchLabel.getValueFor(x)}\"\n value=\"${x => x.filter}\"\n />\n </div>\n `)}\n <div ${ref('scrollableRegion')}\n class=\"scrollable-region\">\n <slot\n ${slotted({\n filter: (n: Node) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),\n flatten: true,\n property: 'slottedOptions',\n })}\n ></slot>\n </div>\n ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0), html<Select>`\n <span class=\"no-results-label ${x => x.positionAttribute}\">\n ${x => filterNoResultsLabel.getValueFor(x)}\n </span>\n `)}\n </div>\n </div>\n </${anchoredRegionTag}>\n </template>\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/select/template.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n html,\n ref,\n slotted,\n ViewTemplate,\n when\n} from '@microsoft/fast-element';\nimport {\n endSlotTemplate,\n FoundationElementTemplate,\n SelectOptions,\n startSlotTemplate,\n isListboxOption\n} from '@microsoft/fast-foundation';\nimport type { Select } from '.';\nimport { anchoredRegionTag } from '../anchored-region';\nimport { DropdownPosition } from '../patterns/dropdown/types';\nimport { overflow } from '../utilities/directive/overflow';\nimport { iconMagnifyingGlassTag } from '../icons/magnifying-glass';\nimport {\n filterNoResultsLabel,\n filterSearchLabel\n} from '../label-provider/core/label-tokens';\nimport { FilterMode } from './types';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<Select>,\nSelectOptions\n> = (context, definition) => html<Select>`\n <template\n class=\"${x => [\n x.collapsible && 'collapsible',\n x.collapsible && x.open && 'open',\n x.disabled && 'disabled',\n x.collapsible && x.position,\n ].filter(Boolean).join(' ')}\"\n aria-activedescendant=\"${x => (x.filterMode === FilterMode.none ? x.ariaActiveDescendant : null)}\"\n aria-controls=\"${x => (x.filterMode === FilterMode.none ? x.ariaControls : null)}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-expanded=\"${x => x.ariaExpanded}\"\n aria-haspopup=\"${x => (x.collapsible ? 'listbox' : null)}\"\n aria-multiselectable=\"${x => x.ariaMultiSelectable}\"\n ?open=\"${x => x.open}\"\n role=\"combobox\"\n tabindex=\"${x => (!x.disabled ? '0' : null)}\"\n @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n @change=\"${x => x.changeValueHandler()}\"\n @contentchange=\"${x => x.updateDisplayValue()}\"\n @focusin=\"${(x, c) => x.focusinHandler(c.event as FocusEvent)}\"\n @focusout=\"${(x, c) => x.focusoutHandler(c.event as FocusEvent)}\"\n @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n @mousedown=\"${(x, c) => x.mousedownHandler(c.event as MouseEvent)}\"\n >\n ${when(x => x.collapsible, html<Select>`\n <div\n class=\"control\"\n part=\"control\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('control')}\n >\n ${startSlotTemplate(context, definition)}\n <slot name=\"button-container\">\n <div class=\"selected-value ${x => (x.displayPlaceholder ? 'placeholder' : '')}\" part=\"selected-value\" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>\n <slot name=\"selected-value\">${x => x.displayValue}</slot>\n </div>\n <div aria-hidden=\"true\" class=\"indicator\" part=\"indicator\">\n <slot name=\"indicator\">\n ${definition.indicator || ''}\n </slot>\n </div>\n </slot>\n ${endSlotTemplate(context, definition)}\n </div>\n `)\n }\n <${anchoredRegionTag}\n ${ref('anchoredRegion')}\n class=\"anchored-region\"\n fixed-placement\n auto-update-mode=\"auto\"\n vertical-default-position=\"${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}\"\n vertical-positioning-mode=\"${x => (!x.positionAttribute ? 'dynamic' : 'locktodefault')}\"\n horizontal-default-position=\"center\"\n horizontal-positioning-mode=\"locktodefault\"\n horizontal-scaling=\"anchor\"\n @loaded=\"${x => x.regionLoadedHandler()}\"\n ?hidden=\"${x => (x.collapsible ? !x.open : false)}\">\n <div class=\"listbox-background\">\n <div\n class=\"\n listbox \n ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}\n ${x => x.positionAttribute}\n \"\n id=\"${x => x.listboxId}\"\n part=\"listbox\"\n role=\"listbox\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('listbox')}\n >\n ${when(x => x.filterMode !== FilterMode.none, html<Select>`\n <div class=\"filter-field ${x => x.positionAttribute}\">\n <${iconMagnifyingGlassTag} class=\"filter-icon\"></${iconMagnifyingGlassTag}>\n <input\n ${ref('filterInput')}\n class=\"filter-input\"\n aria-controls=\"${x => x.ariaControls}\"\n aria-activedescendant=\"${x => x.ariaActiveDescendant}\"\n @input=\"${(x, c) => x.inputHandler(c.event as InputEvent)}\"\n @click=\"${(x, c) => x.inputClickHandler(c.event as MouseEvent)}\"\n placeholder=\"${x => filterSearchLabel.getValueFor(x)}\"\n value=\"${x => x.filter}\"\n />\n </div>\n `)}\n <div ${ref('scrollableRegion')}\n class=\"scrollable-region\">\n <slot\n ${slotted({\n filter: (n: Node) => n instanceof HTMLElement && isListboxOption(n),\n flatten: true,\n property: 'slottedOptions',\n })}\n ></slot>\n </div>\n ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0), html<Select>`\n <span class=\"no-results-label ${x => x.positionAttribute}\">\n ${x => filterNoResultsLabel.getValueFor(x)}\n </span>\n `)}\n </div>\n </div>\n </${anchoredRegionTag}>\n </template>\n`;\n"]}
|
|
@@ -19,13 +19,20 @@ export declare class SelectPageObject {
|
|
|
19
19
|
clickSelectedItem(): void;
|
|
20
20
|
clickFilterInput(): Promise<void>;
|
|
21
21
|
clickOption(index: number): void;
|
|
22
|
+
/**
|
|
23
|
+
* Click the option with the text provided by the 'displayText' parameter.
|
|
24
|
+
* @param value The text of the option to be selected
|
|
25
|
+
*/
|
|
26
|
+
clickOptionWithDisplayText(displayText: string): Promise<void>;
|
|
22
27
|
clickAway(): Promise<void>;
|
|
23
28
|
pressEnterKey(): void;
|
|
24
29
|
pressEscapeKey(): void;
|
|
25
30
|
pressArrowDownKey(): void;
|
|
31
|
+
pressArrowUpKey(): void;
|
|
26
32
|
pressSpaceKey(): Promise<void>;
|
|
27
33
|
isDropdownVisible(): boolean;
|
|
28
34
|
isFilterInputVisible(): boolean;
|
|
35
|
+
isOptionVisible(index: number): boolean;
|
|
29
36
|
isNoResultsLabelVisible(): boolean;
|
|
30
37
|
getFilterInputText(): string;
|
|
31
38
|
private getFilterInput;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { keyEnter, keyEscape, keyArrowDown, keySpace } from '@microsoft/fast-web-utilities';
|
|
1
|
+
import { keyEnter, keyEscape, keyArrowDown, keyArrowUp, keySpace } from '@microsoft/fast-web-utilities';
|
|
2
2
|
import { waitForUpdatesAsync } from '../../testing/async-helpers';
|
|
3
3
|
import { FilterMode } from '../types';
|
|
4
4
|
/**
|
|
@@ -44,7 +44,7 @@ export class SelectPageObject {
|
|
|
44
44
|
* Either opens or closes the dropdown depending on its current state
|
|
45
45
|
*/
|
|
46
46
|
async clickSelect() {
|
|
47
|
-
this.selectElement.
|
|
47
|
+
this.selectElement.click();
|
|
48
48
|
await waitForUpdatesAsync();
|
|
49
49
|
}
|
|
50
50
|
clickSelectedItem() {
|
|
@@ -61,21 +61,26 @@ export class SelectPageObject {
|
|
|
61
61
|
await waitForUpdatesAsync();
|
|
62
62
|
}
|
|
63
63
|
clickOption(index) {
|
|
64
|
-
if (!this.selectElement.open) {
|
|
65
|
-
throw new Error('Select must be open to click selectedItem');
|
|
66
|
-
}
|
|
67
64
|
if (index >= this.selectElement.options.length) {
|
|
68
65
|
throw new Error('"index" greater than number of current displayed options');
|
|
69
66
|
}
|
|
70
67
|
const option = this.selectElement.options[index];
|
|
71
68
|
option.scrollIntoView();
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
69
|
+
option.click();
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Click the option with the text provided by the 'displayText' parameter.
|
|
73
|
+
* @param value The text of the option to be selected
|
|
74
|
+
*/
|
|
75
|
+
async clickOptionWithDisplayText(displayText) {
|
|
76
|
+
if (!this.selectElement.open) {
|
|
77
|
+
await this.clickSelect();
|
|
78
|
+
}
|
|
79
|
+
const optionIndex = this.selectElement.options.findIndex(o => o.text === displayText);
|
|
80
|
+
if (optionIndex === -1) {
|
|
81
|
+
throw new Error(`No option with "text" of ${displayText}`);
|
|
82
|
+
}
|
|
83
|
+
this.clickOption(optionIndex);
|
|
79
84
|
}
|
|
80
85
|
async clickAway() {
|
|
81
86
|
this.selectElement.dispatchEvent(new Event('focusout'));
|
|
@@ -90,6 +95,9 @@ export class SelectPageObject {
|
|
|
90
95
|
pressArrowDownKey() {
|
|
91
96
|
this.selectElement.dispatchEvent(new KeyboardEvent('keydown', { key: keyArrowDown }));
|
|
92
97
|
}
|
|
98
|
+
pressArrowUpKey() {
|
|
99
|
+
this.selectElement.dispatchEvent(new KeyboardEvent('keydown', { key: keyArrowUp }));
|
|
100
|
+
}
|
|
93
101
|
async pressSpaceKey() {
|
|
94
102
|
const alreadyOpen = this.selectElement.open;
|
|
95
103
|
this.selectElement.dispatchEvent(new KeyboardEvent('keydown', { key: keySpace, bubbles: true }));
|
|
@@ -112,6 +120,14 @@ export class SelectPageObject {
|
|
|
112
120
|
return (this.selectElement.shadowRoot?.querySelector('.filter-field')
|
|
113
121
|
!== null);
|
|
114
122
|
}
|
|
123
|
+
isOptionVisible(index) {
|
|
124
|
+
if (index >= this.selectElement.options.length) {
|
|
125
|
+
throw new Error('Indexing past number of options');
|
|
126
|
+
}
|
|
127
|
+
const option = this.selectElement.options[index];
|
|
128
|
+
const optionRects = option.getClientRects();
|
|
129
|
+
return optionRects.length > 0 && optionRects[0].height !== 0;
|
|
130
|
+
}
|
|
115
131
|
isNoResultsLabelVisible() {
|
|
116
132
|
return (this.selectElement.shadowRoot?.querySelector('.no-results-label') !== null);
|
|
117
133
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.pageobject.js","sourceRoot":"","sources":["../../../../src/select/testing/select.pageobject.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n keyEnter,\n keyEscape,\n keyArrowDown,\n keySpace\n} from '@microsoft/fast-web-utilities';\nimport type { Select } from '..';\nimport type { ListOption } from '../../list-option';\nimport { waitForUpdatesAsync } from '../../testing/async-helpers';\nimport { FilterMode } from '../types';\n\n/**\n * Page object for the `nimble-select` component to provide consistent ways\n * of querying and interacting with the component during tests.\n */\nexport class SelectPageObject {\n public constructor(private readonly selectElement: Select) {}\n\n public async openAndSetFilterText(filterText: string): Promise<void> {\n if (this.selectElement.filterMode === FilterMode.none) {\n throw new Error(\n 'Can not set filter text with filterMode set to \"none\".'\n );\n }\n await this.clickSelect();\n const filterInput = this.getFilterInput();\n if (filterInput) {\n filterInput.value = filterText;\n }\n\n await waitForUpdatesAsync();\n const inputEvent = new InputEvent('input');\n filterInput?.dispatchEvent(inputEvent);\n await waitForUpdatesAsync();\n }\n\n public async closeDropdown(): Promise<void> {\n this.selectElement.open = false;\n await waitForUpdatesAsync();\n }\n\n public async setOptions(options: ListOption[]): Promise<void> {\n options.forEach(option => {\n option.setAttribute('role', 'option');\n });\n this.selectElement.slottedOptions = options;\n await waitForUpdatesAsync();\n }\n\n public getFilteredOptions(): ListOption[] {\n return this.selectElement.filteredOptions as ListOption[];\n }\n\n public getSelectedOption(): ListOption | null {\n return (this.selectElement.selectedOptions[0] as ListOption) ?? null;\n }\n\n /**\n * Either opens or closes the dropdown depending on its current state\n */\n public async clickSelect(): Promise<void> {\n this.selectElement.dispatchEvent(new Event('click'));\n await waitForUpdatesAsync();\n }\n\n public clickSelectedItem(): void {\n if (!this.selectElement.open) {\n throw new Error('Select must be open to click selectedItem');\n }\n\n this.clickOption(this.selectElement.selectedIndex);\n }\n\n public async clickFilterInput(): Promise<void> {\n if (!this.selectElement.filterInput) {\n throw new Error('Filter input is not available.');\n }\n this.selectElement.filterInput.click();\n await waitForUpdatesAsync();\n }\n\n public clickOption(index: number): void {\n if (!this.selectElement.open) {\n throw new Error('Select must be open to click selectedItem');\n }\n\n if (index >= this.selectElement.options.length) {\n throw new Error(\n '\"index\" greater than number of current displayed options'\n );\n }\n\n const option = this.selectElement.options[index]!;\n option.scrollIntoView();\n const optionRect = option.getClientRects()[0]!;\n const clickEvent = new MouseEvent('click', {\n clientY: optionRect.y + optionRect.height / 2,\n clientX: optionRect.width / 2,\n bubbles: true\n });\n option.dispatchEvent(clickEvent);\n }\n\n public async clickAway(): Promise<void> {\n this.selectElement.dispatchEvent(new Event('focusout'));\n await waitForUpdatesAsync();\n }\n\n public pressEnterKey(): void {\n this.selectElement.dispatchEvent(\n new KeyboardEvent('keydown', { key: keyEnter })\n );\n }\n\n public pressEscapeKey(): void {\n this.selectElement.dispatchEvent(\n new KeyboardEvent('keydown', { key: keyEscape })\n );\n }\n\n public pressArrowDownKey(): void {\n this.selectElement.dispatchEvent(\n new KeyboardEvent('keydown', { key: keyArrowDown })\n );\n }\n\n public async pressSpaceKey(): Promise<void> {\n const alreadyOpen = this.selectElement.open;\n this.selectElement.dispatchEvent(\n new KeyboardEvent('keydown', { key: keySpace, bubbles: true })\n );\n await waitForUpdatesAsync();\n if (\n this.selectElement.filterMode === FilterMode.standard\n && alreadyOpen\n ) {\n // add space to end of current filter\n const filterValue = `${\n this.selectElement.filterInput?.value ?? ''\n } `;\n if (this.selectElement.filterInput) {\n this.selectElement.filterInput.value = filterValue;\n }\n this.selectElement.filterInput?.dispatchEvent(\n new InputEvent('input', { inputType: 'insertText' })\n );\n }\n await waitForUpdatesAsync();\n }\n\n public isDropdownVisible(): boolean {\n return (\n this.selectElement.shadowRoot?.querySelector('.listbox') !== null\n );\n }\n\n public isFilterInputVisible(): boolean {\n return (\n this.selectElement.shadowRoot?.querySelector('.filter-field')\n !== null\n );\n }\n\n public isNoResultsLabelVisible(): boolean {\n return (\n this.selectElement.shadowRoot?.querySelector(\n '.no-results-label'\n ) !== null\n );\n }\n\n public getFilterInputText(): string {\n return this.getFilterInput()?.value ?? '';\n }\n\n private getFilterInput(): HTMLInputElement | null | undefined {\n if (this.selectElement.filterMode === FilterMode.none) {\n throw new Error(\n 'Select has filterMode of \"none\" so there is no filter input'\n );\n }\n return this.selectElement.shadowRoot?.querySelector<HTMLInputElement>(\n '.filter-input'\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"select.pageobject.js","sourceRoot":"","sources":["../../../../src/select/testing/select.pageobject.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n keyEnter,\n keyEscape,\n keyArrowDown,\n keyArrowUp,\n keySpace\n} from '@microsoft/fast-web-utilities';\nimport type { Select } from '..';\nimport type { ListOption } from '../../list-option';\nimport { waitForUpdatesAsync } from '../../testing/async-helpers';\nimport { FilterMode } from '../types';\n\n/**\n * Page object for the `nimble-select` component to provide consistent ways\n * of querying and interacting with the component during tests.\n */\nexport class SelectPageObject {\n public constructor(private readonly selectElement: Select) {}\n\n public async openAndSetFilterText(filterText: string): Promise<void> {\n if (this.selectElement.filterMode === FilterMode.none) {\n throw new Error(\n 'Can not set filter text with filterMode set to \"none\".'\n );\n }\n await this.clickSelect();\n const filterInput = this.getFilterInput();\n if (filterInput) {\n filterInput.value = filterText;\n }\n\n await waitForUpdatesAsync();\n const inputEvent = new InputEvent('input');\n filterInput?.dispatchEvent(inputEvent);\n await waitForUpdatesAsync();\n }\n\n public async closeDropdown(): Promise<void> {\n this.selectElement.open = false;\n await waitForUpdatesAsync();\n }\n\n public async setOptions(options: ListOption[]): Promise<void> {\n options.forEach(option => {\n option.setAttribute('role', 'option');\n });\n this.selectElement.slottedOptions = options;\n await waitForUpdatesAsync();\n }\n\n public getFilteredOptions(): ListOption[] {\n return this.selectElement.filteredOptions as ListOption[];\n }\n\n public getSelectedOption(): ListOption | null {\n return (this.selectElement.selectedOptions[0] as ListOption) ?? null;\n }\n\n /**\n * Either opens or closes the dropdown depending on its current state\n */\n public async clickSelect(): Promise<void> {\n this.selectElement.click();\n await waitForUpdatesAsync();\n }\n\n public clickSelectedItem(): void {\n if (!this.selectElement.open) {\n throw new Error('Select must be open to click selectedItem');\n }\n\n this.clickOption(this.selectElement.selectedIndex);\n }\n\n public async clickFilterInput(): Promise<void> {\n if (!this.selectElement.filterInput) {\n throw new Error('Filter input is not available.');\n }\n this.selectElement.filterInput.click();\n await waitForUpdatesAsync();\n }\n\n public clickOption(index: number): void {\n if (index >= this.selectElement.options.length) {\n throw new Error(\n '\"index\" greater than number of current displayed options'\n );\n }\n\n const option = this.selectElement.options[index]!;\n option.scrollIntoView();\n option.click();\n }\n\n /**\n * Click the option with the text provided by the 'displayText' parameter.\n * @param value The text of the option to be selected\n */\n public async clickOptionWithDisplayText(\n displayText: string\n ): Promise<void> {\n if (!this.selectElement.open) {\n await this.clickSelect();\n }\n const optionIndex = this.selectElement.options.findIndex(\n o => o.text === displayText\n );\n if (optionIndex === -1) {\n throw new Error(`No option with \"text\" of ${displayText}`);\n }\n\n this.clickOption(optionIndex);\n }\n\n public async clickAway(): Promise<void> {\n this.selectElement.dispatchEvent(new Event('focusout'));\n await waitForUpdatesAsync();\n }\n\n public pressEnterKey(): void {\n this.selectElement.dispatchEvent(\n new KeyboardEvent('keydown', { key: keyEnter })\n );\n }\n\n public pressEscapeKey(): void {\n this.selectElement.dispatchEvent(\n new KeyboardEvent('keydown', { key: keyEscape })\n );\n }\n\n public pressArrowDownKey(): void {\n this.selectElement.dispatchEvent(\n new KeyboardEvent('keydown', { key: keyArrowDown })\n );\n }\n\n public pressArrowUpKey(): void {\n this.selectElement.dispatchEvent(\n new KeyboardEvent('keydown', { key: keyArrowUp })\n );\n }\n\n public async pressSpaceKey(): Promise<void> {\n const alreadyOpen = this.selectElement.open;\n this.selectElement.dispatchEvent(\n new KeyboardEvent('keydown', { key: keySpace, bubbles: true })\n );\n await waitForUpdatesAsync();\n if (\n this.selectElement.filterMode === FilterMode.standard\n && alreadyOpen\n ) {\n // add space to end of current filter\n const filterValue = `${\n this.selectElement.filterInput?.value ?? ''\n } `;\n if (this.selectElement.filterInput) {\n this.selectElement.filterInput.value = filterValue;\n }\n this.selectElement.filterInput?.dispatchEvent(\n new InputEvent('input', { inputType: 'insertText' })\n );\n }\n await waitForUpdatesAsync();\n }\n\n public isDropdownVisible(): boolean {\n return (\n this.selectElement.shadowRoot?.querySelector('.listbox') !== null\n );\n }\n\n public isFilterInputVisible(): boolean {\n return (\n this.selectElement.shadowRoot?.querySelector('.filter-field')\n !== null\n );\n }\n\n public isOptionVisible(index: number): boolean {\n if (index >= this.selectElement.options.length) {\n throw new Error('Indexing past number of options');\n }\n const option = this.selectElement.options[index]!;\n const optionRects = option.getClientRects();\n return optionRects.length > 0 && optionRects[0]!.height !== 0;\n }\n\n public isNoResultsLabelVisible(): boolean {\n return (\n this.selectElement.shadowRoot?.querySelector(\n '.no-results-label'\n ) !== null\n );\n }\n\n public getFilterInputText(): string {\n return this.getFilterInput()?.value ?? '';\n }\n\n private getFilterInput(): HTMLInputElement | null | undefined {\n if (this.selectElement.filterMode === FilterMode.none) {\n throw new Error(\n 'Select has filterMode of \"none\" so there is no filter input'\n );\n }\n return this.selectElement.shadowRoot?.querySelector<HTMLInputElement>(\n '.filter-input'\n );\n }\n}\n"]}
|
|
@@ -89,8 +89,9 @@ export const styles = css `
|
|
|
89
89
|
border-radius: calc(var(--ni-private-switch-indicator-size) / 2);
|
|
90
90
|
margin: calc(
|
|
91
91
|
calc(
|
|
92
|
-
var(--ni-private-switch-height) -
|
|
93
|
-
|
|
92
|
+
var(--ni-private-switch-height) - var(
|
|
93
|
+
--ni-private-switch-indicator-size
|
|
94
|
+
)
|
|
94
95
|
) / 2
|
|
95
96
|
);
|
|
96
97
|
border: ${borderWidth} solid
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,4BAA4B,EAC5B,oBAAoB,EACpB,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,QAAQ;iBACP,oBAAoB;;;;;;cAMvB,aAAa;;;;;;iBAMV,4BAA4B;;;;iBAI5B,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,4BAA4B,EAC5B,oBAAoB,EACpB,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,QAAQ;iBACP,oBAAoB;;;;;;cAMvB,aAAa;;;;;;iBAMV,4BAA4B;;;;iBAI5B,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU;;;;;;;;;;;;;;;;;;;;;;;kBAuBxB,WAAW;;;;;uBAKN,WAAW,eAAe,gBAAgB;;;;;;;kBAO/C,WAAW;;;;YAIjB,YAAY;kBACN,WAAW,UAAU,gBAAgB;;;;;;;;;8BASzB,UAAU;;;;;;;;;;;;;;;;;;;;;;;CAuBvC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,OAAO,EACP,IAAI,CACP;kEACiD,KAAK;2EACI,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;8DAC6C,OAAO;uEACE,iBAAiB,CACpE,OAAO,EACP,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,OAAO,EACP,IAAI,CACP;kEACiD,iBAAiB,CAC/D,OAAO,EACP,GAAG,CACN;2EAC0D,iBAAiB,CACxE,OAAO,EACP,GAAG,CACN;8DAC6C,MAAM;uEACG,iBAAiB,CACpE,MAAM,EACN,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,KAAK,EACL,IAAI,CACP;kEACiD,iBAAiB,CAC/D,KAAK,EACL,GAAG,CACN;2EAC0D,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;8DAC6C,KAAK;uEACI,iBAAiB,CACpE,KAAK,EACL,GAAG,CACN;;SAER,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n Black15,\n Black7,\n Black91,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n bodyFont,\n borderHoverColor,\n borderWidth,\n buttonLabelDisabledFontColor,\n buttonLabelFontColor,\n controlHeight,\n controlLabelDisabledFontColor,\n controlLabelFont,\n controlLabelFontColor,\n fillHoverColor,\n smallDelay\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n outline: none;\n font: ${bodyFont};\n color: ${buttonLabelFontColor};\n flex-direction: column;\n cursor: pointer;\n --ni-private-switch-height: 24px;\n --ni-private-switch-indicator-size: 16px;\n padding-bottom: calc(\n ${controlHeight} - var(--ni-private-switch-height)\n );\n }\n\n :host([disabled]) {\n cursor: default;\n color: ${buttonLabelDisabledFontColor};\n }\n\n .label {\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n .switch-container {\n display: flex;\n align-items: center;\n }\n\n slot[name='unchecked-message']::slotted(*) {\n margin-inline-end: 8px;\n }\n\n .switch {\n display: flex;\n height: var(--ni-private-switch-height);\n width: calc(var(--ni-private-switch-height) * 2);\n box-sizing: border-box;\n background-color: ${fillHoverColor};\n border-radius: calc(var(--ni-private-switch-height) / 2);\n align-items: center;\n border: calc(${borderWidth} * 2) solid transparent;\n }\n\n :host([disabled]) .switch {\n background-color: var(--ni-private-switch-background-disabled-color);\n }\n\n :host(${focusVisible}) .switch {\n border-color: ${borderHoverColor};\n }\n\n .checked-indicator-spacer {\n flex-grow: 0;\n transition: flex-grow ${smallDelay} ease-in-out;\n }\n\n :host([aria-checked='true']) .checked-indicator-spacer {\n flex-grow: 1;\n }\n\n .checked-indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--ni-private-switch-indicator-background-color);\n box-sizing: border-box;\n width: var(--ni-private-switch-indicator-size);\n height: var(--ni-private-switch-indicator-size);\n border-radius: calc(var(--ni-private-switch-indicator-size) / 2);\n margin: calc(\n calc(\n var(--ni-private-switch-height) - var(\n --ni-private-switch-indicator-size\n )\n ) / 2\n );\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-color);\n }\n\n :host(:hover) .checked-indicator {\n border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n }\n\n :host([disabled]) .checked-indicator {\n background-color: var(\n --ni-private-switch-indicator-background-disabled-color\n );\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host(${focusVisible}) .checked-indicator {\n border: ${borderWidth} solid ${borderHoverColor};\n }\n\n .checked-indicator-inner {\n width: calc(var(--ni-private-switch-indicator-size) / 2);\n height: calc(var(--ni-private-switch-indicator-size) / 2);\n border-radius: calc(var(--ni-private-switch-indicator-size) / 4);\n background-color: var(--ni-private-switch-indicator-border-color);\n opacity: 0;\n transition: opacity ${smallDelay} ease-in-out;\n }\n\n :host([disabled]) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n }\n\n :host([aria-checked='true']) .checked-indicator-inner {\n opacity: 1;\n }\n\n slot[name='checked-message']::slotted(*) {\n margin-inline-start: 8px;\n }\n\n @media (prefers-reduced-motion) {\n .checked-indicator-inner,\n .checked-indicator-spacer {\n transition-duration: 0s;\n }\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n :host {\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.07\n )};\n --ni-private-switch-indicator-background-color: ${White};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-indicator-border-color: ${Black91};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.3\n )};\n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n :host {\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.07\n )};\n --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n Black91,\n 0.3\n )};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.1\n )};\n --ni-private-switch-indicator-border-color: ${Black7};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black7,\n 0.3\n )};\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n :host {\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.07\n )};\n --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-indicator-border-color: ${White};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n }\n `\n )\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.9.1",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
"@ni/eslint-config-javascript": "^4.2.0",
|
|
110
110
|
"@ni/eslint-config-typescript": "^4.2.0",
|
|
111
111
|
"@ni/jasmine-parameterized": "^0.2.2",
|
|
112
|
-
"@rollup/plugin-commonjs": "^
|
|
112
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
|
113
113
|
"@rollup/plugin-json": "^6.0.0",
|
|
114
114
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
115
115
|
"@rollup/plugin-replace": "^5.0.1",
|
|
@@ -122,20 +122,20 @@
|
|
|
122
122
|
"@storybook/addon-links": "^7.6.13",
|
|
123
123
|
"@storybook/addons": "^7.6.13",
|
|
124
124
|
"@storybook/cli": "^7.6.13",
|
|
125
|
-
"@storybook/csf": "0.1.2",
|
|
125
|
+
"@storybook/csf": "^0.1.2",
|
|
126
126
|
"@storybook/html": "^7.6.13",
|
|
127
127
|
"@storybook/html-webpack5": "^7.6.13",
|
|
128
128
|
"@storybook/theming": "^7.6.13",
|
|
129
|
-
"@types/jasmine": "^
|
|
129
|
+
"@types/jasmine": "^5.1.4",
|
|
130
130
|
"@types/webpack-env": "^1.15.2",
|
|
131
131
|
"babel-loader": "^9.1.2",
|
|
132
132
|
"circular-dependency-plugin": "^5.2.0",
|
|
133
133
|
"css-loader": "^6.7.3",
|
|
134
134
|
"dotenv-webpack": "^8.0.1",
|
|
135
|
-
"eslint-plugin-jsdoc": "^
|
|
136
|
-
"eslint-plugin-storybook": "^0.
|
|
135
|
+
"eslint-plugin-jsdoc": "^48.2.0",
|
|
136
|
+
"eslint-plugin-storybook": "^0.8.0",
|
|
137
137
|
"html-webpack-plugin": "^5.3.1",
|
|
138
|
-
"jasmine-core": "^
|
|
138
|
+
"jasmine-core": "^5.1.2",
|
|
139
139
|
"karma": "^6.3.0",
|
|
140
140
|
"karma-chrome-launcher": "^3.1.0",
|
|
141
141
|
"karma-firefox-launcher": "^2.1.0",
|
|
@@ -143,24 +143,24 @@
|
|
|
143
143
|
"karma-jasmine-html-reporter": "^2.0.0",
|
|
144
144
|
"karma-jasmine-spec-tags": "^2.0.0",
|
|
145
145
|
"karma-source-map-support": "^1.4.0",
|
|
146
|
-
"karma-sourcemap-loader": "^0.
|
|
146
|
+
"karma-sourcemap-loader": "^0.4.0",
|
|
147
147
|
"karma-spec-reporter": "^0.0.36",
|
|
148
148
|
"karma-webkit-launcher": "^2.1.0",
|
|
149
149
|
"karma-webpack": "^5.0.0",
|
|
150
150
|
"playwright": "1.40.0",
|
|
151
|
-
"prettier": "^2.
|
|
152
|
-
"prettier-eslint": "^
|
|
153
|
-
"prettier-eslint-cli": "^
|
|
151
|
+
"prettier": "^3.2.5",
|
|
152
|
+
"prettier-eslint": "^16.3.0",
|
|
153
|
+
"prettier-eslint-cli": "^8.0.1",
|
|
154
154
|
"remark-gfm": "^3.0.1",
|
|
155
|
-
"rollup": "^
|
|
156
|
-
"rollup-plugin-polyfill-node": "^0.
|
|
155
|
+
"rollup": "^4.12.0",
|
|
156
|
+
"rollup-plugin-polyfill-node": "^0.13.0",
|
|
157
157
|
"rollup-plugin-sourcemaps": "^0.6.3",
|
|
158
|
-
"source-map-loader": "^
|
|
158
|
+
"source-map-loader": "^5.0.0",
|
|
159
159
|
"storybook": "^7.6.13",
|
|
160
160
|
"ts-loader": "^9.2.5",
|
|
161
161
|
"typescript": "~4.8.2",
|
|
162
162
|
"webpack": "^5.75.0",
|
|
163
163
|
"webpack-cli": "^5.0.1",
|
|
164
|
-
"webpack-dev-middleware": "^
|
|
164
|
+
"webpack-dev-middleware": "^7.0.0"
|
|
165
165
|
}
|
|
166
166
|
}
|