@compodoc/compodoc
Version:
The missing documentation tool for your Angular application
485 lines (436 loc) • 21.9 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>@compodoc/compodoc documentation</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>
<script>
// --- Iframe navigation tracking for Template Playground ---
function sendCurrentUrlToParent() {
if (window.parent && window.parent !== window) {
window.parent.postMessage({
type: 'compodoc-iframe-navigate',
url: window.location.pathname + window.location.hash
}, '*');
}
}
window.addEventListener('hashchange', sendCurrentUrlToParent, false);
window.addEventListener('popstate', sendCurrentUrlToParent, false);
window.addEventListener('DOMContentLoaded', sendCurrentUrlToParent, false);
</script>
<div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
<div class="d-flex">
<a href="./" class="navbar-brand">@compodoc/compodoc documentation</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="923pt" height="352pt"
viewBox="0.00 0.00 923.00 352.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 348)">
<title>dependencies</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-348 919,-348 919,4 -4,4"/>
<text text-anchor="start" x="436.51" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
<polygon fill="#ffffb3" stroke="transparent" points="223.5,-10 223.5,-30 243.5,-30 243.5,-10 223.5,-10"/>
<text text-anchor="start" x="247.13" y="-15.4" font-family="Times-12" font-size="14.00">  Declarations</text>
<polygon fill="#8dd3c7" stroke="transparent" points="336.5,-10 336.5,-30 356.5,-30 356.5,-10 336.5,-10"/>
<text text-anchor="start" x="360.23" y="-15.4" font-family="Times-12" font-size="14.00">  Module</text>
<polygon fill="#80b1d3" stroke="transparent" points="422.5,-10 422.5,-30 442.5,-30 442.5,-10 422.5,-10"/>
<text text-anchor="start" x="446.28" y="-15.4" font-family="Times-12" font-size="14.00">  Bootstrap</text>
<polygon fill="#fdb462" stroke="transparent" points="519.5,-10 519.5,-30 539.5,-30 539.5,-10 519.5,-10"/>
<text text-anchor="start" x="543.17" y="-15.4" font-family="Times-12" font-size="14.00">  Providers</text>
<polygon fill="#fb8072" stroke="transparent" points="615.5,-10 615.5,-30 635.5,-30 635.5,-10 615.5,-10"/>
<text text-anchor="start" x="639.23" y="-15.4" font-family="Times-12" font-size="14.00">  Exports</text>
<g id="clust1" class="cluster">
<title>cluster_AppModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-336 408,-336 408,-70 8,-70"/>
</g>
<g id="clust2" class="cluster">
<title>cluster_AppModule_declarations</title>
<polygon fill="none" stroke="black" points="53,-78 53,-130 400,-130 400,-78 53,-78"/>
</g>
<g id="clust6" class="cluster">
<title>cluster_AppModule_imports</title>
<polygon fill="none" stroke="black" points="204,-146 204,-198 400,-198 400,-146 204,-146"/>
</g>
<g id="clust8" class="cluster">
<title>cluster_AppModule_bootstrap</title>
<polygon fill="none" stroke="black" points="122,-276 122,-328 244,-328 244,-276 122,-276"/>
</g>
<g id="clust9" class="cluster">
<title>cluster_AppModule_providers</title>
<polygon fill="none" stroke="black" points="16,-146 16,-198 142,-198 142,-146 16,-146"/>
</g>
<g id="clust10" class="cluster">
<title>cluster_BarModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="416,-70 416,-138 907,-138 907,-70 416,-70"/>
</g>
<g id="clust11" class="cluster">
<title>cluster_BarModule_declarations</title>
<polygon fill="none" stroke="black" points="795,-78 795,-130 899,-130 899,-78 795,-78"/>
</g>
<g id="clust12" class="cluster">
<title>cluster_BarModule_BarComponent_providers</title>
<polygon fill="none" stroke="black" points="663,-78 663,-130 787,-130 787,-78 663,-78"/>
</g>
<g id="clust15" class="cluster">
<title>cluster_BarModule_exports</title>
<polygon fill="none" stroke="black" points="424,-78 424,-130 655,-130 655,-78 424,-78"/>
</g>
<!-- BarComponent -->
<g id="node1" class="node">
<title>BarComponent</title>
<polygon fill="#ffffb3" stroke="black" points="391.55,-122 290.45,-122 290.45,-86 391.55,-86 391.55,-122"/>
<text text-anchor="middle" x="341" y="-99.8" font-family="Times,serif" font-size="14.00">BarComponent</text>
</g>
<!-- AppModule -->
<g id="node4" class="node">
<title>AppModule</title>
<polygon fill="#8dd3c7" stroke="black" points="224.66,-255 221.66,-259 200.66,-259 197.66,-255 141.34,-255 141.34,-219 224.66,-219 224.66,-255"/>
<text text-anchor="middle" x="183" y="-232.8" font-family="Times,serif" font-size="14.00">AppModule</text>
</g>
<!-- BarComponent->AppModule -->
<g id="edge1" class="edge">
<title>BarComponent->AppModule</title>
<path fill="none" stroke="black" d="M302.89,-122.2C302.89,-157.31 302.89,-231 302.89,-231 302.89,-231 234.93,-231 234.93,-231"/>
<polygon fill="black" stroke="black" points="234.93,-227.5 224.93,-231 234.93,-234.5 234.93,-227.5"/>
</g>
<!-- BarModule -->
<g id="node5" class="node">
<title>BarModule</title>
<polygon fill="#8dd3c7" stroke="black" points="391.76,-190 388.76,-194 367.76,-194 364.76,-190 312.24,-190 312.24,-154 391.76,-154 391.76,-190"/>
<text text-anchor="middle" x="352" y="-167.8" font-family="Times,serif" font-size="14.00">BarModule</text>
</g>
<!-- BarComponent->BarModule -->
<g id="edge8" class="edge">
<title>BarComponent->BarModule</title>
<path fill="none" stroke="black" d="M338.67,-122.22C338.67,-122.22 338.67,-143.73 338.67,-143.73"/>
<polygon fill="black" stroke="black" points="335.17,-143.73 338.67,-153.73 342.17,-143.73 335.17,-143.73"/>
</g>
<!-- FooComponent -->
<g id="node2" class="node">
<title>FooComponent</title>
<polygon fill="#ffffb3" stroke="black" points="164.62,-122 61.38,-122 61.38,-86 164.62,-86 164.62,-122"/>
<text text-anchor="middle" x="113" y="-99.8" font-family="Times,serif" font-size="14.00">FooComponent</text>
</g>
<!-- FooComponent->AppModule -->
<g id="edge2" class="edge">
<title>FooComponent->AppModule</title>
<path fill="none" stroke="black" d="M156.76,-122.21C156.76,-122.21 156.76,-208.58 156.76,-208.58"/>
<polygon fill="black" stroke="black" points="153.26,-208.58 156.76,-218.58 160.26,-208.58 153.26,-208.58"/>
</g>
<!-- FooDirective -->
<g id="node3" class="node">
<title>FooDirective</title>
<polygon fill="#ffffb3" stroke="black" points="271.87,-122 182.13,-122 182.13,-86 271.87,-86 271.87,-122"/>
<text text-anchor="middle" x="227" y="-99.8" font-family="Times,serif" font-size="14.00">FooDirective</text>
</g>
<!-- FooDirective->AppModule -->
<g id="edge3" class="edge">
<title>FooDirective->AppModule</title>
<path fill="none" stroke="black" d="M197.2,-122.21C197.2,-122.21 197.2,-208.58 197.2,-208.58"/>
<polygon fill="black" stroke="black" points="193.7,-208.58 197.2,-218.58 200.7,-208.58 193.7,-208.58"/>
</g>
<!-- FooComponent -->
<g id="node7" class="node">
<title>FooComponent </title>
<polygon fill="#80b1d3" stroke="black" points="236.12,-320 129.88,-320 129.88,-284 236.12,-284 236.12,-320"/>
<text text-anchor="middle" x="183" y="-297.8" font-family="Times,serif" font-size="14.00">FooComponent </text>
</g>
<!-- AppModule->FooComponent -->
<g id="edge6" class="edge">
<title>AppModule->FooComponent </title>
<path fill="none" stroke="black" stroke-dasharray="1,5" d="M183,-255.11C183,-255.11 183,-273.99 183,-273.99"/>
<polygon fill="black" stroke="black" points="179.5,-273.99 183,-283.99 186.5,-273.99 179.5,-273.99"/>
</g>
<!-- BarModule->AppModule -->
<g id="edge4" class="edge">
<title>BarModule->AppModule</title>
<path fill="none" stroke="black" d="M352,-190.28C352,-211.32 352,-243 352,-243 352,-243 234.78,-243 234.78,-243"/>
<polygon fill="black" stroke="black" points="234.78,-239.5 224.78,-243 234.78,-246.5 234.78,-239.5"/>
</g>
<!-- BarComponent -->
<g id="node11" class="node">
<title>BarComponent </title>
<polygon fill="#fb8072" stroke="black" points="646.54,-122 541.46,-122 541.46,-86 646.54,-86 646.54,-122"/>
<text text-anchor="middle" x="594" y="-99.8" font-family="Times,serif" font-size="14.00">BarComponent </text>
</g>
<!-- BarModule->BarComponent -->
<g id="edge11" class="edge">
<title>BarModule->BarComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M391.96,-169C460.7,-169 594,-169 594,-169 594,-169 594,-132.11 594,-132.11"/>
<polygon fill="black" stroke="black" points="597.5,-132.11 594,-122.11 590.5,-132.11 597.5,-132.11"/>
</g>
<!-- BarDirective -->
<g id="node12" class="node">
<title>BarDirective </title>
<polygon fill="#fb8072" stroke="black" points="523.79,-122 432.21,-122 432.21,-86 523.79,-86 523.79,-122"/>
<text text-anchor="middle" x="478" y="-99.8" font-family="Times,serif" font-size="14.00">BarDirective </text>
</g>
<!-- BarModule->BarDirective -->
<g id="edge12" class="edge">
<title>BarModule->BarDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M391.87,-162C428.78,-162 478,-162 478,-162 478,-162 478,-132.03 478,-132.03"/>
<polygon fill="black" stroke="black" points="481.5,-132.03 478,-122.03 474.5,-132.03 481.5,-132.03"/>
</g>
<!-- FooModule -->
<g id="node6" class="node">
<title>FooModule</title>
<polygon fill="#8dd3c7" stroke="black" points="293.83,-190 290.83,-194 269.83,-194 266.83,-190 212.17,-190 212.17,-154 293.83,-154 293.83,-190"/>
<text text-anchor="middle" x="253" y="-167.8" font-family="Times,serif" font-size="14.00">FooModule</text>
</g>
<!-- FooModule->AppModule -->
<g id="edge5" class="edge">
<title>FooModule->AppModule</title>
<path fill="none" stroke="black" d="M218.58,-190.11C218.58,-190.11 218.58,-208.99 218.58,-208.99"/>
<polygon fill="black" stroke="black" points="215.08,-208.99 218.58,-218.99 222.08,-208.99 215.08,-208.99"/>
</g>
<!-- FooService -->
<g id="node8" class="node">
<title>FooService</title>
<ellipse fill="#fdb462" stroke="black" cx="79" cy="-172" rx="55.03" ry="18"/>
<text text-anchor="middle" x="79" y="-167.8" font-family="Times,serif" font-size="14.00">FooService</text>
</g>
<!-- FooService->AppModule -->
<g id="edge7" class="edge">
<title>FooService->AppModule</title>
<path fill="none" stroke="black" d="M134.13,-172C142.8,-172 148.97,-172 148.97,-172 148.97,-172 148.97,-208.89 148.97,-208.89"/>
<polygon fill="black" stroke="black" points="145.47,-208.89 148.97,-218.89 152.47,-208.89 145.47,-208.89"/>
</g>
<!-- BarDirective -->
<g id="node9" class="node">
<title>BarDirective</title>
<polygon fill="#ffffb3" stroke="black" points="891.3,-122 802.7,-122 802.7,-86 891.3,-86 891.3,-122"/>
<text text-anchor="middle" x="847" y="-99.8" font-family="Times,serif" font-size="14.00">BarDirective</text>
</g>
<!-- BarDirective->BarModule -->
<g id="edge10" class="edge">
<title>BarDirective->BarModule</title>
<path fill="none" stroke="black" d="M847,-122.32C847,-145.66 847,-183 847,-183 847,-183 402.09,-183 402.09,-183"/>
<polygon fill="black" stroke="black" points="402.09,-179.5 392.09,-183 402.09,-186.5 402.09,-179.5"/>
</g>
<!-- BarService -->
<g id="node10" class="node">
<title>BarService</title>
<ellipse fill="#fdb462" stroke="black" cx="725" cy="-104" rx="53.87" ry="18"/>
<text text-anchor="middle" x="725" y="-99.8" font-family="Times,serif" font-size="14.00">BarService</text>
</g>
<!-- BarService->BarComponent -->
<g id="edge9" class="edge">
<title>BarService->BarComponent</title>
<path fill="none" stroke="black" d="M707.02,-121C707.02,-129.5 707.02,-138 707.02,-138 707.02,-138 365.22,-138 365.22,-138 365.22,-138 365.22,-132.19 365.22,-132.19"/>
<polygon fill="black" stroke="black" points="368.72,-132.19 365.22,-122.19 361.72,-132.19 368.72,-132.19"/>
</g>
<!-- BarService->BarModule -->
<g id="edge13" class="edge">
<title>BarService->BarModule</title>
<path fill="none" stroke="black" d="M742.98,-121.06C742.98,-142.35 742.98,-176 742.98,-176 742.98,-176 402,-176 402,-176"/>
<polygon fill="black" stroke="black" points="402,-172.5 392,-176 402,-179.5 402,-172.5"/>
</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">6 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">2 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">4 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">3 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">1 Pipe</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-ios-git-branch"></span></h4>
<p class="card-text">
<a href="./routes.html">0 </a>
</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/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>