@ni/nimble-components 1.0.0-beta.125 → 1.0.0-beta.129
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/README.md +38 -16
- package/dist/esm/button/styles.js +10 -9
- package/dist/esm/button/styles.js.map +1 -1
- package/dist/esm/button/types.d.ts +1 -1
- package/dist/esm/button/types.js.map +1 -1
- package/dist/esm/checkbox/styles.js +4 -4
- package/dist/esm/checkbox/styles.js.map +1 -1
- package/dist/esm/drawer/index.js +4 -4
- package/dist/esm/drawer/index.js.map +1 -1
- package/dist/esm/drawer/styles.js +4 -4
- package/dist/esm/drawer/styles.js.map +1 -1
- package/dist/esm/drawer/types.d.ts +2 -2
- package/dist/esm/drawer/types.js.map +1 -1
- package/dist/esm/icon-base/styles.js +6 -6
- package/dist/esm/icon-base/styles.js.map +1 -1
- package/dist/esm/icon-base/types.d.ts +1 -1
- package/dist/esm/icon-base/types.js +4 -0
- package/dist/esm/icon-base/types.js.map +1 -1
- package/dist/esm/icons/all-icons.d.ts +9 -0
- package/dist/esm/icons/all-icons.js +9 -0
- package/dist/esm/icons/all-icons.js.map +1 -1
- package/dist/esm/icons/custom-status.d.ts +12 -0
- package/dist/esm/icons/custom-status.js +12 -0
- package/dist/esm/icons/custom-status.js.map +1 -0
- package/dist/esm/icons/done.d.ts +12 -0
- package/dist/esm/icons/done.js +12 -0
- package/dist/esm/icons/done.js.map +1 -0
- package/dist/esm/icons/looping.d.ts +12 -0
- package/dist/esm/icons/looping.js +12 -0
- package/dist/esm/icons/looping.js.map +1 -0
- package/dist/esm/icons/running.d.ts +12 -0
- package/dist/esm/icons/running.js +12 -0
- package/dist/esm/icons/running.js.map +1 -0
- package/dist/esm/icons/skipped.d.ts +12 -0
- package/dist/esm/icons/skipped.js +12 -0
- package/dist/esm/icons/skipped.js.map +1 -0
- package/dist/esm/icons/status.d.ts +12 -0
- package/dist/esm/icons/status.js +12 -0
- package/dist/esm/icons/status.js.map +1 -0
- package/dist/esm/icons/terminated.d.ts +12 -0
- package/dist/esm/icons/terminated.js +12 -0
- package/dist/esm/icons/terminated.js.map +1 -0
- package/dist/esm/icons/timed-out.d.ts +12 -0
- package/dist/esm/icons/timed-out.js +12 -0
- package/dist/esm/icons/timed-out.js.map +1 -0
- package/dist/esm/icons/waiting.d.ts +12 -0
- package/dist/esm/icons/waiting.js +12 -0
- package/dist/esm/icons/waiting.js.map +1 -0
- package/dist/esm/nimble-components/src/button/types.d.ts +1 -1
- package/dist/esm/nimble-components/src/drawer/types.d.ts +2 -2
- package/dist/esm/nimble-components/src/icon-base/types.d.ts +1 -1
- package/dist/esm/nimble-components/src/icons/all-icons.d.ts +9 -0
- package/dist/esm/nimble-components/src/icons/custom-status.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/done.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/looping.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/running.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/skipped.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/status.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/terminated.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/timed-out.d.ts +12 -0
- package/dist/esm/nimble-components/src/icons/waiting.d.ts +12 -0
- package/dist/esm/nimble-components/src/text-field/types.d.ts +1 -1
- package/dist/esm/nimble-components/src/theme-provider/design-token-comments.d.ts +6 -0
- package/dist/esm/nimble-components/src/theme-provider/design-token-names.d.ts +11 -0
- package/dist/esm/nimble-components/src/theme-provider/design-tokens.d.ts +4 -10
- package/dist/esm/nimble-components/src/theme-provider/index.d.ts +13 -8
- package/dist/esm/nimble-components/src/theme-provider/template.d.ts +2 -2
- package/dist/esm/nimble-components/src/theme-provider/types.d.ts +2 -2
- package/dist/esm/nimble-components/src/tree-view/types.d.ts +1 -1
- package/dist/esm/nimble-components/src/utilities/style/direction.d.ts +34 -0
- package/dist/esm/nimble-components/src/utilities/style/prefers-reduced-motion.d.ts +1 -5
- package/dist/esm/nimble-components/src/utilities/style/theme.d.ts +44 -0
- package/dist/esm/number-field/styles.js +3 -3
- package/dist/esm/number-field/styles.js.map +1 -1
- package/dist/esm/tabs-toolbar/styles.js +3 -2
- package/dist/esm/tabs-toolbar/styles.js.map +1 -1
- package/dist/esm/text-field/styles.js +20 -8
- package/dist/esm/text-field/styles.js.map +1 -1
- package/dist/esm/text-field/types.d.ts +1 -1
- package/dist/esm/text-field/types.js.map +1 -1
- package/dist/esm/theme-provider/design-token-comments.d.ts +6 -0
- package/dist/esm/theme-provider/design-token-comments.js +45 -0
- package/dist/esm/theme-provider/design-token-comments.js.map +1 -0
- package/dist/esm/theme-provider/design-token-names.d.ts +11 -0
- package/dist/esm/theme-provider/design-token-names.js +51 -0
- package/dist/esm/theme-provider/design-token-names.js.map +1 -0
- package/dist/esm/theme-provider/design-tokens.d.ts +4 -10
- package/dist/esm/theme-provider/design-tokens.js +86 -109
- package/dist/esm/theme-provider/design-tokens.js.map +1 -1
- package/dist/esm/theme-provider/index.d.ts +13 -8
- package/dist/esm/theme-provider/index.js +39 -6
- package/dist/esm/theme-provider/index.js.map +1 -1
- package/dist/esm/theme-provider/template.d.ts +2 -2
- package/dist/esm/theme-provider/template.js.map +1 -1
- package/dist/esm/theme-provider/types.d.ts +2 -2
- package/dist/esm/theme-provider/types.js +7 -7
- package/dist/esm/theme-provider/types.js.map +1 -1
- package/dist/esm/tree-item/styles.js +9 -7
- package/dist/esm/tree-item/styles.js.map +1 -1
- package/dist/esm/tree-view/types.d.ts +1 -1
- package/dist/esm/tree-view/types.js.map +1 -1
- package/dist/esm/utilities/style/direction.d.ts +34 -0
- package/dist/esm/utilities/style/direction.js +78 -0
- package/dist/esm/utilities/style/direction.js.map +1 -0
- package/dist/esm/utilities/style/focus.js +1 -1
- package/dist/esm/utilities/style/focus.js.map +1 -1
- package/dist/esm/utilities/style/prefers-reduced-motion.d.ts +1 -5
- package/dist/esm/utilities/style/prefers-reduced-motion.js +1 -7
- package/dist/esm/utilities/style/prefers-reduced-motion.js.map +1 -1
- package/dist/esm/utilities/style/theme.d.ts +44 -0
- package/dist/esm/utilities/style/theme.js +116 -0
- package/dist/esm/utilities/style/theme.js.map +1 -0
- package/dist/fonts.scss +3 -0
- package/dist/tokens-internal.scss +255 -0
- package/dist/tokens.scss +132 -0
- package/package.json +10 -6
package/README.md
CHANGED
|
@@ -28,30 +28,52 @@ If you have an existing application that incorporates a module bundler like [Web
|
|
|
28
28
|
|
|
29
29
|
## Theming
|
|
30
30
|
|
|
31
|
-
This package contains a theming system which enables changing the appearance of controls based on user preferences or application designs.
|
|
31
|
+
This package contains a theming system which enables changing the appearance of controls based on user preferences or application designs.
|
|
32
|
+
|
|
33
|
+
The theming system is built on a set of design tokens that define different properties such as fonts, colors, etc. The Nimble components are configured to use these theme-aware design tokens. An application should use the same theme-aware design tokens for parts outside of the components.
|
|
32
34
|
|
|
33
35
|
The theming system is composed of:
|
|
34
36
|
|
|
35
|
-
1.
|
|
36
|
-
2.
|
|
37
|
+
1. Theme-aware design tokens that are used in your stylesheets.
|
|
38
|
+
2. A `<nimble-theme-provider>` component that is added around your page contents and is configured for a theme.
|
|
37
39
|
|
|
38
40
|
### Using the Theming System
|
|
39
41
|
|
|
40
42
|
1. Include the `<nimble-theme-provider>` element on your page and set its `theme` attribute. The theme provider has no appearance of its own but defines tokens that are used by descendant components. It will typically be at the root of the application:
|
|
41
43
|
|
|
42
|
-
```html
|
|
43
|
-
<body>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
</body>
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
2.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
44
|
+
```html
|
|
45
|
+
<body>
|
|
46
|
+
<nimble-theme-provider theme="light">
|
|
47
|
+
<!-- everything else -->
|
|
48
|
+
</nimble-theme-provider>
|
|
49
|
+
</body>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
2. Include one import in your styles for the Nimble fonts. Nimble recommends using SCSS for capabilities such as build time property checking.
|
|
53
|
+
|
|
54
|
+
```scss
|
|
55
|
+
@import '~@ni/nimble-components/dist/fonts';
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
3. As needed, add Nimble components as descendants of the theme provider and they will inherit the theme.
|
|
59
|
+
|
|
60
|
+
4. As needed, import the theme-aware design tokens in each SCSS file that will leverage the tokens for other parts of your application (for colors, fonts, etc).
|
|
61
|
+
|
|
62
|
+
```scss
|
|
63
|
+
@import '~@ni/nimble-components/dist/tokens';
|
|
64
|
+
|
|
65
|
+
.my-element {
|
|
66
|
+
font-family: $ni-nimble-font-family;
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Customizing
|
|
71
|
+
|
|
72
|
+
The goal of the Nimble design system is to provide a consistent style for applications. If you find that Nimble does not expose colors, fonts, sizes, etc. that you need in an application get in touch with the Nimble squad.
|
|
73
|
+
|
|
74
|
+
## Accessibility
|
|
75
|
+
|
|
76
|
+
For accessibility information related to nimble components, see [ACCESSIBILITY.md](docs/ACCESSIBILITY.md).
|
|
55
77
|
|
|
56
78
|
## Contributing
|
|
57
79
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
3
|
import { focusVisible } from '../utilities/style/focus';
|
|
4
|
-
import {
|
|
4
|
+
import { actionColorRgbPartial, borderColorHover, borderColorRgbPartial, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, iconColor, smallDelay, standardPadding } from '../theme-provider/design-tokens';
|
|
5
5
|
import { appearanceBehavior } from './behaviors';
|
|
6
6
|
import { ButtonAppearance } from './types';
|
|
7
7
|
export const styles = css `
|
|
@@ -21,6 +21,7 @@ export const styles = css `
|
|
|
21
21
|
/*
|
|
22
22
|
Not sure why but this is needed to get buttons with icons and buttons
|
|
23
23
|
without icons to align on the same line when the button is inline-flex
|
|
24
|
+
See: https://github.com/microsoft/fast/issues/5414
|
|
24
25
|
*/ ''}
|
|
25
26
|
vertical-align: middle;
|
|
26
27
|
}
|
|
@@ -97,7 +98,7 @@ export const styles = css `
|
|
|
97
98
|
}
|
|
98
99
|
|
|
99
100
|
slot[name='start']::slotted(*) {
|
|
100
|
-
|
|
101
|
+
${iconColor.cssCustomProperty}: ${buttonContentFontColor};
|
|
101
102
|
}
|
|
102
103
|
|
|
103
104
|
:host([disabled]) slot[name='start']::slotted(*) {
|
|
@@ -112,7 +113,7 @@ export const styles = css `
|
|
|
112
113
|
.withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
|
|
113
114
|
.control {
|
|
114
115
|
background-color: transparent;
|
|
115
|
-
border-color: rgba(${
|
|
116
|
+
border-color: rgba(${actionColorRgbPartial}, 0.5);
|
|
116
117
|
}
|
|
117
118
|
|
|
118
119
|
.control:hover {
|
|
@@ -132,7 +133,7 @@ export const styles = css `
|
|
|
132
133
|
|
|
133
134
|
.control[disabled] {
|
|
134
135
|
background-color: transparent;
|
|
135
|
-
border-color: rgba(${
|
|
136
|
+
border-color: rgba(${borderColorRgbPartial}, 0.2);
|
|
136
137
|
}
|
|
137
138
|
`), appearanceBehavior(ButtonAppearance.Ghost, css `
|
|
138
139
|
.control {
|
|
@@ -161,17 +162,17 @@ export const styles = css `
|
|
|
161
162
|
}
|
|
162
163
|
`), appearanceBehavior(ButtonAppearance.Block, css `
|
|
163
164
|
.control {
|
|
164
|
-
background-color: rgba(${
|
|
165
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
165
166
|
border-color: transparent;
|
|
166
167
|
}
|
|
167
168
|
|
|
168
169
|
.control:hover {
|
|
169
|
-
background-color: rgba(${
|
|
170
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
170
171
|
border-color: ${borderColorHover};
|
|
171
172
|
}
|
|
172
173
|
|
|
173
174
|
.control${focusVisible} {
|
|
174
|
-
background-color: rgba(${
|
|
175
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
175
176
|
border-color: ${borderColorHover};
|
|
176
177
|
}
|
|
177
178
|
|
|
@@ -181,8 +182,8 @@ export const styles = css `
|
|
|
181
182
|
}
|
|
182
183
|
|
|
183
184
|
.control[disabled] {
|
|
184
|
-
background-color: rgba(${
|
|
185
|
-
border-color: rgba(${
|
|
185
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
186
|
+
border-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
186
187
|
}
|
|
187
188
|
`));
|
|
188
189
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/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;AACxD,OAAO,EACH,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/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;AACxD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,sBAAsB;uBAChB,UAAU;qBACZ,eAAe;;;;;UAK1B;AACE;;;;EAIE,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2B9C,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;;;;;;;;CAU/D;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,qBAAqB;;;;;oCAK1B,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;yCAMhB,qBAAqB;;aAEjD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;;;aAQ5C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;6CAKrB,qBAAqB;oCAC9B,gBAAgB;;;0BAG1B,YAAY;6CACO,qBAAqB;oCAC9B,gBAAgB;;;;wCAIZ,iBAAiB;;;;;6CAKZ,qBAAqB;yCACzB,qBAAqB;;aAEjD,CACJ,CACJ,CAAC"}
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
* @public
|
|
4
4
|
*/
|
|
5
5
|
import type { Button } from '@microsoft/fast-foundation';
|
|
6
|
-
export declare type ButtonAppearanceAttribute = 'outline' | 'ghost' | 'block';
|
|
7
6
|
export declare enum ButtonAppearance {
|
|
8
7
|
Outline = "outline",
|
|
9
8
|
Ghost = "ghost",
|
|
10
9
|
Block = "block"
|
|
11
10
|
}
|
|
11
|
+
export declare type ButtonAppearanceAttribute = `${ButtonAppearance}`;
|
|
12
12
|
export declare type ButtonType = Button['type'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/button/types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/button/types.ts"],"names":[],"mappings":"AAMA,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IACxB,uCAAmB,CAAA;IACnB,mCAAe,CAAA;IACf,mCAAe,CAAA;AACnB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
3
|
import { focusVisible } from '../utilities/style/focus';
|
|
4
|
-
import { borderColor, borderColorHover,
|
|
4
|
+
import { borderColor, borderColorHover, borderColorRgbPartial, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, labelHeight, iconSize, fontFamily, borderWidth, smallDelay } from '../theme-provider/design-tokens';
|
|
5
5
|
export const styles = css `
|
|
6
6
|
${display('inline-flex')}
|
|
7
7
|
|
|
@@ -42,8 +42,8 @@ export const styles = css `
|
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
:host([disabled]) .control {
|
|
45
|
-
background-color: rgba(${
|
|
46
|
-
border-color: rgba(${
|
|
45
|
+
background-color: rgba(${borderColorRgbPartial}, 0.1);
|
|
46
|
+
border-color: rgba(${borderColorRgbPartial}, 0.2);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
:host(:not([disabled]):not(:active):hover) .control {
|
|
@@ -86,7 +86,7 @@ export const styles = css `
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
:host([disabled]) slot[name='checked-indicator'] path {
|
|
89
|
-
fill: rgba(${
|
|
89
|
+
fill: rgba(${borderColorRgbPartial}, 0.3);
|
|
90
90
|
}
|
|
91
91
|
`;
|
|
92
92
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/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,WAAW,EACX,gBAAgB,EAChB,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/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,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,WAAW,EACX,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;sBAcN,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;iCAWyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;uBAKtB,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;uBACV,WAAW;;;;;;iBAMjB,wBAAwB;;;;kBAIvB,QAAQ;iBACT,QAAQ;;;;;gBAKT,WAAW;;;;;;;;;qBASN,qBAAqB;;CAEzC,CAAC"}
|
package/dist/esm/drawer/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { AnimateGroup, AnimateTo } from '@microsoft/fast-animation';
|
|
|
3
3
|
import { attr, Observable } from '@microsoft/fast-element';
|
|
4
4
|
import { DesignSystem, Dialog as FoundationDialog, dialogTemplate as template } from '@microsoft/fast-foundation';
|
|
5
5
|
import { drawerAnimationDurationMs } from '../theme-provider/design-tokens';
|
|
6
|
-
import {
|
|
6
|
+
import { prefersReducedMotionMediaQuery } from '../utilities/style/prefers-reduced-motion';
|
|
7
7
|
import { animationConfig } from './animations';
|
|
8
8
|
import { styles } from './styles';
|
|
9
9
|
import { DrawerLocation, DrawerState } from './types';
|
|
@@ -34,7 +34,7 @@ class Drawer extends FoundationDialog {
|
|
|
34
34
|
super.connectedCallback();
|
|
35
35
|
this.updateAnimationDuration();
|
|
36
36
|
this.animationsEnabledChangedHandler = () => this.updateAnimationDuration();
|
|
37
|
-
|
|
37
|
+
prefersReducedMotionMediaQuery.addEventListener('change', this.animationsEnabledChangedHandler);
|
|
38
38
|
this.onStateChanged();
|
|
39
39
|
const notifier = Observable.getNotifier(this);
|
|
40
40
|
const subscriber = {
|
|
@@ -53,7 +53,7 @@ class Drawer extends FoundationDialog {
|
|
|
53
53
|
this.propertyChangeSubscriber = undefined;
|
|
54
54
|
}
|
|
55
55
|
if (this.animationsEnabledChangedHandler) {
|
|
56
|
-
|
|
56
|
+
prefersReducedMotionMediaQuery.removeEventListener('change', this.animationsEnabledChangedHandler);
|
|
57
57
|
this.animationsEnabledChangedHandler = undefined;
|
|
58
58
|
}
|
|
59
59
|
}
|
|
@@ -122,7 +122,7 @@ class Drawer extends FoundationDialog {
|
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
updateAnimationDuration() {
|
|
125
|
-
const disableAnimations =
|
|
125
|
+
const disableAnimations = prefersReducedMotionMediaQuery.matches;
|
|
126
126
|
this.animationDurationMilliseconds = disableAnimations
|
|
127
127
|
? animationDurationWhenDisabledMilliseconds
|
|
128
128
|
: drawerAnimationDurationMs.getValueFor(this);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EACH,IAAI,EAEJ,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAC1B,cAAc,IAAI,QAAQ,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import { applicationBackgroundColor, borderWidth, contentFontColor, contentFontSize, drawerHeaderFontFamily, drawerHeaderFontSize, drawerWidth, fontFamily, popupBorderColor, popupBoxShadowColor } from '../theme-provider/design-tokens';
|
|
3
|
+
import { applicationBackgroundColor, borderWidth, contentFontColor, contentFontSize, drawerHeaderFontFamily, drawerHeaderFontSize, drawerWidth, fontFamily, popupBorderColor, popupBoxShadowColor, standardPadding } from '../theme-provider/design-tokens';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('block')}
|
|
6
6
|
|
|
@@ -94,19 +94,19 @@ export const styles = css `
|
|
|
94
94
|
*/ ''}
|
|
95
95
|
|
|
96
96
|
::slotted(header) {
|
|
97
|
-
padding:
|
|
97
|
+
padding: ${standardPadding};
|
|
98
98
|
font-family: ${drawerHeaderFontFamily};
|
|
99
99
|
font-size: ${drawerHeaderFontSize};
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
::slotted(section) {
|
|
103
|
-
padding:
|
|
103
|
+
padding: ${standardPadding};
|
|
104
104
|
grid-row: 2;
|
|
105
105
|
overflow-y: auto;
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
::slotted(footer) {
|
|
109
|
-
padding:
|
|
109
|
+
padding: ${standardPadding};
|
|
110
110
|
display: flex;
|
|
111
111
|
justify-content: flex-end;
|
|
112
112
|
grid-row: 3;
|
|
@@ -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,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,mBAAmB,
|
|
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,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;uBASC,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgC3B,CAAA,8DAA+D,EAAE;;;;sBAIjD,gBAAgB;;;;;;;;;;;;;;iBAcrB,WAAW;;4BAEA,0BAA0B;;;;;;;;;;;;;;wBAc9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;uBACX,sBAAsB;qBACxB,oBAAoB;;;;mBAItB,eAAe;;;;;;mBAMf,eAAe;;;;sBAIZ,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
export declare type DrawerLocationAttribute = 'left' | 'right';
|
|
2
1
|
export declare enum DrawerLocation {
|
|
3
2
|
Left = "left",
|
|
4
3
|
Right = "right"
|
|
5
4
|
}
|
|
6
|
-
export declare type
|
|
5
|
+
export declare type DrawerLocationAttribute = `${DrawerLocation}`;
|
|
7
6
|
export declare enum DrawerState {
|
|
8
7
|
Opening = "opening",
|
|
9
8
|
Opened = "opened",
|
|
10
9
|
Closing = "closing",
|
|
11
10
|
Closed = "closed"
|
|
12
11
|
}
|
|
12
|
+
export declare type DrawerStateAttribute = `${DrawerState}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/drawer/types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/drawer/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,+BAAa,CAAA;IACb,iCAAe,CAAA;AACnB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAGD,MAAM,CAAN,IAAY,WAKX;AALD,WAAY,WAAW;IACnB,kCAAmB,CAAA;IACnB,gCAAiB,CAAA;IACjB,kCAAmB,CAAA;IACnB,gCAAiB,CAAA;AACrB,CAAC,EALW,WAAW,KAAX,WAAW,QAKtB"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import { contentFontColor, iconSize, warningColor, failColor, passColor } from '../theme-provider/design-tokens';
|
|
3
|
+
import { contentFontColor, iconSize, warningColor, failColor, passColor, iconColor } from '../theme-provider/design-tokens';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('inline-flex')}
|
|
6
6
|
|
|
@@ -9,7 +9,7 @@ export const styles = css `
|
|
|
9
9
|
user-select: none;
|
|
10
10
|
width: ${iconSize};
|
|
11
11
|
height: ${iconSize};
|
|
12
|
-
|
|
12
|
+
${iconColor.cssCustomProperty}: ${contentFontColor};
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.icon {
|
|
@@ -18,19 +18,19 @@ export const styles = css `
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
:host(.fail) {
|
|
21
|
-
|
|
21
|
+
${iconColor.cssCustomProperty}: ${failColor};
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
:host(.warning) {
|
|
25
|
-
|
|
25
|
+
${iconColor.cssCustomProperty}: ${warningColor};
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
:host(.pass) {
|
|
29
|
-
|
|
29
|
+
${iconColor.cssCustomProperty}: ${passColor};
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.icon svg {
|
|
33
|
-
fill:
|
|
33
|
+
fill: ${iconColor};
|
|
34
34
|
width: 100%;
|
|
35
35
|
height: 100%;
|
|
36
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;iBAKX,QAAQ;kBACP,QAAQ;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;iBAKX,QAAQ;kBACP,QAAQ;UAChB,SAAS,CAAC,iBAAiB,KAAK,gBAAgB;;;;;;;;;UAShD,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;UAIzC,SAAS,CAAC,iBAAiB,KAAK,YAAY;;;;UAI5C,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;gBAInC,SAAS;;;;CAIxB,CAAC"}
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
* Predefined icon status states
|
|
3
3
|
* @public
|
|
4
4
|
*/
|
|
5
|
-
export declare type IconStatusAttribute = 'fail' | 'warning' | 'pass' | 'regular';
|
|
6
5
|
export declare enum IconStatus {
|
|
7
6
|
Fail = "fail",
|
|
8
7
|
Warning = "warning",
|
|
9
8
|
Pass = "pass",
|
|
10
9
|
Regular = "regular"
|
|
11
10
|
}
|
|
11
|
+
export declare type IconStatusAttribute = `${IconStatus}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/icon-base/types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/icon-base/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IAClB,2BAAa,CAAA;IACb,iCAAmB,CAAA;IACnB,2BAAa,CAAA;IACb,iCAAmB,CAAA;AACvB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB"}
|
|
@@ -3,13 +3,22 @@ export { AdminIcon } from './admin';
|
|
|
3
3
|
export { AdministrationIcon } from './administration';
|
|
4
4
|
export { CheckIcon } from './check';
|
|
5
5
|
export { CustomApplicationsIcon } from './custom-applications';
|
|
6
|
+
export { CustomStatusIcon } from './custom-status';
|
|
6
7
|
export { DeleteIcon } from './delete';
|
|
8
|
+
export { DoneIcon } from './done';
|
|
7
9
|
export { FailIcon } from './fail';
|
|
8
10
|
export { LoginIcon } from './login';
|
|
9
11
|
export { LogoutIcon } from './logout';
|
|
12
|
+
export { LoopingIcon } from './looping';
|
|
10
13
|
export { ManagedSystemsIcon } from './managed-systems';
|
|
11
14
|
export { MeasurementDataAnalysisIcon } from './measurement-data-analysis';
|
|
15
|
+
export { RunningIcon } from './running';
|
|
12
16
|
export { SettingsIcon } from './settings';
|
|
17
|
+
export { SkippedIcon } from './skipped';
|
|
18
|
+
export { StatusIcon } from './status';
|
|
13
19
|
export { SucceededIcon } from './succeeded';
|
|
20
|
+
export { TerminatedIcon } from './terminated';
|
|
14
21
|
export { TestInsightsIcon } from './test-insights';
|
|
22
|
+
export { TimedOutIcon } from './timed-out';
|
|
15
23
|
export { UtilitiesIcon } from './utilities';
|
|
24
|
+
export { WaitingIcon } from './waiting';
|
|
@@ -3,14 +3,23 @@ export { AdminIcon } from './admin';
|
|
|
3
3
|
export { AdministrationIcon } from './administration';
|
|
4
4
|
export { CheckIcon } from './check';
|
|
5
5
|
export { CustomApplicationsIcon } from './custom-applications';
|
|
6
|
+
export { CustomStatusIcon } from './custom-status';
|
|
6
7
|
export { DeleteIcon } from './delete';
|
|
8
|
+
export { DoneIcon } from './done';
|
|
7
9
|
export { FailIcon } from './fail';
|
|
8
10
|
export { LoginIcon } from './login';
|
|
9
11
|
export { LogoutIcon } from './logout';
|
|
12
|
+
export { LoopingIcon } from './looping';
|
|
10
13
|
export { ManagedSystemsIcon } from './managed-systems';
|
|
11
14
|
export { MeasurementDataAnalysisIcon } from './measurement-data-analysis';
|
|
15
|
+
export { RunningIcon } from './running';
|
|
12
16
|
export { SettingsIcon } from './settings';
|
|
17
|
+
export { SkippedIcon } from './skipped';
|
|
18
|
+
export { StatusIcon } from './status';
|
|
13
19
|
export { SucceededIcon } from './succeeded';
|
|
20
|
+
export { TerminatedIcon } from './terminated';
|
|
14
21
|
export { TestInsightsIcon } from './test-insights';
|
|
22
|
+
export { TimedOutIcon } from './timed-out';
|
|
15
23
|
export { UtilitiesIcon } from './utilities';
|
|
24
|
+
export { WaitingIcon } from './waiting';
|
|
16
25
|
//# sourceMappingURL=all-icons.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"all-icons.js","sourceRoot":"","sources":["../../../src/icons/all-icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"all-icons.js","sourceRoot":"","sources":["../../../src/icons/all-icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Icon } from '../icon-base';
|
|
2
|
+
declare global {
|
|
3
|
+
interface HTMLElementTagNameMap {
|
|
4
|
+
'nimble-custom-status-icon': CustomStatusIcon;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* The icon component for the 'custom-status' icon
|
|
9
|
+
*/
|
|
10
|
+
export declare class CustomStatusIcon extends Icon {
|
|
11
|
+
constructor();
|
|
12
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { statusCustom16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
|
|
2
|
+
import { Icon, registerIcon } from '../icon-base';
|
|
3
|
+
/**
|
|
4
|
+
* The icon component for the 'custom-status' icon
|
|
5
|
+
*/
|
|
6
|
+
export class CustomStatusIcon extends Icon {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(statusCustom16X16);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
registerIcon('custom-status-icon', CustomStatusIcon);
|
|
12
|
+
//# sourceMappingURL=custom-status.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"custom-status.js","sourceRoot":"","sources":["../../../src/icons/custom-status.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sDAAsD,CAAC;AACzF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,IAAI;IACtC;QACI,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAC7B,CAAC;CACJ;AAED,YAAY,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { statusDone16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
|
|
2
|
+
import { Icon, registerIcon } from '../icon-base';
|
|
3
|
+
/**
|
|
4
|
+
* The icon component for the 'done' icon
|
|
5
|
+
*/
|
|
6
|
+
export class DoneIcon extends Icon {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(statusDone16X16);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
registerIcon('done-icon', DoneIcon);
|
|
12
|
+
//# sourceMappingURL=done.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"done.js","sourceRoot":"","sources":["../../../src/icons/done.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sDAAsD,CAAC;AACvF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,IAAI;IAC9B;QACI,KAAK,CAAC,eAAe,CAAC,CAAC;IAC3B,CAAC;CACJ;AAED,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Icon } from '../icon-base';
|
|
2
|
+
declare global {
|
|
3
|
+
interface HTMLElementTagNameMap {
|
|
4
|
+
'nimble-looping-icon': LoopingIcon;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* The icon component for the 'looping' icon
|
|
9
|
+
*/
|
|
10
|
+
export declare class LoopingIcon extends Icon {
|
|
11
|
+
constructor();
|
|
12
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { statusLooping16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
|
|
2
|
+
import { Icon, registerIcon } from '../icon-base';
|
|
3
|
+
/**
|
|
4
|
+
* The icon component for the 'looping' icon
|
|
5
|
+
*/
|
|
6
|
+
export class LoopingIcon extends Icon {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(statusLooping16X16);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
registerIcon('looping-icon', LoopingIcon);
|
|
12
|
+
//# sourceMappingURL=looping.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"looping.js","sourceRoot":"","sources":["../../../src/icons/looping.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sDAAsD,CAAC;AAC1F,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,IAAI;IACjC;QACI,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAC9B,CAAC;CACJ;AAED,YAAY,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Icon } from '../icon-base';
|
|
2
|
+
declare global {
|
|
3
|
+
interface HTMLElementTagNameMap {
|
|
4
|
+
'nimble-running-icon': RunningIcon;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* The icon component for the 'running' icon
|
|
9
|
+
*/
|
|
10
|
+
export declare class RunningIcon extends Icon {
|
|
11
|
+
constructor();
|
|
12
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { statusRunning16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
|
|
2
|
+
import { Icon, registerIcon } from '../icon-base';
|
|
3
|
+
/**
|
|
4
|
+
* The icon component for the 'running' icon
|
|
5
|
+
*/
|
|
6
|
+
export class RunningIcon extends Icon {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(statusRunning16X16);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
registerIcon('running-icon', RunningIcon);
|
|
12
|
+
//# sourceMappingURL=running.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"running.js","sourceRoot":"","sources":["../../../src/icons/running.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sDAAsD,CAAC;AAC1F,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,IAAI;IACjC;QACI,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAC9B,CAAC;CACJ;AAED,YAAY,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Icon } from '../icon-base';
|
|
2
|
+
declare global {
|
|
3
|
+
interface HTMLElementTagNameMap {
|
|
4
|
+
'nimble-skipped-icon': SkippedIcon;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* The icon component for the 'skipped' icon
|
|
9
|
+
*/
|
|
10
|
+
export declare class SkippedIcon extends Icon {
|
|
11
|
+
constructor();
|
|
12
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { statusSkipped16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
|
|
2
|
+
import { Icon, registerIcon } from '../icon-base';
|
|
3
|
+
/**
|
|
4
|
+
* The icon component for the 'skipped' icon
|
|
5
|
+
*/
|
|
6
|
+
export class SkippedIcon extends Icon {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(statusSkipped16X16);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
registerIcon('skipped-icon', SkippedIcon);
|
|
12
|
+
//# sourceMappingURL=skipped.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skipped.js","sourceRoot":"","sources":["../../../src/icons/skipped.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sDAAsD,CAAC;AAC1F,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,IAAI;IACjC;QACI,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAC9B,CAAC;CACJ;AAED,YAAY,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC"}
|