@ni/nimble-components 27.2.1 → 27.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all-components-bundle.js +14 -6
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +12 -5
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/anchor-menu-item/styles.js +8 -5
- package/dist/esm/anchor-menu-item/styles.js.map +1 -1
- package/dist/esm/menu/styles.js +6 -0
- package/dist/esm/menu/styles.js.map +1 -1
- package/package.json +7 -7
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
3
|
import { bodyDisabledFontColor, bodyFont, bodyFontColor, borderHoverColor, controlHeight, fillHoverColor, fillSelectedColor, iconColor, iconSize } from '../theme-provider/design-tokens';
|
|
4
|
+
import { focusVisible } from '../utilities/style/focus';
|
|
4
5
|
export const styles = css `
|
|
5
6
|
${display('grid')}
|
|
6
7
|
|
|
@@ -8,11 +9,6 @@ export const styles = css `
|
|
|
8
9
|
font: ${bodyFont};
|
|
9
10
|
}
|
|
10
11
|
|
|
11
|
-
:host(:focus-within:not(:active)) {
|
|
12
|
-
outline: 2px solid ${borderHoverColor};
|
|
13
|
-
outline-offset: -2px;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
12
|
:host(:hover) {
|
|
17
13
|
background: ${fillHoverColor};
|
|
18
14
|
}
|
|
@@ -43,6 +39,13 @@ export const styles = css `
|
|
|
43
39
|
cursor: pointer;
|
|
44
40
|
text-decoration: none;
|
|
45
41
|
outline: none;
|
|
42
|
+
padding-left: 8px;
|
|
43
|
+
padding-right: 8px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
a${focusVisible} {
|
|
47
|
+
outline: 2px solid ${borderHoverColor};
|
|
48
|
+
outline-offset: -2px;
|
|
46
49
|
}
|
|
47
50
|
|
|
48
51
|
:host([disabled]) a {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACX,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACX,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;sBAIF,cAAc;;;;sBAId,iBAAiB;;;;;;;;;;;;kBAYrB,aAAa;;;;;;;;iBAQd,aAAa;;;;;;;;;OASvB,YAAY;6BACU,gBAAgB;;;;;iBAK5B,qBAAqB;;;;;;iCAML,QAAQ;;;;;;;;;UAS/B,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;;;;;;;;;;;;;CAkBzB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\n\nimport {\n bodyDisabledFontColor,\n bodyFont,\n bodyFontColor,\n borderHoverColor,\n controlHeight,\n fillHoverColor,\n fillSelectedColor,\n iconColor,\n iconSize\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n ${display('grid')}\n\n :host {\n font: ${bodyFont};\n }\n\n :host(:hover) {\n background: ${fillHoverColor};\n }\n\n :host(:active) {\n background: ${fillSelectedColor};\n }\n\n :host([disabled]) {\n background: transparent;\n }\n\n a {\n display: grid;\n contain: layout;\n overflow: visible;\n box-sizing: border-box;\n height: ${controlHeight};\n grid-template-columns: 1fr;\n column-gap: 8px;\n grid-template-rows: 1fr;\n justify-items: start;\n align-items: center;\n margin: 0 0;\n white-space: nowrap;\n color: ${bodyFontColor};\n fill: currentcolor;\n cursor: pointer;\n text-decoration: none;\n outline: none;\n padding-left: 8px;\n padding-right: 8px;\n }\n\n a${focusVisible} {\n outline: 2px solid ${borderHoverColor};\n outline-offset: -2px;\n }\n\n :host([disabled]) a {\n color: ${bodyDisabledFontColor};\n fill: currentcolor;\n cursor: default;\n }\n\n :host(.indent-1) a {\n grid-template-columns: ${iconSize} 1fr;\n }\n\n [part='start'] {\n display: contents;\n pointer-events: none;\n }\n\n slot[name='start']::slotted(*) {\n ${iconColor.cssCustomProperty}: currentcolor;\n width: ${iconSize};\n height: ${iconSize};\n }\n\n :host(.indent-1) [part='start'] {\n grid-column: 1;\n }\n\n .content {\n pointer-events: none;\n }\n\n :host(.indent-1) .content {\n grid-column: 2;\n }\n\n [part='end'] {\n display: none;\n }\n`;\n"]}
|
package/dist/esm/menu/styles.js
CHANGED
|
@@ -5,6 +5,7 @@ import { applicationBackgroundColor, borderWidth, borderColor, popupBorderColor,
|
|
|
5
5
|
import { Theme } from '../theme-provider/types';
|
|
6
6
|
import { hexToRgbaCssColor } from '../utilities/style/colors';
|
|
7
7
|
import { themeBehavior } from '../utilities/style/theme';
|
|
8
|
+
import { anchorMenuItemTag } from '../anchor-menu-item';
|
|
8
9
|
export const styles = css `
|
|
9
10
|
${display('grid')}
|
|
10
11
|
|
|
@@ -24,6 +25,7 @@ export const styles = css `
|
|
|
24
25
|
|
|
25
26
|
:host([slot='submenu']) {
|
|
26
27
|
margin: 0 ${mediumPadding};
|
|
28
|
+
cursor: default;
|
|
27
29
|
}
|
|
28
30
|
|
|
29
31
|
::slotted(*) {
|
|
@@ -48,6 +50,10 @@ export const styles = css `
|
|
|
48
50
|
padding-top: ${smallPadding};
|
|
49
51
|
padding-bottom: ${smallPadding};
|
|
50
52
|
}
|
|
53
|
+
|
|
54
|
+
::slotted(${anchorMenuItemTag}) {
|
|
55
|
+
padding: 0px;
|
|
56
|
+
}
|
|
51
57
|
`.withBehaviors(themeBehavior(Theme.color, css `
|
|
52
58
|
slot {
|
|
53
59
|
background: ${hexToRgbaCssColor(White, 0.15)};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAEzE,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,wBAAwB,EACxB,oBAAoB,EACpB,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAEzE,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,wBAAwB,EACxB,oBAAoB,EACpB,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;sBAGC,0BAA0B;kBAC9B,WAAW,UAAU,gBAAgB;;qBAElC,YAAY;;sBAEX,mBAAmB;;;;;;;;;oBASrB,aAAa;;;;;;;;;;;;kBAYf,YAAY;;sBAER,WAAW;;;;;;gBAMjB,eAAe;iBACd,oBAAoB;0BACX,wBAAwB;uBAC3B,YAAY;0BACT,YAAY;;;gBAGtB,iBAAiB;;;CAGhC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\n\nimport {\n applicationBackgroundColor,\n borderWidth,\n borderColor,\n popupBorderColor,\n groupHeaderFont,\n groupHeaderTextTransform,\n groupHeaderFontColor,\n smallPadding,\n mediumPadding,\n elevation2BoxShadow,\n menuMinWidth\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { anchorMenuItemTag } from '../anchor-menu-item';\n\nexport const styles = css`\n ${display('grid')}\n\n :host {\n background: ${applicationBackgroundColor};\n border: ${borderWidth} solid ${popupBorderColor};\n margin: 0;\n min-width: ${menuMinWidth};\n width: max-content;\n box-shadow: ${elevation2BoxShadow};\n }\n\n slot {\n padding: 4px;\n display: block;\n }\n\n :host([slot='submenu']) {\n margin: 0 ${mediumPadding};\n cursor: default;\n }\n\n ::slotted(*) {\n padding-left: 8px;\n padding-right: 8px;\n }\n\n ::slotted(hr) {\n box-sizing: content-box;\n height: 2px;\n margin: ${smallPadding};\n border: none;\n background: ${borderColor};\n opacity: 0.1;\n }\n\n ::slotted(header) {\n display: flex;\n font: ${groupHeaderFont};\n color: ${groupHeaderFontColor};\n text-transform: ${groupHeaderTextTransform};\n padding-top: ${smallPadding};\n padding-bottom: ${smallPadding};\n }\n\n ::slotted(${anchorMenuItemTag}) {\n padding: 0px;\n }\n`.withBehaviors(\n themeBehavior(\n Theme.color,\n css`\n slot {\n background: ${hexToRgbaCssColor(White, 0.15)};\n }\n `\n )\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "27.2.
|
|
3
|
+
"version": "27.2.3",
|
|
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",
|
|
7
|
-
"lint": "
|
|
7
|
+
"lint-concurrently": "concurrently --timings --group \"npm:eslint\" \"npm:prettier\"",
|
|
8
8
|
"format": "npm run eslint-fix && npm run prettier-fix",
|
|
9
9
|
"eslint": "eslint .",
|
|
10
10
|
"eslint-fix": "eslint src --fix",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"test-webkit:verbose": "karma start karma.conf.verbose.js --browsers=WebkitHeadless --single-run --skip-tags SkipWebkit",
|
|
45
45
|
"test-webkit:watch": "karma start karma.conf.js --browsers=WebkitHeadless --skip-tags SkipWebkit --watch-extensions js",
|
|
46
46
|
"test-webkit": "karma start karma.conf.js --browsers=WebkitHeadless --single-run --skip-tags SkipWebkit",
|
|
47
|
-
"test": "
|
|
47
|
+
"test-concurrently": "concurrently --timings --group \"npm:test-chrome:verbose\" \"npm:test-firefox:verbose\""
|
|
48
48
|
},
|
|
49
49
|
"repository": {
|
|
50
50
|
"type": "git",
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"@types/d3-scale": "^4.0.2",
|
|
89
89
|
"@types/d3-selection": "^3.0.0",
|
|
90
90
|
"@types/d3-zoom": "^3.0.0",
|
|
91
|
-
"@types/markdown-it": "^13.0.
|
|
91
|
+
"@types/markdown-it": "^13.0.8",
|
|
92
92
|
"comlink": "4.4.1",
|
|
93
93
|
"d3-array": "^3.2.2",
|
|
94
94
|
"d3-random": "^3.0.1",
|
|
@@ -101,12 +101,11 @@
|
|
|
101
101
|
"tslib": "^2.2.0"
|
|
102
102
|
},
|
|
103
103
|
"peerDependencies": {
|
|
104
|
-
"apache-arrow": "^15.0.0"
|
|
105
|
-
"@types/linkify-it": "^3.0.5"
|
|
104
|
+
"apache-arrow": "^15.0.0"
|
|
106
105
|
},
|
|
107
106
|
"devDependencies": {
|
|
108
|
-
"@ni/jasmine-parameterized": "^0.3.0",
|
|
109
107
|
"@ni-private/eslint-config-nimble": "^1.0.0",
|
|
108
|
+
"@ni/jasmine-parameterized": "^0.3.0",
|
|
110
109
|
"@rollup/plugin-commonjs": "^25.0.7",
|
|
111
110
|
"@rollup/plugin-json": "^6.0.0",
|
|
112
111
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
@@ -115,6 +114,7 @@
|
|
|
115
114
|
"@types/jasmine": "^5.1.4",
|
|
116
115
|
"@types/offscreencanvas": "^2019.7.3",
|
|
117
116
|
"@types/webpack-env": "^1.15.2",
|
|
117
|
+
"concurrently": "^8.2.2",
|
|
118
118
|
"css-loader": "^6.7.3",
|
|
119
119
|
"eslint-plugin-jsdoc": "^48.2.0",
|
|
120
120
|
"jasmine-core": "^5.1.2",
|