diff --git a/diagrams/Home.drawio.svg b/diagrams/Home.drawio.svg
index 88a1b1d6b7..b455685409 100644
--- a/diagrams/Home.drawio.svg
+++ b/diagrams/Home.drawio.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="797px" height="777px" viewBox="-0.5 -0.5 797 777" content="&lt;mxfile host=&quot;21e2b65c-4dcc-4ab6-afec-be6dff257c15&quot; modified=&quot;2021-03-10T13:00:14.688Z&quot; agent=&quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.54.1 Chrome/87.0.4280.141 Electron/11.3.0 Safari/537.36&quot; etag=&quot;7isOSvNob7ipXKD7BLLh&quot; version=&quot;12.2.4&quot; pages=&quot;1&quot;&gt;&lt;diagram id=&quot;6hGFLwfOUW9BJ-s0fimq&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><path d="M 0 288 L 70 288 L 100 318 L 100 428 L 0 428 L 0 288 Z" fill="#006666" stroke="#ffffff" stroke-miterlimit="10" pointer-events="all"/><path d="M 70 288 L 70 318 L 100 318 Z" fill-opacity="0.05" fill="#000000" stroke="none" pointer-events="all"/><path d="M 70 288 L 70 318 L 100 318" fill="none" stroke="#ffffff" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(16.5,344.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="66" height="27"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 67px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><b>Page Home</b></span><br /><span>&lt;p-home&gt;</span></div></div></foreignObject></g><path d="M 320 218 L 363.34 193 Q 372 188 373.7 178.15 L 389.92 84.28" fill="none" stroke="#cccc00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 390.81 79.1 L 393.07 86.6 L 389.92 84.28 L 386.17 85.4 Z" fill="#cccc00" stroke="#cccc00" stroke-miterlimit="10" pointer-events="all"/><path d="M 499 154 L 349.23 186.16" fill="none" stroke="#cccc00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 344.09 187.27 L 350.2 182.37 L 349.23 186.16 L 351.67 189.22 Z" fill="#cccc00" stroke="#cccc00" stroke-miterlimit="10" pointer-events="all"/><path d="M 702 218 L 792 308 L 702 398 L 612 308 Z" fill="#004c99" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(641.5,251.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="120" height="113"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 121px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>Favorite<br /></b>&lt;c-favorite&gt;<br /><br />On <font color="#ff66b3"><b>setFavorite</b></font> event:<br />-delete or post article<br />to accounts favorites<br />and resolve with <br />article result</div></div></foreignObject></g><path d="M 156 0 L 132 0 Q 122 0 122 10 L 122 349 Q 122 359 112 359 L 98 359 Q 88 359 98 359 L 112 359 Q 122 359 122 369 L 122 708 Q 122 718 132 718 L 156 718" fill="none" stroke="#006666" stroke-miterlimit="10" pointer-events="all"/><rect x="422" y="201.75" width="170" height="92.5" fill="#4d5b69" stroke="#314354" pointer-events="all"/><g transform="translate(429.5,212.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="154" height="70"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 155px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>ListArticlePreviews</b><br />&lt;o-list-article-previews&gt;<br /><br />On <b><font color="#ff66b3">listArticles</font></b> event:<br />-renders &lt;m-article-preview&gt;</div></div></foreignObject></g><path d="M 380 248 L 415.63 248" fill="none" stroke="#cccc00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 420.88 248 L 413.88 251.5 L 415.63 248 L 413.88 244.5 Z" fill="#cccc00" stroke="#cccc00" stroke-miterlimit="10" pointer-events="all"/><path d="M 507 308 L 507 294.25" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 342.5 526 L 342.97 378 Q 343 368 333.8 364.08 L 211.2 311.92 Q 202 308 199.73 298.26 L 186.95 243.45" fill="none" stroke="#004182" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 185.75 238.34 L 190.75 244.36 L 186.95 243.45 L 183.94 245.95 Z" fill="#004182" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><path d="M 290 278 L 229.78 402.27" fill="none" stroke="#cccc00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 227.49 406.99 L 227.39 399.17 L 229.78 402.27 L 233.69 402.22 Z" fill="#cccc00" stroke="#cccc00" stroke-miterlimit="10" pointer-events="all"/><rect x="142" y="408" width="170" height="140" fill="#4d5b69" stroke="#314354" pointer-events="all"/><g transform="translate(156.5,421.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="140" height="113"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 141px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>Pagination</b><br />&lt;m-pagination&gt;<br /><br />On <b><font color="#ff66b3">listArticles</font></b> event:<br />-renders pages list<br /><br />On list entries <font color="#ff66b3"><b>click</b></font> event:<br />-emmits </div></div></foreignObject></g><rect x="251" y="526" width="122" height="60" rx="9" ry="9" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(257.5,535.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="109" height="41"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 110px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#000000">CustomEvent:</font><br /></span><font color="#ff66b3"><b>requestListArticles</b></font><br /><font color="#000000">holds query</font></div></div></foreignObject></g><rect x="42" y="438" width="122" height="60" rx="9" ry="9" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(47.5,447.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="110" height="41"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 111px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><font color="#ff66b3"><b>connectedCallback</b></font><span><br /><font color="#000000">CustomEvent:</font><br /></span><b><font color="#ff66b3">requestListArticles</font></b></div></div></foreignObject></g><rect x="422" y="308" width="170" height="92.5" fill="#4d5b69" stroke="#314354" pointer-events="all"/><g transform="translate(428.5,318.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="156" height="70"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 157px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>ArticlePreview<br /></b>&lt;m-article-preview&gt;<br /><br />On favorite heart <font color="#ff66b3"><b>click</b></font> event:<br />-emmits</div></div></foreignObject></g><rect x="530" y="378" width="120" height="80" rx="12" ry="12" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(531.5,390.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="116" height="55"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 116px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#000000">CustomEvent:</font><br /></span><font color="#ff66b3"><b>setFavorite</b></font><br /><font color="#000000">holds article and resolve function</font></div></div></foreignObject></g><rect x="391" y="8" width="170" height="140" fill="#4d5b69" stroke="#314354" pointer-events="all"/><g transform="translate(400.5,21.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="151" height="113"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 152px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>ArticleFeedToggle</b><br />&lt;m-article-feed-toggle&gt;<br /><br />On <font color="#ff66b3"><b>listArticles</b></font> event:<br />-renders new menu point<br /><br />On menu points <font color="#ff66b3"><b>click</b></font> event:<br />-emmits </div></div></foreignObject></g><rect x="499" y="124" width="120" height="60" rx="9" ry="9" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(504.5,133.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="109" height="41"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 110px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#000000">CustomEvent:</font><br /></span><font color="#ff66b3"><b>requestListArticles</b></font><br /><font color="#000000">holds query</font></div></div></foreignObject></g><path d="M 238 88 L 343 187.5 L 238 287 L 133 187.5 Z" fill="#004c99" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(155.5,145.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="164" height="84"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 165px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>ListArticles</b><br />&lt;c-list-articles&gt;<br /><br />On <font color="#ff66b3"><b>requestListArticles</b></font> event:<br />-fetches articles and<br />emmits</div></div></foreignObject></g><rect x="260" y="218" width="120" height="60" rx="9" ry="9" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(262.5,227.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="114" height="41"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 115px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#000000">CustomEvent:</font><br /></span><font color="#ff66b3"><b>listArticles</b></font><br /><font color="#000000">holds queried articles</font></div></div></foreignObject></g><rect x="389" y="530" width="170" height="130" fill="#4d5b69" stroke="#314354" pointer-events="all"/><g transform="translate(422.5,538.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="102" height="113"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 103px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>TagList<br /></b>&lt;m-tag-list&gt;<br /><br />On <font color="#ff66b3"><b>tags</b></font> event:<br />-renders list of tags<br /><br />On tag <font color="#ff66b3"><b>click</b></font> event:<br />-emmits</div></div></foreignObject></g><rect x="512" y="500" width="120" height="57" rx="8.55" ry="8.55" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(516.5,507.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="110" height="41"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 111px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#ff66b3"><b>connectedCallback</b></font><br /><font color="#000000">CustomEvent:</font><br /></span><b><font color="#ff66b3">getTags</font></b></div></div></foreignObject></g><path d="M 322 675.5 L 372 675.92 Q 382 676 382 666 L 382 358 Q 382 348 372.79 344.1 L 243.86 289.48" fill="none" stroke="#004182" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 239.03 287.44 L 246.84 286.94 L 243.86 289.48 L 244.11 293.39 Z" fill="#004182" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><path d="M 652 558 L 742 639 L 652 720 L 562 639 Z" fill="#004c99" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(601.5,596.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="100" height="84"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 101px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>GetTags<br /></b>&lt;c-get-tags&gt;<br /><br />On <font color="#ff66b3"><b>getTags</b></font> event:<br />-fetches tags and<br />emmits</div></div></foreignObject></g><rect x="676" y="668" width="120" height="60" rx="9" ry="9" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(697.5,677.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="76" height="41"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 77px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#000000">CustomEvent:<br /></font></span><font color="#ff66b3"><b>tags</b></font><br /><font color="#000000">holds tags</font></div></div></foreignObject></g><path d="M 656.37 418 L 692 418 Q 702 418 702 411.18 L 702 404.37" fill="none" stroke="#cccc00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 651.12 418 L 658.12 414.5 L 656.37 418 L 658.12 421.5 Z" fill="#cccc00" stroke="#cccc00" stroke-miterlimit="10" pointer-events="all"/><path d="M 702 399.12 L 705.5 406.12 L 702 404.37 L 698.5 406.12 Z" fill="#cccc00" stroke="#cccc00" stroke-miterlimit="10" pointer-events="all"/><rect x="322" y="641" width="120" height="69" rx="10.35" ry="10.35" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(327.5,654.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="109" height="41"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 110px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#000000">CustomEvent:</font><br /></span><b><font color="#ff66b3">requestListArticles</font></b><br /><font color="#000000">holds query</font></div></div></foreignObject></g><path d="M 632 528.5 L 687 528.92 Q 697 529 697 539 L 697 592.13" fill="none" stroke="#004182" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 697 597.38 L 693.5 590.38 L 697 592.13 L 700.5 590.38 Z" fill="#004182" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><path d="M 736 728 L 736 758 Q 736 768 726 768 L 484 768 Q 474 768 474 758 L 474 666.37" fill="none" stroke="#cccc00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 474 661.12 L 477.5 668.12 L 474 666.37 L 470.5 668.12 Z" fill="#cccc00" stroke="#cccc00" stroke-miterlimit="10" pointer-events="all"/><path d="M 133.5 438 L 133.01 193.87" fill="none" stroke="#004182" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 133 188.62 L 136.52 195.61 L 133.01 193.87 L 129.52 195.62 Z" fill="#004182" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1123px" height="861px" viewBox="-0.5 -0.5 1123 861" content="&lt;mxfile host=&quot;cf948973-4e04-4491-9f63-87d56d4f3432&quot; modified=&quot;2021-03-12T09:34:59.832Z&quot; agent=&quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.54.1 Chrome/87.0.4280.141 Electron/11.3.0 Safari/537.36&quot; etag=&quot;R3cS67KRfRzn0CB7YBuR&quot; version=&quot;12.2.4&quot; pages=&quot;1&quot;&gt;&lt;diagram id=&quot;6hGFLwfOUW9BJ-s0fimq&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><path d="M 902 418 L 789.37 418" fill="none" stroke="#004182" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 784.12 418 L 791.12 414.5 L 789.37 418 L 791.12 421.5 Z" fill="#004182" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><rect x="902" y="378" width="120" height="80" rx="12" ry="12" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(904.5,397.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="114" height="40"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 114px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#000000">CustomEvent:</font><br /></span><font color="#ff66b3"><b>article</b></font><br /><font color="#000000">holds article &amp; render<br /></font></div></div></foreignObject></g><path d="M 0 340 L 70 340 L 100 370 L 100 480 L 0 480 L 0 340 Z" fill="#006666" stroke="#ffffff" stroke-miterlimit="10" pointer-events="all"/><path d="M 70 340 L 70 370 L 100 370 Z" fill-opacity="0.05" fill="#000000" stroke="none" pointer-events="all"/><path d="M 70 340 L 70 370 L 100 370" fill="none" stroke="#ffffff" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(16.5,396.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="66" height="26"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 66px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><b>Page Home</b></span><br /><span>&lt;p-home&gt;</span></div></div></foreignObject></g><path d="M 364 268 L 365.85 145 Q 366 135 376 135 L 469.63 135" fill="none" stroke="#cccc00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 474.88 135 L 467.88 138.5 L 469.63 135 L 467.88 131.5 Z" fill="#cccc00" stroke="#cccc00" stroke-miterlimit="10" pointer-events="all"/><path d="M 156 0 L 132 0 Q 122 0 122 10 L 122 420 Q 122 430 112 430 L 98 430 Q 88 430 98 430 L 112 430 Q 122 430 122 440 L 122 850 Q 122 860 132 860 L 156 860" fill="none" stroke="#006666" stroke-miterlimit="10" pointer-events="all"/><path d="M 505.5 372 L 505.5 350" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 304 328 L 236.02 454.39" fill="none" stroke="#cccc00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 233.53 459.02 L 233.76 451.19 L 236.02 454.39 L 239.93 454.51 Z" fill="#cccc00" stroke="#cccc00" stroke-miterlimit="10" pointer-events="all"/><rect x="148" y="460" width="170" height="170" fill="#4d5b69" stroke="#314354" pointer-events="all"/><g transform="translate(155.5,489.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="154" height="110"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 156px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>Pagination</b><br />&lt;m-pagination&gt;<br /><br />On <b><font color="#ff66b3">listArticles</font></b> event<br />renders pages list<br /><br />On list entries <font color="#ff66b3"><b>click</b></font> event<br />emmits <b><font color="#ff66b3">requestListArticles </font></b></div></div></foreignObject></g><rect x="253" y="621" width="122" height="60" rx="9" ry="9" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(259.5,630.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="108" height="40"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 110px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#000000">CustomEvent:</font><br /></span><font color="#ff66b3"><b>requestListArticles</b></font><br /><font color="#000000">holds query</font></div></div></foreignObject></g><rect x="48" y="490" width="122" height="60" rx="9" ry="9" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(53.5,499.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="110" height="40"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 110px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><font color="#ff66b3"><b>connectedCallback</b></font><span><br /><font color="#000000">CustomEvent:</font><br /></span><b><font color="#ff66b3">requestListArticles</font></b></div></div></foreignObject></g><rect x="420.5" y="372" width="170" height="93" fill="#4d5b69" stroke="#314354" pointer-events="all"/><g transform="translate(438.5,391.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="134" height="54"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 136px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>ArticlePreview<br /></b>&lt;m-article-preview&gt;<br /><br />renders &lt;m-article-meta&gt;</div></div></foreignObject></g><rect x="476" y="30" width="170" height="140" fill="#4d5b69" stroke="#314354" pointer-events="all"/><g transform="translate(483.5,44.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="154" height="110"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 156px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>ArticleFeedToggle</b><br />&lt;m-article-feed-toggle&gt;<br /><br />On <font color="#ff66b3"><b>listArticles</b></font> <br />renders new menu point<br /><br />On menu points <font color="#ff66b3"><b>click <br /></b></font>emmits <font color="#ff66b3"><b>requestListArticles </b></font></div></div></foreignObject></g><rect x="274" y="268" width="120" height="60" rx="9" ry="9" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(276.5,277.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="114" height="40"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 114px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#000000">CustomEvent:</font><br /></span><b style="color: rgb(255 , 102 , 179)">listArticles<br /></b><font color="#000000">holds queried articles</font></div></div></foreignObject></g><path d="M 244.5 126.5 L 349.5 226 L 244.5 325.5 L 139.5 226 Z" fill="#004c99" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(164.5,184.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="160" height="82"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 162px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>Articles Controller</b><br />&lt;c-article&gt;<br /><br />On <font color="#ff66b3"><b>requestListArticles</b></font> event <br />fetches articles and<br />emmits <b><font color="#ff66b3">listArticles</font></b></div></div></foreignObject></g><rect x="380.5" y="166" width="120" height="60" rx="9" ry="9" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(386.5,175.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="108" height="40"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 110px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#000000">CustomEvent:</font><br /></span><font color="#ff66b3"><b>requestListArticles</b></font><br /><font color="#000000">holds query</font></div></div></foreignObject></g><path d="M 380.5 211 L 355.23 223.23" fill="none" stroke="#004182" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 350.51 225.51 L 355.28 219.31 L 355.23 223.23 L 358.33 225.61 Z" fill="#004182" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><rect x="420.5" y="245" width="170" height="105" fill="#4d5b69" stroke="#314354" pointer-events="all"/><g transform="translate(442.5,256.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="126" height="82"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 128px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>ListArticlePreviews</b><br />&lt;o-list-article-previews&gt;<br /><br />On <b style="color: rgb(255 , 102 , 179)">listArticles <br /></b>event renders <br />&lt;m-article-preview&gt;</div></div></foreignObject></g><path d="M 394 298 L 414.13 297.62" fill="none" stroke="#cccc00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 419.38 297.52 L 412.45 301.15 L 414.13 297.62 L 412.32 294.15 Z" fill="#cccc00" stroke="#cccc00" stroke-miterlimit="10" pointer-events="all"/><rect x="389" y="582" width="170" height="150" fill="#4d5b69" stroke="#314354" pointer-events="all"/><g transform="translate(396.5,601.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="154" height="110"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 156px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>TagList<br /></b>&lt;m-tag-list&gt;<br /><br />On <font color="#ff66b3"><b>tags</b></font> event<br />renders list of tags<br /><br />On tag <font color="#ff66b3"><b>click</b></font> event<br />emmits <b><font color="#ff66b3">requestListArticles </font></b></div></div></foreignObject></g><rect x="512" y="552" width="120" height="57" rx="8.55" ry="8.55" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(516.5,560.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="110" height="40"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 110px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#ff66b3"><b>connectedCallback</b></font><br /><font color="#000000">CustomEvent:</font><br /></span><b><font color="#ff66b3">getTags</font></b></div></div></foreignObject></g><path d="M 322 755.5 L 372.91 732.17 Q 382 728 382 718 L 382 410 Q 382 400 373.21 395.24 L 250.1 328.53" fill="none" stroke="#004182" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 245.48 326.03 L 253.3 326.29 L 250.1 328.53 L 249.97 332.44 Z" fill="#004182" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><rect x="676" y="733" width="120" height="60" rx="9" ry="9" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(697.5,742.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="76" height="40"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 76px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#000000">CustomEvent:<br /></font></span><font color="#ff66b3"><b>tags</b></font><br /><font color="#000000">holds tags</font></div></div></foreignObject></g><path d="M 652 610 L 742 691 L 652 772 L 562 691 Z" fill="#004c99" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(602.5,649.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="98" height="82"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 98px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>GetTags<br /></b>&lt;c-get-tags&gt;<br /><br />On <font color="#ff66b3"><b>getTags</b></font> event <br />fetches tags and<br />emmits <b><font color="#ff66b3">tags</font></b></div></div></foreignObject></g><rect x="322" y="721" width="120" height="69" rx="10.35" ry="10.35" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(327.5,735.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="108" height="40"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 110px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#000000">CustomEvent:</font><br /></span><b><font color="#ff66b3">requestListArticles</font></b><br /><font color="#000000">holds query</font></div></div></foreignObject></g><path d="M 632 580.5 L 687 580.92 Q 697 581 697 591 L 697 644.13" fill="none" stroke="#004182" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 697 649.38 L 693.5 642.38 L 697 644.13 L 700.5 642.38 Z" fill="#004182" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><path d="M 736 793 L 736 810 Q 736 820 726 820 L 484 820 Q 474 820 474 810 L 474 738.37" fill="none" stroke="#cccc00" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 474 733.12 L 477.5 740.12 L 474 738.37 L 470.5 740.12 Z" fill="#cccc00" stroke="#cccc00" stroke-miterlimit="10" pointer-events="all"/><path d="M 139.5 490 L 139.5 232.37" fill="none" stroke="#004182" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 139.5 227.12 L 143 234.12 L 139.5 232.37 L 136 234.12 Z" fill="#004182" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><path d="M 1000 155 L 1121.5 276.5 L 1000 398 L 878.5 276.5 Z" fill="#004c99" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(941.5,221.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="117" height="110"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 117px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>Meta Actions<br />Controller<br /></b>&lt;c-meta-actions&gt;<br /><br />On <font color="#ff66b3"><b>setFavorite</b></font> event<br />delete or post article <br />to accounts favorites <br />and emmits <b><font color="#ff66b3">article </font></b></div></div></foreignObject></g><rect x="613" y="341" width="170" height="154" fill="#4d5b69" stroke="#314354" pointer-events="all"/><g transform="translate(635.5,383.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="124" height="68"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 126px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><b>ArticleMeta<br /></b>&lt;m-article-meta&gt;<br /><br />On favorite Heart <font color="#ff66b3"><b>click</b></font> <br />emmits <b><font color="#ff66b3">setFavorite</font></b></div></div></foreignObject></g><path d="M 590.5 418.5 L 613 418" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 856 337 L 866 337 Q 876 337 867.5 337 L 863.25 337 Q 859 337 869 337 L 932.63 337" fill="none" stroke="#004182" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 937.88 337 L 930.88 340.5 L 932.63 337 L 930.88 333.5 Z" fill="#004182" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/><rect x="736" y="276.5" width="120" height="80" rx="12" ry="12" fill="#ffff66" stroke="#cccc00" pointer-events="all"/><g transform="translate(757.5,296.5)"><foreignObject style="overflow:visible;" pointer-events="all" width="76" height="40"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; vertical-align: top; width: 76px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;"><span><font color="#000000">CustomEvent:</font><br /></span><font color="#ff66b3"><b>setFavorite</b></font><br /><font color="#000000">holds article<br /></font></div></div></foreignObject></g><path d="M 345 621 L 345 410 Q 345 400 335 400 L 202 400 Q 192 400 192 390 L 192 282.37" fill="none" stroke="#004182" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 192 277.12 L 195.5 284.12 L 192 282.37 L 188.5 284.12 Z" fill="#004182" stroke="#004182" stroke-miterlimit="10" pointer-events="all"/></g></svg>