@vaadin/login 24.5.0-alpha9 → 24.5.0-rc1

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 (8) hide show
  1. package/package.json +11 -11
  2. package/src/vaadin-lit-login-overlay-wrapper.js +2 -21
  3. package/src/vaadin-lit-login-overlay.js +1 -0
  4. package/src/vaadin-login-overlay-wrapper-mixin.js +71 -0
  5. package/src/vaadin-login-overlay-wrapper.js +3 -23
  6. package/src/vaadin-login-overlay.js +1 -0
  7. package/web-types.json +2 -2
  8. package/web-types.lit.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/login",
3
- "version": "24.5.0-alpha9",
3
+ "version": "24.5.0-rc1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,18 +37,18 @@
37
37
  "dependencies": {
38
38
  "@open-wc/dedupe-mixin": "^1.3.0",
39
39
  "@polymer/polymer": "^3.0.0",
40
- "@vaadin/button": "24.5.0-alpha9",
41
- "@vaadin/component-base": "24.5.0-alpha9",
42
- "@vaadin/overlay": "24.5.0-alpha9",
43
- "@vaadin/password-field": "24.5.0-alpha9",
44
- "@vaadin/text-field": "24.5.0-alpha9",
45
- "@vaadin/vaadin-lumo-styles": "24.5.0-alpha9",
46
- "@vaadin/vaadin-material-styles": "24.5.0-alpha9",
47
- "@vaadin/vaadin-themable-mixin": "24.5.0-alpha9",
40
+ "@vaadin/button": "24.5.0-rc1",
41
+ "@vaadin/component-base": "24.5.0-rc1",
42
+ "@vaadin/overlay": "24.5.0-rc1",
43
+ "@vaadin/password-field": "24.5.0-rc1",
44
+ "@vaadin/text-field": "24.5.0-rc1",
45
+ "@vaadin/vaadin-lumo-styles": "24.5.0-rc1",
46
+ "@vaadin/vaadin-material-styles": "24.5.0-rc1",
47
+ "@vaadin/vaadin-themable-mixin": "24.5.0-rc1",
48
48
  "lit": "^3.0.0"
49
49
  },
50
50
  "devDependencies": {
51
- "@vaadin/chai-plugins": "24.5.0-alpha9",
51
+ "@vaadin/chai-plugins": "24.5.0-rc1",
52
52
  "@vaadin/testing-helpers": "^1.0.0",
53
53
  "sinon": "^18.0.0"
54
54
  },
@@ -56,5 +56,5 @@
56
56
  "web-types.json",
57
57
  "web-types.lit.json"
58
58
  ],
59
- "gitHead": "804744762f3bec0a2247c4bbcbbb204dbcd78bc0"
59
+ "gitHead": "a8ae853ab69d7938cf507843784f1551a2eeb972"
60
60
  }
package/src/vaadin-lit-login-overlay-wrapper.js CHANGED
@@ -5,11 +5,10 @@
5
5
  */
6
6
  import { html, LitElement } from 'lit';
7
7
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
8
- import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
9
8
  import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
10
- import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
11
9
  import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
12
10
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
11
+ import { LoginOverlayWrapperMixin } from './vaadin-login-overlay-wrapper-mixin.js';
13
12
  import { loginOverlayWrapperStyles } from './vaadin-login-overlay-wrapper-styles.js';
14
13
 
15
14
  /**
@@ -18,7 +17,7 @@ import { loginOverlayWrapperStyles } from './vaadin-login-overlay-wrapper-styles
18
17
  * @extends HTMLElement
19
18
  * @private
20
19
  */
21
- class LoginOverlayWrapper extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
20
+ class LoginOverlayWrapper extends LoginOverlayWrapperMixin(ThemableMixin(PolylitMixin(LitElement))) {
22
21
  static get is() {
23
22
  return 'vaadin-login-overlay-wrapper';
24
23
  }
@@ -27,24 +26,6 @@ class LoginOverlayWrapper extends OverlayMixin(DirMixin(ThemableMixin(PolylitMix
27
26
  return [overlayStyles, loginOverlayWrapperStyles];
28
27
  }
29
28
 
30
- static get properties() {
31
- return {
32
- /**
33
- * Title of the application.
34
- */
35
- title: {
36
- type: String,
37
- },
38
-
39
- /**
40
- * Application description. Displayed under the title.
41
- */
42
- description: {
43
- type: String,
44
- },
45
- };
46
- }
47
-
48
29
  /** @protected */
49
30
  render() {
50
31
  return html`
package/src/vaadin-lit-login-overlay.js CHANGED
@@ -35,6 +35,7 @@ class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolylitM
35
35
  .opened="${this.opened}"
36
36
  .title="${this.title}"
37
37
  .description="${this.description}"
38
+ role="dialog"
38
39
  focus-trap
39
40
  with-backdrop
40
41
  theme="${ifDefined(this._theme)}"
package/src/vaadin-login-overlay-wrapper-mixin.js ADDED
@@ -0,0 +1,71 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
7
+ import { SlotObserver } from '@vaadin/component-base/src/slot-observer';
8
+ import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils';
9
+ import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
10
+
11
+ /**
12
+ * @polymerMixin
13
+ * @mixes DirMixin
14
+ * @mixes OverlayMixin
15
+ */
16
+ export const LoginOverlayWrapperMixin = (superClass) =>
17
+ class LoginOverlayWrapperMixin extends OverlayMixin(DirMixin(superClass)) {
18
+ static get properties() {
19
+ return {
20
+ /**
21
+ * Title of the application.
22
+ */
23
+ title: {
24
+ type: String,
25
+ observer: '_titleChanged',
26
+ },
27
+
28
+ /**
29
+ * Application description. Displayed under the title.
30
+ */
31
+ description: {
32
+ type: String,
33
+ },
34
+ };
35
+ }
36
+
37
+ /** @protected */
38
+ ready() {
39
+ super.ready();
40
+
41
+ // Use slot observer instead of slot controller since the latter
42
+ // does not work well with teleporting (it removes custom title).
43
+ const slot = this.shadowRoot.querySelector('slot[name="title"]');
44
+ this._titleSlotObserver = new SlotObserver(slot, () => {
45
+ const title = slot.assignedElements({ flatten: true })[0];
46
+ if (!title) {
47
+ return;
48
+ }
49
+
50
+ // Only set ID on the custom slotted title and link it using
51
+ // aria-labelledby as the default title is in the shadow DOM.
52
+ if (title.getAttribute('part') === 'title') {
53
+ this.setAttribute('aria-label', this.title);
54
+ this.removeAttribute('aria-labelledby');
55
+ } else {
56
+ if (!title.id) {
57
+ title.id = `login-overlay-title-${generateUniqueId()}`;
58
+ }
59
+ this.removeAttribute('aria-label');
60
+ this.setAttribute('aria-labelledby', title.id);
61
+ }
62
+ });
63
+ }
64
+
65
+ /** @private */
66
+ _titleChanged(title) {
67
+ if (title && this.hasAttribute('aria-label')) {
68
+ this.setAttribute('aria-label', title);
69
+ }
70
+ }
71
+ };
package/src/vaadin-login-overlay-wrapper.js CHANGED
@@ -5,10 +5,9 @@
5
5
  */
6
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
7
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
8
- import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
9
- import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
10
8
  import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
11
9
  import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
10
+ import { LoginOverlayWrapperMixin } from './vaadin-login-overlay-wrapper-mixin.js';
12
11
  import { loginOverlayWrapperStyles } from './vaadin-login-overlay-wrapper-styles.js';
13
12
 
14
13
  registerStyles('vaadin-login-overlay-wrapper', [overlayStyles, loginOverlayWrapperStyles], {
@@ -19,34 +18,15 @@ registerStyles('vaadin-login-overlay-wrapper', [overlayStyles, loginOverlayWrapp
19
18
  * An element used internally by `<vaadin-login-overlay>`. Not intended to be used separately.
20
19
  *
21
20
  * @extends HTMLElement
22
- * @mixes DirMixin
23
- * @mixes OverlayMixin
21
+ * @mixes LoginOverlayWrapperMixin
24
22
  * @mixes ThemableMixin
25
23
  * @private
26
24
  */
27
- class LoginOverlayWrapper extends OverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
25
+ class LoginOverlayWrapper extends LoginOverlayWrapperMixin(ThemableMixin(PolymerElement)) {
28
26
  static get is() {
29
27
  return 'vaadin-login-overlay-wrapper';
30
28
  }
31
29
 
32
- static get properties() {
33
- return {
34
- /**
35
- * Title of the application.
36
- */
37
- title: {
38
- type: String,
39
- },
40
-
41
- /**
42
- * Application description. Displayed under the title.
43
- */
44
- description: {
45
- type: String,
46
- },
47
- };
48
- }
49
-
50
30
  static get template() {
51
31
  return html`
52
32
  <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
package/src/vaadin-login-overlay.js CHANGED
@@ -56,6 +56,7 @@ class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolymerE
56
56
  <vaadin-login-overlay-wrapper
57
57
  id="vaadinLoginOverlayWrapper"
58
58
  opened="{{opened}}"
59
+ role="dialog"
59
60
  focus-trap
60
61
  with-backdrop
61
62
  title="[[title]]"
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/login",
4
- "version": "24.5.0-alpha9",
4
+ "version": "24.5.0-rc1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -148,7 +148,7 @@
148
148
  },
149
149
  {
150
150
  "name": "vaadin-login-overlay",
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/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha9/#/elements/vaadin-login-form)\ndocumentation for `<vaadin-login-form-wrapper>` stylable parts.",
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/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-rc1/#/elements/vaadin-login-form)\ndocumentation for `<vaadin-login-form-wrapper>` stylable parts.",
152
152
  "attributes": [
153
153
  {
154
154
  "name": "action",
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": "24.5.0-alpha9",
4
+ "version": "24.5.0-rc1",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -93,7 +93,7 @@
93
93
  },
94
94
  {
95
95
  "name": "vaadin-login-overlay",
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/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha9/#/elements/vaadin-login-form)\ndocumentation for `<vaadin-login-form-wrapper>` stylable parts.",
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/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-rc1/#/elements/vaadin-login-form)\ndocumentation for `<vaadin-login-form-wrapper>` stylable parts.",
97
97
  "extension": true,
98
98
  "attributes": [
99
99
  {