@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
|
@@ -10,6 +10,23 @@ declare global {
|
|
|
10
10
|
export declare class ListOption extends FoundationListboxOption {
|
|
11
11
|
/** @internal */
|
|
12
12
|
contentSlot: HTMLSlotElement;
|
|
13
|
+
/**
|
|
14
|
+
* The hidden state of the element.
|
|
15
|
+
*
|
|
16
|
+
* @public
|
|
17
|
+
* @defaultValue - false
|
|
18
|
+
* @remarks
|
|
19
|
+
* HTML Attribute: hidden
|
|
20
|
+
*/
|
|
21
|
+
hidden: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* @internal
|
|
24
|
+
* This attribute is required to allow use-cases that offer dynamic filtering
|
|
25
|
+
* (like the Select) to visually hide options that are filtered out, but still
|
|
26
|
+
* allow users to use the native 'hidden' attribute without it being affected
|
|
27
|
+
* by the filtering process.
|
|
28
|
+
*/
|
|
29
|
+
visuallyHidden: boolean;
|
|
13
30
|
/** @internal */
|
|
14
31
|
hasOverflow: boolean;
|
|
15
32
|
/** @internal */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { DesignSystem, ListboxOption as FoundationListboxOption } from '@microsoft/fast-foundation';
|
|
3
|
-
import { observable } from '@microsoft/fast-element';
|
|
3
|
+
import { observable, attr } from '@microsoft/fast-element';
|
|
4
4
|
import { styles } from './styles';
|
|
5
5
|
import { template } from './template';
|
|
6
6
|
/**
|
|
@@ -9,6 +9,23 @@ import { template } from './template';
|
|
|
9
9
|
export class ListOption extends FoundationListboxOption {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments);
|
|
12
|
+
/**
|
|
13
|
+
* The hidden state of the element.
|
|
14
|
+
*
|
|
15
|
+
* @public
|
|
16
|
+
* @defaultValue - false
|
|
17
|
+
* @remarks
|
|
18
|
+
* HTML Attribute: hidden
|
|
19
|
+
*/
|
|
20
|
+
this.hidden = false;
|
|
21
|
+
/**
|
|
22
|
+
* @internal
|
|
23
|
+
* This attribute is required to allow use-cases that offer dynamic filtering
|
|
24
|
+
* (like the Select) to visually hide options that are filtered out, but still
|
|
25
|
+
* allow users to use the native 'hidden' attribute without it being affected
|
|
26
|
+
* by the filtering process.
|
|
27
|
+
*/
|
|
28
|
+
this.visuallyHidden = false;
|
|
12
29
|
/** @internal */
|
|
13
30
|
this.hasOverflow = false;
|
|
14
31
|
}
|
|
@@ -20,6 +37,12 @@ export class ListOption extends FoundationListboxOption {
|
|
|
20
37
|
.join(' ');
|
|
21
38
|
}
|
|
22
39
|
}
|
|
40
|
+
__decorate([
|
|
41
|
+
attr({ mode: 'boolean' })
|
|
42
|
+
], ListOption.prototype, "hidden", void 0);
|
|
43
|
+
__decorate([
|
|
44
|
+
attr({ attribute: 'visually-hidden', mode: 'boolean' })
|
|
45
|
+
], ListOption.prototype, "visuallyHidden", void 0);
|
|
23
46
|
__decorate([
|
|
24
47
|
observable
|
|
25
48
|
], ListOption.prototype, "hasOverflow", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-option/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,YAAY,EACZ,aAAa,IAAI,uBAAuB,EAC3C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/list-option/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,YAAY,EACZ,aAAa,IAAI,uBAAuB,EAC3C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,uBAAuB;IAAvD;;QAII;;;;;;;WAOG;QAEa,WAAM,GAAG,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEI,mBAAc,GAAG,KAAK,CAAC;QAE9B,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IAS/B,CAAC;IAPG,gBAAgB;IAChB,IAAW,kBAAkB;QACzB,OAAO,IAAI,CAAC,WAAW;aAClB,aAAa,EAAE;aACf,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;aACrC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;CACJ;AAvBG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;0CACK;AAU/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;kDAC1B;AAI9B;IADC,UAAU;+CACgB;AAW/B,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,uBAAuB;IAClC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import {\n DesignSystem,\n ListboxOption as FoundationListboxOption\n} from '@microsoft/fast-foundation';\nimport { observable, attr } from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-list-option': ListOption;\n }\n}\n\n/**\n * A nimble-styled HTML listbox option\n */\nexport class ListOption extends FoundationListboxOption {\n /** @internal */\n public contentSlot!: HTMLSlotElement;\n\n /**\n * The hidden state of the element.\n *\n * @public\n * @defaultValue - false\n * @remarks\n * HTML Attribute: hidden\n */\n @attr({ mode: 'boolean' })\n public override hidden = false;\n\n /**\n * @internal\n * This attribute is required to allow use-cases that offer dynamic filtering\n * (like the Select) to visually hide options that are filtered out, but still\n * allow users to use the native 'hidden' attribute without it being affected\n * by the filtering process.\n */\n @attr({ attribute: 'visually-hidden', mode: 'boolean' })\n public visuallyHidden = false;\n\n /** @internal */\n @observable\n public hasOverflow = false;\n\n /** @internal */\n public get elementTextContent(): string {\n return this.contentSlot\n .assignedNodes()\n .map(node => node.textContent?.trim())\n .join(' ');\n }\n}\n\nconst nimbleListOption = ListOption.compose({\n baseName: 'list-option',\n baseClass: FoundationListboxOption,\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());\nexport const listOptionTag = 'nimble-list-option';\n"]}
|
|
@@ -12,17 +12,6 @@ export const styles = css `
|
|
|
12
12
|
height: ${controlHeight};
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
[part='start'] {
|
|
16
|
-
display: none;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.content {
|
|
20
|
-
padding: 8px 4px;
|
|
21
|
-
white-space: nowrap;
|
|
22
|
-
overflow: hidden;
|
|
23
|
-
text-overflow: ellipsis;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
15
|
:host([aria-selected='true']) {
|
|
27
16
|
box-shadow: none;
|
|
28
17
|
outline: none;
|
|
@@ -59,6 +48,21 @@ export const styles = css `
|
|
|
59
48
|
cursor: default;
|
|
60
49
|
}
|
|
61
50
|
|
|
51
|
+
:host([visually-hidden]) {
|
|
52
|
+
display: none;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
[part='start'] {
|
|
56
|
+
display: none;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.content {
|
|
60
|
+
padding: 8px 4px;
|
|
61
|
+
white-space: nowrap;
|
|
62
|
+
overflow: hidden;
|
|
63
|
+
text-overflow: ellipsis;
|
|
64
|
+
}
|
|
65
|
+
|
|
62
66
|
.content[disabled] {
|
|
63
67
|
box-shadow: none;
|
|
64
68
|
outline: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/list-option/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACd,QAAQ,EACR,qBAAqB,EACrB,aAAa,EAChB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;kBAGN,aAAa
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/list-option/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACd,QAAQ,EACR,qBAAqB,EACrB,aAAa,EAChB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;kBAGN,aAAa;;;;;;4BAMH,iBAAiB;;;;4BAIjB,sBAAsB;;;;4BAItB,cAAc;;;;;;;;aAQ7B,YAAY;sCACa,gBAAgB;6BACzB,gBAAgB;;;;;;;4BAOjB,iBAAiB;;;;iBAI5B,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n borderHoverColor,\n fillSelectedColor,\n fillHoverSelectedColor,\n fillHoverColor,\n bodyFont,\n bodyDisabledFontColor,\n controlHeight\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n font: ${bodyFont};\n cursor: pointer;\n justify-content: left;\n height: ${controlHeight};\n }\n\n :host([aria-selected='true']) {\n box-shadow: none;\n outline: none;\n background-color: ${fillSelectedColor};\n }\n\n :host([aria-selected='true']:hover) {\n background-color: ${fillHoverSelectedColor};\n }\n\n :host(:hover) {\n background-color: ${fillHoverColor};\n }\n\n :host(:hover):host([disabled]) {\n box-shadow: none;\n background-color: transparent;\n }\n\n :host(:${focusVisible}) {\n box-shadow: 0px 0px 0px 1px ${borderHoverColor} inset;\n outline: 1px solid ${borderHoverColor};\n outline-offset: -4px;\n }\n\n :host(:active) {\n box-shadow: none;\n outline: none;\n background-color: ${fillSelectedColor};\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n cursor: default;\n }\n\n :host([visually-hidden]) {\n display: none;\n }\n\n [part='start'] {\n display: none;\n }\n\n .content {\n padding: 8px 4px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .content[disabled] {\n box-shadow: none;\n outline: none;\n }\n\n [part='end'] {\n display: none;\n }\n`;\n"]}
|
|
@@ -48,7 +48,8 @@ export const styles = css `
|
|
|
48
48
|
margin: 0;
|
|
49
49
|
padding: 0 ${standardPadding};
|
|
50
50
|
position: relative;
|
|
51
|
-
transition:
|
|
51
|
+
transition:
|
|
52
|
+
box-shadow ${smallDelay} ease-in-out,
|
|
52
53
|
border-color ${smallDelay} ease-in-out,
|
|
53
54
|
background-size ${smallDelay} ease-in-out;
|
|
54
55
|
background-size: 100% 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n actionRgbPartialColor,\n borderHoverColor,\n borderRgbPartialColor,\n borderWidth,\n buttonLabelFont,\n buttonLabelFontColor,\n buttonLabelDisabledFontColor,\n controlHeight,\n fillSelectedColor,\n iconColor,\n smallDelay,\n standardPadding,\n buttonPrimaryFontColor,\n buttonFillPrimaryColor,\n buttonFillActivePrimaryColor,\n buttonFillAccentColor,\n buttonAccentBlockFontColor,\n buttonFillAccentActiveColor,\n buttonBorderAccentOutlineColor,\n buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-flex')}\n\n :host {\n background-color: transparent;\n height: ${controlHeight};\n color: ${buttonLabelFontColor};\n font: ${buttonLabelFont};\n cursor: pointer;\n outline: none;\n border: none;\n box-sizing: border-box;\n ${\n /*\n Not sure why but this is needed to get buttons with icons and buttons\n without icons to align on the same line when the button is inline-flex\n See: https://github.com/ni/nimble/issues/503\n */ ''\n }\n vertical-align: middle;\n }\n\n .control {\n background-color: transparent;\n height: 100%;\n width: 100%;\n border: ${borderWidth} solid transparent;\n box-sizing: border-box;\n color: inherit;\n border-radius: inherit;\n fill: inherit;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n cursor: inherit;\n font: inherit;\n outline: none;\n margin: 0;\n padding: 0 ${standardPadding};\n position: relative;\n transition: box-shadow ${smallDelay} ease-in-out,\n border-color ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-in-out;\n background-size: 100% 100%;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n :host([content-hidden]) .control {\n aspect-ratio: 1 / 1;\n padding: 0px;\n }\n\n .control::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n box-sizing: border-box;\n outline: 0px solid transparent;\n color: transparent;\n background-clip: content-box;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .content {\n display: contents;\n }\n\n :host([content-hidden]) .content {\n ${accessiblyHidden}\n }\n\n [part='start'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n [part='end'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer hover {\n .control:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n\n .control${focusVisible}::before {\n outline: ${borderWidth} solid ${borderHoverColor};\n outline-offset: -3px;\n }\n }\n\n @layer active {\n .control:active {\n box-shadow: none;\n background-image: linear-gradient(\n ${fillSelectedColor},\n ${fillSelectedColor}\n );\n background-size: calc(100% - 2px) calc(100% - 2px);\n }\n\n .control:active::before {\n outline: none;\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n color: ${buttonLabelDisabledFontColor};\n cursor: default;\n }\n\n :host([disabled]) .control {\n box-shadow: none;\n background-image: none;\n color: rgba(${actionRgbPartialColor}, 0.3);\n }\n\n :host([disabled]) .control::before {\n box-shadow: none;\n }\n\n :host([disabled]) slot[name='start']::slotted(*) {\n opacity: 0.3;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n :host([disabled]) slot[name='end']::slotted(*) {\n opacity: 0.3;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer top {\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n :host([content-hidden]) [part='end'] {\n display: none;\n }\n }\n`.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n .control {\n border-color: rgba(${actionRgbPartialColor}, 0.3);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.ghost,\n css`\n @layer disabled {\n :host([disabled]) .control {\n border-color: transparent;\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n\n @layer hover {\n .control:hover {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n background-size: 100% 100%;\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n `\n )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n :host([appearance-variant='primary']) .control {\n border-color: ${actionRgbPartialColor};\n }\n\n :host([appearance-variant='accent']) .control {\n border-color: ${buttonBorderAccentOutlineColor};\n color: ${buttonAccentOutlineFontColor};\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n :host([appearance-variant='primary']) [part='start'] {\n ${iconColor.cssCustomProperty}: white;\n }\n\n :host([appearance-variant='primary']) .control {\n background-image: linear-gradient(\n ${buttonFillPrimaryColor},\n ${buttonFillPrimaryColor}\n );\n color: ${buttonPrimaryFontColor};\n border-color: ${buttonFillPrimaryColor};\n }\n\n :host([appearance-variant='primary']) [part='end'] {\n ${iconColor.cssCustomProperty}: white;\n }\n\n :host([appearance-variant='accent']) [part='start'] {\n ${iconColor.cssCustomProperty}: white;\n }\n\n :host([appearance-variant='accent']) .control {\n background-image: linear-gradient(\n ${buttonFillAccentColor},\n ${buttonFillAccentColor}\n );\n color: ${buttonAccentBlockFontColor};\n border-color: ${buttonFillAccentColor};\n }\n\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: white;\n }\n }\n\n @layer active {\n :host([appearance-variant='primary']) .control:active {\n background-image: linear-gradient(\n ${buttonFillActivePrimaryColor},\n ${buttonFillActivePrimaryColor}\n );\n }\n\n :host([appearance-variant='accent']) .control:active {\n background-image: linear-gradient(\n ${buttonFillAccentActiveColor},\n ${buttonFillAccentActiveColor}\n );\n }\n }\n `\n )\n);\n"]}
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n actionRgbPartialColor,\n borderHoverColor,\n borderRgbPartialColor,\n borderWidth,\n buttonLabelFont,\n buttonLabelFontColor,\n buttonLabelDisabledFontColor,\n controlHeight,\n fillSelectedColor,\n iconColor,\n smallDelay,\n standardPadding,\n buttonPrimaryFontColor,\n buttonFillPrimaryColor,\n buttonFillActivePrimaryColor,\n buttonFillAccentColor,\n buttonAccentBlockFontColor,\n buttonFillAccentActiveColor,\n buttonBorderAccentOutlineColor,\n buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-flex')}\n\n :host {\n background-color: transparent;\n height: ${controlHeight};\n color: ${buttonLabelFontColor};\n font: ${buttonLabelFont};\n cursor: pointer;\n outline: none;\n border: none;\n box-sizing: border-box;\n ${\n /*\n Not sure why but this is needed to get buttons with icons and buttons\n without icons to align on the same line when the button is inline-flex\n See: https://github.com/ni/nimble/issues/503\n */ ''\n }\n vertical-align: middle;\n }\n\n .control {\n background-color: transparent;\n height: 100%;\n width: 100%;\n border: ${borderWidth} solid transparent;\n box-sizing: border-box;\n color: inherit;\n border-radius: inherit;\n fill: inherit;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n cursor: inherit;\n font: inherit;\n outline: none;\n margin: 0;\n padding: 0 ${standardPadding};\n position: relative;\n transition:\n box-shadow ${smallDelay} ease-in-out,\n border-color ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-in-out;\n background-size: 100% 100%;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n :host([content-hidden]) .control {\n aspect-ratio: 1 / 1;\n padding: 0px;\n }\n\n .control::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n box-sizing: border-box;\n outline: 0px solid transparent;\n color: transparent;\n background-clip: content-box;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .content {\n display: contents;\n }\n\n :host([content-hidden]) .content {\n ${accessiblyHidden}\n }\n\n [part='start'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n [part='end'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer hover {\n .control:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n\n .control${focusVisible}::before {\n outline: ${borderWidth} solid ${borderHoverColor};\n outline-offset: -3px;\n }\n }\n\n @layer active {\n .control:active {\n box-shadow: none;\n background-image: linear-gradient(\n ${fillSelectedColor},\n ${fillSelectedColor}\n );\n background-size: calc(100% - 2px) calc(100% - 2px);\n }\n\n .control:active::before {\n outline: none;\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n color: ${buttonLabelDisabledFontColor};\n cursor: default;\n }\n\n :host([disabled]) .control {\n box-shadow: none;\n background-image: none;\n color: rgba(${actionRgbPartialColor}, 0.3);\n }\n\n :host([disabled]) .control::before {\n box-shadow: none;\n }\n\n :host([disabled]) slot[name='start']::slotted(*) {\n opacity: 0.3;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n :host([disabled]) slot[name='end']::slotted(*) {\n opacity: 0.3;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer top {\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n :host([content-hidden]) [part='end'] {\n display: none;\n }\n }\n`.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n .control {\n border-color: rgba(${actionRgbPartialColor}, 0.3);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.ghost,\n css`\n @layer disabled {\n :host([disabled]) .control {\n border-color: transparent;\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n\n @layer hover {\n .control:hover {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n background-size: 100% 100%;\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n `\n )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n :host([appearance-variant='primary']) .control {\n border-color: ${actionRgbPartialColor};\n }\n\n :host([appearance-variant='accent']) .control {\n border-color: ${buttonBorderAccentOutlineColor};\n color: ${buttonAccentOutlineFontColor};\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n :host([appearance-variant='primary']) [part='start'] {\n ${iconColor.cssCustomProperty}: white;\n }\n\n :host([appearance-variant='primary']) .control {\n background-image: linear-gradient(\n ${buttonFillPrimaryColor},\n ${buttonFillPrimaryColor}\n );\n color: ${buttonPrimaryFontColor};\n border-color: ${buttonFillPrimaryColor};\n }\n\n :host([appearance-variant='primary']) [part='end'] {\n ${iconColor.cssCustomProperty}: white;\n }\n\n :host([appearance-variant='accent']) [part='start'] {\n ${iconColor.cssCustomProperty}: white;\n }\n\n :host([appearance-variant='accent']) .control {\n background-image: linear-gradient(\n ${buttonFillAccentColor},\n ${buttonFillAccentColor}\n );\n color: ${buttonAccentBlockFontColor};\n border-color: ${buttonFillAccentColor};\n }\n\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: white;\n }\n }\n\n @layer active {\n :host([appearance-variant='primary']) .control:active {\n background-image: linear-gradient(\n ${buttonFillActivePrimaryColor},\n ${buttonFillActivePrimaryColor}\n );\n }\n\n :host([appearance-variant='accent']) .control:active {\n background-image: linear-gradient(\n ${buttonFillAccentActiveColor},\n ${buttonFillAccentActiveColor}\n );\n }\n }\n `\n )\n);\n"]}
|
|
@@ -30,6 +30,10 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
|
|
|
30
30
|
errorText: string | undefined;
|
|
31
31
|
errorVisible: boolean;
|
|
32
32
|
filterMode: FilterMode;
|
|
33
|
+
/**
|
|
34
|
+
* @internal
|
|
35
|
+
*/
|
|
36
|
+
displayPlaceholder: boolean;
|
|
33
37
|
/**
|
|
34
38
|
* @internal
|
|
35
39
|
*/
|
|
@@ -83,7 +87,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
|
|
|
83
87
|
/**
|
|
84
88
|
* @internal
|
|
85
89
|
*/
|
|
86
|
-
committedSelectedOption
|
|
90
|
+
committedSelectedOption?: ListboxOption;
|
|
87
91
|
/**
|
|
88
92
|
* The max height for the listbox when opened.
|
|
89
93
|
*
|
|
@@ -103,16 +107,6 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
|
|
|
103
107
|
* @internal
|
|
104
108
|
*/
|
|
105
109
|
connectedCallback(): void;
|
|
106
|
-
/**
|
|
107
|
-
* The list of options. This mirrors FAST's override implementation for this
|
|
108
|
-
* member for the Combobox to support a filtered list in the dropdown.
|
|
109
|
-
*
|
|
110
|
-
* @public
|
|
111
|
-
* @remarks
|
|
112
|
-
* Overrides `Listbox.options`.
|
|
113
|
-
*/
|
|
114
|
-
get options(): ListboxOption[];
|
|
115
|
-
set options(value: ListboxOption[]);
|
|
116
110
|
get value(): string;
|
|
117
111
|
set value(next: string);
|
|
118
112
|
/**
|
|
@@ -200,7 +194,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
|
|
|
200
194
|
*
|
|
201
195
|
* @internal
|
|
202
196
|
*/
|
|
203
|
-
selectedIndexChanged(
|
|
197
|
+
selectedIndexChanged(_: number | undefined, __: number): void;
|
|
204
198
|
/**
|
|
205
199
|
* Synchronize the `aria-disabled` property when the `disabled` property changes.
|
|
206
200
|
*
|
|
@@ -216,6 +210,8 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
|
|
|
216
210
|
* @internal
|
|
217
211
|
*/
|
|
218
212
|
formResetCallback(): void;
|
|
213
|
+
selectNextOption(): void;
|
|
214
|
+
selectPreviousOption(): void;
|
|
219
215
|
protected setSelectedOptions(): void;
|
|
220
216
|
protected focusAndScrollOptionIntoView(): void;
|
|
221
217
|
protected positionChanged(_: SelectPosition | undefined, next: SelectPosition | undefined): void;
|
|
@@ -239,7 +235,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
|
|
|
239
235
|
* @override
|
|
240
236
|
* @internal
|
|
241
237
|
*/
|
|
242
|
-
protected selectedOptionsChanged(
|
|
238
|
+
protected selectedOptionsChanged(_prev: ListboxOption[] | undefined, next: ListboxOption[]): void;
|
|
243
239
|
/**
|
|
244
240
|
* Sets the selected index to match the first option with the selected attribute, or
|
|
245
241
|
* the first selectable option.
|
|
@@ -248,6 +244,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
|
|
|
248
244
|
* @internal
|
|
249
245
|
*/
|
|
250
246
|
protected setDefaultSelectedOption(): void;
|
|
247
|
+
private committedSelectedOptionChanged;
|
|
251
248
|
private setPositioning;
|
|
252
249
|
/**
|
|
253
250
|
* Filter available options by text value.
|
|
@@ -274,7 +271,6 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
|
|
|
274
271
|
private maxHeightChanged;
|
|
275
272
|
private initializeOpenState;
|
|
276
273
|
private updateListboxMaxHeightCssVariable;
|
|
277
|
-
private updateSelectedIndexFromFilteredSet;
|
|
278
274
|
}
|
|
279
275
|
export declare const selectTag = "nimble-select";
|
|
280
276
|
export {};
|