@momentum-design/components 0.105.4 → 0.106.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +351 -351
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
|
@@ -1502,218 +1502,6 @@
|
|
|
1502
1502
|
}
|
|
1503
1503
|
]
|
|
1504
1504
|
},
|
|
1505
|
-
{
|
|
1506
|
-
"kind": "javascript-module",
|
|
1507
|
-
"path": "components/animation/animation.component.js",
|
|
1508
|
-
"declarations": [
|
|
1509
|
-
{
|
|
1510
|
-
"kind": "class",
|
|
1511
|
-
"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.",
|
|
1512
|
-
"name": "Animation",
|
|
1513
|
-
"members": [
|
|
1514
|
-
{
|
|
1515
|
-
"kind": "field",
|
|
1516
|
-
"name": "name",
|
|
1517
|
-
"type": {
|
|
1518
|
-
"text": "AnimationNames | undefined"
|
|
1519
|
-
},
|
|
1520
|
-
"description": "Name of the animation (= filename)",
|
|
1521
|
-
"attribute": "name",
|
|
1522
|
-
"reflects": true
|
|
1523
|
-
},
|
|
1524
|
-
{
|
|
1525
|
-
"kind": "field",
|
|
1526
|
-
"name": "loop",
|
|
1527
|
-
"type": {
|
|
1528
|
-
"text": "LoopType | undefined"
|
|
1529
|
-
},
|
|
1530
|
-
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
1531
|
-
"attribute": "loop",
|
|
1532
|
-
"reflects": true
|
|
1533
|
-
},
|
|
1534
|
-
{
|
|
1535
|
-
"kind": "field",
|
|
1536
|
-
"name": "autoplay",
|
|
1537
|
-
"type": {
|
|
1538
|
-
"text": "boolean | undefined"
|
|
1539
|
-
},
|
|
1540
|
-
"description": "Weather start the animation automatically",
|
|
1541
|
-
"attribute": "autoplay",
|
|
1542
|
-
"reflects": true
|
|
1543
|
-
},
|
|
1544
|
-
{
|
|
1545
|
-
"kind": "field",
|
|
1546
|
-
"name": "ariaLabel",
|
|
1547
|
-
"type": {
|
|
1548
|
-
"text": "string | null"
|
|
1549
|
-
},
|
|
1550
|
-
"default": "null",
|
|
1551
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
1552
|
-
"attribute": "aria-label"
|
|
1553
|
-
},
|
|
1554
|
-
{
|
|
1555
|
-
"kind": "field",
|
|
1556
|
-
"name": "ariaLabelledBy",
|
|
1557
|
-
"type": {
|
|
1558
|
-
"text": "string | null"
|
|
1559
|
-
},
|
|
1560
|
-
"default": "null",
|
|
1561
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
1562
|
-
"attribute": "aria-labelledby"
|
|
1563
|
-
},
|
|
1564
|
-
{
|
|
1565
|
-
"kind": "field",
|
|
1566
|
-
"name": "lottieInstance",
|
|
1567
|
-
"type": {
|
|
1568
|
-
"text": "AnimationItem | undefined"
|
|
1569
|
-
},
|
|
1570
|
-
"privacy": "private",
|
|
1571
|
-
"description": "Lottie animation instance"
|
|
1572
|
-
},
|
|
1573
|
-
{
|
|
1574
|
-
"kind": "field",
|
|
1575
|
-
"name": "containerRef",
|
|
1576
|
-
"type": {
|
|
1577
|
-
"text": "Ref<HTMLDivElement>"
|
|
1578
|
-
},
|
|
1579
|
-
"privacy": "private",
|
|
1580
|
-
"description": "Container for the animation"
|
|
1581
|
-
},
|
|
1582
|
-
{
|
|
1583
|
-
"kind": "field",
|
|
1584
|
-
"name": "animation",
|
|
1585
|
-
"description": "Exposed API of the animation library (lottie)",
|
|
1586
|
-
"readonly": true
|
|
1587
|
-
},
|
|
1588
|
-
{
|
|
1589
|
-
"kind": "method",
|
|
1590
|
-
"name": "getLoopValue",
|
|
1591
|
-
"privacy": "private"
|
|
1592
|
-
},
|
|
1593
|
-
{
|
|
1594
|
-
"kind": "method",
|
|
1595
|
-
"name": "onLoadSuccessHandler",
|
|
1596
|
-
"privacy": "private",
|
|
1597
|
-
"parameters": [
|
|
1598
|
-
{
|
|
1599
|
-
"name": "animationData",
|
|
1600
|
-
"type": {
|
|
1601
|
-
"text": "any"
|
|
1602
|
-
}
|
|
1603
|
-
}
|
|
1604
|
-
],
|
|
1605
|
-
"description": "Create new lotty instance for the loaded data"
|
|
1606
|
-
},
|
|
1607
|
-
{
|
|
1608
|
-
"kind": "method",
|
|
1609
|
-
"name": "onLoadFailHandler",
|
|
1610
|
-
"privacy": "private",
|
|
1611
|
-
"parameters": [
|
|
1612
|
-
{
|
|
1613
|
-
"name": "error",
|
|
1614
|
-
"type": {
|
|
1615
|
-
"text": "Error"
|
|
1616
|
-
}
|
|
1617
|
-
}
|
|
1618
|
-
],
|
|
1619
|
-
"description": "Error handler for animation loading"
|
|
1620
|
-
},
|
|
1621
|
-
{
|
|
1622
|
-
"kind": "method",
|
|
1623
|
-
"name": "getAnimationData",
|
|
1624
|
-
"privacy": "private",
|
|
1625
|
-
"description": "Import animation data dynamically"
|
|
1626
|
-
},
|
|
1627
|
-
{
|
|
1628
|
-
"kind": "field",
|
|
1629
|
-
"name": "onCompleteHandler",
|
|
1630
|
-
"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."
|
|
1631
|
-
}
|
|
1632
|
-
],
|
|
1633
|
-
"events": [
|
|
1634
|
-
{
|
|
1635
|
-
"name": "load",
|
|
1636
|
-
"type": {
|
|
1637
|
-
"text": "CustomEvent"
|
|
1638
|
-
},
|
|
1639
|
-
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
1640
|
-
"reactName": "onLoad"
|
|
1641
|
-
},
|
|
1642
|
-
{
|
|
1643
|
-
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
1644
|
-
"name": "complete",
|
|
1645
|
-
"reactName": "onComplete"
|
|
1646
|
-
},
|
|
1647
|
-
{
|
|
1648
|
-
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
1649
|
-
"name": "error",
|
|
1650
|
-
"reactName": "onError"
|
|
1651
|
-
}
|
|
1652
|
-
],
|
|
1653
|
-
"attributes": [
|
|
1654
|
-
{
|
|
1655
|
-
"name": "name",
|
|
1656
|
-
"type": {
|
|
1657
|
-
"text": "AnimationNames | undefined"
|
|
1658
|
-
},
|
|
1659
|
-
"description": "Name of the animation (= filename)",
|
|
1660
|
-
"fieldName": "name"
|
|
1661
|
-
},
|
|
1662
|
-
{
|
|
1663
|
-
"name": "loop",
|
|
1664
|
-
"type": {
|
|
1665
|
-
"text": "LoopType | undefined"
|
|
1666
|
-
},
|
|
1667
|
-
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
1668
|
-
"fieldName": "loop"
|
|
1669
|
-
},
|
|
1670
|
-
{
|
|
1671
|
-
"name": "autoplay",
|
|
1672
|
-
"type": {
|
|
1673
|
-
"text": "boolean | undefined"
|
|
1674
|
-
},
|
|
1675
|
-
"description": "Weather start the animation automatically",
|
|
1676
|
-
"fieldName": "autoplay"
|
|
1677
|
-
},
|
|
1678
|
-
{
|
|
1679
|
-
"name": "aria-label",
|
|
1680
|
-
"type": {
|
|
1681
|
-
"text": "string | null"
|
|
1682
|
-
},
|
|
1683
|
-
"default": "null",
|
|
1684
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
1685
|
-
"fieldName": "ariaLabel"
|
|
1686
|
-
},
|
|
1687
|
-
{
|
|
1688
|
-
"name": "aria-labelledby",
|
|
1689
|
-
"type": {
|
|
1690
|
-
"text": "string | null"
|
|
1691
|
-
},
|
|
1692
|
-
"default": "null",
|
|
1693
|
-
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
1694
|
-
"fieldName": "ariaLabelledBy"
|
|
1695
|
-
}
|
|
1696
|
-
],
|
|
1697
|
-
"superclass": {
|
|
1698
|
-
"name": "Component",
|
|
1699
|
-
"module": "/src/models"
|
|
1700
|
-
},
|
|
1701
|
-
"tagName": "mdc-animation",
|
|
1702
|
-
"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 */",
|
|
1703
|
-
"customElement": true
|
|
1704
|
-
}
|
|
1705
|
-
],
|
|
1706
|
-
"exports": [
|
|
1707
|
-
{
|
|
1708
|
-
"kind": "js",
|
|
1709
|
-
"name": "default",
|
|
1710
|
-
"declaration": {
|
|
1711
|
-
"name": "Animation",
|
|
1712
|
-
"module": "components/animation/animation.component.js"
|
|
1713
|
-
}
|
|
1714
|
-
}
|
|
1715
|
-
]
|
|
1716
|
-
},
|
|
1717
1505
|
{
|
|
1718
1506
|
"kind": "javascript-module",
|
|
1719
1507
|
"path": "components/appheader/appheader.component.js",
|
|
@@ -2041,6 +1829,218 @@
|
|
|
2041
1829
|
}
|
|
2042
1830
|
]
|
|
2043
1831
|
},
|
|
1832
|
+
{
|
|
1833
|
+
"kind": "javascript-module",
|
|
1834
|
+
"path": "components/animation/animation.component.js",
|
|
1835
|
+
"declarations": [
|
|
1836
|
+
{
|
|
1837
|
+
"kind": "class",
|
|
1838
|
+
"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.",
|
|
1839
|
+
"name": "Animation",
|
|
1840
|
+
"members": [
|
|
1841
|
+
{
|
|
1842
|
+
"kind": "field",
|
|
1843
|
+
"name": "name",
|
|
1844
|
+
"type": {
|
|
1845
|
+
"text": "AnimationNames | undefined"
|
|
1846
|
+
},
|
|
1847
|
+
"description": "Name of the animation (= filename)",
|
|
1848
|
+
"attribute": "name",
|
|
1849
|
+
"reflects": true
|
|
1850
|
+
},
|
|
1851
|
+
{
|
|
1852
|
+
"kind": "field",
|
|
1853
|
+
"name": "loop",
|
|
1854
|
+
"type": {
|
|
1855
|
+
"text": "LoopType | undefined"
|
|
1856
|
+
},
|
|
1857
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
1858
|
+
"attribute": "loop",
|
|
1859
|
+
"reflects": true
|
|
1860
|
+
},
|
|
1861
|
+
{
|
|
1862
|
+
"kind": "field",
|
|
1863
|
+
"name": "autoplay",
|
|
1864
|
+
"type": {
|
|
1865
|
+
"text": "boolean | undefined"
|
|
1866
|
+
},
|
|
1867
|
+
"description": "Weather start the animation automatically",
|
|
1868
|
+
"attribute": "autoplay",
|
|
1869
|
+
"reflects": true
|
|
1870
|
+
},
|
|
1871
|
+
{
|
|
1872
|
+
"kind": "field",
|
|
1873
|
+
"name": "ariaLabel",
|
|
1874
|
+
"type": {
|
|
1875
|
+
"text": "string | null"
|
|
1876
|
+
},
|
|
1877
|
+
"default": "null",
|
|
1878
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
1879
|
+
"attribute": "aria-label"
|
|
1880
|
+
},
|
|
1881
|
+
{
|
|
1882
|
+
"kind": "field",
|
|
1883
|
+
"name": "ariaLabelledBy",
|
|
1884
|
+
"type": {
|
|
1885
|
+
"text": "string | null"
|
|
1886
|
+
},
|
|
1887
|
+
"default": "null",
|
|
1888
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
1889
|
+
"attribute": "aria-labelledby"
|
|
1890
|
+
},
|
|
1891
|
+
{
|
|
1892
|
+
"kind": "field",
|
|
1893
|
+
"name": "lottieInstance",
|
|
1894
|
+
"type": {
|
|
1895
|
+
"text": "AnimationItem | undefined"
|
|
1896
|
+
},
|
|
1897
|
+
"privacy": "private",
|
|
1898
|
+
"description": "Lottie animation instance"
|
|
1899
|
+
},
|
|
1900
|
+
{
|
|
1901
|
+
"kind": "field",
|
|
1902
|
+
"name": "containerRef",
|
|
1903
|
+
"type": {
|
|
1904
|
+
"text": "Ref<HTMLDivElement>"
|
|
1905
|
+
},
|
|
1906
|
+
"privacy": "private",
|
|
1907
|
+
"description": "Container for the animation"
|
|
1908
|
+
},
|
|
1909
|
+
{
|
|
1910
|
+
"kind": "field",
|
|
1911
|
+
"name": "animation",
|
|
1912
|
+
"description": "Exposed API of the animation library (lottie)",
|
|
1913
|
+
"readonly": true
|
|
1914
|
+
},
|
|
1915
|
+
{
|
|
1916
|
+
"kind": "method",
|
|
1917
|
+
"name": "getLoopValue",
|
|
1918
|
+
"privacy": "private"
|
|
1919
|
+
},
|
|
1920
|
+
{
|
|
1921
|
+
"kind": "method",
|
|
1922
|
+
"name": "onLoadSuccessHandler",
|
|
1923
|
+
"privacy": "private",
|
|
1924
|
+
"parameters": [
|
|
1925
|
+
{
|
|
1926
|
+
"name": "animationData",
|
|
1927
|
+
"type": {
|
|
1928
|
+
"text": "any"
|
|
1929
|
+
}
|
|
1930
|
+
}
|
|
1931
|
+
],
|
|
1932
|
+
"description": "Create new lotty instance for the loaded data"
|
|
1933
|
+
},
|
|
1934
|
+
{
|
|
1935
|
+
"kind": "method",
|
|
1936
|
+
"name": "onLoadFailHandler",
|
|
1937
|
+
"privacy": "private",
|
|
1938
|
+
"parameters": [
|
|
1939
|
+
{
|
|
1940
|
+
"name": "error",
|
|
1941
|
+
"type": {
|
|
1942
|
+
"text": "Error"
|
|
1943
|
+
}
|
|
1944
|
+
}
|
|
1945
|
+
],
|
|
1946
|
+
"description": "Error handler for animation loading"
|
|
1947
|
+
},
|
|
1948
|
+
{
|
|
1949
|
+
"kind": "method",
|
|
1950
|
+
"name": "getAnimationData",
|
|
1951
|
+
"privacy": "private",
|
|
1952
|
+
"description": "Import animation data dynamically"
|
|
1953
|
+
},
|
|
1954
|
+
{
|
|
1955
|
+
"kind": "field",
|
|
1956
|
+
"name": "onCompleteHandler",
|
|
1957
|
+
"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."
|
|
1958
|
+
}
|
|
1959
|
+
],
|
|
1960
|
+
"events": [
|
|
1961
|
+
{
|
|
1962
|
+
"name": "load",
|
|
1963
|
+
"type": {
|
|
1964
|
+
"text": "CustomEvent"
|
|
1965
|
+
},
|
|
1966
|
+
"description": "(React: onLoad) This event is dispatched when the animation is loaded",
|
|
1967
|
+
"reactName": "onLoad"
|
|
1968
|
+
},
|
|
1969
|
+
{
|
|
1970
|
+
"description": "(React: onComplete) This event is dispatched when all animation loops completed",
|
|
1971
|
+
"name": "complete",
|
|
1972
|
+
"reactName": "onComplete"
|
|
1973
|
+
},
|
|
1974
|
+
{
|
|
1975
|
+
"description": "(React: onError) This event is dispatched when animation loading failed",
|
|
1976
|
+
"name": "error",
|
|
1977
|
+
"reactName": "onError"
|
|
1978
|
+
}
|
|
1979
|
+
],
|
|
1980
|
+
"attributes": [
|
|
1981
|
+
{
|
|
1982
|
+
"name": "name",
|
|
1983
|
+
"type": {
|
|
1984
|
+
"text": "AnimationNames | undefined"
|
|
1985
|
+
},
|
|
1986
|
+
"description": "Name of the animation (= filename)",
|
|
1987
|
+
"fieldName": "name"
|
|
1988
|
+
},
|
|
1989
|
+
{
|
|
1990
|
+
"name": "loop",
|
|
1991
|
+
"type": {
|
|
1992
|
+
"text": "LoopType | undefined"
|
|
1993
|
+
},
|
|
1994
|
+
"description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
|
|
1995
|
+
"fieldName": "loop"
|
|
1996
|
+
},
|
|
1997
|
+
{
|
|
1998
|
+
"name": "autoplay",
|
|
1999
|
+
"type": {
|
|
2000
|
+
"text": "boolean | undefined"
|
|
2001
|
+
},
|
|
2002
|
+
"description": "Weather start the animation automatically",
|
|
2003
|
+
"fieldName": "autoplay"
|
|
2004
|
+
},
|
|
2005
|
+
{
|
|
2006
|
+
"name": "aria-label",
|
|
2007
|
+
"type": {
|
|
2008
|
+
"text": "string | null"
|
|
2009
|
+
},
|
|
2010
|
+
"default": "null",
|
|
2011
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
2012
|
+
"fieldName": "ariaLabel"
|
|
2013
|
+
},
|
|
2014
|
+
{
|
|
2015
|
+
"name": "aria-labelledby",
|
|
2016
|
+
"type": {
|
|
2017
|
+
"text": "string | null"
|
|
2018
|
+
},
|
|
2019
|
+
"default": "null",
|
|
2020
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
2021
|
+
"fieldName": "ariaLabelledBy"
|
|
2022
|
+
}
|
|
2023
|
+
],
|
|
2024
|
+
"superclass": {
|
|
2025
|
+
"name": "Component",
|
|
2026
|
+
"module": "/src/models"
|
|
2027
|
+
},
|
|
2028
|
+
"tagName": "mdc-animation",
|
|
2029
|
+
"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 */",
|
|
2030
|
+
"customElement": true
|
|
2031
|
+
}
|
|
2032
|
+
],
|
|
2033
|
+
"exports": [
|
|
2034
|
+
{
|
|
2035
|
+
"kind": "js",
|
|
2036
|
+
"name": "default",
|
|
2037
|
+
"declaration": {
|
|
2038
|
+
"name": "Animation",
|
|
2039
|
+
"module": "components/animation/animation.component.js"
|
|
2040
|
+
}
|
|
2041
|
+
}
|
|
2042
|
+
]
|
|
2043
|
+
},
|
|
2044
2044
|
{
|
|
2045
2045
|
"kind": "javascript-module",
|
|
2046
2046
|
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
@@ -34192,6 +34192,145 @@
|
|
|
34192
34192
|
}
|
|
34193
34193
|
]
|
|
34194
34194
|
},
|
|
34195
|
+
{
|
|
34196
|
+
"kind": "javascript-module",
|
|
34197
|
+
"path": "components/spinner/spinner.component.js",
|
|
34198
|
+
"declarations": [
|
|
34199
|
+
{
|
|
34200
|
+
"kind": "class",
|
|
34201
|
+
"description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the progress or duration of a process is variable or unknown.\n\nSpinner 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.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner 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\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
|
|
34202
|
+
"name": "Spinner",
|
|
34203
|
+
"cssProperties": [
|
|
34204
|
+
{
|
|
34205
|
+
"description": "Allows customization of the default spinner color.",
|
|
34206
|
+
"name": "--mdc-spinner-default-color"
|
|
34207
|
+
},
|
|
34208
|
+
{
|
|
34209
|
+
"description": "Allows customization of the inverted spinner color.",
|
|
34210
|
+
"name": "--mdc-spinner-inverted-color"
|
|
34211
|
+
},
|
|
34212
|
+
{
|
|
34213
|
+
"description": "Allows customization of the spinner Button variant color.",
|
|
34214
|
+
"name": "--mdc-spinner-button-variant-color"
|
|
34215
|
+
},
|
|
34216
|
+
{
|
|
34217
|
+
"description": "Allows customization of the spinner size.",
|
|
34218
|
+
"name": "--mdc-spinner-size"
|
|
34219
|
+
}
|
|
34220
|
+
],
|
|
34221
|
+
"cssParts": [
|
|
34222
|
+
{
|
|
34223
|
+
"description": "The svg which contains the circle spinner.",
|
|
34224
|
+
"name": "container"
|
|
34225
|
+
},
|
|
34226
|
+
{
|
|
34227
|
+
"description": "The circle of the spinner.",
|
|
34228
|
+
"name": "circle"
|
|
34229
|
+
}
|
|
34230
|
+
],
|
|
34231
|
+
"members": [
|
|
34232
|
+
{
|
|
34233
|
+
"kind": "field",
|
|
34234
|
+
"name": "inverted",
|
|
34235
|
+
"type": {
|
|
34236
|
+
"text": "boolean | undefined"
|
|
34237
|
+
},
|
|
34238
|
+
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
|
34239
|
+
"default": "false",
|
|
34240
|
+
"attribute": "inverted",
|
|
34241
|
+
"reflects": true
|
|
34242
|
+
},
|
|
34243
|
+
{
|
|
34244
|
+
"kind": "field",
|
|
34245
|
+
"name": "size",
|
|
34246
|
+
"type": {
|
|
34247
|
+
"text": "SpinnerSize | undefined"
|
|
34248
|
+
},
|
|
34249
|
+
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
|
34250
|
+
"default": "midsize",
|
|
34251
|
+
"attribute": "size",
|
|
34252
|
+
"reflects": true
|
|
34253
|
+
},
|
|
34254
|
+
{
|
|
34255
|
+
"kind": "field",
|
|
34256
|
+
"name": "ariaLabel",
|
|
34257
|
+
"type": {
|
|
34258
|
+
"text": "string | null"
|
|
34259
|
+
},
|
|
34260
|
+
"default": "null",
|
|
34261
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
34262
|
+
"attribute": "aria-label"
|
|
34263
|
+
},
|
|
34264
|
+
{
|
|
34265
|
+
"kind": "field",
|
|
34266
|
+
"name": "variant",
|
|
34267
|
+
"type": {
|
|
34268
|
+
"text": "SpinnerVariant"
|
|
34269
|
+
},
|
|
34270
|
+
"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.",
|
|
34271
|
+
"default": "standalone",
|
|
34272
|
+
"attribute": "variant",
|
|
34273
|
+
"reflects": true
|
|
34274
|
+
}
|
|
34275
|
+
],
|
|
34276
|
+
"attributes": [
|
|
34277
|
+
{
|
|
34278
|
+
"name": "inverted",
|
|
34279
|
+
"type": {
|
|
34280
|
+
"text": "boolean | undefined"
|
|
34281
|
+
},
|
|
34282
|
+
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
|
34283
|
+
"default": "false",
|
|
34284
|
+
"fieldName": "inverted"
|
|
34285
|
+
},
|
|
34286
|
+
{
|
|
34287
|
+
"name": "size",
|
|
34288
|
+
"type": {
|
|
34289
|
+
"text": "SpinnerSize | undefined"
|
|
34290
|
+
},
|
|
34291
|
+
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
|
34292
|
+
"default": "midsize",
|
|
34293
|
+
"fieldName": "size"
|
|
34294
|
+
},
|
|
34295
|
+
{
|
|
34296
|
+
"name": "aria-label",
|
|
34297
|
+
"type": {
|
|
34298
|
+
"text": "string | null"
|
|
34299
|
+
},
|
|
34300
|
+
"default": "null",
|
|
34301
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
34302
|
+
"fieldName": "ariaLabel"
|
|
34303
|
+
},
|
|
34304
|
+
{
|
|
34305
|
+
"name": "variant",
|
|
34306
|
+
"type": {
|
|
34307
|
+
"text": "SpinnerVariant"
|
|
34308
|
+
},
|
|
34309
|
+
"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.",
|
|
34310
|
+
"default": "standalone",
|
|
34311
|
+
"fieldName": "variant"
|
|
34312
|
+
}
|
|
34313
|
+
],
|
|
34314
|
+
"superclass": {
|
|
34315
|
+
"name": "Component",
|
|
34316
|
+
"module": "/src/models"
|
|
34317
|
+
},
|
|
34318
|
+
"tagName": "mdc-spinner",
|
|
34319
|
+
"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 */",
|
|
34320
|
+
"customElement": true
|
|
34321
|
+
}
|
|
34322
|
+
],
|
|
34323
|
+
"exports": [
|
|
34324
|
+
{
|
|
34325
|
+
"kind": "js",
|
|
34326
|
+
"name": "default",
|
|
34327
|
+
"declaration": {
|
|
34328
|
+
"name": "Spinner",
|
|
34329
|
+
"module": "components/spinner/spinner.component.js"
|
|
34330
|
+
}
|
|
34331
|
+
}
|
|
34332
|
+
]
|
|
34333
|
+
},
|
|
34195
34334
|
{
|
|
34196
34335
|
"kind": "javascript-module",
|
|
34197
34336
|
"path": "components/staticcheckbox/staticcheckbox.component.js",
|
|
@@ -34658,145 +34797,6 @@
|
|
|
34658
34797
|
}
|
|
34659
34798
|
]
|
|
34660
34799
|
},
|
|
34661
|
-
{
|
|
34662
|
-
"kind": "javascript-module",
|
|
34663
|
-
"path": "components/spinner/spinner.component.js",
|
|
34664
|
-
"declarations": [
|
|
34665
|
-
{
|
|
34666
|
-
"kind": "class",
|
|
34667
|
-
"description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the progress or duration of a process is variable or unknown.\n\nSpinner 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.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner 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\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
|
|
34668
|
-
"name": "Spinner",
|
|
34669
|
-
"cssProperties": [
|
|
34670
|
-
{
|
|
34671
|
-
"description": "Allows customization of the default spinner color.",
|
|
34672
|
-
"name": "--mdc-spinner-default-color"
|
|
34673
|
-
},
|
|
34674
|
-
{
|
|
34675
|
-
"description": "Allows customization of the inverted spinner color.",
|
|
34676
|
-
"name": "--mdc-spinner-inverted-color"
|
|
34677
|
-
},
|
|
34678
|
-
{
|
|
34679
|
-
"description": "Allows customization of the spinner Button variant color.",
|
|
34680
|
-
"name": "--mdc-spinner-button-variant-color"
|
|
34681
|
-
},
|
|
34682
|
-
{
|
|
34683
|
-
"description": "Allows customization of the spinner size.",
|
|
34684
|
-
"name": "--mdc-spinner-size"
|
|
34685
|
-
}
|
|
34686
|
-
],
|
|
34687
|
-
"cssParts": [
|
|
34688
|
-
{
|
|
34689
|
-
"description": "The svg which contains the circle spinner.",
|
|
34690
|
-
"name": "container"
|
|
34691
|
-
},
|
|
34692
|
-
{
|
|
34693
|
-
"description": "The circle of the spinner.",
|
|
34694
|
-
"name": "circle"
|
|
34695
|
-
}
|
|
34696
|
-
],
|
|
34697
|
-
"members": [
|
|
34698
|
-
{
|
|
34699
|
-
"kind": "field",
|
|
34700
|
-
"name": "inverted",
|
|
34701
|
-
"type": {
|
|
34702
|
-
"text": "boolean | undefined"
|
|
34703
|
-
},
|
|
34704
|
-
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
|
34705
|
-
"default": "false",
|
|
34706
|
-
"attribute": "inverted",
|
|
34707
|
-
"reflects": true
|
|
34708
|
-
},
|
|
34709
|
-
{
|
|
34710
|
-
"kind": "field",
|
|
34711
|
-
"name": "size",
|
|
34712
|
-
"type": {
|
|
34713
|
-
"text": "SpinnerSize | undefined"
|
|
34714
|
-
},
|
|
34715
|
-
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
|
34716
|
-
"default": "midsize",
|
|
34717
|
-
"attribute": "size",
|
|
34718
|
-
"reflects": true
|
|
34719
|
-
},
|
|
34720
|
-
{
|
|
34721
|
-
"kind": "field",
|
|
34722
|
-
"name": "ariaLabel",
|
|
34723
|
-
"type": {
|
|
34724
|
-
"text": "string | null"
|
|
34725
|
-
},
|
|
34726
|
-
"default": "null",
|
|
34727
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
34728
|
-
"attribute": "aria-label"
|
|
34729
|
-
},
|
|
34730
|
-
{
|
|
34731
|
-
"kind": "field",
|
|
34732
|
-
"name": "variant",
|
|
34733
|
-
"type": {
|
|
34734
|
-
"text": "SpinnerVariant"
|
|
34735
|
-
},
|
|
34736
|
-
"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.",
|
|
34737
|
-
"default": "standalone",
|
|
34738
|
-
"attribute": "variant",
|
|
34739
|
-
"reflects": true
|
|
34740
|
-
}
|
|
34741
|
-
],
|
|
34742
|
-
"attributes": [
|
|
34743
|
-
{
|
|
34744
|
-
"name": "inverted",
|
|
34745
|
-
"type": {
|
|
34746
|
-
"text": "boolean | undefined"
|
|
34747
|
-
},
|
|
34748
|
-
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
|
34749
|
-
"default": "false",
|
|
34750
|
-
"fieldName": "inverted"
|
|
34751
|
-
},
|
|
34752
|
-
{
|
|
34753
|
-
"name": "size",
|
|
34754
|
-
"type": {
|
|
34755
|
-
"text": "SpinnerSize | undefined"
|
|
34756
|
-
},
|
|
34757
|
-
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
|
34758
|
-
"default": "midsize",
|
|
34759
|
-
"fieldName": "size"
|
|
34760
|
-
},
|
|
34761
|
-
{
|
|
34762
|
-
"name": "aria-label",
|
|
34763
|
-
"type": {
|
|
34764
|
-
"text": "string | null"
|
|
34765
|
-
},
|
|
34766
|
-
"default": "null",
|
|
34767
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
34768
|
-
"fieldName": "ariaLabel"
|
|
34769
|
-
},
|
|
34770
|
-
{
|
|
34771
|
-
"name": "variant",
|
|
34772
|
-
"type": {
|
|
34773
|
-
"text": "SpinnerVariant"
|
|
34774
|
-
},
|
|
34775
|
-
"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.",
|
|
34776
|
-
"default": "standalone",
|
|
34777
|
-
"fieldName": "variant"
|
|
34778
|
-
}
|
|
34779
|
-
],
|
|
34780
|
-
"superclass": {
|
|
34781
|
-
"name": "Component",
|
|
34782
|
-
"module": "/src/models"
|
|
34783
|
-
},
|
|
34784
|
-
"tagName": "mdc-spinner",
|
|
34785
|
-
"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 */",
|
|
34786
|
-
"customElement": true
|
|
34787
|
-
}
|
|
34788
|
-
],
|
|
34789
|
-
"exports": [
|
|
34790
|
-
{
|
|
34791
|
-
"kind": "js",
|
|
34792
|
-
"name": "default",
|
|
34793
|
-
"declaration": {
|
|
34794
|
-
"name": "Spinner",
|
|
34795
|
-
"module": "components/spinner/spinner.component.js"
|
|
34796
|
-
}
|
|
34797
|
-
}
|
|
34798
|
-
]
|
|
34799
|
-
},
|
|
34800
34800
|
{
|
|
34801
34801
|
"kind": "javascript-module",
|
|
34802
34802
|
"path": "components/stepper/stepper.component.js",
|
package/dist/react/index.d.ts
CHANGED
|
@@ -2,9 +2,9 @@ export { default as Accordion } from './accordion';
|
|
|
2
2
|
export { default as AccordionButton } from './accordionbutton';
|
|
3
3
|
export { default as AccordionGroup } from './accordiongroup';
|
|
4
4
|
export { default as AlertChip } from './alertchip';
|
|
5
|
-
export { default as Animation } from './animation';
|
|
6
5
|
export { default as Appheader } from './appheader';
|
|
7
6
|
export { default as Avatar } from './avatar';
|
|
7
|
+
export { default as Animation } from './animation';
|
|
8
8
|
export { default as AvatarButton } from './avatarbutton';
|
|
9
9
|
export { default as Badge } from './badge';
|
|
10
10
|
export { default as Brandvisual } from './brandvisual';
|
|
@@ -61,10 +61,10 @@ export { default as Selectlistbox } from './selectlistbox';
|
|
|
61
61
|
export { default as SideNavigation } from './sidenavigation';
|
|
62
62
|
export { default as Skeleton } from './skeleton';
|
|
63
63
|
export { default as Slider } from './slider';
|
|
64
|
+
export { default as Spinner } from './spinner';
|
|
64
65
|
export { default as StaticCheckbox } from './staticcheckbox';
|
|
65
66
|
export { default as StaticRadio } from './staticradio';
|
|
66
67
|
export { default as StaticToggle } from './statictoggle';
|
|
67
|
-
export { default as Spinner } from './spinner';
|
|
68
68
|
export { default as Stepper } from './stepper';
|
|
69
69
|
export { default as StepperConnector } from './stepperconnector';
|
|
70
70
|
export { default as StepperItem } from './stepperitem';
|
package/dist/react/index.js
CHANGED
|
@@ -2,9 +2,9 @@ export { default as Accordion } from './accordion';
|
|
|
2
2
|
export { default as AccordionButton } from './accordionbutton';
|
|
3
3
|
export { default as AccordionGroup } from './accordiongroup';
|
|
4
4
|
export { default as AlertChip } from './alertchip';
|
|
5
|
-
export { default as Animation } from './animation';
|
|
6
5
|
export { default as Appheader } from './appheader';
|
|
7
6
|
export { default as Avatar } from './avatar';
|
|
7
|
+
export { default as Animation } from './animation';
|
|
8
8
|
export { default as AvatarButton } from './avatarbutton';
|
|
9
9
|
export { default as Badge } from './badge';
|
|
10
10
|
export { default as Brandvisual } from './brandvisual';
|
|
@@ -61,10 +61,10 @@ export { default as Selectlistbox } from './selectlistbox';
|
|
|
61
61
|
export { default as SideNavigation } from './sidenavigation';
|
|
62
62
|
export { default as Skeleton } from './skeleton';
|
|
63
63
|
export { default as Slider } from './slider';
|
|
64
|
+
export { default as Spinner } from './spinner';
|
|
64
65
|
export { default as StaticCheckbox } from './staticcheckbox';
|
|
65
66
|
export { default as StaticRadio } from './staticradio';
|
|
66
67
|
export { default as StaticToggle } from './statictoggle';
|
|
67
|
-
export { default as Spinner } from './spinner';
|
|
68
68
|
export { default as Stepper } from './stepper';
|
|
69
69
|
export { default as StepperConnector } from './stepperconnector';
|
|
70
70
|
export { default as StepperItem } from './stepperitem';
|