@rxap/form-system
Version:
This package provides a set of directives, decorators, mixins, and validators to simplify the creation of dynamic forms in Angular applications. It offers features such as automatic control creation, data source integration, component customization, and h
330 lines (285 loc) • 14.8 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>angular-form-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-form-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="504pt" height="284pt"
viewBox="0.00 0.00 504.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 500,-280 500,4 -4,4"/>
<text text-anchor="start" x="227.01" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
<polygon fill="#ffffb3" stroke="transparent" points="14,-10 14,-30 34,-30 34,-10 14,-10"/>
<text text-anchor="start" x="37.63" y="-15.4" font-family="Times-12" font-size="14.00">  Declarations</text>
<polygon fill="#8dd3c7" stroke="transparent" points="127,-10 127,-30 147,-30 147,-10 127,-10"/>
<text text-anchor="start" x="150.73" y="-15.4" font-family="Times-12" font-size="14.00">  Module</text>
<polygon fill="#80b1d3" stroke="transparent" points="213,-10 213,-30 233,-30 233,-10 213,-10"/>
<text text-anchor="start" x="236.78" y="-15.4" font-family="Times-12" font-size="14.00">  Bootstrap</text>
<polygon fill="#fdb462" stroke="transparent" points="310,-10 310,-30 330,-30 330,-10 310,-10"/>
<text text-anchor="start" x="333.67" y="-15.4" font-family="Times-12" font-size="14.00">  Providers</text>
<polygon fill="#fb8072" stroke="transparent" points="406,-10 406,-30 426,-30 426,-10 406,-10"/>
<text text-anchor="start" x="429.73" y="-15.4" font-family="Times-12" font-size="14.00">  Exports</text>
<g id="clust1" class="cluster">
<title>cluster_FormSystemDirectivesModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="46,-70 46,-268 450,-268 450,-70 46,-70"/>
</g>
<g id="clust3" class="cluster">
<title>cluster_FormSystemDirectivesModule_imports</title>
<polygon fill="none" stroke="black" points="58,-78 58,-130 438,-130 438,-78 58,-78"/>
</g>
<g id="clust4" class="cluster">
<title>cluster_FormSystemDirectivesModule_exports</title>
<polygon fill="none" stroke="black" points="54,-208 54,-260 442,-260 442,-208 54,-208"/>
</g>
<!-- ControlHideShowDirective -->
<g id="node1" class="node">
<title>ControlHideShowDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="429.96,-122 426.96,-126 405.96,-126 402.96,-122 260.04,-122 260.04,-86 429.96,-86 429.96,-122"/>
<text text-anchor="middle" x="345" y="-99.8" font-family="Times,serif" font-size="14.00">ControlHideShowDirective</text>
</g>
<!-- FormSystemDirectivesModule -->
<g id="node3" class="node">
<title>FormSystemDirectivesModule</title>
<polygon fill="#8dd3c7" stroke="black" points="249.13,-187 246.13,-191 225.13,-191 222.13,-187 60.87,-187 60.87,-151 249.13,-151 249.13,-187"/>
<text text-anchor="middle" x="155" y="-164.8" font-family="Times,serif" font-size="14.00">FormSystemDirectivesModule</text>
</g>
<!-- ControlHideShowDirective->FormSystemDirectivesModule -->
<g id="edge1" class="edge">
<title>ControlHideShowDirective->FormSystemDirectivesModule</title>
<path fill="none" stroke="black" d="M259.93,-104C251.34,-104 245.7,-104 245.7,-104 245.7,-104 245.7,-140.89 245.7,-140.89"/>
<polygon fill="black" stroke="black" points="242.2,-140.89 245.7,-150.89 249.2,-140.89 242.2,-140.89"/>
</g>
<!-- InputSelectOptionsDirective -->
<g id="node2" class="node">
<title>InputSelectOptionsDirective</title>
<polygon fill="#8dd3c7" stroke="black" points="242.17,-122 239.17,-126 218.17,-126 215.17,-122 65.83,-122 65.83,-86 242.17,-86 242.17,-122"/>
<text text-anchor="middle" x="154" y="-99.8" font-family="Times,serif" font-size="14.00">InputSelectOptionsDirective</text>
</g>
<!-- InputSelectOptionsDirective->FormSystemDirectivesModule -->
<g id="edge2" class="edge">
<title>InputSelectOptionsDirective->FormSystemDirectivesModule</title>
<path fill="none" stroke="black" d="M154,-122.11C154,-122.11 154,-140.99 154,-140.99"/>
<polygon fill="black" stroke="black" points="150.5,-140.99 154,-150.99 157.5,-140.99 150.5,-140.99"/>
</g>
<!-- ControlHideShowDirective -->
<g id="node4" class="node">
<title>ControlHideShowDirective </title>
<polygon fill="#fb8072" stroke="black" points="433.96,-252 260.04,-252 260.04,-216 433.96,-216 433.96,-252"/>
<text text-anchor="middle" x="347" y="-229.8" font-family="Times,serif" font-size="14.00">ControlHideShowDirective </text>
</g>
<!-- FormSystemDirectivesModule->ControlHideShowDirective -->
<g id="edge3" class="edge">
<title>FormSystemDirectivesModule->ControlHideShowDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M245.58,-187.11C245.58,-206.34 245.58,-234 245.58,-234 245.58,-234 250.11,-234 250.11,-234"/>
<polygon fill="black" stroke="black" points="250.11,-237.5 260.11,-234 250.11,-230.5 250.11,-237.5"/>
</g>
<!-- InputSelectOptionsDirective -->
<g id="node5" class="node">
<title>InputSelectOptionsDirective </title>
<polygon fill="#fb8072" stroke="black" points="241.67,-252 62.33,-252 62.33,-216 241.67,-216 241.67,-252"/>
<text text-anchor="middle" x="152" y="-229.8" font-family="Times,serif" font-size="14.00">InputSelectOptionsDirective </text>
</g>
<!-- FormSystemDirectivesModule->InputSelectOptionsDirective -->
<g id="edge4" class="edge">
<title>FormSystemDirectivesModule->InputSelectOptionsDirective </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M152,-187.11C152,-187.11 152,-205.99 152,-205.99"/>
<polygon fill="black" stroke="black" points="148.5,-205.99 152,-215.99 155.5,-205.99 148.5,-205.99"/>
</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">14 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-ios-paper"></span></h4>
<p class="card-text">16 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">17 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>