@momentum-design/components 0.54.2 → 0.54.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +23 -24
- package/dist/browser/index.js.map +4 -4
- package/dist/components/popover/popover.component.d.ts +1 -1
- package/dist/components/popover/popover.component.js +6 -5
- package/dist/components/popover/popover.styles.js +0 -1
- package/dist/components/select/select.component.d.ts +3 -1
- package/dist/components/select/select.component.js +10 -3
- package/dist/custom-elements.json +524 -524
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
|
@@ -4,476 +4,171 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
8
|
-
"declarations": [
|
|
9
|
-
{
|
|
10
|
-
"kind": "class",
|
|
11
|
-
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
12
|
-
"name": "Appheader",
|
|
13
|
-
"cssParts": [
|
|
14
|
-
{
|
|
15
|
-
"description": "The main container for styling the header.",
|
|
16
|
-
"name": "container"
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
"description": "The leading section of the header.",
|
|
20
|
-
"name": "leading-section"
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"description": "The center section of the header.",
|
|
24
|
-
"name": "center-section"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"description": "The trailing section of the header.",
|
|
28
|
-
"name": "trailing-section"
|
|
29
|
-
}
|
|
30
|
-
],
|
|
31
|
-
"slots": [
|
|
32
|
-
{
|
|
33
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
34
|
-
"name": "leading"
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
38
|
-
"name": "center"
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
42
|
-
"name": "trailing"
|
|
43
|
-
}
|
|
44
|
-
],
|
|
45
|
-
"members": [],
|
|
46
|
-
"superclass": {
|
|
47
|
-
"name": "Component",
|
|
48
|
-
"module": "/src/models"
|
|
49
|
-
},
|
|
50
|
-
"tagName": "mdc-appheader",
|
|
51
|
-
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
52
|
-
"customElement": true
|
|
53
|
-
}
|
|
54
|
-
],
|
|
55
|
-
"exports": [
|
|
56
|
-
{
|
|
57
|
-
"kind": "js",
|
|
58
|
-
"name": "default",
|
|
59
|
-
"declaration": {
|
|
60
|
-
"name": "Appheader",
|
|
61
|
-
"module": "components/appheader/appheader.component.js"
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
]
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
"kind": "javascript-module",
|
|
68
|
-
"path": "components/avatar/avatar.component.js",
|
|
7
|
+
"path": "components/alertchip/alertchip.component.js",
|
|
69
8
|
"declarations": [
|
|
70
9
|
{
|
|
71
10
|
"kind": "class",
|
|
72
|
-
"description": "
|
|
73
|
-
"name": "
|
|
11
|
+
"description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
|
|
12
|
+
"name": "AlertChip",
|
|
74
13
|
"cssProperties": [
|
|
75
14
|
{
|
|
76
|
-
"description": "
|
|
77
|
-
"name": "--mdc-
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
"description": "Allows customization of the default foreground color.",
|
|
81
|
-
"name": "--mdc-avatar-default-foreground-color"
|
|
15
|
+
"description": "The color of the label text",
|
|
16
|
+
"name": "--mdc-chip-color"
|
|
82
17
|
},
|
|
83
18
|
{
|
|
84
|
-
"description": "
|
|
85
|
-
"name": "--mdc-
|
|
19
|
+
"description": "The color of the icon",
|
|
20
|
+
"name": "--mdc-chip-icon-color"
|
|
86
21
|
},
|
|
87
22
|
{
|
|
88
|
-
"description": "
|
|
89
|
-
"name": "--mdc-
|
|
23
|
+
"description": "The border color of the alertchip",
|
|
24
|
+
"name": "--mdc-chip-border-color"
|
|
90
25
|
},
|
|
91
26
|
{
|
|
92
|
-
"description": "
|
|
93
|
-
"name": "--mdc-
|
|
27
|
+
"description": "The background color of the alertchip",
|
|
28
|
+
"name": "--mdc-chip-background-color"
|
|
94
29
|
}
|
|
95
30
|
],
|
|
96
31
|
"members": [
|
|
97
32
|
{
|
|
98
33
|
"kind": "field",
|
|
99
|
-
"name": "
|
|
34
|
+
"name": "variant",
|
|
100
35
|
"type": {
|
|
101
|
-
"text": "
|
|
36
|
+
"text": "VariantType"
|
|
102
37
|
},
|
|
103
|
-
"description": "The
|
|
104
|
-
"
|
|
105
|
-
"
|
|
106
|
-
"name": "AvatarComponentMixin",
|
|
107
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
108
|
-
}
|
|
38
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
39
|
+
"default": "neutral",
|
|
40
|
+
"attribute": "variant"
|
|
109
41
|
},
|
|
110
42
|
{
|
|
111
43
|
"kind": "field",
|
|
112
|
-
"name": "
|
|
44
|
+
"name": "label",
|
|
113
45
|
"type": {
|
|
114
|
-
"text": "string
|
|
46
|
+
"text": "string"
|
|
115
47
|
},
|
|
116
|
-
"
|
|
117
|
-
"
|
|
118
|
-
"
|
|
119
|
-
"name": "AvatarComponentMixin",
|
|
120
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
121
|
-
}
|
|
48
|
+
"default": "''",
|
|
49
|
+
"description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
50
|
+
"attribute": "label"
|
|
122
51
|
},
|
|
123
52
|
{
|
|
124
53
|
"kind": "field",
|
|
125
|
-
"name": "
|
|
54
|
+
"name": "tabIndex",
|
|
126
55
|
"type": {
|
|
127
|
-
"text": "
|
|
56
|
+
"text": "number"
|
|
128
57
|
},
|
|
129
|
-
"
|
|
130
|
-
"
|
|
58
|
+
"default": "0",
|
|
59
|
+
"description": "This property specifies the tab order of the element.",
|
|
60
|
+
"attribute": "tabIndex",
|
|
61
|
+
"reflects": true,
|
|
131
62
|
"inheritedFrom": {
|
|
132
|
-
"name": "
|
|
133
|
-
"module": "utils/mixins/
|
|
63
|
+
"name": "TabIndexMixin",
|
|
64
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
134
65
|
}
|
|
135
66
|
},
|
|
136
67
|
{
|
|
137
68
|
"kind": "field",
|
|
138
|
-
"name": "
|
|
69
|
+
"name": "disabled",
|
|
139
70
|
"type": {
|
|
140
|
-
"text": "
|
|
71
|
+
"text": "boolean | undefined"
|
|
141
72
|
},
|
|
142
|
-
"description": "
|
|
143
|
-
"default": "
|
|
144
|
-
"attribute": "
|
|
73
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
74
|
+
"default": "undefined",
|
|
75
|
+
"attribute": "disabled",
|
|
145
76
|
"reflects": true,
|
|
146
77
|
"inheritedFrom": {
|
|
147
|
-
"name": "
|
|
148
|
-
"module": "utils/mixins/
|
|
78
|
+
"name": "DisabledMixin",
|
|
79
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
149
80
|
}
|
|
150
81
|
},
|
|
151
82
|
{
|
|
152
83
|
"kind": "field",
|
|
153
|
-
"name": "
|
|
84
|
+
"name": "active",
|
|
154
85
|
"type": {
|
|
155
|
-
"text": "
|
|
86
|
+
"text": "boolean | undefined"
|
|
156
87
|
},
|
|
157
|
-
"description": "The
|
|
158
|
-
"
|
|
88
|
+
"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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
89
|
+
"default": "undefined",
|
|
90
|
+
"attribute": "active",
|
|
91
|
+
"reflects": true,
|
|
159
92
|
"inheritedFrom": {
|
|
160
|
-
"name": "
|
|
161
|
-
"module": "
|
|
93
|
+
"name": "Buttonsimple",
|
|
94
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
162
95
|
}
|
|
163
96
|
},
|
|
164
97
|
{
|
|
165
98
|
"kind": "field",
|
|
166
|
-
"name": "
|
|
99
|
+
"name": "softDisabled",
|
|
167
100
|
"type": {
|
|
168
|
-
"text": "boolean"
|
|
101
|
+
"text": "boolean | undefined"
|
|
169
102
|
},
|
|
170
|
-
"
|
|
171
|
-
"
|
|
172
|
-
"attribute": "
|
|
103
|
+
"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.",
|
|
104
|
+
"default": "undefined",
|
|
105
|
+
"attribute": "soft-disabled",
|
|
173
106
|
"inheritedFrom": {
|
|
174
|
-
"name": "
|
|
175
|
-
"module": "
|
|
107
|
+
"name": "Buttonsimple",
|
|
108
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
176
109
|
}
|
|
177
110
|
},
|
|
178
111
|
{
|
|
179
112
|
"kind": "field",
|
|
180
|
-
"name": "
|
|
113
|
+
"name": "size",
|
|
181
114
|
"type": {
|
|
182
|
-
"text": "
|
|
115
|
+
"text": "ButtonSize"
|
|
183
116
|
},
|
|
184
|
-
"description": "
|
|
185
|
-
"
|
|
117
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
118
|
+
"default": "32",
|
|
119
|
+
"attribute": "size",
|
|
120
|
+
"reflects": true,
|
|
186
121
|
"inheritedFrom": {
|
|
187
|
-
"name": "
|
|
188
|
-
"module": "
|
|
122
|
+
"name": "Buttonsimple",
|
|
123
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
189
124
|
}
|
|
190
|
-
}
|
|
191
|
-
],
|
|
192
|
-
"mixins": [
|
|
193
|
-
{
|
|
194
|
-
"name": "AvatarComponentMixin",
|
|
195
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
196
125
|
},
|
|
197
126
|
{
|
|
198
|
-
"
|
|
199
|
-
"
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
"module": "/src/models"
|
|
205
|
-
},
|
|
206
|
-
"tagName": "mdc-avatar",
|
|
207
|
-
"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 */",
|
|
208
|
-
"customElement": true,
|
|
209
|
-
"attributes": [
|
|
210
|
-
{
|
|
211
|
-
"name": "src",
|
|
212
|
-
"type": {
|
|
213
|
-
"text": "string | undefined"
|
|
214
|
-
},
|
|
215
|
-
"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.",
|
|
216
|
-
"fieldName": "src",
|
|
127
|
+
"kind": "field",
|
|
128
|
+
"name": "role",
|
|
129
|
+
"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.",
|
|
130
|
+
"default": "button",
|
|
131
|
+
"attribute": "role",
|
|
132
|
+
"reflects": true,
|
|
217
133
|
"inheritedFrom": {
|
|
218
|
-
"name": "
|
|
219
|
-
"module": "
|
|
134
|
+
"name": "Buttonsimple",
|
|
135
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
220
136
|
}
|
|
221
137
|
},
|
|
222
138
|
{
|
|
223
|
-
"
|
|
139
|
+
"kind": "field",
|
|
140
|
+
"name": "ariaStateKey",
|
|
224
141
|
"type": {
|
|
225
142
|
"text": "string | undefined"
|
|
226
143
|
},
|
|
227
|
-
"description": "
|
|
228
|
-
"
|
|
144
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
145
|
+
"default": "'aria-pressed' (when)",
|
|
146
|
+
"attribute": "ariaStateKey",
|
|
147
|
+
"reflects": true,
|
|
229
148
|
"inheritedFrom": {
|
|
230
|
-
"name": "
|
|
231
|
-
"module": "
|
|
149
|
+
"name": "Buttonsimple",
|
|
150
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
232
151
|
}
|
|
233
152
|
},
|
|
234
153
|
{
|
|
235
|
-
"
|
|
154
|
+
"kind": "field",
|
|
155
|
+
"name": "type",
|
|
236
156
|
"type": {
|
|
237
|
-
"text": "
|
|
157
|
+
"text": "ButtonType"
|
|
238
158
|
},
|
|
239
|
-
"description": "
|
|
240
|
-
"
|
|
159
|
+
"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.",
|
|
160
|
+
"default": "button",
|
|
161
|
+
"attribute": "type",
|
|
162
|
+
"reflects": true,
|
|
241
163
|
"inheritedFrom": {
|
|
242
|
-
"name": "
|
|
243
|
-
"module": "
|
|
164
|
+
"name": "Buttonsimple",
|
|
165
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
244
166
|
}
|
|
245
167
|
},
|
|
246
168
|
{
|
|
247
|
-
"
|
|
248
|
-
"
|
|
249
|
-
|
|
250
|
-
},
|
|
251
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
252
|
-
"default": "32",
|
|
253
|
-
"fieldName": "size",
|
|
254
|
-
"inheritedFrom": {
|
|
255
|
-
"name": "AvatarComponentMixin",
|
|
256
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
257
|
-
}
|
|
258
|
-
},
|
|
259
|
-
{
|
|
260
|
-
"name": "counter",
|
|
261
|
-
"type": {
|
|
262
|
-
"text": "number | undefined"
|
|
263
|
-
},
|
|
264
|
-
"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`.",
|
|
265
|
-
"fieldName": "counter",
|
|
266
|
-
"inheritedFrom": {
|
|
267
|
-
"name": "AvatarComponentMixin",
|
|
268
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
269
|
-
}
|
|
270
|
-
},
|
|
271
|
-
{
|
|
272
|
-
"name": "is-typing",
|
|
273
|
-
"type": {
|
|
274
|
-
"text": "boolean"
|
|
275
|
-
},
|
|
276
|
-
"default": "false",
|
|
277
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
278
|
-
"fieldName": "isTyping",
|
|
279
|
-
"inheritedFrom": {
|
|
280
|
-
"name": "AvatarComponentMixin",
|
|
281
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
282
|
-
}
|
|
283
|
-
},
|
|
284
|
-
{
|
|
285
|
-
"name": "icon-name",
|
|
286
|
-
"type": {
|
|
287
|
-
"text": "IconNames | undefined"
|
|
288
|
-
},
|
|
289
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
290
|
-
"fieldName": "iconName",
|
|
291
|
-
"inheritedFrom": {
|
|
292
|
-
"name": "IconNameMixin",
|
|
293
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
294
|
-
}
|
|
295
|
-
}
|
|
296
|
-
]
|
|
297
|
-
}
|
|
298
|
-
],
|
|
299
|
-
"exports": [
|
|
300
|
-
{
|
|
301
|
-
"kind": "js",
|
|
302
|
-
"name": "default",
|
|
303
|
-
"declaration": {
|
|
304
|
-
"name": "Avatar",
|
|
305
|
-
"module": "components/avatar/avatar.component.js"
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
]
|
|
309
|
-
},
|
|
310
|
-
{
|
|
311
|
-
"kind": "javascript-module",
|
|
312
|
-
"path": "components/alertchip/alertchip.component.js",
|
|
313
|
-
"declarations": [
|
|
314
|
-
{
|
|
315
|
-
"kind": "class",
|
|
316
|
-
"description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
|
|
317
|
-
"name": "AlertChip",
|
|
318
|
-
"cssProperties": [
|
|
319
|
-
{
|
|
320
|
-
"description": "The color of the label text",
|
|
321
|
-
"name": "--mdc-chip-color"
|
|
322
|
-
},
|
|
323
|
-
{
|
|
324
|
-
"description": "The color of the icon",
|
|
325
|
-
"name": "--mdc-chip-icon-color"
|
|
326
|
-
},
|
|
327
|
-
{
|
|
328
|
-
"description": "The border color of the alertchip",
|
|
329
|
-
"name": "--mdc-chip-border-color"
|
|
330
|
-
},
|
|
331
|
-
{
|
|
332
|
-
"description": "The background color of the alertchip",
|
|
333
|
-
"name": "--mdc-chip-background-color"
|
|
334
|
-
}
|
|
335
|
-
],
|
|
336
|
-
"members": [
|
|
337
|
-
{
|
|
338
|
-
"kind": "field",
|
|
339
|
-
"name": "variant",
|
|
340
|
-
"type": {
|
|
341
|
-
"text": "VariantType"
|
|
342
|
-
},
|
|
343
|
-
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
344
|
-
"default": "neutral",
|
|
345
|
-
"attribute": "variant"
|
|
346
|
-
},
|
|
347
|
-
{
|
|
348
|
-
"kind": "field",
|
|
349
|
-
"name": "label",
|
|
350
|
-
"type": {
|
|
351
|
-
"text": "string"
|
|
352
|
-
},
|
|
353
|
-
"default": "''",
|
|
354
|
-
"description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
355
|
-
"attribute": "label"
|
|
356
|
-
},
|
|
357
|
-
{
|
|
358
|
-
"kind": "field",
|
|
359
|
-
"name": "tabIndex",
|
|
360
|
-
"type": {
|
|
361
|
-
"text": "number"
|
|
362
|
-
},
|
|
363
|
-
"default": "0",
|
|
364
|
-
"description": "This property specifies the tab order of the element.",
|
|
365
|
-
"attribute": "tabIndex",
|
|
366
|
-
"reflects": true,
|
|
367
|
-
"inheritedFrom": {
|
|
368
|
-
"name": "TabIndexMixin",
|
|
369
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
370
|
-
}
|
|
371
|
-
},
|
|
372
|
-
{
|
|
373
|
-
"kind": "field",
|
|
374
|
-
"name": "disabled",
|
|
375
|
-
"type": {
|
|
376
|
-
"text": "boolean | undefined"
|
|
377
|
-
},
|
|
378
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
379
|
-
"default": "undefined",
|
|
380
|
-
"attribute": "disabled",
|
|
381
|
-
"reflects": true,
|
|
382
|
-
"inheritedFrom": {
|
|
383
|
-
"name": "DisabledMixin",
|
|
384
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
385
|
-
}
|
|
386
|
-
},
|
|
387
|
-
{
|
|
388
|
-
"kind": "field",
|
|
389
|
-
"name": "active",
|
|
390
|
-
"type": {
|
|
391
|
-
"text": "boolean | undefined"
|
|
392
|
-
},
|
|
393
|
-
"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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
394
|
-
"default": "undefined",
|
|
395
|
-
"attribute": "active",
|
|
396
|
-
"reflects": true,
|
|
397
|
-
"inheritedFrom": {
|
|
398
|
-
"name": "Buttonsimple",
|
|
399
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
400
|
-
}
|
|
401
|
-
},
|
|
402
|
-
{
|
|
403
|
-
"kind": "field",
|
|
404
|
-
"name": "softDisabled",
|
|
405
|
-
"type": {
|
|
406
|
-
"text": "boolean | undefined"
|
|
407
|
-
},
|
|
408
|
-
"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.",
|
|
409
|
-
"default": "undefined",
|
|
410
|
-
"attribute": "soft-disabled",
|
|
411
|
-
"inheritedFrom": {
|
|
412
|
-
"name": "Buttonsimple",
|
|
413
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
414
|
-
}
|
|
415
|
-
},
|
|
416
|
-
{
|
|
417
|
-
"kind": "field",
|
|
418
|
-
"name": "size",
|
|
419
|
-
"type": {
|
|
420
|
-
"text": "ButtonSize"
|
|
421
|
-
},
|
|
422
|
-
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
423
|
-
"default": "32",
|
|
424
|
-
"attribute": "size",
|
|
425
|
-
"reflects": true,
|
|
426
|
-
"inheritedFrom": {
|
|
427
|
-
"name": "Buttonsimple",
|
|
428
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
429
|
-
}
|
|
430
|
-
},
|
|
431
|
-
{
|
|
432
|
-
"kind": "field",
|
|
433
|
-
"name": "role",
|
|
434
|
-
"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.",
|
|
435
|
-
"default": "button",
|
|
436
|
-
"attribute": "role",
|
|
437
|
-
"reflects": true,
|
|
438
|
-
"inheritedFrom": {
|
|
439
|
-
"name": "Buttonsimple",
|
|
440
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
441
|
-
}
|
|
442
|
-
},
|
|
443
|
-
{
|
|
444
|
-
"kind": "field",
|
|
445
|
-
"name": "ariaStateKey",
|
|
446
|
-
"type": {
|
|
447
|
-
"text": "string | undefined"
|
|
448
|
-
},
|
|
449
|
-
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
450
|
-
"default": "'aria-pressed' (when)",
|
|
451
|
-
"attribute": "ariaStateKey",
|
|
452
|
-
"reflects": true,
|
|
453
|
-
"inheritedFrom": {
|
|
454
|
-
"name": "Buttonsimple",
|
|
455
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
456
|
-
}
|
|
457
|
-
},
|
|
458
|
-
{
|
|
459
|
-
"kind": "field",
|
|
460
|
-
"name": "type",
|
|
461
|
-
"type": {
|
|
462
|
-
"text": "ButtonType"
|
|
463
|
-
},
|
|
464
|
-
"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.",
|
|
465
|
-
"default": "button",
|
|
466
|
-
"attribute": "type",
|
|
467
|
-
"reflects": true,
|
|
468
|
-
"inheritedFrom": {
|
|
469
|
-
"name": "Buttonsimple",
|
|
470
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
471
|
-
}
|
|
472
|
-
},
|
|
473
|
-
{
|
|
474
|
-
"kind": "method",
|
|
475
|
-
"name": "executeAction",
|
|
476
|
-
"privacy": "protected",
|
|
169
|
+
"kind": "method",
|
|
170
|
+
"name": "executeAction",
|
|
171
|
+
"privacy": "protected",
|
|
477
172
|
"inheritedFrom": {
|
|
478
173
|
"name": "Buttonsimple",
|
|
479
174
|
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
@@ -691,95 +386,400 @@
|
|
|
691
386
|
{
|
|
692
387
|
"name": "size",
|
|
693
388
|
"type": {
|
|
694
|
-
"text": "ButtonSize"
|
|
389
|
+
"text": "ButtonSize"
|
|
390
|
+
},
|
|
391
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
392
|
+
"default": "32",
|
|
393
|
+
"fieldName": "size",
|
|
394
|
+
"inheritedFrom": {
|
|
395
|
+
"name": "Buttonsimple",
|
|
396
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
397
|
+
}
|
|
398
|
+
},
|
|
399
|
+
{
|
|
400
|
+
"name": "role",
|
|
401
|
+
"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.",
|
|
402
|
+
"default": "button",
|
|
403
|
+
"fieldName": "role",
|
|
404
|
+
"inheritedFrom": {
|
|
405
|
+
"name": "Buttonsimple",
|
|
406
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
407
|
+
}
|
|
408
|
+
},
|
|
409
|
+
{
|
|
410
|
+
"name": "ariaStateKey",
|
|
411
|
+
"type": {
|
|
412
|
+
"text": "string | undefined"
|
|
413
|
+
},
|
|
414
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
415
|
+
"default": "'aria-pressed' (when)",
|
|
416
|
+
"fieldName": "ariaStateKey",
|
|
417
|
+
"inheritedFrom": {
|
|
418
|
+
"name": "Buttonsimple",
|
|
419
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
420
|
+
}
|
|
421
|
+
},
|
|
422
|
+
{
|
|
423
|
+
"name": "type",
|
|
424
|
+
"type": {
|
|
425
|
+
"text": "ButtonType"
|
|
426
|
+
},
|
|
427
|
+
"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.",
|
|
428
|
+
"default": "button",
|
|
429
|
+
"fieldName": "type",
|
|
430
|
+
"inheritedFrom": {
|
|
431
|
+
"name": "Buttonsimple",
|
|
432
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
],
|
|
436
|
+
"superclass": {
|
|
437
|
+
"name": "Buttonsimple",
|
|
438
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
439
|
+
},
|
|
440
|
+
"tagName": "mdc-alertchip",
|
|
441
|
+
"jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
|
|
442
|
+
"customElement": true,
|
|
443
|
+
"events": [
|
|
444
|
+
{
|
|
445
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
446
|
+
"name": "click",
|
|
447
|
+
"reactName": "onClick",
|
|
448
|
+
"inheritedFrom": {
|
|
449
|
+
"name": "Buttonsimple",
|
|
450
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
451
|
+
}
|
|
452
|
+
},
|
|
453
|
+
{
|
|
454
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
455
|
+
"name": "keydown",
|
|
456
|
+
"reactName": "onKeyDown",
|
|
457
|
+
"inheritedFrom": {
|
|
458
|
+
"name": "Buttonsimple",
|
|
459
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
460
|
+
}
|
|
461
|
+
},
|
|
462
|
+
{
|
|
463
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
464
|
+
"name": "keyup",
|
|
465
|
+
"reactName": "onKeyUp",
|
|
466
|
+
"inheritedFrom": {
|
|
467
|
+
"name": "Buttonsimple",
|
|
468
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
469
|
+
}
|
|
470
|
+
},
|
|
471
|
+
{
|
|
472
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
473
|
+
"name": "focus",
|
|
474
|
+
"reactName": "onFocus",
|
|
475
|
+
"inheritedFrom": {
|
|
476
|
+
"name": "Buttonsimple",
|
|
477
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
]
|
|
481
|
+
}
|
|
482
|
+
],
|
|
483
|
+
"exports": [
|
|
484
|
+
{
|
|
485
|
+
"kind": "js",
|
|
486
|
+
"name": "default",
|
|
487
|
+
"declaration": {
|
|
488
|
+
"name": "AlertChip",
|
|
489
|
+
"module": "components/alertchip/alertchip.component.js"
|
|
490
|
+
}
|
|
491
|
+
}
|
|
492
|
+
]
|
|
493
|
+
},
|
|
494
|
+
{
|
|
495
|
+
"kind": "javascript-module",
|
|
496
|
+
"path": "components/appheader/appheader.component.js",
|
|
497
|
+
"declarations": [
|
|
498
|
+
{
|
|
499
|
+
"kind": "class",
|
|
500
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
501
|
+
"name": "Appheader",
|
|
502
|
+
"cssParts": [
|
|
503
|
+
{
|
|
504
|
+
"description": "The main container for styling the header.",
|
|
505
|
+
"name": "container"
|
|
506
|
+
},
|
|
507
|
+
{
|
|
508
|
+
"description": "The leading section of the header.",
|
|
509
|
+
"name": "leading-section"
|
|
510
|
+
},
|
|
511
|
+
{
|
|
512
|
+
"description": "The center section of the header.",
|
|
513
|
+
"name": "center-section"
|
|
514
|
+
},
|
|
515
|
+
{
|
|
516
|
+
"description": "The trailing section of the header.",
|
|
517
|
+
"name": "trailing-section"
|
|
518
|
+
}
|
|
519
|
+
],
|
|
520
|
+
"slots": [
|
|
521
|
+
{
|
|
522
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
523
|
+
"name": "leading"
|
|
524
|
+
},
|
|
525
|
+
{
|
|
526
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
527
|
+
"name": "center"
|
|
528
|
+
},
|
|
529
|
+
{
|
|
530
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
531
|
+
"name": "trailing"
|
|
532
|
+
}
|
|
533
|
+
],
|
|
534
|
+
"members": [],
|
|
535
|
+
"superclass": {
|
|
536
|
+
"name": "Component",
|
|
537
|
+
"module": "/src/models"
|
|
538
|
+
},
|
|
539
|
+
"tagName": "mdc-appheader",
|
|
540
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
541
|
+
"customElement": true
|
|
542
|
+
}
|
|
543
|
+
],
|
|
544
|
+
"exports": [
|
|
545
|
+
{
|
|
546
|
+
"kind": "js",
|
|
547
|
+
"name": "default",
|
|
548
|
+
"declaration": {
|
|
549
|
+
"name": "Appheader",
|
|
550
|
+
"module": "components/appheader/appheader.component.js"
|
|
551
|
+
}
|
|
552
|
+
}
|
|
553
|
+
]
|
|
554
|
+
},
|
|
555
|
+
{
|
|
556
|
+
"kind": "javascript-module",
|
|
557
|
+
"path": "components/avatar/avatar.component.js",
|
|
558
|
+
"declarations": [
|
|
559
|
+
{
|
|
560
|
+
"kind": "class",
|
|
561
|
+
"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.",
|
|
562
|
+
"name": "Avatar",
|
|
563
|
+
"cssProperties": [
|
|
564
|
+
{
|
|
565
|
+
"description": "Allows customization of the default background color.",
|
|
566
|
+
"name": "--mdc-avatar-default-background-color"
|
|
567
|
+
},
|
|
568
|
+
{
|
|
569
|
+
"description": "Allows customization of the default foreground color.",
|
|
570
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
574
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
575
|
+
},
|
|
576
|
+
{
|
|
577
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
578
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
579
|
+
},
|
|
580
|
+
{
|
|
581
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
582
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
583
|
+
}
|
|
584
|
+
],
|
|
585
|
+
"members": [
|
|
586
|
+
{
|
|
587
|
+
"kind": "field",
|
|
588
|
+
"name": "src",
|
|
589
|
+
"type": {
|
|
590
|
+
"text": "string | undefined"
|
|
591
|
+
},
|
|
592
|
+
"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.",
|
|
593
|
+
"attribute": "src",
|
|
594
|
+
"inheritedFrom": {
|
|
595
|
+
"name": "AvatarComponentMixin",
|
|
596
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
597
|
+
}
|
|
598
|
+
},
|
|
599
|
+
{
|
|
600
|
+
"kind": "field",
|
|
601
|
+
"name": "initials",
|
|
602
|
+
"type": {
|
|
603
|
+
"text": "string | undefined"
|
|
604
|
+
},
|
|
605
|
+
"description": "The initials to be displayed for the avatar.",
|
|
606
|
+
"attribute": "initials",
|
|
607
|
+
"inheritedFrom": {
|
|
608
|
+
"name": "AvatarComponentMixin",
|
|
609
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
610
|
+
}
|
|
611
|
+
},
|
|
612
|
+
{
|
|
613
|
+
"kind": "field",
|
|
614
|
+
"name": "presence",
|
|
615
|
+
"type": {
|
|
616
|
+
"text": "PresenceType | undefined"
|
|
617
|
+
},
|
|
618
|
+
"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`",
|
|
619
|
+
"attribute": "presence",
|
|
620
|
+
"inheritedFrom": {
|
|
621
|
+
"name": "AvatarComponentMixin",
|
|
622
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
623
|
+
}
|
|
624
|
+
},
|
|
625
|
+
{
|
|
626
|
+
"kind": "field",
|
|
627
|
+
"name": "size",
|
|
628
|
+
"type": {
|
|
629
|
+
"text": "AvatarSize"
|
|
630
|
+
},
|
|
631
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
632
|
+
"default": "32",
|
|
633
|
+
"attribute": "size",
|
|
634
|
+
"reflects": true,
|
|
635
|
+
"inheritedFrom": {
|
|
636
|
+
"name": "AvatarComponentMixin",
|
|
637
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
638
|
+
}
|
|
639
|
+
},
|
|
640
|
+
{
|
|
641
|
+
"kind": "field",
|
|
642
|
+
"name": "counter",
|
|
643
|
+
"type": {
|
|
644
|
+
"text": "number | undefined"
|
|
645
|
+
},
|
|
646
|
+
"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`.",
|
|
647
|
+
"attribute": "counter",
|
|
648
|
+
"inheritedFrom": {
|
|
649
|
+
"name": "AvatarComponentMixin",
|
|
650
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
651
|
+
}
|
|
652
|
+
},
|
|
653
|
+
{
|
|
654
|
+
"kind": "field",
|
|
655
|
+
"name": "isTyping",
|
|
656
|
+
"type": {
|
|
657
|
+
"text": "boolean"
|
|
658
|
+
},
|
|
659
|
+
"default": "false",
|
|
660
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
661
|
+
"attribute": "is-typing",
|
|
662
|
+
"inheritedFrom": {
|
|
663
|
+
"name": "AvatarComponentMixin",
|
|
664
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
665
|
+
}
|
|
666
|
+
},
|
|
667
|
+
{
|
|
668
|
+
"kind": "field",
|
|
669
|
+
"name": "iconName",
|
|
670
|
+
"type": {
|
|
671
|
+
"text": "IconNames | undefined"
|
|
672
|
+
},
|
|
673
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
674
|
+
"attribute": "icon-name",
|
|
675
|
+
"inheritedFrom": {
|
|
676
|
+
"name": "IconNameMixin",
|
|
677
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
678
|
+
}
|
|
679
|
+
}
|
|
680
|
+
],
|
|
681
|
+
"mixins": [
|
|
682
|
+
{
|
|
683
|
+
"name": "AvatarComponentMixin",
|
|
684
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
685
|
+
},
|
|
686
|
+
{
|
|
687
|
+
"name": "IconNameMixin",
|
|
688
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
689
|
+
}
|
|
690
|
+
],
|
|
691
|
+
"superclass": {
|
|
692
|
+
"name": "Component",
|
|
693
|
+
"module": "/src/models"
|
|
694
|
+
},
|
|
695
|
+
"tagName": "mdc-avatar",
|
|
696
|
+
"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 */",
|
|
697
|
+
"customElement": true,
|
|
698
|
+
"attributes": [
|
|
699
|
+
{
|
|
700
|
+
"name": "src",
|
|
701
|
+
"type": {
|
|
702
|
+
"text": "string | undefined"
|
|
695
703
|
},
|
|
696
|
-
"description": "
|
|
697
|
-
"
|
|
698
|
-
"fieldName": "size",
|
|
699
|
-
"inheritedFrom": {
|
|
700
|
-
"name": "Buttonsimple",
|
|
701
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
702
|
-
}
|
|
703
|
-
},
|
|
704
|
-
{
|
|
705
|
-
"name": "role",
|
|
706
|
-
"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.",
|
|
707
|
-
"default": "button",
|
|
708
|
-
"fieldName": "role",
|
|
704
|
+
"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.",
|
|
705
|
+
"fieldName": "src",
|
|
709
706
|
"inheritedFrom": {
|
|
710
|
-
"name": "
|
|
711
|
-
"module": "src/
|
|
707
|
+
"name": "AvatarComponentMixin",
|
|
708
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
712
709
|
}
|
|
713
710
|
},
|
|
714
711
|
{
|
|
715
|
-
"name": "
|
|
712
|
+
"name": "initials",
|
|
716
713
|
"type": {
|
|
717
714
|
"text": "string | undefined"
|
|
718
715
|
},
|
|
719
|
-
"description": "
|
|
720
|
-
"
|
|
721
|
-
"fieldName": "ariaStateKey",
|
|
716
|
+
"description": "The initials to be displayed for the avatar.",
|
|
717
|
+
"fieldName": "initials",
|
|
722
718
|
"inheritedFrom": {
|
|
723
|
-
"name": "
|
|
724
|
-
"module": "src/
|
|
719
|
+
"name": "AvatarComponentMixin",
|
|
720
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
725
721
|
}
|
|
726
722
|
},
|
|
727
723
|
{
|
|
728
|
-
"name": "
|
|
724
|
+
"name": "presence",
|
|
729
725
|
"type": {
|
|
730
|
-
"text": "
|
|
726
|
+
"text": "PresenceType | undefined"
|
|
731
727
|
},
|
|
732
|
-
"description": "
|
|
733
|
-
"
|
|
734
|
-
"fieldName": "type",
|
|
728
|
+
"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`",
|
|
729
|
+
"fieldName": "presence",
|
|
735
730
|
"inheritedFrom": {
|
|
736
|
-
"name": "
|
|
737
|
-
"module": "src/
|
|
731
|
+
"name": "AvatarComponentMixin",
|
|
732
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
738
733
|
}
|
|
739
|
-
}
|
|
740
|
-
],
|
|
741
|
-
"superclass": {
|
|
742
|
-
"name": "Buttonsimple",
|
|
743
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
744
|
-
},
|
|
745
|
-
"tagName": "mdc-alertchip",
|
|
746
|
-
"jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
|
|
747
|
-
"customElement": true,
|
|
748
|
-
"events": [
|
|
734
|
+
},
|
|
749
735
|
{
|
|
750
|
-
"
|
|
751
|
-
"
|
|
752
|
-
|
|
736
|
+
"name": "size",
|
|
737
|
+
"type": {
|
|
738
|
+
"text": "AvatarSize"
|
|
739
|
+
},
|
|
740
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
741
|
+
"default": "32",
|
|
742
|
+
"fieldName": "size",
|
|
753
743
|
"inheritedFrom": {
|
|
754
|
-
"name": "
|
|
755
|
-
"module": "src/
|
|
744
|
+
"name": "AvatarComponentMixin",
|
|
745
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
756
746
|
}
|
|
757
747
|
},
|
|
758
748
|
{
|
|
759
|
-
"
|
|
760
|
-
"
|
|
761
|
-
|
|
749
|
+
"name": "counter",
|
|
750
|
+
"type": {
|
|
751
|
+
"text": "number | undefined"
|
|
752
|
+
},
|
|
753
|
+
"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`.",
|
|
754
|
+
"fieldName": "counter",
|
|
762
755
|
"inheritedFrom": {
|
|
763
|
-
"name": "
|
|
764
|
-
"module": "src/
|
|
756
|
+
"name": "AvatarComponentMixin",
|
|
757
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
765
758
|
}
|
|
766
759
|
},
|
|
767
760
|
{
|
|
768
|
-
"
|
|
769
|
-
"
|
|
770
|
-
|
|
761
|
+
"name": "is-typing",
|
|
762
|
+
"type": {
|
|
763
|
+
"text": "boolean"
|
|
764
|
+
},
|
|
765
|
+
"default": "false",
|
|
766
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
767
|
+
"fieldName": "isTyping",
|
|
771
768
|
"inheritedFrom": {
|
|
772
|
-
"name": "
|
|
773
|
-
"module": "src/
|
|
769
|
+
"name": "AvatarComponentMixin",
|
|
770
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
774
771
|
}
|
|
775
772
|
},
|
|
776
773
|
{
|
|
777
|
-
"
|
|
778
|
-
"
|
|
779
|
-
|
|
774
|
+
"name": "icon-name",
|
|
775
|
+
"type": {
|
|
776
|
+
"text": "IconNames | undefined"
|
|
777
|
+
},
|
|
778
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
779
|
+
"fieldName": "iconName",
|
|
780
780
|
"inheritedFrom": {
|
|
781
|
-
"name": "
|
|
782
|
-
"module": "src/
|
|
781
|
+
"name": "IconNameMixin",
|
|
782
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
783
783
|
}
|
|
784
784
|
}
|
|
785
785
|
]
|
|
@@ -790,8 +790,8 @@
|
|
|
790
790
|
"kind": "js",
|
|
791
791
|
"name": "default",
|
|
792
792
|
"declaration": {
|
|
793
|
-
"name": "
|
|
794
|
-
"module": "components/
|
|
793
|
+
"name": "Avatar",
|
|
794
|
+
"module": "components/avatar/avatar.component.js"
|
|
795
795
|
}
|
|
796
796
|
}
|
|
797
797
|
]
|
|
@@ -9533,77 +9533,6 @@
|
|
|
9533
9533
|
}
|
|
9534
9534
|
]
|
|
9535
9535
|
},
|
|
9536
|
-
{
|
|
9537
|
-
"kind": "javascript-module",
|
|
9538
|
-
"path": "components/marker/marker.component.js",
|
|
9539
|
-
"declarations": [
|
|
9540
|
-
{
|
|
9541
|
-
"kind": "class",
|
|
9542
|
-
"description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
|
|
9543
|
-
"name": "Marker",
|
|
9544
|
-
"cssProperties": [
|
|
9545
|
-
{
|
|
9546
|
-
"description": "Allows customization of the default background color in solid variant.",
|
|
9547
|
-
"name": "--mdc-marker-solid-background-color"
|
|
9548
|
-
},
|
|
9549
|
-
{
|
|
9550
|
-
"description": "Allows customization of the default stripes in striped variant.",
|
|
9551
|
-
"name": "--mdc-marker-striped-color"
|
|
9552
|
-
},
|
|
9553
|
-
{
|
|
9554
|
-
"description": "Allows customization of the default background color in striped variant.",
|
|
9555
|
-
"name": "--mdc-marker-striped-background-color"
|
|
9556
|
-
},
|
|
9557
|
-
{
|
|
9558
|
-
"description": "Allows customization of the default width.",
|
|
9559
|
-
"name": "--mdc-marker-width"
|
|
9560
|
-
}
|
|
9561
|
-
],
|
|
9562
|
-
"members": [
|
|
9563
|
-
{
|
|
9564
|
-
"kind": "field",
|
|
9565
|
-
"name": "variant",
|
|
9566
|
-
"type": {
|
|
9567
|
-
"text": "MarkerVariants"
|
|
9568
|
-
},
|
|
9569
|
-
"privacy": "public",
|
|
9570
|
-
"description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
|
|
9571
|
-
"default": "solid",
|
|
9572
|
-
"attribute": "variant",
|
|
9573
|
-
"reflects": true
|
|
9574
|
-
}
|
|
9575
|
-
],
|
|
9576
|
-
"attributes": [
|
|
9577
|
-
{
|
|
9578
|
-
"name": "variant",
|
|
9579
|
-
"type": {
|
|
9580
|
-
"text": "MarkerVariants"
|
|
9581
|
-
},
|
|
9582
|
-
"description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
|
|
9583
|
-
"default": "solid",
|
|
9584
|
-
"fieldName": "variant"
|
|
9585
|
-
}
|
|
9586
|
-
],
|
|
9587
|
-
"superclass": {
|
|
9588
|
-
"name": "Component",
|
|
9589
|
-
"module": "/src/models"
|
|
9590
|
-
},
|
|
9591
|
-
"tagName": "mdc-marker",
|
|
9592
|
-
"jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
|
|
9593
|
-
"customElement": true
|
|
9594
|
-
}
|
|
9595
|
-
],
|
|
9596
|
-
"exports": [
|
|
9597
|
-
{
|
|
9598
|
-
"kind": "js",
|
|
9599
|
-
"name": "default",
|
|
9600
|
-
"declaration": {
|
|
9601
|
-
"name": "Marker",
|
|
9602
|
-
"module": "components/marker/marker.component.js"
|
|
9603
|
-
}
|
|
9604
|
-
}
|
|
9605
|
-
]
|
|
9606
|
-
},
|
|
9607
9536
|
{
|
|
9608
9537
|
"kind": "javascript-module",
|
|
9609
9538
|
"path": "components/optgroup/optgroup.component.js",
|
|
@@ -10511,6 +10440,77 @@
|
|
|
10511
10440
|
}
|
|
10512
10441
|
]
|
|
10513
10442
|
},
|
|
10443
|
+
{
|
|
10444
|
+
"kind": "javascript-module",
|
|
10445
|
+
"path": "components/marker/marker.component.js",
|
|
10446
|
+
"declarations": [
|
|
10447
|
+
{
|
|
10448
|
+
"kind": "class",
|
|
10449
|
+
"description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
|
|
10450
|
+
"name": "Marker",
|
|
10451
|
+
"cssProperties": [
|
|
10452
|
+
{
|
|
10453
|
+
"description": "Allows customization of the default background color in solid variant.",
|
|
10454
|
+
"name": "--mdc-marker-solid-background-color"
|
|
10455
|
+
},
|
|
10456
|
+
{
|
|
10457
|
+
"description": "Allows customization of the default stripes in striped variant.",
|
|
10458
|
+
"name": "--mdc-marker-striped-color"
|
|
10459
|
+
},
|
|
10460
|
+
{
|
|
10461
|
+
"description": "Allows customization of the default background color in striped variant.",
|
|
10462
|
+
"name": "--mdc-marker-striped-background-color"
|
|
10463
|
+
},
|
|
10464
|
+
{
|
|
10465
|
+
"description": "Allows customization of the default width.",
|
|
10466
|
+
"name": "--mdc-marker-width"
|
|
10467
|
+
}
|
|
10468
|
+
],
|
|
10469
|
+
"members": [
|
|
10470
|
+
{
|
|
10471
|
+
"kind": "field",
|
|
10472
|
+
"name": "variant",
|
|
10473
|
+
"type": {
|
|
10474
|
+
"text": "MarkerVariants"
|
|
10475
|
+
},
|
|
10476
|
+
"privacy": "public",
|
|
10477
|
+
"description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
|
|
10478
|
+
"default": "solid",
|
|
10479
|
+
"attribute": "variant",
|
|
10480
|
+
"reflects": true
|
|
10481
|
+
}
|
|
10482
|
+
],
|
|
10483
|
+
"attributes": [
|
|
10484
|
+
{
|
|
10485
|
+
"name": "variant",
|
|
10486
|
+
"type": {
|
|
10487
|
+
"text": "MarkerVariants"
|
|
10488
|
+
},
|
|
10489
|
+
"description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
|
|
10490
|
+
"default": "solid",
|
|
10491
|
+
"fieldName": "variant"
|
|
10492
|
+
}
|
|
10493
|
+
],
|
|
10494
|
+
"superclass": {
|
|
10495
|
+
"name": "Component",
|
|
10496
|
+
"module": "/src/models"
|
|
10497
|
+
},
|
|
10498
|
+
"tagName": "mdc-marker",
|
|
10499
|
+
"jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
|
|
10500
|
+
"customElement": true
|
|
10501
|
+
}
|
|
10502
|
+
],
|
|
10503
|
+
"exports": [
|
|
10504
|
+
{
|
|
10505
|
+
"kind": "js",
|
|
10506
|
+
"name": "default",
|
|
10507
|
+
"declaration": {
|
|
10508
|
+
"name": "Marker",
|
|
10509
|
+
"module": "components/marker/marker.component.js"
|
|
10510
|
+
}
|
|
10511
|
+
}
|
|
10512
|
+
]
|
|
10513
|
+
},
|
|
10514
10514
|
{
|
|
10515
10515
|
"kind": "javascript-module",
|
|
10516
10516
|
"path": "components/popover/popover.component.js",
|