@momentum-design/components 0.121.0 → 0.121.2
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/dist/browser/index.js +47 -47
- package/dist/browser/index.js.map +2 -2
- package/dist/components/password/password.component.d.ts +8 -3
- package/dist/components/password/password.component.js +15 -6
- package/dist/custom-elements.json +27 -8
- package/dist/react/password/index.d.ts +2 -1
- package/dist/react/password/index.js +2 -1
- package/package.json +1 -1
|
@@ -10,7 +10,8 @@ import type { ValidationType } from '../formfieldwrapper/formfieldwrapper.types'
|
|
|
10
10
|
* - `password` field - contains the value
|
|
11
11
|
* - `help-text` or `validation-message` - displayed below the password field.
|
|
12
12
|
* - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.
|
|
13
|
-
* - `show-
|
|
13
|
+
* - `show-button-aria-label` - aria label for the trailing show button.
|
|
14
|
+
* - `hide-button-aria-label` - aria label for the trailing hide button.
|
|
14
15
|
* - all the attributes of the native password field.
|
|
15
16
|
*
|
|
16
17
|
* @tagname mdc-password
|
|
@@ -62,9 +63,13 @@ import type { ValidationType } from '../formfieldwrapper/formfieldwrapper.types'
|
|
|
62
63
|
*/
|
|
63
64
|
declare class Password extends Input {
|
|
64
65
|
/**
|
|
65
|
-
* Aria label for the show
|
|
66
|
+
* Aria label for the show password icon button.
|
|
66
67
|
*/
|
|
67
|
-
|
|
68
|
+
showButtonAriaLabel: string;
|
|
69
|
+
/**
|
|
70
|
+
* Aria label for the hide password icon button.
|
|
71
|
+
*/
|
|
72
|
+
hideButtonAriaLabel: string;
|
|
68
73
|
/**
|
|
69
74
|
* The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
|
|
70
75
|
* @override
|
|
@@ -22,7 +22,8 @@ import { PASSWORD_VISIBILITY_ICONS } from './password.constants';
|
|
|
22
22
|
* - `password` field - contains the value
|
|
23
23
|
* - `help-text` or `validation-message` - displayed below the password field.
|
|
24
24
|
* - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.
|
|
25
|
-
* - `show-
|
|
25
|
+
* - `show-button-aria-label` - aria label for the trailing show button.
|
|
26
|
+
* - `hide-button-aria-label` - aria label for the trailing hide button.
|
|
26
27
|
* - all the attributes of the native password field.
|
|
27
28
|
*
|
|
28
29
|
* @tagname mdc-password
|
|
@@ -76,9 +77,13 @@ class Password extends Input {
|
|
|
76
77
|
constructor() {
|
|
77
78
|
super(...arguments);
|
|
78
79
|
/**
|
|
79
|
-
* Aria label for the show
|
|
80
|
+
* Aria label for the show password icon button.
|
|
80
81
|
*/
|
|
81
|
-
this.
|
|
82
|
+
this.showButtonAriaLabel = '';
|
|
83
|
+
/**
|
|
84
|
+
* Aria label for the hide password icon button.
|
|
85
|
+
*/
|
|
86
|
+
this.hideButtonAriaLabel = '';
|
|
82
87
|
/**
|
|
83
88
|
* The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
|
|
84
89
|
* @override
|
|
@@ -116,7 +121,7 @@ class Password extends Input {
|
|
|
116
121
|
?disabled=${this.disabled || this.readonly || !showBtn}
|
|
117
122
|
size="${DEFAULTS.ICON_SIZE}"
|
|
118
123
|
@click=${this.toggleShowPassword}
|
|
119
|
-
aria-label=${this.
|
|
124
|
+
aria-label=${this.showPassword ? this.hideButtonAriaLabel : this.showButtonAriaLabel}
|
|
120
125
|
prefix-icon=${this.showPassword ? PASSWORD_VISIBILITY_ICONS.HIDE_BOLD : PASSWORD_VISIBILITY_ICONS.SHOW_BOLD}
|
|
121
126
|
></mdc-button>
|
|
122
127
|
`;
|
|
@@ -131,9 +136,13 @@ class Password extends Input {
|
|
|
131
136
|
}
|
|
132
137
|
Password.styles = [...Input.styles];
|
|
133
138
|
__decorate([
|
|
134
|
-
property({ type: String, attribute: 'show-
|
|
139
|
+
property({ type: String, attribute: 'show-button-aria-label' }),
|
|
140
|
+
__metadata("design:type", Object)
|
|
141
|
+
], Password.prototype, "showButtonAriaLabel", void 0);
|
|
142
|
+
__decorate([
|
|
143
|
+
property({ type: String, attribute: 'hide-button-aria-label' }),
|
|
135
144
|
__metadata("design:type", Object)
|
|
136
|
-
], Password.prototype, "
|
|
145
|
+
], Password.prototype, "hideButtonAriaLabel", void 0);
|
|
137
146
|
__decorate([
|
|
138
147
|
property({ type: String, attribute: 'help-text-type' }),
|
|
139
148
|
__metadata("design:type", String)
|
|
@@ -31227,7 +31227,7 @@
|
|
|
31227
31227
|
"declarations": [
|
|
31228
31228
|
{
|
|
31229
31229
|
"kind": "class",
|
|
31230
|
-
"description": "`mdc-password` is a component that allows users to input their password.\n It extends the `mdc-input` component and provides additional features specific to password fields.\n It contains:\n- `label` field - describe the password field.\n- `password` field - contains the value\n- `help-text` or `validation-message` - displayed below the password field.\n- `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.\n- `show-hide-button-aria-label` - aria label for the trailing
|
|
31230
|
+
"description": "`mdc-password` is a component that allows users to input their password.\n It extends the `mdc-input` component and provides additional features specific to password fields.\n It contains:\n- `label` field - describe the password field.\n- `password` field - contains the value\n- `help-text` or `validation-message` - displayed below the password field.\n- `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.\n- `show-button-aria-label` - aria label for the trailing show button.\n- `hide-button-aria-label` - aria label for the trailing hide button.\n- all the attributes of the native password field.",
|
|
31231
31231
|
"name": "Password",
|
|
31232
31232
|
"cssProperties": [
|
|
31233
31233
|
{
|
|
@@ -31546,13 +31546,23 @@
|
|
|
31546
31546
|
"members": [
|
|
31547
31547
|
{
|
|
31548
31548
|
"kind": "field",
|
|
31549
|
-
"name": "
|
|
31549
|
+
"name": "showButtonAriaLabel",
|
|
31550
31550
|
"type": {
|
|
31551
31551
|
"text": "string"
|
|
31552
31552
|
},
|
|
31553
31553
|
"default": "''",
|
|
31554
|
-
"description": "Aria label for the show
|
|
31555
|
-
"attribute": "show-
|
|
31554
|
+
"description": "Aria label for the show password icon button.",
|
|
31555
|
+
"attribute": "show-button-aria-label"
|
|
31556
|
+
},
|
|
31557
|
+
{
|
|
31558
|
+
"kind": "field",
|
|
31559
|
+
"name": "hideButtonAriaLabel",
|
|
31560
|
+
"type": {
|
|
31561
|
+
"text": "string"
|
|
31562
|
+
},
|
|
31563
|
+
"default": "''",
|
|
31564
|
+
"description": "Aria label for the hide password icon button.",
|
|
31565
|
+
"attribute": "hide-button-aria-label"
|
|
31556
31566
|
},
|
|
31557
31567
|
{
|
|
31558
31568
|
"kind": "field",
|
|
@@ -32343,13 +32353,22 @@
|
|
|
32343
32353
|
],
|
|
32344
32354
|
"attributes": [
|
|
32345
32355
|
{
|
|
32346
|
-
"name": "show-
|
|
32356
|
+
"name": "show-button-aria-label",
|
|
32357
|
+
"type": {
|
|
32358
|
+
"text": "string"
|
|
32359
|
+
},
|
|
32360
|
+
"default": "''",
|
|
32361
|
+
"description": "Aria label for the show password icon button.",
|
|
32362
|
+
"fieldName": "showButtonAriaLabel"
|
|
32363
|
+
},
|
|
32364
|
+
{
|
|
32365
|
+
"name": "hide-button-aria-label",
|
|
32347
32366
|
"type": {
|
|
32348
32367
|
"text": "string"
|
|
32349
32368
|
},
|
|
32350
32369
|
"default": "''",
|
|
32351
|
-
"description": "Aria label for the
|
|
32352
|
-
"fieldName": "
|
|
32370
|
+
"description": "Aria label for the hide password icon button.",
|
|
32371
|
+
"fieldName": "hideButtonAriaLabel"
|
|
32353
32372
|
},
|
|
32354
32373
|
{
|
|
32355
32374
|
"name": "help-text-type",
|
|
@@ -32732,7 +32751,7 @@
|
|
|
32732
32751
|
"module": "/src/components/input/input.component"
|
|
32733
32752
|
},
|
|
32734
32753
|
"tagName": "mdc-password",
|
|
32735
|
-
"jsDoc": "/**\n * `mdc-password` is a component that allows users to input their password.\n * It extends the `mdc-input` component and provides additional features specific to password fields.\n * It contains:\n * - `label` field - describe the password field.\n * - `password` field - contains the value\n * - `help-text` or `validation-message` - displayed below the password field.\n * - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.\n * - `show-hide-button-aria-label` - aria label for the trailing
|
|
32754
|
+
"jsDoc": "/**\n * `mdc-password` is a component that allows users to input their password.\n * It extends the `mdc-input` component and provides additional features specific to password fields.\n * It contains:\n * - `label` field - describe the password field.\n * - `password` field - contains the value\n * - `help-text` or `validation-message` - displayed below the password field.\n * - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.\n * - `show-button-aria-label` - aria label for the trailing show button.\n * - `hide-button-aria-label` - aria label for the trailing hide button.\n * - all the attributes of the native password field.\n *\n * @tagname mdc-password\n *\n * @event input - (React: onInput) This event is dispatched when the value of the password field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the password field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the password receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the password loses focus.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing button.\n * @csspart input-section - The container that wraps the input field and prefix text.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element.\n * @csspart label - The label element.\n * @csspart helper-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart toggletip - The toggletip icon button element.\n * @csspart toggletip-text - The toggletip text element.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n */",
|
|
32736
32755
|
"customElement": true
|
|
32737
32756
|
}
|
|
32738
32757
|
],
|
|
@@ -9,7 +9,8 @@ import type { Events as EventsInherited } from '../../components/input/input.typ
|
|
|
9
9
|
* - `password` field - contains the value
|
|
10
10
|
* - `help-text` or `validation-message` - displayed below the password field.
|
|
11
11
|
* - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.
|
|
12
|
-
* - `show-
|
|
12
|
+
* - `show-button-aria-label` - aria label for the trailing show button.
|
|
13
|
+
* - `hide-button-aria-label` - aria label for the trailing hide button.
|
|
13
14
|
* - all the attributes of the native password field.
|
|
14
15
|
*
|
|
15
16
|
* @tagname mdc-password
|
|
@@ -10,7 +10,8 @@ import { TAG_NAME } from '../../components/password/password.constants';
|
|
|
10
10
|
* - `password` field - contains the value
|
|
11
11
|
* - `help-text` or `validation-message` - displayed below the password field.
|
|
12
12
|
* - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.
|
|
13
|
-
* - `show-
|
|
13
|
+
* - `show-button-aria-label` - aria label for the trailing show button.
|
|
14
|
+
* - `hide-button-aria-label` - aria label for the trailing hide button.
|
|
14
15
|
* - all the attributes of the native password field.
|
|
15
16
|
*
|
|
16
17
|
* @tagname mdc-password
|