@momentum-design/components 0.71.2 → 0.72.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +350 -339
- package/dist/browser/index.js.map +4 -4
- package/dist/components/animation/animation.component.d.ts +76 -0
- package/dist/components/animation/animation.component.js +168 -0
- package/dist/components/animation/animation.constants.d.ts +7 -0
- package/dist/components/animation/animation.constants.js +8 -0
- package/dist/components/animation/animation.styles.d.ts +2 -0
- package/dist/components/animation/animation.styles.js +3 -0
- package/dist/components/animation/animation.types.d.ts +10 -0
- package/dist/components/animation/animation.types.js +1 -0
- package/dist/components/animation/index.d.ts +7 -0
- package/dist/components/animation/index.js +4 -0
- package/dist/custom-elements.json +1034 -830
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/react/animation/index.d.ts +18 -0
- package/dist/react/animation/index.js +26 -0
- package/dist/react/index.d.ts +4 -3
- package/dist/react/index.js +4 -3
- package/package.json +3 -1
|
@@ -2,6 +2,271 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "components/animation/animation.component.js",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
|
|
12
|
+
"name": "Animation",
|
|
13
|
+
"members": [
|
|
14
|
+
{
|
|
15
|
+
"kind": "field",
|
|
16
|
+
"name": "name",
|
|
17
|
+
"type": {
|
|
18
|
+
"text": "AnimationNames | undefined"
|
|
19
|
+
},
|
|
20
|
+
"description": "Name of the animation (= filename)",
|
|
21
|
+
"attribute": "name",
|
|
22
|
+
"reflects": true
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"kind": "field",
|
|
26
|
+
"name": "loop",
|
|
27
|
+
"type": {
|
|
28
|
+
"text": "LoopType | undefined"
|
|
29
|
+
},
|
|
30
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
31
|
+
"attribute": "loop",
|
|
32
|
+
"reflects": true
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"kind": "field",
|
|
36
|
+
"name": "autoplay",
|
|
37
|
+
"type": {
|
|
38
|
+
"text": "boolean | undefined"
|
|
39
|
+
},
|
|
40
|
+
"description": "Weather start the animation automatically",
|
|
41
|
+
"attribute": "autoplay",
|
|
42
|
+
"reflects": true
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"kind": "field",
|
|
46
|
+
"name": "ariaLabel",
|
|
47
|
+
"type": {
|
|
48
|
+
"text": "string | null"
|
|
49
|
+
},
|
|
50
|
+
"default": "null",
|
|
51
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
52
|
+
"attribute": "aria-label"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"kind": "field",
|
|
56
|
+
"name": "ariaLabelledBy",
|
|
57
|
+
"type": {
|
|
58
|
+
"text": "string | null"
|
|
59
|
+
},
|
|
60
|
+
"default": "null",
|
|
61
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
62
|
+
"attribute": "aria-labelledby"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"kind": "field",
|
|
66
|
+
"name": "lottieInstance",
|
|
67
|
+
"type": {
|
|
68
|
+
"text": "AnimationItem | undefined"
|
|
69
|
+
},
|
|
70
|
+
"privacy": "private",
|
|
71
|
+
"description": "Lottie animation instance"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"kind": "field",
|
|
75
|
+
"name": "containerRef",
|
|
76
|
+
"type": {
|
|
77
|
+
"text": "Ref<HTMLDivElement>"
|
|
78
|
+
},
|
|
79
|
+
"privacy": "private",
|
|
80
|
+
"description": "Container for the animation"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"kind": "field",
|
|
84
|
+
"name": "animation",
|
|
85
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
86
|
+
"readonly": true
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"kind": "method",
|
|
90
|
+
"name": "getLoopValue",
|
|
91
|
+
"privacy": "private"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"kind": "method",
|
|
95
|
+
"name": "onLoadSuccessHandler",
|
|
96
|
+
"privacy": "private",
|
|
97
|
+
"parameters": [
|
|
98
|
+
{
|
|
99
|
+
"name": "animationData",
|
|
100
|
+
"type": {
|
|
101
|
+
"text": "any"
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
],
|
|
105
|
+
"description": "Create new lotty instance for the loaded data"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"kind": "method",
|
|
109
|
+
"name": "onLoadFailHandler",
|
|
110
|
+
"privacy": "private",
|
|
111
|
+
"parameters": [
|
|
112
|
+
{
|
|
113
|
+
"name": "error",
|
|
114
|
+
"type": {
|
|
115
|
+
"text": "Error"
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
],
|
|
119
|
+
"description": "Error handler for animation loading"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"kind": "method",
|
|
123
|
+
"name": "getAnimationData",
|
|
124
|
+
"privacy": "private",
|
|
125
|
+
"description": "Import animation data dynamically"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"kind": "field",
|
|
129
|
+
"name": "onCompleteHandler",
|
|
130
|
+
"description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
|
|
131
|
+
}
|
|
132
|
+
],
|
|
133
|
+
"events": [
|
|
134
|
+
{
|
|
135
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
136
|
+
"name": "complete",
|
|
137
|
+
"reactName": "onComplete"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
141
|
+
"name": "error",
|
|
142
|
+
"reactName": "onError"
|
|
143
|
+
}
|
|
144
|
+
],
|
|
145
|
+
"attributes": [
|
|
146
|
+
{
|
|
147
|
+
"name": "name",
|
|
148
|
+
"type": {
|
|
149
|
+
"text": "AnimationNames | undefined"
|
|
150
|
+
},
|
|
151
|
+
"description": "Name of the animation (= filename)",
|
|
152
|
+
"fieldName": "name"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"name": "loop",
|
|
156
|
+
"type": {
|
|
157
|
+
"text": "LoopType | undefined"
|
|
158
|
+
},
|
|
159
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
160
|
+
"fieldName": "loop"
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"name": "autoplay",
|
|
164
|
+
"type": {
|
|
165
|
+
"text": "boolean | undefined"
|
|
166
|
+
},
|
|
167
|
+
"description": "Weather start the animation automatically",
|
|
168
|
+
"fieldName": "autoplay"
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
"name": "aria-label",
|
|
172
|
+
"type": {
|
|
173
|
+
"text": "string | null"
|
|
174
|
+
},
|
|
175
|
+
"default": "null",
|
|
176
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
177
|
+
"fieldName": "ariaLabel"
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"name": "aria-labelledby",
|
|
181
|
+
"type": {
|
|
182
|
+
"text": "string | null"
|
|
183
|
+
},
|
|
184
|
+
"default": "null",
|
|
185
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
186
|
+
"fieldName": "ariaLabelledBy"
|
|
187
|
+
}
|
|
188
|
+
],
|
|
189
|
+
"superclass": {
|
|
190
|
+
"name": "Component",
|
|
191
|
+
"module": "/src/models"
|
|
192
|
+
},
|
|
193
|
+
"tagName": "mdc-animation",
|
|
194
|
+
"jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
|
|
195
|
+
"customElement": true
|
|
196
|
+
}
|
|
197
|
+
],
|
|
198
|
+
"exports": [
|
|
199
|
+
{
|
|
200
|
+
"kind": "js",
|
|
201
|
+
"name": "default",
|
|
202
|
+
"declaration": {
|
|
203
|
+
"name": "Animation",
|
|
204
|
+
"module": "components/animation/animation.component.js"
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
]
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"kind": "javascript-module",
|
|
211
|
+
"path": "components/appheader/appheader.component.js",
|
|
212
|
+
"declarations": [
|
|
213
|
+
{
|
|
214
|
+
"kind": "class",
|
|
215
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
216
|
+
"name": "Appheader",
|
|
217
|
+
"cssParts": [
|
|
218
|
+
{
|
|
219
|
+
"description": "The main container for styling the header.",
|
|
220
|
+
"name": "container"
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"description": "The leading section of the header.",
|
|
224
|
+
"name": "leading-section"
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"description": "The center section of the header.",
|
|
228
|
+
"name": "center-section"
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"description": "The trailing section of the header.",
|
|
232
|
+
"name": "trailing-section"
|
|
233
|
+
}
|
|
234
|
+
],
|
|
235
|
+
"slots": [
|
|
236
|
+
{
|
|
237
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
238
|
+
"name": "leading"
|
|
239
|
+
},
|
|
240
|
+
{
|
|
241
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
242
|
+
"name": "center"
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
246
|
+
"name": "trailing"
|
|
247
|
+
}
|
|
248
|
+
],
|
|
249
|
+
"members": [],
|
|
250
|
+
"superclass": {
|
|
251
|
+
"name": "Component",
|
|
252
|
+
"module": "/src/models"
|
|
253
|
+
},
|
|
254
|
+
"tagName": "mdc-appheader",
|
|
255
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
256
|
+
"customElement": true
|
|
257
|
+
}
|
|
258
|
+
],
|
|
259
|
+
"exports": [
|
|
260
|
+
{
|
|
261
|
+
"kind": "js",
|
|
262
|
+
"name": "default",
|
|
263
|
+
"declaration": {
|
|
264
|
+
"name": "Appheader",
|
|
265
|
+
"module": "components/appheader/appheader.component.js"
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
]
|
|
269
|
+
},
|
|
5
270
|
{
|
|
6
271
|
"kind": "javascript-module",
|
|
7
272
|
"path": "components/alertchip/alertchip.component.js",
|
|
@@ -738,97 +1003,36 @@
|
|
|
738
1003
|
},
|
|
739
1004
|
{
|
|
740
1005
|
"kind": "javascript-module",
|
|
741
|
-
"path": "components/
|
|
1006
|
+
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
742
1007
|
"declarations": [
|
|
743
1008
|
{
|
|
744
1009
|
"kind": "class",
|
|
745
|
-
"description": "The `mdc-
|
|
746
|
-
"name": "
|
|
747
|
-
"
|
|
748
|
-
{
|
|
749
|
-
"description": "The main container for styling the header.",
|
|
750
|
-
"name": "container"
|
|
751
|
-
},
|
|
1010
|
+
"description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
|
|
1011
|
+
"name": "AvatarButton",
|
|
1012
|
+
"cssProperties": [
|
|
752
1013
|
{
|
|
753
|
-
"description": "
|
|
754
|
-
"name": "
|
|
1014
|
+
"description": "Background color of the overlay in rest state",
|
|
1015
|
+
"name": "--mdc-avatarbutton-overlay-background-color-rest"
|
|
755
1016
|
},
|
|
756
1017
|
{
|
|
757
|
-
"description": "
|
|
758
|
-
"name": "
|
|
1018
|
+
"description": "Background color of the overlay in hover state",
|
|
1019
|
+
"name": "--mdc-avatarbutton-overlay-background-color-hover"
|
|
759
1020
|
},
|
|
760
1021
|
{
|
|
761
|
-
"description": "
|
|
762
|
-
"name": "
|
|
1022
|
+
"description": "Background color of the overlay in active state",
|
|
1023
|
+
"name": "--mdc-avatarbutton-overlay-background-color-active"
|
|
763
1024
|
}
|
|
764
1025
|
],
|
|
765
|
-
"
|
|
1026
|
+
"members": [
|
|
766
1027
|
{
|
|
767
|
-
"
|
|
768
|
-
"name": "
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
"
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
776
|
-
"name": "trailing"
|
|
777
|
-
}
|
|
778
|
-
],
|
|
779
|
-
"members": [],
|
|
780
|
-
"superclass": {
|
|
781
|
-
"name": "Component",
|
|
782
|
-
"module": "/src/models"
|
|
783
|
-
},
|
|
784
|
-
"tagName": "mdc-appheader",
|
|
785
|
-
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
786
|
-
"customElement": true
|
|
787
|
-
}
|
|
788
|
-
],
|
|
789
|
-
"exports": [
|
|
790
|
-
{
|
|
791
|
-
"kind": "js",
|
|
792
|
-
"name": "default",
|
|
793
|
-
"declaration": {
|
|
794
|
-
"name": "Appheader",
|
|
795
|
-
"module": "components/appheader/appheader.component.js"
|
|
796
|
-
}
|
|
797
|
-
}
|
|
798
|
-
]
|
|
799
|
-
},
|
|
800
|
-
{
|
|
801
|
-
"kind": "javascript-module",
|
|
802
|
-
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
803
|
-
"declarations": [
|
|
804
|
-
{
|
|
805
|
-
"kind": "class",
|
|
806
|
-
"description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
|
|
807
|
-
"name": "AvatarButton",
|
|
808
|
-
"cssProperties": [
|
|
809
|
-
{
|
|
810
|
-
"description": "Background color of the overlay in rest state",
|
|
811
|
-
"name": "--mdc-avatarbutton-overlay-background-color-rest"
|
|
812
|
-
},
|
|
813
|
-
{
|
|
814
|
-
"description": "Background color of the overlay in hover state",
|
|
815
|
-
"name": "--mdc-avatarbutton-overlay-background-color-hover"
|
|
816
|
-
},
|
|
817
|
-
{
|
|
818
|
-
"description": "Background color of the overlay in active state",
|
|
819
|
-
"name": "--mdc-avatarbutton-overlay-background-color-active"
|
|
820
|
-
}
|
|
821
|
-
],
|
|
822
|
-
"members": [
|
|
823
|
-
{
|
|
824
|
-
"kind": "field",
|
|
825
|
-
"name": "ariaLabel",
|
|
826
|
-
"type": {
|
|
827
|
-
"text": "string | null"
|
|
828
|
-
},
|
|
829
|
-
"default": "null",
|
|
830
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
831
|
-
"attribute": "aria-label"
|
|
1028
|
+
"kind": "field",
|
|
1029
|
+
"name": "ariaLabel",
|
|
1030
|
+
"type": {
|
|
1031
|
+
"text": "string | null"
|
|
1032
|
+
},
|
|
1033
|
+
"default": "null",
|
|
1034
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
1035
|
+
"attribute": "aria-label"
|
|
832
1036
|
},
|
|
833
1037
|
{
|
|
834
1038
|
"kind": "method",
|
|
@@ -1937,57 +2141,75 @@
|
|
|
1937
2141
|
},
|
|
1938
2142
|
{
|
|
1939
2143
|
"kind": "javascript-module",
|
|
1940
|
-
"path": "components/
|
|
2144
|
+
"path": "components/button/button.component.js",
|
|
1941
2145
|
"declarations": [
|
|
1942
2146
|
{
|
|
1943
2147
|
"kind": "class",
|
|
1944
|
-
"description": "`mdc-
|
|
1945
|
-
"name": "
|
|
2148
|
+
"description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\nButton Variants:\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n\nButton Colors:\n- **Positive**: Green color.\n- **Negative**: Red color.\n- **Accent**: Blue color.\n- **Promotional**: Purple color.\n- **Default**: White color.\n\nButton Sizes (in REM units):\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- **Tertiary icon button**: 20.\n\nButton Types:\n- **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n- **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n- **Icon button**: A button represented by just an icon without any text.\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons.",
|
|
2149
|
+
"name": "Button",
|
|
2150
|
+
"slots": [
|
|
2151
|
+
{
|
|
2152
|
+
"description": "Text label of the button.",
|
|
2153
|
+
"name": ""
|
|
2154
|
+
}
|
|
2155
|
+
],
|
|
1946
2156
|
"members": [
|
|
1947
2157
|
{
|
|
1948
2158
|
"kind": "field",
|
|
1949
2159
|
"name": "size",
|
|
1950
2160
|
"type": {
|
|
1951
|
-
"text": "
|
|
2161
|
+
"text": "ButtonSize"
|
|
1952
2162
|
},
|
|
1953
|
-
"description": "
|
|
2163
|
+
"description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
|
|
1954
2164
|
"default": "32",
|
|
1955
2165
|
"attribute": "size",
|
|
1956
|
-
"reflects": true
|
|
2166
|
+
"reflects": true,
|
|
2167
|
+
"inheritedFrom": {
|
|
2168
|
+
"name": "Buttonsimple",
|
|
2169
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2170
|
+
}
|
|
1957
2171
|
},
|
|
1958
2172
|
{
|
|
1959
2173
|
"kind": "field",
|
|
1960
|
-
"name": "
|
|
2174
|
+
"name": "inverted",
|
|
1961
2175
|
"type": {
|
|
1962
|
-
"text": "boolean
|
|
2176
|
+
"text": "boolean"
|
|
1963
2177
|
},
|
|
1964
|
-
"description": "
|
|
1965
|
-
"default": "
|
|
1966
|
-
"attribute": "
|
|
2178
|
+
"description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
|
|
2179
|
+
"default": "false",
|
|
2180
|
+
"attribute": "inverted",
|
|
1967
2181
|
"reflects": true
|
|
1968
2182
|
},
|
|
2183
|
+
{
|
|
2184
|
+
"kind": "field",
|
|
2185
|
+
"name": "role",
|
|
2186
|
+
"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.",
|
|
2187
|
+
"default": "'button'",
|
|
2188
|
+
"attribute": "role",
|
|
2189
|
+
"reflects": true,
|
|
2190
|
+
"type": {
|
|
2191
|
+
"text": "string"
|
|
2192
|
+
},
|
|
2193
|
+
"inheritedFrom": {
|
|
2194
|
+
"name": "Buttonsimple",
|
|
2195
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2196
|
+
}
|
|
2197
|
+
},
|
|
1969
2198
|
{
|
|
1970
2199
|
"kind": "method",
|
|
1971
|
-
"name": "
|
|
2200
|
+
"name": "inferFilledIconName",
|
|
1972
2201
|
"privacy": "private",
|
|
1973
2202
|
"parameters": [
|
|
1974
2203
|
{
|
|
1975
|
-
"name": "
|
|
1976
|
-
"type": {
|
|
1977
|
-
"text": "HTMLElement"
|
|
1978
|
-
},
|
|
1979
|
-
"description": "The buttonlink element."
|
|
1980
|
-
},
|
|
1981
|
-
{
|
|
1982
|
-
"name": "softDisabled",
|
|
2204
|
+
"name": "active",
|
|
1983
2205
|
"optional": true,
|
|
1984
2206
|
"type": {
|
|
1985
2207
|
"text": "boolean"
|
|
1986
2208
|
},
|
|
1987
|
-
"description": "The
|
|
2209
|
+
"description": "The active state."
|
|
1988
2210
|
}
|
|
1989
2211
|
],
|
|
1990
|
-
"description": "
|
|
2212
|
+
"description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
|
|
1991
2213
|
},
|
|
1992
2214
|
{
|
|
1993
2215
|
"kind": "field",
|
|
@@ -2118,21 +2340,6 @@
|
|
|
2118
2340
|
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2119
2341
|
}
|
|
2120
2342
|
},
|
|
2121
|
-
{
|
|
2122
|
-
"kind": "field",
|
|
2123
|
-
"name": "disabled",
|
|
2124
|
-
"type": {
|
|
2125
|
-
"text": "boolean | undefined"
|
|
2126
|
-
},
|
|
2127
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
2128
|
-
"default": "undefined",
|
|
2129
|
-
"attribute": "disabled",
|
|
2130
|
-
"reflects": true,
|
|
2131
|
-
"inheritedFrom": {
|
|
2132
|
-
"name": "DisabledMixin",
|
|
2133
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
2134
|
-
}
|
|
2135
|
-
},
|
|
2136
2343
|
{
|
|
2137
2344
|
"kind": "field",
|
|
2138
2345
|
"name": "tabIndex",
|
|
@@ -2150,142 +2357,223 @@
|
|
|
2150
2357
|
},
|
|
2151
2358
|
{
|
|
2152
2359
|
"kind": "field",
|
|
2153
|
-
"name": "
|
|
2360
|
+
"name": "disabled",
|
|
2154
2361
|
"type": {
|
|
2155
|
-
"text": "boolean"
|
|
2362
|
+
"text": "boolean | undefined"
|
|
2156
2363
|
},
|
|
2157
|
-
"description": "
|
|
2158
|
-
"default": "
|
|
2159
|
-
"attribute": "
|
|
2364
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
2365
|
+
"default": "undefined",
|
|
2366
|
+
"attribute": "disabled",
|
|
2160
2367
|
"reflects": true,
|
|
2161
2368
|
"inheritedFrom": {
|
|
2162
|
-
"name": "
|
|
2163
|
-
"module": "
|
|
2369
|
+
"name": "DisabledMixin",
|
|
2370
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
2164
2371
|
}
|
|
2165
2372
|
},
|
|
2166
2373
|
{
|
|
2167
2374
|
"kind": "field",
|
|
2168
|
-
"name": "
|
|
2375
|
+
"name": "active",
|
|
2169
2376
|
"type": {
|
|
2170
|
-
"text": "boolean"
|
|
2377
|
+
"text": "boolean | undefined"
|
|
2171
2378
|
},
|
|
2172
|
-
"description": "The
|
|
2173
|
-
"default": "
|
|
2174
|
-
"attribute": "
|
|
2379
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
2380
|
+
"default": "undefined",
|
|
2381
|
+
"attribute": "active",
|
|
2175
2382
|
"reflects": true,
|
|
2176
2383
|
"inheritedFrom": {
|
|
2177
|
-
"name": "
|
|
2178
|
-
"module": "components/
|
|
2384
|
+
"name": "Buttonsimple",
|
|
2385
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2179
2386
|
}
|
|
2180
2387
|
},
|
|
2181
2388
|
{
|
|
2182
2389
|
"kind": "field",
|
|
2183
|
-
"name": "
|
|
2390
|
+
"name": "softDisabled",
|
|
2184
2391
|
"type": {
|
|
2185
|
-
"text": "
|
|
2392
|
+
"text": "boolean | undefined"
|
|
2186
2393
|
},
|
|
2187
|
-
"
|
|
2188
|
-
"
|
|
2189
|
-
"attribute": "
|
|
2394
|
+
"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.",
|
|
2395
|
+
"default": "undefined",
|
|
2396
|
+
"attribute": "soft-disabled",
|
|
2190
2397
|
"reflects": true,
|
|
2191
2398
|
"inheritedFrom": {
|
|
2192
|
-
"name": "
|
|
2193
|
-
"module": "components/
|
|
2399
|
+
"name": "Buttonsimple",
|
|
2400
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2194
2401
|
}
|
|
2195
2402
|
},
|
|
2196
2403
|
{
|
|
2197
2404
|
"kind": "field",
|
|
2198
|
-
"name": "
|
|
2405
|
+
"name": "ariaStateKey",
|
|
2199
2406
|
"type": {
|
|
2200
|
-
"text": "string"
|
|
2407
|
+
"text": "string | undefined"
|
|
2201
2408
|
},
|
|
2202
|
-
"
|
|
2203
|
-
"
|
|
2204
|
-
"attribute": "
|
|
2409
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
2410
|
+
"default": "'aria-pressed' (when)",
|
|
2411
|
+
"attribute": "ariaStateKey",
|
|
2205
2412
|
"reflects": true,
|
|
2206
2413
|
"inheritedFrom": {
|
|
2207
|
-
"name": "
|
|
2208
|
-
"module": "components/
|
|
2414
|
+
"name": "Buttonsimple",
|
|
2415
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2209
2416
|
}
|
|
2210
2417
|
},
|
|
2211
2418
|
{
|
|
2212
2419
|
"kind": "field",
|
|
2213
|
-
"name": "
|
|
2420
|
+
"name": "type",
|
|
2214
2421
|
"type": {
|
|
2215
|
-
"text": "
|
|
2422
|
+
"text": "ButtonType"
|
|
2216
2423
|
},
|
|
2217
|
-
"description": "
|
|
2218
|
-
"
|
|
2424
|
+
"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.",
|
|
2425
|
+
"default": "button",
|
|
2426
|
+
"attribute": "type",
|
|
2219
2427
|
"reflects": true,
|
|
2220
2428
|
"inheritedFrom": {
|
|
2221
|
-
"name": "
|
|
2222
|
-
"module": "components/
|
|
2429
|
+
"name": "Buttonsimple",
|
|
2430
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2223
2431
|
}
|
|
2224
2432
|
},
|
|
2225
2433
|
{
|
|
2226
|
-
"kind": "
|
|
2227
|
-
"name": "
|
|
2228
|
-
"privacy": "
|
|
2434
|
+
"kind": "method",
|
|
2435
|
+
"name": "executeAction",
|
|
2436
|
+
"privacy": "protected",
|
|
2229
2437
|
"inheritedFrom": {
|
|
2230
|
-
"name": "
|
|
2231
|
-
"module": "components/
|
|
2438
|
+
"name": "Buttonsimple",
|
|
2439
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2232
2440
|
}
|
|
2233
2441
|
},
|
|
2234
2442
|
{
|
|
2235
2443
|
"kind": "method",
|
|
2236
|
-
"name": "
|
|
2237
|
-
"privacy": "
|
|
2444
|
+
"name": "setActive",
|
|
2445
|
+
"privacy": "protected",
|
|
2238
2446
|
"parameters": [
|
|
2239
2447
|
{
|
|
2240
|
-
"name": "
|
|
2448
|
+
"name": "element",
|
|
2449
|
+
"type": {
|
|
2450
|
+
"text": "HTMLElement"
|
|
2451
|
+
},
|
|
2452
|
+
"description": "The button element"
|
|
2453
|
+
},
|
|
2454
|
+
{
|
|
2455
|
+
"name": "active",
|
|
2456
|
+
"optional": true,
|
|
2241
2457
|
"type": {
|
|
2242
2458
|
"text": "boolean"
|
|
2243
2459
|
},
|
|
2244
|
-
"description": "
|
|
2460
|
+
"description": "The active state of the element"
|
|
2245
2461
|
}
|
|
2246
2462
|
],
|
|
2247
|
-
"description": "Sets
|
|
2248
|
-
"inheritedFrom": {
|
|
2249
|
-
"name": "Linksimple",
|
|
2250
|
-
"module": "components/linksimple/linksimple.component.js"
|
|
2251
|
-
}
|
|
2252
|
-
}
|
|
2253
|
-
],
|
|
2254
|
-
"events": [
|
|
2255
|
-
{
|
|
2256
|
-
"description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
|
|
2257
|
-
"name": "click",
|
|
2258
|
-
"reactName": "onClick",
|
|
2463
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
2259
2464
|
"inheritedFrom": {
|
|
2260
|
-
"name": "
|
|
2261
|
-
"module": "
|
|
2465
|
+
"name": "Buttonsimple",
|
|
2466
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2262
2467
|
}
|
|
2263
2468
|
},
|
|
2264
2469
|
{
|
|
2265
|
-
"
|
|
2266
|
-
"name": "
|
|
2267
|
-
"
|
|
2268
|
-
"
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2470
|
+
"kind": "method",
|
|
2471
|
+
"name": "setSoftDisabled",
|
|
2472
|
+
"privacy": "private",
|
|
2473
|
+
"parameters": [
|
|
2474
|
+
{
|
|
2475
|
+
"name": "element",
|
|
2476
|
+
"type": {
|
|
2477
|
+
"text": "HTMLElement"
|
|
2478
|
+
},
|
|
2479
|
+
"description": "The button element."
|
|
2480
|
+
},
|
|
2481
|
+
{
|
|
2482
|
+
"name": "softDisabled",
|
|
2483
|
+
"optional": true,
|
|
2484
|
+
"type": {
|
|
2485
|
+
"text": "boolean"
|
|
2486
|
+
},
|
|
2487
|
+
"description": "The soft-disabled state."
|
|
2488
|
+
}
|
|
2489
|
+
],
|
|
2490
|
+
"description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
|
|
2491
|
+
"inheritedFrom": {
|
|
2492
|
+
"name": "Buttonsimple",
|
|
2493
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2494
|
+
}
|
|
2272
2495
|
},
|
|
2273
2496
|
{
|
|
2274
|
-
"
|
|
2275
|
-
"name": "
|
|
2276
|
-
"
|
|
2497
|
+
"kind": "method",
|
|
2498
|
+
"name": "setDisabled",
|
|
2499
|
+
"privacy": "private",
|
|
2500
|
+
"parameters": [
|
|
2501
|
+
{
|
|
2502
|
+
"name": "element",
|
|
2503
|
+
"type": {
|
|
2504
|
+
"text": "HTMLElement"
|
|
2505
|
+
},
|
|
2506
|
+
"description": "The button element."
|
|
2507
|
+
},
|
|
2508
|
+
{
|
|
2509
|
+
"name": "disabled",
|
|
2510
|
+
"type": {
|
|
2511
|
+
"text": "boolean"
|
|
2512
|
+
},
|
|
2513
|
+
"description": "The disabled state."
|
|
2514
|
+
}
|
|
2515
|
+
],
|
|
2516
|
+
"description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
|
|
2277
2517
|
"inheritedFrom": {
|
|
2278
|
-
"name": "
|
|
2279
|
-
"module": "
|
|
2518
|
+
"name": "Buttonsimple",
|
|
2519
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2280
2520
|
}
|
|
2281
2521
|
},
|
|
2282
2522
|
{
|
|
2283
|
-
"
|
|
2284
|
-
"name": "
|
|
2285
|
-
"
|
|
2523
|
+
"kind": "method",
|
|
2524
|
+
"name": "triggerClickEvent",
|
|
2525
|
+
"privacy": "private",
|
|
2286
2526
|
"inheritedFrom": {
|
|
2287
|
-
"name": "
|
|
2288
|
-
"module": "
|
|
2527
|
+
"name": "Buttonsimple",
|
|
2528
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2529
|
+
}
|
|
2530
|
+
},
|
|
2531
|
+
{
|
|
2532
|
+
"kind": "method",
|
|
2533
|
+
"name": "handleBlur",
|
|
2534
|
+
"privacy": "private",
|
|
2535
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
2536
|
+
"inheritedFrom": {
|
|
2537
|
+
"name": "Buttonsimple",
|
|
2538
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2539
|
+
}
|
|
2540
|
+
},
|
|
2541
|
+
{
|
|
2542
|
+
"kind": "method",
|
|
2543
|
+
"name": "handleKeyDown",
|
|
2544
|
+
"privacy": "private",
|
|
2545
|
+
"parameters": [
|
|
2546
|
+
{
|
|
2547
|
+
"name": "event",
|
|
2548
|
+
"type": {
|
|
2549
|
+
"text": "KeyboardEvent"
|
|
2550
|
+
},
|
|
2551
|
+
"description": "The keyboard event."
|
|
2552
|
+
}
|
|
2553
|
+
],
|
|
2554
|
+
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
|
2555
|
+
"inheritedFrom": {
|
|
2556
|
+
"name": "Buttonsimple",
|
|
2557
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2558
|
+
}
|
|
2559
|
+
},
|
|
2560
|
+
{
|
|
2561
|
+
"kind": "method",
|
|
2562
|
+
"name": "handleKeyUp",
|
|
2563
|
+
"privacy": "private",
|
|
2564
|
+
"parameters": [
|
|
2565
|
+
{
|
|
2566
|
+
"name": "event",
|
|
2567
|
+
"type": {
|
|
2568
|
+
"text": "KeyboardEvent"
|
|
2569
|
+
},
|
|
2570
|
+
"description": "The keyboard event."
|
|
2571
|
+
}
|
|
2572
|
+
],
|
|
2573
|
+
"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.",
|
|
2574
|
+
"inheritedFrom": {
|
|
2575
|
+
"name": "Buttonsimple",
|
|
2576
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2289
2577
|
}
|
|
2290
2578
|
}
|
|
2291
2579
|
],
|
|
@@ -2293,20 +2581,37 @@
|
|
|
2293
2581
|
{
|
|
2294
2582
|
"name": "size",
|
|
2295
2583
|
"type": {
|
|
2296
|
-
"text": "
|
|
2584
|
+
"text": "ButtonSize"
|
|
2297
2585
|
},
|
|
2298
|
-
"description": "
|
|
2586
|
+
"description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
|
|
2299
2587
|
"default": "32",
|
|
2300
|
-
"fieldName": "size"
|
|
2588
|
+
"fieldName": "size",
|
|
2589
|
+
"inheritedFrom": {
|
|
2590
|
+
"name": "Buttonsimple",
|
|
2591
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2592
|
+
}
|
|
2301
2593
|
},
|
|
2302
2594
|
{
|
|
2303
|
-
"name": "
|
|
2595
|
+
"name": "inverted",
|
|
2304
2596
|
"type": {
|
|
2305
|
-
"text": "boolean
|
|
2597
|
+
"text": "boolean"
|
|
2306
2598
|
},
|
|
2307
|
-
"description": "
|
|
2308
|
-
"default": "
|
|
2309
|
-
"fieldName": "
|
|
2599
|
+
"description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
|
|
2600
|
+
"default": "false",
|
|
2601
|
+
"fieldName": "inverted"
|
|
2602
|
+
},
|
|
2603
|
+
{
|
|
2604
|
+
"name": "role",
|
|
2605
|
+
"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.",
|
|
2606
|
+
"default": "'button'",
|
|
2607
|
+
"fieldName": "role",
|
|
2608
|
+
"type": {
|
|
2609
|
+
"text": "string"
|
|
2610
|
+
},
|
|
2611
|
+
"inheritedFrom": {
|
|
2612
|
+
"name": "Buttonsimple",
|
|
2613
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2614
|
+
}
|
|
2310
2615
|
},
|
|
2311
2616
|
{
|
|
2312
2617
|
"name": "prefix-icon",
|
|
@@ -2358,19 +2663,6 @@
|
|
|
2358
2663
|
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
2359
2664
|
}
|
|
2360
2665
|
},
|
|
2361
|
-
{
|
|
2362
|
-
"name": "disabled",
|
|
2363
|
-
"type": {
|
|
2364
|
-
"text": "boolean | undefined"
|
|
2365
|
-
},
|
|
2366
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
2367
|
-
"default": "undefined",
|
|
2368
|
-
"fieldName": "disabled",
|
|
2369
|
-
"inheritedFrom": {
|
|
2370
|
-
"name": "DisabledMixin",
|
|
2371
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
2372
|
-
}
|
|
2373
|
-
},
|
|
2374
2666
|
{
|
|
2375
2667
|
"name": "tabIndex",
|
|
2376
2668
|
"type": {
|
|
@@ -2385,154 +2677,119 @@
|
|
|
2385
2677
|
}
|
|
2386
2678
|
},
|
|
2387
2679
|
{
|
|
2388
|
-
"name": "
|
|
2680
|
+
"name": "disabled",
|
|
2389
2681
|
"type": {
|
|
2390
|
-
"text": "boolean"
|
|
2682
|
+
"text": "boolean | undefined"
|
|
2391
2683
|
},
|
|
2392
|
-
"description": "
|
|
2393
|
-
"default": "
|
|
2394
|
-
"fieldName": "
|
|
2684
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
2685
|
+
"default": "undefined",
|
|
2686
|
+
"fieldName": "disabled",
|
|
2395
2687
|
"inheritedFrom": {
|
|
2396
|
-
"name": "
|
|
2397
|
-
"module": "src/
|
|
2688
|
+
"name": "DisabledMixin",
|
|
2689
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
2398
2690
|
}
|
|
2399
2691
|
},
|
|
2400
2692
|
{
|
|
2401
|
-
"name": "
|
|
2693
|
+
"name": "active",
|
|
2402
2694
|
"type": {
|
|
2403
|
-
"text": "boolean"
|
|
2695
|
+
"text": "boolean | undefined"
|
|
2404
2696
|
},
|
|
2405
|
-
"description": "The
|
|
2406
|
-
"default": "
|
|
2407
|
-
"fieldName": "
|
|
2697
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
2698
|
+
"default": "undefined",
|
|
2699
|
+
"fieldName": "active",
|
|
2408
2700
|
"inheritedFrom": {
|
|
2409
|
-
"name": "
|
|
2410
|
-
"module": "src/components/
|
|
2701
|
+
"name": "Buttonsimple",
|
|
2702
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2411
2703
|
}
|
|
2412
2704
|
},
|
|
2413
2705
|
{
|
|
2414
|
-
"name": "
|
|
2706
|
+
"name": "soft-disabled",
|
|
2415
2707
|
"type": {
|
|
2416
|
-
"text": "
|
|
2708
|
+
"text": "boolean | undefined"
|
|
2417
2709
|
},
|
|
2418
|
-
"
|
|
2419
|
-
"
|
|
2420
|
-
"fieldName": "
|
|
2710
|
+
"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.",
|
|
2711
|
+
"default": "undefined",
|
|
2712
|
+
"fieldName": "softDisabled",
|
|
2421
2713
|
"inheritedFrom": {
|
|
2422
|
-
"name": "
|
|
2423
|
-
"module": "src/components/
|
|
2714
|
+
"name": "Buttonsimple",
|
|
2715
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2424
2716
|
}
|
|
2425
2717
|
},
|
|
2426
2718
|
{
|
|
2427
|
-
"name": "
|
|
2719
|
+
"name": "ariaStateKey",
|
|
2428
2720
|
"type": {
|
|
2429
|
-
"text": "string"
|
|
2721
|
+
"text": "string | undefined"
|
|
2430
2722
|
},
|
|
2431
|
-
"
|
|
2432
|
-
"
|
|
2433
|
-
"fieldName": "
|
|
2723
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
2724
|
+
"default": "'aria-pressed' (when)",
|
|
2725
|
+
"fieldName": "ariaStateKey",
|
|
2434
2726
|
"inheritedFrom": {
|
|
2435
|
-
"name": "
|
|
2436
|
-
"module": "src/components/
|
|
2727
|
+
"name": "Buttonsimple",
|
|
2728
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2437
2729
|
}
|
|
2438
2730
|
},
|
|
2439
2731
|
{
|
|
2440
|
-
"name": "
|
|
2732
|
+
"name": "type",
|
|
2441
2733
|
"type": {
|
|
2442
|
-
"text": "
|
|
2734
|
+
"text": "ButtonType"
|
|
2443
2735
|
},
|
|
2444
|
-
"description": "
|
|
2445
|
-
"
|
|
2446
|
-
"
|
|
2447
|
-
"name": "Linksimple",
|
|
2448
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2449
|
-
}
|
|
2450
|
-
}
|
|
2451
|
-
],
|
|
2452
|
-
"mixins": [
|
|
2453
|
-
{
|
|
2454
|
-
"name": "ButtonComponentMixin",
|
|
2455
|
-
"module": "/src/utils/mixins/ButtonComponentMixin"
|
|
2456
|
-
}
|
|
2457
|
-
],
|
|
2458
|
-
"superclass": {
|
|
2459
|
-
"name": "Linksimple",
|
|
2460
|
-
"module": "/src/components/linksimple/linksimple.component"
|
|
2461
|
-
},
|
|
2462
|
-
"tagName": "mdc-buttonlink",
|
|
2463
|
-
"jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix and postfix icons via slots.\n *\n * ### Features:\n * - Behaves like an link while visually resembling a button.\n * - Supports slots for `prefix-icon` and `postfix-icon`.\n * - Customizable size, color, and variant through attributes.\n * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n */",
|
|
2464
|
-
"customElement": true,
|
|
2465
|
-
"cssProperties": [
|
|
2466
|
-
{
|
|
2467
|
-
"description": "Border radius of the link.",
|
|
2468
|
-
"name": "--mdc-link-border-radius",
|
|
2469
|
-
"inheritedFrom": {
|
|
2470
|
-
"name": "Linksimple",
|
|
2471
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2472
|
-
}
|
|
2473
|
-
},
|
|
2474
|
-
{
|
|
2475
|
-
"description": "Color of the link’s child content in the active state.",
|
|
2476
|
-
"name": "--mdc-link-color-active",
|
|
2477
|
-
"inheritedFrom": {
|
|
2478
|
-
"name": "Linksimple",
|
|
2479
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2480
|
-
}
|
|
2481
|
-
},
|
|
2482
|
-
{
|
|
2483
|
-
"description": "Color of the link’s child content in the disabled state.",
|
|
2484
|
-
"name": "--mdc-link-color-disabled",
|
|
2485
|
-
"inheritedFrom": {
|
|
2486
|
-
"name": "Linksimple",
|
|
2487
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2488
|
-
}
|
|
2489
|
-
},
|
|
2490
|
-
{
|
|
2491
|
-
"description": "Color of the link’s child content in the hover state.",
|
|
2492
|
-
"name": "--mdc-link-color-hover",
|
|
2493
|
-
"inheritedFrom": {
|
|
2494
|
-
"name": "Linksimple",
|
|
2495
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2496
|
-
}
|
|
2497
|
-
},
|
|
2498
|
-
{
|
|
2499
|
-
"description": "Color of the link’s child content in the normal state.",
|
|
2500
|
-
"name": "--mdc-link-color-normal",
|
|
2736
|
+
"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.",
|
|
2737
|
+
"default": "button",
|
|
2738
|
+
"fieldName": "type",
|
|
2501
2739
|
"inheritedFrom": {
|
|
2502
|
-
"name": "
|
|
2503
|
-
"module": "src/components/
|
|
2740
|
+
"name": "Buttonsimple",
|
|
2741
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2504
2742
|
}
|
|
2505
|
-
}
|
|
2743
|
+
}
|
|
2744
|
+
],
|
|
2745
|
+
"mixins": [
|
|
2506
2746
|
{
|
|
2507
|
-
"
|
|
2508
|
-
"
|
|
2747
|
+
"name": "ButtonComponentMixin",
|
|
2748
|
+
"module": "/src/utils/mixins/ButtonComponentMixin"
|
|
2749
|
+
}
|
|
2750
|
+
],
|
|
2751
|
+
"superclass": {
|
|
2752
|
+
"name": "Buttonsimple",
|
|
2753
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
2754
|
+
},
|
|
2755
|
+
"tagName": "mdc-button",
|
|
2756
|
+
"jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
|
|
2757
|
+
"customElement": true,
|
|
2758
|
+
"events": [
|
|
2759
|
+
{
|
|
2760
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
2761
|
+
"name": "click",
|
|
2762
|
+
"reactName": "onClick",
|
|
2509
2763
|
"inheritedFrom": {
|
|
2510
|
-
"name": "
|
|
2511
|
-
"module": "src/components/
|
|
2764
|
+
"name": "Buttonsimple",
|
|
2765
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2512
2766
|
}
|
|
2513
2767
|
},
|
|
2514
2768
|
{
|
|
2515
|
-
"description": "
|
|
2516
|
-
"name": "
|
|
2769
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
2770
|
+
"name": "keydown",
|
|
2771
|
+
"reactName": "onKeyDown",
|
|
2517
2772
|
"inheritedFrom": {
|
|
2518
|
-
"name": "
|
|
2519
|
-
"module": "src/components/
|
|
2773
|
+
"name": "Buttonsimple",
|
|
2774
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2520
2775
|
}
|
|
2521
2776
|
},
|
|
2522
2777
|
{
|
|
2523
|
-
"description": "
|
|
2524
|
-
"name": "
|
|
2778
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
2779
|
+
"name": "keyup",
|
|
2780
|
+
"reactName": "onKeyUp",
|
|
2525
2781
|
"inheritedFrom": {
|
|
2526
|
-
"name": "
|
|
2527
|
-
"module": "src/components/
|
|
2782
|
+
"name": "Buttonsimple",
|
|
2783
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2528
2784
|
}
|
|
2529
2785
|
},
|
|
2530
2786
|
{
|
|
2531
|
-
"description": "
|
|
2532
|
-
"name": "
|
|
2787
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
2788
|
+
"name": "focus",
|
|
2789
|
+
"reactName": "onFocus",
|
|
2533
2790
|
"inheritedFrom": {
|
|
2534
|
-
"name": "
|
|
2535
|
-
"module": "src/components/
|
|
2791
|
+
"name": "Buttonsimple",
|
|
2792
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2536
2793
|
}
|
|
2537
2794
|
}
|
|
2538
2795
|
]
|
|
@@ -2543,83 +2800,65 @@
|
|
|
2543
2800
|
"kind": "js",
|
|
2544
2801
|
"name": "default",
|
|
2545
2802
|
"declaration": {
|
|
2546
|
-
"name": "
|
|
2547
|
-
"module": "components/
|
|
2803
|
+
"name": "Button",
|
|
2804
|
+
"module": "components/button/button.component.js"
|
|
2548
2805
|
}
|
|
2549
2806
|
}
|
|
2550
2807
|
]
|
|
2551
2808
|
},
|
|
2552
2809
|
{
|
|
2553
2810
|
"kind": "javascript-module",
|
|
2554
|
-
"path": "components/
|
|
2811
|
+
"path": "components/buttonlink/buttonlink.component.js",
|
|
2555
2812
|
"declarations": [
|
|
2556
2813
|
{
|
|
2557
2814
|
"kind": "class",
|
|
2558
|
-
"description": "`mdc-
|
|
2559
|
-
"name": "
|
|
2560
|
-
"slots": [
|
|
2561
|
-
{
|
|
2562
|
-
"description": "Text label of the button.",
|
|
2563
|
-
"name": ""
|
|
2564
|
-
}
|
|
2565
|
-
],
|
|
2815
|
+
"description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix and postfix icons via slots.\n\n### Features:\n- Behaves like an link while visually resembling a button.\n- Supports slots for `prefix-icon` and `postfix-icon`.\n- Customizable size, color, and variant through attributes.\n- Inherits accessibility and keyboard interaction support from `mdc-linksimple`.",
|
|
2816
|
+
"name": "ButtonLink",
|
|
2566
2817
|
"members": [
|
|
2567
2818
|
{
|
|
2568
2819
|
"kind": "field",
|
|
2569
2820
|
"name": "size",
|
|
2570
2821
|
"type": {
|
|
2571
|
-
"text": "
|
|
2822
|
+
"text": "PillButtonSize | IconButtonSize"
|
|
2572
2823
|
},
|
|
2573
|
-
"description": "
|
|
2824
|
+
"description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
|
|
2574
2825
|
"default": "32",
|
|
2575
2826
|
"attribute": "size",
|
|
2576
|
-
"reflects": true,
|
|
2577
|
-
"inheritedFrom": {
|
|
2578
|
-
"name": "Buttonsimple",
|
|
2579
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2580
|
-
}
|
|
2581
|
-
},
|
|
2582
|
-
{
|
|
2583
|
-
"kind": "field",
|
|
2584
|
-
"name": "inverted",
|
|
2585
|
-
"type": {
|
|
2586
|
-
"text": "boolean"
|
|
2587
|
-
},
|
|
2588
|
-
"description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
|
|
2589
|
-
"default": "false",
|
|
2590
|
-
"attribute": "inverted",
|
|
2591
2827
|
"reflects": true
|
|
2592
2828
|
},
|
|
2593
2829
|
{
|
|
2594
2830
|
"kind": "field",
|
|
2595
|
-
"name": "
|
|
2596
|
-
"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.",
|
|
2597
|
-
"default": "'button'",
|
|
2598
|
-
"attribute": "role",
|
|
2599
|
-
"reflects": true,
|
|
2831
|
+
"name": "softDisabled",
|
|
2600
2832
|
"type": {
|
|
2601
|
-
"text": "
|
|
2833
|
+
"text": "boolean | undefined"
|
|
2602
2834
|
},
|
|
2603
|
-
"
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2835
|
+
"description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink 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 buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
2836
|
+
"default": "undefined",
|
|
2837
|
+
"attribute": "soft-disabled",
|
|
2838
|
+
"reflects": true
|
|
2607
2839
|
},
|
|
2608
2840
|
{
|
|
2609
2841
|
"kind": "method",
|
|
2610
|
-
"name": "
|
|
2842
|
+
"name": "setSoftDisabled",
|
|
2611
2843
|
"privacy": "private",
|
|
2612
2844
|
"parameters": [
|
|
2613
2845
|
{
|
|
2614
|
-
"name": "
|
|
2846
|
+
"name": "element",
|
|
2847
|
+
"type": {
|
|
2848
|
+
"text": "HTMLElement"
|
|
2849
|
+
},
|
|
2850
|
+
"description": "The buttonlink element."
|
|
2851
|
+
},
|
|
2852
|
+
{
|
|
2853
|
+
"name": "softDisabled",
|
|
2615
2854
|
"optional": true,
|
|
2616
2855
|
"type": {
|
|
2617
2856
|
"text": "boolean"
|
|
2618
2857
|
},
|
|
2619
|
-
"description": "The
|
|
2858
|
+
"description": "The soft-disabled state."
|
|
2620
2859
|
}
|
|
2621
2860
|
],
|
|
2622
|
-
"description": "
|
|
2861
|
+
"description": "Sets the soft-disabled attribute for the buttonlink.\nWhen soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
|
|
2623
2862
|
},
|
|
2624
2863
|
{
|
|
2625
2864
|
"kind": "field",
|
|
@@ -2750,21 +2989,6 @@
|
|
|
2750
2989
|
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2751
2990
|
}
|
|
2752
2991
|
},
|
|
2753
|
-
{
|
|
2754
|
-
"kind": "field",
|
|
2755
|
-
"name": "tabIndex",
|
|
2756
|
-
"type": {
|
|
2757
|
-
"text": "number"
|
|
2758
|
-
},
|
|
2759
|
-
"default": "0",
|
|
2760
|
-
"description": "This property specifies the tab order of the element.",
|
|
2761
|
-
"attribute": "tabIndex",
|
|
2762
|
-
"reflects": true,
|
|
2763
|
-
"inheritedFrom": {
|
|
2764
|
-
"name": "TabIndexMixin",
|
|
2765
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
2766
|
-
}
|
|
2767
|
-
},
|
|
2768
2992
|
{
|
|
2769
2993
|
"kind": "field",
|
|
2770
2994
|
"name": "disabled",
|
|
@@ -2782,125 +3006,100 @@
|
|
|
2782
3006
|
},
|
|
2783
3007
|
{
|
|
2784
3008
|
"kind": "field",
|
|
2785
|
-
"name": "
|
|
3009
|
+
"name": "tabIndex",
|
|
2786
3010
|
"type": {
|
|
2787
|
-
"text": "
|
|
3011
|
+
"text": "number"
|
|
2788
3012
|
},
|
|
2789
|
-
"
|
|
2790
|
-
"
|
|
2791
|
-
"attribute": "
|
|
3013
|
+
"default": "0",
|
|
3014
|
+
"description": "This property specifies the tab order of the element.",
|
|
3015
|
+
"attribute": "tabIndex",
|
|
2792
3016
|
"reflects": true,
|
|
2793
3017
|
"inheritedFrom": {
|
|
2794
|
-
"name": "
|
|
2795
|
-
"module": "
|
|
3018
|
+
"name": "TabIndexMixin",
|
|
3019
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
2796
3020
|
}
|
|
2797
3021
|
},
|
|
2798
3022
|
{
|
|
2799
3023
|
"kind": "field",
|
|
2800
|
-
"name": "
|
|
3024
|
+
"name": "inline",
|
|
2801
3025
|
"type": {
|
|
2802
|
-
"text": "boolean
|
|
3026
|
+
"text": "boolean"
|
|
2803
3027
|
},
|
|
2804
|
-
"description": "
|
|
2805
|
-
"default": "
|
|
2806
|
-
"attribute": "
|
|
3028
|
+
"description": "The link can be inline or standalone.",
|
|
3029
|
+
"default": "false",
|
|
3030
|
+
"attribute": "inline",
|
|
2807
3031
|
"reflects": true,
|
|
2808
3032
|
"inheritedFrom": {
|
|
2809
|
-
"name": "
|
|
2810
|
-
"module": "components/
|
|
3033
|
+
"name": "Linksimple",
|
|
3034
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2811
3035
|
}
|
|
2812
3036
|
},
|
|
2813
3037
|
{
|
|
2814
3038
|
"kind": "field",
|
|
2815
|
-
"name": "
|
|
3039
|
+
"name": "inverted",
|
|
2816
3040
|
"type": {
|
|
2817
|
-
"text": "
|
|
3041
|
+
"text": "boolean"
|
|
2818
3042
|
},
|
|
2819
|
-
"description": "
|
|
2820
|
-
"default": "
|
|
2821
|
-
"attribute": "
|
|
3043
|
+
"description": "The link color can be inverted by setting the inverted attribute to true.",
|
|
3044
|
+
"default": "false",
|
|
3045
|
+
"attribute": "inverted",
|
|
2822
3046
|
"reflects": true,
|
|
2823
3047
|
"inheritedFrom": {
|
|
2824
|
-
"name": "
|
|
2825
|
-
"module": "components/
|
|
3048
|
+
"name": "Linksimple",
|
|
3049
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2826
3050
|
}
|
|
2827
3051
|
},
|
|
2828
3052
|
{
|
|
2829
3053
|
"kind": "field",
|
|
2830
|
-
"name": "
|
|
3054
|
+
"name": "href",
|
|
2831
3055
|
"type": {
|
|
2832
|
-
"text": "
|
|
3056
|
+
"text": "string"
|
|
2833
3057
|
},
|
|
2834
|
-
"
|
|
2835
|
-
"
|
|
2836
|
-
"attribute": "
|
|
3058
|
+
"default": "'#'",
|
|
3059
|
+
"description": "Href for navigation. The URL that the hyperlink points to",
|
|
3060
|
+
"attribute": "href",
|
|
2837
3061
|
"reflects": true,
|
|
2838
3062
|
"inheritedFrom": {
|
|
2839
|
-
"name": "
|
|
2840
|
-
"module": "components/
|
|
2841
|
-
}
|
|
2842
|
-
},
|
|
2843
|
-
{
|
|
2844
|
-
"kind": "method",
|
|
2845
|
-
"name": "executeAction",
|
|
2846
|
-
"privacy": "protected",
|
|
2847
|
-
"inheritedFrom": {
|
|
2848
|
-
"name": "Buttonsimple",
|
|
2849
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3063
|
+
"name": "Linksimple",
|
|
3064
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2850
3065
|
}
|
|
2851
3066
|
},
|
|
2852
3067
|
{
|
|
2853
|
-
"kind": "
|
|
2854
|
-
"name": "
|
|
2855
|
-
"
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
|
|
2862
|
-
"description": "The button element"
|
|
2863
|
-
},
|
|
2864
|
-
{
|
|
2865
|
-
"name": "active",
|
|
2866
|
-
"optional": true,
|
|
2867
|
-
"type": {
|
|
2868
|
-
"text": "boolean"
|
|
2869
|
-
},
|
|
2870
|
-
"description": "The active state of the element"
|
|
2871
|
-
}
|
|
2872
|
-
],
|
|
2873
|
-
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
3068
|
+
"kind": "field",
|
|
3069
|
+
"name": "target",
|
|
3070
|
+
"type": {
|
|
3071
|
+
"text": "string"
|
|
3072
|
+
},
|
|
3073
|
+
"default": "'_self'",
|
|
3074
|
+
"description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
|
|
3075
|
+
"attribute": "target",
|
|
3076
|
+
"reflects": true,
|
|
2874
3077
|
"inheritedFrom": {
|
|
2875
|
-
"name": "
|
|
2876
|
-
"module": "components/
|
|
3078
|
+
"name": "Linksimple",
|
|
3079
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2877
3080
|
}
|
|
2878
3081
|
},
|
|
2879
3082
|
{
|
|
2880
|
-
"kind": "
|
|
2881
|
-
"name": "
|
|
2882
|
-
"
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2887
|
-
|
|
2888
|
-
},
|
|
2889
|
-
"description": "The button element."
|
|
2890
|
-
},
|
|
2891
|
-
{
|
|
2892
|
-
"name": "softDisabled",
|
|
2893
|
-
"optional": true,
|
|
2894
|
-
"type": {
|
|
2895
|
-
"text": "boolean"
|
|
2896
|
-
},
|
|
2897
|
-
"description": "The soft-disabled state."
|
|
2898
|
-
}
|
|
2899
|
-
],
|
|
2900
|
-
"description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
|
|
3083
|
+
"kind": "field",
|
|
3084
|
+
"name": "rel",
|
|
3085
|
+
"type": {
|
|
3086
|
+
"text": "string | undefined"
|
|
3087
|
+
},
|
|
3088
|
+
"description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
|
|
3089
|
+
"attribute": "rel",
|
|
3090
|
+
"reflects": true,
|
|
2901
3091
|
"inheritedFrom": {
|
|
2902
|
-
"name": "
|
|
2903
|
-
"module": "components/
|
|
3092
|
+
"name": "Linksimple",
|
|
3093
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
3094
|
+
}
|
|
3095
|
+
},
|
|
3096
|
+
{
|
|
3097
|
+
"kind": "field",
|
|
3098
|
+
"name": "handleNavigation",
|
|
3099
|
+
"privacy": "private",
|
|
3100
|
+
"inheritedFrom": {
|
|
3101
|
+
"name": "Linksimple",
|
|
3102
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2904
3103
|
}
|
|
2905
3104
|
},
|
|
2906
3105
|
{
|
|
@@ -2908,82 +3107,56 @@
|
|
|
2908
3107
|
"name": "setDisabled",
|
|
2909
3108
|
"privacy": "private",
|
|
2910
3109
|
"parameters": [
|
|
2911
|
-
{
|
|
2912
|
-
"name": "element",
|
|
2913
|
-
"type": {
|
|
2914
|
-
"text": "HTMLElement"
|
|
2915
|
-
},
|
|
2916
|
-
"description": "The button element."
|
|
2917
|
-
},
|
|
2918
3110
|
{
|
|
2919
3111
|
"name": "disabled",
|
|
2920
3112
|
"type": {
|
|
2921
3113
|
"text": "boolean"
|
|
2922
3114
|
},
|
|
2923
|
-
"description": "
|
|
3115
|
+
"description": "Whether the element should be disabled"
|
|
2924
3116
|
}
|
|
2925
3117
|
],
|
|
2926
|
-
"description": "Sets
|
|
3118
|
+
"description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored.",
|
|
2927
3119
|
"inheritedFrom": {
|
|
2928
|
-
"name": "
|
|
2929
|
-
"module": "components/
|
|
3120
|
+
"name": "Linksimple",
|
|
3121
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2930
3122
|
}
|
|
2931
|
-
}
|
|
3123
|
+
}
|
|
3124
|
+
],
|
|
3125
|
+
"events": [
|
|
2932
3126
|
{
|
|
2933
|
-
"
|
|
2934
|
-
"name": "
|
|
2935
|
-
"
|
|
3127
|
+
"description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
|
|
3128
|
+
"name": "click",
|
|
3129
|
+
"reactName": "onClick",
|
|
2936
3130
|
"inheritedFrom": {
|
|
2937
|
-
"name": "
|
|
2938
|
-
"module": "components/
|
|
3131
|
+
"name": "Linksimple",
|
|
3132
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2939
3133
|
}
|
|
2940
3134
|
},
|
|
2941
3135
|
{
|
|
2942
|
-
"
|
|
2943
|
-
"name": "
|
|
2944
|
-
"
|
|
2945
|
-
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
3136
|
+
"description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
|
|
3137
|
+
"name": "keydown",
|
|
3138
|
+
"reactName": "onKeyDown",
|
|
2946
3139
|
"inheritedFrom": {
|
|
2947
|
-
"name": "
|
|
2948
|
-
"module": "components/
|
|
3140
|
+
"name": "Linksimple",
|
|
3141
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2949
3142
|
}
|
|
2950
3143
|
},
|
|
2951
3144
|
{
|
|
2952
|
-
"
|
|
2953
|
-
"name": "
|
|
2954
|
-
"
|
|
2955
|
-
"parameters": [
|
|
2956
|
-
{
|
|
2957
|
-
"name": "event",
|
|
2958
|
-
"type": {
|
|
2959
|
-
"text": "KeyboardEvent"
|
|
2960
|
-
},
|
|
2961
|
-
"description": "The keyboard event."
|
|
2962
|
-
}
|
|
2963
|
-
],
|
|
2964
|
-
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
|
3145
|
+
"description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
|
|
3146
|
+
"name": "focus",
|
|
3147
|
+
"reactName": "onFocus",
|
|
2965
3148
|
"inheritedFrom": {
|
|
2966
|
-
"name": "
|
|
2967
|
-
"module": "components/
|
|
3149
|
+
"name": "Linksimple",
|
|
3150
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2968
3151
|
}
|
|
2969
3152
|
},
|
|
2970
3153
|
{
|
|
2971
|
-
"
|
|
2972
|
-
"name": "
|
|
2973
|
-
"
|
|
2974
|
-
"parameters": [
|
|
2975
|
-
{
|
|
2976
|
-
"name": "event",
|
|
2977
|
-
"type": {
|
|
2978
|
-
"text": "KeyboardEvent"
|
|
2979
|
-
},
|
|
2980
|
-
"description": "The keyboard event."
|
|
2981
|
-
}
|
|
2982
|
-
],
|
|
2983
|
-
"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.",
|
|
3154
|
+
"description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
|
|
3155
|
+
"name": "blur",
|
|
3156
|
+
"reactName": "onBlur",
|
|
2984
3157
|
"inheritedFrom": {
|
|
2985
|
-
"name": "
|
|
2986
|
-
"module": "components/
|
|
3158
|
+
"name": "Linksimple",
|
|
3159
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2987
3160
|
}
|
|
2988
3161
|
}
|
|
2989
3162
|
],
|
|
@@ -2991,37 +3164,20 @@
|
|
|
2991
3164
|
{
|
|
2992
3165
|
"name": "size",
|
|
2993
3166
|
"type": {
|
|
2994
|
-
"text": "
|
|
3167
|
+
"text": "PillButtonSize | IconButtonSize"
|
|
2995
3168
|
},
|
|
2996
|
-
"description": "
|
|
3169
|
+
"description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
|
|
2997
3170
|
"default": "32",
|
|
2998
|
-
"fieldName": "size"
|
|
2999
|
-
"inheritedFrom": {
|
|
3000
|
-
"name": "Buttonsimple",
|
|
3001
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3002
|
-
}
|
|
3003
|
-
},
|
|
3004
|
-
{
|
|
3005
|
-
"name": "inverted",
|
|
3006
|
-
"type": {
|
|
3007
|
-
"text": "boolean"
|
|
3008
|
-
},
|
|
3009
|
-
"description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
|
|
3010
|
-
"default": "false",
|
|
3011
|
-
"fieldName": "inverted"
|
|
3171
|
+
"fieldName": "size"
|
|
3012
3172
|
},
|
|
3013
3173
|
{
|
|
3014
|
-
"name": "
|
|
3015
|
-
"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.",
|
|
3016
|
-
"default": "'button'",
|
|
3017
|
-
"fieldName": "role",
|
|
3174
|
+
"name": "soft-disabled",
|
|
3018
3175
|
"type": {
|
|
3019
|
-
"text": "
|
|
3176
|
+
"text": "boolean | undefined"
|
|
3020
3177
|
},
|
|
3021
|
-
"
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
}
|
|
3178
|
+
"description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink 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 buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
3179
|
+
"default": "undefined",
|
|
3180
|
+
"fieldName": "softDisabled"
|
|
3025
3181
|
},
|
|
3026
3182
|
{
|
|
3027
3183
|
"name": "prefix-icon",
|
|
@@ -3073,6 +3229,19 @@
|
|
|
3073
3229
|
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
3074
3230
|
}
|
|
3075
3231
|
},
|
|
3232
|
+
{
|
|
3233
|
+
"name": "disabled",
|
|
3234
|
+
"type": {
|
|
3235
|
+
"text": "boolean | undefined"
|
|
3236
|
+
},
|
|
3237
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
3238
|
+
"default": "undefined",
|
|
3239
|
+
"fieldName": "disabled",
|
|
3240
|
+
"inheritedFrom": {
|
|
3241
|
+
"name": "DisabledMixin",
|
|
3242
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
3243
|
+
}
|
|
3244
|
+
},
|
|
3076
3245
|
{
|
|
3077
3246
|
"name": "tabIndex",
|
|
3078
3247
|
"type": {
|
|
@@ -3087,68 +3256,67 @@
|
|
|
3087
3256
|
}
|
|
3088
3257
|
},
|
|
3089
3258
|
{
|
|
3090
|
-
"name": "
|
|
3259
|
+
"name": "inline",
|
|
3091
3260
|
"type": {
|
|
3092
|
-
"text": "boolean
|
|
3261
|
+
"text": "boolean"
|
|
3093
3262
|
},
|
|
3094
|
-
"description": "
|
|
3095
|
-
"default": "
|
|
3096
|
-
"fieldName": "
|
|
3263
|
+
"description": "The link can be inline or standalone.",
|
|
3264
|
+
"default": "false",
|
|
3265
|
+
"fieldName": "inline",
|
|
3097
3266
|
"inheritedFrom": {
|
|
3098
|
-
"name": "
|
|
3099
|
-
"module": "src/
|
|
3267
|
+
"name": "Linksimple",
|
|
3268
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3100
3269
|
}
|
|
3101
3270
|
},
|
|
3102
3271
|
{
|
|
3103
|
-
"name": "
|
|
3272
|
+
"name": "inverted",
|
|
3104
3273
|
"type": {
|
|
3105
|
-
"text": "boolean
|
|
3274
|
+
"text": "boolean"
|
|
3106
3275
|
},
|
|
3107
|
-
"description": "The
|
|
3108
|
-
"default": "
|
|
3109
|
-
"fieldName": "
|
|
3276
|
+
"description": "The link color can be inverted by setting the inverted attribute to true.",
|
|
3277
|
+
"default": "false",
|
|
3278
|
+
"fieldName": "inverted",
|
|
3110
3279
|
"inheritedFrom": {
|
|
3111
|
-
"name": "
|
|
3112
|
-
"module": "src/components/
|
|
3280
|
+
"name": "Linksimple",
|
|
3281
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3113
3282
|
}
|
|
3114
3283
|
},
|
|
3115
3284
|
{
|
|
3116
|
-
"name": "
|
|
3285
|
+
"name": "href",
|
|
3117
3286
|
"type": {
|
|
3118
|
-
"text": "
|
|
3287
|
+
"text": "string"
|
|
3119
3288
|
},
|
|
3120
|
-
"
|
|
3121
|
-
"
|
|
3122
|
-
"fieldName": "
|
|
3289
|
+
"default": "'#'",
|
|
3290
|
+
"description": "Href for navigation. The URL that the hyperlink points to",
|
|
3291
|
+
"fieldName": "href",
|
|
3123
3292
|
"inheritedFrom": {
|
|
3124
|
-
"name": "
|
|
3125
|
-
"module": "src/components/
|
|
3293
|
+
"name": "Linksimple",
|
|
3294
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3126
3295
|
}
|
|
3127
3296
|
},
|
|
3128
3297
|
{
|
|
3129
|
-
"name": "
|
|
3298
|
+
"name": "target",
|
|
3130
3299
|
"type": {
|
|
3131
|
-
"text": "string
|
|
3300
|
+
"text": "string"
|
|
3132
3301
|
},
|
|
3133
|
-
"
|
|
3134
|
-
"
|
|
3135
|
-
"fieldName": "
|
|
3302
|
+
"default": "'_self'",
|
|
3303
|
+
"description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
|
|
3304
|
+
"fieldName": "target",
|
|
3136
3305
|
"inheritedFrom": {
|
|
3137
|
-
"name": "
|
|
3138
|
-
"module": "src/components/
|
|
3306
|
+
"name": "Linksimple",
|
|
3307
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3139
3308
|
}
|
|
3140
3309
|
},
|
|
3141
3310
|
{
|
|
3142
|
-
"name": "
|
|
3311
|
+
"name": "rel",
|
|
3143
3312
|
"type": {
|
|
3144
|
-
"text": "
|
|
3313
|
+
"text": "string | undefined"
|
|
3145
3314
|
},
|
|
3146
|
-
"description": "
|
|
3147
|
-
"
|
|
3148
|
-
"fieldName": "type",
|
|
3315
|
+
"description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
|
|
3316
|
+
"fieldName": "rel",
|
|
3149
3317
|
"inheritedFrom": {
|
|
3150
|
-
"name": "
|
|
3151
|
-
"module": "src/components/
|
|
3318
|
+
"name": "Linksimple",
|
|
3319
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3152
3320
|
}
|
|
3153
3321
|
}
|
|
3154
3322
|
],
|
|
@@ -3159,47 +3327,83 @@
|
|
|
3159
3327
|
}
|
|
3160
3328
|
],
|
|
3161
3329
|
"superclass": {
|
|
3162
|
-
"name": "
|
|
3163
|
-
"module": "/src/components/
|
|
3330
|
+
"name": "Linksimple",
|
|
3331
|
+
"module": "/src/components/linksimple/linksimple.component"
|
|
3164
3332
|
},
|
|
3165
|
-
"tagName": "mdc-
|
|
3166
|
-
"jsDoc": "/**\n * `mdc-
|
|
3333
|
+
"tagName": "mdc-buttonlink",
|
|
3334
|
+
"jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix and postfix icons via slots.\n *\n * ### Features:\n * - Behaves like an link while visually resembling a button.\n * - Supports slots for `prefix-icon` and `postfix-icon`.\n * - Customizable size, color, and variant through attributes.\n * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n */",
|
|
3167
3335
|
"customElement": true,
|
|
3168
|
-
"
|
|
3336
|
+
"cssProperties": [
|
|
3337
|
+
{
|
|
3338
|
+
"description": "Border radius of the link.",
|
|
3339
|
+
"name": "--mdc-link-border-radius",
|
|
3340
|
+
"inheritedFrom": {
|
|
3341
|
+
"name": "Linksimple",
|
|
3342
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3343
|
+
}
|
|
3344
|
+
},
|
|
3345
|
+
{
|
|
3346
|
+
"description": "Color of the link’s child content in the active state.",
|
|
3347
|
+
"name": "--mdc-link-color-active",
|
|
3348
|
+
"inheritedFrom": {
|
|
3349
|
+
"name": "Linksimple",
|
|
3350
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3351
|
+
}
|
|
3352
|
+
},
|
|
3353
|
+
{
|
|
3354
|
+
"description": "Color of the link’s child content in the disabled state.",
|
|
3355
|
+
"name": "--mdc-link-color-disabled",
|
|
3356
|
+
"inheritedFrom": {
|
|
3357
|
+
"name": "Linksimple",
|
|
3358
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3359
|
+
}
|
|
3360
|
+
},
|
|
3361
|
+
{
|
|
3362
|
+
"description": "Color of the link’s child content in the hover state.",
|
|
3363
|
+
"name": "--mdc-link-color-hover",
|
|
3364
|
+
"inheritedFrom": {
|
|
3365
|
+
"name": "Linksimple",
|
|
3366
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3367
|
+
}
|
|
3368
|
+
},
|
|
3169
3369
|
{
|
|
3170
|
-
"description": "
|
|
3171
|
-
"name": "
|
|
3172
|
-
"reactName": "onClick",
|
|
3370
|
+
"description": "Color of the link’s child content in the normal state.",
|
|
3371
|
+
"name": "--mdc-link-color-normal",
|
|
3173
3372
|
"inheritedFrom": {
|
|
3174
|
-
"name": "
|
|
3175
|
-
"module": "src/components/
|
|
3373
|
+
"name": "Linksimple",
|
|
3374
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3176
3375
|
}
|
|
3177
3376
|
},
|
|
3178
3377
|
{
|
|
3179
|
-
"description": "
|
|
3180
|
-
"name": "
|
|
3181
|
-
"reactName": "onKeyDown",
|
|
3378
|
+
"description": "Color of the inverted link’s child content in the active state.",
|
|
3379
|
+
"name": "--mdc-link-inverted-color-active",
|
|
3182
3380
|
"inheritedFrom": {
|
|
3183
|
-
"name": "
|
|
3184
|
-
"module": "src/components/
|
|
3381
|
+
"name": "Linksimple",
|
|
3382
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3185
3383
|
}
|
|
3186
3384
|
},
|
|
3187
3385
|
{
|
|
3188
|
-
"description": "
|
|
3189
|
-
"name": "
|
|
3190
|
-
"reactName": "onKeyUp",
|
|
3386
|
+
"description": "Color of the inverted link’s child content in the disabled state.",
|
|
3387
|
+
"name": "--mdc-link-inverted-color-disabled",
|
|
3191
3388
|
"inheritedFrom": {
|
|
3192
|
-
"name": "
|
|
3193
|
-
"module": "src/components/
|
|
3389
|
+
"name": "Linksimple",
|
|
3390
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3194
3391
|
}
|
|
3195
3392
|
},
|
|
3196
3393
|
{
|
|
3197
|
-
"description": "
|
|
3198
|
-
"name": "
|
|
3199
|
-
"reactName": "onFocus",
|
|
3394
|
+
"description": "Color of the inverted link’s child content in the hover state.",
|
|
3395
|
+
"name": "--mdc-link-inverted-color-hover",
|
|
3200
3396
|
"inheritedFrom": {
|
|
3201
|
-
"name": "
|
|
3202
|
-
"module": "src/components/
|
|
3397
|
+
"name": "Linksimple",
|
|
3398
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3399
|
+
}
|
|
3400
|
+
},
|
|
3401
|
+
{
|
|
3402
|
+
"description": "Color of the inverted link’s child content in the normal state.",
|
|
3403
|
+
"name": "--mdc-link-inverted-color-normal",
|
|
3404
|
+
"inheritedFrom": {
|
|
3405
|
+
"name": "Linksimple",
|
|
3406
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3203
3407
|
}
|
|
3204
3408
|
}
|
|
3205
3409
|
]
|
|
@@ -3210,8 +3414,8 @@
|
|
|
3210
3414
|
"kind": "js",
|
|
3211
3415
|
"name": "default",
|
|
3212
3416
|
"declaration": {
|
|
3213
|
-
"name": "
|
|
3214
|
-
"module": "components/
|
|
3417
|
+
"name": "ButtonLink",
|
|
3418
|
+
"module": "components/buttonlink/buttonlink.component.js"
|
|
3215
3419
|
}
|
|
3216
3420
|
}
|
|
3217
3421
|
]
|
|
@@ -12345,256 +12549,57 @@
|
|
|
12345
12549
|
}
|
|
12346
12550
|
},
|
|
12347
12551
|
{
|
|
12348
|
-
"name": "help-text-type",
|
|
12349
|
-
"type": {
|
|
12350
|
-
"text": "ValidationType"
|
|
12351
|
-
},
|
|
12352
|
-
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
12353
|
-
"fieldName": "helpTextType",
|
|
12354
|
-
"inheritedFrom": {
|
|
12355
|
-
"name": "FormfieldWrapper",
|
|
12356
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12357
|
-
}
|
|
12358
|
-
},
|
|
12359
|
-
{
|
|
12360
|
-
"name": "help-text",
|
|
12361
|
-
"type": {
|
|
12362
|
-
"text": "string | undefined"
|
|
12363
|
-
},
|
|
12364
|
-
"description": "The help text that is displayed below the input field.",
|
|
12365
|
-
"fieldName": "helpText",
|
|
12366
|
-
"inheritedFrom": {
|
|
12367
|
-
"name": "FormfieldWrapper",
|
|
12368
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12369
|
-
}
|
|
12370
|
-
}
|
|
12371
|
-
],
|
|
12372
|
-
"mixins": [
|
|
12373
|
-
{
|
|
12374
|
-
"name": "FormInternalsMixin",
|
|
12375
|
-
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
12376
|
-
},
|
|
12377
|
-
{
|
|
12378
|
-
"name": "DataAriaLabelMixin",
|
|
12379
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
12380
|
-
}
|
|
12381
|
-
],
|
|
12382
|
-
"superclass": {
|
|
12383
|
-
"name": "FormfieldWrapper",
|
|
12384
|
-
"module": "/src/components/formfieldwrapper"
|
|
12385
|
-
},
|
|
12386
|
-
"tagName": "mdc-input",
|
|
12387
|
-
"jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n * It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled\n * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled\n * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered\n * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused\n * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused\n * @cssproperty --mdc-input-error-border-color - Border color for the input container when error\n * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning\n * @cssproperty --mdc-input-success-border-color - Border color for the input container when success\n * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary\n *\n */",
|
|
12388
|
-
"customElement": true,
|
|
12389
|
-
"slots": [
|
|
12390
|
-
{
|
|
12391
|
-
"description": "slot to add the label info icon",
|
|
12392
|
-
"name": "label-info",
|
|
12393
|
-
"inheritedFrom": {
|
|
12394
|
-
"name": "FormfieldWrapper",
|
|
12395
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12396
|
-
}
|
|
12397
|
-
}
|
|
12398
|
-
]
|
|
12399
|
-
}
|
|
12400
|
-
],
|
|
12401
|
-
"exports": [
|
|
12402
|
-
{
|
|
12403
|
-
"kind": "js",
|
|
12404
|
-
"name": "default",
|
|
12405
|
-
"declaration": {
|
|
12406
|
-
"name": "Input",
|
|
12407
|
-
"module": "components/input/input.component.js"
|
|
12408
|
-
}
|
|
12409
|
-
}
|
|
12410
|
-
]
|
|
12411
|
-
},
|
|
12412
|
-
{
|
|
12413
|
-
"kind": "javascript-module",
|
|
12414
|
-
"path": "components/inputchip/inputchip.component.js",
|
|
12415
|
-
"declarations": [
|
|
12416
|
-
{
|
|
12417
|
-
"kind": "class",
|
|
12418
|
-
"description": "mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n\n- It supports a leading icon along with label.\n- It supports an error state for validation.\n- It supports a close button to remove the chip.",
|
|
12419
|
-
"name": "InputChip",
|
|
12420
|
-
"cssProperties": [
|
|
12421
|
-
{
|
|
12422
|
-
"description": "The color of the chip.",
|
|
12423
|
-
"name": "--mdc-chip-color"
|
|
12424
|
-
},
|
|
12425
|
-
{
|
|
12426
|
-
"description": "The border color of the chip.",
|
|
12427
|
-
"name": "--mdc-chip-border-color"
|
|
12428
|
-
},
|
|
12429
|
-
{
|
|
12430
|
-
"description": "The background color of the chip.",
|
|
12431
|
-
"name": "--mdc-chip-background-color"
|
|
12432
|
-
}
|
|
12433
|
-
],
|
|
12434
|
-
"members": [
|
|
12435
|
-
{
|
|
12436
|
-
"kind": "field",
|
|
12437
|
-
"name": "label",
|
|
12438
|
-
"type": {
|
|
12439
|
-
"text": "string"
|
|
12440
|
-
},
|
|
12441
|
-
"default": "''",
|
|
12442
|
-
"description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
12443
|
-
"attribute": "label"
|
|
12444
|
-
},
|
|
12445
|
-
{
|
|
12446
|
-
"kind": "field",
|
|
12447
|
-
"name": "error",
|
|
12448
|
-
"type": {
|
|
12449
|
-
"text": "boolean"
|
|
12450
|
-
},
|
|
12451
|
-
"default": "false",
|
|
12452
|
-
"description": "The error state of the inputchip.",
|
|
12453
|
-
"attribute": "error"
|
|
12454
|
-
},
|
|
12455
|
-
{
|
|
12456
|
-
"kind": "field",
|
|
12457
|
-
"name": "clearAriaLabel",
|
|
12458
|
-
"type": {
|
|
12459
|
-
"text": "string"
|
|
12460
|
-
},
|
|
12461
|
-
"default": "''",
|
|
12462
|
-
"description": "The aria-label of the close button.",
|
|
12463
|
-
"attribute": "clear-aria-label"
|
|
12464
|
-
},
|
|
12465
|
-
{
|
|
12466
|
-
"kind": "method",
|
|
12467
|
-
"name": "renderIcon",
|
|
12468
|
-
"privacy": "private",
|
|
12469
|
-
"description": "Renders the icon element if available.",
|
|
12470
|
-
"return": {
|
|
12471
|
-
"type": {
|
|
12472
|
-
"text": ""
|
|
12473
|
-
}
|
|
12474
|
-
}
|
|
12475
|
-
},
|
|
12476
|
-
{
|
|
12477
|
-
"kind": "method",
|
|
12478
|
-
"name": "handleClose",
|
|
12479
|
-
"privacy": "private",
|
|
12480
|
-
"description": "Handles the behavior of the close button on click event.",
|
|
12481
|
-
"parameters": [
|
|
12482
|
-
{
|
|
12483
|
-
"description": "The event object.",
|
|
12484
|
-
"name": "event"
|
|
12485
|
-
}
|
|
12486
|
-
]
|
|
12487
|
-
},
|
|
12488
|
-
{
|
|
12489
|
-
"kind": "field",
|
|
12490
|
-
"name": "iconName",
|
|
12491
|
-
"type": {
|
|
12492
|
-
"text": "IconNames | undefined"
|
|
12493
|
-
},
|
|
12494
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
12495
|
-
"attribute": "icon-name",
|
|
12496
|
-
"inheritedFrom": {
|
|
12497
|
-
"name": "IconNameMixin",
|
|
12498
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
12499
|
-
}
|
|
12500
|
-
},
|
|
12501
|
-
{
|
|
12502
|
-
"kind": "field",
|
|
12503
|
-
"name": "disabled",
|
|
12504
|
-
"type": {
|
|
12505
|
-
"text": "boolean | undefined"
|
|
12506
|
-
},
|
|
12507
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
12508
|
-
"default": "undefined",
|
|
12509
|
-
"attribute": "disabled",
|
|
12510
|
-
"reflects": true,
|
|
12511
|
-
"inheritedFrom": {
|
|
12512
|
-
"name": "DisabledMixin",
|
|
12513
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
12514
|
-
}
|
|
12515
|
-
}
|
|
12516
|
-
],
|
|
12517
|
-
"events": [
|
|
12518
|
-
{
|
|
12519
|
-
"name": "remove",
|
|
12520
|
-
"type": {
|
|
12521
|
-
"text": "CustomEvent"
|
|
12522
|
-
},
|
|
12523
|
-
"description": "This event is dispatched when the close button is activated. It bubbles and is composed.",
|
|
12524
|
-
"reactName": "onRemove"
|
|
12525
|
-
}
|
|
12526
|
-
],
|
|
12527
|
-
"attributes": [
|
|
12528
|
-
{
|
|
12529
|
-
"name": "label",
|
|
12530
|
-
"type": {
|
|
12531
|
-
"text": "string"
|
|
12532
|
-
},
|
|
12533
|
-
"default": "''",
|
|
12534
|
-
"description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
12535
|
-
"fieldName": "label"
|
|
12536
|
-
},
|
|
12537
|
-
{
|
|
12538
|
-
"name": "error",
|
|
12539
|
-
"type": {
|
|
12540
|
-
"text": "boolean"
|
|
12541
|
-
},
|
|
12542
|
-
"default": "false",
|
|
12543
|
-
"description": "The error state of the inputchip.",
|
|
12544
|
-
"fieldName": "error"
|
|
12545
|
-
},
|
|
12546
|
-
{
|
|
12547
|
-
"name": "clear-aria-label",
|
|
12548
|
-
"type": {
|
|
12549
|
-
"text": "string"
|
|
12550
|
-
},
|
|
12551
|
-
"default": "''",
|
|
12552
|
-
"description": "The aria-label of the close button.",
|
|
12553
|
-
"fieldName": "clearAriaLabel"
|
|
12554
|
-
},
|
|
12555
|
-
{
|
|
12556
|
-
"name": "icon-name",
|
|
12552
|
+
"name": "help-text-type",
|
|
12557
12553
|
"type": {
|
|
12558
|
-
"text": "
|
|
12554
|
+
"text": "ValidationType"
|
|
12559
12555
|
},
|
|
12560
|
-
"description": "
|
|
12561
|
-
"fieldName": "
|
|
12556
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
12557
|
+
"fieldName": "helpTextType",
|
|
12562
12558
|
"inheritedFrom": {
|
|
12563
|
-
"name": "
|
|
12564
|
-
"module": "src/
|
|
12559
|
+
"name": "FormfieldWrapper",
|
|
12560
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12565
12561
|
}
|
|
12566
12562
|
},
|
|
12567
12563
|
{
|
|
12568
|
-
"name": "
|
|
12564
|
+
"name": "help-text",
|
|
12569
12565
|
"type": {
|
|
12570
|
-
"text": "
|
|
12566
|
+
"text": "string | undefined"
|
|
12571
12567
|
},
|
|
12572
|
-
"description": "
|
|
12573
|
-
"
|
|
12574
|
-
"fieldName": "disabled",
|
|
12568
|
+
"description": "The help text that is displayed below the input field.",
|
|
12569
|
+
"fieldName": "helpText",
|
|
12575
12570
|
"inheritedFrom": {
|
|
12576
|
-
"name": "
|
|
12577
|
-
"module": "src/
|
|
12571
|
+
"name": "FormfieldWrapper",
|
|
12572
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12578
12573
|
}
|
|
12579
12574
|
}
|
|
12580
12575
|
],
|
|
12581
12576
|
"mixins": [
|
|
12582
12577
|
{
|
|
12583
|
-
"name": "
|
|
12584
|
-
"module": "/src/utils/mixins/
|
|
12578
|
+
"name": "FormInternalsMixin",
|
|
12579
|
+
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
12585
12580
|
},
|
|
12586
12581
|
{
|
|
12587
|
-
"name": "
|
|
12588
|
-
"module": "/src/utils/mixins/
|
|
12582
|
+
"name": "DataAriaLabelMixin",
|
|
12583
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
12589
12584
|
}
|
|
12590
12585
|
],
|
|
12591
12586
|
"superclass": {
|
|
12592
|
-
"name": "
|
|
12593
|
-
"module": "/src/
|
|
12587
|
+
"name": "FormfieldWrapper",
|
|
12588
|
+
"module": "/src/components/formfieldwrapper"
|
|
12594
12589
|
},
|
|
12595
|
-
"tagName": "mdc-
|
|
12596
|
-
"jsDoc": "/**\n * mdc-
|
|
12597
|
-
"customElement": true
|
|
12590
|
+
"tagName": "mdc-input",
|
|
12591
|
+
"jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n * It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled\n * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled\n * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered\n * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused\n * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused\n * @cssproperty --mdc-input-error-border-color - Border color for the input container when error\n * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning\n * @cssproperty --mdc-input-success-border-color - Border color for the input container when success\n * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary\n *\n */",
|
|
12592
|
+
"customElement": true,
|
|
12593
|
+
"slots": [
|
|
12594
|
+
{
|
|
12595
|
+
"description": "slot to add the label info icon",
|
|
12596
|
+
"name": "label-info",
|
|
12597
|
+
"inheritedFrom": {
|
|
12598
|
+
"name": "FormfieldWrapper",
|
|
12599
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
12600
|
+
}
|
|
12601
|
+
}
|
|
12602
|
+
]
|
|
12598
12603
|
}
|
|
12599
12604
|
],
|
|
12600
12605
|
"exports": [
|
|
@@ -12602,8 +12607,8 @@
|
|
|
12602
12607
|
"kind": "js",
|
|
12603
12608
|
"name": "default",
|
|
12604
12609
|
"declaration": {
|
|
12605
|
-
"name": "
|
|
12606
|
-
"module": "components/
|
|
12610
|
+
"name": "Input",
|
|
12611
|
+
"module": "components/input/input.component.js"
|
|
12607
12612
|
}
|
|
12608
12613
|
}
|
|
12609
12614
|
]
|
|
@@ -13036,6 +13041,205 @@
|
|
|
13036
13041
|
}
|
|
13037
13042
|
]
|
|
13038
13043
|
},
|
|
13044
|
+
{
|
|
13045
|
+
"kind": "javascript-module",
|
|
13046
|
+
"path": "components/inputchip/inputchip.component.js",
|
|
13047
|
+
"declarations": [
|
|
13048
|
+
{
|
|
13049
|
+
"kind": "class",
|
|
13050
|
+
"description": "mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n\n- It supports a leading icon along with label.\n- It supports an error state for validation.\n- It supports a close button to remove the chip.",
|
|
13051
|
+
"name": "InputChip",
|
|
13052
|
+
"cssProperties": [
|
|
13053
|
+
{
|
|
13054
|
+
"description": "The color of the chip.",
|
|
13055
|
+
"name": "--mdc-chip-color"
|
|
13056
|
+
},
|
|
13057
|
+
{
|
|
13058
|
+
"description": "The border color of the chip.",
|
|
13059
|
+
"name": "--mdc-chip-border-color"
|
|
13060
|
+
},
|
|
13061
|
+
{
|
|
13062
|
+
"description": "The background color of the chip.",
|
|
13063
|
+
"name": "--mdc-chip-background-color"
|
|
13064
|
+
}
|
|
13065
|
+
],
|
|
13066
|
+
"members": [
|
|
13067
|
+
{
|
|
13068
|
+
"kind": "field",
|
|
13069
|
+
"name": "label",
|
|
13070
|
+
"type": {
|
|
13071
|
+
"text": "string"
|
|
13072
|
+
},
|
|
13073
|
+
"default": "''",
|
|
13074
|
+
"description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
13075
|
+
"attribute": "label"
|
|
13076
|
+
},
|
|
13077
|
+
{
|
|
13078
|
+
"kind": "field",
|
|
13079
|
+
"name": "error",
|
|
13080
|
+
"type": {
|
|
13081
|
+
"text": "boolean"
|
|
13082
|
+
},
|
|
13083
|
+
"default": "false",
|
|
13084
|
+
"description": "The error state of the inputchip.",
|
|
13085
|
+
"attribute": "error"
|
|
13086
|
+
},
|
|
13087
|
+
{
|
|
13088
|
+
"kind": "field",
|
|
13089
|
+
"name": "clearAriaLabel",
|
|
13090
|
+
"type": {
|
|
13091
|
+
"text": "string"
|
|
13092
|
+
},
|
|
13093
|
+
"default": "''",
|
|
13094
|
+
"description": "The aria-label of the close button.",
|
|
13095
|
+
"attribute": "clear-aria-label"
|
|
13096
|
+
},
|
|
13097
|
+
{
|
|
13098
|
+
"kind": "method",
|
|
13099
|
+
"name": "renderIcon",
|
|
13100
|
+
"privacy": "private",
|
|
13101
|
+
"description": "Renders the icon element if available.",
|
|
13102
|
+
"return": {
|
|
13103
|
+
"type": {
|
|
13104
|
+
"text": ""
|
|
13105
|
+
}
|
|
13106
|
+
}
|
|
13107
|
+
},
|
|
13108
|
+
{
|
|
13109
|
+
"kind": "method",
|
|
13110
|
+
"name": "handleClose",
|
|
13111
|
+
"privacy": "private",
|
|
13112
|
+
"description": "Handles the behavior of the close button on click event.",
|
|
13113
|
+
"parameters": [
|
|
13114
|
+
{
|
|
13115
|
+
"description": "The event object.",
|
|
13116
|
+
"name": "event"
|
|
13117
|
+
}
|
|
13118
|
+
]
|
|
13119
|
+
},
|
|
13120
|
+
{
|
|
13121
|
+
"kind": "field",
|
|
13122
|
+
"name": "iconName",
|
|
13123
|
+
"type": {
|
|
13124
|
+
"text": "IconNames | undefined"
|
|
13125
|
+
},
|
|
13126
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
13127
|
+
"attribute": "icon-name",
|
|
13128
|
+
"inheritedFrom": {
|
|
13129
|
+
"name": "IconNameMixin",
|
|
13130
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
13131
|
+
}
|
|
13132
|
+
},
|
|
13133
|
+
{
|
|
13134
|
+
"kind": "field",
|
|
13135
|
+
"name": "disabled",
|
|
13136
|
+
"type": {
|
|
13137
|
+
"text": "boolean | undefined"
|
|
13138
|
+
},
|
|
13139
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
13140
|
+
"default": "undefined",
|
|
13141
|
+
"attribute": "disabled",
|
|
13142
|
+
"reflects": true,
|
|
13143
|
+
"inheritedFrom": {
|
|
13144
|
+
"name": "DisabledMixin",
|
|
13145
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
13146
|
+
}
|
|
13147
|
+
}
|
|
13148
|
+
],
|
|
13149
|
+
"events": [
|
|
13150
|
+
{
|
|
13151
|
+
"name": "remove",
|
|
13152
|
+
"type": {
|
|
13153
|
+
"text": "CustomEvent"
|
|
13154
|
+
},
|
|
13155
|
+
"description": "This event is dispatched when the close button is activated. It bubbles and is composed.",
|
|
13156
|
+
"reactName": "onRemove"
|
|
13157
|
+
}
|
|
13158
|
+
],
|
|
13159
|
+
"attributes": [
|
|
13160
|
+
{
|
|
13161
|
+
"name": "label",
|
|
13162
|
+
"type": {
|
|
13163
|
+
"text": "string"
|
|
13164
|
+
},
|
|
13165
|
+
"default": "''",
|
|
13166
|
+
"description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
13167
|
+
"fieldName": "label"
|
|
13168
|
+
},
|
|
13169
|
+
{
|
|
13170
|
+
"name": "error",
|
|
13171
|
+
"type": {
|
|
13172
|
+
"text": "boolean"
|
|
13173
|
+
},
|
|
13174
|
+
"default": "false",
|
|
13175
|
+
"description": "The error state of the inputchip.",
|
|
13176
|
+
"fieldName": "error"
|
|
13177
|
+
},
|
|
13178
|
+
{
|
|
13179
|
+
"name": "clear-aria-label",
|
|
13180
|
+
"type": {
|
|
13181
|
+
"text": "string"
|
|
13182
|
+
},
|
|
13183
|
+
"default": "''",
|
|
13184
|
+
"description": "The aria-label of the close button.",
|
|
13185
|
+
"fieldName": "clearAriaLabel"
|
|
13186
|
+
},
|
|
13187
|
+
{
|
|
13188
|
+
"name": "icon-name",
|
|
13189
|
+
"type": {
|
|
13190
|
+
"text": "IconNames | undefined"
|
|
13191
|
+
},
|
|
13192
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
13193
|
+
"fieldName": "iconName",
|
|
13194
|
+
"inheritedFrom": {
|
|
13195
|
+
"name": "IconNameMixin",
|
|
13196
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
13197
|
+
}
|
|
13198
|
+
},
|
|
13199
|
+
{
|
|
13200
|
+
"name": "disabled",
|
|
13201
|
+
"type": {
|
|
13202
|
+
"text": "boolean | undefined"
|
|
13203
|
+
},
|
|
13204
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
13205
|
+
"default": "undefined",
|
|
13206
|
+
"fieldName": "disabled",
|
|
13207
|
+
"inheritedFrom": {
|
|
13208
|
+
"name": "DisabledMixin",
|
|
13209
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
13210
|
+
}
|
|
13211
|
+
}
|
|
13212
|
+
],
|
|
13213
|
+
"mixins": [
|
|
13214
|
+
{
|
|
13215
|
+
"name": "IconNameMixin",
|
|
13216
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
13217
|
+
},
|
|
13218
|
+
{
|
|
13219
|
+
"name": "DisabledMixin",
|
|
13220
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
13221
|
+
}
|
|
13222
|
+
],
|
|
13223
|
+
"superclass": {
|
|
13224
|
+
"name": "Component",
|
|
13225
|
+
"module": "/src/models"
|
|
13226
|
+
},
|
|
13227
|
+
"tagName": "mdc-inputchip",
|
|
13228
|
+
"jsDoc": "/**\n * mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n *\n * - It supports a leading icon along with label.\n * - It supports an error state for validation.\n * - It supports a close button to remove the chip.\n *\n * @tagname mdc-inputchip\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
|
|
13229
|
+
"customElement": true
|
|
13230
|
+
}
|
|
13231
|
+
],
|
|
13232
|
+
"exports": [
|
|
13233
|
+
{
|
|
13234
|
+
"kind": "js",
|
|
13235
|
+
"name": "default",
|
|
13236
|
+
"declaration": {
|
|
13237
|
+
"name": "InputChip",
|
|
13238
|
+
"module": "components/inputchip/inputchip.component.js"
|
|
13239
|
+
}
|
|
13240
|
+
}
|
|
13241
|
+
]
|
|
13242
|
+
},
|
|
13039
13243
|
{
|
|
13040
13244
|
"kind": "javascript-module",
|
|
13041
13245
|
"path": "components/linksimple/linksimple.component.js",
|