@momentum-design/components 0.16.10 → 0.16.12
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -2,267 +2,6 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
-
{
|
|
6
|
-
"kind": "javascript-module",
|
|
7
|
-
"path": "components/badge/badge.component.js",
|
|
8
|
-
"declarations": [
|
|
9
|
-
{
|
|
10
|
-
"kind": "class",
|
|
11
|
-
"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.",
|
|
12
|
-
"name": "Badge",
|
|
13
|
-
"members": [
|
|
14
|
-
{
|
|
15
|
-
"kind": "field",
|
|
16
|
-
"name": "type",
|
|
17
|
-
"type": {
|
|
18
|
-
"text": "BadgeType | undefined"
|
|
19
|
-
},
|
|
20
|
-
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
21
|
-
"attribute": "type",
|
|
22
|
-
"reflects": true
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
"kind": "field",
|
|
26
|
-
"name": "iconName",
|
|
27
|
-
"type": {
|
|
28
|
-
"text": "IconNames | undefined"
|
|
29
|
-
},
|
|
30
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
31
|
-
"attribute": "icon-name"
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
"kind": "field",
|
|
35
|
-
"name": "variant",
|
|
36
|
-
"type": {
|
|
37
|
-
"text": "IconVariant"
|
|
38
|
-
},
|
|
39
|
-
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
40
|
-
"default": "primary",
|
|
41
|
-
"attribute": "variant",
|
|
42
|
-
"reflects": true
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
"kind": "field",
|
|
46
|
-
"name": "counter",
|
|
47
|
-
"type": {
|
|
48
|
-
"text": "number | undefined"
|
|
49
|
-
},
|
|
50
|
-
"description": "Counter is the number which can be provided in the badge.",
|
|
51
|
-
"attribute": "counter"
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
"kind": "field",
|
|
55
|
-
"name": "maxCounter",
|
|
56
|
-
"type": {
|
|
57
|
-
"text": "number"
|
|
58
|
-
},
|
|
59
|
-
"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`.",
|
|
60
|
-
"default": "99",
|
|
61
|
-
"attribute": "max-counter",
|
|
62
|
-
"reflects": true
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"kind": "field",
|
|
66
|
-
"name": "overlay",
|
|
67
|
-
"type": {
|
|
68
|
-
"text": "boolean"
|
|
69
|
-
},
|
|
70
|
-
"default": "false",
|
|
71
|
-
"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.",
|
|
72
|
-
"attribute": "overlay"
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
"kind": "field",
|
|
76
|
-
"name": "ariaLabel",
|
|
77
|
-
"type": {
|
|
78
|
-
"text": "string | null"
|
|
79
|
-
},
|
|
80
|
-
"default": "null",
|
|
81
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
82
|
-
"attribute": "aria-label"
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
"kind": "method",
|
|
86
|
-
"name": "getCounterText",
|
|
87
|
-
"privacy": "private",
|
|
88
|
-
"return": {
|
|
89
|
-
"type": {
|
|
90
|
-
"text": ""
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
|
-
"parameters": [
|
|
94
|
-
{
|
|
95
|
-
"name": "maxCounter",
|
|
96
|
-
"type": {
|
|
97
|
-
"text": "number"
|
|
98
|
-
},
|
|
99
|
-
"description": "the maximum limit which can be displayed on the badge"
|
|
100
|
-
},
|
|
101
|
-
{
|
|
102
|
-
"name": "counter",
|
|
103
|
-
"optional": true,
|
|
104
|
-
"type": {
|
|
105
|
-
"text": "number"
|
|
106
|
-
},
|
|
107
|
-
"description": "the number to be displayed on the badge"
|
|
108
|
-
}
|
|
109
|
-
],
|
|
110
|
-
"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."
|
|
111
|
-
},
|
|
112
|
-
{
|
|
113
|
-
"kind": "method",
|
|
114
|
-
"name": "getBadgeIcon",
|
|
115
|
-
"privacy": "private",
|
|
116
|
-
"return": {
|
|
117
|
-
"type": {
|
|
118
|
-
"text": ""
|
|
119
|
-
}
|
|
120
|
-
},
|
|
121
|
-
"parameters": [
|
|
122
|
-
{
|
|
123
|
-
"name": "iconName",
|
|
124
|
-
"type": {
|
|
125
|
-
"text": "string"
|
|
126
|
-
},
|
|
127
|
-
"description": "the name of the icon from the icon set"
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
"name": "backgroundClassPostfix",
|
|
131
|
-
"type": {
|
|
132
|
-
"text": "string"
|
|
133
|
-
},
|
|
134
|
-
"description": "postfix for the class to style the badge icon."
|
|
135
|
-
}
|
|
136
|
-
],
|
|
137
|
-
"description": "Method to generate the badge icon."
|
|
138
|
-
},
|
|
139
|
-
{
|
|
140
|
-
"kind": "method",
|
|
141
|
-
"name": "getBadgeDot",
|
|
142
|
-
"privacy": "private",
|
|
143
|
-
"return": {
|
|
144
|
-
"type": {
|
|
145
|
-
"text": ""
|
|
146
|
-
}
|
|
147
|
-
},
|
|
148
|
-
"description": "Method to generate the badge dot template."
|
|
149
|
-
},
|
|
150
|
-
{
|
|
151
|
-
"kind": "method",
|
|
152
|
-
"name": "getBadgeCounterText",
|
|
153
|
-
"privacy": "private",
|
|
154
|
-
"return": {
|
|
155
|
-
"type": {
|
|
156
|
-
"text": ""
|
|
157
|
-
}
|
|
158
|
-
},
|
|
159
|
-
"description": "Method to generate the badge text and counter template."
|
|
160
|
-
},
|
|
161
|
-
{
|
|
162
|
-
"kind": "method",
|
|
163
|
-
"name": "setRoleByAriaLabel",
|
|
164
|
-
"privacy": "private",
|
|
165
|
-
"return": {
|
|
166
|
-
"type": {
|
|
167
|
-
"text": "void"
|
|
168
|
-
}
|
|
169
|
-
},
|
|
170
|
-
"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."
|
|
171
|
-
},
|
|
172
|
-
{
|
|
173
|
-
"kind": "method",
|
|
174
|
-
"name": "getBadgeContentBasedOnType",
|
|
175
|
-
"privacy": "private",
|
|
176
|
-
"return": {
|
|
177
|
-
"type": {
|
|
178
|
-
"text": ""
|
|
179
|
-
}
|
|
180
|
-
},
|
|
181
|
-
"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."
|
|
182
|
-
}
|
|
183
|
-
],
|
|
184
|
-
"attributes": [
|
|
185
|
-
{
|
|
186
|
-
"name": "type",
|
|
187
|
-
"type": {
|
|
188
|
-
"text": "BadgeType | undefined"
|
|
189
|
-
},
|
|
190
|
-
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
191
|
-
"fieldName": "type"
|
|
192
|
-
},
|
|
193
|
-
{
|
|
194
|
-
"name": "icon-name",
|
|
195
|
-
"type": {
|
|
196
|
-
"text": "IconNames | undefined"
|
|
197
|
-
},
|
|
198
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
199
|
-
"fieldName": "iconName"
|
|
200
|
-
},
|
|
201
|
-
{
|
|
202
|
-
"name": "variant",
|
|
203
|
-
"type": {
|
|
204
|
-
"text": "IconVariant"
|
|
205
|
-
},
|
|
206
|
-
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
207
|
-
"default": "primary",
|
|
208
|
-
"fieldName": "variant"
|
|
209
|
-
},
|
|
210
|
-
{
|
|
211
|
-
"name": "counter",
|
|
212
|
-
"type": {
|
|
213
|
-
"text": "number | undefined"
|
|
214
|
-
},
|
|
215
|
-
"description": "Counter is the number which can be provided in the badge.",
|
|
216
|
-
"fieldName": "counter"
|
|
217
|
-
},
|
|
218
|
-
{
|
|
219
|
-
"name": "max-counter",
|
|
220
|
-
"type": {
|
|
221
|
-
"text": "number"
|
|
222
|
-
},
|
|
223
|
-
"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`.",
|
|
224
|
-
"default": "99",
|
|
225
|
-
"fieldName": "maxCounter"
|
|
226
|
-
},
|
|
227
|
-
{
|
|
228
|
-
"name": "overlay",
|
|
229
|
-
"type": {
|
|
230
|
-
"text": "boolean"
|
|
231
|
-
},
|
|
232
|
-
"default": "false",
|
|
233
|
-
"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.",
|
|
234
|
-
"fieldName": "overlay"
|
|
235
|
-
},
|
|
236
|
-
{
|
|
237
|
-
"name": "aria-label",
|
|
238
|
-
"type": {
|
|
239
|
-
"text": "string | null"
|
|
240
|
-
},
|
|
241
|
-
"default": "null",
|
|
242
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
243
|
-
"fieldName": "ariaLabel"
|
|
244
|
-
}
|
|
245
|
-
],
|
|
246
|
-
"superclass": {
|
|
247
|
-
"name": "Component",
|
|
248
|
-
"module": "/src/models"
|
|
249
|
-
},
|
|
250
|
-
"tagName": "mdc-badge",
|
|
251
|
-
"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 */",
|
|
252
|
-
"customElement": true
|
|
253
|
-
}
|
|
254
|
-
],
|
|
255
|
-
"exports": [
|
|
256
|
-
{
|
|
257
|
-
"kind": "js",
|
|
258
|
-
"name": "default",
|
|
259
|
-
"declaration": {
|
|
260
|
-
"name": "Badge",
|
|
261
|
-
"module": "components/badge/badge.component.js"
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
]
|
|
265
|
-
},
|
|
266
5
|
{
|
|
267
6
|
"kind": "javascript-module",
|
|
268
7
|
"path": "components/avatar/avatar.component.js",
|
|
@@ -408,158 +147,348 @@
|
|
|
408
147
|
"type": {
|
|
409
148
|
"text": "string | undefined"
|
|
410
149
|
},
|
|
411
|
-
"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.",
|
|
412
|
-
"fieldName": "src",
|
|
413
|
-
"inheritedFrom": {
|
|
414
|
-
"name": "AvatarComponentMixin",
|
|
415
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
416
|
-
}
|
|
150
|
+
"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.",
|
|
151
|
+
"fieldName": "src",
|
|
152
|
+
"inheritedFrom": {
|
|
153
|
+
"name": "AvatarComponentMixin",
|
|
154
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"name": "initials",
|
|
159
|
+
"type": {
|
|
160
|
+
"text": "string | undefined"
|
|
161
|
+
},
|
|
162
|
+
"description": "The initials to be displayed for the avatar.",
|
|
163
|
+
"fieldName": "initials",
|
|
164
|
+
"inheritedFrom": {
|
|
165
|
+
"name": "AvatarComponentMixin",
|
|
166
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"name": "presence",
|
|
171
|
+
"type": {
|
|
172
|
+
"text": "PresenceType | undefined"
|
|
173
|
+
},
|
|
174
|
+
"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`",
|
|
175
|
+
"fieldName": "presence",
|
|
176
|
+
"inheritedFrom": {
|
|
177
|
+
"name": "AvatarComponentMixin",
|
|
178
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"name": "size",
|
|
183
|
+
"type": {
|
|
184
|
+
"text": "AvatarSize"
|
|
185
|
+
},
|
|
186
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
187
|
+
"default": "32",
|
|
188
|
+
"fieldName": "size",
|
|
189
|
+
"inheritedFrom": {
|
|
190
|
+
"name": "AvatarComponentMixin",
|
|
191
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
192
|
+
}
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
"name": "icon-name",
|
|
196
|
+
"type": {
|
|
197
|
+
"text": "IconNames | undefined"
|
|
198
|
+
},
|
|
199
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
200
|
+
"fieldName": "iconName",
|
|
201
|
+
"inheritedFrom": {
|
|
202
|
+
"name": "AvatarComponentMixin",
|
|
203
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"name": "counter",
|
|
208
|
+
"type": {
|
|
209
|
+
"text": "number | undefined"
|
|
210
|
+
},
|
|
211
|
+
"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`.",
|
|
212
|
+
"fieldName": "counter",
|
|
213
|
+
"inheritedFrom": {
|
|
214
|
+
"name": "AvatarComponentMixin",
|
|
215
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"name": "is-typing",
|
|
220
|
+
"type": {
|
|
221
|
+
"text": "boolean"
|
|
222
|
+
},
|
|
223
|
+
"default": "false",
|
|
224
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
225
|
+
"fieldName": "isTyping",
|
|
226
|
+
"inheritedFrom": {
|
|
227
|
+
"name": "AvatarComponentMixin",
|
|
228
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
]
|
|
232
|
+
}
|
|
233
|
+
],
|
|
234
|
+
"exports": [
|
|
235
|
+
{
|
|
236
|
+
"kind": "js",
|
|
237
|
+
"name": "default",
|
|
238
|
+
"declaration": {
|
|
239
|
+
"name": "Avatar",
|
|
240
|
+
"module": "components/avatar/avatar.component.js"
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
]
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
"kind": "javascript-module",
|
|
247
|
+
"path": "components/badge/badge.component.js",
|
|
248
|
+
"declarations": [
|
|
249
|
+
{
|
|
250
|
+
"kind": "class",
|
|
251
|
+
"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.",
|
|
252
|
+
"name": "Badge",
|
|
253
|
+
"members": [
|
|
254
|
+
{
|
|
255
|
+
"kind": "field",
|
|
256
|
+
"name": "type",
|
|
257
|
+
"type": {
|
|
258
|
+
"text": "BadgeType | undefined"
|
|
259
|
+
},
|
|
260
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
261
|
+
"attribute": "type",
|
|
262
|
+
"reflects": true
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
"kind": "field",
|
|
266
|
+
"name": "iconName",
|
|
267
|
+
"type": {
|
|
268
|
+
"text": "IconNames | undefined"
|
|
269
|
+
},
|
|
270
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
271
|
+
"attribute": "icon-name"
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
"kind": "field",
|
|
275
|
+
"name": "variant",
|
|
276
|
+
"type": {
|
|
277
|
+
"text": "IconVariant"
|
|
278
|
+
},
|
|
279
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
280
|
+
"default": "primary",
|
|
281
|
+
"attribute": "variant",
|
|
282
|
+
"reflects": true
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
"kind": "field",
|
|
286
|
+
"name": "counter",
|
|
287
|
+
"type": {
|
|
288
|
+
"text": "number | undefined"
|
|
289
|
+
},
|
|
290
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
291
|
+
"attribute": "counter"
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
"kind": "field",
|
|
295
|
+
"name": "maxCounter",
|
|
296
|
+
"type": {
|
|
297
|
+
"text": "number"
|
|
298
|
+
},
|
|
299
|
+
"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`.",
|
|
300
|
+
"default": "99",
|
|
301
|
+
"attribute": "max-counter",
|
|
302
|
+
"reflects": true
|
|
303
|
+
},
|
|
304
|
+
{
|
|
305
|
+
"kind": "field",
|
|
306
|
+
"name": "overlay",
|
|
307
|
+
"type": {
|
|
308
|
+
"text": "boolean"
|
|
309
|
+
},
|
|
310
|
+
"default": "false",
|
|
311
|
+
"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.",
|
|
312
|
+
"attribute": "overlay"
|
|
313
|
+
},
|
|
314
|
+
{
|
|
315
|
+
"kind": "field",
|
|
316
|
+
"name": "ariaLabel",
|
|
317
|
+
"type": {
|
|
318
|
+
"text": "string | null"
|
|
319
|
+
},
|
|
320
|
+
"default": "null",
|
|
321
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
322
|
+
"attribute": "aria-label"
|
|
323
|
+
},
|
|
324
|
+
{
|
|
325
|
+
"kind": "method",
|
|
326
|
+
"name": "getCounterText",
|
|
327
|
+
"privacy": "private",
|
|
328
|
+
"return": {
|
|
329
|
+
"type": {
|
|
330
|
+
"text": ""
|
|
331
|
+
}
|
|
332
|
+
},
|
|
333
|
+
"parameters": [
|
|
334
|
+
{
|
|
335
|
+
"name": "maxCounter",
|
|
336
|
+
"type": {
|
|
337
|
+
"text": "number"
|
|
338
|
+
},
|
|
339
|
+
"description": "the maximum limit which can be displayed on the badge"
|
|
340
|
+
},
|
|
341
|
+
{
|
|
342
|
+
"name": "counter",
|
|
343
|
+
"optional": true,
|
|
344
|
+
"type": {
|
|
345
|
+
"text": "number"
|
|
346
|
+
},
|
|
347
|
+
"description": "the number to be displayed on the badge"
|
|
348
|
+
}
|
|
349
|
+
],
|
|
350
|
+
"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."
|
|
351
|
+
},
|
|
352
|
+
{
|
|
353
|
+
"kind": "method",
|
|
354
|
+
"name": "getBadgeIcon",
|
|
355
|
+
"privacy": "private",
|
|
356
|
+
"return": {
|
|
357
|
+
"type": {
|
|
358
|
+
"text": ""
|
|
359
|
+
}
|
|
360
|
+
},
|
|
361
|
+
"parameters": [
|
|
362
|
+
{
|
|
363
|
+
"name": "iconName",
|
|
364
|
+
"type": {
|
|
365
|
+
"text": "string"
|
|
366
|
+
},
|
|
367
|
+
"description": "the name of the icon from the icon set"
|
|
368
|
+
},
|
|
369
|
+
{
|
|
370
|
+
"name": "backgroundClassPostfix",
|
|
371
|
+
"type": {
|
|
372
|
+
"text": "string"
|
|
373
|
+
},
|
|
374
|
+
"description": "postfix for the class to style the badge icon."
|
|
375
|
+
}
|
|
376
|
+
],
|
|
377
|
+
"description": "Method to generate the badge icon."
|
|
378
|
+
},
|
|
379
|
+
{
|
|
380
|
+
"kind": "method",
|
|
381
|
+
"name": "getBadgeDot",
|
|
382
|
+
"privacy": "private",
|
|
383
|
+
"return": {
|
|
384
|
+
"type": {
|
|
385
|
+
"text": ""
|
|
386
|
+
}
|
|
387
|
+
},
|
|
388
|
+
"description": "Method to generate the badge dot template."
|
|
417
389
|
},
|
|
418
390
|
{
|
|
419
|
-
"
|
|
420
|
-
"
|
|
421
|
-
|
|
391
|
+
"kind": "method",
|
|
392
|
+
"name": "getBadgeCounterText",
|
|
393
|
+
"privacy": "private",
|
|
394
|
+
"return": {
|
|
395
|
+
"type": {
|
|
396
|
+
"text": ""
|
|
397
|
+
}
|
|
422
398
|
},
|
|
423
|
-
"description": "
|
|
424
|
-
"fieldName": "initials",
|
|
425
|
-
"inheritedFrom": {
|
|
426
|
-
"name": "AvatarComponentMixin",
|
|
427
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
428
|
-
}
|
|
399
|
+
"description": "Method to generate the badge text and counter template."
|
|
429
400
|
},
|
|
430
401
|
{
|
|
431
|
-
"
|
|
432
|
-
"
|
|
433
|
-
|
|
402
|
+
"kind": "method",
|
|
403
|
+
"name": "setRoleByAriaLabel",
|
|
404
|
+
"privacy": "private",
|
|
405
|
+
"return": {
|
|
406
|
+
"type": {
|
|
407
|
+
"text": "void"
|
|
408
|
+
}
|
|
434
409
|
},
|
|
435
|
-
"description": "
|
|
436
|
-
"fieldName": "presence",
|
|
437
|
-
"inheritedFrom": {
|
|
438
|
-
"name": "AvatarComponentMixin",
|
|
439
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
440
|
-
}
|
|
410
|
+
"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."
|
|
441
411
|
},
|
|
442
412
|
{
|
|
443
|
-
"
|
|
413
|
+
"kind": "method",
|
|
414
|
+
"name": "getBadgeContentBasedOnType",
|
|
415
|
+
"privacy": "private",
|
|
416
|
+
"return": {
|
|
417
|
+
"type": {
|
|
418
|
+
"text": ""
|
|
419
|
+
}
|
|
420
|
+
},
|
|
421
|
+
"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."
|
|
422
|
+
}
|
|
423
|
+
],
|
|
424
|
+
"attributes": [
|
|
425
|
+
{
|
|
426
|
+
"name": "type",
|
|
444
427
|
"type": {
|
|
445
|
-
"text": "
|
|
428
|
+
"text": "BadgeType | undefined"
|
|
446
429
|
},
|
|
447
|
-
"description": "
|
|
448
|
-
"
|
|
449
|
-
"fieldName": "size",
|
|
450
|
-
"inheritedFrom": {
|
|
451
|
-
"name": "AvatarComponentMixin",
|
|
452
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
453
|
-
}
|
|
430
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
431
|
+
"fieldName": "type"
|
|
454
432
|
},
|
|
455
433
|
{
|
|
456
434
|
"name": "icon-name",
|
|
457
435
|
"type": {
|
|
458
436
|
"text": "IconNames | undefined"
|
|
459
437
|
},
|
|
460
|
-
"description": "Name of the icon
|
|
461
|
-
"fieldName": "iconName"
|
|
462
|
-
"inheritedFrom": {
|
|
463
|
-
"name": "AvatarComponentMixin",
|
|
464
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
465
|
-
}
|
|
438
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
439
|
+
"fieldName": "iconName"
|
|
466
440
|
},
|
|
467
441
|
{
|
|
468
|
-
"name": "
|
|
442
|
+
"name": "variant",
|
|
469
443
|
"type": {
|
|
470
|
-
"text": "
|
|
444
|
+
"text": "IconVariant"
|
|
471
445
|
},
|
|
472
|
-
"description": "
|
|
473
|
-
"
|
|
474
|
-
"
|
|
475
|
-
"name": "AvatarComponentMixin",
|
|
476
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
477
|
-
}
|
|
446
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
447
|
+
"default": "primary",
|
|
448
|
+
"fieldName": "variant"
|
|
478
449
|
},
|
|
479
450
|
{
|
|
480
|
-
"name": "
|
|
451
|
+
"name": "counter",
|
|
481
452
|
"type": {
|
|
482
|
-
"text": "
|
|
453
|
+
"text": "number | undefined"
|
|
483
454
|
},
|
|
484
|
-
"
|
|
485
|
-
"
|
|
486
|
-
"fieldName": "isTyping",
|
|
487
|
-
"inheritedFrom": {
|
|
488
|
-
"name": "AvatarComponentMixin",
|
|
489
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
490
|
-
}
|
|
491
|
-
}
|
|
492
|
-
]
|
|
493
|
-
}
|
|
494
|
-
],
|
|
495
|
-
"exports": [
|
|
496
|
-
{
|
|
497
|
-
"kind": "js",
|
|
498
|
-
"name": "default",
|
|
499
|
-
"declaration": {
|
|
500
|
-
"name": "Avatar",
|
|
501
|
-
"module": "components/avatar/avatar.component.js"
|
|
502
|
-
}
|
|
503
|
-
}
|
|
504
|
-
]
|
|
505
|
-
},
|
|
506
|
-
{
|
|
507
|
-
"kind": "javascript-module",
|
|
508
|
-
"path": "components/bullet/bullet.component.js",
|
|
509
|
-
"declarations": [
|
|
510
|
-
{
|
|
511
|
-
"kind": "class",
|
|
512
|
-
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
513
|
-
"name": "Bullet",
|
|
514
|
-
"cssProperties": [
|
|
515
|
-
{
|
|
516
|
-
"description": "background color of the bullet",
|
|
517
|
-
"name": "--mdc-bullet-background-color"
|
|
518
|
-
},
|
|
519
|
-
{
|
|
520
|
-
"description": "small size value of the bullet",
|
|
521
|
-
"name": "--mdc-bullet-size-small"
|
|
455
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
456
|
+
"fieldName": "counter"
|
|
522
457
|
},
|
|
523
458
|
{
|
|
524
|
-
"
|
|
525
|
-
"
|
|
459
|
+
"name": "max-counter",
|
|
460
|
+
"type": {
|
|
461
|
+
"text": "number"
|
|
462
|
+
},
|
|
463
|
+
"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`.",
|
|
464
|
+
"default": "99",
|
|
465
|
+
"fieldName": "maxCounter"
|
|
526
466
|
},
|
|
527
467
|
{
|
|
528
|
-
"
|
|
529
|
-
"name": "--mdc-bullet-size-large"
|
|
530
|
-
}
|
|
531
|
-
],
|
|
532
|
-
"members": [
|
|
533
|
-
{
|
|
534
|
-
"kind": "field",
|
|
535
|
-
"name": "size",
|
|
468
|
+
"name": "overlay",
|
|
536
469
|
"type": {
|
|
537
|
-
"text": "
|
|
470
|
+
"text": "boolean"
|
|
538
471
|
},
|
|
539
|
-
"
|
|
540
|
-
"description": "
|
|
541
|
-
"
|
|
542
|
-
|
|
543
|
-
"reflects": true
|
|
544
|
-
}
|
|
545
|
-
],
|
|
546
|
-
"attributes": [
|
|
472
|
+
"default": "false",
|
|
473
|
+
"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.",
|
|
474
|
+
"fieldName": "overlay"
|
|
475
|
+
},
|
|
547
476
|
{
|
|
548
|
-
"name": "
|
|
477
|
+
"name": "aria-label",
|
|
549
478
|
"type": {
|
|
550
|
-
"text": "
|
|
479
|
+
"text": "string | null"
|
|
551
480
|
},
|
|
552
|
-
"
|
|
553
|
-
"
|
|
554
|
-
"fieldName": "
|
|
481
|
+
"default": "null",
|
|
482
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
483
|
+
"fieldName": "ariaLabel"
|
|
555
484
|
}
|
|
556
485
|
],
|
|
557
486
|
"superclass": {
|
|
558
487
|
"name": "Component",
|
|
559
488
|
"module": "/src/models"
|
|
560
489
|
},
|
|
561
|
-
"tagName": "mdc-
|
|
562
|
-
"jsDoc": "/**\n *
|
|
490
|
+
"tagName": "mdc-badge",
|
|
491
|
+
"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 */",
|
|
563
492
|
"customElement": true
|
|
564
493
|
}
|
|
565
494
|
],
|
|
@@ -568,8 +497,8 @@
|
|
|
568
497
|
"kind": "js",
|
|
569
498
|
"name": "default",
|
|
570
499
|
"declaration": {
|
|
571
|
-
"name": "
|
|
572
|
-
"module": "components/
|
|
500
|
+
"name": "Badge",
|
|
501
|
+
"module": "components/badge/badge.component.js"
|
|
573
502
|
}
|
|
574
503
|
}
|
|
575
504
|
]
|
|
@@ -1121,6 +1050,77 @@
|
|
|
1121
1050
|
}
|
|
1122
1051
|
]
|
|
1123
1052
|
},
|
|
1053
|
+
{
|
|
1054
|
+
"kind": "javascript-module",
|
|
1055
|
+
"path": "components/bullet/bullet.component.js",
|
|
1056
|
+
"declarations": [
|
|
1057
|
+
{
|
|
1058
|
+
"kind": "class",
|
|
1059
|
+
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
1060
|
+
"name": "Bullet",
|
|
1061
|
+
"cssProperties": [
|
|
1062
|
+
{
|
|
1063
|
+
"description": "background color of the bullet",
|
|
1064
|
+
"name": "--mdc-bullet-background-color"
|
|
1065
|
+
},
|
|
1066
|
+
{
|
|
1067
|
+
"description": "small size value of the bullet",
|
|
1068
|
+
"name": "--mdc-bullet-size-small"
|
|
1069
|
+
},
|
|
1070
|
+
{
|
|
1071
|
+
"description": "medium size value of the bullet",
|
|
1072
|
+
"name": "--mdc-bullet-size-medium"
|
|
1073
|
+
},
|
|
1074
|
+
{
|
|
1075
|
+
"description": "large size value of the bullet",
|
|
1076
|
+
"name": "--mdc-bullet-size-large"
|
|
1077
|
+
}
|
|
1078
|
+
],
|
|
1079
|
+
"members": [
|
|
1080
|
+
{
|
|
1081
|
+
"kind": "field",
|
|
1082
|
+
"name": "size",
|
|
1083
|
+
"type": {
|
|
1084
|
+
"text": "Size"
|
|
1085
|
+
},
|
|
1086
|
+
"privacy": "public",
|
|
1087
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1088
|
+
"default": "small",
|
|
1089
|
+
"attribute": "size",
|
|
1090
|
+
"reflects": true
|
|
1091
|
+
}
|
|
1092
|
+
],
|
|
1093
|
+
"attributes": [
|
|
1094
|
+
{
|
|
1095
|
+
"name": "size",
|
|
1096
|
+
"type": {
|
|
1097
|
+
"text": "Size"
|
|
1098
|
+
},
|
|
1099
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1100
|
+
"default": "small",
|
|
1101
|
+
"fieldName": "size"
|
|
1102
|
+
}
|
|
1103
|
+
],
|
|
1104
|
+
"superclass": {
|
|
1105
|
+
"name": "Component",
|
|
1106
|
+
"module": "/src/models"
|
|
1107
|
+
},
|
|
1108
|
+
"tagName": "mdc-bullet",
|
|
1109
|
+
"jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
|
|
1110
|
+
"customElement": true
|
|
1111
|
+
}
|
|
1112
|
+
],
|
|
1113
|
+
"exports": [
|
|
1114
|
+
{
|
|
1115
|
+
"kind": "js",
|
|
1116
|
+
"name": "default",
|
|
1117
|
+
"declaration": {
|
|
1118
|
+
"name": "Bullet",
|
|
1119
|
+
"module": "components/bullet/bullet.component.js"
|
|
1120
|
+
}
|
|
1121
|
+
}
|
|
1122
|
+
]
|
|
1123
|
+
},
|
|
1124
1124
|
{
|
|
1125
1125
|
"kind": "javascript-module",
|
|
1126
1126
|
"path": "components/button/button.component.js",
|