@vaadin/password-field 24.8.0-alpha9 → 25.0.0-alpha1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -23
- package/package.json +13 -13
- package/src/{vaadin-lit-password-field.d.ts → vaadin-password-field-base-styles.d.ts} +3 -1
- package/src/vaadin-password-field-base-styles.js +19 -0
- package/src/vaadin-password-field-button-base-styles.js +46 -0
- package/src/vaadin-password-field-button-core-styles.js +8 -0
- package/src/vaadin-password-field-button.js +11 -7
- package/{theme/material/vaadin-password-field-styles.d.ts → src/vaadin-password-field-core-styles.d.ts} +3 -2
- package/src/vaadin-password-field-core-styles.js +9 -0
- package/src/vaadin-password-field-mixin.js +6 -0
- package/src/vaadin-password-field.js +16 -22
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
- package/src/vaadin-lit-password-field-button.js +0 -39
- package/src/vaadin-lit-password-field.js +0 -40
- package/theme/lumo/vaadin-lit-password-field.d.ts +0 -9
- package/theme/lumo/vaadin-lit-password-field.js +0 -9
- package/theme/material/vaadin-lit-password-field.d.ts +0 -9
- package/theme/material/vaadin-lit-password-field.js +0 -9
- package/theme/material/vaadin-password-field-button-styles.d.ts +0 -1
- package/theme/material/vaadin-password-field-button-styles.js +0 -37
- package/theme/material/vaadin-password-field-styles.js +0 -43
- package/theme/material/vaadin-password-field.d.ts +0 -9
- package/theme/material/vaadin-password-field.js +0 -9
- package/vaadin-lit-password-field.d.ts +0 -1
- package/vaadin-lit-password-field.js +0 -3
package/README.md
CHANGED
|
@@ -24,29 +24,6 @@ Once installed, import the component in your application:
|
|
|
24
24
|
import '@vaadin/password-field';
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
## Themes
|
|
28
|
-
|
|
29
|
-
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
30
|
-
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/password-field/vaadin-password-field.js) of the package uses Lumo theme.
|
|
31
|
-
|
|
32
|
-
To use the Material theme, import the component from the `theme/material` folder:
|
|
33
|
-
|
|
34
|
-
```js
|
|
35
|
-
import '@vaadin/password-field/theme/material/vaadin-password-field.js';
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
You can also import the Lumo version of the component explicitly:
|
|
39
|
-
|
|
40
|
-
```js
|
|
41
|
-
import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
|
|
45
|
-
|
|
46
|
-
```js
|
|
47
|
-
import '@vaadin/password-field/src/vaadin-password-field.js';
|
|
48
|
-
```
|
|
49
|
-
|
|
50
27
|
## Contributing
|
|
51
28
|
|
|
52
29
|
Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/password-field",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "25.0.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
+
"!src/*-base-styles.d.ts",
|
|
25
|
+
"!src/*-base-styles.js",
|
|
24
26
|
"theme",
|
|
25
27
|
"vaadin-*.d.ts",
|
|
26
28
|
"vaadin-*.js",
|
|
@@ -35,20 +37,18 @@
|
|
|
35
37
|
],
|
|
36
38
|
"dependencies": {
|
|
37
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@
|
|
39
|
-
"@vaadin/
|
|
40
|
-
"@vaadin/
|
|
41
|
-
"@vaadin/
|
|
42
|
-
"@vaadin/field
|
|
43
|
-
"@vaadin/
|
|
44
|
-
"@vaadin/vaadin-
|
|
45
|
-
"@vaadin/vaadin-material-styles": "24.8.0-alpha9",
|
|
46
|
-
"@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
|
|
40
|
+
"@vaadin/a11y-base": "25.0.0-alpha1",
|
|
41
|
+
"@vaadin/button": "25.0.0-alpha1",
|
|
42
|
+
"@vaadin/component-base": "25.0.0-alpha1",
|
|
43
|
+
"@vaadin/field-base": "25.0.0-alpha1",
|
|
44
|
+
"@vaadin/text-field": "25.0.0-alpha1",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
|
|
47
47
|
"lit": "^3.0.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@vaadin/chai-plugins": "
|
|
51
|
-
"@vaadin/test-runner-commands": "
|
|
50
|
+
"@vaadin/chai-plugins": "25.0.0-alpha1",
|
|
51
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha1",
|
|
52
52
|
"@vaadin/testing-helpers": "^1.1.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": "
|
|
59
|
+
"gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
|
|
60
60
|
}
|
|
@@ -3,4 +3,6 @@
|
|
|
3
3
|
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
|
|
6
|
+
import type { CSSResult } from 'lit';
|
|
7
|
+
|
|
8
|
+
export const passwordFieldStyles: CSSResult;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { css } from 'lit';
|
|
7
|
+
|
|
8
|
+
export const passwordFieldStyles = css`
|
|
9
|
+
@layer base {
|
|
10
|
+
[part='reveal-button']::before {
|
|
11
|
+
display: none;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
[part='input-field']:has([part='reveal-button']:focus-within) {
|
|
15
|
+
outline: none;
|
|
16
|
+
--vaadin-input-field-border-color: inherit;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
`;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import '@vaadin/component-base/src/style-props.js';
|
|
7
|
+
import { css } from 'lit';
|
|
8
|
+
import { buttonStyles } from '@vaadin/button/src/vaadin-button-base-styles.js';
|
|
9
|
+
|
|
10
|
+
const passwordFieldBase = css`
|
|
11
|
+
@layer base {
|
|
12
|
+
:host {
|
|
13
|
+
--vaadin-button-background: transparent;
|
|
14
|
+
--vaadin-button-border: none;
|
|
15
|
+
--vaadin-button-padding: 0;
|
|
16
|
+
color: inherit;
|
|
17
|
+
display: block;
|
|
18
|
+
cursor: var(--vaadin-clickable-cursor);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
:host::before {
|
|
22
|
+
background: currentColor;
|
|
23
|
+
content: '';
|
|
24
|
+
display: block;
|
|
25
|
+
height: var(--vaadin-icon-size, 1lh);
|
|
26
|
+
mask-image: var(--_vaadin-icon-eye);
|
|
27
|
+
width: var(--vaadin-icon-size, 1lh);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
:host([aria-pressed='true'])::before {
|
|
31
|
+
mask-image: var(--_vaadin-icon-eye-slash);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@media (forced-colors: active) {
|
|
35
|
+
:host::before {
|
|
36
|
+
background: CanvasText;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:host([disabled])::before {
|
|
40
|
+
background: GrayText;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
`;
|
|
45
|
+
|
|
46
|
+
export const passwordFieldButton = [buttonStyles, passwordFieldBase];
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.js';
|
|
7
|
+
|
|
8
|
+
export const passwordFieldButton = [buttonStyles];
|
|
@@ -3,14 +3,13 @@
|
|
|
3
3
|
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { html,
|
|
7
|
-
import { buttonStyles } from '@vaadin/button/src/vaadin-button-base.js';
|
|
6
|
+
import { html, LitElement } from 'lit';
|
|
8
7
|
import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
|
|
9
8
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
9
|
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
11
|
+
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
12
|
+
import { passwordFieldButton } from './vaadin-password-field-button-core-styles.js';
|
|
14
13
|
|
|
15
14
|
/**
|
|
16
15
|
* An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
|
|
@@ -22,12 +21,17 @@ registerStyles('vaadin-password-field-button', buttonStyles, { moduleId: 'vaadin
|
|
|
22
21
|
* @mixes ThemableMixin
|
|
23
22
|
* @private
|
|
24
23
|
*/
|
|
25
|
-
class PasswordFieldButton extends ButtonMixin(DirMixin(ThemableMixin(
|
|
24
|
+
class PasswordFieldButton extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
|
|
26
25
|
static get is() {
|
|
27
26
|
return 'vaadin-password-field-button';
|
|
28
27
|
}
|
|
29
28
|
|
|
30
|
-
static get
|
|
29
|
+
static get styles() {
|
|
30
|
+
return passwordFieldButton;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/** @protected */
|
|
34
|
+
render() {
|
|
31
35
|
return html``;
|
|
32
36
|
}
|
|
33
37
|
}
|
|
@@ -3,5 +3,6 @@
|
|
|
3
3
|
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import '
|
|
7
|
-
|
|
6
|
+
import type { CSSResult } from 'lit';
|
|
7
|
+
|
|
8
|
+
export const passwordFieldStyles: CSSResult;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { css } from 'lit';
|
|
7
|
+
|
|
8
|
+
// Custom styles are only used in base styles version, but we need a matching export
|
|
9
|
+
export const passwordFieldStyles = css``;
|
|
@@ -68,6 +68,12 @@ export const PasswordFieldMixin = (superClass) =>
|
|
|
68
68
|
return ['__i18nChanged(i18n)'];
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
+
/** @override */
|
|
72
|
+
static get delegateAttrs() {
|
|
73
|
+
// Do not delegate autocapitalize as it should be always set to "off"
|
|
74
|
+
return super.delegateAttrs.filter((attr) => attr !== 'autocapitalize');
|
|
75
|
+
}
|
|
76
|
+
|
|
71
77
|
constructor() {
|
|
72
78
|
super();
|
|
73
79
|
this._setType('password');
|
|
@@ -4,19 +4,12 @@
|
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import './vaadin-password-field-button.js';
|
|
7
|
-
import { html } from '
|
|
7
|
+
import { html } from 'lit';
|
|
8
8
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
9
9
|
import { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';
|
|
10
|
+
import { passwordFieldStyles } from './vaadin-password-field-core-styles.js';
|
|
10
11
|
import { PasswordFieldMixin } from './vaadin-password-field-mixin.js';
|
|
11
12
|
|
|
12
|
-
const ownTemplate = html`
|
|
13
|
-
<div part="reveal-button" slot="suffix">
|
|
14
|
-
<slot name="reveal"></slot>
|
|
15
|
-
</div>
|
|
16
|
-
`;
|
|
17
|
-
|
|
18
|
-
let memoizedTemplate;
|
|
19
|
-
|
|
20
13
|
/**
|
|
21
14
|
* `<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.
|
|
22
15
|
*
|
|
@@ -58,20 +51,21 @@ export class PasswordField extends PasswordFieldMixin(TextField) {
|
|
|
58
51
|
return 'vaadin-password-field';
|
|
59
52
|
}
|
|
60
53
|
|
|
61
|
-
static get
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
memoizedTemplate = super.template.cloneNode(true);
|
|
65
|
-
|
|
66
|
-
// Retrieve this element's dom-module template
|
|
67
|
-
const revealButton = ownTemplate.content.querySelector('[part="reveal-button"]');
|
|
68
|
-
|
|
69
|
-
// Append reveal-button and styles to the text-field template
|
|
70
|
-
const inputField = memoizedTemplate.content.querySelector('[part="input-field"]');
|
|
71
|
-
inputField.appendChild(revealButton);
|
|
72
|
-
}
|
|
54
|
+
static get styles() {
|
|
55
|
+
return [...super.styles, passwordFieldStyles];
|
|
56
|
+
}
|
|
73
57
|
|
|
74
|
-
|
|
58
|
+
/**
|
|
59
|
+
* @protected
|
|
60
|
+
* @override
|
|
61
|
+
*/
|
|
62
|
+
_renderSuffix() {
|
|
63
|
+
return html`
|
|
64
|
+
${super._renderSuffix()}
|
|
65
|
+
<div part="reveal-button" slot="suffix">
|
|
66
|
+
<slot name="reveal"></slot>
|
|
67
|
+
</div>
|
|
68
|
+
`;
|
|
75
69
|
}
|
|
76
70
|
}
|
|
77
71
|
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/password-field",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "25.0.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-password-field",
|
|
11
|
-
"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\n`<vaadin-password-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/
|
|
11
|
+
"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\n`<vaadin-password-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------------------------------------------\n`reveal-button` | The eye icon which toggles the password visibility\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n-------------------|---------------------------------\n`password-visible` | Set when the password is visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
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": "
|
|
4
|
+
"version": "25.0.0-alpha1",
|
|
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-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\n`<vaadin-password-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/
|
|
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\n`<vaadin-password-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------------------------------------------\n`reveal-button` | The eye icon which toggles the password visibility\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n-------------------|---------------------------------\n`password-visible` | Set when the password is visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { html, LitElement } from 'lit';
|
|
7
|
-
import { buttonStyles } from '@vaadin/button/src/vaadin-button-base.js';
|
|
8
|
-
import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
|
|
9
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
|
-
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
11
|
-
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
|
|
16
|
-
*
|
|
17
|
-
* @customElement
|
|
18
|
-
* @extends HTMLElement
|
|
19
|
-
* @mixes ButtonMixin
|
|
20
|
-
* @mixes DirMixin
|
|
21
|
-
* @mixes ThemableMixin
|
|
22
|
-
* @private
|
|
23
|
-
*/
|
|
24
|
-
class PasswordFieldButton extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
|
|
25
|
-
static get is() {
|
|
26
|
-
return 'vaadin-password-field-button';
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
static get styles() {
|
|
30
|
-
return buttonStyles;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/** @protected */
|
|
34
|
-
render() {
|
|
35
|
-
return html``;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
defineCustomElement(PasswordFieldButton);
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import './vaadin-lit-password-field-button.js';
|
|
7
|
-
import { html } from 'lit';
|
|
8
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
9
|
-
import { TextField } from '@vaadin/text-field/src/vaadin-lit-text-field.js';
|
|
10
|
-
import { PasswordFieldMixin } from './vaadin-password-field-mixin.js';
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* LitElement based version of `<vaadin-password-field>` web component.
|
|
14
|
-
*
|
|
15
|
-
* ## Disclaimer
|
|
16
|
-
*
|
|
17
|
-
* This component is an experiment and not yet a part of Vaadin platform.
|
|
18
|
-
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
19
|
-
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
20
|
-
*/
|
|
21
|
-
export class PasswordField extends PasswordFieldMixin(TextField) {
|
|
22
|
-
static get is() {
|
|
23
|
-
return 'vaadin-password-field';
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* @protected
|
|
28
|
-
* @override
|
|
29
|
-
*/
|
|
30
|
-
_renderSuffix() {
|
|
31
|
-
return html`
|
|
32
|
-
${super._renderSuffix()}
|
|
33
|
-
<div part="reveal-button" slot="suffix">
|
|
34
|
-
<slot name="reveal"></slot>
|
|
35
|
-
</div>
|
|
36
|
-
`;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
defineCustomElement(PasswordField);
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import '@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js';
|
|
7
|
-
import './vaadin-password-field-button-styles.js';
|
|
8
|
-
import './vaadin-password-field-styles.js';
|
|
9
|
-
import '../../src/vaadin-lit-password-field.js';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import '@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js';
|
|
7
|
-
import './vaadin-password-field-button-styles.js';
|
|
8
|
-
import './vaadin-password-field-styles.js';
|
|
9
|
-
import '../../src/vaadin-lit-password-field.js';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
|
|
7
|
-
import './vaadin-password-field-button-styles.js';
|
|
8
|
-
import './vaadin-password-field-styles.js';
|
|
9
|
-
import '../../src/vaadin-lit-password-field.js';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
|
|
7
|
-
import './vaadin-password-field-button-styles.js';
|
|
8
|
-
import './vaadin-password-field-styles.js';
|
|
9
|
-
import '../../src/vaadin-lit-password-field.js';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { button } from '@vaadin/button/theme/material/vaadin-button-styles.js';
|
|
7
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
8
|
-
|
|
9
|
-
const passwordFieldButton = css`
|
|
10
|
-
:host {
|
|
11
|
-
position: absolute;
|
|
12
|
-
right: 0;
|
|
13
|
-
top: 0;
|
|
14
|
-
margin: 0;
|
|
15
|
-
padding: 0;
|
|
16
|
-
width: 100%;
|
|
17
|
-
height: 100%;
|
|
18
|
-
min-width: auto;
|
|
19
|
-
background: transparent;
|
|
20
|
-
outline: none;
|
|
21
|
-
border-radius: 50%;
|
|
22
|
-
overflow: visible;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
:host::before {
|
|
26
|
-
transform: scale(1.5);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
/* Disable ripple */
|
|
30
|
-
:host::after {
|
|
31
|
-
display: none;
|
|
32
|
-
}
|
|
33
|
-
`;
|
|
34
|
-
|
|
35
|
-
registerStyles('vaadin-password-field-button', [button, passwordFieldButton], {
|
|
36
|
-
moduleId: 'material-password-field-button',
|
|
37
|
-
});
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import '@vaadin/vaadin-material-styles/color.js';
|
|
7
|
-
import '@vaadin/vaadin-material-styles/font-icons.js';
|
|
8
|
-
import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
|
|
9
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
|
-
|
|
11
|
-
const passwordField = css`
|
|
12
|
-
[part='reveal-button']::before {
|
|
13
|
-
content: var(--material-icons-eye);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
:host([password-visible]) [part='reveal-button']::before {
|
|
17
|
-
content: var(--material-icons-eye-disabled);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/* The reveal button works also in readonly mode */
|
|
21
|
-
:host([readonly]) [part$='button'] {
|
|
22
|
-
color: var(--material-secondary-text-color);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
[part='reveal-button'] {
|
|
26
|
-
position: relative;
|
|
27
|
-
cursor: pointer;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
[part='reveal-button']:hover {
|
|
31
|
-
color: var(--material-text-color);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
[part='reveal-button'][hidden] {
|
|
35
|
-
display: none !important;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
:host([focused]) ::slotted([slot='reveal'])::before {
|
|
39
|
-
background-color: var(--material-primary-text-color);
|
|
40
|
-
}
|
|
41
|
-
`;
|
|
42
|
-
|
|
43
|
-
registerStyles('vaadin-password-field', [inputFieldShared, passwordField], { moduleId: 'material-password-field' });
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import '@vaadin/text-field/theme/material/vaadin-text-field.js';
|
|
7
|
-
import './vaadin-password-field-button-styles.js';
|
|
8
|
-
import './vaadin-password-field-styles.js';
|
|
9
|
-
import '../../src/vaadin-password-field.js';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import '@vaadin/text-field/theme/material/vaadin-text-field.js';
|
|
7
|
-
import './vaadin-password-field-button-styles.js';
|
|
8
|
-
import './vaadin-password-field-styles.js';
|
|
9
|
-
import '../../src/vaadin-password-field.js';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './src/vaadin-password-field.js';
|