@vaadin/login 23.2.0-dev.53560527d → 23.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +4 -4
  2. package/package.json +17 -11
  3. package/src/vaadin-login-form.d.ts +3 -3
  4. package/src/vaadin-login-form.js +1 -1
  5. package/src/vaadin-login-mixin.d.ts +22 -20
  6. package/src/vaadin-login-mixin.js +32 -29
  7. package/src/vaadin-login-overlay-wrapper.js +3 -3
  8. package/src/vaadin-login-overlay.d.ts +3 -3
  9. package/src/vaadin-login-overlay.js +1 -1
  10. package/web-types.json +334 -0
  11. package/web-types.lit.json +174 -0
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  A web component for displaying a login form, either inline, or as an overlay.
4
4
 
5
- [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/login)
5
+ [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/login)
6
6
 
7
7
  [![npm version](https://badgen.net/npm/v/@vaadin/login)](https://www.npmjs.com/package/@vaadin/login)
8
8
  [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
@@ -11,7 +11,7 @@ A web component for displaying a login form, either inline, or as an overlay.
11
11
  <vaadin-login-overlay opened></vaadin-login-overlay>
12
12
  ```
13
13
 
14
- [<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/login/screenshot.png" width="456" alt="Screenshot of vaadin-login-overlay">](https://vaadin.com/docs/latest/ds/components/login)
14
+ [<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/login/screenshot.png" width="456" alt="Screenshot of vaadin-login-overlay">](https://vaadin.com/docs/latest/components/login)
15
15
 
16
16
  ## Installation
17
17
 
@@ -29,7 +29,7 @@ import '@vaadin/login';
29
29
 
30
30
  ## Themes
31
31
 
32
- Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
32
+ Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
33
33
  The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/list-box/vaadin-list-box.js) of the package uses Lumo theme.
34
34
 
35
35
  To use the Material theme, import the components from the `theme/material` folder:
@@ -55,7 +55,7 @@ import '@vaadin/login/src/vaadin-login-form.js';
55
55
 
56
56
  ## Contributing
57
57
 
58
- Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
58
+ Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
59
59
 
60
60
  ## License
61
61
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/login",
3
- "version": "23.2.0-dev.53560527d",
3
+ "version": "23.2.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -23,7 +23,9 @@
23
23
  "src",
24
24
  "theme",
25
25
  "vaadin-*.d.ts",
26
- "vaadin-*.js"
26
+ "vaadin-*.js",
27
+ "web-types.json",
28
+ "web-types.lit.json"
27
29
  ],
28
30
  "keywords": [
29
31
  "Vaadin",
@@ -35,19 +37,23 @@
35
37
  "dependencies": {
36
38
  "@open-wc/dedupe-mixin": "^1.3.0",
37
39
  "@polymer/polymer": "^3.0.0",
38
- "@vaadin/button": "23.2.0-dev.53560527d",
39
- "@vaadin/component-base": "23.2.0-dev.53560527d",
40
- "@vaadin/password-field": "23.2.0-dev.53560527d",
41
- "@vaadin/text-field": "23.2.0-dev.53560527d",
42
- "@vaadin/vaadin-lumo-styles": "23.2.0-dev.53560527d",
43
- "@vaadin/vaadin-material-styles": "23.2.0-dev.53560527d",
44
- "@vaadin/vaadin-overlay": "23.2.0-dev.53560527d",
45
- "@vaadin/vaadin-themable-mixin": "23.2.0-dev.53560527d"
40
+ "@vaadin/button": "^23.2.0",
41
+ "@vaadin/component-base": "^23.2.0",
42
+ "@vaadin/password-field": "^23.2.0",
43
+ "@vaadin/text-field": "^23.2.0",
44
+ "@vaadin/vaadin-lumo-styles": "^23.2.0",
45
+ "@vaadin/vaadin-material-styles": "^23.2.0",
46
+ "@vaadin/vaadin-overlay": "^23.2.0",
47
+ "@vaadin/vaadin-themable-mixin": "^23.2.0"
46
48
  },
47
49
  "devDependencies": {
48
50
  "@esm-bundle/chai": "^4.3.4",
49
51
  "@vaadin/testing-helpers": "^0.3.2",
50
52
  "sinon": "^13.0.2"
51
53
  },
52
- "gitHead": "6c5c18369b09e22e76365d8a8a5e4bbb220f969b"
54
+ "web-types": [
55
+ "web-types.json",
56
+ "web-types.lit.json"
57
+ ],
58
+ "gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
53
59
  }
package/src/vaadin-login-form.d.ts CHANGED
@@ -49,7 +49,7 @@ export interface LoginFormEventMap extends HTMLElementEventMap, LoginFormCustomE
49
49
  * `error-message-description` | Container for error message description
50
50
  * `footer` | Container additional information text from `i18n` object
51
51
  *
52
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
52
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
53
53
  *
54
54
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
55
55
  * @fires {CustomEvent} login - Fired when a user submits the login.
@@ -60,13 +60,13 @@ declare class LoginForm extends ElementMixin(ThemableMixin(LoginMixin(HTMLElemen
60
60
  addEventListener<K extends keyof LoginFormEventMap>(
61
61
  type: K,
62
62
  listener: (this: LoginForm, ev: LoginFormEventMap[K]) => void,
63
- options?: boolean | AddEventListenerOptions,
63
+ options?: AddEventListenerOptions | boolean,
64
64
  ): void;
65
65
 
66
66
  removeEventListener<K extends keyof LoginFormEventMap>(
67
67
  type: K,
68
68
  listener: (this: LoginForm, ev: LoginFormEventMap[K]) => void,
69
- options?: boolean | EventListenerOptions,
69
+ options?: EventListenerOptions | boolean,
70
70
  ): void;
71
71
  }
72
72
 
package/src/vaadin-login-form.js CHANGED
@@ -39,7 +39,7 @@ import { LoginMixin } from './vaadin-login-mixin.js';
39
39
  * `error-message-description` | Container for error message description
40
40
  * `footer` | Container additional information text from `i18n` object
41
41
  *
42
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
42
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
43
43
  *
44
44
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
45
45
  * @fires {CustomEvent} login - Fired when a user submits the login.
package/src/vaadin-login-mixin.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  * Copyright (c) 2018 - 2022 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { Constructor } from '@open-wc/dedupe-mixin';
6
+ import type { Constructor } from '@open-wc/dedupe-mixin';
7
7
 
8
8
  export interface LoginI18n {
9
9
  form: {
@@ -24,7 +24,7 @@ export interface LoginI18n {
24
24
  additionalInformation?: string;
25
25
  }
26
26
 
27
- export declare function LoginMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<LoginMixinClass>;
27
+ export declare function LoginMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<LoginMixinClass> & T;
28
28
 
29
29
  export declare class LoginMixinClass {
30
30
  /**
@@ -67,24 +67,26 @@ export declare class LoginMixinClass {
67
67
  * and `header` sections, `header` can be added to override `title` and `description` properties
68
68
  * in `vaadin-login-overlay`):
69
69
  *
70
- * {
71
- * header: {
72
- * title: 'App name',
73
- * description: 'Inspiring application description'
74
- * },
75
- * form: {
76
- * title: 'Log in',
77
- * username: 'Username',
78
- * password: 'Password',
79
- * submit: 'Log in',
80
- * forgotPassword: 'Forgot password'
81
- * },
82
- * errorMessage: {
83
- * title: 'Incorrect username or password',
84
- * message: 'Check that you have entered the correct username and password and try again.'
85
- * },
86
- * additionalInformation: 'In case you need to provide some additional info for the user.'
87
- * }
70
+ * ```
71
+ * {
72
+ * header: {
73
+ * title: 'App name',
74
+ * description: 'Inspiring application description'
75
+ * },
76
+ * form: {
77
+ * title: 'Log in',
78
+ * username: 'Username',
79
+ * password: 'Password',
80
+ * submit: 'Log in',
81
+ * forgotPassword: 'Forgot password'
82
+ * },
83
+ * errorMessage: {
84
+ * title: 'Incorrect username or password',
85
+ * message: 'Check that you have entered the correct username and password and try again.'
86
+ * },
87
+ * additionalInformation: 'In case you need to provide some additional info for the user.'
88
+ * }
89
+ * ```
88
90
  */
89
91
  i18n: LoginI18n;
90
92
 
package/src/vaadin-login-mixin.js CHANGED
@@ -81,35 +81,38 @@ export const LoginMixin = (superClass) =>
81
81
  },
82
82
 
83
83
  /**
84
- * The object used to localize this component.
85
- * For changing the default localization, change the entire
86
- * _i18n_ object or just the property you want to modify.
87
- *
88
- * The object has the following JSON structure (by default it doesn't include `additionalInformation`
89
- * and `header` sections, `header` can be added to override `title` and `description` properties
90
- * in `vaadin-login-overlay`):
91
-
92
- {
93
- header: {
94
- title: 'App name',
95
- description: 'Inspiring application description'
96
- },
97
- form: {
98
- title: 'Log in',
99
- username: 'Username',
100
- password: 'Password',
101
- submit: 'Log in',
102
- forgotPassword: 'Forgot password'
103
- },
104
- errorMessage: {
105
- title: 'Incorrect username or password',
106
- message: 'Check that you have entered the correct username and password and try again.'
107
- },
108
- additionalInformation: 'In case you need to provide some additional info for the user.'
109
- }
110
- * @type {!LoginI18n}
111
- * @default {English/US}
112
- */
84
+ * The object used to localize this component.
85
+ * For changing the default localization, change the entire
86
+ * _i18n_ object or just the property you want to modify.
87
+ *
88
+ * The object has the following JSON structure (by default it doesn't include `additionalInformation`
89
+ * and `header` sections, `header` can be added to override `title` and `description` properties
90
+ * in `vaadin-login-overlay`):
91
+ *
92
+ * ```
93
+ * {
94
+ * header: {
95
+ * title: 'App name',
96
+ * description: 'Inspiring application description'
97
+ * },
98
+ * form: {
99
+ * title: 'Log in',
100
+ * username: 'Username',
101
+ * password: 'Password',
102
+ * submit: 'Log in',
103
+ * forgotPassword: 'Forgot password'
104
+ * },
105
+ * errorMessage: {
106
+ * title: 'Incorrect username or password',
107
+ * message: 'Check that you have entered the correct username and password and try again.'
108
+ * },
109
+ * additionalInformation: 'In case you need to provide some additional info for the user.'
110
+ * }
111
+ * ```
112
+ *
113
+ * @type {!LoginI18n}
114
+ * @default {English/US}
115
+ */
113
116
  i18n: {
114
117
  type: Object,
115
118
  value() {
package/src/vaadin-login-overlay-wrapper.js CHANGED
@@ -6,9 +6,9 @@
6
6
  import { DomModule } from '@polymer/polymer/lib/elements/dom-module.js';
7
7
  import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
8
8
 
9
- const $_documentContainer = document.createElement('template');
9
+ const template = document.createElement('template');
10
10
 
11
- $_documentContainer.innerHTML = `<dom-module id="vaadin-login-overlay-wrapper-template">
11
+ template.innerHTML = `<dom-module id="vaadin-login-overlay-wrapper-template">
12
12
  <template>
13
13
  <style>
14
14
  [part="overlay"] {
@@ -52,7 +52,7 @@ $_documentContainer.innerHTML = `<dom-module id="vaadin-login-overlay-wrapper-te
52
52
  </template>
53
53
  </dom-module>`;
54
54
 
55
- document.head.appendChild($_documentContainer.content);
55
+ document.head.appendChild(template.content);
56
56
 
57
57
  let memoizedTemplate;
58
58
 
package/src/vaadin-login-overlay.d.ts CHANGED
@@ -43,7 +43,7 @@ export interface LoginOverlayEventMap extends HTMLElementEventMap, LoginOverlayC
43
43
  * `brand` | Container for application title and description
44
44
  * `form` | Container for the `<vaadin-login-form>` component
45
45
  *
46
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
46
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
47
47
  *
48
48
  * See [`<vaadin-login-form>`](#/elements/vaadin-login-form)
49
49
  * documentation for `<vaadin-login-form-wrapper>` stylable parts.
@@ -70,13 +70,13 @@ declare class LoginOverlay extends ElementMixin(ThemableMixin(LoginMixin(HTMLEle
70
70
  addEventListener<K extends keyof LoginOverlayEventMap>(
71
71
  type: K,
72
72
  listener: (this: LoginOverlay, ev: LoginOverlayEventMap[K]) => void,
73
- options?: boolean | AddEventListenerOptions,
73
+ options?: AddEventListenerOptions | boolean,
74
74
  ): void;
75
75
 
76
76
  removeEventListener<K extends keyof LoginOverlayEventMap>(
77
77
  type: K,
78
78
  listener: (this: LoginOverlay, ev: LoginOverlayEventMap[K]) => void,
79
- options?: boolean | EventListenerOptions,
79
+ options?: EventListenerOptions | boolean,
80
80
  ): void;
81
81
  }
82
82
 
package/src/vaadin-login-overlay.js CHANGED
@@ -32,7 +32,7 @@ import { LoginMixin } from './vaadin-login-mixin.js';
32
32
  * `brand` | Container for application title and description
33
33
  * `form` | Container for the `<vaadin-login-form>` component
34
34
  *
35
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
35
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
36
36
  *
37
37
  * See [`<vaadin-login-form>`](#/elements/vaadin-login-form)
38
38
  * documentation for `<vaadin-login-form-wrapper>` stylable parts.
package/web-types.json ADDED
@@ -0,0 +1,334 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/login",
4
+ "version": "23.2.0",
5
+ "description-markup": "markdown",
6
+ "contributions": {
7
+ "html": {
8
+ "elements": [
9
+ {
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`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
+ "attributes": [
13
+ {
14
+ "name": "action",
15
+ "description": "If set, a synchronous POST call will be fired to the path defined.\nThe `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.",
16
+ "value": {
17
+ "type": [
18
+ "string",
19
+ "null"
20
+ ]
21
+ }
22
+ },
23
+ {
24
+ "name": "disabled",
25
+ "description": "If set, disable the \"Log in\" button and prevent user from submitting login form.\nIt is re-enabled automatically, when error is set to true, allowing form resubmission\nafter user makes changes.",
26
+ "value": {
27
+ "type": [
28
+ "boolean"
29
+ ]
30
+ }
31
+ },
32
+ {
33
+ "name": "error",
34
+ "description": "If set, the error message is shown. The message is hidden by default.\nWhen set, it changes the disabled state of the submit button.",
35
+ "value": {
36
+ "type": [
37
+ "boolean"
38
+ ]
39
+ }
40
+ },
41
+ {
42
+ "name": "no-forgot-password",
43
+ "description": "Whether to hide the forgot password button. The button is visible by default.",
44
+ "value": {
45
+ "type": [
46
+ "boolean"
47
+ ]
48
+ }
49
+ },
50
+ {
51
+ "name": "no-autofocus",
52
+ "description": "If set, the user name field automatically receives focus when the component is attached to the document.",
53
+ "value": {
54
+ "type": [
55
+ "boolean"
56
+ ]
57
+ }
58
+ },
59
+ {
60
+ "name": "theme",
61
+ "description": "The theme variants to apply to the component.",
62
+ "value": {
63
+ "type": [
64
+ "string",
65
+ "null",
66
+ "undefined"
67
+ ]
68
+ }
69
+ }
70
+ ],
71
+ "js": {
72
+ "properties": [
73
+ {
74
+ "name": "action",
75
+ "description": "If set, a synchronous POST call will be fired to the path defined.\nThe `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.",
76
+ "value": {
77
+ "type": [
78
+ "string",
79
+ "null"
80
+ ]
81
+ }
82
+ },
83
+ {
84
+ "name": "disabled",
85
+ "description": "If set, disable the \"Log in\" button and prevent user from submitting login form.\nIt is re-enabled automatically, when error is set to true, allowing form resubmission\nafter user makes changes.",
86
+ "value": {
87
+ "type": [
88
+ "boolean"
89
+ ]
90
+ }
91
+ },
92
+ {
93
+ "name": "error",
94
+ "description": "If set, the error message is shown. The message is hidden by default.\nWhen set, it changes the disabled state of the submit button.",
95
+ "value": {
96
+ "type": [
97
+ "boolean"
98
+ ]
99
+ }
100
+ },
101
+ {
102
+ "name": "noForgotPassword",
103
+ "description": "Whether to hide the forgot password button. The button is visible by default.",
104
+ "value": {
105
+ "type": [
106
+ "boolean"
107
+ ]
108
+ }
109
+ },
110
+ {
111
+ "name": "noAutofocus",
112
+ "description": "If set, the user name field automatically receives focus when the component is attached to the document.",
113
+ "value": {
114
+ "type": [
115
+ "boolean"
116
+ ]
117
+ }
118
+ },
119
+ {
120
+ "name": "i18n",
121
+ "description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure (by default it doesn't include `additionalInformation`\nand `header` sections, `header` can be added to override `title` and `description` properties\nin `vaadin-login-overlay`):\n\n```\n{\n header: {\n title: 'App name',\n description: 'Inspiring application description'\n },\n form: {\n title: 'Log in',\n username: 'Username',\n password: 'Password',\n submit: 'Log in',\n forgotPassword: 'Forgot password'\n },\n errorMessage: {\n title: 'Incorrect username or password',\n message: 'Check that you have entered the correct username and password and try again.'\n },\n additionalInformation: 'In case you need to provide some additional info for the user.'\n}\n```",
122
+ "value": {
123
+ "type": [
124
+ "LoginI18n"
125
+ ]
126
+ }
127
+ }
128
+ ],
129
+ "events": [
130
+ {
131
+ "name": "forgot-password",
132
+ "description": "Fired when user clicks on the \"Forgot password\" button."
133
+ },
134
+ {
135
+ "name": "login",
136
+ "description": "Fired when an user submits the login.\nThe event contains `username` and `password` values in the `detail` property."
137
+ }
138
+ ]
139
+ }
140
+ },
141
+ {
142
+ "name": "vaadin-login-overlay",
143
+ "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.2.0/#/elements/vaadin-login-form)\ndocumentation for `<vaadin-login-form-wrapper>` stylable parts.",
144
+ "attributes": [
145
+ {
146
+ "name": "action",
147
+ "description": "If set, a synchronous POST call will be fired to the path defined.\nThe `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.",
148
+ "value": {
149
+ "type": [
150
+ "string",
151
+ "null"
152
+ ]
153
+ }
154
+ },
155
+ {
156
+ "name": "disabled",
157
+ "description": "If set, disable the \"Log in\" button and prevent user from submitting login form.\nIt is re-enabled automatically, when error is set to true, allowing form resubmission\nafter user makes changes.",
158
+ "value": {
159
+ "type": [
160
+ "boolean"
161
+ ]
162
+ }
163
+ },
164
+ {
165
+ "name": "error",
166
+ "description": "If set, the error message is shown. The message is hidden by default.\nWhen set, it changes the disabled state of the submit button.",
167
+ "value": {
168
+ "type": [
169
+ "boolean"
170
+ ]
171
+ }
172
+ },
173
+ {
174
+ "name": "no-forgot-password",
175
+ "description": "Whether to hide the forgot password button. The button is visible by default.",
176
+ "value": {
177
+ "type": [
178
+ "boolean"
179
+ ]
180
+ }
181
+ },
182
+ {
183
+ "name": "no-autofocus",
184
+ "description": "If set, the user name field automatically receives focus when the component is attached to the document.",
185
+ "value": {
186
+ "type": [
187
+ "boolean"
188
+ ]
189
+ }
190
+ },
191
+ {
192
+ "name": "description",
193
+ "description": "Defines the application description",
194
+ "value": {
195
+ "type": [
196
+ "string"
197
+ ]
198
+ }
199
+ },
200
+ {
201
+ "name": "opened",
202
+ "description": "True if the overlay is currently displayed.",
203
+ "value": {
204
+ "type": [
205
+ "boolean"
206
+ ]
207
+ }
208
+ },
209
+ {
210
+ "name": "title",
211
+ "description": "Defines the application title",
212
+ "value": {
213
+ "type": [
214
+ "string"
215
+ ]
216
+ }
217
+ },
218
+ {
219
+ "name": "theme",
220
+ "description": "The theme variants to apply to the component.",
221
+ "value": {
222
+ "type": [
223
+ "string",
224
+ "null",
225
+ "undefined"
226
+ ]
227
+ }
228
+ }
229
+ ],
230
+ "js": {
231
+ "properties": [
232
+ {
233
+ "name": "action",
234
+ "description": "If set, a synchronous POST call will be fired to the path defined.\nThe `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.",
235
+ "value": {
236
+ "type": [
237
+ "string",
238
+ "null"
239
+ ]
240
+ }
241
+ },
242
+ {
243
+ "name": "disabled",
244
+ "description": "If set, disable the \"Log in\" button and prevent user from submitting login form.\nIt is re-enabled automatically, when error is set to true, allowing form resubmission\nafter user makes changes.",
245
+ "value": {
246
+ "type": [
247
+ "boolean"
248
+ ]
249
+ }
250
+ },
251
+ {
252
+ "name": "error",
253
+ "description": "If set, the error message is shown. The message is hidden by default.\nWhen set, it changes the disabled state of the submit button.",
254
+ "value": {
255
+ "type": [
256
+ "boolean"
257
+ ]
258
+ }
259
+ },
260
+ {
261
+ "name": "noForgotPassword",
262
+ "description": "Whether to hide the forgot password button. The button is visible by default.",
263
+ "value": {
264
+ "type": [
265
+ "boolean"
266
+ ]
267
+ }
268
+ },
269
+ {
270
+ "name": "noAutofocus",
271
+ "description": "If set, the user name field automatically receives focus when the component is attached to the document.",
272
+ "value": {
273
+ "type": [
274
+ "boolean"
275
+ ]
276
+ }
277
+ },
278
+ {
279
+ "name": "i18n",
280
+ "description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure (by default it doesn't include `additionalInformation`\nand `header` sections, `header` can be added to override `title` and `description` properties\nin `vaadin-login-overlay`):\n\n```\n{\n header: {\n title: 'App name',\n description: 'Inspiring application description'\n },\n form: {\n title: 'Log in',\n username: 'Username',\n password: 'Password',\n submit: 'Log in',\n forgotPassword: 'Forgot password'\n },\n errorMessage: {\n title: 'Incorrect username or password',\n message: 'Check that you have entered the correct username and password and try again.'\n },\n additionalInformation: 'In case you need to provide some additional info for the user.'\n}\n```",
281
+ "value": {
282
+ "type": [
283
+ "LoginI18n"
284
+ ]
285
+ }
286
+ },
287
+ {
288
+ "name": "description",
289
+ "description": "Defines the application description",
290
+ "value": {
291
+ "type": [
292
+ "string"
293
+ ]
294
+ }
295
+ },
296
+ {
297
+ "name": "opened",
298
+ "description": "True if the overlay is currently displayed.",
299
+ "value": {
300
+ "type": [
301
+ "boolean"
302
+ ]
303
+ }
304
+ },
305
+ {
306
+ "name": "title",
307
+ "description": "Defines the application title",
308
+ "value": {
309
+ "type": [
310
+ "string"
311
+ ]
312
+ }
313
+ }
314
+ ],
315
+ "events": [
316
+ {
317
+ "name": "forgot-password",
318
+ "description": "Fired when user clicks on the \"Forgot password\" button."
319
+ },
320
+ {
321
+ "name": "login",
322
+ "description": "Fired when an user submits the login.\nThe event contains `username` and `password` values in the `detail` property."
323
+ },
324
+ {
325
+ "name": "description-changed",
326
+ "description": "Fired when the `description` property changes."
327
+ }
328
+ ]
329
+ }
330
+ }
331
+ ]
332
+ }
333
+ }
334
+ }
package/web-types.lit.json ADDED
@@ -0,0 +1,174 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/login",
4
+ "version": "23.2.0",
5
+ "description-markup": "markdown",
6
+ "framework": "lit",
7
+ "framework-config": {
8
+ "enable-when": {
9
+ "node-packages": [
10
+ "lit"
11
+ ]
12
+ }
13
+ },
14
+ "contributions": {
15
+ "html": {
16
+ "elements": [
17
+ {
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`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
+ "extension": true,
21
+ "attributes": [
22
+ {
23
+ "name": "?disabled",
24
+ "description": "If set, disable the \"Log in\" button and prevent user from submitting login form.\nIt is re-enabled automatically, when error is set to true, allowing form resubmission\nafter user makes changes.",
25
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ },
29
+ {
30
+ "name": "?error",
31
+ "description": "If set, the error message is shown. The message is hidden by default.\nWhen set, it changes the disabled state of the submit button.",
32
+ "value": {
33
+ "kind": "expression"
34
+ }
35
+ },
36
+ {
37
+ "name": "?noForgotPassword",
38
+ "description": "Whether to hide the forgot password button. The button is visible by default.",
39
+ "value": {
40
+ "kind": "expression"
41
+ }
42
+ },
43
+ {
44
+ "name": "?noAutofocus",
45
+ "description": "If set, the user name field automatically receives focus when the component is attached to the document.",
46
+ "value": {
47
+ "kind": "expression"
48
+ }
49
+ },
50
+ {
51
+ "name": ".action",
52
+ "description": "If set, a synchronous POST call will be fired to the path defined.\nThe `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.",
53
+ "value": {
54
+ "kind": "expression"
55
+ }
56
+ },
57
+ {
58
+ "name": ".i18n",
59
+ "description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure (by default it doesn't include `additionalInformation`\nand `header` sections, `header` can be added to override `title` and `description` properties\nin `vaadin-login-overlay`):\n\n```\n{\n header: {\n title: 'App name',\n description: 'Inspiring application description'\n },\n form: {\n title: 'Log in',\n username: 'Username',\n password: 'Password',\n submit: 'Log in',\n forgotPassword: 'Forgot password'\n },\n errorMessage: {\n title: 'Incorrect username or password',\n message: 'Check that you have entered the correct username and password and try again.'\n },\n additionalInformation: 'In case you need to provide some additional info for the user.'\n}\n```",
60
+ "value": {
61
+ "kind": "expression"
62
+ }
63
+ },
64
+ {
65
+ "name": "@forgot-password",
66
+ "description": "Fired when user clicks on the \"Forgot password\" button.",
67
+ "value": {
68
+ "kind": "expression"
69
+ }
70
+ },
71
+ {
72
+ "name": "@login",
73
+ "description": "Fired when an user submits the login.\nThe event contains `username` and `password` values in the `detail` property.",
74
+ "value": {
75
+ "kind": "expression"
76
+ }
77
+ }
78
+ ]
79
+ },
80
+ {
81
+ "name": "vaadin-login-overlay",
82
+ "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.2.0/#/elements/vaadin-login-form)\ndocumentation for `<vaadin-login-form-wrapper>` stylable parts.",
83
+ "extension": true,
84
+ "attributes": [
85
+ {
86
+ "name": "?disabled",
87
+ "description": "If set, disable the \"Log in\" button and prevent user from submitting login form.\nIt is re-enabled automatically, when error is set to true, allowing form resubmission\nafter user makes changes.",
88
+ "value": {
89
+ "kind": "expression"
90
+ }
91
+ },
92
+ {
93
+ "name": "?error",
94
+ "description": "If set, the error message is shown. The message is hidden by default.\nWhen set, it changes the disabled state of the submit button.",
95
+ "value": {
96
+ "kind": "expression"
97
+ }
98
+ },
99
+ {
100
+ "name": "?noForgotPassword",
101
+ "description": "Whether to hide the forgot password button. The button is visible by default.",
102
+ "value": {
103
+ "kind": "expression"
104
+ }
105
+ },
106
+ {
107
+ "name": "?noAutofocus",
108
+ "description": "If set, the user name field automatically receives focus when the component is attached to the document.",
109
+ "value": {
110
+ "kind": "expression"
111
+ }
112
+ },
113
+ {
114
+ "name": "?opened",
115
+ "description": "True if the overlay is currently displayed.",
116
+ "value": {
117
+ "kind": "expression"
118
+ }
119
+ },
120
+ {
121
+ "name": ".action",
122
+ "description": "If set, a synchronous POST call will be fired to the path defined.\nThe `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.",
123
+ "value": {
124
+ "kind": "expression"
125
+ }
126
+ },
127
+ {
128
+ "name": ".i18n",
129
+ "description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure (by default it doesn't include `additionalInformation`\nand `header` sections, `header` can be added to override `title` and `description` properties\nin `vaadin-login-overlay`):\n\n```\n{\n header: {\n title: 'App name',\n description: 'Inspiring application description'\n },\n form: {\n title: 'Log in',\n username: 'Username',\n password: 'Password',\n submit: 'Log in',\n forgotPassword: 'Forgot password'\n },\n errorMessage: {\n title: 'Incorrect username or password',\n message: 'Check that you have entered the correct username and password and try again.'\n },\n additionalInformation: 'In case you need to provide some additional info for the user.'\n}\n```",
130
+ "value": {
131
+ "kind": "expression"
132
+ }
133
+ },
134
+ {
135
+ "name": ".description",
136
+ "description": "Defines the application description",
137
+ "value": {
138
+ "kind": "expression"
139
+ }
140
+ },
141
+ {
142
+ "name": ".title",
143
+ "description": "Defines the application title",
144
+ "value": {
145
+ "kind": "expression"
146
+ }
147
+ },
148
+ {
149
+ "name": "@forgot-password",
150
+ "description": "Fired when user clicks on the \"Forgot password\" button.",
151
+ "value": {
152
+ "kind": "expression"
153
+ }
154
+ },
155
+ {
156
+ "name": "@login",
157
+ "description": "Fired when an user submits the login.\nThe event contains `username` and `password` values in the `detail` property.",
158
+ "value": {
159
+ "kind": "expression"
160
+ }
161
+ },
162
+ {
163
+ "name": "@description-changed",
164
+ "description": "Fired when the `description` property changes.",
165
+ "value": {
166
+ "kind": "expression"
167
+ }
168
+ }
169
+ ]
170
+ }
171
+ ]
172
+ }
173
+ }
174
+ }