@vaadin/login 23.3.0-alpha4 → 23.3.0-alpha5
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/package.json +10 -10
- package/src/vaadin-login-form.d.ts +16 -1
- package/src/vaadin-login-form.js +16 -27
- package/src/vaadin-login-mixin.js +0 -3
- package/src/vaadin-login-overlay.d.ts +24 -0
- package/src/vaadin-login-overlay.js +5 -2
- package/web-types.json +3 -27
- package/web-types.lit.json +3 -45
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/login",
|
|
3
|
-
"version": "23.3.0-
|
|
3
|
+
"version": "23.3.0-alpha5",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,14 +37,14 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
39
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/button": "23.3.0-
|
|
41
|
-
"@vaadin/component-base": "23.3.0-
|
|
42
|
-
"@vaadin/overlay": "23.3.0-
|
|
43
|
-
"@vaadin/password-field": "23.3.0-
|
|
44
|
-
"@vaadin/text-field": "23.3.0-
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "23.3.0-
|
|
46
|
-
"@vaadin/vaadin-material-styles": "23.3.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "23.3.0-
|
|
40
|
+
"@vaadin/button": "23.3.0-alpha5",
|
|
41
|
+
"@vaadin/component-base": "23.3.0-alpha5",
|
|
42
|
+
"@vaadin/overlay": "23.3.0-alpha5",
|
|
43
|
+
"@vaadin/password-field": "23.3.0-alpha5",
|
|
44
|
+
"@vaadin/text-field": "23.3.0-alpha5",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "23.3.0-alpha5",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "23.3.0-alpha5",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "23.3.0-alpha5"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "0b6fdcf444683e97e3efb433d603e1274d5bcd66"
|
|
59
59
|
}
|
|
@@ -8,12 +8,26 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
8
8
|
import { LoginMixin } from './vaadin-login-mixin.js';
|
|
9
9
|
export { LoginI18n } from './vaadin-login-mixin.js';
|
|
10
10
|
|
|
11
|
+
/**
|
|
12
|
+
* Fired when the `disabled` property changes.
|
|
13
|
+
*/
|
|
14
|
+
export type LoginFormDisabledChangedEvent = CustomEvent<{ value: boolean }>;
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Fired when the `error` property changes.
|
|
18
|
+
*/
|
|
19
|
+
export type LoginFormErrorChangedEvent = CustomEvent<{ value: boolean }>;
|
|
20
|
+
|
|
11
21
|
/**
|
|
12
22
|
* Fired when a user submits the login.
|
|
13
23
|
*/
|
|
14
24
|
export type LoginFormLoginEvent = CustomEvent<{ username: string; password: string }>;
|
|
15
25
|
|
|
16
26
|
export interface LoginFormCustomEventMap {
|
|
27
|
+
'disabled-changed': LoginFormDisabledChangedEvent;
|
|
28
|
+
|
|
29
|
+
'error-changed': LoginFormErrorChangedEvent;
|
|
30
|
+
|
|
17
31
|
'forgot-password': Event;
|
|
18
32
|
|
|
19
33
|
login: LoginFormLoginEvent;
|
|
@@ -46,11 +60,12 @@ export interface LoginFormEventMap extends HTMLElementEventMap, LoginFormCustomE
|
|
|
46
60
|
* `error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.
|
|
47
61
|
* `error-message-title` | Container for error message title
|
|
48
62
|
* `error-message-description` | Container for error message description
|
|
49
|
-
* `error-message-description` | Container for error message description
|
|
50
63
|
* `footer` | Container additional information text from `i18n` object
|
|
51
64
|
*
|
|
52
65
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
53
66
|
*
|
|
67
|
+
* @fires {CustomEvent} disabled-changed - Fired when the `disabled` property changes.
|
|
68
|
+
* @fires {CustomEvent} error-changed - Fired when the `error` property changes.
|
|
54
69
|
* @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
|
|
55
70
|
* @fires {CustomEvent} login - Fired when a user submits the login.
|
|
56
71
|
*/
|
package/src/vaadin-login-form.js
CHANGED
|
@@ -36,11 +36,12 @@ import { LoginMixin } from './vaadin-login-mixin.js';
|
|
|
36
36
|
* `error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.
|
|
37
37
|
* `error-message-title` | Container for error message title
|
|
38
38
|
* `error-message-description` | Container for error message description
|
|
39
|
-
* `error-message-description` | Container for error message description
|
|
40
39
|
* `footer` | Container additional information text from `i18n` object
|
|
41
40
|
*
|
|
42
41
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
43
42
|
*
|
|
43
|
+
* @fires {CustomEvent} disabled-changed - Fired when the `disabled` property changes.
|
|
44
|
+
* @fires {CustomEvent} error-changed - Fired when the `error` property changes.
|
|
44
45
|
* @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
|
|
45
46
|
* @fires {CustomEvent} login - Fired when a user submits the login.
|
|
46
47
|
*
|
|
@@ -60,11 +61,9 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
60
61
|
<vaadin-login-form-wrapper
|
|
61
62
|
theme$="[[_theme]]"
|
|
62
63
|
part="vaadin-login-native-form-wrapper"
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
no-forgot-password="{{noForgotPassword}}"
|
|
67
|
-
i18n="{{i18n}}"
|
|
64
|
+
error="[[error]]"
|
|
65
|
+
no-forgot-password="[[noForgotPassword]]"
|
|
66
|
+
i18n="[[i18n]]"
|
|
68
67
|
on-login="_retargetEvent"
|
|
69
68
|
on-forgot-password="_retargetEvent"
|
|
70
69
|
>
|
|
@@ -110,7 +109,7 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
110
109
|
/** @protected */
|
|
111
110
|
connectedCallback() {
|
|
112
111
|
super.connectedCallback();
|
|
113
|
-
|
|
112
|
+
|
|
114
113
|
if (!this.noAutofocus) {
|
|
115
114
|
this.$.vaadinLoginUsername.focus();
|
|
116
115
|
}
|
|
@@ -137,7 +136,10 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
137
136
|
}
|
|
138
137
|
|
|
139
138
|
submit() {
|
|
140
|
-
|
|
139
|
+
const userName = this.$.vaadinLoginUsername;
|
|
140
|
+
const password = this.$.vaadinLoginPassword;
|
|
141
|
+
|
|
142
|
+
if (this.disabled || !(userName.validate() && password.validate())) {
|
|
141
143
|
return;
|
|
142
144
|
}
|
|
143
145
|
|
|
@@ -148,8 +150,8 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
148
150
|
bubbles: true,
|
|
149
151
|
cancelable: true,
|
|
150
152
|
detail: {
|
|
151
|
-
username:
|
|
152
|
-
password:
|
|
153
|
+
username: userName.value,
|
|
154
|
+
password: password.value,
|
|
153
155
|
},
|
|
154
156
|
};
|
|
155
157
|
|
|
@@ -165,24 +167,14 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
165
167
|
}
|
|
166
168
|
}
|
|
167
169
|
|
|
168
|
-
/** @private */
|
|
169
|
-
__isValid(input) {
|
|
170
|
-
return (input.validate && input.validate()) || (input.checkValidity && input.checkValidity());
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
/** @private */
|
|
174
|
-
_isEnterKey(e) {
|
|
175
|
-
return e.key === 'Enter' || e.keyCode === 13;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
170
|
/** @private */
|
|
179
171
|
_handleInputKeydown(e) {
|
|
180
|
-
if (
|
|
172
|
+
if (e.key === 'Enter') {
|
|
181
173
|
const { currentTarget: inputActive } = e;
|
|
182
174
|
const nextInput =
|
|
183
175
|
inputActive.id === 'vaadinLoginUsername' ? this.$.vaadinLoginPassword : this.$.vaadinLoginUsername;
|
|
184
|
-
if (
|
|
185
|
-
if (
|
|
176
|
+
if (inputActive.validate()) {
|
|
177
|
+
if (nextInput.validate()) {
|
|
186
178
|
this.submit();
|
|
187
179
|
} else {
|
|
188
180
|
nextInput.focus();
|
|
@@ -193,12 +185,9 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
|
|
|
193
185
|
|
|
194
186
|
/** @private */
|
|
195
187
|
_handleInputKeyup(e) {
|
|
196
|
-
const isTab = e.key === 'Tab' || e.keyCode === 9;
|
|
197
188
|
const input = e.currentTarget;
|
|
198
|
-
if (
|
|
189
|
+
if (e.key === 'Tab' && input instanceof HTMLInputElement) {
|
|
199
190
|
input.select();
|
|
200
|
-
// IOS 9 workaround: https://stackoverflow.com/a/7436574
|
|
201
|
-
setTimeout(() => input.setSelectionRange(0, 9999));
|
|
202
191
|
}
|
|
203
192
|
}
|
|
204
193
|
}
|
|
@@ -32,7 +32,6 @@ export const LoginMixin = (superClass) =>
|
|
|
32
32
|
action: {
|
|
33
33
|
type: String,
|
|
34
34
|
value: null,
|
|
35
|
-
notify: true,
|
|
36
35
|
},
|
|
37
36
|
|
|
38
37
|
/**
|
|
@@ -67,7 +66,6 @@ export const LoginMixin = (superClass) =>
|
|
|
67
66
|
noForgotPassword: {
|
|
68
67
|
type: Boolean,
|
|
69
68
|
value: false,
|
|
70
|
-
notify: true,
|
|
71
69
|
},
|
|
72
70
|
|
|
73
71
|
/**
|
|
@@ -130,7 +128,6 @@ export const LoginMixin = (superClass) =>
|
|
|
130
128
|
},
|
|
131
129
|
};
|
|
132
130
|
},
|
|
133
|
-
notify: true,
|
|
134
131
|
},
|
|
135
132
|
|
|
136
133
|
/**
|
|
@@ -8,12 +8,33 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
8
8
|
import { LoginMixin } from './vaadin-login-mixin.js';
|
|
9
9
|
export { LoginI18n } from './vaadin-login-mixin.js';
|
|
10
10
|
|
|
11
|
+
/**
|
|
12
|
+
* Fired when the `description` property changes.
|
|
13
|
+
*/
|
|
14
|
+
export type LoginOverlayDescriptionChangedEvent = CustomEvent<{ value: string }>;
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Fired when the `disabled` property changes.
|
|
18
|
+
*/
|
|
19
|
+
export type LoginOverlayDisabledChangedEvent = CustomEvent<{ value: boolean }>;
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Fired when the `error` property changes.
|
|
23
|
+
*/
|
|
24
|
+
export type LoginOverlayErrorChangedEvent = CustomEvent<{ value: boolean }>;
|
|
25
|
+
|
|
11
26
|
/**
|
|
12
27
|
* Fired when a user submits the login.
|
|
13
28
|
*/
|
|
14
29
|
export type LoginOverlayLoginEvent = CustomEvent<{ username: string; password: string }>;
|
|
15
30
|
|
|
16
31
|
export interface LoginOverlayCustomEventMap {
|
|
32
|
+
'description-changed': LoginOverlayDescriptionChangedEvent;
|
|
33
|
+
|
|
34
|
+
'disabled-changed': LoginOverlayDisabledChangedEvent;
|
|
35
|
+
|
|
36
|
+
'error-changed': LoginOverlayErrorChangedEvent;
|
|
37
|
+
|
|
17
38
|
'forgot-password': Event;
|
|
18
39
|
|
|
19
40
|
login: LoginOverlayLoginEvent;
|
|
@@ -48,6 +69,9 @@ export interface LoginOverlayEventMap extends HTMLElementEventMap, LoginOverlayC
|
|
|
48
69
|
* See [`<vaadin-login-form>`](#/elements/vaadin-login-form)
|
|
49
70
|
* documentation for `<vaadin-login-form-wrapper>` stylable parts.
|
|
50
71
|
*
|
|
72
|
+
* @fires {CustomEvent} description-changed - Fired when the `description` property changes.
|
|
73
|
+
* @fires {CustomEvent} disabled-changed - Fired when the `disabled` property changes.
|
|
74
|
+
* @fires {CustomEvent} error-changed - Fired when the `error` property changes.
|
|
51
75
|
* @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
|
|
52
76
|
* @fires {CustomEvent} login - Fired when a user submits the login.
|
|
53
77
|
*/
|
|
@@ -37,6 +37,9 @@ import { LoginMixin } from './vaadin-login-mixin.js';
|
|
|
37
37
|
* See [`<vaadin-login-form>`](#/elements/vaadin-login-form)
|
|
38
38
|
* documentation for `<vaadin-login-form-wrapper>` stylable parts.
|
|
39
39
|
*
|
|
40
|
+
* @fires {CustomEvent} description-changed - Fired when the `description` property changes.
|
|
41
|
+
* @fires {CustomEvent} disabled-changed - Fired when the `disabled` property changes.
|
|
42
|
+
* @fires {CustomEvent} error-changed - Fired when the `error` property changes.
|
|
40
43
|
* @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
|
|
41
44
|
* @fires {CustomEvent} login - Fired when a user submits the login.
|
|
42
45
|
*
|
|
@@ -60,11 +63,11 @@ class LoginOverlay extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)
|
|
|
60
63
|
<vaadin-login-form
|
|
61
64
|
theme="with-overlay"
|
|
62
65
|
id="vaadinLoginForm"
|
|
63
|
-
action="
|
|
66
|
+
action="[[action]]"
|
|
64
67
|
disabled="{{disabled}}"
|
|
65
68
|
error="{{error}}"
|
|
66
69
|
no-autofocus="[[noAutofocus]]"
|
|
67
|
-
no-forgot-password="
|
|
70
|
+
no-forgot-password="[[noForgotPassword]]"
|
|
68
71
|
i18n="{{i18n}}"
|
|
69
72
|
on-login="_retargetEvent"
|
|
70
73
|
on-forgot-password="_retargetEvent"
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/login",
|
|
4
|
-
"version": "23.3.0-
|
|
4
|
+
"version": "23.3.0-alpha5",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-login-form",
|
|
11
|
-
"description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name | Description\n---------------|---------------------------------------------------------|\n`form` | Container for the entire component's content\n`form-title` | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title` | Container for error message title\n`error-message-description` | Container for error message description\n`
|
|
11
|
+
"description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name | Description\n---------------|---------------------------------------------------------|\n`form` | Container for the entire component's content\n`form-title` | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title` | Container for error message title\n`error-message-description` | Container for error message description\n`footer` | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "action",
|
|
@@ -135,10 +135,6 @@
|
|
|
135
135
|
"name": "login",
|
|
136
136
|
"description": "Fired when an user submits the login.\nThe event contains `username` and `password` values in the `detail` property."
|
|
137
137
|
},
|
|
138
|
-
{
|
|
139
|
-
"name": "action-changed",
|
|
140
|
-
"description": "Fired when the `action` property changes."
|
|
141
|
-
},
|
|
142
138
|
{
|
|
143
139
|
"name": "disabled-changed",
|
|
144
140
|
"description": "Fired when the `disabled` property changes."
|
|
@@ -146,21 +142,13 @@
|
|
|
146
142
|
{
|
|
147
143
|
"name": "error-changed",
|
|
148
144
|
"description": "Fired when the `error` property changes."
|
|
149
|
-
},
|
|
150
|
-
{
|
|
151
|
-
"name": "no-forgot-password-changed",
|
|
152
|
-
"description": "Fired when the `noForgotPassword` property changes."
|
|
153
|
-
},
|
|
154
|
-
{
|
|
155
|
-
"name": "i18n-changed",
|
|
156
|
-
"description": "Fired when the `i18n` property changes."
|
|
157
145
|
}
|
|
158
146
|
]
|
|
159
147
|
}
|
|
160
148
|
},
|
|
161
149
|
{
|
|
162
150
|
"name": "vaadin-login-overlay",
|
|
163
|
-
"description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name | Description\n----------------|---------------------------------------------------------|\n`card` | Container for the entire component's content\n`brand` | Container for application title and description\n`form` | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-
|
|
151
|
+
"description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name | Description\n----------------|---------------------------------------------------------|\n`card` | Container for the entire component's content\n`brand` | Container for application title and description\n`form` | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha5/#/elements/vaadin-login-form)\ndocumentation for `<vaadin-login-form-wrapper>` stylable parts.",
|
|
164
152
|
"attributes": [
|
|
165
153
|
{
|
|
166
154
|
"name": "action",
|
|
@@ -345,10 +333,6 @@
|
|
|
345
333
|
"name": "description-changed",
|
|
346
334
|
"description": "Fired when the `description` property changes."
|
|
347
335
|
},
|
|
348
|
-
{
|
|
349
|
-
"name": "action-changed",
|
|
350
|
-
"description": "Fired when the `action` property changes."
|
|
351
|
-
},
|
|
352
336
|
{
|
|
353
337
|
"name": "disabled-changed",
|
|
354
338
|
"description": "Fired when the `disabled` property changes."
|
|
@@ -356,14 +340,6 @@
|
|
|
356
340
|
{
|
|
357
341
|
"name": "error-changed",
|
|
358
342
|
"description": "Fired when the `error` property changes."
|
|
359
|
-
},
|
|
360
|
-
{
|
|
361
|
-
"name": "no-forgot-password-changed",
|
|
362
|
-
"description": "Fired when the `noForgotPassword` property changes."
|
|
363
|
-
},
|
|
364
|
-
{
|
|
365
|
-
"name": "i18n-changed",
|
|
366
|
-
"description": "Fired when the `i18n` property changes."
|
|
367
343
|
}
|
|
368
344
|
]
|
|
369
345
|
}
|
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/login",
|
|
4
|
-
"version": "23.3.0-
|
|
4
|
+
"version": "23.3.0-alpha5",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-login-form",
|
|
19
|
-
"description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name | Description\n---------------|---------------------------------------------------------|\n`form` | Container for the entire component's content\n`form-title` | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title` | Container for error message title\n`error-message-description` | Container for error message description\n`
|
|
19
|
+
"description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name | Description\n---------------|---------------------------------------------------------|\n`form` | Container for the entire component's content\n`form-title` | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title` | Container for error message title\n`error-message-description` | Container for error message description\n`footer` | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -75,13 +75,6 @@
|
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
|
-
{
|
|
79
|
-
"name": "@action-changed",
|
|
80
|
-
"description": "Fired when the `action` property changes.",
|
|
81
|
-
"value": {
|
|
82
|
-
"kind": "expression"
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
78
|
{
|
|
86
79
|
"name": "@disabled-changed",
|
|
87
80
|
"description": "Fired when the `disabled` property changes.",
|
|
@@ -95,26 +88,12 @@
|
|
|
95
88
|
"value": {
|
|
96
89
|
"kind": "expression"
|
|
97
90
|
}
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
"name": "@no-forgot-password-changed",
|
|
101
|
-
"description": "Fired when the `noForgotPassword` property changes.",
|
|
102
|
-
"value": {
|
|
103
|
-
"kind": "expression"
|
|
104
|
-
}
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
"name": "@i18n-changed",
|
|
108
|
-
"description": "Fired when the `i18n` property changes.",
|
|
109
|
-
"value": {
|
|
110
|
-
"kind": "expression"
|
|
111
|
-
}
|
|
112
91
|
}
|
|
113
92
|
]
|
|
114
93
|
},
|
|
115
94
|
{
|
|
116
95
|
"name": "vaadin-login-overlay",
|
|
117
|
-
"description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name | Description\n----------------|---------------------------------------------------------|\n`card` | Container for the entire component's content\n`brand` | Container for application title and description\n`form` | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-
|
|
96
|
+
"description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name | Description\n----------------|---------------------------------------------------------|\n`card` | Container for the entire component's content\n`brand` | Container for application title and description\n`form` | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha5/#/elements/vaadin-login-form)\ndocumentation for `<vaadin-login-form-wrapper>` stylable parts.",
|
|
118
97
|
"extension": true,
|
|
119
98
|
"attributes": [
|
|
120
99
|
{
|
|
@@ -201,13 +180,6 @@
|
|
|
201
180
|
"kind": "expression"
|
|
202
181
|
}
|
|
203
182
|
},
|
|
204
|
-
{
|
|
205
|
-
"name": "@action-changed",
|
|
206
|
-
"description": "Fired when the `action` property changes.",
|
|
207
|
-
"value": {
|
|
208
|
-
"kind": "expression"
|
|
209
|
-
}
|
|
210
|
-
},
|
|
211
183
|
{
|
|
212
184
|
"name": "@disabled-changed",
|
|
213
185
|
"description": "Fired when the `disabled` property changes.",
|
|
@@ -221,20 +193,6 @@
|
|
|
221
193
|
"value": {
|
|
222
194
|
"kind": "expression"
|
|
223
195
|
}
|
|
224
|
-
},
|
|
225
|
-
{
|
|
226
|
-
"name": "@no-forgot-password-changed",
|
|
227
|
-
"description": "Fired when the `noForgotPassword` property changes.",
|
|
228
|
-
"value": {
|
|
229
|
-
"kind": "expression"
|
|
230
|
-
}
|
|
231
|
-
},
|
|
232
|
-
{
|
|
233
|
-
"name": "@i18n-changed",
|
|
234
|
-
"description": "Fired when the `i18n` property changes.",
|
|
235
|
-
"value": {
|
|
236
|
-
"kind": "expression"
|
|
237
|
-
}
|
|
238
196
|
}
|
|
239
197
|
]
|
|
240
198
|
}
|