@momentum-design/components 0.16.2 → 0.16.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/index.js +35 -35
- package/dist/browser/index.js.map +4 -4
- package/dist/components/button/button.component.d.ts +0 -5
- package/dist/components/button/button.component.js +0 -9
- package/dist/components/buttonsimple/buttonsimple.component.d.ts +2 -12
- package/dist/components/buttonsimple/buttonsimple.component.js +3 -20
- package/dist/custom-elements.json +425 -394
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/dist/utils/mixins/DisabledMixin.js +5 -0
- package/dist/utils/mixins/TabIndexMixin.js +5 -1
- package/package.json +1 -1
|
@@ -2,246 +2,6 @@
|
|
|
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": "iconName",
|
|
93
|
-
"type": {
|
|
94
|
-
"text": "IconNames | undefined"
|
|
95
|
-
},
|
|
96
|
-
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
97
|
-
"attribute": "icon-name",
|
|
98
|
-
"inheritedFrom": {
|
|
99
|
-
"name": "AvatarComponentMixin",
|
|
100
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
101
|
-
}
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
"kind": "field",
|
|
105
|
-
"name": "counter",
|
|
106
|
-
"type": {
|
|
107
|
-
"text": "number | undefined"
|
|
108
|
-
},
|
|
109
|
-
"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`.",
|
|
110
|
-
"attribute": "counter",
|
|
111
|
-
"inheritedFrom": {
|
|
112
|
-
"name": "AvatarComponentMixin",
|
|
113
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
114
|
-
}
|
|
115
|
-
},
|
|
116
|
-
{
|
|
117
|
-
"kind": "field",
|
|
118
|
-
"name": "isTyping",
|
|
119
|
-
"type": {
|
|
120
|
-
"text": "boolean"
|
|
121
|
-
},
|
|
122
|
-
"default": "false",
|
|
123
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
124
|
-
"attribute": "is-typing",
|
|
125
|
-
"inheritedFrom": {
|
|
126
|
-
"name": "AvatarComponentMixin",
|
|
127
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
],
|
|
131
|
-
"mixins": [
|
|
132
|
-
{
|
|
133
|
-
"name": "AvatarComponentMixin",
|
|
134
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
135
|
-
}
|
|
136
|
-
],
|
|
137
|
-
"superclass": {
|
|
138
|
-
"name": "Component",
|
|
139
|
-
"module": "/src/models"
|
|
140
|
-
},
|
|
141
|
-
"tagName": "mdc-avatar",
|
|
142
|
-
"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 */",
|
|
143
|
-
"customElement": true,
|
|
144
|
-
"attributes": [
|
|
145
|
-
{
|
|
146
|
-
"name": "src",
|
|
147
|
-
"type": {
|
|
148
|
-
"text": "string | undefined"
|
|
149
|
-
},
|
|
150
|
-
"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.",
|
|
151
|
-
"fieldName": "src",
|
|
152
|
-
"inheritedFrom": {
|
|
153
|
-
"name": "AvatarComponentMixin",
|
|
154
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
155
|
-
}
|
|
156
|
-
},
|
|
157
|
-
{
|
|
158
|
-
"name": "initials",
|
|
159
|
-
"type": {
|
|
160
|
-
"text": "string | undefined"
|
|
161
|
-
},
|
|
162
|
-
"description": "The initials to be displayed for the avatar.",
|
|
163
|
-
"fieldName": "initials",
|
|
164
|
-
"inheritedFrom": {
|
|
165
|
-
"name": "AvatarComponentMixin",
|
|
166
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
167
|
-
}
|
|
168
|
-
},
|
|
169
|
-
{
|
|
170
|
-
"name": "presence",
|
|
171
|
-
"type": {
|
|
172
|
-
"text": "PresenceType | undefined"
|
|
173
|
-
},
|
|
174
|
-
"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`",
|
|
175
|
-
"fieldName": "presence",
|
|
176
|
-
"inheritedFrom": {
|
|
177
|
-
"name": "AvatarComponentMixin",
|
|
178
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
179
|
-
}
|
|
180
|
-
},
|
|
181
|
-
{
|
|
182
|
-
"name": "size",
|
|
183
|
-
"type": {
|
|
184
|
-
"text": "AvatarSize"
|
|
185
|
-
},
|
|
186
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
187
|
-
"default": "32",
|
|
188
|
-
"fieldName": "size",
|
|
189
|
-
"inheritedFrom": {
|
|
190
|
-
"name": "AvatarComponentMixin",
|
|
191
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
192
|
-
}
|
|
193
|
-
},
|
|
194
|
-
{
|
|
195
|
-
"name": "icon-name",
|
|
196
|
-
"type": {
|
|
197
|
-
"text": "IconNames | undefined"
|
|
198
|
-
},
|
|
199
|
-
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
200
|
-
"fieldName": "iconName",
|
|
201
|
-
"inheritedFrom": {
|
|
202
|
-
"name": "AvatarComponentMixin",
|
|
203
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
204
|
-
}
|
|
205
|
-
},
|
|
206
|
-
{
|
|
207
|
-
"name": "counter",
|
|
208
|
-
"type": {
|
|
209
|
-
"text": "number | undefined"
|
|
210
|
-
},
|
|
211
|
-
"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`.",
|
|
212
|
-
"fieldName": "counter",
|
|
213
|
-
"inheritedFrom": {
|
|
214
|
-
"name": "AvatarComponentMixin",
|
|
215
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
216
|
-
}
|
|
217
|
-
},
|
|
218
|
-
{
|
|
219
|
-
"name": "is-typing",
|
|
220
|
-
"type": {
|
|
221
|
-
"text": "boolean"
|
|
222
|
-
},
|
|
223
|
-
"default": "false",
|
|
224
|
-
"description": "Represents the typing indicator when the user is typing.",
|
|
225
|
-
"fieldName": "isTyping",
|
|
226
|
-
"inheritedFrom": {
|
|
227
|
-
"name": "AvatarComponentMixin",
|
|
228
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
]
|
|
232
|
-
}
|
|
233
|
-
],
|
|
234
|
-
"exports": [
|
|
235
|
-
{
|
|
236
|
-
"kind": "js",
|
|
237
|
-
"name": "default",
|
|
238
|
-
"declaration": {
|
|
239
|
-
"name": "Avatar",
|
|
240
|
-
"module": "components/avatar/avatar.component.js"
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
]
|
|
244
|
-
},
|
|
245
5
|
{
|
|
246
6
|
"kind": "javascript-module",
|
|
247
7
|
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
@@ -295,11 +55,12 @@
|
|
|
295
55
|
"text": "boolean"
|
|
296
56
|
},
|
|
297
57
|
"default": "undefined as unknown",
|
|
298
|
-
"description": "Indicates whether the
|
|
58
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
299
59
|
"attribute": "disabled",
|
|
60
|
+
"reflects": true,
|
|
300
61
|
"inheritedFrom": {
|
|
301
|
-
"name": "
|
|
302
|
-
"module": "
|
|
62
|
+
"name": "DisabledMixin",
|
|
63
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
303
64
|
}
|
|
304
65
|
},
|
|
305
66
|
{
|
|
@@ -447,12 +208,12 @@
|
|
|
447
208
|
"text": "number"
|
|
448
209
|
},
|
|
449
210
|
"default": "0",
|
|
450
|
-
"description": "
|
|
211
|
+
"description": "This property specifies the tab order of the element.",
|
|
451
212
|
"attribute": "tabIndex",
|
|
452
213
|
"reflects": true,
|
|
453
214
|
"inheritedFrom": {
|
|
454
|
-
"name": "
|
|
455
|
-
"module": "
|
|
215
|
+
"name": "TabIndexMixin",
|
|
216
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
456
217
|
}
|
|
457
218
|
},
|
|
458
219
|
{
|
|
@@ -687,16 +448,16 @@
|
|
|
687
448
|
}
|
|
688
449
|
},
|
|
689
450
|
{
|
|
690
|
-
"name": "
|
|
451
|
+
"name": "tabIndex",
|
|
691
452
|
"type": {
|
|
692
|
-
"text": "
|
|
453
|
+
"text": "number"
|
|
693
454
|
},
|
|
694
|
-
"default": "
|
|
695
|
-
"description": "
|
|
696
|
-
"fieldName": "
|
|
455
|
+
"default": "0",
|
|
456
|
+
"description": "This property specifies the tab order of the element.",
|
|
457
|
+
"fieldName": "tabIndex",
|
|
697
458
|
"inheritedFrom": {
|
|
698
|
-
"name": "
|
|
699
|
-
"module": "src/
|
|
459
|
+
"name": "TabIndexMixin",
|
|
460
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
700
461
|
}
|
|
701
462
|
},
|
|
702
463
|
{
|
|
@@ -705,34 +466,34 @@
|
|
|
705
466
|
"text": "boolean"
|
|
706
467
|
},
|
|
707
468
|
"default": "false",
|
|
708
|
-
"description": "Indicates whether the
|
|
469
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
709
470
|
"fieldName": "disabled",
|
|
710
471
|
"inheritedFrom": {
|
|
711
|
-
"name": "
|
|
712
|
-
"module": "src/
|
|
472
|
+
"name": "DisabledMixin",
|
|
473
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
713
474
|
}
|
|
714
475
|
},
|
|
715
476
|
{
|
|
716
|
-
"name": "
|
|
477
|
+
"name": "active",
|
|
717
478
|
"type": {
|
|
718
479
|
"text": "boolean"
|
|
719
480
|
},
|
|
720
481
|
"default": "false",
|
|
721
|
-
"description": "
|
|
722
|
-
"fieldName": "
|
|
482
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
|
483
|
+
"fieldName": "active",
|
|
723
484
|
"inheritedFrom": {
|
|
724
485
|
"name": "Buttonsimple",
|
|
725
486
|
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
726
487
|
}
|
|
727
488
|
},
|
|
728
489
|
{
|
|
729
|
-
"name": "
|
|
490
|
+
"name": "soft-disabled",
|
|
730
491
|
"type": {
|
|
731
|
-
"text": "
|
|
492
|
+
"text": "boolean"
|
|
732
493
|
},
|
|
733
|
-
"default": "
|
|
734
|
-
"description": "
|
|
735
|
-
"fieldName": "
|
|
494
|
+
"default": "false",
|
|
495
|
+
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
496
|
+
"fieldName": "softDisabled",
|
|
736
497
|
"inheritedFrom": {
|
|
737
498
|
"name": "Buttonsimple",
|
|
738
499
|
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
@@ -969,73 +730,313 @@
|
|
|
969
730
|
],
|
|
970
731
|
"attributes": [
|
|
971
732
|
{
|
|
972
|
-
"name": "type",
|
|
733
|
+
"name": "type",
|
|
734
|
+
"type": {
|
|
735
|
+
"text": "BadgeType | undefined"
|
|
736
|
+
},
|
|
737
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
738
|
+
"fieldName": "type"
|
|
739
|
+
},
|
|
740
|
+
{
|
|
741
|
+
"name": "icon-name",
|
|
742
|
+
"type": {
|
|
743
|
+
"text": "IconNames | undefined"
|
|
744
|
+
},
|
|
745
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
746
|
+
"fieldName": "iconName"
|
|
747
|
+
},
|
|
748
|
+
{
|
|
749
|
+
"name": "variant",
|
|
750
|
+
"type": {
|
|
751
|
+
"text": "IconVariant"
|
|
752
|
+
},
|
|
753
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
754
|
+
"default": "primary",
|
|
755
|
+
"fieldName": "variant"
|
|
756
|
+
},
|
|
757
|
+
{
|
|
758
|
+
"name": "counter",
|
|
759
|
+
"type": {
|
|
760
|
+
"text": "number | undefined"
|
|
761
|
+
},
|
|
762
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
763
|
+
"fieldName": "counter"
|
|
764
|
+
},
|
|
765
|
+
{
|
|
766
|
+
"name": "max-counter",
|
|
767
|
+
"type": {
|
|
768
|
+
"text": "number"
|
|
769
|
+
},
|
|
770
|
+
"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`.",
|
|
771
|
+
"default": "99",
|
|
772
|
+
"fieldName": "maxCounter"
|
|
773
|
+
},
|
|
774
|
+
{
|
|
775
|
+
"name": "overlay",
|
|
776
|
+
"type": {
|
|
777
|
+
"text": "boolean"
|
|
778
|
+
},
|
|
779
|
+
"default": "false",
|
|
780
|
+
"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.",
|
|
781
|
+
"fieldName": "overlay"
|
|
782
|
+
},
|
|
783
|
+
{
|
|
784
|
+
"name": "aria-label",
|
|
785
|
+
"type": {
|
|
786
|
+
"text": "string | null"
|
|
787
|
+
},
|
|
788
|
+
"default": "null",
|
|
789
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
790
|
+
"fieldName": "ariaLabel"
|
|
791
|
+
}
|
|
792
|
+
],
|
|
793
|
+
"superclass": {
|
|
794
|
+
"name": "Component",
|
|
795
|
+
"module": "/src/models"
|
|
796
|
+
},
|
|
797
|
+
"tagName": "mdc-badge",
|
|
798
|
+
"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 */",
|
|
799
|
+
"customElement": true
|
|
800
|
+
}
|
|
801
|
+
],
|
|
802
|
+
"exports": [
|
|
803
|
+
{
|
|
804
|
+
"kind": "js",
|
|
805
|
+
"name": "default",
|
|
806
|
+
"declaration": {
|
|
807
|
+
"name": "Badge",
|
|
808
|
+
"module": "components/badge/badge.component.js"
|
|
809
|
+
}
|
|
810
|
+
}
|
|
811
|
+
]
|
|
812
|
+
},
|
|
813
|
+
{
|
|
814
|
+
"kind": "javascript-module",
|
|
815
|
+
"path": "components/avatar/avatar.component.js",
|
|
816
|
+
"declarations": [
|
|
817
|
+
{
|
|
818
|
+
"kind": "class",
|
|
819
|
+
"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.",
|
|
820
|
+
"name": "Avatar",
|
|
821
|
+
"cssProperties": [
|
|
822
|
+
{
|
|
823
|
+
"description": "Allows customization of the default background color.",
|
|
824
|
+
"name": "--mdc-avatar-default-background-color"
|
|
825
|
+
},
|
|
826
|
+
{
|
|
827
|
+
"description": "Allows customization of the default foreground color.",
|
|
828
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
829
|
+
},
|
|
830
|
+
{
|
|
831
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
832
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
833
|
+
},
|
|
834
|
+
{
|
|
835
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
836
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
837
|
+
},
|
|
838
|
+
{
|
|
839
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
840
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
841
|
+
}
|
|
842
|
+
],
|
|
843
|
+
"members": [
|
|
844
|
+
{
|
|
845
|
+
"kind": "field",
|
|
846
|
+
"name": "src",
|
|
847
|
+
"type": {
|
|
848
|
+
"text": "string | undefined"
|
|
849
|
+
},
|
|
850
|
+
"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.",
|
|
851
|
+
"attribute": "src",
|
|
852
|
+
"inheritedFrom": {
|
|
853
|
+
"name": "AvatarComponentMixin",
|
|
854
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
855
|
+
}
|
|
856
|
+
},
|
|
857
|
+
{
|
|
858
|
+
"kind": "field",
|
|
859
|
+
"name": "initials",
|
|
860
|
+
"type": {
|
|
861
|
+
"text": "string | undefined"
|
|
862
|
+
},
|
|
863
|
+
"description": "The initials to be displayed for the avatar.",
|
|
864
|
+
"attribute": "initials",
|
|
865
|
+
"inheritedFrom": {
|
|
866
|
+
"name": "AvatarComponentMixin",
|
|
867
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
868
|
+
}
|
|
869
|
+
},
|
|
870
|
+
{
|
|
871
|
+
"kind": "field",
|
|
872
|
+
"name": "presence",
|
|
873
|
+
"type": {
|
|
874
|
+
"text": "PresenceType | undefined"
|
|
875
|
+
},
|
|
876
|
+
"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`",
|
|
877
|
+
"attribute": "presence",
|
|
878
|
+
"inheritedFrom": {
|
|
879
|
+
"name": "AvatarComponentMixin",
|
|
880
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
881
|
+
}
|
|
882
|
+
},
|
|
883
|
+
{
|
|
884
|
+
"kind": "field",
|
|
885
|
+
"name": "size",
|
|
886
|
+
"type": {
|
|
887
|
+
"text": "AvatarSize"
|
|
888
|
+
},
|
|
889
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
890
|
+
"default": "32",
|
|
891
|
+
"attribute": "size",
|
|
892
|
+
"reflects": true,
|
|
893
|
+
"inheritedFrom": {
|
|
894
|
+
"name": "AvatarComponentMixin",
|
|
895
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
896
|
+
}
|
|
897
|
+
},
|
|
898
|
+
{
|
|
899
|
+
"kind": "field",
|
|
900
|
+
"name": "iconName",
|
|
901
|
+
"type": {
|
|
902
|
+
"text": "IconNames | undefined"
|
|
903
|
+
},
|
|
904
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
905
|
+
"attribute": "icon-name",
|
|
906
|
+
"inheritedFrom": {
|
|
907
|
+
"name": "AvatarComponentMixin",
|
|
908
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
909
|
+
}
|
|
910
|
+
},
|
|
911
|
+
{
|
|
912
|
+
"kind": "field",
|
|
913
|
+
"name": "counter",
|
|
914
|
+
"type": {
|
|
915
|
+
"text": "number | undefined"
|
|
916
|
+
},
|
|
917
|
+
"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`.",
|
|
918
|
+
"attribute": "counter",
|
|
919
|
+
"inheritedFrom": {
|
|
920
|
+
"name": "AvatarComponentMixin",
|
|
921
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
922
|
+
}
|
|
923
|
+
},
|
|
924
|
+
{
|
|
925
|
+
"kind": "field",
|
|
926
|
+
"name": "isTyping",
|
|
927
|
+
"type": {
|
|
928
|
+
"text": "boolean"
|
|
929
|
+
},
|
|
930
|
+
"default": "false",
|
|
931
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
932
|
+
"attribute": "is-typing",
|
|
933
|
+
"inheritedFrom": {
|
|
934
|
+
"name": "AvatarComponentMixin",
|
|
935
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
936
|
+
}
|
|
937
|
+
}
|
|
938
|
+
],
|
|
939
|
+
"mixins": [
|
|
940
|
+
{
|
|
941
|
+
"name": "AvatarComponentMixin",
|
|
942
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
943
|
+
}
|
|
944
|
+
],
|
|
945
|
+
"superclass": {
|
|
946
|
+
"name": "Component",
|
|
947
|
+
"module": "/src/models"
|
|
948
|
+
},
|
|
949
|
+
"tagName": "mdc-avatar",
|
|
950
|
+
"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 */",
|
|
951
|
+
"customElement": true,
|
|
952
|
+
"attributes": [
|
|
953
|
+
{
|
|
954
|
+
"name": "src",
|
|
955
|
+
"type": {
|
|
956
|
+
"text": "string | undefined"
|
|
957
|
+
},
|
|
958
|
+
"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.",
|
|
959
|
+
"fieldName": "src",
|
|
960
|
+
"inheritedFrom": {
|
|
961
|
+
"name": "AvatarComponentMixin",
|
|
962
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
963
|
+
}
|
|
964
|
+
},
|
|
965
|
+
{
|
|
966
|
+
"name": "initials",
|
|
973
967
|
"type": {
|
|
974
|
-
"text": "
|
|
968
|
+
"text": "string | undefined"
|
|
975
969
|
},
|
|
976
|
-
"description": "
|
|
977
|
-
"fieldName": "
|
|
970
|
+
"description": "The initials to be displayed for the avatar.",
|
|
971
|
+
"fieldName": "initials",
|
|
972
|
+
"inheritedFrom": {
|
|
973
|
+
"name": "AvatarComponentMixin",
|
|
974
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
975
|
+
}
|
|
978
976
|
},
|
|
979
977
|
{
|
|
980
|
-
"name": "
|
|
978
|
+
"name": "presence",
|
|
981
979
|
"type": {
|
|
982
|
-
"text": "
|
|
980
|
+
"text": "PresenceType | undefined"
|
|
983
981
|
},
|
|
984
|
-
"description": "
|
|
985
|
-
"fieldName": "
|
|
982
|
+
"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`",
|
|
983
|
+
"fieldName": "presence",
|
|
984
|
+
"inheritedFrom": {
|
|
985
|
+
"name": "AvatarComponentMixin",
|
|
986
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
987
|
+
}
|
|
986
988
|
},
|
|
987
989
|
{
|
|
988
|
-
"name": "
|
|
990
|
+
"name": "size",
|
|
989
991
|
"type": {
|
|
990
|
-
"text": "
|
|
992
|
+
"text": "AvatarSize"
|
|
991
993
|
},
|
|
992
|
-
"description": "
|
|
993
|
-
"default": "
|
|
994
|
-
"fieldName": "
|
|
994
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
995
|
+
"default": "32",
|
|
996
|
+
"fieldName": "size",
|
|
997
|
+
"inheritedFrom": {
|
|
998
|
+
"name": "AvatarComponentMixin",
|
|
999
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1000
|
+
}
|
|
995
1001
|
},
|
|
996
1002
|
{
|
|
997
|
-
"name": "
|
|
1003
|
+
"name": "icon-name",
|
|
998
1004
|
"type": {
|
|
999
|
-
"text": "
|
|
1005
|
+
"text": "IconNames | undefined"
|
|
1000
1006
|
},
|
|
1001
|
-
"description": "
|
|
1002
|
-
"fieldName": "
|
|
1007
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
1008
|
+
"fieldName": "iconName",
|
|
1009
|
+
"inheritedFrom": {
|
|
1010
|
+
"name": "AvatarComponentMixin",
|
|
1011
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1012
|
+
}
|
|
1003
1013
|
},
|
|
1004
1014
|
{
|
|
1005
|
-
"name": "
|
|
1015
|
+
"name": "counter",
|
|
1006
1016
|
"type": {
|
|
1007
|
-
"text": "number"
|
|
1017
|
+
"text": "number | undefined"
|
|
1008
1018
|
},
|
|
1009
|
-
"description": "The
|
|
1010
|
-
"
|
|
1011
|
-
"
|
|
1019
|
+
"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`.",
|
|
1020
|
+
"fieldName": "counter",
|
|
1021
|
+
"inheritedFrom": {
|
|
1022
|
+
"name": "AvatarComponentMixin",
|
|
1023
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1024
|
+
}
|
|
1012
1025
|
},
|
|
1013
1026
|
{
|
|
1014
|
-
"name": "
|
|
1027
|
+
"name": "is-typing",
|
|
1015
1028
|
"type": {
|
|
1016
1029
|
"text": "boolean"
|
|
1017
1030
|
},
|
|
1018
1031
|
"default": "false",
|
|
1019
|
-
"description": "
|
|
1020
|
-
"fieldName": "
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
"text": "string | null"
|
|
1026
|
-
},
|
|
1027
|
-
"default": "null",
|
|
1028
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
1029
|
-
"fieldName": "ariaLabel"
|
|
1032
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
1033
|
+
"fieldName": "isTyping",
|
|
1034
|
+
"inheritedFrom": {
|
|
1035
|
+
"name": "AvatarComponentMixin",
|
|
1036
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1037
|
+
}
|
|
1030
1038
|
}
|
|
1031
|
-
]
|
|
1032
|
-
"superclass": {
|
|
1033
|
-
"name": "Component",
|
|
1034
|
-
"module": "/src/models"
|
|
1035
|
-
},
|
|
1036
|
-
"tagName": "mdc-badge",
|
|
1037
|
-
"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 */",
|
|
1038
|
-
"customElement": true
|
|
1039
|
+
]
|
|
1039
1040
|
}
|
|
1040
1041
|
],
|
|
1041
1042
|
"exports": [
|
|
@@ -1043,8 +1044,8 @@
|
|
|
1043
1044
|
"kind": "js",
|
|
1044
1045
|
"name": "default",
|
|
1045
1046
|
"declaration": {
|
|
1046
|
-
"name": "
|
|
1047
|
-
"module": "components/
|
|
1047
|
+
"name": "Avatar",
|
|
1048
|
+
"module": "components/avatar/avatar.component.js"
|
|
1048
1049
|
}
|
|
1049
1050
|
}
|
|
1050
1051
|
]
|
|
@@ -1190,21 +1191,6 @@
|
|
|
1190
1191
|
"default": "default",
|
|
1191
1192
|
"attribute": "color"
|
|
1192
1193
|
},
|
|
1193
|
-
{
|
|
1194
|
-
"kind": "field",
|
|
1195
|
-
"name": "tabIndex",
|
|
1196
|
-
"type": {
|
|
1197
|
-
"text": "number"
|
|
1198
|
-
},
|
|
1199
|
-
"default": "0",
|
|
1200
|
-
"description": "The tabindex of the button.",
|
|
1201
|
-
"attribute": "tabIndex",
|
|
1202
|
-
"reflects": true,
|
|
1203
|
-
"inheritedFrom": {
|
|
1204
|
-
"name": "Buttonsimple",
|
|
1205
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
1206
|
-
}
|
|
1207
|
-
},
|
|
1208
1194
|
{
|
|
1209
1195
|
"kind": "field",
|
|
1210
1196
|
"name": "role",
|
|
@@ -1294,16 +1280,17 @@
|
|
|
1294
1280
|
},
|
|
1295
1281
|
{
|
|
1296
1282
|
"kind": "field",
|
|
1297
|
-
"name": "
|
|
1283
|
+
"name": "tabIndex",
|
|
1298
1284
|
"type": {
|
|
1299
|
-
"text": "
|
|
1285
|
+
"text": "number"
|
|
1300
1286
|
},
|
|
1301
|
-
"default": "
|
|
1302
|
-
"description": "
|
|
1303
|
-
"attribute": "
|
|
1287
|
+
"default": "0",
|
|
1288
|
+
"description": "This property specifies the tab order of the element.",
|
|
1289
|
+
"attribute": "tabIndex",
|
|
1290
|
+
"reflects": true,
|
|
1304
1291
|
"inheritedFrom": {
|
|
1305
|
-
"name": "
|
|
1306
|
-
"module": "
|
|
1292
|
+
"name": "TabIndexMixin",
|
|
1293
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
1307
1294
|
}
|
|
1308
1295
|
},
|
|
1309
1296
|
{
|
|
@@ -1313,8 +1300,23 @@
|
|
|
1313
1300
|
"text": "boolean"
|
|
1314
1301
|
},
|
|
1315
1302
|
"default": "false",
|
|
1316
|
-
"description": "Indicates whether the
|
|
1303
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
1317
1304
|
"attribute": "disabled",
|
|
1305
|
+
"reflects": true,
|
|
1306
|
+
"inheritedFrom": {
|
|
1307
|
+
"name": "DisabledMixin",
|
|
1308
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
1309
|
+
}
|
|
1310
|
+
},
|
|
1311
|
+
{
|
|
1312
|
+
"kind": "field",
|
|
1313
|
+
"name": "active",
|
|
1314
|
+
"type": {
|
|
1315
|
+
"text": "boolean"
|
|
1316
|
+
},
|
|
1317
|
+
"default": "false",
|
|
1318
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
|
1319
|
+
"attribute": "active",
|
|
1318
1320
|
"inheritedFrom": {
|
|
1319
1321
|
"name": "Buttonsimple",
|
|
1320
1322
|
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
@@ -1533,52 +1535,52 @@
|
|
|
1533
1535
|
"fieldName": "color"
|
|
1534
1536
|
},
|
|
1535
1537
|
{
|
|
1536
|
-
"name": "
|
|
1538
|
+
"name": "role",
|
|
1539
|
+
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
|
1540
|
+
"default": "'button'",
|
|
1541
|
+
"fieldName": "role",
|
|
1537
1542
|
"type": {
|
|
1538
|
-
"text": "
|
|
1543
|
+
"text": "string"
|
|
1539
1544
|
},
|
|
1540
|
-
"default": "0",
|
|
1541
|
-
"description": "The tabindex of the button.",
|
|
1542
|
-
"fieldName": "tabIndex",
|
|
1543
1545
|
"inheritedFrom": {
|
|
1544
1546
|
"name": "Buttonsimple",
|
|
1545
1547
|
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1546
1548
|
}
|
|
1547
1549
|
},
|
|
1548
1550
|
{
|
|
1549
|
-
"name": "
|
|
1550
|
-
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
|
1551
|
-
"default": "'button'",
|
|
1552
|
-
"fieldName": "role",
|
|
1551
|
+
"name": "tabIndex",
|
|
1553
1552
|
"type": {
|
|
1554
|
-
"text": "
|
|
1553
|
+
"text": "number"
|
|
1555
1554
|
},
|
|
1555
|
+
"default": "0",
|
|
1556
|
+
"description": "This property specifies the tab order of the element.",
|
|
1557
|
+
"fieldName": "tabIndex",
|
|
1556
1558
|
"inheritedFrom": {
|
|
1557
|
-
"name": "
|
|
1558
|
-
"module": "src/
|
|
1559
|
+
"name": "TabIndexMixin",
|
|
1560
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
1559
1561
|
}
|
|
1560
1562
|
},
|
|
1561
1563
|
{
|
|
1562
|
-
"name": "
|
|
1564
|
+
"name": "disabled",
|
|
1563
1565
|
"type": {
|
|
1564
1566
|
"text": "boolean"
|
|
1565
1567
|
},
|
|
1566
1568
|
"default": "false",
|
|
1567
|
-
"description": "
|
|
1568
|
-
"fieldName": "
|
|
1569
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
1570
|
+
"fieldName": "disabled",
|
|
1569
1571
|
"inheritedFrom": {
|
|
1570
|
-
"name": "
|
|
1571
|
-
"module": "src/
|
|
1572
|
+
"name": "DisabledMixin",
|
|
1573
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
1572
1574
|
}
|
|
1573
1575
|
},
|
|
1574
1576
|
{
|
|
1575
|
-
"name": "
|
|
1577
|
+
"name": "active",
|
|
1576
1578
|
"type": {
|
|
1577
1579
|
"text": "boolean"
|
|
1578
1580
|
},
|
|
1579
1581
|
"default": "false",
|
|
1580
|
-
"description": "
|
|
1581
|
-
"fieldName": "
|
|
1582
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
|
1583
|
+
"fieldName": "active",
|
|
1582
1584
|
"inheritedFrom": {
|
|
1583
1585
|
"name": "Buttonsimple",
|
|
1584
1586
|
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
@@ -1650,16 +1652,6 @@
|
|
|
1650
1652
|
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
|
1651
1653
|
"attribute": "active"
|
|
1652
1654
|
},
|
|
1653
|
-
{
|
|
1654
|
-
"kind": "field",
|
|
1655
|
-
"name": "disabled",
|
|
1656
|
-
"type": {
|
|
1657
|
-
"text": "boolean"
|
|
1658
|
-
},
|
|
1659
|
-
"default": "false",
|
|
1660
|
-
"description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
|
|
1661
|
-
"attribute": "disabled"
|
|
1662
|
-
},
|
|
1663
1655
|
{
|
|
1664
1656
|
"kind": "field",
|
|
1665
1657
|
"name": "softDisabled",
|
|
@@ -1681,17 +1673,6 @@
|
|
|
1681
1673
|
"attribute": "size",
|
|
1682
1674
|
"reflects": true
|
|
1683
1675
|
},
|
|
1684
|
-
{
|
|
1685
|
-
"kind": "field",
|
|
1686
|
-
"name": "tabIndex",
|
|
1687
|
-
"type": {
|
|
1688
|
-
"text": "number"
|
|
1689
|
-
},
|
|
1690
|
-
"default": "0",
|
|
1691
|
-
"description": "The tabindex of the button.",
|
|
1692
|
-
"attribute": "tabIndex",
|
|
1693
|
-
"reflects": true
|
|
1694
|
-
},
|
|
1695
1676
|
{
|
|
1696
1677
|
"kind": "field",
|
|
1697
1678
|
"name": "role",
|
|
@@ -1816,6 +1797,36 @@
|
|
|
1816
1797
|
}
|
|
1817
1798
|
],
|
|
1818
1799
|
"description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way."
|
|
1800
|
+
},
|
|
1801
|
+
{
|
|
1802
|
+
"kind": "field",
|
|
1803
|
+
"name": "tabIndex",
|
|
1804
|
+
"type": {
|
|
1805
|
+
"text": "number"
|
|
1806
|
+
},
|
|
1807
|
+
"default": "0",
|
|
1808
|
+
"description": "This property specifies the tab order of the element.",
|
|
1809
|
+
"attribute": "tabIndex",
|
|
1810
|
+
"reflects": true,
|
|
1811
|
+
"inheritedFrom": {
|
|
1812
|
+
"name": "TabIndexMixin",
|
|
1813
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
1814
|
+
}
|
|
1815
|
+
},
|
|
1816
|
+
{
|
|
1817
|
+
"kind": "field",
|
|
1818
|
+
"name": "disabled",
|
|
1819
|
+
"type": {
|
|
1820
|
+
"text": "boolean"
|
|
1821
|
+
},
|
|
1822
|
+
"default": "false",
|
|
1823
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
1824
|
+
"attribute": "disabled",
|
|
1825
|
+
"reflects": true,
|
|
1826
|
+
"inheritedFrom": {
|
|
1827
|
+
"name": "DisabledMixin",
|
|
1828
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
1829
|
+
}
|
|
1819
1830
|
}
|
|
1820
1831
|
],
|
|
1821
1832
|
"attributes": [
|
|
@@ -1828,15 +1839,6 @@
|
|
|
1828
1839
|
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
|
1829
1840
|
"fieldName": "active"
|
|
1830
1841
|
},
|
|
1831
|
-
{
|
|
1832
|
-
"name": "disabled",
|
|
1833
|
-
"type": {
|
|
1834
|
-
"text": "boolean"
|
|
1835
|
-
},
|
|
1836
|
-
"default": "false",
|
|
1837
|
-
"description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
|
|
1838
|
-
"fieldName": "disabled"
|
|
1839
|
-
},
|
|
1840
1842
|
{
|
|
1841
1843
|
"name": "soft-disabled",
|
|
1842
1844
|
"type": {
|
|
@@ -1855,15 +1857,6 @@
|
|
|
1855
1857
|
"default": "32",
|
|
1856
1858
|
"fieldName": "size"
|
|
1857
1859
|
},
|
|
1858
|
-
{
|
|
1859
|
-
"name": "tabIndex",
|
|
1860
|
-
"type": {
|
|
1861
|
-
"text": "number"
|
|
1862
|
-
},
|
|
1863
|
-
"default": "0",
|
|
1864
|
-
"description": "The tabindex of the button.",
|
|
1865
|
-
"fieldName": "tabIndex"
|
|
1866
|
-
},
|
|
1867
1860
|
{
|
|
1868
1861
|
"name": "role",
|
|
1869
1862
|
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
|
@@ -1878,6 +1871,42 @@
|
|
|
1878
1871
|
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
|
1879
1872
|
"default": "button",
|
|
1880
1873
|
"fieldName": "type"
|
|
1874
|
+
},
|
|
1875
|
+
{
|
|
1876
|
+
"name": "tabIndex",
|
|
1877
|
+
"type": {
|
|
1878
|
+
"text": "number"
|
|
1879
|
+
},
|
|
1880
|
+
"default": "0",
|
|
1881
|
+
"description": "This property specifies the tab order of the element.",
|
|
1882
|
+
"fieldName": "tabIndex",
|
|
1883
|
+
"inheritedFrom": {
|
|
1884
|
+
"name": "TabIndexMixin",
|
|
1885
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
1886
|
+
}
|
|
1887
|
+
},
|
|
1888
|
+
{
|
|
1889
|
+
"name": "disabled",
|
|
1890
|
+
"type": {
|
|
1891
|
+
"text": "boolean"
|
|
1892
|
+
},
|
|
1893
|
+
"default": "false",
|
|
1894
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
1895
|
+
"fieldName": "disabled",
|
|
1896
|
+
"inheritedFrom": {
|
|
1897
|
+
"name": "DisabledMixin",
|
|
1898
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
1899
|
+
}
|
|
1900
|
+
}
|
|
1901
|
+
],
|
|
1902
|
+
"mixins": [
|
|
1903
|
+
{
|
|
1904
|
+
"name": "TabIndexMixin",
|
|
1905
|
+
"module": "/src/utils/mixins/TabIndexMixin"
|
|
1906
|
+
},
|
|
1907
|
+
{
|
|
1908
|
+
"name": "DisabledMixin",
|
|
1909
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
1881
1910
|
}
|
|
1882
1911
|
],
|
|
1883
1912
|
"superclass": {
|
|
@@ -3022,8 +3051,8 @@
|
|
|
3022
3051
|
"type": {
|
|
3023
3052
|
"text": "boolean"
|
|
3024
3053
|
},
|
|
3025
|
-
"privacy": "public",
|
|
3026
3054
|
"default": "false",
|
|
3055
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
3027
3056
|
"attribute": "disabled",
|
|
3028
3057
|
"reflects": true
|
|
3029
3058
|
}
|
|
@@ -3035,6 +3064,7 @@
|
|
|
3035
3064
|
"text": "boolean"
|
|
3036
3065
|
},
|
|
3037
3066
|
"default": "false",
|
|
3067
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
3038
3068
|
"fieldName": "disabled"
|
|
3039
3069
|
}
|
|
3040
3070
|
],
|
|
@@ -3074,19 +3104,20 @@
|
|
|
3074
3104
|
"type": {
|
|
3075
3105
|
"text": "number"
|
|
3076
3106
|
},
|
|
3077
|
-
"privacy": "public",
|
|
3078
3107
|
"default": "0",
|
|
3079
|
-
"
|
|
3108
|
+
"description": "This property specifies the tab order of the element.",
|
|
3109
|
+
"attribute": "tabIndex",
|
|
3080
3110
|
"reflects": true
|
|
3081
3111
|
}
|
|
3082
3112
|
],
|
|
3083
3113
|
"attributes": [
|
|
3084
3114
|
{
|
|
3085
|
-
"name": "
|
|
3115
|
+
"name": "tabIndex",
|
|
3086
3116
|
"type": {
|
|
3087
3117
|
"text": "number"
|
|
3088
3118
|
},
|
|
3089
3119
|
"default": "0",
|
|
3120
|
+
"description": "This property specifies the tab order of the element.",
|
|
3090
3121
|
"fieldName": "tabIndex"
|
|
3091
3122
|
}
|
|
3092
3123
|
],
|