@momentum-design/components 0.85.8 → 0.85.10
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 +53 -36
- package/dist/browser/index.js.map +2 -2
- package/dist/components/dialog/dialog.component.d.ts +11 -2
- package/dist/components/dialog/dialog.component.js +22 -4
- package/dist/components/dialog/dialog.constants.d.ts +1 -1
- package/dist/components/dialog/dialog.constants.js +1 -1
- package/dist/components/dialog/dialog.styles.js +22 -5
- package/dist/custom-elements.json +522 -522
- package/dist/react/dialog/index.d.ts +1 -1
- package/dist/react/dialog/index.js +1 -1
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
|
@@ -4,792 +4,792 @@
|
|
|
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
|
+
],
|
|
31
|
+
"cssParts": [
|
|
32
|
+
{
|
|
33
|
+
"description": "The alert icon",
|
|
34
|
+
"name": "icon"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"description": "The text label of the alertchip",
|
|
38
|
+
"name": "label"
|
|
39
|
+
}
|
|
40
|
+
],
|
|
13
41
|
"members": [
|
|
14
42
|
{
|
|
15
43
|
"kind": "field",
|
|
16
|
-
"name": "
|
|
44
|
+
"name": "variant",
|
|
17
45
|
"type": {
|
|
18
|
-
"text": "
|
|
46
|
+
"text": "VariantType"
|
|
19
47
|
},
|
|
20
|
-
"description": "
|
|
21
|
-
"
|
|
22
|
-
"
|
|
48
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
49
|
+
"default": "neutral",
|
|
50
|
+
"attribute": "variant"
|
|
23
51
|
},
|
|
24
52
|
{
|
|
25
53
|
"kind": "field",
|
|
26
|
-
"name": "
|
|
54
|
+
"name": "label",
|
|
27
55
|
"type": {
|
|
28
|
-
"text": "
|
|
56
|
+
"text": "string"
|
|
29
57
|
},
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
58
|
+
"default": "''",
|
|
59
|
+
"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.",
|
|
60
|
+
"attribute": "label"
|
|
33
61
|
},
|
|
34
62
|
{
|
|
35
63
|
"kind": "field",
|
|
36
|
-
"name": "
|
|
64
|
+
"name": "autofocus",
|
|
65
|
+
"type": {
|
|
66
|
+
"text": "boolean"
|
|
67
|
+
},
|
|
68
|
+
"default": "false",
|
|
69
|
+
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
70
|
+
"attribute": "autofocus",
|
|
71
|
+
"reflects": true,
|
|
72
|
+
"inheritedFrom": {
|
|
73
|
+
"name": "AutoFocusMixin",
|
|
74
|
+
"module": "utils/mixins/AutoFocusMixin.js"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"kind": "field",
|
|
79
|
+
"name": "tabIndex",
|
|
80
|
+
"type": {
|
|
81
|
+
"text": "number"
|
|
82
|
+
},
|
|
83
|
+
"default": "0",
|
|
84
|
+
"description": "This property specifies the tab order of the element.",
|
|
85
|
+
"attribute": "tabIndex",
|
|
86
|
+
"reflects": true,
|
|
87
|
+
"inheritedFrom": {
|
|
88
|
+
"name": "TabIndexMixin",
|
|
89
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"kind": "field",
|
|
94
|
+
"name": "disabled",
|
|
37
95
|
"type": {
|
|
38
96
|
"text": "boolean | undefined"
|
|
39
97
|
},
|
|
40
|
-
"description": "
|
|
41
|
-
"
|
|
42
|
-
"
|
|
98
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
99
|
+
"default": "undefined",
|
|
100
|
+
"attribute": "disabled",
|
|
101
|
+
"reflects": true,
|
|
102
|
+
"inheritedFrom": {
|
|
103
|
+
"name": "DisabledMixin",
|
|
104
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
105
|
+
}
|
|
43
106
|
},
|
|
44
107
|
{
|
|
45
108
|
"kind": "field",
|
|
46
|
-
"name": "
|
|
109
|
+
"name": "active",
|
|
47
110
|
"type": {
|
|
48
|
-
"text": "
|
|
111
|
+
"text": "boolean | undefined"
|
|
49
112
|
},
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"attribute": "
|
|
113
|
+
"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.",
|
|
114
|
+
"default": "undefined",
|
|
115
|
+
"attribute": "active",
|
|
116
|
+
"reflects": true,
|
|
117
|
+
"inheritedFrom": {
|
|
118
|
+
"name": "Buttonsimple",
|
|
119
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
120
|
+
}
|
|
53
121
|
},
|
|
54
122
|
{
|
|
55
123
|
"kind": "field",
|
|
56
|
-
"name": "
|
|
124
|
+
"name": "softDisabled",
|
|
57
125
|
"type": {
|
|
58
|
-
"text": "
|
|
126
|
+
"text": "boolean | undefined"
|
|
59
127
|
},
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"attribute": "
|
|
128
|
+
"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.",
|
|
129
|
+
"default": "undefined",
|
|
130
|
+
"attribute": "soft-disabled",
|
|
131
|
+
"reflects": true,
|
|
132
|
+
"inheritedFrom": {
|
|
133
|
+
"name": "Buttonsimple",
|
|
134
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
135
|
+
}
|
|
63
136
|
},
|
|
64
137
|
{
|
|
65
138
|
"kind": "field",
|
|
66
|
-
"name": "
|
|
139
|
+
"name": "size",
|
|
67
140
|
"type": {
|
|
68
|
-
"text": "
|
|
141
|
+
"text": "ButtonSize"
|
|
69
142
|
},
|
|
70
|
-
"
|
|
71
|
-
"
|
|
143
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
144
|
+
"default": "32",
|
|
145
|
+
"attribute": "size",
|
|
146
|
+
"reflects": true,
|
|
147
|
+
"inheritedFrom": {
|
|
148
|
+
"name": "Buttonsimple",
|
|
149
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
150
|
+
}
|
|
72
151
|
},
|
|
73
152
|
{
|
|
74
153
|
"kind": "field",
|
|
75
|
-
"name": "
|
|
154
|
+
"name": "role",
|
|
155
|
+
"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.",
|
|
156
|
+
"default": "button",
|
|
157
|
+
"attribute": "role",
|
|
158
|
+
"reflects": true,
|
|
159
|
+
"inheritedFrom": {
|
|
160
|
+
"name": "Buttonsimple",
|
|
161
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
162
|
+
}
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"kind": "field",
|
|
166
|
+
"name": "ariaStateKey",
|
|
76
167
|
"type": {
|
|
77
|
-
"text": "
|
|
168
|
+
"text": "string | undefined"
|
|
78
169
|
},
|
|
79
|
-
"
|
|
80
|
-
"
|
|
170
|
+
"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`",
|
|
171
|
+
"default": "'aria-pressed' (when)",
|
|
172
|
+
"attribute": "ariaStateKey",
|
|
173
|
+
"reflects": true,
|
|
174
|
+
"inheritedFrom": {
|
|
175
|
+
"name": "Buttonsimple",
|
|
176
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
177
|
+
}
|
|
81
178
|
},
|
|
82
179
|
{
|
|
83
180
|
"kind": "field",
|
|
84
|
-
"name": "
|
|
85
|
-
"
|
|
86
|
-
|
|
181
|
+
"name": "type",
|
|
182
|
+
"type": {
|
|
183
|
+
"text": "ButtonType"
|
|
184
|
+
},
|
|
185
|
+
"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.",
|
|
186
|
+
"default": "button",
|
|
187
|
+
"attribute": "type",
|
|
188
|
+
"reflects": true,
|
|
189
|
+
"inheritedFrom": {
|
|
190
|
+
"name": "Buttonsimple",
|
|
191
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
192
|
+
}
|
|
87
193
|
},
|
|
88
194
|
{
|
|
89
195
|
"kind": "method",
|
|
90
|
-
"name": "
|
|
91
|
-
"privacy": "
|
|
196
|
+
"name": "executeAction",
|
|
197
|
+
"privacy": "protected",
|
|
198
|
+
"inheritedFrom": {
|
|
199
|
+
"name": "Buttonsimple",
|
|
200
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
201
|
+
}
|
|
92
202
|
},
|
|
93
203
|
{
|
|
94
204
|
"kind": "method",
|
|
95
|
-
"name": "
|
|
96
|
-
"privacy": "
|
|
205
|
+
"name": "setActive",
|
|
206
|
+
"privacy": "protected",
|
|
97
207
|
"parameters": [
|
|
98
208
|
{
|
|
99
|
-
"name": "
|
|
209
|
+
"name": "element",
|
|
100
210
|
"type": {
|
|
101
|
-
"text": "
|
|
102
|
-
}
|
|
211
|
+
"text": "HTMLElement"
|
|
212
|
+
},
|
|
213
|
+
"description": "The button element"
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
"name": "active",
|
|
217
|
+
"optional": true,
|
|
218
|
+
"type": {
|
|
219
|
+
"text": "boolean"
|
|
220
|
+
},
|
|
221
|
+
"description": "The active state of the element"
|
|
103
222
|
}
|
|
104
223
|
],
|
|
105
|
-
"description": "
|
|
224
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
225
|
+
"inheritedFrom": {
|
|
226
|
+
"name": "Buttonsimple",
|
|
227
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
228
|
+
}
|
|
106
229
|
},
|
|
107
230
|
{
|
|
108
231
|
"kind": "method",
|
|
109
|
-
"name": "
|
|
232
|
+
"name": "setSoftDisabled",
|
|
110
233
|
"privacy": "private",
|
|
111
234
|
"parameters": [
|
|
112
235
|
{
|
|
113
|
-
"name": "
|
|
236
|
+
"name": "element",
|
|
114
237
|
"type": {
|
|
115
|
-
"text": "
|
|
116
|
-
}
|
|
238
|
+
"text": "HTMLElement"
|
|
239
|
+
},
|
|
240
|
+
"description": "The button element."
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
"name": "softDisabled",
|
|
244
|
+
"optional": true,
|
|
245
|
+
"type": {
|
|
246
|
+
"text": "boolean"
|
|
247
|
+
},
|
|
248
|
+
"description": "The soft-disabled state."
|
|
117
249
|
}
|
|
118
250
|
],
|
|
119
|
-
"description": "
|
|
251
|
+
"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.",
|
|
252
|
+
"inheritedFrom": {
|
|
253
|
+
"name": "Buttonsimple",
|
|
254
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
255
|
+
}
|
|
120
256
|
},
|
|
121
257
|
{
|
|
122
258
|
"kind": "method",
|
|
123
|
-
"name": "
|
|
259
|
+
"name": "setDisabled",
|
|
124
260
|
"privacy": "private",
|
|
125
|
-
"
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
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"
|
|
261
|
+
"parameters": [
|
|
262
|
+
{
|
|
263
|
+
"name": "element",
|
|
264
|
+
"type": {
|
|
265
|
+
"text": "HTMLElement"
|
|
266
|
+
},
|
|
267
|
+
"description": "The button element."
|
|
268
|
+
},
|
|
269
|
+
{
|
|
270
|
+
"name": "disabled",
|
|
271
|
+
"type": {
|
|
272
|
+
"text": "boolean"
|
|
273
|
+
},
|
|
274
|
+
"description": "The disabled state."
|
|
275
|
+
}
|
|
276
|
+
],
|
|
277
|
+
"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.",
|
|
278
|
+
"inheritedFrom": {
|
|
279
|
+
"name": "Buttonsimple",
|
|
280
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
281
|
+
}
|
|
290
282
|
},
|
|
291
283
|
{
|
|
292
|
-
"
|
|
293
|
-
"name": "
|
|
284
|
+
"kind": "method",
|
|
285
|
+
"name": "triggerClickEvent",
|
|
286
|
+
"privacy": "private",
|
|
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": "handleBlur",
|
|
295
|
+
"privacy": "private",
|
|
296
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
297
|
+
"inheritedFrom": {
|
|
298
|
+
"name": "Buttonsimple",
|
|
299
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
300
|
+
}
|
|
298
301
|
},
|
|
299
302
|
{
|
|
300
|
-
"
|
|
301
|
-
"name": "
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
303
|
+
"kind": "method",
|
|
304
|
+
"name": "handleKeyDown",
|
|
305
|
+
"privacy": "private",
|
|
306
|
+
"parameters": [
|
|
307
|
+
{
|
|
308
|
+
"name": "event",
|
|
309
|
+
"type": {
|
|
310
|
+
"text": "KeyboardEvent"
|
|
311
|
+
},
|
|
312
|
+
"description": "The keyboard event."
|
|
313
|
+
}
|
|
314
|
+
],
|
|
315
|
+
"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.",
|
|
316
|
+
"inheritedFrom": {
|
|
317
|
+
"name": "Buttonsimple",
|
|
318
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
319
|
+
}
|
|
308
320
|
},
|
|
309
321
|
{
|
|
310
|
-
"
|
|
311
|
-
"name": "
|
|
322
|
+
"kind": "method",
|
|
323
|
+
"name": "handleKeyUp",
|
|
324
|
+
"privacy": "private",
|
|
325
|
+
"parameters": [
|
|
326
|
+
{
|
|
327
|
+
"name": "event",
|
|
328
|
+
"type": {
|
|
329
|
+
"text": "KeyboardEvent"
|
|
330
|
+
},
|
|
331
|
+
"description": "The keyboard event."
|
|
332
|
+
}
|
|
333
|
+
],
|
|
334
|
+
"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.",
|
|
335
|
+
"inheritedFrom": {
|
|
336
|
+
"name": "Buttonsimple",
|
|
337
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
338
|
+
}
|
|
312
339
|
}
|
|
313
340
|
],
|
|
314
|
-
"
|
|
341
|
+
"attributes": [
|
|
315
342
|
{
|
|
316
|
-
"kind": "field",
|
|
317
343
|
"name": "variant",
|
|
318
344
|
"type": {
|
|
319
345
|
"text": "VariantType"
|
|
320
346
|
},
|
|
321
347
|
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
322
348
|
"default": "neutral",
|
|
323
|
-
"
|
|
349
|
+
"fieldName": "variant"
|
|
324
350
|
},
|
|
325
351
|
{
|
|
326
|
-
"kind": "field",
|
|
327
352
|
"name": "label",
|
|
328
353
|
"type": {
|
|
329
354
|
"text": "string"
|
|
330
355
|
},
|
|
331
356
|
"default": "''",
|
|
332
357
|
"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.",
|
|
333
|
-
"
|
|
358
|
+
"fieldName": "label"
|
|
334
359
|
},
|
|
335
360
|
{
|
|
336
|
-
"kind": "field",
|
|
337
361
|
"name": "autofocus",
|
|
338
362
|
"type": {
|
|
339
363
|
"text": "boolean"
|
|
340
364
|
},
|
|
341
365
|
"default": "false",
|
|
342
366
|
"description": "This property indicates whether the element should receive focus automatically when it is rendered.",
|
|
343
|
-
"
|
|
344
|
-
"reflects": true,
|
|
367
|
+
"fieldName": "autofocus",
|
|
345
368
|
"inheritedFrom": {
|
|
346
369
|
"name": "AutoFocusMixin",
|
|
347
|
-
"module": "utils/mixins/AutoFocusMixin.
|
|
370
|
+
"module": "src/utils/mixins/AutoFocusMixin.ts"
|
|
348
371
|
}
|
|
349
372
|
},
|
|
350
373
|
{
|
|
351
|
-
"kind": "field",
|
|
352
374
|
"name": "tabIndex",
|
|
353
375
|
"type": {
|
|
354
376
|
"text": "number"
|
|
355
377
|
},
|
|
356
378
|
"default": "0",
|
|
357
379
|
"description": "This property specifies the tab order of the element.",
|
|
358
|
-
"
|
|
359
|
-
"reflects": true,
|
|
380
|
+
"fieldName": "tabIndex",
|
|
360
381
|
"inheritedFrom": {
|
|
361
382
|
"name": "TabIndexMixin",
|
|
362
|
-
"module": "utils/mixins/TabIndexMixin.
|
|
383
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
363
384
|
}
|
|
364
385
|
},
|
|
365
386
|
{
|
|
366
|
-
"kind": "field",
|
|
367
387
|
"name": "disabled",
|
|
368
388
|
"type": {
|
|
369
389
|
"text": "boolean | undefined"
|
|
370
390
|
},
|
|
371
391
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
372
392
|
"default": "undefined",
|
|
373
|
-
"
|
|
374
|
-
"reflects": true,
|
|
393
|
+
"fieldName": "disabled",
|
|
375
394
|
"inheritedFrom": {
|
|
376
395
|
"name": "DisabledMixin",
|
|
377
|
-
"module": "utils/mixins/DisabledMixin.
|
|
396
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
378
397
|
}
|
|
379
398
|
},
|
|
380
399
|
{
|
|
381
|
-
"kind": "field",
|
|
382
400
|
"name": "active",
|
|
383
401
|
"type": {
|
|
384
402
|
"text": "boolean | undefined"
|
|
385
403
|
},
|
|
386
404
|
"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.",
|
|
387
405
|
"default": "undefined",
|
|
388
|
-
"
|
|
389
|
-
"reflects": true,
|
|
406
|
+
"fieldName": "active",
|
|
390
407
|
"inheritedFrom": {
|
|
391
408
|
"name": "Buttonsimple",
|
|
392
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
409
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
393
410
|
}
|
|
394
411
|
},
|
|
395
412
|
{
|
|
396
|
-
"
|
|
397
|
-
"name": "softDisabled",
|
|
413
|
+
"name": "soft-disabled",
|
|
398
414
|
"type": {
|
|
399
415
|
"text": "boolean | undefined"
|
|
400
416
|
},
|
|
401
417
|
"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.",
|
|
402
418
|
"default": "undefined",
|
|
403
|
-
"
|
|
404
|
-
"reflects": true,
|
|
419
|
+
"fieldName": "softDisabled",
|
|
405
420
|
"inheritedFrom": {
|
|
406
421
|
"name": "Buttonsimple",
|
|
407
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
422
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
408
423
|
}
|
|
409
424
|
},
|
|
410
425
|
{
|
|
411
|
-
"kind": "field",
|
|
412
426
|
"name": "size",
|
|
413
427
|
"type": {
|
|
414
428
|
"text": "ButtonSize"
|
|
415
429
|
},
|
|
416
430
|
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
417
431
|
"default": "32",
|
|
418
|
-
"
|
|
419
|
-
"reflects": true,
|
|
432
|
+
"fieldName": "size",
|
|
420
433
|
"inheritedFrom": {
|
|
421
434
|
"name": "Buttonsimple",
|
|
422
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
435
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
423
436
|
}
|
|
424
437
|
},
|
|
425
438
|
{
|
|
426
|
-
"kind": "field",
|
|
427
439
|
"name": "role",
|
|
428
440
|
"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.",
|
|
429
441
|
"default": "button",
|
|
430
|
-
"
|
|
431
|
-
"reflects": true,
|
|
442
|
+
"fieldName": "role",
|
|
432
443
|
"inheritedFrom": {
|
|
433
444
|
"name": "Buttonsimple",
|
|
434
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
445
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
435
446
|
}
|
|
436
447
|
},
|
|
437
448
|
{
|
|
438
|
-
"kind": "field",
|
|
439
449
|
"name": "ariaStateKey",
|
|
440
450
|
"type": {
|
|
441
451
|
"text": "string | undefined"
|
|
442
452
|
},
|
|
443
453
|
"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`",
|
|
444
454
|
"default": "'aria-pressed' (when)",
|
|
445
|
-
"
|
|
446
|
-
"reflects": true,
|
|
455
|
+
"fieldName": "ariaStateKey",
|
|
447
456
|
"inheritedFrom": {
|
|
448
457
|
"name": "Buttonsimple",
|
|
449
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
458
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
450
459
|
}
|
|
451
460
|
},
|
|
452
461
|
{
|
|
453
|
-
"kind": "field",
|
|
454
462
|
"name": "type",
|
|
455
463
|
"type": {
|
|
456
464
|
"text": "ButtonType"
|
|
457
465
|
},
|
|
458
466
|
"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.",
|
|
459
467
|
"default": "button",
|
|
460
|
-
"
|
|
461
|
-
"reflects": true,
|
|
468
|
+
"fieldName": "type",
|
|
462
469
|
"inheritedFrom": {
|
|
463
470
|
"name": "Buttonsimple",
|
|
464
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
471
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
465
472
|
}
|
|
466
|
-
}
|
|
473
|
+
}
|
|
474
|
+
],
|
|
475
|
+
"superclass": {
|
|
476
|
+
"name": "Buttonsimple",
|
|
477
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
478
|
+
},
|
|
479
|
+
"tagName": "mdc-alertchip",
|
|
480
|
+
"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 * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n */",
|
|
481
|
+
"customElement": true,
|
|
482
|
+
"events": [
|
|
467
483
|
{
|
|
468
|
-
"
|
|
469
|
-
"name": "
|
|
470
|
-
"
|
|
484
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
485
|
+
"name": "click",
|
|
486
|
+
"reactName": "onClick",
|
|
471
487
|
"inheritedFrom": {
|
|
472
488
|
"name": "Buttonsimple",
|
|
473
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
489
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
474
490
|
}
|
|
475
491
|
},
|
|
476
492
|
{
|
|
477
|
-
"
|
|
478
|
-
"name": "
|
|
479
|
-
"
|
|
480
|
-
"parameters": [
|
|
481
|
-
{
|
|
482
|
-
"name": "element",
|
|
483
|
-
"type": {
|
|
484
|
-
"text": "HTMLElement"
|
|
485
|
-
},
|
|
486
|
-
"description": "The button element"
|
|
487
|
-
},
|
|
488
|
-
{
|
|
489
|
-
"name": "active",
|
|
490
|
-
"optional": true,
|
|
491
|
-
"type": {
|
|
492
|
-
"text": "boolean"
|
|
493
|
-
},
|
|
494
|
-
"description": "The active state of the element"
|
|
495
|
-
}
|
|
496
|
-
],
|
|
497
|
-
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
493
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
494
|
+
"name": "keydown",
|
|
495
|
+
"reactName": "onKeyDown",
|
|
498
496
|
"inheritedFrom": {
|
|
499
497
|
"name": "Buttonsimple",
|
|
500
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
498
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
501
499
|
}
|
|
502
500
|
},
|
|
503
501
|
{
|
|
504
|
-
"
|
|
505
|
-
"name": "
|
|
506
|
-
"
|
|
507
|
-
"parameters": [
|
|
508
|
-
{
|
|
509
|
-
"name": "element",
|
|
510
|
-
"type": {
|
|
511
|
-
"text": "HTMLElement"
|
|
512
|
-
},
|
|
513
|
-
"description": "The button element."
|
|
514
|
-
},
|
|
515
|
-
{
|
|
516
|
-
"name": "softDisabled",
|
|
517
|
-
"optional": true,
|
|
518
|
-
"type": {
|
|
519
|
-
"text": "boolean"
|
|
520
|
-
},
|
|
521
|
-
"description": "The soft-disabled state."
|
|
522
|
-
}
|
|
523
|
-
],
|
|
524
|
-
"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.",
|
|
502
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
503
|
+
"name": "keyup",
|
|
504
|
+
"reactName": "onKeyUp",
|
|
525
505
|
"inheritedFrom": {
|
|
526
506
|
"name": "Buttonsimple",
|
|
527
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
507
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
528
508
|
}
|
|
529
509
|
},
|
|
530
510
|
{
|
|
531
|
-
"
|
|
532
|
-
"name": "
|
|
533
|
-
"
|
|
534
|
-
"parameters": [
|
|
535
|
-
{
|
|
536
|
-
"name": "element",
|
|
537
|
-
"type": {
|
|
538
|
-
"text": "HTMLElement"
|
|
539
|
-
},
|
|
540
|
-
"description": "The button element."
|
|
541
|
-
},
|
|
542
|
-
{
|
|
543
|
-
"name": "disabled",
|
|
544
|
-
"type": {
|
|
545
|
-
"text": "boolean"
|
|
546
|
-
},
|
|
547
|
-
"description": "The disabled state."
|
|
548
|
-
}
|
|
549
|
-
],
|
|
550
|
-
"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.",
|
|
511
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
512
|
+
"name": "focus",
|
|
513
|
+
"reactName": "onFocus",
|
|
551
514
|
"inheritedFrom": {
|
|
552
515
|
"name": "Buttonsimple",
|
|
553
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
516
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
554
517
|
}
|
|
518
|
+
}
|
|
519
|
+
]
|
|
520
|
+
}
|
|
521
|
+
],
|
|
522
|
+
"exports": [
|
|
523
|
+
{
|
|
524
|
+
"kind": "js",
|
|
525
|
+
"name": "default",
|
|
526
|
+
"declaration": {
|
|
527
|
+
"name": "AlertChip",
|
|
528
|
+
"module": "components/alertchip/alertchip.component.js"
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
]
|
|
532
|
+
},
|
|
533
|
+
{
|
|
534
|
+
"kind": "javascript-module",
|
|
535
|
+
"path": "components/animation/animation.component.js",
|
|
536
|
+
"declarations": [
|
|
537
|
+
{
|
|
538
|
+
"kind": "class",
|
|
539
|
+
"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.",
|
|
540
|
+
"name": "Animation",
|
|
541
|
+
"members": [
|
|
542
|
+
{
|
|
543
|
+
"kind": "field",
|
|
544
|
+
"name": "name",
|
|
545
|
+
"type": {
|
|
546
|
+
"text": "AnimationNames | undefined"
|
|
547
|
+
},
|
|
548
|
+
"description": "Name of the animation (= filename)",
|
|
549
|
+
"attribute": "name",
|
|
550
|
+
"reflects": true
|
|
555
551
|
},
|
|
556
552
|
{
|
|
557
|
-
"kind": "
|
|
558
|
-
"name": "
|
|
553
|
+
"kind": "field",
|
|
554
|
+
"name": "loop",
|
|
555
|
+
"type": {
|
|
556
|
+
"text": "LoopType | undefined"
|
|
557
|
+
},
|
|
558
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
559
|
+
"attribute": "loop",
|
|
560
|
+
"reflects": true
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
"kind": "field",
|
|
564
|
+
"name": "autoplay",
|
|
565
|
+
"type": {
|
|
566
|
+
"text": "boolean | undefined"
|
|
567
|
+
},
|
|
568
|
+
"description": "Weather start the animation automatically",
|
|
569
|
+
"attribute": "autoplay",
|
|
570
|
+
"reflects": true
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"kind": "field",
|
|
574
|
+
"name": "ariaLabel",
|
|
575
|
+
"type": {
|
|
576
|
+
"text": "string | null"
|
|
577
|
+
},
|
|
578
|
+
"default": "null",
|
|
579
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
580
|
+
"attribute": "aria-label"
|
|
581
|
+
},
|
|
582
|
+
{
|
|
583
|
+
"kind": "field",
|
|
584
|
+
"name": "ariaLabelledBy",
|
|
585
|
+
"type": {
|
|
586
|
+
"text": "string | null"
|
|
587
|
+
},
|
|
588
|
+
"default": "null",
|
|
589
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
590
|
+
"attribute": "aria-labelledby"
|
|
591
|
+
},
|
|
592
|
+
{
|
|
593
|
+
"kind": "field",
|
|
594
|
+
"name": "lottieInstance",
|
|
595
|
+
"type": {
|
|
596
|
+
"text": "AnimationItem | undefined"
|
|
597
|
+
},
|
|
559
598
|
"privacy": "private",
|
|
560
|
-
"
|
|
561
|
-
"name": "Buttonsimple",
|
|
562
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
563
|
-
}
|
|
599
|
+
"description": "Lottie animation instance"
|
|
564
600
|
},
|
|
565
601
|
{
|
|
566
|
-
"kind": "
|
|
567
|
-
"name": "
|
|
602
|
+
"kind": "field",
|
|
603
|
+
"name": "containerRef",
|
|
604
|
+
"type": {
|
|
605
|
+
"text": "Ref<HTMLDivElement>"
|
|
606
|
+
},
|
|
568
607
|
"privacy": "private",
|
|
569
|
-
"description": "
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
608
|
+
"description": "Container for the animation"
|
|
609
|
+
},
|
|
610
|
+
{
|
|
611
|
+
"kind": "field",
|
|
612
|
+
"name": "animation",
|
|
613
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
614
|
+
"readonly": true
|
|
574
615
|
},
|
|
575
616
|
{
|
|
576
617
|
"kind": "method",
|
|
577
|
-
"name": "
|
|
618
|
+
"name": "getLoopValue",
|
|
619
|
+
"privacy": "private"
|
|
620
|
+
},
|
|
621
|
+
{
|
|
622
|
+
"kind": "method",
|
|
623
|
+
"name": "onLoadSuccessHandler",
|
|
578
624
|
"privacy": "private",
|
|
579
625
|
"parameters": [
|
|
580
626
|
{
|
|
581
|
-
"name": "
|
|
627
|
+
"name": "animationData",
|
|
582
628
|
"type": {
|
|
583
|
-
"text": "
|
|
584
|
-
}
|
|
585
|
-
"description": "The keyboard event."
|
|
629
|
+
"text": "any"
|
|
630
|
+
}
|
|
586
631
|
}
|
|
587
632
|
],
|
|
588
|
-
"description": "
|
|
589
|
-
"inheritedFrom": {
|
|
590
|
-
"name": "Buttonsimple",
|
|
591
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
592
|
-
}
|
|
633
|
+
"description": "Create new lotty instance for the loaded data"
|
|
593
634
|
},
|
|
594
635
|
{
|
|
595
636
|
"kind": "method",
|
|
596
|
-
"name": "
|
|
637
|
+
"name": "onLoadFailHandler",
|
|
597
638
|
"privacy": "private",
|
|
598
639
|
"parameters": [
|
|
599
640
|
{
|
|
600
|
-
"name": "
|
|
641
|
+
"name": "error",
|
|
601
642
|
"type": {
|
|
602
|
-
"text": "
|
|
603
|
-
}
|
|
604
|
-
"description": "The keyboard event."
|
|
643
|
+
"text": "Error"
|
|
644
|
+
}
|
|
605
645
|
}
|
|
606
646
|
],
|
|
607
|
-
"description": "
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
647
|
+
"description": "Error handler for animation loading"
|
|
648
|
+
},
|
|
649
|
+
{
|
|
650
|
+
"kind": "method",
|
|
651
|
+
"name": "getAnimationData",
|
|
652
|
+
"privacy": "private",
|
|
653
|
+
"description": "Import animation data dynamically"
|
|
654
|
+
},
|
|
655
|
+
{
|
|
656
|
+
"kind": "field",
|
|
657
|
+
"name": "onCompleteHandler",
|
|
658
|
+
"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."
|
|
612
659
|
}
|
|
613
660
|
],
|
|
614
|
-
"
|
|
661
|
+
"events": [
|
|
615
662
|
{
|
|
616
|
-
"name": "
|
|
663
|
+
"name": "load",
|
|
617
664
|
"type": {
|
|
618
|
-
"text": "
|
|
665
|
+
"text": "CustomEvent"
|
|
619
666
|
},
|
|
620
|
-
"description": "
|
|
621
|
-
"
|
|
622
|
-
"fieldName": "variant"
|
|
667
|
+
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
668
|
+
"reactName": "onLoad"
|
|
623
669
|
},
|
|
624
670
|
{
|
|
625
|
-
"
|
|
626
|
-
"
|
|
627
|
-
|
|
628
|
-
},
|
|
629
|
-
"default": "''",
|
|
630
|
-
"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.",
|
|
631
|
-
"fieldName": "label"
|
|
671
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
672
|
+
"name": "complete",
|
|
673
|
+
"reactName": "onComplete"
|
|
632
674
|
},
|
|
633
675
|
{
|
|
634
|
-
"
|
|
635
|
-
"
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
"fieldName": "autofocus",
|
|
641
|
-
"inheritedFrom": {
|
|
642
|
-
"name": "AutoFocusMixin",
|
|
643
|
-
"module": "src/utils/mixins/AutoFocusMixin.ts"
|
|
644
|
-
}
|
|
645
|
-
},
|
|
676
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
677
|
+
"name": "error",
|
|
678
|
+
"reactName": "onError"
|
|
679
|
+
}
|
|
680
|
+
],
|
|
681
|
+
"attributes": [
|
|
646
682
|
{
|
|
647
|
-
"name": "
|
|
683
|
+
"name": "name",
|
|
648
684
|
"type": {
|
|
649
|
-
"text": "
|
|
685
|
+
"text": "AnimationNames | undefined"
|
|
650
686
|
},
|
|
651
|
-
"
|
|
652
|
-
"
|
|
653
|
-
"fieldName": "tabIndex",
|
|
654
|
-
"inheritedFrom": {
|
|
655
|
-
"name": "TabIndexMixin",
|
|
656
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
657
|
-
}
|
|
687
|
+
"description": "Name of the animation (= filename)",
|
|
688
|
+
"fieldName": "name"
|
|
658
689
|
},
|
|
659
690
|
{
|
|
660
|
-
"name": "
|
|
691
|
+
"name": "loop",
|
|
661
692
|
"type": {
|
|
662
|
-
"text": "
|
|
693
|
+
"text": "LoopType | undefined"
|
|
663
694
|
},
|
|
664
|
-
"description": "
|
|
665
|
-
"
|
|
666
|
-
"fieldName": "disabled",
|
|
667
|
-
"inheritedFrom": {
|
|
668
|
-
"name": "DisabledMixin",
|
|
669
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
670
|
-
}
|
|
695
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
696
|
+
"fieldName": "loop"
|
|
671
697
|
},
|
|
672
698
|
{
|
|
673
|
-
"name": "
|
|
699
|
+
"name": "autoplay",
|
|
674
700
|
"type": {
|
|
675
701
|
"text": "boolean | undefined"
|
|
676
702
|
},
|
|
677
|
-
"description": "
|
|
678
|
-
"
|
|
679
|
-
"fieldName": "active",
|
|
680
|
-
"inheritedFrom": {
|
|
681
|
-
"name": "Buttonsimple",
|
|
682
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
683
|
-
}
|
|
703
|
+
"description": "Weather start the animation automatically",
|
|
704
|
+
"fieldName": "autoplay"
|
|
684
705
|
},
|
|
685
706
|
{
|
|
686
|
-
"name": "
|
|
707
|
+
"name": "aria-label",
|
|
687
708
|
"type": {
|
|
688
|
-
"text": "
|
|
709
|
+
"text": "string | null"
|
|
689
710
|
},
|
|
690
|
-
"
|
|
691
|
-
"
|
|
692
|
-
"fieldName": "
|
|
693
|
-
"inheritedFrom": {
|
|
694
|
-
"name": "Buttonsimple",
|
|
695
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
696
|
-
}
|
|
711
|
+
"default": "null",
|
|
712
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
713
|
+
"fieldName": "ariaLabel"
|
|
697
714
|
},
|
|
698
715
|
{
|
|
699
|
-
"name": "
|
|
716
|
+
"name": "aria-labelledby",
|
|
700
717
|
"type": {
|
|
701
|
-
"text": "
|
|
718
|
+
"text": "string | null"
|
|
702
719
|
},
|
|
703
|
-
"
|
|
704
|
-
"
|
|
705
|
-
"fieldName": "
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
720
|
+
"default": "null",
|
|
721
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
722
|
+
"fieldName": "ariaLabelledBy"
|
|
723
|
+
}
|
|
724
|
+
],
|
|
725
|
+
"superclass": {
|
|
726
|
+
"name": "Component",
|
|
727
|
+
"module": "/src/models"
|
|
728
|
+
},
|
|
729
|
+
"tagName": "mdc-animation",
|
|
730
|
+
"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 */",
|
|
731
|
+
"customElement": true
|
|
732
|
+
}
|
|
733
|
+
],
|
|
734
|
+
"exports": [
|
|
735
|
+
{
|
|
736
|
+
"kind": "js",
|
|
737
|
+
"name": "default",
|
|
738
|
+
"declaration": {
|
|
739
|
+
"name": "Animation",
|
|
740
|
+
"module": "components/animation/animation.component.js"
|
|
741
|
+
}
|
|
742
|
+
}
|
|
743
|
+
]
|
|
744
|
+
},
|
|
745
|
+
{
|
|
746
|
+
"kind": "javascript-module",
|
|
747
|
+
"path": "components/appheader/appheader.component.js",
|
|
748
|
+
"declarations": [
|
|
749
|
+
{
|
|
750
|
+
"kind": "class",
|
|
751
|
+
"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**.",
|
|
752
|
+
"name": "Appheader",
|
|
753
|
+
"cssParts": [
|
|
754
|
+
{
|
|
755
|
+
"description": "The main container for styling the header.",
|
|
756
|
+
"name": "container"
|
|
710
757
|
},
|
|
711
758
|
{
|
|
712
|
-
"
|
|
713
|
-
"
|
|
714
|
-
"default": "button",
|
|
715
|
-
"fieldName": "role",
|
|
716
|
-
"inheritedFrom": {
|
|
717
|
-
"name": "Buttonsimple",
|
|
718
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
719
|
-
}
|
|
759
|
+
"description": "The leading section of the header.",
|
|
760
|
+
"name": "leading-section"
|
|
720
761
|
},
|
|
721
762
|
{
|
|
722
|
-
"
|
|
723
|
-
"
|
|
724
|
-
"text": "string | undefined"
|
|
725
|
-
},
|
|
726
|
-
"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`",
|
|
727
|
-
"default": "'aria-pressed' (when)",
|
|
728
|
-
"fieldName": "ariaStateKey",
|
|
729
|
-
"inheritedFrom": {
|
|
730
|
-
"name": "Buttonsimple",
|
|
731
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
732
|
-
}
|
|
763
|
+
"description": "The center section of the header.",
|
|
764
|
+
"name": "center-section"
|
|
733
765
|
},
|
|
734
766
|
{
|
|
735
|
-
"
|
|
736
|
-
"
|
|
737
|
-
"text": "ButtonType"
|
|
738
|
-
},
|
|
739
|
-
"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.",
|
|
740
|
-
"default": "button",
|
|
741
|
-
"fieldName": "type",
|
|
742
|
-
"inheritedFrom": {
|
|
743
|
-
"name": "Buttonsimple",
|
|
744
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
745
|
-
}
|
|
767
|
+
"description": "The trailing section of the header.",
|
|
768
|
+
"name": "trailing-section"
|
|
746
769
|
}
|
|
747
770
|
],
|
|
748
|
-
"
|
|
749
|
-
"name": "Buttonsimple",
|
|
750
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
751
|
-
},
|
|
752
|
-
"tagName": "mdc-alertchip",
|
|
753
|
-
"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 * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n */",
|
|
754
|
-
"customElement": true,
|
|
755
|
-
"events": [
|
|
756
|
-
{
|
|
757
|
-
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
758
|
-
"name": "click",
|
|
759
|
-
"reactName": "onClick",
|
|
760
|
-
"inheritedFrom": {
|
|
761
|
-
"name": "Buttonsimple",
|
|
762
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
763
|
-
}
|
|
764
|
-
},
|
|
771
|
+
"slots": [
|
|
765
772
|
{
|
|
766
|
-
"description": "
|
|
767
|
-
"name": "
|
|
768
|
-
"reactName": "onKeyDown",
|
|
769
|
-
"inheritedFrom": {
|
|
770
|
-
"name": "Buttonsimple",
|
|
771
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
772
|
-
}
|
|
773
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
774
|
+
"name": "leading"
|
|
773
775
|
},
|
|
774
776
|
{
|
|
775
|
-
"description": "
|
|
776
|
-
"name": "
|
|
777
|
-
"reactName": "onKeyUp",
|
|
778
|
-
"inheritedFrom": {
|
|
779
|
-
"name": "Buttonsimple",
|
|
780
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
781
|
-
}
|
|
777
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
778
|
+
"name": "center"
|
|
782
779
|
},
|
|
783
780
|
{
|
|
784
|
-
"description": "
|
|
785
|
-
"name": "
|
|
786
|
-
"reactName": "onFocus",
|
|
787
|
-
"inheritedFrom": {
|
|
788
|
-
"name": "Buttonsimple",
|
|
789
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
790
|
-
}
|
|
781
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
782
|
+
"name": "trailing"
|
|
791
783
|
}
|
|
792
|
-
]
|
|
784
|
+
],
|
|
785
|
+
"members": [],
|
|
786
|
+
"superclass": {
|
|
787
|
+
"name": "Component",
|
|
788
|
+
"module": "/src/models"
|
|
789
|
+
},
|
|
790
|
+
"tagName": "mdc-appheader",
|
|
791
|
+
"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 */",
|
|
792
|
+
"customElement": true
|
|
793
793
|
}
|
|
794
794
|
],
|
|
795
795
|
"exports": [
|
|
@@ -797,8 +797,8 @@
|
|
|
797
797
|
"kind": "js",
|
|
798
798
|
"name": "default",
|
|
799
799
|
"declaration": {
|
|
800
|
-
"name": "
|
|
801
|
-
"module": "components/
|
|
800
|
+
"name": "Appheader",
|
|
801
|
+
"module": "components/appheader/appheader.component.js"
|
|
802
802
|
}
|
|
803
803
|
}
|
|
804
804
|
]
|
|
@@ -9485,7 +9485,7 @@
|
|
|
9485
9485
|
"declarations": [
|
|
9486
9486
|
{
|
|
9487
9487
|
"kind": "class",
|
|
9488
|
-
"description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in
|
|
9488
|
+
"description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nThe dialog is a controlled component, meaning it does not have its own state management for visibility.\nUse the `visible` property to control the visibility of the dialog.\nUse the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\nor Escape is pressed).\n\nDialog component have 2 variants: default and promotional.\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
|
|
9489
9489
|
"name": "Dialog",
|
|
9490
9490
|
"cssProperties": [
|
|
9491
9491
|
{
|
|
@@ -9579,7 +9579,7 @@
|
|
|
9579
9579
|
"type": {
|
|
9580
9580
|
"text": "number"
|
|
9581
9581
|
},
|
|
9582
|
-
"description": "The z-index of the dialog",
|
|
9582
|
+
"description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
|
|
9583
9583
|
"default": "1000",
|
|
9584
9584
|
"attribute": "z-index",
|
|
9585
9585
|
"reflects": true
|
|
@@ -9590,7 +9590,7 @@
|
|
|
9590
9590
|
"type": {
|
|
9591
9591
|
"text": "DialogSize"
|
|
9592
9592
|
},
|
|
9593
|
-
"description": "The size of the dialog, can be 'small' (432px width), 'medium' (656px width),
|
|
9593
|
+
"description": "The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
|
|
9594
9594
|
"default": "small",
|
|
9595
9595
|
"attribute": "size",
|
|
9596
9596
|
"reflects": true
|
|
@@ -10369,7 +10369,7 @@
|
|
|
10369
10369
|
"type": {
|
|
10370
10370
|
"text": "number"
|
|
10371
10371
|
},
|
|
10372
|
-
"description": "The z-index of the dialog",
|
|
10372
|
+
"description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
|
|
10373
10373
|
"default": "1000",
|
|
10374
10374
|
"fieldName": "zIndex"
|
|
10375
10375
|
},
|
|
@@ -10378,7 +10378,7 @@
|
|
|
10378
10378
|
"type": {
|
|
10379
10379
|
"text": "DialogSize"
|
|
10380
10380
|
},
|
|
10381
|
-
"description": "The size of the dialog, can be 'small' (432px width), 'medium' (656px width),
|
|
10381
|
+
"description": "The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
|
|
10382
10382
|
"default": "small",
|
|
10383
10383
|
"fieldName": "size"
|
|
10384
10384
|
},
|
|
@@ -10528,7 +10528,7 @@
|
|
|
10528
10528
|
"module": "/src/models"
|
|
10529
10529
|
},
|
|
10530
10530
|
"tagName": "mdc-dialog",
|
|
10531
|
-
"jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in
|
|
10531
|
+
"jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
|
|
10532
10532
|
"customElement": true
|
|
10533
10533
|
}
|
|
10534
10534
|
],
|