@momentum-design/components 0.72.0 → 0.73.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +190 -190
- package/dist/browser/index.js.map +4 -4
- package/dist/components/animation/animation.component.d.ts +1 -0
- package/dist/components/animation/animation.component.js +3 -0
- package/dist/components/animation/animation.types.d.ts +2 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.component.d.ts +2 -1
- package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js +2 -1
- package/dist/components/menuitemcheckbox/menuitemcheckbox.constants.d.ts +1 -5
- package/dist/components/menuitemcheckbox/menuitemcheckbox.constants.js +2 -5
- package/dist/components/menuitemcheckbox/menuitemcheckbox.types.d.ts +2 -3
- package/dist/components/menuitemradio/menuitemradio.component.d.ts +2 -2
- package/dist/components/menuitemradio/menuitemradio.component.js +1 -1
- package/dist/components/menuitemradio/menuitemradio.constants.d.ts +1 -5
- package/dist/components/menuitemradio/menuitemradio.constants.js +1 -5
- package/dist/components/menuitemradio/menuitemradio.types.d.ts +1 -4
- package/dist/components/menusection/index.d.ts +7 -0
- package/dist/components/menusection/index.js +4 -0
- package/dist/components/menusection/menusection.component.d.ts +58 -0
- package/dist/components/menusection/menusection.component.js +115 -0
- package/dist/components/menusection/menusection.constants.d.ts +6 -0
- package/dist/components/menusection/menusection.constants.js +7 -0
- package/dist/components/menusection/menusection.types.d.ts +4 -0
- package/dist/components/menusection/menusection.types.js +1 -0
- package/dist/custom-elements.json +749 -706
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/react/animation/index.d.ts +2 -0
- package/dist/react/animation/index.js +2 -0
- package/dist/react/index.d.ts +3 -2
- package/dist/react/index.js +3 -2
- package/dist/react/menusection/index.d.ts +16 -0
- package/dist/react/menusection/index.js +25 -0
- package/package.json +1 -1
@@ -4,746 +4,754 @@
|
|
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": "tabIndex",
|
55
|
+
"type": {
|
56
|
+
"text": "number"
|
57
|
+
},
|
58
|
+
"default": "0",
|
59
|
+
"description": "This property specifies the tab order of the element.",
|
60
|
+
"attribute": "tabIndex",
|
61
|
+
"reflects": true,
|
62
|
+
"inheritedFrom": {
|
63
|
+
"name": "TabIndexMixin",
|
64
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
65
|
+
}
|
66
|
+
},
|
67
|
+
{
|
68
|
+
"kind": "field",
|
69
|
+
"name": "disabled",
|
37
70
|
"type": {
|
38
71
|
"text": "boolean | undefined"
|
39
72
|
},
|
40
|
-
"description": "
|
41
|
-
"
|
42
|
-
"
|
73
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
74
|
+
"default": "undefined",
|
75
|
+
"attribute": "disabled",
|
76
|
+
"reflects": true,
|
77
|
+
"inheritedFrom": {
|
78
|
+
"name": "DisabledMixin",
|
79
|
+
"module": "utils/mixins/DisabledMixin.js"
|
80
|
+
}
|
43
81
|
},
|
44
82
|
{
|
45
83
|
"kind": "field",
|
46
|
-
"name": "
|
84
|
+
"name": "active",
|
47
85
|
"type": {
|
48
|
-
"text": "
|
86
|
+
"text": "boolean | undefined"
|
49
87
|
},
|
50
|
-
"
|
51
|
-
"
|
52
|
-
"attribute": "
|
88
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
89
|
+
"default": "undefined",
|
90
|
+
"attribute": "active",
|
91
|
+
"reflects": true,
|
92
|
+
"inheritedFrom": {
|
93
|
+
"name": "Buttonsimple",
|
94
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
95
|
+
}
|
53
96
|
},
|
54
97
|
{
|
55
98
|
"kind": "field",
|
56
|
-
"name": "
|
99
|
+
"name": "softDisabled",
|
57
100
|
"type": {
|
58
|
-
"text": "
|
101
|
+
"text": "boolean | undefined"
|
59
102
|
},
|
60
|
-
"
|
61
|
-
"
|
62
|
-
"attribute": "
|
103
|
+
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
104
|
+
"default": "undefined",
|
105
|
+
"attribute": "soft-disabled",
|
106
|
+
"reflects": true,
|
107
|
+
"inheritedFrom": {
|
108
|
+
"name": "Buttonsimple",
|
109
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
110
|
+
}
|
63
111
|
},
|
64
112
|
{
|
65
113
|
"kind": "field",
|
66
|
-
"name": "
|
114
|
+
"name": "size",
|
67
115
|
"type": {
|
68
|
-
"text": "
|
116
|
+
"text": "ButtonSize"
|
69
117
|
},
|
70
|
-
"
|
71
|
-
"
|
118
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
119
|
+
"default": "32",
|
120
|
+
"attribute": "size",
|
121
|
+
"reflects": true,
|
122
|
+
"inheritedFrom": {
|
123
|
+
"name": "Buttonsimple",
|
124
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
125
|
+
}
|
72
126
|
},
|
73
127
|
{
|
74
128
|
"kind": "field",
|
75
|
-
"name": "
|
129
|
+
"name": "role",
|
130
|
+
"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.",
|
131
|
+
"default": "button",
|
132
|
+
"attribute": "role",
|
133
|
+
"reflects": true,
|
134
|
+
"inheritedFrom": {
|
135
|
+
"name": "Buttonsimple",
|
136
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
137
|
+
}
|
138
|
+
},
|
139
|
+
{
|
140
|
+
"kind": "field",
|
141
|
+
"name": "ariaStateKey",
|
76
142
|
"type": {
|
77
|
-
"text": "
|
143
|
+
"text": "string | undefined"
|
78
144
|
},
|
79
|
-
"
|
80
|
-
"
|
145
|
+
"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`",
|
146
|
+
"default": "'aria-pressed' (when)",
|
147
|
+
"attribute": "ariaStateKey",
|
148
|
+
"reflects": true,
|
149
|
+
"inheritedFrom": {
|
150
|
+
"name": "Buttonsimple",
|
151
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
152
|
+
}
|
81
153
|
},
|
82
154
|
{
|
83
155
|
"kind": "field",
|
84
|
-
"name": "
|
85
|
-
"
|
86
|
-
|
156
|
+
"name": "type",
|
157
|
+
"type": {
|
158
|
+
"text": "ButtonType"
|
159
|
+
},
|
160
|
+
"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.",
|
161
|
+
"default": "button",
|
162
|
+
"attribute": "type",
|
163
|
+
"reflects": true,
|
164
|
+
"inheritedFrom": {
|
165
|
+
"name": "Buttonsimple",
|
166
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
167
|
+
}
|
87
168
|
},
|
88
169
|
{
|
89
170
|
"kind": "method",
|
90
|
-
"name": "
|
91
|
-
"privacy": "
|
171
|
+
"name": "executeAction",
|
172
|
+
"privacy": "protected",
|
173
|
+
"inheritedFrom": {
|
174
|
+
"name": "Buttonsimple",
|
175
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
176
|
+
}
|
92
177
|
},
|
93
178
|
{
|
94
179
|
"kind": "method",
|
95
|
-
"name": "
|
96
|
-
"privacy": "
|
180
|
+
"name": "setActive",
|
181
|
+
"privacy": "protected",
|
97
182
|
"parameters": [
|
98
183
|
{
|
99
|
-
"name": "
|
184
|
+
"name": "element",
|
100
185
|
"type": {
|
101
|
-
"text": "
|
102
|
-
}
|
186
|
+
"text": "HTMLElement"
|
187
|
+
},
|
188
|
+
"description": "The button element"
|
189
|
+
},
|
190
|
+
{
|
191
|
+
"name": "active",
|
192
|
+
"optional": true,
|
193
|
+
"type": {
|
194
|
+
"text": "boolean"
|
195
|
+
},
|
196
|
+
"description": "The active state of the element"
|
103
197
|
}
|
104
198
|
],
|
105
|
-
"description": "
|
199
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
200
|
+
"inheritedFrom": {
|
201
|
+
"name": "Buttonsimple",
|
202
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
203
|
+
}
|
106
204
|
},
|
107
205
|
{
|
108
206
|
"kind": "method",
|
109
|
-
"name": "
|
207
|
+
"name": "setSoftDisabled",
|
110
208
|
"privacy": "private",
|
111
209
|
"parameters": [
|
112
210
|
{
|
113
|
-
"name": "
|
211
|
+
"name": "element",
|
114
212
|
"type": {
|
115
|
-
"text": "
|
116
|
-
}
|
213
|
+
"text": "HTMLElement"
|
214
|
+
},
|
215
|
+
"description": "The button element."
|
216
|
+
},
|
217
|
+
{
|
218
|
+
"name": "softDisabled",
|
219
|
+
"optional": true,
|
220
|
+
"type": {
|
221
|
+
"text": "boolean"
|
222
|
+
},
|
223
|
+
"description": "The soft-disabled state."
|
117
224
|
}
|
118
225
|
],
|
119
|
-
"description": "
|
226
|
+
"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.",
|
227
|
+
"inheritedFrom": {
|
228
|
+
"name": "Buttonsimple",
|
229
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
230
|
+
}
|
120
231
|
},
|
121
232
|
{
|
122
233
|
"kind": "method",
|
123
|
-
"name": "
|
234
|
+
"name": "setDisabled",
|
124
235
|
"privacy": "private",
|
125
|
-
"
|
236
|
+
"parameters": [
|
237
|
+
{
|
238
|
+
"name": "element",
|
239
|
+
"type": {
|
240
|
+
"text": "HTMLElement"
|
241
|
+
},
|
242
|
+
"description": "The button element."
|
243
|
+
},
|
244
|
+
{
|
245
|
+
"name": "disabled",
|
246
|
+
"type": {
|
247
|
+
"text": "boolean"
|
248
|
+
},
|
249
|
+
"description": "The disabled state."
|
250
|
+
}
|
251
|
+
],
|
252
|
+
"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.",
|
253
|
+
"inheritedFrom": {
|
254
|
+
"name": "Buttonsimple",
|
255
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
256
|
+
}
|
126
257
|
},
|
127
258
|
{
|
128
|
-
"kind": "
|
129
|
-
"name": "
|
130
|
-
"
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
136
|
-
"name": "complete",
|
137
|
-
"reactName": "onComplete"
|
259
|
+
"kind": "method",
|
260
|
+
"name": "triggerClickEvent",
|
261
|
+
"privacy": "private",
|
262
|
+
"inheritedFrom": {
|
263
|
+
"name": "Buttonsimple",
|
264
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
265
|
+
}
|
138
266
|
},
|
139
267
|
{
|
140
|
-
"
|
141
|
-
"name": "
|
142
|
-
"
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
"type": {
|
149
|
-
"text": "AnimationNames | undefined"
|
150
|
-
},
|
151
|
-
"description": "Name of the animation (= filename)",
|
152
|
-
"fieldName": "name"
|
153
|
-
},
|
154
|
-
{
|
155
|
-
"name": "loop",
|
156
|
-
"type": {
|
157
|
-
"text": "LoopType | undefined"
|
158
|
-
},
|
159
|
-
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
160
|
-
"fieldName": "loop"
|
161
|
-
},
|
162
|
-
{
|
163
|
-
"name": "autoplay",
|
164
|
-
"type": {
|
165
|
-
"text": "boolean | undefined"
|
166
|
-
},
|
167
|
-
"description": "Weather start the animation automatically",
|
168
|
-
"fieldName": "autoplay"
|
169
|
-
},
|
170
|
-
{
|
171
|
-
"name": "aria-label",
|
172
|
-
"type": {
|
173
|
-
"text": "string | null"
|
174
|
-
},
|
175
|
-
"default": "null",
|
176
|
-
"description": "Aria-label attribute to be set for accessibility",
|
177
|
-
"fieldName": "ariaLabel"
|
178
|
-
},
|
179
|
-
{
|
180
|
-
"name": "aria-labelledby",
|
181
|
-
"type": {
|
182
|
-
"text": "string | null"
|
183
|
-
},
|
184
|
-
"default": "null",
|
185
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
186
|
-
"fieldName": "ariaLabelledBy"
|
187
|
-
}
|
188
|
-
],
|
189
|
-
"superclass": {
|
190
|
-
"name": "Component",
|
191
|
-
"module": "/src/models"
|
192
|
-
},
|
193
|
-
"tagName": "mdc-animation",
|
194
|
-
"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 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 */",
|
195
|
-
"customElement": true
|
196
|
-
}
|
197
|
-
],
|
198
|
-
"exports": [
|
199
|
-
{
|
200
|
-
"kind": "js",
|
201
|
-
"name": "default",
|
202
|
-
"declaration": {
|
203
|
-
"name": "Animation",
|
204
|
-
"module": "components/animation/animation.component.js"
|
205
|
-
}
|
206
|
-
}
|
207
|
-
]
|
208
|
-
},
|
209
|
-
{
|
210
|
-
"kind": "javascript-module",
|
211
|
-
"path": "components/appheader/appheader.component.js",
|
212
|
-
"declarations": [
|
213
|
-
{
|
214
|
-
"kind": "class",
|
215
|
-
"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**.",
|
216
|
-
"name": "Appheader",
|
217
|
-
"cssParts": [
|
218
|
-
{
|
219
|
-
"description": "The main container for styling the header.",
|
220
|
-
"name": "container"
|
221
|
-
},
|
222
|
-
{
|
223
|
-
"description": "The leading section of the header.",
|
224
|
-
"name": "leading-section"
|
225
|
-
},
|
226
|
-
{
|
227
|
-
"description": "The center section of the header.",
|
228
|
-
"name": "center-section"
|
229
|
-
},
|
230
|
-
{
|
231
|
-
"description": "The trailing section of the header.",
|
232
|
-
"name": "trailing-section"
|
233
|
-
}
|
234
|
-
],
|
235
|
-
"slots": [
|
236
|
-
{
|
237
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
238
|
-
"name": "leading"
|
239
|
-
},
|
240
|
-
{
|
241
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
242
|
-
"name": "center"
|
243
|
-
},
|
244
|
-
{
|
245
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
246
|
-
"name": "trailing"
|
247
|
-
}
|
248
|
-
],
|
249
|
-
"members": [],
|
250
|
-
"superclass": {
|
251
|
-
"name": "Component",
|
252
|
-
"module": "/src/models"
|
253
|
-
},
|
254
|
-
"tagName": "mdc-appheader",
|
255
|
-
"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 */",
|
256
|
-
"customElement": true
|
257
|
-
}
|
258
|
-
],
|
259
|
-
"exports": [
|
260
|
-
{
|
261
|
-
"kind": "js",
|
262
|
-
"name": "default",
|
263
|
-
"declaration": {
|
264
|
-
"name": "Appheader",
|
265
|
-
"module": "components/appheader/appheader.component.js"
|
266
|
-
}
|
267
|
-
}
|
268
|
-
]
|
269
|
-
},
|
270
|
-
{
|
271
|
-
"kind": "javascript-module",
|
272
|
-
"path": "components/alertchip/alertchip.component.js",
|
273
|
-
"declarations": [
|
274
|
-
{
|
275
|
-
"kind": "class",
|
276
|
-
"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.",
|
277
|
-
"name": "AlertChip",
|
278
|
-
"cssProperties": [
|
279
|
-
{
|
280
|
-
"description": "The color of the label text",
|
281
|
-
"name": "--mdc-chip-color"
|
282
|
-
},
|
283
|
-
{
|
284
|
-
"description": "The color of the icon",
|
285
|
-
"name": "--mdc-chip-icon-color"
|
268
|
+
"kind": "method",
|
269
|
+
"name": "handleBlur",
|
270
|
+
"privacy": "private",
|
271
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
272
|
+
"inheritedFrom": {
|
273
|
+
"name": "Buttonsimple",
|
274
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
275
|
+
}
|
286
276
|
},
|
287
277
|
{
|
288
|
-
"
|
289
|
-
"name": "
|
278
|
+
"kind": "method",
|
279
|
+
"name": "handleKeyDown",
|
280
|
+
"privacy": "private",
|
281
|
+
"parameters": [
|
282
|
+
{
|
283
|
+
"name": "event",
|
284
|
+
"type": {
|
285
|
+
"text": "KeyboardEvent"
|
286
|
+
},
|
287
|
+
"description": "The keyboard event."
|
288
|
+
}
|
289
|
+
],
|
290
|
+
"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.",
|
291
|
+
"inheritedFrom": {
|
292
|
+
"name": "Buttonsimple",
|
293
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
294
|
+
}
|
290
295
|
},
|
291
296
|
{
|
292
|
-
"
|
293
|
-
"name": "
|
297
|
+
"kind": "method",
|
298
|
+
"name": "handleKeyUp",
|
299
|
+
"privacy": "private",
|
300
|
+
"parameters": [
|
301
|
+
{
|
302
|
+
"name": "event",
|
303
|
+
"type": {
|
304
|
+
"text": "KeyboardEvent"
|
305
|
+
},
|
306
|
+
"description": "The keyboard event."
|
307
|
+
}
|
308
|
+
],
|
309
|
+
"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.",
|
310
|
+
"inheritedFrom": {
|
311
|
+
"name": "Buttonsimple",
|
312
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
313
|
+
}
|
294
314
|
}
|
295
315
|
],
|
296
|
-
"
|
316
|
+
"attributes": [
|
297
317
|
{
|
298
|
-
"kind": "field",
|
299
318
|
"name": "variant",
|
300
319
|
"type": {
|
301
320
|
"text": "VariantType"
|
302
321
|
},
|
303
322
|
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
304
323
|
"default": "neutral",
|
305
|
-
"
|
324
|
+
"fieldName": "variant"
|
306
325
|
},
|
307
326
|
{
|
308
|
-
"kind": "field",
|
309
327
|
"name": "label",
|
310
328
|
"type": {
|
311
329
|
"text": "string"
|
312
330
|
},
|
313
331
|
"default": "''",
|
314
332
|
"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.",
|
315
|
-
"
|
333
|
+
"fieldName": "label"
|
316
334
|
},
|
317
335
|
{
|
318
|
-
"kind": "field",
|
319
336
|
"name": "tabIndex",
|
320
337
|
"type": {
|
321
338
|
"text": "number"
|
322
339
|
},
|
323
340
|
"default": "0",
|
324
341
|
"description": "This property specifies the tab order of the element.",
|
325
|
-
"
|
326
|
-
"reflects": true,
|
342
|
+
"fieldName": "tabIndex",
|
327
343
|
"inheritedFrom": {
|
328
344
|
"name": "TabIndexMixin",
|
329
|
-
"module": "utils/mixins/TabIndexMixin.
|
345
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
330
346
|
}
|
331
347
|
},
|
332
348
|
{
|
333
|
-
"kind": "field",
|
334
349
|
"name": "disabled",
|
335
350
|
"type": {
|
336
351
|
"text": "boolean | undefined"
|
337
352
|
},
|
338
353
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
339
354
|
"default": "undefined",
|
340
|
-
"
|
341
|
-
"reflects": true,
|
355
|
+
"fieldName": "disabled",
|
342
356
|
"inheritedFrom": {
|
343
357
|
"name": "DisabledMixin",
|
344
|
-
"module": "utils/mixins/DisabledMixin.
|
358
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
345
359
|
}
|
346
360
|
},
|
347
361
|
{
|
348
|
-
"kind": "field",
|
349
362
|
"name": "active",
|
350
363
|
"type": {
|
351
364
|
"text": "boolean | undefined"
|
352
365
|
},
|
353
366
|
"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.",
|
354
367
|
"default": "undefined",
|
355
|
-
"
|
356
|
-
"reflects": true,
|
368
|
+
"fieldName": "active",
|
357
369
|
"inheritedFrom": {
|
358
370
|
"name": "Buttonsimple",
|
359
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
371
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
360
372
|
}
|
361
373
|
},
|
362
374
|
{
|
363
|
-
"
|
364
|
-
"name": "softDisabled",
|
375
|
+
"name": "soft-disabled",
|
365
376
|
"type": {
|
366
377
|
"text": "boolean | undefined"
|
367
378
|
},
|
368
379
|
"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.",
|
369
380
|
"default": "undefined",
|
370
|
-
"
|
371
|
-
"reflects": true,
|
381
|
+
"fieldName": "softDisabled",
|
372
382
|
"inheritedFrom": {
|
373
383
|
"name": "Buttonsimple",
|
374
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
384
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
375
385
|
}
|
376
386
|
},
|
377
387
|
{
|
378
|
-
"kind": "field",
|
379
388
|
"name": "size",
|
380
389
|
"type": {
|
381
390
|
"text": "ButtonSize"
|
382
391
|
},
|
383
392
|
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
384
393
|
"default": "32",
|
385
|
-
"
|
386
|
-
"reflects": true,
|
394
|
+
"fieldName": "size",
|
387
395
|
"inheritedFrom": {
|
388
396
|
"name": "Buttonsimple",
|
389
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
397
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
390
398
|
}
|
391
399
|
},
|
392
400
|
{
|
393
|
-
"kind": "field",
|
394
401
|
"name": "role",
|
395
402
|
"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.",
|
396
403
|
"default": "button",
|
397
|
-
"
|
398
|
-
"reflects": true,
|
404
|
+
"fieldName": "role",
|
399
405
|
"inheritedFrom": {
|
400
406
|
"name": "Buttonsimple",
|
401
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
407
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
402
408
|
}
|
403
409
|
},
|
404
410
|
{
|
405
|
-
"kind": "field",
|
406
411
|
"name": "ariaStateKey",
|
407
412
|
"type": {
|
408
413
|
"text": "string | undefined"
|
409
414
|
},
|
410
415
|
"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`",
|
411
416
|
"default": "'aria-pressed' (when)",
|
412
|
-
"
|
413
|
-
"reflects": true,
|
417
|
+
"fieldName": "ariaStateKey",
|
414
418
|
"inheritedFrom": {
|
415
419
|
"name": "Buttonsimple",
|
416
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
420
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
417
421
|
}
|
418
422
|
},
|
419
423
|
{
|
420
|
-
"kind": "field",
|
421
424
|
"name": "type",
|
422
425
|
"type": {
|
423
426
|
"text": "ButtonType"
|
424
427
|
},
|
425
428
|
"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.",
|
426
429
|
"default": "button",
|
427
|
-
"
|
428
|
-
"reflects": true,
|
429
|
-
"inheritedFrom": {
|
430
|
-
"name": "Buttonsimple",
|
431
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
432
|
-
}
|
433
|
-
},
|
434
|
-
{
|
435
|
-
"kind": "method",
|
436
|
-
"name": "executeAction",
|
437
|
-
"privacy": "protected",
|
430
|
+
"fieldName": "type",
|
438
431
|
"inheritedFrom": {
|
439
432
|
"name": "Buttonsimple",
|
440
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
433
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
441
434
|
}
|
442
|
-
}
|
435
|
+
}
|
436
|
+
],
|
437
|
+
"superclass": {
|
438
|
+
"name": "Buttonsimple",
|
439
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
440
|
+
},
|
441
|
+
"tagName": "mdc-alertchip",
|
442
|
+
"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 */",
|
443
|
+
"customElement": true,
|
444
|
+
"events": [
|
443
445
|
{
|
444
|
-
"
|
445
|
-
"name": "
|
446
|
-
"
|
447
|
-
"parameters": [
|
448
|
-
{
|
449
|
-
"name": "element",
|
450
|
-
"type": {
|
451
|
-
"text": "HTMLElement"
|
452
|
-
},
|
453
|
-
"description": "The button element"
|
454
|
-
},
|
455
|
-
{
|
456
|
-
"name": "active",
|
457
|
-
"optional": true,
|
458
|
-
"type": {
|
459
|
-
"text": "boolean"
|
460
|
-
},
|
461
|
-
"description": "The active state of the element"
|
462
|
-
}
|
463
|
-
],
|
464
|
-
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
446
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
447
|
+
"name": "click",
|
448
|
+
"reactName": "onClick",
|
465
449
|
"inheritedFrom": {
|
466
450
|
"name": "Buttonsimple",
|
467
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
451
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
468
452
|
}
|
469
453
|
},
|
470
454
|
{
|
471
|
-
"
|
472
|
-
"name": "
|
473
|
-
"
|
474
|
-
"parameters": [
|
475
|
-
{
|
476
|
-
"name": "element",
|
477
|
-
"type": {
|
478
|
-
"text": "HTMLElement"
|
479
|
-
},
|
480
|
-
"description": "The button element."
|
481
|
-
},
|
482
|
-
{
|
483
|
-
"name": "softDisabled",
|
484
|
-
"optional": true,
|
485
|
-
"type": {
|
486
|
-
"text": "boolean"
|
487
|
-
},
|
488
|
-
"description": "The soft-disabled state."
|
489
|
-
}
|
490
|
-
],
|
491
|
-
"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.",
|
455
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
456
|
+
"name": "keydown",
|
457
|
+
"reactName": "onKeyDown",
|
492
458
|
"inheritedFrom": {
|
493
459
|
"name": "Buttonsimple",
|
494
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
460
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
495
461
|
}
|
496
462
|
},
|
497
463
|
{
|
498
|
-
"
|
499
|
-
"name": "
|
500
|
-
"
|
501
|
-
"parameters": [
|
502
|
-
{
|
503
|
-
"name": "element",
|
504
|
-
"type": {
|
505
|
-
"text": "HTMLElement"
|
506
|
-
},
|
507
|
-
"description": "The button element."
|
508
|
-
},
|
509
|
-
{
|
510
|
-
"name": "disabled",
|
511
|
-
"type": {
|
512
|
-
"text": "boolean"
|
513
|
-
},
|
514
|
-
"description": "The disabled state."
|
515
|
-
}
|
516
|
-
],
|
517
|
-
"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.",
|
464
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
465
|
+
"name": "keyup",
|
466
|
+
"reactName": "onKeyUp",
|
518
467
|
"inheritedFrom": {
|
519
468
|
"name": "Buttonsimple",
|
520
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
469
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
521
470
|
}
|
522
471
|
},
|
523
472
|
{
|
524
|
-
"
|
525
|
-
"name": "
|
526
|
-
"
|
473
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
474
|
+
"name": "focus",
|
475
|
+
"reactName": "onFocus",
|
527
476
|
"inheritedFrom": {
|
528
477
|
"name": "Buttonsimple",
|
529
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
478
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
530
479
|
}
|
480
|
+
}
|
481
|
+
]
|
482
|
+
}
|
483
|
+
],
|
484
|
+
"exports": [
|
485
|
+
{
|
486
|
+
"kind": "js",
|
487
|
+
"name": "default",
|
488
|
+
"declaration": {
|
489
|
+
"name": "AlertChip",
|
490
|
+
"module": "components/alertchip/alertchip.component.js"
|
491
|
+
}
|
492
|
+
}
|
493
|
+
]
|
494
|
+
},
|
495
|
+
{
|
496
|
+
"kind": "javascript-module",
|
497
|
+
"path": "components/animation/animation.component.js",
|
498
|
+
"declarations": [
|
499
|
+
{
|
500
|
+
"kind": "class",
|
501
|
+
"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.",
|
502
|
+
"name": "Animation",
|
503
|
+
"members": [
|
504
|
+
{
|
505
|
+
"kind": "field",
|
506
|
+
"name": "name",
|
507
|
+
"type": {
|
508
|
+
"text": "AnimationNames | undefined"
|
509
|
+
},
|
510
|
+
"description": "Name of the animation (= filename)",
|
511
|
+
"attribute": "name",
|
512
|
+
"reflects": true
|
531
513
|
},
|
532
514
|
{
|
533
|
-
"kind": "
|
534
|
-
"name": "
|
515
|
+
"kind": "field",
|
516
|
+
"name": "loop",
|
517
|
+
"type": {
|
518
|
+
"text": "LoopType | undefined"
|
519
|
+
},
|
520
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
521
|
+
"attribute": "loop",
|
522
|
+
"reflects": true
|
523
|
+
},
|
524
|
+
{
|
525
|
+
"kind": "field",
|
526
|
+
"name": "autoplay",
|
527
|
+
"type": {
|
528
|
+
"text": "boolean | undefined"
|
529
|
+
},
|
530
|
+
"description": "Weather start the animation automatically",
|
531
|
+
"attribute": "autoplay",
|
532
|
+
"reflects": true
|
533
|
+
},
|
534
|
+
{
|
535
|
+
"kind": "field",
|
536
|
+
"name": "ariaLabel",
|
537
|
+
"type": {
|
538
|
+
"text": "string | null"
|
539
|
+
},
|
540
|
+
"default": "null",
|
541
|
+
"description": "Aria-label attribute to be set for accessibility",
|
542
|
+
"attribute": "aria-label"
|
543
|
+
},
|
544
|
+
{
|
545
|
+
"kind": "field",
|
546
|
+
"name": "ariaLabelledBy",
|
547
|
+
"type": {
|
548
|
+
"text": "string | null"
|
549
|
+
},
|
550
|
+
"default": "null",
|
551
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
552
|
+
"attribute": "aria-labelledby"
|
553
|
+
},
|
554
|
+
{
|
555
|
+
"kind": "field",
|
556
|
+
"name": "lottieInstance",
|
557
|
+
"type": {
|
558
|
+
"text": "AnimationItem | undefined"
|
559
|
+
},
|
535
560
|
"privacy": "private",
|
536
|
-
"description": "
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
561
|
+
"description": "Lottie animation instance"
|
562
|
+
},
|
563
|
+
{
|
564
|
+
"kind": "field",
|
565
|
+
"name": "containerRef",
|
566
|
+
"type": {
|
567
|
+
"text": "Ref<HTMLDivElement>"
|
568
|
+
},
|
569
|
+
"privacy": "private",
|
570
|
+
"description": "Container for the animation"
|
571
|
+
},
|
572
|
+
{
|
573
|
+
"kind": "field",
|
574
|
+
"name": "animation",
|
575
|
+
"description": "Exposed API of the animation library (lottie)",
|
576
|
+
"readonly": true
|
541
577
|
},
|
542
578
|
{
|
543
579
|
"kind": "method",
|
544
|
-
"name": "
|
580
|
+
"name": "getLoopValue",
|
581
|
+
"privacy": "private"
|
582
|
+
},
|
583
|
+
{
|
584
|
+
"kind": "method",
|
585
|
+
"name": "onLoadSuccessHandler",
|
545
586
|
"privacy": "private",
|
546
587
|
"parameters": [
|
547
588
|
{
|
548
|
-
"name": "
|
589
|
+
"name": "animationData",
|
549
590
|
"type": {
|
550
|
-
"text": "
|
551
|
-
}
|
552
|
-
"description": "The keyboard event."
|
591
|
+
"text": "any"
|
592
|
+
}
|
553
593
|
}
|
554
594
|
],
|
555
|
-
"description": "
|
556
|
-
"inheritedFrom": {
|
557
|
-
"name": "Buttonsimple",
|
558
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
559
|
-
}
|
595
|
+
"description": "Create new lotty instance for the loaded data"
|
560
596
|
},
|
561
597
|
{
|
562
598
|
"kind": "method",
|
563
|
-
"name": "
|
599
|
+
"name": "onLoadFailHandler",
|
564
600
|
"privacy": "private",
|
565
601
|
"parameters": [
|
566
602
|
{
|
567
|
-
"name": "
|
603
|
+
"name": "error",
|
568
604
|
"type": {
|
569
|
-
"text": "
|
570
|
-
}
|
571
|
-
"description": "The keyboard event."
|
605
|
+
"text": "Error"
|
606
|
+
}
|
572
607
|
}
|
573
608
|
],
|
574
|
-
"description": "
|
575
|
-
|
576
|
-
|
577
|
-
|
578
|
-
|
609
|
+
"description": "Error handler for animation loading"
|
610
|
+
},
|
611
|
+
{
|
612
|
+
"kind": "method",
|
613
|
+
"name": "getAnimationData",
|
614
|
+
"privacy": "private",
|
615
|
+
"description": "Import animation data dynamically"
|
616
|
+
},
|
617
|
+
{
|
618
|
+
"kind": "field",
|
619
|
+
"name": "onCompleteHandler",
|
620
|
+
"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."
|
579
621
|
}
|
580
622
|
],
|
581
|
-
"
|
623
|
+
"events": [
|
582
624
|
{
|
583
|
-
"name": "
|
625
|
+
"name": "load",
|
584
626
|
"type": {
|
585
|
-
"text": "
|
627
|
+
"text": "CustomEvent"
|
586
628
|
},
|
587
|
-
"description": "
|
588
|
-
"
|
589
|
-
"fieldName": "variant"
|
629
|
+
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
630
|
+
"reactName": "onLoad"
|
590
631
|
},
|
591
632
|
{
|
592
|
-
"
|
593
|
-
"
|
594
|
-
|
595
|
-
},
|
596
|
-
"default": "''",
|
597
|
-
"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.",
|
598
|
-
"fieldName": "label"
|
633
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
634
|
+
"name": "complete",
|
635
|
+
"reactName": "onComplete"
|
599
636
|
},
|
600
637
|
{
|
601
|
-
"
|
602
|
-
"
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
"fieldName": "tabIndex",
|
608
|
-
"inheritedFrom": {
|
609
|
-
"name": "TabIndexMixin",
|
610
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
611
|
-
}
|
612
|
-
},
|
638
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
639
|
+
"name": "error",
|
640
|
+
"reactName": "onError"
|
641
|
+
}
|
642
|
+
],
|
643
|
+
"attributes": [
|
613
644
|
{
|
614
|
-
"name": "
|
645
|
+
"name": "name",
|
615
646
|
"type": {
|
616
|
-
"text": "
|
647
|
+
"text": "AnimationNames | undefined"
|
617
648
|
},
|
618
|
-
"description": "
|
619
|
-
"
|
620
|
-
"fieldName": "disabled",
|
621
|
-
"inheritedFrom": {
|
622
|
-
"name": "DisabledMixin",
|
623
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
624
|
-
}
|
649
|
+
"description": "Name of the animation (= filename)",
|
650
|
+
"fieldName": "name"
|
625
651
|
},
|
626
652
|
{
|
627
|
-
"name": "
|
653
|
+
"name": "loop",
|
628
654
|
"type": {
|
629
|
-
"text": "
|
655
|
+
"text": "LoopType | undefined"
|
630
656
|
},
|
631
|
-
"description": "
|
632
|
-
"
|
633
|
-
"fieldName": "active",
|
634
|
-
"inheritedFrom": {
|
635
|
-
"name": "Buttonsimple",
|
636
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
637
|
-
}
|
657
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
658
|
+
"fieldName": "loop"
|
638
659
|
},
|
639
660
|
{
|
640
|
-
"name": "
|
661
|
+
"name": "autoplay",
|
641
662
|
"type": {
|
642
663
|
"text": "boolean | undefined"
|
643
664
|
},
|
644
|
-
"description": "
|
645
|
-
"
|
646
|
-
"fieldName": "softDisabled",
|
647
|
-
"inheritedFrom": {
|
648
|
-
"name": "Buttonsimple",
|
649
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
650
|
-
}
|
651
|
-
},
|
652
|
-
{
|
653
|
-
"name": "size",
|
654
|
-
"type": {
|
655
|
-
"text": "ButtonSize"
|
656
|
-
},
|
657
|
-
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
658
|
-
"default": "32",
|
659
|
-
"fieldName": "size",
|
660
|
-
"inheritedFrom": {
|
661
|
-
"name": "Buttonsimple",
|
662
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
663
|
-
}
|
664
|
-
},
|
665
|
-
{
|
666
|
-
"name": "role",
|
667
|
-
"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.",
|
668
|
-
"default": "button",
|
669
|
-
"fieldName": "role",
|
670
|
-
"inheritedFrom": {
|
671
|
-
"name": "Buttonsimple",
|
672
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
673
|
-
}
|
665
|
+
"description": "Weather start the animation automatically",
|
666
|
+
"fieldName": "autoplay"
|
674
667
|
},
|
675
668
|
{
|
676
|
-
"name": "
|
669
|
+
"name": "aria-label",
|
677
670
|
"type": {
|
678
|
-
"text": "string |
|
671
|
+
"text": "string | null"
|
679
672
|
},
|
680
|
-
"
|
681
|
-
"
|
682
|
-
"fieldName": "
|
683
|
-
"inheritedFrom": {
|
684
|
-
"name": "Buttonsimple",
|
685
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
686
|
-
}
|
673
|
+
"default": "null",
|
674
|
+
"description": "Aria-label attribute to be set for accessibility",
|
675
|
+
"fieldName": "ariaLabel"
|
687
676
|
},
|
688
677
|
{
|
689
|
-
"name": "
|
678
|
+
"name": "aria-labelledby",
|
690
679
|
"type": {
|
691
|
-
"text": "
|
680
|
+
"text": "string | null"
|
692
681
|
},
|
693
|
-
"
|
694
|
-
"
|
695
|
-
"fieldName": "
|
696
|
-
"inheritedFrom": {
|
697
|
-
"name": "Buttonsimple",
|
698
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
699
|
-
}
|
682
|
+
"default": "null",
|
683
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
684
|
+
"fieldName": "ariaLabelledBy"
|
700
685
|
}
|
701
686
|
],
|
702
687
|
"superclass": {
|
703
|
-
"name": "
|
704
|
-
"module": "/src/
|
688
|
+
"name": "Component",
|
689
|
+
"module": "/src/models"
|
705
690
|
},
|
706
|
-
"tagName": "mdc-
|
707
|
-
"jsDoc": "/**\n * mdc-
|
708
|
-
"customElement": true
|
709
|
-
|
691
|
+
"tagName": "mdc-animation",
|
692
|
+
"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 */",
|
693
|
+
"customElement": true
|
694
|
+
}
|
695
|
+
],
|
696
|
+
"exports": [
|
697
|
+
{
|
698
|
+
"kind": "js",
|
699
|
+
"name": "default",
|
700
|
+
"declaration": {
|
701
|
+
"name": "Animation",
|
702
|
+
"module": "components/animation/animation.component.js"
|
703
|
+
}
|
704
|
+
}
|
705
|
+
]
|
706
|
+
},
|
707
|
+
{
|
708
|
+
"kind": "javascript-module",
|
709
|
+
"path": "components/appheader/appheader.component.js",
|
710
|
+
"declarations": [
|
711
|
+
{
|
712
|
+
"kind": "class",
|
713
|
+
"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**.",
|
714
|
+
"name": "Appheader",
|
715
|
+
"cssParts": [
|
710
716
|
{
|
711
|
-
"description": "
|
712
|
-
"name": "
|
713
|
-
|
714
|
-
|
715
|
-
|
716
|
-
|
717
|
-
|
717
|
+
"description": "The main container for styling the header.",
|
718
|
+
"name": "container"
|
719
|
+
},
|
720
|
+
{
|
721
|
+
"description": "The leading section of the header.",
|
722
|
+
"name": "leading-section"
|
723
|
+
},
|
724
|
+
{
|
725
|
+
"description": "The center section of the header.",
|
726
|
+
"name": "center-section"
|
718
727
|
},
|
719
728
|
{
|
720
|
-
"description": "
|
721
|
-
"name": "
|
722
|
-
|
723
|
-
|
724
|
-
|
725
|
-
|
726
|
-
|
729
|
+
"description": "The trailing section of the header.",
|
730
|
+
"name": "trailing-section"
|
731
|
+
}
|
732
|
+
],
|
733
|
+
"slots": [
|
734
|
+
{
|
735
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
736
|
+
"name": "leading"
|
727
737
|
},
|
728
738
|
{
|
729
|
-
"description": "
|
730
|
-
"name": "
|
731
|
-
"reactName": "onKeyUp",
|
732
|
-
"inheritedFrom": {
|
733
|
-
"name": "Buttonsimple",
|
734
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
735
|
-
}
|
739
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
740
|
+
"name": "center"
|
736
741
|
},
|
737
742
|
{
|
738
|
-
"description": "
|
739
|
-
"name": "
|
740
|
-
"reactName": "onFocus",
|
741
|
-
"inheritedFrom": {
|
742
|
-
"name": "Buttonsimple",
|
743
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
744
|
-
}
|
743
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
744
|
+
"name": "trailing"
|
745
745
|
}
|
746
|
-
]
|
746
|
+
],
|
747
|
+
"members": [],
|
748
|
+
"superclass": {
|
749
|
+
"name": "Component",
|
750
|
+
"module": "/src/models"
|
751
|
+
},
|
752
|
+
"tagName": "mdc-appheader",
|
753
|
+
"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 */",
|
754
|
+
"customElement": true
|
747
755
|
}
|
748
756
|
],
|
749
757
|
"exports": [
|
@@ -751,8 +759,8 @@
|
|
751
759
|
"kind": "js",
|
752
760
|
"name": "default",
|
753
761
|
"declaration": {
|
754
|
-
"name": "
|
755
|
-
"module": "components/
|
762
|
+
"name": "Appheader",
|
763
|
+
"module": "components/appheader/appheader.component.js"
|
756
764
|
}
|
757
765
|
}
|
758
766
|
]
|
@@ -12579,27 +12587,226 @@
|
|
12579
12587
|
"module": "/src/utils/mixins/FormInternalsMixin"
|
12580
12588
|
},
|
12581
12589
|
{
|
12582
|
-
"name": "DataAriaLabelMixin",
|
12583
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
12590
|
+
"name": "DataAriaLabelMixin",
|
12591
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
12592
|
+
}
|
12593
|
+
],
|
12594
|
+
"superclass": {
|
12595
|
+
"name": "FormfieldWrapper",
|
12596
|
+
"module": "/src/components/formfieldwrapper"
|
12597
|
+
},
|
12598
|
+
"tagName": "mdc-input",
|
12599
|
+
"jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n * It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled\n * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled\n * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered\n * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused\n * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused\n * @cssproperty --mdc-input-error-border-color - Border color for the input container when error\n * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning\n * @cssproperty --mdc-input-success-border-color - Border color for the input container when success\n * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary\n *\n */",
|
12600
|
+
"customElement": true,
|
12601
|
+
"slots": [
|
12602
|
+
{
|
12603
|
+
"description": "slot to add the label info icon",
|
12604
|
+
"name": "label-info",
|
12605
|
+
"inheritedFrom": {
|
12606
|
+
"name": "FormfieldWrapper",
|
12607
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
12608
|
+
}
|
12609
|
+
}
|
12610
|
+
]
|
12611
|
+
}
|
12612
|
+
],
|
12613
|
+
"exports": [
|
12614
|
+
{
|
12615
|
+
"kind": "js",
|
12616
|
+
"name": "default",
|
12617
|
+
"declaration": {
|
12618
|
+
"name": "Input",
|
12619
|
+
"module": "components/input/input.component.js"
|
12620
|
+
}
|
12621
|
+
}
|
12622
|
+
]
|
12623
|
+
},
|
12624
|
+
{
|
12625
|
+
"kind": "javascript-module",
|
12626
|
+
"path": "components/inputchip/inputchip.component.js",
|
12627
|
+
"declarations": [
|
12628
|
+
{
|
12629
|
+
"kind": "class",
|
12630
|
+
"description": "mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n\n- It supports a leading icon along with label.\n- It supports an error state for validation.\n- It supports a close button to remove the chip.",
|
12631
|
+
"name": "InputChip",
|
12632
|
+
"cssProperties": [
|
12633
|
+
{
|
12634
|
+
"description": "The color of the chip.",
|
12635
|
+
"name": "--mdc-chip-color"
|
12636
|
+
},
|
12637
|
+
{
|
12638
|
+
"description": "The border color of the chip.",
|
12639
|
+
"name": "--mdc-chip-border-color"
|
12640
|
+
},
|
12641
|
+
{
|
12642
|
+
"description": "The background color of the chip.",
|
12643
|
+
"name": "--mdc-chip-background-color"
|
12644
|
+
}
|
12645
|
+
],
|
12646
|
+
"members": [
|
12647
|
+
{
|
12648
|
+
"kind": "field",
|
12649
|
+
"name": "label",
|
12650
|
+
"type": {
|
12651
|
+
"text": "string"
|
12652
|
+
},
|
12653
|
+
"default": "''",
|
12654
|
+
"description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
12655
|
+
"attribute": "label"
|
12656
|
+
},
|
12657
|
+
{
|
12658
|
+
"kind": "field",
|
12659
|
+
"name": "error",
|
12660
|
+
"type": {
|
12661
|
+
"text": "boolean"
|
12662
|
+
},
|
12663
|
+
"default": "false",
|
12664
|
+
"description": "The error state of the inputchip.",
|
12665
|
+
"attribute": "error"
|
12666
|
+
},
|
12667
|
+
{
|
12668
|
+
"kind": "field",
|
12669
|
+
"name": "clearAriaLabel",
|
12670
|
+
"type": {
|
12671
|
+
"text": "string"
|
12672
|
+
},
|
12673
|
+
"default": "''",
|
12674
|
+
"description": "The aria-label of the close button.",
|
12675
|
+
"attribute": "clear-aria-label"
|
12676
|
+
},
|
12677
|
+
{
|
12678
|
+
"kind": "method",
|
12679
|
+
"name": "renderIcon",
|
12680
|
+
"privacy": "private",
|
12681
|
+
"description": "Renders the icon element if available.",
|
12682
|
+
"return": {
|
12683
|
+
"type": {
|
12684
|
+
"text": ""
|
12685
|
+
}
|
12686
|
+
}
|
12687
|
+
},
|
12688
|
+
{
|
12689
|
+
"kind": "method",
|
12690
|
+
"name": "handleClose",
|
12691
|
+
"privacy": "private",
|
12692
|
+
"description": "Handles the behavior of the close button on click event.",
|
12693
|
+
"parameters": [
|
12694
|
+
{
|
12695
|
+
"description": "The event object.",
|
12696
|
+
"name": "event"
|
12697
|
+
}
|
12698
|
+
]
|
12699
|
+
},
|
12700
|
+
{
|
12701
|
+
"kind": "field",
|
12702
|
+
"name": "iconName",
|
12703
|
+
"type": {
|
12704
|
+
"text": "IconNames | undefined"
|
12705
|
+
},
|
12706
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
12707
|
+
"attribute": "icon-name",
|
12708
|
+
"inheritedFrom": {
|
12709
|
+
"name": "IconNameMixin",
|
12710
|
+
"module": "utils/mixins/IconNameMixin.js"
|
12711
|
+
}
|
12712
|
+
},
|
12713
|
+
{
|
12714
|
+
"kind": "field",
|
12715
|
+
"name": "disabled",
|
12716
|
+
"type": {
|
12717
|
+
"text": "boolean | undefined"
|
12718
|
+
},
|
12719
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
12720
|
+
"default": "undefined",
|
12721
|
+
"attribute": "disabled",
|
12722
|
+
"reflects": true,
|
12723
|
+
"inheritedFrom": {
|
12724
|
+
"name": "DisabledMixin",
|
12725
|
+
"module": "utils/mixins/DisabledMixin.js"
|
12726
|
+
}
|
12727
|
+
}
|
12728
|
+
],
|
12729
|
+
"events": [
|
12730
|
+
{
|
12731
|
+
"name": "remove",
|
12732
|
+
"type": {
|
12733
|
+
"text": "CustomEvent"
|
12734
|
+
},
|
12735
|
+
"description": "This event is dispatched when the close button is activated. It bubbles and is composed.",
|
12736
|
+
"reactName": "onRemove"
|
12737
|
+
}
|
12738
|
+
],
|
12739
|
+
"attributes": [
|
12740
|
+
{
|
12741
|
+
"name": "label",
|
12742
|
+
"type": {
|
12743
|
+
"text": "string"
|
12744
|
+
},
|
12745
|
+
"default": "''",
|
12746
|
+
"description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
12747
|
+
"fieldName": "label"
|
12748
|
+
},
|
12749
|
+
{
|
12750
|
+
"name": "error",
|
12751
|
+
"type": {
|
12752
|
+
"text": "boolean"
|
12753
|
+
},
|
12754
|
+
"default": "false",
|
12755
|
+
"description": "The error state of the inputchip.",
|
12756
|
+
"fieldName": "error"
|
12757
|
+
},
|
12758
|
+
{
|
12759
|
+
"name": "clear-aria-label",
|
12760
|
+
"type": {
|
12761
|
+
"text": "string"
|
12762
|
+
},
|
12763
|
+
"default": "''",
|
12764
|
+
"description": "The aria-label of the close button.",
|
12765
|
+
"fieldName": "clearAriaLabel"
|
12766
|
+
},
|
12767
|
+
{
|
12768
|
+
"name": "icon-name",
|
12769
|
+
"type": {
|
12770
|
+
"text": "IconNames | undefined"
|
12771
|
+
},
|
12772
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
12773
|
+
"fieldName": "iconName",
|
12774
|
+
"inheritedFrom": {
|
12775
|
+
"name": "IconNameMixin",
|
12776
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
12777
|
+
}
|
12778
|
+
},
|
12779
|
+
{
|
12780
|
+
"name": "disabled",
|
12781
|
+
"type": {
|
12782
|
+
"text": "boolean | undefined"
|
12783
|
+
},
|
12784
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
12785
|
+
"default": "undefined",
|
12786
|
+
"fieldName": "disabled",
|
12787
|
+
"inheritedFrom": {
|
12788
|
+
"name": "DisabledMixin",
|
12789
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
12790
|
+
}
|
12791
|
+
}
|
12792
|
+
],
|
12793
|
+
"mixins": [
|
12794
|
+
{
|
12795
|
+
"name": "IconNameMixin",
|
12796
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
12797
|
+
},
|
12798
|
+
{
|
12799
|
+
"name": "DisabledMixin",
|
12800
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
12584
12801
|
}
|
12585
12802
|
],
|
12586
12803
|
"superclass": {
|
12587
|
-
"name": "
|
12588
|
-
"module": "/src/
|
12804
|
+
"name": "Component",
|
12805
|
+
"module": "/src/models"
|
12589
12806
|
},
|
12590
|
-
"tagName": "mdc-
|
12591
|
-
"jsDoc": "/**\n * mdc-
|
12592
|
-
"customElement": true
|
12593
|
-
"slots": [
|
12594
|
-
{
|
12595
|
-
"description": "slot to add the label info icon",
|
12596
|
-
"name": "label-info",
|
12597
|
-
"inheritedFrom": {
|
12598
|
-
"name": "FormfieldWrapper",
|
12599
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
12600
|
-
}
|
12601
|
-
}
|
12602
|
-
]
|
12807
|
+
"tagName": "mdc-inputchip",
|
12808
|
+
"jsDoc": "/**\n * mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n *\n * - It supports a leading icon along with label.\n * - It supports an error state for validation.\n * - It supports a close button to remove the chip.\n *\n * @tagname mdc-inputchip\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
|
12809
|
+
"customElement": true
|
12603
12810
|
}
|
12604
12811
|
],
|
12605
12812
|
"exports": [
|
@@ -12607,8 +12814,8 @@
|
|
12607
12814
|
"kind": "js",
|
12608
12815
|
"name": "default",
|
12609
12816
|
"declaration": {
|
12610
|
-
"name": "
|
12611
|
-
"module": "components/
|
12817
|
+
"name": "InputChip",
|
12818
|
+
"module": "components/inputchip/inputchip.component.js"
|
12612
12819
|
}
|
12613
12820
|
}
|
12614
12821
|
]
|
@@ -13041,205 +13248,6 @@
|
|
13041
13248
|
}
|
13042
13249
|
]
|
13043
13250
|
},
|
13044
|
-
{
|
13045
|
-
"kind": "javascript-module",
|
13046
|
-
"path": "components/inputchip/inputchip.component.js",
|
13047
|
-
"declarations": [
|
13048
|
-
{
|
13049
|
-
"kind": "class",
|
13050
|
-
"description": "mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n\n- It supports a leading icon along with label.\n- It supports an error state for validation.\n- It supports a close button to remove the chip.",
|
13051
|
-
"name": "InputChip",
|
13052
|
-
"cssProperties": [
|
13053
|
-
{
|
13054
|
-
"description": "The color of the chip.",
|
13055
|
-
"name": "--mdc-chip-color"
|
13056
|
-
},
|
13057
|
-
{
|
13058
|
-
"description": "The border color of the chip.",
|
13059
|
-
"name": "--mdc-chip-border-color"
|
13060
|
-
},
|
13061
|
-
{
|
13062
|
-
"description": "The background color of the chip.",
|
13063
|
-
"name": "--mdc-chip-background-color"
|
13064
|
-
}
|
13065
|
-
],
|
13066
|
-
"members": [
|
13067
|
-
{
|
13068
|
-
"kind": "field",
|
13069
|
-
"name": "label",
|
13070
|
-
"type": {
|
13071
|
-
"text": "string"
|
13072
|
-
},
|
13073
|
-
"default": "''",
|
13074
|
-
"description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
13075
|
-
"attribute": "label"
|
13076
|
-
},
|
13077
|
-
{
|
13078
|
-
"kind": "field",
|
13079
|
-
"name": "error",
|
13080
|
-
"type": {
|
13081
|
-
"text": "boolean"
|
13082
|
-
},
|
13083
|
-
"default": "false",
|
13084
|
-
"description": "The error state of the inputchip.",
|
13085
|
-
"attribute": "error"
|
13086
|
-
},
|
13087
|
-
{
|
13088
|
-
"kind": "field",
|
13089
|
-
"name": "clearAriaLabel",
|
13090
|
-
"type": {
|
13091
|
-
"text": "string"
|
13092
|
-
},
|
13093
|
-
"default": "''",
|
13094
|
-
"description": "The aria-label of the close button.",
|
13095
|
-
"attribute": "clear-aria-label"
|
13096
|
-
},
|
13097
|
-
{
|
13098
|
-
"kind": "method",
|
13099
|
-
"name": "renderIcon",
|
13100
|
-
"privacy": "private",
|
13101
|
-
"description": "Renders the icon element if available.",
|
13102
|
-
"return": {
|
13103
|
-
"type": {
|
13104
|
-
"text": ""
|
13105
|
-
}
|
13106
|
-
}
|
13107
|
-
},
|
13108
|
-
{
|
13109
|
-
"kind": "method",
|
13110
|
-
"name": "handleClose",
|
13111
|
-
"privacy": "private",
|
13112
|
-
"description": "Handles the behavior of the close button on click event.",
|
13113
|
-
"parameters": [
|
13114
|
-
{
|
13115
|
-
"description": "The event object.",
|
13116
|
-
"name": "event"
|
13117
|
-
}
|
13118
|
-
]
|
13119
|
-
},
|
13120
|
-
{
|
13121
|
-
"kind": "field",
|
13122
|
-
"name": "iconName",
|
13123
|
-
"type": {
|
13124
|
-
"text": "IconNames | undefined"
|
13125
|
-
},
|
13126
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
13127
|
-
"attribute": "icon-name",
|
13128
|
-
"inheritedFrom": {
|
13129
|
-
"name": "IconNameMixin",
|
13130
|
-
"module": "utils/mixins/IconNameMixin.js"
|
13131
|
-
}
|
13132
|
-
},
|
13133
|
-
{
|
13134
|
-
"kind": "field",
|
13135
|
-
"name": "disabled",
|
13136
|
-
"type": {
|
13137
|
-
"text": "boolean | undefined"
|
13138
|
-
},
|
13139
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
13140
|
-
"default": "undefined",
|
13141
|
-
"attribute": "disabled",
|
13142
|
-
"reflects": true,
|
13143
|
-
"inheritedFrom": {
|
13144
|
-
"name": "DisabledMixin",
|
13145
|
-
"module": "utils/mixins/DisabledMixin.js"
|
13146
|
-
}
|
13147
|
-
}
|
13148
|
-
],
|
13149
|
-
"events": [
|
13150
|
-
{
|
13151
|
-
"name": "remove",
|
13152
|
-
"type": {
|
13153
|
-
"text": "CustomEvent"
|
13154
|
-
},
|
13155
|
-
"description": "This event is dispatched when the close button is activated. It bubbles and is composed.",
|
13156
|
-
"reactName": "onRemove"
|
13157
|
-
}
|
13158
|
-
],
|
13159
|
-
"attributes": [
|
13160
|
-
{
|
13161
|
-
"name": "label",
|
13162
|
-
"type": {
|
13163
|
-
"text": "string"
|
13164
|
-
},
|
13165
|
-
"default": "''",
|
13166
|
-
"description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
13167
|
-
"fieldName": "label"
|
13168
|
-
},
|
13169
|
-
{
|
13170
|
-
"name": "error",
|
13171
|
-
"type": {
|
13172
|
-
"text": "boolean"
|
13173
|
-
},
|
13174
|
-
"default": "false",
|
13175
|
-
"description": "The error state of the inputchip.",
|
13176
|
-
"fieldName": "error"
|
13177
|
-
},
|
13178
|
-
{
|
13179
|
-
"name": "clear-aria-label",
|
13180
|
-
"type": {
|
13181
|
-
"text": "string"
|
13182
|
-
},
|
13183
|
-
"default": "''",
|
13184
|
-
"description": "The aria-label of the close button.",
|
13185
|
-
"fieldName": "clearAriaLabel"
|
13186
|
-
},
|
13187
|
-
{
|
13188
|
-
"name": "icon-name",
|
13189
|
-
"type": {
|
13190
|
-
"text": "IconNames | undefined"
|
13191
|
-
},
|
13192
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
13193
|
-
"fieldName": "iconName",
|
13194
|
-
"inheritedFrom": {
|
13195
|
-
"name": "IconNameMixin",
|
13196
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
13197
|
-
}
|
13198
|
-
},
|
13199
|
-
{
|
13200
|
-
"name": "disabled",
|
13201
|
-
"type": {
|
13202
|
-
"text": "boolean | undefined"
|
13203
|
-
},
|
13204
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
13205
|
-
"default": "undefined",
|
13206
|
-
"fieldName": "disabled",
|
13207
|
-
"inheritedFrom": {
|
13208
|
-
"name": "DisabledMixin",
|
13209
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
13210
|
-
}
|
13211
|
-
}
|
13212
|
-
],
|
13213
|
-
"mixins": [
|
13214
|
-
{
|
13215
|
-
"name": "IconNameMixin",
|
13216
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
13217
|
-
},
|
13218
|
-
{
|
13219
|
-
"name": "DisabledMixin",
|
13220
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
13221
|
-
}
|
13222
|
-
],
|
13223
|
-
"superclass": {
|
13224
|
-
"name": "Component",
|
13225
|
-
"module": "/src/models"
|
13226
|
-
},
|
13227
|
-
"tagName": "mdc-inputchip",
|
13228
|
-
"jsDoc": "/**\n * mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n *\n * - It supports a leading icon along with label.\n * - It supports an error state for validation.\n * - It supports a close button to remove the chip.\n *\n * @tagname mdc-inputchip\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
|
13229
|
-
"customElement": true
|
13230
|
-
}
|
13231
|
-
],
|
13232
|
-
"exports": [
|
13233
|
-
{
|
13234
|
-
"kind": "js",
|
13235
|
-
"name": "default",
|
13236
|
-
"declaration": {
|
13237
|
-
"name": "InputChip",
|
13238
|
-
"module": "components/inputchip/inputchip.component.js"
|
13239
|
-
}
|
13240
|
-
}
|
13241
|
-
]
|
13242
|
-
},
|
13243
13251
|
{
|
13244
13252
|
"kind": "javascript-module",
|
13245
13253
|
"path": "components/linksimple/linksimple.component.js",
|
@@ -15435,7 +15443,7 @@
|
|
15435
15443
|
"kind": "field",
|
15436
15444
|
"name": "ariaChecked",
|
15437
15445
|
"type": {
|
15438
|
-
"text": "
|
15446
|
+
"text": "AriaCheckedStates"
|
15439
15447
|
},
|
15440
15448
|
"description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
|
15441
15449
|
"default": "'false'",
|
@@ -15741,7 +15749,7 @@
|
|
15741
15749
|
{
|
15742
15750
|
"name": "aria-checked",
|
15743
15751
|
"type": {
|
15744
|
-
"text": "
|
15752
|
+
"text": "AriaCheckedStates"
|
15745
15753
|
},
|
15746
15754
|
"description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
|
15747
15755
|
"default": "'false'",
|
@@ -16016,6 +16024,41 @@
|
|
16016
16024
|
}
|
16017
16025
|
]
|
16018
16026
|
},
|
16027
|
+
{
|
16028
|
+
"kind": "javascript-module",
|
16029
|
+
"path": "components/menusection/menusection.component.js",
|
16030
|
+
"declarations": [
|
16031
|
+
{
|
16032
|
+
"kind": "class",
|
16033
|
+
"description": "`mdc-menusection` is a container element used to group a set of menu items.\n\nThis component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n\n- If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n only one radio item can be selected at a time.\n- If `menuitemcheckbox` components are included, their checked state can be toggled independently.",
|
16034
|
+
"name": "MenuSection",
|
16035
|
+
"slots": [
|
16036
|
+
{
|
16037
|
+
"description": "Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`",
|
16038
|
+
"name": ""
|
16039
|
+
}
|
16040
|
+
],
|
16041
|
+
"members": [],
|
16042
|
+
"superclass": {
|
16043
|
+
"name": "Component",
|
16044
|
+
"module": "/src/models"
|
16045
|
+
},
|
16046
|
+
"tagName": "mdc-menusection",
|
16047
|
+
"jsDoc": "/**\n * `mdc-menusection` is a container element used to group a set of menu items.\n *\n * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n *\n * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n * only one radio item can be selected at a time.\n * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.\n *\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n */",
|
16048
|
+
"customElement": true
|
16049
|
+
}
|
16050
|
+
],
|
16051
|
+
"exports": [
|
16052
|
+
{
|
16053
|
+
"kind": "js",
|
16054
|
+
"name": "default",
|
16055
|
+
"declaration": {
|
16056
|
+
"name": "MenuSection",
|
16057
|
+
"module": "components/menusection/menusection.component.js"
|
16058
|
+
}
|
16059
|
+
}
|
16060
|
+
]
|
16061
|
+
},
|
16019
16062
|
{
|
16020
16063
|
"kind": "javascript-module",
|
16021
16064
|
"path": "components/optgroup/optgroup.component.js",
|