@momentum-design/components 0.71.1 → 0.72.0
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 +350 -339
- package/dist/browser/index.js.map +4 -4
- package/dist/components/animation/animation.component.d.ts +76 -0
- package/dist/components/animation/animation.component.js +168 -0
- package/dist/components/animation/animation.constants.d.ts +7 -0
- package/dist/components/animation/animation.constants.js +8 -0
- package/dist/components/animation/animation.styles.d.ts +2 -0
- package/dist/components/animation/animation.styles.js +3 -0
- package/dist/components/animation/animation.types.d.ts +10 -0
- package/dist/components/animation/animation.types.js +1 -0
- package/dist/components/animation/index.d.ts +7 -0
- package/dist/components/animation/index.js +4 -0
- package/dist/custom-elements.json +478 -274
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/react/animation/index.d.ts +18 -0
- package/dist/react/animation/index.js +26 -0
- package/dist/react/index.d.ts +3 -2
- package/dist/react/index.js +3 -2
- package/package.json +3 -1
|
@@ -2,6 +2,271 @@
|
|
|
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
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
136
|
+
"name": "complete",
|
|
137
|
+
"reactName": "onComplete"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
141
|
+
"name": "error",
|
|
142
|
+
"reactName": "onError"
|
|
143
|
+
}
|
|
144
|
+
],
|
|
145
|
+
"attributes": [
|
|
146
|
+
{
|
|
147
|
+
"name": "name",
|
|
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
|
+
},
|
|
5
270
|
{
|
|
6
271
|
"kind": "javascript-module",
|
|
7
272
|
"path": "components/alertchip/alertchip.component.js",
|
|
@@ -494,93 +759,32 @@
|
|
|
494
759
|
},
|
|
495
760
|
{
|
|
496
761
|
"kind": "javascript-module",
|
|
497
|
-
"path": "components/
|
|
762
|
+
"path": "components/avatar/avatar.component.js",
|
|
498
763
|
"declarations": [
|
|
499
764
|
{
|
|
500
765
|
"kind": "class",
|
|
501
|
-
"description": "The `mdc-
|
|
502
|
-
"name": "
|
|
503
|
-
"
|
|
504
|
-
{
|
|
505
|
-
"description": "The main container for styling the header.",
|
|
506
|
-
"name": "container"
|
|
507
|
-
},
|
|
766
|
+
"description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
|
|
767
|
+
"name": "Avatar",
|
|
768
|
+
"cssProperties": [
|
|
508
769
|
{
|
|
509
|
-
"description": "
|
|
510
|
-
"name": "
|
|
770
|
+
"description": "Allows customization of the default background color.",
|
|
771
|
+
"name": "--mdc-avatar-default-background-color"
|
|
511
772
|
},
|
|
512
773
|
{
|
|
513
|
-
"description": "
|
|
514
|
-
"name": "
|
|
774
|
+
"description": "Allows customization of the default foreground color.",
|
|
775
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
515
776
|
},
|
|
516
777
|
{
|
|
517
|
-
"description": "
|
|
518
|
-
"name": "
|
|
519
|
-
}
|
|
520
|
-
],
|
|
521
|
-
"slots": [
|
|
522
|
-
{
|
|
523
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
524
|
-
"name": "leading"
|
|
778
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
779
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
525
780
|
},
|
|
526
781
|
{
|
|
527
|
-
"description": "
|
|
528
|
-
"name": "
|
|
782
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
783
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
529
784
|
},
|
|
530
785
|
{
|
|
531
|
-
"description": "
|
|
532
|
-
"name": "
|
|
533
|
-
}
|
|
534
|
-
],
|
|
535
|
-
"members": [],
|
|
536
|
-
"superclass": {
|
|
537
|
-
"name": "Component",
|
|
538
|
-
"module": "/src/models"
|
|
539
|
-
},
|
|
540
|
-
"tagName": "mdc-appheader",
|
|
541
|
-
"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 */",
|
|
542
|
-
"customElement": true
|
|
543
|
-
}
|
|
544
|
-
],
|
|
545
|
-
"exports": [
|
|
546
|
-
{
|
|
547
|
-
"kind": "js",
|
|
548
|
-
"name": "default",
|
|
549
|
-
"declaration": {
|
|
550
|
-
"name": "Appheader",
|
|
551
|
-
"module": "components/appheader/appheader.component.js"
|
|
552
|
-
}
|
|
553
|
-
}
|
|
554
|
-
]
|
|
555
|
-
},
|
|
556
|
-
{
|
|
557
|
-
"kind": "javascript-module",
|
|
558
|
-
"path": "components/avatar/avatar.component.js",
|
|
559
|
-
"declarations": [
|
|
560
|
-
{
|
|
561
|
-
"kind": "class",
|
|
562
|
-
"description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
|
|
563
|
-
"name": "Avatar",
|
|
564
|
-
"cssProperties": [
|
|
565
|
-
{
|
|
566
|
-
"description": "Allows customization of the default background color.",
|
|
567
|
-
"name": "--mdc-avatar-default-background-color"
|
|
568
|
-
},
|
|
569
|
-
{
|
|
570
|
-
"description": "Allows customization of the default foreground color.",
|
|
571
|
-
"name": "--mdc-avatar-default-foreground-color"
|
|
572
|
-
},
|
|
573
|
-
{
|
|
574
|
-
"description": "Allows customization of the loading indicator background color.",
|
|
575
|
-
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
576
|
-
},
|
|
577
|
-
{
|
|
578
|
-
"description": "Allows customization of the loading indicator foreground color.",
|
|
579
|
-
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
580
|
-
},
|
|
581
|
-
{
|
|
582
|
-
"description": "Allows customization of the loading overlay background color.",
|
|
583
|
-
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
786
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
787
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
584
788
|
}
|
|
585
789
|
],
|
|
586
790
|
"members": [
|
|
@@ -12409,205 +12613,6 @@
|
|
|
12409
12613
|
}
|
|
12410
12614
|
]
|
|
12411
12615
|
},
|
|
12412
|
-
{
|
|
12413
|
-
"kind": "javascript-module",
|
|
12414
|
-
"path": "components/inputchip/inputchip.component.js",
|
|
12415
|
-
"declarations": [
|
|
12416
|
-
{
|
|
12417
|
-
"kind": "class",
|
|
12418
|
-
"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.",
|
|
12419
|
-
"name": "InputChip",
|
|
12420
|
-
"cssProperties": [
|
|
12421
|
-
{
|
|
12422
|
-
"description": "The color of the chip.",
|
|
12423
|
-
"name": "--mdc-chip-color"
|
|
12424
|
-
},
|
|
12425
|
-
{
|
|
12426
|
-
"description": "The border color of the chip.",
|
|
12427
|
-
"name": "--mdc-chip-border-color"
|
|
12428
|
-
},
|
|
12429
|
-
{
|
|
12430
|
-
"description": "The background color of the chip.",
|
|
12431
|
-
"name": "--mdc-chip-background-color"
|
|
12432
|
-
}
|
|
12433
|
-
],
|
|
12434
|
-
"members": [
|
|
12435
|
-
{
|
|
12436
|
-
"kind": "field",
|
|
12437
|
-
"name": "label",
|
|
12438
|
-
"type": {
|
|
12439
|
-
"text": "string"
|
|
12440
|
-
},
|
|
12441
|
-
"default": "''",
|
|
12442
|
-
"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.",
|
|
12443
|
-
"attribute": "label"
|
|
12444
|
-
},
|
|
12445
|
-
{
|
|
12446
|
-
"kind": "field",
|
|
12447
|
-
"name": "error",
|
|
12448
|
-
"type": {
|
|
12449
|
-
"text": "boolean"
|
|
12450
|
-
},
|
|
12451
|
-
"default": "false",
|
|
12452
|
-
"description": "The error state of the inputchip.",
|
|
12453
|
-
"attribute": "error"
|
|
12454
|
-
},
|
|
12455
|
-
{
|
|
12456
|
-
"kind": "field",
|
|
12457
|
-
"name": "clearAriaLabel",
|
|
12458
|
-
"type": {
|
|
12459
|
-
"text": "string"
|
|
12460
|
-
},
|
|
12461
|
-
"default": "''",
|
|
12462
|
-
"description": "The aria-label of the close button.",
|
|
12463
|
-
"attribute": "clear-aria-label"
|
|
12464
|
-
},
|
|
12465
|
-
{
|
|
12466
|
-
"kind": "method",
|
|
12467
|
-
"name": "renderIcon",
|
|
12468
|
-
"privacy": "private",
|
|
12469
|
-
"description": "Renders the icon element if available.",
|
|
12470
|
-
"return": {
|
|
12471
|
-
"type": {
|
|
12472
|
-
"text": ""
|
|
12473
|
-
}
|
|
12474
|
-
}
|
|
12475
|
-
},
|
|
12476
|
-
{
|
|
12477
|
-
"kind": "method",
|
|
12478
|
-
"name": "handleClose",
|
|
12479
|
-
"privacy": "private",
|
|
12480
|
-
"description": "Handles the behavior of the close button on click event.",
|
|
12481
|
-
"parameters": [
|
|
12482
|
-
{
|
|
12483
|
-
"description": "The event object.",
|
|
12484
|
-
"name": "event"
|
|
12485
|
-
}
|
|
12486
|
-
]
|
|
12487
|
-
},
|
|
12488
|
-
{
|
|
12489
|
-
"kind": "field",
|
|
12490
|
-
"name": "iconName",
|
|
12491
|
-
"type": {
|
|
12492
|
-
"text": "IconNames | undefined"
|
|
12493
|
-
},
|
|
12494
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
12495
|
-
"attribute": "icon-name",
|
|
12496
|
-
"inheritedFrom": {
|
|
12497
|
-
"name": "IconNameMixin",
|
|
12498
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
12499
|
-
}
|
|
12500
|
-
},
|
|
12501
|
-
{
|
|
12502
|
-
"kind": "field",
|
|
12503
|
-
"name": "disabled",
|
|
12504
|
-
"type": {
|
|
12505
|
-
"text": "boolean | undefined"
|
|
12506
|
-
},
|
|
12507
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
12508
|
-
"default": "undefined",
|
|
12509
|
-
"attribute": "disabled",
|
|
12510
|
-
"reflects": true,
|
|
12511
|
-
"inheritedFrom": {
|
|
12512
|
-
"name": "DisabledMixin",
|
|
12513
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
12514
|
-
}
|
|
12515
|
-
}
|
|
12516
|
-
],
|
|
12517
|
-
"events": [
|
|
12518
|
-
{
|
|
12519
|
-
"name": "remove",
|
|
12520
|
-
"type": {
|
|
12521
|
-
"text": "CustomEvent"
|
|
12522
|
-
},
|
|
12523
|
-
"description": "This event is dispatched when the close button is activated. It bubbles and is composed.",
|
|
12524
|
-
"reactName": "onRemove"
|
|
12525
|
-
}
|
|
12526
|
-
],
|
|
12527
|
-
"attributes": [
|
|
12528
|
-
{
|
|
12529
|
-
"name": "label",
|
|
12530
|
-
"type": {
|
|
12531
|
-
"text": "string"
|
|
12532
|
-
},
|
|
12533
|
-
"default": "''",
|
|
12534
|
-
"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.",
|
|
12535
|
-
"fieldName": "label"
|
|
12536
|
-
},
|
|
12537
|
-
{
|
|
12538
|
-
"name": "error",
|
|
12539
|
-
"type": {
|
|
12540
|
-
"text": "boolean"
|
|
12541
|
-
},
|
|
12542
|
-
"default": "false",
|
|
12543
|
-
"description": "The error state of the inputchip.",
|
|
12544
|
-
"fieldName": "error"
|
|
12545
|
-
},
|
|
12546
|
-
{
|
|
12547
|
-
"name": "clear-aria-label",
|
|
12548
|
-
"type": {
|
|
12549
|
-
"text": "string"
|
|
12550
|
-
},
|
|
12551
|
-
"default": "''",
|
|
12552
|
-
"description": "The aria-label of the close button.",
|
|
12553
|
-
"fieldName": "clearAriaLabel"
|
|
12554
|
-
},
|
|
12555
|
-
{
|
|
12556
|
-
"name": "icon-name",
|
|
12557
|
-
"type": {
|
|
12558
|
-
"text": "IconNames | undefined"
|
|
12559
|
-
},
|
|
12560
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
12561
|
-
"fieldName": "iconName",
|
|
12562
|
-
"inheritedFrom": {
|
|
12563
|
-
"name": "IconNameMixin",
|
|
12564
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
12565
|
-
}
|
|
12566
|
-
},
|
|
12567
|
-
{
|
|
12568
|
-
"name": "disabled",
|
|
12569
|
-
"type": {
|
|
12570
|
-
"text": "boolean | undefined"
|
|
12571
|
-
},
|
|
12572
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
12573
|
-
"default": "undefined",
|
|
12574
|
-
"fieldName": "disabled",
|
|
12575
|
-
"inheritedFrom": {
|
|
12576
|
-
"name": "DisabledMixin",
|
|
12577
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
12578
|
-
}
|
|
12579
|
-
}
|
|
12580
|
-
],
|
|
12581
|
-
"mixins": [
|
|
12582
|
-
{
|
|
12583
|
-
"name": "IconNameMixin",
|
|
12584
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
12585
|
-
},
|
|
12586
|
-
{
|
|
12587
|
-
"name": "DisabledMixin",
|
|
12588
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
12589
|
-
}
|
|
12590
|
-
],
|
|
12591
|
-
"superclass": {
|
|
12592
|
-
"name": "Component",
|
|
12593
|
-
"module": "/src/models"
|
|
12594
|
-
},
|
|
12595
|
-
"tagName": "mdc-inputchip",
|
|
12596
|
-
"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 */",
|
|
12597
|
-
"customElement": true
|
|
12598
|
-
}
|
|
12599
|
-
],
|
|
12600
|
-
"exports": [
|
|
12601
|
-
{
|
|
12602
|
-
"kind": "js",
|
|
12603
|
-
"name": "default",
|
|
12604
|
-
"declaration": {
|
|
12605
|
-
"name": "InputChip",
|
|
12606
|
-
"module": "components/inputchip/inputchip.component.js"
|
|
12607
|
-
}
|
|
12608
|
-
}
|
|
12609
|
-
]
|
|
12610
|
-
},
|
|
12611
12616
|
{
|
|
12612
12617
|
"kind": "javascript-module",
|
|
12613
12618
|
"path": "components/link/link.component.js",
|
|
@@ -13036,6 +13041,205 @@
|
|
|
13036
13041
|
}
|
|
13037
13042
|
]
|
|
13038
13043
|
},
|
|
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
|
+
},
|
|
13039
13243
|
{
|
|
13040
13244
|
"kind": "javascript-module",
|
|
13041
13245
|
"path": "components/linksimple/linksimple.component.js",
|