@momentum-design/components 0.76.7 → 0.76.8
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 +586 -586
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
@@ -492,6 +492,67 @@
|
|
492
492
|
}
|
493
493
|
]
|
494
494
|
},
|
495
|
+
{
|
496
|
+
"kind": "javascript-module",
|
497
|
+
"path": "components/appheader/appheader.component.js",
|
498
|
+
"declarations": [
|
499
|
+
{
|
500
|
+
"kind": "class",
|
501
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
502
|
+
"name": "Appheader",
|
503
|
+
"cssParts": [
|
504
|
+
{
|
505
|
+
"description": "The main container for styling the header.",
|
506
|
+
"name": "container"
|
507
|
+
},
|
508
|
+
{
|
509
|
+
"description": "The leading section of the header.",
|
510
|
+
"name": "leading-section"
|
511
|
+
},
|
512
|
+
{
|
513
|
+
"description": "The center section of the header.",
|
514
|
+
"name": "center-section"
|
515
|
+
},
|
516
|
+
{
|
517
|
+
"description": "The trailing section of the header.",
|
518
|
+
"name": "trailing-section"
|
519
|
+
}
|
520
|
+
],
|
521
|
+
"slots": [
|
522
|
+
{
|
523
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
524
|
+
"name": "leading"
|
525
|
+
},
|
526
|
+
{
|
527
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
528
|
+
"name": "center"
|
529
|
+
},
|
530
|
+
{
|
531
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
532
|
+
"name": "trailing"
|
533
|
+
}
|
534
|
+
],
|
535
|
+
"members": [],
|
536
|
+
"superclass": {
|
537
|
+
"name": "Component",
|
538
|
+
"module": "/src/models"
|
539
|
+
},
|
540
|
+
"tagName": "mdc-appheader",
|
541
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
542
|
+
"customElement": true
|
543
|
+
}
|
544
|
+
],
|
545
|
+
"exports": [
|
546
|
+
{
|
547
|
+
"kind": "js",
|
548
|
+
"name": "default",
|
549
|
+
"declaration": {
|
550
|
+
"name": "Appheader",
|
551
|
+
"module": "components/appheader/appheader.component.js"
|
552
|
+
}
|
553
|
+
}
|
554
|
+
]
|
555
|
+
},
|
495
556
|
{
|
496
557
|
"kind": "javascript-module",
|
497
558
|
"path": "components/animation/animation.component.js",
|
@@ -704,67 +765,6 @@
|
|
704
765
|
}
|
705
766
|
]
|
706
767
|
},
|
707
|
-
{
|
708
|
-
"kind": "javascript-module",
|
709
|
-
"path": "components/appheader/appheader.component.js",
|
710
|
-
"declarations": [
|
711
|
-
{
|
712
|
-
"kind": "class",
|
713
|
-
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
714
|
-
"name": "Appheader",
|
715
|
-
"cssParts": [
|
716
|
-
{
|
717
|
-
"description": "The main container for styling the header.",
|
718
|
-
"name": "container"
|
719
|
-
},
|
720
|
-
{
|
721
|
-
"description": "The leading section of the header.",
|
722
|
-
"name": "leading-section"
|
723
|
-
},
|
724
|
-
{
|
725
|
-
"description": "The center section of the header.",
|
726
|
-
"name": "center-section"
|
727
|
-
},
|
728
|
-
{
|
729
|
-
"description": "The trailing section of the header.",
|
730
|
-
"name": "trailing-section"
|
731
|
-
}
|
732
|
-
],
|
733
|
-
"slots": [
|
734
|
-
{
|
735
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
736
|
-
"name": "leading"
|
737
|
-
},
|
738
|
-
{
|
739
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
740
|
-
"name": "center"
|
741
|
-
},
|
742
|
-
{
|
743
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
744
|
-
"name": "trailing"
|
745
|
-
}
|
746
|
-
],
|
747
|
-
"members": [],
|
748
|
-
"superclass": {
|
749
|
-
"name": "Component",
|
750
|
-
"module": "/src/models"
|
751
|
-
},
|
752
|
-
"tagName": "mdc-appheader",
|
753
|
-
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
754
|
-
"customElement": true
|
755
|
-
}
|
756
|
-
],
|
757
|
-
"exports": [
|
758
|
-
{
|
759
|
-
"kind": "js",
|
760
|
-
"name": "default",
|
761
|
-
"declaration": {
|
762
|
-
"name": "Appheader",
|
763
|
-
"module": "components/appheader/appheader.component.js"
|
764
|
-
}
|
765
|
-
}
|
766
|
-
]
|
767
|
-
},
|
768
768
|
{
|
769
769
|
"kind": "javascript-module",
|
770
770
|
"path": "components/avatar/avatar.component.js",
|
@@ -1653,54 +1653,375 @@
|
|
1653
1653
|
},
|
1654
1654
|
{
|
1655
1655
|
"kind": "javascript-module",
|
1656
|
-
"path": "components/
|
1656
|
+
"path": "components/badge/badge.component.js",
|
1657
1657
|
"declarations": [
|
1658
1658
|
{
|
1659
1659
|
"kind": "class",
|
1660
|
-
"description": "The `mdc-
|
1661
|
-
"name": "
|
1660
|
+
"description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
|
1661
|
+
"name": "Badge",
|
1662
|
+
"cssProperties": [
|
1663
|
+
{
|
1664
|
+
"description": "The foreground color of the primary badge.",
|
1665
|
+
"name": "--mdc-badge-primary-foreground-color"
|
1666
|
+
},
|
1667
|
+
{
|
1668
|
+
"description": "The background color of the primary badge.",
|
1669
|
+
"name": "--mdc-badge-primary-background-color"
|
1670
|
+
},
|
1671
|
+
{
|
1672
|
+
"description": "The foreground color of the secondary badge.",
|
1673
|
+
"name": "--mdc-badge-secondary-foreground-color"
|
1674
|
+
},
|
1675
|
+
{
|
1676
|
+
"description": "The background color of the secondary badge.",
|
1677
|
+
"name": "--mdc-badge-secondary-background-color"
|
1678
|
+
},
|
1679
|
+
{
|
1680
|
+
"description": "The foreground color of the success badge.",
|
1681
|
+
"name": "--mdc-badge-success-foreground-color"
|
1682
|
+
},
|
1683
|
+
{
|
1684
|
+
"description": "The background color of the success badge.",
|
1685
|
+
"name": "--mdc-badge-success-background-color"
|
1686
|
+
},
|
1687
|
+
{
|
1688
|
+
"description": "The foreground color of the warning badge.",
|
1689
|
+
"name": "--mdc-badge-warning-foreground-color"
|
1690
|
+
},
|
1691
|
+
{
|
1692
|
+
"description": "The background color of the warning badge.",
|
1693
|
+
"name": "--mdc-badge-warning-background-color"
|
1694
|
+
},
|
1695
|
+
{
|
1696
|
+
"description": "The foreground color of the error badge.",
|
1697
|
+
"name": "--mdc-badge-error-foreground-color"
|
1698
|
+
},
|
1699
|
+
{
|
1700
|
+
"description": "The background color of the error badge.",
|
1701
|
+
"name": "--mdc-badge-error-background-color"
|
1702
|
+
},
|
1703
|
+
{
|
1704
|
+
"description": "The background color of the badge overlay.",
|
1705
|
+
"name": "--mdc-badge-overlay-background-color"
|
1706
|
+
}
|
1707
|
+
],
|
1662
1708
|
"members": [
|
1663
1709
|
{
|
1664
1710
|
"kind": "field",
|
1665
|
-
"name": "
|
1711
|
+
"name": "type",
|
1666
1712
|
"type": {
|
1667
|
-
"text": "
|
1713
|
+
"text": "BadgeType | undefined"
|
1668
1714
|
},
|
1669
|
-
"
|
1715
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
1716
|
+
"attribute": "type",
|
1717
|
+
"reflects": true
|
1670
1718
|
},
|
1671
1719
|
{
|
1672
1720
|
"kind": "field",
|
1673
|
-
"name": "
|
1721
|
+
"name": "variant",
|
1674
1722
|
"type": {
|
1675
|
-
"text": "
|
1723
|
+
"text": "IconVariant"
|
1676
1724
|
},
|
1677
|
-
"description": "
|
1678
|
-
"
|
1725
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
1726
|
+
"default": "primary",
|
1727
|
+
"attribute": "variant",
|
1679
1728
|
"reflects": true
|
1680
1729
|
},
|
1681
1730
|
{
|
1682
|
-
"kind": "
|
1683
|
-
"name": "
|
1684
|
-
"
|
1731
|
+
"kind": "field",
|
1732
|
+
"name": "counter",
|
1733
|
+
"type": {
|
1734
|
+
"text": "number | undefined"
|
1735
|
+
},
|
1736
|
+
"description": "Counter is the number which can be provided in the badge.",
|
1737
|
+
"attribute": "counter"
|
1738
|
+
},
|
1739
|
+
{
|
1740
|
+
"kind": "field",
|
1741
|
+
"name": "maxCounter",
|
1742
|
+
"type": {
|
1743
|
+
"text": "number"
|
1744
|
+
},
|
1745
|
+
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
1746
|
+
"default": "99",
|
1747
|
+
"attribute": "max-counter",
|
1748
|
+
"reflects": true
|
1749
|
+
},
|
1750
|
+
{
|
1751
|
+
"kind": "field",
|
1752
|
+
"name": "overlay",
|
1753
|
+
"type": {
|
1754
|
+
"text": "boolean"
|
1755
|
+
},
|
1756
|
+
"default": "false",
|
1757
|
+
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
1758
|
+
"attribute": "overlay"
|
1759
|
+
},
|
1760
|
+
{
|
1761
|
+
"kind": "field",
|
1762
|
+
"name": "ariaLabel",
|
1763
|
+
"type": {
|
1764
|
+
"text": "string | null"
|
1765
|
+
},
|
1766
|
+
"default": "null",
|
1767
|
+
"description": "Aria-label attribute to be set for accessibility",
|
1768
|
+
"attribute": "aria-label"
|
1685
1769
|
},
|
1686
1770
|
{
|
1687
1771
|
"kind": "method",
|
1688
|
-
"name": "
|
1772
|
+
"name": "getCounterText",
|
1689
1773
|
"privacy": "private",
|
1774
|
+
"return": {
|
1775
|
+
"type": {
|
1776
|
+
"text": ""
|
1777
|
+
}
|
1778
|
+
},
|
1690
1779
|
"parameters": [
|
1691
1780
|
{
|
1692
|
-
"name": "
|
1781
|
+
"name": "maxCounter",
|
1693
1782
|
"type": {
|
1694
|
-
"text": "
|
1783
|
+
"text": "number"
|
1695
1784
|
},
|
1696
|
-
"description": "
|
1785
|
+
"description": "the maximum limit which can be displayed on the badge"
|
1786
|
+
},
|
1787
|
+
{
|
1788
|
+
"name": "counter",
|
1789
|
+
"optional": true,
|
1790
|
+
"type": {
|
1791
|
+
"text": "number"
|
1792
|
+
},
|
1793
|
+
"description": "the number to be displayed on the badge"
|
1697
1794
|
}
|
1698
1795
|
],
|
1699
|
-
"description": "
|
1796
|
+
"description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
|
1700
1797
|
},
|
1701
1798
|
{
|
1702
1799
|
"kind": "method",
|
1703
|
-
"name": "
|
1800
|
+
"name": "getBadgeIcon",
|
1801
|
+
"privacy": "private",
|
1802
|
+
"return": {
|
1803
|
+
"type": {
|
1804
|
+
"text": ""
|
1805
|
+
}
|
1806
|
+
},
|
1807
|
+
"parameters": [
|
1808
|
+
{
|
1809
|
+
"name": "iconName",
|
1810
|
+
"type": {
|
1811
|
+
"text": "string"
|
1812
|
+
},
|
1813
|
+
"description": "the name of the icon from the icon set"
|
1814
|
+
},
|
1815
|
+
{
|
1816
|
+
"name": "backgroundClassPostfix",
|
1817
|
+
"type": {
|
1818
|
+
"text": "string"
|
1819
|
+
},
|
1820
|
+
"description": "postfix for the class to style the badge icon."
|
1821
|
+
}
|
1822
|
+
],
|
1823
|
+
"description": "Method to generate the badge icon."
|
1824
|
+
},
|
1825
|
+
{
|
1826
|
+
"kind": "method",
|
1827
|
+
"name": "getBadgeDot",
|
1828
|
+
"privacy": "private",
|
1829
|
+
"return": {
|
1830
|
+
"type": {
|
1831
|
+
"text": ""
|
1832
|
+
}
|
1833
|
+
},
|
1834
|
+
"description": "Method to generate the badge dot template."
|
1835
|
+
},
|
1836
|
+
{
|
1837
|
+
"kind": "method",
|
1838
|
+
"name": "getBadgeCounterText",
|
1839
|
+
"privacy": "private",
|
1840
|
+
"return": {
|
1841
|
+
"type": {
|
1842
|
+
"text": ""
|
1843
|
+
}
|
1844
|
+
},
|
1845
|
+
"description": "Method to generate the badge text and counter template."
|
1846
|
+
},
|
1847
|
+
{
|
1848
|
+
"kind": "method",
|
1849
|
+
"name": "setRoleByAriaLabel",
|
1850
|
+
"privacy": "private",
|
1851
|
+
"return": {
|
1852
|
+
"type": {
|
1853
|
+
"text": "void"
|
1854
|
+
}
|
1855
|
+
},
|
1856
|
+
"description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
|
1857
|
+
},
|
1858
|
+
{
|
1859
|
+
"kind": "method",
|
1860
|
+
"name": "getBadgeContentBasedOnType",
|
1861
|
+
"privacy": "private",
|
1862
|
+
"return": {
|
1863
|
+
"type": {
|
1864
|
+
"text": ""
|
1865
|
+
}
|
1866
|
+
},
|
1867
|
+
"description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
|
1868
|
+
},
|
1869
|
+
{
|
1870
|
+
"kind": "field",
|
1871
|
+
"name": "iconName",
|
1872
|
+
"type": {
|
1873
|
+
"text": "IconNames | undefined"
|
1874
|
+
},
|
1875
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
1876
|
+
"attribute": "icon-name",
|
1877
|
+
"inheritedFrom": {
|
1878
|
+
"name": "IconNameMixin",
|
1879
|
+
"module": "utils/mixins/IconNameMixin.js"
|
1880
|
+
}
|
1881
|
+
}
|
1882
|
+
],
|
1883
|
+
"attributes": [
|
1884
|
+
{
|
1885
|
+
"name": "type",
|
1886
|
+
"type": {
|
1887
|
+
"text": "BadgeType | undefined"
|
1888
|
+
},
|
1889
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
1890
|
+
"fieldName": "type"
|
1891
|
+
},
|
1892
|
+
{
|
1893
|
+
"name": "variant",
|
1894
|
+
"type": {
|
1895
|
+
"text": "IconVariant"
|
1896
|
+
},
|
1897
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
1898
|
+
"default": "primary",
|
1899
|
+
"fieldName": "variant"
|
1900
|
+
},
|
1901
|
+
{
|
1902
|
+
"name": "counter",
|
1903
|
+
"type": {
|
1904
|
+
"text": "number | undefined"
|
1905
|
+
},
|
1906
|
+
"description": "Counter is the number which can be provided in the badge.",
|
1907
|
+
"fieldName": "counter"
|
1908
|
+
},
|
1909
|
+
{
|
1910
|
+
"name": "max-counter",
|
1911
|
+
"type": {
|
1912
|
+
"text": "number"
|
1913
|
+
},
|
1914
|
+
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
1915
|
+
"default": "99",
|
1916
|
+
"fieldName": "maxCounter"
|
1917
|
+
},
|
1918
|
+
{
|
1919
|
+
"name": "overlay",
|
1920
|
+
"type": {
|
1921
|
+
"text": "boolean"
|
1922
|
+
},
|
1923
|
+
"default": "false",
|
1924
|
+
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
1925
|
+
"fieldName": "overlay"
|
1926
|
+
},
|
1927
|
+
{
|
1928
|
+
"name": "aria-label",
|
1929
|
+
"type": {
|
1930
|
+
"text": "string | null"
|
1931
|
+
},
|
1932
|
+
"default": "null",
|
1933
|
+
"description": "Aria-label attribute to be set for accessibility",
|
1934
|
+
"fieldName": "ariaLabel"
|
1935
|
+
},
|
1936
|
+
{
|
1937
|
+
"name": "icon-name",
|
1938
|
+
"type": {
|
1939
|
+
"text": "IconNames | undefined"
|
1940
|
+
},
|
1941
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
1942
|
+
"fieldName": "iconName",
|
1943
|
+
"inheritedFrom": {
|
1944
|
+
"name": "IconNameMixin",
|
1945
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
1946
|
+
}
|
1947
|
+
}
|
1948
|
+
],
|
1949
|
+
"mixins": [
|
1950
|
+
{
|
1951
|
+
"name": "IconNameMixin",
|
1952
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
1953
|
+
}
|
1954
|
+
],
|
1955
|
+
"superclass": {
|
1956
|
+
"name": "Component",
|
1957
|
+
"module": "/src/models"
|
1958
|
+
},
|
1959
|
+
"tagName": "mdc-badge",
|
1960
|
+
"jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
|
1961
|
+
"customElement": true
|
1962
|
+
}
|
1963
|
+
],
|
1964
|
+
"exports": [
|
1965
|
+
{
|
1966
|
+
"kind": "js",
|
1967
|
+
"name": "default",
|
1968
|
+
"declaration": {
|
1969
|
+
"name": "Badge",
|
1970
|
+
"module": "components/badge/badge.component.js"
|
1971
|
+
}
|
1972
|
+
}
|
1973
|
+
]
|
1974
|
+
},
|
1975
|
+
{
|
1976
|
+
"kind": "javascript-module",
|
1977
|
+
"path": "components/brandvisual/brandvisual.component.js",
|
1978
|
+
"declarations": [
|
1979
|
+
{
|
1980
|
+
"kind": "class",
|
1981
|
+
"description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
|
1982
|
+
"name": "Brandvisual",
|
1983
|
+
"members": [
|
1984
|
+
{
|
1985
|
+
"kind": "field",
|
1986
|
+
"name": "brandVisualData",
|
1987
|
+
"type": {
|
1988
|
+
"text": "HTMLElement | undefined"
|
1989
|
+
},
|
1990
|
+
"privacy": "private"
|
1991
|
+
},
|
1992
|
+
{
|
1993
|
+
"kind": "field",
|
1994
|
+
"name": "name",
|
1995
|
+
"type": {
|
1996
|
+
"text": "BrandVisualNames | undefined"
|
1997
|
+
},
|
1998
|
+
"description": "Name of the brandVisual (= filename)",
|
1999
|
+
"attribute": "name",
|
2000
|
+
"reflects": true
|
2001
|
+
},
|
2002
|
+
{
|
2003
|
+
"kind": "method",
|
2004
|
+
"name": "getBrandVisualData",
|
2005
|
+
"privacy": "private"
|
2006
|
+
},
|
2007
|
+
{
|
2008
|
+
"kind": "method",
|
2009
|
+
"name": "handleBrandVisualLoadedSuccess",
|
2010
|
+
"privacy": "private",
|
2011
|
+
"parameters": [
|
2012
|
+
{
|
2013
|
+
"name": "brandVisualHtml",
|
2014
|
+
"type": {
|
2015
|
+
"text": "HTMLElement"
|
2016
|
+
},
|
2017
|
+
"description": "The brandvisual html element which has been fetched from the brandvisual provider."
|
2018
|
+
}
|
2019
|
+
],
|
2020
|
+
"description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
|
2021
|
+
},
|
2022
|
+
{
|
2023
|
+
"kind": "method",
|
2024
|
+
"name": "handleBrandVisualLoadedFailure",
|
1704
2025
|
"privacy": "private",
|
1705
2026
|
"parameters": [
|
1706
2027
|
{
|
@@ -2495,150 +2816,18 @@
|
|
2495
2816
|
},
|
2496
2817
|
{
|
2497
2818
|
"kind": "javascript-module",
|
2498
|
-
"path": "components/
|
2819
|
+
"path": "components/buttonlink/buttonlink.component.js",
|
2499
2820
|
"declarations": [
|
2500
2821
|
{
|
2501
2822
|
"kind": "class",
|
2502
|
-
"description": "
|
2503
|
-
"name": "
|
2504
|
-
"cssProperties": [
|
2505
|
-
{
|
2506
|
-
"description": "The border radius of the buttongroup",
|
2507
|
-
"name": "--mdc-buttongroup-border-radius"
|
2508
|
-
},
|
2509
|
-
{
|
2510
|
-
"description": "The border color of the buttongroup",
|
2511
|
-
"name": "--mdc-buttongroup-border-color"
|
2512
|
-
},
|
2513
|
-
{
|
2514
|
-
"description": "The color of the divider between buttons within the buttongroup",
|
2515
|
-
"name": "--mdc-buttongroup-divider-color"
|
2516
|
-
}
|
2517
|
-
],
|
2518
|
-
"slots": [
|
2519
|
-
{
|
2520
|
-
"description": "This is a default/unnamed slot, which contains the buttons",
|
2521
|
-
"name": "default"
|
2522
|
-
}
|
2523
|
-
],
|
2823
|
+
"description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix and postfix icons via slots.\n\n### Features:\n- Behaves like an link while visually resembling a button.\n- Supports slots for `prefix-icon` and `postfix-icon`.\n- Customizable size, color, and variant through attributes.\n- Inherits accessibility and keyboard interaction support from `mdc-linksimple`.",
|
2824
|
+
"name": "ButtonLink",
|
2524
2825
|
"members": [
|
2525
2826
|
{
|
2526
2827
|
"kind": "field",
|
2527
|
-
"name": "
|
2828
|
+
"name": "size",
|
2528
2829
|
"type": {
|
2529
|
-
"text": "
|
2530
|
-
},
|
2531
|
-
"description": "Orientation of the buttongroup.",
|
2532
|
-
"default": "'horizontal'",
|
2533
|
-
"attribute": "orientation",
|
2534
|
-
"reflects": true
|
2535
|
-
},
|
2536
|
-
{
|
2537
|
-
"kind": "field",
|
2538
|
-
"name": "variant",
|
2539
|
-
"type": {
|
2540
|
-
"text": "ButtonGroupVariant"
|
2541
|
-
},
|
2542
|
-
"description": "Variant of the buttons within the buttongroup.",
|
2543
|
-
"default": "'primary'",
|
2544
|
-
"attribute": "variant",
|
2545
|
-
"reflects": true
|
2546
|
-
},
|
2547
|
-
{
|
2548
|
-
"kind": "field",
|
2549
|
-
"name": "size",
|
2550
|
-
"type": {
|
2551
|
-
"text": "ButtonGroupSize"
|
2552
|
-
},
|
2553
|
-
"description": "Size of the buttons within the buttongroup.",
|
2554
|
-
"default": "'28'",
|
2555
|
-
"attribute": "size",
|
2556
|
-
"reflects": true
|
2557
|
-
},
|
2558
|
-
{
|
2559
|
-
"kind": "field",
|
2560
|
-
"name": "compact",
|
2561
|
-
"type": {
|
2562
|
-
"text": "boolean"
|
2563
|
-
},
|
2564
|
-
"default": "false",
|
2565
|
-
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
2566
|
-
"attribute": "compact",
|
2567
|
-
"reflects": true
|
2568
|
-
}
|
2569
|
-
],
|
2570
|
-
"attributes": [
|
2571
|
-
{
|
2572
|
-
"name": "orientation",
|
2573
|
-
"type": {
|
2574
|
-
"text": "ButtonGroupOrientation"
|
2575
|
-
},
|
2576
|
-
"description": "Orientation of the buttongroup.",
|
2577
|
-
"default": "'horizontal'",
|
2578
|
-
"fieldName": "orientation"
|
2579
|
-
},
|
2580
|
-
{
|
2581
|
-
"name": "variant",
|
2582
|
-
"type": {
|
2583
|
-
"text": "ButtonGroupVariant"
|
2584
|
-
},
|
2585
|
-
"description": "Variant of the buttons within the buttongroup.",
|
2586
|
-
"default": "'primary'",
|
2587
|
-
"fieldName": "variant"
|
2588
|
-
},
|
2589
|
-
{
|
2590
|
-
"name": "size",
|
2591
|
-
"type": {
|
2592
|
-
"text": "ButtonGroupSize"
|
2593
|
-
},
|
2594
|
-
"description": "Size of the buttons within the buttongroup.",
|
2595
|
-
"default": "'28'",
|
2596
|
-
"fieldName": "size"
|
2597
|
-
},
|
2598
|
-
{
|
2599
|
-
"name": "compact",
|
2600
|
-
"type": {
|
2601
|
-
"text": "boolean"
|
2602
|
-
},
|
2603
|
-
"default": "false",
|
2604
|
-
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
2605
|
-
"fieldName": "compact"
|
2606
|
-
}
|
2607
|
-
],
|
2608
|
-
"superclass": {
|
2609
|
-
"name": "Component",
|
2610
|
-
"module": "/src/models"
|
2611
|
-
},
|
2612
|
-
"tagName": "mdc-buttongroup",
|
2613
|
-
"jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
|
2614
|
-
"customElement": true
|
2615
|
-
}
|
2616
|
-
],
|
2617
|
-
"exports": [
|
2618
|
-
{
|
2619
|
-
"kind": "js",
|
2620
|
-
"name": "default",
|
2621
|
-
"declaration": {
|
2622
|
-
"name": "ButtonGroup",
|
2623
|
-
"module": "components/buttongroup/buttongroup.component.js"
|
2624
|
-
}
|
2625
|
-
}
|
2626
|
-
]
|
2627
|
-
},
|
2628
|
-
{
|
2629
|
-
"kind": "javascript-module",
|
2630
|
-
"path": "components/buttonlink/buttonlink.component.js",
|
2631
|
-
"declarations": [
|
2632
|
-
{
|
2633
|
-
"kind": "class",
|
2634
|
-
"description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix and postfix icons via slots.\n\n### Features:\n- Behaves like an link while visually resembling a button.\n- Supports slots for `prefix-icon` and `postfix-icon`.\n- Customizable size, color, and variant through attributes.\n- Inherits accessibility and keyboard interaction support from `mdc-linksimple`.",
|
2635
|
-
"name": "ButtonLink",
|
2636
|
-
"members": [
|
2637
|
-
{
|
2638
|
-
"kind": "field",
|
2639
|
-
"name": "size",
|
2640
|
-
"type": {
|
2641
|
-
"text": "PillButtonSize | IconButtonSize"
|
2830
|
+
"text": "PillButtonSize | IconButtonSize"
|
2642
2831
|
},
|
2643
2832
|
"description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
|
2644
2833
|
"default": "32",
|
@@ -3162,391 +3351,70 @@
|
|
3162
3351
|
}
|
3163
3352
|
},
|
3164
3353
|
{
|
3165
|
-
"description": "Color of the link’s child content in the active state.",
|
3166
|
-
"name": "--mdc-link-color-active",
|
3167
|
-
"inheritedFrom": {
|
3168
|
-
"name": "Linksimple",
|
3169
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
3170
|
-
}
|
3171
|
-
},
|
3172
|
-
{
|
3173
|
-
"description": "Color of the link’s child content in the disabled state.",
|
3174
|
-
"name": "--mdc-link-color-disabled",
|
3175
|
-
"inheritedFrom": {
|
3176
|
-
"name": "Linksimple",
|
3177
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
3178
|
-
}
|
3179
|
-
},
|
3180
|
-
{
|
3181
|
-
"description": "Color of the link’s child content in the hover state.",
|
3182
|
-
"name": "--mdc-link-color-hover",
|
3183
|
-
"inheritedFrom": {
|
3184
|
-
"name": "Linksimple",
|
3185
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
3186
|
-
}
|
3187
|
-
},
|
3188
|
-
{
|
3189
|
-
"description": "Color of the link’s child content in the normal state.",
|
3190
|
-
"name": "--mdc-link-color-normal",
|
3191
|
-
"inheritedFrom": {
|
3192
|
-
"name": "Linksimple",
|
3193
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
3194
|
-
}
|
3195
|
-
},
|
3196
|
-
{
|
3197
|
-
"description": "Color of the inverted link’s child content in the active state.",
|
3198
|
-
"name": "--mdc-link-inverted-color-active",
|
3199
|
-
"inheritedFrom": {
|
3200
|
-
"name": "Linksimple",
|
3201
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
3202
|
-
}
|
3203
|
-
},
|
3204
|
-
{
|
3205
|
-
"description": "Color of the inverted link’s child content in the disabled state.",
|
3206
|
-
"name": "--mdc-link-inverted-color-disabled",
|
3207
|
-
"inheritedFrom": {
|
3208
|
-
"name": "Linksimple",
|
3209
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
3210
|
-
}
|
3211
|
-
},
|
3212
|
-
{
|
3213
|
-
"description": "Color of the inverted link’s child content in the hover state.",
|
3214
|
-
"name": "--mdc-link-inverted-color-hover",
|
3215
|
-
"inheritedFrom": {
|
3216
|
-
"name": "Linksimple",
|
3217
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
3218
|
-
}
|
3219
|
-
},
|
3220
|
-
{
|
3221
|
-
"description": "Color of the inverted link’s child content in the normal state.",
|
3222
|
-
"name": "--mdc-link-inverted-color-normal",
|
3223
|
-
"inheritedFrom": {
|
3224
|
-
"name": "Linksimple",
|
3225
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
3226
|
-
}
|
3227
|
-
}
|
3228
|
-
]
|
3229
|
-
}
|
3230
|
-
],
|
3231
|
-
"exports": [
|
3232
|
-
{
|
3233
|
-
"kind": "js",
|
3234
|
-
"name": "default",
|
3235
|
-
"declaration": {
|
3236
|
-
"name": "ButtonLink",
|
3237
|
-
"module": "components/buttonlink/buttonlink.component.js"
|
3238
|
-
}
|
3239
|
-
}
|
3240
|
-
]
|
3241
|
-
},
|
3242
|
-
{
|
3243
|
-
"kind": "javascript-module",
|
3244
|
-
"path": "components/badge/badge.component.js",
|
3245
|
-
"declarations": [
|
3246
|
-
{
|
3247
|
-
"kind": "class",
|
3248
|
-
"description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
|
3249
|
-
"name": "Badge",
|
3250
|
-
"cssProperties": [
|
3251
|
-
{
|
3252
|
-
"description": "The foreground color of the primary badge.",
|
3253
|
-
"name": "--mdc-badge-primary-foreground-color"
|
3254
|
-
},
|
3255
|
-
{
|
3256
|
-
"description": "The background color of the primary badge.",
|
3257
|
-
"name": "--mdc-badge-primary-background-color"
|
3258
|
-
},
|
3259
|
-
{
|
3260
|
-
"description": "The foreground color of the secondary badge.",
|
3261
|
-
"name": "--mdc-badge-secondary-foreground-color"
|
3262
|
-
},
|
3263
|
-
{
|
3264
|
-
"description": "The background color of the secondary badge.",
|
3265
|
-
"name": "--mdc-badge-secondary-background-color"
|
3266
|
-
},
|
3267
|
-
{
|
3268
|
-
"description": "The foreground color of the success badge.",
|
3269
|
-
"name": "--mdc-badge-success-foreground-color"
|
3270
|
-
},
|
3271
|
-
{
|
3272
|
-
"description": "The background color of the success badge.",
|
3273
|
-
"name": "--mdc-badge-success-background-color"
|
3274
|
-
},
|
3275
|
-
{
|
3276
|
-
"description": "The foreground color of the warning badge.",
|
3277
|
-
"name": "--mdc-badge-warning-foreground-color"
|
3278
|
-
},
|
3279
|
-
{
|
3280
|
-
"description": "The background color of the warning badge.",
|
3281
|
-
"name": "--mdc-badge-warning-background-color"
|
3282
|
-
},
|
3283
|
-
{
|
3284
|
-
"description": "The foreground color of the error badge.",
|
3285
|
-
"name": "--mdc-badge-error-foreground-color"
|
3286
|
-
},
|
3287
|
-
{
|
3288
|
-
"description": "The background color of the error badge.",
|
3289
|
-
"name": "--mdc-badge-error-background-color"
|
3290
|
-
},
|
3291
|
-
{
|
3292
|
-
"description": "The background color of the badge overlay.",
|
3293
|
-
"name": "--mdc-badge-overlay-background-color"
|
3294
|
-
}
|
3295
|
-
],
|
3296
|
-
"members": [
|
3297
|
-
{
|
3298
|
-
"kind": "field",
|
3299
|
-
"name": "type",
|
3300
|
-
"type": {
|
3301
|
-
"text": "BadgeType | undefined"
|
3302
|
-
},
|
3303
|
-
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
3304
|
-
"attribute": "type",
|
3305
|
-
"reflects": true
|
3306
|
-
},
|
3307
|
-
{
|
3308
|
-
"kind": "field",
|
3309
|
-
"name": "variant",
|
3310
|
-
"type": {
|
3311
|
-
"text": "IconVariant"
|
3312
|
-
},
|
3313
|
-
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
3314
|
-
"default": "primary",
|
3315
|
-
"attribute": "variant",
|
3316
|
-
"reflects": true
|
3317
|
-
},
|
3318
|
-
{
|
3319
|
-
"kind": "field",
|
3320
|
-
"name": "counter",
|
3321
|
-
"type": {
|
3322
|
-
"text": "number | undefined"
|
3323
|
-
},
|
3324
|
-
"description": "Counter is the number which can be provided in the badge.",
|
3325
|
-
"attribute": "counter"
|
3326
|
-
},
|
3327
|
-
{
|
3328
|
-
"kind": "field",
|
3329
|
-
"name": "maxCounter",
|
3330
|
-
"type": {
|
3331
|
-
"text": "number"
|
3332
|
-
},
|
3333
|
-
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
3334
|
-
"default": "99",
|
3335
|
-
"attribute": "max-counter",
|
3336
|
-
"reflects": true
|
3337
|
-
},
|
3338
|
-
{
|
3339
|
-
"kind": "field",
|
3340
|
-
"name": "overlay",
|
3341
|
-
"type": {
|
3342
|
-
"text": "boolean"
|
3343
|
-
},
|
3344
|
-
"default": "false",
|
3345
|
-
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
3346
|
-
"attribute": "overlay"
|
3347
|
-
},
|
3348
|
-
{
|
3349
|
-
"kind": "field",
|
3350
|
-
"name": "ariaLabel",
|
3351
|
-
"type": {
|
3352
|
-
"text": "string | null"
|
3353
|
-
},
|
3354
|
-
"default": "null",
|
3355
|
-
"description": "Aria-label attribute to be set for accessibility",
|
3356
|
-
"attribute": "aria-label"
|
3357
|
-
},
|
3358
|
-
{
|
3359
|
-
"kind": "method",
|
3360
|
-
"name": "getCounterText",
|
3361
|
-
"privacy": "private",
|
3362
|
-
"return": {
|
3363
|
-
"type": {
|
3364
|
-
"text": ""
|
3365
|
-
}
|
3366
|
-
},
|
3367
|
-
"parameters": [
|
3368
|
-
{
|
3369
|
-
"name": "maxCounter",
|
3370
|
-
"type": {
|
3371
|
-
"text": "number"
|
3372
|
-
},
|
3373
|
-
"description": "the maximum limit which can be displayed on the badge"
|
3374
|
-
},
|
3375
|
-
{
|
3376
|
-
"name": "counter",
|
3377
|
-
"optional": true,
|
3378
|
-
"type": {
|
3379
|
-
"text": "number"
|
3380
|
-
},
|
3381
|
-
"description": "the number to be displayed on the badge"
|
3382
|
-
}
|
3383
|
-
],
|
3384
|
-
"description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
|
3385
|
-
},
|
3386
|
-
{
|
3387
|
-
"kind": "method",
|
3388
|
-
"name": "getBadgeIcon",
|
3389
|
-
"privacy": "private",
|
3390
|
-
"return": {
|
3391
|
-
"type": {
|
3392
|
-
"text": ""
|
3393
|
-
}
|
3394
|
-
},
|
3395
|
-
"parameters": [
|
3396
|
-
{
|
3397
|
-
"name": "iconName",
|
3398
|
-
"type": {
|
3399
|
-
"text": "string"
|
3400
|
-
},
|
3401
|
-
"description": "the name of the icon from the icon set"
|
3402
|
-
},
|
3403
|
-
{
|
3404
|
-
"name": "backgroundClassPostfix",
|
3405
|
-
"type": {
|
3406
|
-
"text": "string"
|
3407
|
-
},
|
3408
|
-
"description": "postfix for the class to style the badge icon."
|
3409
|
-
}
|
3410
|
-
],
|
3411
|
-
"description": "Method to generate the badge icon."
|
3412
|
-
},
|
3413
|
-
{
|
3414
|
-
"kind": "method",
|
3415
|
-
"name": "getBadgeDot",
|
3416
|
-
"privacy": "private",
|
3417
|
-
"return": {
|
3418
|
-
"type": {
|
3419
|
-
"text": ""
|
3420
|
-
}
|
3421
|
-
},
|
3422
|
-
"description": "Method to generate the badge dot template."
|
3423
|
-
},
|
3424
|
-
{
|
3425
|
-
"kind": "method",
|
3426
|
-
"name": "getBadgeCounterText",
|
3427
|
-
"privacy": "private",
|
3428
|
-
"return": {
|
3429
|
-
"type": {
|
3430
|
-
"text": ""
|
3431
|
-
}
|
3432
|
-
},
|
3433
|
-
"description": "Method to generate the badge text and counter template."
|
3434
|
-
},
|
3435
|
-
{
|
3436
|
-
"kind": "method",
|
3437
|
-
"name": "setRoleByAriaLabel",
|
3438
|
-
"privacy": "private",
|
3439
|
-
"return": {
|
3440
|
-
"type": {
|
3441
|
-
"text": "void"
|
3442
|
-
}
|
3443
|
-
},
|
3444
|
-
"description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
|
3445
|
-
},
|
3446
|
-
{
|
3447
|
-
"kind": "method",
|
3448
|
-
"name": "getBadgeContentBasedOnType",
|
3449
|
-
"privacy": "private",
|
3450
|
-
"return": {
|
3451
|
-
"type": {
|
3452
|
-
"text": ""
|
3453
|
-
}
|
3454
|
-
},
|
3455
|
-
"description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
|
3456
|
-
},
|
3457
|
-
{
|
3458
|
-
"kind": "field",
|
3459
|
-
"name": "iconName",
|
3460
|
-
"type": {
|
3461
|
-
"text": "IconNames | undefined"
|
3462
|
-
},
|
3463
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
3464
|
-
"attribute": "icon-name",
|
3354
|
+
"description": "Color of the link’s child content in the active state.",
|
3355
|
+
"name": "--mdc-link-color-active",
|
3465
3356
|
"inheritedFrom": {
|
3466
|
-
"name": "
|
3467
|
-
"module": "
|
3357
|
+
"name": "Linksimple",
|
3358
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
3468
3359
|
}
|
3469
|
-
}
|
3470
|
-
],
|
3471
|
-
"attributes": [
|
3472
|
-
{
|
3473
|
-
"name": "type",
|
3474
|
-
"type": {
|
3475
|
-
"text": "BadgeType | undefined"
|
3476
|
-
},
|
3477
|
-
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
3478
|
-
"fieldName": "type"
|
3479
3360
|
},
|
3480
3361
|
{
|
3481
|
-
"
|
3482
|
-
"
|
3483
|
-
|
3484
|
-
|
3485
|
-
|
3486
|
-
|
3487
|
-
"fieldName": "variant"
|
3362
|
+
"description": "Color of the link’s child content in the disabled state.",
|
3363
|
+
"name": "--mdc-link-color-disabled",
|
3364
|
+
"inheritedFrom": {
|
3365
|
+
"name": "Linksimple",
|
3366
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
3367
|
+
}
|
3488
3368
|
},
|
3489
3369
|
{
|
3490
|
-
"
|
3491
|
-
"
|
3492
|
-
|
3493
|
-
|
3494
|
-
|
3495
|
-
|
3370
|
+
"description": "Color of the link’s child content in the hover state.",
|
3371
|
+
"name": "--mdc-link-color-hover",
|
3372
|
+
"inheritedFrom": {
|
3373
|
+
"name": "Linksimple",
|
3374
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
3375
|
+
}
|
3496
3376
|
},
|
3497
3377
|
{
|
3498
|
-
"
|
3499
|
-
"
|
3500
|
-
|
3501
|
-
|
3502
|
-
|
3503
|
-
|
3504
|
-
"fieldName": "maxCounter"
|
3378
|
+
"description": "Color of the link’s child content in the normal state.",
|
3379
|
+
"name": "--mdc-link-color-normal",
|
3380
|
+
"inheritedFrom": {
|
3381
|
+
"name": "Linksimple",
|
3382
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
3383
|
+
}
|
3505
3384
|
},
|
3506
3385
|
{
|
3507
|
-
"
|
3508
|
-
"
|
3509
|
-
|
3510
|
-
|
3511
|
-
|
3512
|
-
|
3513
|
-
"fieldName": "overlay"
|
3386
|
+
"description": "Color of the inverted link’s child content in the active state.",
|
3387
|
+
"name": "--mdc-link-inverted-color-active",
|
3388
|
+
"inheritedFrom": {
|
3389
|
+
"name": "Linksimple",
|
3390
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
3391
|
+
}
|
3514
3392
|
},
|
3515
3393
|
{
|
3516
|
-
"
|
3517
|
-
"
|
3518
|
-
|
3519
|
-
|
3520
|
-
|
3521
|
-
|
3522
|
-
"fieldName": "ariaLabel"
|
3394
|
+
"description": "Color of the inverted link’s child content in the disabled state.",
|
3395
|
+
"name": "--mdc-link-inverted-color-disabled",
|
3396
|
+
"inheritedFrom": {
|
3397
|
+
"name": "Linksimple",
|
3398
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
3399
|
+
}
|
3523
3400
|
},
|
3524
3401
|
{
|
3525
|
-
"
|
3526
|
-
"
|
3527
|
-
"text": "IconNames | undefined"
|
3528
|
-
},
|
3529
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
3530
|
-
"fieldName": "iconName",
|
3402
|
+
"description": "Color of the inverted link’s child content in the hover state.",
|
3403
|
+
"name": "--mdc-link-inverted-color-hover",
|
3531
3404
|
"inheritedFrom": {
|
3532
|
-
"name": "
|
3533
|
-
"module": "src/
|
3405
|
+
"name": "Linksimple",
|
3406
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
3534
3407
|
}
|
3535
|
-
}
|
3536
|
-
],
|
3537
|
-
"mixins": [
|
3408
|
+
},
|
3538
3409
|
{
|
3539
|
-
"
|
3540
|
-
"
|
3410
|
+
"description": "Color of the inverted link’s child content in the normal state.",
|
3411
|
+
"name": "--mdc-link-inverted-color-normal",
|
3412
|
+
"inheritedFrom": {
|
3413
|
+
"name": "Linksimple",
|
3414
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
3415
|
+
}
|
3541
3416
|
}
|
3542
|
-
]
|
3543
|
-
"superclass": {
|
3544
|
-
"name": "Component",
|
3545
|
-
"module": "/src/models"
|
3546
|
-
},
|
3547
|
-
"tagName": "mdc-badge",
|
3548
|
-
"jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
|
3549
|
-
"customElement": true
|
3417
|
+
]
|
3550
3418
|
}
|
3551
3419
|
],
|
3552
3420
|
"exports": [
|
@@ -3554,8 +3422,8 @@
|
|
3554
3422
|
"kind": "js",
|
3555
3423
|
"name": "default",
|
3556
3424
|
"declaration": {
|
3557
|
-
"name": "
|
3558
|
-
"module": "components/
|
3425
|
+
"name": "ButtonLink",
|
3426
|
+
"module": "components/buttonlink/buttonlink.component.js"
|
3559
3427
|
}
|
3560
3428
|
}
|
3561
3429
|
]
|
@@ -4309,6 +4177,138 @@
|
|
4309
4177
|
}
|
4310
4178
|
]
|
4311
4179
|
},
|
4180
|
+
{
|
4181
|
+
"kind": "javascript-module",
|
4182
|
+
"path": "components/buttongroup/buttongroup.component.js",
|
4183
|
+
"declarations": [
|
4184
|
+
{
|
4185
|
+
"kind": "class",
|
4186
|
+
"description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
|
4187
|
+
"name": "ButtonGroup",
|
4188
|
+
"cssProperties": [
|
4189
|
+
{
|
4190
|
+
"description": "The border radius of the buttongroup",
|
4191
|
+
"name": "--mdc-buttongroup-border-radius"
|
4192
|
+
},
|
4193
|
+
{
|
4194
|
+
"description": "The border color of the buttongroup",
|
4195
|
+
"name": "--mdc-buttongroup-border-color"
|
4196
|
+
},
|
4197
|
+
{
|
4198
|
+
"description": "The color of the divider between buttons within the buttongroup",
|
4199
|
+
"name": "--mdc-buttongroup-divider-color"
|
4200
|
+
}
|
4201
|
+
],
|
4202
|
+
"slots": [
|
4203
|
+
{
|
4204
|
+
"description": "This is a default/unnamed slot, which contains the buttons",
|
4205
|
+
"name": "default"
|
4206
|
+
}
|
4207
|
+
],
|
4208
|
+
"members": [
|
4209
|
+
{
|
4210
|
+
"kind": "field",
|
4211
|
+
"name": "orientation",
|
4212
|
+
"type": {
|
4213
|
+
"text": "ButtonGroupOrientation"
|
4214
|
+
},
|
4215
|
+
"description": "Orientation of the buttongroup.",
|
4216
|
+
"default": "'horizontal'",
|
4217
|
+
"attribute": "orientation",
|
4218
|
+
"reflects": true
|
4219
|
+
},
|
4220
|
+
{
|
4221
|
+
"kind": "field",
|
4222
|
+
"name": "variant",
|
4223
|
+
"type": {
|
4224
|
+
"text": "ButtonGroupVariant"
|
4225
|
+
},
|
4226
|
+
"description": "Variant of the buttons within the buttongroup.",
|
4227
|
+
"default": "'primary'",
|
4228
|
+
"attribute": "variant",
|
4229
|
+
"reflects": true
|
4230
|
+
},
|
4231
|
+
{
|
4232
|
+
"kind": "field",
|
4233
|
+
"name": "size",
|
4234
|
+
"type": {
|
4235
|
+
"text": "ButtonGroupSize"
|
4236
|
+
},
|
4237
|
+
"description": "Size of the buttons within the buttongroup.",
|
4238
|
+
"default": "'28'",
|
4239
|
+
"attribute": "size",
|
4240
|
+
"reflects": true
|
4241
|
+
},
|
4242
|
+
{
|
4243
|
+
"kind": "field",
|
4244
|
+
"name": "compact",
|
4245
|
+
"type": {
|
4246
|
+
"text": "boolean"
|
4247
|
+
},
|
4248
|
+
"default": "false",
|
4249
|
+
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
4250
|
+
"attribute": "compact",
|
4251
|
+
"reflects": true
|
4252
|
+
}
|
4253
|
+
],
|
4254
|
+
"attributes": [
|
4255
|
+
{
|
4256
|
+
"name": "orientation",
|
4257
|
+
"type": {
|
4258
|
+
"text": "ButtonGroupOrientation"
|
4259
|
+
},
|
4260
|
+
"description": "Orientation of the buttongroup.",
|
4261
|
+
"default": "'horizontal'",
|
4262
|
+
"fieldName": "orientation"
|
4263
|
+
},
|
4264
|
+
{
|
4265
|
+
"name": "variant",
|
4266
|
+
"type": {
|
4267
|
+
"text": "ButtonGroupVariant"
|
4268
|
+
},
|
4269
|
+
"description": "Variant of the buttons within the buttongroup.",
|
4270
|
+
"default": "'primary'",
|
4271
|
+
"fieldName": "variant"
|
4272
|
+
},
|
4273
|
+
{
|
4274
|
+
"name": "size",
|
4275
|
+
"type": {
|
4276
|
+
"text": "ButtonGroupSize"
|
4277
|
+
},
|
4278
|
+
"description": "Size of the buttons within the buttongroup.",
|
4279
|
+
"default": "'28'",
|
4280
|
+
"fieldName": "size"
|
4281
|
+
},
|
4282
|
+
{
|
4283
|
+
"name": "compact",
|
4284
|
+
"type": {
|
4285
|
+
"text": "boolean"
|
4286
|
+
},
|
4287
|
+
"default": "false",
|
4288
|
+
"description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
|
4289
|
+
"fieldName": "compact"
|
4290
|
+
}
|
4291
|
+
],
|
4292
|
+
"superclass": {
|
4293
|
+
"name": "Component",
|
4294
|
+
"module": "/src/models"
|
4295
|
+
},
|
4296
|
+
"tagName": "mdc-buttongroup",
|
4297
|
+
"jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
|
4298
|
+
"customElement": true
|
4299
|
+
}
|
4300
|
+
],
|
4301
|
+
"exports": [
|
4302
|
+
{
|
4303
|
+
"kind": "js",
|
4304
|
+
"name": "default",
|
4305
|
+
"declaration": {
|
4306
|
+
"name": "ButtonGroup",
|
4307
|
+
"module": "components/buttongroup/buttongroup.component.js"
|
4308
|
+
}
|
4309
|
+
}
|
4310
|
+
]
|
4311
|
+
},
|
4312
4312
|
{
|
4313
4313
|
"kind": "javascript-module",
|
4314
4314
|
"path": "components/cardbutton/cardbutton.component.js",
|
package/dist/react/index.d.ts
CHANGED
@@ -1,16 +1,16 @@
|
|
1
1
|
export { default as AlertChip } from './alertchip';
|
2
|
-
export { default as Animation } from './animation';
|
3
2
|
export { default as Appheader } from './appheader';
|
3
|
+
export { default as Animation } from './animation';
|
4
4
|
export { default as Avatar } from './avatar';
|
5
5
|
export { default as AvatarButton } from './avatarbutton';
|
6
|
+
export { default as Badge } from './badge';
|
6
7
|
export { default as Brandvisual } from './brandvisual';
|
7
8
|
export { default as Bullet } from './bullet';
|
8
9
|
export { default as Button } from './button';
|
9
|
-
export { default as ButtonGroup } from './buttongroup';
|
10
10
|
export { default as ButtonLink } from './buttonlink';
|
11
|
-
export { default as Badge } from './badge';
|
12
11
|
export { default as Buttonsimple } from './buttonsimple';
|
13
12
|
export { default as Card } from './card';
|
13
|
+
export { default as ButtonGroup } from './buttongroup';
|
14
14
|
export { default as CardButton } from './cardbutton';
|
15
15
|
export { default as CardCheckbox } from './cardcheckbox';
|
16
16
|
export { default as CardRadio } from './cardradio';
|
package/dist/react/index.js
CHANGED
@@ -1,16 +1,16 @@
|
|
1
1
|
export { default as AlertChip } from './alertchip';
|
2
|
-
export { default as Animation } from './animation';
|
3
2
|
export { default as Appheader } from './appheader';
|
3
|
+
export { default as Animation } from './animation';
|
4
4
|
export { default as Avatar } from './avatar';
|
5
5
|
export { default as AvatarButton } from './avatarbutton';
|
6
|
+
export { default as Badge } from './badge';
|
6
7
|
export { default as Brandvisual } from './brandvisual';
|
7
8
|
export { default as Bullet } from './bullet';
|
8
9
|
export { default as Button } from './button';
|
9
|
-
export { default as ButtonGroup } from './buttongroup';
|
10
10
|
export { default as ButtonLink } from './buttonlink';
|
11
|
-
export { default as Badge } from './badge';
|
12
11
|
export { default as Buttonsimple } from './buttonsimple';
|
13
12
|
export { default as Card } from './card';
|
13
|
+
export { default as ButtonGroup } from './buttongroup';
|
14
14
|
export { default as CardButton } from './cardbutton';
|
15
15
|
export { default as CardCheckbox } from './cardcheckbox';
|
16
16
|
export { default as CardRadio } from './cardradio';
|
package/package.json
CHANGED