@momentum-design/components 0.120.20 → 0.120.21
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 +157 -238
- package/dist/browser/index.js.map +3 -3
- package/dist/components/checkbox/checkbox.component.d.ts +8 -0
- package/dist/components/checkbox/checkbox.component.js +8 -0
- package/dist/components/checkbox/checkbox.styles.js +3 -3
- package/dist/components/combobox/combobox.component.d.ts +8 -6
- package/dist/components/combobox/combobox.component.js +8 -6
- package/dist/components/combobox/combobox.styles.js +5 -25
- package/dist/components/formfieldgroup/formfieldgroup.component.d.ts +9 -0
- package/dist/components/formfieldgroup/formfieldgroup.component.js +9 -0
- package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +9 -0
- package/dist/components/formfieldwrapper/formfieldwrapper.component.js +9 -0
- package/dist/components/formfieldwrapper/formfieldwrapper.styles.d.ts +2 -2
- package/dist/components/formfieldwrapper/formfieldwrapper.styles.js +68 -66
- package/dist/components/input/input.component.d.ts +11 -13
- package/dist/components/input/input.component.js +11 -13
- package/dist/components/input/input.styles.js +33 -50
- package/dist/components/password/password.component.d.ts +31 -27
- package/dist/components/password/password.component.js +31 -27
- package/dist/components/progressbar/progressbar.component.d.ts +15 -20
- package/dist/components/progressbar/progressbar.component.js +16 -21
- package/dist/components/progressbar/progressbar.styles.js +7 -19
- package/dist/components/searchfield/searchfield.component.d.ts +30 -0
- package/dist/components/searchfield/searchfield.component.js +30 -0
- package/dist/components/select/select.component.d.ts +19 -21
- package/dist/components/select/select.component.js +19 -21
- package/dist/components/select/select.styles.js +14 -29
- package/dist/components/textarea/textarea.component.d.ts +20 -18
- package/dist/components/textarea/textarea.component.js +20 -18
- package/dist/components/textarea/textarea.styles.js +27 -49
- package/dist/custom-elements.json +1779 -1395
- package/dist/react/checkbox/index.d.ts +8 -0
- package/dist/react/checkbox/index.js +8 -0
- package/dist/react/combobox/index.d.ts +8 -6
- package/dist/react/combobox/index.js +8 -6
- package/dist/react/formfieldgroup/index.d.ts +9 -0
- package/dist/react/formfieldgroup/index.js +9 -0
- package/dist/react/formfieldwrapper/index.d.ts +9 -0
- package/dist/react/formfieldwrapper/index.js +9 -0
- package/dist/react/index.d.ts +4 -4
- package/dist/react/index.js +4 -4
- package/dist/react/input/index.d.ts +11 -13
- package/dist/react/input/index.js +11 -13
- package/dist/react/password/index.d.ts +31 -27
- package/dist/react/password/index.js +31 -27
- package/dist/react/progressbar/index.d.ts +15 -20
- package/dist/react/progressbar/index.js +15 -20
- package/dist/react/searchfield/index.d.ts +30 -0
- package/dist/react/searchfield/index.js +30 -0
- package/dist/react/select/index.d.ts +19 -21
- package/dist/react/select/index.js +19 -21
- package/dist/react/textarea/index.d.ts +20 -18
- package/dist/react/textarea/index.js +20 -18
- package/package.json +1 -1
@@ -37,20 +37,10 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
|
|
37
37
|
* @dependency mdc-text
|
38
38
|
* @dependency mdc-toggletip
|
39
39
|
*
|
40
|
-
* @
|
41
|
-
* @
|
42
|
-
* @
|
43
|
-
* @
|
44
|
-
* @cssproperty --mdc-textarea-background-color - Background color for the textarea field
|
45
|
-
* @cssproperty --mdc-textarea-border-color - Border color for the textarea field
|
46
|
-
* @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
|
47
|
-
* @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text
|
48
|
-
* @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text
|
49
|
-
* @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text
|
50
|
-
* @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text
|
51
|
-
* @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
|
52
|
-
* @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
|
53
|
-
* @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
|
40
|
+
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
41
|
+
* @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.
|
42
|
+
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
43
|
+
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
54
44
|
*
|
55
45
|
* @csspart label - The label element.
|
56
46
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -60,10 +50,22 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
|
|
60
50
|
* @csspart help-text - The helper/validation text element.
|
61
51
|
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
62
52
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
63
|
-
*
|
64
|
-
* @
|
65
|
-
* @
|
66
|
-
* @
|
53
|
+
*
|
54
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
55
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
56
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
57
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
58
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
59
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
60
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
61
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
62
|
+
* @cssproperty --mdc-textarea-text-color - Text color for the textarea field
|
63
|
+
* @cssproperty --mdc-textarea-background-color - Background color for the textarea field
|
64
|
+
* @cssproperty --mdc-textarea-border-color - Border color for the textarea field
|
65
|
+
* @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
|
66
|
+
* @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field
|
67
|
+
* @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field
|
68
|
+
* @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
|
67
69
|
*/
|
68
70
|
declare class Textarea extends Textarea_base {
|
69
71
|
/**
|
@@ -52,20 +52,10 @@ import styles from './textarea.styles';
|
|
52
52
|
* @dependency mdc-text
|
53
53
|
* @dependency mdc-toggletip
|
54
54
|
*
|
55
|
-
* @
|
56
|
-
* @
|
57
|
-
* @
|
58
|
-
* @
|
59
|
-
* @cssproperty --mdc-textarea-background-color - Background color for the textarea field
|
60
|
-
* @cssproperty --mdc-textarea-border-color - Border color for the textarea field
|
61
|
-
* @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
|
62
|
-
* @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text
|
63
|
-
* @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text
|
64
|
-
* @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text
|
65
|
-
* @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text
|
66
|
-
* @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
|
67
|
-
* @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
|
68
|
-
* @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
|
55
|
+
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
56
|
+
* @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.
|
57
|
+
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
58
|
+
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
69
59
|
*
|
70
60
|
* @csspart label - The label element.
|
71
61
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -75,10 +65,22 @@ import styles from './textarea.styles';
|
|
75
65
|
* @csspart help-text - The helper/validation text element.
|
76
66
|
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
77
67
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
78
|
-
*
|
79
|
-
* @
|
80
|
-
* @
|
81
|
-
* @
|
68
|
+
*
|
69
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
70
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
71
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
72
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
73
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
74
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
75
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
76
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
77
|
+
* @cssproperty --mdc-textarea-text-color - Text color for the textarea field
|
78
|
+
* @cssproperty --mdc-textarea-background-color - Background color for the textarea field
|
79
|
+
* @cssproperty --mdc-textarea-border-color - Border color for the textarea field
|
80
|
+
* @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
|
81
|
+
* @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field
|
82
|
+
* @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field
|
83
|
+
* @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
|
82
84
|
*/
|
83
85
|
class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
|
84
86
|
constructor() {
|
@@ -3,43 +3,15 @@ import { hostFocusRingStyles } from '../../utils/styles';
|
|
3
3
|
const styles = [
|
4
4
|
css `
|
5
5
|
:host {
|
6
|
-
--mdc-textarea-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
|
7
|
-
--mdc-textarea-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
|
8
|
-
--mdc-textarea-disabled-background-color: var(--mds-color-theme-background-input-disabled);
|
9
6
|
--mdc-textarea-text-color: var(--mds-color-theme-text-primary-normal);
|
10
|
-
--mdc-textarea-background-color: var(--mds-color-theme-background-primary-ghost);
|
11
7
|
--mdc-textarea-border-color: var(--mds-color-theme-outline-input-normal);
|
8
|
+
--mdc-textarea-background-color: var(--mds-color-theme-background-primary-ghost);
|
9
|
+
--mdc-textarea-container-background-color: var(--mds-color-theme-background-primary-ghost);
|
12
10
|
--mdc-textarea-text-secondary-normal: var(--mds-color-theme-text-secondary-normal);
|
13
|
-
--mdc-textarea-error-border-color: var(--mds-color-theme-text-error-normal);
|
14
|
-
--mdc-textarea-warning-border-color: var(--mds-color-theme-text-warning-normal);
|
15
|
-
--mdc-textarea-success-border-color: var(--mds-color-theme-text-success-normal);
|
16
|
-
--mdc-textarea-primary-border-color: var(--mds-color-theme-text-accent-normal);
|
17
|
-
--mdc-textarea-hover-background-color: var(--mds-color-theme-background-primary-hover);
|
18
|
-
--mdc-textarea-focused-background-color: var(--mds-color-theme-background-primary-ghost);
|
19
|
-
--mdc-textarea-focused-border-color: var(--mds-color-theme-outline-input-active);
|
20
11
|
--mdc-textarea-text-font-size: var(--mds-font-size-body-midsize);
|
21
12
|
--mdc-textarea-text-line-height: var(--mds-font-lineheight-body-midsize);
|
22
13
|
}
|
23
14
|
|
24
|
-
:host([disabled])::part(textarea),
|
25
|
-
:host([disabled])::part(textarea)::placeholder {
|
26
|
-
color: var(--mdc-input-disabled-text-color);
|
27
|
-
}
|
28
|
-
|
29
|
-
:host([disabled])::part(textarea-container),
|
30
|
-
:host([readonly])::part(textarea-container) {
|
31
|
-
border-color: var(--mdc-textarea-disabled-border-color);
|
32
|
-
background: var(--mdc-textarea-disabled-background-color);
|
33
|
-
}
|
34
|
-
|
35
|
-
:host([disabled][help-text-type='default'])::part(textarea-container),
|
36
|
-
:host([disabled][help-text-type='success'])::part(textarea-container),
|
37
|
-
:host([disabled][help-text-type='warning'])::part(textarea-container),
|
38
|
-
:host([disabled][help-text-type='error'])::part(textarea-container),
|
39
|
-
:host([disabled][help-text-type='priority'])::part(textarea-container) {
|
40
|
-
border-color: var(--mdc-textarea-disabled-border-color);
|
41
|
-
}
|
42
|
-
|
43
15
|
:host::part(textarea) {
|
44
16
|
min-height: 6.25rem;
|
45
17
|
color: var(--mdc-textarea-text-color);
|
@@ -60,6 +32,7 @@ const styles = [
|
|
60
32
|
border: 0.0625rem solid var(--mdc-textarea-border-color);
|
61
33
|
overflow: hidden;
|
62
34
|
padding: 0.375rem 0.25rem 0.25rem 0.75rem;
|
35
|
+
background-color: var(--mdc-textarea-container-background-color);
|
63
36
|
}
|
64
37
|
|
65
38
|
:host(:dir(rtl))::part(textarea-container) {
|
@@ -67,13 +40,13 @@ const styles = [
|
|
67
40
|
}
|
68
41
|
|
69
42
|
:host(:not([disabled]))::part(textarea-container):hover {
|
70
|
-
background-color: var(--
|
43
|
+
--mdc-textarea-container-background-color: var(--mds-color-theme-background-primary-hover);
|
71
44
|
}
|
72
45
|
|
73
46
|
:host(:not([disabled]))::part(textarea-container):active,
|
74
47
|
:host(:not([disabled]))::part(textarea-container):focus-within {
|
75
|
-
background-color: var(--
|
76
|
-
border-color: var(--
|
48
|
+
--mdc-textarea-container-background-color: var(--mds-color-theme-background-primary-ghost);
|
49
|
+
--mdc-textarea-border-color: var(--mds-color-theme-outline-input-active);
|
77
50
|
}
|
78
51
|
|
79
52
|
:host::part(textarea-footer) {
|
@@ -83,7 +56,7 @@ const styles = [
|
|
83
56
|
width: 100%;
|
84
57
|
}
|
85
58
|
|
86
|
-
|
59
|
+
textarea::placeholder {
|
87
60
|
color: var(--mdc-textarea-text-secondary-normal);
|
88
61
|
}
|
89
62
|
|
@@ -93,28 +66,33 @@ const styles = [
|
|
93
66
|
}
|
94
67
|
|
95
68
|
:host([help-text-type='error'])::part(character-counter) {
|
96
|
-
color: var(--mdc-
|
97
|
-
}
|
98
|
-
|
99
|
-
:host([disabled])::part(character-counter) {
|
100
|
-
color: var(--mds-color-theme-text-primary-disabled);
|
69
|
+
color: var(--mdc-help-text-color);
|
101
70
|
}
|
102
71
|
|
103
72
|
:host([help-text-type='error'])::part(textarea-container),
|
104
|
-
:host([help-text-type='error'])::part(textarea-container):focus-within
|
105
|
-
border-color: var(--mdc-textarea-error-border-color);
|
106
|
-
}
|
73
|
+
:host([help-text-type='error'])::part(textarea-container):focus-within,
|
107
74
|
:host([help-text-type='warning'])::part(textarea-container),
|
108
|
-
:host([help-text-type='warning'])::part(textarea-container):focus-within
|
109
|
-
border-color: var(--mdc-textarea-warning-border-color);
|
110
|
-
}
|
75
|
+
:host([help-text-type='warning'])::part(textarea-container):focus-within,
|
111
76
|
:host([help-text-type='success'])::part(textarea-container),
|
112
|
-
:host([help-text-type='success'])::part(textarea-container):focus-within
|
113
|
-
border-color: var(--mdc-textarea-success-border-color);
|
114
|
-
}
|
77
|
+
:host([help-text-type='success'])::part(textarea-container):focus-within,
|
115
78
|
:host([help-text-type='priority'])::part(textarea-container),
|
116
79
|
:host([help-text-type='priority'])::part(textarea-container):focus-within {
|
117
|
-
border-color: var(--mdc-
|
80
|
+
--mdc-textarea-border-color: var(--mdc-help-text-color);
|
81
|
+
}
|
82
|
+
|
83
|
+
:host([disabled])::part(character-counter) {
|
84
|
+
color: var(--mds-color-theme-text-primary-disabled);
|
85
|
+
}
|
86
|
+
|
87
|
+
:host([disabled])::part(textarea),
|
88
|
+
:host([disabled]) textarea::placeholder {
|
89
|
+
color: var(--mdc-input-disabled-text-color);
|
90
|
+
}
|
91
|
+
|
92
|
+
:host([disabled])::part(textarea-container),
|
93
|
+
:host([readonly])::part(textarea-container) {
|
94
|
+
--mdc-textarea-border-color: var(--mds-color-theme-outline-primary-disabled);
|
95
|
+
--mdc-textarea-container-background-color: var(--mds-color-theme-background-input-disabled);
|
118
96
|
}
|
119
97
|
|
120
98
|
.hidden {
|