@aquera/nile-elements 1.8.1 → 1.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/README.md +3 -0
- package/dist/index.js +323 -174
- package/dist/nile-slider/nile-slider.cjs.js +1 -1
- package/dist/nile-slider/nile-slider.cjs.js.map +1 -1
- package/dist/nile-slider/nile-slider.css.cjs.js +1 -1
- package/dist/nile-slider/nile-slider.css.cjs.js.map +1 -1
- package/dist/nile-slider/nile-slider.css.esm.js +162 -41
- package/dist/nile-slider/nile-slider.esm.js +5 -3
- package/dist/nile-slider/nile-slider.template.cjs.js +1 -1
- package/dist/nile-slider/nile-slider.template.cjs.js.map +1 -1
- package/dist/nile-slider/nile-slider.template.esm.js +49 -23
- package/dist/nile-slider/utils/nile-slider.utils.cjs.js +1 -1
- package/dist/nile-slider/utils/nile-slider.utils.cjs.js.map +1 -1
- package/dist/nile-slider/utils/nile-slider.utils.esm.js +1 -1
- package/dist/src/nile-slider/nile-slider.css.js +160 -39
- package/dist/src/nile-slider/nile-slider.css.js.map +1 -1
- package/dist/src/nile-slider/nile-slider.d.ts +5 -1
- package/dist/src/nile-slider/nile-slider.js +23 -1
- package/dist/src/nile-slider/nile-slider.js.map +1 -1
- package/dist/src/nile-slider/nile-slider.template.d.ts +2 -0
- package/dist/src/nile-slider/nile-slider.template.js +38 -1
- package/dist/src/nile-slider/nile-slider.template.js.map +1 -1
- package/dist/src/nile-slider/types/nile-slider.types.d.ts +1 -0
- package/dist/src/nile-slider/types/nile-slider.types.js.map +1 -1
- package/dist/src/nile-slider/utils/nile-slider.utils.js +4 -0
- package/dist/src/nile-slider/utils/nile-slider.utils.js.map +1 -1
- package/dist/src/version.js +1 -1
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-slider/nile-slider.css.ts +160 -39
- package/src/nile-slider/nile-slider.template.ts +45 -2
- package/src/nile-slider/nile-slider.ts +11 -3
- package/src/nile-slider/types/nile-slider.types.ts +2 -0
- package/src/nile-slider/utils/nile-slider.utils.ts +2 -0
- package/vscode-html-custom-data.json +38 -9
package/package.json
CHANGED
|
@@ -14,12 +14,31 @@ export const styles = css`
|
|
|
14
14
|
display: block;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
+
/* Field header */
|
|
18
|
+
|
|
19
|
+
.field-header {
|
|
20
|
+
display: flex;
|
|
21
|
+
justify-content: space-between;
|
|
22
|
+
align-items: center;
|
|
23
|
+
gap: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
24
|
+
margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.field-label {
|
|
28
|
+
font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
|
|
29
|
+
font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
|
|
30
|
+
font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
|
|
31
|
+
color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Layout */
|
|
35
|
+
|
|
17
36
|
.container {
|
|
18
37
|
display: flex;
|
|
19
38
|
justify-content: center;
|
|
20
39
|
align-items: center;
|
|
21
|
-
gap:
|
|
22
|
-
height:
|
|
40
|
+
gap: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
41
|
+
min-height: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
|
|
23
42
|
}
|
|
24
43
|
|
|
25
44
|
.align-item-center {
|
|
@@ -27,14 +46,14 @@ export const styles = css`
|
|
|
27
46
|
}
|
|
28
47
|
|
|
29
48
|
slot.span {
|
|
30
|
-
font-size: var(--nile-font-size-micro);
|
|
31
|
-
margin-top: 14px;
|
|
49
|
+
font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));
|
|
32
50
|
}
|
|
33
51
|
|
|
34
52
|
.range-container {
|
|
35
53
|
display: flex;
|
|
36
54
|
flex-direction: column;
|
|
37
|
-
|
|
55
|
+
flex: 1 1 auto;
|
|
56
|
+
gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
|
|
38
57
|
}
|
|
39
58
|
|
|
40
59
|
.column-reverse {
|
|
@@ -47,18 +66,21 @@ export const styles = css`
|
|
|
47
66
|
}
|
|
48
67
|
|
|
49
68
|
.label-container span {
|
|
50
|
-
margin: var(--nile-spacing-none);
|
|
51
|
-
padding: var(--nile-spacing-none);
|
|
52
|
-
font-size: var(--nile-font-size-micro);
|
|
69
|
+
margin: var(--nile-spacing-none, var(--ng-spacing-none));
|
|
70
|
+
padding: var(--nile-spacing-none, var(--ng-spacing-none));
|
|
71
|
+
font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));
|
|
72
|
+
color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
|
|
53
73
|
}
|
|
54
74
|
|
|
75
|
+
/* track & fill */
|
|
76
|
+
|
|
55
77
|
.range {
|
|
56
78
|
position: relative;
|
|
57
|
-
width: 228px;
|
|
58
|
-
height:
|
|
59
|
-
background-color: var(--nile-colors-neutral-400);
|
|
79
|
+
width: var(--nile-slider-width, 228px);
|
|
80
|
+
height: var(--nile-spacing-xs, var(--ng-spacing-sm));
|
|
81
|
+
background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));
|
|
60
82
|
user-select: none;
|
|
61
|
-
border-radius: var(--nile-radius-radius-3xl);
|
|
83
|
+
border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));
|
|
62
84
|
}
|
|
63
85
|
|
|
64
86
|
.range:hover {
|
|
@@ -69,50 +91,149 @@ export const styles = css`
|
|
|
69
91
|
position: absolute;
|
|
70
92
|
height: 100%;
|
|
71
93
|
width: 0%;
|
|
72
|
-
background-color: var(--nile-colors-primary-600);
|
|
94
|
+
background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
|
|
73
95
|
top: 0px;
|
|
74
96
|
left: 0px;
|
|
75
97
|
z-index: 98;
|
|
76
|
-
border-radius: var(--nile-radius-radius-3xl);
|
|
98
|
+
border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* ------------------------------------------------------------------ */
|
|
102
|
+
/* Inline value label (valueLabel="bottom") */
|
|
103
|
+
/* ------------------------------------------------------------------ */
|
|
104
|
+
|
|
105
|
+
.value-label {
|
|
106
|
+
position: absolute;
|
|
107
|
+
/* Start at the track bottom, then push down past the handle and the
|
|
108
|
+
largest (pressed, 8px) ring */
|
|
109
|
+
top: 100%;
|
|
110
|
+
margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));
|
|
111
|
+
transform: translateX(-50%);
|
|
112
|
+
font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
|
|
113
|
+
font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));
|
|
114
|
+
font-variant-numeric: tabular-nums;
|
|
115
|
+
color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
|
|
116
|
+
white-space: nowrap;
|
|
117
|
+
pointer-events: none;
|
|
118
|
+
user-select: none;
|
|
119
|
+
-webkit-user-select: none;
|
|
77
120
|
}
|
|
78
121
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
122
|
+
/* Reserve room below the track for the inline value label */
|
|
123
|
+
:host([valuelabel='bottom']) .container {
|
|
124
|
+
padding-bottom: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* Handles */
|
|
128
|
+
|
|
129
|
+
.range-button,
|
|
130
|
+
.range-button-two {
|
|
131
|
+
height: var(--nile-spacing-lg, var(--ng-spacing-2xl));
|
|
132
|
+
width: var(--nile-spacing-lg, var(--ng-spacing-2xl));
|
|
133
|
+
box-sizing: border-box;
|
|
134
|
+
/* Enterprise: solid brand dot - NextGen: white fill + brand border */
|
|
135
|
+
background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary));
|
|
136
|
+
border: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) solid
|
|
137
|
+
var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));
|
|
83
138
|
position: absolute;
|
|
84
139
|
top: 50%;
|
|
85
140
|
transform: translate(-50%, -50%);
|
|
86
|
-
border-radius: var(--nile-radius-radius-3xl);
|
|
141
|
+
border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));
|
|
87
142
|
left: 0;
|
|
88
143
|
z-index: 100;
|
|
89
|
-
|
|
90
|
-
transition:
|
|
144
|
+
cursor: grab;
|
|
145
|
+
transition:
|
|
146
|
+
box-shadow var(--nile-transition-duration-short, 120ms) ease,
|
|
147
|
+
background-color var(--nile-transition-duration-short, 120ms) ease,
|
|
148
|
+
transform var(--nile-transition-duration-shorter, 80ms) ease;
|
|
91
149
|
}
|
|
92
150
|
|
|
93
|
-
.range-button
|
|
94
|
-
|
|
95
|
-
background-color: var(--nile-colors-primary-700);
|
|
151
|
+
.range-button-two {
|
|
152
|
+
left: 100%;
|
|
96
153
|
}
|
|
97
154
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
155
|
+
/* Hover: ring (Enterprise 2px - NextGen 6px) */
|
|
156
|
+
.range-button:hover,
|
|
157
|
+
.range-button-two:hover {
|
|
158
|
+
cursor: grab;
|
|
159
|
+
box-shadow: 0 0 0 var(--nile-spacing-xxs, var(--ng-spacing-sm))
|
|
160
|
+
var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));
|
|
102
161
|
}
|
|
103
162
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
163
|
+
/* Focused: theme focus ring */
|
|
164
|
+
.range-button:focus-visible,
|
|
165
|
+
.range-button-two:focus-visible {
|
|
166
|
+
outline: none;
|
|
167
|
+
box-shadow: var(--nile-focus-ring,
|
|
168
|
+
var(--ng-focus-ring,
|
|
169
|
+
0 0 0 var(--nile-spacing-xs) var(--nile-colors-primary-100)));
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* Pressed: ring (Enterprise 4px - NextGen 8px) + 1.1x scale */
|
|
173
|
+
.range-button:active,
|
|
174
|
+
.range-button-two:active {
|
|
175
|
+
cursor: grabbing;
|
|
176
|
+
transform: translate(-50%, -50%) scale(1.1);
|
|
177
|
+
box-shadow: 0 0 0 var(--nile-spacing-xs, var(--ng-spacing-md))
|
|
178
|
+
var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* Error state */
|
|
182
|
+
:host([error]) .range-completed {
|
|
183
|
+
background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
:host([error]) .range-button,
|
|
187
|
+
:host([error]) .range-button-two {
|
|
188
|
+
background-color: var(--nile-colors-red-700, var(--ng-colors-bg-primary));
|
|
189
|
+
border-color: var(--nile-colors-red-700, var(--ng-colors-border-error));
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
:host([error]) .range-button:hover,
|
|
193
|
+
:host([error]) .range-button-two:hover {
|
|
194
|
+
box-shadow: 0 0 0 var(--nile-spacing-xxs, var(--ng-spacing-sm))
|
|
195
|
+
var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary, var(--ng-color-error-100)));
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
:host([error]) .range-button:focus-visible,
|
|
199
|
+
:host([error]) .range-button-two:focus-visible {
|
|
200
|
+
box-shadow: var(--nile-focus-ring-error,
|
|
201
|
+
var(--ng-focus-ring-error,
|
|
202
|
+
0 0 0 var(--nile-spacing-xs) var(--nile-colors-red-100)));
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/* Disabled state */
|
|
206
|
+
:host([disabled]) .range,
|
|
207
|
+
:host([disabled]) .range:hover {
|
|
208
|
+
cursor: not-allowed;
|
|
209
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
:host([disabled]) .range-completed {
|
|
213
|
+
background-color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
:host([disabled]) .range-button,
|
|
217
|
+
:host([disabled]) .range-button-two {
|
|
218
|
+
background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));
|
|
219
|
+
border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
|
|
220
|
+
cursor: not-allowed;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
:host([disabled]) .range-button:hover,
|
|
224
|
+
:host([disabled]) .range-button-two:hover,
|
|
225
|
+
:host([disabled]) .range-button:active,
|
|
226
|
+
:host([disabled]) .range-button-two:active {
|
|
227
|
+
box-shadow: none;
|
|
110
228
|
transform: translate(-50%, -50%);
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
:host([disabled]) .field-label,
|
|
232
|
+
:host([disabled]) .value-label,
|
|
233
|
+
:host([disabled]) .label-container span {
|
|
234
|
+
color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
|
|
235
|
+
user-select: none;
|
|
236
|
+
-webkit-user-select: none;
|
|
116
237
|
}
|
|
117
238
|
`;
|
|
118
239
|
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { TemplateResult, html } from 'lit';
|
|
2
2
|
import NileSlider from './nile-slider';
|
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
|
4
|
+
import { valueToPercent } from './utils/nile-slider.utils';
|
|
5
|
+
|
|
6
|
+
const tooltipDisabled = (nileSlider: NileSlider): boolean =>
|
|
7
|
+
nileSlider.disabled || nileSlider.valueLabel !== 'tooltip';
|
|
4
8
|
|
|
5
9
|
export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
|
|
6
10
|
return html`
|
|
@@ -8,6 +12,7 @@ export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
|
|
|
8
12
|
<nile-tooltip
|
|
9
13
|
content=${nileSlider.rangeOneValue}
|
|
10
14
|
placement=${nileSlider.tooltipPosition}
|
|
15
|
+
?disabled=${tooltipDisabled(nileSlider)}
|
|
11
16
|
>
|
|
12
17
|
<div
|
|
13
18
|
id="range-one"
|
|
@@ -24,6 +29,7 @@ export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
|
|
|
24
29
|
<nile-tooltip
|
|
25
30
|
content=${nileSlider.rangeTwoValue}
|
|
26
31
|
placement=${nileSlider.tooltipPosition}
|
|
32
|
+
?disabled=${tooltipDisabled(nileSlider)}
|
|
27
33
|
>
|
|
28
34
|
<div
|
|
29
35
|
id="range-two"
|
|
@@ -47,6 +53,7 @@ export const singleSlider = (nileSlider: NileSlider): TemplateResult => {
|
|
|
47
53
|
<nile-tooltip
|
|
48
54
|
content=${nileSlider.value}
|
|
49
55
|
placement=${nileSlider.tooltipPosition}
|
|
56
|
+
?disabled=${tooltipDisabled(nileSlider)}
|
|
50
57
|
>
|
|
51
58
|
<div
|
|
52
59
|
class=${classMap({
|
|
@@ -59,7 +66,7 @@ export const singleSlider = (nileSlider: NileSlider): TemplateResult => {
|
|
|
59
66
|
aria-valuemin=${nileSlider.minValue}
|
|
60
67
|
aria-valuemax=${nileSlider.maxValue}
|
|
61
68
|
aria-valuenow=${nileSlider.value}
|
|
62
|
-
aria-label=${nileSlider.ariaLabel || "Slider value"}
|
|
69
|
+
aria-label=${nileSlider.ariaLabel || nileSlider.label || "Slider value"}
|
|
63
70
|
></div>
|
|
64
71
|
</nile-tooltip>
|
|
65
72
|
</div>
|
|
@@ -74,4 +81,40 @@ export const lableContaier = (nileSlider: NileSlider): TemplateResult => {
|
|
|
74
81
|
<span id="label-end">${nileSlider.labelEnd}</span>
|
|
75
82
|
</div>
|
|
76
83
|
`;
|
|
77
|
-
};
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
export const fieldHeader = (nileSlider: NileSlider): TemplateResult => {
|
|
88
|
+
return html`
|
|
89
|
+
<div part="field-header" class="field-header">
|
|
90
|
+
<label id="field-label" part="field-label" class="field-label">
|
|
91
|
+
${nileSlider.label}
|
|
92
|
+
</label>
|
|
93
|
+
</div>
|
|
94
|
+
`;
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
export const bottomValueLabels = (nileSlider: NileSlider): TemplateResult => {
|
|
99
|
+
if (!nileSlider.rangeSlider) {
|
|
100
|
+
return html`
|
|
101
|
+
<span
|
|
102
|
+
part="value-label"
|
|
103
|
+
class="value-label"
|
|
104
|
+
style="left: ${valueToPercent(nileSlider.value, nileSlider)}%"
|
|
105
|
+
>${nileSlider.value}</span>
|
|
106
|
+
`;
|
|
107
|
+
}
|
|
108
|
+
return html`
|
|
109
|
+
<span
|
|
110
|
+
part="value-label"
|
|
111
|
+
class="value-label"
|
|
112
|
+
style="left: ${valueToPercent(nileSlider.rangeOneValue, nileSlider)}%"
|
|
113
|
+
>${nileSlider.rangeOneValue}</span>
|
|
114
|
+
<span
|
|
115
|
+
part="value-label"
|
|
116
|
+
class="value-label"
|
|
117
|
+
style="left: ${valueToPercent(nileSlider.rangeTwoValue, nileSlider)}%"
|
|
118
|
+
>${nileSlider.rangeTwoValue}</span>
|
|
119
|
+
`;
|
|
120
|
+
};
|
|
@@ -10,9 +10,9 @@ import NileElement from '../internal/nile-element';
|
|
|
10
10
|
import { classMap } from 'lit/directives/class-map.js';
|
|
11
11
|
import { html, CSSResultArray, TemplateResult } from 'lit';
|
|
12
12
|
import { customElement, property } from 'lit/decorators.js';
|
|
13
|
-
import { TooltipPosition } from './types/nile-slider.types';
|
|
13
|
+
import { TooltipPosition, ValueLabelMode } from './types/nile-slider.types';
|
|
14
14
|
import { NileSliderEvents } from './types/nile-slider.enums';
|
|
15
|
-
import { rangeSlider, singleSlider, lableContaier } from './nile-slider.template';
|
|
15
|
+
import { rangeSlider, singleSlider, lableContaier, fieldHeader, bottomValueLabels } from './nile-slider.template';
|
|
16
16
|
import {
|
|
17
17
|
handleSingleSlider,
|
|
18
18
|
handleRangeOne,
|
|
@@ -46,6 +46,10 @@ export class NileSlider extends NileElement {
|
|
|
46
46
|
@property({ type: Boolean}) rangeSlider: boolean = false;
|
|
47
47
|
@property({ type: String }) labelPosition: string = "top";
|
|
48
48
|
@property({ type: String }) tooltipPosition: TooltipPosition = "top";
|
|
49
|
+
@property({ type: String }) label = "";
|
|
50
|
+
@property({ type: Boolean, reflect: true }) disabled = false;
|
|
51
|
+
@property({ type: Boolean, reflect: true }) error = false;
|
|
52
|
+
@property({ type: String, reflect: true }) valueLabel: ValueLabelMode = 'tooltip';
|
|
49
53
|
|
|
50
54
|
public buttonOne!: HTMLElement;
|
|
51
55
|
public buttonTwo!: HTMLElement;
|
|
@@ -88,7 +92,7 @@ export class NileSlider extends NileElement {
|
|
|
88
92
|
}
|
|
89
93
|
|
|
90
94
|
checkValueValidity(value: number, min: number, max: number): number {
|
|
91
|
-
if(max - min <= 1) {
|
|
95
|
+
if(max - min <= 1) {
|
|
92
96
|
return Math.max(min, Math.min(value, max));
|
|
93
97
|
}
|
|
94
98
|
return Math.floor(Math.max(min, Math.min(value, max)));
|
|
@@ -109,6 +113,7 @@ export class NileSlider extends NileElement {
|
|
|
109
113
|
}
|
|
110
114
|
|
|
111
115
|
public onMouseMove = (e: MouseEvent): void => {
|
|
116
|
+
if (this.disabled) return;
|
|
112
117
|
const rect = this.range.getBoundingClientRect();
|
|
113
118
|
|
|
114
119
|
if (!this.rangeSlider) {
|
|
@@ -143,6 +148,7 @@ export class NileSlider extends NileElement {
|
|
|
143
148
|
};
|
|
144
149
|
|
|
145
150
|
public onMouseDown = (e: MouseEvent): void => {
|
|
151
|
+
if (this.disabled) return;
|
|
146
152
|
const rect = this.range.getBoundingClientRect();
|
|
147
153
|
const clickX = e.clientX - rect.left;
|
|
148
154
|
const percent = (clickX / rect.width) * 100;
|
|
@@ -166,6 +172,7 @@ export class NileSlider extends NileElement {
|
|
|
166
172
|
const ariaLabelledby = hasLabels ? 'label-start label-end' : undefined;
|
|
167
173
|
|
|
168
174
|
return html`
|
|
175
|
+
${this.label ? fieldHeader(this) : html``}
|
|
169
176
|
<div
|
|
170
177
|
part="base"
|
|
171
178
|
class=${classMap({
|
|
@@ -192,6 +199,7 @@ export class NileSlider extends NileElement {
|
|
|
192
199
|
>
|
|
193
200
|
<span class="range-completed" part="range-completed"></span>
|
|
194
201
|
${this.rangeSlider ? rangeSlider(this) : singleSlider(this)}
|
|
202
|
+
${this.valueLabel === 'bottom' ? bottomValueLabels(this) : html``}
|
|
195
203
|
</div>
|
|
196
204
|
</div>
|
|
197
205
|
|
|
@@ -80,11 +80,13 @@ export const getHtmlElements = (nileSlider: NileSlider) => {
|
|
|
80
80
|
nileSlider.range.addEventListener('mousedown', nileSlider.onMouseDown);
|
|
81
81
|
|
|
82
82
|
nileSlider.buttonOne?.addEventListener('mousedown', () => {
|
|
83
|
+
if (nileSlider.disabled) return;
|
|
83
84
|
nileSlider.activeThumb = 'one';
|
|
84
85
|
addMoveListeners(nileSlider);
|
|
85
86
|
});
|
|
86
87
|
|
|
87
88
|
nileSlider.buttonTwo?.addEventListener('mousedown', () => {
|
|
89
|
+
if (nileSlider.disabled) return;
|
|
88
90
|
nileSlider.activeThumb = 'two';
|
|
89
91
|
addMoveListeners(nileSlider);
|
|
90
92
|
});
|
|
@@ -3645,7 +3645,7 @@
|
|
|
3645
3645
|
},
|
|
3646
3646
|
{
|
|
3647
3647
|
"name": "nile-input",
|
|
3648
|
-
"description": "Nile icon component.\n\nAttributes:\n\n * `title` {`string`} - \n\n * `type` {`\"number\" | \"text\" | \"time\" | \"date\" | \"datetime-local\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"url\"`} - The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.\n\n * `checkNonPrintableChar` {`boolean`} - \n\n * `size` {`\"small\" | \"medium\" | \"large\"`} - The input's size.\n\n * `filled` {`boolean`} - Draws a filled input.\n\n * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n * `destructive` {`boolean`} - Sets the input to a Destructive state, changing its visual appearance.\n\n * `pill` {`boolean`} - Draws a pill-style input with rounded edges.\n\n * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n * `help-text` {`string`} - \n\n * `error-message` {`string`} - \n\n * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n * `readonly` {`boolean`} - Makes the input readonly.\n\n * `password-toggle` {`boolean`} - Adds a button to toggle the password's visibility. Only applies to password types.\n\n * `password-visible` {`boolean`} - Determines whether or not the password is currently visible. Only applies to password input types.\n\n * `no-spin-buttons` {`boolean`} - Hides the browser's built-in increment/decrement spin buttons for number inputs.\n\n * `autocapitalize` {`\"
|
|
3648
|
+
"description": "Nile icon component.\n\nAttributes:\n\n * `title` {`string`} - \n\n * `type` {`\"number\" | \"text\" | \"time\" | \"date\" | \"datetime-local\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"url\"`} - The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.\n\n * `checkNonPrintableChar` {`boolean`} - \n\n * `size` {`\"small\" | \"medium\" | \"large\"`} - The input's size.\n\n * `filled` {`boolean`} - Draws a filled input.\n\n * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n * `destructive` {`boolean`} - Sets the input to a Destructive state, changing its visual appearance.\n\n * `pill` {`boolean`} - Draws a pill-style input with rounded edges.\n\n * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n * `help-text` {`string`} - \n\n * `error-message` {`string`} - \n\n * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n * `readonly` {`boolean`} - Makes the input readonly.\n\n * `password-toggle` {`boolean`} - Adds a button to toggle the password's visibility. Only applies to password types.\n\n * `password-visible` {`boolean`} - Determines whether or not the password is currently visible. Only applies to password input types.\n\n * `no-spin-buttons` {`boolean`} - Hides the browser's built-in increment/decrement spin buttons for number inputs.\n\n * `autocapitalize` {`\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n * `autocorrect` {`\"off\" | \"on\"`} - Indicates whether the browser's autocorrect feature is on or off.\n\n * `autocomplete` {`string`} - Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n\n * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n * `spellcheck` {`boolean`} - Enables spell checking on the input.\n\n * `canSavePassword` {`boolean`} - \n\n * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n * `noOutline` - \n\n * `noPadding` - \n\n * `name` {`string`} - The name of the input, submitted as a name/value pair with form data.\n\n * `value` {`string`} - The current value of the input, submitted as a name/value pair with form data.\n\n * `disabled` {`boolean`} - Disables the input.\n\n * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n * `pattern` {`string`} - A regular expression pattern to validate input against.\n\n * `min` {`string | number`} - The input's minimum value. Only applies to date and number input types.\n\n * `max` {`string | number`} - The input's maximum value. Only applies to date and number input types.\n\n * `step` {`number | \"any\"`} - Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.\n\n * `required` {`boolean`} - Makes the input a required field.\n\n * `minlength` {`number`} - The minimum length of input that will be considered valid.\n\n * `maxlength` {`number`} - The maximum length of input that will be considered valid.\n\nProperties:\n\n * `styles` - \n\n * `formControlController` - \n\n * `hasSlotController` - \n\n * `input` {`HTMLInputElement`} - \n\n * `hasFocus` {`boolean`} - \n\n * `title` {`string`} - \n\n * `type` {`\"number\" | \"text\" | \"time\" | \"date\" | \"datetime-local\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"url\"`} - The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.\n\n * `checkNonPrintableChar` {`boolean`} - \n\n * `size` {`\"small\" | \"medium\" | \"large\"`} - The input's size.\n\n * `filled` {`boolean`} - Draws a filled input.\n\n * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n * `destructive` {`boolean`} - Sets the input to a Destructive state, changing its visual appearance.\n\n * `pill` {`boolean`} - Draws a pill-style input with rounded edges.\n\n * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n * `helpText` {`string`} - \n\n * `errorMessage` {`string`} - \n\n * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n * `readonly` {`boolean`} - Makes the input readonly.\n\n * `passwordToggle` {`boolean`} - Adds a button to toggle the password's visibility. Only applies to password types.\n\n * `passwordVisible` {`boolean`} - Determines whether or not the password is currently visible. Only applies to password input types.\n\n * `noSpinButtons` {`boolean`} - Hides the browser's built-in increment/decrement spin buttons for number inputs.\n\n * `autocapitalize` {`\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n * `autocorrect` {`\"off\" | \"on\"`} - Indicates whether the browser's autocorrect feature is on or off.\n\n * `autocomplete` {`string`} - Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n\n * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n * `spellcheck` {`boolean`} - Enables spell checking on the input.\n\n * `canSavePassword` {`boolean`} - \n\n * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n * `hasPrintableCharacters` {`boolean`} - \n\n * `markedValue` {`string`} - \n\n * `noOutline` - \n\n * `noPadding` - \n\n * `valueAsDate` {`Date | null`} - Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted.\n\n * `valueAsNumber` {`number`} - Gets or sets the current value as a number. Returns `NaN` if the value can't be converted.\n\n * `name` {`string`} - The name of the input, submitted as a name/value pair with form data.\n\n * `value` {`string`} - The current value of the input, submitted as a name/value pair with form data.\n\n * `disabled` {`boolean`} - Disables the input.\n\n * `defaultValue` {`string`} - The default value of the form control. Primarily used for resetting the form control.\n\n * `defaultChecked` {`boolean | undefined`} - \n\n * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n * `pattern` {`string`} - A regular expression pattern to validate input against.\n\n * `min` {`string | number`} - The input's minimum value. Only applies to date and number input types.\n\n * `max` {`string | number`} - The input's maximum value. Only applies to date and number input types.\n\n * `step` {`number | \"any\"`} - Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.\n\n * `required` {`boolean`} - Makes the input a required field.\n\n * `minlength` {`number`} - The minimum length of input that will be considered valid.\n\n * `maxlength` {`number`} - The maximum length of input that will be considered valid.\n\n * `validity` {`ValidityState`} - Gets the validity state object\n\n * `validationMessage` {`string`} - Gets the validation message\n\n * `checkValidity` - \n\n * `getForm` - \n\n * `reportValidity` - \n\n * `setCustomValidity` - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
3649
3649
|
"attributes": [
|
|
3650
3650
|
{
|
|
3651
3651
|
"name": "title",
|
|
@@ -3780,13 +3780,13 @@
|
|
|
3780
3780
|
},
|
|
3781
3781
|
{
|
|
3782
3782
|
"name": "autocapitalize",
|
|
3783
|
-
"description": "`autocapitalize` {`\"
|
|
3783
|
+
"description": "`autocapitalize` {`\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\nProperty: autocapitalize",
|
|
3784
3784
|
"values": [
|
|
3785
3785
|
{
|
|
3786
|
-
"name": "
|
|
3786
|
+
"name": "none"
|
|
3787
3787
|
},
|
|
3788
3788
|
{
|
|
3789
|
-
"name": "
|
|
3789
|
+
"name": "off"
|
|
3790
3790
|
},
|
|
3791
3791
|
{
|
|
3792
3792
|
"name": "on"
|
|
@@ -6358,7 +6358,7 @@
|
|
|
6358
6358
|
},
|
|
6359
6359
|
{
|
|
6360
6360
|
"name": "nile-slider",
|
|
6361
|
-
"description": "Nile slider component.\n\nAttributes:\n\n * `minValue` {`number`} - \n\n * `value` {`number`} - \n\n * `maxValue` {`number`} - \n\n * `rangeOneValue` {`number`} - \n\n * `rangeTwoValue` {`number`} - \n\n * `showLabel` {`boolean`} - \n\n * `labelStart` {`string`} - \n\n * `labelEnd` {`string`} - \n\n * `rangeSlider` {`boolean`} - \n\n * `labelPosition` {`string`} - \n\n * `tooltipPosition` {`TooltipPosition`} - \n\nProperties:\n\n * `minValue` {`number`} - \n\n * `value` {`number`} - \n\n * `maxValue` {`number`} - \n\n * `rangeOneValue` {`number`} - \n\n * `rangeTwoValue` {`number`} - \n\n * `showLabel` {`boolean`} - \n\n * `labelStart` {`string`} - \n\n * `labelEnd` {`string`} - \n\n * `rangeSlider` {`boolean`} - \n\n * `labelPosition` {`string`} - \n\n * `tooltipPosition` {`TooltipPosition`} - \n\n * `buttonOne` {`HTMLElement`} - \n\n * `buttonTwo` {`HTMLElement`} - \n\n * `range` {`HTMLElement`} - \n\n * `completed` {`HTMLElement`} - \n\n * `activeThumb` {`\"one\" | \"two\" | null`} - \n\n * `onMouseMove` - \n\n * `onMouseUp` - \n\n * `onMouseDown` - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
6361
|
+
"description": "Nile slider component.\n\nAttributes:\n\n * `minValue` {`number`} - \n\n * `value` {`number`} - \n\n * `maxValue` {`number`} - \n\n * `rangeOneValue` {`number`} - \n\n * `rangeTwoValue` {`number`} - \n\n * `showLabel` {`boolean`} - \n\n * `labelStart` {`string`} - \n\n * `labelEnd` {`string`} - \n\n * `rangeSlider` {`boolean`} - \n\n * `labelPosition` {`string`} - \n\n * `tooltipPosition` {`TooltipPosition`} - \n\n * `label` {`string`} - \n\n * `disabled` {`boolean`} - \n\n * `error` {`boolean`} - \n\n * `valueLabel` {`ValueLabelMode`} - \n\nProperties:\n\n * `minValue` {`number`} - \n\n * `value` {`number`} - \n\n * `maxValue` {`number`} - \n\n * `rangeOneValue` {`number`} - \n\n * `rangeTwoValue` {`number`} - \n\n * `showLabel` {`boolean`} - \n\n * `labelStart` {`string`} - \n\n * `labelEnd` {`string`} - \n\n * `rangeSlider` {`boolean`} - \n\n * `labelPosition` {`string`} - \n\n * `tooltipPosition` {`TooltipPosition`} - \n\n * `label` {`string`} - \n\n * `disabled` {`boolean`} - \n\n * `error` {`boolean`} - \n\n * `valueLabel` {`ValueLabelMode`} - \n\n * `buttonOne` {`HTMLElement`} - \n\n * `buttonTwo` {`HTMLElement`} - \n\n * `range` {`HTMLElement`} - \n\n * `completed` {`HTMLElement`} - \n\n * `activeThumb` {`\"one\" | \"two\" | null`} - \n\n * `onMouseMove` - \n\n * `onMouseUp` - \n\n * `onMouseDown` - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
6362
6362
|
"attributes": [
|
|
6363
6363
|
{
|
|
6364
6364
|
"name": "minValue",
|
|
@@ -6443,6 +6443,35 @@
|
|
|
6443
6443
|
"name": "left-end"
|
|
6444
6444
|
}
|
|
6445
6445
|
]
|
|
6446
|
+
},
|
|
6447
|
+
{
|
|
6448
|
+
"name": "label",
|
|
6449
|
+
"description": "`label` {`string`} - \n\nProperty: label\n\nDefault: "
|
|
6450
|
+
},
|
|
6451
|
+
{
|
|
6452
|
+
"name": "disabled",
|
|
6453
|
+
"description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
|
|
6454
|
+
"valueSet": "v"
|
|
6455
|
+
},
|
|
6456
|
+
{
|
|
6457
|
+
"name": "error",
|
|
6458
|
+
"description": "`error` {`boolean`} - \n\nProperty: error\n\nDefault: false",
|
|
6459
|
+
"valueSet": "v"
|
|
6460
|
+
},
|
|
6461
|
+
{
|
|
6462
|
+
"name": "valueLabel",
|
|
6463
|
+
"description": "`valueLabel` {`ValueLabelMode`} - \n\nProperty: valueLabel\n\nDefault: tooltip",
|
|
6464
|
+
"values": [
|
|
6465
|
+
{
|
|
6466
|
+
"name": "bottom"
|
|
6467
|
+
},
|
|
6468
|
+
{
|
|
6469
|
+
"name": "tooltip"
|
|
6470
|
+
},
|
|
6471
|
+
{
|
|
6472
|
+
"name": "none"
|
|
6473
|
+
}
|
|
6474
|
+
]
|
|
6446
6475
|
}
|
|
6447
6476
|
]
|
|
6448
6477
|
},
|
|
@@ -6896,7 +6925,7 @@
|
|
|
6896
6925
|
},
|
|
6897
6926
|
{
|
|
6898
6927
|
"name": "nile-textarea",
|
|
6899
|
-
"description": "Events:\n\n * `nile-blur` {} - Emitted when the control loses focus.\n\n * `nile-change` {} - Emitted when an alteration to the control's value is committed by the user.\n\n * `nile-focus` {} - Emitted when the control gains focus.\n\n * `nile-input` {} - Emitted when the control receives input.\n\nSlots:\n\n * `label` {} - The textarea's label. Alternatively, you can use the `label` attribute.\n\n * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n * `title` {`string`} - \n\n * `name` {`string`} - The name of the textarea, submitted as a name/value pair with form data.\n\n * `value` {`string`} - The current value of the textarea, submitted as a name/value pair with form data.\n\n * `size` {`string`} - The textarea's size.\n\n * `filled` {`boolean`} - Draws a filled textarea.\n\n * `label` {`string`} - The textarea's label. If you need to display HTML, use the `label` slot instead.\n\n * `help-text` {`string`} - \n\n * `error-message` {`string`} - \n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n * `rows` {`number`} - The number of rows to display by default.\n\n * `resize` {`\"none\" | \"vertical\" | \"auto\"`} - Controls how the textarea can be resized.\n\n * `disabled` {`boolean`} - Disables the textarea.\n\n * `readonly` {`boolean`} - Makes the textarea readonly.\n\n * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n * `required` {`boolean`} - Makes the textarea a required field.\n\n * `minlength` {`number`} - \n\n * `maxlength` {`number`} - \n\n * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n * `autocapitalize` {`\"
|
|
6928
|
+
"description": "Events:\n\n * `nile-blur` {} - Emitted when the control loses focus.\n\n * `nile-change` {} - Emitted when an alteration to the control's value is committed by the user.\n\n * `nile-focus` {} - Emitted when the control gains focus.\n\n * `nile-input` {} - Emitted when the control receives input.\n\nSlots:\n\n * `label` {} - The textarea's label. Alternatively, you can use the `label` attribute.\n\n * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n * `title` {`string`} - \n\n * `name` {`string`} - The name of the textarea, submitted as a name/value pair with form data.\n\n * `value` {`string`} - The current value of the textarea, submitted as a name/value pair with form data.\n\n * `size` {`string`} - The textarea's size.\n\n * `filled` {`boolean`} - Draws a filled textarea.\n\n * `label` {`string`} - The textarea's label. If you need to display HTML, use the `label` slot instead.\n\n * `help-text` {`string`} - \n\n * `error-message` {`string`} - \n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n * `rows` {`number`} - The number of rows to display by default.\n\n * `resize` {`\"none\" | \"vertical\" | \"auto\"`} - Controls how the textarea can be resized.\n\n * `disabled` {`boolean`} - Disables the textarea.\n\n * `readonly` {`boolean`} - Makes the textarea readonly.\n\n * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n * `required` {`boolean`} - Makes the textarea a required field.\n\n * `minlength` {`number`} - \n\n * `maxlength` {`number`} - \n\n * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n * `autocapitalize` {`\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n * `autocorrect` {`string`} - Indicates whether the browser's autocorrect feature is on or off.\n\n * `autocomplete` {`string`} - Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n\n * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n * `spellcheck` {`boolean`} - Enables spell checking on the textarea.\n\n * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n * `fullHeight` {`boolean`} - \n\n * `checkNonPrintableChar` {`boolean`} - \n\nProperties:\n\n * `styles` - \n\n * `hasSlotController` - \n\n * `resizeObserver` - \n\n * `input` {`HTMLTextAreaElement`} - \n\n * `hasFocus` {`boolean`} - \n\n * `title` {`string`} - \n\n * `name` {`string`} - The name of the textarea, submitted as a name/value pair with form data.\n\n * `value` {`string`} - The current value of the textarea, submitted as a name/value pair with form data.\n\n * `size` {`string`} - The textarea's size.\n\n * `filled` {`boolean`} - Draws a filled textarea.\n\n * `label` {`string`} - The textarea's label. If you need to display HTML, use the `label` slot instead.\n\n * `helpText` {`string`} - \n\n * `errorMessage` {`string`} - \n\n * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n * `rows` {`number`} - The number of rows to display by default.\n\n * `resize` {`\"none\" | \"vertical\" | \"auto\"`} - Controls how the textarea can be resized.\n\n * `disabled` {`boolean`} - Disables the textarea.\n\n * `readonly` {`boolean`} - Makes the textarea readonly.\n\n * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n * `required` {`boolean`} - Makes the textarea a required field.\n\n * `minlength` {`number`} - \n\n * `maxlength` {`number`} - \n\n * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n * `autocapitalize` {`\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n * `autocorrect` {`string`} - Indicates whether the browser's autocorrect feature is on or off.\n\n * `autocomplete` {`string`} - Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n\n * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n * `spellcheck` {`boolean`} - Enables spell checking on the textarea.\n\n * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n * `defaultValue` {`string`} - The default value of the form control. Primarily used for resetting the form control.\n\n * `fullHeight` {`boolean`} - \n\n * `checkNonPrintableChar` {`boolean`} - \n\n * `hasPrintableCharacters` {`boolean`} - \n\n * `markedValue` {`string`} - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
6900
6929
|
"attributes": [
|
|
6901
6930
|
{
|
|
6902
6931
|
"name": "title",
|
|
@@ -6998,13 +7027,13 @@
|
|
|
6998
7027
|
},
|
|
6999
7028
|
{
|
|
7000
7029
|
"name": "autocapitalize",
|
|
7001
|
-
"description": "`autocapitalize` {`\"
|
|
7030
|
+
"description": "`autocapitalize` {`\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\nProperty: autocapitalize",
|
|
7002
7031
|
"values": [
|
|
7003
7032
|
{
|
|
7004
|
-
"name": "
|
|
7033
|
+
"name": "none"
|
|
7005
7034
|
},
|
|
7006
7035
|
{
|
|
7007
|
-
"name": "
|
|
7036
|
+
"name": "off"
|
|
7008
7037
|
},
|
|
7009
7038
|
{
|
|
7010
7039
|
"name": "on"
|