@momentum-design/components 0.23.3 → 0.24.1

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 (4) hide show
  1. package/dist/custom-elements.json +1125 -1125
  2. package/dist/react/index.d.ts +2 -2
  3. package/dist/react/index.js +2 -2
  4. package/package.json +1 -1
package/dist/custom-elements.json CHANGED
@@ -2,250 +2,6 @@
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
- },
249
5
  {
250
6
  "kind": "javascript-module",
251
7
  "path": "components/avatarbutton/avatarbutton.component.js",
@@ -1121,20 +877,264 @@
1121
877
  },
1122
878
  {
1123
879
  "kind": "javascript-module",
1124
- "path": "components/bullet/bullet.component.js",
880
+ "path": "components/avatar/avatar.component.js",
1125
881
  "declarations": [
1126
882
  {
1127
883
  "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",
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",
1130
886
  "cssProperties": [
1131
887
  {
1132
- "description": "background color of the bullet",
1133
- "name": "--mdc-bullet-background-color"
888
+ "description": "Allows customization of the default background color.",
889
+ "name": "--mdc-avatar-default-background-color"
1134
890
  },
1135
891
  {
1136
- "description": "small size value of the bullet",
1137
- "name": "--mdc-bullet-size-small"
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"
1134
+ },
1135
+ {
1136
+ "description": "small size value of the bullet",
1137
+ "name": "--mdc-bullet-size-small"
1138
1138
  },
1139
1139
  {
1140
1140
  "description": "medium size value of the bullet",
@@ -5505,842 +5505,714 @@
5505
5505
  },
5506
5506
  {
5507
5507
  "kind": "javascript-module",
5508
- "path": "components/tab/tab.component.js",
5508
+ "path": "components/text/text.component.js",
5509
5509
  "declarations": [
5510
5510
  {
5511
5511
  "kind": "class",
5512
- "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.",
5513
- "name": "Tab",
5514
- "cssProperties": [
5512
+ "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
5513
+ "name": "Text",
5514
+ "cssParts": [
5515
5515
  {
5516
- "description": "Gap between the badge(if provided), icon and text.",
5517
- "name": "--mdc-tab-content-gap"
5518
- },
5516
+ "description": "The text element",
5517
+ "name": "text"
5518
+ }
5519
+ ],
5520
+ "slots": [
5519
5521
  {
5520
- "description": "Height of the tab.",
5521
- "name": "--mdc-tab-height"
5522
- },
5522
+ "description": "Default slot for text content",
5523
+ "name": ""
5524
+ }
5525
+ ],
5526
+ "members": [
5523
5527
  {
5524
- "description": "Background color for active glass tab in disabled state.",
5525
- "name": "--mdc-tab-glass-active-background-color-disabled"
5528
+ "kind": "field",
5529
+ "name": "type",
5530
+ "type": {
5531
+ "text": "TextType"
5532
+ },
5533
+ "privacy": "public",
5534
+ "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
5535
+ "default": "body-large-regular",
5536
+ "attribute": "type",
5537
+ "reflects": true
5526
5538
  },
5527
5539
  {
5528
- "description": "Background color for active glass tab in hover state.",
5529
- "name": "--mdc-tab-glass-active-background-color-hover"
5530
- },
5540
+ "kind": "field",
5541
+ "name": "tagname",
5542
+ "type": {
5543
+ "text": "TagName | undefined"
5544
+ },
5545
+ "privacy": "public",
5546
+ "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
5547
+ "attribute": "tagname",
5548
+ "reflects": true
5549
+ }
5550
+ ],
5551
+ "attributes": [
5531
5552
  {
5532
- "description": "Background color for active glass tab in rest state.",
5533
- "name": "--mdc-tab-glass-active-background-color-normal"
5553
+ "name": "type",
5554
+ "type": {
5555
+ "text": "TextType"
5556
+ },
5557
+ "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
5558
+ "default": "body-large-regular",
5559
+ "fieldName": "type"
5534
5560
  },
5535
5561
  {
5536
- "description": "Background color for active glass tab in pressed state.",
5537
- "name": "--mdc-tab-glass-active-background-color-pressed"
5538
- },
5562
+ "name": "tagname",
5563
+ "type": {
5564
+ "text": "TagName | undefined"
5565
+ },
5566
+ "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
5567
+ "fieldName": "tagname"
5568
+ }
5569
+ ],
5570
+ "superclass": {
5571
+ "name": "Component",
5572
+ "module": "/src/models"
5573
+ },
5574
+ "tagName": "mdc-text",
5575
+ "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
5576
+ "customElement": true
5577
+ }
5578
+ ],
5579
+ "exports": [
5580
+ {
5581
+ "kind": "js",
5582
+ "name": "default",
5583
+ "declaration": {
5584
+ "name": "Text",
5585
+ "module": "components/text/text.component.js"
5586
+ }
5587
+ }
5588
+ ]
5589
+ },
5590
+ {
5591
+ "kind": "javascript-module",
5592
+ "path": "components/themeprovider/themeprovider.component.js",
5593
+ "declarations": [
5594
+ {
5595
+ "kind": "class",
5596
+ "description": "ThemeProvider component, which sets the passed in themeclass as class.\nIf the themeclass switches, the existing themeclass will be removed as a class\nand the new themeclass will be added.\n\nCSS variables defined in the themeclass will be used for the styling of child dom nodes.\n\nThemeclass context can be be consumed from Lit child components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes basic font defaults for text.",
5597
+ "name": "ThemeProvider",
5598
+ "cssProperties": [
5539
5599
  {
5540
- "description": "Text and icon color for active glass tab.",
5541
- "name": "--mdc-tab-glass-active-color"
5600
+ "description": "Option to override the default color, default: color-theme-text-primary-normal",
5601
+ "name": "--mdc-themeprovider-color-default"
5542
5602
  },
5543
5603
  {
5544
- "description": "Text and icon color for active glass tab in disabled state.",
5545
- "name": "--mdc-tab-glass-active-color-disabled"
5604
+ "description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
5605
+ "name": "--mdc-themeprovider-font-family"
5546
5606
  },
5547
5607
  {
5548
- "description": "Border radius for glass tab.",
5549
- "name": "--mdc-tab-glass-border-radius"
5608
+ "description": "Option to override the font weight, default: `400`",
5609
+ "name": "--mdc-themeprovider-font-weight"
5550
5610
  },
5551
5611
  {
5552
- "description": "Background color for inactive glass tab in disabled state.",
5553
- "name": "--mdc-tab-glass-inactive-background-color-disabled"
5554
- },
5612
+ "description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
5613
+ "name": "--mdc-themeprovider-letter-spacing-adjustment"
5614
+ }
5615
+ ],
5616
+ "slots": [
5555
5617
  {
5556
- "description": "Background color for inactive glass tab in hover state.",
5557
- "name": "--mdc-tab-glass-inactive-background-color-hover"
5558
- },
5618
+ "description": "children",
5619
+ "name": ""
5620
+ }
5621
+ ],
5622
+ "members": [
5559
5623
  {
5560
- "description": "Background color for inactive glass tab in rest state.",
5561
- "name": "--mdc-tab-glass-inactive-background-color-normal"
5624
+ "kind": "field",
5625
+ "name": "Context",
5626
+ "privacy": "public",
5627
+ "static": true,
5628
+ "description": "Context object of the ThemeProvider, to be consumed by child components",
5629
+ "readonly": true
5562
5630
  },
5563
5631
  {
5564
- "description": "Background color for inactive glass tab in pressed state.",
5565
- "name": "--mdc-tab-glass-inactive-background-color-pressed"
5632
+ "kind": "field",
5633
+ "name": "themeclass",
5634
+ "type": {
5635
+ "text": "string"
5636
+ },
5637
+ "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
5638
+ "attribute": "themeclass"
5566
5639
  },
5567
5640
  {
5568
- "description": "Text and icon color for inactive glass tab.",
5569
- "name": "--mdc-tab-glass-inactive-color"
5641
+ "kind": "method",
5642
+ "name": "updateContext",
5643
+ "privacy": "protected",
5644
+ "return": {
5645
+ "type": {
5646
+ "text": "void"
5647
+ }
5648
+ },
5649
+ "description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
5570
5650
  },
5571
5651
  {
5572
- "description": "Text and icon color for inactive glass tab in disabled state.",
5573
- "name": "--mdc-tab-glass-inactive-color-disabled"
5574
- },
5652
+ "kind": "method",
5653
+ "name": "setThemeInClassList",
5654
+ "privacy": "private",
5655
+ "description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
5656
+ }
5657
+ ],
5658
+ "attributes": [
5575
5659
  {
5576
- "description": "Background color for active line tab in pressed state.",
5577
- "name": "--mdc-tab-line-active-background-color-pressed"
5578
- },
5660
+ "name": "themeclass",
5661
+ "type": {
5662
+ "text": "string"
5663
+ },
5664
+ "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
5665
+ "fieldName": "themeclass"
5666
+ }
5667
+ ],
5668
+ "superclass": {
5669
+ "name": "Provider",
5670
+ "module": "/src/models"
5671
+ },
5672
+ "tagName": "mdc-themeprovider",
5673
+ "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n */",
5674
+ "customElement": true
5675
+ }
5676
+ ],
5677
+ "exports": [
5678
+ {
5679
+ "kind": "js",
5680
+ "name": "default",
5681
+ "declaration": {
5682
+ "name": "ThemeProvider",
5683
+ "module": "components/themeprovider/themeprovider.component.js"
5684
+ }
5685
+ }
5686
+ ]
5687
+ },
5688
+ {
5689
+ "kind": "javascript-module",
5690
+ "path": "components/toggle/toggle.component.js",
5691
+ "declarations": [
5692
+ {
5693
+ "kind": "class",
5694
+ "description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
5695
+ "name": "Toggle",
5696
+ "cssProperties": [
5579
5697
  {
5580
- "description": "Background color for active line tab in disabled state.",
5581
- "name": "--mdc-tab-line-active-background-color-disabled"
5698
+ "description": "width of the toggle",
5699
+ "name": "--mdc-toggle-width"
5582
5700
  },
5583
5701
  {
5584
- "description": "Background color for active line tab in hover state.",
5585
- "name": "--mdc-tab-line-active-background-color-hover"
5702
+ "description": "height of the toggle",
5703
+ "name": "--mdc-toggle-height"
5586
5704
  },
5587
5705
  {
5588
- "description": "Background color for active line tab in rest state.",
5589
- "name": "--mdc-tab-line-active-background-color-normal"
5706
+ "description": "width of the toggle when it's size is compact",
5707
+ "name": "--mdc-toggle-width-compact"
5590
5708
  },
5591
5709
  {
5592
- "description": "Text and icon color for active line tab.",
5593
- "name": "--mdc-tab-line-active-color"
5710
+ "description": "height of the toggle when it's size is compact",
5711
+ "name": "--mdc-toggle-height-compact"
5594
5712
  },
5595
5713
  {
5596
- "description": "Text and icon color for active line tab in disabled state.",
5597
- "name": "--mdc-tab-line-active-color-disabled"
5714
+ "description": "border radius of the toggle",
5715
+ "name": "--mdc-toggle-border-radius"
5598
5716
  },
5599
5717
  {
5600
- "description": "color for indicator in active line tab.",
5601
- "name": "--mdc-tab-line-active-indicator-color"
5718
+ "description": "border radius of the toggle when it's size is compact",
5719
+ "name": "--mdc-toggle-border-radius-compact"
5602
5720
  },
5603
5721
  {
5604
- "description": "Color for indicator in active line tab in disabled state.",
5605
- "name": "--mdc-tab-line-active-indicator-color-disabled"
5722
+ "description": "border of the toggle",
5723
+ "name": "--mdc-toggle-border"
5606
5724
  },
5607
5725
  {
5608
- "description": "Height for indicator in active line tab.",
5609
- "name": "--mdc-tab-line-active-indicator-height"
5726
+ "description": "background color of the inactive toggle in rest state",
5727
+ "name": "--mdc-toggle-inactive-rest-color"
5610
5728
  },
5611
5729
  {
5612
- "description": "Width for indicator in active line tab.",
5613
- "name": "--mdc-tab-line-active-indicator-width"
5730
+ "description": "background color of the inactive toggle in hover state",
5731
+ "name": "--mdc-toggle-inactive-hover-color"
5614
5732
  },
5615
5733
  {
5616
- "description": "Bottom left border radius for line tab.",
5617
- "name": "--mdc-tab-line-border-bottom-left-radius"
5734
+ "description": "background color of the inactive toggle in pressed state",
5735
+ "name": "--mdc-toggle-inactive-pressed-color"
5618
5736
  },
5619
5737
  {
5620
- "description": "Bottom right border radius for line tab.",
5621
- "name": "--mdc-tab-line-border-bottom-right-radius"
5738
+ "description": "background color of the inactive toggle in disabled state",
5739
+ "name": "--mdc-toggle-inactive-disabled-color"
5622
5740
  },
5623
5741
  {
5624
- "description": "Top left border radius for line tab.",
5625
- "name": "--mdc-tab-line-border-top-left-radius"
5742
+ "description": "background color of the active toggle in rest state",
5743
+ "name": "--mdc-toggle-active-rest-color"
5626
5744
  },
5627
5745
  {
5628
- "description": "Top right border radius for line tab.",
5629
- "name": "--mdc-tab-line-border-top-right-radius"
5746
+ "description": "background color of the active toggle in hover state",
5747
+ "name": "--mdc-toggle-active-hover-color"
5630
5748
  },
5631
5749
  {
5632
- "description": "Background color for inactive line tab in pressed state.",
5633
- "name": "--mdc-tab-line-inactive-background-color-pressed"
5750
+ "description": "background color of the active toggle in pressed state",
5751
+ "name": "--mdc-toggle-active-pressed-color"
5634
5752
  },
5635
5753
  {
5636
- "description": "Background color for inactive line tab in disabled state",
5637
- "name": "--mdc-tab-line-inactive-background-color-disabled"
5754
+ "description": "background color of the active toggle in disabled state",
5755
+ "name": "--mdc-toggle-active-disabled-color"
5638
5756
  },
5639
5757
  {
5640
- "description": "Background color for inactive line tab in hover state.",
5641
- "name": "--mdc-tab-line-inactive-background-color-hover"
5642
- },
5643
- {
5644
- "description": "Background color for inactive line tab in rest state.",
5645
- "name": "--mdc-tab-line-inactive-background-color-normal"
5646
- },
5647
- {
5648
- "description": "Text and icon color for inactive line tab.",
5649
- "name": "--mdc-tab-line-inactive-color"
5650
- },
5651
- {
5652
- "description": "Text and icon color for inactive line tab in disabled state.",
5653
- "name": "--mdc-tab-line-inactive-color-disabled"
5654
- },
5655
- {
5656
- "description": "Padding left for the tab.",
5657
- "name": "--mdc-tab-padding-left"
5658
- },
5659
- {
5660
- "description": "Padding right for the tab.",
5661
- "name": "--mdc-tab-padding-right"
5662
- },
5663
- {
5664
- "description": "Background color for active pill tab in pressed state.",
5665
- "name": "--mdc-tab-pill-active-background-color-pressed"
5666
- },
5667
- {
5668
- "description": "Background color for active pill tab in disabled state.",
5669
- "name": "--mdc-tab-pill-active-background-color-disabled"
5670
- },
5671
- {
5672
- "description": "Background color for active pill tab in hover state.",
5673
- "name": "--mdc-tab-pill-active-background-color-hover"
5674
- },
5675
- {
5676
- "description": "Background color for active pill tab in rest state.",
5677
- "name": "--mdc-tab-pill-active-background-color-normal"
5678
- },
5679
- {
5680
- "description": "Text and icon color for active pill tab.",
5681
- "name": "--mdc-tab-pill-active-color"
5682
- },
5683
- {
5684
- "description": "Text and icon color for active pill tab in disabled state.",
5685
- "name": "--mdc-tab-pill-active-color-disabled"
5686
- },
5687
- {
5688
- "description": "Border radius for pill tab.",
5689
- "name": "--mdc-tab-pill-border-radius"
5690
- },
5691
- {
5692
- "description": "Background color for inactive pill tab in pressed state.",
5693
- "name": "--mdc-tab-pill-inactive-background-color-pressed"
5694
- },
5695
- {
5696
- "description": "Background color for inactive pill tab in disabled state.",
5697
- "name": "--mdc-tab-pill-inactive-background-color-disabled"
5698
- },
5699
- {
5700
- "description": "Background color for inactive pill tab in hover state.",
5701
- "name": "--mdc-tab-pill-inactive-background-color-hover"
5702
- },
5703
- {
5704
- "description": "Background color for inactive pill tab in rest state.",
5705
- "name": "--mdc-tab-pill-inactive-background-color-normal"
5706
- },
5707
- {
5708
- "description": "Text and icon color for inactive pill tab.",
5709
- "name": "--mdc-tab-pill-inactive-color"
5758
+ "description": " color of the help text label",
5759
+ "name": "--mdc-toggle-help-text-color"
5710
5760
  },
5711
5761
  {
5712
- "description": "Text and icon color for inactive pill tab in disabled state.",
5713
- "name": "--mdc-tab-pill-inactive-color-disabled"
5762
+ "description": "color of the toggle label and help text in disabled state",
5763
+ "name": "--mdc-toggle-label-color-disabled"
5714
5764
  }
5715
5765
  ],
5716
5766
  "members": [
5717
5767
  {
5718
5768
  "kind": "field",
5719
- "name": "text",
5769
+ "name": "checked",
5720
5770
  "type": {
5721
- "text": "string | undefined"
5771
+ "text": "boolean"
5722
5772
  },
5723
- "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.",
5724
- "attribute": "text",
5773
+ "default": "false",
5774
+ "description": "Determines whether the toggle is active or inactive.",
5775
+ "attribute": "checked",
5725
5776
  "reflects": true
5726
5777
  },
5727
5778
  {
5728
5779
  "kind": "field",
5729
- "name": "variant",
5780
+ "name": "size",
5730
5781
  "type": {
5731
- "text": "Variant"
5782
+ "text": "ToggleSize"
5732
5783
  },
5733
- "description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
5734
- "default": "pill",
5735
- "attribute": "variant",
5784
+ "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
5785
+ "default": "default",
5786
+ "attribute": "size",
5736
5787
  "reflects": true
5737
5788
  },
5738
5789
  {
5739
5790
  "kind": "method",
5740
- "name": "modifyIconName",
5791
+ "name": "setFormValue",
5741
5792
  "privacy": "private",
5742
- "return": {
5743
- "type": {
5744
- "text": "void"
5745
- }
5746
- },
5747
- "parameters": [
5748
- {
5749
- "name": "active",
5750
- "type": {
5751
- "text": "boolean"
5752
- },
5753
- "description": "The active state."
5754
- }
5755
- ],
5756
- "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."
5793
+ "description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
5757
5794
  },
5758
5795
  {
5759
5796
  "kind": "method",
5760
- "name": "setVariant",
5797
+ "name": "toggleState",
5761
5798
  "privacy": "private",
5762
5799
  "return": {
5763
5800
  "type": {
5764
5801
  "text": "void"
5765
5802
  }
5766
5803
  },
5804
+ "description": "Toggles the state of the toggle element.\nIf the element is not disabled, then the checked property is toggled."
5805
+ },
5806
+ {
5807
+ "kind": "method",
5808
+ "name": "handleChange",
5809
+ "privacy": "private",
5767
5810
  "parameters": [
5768
5811
  {
5769
- "name": "variant",
5812
+ "name": "event",
5770
5813
  "type": {
5771
- "text": "Variant"
5772
- },
5773
- "description": "The variant to set."
5814
+ "text": "Event"
5815
+ }
5774
5816
  }
5775
5817
  ],
5776
- "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."
5818
+ "description": "Toggles the state of the toggle element.\nand dispatch the new change event."
5777
5819
  },
5778
5820
  {
5779
5821
  "kind": "method",
5780
- "name": "setActive",
5781
- "privacy": "protected",
5822
+ "name": "setToggleSize",
5823
+ "privacy": "private",
5782
5824
  "parameters": [
5783
5825
  {
5784
- "name": "element",
5785
- "type": {
5786
- "text": "HTMLElement"
5787
- },
5788
- "description": "The tab element."
5789
- },
5790
- {
5791
- "name": "active",
5826
+ "name": "size",
5792
5827
  "type": {
5793
- "text": "boolean"
5828
+ "text": "ToggleSize"
5794
5829
  },
5795
- "description": "The active state of the tab."
5830
+ "description": "The size to set."
5796
5831
  }
5797
5832
  ],
5798
- "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.",
5799
- "inheritedFrom": {
5800
- "name": "Buttonsimple",
5801
- "module": "components/buttonsimple/buttonsimple.component.js"
5802
- }
5833
+ "description": "Sets the size attribute for the toggle component.\nIf the provided size is not included in the TOGGLE_SIZE,\nit defaults to the value specified in DEFAULTS.SIZE."
5803
5834
  },
5804
5835
  {
5805
- "kind": "method",
5806
- "name": "executeAction",
5807
- "privacy": "protected",
5836
+ "kind": "field",
5837
+ "name": "helpTextType",
5838
+ "type": {
5839
+ "text": "ValidationType"
5840
+ },
5841
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
5842
+ "attribute": "help-text-type",
5843
+ "reflects": true,
5844
+ "default": "undefined as unknown",
5808
5845
  "inheritedFrom": {
5809
- "name": "Buttonsimple",
5810
- "module": "components/buttonsimple/buttonsimple.component.js"
5846
+ "name": "FormfieldWrapper",
5847
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5811
5848
  }
5812
5849
  },
5813
5850
  {
5814
5851
  "kind": "field",
5815
- "name": "role",
5816
- "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.",
5817
- "default": "'tab'",
5818
- "attribute": "role",
5819
- "reflects": true,
5852
+ "name": "name",
5820
5853
  "type": {
5821
5854
  "text": "string"
5822
5855
  },
5856
+ "default": "''",
5857
+ "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
5858
+ "attribute": "name",
5859
+ "reflects": true,
5823
5860
  "inheritedFrom": {
5824
- "name": "Buttonsimple",
5825
- "module": "components/buttonsimple/buttonsimple.component.js"
5861
+ "name": "NameMixin",
5862
+ "module": "utils/mixins/NameMixin.js"
5826
5863
  }
5827
5864
  },
5828
5865
  {
5829
5866
  "kind": "field",
5830
- "name": "softDisabled",
5867
+ "name": "value",
5831
5868
  "type": {
5832
- "text": "boolean"
5869
+ "text": "string"
5833
5870
  },
5834
- "default": "undefined as unknown",
5835
- "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.",
5836
- "attribute": "soft-disabled",
5871
+ "default": "''",
5872
+ "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
5873
+ "attribute": "value",
5874
+ "reflects": true,
5837
5875
  "inheritedFrom": {
5838
- "name": "Buttonsimple",
5839
- "module": "components/buttonsimple/buttonsimple.component.js"
5876
+ "name": "ValueMixin",
5877
+ "module": "utils/mixins/ValueMixin.js"
5840
5878
  }
5841
5879
  },
5842
5880
  {
5843
5881
  "kind": "field",
5844
- "name": "size",
5882
+ "name": "dataAriaLabel",
5845
5883
  "type": {
5846
- "text": "ButtonSize"
5884
+ "text": "string | null"
5847
5885
  },
5848
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
5849
- "default": "undefined as unknown",
5850
- "attribute": "size",
5886
+ "default": "null",
5887
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
5888
+ "attribute": "data-aria-label",
5851
5889
  "reflects": true,
5852
5890
  "inheritedFrom": {
5853
- "name": "Buttonsimple",
5854
- "module": "components/buttonsimple/buttonsimple.component.js"
5891
+ "name": "DataAriaLabelMixin",
5892
+ "module": "utils/mixins/DataAriaLabelMixin.js"
5855
5893
  }
5856
5894
  },
5857
5895
  {
5858
5896
  "kind": "field",
5859
- "name": "type",
5897
+ "name": "disabled",
5860
5898
  "type": {
5861
- "text": "ButtonType"
5899
+ "text": "boolean"
5862
5900
  },
5863
- "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.",
5864
- "default": "undefined as unknown",
5865
- "attribute": "type",
5901
+ "default": "false",
5902
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
5903
+ "attribute": "disabled",
5866
5904
  "reflects": true,
5867
5905
  "inheritedFrom": {
5868
- "name": "Buttonsimple",
5869
- "module": "components/buttonsimple/buttonsimple.component.js"
5906
+ "name": "FormfieldWrapper",
5907
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5870
5908
  }
5871
5909
  },
5872
5910
  {
5873
5911
  "kind": "field",
5874
- "name": "iconName",
5912
+ "name": "label",
5875
5913
  "type": {
5876
- "text": "IconNames | undefined"
5914
+ "text": "string | undefined"
5877
5915
  },
5878
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
5879
- "attribute": "icon-name",
5916
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
5917
+ "attribute": "label",
5918
+ "reflects": true,
5880
5919
  "inheritedFrom": {
5881
- "name": "IconNameMixin",
5882
- "module": "utils/mixins/IconNameMixin.js"
5920
+ "name": "FormfieldWrapper",
5921
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5883
5922
  }
5884
5923
  },
5885
5924
  {
5886
5925
  "kind": "field",
5887
- "name": "tabIndex",
5926
+ "name": "requiredLabel",
5888
5927
  "type": {
5889
- "text": "number"
5928
+ "text": "string | undefined"
5890
5929
  },
5891
- "default": "0",
5892
- "description": "This property specifies the tab order of the element.",
5893
- "attribute": "tabIndex",
5930
+ "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.",
5931
+ "attribute": "required-label",
5894
5932
  "reflects": true,
5895
5933
  "inheritedFrom": {
5896
- "name": "Buttonsimple",
5897
- "module": "components/buttonsimple/buttonsimple.component.js"
5934
+ "name": "FormfieldWrapper",
5935
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5898
5936
  }
5899
5937
  },
5900
5938
  {
5901
5939
  "kind": "field",
5902
- "name": "disabled",
5903
- "type": {
5904
- "text": "boolean"
5905
- },
5906
- "default": "false",
5907
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
5908
- "attribute": "disabled",
5909
- "reflects": true,
5940
+ "name": "id",
5941
+ "default": "`mdc-input-${uuidv4()}`",
5942
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
5943
+ "attribute": "id",
5910
5944
  "inheritedFrom": {
5911
- "name": "Buttonsimple",
5912
- "module": "components/buttonsimple/buttonsimple.component.js"
5945
+ "name": "FormfieldWrapper",
5946
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5913
5947
  }
5914
5948
  },
5915
5949
  {
5916
5950
  "kind": "field",
5917
- "name": "active",
5951
+ "name": "helpText",
5918
5952
  "type": {
5919
- "text": "boolean"
5953
+ "text": "string | undefined"
5920
5954
  },
5921
- "default": "false",
5922
- "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.",
5923
- "attribute": "active",
5955
+ "description": "The help text that is displayed below the input field.",
5956
+ "attribute": "help-text",
5924
5957
  "reflects": true,
5925
5958
  "inheritedFrom": {
5926
- "name": "Buttonsimple",
5927
- "module": "components/buttonsimple/buttonsimple.component.js"
5959
+ "name": "FormfieldWrapper",
5960
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5928
5961
  }
5929
5962
  },
5930
5963
  {
5931
5964
  "kind": "method",
5932
- "name": "setSoftDisabled",
5933
- "privacy": "private",
5934
- "parameters": [
5935
- {
5936
- "name": "element",
5937
- "type": {
5938
- "text": "HTMLElement"
5939
- },
5940
- "description": "The button element."
5941
- },
5942
- {
5943
- "name": "softDisabled",
5944
- "type": {
5945
- "text": "boolean"
5946
- },
5947
- "description": "The soft-disabled state."
5965
+ "name": "renderLabelElement",
5966
+ "privacy": "protected",
5967
+ "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
5968
+ "return": {
5969
+ "type": {
5970
+ "text": ""
5948
5971
  }
5949
- ],
5950
- "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.",
5972
+ },
5951
5973
  "inheritedFrom": {
5952
- "name": "Buttonsimple",
5953
- "module": "components/buttonsimple/buttonsimple.component.js"
5974
+ "name": "FormfieldWrapper",
5975
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5954
5976
  }
5955
5977
  },
5956
5978
  {
5957
5979
  "kind": "method",
5958
- "name": "setDisabled",
5959
- "privacy": "private",
5960
- "parameters": [
5961
- {
5962
- "name": "element",
5963
- "type": {
5964
- "text": "HTMLElement"
5965
- },
5966
- "description": "The button element."
5967
- },
5968
- {
5969
- "name": "disabled",
5970
- "type": {
5971
- "text": "boolean"
5972
- },
5973
- "description": "The disabled state."
5980
+ "name": "renderRequiredLabel",
5981
+ "privacy": "protected",
5982
+ "inheritedFrom": {
5983
+ "name": "FormfieldWrapper",
5984
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5985
+ }
5986
+ },
5987
+ {
5988
+ "kind": "method",
5989
+ "name": "renderHelpTextIcon",
5990
+ "privacy": "protected",
5991
+ "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.",
5992
+ "return": {
5993
+ "type": {
5994
+ "text": ""
5974
5995
  }
5975
- ],
5976
- "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.",
5996
+ },
5977
5997
  "inheritedFrom": {
5978
- "name": "Buttonsimple",
5979
- "module": "components/buttonsimple/buttonsimple.component.js"
5998
+ "name": "FormfieldWrapper",
5999
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5980
6000
  }
5981
6001
  },
5982
6002
  {
5983
6003
  "kind": "method",
5984
- "name": "triggerClickEvent",
5985
- "privacy": "private",
6004
+ "name": "renderHelpText",
6005
+ "privacy": "protected",
6006
+ "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.",
6007
+ "return": {
6008
+ "type": {
6009
+ "text": ""
6010
+ }
6011
+ },
5986
6012
  "inheritedFrom": {
5987
- "name": "Buttonsimple",
5988
- "module": "components/buttonsimple/buttonsimple.component.js"
6013
+ "name": "FormfieldWrapper",
6014
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
5989
6015
  }
5990
6016
  },
5991
6017
  {
5992
6018
  "kind": "method",
5993
- "name": "handleKeyDown",
5994
- "privacy": "private",
5995
- "parameters": [
5996
- {
5997
- "name": "event",
5998
- "type": {
5999
- "text": "KeyboardEvent"
6000
- },
6001
- "description": "The keyboard event."
6019
+ "name": "renderLabel",
6020
+ "privacy": "protected",
6021
+ "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
6022
+ "return": {
6023
+ "type": {
6024
+ "text": ""
6002
6025
  }
6003
- ],
6004
- "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.",
6026
+ },
6005
6027
  "inheritedFrom": {
6006
- "name": "Buttonsimple",
6007
- "module": "components/buttonsimple/buttonsimple.component.js"
6028
+ "name": "FormfieldWrapper",
6029
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6008
6030
  }
6009
6031
  },
6010
6032
  {
6011
6033
  "kind": "method",
6012
- "name": "handleKeyUp",
6013
- "privacy": "private",
6014
- "parameters": [
6015
- {
6016
- "name": "event",
6017
- "type": {
6018
- "text": "KeyboardEvent"
6019
- },
6020
- "description": "The keyboard event."
6034
+ "name": "renderHelperText",
6035
+ "privacy": "protected",
6036
+ "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
6037
+ "return": {
6038
+ "type": {
6039
+ "text": ""
6021
6040
  }
6022
- ],
6023
- "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.",
6041
+ },
6024
6042
  "inheritedFrom": {
6025
- "name": "Buttonsimple",
6026
- "module": "components/buttonsimple/buttonsimple.component.js"
6043
+ "name": "FormfieldWrapper",
6044
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6045
+ }
6046
+ }
6047
+ ],
6048
+ "events": [
6049
+ {
6050
+ "type": {
6051
+ "text": "EventConstructor"
6027
6052
  }
6028
6053
  }
6029
6054
  ],
6030
6055
  "attributes": [
6031
6056
  {
6032
- "name": "text",
6057
+ "name": "checked",
6033
6058
  "type": {
6034
- "text": "string | undefined"
6059
+ "text": "boolean"
6035
6060
  },
6036
- "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.",
6037
- "fieldName": "text"
6061
+ "default": "false",
6062
+ "description": "Determines whether the toggle is active or inactive.",
6063
+ "fieldName": "checked"
6038
6064
  },
6039
6065
  {
6040
- "name": "variant",
6066
+ "name": "size",
6041
6067
  "type": {
6042
- "text": "Variant"
6068
+ "text": "ToggleSize"
6043
6069
  },
6044
- "description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
6045
- "default": "pill",
6046
- "fieldName": "variant"
6070
+ "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
6071
+ "default": "default",
6072
+ "fieldName": "size"
6047
6073
  },
6048
6074
  {
6049
- "name": "icon-name",
6075
+ "name": "name",
6050
6076
  "type": {
6051
- "text": "IconNames | undefined"
6077
+ "text": "string"
6052
6078
  },
6053
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
6054
- "fieldName": "iconName",
6079
+ "default": "''",
6080
+ "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
6081
+ "fieldName": "name",
6055
6082
  "inheritedFrom": {
6056
- "name": "IconNameMixin",
6057
- "module": "src/utils/mixins/IconNameMixin.ts"
6083
+ "name": "NameMixin",
6084
+ "module": "src/utils/mixins/NameMixin.ts"
6058
6085
  }
6059
6086
  },
6060
6087
  {
6061
- "name": "tabIndex",
6088
+ "name": "value",
6062
6089
  "type": {
6063
- "text": "number"
6090
+ "text": "string"
6064
6091
  },
6065
- "default": "0",
6066
- "description": "This property specifies the tab order of the element.",
6067
- "fieldName": "tabIndex",
6092
+ "default": "''",
6093
+ "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
6094
+ "fieldName": "value",
6068
6095
  "inheritedFrom": {
6069
- "name": "Buttonsimple",
6070
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6096
+ "name": "ValueMixin",
6097
+ "module": "src/utils/mixins/ValueMixin.ts"
6071
6098
  }
6072
6099
  },
6073
6100
  {
6074
- "name": "disabled",
6101
+ "name": "data-aria-label",
6075
6102
  "type": {
6076
- "text": "boolean"
6103
+ "text": "string | null"
6077
6104
  },
6078
- "default": "false",
6079
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6080
- "fieldName": "disabled",
6105
+ "default": "null",
6106
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
6107
+ "fieldName": "dataAriaLabel",
6081
6108
  "inheritedFrom": {
6082
- "name": "Buttonsimple",
6083
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6109
+ "name": "DataAriaLabelMixin",
6110
+ "module": "src/utils/mixins/DataAriaLabelMixin.ts"
6084
6111
  }
6085
6112
  },
6086
6113
  {
6087
- "name": "active",
6114
+ "name": "disabled",
6088
6115
  "type": {
6089
6116
  "text": "boolean"
6090
6117
  },
6091
6118
  "default": "false",
6092
- "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.",
6093
- "fieldName": "active",
6119
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6120
+ "fieldName": "disabled",
6094
6121
  "inheritedFrom": {
6095
- "name": "Buttonsimple",
6096
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6122
+ "name": "FormfieldWrapper",
6123
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6097
6124
  }
6098
6125
  },
6099
6126
  {
6100
- "name": "soft-disabled",
6127
+ "name": "label",
6101
6128
  "type": {
6102
- "text": "boolean"
6129
+ "text": "string | undefined"
6103
6130
  },
6104
- "default": "false",
6105
- "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.",
6106
- "fieldName": "softDisabled",
6131
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
6132
+ "fieldName": "label",
6107
6133
  "inheritedFrom": {
6108
- "name": "Buttonsimple",
6109
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6134
+ "name": "FormfieldWrapper",
6135
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6110
6136
  }
6111
6137
  },
6112
6138
  {
6113
- "name": "size",
6139
+ "name": "required-label",
6114
6140
  "type": {
6115
- "text": "ButtonSize"
6141
+ "text": "string | undefined"
6116
6142
  },
6117
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
6118
- "default": "32",
6119
- "fieldName": "size",
6143
+ "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.",
6144
+ "fieldName": "requiredLabel",
6120
6145
  "inheritedFrom": {
6121
- "name": "Buttonsimple",
6122
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6146
+ "name": "FormfieldWrapper",
6147
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6123
6148
  }
6124
6149
  },
6125
6150
  {
6126
- "name": "role",
6127
- "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.",
6128
- "default": "button",
6129
- "fieldName": "role",
6151
+ "name": "id",
6152
+ "default": "`mdc-input-${uuidv4()}`",
6153
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
6154
+ "fieldName": "id",
6130
6155
  "inheritedFrom": {
6131
- "name": "Buttonsimple",
6132
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6156
+ "name": "FormfieldWrapper",
6157
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6133
6158
  }
6134
6159
  },
6135
6160
  {
6136
- "name": "type",
6161
+ "name": "help-text-type",
6137
6162
  "type": {
6138
- "text": "ButtonType"
6163
+ "text": "ValidationType"
6139
6164
  },
6140
- "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.",
6141
- "default": "button",
6142
- "fieldName": "type",
6165
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
6166
+ "fieldName": "helpTextType",
6143
6167
  "inheritedFrom": {
6144
- "name": "Buttonsimple",
6145
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6168
+ "name": "FormfieldWrapper",
6169
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6146
6170
  }
6147
- }
6148
- ],
6149
- "mixins": [
6150
- {
6151
- "name": "IconNameMixin",
6152
- "module": "/src/utils/mixins/IconNameMixin"
6153
- }
6154
- ],
6155
- "superclass": {
6156
- "name": "Buttonsimple",
6157
- "module": "/src/components/buttonsimple/buttonsimple.component"
6158
- },
6159
- "tagName": "mdc-tab",
6160
- "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 */",
6161
- "customElement": true
6162
- }
6163
- ],
6164
- "exports": [
6165
- {
6166
- "kind": "js",
6167
- "name": "default",
6168
- "declaration": {
6169
- "name": "Tab",
6170
- "module": "components/tab/tab.component.js"
6171
- }
6172
- }
6173
- ]
6174
- },
6175
- {
6176
- "kind": "javascript-module",
6177
- "path": "components/text/text.component.js",
6178
- "declarations": [
6179
- {
6180
- "kind": "class",
6181
- "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
6182
- "name": "Text",
6183
- "cssParts": [
6184
- {
6185
- "description": "The text element",
6186
- "name": "text"
6187
- }
6188
- ],
6189
- "slots": [
6190
- {
6191
- "description": "Default slot for text content",
6192
- "name": ""
6193
- }
6194
- ],
6195
- "members": [
6196
- {
6197
- "kind": "field",
6198
- "name": "type",
6199
- "type": {
6200
- "text": "TextType"
6201
- },
6202
- "privacy": "public",
6203
- "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
6204
- "default": "body-large-regular",
6205
- "attribute": "type",
6206
- "reflects": true
6207
6171
  },
6208
6172
  {
6209
- "kind": "field",
6210
- "name": "tagname",
6211
- "type": {
6212
- "text": "TagName | undefined"
6213
- },
6214
- "privacy": "public",
6215
- "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
6216
- "attribute": "tagname",
6217
- "reflects": true
6218
- }
6219
- ],
6220
- "attributes": [
6221
- {
6222
- "name": "type",
6223
- "type": {
6224
- "text": "TextType"
6225
- },
6226
- "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
6227
- "default": "body-large-regular",
6228
- "fieldName": "type"
6229
- },
6230
- {
6231
- "name": "tagname",
6232
- "type": {
6233
- "text": "TagName | undefined"
6234
- },
6235
- "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
6236
- "fieldName": "tagname"
6237
- }
6238
- ],
6239
- "superclass": {
6240
- "name": "Component",
6241
- "module": "/src/models"
6242
- },
6243
- "tagName": "mdc-text",
6244
- "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
6245
- "customElement": true
6246
- }
6247
- ],
6248
- "exports": [
6249
- {
6250
- "kind": "js",
6251
- "name": "default",
6252
- "declaration": {
6253
- "name": "Text",
6254
- "module": "components/text/text.component.js"
6255
- }
6256
- }
6257
- ]
6258
- },
6259
- {
6260
- "kind": "javascript-module",
6261
- "path": "components/themeprovider/themeprovider.component.js",
6262
- "declarations": [
6263
- {
6264
- "kind": "class",
6265
- "description": "ThemeProvider component, which sets the passed in themeclass as class.\nIf the themeclass switches, the existing themeclass will be removed as a class\nand the new themeclass will be added.\n\nCSS variables defined in the themeclass will be used for the styling of child dom nodes.\n\nThemeclass context can be be consumed from Lit child components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes basic font defaults for text.",
6266
- "name": "ThemeProvider",
6267
- "cssProperties": [
6268
- {
6269
- "description": "Option to override the default color, default: color-theme-text-primary-normal",
6270
- "name": "--mdc-themeprovider-color-default"
6271
- },
6272
- {
6273
- "description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
6274
- "name": "--mdc-themeprovider-font-family"
6275
- },
6276
- {
6277
- "description": "Option to override the font weight, default: `400`",
6278
- "name": "--mdc-themeprovider-font-weight"
6279
- },
6280
- {
6281
- "description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
6282
- "name": "--mdc-themeprovider-letter-spacing-adjustment"
6283
- }
6284
- ],
6285
- "slots": [
6286
- {
6287
- "description": "children",
6288
- "name": ""
6289
- }
6290
- ],
6291
- "members": [
6292
- {
6293
- "kind": "field",
6294
- "name": "Context",
6295
- "privacy": "public",
6296
- "static": true,
6297
- "description": "Context object of the ThemeProvider, to be consumed by child components",
6298
- "readonly": true
6299
- },
6300
- {
6301
- "kind": "field",
6302
- "name": "themeclass",
6303
- "type": {
6304
- "text": "string"
6305
- },
6306
- "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
6307
- "attribute": "themeclass"
6308
- },
6309
- {
6310
- "kind": "method",
6311
- "name": "updateContext",
6312
- "privacy": "protected",
6313
- "return": {
6314
- "type": {
6315
- "text": "void"
6316
- }
6317
- },
6318
- "description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
6319
- },
6320
- {
6321
- "kind": "method",
6322
- "name": "setThemeInClassList",
6323
- "privacy": "private",
6324
- "description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
6325
- }
6326
- ],
6327
- "attributes": [
6328
- {
6329
- "name": "themeclass",
6173
+ "name": "help-text",
6330
6174
  "type": {
6331
- "text": "string"
6175
+ "text": "string | undefined"
6332
6176
  },
6333
- "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
6334
- "fieldName": "themeclass"
6177
+ "description": "The help text that is displayed below the input field.",
6178
+ "fieldName": "helpText",
6179
+ "inheritedFrom": {
6180
+ "name": "FormfieldWrapper",
6181
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6182
+ }
6183
+ }
6184
+ ],
6185
+ "mixins": [
6186
+ {
6187
+ "name": "NameMixin",
6188
+ "module": "/src/utils/mixins/NameMixin"
6189
+ },
6190
+ {
6191
+ "name": "ValueMixin",
6192
+ "module": "/src/utils/mixins/ValueMixin"
6193
+ },
6194
+ {
6195
+ "name": "DataAriaLabelMixin",
6196
+ "module": "/src/utils/mixins/DataAriaLabelMixin"
6335
6197
  }
6336
6198
  ],
6337
6199
  "superclass": {
6338
- "name": "Provider",
6339
- "module": "/src/models"
6200
+ "name": "FormfieldWrapper",
6201
+ "module": "/src/components/formfieldwrapper"
6340
6202
  },
6341
- "tagName": "mdc-themeprovider",
6342
- "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n */",
6343
- "customElement": true
6203
+ "tagName": "mdc-toggle",
6204
+ "jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-toggle\n *\n * @cssproperty --mdc-toggle-width - width of the toggle\n * @cssproperty --mdc-toggle-height - height of the toggle\n * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border-radius - border radius of the toggle\n * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border - border of the toggle\n * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state\n * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state\n * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state\n * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state\n * @cssproperty --mdc-toggle-help-text-color - color of the help text label\n * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state\n *\n */",
6205
+ "customElement": true,
6206
+ "slots": [
6207
+ {
6208
+ "description": "slot to add the label info icon",
6209
+ "name": "label-info",
6210
+ "inheritedFrom": {
6211
+ "name": "FormfieldWrapper",
6212
+ "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6213
+ }
6214
+ }
6215
+ ]
6344
6216
  }
6345
6217
  ],
6346
6218
  "exports": [
@@ -6348,435 +6220,577 @@
6348
6220
  "kind": "js",
6349
6221
  "name": "default",
6350
6222
  "declaration": {
6351
- "name": "ThemeProvider",
6352
- "module": "components/themeprovider/themeprovider.component.js"
6223
+ "name": "Toggle",
6224
+ "module": "components/toggle/toggle.component.js"
6353
6225
  }
6354
6226
  }
6355
6227
  ]
6356
6228
  },
6357
6229
  {
6358
6230
  "kind": "javascript-module",
6359
- "path": "components/toggle/toggle.component.js",
6231
+ "path": "components/tab/tab.component.js",
6360
6232
  "declarations": [
6361
6233
  {
6362
6234
  "kind": "class",
6363
- "description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
6364
- "name": "Toggle",
6235
+ "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.",
6236
+ "name": "Tab",
6365
6237
  "cssProperties": [
6366
6238
  {
6367
- "description": "width of the toggle",
6368
- "name": "--mdc-toggle-width"
6239
+ "description": "Gap between the badge(if provided), icon and text.",
6240
+ "name": "--mdc-tab-content-gap"
6369
6241
  },
6370
6242
  {
6371
- "description": "height of the toggle",
6372
- "name": "--mdc-toggle-height"
6243
+ "description": "Height of the tab.",
6244
+ "name": "--mdc-tab-height"
6373
6245
  },
6374
6246
  {
6375
- "description": "width of the toggle when it's size is compact",
6376
- "name": "--mdc-toggle-width-compact"
6247
+ "description": "Background color for active glass tab in disabled state.",
6248
+ "name": "--mdc-tab-glass-active-background-color-disabled"
6377
6249
  },
6378
6250
  {
6379
- "description": "height of the toggle when it's size is compact",
6380
- "name": "--mdc-toggle-height-compact"
6251
+ "description": "Background color for active glass tab in hover state.",
6252
+ "name": "--mdc-tab-glass-active-background-color-hover"
6381
6253
  },
6382
6254
  {
6383
- "description": "border radius of the toggle",
6384
- "name": "--mdc-toggle-border-radius"
6255
+ "description": "Background color for active glass tab in rest state.",
6256
+ "name": "--mdc-tab-glass-active-background-color-normal"
6385
6257
  },
6386
6258
  {
6387
- "description": "border radius of the toggle when it's size is compact",
6388
- "name": "--mdc-toggle-border-radius-compact"
6259
+ "description": "Background color for active glass tab in pressed state.",
6260
+ "name": "--mdc-tab-glass-active-background-color-pressed"
6389
6261
  },
6390
6262
  {
6391
- "description": "border of the toggle",
6392
- "name": "--mdc-toggle-border"
6263
+ "description": "Text and icon color for active glass tab.",
6264
+ "name": "--mdc-tab-glass-active-color"
6393
6265
  },
6394
6266
  {
6395
- "description": "background color of the inactive toggle in rest state",
6396
- "name": "--mdc-toggle-inactive-rest-color"
6267
+ "description": "Text and icon color for active glass tab in disabled state.",
6268
+ "name": "--mdc-tab-glass-active-color-disabled"
6397
6269
  },
6398
6270
  {
6399
- "description": "background color of the inactive toggle in hover state",
6400
- "name": "--mdc-toggle-inactive-hover-color"
6271
+ "description": "Border radius for glass tab.",
6272
+ "name": "--mdc-tab-glass-border-radius"
6401
6273
  },
6402
6274
  {
6403
- "description": "background color of the inactive toggle in pressed state",
6404
- "name": "--mdc-toggle-inactive-pressed-color"
6275
+ "description": "Background color for inactive glass tab in disabled state.",
6276
+ "name": "--mdc-tab-glass-inactive-background-color-disabled"
6405
6277
  },
6406
6278
  {
6407
- "description": "background color of the inactive toggle in disabled state",
6408
- "name": "--mdc-toggle-inactive-disabled-color"
6279
+ "description": "Background color for inactive glass tab in hover state.",
6280
+ "name": "--mdc-tab-glass-inactive-background-color-hover"
6409
6281
  },
6410
6282
  {
6411
- "description": "background color of the active toggle in rest state",
6412
- "name": "--mdc-toggle-active-rest-color"
6283
+ "description": "Background color for inactive glass tab in rest state.",
6284
+ "name": "--mdc-tab-glass-inactive-background-color-normal"
6413
6285
  },
6414
6286
  {
6415
- "description": "background color of the active toggle in hover state",
6416
- "name": "--mdc-toggle-active-hover-color"
6287
+ "description": "Background color for inactive glass tab in pressed state.",
6288
+ "name": "--mdc-tab-glass-inactive-background-color-pressed"
6417
6289
  },
6418
6290
  {
6419
- "description": "background color of the active toggle in pressed state",
6420
- "name": "--mdc-toggle-active-pressed-color"
6291
+ "description": "Text and icon color for inactive glass tab.",
6292
+ "name": "--mdc-tab-glass-inactive-color"
6421
6293
  },
6422
6294
  {
6423
- "description": "background color of the active toggle in disabled state",
6424
- "name": "--mdc-toggle-active-disabled-color"
6295
+ "description": "Text and icon color for inactive glass tab in disabled state.",
6296
+ "name": "--mdc-tab-glass-inactive-color-disabled"
6425
6297
  },
6426
6298
  {
6427
- "description": " color of the help text label",
6428
- "name": "--mdc-toggle-help-text-color"
6299
+ "description": "Background color for active line tab in pressed state.",
6300
+ "name": "--mdc-tab-line-active-background-color-pressed"
6429
6301
  },
6430
6302
  {
6431
- "description": "color of the toggle label and help text in disabled state",
6432
- "name": "--mdc-toggle-label-color-disabled"
6303
+ "description": "Background color for active line tab in disabled state.",
6304
+ "name": "--mdc-tab-line-active-background-color-disabled"
6305
+ },
6306
+ {
6307
+ "description": "Background color for active line tab in hover state.",
6308
+ "name": "--mdc-tab-line-active-background-color-hover"
6309
+ },
6310
+ {
6311
+ "description": "Background color for active line tab in rest state.",
6312
+ "name": "--mdc-tab-line-active-background-color-normal"
6313
+ },
6314
+ {
6315
+ "description": "Text and icon color for active line tab.",
6316
+ "name": "--mdc-tab-line-active-color"
6317
+ },
6318
+ {
6319
+ "description": "Text and icon color for active line tab in disabled state.",
6320
+ "name": "--mdc-tab-line-active-color-disabled"
6321
+ },
6322
+ {
6323
+ "description": "color for indicator in active line tab.",
6324
+ "name": "--mdc-tab-line-active-indicator-color"
6325
+ },
6326
+ {
6327
+ "description": "Color for indicator in active line tab in disabled state.",
6328
+ "name": "--mdc-tab-line-active-indicator-color-disabled"
6329
+ },
6330
+ {
6331
+ "description": "Height for indicator in active line tab.",
6332
+ "name": "--mdc-tab-line-active-indicator-height"
6333
+ },
6334
+ {
6335
+ "description": "Width for indicator in active line tab.",
6336
+ "name": "--mdc-tab-line-active-indicator-width"
6337
+ },
6338
+ {
6339
+ "description": "Bottom left border radius for line tab.",
6340
+ "name": "--mdc-tab-line-border-bottom-left-radius"
6341
+ },
6342
+ {
6343
+ "description": "Bottom right border radius for line tab.",
6344
+ "name": "--mdc-tab-line-border-bottom-right-radius"
6345
+ },
6346
+ {
6347
+ "description": "Top left border radius for line tab.",
6348
+ "name": "--mdc-tab-line-border-top-left-radius"
6349
+ },
6350
+ {
6351
+ "description": "Top right border radius for line tab.",
6352
+ "name": "--mdc-tab-line-border-top-right-radius"
6353
+ },
6354
+ {
6355
+ "description": "Background color for inactive line tab in pressed state.",
6356
+ "name": "--mdc-tab-line-inactive-background-color-pressed"
6357
+ },
6358
+ {
6359
+ "description": "Background color for inactive line tab in disabled state",
6360
+ "name": "--mdc-tab-line-inactive-background-color-disabled"
6361
+ },
6362
+ {
6363
+ "description": "Background color for inactive line tab in hover state.",
6364
+ "name": "--mdc-tab-line-inactive-background-color-hover"
6365
+ },
6366
+ {
6367
+ "description": "Background color for inactive line tab in rest state.",
6368
+ "name": "--mdc-tab-line-inactive-background-color-normal"
6369
+ },
6370
+ {
6371
+ "description": "Text and icon color for inactive line tab.",
6372
+ "name": "--mdc-tab-line-inactive-color"
6373
+ },
6374
+ {
6375
+ "description": "Text and icon color for inactive line tab in disabled state.",
6376
+ "name": "--mdc-tab-line-inactive-color-disabled"
6377
+ },
6378
+ {
6379
+ "description": "Padding left for the tab.",
6380
+ "name": "--mdc-tab-padding-left"
6381
+ },
6382
+ {
6383
+ "description": "Padding right for the tab.",
6384
+ "name": "--mdc-tab-padding-right"
6385
+ },
6386
+ {
6387
+ "description": "Background color for active pill tab in pressed state.",
6388
+ "name": "--mdc-tab-pill-active-background-color-pressed"
6389
+ },
6390
+ {
6391
+ "description": "Background color for active pill tab in disabled state.",
6392
+ "name": "--mdc-tab-pill-active-background-color-disabled"
6393
+ },
6394
+ {
6395
+ "description": "Background color for active pill tab in hover state.",
6396
+ "name": "--mdc-tab-pill-active-background-color-hover"
6397
+ },
6398
+ {
6399
+ "description": "Background color for active pill tab in rest state.",
6400
+ "name": "--mdc-tab-pill-active-background-color-normal"
6401
+ },
6402
+ {
6403
+ "description": "Text and icon color for active pill tab.",
6404
+ "name": "--mdc-tab-pill-active-color"
6405
+ },
6406
+ {
6407
+ "description": "Text and icon color for active pill tab in disabled state.",
6408
+ "name": "--mdc-tab-pill-active-color-disabled"
6409
+ },
6410
+ {
6411
+ "description": "Border radius for pill tab.",
6412
+ "name": "--mdc-tab-pill-border-radius"
6413
+ },
6414
+ {
6415
+ "description": "Background color for inactive pill tab in pressed state.",
6416
+ "name": "--mdc-tab-pill-inactive-background-color-pressed"
6417
+ },
6418
+ {
6419
+ "description": "Background color for inactive pill tab in disabled state.",
6420
+ "name": "--mdc-tab-pill-inactive-background-color-disabled"
6421
+ },
6422
+ {
6423
+ "description": "Background color for inactive pill tab in hover state.",
6424
+ "name": "--mdc-tab-pill-inactive-background-color-hover"
6425
+ },
6426
+ {
6427
+ "description": "Background color for inactive pill tab in rest state.",
6428
+ "name": "--mdc-tab-pill-inactive-background-color-normal"
6429
+ },
6430
+ {
6431
+ "description": "Text and icon color for inactive pill tab.",
6432
+ "name": "--mdc-tab-pill-inactive-color"
6433
+ },
6434
+ {
6435
+ "description": "Text and icon color for inactive pill tab in disabled state.",
6436
+ "name": "--mdc-tab-pill-inactive-color-disabled"
6433
6437
  }
6434
6438
  ],
6435
6439
  "members": [
6436
6440
  {
6437
6441
  "kind": "field",
6438
- "name": "checked",
6442
+ "name": "text",
6439
6443
  "type": {
6440
- "text": "boolean"
6444
+ "text": "string | undefined"
6441
6445
  },
6442
- "default": "false",
6443
- "description": "Determines whether the toggle is active or inactive.",
6444
- "attribute": "checked",
6446
+ "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.",
6447
+ "attribute": "text",
6445
6448
  "reflects": true
6446
6449
  },
6447
6450
  {
6448
6451
  "kind": "field",
6449
- "name": "size",
6452
+ "name": "variant",
6450
6453
  "type": {
6451
- "text": "ToggleSize"
6454
+ "text": "Variant"
6452
6455
  },
6453
- "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
6454
- "default": "default",
6455
- "attribute": "size",
6456
+ "description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
6457
+ "default": "pill",
6458
+ "attribute": "variant",
6456
6459
  "reflects": true
6457
6460
  },
6458
6461
  {
6459
6462
  "kind": "method",
6460
- "name": "setFormValue",
6461
- "privacy": "private",
6462
- "description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
6463
- },
6464
- {
6465
- "kind": "method",
6466
- "name": "toggleState",
6463
+ "name": "modifyIconName",
6467
6464
  "privacy": "private",
6468
6465
  "return": {
6469
6466
  "type": {
6470
6467
  "text": "void"
6471
6468
  }
6472
6469
  },
6473
- "description": "Toggles the state of the toggle element.\nIf the element is not disabled, then the checked property is toggled."
6470
+ "parameters": [
6471
+ {
6472
+ "name": "active",
6473
+ "type": {
6474
+ "text": "boolean"
6475
+ },
6476
+ "description": "The active state."
6477
+ }
6478
+ ],
6479
+ "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."
6474
6480
  },
6475
6481
  {
6476
6482
  "kind": "method",
6477
- "name": "handleChange",
6483
+ "name": "setVariant",
6478
6484
  "privacy": "private",
6485
+ "return": {
6486
+ "type": {
6487
+ "text": "void"
6488
+ }
6489
+ },
6479
6490
  "parameters": [
6480
6491
  {
6481
- "name": "event",
6492
+ "name": "variant",
6482
6493
  "type": {
6483
- "text": "Event"
6484
- }
6494
+ "text": "Variant"
6495
+ },
6496
+ "description": "The variant to set."
6485
6497
  }
6486
6498
  ],
6487
- "description": "Toggles the state of the toggle element.\nand dispatch the new change event."
6499
+ "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."
6488
6500
  },
6489
6501
  {
6490
6502
  "kind": "method",
6491
- "name": "setToggleSize",
6492
- "privacy": "private",
6503
+ "name": "setActive",
6504
+ "privacy": "protected",
6493
6505
  "parameters": [
6494
6506
  {
6495
- "name": "size",
6507
+ "name": "element",
6496
6508
  "type": {
6497
- "text": "ToggleSize"
6509
+ "text": "HTMLElement"
6498
6510
  },
6499
- "description": "The size to set."
6511
+ "description": "The tab element."
6512
+ },
6513
+ {
6514
+ "name": "active",
6515
+ "type": {
6516
+ "text": "boolean"
6517
+ },
6518
+ "description": "The active state of the tab."
6500
6519
  }
6501
6520
  ],
6502
- "description": "Sets the size attribute for the toggle component.\nIf the provided size is not included in the TOGGLE_SIZE,\nit defaults to the value specified in DEFAULTS.SIZE."
6521
+ "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.",
6522
+ "inheritedFrom": {
6523
+ "name": "Buttonsimple",
6524
+ "module": "components/buttonsimple/buttonsimple.component.js"
6525
+ }
6503
6526
  },
6504
6527
  {
6505
- "kind": "field",
6506
- "name": "helpTextType",
6507
- "type": {
6508
- "text": "ValidationType"
6509
- },
6510
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
6511
- "attribute": "help-text-type",
6512
- "reflects": true,
6513
- "default": "undefined as unknown",
6528
+ "kind": "method",
6529
+ "name": "executeAction",
6530
+ "privacy": "protected",
6514
6531
  "inheritedFrom": {
6515
- "name": "FormfieldWrapper",
6516
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6532
+ "name": "Buttonsimple",
6533
+ "module": "components/buttonsimple/buttonsimple.component.js"
6517
6534
  }
6518
6535
  },
6519
6536
  {
6520
6537
  "kind": "field",
6521
- "name": "name",
6538
+ "name": "role",
6539
+ "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.",
6540
+ "default": "'tab'",
6541
+ "attribute": "role",
6542
+ "reflects": true,
6522
6543
  "type": {
6523
6544
  "text": "string"
6524
6545
  },
6525
- "default": "''",
6526
- "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
6527
- "attribute": "name",
6528
- "reflects": true,
6529
6546
  "inheritedFrom": {
6530
- "name": "NameMixin",
6531
- "module": "utils/mixins/NameMixin.js"
6547
+ "name": "Buttonsimple",
6548
+ "module": "components/buttonsimple/buttonsimple.component.js"
6532
6549
  }
6533
6550
  },
6534
6551
  {
6535
6552
  "kind": "field",
6536
- "name": "value",
6553
+ "name": "softDisabled",
6537
6554
  "type": {
6538
- "text": "string"
6555
+ "text": "boolean"
6539
6556
  },
6540
- "default": "''",
6541
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
6542
- "attribute": "value",
6543
- "reflects": true,
6557
+ "default": "undefined as unknown",
6558
+ "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.",
6559
+ "attribute": "soft-disabled",
6544
6560
  "inheritedFrom": {
6545
- "name": "ValueMixin",
6546
- "module": "utils/mixins/ValueMixin.js"
6561
+ "name": "Buttonsimple",
6562
+ "module": "components/buttonsimple/buttonsimple.component.js"
6547
6563
  }
6548
6564
  },
6549
6565
  {
6550
6566
  "kind": "field",
6551
- "name": "dataAriaLabel",
6567
+ "name": "size",
6552
6568
  "type": {
6553
- "text": "string | null"
6569
+ "text": "ButtonSize"
6554
6570
  },
6555
- "default": "null",
6556
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
6557
- "attribute": "data-aria-label",
6571
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
6572
+ "default": "undefined as unknown",
6573
+ "attribute": "size",
6558
6574
  "reflects": true,
6559
6575
  "inheritedFrom": {
6560
- "name": "DataAriaLabelMixin",
6561
- "module": "utils/mixins/DataAriaLabelMixin.js"
6576
+ "name": "Buttonsimple",
6577
+ "module": "components/buttonsimple/buttonsimple.component.js"
6562
6578
  }
6563
6579
  },
6564
6580
  {
6565
6581
  "kind": "field",
6566
- "name": "disabled",
6582
+ "name": "type",
6567
6583
  "type": {
6568
- "text": "boolean"
6584
+ "text": "ButtonType"
6569
6585
  },
6570
- "default": "false",
6571
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6572
- "attribute": "disabled",
6586
+ "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.",
6587
+ "default": "undefined as unknown",
6588
+ "attribute": "type",
6573
6589
  "reflects": true,
6574
6590
  "inheritedFrom": {
6575
- "name": "FormfieldWrapper",
6576
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6591
+ "name": "Buttonsimple",
6592
+ "module": "components/buttonsimple/buttonsimple.component.js"
6577
6593
  }
6578
6594
  },
6579
6595
  {
6580
6596
  "kind": "field",
6581
- "name": "label",
6597
+ "name": "iconName",
6582
6598
  "type": {
6583
- "text": "string | undefined"
6599
+ "text": "IconNames | undefined"
6584
6600
  },
6585
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
6586
- "attribute": "label",
6587
- "reflects": true,
6601
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
6602
+ "attribute": "icon-name",
6588
6603
  "inheritedFrom": {
6589
- "name": "FormfieldWrapper",
6590
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6604
+ "name": "IconNameMixin",
6605
+ "module": "utils/mixins/IconNameMixin.js"
6591
6606
  }
6592
6607
  },
6593
6608
  {
6594
6609
  "kind": "field",
6595
- "name": "requiredLabel",
6610
+ "name": "tabIndex",
6596
6611
  "type": {
6597
- "text": "string | undefined"
6612
+ "text": "number"
6598
6613
  },
6599
- "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.",
6600
- "attribute": "required-label",
6614
+ "default": "0",
6615
+ "description": "This property specifies the tab order of the element.",
6616
+ "attribute": "tabIndex",
6601
6617
  "reflects": true,
6602
6618
  "inheritedFrom": {
6603
- "name": "FormfieldWrapper",
6604
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6605
- }
6606
- },
6607
- {
6608
- "kind": "field",
6609
- "name": "id",
6610
- "default": "`mdc-input-${uuidv4()}`",
6611
- "description": "The unique id of the input field. It is used to link the input field with the label.",
6612
- "attribute": "id",
6613
- "inheritedFrom": {
6614
- "name": "FormfieldWrapper",
6615
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6619
+ "name": "Buttonsimple",
6620
+ "module": "components/buttonsimple/buttonsimple.component.js"
6616
6621
  }
6617
6622
  },
6618
6623
  {
6619
6624
  "kind": "field",
6620
- "name": "helpText",
6625
+ "name": "disabled",
6621
6626
  "type": {
6622
- "text": "string | undefined"
6627
+ "text": "boolean"
6623
6628
  },
6624
- "description": "The help text that is displayed below the input field.",
6625
- "attribute": "help-text",
6629
+ "default": "false",
6630
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6631
+ "attribute": "disabled",
6626
6632
  "reflects": true,
6627
6633
  "inheritedFrom": {
6628
- "name": "FormfieldWrapper",
6629
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6634
+ "name": "Buttonsimple",
6635
+ "module": "components/buttonsimple/buttonsimple.component.js"
6630
6636
  }
6631
6637
  },
6632
6638
  {
6633
- "kind": "method",
6634
- "name": "renderLabelElement",
6635
- "privacy": "protected",
6636
- "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
6637
- "return": {
6638
- "type": {
6639
- "text": ""
6640
- }
6639
+ "kind": "field",
6640
+ "name": "active",
6641
+ "type": {
6642
+ "text": "boolean"
6641
6643
  },
6644
+ "default": "false",
6645
+ "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.",
6646
+ "attribute": "active",
6647
+ "reflects": true,
6642
6648
  "inheritedFrom": {
6643
- "name": "FormfieldWrapper",
6644
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6645
- }
6646
- },
6647
- {
6648
- "kind": "method",
6649
- "name": "renderRequiredLabel",
6650
- "privacy": "protected",
6651
- "inheritedFrom": {
6652
- "name": "FormfieldWrapper",
6653
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6649
+ "name": "Buttonsimple",
6650
+ "module": "components/buttonsimple/buttonsimple.component.js"
6654
6651
  }
6655
6652
  },
6656
6653
  {
6657
6654
  "kind": "method",
6658
- "name": "renderHelpTextIcon",
6659
- "privacy": "protected",
6660
- "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.",
6661
- "return": {
6662
- "type": {
6663
- "text": ""
6655
+ "name": "setSoftDisabled",
6656
+ "privacy": "private",
6657
+ "parameters": [
6658
+ {
6659
+ "name": "element",
6660
+ "type": {
6661
+ "text": "HTMLElement"
6662
+ },
6663
+ "description": "The button element."
6664
+ },
6665
+ {
6666
+ "name": "softDisabled",
6667
+ "type": {
6668
+ "text": "boolean"
6669
+ },
6670
+ "description": "The soft-disabled state."
6664
6671
  }
6665
- },
6672
+ ],
6673
+ "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.",
6666
6674
  "inheritedFrom": {
6667
- "name": "FormfieldWrapper",
6668
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6675
+ "name": "Buttonsimple",
6676
+ "module": "components/buttonsimple/buttonsimple.component.js"
6669
6677
  }
6670
6678
  },
6671
6679
  {
6672
6680
  "kind": "method",
6673
- "name": "renderHelpText",
6674
- "privacy": "protected",
6675
- "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.",
6676
- "return": {
6677
- "type": {
6678
- "text": ""
6681
+ "name": "setDisabled",
6682
+ "privacy": "private",
6683
+ "parameters": [
6684
+ {
6685
+ "name": "element",
6686
+ "type": {
6687
+ "text": "HTMLElement"
6688
+ },
6689
+ "description": "The button element."
6690
+ },
6691
+ {
6692
+ "name": "disabled",
6693
+ "type": {
6694
+ "text": "boolean"
6695
+ },
6696
+ "description": "The disabled state."
6679
6697
  }
6680
- },
6698
+ ],
6699
+ "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.",
6681
6700
  "inheritedFrom": {
6682
- "name": "FormfieldWrapper",
6683
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6701
+ "name": "Buttonsimple",
6702
+ "module": "components/buttonsimple/buttonsimple.component.js"
6684
6703
  }
6685
6704
  },
6686
6705
  {
6687
6706
  "kind": "method",
6688
- "name": "renderLabel",
6689
- "privacy": "protected",
6690
- "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
6691
- "return": {
6692
- "type": {
6693
- "text": ""
6694
- }
6695
- },
6707
+ "name": "triggerClickEvent",
6708
+ "privacy": "private",
6696
6709
  "inheritedFrom": {
6697
- "name": "FormfieldWrapper",
6698
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6710
+ "name": "Buttonsimple",
6711
+ "module": "components/buttonsimple/buttonsimple.component.js"
6699
6712
  }
6700
6713
  },
6701
6714
  {
6702
6715
  "kind": "method",
6703
- "name": "renderHelperText",
6704
- "privacy": "protected",
6705
- "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
6706
- "return": {
6707
- "type": {
6708
- "text": ""
6716
+ "name": "handleKeyDown",
6717
+ "privacy": "private",
6718
+ "parameters": [
6719
+ {
6720
+ "name": "event",
6721
+ "type": {
6722
+ "text": "KeyboardEvent"
6723
+ },
6724
+ "description": "The keyboard event."
6709
6725
  }
6710
- },
6726
+ ],
6727
+ "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.",
6711
6728
  "inheritedFrom": {
6712
- "name": "FormfieldWrapper",
6713
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6729
+ "name": "Buttonsimple",
6730
+ "module": "components/buttonsimple/buttonsimple.component.js"
6714
6731
  }
6715
- }
6716
- ],
6717
- "events": [
6732
+ },
6718
6733
  {
6719
- "type": {
6720
- "text": "EventConstructor"
6734
+ "kind": "method",
6735
+ "name": "handleKeyUp",
6736
+ "privacy": "private",
6737
+ "parameters": [
6738
+ {
6739
+ "name": "event",
6740
+ "type": {
6741
+ "text": "KeyboardEvent"
6742
+ },
6743
+ "description": "The keyboard event."
6744
+ }
6745
+ ],
6746
+ "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.",
6747
+ "inheritedFrom": {
6748
+ "name": "Buttonsimple",
6749
+ "module": "components/buttonsimple/buttonsimple.component.js"
6721
6750
  }
6722
6751
  }
6723
6752
  ],
6724
6753
  "attributes": [
6725
6754
  {
6726
- "name": "checked",
6727
- "type": {
6728
- "text": "boolean"
6729
- },
6730
- "default": "false",
6731
- "description": "Determines whether the toggle is active or inactive.",
6732
- "fieldName": "checked"
6733
- },
6734
- {
6735
- "name": "size",
6755
+ "name": "text",
6736
6756
  "type": {
6737
- "text": "ToggleSize"
6757
+ "text": "string | undefined"
6738
6758
  },
6739
- "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
6740
- "default": "default",
6741
- "fieldName": "size"
6759
+ "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.",
6760
+ "fieldName": "text"
6742
6761
  },
6743
6762
  {
6744
- "name": "name",
6763
+ "name": "variant",
6745
6764
  "type": {
6746
- "text": "string"
6765
+ "text": "Variant"
6747
6766
  },
6748
- "default": "''",
6749
- "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
6750
- "fieldName": "name",
6751
- "inheritedFrom": {
6752
- "name": "NameMixin",
6753
- "module": "src/utils/mixins/NameMixin.ts"
6754
- }
6767
+ "description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
6768
+ "default": "pill",
6769
+ "fieldName": "variant"
6755
6770
  },
6756
6771
  {
6757
- "name": "value",
6772
+ "name": "icon-name",
6758
6773
  "type": {
6759
- "text": "string"
6774
+ "text": "IconNames | undefined"
6760
6775
  },
6761
- "default": "''",
6762
- "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
6763
- "fieldName": "value",
6776
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
6777
+ "fieldName": "iconName",
6764
6778
  "inheritedFrom": {
6765
- "name": "ValueMixin",
6766
- "module": "src/utils/mixins/ValueMixin.ts"
6779
+ "name": "IconNameMixin",
6780
+ "module": "src/utils/mixins/IconNameMixin.ts"
6767
6781
  }
6768
6782
  },
6769
6783
  {
6770
- "name": "data-aria-label",
6784
+ "name": "tabIndex",
6771
6785
  "type": {
6772
- "text": "string | null"
6786
+ "text": "number"
6773
6787
  },
6774
- "default": "null",
6775
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
6776
- "fieldName": "dataAriaLabel",
6788
+ "default": "0",
6789
+ "description": "This property specifies the tab order of the element.",
6790
+ "fieldName": "tabIndex",
6777
6791
  "inheritedFrom": {
6778
- "name": "DataAriaLabelMixin",
6779
- "module": "src/utils/mixins/DataAriaLabelMixin.ts"
6792
+ "name": "Buttonsimple",
6793
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6780
6794
  }
6781
6795
  },
6782
6796
  {
@@ -6788,100 +6802,86 @@
6788
6802
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6789
6803
  "fieldName": "disabled",
6790
6804
  "inheritedFrom": {
6791
- "name": "FormfieldWrapper",
6792
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6805
+ "name": "Buttonsimple",
6806
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6793
6807
  }
6794
6808
  },
6795
6809
  {
6796
- "name": "label",
6810
+ "name": "active",
6797
6811
  "type": {
6798
- "text": "string | undefined"
6812
+ "text": "boolean"
6799
6813
  },
6800
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
6801
- "fieldName": "label",
6814
+ "default": "false",
6815
+ "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.",
6816
+ "fieldName": "active",
6802
6817
  "inheritedFrom": {
6803
- "name": "FormfieldWrapper",
6804
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6818
+ "name": "Buttonsimple",
6819
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6805
6820
  }
6806
6821
  },
6807
6822
  {
6808
- "name": "required-label",
6823
+ "name": "soft-disabled",
6809
6824
  "type": {
6810
- "text": "string | undefined"
6825
+ "text": "boolean"
6811
6826
  },
6812
- "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.",
6813
- "fieldName": "requiredLabel",
6827
+ "default": "false",
6828
+ "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.",
6829
+ "fieldName": "softDisabled",
6814
6830
  "inheritedFrom": {
6815
- "name": "FormfieldWrapper",
6816
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6831
+ "name": "Buttonsimple",
6832
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6817
6833
  }
6818
6834
  },
6819
6835
  {
6820
- "name": "id",
6821
- "default": "`mdc-input-${uuidv4()}`",
6822
- "description": "The unique id of the input field. It is used to link the input field with the label.",
6823
- "fieldName": "id",
6836
+ "name": "size",
6837
+ "type": {
6838
+ "text": "ButtonSize"
6839
+ },
6840
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
6841
+ "default": "32",
6842
+ "fieldName": "size",
6824
6843
  "inheritedFrom": {
6825
- "name": "FormfieldWrapper",
6826
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6844
+ "name": "Buttonsimple",
6845
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6827
6846
  }
6828
6847
  },
6829
6848
  {
6830
- "name": "help-text-type",
6831
- "type": {
6832
- "text": "ValidationType"
6833
- },
6834
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
6835
- "fieldName": "helpTextType",
6849
+ "name": "role",
6850
+ "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.",
6851
+ "default": "button",
6852
+ "fieldName": "role",
6836
6853
  "inheritedFrom": {
6837
- "name": "FormfieldWrapper",
6838
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6854
+ "name": "Buttonsimple",
6855
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6839
6856
  }
6840
6857
  },
6841
6858
  {
6842
- "name": "help-text",
6859
+ "name": "type",
6843
6860
  "type": {
6844
- "text": "string | undefined"
6861
+ "text": "ButtonType"
6845
6862
  },
6846
- "description": "The help text that is displayed below the input field.",
6847
- "fieldName": "helpText",
6863
+ "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.",
6864
+ "default": "button",
6865
+ "fieldName": "type",
6848
6866
  "inheritedFrom": {
6849
- "name": "FormfieldWrapper",
6850
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6867
+ "name": "Buttonsimple",
6868
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6851
6869
  }
6852
6870
  }
6853
6871
  ],
6854
6872
  "mixins": [
6855
6873
  {
6856
- "name": "NameMixin",
6857
- "module": "/src/utils/mixins/NameMixin"
6858
- },
6859
- {
6860
- "name": "ValueMixin",
6861
- "module": "/src/utils/mixins/ValueMixin"
6862
- },
6863
- {
6864
- "name": "DataAriaLabelMixin",
6865
- "module": "/src/utils/mixins/DataAriaLabelMixin"
6874
+ "name": "IconNameMixin",
6875
+ "module": "/src/utils/mixins/IconNameMixin"
6866
6876
  }
6867
6877
  ],
6868
6878
  "superclass": {
6869
- "name": "FormfieldWrapper",
6870
- "module": "/src/components/formfieldwrapper"
6879
+ "name": "Buttonsimple",
6880
+ "module": "/src/components/buttonsimple/buttonsimple.component"
6871
6881
  },
6872
- "tagName": "mdc-toggle",
6873
- "jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-toggle\n *\n * @cssproperty --mdc-toggle-width - width of the toggle\n * @cssproperty --mdc-toggle-height - height of the toggle\n * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border-radius - border radius of the toggle\n * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border - border of the toggle\n * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state\n * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state\n * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state\n * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state\n * @cssproperty --mdc-toggle-help-text-color - color of the help text label\n * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state\n *\n */",
6874
- "customElement": true,
6875
- "slots": [
6876
- {
6877
- "description": "slot to add the label info icon",
6878
- "name": "label-info",
6879
- "inheritedFrom": {
6880
- "name": "FormfieldWrapper",
6881
- "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
6882
- }
6883
- }
6884
- ]
6882
+ "tagName": "mdc-tab",
6883
+ "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 */",
6884
+ "customElement": true
6885
6885
  }
6886
6886
  ],
6887
6887
  "exports": [
@@ -6889,8 +6889,8 @@
6889
6889
  "kind": "js",
6890
6890
  "name": "default",
6891
6891
  "declaration": {
6892
- "name": "Toggle",
6893
- "module": "components/toggle/toggle.component.js"
6892
+ "name": "Tab",
6893
+ "module": "components/tab/tab.component.js"
6894
6894
  }
6895
6895
  }
6896
6896
  ]