@ni/nimble-components 32.8.1 → 32.8.2
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 +29 -22
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +28 -21
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/checkbox/styles.js +8 -3
- package/dist/esm/checkbox/styles.js.map +1 -1
- package/dist/esm/checkbox/template.js +21 -19
- package/dist/esm/checkbox/template.js.map +1 -1
- package/package.json +1 -1
|
@@ -5,12 +5,11 @@ import { borderColor, borderHoverColor, borderRgbPartialColor, bodyFontColor, bo
|
|
|
5
5
|
import { userSelectNone } from '../utilities/style/user-select';
|
|
6
6
|
import { styles as errorStyles } from '../patterns/error/styles';
|
|
7
7
|
export const styles = css `
|
|
8
|
-
${display('inline-
|
|
8
|
+
${display('inline-grid')}
|
|
9
9
|
${errorStyles}
|
|
10
10
|
|
|
11
11
|
:host {
|
|
12
12
|
font: ${bodyFont};
|
|
13
|
-
align-items: center;
|
|
14
13
|
cursor: pointer;
|
|
15
14
|
outline: none;
|
|
16
15
|
${userSelectNone}
|
|
@@ -21,8 +20,14 @@ export const styles = css `
|
|
|
21
20
|
cursor: default;
|
|
22
21
|
}
|
|
23
22
|
|
|
24
|
-
.container {
|
|
23
|
+
.outer-container {
|
|
24
|
+
height: 100%;
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
25
27
|
position: relative;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.container {
|
|
26
31
|
display: grid;
|
|
27
32
|
grid-template-columns: auto 1fr auto;
|
|
28
33
|
grid-template-rows: ${bodyFontLineHeight} auto;
|
|
@@ -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,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
|
|
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;;;UAGd,cAAc;sBACF,aAAa;;;;;;;;;;;;;;;;;8BAiBL,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-grid')}\n ${errorStyles}\n\n :host {\n font: ${bodyFont};\n cursor: pointer;\n outline: none;\n ${userSelectNone}\n min-height: ${controlHeight};\n }\n\n :host([disabled]) {\n cursor: default;\n }\n\n .outer-container {\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n }\n\n .container {\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"]}
|
|
@@ -13,27 +13,29 @@ export const template = (_context, definition) => html `
|
|
|
13
13
|
@click="${(x, c) => x.clickHandler(c.event)}"
|
|
14
14
|
class="${x => (x.readOnly ? 'readonly' : '')} ${x => (x.checked ? 'checked' : '')} ${x => (x.indeterminate ? 'indeterminate' : '')}"
|
|
15
15
|
>
|
|
16
|
-
<div
|
|
17
|
-
<div part="
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
16
|
+
<div class="outer-container">
|
|
17
|
+
<div part="container" class="container">
|
|
18
|
+
<div part="control" class="control">
|
|
19
|
+
<slot name="checked-indicator">
|
|
20
|
+
${definition.checkedIndicator || ''}
|
|
21
|
+
</slot>
|
|
22
|
+
<slot name="indeterminate-indicator">
|
|
23
|
+
${definition.indeterminateIndicator || ''}
|
|
24
|
+
</slot>
|
|
25
|
+
</div>
|
|
26
|
+
<label
|
|
27
|
+
part="label"
|
|
28
|
+
class="${x => (x.defaultSlottedNodes?.length
|
|
28
29
|
? 'label'
|
|
29
30
|
: 'label label__hidden')}"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
31
|
+
>
|
|
32
|
+
<slot ${slotted('defaultSlottedNodes')}></slot>
|
|
33
|
+
</label>
|
|
34
|
+
<${iconExclamationMarkTag}
|
|
35
|
+
severity="error"
|
|
36
|
+
class="error-icon"
|
|
37
|
+
></${iconExclamationMarkTag}>
|
|
38
|
+
</div>
|
|
37
39
|
${errorTextTemplate}
|
|
38
40
|
</div>
|
|
39
41
|
</template>
|
|
@@ -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;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
|
|
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;;;;;;0BAMhH,UAAU,CAAC,gBAAgB,IAAI,EAAE;;;0BAGjC,UAAU,CAAC,sBAAsB,IAAI,EAAE;;;;;6BAKpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,EAAE,MAAM;IACxD,CAAC,CAAC,OAAO;IACT,CAAC,CAAC,qBAAqB,CAAC;;4BAEJ,OAAO,CAAC,qBAAqB,CAAC;;mBAEvC,sBAAsB;;;qBAGpB,sBAAsB;;cAE7B,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 class=\"outer-container\">\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 </div>\n ${errorTextTemplate}\n </div>\n </template>\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "32.8.
|
|
3
|
+
"version": "32.8.2",
|
|
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",
|