@spectrum-web-components/number-field 0.0.0-20241209155954
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 +269 -0
- package/package.json +80 -0
- package/sp-number-field.d.ts +6 -0
- package/sp-number-field.dev.js +5 -0
- package/sp-number-field.dev.js.map +7 -0
- package/sp-number-field.js +2 -0
- package/sp-number-field.js.map +7 -0
- package/src/NumberField.d.ts +117 -0
- package/src/NumberField.dev.js +675 -0
- package/src/NumberField.dev.js.map +7 -0
- package/src/NumberField.js +57 -0
- package/src/NumberField.js.map +7 -0
- package/src/index.d.ts +1 -0
- package/src/index.dev.js +3 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -0
- package/src/index.js.map +7 -0
- package/src/number-field-overrides.css.d.ts +2 -0
- package/src/number-field-overrides.css.dev.js +7 -0
- package/src/number-field-overrides.css.dev.js.map +7 -0
- package/src/number-field-overrides.css.js +4 -0
- package/src/number-field-overrides.css.js.map +7 -0
- package/src/number-field.css.d.ts +2 -0
- package/src/number-field.css.dev.js +7 -0
- package/src/number-field.css.dev.js.map +7 -0
- package/src/number-field.css.js +4 -0
- package/src/number-field.css.js.map +7 -0
- package/src/spectrum-config.js +272 -0
- package/src/spectrum-number-field.css.d.ts +2 -0
- package/src/spectrum-number-field.css.dev.js +7 -0
- package/src/spectrum-number-field.css.dev.js.map +7 -0
- package/src/spectrum-number-field.css.js +4 -0
- package/src/spectrum-number-field.css.js.map +7 -0
package/README.md
ADDED
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
## Description
|
|
2
|
+
|
|
3
|
+
`<sp-number-field>` elements are used for numeric inputs. Upon interaction via the <kbd>ArrowUp</kbd> or <kbd>ArrowDown</kbd> keys, the scroll wheel, or the stepper UI, when not hidden by the `hide-stepper` attribute, the input value incrementally increases or decreases by the value of the `step` attribute. The <kbd>shift</kbd> key can be used to apply steps at 10 time (or the value of the `step-modifier` attribute times) their normal rate.
|
|
4
|
+
|
|
5
|
+
### Usage
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@spectrum-web-components/number-field)
|
|
8
|
+
[](https://bundlephobia.com/result?p=@spectrum-web-components/number-field)
|
|
9
|
+
[](https://webcomponents.dev/edit/TXlwVZIWMyzDa0XPl4tq/src/index.ts)
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
yarn add @spectrum-web-components/number-field
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Import the side effectful registration of `<sp-number-field>` via:
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
import '@spectrum-web-components/number-field/sp-number-field.js';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
When looking to leverage the `NumberField` base class as a type and/or for extension purposes, do so via:
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
import { NumberField } from '@spectrum-web-components/number-field';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Sizes
|
|
28
|
+
|
|
29
|
+
<sp-tabs selected="m" auto label="Size Attribute Options">
|
|
30
|
+
<sp-tab value="s">Small</sp-tab>
|
|
31
|
+
<sp-tab-panel value="s">
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<sp-number-field
|
|
35
|
+
label="Size"
|
|
36
|
+
value="1024"
|
|
37
|
+
size="s"
|
|
38
|
+
style="--spectrum-stepper-width: 85px"
|
|
39
|
+
></sp-number-field>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
</sp-tab-panel>
|
|
43
|
+
<sp-tab value="m">Medium</sp-tab>
|
|
44
|
+
<sp-tab-panel value="m">
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<sp-number-field
|
|
48
|
+
label="Size"
|
|
49
|
+
value="1024"
|
|
50
|
+
size="m"
|
|
51
|
+
style="--spectrum-stepper-width: 110px"
|
|
52
|
+
></sp-number-field>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
</sp-tab-panel>
|
|
56
|
+
<sp-tab value="l">Large</sp-tab>
|
|
57
|
+
<sp-tab-panel value="l">
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<sp-number-field
|
|
61
|
+
label="Size"
|
|
62
|
+
value="1024"
|
|
63
|
+
size="l"
|
|
64
|
+
style="--spectrum-stepper-width: 135px"
|
|
65
|
+
></sp-number-field>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
</sp-tab-panel>
|
|
69
|
+
<sp-tab value="xl">Extra Large</sp-tab>
|
|
70
|
+
<sp-tab-panel value="xl">
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<sp-number-field
|
|
74
|
+
label="Size"
|
|
75
|
+
value="1024"
|
|
76
|
+
size="xl"
|
|
77
|
+
style="--spectrum-stepper-width: 160px"
|
|
78
|
+
></sp-number-field>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
</sp-tab-panel>
|
|
82
|
+
</sp-tabs>
|
|
83
|
+
|
|
84
|
+
## Number formatting
|
|
85
|
+
|
|
86
|
+
An `<sp-number-field>` element will process its numeric value with `new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.value)` in order to prepare it for visual delivery in the input. In order to customize this processing supply your own `Intl.NumberFormatOptions` via the `formatOptions` property, or `format-options` attribute as seen below.
|
|
87
|
+
|
|
88
|
+
`this.resolvedLanguage` represents the language in which the `<sp-number-field>` element is currently being delivered. By default, this value will represent the language established by the `lang` attribute on the root `<html>` element while falling back to `navigator.language` when that is not present. This value can be customized via a language context provided by a parent element that listens for the `sp-language-context` event and supplies update language settings to the `callback` function contained therein. Applications leveraging the [`<sp-theme>`](./components/theme) element to manage the visual delivery or text direction of their content will be also be provided a reactive context for supplying language information to its descendants.
|
|
89
|
+
|
|
90
|
+
### Decimals
|
|
91
|
+
|
|
92
|
+
The following example uses the `signDisplay` option to include the plus sign for positive numbers, for example to display an offset from some value. In addition, it always displays a minimum of 1 digit after the decimal point, and allows up to 2 fraction digits. If the user enters more than 2 fraction digits, the result will be rounded.
|
|
93
|
+
|
|
94
|
+
```html
|
|
95
|
+
<sp-field-label for="decimals">Adjust exposure</sp-field-label>
|
|
96
|
+
<sp-number-field
|
|
97
|
+
id="decimals"
|
|
98
|
+
value="0"
|
|
99
|
+
style="width: 100px"
|
|
100
|
+
format-options='{
|
|
101
|
+
"signDisplay": "exceptZero",
|
|
102
|
+
"minimumFractionDigits": 1,
|
|
103
|
+
"maximumFractionDigits": 2
|
|
104
|
+
}'
|
|
105
|
+
></sp-number-field>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Percentages
|
|
109
|
+
|
|
110
|
+
The `style: 'percent'` option can be passed to the `formatOptions` property to treat the value as a percentage. In this mode, the value is multiplied by 100 before it is displayed, i.e. `0.45` is displayed as "45%". The reverse is also true: when the user enters a value, the `change` event will be triggered with the entered value divided by 100. When the percent option is enabled, the default step automatically changes to 0.01 such that incrementing and decrementing occurs by 1%. This can be overridden with the step property.
|
|
111
|
+
|
|
112
|
+
```html
|
|
113
|
+
<sp-field-label for="percents">Sales tax</sp-field-label>
|
|
114
|
+
<sp-number-field
|
|
115
|
+
id="percents"
|
|
116
|
+
style="width: 200px"
|
|
117
|
+
value="0.05"
|
|
118
|
+
format-options='{
|
|
119
|
+
"style": "percent"
|
|
120
|
+
}'
|
|
121
|
+
></sp-number-field>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Currency values
|
|
125
|
+
|
|
126
|
+
The `style: 'currency'` option can be passed to the `formatOptions` property to treat the value as a currency value. The `currency` option must also be passed to set the currency code (e.g. `USD`) to use. In addition, the `currencyDisplay` option can be used to choose whether to display the currency `symbol`, currency `code`, or currency `name`. Finally, the `currencySign` option can be set to `accounting` to use accounting notation for negative numbers, which uses parentheses rather than a minus sign in some locales.
|
|
127
|
+
|
|
128
|
+
If you need to allow the user to change the currency, you should include a separate dropdown next to the `sp-number-field`. The `sp-number-field` itself will not determine the currency from the user input.
|
|
129
|
+
|
|
130
|
+
```html
|
|
131
|
+
<sp-field-label for="currency">Transaction amount</sp-field-label>
|
|
132
|
+
<sp-number-field
|
|
133
|
+
id="currency"
|
|
134
|
+
style="width: 200px"
|
|
135
|
+
value="45"
|
|
136
|
+
format-options='{
|
|
137
|
+
"style": "currency",
|
|
138
|
+
"currency": "EUR",
|
|
139
|
+
"currencyDisplay": "code",
|
|
140
|
+
"currencySign": "accounting"
|
|
141
|
+
}'
|
|
142
|
+
></sp-number-field>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Units
|
|
146
|
+
|
|
147
|
+
The `style: 'unit'` option can be passed to the `formatOptions` property to format the value with a unit of measurement. The `unit` option must also be passed to set which unit to use (e.g. `inch`). In addition, the `unitDisplay` option can be used to choose whether to display the unit in `long`, `short`, or `narrow` format.
|
|
148
|
+
|
|
149
|
+
If you need to allow the user to change the unit, you should include a separate dropdown next to the number field. The number field itself will not determine the unit from the user input.
|
|
150
|
+
|
|
151
|
+
Note: The unit style is not currently supported in Safari. A [polyfill](https://formatjs.io/docs/polyfills/intl-numberformat/) may be necessary.
|
|
152
|
+
|
|
153
|
+
```html
|
|
154
|
+
<sp-field-label for="units">Package width</sp-field-label>
|
|
155
|
+
<sp-number-field
|
|
156
|
+
id="units"
|
|
157
|
+
style="width: 200px"
|
|
158
|
+
value="4"
|
|
159
|
+
format-options='{
|
|
160
|
+
"style": "unit",
|
|
161
|
+
"unit": "inch",
|
|
162
|
+
"unitDisplay": "long"
|
|
163
|
+
}'
|
|
164
|
+
></sp-number-field>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### Units not included in `Intl.NumberFormatOptions`
|
|
168
|
+
|
|
169
|
+
While `Intl.NumberFormatOptions` does support a [wide range of units](https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier), it is possible to encounter units (e.g. the graphics units of `pixel`, `pixels`, `points`, etc.) that are not supported therein. When this occurs, an `<sp-number-field>` element will attempt to polyfill support for this unit. See the following example delivering `{ style: "unit", unit: "px" }` below:
|
|
170
|
+
|
|
171
|
+
```html
|
|
172
|
+
<sp-field-label for="units">Document width in pixels</sp-field-label>
|
|
173
|
+
<sp-number-field
|
|
174
|
+
id="units"
|
|
175
|
+
style="width: 200px"
|
|
176
|
+
value="500"
|
|
177
|
+
format-options='{
|
|
178
|
+
"style": "unit",
|
|
179
|
+
"unit": "px"
|
|
180
|
+
}'
|
|
181
|
+
></sp-number-field>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
Note: the polyfilling done here is very simplistic and is triggered by supplying options that would otherwise cause the `Intl.NumberFormat()` call to throw an error. Once the unsupporting unit of `px` causes the construction of the object to throw, a back up formatter/parser pair will be created without the supplied unit data. When the `style` is set to `unit`, the `unit` value of will be adopted as the _static_ unit display. This means that neither pluralization or translation will be handled within the `<sp-number-field>` element itself. If pluralization or translation is important to the delivered interface, please be sure to handle passing those strings into to element via the `formatOptions` property reactively to the value of the element or locale of that page in question.
|
|
185
|
+
|
|
186
|
+
## Minimum and maximum values
|
|
187
|
+
|
|
188
|
+
The `max` and `max` properties can be used to limit the entered value to a specific range. The value will be clamped when the user commits the value to the `<sp-number-field>` element. In addition, the increment and decrement buttons will be disabled when the value is within one step value from the bounds. Ranges can be open ended by only providing a value for either `min` or `max` rather than both.
|
|
189
|
+
|
|
190
|
+
If a valid range is known ahead of time, it is a good idea to provide it to `<sp-number-field>` so it can optimize the experience. For example, when the minimum value is greater than or equal to zero, it is possible to use a numeric keyboard on iOS rather than a full text keyboard (necessary to enter a minus sign).
|
|
191
|
+
|
|
192
|
+
```html
|
|
193
|
+
<sp-field-label for="red">Red value</sp-field-label>
|
|
194
|
+
<sp-number-field id="red" value="4" min="0" max="255"></sp-number-field>
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
## Step values
|
|
198
|
+
|
|
199
|
+
The step prop can be used to snap the value to certain increments. If there is a `min` defined, the steps are calculated starting from that minimum value. For example, if `min === 2`, and `step === 3`, the valid step values would be 2, 5, 8, 11, etc. If no `min` is defined, the steps are calculated starting from zero and extending in both directions. In other words, such that the values are evenly divisible by the step. A step can be any positive decimal. If no step is defined, any decimal value may be typed, but incrementing and decrementing snaps the value to an integer.
|
|
200
|
+
|
|
201
|
+
If the user types a value that is between two steps and blurs the input, the value will be snapped to the nearest step. When incrementing or decrementing, the value is snapped to the nearest step that is higher or lower, respectively. When incrementing or decrementing from an empty field, the value starts at the minValue or maxValue, respectively, if defined. Otherwise, the value starts from 0.
|
|
202
|
+
|
|
203
|
+
<!-- prettier-ignore -->
|
|
204
|
+
```html
|
|
205
|
+
<sp-field-label
|
|
206
|
+
for="step"
|
|
207
|
+
>Step</sp-field-label>
|
|
208
|
+
<sp-number-field
|
|
209
|
+
id="step"
|
|
210
|
+
step="10"
|
|
211
|
+
></sp-number-field>
|
|
212
|
+
|
|
213
|
+
<sp-field-label
|
|
214
|
+
for="step-min"
|
|
215
|
+
>Step + min</sp-field-label>
|
|
216
|
+
<sp-number-field
|
|
217
|
+
id="step-min"
|
|
218
|
+
min="2"
|
|
219
|
+
step="3"
|
|
220
|
+
></sp-number-field>
|
|
221
|
+
|
|
222
|
+
<sp-field-label
|
|
223
|
+
for="step-min-max"
|
|
224
|
+
>Step + min + max</sp-field-label>
|
|
225
|
+
<sp-number-field
|
|
226
|
+
id="step-min-max"
|
|
227
|
+
min="2"
|
|
228
|
+
max="21"
|
|
229
|
+
step="3"
|
|
230
|
+
></sp-number-field>
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
## Default value
|
|
234
|
+
|
|
235
|
+
The `<sp-number-field>` component doesn't manage a default value by itself. This means that consumers can set the value of the number-field as an empty string by clearing the input. If we want the number-field to reset to a `default-value` when the user clears the input, we can listen for the `change` event on the number-field component and set its value to the desired `default-value` if the input is empty.
|
|
236
|
+
|
|
237
|
+
```html-live
|
|
238
|
+
<sp-field-label for="default">
|
|
239
|
+
Default value of this number field is 42
|
|
240
|
+
</sp-field-label>
|
|
241
|
+
<sp-number-field id="default" value="20"></sp-number-field>
|
|
242
|
+
|
|
243
|
+
<script type="module">
|
|
244
|
+
customElements.whenDefined('sp-number-field').then(() => {
|
|
245
|
+
const numberField = document.querySelector('#default');
|
|
246
|
+
|
|
247
|
+
numberField.addEventListener('change', (event) => {
|
|
248
|
+
const target = event.target;
|
|
249
|
+
if (isNaN(target.value)) {
|
|
250
|
+
target.value = '42';
|
|
251
|
+
}
|
|
252
|
+
});
|
|
253
|
+
});
|
|
254
|
+
</script>
|
|
255
|
+
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
<script type="module">
|
|
259
|
+
customElements.whenDefined('sp-number-field').then(() => {
|
|
260
|
+
const numberField = document.querySelector('#default');
|
|
261
|
+
|
|
262
|
+
numberField.addEventListener('change', (event) => {
|
|
263
|
+
const target = event.target;
|
|
264
|
+
if (isNaN(target.value)) {
|
|
265
|
+
target.value = '42';
|
|
266
|
+
}
|
|
267
|
+
});
|
|
268
|
+
});
|
|
269
|
+
</script>
|
package/package.json
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@spectrum-web-components/number-field",
|
|
3
|
+
"version": "0.0.0-20241209155954",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
7
|
+
"description": "Web component implementation of a Spectrum design NumberField",
|
|
8
|
+
"license": "Apache-2.0",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/adobe/spectrum-web-components.git",
|
|
12
|
+
"directory": "packages/number-field"
|
|
13
|
+
},
|
|
14
|
+
"author": "",
|
|
15
|
+
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/number-field",
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/adobe/spectrum-web-components/issues"
|
|
18
|
+
},
|
|
19
|
+
"main": "src/index.js",
|
|
20
|
+
"module": "src/index.js",
|
|
21
|
+
"type": "module",
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"development": "./src/index.dev.js",
|
|
25
|
+
"default": "./src/index.js"
|
|
26
|
+
},
|
|
27
|
+
"./package.json": "./package.json",
|
|
28
|
+
"./src/NumberField.js": {
|
|
29
|
+
"development": "./src/NumberField.dev.js",
|
|
30
|
+
"default": "./src/NumberField.js"
|
|
31
|
+
},
|
|
32
|
+
"./src/index.js": {
|
|
33
|
+
"development": "./src/index.dev.js",
|
|
34
|
+
"default": "./src/index.js"
|
|
35
|
+
},
|
|
36
|
+
"./src/number-field-overrides.css.js": "./src/number-field-overrides.css.js",
|
|
37
|
+
"./src/number-field.css.js": "./src/number-field.css.js",
|
|
38
|
+
"./sp-number-field.js": {
|
|
39
|
+
"development": "./sp-number-field.dev.js",
|
|
40
|
+
"default": "./sp-number-field.js"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"scripts": {
|
|
44
|
+
"test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
|
|
45
|
+
},
|
|
46
|
+
"files": [
|
|
47
|
+
"**/*.d.ts",
|
|
48
|
+
"**/*.js",
|
|
49
|
+
"**/*.js.map",
|
|
50
|
+
"custom-elements.json",
|
|
51
|
+
"!stories/",
|
|
52
|
+
"!test/"
|
|
53
|
+
],
|
|
54
|
+
"keywords": [
|
|
55
|
+
"spectrum css",
|
|
56
|
+
"web components",
|
|
57
|
+
"lit-element",
|
|
58
|
+
"lit-html"
|
|
59
|
+
],
|
|
60
|
+
"dependencies": {
|
|
61
|
+
"@internationalized/number": "^3.6.0",
|
|
62
|
+
"@spectrum-web-components/base": "0.0.0-20241209155954",
|
|
63
|
+
"@spectrum-web-components/icon": "0.0.0-20241209155954",
|
|
64
|
+
"@spectrum-web-components/icons-ui": "0.0.0-20241209155954",
|
|
65
|
+
"@spectrum-web-components/infield-button": "0.0.0-20241209155954",
|
|
66
|
+
"@spectrum-web-components/reactive-controllers": "0.0.0-20241209155954",
|
|
67
|
+
"@spectrum-web-components/shared": "0.0.0-20241209155954",
|
|
68
|
+
"@spectrum-web-components/textfield": "0.0.0-20241209155954"
|
|
69
|
+
},
|
|
70
|
+
"devDependencies": {
|
|
71
|
+
"@formatjs/intl-numberformat": "^8.3.5",
|
|
72
|
+
"@spectrum-css/stepper": "^7.0.0-s2-foundations.18"
|
|
73
|
+
},
|
|
74
|
+
"types": "./src/index.d.ts",
|
|
75
|
+
"customElements": "custom-elements.json",
|
|
76
|
+
"sideEffects": [
|
|
77
|
+
"./sp-*.js",
|
|
78
|
+
"./**/*.dev.js"
|
|
79
|
+
]
|
|
80
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sp-number-field.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { NumberField } from './src/NumberField.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-number-field', NumberField);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-number-field': NumberField;\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAYA,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,cAAc,mBAAmB,WAAW;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sp-number-field.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { NumberField } from './src/NumberField.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-number-field', NumberField);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-number-field': NumberField;\n }\n}\n"],
|
|
5
|
+
"mappings": "aAYA,OAAS,eAAAA,MAAmB,uBAC5B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,kBAAmBD,CAAW",
|
|
6
|
+
"names": ["NumberField", "defineElement"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { NumberFormatter, NumberParser } from '@internationalized/number';
|
|
2
|
+
import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
3
|
+
import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
|
|
4
|
+
import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js';
|
|
5
|
+
import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron50.js';
|
|
6
|
+
import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js';
|
|
7
|
+
import '@spectrum-web-components/infield-button/sp-infield-button.js';
|
|
8
|
+
import { TextfieldBase } from '@spectrum-web-components/textfield';
|
|
9
|
+
export declare const FRAMES_PER_CHANGE = 5;
|
|
10
|
+
export declare const CHANGE_DEBOUNCE_MS = 100;
|
|
11
|
+
export declare const indeterminatePlaceholder = "-";
|
|
12
|
+
export declare const remapMultiByteCharacters: Record<string, string>;
|
|
13
|
+
/**
|
|
14
|
+
* @element sp-number-field
|
|
15
|
+
* @slot help-text - default or non-negative help text to associate to your form element
|
|
16
|
+
* @slot negative-help-text - negative help text to associate to your form element when `invalid`
|
|
17
|
+
*/
|
|
18
|
+
export declare class NumberField extends TextfieldBase {
|
|
19
|
+
static get styles(): CSSResultArray;
|
|
20
|
+
private buttons;
|
|
21
|
+
focused: boolean;
|
|
22
|
+
_forcedUnit: string;
|
|
23
|
+
/**
|
|
24
|
+
* An `<sp-number-field>` element will process its numeric value with
|
|
25
|
+
* `new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.valueAsNumber)`
|
|
26
|
+
* in order to prepare it for visual delivery in the input. In order to customize this
|
|
27
|
+
* processing supply your own `Intl.NumberFormatOptions` object here.
|
|
28
|
+
*
|
|
29
|
+
* See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
|
|
30
|
+
*/
|
|
31
|
+
formatOptions: Intl.NumberFormatOptions;
|
|
32
|
+
/**
|
|
33
|
+
* Whether the stepper UI is hidden or not.
|
|
34
|
+
*/
|
|
35
|
+
hideStepper: boolean;
|
|
36
|
+
indeterminate: boolean;
|
|
37
|
+
keyboardFocused: boolean;
|
|
38
|
+
max?: number;
|
|
39
|
+
min?: number;
|
|
40
|
+
/**
|
|
41
|
+
* The distance by which to alter the value of the element when taking a "step".
|
|
42
|
+
*
|
|
43
|
+
* When `this.formatOptions.style === 'percentage'` the default step will be
|
|
44
|
+
* set to 0.01 unless otherwise supplied to the element.
|
|
45
|
+
*/
|
|
46
|
+
step?: number;
|
|
47
|
+
managedInput: boolean;
|
|
48
|
+
stepModifier: number;
|
|
49
|
+
set value(rawValue: number);
|
|
50
|
+
get value(): number;
|
|
51
|
+
private get inputValue();
|
|
52
|
+
_value: number;
|
|
53
|
+
private _trackingValue;
|
|
54
|
+
private lastCommitedValue?;
|
|
55
|
+
private setValue;
|
|
56
|
+
/**
|
|
57
|
+
* Retreive the value of the element parsed to a Number.
|
|
58
|
+
*/
|
|
59
|
+
get valueAsString(): string;
|
|
60
|
+
set valueAsString(value: string);
|
|
61
|
+
get formattedValue(): string;
|
|
62
|
+
private decimalsChars;
|
|
63
|
+
private valueBeforeFocus;
|
|
64
|
+
private isIntentDecimal;
|
|
65
|
+
private convertValueToNumber;
|
|
66
|
+
private get _step();
|
|
67
|
+
private nextChange;
|
|
68
|
+
private changeCount;
|
|
69
|
+
private findChange;
|
|
70
|
+
private change;
|
|
71
|
+
private safty;
|
|
72
|
+
private languageResolver;
|
|
73
|
+
private handlePointerdown;
|
|
74
|
+
private startChange;
|
|
75
|
+
private doChange;
|
|
76
|
+
private handlePointermove;
|
|
77
|
+
private handlePointerup;
|
|
78
|
+
private doNextChange;
|
|
79
|
+
private stepBy;
|
|
80
|
+
private increment;
|
|
81
|
+
private decrement;
|
|
82
|
+
private handleKeydown;
|
|
83
|
+
private queuedChangeEvent;
|
|
84
|
+
protected onScroll(event: WheelEvent): void;
|
|
85
|
+
protected onFocus(): void;
|
|
86
|
+
protected onBlur(_event: FocusEvent): void;
|
|
87
|
+
private handleFocusin;
|
|
88
|
+
private handleFocusout;
|
|
89
|
+
private wasIndeterminate;
|
|
90
|
+
private indeterminateValue?;
|
|
91
|
+
protected handleChange(): void;
|
|
92
|
+
protected handleCompositionStart(): void;
|
|
93
|
+
protected handleCompositionEnd(): void;
|
|
94
|
+
private hasRecentlyReceivedPointerDown;
|
|
95
|
+
protected handleInputElementPointerdown(): void;
|
|
96
|
+
protected handleInput(event: InputEvent): void;
|
|
97
|
+
private valueWithLimits;
|
|
98
|
+
private validateInput;
|
|
99
|
+
protected get displayValue(): string;
|
|
100
|
+
protected clearNumberFormatterCache(): void;
|
|
101
|
+
protected get numberFormatter(): NumberFormatter;
|
|
102
|
+
protected clearValueFormatterCache(): void;
|
|
103
|
+
protected get valueFormatter(): NumberFormatter;
|
|
104
|
+
private _numberFormatter?;
|
|
105
|
+
private _numberFormatterFocused?;
|
|
106
|
+
private _valueFormatter?;
|
|
107
|
+
protected get numberParser(): NumberParser;
|
|
108
|
+
applyFocusElementLabel: (value?: string) => void;
|
|
109
|
+
private _numberParser?;
|
|
110
|
+
private _numberParserFocused?;
|
|
111
|
+
protected renderField(): TemplateResult;
|
|
112
|
+
protected update(changes: PropertyValues): void;
|
|
113
|
+
willUpdate(changes: PropertyValues): void;
|
|
114
|
+
private isComposing;
|
|
115
|
+
protected firstUpdated(changes: PropertyValues): void;
|
|
116
|
+
protected updated(changes: PropertyValues<this>): void;
|
|
117
|
+
}
|