@momentum-design/components 0.127.8 → 0.127.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +55 -51
- package/dist/browser/index.js.map +3 -3
- package/dist/components/banner/banner.component.js +4 -1
- package/dist/components/banner/banner.styles.js +1 -0
- package/dist/components/popover/popover.component.d.ts +31 -5
- package/dist/components/popover/popover.component.js +42 -14
- package/dist/components/popover/popover.stack.d.ts +2 -1
- package/dist/components/popover/popover.stack.js +2 -0
- package/dist/custom-elements.json +671 -696
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/dist/react/popover/index.d.ts +2 -2
- package/dist/react/popover/index.js +2 -2
- package/dist/utils/mixins/BackdropMixin.js +2 -2
- package/package.json +1 -1
|
@@ -1654,6 +1654,218 @@
|
|
|
1654
1654
|
}
|
|
1655
1655
|
]
|
|
1656
1656
|
},
|
|
1657
|
+
{
|
|
1658
|
+
"kind": "javascript-module",
|
|
1659
|
+
"path": "components/animation/animation.component.js",
|
|
1660
|
+
"declarations": [
|
|
1661
|
+
{
|
|
1662
|
+
"kind": "class",
|
|
1663
|
+
"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.",
|
|
1664
|
+
"name": "Animation",
|
|
1665
|
+
"members": [
|
|
1666
|
+
{
|
|
1667
|
+
"kind": "field",
|
|
1668
|
+
"name": "name",
|
|
1669
|
+
"type": {
|
|
1670
|
+
"text": "AnimationNames | undefined"
|
|
1671
|
+
},
|
|
1672
|
+
"description": "Name of the animation (= filename)",
|
|
1673
|
+
"attribute": "name",
|
|
1674
|
+
"reflects": true
|
|
1675
|
+
},
|
|
1676
|
+
{
|
|
1677
|
+
"kind": "field",
|
|
1678
|
+
"name": "loop",
|
|
1679
|
+
"type": {
|
|
1680
|
+
"text": "LoopType | undefined"
|
|
1681
|
+
},
|
|
1682
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
1683
|
+
"attribute": "loop",
|
|
1684
|
+
"reflects": true
|
|
1685
|
+
},
|
|
1686
|
+
{
|
|
1687
|
+
"kind": "field",
|
|
1688
|
+
"name": "autoplay",
|
|
1689
|
+
"type": {
|
|
1690
|
+
"text": "boolean | undefined"
|
|
1691
|
+
},
|
|
1692
|
+
"description": "Weather start the animation automatically",
|
|
1693
|
+
"attribute": "autoplay",
|
|
1694
|
+
"reflects": true
|
|
1695
|
+
},
|
|
1696
|
+
{
|
|
1697
|
+
"kind": "field",
|
|
1698
|
+
"name": "ariaLabel",
|
|
1699
|
+
"type": {
|
|
1700
|
+
"text": "string | null"
|
|
1701
|
+
},
|
|
1702
|
+
"default": "null",
|
|
1703
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
1704
|
+
"attribute": "aria-label"
|
|
1705
|
+
},
|
|
1706
|
+
{
|
|
1707
|
+
"kind": "field",
|
|
1708
|
+
"name": "ariaLabelledby",
|
|
1709
|
+
"type": {
|
|
1710
|
+
"text": "string | null"
|
|
1711
|
+
},
|
|
1712
|
+
"default": "null",
|
|
1713
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
1714
|
+
"attribute": "aria-labelledby"
|
|
1715
|
+
},
|
|
1716
|
+
{
|
|
1717
|
+
"kind": "field",
|
|
1718
|
+
"name": "lottieInstance",
|
|
1719
|
+
"type": {
|
|
1720
|
+
"text": "AnimationItem | undefined"
|
|
1721
|
+
},
|
|
1722
|
+
"privacy": "private",
|
|
1723
|
+
"description": "Lottie animation instance"
|
|
1724
|
+
},
|
|
1725
|
+
{
|
|
1726
|
+
"kind": "field",
|
|
1727
|
+
"name": "containerRef",
|
|
1728
|
+
"type": {
|
|
1729
|
+
"text": "Ref<HTMLDivElement>"
|
|
1730
|
+
},
|
|
1731
|
+
"privacy": "private",
|
|
1732
|
+
"description": "Container for the animation"
|
|
1733
|
+
},
|
|
1734
|
+
{
|
|
1735
|
+
"kind": "field",
|
|
1736
|
+
"name": "animation",
|
|
1737
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
1738
|
+
"readonly": true
|
|
1739
|
+
},
|
|
1740
|
+
{
|
|
1741
|
+
"kind": "method",
|
|
1742
|
+
"name": "getLoopValue",
|
|
1743
|
+
"privacy": "private"
|
|
1744
|
+
},
|
|
1745
|
+
{
|
|
1746
|
+
"kind": "method",
|
|
1747
|
+
"name": "onLoadSuccessHandler",
|
|
1748
|
+
"privacy": "private",
|
|
1749
|
+
"parameters": [
|
|
1750
|
+
{
|
|
1751
|
+
"name": "animationData",
|
|
1752
|
+
"type": {
|
|
1753
|
+
"text": "any"
|
|
1754
|
+
}
|
|
1755
|
+
}
|
|
1756
|
+
],
|
|
1757
|
+
"description": "Create new lotty instance for the loaded data"
|
|
1758
|
+
},
|
|
1759
|
+
{
|
|
1760
|
+
"kind": "method",
|
|
1761
|
+
"name": "onLoadFailHandler",
|
|
1762
|
+
"privacy": "private",
|
|
1763
|
+
"parameters": [
|
|
1764
|
+
{
|
|
1765
|
+
"name": "error",
|
|
1766
|
+
"type": {
|
|
1767
|
+
"text": "Error"
|
|
1768
|
+
}
|
|
1769
|
+
}
|
|
1770
|
+
],
|
|
1771
|
+
"description": "Error handler for animation loading"
|
|
1772
|
+
},
|
|
1773
|
+
{
|
|
1774
|
+
"kind": "method",
|
|
1775
|
+
"name": "getAnimationData",
|
|
1776
|
+
"privacy": "private",
|
|
1777
|
+
"description": "Import animation data dynamically"
|
|
1778
|
+
},
|
|
1779
|
+
{
|
|
1780
|
+
"kind": "field",
|
|
1781
|
+
"name": "onCompleteHandler",
|
|
1782
|
+
"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."
|
|
1783
|
+
}
|
|
1784
|
+
],
|
|
1785
|
+
"events": [
|
|
1786
|
+
{
|
|
1787
|
+
"name": "load",
|
|
1788
|
+
"type": {
|
|
1789
|
+
"text": "CustomEvent"
|
|
1790
|
+
},
|
|
1791
|
+
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
1792
|
+
"reactName": "onLoad"
|
|
1793
|
+
},
|
|
1794
|
+
{
|
|
1795
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
1796
|
+
"name": "complete",
|
|
1797
|
+
"reactName": "onComplete"
|
|
1798
|
+
},
|
|
1799
|
+
{
|
|
1800
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
1801
|
+
"name": "error",
|
|
1802
|
+
"reactName": "onError"
|
|
1803
|
+
}
|
|
1804
|
+
],
|
|
1805
|
+
"attributes": [
|
|
1806
|
+
{
|
|
1807
|
+
"name": "name",
|
|
1808
|
+
"type": {
|
|
1809
|
+
"text": "AnimationNames | undefined"
|
|
1810
|
+
},
|
|
1811
|
+
"description": "Name of the animation (= filename)",
|
|
1812
|
+
"fieldName": "name"
|
|
1813
|
+
},
|
|
1814
|
+
{
|
|
1815
|
+
"name": "loop",
|
|
1816
|
+
"type": {
|
|
1817
|
+
"text": "LoopType | undefined"
|
|
1818
|
+
},
|
|
1819
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
1820
|
+
"fieldName": "loop"
|
|
1821
|
+
},
|
|
1822
|
+
{
|
|
1823
|
+
"name": "autoplay",
|
|
1824
|
+
"type": {
|
|
1825
|
+
"text": "boolean | undefined"
|
|
1826
|
+
},
|
|
1827
|
+
"description": "Weather start the animation automatically",
|
|
1828
|
+
"fieldName": "autoplay"
|
|
1829
|
+
},
|
|
1830
|
+
{
|
|
1831
|
+
"name": "aria-label",
|
|
1832
|
+
"type": {
|
|
1833
|
+
"text": "string | null"
|
|
1834
|
+
},
|
|
1835
|
+
"default": "null",
|
|
1836
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
1837
|
+
"fieldName": "ariaLabel"
|
|
1838
|
+
},
|
|
1839
|
+
{
|
|
1840
|
+
"name": "aria-labelledby",
|
|
1841
|
+
"type": {
|
|
1842
|
+
"text": "string | null"
|
|
1843
|
+
},
|
|
1844
|
+
"default": "null",
|
|
1845
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
1846
|
+
"fieldName": "ariaLabelledby"
|
|
1847
|
+
}
|
|
1848
|
+
],
|
|
1849
|
+
"superclass": {
|
|
1850
|
+
"name": "Component",
|
|
1851
|
+
"module": "/src/models"
|
|
1852
|
+
},
|
|
1853
|
+
"tagName": "mdc-animation",
|
|
1854
|
+
"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 */",
|
|
1855
|
+
"customElement": true
|
|
1856
|
+
}
|
|
1857
|
+
],
|
|
1858
|
+
"exports": [
|
|
1859
|
+
{
|
|
1860
|
+
"kind": "js",
|
|
1861
|
+
"name": "default",
|
|
1862
|
+
"declaration": {
|
|
1863
|
+
"name": "Animation",
|
|
1864
|
+
"module": "components/animation/animation.component.js"
|
|
1865
|
+
}
|
|
1866
|
+
}
|
|
1867
|
+
]
|
|
1868
|
+
},
|
|
1657
1869
|
{
|
|
1658
1870
|
"kind": "javascript-module",
|
|
1659
1871
|
"path": "components/announcementdialog/announcementdialog.component.js",
|
|
@@ -1890,7 +2102,7 @@
|
|
|
1890
2102
|
"type": {
|
|
1891
2103
|
"text": "number"
|
|
1892
2104
|
},
|
|
1893
|
-
"description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1
|
|
2105
|
+
"description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
|
|
1894
2106
|
"default": "1000",
|
|
1895
2107
|
"attribute": "z-index",
|
|
1896
2108
|
"reflects": true,
|
|
@@ -3082,218 +3294,6 @@
|
|
|
3082
3294
|
}
|
|
3083
3295
|
]
|
|
3084
3296
|
},
|
|
3085
|
-
{
|
|
3086
|
-
"kind": "javascript-module",
|
|
3087
|
-
"path": "components/animation/animation.component.js",
|
|
3088
|
-
"declarations": [
|
|
3089
|
-
{
|
|
3090
|
-
"kind": "class",
|
|
3091
|
-
"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.",
|
|
3092
|
-
"name": "Animation",
|
|
3093
|
-
"members": [
|
|
3094
|
-
{
|
|
3095
|
-
"kind": "field",
|
|
3096
|
-
"name": "name",
|
|
3097
|
-
"type": {
|
|
3098
|
-
"text": "AnimationNames | undefined"
|
|
3099
|
-
},
|
|
3100
|
-
"description": "Name of the animation (= filename)",
|
|
3101
|
-
"attribute": "name",
|
|
3102
|
-
"reflects": true
|
|
3103
|
-
},
|
|
3104
|
-
{
|
|
3105
|
-
"kind": "field",
|
|
3106
|
-
"name": "loop",
|
|
3107
|
-
"type": {
|
|
3108
|
-
"text": "LoopType | undefined"
|
|
3109
|
-
},
|
|
3110
|
-
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
3111
|
-
"attribute": "loop",
|
|
3112
|
-
"reflects": true
|
|
3113
|
-
},
|
|
3114
|
-
{
|
|
3115
|
-
"kind": "field",
|
|
3116
|
-
"name": "autoplay",
|
|
3117
|
-
"type": {
|
|
3118
|
-
"text": "boolean | undefined"
|
|
3119
|
-
},
|
|
3120
|
-
"description": "Weather start the animation automatically",
|
|
3121
|
-
"attribute": "autoplay",
|
|
3122
|
-
"reflects": true
|
|
3123
|
-
},
|
|
3124
|
-
{
|
|
3125
|
-
"kind": "field",
|
|
3126
|
-
"name": "ariaLabel",
|
|
3127
|
-
"type": {
|
|
3128
|
-
"text": "string | null"
|
|
3129
|
-
},
|
|
3130
|
-
"default": "null",
|
|
3131
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
3132
|
-
"attribute": "aria-label"
|
|
3133
|
-
},
|
|
3134
|
-
{
|
|
3135
|
-
"kind": "field",
|
|
3136
|
-
"name": "ariaLabelledby",
|
|
3137
|
-
"type": {
|
|
3138
|
-
"text": "string | null"
|
|
3139
|
-
},
|
|
3140
|
-
"default": "null",
|
|
3141
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
3142
|
-
"attribute": "aria-labelledby"
|
|
3143
|
-
},
|
|
3144
|
-
{
|
|
3145
|
-
"kind": "field",
|
|
3146
|
-
"name": "lottieInstance",
|
|
3147
|
-
"type": {
|
|
3148
|
-
"text": "AnimationItem | undefined"
|
|
3149
|
-
},
|
|
3150
|
-
"privacy": "private",
|
|
3151
|
-
"description": "Lottie animation instance"
|
|
3152
|
-
},
|
|
3153
|
-
{
|
|
3154
|
-
"kind": "field",
|
|
3155
|
-
"name": "containerRef",
|
|
3156
|
-
"type": {
|
|
3157
|
-
"text": "Ref<HTMLDivElement>"
|
|
3158
|
-
},
|
|
3159
|
-
"privacy": "private",
|
|
3160
|
-
"description": "Container for the animation"
|
|
3161
|
-
},
|
|
3162
|
-
{
|
|
3163
|
-
"kind": "field",
|
|
3164
|
-
"name": "animation",
|
|
3165
|
-
"description": "Exposed API of the animation library (lottie)",
|
|
3166
|
-
"readonly": true
|
|
3167
|
-
},
|
|
3168
|
-
{
|
|
3169
|
-
"kind": "method",
|
|
3170
|
-
"name": "getLoopValue",
|
|
3171
|
-
"privacy": "private"
|
|
3172
|
-
},
|
|
3173
|
-
{
|
|
3174
|
-
"kind": "method",
|
|
3175
|
-
"name": "onLoadSuccessHandler",
|
|
3176
|
-
"privacy": "private",
|
|
3177
|
-
"parameters": [
|
|
3178
|
-
{
|
|
3179
|
-
"name": "animationData",
|
|
3180
|
-
"type": {
|
|
3181
|
-
"text": "any"
|
|
3182
|
-
}
|
|
3183
|
-
}
|
|
3184
|
-
],
|
|
3185
|
-
"description": "Create new lotty instance for the loaded data"
|
|
3186
|
-
},
|
|
3187
|
-
{
|
|
3188
|
-
"kind": "method",
|
|
3189
|
-
"name": "onLoadFailHandler",
|
|
3190
|
-
"privacy": "private",
|
|
3191
|
-
"parameters": [
|
|
3192
|
-
{
|
|
3193
|
-
"name": "error",
|
|
3194
|
-
"type": {
|
|
3195
|
-
"text": "Error"
|
|
3196
|
-
}
|
|
3197
|
-
}
|
|
3198
|
-
],
|
|
3199
|
-
"description": "Error handler for animation loading"
|
|
3200
|
-
},
|
|
3201
|
-
{
|
|
3202
|
-
"kind": "method",
|
|
3203
|
-
"name": "getAnimationData",
|
|
3204
|
-
"privacy": "private",
|
|
3205
|
-
"description": "Import animation data dynamically"
|
|
3206
|
-
},
|
|
3207
|
-
{
|
|
3208
|
-
"kind": "field",
|
|
3209
|
-
"name": "onCompleteHandler",
|
|
3210
|
-
"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."
|
|
3211
|
-
}
|
|
3212
|
-
],
|
|
3213
|
-
"events": [
|
|
3214
|
-
{
|
|
3215
|
-
"name": "load",
|
|
3216
|
-
"type": {
|
|
3217
|
-
"text": "CustomEvent"
|
|
3218
|
-
},
|
|
3219
|
-
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
3220
|
-
"reactName": "onLoad"
|
|
3221
|
-
},
|
|
3222
|
-
{
|
|
3223
|
-
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
3224
|
-
"name": "complete",
|
|
3225
|
-
"reactName": "onComplete"
|
|
3226
|
-
},
|
|
3227
|
-
{
|
|
3228
|
-
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
3229
|
-
"name": "error",
|
|
3230
|
-
"reactName": "onError"
|
|
3231
|
-
}
|
|
3232
|
-
],
|
|
3233
|
-
"attributes": [
|
|
3234
|
-
{
|
|
3235
|
-
"name": "name",
|
|
3236
|
-
"type": {
|
|
3237
|
-
"text": "AnimationNames | undefined"
|
|
3238
|
-
},
|
|
3239
|
-
"description": "Name of the animation (= filename)",
|
|
3240
|
-
"fieldName": "name"
|
|
3241
|
-
},
|
|
3242
|
-
{
|
|
3243
|
-
"name": "loop",
|
|
3244
|
-
"type": {
|
|
3245
|
-
"text": "LoopType | undefined"
|
|
3246
|
-
},
|
|
3247
|
-
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
3248
|
-
"fieldName": "loop"
|
|
3249
|
-
},
|
|
3250
|
-
{
|
|
3251
|
-
"name": "autoplay",
|
|
3252
|
-
"type": {
|
|
3253
|
-
"text": "boolean | undefined"
|
|
3254
|
-
},
|
|
3255
|
-
"description": "Weather start the animation automatically",
|
|
3256
|
-
"fieldName": "autoplay"
|
|
3257
|
-
},
|
|
3258
|
-
{
|
|
3259
|
-
"name": "aria-label",
|
|
3260
|
-
"type": {
|
|
3261
|
-
"text": "string | null"
|
|
3262
|
-
},
|
|
3263
|
-
"default": "null",
|
|
3264
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
3265
|
-
"fieldName": "ariaLabel"
|
|
3266
|
-
},
|
|
3267
|
-
{
|
|
3268
|
-
"name": "aria-labelledby",
|
|
3269
|
-
"type": {
|
|
3270
|
-
"text": "string | null"
|
|
3271
|
-
},
|
|
3272
|
-
"default": "null",
|
|
3273
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
3274
|
-
"fieldName": "ariaLabelledby"
|
|
3275
|
-
}
|
|
3276
|
-
],
|
|
3277
|
-
"superclass": {
|
|
3278
|
-
"name": "Component",
|
|
3279
|
-
"module": "/src/models"
|
|
3280
|
-
},
|
|
3281
|
-
"tagName": "mdc-animation",
|
|
3282
|
-
"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 */",
|
|
3283
|
-
"customElement": true
|
|
3284
|
-
}
|
|
3285
|
-
],
|
|
3286
|
-
"exports": [
|
|
3287
|
-
{
|
|
3288
|
-
"kind": "js",
|
|
3289
|
-
"name": "default",
|
|
3290
|
-
"declaration": {
|
|
3291
|
-
"name": "Animation",
|
|
3292
|
-
"module": "components/animation/animation.component.js"
|
|
3293
|
-
}
|
|
3294
|
-
}
|
|
3295
|
-
]
|
|
3296
|
-
},
|
|
3297
3297
|
{
|
|
3298
3298
|
"kind": "javascript-module",
|
|
3299
3299
|
"path": "components/avatar/avatar.component.js",
|
|
@@ -7296,6 +7296,447 @@
|
|
|
7296
7296
|
}
|
|
7297
7297
|
]
|
|
7298
7298
|
},
|
|
7299
|
+
{
|
|
7300
|
+
"kind": "javascript-module",
|
|
7301
|
+
"path": "components/card/card.component.js",
|
|
7302
|
+
"declarations": [
|
|
7303
|
+
{
|
|
7304
|
+
"kind": "class",
|
|
7305
|
+
"description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n - Icon\n - Title\n - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
|
|
7306
|
+
"name": "Card",
|
|
7307
|
+
"cssProperties": [
|
|
7308
|
+
{
|
|
7309
|
+
"description": "The width of the card",
|
|
7310
|
+
"name": "--mdc-card-width"
|
|
7311
|
+
}
|
|
7312
|
+
],
|
|
7313
|
+
"cssParts": [
|
|
7314
|
+
{
|
|
7315
|
+
"description": "The header part of the card",
|
|
7316
|
+
"name": "header"
|
|
7317
|
+
},
|
|
7318
|
+
{
|
|
7319
|
+
"description": "The icon part of the card header",
|
|
7320
|
+
"name": "icon"
|
|
7321
|
+
},
|
|
7322
|
+
{
|
|
7323
|
+
"description": "The body part of the card",
|
|
7324
|
+
"name": "body"
|
|
7325
|
+
},
|
|
7326
|
+
{
|
|
7327
|
+
"description": "The image part of the card",
|
|
7328
|
+
"name": "image"
|
|
7329
|
+
},
|
|
7330
|
+
{
|
|
7331
|
+
"description": "The footer part of the card",
|
|
7332
|
+
"name": "footer"
|
|
7333
|
+
},
|
|
7334
|
+
{
|
|
7335
|
+
"description": "The link part of the card footer",
|
|
7336
|
+
"name": "footer-link"
|
|
7337
|
+
},
|
|
7338
|
+
{
|
|
7339
|
+
"description": "The primary button part of the card footer",
|
|
7340
|
+
"name": "footer-button-primary"
|
|
7341
|
+
},
|
|
7342
|
+
{
|
|
7343
|
+
"description": "The secondary button part of the card footer",
|
|
7344
|
+
"name": "footer-button-secondary"
|
|
7345
|
+
},
|
|
7346
|
+
{
|
|
7347
|
+
"description": "The icon button part of the card header",
|
|
7348
|
+
"name": "icon-button"
|
|
7349
|
+
},
|
|
7350
|
+
{
|
|
7351
|
+
"description": "The text part of the card",
|
|
7352
|
+
"name": "text"
|
|
7353
|
+
}
|
|
7354
|
+
],
|
|
7355
|
+
"slots": [
|
|
7356
|
+
{
|
|
7357
|
+
"description": "This slot is for passing the content before the body",
|
|
7358
|
+
"name": "before-body"
|
|
7359
|
+
},
|
|
7360
|
+
{
|
|
7361
|
+
"description": "This slot is for passing the text content for the card",
|
|
7362
|
+
"name": "body"
|
|
7363
|
+
},
|
|
7364
|
+
{
|
|
7365
|
+
"description": "This slot is for passing the content after the body",
|
|
7366
|
+
"name": "after-body"
|
|
7367
|
+
},
|
|
7368
|
+
{
|
|
7369
|
+
"description": "This slot is for passing `mdc-link` component within the footer section.",
|
|
7370
|
+
"name": "footer-link"
|
|
7371
|
+
},
|
|
7372
|
+
{
|
|
7373
|
+
"description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
|
|
7374
|
+
"name": "footer-button-primary"
|
|
7375
|
+
},
|
|
7376
|
+
{
|
|
7377
|
+
"description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
|
|
7378
|
+
"name": "footer-button-secondary"
|
|
7379
|
+
},
|
|
7380
|
+
{
|
|
7381
|
+
"description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
|
|
7382
|
+
"name": "footer"
|
|
7383
|
+
}
|
|
7384
|
+
],
|
|
7385
|
+
"members": [
|
|
7386
|
+
{
|
|
7387
|
+
"kind": "method",
|
|
7388
|
+
"name": "renderHeader",
|
|
7389
|
+
"privacy": "protected",
|
|
7390
|
+
"description": "Renders the header of the card if title is provided",
|
|
7391
|
+
"return": {
|
|
7392
|
+
"type": {
|
|
7393
|
+
"text": ""
|
|
7394
|
+
}
|
|
7395
|
+
}
|
|
7396
|
+
},
|
|
7397
|
+
{
|
|
7398
|
+
"kind": "field",
|
|
7399
|
+
"name": "cardTitle",
|
|
7400
|
+
"type": {
|
|
7401
|
+
"text": "string"
|
|
7402
|
+
},
|
|
7403
|
+
"default": "''",
|
|
7404
|
+
"description": "The title of the card - part of header section",
|
|
7405
|
+
"attribute": "card-title",
|
|
7406
|
+
"reflects": true,
|
|
7407
|
+
"inheritedFrom": {
|
|
7408
|
+
"name": "CardComponentMixin",
|
|
7409
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
7410
|
+
}
|
|
7411
|
+
},
|
|
7412
|
+
{
|
|
7413
|
+
"kind": "field",
|
|
7414
|
+
"name": "subtitle",
|
|
7415
|
+
"type": {
|
|
7416
|
+
"text": "string"
|
|
7417
|
+
},
|
|
7418
|
+
"default": "''",
|
|
7419
|
+
"description": "The subtitle of the card - part of header section",
|
|
7420
|
+
"attribute": "subtitle",
|
|
7421
|
+
"reflects": true,
|
|
7422
|
+
"inheritedFrom": {
|
|
7423
|
+
"name": "CardComponentMixin",
|
|
7424
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
7425
|
+
}
|
|
7426
|
+
},
|
|
7427
|
+
{
|
|
7428
|
+
"kind": "field",
|
|
7429
|
+
"name": "imageSrc",
|
|
7430
|
+
"type": {
|
|
7431
|
+
"text": "string"
|
|
7432
|
+
},
|
|
7433
|
+
"default": "''",
|
|
7434
|
+
"description": "The image source URL to render on the card",
|
|
7435
|
+
"attribute": "image-src",
|
|
7436
|
+
"reflects": true,
|
|
7437
|
+
"inheritedFrom": {
|
|
7438
|
+
"name": "CardComponentMixin",
|
|
7439
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
7440
|
+
}
|
|
7441
|
+
},
|
|
7442
|
+
{
|
|
7443
|
+
"kind": "field",
|
|
7444
|
+
"name": "imageAlt",
|
|
7445
|
+
"type": {
|
|
7446
|
+
"text": "string"
|
|
7447
|
+
},
|
|
7448
|
+
"default": "''",
|
|
7449
|
+
"description": "The image alt for accessibility support",
|
|
7450
|
+
"attribute": "image-alt",
|
|
7451
|
+
"reflects": true,
|
|
7452
|
+
"inheritedFrom": {
|
|
7453
|
+
"name": "CardComponentMixin",
|
|
7454
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
7455
|
+
}
|
|
7456
|
+
},
|
|
7457
|
+
{
|
|
7458
|
+
"kind": "field",
|
|
7459
|
+
"name": "variant",
|
|
7460
|
+
"type": {
|
|
7461
|
+
"text": "CardVariant"
|
|
7462
|
+
},
|
|
7463
|
+
"description": "The variant of the card. It can either be set to 'border' or 'ghost'",
|
|
7464
|
+
"default": "'border'",
|
|
7465
|
+
"attribute": "variant",
|
|
7466
|
+
"reflects": true,
|
|
7467
|
+
"inheritedFrom": {
|
|
7468
|
+
"name": "CardComponentMixin",
|
|
7469
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
7470
|
+
}
|
|
7471
|
+
},
|
|
7472
|
+
{
|
|
7473
|
+
"kind": "field",
|
|
7474
|
+
"name": "orientation",
|
|
7475
|
+
"type": {
|
|
7476
|
+
"text": "CardOrientation"
|
|
7477
|
+
},
|
|
7478
|
+
"description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
|
|
7479
|
+
"default": "'vertical'",
|
|
7480
|
+
"attribute": "orientation",
|
|
7481
|
+
"reflects": true,
|
|
7482
|
+
"inheritedFrom": {
|
|
7483
|
+
"name": "CardComponentMixin",
|
|
7484
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
7485
|
+
}
|
|
7486
|
+
},
|
|
7487
|
+
{
|
|
7488
|
+
"kind": "field",
|
|
7489
|
+
"name": "titleTagName",
|
|
7490
|
+
"type": {
|
|
7491
|
+
"text": "TagNameType"
|
|
7492
|
+
},
|
|
7493
|
+
"description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
|
|
7494
|
+
"default": "'span'",
|
|
7495
|
+
"attribute": "title-tag-name",
|
|
7496
|
+
"reflects": true,
|
|
7497
|
+
"inheritedFrom": {
|
|
7498
|
+
"name": "CardComponentMixin",
|
|
7499
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
7500
|
+
}
|
|
7501
|
+
},
|
|
7502
|
+
{
|
|
7503
|
+
"kind": "field",
|
|
7504
|
+
"name": "subtitleTagName",
|
|
7505
|
+
"type": {
|
|
7506
|
+
"text": "TagNameType"
|
|
7507
|
+
},
|
|
7508
|
+
"description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
|
|
7509
|
+
"default": "'span'",
|
|
7510
|
+
"attribute": "subtitle-tag-name",
|
|
7511
|
+
"reflects": true,
|
|
7512
|
+
"inheritedFrom": {
|
|
7513
|
+
"name": "CardComponentMixin",
|
|
7514
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
7515
|
+
}
|
|
7516
|
+
},
|
|
7517
|
+
{
|
|
7518
|
+
"kind": "field",
|
|
7519
|
+
"name": "iconName",
|
|
7520
|
+
"type": {
|
|
7521
|
+
"text": "IconNames | undefined"
|
|
7522
|
+
},
|
|
7523
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
7524
|
+
"attribute": "icon-name",
|
|
7525
|
+
"reflects": true,
|
|
7526
|
+
"inheritedFrom": {
|
|
7527
|
+
"name": "CardComponentMixin",
|
|
7528
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
7529
|
+
}
|
|
7530
|
+
},
|
|
7531
|
+
{
|
|
7532
|
+
"kind": "method",
|
|
7533
|
+
"name": "renderImage",
|
|
7534
|
+
"privacy": "protected",
|
|
7535
|
+
"description": "Renders the image on the card if image source is provided",
|
|
7536
|
+
"return": {
|
|
7537
|
+
"type": {
|
|
7538
|
+
"text": ""
|
|
7539
|
+
}
|
|
7540
|
+
},
|
|
7541
|
+
"inheritedFrom": {
|
|
7542
|
+
"name": "CardComponentMixin",
|
|
7543
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
7544
|
+
}
|
|
7545
|
+
},
|
|
7546
|
+
{
|
|
7547
|
+
"kind": "method",
|
|
7548
|
+
"name": "renderIcon",
|
|
7549
|
+
"privacy": "protected",
|
|
7550
|
+
"description": "Renders the icon on the card if icon name is provided",
|
|
7551
|
+
"return": {
|
|
7552
|
+
"type": {
|
|
7553
|
+
"text": ""
|
|
7554
|
+
}
|
|
7555
|
+
},
|
|
7556
|
+
"inheritedFrom": {
|
|
7557
|
+
"name": "CardComponentMixin",
|
|
7558
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
7559
|
+
}
|
|
7560
|
+
},
|
|
7561
|
+
{
|
|
7562
|
+
"kind": "method",
|
|
7563
|
+
"name": "renderTitle",
|
|
7564
|
+
"privacy": "protected",
|
|
7565
|
+
"description": "Renders the title and subtitle on the card",
|
|
7566
|
+
"return": {
|
|
7567
|
+
"type": {
|
|
7568
|
+
"text": ""
|
|
7569
|
+
}
|
|
7570
|
+
},
|
|
7571
|
+
"inheritedFrom": {
|
|
7572
|
+
"name": "CardComponentMixin",
|
|
7573
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
|
7574
|
+
}
|
|
7575
|
+
},
|
|
7576
|
+
{
|
|
7577
|
+
"kind": "method",
|
|
7578
|
+
"name": "renderFooter",
|
|
7579
|
+
"privacy": "protected",
|
|
7580
|
+
"description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
|
|
7581
|
+
"return": {
|
|
7582
|
+
"type": {
|
|
7583
|
+
"text": ""
|
|
7584
|
+
}
|
|
7585
|
+
},
|
|
7586
|
+
"inheritedFrom": {
|
|
7587
|
+
"name": "FooterMixin",
|
|
7588
|
+
"module": "utils/mixins/FooterMixin.js"
|
|
7589
|
+
}
|
|
7590
|
+
}
|
|
7591
|
+
],
|
|
7592
|
+
"mixins": [
|
|
7593
|
+
{
|
|
7594
|
+
"name": "CardComponentMixin",
|
|
7595
|
+
"module": "/src/utils/mixins/CardComponentMixin"
|
|
7596
|
+
},
|
|
7597
|
+
{
|
|
7598
|
+
"name": "FooterMixin",
|
|
7599
|
+
"module": "/src/utils/mixins/FooterMixin"
|
|
7600
|
+
}
|
|
7601
|
+
],
|
|
7602
|
+
"superclass": {
|
|
7603
|
+
"name": "Component",
|
|
7604
|
+
"module": "/src/models"
|
|
7605
|
+
},
|
|
7606
|
+
"tagName": "mdc-card",
|
|
7607
|
+
"jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n * - Icon\n * - Title\n * - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
|
|
7608
|
+
"customElement": true,
|
|
7609
|
+
"attributes": [
|
|
7610
|
+
{
|
|
7611
|
+
"name": "card-title",
|
|
7612
|
+
"type": {
|
|
7613
|
+
"text": "string"
|
|
7614
|
+
},
|
|
7615
|
+
"default": "''",
|
|
7616
|
+
"description": "The title of the card - part of header section",
|
|
7617
|
+
"fieldName": "cardTitle",
|
|
7618
|
+
"inheritedFrom": {
|
|
7619
|
+
"name": "CardComponentMixin",
|
|
7620
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7621
|
+
}
|
|
7622
|
+
},
|
|
7623
|
+
{
|
|
7624
|
+
"name": "subtitle",
|
|
7625
|
+
"type": {
|
|
7626
|
+
"text": "string"
|
|
7627
|
+
},
|
|
7628
|
+
"default": "''",
|
|
7629
|
+
"description": "The subtitle of the card - part of header section",
|
|
7630
|
+
"fieldName": "subtitle",
|
|
7631
|
+
"inheritedFrom": {
|
|
7632
|
+
"name": "CardComponentMixin",
|
|
7633
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7634
|
+
}
|
|
7635
|
+
},
|
|
7636
|
+
{
|
|
7637
|
+
"name": "image-src",
|
|
7638
|
+
"type": {
|
|
7639
|
+
"text": "string"
|
|
7640
|
+
},
|
|
7641
|
+
"default": "''",
|
|
7642
|
+
"description": "The image source URL to render on the card",
|
|
7643
|
+
"fieldName": "imageSrc",
|
|
7644
|
+
"inheritedFrom": {
|
|
7645
|
+
"name": "CardComponentMixin",
|
|
7646
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7647
|
+
}
|
|
7648
|
+
},
|
|
7649
|
+
{
|
|
7650
|
+
"name": "image-alt",
|
|
7651
|
+
"type": {
|
|
7652
|
+
"text": "string"
|
|
7653
|
+
},
|
|
7654
|
+
"default": "''",
|
|
7655
|
+
"description": "The image alt for accessibility support",
|
|
7656
|
+
"fieldName": "imageAlt",
|
|
7657
|
+
"inheritedFrom": {
|
|
7658
|
+
"name": "CardComponentMixin",
|
|
7659
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7660
|
+
}
|
|
7661
|
+
},
|
|
7662
|
+
{
|
|
7663
|
+
"name": "variant",
|
|
7664
|
+
"type": {
|
|
7665
|
+
"text": "CardVariant"
|
|
7666
|
+
},
|
|
7667
|
+
"description": "The variant of the card. It can either be set to 'border' or 'ghost'",
|
|
7668
|
+
"default": "'border'",
|
|
7669
|
+
"fieldName": "variant",
|
|
7670
|
+
"inheritedFrom": {
|
|
7671
|
+
"name": "CardComponentMixin",
|
|
7672
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7673
|
+
}
|
|
7674
|
+
},
|
|
7675
|
+
{
|
|
7676
|
+
"name": "orientation",
|
|
7677
|
+
"type": {
|
|
7678
|
+
"text": "CardOrientation"
|
|
7679
|
+
},
|
|
7680
|
+
"description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
|
|
7681
|
+
"default": "'vertical'",
|
|
7682
|
+
"fieldName": "orientation",
|
|
7683
|
+
"inheritedFrom": {
|
|
7684
|
+
"name": "CardComponentMixin",
|
|
7685
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7686
|
+
}
|
|
7687
|
+
},
|
|
7688
|
+
{
|
|
7689
|
+
"name": "title-tag-name",
|
|
7690
|
+
"type": {
|
|
7691
|
+
"text": "TagNameType"
|
|
7692
|
+
},
|
|
7693
|
+
"description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
|
|
7694
|
+
"default": "'span'",
|
|
7695
|
+
"fieldName": "titleTagName",
|
|
7696
|
+
"inheritedFrom": {
|
|
7697
|
+
"name": "CardComponentMixin",
|
|
7698
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7699
|
+
}
|
|
7700
|
+
},
|
|
7701
|
+
{
|
|
7702
|
+
"name": "subtitle-tag-name",
|
|
7703
|
+
"type": {
|
|
7704
|
+
"text": "TagNameType"
|
|
7705
|
+
},
|
|
7706
|
+
"description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
|
|
7707
|
+
"default": "'span'",
|
|
7708
|
+
"fieldName": "subtitleTagName",
|
|
7709
|
+
"inheritedFrom": {
|
|
7710
|
+
"name": "CardComponentMixin",
|
|
7711
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7712
|
+
}
|
|
7713
|
+
},
|
|
7714
|
+
{
|
|
7715
|
+
"name": "icon-name",
|
|
7716
|
+
"type": {
|
|
7717
|
+
"text": "IconNames | undefined"
|
|
7718
|
+
},
|
|
7719
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
7720
|
+
"fieldName": "iconName",
|
|
7721
|
+
"inheritedFrom": {
|
|
7722
|
+
"name": "CardComponentMixin",
|
|
7723
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
7724
|
+
}
|
|
7725
|
+
}
|
|
7726
|
+
]
|
|
7727
|
+
}
|
|
7728
|
+
],
|
|
7729
|
+
"exports": [
|
|
7730
|
+
{
|
|
7731
|
+
"kind": "js",
|
|
7732
|
+
"name": "default",
|
|
7733
|
+
"declaration": {
|
|
7734
|
+
"name": "Card",
|
|
7735
|
+
"module": "components/card/card.component.js"
|
|
7736
|
+
}
|
|
7737
|
+
}
|
|
7738
|
+
]
|
|
7739
|
+
},
|
|
7299
7740
|
{
|
|
7300
7741
|
"kind": "javascript-module",
|
|
7301
7742
|
"path": "components/cardbutton/cardbutton.component.js",
|
|
@@ -8230,447 +8671,6 @@
|
|
|
8230
8671
|
}
|
|
8231
8672
|
]
|
|
8232
8673
|
},
|
|
8233
|
-
{
|
|
8234
|
-
"kind": "javascript-module",
|
|
8235
|
-
"path": "components/card/card.component.js",
|
|
8236
|
-
"declarations": [
|
|
8237
|
-
{
|
|
8238
|
-
"kind": "class",
|
|
8239
|
-
"description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n - Icon\n - Title\n - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
|
|
8240
|
-
"name": "Card",
|
|
8241
|
-
"cssProperties": [
|
|
8242
|
-
{
|
|
8243
|
-
"description": "The width of the card",
|
|
8244
|
-
"name": "--mdc-card-width"
|
|
8245
|
-
}
|
|
8246
|
-
],
|
|
8247
|
-
"cssParts": [
|
|
8248
|
-
{
|
|
8249
|
-
"description": "The header part of the card",
|
|
8250
|
-
"name": "header"
|
|
8251
|
-
},
|
|
8252
|
-
{
|
|
8253
|
-
"description": "The icon part of the card header",
|
|
8254
|
-
"name": "icon"
|
|
8255
|
-
},
|
|
8256
|
-
{
|
|
8257
|
-
"description": "The body part of the card",
|
|
8258
|
-
"name": "body"
|
|
8259
|
-
},
|
|
8260
|
-
{
|
|
8261
|
-
"description": "The image part of the card",
|
|
8262
|
-
"name": "image"
|
|
8263
|
-
},
|
|
8264
|
-
{
|
|
8265
|
-
"description": "The footer part of the card",
|
|
8266
|
-
"name": "footer"
|
|
8267
|
-
},
|
|
8268
|
-
{
|
|
8269
|
-
"description": "The link part of the card footer",
|
|
8270
|
-
"name": "footer-link"
|
|
8271
|
-
},
|
|
8272
|
-
{
|
|
8273
|
-
"description": "The primary button part of the card footer",
|
|
8274
|
-
"name": "footer-button-primary"
|
|
8275
|
-
},
|
|
8276
|
-
{
|
|
8277
|
-
"description": "The secondary button part of the card footer",
|
|
8278
|
-
"name": "footer-button-secondary"
|
|
8279
|
-
},
|
|
8280
|
-
{
|
|
8281
|
-
"description": "The icon button part of the card header",
|
|
8282
|
-
"name": "icon-button"
|
|
8283
|
-
},
|
|
8284
|
-
{
|
|
8285
|
-
"description": "The text part of the card",
|
|
8286
|
-
"name": "text"
|
|
8287
|
-
}
|
|
8288
|
-
],
|
|
8289
|
-
"slots": [
|
|
8290
|
-
{
|
|
8291
|
-
"description": "This slot is for passing the content before the body",
|
|
8292
|
-
"name": "before-body"
|
|
8293
|
-
},
|
|
8294
|
-
{
|
|
8295
|
-
"description": "This slot is for passing the text content for the card",
|
|
8296
|
-
"name": "body"
|
|
8297
|
-
},
|
|
8298
|
-
{
|
|
8299
|
-
"description": "This slot is for passing the content after the body",
|
|
8300
|
-
"name": "after-body"
|
|
8301
|
-
},
|
|
8302
|
-
{
|
|
8303
|
-
"description": "This slot is for passing `mdc-link` component within the footer section.",
|
|
8304
|
-
"name": "footer-link"
|
|
8305
|
-
},
|
|
8306
|
-
{
|
|
8307
|
-
"description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
|
|
8308
|
-
"name": "footer-button-primary"
|
|
8309
|
-
},
|
|
8310
|
-
{
|
|
8311
|
-
"description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
|
|
8312
|
-
"name": "footer-button-secondary"
|
|
8313
|
-
},
|
|
8314
|
-
{
|
|
8315
|
-
"description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
|
|
8316
|
-
"name": "footer"
|
|
8317
|
-
}
|
|
8318
|
-
],
|
|
8319
|
-
"members": [
|
|
8320
|
-
{
|
|
8321
|
-
"kind": "method",
|
|
8322
|
-
"name": "renderHeader",
|
|
8323
|
-
"privacy": "protected",
|
|
8324
|
-
"description": "Renders the header of the card if title is provided",
|
|
8325
|
-
"return": {
|
|
8326
|
-
"type": {
|
|
8327
|
-
"text": ""
|
|
8328
|
-
}
|
|
8329
|
-
}
|
|
8330
|
-
},
|
|
8331
|
-
{
|
|
8332
|
-
"kind": "field",
|
|
8333
|
-
"name": "cardTitle",
|
|
8334
|
-
"type": {
|
|
8335
|
-
"text": "string"
|
|
8336
|
-
},
|
|
8337
|
-
"default": "''",
|
|
8338
|
-
"description": "The title of the card - part of header section",
|
|
8339
|
-
"attribute": "card-title",
|
|
8340
|
-
"reflects": true,
|
|
8341
|
-
"inheritedFrom": {
|
|
8342
|
-
"name": "CardComponentMixin",
|
|
8343
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
8344
|
-
}
|
|
8345
|
-
},
|
|
8346
|
-
{
|
|
8347
|
-
"kind": "field",
|
|
8348
|
-
"name": "subtitle",
|
|
8349
|
-
"type": {
|
|
8350
|
-
"text": "string"
|
|
8351
|
-
},
|
|
8352
|
-
"default": "''",
|
|
8353
|
-
"description": "The subtitle of the card - part of header section",
|
|
8354
|
-
"attribute": "subtitle",
|
|
8355
|
-
"reflects": true,
|
|
8356
|
-
"inheritedFrom": {
|
|
8357
|
-
"name": "CardComponentMixin",
|
|
8358
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
8359
|
-
}
|
|
8360
|
-
},
|
|
8361
|
-
{
|
|
8362
|
-
"kind": "field",
|
|
8363
|
-
"name": "imageSrc",
|
|
8364
|
-
"type": {
|
|
8365
|
-
"text": "string"
|
|
8366
|
-
},
|
|
8367
|
-
"default": "''",
|
|
8368
|
-
"description": "The image source URL to render on the card",
|
|
8369
|
-
"attribute": "image-src",
|
|
8370
|
-
"reflects": true,
|
|
8371
|
-
"inheritedFrom": {
|
|
8372
|
-
"name": "CardComponentMixin",
|
|
8373
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
8374
|
-
}
|
|
8375
|
-
},
|
|
8376
|
-
{
|
|
8377
|
-
"kind": "field",
|
|
8378
|
-
"name": "imageAlt",
|
|
8379
|
-
"type": {
|
|
8380
|
-
"text": "string"
|
|
8381
|
-
},
|
|
8382
|
-
"default": "''",
|
|
8383
|
-
"description": "The image alt for accessibility support",
|
|
8384
|
-
"attribute": "image-alt",
|
|
8385
|
-
"reflects": true,
|
|
8386
|
-
"inheritedFrom": {
|
|
8387
|
-
"name": "CardComponentMixin",
|
|
8388
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
8389
|
-
}
|
|
8390
|
-
},
|
|
8391
|
-
{
|
|
8392
|
-
"kind": "field",
|
|
8393
|
-
"name": "variant",
|
|
8394
|
-
"type": {
|
|
8395
|
-
"text": "CardVariant"
|
|
8396
|
-
},
|
|
8397
|
-
"description": "The variant of the card. It can either be set to 'border' or 'ghost'",
|
|
8398
|
-
"default": "'border'",
|
|
8399
|
-
"attribute": "variant",
|
|
8400
|
-
"reflects": true,
|
|
8401
|
-
"inheritedFrom": {
|
|
8402
|
-
"name": "CardComponentMixin",
|
|
8403
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
8404
|
-
}
|
|
8405
|
-
},
|
|
8406
|
-
{
|
|
8407
|
-
"kind": "field",
|
|
8408
|
-
"name": "orientation",
|
|
8409
|
-
"type": {
|
|
8410
|
-
"text": "CardOrientation"
|
|
8411
|
-
},
|
|
8412
|
-
"description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
|
|
8413
|
-
"default": "'vertical'",
|
|
8414
|
-
"attribute": "orientation",
|
|
8415
|
-
"reflects": true,
|
|
8416
|
-
"inheritedFrom": {
|
|
8417
|
-
"name": "CardComponentMixin",
|
|
8418
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
8419
|
-
}
|
|
8420
|
-
},
|
|
8421
|
-
{
|
|
8422
|
-
"kind": "field",
|
|
8423
|
-
"name": "titleTagName",
|
|
8424
|
-
"type": {
|
|
8425
|
-
"text": "TagNameType"
|
|
8426
|
-
},
|
|
8427
|
-
"description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
|
|
8428
|
-
"default": "'span'",
|
|
8429
|
-
"attribute": "title-tag-name",
|
|
8430
|
-
"reflects": true,
|
|
8431
|
-
"inheritedFrom": {
|
|
8432
|
-
"name": "CardComponentMixin",
|
|
8433
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
8434
|
-
}
|
|
8435
|
-
},
|
|
8436
|
-
{
|
|
8437
|
-
"kind": "field",
|
|
8438
|
-
"name": "subtitleTagName",
|
|
8439
|
-
"type": {
|
|
8440
|
-
"text": "TagNameType"
|
|
8441
|
-
},
|
|
8442
|
-
"description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
|
|
8443
|
-
"default": "'span'",
|
|
8444
|
-
"attribute": "subtitle-tag-name",
|
|
8445
|
-
"reflects": true,
|
|
8446
|
-
"inheritedFrom": {
|
|
8447
|
-
"name": "CardComponentMixin",
|
|
8448
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
8449
|
-
}
|
|
8450
|
-
},
|
|
8451
|
-
{
|
|
8452
|
-
"kind": "field",
|
|
8453
|
-
"name": "iconName",
|
|
8454
|
-
"type": {
|
|
8455
|
-
"text": "IconNames | undefined"
|
|
8456
|
-
},
|
|
8457
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
8458
|
-
"attribute": "icon-name",
|
|
8459
|
-
"reflects": true,
|
|
8460
|
-
"inheritedFrom": {
|
|
8461
|
-
"name": "CardComponentMixin",
|
|
8462
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
8463
|
-
}
|
|
8464
|
-
},
|
|
8465
|
-
{
|
|
8466
|
-
"kind": "method",
|
|
8467
|
-
"name": "renderImage",
|
|
8468
|
-
"privacy": "protected",
|
|
8469
|
-
"description": "Renders the image on the card if image source is provided",
|
|
8470
|
-
"return": {
|
|
8471
|
-
"type": {
|
|
8472
|
-
"text": ""
|
|
8473
|
-
}
|
|
8474
|
-
},
|
|
8475
|
-
"inheritedFrom": {
|
|
8476
|
-
"name": "CardComponentMixin",
|
|
8477
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
8478
|
-
}
|
|
8479
|
-
},
|
|
8480
|
-
{
|
|
8481
|
-
"kind": "method",
|
|
8482
|
-
"name": "renderIcon",
|
|
8483
|
-
"privacy": "protected",
|
|
8484
|
-
"description": "Renders the icon on the card if icon name is provided",
|
|
8485
|
-
"return": {
|
|
8486
|
-
"type": {
|
|
8487
|
-
"text": ""
|
|
8488
|
-
}
|
|
8489
|
-
},
|
|
8490
|
-
"inheritedFrom": {
|
|
8491
|
-
"name": "CardComponentMixin",
|
|
8492
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
8493
|
-
}
|
|
8494
|
-
},
|
|
8495
|
-
{
|
|
8496
|
-
"kind": "method",
|
|
8497
|
-
"name": "renderTitle",
|
|
8498
|
-
"privacy": "protected",
|
|
8499
|
-
"description": "Renders the title and subtitle on the card",
|
|
8500
|
-
"return": {
|
|
8501
|
-
"type": {
|
|
8502
|
-
"text": ""
|
|
8503
|
-
}
|
|
8504
|
-
},
|
|
8505
|
-
"inheritedFrom": {
|
|
8506
|
-
"name": "CardComponentMixin",
|
|
8507
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
|
8508
|
-
}
|
|
8509
|
-
},
|
|
8510
|
-
{
|
|
8511
|
-
"kind": "method",
|
|
8512
|
-
"name": "renderFooter",
|
|
8513
|
-
"privacy": "protected",
|
|
8514
|
-
"description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
|
|
8515
|
-
"return": {
|
|
8516
|
-
"type": {
|
|
8517
|
-
"text": ""
|
|
8518
|
-
}
|
|
8519
|
-
},
|
|
8520
|
-
"inheritedFrom": {
|
|
8521
|
-
"name": "FooterMixin",
|
|
8522
|
-
"module": "utils/mixins/FooterMixin.js"
|
|
8523
|
-
}
|
|
8524
|
-
}
|
|
8525
|
-
],
|
|
8526
|
-
"mixins": [
|
|
8527
|
-
{
|
|
8528
|
-
"name": "CardComponentMixin",
|
|
8529
|
-
"module": "/src/utils/mixins/CardComponentMixin"
|
|
8530
|
-
},
|
|
8531
|
-
{
|
|
8532
|
-
"name": "FooterMixin",
|
|
8533
|
-
"module": "/src/utils/mixins/FooterMixin"
|
|
8534
|
-
}
|
|
8535
|
-
],
|
|
8536
|
-
"superclass": {
|
|
8537
|
-
"name": "Component",
|
|
8538
|
-
"module": "/src/models"
|
|
8539
|
-
},
|
|
8540
|
-
"tagName": "mdc-card",
|
|
8541
|
-
"jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n * - Icon\n * - Title\n * - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
|
|
8542
|
-
"customElement": true,
|
|
8543
|
-
"attributes": [
|
|
8544
|
-
{
|
|
8545
|
-
"name": "card-title",
|
|
8546
|
-
"type": {
|
|
8547
|
-
"text": "string"
|
|
8548
|
-
},
|
|
8549
|
-
"default": "''",
|
|
8550
|
-
"description": "The title of the card - part of header section",
|
|
8551
|
-
"fieldName": "cardTitle",
|
|
8552
|
-
"inheritedFrom": {
|
|
8553
|
-
"name": "CardComponentMixin",
|
|
8554
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
8555
|
-
}
|
|
8556
|
-
},
|
|
8557
|
-
{
|
|
8558
|
-
"name": "subtitle",
|
|
8559
|
-
"type": {
|
|
8560
|
-
"text": "string"
|
|
8561
|
-
},
|
|
8562
|
-
"default": "''",
|
|
8563
|
-
"description": "The subtitle of the card - part of header section",
|
|
8564
|
-
"fieldName": "subtitle",
|
|
8565
|
-
"inheritedFrom": {
|
|
8566
|
-
"name": "CardComponentMixin",
|
|
8567
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
8568
|
-
}
|
|
8569
|
-
},
|
|
8570
|
-
{
|
|
8571
|
-
"name": "image-src",
|
|
8572
|
-
"type": {
|
|
8573
|
-
"text": "string"
|
|
8574
|
-
},
|
|
8575
|
-
"default": "''",
|
|
8576
|
-
"description": "The image source URL to render on the card",
|
|
8577
|
-
"fieldName": "imageSrc",
|
|
8578
|
-
"inheritedFrom": {
|
|
8579
|
-
"name": "CardComponentMixin",
|
|
8580
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
8581
|
-
}
|
|
8582
|
-
},
|
|
8583
|
-
{
|
|
8584
|
-
"name": "image-alt",
|
|
8585
|
-
"type": {
|
|
8586
|
-
"text": "string"
|
|
8587
|
-
},
|
|
8588
|
-
"default": "''",
|
|
8589
|
-
"description": "The image alt for accessibility support",
|
|
8590
|
-
"fieldName": "imageAlt",
|
|
8591
|
-
"inheritedFrom": {
|
|
8592
|
-
"name": "CardComponentMixin",
|
|
8593
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
8594
|
-
}
|
|
8595
|
-
},
|
|
8596
|
-
{
|
|
8597
|
-
"name": "variant",
|
|
8598
|
-
"type": {
|
|
8599
|
-
"text": "CardVariant"
|
|
8600
|
-
},
|
|
8601
|
-
"description": "The variant of the card. It can either be set to 'border' or 'ghost'",
|
|
8602
|
-
"default": "'border'",
|
|
8603
|
-
"fieldName": "variant",
|
|
8604
|
-
"inheritedFrom": {
|
|
8605
|
-
"name": "CardComponentMixin",
|
|
8606
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
8607
|
-
}
|
|
8608
|
-
},
|
|
8609
|
-
{
|
|
8610
|
-
"name": "orientation",
|
|
8611
|
-
"type": {
|
|
8612
|
-
"text": "CardOrientation"
|
|
8613
|
-
},
|
|
8614
|
-
"description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
|
|
8615
|
-
"default": "'vertical'",
|
|
8616
|
-
"fieldName": "orientation",
|
|
8617
|
-
"inheritedFrom": {
|
|
8618
|
-
"name": "CardComponentMixin",
|
|
8619
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
8620
|
-
}
|
|
8621
|
-
},
|
|
8622
|
-
{
|
|
8623
|
-
"name": "title-tag-name",
|
|
8624
|
-
"type": {
|
|
8625
|
-
"text": "TagNameType"
|
|
8626
|
-
},
|
|
8627
|
-
"description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
|
|
8628
|
-
"default": "'span'",
|
|
8629
|
-
"fieldName": "titleTagName",
|
|
8630
|
-
"inheritedFrom": {
|
|
8631
|
-
"name": "CardComponentMixin",
|
|
8632
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
8633
|
-
}
|
|
8634
|
-
},
|
|
8635
|
-
{
|
|
8636
|
-
"name": "subtitle-tag-name",
|
|
8637
|
-
"type": {
|
|
8638
|
-
"text": "TagNameType"
|
|
8639
|
-
},
|
|
8640
|
-
"description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
|
|
8641
|
-
"default": "'span'",
|
|
8642
|
-
"fieldName": "subtitleTagName",
|
|
8643
|
-
"inheritedFrom": {
|
|
8644
|
-
"name": "CardComponentMixin",
|
|
8645
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
8646
|
-
}
|
|
8647
|
-
},
|
|
8648
|
-
{
|
|
8649
|
-
"name": "icon-name",
|
|
8650
|
-
"type": {
|
|
8651
|
-
"text": "IconNames | undefined"
|
|
8652
|
-
},
|
|
8653
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
8654
|
-
"fieldName": "iconName",
|
|
8655
|
-
"inheritedFrom": {
|
|
8656
|
-
"name": "CardComponentMixin",
|
|
8657
|
-
"module": "src/utils/mixins/CardComponentMixin.ts"
|
|
8658
|
-
}
|
|
8659
|
-
}
|
|
8660
|
-
]
|
|
8661
|
-
}
|
|
8662
|
-
],
|
|
8663
|
-
"exports": [
|
|
8664
|
-
{
|
|
8665
|
-
"kind": "js",
|
|
8666
|
-
"name": "default",
|
|
8667
|
-
"declaration": {
|
|
8668
|
-
"name": "Card",
|
|
8669
|
-
"module": "components/card/card.component.js"
|
|
8670
|
-
}
|
|
8671
|
-
}
|
|
8672
|
-
]
|
|
8673
|
-
},
|
|
8674
8674
|
{
|
|
8675
8675
|
"kind": "javascript-module",
|
|
8676
8676
|
"path": "components/cardcheckbox/cardcheckbox.component.js",
|
|
@@ -11906,13 +11906,12 @@
|
|
|
11906
11906
|
{
|
|
11907
11907
|
"kind": "field",
|
|
11908
11908
|
"name": "zIndex",
|
|
11909
|
+
"description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
|
|
11910
|
+
"attribute": "z-index",
|
|
11911
|
+
"reflects": true,
|
|
11909
11912
|
"type": {
|
|
11910
11913
|
"text": "number"
|
|
11911
11914
|
},
|
|
11912
|
-
"description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
|
|
11913
|
-
"default": "1000",
|
|
11914
|
-
"attribute": "z-index",
|
|
11915
|
-
"reflects": true,
|
|
11916
11915
|
"inheritedFrom": {
|
|
11917
11916
|
"name": "Popover",
|
|
11918
11917
|
"module": "components/popover/popover.component.js"
|
|
@@ -13567,11 +13566,7 @@
|
|
|
13567
13566
|
},
|
|
13568
13567
|
{
|
|
13569
13568
|
"name": "z-index",
|
|
13570
|
-
"
|
|
13571
|
-
"text": "number"
|
|
13572
|
-
},
|
|
13573
|
-
"description": "The z-index of the popover.",
|
|
13574
|
-
"default": "1000",
|
|
13569
|
+
"description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n its first-level child popover will have a z-index of 1003,\n and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
|
|
13575
13570
|
"fieldName": "zIndex",
|
|
13576
13571
|
"inheritedFrom": {
|
|
13577
13572
|
"name": "Popover",
|
|
@@ -27281,13 +27276,12 @@
|
|
|
27281
27276
|
{
|
|
27282
27277
|
"kind": "field",
|
|
27283
27278
|
"name": "zIndex",
|
|
27279
|
+
"description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
|
|
27280
|
+
"attribute": "z-index",
|
|
27281
|
+
"reflects": true,
|
|
27284
27282
|
"type": {
|
|
27285
27283
|
"text": "number"
|
|
27286
27284
|
},
|
|
27287
|
-
"description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
|
|
27288
|
-
"default": "1000",
|
|
27289
|
-
"attribute": "z-index",
|
|
27290
|
-
"reflects": true,
|
|
27291
27285
|
"inheritedFrom": {
|
|
27292
27286
|
"name": "Popover",
|
|
27293
27287
|
"module": "components/popover/popover.component.js"
|
|
@@ -28932,11 +28926,7 @@
|
|
|
28932
28926
|
},
|
|
28933
28927
|
{
|
|
28934
28928
|
"name": "z-index",
|
|
28935
|
-
"
|
|
28936
|
-
"text": "number"
|
|
28937
|
-
},
|
|
28938
|
-
"description": "The z-index of the popover.",
|
|
28939
|
-
"default": "1000",
|
|
28929
|
+
"description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n its first-level child popover will have a z-index of 1003,\n and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
|
|
28940
28930
|
"fieldName": "zIndex",
|
|
28941
28931
|
"inheritedFrom": {
|
|
28942
28932
|
"name": "Popover",
|
|
@@ -33412,7 +33402,7 @@
|
|
|
33412
33402
|
"declarations": [
|
|
33413
33403
|
{
|
|
33414
33404
|
"kind": "class",
|
|
33415
|
-
"description": "Popover is
|
|
33405
|
+
"description": "Popover is generic overlay which can be triggered by any actionable element.\n\nIt can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n\nThe popover automatically positions itself based on available space and\nsupports dynamic height adjustments with scrollable content when needed.\nIt uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n\n## Limitations\n\n### On trigger for multiple popovers\n\nA component (button, etc.) can trigger more than one popover, but only one of them should change the\naria-expanded and aria-haspopup attributes on the trigger.\n\nTo prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\nPopovers except one.\n\n### React Popover with append-to attribute\n\nReact mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\nand mounts to the specified element. React will not know about the move and will not know about the\nnewly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\nadded/removed by React, for example:\n\n```tsx\nconst SomeComponent = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (<div>\n {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n </div>);\n}\n```\nAs a workaround Popover need to wrap with any other element/component, for example:\n```tsx\nconst SomeComponent = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (<div>\n {isOpen && <div>\n <Popover append-to=\"some-element-id\">...</mdc-popover>\n <div>}\n </div>);\n}\n```\nNote the wrapper <div> around the Popover component (React.Fragment does not work).",
|
|
33416
33406
|
"name": "Popover",
|
|
33417
33407
|
"cssProperties": [
|
|
33418
33408
|
{
|
|
@@ -33778,8 +33768,7 @@
|
|
|
33778
33768
|
"type": {
|
|
33779
33769
|
"text": "number"
|
|
33780
33770
|
},
|
|
33781
|
-
"description": "The z-index of the popover.",
|
|
33782
|
-
"default": "1000",
|
|
33771
|
+
"description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n its first-level child popover will have a z-index of 1003,\n and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
|
|
33783
33772
|
"attribute": "z-index",
|
|
33784
33773
|
"reflects": true,
|
|
33785
33774
|
"inheritedFrom": {
|
|
@@ -34835,11 +34824,7 @@
|
|
|
34835
34824
|
},
|
|
34836
34825
|
{
|
|
34837
34826
|
"name": "z-index",
|
|
34838
|
-
"
|
|
34839
|
-
"text": "number"
|
|
34840
|
-
},
|
|
34841
|
-
"description": "The z-index of the popover.",
|
|
34842
|
-
"default": "1000",
|
|
34827
|
+
"description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n its first-level child popover will have a z-index of 1003,\n and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
|
|
34843
34828
|
"fieldName": "zIndex"
|
|
34844
34829
|
},
|
|
34845
34830
|
{
|
|
@@ -34955,7 +34940,7 @@
|
|
|
34955
34940
|
"module": "/src/models"
|
|
34956
34941
|
},
|
|
34957
34942
|
"tagName": "mdc-popover",
|
|
34958
|
-
"jsDoc": "/**\n * Popover is
|
|
34943
|
+
"jsDoc": "/**\n * Popover is generic overlay which can be triggered by any actionable element.\n *\n * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n *\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed.\n * It uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n *\n * ## Limitations\n *\n * ### On trigger for multiple popovers\n *\n * A component (button, etc.) can trigger more than one popover, but only one of them should change the\n * aria-expanded and aria-haspopup attributes on the trigger.\n *\n * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\n * Popovers except one.\n *\n * ### React Popover with append-to attribute\n *\n * React mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\n * and mounts to the specified element. React will not know about the move and will not know about the\n * newly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\n * added/removed by React, for example:\n *\n * ```tsx\n * const SomeComponent = () => {\n * const [isOpen, setIsOpen] = useState(false);\n * return (<div>\n * {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n * </div>);\n * }\n * ```\n * As a workaround Popover need to wrap with any other element/component, for example:\n * ```tsx\n * const SomeComponent = () => {\n * const [isOpen, setIsOpen] = useState(false);\n * return (<div>\n * {isOpen && <div>\n * <Popover append-to=\"some-element-id\">...</mdc-popover>\n * <div>}\n * </div>);\n * }\n * ```\n * Note the wrapper <div> around the Popover component (React.Fragment does not work).\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n * @cssproperty --mdc-popover-width - width of the popover\n *\n * @slot - Default slot for the popover content\n *\n * @csspart popover-close - The close button of the popover.\n * @csspart popover-content - The content of the popover.\n * @csspart popover-hover-bridge - The hover bridge of the popover.\n */",
|
|
34959
34944
|
"customElement": true
|
|
34960
34945
|
}
|
|
34961
34946
|
],
|
|
@@ -49553,8 +49538,7 @@
|
|
|
49553
49538
|
"type": {
|
|
49554
49539
|
"text": "number"
|
|
49555
49540
|
},
|
|
49556
|
-
"description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1
|
|
49557
|
-
"default": "1000",
|
|
49541
|
+
"description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
|
|
49558
49542
|
"attribute": "z-index",
|
|
49559
49543
|
"reflects": true,
|
|
49560
49544
|
"inheritedFrom": {
|
|
@@ -51251,11 +51235,7 @@
|
|
|
51251
51235
|
},
|
|
51252
51236
|
{
|
|
51253
51237
|
"name": "z-index",
|
|
51254
|
-
"
|
|
51255
|
-
"text": "number"
|
|
51256
|
-
},
|
|
51257
|
-
"description": "The z-index of the popover.",
|
|
51258
|
-
"default": "1000",
|
|
51238
|
+
"description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n its first-level child popover will have a z-index of 1003,\n and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
|
|
51259
51239
|
"fieldName": "zIndex",
|
|
51260
51240
|
"inheritedFrom": {
|
|
51261
51241
|
"name": "Popover",
|
|
@@ -51619,8 +51599,7 @@
|
|
|
51619
51599
|
"type": {
|
|
51620
51600
|
"text": "number"
|
|
51621
51601
|
},
|
|
51622
|
-
"description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1
|
|
51623
|
-
"default": "1000",
|
|
51602
|
+
"description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
|
|
51624
51603
|
"attribute": "z-index",
|
|
51625
51604
|
"reflects": true,
|
|
51626
51605
|
"inheritedFrom": {
|
|
@@ -53333,11 +53312,7 @@
|
|
|
53333
53312
|
},
|
|
53334
53313
|
{
|
|
53335
53314
|
"name": "z-index",
|
|
53336
|
-
"
|
|
53337
|
-
"text": "number"
|
|
53338
|
-
},
|
|
53339
|
-
"description": "The z-index of the popover.",
|
|
53340
|
-
"default": "1000",
|
|
53315
|
+
"description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n its first-level child popover will have a z-index of 1003,\n and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
|
|
53341
53316
|
"fieldName": "zIndex",
|
|
53342
53317
|
"inheritedFrom": {
|
|
53343
53318
|
"name": "Popover",
|
|
@@ -54760,7 +54735,7 @@
|
|
|
54760
54735
|
"type": {
|
|
54761
54736
|
"text": "number"
|
|
54762
54737
|
},
|
|
54763
|
-
"description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1
|
|
54738
|
+
"description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable."
|
|
54764
54739
|
}
|
|
54765
54740
|
],
|
|
54766
54741
|
"parameters": [
|