@ni/nimble-components 33.12.1 → 34.0.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 +43 -1
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +3 -2
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/number-field/index.d.ts +10 -0
- package/dist/esm/number-field/index.js +43 -0
- package/dist/esm/number-field/index.js.map +1 -1
- package/dist/esm/number-field/template.js +1 -1
- package/dist/esm/number-field/template.js.map +1 -1
- package/dist/esm/number-field/testing/number-field.pageobject.d.ts +23 -0
- package/dist/esm/number-field/testing/number-field.pageobject.js +38 -0
- package/dist/esm/number-field/testing/number-field.pageobject.js.map +1 -0
- package/package.json +2 -2
|
@@ -29,7 +29,17 @@ export declare class NumberField extends NumberField_base {
|
|
|
29
29
|
appearance: NumberFieldAppearance;
|
|
30
30
|
fullBleed: boolean;
|
|
31
31
|
appearanceReadOnly: boolean;
|
|
32
|
+
private decimalSeparator;
|
|
33
|
+
private inputFilterRegExp;
|
|
34
|
+
private readonly langSubscriber;
|
|
32
35
|
connectedCallback(): void;
|
|
36
|
+
disconnectedCallback(): void;
|
|
37
|
+
protected sanitizeInput(inputText: string): string;
|
|
38
|
+
protected syncValueFromInnerControl(): void;
|
|
39
|
+
protected syncValueToInnerControl(): void;
|
|
40
|
+
private updateDecimalSeparatorAndInputFilter;
|
|
41
|
+
private getSeparatorForLanguange;
|
|
42
|
+
private buildFilterRegExp;
|
|
33
43
|
}
|
|
34
44
|
export declare const numberFieldTag = "nimble-number-field";
|
|
35
45
|
export {};
|
|
@@ -12,6 +12,7 @@ import { iconExclamationMarkTag } from '../icons/exclamation-mark';
|
|
|
12
12
|
import { numericDecrementLabel, numericIncrementLabel } from '../label-provider/core/label-tokens';
|
|
13
13
|
import { template } from './template';
|
|
14
14
|
import { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';
|
|
15
|
+
import { lang } from '../theme-provider';
|
|
15
16
|
/**
|
|
16
17
|
* A nimble-styled HTML number input
|
|
17
18
|
*/
|
|
@@ -21,11 +22,53 @@ export class NumberField extends mixinErrorPattern(mixinRequiredVisiblePattern(F
|
|
|
21
22
|
this.appearance = NumberFieldAppearance.underline;
|
|
22
23
|
this.fullBleed = false;
|
|
23
24
|
this.appearanceReadOnly = false;
|
|
25
|
+
this.decimalSeparator = '.';
|
|
26
|
+
this.inputFilterRegExp = this.buildFilterRegExp(this.decimalSeparator);
|
|
27
|
+
this.langSubscriber = {
|
|
28
|
+
handleChange: () => this.updateDecimalSeparatorAndInputFilter()
|
|
29
|
+
};
|
|
24
30
|
}
|
|
25
31
|
connectedCallback() {
|
|
26
32
|
super.connectedCallback();
|
|
27
33
|
// This is a workaround for FAST issue: https://github.com/microsoft/fast/issues/6148
|
|
28
34
|
this.control.setAttribute('role', 'spinbutton');
|
|
35
|
+
this.updateDecimalSeparatorAndInputFilter();
|
|
36
|
+
lang.subscribe(this.langSubscriber, this);
|
|
37
|
+
}
|
|
38
|
+
disconnectedCallback() {
|
|
39
|
+
super.disconnectedCallback();
|
|
40
|
+
lang.unsubscribe(this.langSubscriber, this);
|
|
41
|
+
}
|
|
42
|
+
sanitizeInput(inputText) {
|
|
43
|
+
return inputText.replace(this.inputFilterRegExp, '');
|
|
44
|
+
}
|
|
45
|
+
// this.value <-- this.control.value
|
|
46
|
+
syncValueFromInnerControl() {
|
|
47
|
+
this.value = this.decimalSeparator !== '.'
|
|
48
|
+
? this.control.value.replace(this.decimalSeparator, '.')
|
|
49
|
+
: this.control.value;
|
|
50
|
+
}
|
|
51
|
+
// this.value --> this.control.value
|
|
52
|
+
syncValueToInnerControl() {
|
|
53
|
+
this.control.value = this.decimalSeparator !== '.'
|
|
54
|
+
? this.value.replace('.', this.decimalSeparator)
|
|
55
|
+
: this.value;
|
|
56
|
+
}
|
|
57
|
+
updateDecimalSeparatorAndInputFilter() {
|
|
58
|
+
const previousSeparator = this.decimalSeparator;
|
|
59
|
+
this.decimalSeparator = this.getSeparatorForLanguange(lang.getValueFor(this));
|
|
60
|
+
if (this.decimalSeparator !== previousSeparator) {
|
|
61
|
+
this.inputFilterRegExp = this.buildFilterRegExp(this.decimalSeparator);
|
|
62
|
+
this.control.value = this.control.value.replace(previousSeparator, this.decimalSeparator);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
getSeparatorForLanguange(language) {
|
|
66
|
+
return Intl.NumberFormat(language)
|
|
67
|
+
.formatToParts(1.1)
|
|
68
|
+
.find(x => x.type === 'decimal').value;
|
|
69
|
+
}
|
|
70
|
+
buildFilterRegExp(decimalSeparator) {
|
|
71
|
+
return new RegExp(`[^0-9\\-+e${decimalSeparator}]`, 'g');
|
|
29
72
|
}
|
|
30
73
|
}
|
|
31
74
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, html } from '@ni/fast-element';\nimport {\n DesignSystem,\n NumberField as FoundationNumberField,\n type DesignTokenSubscriber,\n type NumberFieldOptions\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { NumberFieldAppearance } from './types';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { mixinErrorPattern } from '../patterns/error/types';\nimport { buttonTag } from '../button';\nimport { iconMinusWideTag } from '../icons/minus-wide';\nimport { iconAddTag } from '../icons/add';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport {\n numericDecrementLabel,\n numericIncrementLabel\n} from '../label-provider/core/label-tokens';\nimport { template } from './template';\nimport { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';\nimport { lang } from '../theme-provider';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-number-field': NumberField;\n }\n}\n\n/**\n * A nimble-styled HTML number input\n */\nexport class NumberField extends mixinErrorPattern(\n mixinRequiredVisiblePattern(FoundationNumberField)\n) {\n @attr\n public appearance: NumberFieldAppearance = NumberFieldAppearance.underline;\n\n @attr({ attribute: 'full-bleed', mode: 'boolean' })\n public fullBleed = false;\n\n @attr({ attribute: 'appearance-readonly', mode: 'boolean' })\n public appearanceReadOnly = false;\n\n private decimalSeparator = '.';\n private inputFilterRegExp = this.buildFilterRegExp(this.decimalSeparator);\n\n private readonly langSubscriber: DesignTokenSubscriber<typeof lang> = {\n handleChange: () => this.updateDecimalSeparatorAndInputFilter()\n };\n\n public override connectedCallback(): void {\n super.connectedCallback();\n\n // This is a workaround for FAST issue: https://github.com/microsoft/fast/issues/6148\n this.control.setAttribute('role', 'spinbutton');\n this.updateDecimalSeparatorAndInputFilter();\n lang.subscribe(this.langSubscriber, this);\n }\n\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n\n lang.unsubscribe(this.langSubscriber, this);\n }\n\n protected override sanitizeInput(inputText: string): string {\n return inputText.replace(this.inputFilterRegExp, '');\n }\n\n // this.value <-- this.control.value\n protected override syncValueFromInnerControl(): void {\n this.value = this.decimalSeparator !== '.'\n ? this.control.value.replace(this.decimalSeparator, '.')\n : this.control.value;\n }\n\n // this.value --> this.control.value\n protected override syncValueToInnerControl(): void {\n this.control.value = this.decimalSeparator !== '.'\n ? this.value.replace('.', this.decimalSeparator)\n : this.value;\n }\n\n private updateDecimalSeparatorAndInputFilter(): void {\n const previousSeparator = this.decimalSeparator;\n this.decimalSeparator = this.getSeparatorForLanguange(\n lang.getValueFor(this)\n );\n if (this.decimalSeparator !== previousSeparator) {\n this.inputFilterRegExp = this.buildFilterRegExp(\n this.decimalSeparator\n );\n this.control.value = this.control.value.replace(\n previousSeparator,\n this.decimalSeparator\n );\n }\n }\n\n private getSeparatorForLanguange(language: string): string {\n return Intl.NumberFormat(language)\n .formatToParts(1.1)\n .find(x => x.type === 'decimal')!.value;\n }\n\n private buildFilterRegExp(decimalSeparator: string): RegExp {\n return new RegExp(`[^0-9\\\\-+e${decimalSeparator}]`, 'g');\n }\n}\n\n/**\n * A function that returns a number-field registration for configuring the component with a DesignSystem.\n *\n * @public\n * @remarks\n * Generates HTML Element: \\<nimble-number-field\\>\n *\n */\nconst nimbleNumberField = NumberField.compose<NumberFieldOptions>({\n baseName: 'number-field',\n baseClass: FoundationNumberField,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n },\n stepDownGlyph: html<NumberField>`\n <${buttonTag}\n class=\"step-up-down-button\"\n appearance=\"ghost\"\n content-hidden\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n ${x => numericDecrementLabel.getValueFor(x)}\n <${iconMinusWideTag}\n slot=\"start\"\n >\n </${iconMinusWideTag}>\n </${buttonTag}>\n `,\n stepUpGlyph: html<NumberField>`\n <${buttonTag}\n class=\"step-up-down-button\"\n appearance=\"ghost\"\n content-hidden\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n ${x => numericIncrementLabel.getValueFor(x)}\n <${iconAddTag}\n slot=\"start\">\n </${iconAddTag}>\n </${buttonTag}>\n `,\n end: html<NumberField>`\n <${iconExclamationMarkTag}\n severity=\"error\"\n class=\"error-icon\"\n ></${iconExclamationMarkTag}>\n ${errorTextTemplate}\n `\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());\nexport const numberFieldTag = 'nimble-number-field';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/number-field/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, slotted, when } from '@ni/fast-element';\nimport type { ViewTemplate } from '@ni/fast-element';\nimport {\n endSlotTemplate,\n type FoundationElementTemplate,\n type NumberFieldOptions,\n startSlotTemplate\n} from '@ni/fast-foundation';\nimport type { NumberField } from '.';\nimport { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';\n\nconst labelTemplate = createRequiredVisibleLabelTemplate(\n html<NumberField>`<label\n part=\"label\"\n for=\"control\"\n class=\"${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}\"\n >\n <slot ${slotted('defaultSlottedNodes')}></slot>\n </label>`\n);\n\n/**\n * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.\n * @public\n */\nexport const template: FoundationElementTemplate<\nViewTemplate<NumberField>,\nNumberFieldOptions\n> = (context, definition) => html`\n <template class=\"${x => (x.readOnly ? 'readonly' : '')}\">\n ${labelTemplate}\n <div class=\"root\" part=\"root\">\n ${startSlotTemplate(context, definition)}\n <input\n class=\"control\"\n part=\"control\"\n id=\"control\"\n @input=\"${x => x.handleTextInput()}\"\n @change=\"${x => x.handleChange()}\"\n @keydown=\"${(x, c) => x.handleKeyDown(c.event as KeyboardEvent)}\"\n @blur=\"${x => x.handleBlur()}\"\n ?autofocus=\"${x => x.autofocus}\"\n ?disabled=\"${x => x.disabled}\"\n list=\"${x => x.list}\"\n maxlength=\"${x => x.maxlength}\"\n minlength=\"${x => x.minlength}\"\n placeholder=\"${x => x.placeholder}\"\n ?readonly=\"${x => x.readOnly}\"\n ?required=\"${x => x.required}\"\n size=\"${x => x.size}\"\n type=\"text\"\n inputmode=\"
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/number-field/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, slotted, when } from '@ni/fast-element';\nimport type { ViewTemplate } from '@ni/fast-element';\nimport {\n endSlotTemplate,\n type FoundationElementTemplate,\n type NumberFieldOptions,\n startSlotTemplate\n} from '@ni/fast-foundation';\nimport type { NumberField } from '.';\nimport { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';\n\nconst labelTemplate = createRequiredVisibleLabelTemplate(\n html<NumberField>`<label\n part=\"label\"\n for=\"control\"\n class=\"${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}\"\n >\n <slot ${slotted('defaultSlottedNodes')}></slot>\n </label>`\n);\n\n/**\n * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.\n * @public\n */\nexport const template: FoundationElementTemplate<\nViewTemplate<NumberField>,\nNumberFieldOptions\n> = (context, definition) => html`\n <template class=\"${x => (x.readOnly ? 'readonly' : '')}\">\n ${labelTemplate}\n <div class=\"root\" part=\"root\">\n ${startSlotTemplate(context, definition)}\n <input\n class=\"control\"\n part=\"control\"\n id=\"control\"\n @input=\"${x => x.handleTextInput()}\"\n @change=\"${x => x.handleChange()}\"\n @keydown=\"${(x, c) => x.handleKeyDown(c.event as KeyboardEvent)}\"\n @blur=\"${x => x.handleBlur()}\"\n ?autofocus=\"${x => x.autofocus}\"\n ?disabled=\"${x => x.disabled}\"\n list=\"${x => x.list}\"\n maxlength=\"${x => x.maxlength}\"\n minlength=\"${x => x.minlength}\"\n placeholder=\"${x => x.placeholder}\"\n ?readonly=\"${x => x.readOnly}\"\n ?required=\"${x => x.required}\"\n size=\"${x => x.size}\"\n type=\"text\"\n inputmode=\"text\"\n min=\"${x => x.min}\"\n max=\"${x => x.max}\"\n step=\"${x => x.step}\"\n aria-atomic=\"${x => x.ariaAtomic}\"\n aria-busy=\"${x => x.ariaBusy}\"\n aria-controls=\"${x => x.ariaControls}\"\n aria-current=\"${x => x.ariaCurrent}\"\n aria-describedby=\"${x => x.ariaDescribedby}\"\n aria-details=\"${x => x.ariaDetails}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-errormessage=\"${x => x.ariaErrormessage}\"\n aria-flowto=\"${x => x.ariaFlowto}\"\n aria-haspopup=\"${x => x.ariaHaspopup}\"\n aria-hidden=\"${x => x.ariaHidden}\"\n aria-invalid=\"${x => x.ariaInvalid}\"\n aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n aria-label=\"${x => x.ariaLabel}\"\n aria-labelledby=\"${x => x.ariaLabelledby}\"\n aria-live=\"${x => x.ariaLive}\"\n aria-owns=\"${x => x.ariaOwns}\"\n aria-relevant=\"${x => x.ariaRelevant}\"\n aria-roledescription=\"${x => x.ariaRoledescription}\"\n aria-required=\"${x => x.requiredVisible}\"\n ${ref('control')}\n />\n ${when(\n x => !x.hideStep && !x.readOnly && !x.disabled,\n html<NumberField>`\n <div class=\"controls\" part=\"controls\">\n <div\n class=\"step-up\"\n part=\"step-up\"\n @click=\"${x => x.stepUp()}\"\n >\n <slot name=\"step-up-glyph\">\n ${definition.stepUpGlyph || ''}\n </slot>\n </div>\n <div\n class=\"step-down\"\n part=\"step-down\"\n @click=\"${x => x.stepDown()}\"\n >\n <slot name=\"step-down-glyph\">\n ${definition.stepDownGlyph || ''}\n </slot>\n </div>\n </div>\n `\n )}\n ${endSlotTemplate(context, definition)}\n </div>\n </template>\n`;\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { NumberField } from '..';
|
|
2
|
+
/**
|
|
3
|
+
* Page object for `nimble-number-field` component to provide consistent ways
|
|
4
|
+
* of querying and interacting with the component during tests.
|
|
5
|
+
*/
|
|
6
|
+
export declare class NumberFieldPageObject {
|
|
7
|
+
protected readonly numberFieldElement: NumberField;
|
|
8
|
+
constructor(numberFieldElement: NumberField);
|
|
9
|
+
/**
|
|
10
|
+
* @returns The string visible in the control.
|
|
11
|
+
*/
|
|
12
|
+
getDisplayValue(): string;
|
|
13
|
+
/**
|
|
14
|
+
* Inputs the given text via a single input event.
|
|
15
|
+
*/
|
|
16
|
+
inputText(text: string): void;
|
|
17
|
+
/**
|
|
18
|
+
* Inputs the given text via a single input event, replacing any text that was already there.
|
|
19
|
+
*/
|
|
20
|
+
setText(text: string): void;
|
|
21
|
+
private inputTextInternal;
|
|
22
|
+
private get inputControl();
|
|
23
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Page object for `nimble-number-field` component to provide consistent ways
|
|
3
|
+
* of querying and interacting with the component during tests.
|
|
4
|
+
*/
|
|
5
|
+
export class NumberFieldPageObject {
|
|
6
|
+
constructor(numberFieldElement) {
|
|
7
|
+
this.numberFieldElement = numberFieldElement;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* @returns The string visible in the control.
|
|
11
|
+
*/
|
|
12
|
+
getDisplayValue() {
|
|
13
|
+
return this.inputControl.value;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Inputs the given text via a single input event.
|
|
17
|
+
*/
|
|
18
|
+
inputText(text) {
|
|
19
|
+
this.inputTextInternal(text);
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Inputs the given text via a single input event, replacing any text that was already there.
|
|
23
|
+
*/
|
|
24
|
+
setText(text) {
|
|
25
|
+
this.inputTextInternal(text, true);
|
|
26
|
+
}
|
|
27
|
+
inputTextInternal(text, replace = false) {
|
|
28
|
+
this.inputControl.value = text;
|
|
29
|
+
this.inputControl.dispatchEvent(new InputEvent('input', {
|
|
30
|
+
data: text,
|
|
31
|
+
inputType: replace ? 'deleteContentForward' : 'insertText'
|
|
32
|
+
}));
|
|
33
|
+
}
|
|
34
|
+
get inputControl() {
|
|
35
|
+
return this.numberFieldElement.shadowRoot.querySelector('input');
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=number-field.pageobject.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"number-field.pageobject.js","sourceRoot":"","sources":["../../../../src/number-field/testing/number-field.pageobject.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,OAAO,qBAAqB;IAC9B,YAAsC,kBAA+B;QAA/B,uBAAkB,GAAlB,kBAAkB,CAAa;IAAG,CAAC;IAEzE;;OAEG;IACI,eAAe;QAClB,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;IACnC,CAAC;IAED;;OAEG;IACI,SAAS,CAAC,IAAY;QACzB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAED;;OAEG;IACI,OAAO,CAAC,IAAY;QACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACvC,CAAC;IAEO,iBAAiB,CAAC,IAAY,EAAE,OAAO,GAAG,KAAK;QACnD,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC;QAC/B,IAAI,CAAC,YAAY,CAAC,aAAa,CAC3B,IAAI,UAAU,CAAC,OAAO,EAAE;YACpB,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,YAAY;SAC7D,CAAC,CACL,CAAC;IACN,CAAC;IAED,IAAY,YAAY;QACpB,OAAO,IAAI,CAAC,kBAAkB,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;IACvE,CAAC;CACJ","sourcesContent":["import type { NumberField } from '..';\n\n/**\n * Page object for `nimble-number-field` component to provide consistent ways\n * of querying and interacting with the component during tests.\n */\nexport class NumberFieldPageObject {\n public constructor(protected readonly numberFieldElement: NumberField) {}\n\n /**\n * @returns The string visible in the control.\n */\n public getDisplayValue(): string {\n return this.inputControl.value;\n }\n\n /**\n * Inputs the given text via a single input event.\n */\n public inputText(text: string): void {\n this.inputTextInternal(text);\n }\n\n /**\n * Inputs the given text via a single input event, replacing any text that was already there.\n */\n public setText(text: string): void {\n this.inputTextInternal(text, true);\n }\n\n private inputTextInternal(text: string, replace = false): void {\n this.inputControl.value = text;\n this.inputControl.dispatchEvent(\n new InputEvent('input', {\n data: text,\n inputType: replace ? 'deleteContentForward' : 'insertText'\n })\n );\n }\n\n private get inputControl(): HTMLInputElement {\n return this.numberFieldElement.shadowRoot!.querySelector('input')!;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "34.0.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",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"dependencies": {
|
|
62
62
|
"@ni/fast-colors": "^10.0.0",
|
|
63
63
|
"@ni/fast-element": "^10.0.0",
|
|
64
|
-
"@ni/fast-foundation": "^10.
|
|
64
|
+
"@ni/fast-foundation": "^10.1.0",
|
|
65
65
|
"@ni/fast-web-utilities": "^10.0.0",
|
|
66
66
|
"@ni/nimble-tokens": "^8.10.0",
|
|
67
67
|
"@tanstack/table-core": "^8.19.3",
|