@rxap/material-table-system
Version:
This package provides a set of Angular directives, components, and services to enhance and customize Angular Material tables. It includes features such as row selection, column filtering, expandable rows, table actions, and more. The goal is to simplify c
698 lines (653 loc) • 36.7 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>angular-material-table-system</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/dark.css">
</head>
<body>
<script>
// Blocking script to avoid flickering dark mode
// Dark mode toggle button
var useDark = window.matchMedia('(prefers-color-scheme: dark)');
var darkModeState = useDark.matches;
var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
function checkToggle(check) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].checked = check;
}
}
function toggleDarkMode(state) {
if (window.localStorage) {
localStorage.setItem('compodoc_darkmode-state', state);
}
checkToggle(state);
const hasClass = document.body.classList.contains('dark');
if (state) {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.add('dark');
}
if (!hasClass) {
document.body.classList.add('dark');
}
} else {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.remove('dark');
}
if (hasClass) {
document.body.classList.remove('dark');
}
}
}
useDark.addEventListener('change', function (evt) {
toggleDarkMode(evt.matches);
});
if (darkModeStateLocal) {
darkModeState = darkModeStateLocal === 'true';
}
toggleDarkMode(darkModeState);
</script>
<div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
<div class="d-flex">
<a href="./" class="navbar-brand">angular-material-table-system</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="d-none d-md-block menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content overview">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Overview</li>
</ol>
<div class="text-center module-graph-container">
<div id="module-graph-svg">
<!-- Generated by graphviz version 2.47.0 (20210316.0004)
-->
<!-- Title: dependencies Pages: 1 -->
<svg width="2931pt" height="284pt"
viewBox="0.00 0.00 2931.00 284.00" 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 280)">
<title>dependencies</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-280 2927,-280 2927,4 -4,4"/>
<text text-anchor="start" x="1440.51" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
<polygon fill="#ffffb3" stroke="transparent" points="1227.5,-10 1227.5,-30 1247.5,-30 1247.5,-10 1227.5,-10"/>
<text text-anchor="start" x="1251.13" y="-15.4" font-family="Times-12" font-size="14.00">  Declarations</text>
<polygon fill="#8dd3c7" stroke="transparent" points="1340.5,-10 1340.5,-30 1360.5,-30 1360.5,-10 1340.5,-10"/>
<text text-anchor="start" x="1364.23" y="-15.4" font-family="Times-12" font-size="14.00">  Module</text>
<polygon fill="#80b1d3" stroke="transparent" points="1426.5,-10 1426.5,-30 1446.5,-30 1446.5,-10 1426.5,-10"/>
<text text-anchor="start" x="1450.28" y="-15.4" font-family="Times-12" font-size="14.00">  Bootstrap</text>
<polygon fill="#fdb462" stroke="transparent" points="1523.5,-10 1523.5,-30 1543.5,-30 1543.5,-10 1523.5,-10"/>
<text text-anchor="start" x="1547.17" y="-15.4" font-family="Times-12" font-size="14.00">  Providers</text>
<polygon fill="#fb8072" stroke="transparent" points="1619.5,-10 1619.5,-30 1639.5,-30 1639.5,-10 1619.5,-10"/>
<text text-anchor="start" x="1643.23" y="-15.4" font-family="Times-12" font-size="14.00">  Exports</text>
<g id="clust1" class="cluster">
<title>cluster_ExpandRowModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-268 378,-268 378,-70 8,-70"/>
</g>
<g id="clust3" class="cluster">
<title>cluster_ExpandRowModule_imports</title>
<polygon fill="none" stroke="black" points="216,-78 216,-130 370,-130 370,-78 216,-78"/>
</g>
<g id="clust4" class="cluster">
<title>cluster_ExpandRowModule_exports</title>
<polygon fill="none" stroke="black" points="124,-208 124,-260 280,-260 280,-208 124,-208"/>
</g>
<g id="clust6" class="cluster">
<title>cluster_ExpandRowModule_providers</title>
<polygon fill="none" stroke="black" points="16,-78 16,-130 208,-130 208,-78 16,-78"/>
</g>
<g id="clust7" class="cluster">
<title>cluster_SelectRowModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="386,-70 386,-268 974,-268 974,-70 386,-70"/>
</g>
<g id="clust9" class="cluster">
<title>cluster_SelectRowModule_imports</title>
<polygon fill="none" stroke="black" points="398,-78 398,-130 962,-130 962,-78 398,-78"/>
</g>
<g id="clust10" class="cluster">
<title>cluster_SelectRowModule_exports</title>
<polygon fill="none" stroke="black" points="394,-208 394,-260 966,-260 966,-208 394,-208"/>
</g>
<g id="clust13" class="cluster">
<title>cluster_TableColumnMenuModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="982,-70 982,-268 1675,-268 1675,-70 982,-70"/>
</g>
<g id="clust15" class="cluster">
<title>cluster_TableColumnMenuModule_imports</title>
<polygon fill="none" stroke="black" points="995,-78 995,-130 1661,-130 1661,-78 995,-78"/>
</g>
<g id="clust16" class="cluster">
<title>cluster_TableColumnMenuModule_exports</title>
<polygon fill="none" stroke="black" points="990,-208 990,-260 1667,-260 1667,-208 990,-208"/>
</g>
<g id="clust19" class="cluster">
<title>cluster_TableFilterModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="1683,-70 1683,-268 2076,-268 2076,-70 1683,-70"/>
</g>
<g id="clust21" class="cluster">
<title>cluster_TableFilterModule_imports</title>
<polygon fill="none" stroke="black" points="1695,-78 1695,-130 2065,-130 2065,-78 1695,-78"/>
</g>
<g id="clust22" class="cluster">
<title>cluster_TableFilterModule_exports</title>
<polygon fill="none" stroke="black" points="1691,-208 1691,-260 2068,-260 2068,-208 1691,-208"/>
</g>
<g id="clust25" class="cluster">
<title>cluster_TableRowActionsModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="2084,-70 2084,-268 2915,-268 2915,-70 2084,-70"/>
</g>
<g id="clust27" class="cluster">
<title>cluster_TableRowActionsModule_imports</title>
<polygon fill="none" stroke="black" points="2100,-78 2100,-130 2902,-130 2902,-78 2100,-78"/>
</g>
<g id="clust28" class="cluster">
<title>cluster_TableRowActionsModule_exports</title>
<polygon fill="none" stroke="black" points="2092,-208 2092,-260 2907,-260 2907,-208 2092,-208"/>
</g>
<!-- ExpandRowDirective -->
<g id="node1" class="node">
<title>ExpandRowDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="361.79,-122 358.79,-126 337.79,-126 334.79,-122 224.21,-122 224.21,-86 361.79,-86 361.79,-122"/>
<text text-anchor="middle" x="293" y="-99.8" font-family="Times,serif" font-size="14.00">ExpandRowDirective</text>
</g>
<!-- ExpandRowModule -->
<g id="node2" class="node">
<title>ExpandRowModule</title>
<polygon fill="#8dd3c7" stroke="black" points="266.26,-187 263.26,-191 242.26,-191 239.26,-187 137.74,-187 137.74,-151 266.26,-151 266.26,-187"/>
<text text-anchor="middle" x="202" y="-164.8" font-family="Times,serif" font-size="14.00">ExpandRowModule</text>
</g>
<!-- ExpandRowDirective->ExpandRowModule -->
<g id="edge1" class="edge">
<title>ExpandRowDirective->ExpandRowModule</title>
<path fill="none" stroke="black" d="M245.37,-122.11C245.37,-122.11 245.37,-140.99 245.37,-140.99"/>
<polygon fill="black" stroke="black" points="241.87,-140.99 245.37,-150.99 248.87,-140.99 241.87,-140.99"/>
</g>
<!-- ExpandRowDirective -->
<g id="node3" class="node">
<title>ExpandRowDirective </title>
<polygon fill="#fb8072" stroke="black" points="272.29,-252 131.71,-252 131.71,-216 272.29,-216 272.29,-252"/>
<text text-anchor="middle" x="202" y="-229.8" font-family="Times,serif" font-size="14.00">ExpandRowDirective </text>
</g>
<!-- ExpandRowModule->ExpandRowDirective -->
<g id="edge2" class="edge">
<title>ExpandRowModule->ExpandRowDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M202,-187.11C202,-187.11 202,-205.99 202,-205.99"/>
<polygon fill="black" stroke="black" points="198.5,-205.99 202,-215.99 205.5,-205.99 198.5,-205.99"/>
</g>
<!-- ExpandRowService -->
<g id="node4" class="node">
<title>ExpandRowService</title>
<ellipse fill="#fdb462" stroke="black" cx="112" cy="-104" rx="87.96" ry="18"/>
<text text-anchor="middle" x="112" y="-99.8" font-family="Times,serif" font-size="14.00">ExpandRowService</text>
</g>
<!-- ExpandRowService->ExpandRowModule -->
<g id="edge3" class="edge">
<title>ExpandRowService->ExpandRowModule</title>
<path fill="none" stroke="black" d="M168.68,-117.78C168.68,-117.78 168.68,-140.55 168.68,-140.55"/>
<polygon fill="black" stroke="black" points="165.18,-140.55 168.68,-150.55 172.18,-140.55 165.18,-140.55"/>
</g>
<!-- CheckboxCellComponent -->
<g id="node5" class="node">
<title>CheckboxCellComponent</title>
<polygon fill="#8dd3c7" stroke="black" points="953.93,-122 950.93,-126 929.93,-126 926.93,-122 792.07,-122 792.07,-86 953.93,-86 953.93,-122"/>
<text text-anchor="middle" x="873" y="-99.8" font-family="Times,serif" font-size="14.00">CheckboxCellComponent</text>
</g>
<!-- SelectRowModule -->
<g id="node8" class="node">
<title>SelectRowModule</title>
<polygon fill="#8dd3c7" stroke="black" points="733.2,-187 730.2,-191 709.2,-191 706.2,-187 612.8,-187 612.8,-151 733.2,-151 733.2,-187"/>
<text text-anchor="middle" x="673" y="-164.8" font-family="Times,serif" font-size="14.00">SelectRowModule</text>
</g>
<!-- CheckboxCellComponent->SelectRowModule -->
<g id="edge4" class="edge">
<title>CheckboxCellComponent->SelectRowModule</title>
<path fill="none" stroke="black" d="M900.32,-122.13C900.32,-142.57 900.32,-173 900.32,-173 900.32,-173 743.32,-173 743.32,-173"/>
<polygon fill="black" stroke="black" points="743.32,-169.5 733.32,-173 743.32,-176.5 743.32,-169.5"/>
</g>
<!-- CheckboxHeaderCellComponent -->
<g id="node6" class="node">
<title>CheckboxHeaderCellComponent</title>
<polygon fill="#8dd3c7" stroke="black" points="773.84,-122 770.84,-126 749.84,-126 746.84,-122 572.16,-122 572.16,-86 773.84,-86 773.84,-122"/>
<text text-anchor="middle" x="673" y="-99.8" font-family="Times,serif" font-size="14.00">CheckboxHeaderCellComponent</text>
</g>
<!-- CheckboxHeaderCellComponent->SelectRowModule -->
<g id="edge5" class="edge">
<title>CheckboxHeaderCellComponent->SelectRowModule</title>
<path fill="none" stroke="black" d="M673,-122.11C673,-122.11 673,-140.99 673,-140.99"/>
<polygon fill="black" stroke="black" points="669.5,-140.99 673,-150.99 676.5,-140.99 669.5,-140.99"/>
</g>
<!-- SelectedRowsDirective -->
<g id="node7" class="node">
<title>SelectedRowsDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="553.89,-122 550.89,-126 529.89,-126 526.89,-122 406.11,-122 406.11,-86 553.89,-86 553.89,-122"/>
<text text-anchor="middle" x="480" y="-99.8" font-family="Times,serif" font-size="14.00">SelectedRowsDirective</text>
</g>
<!-- SelectedRowsDirective->SelectRowModule -->
<g id="edge6" class="edge">
<title>SelectedRowsDirective->SelectRowModule</title>
<path fill="none" stroke="black" d="M503.73,-122.02C503.73,-139.37 503.73,-163 503.73,-163 503.73,-163 602.85,-163 602.85,-163"/>
<polygon fill="black" stroke="black" points="602.85,-166.5 612.85,-163 602.85,-159.5 602.85,-166.5"/>
</g>
<!-- CheckboxCellComponent -->
<g id="node9" class="node">
<title>CheckboxCellComponent </title>
<polygon fill="#fb8072" stroke="black" points="958.43,-252 793.57,-252 793.57,-216 958.43,-216 958.43,-252"/>
<text text-anchor="middle" x="876" y="-229.8" font-family="Times,serif" font-size="14.00">CheckboxCellComponent </text>
</g>
<!-- SelectRowModule->CheckboxCellComponent -->
<g id="edge7" class="edge">
<title>SelectRowModule->CheckboxCellComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M733.34,-180C783.58,-180 846.93,-180 846.93,-180 846.93,-180 846.93,-205.72 846.93,-205.72"/>
<polygon fill="black" stroke="black" points="843.43,-205.72 846.93,-215.72 850.43,-205.72 843.43,-205.72"/>
</g>
<!-- CheckboxHeaderCellComponent -->
<g id="node10" class="node">
<title>CheckboxHeaderCellComponent </title>
<polygon fill="#fb8072" stroke="black" points="775.84,-252 570.16,-252 570.16,-216 775.84,-216 775.84,-252"/>
<text text-anchor="middle" x="673" y="-229.8" font-family="Times,serif" font-size="14.00">CheckboxHeaderCellComponent </text>
</g>
<!-- SelectRowModule->CheckboxHeaderCellComponent -->
<g id="edge8" class="edge">
<title>SelectRowModule->CheckboxHeaderCellComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M673,-187.11C673,-187.11 673,-205.99 673,-205.99"/>
<polygon fill="black" stroke="black" points="669.5,-205.99 673,-215.99 676.5,-205.99 669.5,-205.99"/>
</g>
<!-- SelectedRowsDirective -->
<g id="node11" class="node">
<title>SelectedRowsDirective </title>
<polygon fill="#fb8072" stroke="black" points="552.39,-252 401.61,-252 401.61,-216 552.39,-216 552.39,-252"/>
<text text-anchor="middle" x="477" y="-229.8" font-family="Times,serif" font-size="14.00">SelectedRowsDirective </text>
</g>
<!-- SelectRowModule->SelectedRowsDirective -->
<g id="edge9" class="edge">
<title>SelectRowModule->SelectedRowsDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M612.86,-175C548.34,-175 455.02,-175 455.02,-175 455.02,-175 455.02,-205.98 455.02,-205.98"/>
<polygon fill="black" stroke="black" points="451.52,-205.98 455.02,-215.98 458.52,-205.98 451.52,-205.98"/>
</g>
<!-- TableColumnMenuComponent -->
<g id="node12" class="node">
<title>TableColumnMenuComponent</title>
<polygon fill="#8dd3c7" stroke="black" points="1653.48,-122 1650.48,-126 1629.48,-126 1626.48,-122 1462.52,-122 1462.52,-86 1653.48,-86 1653.48,-122"/>
<text text-anchor="middle" x="1558" y="-99.8" font-family="Times,serif" font-size="14.00">TableColumnMenuComponent</text>
</g>
<!-- TableColumnMenuModule -->
<g id="node15" class="node">
<title>TableColumnMenuModule</title>
<polygon fill="#8dd3c7" stroke="black" points="1430.7,-187 1427.7,-191 1406.7,-191 1403.7,-187 1261.3,-187 1261.3,-151 1430.7,-151 1430.7,-187"/>
<text text-anchor="middle" x="1346" y="-164.8" font-family="Times,serif" font-size="14.00">TableColumnMenuModule</text>
</g>
<!-- TableColumnMenuComponent->TableColumnMenuModule -->
<g id="edge10" class="edge">
<title>TableColumnMenuComponent->TableColumnMenuModule</title>
<path fill="none" stroke="black" d="M1590.58,-122.02C1590.58,-139.37 1590.58,-163 1590.58,-163 1590.58,-163 1440.86,-163 1440.86,-163"/>
<polygon fill="black" stroke="black" points="1440.86,-159.5 1430.86,-163 1440.86,-166.5 1440.86,-159.5"/>
</g>
<!-- TableColumnOptionComponent -->
<g id="node13" class="node">
<title>TableColumnOptionComponent</title>
<polygon fill="#8dd3c7" stroke="black" points="1444.71,-122 1441.71,-126 1420.71,-126 1417.71,-122 1247.29,-122 1247.29,-86 1444.71,-86 1444.71,-122"/>
<text text-anchor="middle" x="1346" y="-99.8" font-family="Times,serif" font-size="14.00">TableColumnOptionComponent</text>
</g>
<!-- TableColumnOptionComponent->TableColumnMenuModule -->
<g id="edge11" class="edge">
<title>TableColumnOptionComponent->TableColumnMenuModule</title>
<path fill="none" stroke="black" d="M1346,-122.11C1346,-122.11 1346,-140.99 1346,-140.99"/>
<polygon fill="black" stroke="black" points="1342.5,-140.99 1346,-150.99 1349.5,-140.99 1342.5,-140.99"/>
</g>
<!-- TableShowArchivedSlideComponent -->
<g id="node14" class="node">
<title>TableShowArchivedSlideComponent</title>
<polygon fill="#8dd3c7" stroke="black" points="1228.96,-122 1225.96,-126 1204.96,-126 1201.96,-122 1003.04,-122 1003.04,-86 1228.96,-86 1228.96,-122"/>
<text text-anchor="middle" x="1116" y="-99.8" font-family="Times,serif" font-size="14.00">TableShowArchivedSlideComponent</text>
</g>
<!-- TableShowArchivedSlideComponent->TableColumnMenuModule -->
<g id="edge12" class="edge">
<title>TableShowArchivedSlideComponent->TableColumnMenuModule</title>
<path fill="none" stroke="black" d="M1152.83,-122.01C1152.83,-138.05 1152.83,-159 1152.83,-159 1152.83,-159 1251.27,-159 1251.27,-159"/>
<polygon fill="black" stroke="black" points="1251.27,-162.5 1261.27,-159 1251.27,-155.5 1251.27,-162.5"/>
</g>
<!-- TableColumnMenuComponent -->
<g id="node16" class="node">
<title>TableColumnMenuComponent </title>
<polygon fill="#fb8072" stroke="black" points="1659.48,-252 1464.52,-252 1464.52,-216 1659.48,-216 1659.48,-252"/>
<text text-anchor="middle" x="1562" y="-229.8" font-family="Times,serif" font-size="14.00">TableColumnMenuComponent </text>
</g>
<!-- TableColumnMenuModule->TableColumnMenuComponent -->
<g id="edge13" class="edge">
<title>TableColumnMenuModule->TableColumnMenuComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1430.72,-175C1478.08,-175 1527.67,-175 1527.67,-175 1527.67,-175 1527.67,-205.98 1527.67,-205.98"/>
<polygon fill="black" stroke="black" points="1524.17,-205.98 1527.67,-215.98 1531.17,-205.98 1524.17,-205.98"/>
</g>
<!-- TableColumnOptionComponent -->
<g id="node17" class="node">
<title>TableColumnOptionComponent </title>
<polygon fill="#fb8072" stroke="black" points="1446.21,-252 1245.79,-252 1245.79,-216 1446.21,-216 1446.21,-252"/>
<text text-anchor="middle" x="1346" y="-229.8" font-family="Times,serif" font-size="14.00">TableColumnOptionComponent </text>
</g>
<!-- TableColumnMenuModule->TableColumnOptionComponent -->
<g id="edge14" class="edge">
<title>TableColumnMenuModule->TableColumnOptionComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1346,-187.11C1346,-187.11 1346,-205.99 1346,-205.99"/>
<polygon fill="black" stroke="black" points="1342.5,-205.99 1346,-215.99 1349.5,-205.99 1342.5,-205.99"/>
</g>
<!-- TableShowArchivedSlideComponent -->
<g id="node18" class="node">
<title>TableShowArchivedSlideComponent </title>
<polygon fill="#fb8072" stroke="black" points="1227.96,-252 998.04,-252 998.04,-216 1227.96,-216 1227.96,-252"/>
<text text-anchor="middle" x="1113" y="-229.8" font-family="Times,serif" font-size="14.00">TableShowArchivedSlideComponent </text>
</g>
<!-- TableColumnMenuModule->TableShowArchivedSlideComponent -->
<g id="edge15" class="edge">
<title>TableColumnMenuModule->TableShowArchivedSlideComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1261.18,-166C1182.64,-166 1077.92,-166 1077.92,-166 1077.92,-166 1077.92,-205.78 1077.92,-205.78"/>
<polygon fill="black" stroke="black" points="1074.42,-205.78 1077.92,-215.78 1081.42,-205.78 1074.42,-205.78"/>
</g>
<!-- FilterHeaderRowDirective -->
<g id="node19" class="node">
<title>FilterHeaderRowDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="2056.77,-122 2053.77,-126 2032.77,-126 2029.77,-122 1891.23,-122 1891.23,-86 2056.77,-86 2056.77,-122"/>
<text text-anchor="middle" x="1974" y="-99.8" font-family="Times,serif" font-size="14.00">FilterHeaderRowDirective</text>
</g>
<!-- TableFilterModule -->
<g id="node21" class="node">
<title>TableFilterModule</title>
<polygon fill="#8dd3c7" stroke="black" points="1849.75,-187 1846.75,-191 1825.75,-191 1822.75,-187 1728.25,-187 1728.25,-151 1849.75,-151 1849.75,-187"/>
<text text-anchor="middle" x="1789" y="-164.8" font-family="Times,serif" font-size="14.00">TableFilterModule</text>
</g>
<!-- FilterHeaderRowDirective->TableFilterModule -->
<g id="edge16" class="edge">
<title>FilterHeaderRowDirective->TableFilterModule</title>
<path fill="none" stroke="black" d="M2001.63,-122.13C2001.63,-142.57 2001.63,-173 2001.63,-173 2001.63,-173 1859.93,-173 1859.93,-173"/>
<polygon fill="black" stroke="black" points="1859.93,-169.5 1849.93,-173 1859.93,-176.5 1859.93,-169.5"/>
</g>
<!-- ToFilterColumnNamesPipe -->
<g id="node20" class="node">
<title>ToFilterColumnNamesPipe</title>
<polygon fill="#8dd3c7" stroke="black" points="1873.26,-122 1870.26,-126 1849.26,-126 1846.26,-122 1702.74,-122 1702.74,-86 1873.26,-86 1873.26,-122"/>
<text text-anchor="middle" x="1788" y="-99.8" font-family="Times,serif" font-size="14.00">ToFilterColumnNamesPipe</text>
</g>
<!-- ToFilterColumnNamesPipe->TableFilterModule -->
<g id="edge17" class="edge">
<title>ToFilterColumnNamesPipe->TableFilterModule</title>
<path fill="none" stroke="black" d="M1789,-122.11C1789,-122.11 1789,-140.99 1789,-140.99"/>
<polygon fill="black" stroke="black" points="1785.5,-140.99 1789,-150.99 1792.5,-140.99 1785.5,-140.99"/>
</g>
<!-- FilterHeaderRowDirective -->
<g id="node22" class="node">
<title>FilterHeaderRowDirective </title>
<polygon fill="#fb8072" stroke="black" points="2060.27,-252 1891.73,-252 1891.73,-216 2060.27,-216 2060.27,-252"/>
<text text-anchor="middle" x="1976" y="-229.8" font-family="Times,serif" font-size="14.00">FilterHeaderRowDirective </text>
</g>
<!-- TableFilterModule->FilterHeaderRowDirective -->
<g id="edge18" class="edge">
<title>TableFilterModule->FilterHeaderRowDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1849.94,-180C1894.3,-180 1946.62,-180 1946.62,-180 1946.62,-180 1946.62,-205.72 1946.62,-205.72"/>
<polygon fill="black" stroke="black" points="1943.12,-205.72 1946.62,-215.72 1950.12,-205.72 1943.12,-205.72"/>
</g>
<!-- ToFilterColumnNamesPipe -->
<g id="node23" class="node">
<title>ToFilterColumnNamesPipe </title>
<polygon fill="#fb8072" stroke="black" points="1873.26,-252 1698.74,-252 1698.74,-216 1873.26,-216 1873.26,-252"/>
<text text-anchor="middle" x="1786" y="-229.8" font-family="Times,serif" font-size="14.00">ToFilterColumnNamesPipe </text>
</g>
<!-- TableFilterModule->ToFilterColumnNamesPipe -->
<g id="edge19" class="edge">
<title>TableFilterModule->ToFilterColumnNamesPipe </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1789,-187.11C1789,-187.11 1789,-205.99 1789,-205.99"/>
<polygon fill="black" stroke="black" points="1785.5,-205.99 1789,-215.99 1792.5,-205.99 1785.5,-205.99"/>
</g>
<!-- RowActionCheckPipe -->
<g id="node24" class="node">
<title>RowActionCheckPipe</title>
<polygon fill="#8dd3c7" stroke="black" points="2893.7,-122 2890.7,-126 2869.7,-126 2866.7,-122 2752.3,-122 2752.3,-86 2893.7,-86 2893.7,-122"/>
<text text-anchor="middle" x="2823" y="-99.8" font-family="Times,serif" font-size="14.00">RowActionCheckPipe</text>
</g>
<!-- TableRowActionsModule -->
<g id="node28" class="node">
<title>TableRowActionsModule</title>
<polygon fill="#8dd3c7" stroke="black" points="2524.91,-187 2521.91,-191 2500.91,-191 2497.91,-187 2363.09,-187 2363.09,-151 2524.91,-151 2524.91,-187"/>
<text text-anchor="middle" x="2444" y="-164.8" font-family="Times,serif" font-size="14.00">TableRowActionsModule</text>
</g>
<!-- RowActionCheckPipe->TableRowActionsModule -->
<g id="edge20" class="edge">
<title>RowActionCheckPipe->TableRowActionsModule</title>
<path fill="none" stroke="black" d="M2847.28,-122.27C2847.28,-140.56 2847.28,-166 2847.28,-166 2847.28,-166 2535.13,-166 2535.13,-166"/>
<polygon fill="black" stroke="black" points="2535.13,-162.5 2525.13,-166 2535.13,-169.5 2535.13,-162.5"/>
</g>
<!-- TableRowActionDirective -->
<g id="node25" class="node">
<title>TableRowActionDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="2734,-122 2731,-126 2710,-126 2707,-122 2570,-122 2570,-86 2734,-86 2734,-122"/>
<text text-anchor="middle" x="2652" y="-99.8" font-family="Times,serif" font-size="14.00">TableRowActionDirective</text>
</g>
<!-- TableRowActionDirective->TableRowActionsModule -->
<g id="edge21" class="edge">
<title>TableRowActionDirective->TableRowActionsModule</title>
<path fill="none" stroke="black" d="M2679.42,-122.01C2679.42,-138.05 2679.42,-159 2679.42,-159 2679.42,-159 2535.02,-159 2535.02,-159"/>
<polygon fill="black" stroke="black" points="2535.02,-155.5 2525.02,-159 2535.02,-162.5 2535.02,-155.5"/>
</g>
<!-- TableRowActionExecutingDirective -->
<g id="node26" class="node">
<title>TableRowActionExecutingDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="2551.76,-122 2548.76,-126 2527.76,-126 2524.76,-122 2330.24,-122 2330.24,-86 2551.76,-86 2551.76,-122"/>
<text text-anchor="middle" x="2441" y="-99.8" font-family="Times,serif" font-size="14.00">TableRowActionExecutingDirective</text>
</g>
<!-- TableRowActionExecutingDirective->TableRowActionsModule -->
<g id="edge22" class="edge">
<title>TableRowActionExecutingDirective->TableRowActionsModule</title>
<path fill="none" stroke="black" d="M2444,-122.11C2444,-122.11 2444,-140.99 2444,-140.99"/>
<polygon fill="black" stroke="black" points="2440.5,-140.99 2444,-150.99 2447.5,-140.99 2440.5,-140.99"/>
</g>
<!-- TableRowHeaderActionDirective -->
<g id="node27" class="node">
<title>TableRowHeaderActionDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="2312.41,-122 2309.41,-126 2288.41,-126 2285.41,-122 2107.59,-122 2107.59,-86 2312.41,-86 2312.41,-122"/>
<text text-anchor="middle" x="2210" y="-99.8" font-family="Times,serif" font-size="14.00">TableRowHeaderActionDirective</text>
</g>
<!-- TableRowHeaderActionDirective->TableRowActionsModule -->
<g id="edge23" class="edge">
<title>TableRowHeaderActionDirective->TableRowActionsModule</title>
<path fill="none" stroke="black" d="M2241.32,-122.01C2241.32,-138.05 2241.32,-159 2241.32,-159 2241.32,-159 2353.02,-159 2353.02,-159"/>
<polygon fill="black" stroke="black" points="2353.02,-162.5 2363.02,-159 2353.02,-155.5 2353.02,-162.5"/>
</g>
<!-- RowActionCheckPipe -->
<g id="node29" class="node">
<title>RowActionCheckPipe </title>
<polygon fill="#fb8072" stroke="black" points="2899.2,-252 2754.8,-252 2754.8,-216 2899.2,-216 2899.2,-252"/>
<text text-anchor="middle" x="2827" y="-229.8" font-family="Times,serif" font-size="14.00">RowActionCheckPipe </text>
</g>
<!-- TableRowActionsModule->RowActionCheckPipe -->
<g id="edge24" class="edge">
<title>TableRowActionsModule->RowActionCheckPipe </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M2525,-173C2630.32,-173 2800.97,-173 2800.97,-173 2800.97,-173 2800.97,-205.7 2800.97,-205.7"/>
<polygon fill="black" stroke="black" points="2797.47,-205.7 2800.97,-215.7 2804.47,-205.7 2797.47,-205.7"/>
</g>
<!-- TableRowActionDirective -->
<g id="node30" class="node">
<title>TableRowActionDirective </title>
<polygon fill="#fb8072" stroke="black" points="2737,-252 2569,-252 2569,-216 2737,-216 2737,-252"/>
<text text-anchor="middle" x="2653" y="-229.8" font-family="Times,serif" font-size="14.00">TableRowActionDirective </text>
</g>
<!-- TableRowActionsModule->TableRowActionDirective -->
<g id="edge25" class="edge">
<title>TableRowActionsModule->TableRowActionDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M2524.78,-180C2572.87,-180 2624.58,-180 2624.58,-180 2624.58,-180 2624.58,-205.72 2624.58,-205.72"/>
<polygon fill="black" stroke="black" points="2621.08,-205.72 2624.58,-215.72 2628.08,-205.72 2621.08,-205.72"/>
</g>
<!-- TableRowActionExecutingDirective -->
<g id="node31" class="node">
<title>TableRowActionExecutingDirective </title>
<polygon fill="#fb8072" stroke="black" points="2551.26,-252 2326.74,-252 2326.74,-216 2551.26,-216 2551.26,-252"/>
<text text-anchor="middle" x="2439" y="-229.8" font-family="Times,serif" font-size="14.00">TableRowActionExecutingDirective </text>
</g>
<!-- TableRowActionsModule->TableRowActionExecutingDirective -->
<g id="edge26" class="edge">
<title>TableRowActionsModule->TableRowActionExecutingDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M2444,-187.11C2444,-187.11 2444,-205.99 2444,-205.99"/>
<polygon fill="black" stroke="black" points="2440.5,-205.99 2444,-215.99 2447.5,-205.99 2440.5,-205.99"/>
</g>
<!-- TableRowHeaderActionDirective -->
<g id="node32" class="node">
<title>TableRowHeaderActionDirective </title>
<polygon fill="#fb8072" stroke="black" points="2308.41,-252 2099.59,-252 2099.59,-216 2308.41,-216 2308.41,-252"/>
<text text-anchor="middle" x="2204" y="-229.8" font-family="Times,serif" font-size="14.00">TableRowHeaderActionDirective </text>
</g>
<!-- TableRowActionsModule->TableRowHeaderActionDirective -->
<g id="edge27" class="edge">
<title>TableRowActionsModule->TableRowHeaderActionDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M2363.12,-166C2283.72,-166 2174.43,-166 2174.43,-166 2174.43,-166 2174.43,-205.78 2174.43,-205.78"/>
<polygon fill="black" stroke="black" points="2170.93,-205.78 2174.43,-215.78 2177.93,-205.78 2170.93,-205.78"/>
</g>
</g>
</svg>
</div>
<i id="fullscreen" class="icon ion-ios-resize module-graph-fullscreen-btn" aria-hidden="true"></i>
<div class="btn-group size-buttons">
<button id="zoom-in" class="btn btn-default btn-sm">Zoom in</button>
<button id="reset" class="btn btn-default btn-sm">Reset</button>
<button id="zoom-out" class="btn btn-default btn-sm">Zoom out</button>
</div>
</div>
<div class="tab-content overview">
<div class="row">
<div class="col-sm-3">
<div class="card text-center">
<div class="card-block">
<h4 class="card-title"><span class="icon ion-ios-archive"></span></h4>
<p class="card-text">
<a href="./modules.html">5 Modules</a>
</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-center">
<div class="card-block">
<h4 class="card-title"><span class="icon ion-md-cog"></span></h4>
<p class="card-text">16 Components</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-center">
<div class="card-block">
<h4 class="card-title"><span class="icon ion-md-code-working"></span></h4>
<p class="card-text">12 Directives</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-center">
<div class="card-block">
<h4 class="card-title"><span class="icon ion-md-arrow-round-down"></span></h4>
<p class="card-text">5 Injectables</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-center">
<div class="card-block">
<h4 class="card-title"><span class="icon ion-md-add"></span></h4>
<p class="card-text">2 Pipes</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-center">
<div class="card-block">
<h4 class="card-title"><span class="icon ion-ios-paper"></span></h4>
<p class="card-text">1 Class</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card text-center">
<div class="card-block">
<h4 class="card-title"><span class="icon ion-md-information-circle-outline"></span></h4>
<p class="card-text">7 Interfaces</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/libs/svg-pan-zoom.min.js"></script>
<script src="js/svg-pan-zoom.controls.js"></script>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>
<label class="dark-mode-switch">
<input type="checkbox">
<span class="slider">
<svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</span>
</label>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 0;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'overview';
var COMPODOC_CURRENT_PAGE_URL = 'overview.html';
var MAX_SEARCH_RESULTS = 15;
</script>
<script>
$darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
checkToggle(darkModeState);
if ($darkModeToggleSwitchers.length > 0) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].addEventListener('change', function (event) {
darkModeState = !darkModeState;
toggleDarkMode(darkModeState);
});
}
}
</script>
<script src="./js/libs/custom-elements.min.js"></script>
<script src="./js/libs/lit-html.js"></script>
<script src="./js/menu-wc.js" defer></script>
<script nomodule src="./js/menu-wc_es5.js" defer></script>
<script src="./js/libs/bootstrap-native.js"></script>
<script src="./js/libs/es6-shim.min.js"></script>
<script src="./js/libs/EventDispatcher.js"></script>
<script src="./js/libs/promise.min.js"></script>
<script src="./js/libs/zepto.min.js"></script>
<script src="./js/compodoc.js"></script>
<script src="./js/tabs.js"></script>
<script src="./js/menu.js"></script>
<script src="./js/libs/clipboard.min.js"></script>
<script src="./js/libs/prism.js"></script>
<script src="./js/sourceCode.js"></script>
<script src="./js/search/search.js"></script>
<script src="./js/search/lunr.min.js"></script>
<script src="./js/search/search-lunr.js"></script>
<script src="./js/search/search_index.js"></script>
<script src="./js/lazy-load-graphs.js"></script>
</body>
</html>