@ni/nimble-components 32.7.2 → 32.8.0
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 +109 -74
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +143 -118
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/checkbox/index.d.ts +4 -1
- package/dist/esm/checkbox/index.js +10 -0
- package/dist/esm/checkbox/index.js.map +1 -1
- package/dist/esm/checkbox/styles.js +27 -9
- package/dist/esm/checkbox/styles.js.map +1 -1
- package/dist/esm/checkbox/template.js +23 -14
- package/dist/esm/checkbox/template.js.map +1 -1
- package/dist/esm/table/styles.js +1 -0
- package/dist/esm/table/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation';
|
|
2
|
+
import type { ErrorPattern } from '../patterns/error/types';
|
|
2
3
|
declare global {
|
|
3
4
|
interface HTMLElementTagNameMap {
|
|
4
5
|
'nimble-checkbox': Checkbox;
|
|
@@ -7,13 +8,15 @@ declare global {
|
|
|
7
8
|
/**
|
|
8
9
|
* A nimble-styled checkbox control.
|
|
9
10
|
*/
|
|
10
|
-
export declare class Checkbox extends FoundationCheckbox {
|
|
11
|
+
export declare class Checkbox extends FoundationCheckbox implements ErrorPattern {
|
|
11
12
|
/**
|
|
12
13
|
* @public
|
|
13
14
|
* @remarks
|
|
14
15
|
* HTML Attribute: tabindex
|
|
15
16
|
*/
|
|
16
17
|
tabIndex: number;
|
|
18
|
+
errorText?: string;
|
|
19
|
+
errorVisible: boolean;
|
|
17
20
|
/**
|
|
18
21
|
* @internal
|
|
19
22
|
*/
|
|
@@ -8,6 +8,10 @@ import { template } from './template';
|
|
|
8
8
|
* A nimble-styled checkbox control.
|
|
9
9
|
*/
|
|
10
10
|
export class Checkbox extends FoundationCheckbox {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this.errorVisible = false;
|
|
14
|
+
}
|
|
11
15
|
/**
|
|
12
16
|
* @internal
|
|
13
17
|
*/
|
|
@@ -19,6 +23,12 @@ export class Checkbox extends FoundationCheckbox {
|
|
|
19
23
|
__decorate([
|
|
20
24
|
attr({ attribute: 'tabindex', converter: nullableNumberConverter })
|
|
21
25
|
], Checkbox.prototype, "tabIndex", void 0);
|
|
26
|
+
__decorate([
|
|
27
|
+
attr({ attribute: 'error-text' })
|
|
28
|
+
], Checkbox.prototype, "errorText", void 0);
|
|
29
|
+
__decorate([
|
|
30
|
+
attr({ attribute: 'error-visible', mode: 'boolean' })
|
|
31
|
+
], Checkbox.prototype, "errorVisible", void 0);
|
|
22
32
|
const nimbleCheckbox = Checkbox.compose({
|
|
23
33
|
baseName: 'checkbox',
|
|
24
34
|
baseClass: FoundationCheckbox,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAEjC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAEjC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAAhD;;QAaW,iBAAY,GAAG,KAAK,CAAC;IAShC,CAAC;IAPG;;OAEG;IACH,IAAW,gBAAgB;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC;QACpC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,CAAC;IACrD,CAAC;CACJ;AAfmB;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;0CAClC;AAG3B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CACR;AAGnB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CAC1B;AAWhC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,gBAAgB,EAAE,UAAU,CAAC,IAAI;IACjC,sBAAsB,EAAE,UAAU,CAAC,IAAI;CAC1C,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@microsoft/fast-element';\nimport {\n DesignSystem,\n Checkbox as FoundationCheckbox,\n CheckboxOptions\n} from '@microsoft/fast-foundation';\nimport { check16X16, minus16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ErrorPattern } from '../patterns/error/types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-checkbox': Checkbox;\n }\n}\n\n/**\n * A nimble-styled checkbox control.\n */\nexport class Checkbox extends FoundationCheckbox implements ErrorPattern {\n /**\n * @public\n * @remarks\n * HTML Attribute: tabindex\n */\n @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n public override tabIndex!: number;\n\n @attr({ attribute: 'error-text' })\n public errorText?: string;\n\n @attr({ attribute: 'error-visible', mode: 'boolean' })\n public errorVisible = false;\n\n /**\n * @internal\n */\n public get resolvedTabindex(): string | undefined {\n const tabIndex = this.tabIndex ?? 0;\n return this.disabled ? undefined : `${tabIndex}`;\n }\n}\n\nconst nimbleCheckbox = Checkbox.compose<CheckboxOptions>({\n baseName: 'checkbox',\n baseClass: FoundationCheckbox,\n template,\n styles,\n checkedIndicator: check16X16.data,\n indeterminateIndicator: minus16X16.data\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());\nexport const checkboxTag = 'nimble-checkbox';\n"]}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '../utilities/style/display';
|
|
3
3
|
import { focusVisible } from '../utilities/style/focus';
|
|
4
|
-
import { borderColor, borderHoverColor, borderRgbPartialColor, bodyFontColor, bodyDisabledFontColor, controlHeight, iconSize, borderWidth, smallDelay, bodyFont } from '../theme-provider/design-tokens';
|
|
4
|
+
import { borderColor, borderHoverColor, borderRgbPartialColor, bodyFontColor, bodyDisabledFontColor, controlHeight, iconSize, borderWidth, smallDelay, bodyFont, smallPadding, mediumPadding, bodyFontLineHeight } from '../theme-provider/design-tokens';
|
|
5
5
|
import { userSelectNone } from '../utilities/style/user-select';
|
|
6
|
+
import { styles as errorStyles } from '../patterns/error/styles';
|
|
6
7
|
export const styles = css `
|
|
7
8
|
${display('inline-flex')}
|
|
9
|
+
${errorStyles}
|
|
8
10
|
|
|
9
11
|
:host {
|
|
10
12
|
font: ${bodyFont};
|
|
@@ -12,16 +14,25 @@ export const styles = css `
|
|
|
12
14
|
cursor: pointer;
|
|
13
15
|
outline: none;
|
|
14
16
|
${userSelectNone}
|
|
17
|
+
min-height: ${controlHeight};
|
|
15
18
|
}
|
|
16
19
|
|
|
17
20
|
:host([disabled]) {
|
|
18
21
|
cursor: default;
|
|
19
22
|
}
|
|
20
23
|
|
|
24
|
+
.container {
|
|
25
|
+
position: relative;
|
|
26
|
+
display: grid;
|
|
27
|
+
grid-template-columns: auto 1fr auto;
|
|
28
|
+
grid-template-rows: ${bodyFontLineHeight} auto;
|
|
29
|
+
align-items: center;
|
|
30
|
+
width: 100%;
|
|
31
|
+
}
|
|
32
|
+
|
|
21
33
|
.control {
|
|
22
|
-
width:
|
|
23
|
-
height:
|
|
24
|
-
flex-shrink: 0;
|
|
34
|
+
width: ${iconSize};
|
|
35
|
+
height: ${iconSize};
|
|
25
36
|
border: ${borderWidth} solid ${borderColor};
|
|
26
37
|
padding: 2px;
|
|
27
38
|
display: inline-flex;
|
|
@@ -34,6 +45,8 @@ export const styles = css `
|
|
|
34
45
|
* Set it to 0 to ensure the outline is just as high as the control.
|
|
35
46
|
*/ ''}
|
|
36
47
|
line-height: 0;
|
|
48
|
+
grid-column: 1;
|
|
49
|
+
grid-row: 1;
|
|
37
50
|
}
|
|
38
51
|
|
|
39
52
|
@media (prefers-reduced-motion) {
|
|
@@ -61,7 +74,9 @@ export const styles = css `
|
|
|
61
74
|
.label {
|
|
62
75
|
font: inherit;
|
|
63
76
|
color: ${bodyFontColor};
|
|
64
|
-
padding-left:
|
|
77
|
+
padding-left: ${mediumPadding};
|
|
78
|
+
grid-column: 2;
|
|
79
|
+
grid-row: 1 / span 2;
|
|
65
80
|
cursor: inherit;
|
|
66
81
|
}
|
|
67
82
|
|
|
@@ -78,16 +93,13 @@ export const styles = css `
|
|
|
78
93
|
height: ${iconSize};
|
|
79
94
|
width: ${iconSize};
|
|
80
95
|
overflow: visible;
|
|
96
|
+
fill: ${borderColor};
|
|
81
97
|
}
|
|
82
98
|
|
|
83
99
|
:host(.checked:not(.indeterminate)) slot[name='checked-indicator'] {
|
|
84
100
|
display: contents;
|
|
85
101
|
}
|
|
86
102
|
|
|
87
|
-
slot[name='checked-indicator'] svg {
|
|
88
|
-
fill: ${borderColor};
|
|
89
|
-
}
|
|
90
|
-
|
|
91
103
|
:host([disabled]) slot[name='checked-indicator'] svg {
|
|
92
104
|
fill: rgba(${borderRgbPartialColor}, 0.3);
|
|
93
105
|
}
|
|
@@ -109,5 +121,11 @@ export const styles = css `
|
|
|
109
121
|
:host([disabled]) slot[name='indeterminate-indicator'] svg {
|
|
110
122
|
fill: rgba(${borderRgbPartialColor}, 0.3);
|
|
111
123
|
}
|
|
124
|
+
|
|
125
|
+
.error-icon {
|
|
126
|
+
grid-column: 3;
|
|
127
|
+
grid-row: 1;
|
|
128
|
+
margin: 0px ${smallPadding};
|
|
129
|
+
}
|
|
112
130
|
`;
|
|
113
131
|
//# 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,qBAAqB,EACrB,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,QAAQ,EACR,WAAW,EACX,UAAU,EACV,QAAQ,
|
|
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,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,QAAQ,EACR,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,kBAAkB,EACrB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;;;UAId,cAAc;sBACF,aAAa;;;;;;;;;;;8BAWL,kBAAkB;;;;;;iBAM/B,QAAQ;kBACP,QAAQ;kBACR,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;;;iCAayB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;;iBAM5B,aAAa;wBACN,aAAa;;;;;;;iBAOpB,qBAAqB;;;;;;;;;kBASpB,QAAQ;iBACT,QAAQ;;gBAET,WAAW;;;;;;;;qBAQN,qBAAqB;;;;kBAIxB,QAAQ;iBACT,QAAQ;;;;;;;;;gBAST,WAAW;;;;qBAIN,qBAAqB;;;;;;sBAMpB,YAAY;;CAEjC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n borderColor,\n borderHoverColor,\n borderRgbPartialColor,\n bodyFontColor,\n bodyDisabledFontColor,\n controlHeight,\n iconSize,\n borderWidth,\n smallDelay,\n bodyFont,\n smallPadding,\n mediumPadding,\n bodyFontLineHeight\n} from '../theme-provider/design-tokens';\nimport { userSelectNone } from '../utilities/style/user-select';\nimport { styles as errorStyles } from '../patterns/error/styles';\n\nexport const styles = css`\n ${display('inline-flex')}\n ${errorStyles}\n\n :host {\n font: ${bodyFont};\n align-items: center;\n cursor: pointer;\n outline: none;\n ${userSelectNone}\n min-height: ${controlHeight};\n }\n\n :host([disabled]) {\n cursor: default;\n }\n\n .container {\n position: relative;\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-rows: ${bodyFontLineHeight} auto;\n align-items: center;\n width: 100%;\n }\n\n .control {\n width: ${iconSize};\n height: ${iconSize};\n border: ${borderWidth} solid ${borderColor};\n padding: 2px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: box-shadow ${smallDelay};\n ${\n /*\n * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).\n * Set it to 0 to ensure the outline is just as high as the control.\n */ ''\n }\n line-height: 0;\n grid-column: 1;\n grid-row: 1;\n }\n\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n :host([disabled]) .control {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n border-color: rgba(${borderRgbPartialColor}, 0.2);\n }\n\n :host(:not([disabled]):not(:active):hover) .control {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n\n :host(${focusVisible}) .control {\n border-color: ${borderHoverColor};\n outline: 2px solid ${borderHoverColor};\n outline-offset: 1px;\n }\n\n .label {\n font: inherit;\n color: ${bodyFontColor};\n padding-left: ${mediumPadding};\n grid-column: 2;\n grid-row: 1 / span 2;\n cursor: inherit;\n }\n\n :host([disabled]) .label {\n color: ${bodyDisabledFontColor};\n }\n\n slot[name='checked-indicator'],\n slot[name='indeterminate-indicator'] {\n display: none;\n }\n\n slot[name='checked-indicator'] svg {\n height: ${iconSize};\n width: ${iconSize};\n overflow: visible;\n fill: ${borderColor};\n }\n\n :host(.checked:not(.indeterminate)) slot[name='checked-indicator'] {\n display: contents;\n }\n\n :host([disabled]) slot[name='checked-indicator'] svg {\n fill: rgba(${borderRgbPartialColor}, 0.3);\n }\n\n slot[name='indeterminate-indicator'] svg {\n height: ${iconSize};\n width: ${iconSize};\n overflow: visible;\n }\n\n :host(.indeterminate) slot[name='indeterminate-indicator'] {\n display: contents;\n }\n\n slot[name='indeterminate-indicator'] svg {\n fill: ${borderColor};\n }\n\n :host([disabled]) slot[name='indeterminate-indicator'] svg {\n fill: rgba(${borderRgbPartialColor}, 0.3);\n }\n\n .error-icon {\n grid-column: 3;\n grid-row: 1;\n margin: 0px ${smallPadding};\n }\n`;\n"]}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { html, slotted } from '@microsoft/fast-element';
|
|
2
|
+
import { iconExclamationMarkTag } from '../icons/exclamation-mark';
|
|
3
|
+
import { errorTextTemplate } from '../patterns/error/template';
|
|
2
4
|
export const template = (_context, definition) => html `
|
|
3
5
|
<template
|
|
4
6
|
role="checkbox"
|
|
@@ -11,22 +13,29 @@ export const template = (_context, definition) => html `
|
|
|
11
13
|
@click="${(x, c) => x.clickHandler(c.event)}"
|
|
12
14
|
class="${x => (x.readOnly ? 'readonly' : '')} ${x => (x.checked ? 'checked' : '')} ${x => (x.indeterminate ? 'indeterminate' : '')}"
|
|
13
15
|
>
|
|
14
|
-
<div part="
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
16
|
+
<div part="container" class="container">
|
|
17
|
+
<div part="control" class="control">
|
|
18
|
+
<slot name="checked-indicator">
|
|
19
|
+
${definition.checkedIndicator || ''}
|
|
20
|
+
</slot>
|
|
21
|
+
<slot name="indeterminate-indicator">
|
|
22
|
+
${definition.indeterminateIndicator || ''}
|
|
23
|
+
</slot>
|
|
24
|
+
</div>
|
|
25
|
+
<label
|
|
26
|
+
part="label"
|
|
27
|
+
class="${x => (x.defaultSlottedNodes?.length
|
|
25
28
|
? 'label'
|
|
26
29
|
: 'label label__hidden')}"
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
>
|
|
31
|
+
<slot ${slotted('defaultSlottedNodes')}></slot>
|
|
32
|
+
</label>
|
|
33
|
+
<${iconExclamationMarkTag}
|
|
34
|
+
severity="error"
|
|
35
|
+
class="error-icon"
|
|
36
|
+
></${iconExclamationMarkTag}>
|
|
37
|
+
${errorTextTemplate}
|
|
38
|
+
</div>
|
|
30
39
|
</template>
|
|
31
40
|
`;
|
|
32
41
|
//# sourceMappingURL=template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/checkbox/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAqB,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/checkbox/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAqB,MAAM,yBAAyB,CAAC;AAM3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,QAAQ,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAA;;;wBAGV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;yBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;qBACtB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;kBACxD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAChD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;;;;sBAKpH,UAAU,CAAC,gBAAgB,IAAI,EAAE;;;sBAGjC,UAAU,CAAC,sBAAsB,IAAI,EAAE;;;;;yBAKpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,EAAE,MAAM;IACpD,CAAC,CAAC,OAAO;IACT,CAAC,CAAC,qBAAqB,CAAC;;wBAER,OAAO,CAAC,qBAAqB,CAAC;;eAEvC,sBAAsB;;;iBAGpB,sBAAsB;cACzB,iBAAiB;;;CAG9B,CAAC","sourcesContent":["import { html, slotted, type ViewTemplate } from '@microsoft/fast-element';\nimport type {\n CheckboxOptions,\n FoundationElementTemplate\n} from '@microsoft/fast-foundation';\nimport type { Checkbox } from '.';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { errorTextTemplate } from '../patterns/error/template';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<Checkbox>,\nCheckboxOptions\n> = (_context, definition) => html`\n <template\n role=\"checkbox\"\n aria-checked=\"${x => x.checked}\"\n aria-required=\"${x => x.required}\"\n aria-disabled=\"${x => x.disabled}\"\n aria-readonly=\"${x => x.readOnly}\"\n tabindex=\"${x => x.resolvedTabindex}\"\n @keypress=\"${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}\"\n @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n class=\"${x => (x.readOnly ? 'readonly' : '')} ${x => (x.checked ? 'checked' : '')} ${x => (x.indeterminate ? 'indeterminate' : '')}\"\n >\n <div part=\"container\" class=\"container\">\n <div part=\"control\" class=\"control\">\n <slot name=\"checked-indicator\">\n ${definition.checkedIndicator || ''}\n </slot>\n <slot name=\"indeterminate-indicator\">\n ${definition.indeterminateIndicator || ''}\n </slot>\n </div>\n <label\n part=\"label\"\n class=\"${x => (x.defaultSlottedNodes?.length\n ? 'label'\n : 'label label__hidden')}\"\n >\n <slot ${slotted('defaultSlottedNodes')}></slot>\n </label>\n <${iconExclamationMarkTag}\n severity=\"error\"\n class=\"error-icon\"\n ></${iconExclamationMarkTag}>\n ${errorTextTemplate}\n </div>\n </template>\n`;\n"]}
|
package/dist/esm/table/styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,WAAW,EACd,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,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;UAIX,kBAAkB,CAAC,iBAAiB,kDAAkD,aAAa;UACnG;AACE;;;;;GAKG,CAAC,EACR;2BACmB,aAAa,mBAAmB,WAAW,MAAM,aAAa;;;;;YAK7E,YAAY;UACd;AACE;;;IAGA,CAAC,EACL;;;;;UAKE,cAAc;;;;;;;;gBAQR,QAAQ;iBACP,aAAa;;;;;;;;;;;sBAWR,0BAA0B
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,WAAW,EACd,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,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;UAIX,kBAAkB,CAAC,iBAAiB,kDAAkD,aAAa;UACnG;AACE;;;;;GAKG,CAAC,EACR;2BACmB,aAAa,mBAAmB,WAAW,MAAM,aAAa;;;;;YAK7E,YAAY;UACd;AACE;;;IAGA,CAAC,EACL;;;;;UAKE,cAAc;;;;;;;;gBAQR,QAAQ;iBACP,aAAa;;;;;;;;;;;sBAWR,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA+B3B,aAAa;;;;kBAIhB,iBAAiB;uBACZ,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6BtB,gBAAgB;;kBAEZ,iBAAiB;;;mBAGhB,YAAY,CAAC,OAAO;;;;;;wBAMf,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCnB,YAAY;;;;;;;;;;;;;;;;;4BAiBL,mBAAmB;;;;uBAIxB,eAAe;;;;;;;;;;;;;;;;;;;;;;;UAuB5B,gBAAgB;;CAEzB,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;oCAKyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;SAGxD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n applicationBackgroundColor,\n bodyFont,\n bodyFontColor,\n popupBorderColor,\n controlSlimHeight,\n mediumPadding,\n standardPadding,\n tableRowBorderColor,\n borderHoverColor,\n controlHeight,\n tableFitRowsHeight,\n borderWidth\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 { userSelectNone } from '../utilities/style/user-select';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\nimport { ZIndexLevels } from '../utilities/style/types';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n height: 480px;\n ${tableFitRowsHeight.cssCustomProperty}: calc(var(--ni-private-table-scroll-height) + ${controlHeight});\n ${\n /**\n * Set a default maximum height for the table of 40.5 rows plus the header row so\n * that clients don't accidentally create a table that tries to render too many rows at once.\n * If needed, the max-height can be overridden by the client, but setting a default ensures\n * that the max-height is considered if a larger one is needed rather than being overlooked.\n */ ''\n }\n max-height: calc(${controlHeight} + (40.5 * (2 * ${borderWidth} + ${controlHeight})));\n --ni-private-column-divider-width: 2px;\n --ni-private-column-divider-padding: 3px;\n }\n\n :host(${focusVisible}) {\n ${\n /* The table can briefly be focused in some keyboard nav cases (e.g. regaining focus and we\n need to scroll to the previously focused row first). Ensure that we don't get the browser-default\n focus outline in that case.\n ) */ ''\n }\n outline: none;\n }\n\n .disable-select {\n ${userSelectNone}\n }\n\n .table-container {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n width: 100%;\n font: ${bodyFont};\n color: ${bodyFontColor};\n cursor: var(--ni-private-table-cursor-override);\n }\n\n .header-row-container {\n position: sticky;\n top: 0;\n }\n\n .header-row {\n display: flex;\n background: ${applicationBackgroundColor};\n position: relative;\n width: fit-content;\n min-width: max(\n 100%,\n calc(\n var(--ni-private-table-scrollable-min-width) +\n var(--ni-private-table-header-container-margin-right)\n )\n );\n left: var(--ni-private-table-scroll-x);\n align-items: center;\n }\n\n .header-row-action-container {\n display: flex;\n align-items: center;\n }\n\n .checkbox-container {\n display: flex;\n }\n\n .column-headers-container {\n display: grid;\n width: 100%;\n grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n }\n\n .collapse-all-button-container {\n display: flex;\n min-width: ${mediumPadding};\n }\n\n .collapse-all-button {\n height: ${controlSlimHeight};\n margin-left: ${mediumPadding};\n visibility: hidden;\n }\n\n .collapse-all-button.hidden-size-reduced {\n display: none;\n }\n\n .collapse-all-button.visible {\n visibility: visible;\n }\n\n .header-container {\n display: flex;\n align-items: center;\n position: relative;\n }\n\n .header-scrollbar-spacer {\n width: var(--ni-private-table-header-container-margin-right);\n }\n\n .header {\n flex: 1;\n overflow: hidden;\n }\n\n .column-divider {\n border-left: var(--ni-private-column-divider-width) solid\n ${popupBorderColor};\n display: none;\n height: ${controlSlimHeight};\n cursor: col-resize;\n position: absolute;\n z-index: ${ZIndexLevels.zIndex1};\n touch-action: pan-y;\n }\n\n .column-divider:hover,\n .column-divider.divider-active {\n border-color: ${borderHoverColor};\n }\n\n .column-divider.column-active.draggable,\n .header-container:hover .column-divider.draggable {\n display: block;\n }\n\n .column-divider::before {\n content: '';\n position: absolute;\n width: calc(\n var(--ni-private-column-divider-width) +\n (2 * var(--ni-private-column-divider-padding))\n );\n height: 100%;\n left: calc(\n -1 * (var(--ni-private-column-divider-width) +\n var(--ni-private-column-divider-padding))\n );\n }\n\n .column-divider.left {\n left: -1px;\n }\n\n .column-divider.right {\n left: calc(100% - 1px);\n }\n\n .table-viewport {\n overflow: auto;\n display: block;\n height: 100%;\n position: relative;\n }\n\n .table-viewport${focusVisible} {\n outline: none;\n }\n\n .table-scroll {\n pointer-events: none;\n position: absolute;\n top: 0px;\n width: 100%;\n height: var(--ni-private-table-scroll-height);\n }\n\n .table-row-container {\n width: fit-content;\n min-width: max(100%, var(--ni-private-table-scrollable-min-width));\n position: relative;\n top: var(--ni-private-table-row-container-top);\n background-color: ${tableRowBorderColor};\n }\n\n .selection-checkbox {\n margin-left: ${standardPadding};\n }\n\n .selection-checkbox::part(label) {\n padding-left: 0px;\n }\n\n .group-row {\n position: relative;\n --ni-private-table-cell-focus-offset-multiplier: 0;\n }\n\n .row {\n position: relative;\n --ni-private-table-cell-focus-offset-multiplier: 0;\n }\n\n .collapse-all-visible .row,\n .collapse-all-visible .group-row {\n --ni-private-table-cell-focus-offset-multiplier: 1;\n }\n\n .accessibly-hidden {\n ${accessiblyHidden}\n }\n`.withBehaviors(\n themeBehavior(\n Theme.color,\n css`\n .table-row-container::before {\n content: '';\n width: 100%;\n height: 100%;\n background-color: ${hexToRgbaCssColor(White, 0.1)};\n position: absolute;\n }\n `\n )\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "32.
|
|
3
|
+
"version": "32.8.0",
|
|
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",
|