@momentum-design/components 0.84.2 → 0.84.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +97 -97
- package/dist/browser/index.js.map +3 -3
- package/dist/custom-elements.json +762 -741
- package/dist/react/index.d.ts +4 -4
- package/dist/react/index.js +4 -4
- package/dist/utils/mixins/FocusTrapMixin.js +14 -4
- package/package.json +1 -1
|
@@ -2,279 +2,6 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
-
{
|
|
6
|
-
"kind": "javascript-module",
|
|
7
|
-
"path": "components/animation/animation.component.js",
|
|
8
|
-
"declarations": [
|
|
9
|
-
{
|
|
10
|
-
"kind": "class",
|
|
11
|
-
"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.",
|
|
12
|
-
"name": "Animation",
|
|
13
|
-
"members": [
|
|
14
|
-
{
|
|
15
|
-
"kind": "field",
|
|
16
|
-
"name": "name",
|
|
17
|
-
"type": {
|
|
18
|
-
"text": "AnimationNames | undefined"
|
|
19
|
-
},
|
|
20
|
-
"description": "Name of the animation (= filename)",
|
|
21
|
-
"attribute": "name",
|
|
22
|
-
"reflects": true
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
"kind": "field",
|
|
26
|
-
"name": "loop",
|
|
27
|
-
"type": {
|
|
28
|
-
"text": "LoopType | undefined"
|
|
29
|
-
},
|
|
30
|
-
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
31
|
-
"attribute": "loop",
|
|
32
|
-
"reflects": true
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
"kind": "field",
|
|
36
|
-
"name": "autoplay",
|
|
37
|
-
"type": {
|
|
38
|
-
"text": "boolean | undefined"
|
|
39
|
-
},
|
|
40
|
-
"description": "Weather start the animation automatically",
|
|
41
|
-
"attribute": "autoplay",
|
|
42
|
-
"reflects": true
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
"kind": "field",
|
|
46
|
-
"name": "ariaLabel",
|
|
47
|
-
"type": {
|
|
48
|
-
"text": "string | null"
|
|
49
|
-
},
|
|
50
|
-
"default": "null",
|
|
51
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
52
|
-
"attribute": "aria-label"
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
"kind": "field",
|
|
56
|
-
"name": "ariaLabelledBy",
|
|
57
|
-
"type": {
|
|
58
|
-
"text": "string | null"
|
|
59
|
-
},
|
|
60
|
-
"default": "null",
|
|
61
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
62
|
-
"attribute": "aria-labelledby"
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"kind": "field",
|
|
66
|
-
"name": "lottieInstance",
|
|
67
|
-
"type": {
|
|
68
|
-
"text": "AnimationItem | undefined"
|
|
69
|
-
},
|
|
70
|
-
"privacy": "private",
|
|
71
|
-
"description": "Lottie animation instance"
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
"kind": "field",
|
|
75
|
-
"name": "containerRef",
|
|
76
|
-
"type": {
|
|
77
|
-
"text": "Ref<HTMLDivElement>"
|
|
78
|
-
},
|
|
79
|
-
"privacy": "private",
|
|
80
|
-
"description": "Container for the animation"
|
|
81
|
-
},
|
|
82
|
-
{
|
|
83
|
-
"kind": "field",
|
|
84
|
-
"name": "animation",
|
|
85
|
-
"description": "Exposed API of the animation library (lottie)",
|
|
86
|
-
"readonly": true
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
"kind": "method",
|
|
90
|
-
"name": "getLoopValue",
|
|
91
|
-
"privacy": "private"
|
|
92
|
-
},
|
|
93
|
-
{
|
|
94
|
-
"kind": "method",
|
|
95
|
-
"name": "onLoadSuccessHandler",
|
|
96
|
-
"privacy": "private",
|
|
97
|
-
"parameters": [
|
|
98
|
-
{
|
|
99
|
-
"name": "animationData",
|
|
100
|
-
"type": {
|
|
101
|
-
"text": "any"
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
],
|
|
105
|
-
"description": "Create new lotty instance for the loaded data"
|
|
106
|
-
},
|
|
107
|
-
{
|
|
108
|
-
"kind": "method",
|
|
109
|
-
"name": "onLoadFailHandler",
|
|
110
|
-
"privacy": "private",
|
|
111
|
-
"parameters": [
|
|
112
|
-
{
|
|
113
|
-
"name": "error",
|
|
114
|
-
"type": {
|
|
115
|
-
"text": "Error"
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
],
|
|
119
|
-
"description": "Error handler for animation loading"
|
|
120
|
-
},
|
|
121
|
-
{
|
|
122
|
-
"kind": "method",
|
|
123
|
-
"name": "getAnimationData",
|
|
124
|
-
"privacy": "private",
|
|
125
|
-
"description": "Import animation data dynamically"
|
|
126
|
-
},
|
|
127
|
-
{
|
|
128
|
-
"kind": "field",
|
|
129
|
-
"name": "onCompleteHandler",
|
|
130
|
-
"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."
|
|
131
|
-
}
|
|
132
|
-
],
|
|
133
|
-
"events": [
|
|
134
|
-
{
|
|
135
|
-
"name": "load",
|
|
136
|
-
"type": {
|
|
137
|
-
"text": "CustomEvent"
|
|
138
|
-
},
|
|
139
|
-
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
140
|
-
"reactName": "onLoad"
|
|
141
|
-
},
|
|
142
|
-
{
|
|
143
|
-
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
144
|
-
"name": "complete",
|
|
145
|
-
"reactName": "onComplete"
|
|
146
|
-
},
|
|
147
|
-
{
|
|
148
|
-
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
149
|
-
"name": "error",
|
|
150
|
-
"reactName": "onError"
|
|
151
|
-
}
|
|
152
|
-
],
|
|
153
|
-
"attributes": [
|
|
154
|
-
{
|
|
155
|
-
"name": "name",
|
|
156
|
-
"type": {
|
|
157
|
-
"text": "AnimationNames | undefined"
|
|
158
|
-
},
|
|
159
|
-
"description": "Name of the animation (= filename)",
|
|
160
|
-
"fieldName": "name"
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
"name": "loop",
|
|
164
|
-
"type": {
|
|
165
|
-
"text": "LoopType | undefined"
|
|
166
|
-
},
|
|
167
|
-
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
168
|
-
"fieldName": "loop"
|
|
169
|
-
},
|
|
170
|
-
{
|
|
171
|
-
"name": "autoplay",
|
|
172
|
-
"type": {
|
|
173
|
-
"text": "boolean | undefined"
|
|
174
|
-
},
|
|
175
|
-
"description": "Weather start the animation automatically",
|
|
176
|
-
"fieldName": "autoplay"
|
|
177
|
-
},
|
|
178
|
-
{
|
|
179
|
-
"name": "aria-label",
|
|
180
|
-
"type": {
|
|
181
|
-
"text": "string | null"
|
|
182
|
-
},
|
|
183
|
-
"default": "null",
|
|
184
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
185
|
-
"fieldName": "ariaLabel"
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
"name": "aria-labelledby",
|
|
189
|
-
"type": {
|
|
190
|
-
"text": "string | null"
|
|
191
|
-
},
|
|
192
|
-
"default": "null",
|
|
193
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
194
|
-
"fieldName": "ariaLabelledBy"
|
|
195
|
-
}
|
|
196
|
-
],
|
|
197
|
-
"superclass": {
|
|
198
|
-
"name": "Component",
|
|
199
|
-
"module": "/src/models"
|
|
200
|
-
},
|
|
201
|
-
"tagName": "mdc-animation",
|
|
202
|
-
"jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
|
|
203
|
-
"customElement": true
|
|
204
|
-
}
|
|
205
|
-
],
|
|
206
|
-
"exports": [
|
|
207
|
-
{
|
|
208
|
-
"kind": "js",
|
|
209
|
-
"name": "default",
|
|
210
|
-
"declaration": {
|
|
211
|
-
"name": "Animation",
|
|
212
|
-
"module": "components/animation/animation.component.js"
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
]
|
|
216
|
-
},
|
|
217
|
-
{
|
|
218
|
-
"kind": "javascript-module",
|
|
219
|
-
"path": "components/appheader/appheader.component.js",
|
|
220
|
-
"declarations": [
|
|
221
|
-
{
|
|
222
|
-
"kind": "class",
|
|
223
|
-
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
224
|
-
"name": "Appheader",
|
|
225
|
-
"cssParts": [
|
|
226
|
-
{
|
|
227
|
-
"description": "The main container for styling the header.",
|
|
228
|
-
"name": "container"
|
|
229
|
-
},
|
|
230
|
-
{
|
|
231
|
-
"description": "The leading section of the header.",
|
|
232
|
-
"name": "leading-section"
|
|
233
|
-
},
|
|
234
|
-
{
|
|
235
|
-
"description": "The center section of the header.",
|
|
236
|
-
"name": "center-section"
|
|
237
|
-
},
|
|
238
|
-
{
|
|
239
|
-
"description": "The trailing section of the header.",
|
|
240
|
-
"name": "trailing-section"
|
|
241
|
-
}
|
|
242
|
-
],
|
|
243
|
-
"slots": [
|
|
244
|
-
{
|
|
245
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
246
|
-
"name": "leading"
|
|
247
|
-
},
|
|
248
|
-
{
|
|
249
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
250
|
-
"name": "center"
|
|
251
|
-
},
|
|
252
|
-
{
|
|
253
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
254
|
-
"name": "trailing"
|
|
255
|
-
}
|
|
256
|
-
],
|
|
257
|
-
"members": [],
|
|
258
|
-
"superclass": {
|
|
259
|
-
"name": "Component",
|
|
260
|
-
"module": "/src/models"
|
|
261
|
-
},
|
|
262
|
-
"tagName": "mdc-appheader",
|
|
263
|
-
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
264
|
-
"customElement": true
|
|
265
|
-
}
|
|
266
|
-
],
|
|
267
|
-
"exports": [
|
|
268
|
-
{
|
|
269
|
-
"kind": "js",
|
|
270
|
-
"name": "default",
|
|
271
|
-
"declaration": {
|
|
272
|
-
"name": "Appheader",
|
|
273
|
-
"module": "components/appheader/appheader.component.js"
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
]
|
|
277
|
-
},
|
|
278
5
|
{
|
|
279
6
|
"kind": "javascript-module",
|
|
280
7
|
"path": "components/alertchip/alertchip.component.js",
|
|
@@ -793,6 +520,279 @@
|
|
|
793
520
|
}
|
|
794
521
|
]
|
|
795
522
|
},
|
|
523
|
+
{
|
|
524
|
+
"kind": "javascript-module",
|
|
525
|
+
"path": "components/animation/animation.component.js",
|
|
526
|
+
"declarations": [
|
|
527
|
+
{
|
|
528
|
+
"kind": "class",
|
|
529
|
+
"description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
|
|
530
|
+
"name": "Animation",
|
|
531
|
+
"members": [
|
|
532
|
+
{
|
|
533
|
+
"kind": "field",
|
|
534
|
+
"name": "name",
|
|
535
|
+
"type": {
|
|
536
|
+
"text": "AnimationNames | undefined"
|
|
537
|
+
},
|
|
538
|
+
"description": "Name of the animation (= filename)",
|
|
539
|
+
"attribute": "name",
|
|
540
|
+
"reflects": true
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"kind": "field",
|
|
544
|
+
"name": "loop",
|
|
545
|
+
"type": {
|
|
546
|
+
"text": "LoopType | undefined"
|
|
547
|
+
},
|
|
548
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
549
|
+
"attribute": "loop",
|
|
550
|
+
"reflects": true
|
|
551
|
+
},
|
|
552
|
+
{
|
|
553
|
+
"kind": "field",
|
|
554
|
+
"name": "autoplay",
|
|
555
|
+
"type": {
|
|
556
|
+
"text": "boolean | undefined"
|
|
557
|
+
},
|
|
558
|
+
"description": "Weather start the animation automatically",
|
|
559
|
+
"attribute": "autoplay",
|
|
560
|
+
"reflects": true
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
"kind": "field",
|
|
564
|
+
"name": "ariaLabel",
|
|
565
|
+
"type": {
|
|
566
|
+
"text": "string | null"
|
|
567
|
+
},
|
|
568
|
+
"default": "null",
|
|
569
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
570
|
+
"attribute": "aria-label"
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"kind": "field",
|
|
574
|
+
"name": "ariaLabelledBy",
|
|
575
|
+
"type": {
|
|
576
|
+
"text": "string | null"
|
|
577
|
+
},
|
|
578
|
+
"default": "null",
|
|
579
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
580
|
+
"attribute": "aria-labelledby"
|
|
581
|
+
},
|
|
582
|
+
{
|
|
583
|
+
"kind": "field",
|
|
584
|
+
"name": "lottieInstance",
|
|
585
|
+
"type": {
|
|
586
|
+
"text": "AnimationItem | undefined"
|
|
587
|
+
},
|
|
588
|
+
"privacy": "private",
|
|
589
|
+
"description": "Lottie animation instance"
|
|
590
|
+
},
|
|
591
|
+
{
|
|
592
|
+
"kind": "field",
|
|
593
|
+
"name": "containerRef",
|
|
594
|
+
"type": {
|
|
595
|
+
"text": "Ref<HTMLDivElement>"
|
|
596
|
+
},
|
|
597
|
+
"privacy": "private",
|
|
598
|
+
"description": "Container for the animation"
|
|
599
|
+
},
|
|
600
|
+
{
|
|
601
|
+
"kind": "field",
|
|
602
|
+
"name": "animation",
|
|
603
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
604
|
+
"readonly": true
|
|
605
|
+
},
|
|
606
|
+
{
|
|
607
|
+
"kind": "method",
|
|
608
|
+
"name": "getLoopValue",
|
|
609
|
+
"privacy": "private"
|
|
610
|
+
},
|
|
611
|
+
{
|
|
612
|
+
"kind": "method",
|
|
613
|
+
"name": "onLoadSuccessHandler",
|
|
614
|
+
"privacy": "private",
|
|
615
|
+
"parameters": [
|
|
616
|
+
{
|
|
617
|
+
"name": "animationData",
|
|
618
|
+
"type": {
|
|
619
|
+
"text": "any"
|
|
620
|
+
}
|
|
621
|
+
}
|
|
622
|
+
],
|
|
623
|
+
"description": "Create new lotty instance for the loaded data"
|
|
624
|
+
},
|
|
625
|
+
{
|
|
626
|
+
"kind": "method",
|
|
627
|
+
"name": "onLoadFailHandler",
|
|
628
|
+
"privacy": "private",
|
|
629
|
+
"parameters": [
|
|
630
|
+
{
|
|
631
|
+
"name": "error",
|
|
632
|
+
"type": {
|
|
633
|
+
"text": "Error"
|
|
634
|
+
}
|
|
635
|
+
}
|
|
636
|
+
],
|
|
637
|
+
"description": "Error handler for animation loading"
|
|
638
|
+
},
|
|
639
|
+
{
|
|
640
|
+
"kind": "method",
|
|
641
|
+
"name": "getAnimationData",
|
|
642
|
+
"privacy": "private",
|
|
643
|
+
"description": "Import animation data dynamically"
|
|
644
|
+
},
|
|
645
|
+
{
|
|
646
|
+
"kind": "field",
|
|
647
|
+
"name": "onCompleteHandler",
|
|
648
|
+
"description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
|
|
649
|
+
}
|
|
650
|
+
],
|
|
651
|
+
"events": [
|
|
652
|
+
{
|
|
653
|
+
"name": "load",
|
|
654
|
+
"type": {
|
|
655
|
+
"text": "CustomEvent"
|
|
656
|
+
},
|
|
657
|
+
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
658
|
+
"reactName": "onLoad"
|
|
659
|
+
},
|
|
660
|
+
{
|
|
661
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
662
|
+
"name": "complete",
|
|
663
|
+
"reactName": "onComplete"
|
|
664
|
+
},
|
|
665
|
+
{
|
|
666
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
667
|
+
"name": "error",
|
|
668
|
+
"reactName": "onError"
|
|
669
|
+
}
|
|
670
|
+
],
|
|
671
|
+
"attributes": [
|
|
672
|
+
{
|
|
673
|
+
"name": "name",
|
|
674
|
+
"type": {
|
|
675
|
+
"text": "AnimationNames | undefined"
|
|
676
|
+
},
|
|
677
|
+
"description": "Name of the animation (= filename)",
|
|
678
|
+
"fieldName": "name"
|
|
679
|
+
},
|
|
680
|
+
{
|
|
681
|
+
"name": "loop",
|
|
682
|
+
"type": {
|
|
683
|
+
"text": "LoopType | undefined"
|
|
684
|
+
},
|
|
685
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
686
|
+
"fieldName": "loop"
|
|
687
|
+
},
|
|
688
|
+
{
|
|
689
|
+
"name": "autoplay",
|
|
690
|
+
"type": {
|
|
691
|
+
"text": "boolean | undefined"
|
|
692
|
+
},
|
|
693
|
+
"description": "Weather start the animation automatically",
|
|
694
|
+
"fieldName": "autoplay"
|
|
695
|
+
},
|
|
696
|
+
{
|
|
697
|
+
"name": "aria-label",
|
|
698
|
+
"type": {
|
|
699
|
+
"text": "string | null"
|
|
700
|
+
},
|
|
701
|
+
"default": "null",
|
|
702
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
703
|
+
"fieldName": "ariaLabel"
|
|
704
|
+
},
|
|
705
|
+
{
|
|
706
|
+
"name": "aria-labelledby",
|
|
707
|
+
"type": {
|
|
708
|
+
"text": "string | null"
|
|
709
|
+
},
|
|
710
|
+
"default": "null",
|
|
711
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
712
|
+
"fieldName": "ariaLabelledBy"
|
|
713
|
+
}
|
|
714
|
+
],
|
|
715
|
+
"superclass": {
|
|
716
|
+
"name": "Component",
|
|
717
|
+
"module": "/src/models"
|
|
718
|
+
},
|
|
719
|
+
"tagName": "mdc-animation",
|
|
720
|
+
"jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
|
|
721
|
+
"customElement": true
|
|
722
|
+
}
|
|
723
|
+
],
|
|
724
|
+
"exports": [
|
|
725
|
+
{
|
|
726
|
+
"kind": "js",
|
|
727
|
+
"name": "default",
|
|
728
|
+
"declaration": {
|
|
729
|
+
"name": "Animation",
|
|
730
|
+
"module": "components/animation/animation.component.js"
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
]
|
|
734
|
+
},
|
|
735
|
+
{
|
|
736
|
+
"kind": "javascript-module",
|
|
737
|
+
"path": "components/appheader/appheader.component.js",
|
|
738
|
+
"declarations": [
|
|
739
|
+
{
|
|
740
|
+
"kind": "class",
|
|
741
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
742
|
+
"name": "Appheader",
|
|
743
|
+
"cssParts": [
|
|
744
|
+
{
|
|
745
|
+
"description": "The main container for styling the header.",
|
|
746
|
+
"name": "container"
|
|
747
|
+
},
|
|
748
|
+
{
|
|
749
|
+
"description": "The leading section of the header.",
|
|
750
|
+
"name": "leading-section"
|
|
751
|
+
},
|
|
752
|
+
{
|
|
753
|
+
"description": "The center section of the header.",
|
|
754
|
+
"name": "center-section"
|
|
755
|
+
},
|
|
756
|
+
{
|
|
757
|
+
"description": "The trailing section of the header.",
|
|
758
|
+
"name": "trailing-section"
|
|
759
|
+
}
|
|
760
|
+
],
|
|
761
|
+
"slots": [
|
|
762
|
+
{
|
|
763
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
764
|
+
"name": "leading"
|
|
765
|
+
},
|
|
766
|
+
{
|
|
767
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
768
|
+
"name": "center"
|
|
769
|
+
},
|
|
770
|
+
{
|
|
771
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
772
|
+
"name": "trailing"
|
|
773
|
+
}
|
|
774
|
+
],
|
|
775
|
+
"members": [],
|
|
776
|
+
"superclass": {
|
|
777
|
+
"name": "Component",
|
|
778
|
+
"module": "/src/models"
|
|
779
|
+
},
|
|
780
|
+
"tagName": "mdc-appheader",
|
|
781
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
782
|
+
"customElement": true
|
|
783
|
+
}
|
|
784
|
+
],
|
|
785
|
+
"exports": [
|
|
786
|
+
{
|
|
787
|
+
"kind": "js",
|
|
788
|
+
"name": "default",
|
|
789
|
+
"declaration": {
|
|
790
|
+
"name": "Appheader",
|
|
791
|
+
"module": "components/appheader/appheader.component.js"
|
|
792
|
+
}
|
|
793
|
+
}
|
|
794
|
+
]
|
|
795
|
+
},
|
|
796
796
|
{
|
|
797
797
|
"kind": "javascript-module",
|
|
798
798
|
"path": "components/avatar/avatar.component.js",
|
|
@@ -1707,327 +1707,6 @@
|
|
|
1707
1707
|
}
|
|
1708
1708
|
]
|
|
1709
1709
|
},
|
|
1710
|
-
{
|
|
1711
|
-
"kind": "javascript-module",
|
|
1712
|
-
"path": "components/badge/badge.component.js",
|
|
1713
|
-
"declarations": [
|
|
1714
|
-
{
|
|
1715
|
-
"kind": "class",
|
|
1716
|
-
"description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
|
|
1717
|
-
"name": "Badge",
|
|
1718
|
-
"cssProperties": [
|
|
1719
|
-
{
|
|
1720
|
-
"description": "The foreground color of the primary badge.",
|
|
1721
|
-
"name": "--mdc-badge-primary-foreground-color"
|
|
1722
|
-
},
|
|
1723
|
-
{
|
|
1724
|
-
"description": "The background color of the primary badge.",
|
|
1725
|
-
"name": "--mdc-badge-primary-background-color"
|
|
1726
|
-
},
|
|
1727
|
-
{
|
|
1728
|
-
"description": "The foreground color of the secondary badge.",
|
|
1729
|
-
"name": "--mdc-badge-secondary-foreground-color"
|
|
1730
|
-
},
|
|
1731
|
-
{
|
|
1732
|
-
"description": "The background color of the secondary badge.",
|
|
1733
|
-
"name": "--mdc-badge-secondary-background-color"
|
|
1734
|
-
},
|
|
1735
|
-
{
|
|
1736
|
-
"description": "The foreground color of the success badge.",
|
|
1737
|
-
"name": "--mdc-badge-success-foreground-color"
|
|
1738
|
-
},
|
|
1739
|
-
{
|
|
1740
|
-
"description": "The background color of the success badge.",
|
|
1741
|
-
"name": "--mdc-badge-success-background-color"
|
|
1742
|
-
},
|
|
1743
|
-
{
|
|
1744
|
-
"description": "The foreground color of the warning badge.",
|
|
1745
|
-
"name": "--mdc-badge-warning-foreground-color"
|
|
1746
|
-
},
|
|
1747
|
-
{
|
|
1748
|
-
"description": "The background color of the warning badge.",
|
|
1749
|
-
"name": "--mdc-badge-warning-background-color"
|
|
1750
|
-
},
|
|
1751
|
-
{
|
|
1752
|
-
"description": "The foreground color of the error badge.",
|
|
1753
|
-
"name": "--mdc-badge-error-foreground-color"
|
|
1754
|
-
},
|
|
1755
|
-
{
|
|
1756
|
-
"description": "The background color of the error badge.",
|
|
1757
|
-
"name": "--mdc-badge-error-background-color"
|
|
1758
|
-
},
|
|
1759
|
-
{
|
|
1760
|
-
"description": "The background color of the badge overlay.",
|
|
1761
|
-
"name": "--mdc-badge-overlay-background-color"
|
|
1762
|
-
}
|
|
1763
|
-
],
|
|
1764
|
-
"members": [
|
|
1765
|
-
{
|
|
1766
|
-
"kind": "field",
|
|
1767
|
-
"name": "type",
|
|
1768
|
-
"type": {
|
|
1769
|
-
"text": "BadgeType | undefined"
|
|
1770
|
-
},
|
|
1771
|
-
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
1772
|
-
"attribute": "type",
|
|
1773
|
-
"reflects": true
|
|
1774
|
-
},
|
|
1775
|
-
{
|
|
1776
|
-
"kind": "field",
|
|
1777
|
-
"name": "variant",
|
|
1778
|
-
"type": {
|
|
1779
|
-
"text": "IconVariant"
|
|
1780
|
-
},
|
|
1781
|
-
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
1782
|
-
"default": "primary",
|
|
1783
|
-
"attribute": "variant",
|
|
1784
|
-
"reflects": true
|
|
1785
|
-
},
|
|
1786
|
-
{
|
|
1787
|
-
"kind": "field",
|
|
1788
|
-
"name": "counter",
|
|
1789
|
-
"type": {
|
|
1790
|
-
"text": "number | undefined"
|
|
1791
|
-
},
|
|
1792
|
-
"description": "Counter is the number which can be provided in the badge.",
|
|
1793
|
-
"attribute": "counter"
|
|
1794
|
-
},
|
|
1795
|
-
{
|
|
1796
|
-
"kind": "field",
|
|
1797
|
-
"name": "maxCounter",
|
|
1798
|
-
"type": {
|
|
1799
|
-
"text": "number"
|
|
1800
|
-
},
|
|
1801
|
-
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
1802
|
-
"default": "99",
|
|
1803
|
-
"attribute": "max-counter",
|
|
1804
|
-
"reflects": true
|
|
1805
|
-
},
|
|
1806
|
-
{
|
|
1807
|
-
"kind": "field",
|
|
1808
|
-
"name": "overlay",
|
|
1809
|
-
"type": {
|
|
1810
|
-
"text": "boolean"
|
|
1811
|
-
},
|
|
1812
|
-
"default": "false",
|
|
1813
|
-
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
1814
|
-
"attribute": "overlay"
|
|
1815
|
-
},
|
|
1816
|
-
{
|
|
1817
|
-
"kind": "field",
|
|
1818
|
-
"name": "ariaLabel",
|
|
1819
|
-
"type": {
|
|
1820
|
-
"text": "string | null"
|
|
1821
|
-
},
|
|
1822
|
-
"default": "null",
|
|
1823
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
1824
|
-
"attribute": "aria-label"
|
|
1825
|
-
},
|
|
1826
|
-
{
|
|
1827
|
-
"kind": "method",
|
|
1828
|
-
"name": "getCounterText",
|
|
1829
|
-
"privacy": "private",
|
|
1830
|
-
"return": {
|
|
1831
|
-
"type": {
|
|
1832
|
-
"text": ""
|
|
1833
|
-
}
|
|
1834
|
-
},
|
|
1835
|
-
"parameters": [
|
|
1836
|
-
{
|
|
1837
|
-
"name": "maxCounter",
|
|
1838
|
-
"type": {
|
|
1839
|
-
"text": "number"
|
|
1840
|
-
},
|
|
1841
|
-
"description": "the maximum limit which can be displayed on the badge"
|
|
1842
|
-
},
|
|
1843
|
-
{
|
|
1844
|
-
"name": "counter",
|
|
1845
|
-
"optional": true,
|
|
1846
|
-
"type": {
|
|
1847
|
-
"text": "number"
|
|
1848
|
-
},
|
|
1849
|
-
"description": "the number to be displayed on the badge"
|
|
1850
|
-
}
|
|
1851
|
-
],
|
|
1852
|
-
"description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
|
|
1853
|
-
},
|
|
1854
|
-
{
|
|
1855
|
-
"kind": "method",
|
|
1856
|
-
"name": "getBadgeIcon",
|
|
1857
|
-
"privacy": "private",
|
|
1858
|
-
"return": {
|
|
1859
|
-
"type": {
|
|
1860
|
-
"text": ""
|
|
1861
|
-
}
|
|
1862
|
-
},
|
|
1863
|
-
"parameters": [
|
|
1864
|
-
{
|
|
1865
|
-
"name": "iconName",
|
|
1866
|
-
"type": {
|
|
1867
|
-
"text": "string"
|
|
1868
|
-
},
|
|
1869
|
-
"description": "the name of the icon from the icon set"
|
|
1870
|
-
},
|
|
1871
|
-
{
|
|
1872
|
-
"name": "backgroundClassPostfix",
|
|
1873
|
-
"type": {
|
|
1874
|
-
"text": "string"
|
|
1875
|
-
},
|
|
1876
|
-
"description": "postfix for the class to style the badge icon."
|
|
1877
|
-
}
|
|
1878
|
-
],
|
|
1879
|
-
"description": "Method to generate the badge icon."
|
|
1880
|
-
},
|
|
1881
|
-
{
|
|
1882
|
-
"kind": "method",
|
|
1883
|
-
"name": "getBadgeDot",
|
|
1884
|
-
"privacy": "private",
|
|
1885
|
-
"return": {
|
|
1886
|
-
"type": {
|
|
1887
|
-
"text": ""
|
|
1888
|
-
}
|
|
1889
|
-
},
|
|
1890
|
-
"description": "Method to generate the badge dot template."
|
|
1891
|
-
},
|
|
1892
|
-
{
|
|
1893
|
-
"kind": "method",
|
|
1894
|
-
"name": "getBadgeCounterText",
|
|
1895
|
-
"privacy": "private",
|
|
1896
|
-
"return": {
|
|
1897
|
-
"type": {
|
|
1898
|
-
"text": ""
|
|
1899
|
-
}
|
|
1900
|
-
},
|
|
1901
|
-
"description": "Method to generate the badge text and counter template."
|
|
1902
|
-
},
|
|
1903
|
-
{
|
|
1904
|
-
"kind": "method",
|
|
1905
|
-
"name": "setRoleByAriaLabel",
|
|
1906
|
-
"privacy": "private",
|
|
1907
|
-
"return": {
|
|
1908
|
-
"type": {
|
|
1909
|
-
"text": "void"
|
|
1910
|
-
}
|
|
1911
|
-
},
|
|
1912
|
-
"description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
|
|
1913
|
-
},
|
|
1914
|
-
{
|
|
1915
|
-
"kind": "method",
|
|
1916
|
-
"name": "getBadgeContentBasedOnType",
|
|
1917
|
-
"privacy": "private",
|
|
1918
|
-
"return": {
|
|
1919
|
-
"type": {
|
|
1920
|
-
"text": ""
|
|
1921
|
-
}
|
|
1922
|
-
},
|
|
1923
|
-
"description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
|
|
1924
|
-
},
|
|
1925
|
-
{
|
|
1926
|
-
"kind": "field",
|
|
1927
|
-
"name": "iconName",
|
|
1928
|
-
"type": {
|
|
1929
|
-
"text": "IconNames | undefined"
|
|
1930
|
-
},
|
|
1931
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1932
|
-
"attribute": "icon-name",
|
|
1933
|
-
"inheritedFrom": {
|
|
1934
|
-
"name": "IconNameMixin",
|
|
1935
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
1936
|
-
}
|
|
1937
|
-
}
|
|
1938
|
-
],
|
|
1939
|
-
"attributes": [
|
|
1940
|
-
{
|
|
1941
|
-
"name": "type",
|
|
1942
|
-
"type": {
|
|
1943
|
-
"text": "BadgeType | undefined"
|
|
1944
|
-
},
|
|
1945
|
-
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
1946
|
-
"fieldName": "type"
|
|
1947
|
-
},
|
|
1948
|
-
{
|
|
1949
|
-
"name": "variant",
|
|
1950
|
-
"type": {
|
|
1951
|
-
"text": "IconVariant"
|
|
1952
|
-
},
|
|
1953
|
-
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
1954
|
-
"default": "primary",
|
|
1955
|
-
"fieldName": "variant"
|
|
1956
|
-
},
|
|
1957
|
-
{
|
|
1958
|
-
"name": "counter",
|
|
1959
|
-
"type": {
|
|
1960
|
-
"text": "number | undefined"
|
|
1961
|
-
},
|
|
1962
|
-
"description": "Counter is the number which can be provided in the badge.",
|
|
1963
|
-
"fieldName": "counter"
|
|
1964
|
-
},
|
|
1965
|
-
{
|
|
1966
|
-
"name": "max-counter",
|
|
1967
|
-
"type": {
|
|
1968
|
-
"text": "number"
|
|
1969
|
-
},
|
|
1970
|
-
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
1971
|
-
"default": "99",
|
|
1972
|
-
"fieldName": "maxCounter"
|
|
1973
|
-
},
|
|
1974
|
-
{
|
|
1975
|
-
"name": "overlay",
|
|
1976
|
-
"type": {
|
|
1977
|
-
"text": "boolean"
|
|
1978
|
-
},
|
|
1979
|
-
"default": "false",
|
|
1980
|
-
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
1981
|
-
"fieldName": "overlay"
|
|
1982
|
-
},
|
|
1983
|
-
{
|
|
1984
|
-
"name": "aria-label",
|
|
1985
|
-
"type": {
|
|
1986
|
-
"text": "string | null"
|
|
1987
|
-
},
|
|
1988
|
-
"default": "null",
|
|
1989
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
1990
|
-
"fieldName": "ariaLabel"
|
|
1991
|
-
},
|
|
1992
|
-
{
|
|
1993
|
-
"name": "icon-name",
|
|
1994
|
-
"type": {
|
|
1995
|
-
"text": "IconNames | undefined"
|
|
1996
|
-
},
|
|
1997
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1998
|
-
"fieldName": "iconName",
|
|
1999
|
-
"inheritedFrom": {
|
|
2000
|
-
"name": "IconNameMixin",
|
|
2001
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
2002
|
-
}
|
|
2003
|
-
}
|
|
2004
|
-
],
|
|
2005
|
-
"mixins": [
|
|
2006
|
-
{
|
|
2007
|
-
"name": "IconNameMixin",
|
|
2008
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
2009
|
-
}
|
|
2010
|
-
],
|
|
2011
|
-
"superclass": {
|
|
2012
|
-
"name": "Component",
|
|
2013
|
-
"module": "/src/models"
|
|
2014
|
-
},
|
|
2015
|
-
"tagName": "mdc-badge",
|
|
2016
|
-
"jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
|
|
2017
|
-
"customElement": true
|
|
2018
|
-
}
|
|
2019
|
-
],
|
|
2020
|
-
"exports": [
|
|
2021
|
-
{
|
|
2022
|
-
"kind": "js",
|
|
2023
|
-
"name": "default",
|
|
2024
|
-
"declaration": {
|
|
2025
|
-
"name": "Badge",
|
|
2026
|
-
"module": "components/badge/badge.component.js"
|
|
2027
|
-
}
|
|
2028
|
-
}
|
|
2029
|
-
]
|
|
2030
|
-
},
|
|
2031
1710
|
{
|
|
2032
1711
|
"kind": "javascript-module",
|
|
2033
1712
|
"path": "components/brandvisual/brandvisual.component.js",
|
|
@@ -2132,6 +1811,327 @@
|
|
|
2132
1811
|
}
|
|
2133
1812
|
]
|
|
2134
1813
|
},
|
|
1814
|
+
{
|
|
1815
|
+
"kind": "javascript-module",
|
|
1816
|
+
"path": "components/badge/badge.component.js",
|
|
1817
|
+
"declarations": [
|
|
1818
|
+
{
|
|
1819
|
+
"kind": "class",
|
|
1820
|
+
"description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
|
|
1821
|
+
"name": "Badge",
|
|
1822
|
+
"cssProperties": [
|
|
1823
|
+
{
|
|
1824
|
+
"description": "The foreground color of the primary badge.",
|
|
1825
|
+
"name": "--mdc-badge-primary-foreground-color"
|
|
1826
|
+
},
|
|
1827
|
+
{
|
|
1828
|
+
"description": "The background color of the primary badge.",
|
|
1829
|
+
"name": "--mdc-badge-primary-background-color"
|
|
1830
|
+
},
|
|
1831
|
+
{
|
|
1832
|
+
"description": "The foreground color of the secondary badge.",
|
|
1833
|
+
"name": "--mdc-badge-secondary-foreground-color"
|
|
1834
|
+
},
|
|
1835
|
+
{
|
|
1836
|
+
"description": "The background color of the secondary badge.",
|
|
1837
|
+
"name": "--mdc-badge-secondary-background-color"
|
|
1838
|
+
},
|
|
1839
|
+
{
|
|
1840
|
+
"description": "The foreground color of the success badge.",
|
|
1841
|
+
"name": "--mdc-badge-success-foreground-color"
|
|
1842
|
+
},
|
|
1843
|
+
{
|
|
1844
|
+
"description": "The background color of the success badge.",
|
|
1845
|
+
"name": "--mdc-badge-success-background-color"
|
|
1846
|
+
},
|
|
1847
|
+
{
|
|
1848
|
+
"description": "The foreground color of the warning badge.",
|
|
1849
|
+
"name": "--mdc-badge-warning-foreground-color"
|
|
1850
|
+
},
|
|
1851
|
+
{
|
|
1852
|
+
"description": "The background color of the warning badge.",
|
|
1853
|
+
"name": "--mdc-badge-warning-background-color"
|
|
1854
|
+
},
|
|
1855
|
+
{
|
|
1856
|
+
"description": "The foreground color of the error badge.",
|
|
1857
|
+
"name": "--mdc-badge-error-foreground-color"
|
|
1858
|
+
},
|
|
1859
|
+
{
|
|
1860
|
+
"description": "The background color of the error badge.",
|
|
1861
|
+
"name": "--mdc-badge-error-background-color"
|
|
1862
|
+
},
|
|
1863
|
+
{
|
|
1864
|
+
"description": "The background color of the badge overlay.",
|
|
1865
|
+
"name": "--mdc-badge-overlay-background-color"
|
|
1866
|
+
}
|
|
1867
|
+
],
|
|
1868
|
+
"members": [
|
|
1869
|
+
{
|
|
1870
|
+
"kind": "field",
|
|
1871
|
+
"name": "type",
|
|
1872
|
+
"type": {
|
|
1873
|
+
"text": "BadgeType | undefined"
|
|
1874
|
+
},
|
|
1875
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
1876
|
+
"attribute": "type",
|
|
1877
|
+
"reflects": true
|
|
1878
|
+
},
|
|
1879
|
+
{
|
|
1880
|
+
"kind": "field",
|
|
1881
|
+
"name": "variant",
|
|
1882
|
+
"type": {
|
|
1883
|
+
"text": "IconVariant"
|
|
1884
|
+
},
|
|
1885
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
1886
|
+
"default": "primary",
|
|
1887
|
+
"attribute": "variant",
|
|
1888
|
+
"reflects": true
|
|
1889
|
+
},
|
|
1890
|
+
{
|
|
1891
|
+
"kind": "field",
|
|
1892
|
+
"name": "counter",
|
|
1893
|
+
"type": {
|
|
1894
|
+
"text": "number | undefined"
|
|
1895
|
+
},
|
|
1896
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
1897
|
+
"attribute": "counter"
|
|
1898
|
+
},
|
|
1899
|
+
{
|
|
1900
|
+
"kind": "field",
|
|
1901
|
+
"name": "maxCounter",
|
|
1902
|
+
"type": {
|
|
1903
|
+
"text": "number"
|
|
1904
|
+
},
|
|
1905
|
+
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
1906
|
+
"default": "99",
|
|
1907
|
+
"attribute": "max-counter",
|
|
1908
|
+
"reflects": true
|
|
1909
|
+
},
|
|
1910
|
+
{
|
|
1911
|
+
"kind": "field",
|
|
1912
|
+
"name": "overlay",
|
|
1913
|
+
"type": {
|
|
1914
|
+
"text": "boolean"
|
|
1915
|
+
},
|
|
1916
|
+
"default": "false",
|
|
1917
|
+
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
1918
|
+
"attribute": "overlay"
|
|
1919
|
+
},
|
|
1920
|
+
{
|
|
1921
|
+
"kind": "field",
|
|
1922
|
+
"name": "ariaLabel",
|
|
1923
|
+
"type": {
|
|
1924
|
+
"text": "string | null"
|
|
1925
|
+
},
|
|
1926
|
+
"default": "null",
|
|
1927
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
1928
|
+
"attribute": "aria-label"
|
|
1929
|
+
},
|
|
1930
|
+
{
|
|
1931
|
+
"kind": "method",
|
|
1932
|
+
"name": "getCounterText",
|
|
1933
|
+
"privacy": "private",
|
|
1934
|
+
"return": {
|
|
1935
|
+
"type": {
|
|
1936
|
+
"text": ""
|
|
1937
|
+
}
|
|
1938
|
+
},
|
|
1939
|
+
"parameters": [
|
|
1940
|
+
{
|
|
1941
|
+
"name": "maxCounter",
|
|
1942
|
+
"type": {
|
|
1943
|
+
"text": "number"
|
|
1944
|
+
},
|
|
1945
|
+
"description": "the maximum limit which can be displayed on the badge"
|
|
1946
|
+
},
|
|
1947
|
+
{
|
|
1948
|
+
"name": "counter",
|
|
1949
|
+
"optional": true,
|
|
1950
|
+
"type": {
|
|
1951
|
+
"text": "number"
|
|
1952
|
+
},
|
|
1953
|
+
"description": "the number to be displayed on the badge"
|
|
1954
|
+
}
|
|
1955
|
+
],
|
|
1956
|
+
"description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
|
|
1957
|
+
},
|
|
1958
|
+
{
|
|
1959
|
+
"kind": "method",
|
|
1960
|
+
"name": "getBadgeIcon",
|
|
1961
|
+
"privacy": "private",
|
|
1962
|
+
"return": {
|
|
1963
|
+
"type": {
|
|
1964
|
+
"text": ""
|
|
1965
|
+
}
|
|
1966
|
+
},
|
|
1967
|
+
"parameters": [
|
|
1968
|
+
{
|
|
1969
|
+
"name": "iconName",
|
|
1970
|
+
"type": {
|
|
1971
|
+
"text": "string"
|
|
1972
|
+
},
|
|
1973
|
+
"description": "the name of the icon from the icon set"
|
|
1974
|
+
},
|
|
1975
|
+
{
|
|
1976
|
+
"name": "backgroundClassPostfix",
|
|
1977
|
+
"type": {
|
|
1978
|
+
"text": "string"
|
|
1979
|
+
},
|
|
1980
|
+
"description": "postfix for the class to style the badge icon."
|
|
1981
|
+
}
|
|
1982
|
+
],
|
|
1983
|
+
"description": "Method to generate the badge icon."
|
|
1984
|
+
},
|
|
1985
|
+
{
|
|
1986
|
+
"kind": "method",
|
|
1987
|
+
"name": "getBadgeDot",
|
|
1988
|
+
"privacy": "private",
|
|
1989
|
+
"return": {
|
|
1990
|
+
"type": {
|
|
1991
|
+
"text": ""
|
|
1992
|
+
}
|
|
1993
|
+
},
|
|
1994
|
+
"description": "Method to generate the badge dot template."
|
|
1995
|
+
},
|
|
1996
|
+
{
|
|
1997
|
+
"kind": "method",
|
|
1998
|
+
"name": "getBadgeCounterText",
|
|
1999
|
+
"privacy": "private",
|
|
2000
|
+
"return": {
|
|
2001
|
+
"type": {
|
|
2002
|
+
"text": ""
|
|
2003
|
+
}
|
|
2004
|
+
},
|
|
2005
|
+
"description": "Method to generate the badge text and counter template."
|
|
2006
|
+
},
|
|
2007
|
+
{
|
|
2008
|
+
"kind": "method",
|
|
2009
|
+
"name": "setRoleByAriaLabel",
|
|
2010
|
+
"privacy": "private",
|
|
2011
|
+
"return": {
|
|
2012
|
+
"type": {
|
|
2013
|
+
"text": "void"
|
|
2014
|
+
}
|
|
2015
|
+
},
|
|
2016
|
+
"description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
|
|
2017
|
+
},
|
|
2018
|
+
{
|
|
2019
|
+
"kind": "method",
|
|
2020
|
+
"name": "getBadgeContentBasedOnType",
|
|
2021
|
+
"privacy": "private",
|
|
2022
|
+
"return": {
|
|
2023
|
+
"type": {
|
|
2024
|
+
"text": ""
|
|
2025
|
+
}
|
|
2026
|
+
},
|
|
2027
|
+
"description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
|
|
2028
|
+
},
|
|
2029
|
+
{
|
|
2030
|
+
"kind": "field",
|
|
2031
|
+
"name": "iconName",
|
|
2032
|
+
"type": {
|
|
2033
|
+
"text": "IconNames | undefined"
|
|
2034
|
+
},
|
|
2035
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
2036
|
+
"attribute": "icon-name",
|
|
2037
|
+
"inheritedFrom": {
|
|
2038
|
+
"name": "IconNameMixin",
|
|
2039
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
2040
|
+
}
|
|
2041
|
+
}
|
|
2042
|
+
],
|
|
2043
|
+
"attributes": [
|
|
2044
|
+
{
|
|
2045
|
+
"name": "type",
|
|
2046
|
+
"type": {
|
|
2047
|
+
"text": "BadgeType | undefined"
|
|
2048
|
+
},
|
|
2049
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
2050
|
+
"fieldName": "type"
|
|
2051
|
+
},
|
|
2052
|
+
{
|
|
2053
|
+
"name": "variant",
|
|
2054
|
+
"type": {
|
|
2055
|
+
"text": "IconVariant"
|
|
2056
|
+
},
|
|
2057
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
2058
|
+
"default": "primary",
|
|
2059
|
+
"fieldName": "variant"
|
|
2060
|
+
},
|
|
2061
|
+
{
|
|
2062
|
+
"name": "counter",
|
|
2063
|
+
"type": {
|
|
2064
|
+
"text": "number | undefined"
|
|
2065
|
+
},
|
|
2066
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
2067
|
+
"fieldName": "counter"
|
|
2068
|
+
},
|
|
2069
|
+
{
|
|
2070
|
+
"name": "max-counter",
|
|
2071
|
+
"type": {
|
|
2072
|
+
"text": "number"
|
|
2073
|
+
},
|
|
2074
|
+
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
2075
|
+
"default": "99",
|
|
2076
|
+
"fieldName": "maxCounter"
|
|
2077
|
+
},
|
|
2078
|
+
{
|
|
2079
|
+
"name": "overlay",
|
|
2080
|
+
"type": {
|
|
2081
|
+
"text": "boolean"
|
|
2082
|
+
},
|
|
2083
|
+
"default": "false",
|
|
2084
|
+
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
2085
|
+
"fieldName": "overlay"
|
|
2086
|
+
},
|
|
2087
|
+
{
|
|
2088
|
+
"name": "aria-label",
|
|
2089
|
+
"type": {
|
|
2090
|
+
"text": "string | null"
|
|
2091
|
+
},
|
|
2092
|
+
"default": "null",
|
|
2093
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
2094
|
+
"fieldName": "ariaLabel"
|
|
2095
|
+
},
|
|
2096
|
+
{
|
|
2097
|
+
"name": "icon-name",
|
|
2098
|
+
"type": {
|
|
2099
|
+
"text": "IconNames | undefined"
|
|
2100
|
+
},
|
|
2101
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
2102
|
+
"fieldName": "iconName",
|
|
2103
|
+
"inheritedFrom": {
|
|
2104
|
+
"name": "IconNameMixin",
|
|
2105
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
2106
|
+
}
|
|
2107
|
+
}
|
|
2108
|
+
],
|
|
2109
|
+
"mixins": [
|
|
2110
|
+
{
|
|
2111
|
+
"name": "IconNameMixin",
|
|
2112
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
2113
|
+
}
|
|
2114
|
+
],
|
|
2115
|
+
"superclass": {
|
|
2116
|
+
"name": "Component",
|
|
2117
|
+
"module": "/src/models"
|
|
2118
|
+
},
|
|
2119
|
+
"tagName": "mdc-badge",
|
|
2120
|
+
"jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
|
|
2121
|
+
"customElement": true
|
|
2122
|
+
}
|
|
2123
|
+
],
|
|
2124
|
+
"exports": [
|
|
2125
|
+
{
|
|
2126
|
+
"kind": "js",
|
|
2127
|
+
"name": "default",
|
|
2128
|
+
"declaration": {
|
|
2129
|
+
"name": "Badge",
|
|
2130
|
+
"module": "components/badge/badge.component.js"
|
|
2131
|
+
}
|
|
2132
|
+
}
|
|
2133
|
+
]
|
|
2134
|
+
},
|
|
2135
2135
|
{
|
|
2136
2136
|
"kind": "javascript-module",
|
|
2137
2137
|
"path": "components/bullet/bullet.component.js",
|
|
@@ -8371,11 +8371,14 @@
|
|
|
8371
8371
|
"privacy": "private",
|
|
8372
8372
|
"parameters": [
|
|
8373
8373
|
{
|
|
8374
|
-
"name": "
|
|
8374
|
+
"name": "event",
|
|
8375
8375
|
"type": {
|
|
8376
|
-
"text": "
|
|
8377
|
-
}
|
|
8378
|
-
|
|
8376
|
+
"text": "KeyboardEvent"
|
|
8377
|
+
}
|
|
8378
|
+
},
|
|
8379
|
+
{
|
|
8380
|
+
"description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element.",
|
|
8381
|
+
"name": "direction"
|
|
8379
8382
|
}
|
|
8380
8383
|
],
|
|
8381
8384
|
"description": "Traps focus within the container.",
|
|
@@ -10195,11 +10198,14 @@
|
|
|
10195
10198
|
"privacy": "private",
|
|
10196
10199
|
"parameters": [
|
|
10197
10200
|
{
|
|
10198
|
-
"name": "
|
|
10201
|
+
"name": "event",
|
|
10199
10202
|
"type": {
|
|
10200
|
-
"text": "
|
|
10201
|
-
}
|
|
10202
|
-
|
|
10203
|
+
"text": "KeyboardEvent"
|
|
10204
|
+
}
|
|
10205
|
+
},
|
|
10206
|
+
{
|
|
10207
|
+
"description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element.",
|
|
10208
|
+
"name": "direction"
|
|
10203
10209
|
}
|
|
10204
10210
|
],
|
|
10205
10211
|
"description": "Traps focus within the container.",
|
|
@@ -15782,13 +15788,41 @@
|
|
|
15782
15788
|
},
|
|
15783
15789
|
{
|
|
15784
15790
|
"kind": "javascript-module",
|
|
15785
|
-
"path": "components/
|
|
15791
|
+
"path": "components/menuitemradio/menuitemradio.component.js",
|
|
15786
15792
|
"declarations": [
|
|
15787
15793
|
{
|
|
15788
15794
|
"kind": "class",
|
|
15789
|
-
"description": "
|
|
15790
|
-
"name": "
|
|
15795
|
+
"description": "A menuitemradio component is a checkable menuitem that is used in a menu.\nA menuitemradio should be checked only one at a time. <br/>\nThere should be no focusable descendants inside this menuitemradio component.\n\nThe `aria-checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.\n\nIf you want more than one item in a group to be checked, consider using menuitemcheckbox component.\n\nIf a menuitemradio is disabled, then the `aria-disabled` attribute is set to `true`.",
|
|
15796
|
+
"name": "MenuItemRadio",
|
|
15791
15797
|
"members": [
|
|
15798
|
+
{
|
|
15799
|
+
"kind": "field",
|
|
15800
|
+
"name": "ariaChecked",
|
|
15801
|
+
"type": {
|
|
15802
|
+
"text": "AriaCheckedStates"
|
|
15803
|
+
},
|
|
15804
|
+
"description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
|
|
15805
|
+
"default": "'false'",
|
|
15806
|
+
"attribute": "aria-checked",
|
|
15807
|
+
"reflects": true
|
|
15808
|
+
},
|
|
15809
|
+
{
|
|
15810
|
+
"kind": "field",
|
|
15811
|
+
"name": "name",
|
|
15812
|
+
"type": {
|
|
15813
|
+
"text": "string"
|
|
15814
|
+
},
|
|
15815
|
+
"default": "''",
|
|
15816
|
+
"description": "The name attribute is used to group radio items within the same menu container.",
|
|
15817
|
+
"attribute": "name",
|
|
15818
|
+
"reflects": true
|
|
15819
|
+
},
|
|
15820
|
+
{
|
|
15821
|
+
"kind": "field",
|
|
15822
|
+
"name": "menuitemradioHandleClick",
|
|
15823
|
+
"privacy": "private",
|
|
15824
|
+
"description": "Handles click events to set checked state and uncheck siblings in the same group and container.\nIf the menuitemradio is not checked, it sets its aria-checked state to `true`\nand sets all other menuitemradio elements of the same group with aria-checked state to `false`."
|
|
15825
|
+
},
|
|
15792
15826
|
{
|
|
15793
15827
|
"kind": "field",
|
|
15794
15828
|
"name": "arrowPosition",
|
|
@@ -15797,7 +15831,11 @@
|
|
|
15797
15831
|
},
|
|
15798
15832
|
"description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
|
|
15799
15833
|
"attribute": "arrow-position",
|
|
15800
|
-
"reflects": true
|
|
15834
|
+
"reflects": true,
|
|
15835
|
+
"inheritedFrom": {
|
|
15836
|
+
"name": "MenuItem",
|
|
15837
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
15838
|
+
}
|
|
15801
15839
|
},
|
|
15802
15840
|
{
|
|
15803
15841
|
"kind": "field",
|
|
@@ -15807,7 +15845,11 @@
|
|
|
15807
15845
|
},
|
|
15808
15846
|
"description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
|
|
15809
15847
|
"attribute": "arrow-direction",
|
|
15810
|
-
"reflects": true
|
|
15848
|
+
"reflects": true,
|
|
15849
|
+
"inheritedFrom": {
|
|
15850
|
+
"name": "MenuItem",
|
|
15851
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
15852
|
+
}
|
|
15811
15853
|
},
|
|
15812
15854
|
{
|
|
15813
15855
|
"kind": "method",
|
|
@@ -15851,7 +15893,11 @@
|
|
|
15851
15893
|
"description": "The keyboard event that triggered the action."
|
|
15852
15894
|
}
|
|
15853
15895
|
],
|
|
15854
|
-
"description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page."
|
|
15896
|
+
"description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.",
|
|
15897
|
+
"inheritedFrom": {
|
|
15898
|
+
"name": "MenuItem",
|
|
15899
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
15900
|
+
}
|
|
15855
15901
|
},
|
|
15856
15902
|
{
|
|
15857
15903
|
"kind": "method",
|
|
@@ -16172,7 +16218,12 @@
|
|
|
16172
16218
|
],
|
|
16173
16219
|
"events": [
|
|
16174
16220
|
{
|
|
16175
|
-
"description": "(React:
|
|
16221
|
+
"description": "(React: onChange) This event is dispatched when the menuitemradio changes.",
|
|
16222
|
+
"name": "change",
|
|
16223
|
+
"reactName": "onChange"
|
|
16224
|
+
},
|
|
16225
|
+
{
|
|
16226
|
+
"description": "(React: onClick) This event is dispatched when the menuitemradio is clicked.",
|
|
16176
16227
|
"name": "click",
|
|
16177
16228
|
"reactName": "onClick",
|
|
16178
16229
|
"inheritedFrom": {
|
|
@@ -16181,27 +16232,27 @@
|
|
|
16181
16232
|
}
|
|
16182
16233
|
},
|
|
16183
16234
|
{
|
|
16184
|
-
"description": "(React:
|
|
16185
|
-
"name": "
|
|
16186
|
-
"reactName": "
|
|
16235
|
+
"description": "(React: onFocus) This event is dispatched when the menuitemradio receives focus.",
|
|
16236
|
+
"name": "focus",
|
|
16237
|
+
"reactName": "onFocus",
|
|
16187
16238
|
"inheritedFrom": {
|
|
16188
16239
|
"name": "ListItem",
|
|
16189
16240
|
"module": "src/components/listitem/listitem.component.ts"
|
|
16190
16241
|
}
|
|
16191
16242
|
},
|
|
16192
16243
|
{
|
|
16193
|
-
"description": "(React:
|
|
16194
|
-
"name": "
|
|
16195
|
-
"reactName": "
|
|
16244
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
|
|
16245
|
+
"name": "keydown",
|
|
16246
|
+
"reactName": "onKeyDown",
|
|
16196
16247
|
"inheritedFrom": {
|
|
16197
16248
|
"name": "ListItem",
|
|
16198
16249
|
"module": "src/components/listitem/listitem.component.ts"
|
|
16199
16250
|
}
|
|
16200
16251
|
},
|
|
16201
16252
|
{
|
|
16202
|
-
"description": "(React:
|
|
16203
|
-
"name": "
|
|
16204
|
-
"reactName": "
|
|
16253
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the menuitem.",
|
|
16254
|
+
"name": "keyup",
|
|
16255
|
+
"reactName": "onKeyUp",
|
|
16205
16256
|
"inheritedFrom": {
|
|
16206
16257
|
"name": "ListItem",
|
|
16207
16258
|
"module": "src/components/listitem/listitem.component.ts"
|
|
@@ -16209,13 +16260,35 @@
|
|
|
16209
16260
|
}
|
|
16210
16261
|
],
|
|
16211
16262
|
"attributes": [
|
|
16263
|
+
{
|
|
16264
|
+
"name": "aria-checked",
|
|
16265
|
+
"type": {
|
|
16266
|
+
"text": "AriaCheckedStates"
|
|
16267
|
+
},
|
|
16268
|
+
"description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
|
|
16269
|
+
"default": "'false'",
|
|
16270
|
+
"fieldName": "ariaChecked"
|
|
16271
|
+
},
|
|
16272
|
+
{
|
|
16273
|
+
"name": "name",
|
|
16274
|
+
"type": {
|
|
16275
|
+
"text": "string"
|
|
16276
|
+
},
|
|
16277
|
+
"default": "''",
|
|
16278
|
+
"description": "The name attribute is used to group radio items within the same menu container.",
|
|
16279
|
+
"fieldName": "name"
|
|
16280
|
+
},
|
|
16212
16281
|
{
|
|
16213
16282
|
"name": "arrow-position",
|
|
16214
16283
|
"type": {
|
|
16215
16284
|
"text": "ArrowPositions | undefined"
|
|
16216
16285
|
},
|
|
16217
16286
|
"description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
|
|
16218
|
-
"fieldName": "arrowPosition"
|
|
16287
|
+
"fieldName": "arrowPosition",
|
|
16288
|
+
"inheritedFrom": {
|
|
16289
|
+
"name": "MenuItem",
|
|
16290
|
+
"module": "src/components/menuitem/menuitem.component.ts"
|
|
16291
|
+
}
|
|
16219
16292
|
},
|
|
16220
16293
|
{
|
|
16221
16294
|
"name": "arrow-direction",
|
|
@@ -16223,7 +16296,11 @@
|
|
|
16223
16296
|
"text": "ArrowDirections | undefined"
|
|
16224
16297
|
},
|
|
16225
16298
|
"description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
|
|
16226
|
-
"fieldName": "arrowDirection"
|
|
16299
|
+
"fieldName": "arrowDirection",
|
|
16300
|
+
"inheritedFrom": {
|
|
16301
|
+
"name": "MenuItem",
|
|
16302
|
+
"module": "src/components/menuitem/menuitem.component.ts"
|
|
16303
|
+
}
|
|
16227
16304
|
},
|
|
16228
16305
|
{
|
|
16229
16306
|
"name": "disabled",
|
|
@@ -16351,11 +16428,11 @@
|
|
|
16351
16428
|
}
|
|
16352
16429
|
],
|
|
16353
16430
|
"superclass": {
|
|
16354
|
-
"name": "
|
|
16355
|
-
"module": "/src/components/
|
|
16431
|
+
"name": "MenuItem",
|
|
16432
|
+
"module": "/src/components/menuitem/menuitem.component"
|
|
16356
16433
|
},
|
|
16357
|
-
"tagName": "mdc-
|
|
16358
|
-
"jsDoc": "/**\n *
|
|
16434
|
+
"tagName": "mdc-menuitemradio",
|
|
16435
|
+
"jsDoc": "/**\n * A menuitemradio component is a checkable menuitem that is used in a menu.\n * A menuitemradio should be checked only one at a time. <br/>\n * There should be no focusable descendants inside this menuitemradio component.\n *\n * The `aria-checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.\n *\n * If you want more than one item in a group to be checked, consider using menuitemcheckbox component.\n *\n * If a menuitemradio is disabled, then the `aria-disabled` attribute is set to `true`.\n *\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @tagname mdc-menuitemradio\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemradio changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.\n */",
|
|
16359
16436
|
"customElement": true,
|
|
16360
16437
|
"slots": [
|
|
16361
16438
|
{
|
|
@@ -16488,8 +16565,8 @@
|
|
|
16488
16565
|
"kind": "js",
|
|
16489
16566
|
"name": "default",
|
|
16490
16567
|
"declaration": {
|
|
16491
|
-
"name": "
|
|
16492
|
-
"module": "components/
|
|
16568
|
+
"name": "MenuItemRadio",
|
|
16569
|
+
"module": "components/menuitemradio/menuitemradio.component.js"
|
|
16493
16570
|
}
|
|
16494
16571
|
}
|
|
16495
16572
|
]
|
|
@@ -17318,41 +17395,13 @@
|
|
|
17318
17395
|
},
|
|
17319
17396
|
{
|
|
17320
17397
|
"kind": "javascript-module",
|
|
17321
|
-
"path": "components/
|
|
17398
|
+
"path": "components/menuitem/menuitem.component.js",
|
|
17322
17399
|
"declarations": [
|
|
17323
17400
|
{
|
|
17324
17401
|
"kind": "class",
|
|
17325
|
-
"description": "
|
|
17326
|
-
"name": "
|
|
17402
|
+
"description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use mdc-menu as a parent element even when there is only menuitem for a11y purpose.",
|
|
17403
|
+
"name": "MenuItem",
|
|
17327
17404
|
"members": [
|
|
17328
|
-
{
|
|
17329
|
-
"kind": "field",
|
|
17330
|
-
"name": "ariaChecked",
|
|
17331
|
-
"type": {
|
|
17332
|
-
"text": "AriaCheckedStates"
|
|
17333
|
-
},
|
|
17334
|
-
"description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
|
|
17335
|
-
"default": "'false'",
|
|
17336
|
-
"attribute": "aria-checked",
|
|
17337
|
-
"reflects": true
|
|
17338
|
-
},
|
|
17339
|
-
{
|
|
17340
|
-
"kind": "field",
|
|
17341
|
-
"name": "name",
|
|
17342
|
-
"type": {
|
|
17343
|
-
"text": "string"
|
|
17344
|
-
},
|
|
17345
|
-
"default": "''",
|
|
17346
|
-
"description": "The name attribute is used to group radio items within the same menu container.",
|
|
17347
|
-
"attribute": "name",
|
|
17348
|
-
"reflects": true
|
|
17349
|
-
},
|
|
17350
|
-
{
|
|
17351
|
-
"kind": "field",
|
|
17352
|
-
"name": "menuitemradioHandleClick",
|
|
17353
|
-
"privacy": "private",
|
|
17354
|
-
"description": "Handles click events to set checked state and uncheck siblings in the same group and container.\nIf the menuitemradio is not checked, it sets its aria-checked state to `true`\nand sets all other menuitemradio elements of the same group with aria-checked state to `false`."
|
|
17355
|
-
},
|
|
17356
17405
|
{
|
|
17357
17406
|
"kind": "field",
|
|
17358
17407
|
"name": "arrowPosition",
|
|
@@ -17361,11 +17410,7 @@
|
|
|
17361
17410
|
},
|
|
17362
17411
|
"description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
|
|
17363
17412
|
"attribute": "arrow-position",
|
|
17364
|
-
"reflects": true
|
|
17365
|
-
"inheritedFrom": {
|
|
17366
|
-
"name": "MenuItem",
|
|
17367
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
17368
|
-
}
|
|
17413
|
+
"reflects": true
|
|
17369
17414
|
},
|
|
17370
17415
|
{
|
|
17371
17416
|
"kind": "field",
|
|
@@ -17375,11 +17420,7 @@
|
|
|
17375
17420
|
},
|
|
17376
17421
|
"description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
|
|
17377
17422
|
"attribute": "arrow-direction",
|
|
17378
|
-
"reflects": true
|
|
17379
|
-
"inheritedFrom": {
|
|
17380
|
-
"name": "MenuItem",
|
|
17381
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
17382
|
-
}
|
|
17423
|
+
"reflects": true
|
|
17383
17424
|
},
|
|
17384
17425
|
{
|
|
17385
17426
|
"kind": "method",
|
|
@@ -17423,11 +17464,7 @@
|
|
|
17423
17464
|
"description": "The keyboard event that triggered the action."
|
|
17424
17465
|
}
|
|
17425
17466
|
],
|
|
17426
|
-
"description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page."
|
|
17427
|
-
"inheritedFrom": {
|
|
17428
|
-
"name": "MenuItem",
|
|
17429
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
17430
|
-
}
|
|
17467
|
+
"description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page."
|
|
17431
17468
|
},
|
|
17432
17469
|
{
|
|
17433
17470
|
"kind": "method",
|
|
@@ -17748,12 +17785,7 @@
|
|
|
17748
17785
|
],
|
|
17749
17786
|
"events": [
|
|
17750
17787
|
{
|
|
17751
|
-
"description": "(React:
|
|
17752
|
-
"name": "change",
|
|
17753
|
-
"reactName": "onChange"
|
|
17754
|
-
},
|
|
17755
|
-
{
|
|
17756
|
-
"description": "(React: onClick) This event is dispatched when the menuitemradio is clicked.",
|
|
17788
|
+
"description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
|
|
17757
17789
|
"name": "click",
|
|
17758
17790
|
"reactName": "onClick",
|
|
17759
17791
|
"inheritedFrom": {
|
|
@@ -17761,15 +17793,6 @@
|
|
|
17761
17793
|
"module": "src/components/listitem/listitem.component.ts"
|
|
17762
17794
|
}
|
|
17763
17795
|
},
|
|
17764
|
-
{
|
|
17765
|
-
"description": "(React: onFocus) This event is dispatched when the menuitemradio receives focus.",
|
|
17766
|
-
"name": "focus",
|
|
17767
|
-
"reactName": "onFocus",
|
|
17768
|
-
"inheritedFrom": {
|
|
17769
|
-
"name": "ListItem",
|
|
17770
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
17771
|
-
}
|
|
17772
|
-
},
|
|
17773
17796
|
{
|
|
17774
17797
|
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
|
|
17775
17798
|
"name": "keydown",
|
|
@@ -17787,38 +17810,25 @@
|
|
|
17787
17810
|
"name": "ListItem",
|
|
17788
17811
|
"module": "src/components/listitem/listitem.component.ts"
|
|
17789
17812
|
}
|
|
17813
|
+
},
|
|
17814
|
+
{
|
|
17815
|
+
"description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
|
|
17816
|
+
"name": "focus",
|
|
17817
|
+
"reactName": "onFocus",
|
|
17818
|
+
"inheritedFrom": {
|
|
17819
|
+
"name": "ListItem",
|
|
17820
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
17821
|
+
}
|
|
17790
17822
|
}
|
|
17791
17823
|
],
|
|
17792
17824
|
"attributes": [
|
|
17793
|
-
{
|
|
17794
|
-
"name": "aria-checked",
|
|
17795
|
-
"type": {
|
|
17796
|
-
"text": "AriaCheckedStates"
|
|
17797
|
-
},
|
|
17798
|
-
"description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
|
|
17799
|
-
"default": "'false'",
|
|
17800
|
-
"fieldName": "ariaChecked"
|
|
17801
|
-
},
|
|
17802
|
-
{
|
|
17803
|
-
"name": "name",
|
|
17804
|
-
"type": {
|
|
17805
|
-
"text": "string"
|
|
17806
|
-
},
|
|
17807
|
-
"default": "''",
|
|
17808
|
-
"description": "The name attribute is used to group radio items within the same menu container.",
|
|
17809
|
-
"fieldName": "name"
|
|
17810
|
-
},
|
|
17811
17825
|
{
|
|
17812
17826
|
"name": "arrow-position",
|
|
17813
17827
|
"type": {
|
|
17814
17828
|
"text": "ArrowPositions | undefined"
|
|
17815
17829
|
},
|
|
17816
17830
|
"description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
|
|
17817
|
-
"fieldName": "arrowPosition"
|
|
17818
|
-
"inheritedFrom": {
|
|
17819
|
-
"name": "MenuItem",
|
|
17820
|
-
"module": "src/components/menuitem/menuitem.component.ts"
|
|
17821
|
-
}
|
|
17831
|
+
"fieldName": "arrowPosition"
|
|
17822
17832
|
},
|
|
17823
17833
|
{
|
|
17824
17834
|
"name": "arrow-direction",
|
|
@@ -17826,11 +17836,7 @@
|
|
|
17826
17836
|
"text": "ArrowDirections | undefined"
|
|
17827
17837
|
},
|
|
17828
17838
|
"description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
|
|
17829
|
-
"fieldName": "arrowDirection"
|
|
17830
|
-
"inheritedFrom": {
|
|
17831
|
-
"name": "MenuItem",
|
|
17832
|
-
"module": "src/components/menuitem/menuitem.component.ts"
|
|
17833
|
-
}
|
|
17839
|
+
"fieldName": "arrowDirection"
|
|
17834
17840
|
},
|
|
17835
17841
|
{
|
|
17836
17842
|
"name": "disabled",
|
|
@@ -17958,11 +17964,11 @@
|
|
|
17958
17964
|
}
|
|
17959
17965
|
],
|
|
17960
17966
|
"superclass": {
|
|
17961
|
-
"name": "
|
|
17962
|
-
"module": "/src/components/
|
|
17967
|
+
"name": "ListItem",
|
|
17968
|
+
"module": "/src/components/listitem/listitem.component"
|
|
17963
17969
|
},
|
|
17964
|
-
"tagName": "mdc-
|
|
17965
|
-
"jsDoc": "/**\n *
|
|
17970
|
+
"tagName": "mdc-menuitem",
|
|
17971
|
+
"jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use mdc-menu as a parent element even when there is only menuitem for a11y purpose.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-tooltip\n *\n * @tagname mdc-menuitem\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n */",
|
|
17966
17972
|
"customElement": true,
|
|
17967
17973
|
"slots": [
|
|
17968
17974
|
{
|
|
@@ -18095,8 +18101,8 @@
|
|
|
18095
18101
|
"kind": "js",
|
|
18096
18102
|
"name": "default",
|
|
18097
18103
|
"declaration": {
|
|
18098
|
-
"name": "
|
|
18099
|
-
"module": "components/
|
|
18104
|
+
"name": "MenuItem",
|
|
18105
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
18100
18106
|
}
|
|
18101
18107
|
}
|
|
18102
18108
|
]
|
|
@@ -18806,11 +18812,14 @@
|
|
|
18806
18812
|
"privacy": "private",
|
|
18807
18813
|
"parameters": [
|
|
18808
18814
|
{
|
|
18809
|
-
"name": "
|
|
18815
|
+
"name": "event",
|
|
18810
18816
|
"type": {
|
|
18811
|
-
"text": "
|
|
18812
|
-
}
|
|
18813
|
-
|
|
18817
|
+
"text": "KeyboardEvent"
|
|
18818
|
+
}
|
|
18819
|
+
},
|
|
18820
|
+
{
|
|
18821
|
+
"description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element.",
|
|
18822
|
+
"name": "direction"
|
|
18814
18823
|
}
|
|
18815
18824
|
],
|
|
18816
18825
|
"description": "Traps focus within the container.",
|
|
@@ -23733,11 +23742,14 @@
|
|
|
23733
23742
|
"privacy": "private",
|
|
23734
23743
|
"parameters": [
|
|
23735
23744
|
{
|
|
23736
|
-
"name": "
|
|
23745
|
+
"name": "event",
|
|
23737
23746
|
"type": {
|
|
23738
|
-
"text": "
|
|
23739
|
-
}
|
|
23740
|
-
|
|
23747
|
+
"text": "KeyboardEvent"
|
|
23748
|
+
}
|
|
23749
|
+
},
|
|
23750
|
+
{
|
|
23751
|
+
"description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element.",
|
|
23752
|
+
"name": "direction"
|
|
23741
23753
|
}
|
|
23742
23754
|
],
|
|
23743
23755
|
"description": "Traps focus within the container.",
|
|
@@ -33181,11 +33193,14 @@
|
|
|
33181
33193
|
"privacy": "private",
|
|
33182
33194
|
"parameters": [
|
|
33183
33195
|
{
|
|
33184
|
-
"name": "
|
|
33196
|
+
"name": "event",
|
|
33185
33197
|
"type": {
|
|
33186
|
-
"text": "
|
|
33187
|
-
}
|
|
33188
|
-
|
|
33198
|
+
"text": "KeyboardEvent"
|
|
33199
|
+
}
|
|
33200
|
+
},
|
|
33201
|
+
{
|
|
33202
|
+
"description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element.",
|
|
33203
|
+
"name": "direction"
|
|
33189
33204
|
}
|
|
33190
33205
|
],
|
|
33191
33206
|
"description": "Traps focus within the container.",
|
|
@@ -34990,11 +35005,14 @@
|
|
|
34990
35005
|
"privacy": "private",
|
|
34991
35006
|
"parameters": [
|
|
34992
35007
|
{
|
|
34993
|
-
"name": "
|
|
35008
|
+
"name": "event",
|
|
34994
35009
|
"type": {
|
|
34995
|
-
"text": "
|
|
34996
|
-
}
|
|
34997
|
-
|
|
35010
|
+
"text": "KeyboardEvent"
|
|
35011
|
+
}
|
|
35012
|
+
},
|
|
35013
|
+
{
|
|
35014
|
+
"description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element.",
|
|
35015
|
+
"name": "direction"
|
|
34998
35016
|
}
|
|
34999
35017
|
],
|
|
35000
35018
|
"description": "Traps focus within the container.",
|
|
@@ -37772,11 +37790,14 @@
|
|
|
37772
37790
|
"privacy": "private",
|
|
37773
37791
|
"parameters": [
|
|
37774
37792
|
{
|
|
37775
|
-
"name": "
|
|
37793
|
+
"name": "event",
|
|
37776
37794
|
"type": {
|
|
37777
|
-
"text": "
|
|
37778
|
-
}
|
|
37779
|
-
|
|
37795
|
+
"text": "KeyboardEvent"
|
|
37796
|
+
}
|
|
37797
|
+
},
|
|
37798
|
+
{
|
|
37799
|
+
"description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element.",
|
|
37800
|
+
"name": "direction"
|
|
37780
37801
|
}
|
|
37781
37802
|
],
|
|
37782
37803
|
"description": "Traps focus within the container."
|