all files / maps/layers/ legend.js

96.39% Statements 1390/1442
84.42% Branches 975/1155
98.51% Functions 66/67
96.39% Lines 1389/1441
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181   354× 354× 354× 354× 354× 354× 354× 354× 354× 354× 354× 354× 354× 354× 354× 354× 354× 354×   357× 357× 357× 357× 357× 357× 357× 357× 357× 357×   357× 357× 357× 357× 357× 357× 357× 357× 357× 454× 362× 362× 362× 362× 362× 362× 362× 318× 318× 318×   44× 18× 20× 20× 18× 18× 18× 18×         454× 33×     357× 336× 1279× 1279×         1279× 1279× 1279× 1279× 1279× 1279×       357× 357× 357× 357× 335× 335× 335× 335× 335× 335× 335× 335× 335× 335× 335× 335× 335× 335×   335×   335×   335× 335× 335× 335× 335× 335× 101× 101× 101×   101×   101× 101× 101× 101× 101× 101× 101× 101× 101× 101× 101× 460× 460× 460× 460× 460× 440×   20× 10× 10×     10×   460× 460× 460× 440× 257× 257×       183×   183×     460× 101×   101×   101×         359× 99×   99×     460×               101×   101×     234× 234× 234× 234× 234× 814× 814× 234×   814× 814× 814× 234× 234×       580× 580× 497× 497× 67×   67× 49× 49× 49× 49× 49× 49×     18× 18×       430× 430×       83×   83×               77× 77× 77×       814× 814× 814× 814× 814×                                 814×   234× 234× 731× 731× 234× 234×   731× 731×   234× 234× 234×             336× 336× 336×   55× 55× 55×     76× 76× 76× 76×             357× 357× 357× 357× 357×               357× 357× 103× 460× 460× 460× 460× 460× 101×   460× 460× 460× 460× 460× 460× 460× 460× 460× 460× 460× 460× 71×   460×       254×     260× 260× 260× 260× 260× 260× 260× 260× 240×   240× 744× 744× 744× 744× 744× 744×   744×     744× 744× 744× 744× 744× 744×         744×   744×   744× 744× 744× 240×   744×   744×     740×   744× 744×   744× 744× 744× 744× 744× 744× 132× 132×   744× 240× 240× 240× 240× 31× 31× 31× 31×   31× 31× 31× 31× 31× 31× 31×   31×   31× 31× 31× 31× 31× 31× 31× 31× 28× 28×       31× 31× 31× 31× 31× 31× 31× 31× 31× 31×     29× 29×   31× 31× 31× 31× 31×                           31× 31× 31× 31× 31× 31×   240×         203×                                     28× 28× 28× 28× 28× 28×   28× 28× 28× 28× 28× 28× 28× 28× 28×       27× 17× 17×   17×                           10×             10×   27× 22× 98×     98×   22× 22× 22× 22× 22× 22× 22× 22× 22×   22× 22× 853× 853× 853× 853× 853× 853× 850×           853× 845× 845× 845× 437× 355× 355×       845× 476×   476× 476× 476× 476× 476× 476× 476× 476× 476× 476× 476× 476× 476×   369× 369× 369× 369× 14× 14×               369× 369× 369× 369× 369× 369× 369× 369×   369× 12× 12×                   2483× 2483× 854× 854×     1629× 1629× 1629× 1629×     56×           56× 56× 56× 56×   128× 17× 17× 17× 17× 631×   631× 631×       19×     35× 168× 168×   168× 168× 168× 168×           39× 16× 16× 16× 16×       16× 16×         155× 152× 152× 152× 152× 152× 152× 152×       151×       151×       151×     151× 18× 17× 17× 309× 11×     17× 17×                       18× 18×   133× 133× 133× 133× 118× 118× 118×       15×   15×   133× 133× 133× 133× 133× 133× 105× 99× 99×       133× 13× 13× 13×   13× 13× 13×     13×                 11× 11×     120× 119× 119× 102× 102× 102×       100×       119×   24× 12×                 113×   21× 21× 21×     113× 113× 94× 92×     113× 21×   113× 113× 113× 113× 113× 113×   113×                     132× 132× 102×   98×     132×   180× 119× 119×         229× 229×             152× 152× 152× 152× 152× 152× 152× 152× 136×   152× 152× 828× 828× 4246× 766× 22270× 4571×         828× 23728× 4773×       152×   152× 152× 152× 152× 152× 152× 152× 650× 650× 650× 650× 650× 22372× 22372× 22372× 22372× 22372× 22372× 22372×             22372× 152×   22372×   650× 152× 152×       152× 152×         170× 170× 170× 170× 170× 170× 169×           170× 168×       700× 700× 700× 616×                   700× 616×                           341× 341× 341× 341×         341× 341× 341× 341× 341× 341× 281× 66× 66×     215×     341×     341×       341× 341× 341× 341× 341×   341× 330×   341× 99× 99×   99×   99×   99× 99× 99× 99×                         341× 341× 341× 341× 341× 341× 341× 341× 341× 341× 341× 341× 341× 341× 11×   11×     330×     300× 300× 300× 300× 300×     30× 30× 30× 30× 30×   330×   14×       14×           330× 45×     285× 285× 44×   285×   330× 14×   330×     33× 33× 24× 24× 24× 24× 100× 100×   100× 96×     96× 96× 96× 96× 72× 72×     24×     24×           72× 72× 72× 72× 72× 304× 304× 76×         72×   336× 336× 336× 336× 336× 336× 960× 712× 712× 712× 712× 711× 51702×   51702× 10902× 10902×       712× 10×         712×     712× 712×     336× 336× 960× 960×     17484× 17484× 17484× 1281× 16380× 16380× 16298× 38028×       82×   16380×   1281×   1281× 1279×                     78× 78× 110×     108×     78×   336× 336× 336× 336× 336× 336× 336× 336× 960× 251× 251× 251× 251× 250× 10314×   10314× 5069× 5069× 239×   5069×     5245× 318×         251× 408× 763× 289× 289×       251×         251×   251×   709×   204×   204× 153× 81×       51× 51× 51× 204× 204× 49×             51×             336× 336× 960× 960×     336× 336× 336× 336× 336× 311× 16421×     16421×   16421× 16421× 16421×   270×     270×   16421×       80× 80× 80× 80×   80× 32× 32× 32× 32× 32× 32×   32× 32×     32×   26× 26× 117× 117× 117× 117× 117× 117× 117× 117× 117× 117× 2914× 26× 26× 26×               26×     117× 117× 2914× 2914× 26×             48×         26× 26× 26× 26× 26× 26×   26× 26× 20× 18× 18× 18×                           26× 26×       26×     62×   354×   353× 353× 353×   13× 13× 13× 13× 13×     13× 13× 13×     90× 90× 90× 90× 90×       132× 132× 132× 132× 132× 132× 132×   132× 56× 56× 56× 56× 56× 56× 24× 35× 24× 164× 164×     164×       164× 164× 97× 63× 63× 63× 63× 63×         34× 34× 34× 34× 34×   97×       97× 97× 97× 97× 34×     63×               67×       60×   67× 67× 67× 67× 67×           24×       56× 18× 18× 18× 18×   18× 27× 2646× 2646×   2646× 2645× 2645× 1991× 20×   1991× 1291×   1991× 1526× 1526× 1526× 1526× 1526×         465× 465× 465× 465× 465×   1991× 1991× 1991× 1991× 465×     1526×               654×   654× 436×   654× 654×     654× 654× 654× 654× 654× 654× 654×           18×     76×     38× 38× 38× 38× 38× 38× 19× 19× 28× 19× 103× 103×     103×       103× 67×       67× 33× 33× 33× 33×     33×     34× 34× 34× 34× 34×   67× 67× 67× 67× 34×     33×                 36×       30×   36× 36× 36× 36× 36× 36× 36× 36× 36×       19×       38× 12× 12× 12× 12×   12× 16× 1746× 1746×   1746× 1744× 1744× 872×   872× 654×   872× 327× 327× 327× 327× 327×         545× 545× 545× 545× 545×   872× 872× 872× 872× 545×     327×                 872×   872× 654×   872× 872×   872× 872×     872× 872× 872× 872× 872×           12×       30× 30× 30×     30× 30×     30× 30×     30× 30×       353× 56×   297× 297× 297×   16324× 16324× 16324× 2233149× 2233149× 2233149× 2233149×   2233149×     2233149× 40400× 40400×                               16324×   4620× 4620× 4620× 4620× 4620× 4620× 3136×     27× 27× 27× 27× 27× 27×       3430×   353× 353× 353× 353× 353× 353× 353× 353× 353× 353× 353× 353× 353× 353× 353× 353× 353× 353× 353× 353×        
define(["require", "exports", "../index", "../utils/helper", "../utils/helper", "@syncfusion/ej2-base", "../model/theme"], function (require, exports, index_1, helper_1, helper_2, ej2_base_1, theme_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Legend = (function () {
        function Legend(maps) {
            this.legendBorderRect = new helper_1.Rect(0, 0, 0, 0);
            this.initialMapAreaRect = new helper_1.Rect(0, 0, 0, 0);
            this.legendTotalRect = new helper_1.Rect(0, 0, 0, 0);
            this.totalPages = [];
            this.page = 0;
            this.currentPage = 0;
            this.legendItemRect = new helper_1.Rect(0, 0, 0, 0);
            this.heightIncrement = 0;
            this.widthIncrement = 0;
            this.textMaxWidth = 0;
            this.shapeHighlightCollection = [];
            this.legendHighlightCollection = [];
            this.shapePreviousColor = [];
            this.selectedNonLegendShapes = [];
            this.shapeToggled = true;
            this.legendElement = null;
            this.maps = maps;
            this.addEventListener();
        }
        Legend.prototype.renderLegend = function () {
            this.legendRenderingCollections = [];
            this.legendCollection = [];
            this.totalPages = [];
            this.widthIncrement = 0;
            this.heightIncrement = 0;
            this.defsElement = this.maps.renderer.createDefs();
            this.maps.svgObject.appendChild(this.defsElement);
            this.initialMapAreaRect = this.maps.mapAreaRect;
            this.calculateLegendBounds();
            this.drawLegend();
        };
        Legend.prototype.calculateLegendBounds = function () {
            var _this = this;
            var map = this.maps;
            var legend = map.legendSettings;
            this.legendCollection = [];
            var spacing = 10;
            var leftPadding = 10;
            var topPadding = map.mapAreaRect.y;
            this.legendRenderingCollections = [];
            Array.prototype.forEach.call(map.layersCollection, function (layer, layerIndex) {
                if (!ej2_base_1.isNullOrUndefined(layer.shapeData)) {
                    var layerData = layer.shapeData['features'];
                    var dataPath = layer.shapeDataPath;
                    var propertyPath = layer.shapePropertyPath;
                    var dataSource = layer.dataSource;
                    var colorValuePath = void 0;
                    var colorMapping = void 0;
                    if (legend.type === 'Layers' && layer.visible) {
                        colorValuePath = layer.shapeSettings.colorValuePath;
                        colorMapping = layer.shapeSettings.colorMapping;
                        _this.getLegends(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
                    }
                    else if (legend.type === 'Bubbles') {
                        for (var _i = 0, _a = layer.bubbleSettings; _i < _a.length; _i++) {
                            var bubble = _a[_i];
                            if (bubble.visible) {
                                colorValuePath = bubble.colorValuePath;
                                colorMapping = bubble.colorMapping;
                                dataSource = bubble.dataSource;
                                _this.getLegends(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
                            }
                        }
                    }
                }
                if (legend.type === 'Markers') {
                    _this.getMarkersLegendCollections(layerIndex, layer.markerSettings);
                }
            });
            if (this.legendCollection.length > 0) {
                for (var i = 0; i < this.legendCollection.length; i++) {
                    var legendItem = this.legendCollection[i];
                    var eventArgs = {
                        name: index_1.legendRendering, cancel: false, fill: legendItem['fill'], shape: legend.shape,
                        shapeBorder: legend.shapeBorder,
                        text: typeof legendItem['text'] === 'number' ? legendItem['text'].toString() : legendItem['text']
                    };
                    map.trigger('legendRendering', eventArgs);
                    legendItem['fill'] = eventArgs.fill;
                    legendItem['shape'] = eventArgs.shape;
                    legendItem['shapeBorder'] = eventArgs.shapeBorder;
                    legendItem['text'] = eventArgs.text;
                    if (eventArgs.cancel) {
                        this.legendCollection.splice(i, 1);
                        i--;
                    }
                }
            }
            var defaultSize = 25;
            var legendTitle = map.legendSettings.title.text;
            var titleTextStyle = map.legendSettings.titleStyle;
            if (this.legendCollection.length > 0) {
                var legendMode = legend.mode;
                var shapeX = 0;
                var shapeY = 0;
                var textX = 0;
                var textY = 0;
                var shapePadding = legend.shapePadding;
                var textPadding = 10;
                var shapeHeight = legend.shapeHeight;
                var shapeWidth = legend.shapeWidth;
                var shapeLocation = [];
                var textLocation = [];
                var position = legend.position;
                var labelAction = legend.labelDisplayMode;
                var arrangement = (legend.orientation === 'None') ? ((position === 'Top' || position === 'Bottom')
                    ? 'Horizontal' : 'Vertical') : legend.orientation;
                var legendWidth = (legend.width.length > 1) ? (legend.width.indexOf('%') > -1) ? (map.availableSize.width / 100)
                    * parseInt(legend.width, 10) : parseInt(legend.width, 10) : null;
                var legendHeight = (legend.height.length > 1) ? (legend.height.indexOf('%') > -1) ? (map.availableSize.height / 100) *
                    parseInt(legend.height, 10) : parseInt(legend.height, 10) : null;
                var legendItemStartX_1;
                var legendItemStartY_1;
                var startX = 0;
                var startY = 0;
                var legendtitleSize = helper_1.measureText(legendTitle, titleTextStyle);
                if (legendMode === 'Interactive') {
                    var itemTextStyle = legend.textStyle;
                    var legendLength = this.legendCollection.length;
                    var rectWidth = (arrangement === 'Horizontal') ? (ej2_base_1.isNullOrUndefined(legendWidth)) ? (map.mapAreaRect.width / legendLength) :
                        (legendWidth / legendLength) : (ej2_base_1.isNullOrUndefined(legendWidth)) ? defaultSize : legendWidth;
                    var rectHeight = (arrangement === 'Horizontal') ? (ej2_base_1.isNullOrUndefined(legendHeight)) ? defaultSize : legendHeight :
                        (ej2_base_1.isNullOrUndefined(legendHeight)) ? (map.mapAreaRect.height / legendLength) : (legendHeight / legendLength);
                    startX = 0;
                    startY = legendtitleSize.height + spacing;
                    var position_1 = legend.labelPosition;
                    var textX_1 = 0;
                    var textY_1 = 0;
                    var textPadding_1 = 10;
                    var itemStartX = 0;
                    var itemStartY = 0;
                    var maxTextHeight = 0;
                    var maxTextWidth = 0;
                    for (var i = 0; i < this.legendCollection.length; i++) {
                        startX = (arrangement === 'Horizontal') ? (startX + rectWidth) : startX;
                        startY = (arrangement === 'Horizontal') ? startY : (startY + rectHeight);
                        var legendText = this.legendCollection[i]['text'];
                        var itemTextSize = new helper_2.Size(0, 0);
                        if (labelAction === 'None') {
                            itemTextSize = helper_1.measureText(legendText, itemTextStyle);
                        }
                        else if (labelAction === 'Trim') {
                            legendText = helper_1.textTrim((arrangement === 'Horizontal' ? rectWidth : rectHeight), legendText, itemTextStyle);
                            itemTextSize = helper_1.measureText(legendText, itemTextStyle);
                        }
                        else {
                            legendText = '';
                        }
                        maxTextHeight = Math.max(maxTextHeight, itemTextSize.height);
                        maxTextWidth = Math.max(maxTextWidth, itemTextSize.width);
                        if (itemTextSize.width > 0 && itemTextSize.height > 0) {
                            if (arrangement === 'Horizontal') {
                                textX_1 = startX + (rectWidth / 2);
                                textY_1 = (position_1 === 'After') ? (startY + rectHeight + (itemTextSize.height / 2)) + textPadding_1 :
                                    (startY - textPadding_1);
                            }
                            else {
                                textX_1 = (position_1 === 'After') ? startX - (itemTextSize.width / 2) - textPadding_1
                                    : (startX + rectWidth + itemTextSize.width / 2) + textPadding_1;
                                textY_1 = startY + (rectHeight / 2) + (itemTextSize.height / 4);
                            }
                        }
                        if (i === 0) {
                            itemStartX = (arrangement === 'Horizontal') ? startX : (position_1 === 'After') ?
                                textX_1 - (itemTextSize.width / 2) : startX;
                            itemStartY = (arrangement === 'Horizontal') ? (position_1 === 'After') ? startY :
                                textY_1 - (itemTextSize.height / 2) : startY;
                            if (this.legendCollection.length === 1) {
                                legendWidth = (arrangement === 'Horizontal') ? Math.abs((startX + rectWidth) - itemStartX) :
                                    (rectWidth + maxTextWidth + textPadding_1);
                                legendHeight = (arrangement === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding_1) :
                                    Math.abs((startY + rectHeight) - itemStartY);
                            }
                        }
                        else if (i === this.legendCollection.length - 1) {
                            legendWidth = (arrangement === 'Horizontal') ? Math.abs((startX + rectWidth) - itemStartX) :
                                (rectWidth + maxTextWidth + textPadding_1);
                            legendHeight = (arrangement === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding_1) :
                                Math.abs((startY + rectHeight) - itemStartY);
                        }
                        this.legendRenderingCollections.push({
                            fill: this.legendCollection[i]['fill'], x: startX, y: startY,
                            width: rectWidth, height: rectHeight,
                            text: legendText, textX: textX_1, textY: textY_1,
                            textWidth: itemTextSize.width, textHeight: itemTextSize.height,
                            shapeBorder: this.legendCollection[i]['shapeBorder']
                        });
                    }
                    if (this.legendCollection.length === 1 && !(map.theme === 'Fluent2HighContrast' && legend.position === 'Bottom')) {
                        legendHeight = rectHeight;
                        legendWidth = rectWidth;
                    }
                    this.legendItemRect = { x: itemStartX, y: itemStartY, width: legendWidth, height: legendHeight };
                }
                else {
                    legendWidth = (ej2_base_1.isNullOrUndefined(legendWidth)) ? map.mapAreaRect.width : legendWidth;
                    legendHeight = (ej2_base_1.isNullOrUndefined(legendHeight)) ? map.mapAreaRect.height : legendHeight;
                    var j = 0;
                    this.page = 0;
                    for (var i = 0; i < this.legendCollection.length; i++) {
                        var legendItem = this.legendCollection[i];
                        if (ej2_base_1.isNullOrUndefined(this.totalPages[this.page])) {
                            this.totalPages[this.page] = { Page: (this.page + 1), Collection: [] };
                        }
                        var legendTextSize = helper_1.measureText(legendItem['text'], legend.textStyle);
                        this.textMaxWidth = Math.max(this.textMaxWidth, legendTextSize.width);
                        if (i === 0) {
                            startX = shapeX = (leftPadding + (shapeWidth / 2));
                            startY = shapeY = topPadding + legendtitleSize.height + (shapeHeight > legendTextSize.height ? shapeHeight / 2
                                : (legendTextSize.height / 4));
                        }
                        else {
                            var maxSize = (legendTextSize.height > shapeHeight) ? legendTextSize.height : shapeHeight;
                            if (arrangement === 'Horizontal') {
                                var prvePositionX = (textLocation[j - 1].x + textLocation[j - 1].width) + textPadding + shapeWidth;
                                if ((prvePositionX + shapePadding + legendTextSize.width) > legendWidth) {
                                    var nextPositionY = (textLocation[j - 1].y > (shapeLocation[j - 1].y + (shapeHeight / 2)) ?
                                        textLocation[j - 1].y : (shapeLocation[j - 1].y + (shapeHeight / 2))) + topPadding;
                                    if ((nextPositionY + maxSize) > legendHeight) {
                                        this.getPageChanged();
                                        j = 0;
                                        shapeLocation = [];
                                        textLocation = [];
                                        shapeX = startX;
                                        shapeY = startY;
                                    }
                                    else {
                                        shapeX = (shapeLocation[0].x);
                                        shapeY = (nextPositionY + (maxSize / 2));
                                    }
                                }
                                else {
                                    shapeX = (prvePositionX - (shapeWidth / 2));
                                    shapeY = (shapeLocation[j - 1]).y;
                                }
                            }
                            else {
                                var prevPositionY = textLocation[j - 1].y > shapeLocation[j - 1].y + (shapeHeight / 2) ?
                                    textLocation[j - 1].y : shapeLocation[j - 1].y + (shapeHeight / 2);
                                if ((prevPositionY + topPadding + maxSize) > legendHeight) {
                                    var nextPositionX = (textLocation[j - 1].x + this.textMaxWidth + textPadding);
                                    Eif ((nextPositionX + shapePadding + legendTextSize.width) > legendWidth) {
                                        shapeX = startX;
                                        shapeY = startY;
                                        textLocation = [];
                                        shapeLocation = [];
                                        this.getPageChanged();
                                        j = 0;
                                    }
                                    else {
                                        shapeX = nextPositionX + (shapeWidth / 2);
                                        shapeY = (shapeLocation[0].y);
                                    }
                                }
                                else {
                                    var padding = 10;
                                    shapeX = shapeLocation[j - 1].x;
                                    shapeY = prevPositionY + padding + (shapeHeight / 2);
                                }
                            }
                        }
                        textX = shapeX + (shapeWidth / 2) + shapePadding;
                        textY = shapeY + (legendTextSize.height / 4);
                        shapeLocation.push({ x: shapeX, y: shapeY });
                        textLocation.push({ x: textX, y: textY, width: legendTextSize.width, height: (legendTextSize.height / 2) });
                        this.totalPages[this.page]['Collection'].push({
                            DisplayText: legendItem['text'],
                            ImageSrc: legendItem['imageSrc'],
                            Shape: { x: shapeX, y: shapeY },
                            Text: { x: textX, y: textY },
                            Fill: legendItem['fill'],
                            legendShape: legendItem['shape'],
                            shapeBorder: legendItem['shapeBorder'],
                            idIndex: i,
                            Rect: {
                                x: shapeLocation[j].x - (shapeWidth / 2),
                                y: (shapeLocation[j].y - (shapeHeight / 2)) < (textY - legendTextSize.height) ?
                                    (shapeLocation[j].y - (shapeHeight / 2)) : (textY - legendTextSize.height),
                                width: Math.abs((shapeLocation[j].x - (shapeWidth / 2)) - (textX + legendTextSize.width)),
                                height: ((shapeHeight > legendTextSize.height) ? shapeHeight : legendTextSize.height)
                            }
                        });
                        j++;
                    }
                    var collection = this.totalPages[0]['Collection'];
                    Array.prototype.forEach.call(collection, function (legendObj, index) {
                        var legendRect = new helper_1.Rect(legendObj['Rect']['x'], legendObj['Rect']['y'], legendObj['Rect']['width'], legendObj['Rect']['height']);
                        if (index === 0) {
                            legendItemStartX_1 = legendRect.x;
                            legendItemStartY_1 = legendRect.y;
                        }
                        _this.widthIncrement = Math.max(_this.widthIncrement, Math.abs(legendItemStartX_1 - (legendRect.x + legendRect.width)));
                        _this.heightIncrement = Math.max(_this.heightIncrement, Math.abs(legendItemStartY_1 - (legendRect.y + legendRect.height)));
                    });
                    legendWidth = ((this.widthIncrement < legendWidth) ? this.widthIncrement : legendWidth);
                    legendHeight = ((this.heightIncrement < legendHeight) ? this.heightIncrement : legendHeight);
                    this.legendItemRect = {
                        x: collection[0]['Rect']['x'], y: collection[0]['Rect']['y'],
                        width: legendWidth, height: legendHeight
                    };
                }
            }
        };
        Legend.prototype.getLegends = function (layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath) {
            this.getRangeLegendCollection(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
            this.getEqualLegendCollection(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
            this.getDataLegendCollection(layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath);
        };
        Legend.prototype.getPageChanged = function () {
            this.page++;
            Eif (ej2_base_1.isNullOrUndefined(this.totalPages[this.page])) {
                this.totalPages[this.page] = { Page: (this.page + 1), Collection: [] };
            }
        };
        Legend.prototype.legendTextTrim = function (maxWidth, text, font, legendRectSize) {
            var label = text;
            var size = helper_1.measureText(text, font).width;
            var legendWithoutTextSize = legendRectSize - size;
            Eif (legendRectSize > maxWidth) {
                var textLength = text.length;
                for (var i = textLength - 1; i >= 0; --i) {
                    label = text.substring(0, i) + '...';
                    size = helper_1.measureText(label, font).width;
                    var totalSize = legendWithoutTextSize + size;
                    if (totalSize <= maxWidth || label.length < 4) {
                        Eif (label.length < 4) {
                            label = ' ';
                        }
                        return label;
                    }
                }
            }
            return label;
        };
        Legend.prototype.drawLegend = function () {
            var map = this.maps;
            var legend = map.legendSettings;
            var render = map.renderer;
            var textOptions;
            var textFont = {
                size: legend.textStyle.size,
                color: legend.textStyle.color,
                fontFamily: legend.textStyle.fontFamily,
                fontWeight: legend.textStyle.fontWeight,
                fontStyle: legend.textStyle.fontStyle,
                opacity: legend.textStyle.opacity
            };
            this.legendGroup = render.createGroup({ id: map.element.id + '_Legend_Group' });
            if (legend.mode === 'Interactive') {
                for (var i = 0; i < this.legendRenderingCollections.length; i++) {
                    var itemId = map.element.id + '_Legend_Index_' + i;
                    var textId = map.element.id + '_Legend_Index_' + i + '_Text';
                    var item = this.legendRenderingCollections[i];
                    var bounds = new helper_1.Rect(item['x'], item['y'], item['width'], item['height']);
                    if (i === 0) {
                        this.renderLegendBorder();
                    }
                    var textLocation = new helper_2.Point(item['textX'], item['textY']);
                    textFont.color = (textFont.color !== null) ? textFont.color : this.maps.themeStyle.legendTextColor;
                    var rectOptions = new helper_2.RectOption(itemId, item['fill'], item['shapeBorder'], legend.opacity, bounds);
                    textOptions = new helper_2.TextOption(textId, textLocation.x, textLocation.y, 'middle', item['text'], '', '');
                    textFont.fontFamily = !ej2_base_1.isNullOrUndefined(textFont.fontFamily) ? textFont.fontFamily : this.maps.themeStyle.fontFamily;
                    textFont.size = textFont.size || map.themeStyle.legendFontSize;
                    var textElement = helper_2.renderTextElement(textOptions, textFont, textFont.color, this.legendGroup);
                    textElement.setAttribute('aria-label', item['text']);
                    textElement.setAttribute('role', 'region');
                    var rectElement = render.drawRectangle(rectOptions);
                    this.legendGroup.appendChild(rectElement);
                    if (map.legendSettings.toggleLegendSettings.enable && (legend.type === 'Layers' || legend.type === 'Markers')) {
                        this.maintainLegendToggle(i, rectElement, textElement);
                    }
                    this.legendToggle();
                }
            }
            else {
                this.drawLegendItem(this.currentPage);
            }
        };
        Legend.prototype.drawLegendItem = function (page) {
            var map = this.maps;
            var legend = map.legendSettings;
            var spacing = 10;
            var shapeSize = new helper_2.Size(legend.shapeWidth, legend.shapeHeight);
            var textOptions;
            var render = map.renderer;
            var legendShape = legend.shape;
            if (page >= 0 && page < this.totalPages.length) {
                if (helper_1.querySelector(this.legendGroup.id, this.maps.element.id)) {
                    ej2_base_1.remove(helper_1.querySelector(this.legendGroup.id, this.maps.element.id));
                }
                for (var i = 0; i < this.totalPages[page]['Collection'].length; i++) {
                    var collection = this.totalPages[page]['Collection'][i];
                    var shapeBorder = collection['shapeBorder'];
                    var legendElement = render.createGroup({ id: map.element.id + '_Legend_Index_' + collection['idIndex'] });
                    var legendText = collection['DisplayText'];
                    var pagingArrowPadding = 4;
                    var strokeColor = (legend.shape === 'HorizontalLine' || legend.shape === 'VerticalLine'
                        || legend.shape === 'Cross') ? ej2_base_1.isNullOrUndefined(legend.fill) ? '#000000' : legend.fill : shapeBorder.color;
                    var strokeWidth = (legend.shape === 'HorizontalLine' || legend.shape === 'VerticalLine'
                        || legend.shape === 'Cross') ? (shapeBorder.width === 0) ?
                        1 : shapeBorder.width : shapeBorder.width;
                    var shapeId = map.element.id + '_Legend_Shape_Index_' + collection['idIndex'];
                    var textId = map.element.id + '_Legend_Text_Index_' + collection['idIndex'];
                    var shapeLocation = new helper_2.Point(collection['Shape']['x'], (collection['Shape']['y'] - pagingArrowPadding));
                    var textLocation = new helper_2.Point(collection['Text']['x'], (collection['Text']['y'] - pagingArrowPadding));
                    var renderOptions = new helper_1.PathOption(shapeId, collection['Fill'], strokeWidth, strokeColor, legend.opacity, ej2_base_1.isNullOrUndefined(shapeBorder.opacity) ? legend.opacity : shapeBorder.opacity, '');
                    var legendTextStyle = {
                        fontFamily: legend.textStyle.fontFamily, fontStyle: legend.textStyle.fontStyle,
                        fontWeight: legend.textStyle.fontWeight, size: legend.textStyle.size, color: legend.textStyle.color,
                        opacity: legend.textStyle.opacity
                    };
                    legendTextStyle.color = (legendTextStyle.color !== null) ? legendTextStyle.color :
                        this.maps.themeStyle.legendTextColor;
                    legendTextStyle.fontFamily = !ej2_base_1.isNullOrUndefined(legendTextStyle.fontFamily) ? legendTextStyle.fontFamily :
                        this.maps.themeStyle.fontFamily;
                    legendTextStyle.size = legendTextStyle.size || map.themeStyle.legendFontSize;
                    legendTextStyle.fontWeight = legendTextStyle.fontWeight || map.themeStyle.fontWeight;
                    if (i === 0) {
                        this.renderLegendBorder();
                    }
                    if (legend.type === 'Markers' && legend.useMarkerShape) {
                        var legendShapeData = this.legendCollection[collection['idIndex']].data[0];
                        var marker = map.layers[legendShapeData['layerIndex']].markerSettings[legendShapeData['markerIndex']];
                        legendShape = !ej2_base_1.isNullOrUndefined(marker.dataSource[legendShapeData['dataIndex']][marker['shapeValuePath']]) && marker.dataSource[legendShapeData['dataIndex']][marker['shapeValuePath']] !== '' ? marker.dataSource[legendShapeData['dataIndex']][marker['shapeValuePath']] : marker.shape;
                    }
                    if (legendShape === 'Balloon') {
                        legendElement.appendChild(helper_1.drawBalloon(map, renderOptions, shapeSize, { x: shapeLocation.x, y: (shapeLocation.y + 5) }, 'Legend'));
                    }
                    else {
                        legendElement.appendChild(helper_2.drawSymbol(shapeLocation, legendShape, shapeSize, collection['ImageSrc'], renderOptions));
                    }
                    var legendRectSize = collection['Rect']['x'] + collection['Rect']['width'];
                    if (legendRectSize > this.legendBorderRect.width) {
                        var trimmedText = this.legendTextTrim(this.legendBorderRect.width, legendText, legendTextStyle, legendRectSize);
                        legendText = trimmedText;
                    }
                    textOptions = new helper_2.TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
                    var textElement = helper_2.renderTextElement(textOptions, legendTextStyle, legendTextStyle.color, legendElement);
                    textElement.setAttribute('aria-label', legendText);
                    textElement.setAttribute('role', 'region');
                    this.legendGroup.appendChild(legendElement);
                    if (map.legendSettings.toggleLegendSettings.enable && (legend.type === 'Layers' || legend.type === 'Markers')) {
                        var legendShapeElement = legendElement.childNodes[0];
                        this.maintainLegendToggle(collection['idIndex'], legendShapeElement, textElement);
                    }
                    if (i === (this.totalPages[page]['Collection'].length - 1)) {
                        var pagingGroup = void 0;
                        var width = spacing;
                        var height = (spacing / 2);
                        if (this.page !== 0) {
                            var pagingText = (page + 1) + '/' + this.totalPages.length;
                            var pagingFont = legend.textStyle;
                            var pagingTextSize = helper_1.measureText(pagingText, pagingFont);
                            var leftPageX = (this.legendItemRect.x + this.legendItemRect.width) - pagingTextSize.width -
                                (width * 2) - (spacing * 2) + (pagingArrowPadding / 2);
                            var rightPageX = (this.legendItemRect.x + this.legendItemRect.width);
                            var pageTextX = rightPageX - width - (pagingTextSize.width / 2) - (spacing / 2) - pagingArrowPadding;
                            var locY = (this.legendItemRect.y + this.legendItemRect.height) + (height / 2) + spacing;
                            pagingGroup = render.createGroup({ id: map.element.id + '_Legend_Paging_Group' });
                            var leftPageElement = render.createGroup({ id: map.element.id + '_Legend_Left_Paging_Group' });
                            var rightPageElement = render.createGroup({ id: map.element.id + '_Legend_Right_Paging_Group' });
                            var rightPath = ' M ' + rightPageX + ' ' + locY + ' L ' + (rightPageX - width) + ' ' + (locY - height) +
                                ' L ' + (rightPageX - width) + ' ' + (locY + height) + ' z ';
                            var leftPath = ' M ' + leftPageX + ' ' + locY + ' L ' + (leftPageX + width) + ' ' + (locY - height) +
                                ' L ' + (leftPageX + width) + ' ' + (locY + height) + ' z ';
                            var leftPageOptions = new helper_1.PathOption(map.element.id + '_Left_Page', this.maps.themeStyle.legendTextColor, 0, this.maps.themeStyle.legendTextColor, ((page + 1) === 1 ? 0.5 : 1), 1, '', leftPath);
                            leftPageElement.appendChild(render.drawPath(leftPageOptions));
                            var leftRectPageOptions = new helper_2.RectOption(map.element.id + '_Left_Page_Rect', 'transparent', {}, 1, new helper_1.Rect(leftPageX - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
                            var pathEle = render.drawRectangle(leftRectPageOptions);
                            pathEle.setAttribute('aria-label', 'Navigate to the previous legend items');
                            pathEle.setAttribute('role', 'button');
                            pathEle.tabIndex = (page + 1) === 1 ? -1 : map.tabIndex;
                            if ((page + 1) === 1) {
                                pathEle.style.cursor = 'default';
                                pathEle.style.setProperty('outline', 'none');
                            }
                            else {
                                pathEle.style.cursor = 'pointer';
                                pathEle.style.removeProperty('outline');
                            }
                            leftPageElement.appendChild(pathEle);
                            this.wireEvents(leftPageElement);
                            var rightPageOptions = new helper_1.PathOption(map.element.id + '_Right_Page', this.maps.themeStyle.legendTextColor, 0, this.maps.themeStyle.legendTextColor, ((page + 1) === this.totalPages.length ? 0.5 : 1), 1, '', rightPath);
                            rightPageElement.appendChild(render.drawPath(rightPageOptions));
                            var rightRectPageOptions = new helper_2.RectOption(map.element.id + '_Right_Page_Rect', 'transparent', {}, 1, new helper_1.Rect(rightPageX - spacing - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), null, null, '', '');
                            pathEle = render.drawRectangle(rightRectPageOptions);
                            pathEle.setAttribute('aria-label', 'Navigate to the next legend items');
                            pathEle.setAttribute('role', 'button');
                            pathEle.tabIndex = (page + 1) === this.totalPages.length ? -1 : map.tabIndex;
                            if ((page + 1) === this.totalPages.length) {
                                pathEle.style.cursor = 'default';
                                pathEle.style.setProperty('outline', 'none');
                            }
                            else {
                                pathEle.style.cursor = 'pointer';
                                pathEle.style.removeProperty('outline');
                            }
                            rightPageElement.appendChild(pathEle);
                            this.wireEvents(rightPageElement);
                            pagingGroup.appendChild(leftPageElement);
                            pagingGroup.appendChild(rightPageElement);
                            var pageTextOptions = {
                                'id': map.element.id + '_Paging_Text',
                                'x': pageTextX,
                                'y': locY + (pagingTextSize.height / 4),
                                'fill': this.maps.themeStyle.legendTextColor,
                                'font-size': '14px',
                                'font-style': pagingFont.fontStyle,
                                'font-family': pagingFont.fontFamily,
                                'font-weight': pagingFont.fontWeight,
                                'text-anchor': 'middle',
                                'transform': '',
                                'opacity': 1,
                                'dominant-baseline': ''
                            };
                            var pagingTextElement = render.createText(pageTextOptions, pagingText);
                            pagingTextElement.style.cssText = 'user-select: none;';
                            pagingTextElement.setAttribute('aria-label', pagingText);
                            pagingTextElement.setAttribute('role', 'region');
                            pagingGroup.appendChild(pagingTextElement);
                            this.legendGroup.appendChild(pagingGroup);
                        }
                        this.legendToggle();
                    }
                }
            }
        };
        Legend.prototype.maintainLegendToggle = function (legendIndex, legendShapeElement, legendTextElement) {
            Iif (this.maps.legendSettings.toggleLegendSettings.enable &&
                !ej2_base_1.isNullOrUndefined(this.maps.toggledLegendId) && this.maps.toggledLegendId.indexOf(legendIndex) > -1 &&
                !ej2_base_1.isNullOrUndefined(this.maps.toggledElementId) && this.maps.toggledElementId.length > 0) {
                var currentItem = this.legendCollection[legendIndex]['data'];
                if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                    this.setToggleAttributes(legendTextElement, legendShapeElement, this.maps.legendSettings.toggleLegendSettings.fill, this.maps.legendSettings.toggleLegendSettings.opacity, this.maps.legendSettings.toggleLegendSettings.border.color, this.maps.legendSettings.toggleLegendSettings.border.width, ej2_base_1.isNullOrUndefined(this.maps.legendSettings.toggleLegendSettings.border.opacity) ?
                        this.maps.legendSettings.toggleLegendSettings.opacity :
                        this.maps.legendSettings.toggleLegendSettings.border.opacity, this.maps.legendSettings.toggleLegendSettings.fill);
                }
                else {
                    var layerIndex = currentItem[currentItem.length - 1].layerIndex;
                    this.setToggleAttributes(legendTextElement, legendShapeElement, this.maps.layers[layerIndex].shapeSettings.fill, this.maps.layers[layerIndex].shapeSettings.opacity, this.maps.layers[layerIndex].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, ej2_base_1.isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.width)
                        ? 0 : this.maps.layers[layerIndex].shapeSettings.border.width, ej2_base_1.isNullOrUndefined(this.maps.layers[layerIndex].shapeSettings.border.opacity)
                        ? this.maps.layers[layerIndex].shapeSettings.opacity
                        : this.maps.layers[layerIndex].shapeSettings.border.opacity, this.maps.layers[layerIndex].shapeSettings.fill);
                }
                currentItem['_isVisible'] = false;
            }
        };
        Legend.prototype.legendHighLightAndSelection = function (targetElement, value) {
            var shapeIndex;
            var layerIndex;
            var dataIndex;
            var pointIndex;
            var legend = this.maps.legendSettings;
            var textEle = legend.mode === 'Default' ? document.getElementById(targetElement.id.replace('Shape', 'Text')) :
                document.getElementById(targetElement.id + '_Text');
            var collection = this.maps.legendModule.legendCollection;
            var length;
            var multiSelectEnable = !ej2_base_1.isNullOrUndefined(collection[0]['data'][0]['layerIndex']) ? this.maps.layers[collection[0]['data'][0]['layerIndex']].selectionSettings.enableMultiSelect : false;
            var selectLength = 0;
            var interactProcess = true;
            var idIndex = parseFloat(targetElement.id.charAt(targetElement.id.length - 1));
            this.updateLegendElement();
            var toggleLegendCheck = this.maps.toggledLegendId.indexOf(idIndex);
            if (this.maps.legendSettings.toggleLegendSettings.enable && value === 'highlight' && toggleLegendCheck !== -1) {
                var collectionIndex = this.getIndexofLegend(this.legendHighlightCollection, targetElement);
                Iif (collectionIndex !== -1) {
                    this.legendHighlightCollection.splice(collectionIndex, 1);
                }
                this.removeLegendHighlightCollection();
                return null;
            }
            if (value === 'selection') {
                this.shapeHighlightCollection = [];
                if (!this.maps.shapeSelections && !multiSelectEnable) {
                    this.removeAllSelections();
                    this.maps.shapeSelections = true;
                }
                if (this.maps.legendSelectionCollection.length > 0 && (!multiSelectEnable ? this.maps.shapeSelections : true)) {
                    for (var k = 0; k < this.maps.legendSelectionCollection.length; k++) {
                        if (targetElement === this.maps.legendSelectionCollection[k]['legendElement']) {
                            this.maps.legendSelectionCollection[k]['legendElement'] = targetElement;
                            interactProcess = false;
                            this.removeLegendSelectionCollection(this.maps.legendSelectionCollection[k]['legendElement']);
                            this.maps.selectedLegendElementId.splice(this.maps.selectedLegendElementId.indexOf(idIndex), 1);
                            this.maps.legendSelectionCollection.splice(k, 1);
                            this.maps.legendSelection = this.maps.legendSelectionCollection.length > 0 ? false : true;
                            break;
                        }
                        else if (!multiSelectEnable) {
                            Iif (this.maps.legendSelectionCollection.length > 1) {
                                for (var z = 0; z < this.maps.legendSelectionCollection.length; z++) {
                                    this.removeLegendSelectionCollection(this.maps.legendSelectionCollection[z]['legendElement']);
                                }
                                this.maps.legendSelectionCollection = [];
                            }
                            else {
                                this.removeLegendSelectionCollection(this.maps.legendSelectionCollection[k]['legendElement']);
                                this.maps.legendSelectionCollection.splice(k, 1);
                            }
                        }
                    }
                }
            }
            else {
                if (this.maps.legendSelectionCollection.length > 0) {
                    for (var k = 0; k < this.maps.legendSelectionCollection.length; k++) {
                        if ((targetElement.id.indexOf('_Legend_Shape') > -1 || targetElement.id.indexOf('_Legend_Index')) &&
                            targetElement === this.maps.legendSelectionCollection[k]['legendElement']) {
                            interactProcess = false;
                            break;
                        }
                        else {
                            this.removeLegendHighlightCollection();
                        }
                    }
                }
                this.removeLegendHighlightCollection();
            }
            if (interactProcess) {
                for (var i = 0; i < collection.length; i++) {
                    var idIndex_1 = this.maps.legendSettings.mode === 'Interactive' ?
                        parseFloat(targetElement.id.split('_Legend_Index_')[1]) :
                        parseFloat(targetElement.id.split('_Legend_Shape_Index_')[1]);
                    if (textEle.textContent === collection[i]['text'] && collection[i]['data'].length > 0
                        && idIndex_1 === i) {
                        var layer = this.maps.layers[collection[i]['data'][0]['layerIndex']];
                        var enable = void 0;
                        var module = void 0;
                        var data = void 0;
                        Eif (!ej2_base_1.isNullOrUndefined(layer)) {
                            enable = (value === 'selection') ? layer.selectionSettings.enable : layer.highlightSettings.enable;
                            module = void 0;
                            module = (value === 'selection') ? layer.selectionSettings : layer.highlightSettings;
                            data = collection[i]['data'];
                        }
                        Eif (enable) {
                            for (var j = 0; j < data.length; j++) {
                                var shapeElement = void 0;
                                shapeIndex = data[j]['shapeIndex'];
                                layerIndex = data[j]['layerIndex'];
                                dataIndex = data[j]['dataIndex'];
                                pointIndex = data[j]['pointIndex'];
                                if (pointIndex === -1) {
                                    shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
                                        layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
                                }
                                else {
                                    shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
                                        layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
                                }
                                if (shapeElement !== null) {
                                    var shapeMatch = true;
                                    Eif (this.maps.legendSelectionCollection !== null) {
                                        for (var i_1 = 0; i_1 < this.maps.legendSelectionCollection.length; i_1++) {
                                            if (this.maps.legendSelectionCollection[i_1]['legendElement'] === targetElement) {
                                                shapeMatch = false;
                                                break;
                                            }
                                        }
                                    }
                                    if (value === 'highlight' && shapeMatch) {
                                        if (j === 0) {
                                            this.legendHighlightCollection = [];
                                            this.pushCollection(targetElement, this.legendHighlightCollection, collection[i], layer.shapeSettings);
                                        }
                                        length = this.legendHighlightCollection.length;
                                        var legendHighlightColor = this.legendHighlightCollection[length - 1]['legendOldFill'];
                                        this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                        var shapeItemCount = this.legendHighlightCollection[length - 1]['MapShapeCollection']['Elements'].length - 1;
                                        var shapeOldFillColor = shapeElement.getAttribute('fill');
                                        var shapeOldOpacity = shapeElement.getAttribute('fill-opacity');
                                        this.legendHighlightCollection[length - 1]['shapeOldFillColor'].push(shapeOldFillColor);
                                        this.legendHighlightCollection[length - 1]['shapeOldOpacity'] = shapeOldOpacity;
                                        var shapeOldColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'][shapeItemCount];
                                        var shapeOldFillOpacity = this.legendHighlightCollection[length - 1]['shapeOldOpacity'];
                                        this.shapePreviousColor = this.legendHighlightCollection[length - 1]['shapeOldFillColor'];
                                        this.setColor(shapeElement, !ej2_base_1.isNullOrUndefined(module.fill) ? module.fill : shapeOldColor, ej2_base_1.isNullOrUndefined(module.opacity) ? shapeOldFillOpacity : module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
                                        this.setColor(targetElement, !ej2_base_1.isNullOrUndefined(module.fill) ? module.fill : legendHighlightColor, ej2_base_1.isNullOrUndefined(module.opacity) ? shapeOldFillOpacity : module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
                                    }
                                    else Eif (value === 'selection') {
                                        this.legendHighlightCollection = [];
                                        this.maps.legendSelectionClass = module;
                                        if (j === 0) {
                                            this.pushCollection(targetElement, this.maps.legendSelectionCollection, collection[i], layer.shapeSettings);
                                            if (multiSelectEnable) {
                                                this.maps.selectedLegendElementId.push(i);
                                            }
                                            else {
                                                if (this.maps.selectedLegendElementId.length === 0) {
                                                    this.maps.selectedLegendElementId.push(i);
                                                }
                                                else {
                                                    this.maps.selectedLegendElementId = [];
                                                    this.maps.selectedLegendElementId.push(i);
                                                }
                                            }
                                        }
                                        selectLength = this.maps.legendSelectionCollection.length;
                                        var legendSelectionColor = this.maps.legendSelectionCollection[selectLength - 1]['legendOldFill'];
                                        this.maps.legendSelectionCollection[selectLength - 1]['MapShapeCollection']['Elements'].push(shapeElement);
                                        this.maps.legendSelectionCollection[selectLength - 1]['shapeOldFillColor'] = this.shapePreviousColor;
                                        this.setColor(targetElement, !ej2_base_1.isNullOrUndefined(module.fill) ? module.fill : legendSelectionColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
                                        this.setColor(shapeElement, !ej2_base_1.isNullOrUndefined(module.fill) ? module.fill : legendSelectionColor, module.opacity.toString(), module.border.color, module.border.width.toString(), 'selection');
                                        Eif (this.maps.selectedElementId.indexOf(shapeElement.getAttribute('id')) === -1) {
                                            this.maps.selectedElementId.push(shapeElement.getAttribute('id'));
                                        }
                                        if (j === data.length - 1) {
                                            this.maps.legendSelection = false;
                                            this.removeLegend(this.maps.legendSelectionCollection);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        };
        Legend.prototype.setColor = function (element, fill, opacity, borderColor, borderWidth, type) {
            var isLineStringShape = (element.parentElement.id.indexOf('LineString') > -1);
            if (type === 'selection') {
                helper_1.maintainStyleClass((isLineStringShape ? 'LineselectionMap' : 'ShapeselectionMap'), (isLineStringShape ? 'LineselectionMapStyle' : 'ShapeselectionMapStyle'), (isLineStringShape ? 'transparent' : fill), opacity, (isLineStringShape ? fill : borderColor), borderWidth, this.maps);
                element.setAttribute('class', isLineStringShape ? 'LineselectionMapStyle' : 'ShapeselectionMapStyle');
            }
            else {
                element.setAttribute('fill', isLineStringShape ? 'transparent' : fill);
                element.setAttribute('fill-opacity', opacity);
                element.setAttribute('stroke', isLineStringShape ? fill : borderColor);
                element.setAttribute('stroke-width', (Number(borderWidth) / this.maps.scale).toString());
            }
        };
        Legend.prototype.pushCollection = function (targetElement, collection, oldElement, shapeSettings) {
            collection.push({
                legendElement: targetElement, legendOldFill: oldElement['fill'], legendOldOpacity: oldElement['opacity'],
                legendOldBorderColor: oldElement['borderColor'], legendOldBorderWidth: oldElement['borderWidth'],
                shapeOpacity: shapeSettings.opacity, shapeOldBorderColor: shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor,
                shapeOldBorderWidth: shapeSettings.border.width
            });
            var length = collection.length;
            collection[length - 1]['MapShapeCollection'] = { Elements: [] };
            collection[length - 1]['shapeOldFillColor'] = [];
            collection[length - 1]['shapeOldOpacity'] = null;
        };
        Legend.prototype.removeLegend = function (collection) {
            for (var i = 0; i < collection.length; i++) {
                var item = collection[i];
                this.setColor(item['legendElement'], item['legendOldFill'], item['legendOldOpacity'], item['legendOldBorderColor'], item['legendOldBorderWidth'], 'highlight');
                var dataCount = item['MapShapeCollection']['Elements'].length;
                for (var j = 0; j < dataCount; j++) {
                    var shapeFillColor = item['legendOldFill'].indexOf('url') !== -1
                        ? item['shapeOldFillColor'][j] : item['legendOldFill'];
                    var shapeOpacity = !ej2_base_1.isNullOrUndefined(item['shapeOldOpacity']) ? item['shapeOldOpacity'] : item['shapeOpacity'];
                    this.setColor(item['MapShapeCollection']['Elements'][j], shapeFillColor, shapeOpacity, item['shapeOldBorderColor'], item['shapeOldBorderWidth'], 'highlight');
                }
            }
        };
        Legend.prototype.removeLegendHighlightCollection = function () {
            if (this.legendHighlightCollection.length > 0) {
                this.removeLegend(this.legendHighlightCollection);
                this.legendHighlightCollection = [];
            }
        };
        Legend.prototype.removeLegendSelectionCollection = function (targetElement) {
            if (this.maps.legendSelectionCollection.length > 0) {
                helper_1.removeClass(targetElement);
                var shapeElements = this.shapesOfLegend(targetElement);
                var dataCount = shapeElements.length;
                for (var j = 0; j < dataCount; j++) {
                    var shapeElement = helper_2.getElement(shapeElements[j]);
                    Eif (shapeElement.getAttribute('class') === 'ShapeselectionMapStyle' ||
                        shapeElement.getAttribute('class') === 'LineselectionMapStyle') {
                        helper_1.removeClass(shapeElement);
                        var selectedElementIdIndex = this.maps.selectedElementId.indexOf(shapeElement.id);
                        Eif (selectedElementIdIndex !== -1) {
                            this.maps.selectedElementId.splice(selectedElementIdIndex, 1);
                        }
                    }
                }
            }
        };
        Legend.prototype.removeShapeHighlightCollection = function () {
            if (this.shapeHighlightCollection.length > 0) {
                for (var i = 0; i < this.shapeHighlightCollection.length; i++) {
                    var item = this.shapeHighlightCollection[i];
                    var removeFill = true;
                    for (var j = 0; j < this.maps.legendSelectionCollection.length; j++) {
                        Iif (this.maps.legendSelectionCollection[j]['legendElement'] === item['legendElement']) {
                            removeFill = false;
                        }
                    }
                    Eif (removeFill) {
                        this.setColor(item['legendElement'], item['legendOldFill'], item['legendOldOpacity'], item['legendOldBorderColor'], item['legendOldBorderWidth'], 'highlight');
                    }
                }
            }
        };
        Legend.prototype.shapeHighLightAndSelection = function (targetElement, data, module, getValue, layerIndex) {
            if (data !== undefined) {
                this.updateLegendElement();
                this.shapeToggled = true;
                var collection = this.maps.legendModule.legendCollection;
                var indexes = this.legendIndexOnShape(data, layerIndex);
                var shapeElement = this.shapeDataOnLegend(targetElement);
                var toggleLegendCheck = this.maps.toggledLegendId.indexOf(indexes['actualIndex']);
                if (this.maps.legendSettings.toggleLegendSettings.enable && toggleLegendCheck !== -1) {
                    this.shapeToggled = false;
                    this.legendHighlightCollection = [];
                    var collectionIndex = this.getIndexofLegend(this.shapeHighlightCollection, shapeElement['LegendEle']);
                    Iif (collectionIndex !== -1) {
                        this.shapeHighlightCollection.splice(collectionIndex, 1);
                    }
                    this.removeShapeHighlightCollection();
                    return null;
                }
                Iif (indexes['currentIndex'] === undefined && indexes['actualIndex'] === undefined) {
                    this.removeShapeHighlightCollection();
                    return null;
                }
                if (indexes['currentIndex'] === undefined && getValue === 'selection'
                    && !this.maps.layers[layerIndex].selectionSettings.enableMultiSelect &&
                    targetElement.getAttribute('class') !== 'ShapeselectionMapStyle') {
                    this.maps.legendSelection = false;
                }
                if (getValue === 'selection' && !this.maps.layers[layerIndex].selectionSettings.enableMultiSelect &&
                    !this.maps.legendSelection) {
                    this.removeAllSelections();
                    this.maps.legendSelection = true;
                }
                if (indexes['currentIndex'] === undefined) {
                    if (getValue === 'selection' && indexes['actualIndex'] !== undefined) {
                        var checkSelection = 0;
                        for (var i = 0; i < shapeElement['Elements'].length; i++) {
                            if (shapeElement['Elements'][i].getAttribute('class') === 'ShapeselectionMapStyle') {
                                checkSelection++;
                            }
                        }
                        var selectionIndex = this.maps.selectedLegendElementId.indexOf(indexes['actualIndex']);
                        if (selectionIndex === -1) {
                            this.maps.selectedLegendElementId.push(indexes['actualIndex']);
                            this.maps.legendSelectionClass = module;
                        }
                        else {
                            if ((checkSelection <= 1) && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
                                || targetElement.getAttribute('class') === 'LineselectionMapStyle')) {
                                if (!this.maps.layers[layerIndex].selectionSettings.enableMultiSelect) {
                                    this.maps.selectedLegendElementId.splice(selectionIndex, 1);
                                }
                                else {
                                    Eif (checkSelection <= 1 && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
                                        || targetElement.getAttribute('class') === 'LineselectionMapStyle')) {
                                        this.maps.selectedLegendElementId.splice(selectionIndex, 1);
                                    }
                                }
                            }
                        }
                    }
                    this.removeShapeHighlightCollection();
                    return null;
                }
                var text = collection[indexes['actualIndex']]['text'];
                var content = void 0;
                var legendShape = void 0;
                if (this.maps.legendSettings.mode === 'Default') {
                    Eif (indexes['currentIndex'] !== undefined) {
                        content = document.getElementById(this.maps.element.id + '_Legend_Text_Index_' + indexes['actualIndex']).textContent;
                        legendShape = document.getElementById(this.maps.element.id + '_Legend_Shape_Index_' + indexes['actualIndex']);
                    }
                }
                else {
                    content = document.getElementById(this.maps.element.id + '_Legend_Index_' + indexes['actualIndex']
                        + '_Text').textContent;
                    legendShape = document.getElementById(this.maps.element.id + '_Legend_Index_' + indexes['actualIndex']);
                }
                this.oldShapeElement = shapeElement['LegendEle'];
                var length_1 = this.maps.legendSelectionCollection.length;
                Eif (text === content) {
                    var shapeMatched = true;
                    Eif (this.maps.legendSelectionCollection) {
                        for (var i = 0; i < this.maps.legendSelectionCollection.length; i++) {
                            if (this.maps.legendSelectionCollection[i]['legendElement'] === shapeElement['LegendEle']) {
                                shapeMatched = false;
                                break;
                            }
                        }
                    }
                    if (getValue === 'highlight' && shapeMatched) {
                        var selectionEle = this.isTargetSelected(shapeElement, this.shapeHighlightCollection);
                        Eif (selectionEle === undefined || (selectionEle && !selectionEle['IsSelected'])) {
                            this.pushCollection(legendShape, this.shapeHighlightCollection, collection[indexes['actualIndex']], this.maps.layers[layerIndex].shapeSettings);
                        }
                        for (var j = 0; j < this.shapeHighlightCollection.length; j++) {
                            Eif (shapeElement['LegendEle'].id === this.shapeHighlightCollection[j]['legendElement'].id) {
                                this.shapeHighlightCollection[j]['legendElement'] = shapeElement['LegendEle'];
                            }
                        }
                        if (length_1 > 0) {
                            for (var j = 0; j < length_1; j++) {
                                Iif (shapeElement['LegendEle'] === this.maps.legendSelectionCollection[j]['legendElement']) {
                                    this.maps.legendSelectionCollection[j]['legendElement'] = shapeElement['LegendEle'];
                                    this.removeShapeHighlightCollection();
                                    break;
                                }
                                else Eif (j === length_1 - 1) {
                                    this.removeShapeHighlightCollection();
                                    this.setColor(legendShape, !ej2_base_1.isNullOrUndefined(module.fill) ? module.fill : legendShape.getAttribute('fill'), module.opacity.toString(), module.border.color, module.border.width.toString(), 'highlight');
                                }
                            }
                        }
                        else {
                            this.removeShapeHighlightCollection();
                            this.setColor(legendShape, !ej2_base_1.isNullOrUndefined(module.fill) ? module.fill : legendShape.getAttribute('fill'), !ej2_base_1.isNullOrUndefined(module.opacity) ? module.opacity.toString() : '1', module.border.color, module.border.width.toString(), 'highlight');
                        }
                    }
                    else if (getValue === 'selection') {
                        var selectionEle = this.isTargetSelected(shapeElement, this.maps.legendSelectionCollection);
                        if (length_1 > 0) {
                            var j = 0;
                            while (j < this.maps.legendSelectionCollection.length) {
                                if (shapeElement['LegendEle'] !== this.maps.legendSelectionCollection[j]['legendElement'] &&
                                    !module.enableMultiSelect) {
                                    var element = this.maps.legendSelectionCollection[j];
                                    var selectedLegendIndex = this.maps.selectedLegendElementId.indexOf(indexes['actualIndex']);
                                    this.maps.selectedLegendElementId.splice(selectedLegendIndex, 1);
                                    this.maps.legendSelectionCollection.splice(j, 1);
                                    helper_1.removeClass(element['legendElement']);
                                    this.maps.shapeSelections = true;
                                    j = 0;
                                }
                                else {
                                    j++;
                                }
                            }
                        }
                        if (selectionEle && (selectionEle['IsSelected'] && (targetElement.getAttribute('class') === 'ShapeselectionMapStyle'
                            || targetElement.getAttribute('class') === 'LineselectionMapStyle'))) {
                            var multiSelection = 0;
                            if (module.enableMultiSelect) {
                                for (var i = 0; i < shapeElement['Elements'].length; i++) {
                                    if (targetElement.getAttribute('class') === shapeElement['Elements'][i].getAttribute('class')) {
                                        multiSelection++;
                                    }
                                }
                            }
                            if (multiSelection <= 1 && (!module.enableMultiSelect ?
                                this.maps.legendSelection : true)) {
                                this.maps.selectedLegendElementId.splice(this.maps.selectedLegendElementId.indexOf(indexes['actualIndex']), 1);
                                Eif (!ej2_base_1.isNullOrUndefined(shapeElement['LegendEle'])) {
                                    helper_1.removeClass(shapeElement['LegendEle']);
                                }
                                this.maps.legendSelectionCollection.splice(selectionEle['SelectionIndex'], 1);
                                this.maps.shapeSelections = true;
                            }
                        }
                        else {
                            if ((selectionEle === undefined || (selectionEle && !selectionEle['IsSelected'])) &&
                                !ej2_base_1.isNullOrUndefined(legendShape)) {
                                var legendSelectionIndex = this.getIndexofLegend(this.maps.legendSelectionCollection, legendShape);
                                Eif (legendSelectionIndex === -1) {
                                    this.pushCollection(legendShape, this.maps.legendSelectionCollection, collection[indexes['actualIndex']], this.maps.layers[layerIndex].shapeSettings);
                                }
                            }
                            var addId = true;
                            for (var i = 0; i < this.maps.selectedLegendElementId.length; i++) {
                                if (indexes['actualIndex'] === this.maps.selectedLegendElementId[i]) {
                                    addId = false;
                                }
                            }
                            if (addId) {
                                this.maps.selectedLegendElementId.push(indexes['actualIndex']);
                            }
                            this.maps.legendSelectionClass = module;
                            this.removeLegend(this.shapeHighlightCollection);
                            Eif (!ej2_base_1.isNullOrUndefined(legendShape)) {
                                this.setColor(legendShape, !ej2_base_1.isNullOrUndefined(module.fill) ? module.fill : legendShape.getAttribute('fill'), !ej2_base_1.isNullOrUndefined(module.opacity) ? module.opacity.toString() : '1', module.border.color, module.border.width.toString(), 'selection');
                                var legendSelectionIndex = this.getIndexofLegend(this.maps.legendSelectionCollection, legendShape);
                                this.maps.legendSelectionCollection[legendSelectionIndex]['MapShapeCollection']['Elements'].push(targetElement);
                            }
                            this.maps.shapeSelections = false;
                        }
                    }
                    else Iif (document.getElementsByClassName('highlightMapStyle').length > 0) {
                        this.removeShapeHighlightCollection();
                        helper_1.removeClass(document.getElementsByClassName('highlightMapStyle')[0]);
                    }
                }
            }
            else {
                this.removeShapeHighlightCollection();
            }
        };
        Legend.prototype.isTargetSelected = function (target, collection) {
            var selectEle;
            for (var i = 0; i < collection.length; i++) {
                if (!ej2_base_1.isNullOrUndefined(target['LegendEle'].getAttribute('id')) &&
                    (target['LegendEle'].getAttribute('id') === collection[i]['legendElement'].getAttribute('id'))) {
                    selectEle = { IsSelected: true, SelectionIndex: i };
                }
            }
            return selectEle;
        };
        Legend.prototype.updateLegendElement = function () {
            for (var i = 0; i < this.maps.legendSelectionCollection.length; i++) {
                Eif (document.getElementById(this.maps.legendSelectionCollection[i]['legendElement'].id)) {
                    this.maps.legendSelectionCollection[i]['legendElement'] =
                        document.getElementById(this.maps.legendSelectionCollection[i]['legendElement'].id);
                }
            }
        };
        Legend.prototype.getIndexofLegend = function (targetCollection, targetElement) {
            var legendIndex = targetCollection.map(function (e) { return e['legendElement']; }).indexOf(targetElement);
            return legendIndex;
        };
        Legend.prototype.removeAllSelections = function () {
            for (var i = 0; i < this.maps.selectedElementId.length; i++) {
                var selectedElement = document.getElementById(this.maps.selectedElementId[i]);
                helper_1.removeClass(selectedElement);
            }
            for (var j = 0; j < this.maps.selectedLegendElementId.length; j++) {
                var idIndex = this.maps.legendSettings.mode === 'Interactive' ?
                    this.maps.element.id + '_Legend_Index_' : this.maps.element.id + '_Legend_Shape_Index_';
                var selectedElement = idIndex + this.maps.selectedLegendElementId[j];
                var legendElement = document.getElementById(selectedElement);
                Eif (!ej2_base_1.isNullOrUndefined(legendElement)) {
                    helper_1.removeClass(document.getElementById(selectedElement));
                }
            }
            this.maps.legendSelectionCollection = [];
            this.maps.selectedLegendElementId = [];
            this.maps.selectedElementId = [];
        };
        Legend.prototype.legendIndexOnShape = function (data, index) {
            var legendIndex;
            var actualIndex;
            var path = this.maps.layers[index].shapeDataPath;
            var value = data[path];
            var legendType = this.maps.legendSettings.mode;
            var collection = this.maps.legendModule.legendCollection;
            var currentCollection;
            if (legendType === 'Default' && !ej2_base_1.isNullOrUndefined(this.maps.legendModule.totalPages) && (this.maps.legendModule.totalPages.length > 0)) {
                currentCollection = this.maps.legendModule.totalPages[this.maps.legendModule.currentPage]['Collection'];
            }
            var currentCollectionLength = (legendType === 'Default' && !ej2_base_1.isNullOrUndefined(currentCollection)) ? currentCollection['length'] : 1;
            for (var i = 0; i < collection.length; i++) {
                var dataValue = collection[i]['data'];
                for (var k = 0; k < currentCollectionLength; k++) {
                    if (legendType !== 'Default' || collection[i]['text'] === currentCollection[k]['DisplayText']) {
                        for (var j = 0; j < dataValue.length; j++) {
                            if (value === dataValue[j]['name']) {
                                legendIndex = k;
                            }
                        }
                    }
                }
                for (var j = 0; j < dataValue.length; j++) {
                    if (value === dataValue[j]['name']) {
                        actualIndex = i;
                    }
                }
            }
            return { currentIndex: legendIndex, actualIndex: actualIndex };
        };
        Legend.prototype.shapeDataOnLegend = function (targetElement) {
            var shapeIndex;
            var layerIndex;
            var dataIndex;
            var pointIndex;
            var collection = this.maps.legendModule.legendCollection;
            var legend = this.maps.legendSettings;
            for (var i = 0; i < collection.length; i++) {
                var data = collection[i]['data'];
                var process = false;
                var elements = [];
                var currentElement = { Elements: [] };
                for (var j = 0; j < data.length; j++) {
                    var shapeElement = void 0;
                    shapeIndex = data[j]['shapeIndex'];
                    layerIndex = data[j]['layerIndex'];
                    dataIndex = data[j]['dataIndex'];
                    pointIndex = data[j]['pointIndex'];
                    Eif (pointIndex === -1) {
                        shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
                            layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
                    }
                    else {
                        shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
                            layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
                    }
                    if (targetElement === shapeElement) {
                        process = true;
                    }
                    elements.push(shapeElement);
                }
                if (process) {
                    Eif (ej2_base_1.isNullOrUndefined(currentElement['LegendEle'])) {
                        currentElement['LegendEle'] = legend.mode === 'Default' ?
                            document.getElementById(this.maps.element.id + '_Legend_Shape_Index_' + i) :
                            document.getElementById(this.maps.element.id + '_Legend_Index_' + i);
                    }
                    currentElement['Elements'] = elements;
                    return currentElement;
                }
            }
            return null;
        };
        Legend.prototype.shapesOfLegend = function (targetElement) {
            var shapeIndex;
            var layerIndex;
            var dataIndex;
            var pointIndex;
            var idIndex = parseFloat(targetElement.id.charAt(targetElement.id.length - 1));
            var data = this.maps.legendModule.legendCollection[idIndex]['data'];
            var legendShapeElements = [];
            for (var i = 0; i < data.length; i++) {
                var shapeElement = void 0;
                shapeIndex = data[i]['shapeIndex'];
                layerIndex = data[i]['layerIndex'];
                dataIndex = data[i]['dataIndex'];
                pointIndex = data[i]['pointIndex'];
                if (pointIndex === -1) {
                    shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
                        layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex);
                }
                else {
                    shapeElement = document.getElementById(this.maps.element.id + '_LayerIndex_' +
                        layerIndex + '_shapeIndex_' + shapeIndex + '_dataIndex_' + dataIndex + '_multiLine_' + pointIndex);
                }
                if (!ej2_base_1.isNullOrUndefined(shapeElement)) {
                    legendShapeElements.push(shapeElement.id);
                }
            }
            return legendShapeElements;
        };
        Legend.prototype.legendToggle = function () {
            var map = this.maps;
            var legend = map.legendSettings;
            if (this.maps.selectedLegendElementId) {
                for (var j = 0; j < this.maps.selectedLegendElementId.length; j++) {
                    var idIndex = legend.mode === 'Interactive' ? this.maps.element.id + '_Legend_Index_' : this.maps.element.id + '_Legend_Shape_Index_';
                    var selectedElement = map.svgObject.querySelector('#' + idIndex + this.maps.selectedLegendElementId[j]);
                    if (!ej2_base_1.isNullOrUndefined(selectedElement)) {
                        var fill = !ej2_base_1.isNullOrUndefined(this.maps.legendSelectionClass.fill) ?
                            this.maps.legendSelectionClass.fill : selectedElement.getAttribute('fill');
                        this.setColor(selectedElement, fill, this.maps.legendSelectionClass.opacity.toString(), this.maps.legendSelectionClass.border.color, this.maps.legendSelectionClass.border.width.toString(), 'selection');
                        for (var i = 0; i < this.maps.legendSelectionCollection.length; i++) {
                            Eif (this.maps.legendSelectionCollection[i]['legendElement'].id === selectedElement.id) {
                                this.maps.legendSelectionCollection[i]['legendElement'] = selectedElement;
                            }
                        }
                        var legendSelectionIndex = this.getIndexofLegend(this.maps.legendSelectionCollection, selectedElement);
                        Iif (legendSelectionIndex === -1) {
                            var layerIndex = this.maps.legendModule.legendCollection[this.maps.selectedLegendElementId[j]]['data'][j]['layerIndex'];
                            this.pushCollection(selectedElement, this.maps.legendSelectionCollection, this.maps.legendModule.legendCollection[this.maps.selectedLegendElementId[j]], this.maps.layers[layerIndex].shapeSettings);
                        }
                    }
                }
            }
            if (this.maps.toggledLegendId) {
                for (var j = 0; j < this.maps.toggledLegendId.length; j++) {
                    var legendTextId = legend.mode === 'Interactive' ? ('#' + this.maps.element.id + '_Legend_Index_' + this.maps.toggledLegendId[j] + '_Text') : ('#' + this.maps.element.id + '_Legend_Text_Index_' + this.maps.toggledLegendId[j]);
                    var textElement = map.svgObject.querySelector(legendTextId);
                    if (!ej2_base_1.isNullOrUndefined(textElement)) {
                        textElement.setAttribute('fill', '#E5E5E5');
                    }
                    var legendShapeId = legend.mode === 'Interactive' ? ('#' + this.maps.element.id + '_Legend_Index_' + this.maps.toggledLegendId[j]) : ('#' + this.maps.element.id + '_Legend_Shape_Index_' + this.maps.toggledLegendId[j]);
                    var legendElement = map.svgObject.querySelector(legendShapeId);
                    if (!ej2_base_1.isNullOrUndefined(legendElement)) {
                        legendElement.setAttribute('fill', '#E5E5E5');
                    }
                }
            }
        };
        Legend.prototype.renderLegendBorder = function () {
            var map = this.maps;
            var legend = map.legendSettings;
            var legendTitle = legend.title.text;
            var textStyle = {
                fontFamily: legend.titleStyle.fontFamily, fontStyle: legend.titleStyle.fontStyle,
                fontWeight: legend.titleStyle.fontWeight, size: legend.titleStyle.size, color: legend.titleStyle.color,
                opacity: legend.titleStyle.opacity
            };
            var textOptions;
            var spacing = 10;
            var trimTitle = helper_1.textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
            var textSize = helper_1.measureText(trimTitle, textStyle);
            var sameTextWidth = false;
            for (var i = 0; i < this.legendRenderingCollections.length; i++) {
                if (this.legendRenderingCollections[i].textWidth !== this.legendRenderingCollections[0].textWidth) {
                    sameTextWidth = false;
                    break;
                }
                else {
                    sameTextWidth = true;
                }
            }
            this.legendBorderRect = new helper_1.Rect((map.theme === 'Fluent2HighContrast' && !sameTextWidth && (legend.position === 'Left' || legend.position === 'Right') && legend.mode === 'Interactive')
                ? (this.legendItemRect.x - (spacing * 3)) : (this.legendItemRect.x - spacing), (this.legendItemRect.y - spacing - textSize.height), (this.legendItemRect.width) + (spacing * 2), (this.legendItemRect.height) + (spacing * 2) + textSize.height +
                (legend.mode === 'Interactive' ? 0 : (this.page !== 0) ? spacing : 0));
            var legendBorder = {
                color: legend.border.color || this.maps.themeStyle.legendBorderColor, opacity: legend.border.opacity,
                width: legend.border.width || this.maps.themeStyle.legendBorderWidth
            };
            legendBorder.opacity = ej2_base_1.isNullOrUndefined(legendBorder.opacity) ? 1 : legendBorder.opacity;
            var renderOptions = new helper_2.RectOption(map.element.id + '_Legend_Border', legend.background, legendBorder, 1, this.legendBorderRect, null, null, '', '');
            this.legendGroup.appendChild(map.renderer.drawRectangle(renderOptions));
            this.getLegendAlignment(map, this.legendBorderRect.width, this.legendBorderRect.height, legend);
            this.legendGroup.setAttribute('transform', 'translate( ' + (this.translate.x + (-this.legendBorderRect.x)) + ' ' +
                (this.translate.y + (-(this.legendBorderRect.y))) + ' )');
            if (legend.position !== 'Float') {
                map.svgObject.appendChild(this.legendGroup);
            }
            if (legendTitle) {
                textStyle.color = (textStyle.color !== null) ? textStyle.color : this.maps.themeStyle.legendTitleFontColor;
                textStyle.fontFamily = !ej2_base_1.isNullOrUndefined(textStyle.fontFamily) ? textStyle.fontFamily
                    : this.maps.themeStyle.fontFamily;
                textStyle.size = !ej2_base_1.isNullOrUndefined(textStyle.size) ? textStyle.size
                    : this.maps.themeStyle.subTitleFontSize || theme_1.Theme.legendTitleFont.size;
                textStyle.fontWeight = !ej2_base_1.isNullOrUndefined(textStyle.fontWeight) ? textStyle.fontWeight
                    : this.maps.themeStyle.titleFontWeight || theme_1.Theme.legendTitleFont.fontWeight;
                textOptions = new helper_2.TextOption(map.element.id + '_LegendTitle', (this.legendItemRect.x) + (this.legendItemRect.width / 2), this.legendItemRect.y - (textSize.height / 2) - spacing / 2, 'middle', trimTitle, '');
                var element = helper_2.renderTextElement(textOptions, textStyle, textStyle.color, this.legendGroup);
                element.setAttribute('aria-label', legendTitle);
                element.setAttribute('role', 'region');
            }
        };
        Legend.prototype.changeNextPage = function (e) {
            this.currentPage = (e.target.id.indexOf('_Left_Page_') > -1) ? (this.currentPage - 1) :
                (this.currentPage + 1);
            this.legendGroup = this.maps.renderer.createGroup({ id: this.maps.element.id + '_Legend_Group' });
            this.maps.mapAreaRect = this.initialMapAreaRect;
            this.drawLegendItem(this.currentPage);
            Iif (!ej2_base_1.isNullOrUndefined(this.maps.legendModule) && this.maps.legendSettings.position === 'Float') {
                if (this.maps.isTileMap) {
                    this.maps.mapLayerPanel.layerGroup.appendChild(this.maps.legendModule.legendGroup);
                }
                else {
                    this.maps.svgObject.appendChild(this.maps.legendModule.legendGroup);
                }
            }
            Eif (helper_1.querySelector(this.maps.element.id + '_Legend_Border', this.maps.element.id)) {
                helper_1.querySelector(this.maps.element.id + '_Legend_Border', this.maps.element.id).style.pointerEvents = 'none';
            }
        };
        Legend.prototype.getLegendAlignment = function (map, width, height, legend) {
            var x;
            var y;
            var spacing = 10;
            var totalRect;
            totalRect = ej2_base_1.extend({}, map.mapAreaRect, totalRect, true);
            var areaX = totalRect.x;
            var areaY = totalRect.y;
            var areaHeight = totalRect.height;
            var areaWidth = totalRect.width;
            var totalWidth = map.availableSize.width;
            var totalHeight = map.availableSize.height;
            var locationX = !ej2_base_1.isNullOrUndefined(legend.location.x) ? legend.location.x : 0;
            var locationY = !ej2_base_1.isNullOrUndefined(legend.location.y) ? legend.location.y : 0;
            if (legend.position === 'Float') {
                this.translate = map.isTileMap ? new helper_2.Point(locationX, locationY + (spacing / 4)) :
                    new helper_2.Point(locationX + map.mapAreaRect.x, locationY + map.mapAreaRect.y);
                this.legendTotalRect = map.mapAreaRect;
            }
            else {
                switch (legend.position) {
                    case 'Top':
                    case 'Bottom':
                        totalRect.height = (legend.position === 'Top') ? (areaHeight - height) : (areaHeight - height - (spacing * 2));
                        x = (totalWidth / 2) - (width / 2);
                        y = (legend.position === 'Top') ? areaY : (areaY + totalRect.height);
                        totalRect.y = (legend.position === 'Top') ? areaY + height + (map.isTileMap ? (spacing / 2) : spacing) : areaY - (spacing / 2);
                        break;
                    case 'Left':
                    case 'Right':
                        totalRect.width = (areaWidth - width - map.mapAreaRect.x);
                        x = (legend.position === 'Left') ? areaX + (spacing / 2) : (areaX + totalRect.width + spacing);
                        y = (totalHeight / 2) - (height / 2);
                        totalRect.x = (legend.position === 'Left') ? areaX + width + spacing : areaX;
                        break;
                }
                switch (legend.alignment) {
                    case 'Near':
                        if (legend.position === 'Top' || legend.position === 'Bottom') {
                            x = totalRect.x - (legend.mode === 'Interactive' ? spacing : 0);
                        }
                        else {
                            y = totalRect.y - (!(legend.height && legend.width) && legend.mode === 'Interactive' ? map.mapAreaRect.x : 0);
                        }
                        break;
                    case 'Far':
                        if (legend.position === 'Top' || legend.position === 'Bottom') {
                            x = (totalWidth - width) - (legend.mode === 'Interactive' ? 0 : spacing);
                        }
                        else {
                            y = totalHeight - height - (legend.mode === 'Default' ? spacing : 0);
                        }
                        break;
                }
                if ((legend.height || legend.width) && legend.mode !== 'Interactive') {
                    this.legendTotalRect = map.mapAreaRect = map.totalRect = totalRect;
                }
                else {
                    map.totalRect = null;
                    if ((legend.height || legend.width) && legend.mode === 'Interactive') {
                        map.totalRect = totalRect;
                    }
                    this.legendTotalRect = map.mapAreaRect = totalRect;
                }
                if (legend.position === 'Left') {
                    map.mapAreaRect.width = totalRect.width;
                }
                this.translate = new helper_2.Point(x, y);
            }
        };
        Legend.prototype.getMarkersLegendCollections = function (layerIndex, markers) {
            var _this = this;
            Array.prototype.forEach.call(markers, function (marker, markerIndex) {
                var dataSource = marker.dataSource;
                var field = marker.legendText;
                var templateFn;
                Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
                    var imageSrc = null;
                    var showLegend = ej2_base_1.isNullOrUndefined(data[_this.maps.legendSettings.showLegendPath]) ? true :
                        data[_this.maps.legendSettings.showLegendPath];
                    if (marker.visible && showLegend && (!ej2_base_1.isNullOrUndefined(data['latitude'])) && (!ej2_base_1.isNullOrUndefined(data['longitude']))) {
                        if (marker.template) {
                            templateFn = helper_1.getTemplateFunction(marker.template, _this.maps);
                            var templateElement = templateFn(_this.maps);
                            var markerEle = ej2_base_1.isNullOrUndefined(templateElement.childElementCount) ? templateElement[0] :
                                templateElement;
                            imageSrc = markerEle.querySelector('img').src;
                        }
                        var text = ej2_base_1.isNullOrUndefined(data[field]) ? '' : data[field];
                        var legendFill = !ej2_base_1.isNullOrUndefined(marker.colorValuePath) ? data[marker.colorValuePath] : marker.fill;
                        var newData = [];
                        if (_this.maps.legendSettings.removeDuplicateLegend) {
                            newData.push(_this.getMarkerLegendData(layerIndex, text, legendFill));
                            _this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
                        }
                        else {
                            newData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill,
                                name: text,
                                shape: (!ej2_base_1.isNullOrUndefined(marker.shapeValuePath) && !ej2_base_1.isNullOrUndefined(data[marker.shapeValuePath]) && data[marker.shapeValuePath] !== '') ? data[marker.shapeValuePath] : (_this.maps.legendSettings.useMarkerShape ? marker.shape : _this.maps.legendSettings.shape) });
                            _this.getOverallLegendItemsCollection(text, legendFill, newData, showLegend);
                        }
                    }
                });
            });
        };
        Legend.prototype.getMarkerLegendData = function (layerIndex, text, legendFill) {
            var _this = this;
            var legendData = [];
            this.maps.layers[layerIndex].markerSettings.map(function (markerSettings, markerIndex) {
                var markerData = markerSettings.dataSource;
                Array.prototype.forEach.call(markerData, function (data, dataIndex) {
                    var marker = _this.maps.layers[layerIndex].markerSettings[markerIndex];
                    if ((text === data[marker.legendText] || text === '') && legendFill === (data[marker.colorValuePath] || marker.fill)) {
                        legendData.push({ layerIndex: layerIndex, markerIndex: markerIndex, dataIndex: dataIndex, value: legendFill, name: text,
                            shape: !ej2_base_1.isNullOrUndefined(marker.shapeValuePath) ? data[marker.shapeValuePath] : marker.shape });
                    }
                });
            });
            return legendData;
        };
        Legend.prototype.getRangeLegendCollection = function (layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath) {
            var _this = this;
            var legendText;
            var legendIndex = 0;
            var fill = this.maps.legendSettings.fill;
            var rangeData = [];
            var _loop_1 = function (colorMap) {
                if (!ej2_base_1.isNullOrUndefined(colorMap.from) && !ej2_base_1.isNullOrUndefined(colorMap.to)) {
                    legendText = !ej2_base_1.isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.from + ' - ' + colorMap.to;
                    rangeData = [];
                    var colorMapProcess_1 = false;
                    if (!ej2_base_1.isNullOrUndefined(dataSource) && dataSource.length > 0) {
                        Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
                            var colorValue = (colorValuePath.indexOf('.') > -1) ? Number(helper_1.getValueFromObject(data, colorValuePath)) :
                                parseFloat(data[colorValuePath]);
                            if (colorValue >= colorMap.from && colorValue <= colorMap.to) {
                                colorMapProcess_1 = true;
                                rangeData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, colorValue));
                            }
                        });
                    }
                    if (!colorMapProcess_1) {
                        rangeData.push({
                            layerIndex: layerIndex, shapeIndex: null, dataIndex: null,
                            name: null, value: null
                        });
                    }
                    var legendFill = (ej2_base_1.isNullOrUndefined(fill)) ? Object.prototype.toString.call(colorMap.color) === '[object Array]' ?
                        !ej2_base_1.isNullOrUndefined(colorMap.value) ? colorMap.color[0] : this_1.legendGradientColor(colorMap, legendIndex) :
                        colorMap.color : fill;
                    legendIndex++;
                    this_1.getOverallLegendItemsCollection(legendText, legendFill, rangeData, colorMap.showLegend);
                }
            };
            var this_1 = this;
            for (var _i = 0, colorMapping_1 = colorMapping; _i < colorMapping_1.length; _i++) {
                var colorMap = colorMapping_1[_i];
                _loop_1(colorMap);
            }
        };
        Legend.prototype.getOverallLegendItemsCollection = function (legendText, legendFill, legendData, showLegend) {
            var newColllection = [];
            var legend = this.maps.legendSettings;
            if (legendData.length > 0 && showLegend) {
                for (var i = 0; i < legendData.length; i++) {
                    var collection = legendData[i];
                    if (collection.length > 0) {
                        for (var j = 0; j < collection.length; j++) {
                            newColllection.push(collection[j]);
                        }
                    }
                    else {
                        newColllection.push(legendData[i]);
                    }
                    newColllection['_isVisible'] = true;
                }
                var isDuplicate = this.maps.legendSettings.removeDuplicateLegend ?
                    this.removeDuplicates(this.legendCollection, legendText, legendFill) : false;
                if (!isDuplicate) {
                    this.legendCollection.push({
                        text: legendText, fill: legendFill, data: newColllection, opacity: legend.opacity,
                        borderColor: legend.shapeBorder.color, borderWidth: legend.shapeBorder.width
                    });
                }
                else {
                    for (var i = 0; i < this.legendCollection.length; i++) {
                        Eif (this.legendCollection[i]['text'] === legendText && this.legendCollection[i]['fill'] === legendFill) {
                            this.legendCollection[i].data.push(newColllection[0]);
                        }
                    }
                }
            }
        };
        Legend.prototype.removeDuplicates = function (legendCollection, text, legendFill) {
            var isDuplicate = false;
            for (var i = 0; i < legendCollection.length; i++) {
                if ((legendCollection[i]['text'] === text || legendCollection[i]['text'] === '') && legendCollection[i]['fill'] === legendFill) {
                    isDuplicate = true;
                    break;
                }
                else {
                    continue;
                }
            }
            return isDuplicate;
        };
        Legend.prototype.getEqualLegendCollection = function (layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath) {
            var _this = this;
            var fill = this.maps.legendSettings.fill;
            var equalValues = [];
            var legendText;
            var equalData = [];
            var outOfRangeValues = [];
            var outOfRange = [];
            var _loop_2 = function (colorMap) {
                if (!ej2_base_1.isNullOrUndefined(colorMap.value)) {
                    legendText = !ej2_base_1.isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.value;
                    equalData = [];
                    var eqaulColorProcess_1 = false;
                    if (!ej2_base_1.isNullOrUndefined(dataSource) && dataSource.length > 0) {
                        Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
                            var equalValue = ((colorValuePath && colorValuePath.indexOf('.') > -1) ? (helper_1.getValueFromObject(data, colorValuePath)) :
                                (data[colorValuePath]));
                            if (equalValue === colorMap.value) {
                                eqaulColorProcess_1 = true;
                                if (equalValues.indexOf(equalValue) === -1) {
                                    equalValues.push(equalValue);
                                }
                                equalData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, equalValue));
                            }
                            else {
                                if (outOfRangeValues.indexOf(equalValue) === -1) {
                                    outOfRangeValues.push(equalValue);
                                }
                            }
                        });
                    }
                    for (var x = 0; x < equalValues.length; x++) {
                        for (var y = 0; y < outOfRangeValues.length; y++) {
                            if (equalValues[x] === outOfRangeValues[y]) {
                                var equalIndex = outOfRangeValues.indexOf(equalValues[x]);
                                outOfRangeValues.splice(equalIndex, 1);
                            }
                        }
                    }
                    if (!eqaulColorProcess_1) {
                        equalData.push({
                            layerIndex: layerIndex, shapeIndex: null, dataIndex: null,
                            name: null, value: null
                        });
                    }
                    var legendFill = (ej2_base_1.isNullOrUndefined(fill)) ? Object.prototype.toString.call(colorMap.color) === '[object Array]'
                        ? colorMap.color[0] : colorMap.color : fill;
                    this_2.getOverallLegendItemsCollection(legendText, legendFill, equalData, colorMap.showLegend);
                }
                else if (ej2_base_1.isNullOrUndefined(colorMap.minOpacity) && ej2_base_1.isNullOrUndefined(colorMap.maxOpacity) && ej2_base_1.isNullOrUndefined(colorMap.value)
                    && ej2_base_1.isNullOrUndefined(colorMap.from) && ej2_base_1.isNullOrUndefined(colorMap.to) && !ej2_base_1.isNullOrUndefined(colorMap.color)) {
                    Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
                        var equalValue = ((colorValuePath.indexOf('.') > -1) ? (helper_1.getValueFromObject(data, colorValuePath)) :
                            (data[colorValuePath]));
                        for (var k = 0; k < outOfRangeValues.length; k++) {
                            if (equalValue === outOfRangeValues[k]) {
                                outOfRange.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, equalValue));
                            }
                        }
                    });
                    if (outOfRangeValues.length === 0) {
                        var range_1 = false;
                        Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
                            range_1 = false;
                            var rangeValue = data[colorValuePath];
                            for (var z = 0; z < colorMapping.length; z++) {
                                Eif (!ej2_base_1.isNullOrUndefined(rangeValue) && !isNaN(rangeValue)) {
                                    if (rangeValue >= colorMapping[z].from && rangeValue <= colorMapping[z].to) {
                                        range_1 = true;
                                    }
                                }
                                else if (!range_1) {
                                    range_1 = false;
                                }
                            }
                            if (!range_1) {
                                outOfRange.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, rangeValue));
                            }
                        });
                    }
                    legendText = !ej2_base_1.isNullOrUndefined(colorMap.label) ? colorMap.label : 'Others';
                    var outfill = ((Object.prototype.toString.call(colorMap.color) === '[object Array]'))
                        ? colorMap.color[0] : colorMap.color;
                    var legendOutFill = outfill;
                    this_2.getOverallLegendItemsCollection(legendText, legendOutFill, outOfRange, colorMap.showLegend);
                }
            };
            var this_2 = this;
            for (var _i = 0, colorMapping_2 = colorMapping; _i < colorMapping_2.length; _i++) {
                var colorMap = colorMapping_2[_i];
                _loop_2(colorMap);
            }
        };
        Legend.prototype.getDataLegendCollection = function (layerIndex, layerData, colorMapping, dataSource, dataPath, colorValuePath, propertyPath) {
            var _this = this;
            var legendText;
            var fill = this.maps.legendSettings.fill;
            var valuePath = this.maps.legendSettings.valuePath;
            if (!ej2_base_1.isNullOrUndefined(colorValuePath) && !ej2_base_1.isNullOrUndefined(dataSource)) {
                Array.prototype.forEach.call(dataSource, function (data, dataIndex) {
                    var showLegend = ej2_base_1.isNullOrUndefined(_this.maps.legendSettings.showLegendPath) ?
                        true : ej2_base_1.isNullOrUndefined(data[_this.maps.legendSettings.showLegendPath]) ?
                        false : data[_this.maps.legendSettings.showLegendPath];
                    var dataValue = ((colorValuePath.indexOf('.') > -1) ? (helper_1.getValueFromObject(data, colorValuePath)) :
                        (data[colorValuePath]));
                    var newData = [];
                    var legendFill = (ej2_base_1.isNullOrUndefined(fill)) ? dataValue : fill;
                    if (!ej2_base_1.isNullOrUndefined(dataValue) && colorMapping.length === 0 &&
                        (!ej2_base_1.isNullOrUndefined(valuePath) || !ej2_base_1.isNullOrUndefined(dataPath))) {
                        legendText = !ej2_base_1.isNullOrUndefined(data[valuePath]) ? ((valuePath.indexOf('.') > -1) ?
                            helper_1.getValueFromObject(data, valuePath) : data[valuePath]) : ((dataPath.indexOf('.') > -1) ?
                            helper_1.getValueFromObject(data, dataPath) : data[dataPath]);
                        newData.push(_this.getLegendData(layerIndex, dataIndex, data, dataPath, layerData, propertyPath, dataValue));
                    }
                    _this.getOverallLegendItemsCollection(legendText, legendFill, newData, showLegend);
                });
            }
        };
        Legend.prototype.interactiveHandler = function (e) {
            var target = e.target;
            var legend = this.maps.legendSettings;
            var id = this.maps.element.id + '_Interactive_Legend';
            var hoverId = legend.type === 'Layers' ? '_shapeIndex_' : (legend.type === 'Markers') ? '_MarkerIndex_' :
                '_BubbleIndex_';
            if (target.id.indexOf(hoverId) > 1) {
                var layerIndex = parseFloat(target.id.split('_LayerIndex_')[1].split('_')[0]);
                var dataIndex = parseFloat(target.id.split(/_dataIndex_/i)[1].split('_')[0]);
                var fill = void 0;
                var stroke = void 0;
                var strokeWidth = void 0;
                if (!(ej2_base_1.isNullOrUndefined(helper_1.querySelector(id, this.maps.element.id)))) {
                    ej2_base_1.remove(helper_1.querySelector(id, this.maps.element.id));
                }
                var layer = this.maps.layersCollection[layerIndex];
                var markerVisible = (legend.type === 'Layers' ? layer.visible :
                    legend.type === 'Markers' ? layer.markerSettings[parseFloat(target.id.split('_MarkerIndex_')[1].split('_')[0])].visible :
                        (this.maps.getBubbleVisible(this.maps.layersCollection[layerIndex])));
                if (legend.visible && this.legendRenderingCollections.length > 0
                    && legend.mode === 'Interactive' && markerVisible) {
                    var svgRect = this.maps.svgObject.getBoundingClientRect();
                    for (var i = 0; i < this.legendCollection.length; i++) {
                        var currentData = this.legendCollection[i];
                        var legendElement = helper_1.querySelector(this.maps.element.id + '_Legend_Index_' + i, this.maps.element.id);
                        var legendRect = legendElement.getBoundingClientRect();
                        var rect = new helper_1.Rect(Math.abs(legendRect.left - svgRect.left), Math.abs(legendRect.top - svgRect.top), legendRect.width, legendRect.height);
                        fill = legendElement.getAttribute('fill');
                        stroke = legend.shapeBorder.color;
                        strokeWidth = legend.shapeBorder.width;
                        Eif (!ej2_base_1.isNullOrUndefined(currentData['data'])) {
                            var data = currentData['data'];
                            var _loop_3 = function (j) {
                                if (dataIndex === data[j]['dataIndex'] && layerIndex === data[j]['layerIndex']) {
                                    this_3.renderInteractivePointer(legend, fill, stroke, id, strokeWidth, rect);
                                    var arrowElement_1 = helper_1.querySelector(id, this_3.maps.element.id);
                                    Iif (this_3.maps.isDevice && !(ej2_base_1.isNullOrUndefined(arrowElement_1))) {
                                        clearTimeout(this_3.arrowTimer);
                                        this_3.arrowTimer = setTimeout(function () {
                                            if (!ej2_base_1.isNullOrUndefined(arrowElement_1.parentNode)) {
                                                ej2_base_1.remove(arrowElement_1);
                                            }
                                        }, 2000);
                                    }
                                    return "break";
                                }
                            };
                            var this_3 = this;
                            for (var j = 0; j < data.length; j++) {
                                var state_1 = _loop_3(j);
                                if (state_1 === "break")
                                    break;
                            }
                        }
                    }
                }
            }
            else {
                Iif (!(ej2_base_1.isNullOrUndefined(helper_1.querySelector(id, this.maps.element.id)))) {
                    ej2_base_1.remove(helper_1.querySelector(id, this.maps.element.id));
                }
            }
        };
        Legend.prototype.renderInteractivePointer = function (legend, fill, stroke, id, strokeWidth, rect) {
            var path;
            var locX;
            var locY;
            var height = 10;
            var width = 10;
            var direction = (legend.orientation === 'None') ? (legend.position === 'Top' || legend.position === 'Bottom')
                ? 'Horizontal' : 'Vertical' : legend.orientation;
            rect.y = legend.position === 'Float' && this.maps.isTileMap ? rect.y - this.maps.mapAreaRect.y : rect.y;
            if (direction === 'Horizontal') {
                if (!legend.invertedPointer) {
                    locX = rect.x + (rect.width / 2) - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                    locY = rect.y;
                    path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY - height) +
                        ' L ' + (locX + width) + ' ' + (locY - height) + ' Z ';
                }
                else {
                    locX = rect.x + (rect.width / 2) - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                    locY = rect.y + (rect.height);
                    path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY + height) +
                        ' L ' + (locX + width) + ' ' + (locY + height) + ' Z ';
                }
            }
            else {
                if (!legend.invertedPointer) {
                    locX = rect.x + rect.width - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                    locY = rect.y + (rect.height / 2);
                    path = ' M ' + locX + ' ' + locY + ' L ' + (locX + width) + ' ' + (locY - height) +
                        ' L ' + (locX + width) + ' ' + (locY + height) + ' z ';
                }
                else {
                    locX = rect.x - (legend.position === 'Float' && this.maps.isTileMap ? this.maps.mapAreaRect.x : 0);
                    locY = rect.y + (rect.height / 2);
                    path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY - height) +
                        ' L ' + (locX - width) + ' ' + (locY + height) + ' z ';
                }
            }
            var pathOptions = new helper_1.PathOption(id, fill, strokeWidth, stroke, 1, 1, '', path);
            Iif (legend.position === 'Float' && this.maps.isTileMap) {
                this.maps.mapLayerPanel.layerGroup.appendChild(this.maps.renderer.drawPath(pathOptions));
            }
            else {
                this.maps.svgObject.appendChild(this.maps.renderer.drawPath(pathOptions));
            }
        };
        Legend.prototype.wireEvents = function (element) {
            ej2_base_1.EventHandler.add(element, ej2_base_1.Browser.touchStartEvent, this.changeNextPage, this);
        };
        Legend.prototype.addEventListener = function () {
            if (this.maps.isDestroyed) {
                return;
            }
            this.maps.on(ej2_base_1.Browser.touchMoveEvent, this.interactiveHandler, this);
            this.maps.on(ej2_base_1.Browser.touchEndEvent, this.interactiveHandler, this);
            this.maps.on(index_1.click, this.legendClick, this);
        };
        Legend.prototype.markerToggleSelection = function (mapElement, layerIndex, markerIndex, legendIndex) {
            mapElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
            mapElement.setAttribute('stroke', this.maps.layers[layerIndex].markerSettings[markerIndex].border.color);
            mapElement.setAttribute('fill-opacity', (this.maps.layers[layerIndex].markerSettings[markerIndex].opacity).toString());
            mapElement.setAttribute('stroke-width', (this.maps.layers[layerIndex].markerSettings[markerIndex].border.width).toString());
            mapElement.setAttribute('stroke-opacity', (ej2_base_1.isNullOrUndefined(this.maps.layers[layerIndex].markerSettings[markerIndex].border.opacity) ?
                this.maps.layers[layerIndex].markerSettings[markerIndex].opacity :
                this.maps.layers[layerIndex].markerSettings[markerIndex].border.opacity).toString());
            var indexToRemoveSelectedElement = this.maps.toggledElementId.indexOf(mapElement.id);
            Eif (indexToRemoveSelectedElement !== -1) {
                this.maps.toggledElementId.splice(indexToRemoveSelectedElement, 1);
            }
        };
        Legend.prototype.bubbleToggleSelection = function (mapElement, layerIndex, bubbleIndex, legendIndex) {
            mapElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
            mapElement.setAttribute('stroke', this.maps.layers[layerIndex].bubbleSettings[bubbleIndex].border.color);
            mapElement.setAttribute('fill-opacity', (this.maps.layers[layerIndex].bubbleSettings[bubbleIndex].opacity).toString());
            mapElement.setAttribute('stroke-width', (this.maps.layers[layerIndex].bubbleSettings[bubbleIndex].border.width).toString());
            mapElement.setAttribute('stroke-opacity', (ej2_base_1.isNullOrUndefined(this.maps.layers[layerIndex].bubbleSettings[bubbleIndex].border.opacity) ?
                this.maps.layers[layerIndex].bubbleSettings[bubbleIndex].opacity :
                this.maps.layers[layerIndex].bubbleSettings[bubbleIndex].border.opacity).toString());
        };
        Legend.prototype.legendClick = function (targetEle) {
            var legendShapeId;
            var legendTextId;
            var legendToggleFill = this.maps.legendSettings.toggleLegendSettings.fill;
            var legendToggleOpacity = this.maps.legendSettings.toggleLegendSettings.opacity;
            var legendToggleBorderColor = this.maps.legendSettings.toggleLegendSettings.border.color;
            var legendToggleBorderWidth = this.maps.legendSettings.toggleLegendSettings.border.width;
            var legendToggleBorderOpacity = ej2_base_1.isNullOrUndefined(this.maps.legendSettings.toggleLegendSettings.border.opacity) ?
                this.maps.legendSettings.toggleLegendSettings.opacity : this.maps.legendSettings.toggleLegendSettings.border.opacity;
            if (!ej2_base_1.isNullOrUndefined(targetEle.parentNode) && targetEle.parentNode['id'].indexOf(this.maps.element.id + '_Legend_Index_') > -1) {
                var mapElement = void 0;
                var legendIndex = parseFloat(targetEle.parentElement.id.substr((this.maps.element.id + '_Legend_Index_').length));
                var selectedItem = this.legendCollection[legendIndex]['data'];
                var isVisible = selectedItem['_isVisible'];
                var shape = void 0;
                if (this.maps.legendSettings.toggleLegendSettings.enable && (this.maps.legendSettings.type === 'Bubbles' || this.maps.legendSettings.type === 'Markers')) {
                    for (var k = 0; k < this.maps.layers.length; k++) {
                        for (var j = 0; j < (this.maps.legendSettings.type === 'Bubbles' ? this.maps.layers[k].bubbleSettings.length : this.maps.layers[k].markerSettings.length); j++) {
                            for (var i = 0; i < selectedItem.length; i++) {
                                shape = this.legendCollection[legendIndex]['data'][i];
                                mapElement = this.maps.legendSettings.type === 'Bubbles' ? helper_1.querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                                    '_BubbleIndex_' + j + '_dataIndex_' + shape['dataIndex'], this.maps.element.id) : helper_1.querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                                    '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
                                if (!ej2_base_1.isNullOrUndefined(shape['shape']) && shape['shape'] === 'Balloon') {
                                    mapElement = this.maps.legendSettings.type === 'Bubbles' ? helper_1.querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                                        '_BubbleIndex_' + j + '_dataIndex_' + shape['dataIndex'] + '_Group', this.maps.element.id) : helper_1.querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                                        '_MarkerIndex_' + shape['markerIndex'] + '_dataIndex_' + shape['dataIndex'] + '_Group', this.maps.element.id);
                                    mapElement = mapElement.children[0];
                                }
                                var toggledLegendIdIndex = this.maps.toggledLegendId.indexOf(legendIndex);
                                if (isVisible && mapElement !== null) {
                                    if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                        mapElement.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
                                        mapElement.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                        mapElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                        mapElement.setAttribute('stroke-width', (ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                        mapElement.setAttribute('stroke-opacity', (ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                            this.maps.layers[k].shapeSettings.opacity :
                                            this.maps.layers[k].shapeSettings.border.opacity).toString());
                                    }
                                    else {
                                        mapElement.setAttribute('fill', legendToggleFill);
                                        mapElement.setAttribute('fill-opacity', (legendToggleOpacity).toString());
                                        mapElement.setAttribute('stroke', legendToggleBorderColor);
                                        mapElement.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
                                        mapElement.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
                                    }
                                    if (this.maps.legendSettings.type === 'Markers') {
                                        Eif (toggledLegendIdIndex === -1) {
                                            this.maps.toggledLegendId.push(legendIndex);
                                        }
                                        var index = this.maps.toggledElementId.indexOf(mapElement.id);
                                        Eif (index === -1) {
                                            this.maps.toggledElementId.push(mapElement.id);
                                        }
                                    }
                                    Eif (targetEle !== null) {
                                        legendShapeId = helper_1.querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                        legendTextId = helper_1.querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                        if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                            this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                        }
                                        else {
                                            this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
                                                ? 0 : this.maps.layers[k].shapeSettings.border.width, ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity)
                                                ? this.maps.layers[k].shapeSettings.opacity
                                                : this.maps.layers[k].shapeSettings.border.opacity, this.maps.layers[k].shapeSettings.fill);
                                        }
                                    }
                                }
                                else {
                                    if (this.maps.legendSettings.type === 'Markers') {
                                        Eif (toggledLegendIdIndex !== -1 && i === 0) {
                                            this.maps.toggledLegendId.splice(toggledLegendIdIndex, 1);
                                        }
                                        this.markerToggleSelection(mapElement, k, j, legendIndex);
                                    }
                                    else {
                                        this.bubbleToggleSelection(mapElement, k, j, legendIndex);
                                    }
                                    Eif (targetEle !== null) {
                                        legendShapeId = helper_1.querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                        legendTextId = helper_1.querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                        this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex]['fill'], this.legendCollection[legendIndex]['opacity'], this.legendCollection[legendIndex]['shapeBorder']['color'], this.legendCollection[legendIndex]['shapeBorder']['width'], this.legendCollection[legendIndex]['shapeBorder']['opacity'], this.maps.legendSettings.textStyle.color);
                                        Iif (this.maps.legendSettings.shape === 'HorizontalLine' || this.maps.legendSettings.shape === 'VerticalLine' || this.maps.legendSettings.shape === 'Cross') {
                                            legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['fill']);
                                        }
                                    }
                                }
                            }
                            selectedItem['_isVisible'] = isVisible ? false : true;
                        }
                    }
                }
                if (this.maps.legendSettings.type === 'Layers' && this.maps.legendSettings.toggleLegendSettings.enable) {
                    var layerElement = void 0;
                    this.removeCollections(targetEle, legendIndex);
                    var toggledLegendIdIndex = this.maps.toggledLegendId.indexOf(legendIndex);
                    if (toggledLegendIdIndex !== -1) {
                        isVisible = false;
                    }
                    for (var j = 0; j < this.maps.layers.length; j++) {
                        for (var i = 0; i < selectedItem.length; i++) {
                            shape = this.legendCollection[legendIndex]['data'][i];
                            layerElement = helper_1.querySelector(this.maps.element.id + '_LayerIndex_' + shape['layerIndex'] +
                                '_shapeIndex_' + shape['shapeIndex'] + '_dataIndex_' + shape['dataIndex'], this.maps.element.id);
                            if (layerElement !== null) {
                                var toggledShapeIdIndex = this.maps.toggledElementId.indexOf(layerElement.id);
                                if (isVisible) {
                                    if (i === 0) {
                                        this.maps.toggledLegendId.push(legendIndex);
                                    }
                                    if (toggledShapeIdIndex === -1) {
                                        this.maps.toggledElementId.push(layerElement.id);
                                    }
                                    if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                        layerElement.setAttribute('fill', this.maps.layers[j].shapeSettings.fill);
                                        layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
                                        layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                        layerElement.setAttribute('stroke-width', (ej2_base_1.isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                        layerElement.setAttribute('stroke-opacity', (ej2_base_1.isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
                                            this.maps.layers[j].shapeSettings.opacity :
                                            this.maps.layers[j].shapeSettings.border.opacity).toString());
                                    }
                                    else {
                                        layerElement.setAttribute('fill', legendToggleFill);
                                        layerElement.setAttribute('fill-opacity', (legendToggleOpacity).toString());
                                        layerElement.setAttribute('stroke', legendToggleBorderColor);
                                        layerElement.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
                                        layerElement.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
                                    }
                                    Eif (targetEle !== null) {
                                        legendTextId = helper_1.querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                        legendShapeId = helper_1.querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                        if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                            this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                        }
                                        else {
                                            this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[j].shapeSettings.fill, this.maps.layers[j].shapeSettings.opacity, this.maps.layers[j].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, ej2_base_1.isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width)
                                                ? 0 : this.maps.layers[j].shapeSettings.border.width, ej2_base_1.isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity)
                                                ? this.maps.layers[j].shapeSettings.opacity
                                                : this.maps.layers[j].shapeSettings.border.opacity, this.maps.layers[j].shapeSettings.fill);
                                        }
                                    }
                                }
                                else {
                                    if (toggledLegendIdIndex !== -1 && i === 0) {
                                        this.maps.toggledLegendId.splice(toggledLegendIdIndex, 1);
                                    }
                                    if (toggledShapeIdIndex !== -1) {
                                        this.maps.toggledElementId.splice(toggledShapeIdIndex, 1);
                                    }
                                    layerElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
                                    layerElement.setAttribute('stroke-opacity', (ej2_base_1.isNullOrUndefined(this.maps.layers[j].shapeSettings.border.opacity) ?
                                        this.maps.layers[j].shapeSettings.opacity :
                                        this.maps.layers[j].shapeSettings.border.opacity).toString());
                                    layerElement.setAttribute('stroke-width', (ej2_base_1.isNullOrUndefined(this.maps.layers[j].shapeSettings.border.width) ? 0 : this.maps.layers[j].shapeSettings.border.width).toString());
                                    layerElement.setAttribute('fill-opacity', (this.maps.layers[j].shapeSettings.opacity).toString());
                                    layerElement.setAttribute('stroke', this.maps.layers[j].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                    Eif (targetEle !== null) {
                                        legendTextId = helper_1.querySelector(this.maps.element.id + '_Legend_Text_Index_' + legendIndex, this.maps.element.id);
                                        legendShapeId = helper_1.querySelector(this.maps.element.id + '_Legend_Shape_Index_' + legendIndex, this.maps.element.id);
                                        this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex]['fill'], this.legendCollection[legendIndex]['opacity'], this.legendCollection[legendIndex]['shapeBorder']['color'], this.legendCollection[legendIndex]['shapeBorder']['width'], this.legendCollection[legendIndex]['shapeBorder']['opacity'], '#757575');
                                    }
                                }
                            }
                        }
                    }
                    selectedItem['_isVisible'] = isVisible ? false : true;
                }
            }
            else if (!ej2_base_1.isNullOrUndefined(targetEle.id) && (targetEle.id.indexOf(this.maps.element.id + '_Legend_Shape_Index') > -1 ||
                targetEle.id.indexOf(this.maps.element.id + '_Legend_Index') !== -1) && this.maps.legendSettings.visible &&
                targetEle.id.indexOf('_Text') === -1) {
                var LegendInteractive = void 0;
                var legendIndex = parseFloat(targetEle.id.split(this.maps.element.id + '_Legend_Index_')[1]);
                var mapdata = void 0;
                var selectedItem = this.legendCollection[legendIndex]['data'];
                var isVisible = selectedItem['_isVisible'];
                if ((this.maps.legendSettings.type === 'Bubbles' || this.maps.legendSettings.type === 'Markers') && this.maps.legendSettings.toggleLegendSettings.enable) {
                    var toggledLegendIdIndex = this.maps.toggledLegendId.indexOf(legendIndex);
                    for (var k = 0; k < this.maps.layers.length; k++) {
                        for (var j = 0; j < (this.maps.legendSettings.type === 'Bubbles' ? this.maps.layers[k].bubbleSettings.length : this.maps.layers[k].markerSettings.length); j++) {
                            for (var i = 0; i < selectedItem.length; i++) {
                                mapdata = this.legendCollection[legendIndex]['data'][i];
                                LegendInteractive = this.maps.legendSettings.type === 'Bubbles' ? helper_1.querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
                                    '_BubbleIndex_' + j + '_dataIndex_' + mapdata['dataIndex'], this.maps.element.id) : helper_1.querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
                                    '_MarkerIndex_' + j + '_dataIndex_' + mapdata['dataIndex'], this.maps.element.id);
                                if (!ej2_base_1.isNullOrUndefined(mapdata['shape']) && mapdata['shape'] === 'Balloon') {
                                    LegendInteractive = this.maps.legendSettings.type === 'Bubbles' ? helper_1.querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
                                        '_BubbleIndex_' + j + '_dataIndex_' + mapdata['dataIndex'] + '_Group', this.maps.element.id) : helper_1.querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
                                        '_MarkerIndex_' + j + '_dataIndex_' + mapdata['dataIndex'] + '_Group', this.maps.element.id);
                                    LegendInteractive = LegendInteractive.children[0];
                                }
                                if (isVisible && LegendInteractive !== null) {
                                    if (this.maps.legendSettings.type === 'Markers') {
                                        Eif (toggledLegendIdIndex === -1) {
                                            this.maps.toggledLegendId.push(legendIndex);
                                        }
                                        var index = this.maps.toggledElementId.indexOf(LegendInteractive.id);
                                        Eif (index === -1) {
                                            this.maps.toggledElementId.push(LegendInteractive.id);
                                        }
                                    }
                                    if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                        LegendInteractive.setAttribute('fill', this.maps.layers[k].shapeSettings.fill);
                                        LegendInteractive.setAttribute('stroke', this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                        LegendInteractive.setAttribute('stroke-width', (ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                        LegendInteractive.setAttribute('stroke-opacity', (ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                            this.maps.layers[k].shapeSettings.opacity :
                                            this.maps.layers[k].shapeSettings.border.opacity).toString());
                                        LegendInteractive.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                    }
                                    else {
                                        LegendInteractive.setAttribute('fill', legendToggleFill);
                                        LegendInteractive.setAttribute('fill-opacity', (legendToggleOpacity).toString());
                                        LegendInteractive.setAttribute('stroke', legendToggleBorderColor);
                                        LegendInteractive.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
                                        LegendInteractive.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
                                    }
                                    Eif (targetEle !== null) {
                                        legendTextId = helper_1.querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
                                        legendShapeId = helper_1.querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
                                        if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                            this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                        }
                                        else {
                                            this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[k].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[k].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, (ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
                                                ? 0
                                                : this.maps.layers[k].shapeSettings.border.width), (ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity)
                                                ? this.maps.layers[k].shapeSettings.opacity
                                                : this.maps.layers[k].shapeSettings.border.opacity), this.maps.layers[k].shapeSettings.fill);
                                        }
                                    }
                                }
                                else {
                                    if (this.maps.legendSettings.type === 'Markers') {
                                        Eif (toggledLegendIdIndex !== -1 && i === 0) {
                                            this.maps.toggledLegendId.splice(toggledLegendIdIndex, 1);
                                        }
                                        this.markerToggleSelection(LegendInteractive, k, j, legendIndex);
                                    }
                                    else {
                                        this.bubbleToggleSelection(LegendInteractive, k, j, legendIndex);
                                    }
                                    Eif (targetEle !== null) {
                                        legendShapeId = helper_1.querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
                                        legendShapeId.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
                                        legendShapeId.setAttribute('fill-opacity', this.legendCollection[legendIndex]['opacity']);
                                        legendShapeId.setAttribute('stroke', this.legendCollection[legendIndex]['shapeBorder']['color']);
                                        legendShapeId.setAttribute('stroke-width', this.legendCollection[legendIndex]['shapeBorder']['width']);
                                        legendShapeId.setAttribute('stroke-opacity', this.legendCollection[legendIndex]['shapeBorder']['opacity']);
                                        legendTextId = helper_1.querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
                                        legendTextId.setAttribute('fill', this.maps.legendSettings.textStyle.color);
                                    }
                                }
                            }
                            selectedItem['_isVisible'] = isVisible ? false : true;
                        }
                    }
                }
                if (this.maps.legendSettings.type === 'Layers' && this.maps.legendSettings.toggleLegendSettings.enable) {
                    var mapLegendElement = void 0;
                    this.removeCollections(targetEle, legendIndex);
                    var toggleLegendIdIndex = this.maps.toggledLegendId.indexOf(legendIndex);
                    if (toggleLegendIdIndex !== -1) {
                        isVisible = false;
                    }
                    for (var k = 0; k < this.maps.layers.length; k++) {
                        for (var i = 0; i < selectedItem.length; i++) {
                            mapdata = this.legendCollection[legendIndex]['data'][i];
                            mapLegendElement = helper_1.querySelector(this.maps.element.id + '_LayerIndex_' + mapdata['layerIndex'] +
                                '_shapeIndex_' + mapdata['shapeIndex'] + '_dataIndex_' + mapdata['dataIndex'], this.maps.element.id);
                            if (mapLegendElement !== null) {
                                var toggledShapeIdIndex = this.maps.toggledElementId.indexOf(mapLegendElement.id);
                                if (isVisible) {
                                    if (i === 0) {
                                        this.maps.toggledLegendId.push(legendIndex);
                                    }
                                    if (toggledShapeIdIndex === -1) {
                                        this.maps.toggledElementId.push(mapLegendElement.id);
                                    }
                                    if (this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                        mapLegendElement.setAttribute('fill', this.maps.layers[0].shapeSettings.fill);
                                        mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                        mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                        mapLegendElement.setAttribute('stroke-width', (ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 : this.maps.layers[k].shapeSettings.border.width).toString());
                                        mapLegendElement.setAttribute('stroke-opacity', (ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                            this.maps.layers[k].shapeSettings.opacity :
                                            this.maps.layers[k].shapeSettings.border.opacity).toString());
                                    }
                                    else {
                                        mapLegendElement.setAttribute('fill', legendToggleFill);
                                        mapLegendElement.setAttribute('fill-opacity', (legendToggleOpacity).toString());
                                        mapLegendElement.setAttribute('stroke', legendToggleBorderColor);
                                        mapLegendElement.setAttribute('stroke-width', (legendToggleBorderWidth).toString());
                                        mapLegendElement.setAttribute('stroke-opacity', (legendToggleBorderOpacity).toString());
                                    }
                                    Eif (targetEle !== null) {
                                        legendShapeId = helper_1.querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
                                        legendTextId = helper_1.querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
                                        if (!this.maps.legendSettings.toggleLegendSettings.applyShapeSettings) {
                                            this.setToggleAttributes(legendTextId, legendShapeId, legendToggleFill, legendToggleOpacity, legendToggleBorderColor, legendToggleBorderWidth, legendToggleBorderOpacity, legendToggleFill);
                                        }
                                        else {
                                            this.setToggleAttributes(legendTextId, legendShapeId, this.maps.layers[0].shapeSettings.fill, this.maps.layers[k].shapeSettings.opacity, this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor, ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width)
                                                ? 0
                                                : this.maps.layers[k].shapeSettings.border.width, ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity)
                                                ? this.maps.layers[k].shapeSettings.opacity
                                                : this.maps.layers[k].shapeSettings.border.opacity, this.maps.layers[0].shapeSettings.fill);
                                        }
                                    }
                                }
                                else {
                                    if (toggleLegendIdIndex !== -1 && i === 0) {
                                        this.maps.toggledLegendId.splice(toggleLegendIdIndex, 1);
                                    }
                                    if (toggledShapeIdIndex !== -1) {
                                        this.maps.toggledElementId.splice(toggledShapeIdIndex, 1);
                                    }
                                    mapLegendElement.setAttribute('fill-opacity', (this.maps.layers[k].shapeSettings.opacity).toString());
                                    mapLegendElement.setAttribute('stroke-width', (ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.width) ? 0 :
                                        this.maps.layers[k].shapeSettings.border.width).toString());
                                    mapLegendElement.setAttribute('stroke', this.maps.layers[0].shapeSettings.border.color || this.maps.themeStyle.shapeBorderColor);
                                    mapLegendElement.setAttribute('stroke-opacity', (ej2_base_1.isNullOrUndefined(this.maps.layers[k].shapeSettings.border.opacity) ?
                                        this.maps.layers[k].shapeSettings.opacity :
                                        this.maps.layers[k].shapeSettings.border.opacity).toString());
                                    mapLegendElement.setAttribute('fill', this.legendCollection[legendIndex]['fill']);
                                    Eif (targetEle !== null) {
                                        legendTextId = helper_1.querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex + '_Text', this.maps.element.id);
                                        legendShapeId = helper_1.querySelector(this.maps.element.id + '_Legend_Index_' + legendIndex, this.maps.element.id);
                                        this.setToggleAttributes(legendTextId, legendShapeId, this.legendCollection[legendIndex]['fill'], this.legendCollection[legendIndex]['opacity'], this.legendCollection[legendIndex]['shapeBorder']['color'], this.legendCollection[legendIndex]['shapeBorder']['width'], this.legendCollection[legendIndex]['shapeBorder']['opacity'], '#757575');
                                    }
                                }
                            }
                        }
                    }
                    selectedItem['_isVisible'] = isVisible ? false : true;
                }
            }
        };
        Legend.prototype.removeCollections = function (targetEle, legendIndex) {
            this.removeLegendSelectionCollection(targetEle);
            var legendSelectionIndex = this.getIndexofLegend(this.maps.legendSelectionCollection, targetEle);
            Iif (legendSelectionIndex !== -1) {
                this.maps.legendSelectionCollection.splice(legendSelectionIndex, 1);
            }
            var legendHighlightIndex = this.getIndexofLegend(this.legendHighlightCollection, targetEle);
            Iif (legendHighlightIndex !== -1) {
                this.legendHighlightCollection.splice(legendSelectionIndex, 1);
            }
            var shapeHighlightIndex = this.getIndexofLegend(this.shapeHighlightCollection, targetEle);
            Iif (shapeHighlightIndex !== -1) {
                this.shapeHighlightCollection.splice(shapeHighlightIndex, 1);
            }
            var selectedIndex = this.maps.selectedLegendElementId.indexOf(legendIndex);
            Iif (selectedIndex !== -1) {
                this.maps.selectedLegendElementId.splice(selectedIndex, 1);
            }
        };
        Legend.prototype.removeEventListener = function () {
            if (this.maps.isDestroyed) {
                return;
            }
            this.maps.off(ej2_base_1.Browser.touchMoveEvent, this.interactiveHandler);
            this.maps.off(ej2_base_1.Browser.touchEndEvent, this.interactiveHandler);
            this.maps.off(index_1.click, this.legendClick);
        };
        Legend.prototype.getLegendData = function (layerIndex, dataIndex, data, dataPath, layerData, shapePropertyPath, value) {
            var legendData = [];
            Eif (Object.prototype.toString.call(layerData) === '[object Array]') {
                for (var i = 0; i < layerData.length; i++) {
                    var shapeData = layerData[i];
                    var dataPathValue = (dataPath.indexOf('.') > -1) ? helper_1.getValueFromObject(data, dataPath) : data[dataPath];
                    var shapePath = helper_2.checkPropertyPath(data[dataPath], shapePropertyPath, shapeData['properties']);
                    var dataPathValueCase = !ej2_base_1.isNullOrUndefined(dataPathValue) &&
                        typeof dataPathValue === 'string' ? dataPathValue.toLowerCase() : dataPathValue;
                    var shapeDataValueCase = !ej2_base_1.isNullOrUndefined(shapeData['properties'][shapePath])
                        && isNaN(shapeData['properties'][shapePath]) ?
                        shapeData['properties'][shapePath].toLowerCase() : shapeData['properties'][shapePath];
                    if (shapeDataValueCase === dataPathValueCase) {
                        Eif (shapeData['geometry']['type'] !== 'MultiPoint') {
                            legendData.push({
                                layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
                                name: data[dataPath], value: value, pointIndex: -1
                            });
                        }
                        else {
                            for (var j = 0; j < shapeData['geometry'].coordinates.length; j++) {
                                legendData.push({
                                    layerIndex: layerIndex, shapeIndex: i, dataIndex: dataIndex,
                                    name: data[dataPath], value: value, pointIndex: j
                                });
                            }
                        }
                    }
                }
            }
            return legendData;
        };
        Legend.prototype.setToggleAttributes = function (textElement, shapeElement, fillColor, fillOpacity, borderColor, borderWidth, borderOpacity, textColor) {
            textElement.setAttribute('fill', textColor);
            shapeElement.setAttribute('fill', fillColor);
            shapeElement.setAttribute('fill-opacity', (fillOpacity).toString());
            shapeElement.setAttribute('stroke', borderColor);
            shapeElement.setAttribute('stroke-width', (borderWidth).toString());
            if (!ej2_base_1.isNullOrUndefined(borderOpacity)) {
                shapeElement.setAttribute('stroke-opacity', (borderOpacity).toString());
            }
        };
        Legend.prototype.legendGradientColor = function (colorMap, legendIndex) {
            var legendFillColor;
            var xmlns = 'http://www.w3.org/2000/svg';
            Eif (!ej2_base_1.isNullOrUndefined(colorMap.color) && typeof (colorMap.color) === 'object') {
                var linerGradientEle = document.createElementNS(xmlns, 'linearGradient');
                var opacity = 1;
                var position = this.maps.legendSettings.position;
                var x2 = position === 'Top' || position === 'Bottom' ? '100' : '0';
                var y2 = position === 'Top' || position === 'Bottom' ? '0' : '100';
                linerGradientEle.setAttribute('id', 'linear_' + legendIndex + '_' + this.maps.element.id);
                linerGradientEle.setAttribute('x1', 0 + '%');
                linerGradientEle.setAttribute('y1', 0 + '%');
                linerGradientEle.setAttribute('x2', x2 + '%');
                linerGradientEle.setAttribute('y2', y2 + '%');
                for (var b = 0; b < colorMap.color.length; b++) {
                    var offsetColor = 100 / (colorMap.color.length - 1);
                    var stopEle = document.createElementNS(xmlns, 'stop');
                    stopEle.setAttribute('offset', b * offsetColor + '%');
                    stopEle.setAttribute('stop-color', colorMap.color[b]);
                    stopEle.setAttribute('stop-opacity', opacity.toString());
                    linerGradientEle.appendChild(stopEle);
                }
                this.legendLinearGradient = linerGradientEle;
                var color = 'url(' + '#linear_' + legendIndex + '_' + this.maps.element.id + ')';
                this.defsElement.appendChild(linerGradientEle);
                legendFillColor = color;
            }
            return legendFillColor;
        };
        Legend.prototype.getModuleName = function () {
            return 'Legend';
        };
        Legend.prototype.destroy = function () {
            this.legendCollection = [];
            this.legendRenderingCollections = [];
            this.translate = null;
            this.legendBorderRect = null;
            this.initialMapAreaRect = null;
            this.legendTotalRect = null;
            this.totalPages = [];
            this.legendItemRect = null;
            this.legendGroup = null;
            this.shapeHighlightCollection = [];
            this.legendHighlightCollection = [];
            this.shapePreviousColor = [];
            this.selectedNonLegendShapes = [];
            this.legendLinearGradient = null;
            this.currentLayer = null;
            this.defsElement = null;
            this.legendElement = [];
            this.oldShapeElement = null;
            this.removeEventListener();
            this.maps = null;
        };
        return Legend;
    }());
    exports.Legend = Legend;
});