@momentum-design/components 0.95.2 → 0.95.3
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.
|
@@ -2,218 +2,6 @@
|
|
|
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
|
-
},
|
|
217
5
|
{
|
|
218
6
|
"kind": "javascript-module",
|
|
219
7
|
"path": "components/alertchip/alertchip.component.js",
|
|
@@ -744,32 +532,244 @@
|
|
|
744
532
|
},
|
|
745
533
|
{
|
|
746
534
|
"kind": "javascript-module",
|
|
747
|
-
"path": "components/
|
|
535
|
+
"path": "components/animation/animation.component.js",
|
|
748
536
|
"declarations": [
|
|
749
537
|
{
|
|
750
538
|
"kind": "class",
|
|
751
|
-
"description": "The `mdc-
|
|
752
|
-
"name": "
|
|
753
|
-
"
|
|
539
|
+
"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.",
|
|
540
|
+
"name": "Animation",
|
|
541
|
+
"members": [
|
|
754
542
|
{
|
|
755
|
-
"
|
|
756
|
-
"name": "
|
|
543
|
+
"kind": "field",
|
|
544
|
+
"name": "name",
|
|
545
|
+
"type": {
|
|
546
|
+
"text": "AnimationNames | undefined"
|
|
547
|
+
},
|
|
548
|
+
"description": "Name of the animation (= filename)",
|
|
549
|
+
"attribute": "name",
|
|
550
|
+
"reflects": true
|
|
757
551
|
},
|
|
758
552
|
{
|
|
759
|
-
"
|
|
760
|
-
"name": "
|
|
553
|
+
"kind": "field",
|
|
554
|
+
"name": "loop",
|
|
555
|
+
"type": {
|
|
556
|
+
"text": "LoopType | undefined"
|
|
557
|
+
},
|
|
558
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
559
|
+
"attribute": "loop",
|
|
560
|
+
"reflects": true
|
|
761
561
|
},
|
|
762
562
|
{
|
|
763
|
-
"
|
|
764
|
-
"name": "
|
|
563
|
+
"kind": "field",
|
|
564
|
+
"name": "autoplay",
|
|
565
|
+
"type": {
|
|
566
|
+
"text": "boolean | undefined"
|
|
567
|
+
},
|
|
568
|
+
"description": "Weather start the animation automatically",
|
|
569
|
+
"attribute": "autoplay",
|
|
570
|
+
"reflects": true
|
|
765
571
|
},
|
|
766
572
|
{
|
|
767
|
-
"
|
|
768
|
-
"name": "
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
573
|
+
"kind": "field",
|
|
574
|
+
"name": "ariaLabel",
|
|
575
|
+
"type": {
|
|
576
|
+
"text": "string | null"
|
|
577
|
+
},
|
|
578
|
+
"default": "null",
|
|
579
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
580
|
+
"attribute": "aria-label"
|
|
581
|
+
},
|
|
582
|
+
{
|
|
583
|
+
"kind": "field",
|
|
584
|
+
"name": "ariaLabelledBy",
|
|
585
|
+
"type": {
|
|
586
|
+
"text": "string | null"
|
|
587
|
+
},
|
|
588
|
+
"default": "null",
|
|
589
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
590
|
+
"attribute": "aria-labelledby"
|
|
591
|
+
},
|
|
592
|
+
{
|
|
593
|
+
"kind": "field",
|
|
594
|
+
"name": "lottieInstance",
|
|
595
|
+
"type": {
|
|
596
|
+
"text": "AnimationItem | undefined"
|
|
597
|
+
},
|
|
598
|
+
"privacy": "private",
|
|
599
|
+
"description": "Lottie animation instance"
|
|
600
|
+
},
|
|
601
|
+
{
|
|
602
|
+
"kind": "field",
|
|
603
|
+
"name": "containerRef",
|
|
604
|
+
"type": {
|
|
605
|
+
"text": "Ref<HTMLDivElement>"
|
|
606
|
+
},
|
|
607
|
+
"privacy": "private",
|
|
608
|
+
"description": "Container for the animation"
|
|
609
|
+
},
|
|
610
|
+
{
|
|
611
|
+
"kind": "field",
|
|
612
|
+
"name": "animation",
|
|
613
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
614
|
+
"readonly": true
|
|
615
|
+
},
|
|
616
|
+
{
|
|
617
|
+
"kind": "method",
|
|
618
|
+
"name": "getLoopValue",
|
|
619
|
+
"privacy": "private"
|
|
620
|
+
},
|
|
621
|
+
{
|
|
622
|
+
"kind": "method",
|
|
623
|
+
"name": "onLoadSuccessHandler",
|
|
624
|
+
"privacy": "private",
|
|
625
|
+
"parameters": [
|
|
626
|
+
{
|
|
627
|
+
"name": "animationData",
|
|
628
|
+
"type": {
|
|
629
|
+
"text": "any"
|
|
630
|
+
}
|
|
631
|
+
}
|
|
632
|
+
],
|
|
633
|
+
"description": "Create new lotty instance for the loaded data"
|
|
634
|
+
},
|
|
635
|
+
{
|
|
636
|
+
"kind": "method",
|
|
637
|
+
"name": "onLoadFailHandler",
|
|
638
|
+
"privacy": "private",
|
|
639
|
+
"parameters": [
|
|
640
|
+
{
|
|
641
|
+
"name": "error",
|
|
642
|
+
"type": {
|
|
643
|
+
"text": "Error"
|
|
644
|
+
}
|
|
645
|
+
}
|
|
646
|
+
],
|
|
647
|
+
"description": "Error handler for animation loading"
|
|
648
|
+
},
|
|
649
|
+
{
|
|
650
|
+
"kind": "method",
|
|
651
|
+
"name": "getAnimationData",
|
|
652
|
+
"privacy": "private",
|
|
653
|
+
"description": "Import animation data dynamically"
|
|
654
|
+
},
|
|
655
|
+
{
|
|
656
|
+
"kind": "field",
|
|
657
|
+
"name": "onCompleteHandler",
|
|
658
|
+
"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."
|
|
659
|
+
}
|
|
660
|
+
],
|
|
661
|
+
"events": [
|
|
662
|
+
{
|
|
663
|
+
"name": "load",
|
|
664
|
+
"type": {
|
|
665
|
+
"text": "CustomEvent"
|
|
666
|
+
},
|
|
667
|
+
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
668
|
+
"reactName": "onLoad"
|
|
669
|
+
},
|
|
670
|
+
{
|
|
671
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
672
|
+
"name": "complete",
|
|
673
|
+
"reactName": "onComplete"
|
|
674
|
+
},
|
|
675
|
+
{
|
|
676
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
677
|
+
"name": "error",
|
|
678
|
+
"reactName": "onError"
|
|
679
|
+
}
|
|
680
|
+
],
|
|
681
|
+
"attributes": [
|
|
682
|
+
{
|
|
683
|
+
"name": "name",
|
|
684
|
+
"type": {
|
|
685
|
+
"text": "AnimationNames | undefined"
|
|
686
|
+
},
|
|
687
|
+
"description": "Name of the animation (= filename)",
|
|
688
|
+
"fieldName": "name"
|
|
689
|
+
},
|
|
690
|
+
{
|
|
691
|
+
"name": "loop",
|
|
692
|
+
"type": {
|
|
693
|
+
"text": "LoopType | undefined"
|
|
694
|
+
},
|
|
695
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
696
|
+
"fieldName": "loop"
|
|
697
|
+
},
|
|
698
|
+
{
|
|
699
|
+
"name": "autoplay",
|
|
700
|
+
"type": {
|
|
701
|
+
"text": "boolean | undefined"
|
|
702
|
+
},
|
|
703
|
+
"description": "Weather start the animation automatically",
|
|
704
|
+
"fieldName": "autoplay"
|
|
705
|
+
},
|
|
706
|
+
{
|
|
707
|
+
"name": "aria-label",
|
|
708
|
+
"type": {
|
|
709
|
+
"text": "string | null"
|
|
710
|
+
},
|
|
711
|
+
"default": "null",
|
|
712
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
713
|
+
"fieldName": "ariaLabel"
|
|
714
|
+
},
|
|
715
|
+
{
|
|
716
|
+
"name": "aria-labelledby",
|
|
717
|
+
"type": {
|
|
718
|
+
"text": "string | null"
|
|
719
|
+
},
|
|
720
|
+
"default": "null",
|
|
721
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
722
|
+
"fieldName": "ariaLabelledBy"
|
|
723
|
+
}
|
|
724
|
+
],
|
|
725
|
+
"superclass": {
|
|
726
|
+
"name": "Component",
|
|
727
|
+
"module": "/src/models"
|
|
728
|
+
},
|
|
729
|
+
"tagName": "mdc-animation",
|
|
730
|
+
"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 */",
|
|
731
|
+
"customElement": true
|
|
732
|
+
}
|
|
733
|
+
],
|
|
734
|
+
"exports": [
|
|
735
|
+
{
|
|
736
|
+
"kind": "js",
|
|
737
|
+
"name": "default",
|
|
738
|
+
"declaration": {
|
|
739
|
+
"name": "Animation",
|
|
740
|
+
"module": "components/animation/animation.component.js"
|
|
741
|
+
}
|
|
742
|
+
}
|
|
743
|
+
]
|
|
744
|
+
},
|
|
745
|
+
{
|
|
746
|
+
"kind": "javascript-module",
|
|
747
|
+
"path": "components/appheader/appheader.component.js",
|
|
748
|
+
"declarations": [
|
|
749
|
+
{
|
|
750
|
+
"kind": "class",
|
|
751
|
+
"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**.",
|
|
752
|
+
"name": "Appheader",
|
|
753
|
+
"cssParts": [
|
|
754
|
+
{
|
|
755
|
+
"description": "The main container for styling the header.",
|
|
756
|
+
"name": "container"
|
|
757
|
+
},
|
|
758
|
+
{
|
|
759
|
+
"description": "The leading section of the header.",
|
|
760
|
+
"name": "leading-section"
|
|
761
|
+
},
|
|
762
|
+
{
|
|
763
|
+
"description": "The center section of the header.",
|
|
764
|
+
"name": "center-section"
|
|
765
|
+
},
|
|
766
|
+
{
|
|
767
|
+
"description": "The trailing section of the header.",
|
|
768
|
+
"name": "trailing-section"
|
|
769
|
+
}
|
|
770
|
+
],
|
|
771
|
+
"slots": [
|
|
772
|
+
{
|
|
773
773
|
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
774
774
|
"name": "leading"
|
|
775
775
|
},
|
|
@@ -12180,186 +12180,238 @@
|
|
|
12180
12180
|
},
|
|
12181
12181
|
{
|
|
12182
12182
|
"kind": "javascript-module",
|
|
12183
|
-
"path": "components/
|
|
12183
|
+
"path": "components/icon/icon.component.js",
|
|
12184
12184
|
"declarations": [
|
|
12185
12185
|
{
|
|
12186
12186
|
"kind": "class",
|
|
12187
|
-
"description": "
|
|
12188
|
-
"name": "
|
|
12189
|
-
"
|
|
12187
|
+
"description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.\n\n### Informative Standalone Icons\n- If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\nhave a Tooltip that describes what it means.\n- For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\nand the `role` will be set to \"img\" automatically.\n- **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**",
|
|
12188
|
+
"name": "Icon",
|
|
12189
|
+
"cssProperties": [
|
|
12190
12190
|
{
|
|
12191
|
-
"description": "
|
|
12192
|
-
"name": ""
|
|
12191
|
+
"description": "Allows customization of the default fill color.",
|
|
12192
|
+
"name": "--mdc-icon-fill-color"
|
|
12193
|
+
},
|
|
12194
|
+
{
|
|
12195
|
+
"description": "Allows customization of the icon size.",
|
|
12196
|
+
"name": "--mdc-icon-size"
|
|
12197
|
+
},
|
|
12198
|
+
{
|
|
12199
|
+
"description": "Allows customization of the icon border radius.",
|
|
12200
|
+
"name": "--mdc-icon-border-radius"
|
|
12201
|
+
}
|
|
12202
|
+
],
|
|
12203
|
+
"cssParts": [
|
|
12204
|
+
{
|
|
12205
|
+
"description": "The svg inside the icon element.",
|
|
12206
|
+
"name": "icon"
|
|
12193
12207
|
}
|
|
12194
12208
|
],
|
|
12195
12209
|
"members": [
|
|
12196
12210
|
{
|
|
12197
12211
|
"kind": "field",
|
|
12198
|
-
"name": "
|
|
12199
|
-
"
|
|
12200
|
-
|
|
12201
|
-
|
|
12202
|
-
"
|
|
12212
|
+
"name": "iconData",
|
|
12213
|
+
"type": {
|
|
12214
|
+
"text": "HTMLElement | undefined"
|
|
12215
|
+
},
|
|
12216
|
+
"privacy": "private"
|
|
12203
12217
|
},
|
|
12204
12218
|
{
|
|
12205
12219
|
"kind": "field",
|
|
12206
|
-
"name": "
|
|
12220
|
+
"name": "lengthUnitFromContext",
|
|
12207
12221
|
"type": {
|
|
12208
|
-
"text": "
|
|
12222
|
+
"text": "string | undefined"
|
|
12209
12223
|
},
|
|
12210
|
-
"
|
|
12211
|
-
"default": "momentum-icons",
|
|
12212
|
-
"attribute": "icon-set",
|
|
12213
|
-
"reflects": true
|
|
12224
|
+
"privacy": "private"
|
|
12214
12225
|
},
|
|
12215
12226
|
{
|
|
12216
12227
|
"kind": "field",
|
|
12217
|
-
"name": "
|
|
12228
|
+
"name": "sizeFromContext",
|
|
12218
12229
|
"type": {
|
|
12219
|
-
"text": "
|
|
12230
|
+
"text": "number | undefined"
|
|
12220
12231
|
},
|
|
12221
|
-
"
|
|
12222
|
-
"attribute": "url"
|
|
12232
|
+
"privacy": "private"
|
|
12223
12233
|
},
|
|
12224
12234
|
{
|
|
12225
12235
|
"kind": "field",
|
|
12226
|
-
"name": "
|
|
12236
|
+
"name": "name",
|
|
12227
12237
|
"type": {
|
|
12228
|
-
"text": "
|
|
12238
|
+
"text": "IconNames | undefined"
|
|
12229
12239
|
},
|
|
12230
|
-
"description": "
|
|
12231
|
-
"
|
|
12232
|
-
"attribute": "file-extension",
|
|
12240
|
+
"description": "Name of the icon (= filename)",
|
|
12241
|
+
"attribute": "name",
|
|
12233
12242
|
"reflects": true
|
|
12234
12243
|
},
|
|
12235
12244
|
{
|
|
12236
12245
|
"kind": "field",
|
|
12237
|
-
"name": "
|
|
12246
|
+
"name": "size",
|
|
12238
12247
|
"type": {
|
|
12239
|
-
"text": "
|
|
12248
|
+
"text": "number | undefined"
|
|
12240
12249
|
},
|
|
12241
|
-
"description": "
|
|
12242
|
-
"
|
|
12243
|
-
"attribute": "length-unit",
|
|
12244
|
-
"reflects": true
|
|
12250
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
12251
|
+
"attribute": "size"
|
|
12245
12252
|
},
|
|
12246
12253
|
{
|
|
12247
12254
|
"kind": "field",
|
|
12248
|
-
"name": "
|
|
12255
|
+
"name": "lengthUnit",
|
|
12249
12256
|
"type": {
|
|
12250
|
-
"text": "
|
|
12257
|
+
"text": "string | undefined"
|
|
12251
12258
|
},
|
|
12252
|
-
"description": "
|
|
12253
|
-
"
|
|
12254
|
-
"attribute": "size",
|
|
12255
|
-
"reflects": true
|
|
12259
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
12260
|
+
"attribute": "length-unit"
|
|
12256
12261
|
},
|
|
12257
12262
|
{
|
|
12258
12263
|
"kind": "field",
|
|
12259
|
-
"name": "
|
|
12264
|
+
"name": "ariaLabel",
|
|
12260
12265
|
"type": {
|
|
12261
|
-
"text": "
|
|
12266
|
+
"text": "string | null"
|
|
12262
12267
|
},
|
|
12263
|
-
"
|
|
12264
|
-
"
|
|
12265
|
-
"attribute": "
|
|
12268
|
+
"default": "null",
|
|
12269
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
12270
|
+
"attribute": "aria-label"
|
|
12266
12271
|
},
|
|
12267
12272
|
{
|
|
12268
12273
|
"kind": "field",
|
|
12269
|
-
"name": "
|
|
12274
|
+
"name": "ariaLabelledBy",
|
|
12270
12275
|
"type": {
|
|
12271
|
-
"text": "string |
|
|
12276
|
+
"text": "string | null"
|
|
12272
12277
|
},
|
|
12273
|
-
"
|
|
12274
|
-
"
|
|
12275
|
-
"attribute": "
|
|
12278
|
+
"default": "null",
|
|
12279
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
12280
|
+
"attribute": "aria-labelledby"
|
|
12276
12281
|
},
|
|
12277
12282
|
{
|
|
12278
|
-
"kind": "
|
|
12279
|
-
"name": "
|
|
12280
|
-
"privacy": "private"
|
|
12283
|
+
"kind": "field",
|
|
12284
|
+
"name": "iconProviderContext",
|
|
12285
|
+
"privacy": "private",
|
|
12286
|
+
"readonly": true
|
|
12287
|
+
},
|
|
12288
|
+
{
|
|
12289
|
+
"kind": "field",
|
|
12290
|
+
"name": "abortController",
|
|
12291
|
+
"type": {
|
|
12292
|
+
"text": "AbortController"
|
|
12293
|
+
},
|
|
12294
|
+
"privacy": "private",
|
|
12295
|
+
"default": "new AbortController()"
|
|
12281
12296
|
},
|
|
12282
12297
|
{
|
|
12283
12298
|
"kind": "method",
|
|
12284
|
-
"name": "
|
|
12285
|
-
"privacy": "
|
|
12299
|
+
"name": "prepareIconElement",
|
|
12300
|
+
"privacy": "private",
|
|
12301
|
+
"parameters": [
|
|
12302
|
+
{
|
|
12303
|
+
"name": "iconData",
|
|
12304
|
+
"type": {
|
|
12305
|
+
"text": "string"
|
|
12306
|
+
},
|
|
12307
|
+
"description": "The icon string to be parsed"
|
|
12308
|
+
}
|
|
12309
|
+
],
|
|
12310
|
+
"description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
|
|
12286
12311
|
"return": {
|
|
12287
12312
|
"type": {
|
|
12288
|
-
"text": "
|
|
12313
|
+
"text": ""
|
|
12289
12314
|
}
|
|
12290
12315
|
}
|
|
12291
|
-
}
|
|
12292
|
-
],
|
|
12293
|
-
"attributes": [
|
|
12316
|
+
},
|
|
12294
12317
|
{
|
|
12295
|
-
"
|
|
12296
|
-
"
|
|
12297
|
-
|
|
12298
|
-
|
|
12299
|
-
"description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
|
|
12300
|
-
"default": "momentum-icons",
|
|
12301
|
-
"fieldName": "iconSet"
|
|
12318
|
+
"kind": "method",
|
|
12319
|
+
"name": "getIconData",
|
|
12320
|
+
"privacy": "private",
|
|
12321
|
+
"description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
|
|
12302
12322
|
},
|
|
12303
12323
|
{
|
|
12304
|
-
"
|
|
12305
|
-
"
|
|
12306
|
-
|
|
12307
|
-
|
|
12308
|
-
|
|
12309
|
-
|
|
12324
|
+
"kind": "method",
|
|
12325
|
+
"name": "handleIconLoadedSuccess",
|
|
12326
|
+
"privacy": "private",
|
|
12327
|
+
"parameters": [
|
|
12328
|
+
{
|
|
12329
|
+
"name": "iconHtml",
|
|
12330
|
+
"type": {
|
|
12331
|
+
"text": "HTMLElement"
|
|
12332
|
+
},
|
|
12333
|
+
"description": "The icon html element which has been fetched from the icon provider."
|
|
12334
|
+
}
|
|
12335
|
+
],
|
|
12336
|
+
"description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
|
|
12310
12337
|
},
|
|
12311
12338
|
{
|
|
12312
|
-
"
|
|
12313
|
-
"
|
|
12314
|
-
|
|
12315
|
-
|
|
12316
|
-
|
|
12317
|
-
|
|
12318
|
-
|
|
12339
|
+
"kind": "method",
|
|
12340
|
+
"name": "handleIconLoadedFailure",
|
|
12341
|
+
"privacy": "private",
|
|
12342
|
+
"parameters": [
|
|
12343
|
+
{
|
|
12344
|
+
"name": "error",
|
|
12345
|
+
"type": {
|
|
12346
|
+
"text": "unknown"
|
|
12347
|
+
}
|
|
12348
|
+
}
|
|
12349
|
+
],
|
|
12350
|
+
"description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
12319
12351
|
},
|
|
12320
12352
|
{
|
|
12321
|
-
"
|
|
12353
|
+
"kind": "method",
|
|
12354
|
+
"name": "updateSize",
|
|
12355
|
+
"privacy": "private",
|
|
12356
|
+
"description": "Updates the size by setting the width and height"
|
|
12357
|
+
},
|
|
12358
|
+
{
|
|
12359
|
+
"kind": "field",
|
|
12360
|
+
"name": "computedIconSize",
|
|
12361
|
+
"privacy": "private",
|
|
12362
|
+
"readonly": true
|
|
12363
|
+
}
|
|
12364
|
+
],
|
|
12365
|
+
"attributes": [
|
|
12366
|
+
{
|
|
12367
|
+
"name": "name",
|
|
12322
12368
|
"type": {
|
|
12323
|
-
"text": "
|
|
12369
|
+
"text": "IconNames | undefined"
|
|
12324
12370
|
},
|
|
12325
|
-
"description": "
|
|
12326
|
-
"
|
|
12327
|
-
"fieldName": "lengthUnit"
|
|
12371
|
+
"description": "Name of the icon (= filename)",
|
|
12372
|
+
"fieldName": "name"
|
|
12328
12373
|
},
|
|
12329
12374
|
{
|
|
12330
12375
|
"name": "size",
|
|
12331
12376
|
"type": {
|
|
12332
12377
|
"text": "number | undefined"
|
|
12333
12378
|
},
|
|
12334
|
-
"description": "
|
|
12335
|
-
"default": "1",
|
|
12379
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
12336
12380
|
"fieldName": "size"
|
|
12337
12381
|
},
|
|
12338
12382
|
{
|
|
12339
|
-
"name": "
|
|
12383
|
+
"name": "length-unit",
|
|
12340
12384
|
"type": {
|
|
12341
|
-
"text": "
|
|
12385
|
+
"text": "string | undefined"
|
|
12342
12386
|
},
|
|
12343
|
-
"description": "
|
|
12344
|
-
"
|
|
12345
|
-
"fieldName": "cacheStrategy"
|
|
12387
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
12388
|
+
"fieldName": "lengthUnit"
|
|
12346
12389
|
},
|
|
12347
12390
|
{
|
|
12348
|
-
"name": "
|
|
12391
|
+
"name": "aria-label",
|
|
12349
12392
|
"type": {
|
|
12350
|
-
"text": "string |
|
|
12393
|
+
"text": "string | null"
|
|
12351
12394
|
},
|
|
12352
|
-
"
|
|
12353
|
-
"
|
|
12354
|
-
"fieldName": "
|
|
12395
|
+
"default": "null",
|
|
12396
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
12397
|
+
"fieldName": "ariaLabel"
|
|
12398
|
+
},
|
|
12399
|
+
{
|
|
12400
|
+
"name": "aria-labelledby",
|
|
12401
|
+
"type": {
|
|
12402
|
+
"text": "string | null"
|
|
12403
|
+
},
|
|
12404
|
+
"default": "null",
|
|
12405
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
12406
|
+
"fieldName": "ariaLabelledBy"
|
|
12355
12407
|
}
|
|
12356
12408
|
],
|
|
12357
12409
|
"superclass": {
|
|
12358
|
-
"name": "
|
|
12410
|
+
"name": "Component",
|
|
12359
12411
|
"module": "/src/models"
|
|
12360
12412
|
},
|
|
12361
|
-
"tagName": "mdc-
|
|
12362
|
-
"jsDoc": "/**\n *
|
|
12413
|
+
"tagName": "mdc-icon",
|
|
12414
|
+
"jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n *\n * @csspart icon - The svg inside the icon element.\n */",
|
|
12363
12415
|
"customElement": true
|
|
12364
12416
|
}
|
|
12365
12417
|
],
|
|
@@ -12368,246 +12420,194 @@
|
|
|
12368
12420
|
"kind": "js",
|
|
12369
12421
|
"name": "default",
|
|
12370
12422
|
"declaration": {
|
|
12371
|
-
"name": "
|
|
12372
|
-
"module": "components/
|
|
12423
|
+
"name": "Icon",
|
|
12424
|
+
"module": "components/icon/icon.component.js"
|
|
12373
12425
|
}
|
|
12374
12426
|
}
|
|
12375
12427
|
]
|
|
12376
12428
|
},
|
|
12377
12429
|
{
|
|
12378
12430
|
"kind": "javascript-module",
|
|
12379
|
-
"path": "components/
|
|
12431
|
+
"path": "components/iconprovider/iconprovider.component.js",
|
|
12380
12432
|
"declarations": [
|
|
12381
12433
|
{
|
|
12382
12434
|
"kind": "class",
|
|
12383
|
-
"description": "
|
|
12384
|
-
"name": "
|
|
12385
|
-
"
|
|
12386
|
-
{
|
|
12387
|
-
"description": "Allows customization of the default fill color.",
|
|
12388
|
-
"name": "--mdc-icon-fill-color"
|
|
12389
|
-
},
|
|
12390
|
-
{
|
|
12391
|
-
"description": "Allows customization of the icon size.",
|
|
12392
|
-
"name": "--mdc-icon-size"
|
|
12393
|
-
},
|
|
12394
|
-
{
|
|
12395
|
-
"description": "Allows customization of the icon border radius.",
|
|
12396
|
-
"name": "--mdc-icon-border-radius"
|
|
12397
|
-
}
|
|
12398
|
-
],
|
|
12399
|
-
"cssParts": [
|
|
12435
|
+
"description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
|
|
12436
|
+
"name": "IconProvider",
|
|
12437
|
+
"slots": [
|
|
12400
12438
|
{
|
|
12401
|
-
"description": "
|
|
12402
|
-
"name": "
|
|
12439
|
+
"description": "children",
|
|
12440
|
+
"name": ""
|
|
12403
12441
|
}
|
|
12404
12442
|
],
|
|
12405
12443
|
"members": [
|
|
12406
12444
|
{
|
|
12407
12445
|
"kind": "field",
|
|
12408
|
-
"name": "
|
|
12409
|
-
"
|
|
12410
|
-
|
|
12411
|
-
|
|
12412
|
-
"
|
|
12413
|
-
},
|
|
12414
|
-
{
|
|
12415
|
-
"kind": "field",
|
|
12416
|
-
"name": "lengthUnitFromContext",
|
|
12417
|
-
"type": {
|
|
12418
|
-
"text": "string | undefined"
|
|
12419
|
-
},
|
|
12420
|
-
"privacy": "private"
|
|
12421
|
-
},
|
|
12422
|
-
{
|
|
12423
|
-
"kind": "field",
|
|
12424
|
-
"name": "sizeFromContext",
|
|
12425
|
-
"type": {
|
|
12426
|
-
"text": "number | undefined"
|
|
12427
|
-
},
|
|
12428
|
-
"privacy": "private"
|
|
12446
|
+
"name": "Context",
|
|
12447
|
+
"privacy": "public",
|
|
12448
|
+
"static": true,
|
|
12449
|
+
"description": "Context object of the IconProvider, to be consumed by child components",
|
|
12450
|
+
"readonly": true
|
|
12429
12451
|
},
|
|
12430
12452
|
{
|
|
12431
12453
|
"kind": "field",
|
|
12432
|
-
"name": "
|
|
12454
|
+
"name": "iconSet",
|
|
12433
12455
|
"type": {
|
|
12434
|
-
"text": "
|
|
12456
|
+
"text": "IconSet | undefined"
|
|
12435
12457
|
},
|
|
12436
|
-
"description": "
|
|
12437
|
-
"
|
|
12458
|
+
"description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
|
|
12459
|
+
"default": "momentum-icons",
|
|
12460
|
+
"attribute": "icon-set",
|
|
12438
12461
|
"reflects": true
|
|
12439
12462
|
},
|
|
12440
12463
|
{
|
|
12441
12464
|
"kind": "field",
|
|
12442
|
-
"name": "
|
|
12465
|
+
"name": "url",
|
|
12443
12466
|
"type": {
|
|
12444
|
-
"text": "
|
|
12467
|
+
"text": "string | undefined"
|
|
12445
12468
|
},
|
|
12446
|
-
"description": "
|
|
12447
|
-
"attribute": "
|
|
12469
|
+
"description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
|
|
12470
|
+
"attribute": "url"
|
|
12448
12471
|
},
|
|
12449
12472
|
{
|
|
12450
12473
|
"kind": "field",
|
|
12451
|
-
"name": "
|
|
12474
|
+
"name": "fileExtension",
|
|
12452
12475
|
"type": {
|
|
12453
12476
|
"text": "string | undefined"
|
|
12454
12477
|
},
|
|
12455
|
-
"description": "
|
|
12456
|
-
"
|
|
12478
|
+
"description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
|
|
12479
|
+
"default": "svg",
|
|
12480
|
+
"attribute": "file-extension",
|
|
12481
|
+
"reflects": true
|
|
12457
12482
|
},
|
|
12458
12483
|
{
|
|
12459
12484
|
"kind": "field",
|
|
12460
|
-
"name": "
|
|
12485
|
+
"name": "lengthUnit",
|
|
12461
12486
|
"type": {
|
|
12462
|
-
"text": "string
|
|
12487
|
+
"text": "string"
|
|
12463
12488
|
},
|
|
12464
|
-
"
|
|
12465
|
-
"
|
|
12466
|
-
"attribute": "
|
|
12489
|
+
"description": "Length unit used for sizing of icons",
|
|
12490
|
+
"default": "em",
|
|
12491
|
+
"attribute": "length-unit",
|
|
12492
|
+
"reflects": true
|
|
12467
12493
|
},
|
|
12468
12494
|
{
|
|
12469
12495
|
"kind": "field",
|
|
12470
|
-
"name": "
|
|
12496
|
+
"name": "size",
|
|
12471
12497
|
"type": {
|
|
12472
|
-
"text": "
|
|
12498
|
+
"text": "number | undefined"
|
|
12473
12499
|
},
|
|
12474
|
-
"
|
|
12475
|
-
"
|
|
12476
|
-
"attribute": "
|
|
12477
|
-
|
|
12478
|
-
{
|
|
12479
|
-
"kind": "field",
|
|
12480
|
-
"name": "iconProviderContext",
|
|
12481
|
-
"privacy": "private",
|
|
12482
|
-
"readonly": true
|
|
12500
|
+
"description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
|
|
12501
|
+
"default": "1",
|
|
12502
|
+
"attribute": "size",
|
|
12503
|
+
"reflects": true
|
|
12483
12504
|
},
|
|
12484
12505
|
{
|
|
12485
12506
|
"kind": "field",
|
|
12486
|
-
"name": "
|
|
12507
|
+
"name": "cacheStrategy",
|
|
12487
12508
|
"type": {
|
|
12488
|
-
"text": "
|
|
12509
|
+
"text": "CacheStrategy | undefined"
|
|
12489
12510
|
},
|
|
12490
|
-
"
|
|
12491
|
-
"default": "
|
|
12492
|
-
|
|
12493
|
-
{
|
|
12494
|
-
"kind": "method",
|
|
12495
|
-
"name": "prepareIconElement",
|
|
12496
|
-
"privacy": "private",
|
|
12497
|
-
"parameters": [
|
|
12498
|
-
{
|
|
12499
|
-
"name": "iconData",
|
|
12500
|
-
"type": {
|
|
12501
|
-
"text": "string"
|
|
12502
|
-
},
|
|
12503
|
-
"description": "The icon string to be parsed"
|
|
12504
|
-
}
|
|
12505
|
-
],
|
|
12506
|
-
"description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
|
|
12507
|
-
"return": {
|
|
12508
|
-
"type": {
|
|
12509
|
-
"text": ""
|
|
12510
|
-
}
|
|
12511
|
-
}
|
|
12512
|
-
},
|
|
12513
|
-
{
|
|
12514
|
-
"kind": "method",
|
|
12515
|
-
"name": "getIconData",
|
|
12516
|
-
"privacy": "private",
|
|
12517
|
-
"description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
|
|
12511
|
+
"description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
|
|
12512
|
+
"default": "undefined",
|
|
12513
|
+
"attribute": "cache-strategy"
|
|
12518
12514
|
},
|
|
12519
12515
|
{
|
|
12520
|
-
"kind": "
|
|
12521
|
-
"name": "
|
|
12522
|
-
"
|
|
12523
|
-
|
|
12524
|
-
|
|
12525
|
-
|
|
12526
|
-
|
|
12527
|
-
|
|
12528
|
-
},
|
|
12529
|
-
"description": "The icon html element which has been fetched from the icon provider."
|
|
12530
|
-
}
|
|
12531
|
-
],
|
|
12532
|
-
"description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
|
|
12516
|
+
"kind": "field",
|
|
12517
|
+
"name": "cacheName",
|
|
12518
|
+
"type": {
|
|
12519
|
+
"text": "string | undefined"
|
|
12520
|
+
},
|
|
12521
|
+
"description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
|
|
12522
|
+
"default": "undefined",
|
|
12523
|
+
"attribute": "cache-name"
|
|
12533
12524
|
},
|
|
12534
12525
|
{
|
|
12535
12526
|
"kind": "method",
|
|
12536
|
-
"name": "
|
|
12537
|
-
"privacy": "private"
|
|
12538
|
-
"parameters": [
|
|
12539
|
-
{
|
|
12540
|
-
"name": "error",
|
|
12541
|
-
"type": {
|
|
12542
|
-
"text": "unknown"
|
|
12543
|
-
}
|
|
12544
|
-
}
|
|
12545
|
-
],
|
|
12546
|
-
"description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
12527
|
+
"name": "updateValuesInContext",
|
|
12528
|
+
"privacy": "private"
|
|
12547
12529
|
},
|
|
12548
12530
|
{
|
|
12549
12531
|
"kind": "method",
|
|
12550
|
-
"name": "
|
|
12551
|
-
"privacy": "
|
|
12552
|
-
"
|
|
12553
|
-
|
|
12554
|
-
|
|
12555
|
-
|
|
12556
|
-
|
|
12557
|
-
"privacy": "private",
|
|
12558
|
-
"readonly": true
|
|
12532
|
+
"name": "updateContext",
|
|
12533
|
+
"privacy": "protected",
|
|
12534
|
+
"return": {
|
|
12535
|
+
"type": {
|
|
12536
|
+
"text": "void"
|
|
12537
|
+
}
|
|
12538
|
+
}
|
|
12559
12539
|
}
|
|
12560
12540
|
],
|
|
12561
12541
|
"attributes": [
|
|
12562
12542
|
{
|
|
12563
|
-
"name": "
|
|
12543
|
+
"name": "icon-set",
|
|
12564
12544
|
"type": {
|
|
12565
|
-
"text": "
|
|
12545
|
+
"text": "IconSet | undefined"
|
|
12566
12546
|
},
|
|
12567
|
-
"description": "
|
|
12568
|
-
"
|
|
12547
|
+
"description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
|
|
12548
|
+
"default": "momentum-icons",
|
|
12549
|
+
"fieldName": "iconSet"
|
|
12569
12550
|
},
|
|
12570
12551
|
{
|
|
12571
|
-
"name": "
|
|
12552
|
+
"name": "url",
|
|
12572
12553
|
"type": {
|
|
12573
|
-
"text": "
|
|
12554
|
+
"text": "string | undefined"
|
|
12574
12555
|
},
|
|
12575
|
-
"description": "
|
|
12576
|
-
"fieldName": "
|
|
12556
|
+
"description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
|
|
12557
|
+
"fieldName": "url"
|
|
12577
12558
|
},
|
|
12578
12559
|
{
|
|
12579
|
-
"name": "
|
|
12560
|
+
"name": "file-extension",
|
|
12580
12561
|
"type": {
|
|
12581
12562
|
"text": "string | undefined"
|
|
12582
12563
|
},
|
|
12583
|
-
"description": "
|
|
12564
|
+
"description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
|
|
12565
|
+
"default": "svg",
|
|
12566
|
+
"fieldName": "fileExtension"
|
|
12567
|
+
},
|
|
12568
|
+
{
|
|
12569
|
+
"name": "length-unit",
|
|
12570
|
+
"type": {
|
|
12571
|
+
"text": "string"
|
|
12572
|
+
},
|
|
12573
|
+
"description": "Length unit used for sizing of icons",
|
|
12574
|
+
"default": "em",
|
|
12584
12575
|
"fieldName": "lengthUnit"
|
|
12585
12576
|
},
|
|
12586
12577
|
{
|
|
12587
|
-
"name": "
|
|
12578
|
+
"name": "size",
|
|
12588
12579
|
"type": {
|
|
12589
|
-
"text": "
|
|
12580
|
+
"text": "number | undefined"
|
|
12590
12581
|
},
|
|
12591
|
-
"
|
|
12592
|
-
"
|
|
12593
|
-
"fieldName": "
|
|
12582
|
+
"description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
|
|
12583
|
+
"default": "1",
|
|
12584
|
+
"fieldName": "size"
|
|
12594
12585
|
},
|
|
12595
12586
|
{
|
|
12596
|
-
"name": "
|
|
12587
|
+
"name": "cache-strategy",
|
|
12597
12588
|
"type": {
|
|
12598
|
-
"text": "
|
|
12589
|
+
"text": "CacheStrategy | undefined"
|
|
12599
12590
|
},
|
|
12600
|
-
"
|
|
12601
|
-
"
|
|
12602
|
-
"fieldName": "
|
|
12591
|
+
"description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
|
|
12592
|
+
"default": "undefined",
|
|
12593
|
+
"fieldName": "cacheStrategy"
|
|
12594
|
+
},
|
|
12595
|
+
{
|
|
12596
|
+
"name": "cache-name",
|
|
12597
|
+
"type": {
|
|
12598
|
+
"text": "string | undefined"
|
|
12599
|
+
},
|
|
12600
|
+
"description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
|
|
12601
|
+
"default": "undefined",
|
|
12602
|
+
"fieldName": "cacheName"
|
|
12603
12603
|
}
|
|
12604
12604
|
],
|
|
12605
12605
|
"superclass": {
|
|
12606
|
-
"name": "
|
|
12606
|
+
"name": "Provider",
|
|
12607
12607
|
"module": "/src/models"
|
|
12608
12608
|
},
|
|
12609
|
-
"tagName": "mdc-
|
|
12610
|
-
"jsDoc": "/**\n *
|
|
12609
|
+
"tagName": "mdc-iconprovider",
|
|
12610
|
+
"jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
|
|
12611
12611
|
"customElement": true
|
|
12612
12612
|
}
|
|
12613
12613
|
],
|
|
@@ -12616,8 +12616,8 @@
|
|
|
12616
12616
|
"kind": "js",
|
|
12617
12617
|
"name": "default",
|
|
12618
12618
|
"declaration": {
|
|
12619
|
-
"name": "
|
|
12620
|
-
"module": "components/
|
|
12619
|
+
"name": "IconProvider",
|
|
12620
|
+
"module": "components/iconprovider/iconprovider.component.js"
|
|
12621
12621
|
}
|
|
12622
12622
|
}
|
|
12623
12623
|
]
|
|
@@ -30832,174 +30832,30 @@
|
|
|
30832
30832
|
"fieldName": "size"
|
|
30833
30833
|
},
|
|
30834
30834
|
{
|
|
30835
|
-
"name": "aria-label",
|
|
30836
|
-
"type": {
|
|
30837
|
-
"text": "string | null"
|
|
30838
|
-
},
|
|
30839
|
-
"default": "null",
|
|
30840
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
30841
|
-
"fieldName": "ariaLabel"
|
|
30842
|
-
},
|
|
30843
|
-
{
|
|
30844
|
-
"name": "variant",
|
|
30845
|
-
"type": {
|
|
30846
|
-
"text": "SpinnerVariant"
|
|
30847
|
-
},
|
|
30848
|
-
"description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
|
|
30849
|
-
"default": "standalone",
|
|
30850
|
-
"fieldName": "variant"
|
|
30851
|
-
}
|
|
30852
|
-
],
|
|
30853
|
-
"superclass": {
|
|
30854
|
-
"name": "Component",
|
|
30855
|
-
"module": "/src/models"
|
|
30856
|
-
},
|
|
30857
|
-
"tagName": "mdc-spinner",
|
|
30858
|
-
"jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
|
|
30859
|
-
"customElement": true
|
|
30860
|
-
}
|
|
30861
|
-
],
|
|
30862
|
-
"exports": [
|
|
30863
|
-
{
|
|
30864
|
-
"kind": "js",
|
|
30865
|
-
"name": "default",
|
|
30866
|
-
"declaration": {
|
|
30867
|
-
"name": "Spinner",
|
|
30868
|
-
"module": "components/spinner/spinner.component.js"
|
|
30869
|
-
}
|
|
30870
|
-
}
|
|
30871
|
-
]
|
|
30872
|
-
},
|
|
30873
|
-
{
|
|
30874
|
-
"kind": "javascript-module",
|
|
30875
|
-
"path": "components/staticcheckbox/staticcheckbox.component.js",
|
|
30876
|
-
"declarations": [
|
|
30877
|
-
{
|
|
30878
|
-
"kind": "class",
|
|
30879
|
-
"description": "This is a decorative component that is styled to look as a checkbox.\n\nIt has 3 properties - checked, indeterminate and disabled.\n\nWe are using the same styling that has been created for the `mdc-checkbox` component.",
|
|
30880
|
-
"name": "StaticCheckbox",
|
|
30881
|
-
"cssProperties": [
|
|
30882
|
-
{
|
|
30883
|
-
"description": "Border color in high contrast.",
|
|
30884
|
-
"name": "--mdc-staticcheckbox-border-color"
|
|
30885
|
-
},
|
|
30886
|
-
{
|
|
30887
|
-
"description": "Background color for a selected checkbox.",
|
|
30888
|
-
"name": "--mdc-staticcheckbox-checked-background-color"
|
|
30889
|
-
},
|
|
30890
|
-
{
|
|
30891
|
-
"description": "Background color for a disabled checkbox.",
|
|
30892
|
-
"name": "--mdc-staticcheckbox-disabled-background-color"
|
|
30893
|
-
},
|
|
30894
|
-
{
|
|
30895
|
-
"description": "Border color for a disabled checkbox.",
|
|
30896
|
-
"name": "--mdc-checkbox-disabled-border-color"
|
|
30897
|
-
},
|
|
30898
|
-
{
|
|
30899
|
-
"description": "Background color for a disabled, selected checkbox.",
|
|
30900
|
-
"name": "--mdc-checkbox-disabled-checked-icon-color"
|
|
30901
|
-
},
|
|
30902
|
-
{
|
|
30903
|
-
"description": "Icon color for a disabled checkbox.",
|
|
30904
|
-
"name": "--mdc-staticcheckbox-disabled-icon-color"
|
|
30905
|
-
},
|
|
30906
|
-
{
|
|
30907
|
-
"description": "Background color for an unselected checkbox.",
|
|
30908
|
-
"name": "--mdc-staticcheckbox-icon-background-color"
|
|
30909
|
-
},
|
|
30910
|
-
{
|
|
30911
|
-
"description": "Default background color for an unselected checkbox.",
|
|
30912
|
-
"name": "--mdc-staticcheckbox-icon-border-color"
|
|
30913
|
-
},
|
|
30914
|
-
{
|
|
30915
|
-
"description": "Icon color for an unselected checkbox.",
|
|
30916
|
-
"name": "--mdc-staticcheckbox-icon-color"
|
|
30917
|
-
}
|
|
30918
|
-
],
|
|
30919
|
-
"members": [
|
|
30920
|
-
{
|
|
30921
|
-
"kind": "field",
|
|
30922
|
-
"name": "checked",
|
|
30923
|
-
"type": {
|
|
30924
|
-
"text": "boolean"
|
|
30925
|
-
},
|
|
30926
|
-
"default": "false",
|
|
30927
|
-
"description": "Determines whether the checkbox is selected or unselected.",
|
|
30928
|
-
"attribute": "checked",
|
|
30929
|
-
"reflects": true
|
|
30930
|
-
},
|
|
30931
|
-
{
|
|
30932
|
-
"kind": "field",
|
|
30933
|
-
"name": "indeterminate",
|
|
30934
|
-
"type": {
|
|
30935
|
-
"text": "boolean"
|
|
30936
|
-
},
|
|
30937
|
-
"default": "false",
|
|
30938
|
-
"description": "Determines whether the checkbox is in an indeterminate state.",
|
|
30939
|
-
"attribute": "indeterminate",
|
|
30940
|
-
"reflects": true
|
|
30941
|
-
},
|
|
30942
|
-
{
|
|
30943
|
-
"kind": "field",
|
|
30944
|
-
"name": "disabled",
|
|
30945
|
-
"type": {
|
|
30946
|
-
"text": "boolean | undefined"
|
|
30947
|
-
},
|
|
30948
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
30949
|
-
"default": "undefined",
|
|
30950
|
-
"attribute": "disabled",
|
|
30951
|
-
"reflects": true,
|
|
30952
|
-
"inheritedFrom": {
|
|
30953
|
-
"name": "DisabledMixin",
|
|
30954
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
30955
|
-
}
|
|
30956
|
-
}
|
|
30957
|
-
],
|
|
30958
|
-
"attributes": [
|
|
30959
|
-
{
|
|
30960
|
-
"name": "checked",
|
|
30961
|
-
"type": {
|
|
30962
|
-
"text": "boolean"
|
|
30963
|
-
},
|
|
30964
|
-
"default": "false",
|
|
30965
|
-
"description": "Determines whether the checkbox is selected or unselected.",
|
|
30966
|
-
"fieldName": "checked"
|
|
30967
|
-
},
|
|
30968
|
-
{
|
|
30969
|
-
"name": "indeterminate",
|
|
30835
|
+
"name": "aria-label",
|
|
30970
30836
|
"type": {
|
|
30971
|
-
"text": "
|
|
30837
|
+
"text": "string | null"
|
|
30972
30838
|
},
|
|
30973
|
-
"default": "
|
|
30974
|
-
"description": "
|
|
30975
|
-
"fieldName": "
|
|
30839
|
+
"default": "null",
|
|
30840
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
30841
|
+
"fieldName": "ariaLabel"
|
|
30976
30842
|
},
|
|
30977
30843
|
{
|
|
30978
|
-
"name": "
|
|
30844
|
+
"name": "variant",
|
|
30979
30845
|
"type": {
|
|
30980
|
-
"text": "
|
|
30846
|
+
"text": "SpinnerVariant"
|
|
30981
30847
|
},
|
|
30982
|
-
"description": "
|
|
30983
|
-
"default": "
|
|
30984
|
-
"fieldName": "
|
|
30985
|
-
"inheritedFrom": {
|
|
30986
|
-
"name": "DisabledMixin",
|
|
30987
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
30988
|
-
}
|
|
30989
|
-
}
|
|
30990
|
-
],
|
|
30991
|
-
"mixins": [
|
|
30992
|
-
{
|
|
30993
|
-
"name": "DisabledMixin",
|
|
30994
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
30848
|
+
"description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
|
|
30849
|
+
"default": "standalone",
|
|
30850
|
+
"fieldName": "variant"
|
|
30995
30851
|
}
|
|
30996
30852
|
],
|
|
30997
30853
|
"superclass": {
|
|
30998
30854
|
"name": "Component",
|
|
30999
30855
|
"module": "/src/models"
|
|
31000
30856
|
},
|
|
31001
|
-
"tagName": "mdc-
|
|
31002
|
-
"jsDoc": "/**\n *
|
|
30857
|
+
"tagName": "mdc-spinner",
|
|
30858
|
+
"jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
|
|
31003
30859
|
"customElement": true
|
|
31004
30860
|
}
|
|
31005
30861
|
],
|
|
@@ -31008,60 +30864,56 @@
|
|
|
31008
30864
|
"kind": "js",
|
|
31009
30865
|
"name": "default",
|
|
31010
30866
|
"declaration": {
|
|
31011
|
-
"name": "
|
|
31012
|
-
"module": "components/
|
|
30867
|
+
"name": "Spinner",
|
|
30868
|
+
"module": "components/spinner/spinner.component.js"
|
|
31013
30869
|
}
|
|
31014
30870
|
}
|
|
31015
30871
|
]
|
|
31016
30872
|
},
|
|
31017
30873
|
{
|
|
31018
30874
|
"kind": "javascript-module",
|
|
31019
|
-
"path": "components/
|
|
30875
|
+
"path": "components/staticcheckbox/staticcheckbox.component.js",
|
|
31020
30876
|
"declarations": [
|
|
31021
30877
|
{
|
|
31022
30878
|
"kind": "class",
|
|
31023
|
-
"description": "This is a decorative component that is styled to look as a
|
|
31024
|
-
"name": "
|
|
30879
|
+
"description": "This is a decorative component that is styled to look as a checkbox.\n\nIt has 3 properties - checked, indeterminate and disabled.\n\nWe are using the same styling that has been created for the `mdc-checkbox` component.",
|
|
30880
|
+
"name": "StaticCheckbox",
|
|
31025
30881
|
"cssProperties": [
|
|
31026
30882
|
{
|
|
31027
|
-
"description": "
|
|
31028
|
-
"name": "--mdc-
|
|
31029
|
-
},
|
|
31030
|
-
{
|
|
31031
|
-
"description": "color of the label when disabled",
|
|
31032
|
-
"name": "--mdc-staticradio-text-disabled-color"
|
|
30883
|
+
"description": "Border color in high contrast.",
|
|
30884
|
+
"name": "--mdc-staticcheckbox-border-color"
|
|
31033
30885
|
},
|
|
31034
30886
|
{
|
|
31035
|
-
"description": "color
|
|
31036
|
-
"name": "--mdc-
|
|
30887
|
+
"description": "Background color for a selected checkbox.",
|
|
30888
|
+
"name": "--mdc-staticcheckbox-checked-background-color"
|
|
31037
30889
|
},
|
|
31038
30890
|
{
|
|
31039
|
-
"description": "color
|
|
31040
|
-
"name": "--mdc-
|
|
30891
|
+
"description": "Background color for a disabled checkbox.",
|
|
30892
|
+
"name": "--mdc-staticcheckbox-disabled-background-color"
|
|
31041
30893
|
},
|
|
31042
30894
|
{
|
|
31043
|
-
"description": "
|
|
31044
|
-
"name": "--mdc-
|
|
30895
|
+
"description": "Border color for a disabled checkbox.",
|
|
30896
|
+
"name": "--mdc-checkbox-disabled-border-color"
|
|
31045
30897
|
},
|
|
31046
30898
|
{
|
|
31047
|
-
"description": "
|
|
31048
|
-
"name": "--mdc-
|
|
30899
|
+
"description": "Background color for a disabled, selected checkbox.",
|
|
30900
|
+
"name": "--mdc-checkbox-disabled-checked-icon-color"
|
|
31049
30901
|
},
|
|
31050
30902
|
{
|
|
31051
|
-
"description": "color
|
|
31052
|
-
"name": "--mdc-
|
|
30903
|
+
"description": "Icon color for a disabled checkbox.",
|
|
30904
|
+
"name": "--mdc-staticcheckbox-disabled-icon-color"
|
|
31053
30905
|
},
|
|
31054
30906
|
{
|
|
31055
|
-
"description": "
|
|
31056
|
-
"name": "--mdc-
|
|
30907
|
+
"description": "Background color for an unselected checkbox.",
|
|
30908
|
+
"name": "--mdc-staticcheckbox-icon-background-color"
|
|
31057
30909
|
},
|
|
31058
30910
|
{
|
|
31059
|
-
"description": "
|
|
31060
|
-
"name": "--mdc-
|
|
30911
|
+
"description": "Default background color for an unselected checkbox.",
|
|
30912
|
+
"name": "--mdc-staticcheckbox-icon-border-color"
|
|
31061
30913
|
},
|
|
31062
30914
|
{
|
|
31063
|
-
"description": "
|
|
31064
|
-
"name": "--mdc-
|
|
30915
|
+
"description": "Icon color for an unselected checkbox.",
|
|
30916
|
+
"name": "--mdc-staticcheckbox-icon-color"
|
|
31065
30917
|
}
|
|
31066
30918
|
],
|
|
31067
30919
|
"members": [
|
|
@@ -31072,19 +30924,19 @@
|
|
|
31072
30924
|
"text": "boolean"
|
|
31073
30925
|
},
|
|
31074
30926
|
"default": "false",
|
|
31075
|
-
"description": "Determines whether the
|
|
30927
|
+
"description": "Determines whether the checkbox is selected or unselected.",
|
|
31076
30928
|
"attribute": "checked",
|
|
31077
30929
|
"reflects": true
|
|
31078
30930
|
},
|
|
31079
30931
|
{
|
|
31080
30932
|
"kind": "field",
|
|
31081
|
-
"name": "
|
|
30933
|
+
"name": "indeterminate",
|
|
31082
30934
|
"type": {
|
|
31083
30935
|
"text": "boolean"
|
|
31084
30936
|
},
|
|
31085
30937
|
"default": "false",
|
|
31086
|
-
"description": "Determines whether the
|
|
31087
|
-
"attribute": "
|
|
30938
|
+
"description": "Determines whether the checkbox is in an indeterminate state.",
|
|
30939
|
+
"attribute": "indeterminate",
|
|
31088
30940
|
"reflects": true
|
|
31089
30941
|
},
|
|
31090
30942
|
{
|
|
@@ -31110,17 +30962,17 @@
|
|
|
31110
30962
|
"text": "boolean"
|
|
31111
30963
|
},
|
|
31112
30964
|
"default": "false",
|
|
31113
|
-
"description": "Determines whether the
|
|
30965
|
+
"description": "Determines whether the checkbox is selected or unselected.",
|
|
31114
30966
|
"fieldName": "checked"
|
|
31115
30967
|
},
|
|
31116
30968
|
{
|
|
31117
|
-
"name": "
|
|
30969
|
+
"name": "indeterminate",
|
|
31118
30970
|
"type": {
|
|
31119
30971
|
"text": "boolean"
|
|
31120
30972
|
},
|
|
31121
30973
|
"default": "false",
|
|
31122
|
-
"description": "Determines whether the
|
|
31123
|
-
"fieldName": "
|
|
30974
|
+
"description": "Determines whether the checkbox is in an indeterminate state.",
|
|
30975
|
+
"fieldName": "indeterminate"
|
|
31124
30976
|
},
|
|
31125
30977
|
{
|
|
31126
30978
|
"name": "disabled",
|
|
@@ -31146,8 +30998,8 @@
|
|
|
31146
30998
|
"name": "Component",
|
|
31147
30999
|
"module": "/src/models"
|
|
31148
31000
|
},
|
|
31149
|
-
"tagName": "mdc-
|
|
31150
|
-
"jsDoc": "/**\n * This is a decorative component that is styled to look as a
|
|
31001
|
+
"tagName": "mdc-staticcheckbox",
|
|
31002
|
+
"jsDoc": "/**\n * This is a decorative component that is styled to look as a checkbox.\n *\n * It has 3 properties - checked, indeterminate and disabled.\n *\n * We are using the same styling that has been created for the `mdc-checkbox` component.\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.\n *\n */",
|
|
31151
31003
|
"customElement": true
|
|
31152
31004
|
}
|
|
31153
31005
|
],
|
|
@@ -31156,8 +31008,8 @@
|
|
|
31156
31008
|
"kind": "js",
|
|
31157
31009
|
"name": "default",
|
|
31158
31010
|
"declaration": {
|
|
31159
|
-
"name": "
|
|
31160
|
-
"module": "components/
|
|
31011
|
+
"name": "StaticCheckbox",
|
|
31012
|
+
"module": "components/staticcheckbox/staticcheckbox.component.js"
|
|
31161
31013
|
}
|
|
31162
31014
|
}
|
|
31163
31015
|
]
|
|
@@ -32239,6 +32091,154 @@
|
|
|
32239
32091
|
}
|
|
32240
32092
|
]
|
|
32241
32093
|
},
|
|
32094
|
+
{
|
|
32095
|
+
"kind": "javascript-module",
|
|
32096
|
+
"path": "components/staticradio/staticradio.component.js",
|
|
32097
|
+
"declarations": [
|
|
32098
|
+
{
|
|
32099
|
+
"kind": "class",
|
|
32100
|
+
"description": "This is a decorative component that is styled to look as a radio.\nIt has 2 properties - checked and disabled.\n\nWe are using the same styling that has been created for the `mdc-radio` component.",
|
|
32101
|
+
"name": "StaticRadio",
|
|
32102
|
+
"cssProperties": [
|
|
32103
|
+
{
|
|
32104
|
+
"description": "size of the inner circle",
|
|
32105
|
+
"name": "--mdc-staticradio-inner-circle-size"
|
|
32106
|
+
},
|
|
32107
|
+
{
|
|
32108
|
+
"description": "color of the label when disabled",
|
|
32109
|
+
"name": "--mdc-staticradio-text-disabled-color"
|
|
32110
|
+
},
|
|
32111
|
+
{
|
|
32112
|
+
"description": "color of the radio button border when normal",
|
|
32113
|
+
"name": "--mdc-staticradio-normal-border-color"
|
|
32114
|
+
},
|
|
32115
|
+
{
|
|
32116
|
+
"description": "color of the radio button border when disabled",
|
|
32117
|
+
"name": "--mdc-staticradio-disabled-border-color"
|
|
32118
|
+
},
|
|
32119
|
+
{
|
|
32120
|
+
"description": "background color of the inner circle when normal",
|
|
32121
|
+
"name": "--mdc-staticradio-inner-circle-normal-background"
|
|
32122
|
+
},
|
|
32123
|
+
{
|
|
32124
|
+
"description": "background color of the inner circle when disabled",
|
|
32125
|
+
"name": "--mdc-staticradio-inner-circle-disabled-background"
|
|
32126
|
+
},
|
|
32127
|
+
{
|
|
32128
|
+
"description": "color of the radio button when inactive",
|
|
32129
|
+
"name": "--mdc-staticradio-control-inactive-color"
|
|
32130
|
+
},
|
|
32131
|
+
{
|
|
32132
|
+
"description": "background color of the radio button when inactive and disabled",
|
|
32133
|
+
"name": "--mdc-staticradio-control-inactive-disabled-background"
|
|
32134
|
+
},
|
|
32135
|
+
{
|
|
32136
|
+
"description": "color of the radio button when active",
|
|
32137
|
+
"name": "--mdc-staticradio-control-active-color"
|
|
32138
|
+
},
|
|
32139
|
+
{
|
|
32140
|
+
"description": "background color of the radio button when active and disabled",
|
|
32141
|
+
"name": "--mdc-staticradio-control-active-disabled-background"
|
|
32142
|
+
}
|
|
32143
|
+
],
|
|
32144
|
+
"members": [
|
|
32145
|
+
{
|
|
32146
|
+
"kind": "field",
|
|
32147
|
+
"name": "checked",
|
|
32148
|
+
"type": {
|
|
32149
|
+
"text": "boolean"
|
|
32150
|
+
},
|
|
32151
|
+
"default": "false",
|
|
32152
|
+
"description": "Determines whether the radio is selected or unselected.",
|
|
32153
|
+
"attribute": "checked",
|
|
32154
|
+
"reflects": true
|
|
32155
|
+
},
|
|
32156
|
+
{
|
|
32157
|
+
"kind": "field",
|
|
32158
|
+
"name": "readonly",
|
|
32159
|
+
"type": {
|
|
32160
|
+
"text": "boolean"
|
|
32161
|
+
},
|
|
32162
|
+
"default": "false",
|
|
32163
|
+
"description": "Determines whether the radio is read-only.",
|
|
32164
|
+
"attribute": "readonly",
|
|
32165
|
+
"reflects": true
|
|
32166
|
+
},
|
|
32167
|
+
{
|
|
32168
|
+
"kind": "field",
|
|
32169
|
+
"name": "disabled",
|
|
32170
|
+
"type": {
|
|
32171
|
+
"text": "boolean | undefined"
|
|
32172
|
+
},
|
|
32173
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
32174
|
+
"default": "undefined",
|
|
32175
|
+
"attribute": "disabled",
|
|
32176
|
+
"reflects": true,
|
|
32177
|
+
"inheritedFrom": {
|
|
32178
|
+
"name": "DisabledMixin",
|
|
32179
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
32180
|
+
}
|
|
32181
|
+
}
|
|
32182
|
+
],
|
|
32183
|
+
"attributes": [
|
|
32184
|
+
{
|
|
32185
|
+
"name": "checked",
|
|
32186
|
+
"type": {
|
|
32187
|
+
"text": "boolean"
|
|
32188
|
+
},
|
|
32189
|
+
"default": "false",
|
|
32190
|
+
"description": "Determines whether the radio is selected or unselected.",
|
|
32191
|
+
"fieldName": "checked"
|
|
32192
|
+
},
|
|
32193
|
+
{
|
|
32194
|
+
"name": "readonly",
|
|
32195
|
+
"type": {
|
|
32196
|
+
"text": "boolean"
|
|
32197
|
+
},
|
|
32198
|
+
"default": "false",
|
|
32199
|
+
"description": "Determines whether the radio is read-only.",
|
|
32200
|
+
"fieldName": "readonly"
|
|
32201
|
+
},
|
|
32202
|
+
{
|
|
32203
|
+
"name": "disabled",
|
|
32204
|
+
"type": {
|
|
32205
|
+
"text": "boolean | undefined"
|
|
32206
|
+
},
|
|
32207
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
32208
|
+
"default": "undefined",
|
|
32209
|
+
"fieldName": "disabled",
|
|
32210
|
+
"inheritedFrom": {
|
|
32211
|
+
"name": "DisabledMixin",
|
|
32212
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
32213
|
+
}
|
|
32214
|
+
}
|
|
32215
|
+
],
|
|
32216
|
+
"mixins": [
|
|
32217
|
+
{
|
|
32218
|
+
"name": "DisabledMixin",
|
|
32219
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
32220
|
+
}
|
|
32221
|
+
],
|
|
32222
|
+
"superclass": {
|
|
32223
|
+
"name": "Component",
|
|
32224
|
+
"module": "/src/models"
|
|
32225
|
+
},
|
|
32226
|
+
"tagName": "mdc-staticradio",
|
|
32227
|
+
"jsDoc": "/**\n * This is a decorative component that is styled to look as a radio.\n * It has 2 properties - checked and disabled.\n *\n * We are using the same styling that has been created for the `mdc-radio` component.\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when\n * inactive and disabled\n * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button\n * when active and disabled\n */",
|
|
32228
|
+
"customElement": true
|
|
32229
|
+
}
|
|
32230
|
+
],
|
|
32231
|
+
"exports": [
|
|
32232
|
+
{
|
|
32233
|
+
"kind": "js",
|
|
32234
|
+
"name": "default",
|
|
32235
|
+
"declaration": {
|
|
32236
|
+
"name": "StaticRadio",
|
|
32237
|
+
"module": "components/staticradio/staticradio.component.js"
|
|
32238
|
+
}
|
|
32239
|
+
}
|
|
32240
|
+
]
|
|
32241
|
+
},
|
|
32242
32242
|
{
|
|
32243
32243
|
"kind": "javascript-module",
|
|
32244
32244
|
"path": "components/text/text.component.js",
|