carbon-components-angular 5.50.0 → 5.52.0

package/docs/documentation/modules/TilesModule.html

@@ -97,273 +97,297 @@
 <!-- Generated by graphviz version 2.47.0 (20210316.0004)
  -->
 <!-- Title: dependencies Pages: 1 -->
-<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">
+<svg width="2073pt" height="396pt"
+ viewBox="0.00 0.00 2073.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 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>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-391.59 2069,-391.59 2069,4 -4,4"/>
+<text text-anchor="start" x="1011.51" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
+<polygon fill="#ffffb3" stroke="transparent" points="798.5,-10 798.5,-30 818.5,-30 818.5,-10 798.5,-10"/>
+<text text-anchor="start" x="822.13" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Declarations</text>
+<polygon fill="#8dd3c7" stroke="transparent" points="911.5,-10 911.5,-30 931.5,-30 931.5,-10 911.5,-10"/>
+<text text-anchor="start" x="935.23" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Module</text>
+<polygon fill="#80b1d3" stroke="transparent" points="997.5,-10 997.5,-30 1017.5,-30 1017.5,-10 997.5,-10"/>
+<text text-anchor="start" x="1021.28" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Bootstrap</text>
+<polygon fill="#fdb462" stroke="transparent" points="1094.5,-10 1094.5,-30 1114.5,-30 1114.5,-10 1094.5,-10"/>
+<text text-anchor="start" x="1118.17" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Providers</text>
+<polygon fill="#fb8072" stroke="transparent" points="1190.5,-10 1190.5,-30 1210.5,-30 1210.5,-10 1190.5,-10"/>
+<text text-anchor="start" x="1214.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 1317,-379.59 1317,-70 8,-70"/>
+<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-379.59 2057,-379.59 2057,-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 993,-241.59 993,-189.59 16,-189.59"/>
+<g id="clust10" class="cluster">
+<title>cluster_TilesModule_TileGroup_providers</title>
+<polygon fill="none" stroke="black" points="1413,-78 1413,-241.59 2049,-241.59 2049,-78 1413,-78"/>
 </g>
-<g id="clust11" class="cluster">
+<g id="clust12" class="cluster">
 <title>cluster_TilesModule_exports</title>
-<polygon fill="none" stroke="black" points="276,-319.59 276,-371.59 1276,-371.59 1276,-319.59 276,-319.59"/>
+<polygon fill="none" stroke="black" points="367,-319.59 367,-371.59 1557,-371.59 1557,-319.59 367,-319.59"/>
 </g>
-<g id="clust10" class="cluster">
+<g id="clust11" class="cluster">
 <title>cluster_TilesModule_imports</title>
-<polygon fill="none" stroke="black" points="1001,-189.59 1001,-241.59 1309,-241.59 1309,-189.59 1001,-189.59"/>
+<polygon fill="none" stroke="black" points="1097,-189.59 1097,-241.59 1405,-241.59 1405,-189.59 1097,-189.59"/>
 </g>
-<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"/>
+<g id="clust2" class="cluster">
+<title>cluster_TilesModule_declarations</title>
+<polygon fill="none" stroke="black" points="16,-189.59 16,-241.59 1089,-241.59 1089,-189.59 16,-189.59"/>
 </g>
 <!-- ClickableTile -->
 <g id="node1" class="node">
 <title>ClickableTile</title>
-<polygon fill="#ffffb3" stroke="black" points="985.2,-233.59 892.8,-233.59 892.8,-197.59 985.2,-197.59 985.2,-233.59"/>
-<text text-anchor="middle" x="939" y="-211.39" font-family="Times,serif" font-size="14.00">ClickableTile</text>
+<polygon fill="#ffffb3" stroke="black" points="1081.2,-233.59 988.8,-233.59 988.8,-197.59 1081.2,-197.59 1081.2,-233.59"/>
+<text text-anchor="middle" x="1035" y="-211.39" font-family="Times,serif" font-size="14.00">ClickableTile</text>
 </g>
 <!-- TilesModule -->
-<g id="node8" class="node">
+<g id="node9" class="node">
 <title>TilesModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="718.54,-298.59 715.54,-302.59 694.54,-302.59 691.54,-298.59 631.46,-298.59 631.46,-262.59 718.54,-262.59 718.54,-298.59"/>
-<text text-anchor="middle" x="675" y="-276.39" font-family="Times,serif" font-size="14.00">TilesModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="929.54,-298.59 926.54,-302.59 905.54,-302.59 902.54,-298.59 842.46,-298.59 842.46,-262.59 929.54,-262.59 929.54,-298.59"/>
+<text text-anchor="middle" x="886" 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="M939,-233.6C939,-249.64 939,-270.59 939,-270.59 939,-270.59 728.59,-270.59 728.59,-270.59"/>
-<polygon fill="black" stroke="black" points="728.59,-267.09 718.59,-270.59 728.59,-274.09 728.59,-267.09"/>
+<path fill="none" stroke="black" d="M1035,-233.71C1035,-248.37 1035,-266.59 1035,-266.59 1035,-266.59 939.9,-266.59 939.9,-266.59"/>
+<polygon fill="black" stroke="black" points="939.9,-263.09 929.9,-266.59 939.9,-270.09 939.9,-263.09"/>
 </g>
-<!-- ExpandableTile -->
+<!-- ClickableTileIconDirective -->
 <g id="node2" class="node">
+<title>ClickableTileIconDirective</title>
+<polygon fill="#ffffb3" stroke="black" points="970.66,-233.59 801.34,-233.59 801.34,-197.59 970.66,-197.59 970.66,-233.59"/>
+<text text-anchor="middle" x="886" y="-211.39" font-family="Times,serif" font-size="14.00">ClickableTileIconDirective</text>
+</g>
+<!-- ClickableTileIconDirective&#45;&gt;TilesModule -->
+<g id="edge2" class="edge">
+<title>ClickableTileIconDirective&#45;&gt;TilesModule</title>
+<path fill="none" stroke="black" d="M886,-233.7C886,-233.7 886,-252.58 886,-252.58"/>
+<polygon fill="black" stroke="black" points="882.5,-252.58 886,-262.58 889.5,-252.58 882.5,-252.58"/>
+</g>
+<!-- ExpandableTile -->
+<g id="node3" class="node">
 <title>ExpandableTile</title>
-<polygon fill="#ffffb3" stroke="black" points="875.14,-233.59 770.86,-233.59 770.86,-197.59 875.14,-197.59 875.14,-233.59"/>
-<text text-anchor="middle" x="823" y="-211.39" font-family="Times,serif" font-size="14.00">ExpandableTile</text>
+<polygon fill="#ffffb3" stroke="black" points="783.14,-233.59 678.86,-233.59 678.86,-197.59 783.14,-197.59 783.14,-233.59"/>
+<text text-anchor="middle" x="731" y="-211.39" font-family="Times,serif" font-size="14.00">ExpandableTile</text>
 </g>
 <!-- ExpandableTile&#45;&gt;TilesModule -->
-<g id="edge2" class="edge">
+<g id="edge3" class="edge">
 <title>ExpandableTile&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M778.45,-233.71C778.45,-248.37 778.45,-266.59 778.45,-266.59 778.45,-266.59 728.57,-266.59 728.57,-266.59"/>
-<polygon fill="black" stroke="black" points="728.57,-263.09 718.57,-266.59 728.57,-270.09 728.57,-263.09"/>
+<path fill="none" stroke="black" d="M731,-233.71C731,-248.37 731,-266.59 731,-266.59 731,-266.59 832.41,-266.59 832.41,-266.59"/>
+<polygon fill="black" stroke="black" points="832.41,-270.09 842.41,-266.59 832.41,-263.09 832.41,-270.09"/>
 </g>
 <!-- ExpandableTileAboveFoldDirective -->
-<g id="node3" class="node">
+<g id="node4" class="node">
 <title>ExpandableTileAboveFoldDirective</title>
-<polygon fill="#ffffb3" stroke="black" points="752.71,-233.59 533.29,-233.59 533.29,-197.59 752.71,-197.59 752.71,-233.59"/>
-<text text-anchor="middle" x="643" y="-211.39" font-family="Times,serif" font-size="14.00">ExpandableTileAboveFoldDirective</text>
+<polygon fill="#ffffb3" stroke="black" points="660.71,-233.59 441.29,-233.59 441.29,-197.59 660.71,-197.59 660.71,-233.59"/>
+<text text-anchor="middle" x="551" y="-211.39" font-family="Times,serif" font-size="14.00">ExpandableTileAboveFoldDirective</text>
 </g>
 <!-- ExpandableTileAboveFoldDirective&#45;&gt;TilesModule -->
-<g id="edge3" class="edge">
+<g id="edge4" class="edge">
 <title>ExpandableTileAboveFoldDirective&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M675,-233.7C675,-233.7 675,-252.58 675,-252.58"/>
-<polygon fill="black" stroke="black" points="671.5,-252.58 675,-262.58 678.5,-252.58 671.5,-252.58"/>
+<path fill="none" stroke="black" d="M645.93,-233.6C645.93,-249.64 645.93,-270.59 645.93,-270.59 645.93,-270.59 832.25,-270.59 832.25,-270.59"/>
+<polygon fill="black" stroke="black" points="832.25,-274.09 842.25,-270.59 832.25,-267.09 832.25,-274.09"/>
 </g>
 <!-- ExpandableTileBelowFoldDirective -->
-<g id="node4" class="node">
+<g id="node5" class="node">
 <title>ExpandableTileBelowFoldDirective</title>
-<polygon fill="#ffffb3" stroke="black" points="515.44,-233.59 296.56,-233.59 296.56,-197.59 515.44,-197.59 515.44,-233.59"/>
-<text text-anchor="middle" x="406" y="-211.39" font-family="Times,serif" font-size="14.00">ExpandableTileBelowFoldDirective</text>
+<polygon fill="#ffffb3" stroke="black" points="423.44,-233.59 204.56,-233.59 204.56,-197.59 423.44,-197.59 423.44,-233.59"/>
+<text text-anchor="middle" x="314" y="-211.39" font-family="Times,serif" font-size="14.00">ExpandableTileBelowFoldDirective</text>
 </g>
 <!-- ExpandableTileBelowFoldDirective&#45;&gt;TilesModule -->
-<g id="edge4" class="edge">
+<g id="edge5" class="edge">
 <title>ExpandableTileBelowFoldDirective&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M483.7,-233.78C483.7,-248.77 483.7,-267.59 483.7,-267.59 483.7,-267.59 621.11,-267.59 621.11,-267.59"/>
-<polygon fill="black" stroke="black" points="621.11,-271.09 631.11,-267.59 621.11,-264.09 621.11,-271.09"/>
+<path fill="none" stroke="black" d="M399.28,-233.61C399.28,-250.96 399.28,-274.59 399.28,-274.59 399.28,-274.59 832.38,-274.59 832.38,-274.59"/>
+<polygon fill="black" stroke="black" points="832.38,-278.09 842.38,-274.59 832.38,-271.09 832.38,-278.09"/>
 </g>
 <!-- SelectionTile -->
-<g id="node5" class="node">
+<g id="node6" 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="186.15,-233.59 95.85,-233.59 95.85,-197.59 186.15,-197.59 186.15,-233.59"/>
+<text text-anchor="middle" x="141" y="-211.39" font-family="Times,serif" font-size="14.00">SelectionTile</text>
 </g>
 <!-- SelectionTile&#45;&gt;TilesModule -->
-<g id="edge5" class="edge">
+<g id="edge6" class="edge">
 <title>SelectionTile&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M233,-233.62C233,-249.99 233,-271.59 233,-271.59 233,-271.59 621.41,-271.59 621.41,-271.59"/>
-<polygon fill="black" stroke="black" points="621.41,-275.09 631.41,-271.59 621.41,-268.09 621.41,-275.09"/>
+<path fill="none" stroke="black" d="M141,-233.81C141,-252.42 141,-278.59 141,-278.59 141,-278.59 832.45,-278.59 832.45,-278.59"/>
+<polygon fill="black" stroke="black" points="832.45,-282.09 842.45,-278.59 832.45,-275.09 832.45,-282.09"/>
 </g>
 <!-- Tile -->
-<g id="node6" class="node">
+<g id="node7" 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="78,-233.59 24,-233.59 24,-197.59 78,-197.59 78,-233.59"/>
+<text text-anchor="middle" x="51" y="-211.39" font-family="Times,serif" font-size="14.00">Tile</text>
 </g>
 <!-- Tile&#45;&gt;TilesModule -->
-<g id="edge6" class="edge">
+<g id="edge7" class="edge">
 <title>Tile&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M143,-233.89C143,-251.86 143,-276.59 143,-276.59 143,-276.59 621.01,-276.59 621.01,-276.59"/>
-<polygon fill="black" stroke="black" points="621.01,-280.09 631.01,-276.59 621.01,-273.09 621.01,-280.09"/>
+<path fill="none" stroke="black" d="M51,-233.9C51,-253.74 51,-282.59 51,-282.59 51,-282.59 832.28,-282.59 832.28,-282.59"/>
+<polygon fill="black" stroke="black" points="832.28,-286.09 842.28,-282.59 832.28,-279.09 832.28,-286.09"/>
 </g>
 <!-- TileGroup -->
-<g id="node7" class="node">
+<g id="node8" 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="1631.32,-233.59 1556.68,-233.59 1556.68,-197.59 1631.32,-197.59 1631.32,-233.59"/>
+<text text-anchor="middle" x="1594" y="-211.39" font-family="Times,serif" font-size="14.00">TileGroup</text>
 </g>
 <!-- TileGroup&#45;&gt;TilesModule -->
-<g id="edge7" class="edge">
+<g id="edge8" 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 621.33,-280.59 621.33,-280.59"/>
-<polygon fill="black" stroke="black" points="621.33,-284.09 631.33,-280.59 621.33,-277.09 621.33,-284.09"/>
+<path fill="none" stroke="black" d="M1594,-233.9C1594,-253.74 1594,-282.59 1594,-282.59 1594,-282.59 939.75,-282.59 939.75,-282.59"/>
+<polygon fill="black" stroke="black" points="939.75,-279.09 929.75,-282.59 939.75,-286.09 939.75,-279.09"/>
 </g>
 <!-- ClickableTile  -->
-<g id="node13" class="node">
+<g id="node14" class="node">
 <title>ClickableTile </title>
-<polygon fill="#fb8072" stroke="black" points="1267.7,-363.59 1172.3,-363.59 1172.3,-327.59 1267.7,-327.59 1267.7,-363.59"/>
-<text text-anchor="middle" x="1220" y="-341.39" font-family="Times,serif" font-size="14.00">ClickableTile </text>
+<polygon fill="#fb8072" stroke="black" points="1548.7,-363.59 1453.3,-363.59 1453.3,-327.59 1548.7,-327.59 1548.7,-363.59"/>
+<text text-anchor="middle" x="1501" y="-341.39" font-family="Times,serif" font-size="14.00">ClickableTile </text>
 </g>
 <!-- TilesModule&#45;&gt;ClickableTile  -->
-<g id="edge12" class="edge">
+<g id="edge13" class="edge">
 <title>TilesModule&#45;&gt;ClickableTile </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M718.9,-286.59C842.53,-286.59 1184.68,-286.59 1184.68,-286.59 1184.68,-286.59 1184.68,-317.57 1184.68,-317.57"/>
-<polygon fill="black" stroke="black" points="1181.18,-317.57 1184.68,-327.57 1188.18,-317.57 1181.18,-317.57"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M929.74,-286.59C1070.24,-286.59 1501,-286.59 1501,-286.59 1501,-286.59 1501,-317.57 1501,-317.57"/>
+<polygon fill="black" stroke="black" points="1497.5,-317.57 1501,-327.57 1504.5,-317.57 1497.5,-317.57"/>
+</g>
+<!-- ClickableTileIconDirective  -->
+<g id="node15" class="node">
+<title>ClickableTileIconDirective </title>
+<polygon fill="#fb8072" stroke="black" points="1435.16,-363.59 1262.84,-363.59 1262.84,-327.59 1435.16,-327.59 1435.16,-363.59"/>
+<text text-anchor="middle" x="1349" y="-341.39" font-family="Times,serif" font-size="14.00">ClickableTileIconDirective </text>
+</g>
+<!-- TilesModule&#45;&gt;ClickableTileIconDirective  -->
+<g id="edge14" class="edge">
+<title>TilesModule&#45;&gt;ClickableTileIconDirective </title>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M929.82,-290.59C1032.1,-290.59 1277.94,-290.59 1277.94,-290.59 1277.94,-290.59 1277.94,-317.58 1277.94,-317.58"/>
+<polygon fill="black" stroke="black" points="1274.44,-317.58 1277.94,-327.58 1281.44,-317.58 1274.44,-317.58"/>
 </g>
 <!-- ExpandableTile  -->
-<g id="node14" class="node">
+<g id="node16" class="node">
 <title>ExpandableTile </title>
-<polygon fill="#fb8072" stroke="black" points="1154.14,-363.59 1045.86,-363.59 1045.86,-327.59 1154.14,-327.59 1154.14,-363.59"/>
-<text text-anchor="middle" x="1100" y="-341.39" font-family="Times,serif" font-size="14.00">ExpandableTile </text>
+<polygon fill="#fb8072" stroke="black" points="1245.14,-363.59 1136.86,-363.59 1136.86,-327.59 1245.14,-327.59 1245.14,-363.59"/>
+<text text-anchor="middle" x="1191" y="-341.39" font-family="Times,serif" font-size="14.00">ExpandableTile </text>
 </g>
 <!-- TilesModule&#45;&gt;ExpandableTile  -->
-<g id="edge13" class="edge">
+<g id="edge15" class="edge">
 <title>TilesModule&#45;&gt;ExpandableTile </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M718.83,-290.59C821.8,-290.59 1070.46,-290.59 1070.46,-290.59 1070.46,-290.59 1070.46,-317.58 1070.46,-317.58"/>
-<polygon fill="black" stroke="black" points="1066.96,-317.58 1070.46,-327.58 1073.96,-317.58 1066.96,-317.58"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M929.74,-294.59C1008.02,-294.59 1163.96,-294.59 1163.96,-294.59 1163.96,-294.59 1163.96,-317.47 1163.96,-317.47"/>
+<polygon fill="black" stroke="black" points="1160.46,-317.47 1163.96,-327.47 1167.46,-317.47 1160.46,-317.47"/>
 </g>
 <!-- ExpandableTileAboveFoldDirective  -->
-<g id="node15" class="node">
+<g id="node17" class="node">
 <title>ExpandableTileAboveFoldDirective </title>
-<polygon fill="#fb8072" stroke="black" points="1027.71,-363.59 804.29,-363.59 804.29,-327.59 1027.71,-327.59 1027.71,-363.59"/>
-<text text-anchor="middle" x="916" y="-341.39" font-family="Times,serif" font-size="14.00">ExpandableTileAboveFoldDirective </text>
+<polygon fill="#fb8072" stroke="black" points="1118.71,-363.59 895.29,-363.59 895.29,-327.59 1118.71,-327.59 1118.71,-363.59"/>
+<text text-anchor="middle" x="1007" y="-341.39" font-family="Times,serif" font-size="14.00">ExpandableTileAboveFoldDirective </text>
 </g>
 <!-- TilesModule&#45;&gt;ExpandableTileAboveFoldDirective  -->
-<g id="edge14" class="edge">
+<g id="edge16" class="edge">
 <title>TilesModule&#45;&gt;ExpandableTileAboveFoldDirective </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M718.75,-294.59C767.58,-294.59 839.86,-294.59 839.86,-294.59 839.86,-294.59 839.86,-317.47 839.86,-317.47"/>
-<polygon fill="black" stroke="black" points="836.36,-317.47 839.86,-327.47 843.36,-317.47 836.36,-317.47"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M912.58,-298.7C912.58,-298.7 912.58,-317.58 912.58,-317.58"/>
+<polygon fill="black" stroke="black" points="909.08,-317.58 912.58,-327.58 916.08,-317.58 909.08,-317.58"/>
 </g>
 <!-- ExpandableTileBelowFoldDirective  -->
-<g id="node16" class="node">
+<g id="node18" class="node">
 <title>ExpandableTileBelowFoldDirective </title>
-<polygon fill="#fb8072" stroke="black" points="786.44,-363.59 563.56,-363.59 563.56,-327.59 786.44,-327.59 786.44,-363.59"/>
-<text text-anchor="middle" x="675" y="-341.39" font-family="Times,serif" font-size="14.00">ExpandableTileBelowFoldDirective </text>
+<polygon fill="#fb8072" stroke="black" points="877.44,-363.59 654.56,-363.59 654.56,-327.59 877.44,-327.59 877.44,-363.59"/>
+<text text-anchor="middle" x="766" y="-341.39" font-family="Times,serif" font-size="14.00">ExpandableTileBelowFoldDirective </text>
 </g>
 <!-- TilesModule&#45;&gt;ExpandableTileBelowFoldDirective  -->
-<g id="edge15" class="edge">
+<g id="edge17" class="edge">
 <title>TilesModule&#45;&gt;ExpandableTileBelowFoldDirective </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M675,-298.7C675,-298.7 675,-317.58 675,-317.58"/>
-<polygon fill="black" stroke="black" points="671.5,-317.58 675,-327.58 678.5,-317.58 671.5,-317.58"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M859.72,-298.7C859.72,-298.7 859.72,-317.58 859.72,-317.58"/>
+<polygon fill="black" stroke="black" points="856.22,-317.58 859.72,-327.58 863.22,-317.58 856.22,-317.58"/>
 </g>
 <!-- SelectionTile  -->
-<g id="node17" class="node">
+<g id="node19" class="node">
 <title>SelectionTile </title>
-<polygon fill="#fb8072" stroke="black" points="546.15,-363.59 451.85,-363.59 451.85,-327.59 546.15,-327.59 546.15,-363.59"/>
-<text text-anchor="middle" x="499" y="-341.39" font-family="Times,serif" font-size="14.00">SelectionTile </text>
+<polygon fill="#fb8072" stroke="black" points="637.15,-363.59 542.85,-363.59 542.85,-327.59 637.15,-327.59 637.15,-363.59"/>
+<text text-anchor="middle" x="590" y="-341.39" font-family="Times,serif" font-size="14.00">SelectionTile </text>
 </g>
 <!-- TilesModule&#45;&gt;SelectionTile  -->
-<g id="edge16" class="edge">
+<g id="edge18" class="edge">
 <title>TilesModule&#45;&gt;SelectionTile </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M631.42,-294.59C591.84,-294.59 539.61,-294.59 539.61,-294.59 539.61,-294.59 539.61,-317.47 539.61,-317.47"/>
-<polygon fill="black" stroke="black" points="536.11,-317.47 539.61,-327.47 543.11,-317.47 536.11,-317.47"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M842.32,-294.59C759.99,-294.59 590,-294.59 590,-294.59 590,-294.59 590,-317.47 590,-317.47"/>
+<polygon fill="black" stroke="black" points="586.5,-317.47 590,-327.47 593.5,-317.47 586.5,-317.47"/>
 </g>
 <!-- Tile  -->
-<g id="node18" class="node">
+<g id="node20" class="node">
 <title>Tile </title>
-<polygon fill="#fb8072" stroke="black" points="434,-363.59 380,-363.59 380,-327.59 434,-327.59 434,-363.59"/>
-<text text-anchor="middle" x="407" y="-341.39" font-family="Times,serif" font-size="14.00">Tile </text>
+<polygon fill="#fb8072" stroke="black" points="525,-363.59 471,-363.59 471,-327.59 525,-327.59 525,-363.59"/>
+<text text-anchor="middle" x="498" y="-341.39" font-family="Times,serif" font-size="14.00">Tile </text>
 </g>
 <!-- TilesModule&#45;&gt;Tile  -->
-<g id="edge17" class="edge">
+<g id="edge19" class="edge">
 <title>TilesModule&#45;&gt;Tile </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M631.34,-289.59C555.4,-289.59 407,-289.59 407,-289.59 407,-289.59 407,-317.56 407,-317.56"/>
-<polygon fill="black" stroke="black" points="403.5,-317.56 407,-327.56 410.5,-317.56 403.5,-317.56"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M842.25,-290.59C740.77,-290.59 498,-290.59 498,-290.59 498,-290.59 498,-317.58 498,-317.58"/>
+<polygon fill="black" stroke="black" points="494.5,-317.58 498,-327.58 501.5,-317.58 494.5,-317.58"/>
 </g>
 <!-- TileGroup  -->
-<g id="node19" class="node">
+<g id="node21" class="node">
 <title>TileGroup </title>
-<polygon fill="#fb8072" stroke="black" points="361.82,-363.59 284.18,-363.59 284.18,-327.59 361.82,-327.59 361.82,-363.59"/>
-<text text-anchor="middle" x="323" y="-341.39" font-family="Times,serif" font-size="14.00">TileGroup </text>
+<polygon fill="#fb8072" stroke="black" points="452.82,-363.59 375.18,-363.59 375.18,-327.59 452.82,-327.59 452.82,-363.59"/>
+<text text-anchor="middle" x="414" y="-341.39" font-family="Times,serif" font-size="14.00">TileGroup </text>
 </g>
 <!-- TilesModule&#45;&gt;TileGroup  -->
-<g id="edge18" class="edge">
+<g id="edge20" class="edge">
 <title>TilesModule&#45;&gt;TileGroup </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M631.21,-285.59C538.16,-285.59 329.22,-285.59 329.22,-285.59 329.22,-285.59 329.22,-317.59 329.22,-317.59"/>
-<polygon fill="black" stroke="black" points="325.72,-317.59 329.22,-327.59 332.72,-317.59 325.72,-317.59"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M842.3,-286.59C731.27,-286.59 447.03,-286.59 447.03,-286.59 447.03,-286.59 447.03,-317.57 447.03,-317.57"/>
+<polygon fill="black" stroke="black" points="443.53,-317.57 447.03,-327.57 450.53,-317.57 443.53,-317.57"/>
 </g>
 <!-- {
  &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: TileGroup, multi: true
 } -->
-<g id="node9" class="node">
+<g id="node10" 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="1731" cy="-127.3" rx="309.77" ry="41.09"/>
+<text text-anchor="middle" x="1731" y="-139.9" font-family="Times,serif" font-size="14.00">{</text>
+<text text-anchor="middle" x="1731" 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="1731" 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="edge8" class="edge">
+<g id="edge9" 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="M1594,-164.48C1594,-164.48 1594,-187.22 1594,-187.22"/>
+<polygon fill="black" stroke="black" points="1590.5,-187.22 1594,-197.22 1597.5,-187.22 1590.5,-187.22"/>
 </g>
 <!-- I18nModule -->
-<g id="node10" class="node">
+<g id="node11" class="node">
 <title>I18nModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="1300.71,-233.59 1297.71,-237.59 1276.71,-237.59 1273.71,-233.59 1215.29,-233.59 1215.29,-197.59 1300.71,-197.59 1300.71,-233.59"/>
-<text text-anchor="middle" x="1258" y="-211.39" font-family="Times,serif" font-size="14.00">I18nModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="1396.71,-233.59 1393.71,-237.59 1372.71,-237.59 1369.71,-233.59 1311.29,-233.59 1311.29,-197.59 1396.71,-197.59 1396.71,-233.59"/>
+<text text-anchor="middle" x="1354" y="-211.39" font-family="Times,serif" font-size="14.00">I18nModule</text>
 </g>
 <!-- I18nModule&#45;&gt;TilesModule -->
-<g id="edge9" class="edge">
+<g id="edge10" class="edge">
 <title>I18nModule&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M1241.62,-233.9C1241.62,-253.74 1241.62,-282.59 1241.62,-282.59 1241.62,-282.59 728.99,-282.59 728.99,-282.59"/>
-<polygon fill="black" stroke="black" points="728.99,-279.09 718.99,-282.59 728.99,-286.09 728.99,-279.09"/>
+<path fill="none" stroke="black" d="M1354,-233.81C1354,-252.42 1354,-278.59 1354,-278.59 1354,-278.59 939.61,-278.59 939.61,-278.59"/>
+<polygon fill="black" stroke="black" points="939.61,-275.09 929.61,-278.59 939.61,-282.09 939.61,-275.09"/>
 </g>
 <!-- IconModule -->
-<g id="node11" class="node">
+<g id="node12" class="node">
 <title>IconModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="1197.43,-233.59 1194.43,-237.59 1173.43,-237.59 1170.43,-233.59 1112.57,-233.59 1112.57,-197.59 1197.43,-197.59 1197.43,-233.59"/>
-<text text-anchor="middle" x="1155" y="-211.39" font-family="Times,serif" font-size="14.00">IconModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="1293.43,-233.59 1290.43,-237.59 1269.43,-237.59 1266.43,-233.59 1208.57,-233.59 1208.57,-197.59 1293.43,-197.59 1293.43,-233.59"/>
+<text text-anchor="middle" x="1251" y="-211.39" font-family="Times,serif" font-size="14.00">IconModule</text>
 </g>
 <!-- IconModule&#45;&gt;TilesModule -->
-<g id="edge10" class="edge">
+<g id="edge11" class="edge">
 <title>IconModule&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M1133.43,-233.81C1133.43,-252.42 1133.43,-278.59 1133.43,-278.59 1133.43,-278.59 728.96,-278.59 728.96,-278.59"/>
-<polygon fill="black" stroke="black" points="728.96,-275.09 718.96,-278.59 728.96,-282.09 728.96,-275.09"/>
+<path fill="none" stroke="black" d="M1226.93,-233.61C1226.93,-250.96 1226.93,-274.59 1226.93,-274.59 1226.93,-274.59 939.87,-274.59 939.87,-274.59"/>
+<polygon fill="black" stroke="black" points="939.87,-271.09 929.87,-274.59 939.87,-278.09 939.87,-271.09"/>
 </g>
 <!-- LinkModule -->
-<g id="node12" class="node">
+<g id="node13" class="node">
 <title>LinkModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="1094.99,-233.59 1091.99,-237.59 1070.99,-237.59 1067.99,-233.59 1009.01,-233.59 1009.01,-197.59 1094.99,-197.59 1094.99,-233.59"/>
-<text text-anchor="middle" x="1052" y="-211.39" font-family="Times,serif" font-size="14.00">LinkModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="1190.99,-233.59 1187.99,-237.59 1166.99,-237.59 1163.99,-233.59 1105.01,-233.59 1105.01,-197.59 1190.99,-197.59 1190.99,-233.59"/>
+<text text-anchor="middle" x="1148" y="-211.39" font-family="Times,serif" font-size="14.00">LinkModule</text>
 </g>
 <!-- LinkModule&#45;&gt;TilesModule -->
-<g id="edge11" class="edge">
+<g id="edge12" class="edge">
 <title>LinkModule&#45;&gt;TilesModule</title>
-<path fill="none" stroke="black" d="M1018.3,-233.61C1018.3,-250.96 1018.3,-274.59 1018.3,-274.59 1018.3,-274.59 728.83,-274.59 728.83,-274.59"/>
-<polygon fill="black" stroke="black" points="728.83,-271.09 718.83,-274.59 728.83,-278.09 728.83,-271.09"/>
+<path fill="none" stroke="black" d="M1111.8,-233.6C1111.8,-249.64 1111.8,-270.59 1111.8,-270.59 1111.8,-270.59 939.81,-270.59 939.81,-270.59"/>
+<polygon fill="black" stroke="black" points="939.81,-267.09 929.81,-270.59 939.81,-274.09 939.81,-267.09"/>
 </g>
 </g>
 </svg>
@@ -417,6 +441,9 @@
                         <li class="list-group-item">
                             <a href="../components/ClickableTile.html">ClickableTile</a>
                         </li>
+                        <li class="list-group-item">
+                            <a href="../directives/ClickableTileIconDirective.html">ClickableTileIconDirective</a>
+                        </li>
                         <li class="list-group-item">
                             <a href="../components/ExpandableTile.html">ExpandableTile</a>
                         </li>
@@ -461,6 +488,9 @@
                         <li class="list-group-item">
                             <a href="../components/ClickableTile.html">ClickableTile</a>
                         </li>
+                        <li class="list-group-item">
+                            <a href="../directives/ClickableTileIconDirective.html">ClickableTileIconDirective</a>
+                        </li>
                         <li class="list-group-item">
                             <a href="../components/ExpandableTile.html">ExpandableTile</a>
                         </li>
@@ -494,6 +524,7 @@ import { CommonModule } from &quot;@angular/common&quot;;
 
 import { Tile } from &quot;./tile.component&quot;;
 import { ClickableTile } from &quot;./clickable-tile.component&quot;;
+import { ClickableTileIconDirective } from &quot;./clickable-tile-icon.directive&quot;;
 import { ExpandableTile } from &quot;./expandable-tile.component&quot;;
 import { ExpandableTileAboveFoldDirective } from &quot;./expandable-tile-above.directive&quot;;
 import { ExpandableTileBelowFoldDirective } from &quot;./expandable-tile-below.directive&quot;;
@@ -507,6 +538,7 @@ import { LinkModule } from &quot;carbon-components-angular/link&quot;;
 	declarations: [
 		Tile,
 		ClickableTile,
+		ClickableTileIconDirective,
 		ExpandableTileAboveFoldDirective,
 		ExpandableTileBelowFoldDirective,
 		ExpandableTile,
@@ -516,6 +548,7 @@ import { LinkModule } from &quot;carbon-components-angular/link&quot;;
 	exports: [
 		Tile,
 		ClickableTile,
+		ClickableTileIconDirective,
 		ExpandableTileAboveFoldDirective,
 		ExpandableTileBelowFoldDirective,
 		ExpandableTile,