@vaadin/password-field 25.2.0-alpha9 → 25.2.0-beta1
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/custom-elements.json +255 -1
- package/package.json +12 -12
- package/src/vaadin-password-field-button.js +0 -3
- package/src/vaadin-password-field-mixin.js +0 -7
- package/src/vaadin-password-field.d.ts +39 -0
- package/src/vaadin-password-field.js +39 -1
- package/web-types.json +54 -156
- package/web-types.lit.json +51 -51
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/password-field",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,173 +16,173 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-password-field",
|
|
19
|
-
"description": "`<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.\n\n```html\n<vaadin-password-field label=\"Password\"></vaadin-password-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`field-button` | Set on both clear and reveal buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`reveal-button` | The eye icon which toggles the password visibility\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`input-prevented` | Temporarily set when invalid input is prevented\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`password-visible` | Set when the password is visible\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
19
|
+
"description": "`<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.\n\n```html\n<vaadin-password-field label=\"Password\"></vaadin-password-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`field-button` | Set on both clear and reveal buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`reveal-button` | The eye icon which toggles the password visibility\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`input-prevented` | Temporarily set when invalid input is prevented\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`password-visible` | Set when the password is visible\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
|
-
"name": "
|
|
24
|
-
"description": "
|
|
23
|
+
"name": ".accessibleName",
|
|
24
|
+
"description": "String used to label the component to screen reader users.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": "
|
|
31
|
-
"description": "
|
|
30
|
+
"name": ".accessibleNameRef",
|
|
31
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": "
|
|
38
|
-
"description": "
|
|
37
|
+
"name": ".allowedCharPattern",
|
|
38
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
|
-
"name": "
|
|
45
|
-
"description": "
|
|
44
|
+
"name": ".autocapitalize",
|
|
45
|
+
"description": "This is a property supported by Safari and Chrome that is used to control whether\nautocapitalization should be enabled when the user is entering/editing the text.\nPossible values are:\ncharacters: Characters capitalization.\nwords: Words capitalization.\nsentences: Sentences capitalization.\nnone: No capitalization.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
|
-
"name": "
|
|
52
|
-
"description": "
|
|
51
|
+
"name": ".autocomplete",
|
|
52
|
+
"description": "Whether the value of the control can be automatically completed by the browser.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "
|
|
59
|
-
"description": "
|
|
58
|
+
"name": ".autocorrect",
|
|
59
|
+
"description": "This is a property supported by Safari that is used to control whether\nautocorrection should be enabled when the user is entering/editing the text.\nPossible values are:\non: Enable autocorrection.\noff: Disable autocorrection.",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
|
-
"name": "?
|
|
66
|
-
"description": "
|
|
65
|
+
"name": "?autofocus",
|
|
66
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
-
"name": "?
|
|
73
|
-
"description": "
|
|
72
|
+
"name": "?autoselect",
|
|
73
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
74
74
|
"value": {
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"name": "?
|
|
80
|
-
"description": "Set to true to
|
|
79
|
+
"name": "?clearButtonVisible",
|
|
80
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
-
"name": "
|
|
87
|
-
"description": "
|
|
86
|
+
"name": "?disabled",
|
|
87
|
+
"description": "If true, the user cannot interact with this element.",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
|
-
"name": ".
|
|
94
|
-
"description": "
|
|
93
|
+
"name": ".errorMessage",
|
|
94
|
+
"description": "Error to show when the field is invalid.",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
|
-
"name": ".
|
|
101
|
-
"description": "
|
|
100
|
+
"name": ".helperText",
|
|
101
|
+
"description": "String used for the helper text.",
|
|
102
102
|
"value": {
|
|
103
103
|
"kind": "expression"
|
|
104
104
|
}
|
|
105
105
|
},
|
|
106
106
|
{
|
|
107
|
-
"name": ".
|
|
108
|
-
"description": "
|
|
107
|
+
"name": ".i18n",
|
|
108
|
+
"description": "An object with translated strings used for localization.\nIt has the following structure and default values:\n\n```js\n{\n // Translation of the reveal icon button accessible label\n reveal: 'Show password'\n}\n```",
|
|
109
109
|
"value": {
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
|
-
"name": "
|
|
115
|
-
"description": "
|
|
114
|
+
"name": "?invalid",
|
|
115
|
+
"description": "Set to true when the field is invalid.",
|
|
116
116
|
"value": {
|
|
117
117
|
"kind": "expression"
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
120
|
{
|
|
121
|
-
"name": ".
|
|
122
|
-
"description": "
|
|
121
|
+
"name": ".label",
|
|
122
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
123
123
|
"value": {
|
|
124
124
|
"kind": "expression"
|
|
125
125
|
}
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
|
-
"name": "
|
|
129
|
-
"description": "
|
|
128
|
+
"name": "?manualValidation",
|
|
129
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
130
130
|
"value": {
|
|
131
131
|
"kind": "expression"
|
|
132
132
|
}
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
|
-
"name": ".
|
|
136
|
-
"description": "
|
|
135
|
+
"name": ".maxlength",
|
|
136
|
+
"description": "Maximum number of characters (in Unicode code points) that the user can enter.",
|
|
137
137
|
"value": {
|
|
138
138
|
"kind": "expression"
|
|
139
139
|
}
|
|
140
140
|
},
|
|
141
141
|
{
|
|
142
|
-
"name": ".
|
|
143
|
-
"description": "
|
|
142
|
+
"name": ".minlength",
|
|
143
|
+
"description": "Minimum number of characters (in Unicode code points) that the user can enter.",
|
|
144
144
|
"value": {
|
|
145
145
|
"kind": "expression"
|
|
146
146
|
}
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
|
-
"name": ".
|
|
150
|
-
"description": "The
|
|
149
|
+
"name": ".name",
|
|
150
|
+
"description": "The name of this field.",
|
|
151
151
|
"value": {
|
|
152
152
|
"kind": "expression"
|
|
153
153
|
}
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
|
-
"name": ".
|
|
157
|
-
"description": "
|
|
156
|
+
"name": ".pattern",
|
|
157
|
+
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
|
|
158
158
|
"value": {
|
|
159
159
|
"kind": "expression"
|
|
160
160
|
}
|
|
161
161
|
},
|
|
162
162
|
{
|
|
163
|
-
"name": ".
|
|
164
|
-
"description": "
|
|
163
|
+
"name": ".placeholder",
|
|
164
|
+
"description": "A hint to the user of what can be entered in the field.",
|
|
165
165
|
"value": {
|
|
166
166
|
"kind": "expression"
|
|
167
167
|
}
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
|
-
"name": "
|
|
171
|
-
"description": "
|
|
170
|
+
"name": "?readonly",
|
|
171
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
172
172
|
"value": {
|
|
173
173
|
"kind": "expression"
|
|
174
174
|
}
|
|
175
175
|
},
|
|
176
176
|
{
|
|
177
|
-
"name": "
|
|
178
|
-
"description": "
|
|
177
|
+
"name": "?required",
|
|
178
|
+
"description": "Specifies that the user must fill in a value.",
|
|
179
179
|
"value": {
|
|
180
180
|
"kind": "expression"
|
|
181
181
|
}
|
|
182
182
|
},
|
|
183
183
|
{
|
|
184
|
-
"name": "
|
|
185
|
-
"description": "
|
|
184
|
+
"name": "?revealButtonHidden",
|
|
185
|
+
"description": "Set to true to hide the eye icon which toggles the password visibility.",
|
|
186
186
|
"value": {
|
|
187
187
|
"kind": "expression"
|
|
188
188
|
}
|
|
@@ -210,7 +210,7 @@
|
|
|
210
210
|
},
|
|
211
211
|
{
|
|
212
212
|
"name": "@input",
|
|
213
|
-
"description": "Fired when the value is changed by the user: on every typing keystroke
|
|
213
|
+
"description": "Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.",
|
|
214
214
|
"value": {
|
|
215
215
|
"kind": "expression"
|
|
216
216
|
}
|