@momentum-design/components 0.83.4 → 0.83.5
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/custom-elements.json +673 -673
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
|
@@ -4,782 +4,782 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/alertchip/alertchip.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "
|
|
12
|
-
"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",
|
|
13
|
+
"cssProperties": [
|
|
14
|
+
{
|
|
15
|
+
"description": "The color of the label text",
|
|
16
|
+
"name": "--mdc-chip-color"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "The color of the icon",
|
|
20
|
+
"name": "--mdc-chip-icon-color"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"description": "The border color of the alertchip",
|
|
24
|
+
"name": "--mdc-chip-border-color"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"description": "The background color of the alertchip",
|
|
28
|
+
"name": "--mdc-chip-background-color"
|
|
29
|
+
}
|
|
30
|
+
],
|
|
13
31
|
"members": [
|
|
14
32
|
{
|
|
15
33
|
"kind": "field",
|
|
16
|
-
"name": "
|
|
34
|
+
"name": "variant",
|
|
17
35
|
"type": {
|
|
18
|
-
"text": "
|
|
36
|
+
"text": "VariantType"
|
|
19
37
|
},
|
|
20
|
-
"description": "
|
|
21
|
-
"
|
|
22
|
-
"
|
|
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"
|
|
23
41
|
},
|
|
24
42
|
{
|
|
25
43
|
"kind": "field",
|
|
26
|
-
"name": "
|
|
44
|
+
"name": "label",
|
|
27
45
|
"type": {
|
|
28
|
-
"text": "
|
|
46
|
+
"text": "string"
|
|
29
47
|
},
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
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"
|
|
33
51
|
},
|
|
34
52
|
{
|
|
35
53
|
"kind": "field",
|
|
36
|
-
"name": "
|
|
54
|
+
"name": "autofocus",
|
|
55
|
+
"type": {
|
|
56
|
+
"text": "boolean"
|
|
57
|
+
},
|
|
58
|
+
"default": "false",
|
|
59
|
+
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
60
|
+
"attribute": "autofocus",
|
|
61
|
+
"reflects": true,
|
|
62
|
+
"inheritedFrom": {
|
|
63
|
+
"name": "AutoFocusMixin",
|
|
64
|
+
"module": "utils/mixins/AutoFocusMixin.js"
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"kind": "field",
|
|
69
|
+
"name": "tabIndex",
|
|
70
|
+
"type": {
|
|
71
|
+
"text": "number"
|
|
72
|
+
},
|
|
73
|
+
"default": "0",
|
|
74
|
+
"description": "This property specifies the tab order of the element.",
|
|
75
|
+
"attribute": "tabIndex",
|
|
76
|
+
"reflects": true,
|
|
77
|
+
"inheritedFrom": {
|
|
78
|
+
"name": "TabIndexMixin",
|
|
79
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"kind": "field",
|
|
84
|
+
"name": "disabled",
|
|
37
85
|
"type": {
|
|
38
86
|
"text": "boolean | undefined"
|
|
39
87
|
},
|
|
40
|
-
"description": "
|
|
41
|
-
"
|
|
42
|
-
"
|
|
88
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
89
|
+
"default": "undefined",
|
|
90
|
+
"attribute": "disabled",
|
|
91
|
+
"reflects": true,
|
|
92
|
+
"inheritedFrom": {
|
|
93
|
+
"name": "DisabledMixin",
|
|
94
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
95
|
+
}
|
|
43
96
|
},
|
|
44
97
|
{
|
|
45
98
|
"kind": "field",
|
|
46
|
-
"name": "
|
|
99
|
+
"name": "active",
|
|
47
100
|
"type": {
|
|
48
|
-
"text": "
|
|
101
|
+
"text": "boolean | undefined"
|
|
49
102
|
},
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"attribute": "
|
|
103
|
+
"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.",
|
|
104
|
+
"default": "undefined",
|
|
105
|
+
"attribute": "active",
|
|
106
|
+
"reflects": true,
|
|
107
|
+
"inheritedFrom": {
|
|
108
|
+
"name": "Buttonsimple",
|
|
109
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
110
|
+
}
|
|
53
111
|
},
|
|
54
112
|
{
|
|
55
113
|
"kind": "field",
|
|
56
|
-
"name": "
|
|
114
|
+
"name": "softDisabled",
|
|
57
115
|
"type": {
|
|
58
|
-
"text": "
|
|
116
|
+
"text": "boolean | undefined"
|
|
59
117
|
},
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"attribute": "
|
|
118
|
+
"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.",
|
|
119
|
+
"default": "undefined",
|
|
120
|
+
"attribute": "soft-disabled",
|
|
121
|
+
"reflects": true,
|
|
122
|
+
"inheritedFrom": {
|
|
123
|
+
"name": "Buttonsimple",
|
|
124
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
125
|
+
}
|
|
63
126
|
},
|
|
64
127
|
{
|
|
65
128
|
"kind": "field",
|
|
66
|
-
"name": "
|
|
129
|
+
"name": "size",
|
|
67
130
|
"type": {
|
|
68
|
-
"text": "
|
|
131
|
+
"text": "ButtonSize"
|
|
69
132
|
},
|
|
70
|
-
"
|
|
71
|
-
"
|
|
133
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
134
|
+
"default": "32",
|
|
135
|
+
"attribute": "size",
|
|
136
|
+
"reflects": true,
|
|
137
|
+
"inheritedFrom": {
|
|
138
|
+
"name": "Buttonsimple",
|
|
139
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
140
|
+
}
|
|
72
141
|
},
|
|
73
142
|
{
|
|
74
143
|
"kind": "field",
|
|
75
|
-
"name": "
|
|
144
|
+
"name": "role",
|
|
145
|
+
"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.",
|
|
146
|
+
"default": "button",
|
|
147
|
+
"attribute": "role",
|
|
148
|
+
"reflects": true,
|
|
149
|
+
"inheritedFrom": {
|
|
150
|
+
"name": "Buttonsimple",
|
|
151
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"kind": "field",
|
|
156
|
+
"name": "ariaStateKey",
|
|
76
157
|
"type": {
|
|
77
|
-
"text": "
|
|
158
|
+
"text": "string | undefined"
|
|
78
159
|
},
|
|
79
|
-
"
|
|
80
|
-
"
|
|
160
|
+
"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`",
|
|
161
|
+
"default": "'aria-pressed' (when)",
|
|
162
|
+
"attribute": "ariaStateKey",
|
|
163
|
+
"reflects": true,
|
|
164
|
+
"inheritedFrom": {
|
|
165
|
+
"name": "Buttonsimple",
|
|
166
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
167
|
+
}
|
|
81
168
|
},
|
|
82
169
|
{
|
|
83
170
|
"kind": "field",
|
|
84
|
-
"name": "
|
|
85
|
-
"
|
|
86
|
-
|
|
171
|
+
"name": "type",
|
|
172
|
+
"type": {
|
|
173
|
+
"text": "ButtonType"
|
|
174
|
+
},
|
|
175
|
+
"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.",
|
|
176
|
+
"default": "button",
|
|
177
|
+
"attribute": "type",
|
|
178
|
+
"reflects": true,
|
|
179
|
+
"inheritedFrom": {
|
|
180
|
+
"name": "Buttonsimple",
|
|
181
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
182
|
+
}
|
|
87
183
|
},
|
|
88
184
|
{
|
|
89
185
|
"kind": "method",
|
|
90
|
-
"name": "
|
|
91
|
-
"privacy": "
|
|
186
|
+
"name": "executeAction",
|
|
187
|
+
"privacy": "protected",
|
|
188
|
+
"inheritedFrom": {
|
|
189
|
+
"name": "Buttonsimple",
|
|
190
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
191
|
+
}
|
|
92
192
|
},
|
|
93
193
|
{
|
|
94
194
|
"kind": "method",
|
|
95
|
-
"name": "
|
|
96
|
-
"privacy": "
|
|
195
|
+
"name": "setActive",
|
|
196
|
+
"privacy": "protected",
|
|
97
197
|
"parameters": [
|
|
98
198
|
{
|
|
99
|
-
"name": "
|
|
199
|
+
"name": "element",
|
|
100
200
|
"type": {
|
|
101
|
-
"text": "
|
|
102
|
-
}
|
|
201
|
+
"text": "HTMLElement"
|
|
202
|
+
},
|
|
203
|
+
"description": "The button element"
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"name": "active",
|
|
207
|
+
"optional": true,
|
|
208
|
+
"type": {
|
|
209
|
+
"text": "boolean"
|
|
210
|
+
},
|
|
211
|
+
"description": "The active state of the element"
|
|
103
212
|
}
|
|
104
213
|
],
|
|
105
|
-
"description": "
|
|
214
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
215
|
+
"inheritedFrom": {
|
|
216
|
+
"name": "Buttonsimple",
|
|
217
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
218
|
+
}
|
|
106
219
|
},
|
|
107
220
|
{
|
|
108
221
|
"kind": "method",
|
|
109
|
-
"name": "
|
|
222
|
+
"name": "setSoftDisabled",
|
|
110
223
|
"privacy": "private",
|
|
111
224
|
"parameters": [
|
|
112
225
|
{
|
|
113
|
-
"name": "
|
|
226
|
+
"name": "element",
|
|
114
227
|
"type": {
|
|
115
|
-
"text": "
|
|
116
|
-
}
|
|
228
|
+
"text": "HTMLElement"
|
|
229
|
+
},
|
|
230
|
+
"description": "The button element."
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"name": "softDisabled",
|
|
234
|
+
"optional": true,
|
|
235
|
+
"type": {
|
|
236
|
+
"text": "boolean"
|
|
237
|
+
},
|
|
238
|
+
"description": "The soft-disabled state."
|
|
117
239
|
}
|
|
118
240
|
],
|
|
119
|
-
"description": "
|
|
241
|
+
"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.",
|
|
242
|
+
"inheritedFrom": {
|
|
243
|
+
"name": "Buttonsimple",
|
|
244
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
245
|
+
}
|
|
120
246
|
},
|
|
121
247
|
{
|
|
122
248
|
"kind": "method",
|
|
123
|
-
"name": "
|
|
249
|
+
"name": "setDisabled",
|
|
124
250
|
"privacy": "private",
|
|
125
|
-
"
|
|
251
|
+
"parameters": [
|
|
252
|
+
{
|
|
253
|
+
"name": "element",
|
|
254
|
+
"type": {
|
|
255
|
+
"text": "HTMLElement"
|
|
256
|
+
},
|
|
257
|
+
"description": "The button element."
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"name": "disabled",
|
|
261
|
+
"type": {
|
|
262
|
+
"text": "boolean"
|
|
263
|
+
},
|
|
264
|
+
"description": "The disabled state."
|
|
265
|
+
}
|
|
266
|
+
],
|
|
267
|
+
"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.",
|
|
268
|
+
"inheritedFrom": {
|
|
269
|
+
"name": "Buttonsimple",
|
|
270
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
271
|
+
}
|
|
126
272
|
},
|
|
127
273
|
{
|
|
128
|
-
"kind": "
|
|
129
|
-
"name": "
|
|
130
|
-
"
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
"name": "load",
|
|
136
|
-
"type": {
|
|
137
|
-
"text": "CustomEvent"
|
|
138
|
-
},
|
|
139
|
-
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
140
|
-
"reactName": "onLoad"
|
|
141
|
-
},
|
|
142
|
-
{
|
|
143
|
-
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
144
|
-
"name": "complete",
|
|
145
|
-
"reactName": "onComplete"
|
|
146
|
-
},
|
|
147
|
-
{
|
|
148
|
-
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
149
|
-
"name": "error",
|
|
150
|
-
"reactName": "onError"
|
|
151
|
-
}
|
|
152
|
-
],
|
|
153
|
-
"attributes": [
|
|
154
|
-
{
|
|
155
|
-
"name": "name",
|
|
156
|
-
"type": {
|
|
157
|
-
"text": "AnimationNames | undefined"
|
|
158
|
-
},
|
|
159
|
-
"description": "Name of the animation (= filename)",
|
|
160
|
-
"fieldName": "name"
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
"name": "loop",
|
|
164
|
-
"type": {
|
|
165
|
-
"text": "LoopType | undefined"
|
|
166
|
-
},
|
|
167
|
-
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
168
|
-
"fieldName": "loop"
|
|
169
|
-
},
|
|
170
|
-
{
|
|
171
|
-
"name": "autoplay",
|
|
172
|
-
"type": {
|
|
173
|
-
"text": "boolean | undefined"
|
|
174
|
-
},
|
|
175
|
-
"description": "Weather start the animation automatically",
|
|
176
|
-
"fieldName": "autoplay"
|
|
177
|
-
},
|
|
178
|
-
{
|
|
179
|
-
"name": "aria-label",
|
|
180
|
-
"type": {
|
|
181
|
-
"text": "string | null"
|
|
182
|
-
},
|
|
183
|
-
"default": "null",
|
|
184
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
185
|
-
"fieldName": "ariaLabel"
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
"name": "aria-labelledby",
|
|
189
|
-
"type": {
|
|
190
|
-
"text": "string | null"
|
|
191
|
-
},
|
|
192
|
-
"default": "null",
|
|
193
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
194
|
-
"fieldName": "ariaLabelledBy"
|
|
195
|
-
}
|
|
196
|
-
],
|
|
197
|
-
"superclass": {
|
|
198
|
-
"name": "Component",
|
|
199
|
-
"module": "/src/models"
|
|
200
|
-
},
|
|
201
|
-
"tagName": "mdc-animation",
|
|
202
|
-
"jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
|
|
203
|
-
"customElement": true
|
|
204
|
-
}
|
|
205
|
-
],
|
|
206
|
-
"exports": [
|
|
207
|
-
{
|
|
208
|
-
"kind": "js",
|
|
209
|
-
"name": "default",
|
|
210
|
-
"declaration": {
|
|
211
|
-
"name": "Animation",
|
|
212
|
-
"module": "components/animation/animation.component.js"
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
]
|
|
216
|
-
},
|
|
217
|
-
{
|
|
218
|
-
"kind": "javascript-module",
|
|
219
|
-
"path": "components/appheader/appheader.component.js",
|
|
220
|
-
"declarations": [
|
|
221
|
-
{
|
|
222
|
-
"kind": "class",
|
|
223
|
-
"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**.",
|
|
224
|
-
"name": "Appheader",
|
|
225
|
-
"cssParts": [
|
|
226
|
-
{
|
|
227
|
-
"description": "The main container for styling the header.",
|
|
228
|
-
"name": "container"
|
|
229
|
-
},
|
|
230
|
-
{
|
|
231
|
-
"description": "The leading section of the header.",
|
|
232
|
-
"name": "leading-section"
|
|
233
|
-
},
|
|
234
|
-
{
|
|
235
|
-
"description": "The center section of the header.",
|
|
236
|
-
"name": "center-section"
|
|
237
|
-
},
|
|
238
|
-
{
|
|
239
|
-
"description": "The trailing section of the header.",
|
|
240
|
-
"name": "trailing-section"
|
|
241
|
-
}
|
|
242
|
-
],
|
|
243
|
-
"slots": [
|
|
244
|
-
{
|
|
245
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
246
|
-
"name": "leading"
|
|
247
|
-
},
|
|
248
|
-
{
|
|
249
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
250
|
-
"name": "center"
|
|
251
|
-
},
|
|
252
|
-
{
|
|
253
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
254
|
-
"name": "trailing"
|
|
255
|
-
}
|
|
256
|
-
],
|
|
257
|
-
"members": [],
|
|
258
|
-
"superclass": {
|
|
259
|
-
"name": "Component",
|
|
260
|
-
"module": "/src/models"
|
|
261
|
-
},
|
|
262
|
-
"tagName": "mdc-appheader",
|
|
263
|
-
"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 */",
|
|
264
|
-
"customElement": true
|
|
265
|
-
}
|
|
266
|
-
],
|
|
267
|
-
"exports": [
|
|
268
|
-
{
|
|
269
|
-
"kind": "js",
|
|
270
|
-
"name": "default",
|
|
271
|
-
"declaration": {
|
|
272
|
-
"name": "Appheader",
|
|
273
|
-
"module": "components/appheader/appheader.component.js"
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
]
|
|
277
|
-
},
|
|
278
|
-
{
|
|
279
|
-
"kind": "javascript-module",
|
|
280
|
-
"path": "components/alertchip/alertchip.component.js",
|
|
281
|
-
"declarations": [
|
|
282
|
-
{
|
|
283
|
-
"kind": "class",
|
|
284
|
-
"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.",
|
|
285
|
-
"name": "AlertChip",
|
|
286
|
-
"cssProperties": [
|
|
287
|
-
{
|
|
288
|
-
"description": "The color of the label text",
|
|
289
|
-
"name": "--mdc-chip-color"
|
|
274
|
+
"kind": "method",
|
|
275
|
+
"name": "triggerClickEvent",
|
|
276
|
+
"privacy": "private",
|
|
277
|
+
"inheritedFrom": {
|
|
278
|
+
"name": "Buttonsimple",
|
|
279
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
280
|
+
}
|
|
290
281
|
},
|
|
291
282
|
{
|
|
292
|
-
"
|
|
293
|
-
"name": "
|
|
283
|
+
"kind": "method",
|
|
284
|
+
"name": "handleBlur",
|
|
285
|
+
"privacy": "private",
|
|
286
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
287
|
+
"inheritedFrom": {
|
|
288
|
+
"name": "Buttonsimple",
|
|
289
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
290
|
+
}
|
|
294
291
|
},
|
|
295
292
|
{
|
|
296
|
-
"
|
|
297
|
-
"name": "
|
|
293
|
+
"kind": "method",
|
|
294
|
+
"name": "handleKeyDown",
|
|
295
|
+
"privacy": "private",
|
|
296
|
+
"parameters": [
|
|
297
|
+
{
|
|
298
|
+
"name": "event",
|
|
299
|
+
"type": {
|
|
300
|
+
"text": "KeyboardEvent"
|
|
301
|
+
},
|
|
302
|
+
"description": "The keyboard event."
|
|
303
|
+
}
|
|
304
|
+
],
|
|
305
|
+
"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.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
|
306
|
+
"inheritedFrom": {
|
|
307
|
+
"name": "Buttonsimple",
|
|
308
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
309
|
+
}
|
|
298
310
|
},
|
|
299
311
|
{
|
|
300
|
-
"
|
|
301
|
-
"name": "
|
|
312
|
+
"kind": "method",
|
|
313
|
+
"name": "handleKeyUp",
|
|
314
|
+
"privacy": "private",
|
|
315
|
+
"parameters": [
|
|
316
|
+
{
|
|
317
|
+
"name": "event",
|
|
318
|
+
"type": {
|
|
319
|
+
"text": "KeyboardEvent"
|
|
320
|
+
},
|
|
321
|
+
"description": "The keyboard event."
|
|
322
|
+
}
|
|
323
|
+
],
|
|
324
|
+
"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.",
|
|
325
|
+
"inheritedFrom": {
|
|
326
|
+
"name": "Buttonsimple",
|
|
327
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
328
|
+
}
|
|
302
329
|
}
|
|
303
330
|
],
|
|
304
|
-
"
|
|
331
|
+
"attributes": [
|
|
305
332
|
{
|
|
306
|
-
"kind": "field",
|
|
307
333
|
"name": "variant",
|
|
308
334
|
"type": {
|
|
309
335
|
"text": "VariantType"
|
|
310
336
|
},
|
|
311
337
|
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
312
338
|
"default": "neutral",
|
|
313
|
-
"
|
|
339
|
+
"fieldName": "variant"
|
|
314
340
|
},
|
|
315
341
|
{
|
|
316
|
-
"kind": "field",
|
|
317
342
|
"name": "label",
|
|
318
343
|
"type": {
|
|
319
344
|
"text": "string"
|
|
320
345
|
},
|
|
321
346
|
"default": "''",
|
|
322
347
|
"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.",
|
|
323
|
-
"
|
|
348
|
+
"fieldName": "label"
|
|
324
349
|
},
|
|
325
350
|
{
|
|
326
|
-
"kind": "field",
|
|
327
351
|
"name": "autofocus",
|
|
328
352
|
"type": {
|
|
329
353
|
"text": "boolean"
|
|
330
354
|
},
|
|
331
355
|
"default": "false",
|
|
332
356
|
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
333
|
-
"
|
|
334
|
-
"reflects": true,
|
|
357
|
+
"fieldName": "autofocus",
|
|
335
358
|
"inheritedFrom": {
|
|
336
359
|
"name": "AutoFocusMixin",
|
|
337
|
-
"module": "utils/mixins/AutoFocusMixin.
|
|
360
|
+
"module": "src/utils/mixins/AutoFocusMixin.ts"
|
|
338
361
|
}
|
|
339
362
|
},
|
|
340
363
|
{
|
|
341
|
-
"kind": "field",
|
|
342
364
|
"name": "tabIndex",
|
|
343
365
|
"type": {
|
|
344
366
|
"text": "number"
|
|
345
367
|
},
|
|
346
368
|
"default": "0",
|
|
347
369
|
"description": "This property specifies the tab order of the element.",
|
|
348
|
-
"
|
|
349
|
-
"reflects": true,
|
|
370
|
+
"fieldName": "tabIndex",
|
|
350
371
|
"inheritedFrom": {
|
|
351
372
|
"name": "TabIndexMixin",
|
|
352
|
-
"module": "utils/mixins/TabIndexMixin.
|
|
373
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
353
374
|
}
|
|
354
375
|
},
|
|
355
376
|
{
|
|
356
|
-
"kind": "field",
|
|
357
377
|
"name": "disabled",
|
|
358
378
|
"type": {
|
|
359
379
|
"text": "boolean | undefined"
|
|
360
380
|
},
|
|
361
381
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
362
382
|
"default": "undefined",
|
|
363
|
-
"
|
|
364
|
-
"reflects": true,
|
|
383
|
+
"fieldName": "disabled",
|
|
365
384
|
"inheritedFrom": {
|
|
366
385
|
"name": "DisabledMixin",
|
|
367
|
-
"module": "utils/mixins/DisabledMixin.
|
|
386
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
368
387
|
}
|
|
369
388
|
},
|
|
370
389
|
{
|
|
371
|
-
"kind": "field",
|
|
372
390
|
"name": "active",
|
|
373
391
|
"type": {
|
|
374
392
|
"text": "boolean | undefined"
|
|
375
393
|
},
|
|
376
394
|
"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.",
|
|
377
395
|
"default": "undefined",
|
|
378
|
-
"
|
|
379
|
-
"reflects": true,
|
|
396
|
+
"fieldName": "active",
|
|
380
397
|
"inheritedFrom": {
|
|
381
398
|
"name": "Buttonsimple",
|
|
382
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
399
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
383
400
|
}
|
|
384
401
|
},
|
|
385
402
|
{
|
|
386
|
-
"
|
|
387
|
-
"name": "softDisabled",
|
|
403
|
+
"name": "soft-disabled",
|
|
388
404
|
"type": {
|
|
389
405
|
"text": "boolean | undefined"
|
|
390
406
|
},
|
|
391
407
|
"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.",
|
|
392
408
|
"default": "undefined",
|
|
393
|
-
"
|
|
394
|
-
"reflects": true,
|
|
409
|
+
"fieldName": "softDisabled",
|
|
395
410
|
"inheritedFrom": {
|
|
396
411
|
"name": "Buttonsimple",
|
|
397
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
412
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
398
413
|
}
|
|
399
414
|
},
|
|
400
415
|
{
|
|
401
|
-
"kind": "field",
|
|
402
416
|
"name": "size",
|
|
403
417
|
"type": {
|
|
404
418
|
"text": "ButtonSize"
|
|
405
419
|
},
|
|
406
420
|
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
407
421
|
"default": "32",
|
|
408
|
-
"
|
|
409
|
-
"reflects": true,
|
|
422
|
+
"fieldName": "size",
|
|
410
423
|
"inheritedFrom": {
|
|
411
424
|
"name": "Buttonsimple",
|
|
412
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
425
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
413
426
|
}
|
|
414
427
|
},
|
|
415
428
|
{
|
|
416
|
-
"kind": "field",
|
|
417
429
|
"name": "role",
|
|
418
430
|
"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.",
|
|
419
431
|
"default": "button",
|
|
420
|
-
"
|
|
421
|
-
"reflects": true,
|
|
432
|
+
"fieldName": "role",
|
|
422
433
|
"inheritedFrom": {
|
|
423
434
|
"name": "Buttonsimple",
|
|
424
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
435
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
425
436
|
}
|
|
426
437
|
},
|
|
427
438
|
{
|
|
428
|
-
"kind": "field",
|
|
429
439
|
"name": "ariaStateKey",
|
|
430
440
|
"type": {
|
|
431
441
|
"text": "string | undefined"
|
|
432
442
|
},
|
|
433
443
|
"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`",
|
|
434
444
|
"default": "'aria-pressed' (when)",
|
|
435
|
-
"
|
|
436
|
-
"reflects": true,
|
|
445
|
+
"fieldName": "ariaStateKey",
|
|
437
446
|
"inheritedFrom": {
|
|
438
447
|
"name": "Buttonsimple",
|
|
439
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
448
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
440
449
|
}
|
|
441
450
|
},
|
|
442
451
|
{
|
|
443
|
-
"kind": "field",
|
|
444
452
|
"name": "type",
|
|
445
453
|
"type": {
|
|
446
454
|
"text": "ButtonType"
|
|
447
455
|
},
|
|
448
456
|
"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.",
|
|
449
457
|
"default": "button",
|
|
450
|
-
"
|
|
451
|
-
"reflects": true,
|
|
458
|
+
"fieldName": "type",
|
|
452
459
|
"inheritedFrom": {
|
|
453
460
|
"name": "Buttonsimple",
|
|
454
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
461
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
455
462
|
}
|
|
456
|
-
}
|
|
463
|
+
}
|
|
464
|
+
],
|
|
465
|
+
"superclass": {
|
|
466
|
+
"name": "Buttonsimple",
|
|
467
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
468
|
+
},
|
|
469
|
+
"tagName": "mdc-alertchip",
|
|
470
|
+
"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 */",
|
|
471
|
+
"customElement": true,
|
|
472
|
+
"events": [
|
|
457
473
|
{
|
|
458
|
-
"
|
|
459
|
-
"name": "
|
|
460
|
-
"
|
|
474
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
475
|
+
"name": "click",
|
|
476
|
+
"reactName": "onClick",
|
|
461
477
|
"inheritedFrom": {
|
|
462
478
|
"name": "Buttonsimple",
|
|
463
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
479
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
464
480
|
}
|
|
465
481
|
},
|
|
466
482
|
{
|
|
467
|
-
"
|
|
468
|
-
"name": "
|
|
469
|
-
"
|
|
470
|
-
"parameters": [
|
|
471
|
-
{
|
|
472
|
-
"name": "element",
|
|
473
|
-
"type": {
|
|
474
|
-
"text": "HTMLElement"
|
|
475
|
-
},
|
|
476
|
-
"description": "The button element"
|
|
477
|
-
},
|
|
478
|
-
{
|
|
479
|
-
"name": "active",
|
|
480
|
-
"optional": true,
|
|
481
|
-
"type": {
|
|
482
|
-
"text": "boolean"
|
|
483
|
-
},
|
|
484
|
-
"description": "The active state of the element"
|
|
485
|
-
}
|
|
486
|
-
],
|
|
487
|
-
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
483
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
484
|
+
"name": "keydown",
|
|
485
|
+
"reactName": "onKeyDown",
|
|
488
486
|
"inheritedFrom": {
|
|
489
487
|
"name": "Buttonsimple",
|
|
490
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
488
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
491
489
|
}
|
|
492
490
|
},
|
|
493
491
|
{
|
|
494
|
-
"
|
|
495
|
-
"name": "
|
|
496
|
-
"
|
|
497
|
-
"parameters": [
|
|
498
|
-
{
|
|
499
|
-
"name": "element",
|
|
500
|
-
"type": {
|
|
501
|
-
"text": "HTMLElement"
|
|
502
|
-
},
|
|
503
|
-
"description": "The button element."
|
|
504
|
-
},
|
|
505
|
-
{
|
|
506
|
-
"name": "softDisabled",
|
|
507
|
-
"optional": true,
|
|
508
|
-
"type": {
|
|
509
|
-
"text": "boolean"
|
|
510
|
-
},
|
|
511
|
-
"description": "The soft-disabled state."
|
|
512
|
-
}
|
|
513
|
-
],
|
|
514
|
-
"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.",
|
|
492
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
493
|
+
"name": "keyup",
|
|
494
|
+
"reactName": "onKeyUp",
|
|
515
495
|
"inheritedFrom": {
|
|
516
496
|
"name": "Buttonsimple",
|
|
517
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
497
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
518
498
|
}
|
|
519
499
|
},
|
|
520
500
|
{
|
|
521
|
-
"
|
|
522
|
-
"name": "
|
|
523
|
-
"
|
|
524
|
-
"parameters": [
|
|
525
|
-
{
|
|
526
|
-
"name": "element",
|
|
527
|
-
"type": {
|
|
528
|
-
"text": "HTMLElement"
|
|
529
|
-
},
|
|
530
|
-
"description": "The button element."
|
|
531
|
-
},
|
|
532
|
-
{
|
|
533
|
-
"name": "disabled",
|
|
534
|
-
"type": {
|
|
535
|
-
"text": "boolean"
|
|
536
|
-
},
|
|
537
|
-
"description": "The disabled state."
|
|
538
|
-
}
|
|
539
|
-
],
|
|
540
|
-
"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.",
|
|
501
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
502
|
+
"name": "focus",
|
|
503
|
+
"reactName": "onFocus",
|
|
541
504
|
"inheritedFrom": {
|
|
542
505
|
"name": "Buttonsimple",
|
|
543
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
506
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
544
507
|
}
|
|
508
|
+
}
|
|
509
|
+
]
|
|
510
|
+
}
|
|
511
|
+
],
|
|
512
|
+
"exports": [
|
|
513
|
+
{
|
|
514
|
+
"kind": "js",
|
|
515
|
+
"name": "default",
|
|
516
|
+
"declaration": {
|
|
517
|
+
"name": "AlertChip",
|
|
518
|
+
"module": "components/alertchip/alertchip.component.js"
|
|
519
|
+
}
|
|
520
|
+
}
|
|
521
|
+
]
|
|
522
|
+
},
|
|
523
|
+
{
|
|
524
|
+
"kind": "javascript-module",
|
|
525
|
+
"path": "components/animation/animation.component.js",
|
|
526
|
+
"declarations": [
|
|
527
|
+
{
|
|
528
|
+
"kind": "class",
|
|
529
|
+
"description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
|
|
530
|
+
"name": "Animation",
|
|
531
|
+
"members": [
|
|
532
|
+
{
|
|
533
|
+
"kind": "field",
|
|
534
|
+
"name": "name",
|
|
535
|
+
"type": {
|
|
536
|
+
"text": "AnimationNames | undefined"
|
|
537
|
+
},
|
|
538
|
+
"description": "Name of the animation (= filename)",
|
|
539
|
+
"attribute": "name",
|
|
540
|
+
"reflects": true
|
|
545
541
|
},
|
|
546
542
|
{
|
|
547
|
-
"kind": "
|
|
548
|
-
"name": "
|
|
543
|
+
"kind": "field",
|
|
544
|
+
"name": "loop",
|
|
545
|
+
"type": {
|
|
546
|
+
"text": "LoopType | undefined"
|
|
547
|
+
},
|
|
548
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
549
|
+
"attribute": "loop",
|
|
550
|
+
"reflects": true
|
|
551
|
+
},
|
|
552
|
+
{
|
|
553
|
+
"kind": "field",
|
|
554
|
+
"name": "autoplay",
|
|
555
|
+
"type": {
|
|
556
|
+
"text": "boolean | undefined"
|
|
557
|
+
},
|
|
558
|
+
"description": "Weather start the animation automatically",
|
|
559
|
+
"attribute": "autoplay",
|
|
560
|
+
"reflects": true
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
"kind": "field",
|
|
564
|
+
"name": "ariaLabel",
|
|
565
|
+
"type": {
|
|
566
|
+
"text": "string | null"
|
|
567
|
+
},
|
|
568
|
+
"default": "null",
|
|
569
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
570
|
+
"attribute": "aria-label"
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"kind": "field",
|
|
574
|
+
"name": "ariaLabelledBy",
|
|
575
|
+
"type": {
|
|
576
|
+
"text": "string | null"
|
|
577
|
+
},
|
|
578
|
+
"default": "null",
|
|
579
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
580
|
+
"attribute": "aria-labelledby"
|
|
581
|
+
},
|
|
582
|
+
{
|
|
583
|
+
"kind": "field",
|
|
584
|
+
"name": "lottieInstance",
|
|
585
|
+
"type": {
|
|
586
|
+
"text": "AnimationItem | undefined"
|
|
587
|
+
},
|
|
549
588
|
"privacy": "private",
|
|
550
|
-
"
|
|
551
|
-
"name": "Buttonsimple",
|
|
552
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
553
|
-
}
|
|
589
|
+
"description": "Lottie animation instance"
|
|
554
590
|
},
|
|
555
591
|
{
|
|
556
|
-
"kind": "
|
|
557
|
-
"name": "
|
|
592
|
+
"kind": "field",
|
|
593
|
+
"name": "containerRef",
|
|
594
|
+
"type": {
|
|
595
|
+
"text": "Ref<HTMLDivElement>"
|
|
596
|
+
},
|
|
558
597
|
"privacy": "private",
|
|
559
|
-
"description": "
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
598
|
+
"description": "Container for the animation"
|
|
599
|
+
},
|
|
600
|
+
{
|
|
601
|
+
"kind": "field",
|
|
602
|
+
"name": "animation",
|
|
603
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
604
|
+
"readonly": true
|
|
564
605
|
},
|
|
565
606
|
{
|
|
566
607
|
"kind": "method",
|
|
567
|
-
"name": "
|
|
608
|
+
"name": "getLoopValue",
|
|
609
|
+
"privacy": "private"
|
|
610
|
+
},
|
|
611
|
+
{
|
|
612
|
+
"kind": "method",
|
|
613
|
+
"name": "onLoadSuccessHandler",
|
|
568
614
|
"privacy": "private",
|
|
569
615
|
"parameters": [
|
|
570
616
|
{
|
|
571
|
-
"name": "
|
|
617
|
+
"name": "animationData",
|
|
572
618
|
"type": {
|
|
573
|
-
"text": "
|
|
574
|
-
}
|
|
575
|
-
"description": "The keyboard event."
|
|
619
|
+
"text": "any"
|
|
620
|
+
}
|
|
576
621
|
}
|
|
577
622
|
],
|
|
578
|
-
"description": "
|
|
579
|
-
"inheritedFrom": {
|
|
580
|
-
"name": "Buttonsimple",
|
|
581
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
582
|
-
}
|
|
623
|
+
"description": "Create new lotty instance for the loaded data"
|
|
583
624
|
},
|
|
584
625
|
{
|
|
585
626
|
"kind": "method",
|
|
586
|
-
"name": "
|
|
627
|
+
"name": "onLoadFailHandler",
|
|
587
628
|
"privacy": "private",
|
|
588
629
|
"parameters": [
|
|
589
630
|
{
|
|
590
|
-
"name": "
|
|
631
|
+
"name": "error",
|
|
591
632
|
"type": {
|
|
592
|
-
"text": "
|
|
593
|
-
}
|
|
594
|
-
"description": "The keyboard event."
|
|
633
|
+
"text": "Error"
|
|
634
|
+
}
|
|
595
635
|
}
|
|
596
636
|
],
|
|
597
|
-
"description": "
|
|
598
|
-
"inheritedFrom": {
|
|
599
|
-
"name": "Buttonsimple",
|
|
600
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
601
|
-
}
|
|
602
|
-
}
|
|
603
|
-
],
|
|
604
|
-
"attributes": [
|
|
605
|
-
{
|
|
606
|
-
"name": "variant",
|
|
607
|
-
"type": {
|
|
608
|
-
"text": "VariantType"
|
|
609
|
-
},
|
|
610
|
-
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
611
|
-
"default": "neutral",
|
|
612
|
-
"fieldName": "variant"
|
|
613
|
-
},
|
|
614
|
-
{
|
|
615
|
-
"name": "label",
|
|
616
|
-
"type": {
|
|
617
|
-
"text": "string"
|
|
618
|
-
},
|
|
619
|
-
"default": "''",
|
|
620
|
-
"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.",
|
|
621
|
-
"fieldName": "label"
|
|
637
|
+
"description": "Error handler for animation loading"
|
|
622
638
|
},
|
|
623
639
|
{
|
|
624
|
-
"
|
|
625
|
-
"
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
"default": "false",
|
|
629
|
-
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
630
|
-
"fieldName": "autofocus",
|
|
631
|
-
"inheritedFrom": {
|
|
632
|
-
"name": "AutoFocusMixin",
|
|
633
|
-
"module": "src/utils/mixins/AutoFocusMixin.ts"
|
|
634
|
-
}
|
|
640
|
+
"kind": "method",
|
|
641
|
+
"name": "getAnimationData",
|
|
642
|
+
"privacy": "private",
|
|
643
|
+
"description": "Import animation data dynamically"
|
|
635
644
|
},
|
|
636
645
|
{
|
|
637
|
-
"
|
|
638
|
-
"
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
"fieldName": "tabIndex",
|
|
644
|
-
"inheritedFrom": {
|
|
645
|
-
"name": "TabIndexMixin",
|
|
646
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
647
|
-
}
|
|
648
|
-
},
|
|
646
|
+
"kind": "field",
|
|
647
|
+
"name": "onCompleteHandler",
|
|
648
|
+
"description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
|
|
649
|
+
}
|
|
650
|
+
],
|
|
651
|
+
"events": [
|
|
649
652
|
{
|
|
650
|
-
"name": "
|
|
653
|
+
"name": "load",
|
|
651
654
|
"type": {
|
|
652
|
-
"text": "
|
|
655
|
+
"text": "CustomEvent"
|
|
653
656
|
},
|
|
654
|
-
"description": "
|
|
655
|
-
"
|
|
656
|
-
"fieldName": "disabled",
|
|
657
|
-
"inheritedFrom": {
|
|
658
|
-
"name": "DisabledMixin",
|
|
659
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
660
|
-
}
|
|
657
|
+
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
658
|
+
"reactName": "onLoad"
|
|
661
659
|
},
|
|
662
660
|
{
|
|
663
|
-
"
|
|
664
|
-
"
|
|
665
|
-
|
|
666
|
-
},
|
|
667
|
-
"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.",
|
|
668
|
-
"default": "undefined",
|
|
669
|
-
"fieldName": "active",
|
|
670
|
-
"inheritedFrom": {
|
|
671
|
-
"name": "Buttonsimple",
|
|
672
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
673
|
-
}
|
|
661
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
662
|
+
"name": "complete",
|
|
663
|
+
"reactName": "onComplete"
|
|
674
664
|
},
|
|
675
665
|
{
|
|
676
|
-
"
|
|
666
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
667
|
+
"name": "error",
|
|
668
|
+
"reactName": "onError"
|
|
669
|
+
}
|
|
670
|
+
],
|
|
671
|
+
"attributes": [
|
|
672
|
+
{
|
|
673
|
+
"name": "name",
|
|
677
674
|
"type": {
|
|
678
|
-
"text": "
|
|
675
|
+
"text": "AnimationNames | undefined"
|
|
679
676
|
},
|
|
680
|
-
"description": "
|
|
681
|
-
"
|
|
682
|
-
"fieldName": "softDisabled",
|
|
683
|
-
"inheritedFrom": {
|
|
684
|
-
"name": "Buttonsimple",
|
|
685
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
686
|
-
}
|
|
677
|
+
"description": "Name of the animation (= filename)",
|
|
678
|
+
"fieldName": "name"
|
|
687
679
|
},
|
|
688
680
|
{
|
|
689
|
-
"name": "
|
|
681
|
+
"name": "loop",
|
|
690
682
|
"type": {
|
|
691
|
-
"text": "
|
|
683
|
+
"text": "LoopType | undefined"
|
|
692
684
|
},
|
|
693
|
-
"description": "
|
|
694
|
-
"
|
|
695
|
-
"fieldName": "size",
|
|
696
|
-
"inheritedFrom": {
|
|
697
|
-
"name": "Buttonsimple",
|
|
698
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
699
|
-
}
|
|
685
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
686
|
+
"fieldName": "loop"
|
|
700
687
|
},
|
|
701
688
|
{
|
|
702
|
-
"name": "
|
|
703
|
-
"
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
"
|
|
707
|
-
|
|
708
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
709
|
-
}
|
|
689
|
+
"name": "autoplay",
|
|
690
|
+
"type": {
|
|
691
|
+
"text": "boolean | undefined"
|
|
692
|
+
},
|
|
693
|
+
"description": "Weather start the animation automatically",
|
|
694
|
+
"fieldName": "autoplay"
|
|
710
695
|
},
|
|
711
696
|
{
|
|
712
|
-
"name": "
|
|
697
|
+
"name": "aria-label",
|
|
713
698
|
"type": {
|
|
714
|
-
"text": "string |
|
|
699
|
+
"text": "string | null"
|
|
715
700
|
},
|
|
716
|
-
"
|
|
717
|
-
"
|
|
718
|
-
"fieldName": "
|
|
719
|
-
"inheritedFrom": {
|
|
720
|
-
"name": "Buttonsimple",
|
|
721
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
722
|
-
}
|
|
701
|
+
"default": "null",
|
|
702
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
703
|
+
"fieldName": "ariaLabel"
|
|
723
704
|
},
|
|
724
705
|
{
|
|
725
|
-
"name": "
|
|
706
|
+
"name": "aria-labelledby",
|
|
726
707
|
"type": {
|
|
727
|
-
"text": "
|
|
708
|
+
"text": "string | null"
|
|
728
709
|
},
|
|
729
|
-
"
|
|
730
|
-
"
|
|
731
|
-
"fieldName": "
|
|
732
|
-
"inheritedFrom": {
|
|
733
|
-
"name": "Buttonsimple",
|
|
734
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
735
|
-
}
|
|
710
|
+
"default": "null",
|
|
711
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
712
|
+
"fieldName": "ariaLabelledBy"
|
|
736
713
|
}
|
|
737
714
|
],
|
|
738
715
|
"superclass": {
|
|
739
|
-
"name": "
|
|
740
|
-
"module": "/src/
|
|
716
|
+
"name": "Component",
|
|
717
|
+
"module": "/src/models"
|
|
741
718
|
},
|
|
742
|
-
"tagName": "mdc-
|
|
743
|
-
"jsDoc": "/**\n * mdc-
|
|
744
|
-
"customElement": true
|
|
745
|
-
|
|
719
|
+
"tagName": "mdc-animation",
|
|
720
|
+
"jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
|
|
721
|
+
"customElement": true
|
|
722
|
+
}
|
|
723
|
+
],
|
|
724
|
+
"exports": [
|
|
725
|
+
{
|
|
726
|
+
"kind": "js",
|
|
727
|
+
"name": "default",
|
|
728
|
+
"declaration": {
|
|
729
|
+
"name": "Animation",
|
|
730
|
+
"module": "components/animation/animation.component.js"
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
]
|
|
734
|
+
},
|
|
735
|
+
{
|
|
736
|
+
"kind": "javascript-module",
|
|
737
|
+
"path": "components/appheader/appheader.component.js",
|
|
738
|
+
"declarations": [
|
|
739
|
+
{
|
|
740
|
+
"kind": "class",
|
|
741
|
+
"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**.",
|
|
742
|
+
"name": "Appheader",
|
|
743
|
+
"cssParts": [
|
|
746
744
|
{
|
|
747
|
-
"description": "
|
|
748
|
-
"name": "
|
|
749
|
-
"reactName": "onClick",
|
|
750
|
-
"inheritedFrom": {
|
|
751
|
-
"name": "Buttonsimple",
|
|
752
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
753
|
-
}
|
|
745
|
+
"description": "The main container for styling the header.",
|
|
746
|
+
"name": "container"
|
|
754
747
|
},
|
|
755
748
|
{
|
|
756
|
-
"description": "
|
|
757
|
-
"name": "
|
|
758
|
-
"reactName": "onKeyDown",
|
|
759
|
-
"inheritedFrom": {
|
|
760
|
-
"name": "Buttonsimple",
|
|
761
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
762
|
-
}
|
|
749
|
+
"description": "The leading section of the header.",
|
|
750
|
+
"name": "leading-section"
|
|
763
751
|
},
|
|
764
752
|
{
|
|
765
|
-
"description": "
|
|
766
|
-
"name": "
|
|
767
|
-
"reactName": "onKeyUp",
|
|
768
|
-
"inheritedFrom": {
|
|
769
|
-
"name": "Buttonsimple",
|
|
770
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
771
|
-
}
|
|
753
|
+
"description": "The center section of the header.",
|
|
754
|
+
"name": "center-section"
|
|
772
755
|
},
|
|
773
756
|
{
|
|
774
|
-
"description": "
|
|
775
|
-
"name": "
|
|
776
|
-
"reactName": "onFocus",
|
|
777
|
-
"inheritedFrom": {
|
|
778
|
-
"name": "Buttonsimple",
|
|
779
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
780
|
-
}
|
|
757
|
+
"description": "The trailing section of the header.",
|
|
758
|
+
"name": "trailing-section"
|
|
781
759
|
}
|
|
782
|
-
]
|
|
760
|
+
],
|
|
761
|
+
"slots": [
|
|
762
|
+
{
|
|
763
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
764
|
+
"name": "leading"
|
|
765
|
+
},
|
|
766
|
+
{
|
|
767
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
768
|
+
"name": "center"
|
|
769
|
+
},
|
|
770
|
+
{
|
|
771
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
772
|
+
"name": "trailing"
|
|
773
|
+
}
|
|
774
|
+
],
|
|
775
|
+
"members": [],
|
|
776
|
+
"superclass": {
|
|
777
|
+
"name": "Component",
|
|
778
|
+
"module": "/src/models"
|
|
779
|
+
},
|
|
780
|
+
"tagName": "mdc-appheader",
|
|
781
|
+
"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 */",
|
|
782
|
+
"customElement": true
|
|
783
783
|
}
|
|
784
784
|
],
|
|
785
785
|
"exports": [
|
|
@@ -787,8 +787,8 @@
|
|
|
787
787
|
"kind": "js",
|
|
788
788
|
"name": "default",
|
|
789
789
|
"declaration": {
|
|
790
|
-
"name": "
|
|
791
|
-
"module": "components/
|
|
790
|
+
"name": "Appheader",
|
|
791
|
+
"module": "components/appheader/appheader.component.js"
|
|
792
792
|
}
|
|
793
793
|
}
|
|
794
794
|
]
|
|
@@ -2104,20 +2104,91 @@
|
|
|
2104
2104
|
],
|
|
2105
2105
|
"attributes": [
|
|
2106
2106
|
{
|
|
2107
|
-
"name": "name",
|
|
2107
|
+
"name": "name",
|
|
2108
|
+
"type": {
|
|
2109
|
+
"text": "BrandVisualNames | undefined"
|
|
2110
|
+
},
|
|
2111
|
+
"description": "Name of the brandVisual (= filename)",
|
|
2112
|
+
"fieldName": "name"
|
|
2113
|
+
}
|
|
2114
|
+
],
|
|
2115
|
+
"superclass": {
|
|
2116
|
+
"name": "Component",
|
|
2117
|
+
"module": "/src/models"
|
|
2118
|
+
},
|
|
2119
|
+
"tagName": "mdc-brandvisual",
|
|
2120
|
+
"jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
|
|
2121
|
+
"customElement": true
|
|
2122
|
+
}
|
|
2123
|
+
],
|
|
2124
|
+
"exports": [
|
|
2125
|
+
{
|
|
2126
|
+
"kind": "js",
|
|
2127
|
+
"name": "default",
|
|
2128
|
+
"declaration": {
|
|
2129
|
+
"name": "Brandvisual",
|
|
2130
|
+
"module": "components/brandvisual/brandvisual.component.js"
|
|
2131
|
+
}
|
|
2132
|
+
}
|
|
2133
|
+
]
|
|
2134
|
+
},
|
|
2135
|
+
{
|
|
2136
|
+
"kind": "javascript-module",
|
|
2137
|
+
"path": "components/bullet/bullet.component.js",
|
|
2138
|
+
"declarations": [
|
|
2139
|
+
{
|
|
2140
|
+
"kind": "class",
|
|
2141
|
+
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
2142
|
+
"name": "Bullet",
|
|
2143
|
+
"cssProperties": [
|
|
2144
|
+
{
|
|
2145
|
+
"description": "background color of the bullet",
|
|
2146
|
+
"name": "--mdc-bullet-background-color"
|
|
2147
|
+
},
|
|
2148
|
+
{
|
|
2149
|
+
"description": "small size value of the bullet",
|
|
2150
|
+
"name": "--mdc-bullet-size-small"
|
|
2151
|
+
},
|
|
2152
|
+
{
|
|
2153
|
+
"description": "medium size value of the bullet",
|
|
2154
|
+
"name": "--mdc-bullet-size-medium"
|
|
2155
|
+
},
|
|
2156
|
+
{
|
|
2157
|
+
"description": "large size value of the bullet",
|
|
2158
|
+
"name": "--mdc-bullet-size-large"
|
|
2159
|
+
}
|
|
2160
|
+
],
|
|
2161
|
+
"members": [
|
|
2162
|
+
{
|
|
2163
|
+
"kind": "field",
|
|
2164
|
+
"name": "size",
|
|
2165
|
+
"type": {
|
|
2166
|
+
"text": "Size"
|
|
2167
|
+
},
|
|
2168
|
+
"privacy": "public",
|
|
2169
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
2170
|
+
"default": "small",
|
|
2171
|
+
"attribute": "size",
|
|
2172
|
+
"reflects": true
|
|
2173
|
+
}
|
|
2174
|
+
],
|
|
2175
|
+
"attributes": [
|
|
2176
|
+
{
|
|
2177
|
+
"name": "size",
|
|
2108
2178
|
"type": {
|
|
2109
|
-
"text": "
|
|
2179
|
+
"text": "Size"
|
|
2110
2180
|
},
|
|
2111
|
-
"description": "
|
|
2112
|
-
"
|
|
2181
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
2182
|
+
"default": "small",
|
|
2183
|
+
"fieldName": "size"
|
|
2113
2184
|
}
|
|
2114
2185
|
],
|
|
2115
2186
|
"superclass": {
|
|
2116
2187
|
"name": "Component",
|
|
2117
2188
|
"module": "/src/models"
|
|
2118
2189
|
},
|
|
2119
|
-
"tagName": "mdc-
|
|
2120
|
-
"jsDoc": "/**\n *
|
|
2190
|
+
"tagName": "mdc-bullet",
|
|
2191
|
+
"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*/",
|
|
2121
2192
|
"customElement": true
|
|
2122
2193
|
}
|
|
2123
2194
|
],
|
|
@@ -2126,69 +2197,130 @@
|
|
|
2126
2197
|
"kind": "js",
|
|
2127
2198
|
"name": "default",
|
|
2128
2199
|
"declaration": {
|
|
2129
|
-
"name": "
|
|
2130
|
-
"module": "components/
|
|
2200
|
+
"name": "Bullet",
|
|
2201
|
+
"module": "components/bullet/bullet.component.js"
|
|
2131
2202
|
}
|
|
2132
2203
|
}
|
|
2133
2204
|
]
|
|
2134
2205
|
},
|
|
2135
2206
|
{
|
|
2136
2207
|
"kind": "javascript-module",
|
|
2137
|
-
"path": "components/
|
|
2208
|
+
"path": "components/buttongroup/buttongroup.component.js",
|
|
2138
2209
|
"declarations": [
|
|
2139
2210
|
{
|
|
2140
2211
|
"kind": "class",
|
|
2141
|
-
"description": "
|
|
2142
|
-
"name": "
|
|
2212
|
+
"description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
|
|
2213
|
+
"name": "ButtonGroup",
|
|
2143
2214
|
"cssProperties": [
|
|
2144
2215
|
{
|
|
2145
|
-
"description": "
|
|
2146
|
-
"name": "--mdc-
|
|
2216
|
+
"description": "The border radius of the buttongroup",
|
|
2217
|
+
"name": "--mdc-buttongroup-border-radius"
|
|
2147
2218
|
},
|
|
2148
2219
|
{
|
|
2149
|
-
"description": "
|
|
2150
|
-
"name": "--mdc-
|
|
2220
|
+
"description": "The border color of the buttongroup",
|
|
2221
|
+
"name": "--mdc-buttongroup-border-color"
|
|
2151
2222
|
},
|
|
2152
2223
|
{
|
|
2153
|
-
"description": "
|
|
2154
|
-
"name": "--mdc-
|
|
2155
|
-
}
|
|
2224
|
+
"description": "The color of the divider between buttons within the buttongroup",
|
|
2225
|
+
"name": "--mdc-buttongroup-divider-color"
|
|
2226
|
+
}
|
|
2227
|
+
],
|
|
2228
|
+
"slots": [
|
|
2156
2229
|
{
|
|
2157
|
-
"description": "
|
|
2158
|
-
"name": "
|
|
2230
|
+
"description": "This is a default/unnamed slot, which contains the buttons",
|
|
2231
|
+
"name": "default"
|
|
2159
2232
|
}
|
|
2160
2233
|
],
|
|
2161
2234
|
"members": [
|
|
2235
|
+
{
|
|
2236
|
+
"kind": "field",
|
|
2237
|
+
"name": "orientation",
|
|
2238
|
+
"type": {
|
|
2239
|
+
"text": "ButtonGroupOrientation"
|
|
2240
|
+
},
|
|
2241
|
+
"description": "Orientation of the buttongroup.",
|
|
2242
|
+
"default": "'horizontal'",
|
|
2243
|
+
"attribute": "orientation",
|
|
2244
|
+
"reflects": true
|
|
2245
|
+
},
|
|
2246
|
+
{
|
|
2247
|
+
"kind": "field",
|
|
2248
|
+
"name": "variant",
|
|
2249
|
+
"type": {
|
|
2250
|
+
"text": "ButtonGroupVariant"
|
|
2251
|
+
},
|
|
2252
|
+
"description": "Variant of the buttons within the buttongroup.",
|
|
2253
|
+
"default": "'primary'",
|
|
2254
|
+
"attribute": "variant",
|
|
2255
|
+
"reflects": true
|
|
2256
|
+
},
|
|
2162
2257
|
{
|
|
2163
2258
|
"kind": "field",
|
|
2164
2259
|
"name": "size",
|
|
2165
2260
|
"type": {
|
|
2166
|
-
"text": "
|
|
2261
|
+
"text": "ButtonGroupSize"
|
|
2167
2262
|
},
|
|
2168
|
-
"
|
|
2169
|
-
"
|
|
2170
|
-
"default": "small",
|
|
2263
|
+
"description": "Size of the buttons within the buttongroup.",
|
|
2264
|
+
"default": "'28'",
|
|
2171
2265
|
"attribute": "size",
|
|
2172
2266
|
"reflects": true
|
|
2267
|
+
},
|
|
2268
|
+
{
|
|
2269
|
+
"kind": "field",
|
|
2270
|
+
"name": "compact",
|
|
2271
|
+
"type": {
|
|
2272
|
+
"text": "boolean"
|
|
2273
|
+
},
|
|
2274
|
+
"default": "false",
|
|
2275
|
+
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
|
2276
|
+
"attribute": "compact",
|
|
2277
|
+
"reflects": true
|
|
2173
2278
|
}
|
|
2174
2279
|
],
|
|
2175
2280
|
"attributes": [
|
|
2281
|
+
{
|
|
2282
|
+
"name": "orientation",
|
|
2283
|
+
"type": {
|
|
2284
|
+
"text": "ButtonGroupOrientation"
|
|
2285
|
+
},
|
|
2286
|
+
"description": "Orientation of the buttongroup.",
|
|
2287
|
+
"default": "'horizontal'",
|
|
2288
|
+
"fieldName": "orientation"
|
|
2289
|
+
},
|
|
2290
|
+
{
|
|
2291
|
+
"name": "variant",
|
|
2292
|
+
"type": {
|
|
2293
|
+
"text": "ButtonGroupVariant"
|
|
2294
|
+
},
|
|
2295
|
+
"description": "Variant of the buttons within the buttongroup.",
|
|
2296
|
+
"default": "'primary'",
|
|
2297
|
+
"fieldName": "variant"
|
|
2298
|
+
},
|
|
2176
2299
|
{
|
|
2177
2300
|
"name": "size",
|
|
2178
2301
|
"type": {
|
|
2179
|
-
"text": "
|
|
2302
|
+
"text": "ButtonGroupSize"
|
|
2180
2303
|
},
|
|
2181
|
-
"description": "Size of the
|
|
2182
|
-
"default": "
|
|
2304
|
+
"description": "Size of the buttons within the buttongroup.",
|
|
2305
|
+
"default": "'28'",
|
|
2183
2306
|
"fieldName": "size"
|
|
2307
|
+
},
|
|
2308
|
+
{
|
|
2309
|
+
"name": "compact",
|
|
2310
|
+
"type": {
|
|
2311
|
+
"text": "boolean"
|
|
2312
|
+
},
|
|
2313
|
+
"default": "false",
|
|
2314
|
+
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
|
2315
|
+
"fieldName": "compact"
|
|
2184
2316
|
}
|
|
2185
2317
|
],
|
|
2186
2318
|
"superclass": {
|
|
2187
2319
|
"name": "Component",
|
|
2188
2320
|
"module": "/src/models"
|
|
2189
2321
|
},
|
|
2190
|
-
"tagName": "mdc-
|
|
2191
|
-
"jsDoc": "/**\n *
|
|
2322
|
+
"tagName": "mdc-buttongroup",
|
|
2323
|
+
"jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
|
|
2192
2324
|
"customElement": true
|
|
2193
2325
|
}
|
|
2194
2326
|
],
|
|
@@ -2197,8 +2329,8 @@
|
|
|
2197
2329
|
"kind": "js",
|
|
2198
2330
|
"name": "default",
|
|
2199
2331
|
"declaration": {
|
|
2200
|
-
"name": "
|
|
2201
|
-
"module": "components/
|
|
2332
|
+
"name": "ButtonGroup",
|
|
2333
|
+
"module": "components/buttongroup/buttongroup.component.js"
|
|
2202
2334
|
}
|
|
2203
2335
|
}
|
|
2204
2336
|
]
|
|
@@ -2898,138 +3030,6 @@
|
|
|
2898
3030
|
}
|
|
2899
3031
|
]
|
|
2900
3032
|
},
|
|
2901
|
-
{
|
|
2902
|
-
"kind": "javascript-module",
|
|
2903
|
-
"path": "components/buttongroup/buttongroup.component.js",
|
|
2904
|
-
"declarations": [
|
|
2905
|
-
{
|
|
2906
|
-
"kind": "class",
|
|
2907
|
-
"description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
|
|
2908
|
-
"name": "ButtonGroup",
|
|
2909
|
-
"cssProperties": [
|
|
2910
|
-
{
|
|
2911
|
-
"description": "The border radius of the buttongroup",
|
|
2912
|
-
"name": "--mdc-buttongroup-border-radius"
|
|
2913
|
-
},
|
|
2914
|
-
{
|
|
2915
|
-
"description": "The border color of the buttongroup",
|
|
2916
|
-
"name": "--mdc-buttongroup-border-color"
|
|
2917
|
-
},
|
|
2918
|
-
{
|
|
2919
|
-
"description": "The color of the divider between buttons within the buttongroup",
|
|
2920
|
-
"name": "--mdc-buttongroup-divider-color"
|
|
2921
|
-
}
|
|
2922
|
-
],
|
|
2923
|
-
"slots": [
|
|
2924
|
-
{
|
|
2925
|
-
"description": "This is a default/unnamed slot, which contains the buttons",
|
|
2926
|
-
"name": "default"
|
|
2927
|
-
}
|
|
2928
|
-
],
|
|
2929
|
-
"members": [
|
|
2930
|
-
{
|
|
2931
|
-
"kind": "field",
|
|
2932
|
-
"name": "orientation",
|
|
2933
|
-
"type": {
|
|
2934
|
-
"text": "ButtonGroupOrientation"
|
|
2935
|
-
},
|
|
2936
|
-
"description": "Orientation of the buttongroup.",
|
|
2937
|
-
"default": "'horizontal'",
|
|
2938
|
-
"attribute": "orientation",
|
|
2939
|
-
"reflects": true
|
|
2940
|
-
},
|
|
2941
|
-
{
|
|
2942
|
-
"kind": "field",
|
|
2943
|
-
"name": "variant",
|
|
2944
|
-
"type": {
|
|
2945
|
-
"text": "ButtonGroupVariant"
|
|
2946
|
-
},
|
|
2947
|
-
"description": "Variant of the buttons within the buttongroup.",
|
|
2948
|
-
"default": "'primary'",
|
|
2949
|
-
"attribute": "variant",
|
|
2950
|
-
"reflects": true
|
|
2951
|
-
},
|
|
2952
|
-
{
|
|
2953
|
-
"kind": "field",
|
|
2954
|
-
"name": "size",
|
|
2955
|
-
"type": {
|
|
2956
|
-
"text": "ButtonGroupSize"
|
|
2957
|
-
},
|
|
2958
|
-
"description": "Size of the buttons within the buttongroup.",
|
|
2959
|
-
"default": "'28'",
|
|
2960
|
-
"attribute": "size",
|
|
2961
|
-
"reflects": true
|
|
2962
|
-
},
|
|
2963
|
-
{
|
|
2964
|
-
"kind": "field",
|
|
2965
|
-
"name": "compact",
|
|
2966
|
-
"type": {
|
|
2967
|
-
"text": "boolean"
|
|
2968
|
-
},
|
|
2969
|
-
"default": "false",
|
|
2970
|
-
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
|
2971
|
-
"attribute": "compact",
|
|
2972
|
-
"reflects": true
|
|
2973
|
-
}
|
|
2974
|
-
],
|
|
2975
|
-
"attributes": [
|
|
2976
|
-
{
|
|
2977
|
-
"name": "orientation",
|
|
2978
|
-
"type": {
|
|
2979
|
-
"text": "ButtonGroupOrientation"
|
|
2980
|
-
},
|
|
2981
|
-
"description": "Orientation of the buttongroup.",
|
|
2982
|
-
"default": "'horizontal'",
|
|
2983
|
-
"fieldName": "orientation"
|
|
2984
|
-
},
|
|
2985
|
-
{
|
|
2986
|
-
"name": "variant",
|
|
2987
|
-
"type": {
|
|
2988
|
-
"text": "ButtonGroupVariant"
|
|
2989
|
-
},
|
|
2990
|
-
"description": "Variant of the buttons within the buttongroup.",
|
|
2991
|
-
"default": "'primary'",
|
|
2992
|
-
"fieldName": "variant"
|
|
2993
|
-
},
|
|
2994
|
-
{
|
|
2995
|
-
"name": "size",
|
|
2996
|
-
"type": {
|
|
2997
|
-
"text": "ButtonGroupSize"
|
|
2998
|
-
},
|
|
2999
|
-
"description": "Size of the buttons within the buttongroup.",
|
|
3000
|
-
"default": "'28'",
|
|
3001
|
-
"fieldName": "size"
|
|
3002
|
-
},
|
|
3003
|
-
{
|
|
3004
|
-
"name": "compact",
|
|
3005
|
-
"type": {
|
|
3006
|
-
"text": "boolean"
|
|
3007
|
-
},
|
|
3008
|
-
"default": "false",
|
|
3009
|
-
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
|
3010
|
-
"fieldName": "compact"
|
|
3011
|
-
}
|
|
3012
|
-
],
|
|
3013
|
-
"superclass": {
|
|
3014
|
-
"name": "Component",
|
|
3015
|
-
"module": "/src/models"
|
|
3016
|
-
},
|
|
3017
|
-
"tagName": "mdc-buttongroup",
|
|
3018
|
-
"jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
|
|
3019
|
-
"customElement": true
|
|
3020
|
-
}
|
|
3021
|
-
],
|
|
3022
|
-
"exports": [
|
|
3023
|
-
{
|
|
3024
|
-
"kind": "js",
|
|
3025
|
-
"name": "default",
|
|
3026
|
-
"declaration": {
|
|
3027
|
-
"name": "ButtonGroup",
|
|
3028
|
-
"module": "components/buttongroup/buttongroup.component.js"
|
|
3029
|
-
}
|
|
3030
|
-
}
|
|
3031
|
-
]
|
|
3032
|
-
},
|
|
3033
3033
|
{
|
|
3034
3034
|
"kind": "javascript-module",
|
|
3035
3035
|
"path": "components/buttonlink/buttonlink.component.js",
|