@momentum-design/components 0.47.0 → 0.48.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.
|
@@ -78,7 +78,11 @@ class Searchfield extends Input {
|
|
|
78
78
|
})}" part="input-container">
|
|
79
79
|
${this.renderLeadingIcon()}
|
|
80
80
|
<div part='scrollable-container'>
|
|
81
|
-
<div part="filters-container"
|
|
81
|
+
<div part="filters-container"
|
|
82
|
+
@click=${() => this.inputElement.focus()}
|
|
83
|
+
@keydown=${(e) => e.key === 'Enter' ? this.inputElement.focus() : null}
|
|
84
|
+
@keyup=${(e) => e.key === ' ' ? this.inputElement.focus() : null}>
|
|
85
|
+
<slot name="filters" @slotchange=${this.renderInputChips}></slot></div>
|
|
82
86
|
${this.renderInputElement(DEFAULTS.TYPE)}
|
|
83
87
|
</div>
|
|
84
88
|
${this.renderTrailingButton()}
|
|
@@ -1371,6 +1371,183 @@
|
|
|
1371
1371
|
}
|
|
1372
1372
|
]
|
|
1373
1373
|
},
|
|
1374
|
+
{
|
|
1375
|
+
"kind": "javascript-module",
|
|
1376
|
+
"path": "components/brandvisual/brandvisual.component.js",
|
|
1377
|
+
"declarations": [
|
|
1378
|
+
{
|
|
1379
|
+
"kind": "class",
|
|
1380
|
+
"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.",
|
|
1381
|
+
"name": "Brandvisual",
|
|
1382
|
+
"members": [
|
|
1383
|
+
{
|
|
1384
|
+
"kind": "field",
|
|
1385
|
+
"name": "brandVisualData",
|
|
1386
|
+
"type": {
|
|
1387
|
+
"text": "HTMLElement | undefined"
|
|
1388
|
+
},
|
|
1389
|
+
"privacy": "private"
|
|
1390
|
+
},
|
|
1391
|
+
{
|
|
1392
|
+
"kind": "field",
|
|
1393
|
+
"name": "name",
|
|
1394
|
+
"type": {
|
|
1395
|
+
"text": "BrandVisualNames | undefined"
|
|
1396
|
+
},
|
|
1397
|
+
"description": "Name of the brandVisual (= filename)",
|
|
1398
|
+
"attribute": "name",
|
|
1399
|
+
"reflects": true
|
|
1400
|
+
},
|
|
1401
|
+
{
|
|
1402
|
+
"kind": "method",
|
|
1403
|
+
"name": "getBrandVisualData",
|
|
1404
|
+
"privacy": "private"
|
|
1405
|
+
},
|
|
1406
|
+
{
|
|
1407
|
+
"kind": "method",
|
|
1408
|
+
"name": "handleBrandVisualLoadedSuccess",
|
|
1409
|
+
"privacy": "private",
|
|
1410
|
+
"parameters": [
|
|
1411
|
+
{
|
|
1412
|
+
"name": "brandVisualHtml",
|
|
1413
|
+
"type": {
|
|
1414
|
+
"text": "HTMLElement"
|
|
1415
|
+
},
|
|
1416
|
+
"description": "The brandvisual html element which has been fetched from the brandvisual provider."
|
|
1417
|
+
}
|
|
1418
|
+
],
|
|
1419
|
+
"description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
|
|
1420
|
+
},
|
|
1421
|
+
{
|
|
1422
|
+
"kind": "method",
|
|
1423
|
+
"name": "handleBrandVisualLoadedFailure",
|
|
1424
|
+
"privacy": "private",
|
|
1425
|
+
"parameters": [
|
|
1426
|
+
{
|
|
1427
|
+
"name": "error",
|
|
1428
|
+
"type": {
|
|
1429
|
+
"text": "unknown"
|
|
1430
|
+
}
|
|
1431
|
+
}
|
|
1432
|
+
],
|
|
1433
|
+
"description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
1434
|
+
}
|
|
1435
|
+
],
|
|
1436
|
+
"events": [
|
|
1437
|
+
{
|
|
1438
|
+
"description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
|
|
1439
|
+
"name": "load",
|
|
1440
|
+
"reactName": "onLoad",
|
|
1441
|
+
"eventName": "LoadEvent"
|
|
1442
|
+
},
|
|
1443
|
+
{
|
|
1444
|
+
"description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
|
|
1445
|
+
"name": "error",
|
|
1446
|
+
"reactName": "onError",
|
|
1447
|
+
"eventName": "ErrorEvent"
|
|
1448
|
+
}
|
|
1449
|
+
],
|
|
1450
|
+
"attributes": [
|
|
1451
|
+
{
|
|
1452
|
+
"name": "name",
|
|
1453
|
+
"type": {
|
|
1454
|
+
"text": "BrandVisualNames | undefined"
|
|
1455
|
+
},
|
|
1456
|
+
"description": "Name of the brandVisual (= filename)",
|
|
1457
|
+
"fieldName": "name"
|
|
1458
|
+
}
|
|
1459
|
+
],
|
|
1460
|
+
"superclass": {
|
|
1461
|
+
"name": "Component",
|
|
1462
|
+
"module": "/src/models"
|
|
1463
|
+
},
|
|
1464
|
+
"tagName": "mdc-brandvisual",
|
|
1465
|
+
"jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\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.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
|
|
1466
|
+
"customElement": true
|
|
1467
|
+
}
|
|
1468
|
+
],
|
|
1469
|
+
"exports": [
|
|
1470
|
+
{
|
|
1471
|
+
"kind": "js",
|
|
1472
|
+
"name": "default",
|
|
1473
|
+
"declaration": {
|
|
1474
|
+
"name": "Brandvisual",
|
|
1475
|
+
"module": "components/brandvisual/brandvisual.component.js"
|
|
1476
|
+
}
|
|
1477
|
+
}
|
|
1478
|
+
]
|
|
1479
|
+
},
|
|
1480
|
+
{
|
|
1481
|
+
"kind": "javascript-module",
|
|
1482
|
+
"path": "components/bullet/bullet.component.js",
|
|
1483
|
+
"declarations": [
|
|
1484
|
+
{
|
|
1485
|
+
"kind": "class",
|
|
1486
|
+
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
1487
|
+
"name": "Bullet",
|
|
1488
|
+
"cssProperties": [
|
|
1489
|
+
{
|
|
1490
|
+
"description": "background color of the bullet",
|
|
1491
|
+
"name": "--mdc-bullet-background-color"
|
|
1492
|
+
},
|
|
1493
|
+
{
|
|
1494
|
+
"description": "small size value of the bullet",
|
|
1495
|
+
"name": "--mdc-bullet-size-small"
|
|
1496
|
+
},
|
|
1497
|
+
{
|
|
1498
|
+
"description": "medium size value of the bullet",
|
|
1499
|
+
"name": "--mdc-bullet-size-medium"
|
|
1500
|
+
},
|
|
1501
|
+
{
|
|
1502
|
+
"description": "large size value of the bullet",
|
|
1503
|
+
"name": "--mdc-bullet-size-large"
|
|
1504
|
+
}
|
|
1505
|
+
],
|
|
1506
|
+
"members": [
|
|
1507
|
+
{
|
|
1508
|
+
"kind": "field",
|
|
1509
|
+
"name": "size",
|
|
1510
|
+
"type": {
|
|
1511
|
+
"text": "Size"
|
|
1512
|
+
},
|
|
1513
|
+
"privacy": "public",
|
|
1514
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1515
|
+
"default": "small",
|
|
1516
|
+
"attribute": "size",
|
|
1517
|
+
"reflects": true
|
|
1518
|
+
}
|
|
1519
|
+
],
|
|
1520
|
+
"attributes": [
|
|
1521
|
+
{
|
|
1522
|
+
"name": "size",
|
|
1523
|
+
"type": {
|
|
1524
|
+
"text": "Size"
|
|
1525
|
+
},
|
|
1526
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1527
|
+
"default": "small",
|
|
1528
|
+
"fieldName": "size"
|
|
1529
|
+
}
|
|
1530
|
+
],
|
|
1531
|
+
"superclass": {
|
|
1532
|
+
"name": "Component",
|
|
1533
|
+
"module": "/src/models"
|
|
1534
|
+
},
|
|
1535
|
+
"tagName": "mdc-bullet",
|
|
1536
|
+
"jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
|
|
1537
|
+
"customElement": true
|
|
1538
|
+
}
|
|
1539
|
+
],
|
|
1540
|
+
"exports": [
|
|
1541
|
+
{
|
|
1542
|
+
"kind": "js",
|
|
1543
|
+
"name": "default",
|
|
1544
|
+
"declaration": {
|
|
1545
|
+
"name": "Bullet",
|
|
1546
|
+
"module": "components/bullet/bullet.component.js"
|
|
1547
|
+
}
|
|
1548
|
+
}
|
|
1549
|
+
]
|
|
1550
|
+
},
|
|
1374
1551
|
{
|
|
1375
1552
|
"kind": "javascript-module",
|
|
1376
1553
|
"path": "components/badge/badge.component.js",
|
|
@@ -1692,183 +1869,6 @@
|
|
|
1692
1869
|
}
|
|
1693
1870
|
]
|
|
1694
1871
|
},
|
|
1695
|
-
{
|
|
1696
|
-
"kind": "javascript-module",
|
|
1697
|
-
"path": "components/brandvisual/brandvisual.component.js",
|
|
1698
|
-
"declarations": [
|
|
1699
|
-
{
|
|
1700
|
-
"kind": "class",
|
|
1701
|
-
"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.",
|
|
1702
|
-
"name": "Brandvisual",
|
|
1703
|
-
"members": [
|
|
1704
|
-
{
|
|
1705
|
-
"kind": "field",
|
|
1706
|
-
"name": "brandVisualData",
|
|
1707
|
-
"type": {
|
|
1708
|
-
"text": "HTMLElement | undefined"
|
|
1709
|
-
},
|
|
1710
|
-
"privacy": "private"
|
|
1711
|
-
},
|
|
1712
|
-
{
|
|
1713
|
-
"kind": "field",
|
|
1714
|
-
"name": "name",
|
|
1715
|
-
"type": {
|
|
1716
|
-
"text": "BrandVisualNames | undefined"
|
|
1717
|
-
},
|
|
1718
|
-
"description": "Name of the brandVisual (= filename)",
|
|
1719
|
-
"attribute": "name",
|
|
1720
|
-
"reflects": true
|
|
1721
|
-
},
|
|
1722
|
-
{
|
|
1723
|
-
"kind": "method",
|
|
1724
|
-
"name": "getBrandVisualData",
|
|
1725
|
-
"privacy": "private"
|
|
1726
|
-
},
|
|
1727
|
-
{
|
|
1728
|
-
"kind": "method",
|
|
1729
|
-
"name": "handleBrandVisualLoadedSuccess",
|
|
1730
|
-
"privacy": "private",
|
|
1731
|
-
"parameters": [
|
|
1732
|
-
{
|
|
1733
|
-
"name": "brandVisualHtml",
|
|
1734
|
-
"type": {
|
|
1735
|
-
"text": "HTMLElement"
|
|
1736
|
-
},
|
|
1737
|
-
"description": "The brandvisual html element which has been fetched from the brandvisual provider."
|
|
1738
|
-
}
|
|
1739
|
-
],
|
|
1740
|
-
"description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
|
|
1741
|
-
},
|
|
1742
|
-
{
|
|
1743
|
-
"kind": "method",
|
|
1744
|
-
"name": "handleBrandVisualLoadedFailure",
|
|
1745
|
-
"privacy": "private",
|
|
1746
|
-
"parameters": [
|
|
1747
|
-
{
|
|
1748
|
-
"name": "error",
|
|
1749
|
-
"type": {
|
|
1750
|
-
"text": "unknown"
|
|
1751
|
-
}
|
|
1752
|
-
}
|
|
1753
|
-
],
|
|
1754
|
-
"description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
1755
|
-
}
|
|
1756
|
-
],
|
|
1757
|
-
"events": [
|
|
1758
|
-
{
|
|
1759
|
-
"description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
|
|
1760
|
-
"name": "load",
|
|
1761
|
-
"reactName": "onLoad",
|
|
1762
|
-
"eventName": "LoadEvent"
|
|
1763
|
-
},
|
|
1764
|
-
{
|
|
1765
|
-
"description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
|
|
1766
|
-
"name": "error",
|
|
1767
|
-
"reactName": "onError",
|
|
1768
|
-
"eventName": "ErrorEvent"
|
|
1769
|
-
}
|
|
1770
|
-
],
|
|
1771
|
-
"attributes": [
|
|
1772
|
-
{
|
|
1773
|
-
"name": "name",
|
|
1774
|
-
"type": {
|
|
1775
|
-
"text": "BrandVisualNames | undefined"
|
|
1776
|
-
},
|
|
1777
|
-
"description": "Name of the brandVisual (= filename)",
|
|
1778
|
-
"fieldName": "name"
|
|
1779
|
-
}
|
|
1780
|
-
],
|
|
1781
|
-
"superclass": {
|
|
1782
|
-
"name": "Component",
|
|
1783
|
-
"module": "/src/models"
|
|
1784
|
-
},
|
|
1785
|
-
"tagName": "mdc-brandvisual",
|
|
1786
|
-
"jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\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.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
|
|
1787
|
-
"customElement": true
|
|
1788
|
-
}
|
|
1789
|
-
],
|
|
1790
|
-
"exports": [
|
|
1791
|
-
{
|
|
1792
|
-
"kind": "js",
|
|
1793
|
-
"name": "default",
|
|
1794
|
-
"declaration": {
|
|
1795
|
-
"name": "Brandvisual",
|
|
1796
|
-
"module": "components/brandvisual/brandvisual.component.js"
|
|
1797
|
-
}
|
|
1798
|
-
}
|
|
1799
|
-
]
|
|
1800
|
-
},
|
|
1801
|
-
{
|
|
1802
|
-
"kind": "javascript-module",
|
|
1803
|
-
"path": "components/bullet/bullet.component.js",
|
|
1804
|
-
"declarations": [
|
|
1805
|
-
{
|
|
1806
|
-
"kind": "class",
|
|
1807
|
-
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
1808
|
-
"name": "Bullet",
|
|
1809
|
-
"cssProperties": [
|
|
1810
|
-
{
|
|
1811
|
-
"description": "background color of the bullet",
|
|
1812
|
-
"name": "--mdc-bullet-background-color"
|
|
1813
|
-
},
|
|
1814
|
-
{
|
|
1815
|
-
"description": "small size value of the bullet",
|
|
1816
|
-
"name": "--mdc-bullet-size-small"
|
|
1817
|
-
},
|
|
1818
|
-
{
|
|
1819
|
-
"description": "medium size value of the bullet",
|
|
1820
|
-
"name": "--mdc-bullet-size-medium"
|
|
1821
|
-
},
|
|
1822
|
-
{
|
|
1823
|
-
"description": "large size value of the bullet",
|
|
1824
|
-
"name": "--mdc-bullet-size-large"
|
|
1825
|
-
}
|
|
1826
|
-
],
|
|
1827
|
-
"members": [
|
|
1828
|
-
{
|
|
1829
|
-
"kind": "field",
|
|
1830
|
-
"name": "size",
|
|
1831
|
-
"type": {
|
|
1832
|
-
"text": "Size"
|
|
1833
|
-
},
|
|
1834
|
-
"privacy": "public",
|
|
1835
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1836
|
-
"default": "small",
|
|
1837
|
-
"attribute": "size",
|
|
1838
|
-
"reflects": true
|
|
1839
|
-
}
|
|
1840
|
-
],
|
|
1841
|
-
"attributes": [
|
|
1842
|
-
{
|
|
1843
|
-
"name": "size",
|
|
1844
|
-
"type": {
|
|
1845
|
-
"text": "Size"
|
|
1846
|
-
},
|
|
1847
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1848
|
-
"default": "small",
|
|
1849
|
-
"fieldName": "size"
|
|
1850
|
-
}
|
|
1851
|
-
],
|
|
1852
|
-
"superclass": {
|
|
1853
|
-
"name": "Component",
|
|
1854
|
-
"module": "/src/models"
|
|
1855
|
-
},
|
|
1856
|
-
"tagName": "mdc-bullet",
|
|
1857
|
-
"jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
|
|
1858
|
-
"customElement": true
|
|
1859
|
-
}
|
|
1860
|
-
],
|
|
1861
|
-
"exports": [
|
|
1862
|
-
{
|
|
1863
|
-
"kind": "js",
|
|
1864
|
-
"name": "default",
|
|
1865
|
-
"declaration": {
|
|
1866
|
-
"name": "Bullet",
|
|
1867
|
-
"module": "components/bullet/bullet.component.js"
|
|
1868
|
-
}
|
|
1869
|
-
}
|
|
1870
|
-
]
|
|
1871
|
-
},
|
|
1872
1872
|
{
|
|
1873
1873
|
"kind": "javascript-module",
|
|
1874
1874
|
"path": "components/button/button.component.js",
|
package/dist/react/index.d.ts
CHANGED
|
@@ -2,9 +2,9 @@ export { default as AlertChip } from './alertchip';
|
|
|
2
2
|
export { default as Appheader } from './appheader';
|
|
3
3
|
export { default as Avatar } from './avatar';
|
|
4
4
|
export { default as AvatarButton } from './avatarbutton';
|
|
5
|
-
export { default as Badge } from './badge';
|
|
6
5
|
export { default as Brandvisual } from './brandvisual';
|
|
7
6
|
export { default as Bullet } from './bullet';
|
|
7
|
+
export { default as Badge } from './badge';
|
|
8
8
|
export { default as Button } from './button';
|
|
9
9
|
export { default as Buttonsimple } from './buttonsimple';
|
|
10
10
|
export { default as Checkbox } from './checkbox';
|
package/dist/react/index.js
CHANGED
|
@@ -2,9 +2,9 @@ export { default as AlertChip } from './alertchip';
|
|
|
2
2
|
export { default as Appheader } from './appheader';
|
|
3
3
|
export { default as Avatar } from './avatar';
|
|
4
4
|
export { default as AvatarButton } from './avatarbutton';
|
|
5
|
-
export { default as Badge } from './badge';
|
|
6
5
|
export { default as Brandvisual } from './brandvisual';
|
|
7
6
|
export { default as Bullet } from './bullet';
|
|
7
|
+
export { default as Badge } from './badge';
|
|
8
8
|
export { default as Button } from './button';
|
|
9
9
|
export { default as Buttonsimple } from './buttonsimple';
|
|
10
10
|
export { default as Checkbox } from './checkbox';
|
package/package.json
CHANGED