@momentum-design/components 0.73.6 → 0.73.7
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/custom-elements.json +1393 -1393
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
|
@@ -2,6 +2,218 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "components/animation/animation.component.js",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
|
|
12
|
+
"name": "Animation",
|
|
13
|
+
"members": [
|
|
14
|
+
{
|
|
15
|
+
"kind": "field",
|
|
16
|
+
"name": "name",
|
|
17
|
+
"type": {
|
|
18
|
+
"text": "AnimationNames | undefined"
|
|
19
|
+
},
|
|
20
|
+
"description": "Name of the animation (= filename)",
|
|
21
|
+
"attribute": "name",
|
|
22
|
+
"reflects": true
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"kind": "field",
|
|
26
|
+
"name": "loop",
|
|
27
|
+
"type": {
|
|
28
|
+
"text": "LoopType | undefined"
|
|
29
|
+
},
|
|
30
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
31
|
+
"attribute": "loop",
|
|
32
|
+
"reflects": true
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"kind": "field",
|
|
36
|
+
"name": "autoplay",
|
|
37
|
+
"type": {
|
|
38
|
+
"text": "boolean | undefined"
|
|
39
|
+
},
|
|
40
|
+
"description": "Weather start the animation automatically",
|
|
41
|
+
"attribute": "autoplay",
|
|
42
|
+
"reflects": true
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"kind": "field",
|
|
46
|
+
"name": "ariaLabel",
|
|
47
|
+
"type": {
|
|
48
|
+
"text": "string | null"
|
|
49
|
+
},
|
|
50
|
+
"default": "null",
|
|
51
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
52
|
+
"attribute": "aria-label"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"kind": "field",
|
|
56
|
+
"name": "ariaLabelledBy",
|
|
57
|
+
"type": {
|
|
58
|
+
"text": "string | null"
|
|
59
|
+
},
|
|
60
|
+
"default": "null",
|
|
61
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
62
|
+
"attribute": "aria-labelledby"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"kind": "field",
|
|
66
|
+
"name": "lottieInstance",
|
|
67
|
+
"type": {
|
|
68
|
+
"text": "AnimationItem | undefined"
|
|
69
|
+
},
|
|
70
|
+
"privacy": "private",
|
|
71
|
+
"description": "Lottie animation instance"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"kind": "field",
|
|
75
|
+
"name": "containerRef",
|
|
76
|
+
"type": {
|
|
77
|
+
"text": "Ref<HTMLDivElement>"
|
|
78
|
+
},
|
|
79
|
+
"privacy": "private",
|
|
80
|
+
"description": "Container for the animation"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"kind": "field",
|
|
84
|
+
"name": "animation",
|
|
85
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
86
|
+
"readonly": true
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"kind": "method",
|
|
90
|
+
"name": "getLoopValue",
|
|
91
|
+
"privacy": "private"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"kind": "method",
|
|
95
|
+
"name": "onLoadSuccessHandler",
|
|
96
|
+
"privacy": "private",
|
|
97
|
+
"parameters": [
|
|
98
|
+
{
|
|
99
|
+
"name": "animationData",
|
|
100
|
+
"type": {
|
|
101
|
+
"text": "any"
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
],
|
|
105
|
+
"description": "Create new lotty instance for the loaded data"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"kind": "method",
|
|
109
|
+
"name": "onLoadFailHandler",
|
|
110
|
+
"privacy": "private",
|
|
111
|
+
"parameters": [
|
|
112
|
+
{
|
|
113
|
+
"name": "error",
|
|
114
|
+
"type": {
|
|
115
|
+
"text": "Error"
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
],
|
|
119
|
+
"description": "Error handler for animation loading"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"kind": "method",
|
|
123
|
+
"name": "getAnimationData",
|
|
124
|
+
"privacy": "private",
|
|
125
|
+
"description": "Import animation data dynamically"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"kind": "field",
|
|
129
|
+
"name": "onCompleteHandler",
|
|
130
|
+
"description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
|
|
131
|
+
}
|
|
132
|
+
],
|
|
133
|
+
"events": [
|
|
134
|
+
{
|
|
135
|
+
"name": "load",
|
|
136
|
+
"type": {
|
|
137
|
+
"text": "CustomEvent"
|
|
138
|
+
},
|
|
139
|
+
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
140
|
+
"reactName": "onLoad"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
144
|
+
"name": "complete",
|
|
145
|
+
"reactName": "onComplete"
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
149
|
+
"name": "error",
|
|
150
|
+
"reactName": "onError"
|
|
151
|
+
}
|
|
152
|
+
],
|
|
153
|
+
"attributes": [
|
|
154
|
+
{
|
|
155
|
+
"name": "name",
|
|
156
|
+
"type": {
|
|
157
|
+
"text": "AnimationNames | undefined"
|
|
158
|
+
},
|
|
159
|
+
"description": "Name of the animation (= filename)",
|
|
160
|
+
"fieldName": "name"
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"name": "loop",
|
|
164
|
+
"type": {
|
|
165
|
+
"text": "LoopType | undefined"
|
|
166
|
+
},
|
|
167
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
168
|
+
"fieldName": "loop"
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
"name": "autoplay",
|
|
172
|
+
"type": {
|
|
173
|
+
"text": "boolean | undefined"
|
|
174
|
+
},
|
|
175
|
+
"description": "Weather start the animation automatically",
|
|
176
|
+
"fieldName": "autoplay"
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"name": "aria-label",
|
|
180
|
+
"type": {
|
|
181
|
+
"text": "string | null"
|
|
182
|
+
},
|
|
183
|
+
"default": "null",
|
|
184
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
185
|
+
"fieldName": "ariaLabel"
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"name": "aria-labelledby",
|
|
189
|
+
"type": {
|
|
190
|
+
"text": "string | null"
|
|
191
|
+
},
|
|
192
|
+
"default": "null",
|
|
193
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
194
|
+
"fieldName": "ariaLabelledBy"
|
|
195
|
+
}
|
|
196
|
+
],
|
|
197
|
+
"superclass": {
|
|
198
|
+
"name": "Component",
|
|
199
|
+
"module": "/src/models"
|
|
200
|
+
},
|
|
201
|
+
"tagName": "mdc-animation",
|
|
202
|
+
"jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
|
|
203
|
+
"customElement": true
|
|
204
|
+
}
|
|
205
|
+
],
|
|
206
|
+
"exports": [
|
|
207
|
+
{
|
|
208
|
+
"kind": "js",
|
|
209
|
+
"name": "default",
|
|
210
|
+
"declaration": {
|
|
211
|
+
"name": "Animation",
|
|
212
|
+
"module": "components/animation/animation.component.js"
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
]
|
|
216
|
+
},
|
|
5
217
|
{
|
|
6
218
|
"kind": "javascript-module",
|
|
7
219
|
"path": "components/alertchip/alertchip.component.js",
|
|
@@ -494,236 +706,24 @@
|
|
|
494
706
|
},
|
|
495
707
|
{
|
|
496
708
|
"kind": "javascript-module",
|
|
497
|
-
"path": "components/
|
|
709
|
+
"path": "components/appheader/appheader.component.js",
|
|
498
710
|
"declarations": [
|
|
499
711
|
{
|
|
500
712
|
"kind": "class",
|
|
501
|
-
"description": "The `mdc-
|
|
502
|
-
"name": "
|
|
503
|
-
"
|
|
713
|
+
"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**.",
|
|
714
|
+
"name": "Appheader",
|
|
715
|
+
"cssParts": [
|
|
504
716
|
{
|
|
505
|
-
"
|
|
506
|
-
"name": "
|
|
507
|
-
"type": {
|
|
508
|
-
"text": "AnimationNames | undefined"
|
|
509
|
-
},
|
|
510
|
-
"description": "Name of the animation (= filename)",
|
|
511
|
-
"attribute": "name",
|
|
512
|
-
"reflects": true
|
|
717
|
+
"description": "The main container for styling the header.",
|
|
718
|
+
"name": "container"
|
|
513
719
|
},
|
|
514
720
|
{
|
|
515
|
-
"
|
|
516
|
-
"name": "
|
|
517
|
-
"type": {
|
|
518
|
-
"text": "LoopType | undefined"
|
|
519
|
-
},
|
|
520
|
-
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
521
|
-
"attribute": "loop",
|
|
522
|
-
"reflects": true
|
|
721
|
+
"description": "The leading section of the header.",
|
|
722
|
+
"name": "leading-section"
|
|
523
723
|
},
|
|
524
724
|
{
|
|
525
|
-
"
|
|
526
|
-
"name": "
|
|
527
|
-
"type": {
|
|
528
|
-
"text": "boolean | undefined"
|
|
529
|
-
},
|
|
530
|
-
"description": "Weather start the animation automatically",
|
|
531
|
-
"attribute": "autoplay",
|
|
532
|
-
"reflects": true
|
|
533
|
-
},
|
|
534
|
-
{
|
|
535
|
-
"kind": "field",
|
|
536
|
-
"name": "ariaLabel",
|
|
537
|
-
"type": {
|
|
538
|
-
"text": "string | null"
|
|
539
|
-
},
|
|
540
|
-
"default": "null",
|
|
541
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
542
|
-
"attribute": "aria-label"
|
|
543
|
-
},
|
|
544
|
-
{
|
|
545
|
-
"kind": "field",
|
|
546
|
-
"name": "ariaLabelledBy",
|
|
547
|
-
"type": {
|
|
548
|
-
"text": "string | null"
|
|
549
|
-
},
|
|
550
|
-
"default": "null",
|
|
551
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
552
|
-
"attribute": "aria-labelledby"
|
|
553
|
-
},
|
|
554
|
-
{
|
|
555
|
-
"kind": "field",
|
|
556
|
-
"name": "lottieInstance",
|
|
557
|
-
"type": {
|
|
558
|
-
"text": "AnimationItem | undefined"
|
|
559
|
-
},
|
|
560
|
-
"privacy": "private",
|
|
561
|
-
"description": "Lottie animation instance"
|
|
562
|
-
},
|
|
563
|
-
{
|
|
564
|
-
"kind": "field",
|
|
565
|
-
"name": "containerRef",
|
|
566
|
-
"type": {
|
|
567
|
-
"text": "Ref<HTMLDivElement>"
|
|
568
|
-
},
|
|
569
|
-
"privacy": "private",
|
|
570
|
-
"description": "Container for the animation"
|
|
571
|
-
},
|
|
572
|
-
{
|
|
573
|
-
"kind": "field",
|
|
574
|
-
"name": "animation",
|
|
575
|
-
"description": "Exposed API of the animation library (lottie)",
|
|
576
|
-
"readonly": true
|
|
577
|
-
},
|
|
578
|
-
{
|
|
579
|
-
"kind": "method",
|
|
580
|
-
"name": "getLoopValue",
|
|
581
|
-
"privacy": "private"
|
|
582
|
-
},
|
|
583
|
-
{
|
|
584
|
-
"kind": "method",
|
|
585
|
-
"name": "onLoadSuccessHandler",
|
|
586
|
-
"privacy": "private",
|
|
587
|
-
"parameters": [
|
|
588
|
-
{
|
|
589
|
-
"name": "animationData",
|
|
590
|
-
"type": {
|
|
591
|
-
"text": "any"
|
|
592
|
-
}
|
|
593
|
-
}
|
|
594
|
-
],
|
|
595
|
-
"description": "Create new lotty instance for the loaded data"
|
|
596
|
-
},
|
|
597
|
-
{
|
|
598
|
-
"kind": "method",
|
|
599
|
-
"name": "onLoadFailHandler",
|
|
600
|
-
"privacy": "private",
|
|
601
|
-
"parameters": [
|
|
602
|
-
{
|
|
603
|
-
"name": "error",
|
|
604
|
-
"type": {
|
|
605
|
-
"text": "Error"
|
|
606
|
-
}
|
|
607
|
-
}
|
|
608
|
-
],
|
|
609
|
-
"description": "Error handler for animation loading"
|
|
610
|
-
},
|
|
611
|
-
{
|
|
612
|
-
"kind": "method",
|
|
613
|
-
"name": "getAnimationData",
|
|
614
|
-
"privacy": "private",
|
|
615
|
-
"description": "Import animation data dynamically"
|
|
616
|
-
},
|
|
617
|
-
{
|
|
618
|
-
"kind": "field",
|
|
619
|
-
"name": "onCompleteHandler",
|
|
620
|
-
"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."
|
|
621
|
-
}
|
|
622
|
-
],
|
|
623
|
-
"events": [
|
|
624
|
-
{
|
|
625
|
-
"name": "load",
|
|
626
|
-
"type": {
|
|
627
|
-
"text": "CustomEvent"
|
|
628
|
-
},
|
|
629
|
-
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
630
|
-
"reactName": "onLoad"
|
|
631
|
-
},
|
|
632
|
-
{
|
|
633
|
-
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
634
|
-
"name": "complete",
|
|
635
|
-
"reactName": "onComplete"
|
|
636
|
-
},
|
|
637
|
-
{
|
|
638
|
-
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
639
|
-
"name": "error",
|
|
640
|
-
"reactName": "onError"
|
|
641
|
-
}
|
|
642
|
-
],
|
|
643
|
-
"attributes": [
|
|
644
|
-
{
|
|
645
|
-
"name": "name",
|
|
646
|
-
"type": {
|
|
647
|
-
"text": "AnimationNames | undefined"
|
|
648
|
-
},
|
|
649
|
-
"description": "Name of the animation (= filename)",
|
|
650
|
-
"fieldName": "name"
|
|
651
|
-
},
|
|
652
|
-
{
|
|
653
|
-
"name": "loop",
|
|
654
|
-
"type": {
|
|
655
|
-
"text": "LoopType | undefined"
|
|
656
|
-
},
|
|
657
|
-
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
658
|
-
"fieldName": "loop"
|
|
659
|
-
},
|
|
660
|
-
{
|
|
661
|
-
"name": "autoplay",
|
|
662
|
-
"type": {
|
|
663
|
-
"text": "boolean | undefined"
|
|
664
|
-
},
|
|
665
|
-
"description": "Weather start the animation automatically",
|
|
666
|
-
"fieldName": "autoplay"
|
|
667
|
-
},
|
|
668
|
-
{
|
|
669
|
-
"name": "aria-label",
|
|
670
|
-
"type": {
|
|
671
|
-
"text": "string | null"
|
|
672
|
-
},
|
|
673
|
-
"default": "null",
|
|
674
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
675
|
-
"fieldName": "ariaLabel"
|
|
676
|
-
},
|
|
677
|
-
{
|
|
678
|
-
"name": "aria-labelledby",
|
|
679
|
-
"type": {
|
|
680
|
-
"text": "string | null"
|
|
681
|
-
},
|
|
682
|
-
"default": "null",
|
|
683
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
684
|
-
"fieldName": "ariaLabelledBy"
|
|
685
|
-
}
|
|
686
|
-
],
|
|
687
|
-
"superclass": {
|
|
688
|
-
"name": "Component",
|
|
689
|
-
"module": "/src/models"
|
|
690
|
-
},
|
|
691
|
-
"tagName": "mdc-animation",
|
|
692
|
-
"jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
|
|
693
|
-
"customElement": true
|
|
694
|
-
}
|
|
695
|
-
],
|
|
696
|
-
"exports": [
|
|
697
|
-
{
|
|
698
|
-
"kind": "js",
|
|
699
|
-
"name": "default",
|
|
700
|
-
"declaration": {
|
|
701
|
-
"name": "Animation",
|
|
702
|
-
"module": "components/animation/animation.component.js"
|
|
703
|
-
}
|
|
704
|
-
}
|
|
705
|
-
]
|
|
706
|
-
},
|
|
707
|
-
{
|
|
708
|
-
"kind": "javascript-module",
|
|
709
|
-
"path": "components/appheader/appheader.component.js",
|
|
710
|
-
"declarations": [
|
|
711
|
-
{
|
|
712
|
-
"kind": "class",
|
|
713
|
-
"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**.",
|
|
714
|
-
"name": "Appheader",
|
|
715
|
-
"cssParts": [
|
|
716
|
-
{
|
|
717
|
-
"description": "The main container for styling the header.",
|
|
718
|
-
"name": "container"
|
|
719
|
-
},
|
|
720
|
-
{
|
|
721
|
-
"description": "The leading section of the header.",
|
|
722
|
-
"name": "leading-section"
|
|
723
|
-
},
|
|
724
|
-
{
|
|
725
|
-
"description": "The center section of the header.",
|
|
726
|
-
"name": "center-section"
|
|
725
|
+
"description": "The center section of the header.",
|
|
726
|
+
"name": "center-section"
|
|
727
727
|
},
|
|
728
728
|
{
|
|
729
729
|
"description": "The trailing section of the header.",
|
|
@@ -23343,1020 +23343,950 @@
|
|
|
23343
23343
|
},
|
|
23344
23344
|
{
|
|
23345
23345
|
"kind": "javascript-module",
|
|
23346
|
-
"path": "components/
|
|
23346
|
+
"path": "components/tab/tab.component.js",
|
|
23347
23347
|
"declarations": [
|
|
23348
23348
|
{
|
|
23349
23349
|
"kind": "class",
|
|
23350
|
-
"description": "
|
|
23351
|
-
"name": "
|
|
23350
|
+
"description": "`mdc-tab` is Tab component to be used within the Tabgroup.\n\nPassing in the attribute `text` to the tab component is changing the text displayed in the tab.\n\nPass attribute `tabid` when using inside of `tablist` component.\n\nThe `slot=\"badge\"` can be used to add a badge to the tab.\n\nThe `slot=\"chip\"` can be used to add a chip to the tab.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.\n\nNote: Icons can be used in conjunction with badges or chips.\nBadges and chips should not be used at the same time.",
|
|
23351
|
+
"name": "Tab",
|
|
23352
23352
|
"cssProperties": [
|
|
23353
23353
|
{
|
|
23354
|
-
"description": "Gap between
|
|
23355
|
-
"name": "--mdc-
|
|
23354
|
+
"description": "Gap between the badge(if provided), icon and text.",
|
|
23355
|
+
"name": "--mdc-tab-content-gap"
|
|
23356
23356
|
},
|
|
23357
23357
|
{
|
|
23358
|
-
"description": "
|
|
23359
|
-
"name": "--mdc-
|
|
23358
|
+
"description": "Height of the tab.",
|
|
23359
|
+
"name": "--mdc-tab-height"
|
|
23360
23360
|
},
|
|
23361
23361
|
{
|
|
23362
|
-
"description": "
|
|
23363
|
-
"name": "--mdc-
|
|
23364
|
-
}
|
|
23365
|
-
],
|
|
23366
|
-
"slots": [
|
|
23367
|
-
{
|
|
23368
|
-
"description": "slot for mdc-tab elements.",
|
|
23369
|
-
"name": "Default"
|
|
23370
|
-
}
|
|
23371
|
-
],
|
|
23372
|
-
"members": [
|
|
23362
|
+
"description": "Background color for active glass tab in disabled state.",
|
|
23363
|
+
"name": "--mdc-tab-glass-active-background-color-disabled"
|
|
23364
|
+
},
|
|
23373
23365
|
{
|
|
23374
|
-
"
|
|
23375
|
-
"name": "
|
|
23376
|
-
"type": {
|
|
23377
|
-
"text": "string | undefined"
|
|
23378
|
-
},
|
|
23379
|
-
"description": "ID of the active tab, defaults to the first tab if not provided",
|
|
23380
|
-
"attribute": "active-tab-id",
|
|
23381
|
-
"reflects": true
|
|
23366
|
+
"description": "Background color for active glass tab in hover state.",
|
|
23367
|
+
"name": "--mdc-tab-glass-active-background-color-hover"
|
|
23382
23368
|
},
|
|
23383
23369
|
{
|
|
23384
|
-
"
|
|
23385
|
-
"name": "
|
|
23386
|
-
|
|
23387
|
-
"text": "string | undefined"
|
|
23388
|
-
},
|
|
23389
|
-
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
|
23390
|
-
"attribute": "data-aria-label"
|
|
23391
|
-
}
|
|
23392
|
-
],
|
|
23393
|
-
"events": [
|
|
23370
|
+
"description": "Background color for active glass tab in rest state.",
|
|
23371
|
+
"name": "--mdc-tab-glass-active-background-color-normal"
|
|
23372
|
+
},
|
|
23394
23373
|
{
|
|
23395
|
-
"description": "
|
|
23396
|
-
"name": "
|
|
23397
|
-
|
|
23398
|
-
}
|
|
23399
|
-
],
|
|
23400
|
-
"attributes": [
|
|
23374
|
+
"description": "Background color for active glass tab in pressed state.",
|
|
23375
|
+
"name": "--mdc-tab-glass-active-background-color-pressed"
|
|
23376
|
+
},
|
|
23401
23377
|
{
|
|
23402
|
-
"
|
|
23403
|
-
"
|
|
23404
|
-
"text": "string | undefined"
|
|
23405
|
-
},
|
|
23406
|
-
"description": "ID of the active tab, defaults to the first tab if not provided",
|
|
23407
|
-
"fieldName": "activeTabId"
|
|
23378
|
+
"description": "Text and icon color for active glass tab.",
|
|
23379
|
+
"name": "--mdc-tab-glass-active-color"
|
|
23408
23380
|
},
|
|
23409
23381
|
{
|
|
23410
|
-
"
|
|
23411
|
-
"
|
|
23412
|
-
|
|
23413
|
-
},
|
|
23414
|
-
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
|
23415
|
-
"fieldName": "dataAriaLabel"
|
|
23416
|
-
}
|
|
23417
|
-
],
|
|
23418
|
-
"superclass": {
|
|
23419
|
-
"name": "Component",
|
|
23420
|
-
"module": "/src/models"
|
|
23421
|
-
},
|
|
23422
|
-
"tagName": "mdc-tablist",
|
|
23423
|
-
"jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n * or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n * and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n * that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n * The function sent as the argument will receive the fired event\n * and the new tab id can be fetched from event.detail.tabId.\n *\n * `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n */",
|
|
23424
|
-
"customElement": true
|
|
23425
|
-
}
|
|
23426
|
-
],
|
|
23427
|
-
"exports": [
|
|
23428
|
-
{
|
|
23429
|
-
"kind": "js",
|
|
23430
|
-
"name": "default",
|
|
23431
|
-
"declaration": {
|
|
23432
|
-
"name": "TabList",
|
|
23433
|
-
"module": "components/tablist/tablist.component.js"
|
|
23434
|
-
}
|
|
23435
|
-
}
|
|
23436
|
-
]
|
|
23437
|
-
},
|
|
23438
|
-
{
|
|
23439
|
-
"kind": "javascript-module",
|
|
23440
|
-
"path": "components/text/text.component.js",
|
|
23441
|
-
"declarations": [
|
|
23442
|
-
{
|
|
23443
|
-
"kind": "class",
|
|
23444
|
-
"description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
|
|
23445
|
-
"name": "Text",
|
|
23446
|
-
"cssParts": [
|
|
23382
|
+
"description": "Text and icon color for active glass tab in disabled state.",
|
|
23383
|
+
"name": "--mdc-tab-glass-active-color-disabled"
|
|
23384
|
+
},
|
|
23447
23385
|
{
|
|
23448
|
-
"description": "
|
|
23449
|
-
"name": "
|
|
23450
|
-
}
|
|
23451
|
-
],
|
|
23452
|
-
"slots": [
|
|
23386
|
+
"description": "Border radius for glass tab.",
|
|
23387
|
+
"name": "--mdc-tab-glass-border-radius"
|
|
23388
|
+
},
|
|
23453
23389
|
{
|
|
23454
|
-
"description": "
|
|
23455
|
-
"name": ""
|
|
23456
|
-
}
|
|
23457
|
-
],
|
|
23458
|
-
"members": [
|
|
23390
|
+
"description": "Background color for inactive glass tab in disabled state.",
|
|
23391
|
+
"name": "--mdc-tab-glass-inactive-background-color-disabled"
|
|
23392
|
+
},
|
|
23459
23393
|
{
|
|
23460
|
-
"
|
|
23461
|
-
"name": "
|
|
23462
|
-
"type": {
|
|
23463
|
-
"text": "TextType"
|
|
23464
|
-
},
|
|
23465
|
-
"privacy": "public",
|
|
23466
|
-
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
|
23467
|
-
"default": "body-large-regular",
|
|
23468
|
-
"attribute": "type",
|
|
23469
|
-
"reflects": true
|
|
23394
|
+
"description": "Background color for inactive glass tab in hover state.",
|
|
23395
|
+
"name": "--mdc-tab-glass-inactive-background-color-hover"
|
|
23470
23396
|
},
|
|
23471
23397
|
{
|
|
23472
|
-
"
|
|
23473
|
-
"name": "
|
|
23474
|
-
|
|
23475
|
-
"text": "TagName | undefined"
|
|
23476
|
-
},
|
|
23477
|
-
"privacy": "public",
|
|
23478
|
-
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
|
|
23479
|
-
"attribute": "tagname",
|
|
23480
|
-
"reflects": true
|
|
23481
|
-
}
|
|
23482
|
-
],
|
|
23483
|
-
"attributes": [
|
|
23398
|
+
"description": "Background color for inactive glass tab in rest state.",
|
|
23399
|
+
"name": "--mdc-tab-glass-inactive-background-color-normal"
|
|
23400
|
+
},
|
|
23484
23401
|
{
|
|
23485
|
-
"
|
|
23486
|
-
"
|
|
23487
|
-
"text": "TextType"
|
|
23488
|
-
},
|
|
23489
|
-
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
|
23490
|
-
"default": "body-large-regular",
|
|
23491
|
-
"fieldName": "type"
|
|
23402
|
+
"description": "Background color for inactive glass tab in pressed state.",
|
|
23403
|
+
"name": "--mdc-tab-glass-inactive-background-color-pressed"
|
|
23492
23404
|
},
|
|
23493
23405
|
{
|
|
23494
|
-
"
|
|
23495
|
-
"
|
|
23496
|
-
|
|
23497
|
-
},
|
|
23498
|
-
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
|
|
23499
|
-
"fieldName": "tagname"
|
|
23500
|
-
}
|
|
23501
|
-
],
|
|
23502
|
-
"superclass": {
|
|
23503
|
-
"name": "Component",
|
|
23504
|
-
"module": "/src/models"
|
|
23505
|
-
},
|
|
23506
|
-
"tagName": "mdc-text",
|
|
23507
|
-
"jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
|
|
23508
|
-
"customElement": true
|
|
23509
|
-
}
|
|
23510
|
-
],
|
|
23511
|
-
"exports": [
|
|
23512
|
-
{
|
|
23513
|
-
"kind": "js",
|
|
23514
|
-
"name": "default",
|
|
23515
|
-
"declaration": {
|
|
23516
|
-
"name": "Text",
|
|
23517
|
-
"module": "components/text/text.component.js"
|
|
23518
|
-
}
|
|
23519
|
-
}
|
|
23520
|
-
]
|
|
23521
|
-
},
|
|
23522
|
-
{
|
|
23523
|
-
"kind": "javascript-module",
|
|
23524
|
-
"path": "components/textarea/textarea.component.js",
|
|
23525
|
-
"declarations": [
|
|
23526
|
-
{
|
|
23527
|
-
"kind": "class",
|
|
23528
|
-
"description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required-label: A string depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n This event exposes 3 properties:\n - currentCharacterCount - the current number of characters in the textarea field,\n - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.",
|
|
23529
|
-
"name": "Textarea",
|
|
23530
|
-
"cssProperties": [
|
|
23406
|
+
"description": "Text and icon color for inactive glass tab.",
|
|
23407
|
+
"name": "--mdc-tab-glass-inactive-color"
|
|
23408
|
+
},
|
|
23531
23409
|
{
|
|
23532
|
-
"description": "
|
|
23533
|
-
"name": "--mdc-
|
|
23410
|
+
"description": "Text and icon color for inactive glass tab in disabled state.",
|
|
23411
|
+
"name": "--mdc-tab-glass-inactive-color-disabled"
|
|
23534
23412
|
},
|
|
23535
23413
|
{
|
|
23536
|
-
"description": "
|
|
23537
|
-
"name": "--mdc-
|
|
23414
|
+
"description": "Background color for active line tab in pressed state.",
|
|
23415
|
+
"name": "--mdc-tab-line-active-background-color-pressed"
|
|
23538
23416
|
},
|
|
23539
23417
|
{
|
|
23540
|
-
"description": "Background color for
|
|
23541
|
-
"name": "--mdc-
|
|
23418
|
+
"description": "Background color for active line tab in disabled state.",
|
|
23419
|
+
"name": "--mdc-tab-line-active-background-color-disabled"
|
|
23542
23420
|
},
|
|
23543
23421
|
{
|
|
23544
|
-
"description": "
|
|
23545
|
-
"name": "--mdc-
|
|
23422
|
+
"description": "Background color for active line tab in hover state.",
|
|
23423
|
+
"name": "--mdc-tab-line-active-background-color-hover"
|
|
23546
23424
|
},
|
|
23547
23425
|
{
|
|
23548
|
-
"description": "Background color for
|
|
23549
|
-
"name": "--mdc-
|
|
23426
|
+
"description": "Background color for active line tab in rest state.",
|
|
23427
|
+
"name": "--mdc-tab-line-active-background-color-normal"
|
|
23550
23428
|
},
|
|
23551
23429
|
{
|
|
23552
|
-
"description": "
|
|
23553
|
-
"name": "--mdc-
|
|
23430
|
+
"description": "Text and icon color for active line tab.",
|
|
23431
|
+
"name": "--mdc-tab-line-active-color"
|
|
23554
23432
|
},
|
|
23555
23433
|
{
|
|
23556
|
-
"description": "Text color for
|
|
23557
|
-
"name": "--mdc-
|
|
23434
|
+
"description": "Text and icon color for active line tab in disabled state.",
|
|
23435
|
+
"name": "--mdc-tab-line-active-color-disabled"
|
|
23558
23436
|
},
|
|
23559
23437
|
{
|
|
23560
|
-
"description": "
|
|
23561
|
-
"name": "--mdc-
|
|
23438
|
+
"description": "color for indicator in active line tab.",
|
|
23439
|
+
"name": "--mdc-tab-line-active-indicator-color"
|
|
23562
23440
|
},
|
|
23563
23441
|
{
|
|
23564
|
-
"description": "
|
|
23565
|
-
"name": "--mdc-
|
|
23442
|
+
"description": "Color for indicator in active line tab in disabled state.",
|
|
23443
|
+
"name": "--mdc-tab-line-active-indicator-color-disabled"
|
|
23566
23444
|
},
|
|
23567
23445
|
{
|
|
23568
|
-
"description": "
|
|
23569
|
-
"name": "--mdc-
|
|
23446
|
+
"description": "Height for indicator in active line tab.",
|
|
23447
|
+
"name": "--mdc-tab-line-active-indicator-height"
|
|
23570
23448
|
},
|
|
23571
23449
|
{
|
|
23572
|
-
"description": "
|
|
23573
|
-
"name": "--mdc-
|
|
23450
|
+
"description": "Width for indicator in active line tab.",
|
|
23451
|
+
"name": "--mdc-tab-line-active-indicator-width"
|
|
23574
23452
|
},
|
|
23575
23453
|
{
|
|
23576
|
-
"description": "
|
|
23577
|
-
"name": "--mdc-
|
|
23454
|
+
"description": "Bottom left border radius for line tab.",
|
|
23455
|
+
"name": "--mdc-tab-line-border-bottom-left-radius"
|
|
23578
23456
|
},
|
|
23579
23457
|
{
|
|
23580
|
-
"description": "
|
|
23581
|
-
"name": "--mdc-
|
|
23458
|
+
"description": "Bottom right border radius for line tab.",
|
|
23459
|
+
"name": "--mdc-tab-line-border-bottom-right-radius"
|
|
23582
23460
|
},
|
|
23583
23461
|
{
|
|
23584
|
-
"description": "
|
|
23585
|
-
"name": "--mdc-
|
|
23586
|
-
}
|
|
23587
|
-
],
|
|
23588
|
-
"members": [
|
|
23462
|
+
"description": "Top left border radius for line tab.",
|
|
23463
|
+
"name": "--mdc-tab-line-border-top-left-radius"
|
|
23464
|
+
},
|
|
23589
23465
|
{
|
|
23590
|
-
"
|
|
23591
|
-
"name": "
|
|
23592
|
-
"type": {
|
|
23593
|
-
"text": "string | undefined"
|
|
23594
|
-
},
|
|
23595
|
-
"description": "The placeholder text that is displayed when the textarea field is empty.",
|
|
23596
|
-
"attribute": "placeholder"
|
|
23466
|
+
"description": "Top right border radius for line tab.",
|
|
23467
|
+
"name": "--mdc-tab-line-border-top-right-radius"
|
|
23597
23468
|
},
|
|
23598
23469
|
{
|
|
23599
|
-
"
|
|
23600
|
-
"name": "
|
|
23601
|
-
"type": {
|
|
23602
|
-
"text": "boolean"
|
|
23603
|
-
},
|
|
23604
|
-
"default": "false",
|
|
23605
|
-
"description": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
|
|
23606
|
-
"attribute": "readonly"
|
|
23470
|
+
"description": "Background color for inactive line tab in pressed state.",
|
|
23471
|
+
"name": "--mdc-tab-line-inactive-background-color-pressed"
|
|
23607
23472
|
},
|
|
23608
23473
|
{
|
|
23609
|
-
"
|
|
23610
|
-
"name": "
|
|
23611
|
-
"description": "The rows attribute specifies the visible number of lines in a text area.",
|
|
23612
|
-
"default": "5",
|
|
23613
|
-
"attribute": "rows"
|
|
23474
|
+
"description": "Background color for inactive line tab in disabled state",
|
|
23475
|
+
"name": "--mdc-tab-line-inactive-background-color-disabled"
|
|
23614
23476
|
},
|
|
23615
23477
|
{
|
|
23616
|
-
"
|
|
23617
|
-
"name": "
|
|
23618
|
-
"description": "The cols attribute specifies the visible number of lines in a text area.",
|
|
23619
|
-
"default": "40",
|
|
23620
|
-
"attribute": "cols"
|
|
23478
|
+
"description": "Background color for inactive line tab in hover state.",
|
|
23479
|
+
"name": "--mdc-tab-line-inactive-background-color-hover"
|
|
23621
23480
|
},
|
|
23622
23481
|
{
|
|
23623
|
-
"
|
|
23624
|
-
"name": "
|
|
23625
|
-
"type": {
|
|
23626
|
-
"text": "WrapType"
|
|
23627
|
-
},
|
|
23628
|
-
"description": "The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.",
|
|
23629
|
-
"default": "'soft'",
|
|
23630
|
-
"attribute": "wrap"
|
|
23482
|
+
"description": "Background color for inactive line tab in rest state.",
|
|
23483
|
+
"name": "--mdc-tab-line-inactive-background-color-normal"
|
|
23631
23484
|
},
|
|
23632
23485
|
{
|
|
23633
|
-
"
|
|
23634
|
-
"name": "
|
|
23635
|
-
"type": {
|
|
23636
|
-
"text": "AutoCapitalizeType"
|
|
23637
|
-
},
|
|
23638
|
-
"description": "The autocapitalize attribute of the textarea field.",
|
|
23639
|
-
"default": "'off'",
|
|
23640
|
-
"attribute": "autocapitalize"
|
|
23486
|
+
"description": "Text and icon color for inactive line tab.",
|
|
23487
|
+
"name": "--mdc-tab-line-inactive-color"
|
|
23641
23488
|
},
|
|
23642
23489
|
{
|
|
23643
|
-
"
|
|
23644
|
-
"name": "
|
|
23645
|
-
"type": {
|
|
23646
|
-
"text": "AutoCompleteType"
|
|
23647
|
-
},
|
|
23648
|
-
"description": "The autocomplete attribute of the textarea field.",
|
|
23649
|
-
"default": "'off'",
|
|
23650
|
-
"attribute": "autocomplete"
|
|
23490
|
+
"description": "Text and icon color for inactive line tab in disabled state.",
|
|
23491
|
+
"name": "--mdc-tab-line-inactive-color-disabled"
|
|
23651
23492
|
},
|
|
23652
23493
|
{
|
|
23653
|
-
"
|
|
23654
|
-
"name": "
|
|
23655
|
-
"type": {
|
|
23656
|
-
"text": "boolean"
|
|
23657
|
-
},
|
|
23658
|
-
"default": "false",
|
|
23659
|
-
"description": "If true, the textarea field is focused when the component is rendered.",
|
|
23660
|
-
"attribute": "autofocus"
|
|
23494
|
+
"description": "Padding left for the tab.",
|
|
23495
|
+
"name": "--mdc-tab-padding-left"
|
|
23661
23496
|
},
|
|
23662
23497
|
{
|
|
23663
|
-
"
|
|
23664
|
-
"name": "
|
|
23665
|
-
"type": {
|
|
23666
|
-
"text": "string | undefined"
|
|
23667
|
-
},
|
|
23668
|
-
"description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
|
|
23669
|
-
"attribute": "dirname"
|
|
23498
|
+
"description": "Padding right for the tab.",
|
|
23499
|
+
"name": "--mdc-tab-padding-right"
|
|
23670
23500
|
},
|
|
23671
23501
|
{
|
|
23672
|
-
"
|
|
23673
|
-
"name": "
|
|
23674
|
-
|
|
23675
|
-
|
|
23676
|
-
|
|
23677
|
-
"
|
|
23678
|
-
|
|
23502
|
+
"description": "Background color for active pill tab in pressed state.",
|
|
23503
|
+
"name": "--mdc-tab-pill-active-background-color-pressed"
|
|
23504
|
+
},
|
|
23505
|
+
{
|
|
23506
|
+
"description": "Background color for active pill tab in disabled state.",
|
|
23507
|
+
"name": "--mdc-tab-pill-active-background-color-disabled"
|
|
23508
|
+
},
|
|
23509
|
+
{
|
|
23510
|
+
"description": "Background color for active pill tab in hover state.",
|
|
23511
|
+
"name": "--mdc-tab-pill-active-background-color-hover"
|
|
23512
|
+
},
|
|
23513
|
+
{
|
|
23514
|
+
"description": "Background color for active pill tab in rest state.",
|
|
23515
|
+
"name": "--mdc-tab-pill-active-background-color-normal"
|
|
23516
|
+
},
|
|
23517
|
+
{
|
|
23518
|
+
"description": "Text and icon color for active pill tab.",
|
|
23519
|
+
"name": "--mdc-tab-pill-active-color"
|
|
23520
|
+
},
|
|
23521
|
+
{
|
|
23522
|
+
"description": "Text and icon color for active pill tab in disabled state.",
|
|
23523
|
+
"name": "--mdc-tab-pill-active-color-disabled"
|
|
23524
|
+
},
|
|
23525
|
+
{
|
|
23526
|
+
"description": "Border radius for pill tab.",
|
|
23527
|
+
"name": "--mdc-tab-pill-border-radius"
|
|
23528
|
+
},
|
|
23529
|
+
{
|
|
23530
|
+
"description": "Background color for inactive pill tab in pressed state.",
|
|
23531
|
+
"name": "--mdc-tab-pill-inactive-background-color-pressed"
|
|
23532
|
+
},
|
|
23533
|
+
{
|
|
23534
|
+
"description": "Background color for inactive pill tab in disabled state.",
|
|
23535
|
+
"name": "--mdc-tab-pill-inactive-background-color-disabled"
|
|
23536
|
+
},
|
|
23537
|
+
{
|
|
23538
|
+
"description": "Background color for inactive pill tab in hover state.",
|
|
23539
|
+
"name": "--mdc-tab-pill-inactive-background-color-hover"
|
|
23540
|
+
},
|
|
23541
|
+
{
|
|
23542
|
+
"description": "Background color for inactive pill tab in rest state.",
|
|
23543
|
+
"name": "--mdc-tab-pill-inactive-background-color-normal"
|
|
23544
|
+
},
|
|
23545
|
+
{
|
|
23546
|
+
"description": "Text and icon color for inactive pill tab.",
|
|
23547
|
+
"name": "--mdc-tab-pill-inactive-color"
|
|
23679
23548
|
},
|
|
23549
|
+
{
|
|
23550
|
+
"description": "Text and icon color for inactive pill tab in disabled state.",
|
|
23551
|
+
"name": "--mdc-tab-pill-inactive-color-disabled"
|
|
23552
|
+
}
|
|
23553
|
+
],
|
|
23554
|
+
"members": [
|
|
23680
23555
|
{
|
|
23681
23556
|
"kind": "field",
|
|
23682
|
-
"name": "
|
|
23557
|
+
"name": "active",
|
|
23683
23558
|
"type": {
|
|
23684
|
-
"text": "
|
|
23559
|
+
"text": "boolean | undefined"
|
|
23685
23560
|
},
|
|
23686
|
-
"description": "The
|
|
23687
|
-
"
|
|
23561
|
+
"description": "The tab's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the tab is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.\n\nThis attribute also controls the \"aria-selected\" attribute of the tab.\nWhen the tab is active, \"aria-selected\" is set to true, indicating that the tab is selected.\nWhen the tab is inactive, \"aria-selected\" is set to false, indicating that the tab is not selected.",
|
|
23562
|
+
"default": "false",
|
|
23563
|
+
"attribute": "active",
|
|
23564
|
+
"reflects": true,
|
|
23565
|
+
"inheritedFrom": {
|
|
23566
|
+
"name": "Buttonsimple",
|
|
23567
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
23568
|
+
}
|
|
23688
23569
|
},
|
|
23689
23570
|
{
|
|
23690
23571
|
"kind": "field",
|
|
23691
|
-
"name": "
|
|
23572
|
+
"name": "text",
|
|
23692
23573
|
"type": {
|
|
23693
|
-
"text": "
|
|
23574
|
+
"text": "string | undefined"
|
|
23694
23575
|
},
|
|
23695
|
-
"description": "
|
|
23696
|
-
"attribute": "
|
|
23576
|
+
"description": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
|
|
23577
|
+
"attribute": "text",
|
|
23578
|
+
"reflects": true
|
|
23697
23579
|
},
|
|
23698
23580
|
{
|
|
23699
23581
|
"kind": "field",
|
|
23700
|
-
"name": "
|
|
23582
|
+
"name": "variant",
|
|
23701
23583
|
"type": {
|
|
23702
|
-
"text": "
|
|
23584
|
+
"text": "Variant"
|
|
23703
23585
|
},
|
|
23704
|
-
"
|
|
23705
|
-
"default": "
|
|
23586
|
+
"description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
|
|
23587
|
+
"default": "pill",
|
|
23588
|
+
"attribute": "variant",
|
|
23589
|
+
"reflects": true
|
|
23706
23590
|
},
|
|
23707
23591
|
{
|
|
23708
23592
|
"kind": "field",
|
|
23709
|
-
"name": "
|
|
23593
|
+
"name": "tabId",
|
|
23710
23594
|
"type": {
|
|
23711
|
-
"text": "
|
|
23595
|
+
"text": "string | undefined"
|
|
23712
23596
|
},
|
|
23713
|
-
"
|
|
23714
|
-
"
|
|
23715
|
-
|
|
23716
|
-
|
|
23717
|
-
"kind": "method",
|
|
23718
|
-
"name": "setTextareaValidity",
|
|
23719
|
-
"privacy": "private"
|
|
23720
|
-
},
|
|
23721
|
-
{
|
|
23722
|
-
"kind": "method",
|
|
23723
|
-
"name": "handleValueChange",
|
|
23724
|
-
"description": "Handles the value change of the textarea field.\nSets the form value and updates the validity of the textarea field.",
|
|
23725
|
-
"return": {
|
|
23726
|
-
"type": {
|
|
23727
|
-
"text": ""
|
|
23728
|
-
}
|
|
23729
|
-
}
|
|
23597
|
+
"description": "Id of the tab (used as a identificator when used in the tablist)\nNote: has to be unique!",
|
|
23598
|
+
"default": "undefined",
|
|
23599
|
+
"attribute": "tab-id",
|
|
23600
|
+
"reflects": true
|
|
23730
23601
|
},
|
|
23731
23602
|
{
|
|
23732
23603
|
"kind": "method",
|
|
23733
|
-
"name": "
|
|
23604
|
+
"name": "modifyIconName",
|
|
23734
23605
|
"privacy": "private",
|
|
23735
|
-
"description": "Dispatches the character overflow state change event.",
|
|
23736
23606
|
"return": {
|
|
23737
23607
|
"type": {
|
|
23738
|
-
"text": ""
|
|
23608
|
+
"text": "void"
|
|
23739
23609
|
}
|
|
23740
|
-
}
|
|
23610
|
+
},
|
|
23611
|
+
"parameters": [
|
|
23612
|
+
{
|
|
23613
|
+
"name": "active",
|
|
23614
|
+
"type": {
|
|
23615
|
+
"text": "boolean"
|
|
23616
|
+
},
|
|
23617
|
+
"description": "The active state."
|
|
23618
|
+
}
|
|
23619
|
+
],
|
|
23620
|
+
"description": "Modifies the icon name based on the active state.\nIf the tab is active, the icon name is suffixed with '-filled'.\nIf the tab is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
|
|
23741
23621
|
},
|
|
23742
23622
|
{
|
|
23743
23623
|
"kind": "method",
|
|
23744
|
-
"name": "
|
|
23624
|
+
"name": "setVariant",
|
|
23745
23625
|
"privacy": "private",
|
|
23746
|
-
"description": "Handles the character overflow state change.\nDispatches the character overflow state change event if the character limit is exceeded or restored.",
|
|
23747
23626
|
"return": {
|
|
23748
23627
|
"type": {
|
|
23749
|
-
"text": ""
|
|
23628
|
+
"text": "void"
|
|
23750
23629
|
}
|
|
23751
|
-
}
|
|
23630
|
+
},
|
|
23631
|
+
"parameters": [
|
|
23632
|
+
{
|
|
23633
|
+
"name": "variant",
|
|
23634
|
+
"type": {
|
|
23635
|
+
"text": "Variant"
|
|
23636
|
+
},
|
|
23637
|
+
"description": "The variant to set."
|
|
23638
|
+
}
|
|
23639
|
+
],
|
|
23640
|
+
"description": "Sets the variant attribute for the tab component.\nIf the provided variant is not included in the TAB_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
|
|
23752
23641
|
},
|
|
23753
23642
|
{
|
|
23754
|
-
"kind": "
|
|
23755
|
-
"name": "
|
|
23643
|
+
"kind": "field",
|
|
23644
|
+
"name": "handleTabActiveChange",
|
|
23756
23645
|
"privacy": "private",
|
|
23757
|
-
"description": "
|
|
23758
|
-
"
|
|
23759
|
-
|
|
23760
|
-
"
|
|
23646
|
+
"description": "Dispatch the activechange event.",
|
|
23647
|
+
"parameters": [
|
|
23648
|
+
{
|
|
23649
|
+
"description": "The active state of the tab.",
|
|
23650
|
+
"name": "active"
|
|
23761
23651
|
}
|
|
23762
|
-
|
|
23652
|
+
]
|
|
23763
23653
|
},
|
|
23764
23654
|
{
|
|
23765
23655
|
"kind": "method",
|
|
23766
|
-
"name": "
|
|
23767
|
-
"privacy": "
|
|
23656
|
+
"name": "setActive",
|
|
23657
|
+
"privacy": "protected",
|
|
23768
23658
|
"parameters": [
|
|
23769
23659
|
{
|
|
23770
|
-
"name": "
|
|
23660
|
+
"name": "element",
|
|
23771
23661
|
"type": {
|
|
23772
|
-
"text": "
|
|
23662
|
+
"text": "HTMLElement"
|
|
23773
23663
|
},
|
|
23774
|
-
"description": "
|
|
23664
|
+
"description": "The tab element."
|
|
23665
|
+
},
|
|
23666
|
+
{
|
|
23667
|
+
"name": "active",
|
|
23668
|
+
"type": {
|
|
23669
|
+
"text": "boolean"
|
|
23670
|
+
},
|
|
23671
|
+
"description": "The active state of the tab."
|
|
23775
23672
|
}
|
|
23776
23673
|
],
|
|
23777
|
-
"description": "
|
|
23778
|
-
|
|
23779
|
-
|
|
23780
|
-
|
|
23781
|
-
|
|
23782
|
-
"privacy": "protected"
|
|
23674
|
+
"description": "Sets the aria-selected attribute based on the active state of the Tab.\nIf the tab is active, the filled version of the icon is displayed,\nelse the icon is restored to its original value.",
|
|
23675
|
+
"inheritedFrom": {
|
|
23676
|
+
"name": "Buttonsimple",
|
|
23677
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
23678
|
+
}
|
|
23783
23679
|
},
|
|
23784
23680
|
{
|
|
23785
23681
|
"kind": "method",
|
|
23786
|
-
"name": "
|
|
23787
|
-
"privacy": "protected"
|
|
23682
|
+
"name": "executeAction",
|
|
23683
|
+
"privacy": "protected",
|
|
23684
|
+
"inheritedFrom": {
|
|
23685
|
+
"name": "Buttonsimple",
|
|
23686
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
23687
|
+
}
|
|
23788
23688
|
},
|
|
23789
23689
|
{
|
|
23790
23690
|
"kind": "field",
|
|
23791
|
-
"name": "
|
|
23691
|
+
"name": "iconName",
|
|
23792
23692
|
"type": {
|
|
23793
|
-
"text": "
|
|
23693
|
+
"text": "IconNames | undefined"
|
|
23794
23694
|
},
|
|
23795
|
-
"
|
|
23796
|
-
"
|
|
23797
|
-
"attribute": "name",
|
|
23798
|
-
"reflects": true,
|
|
23695
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
23696
|
+
"attribute": "icon-name",
|
|
23799
23697
|
"inheritedFrom": {
|
|
23800
|
-
"name": "
|
|
23801
|
-
"module": "utils/mixins/
|
|
23698
|
+
"name": "IconNameMixin",
|
|
23699
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
23802
23700
|
}
|
|
23803
23701
|
},
|
|
23804
23702
|
{
|
|
23805
23703
|
"kind": "field",
|
|
23806
|
-
"name": "
|
|
23704
|
+
"name": "tabIndex",
|
|
23807
23705
|
"type": {
|
|
23808
|
-
"text": "
|
|
23706
|
+
"text": "number"
|
|
23809
23707
|
},
|
|
23810
|
-
"default": "
|
|
23811
|
-
"description": "
|
|
23812
|
-
"attribute": "
|
|
23708
|
+
"default": "0",
|
|
23709
|
+
"description": "This property specifies the tab order of the element.",
|
|
23710
|
+
"attribute": "tabIndex",
|
|
23813
23711
|
"reflects": true,
|
|
23814
23712
|
"inheritedFrom": {
|
|
23815
|
-
"name": "
|
|
23816
|
-
"module": "
|
|
23713
|
+
"name": "Buttonsimple",
|
|
23714
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
23817
23715
|
}
|
|
23818
23716
|
},
|
|
23819
23717
|
{
|
|
23820
23718
|
"kind": "field",
|
|
23821
|
-
"name": "
|
|
23719
|
+
"name": "disabled",
|
|
23822
23720
|
"type": {
|
|
23823
|
-
"text": "
|
|
23721
|
+
"text": "boolean | undefined"
|
|
23824
23722
|
},
|
|
23825
|
-
"description": "
|
|
23826
|
-
"
|
|
23827
|
-
"
|
|
23828
|
-
"inheritedFrom": {
|
|
23829
|
-
"name": "FormInternalsMixin",
|
|
23830
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23831
|
-
}
|
|
23832
|
-
},
|
|
23833
|
-
{
|
|
23834
|
-
"kind": "field",
|
|
23835
|
-
"name": "validity",
|
|
23836
|
-
"type": {
|
|
23837
|
-
"text": "ValidityState"
|
|
23838
|
-
},
|
|
23839
|
-
"readonly": true,
|
|
23840
|
-
"inheritedFrom": {
|
|
23841
|
-
"name": "FormInternalsMixin",
|
|
23842
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23843
|
-
}
|
|
23844
|
-
},
|
|
23845
|
-
{
|
|
23846
|
-
"kind": "field",
|
|
23847
|
-
"name": "willValidate",
|
|
23848
|
-
"readonly": true,
|
|
23849
|
-
"inheritedFrom": {
|
|
23850
|
-
"name": "FormInternalsMixin",
|
|
23851
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23852
|
-
}
|
|
23853
|
-
},
|
|
23854
|
-
{
|
|
23855
|
-
"kind": "method",
|
|
23856
|
-
"name": "setValidity",
|
|
23857
|
-
"description": "Sets the validity of the input field based on the input field's validity.",
|
|
23858
|
-
"return": {
|
|
23859
|
-
"type": {
|
|
23860
|
-
"text": ""
|
|
23861
|
-
}
|
|
23862
|
-
},
|
|
23863
|
-
"inheritedFrom": {
|
|
23864
|
-
"name": "FormInternalsMixin",
|
|
23865
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23866
|
-
}
|
|
23867
|
-
},
|
|
23868
|
-
{
|
|
23869
|
-
"kind": "method",
|
|
23870
|
-
"name": "checkValidity",
|
|
23871
|
-
"return": {
|
|
23872
|
-
"type": {
|
|
23873
|
-
"text": "boolean"
|
|
23874
|
-
}
|
|
23875
|
-
},
|
|
23876
|
-
"inheritedFrom": {
|
|
23877
|
-
"name": "FormInternalsMixin",
|
|
23878
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23879
|
-
}
|
|
23880
|
-
},
|
|
23881
|
-
{
|
|
23882
|
-
"kind": "method",
|
|
23883
|
-
"name": "reportValidity",
|
|
23884
|
-
"inheritedFrom": {
|
|
23885
|
-
"name": "FormInternalsMixin",
|
|
23886
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
|
23887
|
-
}
|
|
23888
|
-
},
|
|
23889
|
-
{
|
|
23890
|
-
"kind": "field",
|
|
23891
|
-
"name": "dataAriaLabel",
|
|
23892
|
-
"type": {
|
|
23893
|
-
"text": "string | null"
|
|
23894
|
-
},
|
|
23895
|
-
"default": "null",
|
|
23896
|
-
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
23897
|
-
"attribute": "data-aria-label",
|
|
23723
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
23724
|
+
"default": "undefined",
|
|
23725
|
+
"attribute": "disabled",
|
|
23898
23726
|
"reflects": true,
|
|
23899
23727
|
"inheritedFrom": {
|
|
23900
|
-
"name": "
|
|
23901
|
-
"module": "
|
|
23728
|
+
"name": "Buttonsimple",
|
|
23729
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
23902
23730
|
}
|
|
23903
23731
|
},
|
|
23904
23732
|
{
|
|
23905
23733
|
"kind": "field",
|
|
23906
|
-
"name": "
|
|
23734
|
+
"name": "softDisabled",
|
|
23907
23735
|
"type": {
|
|
23908
23736
|
"text": "boolean | undefined"
|
|
23909
23737
|
},
|
|
23910
|
-
"description": "Indicates whether the
|
|
23738
|
+
"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.",
|
|
23911
23739
|
"default": "undefined",
|
|
23912
|
-
"attribute": "disabled",
|
|
23740
|
+
"attribute": "soft-disabled",
|
|
23913
23741
|
"reflects": true,
|
|
23914
23742
|
"inheritedFrom": {
|
|
23915
|
-
"name": "
|
|
23916
|
-
"module": "components/
|
|
23743
|
+
"name": "Buttonsimple",
|
|
23744
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
23917
23745
|
}
|
|
23918
23746
|
},
|
|
23919
23747
|
{
|
|
23920
23748
|
"kind": "field",
|
|
23921
|
-
"name": "
|
|
23749
|
+
"name": "size",
|
|
23922
23750
|
"type": {
|
|
23923
|
-
"text": "
|
|
23751
|
+
"text": "ButtonSize"
|
|
23924
23752
|
},
|
|
23925
|
-
"description": "
|
|
23926
|
-
"
|
|
23753
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
23754
|
+
"default": "32",
|
|
23755
|
+
"attribute": "size",
|
|
23927
23756
|
"reflects": true,
|
|
23928
23757
|
"inheritedFrom": {
|
|
23929
|
-
"name": "
|
|
23930
|
-
"module": "components/
|
|
23758
|
+
"name": "Buttonsimple",
|
|
23759
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
23931
23760
|
}
|
|
23932
23761
|
},
|
|
23933
23762
|
{
|
|
23934
23763
|
"kind": "field",
|
|
23935
|
-
"name": "
|
|
23936
|
-
"
|
|
23937
|
-
|
|
23938
|
-
|
|
23939
|
-
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
23940
|
-
"attribute": "required-label",
|
|
23764
|
+
"name": "role",
|
|
23765
|
+
"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.",
|
|
23766
|
+
"default": "button",
|
|
23767
|
+
"attribute": "role",
|
|
23941
23768
|
"reflects": true,
|
|
23942
23769
|
"inheritedFrom": {
|
|
23943
|
-
"name": "
|
|
23944
|
-
"module": "components/
|
|
23770
|
+
"name": "Buttonsimple",
|
|
23771
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
23945
23772
|
}
|
|
23946
23773
|
},
|
|
23947
23774
|
{
|
|
23948
23775
|
"kind": "field",
|
|
23949
|
-
"name": "
|
|
23776
|
+
"name": "ariaStateKey",
|
|
23950
23777
|
"type": {
|
|
23951
|
-
"text": "string"
|
|
23778
|
+
"text": "string | undefined"
|
|
23952
23779
|
},
|
|
23953
|
-
"
|
|
23954
|
-
"
|
|
23955
|
-
"attribute": "
|
|
23780
|
+
"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`",
|
|
23781
|
+
"default": "'aria-pressed' (when)",
|
|
23782
|
+
"attribute": "ariaStateKey",
|
|
23783
|
+
"reflects": true,
|
|
23956
23784
|
"inheritedFrom": {
|
|
23957
|
-
"name": "
|
|
23958
|
-
"module": "components/
|
|
23785
|
+
"name": "Buttonsimple",
|
|
23786
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
23959
23787
|
}
|
|
23960
23788
|
},
|
|
23961
23789
|
{
|
|
23962
23790
|
"kind": "field",
|
|
23963
|
-
"name": "
|
|
23791
|
+
"name": "type",
|
|
23964
23792
|
"type": {
|
|
23965
|
-
"text": "
|
|
23793
|
+
"text": "ButtonType"
|
|
23966
23794
|
},
|
|
23967
|
-
"description": "
|
|
23968
|
-
"
|
|
23795
|
+
"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.",
|
|
23796
|
+
"default": "button",
|
|
23797
|
+
"attribute": "type",
|
|
23969
23798
|
"reflects": true,
|
|
23970
23799
|
"inheritedFrom": {
|
|
23971
|
-
"name": "
|
|
23972
|
-
"module": "components/
|
|
23800
|
+
"name": "Buttonsimple",
|
|
23801
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
23973
23802
|
}
|
|
23974
23803
|
},
|
|
23975
23804
|
{
|
|
23976
|
-
"kind": "
|
|
23977
|
-
"name": "
|
|
23978
|
-
"
|
|
23979
|
-
|
|
23980
|
-
|
|
23981
|
-
|
|
23982
|
-
|
|
23983
|
-
|
|
23805
|
+
"kind": "method",
|
|
23806
|
+
"name": "setSoftDisabled",
|
|
23807
|
+
"privacy": "private",
|
|
23808
|
+
"parameters": [
|
|
23809
|
+
{
|
|
23810
|
+
"name": "element",
|
|
23811
|
+
"type": {
|
|
23812
|
+
"text": "HTMLElement"
|
|
23813
|
+
},
|
|
23814
|
+
"description": "The button element."
|
|
23815
|
+
},
|
|
23816
|
+
{
|
|
23817
|
+
"name": "softDisabled",
|
|
23818
|
+
"optional": true,
|
|
23819
|
+
"type": {
|
|
23820
|
+
"text": "boolean"
|
|
23821
|
+
},
|
|
23822
|
+
"description": "The soft-disabled state."
|
|
23823
|
+
}
|
|
23824
|
+
],
|
|
23825
|
+
"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.",
|
|
23984
23826
|
"inheritedFrom": {
|
|
23985
|
-
"name": "
|
|
23986
|
-
"module": "components/
|
|
23827
|
+
"name": "Buttonsimple",
|
|
23828
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
23987
23829
|
}
|
|
23988
23830
|
},
|
|
23989
23831
|
{
|
|
23990
23832
|
"kind": "method",
|
|
23991
|
-
"name": "
|
|
23992
|
-
"privacy": "
|
|
23993
|
-
"
|
|
23994
|
-
|
|
23995
|
-
|
|
23996
|
-
"
|
|
23833
|
+
"name": "setDisabled",
|
|
23834
|
+
"privacy": "private",
|
|
23835
|
+
"parameters": [
|
|
23836
|
+
{
|
|
23837
|
+
"name": "element",
|
|
23838
|
+
"type": {
|
|
23839
|
+
"text": "HTMLElement"
|
|
23840
|
+
},
|
|
23841
|
+
"description": "The button element."
|
|
23842
|
+
},
|
|
23843
|
+
{
|
|
23844
|
+
"name": "disabled",
|
|
23845
|
+
"type": {
|
|
23846
|
+
"text": "boolean"
|
|
23847
|
+
},
|
|
23848
|
+
"description": "The disabled state."
|
|
23997
23849
|
}
|
|
23998
|
-
|
|
23850
|
+
],
|
|
23851
|
+
"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.",
|
|
23999
23852
|
"inheritedFrom": {
|
|
24000
|
-
"name": "
|
|
24001
|
-
"module": "components/
|
|
23853
|
+
"name": "Buttonsimple",
|
|
23854
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
24002
23855
|
}
|
|
24003
23856
|
},
|
|
24004
23857
|
{
|
|
24005
23858
|
"kind": "method",
|
|
24006
|
-
"name": "
|
|
24007
|
-
"privacy": "
|
|
23859
|
+
"name": "triggerClickEvent",
|
|
23860
|
+
"privacy": "private",
|
|
24008
23861
|
"inheritedFrom": {
|
|
24009
|
-
"name": "
|
|
24010
|
-
"module": "components/
|
|
23862
|
+
"name": "Buttonsimple",
|
|
23863
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
24011
23864
|
}
|
|
24012
23865
|
},
|
|
24013
23866
|
{
|
|
24014
23867
|
"kind": "method",
|
|
24015
|
-
"name": "
|
|
24016
|
-
"privacy": "
|
|
24017
|
-
"description": "
|
|
24018
|
-
"return": {
|
|
24019
|
-
"type": {
|
|
24020
|
-
"text": ""
|
|
24021
|
-
}
|
|
24022
|
-
},
|
|
23868
|
+
"name": "handleBlur",
|
|
23869
|
+
"privacy": "private",
|
|
23870
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
24023
23871
|
"inheritedFrom": {
|
|
24024
|
-
"name": "
|
|
24025
|
-
"module": "components/
|
|
23872
|
+
"name": "Buttonsimple",
|
|
23873
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
24026
23874
|
}
|
|
24027
23875
|
},
|
|
24028
23876
|
{
|
|
24029
23877
|
"kind": "method",
|
|
24030
|
-
"name": "
|
|
24031
|
-
"privacy": "
|
|
24032
|
-
"
|
|
24033
|
-
|
|
24034
|
-
|
|
24035
|
-
"
|
|
23878
|
+
"name": "handleKeyDown",
|
|
23879
|
+
"privacy": "private",
|
|
23880
|
+
"parameters": [
|
|
23881
|
+
{
|
|
23882
|
+
"name": "event",
|
|
23883
|
+
"type": {
|
|
23884
|
+
"text": "KeyboardEvent"
|
|
23885
|
+
},
|
|
23886
|
+
"description": "The keyboard event."
|
|
24036
23887
|
}
|
|
24037
|
-
|
|
23888
|
+
],
|
|
23889
|
+
"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.",
|
|
24038
23890
|
"inheritedFrom": {
|
|
24039
|
-
"name": "
|
|
24040
|
-
"module": "components/
|
|
23891
|
+
"name": "Buttonsimple",
|
|
23892
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
24041
23893
|
}
|
|
24042
23894
|
},
|
|
24043
23895
|
{
|
|
24044
23896
|
"kind": "method",
|
|
24045
|
-
"name": "
|
|
24046
|
-
"privacy": "
|
|
24047
|
-
"
|
|
24048
|
-
|
|
24049
|
-
|
|
24050
|
-
"
|
|
24051
|
-
|
|
24052
|
-
|
|
24053
|
-
|
|
24054
|
-
"name": "FormfieldWrapper",
|
|
24055
|
-
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
24056
|
-
}
|
|
24057
|
-
},
|
|
24058
|
-
{
|
|
24059
|
-
"kind": "method",
|
|
24060
|
-
"name": "renderHelperText",
|
|
24061
|
-
"privacy": "protected",
|
|
24062
|
-
"description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
|
|
24063
|
-
"return": {
|
|
24064
|
-
"type": {
|
|
24065
|
-
"text": ""
|
|
23897
|
+
"name": "handleKeyUp",
|
|
23898
|
+
"privacy": "private",
|
|
23899
|
+
"parameters": [
|
|
23900
|
+
{
|
|
23901
|
+
"name": "event",
|
|
23902
|
+
"type": {
|
|
23903
|
+
"text": "KeyboardEvent"
|
|
23904
|
+
},
|
|
23905
|
+
"description": "The keyboard event."
|
|
24066
23906
|
}
|
|
24067
|
-
|
|
23907
|
+
],
|
|
23908
|
+
"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.",
|
|
24068
23909
|
"inheritedFrom": {
|
|
24069
|
-
"name": "
|
|
24070
|
-
"module": "components/
|
|
23910
|
+
"name": "Buttonsimple",
|
|
23911
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
24071
23912
|
}
|
|
24072
23913
|
}
|
|
24073
23914
|
],
|
|
24074
23915
|
"events": [
|
|
24075
23916
|
{
|
|
24076
|
-
"
|
|
24077
|
-
"
|
|
24078
|
-
|
|
24079
|
-
|
|
24080
|
-
|
|
24081
|
-
|
|
24082
|
-
},
|
|
24083
|
-
{
|
|
24084
|
-
"type": {
|
|
24085
|
-
"text": "EventConstructor"
|
|
23917
|
+
"description": "(React: onClick) This event is dispatched when the tab is clicked.",
|
|
23918
|
+
"name": "click",
|
|
23919
|
+
"reactName": "onClick",
|
|
23920
|
+
"inheritedFrom": {
|
|
23921
|
+
"name": "Buttonsimple",
|
|
23922
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
24086
23923
|
}
|
|
24087
23924
|
},
|
|
24088
23925
|
{
|
|
24089
|
-
"description": "(React:
|
|
24090
|
-
"name": "
|
|
24091
|
-
"reactName": "
|
|
23926
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the tab.",
|
|
23927
|
+
"name": "keydown",
|
|
23928
|
+
"reactName": "onKeyDown",
|
|
23929
|
+
"inheritedFrom": {
|
|
23930
|
+
"name": "Buttonsimple",
|
|
23931
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
23932
|
+
}
|
|
24092
23933
|
},
|
|
24093
23934
|
{
|
|
24094
|
-
"description": "(React:
|
|
24095
|
-
"name": "
|
|
24096
|
-
"reactName": "
|
|
23935
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the tab.",
|
|
23936
|
+
"name": "keyup",
|
|
23937
|
+
"reactName": "onKeyUp",
|
|
23938
|
+
"inheritedFrom": {
|
|
23939
|
+
"name": "Buttonsimple",
|
|
23940
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
23941
|
+
}
|
|
24097
23942
|
},
|
|
24098
23943
|
{
|
|
24099
|
-
"description": "(React: onFocus) This event is dispatched when the
|
|
23944
|
+
"description": "(React: onFocus) This event is dispatched when the tab receives focus.",
|
|
24100
23945
|
"name": "focus",
|
|
24101
|
-
"reactName": "onFocus"
|
|
23946
|
+
"reactName": "onFocus",
|
|
23947
|
+
"inheritedFrom": {
|
|
23948
|
+
"name": "Buttonsimple",
|
|
23949
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
23950
|
+
}
|
|
24102
23951
|
},
|
|
24103
23952
|
{
|
|
24104
|
-
"description": "(React:
|
|
24105
|
-
"name": "
|
|
24106
|
-
"reactName": "
|
|
23953
|
+
"description": "(React: onActiveChange) This event is dispatched when the active state of the tab changes <br /> Event Data: `detail: { tabId: this.tabId, active }` <br /> Note: the activechange event is used by the tab list component to react to the change in state of the tab, so this event won't be needed if the tab list is used.",
|
|
23954
|
+
"name": "activechange",
|
|
23955
|
+
"reactName": "onActiveChange"
|
|
24107
23956
|
}
|
|
24108
23957
|
],
|
|
24109
23958
|
"attributes": [
|
|
24110
23959
|
{
|
|
24111
|
-
"name": "
|
|
24112
|
-
"type": {
|
|
24113
|
-
"text": "string | undefined"
|
|
24114
|
-
},
|
|
24115
|
-
"description": "The placeholder text that is displayed when the textarea field is empty.",
|
|
24116
|
-
"fieldName": "placeholder"
|
|
24117
|
-
},
|
|
24118
|
-
{
|
|
24119
|
-
"name": "readonly",
|
|
24120
|
-
"type": {
|
|
24121
|
-
"text": "boolean"
|
|
24122
|
-
},
|
|
24123
|
-
"default": "false",
|
|
24124
|
-
"description": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
|
|
24125
|
-
"fieldName": "readonly"
|
|
24126
|
-
},
|
|
24127
|
-
{
|
|
24128
|
-
"name": "rows",
|
|
24129
|
-
"description": "The rows attribute specifies the visible number of lines in a text area.",
|
|
24130
|
-
"default": "5",
|
|
24131
|
-
"fieldName": "rows"
|
|
24132
|
-
},
|
|
24133
|
-
{
|
|
24134
|
-
"name": "cols",
|
|
24135
|
-
"description": "The cols attribute specifies the visible number of lines in a text area.",
|
|
24136
|
-
"default": "40",
|
|
24137
|
-
"fieldName": "cols"
|
|
24138
|
-
},
|
|
24139
|
-
{
|
|
24140
|
-
"name": "wrap",
|
|
24141
|
-
"type": {
|
|
24142
|
-
"text": "WrapType"
|
|
24143
|
-
},
|
|
24144
|
-
"description": "The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.",
|
|
24145
|
-
"default": "'soft'",
|
|
24146
|
-
"fieldName": "wrap"
|
|
24147
|
-
},
|
|
24148
|
-
{
|
|
24149
|
-
"name": "autocapitalize",
|
|
24150
|
-
"type": {
|
|
24151
|
-
"text": "AutoCapitalizeType"
|
|
24152
|
-
},
|
|
24153
|
-
"description": "The autocapitalize attribute of the textarea field.",
|
|
24154
|
-
"default": "'off'",
|
|
24155
|
-
"fieldName": "autocapitalize"
|
|
24156
|
-
},
|
|
24157
|
-
{
|
|
24158
|
-
"name": "autocomplete",
|
|
24159
|
-
"type": {
|
|
24160
|
-
"text": "AutoCompleteType"
|
|
24161
|
-
},
|
|
24162
|
-
"description": "The autocomplete attribute of the textarea field.",
|
|
24163
|
-
"default": "'off'",
|
|
24164
|
-
"fieldName": "autocomplete"
|
|
24165
|
-
},
|
|
24166
|
-
{
|
|
24167
|
-
"name": "autofocus",
|
|
23960
|
+
"name": "active",
|
|
24168
23961
|
"type": {
|
|
24169
|
-
"text": "boolean"
|
|
23962
|
+
"text": "boolean | undefined"
|
|
24170
23963
|
},
|
|
23964
|
+
"description": "The tab's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the tab is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.\n\nThis attribute also controls the \"aria-selected\" attribute of the tab.\nWhen the tab is active, \"aria-selected\" is set to true, indicating that the tab is selected.\nWhen the tab is inactive, \"aria-selected\" is set to false, indicating that the tab is not selected.",
|
|
24171
23965
|
"default": "false",
|
|
24172
|
-
"
|
|
24173
|
-
"
|
|
23966
|
+
"fieldName": "active",
|
|
23967
|
+
"inheritedFrom": {
|
|
23968
|
+
"name": "Buttonsimple",
|
|
23969
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
23970
|
+
}
|
|
24174
23971
|
},
|
|
24175
23972
|
{
|
|
24176
|
-
"name": "
|
|
23973
|
+
"name": "text",
|
|
24177
23974
|
"type": {
|
|
24178
23975
|
"text": "string | undefined"
|
|
24179
23976
|
},
|
|
24180
|
-
"description": "
|
|
24181
|
-
"fieldName": "
|
|
24182
|
-
},
|
|
24183
|
-
{
|
|
24184
|
-
"name": "maxlength",
|
|
24185
|
-
"type": {
|
|
24186
|
-
"text": "number | undefined"
|
|
24187
|
-
},
|
|
24188
|
-
"description": "The maximum number of characters that the textarea field can accept.",
|
|
24189
|
-
"fieldName": "maxlength"
|
|
23977
|
+
"description": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
|
|
23978
|
+
"fieldName": "text"
|
|
24190
23979
|
},
|
|
24191
23980
|
{
|
|
24192
|
-
"name": "
|
|
23981
|
+
"name": "variant",
|
|
24193
23982
|
"type": {
|
|
24194
|
-
"text": "
|
|
23983
|
+
"text": "Variant"
|
|
24195
23984
|
},
|
|
24196
|
-
"description": "
|
|
24197
|
-
"
|
|
23985
|
+
"description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
|
|
23986
|
+
"default": "pill",
|
|
23987
|
+
"fieldName": "variant"
|
|
24198
23988
|
},
|
|
24199
23989
|
{
|
|
24200
|
-
"name": "
|
|
23990
|
+
"name": "tab-id",
|
|
24201
23991
|
"type": {
|
|
24202
|
-
"text": "
|
|
23992
|
+
"text": "string | undefined"
|
|
24203
23993
|
},
|
|
24204
|
-
"description": "
|
|
24205
|
-
"
|
|
23994
|
+
"description": "Id of the tab (used as a identificator when used in the tablist)\nNote: has to be unique!",
|
|
23995
|
+
"default": "undefined",
|
|
23996
|
+
"fieldName": "tabId"
|
|
24206
23997
|
},
|
|
24207
23998
|
{
|
|
24208
|
-
"name": "name",
|
|
23999
|
+
"name": "icon-name",
|
|
24209
24000
|
"type": {
|
|
24210
|
-
"text": "
|
|
24001
|
+
"text": "IconNames | undefined"
|
|
24211
24002
|
},
|
|
24212
|
-
"
|
|
24213
|
-
"
|
|
24214
|
-
"fieldName": "name",
|
|
24003
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
24004
|
+
"fieldName": "iconName",
|
|
24215
24005
|
"inheritedFrom": {
|
|
24216
|
-
"name": "
|
|
24217
|
-
"module": "src/utils/mixins/
|
|
24006
|
+
"name": "IconNameMixin",
|
|
24007
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
24218
24008
|
}
|
|
24219
24009
|
},
|
|
24220
24010
|
{
|
|
24221
|
-
"name": "
|
|
24011
|
+
"name": "tabIndex",
|
|
24222
24012
|
"type": {
|
|
24223
|
-
"text": "
|
|
24013
|
+
"text": "number"
|
|
24224
24014
|
},
|
|
24225
|
-
"default": "
|
|
24226
|
-
"description": "
|
|
24227
|
-
"fieldName": "
|
|
24015
|
+
"default": "0",
|
|
24016
|
+
"description": "This property specifies the tab order of the element.",
|
|
24017
|
+
"fieldName": "tabIndex",
|
|
24228
24018
|
"inheritedFrom": {
|
|
24229
|
-
"name": "
|
|
24230
|
-
"module": "src/
|
|
24019
|
+
"name": "Buttonsimple",
|
|
24020
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
24231
24021
|
}
|
|
24232
24022
|
},
|
|
24233
24023
|
{
|
|
24234
|
-
"name": "
|
|
24024
|
+
"name": "disabled",
|
|
24235
24025
|
"type": {
|
|
24236
|
-
"text": "
|
|
24026
|
+
"text": "boolean | undefined"
|
|
24237
24027
|
},
|
|
24238
|
-
"description": "
|
|
24239
|
-
"
|
|
24028
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
24029
|
+
"default": "undefined",
|
|
24030
|
+
"fieldName": "disabled",
|
|
24240
24031
|
"inheritedFrom": {
|
|
24241
|
-
"name": "
|
|
24242
|
-
"module": "src/
|
|
24032
|
+
"name": "Buttonsimple",
|
|
24033
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
24243
24034
|
}
|
|
24244
24035
|
},
|
|
24245
24036
|
{
|
|
24246
|
-
"name": "
|
|
24037
|
+
"name": "soft-disabled",
|
|
24247
24038
|
"type": {
|
|
24248
|
-
"text": "
|
|
24039
|
+
"text": "boolean | undefined"
|
|
24249
24040
|
},
|
|
24250
|
-
"
|
|
24251
|
-
"
|
|
24252
|
-
"fieldName": "
|
|
24041
|
+
"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.",
|
|
24042
|
+
"default": "undefined",
|
|
24043
|
+
"fieldName": "softDisabled",
|
|
24253
24044
|
"inheritedFrom": {
|
|
24254
|
-
"name": "
|
|
24255
|
-
"module": "src/
|
|
24045
|
+
"name": "Buttonsimple",
|
|
24046
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
24256
24047
|
}
|
|
24257
24048
|
},
|
|
24258
24049
|
{
|
|
24259
|
-
"name": "
|
|
24050
|
+
"name": "size",
|
|
24260
24051
|
"type": {
|
|
24261
|
-
"text": "
|
|
24052
|
+
"text": "ButtonSize"
|
|
24262
24053
|
},
|
|
24263
|
-
"description": "
|
|
24264
|
-
"default": "
|
|
24265
|
-
"fieldName": "
|
|
24054
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
24055
|
+
"default": "32",
|
|
24056
|
+
"fieldName": "size",
|
|
24266
24057
|
"inheritedFrom": {
|
|
24267
|
-
"name": "
|
|
24268
|
-
"module": "src/components/
|
|
24058
|
+
"name": "Buttonsimple",
|
|
24059
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
24269
24060
|
}
|
|
24270
24061
|
},
|
|
24271
24062
|
{
|
|
24272
|
-
"name": "
|
|
24273
|
-
"
|
|
24274
|
-
|
|
24275
|
-
|
|
24276
|
-
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
24277
|
-
"fieldName": "label",
|
|
24063
|
+
"name": "role",
|
|
24064
|
+
"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.",
|
|
24065
|
+
"default": "button",
|
|
24066
|
+
"fieldName": "role",
|
|
24278
24067
|
"inheritedFrom": {
|
|
24279
|
-
"name": "
|
|
24280
|
-
"module": "src/components/
|
|
24068
|
+
"name": "Buttonsimple",
|
|
24069
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
24281
24070
|
}
|
|
24282
24071
|
},
|
|
24283
24072
|
{
|
|
24284
|
-
"name": "
|
|
24073
|
+
"name": "ariaStateKey",
|
|
24285
24074
|
"type": {
|
|
24286
24075
|
"text": "string | undefined"
|
|
24287
24076
|
},
|
|
24288
|
-
"description": "
|
|
24289
|
-
"
|
|
24077
|
+
"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`",
|
|
24078
|
+
"default": "'aria-pressed' (when)",
|
|
24079
|
+
"fieldName": "ariaStateKey",
|
|
24290
24080
|
"inheritedFrom": {
|
|
24291
|
-
"name": "
|
|
24292
|
-
"module": "src/components/
|
|
24081
|
+
"name": "Buttonsimple",
|
|
24082
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
24293
24083
|
}
|
|
24294
24084
|
},
|
|
24295
24085
|
{
|
|
24296
|
-
"name": "
|
|
24086
|
+
"name": "type",
|
|
24297
24087
|
"type": {
|
|
24298
|
-
"text": "
|
|
24088
|
+
"text": "ButtonType"
|
|
24299
24089
|
},
|
|
24300
|
-
"
|
|
24301
|
-
"
|
|
24302
|
-
"fieldName": "
|
|
24090
|
+
"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.",
|
|
24091
|
+
"default": "button",
|
|
24092
|
+
"fieldName": "type",
|
|
24303
24093
|
"inheritedFrom": {
|
|
24304
|
-
"name": "
|
|
24305
|
-
"module": "src/components/
|
|
24094
|
+
"name": "Buttonsimple",
|
|
24095
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
24306
24096
|
}
|
|
24097
|
+
}
|
|
24098
|
+
],
|
|
24099
|
+
"mixins": [
|
|
24100
|
+
{
|
|
24101
|
+
"name": "IconNameMixin",
|
|
24102
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
24103
|
+
}
|
|
24104
|
+
],
|
|
24105
|
+
"superclass": {
|
|
24106
|
+
"name": "Buttonsimple",
|
|
24107
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
24108
|
+
},
|
|
24109
|
+
"tagName": "mdc-tab",
|
|
24110
|
+
"jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.\n * @cssproperty --mdc-tab-height - Height of the tab.\n * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.\n * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.\n * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.\n * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.\n * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.\n * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab\n * in hover state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab\n * in rest state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.\n * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.\n * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.\n * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.\n * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.\n * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.\n * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab\n * in pressed state.\n * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab\n * in disabled state\n * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.\n * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab\n * in rest state.\n * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.\n * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.\n * @cssproperty --mdc-tab-padding-left - Padding left for the tab.\n * @cssproperty --mdc-tab-padding-right - Padding right for the tab.\n * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.\n * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.\n * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.\n * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.\n * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.\n * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.\n * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab\n * in pressed state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.\n * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.\n * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.\n */",
|
|
24111
|
+
"customElement": true
|
|
24112
|
+
}
|
|
24113
|
+
],
|
|
24114
|
+
"exports": [
|
|
24115
|
+
{
|
|
24116
|
+
"kind": "js",
|
|
24117
|
+
"name": "default",
|
|
24118
|
+
"declaration": {
|
|
24119
|
+
"name": "Tab",
|
|
24120
|
+
"module": "components/tab/tab.component.js"
|
|
24121
|
+
}
|
|
24122
|
+
}
|
|
24123
|
+
]
|
|
24124
|
+
},
|
|
24125
|
+
{
|
|
24126
|
+
"kind": "javascript-module",
|
|
24127
|
+
"path": "components/tablist/tablist.component.js",
|
|
24128
|
+
"declarations": [
|
|
24129
|
+
{
|
|
24130
|
+
"kind": "class",
|
|
24131
|
+
"description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
|
|
24132
|
+
"name": "TabList",
|
|
24133
|
+
"cssProperties": [
|
|
24134
|
+
{
|
|
24135
|
+
"description": "Gap between tabs",
|
|
24136
|
+
"name": "--mdc-tablist-gap"
|
|
24307
24137
|
},
|
|
24308
24138
|
{
|
|
24309
|
-
"
|
|
24139
|
+
"description": "Width of the tablist",
|
|
24140
|
+
"name": "--mdc-tablist-width"
|
|
24141
|
+
},
|
|
24142
|
+
{
|
|
24143
|
+
"description": "Margin value for the arrow button",
|
|
24144
|
+
"name": "--mdc-tablist-arrow-button-margin"
|
|
24145
|
+
}
|
|
24146
|
+
],
|
|
24147
|
+
"slots": [
|
|
24148
|
+
{
|
|
24149
|
+
"description": "slot for mdc-tab elements.",
|
|
24150
|
+
"name": "Default"
|
|
24151
|
+
}
|
|
24152
|
+
],
|
|
24153
|
+
"members": [
|
|
24154
|
+
{
|
|
24155
|
+
"kind": "field",
|
|
24156
|
+
"name": "activeTabId",
|
|
24310
24157
|
"type": {
|
|
24311
|
-
"text": "
|
|
24158
|
+
"text": "string | undefined"
|
|
24312
24159
|
},
|
|
24313
|
-
"description": "
|
|
24314
|
-
"
|
|
24315
|
-
"
|
|
24316
|
-
"name": "FormfieldWrapper",
|
|
24317
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
24318
|
-
}
|
|
24160
|
+
"description": "ID of the active tab, defaults to the first tab if not provided",
|
|
24161
|
+
"attribute": "active-tab-id",
|
|
24162
|
+
"reflects": true
|
|
24319
24163
|
},
|
|
24320
24164
|
{
|
|
24321
|
-
"
|
|
24165
|
+
"kind": "field",
|
|
24166
|
+
"name": "dataAriaLabel",
|
|
24322
24167
|
"type": {
|
|
24323
24168
|
"text": "string | undefined"
|
|
24324
24169
|
},
|
|
24325
|
-
"description": "
|
|
24326
|
-
"
|
|
24327
|
-
"inheritedFrom": {
|
|
24328
|
-
"name": "FormfieldWrapper",
|
|
24329
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
24330
|
-
}
|
|
24170
|
+
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
|
24171
|
+
"attribute": "data-aria-label"
|
|
24331
24172
|
}
|
|
24332
24173
|
],
|
|
24333
|
-
"
|
|
24174
|
+
"events": [
|
|
24334
24175
|
{
|
|
24335
|
-
"
|
|
24336
|
-
"
|
|
24176
|
+
"description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
|
|
24177
|
+
"name": "change",
|
|
24178
|
+
"reactName": "onChange"
|
|
24179
|
+
}
|
|
24180
|
+
],
|
|
24181
|
+
"attributes": [
|
|
24182
|
+
{
|
|
24183
|
+
"name": "active-tab-id",
|
|
24184
|
+
"type": {
|
|
24185
|
+
"text": "string | undefined"
|
|
24186
|
+
},
|
|
24187
|
+
"description": "ID of the active tab, defaults to the first tab if not provided",
|
|
24188
|
+
"fieldName": "activeTabId"
|
|
24337
24189
|
},
|
|
24338
24190
|
{
|
|
24339
|
-
"name": "
|
|
24340
|
-
"
|
|
24191
|
+
"name": "data-aria-label",
|
|
24192
|
+
"type": {
|
|
24193
|
+
"text": "string | undefined"
|
|
24194
|
+
},
|
|
24195
|
+
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
|
24196
|
+
"fieldName": "dataAriaLabel"
|
|
24341
24197
|
}
|
|
24342
24198
|
],
|
|
24343
24199
|
"superclass": {
|
|
24344
|
-
"name": "
|
|
24345
|
-
"module": "/src/
|
|
24200
|
+
"name": "Component",
|
|
24201
|
+
"module": "/src/models"
|
|
24346
24202
|
},
|
|
24347
|
-
"tagName": "mdc-
|
|
24348
|
-
"jsDoc": "/**\n *
|
|
24349
|
-
"customElement": true
|
|
24203
|
+
"tagName": "mdc-tablist",
|
|
24204
|
+
"jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n * or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n * and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n * that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n * The function sent as the argument will receive the fired event\n * and the new tab id can be fetched from event.detail.tabId.\n *\n * `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n */",
|
|
24205
|
+
"customElement": true
|
|
24206
|
+
}
|
|
24207
|
+
],
|
|
24208
|
+
"exports": [
|
|
24209
|
+
{
|
|
24210
|
+
"kind": "js",
|
|
24211
|
+
"name": "default",
|
|
24212
|
+
"declaration": {
|
|
24213
|
+
"name": "TabList",
|
|
24214
|
+
"module": "components/tablist/tablist.component.js"
|
|
24215
|
+
}
|
|
24216
|
+
}
|
|
24217
|
+
]
|
|
24218
|
+
},
|
|
24219
|
+
{
|
|
24220
|
+
"kind": "javascript-module",
|
|
24221
|
+
"path": "components/text/text.component.js",
|
|
24222
|
+
"declarations": [
|
|
24223
|
+
{
|
|
24224
|
+
"kind": "class",
|
|
24225
|
+
"description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
|
|
24226
|
+
"name": "Text",
|
|
24227
|
+
"cssParts": [
|
|
24228
|
+
{
|
|
24229
|
+
"description": "The text element",
|
|
24230
|
+
"name": "text"
|
|
24231
|
+
}
|
|
24232
|
+
],
|
|
24350
24233
|
"slots": [
|
|
24351
24234
|
{
|
|
24352
|
-
"description": "slot
|
|
24353
|
-
"name": "
|
|
24354
|
-
"inheritedFrom": {
|
|
24355
|
-
"name": "FormfieldWrapper",
|
|
24356
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
24357
|
-
}
|
|
24235
|
+
"description": "Default slot for text content",
|
|
24236
|
+
"name": ""
|
|
24358
24237
|
}
|
|
24359
|
-
]
|
|
24238
|
+
],
|
|
24239
|
+
"members": [
|
|
24240
|
+
{
|
|
24241
|
+
"kind": "field",
|
|
24242
|
+
"name": "type",
|
|
24243
|
+
"type": {
|
|
24244
|
+
"text": "TextType"
|
|
24245
|
+
},
|
|
24246
|
+
"privacy": "public",
|
|
24247
|
+
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
|
24248
|
+
"default": "body-large-regular",
|
|
24249
|
+
"attribute": "type",
|
|
24250
|
+
"reflects": true
|
|
24251
|
+
},
|
|
24252
|
+
{
|
|
24253
|
+
"kind": "field",
|
|
24254
|
+
"name": "tagname",
|
|
24255
|
+
"type": {
|
|
24256
|
+
"text": "TagName | undefined"
|
|
24257
|
+
},
|
|
24258
|
+
"privacy": "public",
|
|
24259
|
+
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
|
|
24260
|
+
"attribute": "tagname",
|
|
24261
|
+
"reflects": true
|
|
24262
|
+
}
|
|
24263
|
+
],
|
|
24264
|
+
"attributes": [
|
|
24265
|
+
{
|
|
24266
|
+
"name": "type",
|
|
24267
|
+
"type": {
|
|
24268
|
+
"text": "TextType"
|
|
24269
|
+
},
|
|
24270
|
+
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
|
24271
|
+
"default": "body-large-regular",
|
|
24272
|
+
"fieldName": "type"
|
|
24273
|
+
},
|
|
24274
|
+
{
|
|
24275
|
+
"name": "tagname",
|
|
24276
|
+
"type": {
|
|
24277
|
+
"text": "TagName | undefined"
|
|
24278
|
+
},
|
|
24279
|
+
"description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
|
|
24280
|
+
"fieldName": "tagname"
|
|
24281
|
+
}
|
|
24282
|
+
],
|
|
24283
|
+
"superclass": {
|
|
24284
|
+
"name": "Component",
|
|
24285
|
+
"module": "/src/models"
|
|
24286
|
+
},
|
|
24287
|
+
"tagName": "mdc-text",
|
|
24288
|
+
"jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
|
|
24289
|
+
"customElement": true
|
|
24360
24290
|
}
|
|
24361
24291
|
],
|
|
24362
24292
|
"exports": [
|
|
@@ -24364,383 +24294,392 @@
|
|
|
24364
24294
|
"kind": "js",
|
|
24365
24295
|
"name": "default",
|
|
24366
24296
|
"declaration": {
|
|
24367
|
-
"name": "
|
|
24368
|
-
"module": "components/
|
|
24297
|
+
"name": "Text",
|
|
24298
|
+
"module": "components/text/text.component.js"
|
|
24369
24299
|
}
|
|
24370
24300
|
}
|
|
24371
24301
|
]
|
|
24372
24302
|
},
|
|
24373
24303
|
{
|
|
24374
24304
|
"kind": "javascript-module",
|
|
24375
|
-
"path": "components/
|
|
24305
|
+
"path": "components/textarea/textarea.component.js",
|
|
24376
24306
|
"declarations": [
|
|
24377
24307
|
{
|
|
24378
24308
|
"kind": "class",
|
|
24379
|
-
"description": "
|
|
24380
|
-
"name": "
|
|
24309
|
+
"description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required-label: A string depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n This event exposes 3 properties:\n - currentCharacterCount - the current number of characters in the textarea field,\n - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.",
|
|
24310
|
+
"name": "Textarea",
|
|
24381
24311
|
"cssProperties": [
|
|
24382
24312
|
{
|
|
24383
|
-
"description": "
|
|
24384
|
-
"name": "--mdc-
|
|
24385
|
-
},
|
|
24386
|
-
{
|
|
24387
|
-
"description": "Height of the tab.",
|
|
24388
|
-
"name": "--mdc-tab-height"
|
|
24389
|
-
},
|
|
24390
|
-
{
|
|
24391
|
-
"description": "Background color for active glass tab in disabled state.",
|
|
24392
|
-
"name": "--mdc-tab-glass-active-background-color-disabled"
|
|
24393
|
-
},
|
|
24394
|
-
{
|
|
24395
|
-
"description": "Background color for active glass tab in hover state.",
|
|
24396
|
-
"name": "--mdc-tab-glass-active-background-color-hover"
|
|
24397
|
-
},
|
|
24398
|
-
{
|
|
24399
|
-
"description": "Background color for active glass tab in rest state.",
|
|
24400
|
-
"name": "--mdc-tab-glass-active-background-color-normal"
|
|
24401
|
-
},
|
|
24402
|
-
{
|
|
24403
|
-
"description": "Background color for active glass tab in pressed state.",
|
|
24404
|
-
"name": "--mdc-tab-glass-active-background-color-pressed"
|
|
24405
|
-
},
|
|
24406
|
-
{
|
|
24407
|
-
"description": "Text and icon color for active glass tab.",
|
|
24408
|
-
"name": "--mdc-tab-glass-active-color"
|
|
24409
|
-
},
|
|
24410
|
-
{
|
|
24411
|
-
"description": "Text and icon color for active glass tab in disabled state.",
|
|
24412
|
-
"name": "--mdc-tab-glass-active-color-disabled"
|
|
24413
|
-
},
|
|
24414
|
-
{
|
|
24415
|
-
"description": "Border radius for glass tab.",
|
|
24416
|
-
"name": "--mdc-tab-glass-border-radius"
|
|
24417
|
-
},
|
|
24418
|
-
{
|
|
24419
|
-
"description": "Background color for inactive glass tab in disabled state.",
|
|
24420
|
-
"name": "--mdc-tab-glass-inactive-background-color-disabled"
|
|
24421
|
-
},
|
|
24422
|
-
{
|
|
24423
|
-
"description": "Background color for inactive glass tab in hover state.",
|
|
24424
|
-
"name": "--mdc-tab-glass-inactive-background-color-hover"
|
|
24425
|
-
},
|
|
24426
|
-
{
|
|
24427
|
-
"description": "Background color for inactive glass tab in rest state.",
|
|
24428
|
-
"name": "--mdc-tab-glass-inactive-background-color-normal"
|
|
24429
|
-
},
|
|
24430
|
-
{
|
|
24431
|
-
"description": "Background color for inactive glass tab in pressed state.",
|
|
24432
|
-
"name": "--mdc-tab-glass-inactive-background-color-pressed"
|
|
24433
|
-
},
|
|
24434
|
-
{
|
|
24435
|
-
"description": "Text and icon color for inactive glass tab.",
|
|
24436
|
-
"name": "--mdc-tab-glass-inactive-color"
|
|
24313
|
+
"description": "Border color for the textarea container when disabled",
|
|
24314
|
+
"name": "--mdc-textarea-disabled-border-color"
|
|
24437
24315
|
},
|
|
24438
24316
|
{
|
|
24439
|
-
"description": "Text
|
|
24440
|
-
"name": "--mdc-
|
|
24317
|
+
"description": "Text color for the textarea field when disabled",
|
|
24318
|
+
"name": "--mdc-textarea-disabled-text-color"
|
|
24441
24319
|
},
|
|
24442
24320
|
{
|
|
24443
|
-
"description": "Background color for
|
|
24444
|
-
"name": "--mdc-
|
|
24321
|
+
"description": "Background color for the textarea field when disabled",
|
|
24322
|
+
"name": "--mdc-textarea-disabled-background-color"
|
|
24445
24323
|
},
|
|
24446
24324
|
{
|
|
24447
|
-
"description": "
|
|
24448
|
-
"name": "--mdc-
|
|
24325
|
+
"description": "Text color for the textarea field",
|
|
24326
|
+
"name": "--mdc-textarea-text-color"
|
|
24449
24327
|
},
|
|
24450
24328
|
{
|
|
24451
|
-
"description": "Background color for
|
|
24452
|
-
"name": "--mdc-
|
|
24329
|
+
"description": "Background color for the textarea field",
|
|
24330
|
+
"name": "--mdc-textarea-background-color"
|
|
24453
24331
|
},
|
|
24454
24332
|
{
|
|
24455
|
-
"description": "
|
|
24456
|
-
"name": "--mdc-
|
|
24333
|
+
"description": "Border color for the textarea field",
|
|
24334
|
+
"name": "--mdc-textarea-border-color"
|
|
24457
24335
|
},
|
|
24458
24336
|
{
|
|
24459
|
-
"description": "Text
|
|
24460
|
-
"name": "--mdc-
|
|
24337
|
+
"description": "Text color for the character counter",
|
|
24338
|
+
"name": "--mdc-textarea-text-secondary-normal"
|
|
24461
24339
|
},
|
|
24462
24340
|
{
|
|
24463
|
-
"description": "
|
|
24464
|
-
"name": "--mdc-
|
|
24341
|
+
"description": "Border color for the error related help text",
|
|
24342
|
+
"name": "--mdc-textarea-error-border-color"
|
|
24465
24343
|
},
|
|
24466
24344
|
{
|
|
24467
|
-
"description": "color for
|
|
24468
|
-
"name": "--mdc-
|
|
24345
|
+
"description": "Border color for the warning related help text",
|
|
24346
|
+
"name": "--mdc-textarea-warning-border-color"
|
|
24469
24347
|
},
|
|
24470
24348
|
{
|
|
24471
|
-
"description": "
|
|
24472
|
-
"name": "--mdc-
|
|
24349
|
+
"description": "Border color for the success related help text",
|
|
24350
|
+
"name": "--mdc-textarea-success-border-color"
|
|
24473
24351
|
},
|
|
24474
24352
|
{
|
|
24475
|
-
"description": "
|
|
24476
|
-
"name": "--mdc-
|
|
24353
|
+
"description": "Border color for the priority related help text",
|
|
24354
|
+
"name": "--mdc-textarea-primary-border-color"
|
|
24477
24355
|
},
|
|
24478
24356
|
{
|
|
24479
|
-
"description": "
|
|
24480
|
-
"name": "--mdc-
|
|
24357
|
+
"description": "Background color for the textarea container when hover",
|
|
24358
|
+
"name": "--mdc-textarea-hover-background-color"
|
|
24481
24359
|
},
|
|
24482
24360
|
{
|
|
24483
|
-
"description": "
|
|
24484
|
-
"name": "--mdc-
|
|
24361
|
+
"description": "Background color for the textarea container when focused",
|
|
24362
|
+
"name": "--mdc-textarea-focused-background-color"
|
|
24485
24363
|
},
|
|
24486
24364
|
{
|
|
24487
|
-
"description": "
|
|
24488
|
-
"name": "--mdc-
|
|
24489
|
-
}
|
|
24365
|
+
"description": "Border color for the textarea container when focused",
|
|
24366
|
+
"name": "--mdc-textarea-focused-border-color"
|
|
24367
|
+
}
|
|
24368
|
+
],
|
|
24369
|
+
"members": [
|
|
24490
24370
|
{
|
|
24491
|
-
"
|
|
24492
|
-
"name": "
|
|
24371
|
+
"kind": "field",
|
|
24372
|
+
"name": "placeholder",
|
|
24373
|
+
"type": {
|
|
24374
|
+
"text": "string | undefined"
|
|
24375
|
+
},
|
|
24376
|
+
"description": "The placeholder text that is displayed when the textarea field is empty.",
|
|
24377
|
+
"attribute": "placeholder"
|
|
24493
24378
|
},
|
|
24494
24379
|
{
|
|
24495
|
-
"
|
|
24496
|
-
"name": "
|
|
24380
|
+
"kind": "field",
|
|
24381
|
+
"name": "readonly",
|
|
24382
|
+
"type": {
|
|
24383
|
+
"text": "boolean"
|
|
24384
|
+
},
|
|
24385
|
+
"default": "false",
|
|
24386
|
+
"description": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
|
|
24387
|
+
"attribute": "readonly"
|
|
24497
24388
|
},
|
|
24498
24389
|
{
|
|
24499
|
-
"
|
|
24500
|
-
"name": "
|
|
24390
|
+
"kind": "field",
|
|
24391
|
+
"name": "rows",
|
|
24392
|
+
"description": "The rows attribute specifies the visible number of lines in a text area.",
|
|
24393
|
+
"default": "5",
|
|
24394
|
+
"attribute": "rows"
|
|
24501
24395
|
},
|
|
24502
24396
|
{
|
|
24503
|
-
"
|
|
24504
|
-
"name": "
|
|
24397
|
+
"kind": "field",
|
|
24398
|
+
"name": "cols",
|
|
24399
|
+
"description": "The cols attribute specifies the visible number of lines in a text area.",
|
|
24400
|
+
"default": "40",
|
|
24401
|
+
"attribute": "cols"
|
|
24505
24402
|
},
|
|
24506
24403
|
{
|
|
24507
|
-
"
|
|
24508
|
-
"name": "
|
|
24404
|
+
"kind": "field",
|
|
24405
|
+
"name": "wrap",
|
|
24406
|
+
"type": {
|
|
24407
|
+
"text": "WrapType"
|
|
24408
|
+
},
|
|
24409
|
+
"description": "The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.",
|
|
24410
|
+
"default": "'soft'",
|
|
24411
|
+
"attribute": "wrap"
|
|
24509
24412
|
},
|
|
24510
24413
|
{
|
|
24511
|
-
"
|
|
24512
|
-
"name": "
|
|
24414
|
+
"kind": "field",
|
|
24415
|
+
"name": "autocapitalize",
|
|
24416
|
+
"type": {
|
|
24417
|
+
"text": "AutoCapitalizeType"
|
|
24418
|
+
},
|
|
24419
|
+
"description": "The autocapitalize attribute of the textarea field.",
|
|
24420
|
+
"default": "'off'",
|
|
24421
|
+
"attribute": "autocapitalize"
|
|
24513
24422
|
},
|
|
24514
24423
|
{
|
|
24515
|
-
"
|
|
24516
|
-
"name": "
|
|
24424
|
+
"kind": "field",
|
|
24425
|
+
"name": "autocomplete",
|
|
24426
|
+
"type": {
|
|
24427
|
+
"text": "AutoCompleteType"
|
|
24428
|
+
},
|
|
24429
|
+
"description": "The autocomplete attribute of the textarea field.",
|
|
24430
|
+
"default": "'off'",
|
|
24431
|
+
"attribute": "autocomplete"
|
|
24517
24432
|
},
|
|
24518
24433
|
{
|
|
24519
|
-
"
|
|
24520
|
-
"name": "
|
|
24434
|
+
"kind": "field",
|
|
24435
|
+
"name": "autofocus",
|
|
24436
|
+
"type": {
|
|
24437
|
+
"text": "boolean"
|
|
24438
|
+
},
|
|
24439
|
+
"default": "false",
|
|
24440
|
+
"description": "If true, the textarea field is focused when the component is rendered.",
|
|
24441
|
+
"attribute": "autofocus"
|
|
24521
24442
|
},
|
|
24522
24443
|
{
|
|
24523
|
-
"
|
|
24524
|
-
"name": "
|
|
24444
|
+
"kind": "field",
|
|
24445
|
+
"name": "dirname",
|
|
24446
|
+
"type": {
|
|
24447
|
+
"text": "string | undefined"
|
|
24448
|
+
},
|
|
24449
|
+
"description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
|
|
24450
|
+
"attribute": "dirname"
|
|
24525
24451
|
},
|
|
24526
24452
|
{
|
|
24527
|
-
"
|
|
24528
|
-
"name": "
|
|
24453
|
+
"kind": "field",
|
|
24454
|
+
"name": "maxlength",
|
|
24455
|
+
"type": {
|
|
24456
|
+
"text": "number | undefined"
|
|
24457
|
+
},
|
|
24458
|
+
"description": "The maximum number of characters that the textarea field can accept.",
|
|
24459
|
+
"attribute": "maxlength"
|
|
24529
24460
|
},
|
|
24530
24461
|
{
|
|
24531
|
-
"
|
|
24532
|
-
"name": "
|
|
24462
|
+
"kind": "field",
|
|
24463
|
+
"name": "minlength",
|
|
24464
|
+
"type": {
|
|
24465
|
+
"text": "number | undefined"
|
|
24466
|
+
},
|
|
24467
|
+
"description": "The minimum number of characters that the textarea field can accept.",
|
|
24468
|
+
"attribute": "minlength"
|
|
24533
24469
|
},
|
|
24534
24470
|
{
|
|
24535
|
-
"
|
|
24536
|
-
"name": "
|
|
24471
|
+
"kind": "field",
|
|
24472
|
+
"name": "maxCharacterLimit",
|
|
24473
|
+
"type": {
|
|
24474
|
+
"text": "number | undefined"
|
|
24475
|
+
},
|
|
24476
|
+
"description": "maximum character limit for the textarea field for character counter.",
|
|
24477
|
+
"attribute": "max-character-limit"
|
|
24537
24478
|
},
|
|
24538
24479
|
{
|
|
24539
|
-
"
|
|
24540
|
-
"name": "
|
|
24480
|
+
"kind": "field",
|
|
24481
|
+
"name": "characterLimitExceedingFired",
|
|
24482
|
+
"type": {
|
|
24483
|
+
"text": "boolean"
|
|
24484
|
+
},
|
|
24485
|
+
"privacy": "private",
|
|
24486
|
+
"default": "false"
|
|
24541
24487
|
},
|
|
24542
24488
|
{
|
|
24543
|
-
"
|
|
24544
|
-
"name": "
|
|
24489
|
+
"kind": "field",
|
|
24490
|
+
"name": "textarea",
|
|
24491
|
+
"type": {
|
|
24492
|
+
"text": "HTMLTextAreaElement"
|
|
24493
|
+
},
|
|
24494
|
+
"privacy": "protected",
|
|
24495
|
+
"readonly": true
|
|
24545
24496
|
},
|
|
24546
24497
|
{
|
|
24547
|
-
"
|
|
24548
|
-
"name": "
|
|
24498
|
+
"kind": "method",
|
|
24499
|
+
"name": "setTextareaValidity",
|
|
24500
|
+
"privacy": "private"
|
|
24549
24501
|
},
|
|
24550
24502
|
{
|
|
24551
|
-
"
|
|
24552
|
-
"name": "
|
|
24503
|
+
"kind": "method",
|
|
24504
|
+
"name": "handleValueChange",
|
|
24505
|
+
"description": "Handles the value change of the textarea field.\nSets the form value and updates the validity of the textarea field.",
|
|
24506
|
+
"return": {
|
|
24507
|
+
"type": {
|
|
24508
|
+
"text": ""
|
|
24509
|
+
}
|
|
24510
|
+
}
|
|
24553
24511
|
},
|
|
24554
24512
|
{
|
|
24555
|
-
"
|
|
24556
|
-
"name": "
|
|
24513
|
+
"kind": "method",
|
|
24514
|
+
"name": "dispatchCharacterOverflowStateChangeEvent",
|
|
24515
|
+
"privacy": "private",
|
|
24516
|
+
"description": "Dispatches the character overflow state change event.",
|
|
24517
|
+
"return": {
|
|
24518
|
+
"type": {
|
|
24519
|
+
"text": ""
|
|
24520
|
+
}
|
|
24521
|
+
}
|
|
24557
24522
|
},
|
|
24558
24523
|
{
|
|
24559
|
-
"
|
|
24560
|
-
"name": "
|
|
24524
|
+
"kind": "method",
|
|
24525
|
+
"name": "handleCharacterOverflowStateChange",
|
|
24526
|
+
"privacy": "private",
|
|
24527
|
+
"description": "Handles the character overflow state change.\nDispatches the character overflow state change event if the character limit is exceeded or restored.",
|
|
24528
|
+
"return": {
|
|
24529
|
+
"type": {
|
|
24530
|
+
"text": ""
|
|
24531
|
+
}
|
|
24532
|
+
}
|
|
24561
24533
|
},
|
|
24562
24534
|
{
|
|
24563
|
-
"
|
|
24564
|
-
"name": "
|
|
24535
|
+
"kind": "method",
|
|
24536
|
+
"name": "updateValue",
|
|
24537
|
+
"privacy": "private",
|
|
24538
|
+
"description": "Updates the value of the textarea field.\nSets the form value.",
|
|
24539
|
+
"return": {
|
|
24540
|
+
"type": {
|
|
24541
|
+
"text": ""
|
|
24542
|
+
}
|
|
24543
|
+
}
|
|
24565
24544
|
},
|
|
24566
24545
|
{
|
|
24567
|
-
"
|
|
24568
|
-
"name": "
|
|
24546
|
+
"kind": "method",
|
|
24547
|
+
"name": "onChange",
|
|
24548
|
+
"privacy": "private",
|
|
24549
|
+
"parameters": [
|
|
24550
|
+
{
|
|
24551
|
+
"name": "event",
|
|
24552
|
+
"type": {
|
|
24553
|
+
"text": "Event"
|
|
24554
|
+
},
|
|
24555
|
+
"description": "Event which contains information about the value change."
|
|
24556
|
+
}
|
|
24557
|
+
],
|
|
24558
|
+
"description": "Handles the change event of the textarea field.\nUpdates the value and sets the validity of the textarea field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
|
|
24569
24559
|
},
|
|
24570
24560
|
{
|
|
24571
|
-
"
|
|
24572
|
-
"name": "
|
|
24561
|
+
"kind": "method",
|
|
24562
|
+
"name": "renderCharacterCounter",
|
|
24563
|
+
"privacy": "protected"
|
|
24573
24564
|
},
|
|
24574
24565
|
{
|
|
24575
|
-
"
|
|
24576
|
-
"name": "
|
|
24566
|
+
"kind": "method",
|
|
24567
|
+
"name": "renderTextareaFooter",
|
|
24568
|
+
"privacy": "protected"
|
|
24577
24569
|
},
|
|
24578
|
-
{
|
|
24579
|
-
"description": "Text and icon color for inactive pill tab in disabled state.",
|
|
24580
|
-
"name": "--mdc-tab-pill-inactive-color-disabled"
|
|
24581
|
-
}
|
|
24582
|
-
],
|
|
24583
|
-
"members": [
|
|
24584
24570
|
{
|
|
24585
24571
|
"kind": "field",
|
|
24586
|
-
"name": "
|
|
24572
|
+
"name": "name",
|
|
24587
24573
|
"type": {
|
|
24588
|
-
"text": "
|
|
24574
|
+
"text": "string"
|
|
24589
24575
|
},
|
|
24590
|
-
"
|
|
24591
|
-
"
|
|
24592
|
-
"attribute": "
|
|
24576
|
+
"default": "''",
|
|
24577
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
|
24578
|
+
"attribute": "name",
|
|
24593
24579
|
"reflects": true,
|
|
24594
24580
|
"inheritedFrom": {
|
|
24595
|
-
"name": "
|
|
24596
|
-
"module": "
|
|
24581
|
+
"name": "FormInternalsMixin",
|
|
24582
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
24597
24583
|
}
|
|
24598
24584
|
},
|
|
24599
24585
|
{
|
|
24600
24586
|
"kind": "field",
|
|
24601
|
-
"name": "
|
|
24587
|
+
"name": "value",
|
|
24602
24588
|
"type": {
|
|
24603
|
-
"text": "string
|
|
24589
|
+
"text": "string"
|
|
24604
24590
|
},
|
|
24605
|
-
"
|
|
24606
|
-
"
|
|
24607
|
-
"
|
|
24591
|
+
"default": "''",
|
|
24592
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
24593
|
+
"attribute": "value",
|
|
24594
|
+
"reflects": true,
|
|
24595
|
+
"inheritedFrom": {
|
|
24596
|
+
"name": "FormInternalsMixin",
|
|
24597
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
24598
|
+
}
|
|
24608
24599
|
},
|
|
24609
24600
|
{
|
|
24610
24601
|
"kind": "field",
|
|
24611
|
-
"name": "
|
|
24602
|
+
"name": "validationMessage",
|
|
24612
24603
|
"type": {
|
|
24613
|
-
"text": "
|
|
24604
|
+
"text": "string | undefined"
|
|
24614
24605
|
},
|
|
24615
|
-
"description": "
|
|
24616
|
-
"
|
|
24617
|
-
"
|
|
24618
|
-
"
|
|
24606
|
+
"description": "Custom validation message that will override the default message and displayed when the input is invalid.",
|
|
24607
|
+
"attribute": "validation-message",
|
|
24608
|
+
"reflects": true,
|
|
24609
|
+
"inheritedFrom": {
|
|
24610
|
+
"name": "FormInternalsMixin",
|
|
24611
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
24612
|
+
}
|
|
24619
24613
|
},
|
|
24620
24614
|
{
|
|
24621
24615
|
"kind": "field",
|
|
24622
|
-
"name": "
|
|
24616
|
+
"name": "validity",
|
|
24623
24617
|
"type": {
|
|
24624
|
-
"text": "
|
|
24618
|
+
"text": "ValidityState"
|
|
24625
24619
|
},
|
|
24626
|
-
"
|
|
24627
|
-
"
|
|
24628
|
-
|
|
24629
|
-
|
|
24620
|
+
"readonly": true,
|
|
24621
|
+
"inheritedFrom": {
|
|
24622
|
+
"name": "FormInternalsMixin",
|
|
24623
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
24624
|
+
}
|
|
24625
|
+
},
|
|
24626
|
+
{
|
|
24627
|
+
"kind": "field",
|
|
24628
|
+
"name": "willValidate",
|
|
24629
|
+
"readonly": true,
|
|
24630
|
+
"inheritedFrom": {
|
|
24631
|
+
"name": "FormInternalsMixin",
|
|
24632
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
24633
|
+
}
|
|
24630
24634
|
},
|
|
24631
24635
|
{
|
|
24632
24636
|
"kind": "method",
|
|
24633
|
-
"name": "
|
|
24634
|
-
"
|
|
24637
|
+
"name": "setValidity",
|
|
24638
|
+
"description": "Sets the validity of the input field based on the input field's validity.",
|
|
24635
24639
|
"return": {
|
|
24636
24640
|
"type": {
|
|
24637
|
-
"text": "
|
|
24641
|
+
"text": ""
|
|
24638
24642
|
}
|
|
24639
24643
|
},
|
|
24640
|
-
"
|
|
24641
|
-
|
|
24642
|
-
|
|
24643
|
-
|
|
24644
|
-
"text": "boolean"
|
|
24645
|
-
},
|
|
24646
|
-
"description": "The active state."
|
|
24647
|
-
}
|
|
24648
|
-
],
|
|
24649
|
-
"description": "Modifies the icon name based on the active state.\nIf the tab is active, the icon name is suffixed with '-filled'.\nIf the tab is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
|
|
24644
|
+
"inheritedFrom": {
|
|
24645
|
+
"name": "FormInternalsMixin",
|
|
24646
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
24647
|
+
}
|
|
24650
24648
|
},
|
|
24651
24649
|
{
|
|
24652
24650
|
"kind": "method",
|
|
24653
|
-
"name": "
|
|
24654
|
-
"privacy": "private",
|
|
24651
|
+
"name": "checkValidity",
|
|
24655
24652
|
"return": {
|
|
24656
24653
|
"type": {
|
|
24657
|
-
"text": "
|
|
24654
|
+
"text": "boolean"
|
|
24658
24655
|
}
|
|
24659
24656
|
},
|
|
24660
|
-
"parameters": [
|
|
24661
|
-
{
|
|
24662
|
-
"name": "variant",
|
|
24663
|
-
"type": {
|
|
24664
|
-
"text": "Variant"
|
|
24665
|
-
},
|
|
24666
|
-
"description": "The variant to set."
|
|
24667
|
-
}
|
|
24668
|
-
],
|
|
24669
|
-
"description": "Sets the variant attribute for the tab component.\nIf the provided variant is not included in the TAB_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
|
|
24670
|
-
},
|
|
24671
|
-
{
|
|
24672
|
-
"kind": "field",
|
|
24673
|
-
"name": "handleTabActiveChange",
|
|
24674
|
-
"privacy": "private",
|
|
24675
|
-
"description": "Dispatch the activechange event.",
|
|
24676
|
-
"parameters": [
|
|
24677
|
-
{
|
|
24678
|
-
"description": "The active state of the tab.",
|
|
24679
|
-
"name": "active"
|
|
24680
|
-
}
|
|
24681
|
-
]
|
|
24682
|
-
},
|
|
24683
|
-
{
|
|
24684
|
-
"kind": "method",
|
|
24685
|
-
"name": "setActive",
|
|
24686
|
-
"privacy": "protected",
|
|
24687
|
-
"parameters": [
|
|
24688
|
-
{
|
|
24689
|
-
"name": "element",
|
|
24690
|
-
"type": {
|
|
24691
|
-
"text": "HTMLElement"
|
|
24692
|
-
},
|
|
24693
|
-
"description": "The tab element."
|
|
24694
|
-
},
|
|
24695
|
-
{
|
|
24696
|
-
"name": "active",
|
|
24697
|
-
"type": {
|
|
24698
|
-
"text": "boolean"
|
|
24699
|
-
},
|
|
24700
|
-
"description": "The active state of the tab."
|
|
24701
|
-
}
|
|
24702
|
-
],
|
|
24703
|
-
"description": "Sets the aria-selected attribute based on the active state of the Tab.\nIf the tab is active, the filled version of the icon is displayed,\nelse the icon is restored to its original value.",
|
|
24704
24657
|
"inheritedFrom": {
|
|
24705
|
-
"name": "
|
|
24706
|
-
"module": "
|
|
24658
|
+
"name": "FormInternalsMixin",
|
|
24659
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
24707
24660
|
}
|
|
24708
24661
|
},
|
|
24709
24662
|
{
|
|
24710
24663
|
"kind": "method",
|
|
24711
|
-
"name": "
|
|
24712
|
-
"privacy": "protected",
|
|
24713
|
-
"inheritedFrom": {
|
|
24714
|
-
"name": "Buttonsimple",
|
|
24715
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
24716
|
-
}
|
|
24717
|
-
},
|
|
24718
|
-
{
|
|
24719
|
-
"kind": "field",
|
|
24720
|
-
"name": "iconName",
|
|
24721
|
-
"type": {
|
|
24722
|
-
"text": "IconNames | undefined"
|
|
24723
|
-
},
|
|
24724
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
24725
|
-
"attribute": "icon-name",
|
|
24664
|
+
"name": "reportValidity",
|
|
24726
24665
|
"inheritedFrom": {
|
|
24727
|
-
"name": "
|
|
24728
|
-
"module": "utils/mixins/
|
|
24666
|
+
"name": "FormInternalsMixin",
|
|
24667
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
|
24729
24668
|
}
|
|
24730
24669
|
},
|
|
24731
24670
|
{
|
|
24732
24671
|
"kind": "field",
|
|
24733
|
-
"name": "
|
|
24672
|
+
"name": "dataAriaLabel",
|
|
24734
24673
|
"type": {
|
|
24735
|
-
"text": "
|
|
24674
|
+
"text": "string | null"
|
|
24736
24675
|
},
|
|
24737
|
-
"default": "
|
|
24738
|
-
"description": "
|
|
24739
|
-
"attribute": "
|
|
24676
|
+
"default": "null",
|
|
24677
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
24678
|
+
"attribute": "data-aria-label",
|
|
24740
24679
|
"reflects": true,
|
|
24741
24680
|
"inheritedFrom": {
|
|
24742
|
-
"name": "
|
|
24743
|
-
"module": "
|
|
24681
|
+
"name": "DataAriaLabelMixin",
|
|
24682
|
+
"module": "utils/mixins/DataAriaLabelMixin.js"
|
|
24744
24683
|
}
|
|
24745
24684
|
},
|
|
24746
24685
|
{
|
|
@@ -24753,300 +24692,348 @@
|
|
|
24753
24692
|
"default": "undefined",
|
|
24754
24693
|
"attribute": "disabled",
|
|
24755
24694
|
"reflects": true,
|
|
24756
|
-
"inheritedFrom": {
|
|
24757
|
-
"name": "
|
|
24758
|
-
"module": "components/
|
|
24695
|
+
"inheritedFrom": {
|
|
24696
|
+
"name": "FormfieldWrapper",
|
|
24697
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
24759
24698
|
}
|
|
24760
24699
|
},
|
|
24761
24700
|
{
|
|
24762
24701
|
"kind": "field",
|
|
24763
|
-
"name": "
|
|
24702
|
+
"name": "label",
|
|
24764
24703
|
"type": {
|
|
24765
|
-
"text": "
|
|
24704
|
+
"text": "string | undefined"
|
|
24766
24705
|
},
|
|
24767
|
-
"description": "
|
|
24768
|
-
"
|
|
24769
|
-
"attribute": "soft-disabled",
|
|
24706
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
24707
|
+
"attribute": "label",
|
|
24770
24708
|
"reflects": true,
|
|
24771
24709
|
"inheritedFrom": {
|
|
24772
|
-
"name": "
|
|
24773
|
-
"module": "components/
|
|
24710
|
+
"name": "FormfieldWrapper",
|
|
24711
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
24774
24712
|
}
|
|
24775
24713
|
},
|
|
24776
24714
|
{
|
|
24777
24715
|
"kind": "field",
|
|
24778
|
-
"name": "
|
|
24716
|
+
"name": "requiredLabel",
|
|
24779
24717
|
"type": {
|
|
24780
|
-
"text": "
|
|
24718
|
+
"text": "string | undefined"
|
|
24781
24719
|
},
|
|
24782
|
-
"description": "
|
|
24783
|
-
"
|
|
24784
|
-
"attribute": "size",
|
|
24720
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
24721
|
+
"attribute": "required-label",
|
|
24785
24722
|
"reflects": true,
|
|
24786
24723
|
"inheritedFrom": {
|
|
24787
|
-
"name": "
|
|
24788
|
-
"module": "components/
|
|
24724
|
+
"name": "FormfieldWrapper",
|
|
24725
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
24789
24726
|
}
|
|
24790
24727
|
},
|
|
24791
24728
|
{
|
|
24792
24729
|
"kind": "field",
|
|
24793
|
-
"name": "
|
|
24794
|
-
"
|
|
24795
|
-
|
|
24796
|
-
|
|
24797
|
-
"
|
|
24730
|
+
"name": "id",
|
|
24731
|
+
"type": {
|
|
24732
|
+
"text": "string"
|
|
24733
|
+
},
|
|
24734
|
+
"default": "''",
|
|
24735
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
|
24736
|
+
"attribute": "id",
|
|
24798
24737
|
"inheritedFrom": {
|
|
24799
|
-
"name": "
|
|
24800
|
-
"module": "components/
|
|
24738
|
+
"name": "FormfieldWrapper",
|
|
24739
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
24801
24740
|
}
|
|
24802
24741
|
},
|
|
24803
24742
|
{
|
|
24804
24743
|
"kind": "field",
|
|
24805
|
-
"name": "
|
|
24744
|
+
"name": "helpTextType",
|
|
24806
24745
|
"type": {
|
|
24807
|
-
"text": "
|
|
24746
|
+
"text": "ValidationType"
|
|
24808
24747
|
},
|
|
24809
|
-
"description": "
|
|
24810
|
-
"
|
|
24811
|
-
"attribute": "ariaStateKey",
|
|
24748
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
24749
|
+
"attribute": "help-text-type",
|
|
24812
24750
|
"reflects": true,
|
|
24813
24751
|
"inheritedFrom": {
|
|
24814
|
-
"name": "
|
|
24815
|
-
"module": "components/
|
|
24752
|
+
"name": "FormfieldWrapper",
|
|
24753
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
24816
24754
|
}
|
|
24817
24755
|
},
|
|
24818
24756
|
{
|
|
24819
24757
|
"kind": "field",
|
|
24820
|
-
"name": "
|
|
24758
|
+
"name": "helpText",
|
|
24821
24759
|
"type": {
|
|
24822
|
-
"text": "
|
|
24760
|
+
"text": "string | undefined"
|
|
24823
24761
|
},
|
|
24824
|
-
"description": "
|
|
24825
|
-
"
|
|
24826
|
-
"attribute": "type",
|
|
24762
|
+
"description": "The help text that is displayed below the input field.",
|
|
24763
|
+
"attribute": "help-text",
|
|
24827
24764
|
"reflects": true,
|
|
24828
24765
|
"inheritedFrom": {
|
|
24829
|
-
"name": "
|
|
24830
|
-
"module": "components/
|
|
24766
|
+
"name": "FormfieldWrapper",
|
|
24767
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
24831
24768
|
}
|
|
24832
24769
|
},
|
|
24833
24770
|
{
|
|
24834
24771
|
"kind": "method",
|
|
24835
|
-
"name": "
|
|
24836
|
-
"privacy": "
|
|
24837
|
-
"
|
|
24838
|
-
|
|
24839
|
-
|
|
24840
|
-
"
|
|
24841
|
-
"text": "HTMLElement"
|
|
24842
|
-
},
|
|
24843
|
-
"description": "The button element."
|
|
24844
|
-
},
|
|
24845
|
-
{
|
|
24846
|
-
"name": "softDisabled",
|
|
24847
|
-
"optional": true,
|
|
24848
|
-
"type": {
|
|
24849
|
-
"text": "boolean"
|
|
24850
|
-
},
|
|
24851
|
-
"description": "The soft-disabled state."
|
|
24772
|
+
"name": "renderLabelElement",
|
|
24773
|
+
"privacy": "protected",
|
|
24774
|
+
"description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
|
|
24775
|
+
"return": {
|
|
24776
|
+
"type": {
|
|
24777
|
+
"text": ""
|
|
24852
24778
|
}
|
|
24853
|
-
|
|
24854
|
-
"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.",
|
|
24779
|
+
},
|
|
24855
24780
|
"inheritedFrom": {
|
|
24856
|
-
"name": "
|
|
24857
|
-
"module": "components/
|
|
24781
|
+
"name": "FormfieldWrapper",
|
|
24782
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
24858
24783
|
}
|
|
24859
24784
|
},
|
|
24860
24785
|
{
|
|
24861
24786
|
"kind": "method",
|
|
24862
|
-
"name": "
|
|
24863
|
-
"privacy": "
|
|
24864
|
-
"parameters": [
|
|
24865
|
-
{
|
|
24866
|
-
"name": "element",
|
|
24867
|
-
"type": {
|
|
24868
|
-
"text": "HTMLElement"
|
|
24869
|
-
},
|
|
24870
|
-
"description": "The button element."
|
|
24871
|
-
},
|
|
24872
|
-
{
|
|
24873
|
-
"name": "disabled",
|
|
24874
|
-
"type": {
|
|
24875
|
-
"text": "boolean"
|
|
24876
|
-
},
|
|
24877
|
-
"description": "The disabled state."
|
|
24878
|
-
}
|
|
24879
|
-
],
|
|
24880
|
-
"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.",
|
|
24787
|
+
"name": "renderRequiredLabel",
|
|
24788
|
+
"privacy": "protected",
|
|
24881
24789
|
"inheritedFrom": {
|
|
24882
|
-
"name": "
|
|
24883
|
-
"module": "components/
|
|
24790
|
+
"name": "FormfieldWrapper",
|
|
24791
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
24884
24792
|
}
|
|
24885
24793
|
},
|
|
24886
24794
|
{
|
|
24887
24795
|
"kind": "method",
|
|
24888
|
-
"name": "
|
|
24889
|
-
"privacy": "
|
|
24796
|
+
"name": "renderHelpTextIcon",
|
|
24797
|
+
"privacy": "protected",
|
|
24798
|
+
"description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
|
|
24799
|
+
"return": {
|
|
24800
|
+
"type": {
|
|
24801
|
+
"text": ""
|
|
24802
|
+
}
|
|
24803
|
+
},
|
|
24890
24804
|
"inheritedFrom": {
|
|
24891
|
-
"name": "
|
|
24892
|
-
"module": "components/
|
|
24805
|
+
"name": "FormfieldWrapper",
|
|
24806
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
24893
24807
|
}
|
|
24894
24808
|
},
|
|
24895
24809
|
{
|
|
24896
24810
|
"kind": "method",
|
|
24897
|
-
"name": "
|
|
24898
|
-
"privacy": "
|
|
24899
|
-
"description": "
|
|
24811
|
+
"name": "renderHelpText",
|
|
24812
|
+
"privacy": "protected",
|
|
24813
|
+
"description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
|
|
24814
|
+
"return": {
|
|
24815
|
+
"type": {
|
|
24816
|
+
"text": ""
|
|
24817
|
+
}
|
|
24818
|
+
},
|
|
24900
24819
|
"inheritedFrom": {
|
|
24901
|
-
"name": "
|
|
24902
|
-
"module": "components/
|
|
24820
|
+
"name": "FormfieldWrapper",
|
|
24821
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
24903
24822
|
}
|
|
24904
24823
|
},
|
|
24905
24824
|
{
|
|
24906
24825
|
"kind": "method",
|
|
24907
|
-
"name": "
|
|
24908
|
-
"privacy": "
|
|
24909
|
-
"
|
|
24910
|
-
|
|
24911
|
-
|
|
24912
|
-
"
|
|
24913
|
-
"text": "KeyboardEvent"
|
|
24914
|
-
},
|
|
24915
|
-
"description": "The keyboard event."
|
|
24826
|
+
"name": "renderLabel",
|
|
24827
|
+
"privacy": "protected",
|
|
24828
|
+
"description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
|
|
24829
|
+
"return": {
|
|
24830
|
+
"type": {
|
|
24831
|
+
"text": ""
|
|
24916
24832
|
}
|
|
24917
|
-
|
|
24918
|
-
"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.",
|
|
24833
|
+
},
|
|
24919
24834
|
"inheritedFrom": {
|
|
24920
|
-
"name": "
|
|
24921
|
-
"module": "components/
|
|
24835
|
+
"name": "FormfieldWrapper",
|
|
24836
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
24922
24837
|
}
|
|
24923
24838
|
},
|
|
24924
24839
|
{
|
|
24925
24840
|
"kind": "method",
|
|
24926
|
-
"name": "
|
|
24927
|
-
"privacy": "
|
|
24928
|
-
"
|
|
24929
|
-
|
|
24930
|
-
|
|
24931
|
-
"
|
|
24932
|
-
"text": "KeyboardEvent"
|
|
24933
|
-
},
|
|
24934
|
-
"description": "The keyboard event."
|
|
24841
|
+
"name": "renderHelperText",
|
|
24842
|
+
"privacy": "protected",
|
|
24843
|
+
"description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
|
|
24844
|
+
"return": {
|
|
24845
|
+
"type": {
|
|
24846
|
+
"text": ""
|
|
24935
24847
|
}
|
|
24936
|
-
|
|
24937
|
-
"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.",
|
|
24848
|
+
},
|
|
24938
24849
|
"inheritedFrom": {
|
|
24939
|
-
"name": "
|
|
24940
|
-
"module": "components/
|
|
24850
|
+
"name": "FormfieldWrapper",
|
|
24851
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
24941
24852
|
}
|
|
24942
24853
|
}
|
|
24943
24854
|
],
|
|
24944
24855
|
"events": [
|
|
24945
24856
|
{
|
|
24946
|
-
"
|
|
24947
|
-
"
|
|
24948
|
-
|
|
24949
|
-
|
|
24950
|
-
|
|
24951
|
-
|
|
24857
|
+
"name": "limitexceeded",
|
|
24858
|
+
"type": {
|
|
24859
|
+
"text": "CustomEvent"
|
|
24860
|
+
},
|
|
24861
|
+
"description": "(React: onLimitExceeded) This event is dispatched once when the character limit exceeds or restored.",
|
|
24862
|
+
"reactName": "onLimitExceeded"
|
|
24863
|
+
},
|
|
24864
|
+
{
|
|
24865
|
+
"type": {
|
|
24866
|
+
"text": "EventConstructor"
|
|
24952
24867
|
}
|
|
24953
24868
|
},
|
|
24954
24869
|
{
|
|
24955
|
-
"description": "(React:
|
|
24956
|
-
"name": "
|
|
24957
|
-
"reactName": "
|
|
24958
|
-
|
|
24959
|
-
|
|
24960
|
-
|
|
24961
|
-
|
|
24870
|
+
"description": "(React: onInput) This event is dispatched when the value of the textarea field changes (every press).",
|
|
24871
|
+
"name": "input",
|
|
24872
|
+
"reactName": "onInput"
|
|
24873
|
+
},
|
|
24874
|
+
{
|
|
24875
|
+
"description": "(React: onChange) This event is dispatched when the value of the textarea field changes (on blur).",
|
|
24876
|
+
"name": "change",
|
|
24877
|
+
"reactName": "onChange"
|
|
24878
|
+
},
|
|
24879
|
+
{
|
|
24880
|
+
"description": "(React: onFocus) This event is dispatched when the textarea receives focus.",
|
|
24881
|
+
"name": "focus",
|
|
24882
|
+
"reactName": "onFocus"
|
|
24883
|
+
},
|
|
24884
|
+
{
|
|
24885
|
+
"description": "(React: onBlur) This event is dispatched when the textarea loses focus.",
|
|
24886
|
+
"name": "blur",
|
|
24887
|
+
"reactName": "onBlur"
|
|
24888
|
+
}
|
|
24889
|
+
],
|
|
24890
|
+
"attributes": [
|
|
24891
|
+
{
|
|
24892
|
+
"name": "placeholder",
|
|
24893
|
+
"type": {
|
|
24894
|
+
"text": "string | undefined"
|
|
24895
|
+
},
|
|
24896
|
+
"description": "The placeholder text that is displayed when the textarea field is empty.",
|
|
24897
|
+
"fieldName": "placeholder"
|
|
24898
|
+
},
|
|
24899
|
+
{
|
|
24900
|
+
"name": "readonly",
|
|
24901
|
+
"type": {
|
|
24902
|
+
"text": "boolean"
|
|
24903
|
+
},
|
|
24904
|
+
"default": "false",
|
|
24905
|
+
"description": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
|
|
24906
|
+
"fieldName": "readonly"
|
|
24907
|
+
},
|
|
24908
|
+
{
|
|
24909
|
+
"name": "rows",
|
|
24910
|
+
"description": "The rows attribute specifies the visible number of lines in a text area.",
|
|
24911
|
+
"default": "5",
|
|
24912
|
+
"fieldName": "rows"
|
|
24913
|
+
},
|
|
24914
|
+
{
|
|
24915
|
+
"name": "cols",
|
|
24916
|
+
"description": "The cols attribute specifies the visible number of lines in a text area.",
|
|
24917
|
+
"default": "40",
|
|
24918
|
+
"fieldName": "cols"
|
|
24962
24919
|
},
|
|
24963
24920
|
{
|
|
24964
|
-
"
|
|
24965
|
-
"
|
|
24966
|
-
|
|
24967
|
-
|
|
24968
|
-
|
|
24969
|
-
|
|
24970
|
-
|
|
24921
|
+
"name": "wrap",
|
|
24922
|
+
"type": {
|
|
24923
|
+
"text": "WrapType"
|
|
24924
|
+
},
|
|
24925
|
+
"description": "The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.",
|
|
24926
|
+
"default": "'soft'",
|
|
24927
|
+
"fieldName": "wrap"
|
|
24971
24928
|
},
|
|
24972
24929
|
{
|
|
24973
|
-
"
|
|
24974
|
-
"
|
|
24975
|
-
|
|
24976
|
-
|
|
24977
|
-
|
|
24978
|
-
|
|
24979
|
-
|
|
24930
|
+
"name": "autocapitalize",
|
|
24931
|
+
"type": {
|
|
24932
|
+
"text": "AutoCapitalizeType"
|
|
24933
|
+
},
|
|
24934
|
+
"description": "The autocapitalize attribute of the textarea field.",
|
|
24935
|
+
"default": "'off'",
|
|
24936
|
+
"fieldName": "autocapitalize"
|
|
24980
24937
|
},
|
|
24981
24938
|
{
|
|
24982
|
-
"
|
|
24983
|
-
"
|
|
24984
|
-
|
|
24985
|
-
|
|
24986
|
-
|
|
24987
|
-
|
|
24939
|
+
"name": "autocomplete",
|
|
24940
|
+
"type": {
|
|
24941
|
+
"text": "AutoCompleteType"
|
|
24942
|
+
},
|
|
24943
|
+
"description": "The autocomplete attribute of the textarea field.",
|
|
24944
|
+
"default": "'off'",
|
|
24945
|
+
"fieldName": "autocomplete"
|
|
24946
|
+
},
|
|
24988
24947
|
{
|
|
24989
|
-
"name": "
|
|
24948
|
+
"name": "autofocus",
|
|
24990
24949
|
"type": {
|
|
24991
|
-
"text": "boolean
|
|
24950
|
+
"text": "boolean"
|
|
24992
24951
|
},
|
|
24993
|
-
"description": "The tab's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the tab is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.\n\nThis attribute also controls the \"aria-selected\" attribute of the tab.\nWhen the tab is active, \"aria-selected\" is set to true, indicating that the tab is selected.\nWhen the tab is inactive, \"aria-selected\" is set to false, indicating that the tab is not selected.",
|
|
24994
24952
|
"default": "false",
|
|
24995
|
-
"
|
|
24996
|
-
"
|
|
24997
|
-
"name": "Buttonsimple",
|
|
24998
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
24999
|
-
}
|
|
24953
|
+
"description": "If true, the textarea field is focused when the component is rendered.",
|
|
24954
|
+
"fieldName": "autofocus"
|
|
25000
24955
|
},
|
|
25001
24956
|
{
|
|
25002
|
-
"name": "
|
|
24957
|
+
"name": "dirname",
|
|
25003
24958
|
"type": {
|
|
25004
24959
|
"text": "string | undefined"
|
|
25005
24960
|
},
|
|
25006
|
-
"description": "
|
|
25007
|
-
"fieldName": "
|
|
24961
|
+
"description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
|
|
24962
|
+
"fieldName": "dirname"
|
|
25008
24963
|
},
|
|
25009
24964
|
{
|
|
25010
|
-
"name": "
|
|
24965
|
+
"name": "maxlength",
|
|
25011
24966
|
"type": {
|
|
25012
|
-
"text": "
|
|
24967
|
+
"text": "number | undefined"
|
|
25013
24968
|
},
|
|
25014
|
-
"description": "
|
|
25015
|
-
"
|
|
25016
|
-
"fieldName": "variant"
|
|
24969
|
+
"description": "The maximum number of characters that the textarea field can accept.",
|
|
24970
|
+
"fieldName": "maxlength"
|
|
25017
24971
|
},
|
|
25018
24972
|
{
|
|
25019
|
-
"name": "
|
|
24973
|
+
"name": "minlength",
|
|
25020
24974
|
"type": {
|
|
25021
|
-
"text": "
|
|
24975
|
+
"text": "number | undefined"
|
|
25022
24976
|
},
|
|
25023
|
-
"description": "
|
|
25024
|
-
"
|
|
25025
|
-
"fieldName": "tabId"
|
|
24977
|
+
"description": "The minimum number of characters that the textarea field can accept.",
|
|
24978
|
+
"fieldName": "minlength"
|
|
25026
24979
|
},
|
|
25027
24980
|
{
|
|
25028
|
-
"name": "
|
|
24981
|
+
"name": "max-character-limit",
|
|
25029
24982
|
"type": {
|
|
25030
|
-
"text": "
|
|
24983
|
+
"text": "number | undefined"
|
|
25031
24984
|
},
|
|
25032
|
-
"description": "
|
|
25033
|
-
"fieldName": "
|
|
24985
|
+
"description": "maximum character limit for the textarea field for character counter.",
|
|
24986
|
+
"fieldName": "maxCharacterLimit"
|
|
24987
|
+
},
|
|
24988
|
+
{
|
|
24989
|
+
"name": "name",
|
|
24990
|
+
"type": {
|
|
24991
|
+
"text": "string"
|
|
24992
|
+
},
|
|
24993
|
+
"default": "''",
|
|
24994
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
|
24995
|
+
"fieldName": "name",
|
|
25034
24996
|
"inheritedFrom": {
|
|
25035
|
-
"name": "
|
|
25036
|
-
"module": "src/utils/mixins/
|
|
24997
|
+
"name": "FormInternalsMixin",
|
|
24998
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
25037
24999
|
}
|
|
25038
25000
|
},
|
|
25039
25001
|
{
|
|
25040
|
-
"name": "
|
|
25002
|
+
"name": "value",
|
|
25041
25003
|
"type": {
|
|
25042
|
-
"text": "
|
|
25004
|
+
"text": "string"
|
|
25043
25005
|
},
|
|
25044
|
-
"default": "
|
|
25045
|
-
"description": "
|
|
25046
|
-
"fieldName": "
|
|
25006
|
+
"default": "''",
|
|
25007
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
25008
|
+
"fieldName": "value",
|
|
25047
25009
|
"inheritedFrom": {
|
|
25048
|
-
"name": "
|
|
25049
|
-
"module": "src/
|
|
25010
|
+
"name": "FormInternalsMixin",
|
|
25011
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
25012
|
+
}
|
|
25013
|
+
},
|
|
25014
|
+
{
|
|
25015
|
+
"name": "validation-message",
|
|
25016
|
+
"type": {
|
|
25017
|
+
"text": "string | undefined"
|
|
25018
|
+
},
|
|
25019
|
+
"description": "Custom validation message that will override the default message and displayed when the input is invalid.",
|
|
25020
|
+
"fieldName": "validationMessage",
|
|
25021
|
+
"inheritedFrom": {
|
|
25022
|
+
"name": "FormInternalsMixin",
|
|
25023
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
|
25024
|
+
}
|
|
25025
|
+
},
|
|
25026
|
+
{
|
|
25027
|
+
"name": "data-aria-label",
|
|
25028
|
+
"type": {
|
|
25029
|
+
"text": "string | null"
|
|
25030
|
+
},
|
|
25031
|
+
"default": "null",
|
|
25032
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
25033
|
+
"fieldName": "dataAriaLabel",
|
|
25034
|
+
"inheritedFrom": {
|
|
25035
|
+
"name": "DataAriaLabelMixin",
|
|
25036
|
+
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
25050
25037
|
}
|
|
25051
25038
|
},
|
|
25052
25039
|
{
|
|
@@ -25058,86 +25045,99 @@
|
|
|
25058
25045
|
"default": "undefined",
|
|
25059
25046
|
"fieldName": "disabled",
|
|
25060
25047
|
"inheritedFrom": {
|
|
25061
|
-
"name": "
|
|
25062
|
-
"module": "src/components/
|
|
25048
|
+
"name": "FormfieldWrapper",
|
|
25049
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
25063
25050
|
}
|
|
25064
25051
|
},
|
|
25065
25052
|
{
|
|
25066
|
-
"name": "
|
|
25053
|
+
"name": "label",
|
|
25067
25054
|
"type": {
|
|
25068
|
-
"text": "
|
|
25055
|
+
"text": "string | undefined"
|
|
25069
25056
|
},
|
|
25070
|
-
"description": "
|
|
25071
|
-
"
|
|
25072
|
-
"fieldName": "softDisabled",
|
|
25057
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
25058
|
+
"fieldName": "label",
|
|
25073
25059
|
"inheritedFrom": {
|
|
25074
|
-
"name": "
|
|
25075
|
-
"module": "src/components/
|
|
25060
|
+
"name": "FormfieldWrapper",
|
|
25061
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
25076
25062
|
}
|
|
25077
25063
|
},
|
|
25078
25064
|
{
|
|
25079
|
-
"name": "
|
|
25065
|
+
"name": "required-label",
|
|
25080
25066
|
"type": {
|
|
25081
|
-
"text": "
|
|
25067
|
+
"text": "string | undefined"
|
|
25082
25068
|
},
|
|
25083
|
-
"description": "
|
|
25084
|
-
"
|
|
25085
|
-
"fieldName": "size",
|
|
25069
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
|
25070
|
+
"fieldName": "requiredLabel",
|
|
25086
25071
|
"inheritedFrom": {
|
|
25087
|
-
"name": "
|
|
25088
|
-
"module": "src/components/
|
|
25072
|
+
"name": "FormfieldWrapper",
|
|
25073
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
25089
25074
|
}
|
|
25090
25075
|
},
|
|
25091
25076
|
{
|
|
25092
|
-
"name": "
|
|
25093
|
-
"
|
|
25094
|
-
|
|
25095
|
-
|
|
25077
|
+
"name": "id",
|
|
25078
|
+
"type": {
|
|
25079
|
+
"text": "string"
|
|
25080
|
+
},
|
|
25081
|
+
"default": "''",
|
|
25082
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
|
25083
|
+
"fieldName": "id",
|
|
25096
25084
|
"inheritedFrom": {
|
|
25097
|
-
"name": "
|
|
25098
|
-
"module": "src/components/
|
|
25085
|
+
"name": "FormfieldWrapper",
|
|
25086
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
25099
25087
|
}
|
|
25100
25088
|
},
|
|
25101
25089
|
{
|
|
25102
|
-
"name": "
|
|
25090
|
+
"name": "help-text-type",
|
|
25103
25091
|
"type": {
|
|
25104
|
-
"text": "
|
|
25092
|
+
"text": "ValidationType"
|
|
25105
25093
|
},
|
|
25106
|
-
"description": "
|
|
25107
|
-
"
|
|
25108
|
-
"fieldName": "ariaStateKey",
|
|
25094
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
25095
|
+
"fieldName": "helpTextType",
|
|
25109
25096
|
"inheritedFrom": {
|
|
25110
|
-
"name": "
|
|
25111
|
-
"module": "src/components/
|
|
25097
|
+
"name": "FormfieldWrapper",
|
|
25098
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
25112
25099
|
}
|
|
25113
25100
|
},
|
|
25114
25101
|
{
|
|
25115
|
-
"name": "
|
|
25102
|
+
"name": "help-text",
|
|
25116
25103
|
"type": {
|
|
25117
|
-
"text": "
|
|
25104
|
+
"text": "string | undefined"
|
|
25118
25105
|
},
|
|
25119
|
-
"description": "
|
|
25120
|
-
"
|
|
25121
|
-
"fieldName": "type",
|
|
25106
|
+
"description": "The help text that is displayed below the input field.",
|
|
25107
|
+
"fieldName": "helpText",
|
|
25122
25108
|
"inheritedFrom": {
|
|
25123
|
-
"name": "
|
|
25124
|
-
"module": "src/components/
|
|
25109
|
+
"name": "FormfieldWrapper",
|
|
25110
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
25125
25111
|
}
|
|
25126
25112
|
}
|
|
25127
25113
|
],
|
|
25128
25114
|
"mixins": [
|
|
25129
25115
|
{
|
|
25130
|
-
"name": "
|
|
25131
|
-
"module": "/src/utils/mixins/
|
|
25116
|
+
"name": "FormInternalsMixin",
|
|
25117
|
+
"module": "/src/utils/mixins/FormInternalsMixin"
|
|
25118
|
+
},
|
|
25119
|
+
{
|
|
25120
|
+
"name": "DataAriaLabelMixin",
|
|
25121
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
25132
25122
|
}
|
|
25133
25123
|
],
|
|
25134
25124
|
"superclass": {
|
|
25135
|
-
"name": "
|
|
25136
|
-
"module": "/src/components/
|
|
25125
|
+
"name": "FormfieldWrapper",
|
|
25126
|
+
"module": "/src/components/formfieldwrapper"
|
|
25137
25127
|
},
|
|
25138
|
-
"tagName": "mdc-
|
|
25139
|
-
"jsDoc": "/**\n *
|
|
25140
|
-
"customElement": true
|
|
25128
|
+
"tagName": "mdc-textarea",
|
|
25129
|
+
"jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required-label: A string depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n * about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n * This event exposes 3 properties:\n * - currentCharacterCount - the current number of characters in the textarea field,\n * - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n * - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n */",
|
|
25130
|
+
"customElement": true,
|
|
25131
|
+
"slots": [
|
|
25132
|
+
{
|
|
25133
|
+
"description": "slot to add the label info icon",
|
|
25134
|
+
"name": "label-info",
|
|
25135
|
+
"inheritedFrom": {
|
|
25136
|
+
"name": "FormfieldWrapper",
|
|
25137
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
25138
|
+
}
|
|
25139
|
+
}
|
|
25140
|
+
]
|
|
25141
25141
|
}
|
|
25142
25142
|
],
|
|
25143
25143
|
"exports": [
|
|
@@ -25145,8 +25145,8 @@
|
|
|
25145
25145
|
"kind": "js",
|
|
25146
25146
|
"name": "default",
|
|
25147
25147
|
"declaration": {
|
|
25148
|
-
"name": "
|
|
25149
|
-
"module": "components/
|
|
25148
|
+
"name": "Textarea",
|
|
25149
|
+
"module": "components/textarea/textarea.component.js"
|
|
25150
25150
|
}
|
|
25151
25151
|
}
|
|
25152
25152
|
]
|