@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
@@ -25,35 +25,39 @@ import type { ValidationType } from '../formfieldwrapper/formfieldwrapper.types'
|
|
25
25
|
* @dependency mdc-button
|
26
26
|
* @dependency mdc-toggletip
|
27
27
|
*
|
28
|
-
* @
|
29
|
-
* @
|
30
|
-
* @
|
31
|
-
* @
|
32
|
-
* @
|
33
|
-
* @
|
34
|
-
* @
|
35
|
-
* @
|
36
|
-
* @cssproperty --mdc-input-support-text-color - Text color for the help text
|
37
|
-
* @cssproperty --mdc-input-hover-background-color - Background color for the password field when hovered
|
38
|
-
* @cssproperty --mdc-input-focused-background-color - Background color for the password field when focused
|
39
|
-
* @cssproperty --mdc-input-focused-border-color - Border color for the password container when focused
|
40
|
-
* @cssproperty --mdc-input-error-border-color - Border color for the password container when error
|
41
|
-
* @cssproperty --mdc-input-warning-border-color - Border color for the password container when warning
|
42
|
-
* @cssproperty --mdc-input-success-border-color - Border color for the password container when success
|
43
|
-
* @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary
|
28
|
+
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
29
|
+
* @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.
|
30
|
+
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
31
|
+
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
32
|
+
* @slot input - Slot for the input element. If not provided, the input field will be rendered.
|
33
|
+
* @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.
|
34
|
+
* @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.
|
35
|
+
* @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.
|
44
36
|
*
|
45
|
-
* @csspart
|
46
|
-
* @csspart
|
47
|
-
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
48
|
-
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
49
|
-
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
50
|
-
* @csspart help-text - The helper/validation text element.
|
51
|
-
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
52
|
-
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
53
|
-
* @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
|
54
|
-
* @csspart input-section - The container for the input field, leading icon, and prefix text elements.
|
37
|
+
* @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing button.
|
38
|
+
* @csspart input-section - The container that wraps the input field and prefix text.
|
55
39
|
* @csspart input-text - The input field element.
|
56
|
-
* @csspart trailing-button - The trailing button element
|
40
|
+
* @csspart trailing-button - The trailing button element.
|
41
|
+
* @csspart label - The label element.
|
42
|
+
* @csspart helper-text - The helper/validation text element.
|
43
|
+
* @csspart helper-icon - The helper/validation icon element.
|
44
|
+
* @csspart toggletip - The toggletip icon button element.
|
45
|
+
* @csspart toggletip-text - The toggletip text element.
|
46
|
+
*
|
47
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
48
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
49
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
50
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
51
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
52
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
53
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
54
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
55
|
+
* @cssproperty --mdc-input-text-color - Text color for the input field
|
56
|
+
* @cssproperty --mdc-input-border-color - Border color for the input container
|
57
|
+
* @cssproperty --mdc-input-background-color - Background color for the input field
|
58
|
+
* @cssproperty --mdc-input-selection-text-color - Text color for the selected text
|
59
|
+
* @cssproperty --mdc-input-selection-background-color - Background color for the selected text
|
60
|
+
*
|
57
61
|
*/
|
58
62
|
declare class Password extends Input {
|
59
63
|
/**
|
@@ -37,35 +37,39 @@ import { PASSWORD_VISIBILITY_ICONS } from './password.constants';
|
|
37
37
|
* @dependency mdc-button
|
38
38
|
* @dependency mdc-toggletip
|
39
39
|
*
|
40
|
-
* @
|
41
|
-
* @
|
42
|
-
* @
|
43
|
-
* @
|
44
|
-
* @
|
45
|
-
* @
|
46
|
-
* @
|
47
|
-
* @
|
48
|
-
* @cssproperty --mdc-input-support-text-color - Text color for the help text
|
49
|
-
* @cssproperty --mdc-input-hover-background-color - Background color for the password field when hovered
|
50
|
-
* @cssproperty --mdc-input-focused-background-color - Background color for the password field when focused
|
51
|
-
* @cssproperty --mdc-input-focused-border-color - Border color for the password container when focused
|
52
|
-
* @cssproperty --mdc-input-error-border-color - Border color for the password container when error
|
53
|
-
* @cssproperty --mdc-input-warning-border-color - Border color for the password container when warning
|
54
|
-
* @cssproperty --mdc-input-success-border-color - Border color for the password container when success
|
55
|
-
* @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary
|
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.
|
44
|
+
* @slot input - Slot for the input element. If not provided, the input field will be rendered.
|
45
|
+
* @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.
|
46
|
+
* @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.
|
47
|
+
* @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.
|
56
48
|
*
|
57
|
-
* @csspart
|
58
|
-
* @csspart
|
59
|
-
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
60
|
-
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
61
|
-
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
62
|
-
* @csspart help-text - The helper/validation text element.
|
63
|
-
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
64
|
-
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
65
|
-
* @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
|
66
|
-
* @csspart input-section - The container for the input field, leading icon, and prefix text elements.
|
49
|
+
* @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing button.
|
50
|
+
* @csspart input-section - The container that wraps the input field and prefix text.
|
67
51
|
* @csspart input-text - The input field element.
|
68
|
-
* @csspart trailing-button - The trailing button element
|
52
|
+
* @csspart trailing-button - The trailing button element.
|
53
|
+
* @csspart label - The label element.
|
54
|
+
* @csspart helper-text - The helper/validation text element.
|
55
|
+
* @csspart helper-icon - The helper/validation icon element.
|
56
|
+
* @csspart toggletip - The toggletip icon button element.
|
57
|
+
* @csspart toggletip-text - The toggletip text element.
|
58
|
+
*
|
59
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
60
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
61
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
62
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
63
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
64
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
65
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
66
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
67
|
+
* @cssproperty --mdc-input-text-color - Text color for the input field
|
68
|
+
* @cssproperty --mdc-input-border-color - Border color for the input container
|
69
|
+
* @cssproperty --mdc-input-background-color - Background color for the input field
|
70
|
+
* @cssproperty --mdc-input-selection-text-color - Text color for the selected text
|
71
|
+
* @cssproperty --mdc-input-selection-background-color - Background color for the selected text
|
72
|
+
*
|
69
73
|
*/
|
70
74
|
class Password extends Input {
|
71
75
|
constructor() {
|
@@ -17,31 +17,26 @@ declare const Progressbar_base: import("../../utils/mixins/index.types").Constru
|
|
17
17
|
* @dependency mdc-icon
|
18
18
|
* @dependency mdc-text
|
19
19
|
*
|
20
|
-
* @
|
21
|
-
* @
|
22
|
-
* @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.
|
23
|
-
* @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.
|
24
|
-
* @cssproperty --mdc-progressbar-height - The height of the progressbar.
|
25
|
-
* @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
|
26
|
-
* @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.
|
27
|
-
* @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.
|
28
|
-
* @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.
|
29
|
-
* @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
|
30
|
-
* @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
|
20
|
+
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
21
|
+
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
31
22
|
*
|
32
23
|
* @csspart label - The label element.
|
33
24
|
* @csspart label-text - The container for the label and required indicator elements.
|
34
|
-
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
35
25
|
* @csspart help-text - The helper/validation text element.
|
36
|
-
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
37
26
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
38
|
-
*
|
39
|
-
* @
|
40
|
-
* @
|
41
|
-
* @
|
42
|
-
* @
|
43
|
-
* @
|
44
|
-
* @
|
27
|
+
*
|
28
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
29
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
30
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
31
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
32
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
33
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
34
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
35
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
36
|
+
* @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.
|
37
|
+
* @cssproperty --mdc-progressbar-progress-background-color - Background color of the elapsed progressbar portion.
|
38
|
+
* @cssproperty --mdc-progressbar-height - The height of the progressbar.
|
39
|
+
* @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
|
45
40
|
*/
|
46
41
|
declare class Progressbar extends Progressbar_base {
|
47
42
|
/**
|
@@ -31,31 +31,26 @@ import styles from './progressbar.styles';
|
|
31
31
|
* @dependency mdc-icon
|
32
32
|
* @dependency mdc-text
|
33
33
|
*
|
34
|
-
* @
|
35
|
-
* @
|
36
|
-
* @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.
|
37
|
-
* @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.
|
38
|
-
* @cssproperty --mdc-progressbar-height - The height of the progressbar.
|
39
|
-
* @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
|
40
|
-
* @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.
|
41
|
-
* @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.
|
42
|
-
* @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.
|
43
|
-
* @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
|
44
|
-
* @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
|
34
|
+
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
35
|
+
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
45
36
|
*
|
46
37
|
* @csspart label - The label element.
|
47
38
|
* @csspart label-text - The container for the label and required indicator elements.
|
48
|
-
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
49
39
|
* @csspart help-text - The helper/validation text element.
|
50
|
-
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
51
40
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
52
|
-
*
|
53
|
-
* @
|
54
|
-
* @
|
55
|
-
* @
|
56
|
-
* @
|
57
|
-
* @
|
58
|
-
* @
|
41
|
+
*
|
42
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
43
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
44
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
45
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
46
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
47
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
48
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
49
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
50
|
+
* @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.
|
51
|
+
* @cssproperty --mdc-progressbar-progress-background-color - Background color of the elapsed progressbar portion.
|
52
|
+
* @cssproperty --mdc-progressbar-height - The height of the progressbar.
|
53
|
+
* @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
|
59
54
|
*/
|
60
55
|
class Progressbar extends DataAriaLabelMixin(FormfieldWrapper) {
|
61
56
|
constructor() {
|
@@ -170,7 +165,7 @@ __decorate([
|
|
170
165
|
__metadata("design:type", String)
|
171
166
|
], Progressbar.prototype, "value", void 0);
|
172
167
|
__decorate([
|
173
|
-
property({ type: Boolean }),
|
168
|
+
property({ type: Boolean, attribute: 'error' }),
|
174
169
|
__metadata("design:type", Object)
|
175
170
|
], Progressbar.prototype, "error", void 0);
|
176
171
|
export default Progressbar;
|
@@ -5,19 +5,11 @@ const styles = [
|
|
5
5
|
css `
|
6
6
|
:host {
|
7
7
|
--mdc-progressbar-background-color: var(--mds-color-theme-control-indicator-inactive-normal);
|
8
|
-
--mdc-progressbar-
|
9
|
-
--mdc-progressbar-success-color: var(--mds-color-theme-indicator-stable);
|
10
|
-
--mdc-progressbar-error-color: var(--mds-color-theme-indicator-attention);
|
8
|
+
--mdc-progressbar-progress-background-color: var(--mds-color-theme-control-active-normal);
|
11
9
|
--mdc-progressbar-height: 0.25rem;
|
12
10
|
--mdc-progressbar-border: 0.5px solid transparent;
|
13
11
|
--mdc-progressbar-border-radius: var(--mdc-progressbar-height);
|
14
12
|
|
15
|
-
--mdc-progressbar-label-color: var(--mds-color-theme-text-primary-normal);
|
16
|
-
--mdc-progressbar-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
|
17
|
-
--mdc-progressbar-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
|
18
|
-
--mdc-progressbar-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
|
19
|
-
--mdc-progressbar-help-text-color: var(--mds-color-theme-text-secondary-normal);
|
20
|
-
|
21
13
|
width: 100%;
|
22
14
|
}
|
23
15
|
|
@@ -51,17 +43,17 @@ const styles = [
|
|
51
43
|
|
52
44
|
:host::part(progress-bar) {
|
53
45
|
height: 100%;
|
54
|
-
background-color: var(--mdc-progressbar-
|
46
|
+
background-color: var(--mdc-progressbar-progress-background-color);
|
55
47
|
border-radius: var(--mdc-progressbar-border-radius);
|
56
48
|
transition: width 0.3s ease-in-out;
|
57
49
|
}
|
58
50
|
|
59
51
|
:host::part(success) {
|
60
|
-
background-color: var(--
|
52
|
+
--mdc-progressbar-progress-background-color: var(--mds-color-theme-indicator-stable);
|
61
53
|
}
|
62
54
|
|
63
55
|
:host::part(error) {
|
64
|
-
background-color: var(--
|
56
|
+
--mdc-progressbar-progress-background-color: var(--mds-color-theme-indicator-attention);
|
65
57
|
}
|
66
58
|
|
67
59
|
:host::part(remaining) {
|
@@ -72,13 +64,9 @@ const styles = [
|
|
72
64
|
}
|
73
65
|
|
74
66
|
:host::part(percentage) {
|
75
|
-
font-size: var(--
|
76
|
-
font-weight: var(--
|
77
|
-
line-height: var(--
|
78
|
-
}
|
79
|
-
|
80
|
-
:host([help-text-type='default'])::part(help-text) {
|
81
|
-
color: var(--mdc-progressbar-help-text-color);
|
67
|
+
font-size: var(--mds-font-apps-body-midsize-regular-font-size);
|
68
|
+
font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
|
69
|
+
line-height: var(--mds-font-apps-body-midsize-regular-line-height);
|
82
70
|
}
|
83
71
|
|
84
72
|
@media (forced-colors: active) {
|
@@ -16,10 +16,40 @@ import Input from '../input/input.component';
|
|
16
16
|
* @event clear - (React: onClear) This event is dispatched when the input text is cleared.
|
17
17
|
*
|
18
18
|
* @slot filters - Slot for input chips
|
19
|
+
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
20
|
+
* @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.
|
21
|
+
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
22
|
+
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
23
|
+
* @slot input - Slot for the input element. If not provided, the input field will be rendered.
|
24
|
+
* @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.
|
25
|
+
* @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.
|
26
|
+
* @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.
|
27
|
+
*
|
28
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
29
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
30
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
31
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
32
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
33
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
34
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
35
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
36
|
+
* @cssproperty --mdc-input-text-color - Text color for the input field
|
37
|
+
* @cssproperty --mdc-input-border-color - Border color for the input container
|
38
|
+
* @cssproperty --mdc-input-background-color - Background color for the input field
|
39
|
+
* @cssproperty --mdc-input-support-text-color - Text color for the help text
|
40
|
+
* @cssproperty --mdc-input-selection-text-color - Text color for the selected text
|
41
|
+
* @cssproperty --mdc-input-selection-background-color - Background color for the selected text
|
19
42
|
*
|
20
43
|
* @csspart label - The label element.
|
21
44
|
* @csspart label-text - The container for the label and required indicator elements.
|
45
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
46
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
47
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
48
|
+
* @csspart help-text - The helper/validation text element.
|
49
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
50
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
22
51
|
* @csspart leading-icon - The leading icon element that is displayed before the input field.
|
52
|
+
* @csspart prefix-text - The prefix text element that is displayed before the input field.
|
23
53
|
* @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
|
24
54
|
* @csspart input-section - The container for the input field, leading icon, and prefix text elements.
|
25
55
|
* @csspart input-text - The input field element.
|
@@ -30,10 +30,40 @@ import { DEFAULTS } from './searchfield.constants';
|
|
30
30
|
* @event clear - (React: onClear) This event is dispatched when the input text is cleared.
|
31
31
|
*
|
32
32
|
* @slot filters - Slot for input chips
|
33
|
+
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
34
|
+
* @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.
|
35
|
+
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
36
|
+
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
37
|
+
* @slot input - Slot for the input element. If not provided, the input field will be rendered.
|
38
|
+
* @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.
|
39
|
+
* @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.
|
40
|
+
* @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.
|
41
|
+
*
|
42
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
43
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
44
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
45
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
46
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
47
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
48
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
49
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
50
|
+
* @cssproperty --mdc-input-text-color - Text color for the input field
|
51
|
+
* @cssproperty --mdc-input-border-color - Border color for the input container
|
52
|
+
* @cssproperty --mdc-input-background-color - Background color for the input field
|
53
|
+
* @cssproperty --mdc-input-support-text-color - Text color for the help text
|
54
|
+
* @cssproperty --mdc-input-selection-text-color - Text color for the selected text
|
55
|
+
* @cssproperty --mdc-input-selection-background-color - Background color for the selected text
|
33
56
|
*
|
34
57
|
* @csspart label - The label element.
|
35
58
|
* @csspart label-text - The container for the label and required indicator elements.
|
59
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
60
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
61
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
62
|
+
* @csspart help-text - The helper/validation text element.
|
63
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
64
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
36
65
|
* @csspart leading-icon - The leading icon element that is displayed before the input field.
|
66
|
+
* @csspart prefix-text - The prefix text element that is displayed before the input field.
|
37
67
|
* @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
|
38
68
|
* @csspart input-section - The container for the input field, leading icon, and prefix text elements.
|
39
69
|
* @csspart input-text - The input field element.
|
@@ -35,21 +35,10 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
|
|
35
35
|
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
|
36
36
|
* @event focus - (React: onFocus) This event is dispatched when the select receives focus.
|
37
37
|
*
|
38
|
-
* @
|
39
|
-
* @
|
40
|
-
* @
|
41
|
-
* @
|
42
|
-
* @cssproperty --mdc-select-text-color - The text color of the select.
|
43
|
-
* @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.
|
44
|
-
* @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.
|
45
|
-
* @cssproperty --mdc-select-border-color - The border color of the select.
|
46
|
-
* @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.
|
47
|
-
* @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.
|
48
|
-
* @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
|
49
|
-
* @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
|
50
|
-
* @cssproperty --mdc-select-width - The width of the select.
|
51
|
-
* @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
|
52
|
-
* @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
|
38
|
+
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
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.
|
40
|
+
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
41
|
+
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
53
42
|
*
|
54
43
|
* @csspart label - The label element.
|
55
44
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -59,12 +48,21 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
|
|
59
48
|
* @csspart help-text - The helper/validation text element.
|
60
49
|
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
61
50
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
62
|
-
*
|
63
|
-
* @
|
64
|
-
* @
|
65
|
-
* @
|
66
|
-
* @
|
67
|
-
* @
|
51
|
+
*
|
52
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
53
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
54
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
55
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
56
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
57
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
58
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
59
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
60
|
+
* @cssproperty --mdc-select-background-color - The background color of the combobox of select.
|
61
|
+
* @cssproperty --mdc-select-text-color - The text color of the select.
|
62
|
+
* @cssproperty --mdc-select-border-color - The border color of the select.
|
63
|
+
* @cssproperty --mdc-select-width - The width of the select.
|
64
|
+
* @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
|
65
|
+
* @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
|
68
66
|
*/
|
69
67
|
declare class Select extends Select_base implements AssociatedFormControl {
|
70
68
|
/**
|
@@ -55,21 +55,10 @@ import styles from './select.styles';
|
|
55
55
|
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
|
56
56
|
* @event focus - (React: onFocus) This event is dispatched when the select receives focus.
|
57
57
|
*
|
58
|
-
* @
|
59
|
-
* @
|
60
|
-
* @
|
61
|
-
* @
|
62
|
-
* @cssproperty --mdc-select-text-color - The text color of the select.
|
63
|
-
* @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.
|
64
|
-
* @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.
|
65
|
-
* @cssproperty --mdc-select-border-color - The border color of the select.
|
66
|
-
* @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.
|
67
|
-
* @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.
|
68
|
-
* @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
|
69
|
-
* @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
|
70
|
-
* @cssproperty --mdc-select-width - The width of the select.
|
71
|
-
* @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
|
72
|
-
* @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
|
58
|
+
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
59
|
+
* @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.
|
60
|
+
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
61
|
+
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
73
62
|
*
|
74
63
|
* @csspart label - The label element.
|
75
64
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -79,12 +68,21 @@ import styles from './select.styles';
|
|
79
68
|
* @csspart help-text - The helper/validation text element.
|
80
69
|
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
81
70
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
82
|
-
*
|
83
|
-
* @
|
84
|
-
* @
|
85
|
-
* @
|
86
|
-
* @
|
87
|
-
* @
|
71
|
+
*
|
72
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
73
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
74
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
75
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
76
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
77
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
78
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
79
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
80
|
+
* @cssproperty --mdc-select-background-color - The background color of the combobox of select.
|
81
|
+
* @cssproperty --mdc-select-text-color - The text color of the select.
|
82
|
+
* @cssproperty --mdc-select-border-color - The border color of the select.
|
83
|
+
* @cssproperty --mdc-select-width - The width of the select.
|
84
|
+
* @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
|
85
|
+
* @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
|
88
86
|
*/
|
89
87
|
class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
|
90
88
|
constructor() {
|
@@ -3,17 +3,8 @@ import { hostFocusRingStyles } from '../../utils/styles';
|
|
3
3
|
const styles = css `
|
4
4
|
:host {
|
5
5
|
--mdc-select-background-color: var(--mds-color-theme-background-primary-ghost);
|
6
|
-
--mdc-select-background-color-hover: var(--mds-color-theme-background-primary-hover);
|
7
|
-
--mdc-select-background-color-active: var(--mds-color-theme-background-primary-active);
|
8
|
-
--mdc-select-background-color-disabled: var(--mds-color-theme-background-input-disabled);
|
9
6
|
--mdc-select-text-color: var(--mds-color-theme-text-secondary-normal);
|
10
|
-
--mdc-select-text-color-selected: var(--mds-color-theme-text-primary-normal);
|
11
|
-
--mdc-select-text-color-disabled: var(--mds-color-theme-text-primary-disabled);
|
12
7
|
--mdc-select-border-color: var(--mds-color-theme-outline-input-normal);
|
13
|
-
--mdc-select-border-color-disabled: var(--mds-color-theme-outline-primary-disabled);
|
14
|
-
--mdc-select-border-color-success: var(--mds-color-theme-text-success-normal);
|
15
|
-
--mdc-select-border-color-warning: var(--mds-color-theme-text-warning-normal);
|
16
|
-
--mdc-select-border-color-error: var(--mds-color-theme-text-error-normal);
|
17
8
|
--mdc-select-width: 100%;
|
18
9
|
--mdc-select-listbox-width: var(--mdc-select-width);
|
19
10
|
--mdc-select-listbox-height: auto;
|
@@ -57,10 +48,10 @@ const styles = css `
|
|
57
48
|
user-select: none;
|
58
49
|
}
|
59
50
|
:host::part(base-container):hover {
|
60
|
-
background-color: var(--
|
51
|
+
--mdc-select-background-color: var(--mds-color-theme-background-primary-hover);
|
61
52
|
}
|
62
53
|
:host::part(base-container):active {
|
63
|
-
background-color: var(--
|
54
|
+
--mdc-select-background-color: var(--mds-color-theme-background-primary-active);
|
64
55
|
}
|
65
56
|
:host::part(base-text) {
|
66
57
|
height: 1.3125rem;
|
@@ -71,7 +62,7 @@ const styles = css `
|
|
71
62
|
white-space: nowrap;
|
72
63
|
}
|
73
64
|
:host::part(selected) {
|
74
|
-
color: var(--
|
65
|
+
--mdc-select-text-color: var(--mds-color-theme-text-primary-normal);
|
75
66
|
}
|
76
67
|
:host::part(selected-icon) {
|
77
68
|
flex-shrink: 0;
|
@@ -94,32 +85,26 @@ const styles = css `
|
|
94
85
|
}
|
95
86
|
|
96
87
|
/* Help text border colors */
|
97
|
-
:host([help-text-type='success'])::part(base-container)
|
98
|
-
|
99
|
-
}
|
100
|
-
:host([help-text-type='warning'])::part(base-container) {
|
101
|
-
border-color: var(--mdc-select-border-color-warning);
|
102
|
-
}
|
88
|
+
:host([help-text-type='success'])::part(base-container),
|
89
|
+
:host([help-text-type='warning'])::part(base-container),
|
103
90
|
:host([help-text-type='error'])::part(base-container) {
|
104
|
-
border-color: var(--mdc-
|
91
|
+
--mdc-select-border-color: var(--mdc-help-text-color);
|
92
|
+
}
|
93
|
+
|
94
|
+
:host([readonly])::part(help-text-container) {
|
95
|
+
--mdc-help-text-color: var(--mds-color-theme-text-secondary-normal);
|
105
96
|
}
|
106
97
|
|
107
98
|
/* Disabled, soft-disabled */
|
108
99
|
:host([disabled])::part(base-container),
|
109
100
|
:host([soft-disabled])::part(base-container),
|
110
|
-
:host([readonly])::part(base-container)
|
111
|
-
|
112
|
-
|
113
|
-
:host([help-text-type='warning'][disabled])::part(base-container),
|
114
|
-
:host([help-text-type='success'][readonly])::part(base-container),
|
115
|
-
:host([help-text-type='error'][readonly])::part(base-container),
|
116
|
-
:host([help-text-type='warning'][readonly])::part(base-container) {
|
117
|
-
border-color: var(--mdc-select-border-color-disabled);
|
118
|
-
background: var(--mdc-select-background-color-disabled);
|
101
|
+
:host([readonly])::part(base-container) {
|
102
|
+
--mdc-select-border-color: var(--mds-color-theme-outline-primary-disabled);
|
103
|
+
--mdc-select-background-color: var(--mds-color-theme-background-input-disabled);
|
119
104
|
}
|
120
105
|
:host([disabled])::part(base-text),
|
121
106
|
:host([soft-disabled])::part(base-text) {
|
122
|
-
color: var(--
|
107
|
+
--mdc-select-text-color: var(--mds-color-theme-text-primary-disabled);
|
123
108
|
}
|
124
109
|
`;
|
125
110
|
export default [styles, ...hostFocusRingStyles(true)];
|
@@ -160,7 +160,6 @@ class Tab extends IconNameMixin(Buttonsimple) {
|
|
160
160
|
connectedCallback() {
|
161
161
|
super.connectedCallback();
|
162
162
|
this.role = ROLE.TAB;
|
163
|
-
this.softDisabled = undefined;
|
164
163
|
this.size = undefined;
|
165
164
|
this.type = undefined;
|
166
165
|
this.ariaStateKey = 'aria-selected';
|