@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
@@ -30,21 +30,10 @@ import type { Events } from '../../components/select/select.types';
|
|
30
30
|
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
|
31
31
|
* @event focus - (React: onFocus) This event is dispatched when the select receives focus.
|
32
32
|
*
|
33
|
-
* @
|
34
|
-
* @
|
35
|
-
* @
|
36
|
-
* @
|
37
|
-
* @cssproperty --mdc-select-text-color - The text color of the select.
|
38
|
-
* @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.
|
39
|
-
* @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.
|
40
|
-
* @cssproperty --mdc-select-border-color - The border color of the select.
|
41
|
-
* @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.
|
42
|
-
* @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.
|
43
|
-
* @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
|
44
|
-
* @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
|
45
|
-
* @cssproperty --mdc-select-width - The width of the select.
|
46
|
-
* @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
|
47
|
-
* @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
|
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.
|
48
37
|
*
|
49
38
|
* @csspart label - The label element.
|
50
39
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -54,12 +43,21 @@ import type { Events } from '../../components/select/select.types';
|
|
54
43
|
* @csspart help-text - The helper/validation text element.
|
55
44
|
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
56
45
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
57
|
-
*
|
58
|
-
* @
|
59
|
-
* @
|
60
|
-
* @
|
61
|
-
* @
|
62
|
-
* @
|
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-select-background-color - The background color of the combobox of select.
|
56
|
+
* @cssproperty --mdc-select-text-color - The text color of the select.
|
57
|
+
* @cssproperty --mdc-select-border-color - The border color of the select.
|
58
|
+
* @cssproperty --mdc-select-width - The width of the select.
|
59
|
+
* @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
|
60
|
+
* @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
|
63
61
|
*/
|
64
62
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
|
65
63
|
onChange: EventName<Events["onChangeEvent"]>;
|
@@ -31,21 +31,10 @@ import { TAG_NAME } from '../../components/select/select.constants';
|
|
31
31
|
* @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
|
32
32
|
* @event focus - (React: onFocus) This event is dispatched when the select receives focus.
|
33
33
|
*
|
34
|
-
* @
|
35
|
-
* @
|
36
|
-
* @
|
37
|
-
* @
|
38
|
-
* @cssproperty --mdc-select-text-color - The text color of the select.
|
39
|
-
* @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.
|
40
|
-
* @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.
|
41
|
-
* @cssproperty --mdc-select-border-color - The border color of the select.
|
42
|
-
* @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.
|
43
|
-
* @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.
|
44
|
-
* @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
|
45
|
-
* @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
|
46
|
-
* @cssproperty --mdc-select-width - The width of the select.
|
47
|
-
* @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
|
48
|
-
* @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
|
34
|
+
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
35
|
+
* @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.
|
36
|
+
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
37
|
+
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
49
38
|
*
|
50
39
|
* @csspart label - The label element.
|
51
40
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -55,12 +44,21 @@ import { TAG_NAME } from '../../components/select/select.constants';
|
|
55
44
|
* @csspart help-text - The helper/validation text element.
|
56
45
|
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
57
46
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
58
|
-
*
|
59
|
-
* @
|
60
|
-
* @
|
61
|
-
* @
|
62
|
-
* @
|
63
|
-
* @
|
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.
|
56
|
+
* @cssproperty --mdc-select-background-color - The background color of the combobox of select.
|
57
|
+
* @cssproperty --mdc-select-text-color - The text color of the select.
|
58
|
+
* @cssproperty --mdc-select-border-color - The border color of the select.
|
59
|
+
* @cssproperty --mdc-select-width - The width of the select.
|
60
|
+
* @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
|
61
|
+
* @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
|
64
62
|
*/
|
65
63
|
const reactWrapper = createComponent({
|
66
64
|
tagName: TAG_NAME,
|
@@ -35,20 +35,10 @@ import type { Events } from '../../components/textarea/textarea.types';
|
|
35
35
|
* @dependency mdc-text
|
36
36
|
* @dependency mdc-toggletip
|
37
37
|
*
|
38
|
-
* @
|
39
|
-
* @
|
40
|
-
* @
|
41
|
-
* @
|
42
|
-
* @cssproperty --mdc-textarea-background-color - Background color for the textarea field
|
43
|
-
* @cssproperty --mdc-textarea-border-color - Border color for the textarea field
|
44
|
-
* @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
|
45
|
-
* @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text
|
46
|
-
* @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text
|
47
|
-
* @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text
|
48
|
-
* @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text
|
49
|
-
* @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
|
50
|
-
* @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
|
51
|
-
* @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
|
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.
|
52
42
|
*
|
53
43
|
* @csspart label - The label element.
|
54
44
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -58,10 +48,22 @@ import type { Events } from '../../components/textarea/textarea.types';
|
|
58
48
|
* @csspart help-text - The helper/validation text element.
|
59
49
|
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
60
50
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
61
|
-
*
|
62
|
-
* @
|
63
|
-
* @
|
64
|
-
* @
|
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-textarea-text-color - Text color for the textarea field
|
61
|
+
* @cssproperty --mdc-textarea-background-color - Background color for the textarea field
|
62
|
+
* @cssproperty --mdc-textarea-border-color - Border color for the textarea field
|
63
|
+
* @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
|
64
|
+
* @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field
|
65
|
+
* @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field
|
66
|
+
* @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
|
65
67
|
*/
|
66
68
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
|
67
69
|
onLimitExceeded: EventName<Events["onLimitExceededEvent"]>;
|
@@ -36,20 +36,10 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
|
|
36
36
|
* @dependency mdc-text
|
37
37
|
* @dependency mdc-toggletip
|
38
38
|
*
|
39
|
-
* @
|
40
|
-
* @
|
41
|
-
* @
|
42
|
-
* @
|
43
|
-
* @cssproperty --mdc-textarea-background-color - Background color for the textarea field
|
44
|
-
* @cssproperty --mdc-textarea-border-color - Border color for the textarea field
|
45
|
-
* @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
|
46
|
-
* @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text
|
47
|
-
* @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text
|
48
|
-
* @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text
|
49
|
-
* @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text
|
50
|
-
* @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
|
51
|
-
* @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
|
52
|
-
* @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
|
39
|
+
* @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
|
40
|
+
* @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
|
+
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
42
|
+
* @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
43
|
*
|
54
44
|
* @csspart label - The label element.
|
55
45
|
* @csspart label-text - The container for the label and required indicator elements.
|
@@ -59,10 +49,22 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
|
|
59
49
|
* @csspart help-text - The helper/validation text element.
|
60
50
|
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
61
51
|
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
62
|
-
*
|
63
|
-
* @
|
64
|
-
* @
|
65
|
-
* @
|
52
|
+
*
|
53
|
+
* @cssproperty --mdc-label-font-size - Font size for the label text.
|
54
|
+
* @cssproperty --mdc-label-font-weight - Font weight for the label text.
|
55
|
+
* @cssproperty --mdc-label-line-height - Line height for the label text.
|
56
|
+
* @cssproperty --mdc-label-color - Color for the label text.
|
57
|
+
* @cssproperty --mdc-help-text-font-size - Font size for the help text.
|
58
|
+
* @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
|
59
|
+
* @cssproperty --mdc-help-text-line-height - Line height for the help text.
|
60
|
+
* @cssproperty --mdc-help-text-color - Color for the help text.
|
61
|
+
* @cssproperty --mdc-textarea-text-color - Text color for the textarea field
|
62
|
+
* @cssproperty --mdc-textarea-background-color - Background color for the textarea field
|
63
|
+
* @cssproperty --mdc-textarea-border-color - Border color for the textarea field
|
64
|
+
* @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter
|
65
|
+
* @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field
|
66
|
+
* @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field
|
67
|
+
* @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
|
66
68
|
*/
|
67
69
|
const reactWrapper = createComponent({
|
68
70
|
tagName: TAG_NAME,
|