@momentum-design/components 0.22.7 → 0.23.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +154 -106
- package/dist/browser/index.js.map +4 -4
- package/dist/components/virtualizedlist/index.d.ts +7 -0
- package/dist/components/virtualizedlist/index.js +4 -0
- package/dist/components/virtualizedlist/virtualizedlist.component.d.ts +79 -0
- package/dist/components/virtualizedlist/virtualizedlist.component.js +135 -0
- package/dist/components/virtualizedlist/virtualizedlist.constants.d.ts +9 -0
- package/dist/components/virtualizedlist/virtualizedlist.constants.js +10 -0
- package/dist/components/virtualizedlist/virtualizedlist.helper.test.d.ts +22 -0
- package/dist/components/virtualizedlist/virtualizedlist.helper.test.js +79 -0
- package/dist/components/virtualizedlist/virtualizedlist.styles.d.ts +2 -0
- package/dist/components/virtualizedlist/virtualizedlist.styles.js +17 -0
- package/dist/components/virtualizedlist/virtualizedlist.test.component.d.ts +17 -0
- package/dist/components/virtualizedlist/virtualizedlist.test.component.js +79 -0
- package/dist/components/virtualizedlist/virtualizedlist.types.d.ts +8 -0
- package/dist/components/virtualizedlist/virtualizedlist.types.js +1 -0
- package/dist/custom-elements.json +520 -309
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/react/index.d.ts +2 -1
- package/dist/react/index.js +2 -1
- package/dist/react/virtualizedlist/index.d.ts +15 -0
- package/dist/react/virtualizedlist/index.js +24 -0
- package/package.json +2 -1
|
@@ -2,6 +2,250 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "components/avatar/avatar.component.js",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"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.",
|
|
12
|
+
"name": "Avatar",
|
|
13
|
+
"cssProperties": [
|
|
14
|
+
{
|
|
15
|
+
"description": "Allows customization of the default background color.",
|
|
16
|
+
"name": "--mdc-avatar-default-background-color"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "Allows customization of the default foreground color.",
|
|
20
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
24
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
28
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
32
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
33
|
+
}
|
|
34
|
+
],
|
|
35
|
+
"members": [
|
|
36
|
+
{
|
|
37
|
+
"kind": "field",
|
|
38
|
+
"name": "src",
|
|
39
|
+
"type": {
|
|
40
|
+
"text": "string | undefined"
|
|
41
|
+
},
|
|
42
|
+
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
43
|
+
"attribute": "src",
|
|
44
|
+
"inheritedFrom": {
|
|
45
|
+
"name": "AvatarComponentMixin",
|
|
46
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"kind": "field",
|
|
51
|
+
"name": "initials",
|
|
52
|
+
"type": {
|
|
53
|
+
"text": "string | undefined"
|
|
54
|
+
},
|
|
55
|
+
"description": "The initials to be displayed for the avatar.",
|
|
56
|
+
"attribute": "initials",
|
|
57
|
+
"inheritedFrom": {
|
|
58
|
+
"name": "AvatarComponentMixin",
|
|
59
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"kind": "field",
|
|
64
|
+
"name": "presence",
|
|
65
|
+
"type": {
|
|
66
|
+
"text": "PresenceType | undefined"
|
|
67
|
+
},
|
|
68
|
+
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
69
|
+
"attribute": "presence",
|
|
70
|
+
"inheritedFrom": {
|
|
71
|
+
"name": "AvatarComponentMixin",
|
|
72
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"kind": "field",
|
|
77
|
+
"name": "size",
|
|
78
|
+
"type": {
|
|
79
|
+
"text": "AvatarSize"
|
|
80
|
+
},
|
|
81
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
82
|
+
"default": "32",
|
|
83
|
+
"attribute": "size",
|
|
84
|
+
"reflects": true,
|
|
85
|
+
"inheritedFrom": {
|
|
86
|
+
"name": "AvatarComponentMixin",
|
|
87
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"kind": "field",
|
|
92
|
+
"name": "counter",
|
|
93
|
+
"type": {
|
|
94
|
+
"text": "number | undefined"
|
|
95
|
+
},
|
|
96
|
+
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
97
|
+
"attribute": "counter",
|
|
98
|
+
"inheritedFrom": {
|
|
99
|
+
"name": "AvatarComponentMixin",
|
|
100
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"kind": "field",
|
|
105
|
+
"name": "isTyping",
|
|
106
|
+
"type": {
|
|
107
|
+
"text": "boolean"
|
|
108
|
+
},
|
|
109
|
+
"default": "false",
|
|
110
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
111
|
+
"attribute": "is-typing",
|
|
112
|
+
"inheritedFrom": {
|
|
113
|
+
"name": "AvatarComponentMixin",
|
|
114
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"kind": "field",
|
|
119
|
+
"name": "iconName",
|
|
120
|
+
"type": {
|
|
121
|
+
"text": "IconNames | undefined"
|
|
122
|
+
},
|
|
123
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
124
|
+
"attribute": "icon-name",
|
|
125
|
+
"inheritedFrom": {
|
|
126
|
+
"name": "IconNameMixin",
|
|
127
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
],
|
|
131
|
+
"mixins": [
|
|
132
|
+
{
|
|
133
|
+
"name": "AvatarComponentMixin",
|
|
134
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"name": "IconNameMixin",
|
|
138
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
139
|
+
}
|
|
140
|
+
],
|
|
141
|
+
"superclass": {
|
|
142
|
+
"name": "Component",
|
|
143
|
+
"module": "/src/models"
|
|
144
|
+
},
|
|
145
|
+
"tagName": "mdc-avatar",
|
|
146
|
+
"jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
|
|
147
|
+
"customElement": true,
|
|
148
|
+
"attributes": [
|
|
149
|
+
{
|
|
150
|
+
"name": "src",
|
|
151
|
+
"type": {
|
|
152
|
+
"text": "string | undefined"
|
|
153
|
+
},
|
|
154
|
+
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
155
|
+
"fieldName": "src",
|
|
156
|
+
"inheritedFrom": {
|
|
157
|
+
"name": "AvatarComponentMixin",
|
|
158
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"name": "initials",
|
|
163
|
+
"type": {
|
|
164
|
+
"text": "string | undefined"
|
|
165
|
+
},
|
|
166
|
+
"description": "The initials to be displayed for the avatar.",
|
|
167
|
+
"fieldName": "initials",
|
|
168
|
+
"inheritedFrom": {
|
|
169
|
+
"name": "AvatarComponentMixin",
|
|
170
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"name": "presence",
|
|
175
|
+
"type": {
|
|
176
|
+
"text": "PresenceType | undefined"
|
|
177
|
+
},
|
|
178
|
+
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
179
|
+
"fieldName": "presence",
|
|
180
|
+
"inheritedFrom": {
|
|
181
|
+
"name": "AvatarComponentMixin",
|
|
182
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"name": "size",
|
|
187
|
+
"type": {
|
|
188
|
+
"text": "AvatarSize"
|
|
189
|
+
},
|
|
190
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
191
|
+
"default": "32",
|
|
192
|
+
"fieldName": "size",
|
|
193
|
+
"inheritedFrom": {
|
|
194
|
+
"name": "AvatarComponentMixin",
|
|
195
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"name": "counter",
|
|
200
|
+
"type": {
|
|
201
|
+
"text": "number | undefined"
|
|
202
|
+
},
|
|
203
|
+
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
204
|
+
"fieldName": "counter",
|
|
205
|
+
"inheritedFrom": {
|
|
206
|
+
"name": "AvatarComponentMixin",
|
|
207
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
208
|
+
}
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"name": "is-typing",
|
|
212
|
+
"type": {
|
|
213
|
+
"text": "boolean"
|
|
214
|
+
},
|
|
215
|
+
"default": "false",
|
|
216
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
217
|
+
"fieldName": "isTyping",
|
|
218
|
+
"inheritedFrom": {
|
|
219
|
+
"name": "AvatarComponentMixin",
|
|
220
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
221
|
+
}
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
"name": "icon-name",
|
|
225
|
+
"type": {
|
|
226
|
+
"text": "IconNames | undefined"
|
|
227
|
+
},
|
|
228
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
229
|
+
"fieldName": "iconName",
|
|
230
|
+
"inheritedFrom": {
|
|
231
|
+
"name": "IconNameMixin",
|
|
232
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
]
|
|
236
|
+
}
|
|
237
|
+
],
|
|
238
|
+
"exports": [
|
|
239
|
+
{
|
|
240
|
+
"kind": "js",
|
|
241
|
+
"name": "default",
|
|
242
|
+
"declaration": {
|
|
243
|
+
"name": "Avatar",
|
|
244
|
+
"module": "components/avatar/avatar.component.js"
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
]
|
|
248
|
+
},
|
|
5
249
|
{
|
|
6
250
|
"kind": "javascript-module",
|
|
7
251
|
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
@@ -760,338 +1004,81 @@
|
|
|
760
1004
|
},
|
|
761
1005
|
{
|
|
762
1006
|
"kind": "method",
|
|
763
|
-
"name": "getBadgeContentBasedOnType",
|
|
764
|
-
"privacy": "private",
|
|
765
|
-
"return": {
|
|
766
|
-
"type": {
|
|
767
|
-
"text": ""
|
|
768
|
-
}
|
|
769
|
-
},
|
|
770
|
-
"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."
|
|
771
|
-
},
|
|
772
|
-
{
|
|
773
|
-
"kind": "field",
|
|
774
|
-
"name": "iconName",
|
|
775
|
-
"type": {
|
|
776
|
-
"text": "IconNames | undefined"
|
|
777
|
-
},
|
|
778
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
779
|
-
"attribute": "icon-name",
|
|
780
|
-
"inheritedFrom": {
|
|
781
|
-
"name": "IconNameMixin",
|
|
782
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
783
|
-
}
|
|
784
|
-
}
|
|
785
|
-
],
|
|
786
|
-
"attributes": [
|
|
787
|
-
{
|
|
788
|
-
"name": "type",
|
|
789
|
-
"type": {
|
|
790
|
-
"text": "BadgeType | undefined"
|
|
791
|
-
},
|
|
792
|
-
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
793
|
-
"fieldName": "type"
|
|
794
|
-
},
|
|
795
|
-
{
|
|
796
|
-
"name": "variant",
|
|
797
|
-
"type": {
|
|
798
|
-
"text": "IconVariant"
|
|
799
|
-
},
|
|
800
|
-
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
801
|
-
"default": "primary",
|
|
802
|
-
"fieldName": "variant"
|
|
803
|
-
},
|
|
804
|
-
{
|
|
805
|
-
"name": "counter",
|
|
806
|
-
"type": {
|
|
807
|
-
"text": "number | undefined"
|
|
808
|
-
},
|
|
809
|
-
"description": "Counter is the number which can be provided in the badge.",
|
|
810
|
-
"fieldName": "counter"
|
|
811
|
-
},
|
|
812
|
-
{
|
|
813
|
-
"name": "max-counter",
|
|
814
|
-
"type": {
|
|
815
|
-
"text": "number"
|
|
816
|
-
},
|
|
817
|
-
"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`.",
|
|
818
|
-
"default": "99",
|
|
819
|
-
"fieldName": "maxCounter"
|
|
820
|
-
},
|
|
821
|
-
{
|
|
822
|
-
"name": "overlay",
|
|
823
|
-
"type": {
|
|
824
|
-
"text": "boolean"
|
|
825
|
-
},
|
|
826
|
-
"default": "false",
|
|
827
|
-
"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.",
|
|
828
|
-
"fieldName": "overlay"
|
|
829
|
-
},
|
|
830
|
-
{
|
|
831
|
-
"name": "aria-label",
|
|
832
|
-
"type": {
|
|
833
|
-
"text": "string | null"
|
|
834
|
-
},
|
|
835
|
-
"default": "null",
|
|
836
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
837
|
-
"fieldName": "ariaLabel"
|
|
838
|
-
},
|
|
839
|
-
{
|
|
840
|
-
"name": "icon-name",
|
|
841
|
-
"type": {
|
|
842
|
-
"text": "IconNames | undefined"
|
|
843
|
-
},
|
|
844
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
845
|
-
"fieldName": "iconName",
|
|
846
|
-
"inheritedFrom": {
|
|
847
|
-
"name": "IconNameMixin",
|
|
848
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
849
|
-
}
|
|
850
|
-
}
|
|
851
|
-
],
|
|
852
|
-
"mixins": [
|
|
853
|
-
{
|
|
854
|
-
"name": "IconNameMixin",
|
|
855
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
856
|
-
}
|
|
857
|
-
],
|
|
858
|
-
"superclass": {
|
|
859
|
-
"name": "Component",
|
|
860
|
-
"module": "/src/models"
|
|
861
|
-
},
|
|
862
|
-
"tagName": "mdc-badge",
|
|
863
|
-
"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 */",
|
|
864
|
-
"customElement": true
|
|
865
|
-
}
|
|
866
|
-
],
|
|
867
|
-
"exports": [
|
|
868
|
-
{
|
|
869
|
-
"kind": "js",
|
|
870
|
-
"name": "default",
|
|
871
|
-
"declaration": {
|
|
872
|
-
"name": "Badge",
|
|
873
|
-
"module": "components/badge/badge.component.js"
|
|
874
|
-
}
|
|
875
|
-
}
|
|
876
|
-
]
|
|
877
|
-
},
|
|
878
|
-
{
|
|
879
|
-
"kind": "javascript-module",
|
|
880
|
-
"path": "components/avatar/avatar.component.js",
|
|
881
|
-
"declarations": [
|
|
882
|
-
{
|
|
883
|
-
"kind": "class",
|
|
884
|
-
"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.",
|
|
885
|
-
"name": "Avatar",
|
|
886
|
-
"cssProperties": [
|
|
887
|
-
{
|
|
888
|
-
"description": "Allows customization of the default background color.",
|
|
889
|
-
"name": "--mdc-avatar-default-background-color"
|
|
890
|
-
},
|
|
891
|
-
{
|
|
892
|
-
"description": "Allows customization of the default foreground color.",
|
|
893
|
-
"name": "--mdc-avatar-default-foreground-color"
|
|
894
|
-
},
|
|
895
|
-
{
|
|
896
|
-
"description": "Allows customization of the loading indicator background color.",
|
|
897
|
-
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
898
|
-
},
|
|
899
|
-
{
|
|
900
|
-
"description": "Allows customization of the loading indicator foreground color.",
|
|
901
|
-
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
902
|
-
},
|
|
903
|
-
{
|
|
904
|
-
"description": "Allows customization of the loading overlay background color.",
|
|
905
|
-
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
906
|
-
}
|
|
907
|
-
],
|
|
908
|
-
"members": [
|
|
909
|
-
{
|
|
910
|
-
"kind": "field",
|
|
911
|
-
"name": "src",
|
|
912
|
-
"type": {
|
|
913
|
-
"text": "string | undefined"
|
|
914
|
-
},
|
|
915
|
-
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
916
|
-
"attribute": "src",
|
|
917
|
-
"inheritedFrom": {
|
|
918
|
-
"name": "AvatarComponentMixin",
|
|
919
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
920
|
-
}
|
|
921
|
-
},
|
|
922
|
-
{
|
|
923
|
-
"kind": "field",
|
|
924
|
-
"name": "initials",
|
|
925
|
-
"type": {
|
|
926
|
-
"text": "string | undefined"
|
|
927
|
-
},
|
|
928
|
-
"description": "The initials to be displayed for the avatar.",
|
|
929
|
-
"attribute": "initials",
|
|
930
|
-
"inheritedFrom": {
|
|
931
|
-
"name": "AvatarComponentMixin",
|
|
932
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
933
|
-
}
|
|
934
|
-
},
|
|
935
|
-
{
|
|
936
|
-
"kind": "field",
|
|
937
|
-
"name": "presence",
|
|
938
|
-
"type": {
|
|
939
|
-
"text": "PresenceType | undefined"
|
|
940
|
-
},
|
|
941
|
-
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
942
|
-
"attribute": "presence",
|
|
943
|
-
"inheritedFrom": {
|
|
944
|
-
"name": "AvatarComponentMixin",
|
|
945
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
946
|
-
}
|
|
947
|
-
},
|
|
948
|
-
{
|
|
949
|
-
"kind": "field",
|
|
950
|
-
"name": "size",
|
|
951
|
-
"type": {
|
|
952
|
-
"text": "AvatarSize"
|
|
953
|
-
},
|
|
954
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
955
|
-
"default": "32",
|
|
956
|
-
"attribute": "size",
|
|
957
|
-
"reflects": true,
|
|
958
|
-
"inheritedFrom": {
|
|
959
|
-
"name": "AvatarComponentMixin",
|
|
960
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
961
|
-
}
|
|
962
|
-
},
|
|
963
|
-
{
|
|
964
|
-
"kind": "field",
|
|
965
|
-
"name": "counter",
|
|
966
|
-
"type": {
|
|
967
|
-
"text": "number | undefined"
|
|
968
|
-
},
|
|
969
|
-
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
970
|
-
"attribute": "counter",
|
|
971
|
-
"inheritedFrom": {
|
|
972
|
-
"name": "AvatarComponentMixin",
|
|
973
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
974
|
-
}
|
|
975
|
-
},
|
|
976
|
-
{
|
|
977
|
-
"kind": "field",
|
|
978
|
-
"name": "isTyping",
|
|
979
|
-
"type": {
|
|
980
|
-
"text": "boolean"
|
|
981
|
-
},
|
|
982
|
-
"default": "false",
|
|
983
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
984
|
-
"attribute": "is-typing",
|
|
985
|
-
"inheritedFrom": {
|
|
986
|
-
"name": "AvatarComponentMixin",
|
|
987
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
988
|
-
}
|
|
989
|
-
},
|
|
990
|
-
{
|
|
991
|
-
"kind": "field",
|
|
992
|
-
"name": "iconName",
|
|
993
|
-
"type": {
|
|
994
|
-
"text": "IconNames | undefined"
|
|
995
|
-
},
|
|
996
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
997
|
-
"attribute": "icon-name",
|
|
998
|
-
"inheritedFrom": {
|
|
999
|
-
"name": "IconNameMixin",
|
|
1000
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
1001
|
-
}
|
|
1002
|
-
}
|
|
1003
|
-
],
|
|
1004
|
-
"mixins": [
|
|
1005
|
-
{
|
|
1006
|
-
"name": "AvatarComponentMixin",
|
|
1007
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
1008
|
-
},
|
|
1009
|
-
{
|
|
1010
|
-
"name": "IconNameMixin",
|
|
1011
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
1012
|
-
}
|
|
1013
|
-
],
|
|
1014
|
-
"superclass": {
|
|
1015
|
-
"name": "Component",
|
|
1016
|
-
"module": "/src/models"
|
|
1017
|
-
},
|
|
1018
|
-
"tagName": "mdc-avatar",
|
|
1019
|
-
"jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
|
|
1020
|
-
"customElement": true,
|
|
1021
|
-
"attributes": [
|
|
1022
|
-
{
|
|
1023
|
-
"name": "src",
|
|
1024
|
-
"type": {
|
|
1025
|
-
"text": "string | undefined"
|
|
1007
|
+
"name": "getBadgeContentBasedOnType",
|
|
1008
|
+
"privacy": "private",
|
|
1009
|
+
"return": {
|
|
1010
|
+
"type": {
|
|
1011
|
+
"text": ""
|
|
1012
|
+
}
|
|
1026
1013
|
},
|
|
1027
|
-
"description": "
|
|
1028
|
-
"fieldName": "src",
|
|
1029
|
-
"inheritedFrom": {
|
|
1030
|
-
"name": "AvatarComponentMixin",
|
|
1031
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1032
|
-
}
|
|
1014
|
+
"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."
|
|
1033
1015
|
},
|
|
1034
1016
|
{
|
|
1035
|
-
"
|
|
1017
|
+
"kind": "field",
|
|
1018
|
+
"name": "iconName",
|
|
1036
1019
|
"type": {
|
|
1037
|
-
"text": "
|
|
1020
|
+
"text": "IconNames | undefined"
|
|
1038
1021
|
},
|
|
1039
|
-
"description": "
|
|
1040
|
-
"
|
|
1022
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
1023
|
+
"attribute": "icon-name",
|
|
1041
1024
|
"inheritedFrom": {
|
|
1042
|
-
"name": "
|
|
1043
|
-
"module": "
|
|
1025
|
+
"name": "IconNameMixin",
|
|
1026
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
1044
1027
|
}
|
|
1045
|
-
}
|
|
1028
|
+
}
|
|
1029
|
+
],
|
|
1030
|
+
"attributes": [
|
|
1046
1031
|
{
|
|
1047
|
-
"name": "
|
|
1032
|
+
"name": "type",
|
|
1048
1033
|
"type": {
|
|
1049
|
-
"text": "
|
|
1034
|
+
"text": "BadgeType | undefined"
|
|
1050
1035
|
},
|
|
1051
|
-
"description": "
|
|
1052
|
-
"fieldName": "
|
|
1053
|
-
"inheritedFrom": {
|
|
1054
|
-
"name": "AvatarComponentMixin",
|
|
1055
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1056
|
-
}
|
|
1036
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
1037
|
+
"fieldName": "type"
|
|
1057
1038
|
},
|
|
1058
1039
|
{
|
|
1059
|
-
"name": "
|
|
1040
|
+
"name": "variant",
|
|
1060
1041
|
"type": {
|
|
1061
|
-
"text": "
|
|
1042
|
+
"text": "IconVariant"
|
|
1062
1043
|
},
|
|
1063
|
-
"description": "
|
|
1064
|
-
"default": "
|
|
1065
|
-
"fieldName": "
|
|
1066
|
-
"inheritedFrom": {
|
|
1067
|
-
"name": "AvatarComponentMixin",
|
|
1068
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1069
|
-
}
|
|
1044
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
1045
|
+
"default": "primary",
|
|
1046
|
+
"fieldName": "variant"
|
|
1070
1047
|
},
|
|
1071
1048
|
{
|
|
1072
1049
|
"name": "counter",
|
|
1073
1050
|
"type": {
|
|
1074
1051
|
"text": "number | undefined"
|
|
1075
1052
|
},
|
|
1076
|
-
"description": "
|
|
1077
|
-
"fieldName": "counter"
|
|
1078
|
-
"inheritedFrom": {
|
|
1079
|
-
"name": "AvatarComponentMixin",
|
|
1080
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1081
|
-
}
|
|
1053
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
1054
|
+
"fieldName": "counter"
|
|
1082
1055
|
},
|
|
1083
1056
|
{
|
|
1084
|
-
"name": "
|
|
1057
|
+
"name": "max-counter",
|
|
1058
|
+
"type": {
|
|
1059
|
+
"text": "number"
|
|
1060
|
+
},
|
|
1061
|
+
"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`.",
|
|
1062
|
+
"default": "99",
|
|
1063
|
+
"fieldName": "maxCounter"
|
|
1064
|
+
},
|
|
1065
|
+
{
|
|
1066
|
+
"name": "overlay",
|
|
1085
1067
|
"type": {
|
|
1086
1068
|
"text": "boolean"
|
|
1087
1069
|
},
|
|
1088
1070
|
"default": "false",
|
|
1089
|
-
"description": "
|
|
1090
|
-
"fieldName": "
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1071
|
+
"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.",
|
|
1072
|
+
"fieldName": "overlay"
|
|
1073
|
+
},
|
|
1074
|
+
{
|
|
1075
|
+
"name": "aria-label",
|
|
1076
|
+
"type": {
|
|
1077
|
+
"text": "string | null"
|
|
1078
|
+
},
|
|
1079
|
+
"default": "null",
|
|
1080
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
1081
|
+
"fieldName": "ariaLabel"
|
|
1095
1082
|
},
|
|
1096
1083
|
{
|
|
1097
1084
|
"name": "icon-name",
|
|
@@ -1105,7 +1092,20 @@
|
|
|
1105
1092
|
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
1106
1093
|
}
|
|
1107
1094
|
}
|
|
1108
|
-
]
|
|
1095
|
+
],
|
|
1096
|
+
"mixins": [
|
|
1097
|
+
{
|
|
1098
|
+
"name": "IconNameMixin",
|
|
1099
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
1100
|
+
}
|
|
1101
|
+
],
|
|
1102
|
+
"superclass": {
|
|
1103
|
+
"name": "Component",
|
|
1104
|
+
"module": "/src/models"
|
|
1105
|
+
},
|
|
1106
|
+
"tagName": "mdc-badge",
|
|
1107
|
+
"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 */",
|
|
1108
|
+
"customElement": true
|
|
1109
1109
|
}
|
|
1110
1110
|
],
|
|
1111
1111
|
"exports": [
|
|
@@ -1113,8 +1113,8 @@
|
|
|
1113
1113
|
"kind": "js",
|
|
1114
1114
|
"name": "default",
|
|
1115
1115
|
"declaration": {
|
|
1116
|
-
"name": "
|
|
1117
|
-
"module": "components/
|
|
1116
|
+
"name": "Badge",
|
|
1117
|
+
"module": "components/badge/badge.component.js"
|
|
1118
1118
|
}
|
|
1119
1119
|
}
|
|
1120
1120
|
]
|
|
@@ -6731,6 +6731,217 @@
|
|
|
6731
6731
|
}
|
|
6732
6732
|
]
|
|
6733
6733
|
},
|
|
6734
|
+
{
|
|
6735
|
+
"kind": "javascript-module",
|
|
6736
|
+
"path": "components/virtualizedlist/virtualizedlist.component.js",
|
|
6737
|
+
"declarations": [
|
|
6738
|
+
{
|
|
6739
|
+
"kind": "class",
|
|
6740
|
+
"description": "`mdc-virtualizedlist` component for creating custom virtualized lists.\nIMPORTANT: This component does not create it's own list/list items.\nUse the setlistdata callback prop to update client state in order to\nPass list/listitems as a child of this component, which this will virtuailze\nThis implementation handles dynamic lists as well as fixed sized lists.\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.",
|
|
6741
|
+
"name": "VirtualizedList",
|
|
6742
|
+
"slots": [
|
|
6743
|
+
{
|
|
6744
|
+
"description": "Client side List with nested list items.",
|
|
6745
|
+
"name": ""
|
|
6746
|
+
}
|
|
6747
|
+
],
|
|
6748
|
+
"members": [
|
|
6749
|
+
{
|
|
6750
|
+
"kind": "field",
|
|
6751
|
+
"name": "onscroll",
|
|
6752
|
+
"type": {
|
|
6753
|
+
"text": "((this: GlobalEventHandlers, ev: Event) => any) | null"
|
|
6754
|
+
},
|
|
6755
|
+
"description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
|
|
6756
|
+
"default": "null",
|
|
6757
|
+
"attribute": "onscroll"
|
|
6758
|
+
},
|
|
6759
|
+
{
|
|
6760
|
+
"kind": "field",
|
|
6761
|
+
"name": "virtualizerprops",
|
|
6762
|
+
"type": {
|
|
6763
|
+
"text": "VirtualizerProps"
|
|
6764
|
+
},
|
|
6765
|
+
"description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
|
|
6766
|
+
"attribute": "virtualizerprops"
|
|
6767
|
+
},
|
|
6768
|
+
{
|
|
6769
|
+
"kind": "field",
|
|
6770
|
+
"name": "setlistdata",
|
|
6771
|
+
"type": {
|
|
6772
|
+
"text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
|
|
6773
|
+
},
|
|
6774
|
+
"description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
|
|
6775
|
+
"default": "null",
|
|
6776
|
+
"attribute": "setlistdata"
|
|
6777
|
+
},
|
|
6778
|
+
{
|
|
6779
|
+
"kind": "field",
|
|
6780
|
+
"name": "scrollElementRef",
|
|
6781
|
+
"type": {
|
|
6782
|
+
"text": "Ref<HTMLDivElement>"
|
|
6783
|
+
},
|
|
6784
|
+
"privacy": "public"
|
|
6785
|
+
},
|
|
6786
|
+
{
|
|
6787
|
+
"kind": "field",
|
|
6788
|
+
"name": "virtualizer",
|
|
6789
|
+
"type": {
|
|
6790
|
+
"text": "Virtualizer<Element, Element> | null"
|
|
6791
|
+
},
|
|
6792
|
+
"privacy": "public",
|
|
6793
|
+
"default": "null"
|
|
6794
|
+
},
|
|
6795
|
+
{
|
|
6796
|
+
"kind": "field",
|
|
6797
|
+
"name": "virtualizerController",
|
|
6798
|
+
"type": {
|
|
6799
|
+
"text": "null"
|
|
6800
|
+
},
|
|
6801
|
+
"default": "null"
|
|
6802
|
+
}
|
|
6803
|
+
],
|
|
6804
|
+
"attributes": [
|
|
6805
|
+
{
|
|
6806
|
+
"name": "onscroll",
|
|
6807
|
+
"type": {
|
|
6808
|
+
"text": "((this: GlobalEventHandlers, ev: Event) => any) | null"
|
|
6809
|
+
},
|
|
6810
|
+
"description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
|
|
6811
|
+
"default": "null",
|
|
6812
|
+
"fieldName": "onscroll"
|
|
6813
|
+
},
|
|
6814
|
+
{
|
|
6815
|
+
"name": "virtualizerprops",
|
|
6816
|
+
"type": {
|
|
6817
|
+
"text": "VirtualizerProps"
|
|
6818
|
+
},
|
|
6819
|
+
"description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
|
|
6820
|
+
"fieldName": "virtualizerprops"
|
|
6821
|
+
},
|
|
6822
|
+
{
|
|
6823
|
+
"name": "setlistdata",
|
|
6824
|
+
"type": {
|
|
6825
|
+
"text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
|
|
6826
|
+
},
|
|
6827
|
+
"description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
|
|
6828
|
+
"default": "null",
|
|
6829
|
+
"fieldName": "setlistdata"
|
|
6830
|
+
}
|
|
6831
|
+
],
|
|
6832
|
+
"superclass": {
|
|
6833
|
+
"name": "Component",
|
|
6834
|
+
"module": "/src/models"
|
|
6835
|
+
},
|
|
6836
|
+
"tagName": "mdc-virtualizedlist",
|
|
6837
|
+
"jsDoc": "/**\n * `mdc-virtualizedlist` component for creating custom virtualized lists.\n * IMPORTANT: This component does not create it's own list/list items.\n * Use the setlistdata callback prop to update client state in order to\n * Pass list/listitems as a child of this component, which this will virtuailze\n * This implementation handles dynamic lists as well as fixed sized lists.\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * @tagname mdc-virtualizedlist\n *\n * @slot - Client side List with nested list items.\n */",
|
|
6838
|
+
"customElement": true
|
|
6839
|
+
}
|
|
6840
|
+
],
|
|
6841
|
+
"exports": [
|
|
6842
|
+
{
|
|
6843
|
+
"kind": "js",
|
|
6844
|
+
"name": "default",
|
|
6845
|
+
"declaration": {
|
|
6846
|
+
"name": "VirtualizedList",
|
|
6847
|
+
"module": "components/virtualizedlist/virtualizedlist.component.js"
|
|
6848
|
+
}
|
|
6849
|
+
}
|
|
6850
|
+
]
|
|
6851
|
+
},
|
|
6852
|
+
{
|
|
6853
|
+
"kind": "javascript-module",
|
|
6854
|
+
"path": "components/virtualizedlist/virtualizedlist.test.component.js",
|
|
6855
|
+
"declarations": [
|
|
6856
|
+
{
|
|
6857
|
+
"kind": "class",
|
|
6858
|
+
"description": "",
|
|
6859
|
+
"name": "VirtualizedWrapper",
|
|
6860
|
+
"members": [
|
|
6861
|
+
{
|
|
6862
|
+
"kind": "field",
|
|
6863
|
+
"name": "onscroll",
|
|
6864
|
+
"type": {
|
|
6865
|
+
"text": "((this: GlobalEventHandlers, ev: Event) => any) | null"
|
|
6866
|
+
},
|
|
6867
|
+
"default": "null",
|
|
6868
|
+
"attribute": "onscroll"
|
|
6869
|
+
},
|
|
6870
|
+
{
|
|
6871
|
+
"kind": "field",
|
|
6872
|
+
"name": "virtualizerprops",
|
|
6873
|
+
"type": {
|
|
6874
|
+
"text": "VirtualizerProps"
|
|
6875
|
+
},
|
|
6876
|
+
"default": "{ count: 100, estimateSize: () => 100 }",
|
|
6877
|
+
"attribute": "virtualizerprops"
|
|
6878
|
+
},
|
|
6879
|
+
{
|
|
6880
|
+
"kind": "field",
|
|
6881
|
+
"name": "list",
|
|
6882
|
+
"type": {
|
|
6883
|
+
"text": "TemplateResult<1>"
|
|
6884
|
+
},
|
|
6885
|
+
"default": "html``"
|
|
6886
|
+
},
|
|
6887
|
+
{
|
|
6888
|
+
"kind": "field",
|
|
6889
|
+
"name": "listItemTexts"
|
|
6890
|
+
},
|
|
6891
|
+
{
|
|
6892
|
+
"kind": "method",
|
|
6893
|
+
"name": "updateListItemTextArray",
|
|
6894
|
+
"privacy": "private"
|
|
6895
|
+
},
|
|
6896
|
+
{
|
|
6897
|
+
"kind": "method",
|
|
6898
|
+
"name": "setListData",
|
|
6899
|
+
"privacy": "private",
|
|
6900
|
+
"parameters": [
|
|
6901
|
+
{
|
|
6902
|
+
"name": "{ virtualItems, measureElement, listStyle }",
|
|
6903
|
+
"type": {
|
|
6904
|
+
"text": "SetListDataProps"
|
|
6905
|
+
}
|
|
6906
|
+
}
|
|
6907
|
+
]
|
|
6908
|
+
}
|
|
6909
|
+
],
|
|
6910
|
+
"attributes": [
|
|
6911
|
+
{
|
|
6912
|
+
"name": "onscroll",
|
|
6913
|
+
"type": {
|
|
6914
|
+
"text": "((this: GlobalEventHandlers, ev: Event) => any) | null"
|
|
6915
|
+
},
|
|
6916
|
+
"default": "null",
|
|
6917
|
+
"fieldName": "onscroll"
|
|
6918
|
+
},
|
|
6919
|
+
{
|
|
6920
|
+
"name": "virtualizerprops",
|
|
6921
|
+
"type": {
|
|
6922
|
+
"text": "VirtualizerProps"
|
|
6923
|
+
},
|
|
6924
|
+
"default": "{ count: 100, estimateSize: () => 100 }",
|
|
6925
|
+
"fieldName": "virtualizerprops"
|
|
6926
|
+
}
|
|
6927
|
+
],
|
|
6928
|
+
"superclass": {
|
|
6929
|
+
"name": "Component",
|
|
6930
|
+
"module": "/src/models"
|
|
6931
|
+
}
|
|
6932
|
+
}
|
|
6933
|
+
],
|
|
6934
|
+
"exports": [
|
|
6935
|
+
{
|
|
6936
|
+
"kind": "js",
|
|
6937
|
+
"name": "default",
|
|
6938
|
+
"declaration": {
|
|
6939
|
+
"name": "VirtualizedWrapper",
|
|
6940
|
+
"module": "components/virtualizedlist/virtualizedlist.test.component.js"
|
|
6941
|
+
}
|
|
6942
|
+
}
|
|
6943
|
+
]
|
|
6944
|
+
},
|
|
6734
6945
|
{
|
|
6735
6946
|
"kind": "javascript-module",
|
|
6736
6947
|
"path": "utils/mixins/AvatarComponentMixin.js",
|