@rxap/forms
Version:
This package provides a set of tools and directives to simplify working with Angular forms, including reactive forms, custom validators, and form directives for handling loading, submitting, and error states. It offers decorators for defining forms and co
682 lines (637 loc) • 37.8 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>angular-forms</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-forms</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="3396pt" height="284pt"
viewBox="0.00 0.00 3396.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 3392,-280 3392,4 -4,4"/>
<text text-anchor="start" x="1673.01" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
<polygon fill="#ffffb3" stroke="transparent" points="1460,-10 1460,-30 1480,-30 1480,-10 1460,-10"/>
<text text-anchor="start" x="1483.63" y="-15.4" font-family="Times-12" font-size="14.00">  Declarations</text>
<polygon fill="#8dd3c7" stroke="transparent" points="1573,-10 1573,-30 1593,-30 1593,-10 1573,-10"/>
<text text-anchor="start" x="1596.73" y="-15.4" font-family="Times-12" font-size="14.00">  Module</text>
<polygon fill="#80b1d3" stroke="transparent" points="1659,-10 1659,-30 1679,-30 1679,-10 1659,-10"/>
<text text-anchor="start" x="1682.78" y="-15.4" font-family="Times-12" font-size="14.00">  Bootstrap</text>
<polygon fill="#fdb462" stroke="transparent" points="1756,-10 1756,-30 1776,-30 1776,-10 1756,-10"/>
<text text-anchor="start" x="1779.67" y="-15.4" font-family="Times-12" font-size="14.00">  Providers</text>
<polygon fill="#fb8072" stroke="transparent" points="1852,-10 1852,-30 1872,-30 1872,-10 1852,-10"/>
<text text-anchor="start" x="1875.73" y="-15.4" font-family="Times-12" font-size="14.00">  Exports</text>
<g id="clust1" class="cluster">
<title>cluster_RxapFormsModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-268 3380,-268 3380,-70 8,-70"/>
</g>
<g id="clust3" class="cluster">
<title>cluster_RxapFormsModule_imports</title>
<polygon fill="none" stroke="black" points="45,-78 45,-130 3343,-130 3343,-78 45,-78"/>
</g>
<g id="clust4" class="cluster">
<title>cluster_RxapFormsModule_exports</title>
<polygon fill="none" stroke="black" points="16,-208 16,-260 3372,-260 3372,-208 16,-208"/>
</g>
<!-- FormControlErrorDirective -->
<g id="node1" class="node">
<title>FormControlErrorDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="3335.23,-122 3332.23,-126 3311.23,-126 3308.23,-122 3164.77,-122 3164.77,-86 3335.23,-86 3335.23,-122"/>
<text text-anchor="middle" x="3250" y="-99.8" font-family="Times,serif" font-size="14.00">FormControlErrorDirective</text>
</g>
<!-- RxapFormsModule -->
<g id="node18" class="node">
<title>RxapFormsModule</title>
<polygon fill="#8dd3c7" stroke="black" points="1702.38,-187 1699.38,-191 1678.38,-191 1675.38,-187 1577.62,-187 1577.62,-151 1702.38,-151 1702.38,-187"/>
<text text-anchor="middle" x="1640" y="-164.8" font-family="Times,serif" font-size="14.00">RxapFormsModule</text>
</g>
<!-- FormControlErrorDirective->RxapFormsModule -->
<g id="edge1" class="edge">
<title>FormControlErrorDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M3168.46,-122.17C3168.46,-141.09 3168.46,-168 3168.46,-168 3168.46,-168 1712.77,-168 1712.77,-168"/>
<polygon fill="black" stroke="black" points="1712.77,-164.5 1702.77,-168 1712.77,-171.5 1712.77,-164.5"/>
</g>
<!-- FormControlMarkDirtyDirective -->
<g id="node2" class="node">
<title>FormControlMarkDirtyDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="3146.56,-122 3143.56,-126 3122.56,-126 3119.56,-122 2945.44,-122 2945.44,-86 3146.56,-86 3146.56,-122"/>
<text text-anchor="middle" x="3046" y="-99.8" font-family="Times,serif" font-size="14.00">FormControlMarkDirtyDirective</text>
</g>
<!-- FormControlMarkDirtyDirective->RxapFormsModule -->
<g id="edge2" class="edge">
<title>FormControlMarkDirtyDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M2958.81,-122.27C2958.81,-140.56 2958.81,-166 2958.81,-166 2958.81,-166 1712.72,-166 1712.72,-166"/>
<polygon fill="black" stroke="black" points="1712.72,-162.5 1702.72,-166 1712.72,-169.5 1712.72,-162.5"/>
</g>
<!-- FormControlMarkPristineDirective -->
<g id="node3" class="node">
<title>FormControlMarkPristineDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="2927.29,-122 2924.29,-126 2903.29,-126 2900.29,-122 2712.71,-122 2712.71,-86 2927.29,-86 2927.29,-122"/>
<text text-anchor="middle" x="2820" y="-99.8" font-family="Times,serif" font-size="14.00">FormControlMarkPristineDirective</text>
</g>
<!-- FormControlMarkPristineDirective->RxapFormsModule -->
<g id="edge3" class="edge">
<title>FormControlMarkPristineDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M2723.05,-122C2723.05,-139.68 2723.05,-164 2723.05,-164 2723.05,-164 1712.51,-164 1712.51,-164"/>
<polygon fill="black" stroke="black" points="1712.51,-160.5 1702.51,-164 1712.51,-167.5 1712.51,-160.5"/>
</g>
<!-- FormControlMarkTouchedDirective -->
<g id="node4" class="node">
<title>FormControlMarkTouchedDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="2695.5,-122 2692.5,-126 2671.5,-126 2668.5,-122 2474.5,-122 2474.5,-86 2695.5,-86 2695.5,-122"/>
<text text-anchor="middle" x="2585" y="-99.8" font-family="Times,serif" font-size="14.00">FormControlMarkTouchedDirective</text>
</g>
<!-- FormControlMarkTouchedDirective->RxapFormsModule -->
<g id="edge4" class="edge">
<title>FormControlMarkTouchedDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M2482.38,-122.03C2482.38,-139.06 2482.38,-162 2482.38,-162 2482.38,-162 1712.63,-162 1712.63,-162"/>
<polygon fill="black" stroke="black" points="1712.63,-158.5 1702.63,-162 1712.63,-165.5 1712.63,-158.5"/>
</g>
<!-- FormControlMarkUntouchedDirective -->
<g id="node5" class="node">
<title>FormControlMarkUntouchedDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="2456.44,-122 2453.44,-126 2432.44,-126 2429.44,-122 2223.56,-122 2223.56,-86 2456.44,-86 2456.44,-122"/>
<text text-anchor="middle" x="2340" y="-99.8" font-family="Times,serif" font-size="14.00">FormControlMarkUntouchedDirective</text>
</g>
<!-- FormControlMarkUntouchedDirective->RxapFormsModule -->
<g id="edge5" class="edge">
<title>FormControlMarkUntouchedDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M2229.65,-122.03C2229.65,-138.4 2229.65,-160 2229.65,-160 2229.65,-160 1712.55,-160 1712.55,-160"/>
<polygon fill="black" stroke="black" points="1712.55,-156.5 1702.55,-160 1712.55,-163.5 1712.55,-156.5"/>
</g>
<!-- FormControlNameDirective -->
<g id="node6" class="node">
<title>FormControlNameDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="2205.12,-122 2202.12,-126 2181.12,-126 2178.12,-122 2030.88,-122 2030.88,-86 2205.12,-86 2205.12,-122"/>
<text text-anchor="middle" x="2118" y="-99.8" font-family="Times,serif" font-size="14.00">FormControlNameDirective</text>
</g>
<!-- FormControlNameDirective->RxapFormsModule -->
<g id="edge6" class="edge">
<title>FormControlNameDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M2035.31,-122.28C2035.31,-137.95 2035.31,-158 2035.31,-158 2035.31,-158 1712.64,-158 1712.64,-158"/>
<polygon fill="black" stroke="black" points="1712.64,-154.5 1702.64,-158 1712.64,-161.5 1712.64,-154.5"/>
</g>
<!-- FormDirective -->
<g id="node7" class="node">
<title>FormDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="2012.42,-122 2009.42,-126 1988.42,-126 1985.42,-122 1913.58,-122 1913.58,-86 2012.42,-86 2012.42,-122"/>
<text text-anchor="middle" x="1963" y="-99.8" font-family="Times,serif" font-size="14.00">FormDirective</text>
</g>
<!-- FormDirective->RxapFormsModule -->
<g id="edge7" class="edge">
<title>FormDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M1981.49,-122.19C1981.49,-137.18 1981.49,-156 1981.49,-156 1981.49,-156 1712.63,-156 1712.63,-156"/>
<polygon fill="black" stroke="black" points="1712.63,-152.5 1702.63,-156 1712.63,-159.5 1712.63,-152.5"/>
</g>
<!-- FormGroupNameDirective -->
<g id="node8" class="node">
<title>FormGroupNameDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="1895.61,-122 1892.61,-126 1871.61,-126 1868.61,-122 1728.39,-122 1728.39,-86 1895.61,-86 1895.61,-122"/>
<text text-anchor="middle" x="1812" y="-99.8" font-family="Times,serif" font-size="14.00">FormGroupNameDirective</text>
</g>
<!-- FormGroupNameDirective->RxapFormsModule -->
<g id="edge8" class="edge">
<title>FormGroupNameDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M1840.69,-122.05C1840.69,-136.37 1840.69,-154 1840.69,-154 1840.69,-154 1712.4,-154 1712.4,-154"/>
<polygon fill="black" stroke="black" points="1712.4,-150.5 1702.4,-154 1712.4,-157.5 1712.4,-150.5"/>
</g>
<!-- FormLoadedDirective -->
<g id="node9" class="node">
<title>FormLoadedDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="1710.4,-122 1707.4,-126 1686.4,-126 1683.4,-122 1569.6,-122 1569.6,-86 1710.4,-86 1710.4,-122"/>
<text text-anchor="middle" x="1640" y="-99.8" font-family="Times,serif" font-size="14.00">FormLoadedDirective</text>
</g>
<!-- FormLoadedDirective->RxapFormsModule -->
<g id="edge9" class="edge">
<title>FormLoadedDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M1640,-122.11C1640,-122.11 1640,-140.99 1640,-140.99"/>
<polygon fill="black" stroke="black" points="1636.5,-140.99 1640,-150.99 1643.5,-140.99 1636.5,-140.99"/>
</g>
<!-- FormLoadingDirective -->
<g id="node10" class="node">
<title>FormLoadingDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="1551.57,-122 1548.57,-126 1527.57,-126 1524.57,-122 1406.43,-122 1406.43,-86 1551.57,-86 1551.57,-122"/>
<text text-anchor="middle" x="1479" y="-99.8" font-family="Times,serif" font-size="14.00">FormLoadingDirective</text>
</g>
<!-- FormLoadingDirective->RxapFormsModule -->
<g id="edge10" class="edge">
<title>FormLoadingDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M1502.35,-122.05C1502.35,-136.37 1502.35,-154 1502.35,-154 1502.35,-154 1567.62,-154 1567.62,-154"/>
<polygon fill="black" stroke="black" points="1567.62,-157.5 1577.62,-154 1567.62,-150.5 1567.62,-157.5"/>
</g>
<!-- FormLoadingErrorDirective -->
<g id="node11" class="node">
<title>FormLoadingErrorDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="1388.11,-122 1385.11,-126 1364.11,-126 1361.11,-122 1213.89,-122 1213.89,-86 1388.11,-86 1388.11,-122"/>
<text text-anchor="middle" x="1301" y="-99.8" font-family="Times,serif" font-size="14.00">FormLoadingErrorDirective</text>
</g>
<!-- FormLoadingErrorDirective->RxapFormsModule -->
<g id="edge11" class="edge">
<title>FormLoadingErrorDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M1327.27,-122.19C1327.27,-137.18 1327.27,-156 1327.27,-156 1327.27,-156 1567.47,-156 1567.47,-156"/>
<polygon fill="black" stroke="black" points="1567.47,-159.5 1577.47,-156 1567.47,-152.5 1567.47,-159.5"/>
</g>
<!-- FormSubmitDirective -->
<g id="node12" class="node">
<title>FormSubmitDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="1195.37,-122 1192.37,-126 1171.37,-126 1168.37,-122 1056.63,-122 1056.63,-86 1195.37,-86 1195.37,-122"/>
<text text-anchor="middle" x="1126" y="-99.8" font-family="Times,serif" font-size="14.00">FormSubmitDirective</text>
</g>
<!-- FormSubmitDirective->RxapFormsModule -->
<g id="edge12" class="edge">
<title>FormSubmitDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M1191.81,-122.28C1191.81,-137.95 1191.81,-158 1191.81,-158 1191.81,-158 1567.21,-158 1567.21,-158"/>
<polygon fill="black" stroke="black" points="1567.21,-161.5 1577.21,-158 1567.21,-154.5 1567.21,-161.5"/>
</g>
<!-- FormSubmitFailedDirective -->
<g id="node13" class="node">
<title>FormSubmitFailedDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="1038.86,-122 1035.86,-126 1014.86,-126 1011.86,-122 865.14,-122 865.14,-86 1038.86,-86 1038.86,-122"/>
<text text-anchor="middle" x="952" y="-99.8" font-family="Times,serif" font-size="14.00">FormSubmitFailedDirective</text>
</g>
<!-- FormSubmitFailedDirective->RxapFormsModule -->
<g id="edge13" class="edge">
<title>FormSubmitFailedDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M1033.31,-122.03C1033.31,-138.4 1033.31,-160 1033.31,-160 1033.31,-160 1567.36,-160 1567.36,-160"/>
<polygon fill="black" stroke="black" points="1567.36,-163.5 1577.36,-160 1567.36,-156.5 1567.36,-163.5"/>
</g>
<!-- FormSubmitInvalidDirective -->
<g id="node14" class="node">
<title>FormSubmitInvalidDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="847.03,-122 844.03,-126 823.03,-126 820.03,-122 668.97,-122 668.97,-86 847.03,-86 847.03,-122"/>
<text text-anchor="middle" x="758" y="-99.8" font-family="Times,serif" font-size="14.00">FormSubmitInvalidDirective</text>
</g>
<!-- FormSubmitInvalidDirective->RxapFormsModule -->
<g id="edge14" class="edge">
<title>FormSubmitInvalidDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M839.64,-122.03C839.64,-139.06 839.64,-162 839.64,-162 839.64,-162 1567.53,-162 1567.53,-162"/>
<polygon fill="black" stroke="black" points="1567.53,-165.5 1577.53,-162 1567.53,-158.5 1567.53,-165.5"/>
</g>
<!-- FormSubmitSuccessfulDirective -->
<g id="node15" class="node">
<title>FormSubmitSuccessfulDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="650.24,-122 647.24,-126 626.24,-126 623.24,-122 451.76,-122 451.76,-86 650.24,-86 650.24,-122"/>
<text text-anchor="middle" x="551" y="-99.8" font-family="Times,serif" font-size="14.00">FormSubmitSuccessfulDirective</text>
</g>
<!-- FormSubmitSuccessfulDirective->RxapFormsModule -->
<g id="edge15" class="edge">
<title>FormSubmitSuccessfulDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M641.05,-122C641.05,-139.68 641.05,-164 641.05,-164 641.05,-164 1567.51,-164 1567.51,-164"/>
<polygon fill="black" stroke="black" points="1567.51,-167.5 1577.51,-164 1567.51,-160.5 1567.51,-167.5"/>
</g>
<!-- FormSubmittingDirective -->
<g id="node16" class="node">
<title>FormSubmittingDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="433.15,-122 430.15,-126 409.15,-126 406.15,-122 272.85,-122 272.85,-86 433.15,-86 433.15,-122"/>
<text text-anchor="middle" x="353" y="-99.8" font-family="Times,serif" font-size="14.00">FormSubmittingDirective</text>
</g>
<!-- FormSubmittingDirective->RxapFormsModule -->
<g id="edge16" class="edge">
<title>FormSubmittingDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M420.98,-122.27C420.98,-140.56 420.98,-166 420.98,-166 420.98,-166 1567.45,-166 1567.45,-166"/>
<polygon fill="black" stroke="black" points="1567.45,-169.5 1577.45,-166 1567.45,-162.5 1567.45,-169.5"/>
</g>
<!-- ParentControlContainerDirective -->
<g id="node17" class="node">
<title>ParentControlContainerDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="254.83,-122 251.83,-126 230.83,-126 227.83,-122 53.17,-122 53.17,-86 254.83,-86 254.83,-122"/>
<text text-anchor="middle" x="154" y="-99.8" font-family="Times,serif" font-size="14.00">ParentControlContainerDirective</text>
</g>
<!-- ParentControlContainerDirective->RxapFormsModule -->
<g id="edge17" class="edge">
<title>ParentControlContainerDirective->RxapFormsModule</title>
<path fill="none" stroke="black" d="M238.79,-122.17C238.79,-141.09 238.79,-168 238.79,-168 238.79,-168 1567.53,-168 1567.53,-168"/>
<polygon fill="black" stroke="black" points="1567.53,-171.5 1577.53,-168 1567.53,-164.5 1567.53,-171.5"/>
</g>
<!-- FormControlErrorDirective -->
<g id="node19" class="node">
<title>FormControlErrorDirective </title>
<polygon fill="#fb8072" stroke="black" points="3364.23,-252 3189.77,-252 3189.77,-216 3364.23,-216 3364.23,-252"/>
<text text-anchor="middle" x="3277" y="-229.8" font-family="Times,serif" font-size="14.00">FormControlErrorDirective </text>
</g>
<!-- RxapFormsModule->FormControlErrorDirective -->
<g id="edge18" class="edge">
<title>RxapFormsModule->FormControlErrorDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1702.61,-171C2000.82,-171 3262.62,-171 3262.62,-171 3262.62,-171 3262.62,-205.78 3262.62,-205.78"/>
<polygon fill="black" stroke="black" points="3259.13,-205.78 3262.62,-215.78 3266.13,-205.78 3259.13,-205.78"/>
</g>
<!-- FormControlMarkDirtyDirective -->
<g id="node20" class="node">
<title>FormControlMarkDirtyDirective </title>
<polygon fill="#fb8072" stroke="black" points="3172.06,-252 2967.94,-252 2967.94,-216 3172.06,-216 3172.06,-252"/>
<text text-anchor="middle" x="3070" y="-229.8" font-family="Times,serif" font-size="14.00">FormControlMarkDirtyDirective </text>
</g>
<!-- RxapFormsModule->FormControlMarkDirtyDirective -->
<g id="edge19" class="edge">
<title>RxapFormsModule->FormControlMarkDirtyDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1702.72,-173C1976.98,-173 3057.12,-173 3057.12,-173 3057.12,-173 3057.12,-205.7 3057.12,-205.7"/>
<polygon fill="black" stroke="black" points="3053.63,-205.7 3057.12,-215.7 3060.63,-205.7 3053.63,-205.7"/>
</g>
<!-- FormControlMarkPristineDirective -->
<g id="node21" class="node">
<title>FormControlMarkPristineDirective </title>
<polygon fill="#fb8072" stroke="black" points="2949.79,-252 2732.21,-252 2732.21,-216 2949.79,-216 2949.79,-252"/>
<text text-anchor="middle" x="2841" y="-229.8" font-family="Times,serif" font-size="14.00">FormControlMarkPristineDirective </text>
</g>
<!-- RxapFormsModule->FormControlMarkPristineDirective -->
<g id="edge20" class="edge">
<title>RxapFormsModule->FormControlMarkPristineDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1702.7,-175C1948.06,-175 2829.62,-175 2829.62,-175 2829.62,-175 2829.62,-205.98 2829.62,-205.98"/>
<polygon fill="black" stroke="black" points="2826.13,-205.98 2829.62,-215.98 2833.13,-205.98 2826.13,-205.98"/>
</g>
<!-- FormControlMarkTouchedDirective -->
<g id="node22" class="node">
<title>FormControlMarkTouchedDirective </title>
<polygon fill="#fb8072" stroke="black" points="2714,-252 2490,-252 2490,-216 2714,-216 2714,-252"/>
<text text-anchor="middle" x="2602" y="-229.8" font-family="Times,serif" font-size="14.00">FormControlMarkTouchedDirective </text>
</g>
<!-- RxapFormsModule->FormControlMarkTouchedDirective -->
<g id="edge21" class="edge">
<title>RxapFormsModule->FormControlMarkTouchedDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1702.5,-177C1914.44,-177 2592.62,-177 2592.62,-177 2592.62,-177 2592.62,-205.96 2592.62,-205.96"/>
<polygon fill="black" stroke="black" points="2589.13,-205.96 2592.62,-215.96 2596.13,-205.96 2589.13,-205.96"/>
</g>
<!-- FormControlMarkUntouchedDirective -->
<g id="node23" class="node">
<title>FormControlMarkUntouchedDirective </title>
<polygon fill="#fb8072" stroke="black" points="2472.44,-252 2235.56,-252 2235.56,-216 2472.44,-216 2472.44,-252"/>
<text text-anchor="middle" x="2354" y="-229.8" font-family="Times,serif" font-size="14.00">FormControlMarkUntouchedDirective </text>
</g>
<!-- RxapFormsModule->FormControlMarkUntouchedDirective -->
<g id="edge22" class="edge">
<title>RxapFormsModule->FormControlMarkUntouchedDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1702.66,-179C1875.48,-179 2346.12,-179 2346.12,-179 2346.12,-179 2346.12,-205.99 2346.12,-205.99"/>
<polygon fill="black" stroke="black" points="2342.63,-205.99 2346.12,-215.99 2349.63,-205.99 2342.63,-205.99"/>
</g>
<!-- FormControlNameDirective -->
<g id="node24" class="node">
<title>FormControlNameDirective </title>
<polygon fill="#fb8072" stroke="black" points="2218.12,-252 2039.88,-252 2039.88,-216 2218.12,-216 2218.12,-252"/>
<text text-anchor="middle" x="2129" y="-229.8" font-family="Times,serif" font-size="14.00">FormControlNameDirective </text>
</g>
<!-- RxapFormsModule->FormControlNameDirective -->
<g id="edge23" class="edge">
<title>RxapFormsModule->FormControlNameDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1702.6,-181C1833.19,-181 2122.62,-181 2122.62,-181 2122.62,-181 2122.62,-205.76 2122.62,-205.76"/>
<polygon fill="black" stroke="black" points="2119.13,-205.76 2122.62,-215.76 2126.13,-205.76 2119.13,-205.76"/>
</g>
<!-- FormDirective -->
<g id="node25" class="node">
<title>FormDirective </title>
<polygon fill="#fb8072" stroke="black" points="2021.92,-252 1920.08,-252 1920.08,-216 2021.92,-216 2021.92,-252"/>
<text text-anchor="middle" x="1971" y="-229.8" font-family="Times,serif" font-size="14.00">FormDirective </text>
</g>
<!-- RxapFormsModule->FormDirective -->
<g id="edge24" class="edge">
<title>RxapFormsModule->FormDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1702.51,-183C1793.26,-183 1950.76,-183 1950.76,-183 1950.76,-183 1950.76,-205.88 1950.76,-205.88"/>
<polygon fill="black" stroke="black" points="1947.26,-205.88 1950.76,-215.88 1954.26,-205.88 1947.26,-205.88"/>
</g>
<!-- FormGroupNameDirective -->
<g id="node26" class="node">
<title>FormGroupNameDirective </title>
<polygon fill="#fb8072" stroke="black" points="1901.61,-252 1730.39,-252 1730.39,-216 1901.61,-216 1901.61,-252"/>
<text text-anchor="middle" x="1816" y="-229.8" font-family="Times,serif" font-size="14.00">FormGroupNameDirective </text>
</g>
<!-- RxapFormsModule->FormGroupNameDirective -->
<g id="edge25" class="edge">
<title>RxapFormsModule->FormGroupNameDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1702.58,-185C1742.03,-185 1785.56,-185 1785.56,-185 1785.56,-185 1785.56,-205.75 1785.56,-205.75"/>
<polygon fill="black" stroke="black" points="1782.07,-205.75 1785.56,-215.75 1789.07,-205.75 1782.07,-205.75"/>
</g>
<!-- FormLoadedDirective -->
<g id="node27" class="node">
<title>FormLoadedDirective </title>
<polygon fill="#fb8072" stroke="black" points="1711.9,-252 1568.1,-252 1568.1,-216 1711.9,-216 1711.9,-252"/>
<text text-anchor="middle" x="1640" y="-229.8" font-family="Times,serif" font-size="14.00">FormLoadedDirective </text>
</g>
<!-- RxapFormsModule->FormLoadedDirective -->
<g id="edge26" class="edge">
<title>RxapFormsModule->FormLoadedDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1640,-187.11C1640,-187.11 1640,-205.99 1640,-205.99"/>
<polygon fill="black" stroke="black" points="1636.5,-205.99 1640,-215.99 1643.5,-205.99 1636.5,-205.99"/>
</g>
<!-- FormLoadingDirective -->
<g id="node28" class="node">
<title>FormLoadingDirective </title>
<polygon fill="#fb8072" stroke="black" points="1550.08,-252 1401.92,-252 1401.92,-216 1550.08,-216 1550.08,-252"/>
<text text-anchor="middle" x="1476" y="-229.8" font-family="Times,serif" font-size="14.00">FormLoadingDirective </text>
</g>
<!-- RxapFormsModule->FormLoadingDirective -->
<g id="edge27" class="edge">
<title>RxapFormsModule->FormLoadingDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1577.42,-185C1523.54,-185 1454.4,-185 1454.4,-185 1454.4,-185 1454.4,-205.75 1454.4,-205.75"/>
<polygon fill="black" stroke="black" points="1450.9,-205.75 1454.4,-215.75 1457.9,-205.75 1450.9,-205.75"/>
</g>
<!-- FormLoadingErrorDirective -->
<g id="node29" class="node">
<title>FormLoadingErrorDirective </title>
<polygon fill="#fb8072" stroke="black" points="1384.11,-252 1205.89,-252 1205.89,-216 1384.11,-216 1384.11,-252"/>
<text text-anchor="middle" x="1295" y="-229.8" font-family="Times,serif" font-size="14.00">FormLoadingErrorDirective </text>
</g>
<!-- RxapFormsModule->FormLoadingErrorDirective -->
<g id="edge28" class="edge">
<title>RxapFormsModule->FormLoadingErrorDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1577.32,-183C1471.89,-183 1270.48,-183 1270.48,-183 1270.48,-183 1270.48,-205.88 1270.48,-205.88"/>
<polygon fill="black" stroke="black" points="1266.98,-205.88 1270.48,-215.88 1273.98,-205.88 1266.98,-205.88"/>
</g>
<!-- FormSubmitDirective -->
<g id="node30" class="node">
<title>FormSubmitDirective </title>
<polygon fill="#fb8072" stroke="black" points="1188.37,-252 1045.63,-252 1045.63,-216 1188.37,-216 1188.37,-252"/>
<text text-anchor="middle" x="1117" y="-229.8" font-family="Times,serif" font-size="14.00">FormSubmitDirective </text>
</g>
<!-- RxapFormsModule->FormSubmitDirective -->
<g id="edge29" class="edge">
<title>RxapFormsModule->FormSubmitDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1577.56,-181C1439.89,-181 1122.38,-181 1122.38,-181 1122.38,-181 1122.38,-205.76 1122.38,-205.76"/>
<polygon fill="black" stroke="black" points="1118.88,-205.76 1122.38,-215.76 1125.88,-205.76 1118.88,-205.76"/>
</g>
<!-- FormSubmitFailedDirective -->
<g id="node31" class="node">
<title>FormSubmitFailedDirective </title>
<polygon fill="#fb8072" stroke="black" points="1027.86,-252 850.14,-252 850.14,-216 1027.86,-216 1027.86,-252"/>
<text text-anchor="middle" x="939" y="-229.8" font-family="Times,serif" font-size="14.00">FormSubmitFailedDirective </text>
</g>
<!-- RxapFormsModule->FormSubmitFailedDirective -->
<g id="edge30" class="edge">
<title>RxapFormsModule->FormSubmitFailedDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1577.53,-179C1407.03,-179 946.38,-179 946.38,-179 946.38,-179 946.38,-205.99 946.38,-205.99"/>
<polygon fill="black" stroke="black" points="942.88,-205.99 946.38,-215.99 949.88,-205.99 942.88,-205.99"/>
</g>
<!-- FormSubmitInvalidDirective -->
<g id="node32" class="node">
<title>FormSubmitInvalidDirective </title>
<polygon fill="#fb8072" stroke="black" points="832.03,-252 649.97,-252 649.97,-216 832.03,-216 832.03,-252"/>
<text text-anchor="middle" x="741" y="-229.8" font-family="Times,serif" font-size="14.00">FormSubmitInvalidDirective </text>
</g>
<!-- RxapFormsModule->FormSubmitInvalidDirective -->
<g id="edge31" class="edge">
<title>RxapFormsModule->FormSubmitInvalidDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1577.44,-177C1374.95,-177 750.38,-177 750.38,-177 750.38,-177 750.38,-205.96 750.38,-205.96"/>
<polygon fill="black" stroke="black" points="746.88,-205.96 750.38,-215.96 753.88,-205.96 746.88,-205.96"/>
</g>
<!-- FormSubmitSuccessfulDirective -->
<g id="node33" class="node">
<title>FormSubmitSuccessfulDirective </title>
<polygon fill="#fb8072" stroke="black" points="632.24,-252 429.76,-252 429.76,-216 632.24,-216 632.24,-252"/>
<text text-anchor="middle" x="531" y="-229.8" font-family="Times,serif" font-size="14.00">FormSubmitSuccessfulDirective </text>
</g>
<!-- RxapFormsModule->FormSubmitSuccessfulDirective -->
<g id="edge32" class="edge">
<title>RxapFormsModule->FormSubmitSuccessfulDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1577.42,-175C1344.6,-175 541.88,-175 541.88,-175 541.88,-175 541.88,-205.98 541.88,-205.98"/>
<polygon fill="black" stroke="black" points="538.38,-205.98 541.88,-215.98 545.38,-205.98 538.38,-205.98"/>
</g>
<!-- FormSubmittingDirective -->
<g id="node34" class="node">
<title>FormSubmittingDirective </title>
<polygon fill="#fb8072" stroke="black" points="412.15,-252 247.85,-252 247.85,-216 412.15,-216 412.15,-252"/>
<text text-anchor="middle" x="330" y="-229.8" font-family="Times,serif" font-size="14.00">FormSubmittingDirective </text>
</g>
<!-- RxapFormsModule->FormSubmittingDirective -->
<g id="edge33" class="edge">
<title>RxapFormsModule->FormSubmittingDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1577.41,-173C1318.21,-173 342.38,-173 342.38,-173 342.38,-173 342.38,-205.7 342.38,-205.7"/>
<polygon fill="black" stroke="black" points="338.88,-205.7 342.38,-215.7 345.88,-205.7 338.88,-205.7"/>
</g>
<!-- ParentControlContainerDirective -->
<g id="node35" class="node">
<title>ParentControlContainerDirective </title>
<polygon fill="#fb8072" stroke="black" points="229.83,-252 24.17,-252 24.17,-216 229.83,-216 229.83,-252"/>
<text text-anchor="middle" x="127" y="-229.8" font-family="Times,serif" font-size="14.00">ParentControlContainerDirective </text>
</g>
<!-- RxapFormsModule->ParentControlContainerDirective -->
<g id="edge34" class="edge">
<title>RxapFormsModule->ParentControlContainerDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1577.51,-171C1293.89,-171 141.38,-171 141.38,-171 141.38,-171 141.38,-205.78 141.38,-205.78"/>
<polygon fill="black" stroke="black" points="137.88,-205.78 141.38,-215.78 144.88,-205.78 137.88,-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">1 Module</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-code-working"></span></h4>
<p class="card-text">18 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-ios-paper"></span></h4>
<p class="card-text">6 Classes</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">24 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>