carbon-components-angular 6.0.0-rc.1 → 6.0.0-rc.2

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="1885pt" height="396pt"
- viewBox="0.00 0.00 1885.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 1881,-391.59 1881,4 -4,4"/>
-<text text-anchor="start" x="917.51" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
-<polygon fill="#ffffb3" stroke="transparent" points="704.5,-10 704.5,-30 724.5,-30 724.5,-10 704.5,-10"/>
-<text text-anchor="start" x="728.13" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Declarations</text>
-<polygon fill="#8dd3c7" stroke="transparent" points="817.5,-10 817.5,-30 837.5,-30 837.5,-10 817.5,-10"/>
-<text text-anchor="start" x="841.23" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Module</text>
-<polygon fill="#80b1d3" stroke="transparent" points="903.5,-10 903.5,-30 923.5,-30 923.5,-10 903.5,-10"/>
-<text text-anchor="start" x="927.28" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Bootstrap</text>
-<polygon fill="#fdb462" stroke="transparent" points="1000.5,-10 1000.5,-30 1020.5,-30 1020.5,-10 1000.5,-10"/>
-<text text-anchor="start" x="1024.17" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Providers</text>
-<polygon fill="#fb8072" stroke="transparent" points="1096.5,-10 1096.5,-30 1116.5,-30 1116.5,-10 1096.5,-10"/>
-<text text-anchor="start" x="1120.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 1869,-379.59 1869,-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="clust10" class="cluster">
-<title>cluster_TilesModule_imports</title>
-<polygon fill="none" stroke="black" points="1553,-189.59 1553,-241.59 1861,-241.59 1861,-189.59 1553,-189.59"/>
+<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">
-<title>cluster_TilesModule_exports</title>
-<polygon fill="none" stroke="black" points="390,-319.59 390,-371.59 1390,-371.59 1390,-319.59 390,-319.59"/>
-</g>
-<g id="clust9" class="cluster">
-<title>cluster_TilesModule_TileGroup_providers</title>
-<polygon fill="none" stroke="black" points="909,-78 909,-241.59 1545,-241.59 1545,-78 909,-78"/>
+<title>cluster_TilesModule_imports</title>
+<polygon fill="none" stroke="black" points="1097,-189.59 1097,-241.59 1405,-241.59 1405,-189.59 1097,-189.59"/>
 </g>
 <g id="clust2" class="cluster">
 <title>cluster_TilesModule_declarations</title>
-<polygon fill="none" stroke="black" points="16,-189.59 16,-241.59 901,-241.59 901,-189.59 16,-189.59"/>
+<polygon fill="none" stroke="black" points="16,-189.59 16,-241.59 1089,-241.59 1089,-189.59 16,-189.59"/>
+</g>
+<g id="clust12" class="cluster">
+<title>cluster_TilesModule_exports</title>
+<polygon fill="none" stroke="black" points="367,-319.59 367,-371.59 1557,-371.59 1557,-319.59 367,-319.59"/>
 </g>
 <!-- ClickableTile -->
 <g id="node1" class="node">
 <title>ClickableTile</title>
-<polygon fill="#ffffb3" stroke="black" points="893.2,-233.59 800.8,-233.59 800.8,-197.59 893.2,-197.59 893.2,-233.59"/>
-<text text-anchor="middle" x="847" 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="832.54,-298.59 829.54,-302.59 808.54,-302.59 805.54,-298.59 745.46,-298.59 745.46,-262.59 832.54,-262.59 832.54,-298.59"/>
-<text text-anchor="middle" x="789" 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="M816.84,-233.7C816.84,-233.7 816.84,-252.58 816.84,-252.58"/>
-<polygon fill="black" stroke="black" points="813.34,-252.58 816.84,-262.58 820.34,-252.58 813.34,-252.58"/>
+<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="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="M764.27,-233.7C764.27,-233.7 764.27,-252.58 764.27,-252.58"/>
-<polygon fill="black" stroke="black" points="760.77,-252.58 764.27,-262.58 767.77,-252.58 760.77,-252.58"/>
+<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="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="M597.31,-233.78C597.31,-248.77 597.31,-267.59 597.31,-267.59 597.31,-267.59 735.02,-267.59 735.02,-267.59"/>
-<polygon fill="black" stroke="black" points="735.02,-271.09 745.02,-267.59 735.02,-264.09 735.02,-271.09"/>
+<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="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="M410.78,-233.62C410.78,-249.99 410.78,-271.59 410.78,-271.59 410.78,-271.59 735.24,-271.59 735.24,-271.59"/>
-<polygon fill="black" stroke="black" points="735.24,-275.09 745.24,-271.59 735.24,-268.09 735.24,-275.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="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="M141,-233.89C141,-251.86 141,-276.59 141,-276.59 141,-276.59 735.22,-276.59 735.22,-276.59"/>
-<polygon fill="black" stroke="black" points="735.22,-280.09 745.22,-276.59 735.22,-273.09 735.22,-280.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="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="M51,-233.7C51,-252.93 51,-280.59 51,-280.59 51,-280.59 735.32,-280.59 735.32,-280.59"/>
-<polygon fill="black" stroke="black" points="735.32,-284.09 745.32,-280.59 735.32,-277.09 735.32,-284.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="1127.32,-233.59 1052.68,-233.59 1052.68,-197.59 1127.32,-197.59 1127.32,-233.59"/>
-<text text-anchor="middle" x="1090" 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="M1090,-233.78C1090,-248.77 1090,-267.59 1090,-267.59 1090,-267.59 842.77,-267.59 842.77,-267.59"/>
-<polygon fill="black" stroke="black" points="842.77,-264.09 832.77,-267.59 842.77,-271.09 842.77,-264.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="1381.7,-363.59 1286.3,-363.59 1286.3,-327.59 1381.7,-327.59 1381.7,-363.59"/>
-<text text-anchor="middle" x="1334" 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="M832.68,-285.59C962,-285.59 1334,-285.59 1334,-285.59 1334,-285.59 1334,-317.59 1334,-317.59"/>
-<polygon fill="black" stroke="black" points="1330.5,-317.59 1334,-327.59 1337.5,-317.59 1330.5,-317.59"/>
+<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="1268.14,-363.59 1159.86,-363.59 1159.86,-327.59 1268.14,-327.59 1268.14,-363.59"/>
-<text text-anchor="middle" x="1214" 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="M832.88,-289.59C941.47,-289.59 1214,-289.59 1214,-289.59 1214,-289.59 1214,-317.56 1214,-317.56"/>
-<polygon fill="black" stroke="black" points="1210.5,-317.56 1214,-327.56 1217.5,-317.56 1210.5,-317.56"/>
+<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="1141.71,-363.59 918.29,-363.59 918.29,-327.59 1141.71,-327.59 1141.71,-363.59"/>
-<text text-anchor="middle" x="1030" 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="M832.64,-294.59C890.56,-294.59 985.62,-294.59 985.62,-294.59 985.62,-294.59 985.62,-317.47 985.62,-317.47"/>
-<polygon fill="black" stroke="black" points="982.12,-317.47 985.62,-327.47 989.12,-317.47 982.12,-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="900.44,-363.59 677.56,-363.59 677.56,-327.59 900.44,-327.59 900.44,-363.59"/>
-<text text-anchor="middle" x="789" 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="M789,-298.7C789,-298.7 789,-317.58 789,-317.58"/>
-<polygon fill="black" stroke="black" points="785.5,-317.58 789,-327.58 792.5,-317.58 785.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="660.15,-363.59 565.85,-363.59 565.85,-327.59 660.15,-327.59 660.15,-363.59"/>
-<text text-anchor="middle" x="613" 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="M745.19,-294.59C697.73,-294.59 628.69,-294.59 628.69,-294.59 628.69,-294.59 628.69,-317.47 628.69,-317.47"/>
-<polygon fill="black" stroke="black" points="625.19,-317.47 628.69,-327.47 632.19,-317.47 625.19,-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="548,-363.59 494,-363.59 494,-327.59 548,-327.59 548,-363.59"/>
-<text text-anchor="middle" x="521" 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="M745.34,-289.59C669.4,-289.59 521,-289.59 521,-289.59 521,-289.59 521,-317.56 521,-317.56"/>
-<polygon fill="black" stroke="black" points="517.5,-317.56 521,-327.56 524.5,-317.56 517.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="475.82,-363.59 398.18,-363.59 398.18,-327.59 475.82,-327.59 475.82,-363.59"/>
-<text text-anchor="middle" x="437" 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="M745.12,-285.59C655.22,-285.59 458.53,-285.59 458.53,-285.59 458.53,-285.59 458.53,-317.59 458.53,-317.59"/>
-<polygon fill="black" stroke="black" points="455.03,-317.59 458.53,-327.59 462.03,-317.59 455.03,-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="1227" cy="-127.3" rx="309.77" ry="41.09"/>
-<text text-anchor="middle" x="1227" y="-139.9" font-family="Times,serif" font-size="14.00">{</text>
-<text text-anchor="middle" x="1227" 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="1227" 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="M1090,-164.48C1090,-164.48 1090,-187.22 1090,-187.22"/>
-<polygon fill="black" stroke="black" points="1086.5,-187.22 1090,-197.22 1093.5,-187.22 1086.5,-187.22"/>
+<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="1852.71,-233.59 1849.71,-237.59 1828.71,-237.59 1825.71,-233.59 1767.29,-233.59 1767.29,-197.59 1852.71,-197.59 1852.71,-233.59"/>
-<text text-anchor="middle" x="1810" 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="M1810,-233.7C1810,-252.93 1810,-280.59 1810,-280.59 1810,-280.59 842.54,-280.59 842.54,-280.59"/>
-<polygon fill="black" stroke="black" points="842.54,-277.09 832.54,-280.59 842.54,-284.09 842.54,-277.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="1749.43,-233.59 1746.43,-237.59 1725.43,-237.59 1722.43,-233.59 1664.57,-233.59 1664.57,-197.59 1749.43,-197.59 1749.43,-233.59"/>
-<text text-anchor="middle" x="1707" 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="M1707,-233.89C1707,-251.86 1707,-276.59 1707,-276.59 1707,-276.59 842.66,-276.59 842.66,-276.59"/>
-<polygon fill="black" stroke="black" points="842.66,-273.09 832.66,-276.59 842.66,-280.09 842.66,-273.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="1646.99,-233.59 1643.99,-237.59 1622.99,-237.59 1619.99,-233.59 1561.01,-233.59 1561.01,-197.59 1646.99,-197.59 1646.99,-233.59"/>
-<text text-anchor="middle" x="1604" 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="M1604,-233.62C1604,-249.99 1604,-271.59 1604,-271.59 1604,-271.59 842.82,-271.59 842.82,-271.59"/>
-<polygon fill="black" stroke="black" points="842.82,-268.09 832.82,-271.59 842.82,-275.09 842.82,-268.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,