@momentum-design/components 0.25.0 → 0.25.2

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.
Files changed (15) hide show
  1. package/dist/browser/index.js +86 -76
  2. package/dist/browser/index.js.map +3 -3
  3. package/dist/components/formfieldgroup/formfieldgroup.component.d.ts +4 -13
  4. package/dist/components/formfieldgroup/formfieldgroup.component.js +14 -35
  5. package/dist/components/formfieldgroup/formfieldgroup.constants.d.ts +1 -5
  6. package/dist/components/formfieldgroup/formfieldgroup.constants.js +1 -5
  7. package/dist/components/formfieldgroup/formfieldgroup.styles.js +10 -2
  8. package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +1 -1
  9. package/dist/components/formfieldwrapper/formfieldwrapper.component.js +4 -1
  10. package/dist/components/formfieldwrapper/formfieldwrapper.constants.d.ts +1 -0
  11. package/dist/components/formfieldwrapper/formfieldwrapper.constants.js +1 -0
  12. package/dist/custom-elements.json +1592 -1419
  13. package/dist/react/index.d.ts +4 -4
  14. package/dist/react/index.js +4 -4
  15. package/package.json +1 -1
package/dist/custom-elements.json CHANGED
@@ -2,6 +2,250 @@
2
2
  "schemaVersion": "1.0.0",
3
3
  "readme": "",
4
4
  "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "components/avatar/avatar.component.js",
8
+ "declarations": [
9
+ {
10
+ "kind": "class",
11
+ "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
12
+ "name": "Avatar",
13
+ "cssProperties": [
14
+ {
15
+ "description": "Allows customization of the default background color.",
16
+ "name": "--mdc-avatar-default-background-color"
17
+ },
18
+ {
19
+ "description": "Allows customization of the default foreground color.",
20
+ "name": "--mdc-avatar-default-foreground-color"
21
+ },
22
+ {
23
+ "description": "Allows customization of the loading indicator background color.",
24
+ "name": "--mdc-avatar-loading-indicator-background-color"
25
+ },
26
+ {
27
+ "description": "Allows customization of the loading indicator foreground color.",
28
+ "name": "--mdc-avatar-loading-indicator-foreground-color"
29
+ },
30
+ {
31
+ "description": "Allows customization of the loading overlay background color.",
32
+ "name": "--mdc-avatar-loading-overlay-background-color"
33
+ }
34
+ ],
35
+ "members": [
36
+ {
37
+ "kind": "field",
38
+ "name": "src",
39
+ "type": {
40
+ "text": "string | undefined"
41
+ },
42
+ "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
43
+ "attribute": "src",
44
+ "inheritedFrom": {
45
+ "name": "AvatarComponentMixin",
46
+ "module": "utils/mixins/AvatarComponentMixin.js"
47
+ }
48
+ },
49
+ {
50
+ "kind": "field",
51
+ "name": "initials",
52
+ "type": {
53
+ "text": "string | undefined"
54
+ },
55
+ "description": "The initials to be displayed for the avatar.",
56
+ "attribute": "initials",
57
+ "inheritedFrom": {
58
+ "name": "AvatarComponentMixin",
59
+ "module": "utils/mixins/AvatarComponentMixin.js"
60
+ }
61
+ },
62
+ {
63
+ "kind": "field",
64
+ "name": "presence",
65
+ "type": {
66
+ "text": "PresenceType | undefined"
67
+ },
68
+ "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
69
+ "attribute": "presence",
70
+ "inheritedFrom": {
71
+ "name": "AvatarComponentMixin",
72
+ "module": "utils/mixins/AvatarComponentMixin.js"
73
+ }
74
+ },
75
+ {
76
+ "kind": "field",
77
+ "name": "size",
78
+ "type": {
79
+ "text": "AvatarSize"
80
+ },
81
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
82
+ "default": "32",
83
+ "attribute": "size",
84
+ "reflects": true,
85
+ "inheritedFrom": {
86
+ "name": "AvatarComponentMixin",
87
+ "module": "utils/mixins/AvatarComponentMixin.js"
88
+ }
89
+ },
90
+ {
91
+ "kind": "field",
92
+ "name": "counter",
93
+ "type": {
94
+ "text": "number | undefined"
95
+ },
96
+ "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
97
+ "attribute": "counter",
98
+ "inheritedFrom": {
99
+ "name": "AvatarComponentMixin",
100
+ "module": "utils/mixins/AvatarComponentMixin.js"
101
+ }
102
+ },
103
+ {
104
+ "kind": "field",
105
+ "name": "isTyping",
106
+ "type": {
107
+ "text": "boolean"
108
+ },
109
+ "default": "false",
110
+ "description": "Represents the typing indicator when the user is typing.",
111
+ "attribute": "is-typing",
112
+ "inheritedFrom": {
113
+ "name": "AvatarComponentMixin",
114
+ "module": "utils/mixins/AvatarComponentMixin.js"
115
+ }
116
+ },
117
+ {
118
+ "kind": "field",
119
+ "name": "iconName",
120
+ "type": {
121
+ "text": "IconNames | undefined"
122
+ },
123
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
124
+ "attribute": "icon-name",
125
+ "inheritedFrom": {
126
+ "name": "IconNameMixin",
127
+ "module": "utils/mixins/IconNameMixin.js"
128
+ }
129
+ }
130
+ ],
131
+ "mixins": [
132
+ {
133
+ "name": "AvatarComponentMixin",
134
+ "module": "/src/utils/mixins/AvatarComponentMixin"
135
+ },
136
+ {
137
+ "name": "IconNameMixin",
138
+ "module": "/src/utils/mixins/IconNameMixin"
139
+ }
140
+ ],
141
+ "superclass": {
142
+ "name": "Component",
143
+ "module": "/src/models"
144
+ },
145
+ "tagName": "mdc-avatar",
146
+ "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
147
+ "customElement": true,
148
+ "attributes": [
149
+ {
150
+ "name": "src",
151
+ "type": {
152
+ "text": "string | undefined"
153
+ },
154
+ "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
155
+ "fieldName": "src",
156
+ "inheritedFrom": {
157
+ "name": "AvatarComponentMixin",
158
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
159
+ }
160
+ },
161
+ {
162
+ "name": "initials",
163
+ "type": {
164
+ "text": "string | undefined"
165
+ },
166
+ "description": "The initials to be displayed for the avatar.",
167
+ "fieldName": "initials",
168
+ "inheritedFrom": {
169
+ "name": "AvatarComponentMixin",
170
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
171
+ }
172
+ },
173
+ {
174
+ "name": "presence",
175
+ "type": {
176
+ "text": "PresenceType | undefined"
177
+ },
178
+ "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
179
+ "fieldName": "presence",
180
+ "inheritedFrom": {
181
+ "name": "AvatarComponentMixin",
182
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
183
+ }
184
+ },
185
+ {
186
+ "name": "size",
187
+ "type": {
188
+ "text": "AvatarSize"
189
+ },
190
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
191
+ "default": "32",
192
+ "fieldName": "size",
193
+ "inheritedFrom": {
194
+ "name": "AvatarComponentMixin",
195
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
196
+ }
197
+ },
198
+ {
199
+ "name": "counter",
200
+ "type": {
201
+ "text": "number | undefined"
202
+ },
203
+ "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
204
+ "fieldName": "counter",
205
+ "inheritedFrom": {
206
+ "name": "AvatarComponentMixin",
207
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
208
+ }
209
+ },
210
+ {
211
+ "name": "is-typing",
212
+ "type": {
213
+ "text": "boolean"
214
+ },
215
+ "default": "false",
216
+ "description": "Represents the typing indicator when the user is typing.",
217
+ "fieldName": "isTyping",
218
+ "inheritedFrom": {
219
+ "name": "AvatarComponentMixin",
220
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
221
+ }
222
+ },
223
+ {
224
+ "name": "icon-name",
225
+ "type": {
226
+ "text": "IconNames | undefined"
227
+ },
228
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
229
+ "fieldName": "iconName",
230
+ "inheritedFrom": {
231
+ "name": "IconNameMixin",
232
+ "module": "src/utils/mixins/IconNameMixin.ts"
233
+ }
234
+ }
235
+ ]
236
+ }
237
+ ],
238
+ "exports": [
239
+ {
240
+ "kind": "js",
241
+ "name": "default",
242
+ "declaration": {
243
+ "name": "Avatar",
244
+ "module": "components/avatar/avatar.component.js"
245
+ }
246
+ }
247
+ ]
248
+ },
5
249
  {
6
250
  "kind": "javascript-module",
7
251
  "path": "components/avatarbutton/avatarbutton.component.js",
@@ -877,260 +1121,16 @@
877
1121
  },
878
1122
  {
879
1123
  "kind": "javascript-module",
880
- "path": "components/avatar/avatar.component.js",
1124
+ "path": "components/bullet/bullet.component.js",
881
1125
  "declarations": [
882
1126
  {
883
1127
  "kind": "class",
884
- "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
885
- "name": "Avatar",
1128
+ "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
1129
+ "name": "Bullet",
886
1130
  "cssProperties": [
887
1131
  {
888
- "description": "Allows customization of the default background color.",
889
- "name": "--mdc-avatar-default-background-color"
890
- },
891
- {
892
- "description": "Allows customization of the default foreground color.",
893
- "name": "--mdc-avatar-default-foreground-color"
894
- },
895
- {
896
- "description": "Allows customization of the loading indicator background color.",
897
- "name": "--mdc-avatar-loading-indicator-background-color"
898
- },
899
- {
900
- "description": "Allows customization of the loading indicator foreground color.",
901
- "name": "--mdc-avatar-loading-indicator-foreground-color"
902
- },
903
- {
904
- "description": "Allows customization of the loading overlay background color.",
905
- "name": "--mdc-avatar-loading-overlay-background-color"
906
- }
907
- ],
908
- "members": [
909
- {
910
- "kind": "field",
911
- "name": "src",
912
- "type": {
913
- "text": "string | undefined"
914
- },
915
- "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
916
- "attribute": "src",
917
- "inheritedFrom": {
918
- "name": "AvatarComponentMixin",
919
- "module": "utils/mixins/AvatarComponentMixin.js"
920
- }
921
- },
922
- {
923
- "kind": "field",
924
- "name": "initials",
925
- "type": {
926
- "text": "string | undefined"
927
- },
928
- "description": "The initials to be displayed for the avatar.",
929
- "attribute": "initials",
930
- "inheritedFrom": {
931
- "name": "AvatarComponentMixin",
932
- "module": "utils/mixins/AvatarComponentMixin.js"
933
- }
934
- },
935
- {
936
- "kind": "field",
937
- "name": "presence",
938
- "type": {
939
- "text": "PresenceType | undefined"
940
- },
941
- "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
942
- "attribute": "presence",
943
- "inheritedFrom": {
944
- "name": "AvatarComponentMixin",
945
- "module": "utils/mixins/AvatarComponentMixin.js"
946
- }
947
- },
948
- {
949
- "kind": "field",
950
- "name": "size",
951
- "type": {
952
- "text": "AvatarSize"
953
- },
954
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
955
- "default": "32",
956
- "attribute": "size",
957
- "reflects": true,
958
- "inheritedFrom": {
959
- "name": "AvatarComponentMixin",
960
- "module": "utils/mixins/AvatarComponentMixin.js"
961
- }
962
- },
963
- {
964
- "kind": "field",
965
- "name": "counter",
966
- "type": {
967
- "text": "number | undefined"
968
- },
969
- "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
970
- "attribute": "counter",
971
- "inheritedFrom": {
972
- "name": "AvatarComponentMixin",
973
- "module": "utils/mixins/AvatarComponentMixin.js"
974
- }
975
- },
976
- {
977
- "kind": "field",
978
- "name": "isTyping",
979
- "type": {
980
- "text": "boolean"
981
- },
982
- "default": "false",
983
- "description": "Represents the typing indicator when the user is typing.",
984
- "attribute": "is-typing",
985
- "inheritedFrom": {
986
- "name": "AvatarComponentMixin",
987
- "module": "utils/mixins/AvatarComponentMixin.js"
988
- }
989
- },
990
- {
991
- "kind": "field",
992
- "name": "iconName",
993
- "type": {
994
- "text": "IconNames | undefined"
995
- },
996
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
997
- "attribute": "icon-name",
998
- "inheritedFrom": {
999
- "name": "IconNameMixin",
1000
- "module": "utils/mixins/IconNameMixin.js"
1001
- }
1002
- }
1003
- ],
1004
- "mixins": [
1005
- {
1006
- "name": "AvatarComponentMixin",
1007
- "module": "/src/utils/mixins/AvatarComponentMixin"
1008
- },
1009
- {
1010
- "name": "IconNameMixin",
1011
- "module": "/src/utils/mixins/IconNameMixin"
1012
- }
1013
- ],
1014
- "superclass": {
1015
- "name": "Component",
1016
- "module": "/src/models"
1017
- },
1018
- "tagName": "mdc-avatar",
1019
- "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
1020
- "customElement": true,
1021
- "attributes": [
1022
- {
1023
- "name": "src",
1024
- "type": {
1025
- "text": "string | undefined"
1026
- },
1027
- "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
1028
- "fieldName": "src",
1029
- "inheritedFrom": {
1030
- "name": "AvatarComponentMixin",
1031
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1032
- }
1033
- },
1034
- {
1035
- "name": "initials",
1036
- "type": {
1037
- "text": "string | undefined"
1038
- },
1039
- "description": "The initials to be displayed for the avatar.",
1040
- "fieldName": "initials",
1041
- "inheritedFrom": {
1042
- "name": "AvatarComponentMixin",
1043
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1044
- }
1045
- },
1046
- {
1047
- "name": "presence",
1048
- "type": {
1049
- "text": "PresenceType | undefined"
1050
- },
1051
- "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
1052
- "fieldName": "presence",
1053
- "inheritedFrom": {
1054
- "name": "AvatarComponentMixin",
1055
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1056
- }
1057
- },
1058
- {
1059
- "name": "size",
1060
- "type": {
1061
- "text": "AvatarSize"
1062
- },
1063
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
1064
- "default": "32",
1065
- "fieldName": "size",
1066
- "inheritedFrom": {
1067
- "name": "AvatarComponentMixin",
1068
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1069
- }
1070
- },
1071
- {
1072
- "name": "counter",
1073
- "type": {
1074
- "text": "number | undefined"
1075
- },
1076
- "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
1077
- "fieldName": "counter",
1078
- "inheritedFrom": {
1079
- "name": "AvatarComponentMixin",
1080
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1081
- }
1082
- },
1083
- {
1084
- "name": "is-typing",
1085
- "type": {
1086
- "text": "boolean"
1087
- },
1088
- "default": "false",
1089
- "description": "Represents the typing indicator when the user is typing.",
1090
- "fieldName": "isTyping",
1091
- "inheritedFrom": {
1092
- "name": "AvatarComponentMixin",
1093
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
1094
- }
1095
- },
1096
- {
1097
- "name": "icon-name",
1098
- "type": {
1099
- "text": "IconNames | undefined"
1100
- },
1101
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
1102
- "fieldName": "iconName",
1103
- "inheritedFrom": {
1104
- "name": "IconNameMixin",
1105
- "module": "src/utils/mixins/IconNameMixin.ts"
1106
- }
1107
- }
1108
- ]
1109
- }
1110
- ],
1111
- "exports": [
1112
- {
1113
- "kind": "js",
1114
- "name": "default",
1115
- "declaration": {
1116
- "name": "Avatar",
1117
- "module": "components/avatar/avatar.component.js"
1118
- }
1119
- }
1120
- ]
1121
- },
1122
- {
1123
- "kind": "javascript-module",
1124
- "path": "components/bullet/bullet.component.js",
1125
- "declarations": [
1126
- {
1127
- "kind": "class",
1128
- "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
1129
- "name": "Bullet",
1130
- "cssProperties": [
1131
- {
1132
- "description": "background color of the bullet",
1133
- "name": "--mdc-bullet-background-color"
1132
+ "description": "background color of the bullet",
1133
+ "name": "--mdc-bullet-background-color"
1134
1134
  },
1135
1135
  {
1136
1136
  "description": "small size value of the bullet",
@@ -2002,20 +2002,250 @@
2002
2002
  },
2003
2003
  {
2004
2004
  "kind": "javascript-module",
2005
- "path": "components/checkbox/checkbox.component.js",
2005
+ "path": "components/divider/divider.component.js",
2006
2006
  "declarations": [
2007
2007
  {
2008
2008
  "kind": "class",
2009
- "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.\n\nTo create a group of checkboxes, use the FormFieldGroup component.",
2010
- "name": "Checkbox",
2009
+ "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n - `aria-label` should be passed to the `mdc-button`.\n - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
2010
+ "name": "Divider",
2011
2011
  "cssProperties": [
2012
2012
  {
2013
- "description": "Allows customization of the background color on hover.",
2014
- "name": "--mdc-checkbox-background-color-hover"
2013
+ "description": "background color of the divider",
2014
+ "name": "--mdc-divider-background-color"
2015
2015
  },
2016
2016
  {
2017
- "description": "Border color in high contrast.",
2018
- "name": "--mdc-checkbox-border-color"
2017
+ "description": "width of the divider",
2018
+ "name": "--mdc-divider-width"
2019
+ },
2020
+ {
2021
+ "description": "gradient of the horizontal divider",
2022
+ "name": "--mdc-divider-horizontal-gradient"
2023
+ },
2024
+ {
2025
+ "description": "gradient of the vertical divider",
2026
+ "name": "--mdc-divider-vertical-gradient"
2027
+ },
2028
+ {
2029
+ "description": "font size of label in the text divider",
2030
+ "name": "--mdc-divider-text-size"
2031
+ },
2032
+ {
2033
+ "description": "font color of label in the text divider",
2034
+ "name": "--mdc-divider-text-color"
2035
+ },
2036
+ {
2037
+ "description": "left and right margin of label in the text divider",
2038
+ "name": "--mdc-divider-text-margin"
2039
+ },
2040
+ {
2041
+ "description": "line height of label in the text divider",
2042
+ "name": "--mdc-divider-text-line-height"
2043
+ },
2044
+ {
2045
+ "description": "border radius of the grabber button",
2046
+ "name": "--mdc-divider-grabber-button-border-radius"
2047
+ }
2048
+ ],
2049
+ "members": [
2050
+ {
2051
+ "kind": "field",
2052
+ "name": "orientation",
2053
+ "type": {
2054
+ "text": "DividerOrientation"
2055
+ },
2056
+ "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
2057
+ "default": "horizontal",
2058
+ "attribute": "orientation",
2059
+ "reflects": true
2060
+ },
2061
+ {
2062
+ "kind": "field",
2063
+ "name": "variant",
2064
+ "type": {
2065
+ "text": "DividerVariant"
2066
+ },
2067
+ "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
2068
+ "default": "solid",
2069
+ "attribute": "variant",
2070
+ "reflects": true
2071
+ },
2072
+ {
2073
+ "kind": "field",
2074
+ "name": "arrowDirection",
2075
+ "type": {
2076
+ "text": "Directions"
2077
+ },
2078
+ "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2079
+ "default": "'negative'",
2080
+ "attribute": "arrow-direction",
2081
+ "reflects": true
2082
+ },
2083
+ {
2084
+ "kind": "field",
2085
+ "name": "buttonPosition",
2086
+ "type": {
2087
+ "text": "Directions"
2088
+ },
2089
+ "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2090
+ "default": "'negative'",
2091
+ "attribute": "button-position",
2092
+ "reflects": true
2093
+ },
2094
+ {
2095
+ "kind": "method",
2096
+ "name": "setVariant",
2097
+ "privacy": "private",
2098
+ "parameters": [
2099
+ {
2100
+ "name": "variant",
2101
+ "type": {
2102
+ "text": "DividerVariant"
2103
+ },
2104
+ "description": "The variant to set."
2105
+ }
2106
+ ],
2107
+ "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
2108
+ },
2109
+ {
2110
+ "kind": "method",
2111
+ "name": "setOrientation",
2112
+ "privacy": "private",
2113
+ "parameters": [
2114
+ {
2115
+ "name": "orientation",
2116
+ "type": {
2117
+ "text": "DividerOrientation"
2118
+ },
2119
+ "description": "The orientation to set."
2120
+ }
2121
+ ],
2122
+ "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
2123
+ },
2124
+ {
2125
+ "kind": "method",
2126
+ "name": "ensureValidDirections",
2127
+ "privacy": "private",
2128
+ "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
2129
+ "parameters": [
2130
+ {
2131
+ "description": "The buttonPosition to set.",
2132
+ "name": "buttonPosition"
2133
+ },
2134
+ {
2135
+ "description": "The arrowDirection to set.",
2136
+ "name": "arrowDirection"
2137
+ }
2138
+ ]
2139
+ },
2140
+ {
2141
+ "kind": "method",
2142
+ "name": "setGrabberButton",
2143
+ "privacy": "private",
2144
+ "return": {
2145
+ "type": {
2146
+ "text": "void"
2147
+ }
2148
+ },
2149
+ "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
2150
+ },
2151
+ {
2152
+ "kind": "method",
2153
+ "name": "getArrowIcon",
2154
+ "privacy": "private",
2155
+ "return": {
2156
+ "type": {
2157
+ "text": ""
2158
+ }
2159
+ },
2160
+ "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
2161
+ },
2162
+ {
2163
+ "kind": "method",
2164
+ "name": "inferDividerType",
2165
+ "privacy": "private",
2166
+ "description": "Infers the type of divider based on the kind of slot present.",
2167
+ "parameters": [
2168
+ {
2169
+ "description": "default slot of divider",
2170
+ "name": "slot"
2171
+ }
2172
+ ]
2173
+ }
2174
+ ],
2175
+ "attributes": [
2176
+ {
2177
+ "name": "orientation",
2178
+ "type": {
2179
+ "text": "DividerOrientation"
2180
+ },
2181
+ "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
2182
+ "default": "horizontal",
2183
+ "fieldName": "orientation"
2184
+ },
2185
+ {
2186
+ "name": "variant",
2187
+ "type": {
2188
+ "text": "DividerVariant"
2189
+ },
2190
+ "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
2191
+ "default": "solid",
2192
+ "fieldName": "variant"
2193
+ },
2194
+ {
2195
+ "name": "arrow-direction",
2196
+ "type": {
2197
+ "text": "Directions"
2198
+ },
2199
+ "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2200
+ "default": "'negative'",
2201
+ "fieldName": "arrowDirection"
2202
+ },
2203
+ {
2204
+ "name": "button-position",
2205
+ "type": {
2206
+ "text": "Directions"
2207
+ },
2208
+ "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2209
+ "default": "'negative'",
2210
+ "fieldName": "buttonPosition"
2211
+ }
2212
+ ],
2213
+ "superclass": {
2214
+ "name": "Component",
2215
+ "module": "/src/models"
2216
+ },
2217
+ "tagName": "mdc-divider",
2218
+ "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n * - **Primary**: A simple horizontal or vertical divider.\n * - **Text**: A horizontal divider with a text label in the center.\n * - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n * - `aria-label` should be passed to the `mdc-button`.\n * - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n * the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
2219
+ "customElement": true
2220
+ }
2221
+ ],
2222
+ "exports": [
2223
+ {
2224
+ "kind": "js",
2225
+ "name": "default",
2226
+ "declaration": {
2227
+ "name": "Divider",
2228
+ "module": "components/divider/divider.component.js"
2229
+ }
2230
+ }
2231
+ ]
2232
+ },
2233
+ {
2234
+ "kind": "javascript-module",
2235
+ "path": "components/checkbox/checkbox.component.js",
2236
+ "declarations": [
2237
+ {
2238
+ "kind": "class",
2239
+ "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.\n\nTo create a group of checkboxes, use the FormFieldGroup component.",
2240
+ "name": "Checkbox",
2241
+ "cssProperties": [
2242
+ {
2243
+ "description": "Allows customization of the background color on hover.",
2244
+ "name": "--mdc-checkbox-background-color-hover"
2245
+ },
2246
+ {
2247
+ "description": "Border color in high contrast.",
2248
+ "name": "--mdc-checkbox-border-color"
2019
2249
  },
2020
2250
  {
2021
2251
  "description": "Background color for a selected checkbox.",
@@ -2541,366 +2771,309 @@
2541
2771
  },
2542
2772
  {
2543
2773
  "kind": "javascript-module",
2544
- "path": "components/divider/divider.component.js",
2774
+ "path": "components/formfieldgroup/formfieldgroup.component.js",
2545
2775
  "declarations": [
2546
2776
  {
2547
2777
  "kind": "class",
2548
- "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n - `aria-label` should be passed to the `mdc-button`.\n - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
2549
- "name": "Divider",
2550
- "cssProperties": [
2778
+ "description": "`mdc-formfieldgroup` component, groups the form field components together.\nAll passed in children will have a gap of 12px (0.75rem) each applied.\n\nThis component is specifically for creating a `checkbox` group and a `toggle` group component.\nFor the radiogroup use the RadioGroup component instead.\n\nThe header text and description text are displayed above the items with accessible labels.<br/>\nThe consumer has to provide atleast the header-text or the aria-label,\nlike one of them <b>has</b> to be passed in always, otherwise its not accessible.\n\nThe role will be set to `group`.\nThe aria-label will be set with the data-aria-label property.\nThe aria-labelledby will be set with the header id which contains the header text information.\nThe aria-describedby will be set with the description id which contains the description text information.",
2779
+ "name": "FormfieldGroup",
2780
+ "slots": [
2551
2781
  {
2552
- "description": "background color of the divider",
2553
- "name": "--mdc-divider-background-color"
2782
+ "description": "This is a default slot for checkbox or toggle components.",
2783
+ "name": "default"
2554
2784
  },
2555
2785
  {
2556
- "description": "width of the divider",
2557
- "name": "--mdc-divider-width"
2558
- },
2786
+ "description": "slot to add the label info icon",
2787
+ "name": "label-info",
2788
+ "inheritedFrom": {
2789
+ "name": "FormfieldWrapper",
2790
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
2791
+ }
2792
+ }
2793
+ ],
2794
+ "members": [
2559
2795
  {
2560
- "description": "gradient of the horizontal divider",
2561
- "name": "--mdc-divider-horizontal-gradient"
2562
- },
2563
- {
2564
- "description": "gradient of the vertical divider",
2565
- "name": "--mdc-divider-vertical-gradient"
2566
- },
2567
- {
2568
- "description": "font size of label in the text divider",
2569
- "name": "--mdc-divider-text-size"
2570
- },
2571
- {
2572
- "description": "font color of label in the text divider",
2573
- "name": "--mdc-divider-text-color"
2574
- },
2575
- {
2576
- "description": "left and right margin of label in the text divider",
2577
- "name": "--mdc-divider-text-margin"
2796
+ "kind": "field",
2797
+ "name": "helpTextType",
2798
+ "type": {
2799
+ "text": "ValidationType"
2800
+ },
2801
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
2802
+ "attribute": "help-text-type",
2803
+ "reflects": true,
2804
+ "default": "undefined as unknown",
2805
+ "inheritedFrom": {
2806
+ "name": "FormfieldWrapper",
2807
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2808
+ }
2578
2809
  },
2579
2810
  {
2580
- "description": "line height of label in the text divider",
2581
- "name": "--mdc-divider-text-line-height"
2811
+ "kind": "field",
2812
+ "name": "dataAriaLabel",
2813
+ "type": {
2814
+ "text": "string | null"
2815
+ },
2816
+ "default": "null",
2817
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
2818
+ "attribute": "data-aria-label",
2819
+ "reflects": true,
2820
+ "inheritedFrom": {
2821
+ "name": "DataAriaLabelMixin",
2822
+ "module": "utils/mixins/DataAriaLabelMixin.js"
2823
+ }
2582
2824
  },
2583
- {
2584
- "description": "border radius of the grabber button",
2585
- "name": "--mdc-divider-grabber-button-border-radius"
2586
- }
2587
- ],
2588
- "members": [
2589
2825
  {
2590
2826
  "kind": "field",
2591
- "name": "orientation",
2827
+ "name": "disabled",
2592
2828
  "type": {
2593
- "text": "DividerOrientation"
2829
+ "text": "boolean"
2594
2830
  },
2595
- "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
2596
- "default": "horizontal",
2597
- "attribute": "orientation",
2598
- "reflects": true
2831
+ "default": "false",
2832
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2833
+ "attribute": "disabled",
2834
+ "reflects": true,
2835
+ "inheritedFrom": {
2836
+ "name": "DisabledMixin",
2837
+ "module": "utils/mixins/DisabledMixin.js"
2838
+ }
2599
2839
  },
2600
2840
  {
2601
2841
  "kind": "field",
2602
- "name": "variant",
2842
+ "name": "label",
2603
2843
  "type": {
2604
- "text": "DividerVariant"
2844
+ "text": "string | undefined"
2605
2845
  },
2606
- "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
2607
- "default": "solid",
2608
- "attribute": "variant",
2609
- "reflects": true
2846
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
2847
+ "attribute": "label",
2848
+ "reflects": true,
2849
+ "inheritedFrom": {
2850
+ "name": "FormfieldWrapper",
2851
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2852
+ }
2610
2853
  },
2611
2854
  {
2612
2855
  "kind": "field",
2613
- "name": "arrowDirection",
2856
+ "name": "requiredLabel",
2614
2857
  "type": {
2615
- "text": "Directions"
2858
+ "text": "string | undefined"
2616
2859
  },
2617
- "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2618
- "default": "'negative'",
2619
- "attribute": "arrow-direction",
2620
- "reflects": true
2860
+ "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
2861
+ "attribute": "required-label",
2862
+ "reflects": true,
2863
+ "inheritedFrom": {
2864
+ "name": "FormfieldWrapper",
2865
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2866
+ }
2621
2867
  },
2622
2868
  {
2623
2869
  "kind": "field",
2624
- "name": "buttonPosition",
2870
+ "name": "id",
2871
+ "default": "`mdc-input-${uuidv4()}`",
2872
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
2873
+ "attribute": "id",
2874
+ "inheritedFrom": {
2875
+ "name": "FormfieldWrapper",
2876
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2877
+ }
2878
+ },
2879
+ {
2880
+ "kind": "field",
2881
+ "name": "helpText",
2625
2882
  "type": {
2626
- "text": "Directions"
2883
+ "text": "string | undefined"
2627
2884
  },
2628
- "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2629
- "default": "'negative'",
2630
- "attribute": "button-position",
2631
- "reflects": true
2885
+ "description": "The help text that is displayed below the input field.",
2886
+ "attribute": "help-text",
2887
+ "reflects": true,
2888
+ "inheritedFrom": {
2889
+ "name": "FormfieldWrapper",
2890
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2891
+ }
2632
2892
  },
2633
2893
  {
2634
2894
  "kind": "method",
2635
- "name": "setVariant",
2636
- "privacy": "private",
2637
- "parameters": [
2638
- {
2639
- "name": "variant",
2640
- "type": {
2641
- "text": "DividerVariant"
2642
- },
2643
- "description": "The variant to set."
2895
+ "name": "renderLabelElement",
2896
+ "privacy": "protected",
2897
+ "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
2898
+ "return": {
2899
+ "type": {
2900
+ "text": ""
2644
2901
  }
2645
- ],
2646
- "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
2902
+ },
2903
+ "inheritedFrom": {
2904
+ "name": "FormfieldWrapper",
2905
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2906
+ }
2647
2907
  },
2648
2908
  {
2649
2909
  "kind": "method",
2650
- "name": "setOrientation",
2651
- "privacy": "private",
2652
- "parameters": [
2653
- {
2654
- "name": "orientation",
2655
- "type": {
2656
- "text": "DividerOrientation"
2657
- },
2658
- "description": "The orientation to set."
2659
- }
2660
- ],
2661
- "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
2910
+ "name": "renderRequiredLabel",
2911
+ "privacy": "protected",
2912
+ "inheritedFrom": {
2913
+ "name": "FormfieldWrapper",
2914
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2915
+ }
2662
2916
  },
2663
2917
  {
2664
2918
  "kind": "method",
2665
- "name": "ensureValidDirections",
2666
- "privacy": "private",
2667
- "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
2668
- "parameters": [
2669
- {
2670
- "description": "The buttonPosition to set.",
2671
- "name": "buttonPosition"
2672
- },
2673
- {
2674
- "description": "The arrowDirection to set.",
2675
- "name": "arrowDirection"
2919
+ "name": "renderHelpTextIcon",
2920
+ "privacy": "protected",
2921
+ "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
2922
+ "return": {
2923
+ "type": {
2924
+ "text": ""
2676
2925
  }
2677
- ]
2926
+ },
2927
+ "inheritedFrom": {
2928
+ "name": "FormfieldWrapper",
2929
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2930
+ }
2678
2931
  },
2679
2932
  {
2680
2933
  "kind": "method",
2681
- "name": "setGrabberButton",
2682
- "privacy": "private",
2934
+ "name": "renderHelpText",
2935
+ "privacy": "protected",
2936
+ "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
2683
2937
  "return": {
2684
2938
  "type": {
2685
- "text": "void"
2939
+ "text": ""
2686
2940
  }
2687
2941
  },
2688
- "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
2942
+ "inheritedFrom": {
2943
+ "name": "FormfieldWrapper",
2944
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2945
+ }
2689
2946
  },
2690
2947
  {
2691
2948
  "kind": "method",
2692
- "name": "getArrowIcon",
2693
- "privacy": "private",
2949
+ "name": "renderLabel",
2950
+ "privacy": "protected",
2951
+ "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
2694
2952
  "return": {
2695
2953
  "type": {
2696
2954
  "text": ""
2697
2955
  }
2698
2956
  },
2699
- "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
2957
+ "inheritedFrom": {
2958
+ "name": "FormfieldWrapper",
2959
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2960
+ }
2700
2961
  },
2701
2962
  {
2702
2963
  "kind": "method",
2703
- "name": "inferDividerType",
2704
- "privacy": "private",
2705
- "description": "Infers the type of divider based on the kind of slot present.",
2706
- "parameters": [
2707
- {
2708
- "description": "default slot of divider",
2709
- "name": "slot"
2964
+ "name": "renderHelperText",
2965
+ "privacy": "protected",
2966
+ "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
2967
+ "return": {
2968
+ "type": {
2969
+ "text": ""
2710
2970
  }
2711
- ]
2971
+ },
2972
+ "inheritedFrom": {
2973
+ "name": "FormfieldWrapper",
2974
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2975
+ }
2976
+ }
2977
+ ],
2978
+ "mixins": [
2979
+ {
2980
+ "name": "DataAriaLabelMixin",
2981
+ "module": "/src/utils/mixins/DataAriaLabelMixin"
2712
2982
  }
2713
2983
  ],
2984
+ "superclass": {
2985
+ "name": "FormfieldWrapper",
2986
+ "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
2987
+ },
2988
+ "tagName": "mdc-formfieldgroup",
2989
+ "jsDoc": "/**\n * `mdc-formfieldgroup` component, groups the form field components together.\n * All passed in children will have a gap of 12px (0.75rem) each applied.\n *\n * This component is specifically for creating a `checkbox` group and a `toggle` group component.\n * For the radiogroup use the RadioGroup component instead.\n *\n * The header text and description text are displayed above the items with accessible labels.<br/>\n * The consumer has to provide atleast the header-text or the aria-label,\n * like one of them <b>has</b> to be passed in always, otherwise its not accessible.\n *\n * The role will be set to `group`.\n * The aria-label will be set with the data-aria-label property.\n * The aria-labelledby will be set with the header id which contains the header text information.\n * The aria-describedby will be set with the description id which contains the description text information.\n *\n * @tagname mdc-formfieldgroup\n *\n * @slot default - This is a default slot for checkbox or toggle components.\n */",
2990
+ "customElement": true,
2714
2991
  "attributes": [
2715
2992
  {
2716
- "name": "orientation",
2993
+ "name": "data-aria-label",
2717
2994
  "type": {
2718
- "text": "DividerOrientation"
2995
+ "text": "string | null"
2719
2996
  },
2720
- "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
2721
- "default": "horizontal",
2722
- "fieldName": "orientation"
2997
+ "default": "null",
2998
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
2999
+ "fieldName": "dataAriaLabel",
3000
+ "inheritedFrom": {
3001
+ "name": "DataAriaLabelMixin",
3002
+ "module": "src/utils/mixins/DataAriaLabelMixin.ts"
3003
+ }
2723
3004
  },
2724
3005
  {
2725
- "name": "variant",
3006
+ "name": "disabled",
2726
3007
  "type": {
2727
- "text": "DividerVariant"
2728
- },
2729
- "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
2730
- "default": "solid",
2731
- "fieldName": "variant"
2732
- },
2733
- {
2734
- "name": "arrow-direction",
2735
- "type": {
2736
- "text": "Directions"
3008
+ "text": "boolean"
2737
3009
  },
2738
- "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2739
- "default": "'negative'",
2740
- "fieldName": "arrowDirection"
3010
+ "default": "false",
3011
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3012
+ "fieldName": "disabled",
3013
+ "inheritedFrom": {
3014
+ "name": "DisabledMixin",
3015
+ "module": "src/utils/mixins/DisabledMixin.ts"
3016
+ }
2741
3017
  },
2742
3018
  {
2743
- "name": "button-position",
2744
- "type": {
2745
- "text": "Directions"
2746
- },
2747
- "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2748
- "default": "'negative'",
2749
- "fieldName": "buttonPosition"
2750
- }
2751
- ],
2752
- "superclass": {
2753
- "name": "Component",
2754
- "module": "/src/models"
2755
- },
2756
- "tagName": "mdc-divider",
2757
- "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n * - **Primary**: A simple horizontal or vertical divider.\n * - **Text**: A horizontal divider with a text label in the center.\n * - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n * - `aria-label` should be passed to the `mdc-button`.\n * - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n * the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
2758
- "customElement": true
2759
- }
2760
- ],
2761
- "exports": [
2762
- {
2763
- "kind": "js",
2764
- "name": "default",
2765
- "declaration": {
2766
- "name": "Divider",
2767
- "module": "components/divider/divider.component.js"
2768
- }
2769
- }
2770
- ]
2771
- },
2772
- {
2773
- "kind": "javascript-module",
2774
- "path": "components/formfieldgroup/formfieldgroup.component.js",
2775
- "declarations": [
2776
- {
2777
- "kind": "class",
2778
- "description": "`mdc-formfieldgroup` component, groups the form field components together.\nAll passed in children will have a gap of 12px (0.75rem) each applied.\n\nThis component is specifically for creating a `checkbox` group and a `toggle` group component.\nFor the radiogroup use the RadioGroup component instead.\n\nThe header text and description text are displayed above the items with accessible labels.<br/>\nThe consumer has to provide atleast the header-text or the aria-label,\nlike one of them <b>has</b> to be passed in always, otherwise its not accessible.\n\nThe role will be set to `group`.\nThe aria-label will be set with the data-aria-label property.\nThe aria-labelledby will be set with the header id which contains the header text information.\nThe aria-describedby will be set with the description id which contains the description text information.",
2779
- "name": "FormfieldGroup",
2780
- "slots": [
2781
- {
2782
- "description": "This is a default slot for checkbox or toggle components.",
2783
- "name": "default"
2784
- }
2785
- ],
2786
- "members": [
2787
- {
2788
- "kind": "field",
2789
- "name": "headerText",
3019
+ "name": "label",
2790
3020
  "type": {
2791
3021
  "text": "string | undefined"
2792
3022
  },
2793
- "description": "The header text of the group.",
2794
- "attribute": "header-text",
2795
- "reflects": true
3023
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
3024
+ "fieldName": "label",
3025
+ "inheritedFrom": {
3026
+ "name": "FormfieldWrapper",
3027
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3028
+ }
2796
3029
  },
2797
3030
  {
2798
- "kind": "field",
2799
- "name": "descriptionText",
3031
+ "name": "required-label",
2800
3032
  "type": {
2801
3033
  "text": "string | undefined"
2802
3034
  },
2803
- "description": "The description of the group.",
2804
- "attribute": "description-text",
2805
- "reflects": true
3035
+ "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
3036
+ "fieldName": "requiredLabel",
3037
+ "inheritedFrom": {
3038
+ "name": "FormfieldWrapper",
3039
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3040
+ }
2806
3041
  },
2807
3042
  {
2808
- "kind": "method",
2809
- "name": "renderText",
2810
- "privacy": "private",
2811
- "return": {
2812
- "type": {
2813
- "text": "TemplateResult | typeof nothing"
2814
- }
2815
- },
2816
- "parameters": [
2817
- {
2818
- "name": "type",
2819
- "type": {
2820
- "text": "TextType"
2821
- }
2822
- },
2823
- {
2824
- "name": "id",
2825
- "type": {
2826
- "text": "string"
2827
- }
2828
- },
2829
- {
2830
- "name": "cssPart",
2831
- "type": {
2832
- "text": "string"
2833
- }
2834
- },
2835
- {
2836
- "name": "value",
2837
- "optional": true,
2838
- "type": {
2839
- "text": "string"
2840
- }
2841
- }
2842
- ]
3043
+ "name": "id",
3044
+ "default": "`mdc-input-${uuidv4()}`",
3045
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
3046
+ "fieldName": "id",
3047
+ "inheritedFrom": {
3048
+ "name": "FormfieldWrapper",
3049
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
3050
+ }
2843
3051
  },
2844
3052
  {
2845
- "kind": "field",
2846
- "name": "dataAriaLabel",
3053
+ "name": "help-text-type",
2847
3054
  "type": {
2848
- "text": "string | null"
3055
+ "text": "ValidationType"
2849
3056
  },
2850
- "default": "null",
2851
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
2852
- "attribute": "data-aria-label",
2853
- "reflects": true,
3057
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
3058
+ "fieldName": "helpTextType",
2854
3059
  "inheritedFrom": {
2855
- "name": "DataAriaLabelMixin",
2856
- "module": "utils/mixins/DataAriaLabelMixin.js"
3060
+ "name": "FormfieldWrapper",
3061
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
2857
3062
  }
2858
- }
2859
- ],
2860
- "attributes": [
2861
- {
2862
- "name": "header-text",
2863
- "type": {
2864
- "text": "string | undefined"
2865
- },
2866
- "description": "The header text of the group.",
2867
- "fieldName": "headerText"
2868
3063
  },
2869
3064
  {
2870
- "name": "description-text",
3065
+ "name": "help-text",
2871
3066
  "type": {
2872
3067
  "text": "string | undefined"
2873
3068
  },
2874
- "description": "The description of the group.",
2875
- "fieldName": "descriptionText"
2876
- },
2877
- {
2878
- "name": "data-aria-label",
2879
- "type": {
2880
- "text": "string | null"
2881
- },
2882
- "default": "null",
2883
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
2884
- "fieldName": "dataAriaLabel",
3069
+ "description": "The help text that is displayed below the input field.",
3070
+ "fieldName": "helpText",
2885
3071
  "inheritedFrom": {
2886
- "name": "DataAriaLabelMixin",
2887
- "module": "src/utils/mixins/DataAriaLabelMixin.ts"
3072
+ "name": "FormfieldWrapper",
3073
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
2888
3074
  }
2889
3075
  }
2890
- ],
2891
- "mixins": [
2892
- {
2893
- "name": "DataAriaLabelMixin",
2894
- "module": "/src/utils/mixins/DataAriaLabelMixin"
2895
- }
2896
- ],
2897
- "superclass": {
2898
- "name": "Component",
2899
- "module": "/src/models"
2900
- },
2901
- "tagName": "mdc-formfieldgroup",
2902
- "jsDoc": "/**\n * `mdc-formfieldgroup` component, groups the form field components together.\n * All passed in children will have a gap of 12px (0.75rem) each applied.\n *\n * This component is specifically for creating a `checkbox` group and a `toggle` group component.\n * For the radiogroup use the RadioGroup component instead.\n *\n * The header text and description text are displayed above the items with accessible labels.<br/>\n * The consumer has to provide atleast the header-text or the aria-label,\n * like one of them <b>has</b> to be passed in always, otherwise its not accessible.\n *\n * The role will be set to `group`.\n * The aria-label will be set with the data-aria-label property.\n * The aria-labelledby will be set with the header id which contains the header text information.\n * The aria-describedby will be set with the description id which contains the description text information.\n *\n * @tagname mdc-formfieldgroup\n *\n * @slot default - This is a default slot for checkbox or toggle components.\n */",
2903
- "customElement": true
3076
+ ]
2904
3077
  }
2905
3078
  ],
2906
3079
  "exports": [
@@ -4586,6 +4759,77 @@
4586
4759
  }
4587
4760
  ]
4588
4761
  },
4762
+ {
4763
+ "kind": "javascript-module",
4764
+ "path": "components/marker/marker.component.js",
4765
+ "declarations": [
4766
+ {
4767
+ "kind": "class",
4768
+ "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
4769
+ "name": "Marker",
4770
+ "cssProperties": [
4771
+ {
4772
+ "description": "Allows customization of the default background color in solid variant.",
4773
+ "name": "--mdc-marker-solid-background-color"
4774
+ },
4775
+ {
4776
+ "description": "Allows customization of the default stripes in striped variant.",
4777
+ "name": "--mdc-marker-striped-color"
4778
+ },
4779
+ {
4780
+ "description": "Allows customization of the default background color in striped variant.",
4781
+ "name": "--mdc-marker-striped-background-color"
4782
+ },
4783
+ {
4784
+ "description": "Allows customization of the default width.",
4785
+ "name": "--mdc-marker-width"
4786
+ }
4787
+ ],
4788
+ "members": [
4789
+ {
4790
+ "kind": "field",
4791
+ "name": "variant",
4792
+ "type": {
4793
+ "text": "MarkerVariants"
4794
+ },
4795
+ "privacy": "public",
4796
+ "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
4797
+ "default": "solid",
4798
+ "attribute": "variant",
4799
+ "reflects": true
4800
+ }
4801
+ ],
4802
+ "attributes": [
4803
+ {
4804
+ "name": "variant",
4805
+ "type": {
4806
+ "text": "MarkerVariants"
4807
+ },
4808
+ "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
4809
+ "default": "solid",
4810
+ "fieldName": "variant"
4811
+ }
4812
+ ],
4813
+ "superclass": {
4814
+ "name": "Component",
4815
+ "module": "/src/models"
4816
+ },
4817
+ "tagName": "mdc-marker",
4818
+ "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
4819
+ "customElement": true
4820
+ }
4821
+ ],
4822
+ "exports": [
4823
+ {
4824
+ "kind": "js",
4825
+ "name": "default",
4826
+ "declaration": {
4827
+ "name": "Marker",
4828
+ "module": "components/marker/marker.component.js"
4829
+ }
4830
+ }
4831
+ ]
4832
+ },
4589
4833
  {
4590
4834
  "kind": "javascript-module",
4591
4835
  "path": "components/modalcontainer/modalcontainer.component.js",
@@ -4877,853 +5121,835 @@
4877
5121
  },
4878
5122
  {
4879
5123
  "kind": "javascript-module",
4880
- "path": "components/marker/marker.component.js",
5124
+ "path": "components/radio/radio.component.js",
4881
5125
  "declarations": [
4882
5126
  {
4883
5127
  "kind": "class",
4884
- "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
4885
- "name": "Marker",
5128
+ "description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
5129
+ "name": "Radio",
4886
5130
  "cssProperties": [
4887
5131
  {
4888
- "description": "Allows customization of the default background color in solid variant.",
4889
- "name": "--mdc-marker-solid-background-color"
5132
+ "description": "size of the inner circle",
5133
+ "name": "--mdc-radio-inner-circle-size"
4890
5134
  },
4891
5135
  {
4892
- "description": "Allows customization of the default stripes in striped variant.",
4893
- "name": "--mdc-marker-striped-color"
4894
- },
4895
- {
4896
- "description": "Allows customization of the default background color in striped variant.",
4897
- "name": "--mdc-marker-striped-background-color"
4898
- },
4899
- {
4900
- "description": "Allows customization of the default width.",
4901
- "name": "--mdc-marker-width"
4902
- }
4903
- ],
4904
- "members": [
4905
- {
4906
- "kind": "field",
4907
- "name": "variant",
4908
- "type": {
4909
- "text": "MarkerVariants"
4910
- },
4911
- "privacy": "public",
4912
- "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
4913
- "default": "solid",
4914
- "attribute": "variant",
4915
- "reflects": true
4916
- }
4917
- ],
4918
- "attributes": [
4919
- {
4920
- "name": "variant",
4921
- "type": {
4922
- "text": "MarkerVariants"
4923
- },
4924
- "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
4925
- "default": "solid",
4926
- "fieldName": "variant"
4927
- }
4928
- ],
4929
- "superclass": {
4930
- "name": "Component",
4931
- "module": "/src/models"
4932
- },
4933
- "tagName": "mdc-marker",
4934
- "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
4935
- "customElement": true
4936
- }
4937
- ],
4938
- "exports": [
4939
- {
4940
- "kind": "js",
4941
- "name": "default",
4942
- "declaration": {
4943
- "name": "Marker",
4944
- "module": "components/marker/marker.component.js"
4945
- }
4946
- }
4947
- ]
4948
- },
4949
- {
4950
- "kind": "javascript-module",
4951
- "path": "components/tab/tab.component.js",
4952
- "declarations": [
4953
- {
4954
- "kind": "class",
4955
- "description": "`mdc-tab` is Tab component to be used within the Tabgroup.\n\nPassing in the attribute `text` to the tab component is changing the text displayed in the tab.\n\nThe `slot=\"badge\"` can be used to add a badge to the tab.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
4956
- "name": "Tab",
4957
- "cssProperties": [
4958
- {
4959
- "description": "Gap between the badge(if provided), icon and text.",
4960
- "name": "--mdc-tab-content-gap"
5136
+ "description": "color of the label when disabled",
5137
+ "name": "--mdc-radio-text-disabled-color"
4961
5138
  },
4962
5139
  {
4963
- "description": "Height of the tab.",
4964
- "name": "--mdc-tab-height"
5140
+ "description": "color of the radio button border when disabled",
5141
+ "name": "--mdc-radio-disabled-border-color"
4965
5142
  },
4966
5143
  {
4967
- "description": "Background color for active glass tab in disabled state.",
4968
- "name": "--mdc-tab-glass-active-background-color-disabled"
5144
+ "description": "color of the radio button border when normal",
5145
+ "name": "--mdc-radio-normal-border-color"
4969
5146
  },
4970
5147
  {
4971
- "description": "Background color for active glass tab in hover state.",
4972
- "name": "--mdc-tab-glass-active-background-color-hover"
5148
+ "description": "background color of the inner circle when normal",
5149
+ "name": "--mdc-radio-inner-circle-normal-background"
4973
5150
  },
4974
5151
  {
4975
- "description": "Background color for active glass tab in rest state.",
4976
- "name": "--mdc-tab-glass-active-background-color-normal"
5152
+ "description": "background color of the inner circle when disabled",
5153
+ "name": "--mdc-radio-inner-circle-disabled-background"
4977
5154
  },
4978
5155
  {
4979
- "description": "Background color for active glass tab in pressed state.",
4980
- "name": "--mdc-tab-glass-active-background-color-pressed"
5156
+ "description": "color of the radio button when inactive",
5157
+ "name": "--mdc-radio-control-inactive-color"
4981
5158
  },
4982
5159
  {
4983
- "description": "Text and icon color for active glass tab.",
4984
- "name": "--mdc-tab-glass-active-color"
5160
+ "description": "color of the radio button when inactive and hovered",
5161
+ "name": "--mdc-radio-control-inactive-hover"
4985
5162
  },
4986
5163
  {
4987
- "description": "Text and icon color for active glass tab in disabled state.",
4988
- "name": "--mdc-tab-glass-active-color-disabled"
5164
+ "description": "color of the radio button when inactive and pressed",
5165
+ "name": "--mdc-radio-control-inactive-pressed-color"
4989
5166
  },
4990
5167
  {
4991
- "description": "Border radius for glass tab.",
4992
- "name": "--mdc-tab-glass-border-radius"
5168
+ "description": "background color of the radio button when inactive and disabled",
5169
+ "name": "--mdc-radio-control-inactive-disabled-background"
4993
5170
  },
4994
5171
  {
4995
- "description": "Background color for inactive glass tab in disabled state.",
4996
- "name": "--mdc-tab-glass-inactive-background-color-disabled"
5172
+ "description": "color of the radio button when active",
5173
+ "name": "--mdc-radio-control-active-color"
4997
5174
  },
4998
5175
  {
4999
- "description": "Background color for inactive glass tab in hover state.",
5000
- "name": "--mdc-tab-glass-inactive-background-color-hover"
5176
+ "description": "color of the radio button when active and hovered",
5177
+ "name": "--mdc-radio-control-active-hover-color"
5001
5178
  },
5002
5179
  {
5003
- "description": "Background color for inactive glass tab in rest state.",
5004
- "name": "--mdc-tab-glass-inactive-background-color-normal"
5180
+ "description": "color of the radio button when active and pressed",
5181
+ "name": "--mdc-radio-control-active-pressed-color"
5005
5182
  },
5006
5183
  {
5007
- "description": "Background color for inactive glass tab in pressed state.",
5008
- "name": "--mdc-tab-glass-inactive-background-color-pressed"
5009
- },
5184
+ "description": "background color of the radio button when active and disabled",
5185
+ "name": "--mdc-radio-control-active-disabled-background"
5186
+ }
5187
+ ],
5188
+ "members": [
5010
5189
  {
5011
- "description": "Text and icon color for inactive glass tab.",
5012
- "name": "--mdc-tab-glass-inactive-color"
5190
+ "kind": "field",
5191
+ "name": "checked",
5192
+ "type": {
5193
+ "text": "boolean"
5194
+ },
5195
+ "default": "false",
5196
+ "description": "Determines whether the radio is selected or unselected.",
5197
+ "attribute": "checked",
5198
+ "reflects": true
5013
5199
  },
5014
5200
  {
5015
- "description": "Text and icon color for inactive glass tab in disabled state.",
5016
- "name": "--mdc-tab-glass-inactive-color-disabled"
5201
+ "kind": "field",
5202
+ "name": "readonly",
5203
+ "type": {
5204
+ "text": "boolean"
5205
+ },
5206
+ "default": "false",
5207
+ "description": "Determines whether the radio is read-only.",
5208
+ "attribute": "readonly",
5209
+ "reflects": true
5017
5210
  },
5018
5211
  {
5019
- "description": "Background color for active line tab in pressed state.",
5020
- "name": "--mdc-tab-line-active-background-color-pressed"
5212
+ "kind": "method",
5213
+ "name": "setFormValue",
5214
+ "privacy": "private",
5215
+ "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
5021
5216
  },
5022
5217
  {
5023
- "description": "Background color for active line tab in disabled state.",
5024
- "name": "--mdc-tab-line-active-background-color-disabled"
5218
+ "kind": "method",
5219
+ "name": "getAllRadiosWithinSameGroup",
5220
+ "privacy": "private",
5221
+ "return": {
5222
+ "type": {
5223
+ "text": "Radio[]"
5224
+ }
5225
+ },
5226
+ "description": "Returns all radios within the same group (name)."
5025
5227
  },
5026
5228
  {
5027
- "description": "Background color for active line tab in hover state.",
5028
- "name": "--mdc-tab-line-active-background-color-hover"
5229
+ "kind": "method",
5230
+ "name": "dispatchChangeEvent",
5231
+ "privacy": "private",
5232
+ "return": {
5233
+ "type": {
5234
+ "text": "void"
5235
+ }
5236
+ },
5237
+ "parameters": [
5238
+ {
5239
+ "name": "event",
5240
+ "type": {
5241
+ "text": "Event"
5242
+ }
5243
+ }
5244
+ ],
5245
+ "description": "The 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
5029
5246
  },
5030
5247
  {
5031
- "description": "Background color for active line tab in rest state.",
5032
- "name": "--mdc-tab-line-active-background-color-normal"
5248
+ "kind": "method",
5249
+ "name": "handleChange",
5250
+ "privacy": "private",
5251
+ "return": {
5252
+ "type": {
5253
+ "text": "void"
5254
+ }
5255
+ },
5256
+ "parameters": [
5257
+ {
5258
+ "name": "event",
5259
+ "type": {
5260
+ "text": "Event"
5261
+ }
5262
+ }
5263
+ ],
5264
+ "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
5033
5265
  },
5034
5266
  {
5035
- "description": "Text and icon color for active line tab.",
5036
- "name": "--mdc-tab-line-active-color"
5267
+ "kind": "method",
5268
+ "name": "updateRadio",
5269
+ "privacy": "private",
5270
+ "parameters": [
5271
+ {
5272
+ "name": "enabledRadios",
5273
+ "type": {
5274
+ "text": "Radio[]"
5275
+ },
5276
+ "description": "An array of enabled radio buttons within the same group."
5277
+ },
5278
+ {
5279
+ "name": "index",
5280
+ "type": {
5281
+ "text": "number"
5282
+ },
5283
+ "description": "The index of the radio button to be updated within the enabled radios array."
5284
+ },
5285
+ {
5286
+ "name": "event",
5287
+ "type": {
5288
+ "text": "Event"
5289
+ },
5290
+ "description": "The event that triggered the update."
5291
+ }
5292
+ ],
5293
+ "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
5037
5294
  },
5038
5295
  {
5039
- "description": "Text and icon color for active line tab in disabled state.",
5040
- "name": "--mdc-tab-line-active-color-disabled"
5296
+ "kind": "method",
5297
+ "name": "handleKeyDown",
5298
+ "privacy": "private",
5299
+ "return": {
5300
+ "type": {
5301
+ "text": "void"
5302
+ }
5303
+ },
5304
+ "parameters": [
5305
+ {
5306
+ "name": "event",
5307
+ "type": {
5308
+ "text": "KeyboardEvent"
5309
+ }
5310
+ }
5311
+ ],
5312
+ "description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
5041
5313
  },
5042
5314
  {
5043
- "description": "color for indicator in active line tab.",
5044
- "name": "--mdc-tab-line-active-indicator-color"
5315
+ "kind": "method",
5316
+ "name": "updateTabIndex",
5317
+ "privacy": "private",
5318
+ "return": {
5319
+ "type": {
5320
+ "text": "void"
5321
+ }
5322
+ },
5323
+ "description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
5045
5324
  },
5046
5325
  {
5047
- "description": "Color for indicator in active line tab in disabled state.",
5048
- "name": "--mdc-tab-line-active-indicator-color-disabled"
5049
- },
5050
- {
5051
- "description": "Height for indicator in active line tab.",
5052
- "name": "--mdc-tab-line-active-indicator-height"
5053
- },
5054
- {
5055
- "description": "Width for indicator in active line tab.",
5056
- "name": "--mdc-tab-line-active-indicator-width"
5057
- },
5058
- {
5059
- "description": "Bottom left border radius for line tab.",
5060
- "name": "--mdc-tab-line-border-bottom-left-radius"
5061
- },
5062
- {
5063
- "description": "Bottom right border radius for line tab.",
5064
- "name": "--mdc-tab-line-border-bottom-right-radius"
5065
- },
5066
- {
5067
- "description": "Top left border radius for line tab.",
5068
- "name": "--mdc-tab-line-border-top-left-radius"
5069
- },
5070
- {
5071
- "description": "Top right border radius for line tab.",
5072
- "name": "--mdc-tab-line-border-top-right-radius"
5073
- },
5074
- {
5075
- "description": "Background color for inactive line tab in pressed state.",
5076
- "name": "--mdc-tab-line-inactive-background-color-pressed"
5077
- },
5078
- {
5079
- "description": "Background color for inactive line tab in disabled state",
5080
- "name": "--mdc-tab-line-inactive-background-color-disabled"
5081
- },
5082
- {
5083
- "description": "Background color for inactive line tab in hover state.",
5084
- "name": "--mdc-tab-line-inactive-background-color-hover"
5085
- },
5086
- {
5087
- "description": "Background color for inactive line tab in rest state.",
5088
- "name": "--mdc-tab-line-inactive-background-color-normal"
5089
- },
5090
- {
5091
- "description": "Text and icon color for inactive line tab.",
5092
- "name": "--mdc-tab-line-inactive-color"
5093
- },
5094
- {
5095
- "description": "Text and icon color for inactive line tab in disabled state.",
5096
- "name": "--mdc-tab-line-inactive-color-disabled"
5097
- },
5098
- {
5099
- "description": "Padding left for the tab.",
5100
- "name": "--mdc-tab-padding-left"
5101
- },
5102
- {
5103
- "description": "Padding right for the tab.",
5104
- "name": "--mdc-tab-padding-right"
5105
- },
5106
- {
5107
- "description": "Background color for active pill tab in pressed state.",
5108
- "name": "--mdc-tab-pill-active-background-color-pressed"
5109
- },
5110
- {
5111
- "description": "Background color for active pill tab in disabled state.",
5112
- "name": "--mdc-tab-pill-active-background-color-disabled"
5113
- },
5114
- {
5115
- "description": "Background color for active pill tab in hover state.",
5116
- "name": "--mdc-tab-pill-active-background-color-hover"
5117
- },
5118
- {
5119
- "description": "Background color for active pill tab in rest state.",
5120
- "name": "--mdc-tab-pill-active-background-color-normal"
5121
- },
5122
- {
5123
- "description": "Text and icon color for active pill tab.",
5124
- "name": "--mdc-tab-pill-active-color"
5125
- },
5126
- {
5127
- "description": "Text and icon color for active pill tab in disabled state.",
5128
- "name": "--mdc-tab-pill-active-color-disabled"
5326
+ "kind": "field",
5327
+ "name": "name",
5328
+ "type": {
5329
+ "text": "string"
5330
+ },
5331
+ "default": "''",
5332
+ "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
5333
+ "attribute": "name",
5334
+ "reflects": true,
5335
+ "inheritedFrom": {
5336
+ "name": "NameMixin",
5337
+ "module": "utils/mixins/NameMixin.js"
5338
+ }
5129
5339
  },
5130
5340
  {
5131
- "description": "Border radius for pill tab.",
5132
- "name": "--mdc-tab-pill-border-radius"
5341
+ "kind": "field",
5342
+ "name": "value",
5343
+ "type": {
5344
+ "text": "string"
5345
+ },
5346
+ "default": "''",
5347
+ "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
5348
+ "attribute": "value",
5349
+ "reflects": true,
5350
+ "inheritedFrom": {
5351
+ "name": "ValueMixin",
5352
+ "module": "utils/mixins/ValueMixin.js"
5353
+ }
5133
5354
  },
5134
5355
  {
5135
- "description": "Background color for inactive pill tab in pressed state.",
5136
- "name": "--mdc-tab-pill-inactive-background-color-pressed"
5356
+ "kind": "field",
5357
+ "name": "dataAriaLabel",
5358
+ "type": {
5359
+ "text": "string | null"
5360
+ },
5361
+ "default": "null",
5362
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
5363
+ "attribute": "data-aria-label",
5364
+ "reflects": true,
5365
+ "inheritedFrom": {
5366
+ "name": "DataAriaLabelMixin",
5367
+ "module": "utils/mixins/DataAriaLabelMixin.js"
5368
+ }
5137
5369
  },
5138
5370
  {
5139
- "description": "Background color for inactive pill tab in disabled state.",
5140
- "name": "--mdc-tab-pill-inactive-background-color-disabled"
5371
+ "kind": "field",
5372
+ "name": "disabled",
5373
+ "type": {
5374
+ "text": "boolean"
5375
+ },
5376
+ "default": "false",
5377
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
5378
+ "attribute": "disabled",
5379
+ "reflects": true,
5380
+ "inheritedFrom": {
5381
+ "name": "FormfieldWrapper",
5382
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5383
+ }
5141
5384
  },
5142
5385
  {
5143
- "description": "Background color for inactive pill tab in hover state.",
5144
- "name": "--mdc-tab-pill-inactive-background-color-hover"
5386
+ "kind": "field",
5387
+ "name": "label",
5388
+ "type": {
5389
+ "text": "string | undefined"
5390
+ },
5391
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
5392
+ "attribute": "label",
5393
+ "reflects": true,
5394
+ "inheritedFrom": {
5395
+ "name": "FormfieldWrapper",
5396
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5397
+ }
5145
5398
  },
5146
5399
  {
5147
- "description": "Background color for inactive pill tab in rest state.",
5148
- "name": "--mdc-tab-pill-inactive-background-color-normal"
5400
+ "kind": "field",
5401
+ "name": "requiredLabel",
5402
+ "type": {
5403
+ "text": "string | undefined"
5404
+ },
5405
+ "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
5406
+ "attribute": "required-label",
5407
+ "reflects": true,
5408
+ "inheritedFrom": {
5409
+ "name": "FormfieldWrapper",
5410
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5411
+ }
5149
5412
  },
5150
5413
  {
5151
- "description": "Text and icon color for inactive pill tab.",
5152
- "name": "--mdc-tab-pill-inactive-color"
5414
+ "kind": "field",
5415
+ "name": "id",
5416
+ "default": "`mdc-input-${uuidv4()}`",
5417
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
5418
+ "attribute": "id",
5419
+ "inheritedFrom": {
5420
+ "name": "FormfieldWrapper",
5421
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5422
+ }
5153
5423
  },
5154
- {
5155
- "description": "Text and icon color for inactive pill tab in disabled state.",
5156
- "name": "--mdc-tab-pill-inactive-color-disabled"
5157
- }
5158
- ],
5159
- "members": [
5160
5424
  {
5161
5425
  "kind": "field",
5162
- "name": "text",
5426
+ "name": "helpTextType",
5163
5427
  "type": {
5164
- "text": "string | undefined"
5428
+ "text": "ValidationType"
5165
5429
  },
5166
- "description": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
5167
- "attribute": "text",
5168
- "reflects": true
5430
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
5431
+ "attribute": "help-text-type",
5432
+ "reflects": true,
5433
+ "inheritedFrom": {
5434
+ "name": "FormfieldWrapper",
5435
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5436
+ }
5169
5437
  },
5170
5438
  {
5171
5439
  "kind": "field",
5172
- "name": "variant",
5440
+ "name": "helpText",
5173
5441
  "type": {
5174
- "text": "Variant"
5442
+ "text": "string | undefined"
5175
5443
  },
5176
- "description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
5177
- "default": "pill",
5178
- "attribute": "variant",
5179
- "reflects": true
5444
+ "description": "The help text that is displayed below the input field.",
5445
+ "attribute": "help-text",
5446
+ "reflects": true,
5447
+ "inheritedFrom": {
5448
+ "name": "FormfieldWrapper",
5449
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5450
+ }
5180
5451
  },
5181
5452
  {
5182
5453
  "kind": "method",
5183
- "name": "modifyIconName",
5184
- "privacy": "private",
5454
+ "name": "renderLabelElement",
5455
+ "privacy": "protected",
5456
+ "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
5185
5457
  "return": {
5186
5458
  "type": {
5187
- "text": "void"
5459
+ "text": ""
5188
5460
  }
5189
5461
  },
5190
- "parameters": [
5191
- {
5192
- "name": "active",
5193
- "type": {
5194
- "text": "boolean"
5195
- },
5196
- "description": "The active state."
5197
- }
5198
- ],
5199
- "description": "Modifies the icon name based on the active state.\nIf the tab is active, the icon name is suffixed with '-filled'.\nIf the tab is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
5462
+ "inheritedFrom": {
5463
+ "name": "FormfieldWrapper",
5464
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5465
+ }
5200
5466
  },
5201
5467
  {
5202
5468
  "kind": "method",
5203
- "name": "setVariant",
5204
- "privacy": "private",
5469
+ "name": "renderRequiredLabel",
5470
+ "privacy": "protected",
5471
+ "inheritedFrom": {
5472
+ "name": "FormfieldWrapper",
5473
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5474
+ }
5475
+ },
5476
+ {
5477
+ "kind": "method",
5478
+ "name": "renderHelpTextIcon",
5479
+ "privacy": "protected",
5480
+ "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
5205
5481
  "return": {
5206
5482
  "type": {
5207
- "text": "void"
5483
+ "text": ""
5208
5484
  }
5209
5485
  },
5210
- "parameters": [
5211
- {
5212
- "name": "variant",
5213
- "type": {
5214
- "text": "Variant"
5215
- },
5216
- "description": "The variant to set."
5217
- }
5218
- ],
5219
- "description": "Sets the variant attribute for the tab component.\nIf the provided variant is not included in the TAB_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
5486
+ "inheritedFrom": {
5487
+ "name": "FormfieldWrapper",
5488
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5489
+ }
5220
5490
  },
5221
5491
  {
5222
5492
  "kind": "method",
5223
- "name": "setActive",
5493
+ "name": "renderHelpText",
5224
5494
  "privacy": "protected",
5225
- "parameters": [
5226
- {
5227
- "name": "element",
5228
- "type": {
5229
- "text": "HTMLElement"
5230
- },
5231
- "description": "The tab element."
5232
- },
5233
- {
5234
- "name": "active",
5235
- "type": {
5236
- "text": "boolean"
5237
- },
5238
- "description": "The active state of the tab."
5495
+ "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
5496
+ "return": {
5497
+ "type": {
5498
+ "text": ""
5239
5499
  }
5240
- ],
5241
- "description": "Sets the aria-selected attribute based on the active state of the Tab.\nIf the tab is active, the filled version of the icon is displayed,\nelse the icon is restored to its original value.",
5500
+ },
5242
5501
  "inheritedFrom": {
5243
- "name": "Buttonsimple",
5244
- "module": "components/buttonsimple/buttonsimple.component.js"
5502
+ "name": "FormfieldWrapper",
5503
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5245
5504
  }
5246
5505
  },
5247
5506
  {
5248
5507
  "kind": "method",
5249
- "name": "executeAction",
5508
+ "name": "renderLabel",
5250
5509
  "privacy": "protected",
5510
+ "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
5511
+ "return": {
5512
+ "type": {
5513
+ "text": ""
5514
+ }
5515
+ },
5251
5516
  "inheritedFrom": {
5252
- "name": "Buttonsimple",
5253
- "module": "components/buttonsimple/buttonsimple.component.js"
5517
+ "name": "FormfieldWrapper",
5518
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5254
5519
  }
5255
5520
  },
5256
5521
  {
5257
- "kind": "field",
5258
- "name": "role",
5259
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
5260
- "default": "'tab'",
5261
- "attribute": "role",
5262
- "reflects": true,
5263
- "type": {
5264
- "text": "string"
5522
+ "kind": "method",
5523
+ "name": "renderHelperText",
5524
+ "privacy": "protected",
5525
+ "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
5526
+ "return": {
5527
+ "type": {
5528
+ "text": ""
5529
+ }
5265
5530
  },
5266
5531
  "inheritedFrom": {
5267
- "name": "Buttonsimple",
5268
- "module": "components/buttonsimple/buttonsimple.component.js"
5532
+ "name": "FormfieldWrapper",
5533
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5269
5534
  }
5270
- },
5535
+ }
5536
+ ],
5537
+ "events": [
5271
5538
  {
5272
- "kind": "field",
5273
- "name": "softDisabled",
5539
+ "type": {
5540
+ "text": "EventConstructor"
5541
+ }
5542
+ }
5543
+ ],
5544
+ "attributes": [
5545
+ {
5546
+ "name": "checked",
5274
5547
  "type": {
5275
5548
  "text": "boolean"
5276
5549
  },
5277
- "default": "undefined as unknown",
5278
- "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
5279
- "attribute": "soft-disabled",
5280
- "inheritedFrom": {
5281
- "name": "Buttonsimple",
5282
- "module": "components/buttonsimple/buttonsimple.component.js"
5283
- }
5550
+ "default": "false",
5551
+ "description": "Determines whether the radio is selected or unselected.",
5552
+ "fieldName": "checked"
5284
5553
  },
5285
5554
  {
5286
- "kind": "field",
5287
- "name": "size",
5555
+ "name": "readonly",
5288
5556
  "type": {
5289
- "text": "ButtonSize"
5557
+ "text": "boolean"
5290
5558
  },
5291
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
5292
- "default": "undefined as unknown",
5293
- "attribute": "size",
5294
- "reflects": true,
5295
- "inheritedFrom": {
5296
- "name": "Buttonsimple",
5297
- "module": "components/buttonsimple/buttonsimple.component.js"
5298
- }
5559
+ "default": "false",
5560
+ "description": "Determines whether the radio is read-only.",
5561
+ "fieldName": "readonly"
5299
5562
  },
5300
5563
  {
5301
- "kind": "field",
5302
- "name": "type",
5564
+ "name": "name",
5303
5565
  "type": {
5304
- "text": "ButtonType"
5566
+ "text": "string"
5305
5567
  },
5306
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
5307
- "default": "undefined as unknown",
5308
- "attribute": "type",
5309
- "reflects": true,
5568
+ "default": "''",
5569
+ "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
5570
+ "fieldName": "name",
5310
5571
  "inheritedFrom": {
5311
- "name": "Buttonsimple",
5312
- "module": "components/buttonsimple/buttonsimple.component.js"
5572
+ "name": "NameMixin",
5573
+ "module": "src/utils/mixins/NameMixin.ts"
5313
5574
  }
5314
5575
  },
5315
5576
  {
5316
- "kind": "field",
5317
- "name": "iconName",
5577
+ "name": "value",
5318
5578
  "type": {
5319
- "text": "IconNames | undefined"
5579
+ "text": "string"
5320
5580
  },
5321
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
5322
- "attribute": "icon-name",
5581
+ "default": "''",
5582
+ "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
5583
+ "fieldName": "value",
5323
5584
  "inheritedFrom": {
5324
- "name": "IconNameMixin",
5325
- "module": "utils/mixins/IconNameMixin.js"
5585
+ "name": "ValueMixin",
5586
+ "module": "src/utils/mixins/ValueMixin.ts"
5326
5587
  }
5327
5588
  },
5328
5589
  {
5329
- "kind": "field",
5330
- "name": "tabIndex",
5590
+ "name": "data-aria-label",
5331
5591
  "type": {
5332
- "text": "number"
5592
+ "text": "string | null"
5333
5593
  },
5334
- "default": "0",
5335
- "description": "This property specifies the tab order of the element.",
5336
- "attribute": "tabIndex",
5337
- "reflects": true,
5594
+ "default": "null",
5595
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
5596
+ "fieldName": "dataAriaLabel",
5338
5597
  "inheritedFrom": {
5339
- "name": "Buttonsimple",
5340
- "module": "components/buttonsimple/buttonsimple.component.js"
5598
+ "name": "DataAriaLabelMixin",
5599
+ "module": "src/utils/mixins/DataAriaLabelMixin.ts"
5341
5600
  }
5342
5601
  },
5343
5602
  {
5344
- "kind": "field",
5345
5603
  "name": "disabled",
5346
5604
  "type": {
5347
5605
  "text": "boolean"
5348
5606
  },
5349
5607
  "default": "false",
5350
5608
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
5351
- "attribute": "disabled",
5352
- "reflects": true,
5609
+ "fieldName": "disabled",
5353
5610
  "inheritedFrom": {
5354
- "name": "Buttonsimple",
5355
- "module": "components/buttonsimple/buttonsimple.component.js"
5611
+ "name": "FormfieldWrapper",
5612
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
5356
5613
  }
5357
5614
  },
5358
5615
  {
5359
- "kind": "field",
5360
- "name": "active",
5616
+ "name": "label",
5361
5617
  "type": {
5362
- "text": "boolean"
5618
+ "text": "string | undefined"
5363
5619
  },
5364
- "default": "false",
5365
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
5366
- "attribute": "active",
5367
- "reflects": true,
5620
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
5621
+ "fieldName": "label",
5368
5622
  "inheritedFrom": {
5369
- "name": "Buttonsimple",
5370
- "module": "components/buttonsimple/buttonsimple.component.js"
5623
+ "name": "FormfieldWrapper",
5624
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
5371
5625
  }
5372
5626
  },
5373
5627
  {
5374
- "kind": "method",
5375
- "name": "setSoftDisabled",
5376
- "privacy": "private",
5377
- "parameters": [
5378
- {
5379
- "name": "element",
5380
- "type": {
5381
- "text": "HTMLElement"
5382
- },
5383
- "description": "The button element."
5384
- },
5385
- {
5386
- "name": "softDisabled",
5387
- "type": {
5388
- "text": "boolean"
5389
- },
5390
- "description": "The soft-disabled state."
5391
- }
5392
- ],
5393
- "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
5628
+ "name": "required-label",
5629
+ "type": {
5630
+ "text": "string | undefined"
5631
+ },
5632
+ "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
5633
+ "fieldName": "requiredLabel",
5394
5634
  "inheritedFrom": {
5395
- "name": "Buttonsimple",
5396
- "module": "components/buttonsimple/buttonsimple.component.js"
5635
+ "name": "FormfieldWrapper",
5636
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
5397
5637
  }
5398
5638
  },
5399
5639
  {
5400
- "kind": "method",
5401
- "name": "setDisabled",
5402
- "privacy": "private",
5403
- "parameters": [
5404
- {
5405
- "name": "element",
5406
- "type": {
5407
- "text": "HTMLElement"
5408
- },
5409
- "description": "The button element."
5410
- },
5411
- {
5412
- "name": "disabled",
5413
- "type": {
5414
- "text": "boolean"
5415
- },
5416
- "description": "The disabled state."
5417
- }
5418
- ],
5419
- "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
5640
+ "name": "id",
5641
+ "default": "`mdc-input-${uuidv4()}`",
5642
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
5643
+ "fieldName": "id",
5420
5644
  "inheritedFrom": {
5421
- "name": "Buttonsimple",
5422
- "module": "components/buttonsimple/buttonsimple.component.js"
5645
+ "name": "FormfieldWrapper",
5646
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
5423
5647
  }
5424
5648
  },
5425
5649
  {
5426
- "kind": "method",
5427
- "name": "triggerClickEvent",
5428
- "privacy": "private",
5650
+ "name": "help-text-type",
5651
+ "type": {
5652
+ "text": "ValidationType"
5653
+ },
5654
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
5655
+ "fieldName": "helpTextType",
5429
5656
  "inheritedFrom": {
5430
- "name": "Buttonsimple",
5431
- "module": "components/buttonsimple/buttonsimple.component.js"
5657
+ "name": "FormfieldWrapper",
5658
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
5432
5659
  }
5433
5660
  },
5434
5661
  {
5435
- "kind": "method",
5436
- "name": "handleKeyDown",
5437
- "privacy": "private",
5438
- "parameters": [
5439
- {
5440
- "name": "event",
5441
- "type": {
5442
- "text": "KeyboardEvent"
5443
- },
5444
- "description": "The keyboard event."
5445
- }
5446
- ],
5447
- "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
5662
+ "name": "help-text",
5663
+ "type": {
5664
+ "text": "string | undefined"
5665
+ },
5666
+ "description": "The help text that is displayed below the input field.",
5667
+ "fieldName": "helpText",
5448
5668
  "inheritedFrom": {
5449
- "name": "Buttonsimple",
5450
- "module": "components/buttonsimple/buttonsimple.component.js"
5669
+ "name": "FormfieldWrapper",
5670
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
5451
5671
  }
5672
+ }
5673
+ ],
5674
+ "mixins": [
5675
+ {
5676
+ "name": "NameMixin",
5677
+ "module": "/src/utils/mixins/NameMixin"
5452
5678
  },
5453
5679
  {
5454
- "kind": "method",
5455
- "name": "handleKeyUp",
5456
- "privacy": "private",
5457
- "parameters": [
5458
- {
5459
- "name": "event",
5460
- "type": {
5461
- "text": "KeyboardEvent"
5462
- },
5463
- "description": "The keyboard event."
5464
- }
5465
- ],
5466
- "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
5680
+ "name": "ValueMixin",
5681
+ "module": "/src/utils/mixins/ValueMixin"
5682
+ },
5683
+ {
5684
+ "name": "DataAriaLabelMixin",
5685
+ "module": "/src/utils/mixins/DataAriaLabelMixin"
5686
+ }
5687
+ ],
5688
+ "superclass": {
5689
+ "name": "FormfieldWrapper",
5690
+ "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
5691
+ },
5692
+ "tagName": "mdc-radio",
5693
+ "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n * @dependency mdc-formfieldwrapper\n *\n * @tagname mdc-radio\n *\n * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when\n * inactive and disabled\n * @cssproperty --mdc-radio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button\n * when active and disabled\n *\n */",
5694
+ "customElement": true,
5695
+ "slots": [
5696
+ {
5697
+ "description": "slot to add the label info icon",
5698
+ "name": "label-info",
5467
5699
  "inheritedFrom": {
5468
- "name": "Buttonsimple",
5469
- "module": "components/buttonsimple/buttonsimple.component.js"
5700
+ "name": "FormfieldWrapper",
5701
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
5470
5702
  }
5471
5703
  }
5472
- ],
5473
- "attributes": [
5704
+ ]
5705
+ }
5706
+ ],
5707
+ "exports": [
5708
+ {
5709
+ "kind": "js",
5710
+ "name": "default",
5711
+ "declaration": {
5712
+ "name": "Radio",
5713
+ "module": "components/radio/radio.component.js"
5714
+ }
5715
+ }
5716
+ ]
5717
+ },
5718
+ {
5719
+ "kind": "javascript-module",
5720
+ "path": "components/tab/tab.component.js",
5721
+ "declarations": [
5722
+ {
5723
+ "kind": "class",
5724
+ "description": "`mdc-tab` is Tab component to be used within the Tabgroup.\n\nPassing in the attribute `text` to the tab component is changing the text displayed in the tab.\n\nThe `slot=\"badge\"` can be used to add a badge to the tab.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
5725
+ "name": "Tab",
5726
+ "cssProperties": [
5727
+ {
5728
+ "description": "Gap between the badge(if provided), icon and text.",
5729
+ "name": "--mdc-tab-content-gap"
5730
+ },
5731
+ {
5732
+ "description": "Height of the tab.",
5733
+ "name": "--mdc-tab-height"
5734
+ },
5735
+ {
5736
+ "description": "Background color for active glass tab in disabled state.",
5737
+ "name": "--mdc-tab-glass-active-background-color-disabled"
5738
+ },
5739
+ {
5740
+ "description": "Background color for active glass tab in hover state.",
5741
+ "name": "--mdc-tab-glass-active-background-color-hover"
5742
+ },
5743
+ {
5744
+ "description": "Background color for active glass tab in rest state.",
5745
+ "name": "--mdc-tab-glass-active-background-color-normal"
5746
+ },
5747
+ {
5748
+ "description": "Background color for active glass tab in pressed state.",
5749
+ "name": "--mdc-tab-glass-active-background-color-pressed"
5750
+ },
5751
+ {
5752
+ "description": "Text and icon color for active glass tab.",
5753
+ "name": "--mdc-tab-glass-active-color"
5754
+ },
5755
+ {
5756
+ "description": "Text and icon color for active glass tab in disabled state.",
5757
+ "name": "--mdc-tab-glass-active-color-disabled"
5758
+ },
5759
+ {
5760
+ "description": "Border radius for glass tab.",
5761
+ "name": "--mdc-tab-glass-border-radius"
5762
+ },
5763
+ {
5764
+ "description": "Background color for inactive glass tab in disabled state.",
5765
+ "name": "--mdc-tab-glass-inactive-background-color-disabled"
5766
+ },
5767
+ {
5768
+ "description": "Background color for inactive glass tab in hover state.",
5769
+ "name": "--mdc-tab-glass-inactive-background-color-hover"
5770
+ },
5771
+ {
5772
+ "description": "Background color for inactive glass tab in rest state.",
5773
+ "name": "--mdc-tab-glass-inactive-background-color-normal"
5774
+ },
5775
+ {
5776
+ "description": "Background color for inactive glass tab in pressed state.",
5777
+ "name": "--mdc-tab-glass-inactive-background-color-pressed"
5778
+ },
5779
+ {
5780
+ "description": "Text and icon color for inactive glass tab.",
5781
+ "name": "--mdc-tab-glass-inactive-color"
5782
+ },
5783
+ {
5784
+ "description": "Text and icon color for inactive glass tab in disabled state.",
5785
+ "name": "--mdc-tab-glass-inactive-color-disabled"
5786
+ },
5787
+ {
5788
+ "description": "Background color for active line tab in pressed state.",
5789
+ "name": "--mdc-tab-line-active-background-color-pressed"
5790
+ },
5791
+ {
5792
+ "description": "Background color for active line tab in disabled state.",
5793
+ "name": "--mdc-tab-line-active-background-color-disabled"
5794
+ },
5795
+ {
5796
+ "description": "Background color for active line tab in hover state.",
5797
+ "name": "--mdc-tab-line-active-background-color-hover"
5798
+ },
5799
+ {
5800
+ "description": "Background color for active line tab in rest state.",
5801
+ "name": "--mdc-tab-line-active-background-color-normal"
5802
+ },
5803
+ {
5804
+ "description": "Text and icon color for active line tab.",
5805
+ "name": "--mdc-tab-line-active-color"
5806
+ },
5807
+ {
5808
+ "description": "Text and icon color for active line tab in disabled state.",
5809
+ "name": "--mdc-tab-line-active-color-disabled"
5810
+ },
5811
+ {
5812
+ "description": "color for indicator in active line tab.",
5813
+ "name": "--mdc-tab-line-active-indicator-color"
5814
+ },
5815
+ {
5816
+ "description": "Color for indicator in active line tab in disabled state.",
5817
+ "name": "--mdc-tab-line-active-indicator-color-disabled"
5818
+ },
5819
+ {
5820
+ "description": "Height for indicator in active line tab.",
5821
+ "name": "--mdc-tab-line-active-indicator-height"
5822
+ },
5474
5823
  {
5475
- "name": "text",
5476
- "type": {
5477
- "text": "string | undefined"
5478
- },
5479
- "description": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
5480
- "fieldName": "text"
5824
+ "description": "Width for indicator in active line tab.",
5825
+ "name": "--mdc-tab-line-active-indicator-width"
5481
5826
  },
5482
5827
  {
5483
- "name": "variant",
5484
- "type": {
5485
- "text": "Variant"
5486
- },
5487
- "description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
5488
- "default": "pill",
5489
- "fieldName": "variant"
5828
+ "description": "Bottom left border radius for line tab.",
5829
+ "name": "--mdc-tab-line-border-bottom-left-radius"
5490
5830
  },
5491
5831
  {
5492
- "name": "icon-name",
5493
- "type": {
5494
- "text": "IconNames | undefined"
5495
- },
5496
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
5497
- "fieldName": "iconName",
5498
- "inheritedFrom": {
5499
- "name": "IconNameMixin",
5500
- "module": "src/utils/mixins/IconNameMixin.ts"
5501
- }
5832
+ "description": "Bottom right border radius for line tab.",
5833
+ "name": "--mdc-tab-line-border-bottom-right-radius"
5502
5834
  },
5503
5835
  {
5504
- "name": "tabIndex",
5505
- "type": {
5506
- "text": "number"
5507
- },
5508
- "default": "0",
5509
- "description": "This property specifies the tab order of the element.",
5510
- "fieldName": "tabIndex",
5511
- "inheritedFrom": {
5512
- "name": "Buttonsimple",
5513
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
5514
- }
5836
+ "description": "Top left border radius for line tab.",
5837
+ "name": "--mdc-tab-line-border-top-left-radius"
5515
5838
  },
5516
5839
  {
5517
- "name": "disabled",
5518
- "type": {
5519
- "text": "boolean"
5520
- },
5521
- "default": "false",
5522
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
5523
- "fieldName": "disabled",
5524
- "inheritedFrom": {
5525
- "name": "Buttonsimple",
5526
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
5527
- }
5840
+ "description": "Top right border radius for line tab.",
5841
+ "name": "--mdc-tab-line-border-top-right-radius"
5528
5842
  },
5529
5843
  {
5530
- "name": "active",
5531
- "type": {
5532
- "text": "boolean"
5533
- },
5534
- "default": "false",
5535
- "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
5536
- "fieldName": "active",
5537
- "inheritedFrom": {
5538
- "name": "Buttonsimple",
5539
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
5540
- }
5844
+ "description": "Background color for inactive line tab in pressed state.",
5845
+ "name": "--mdc-tab-line-inactive-background-color-pressed"
5541
5846
  },
5542
5847
  {
5543
- "name": "soft-disabled",
5544
- "type": {
5545
- "text": "boolean"
5546
- },
5547
- "default": "false",
5548
- "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
5549
- "fieldName": "softDisabled",
5550
- "inheritedFrom": {
5551
- "name": "Buttonsimple",
5552
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
5553
- }
5848
+ "description": "Background color for inactive line tab in disabled state",
5849
+ "name": "--mdc-tab-line-inactive-background-color-disabled"
5554
5850
  },
5555
5851
  {
5556
- "name": "size",
5557
- "type": {
5558
- "text": "ButtonSize"
5559
- },
5560
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
5561
- "default": "32",
5562
- "fieldName": "size",
5563
- "inheritedFrom": {
5564
- "name": "Buttonsimple",
5565
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
5566
- }
5852
+ "description": "Background color for inactive line tab in hover state.",
5853
+ "name": "--mdc-tab-line-inactive-background-color-hover"
5567
5854
  },
5568
5855
  {
5569
- "name": "role",
5570
- "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
5571
- "default": "button",
5572
- "fieldName": "role",
5573
- "inheritedFrom": {
5574
- "name": "Buttonsimple",
5575
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
5576
- }
5856
+ "description": "Background color for inactive line tab in rest state.",
5857
+ "name": "--mdc-tab-line-inactive-background-color-normal"
5577
5858
  },
5578
5859
  {
5579
- "name": "type",
5580
- "type": {
5581
- "text": "ButtonType"
5582
- },
5583
- "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
5584
- "default": "button",
5585
- "fieldName": "type",
5586
- "inheritedFrom": {
5587
- "name": "Buttonsimple",
5588
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
5589
- }
5590
- }
5591
- ],
5592
- "mixins": [
5860
+ "description": "Text and icon color for inactive line tab.",
5861
+ "name": "--mdc-tab-line-inactive-color"
5862
+ },
5593
5863
  {
5594
- "name": "IconNameMixin",
5595
- "module": "/src/utils/mixins/IconNameMixin"
5596
- }
5597
- ],
5598
- "superclass": {
5599
- "name": "Buttonsimple",
5600
- "module": "/src/components/buttonsimple/buttonsimple.component"
5601
- },
5602
- "tagName": "mdc-tab",
5603
- "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.\n * @cssproperty --mdc-tab-height - Height of the tab.\n * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.\n * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.\n * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.\n * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.\n * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.\n * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab\n * in hover state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab\n * in rest state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.\n * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.\n * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.\n * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.\n * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.\n * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.\n * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab\n * in pressed state.\n * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab\n * in disabled state\n * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.\n * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab\n * in rest state.\n * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.\n * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.\n * @cssproperty --mdc-tab-padding-left - Padding left for the tab.\n * @cssproperty --mdc-tab-padding-right - Padding right for the tab.\n * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.\n * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.\n * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.\n * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.\n * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.\n * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.\n * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab\n * in pressed state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.\n * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.\n * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.\n */",
5604
- "customElement": true
5605
- }
5606
- ],
5607
- "exports": [
5608
- {
5609
- "kind": "js",
5610
- "name": "default",
5611
- "declaration": {
5612
- "name": "Tab",
5613
- "module": "components/tab/tab.component.js"
5614
- }
5615
- }
5616
- ]
5617
- },
5618
- {
5619
- "kind": "javascript-module",
5620
- "path": "components/radio/radio.component.js",
5621
- "declarations": [
5622
- {
5623
- "kind": "class",
5624
- "description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
5625
- "name": "Radio",
5626
- "cssProperties": [
5864
+ "description": "Text and icon color for inactive line tab in disabled state.",
5865
+ "name": "--mdc-tab-line-inactive-color-disabled"
5866
+ },
5627
5867
  {
5628
- "description": "size of the inner circle",
5629
- "name": "--mdc-radio-inner-circle-size"
5868
+ "description": "Padding left for the tab.",
5869
+ "name": "--mdc-tab-padding-left"
5630
5870
  },
5631
5871
  {
5632
- "description": "color of the label when disabled",
5633
- "name": "--mdc-radio-text-disabled-color"
5872
+ "description": "Padding right for the tab.",
5873
+ "name": "--mdc-tab-padding-right"
5634
5874
  },
5635
5875
  {
5636
- "description": "color of the radio button border when disabled",
5637
- "name": "--mdc-radio-disabled-border-color"
5876
+ "description": "Background color for active pill tab in pressed state.",
5877
+ "name": "--mdc-tab-pill-active-background-color-pressed"
5638
5878
  },
5639
5879
  {
5640
- "description": "color of the radio button border when normal",
5641
- "name": "--mdc-radio-normal-border-color"
5880
+ "description": "Background color for active pill tab in disabled state.",
5881
+ "name": "--mdc-tab-pill-active-background-color-disabled"
5642
5882
  },
5643
5883
  {
5644
- "description": "background color of the inner circle when normal",
5645
- "name": "--mdc-radio-inner-circle-normal-background"
5884
+ "description": "Background color for active pill tab in hover state.",
5885
+ "name": "--mdc-tab-pill-active-background-color-hover"
5646
5886
  },
5647
5887
  {
5648
- "description": "background color of the inner circle when disabled",
5649
- "name": "--mdc-radio-inner-circle-disabled-background"
5888
+ "description": "Background color for active pill tab in rest state.",
5889
+ "name": "--mdc-tab-pill-active-background-color-normal"
5650
5890
  },
5651
5891
  {
5652
- "description": "color of the radio button when inactive",
5653
- "name": "--mdc-radio-control-inactive-color"
5892
+ "description": "Text and icon color for active pill tab.",
5893
+ "name": "--mdc-tab-pill-active-color"
5654
5894
  },
5655
5895
  {
5656
- "description": "color of the radio button when inactive and hovered",
5657
- "name": "--mdc-radio-control-inactive-hover"
5896
+ "description": "Text and icon color for active pill tab in disabled state.",
5897
+ "name": "--mdc-tab-pill-active-color-disabled"
5658
5898
  },
5659
5899
  {
5660
- "description": "color of the radio button when inactive and pressed",
5661
- "name": "--mdc-radio-control-inactive-pressed-color"
5900
+ "description": "Border radius for pill tab.",
5901
+ "name": "--mdc-tab-pill-border-radius"
5662
5902
  },
5663
5903
  {
5664
- "description": "background color of the radio button when inactive and disabled",
5665
- "name": "--mdc-radio-control-inactive-disabled-background"
5904
+ "description": "Background color for inactive pill tab in pressed state.",
5905
+ "name": "--mdc-tab-pill-inactive-background-color-pressed"
5666
5906
  },
5667
5907
  {
5668
- "description": "color of the radio button when active",
5669
- "name": "--mdc-radio-control-active-color"
5908
+ "description": "Background color for inactive pill tab in disabled state.",
5909
+ "name": "--mdc-tab-pill-inactive-background-color-disabled"
5670
5910
  },
5671
5911
  {
5672
- "description": "color of the radio button when active and hovered",
5673
- "name": "--mdc-radio-control-active-hover-color"
5912
+ "description": "Background color for inactive pill tab in hover state.",
5913
+ "name": "--mdc-tab-pill-inactive-background-color-hover"
5674
5914
  },
5675
5915
  {
5676
- "description": "color of the radio button when active and pressed",
5677
- "name": "--mdc-radio-control-active-pressed-color"
5916
+ "description": "Background color for inactive pill tab in rest state.",
5917
+ "name": "--mdc-tab-pill-inactive-background-color-normal"
5678
5918
  },
5679
5919
  {
5680
- "description": "background color of the radio button when active and disabled",
5681
- "name": "--mdc-radio-control-active-disabled-background"
5920
+ "description": "Text and icon color for inactive pill tab.",
5921
+ "name": "--mdc-tab-pill-inactive-color"
5922
+ },
5923
+ {
5924
+ "description": "Text and icon color for inactive pill tab in disabled state.",
5925
+ "name": "--mdc-tab-pill-inactive-color-disabled"
5682
5926
  }
5683
5927
  ],
5684
5928
  "members": [
5685
5929
  {
5686
5930
  "kind": "field",
5687
- "name": "checked",
5931
+ "name": "text",
5688
5932
  "type": {
5689
- "text": "boolean"
5933
+ "text": "string | undefined"
5690
5934
  },
5691
- "default": "false",
5692
- "description": "Determines whether the radio is selected or unselected.",
5693
- "attribute": "checked",
5935
+ "description": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
5936
+ "attribute": "text",
5694
5937
  "reflects": true
5695
5938
  },
5696
5939
  {
5697
5940
  "kind": "field",
5698
- "name": "readonly",
5941
+ "name": "variant",
5699
5942
  "type": {
5700
- "text": "boolean"
5701
- },
5702
- "default": "false",
5703
- "description": "Determines whether the radio is read-only.",
5704
- "attribute": "readonly",
5705
- "reflects": true
5706
- },
5707
- {
5708
- "kind": "method",
5709
- "name": "setFormValue",
5710
- "privacy": "private",
5711
- "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
5712
- },
5713
- {
5714
- "kind": "method",
5715
- "name": "getAllRadiosWithinSameGroup",
5716
- "privacy": "private",
5717
- "return": {
5718
- "type": {
5719
- "text": "Radio[]"
5720
- }
5943
+ "text": "Variant"
5721
5944
  },
5722
- "description": "Returns all radios within the same group (name)."
5945
+ "description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
5946
+ "default": "pill",
5947
+ "attribute": "variant",
5948
+ "reflects": true
5723
5949
  },
5724
5950
  {
5725
5951
  "kind": "method",
5726
- "name": "dispatchChangeEvent",
5952
+ "name": "modifyIconName",
5727
5953
  "privacy": "private",
5728
5954
  "return": {
5729
5955
  "type": {
@@ -5732,17 +5958,18 @@
5732
5958
  },
5733
5959
  "parameters": [
5734
5960
  {
5735
- "name": "event",
5961
+ "name": "active",
5736
5962
  "type": {
5737
- "text": "Event"
5738
- }
5963
+ "text": "boolean"
5964
+ },
5965
+ "description": "The active state."
5739
5966
  }
5740
5967
  ],
5741
- "description": "The 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
5968
+ "description": "Modifies the icon name based on the active state.\nIf the tab is active, the icon name is suffixed with '-filled'.\nIf the tab is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
5742
5969
  },
5743
5970
  {
5744
5971
  "kind": "method",
5745
- "name": "handleChange",
5972
+ "name": "setVariant",
5746
5973
  "privacy": "private",
5747
5974
  "return": {
5748
5975
  "type": {
@@ -5751,348 +5978,308 @@
5751
5978
  },
5752
5979
  "parameters": [
5753
5980
  {
5754
- "name": "event",
5981
+ "name": "variant",
5755
5982
  "type": {
5756
- "text": "Event"
5757
- }
5983
+ "text": "Variant"
5984
+ },
5985
+ "description": "The variant to set."
5758
5986
  }
5759
5987
  ],
5760
- "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
5988
+ "description": "Sets the variant attribute for the tab component.\nIf the provided variant is not included in the TAB_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
5761
5989
  },
5762
5990
  {
5763
5991
  "kind": "method",
5764
- "name": "updateRadio",
5765
- "privacy": "private",
5992
+ "name": "setActive",
5993
+ "privacy": "protected",
5766
5994
  "parameters": [
5767
5995
  {
5768
- "name": "enabledRadios",
5769
- "type": {
5770
- "text": "Radio[]"
5771
- },
5772
- "description": "An array of enabled radio buttons within the same group."
5773
- },
5774
- {
5775
- "name": "index",
5996
+ "name": "element",
5776
5997
  "type": {
5777
- "text": "number"
5998
+ "text": "HTMLElement"
5778
5999
  },
5779
- "description": "The index of the radio button to be updated within the enabled radios array."
6000
+ "description": "The tab element."
5780
6001
  },
5781
6002
  {
5782
- "name": "event",
6003
+ "name": "active",
5783
6004
  "type": {
5784
- "text": "Event"
6005
+ "text": "boolean"
5785
6006
  },
5786
- "description": "The event that triggered the update."
5787
- }
5788
- ],
5789
- "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
5790
- },
5791
- {
5792
- "kind": "method",
5793
- "name": "handleKeyDown",
5794
- "privacy": "private",
5795
- "return": {
5796
- "type": {
5797
- "text": "void"
5798
- }
5799
- },
5800
- "parameters": [
5801
- {
5802
- "name": "event",
5803
- "type": {
5804
- "text": "KeyboardEvent"
5805
- }
6007
+ "description": "The active state of the tab."
5806
6008
  }
5807
6009
  ],
5808
- "description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
6010
+ "description": "Sets the aria-selected attribute based on the active state of the Tab.\nIf the tab is active, the filled version of the icon is displayed,\nelse the icon is restored to its original value.",
6011
+ "inheritedFrom": {
6012
+ "name": "Buttonsimple",
6013
+ "module": "components/buttonsimple/buttonsimple.component.js"
6014
+ }
5809
6015
  },
5810
6016
  {
5811
6017
  "kind": "method",
5812
- "name": "updateTabIndex",
5813
- "privacy": "private",
5814
- "return": {
5815
- "type": {
5816
- "text": "void"
5817
- }
5818
- },
5819
- "description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
6018
+ "name": "executeAction",
6019
+ "privacy": "protected",
6020
+ "inheritedFrom": {
6021
+ "name": "Buttonsimple",
6022
+ "module": "components/buttonsimple/buttonsimple.component.js"
6023
+ }
5820
6024
  },
5821
6025
  {
5822
6026
  "kind": "field",
5823
- "name": "name",
6027
+ "name": "role",
6028
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
6029
+ "default": "'tab'",
6030
+ "attribute": "role",
6031
+ "reflects": true,
5824
6032
  "type": {
5825
6033
  "text": "string"
5826
6034
  },
5827
- "default": "''",
5828
- "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
5829
- "attribute": "name",
5830
- "reflects": true,
5831
6035
  "inheritedFrom": {
5832
- "name": "NameMixin",
5833
- "module": "utils/mixins/NameMixin.js"
6036
+ "name": "Buttonsimple",
6037
+ "module": "components/buttonsimple/buttonsimple.component.js"
5834
6038
  }
5835
6039
  },
5836
6040
  {
5837
6041
  "kind": "field",
5838
- "name": "value",
6042
+ "name": "softDisabled",
5839
6043
  "type": {
5840
- "text": "string"
6044
+ "text": "boolean"
5841
6045
  },
5842
- "default": "''",
5843
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
5844
- "attribute": "value",
5845
- "reflects": true,
6046
+ "default": "undefined as unknown",
6047
+ "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
6048
+ "attribute": "soft-disabled",
5846
6049
  "inheritedFrom": {
5847
- "name": "ValueMixin",
5848
- "module": "utils/mixins/ValueMixin.js"
6050
+ "name": "Buttonsimple",
6051
+ "module": "components/buttonsimple/buttonsimple.component.js"
5849
6052
  }
5850
6053
  },
5851
6054
  {
5852
6055
  "kind": "field",
5853
- "name": "dataAriaLabel",
6056
+ "name": "size",
5854
6057
  "type": {
5855
- "text": "string | null"
6058
+ "text": "ButtonSize"
5856
6059
  },
5857
- "default": "null",
5858
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
5859
- "attribute": "data-aria-label",
6060
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
6061
+ "default": "undefined as unknown",
6062
+ "attribute": "size",
5860
6063
  "reflects": true,
5861
6064
  "inheritedFrom": {
5862
- "name": "DataAriaLabelMixin",
5863
- "module": "utils/mixins/DataAriaLabelMixin.js"
6065
+ "name": "Buttonsimple",
6066
+ "module": "components/buttonsimple/buttonsimple.component.js"
5864
6067
  }
5865
6068
  },
5866
6069
  {
5867
6070
  "kind": "field",
5868
- "name": "disabled",
6071
+ "name": "type",
5869
6072
  "type": {
5870
- "text": "boolean"
6073
+ "text": "ButtonType"
5871
6074
  },
5872
- "default": "false",
5873
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
5874
- "attribute": "disabled",
6075
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
6076
+ "default": "undefined as unknown",
6077
+ "attribute": "type",
5875
6078
  "reflects": true,
5876
6079
  "inheritedFrom": {
5877
- "name": "FormfieldWrapper",
5878
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6080
+ "name": "Buttonsimple",
6081
+ "module": "components/buttonsimple/buttonsimple.component.js"
5879
6082
  }
5880
6083
  },
5881
6084
  {
5882
6085
  "kind": "field",
5883
- "name": "label",
6086
+ "name": "iconName",
5884
6087
  "type": {
5885
- "text": "string | undefined"
6088
+ "text": "IconNames | undefined"
5886
6089
  },
5887
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
5888
- "attribute": "label",
5889
- "reflects": true,
6090
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
6091
+ "attribute": "icon-name",
5890
6092
  "inheritedFrom": {
5891
- "name": "FormfieldWrapper",
5892
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6093
+ "name": "IconNameMixin",
6094
+ "module": "utils/mixins/IconNameMixin.js"
5893
6095
  }
5894
6096
  },
5895
6097
  {
5896
6098
  "kind": "field",
5897
- "name": "requiredLabel",
6099
+ "name": "tabIndex",
5898
6100
  "type": {
5899
- "text": "string | undefined"
6101
+ "text": "number"
5900
6102
  },
5901
- "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
5902
- "attribute": "required-label",
6103
+ "default": "0",
6104
+ "description": "This property specifies the tab order of the element.",
6105
+ "attribute": "tabIndex",
5903
6106
  "reflects": true,
5904
6107
  "inheritedFrom": {
5905
- "name": "FormfieldWrapper",
5906
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5907
- }
5908
- },
5909
- {
5910
- "kind": "field",
5911
- "name": "id",
5912
- "default": "`mdc-input-${uuidv4()}`",
5913
- "description": "The unique id of the input field. It is used to link the input field with the label.",
5914
- "attribute": "id",
5915
- "inheritedFrom": {
5916
- "name": "FormfieldWrapper",
5917
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6108
+ "name": "Buttonsimple",
6109
+ "module": "components/buttonsimple/buttonsimple.component.js"
5918
6110
  }
5919
6111
  },
5920
6112
  {
5921
6113
  "kind": "field",
5922
- "name": "helpTextType",
6114
+ "name": "disabled",
5923
6115
  "type": {
5924
- "text": "ValidationType"
6116
+ "text": "boolean"
5925
6117
  },
5926
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
5927
- "attribute": "help-text-type",
6118
+ "default": "false",
6119
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6120
+ "attribute": "disabled",
5928
6121
  "reflects": true,
5929
6122
  "inheritedFrom": {
5930
- "name": "FormfieldWrapper",
5931
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6123
+ "name": "Buttonsimple",
6124
+ "module": "components/buttonsimple/buttonsimple.component.js"
5932
6125
  }
5933
6126
  },
5934
6127
  {
5935
6128
  "kind": "field",
5936
- "name": "helpText",
6129
+ "name": "active",
5937
6130
  "type": {
5938
- "text": "string | undefined"
6131
+ "text": "boolean"
5939
6132
  },
5940
- "description": "The help text that is displayed below the input field.",
5941
- "attribute": "help-text",
6133
+ "default": "false",
6134
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
6135
+ "attribute": "active",
5942
6136
  "reflects": true,
5943
6137
  "inheritedFrom": {
5944
- "name": "FormfieldWrapper",
5945
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5946
- }
5947
- },
5948
- {
5949
- "kind": "method",
5950
- "name": "renderLabelElement",
5951
- "privacy": "protected",
5952
- "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
5953
- "return": {
5954
- "type": {
5955
- "text": ""
5956
- }
5957
- },
5958
- "inheritedFrom": {
5959
- "name": "FormfieldWrapper",
5960
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5961
- }
5962
- },
5963
- {
5964
- "kind": "method",
5965
- "name": "renderRequiredLabel",
5966
- "privacy": "protected",
5967
- "inheritedFrom": {
5968
- "name": "FormfieldWrapper",
5969
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6138
+ "name": "Buttonsimple",
6139
+ "module": "components/buttonsimple/buttonsimple.component.js"
5970
6140
  }
5971
6141
  },
5972
6142
  {
5973
6143
  "kind": "method",
5974
- "name": "renderHelpTextIcon",
5975
- "privacy": "protected",
5976
- "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
5977
- "return": {
5978
- "type": {
5979
- "text": ""
6144
+ "name": "setSoftDisabled",
6145
+ "privacy": "private",
6146
+ "parameters": [
6147
+ {
6148
+ "name": "element",
6149
+ "type": {
6150
+ "text": "HTMLElement"
6151
+ },
6152
+ "description": "The button element."
6153
+ },
6154
+ {
6155
+ "name": "softDisabled",
6156
+ "type": {
6157
+ "text": "boolean"
6158
+ },
6159
+ "description": "The soft-disabled state."
5980
6160
  }
5981
- },
6161
+ ],
6162
+ "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
5982
6163
  "inheritedFrom": {
5983
- "name": "FormfieldWrapper",
5984
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6164
+ "name": "Buttonsimple",
6165
+ "module": "components/buttonsimple/buttonsimple.component.js"
5985
6166
  }
5986
6167
  },
5987
6168
  {
5988
6169
  "kind": "method",
5989
- "name": "renderHelpText",
5990
- "privacy": "protected",
5991
- "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
5992
- "return": {
5993
- "type": {
5994
- "text": ""
6170
+ "name": "setDisabled",
6171
+ "privacy": "private",
6172
+ "parameters": [
6173
+ {
6174
+ "name": "element",
6175
+ "type": {
6176
+ "text": "HTMLElement"
6177
+ },
6178
+ "description": "The button element."
6179
+ },
6180
+ {
6181
+ "name": "disabled",
6182
+ "type": {
6183
+ "text": "boolean"
6184
+ },
6185
+ "description": "The disabled state."
5995
6186
  }
5996
- },
6187
+ ],
6188
+ "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
5997
6189
  "inheritedFrom": {
5998
- "name": "FormfieldWrapper",
5999
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6190
+ "name": "Buttonsimple",
6191
+ "module": "components/buttonsimple/buttonsimple.component.js"
6000
6192
  }
6001
6193
  },
6002
6194
  {
6003
6195
  "kind": "method",
6004
- "name": "renderLabel",
6005
- "privacy": "protected",
6006
- "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
6007
- "return": {
6008
- "type": {
6009
- "text": ""
6010
- }
6011
- },
6196
+ "name": "triggerClickEvent",
6197
+ "privacy": "private",
6012
6198
  "inheritedFrom": {
6013
- "name": "FormfieldWrapper",
6014
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6199
+ "name": "Buttonsimple",
6200
+ "module": "components/buttonsimple/buttonsimple.component.js"
6015
6201
  }
6016
6202
  },
6017
6203
  {
6018
6204
  "kind": "method",
6019
- "name": "renderHelperText",
6020
- "privacy": "protected",
6021
- "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
6022
- "return": {
6023
- "type": {
6024
- "text": ""
6205
+ "name": "handleKeyDown",
6206
+ "privacy": "private",
6207
+ "parameters": [
6208
+ {
6209
+ "name": "event",
6210
+ "type": {
6211
+ "text": "KeyboardEvent"
6212
+ },
6213
+ "description": "The keyboard event."
6025
6214
  }
6026
- },
6215
+ ],
6216
+ "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
6027
6217
  "inheritedFrom": {
6028
- "name": "FormfieldWrapper",
6029
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6218
+ "name": "Buttonsimple",
6219
+ "module": "components/buttonsimple/buttonsimple.component.js"
6030
6220
  }
6031
- }
6032
- ],
6033
- "events": [
6221
+ },
6034
6222
  {
6035
- "type": {
6036
- "text": "EventConstructor"
6223
+ "kind": "method",
6224
+ "name": "handleKeyUp",
6225
+ "privacy": "private",
6226
+ "parameters": [
6227
+ {
6228
+ "name": "event",
6229
+ "type": {
6230
+ "text": "KeyboardEvent"
6231
+ },
6232
+ "description": "The keyboard event."
6233
+ }
6234
+ ],
6235
+ "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
6236
+ "inheritedFrom": {
6237
+ "name": "Buttonsimple",
6238
+ "module": "components/buttonsimple/buttonsimple.component.js"
6037
6239
  }
6038
6240
  }
6039
6241
  ],
6040
6242
  "attributes": [
6041
6243
  {
6042
- "name": "checked",
6043
- "type": {
6044
- "text": "boolean"
6045
- },
6046
- "default": "false",
6047
- "description": "Determines whether the radio is selected or unselected.",
6048
- "fieldName": "checked"
6049
- },
6050
- {
6051
- "name": "readonly",
6244
+ "name": "text",
6052
6245
  "type": {
6053
- "text": "boolean"
6246
+ "text": "string | undefined"
6054
6247
  },
6055
- "default": "false",
6056
- "description": "Determines whether the radio is read-only.",
6057
- "fieldName": "readonly"
6248
+ "description": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
6249
+ "fieldName": "text"
6058
6250
  },
6059
6251
  {
6060
- "name": "name",
6252
+ "name": "variant",
6061
6253
  "type": {
6062
- "text": "string"
6254
+ "text": "Variant"
6063
6255
  },
6064
- "default": "''",
6065
- "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
6066
- "fieldName": "name",
6067
- "inheritedFrom": {
6068
- "name": "NameMixin",
6069
- "module": "src/utils/mixins/NameMixin.ts"
6070
- }
6256
+ "description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
6257
+ "default": "pill",
6258
+ "fieldName": "variant"
6071
6259
  },
6072
6260
  {
6073
- "name": "value",
6261
+ "name": "icon-name",
6074
6262
  "type": {
6075
- "text": "string"
6263
+ "text": "IconNames | undefined"
6076
6264
  },
6077
- "default": "''",
6078
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
6079
- "fieldName": "value",
6265
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
6266
+ "fieldName": "iconName",
6080
6267
  "inheritedFrom": {
6081
- "name": "ValueMixin",
6082
- "module": "src/utils/mixins/ValueMixin.ts"
6268
+ "name": "IconNameMixin",
6269
+ "module": "src/utils/mixins/IconNameMixin.ts"
6083
6270
  }
6084
6271
  },
6085
6272
  {
6086
- "name": "data-aria-label",
6273
+ "name": "tabIndex",
6087
6274
  "type": {
6088
- "text": "string | null"
6275
+ "text": "number"
6089
6276
  },
6090
- "default": "null",
6091
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
6092
- "fieldName": "dataAriaLabel",
6277
+ "default": "0",
6278
+ "description": "This property specifies the tab order of the element.",
6279
+ "fieldName": "tabIndex",
6093
6280
  "inheritedFrom": {
6094
- "name": "DataAriaLabelMixin",
6095
- "module": "src/utils/mixins/DataAriaLabelMixin.ts"
6281
+ "name": "Buttonsimple",
6282
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6096
6283
  }
6097
6284
  },
6098
6285
  {
@@ -6104,100 +6291,86 @@
6104
6291
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6105
6292
  "fieldName": "disabled",
6106
6293
  "inheritedFrom": {
6107
- "name": "FormfieldWrapper",
6108
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6294
+ "name": "Buttonsimple",
6295
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6109
6296
  }
6110
6297
  },
6111
6298
  {
6112
- "name": "label",
6299
+ "name": "active",
6113
6300
  "type": {
6114
- "text": "string | undefined"
6301
+ "text": "boolean"
6115
6302
  },
6116
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
6117
- "fieldName": "label",
6303
+ "default": "false",
6304
+ "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
6305
+ "fieldName": "active",
6118
6306
  "inheritedFrom": {
6119
- "name": "FormfieldWrapper",
6120
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6307
+ "name": "Buttonsimple",
6308
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6121
6309
  }
6122
6310
  },
6123
6311
  {
6124
- "name": "required-label",
6312
+ "name": "soft-disabled",
6125
6313
  "type": {
6126
- "text": "string | undefined"
6314
+ "text": "boolean"
6127
6315
  },
6128
- "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
6129
- "fieldName": "requiredLabel",
6316
+ "default": "false",
6317
+ "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
6318
+ "fieldName": "softDisabled",
6130
6319
  "inheritedFrom": {
6131
- "name": "FormfieldWrapper",
6132
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6320
+ "name": "Buttonsimple",
6321
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6133
6322
  }
6134
6323
  },
6135
6324
  {
6136
- "name": "id",
6137
- "default": "`mdc-input-${uuidv4()}`",
6138
- "description": "The unique id of the input field. It is used to link the input field with the label.",
6139
- "fieldName": "id",
6325
+ "name": "size",
6326
+ "type": {
6327
+ "text": "ButtonSize"
6328
+ },
6329
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
6330
+ "default": "32",
6331
+ "fieldName": "size",
6140
6332
  "inheritedFrom": {
6141
- "name": "FormfieldWrapper",
6142
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6333
+ "name": "Buttonsimple",
6334
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6143
6335
  }
6144
6336
  },
6145
6337
  {
6146
- "name": "help-text-type",
6147
- "type": {
6148
- "text": "ValidationType"
6149
- },
6150
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
6151
- "fieldName": "helpTextType",
6338
+ "name": "role",
6339
+ "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
6340
+ "default": "button",
6341
+ "fieldName": "role",
6152
6342
  "inheritedFrom": {
6153
- "name": "FormfieldWrapper",
6154
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6343
+ "name": "Buttonsimple",
6344
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6155
6345
  }
6156
6346
  },
6157
6347
  {
6158
- "name": "help-text",
6348
+ "name": "type",
6159
6349
  "type": {
6160
- "text": "string | undefined"
6350
+ "text": "ButtonType"
6161
6351
  },
6162
- "description": "The help text that is displayed below the input field.",
6163
- "fieldName": "helpText",
6352
+ "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
6353
+ "default": "button",
6354
+ "fieldName": "type",
6164
6355
  "inheritedFrom": {
6165
- "name": "FormfieldWrapper",
6166
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6356
+ "name": "Buttonsimple",
6357
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6167
6358
  }
6168
6359
  }
6169
6360
  ],
6170
6361
  "mixins": [
6171
6362
  {
6172
- "name": "NameMixin",
6173
- "module": "/src/utils/mixins/NameMixin"
6174
- },
6175
- {
6176
- "name": "ValueMixin",
6177
- "module": "/src/utils/mixins/ValueMixin"
6178
- },
6179
- {
6180
- "name": "DataAriaLabelMixin",
6181
- "module": "/src/utils/mixins/DataAriaLabelMixin"
6363
+ "name": "IconNameMixin",
6364
+ "module": "/src/utils/mixins/IconNameMixin"
6182
6365
  }
6183
6366
  ],
6184
6367
  "superclass": {
6185
- "name": "FormfieldWrapper",
6186
- "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
6368
+ "name": "Buttonsimple",
6369
+ "module": "/src/components/buttonsimple/buttonsimple.component"
6187
6370
  },
6188
- "tagName": "mdc-radio",
6189
- "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n * @dependency mdc-formfieldwrapper\n *\n * @tagname mdc-radio\n *\n * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when\n * inactive and disabled\n * @cssproperty --mdc-radio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button\n * when active and disabled\n *\n */",
6190
- "customElement": true,
6191
- "slots": [
6192
- {
6193
- "description": "slot to add the label info icon",
6194
- "name": "label-info",
6195
- "inheritedFrom": {
6196
- "name": "FormfieldWrapper",
6197
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6198
- }
6199
- }
6200
- ]
6371
+ "tagName": "mdc-tab",
6372
+ "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.\n * @cssproperty --mdc-tab-height - Height of the tab.\n * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.\n * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.\n * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.\n * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.\n * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.\n * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab\n * in hover state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab\n * in rest state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.\n * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.\n * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.\n * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.\n * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.\n * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.\n * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab\n * in pressed state.\n * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab\n * in disabled state\n * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.\n * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab\n * in rest state.\n * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.\n * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.\n * @cssproperty --mdc-tab-padding-left - Padding left for the tab.\n * @cssproperty --mdc-tab-padding-right - Padding right for the tab.\n * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.\n * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.\n * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.\n * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.\n * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.\n * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.\n * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab\n * in pressed state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.\n * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.\n * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.\n */",
6373
+ "customElement": true
6201
6374
  }
6202
6375
  ],
6203
6376
  "exports": [
@@ -6205,8 +6378,8 @@
6205
6378
  "kind": "js",
6206
6379
  "name": "default",
6207
6380
  "declaration": {
6208
- "name": "Radio",
6209
- "module": "components/radio/radio.component.js"
6381
+ "name": "Tab",
6382
+ "module": "components/tab/tab.component.js"
6210
6383
  }
6211
6384
  }
6212
6385
  ]