@momentum-design/components 0.120.19 → 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 +174 -247
- 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/tab/tab.component.js +0 -1
- package/dist/components/tab/tab.styles.js +16 -8
- 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 +1708 -1324
- 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 +3 -3
- package/dist/react/index.js +3 -3
- 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
@@ -26,6 +26,14 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
|
|
26
26
|
* @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
|
27
27
|
* @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
|
28
28
|
* @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
|
29
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
30
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
31
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
32
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
33
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
34
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
35
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
36
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
29
37
|
*
|
30
38
|
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
31
39
|
* @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.
|
@@ -41,6 +41,14 @@ import styles from './checkbox.styles';
|
|
41
41
|
* @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
|
42
42
|
* @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
|
43
43
|
* @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
|
44
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
45
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
46
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
47
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
48
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
49
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
50
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
51
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
44
52
|
*
|
45
53
|
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
46
54
|
* @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.
|
@@ -41,9 +41,9 @@ const styles = [
|
|
41
41
|
}
|
42
42
|
|
43
43
|
:host::part(label) {
|
44
|
-
font-size: var(--mds-font-apps-body-midsize-regular-font-size);
|
45
|
-
font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
|
46
|
-
line-height: var(--mds-font-apps-body-midsize-regular-line-height);
|
44
|
+
--mdc-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
|
45
|
+
--mdc-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
|
46
|
+
--mdc-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
|
47
47
|
word-break: break-word;
|
48
48
|
white-space: normal;
|
49
49
|
}
|
@@ -53,13 +53,15 @@ declare const Combobox_base: import("../../utils/mixins/index.types").Constructo
|
|
53
53
|
* @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox
|
54
54
|
* @cssproperty --mdc-combobox-width - The width of the combobox
|
55
55
|
* @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered
|
56
|
-
* @cssproperty --mdc-combobox-focused-background-color - The background color of the combobox when focused
|
57
|
-
* @cssproperty --mdc-combobox-error-border-color - The border color of the combobox when in error state
|
58
|
-
* @cssproperty --mdc-combobox-warning-border-color - The border color of the combobox when in warning state
|
59
|
-
* @cssproperty --mdc-combobox-success-border-color - The border color of the combobox when in success state
|
60
|
-
* @cssproperty --mdc-combobox-primary-border-color - The border color of the combobox when in primary state
|
61
56
|
* @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
|
62
|
-
* @cssproperty --mdc-
|
57
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
58
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
59
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
60
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
61
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
62
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
63
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
64
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
63
65
|
*
|
64
66
|
* @csspart label - The label element.
|
65
67
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -79,13 +79,15 @@ import styles from './combobox.styles';
|
|
79
79
|
* @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox
|
80
80
|
* @cssproperty --mdc-combobox-width - The width of the combobox
|
81
81
|
* @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered
|
82
|
-
* @cssproperty --mdc-combobox-focused-background-color - The background color of the combobox when focused
|
83
|
-
* @cssproperty --mdc-combobox-error-border-color - The border color of the combobox when in error state
|
84
|
-
* @cssproperty --mdc-combobox-warning-border-color - The border color of the combobox when in warning state
|
85
|
-
* @cssproperty --mdc-combobox-success-border-color - The border color of the combobox when in success state
|
86
|
-
* @cssproperty --mdc-combobox-primary-border-color - The border color of the combobox when in primary state
|
87
82
|
* @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
|
88
|
-
* @cssproperty --mdc-
|
83
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
84
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
85
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
86
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
87
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
88
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
89
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
90
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
89
91
|
*
|
90
92
|
* @csspart label - The label element.
|
91
93
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -8,12 +8,6 @@ const styles = css `
|
|
8
8
|
--mdc-combobox-listbox-height: auto;
|
9
9
|
--mdc-combobox-text-color-disabled: var(--mds-color-theme-text-primary-disabled);
|
10
10
|
--mdc-combobox-hover-background-color: var(--mds-color-theme-background-primary-hover);
|
11
|
-
--mdc-combobox-error-border-color: var(--mds-color-theme-text-error-normal);
|
12
|
-
--mdc-combobox-warning-border-color: var(--mds-color-theme-text-warning-normal);
|
13
|
-
--mdc-combobox-success-border-color: var(--mds-color-theme-text-success-normal);
|
14
|
-
--mdc-combobox-primary-border-color: var(--mds-color-theme-text-accent-normal);
|
15
|
-
--mdc-combobox-focused-background-color: var(--mds-color-theme-background-primary-ghost);
|
16
|
-
--mdc-combobox-focused-border-color: var(--mds-color-theme-outline-input-active);
|
17
11
|
|
18
12
|
display: flex;
|
19
13
|
flex-direction: column;
|
@@ -45,36 +39,22 @@ const styles = css `
|
|
45
39
|
:host([disabled])::part(combobox__button) {
|
46
40
|
cursor: unset;
|
47
41
|
}
|
48
|
-
:host mdc-input {
|
49
|
-
--mdc-input-error-border-color: var(--mdc-combobox-error-border-color);
|
50
|
-
--mdc-input-warning-border-color: var(--mdc-combobox-warning-border-color);
|
51
|
-
--mdc-input-success-border-color: var(--mdc-combobox-success-border-color);
|
52
|
-
--mdc-input-primary-border-color: var(--mdc-combobox-primary-border-color);
|
53
|
-
--mdc-input-focused-border-color: var(--mdc-combobox-focused-border-color);
|
54
|
-
--mdc-input-focused-background-color: var(--mdc-combobox-focused-background-color);
|
55
|
-
}
|
56
42
|
:host(:focus-within)::part(combobox__button) {
|
57
43
|
border-left: 1px solid var(--mdc-combobox-focused-border-color);
|
58
44
|
}
|
59
45
|
:host(:not([disabled]))::part(combobox__base):hover {
|
60
46
|
background-color: var(--mdc-combobox-hover-background-color);
|
61
47
|
}
|
62
|
-
:host([help-text-type='error'])::part(combobox__button)
|
63
|
-
|
64
|
-
|
65
|
-
:host([help-text-type='warning'])::part(combobox__button) {
|
66
|
-
border-color: var(--mdc-combobox-warning-border-color);
|
67
|
-
}
|
68
|
-
:host([help-text-type='success'])::part(combobox__button) {
|
69
|
-
border-color: var(--mdc-combobox-success-border-color);
|
70
|
-
}
|
48
|
+
:host([help-text-type='error'])::part(combobox__button),
|
49
|
+
:host([help-text-type='warning'])::part(combobox__button),
|
50
|
+
:host([help-text-type='success'])::part(combobox__button),
|
71
51
|
:host([help-text-type='priority'])::part(combobox__button) {
|
72
|
-
border-color: var(--mdc-
|
52
|
+
border-color: var(--mdc-help-text-color);
|
73
53
|
}
|
74
54
|
:host([disabled])::part(combobox__button) {
|
75
55
|
border-left: 1px solid var(--mdc-combobox-text-color-disabled);
|
76
56
|
}
|
77
|
-
:host::part(input
|
57
|
+
:host::part(mdc-input) {
|
78
58
|
width: calc(100% - 1.5rem);
|
79
59
|
}
|
80
60
|
:host::part(combobox__button-icon) {
|
@@ -40,6 +40,15 @@ declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Cons
|
|
40
40
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
41
41
|
* @csspart container - Formfieldgroup host container
|
42
42
|
* @csspart group-header - This contains the label and help text for the group
|
43
|
+
*
|
44
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
45
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
46
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
47
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
48
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
49
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
50
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
51
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
43
52
|
*/
|
44
53
|
declare class FormfieldGroup extends FormfieldGroup_base {
|
45
54
|
/**
|
@@ -44,6 +44,15 @@ import styles from './formfieldgroup.styles';
|
|
44
44
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
45
45
|
* @csspart container - Formfieldgroup host container
|
46
46
|
* @csspart group-header - This contains the label and help text for the group
|
47
|
+
*
|
48
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
49
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
50
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
51
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
52
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
53
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
54
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
55
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
47
56
|
*/
|
48
57
|
class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
|
49
58
|
constructor() {
|
@@ -28,6 +28,15 @@ declare const FormfieldWrapper_base: import("../../utils/mixins/index.types").Co
|
|
28
28
|
* @csspart help-text - The helper/validation text element.
|
29
29
|
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
30
30
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
31
|
+
*
|
32
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
33
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
34
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
35
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
36
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
37
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
38
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
39
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
31
40
|
*/
|
32
41
|
declare class FormfieldWrapper extends FormfieldWrapper_base {
|
33
42
|
/**
|
@@ -42,6 +42,15 @@ import { getHelperIcon } from './formfieldwrapper.utils';
|
|
42
42
|
* @csspart help-text - The helper/validation text element.
|
43
43
|
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
44
44
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
45
|
+
*
|
46
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
47
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
48
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
49
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
50
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
51
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
52
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
53
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
45
54
|
*/
|
46
55
|
class FormfieldWrapper extends DisabledMixin(Component) {
|
47
56
|
constructor() {
|
@@ -1,2 +1,2 @@
|
|
1
|
-
declare const
|
2
|
-
export default
|
1
|
+
declare const _default: import("lit").CSSResult[];
|
2
|
+
export default _default;
|
@@ -1,76 +1,78 @@
|
|
1
1
|
import { css } from 'lit';
|
2
2
|
import { hostFitContentStyles } from '../../utils/styles';
|
3
|
-
const styles =
|
4
|
-
|
5
|
-
|
6
|
-
:
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
:
|
12
|
-
:
|
13
|
-
:host([disabled])::part(help-text-container),
|
14
|
-
:host([disabled])::part(required-indicator),
|
15
|
-
:host([disabled][help-text-type='error'])::part(help-text-container),
|
16
|
-
:host([disabled][help-text-type='success'])::part(help-text-container),
|
17
|
-
:host([disabled][help-text-type='warning'])::part(help-text-container),
|
18
|
-
:host([disabled][help-text-type='priority'])::part(help-text-container) {
|
19
|
-
color: var(--mds-color-theme-text-primary-disabled);
|
20
|
-
}
|
3
|
+
const styles = css `
|
4
|
+
:host {
|
5
|
+
--mdc-label-font-size: var(--mds-font-apps-body-midsize-medium-font-size);
|
6
|
+
--mdc-label-font-weight: var(--mds-font-apps-body-midsize-medium-font-weight);
|
7
|
+
--mdc-label-line-height: var(--mds-font-apps-body-midsize-medium-line-height);
|
8
|
+
--mdc-label-color: var(--mds-color-theme-text-primary-normal);
|
9
|
+
--mdc-help-text-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
|
10
|
+
--mdc-help-text-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
|
11
|
+
--mdc-help-text-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
|
12
|
+
--mdc-help-text-color: var(--mds-color-theme-text-secondary-normal);
|
21
13
|
|
22
|
-
:
|
23
|
-
|
24
|
-
|
14
|
+
flex-direction: column;
|
15
|
+
align-items: flex-start;
|
16
|
+
gap: 0.5rem;
|
17
|
+
}
|
25
18
|
|
26
|
-
|
27
|
-
:
|
28
|
-
|
29
|
-
align-items: center;
|
30
|
-
gap: 0.5rem;
|
31
|
-
width: 100%;
|
32
|
-
}
|
19
|
+
:host::part(required-indicator) {
|
20
|
+
color: var(--mds-color-theme-text-error-normal);
|
21
|
+
}
|
33
22
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
23
|
+
:host::part(label-text),
|
24
|
+
:host::part(help-text-container) {
|
25
|
+
display: flex;
|
26
|
+
align-items: center;
|
27
|
+
gap: 0.5rem;
|
28
|
+
width: 100%;
|
29
|
+
}
|
39
30
|
|
40
|
-
|
41
|
-
:
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
}
|
31
|
+
:host::part(label) {
|
32
|
+
font-size: var(--mdc-label-font-size);
|
33
|
+
font-weight: var(--mdc-label-font-weight);
|
34
|
+
line-height: var(--mdc-label-line-height);
|
35
|
+
}
|
46
36
|
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
37
|
+
:host::part(help-text),
|
38
|
+
:host::part(help-text-container) {
|
39
|
+
font-size: var(--mdc-help-text-font-size);
|
40
|
+
font-weight: var(--mdc-help-text-font-weight);
|
41
|
+
line-height: var(--mdc-help-text-line-height);
|
42
|
+
}
|
53
43
|
|
54
|
-
|
55
|
-
|
56
|
-
|
44
|
+
:host::part(label) {
|
45
|
+
color: var(--mdc-label-color);
|
46
|
+
overflow: hidden;
|
47
|
+
text-overflow: ellipsis;
|
48
|
+
white-space: nowrap;
|
49
|
+
}
|
57
50
|
|
58
|
-
|
59
|
-
|
60
|
-
|
51
|
+
:host::part(help-text-container) {
|
52
|
+
color: var(--mdc-help-text-color);
|
53
|
+
}
|
61
54
|
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
55
|
+
:host::part(info-icon-btn) {
|
56
|
+
align-self: flex-start;
|
57
|
+
}
|
58
|
+
:host([help-text-type='error']) {
|
59
|
+
--mdc-help-text-color: var(--mds-color-theme-text-error-normal);
|
60
|
+
}
|
61
|
+
:host([help-text-type='warning']) {
|
62
|
+
--mdc-help-text-color: var(--mds-color-theme-text-warning-normal);
|
63
|
+
}
|
64
|
+
:host([help-text-type='success']) {
|
65
|
+
--mdc-help-text-color: var(--mds-color-theme-text-success-normal);
|
66
|
+
}
|
67
|
+
:host([help-text-type='priority']) {
|
68
|
+
--mdc-help-text-color: var(--mds-color-theme-text-accent-normal);
|
69
|
+
}
|
70
|
+
|
71
|
+
:host([disabled]),
|
72
|
+
:host([disabled])::part(label),
|
73
|
+
:host([disabled])::part(help-text-container),
|
74
|
+
:host([disabled])::part(required-indicator) {
|
75
|
+
color: var(--mds-color-theme-text-primary-disabled);
|
76
|
+
}
|
77
|
+
`;
|
78
|
+
export default [hostFitContentStyles, styles];
|
@@ -38,22 +38,20 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
|
|
38
38
|
* @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.
|
39
39
|
* @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.
|
40
40
|
*
|
41
|
-
* @cssproperty --mdc-
|
42
|
-
* @cssproperty --mdc-
|
43
|
-
* @cssproperty --mdc-
|
44
|
-
* @cssproperty --mdc-
|
41
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
42
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
43
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
44
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
45
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
46
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
47
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
48
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
45
49
|
* @cssproperty --mdc-input-text-color - Text color for the input field
|
50
|
+
* @cssproperty --mdc-input-border-color - Border color for the input container
|
46
51
|
* @cssproperty --mdc-input-background-color - Background color for the input field
|
47
|
-
* @cssproperty --mdc-input-selection-background-color - Background color for the selected text
|
48
|
-
* @cssproperty --mdc-input-selection-text-color - Text color for the selected text
|
49
52
|
* @cssproperty --mdc-input-support-text-color - Text color for the help text
|
50
|
-
* @cssproperty --mdc-input-
|
51
|
-
* @cssproperty --mdc-input-
|
52
|
-
* @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused
|
53
|
-
* @cssproperty --mdc-input-error-border-color - Border color for the input container when error
|
54
|
-
* @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning
|
55
|
-
* @cssproperty --mdc-input-success-border-color - Border color for the input container when success
|
56
|
-
* @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
|
53
|
+
* @cssproperty --mdc-input-selection-text-color - Text color for the selected text
|
54
|
+
* @cssproperty --mdc-input-selection-background-color - Background color for the selected text
|
57
55
|
*
|
58
56
|
* @csspart label - The label element.
|
59
57
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -53,22 +53,20 @@ import styles from './input.styles';
|
|
53
53
|
* @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.
|
54
54
|
* @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.
|
55
55
|
*
|
56
|
-
* @cssproperty --mdc-
|
57
|
-
* @cssproperty --mdc-
|
58
|
-
* @cssproperty --mdc-
|
59
|
-
* @cssproperty --mdc-
|
56
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
57
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
58
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
59
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
60
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
61
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
62
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
63
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
60
64
|
* @cssproperty --mdc-input-text-color - Text color for the input field
|
65
|
+
* @cssproperty --mdc-input-border-color - Border color for the input container
|
61
66
|
* @cssproperty --mdc-input-background-color - Background color for the input field
|
62
|
-
* @cssproperty --mdc-input-selection-background-color - Background color for the selected text
|
63
|
-
* @cssproperty --mdc-input-selection-text-color - Text color for the selected text
|
64
67
|
* @cssproperty --mdc-input-support-text-color - Text color for the help text
|
65
|
-
* @cssproperty --mdc-input-
|
66
|
-
* @cssproperty --mdc-input-
|
67
|
-
* @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused
|
68
|
-
* @cssproperty --mdc-input-error-border-color - Border color for the input container when error
|
69
|
-
* @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning
|
70
|
-
* @cssproperty --mdc-input-success-border-color - Border color for the input container when success
|
71
|
-
* @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
|
68
|
+
* @cssproperty --mdc-input-selection-text-color - Text color for the selected text
|
69
|
+
* @cssproperty --mdc-input-selection-background-color - Background color for the selected text
|
72
70
|
*
|
73
71
|
* @csspart label - The label element.
|
74
72
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -3,22 +3,12 @@ import { hostFocusRingStyles } from '../../utils/styles';
|
|
3
3
|
const styles = [
|
4
4
|
css `
|
5
5
|
:host {
|
6
|
-
--mdc-input-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
|
7
|
-
--mdc-input-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
|
8
|
-
--mdc-input-disabled-background-color: var(--mds-color-theme-background-input-disabled);
|
9
|
-
--mdc-input-border-color: var(--mds-color-theme-outline-input-normal);
|
10
6
|
--mdc-input-text-color: var(--mds-color-theme-text-primary-normal);
|
7
|
+
--mdc-input-border-color: var(--mds-color-theme-outline-input-normal);
|
11
8
|
--mdc-input-background-color: var(--mds-color-theme-background-primary-ghost);
|
12
|
-
--mdc-input-selection-background-color: var(--mds-color-theme-background-accent-active);
|
13
|
-
--mdc-input-selection-text-color: var(--mds-color-theme-inverted-text-primary-normal);
|
14
9
|
--mdc-input-support-text-color: var(--mds-color-theme-text-secondary-normal);
|
15
|
-
--mdc-input-
|
16
|
-
--mdc-input-
|
17
|
-
--mdc-input-focused-border-color: var(--mds-color-theme-outline-input-active);
|
18
|
-
--mdc-input-error-border-color: var(--mds-color-theme-text-error-normal);
|
19
|
-
--mdc-input-warning-border-color: var(--mds-color-theme-text-warning-normal);
|
20
|
-
--mdc-input-success-border-color: var(--mds-color-theme-text-success-normal);
|
21
|
-
--mdc-input-primary-border-color: var(--mds-color-theme-text-accent-normal);
|
10
|
+
--mdc-input-selection-text-color: var(--mds-color-theme-inverted-text-primary-normal);
|
11
|
+
--mdc-input-selection-background-color: var(--mds-color-theme-background-accent-active);
|
22
12
|
}
|
23
13
|
:host,
|
24
14
|
:host::part(input-container),
|
@@ -27,39 +17,22 @@ const styles = [
|
|
27
17
|
width: 100%;
|
28
18
|
}
|
29
19
|
|
30
|
-
input {
|
20
|
+
:host::part(input-text) {
|
31
21
|
font-family: inherit;
|
32
22
|
}
|
33
23
|
|
24
|
+
:host::part(input-container) {
|
25
|
+
background-color: var(--mdc-input-background-color);
|
26
|
+
border-color: var(--mdc-input-border-color);
|
27
|
+
}
|
28
|
+
|
34
29
|
:host::part(input-container):hover {
|
35
|
-
background-color: var(--
|
30
|
+
--mdc-input-background-color: var(--mds-color-theme-background-primary-hover);
|
36
31
|
}
|
37
32
|
|
38
33
|
:host::part(input-container):active,
|
39
34
|
:host::part(input-container):focus-within {
|
40
|
-
|
41
|
-
border-color: var(--mdc-input-focused-border-color);
|
42
|
-
}
|
43
|
-
|
44
|
-
:host([readonly])::part(leading-icon) {
|
45
|
-
color: var(--mdc-input-support-text-color);
|
46
|
-
}
|
47
|
-
|
48
|
-
:host([disabled])::part(input-text),
|
49
|
-
:host([disabled]) input::placeholder,
|
50
|
-
:host([disabled])::part(prefix-text) {
|
51
|
-
color: var(--mdc-input-disabled-text-color);
|
52
|
-
}
|
53
|
-
|
54
|
-
:host([disabled])::part(input-container),
|
55
|
-
:host([readonly])::part(input-container),
|
56
|
-
:host([disabled][help-text-type='default'])::part(input-container),
|
57
|
-
:host([disabled][help-text-type='success'])::part(input-container),
|
58
|
-
:host([disabled][help-text-type='warning'])::part(input-container),
|
59
|
-
:host([disabled][help-text-type='error'])::part(input-container),
|
60
|
-
:host([disabled][help-text-type='priority'])::part(input-container) {
|
61
|
-
border-color: var(--mdc-input-disabled-border-color);
|
62
|
-
background: var(--mdc-input-disabled-background-color);
|
35
|
+
--mdc-input-border-color: var(--mds-color-theme-outline-input-active);
|
63
36
|
}
|
64
37
|
|
65
38
|
:host::part(leading-icon) {
|
@@ -85,11 +58,11 @@ const styles = [
|
|
85
58
|
:host::part(input-text) {
|
86
59
|
border: none;
|
87
60
|
color: var(--mdc-input-text-color);
|
88
|
-
background-color:
|
61
|
+
background-color: inherit;
|
89
62
|
outline: none;
|
90
63
|
}
|
91
64
|
|
92
|
-
input::selection {
|
65
|
+
:host::part(input-text)::selection {
|
93
66
|
background-color: var(--mdc-input-selection-background-color);
|
94
67
|
color: var(--mdc-input-selection-text-color);
|
95
68
|
}
|
@@ -103,21 +76,31 @@ const styles = [
|
|
103
76
|
color: var(--mdc-input-support-text-color);
|
104
77
|
}
|
105
78
|
|
106
|
-
:host([
|
107
|
-
|
108
|
-
|
79
|
+
:host([disabled]) {
|
80
|
+
--mdc-input-text-color: var(--mds-color-theme-text-primary-disabled);
|
81
|
+
--mdc-input-support-text-color: var(--mds-color-theme-text-primary-disabled);
|
82
|
+
--mdc-input-border-color: var(--mds-color-theme-outline-primary-disabled);
|
83
|
+
--mdc-input-background-color: var(--mds-color-theme-background-input-disabled);
|
109
84
|
}
|
110
|
-
|
111
|
-
:host([
|
112
|
-
|
85
|
+
|
86
|
+
:host([readonly])::part(leading-icon) {
|
87
|
+
color: var(--mdc-input-support-text-color);
|
113
88
|
}
|
114
|
-
|
115
|
-
:host([
|
116
|
-
border-color: var(--
|
89
|
+
|
90
|
+
:host([readonly])::part(input-container) {
|
91
|
+
--mdc-input-border-color: var(--mds-color-theme-outline-primary-disabled);
|
92
|
+
--mdc-input-background-color: var(--mds-color-theme-background-input-disabled);
|
117
93
|
}
|
94
|
+
|
95
|
+
:host([help-text-type='error'])::part(input-container),
|
96
|
+
:host([help-text-type='error'])::part(input-container):focus-within,
|
97
|
+
:host([help-text-type='warning'])::part(input-container),
|
98
|
+
:host([help-text-type='warning'])::part(input-container):focus-within,
|
99
|
+
:host([help-text-type='success'])::part(input-container),
|
100
|
+
:host([help-text-type='success'])::part(input-container):focus-within,
|
118
101
|
:host([help-text-type='priority'])::part(input-container),
|
119
102
|
:host([help-text-type='priority'])::part(input-container):focus-within {
|
120
|
-
border-color: var(--mdc-
|
103
|
+
border-color: var(--mdc-help-text-color);
|
121
104
|
}
|
122
105
|
|
123
106
|
.hidden {
|