@momentum-design/components 0.23.0 → 0.23.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 +983 -983
  2. package/dist/react/index.d.ts +3 -3
  3. package/dist/react/index.js +3 -3
  4. package/package.json +1 -1
package/dist/custom-elements.json CHANGED
@@ -2,6 +2,250 @@
2
2
  "schemaVersion": "1.0.0",
3
3
  "readme": "",
4
4
  "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "components/avatar/avatar.component.js",
8
+ "declarations": [
9
+ {
10
+ "kind": "class",
11
+ "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
12
+ "name": "Avatar",
13
+ "cssProperties": [
14
+ {
15
+ "description": "Allows customization of the default background color.",
16
+ "name": "--mdc-avatar-default-background-color"
17
+ },
18
+ {
19
+ "description": "Allows customization of the default foreground color.",
20
+ "name": "--mdc-avatar-default-foreground-color"
21
+ },
22
+ {
23
+ "description": "Allows customization of the loading indicator background color.",
24
+ "name": "--mdc-avatar-loading-indicator-background-color"
25
+ },
26
+ {
27
+ "description": "Allows customization of the loading indicator foreground color.",
28
+ "name": "--mdc-avatar-loading-indicator-foreground-color"
29
+ },
30
+ {
31
+ "description": "Allows customization of the loading overlay background color.",
32
+ "name": "--mdc-avatar-loading-overlay-background-color"
33
+ }
34
+ ],
35
+ "members": [
36
+ {
37
+ "kind": "field",
38
+ "name": "src",
39
+ "type": {
40
+ "text": "string | undefined"
41
+ },
42
+ "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
43
+ "attribute": "src",
44
+ "inheritedFrom": {
45
+ "name": "AvatarComponentMixin",
46
+ "module": "utils/mixins/AvatarComponentMixin.js"
47
+ }
48
+ },
49
+ {
50
+ "kind": "field",
51
+ "name": "initials",
52
+ "type": {
53
+ "text": "string | undefined"
54
+ },
55
+ "description": "The initials to be displayed for the avatar.",
56
+ "attribute": "initials",
57
+ "inheritedFrom": {
58
+ "name": "AvatarComponentMixin",
59
+ "module": "utils/mixins/AvatarComponentMixin.js"
60
+ }
61
+ },
62
+ {
63
+ "kind": "field",
64
+ "name": "presence",
65
+ "type": {
66
+ "text": "PresenceType | undefined"
67
+ },
68
+ "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
69
+ "attribute": "presence",
70
+ "inheritedFrom": {
71
+ "name": "AvatarComponentMixin",
72
+ "module": "utils/mixins/AvatarComponentMixin.js"
73
+ }
74
+ },
75
+ {
76
+ "kind": "field",
77
+ "name": "size",
78
+ "type": {
79
+ "text": "AvatarSize"
80
+ },
81
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
82
+ "default": "32",
83
+ "attribute": "size",
84
+ "reflects": true,
85
+ "inheritedFrom": {
86
+ "name": "AvatarComponentMixin",
87
+ "module": "utils/mixins/AvatarComponentMixin.js"
88
+ }
89
+ },
90
+ {
91
+ "kind": "field",
92
+ "name": "counter",
93
+ "type": {
94
+ "text": "number | undefined"
95
+ },
96
+ "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
97
+ "attribute": "counter",
98
+ "inheritedFrom": {
99
+ "name": "AvatarComponentMixin",
100
+ "module": "utils/mixins/AvatarComponentMixin.js"
101
+ }
102
+ },
103
+ {
104
+ "kind": "field",
105
+ "name": "isTyping",
106
+ "type": {
107
+ "text": "boolean"
108
+ },
109
+ "default": "false",
110
+ "description": "Represents the typing indicator when the user is typing.",
111
+ "attribute": "is-typing",
112
+ "inheritedFrom": {
113
+ "name": "AvatarComponentMixin",
114
+ "module": "utils/mixins/AvatarComponentMixin.js"
115
+ }
116
+ },
117
+ {
118
+ "kind": "field",
119
+ "name": "iconName",
120
+ "type": {
121
+ "text": "IconNames | undefined"
122
+ },
123
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
124
+ "attribute": "icon-name",
125
+ "inheritedFrom": {
126
+ "name": "IconNameMixin",
127
+ "module": "utils/mixins/IconNameMixin.js"
128
+ }
129
+ }
130
+ ],
131
+ "mixins": [
132
+ {
133
+ "name": "AvatarComponentMixin",
134
+ "module": "/src/utils/mixins/AvatarComponentMixin"
135
+ },
136
+ {
137
+ "name": "IconNameMixin",
138
+ "module": "/src/utils/mixins/IconNameMixin"
139
+ }
140
+ ],
141
+ "superclass": {
142
+ "name": "Component",
143
+ "module": "/src/models"
144
+ },
145
+ "tagName": "mdc-avatar",
146
+ "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
147
+ "customElement": true,
148
+ "attributes": [
149
+ {
150
+ "name": "src",
151
+ "type": {
152
+ "text": "string | undefined"
153
+ },
154
+ "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
155
+ "fieldName": "src",
156
+ "inheritedFrom": {
157
+ "name": "AvatarComponentMixin",
158
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
159
+ }
160
+ },
161
+ {
162
+ "name": "initials",
163
+ "type": {
164
+ "text": "string | undefined"
165
+ },
166
+ "description": "The initials to be displayed for the avatar.",
167
+ "fieldName": "initials",
168
+ "inheritedFrom": {
169
+ "name": "AvatarComponentMixin",
170
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
171
+ }
172
+ },
173
+ {
174
+ "name": "presence",
175
+ "type": {
176
+ "text": "PresenceType | undefined"
177
+ },
178
+ "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
179
+ "fieldName": "presence",
180
+ "inheritedFrom": {
181
+ "name": "AvatarComponentMixin",
182
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
183
+ }
184
+ },
185
+ {
186
+ "name": "size",
187
+ "type": {
188
+ "text": "AvatarSize"
189
+ },
190
+ "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
191
+ "default": "32",
192
+ "fieldName": "size",
193
+ "inheritedFrom": {
194
+ "name": "AvatarComponentMixin",
195
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
196
+ }
197
+ },
198
+ {
199
+ "name": "counter",
200
+ "type": {
201
+ "text": "number | undefined"
202
+ },
203
+ "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
204
+ "fieldName": "counter",
205
+ "inheritedFrom": {
206
+ "name": "AvatarComponentMixin",
207
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
208
+ }
209
+ },
210
+ {
211
+ "name": "is-typing",
212
+ "type": {
213
+ "text": "boolean"
214
+ },
215
+ "default": "false",
216
+ "description": "Represents the typing indicator when the user is typing.",
217
+ "fieldName": "isTyping",
218
+ "inheritedFrom": {
219
+ "name": "AvatarComponentMixin",
220
+ "module": "src/utils/mixins/AvatarComponentMixin.ts"
221
+ }
222
+ },
223
+ {
224
+ "name": "icon-name",
225
+ "type": {
226
+ "text": "IconNames | undefined"
227
+ },
228
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
229
+ "fieldName": "iconName",
230
+ "inheritedFrom": {
231
+ "name": "IconNameMixin",
232
+ "module": "src/utils/mixins/IconNameMixin.ts"
233
+ }
234
+ }
235
+ ]
236
+ }
237
+ ],
238
+ "exports": [
239
+ {
240
+ "kind": "js",
241
+ "name": "default",
242
+ "declaration": {
243
+ "name": "Avatar",
244
+ "module": "components/avatar/avatar.component.js"
245
+ }
246
+ }
247
+ ]
248
+ },
5
249
  {
6
250
  "kind": "javascript-module",
7
251
  "path": "components/avatarbutton/avatarbutton.component.js",
@@ -556,115 +800,218 @@
556
800
  },
557
801
  {
558
802
  "kind": "javascript-module",
559
- "path": "components/avatar/avatar.component.js",
803
+ "path": "components/badge/badge.component.js",
560
804
  "declarations": [
561
805
  {
562
806
  "kind": "class",
563
- "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.",
564
- "name": "Avatar",
807
+ "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
808
+ "name": "Badge",
565
809
  "cssProperties": [
566
810
  {
567
- "description": "Allows customization of the default background color.",
568
- "name": "--mdc-avatar-default-background-color"
811
+ "description": "The foreground color of the primary badge.",
812
+ "name": "--mdc-badge-primary-foreground-color"
569
813
  },
570
814
  {
571
- "description": "Allows customization of the default foreground color.",
572
- "name": "--mdc-avatar-default-foreground-color"
815
+ "description": "The background color of the primary badge.",
816
+ "name": "--mdc-badge-primary-background-color"
573
817
  },
574
818
  {
575
- "description": "Allows customization of the loading indicator background color.",
576
- "name": "--mdc-avatar-loading-indicator-background-color"
819
+ "description": "The foreground color of the secondary badge.",
820
+ "name": "--mdc-badge-secondary-foreground-color"
577
821
  },
578
822
  {
579
- "description": "Allows customization of the loading indicator foreground color.",
580
- "name": "--mdc-avatar-loading-indicator-foreground-color"
823
+ "description": "The background color of the secondary badge.",
824
+ "name": "--mdc-badge-secondary-background-color"
581
825
  },
582
826
  {
583
- "description": "Allows customization of the loading overlay background color.",
584
- "name": "--mdc-avatar-loading-overlay-background-color"
827
+ "description": "The foreground color of the success badge.",
828
+ "name": "--mdc-badge-success-foreground-color"
829
+ },
830
+ {
831
+ "description": "The background color of the success badge.",
832
+ "name": "--mdc-badge-success-background-color"
833
+ },
834
+ {
835
+ "description": "The foreground color of the warning badge.",
836
+ "name": "--mdc-badge-warning-foreground-color"
837
+ },
838
+ {
839
+ "description": "The background color of the warning badge.",
840
+ "name": "--mdc-badge-warning-background-color"
841
+ },
842
+ {
843
+ "description": "The foreground color of the error badge.",
844
+ "name": "--mdc-badge-error-foreground-color"
845
+ },
846
+ {
847
+ "description": "The background color of the error badge.",
848
+ "name": "--mdc-badge-error-background-color"
849
+ },
850
+ {
851
+ "description": "The background color of the badge overlay.",
852
+ "name": "--mdc-badge-overlay-background-color"
585
853
  }
586
854
  ],
587
855
  "members": [
588
856
  {
589
857
  "kind": "field",
590
- "name": "src",
858
+ "name": "type",
591
859
  "type": {
592
- "text": "string | undefined"
860
+ "text": "BadgeType | undefined"
593
861
  },
594
- "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.",
595
- "attribute": "src",
596
- "inheritedFrom": {
597
- "name": "AvatarComponentMixin",
598
- "module": "utils/mixins/AvatarComponentMixin.js"
599
- }
862
+ "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
863
+ "attribute": "type",
864
+ "reflects": true
600
865
  },
601
866
  {
602
867
  "kind": "field",
603
- "name": "initials",
868
+ "name": "variant",
604
869
  "type": {
605
- "text": "string | undefined"
870
+ "text": "IconVariant"
606
871
  },
607
- "description": "The initials to be displayed for the avatar.",
608
- "attribute": "initials",
609
- "inheritedFrom": {
610
- "name": "AvatarComponentMixin",
611
- "module": "utils/mixins/AvatarComponentMixin.js"
612
- }
872
+ "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
873
+ "default": "primary",
874
+ "attribute": "variant",
875
+ "reflects": true
613
876
  },
614
877
  {
615
878
  "kind": "field",
616
- "name": "presence",
879
+ "name": "counter",
617
880
  "type": {
618
- "text": "PresenceType | undefined"
881
+ "text": "number | undefined"
619
882
  },
620
- "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`",
621
- "attribute": "presence",
622
- "inheritedFrom": {
623
- "name": "AvatarComponentMixin",
624
- "module": "utils/mixins/AvatarComponentMixin.js"
625
- }
883
+ "description": "Counter is the number which can be provided in the badge.",
884
+ "attribute": "counter"
626
885
  },
627
886
  {
628
887
  "kind": "field",
629
- "name": "size",
888
+ "name": "maxCounter",
630
889
  "type": {
631
- "text": "AvatarSize"
890
+ "text": "number"
632
891
  },
633
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
634
- "default": "32",
635
- "attribute": "size",
636
- "reflects": true,
637
- "inheritedFrom": {
638
- "name": "AvatarComponentMixin",
639
- "module": "utils/mixins/AvatarComponentMixin.js"
640
- }
892
+ "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
893
+ "default": "99",
894
+ "attribute": "max-counter",
895
+ "reflects": true
641
896
  },
642
897
  {
643
898
  "kind": "field",
644
- "name": "counter",
899
+ "name": "overlay",
645
900
  "type": {
646
- "text": "number | undefined"
901
+ "text": "boolean"
647
902
  },
648
- "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`.",
649
- "attribute": "counter",
650
- "inheritedFrom": {
651
- "name": "AvatarComponentMixin",
652
- "module": "utils/mixins/AvatarComponentMixin.js"
653
- }
903
+ "default": "false",
904
+ "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
905
+ "attribute": "overlay"
654
906
  },
655
907
  {
656
908
  "kind": "field",
657
- "name": "isTyping",
909
+ "name": "ariaLabel",
658
910
  "type": {
659
- "text": "boolean"
911
+ "text": "string | null"
660
912
  },
661
- "default": "false",
662
- "description": "Represents the typing indicator when the user is typing.",
663
- "attribute": "is-typing",
664
- "inheritedFrom": {
665
- "name": "AvatarComponentMixin",
666
- "module": "utils/mixins/AvatarComponentMixin.js"
667
- }
913
+ "default": "null",
914
+ "description": "Aria-label attribute to be set for accessibility",
915
+ "attribute": "aria-label"
916
+ },
917
+ {
918
+ "kind": "method",
919
+ "name": "getCounterText",
920
+ "privacy": "private",
921
+ "return": {
922
+ "type": {
923
+ "text": ""
924
+ }
925
+ },
926
+ "parameters": [
927
+ {
928
+ "name": "maxCounter",
929
+ "type": {
930
+ "text": "number"
931
+ },
932
+ "description": "the maximum limit which can be displayed on the badge"
933
+ },
934
+ {
935
+ "name": "counter",
936
+ "optional": true,
937
+ "type": {
938
+ "text": "number"
939
+ },
940
+ "description": "the number to be displayed on the badge"
941
+ }
942
+ ],
943
+ "description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
944
+ },
945
+ {
946
+ "kind": "method",
947
+ "name": "getBadgeIcon",
948
+ "privacy": "private",
949
+ "return": {
950
+ "type": {
951
+ "text": ""
952
+ }
953
+ },
954
+ "parameters": [
955
+ {
956
+ "name": "iconName",
957
+ "type": {
958
+ "text": "string"
959
+ },
960
+ "description": "the name of the icon from the icon set"
961
+ },
962
+ {
963
+ "name": "backgroundClassPostfix",
964
+ "type": {
965
+ "text": "string"
966
+ },
967
+ "description": "postfix for the class to style the badge icon."
968
+ }
969
+ ],
970
+ "description": "Method to generate the badge icon."
971
+ },
972
+ {
973
+ "kind": "method",
974
+ "name": "getBadgeDot",
975
+ "privacy": "private",
976
+ "return": {
977
+ "type": {
978
+ "text": ""
979
+ }
980
+ },
981
+ "description": "Method to generate the badge dot template."
982
+ },
983
+ {
984
+ "kind": "method",
985
+ "name": "getBadgeCounterText",
986
+ "privacy": "private",
987
+ "return": {
988
+ "type": {
989
+ "text": ""
990
+ }
991
+ },
992
+ "description": "Method to generate the badge text and counter template."
993
+ },
994
+ {
995
+ "kind": "method",
996
+ "name": "setRoleByAriaLabel",
997
+ "privacy": "private",
998
+ "return": {
999
+ "type": {
1000
+ "text": "void"
1001
+ }
1002
+ },
1003
+ "description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
1004
+ },
1005
+ {
1006
+ "kind": "method",
1007
+ "name": "getBadgeContentBasedOnType",
1008
+ "privacy": "private",
1009
+ "return": {
1010
+ "type": {
1011
+ "text": ""
1012
+ }
1013
+ },
1014
+ "description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
668
1015
  },
669
1016
  {
670
1017
  "kind": "field",
@@ -680,97 +1027,58 @@
680
1027
  }
681
1028
  }
682
1029
  ],
683
- "mixins": [
684
- {
685
- "name": "AvatarComponentMixin",
686
- "module": "/src/utils/mixins/AvatarComponentMixin"
687
- },
688
- {
689
- "name": "IconNameMixin",
690
- "module": "/src/utils/mixins/IconNameMixin"
691
- }
692
- ],
693
- "superclass": {
694
- "name": "Component",
695
- "module": "/src/models"
696
- },
697
- "tagName": "mdc-avatar",
698
- "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 */",
699
- "customElement": true,
700
1030
  "attributes": [
701
1031
  {
702
- "name": "src",
1032
+ "name": "type",
703
1033
  "type": {
704
- "text": "string | undefined"
1034
+ "text": "BadgeType | undefined"
705
1035
  },
706
- "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.",
707
- "fieldName": "src",
708
- "inheritedFrom": {
709
- "name": "AvatarComponentMixin",
710
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
711
- }
1036
+ "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
1037
+ "fieldName": "type"
712
1038
  },
713
1039
  {
714
- "name": "initials",
1040
+ "name": "variant",
715
1041
  "type": {
716
- "text": "string | undefined"
1042
+ "text": "IconVariant"
717
1043
  },
718
- "description": "The initials to be displayed for the avatar.",
719
- "fieldName": "initials",
720
- "inheritedFrom": {
721
- "name": "AvatarComponentMixin",
722
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
723
- }
1044
+ "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
1045
+ "default": "primary",
1046
+ "fieldName": "variant"
724
1047
  },
725
1048
  {
726
- "name": "presence",
1049
+ "name": "counter",
727
1050
  "type": {
728
- "text": "PresenceType | undefined"
1051
+ "text": "number | undefined"
729
1052
  },
730
- "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`",
731
- "fieldName": "presence",
732
- "inheritedFrom": {
733
- "name": "AvatarComponentMixin",
734
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
735
- }
1053
+ "description": "Counter is the number which can be provided in the badge.",
1054
+ "fieldName": "counter"
736
1055
  },
737
1056
  {
738
- "name": "size",
1057
+ "name": "max-counter",
739
1058
  "type": {
740
- "text": "AvatarSize"
1059
+ "text": "number"
741
1060
  },
742
- "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
743
- "default": "32",
744
- "fieldName": "size",
745
- "inheritedFrom": {
746
- "name": "AvatarComponentMixin",
747
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
748
- }
1061
+ "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
1062
+ "default": "99",
1063
+ "fieldName": "maxCounter"
749
1064
  },
750
1065
  {
751
- "name": "counter",
1066
+ "name": "overlay",
752
1067
  "type": {
753
- "text": "number | undefined"
1068
+ "text": "boolean"
754
1069
  },
755
- "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`.",
756
- "fieldName": "counter",
757
- "inheritedFrom": {
758
- "name": "AvatarComponentMixin",
759
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
760
- }
1070
+ "default": "false",
1071
+ "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
1072
+ "fieldName": "overlay"
761
1073
  },
762
1074
  {
763
- "name": "is-typing",
1075
+ "name": "aria-label",
764
1076
  "type": {
765
- "text": "boolean"
1077
+ "text": "string | null"
766
1078
  },
767
- "default": "false",
768
- "description": "Represents the typing indicator when the user is typing.",
769
- "fieldName": "isTyping",
770
- "inheritedFrom": {
771
- "name": "AvatarComponentMixin",
772
- "module": "src/utils/mixins/AvatarComponentMixin.ts"
773
- }
1079
+ "default": "null",
1080
+ "description": "Aria-label attribute to be set for accessibility",
1081
+ "fieldName": "ariaLabel"
774
1082
  },
775
1083
  {
776
1084
  "name": "icon-name",
@@ -784,7 +1092,20 @@
784
1092
  "module": "src/utils/mixins/IconNameMixin.ts"
785
1093
  }
786
1094
  }
787
- ]
1095
+ ],
1096
+ "mixins": [
1097
+ {
1098
+ "name": "IconNameMixin",
1099
+ "module": "/src/utils/mixins/IconNameMixin"
1100
+ }
1101
+ ],
1102
+ "superclass": {
1103
+ "name": "Component",
1104
+ "module": "/src/models"
1105
+ },
1106
+ "tagName": "mdc-badge",
1107
+ "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
1108
+ "customElement": true
788
1109
  }
789
1110
  ],
790
1111
  "exports": [
@@ -792,8 +1113,8 @@
792
1113
  "kind": "js",
793
1114
  "name": "default",
794
1115
  "declaration": {
795
- "name": "Avatar",
796
- "module": "components/avatar/avatar.component.js"
1116
+ "name": "Badge",
1117
+ "module": "components/badge/badge.component.js"
797
1118
  }
798
1119
  }
799
1120
  ]
@@ -883,812 +1204,491 @@
883
1204
  "name": ""
884
1205
  }
885
1206
  ],
886
- "members": [
887
- {
888
- "kind": "field",
889
- "name": "prefixIcon",
890
- "type": {
891
- "text": "string | undefined"
892
- },
893
- "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
894
- "attribute": "prefix-icon",
895
- "reflects": true
896
- },
897
- {
898
- "kind": "field",
899
- "name": "postfixIcon",
900
- "type": {
901
- "text": "string | undefined"
902
- },
903
- "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
904
- "attribute": "postfix-icon",
905
- "reflects": true
906
- },
907
- {
908
- "kind": "field",
909
- "name": "variant",
910
- "type": {
911
- "text": "ButtonVariant"
912
- },
913
- "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
914
- "default": "primary",
915
- "attribute": "variant"
916
- },
917
- {
918
- "kind": "field",
919
- "name": "size",
920
- "type": {
921
- "text": "ButtonSize"
922
- },
923
- "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
924
- "default": "32",
925
- "attribute": "size",
926
- "reflects": true,
927
- "inheritedFrom": {
928
- "name": "Buttonsimple",
929
- "module": "components/buttonsimple/buttonsimple.component.js"
930
- }
931
- },
932
- {
933
- "kind": "field",
934
- "name": "color",
935
- "type": {
936
- "text": "ButtonColor"
937
- },
938
- "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
939
- "default": "default",
940
- "attribute": "color"
941
- },
942
- {
943
- "kind": "field",
944
- "name": "role",
945
- "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.",
946
- "default": "'button'",
947
- "attribute": "role",
948
- "reflects": true,
949
- "type": {
950
- "text": "string"
951
- },
952
- "inheritedFrom": {
953
- "name": "Buttonsimple",
954
- "module": "components/buttonsimple/buttonsimple.component.js"
955
- }
956
- },
957
- {
958
- "kind": "method",
959
- "name": "modifyIconName",
960
- "privacy": "private",
961
- "parameters": [
962
- {
963
- "name": "active",
964
- "type": {
965
- "text": "boolean"
966
- },
967
- "description": "The active state."
968
- }
969
- ],
970
- "description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
971
- },
972
- {
973
- "kind": "method",
974
- "name": "setVariant",
975
- "privacy": "private",
976
- "parameters": [
977
- {
978
- "name": "variant",
979
- "type": {
980
- "text": "ButtonVariant"
981
- },
982
- "description": "The variant to set."
983
- }
984
- ],
985
- "description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
986
- },
987
- {
988
- "kind": "method",
989
- "name": "setSize",
990
- "privacy": "private",
991
- "parameters": [
992
- {
993
- "name": "size",
994
- "type": {
995
- "text": "PillButtonSize | IconButtonSize"
996
- },
997
- "description": "The size to set."
998
- }
999
- ],
1000
- "description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid."
1001
- },
1002
- {
1003
- "kind": "method",
1004
- "name": "setColor",
1005
- "privacy": "private",
1006
- "parameters": [
1007
- {
1008
- "name": "color",
1009
- "type": {
1010
- "text": "ButtonColor"
1011
- },
1012
- "description": "The color to set."
1013
- }
1014
- ],
1015
- "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary buttons."
1016
- },
1017
- {
1018
- "kind": "method",
1019
- "name": "inferButtonType",
1020
- "privacy": "private",
1021
- "description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
1022
- "parameters": [
1023
- {
1024
- "description": "default slot of button",
1025
- "name": "slot"
1026
- }
1027
- ]
1028
- },
1029
- {
1030
- "kind": "field",
1031
- "name": "tabIndex",
1032
- "type": {
1033
- "text": "number"
1034
- },
1035
- "default": "0",
1036
- "description": "This property specifies the tab order of the element.",
1037
- "attribute": "tabIndex",
1038
- "reflects": true,
1039
- "inheritedFrom": {
1040
- "name": "TabIndexMixin",
1041
- "module": "utils/mixins/TabIndexMixin.js"
1042
- }
1043
- },
1044
- {
1045
- "kind": "field",
1046
- "name": "disabled",
1047
- "type": {
1048
- "text": "boolean"
1049
- },
1050
- "default": "false",
1051
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
1052
- "attribute": "disabled",
1053
- "reflects": true,
1054
- "inheritedFrom": {
1055
- "name": "DisabledMixin",
1056
- "module": "utils/mixins/DisabledMixin.js"
1057
- }
1058
- },
1059
- {
1060
- "kind": "field",
1061
- "name": "active",
1062
- "type": {
1063
- "text": "boolean"
1064
- },
1065
- "default": "false",
1066
- "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.",
1067
- "attribute": "active",
1068
- "reflects": true,
1069
- "inheritedFrom": {
1070
- "name": "Buttonsimple",
1071
- "module": "components/buttonsimple/buttonsimple.component.js"
1072
- }
1073
- },
1074
- {
1075
- "kind": "field",
1076
- "name": "softDisabled",
1077
- "type": {
1078
- "text": "boolean"
1079
- },
1080
- "default": "false",
1081
- "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.",
1082
- "attribute": "soft-disabled",
1083
- "inheritedFrom": {
1084
- "name": "Buttonsimple",
1085
- "module": "components/buttonsimple/buttonsimple.component.js"
1086
- }
1087
- },
1088
- {
1089
- "kind": "field",
1090
- "name": "type",
1091
- "type": {
1092
- "text": "ButtonType"
1093
- },
1094
- "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.",
1095
- "default": "button",
1096
- "attribute": "type",
1097
- "reflects": true,
1098
- "inheritedFrom": {
1099
- "name": "Buttonsimple",
1100
- "module": "components/buttonsimple/buttonsimple.component.js"
1101
- }
1102
- },
1103
- {
1104
- "kind": "method",
1105
- "name": "executeAction",
1106
- "privacy": "protected",
1107
- "inheritedFrom": {
1108
- "name": "Buttonsimple",
1109
- "module": "components/buttonsimple/buttonsimple.component.js"
1110
- }
1111
- },
1112
- {
1113
- "kind": "method",
1114
- "name": "setActive",
1115
- "privacy": "protected",
1116
- "parameters": [
1117
- {
1118
- "name": "element",
1119
- "type": {
1120
- "text": "HTMLElement"
1121
- },
1122
- "description": "The button element"
1123
- },
1124
- {
1125
- "name": "active",
1126
- "type": {
1127
- "text": "boolean"
1128
- },
1129
- "description": "The active state of the element"
1130
- }
1131
- ],
1132
- "description": "Sets the aria-pressed attribute based on the active state of the button.",
1133
- "inheritedFrom": {
1134
- "name": "Buttonsimple",
1135
- "module": "components/buttonsimple/buttonsimple.component.js"
1136
- }
1137
- },
1138
- {
1139
- "kind": "method",
1140
- "name": "setSoftDisabled",
1141
- "privacy": "private",
1142
- "parameters": [
1143
- {
1144
- "name": "element",
1145
- "type": {
1146
- "text": "HTMLElement"
1147
- },
1148
- "description": "The button element."
1149
- },
1150
- {
1151
- "name": "softDisabled",
1152
- "type": {
1153
- "text": "boolean"
1154
- },
1155
- "description": "The soft-disabled state."
1156
- }
1157
- ],
1158
- "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.",
1159
- "inheritedFrom": {
1160
- "name": "Buttonsimple",
1161
- "module": "components/buttonsimple/buttonsimple.component.js"
1162
- }
1163
- },
1164
- {
1165
- "kind": "method",
1166
- "name": "setDisabled",
1167
- "privacy": "private",
1168
- "parameters": [
1169
- {
1170
- "name": "element",
1171
- "type": {
1172
- "text": "HTMLElement"
1173
- },
1174
- "description": "The button element."
1175
- },
1176
- {
1177
- "name": "disabled",
1178
- "type": {
1179
- "text": "boolean"
1180
- },
1181
- "description": "The disabled state."
1182
- }
1183
- ],
1184
- "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.",
1185
- "inheritedFrom": {
1186
- "name": "Buttonsimple",
1187
- "module": "components/buttonsimple/buttonsimple.component.js"
1188
- }
1189
- },
1190
- {
1191
- "kind": "method",
1192
- "name": "triggerClickEvent",
1193
- "privacy": "private",
1194
- "inheritedFrom": {
1195
- "name": "Buttonsimple",
1196
- "module": "components/buttonsimple/buttonsimple.component.js"
1197
- }
1198
- },
1199
- {
1200
- "kind": "method",
1201
- "name": "handleKeyDown",
1202
- "privacy": "private",
1203
- "parameters": [
1204
- {
1205
- "name": "event",
1206
- "type": {
1207
- "text": "KeyboardEvent"
1208
- },
1209
- "description": "The keyboard event."
1210
- }
1211
- ],
1212
- "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.",
1213
- "inheritedFrom": {
1214
- "name": "Buttonsimple",
1215
- "module": "components/buttonsimple/buttonsimple.component.js"
1216
- }
1217
- },
1218
- {
1219
- "kind": "method",
1220
- "name": "handleKeyUp",
1221
- "privacy": "private",
1222
- "parameters": [
1223
- {
1224
- "name": "event",
1225
- "type": {
1226
- "text": "KeyboardEvent"
1227
- },
1228
- "description": "The keyboard event."
1229
- }
1230
- ],
1231
- "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.",
1232
- "inheritedFrom": {
1233
- "name": "Buttonsimple",
1234
- "module": "components/buttonsimple/buttonsimple.component.js"
1235
- }
1236
- }
1237
- ],
1238
- "attributes": [
1207
+ "members": [
1239
1208
  {
1240
- "name": "prefix-icon",
1209
+ "kind": "field",
1210
+ "name": "prefixIcon",
1241
1211
  "type": {
1242
1212
  "text": "string | undefined"
1243
1213
  },
1244
1214
  "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
1245
- "fieldName": "prefixIcon"
1215
+ "attribute": "prefix-icon",
1216
+ "reflects": true
1246
1217
  },
1247
1218
  {
1248
- "name": "postfix-icon",
1219
+ "kind": "field",
1220
+ "name": "postfixIcon",
1249
1221
  "type": {
1250
1222
  "text": "string | undefined"
1251
1223
  },
1252
1224
  "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
1253
- "fieldName": "postfixIcon"
1225
+ "attribute": "postfix-icon",
1226
+ "reflects": true
1254
1227
  },
1255
1228
  {
1229
+ "kind": "field",
1256
1230
  "name": "variant",
1257
1231
  "type": {
1258
1232
  "text": "ButtonVariant"
1259
1233
  },
1260
1234
  "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
1261
1235
  "default": "primary",
1262
- "fieldName": "variant"
1236
+ "attribute": "variant"
1263
1237
  },
1264
1238
  {
1239
+ "kind": "field",
1265
1240
  "name": "size",
1266
1241
  "type": {
1267
1242
  "text": "ButtonSize"
1268
1243
  },
1269
1244
  "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
1270
1245
  "default": "32",
1271
- "fieldName": "size",
1246
+ "attribute": "size",
1247
+ "reflects": true,
1272
1248
  "inheritedFrom": {
1273
1249
  "name": "Buttonsimple",
1274
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1250
+ "module": "components/buttonsimple/buttonsimple.component.js"
1275
1251
  }
1276
1252
  },
1277
1253
  {
1254
+ "kind": "field",
1278
1255
  "name": "color",
1279
1256
  "type": {
1280
1257
  "text": "ButtonColor"
1281
1258
  },
1282
1259
  "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
1283
1260
  "default": "default",
1284
- "fieldName": "color"
1261
+ "attribute": "color"
1285
1262
  },
1286
1263
  {
1264
+ "kind": "field",
1287
1265
  "name": "role",
1288
1266
  "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.",
1289
1267
  "default": "'button'",
1290
- "fieldName": "role",
1268
+ "attribute": "role",
1269
+ "reflects": true,
1291
1270
  "type": {
1292
1271
  "text": "string"
1293
1272
  },
1294
1273
  "inheritedFrom": {
1295
1274
  "name": "Buttonsimple",
1296
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1297
- }
1298
- },
1299
- {
1300
- "name": "tabIndex",
1301
- "type": {
1302
- "text": "number"
1303
- },
1304
- "default": "0",
1305
- "description": "This property specifies the tab order of the element.",
1306
- "fieldName": "tabIndex",
1307
- "inheritedFrom": {
1308
- "name": "TabIndexMixin",
1309
- "module": "src/utils/mixins/TabIndexMixin.ts"
1310
- }
1311
- },
1312
- {
1313
- "name": "disabled",
1314
- "type": {
1315
- "text": "boolean"
1316
- },
1317
- "default": "false",
1318
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
1319
- "fieldName": "disabled",
1320
- "inheritedFrom": {
1321
- "name": "DisabledMixin",
1322
- "module": "src/utils/mixins/DisabledMixin.ts"
1323
- }
1324
- },
1325
- {
1326
- "name": "active",
1327
- "type": {
1328
- "text": "boolean"
1329
- },
1330
- "default": "false",
1331
- "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.",
1332
- "fieldName": "active",
1333
- "inheritedFrom": {
1334
- "name": "Buttonsimple",
1335
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1336
- }
1337
- },
1338
- {
1339
- "name": "soft-disabled",
1340
- "type": {
1341
- "text": "boolean"
1342
- },
1343
- "default": "false",
1344
- "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.",
1345
- "fieldName": "softDisabled",
1346
- "inheritedFrom": {
1347
- "name": "Buttonsimple",
1348
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1349
- }
1350
- },
1351
- {
1352
- "name": "type",
1353
- "type": {
1354
- "text": "ButtonType"
1355
- },
1356
- "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.",
1357
- "default": "button",
1358
- "fieldName": "type",
1359
- "inheritedFrom": {
1360
- "name": "Buttonsimple",
1361
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
1275
+ "module": "components/buttonsimple/buttonsimple.component.js"
1362
1276
  }
1363
- }
1364
- ],
1365
- "superclass": {
1366
- "name": "Buttonsimple",
1367
- "module": "/src/components/buttonsimple/buttonsimple.component"
1368
- },
1369
- "tagName": "mdc-button",
1370
- "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
1371
- "customElement": true
1372
- }
1373
- ],
1374
- "exports": [
1375
- {
1376
- "kind": "js",
1377
- "name": "default",
1378
- "declaration": {
1379
- "name": "Button",
1380
- "module": "components/button/button.component.js"
1381
- }
1382
- }
1383
- ]
1384
- },
1385
- {
1386
- "kind": "javascript-module",
1387
- "path": "components/badge/badge.component.js",
1388
- "declarations": [
1389
- {
1390
- "kind": "class",
1391
- "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
1392
- "name": "Badge",
1393
- "cssProperties": [
1394
- {
1395
- "description": "The foreground color of the primary badge.",
1396
- "name": "--mdc-badge-primary-foreground-color"
1397
- },
1398
- {
1399
- "description": "The background color of the primary badge.",
1400
- "name": "--mdc-badge-primary-background-color"
1401
- },
1402
- {
1403
- "description": "The foreground color of the secondary badge.",
1404
- "name": "--mdc-badge-secondary-foreground-color"
1405
- },
1406
- {
1407
- "description": "The background color of the secondary badge.",
1408
- "name": "--mdc-badge-secondary-background-color"
1409
- },
1410
- {
1411
- "description": "The foreground color of the success badge.",
1412
- "name": "--mdc-badge-success-foreground-color"
1413
- },
1414
- {
1415
- "description": "The background color of the success badge.",
1416
- "name": "--mdc-badge-success-background-color"
1417
1277
  },
1418
1278
  {
1419
- "description": "The foreground color of the warning badge.",
1420
- "name": "--mdc-badge-warning-foreground-color"
1279
+ "kind": "method",
1280
+ "name": "modifyIconName",
1281
+ "privacy": "private",
1282
+ "parameters": [
1283
+ {
1284
+ "name": "active",
1285
+ "type": {
1286
+ "text": "boolean"
1287
+ },
1288
+ "description": "The active state."
1289
+ }
1290
+ ],
1291
+ "description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
1421
1292
  },
1422
1293
  {
1423
- "description": "The background color of the warning badge.",
1424
- "name": "--mdc-badge-warning-background-color"
1294
+ "kind": "method",
1295
+ "name": "setVariant",
1296
+ "privacy": "private",
1297
+ "parameters": [
1298
+ {
1299
+ "name": "variant",
1300
+ "type": {
1301
+ "text": "ButtonVariant"
1302
+ },
1303
+ "description": "The variant to set."
1304
+ }
1305
+ ],
1306
+ "description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
1425
1307
  },
1426
1308
  {
1427
- "description": "The foreground color of the error badge.",
1428
- "name": "--mdc-badge-error-foreground-color"
1309
+ "kind": "method",
1310
+ "name": "setSize",
1311
+ "privacy": "private",
1312
+ "parameters": [
1313
+ {
1314
+ "name": "size",
1315
+ "type": {
1316
+ "text": "PillButtonSize | IconButtonSize"
1317
+ },
1318
+ "description": "The size to set."
1319
+ }
1320
+ ],
1321
+ "description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid."
1429
1322
  },
1430
1323
  {
1431
- "description": "The background color of the error badge.",
1432
- "name": "--mdc-badge-error-background-color"
1324
+ "kind": "method",
1325
+ "name": "setColor",
1326
+ "privacy": "private",
1327
+ "parameters": [
1328
+ {
1329
+ "name": "color",
1330
+ "type": {
1331
+ "text": "ButtonColor"
1332
+ },
1333
+ "description": "The color to set."
1334
+ }
1335
+ ],
1336
+ "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary buttons."
1433
1337
  },
1434
1338
  {
1435
- "description": "The background color of the badge overlay.",
1436
- "name": "--mdc-badge-overlay-background-color"
1437
- }
1438
- ],
1439
- "members": [
1440
- {
1441
- "kind": "field",
1442
- "name": "type",
1443
- "type": {
1444
- "text": "BadgeType | undefined"
1445
- },
1446
- "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
1447
- "attribute": "type",
1448
- "reflects": true
1339
+ "kind": "method",
1340
+ "name": "inferButtonType",
1341
+ "privacy": "private",
1342
+ "description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
1343
+ "parameters": [
1344
+ {
1345
+ "description": "default slot of button",
1346
+ "name": "slot"
1347
+ }
1348
+ ]
1449
1349
  },
1450
1350
  {
1451
1351
  "kind": "field",
1452
- "name": "variant",
1352
+ "name": "tabIndex",
1453
1353
  "type": {
1454
- "text": "IconVariant"
1354
+ "text": "number"
1455
1355
  },
1456
- "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
1457
- "default": "primary",
1458
- "attribute": "variant",
1459
- "reflects": true
1356
+ "default": "0",
1357
+ "description": "This property specifies the tab order of the element.",
1358
+ "attribute": "tabIndex",
1359
+ "reflects": true,
1360
+ "inheritedFrom": {
1361
+ "name": "TabIndexMixin",
1362
+ "module": "utils/mixins/TabIndexMixin.js"
1363
+ }
1460
1364
  },
1461
1365
  {
1462
1366
  "kind": "field",
1463
- "name": "counter",
1367
+ "name": "disabled",
1464
1368
  "type": {
1465
- "text": "number | undefined"
1369
+ "text": "boolean"
1466
1370
  },
1467
- "description": "Counter is the number which can be provided in the badge.",
1468
- "attribute": "counter"
1371
+ "default": "false",
1372
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
1373
+ "attribute": "disabled",
1374
+ "reflects": true,
1375
+ "inheritedFrom": {
1376
+ "name": "DisabledMixin",
1377
+ "module": "utils/mixins/DisabledMixin.js"
1378
+ }
1469
1379
  },
1470
1380
  {
1471
1381
  "kind": "field",
1472
- "name": "maxCounter",
1382
+ "name": "active",
1473
1383
  "type": {
1474
- "text": "number"
1384
+ "text": "boolean"
1475
1385
  },
1476
- "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
1477
- "default": "99",
1478
- "attribute": "max-counter",
1479
- "reflects": true
1386
+ "default": "false",
1387
+ "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.",
1388
+ "attribute": "active",
1389
+ "reflects": true,
1390
+ "inheritedFrom": {
1391
+ "name": "Buttonsimple",
1392
+ "module": "components/buttonsimple/buttonsimple.component.js"
1393
+ }
1480
1394
  },
1481
1395
  {
1482
1396
  "kind": "field",
1483
- "name": "overlay",
1397
+ "name": "softDisabled",
1484
1398
  "type": {
1485
1399
  "text": "boolean"
1486
1400
  },
1487
1401
  "default": "false",
1488
- "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
1489
- "attribute": "overlay"
1402
+ "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.",
1403
+ "attribute": "soft-disabled",
1404
+ "inheritedFrom": {
1405
+ "name": "Buttonsimple",
1406
+ "module": "components/buttonsimple/buttonsimple.component.js"
1407
+ }
1490
1408
  },
1491
1409
  {
1492
1410
  "kind": "field",
1493
- "name": "ariaLabel",
1411
+ "name": "type",
1494
1412
  "type": {
1495
- "text": "string | null"
1413
+ "text": "ButtonType"
1496
1414
  },
1497
- "default": "null",
1498
- "description": "Aria-label attribute to be set for accessibility",
1499
- "attribute": "aria-label"
1415
+ "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.",
1416
+ "default": "button",
1417
+ "attribute": "type",
1418
+ "reflects": true,
1419
+ "inheritedFrom": {
1420
+ "name": "Buttonsimple",
1421
+ "module": "components/buttonsimple/buttonsimple.component.js"
1422
+ }
1500
1423
  },
1501
1424
  {
1502
1425
  "kind": "method",
1503
- "name": "getCounterText",
1504
- "privacy": "private",
1505
- "return": {
1506
- "type": {
1507
- "text": ""
1508
- }
1509
- },
1426
+ "name": "executeAction",
1427
+ "privacy": "protected",
1428
+ "inheritedFrom": {
1429
+ "name": "Buttonsimple",
1430
+ "module": "components/buttonsimple/buttonsimple.component.js"
1431
+ }
1432
+ },
1433
+ {
1434
+ "kind": "method",
1435
+ "name": "setActive",
1436
+ "privacy": "protected",
1510
1437
  "parameters": [
1511
1438
  {
1512
- "name": "maxCounter",
1439
+ "name": "element",
1513
1440
  "type": {
1514
- "text": "number"
1441
+ "text": "HTMLElement"
1515
1442
  },
1516
- "description": "the maximum limit which can be displayed on the badge"
1443
+ "description": "The button element"
1517
1444
  },
1518
1445
  {
1519
- "name": "counter",
1520
- "optional": true,
1446
+ "name": "active",
1521
1447
  "type": {
1522
- "text": "number"
1448
+ "text": "boolean"
1523
1449
  },
1524
- "description": "the number to be displayed on the badge"
1450
+ "description": "The active state of the element"
1525
1451
  }
1526
1452
  ],
1527
- "description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
1453
+ "description": "Sets the aria-pressed attribute based on the active state of the button.",
1454
+ "inheritedFrom": {
1455
+ "name": "Buttonsimple",
1456
+ "module": "components/buttonsimple/buttonsimple.component.js"
1457
+ }
1528
1458
  },
1529
1459
  {
1530
1460
  "kind": "method",
1531
- "name": "getBadgeIcon",
1461
+ "name": "setSoftDisabled",
1532
1462
  "privacy": "private",
1533
- "return": {
1534
- "type": {
1535
- "text": ""
1536
- }
1537
- },
1538
1463
  "parameters": [
1539
1464
  {
1540
- "name": "iconName",
1465
+ "name": "element",
1541
1466
  "type": {
1542
- "text": "string"
1467
+ "text": "HTMLElement"
1543
1468
  },
1544
- "description": "the name of the icon from the icon set"
1469
+ "description": "The button element."
1545
1470
  },
1546
1471
  {
1547
- "name": "backgroundClassPostfix",
1472
+ "name": "softDisabled",
1548
1473
  "type": {
1549
- "text": "string"
1474
+ "text": "boolean"
1550
1475
  },
1551
- "description": "postfix for the class to style the badge icon."
1476
+ "description": "The soft-disabled state."
1552
1477
  }
1553
1478
  ],
1554
- "description": "Method to generate the badge icon."
1479
+ "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.",
1480
+ "inheritedFrom": {
1481
+ "name": "Buttonsimple",
1482
+ "module": "components/buttonsimple/buttonsimple.component.js"
1483
+ }
1555
1484
  },
1556
1485
  {
1557
1486
  "kind": "method",
1558
- "name": "getBadgeDot",
1487
+ "name": "setDisabled",
1559
1488
  "privacy": "private",
1560
- "return": {
1561
- "type": {
1562
- "text": ""
1489
+ "parameters": [
1490
+ {
1491
+ "name": "element",
1492
+ "type": {
1493
+ "text": "HTMLElement"
1494
+ },
1495
+ "description": "The button element."
1496
+ },
1497
+ {
1498
+ "name": "disabled",
1499
+ "type": {
1500
+ "text": "boolean"
1501
+ },
1502
+ "description": "The disabled state."
1563
1503
  }
1564
- },
1565
- "description": "Method to generate the badge dot template."
1504
+ ],
1505
+ "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.",
1506
+ "inheritedFrom": {
1507
+ "name": "Buttonsimple",
1508
+ "module": "components/buttonsimple/buttonsimple.component.js"
1509
+ }
1566
1510
  },
1567
1511
  {
1568
1512
  "kind": "method",
1569
- "name": "getBadgeCounterText",
1513
+ "name": "triggerClickEvent",
1570
1514
  "privacy": "private",
1571
- "return": {
1572
- "type": {
1573
- "text": ""
1574
- }
1575
- },
1576
- "description": "Method to generate the badge text and counter template."
1515
+ "inheritedFrom": {
1516
+ "name": "Buttonsimple",
1517
+ "module": "components/buttonsimple/buttonsimple.component.js"
1518
+ }
1577
1519
  },
1578
1520
  {
1579
1521
  "kind": "method",
1580
- "name": "setRoleByAriaLabel",
1522
+ "name": "handleKeyDown",
1581
1523
  "privacy": "private",
1582
- "return": {
1583
- "type": {
1584
- "text": "void"
1524
+ "parameters": [
1525
+ {
1526
+ "name": "event",
1527
+ "type": {
1528
+ "text": "KeyboardEvent"
1529
+ },
1530
+ "description": "The keyboard event."
1585
1531
  }
1586
- },
1587
- "description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
1532
+ ],
1533
+ "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.",
1534
+ "inheritedFrom": {
1535
+ "name": "Buttonsimple",
1536
+ "module": "components/buttonsimple/buttonsimple.component.js"
1537
+ }
1588
1538
  },
1589
1539
  {
1590
1540
  "kind": "method",
1591
- "name": "getBadgeContentBasedOnType",
1541
+ "name": "handleKeyUp",
1592
1542
  "privacy": "private",
1593
- "return": {
1594
- "type": {
1595
- "text": ""
1543
+ "parameters": [
1544
+ {
1545
+ "name": "event",
1546
+ "type": {
1547
+ "text": "KeyboardEvent"
1548
+ },
1549
+ "description": "The keyboard event."
1596
1550
  }
1597
- },
1598
- "description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
1599
- },
1600
- {
1601
- "kind": "field",
1602
- "name": "iconName",
1603
- "type": {
1604
- "text": "IconNames | undefined"
1605
- },
1606
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
1607
- "attribute": "icon-name",
1551
+ ],
1552
+ "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.",
1608
1553
  "inheritedFrom": {
1609
- "name": "IconNameMixin",
1610
- "module": "utils/mixins/IconNameMixin.js"
1554
+ "name": "Buttonsimple",
1555
+ "module": "components/buttonsimple/buttonsimple.component.js"
1611
1556
  }
1612
1557
  }
1613
1558
  ],
1614
1559
  "attributes": [
1615
1560
  {
1616
- "name": "type",
1561
+ "name": "prefix-icon",
1617
1562
  "type": {
1618
- "text": "BadgeType | undefined"
1563
+ "text": "string | undefined"
1619
1564
  },
1620
- "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
1621
- "fieldName": "type"
1565
+ "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
1566
+ "fieldName": "prefixIcon"
1567
+ },
1568
+ {
1569
+ "name": "postfix-icon",
1570
+ "type": {
1571
+ "text": "string | undefined"
1572
+ },
1573
+ "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
1574
+ "fieldName": "postfixIcon"
1622
1575
  },
1623
1576
  {
1624
1577
  "name": "variant",
1625
1578
  "type": {
1626
- "text": "IconVariant"
1579
+ "text": "ButtonVariant"
1627
1580
  },
1628
- "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
1581
+ "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
1629
1582
  "default": "primary",
1630
1583
  "fieldName": "variant"
1631
1584
  },
1632
1585
  {
1633
- "name": "counter",
1586
+ "name": "size",
1634
1587
  "type": {
1635
- "text": "number | undefined"
1588
+ "text": "ButtonSize"
1636
1589
  },
1637
- "description": "Counter is the number which can be provided in the badge.",
1638
- "fieldName": "counter"
1590
+ "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
1591
+ "default": "32",
1592
+ "fieldName": "size",
1593
+ "inheritedFrom": {
1594
+ "name": "Buttonsimple",
1595
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1596
+ }
1639
1597
  },
1640
1598
  {
1641
- "name": "max-counter",
1599
+ "name": "color",
1600
+ "type": {
1601
+ "text": "ButtonColor"
1602
+ },
1603
+ "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
1604
+ "default": "default",
1605
+ "fieldName": "color"
1606
+ },
1607
+ {
1608
+ "name": "role",
1609
+ "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.",
1610
+ "default": "'button'",
1611
+ "fieldName": "role",
1612
+ "type": {
1613
+ "text": "string"
1614
+ },
1615
+ "inheritedFrom": {
1616
+ "name": "Buttonsimple",
1617
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1618
+ }
1619
+ },
1620
+ {
1621
+ "name": "tabIndex",
1642
1622
  "type": {
1643
1623
  "text": "number"
1644
1624
  },
1645
- "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
1646
- "default": "99",
1647
- "fieldName": "maxCounter"
1625
+ "default": "0",
1626
+ "description": "This property specifies the tab order of the element.",
1627
+ "fieldName": "tabIndex",
1628
+ "inheritedFrom": {
1629
+ "name": "TabIndexMixin",
1630
+ "module": "src/utils/mixins/TabIndexMixin.ts"
1631
+ }
1648
1632
  },
1649
1633
  {
1650
- "name": "overlay",
1634
+ "name": "disabled",
1651
1635
  "type": {
1652
1636
  "text": "boolean"
1653
1637
  },
1654
1638
  "default": "false",
1655
- "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
1656
- "fieldName": "overlay"
1639
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
1640
+ "fieldName": "disabled",
1641
+ "inheritedFrom": {
1642
+ "name": "DisabledMixin",
1643
+ "module": "src/utils/mixins/DisabledMixin.ts"
1644
+ }
1657
1645
  },
1658
1646
  {
1659
- "name": "aria-label",
1647
+ "name": "active",
1660
1648
  "type": {
1661
- "text": "string | null"
1649
+ "text": "boolean"
1662
1650
  },
1663
- "default": "null",
1664
- "description": "Aria-label attribute to be set for accessibility",
1665
- "fieldName": "ariaLabel"
1651
+ "default": "false",
1652
+ "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.",
1653
+ "fieldName": "active",
1654
+ "inheritedFrom": {
1655
+ "name": "Buttonsimple",
1656
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1657
+ }
1666
1658
  },
1667
1659
  {
1668
- "name": "icon-name",
1660
+ "name": "soft-disabled",
1669
1661
  "type": {
1670
- "text": "IconNames | undefined"
1662
+ "text": "boolean"
1671
1663
  },
1672
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
1673
- "fieldName": "iconName",
1664
+ "default": "false",
1665
+ "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.",
1666
+ "fieldName": "softDisabled",
1674
1667
  "inheritedFrom": {
1675
- "name": "IconNameMixin",
1676
- "module": "src/utils/mixins/IconNameMixin.ts"
1668
+ "name": "Buttonsimple",
1669
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1677
1670
  }
1678
- }
1679
- ],
1680
- "mixins": [
1671
+ },
1681
1672
  {
1682
- "name": "IconNameMixin",
1683
- "module": "/src/utils/mixins/IconNameMixin"
1673
+ "name": "type",
1674
+ "type": {
1675
+ "text": "ButtonType"
1676
+ },
1677
+ "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.",
1678
+ "default": "button",
1679
+ "fieldName": "type",
1680
+ "inheritedFrom": {
1681
+ "name": "Buttonsimple",
1682
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
1683
+ }
1684
1684
  }
1685
1685
  ],
1686
1686
  "superclass": {
1687
- "name": "Component",
1688
- "module": "/src/models"
1687
+ "name": "Buttonsimple",
1688
+ "module": "/src/components/buttonsimple/buttonsimple.component"
1689
1689
  },
1690
- "tagName": "mdc-badge",
1691
- "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
1690
+ "tagName": "mdc-button",
1691
+ "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
1692
1692
  "customElement": true
1693
1693
  }
1694
1694
  ],
@@ -1697,8 +1697,8 @@
1697
1697
  "kind": "js",
1698
1698
  "name": "default",
1699
1699
  "declaration": {
1700
- "name": "Badge",
1701
- "module": "components/badge/badge.component.js"
1700
+ "name": "Button",
1701
+ "module": "components/button/button.component.js"
1702
1702
  }
1703
1703
  }
1704
1704
  ]
@@ -2784,48 +2784,242 @@
2784
2784
  ],
2785
2785
  "attributes": [
2786
2786
  {
2787
- "name": "orientation",
2787
+ "name": "orientation",
2788
+ "type": {
2789
+ "text": "DividerOrientation"
2790
+ },
2791
+ "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
2792
+ "default": "horizontal",
2793
+ "fieldName": "orientation"
2794
+ },
2795
+ {
2796
+ "name": "variant",
2797
+ "type": {
2798
+ "text": "DividerVariant"
2799
+ },
2800
+ "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
2801
+ "default": "solid",
2802
+ "fieldName": "variant"
2803
+ },
2804
+ {
2805
+ "name": "arrow-direction",
2806
+ "type": {
2807
+ "text": "Directions"
2808
+ },
2809
+ "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2810
+ "default": "'negative'",
2811
+ "fieldName": "arrowDirection"
2812
+ },
2813
+ {
2814
+ "name": "button-position",
2815
+ "type": {
2816
+ "text": "Directions"
2817
+ },
2818
+ "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2819
+ "default": "'negative'",
2820
+ "fieldName": "buttonPosition"
2821
+ }
2822
+ ],
2823
+ "superclass": {
2824
+ "name": "Component",
2825
+ "module": "/src/models"
2826
+ },
2827
+ "tagName": "mdc-divider",
2828
+ "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n * - **Primary**: A simple horizontal or vertical divider.\n * - **Text**: A horizontal divider with a text label in the center.\n * - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n * - `aria-label` should be passed to the `mdc-button`.\n * - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n * the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
2829
+ "customElement": true
2830
+ }
2831
+ ],
2832
+ "exports": [
2833
+ {
2834
+ "kind": "js",
2835
+ "name": "default",
2836
+ "declaration": {
2837
+ "name": "Divider",
2838
+ "module": "components/divider/divider.component.js"
2839
+ }
2840
+ }
2841
+ ]
2842
+ },
2843
+ {
2844
+ "kind": "javascript-module",
2845
+ "path": "components/formfieldwrapper/formfieldwrapper.component.js",
2846
+ "declarations": [
2847
+ {
2848
+ "kind": "class",
2849
+ "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
2850
+ "name": "FormfieldWrapper",
2851
+ "slots": [
2852
+ {
2853
+ "description": "slot to add the label info icon",
2854
+ "name": "label-info"
2855
+ }
2856
+ ],
2857
+ "members": [
2858
+ {
2859
+ "kind": "field",
2860
+ "name": "label",
2861
+ "type": {
2862
+ "text": "string | undefined"
2863
+ },
2864
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
2865
+ "attribute": "label",
2866
+ "reflects": true
2867
+ },
2868
+ {
2869
+ "kind": "field",
2870
+ "name": "id",
2871
+ "default": "`mdc-input-${uuidv4()}`",
2872
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
2873
+ "attribute": "id"
2874
+ },
2875
+ {
2876
+ "kind": "field",
2877
+ "name": "helpTextType",
2878
+ "type": {
2879
+ "text": "ValidationType"
2880
+ },
2881
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
2882
+ "attribute": "help-text-type",
2883
+ "reflects": true
2884
+ },
2885
+ {
2886
+ "kind": "field",
2887
+ "name": "helpText",
2888
+ "type": {
2889
+ "text": "string | undefined"
2890
+ },
2891
+ "description": "The help text that is displayed below the input field.",
2892
+ "attribute": "help-text",
2893
+ "reflects": true
2894
+ },
2895
+ {
2896
+ "kind": "method",
2897
+ "name": "renderLabelElement",
2898
+ "privacy": "protected",
2899
+ "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
2900
+ "return": {
2901
+ "type": {
2902
+ "text": ""
2903
+ }
2904
+ }
2905
+ },
2906
+ {
2907
+ "kind": "method",
2908
+ "name": "renderHelpTextIcon",
2909
+ "privacy": "protected",
2910
+ "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.",
2911
+ "return": {
2912
+ "type": {
2913
+ "text": ""
2914
+ }
2915
+ }
2916
+ },
2917
+ {
2918
+ "kind": "method",
2919
+ "name": "renderHelpText",
2920
+ "privacy": "protected",
2921
+ "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.",
2922
+ "return": {
2923
+ "type": {
2924
+ "text": ""
2925
+ }
2926
+ }
2927
+ },
2928
+ {
2929
+ "kind": "method",
2930
+ "name": "renderLabel",
2931
+ "privacy": "protected",
2932
+ "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
2933
+ "return": {
2934
+ "type": {
2935
+ "text": ""
2936
+ }
2937
+ }
2938
+ },
2939
+ {
2940
+ "kind": "method",
2941
+ "name": "renderHelperText",
2942
+ "privacy": "protected",
2943
+ "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
2944
+ "return": {
2945
+ "type": {
2946
+ "text": ""
2947
+ }
2948
+ }
2949
+ },
2950
+ {
2951
+ "kind": "field",
2952
+ "name": "disabled",
2953
+ "type": {
2954
+ "text": "boolean"
2955
+ },
2956
+ "default": "false",
2957
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2958
+ "attribute": "disabled",
2959
+ "reflects": true,
2960
+ "inheritedFrom": {
2961
+ "name": "DisabledMixin",
2962
+ "module": "utils/mixins/DisabledMixin.js"
2963
+ }
2964
+ }
2965
+ ],
2966
+ "attributes": [
2967
+ {
2968
+ "name": "label",
2788
2969
  "type": {
2789
- "text": "DividerOrientation"
2970
+ "text": "string | undefined"
2790
2971
  },
2791
- "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
2792
- "default": "horizontal",
2793
- "fieldName": "orientation"
2972
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
2973
+ "fieldName": "label"
2794
2974
  },
2795
2975
  {
2796
- "name": "variant",
2976
+ "name": "id",
2977
+ "default": "`mdc-input-${uuidv4()}`",
2978
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
2979
+ "fieldName": "id"
2980
+ },
2981
+ {
2982
+ "name": "help-text-type",
2797
2983
  "type": {
2798
- "text": "DividerVariant"
2984
+ "text": "ValidationType"
2799
2985
  },
2800
- "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
2801
- "default": "solid",
2802
- "fieldName": "variant"
2986
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
2987
+ "fieldName": "helpTextType"
2803
2988
  },
2804
2989
  {
2805
- "name": "arrow-direction",
2990
+ "name": "help-text",
2806
2991
  "type": {
2807
- "text": "Directions"
2992
+ "text": "string | undefined"
2808
2993
  },
2809
- "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2810
- "default": "'negative'",
2811
- "fieldName": "arrowDirection"
2994
+ "description": "The help text that is displayed below the input field.",
2995
+ "fieldName": "helpText"
2812
2996
  },
2813
2997
  {
2814
- "name": "button-position",
2998
+ "name": "disabled",
2815
2999
  "type": {
2816
- "text": "Directions"
3000
+ "text": "boolean"
2817
3001
  },
2818
- "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2819
- "default": "'negative'",
2820
- "fieldName": "buttonPosition"
3002
+ "default": "false",
3003
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3004
+ "fieldName": "disabled",
3005
+ "inheritedFrom": {
3006
+ "name": "DisabledMixin",
3007
+ "module": "src/utils/mixins/DisabledMixin.ts"
3008
+ }
3009
+ }
3010
+ ],
3011
+ "mixins": [
3012
+ {
3013
+ "name": "DisabledMixin",
3014
+ "module": "/src/utils/mixins/DisabledMixin"
2821
3015
  }
2822
3016
  ],
2823
3017
  "superclass": {
2824
3018
  "name": "Component",
2825
3019
  "module": "/src/models"
2826
3020
  },
2827
- "tagName": "mdc-divider",
2828
- "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n * - **Primary**: A simple horizontal or vertical divider.\n * - **Text**: A horizontal divider with a text label in the center.\n * - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n * - `aria-label` should be passed to the `mdc-button`.\n * - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n * the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
3021
+ "tagName": "mdc-formfieldwrapper",
3022
+ "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n * that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @slot label-info - slot to add the label info icon\n *\n */",
2829
3023
  "customElement": true
2830
3024
  }
2831
3025
  ],
@@ -2834,8 +3028,8 @@
2834
3028
  "kind": "js",
2835
3029
  "name": "default",
2836
3030
  "declaration": {
2837
- "name": "Divider",
2838
- "module": "components/divider/divider.component.js"
3031
+ "name": "FormfieldWrapper",
3032
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
2839
3033
  }
2840
3034
  }
2841
3035
  ]
@@ -3063,200 +3257,6 @@
3063
3257
  }
3064
3258
  ]
3065
3259
  },
3066
- {
3067
- "kind": "javascript-module",
3068
- "path": "components/formfieldwrapper/formfieldwrapper.component.js",
3069
- "declarations": [
3070
- {
3071
- "kind": "class",
3072
- "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
3073
- "name": "FormfieldWrapper",
3074
- "slots": [
3075
- {
3076
- "description": "slot to add the label info icon",
3077
- "name": "label-info"
3078
- }
3079
- ],
3080
- "members": [
3081
- {
3082
- "kind": "field",
3083
- "name": "label",
3084
- "type": {
3085
- "text": "string | undefined"
3086
- },
3087
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
3088
- "attribute": "label",
3089
- "reflects": true
3090
- },
3091
- {
3092
- "kind": "field",
3093
- "name": "id",
3094
- "default": "`mdc-input-${uuidv4()}`",
3095
- "description": "The unique id of the input field. It is used to link the input field with the label.",
3096
- "attribute": "id"
3097
- },
3098
- {
3099
- "kind": "field",
3100
- "name": "helpTextType",
3101
- "type": {
3102
- "text": "ValidationType"
3103
- },
3104
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
3105
- "attribute": "help-text-type",
3106
- "reflects": true
3107
- },
3108
- {
3109
- "kind": "field",
3110
- "name": "helpText",
3111
- "type": {
3112
- "text": "string | undefined"
3113
- },
3114
- "description": "The help text that is displayed below the input field.",
3115
- "attribute": "help-text",
3116
- "reflects": true
3117
- },
3118
- {
3119
- "kind": "method",
3120
- "name": "renderLabelElement",
3121
- "privacy": "protected",
3122
- "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
3123
- "return": {
3124
- "type": {
3125
- "text": ""
3126
- }
3127
- }
3128
- },
3129
- {
3130
- "kind": "method",
3131
- "name": "renderHelpTextIcon",
3132
- "privacy": "protected",
3133
- "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.",
3134
- "return": {
3135
- "type": {
3136
- "text": ""
3137
- }
3138
- }
3139
- },
3140
- {
3141
- "kind": "method",
3142
- "name": "renderHelpText",
3143
- "privacy": "protected",
3144
- "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.",
3145
- "return": {
3146
- "type": {
3147
- "text": ""
3148
- }
3149
- }
3150
- },
3151
- {
3152
- "kind": "method",
3153
- "name": "renderLabel",
3154
- "privacy": "protected",
3155
- "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
3156
- "return": {
3157
- "type": {
3158
- "text": ""
3159
- }
3160
- }
3161
- },
3162
- {
3163
- "kind": "method",
3164
- "name": "renderHelperText",
3165
- "privacy": "protected",
3166
- "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
3167
- "return": {
3168
- "type": {
3169
- "text": ""
3170
- }
3171
- }
3172
- },
3173
- {
3174
- "kind": "field",
3175
- "name": "disabled",
3176
- "type": {
3177
- "text": "boolean"
3178
- },
3179
- "default": "false",
3180
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3181
- "attribute": "disabled",
3182
- "reflects": true,
3183
- "inheritedFrom": {
3184
- "name": "DisabledMixin",
3185
- "module": "utils/mixins/DisabledMixin.js"
3186
- }
3187
- }
3188
- ],
3189
- "attributes": [
3190
- {
3191
- "name": "label",
3192
- "type": {
3193
- "text": "string | undefined"
3194
- },
3195
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
3196
- "fieldName": "label"
3197
- },
3198
- {
3199
- "name": "id",
3200
- "default": "`mdc-input-${uuidv4()}`",
3201
- "description": "The unique id of the input field. It is used to link the input field with the label.",
3202
- "fieldName": "id"
3203
- },
3204
- {
3205
- "name": "help-text-type",
3206
- "type": {
3207
- "text": "ValidationType"
3208
- },
3209
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
3210
- "fieldName": "helpTextType"
3211
- },
3212
- {
3213
- "name": "help-text",
3214
- "type": {
3215
- "text": "string | undefined"
3216
- },
3217
- "description": "The help text that is displayed below the input field.",
3218
- "fieldName": "helpText"
3219
- },
3220
- {
3221
- "name": "disabled",
3222
- "type": {
3223
- "text": "boolean"
3224
- },
3225
- "default": "false",
3226
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
3227
- "fieldName": "disabled",
3228
- "inheritedFrom": {
3229
- "name": "DisabledMixin",
3230
- "module": "src/utils/mixins/DisabledMixin.ts"
3231
- }
3232
- }
3233
- ],
3234
- "mixins": [
3235
- {
3236
- "name": "DisabledMixin",
3237
- "module": "/src/utils/mixins/DisabledMixin"
3238
- }
3239
- ],
3240
- "superclass": {
3241
- "name": "Component",
3242
- "module": "/src/models"
3243
- },
3244
- "tagName": "mdc-formfieldwrapper",
3245
- "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n * that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @slot label-info - slot to add the label info icon\n *\n */",
3246
- "customElement": true
3247
- }
3248
- ],
3249
- "exports": [
3250
- {
3251
- "kind": "js",
3252
- "name": "default",
3253
- "declaration": {
3254
- "name": "FormfieldWrapper",
3255
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
3256
- }
3257
- }
3258
- ]
3259
- },
3260
3260
  {
3261
3261
  "kind": "javascript-module",
3262
3262
  "path": "components/iconprovider/iconprovider.component.js",