carbon-components-angular 5.9.2 → 5.10.0

package/docs/documentation/modules/TagModule/dependencies.svg

@@ -28,14 +28,14 @@
 <title>cluster_TagModule_declarations</title>
 <polygon fill="none" stroke="black" points="224,-78 224,-130 380,-130 380,-78 224,-78"/>
 </g>
-<g id="clust6" class="cluster">
-<title>cluster_TagModule_exports</title>
-<polygon fill="none" stroke="black" points="181,-208 181,-260 341,-260 341,-208 181,-208"/>
-</g>
 <g id="clust5" class="cluster">
 <title>cluster_TagModule_imports</title>
 <polygon fill="none" stroke="black" points="116,-78 116,-130 216,-130 216,-78 116,-78"/>
 </g>
+<g id="clust6" class="cluster">
+<title>cluster_TagModule_exports</title>
+<polygon fill="none" stroke="black" points="181,-208 181,-260 341,-260 341,-208 181,-208"/>
+</g>
 <!-- Tag -->
 <g id="node1" class="node">
 <title>Tag</title>

package/docs/documentation/modules/TagModule.html

@@ -70,14 +70,14 @@
 <title>cluster_TagModule_declarations</title>
 <polygon fill="none" stroke="black" points="224,-78 224,-130 380,-130 380,-78 224,-78"/>
 </g>
-<g id="clust6" class="cluster">
-<title>cluster_TagModule_exports</title>
-<polygon fill="none" stroke="black" points="181,-208 181,-260 341,-260 341,-208 181,-208"/>
-</g>
 <g id="clust5" class="cluster">
 <title>cluster_TagModule_imports</title>
 <polygon fill="none" stroke="black" points="116,-78 116,-130 216,-130 216,-78 116,-78"/>
 </g>
+<g id="clust6" class="cluster">
+<title>cluster_TagModule_exports</title>
+<polygon fill="none" stroke="black" points="181,-208 181,-260 341,-260 341,-208 181,-208"/>
+</g>
 <!-- Tag -->
 <g id="node1" class="node">
 <title>Tag</title>

package/docs/documentation/modules/ThemeModule/dependencies.svg

@@ -24,23 +24,23 @@
 <title>cluster_ThemeModule</title>
 <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="121,-70 121,-268 375,-268 375,-70 121,-70"/>
 </g>
-<g id="clust5" class="cluster">
-<title>cluster_ThemeModule_exports</title>
-<polygon fill="none" stroke="black" points="185,-208 185,-260 311,-260 311,-208 185,-208"/>
+<g id="clust4" class="cluster">
+<title>cluster_ThemeModule_imports</title>
+<polygon fill="none" stroke="black" points="259,-78 259,-130 367,-130 367,-78 259,-78"/>
 </g>
 <g id="clust2" class="cluster">
 <title>cluster_ThemeModule_declarations</title>
-<polygon fill="none" stroke="black" points="245,-78 245,-130 367,-130 367,-78 245,-78"/>
+<polygon fill="none" stroke="black" points="129,-78 129,-130 251,-130 251,-78 129,-78"/>
 </g>
-<g id="clust4" class="cluster">
-<title>cluster_ThemeModule_imports</title>
-<polygon fill="none" stroke="black" points="129,-78 129,-130 237,-130 237,-78 129,-78"/>
+<g id="clust5" class="cluster">
+<title>cluster_ThemeModule_exports</title>
+<polygon fill="none" stroke="black" points="185,-208 185,-260 311,-260 311,-208 185,-208"/>
 </g>
 <!-- ThemeDirective -->
 <g id="node1" class="node">
 <title>ThemeDirective</title>
-<polygon fill="#ffffb3" stroke="black" points="359.46,-122 252.54,-122 252.54,-86 359.46,-86 359.46,-122"/>
-<text text-anchor="middle" x="306" y="-99.8" font-family="Times,serif" font-size="14.00">ThemeDirective</text>
+<polygon fill="#ffffb3" stroke="black" points="243.46,-122 136.54,-122 136.54,-86 243.46,-86 243.46,-122"/>
+<text text-anchor="middle" x="190" y="-99.8" font-family="Times,serif" font-size="14.00">ThemeDirective</text>
 </g>
 <!-- ThemeModule -->
 <g id="node2" class="node">
@@ -51,8 +51,8 @@
 <!-- ThemeDirective&#45;&gt;ThemeModule -->
 <g id="edge1" class="edge">
 <title>ThemeDirective&#45;&gt;ThemeModule</title>
-<path fill="none" stroke="black" d="M274.87,-122.11C274.87,-122.11 274.87,-140.99 274.87,-140.99"/>
-<polygon fill="black" stroke="black" points="271.37,-140.99 274.87,-150.99 278.37,-140.99 271.37,-140.99"/>
+<path fill="none" stroke="black" d="M221.13,-122.11C221.13,-122.11 221.13,-140.99 221.13,-140.99"/>
+<polygon fill="black" stroke="black" points="217.63,-140.99 221.13,-150.99 224.63,-140.99 217.63,-140.99"/>
 </g>
 <!-- ThemeDirective  -->
 <g id="node4" class="node">
@@ -69,14 +69,14 @@
 <!-- LayerModule -->
 <g id="node3" class="node">
 <title>LayerModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="229.19,-122 226.19,-126 205.19,-126 202.19,-122 136.81,-122 136.81,-86 229.19,-86 229.19,-122"/>
-<text text-anchor="middle" x="183" y="-99.8" font-family="Times,serif" font-size="14.00">LayerModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="359.19,-122 356.19,-126 335.19,-126 332.19,-122 266.81,-122 266.81,-86 359.19,-86 359.19,-122"/>
+<text text-anchor="middle" x="313" y="-99.8" font-family="Times,serif" font-size="14.00">LayerModule</text>
 </g>
 <!-- LayerModule&#45;&gt;ThemeModule -->
 <g id="edge2" class="edge">
 <title>LayerModule&#45;&gt;ThemeModule</title>
-<path fill="none" stroke="black" d="M213.94,-122.11C213.94,-122.11 213.94,-140.99 213.94,-140.99"/>
-<polygon fill="black" stroke="black" points="210.44,-140.99 213.94,-150.99 217.44,-140.99 210.44,-140.99"/>
+<path fill="none" stroke="black" d="M282.06,-122.11C282.06,-122.11 282.06,-140.99 282.06,-140.99"/>
+<polygon fill="black" stroke="black" points="278.56,-140.99 282.06,-150.99 285.56,-140.99 278.56,-140.99"/>
 </g>
 </g>
 </svg>

package/docs/documentation/modules/ThemeModule.html

@@ -66,23 +66,23 @@
 <title>cluster_ThemeModule</title>
 <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="121,-70 121,-268 375,-268 375,-70 121,-70"/>
 </g>
-<g id="clust5" class="cluster">
-<title>cluster_ThemeModule_exports</title>
-<polygon fill="none" stroke="black" points="185,-208 185,-260 311,-260 311,-208 185,-208"/>
+<g id="clust4" class="cluster">
+<title>cluster_ThemeModule_imports</title>
+<polygon fill="none" stroke="black" points="259,-78 259,-130 367,-130 367,-78 259,-78"/>
 </g>
 <g id="clust2" class="cluster">
 <title>cluster_ThemeModule_declarations</title>
-<polygon fill="none" stroke="black" points="245,-78 245,-130 367,-130 367,-78 245,-78"/>
+<polygon fill="none" stroke="black" points="129,-78 129,-130 251,-130 251,-78 129,-78"/>
 </g>
-<g id="clust4" class="cluster">
-<title>cluster_ThemeModule_imports</title>
-<polygon fill="none" stroke="black" points="129,-78 129,-130 237,-130 237,-78 129,-78"/>
+<g id="clust5" class="cluster">
+<title>cluster_ThemeModule_exports</title>
+<polygon fill="none" stroke="black" points="185,-208 185,-260 311,-260 311,-208 185,-208"/>
 </g>
 <!-- ThemeDirective -->
 <g id="node1" class="node">
 <title>ThemeDirective</title>
-<polygon fill="#ffffb3" stroke="black" points="359.46,-122 252.54,-122 252.54,-86 359.46,-86 359.46,-122"/>
-<text text-anchor="middle" x="306" y="-99.8" font-family="Times,serif" font-size="14.00">ThemeDirective</text>
+<polygon fill="#ffffb3" stroke="black" points="243.46,-122 136.54,-122 136.54,-86 243.46,-86 243.46,-122"/>
+<text text-anchor="middle" x="190" y="-99.8" font-family="Times,serif" font-size="14.00">ThemeDirective</text>
 </g>
 <!-- ThemeModule -->
 <g id="node2" class="node">
@@ -93,8 +93,8 @@
 <!-- ThemeDirective&#45;&gt;ThemeModule -->
 <g id="edge1" class="edge">
 <title>ThemeDirective&#45;&gt;ThemeModule</title>
-<path fill="none" stroke="black" d="M274.87,-122.11C274.87,-122.11 274.87,-140.99 274.87,-140.99"/>
-<polygon fill="black" stroke="black" points="271.37,-140.99 274.87,-150.99 278.37,-140.99 271.37,-140.99"/>
+<path fill="none" stroke="black" d="M221.13,-122.11C221.13,-122.11 221.13,-140.99 221.13,-140.99"/>
+<polygon fill="black" stroke="black" points="217.63,-140.99 221.13,-150.99 224.63,-140.99 217.63,-140.99"/>
 </g>
 <!-- ThemeDirective  -->
 <g id="node4" class="node">
@@ -111,14 +111,14 @@
 <!-- LayerModule -->
 <g id="node3" class="node">
 <title>LayerModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="229.19,-122 226.19,-126 205.19,-126 202.19,-122 136.81,-122 136.81,-86 229.19,-86 229.19,-122"/>
-<text text-anchor="middle" x="183" y="-99.8" font-family="Times,serif" font-size="14.00">LayerModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="359.19,-122 356.19,-126 335.19,-126 332.19,-122 266.81,-122 266.81,-86 359.19,-86 359.19,-122"/>
+<text text-anchor="middle" x="313" y="-99.8" font-family="Times,serif" font-size="14.00">LayerModule</text>
 </g>
 <!-- LayerModule&#45;&gt;ThemeModule -->
 <g id="edge2" class="edge">
 <title>LayerModule&#45;&gt;ThemeModule</title>
-<path fill="none" stroke="black" d="M213.94,-122.11C213.94,-122.11 213.94,-140.99 213.94,-140.99"/>
-<polygon fill="black" stroke="black" points="210.44,-140.99 213.94,-150.99 217.44,-140.99 210.44,-140.99"/>
+<path fill="none" stroke="black" d="M282.06,-122.11C282.06,-122.11 282.06,-140.99 282.06,-140.99"/>
+<polygon fill="black" stroke="black" points="278.56,-140.99 282.06,-150.99 285.56,-140.99 278.56,-140.99"/>
 </g>
 </g>
 </svg>

package/docs/documentation/modules/TilesModule/dependencies.svg

@@ -4,213 +4,273 @@
 <!-- Generated by graphviz version 2.47.0 (20210316.0004)
  -->
 <!-- Title: dependencies Pages: 1 -->
-<svg width="757pt" height="396pt"
- viewBox="0.00 0.00 757.00 395.59" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="1333pt" height="396pt"
+ viewBox="0.00 0.00 1333.00 395.59" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 391.59)">
 <title>dependencies</title>
-<polygon fill="white" stroke="transparent" points="-4,4 -4,-391.59 753,-391.59 753,4 -4,4"/>
-<text text-anchor="start" x="353.51" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
-<polygon fill="#ffffb3" stroke="transparent" points="140.5,-10 140.5,-30 160.5,-30 160.5,-10 140.5,-10"/>
-<text text-anchor="start" x="164.13" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Declarations</text>
-<polygon fill="#8dd3c7" stroke="transparent" points="253.5,-10 253.5,-30 273.5,-30 273.5,-10 253.5,-10"/>
-<text text-anchor="start" x="277.23" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Module</text>
-<polygon fill="#80b1d3" stroke="transparent" points="339.5,-10 339.5,-30 359.5,-30 359.5,-10 339.5,-10"/>
-<text text-anchor="start" x="363.28" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Bootstrap</text>
-<polygon fill="#fdb462" stroke="transparent" points="436.5,-10 436.5,-30 456.5,-30 456.5,-10 436.5,-10"/>
-<text text-anchor="start" x="460.17" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Providers</text>
-<polygon fill="#fb8072" stroke="transparent" points="532.5,-10 532.5,-30 552.5,-30 552.5,-10 532.5,-10"/>
-<text text-anchor="start" x="556.23" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Exports</text>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-391.59 1329,-391.59 1329,4 -4,4"/>
+<text text-anchor="start" x="641.51" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
+<polygon fill="#ffffb3" stroke="transparent" points="428.5,-10 428.5,-30 448.5,-30 448.5,-10 428.5,-10"/>
+<text text-anchor="start" x="452.13" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Declarations</text>
+<polygon fill="#8dd3c7" stroke="transparent" points="541.5,-10 541.5,-30 561.5,-30 561.5,-10 541.5,-10"/>
+<text text-anchor="start" x="565.23" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Module</text>
+<polygon fill="#80b1d3" stroke="transparent" points="627.5,-10 627.5,-30 647.5,-30 647.5,-10 627.5,-10"/>
+<text text-anchor="start" x="651.28" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Bootstrap</text>
+<polygon fill="#fdb462" stroke="transparent" points="724.5,-10 724.5,-30 744.5,-30 744.5,-10 724.5,-10"/>
+<text text-anchor="start" x="748.17" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Providers</text>
+<polygon fill="#fb8072" stroke="transparent" points="820.5,-10 820.5,-30 840.5,-30 840.5,-10 820.5,-10"/>
+<text text-anchor="start" x="844.23" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Exports</text>
 <g id="clust1" class="cluster">
 <title>cluster_TilesModule</title>
-<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-379.59 741,-379.59 741,-70 8,-70"/>
-</g>
-<g id="clust8" class="cluster">
-<title>cluster_TilesModule_imports</title>
-<polygon fill="none" stroke="black" points="527,-189.59 527,-241.59 733,-241.59 733,-189.59 527,-189.59"/>
-</g>
-<g id="clust9" class="cluster">
-<title>cluster_TilesModule_exports</title>
-<polygon fill="none" stroke="black" points="126,-319.59 126,-371.59 644,-371.59 644,-319.59 126,-319.59"/>
+<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-379.59 1317,-379.59 1317,-70 8,-70"/>
 </g>
 <g id="clust2" class="cluster">
 <title>cluster_TilesModule_declarations</title>
-<polygon fill="none" stroke="black" points="16,-189.59 16,-241.59 519,-241.59 519,-189.59 16,-189.59"/>
+<polygon fill="none" stroke="black" points="332,-189.59 332,-241.59 1309,-241.59 1309,-189.59 332,-189.59"/>
 </g>
-<g id="clust7" class="cluster">
+<g id="clust9" class="cluster">
 <title>cluster_TilesModule_TileGroup_providers</title>
-<polygon fill="none" stroke="black" points="16,-78 16,-176.59 652,-176.59 652,-78 16,-78"/>
+<polygon fill="none" stroke="black" points="59,-78 59,-176.59 695,-176.59 695,-78 59,-78"/>
+</g>
+<g id="clust11" class="cluster">
+<title>cluster_TilesModule_exports</title>
+<polygon fill="none" stroke="black" points="105,-319.59 105,-371.59 1105,-371.59 1105,-319.59 105,-319.59"/>
+</g>
+<g id="clust10" class="cluster">
+<title>cluster_TilesModule_imports</title>
+<polygon fill="none" stroke="black" points="16,-189.59 16,-241.59 324,-241.59 324,-189.59 16,-189.59"/>
 </g>
 <!-- ClickableTile -->
 <g id="node1" class="node">
 <title>ClickableTile</title>
-<polygon fill="#ffffb3" stroke="black" points="511.2,-233.59 418.8,-233.59 418.8,-197.59 511.2,-197.59 511.2,-233.59"/>
-<text text-anchor="middle" x="465" y="-211.39" font-family="Times,serif" font-size="14.00">ClickableTile</text>
+<polygon fill="#ffffb3" stroke="black" points="1301.2,-233.59 1208.8,-233.59 1208.8,-197.59 1301.2,-197.59 1301.2,-233.59"/>
+<text text-anchor="middle" x="1255" y="-211.39" font-family="Times,serif" font-size="14.00">ClickableTile</text>
 </g>
 <!-- TilesModule -->
-<g id="node6" class="node">
+<g id="node8" class="node">
 <title>TilesModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="392.54,-298.59 389.54,-302.59 368.54,-302.59 365.54,-298.59 305.46,-298.59 305.46,-262.59 392.54,-262.59 392.54,-298.59"/>
-<text text-anchor="middle" x="349" y="-276.39" font-family="Times,serif" font-size="14.00">TilesModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="547.54,-298.59 544.54,-302.59 523.54,-302.59 520.54,-298.59 460.46,-298.59 460.46,-262.59 547.54,-262.59 547.54,-298.59"/>
+<text text-anchor="middle" x="504" y="-276.39" font-family="Times,serif" font-size="14.00">TilesModule</text>
 </g>
 <!-- ClickableTile&#45;&gt;TilesModule -->
 <g id="edge1" class="edge">
 <title>ClickableTile&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M480.37,-233.83C480.37,-249.16 480.37,-268.59 480.37,-268.59 480.37,-268.59 402.74,-268.59 402.74,-268.59"/>
-<polygon fill="black" stroke="black" points="402.74,-265.09 392.74,-268.59 402.74,-272.09 402.74,-265.09"/>
+<path fill="none" stroke="black" d="M1255,-233.7C1255,-252.93 1255,-280.59 1255,-280.59 1255,-280.59 557.62,-280.59 557.62,-280.59"/>
+<polygon fill="black" stroke="black" points="557.62,-277.09 547.62,-280.59 557.62,-284.09 557.62,-277.09"/>
 </g>
 <!-- ExpandableTile -->
 <g id="node2" class="node">
 <title>ExpandableTile</title>
-<polygon fill="#ffffb3" stroke="black" points="401.14,-233.59 296.86,-233.59 296.86,-197.59 401.14,-197.59 401.14,-233.59"/>
-<text text-anchor="middle" x="349" y="-211.39" font-family="Times,serif" font-size="14.00">ExpandableTile</text>
+<polygon fill="#ffffb3" stroke="black" points="1191.14,-233.59 1086.86,-233.59 1086.86,-197.59 1191.14,-197.59 1191.14,-233.59"/>
+<text text-anchor="middle" x="1139" y="-211.39" font-family="Times,serif" font-size="14.00">ExpandableTile</text>
 </g>
 <!-- ExpandableTile&#45;&gt;TilesModule -->
 <g id="edge2" class="edge">
 <title>ExpandableTile&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M349,-233.7C349,-233.7 349,-252.58 349,-252.58"/>
-<polygon fill="black" stroke="black" points="345.5,-252.58 349,-262.58 352.5,-252.58 345.5,-252.58"/>
+<path fill="none" stroke="black" d="M1091.77,-233.89C1091.77,-251.86 1091.77,-276.59 1091.77,-276.59 1091.77,-276.59 557.7,-276.59 557.7,-276.59"/>
+<polygon fill="black" stroke="black" points="557.7,-273.09 547.7,-276.59 557.7,-280.09 557.7,-273.09"/>
 </g>
-<!-- SelectionTile -->
+<!-- ExpandableTileAboveFoldDirective -->
 <g id="node3" class="node">
+<title>ExpandableTileAboveFoldDirective</title>
+<polygon fill="#ffffb3" stroke="black" points="1068.71,-233.59 849.29,-233.59 849.29,-197.59 1068.71,-197.59 1068.71,-233.59"/>
+<text text-anchor="middle" x="959" y="-211.39" font-family="Times,serif" font-size="14.00">ExpandableTileAboveFoldDirective</text>
+</g>
+<!-- ExpandableTileAboveFoldDirective&#45;&gt;TilesModule -->
+<g id="edge3" class="edge">
+<title>ExpandableTileAboveFoldDirective&#45;&gt;TilesModule</title>
+<path fill="none" stroke="black" d="M852.88,-233.62C852.88,-249.99 852.88,-271.59 852.88,-271.59 852.88,-271.59 557.83,-271.59 557.83,-271.59"/>
+<polygon fill="black" stroke="black" points="557.83,-268.09 547.83,-271.59 557.83,-275.09 557.83,-268.09"/>
+</g>
+<!-- ExpandableTileBelowFoldDirective -->
+<g id="node4" class="node">
+<title>ExpandableTileBelowFoldDirective</title>
+<polygon fill="#ffffb3" stroke="black" points="831.44,-233.59 612.56,-233.59 612.56,-197.59 831.44,-197.59 831.44,-233.59"/>
+<text text-anchor="middle" x="722" y="-211.39" font-family="Times,serif" font-size="14.00">ExpandableTileBelowFoldDirective</text>
+</g>
+<!-- ExpandableTileBelowFoldDirective&#45;&gt;TilesModule -->
+<g id="edge4" class="edge">
+<title>ExpandableTileBelowFoldDirective&#45;&gt;TilesModule</title>
+<path fill="none" stroke="black" d="M624.31,-233.78C624.31,-248.77 624.31,-267.59 624.31,-267.59 624.31,-267.59 557.77,-267.59 557.77,-267.59"/>
+<polygon fill="black" stroke="black" points="557.77,-264.09 547.77,-267.59 557.77,-271.09 557.77,-264.09"/>
+</g>
+<!-- SelectionTile -->
+<g id="node5" class="node">
 <title>SelectionTile</title>
-<polygon fill="#ffffb3" stroke="black" points="278.15,-233.59 187.85,-233.59 187.85,-197.59 278.15,-197.59 278.15,-233.59"/>
-<text text-anchor="middle" x="233" y="-211.39" font-family="Times,serif" font-size="14.00">SelectionTile</text>
+<polygon fill="#ffffb3" stroke="black" points="594.15,-233.59 503.85,-233.59 503.85,-197.59 594.15,-197.59 594.15,-233.59"/>
+<text text-anchor="middle" x="549" y="-211.39" font-family="Times,serif" font-size="14.00">SelectionTile</text>
 </g>
 <!-- SelectionTile&#45;&gt;TilesModule -->
-<g id="edge3" class="edge">
+<g id="edge5" class="edge">
 <title>SelectionTile&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M246.11,-233.83C246.11,-249.16 246.11,-268.59 246.11,-268.59 246.11,-268.59 295.36,-268.59 295.36,-268.59"/>
-<polygon fill="black" stroke="black" points="295.36,-272.09 305.36,-268.59 295.36,-265.09 295.36,-272.09"/>
+<path fill="none" stroke="black" d="M525.72,-233.7C525.72,-233.7 525.72,-252.58 525.72,-252.58"/>
+<polygon fill="black" stroke="black" points="522.22,-252.58 525.72,-262.58 529.22,-252.58 522.22,-252.58"/>
 </g>
 <!-- Tile -->
-<g id="node4" class="node">
+<g id="node6" class="node">
 <title>Tile</title>
-<polygon fill="#ffffb3" stroke="black" points="170,-233.59 116,-233.59 116,-197.59 170,-197.59 170,-233.59"/>
-<text text-anchor="middle" x="143" y="-211.39" font-family="Times,serif" font-size="14.00">Tile</text>
+<polygon fill="#ffffb3" stroke="black" points="486,-233.59 432,-233.59 432,-197.59 486,-197.59 486,-233.59"/>
+<text text-anchor="middle" x="459" y="-211.39" font-family="Times,serif" font-size="14.00">Tile</text>
 </g>
 <!-- Tile&#45;&gt;TilesModule -->
-<g id="edge4" class="edge">
+<g id="edge6" class="edge">
 <title>Tile&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M152.05,-233.61C152.05,-250.96 152.05,-274.59 152.05,-274.59 152.05,-274.59 295.29,-274.59 295.29,-274.59"/>
-<polygon fill="black" stroke="black" points="295.29,-278.09 305.29,-274.59 295.29,-271.09 295.29,-278.09"/>
+<path fill="none" stroke="black" d="M473.11,-233.7C473.11,-233.7 473.11,-252.58 473.11,-252.58"/>
+<polygon fill="black" stroke="black" points="469.61,-252.58 473.11,-262.58 476.61,-252.58 469.61,-252.58"/>
 </g>
 <!-- TileGroup -->
-<g id="node5" class="node">
+<g id="node7" class="node">
 <title>TileGroup</title>
-<polygon fill="#ffffb3" stroke="black" points="98.32,-233.59 23.68,-233.59 23.68,-197.59 98.32,-197.59 98.32,-233.59"/>
-<text text-anchor="middle" x="61" y="-211.39" font-family="Times,serif" font-size="14.00">TileGroup</text>
+<polygon fill="#ffffb3" stroke="black" points="414.32,-233.59 339.68,-233.59 339.68,-197.59 414.32,-197.59 414.32,-233.59"/>
+<text text-anchor="middle" x="377" y="-211.39" font-family="Times,serif" font-size="14.00">TileGroup</text>
 </g>
 <!-- TileGroup&#45;&gt;TilesModule -->
-<g id="edge5" class="edge">
+<g id="edge7" class="edge">
 <title>TileGroup&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M61,-233.7C61,-252.93 61,-280.59 61,-280.59 61,-280.59 295.26,-280.59 295.26,-280.59"/>
-<polygon fill="black" stroke="black" points="295.26,-284.09 305.26,-280.59 295.26,-277.09 295.26,-284.09"/>
+<path fill="none" stroke="black" d="M403.47,-233.78C403.47,-248.77 403.47,-267.59 403.47,-267.59 403.47,-267.59 450.2,-267.59 450.2,-267.59"/>
+<polygon fill="black" stroke="black" points="450.2,-271.09 460.2,-267.59 450.2,-264.09 450.2,-271.09"/>
 </g>
 <!-- ClickableTile  -->
-<g id="node10" class="node">
+<g id="node13" class="node">
 <title>ClickableTile </title>
-<polygon fill="#fb8072" stroke="black" points="635.7,-363.59 540.3,-363.59 540.3,-327.59 635.7,-327.59 635.7,-363.59"/>
-<text text-anchor="middle" x="588" y="-341.39" font-family="Times,serif" font-size="14.00">ClickableTile </text>
+<polygon fill="#fb8072" stroke="black" points="1096.7,-363.59 1001.3,-363.59 1001.3,-327.59 1096.7,-327.59 1096.7,-363.59"/>
+<text text-anchor="middle" x="1049" y="-341.39" font-family="Times,serif" font-size="14.00">ClickableTile </text>
 </g>
 <!-- TilesModule&#45;&gt;ClickableTile  -->
-<g id="edge9" class="edge">
+<g id="edge12" class="edge">
 <title>TilesModule&#45;&gt;ClickableTile </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M392.61,-286.59C456.26,-286.59 567.1,-286.59 567.1,-286.59 567.1,-286.59 567.1,-317.57 567.1,-317.57"/>
-<polygon fill="black" stroke="black" points="563.6,-317.57 567.1,-327.57 570.6,-317.57 563.6,-317.57"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M547.91,-285.59C675.13,-285.59 1035,-285.59 1035,-285.59 1035,-285.59 1035,-317.59 1035,-317.59"/>
+<polygon fill="black" stroke="black" points="1031.5,-317.59 1035,-327.59 1038.5,-317.59 1031.5,-317.59"/>
 </g>
 <!-- ExpandableTile  -->
-<g id="node11" class="node">
+<g id="node14" class="node">
 <title>ExpandableTile </title>
-<polygon fill="#fb8072" stroke="black" points="522.14,-363.59 413.86,-363.59 413.86,-327.59 522.14,-327.59 522.14,-363.59"/>
-<text text-anchor="middle" x="468" y="-341.39" font-family="Times,serif" font-size="14.00">ExpandableTile </text>
+<polygon fill="#fb8072" stroke="black" points="983.14,-363.59 874.86,-363.59 874.86,-327.59 983.14,-327.59 983.14,-363.59"/>
+<text text-anchor="middle" x="929" y="-341.39" font-family="Times,serif" font-size="14.00">ExpandableTile </text>
 </g>
 <!-- TilesModule&#45;&gt;ExpandableTile  -->
-<g id="edge10" class="edge">
+<g id="edge13" class="edge">
 <title>TilesModule&#45;&gt;ExpandableTile </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M392.55,-292.59C419.75,-292.59 449.63,-292.59 449.63,-292.59 449.63,-292.59 449.63,-317.35 449.63,-317.35"/>
-<polygon fill="black" stroke="black" points="446.13,-317.35 449.63,-327.35 453.13,-317.35 446.13,-317.35"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M547.88,-289.59C656.47,-289.59 929,-289.59 929,-289.59 929,-289.59 929,-317.56 929,-317.56"/>
+<polygon fill="black" stroke="black" points="925.5,-317.56 929,-327.56 932.5,-317.56 925.5,-317.56"/>
+</g>
+<!-- ExpandableTileAboveFoldDirective  -->
+<g id="node15" class="node">
+<title>ExpandableTileAboveFoldDirective </title>
+<polygon fill="#fb8072" stroke="black" points="856.71,-363.59 633.29,-363.59 633.29,-327.59 856.71,-327.59 856.71,-363.59"/>
+<text text-anchor="middle" x="745" y="-341.39" font-family="Times,serif" font-size="14.00">ExpandableTileAboveFoldDirective </text>
+</g>
+<!-- TilesModule&#45;&gt;ExpandableTileAboveFoldDirective  -->
+<g id="edge14" class="edge">
+<title>TilesModule&#45;&gt;ExpandableTileAboveFoldDirective </title>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M547.77,-294.59C614.1,-294.59 732.43,-294.59 732.43,-294.59 732.43,-294.59 732.43,-317.47 732.43,-317.47"/>
+<polygon fill="black" stroke="black" points="728.93,-317.47 732.43,-327.47 735.93,-317.47 728.93,-317.47"/>
+</g>
+<!-- ExpandableTileBelowFoldDirective  -->
+<g id="node16" class="node">
+<title>ExpandableTileBelowFoldDirective </title>
+<polygon fill="#fb8072" stroke="black" points="615.44,-363.59 392.56,-363.59 392.56,-327.59 615.44,-327.59 615.44,-363.59"/>
+<text text-anchor="middle" x="504" y="-341.39" font-family="Times,serif" font-size="14.00">ExpandableTileBelowFoldDirective </text>
+</g>
+<!-- TilesModule&#45;&gt;ExpandableTileBelowFoldDirective  -->
+<g id="edge15" class="edge">
+<title>TilesModule&#45;&gt;ExpandableTileBelowFoldDirective </title>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M504,-298.7C504,-298.7 504,-317.58 504,-317.58"/>
+<polygon fill="black" stroke="black" points="500.5,-317.58 504,-327.58 507.5,-317.58 500.5,-317.58"/>
 </g>
 <!-- SelectionTile  -->
-<g id="node12" class="node">
+<g id="node17" class="node">
 <title>SelectionTile </title>
-<polygon fill="#fb8072" stroke="black" points="396.15,-363.59 301.85,-363.59 301.85,-327.59 396.15,-327.59 396.15,-363.59"/>
-<text text-anchor="middle" x="349" y="-341.39" font-family="Times,serif" font-size="14.00">SelectionTile </text>
+<polygon fill="#fb8072" stroke="black" points="375.15,-363.59 280.85,-363.59 280.85,-327.59 375.15,-327.59 375.15,-363.59"/>
+<text text-anchor="middle" x="328" y="-341.39" font-family="Times,serif" font-size="14.00">SelectionTile </text>
 </g>
 <!-- TilesModule&#45;&gt;SelectionTile  -->
-<g id="edge11" class="edge">
+<g id="edge16" class="edge">
 <title>TilesModule&#45;&gt;SelectionTile </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M349,-298.7C349,-298.7 349,-317.58 349,-317.58"/>
-<polygon fill="black" stroke="black" points="345.5,-317.58 349,-327.58 352.5,-317.58 345.5,-317.58"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M460.43,-294.59C417.23,-294.59 357.46,-294.59 357.46,-294.59 357.46,-294.59 357.46,-317.47 357.46,-317.47"/>
+<polygon fill="black" stroke="black" points="353.96,-317.47 357.46,-327.47 360.96,-317.47 353.96,-317.47"/>
 </g>
 <!-- Tile  -->
-<g id="node13" class="node">
+<g id="node18" class="node">
 <title>Tile </title>
-<polygon fill="#fb8072" stroke="black" points="284,-363.59 230,-363.59 230,-327.59 284,-327.59 284,-363.59"/>
-<text text-anchor="middle" x="257" y="-341.39" font-family="Times,serif" font-size="14.00">Tile </text>
+<polygon fill="#fb8072" stroke="black" points="263,-363.59 209,-363.59 209,-327.59 263,-327.59 263,-363.59"/>
+<text text-anchor="middle" x="236" y="-341.39" font-family="Times,serif" font-size="14.00">Tile </text>
 </g>
 <!-- TilesModule&#45;&gt;Tile  -->
-<g id="edge12" class="edge">
+<g id="edge17" class="edge">
 <title>TilesModule&#45;&gt;Tile </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M305.35,-292.59C283.74,-292.59 262.22,-292.59 262.22,-292.59 262.22,-292.59 262.22,-317.35 262.22,-317.35"/>
-<polygon fill="black" stroke="black" points="258.72,-317.35 262.22,-327.35 265.72,-317.35 258.72,-317.35"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M460.35,-289.59C386.94,-289.59 246.7,-289.59 246.7,-289.59 246.7,-289.59 246.7,-317.56 246.7,-317.56"/>
+<polygon fill="black" stroke="black" points="243.2,-317.56 246.7,-327.56 250.2,-317.56 243.2,-317.56"/>
 </g>
 <!-- TileGroup  -->
-<g id="node14" class="node">
+<g id="node19" class="node">
 <title>TileGroup </title>
-<polygon fill="#fb8072" stroke="black" points="211.82,-363.59 134.18,-363.59 134.18,-327.59 211.82,-327.59 211.82,-363.59"/>
-<text text-anchor="middle" x="173" y="-341.39" font-family="Times,serif" font-size="14.00">TileGroup </text>
+<polygon fill="#fb8072" stroke="black" points="190.82,-363.59 113.18,-363.59 113.18,-327.59 190.82,-327.59 190.82,-363.59"/>
+<text text-anchor="middle" x="152" y="-341.39" font-family="Times,serif" font-size="14.00">TileGroup </text>
 </g>
 <!-- TilesModule&#45;&gt;TileGroup  -->
-<g id="edge13" class="edge">
+<g id="edge18" class="edge">
 <title>TilesModule&#45;&gt;TileGroup </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M305.44,-286.59C261.4,-286.59 199.79,-286.59 199.79,-286.59 199.79,-286.59 199.79,-317.57 199.79,-317.57"/>
-<polygon fill="black" stroke="black" points="196.29,-317.57 199.79,-327.57 203.29,-317.57 196.29,-317.57"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M460.35,-285.59C367.61,-285.59 159.35,-285.59 159.35,-285.59 159.35,-285.59 159.35,-317.59 159.35,-317.59"/>
+<polygon fill="black" stroke="black" points="155.85,-317.59 159.35,-327.59 162.85,-317.59 155.85,-317.59"/>
 </g>
 <!-- {
  &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: TileGroup, multi: true
 } -->
-<g id="node7" class="node">
+<g id="node9" class="node">
 <title>{
  &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: TileGroup, multi: true
 }</title>
-<ellipse fill="#fdb462" stroke="black" cx="334" cy="-127.3" rx="309.77" ry="41.09"/>
-<text text-anchor="middle" x="334" y="-139.9" font-family="Times,serif" font-size="14.00">{</text>
-<text text-anchor="middle" x="334" y="-123.1" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: TileGroup, multi: true</text>
-<text text-anchor="middle" x="334" y="-106.3" font-family="Times,serif" font-size="14.00">}</text>
+<ellipse fill="#fdb462" stroke="black" cx="377" cy="-127.3" rx="309.77" ry="41.09"/>
+<text text-anchor="middle" x="377" y="-139.9" font-family="Times,serif" font-size="14.00">{</text>
+<text text-anchor="middle" x="377" y="-123.1" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: TileGroup, multi: true</text>
+<text text-anchor="middle" x="377" y="-106.3" font-family="Times,serif" font-size="14.00">}</text>
 </g>
 <!-- {
  &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: TileGroup, multi: true
 }&#45;&gt;TileGroup -->
-<g id="edge6" class="edge">
+<g id="edge8" class="edge">
 <title>{
  &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: TileGroup, multi: true
 }&#45;&gt;TileGroup</title>
-<path fill="none" stroke="black" d="M61.26,-146.89C61.26,-146.89 61.26,-187.55 61.26,-187.55"/>
-<polygon fill="black" stroke="black" points="57.76,-187.55 61.26,-197.55 64.76,-187.55 57.76,-187.55"/>
+<path fill="none" stroke="black" d="M377,-168.6C377,-168.6 377,-187.26 377,-187.26"/>
+<polygon fill="black" stroke="black" points="373.5,-187.26 377,-197.26 380.5,-187.26 373.5,-187.26"/>
 </g>
 <!-- I18nModule -->
-<g id="node8" class="node">
+<g id="node10" class="node">
 <title>I18nModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="724.71,-233.59 721.71,-237.59 700.71,-237.59 697.71,-233.59 639.29,-233.59 639.29,-197.59 724.71,-197.59 724.71,-233.59"/>
-<text text-anchor="middle" x="682" y="-211.39" font-family="Times,serif" font-size="14.00">I18nModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="315.71,-233.59 312.71,-237.59 291.71,-237.59 288.71,-233.59 230.29,-233.59 230.29,-197.59 315.71,-197.59 315.71,-233.59"/>
+<text text-anchor="middle" x="273" y="-211.39" font-family="Times,serif" font-size="14.00">I18nModule</text>
 </g>
 <!-- I18nModule&#45;&gt;TilesModule -->
-<g id="edge7" class="edge">
+<g id="edge9" class="edge">
 <title>I18nModule&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M682,-233.7C682,-252.93 682,-280.59 682,-280.59 682,-280.59 402.88,-280.59 402.88,-280.59"/>
-<polygon fill="black" stroke="black" points="402.88,-277.09 392.88,-280.59 402.88,-284.09 402.88,-277.09"/>
+<path fill="none" stroke="black" d="M298.27,-233.62C298.27,-249.99 298.27,-271.59 298.27,-271.59 298.27,-271.59 450.37,-271.59 450.37,-271.59"/>
+<polygon fill="black" stroke="black" points="450.37,-275.09 460.37,-271.59 450.37,-268.09 450.37,-275.09"/>
+</g>
+<!-- IconModule -->
+<g id="node11" class="node">
+<title>IconModule</title>
+<polygon fill="#8dd3c7" stroke="black" points="212.43,-233.59 209.43,-237.59 188.43,-237.59 185.43,-233.59 127.57,-233.59 127.57,-197.59 212.43,-197.59 212.43,-233.59"/>
+<text text-anchor="middle" x="170" y="-211.39" font-family="Times,serif" font-size="14.00">IconModule</text>
+</g>
+<!-- IconModule&#45;&gt;TilesModule -->
+<g id="edge10" class="edge">
+<title>IconModule&#45;&gt;TilesModule</title>
+<path fill="none" stroke="black" d="M199.95,-233.89C199.95,-251.86 199.95,-276.59 199.95,-276.59 199.95,-276.59 450.44,-276.59 450.44,-276.59"/>
+<polygon fill="black" stroke="black" points="450.44,-280.09 460.44,-276.59 450.44,-273.09 450.44,-280.09"/>
 </g>
 <!-- LinkModule -->
-<g id="node9" class="node">
+<g id="node12" class="node">
 <title>LinkModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="620.99,-233.59 617.99,-237.59 596.99,-237.59 593.99,-233.59 535.01,-233.59 535.01,-197.59 620.99,-197.59 620.99,-233.59"/>
-<text text-anchor="middle" x="578" y="-211.39" font-family="Times,serif" font-size="14.00">LinkModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="109.99,-233.59 106.99,-237.59 85.99,-237.59 82.99,-233.59 24.01,-233.59 24.01,-197.59 109.99,-197.59 109.99,-233.59"/>
+<text text-anchor="middle" x="67" y="-211.39" font-family="Times,serif" font-size="14.00">LinkModule</text>
 </g>
 <!-- LinkModule&#45;&gt;TilesModule -->
-<g id="edge8" class="edge">
+<g id="edge11" class="edge">
 <title>LinkModule&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M594.05,-233.61C594.05,-250.96 594.05,-274.59 594.05,-274.59 594.05,-274.59 402.81,-274.59 402.81,-274.59"/>
-<polygon fill="black" stroke="black" points="402.81,-271.09 392.81,-274.59 402.81,-278.09 402.81,-271.09"/>
+<path fill="none" stroke="black" d="M67,-233.7C67,-252.93 67,-280.59 67,-280.59 67,-280.59 450.1,-280.59 450.1,-280.59"/>
+<polygon fill="black" stroke="black" points="450.1,-284.09 460.1,-280.59 450.1,-277.09 450.1,-284.09"/>
 </g>
 </g>
 </svg>