@momentum-design/components 0.120.1 → 0.120.3
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 +71 -70
- package/dist/browser/index.js.map +2 -2
- package/dist/components/checkbox/checkbox.component.d.ts +11 -0
- package/dist/components/checkbox/checkbox.component.js +11 -0
- package/dist/components/combobox/combobox.component.d.ts +9 -1
- package/dist/components/combobox/combobox.component.js +10 -3
- package/dist/components/combobox/combobox.styles.js +1 -1
- package/dist/components/formfieldgroup/formfieldgroup.component.d.ts +11 -0
- package/dist/components/formfieldgroup/formfieldgroup.component.js +11 -0
- package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +9 -0
- package/dist/components/formfieldwrapper/formfieldwrapper.component.js +9 -0
- package/dist/components/input/input.component.d.ts +14 -0
- package/dist/components/input/input.component.js +18 -6
- package/dist/components/input/input.styles.js +32 -32
- package/dist/components/password/password.component.d.ts +12 -0
- package/dist/components/password/password.component.js +12 -0
- package/dist/components/popover/popover.component.js +2 -2
- package/dist/components/popover/popover.portal.component.js +1 -0
- package/dist/components/popover/popover.styles.js +1 -1
- package/dist/components/progressbar/progressbar.component.d.ts +6 -0
- package/dist/components/progressbar/progressbar.component.js +6 -0
- package/dist/components/radio/radio.component.d.ts +10 -0
- package/dist/components/radio/radio.component.js +10 -0
- package/dist/components/searchfield/searchfield.component.d.ts +8 -0
- package/dist/components/searchfield/searchfield.component.js +8 -1
- package/dist/components/select/select.component.d.ts +15 -0
- package/dist/components/select/select.component.js +15 -0
- package/dist/components/staticcheckbox/staticcheckbox.component.d.ts +3 -0
- package/dist/components/staticcheckbox/staticcheckbox.component.js +4 -1
- package/dist/components/staticcheckbox/staticcheckbox.styles.js +4 -3
- package/dist/components/staticradio/staticradio.component.d.ts +4 -0
- package/dist/components/staticradio/staticradio.component.js +5 -1
- package/dist/components/staticradio/staticradio.styles.js +13 -13
- package/dist/components/statictoggle/statictoggle.component.d.ts +5 -0
- package/dist/components/statictoggle/statictoggle.component.js +6 -1
- package/dist/components/statictoggle/statictoggle.styles.js +7 -4
- package/dist/components/textarea/textarea.component.d.ts +11 -0
- package/dist/components/textarea/textarea.component.js +11 -0
- package/dist/components/toast/toast.component.d.ts +1 -0
- package/dist/components/toast/toast.component.js +2 -1
- package/dist/components/toast/toast.styles.js +1 -1
- package/dist/components/toggle/toggle.component.d.ts +11 -0
- package/dist/components/toggle/toggle.component.js +11 -0
- package/dist/custom-elements.json +7324 -6196
- package/dist/react/checkbox/index.d.ts +11 -0
- package/dist/react/checkbox/index.js +11 -0
- package/dist/react/combobox/index.d.ts +9 -1
- package/dist/react/combobox/index.js +9 -1
- package/dist/react/formfieldgroup/index.d.ts +11 -0
- package/dist/react/formfieldgroup/index.js +11 -0
- package/dist/react/formfieldwrapper/index.d.ts +9 -0
- package/dist/react/formfieldwrapper/index.js +9 -0
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/dist/react/input/index.d.ts +14 -0
- package/dist/react/input/index.js +14 -0
- package/dist/react/password/index.d.ts +12 -0
- package/dist/react/password/index.js +12 -0
- package/dist/react/progressbar/index.d.ts +6 -0
- package/dist/react/progressbar/index.js +6 -0
- package/dist/react/radio/index.d.ts +10 -0
- package/dist/react/radio/index.js +10 -0
- package/dist/react/searchfield/index.d.ts +8 -0
- package/dist/react/searchfield/index.js +8 -0
- package/dist/react/select/index.d.ts +15 -0
- package/dist/react/select/index.js +15 -0
- package/dist/react/staticcheckbox/index.d.ts +3 -0
- package/dist/react/staticcheckbox/index.js +3 -0
- package/dist/react/staticradio/index.d.ts +4 -0
- package/dist/react/staticradio/index.js +4 -0
- package/dist/react/statictoggle/index.d.ts +5 -0
- package/dist/react/statictoggle/index.js +5 -0
- package/dist/react/textarea/index.d.ts +11 -0
- package/dist/react/textarea/index.js +11 -0
- package/dist/react/toast/index.d.ts +1 -0
- package/dist/react/toast/index.js +1 -0
- package/dist/react/toggle/index.d.ts +11 -0
- package/dist/react/toggle/index.js +11 -0
- package/package.json +1 -1
@@ -30,6 +30,17 @@ import type { Events } from '../../components/checkbox/checkbox.types';
|
|
30
30
|
* @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.
|
31
31
|
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
32
32
|
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
33
|
+
*
|
34
|
+
* @csspart label - The label element.
|
35
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
36
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
37
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
38
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
39
|
+
* @csspart help-text - The helper/validation text element.
|
40
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
41
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
42
|
+
* @csspart checkbox-input - The native checkbox input element.
|
43
|
+
* @csspart text-container - The container for the label and helper text elements.
|
33
44
|
*/
|
34
45
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
|
35
46
|
onChange: EventName<Events["onChangeEvent"]>;
|
@@ -31,6 +31,17 @@ import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
|
|
31
31
|
* @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.
|
32
32
|
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
33
33
|
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
34
|
+
*
|
35
|
+
* @csspart label - The label element.
|
36
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
37
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
38
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
39
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
40
|
+
* @csspart help-text - The helper/validation text element.
|
41
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
42
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
43
|
+
* @csspart checkbox-input - The native checkbox input element.
|
44
|
+
* @csspart text-container - The container for the label and helper text elements.
|
34
45
|
*/
|
35
46
|
const reactWrapper = createComponent({
|
36
47
|
tagName: TAG_NAME,
|
@@ -57,8 +57,16 @@ import type { Events } from '../../components/combobox/combobox.types';
|
|
57
57
|
* @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
|
58
58
|
* @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused
|
59
59
|
*
|
60
|
+
* @csspart label - The label element.
|
61
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
62
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
63
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
64
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
65
|
+
* @csspart help-text - The helper/validation text element.
|
66
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
67
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
60
68
|
* @csspart internal-native-input - The internal native input element of the combobox.
|
61
|
-
* @csspart
|
69
|
+
* @csspart input-text - The input element of the combobox.
|
62
70
|
* @csspart no-result-text - The no result text element of the combobox.
|
63
71
|
* @csspart combobox__base - The base container element of the combobox.
|
64
72
|
* @csspart combobox__button - The button element of the combobox.
|
@@ -58,8 +58,16 @@ import { TAG_NAME } from '../../components/combobox/combobox.constants';
|
|
58
58
|
* @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
|
59
59
|
* @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused
|
60
60
|
*
|
61
|
+
* @csspart label - The label element.
|
62
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
63
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
64
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
65
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
66
|
+
* @csspart help-text - The helper/validation text element.
|
67
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
68
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
61
69
|
* @csspart internal-native-input - The internal native input element of the combobox.
|
62
|
-
* @csspart
|
70
|
+
* @csspart input-text - The input element of the combobox.
|
63
71
|
* @csspart no-result-text - The no result text element of the combobox.
|
64
72
|
* @csspart combobox__base - The base container element of the combobox.
|
65
73
|
* @csspart combobox__button - The button element of the combobox.
|
@@ -27,6 +27,17 @@ import Component from '../../components/formfieldgroup';
|
|
27
27
|
* @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.
|
28
28
|
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
29
29
|
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
30
|
+
*
|
31
|
+
* @csspart label - The label element.
|
32
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
33
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
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
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
36
|
+
* @csspart help-text - The helper/validation text element.
|
37
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
38
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
39
|
+
* @csspart container - Formfieldgroup host container
|
40
|
+
* @csspart group-header - This contains the label and help text for the group
|
30
41
|
*/
|
31
42
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
|
32
43
|
export default reactWrapper;
|
@@ -30,6 +30,17 @@ import { TAG_NAME } from '../../components/formfieldgroup/formfieldgroup.constan
|
|
30
30
|
* @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.
|
31
31
|
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
32
32
|
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
33
|
+
*
|
34
|
+
* @csspart label - The label element.
|
35
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
36
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
37
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
38
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
39
|
+
* @csspart help-text - The helper/validation text element.
|
40
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
41
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
42
|
+
* @csspart container - Formfieldgroup host container
|
43
|
+
* @csspart group-header - This contains the label and help text for the group
|
33
44
|
*/
|
34
45
|
const reactWrapper = createComponent({
|
35
46
|
tagName: TAG_NAME,
|
@@ -15,6 +15,15 @@ import Component from '../../components/formfieldwrapper';
|
|
15
15
|
* @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.
|
16
16
|
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
17
17
|
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
18
|
+
*
|
19
|
+
* @csspart label - The label element.
|
20
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
21
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
22
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
23
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
24
|
+
* @csspart help-text - The helper/validation text element.
|
25
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
26
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
18
27
|
*/
|
19
28
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
|
20
29
|
export default reactWrapper;
|
@@ -18,6 +18,15 @@ import { TAG_NAME } from '../../components/formfieldwrapper/formfieldwrapper.con
|
|
18
18
|
* @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.
|
19
19
|
* @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
|
20
20
|
* @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
|
21
|
+
*
|
22
|
+
* @csspart label - The label element.
|
23
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
24
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
25
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
26
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
27
|
+
* @csspart help-text - The helper/validation text element.
|
28
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
29
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
21
30
|
*/
|
22
31
|
const reactWrapper = createComponent({
|
23
32
|
tagName: TAG_NAME,
|
package/dist/react/index.d.ts
CHANGED
@@ -16,7 +16,6 @@ export { default as ButtonGroup } from './buttongroup';
|
|
16
16
|
export { default as ButtonLink } from './buttonlink';
|
17
17
|
export { default as Buttonsimple } from './buttonsimple';
|
18
18
|
export { default as Card } from './card';
|
19
|
-
export { default as CardButton } from './cardbutton';
|
20
19
|
export { default as CardCheckbox } from './cardcheckbox';
|
21
20
|
export { default as CardRadio } from './cardradio';
|
22
21
|
export { default as Checkbox } from './checkbox';
|
@@ -31,6 +30,7 @@ export { default as FormfieldWrapper } from './formfieldwrapper';
|
|
31
30
|
export { default as Icon } from './icon';
|
32
31
|
export { default as IconProvider } from './iconprovider';
|
33
32
|
export { default as Illustration } from './illustration';
|
33
|
+
export { default as CardButton } from './cardbutton';
|
34
34
|
export { default as IllustrationProvider } from './illustrationprovider';
|
35
35
|
export { default as Input } from './input';
|
36
36
|
export { default as InputChip } from './inputchip';
|
package/dist/react/index.js
CHANGED
@@ -16,7 +16,6 @@ export { default as ButtonGroup } from './buttongroup';
|
|
16
16
|
export { default as ButtonLink } from './buttonlink';
|
17
17
|
export { default as Buttonsimple } from './buttonsimple';
|
18
18
|
export { default as Card } from './card';
|
19
|
-
export { default as CardButton } from './cardbutton';
|
20
19
|
export { default as CardCheckbox } from './cardcheckbox';
|
21
20
|
export { default as CardRadio } from './cardradio';
|
22
21
|
export { default as Checkbox } from './checkbox';
|
@@ -31,6 +30,7 @@ export { default as FormfieldWrapper } from './formfieldwrapper';
|
|
31
30
|
export { default as Icon } from './icon';
|
32
31
|
export { default as IconProvider } from './iconprovider';
|
33
32
|
export { default as Illustration } from './illustration';
|
33
|
+
export { default as CardButton } from './cardbutton';
|
34
34
|
export { default as IllustrationProvider } from './illustrationprovider';
|
35
35
|
export { default as Input } from './input';
|
36
36
|
export { default as InputChip } from './inputchip';
|
@@ -52,6 +52,20 @@ import type { Events } from '../../components/input/input.types';
|
|
52
52
|
* @cssproperty --mdc-input-success-border-color - Border color for the input container when success
|
53
53
|
* @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
|
54
54
|
*
|
55
|
+
* @csspart label - The label element.
|
56
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
57
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
58
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
59
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
60
|
+
* @csspart help-text - The helper/validation text element.
|
61
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
62
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
63
|
+
* @csspart leading-icon - The leading icon element that is displayed before the input field.
|
64
|
+
* @csspart prefix-text - The prefix text element that is displayed before the input field.
|
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.
|
67
|
+
* @csspart input-text - The input field element.
|
68
|
+
* @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
|
55
69
|
*/
|
56
70
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
|
57
71
|
onClear: EventName<Events["onClearEvent"]>;
|
@@ -53,6 +53,20 @@ import { TAG_NAME } from '../../components/input/input.constants';
|
|
53
53
|
* @cssproperty --mdc-input-success-border-color - Border color for the input container when success
|
54
54
|
* @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
|
55
55
|
*
|
56
|
+
* @csspart label - The label element.
|
57
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
58
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
59
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
60
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
61
|
+
* @csspart help-text - The helper/validation text element.
|
62
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
63
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
64
|
+
* @csspart leading-icon - The leading icon element that is displayed before the input field.
|
65
|
+
* @csspart prefix-text - The prefix text element that is displayed before the input field.
|
66
|
+
* @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
|
67
|
+
* @csspart input-section - The container for the input field, leading icon, and prefix text elements.
|
68
|
+
* @csspart input-text - The input field element.
|
69
|
+
* @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
|
56
70
|
*/
|
57
71
|
const reactWrapper = createComponent({
|
58
72
|
tagName: TAG_NAME,
|
@@ -41,6 +41,18 @@ import type { Events as EventsInherited } from '../../components/input/input.typ
|
|
41
41
|
* @cssproperty --mdc-input-success-border-color - Border color for the password container when success
|
42
42
|
* @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary
|
43
43
|
*
|
44
|
+
* @csspart label - The label element.
|
45
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
46
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
47
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
48
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
49
|
+
* @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
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
52
|
+
* @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
|
53
|
+
* @csspart input-section - The container for the input field, leading icon, and prefix text elements.
|
54
|
+
* @csspart input-text - The input field element.
|
55
|
+
* @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
|
44
56
|
*/
|
45
57
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
|
46
58
|
onInput: EventName<EventsInherited["onInputEvent"]>;
|
@@ -42,6 +42,18 @@ import { TAG_NAME } from '../../components/password/password.constants';
|
|
42
42
|
* @cssproperty --mdc-input-success-border-color - Border color for the password container when success
|
43
43
|
* @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary
|
44
44
|
*
|
45
|
+
* @csspart label - The label element.
|
46
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
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.
|
55
|
+
* @csspart input-text - The input field element.
|
56
|
+
* @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
|
45
57
|
*/
|
46
58
|
const reactWrapper = createComponent({
|
47
59
|
tagName: TAG_NAME,
|
@@ -26,6 +26,12 @@ import Component from '../../components/progressbar';
|
|
26
26
|
* @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
|
27
27
|
* @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
|
28
28
|
*
|
29
|
+
* @csspart label - The label element.
|
30
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
31
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
32
|
+
* @csspart help-text - The helper/validation text element.
|
33
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
34
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
29
35
|
* @csspart gap - The gap between the label and the progressbar.
|
30
36
|
* @csspart inline-label-container - The container of the label in inline variant.
|
31
37
|
* @csspart label-container - The container of the label in inline variant.
|
@@ -29,6 +29,12 @@ import { TAG_NAME } from '../../components/progressbar/progressbar.constants';
|
|
29
29
|
* @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
|
30
30
|
* @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
|
31
31
|
*
|
32
|
+
* @csspart label - The label element.
|
33
|
+
* @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
|
+
* @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
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
32
38
|
* @csspart gap - The gap between the label and the progressbar.
|
33
39
|
* @csspart inline-label-container - The container of the label in inline variant.
|
34
40
|
* @csspart label-container - The container of the label in inline variant.
|
@@ -27,6 +27,16 @@ import type { Events } from '../../components/radio/radio.types';
|
|
27
27
|
* @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled
|
28
28
|
* @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled
|
29
29
|
*
|
30
|
+
* @csspart label - The label element.
|
31
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
32
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
33
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
34
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
35
|
+
* @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
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
38
|
+
* @csspart radio-input - The native radio input element.
|
39
|
+
* @csspart text-container - The container for the label and helper text elements.
|
30
40
|
*/
|
31
41
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
|
32
42
|
onChange: EventName<Events["onChangeEvent"]>;
|
@@ -28,6 +28,16 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
|
|
28
28
|
* @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled
|
29
29
|
* @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled
|
30
30
|
*
|
31
|
+
* @csspart label - The label element.
|
32
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
33
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
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
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
36
|
+
* @csspart help-text - The helper/validation text element.
|
37
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
38
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
39
|
+
* @csspart radio-input - The native radio input element.
|
40
|
+
* @csspart text-container - The container for the label and helper text elements.
|
31
41
|
*/
|
32
42
|
const reactWrapper = createComponent({
|
33
43
|
tagName: TAG_NAME,
|
@@ -17,6 +17,14 @@ import type { Events as EventsInherited } from '../../components/input/input.typ
|
|
17
17
|
* @event clear - (React: onClear) This event is dispatched when the input text is cleared.
|
18
18
|
*
|
19
19
|
* @slot filters - Slot for input chips
|
20
|
+
*
|
21
|
+
* @csspart label - The label element.
|
22
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
23
|
+
* @csspart leading-icon - The leading icon element that is displayed before the input field.
|
24
|
+
* @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
|
25
|
+
* @csspart input-section - The container for the input field, leading icon, and prefix text elements.
|
26
|
+
* @csspart input-text - The input field element.
|
27
|
+
* @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
|
20
28
|
*/
|
21
29
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
|
22
30
|
onInput: EventName<EventsInherited["onInputEvent"]>;
|
@@ -18,6 +18,14 @@ import { TAG_NAME } from '../../components/searchfield/searchfield.constants';
|
|
18
18
|
* @event clear - (React: onClear) This event is dispatched when the input text is cleared.
|
19
19
|
*
|
20
20
|
* @slot filters - Slot for input chips
|
21
|
+
*
|
22
|
+
* @csspart label - The label element.
|
23
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
24
|
+
* @csspart leading-icon - The leading icon element that is displayed before the input field.
|
25
|
+
* @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
|
26
|
+
* @csspart input-section - The container for the input field, leading icon, and prefix text elements.
|
27
|
+
* @csspart input-text - The input field element.
|
28
|
+
* @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
|
21
29
|
*/
|
22
30
|
const reactWrapper = createComponent({
|
23
31
|
tagName: TAG_NAME,
|
@@ -45,6 +45,21 @@ import type { Events } from '../../components/select/select.types';
|
|
45
45
|
* @cssproperty --mdc-select-width - The width of the select.
|
46
46
|
* @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
|
47
47
|
* @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
|
48
|
+
*
|
49
|
+
* @csspart label - The label element.
|
50
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
51
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
52
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
53
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
54
|
+
* @csspart help-text - The helper/validation text element.
|
55
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
56
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
57
|
+
* @csspart container - The container element that wraps the visual combobox and the dropdown icon.
|
58
|
+
* @csspart base-container - The container element that wraps the visual combobox, dropdown icon, and the popover.
|
59
|
+
* @csspart selected-icon - The icon element that is displayed next to the selected option in the dropdown list.
|
60
|
+
* @csspart base-text - The text element that displays the selected option or placeholder in the visual combobox.
|
61
|
+
* @csspart icon-container - The container element that wraps the dropdown icon.
|
62
|
+
* @csspart native-input - The native hidden input element.
|
48
63
|
*/
|
49
64
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
|
50
65
|
onChange: EventName<Events["onChangeEvent"]>;
|
@@ -46,6 +46,21 @@ import { TAG_NAME } from '../../components/select/select.constants';
|
|
46
46
|
* @cssproperty --mdc-select-width - The width of the select.
|
47
47
|
* @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
|
48
48
|
* @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
|
49
|
+
*
|
50
|
+
* @csspart label - The label element.
|
51
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
52
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
53
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
54
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
55
|
+
* @csspart help-text - The helper/validation text element.
|
56
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
57
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
58
|
+
* @csspart container - The container element that wraps the visual combobox and the dropdown icon.
|
59
|
+
* @csspart base-container - The container element that wraps the visual combobox, dropdown icon, and the popover.
|
60
|
+
* @csspart selected-icon - The icon element that is displayed next to the selected option in the dropdown list.
|
61
|
+
* @csspart base-text - The text element that displays the selected option or placeholder in the visual combobox.
|
62
|
+
* @csspart icon-container - The container element that wraps the dropdown icon.
|
63
|
+
* @csspart native-input - The native hidden input element.
|
49
64
|
*/
|
50
65
|
const reactWrapper = createComponent({
|
51
66
|
tagName: TAG_NAME,
|
@@ -21,6 +21,9 @@ import Component from '../../components/staticcheckbox';
|
|
21
21
|
* @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
|
22
22
|
*
|
23
23
|
* @csspart icon-container - The container for the checkbox icon.
|
24
|
+
* @csspart checkbox-icon - The checkbox icon.
|
25
|
+
*
|
26
|
+
* @slot - Default slot for adding label text.
|
24
27
|
*/
|
25
28
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
|
26
29
|
export default reactWrapper;
|
@@ -24,6 +24,9 @@ import { TAG_NAME } from '../../components/staticcheckbox/staticcheckbox.constan
|
|
24
24
|
* @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
|
25
25
|
*
|
26
26
|
* @csspart icon-container - The container for the checkbox icon.
|
27
|
+
* @csspart checkbox-icon - The checkbox icon.
|
28
|
+
*
|
29
|
+
* @slot - Default slot for adding label text.
|
27
30
|
*/
|
28
31
|
const reactWrapper = createComponent({
|
29
32
|
tagName: TAG_NAME,
|
@@ -19,6 +19,10 @@ import Component from '../../components/staticradio';
|
|
19
19
|
* @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active
|
20
20
|
* @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button
|
21
21
|
* when active and disabled
|
22
|
+
*
|
23
|
+
* @csspart radio-icon - The radio icon.
|
24
|
+
*
|
25
|
+
* @slot - Default slot for the label of the radio.
|
22
26
|
*/
|
23
27
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
|
24
28
|
export default reactWrapper;
|
@@ -22,6 +22,10 @@ import { TAG_NAME } from '../../components/staticradio/staticradio.constants';
|
|
22
22
|
* @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active
|
23
23
|
* @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button
|
24
24
|
* when active and disabled
|
25
|
+
*
|
26
|
+
* @csspart radio-icon - The radio icon.
|
27
|
+
*
|
28
|
+
* @slot - Default slot for the label of the radio.
|
25
29
|
*/
|
26
30
|
const reactWrapper = createComponent({
|
27
31
|
tagName: TAG_NAME,
|
@@ -25,6 +25,11 @@ import Component from '../../components/statictoggle';
|
|
25
25
|
* @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state
|
26
26
|
* @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state
|
27
27
|
* @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state
|
28
|
+
*
|
29
|
+
* @csspart slider - The slider part of the toggle
|
30
|
+
* @csspart toggle-icon - The icon part of the toggle
|
31
|
+
*
|
32
|
+
* @slot - Default slot for adding label text.
|
28
33
|
*/
|
29
34
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
|
30
35
|
export default reactWrapper;
|
@@ -28,6 +28,11 @@ import { TAG_NAME } from '../../components/statictoggle/statictoggle.constants';
|
|
28
28
|
* @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state
|
29
29
|
* @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state
|
30
30
|
* @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state
|
31
|
+
*
|
32
|
+
* @csspart slider - The slider part of the toggle
|
33
|
+
* @csspart toggle-icon - The icon part of the toggle
|
34
|
+
*
|
35
|
+
* @slot - Default slot for adding label text.
|
31
36
|
*/
|
32
37
|
const reactWrapper = createComponent({
|
33
38
|
tagName: TAG_NAME,
|
@@ -50,7 +50,18 @@ import type { Events } from '../../components/textarea/textarea.types';
|
|
50
50
|
* @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
|
51
51
|
* @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
|
52
52
|
*
|
53
|
+
* @csspart label - The label element.
|
54
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
55
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
56
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
57
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
58
|
+
* @csspart help-text - The helper/validation text element.
|
59
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
60
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
61
|
+
* @csspart character-counter - The character counter element that is displayed when the `max-character-limit` property is set.
|
62
|
+
* @csspart textarea-footer - The container for the help text and character counter elements.
|
53
63
|
* @csspart textarea-container - The textarea container
|
64
|
+
* @csspart textarea - The textarea field element.
|
54
65
|
*/
|
55
66
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
|
56
67
|
onLimitExceeded: EventName<Events["onLimitExceededEvent"]>;
|
@@ -51,7 +51,18 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
|
|
51
51
|
* @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
|
52
52
|
* @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
|
53
53
|
*
|
54
|
+
* @csspart label - The label element.
|
55
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
56
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
57
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
58
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
59
|
+
* @csspart help-text - The helper/validation text element.
|
60
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
61
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
62
|
+
* @csspart character-counter - The character counter element that is displayed when the `max-character-limit` property is set.
|
63
|
+
* @csspart textarea-footer - The container for the help text and character counter elements.
|
54
64
|
* @csspart textarea-container - The textarea container
|
65
|
+
* @csspart textarea - The textarea field element.
|
55
66
|
*/
|
56
67
|
const reactWrapper = createComponent({
|
57
68
|
tagName: TAG_NAME,
|
@@ -30,6 +30,7 @@ import type { Events } from '../../components/toast/toast.types';
|
|
30
30
|
* @csspart footer - The container for the toast's footer, including toggle and action buttons.
|
31
31
|
* @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.
|
32
32
|
* @csspart toast-close-btn - The close button for the toast.
|
33
|
+
* @csspart has-footer-buttons - Applied to the footer when it contains buttons or a toggle button.
|
33
34
|
*
|
34
35
|
* @cssproperty --mdc-toast-background-color - Background color of the toast.
|
35
36
|
* @cssproperty --mdc-toast-border-color - Border color of the toast.
|
@@ -31,6 +31,7 @@ import { TAG_NAME } from '../../components/toast/toast.constants';
|
|
31
31
|
* @csspart footer - The container for the toast's footer, including toggle and action buttons.
|
32
32
|
* @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.
|
33
33
|
* @csspart toast-close-btn - The close button for the toast.
|
34
|
+
* @csspart has-footer-buttons - Applied to the footer when it contains buttons or a toggle button.
|
34
35
|
*
|
35
36
|
* @cssproperty --mdc-toast-background-color - Background color of the toast.
|
36
37
|
* @cssproperty --mdc-toast-border-color - Border color of the toast.
|
@@ -32,6 +32,17 @@ import type { Events } from '../../components/toggle/toggle.types';
|
|
32
32
|
* @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state
|
33
33
|
* @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state
|
34
34
|
* @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state
|
35
|
+
*
|
36
|
+
* @csspart label - The label element.
|
37
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
38
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
39
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
40
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
41
|
+
* @csspart help-text - The helper/validation text element.
|
42
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
43
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
44
|
+
* @csspart container - The container element that wraps the toggle input.
|
45
|
+
* @csspart toggle-input - The native checkbox input element styled as a toggle switch.
|
35
46
|
*/
|
36
47
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
|
37
48
|
onChange: EventName<Events["onChangeEvent"]>;
|
@@ -33,6 +33,17 @@ import { TAG_NAME } from '../../components/toggle/toggle.constants';
|
|
33
33
|
* @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state
|
34
34
|
* @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state
|
35
35
|
* @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state
|
36
|
+
*
|
37
|
+
* @csspart label - The label element.
|
38
|
+
* @csspart label-text - The container for the label and required indicator elements.
|
39
|
+
* @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
|
40
|
+
* @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
|
41
|
+
* @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
|
42
|
+
* @csspart help-text - The helper/validation text element.
|
43
|
+
* @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
|
44
|
+
* @csspart help-text-container - The container for the helper/validation icon and text elements.
|
45
|
+
* @csspart container - The container element that wraps the toggle input.
|
46
|
+
* @csspart toggle-input - The native checkbox input element styled as a toggle switch.
|
36
47
|
*/
|
37
48
|
const reactWrapper = createComponent({
|
38
49
|
tagName: TAG_NAME,
|