grassrootseconomics/cic-staff-client
5
0
Fork 0
Code Issues 26 Pull Requests Projects Releases Wiki Activity

Add documentation to directives.

Browse Source
This commit is contained in:
Spencer Ofwiti 2021-05-15 12:17:11 +03:00
parent 5e809594c7
commit c0d50df478
25 changed files with 433 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/compodoc/classes/AccountIndex.html
View File

@ -685,7 +685,7 @@ Returns &quot;true&quot; for available and &quot;false&quot; otherwise.</p>
import { environment } from &#x27;@src/environments/environment&#x27;;
/** Fetch the account registry contract&#x27;s ABI. */
const abi: Array&lt;any&gt; &#x3D; require(&#x27;@src/assets/js/block-sync/data/AccountRegistry.json&#x27;);
const abi: Array&lt;any&gt; &#x3D; require(&#x27;@src/assets/js/block-sync/data/AccountsIndex.json&#x27;);
/** Establish a connection to the blockchain network. */
const web3: Web3 &#x3D; new Web3(environment.web3Provider);
@ -756,7 +756,7 @@ export class AccountIndex {
* @returns true - If the address has been registered in the accounts registry.
*/
public async haveAccount(address: string): Promise&lt;boolean&gt; {
return (await this.contract.methods.accountIndex(address).call()) !&#x3D;&#x3D; 0;
return (await this.contract.methods.have(address).call()) !&#x3D;&#x3D; 0;
}
/**
@ -774,13 +774,13 @@ export class AccountIndex {
*/
public async last(numberOfAccounts: number): Promise&lt;Array&lt;string&gt;&gt; {
const count: number &#x3D; await this.totalAccounts();
let lowest: number &#x3D; count - numberOfAccounts - 1;
let lowest: number &#x3D; count - numberOfAccounts;
if (lowest &lt; 0) {
lowest &#x3D; 0;
}
const accounts: Array&lt;string&gt; &#x3D; [];
for (let i &#x3D; count - 1; i &gt; lowest; i--) {
const account: string &#x3D; await this.contract.methods.accounts(i).call();
for (let i &#x3D; count; i &gt; lowest; i--) {
const account: string &#x3D; await this.contract.methods.entry(i).call();
accounts.push(account);
}
return accounts;
@ -799,7 +799,7 @@ export class AccountIndex {
* @returns The total number of registered accounts.
*/
public async totalAccounts(): Promise&lt;number&gt; {
return await this.contract.methods.count().call();
return await this.contract.methods.entryCount().call();
}
}
</code></pre>

24
docs/compodoc/coverage.html
View File

@ -904,16 +904,16 @@
<span class="coverage-count">(0/10)</span>
</td>
</tr>
<tr class="low">
<tr class="very-good">
<td>
<!-- miscellaneous -->
<a href="./directives/PasswordToggleDirective.html">src/app/auth/_directives/password-toggle.directive.ts</a>
</td>
<td>directive</td>
<td>PasswordToggleDirective</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/5)</span>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(5/5)</span>
</td>
</tr>
<tr class="low">
@ -1072,28 +1072,28 @@
<span class="coverage-count">(0/18)</span>
</td>
</tr>
<tr class="low">
<tr class="very-good">
<td>
<!-- miscellaneous -->
<a href="./directives/MenuSelectionDirective.html">src/app/shared/_directives/menu-selection.directive.ts</a>
</td>
<td>directive</td>
<td>MenuSelectionDirective</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/3)</span>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(3/3)</span>
</td>
</tr>
<tr class="low">
<tr class="very-good">
<td>
<!-- miscellaneous -->
<a href="./directives/MenuToggleDirective.html">src/app/shared/_directives/menu-toggle.directive.ts</a>
</td>
<td>directive</td>
<td>MenuToggleDirective</td>
<td align="right" data-sort="0">
<span class="coverage-percent">0 %</span>
<span class="coverage-count">(0/3)</span>
<td align="right" data-sort="100">
<span class="coverage-percent">100 %</span>
<span class="coverage-count">(3/3)</span>
</td>
</tr>
<tr class="low">

38
docs/compodoc/directives/MenuSelectionDirective.html
View File

@ -58,6 +58,13 @@
<code>src/app/shared/_directives/menu-selection.directive.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>Toggle availability of sidebar on menu item selection. </p>
</p>
@ -114,12 +121,14 @@
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="6" class="link-to-prism">src/app/shared/_directives/menu-selection.directive.ts:6</a></div>
<div class="io-line">Defined in <a href="" data-line="8" class="link-to-prism">src/app/shared/_directives/menu-selection.directive.ts:8</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Handle click events on the html element.</p>
</div>
<div>
<b>Parameters :</b>
<table class="params">
@ -128,6 +137,7 @@
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
@ -142,6 +152,12 @@
No
</td>
<td>
<code><ul>
<li>A wrapper around a native element inside of a View.</li>
</ul>
</code>
</td>
</tr>
<tr>
<td>renderer</td>
@ -154,6 +170,12 @@
No
</td>
<td>
<code><ul>
<li>Extend this base class to implement custom rendering.</li>
</ul>
</code>
</td>
</tr>
</tbody>
</table>
@ -195,14 +217,16 @@
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="16"
class="link-to-prism">src/app/shared/_directives/menu-selection.directive.ts:16</a></div>
<div class="io-line">Defined in <a href="" data-line="25"
class="link-to-prism">src/app/shared/_directives/menu-selection.directive.ts:25</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Toggle the availability of the sidebar. </p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
@ -221,10 +245,17 @@
<div class="tab-pane fade tab-source-code" id="c-source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Directive, ElementRef, Renderer2 } from &#x27;@angular/core&#x27;;
/** Toggle availability of sidebar on menu item selection. */
@Directive({
selector: &#x27;[appMenuSelection]&#x27;,
})
export class MenuSelectionDirective {
/**
* Handle click events on the html element.
*
* @param elementRef - A wrapper around a native element inside of a View.
* @param renderer - Extend this base class to implement custom rendering.
*/
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
this.renderer.listen(this.elementRef.nativeElement, &#x27;click&#x27;, () &#x3D;&gt; {
const mediaQuery &#x3D; window.matchMedia(&#x27;(max-width: 768px)&#x27;);
@ -234,6 +265,7 @@ export class MenuSelectionDirective {
});
}
/** Toggle the availability of the sidebar. */
onMenuSelect(): void {
const sidebar: HTMLElement &#x3D; document.getElementById(&#x27;sidebar&#x27;);
if (!sidebar?.classList.contains(&#x27;active&#x27;)) {

39
docs/compodoc/directives/MenuToggleDirective.html
View File

@ -58,6 +58,13 @@
<code>src/app/shared/_directives/menu-toggle.directive.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>Toggle availability of sidebar on menu toggle click. </p>
</p>
@ -114,12 +121,14 @@
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="6" class="link-to-prism">src/app/shared/_directives/menu-toggle.directive.ts:6</a></div>
<div class="io-line">Defined in <a href="" data-line="8" class="link-to-prism">src/app/shared/_directives/menu-toggle.directive.ts:8</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Handle click events on the html element.</p>
</div>
<div>
<b>Parameters :</b>
<table class="params">
@ -128,6 +137,7 @@
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
@ -142,6 +152,12 @@
No
</td>
<td>
<code><ul>
<li>A wrapper around a native element inside of a View.</li>
</ul>
</code>
</td>
</tr>
<tr>
<td>renderer</td>
@ -154,6 +170,12 @@
No
</td>
<td>
<code><ul>
<li>Extend this base class to implement custom rendering.</li>
</ul>
</code>
</td>
</tr>
</tbody>
</table>
@ -195,14 +217,16 @@
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="14"
class="link-to-prism">src/app/shared/_directives/menu-toggle.directive.ts:14</a></div>
<div class="io-line">Defined in <a href="" data-line="22"
class="link-to-prism">src/app/shared/_directives/menu-toggle.directive.ts:22</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Toggle the availability of the sidebar. </p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
@ -221,17 +245,24 @@
<div class="tab-pane fade tab-source-code" id="c-source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Directive, ElementRef, Renderer2 } from &#x27;@angular/core&#x27;;
/** Toggle availability of sidebar on menu toggle click. */
@Directive({
selector: &#x27;[appMenuToggle]&#x27;,
})
export class MenuToggleDirective {
/**
* Handle click events on the html element.
*
* @param elementRef - A wrapper around a native element inside of a View.
* @param renderer - Extend this base class to implement custom rendering.
*/
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
this.renderer.listen(this.elementRef.nativeElement, &#x27;click&#x27;, () &#x3D;&gt; {
this.onMenuToggle();
});
}
// Menu Trigger
/** Toggle the availability of the sidebar. */
onMenuToggle(): void {
const sidebar: HTMLElement &#x3D; document.getElementById(&#x27;sidebar&#x27;);
sidebar?.classList.toggle(&#x27;active&#x27;);

56
docs/compodoc/directives/PasswordToggleDirective.html
View File

@ -58,6 +58,13 @@
<code>src/app/auth/_directives/password-toggle.directive.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>Toggle password form field input visibility </p>
</p>
@ -131,12 +138,14 @@
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="11" class="link-to-prism">src/app/auth/_directives/password-toggle.directive.ts:11</a></div>
<div class="io-line">Defined in <a href="" data-line="15" class="link-to-prism">src/app/auth/_directives/password-toggle.directive.ts:15</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Handle click events on the html element.</p>
</div>
<div>
<b>Parameters :</b>
<table class="params">
@ -145,6 +154,7 @@
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
@ -159,6 +169,12 @@
No
</td>
<td>
<code><ul>
<li>A wrapper around a native element inside of a View.</li>
</ul>
</code>
</td>
</tr>
<tr>
<td>renderer</td>
@ -171,6 +187,12 @@
No
</td>
<td>
<code><ul>
<li>Extend this base class to implement custom rendering.</li>
</ul>
</code>
</td>
</tr>
</tbody>
</table>
@ -199,9 +221,15 @@
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="11" class="link-to-prism">src/app/auth/_directives/password-toggle.directive.ts:11</a></div>
<div class="io-line">Defined in <a href="" data-line="15" class="link-to-prism">src/app/auth/_directives/password-toggle.directive.ts:15</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>The password form field icon id </p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
@ -220,9 +248,15 @@
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="8" class="link-to-prism">src/app/auth/_directives/password-toggle.directive.ts:8</a></div>
<div class="io-line">Defined in <a href="" data-line="11" class="link-to-prism">src/app/auth/_directives/password-toggle.directive.ts:11</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>The password form field id </p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
@ -256,14 +290,16 @@
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="19"
class="link-to-prism">src/app/auth/_directives/password-toggle.directive.ts:19</a></div>
<div class="io-line">Defined in <a href="" data-line="30"
class="link-to-prism">src/app/auth/_directives/password-toggle.directive.ts:30</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Toggle the visibility of the password input field value and accompanying icon. </p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
@ -282,22 +318,32 @@
<div class="tab-pane fade tab-source-code" id="c-source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Directive, ElementRef, Input, Renderer2 } from &#x27;@angular/core&#x27;;
/** Toggle password form field input visibility */
@Directive({
selector: &#x27;[appPasswordToggle]&#x27;,
})
export class PasswordToggleDirective {
/** The password form field id */
@Input()
id: string;
/** The password form field icon id */
@Input()
iconId: string;
/**
* Handle click events on the html element.
*
* @param elementRef - A wrapper around a native element inside of a View.
* @param renderer - Extend this base class to implement custom rendering.
*/
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
this.renderer.listen(this.elementRef.nativeElement, &#x27;click&#x27;, () &#x3D;&gt; {
this.togglePasswordVisibility();
});
}
/** Toggle the visibility of the password input field value and accompanying icon. */
togglePasswordVisibility(): void {
const password: HTMLElement &#x3D; document.getElementById(this.id);
const icon: HTMLElement &#x3D; document.getElementById(this.iconId);

2
docs/compodoc/images/coverage-badge-documentation.svg
View File

@ -4,6 +4,6 @@
<rect id="svg_2" height="20" width="40" y="0" x="92" stroke-width="1.5" stroke="#8fbd08" fill="#8fbd08" rx="7" ry="7"/>
<rect id="svg_3" height="20" width="22" y="0" x="92" stroke-width="1.5" stroke="#8fbd08" fill="#8fbd08"/>
<text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="12" id="svg_4" y="14" x="6" stroke-width="0" stroke="#5d5d5d" fill="#ffffff">documentation</text>
<text xml:space="preserve" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="12" id="svg_5" y="14" x="112" stroke-width="0" stroke="#5d5d5d" fill="#ffffff" style="text-anchor: middle">56%</text>
<text xml:space="preserve" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="12" id="svg_5" y="14" x="112" stroke-width="0" stroke="#5d5d5d" fill="#ffffff" style="text-anchor: middle">59%</text>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 894 B

After

Width:  |  Height:  |  Size: 894 B

26
docs/compodoc/index.html
View File

@ -36,24 +36,34 @@
<h2 id="angular-cli">Angular CLI</h2>
<p>Run <code>npm install -g @angular/cli</code> to install the angular CLI.</p>
<h2 id="development-server">Development server</h2>
<p>Run <code>npm run start:dev</code> for a dev server. Navigate to <code>http://localhost:4200/</code>. The app will automatically reload if you change any of the source files.</p>
<p>Run <code>ng serve</code> for a local server, <code>npm run start:dev</code> for a dev server and <code>npm run start:prod</code> for a prod server..</p>
<p>Navigate to <code>http://localhost:4200/</code>. The app will automatically reload if you change any of the source files.</p>
<h2 id="code-scaffolding">Code scaffolding</h2>
<p>Run <code>ng generate component component-name</code> to generate a new component. You can also use <code>ng generate directive|pipe|service|class|guard|interface|enum|module</code>.</p>
<h2 id="lazy-loading-feature-modules">Lazy-loading feature modules</h2>
<p>Run <code>ng generate module module-name --route module-name --module app.module</code> to generate a new module on route <code>/module-name</code> in the app module. </p>
<h2 id="build">Build</h2>
<p>set you environment variables - set these via environment variables as found in set-env.ts
// TODO create a .env file so people don&#39;t have to set these one-by-one</p>
<p>Run <code>npm run build:dev</code> to build the project. The build artifacts will be stored in the <code>dist/</code> directory. Use the <code>build:prod</code> script for a production build.</p>
<p>Run <code>ng build</code> to build the project using local configurations.
The build artifacts will be stored in the <code>dist/</code> directory.</p>
<p>Use the <code>npm run build:dev</code> script for a development build and the <code>npm run build:prod</code> script for a production build.</p>
<h2 id="pwa">PWA</h2>
<p>The app supports Progressive Web App capabilities.</p>
<p>Run <code>npm run start:pwa</code> to run the project in PWA mode.
PWA mode works using production configurations.</p>
<h2 id="running-unit-tests">Running unit tests</h2>
<p>Run <code>npm run test:dev</code> to execute the unit tests via <a href="https://karma-runner.github.io">Karma</a>.</p>
<p>Run <code>ng test</code> to execute the unit tests via <a href="https://karma-runner.github.io">Karma</a>.</p>
<h2 id="running-end-to-end-tests">Running end-to-end tests</h2>
<p>Run <code>ng e2e</code> to execute the end-to-end tests via <a href="http://www.protractortest.org/">Protractor</a>.</p>
<h2 id="environment-variables">Environment variables</h2>
<p>Environment variables are contained in the <code>.env</code> file. See <code>.env.example</code> for a template.</p>
<p>Default environment variables are set in the <code>set-env.ts</code> file.
<p>Default environment variables are located in the <code>src/environments/</code> directory.
Custom environment variables are contained in the <code>.env</code> file. See <code>.env.example</code> for a template.</p>
<p>Custom environment variables are set via the <code>set-env.ts</code> file.
Once loaded they will be populated in the directory <code>src/environments/</code>.
It contains environment variables for development on <code>environment.ts</code> and production on <code>environment.prod.ts</code>.</p>
It contains environment variables for development on <code>environment.dev.ts</code> and production on <code>environment.prod.ts</code>.</p>
<h2 id="code-formatting">Code formatting</h2>
<p>The system has automated code formatting using <a href="https://prettier.io/">Prettier</a> and <a href="https://palantir.github.io/tslint/">TsLint</a>.
To view the styling rules set, check out <code>.prettierrc</code> and <code>tslint.json</code>.</p>
<p>Run <code>npm run format:lint</code> To perform formatting and linting of the codebase.</p>
<h2 id="further-help">Further help</h2>
<p>To get more help on the Angular CLI use <code>ng help</code> or go check out the <a href="https://angular.io/cli">Angular CLI Overview and Command Reference</a> page.</p>

4
docs/compodoc/injectables/RegistryService.html
View File

@ -276,7 +276,7 @@
<i>Default value : </i><code>new CICRegistry(
this.web3,
environment.registryAddress,
&#x27;CICRegistry&#x27;,
&#x27;Registry&#x27;,
this.fileGetter,
[&#x27;../../assets/js/block-sync/data&#x27;]
)</code>
@ -344,7 +344,7 @@ export class RegistryService {
registry: CICRegistry &#x3D; new CICRegistry(
this.web3,
environment.registryAddress,
&#x27;CICRegistry&#x27;,
&#x27;Registry&#x27;,
this.fileGetter,
[&#x27;../../assets/js/block-sync/data&#x27;]
);

4
docs/compodoc/js/search/search_index.js
View File

File diff suppressed because one or more lines are too long

4
docs/compodoc/miscellaneous/variables.html
View File

@ -149,7 +149,7 @@
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>require(&#x27;@src/assets/js/block-sync/data/AccountRegistry.json&#x27;)</code>
<i>Default value : </i><code>require(&#x27;@src/assets/js/block-sync/data/AccountsIndex.json&#x27;)</code>
</td>
</tr>
@ -1767,7 +1767,7 @@
cicCacheUrl: &#x27;https://cache.dev.grassrootseconomics.net&#x27;,
web3Provider: &#x27;wss://bloxberg-ws.dev.grassrootseconomics.net&#x27;,
cicUssdUrl: &#x27;https://ussd.dev.grassrootseconomics.net&#x27;,
registryAddress: &#x27;0xAf1B487491073C2d49136Db3FD87E293302CF839&#x27;,
registryAddress: &#x27;0xea6225212005e86a4490018ded4bf37f3e772161&#x27;,
trustedDeclaratorAddress: &#x27;0xEb3907eCad74a0013c259D5874AE7f22DcBcC95C&#x27;,
}</code>
</td>

80
docs/compodoc/modules/AppModule.html
View File

@ -65,22 +65,22 @@
<title>cluster_AppModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-268 1186,-268 1186,-70 8,-70"/>
</g>
<g id="clust7" class="cluster">
<title>cluster_AppModule_providers</title>
<polygon fill="none" stroke="black" points="415,-78 415,-130 1178,-130 1178,-78 415,-78"/>
<g id="clust6" class="cluster">
<title>cluster_AppModule_bootstrap</title>
<polygon fill="none" stroke="black" points="584,-208 584,-260 708,-260 708,-208 584,-208"/>
</g>
<g id="clust4" class="cluster">
<title>cluster_AppModule_imports</title>
<polygon fill="none" stroke="black" points="146,-78 146,-130 407,-130 407,-78 146,-78"/>
<polygon fill="none" stroke="black" points="917,-78 917,-130 1178,-130 1178,-78 917,-78"/>
</g>
<g id="clust7" class="cluster">
<title>cluster_AppModule_providers</title>
<polygon fill="none" stroke="black" points="146,-78 146,-130 909,-130 909,-78 146,-78"/>
</g>
<g id="clust2" class="cluster">
<title>cluster_AppModule_declarations</title>
<polygon fill="none" stroke="black" points="16,-78 16,-130 138,-130 138,-78 16,-78"/>
</g>
<g id="clust6" class="cluster">
<title>cluster_AppModule_bootstrap</title>
<polygon fill="none" stroke="black" points="447,-208 447,-260 571,-260 571,-208 447,-208"/>
</g>
<!-- AppComponent -->
<g id="node1" class="node">
<title>AppComponent</title>
@ -90,98 +90,98 @@
<!-- AppModule -->
<g id="node2" class="node">
<title>AppModule</title>
<polygon fill="#8dd3c7" stroke="black" points="550.66,-187 547.66,-191 526.66,-191 523.66,-187 467.34,-187 467.34,-151 550.66,-151 550.66,-187"/>
<text text-anchor="middle" x="509" y="-164.8" font-family="Times,serif" font-size="14.00">AppModule</text>
<polygon fill="#8dd3c7" stroke="black" points="687.66,-187 684.66,-191 663.66,-191 660.66,-187 604.34,-187 604.34,-151 687.66,-151 687.66,-187"/>
<text text-anchor="middle" x="646" y="-164.8" font-family="Times,serif" font-size="14.00">AppModule</text>
</g>
<!-- AppComponent&#45;&gt;AppModule -->
<g id="edge1" class="edge">
<title>AppComponent&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M77,-122.29C77,-144.21 77,-178 77,-178 77,-178 457.19,-178 457.19,-178"/>
<polygon fill="black" stroke="black" points="457.19,-181.5 467.19,-178 457.19,-174.5 457.19,-181.5"/>
<path fill="none" stroke="black" d="M77,-122.29C77,-144.21 77,-178 77,-178 77,-178 594.16,-178 594.16,-178"/>
<polygon fill="black" stroke="black" points="594.16,-181.5 604.16,-178 594.16,-174.5 594.16,-181.5"/>
</g>
<!-- AppComponent -->
<g id="node5" class="node">
<title>AppComponent </title>
<polygon fill="#80b1d3" stroke="black" points="563.44,-252 454.56,-252 454.56,-216 563.44,-216 563.44,-252"/>
<text text-anchor="middle" x="509" y="-229.8" font-family="Times,serif" font-size="14.00">AppComponent </text>
<polygon fill="#80b1d3" stroke="black" points="700.44,-252 591.56,-252 591.56,-216 700.44,-216 700.44,-252"/>
<text text-anchor="middle" x="646" y="-229.8" font-family="Times,serif" font-size="14.00">AppComponent </text>
</g>
<!-- AppModule&#45;&gt;AppComponent -->
<g id="edge4" class="edge">
<title>AppModule&#45;&gt;AppComponent </title>
<path fill="none" stroke="black" stroke-dasharray="1,5" d="M509,-187.11C509,-187.11 509,-205.99 509,-205.99"/>
<polygon fill="black" stroke="black" points="505.5,-205.99 509,-215.99 512.5,-205.99 505.5,-205.99"/>
<path fill="none" stroke="black" stroke-dasharray="1,5" d="M646,-187.11C646,-187.11 646,-205.99 646,-205.99"/>
<polygon fill="black" stroke="black" points="642.5,-205.99 646,-215.99 649.5,-205.99 642.5,-205.99"/>
</g>
<!-- AppRoutingModule -->
<g id="node3" class="node">
<title>AppRoutingModule</title>
<polygon fill="#8dd3c7" stroke="black" points="399.27,-122 396.27,-126 375.27,-126 372.27,-122 270.73,-122 270.73,-86 399.27,-86 399.27,-122"/>
<text text-anchor="middle" x="335" y="-99.8" font-family="Times,serif" font-size="14.00">AppRoutingModule</text>
<polygon fill="#8dd3c7" stroke="black" points="1170.27,-122 1167.27,-126 1146.27,-126 1143.27,-122 1041.73,-122 1041.73,-86 1170.27,-86 1170.27,-122"/>
<text text-anchor="middle" x="1106" y="-99.8" font-family="Times,serif" font-size="14.00">AppRoutingModule</text>
</g>
<!-- AppRoutingModule&#45;&gt;AppModule -->
<g id="edge2" class="edge">
<title>AppRoutingModule&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M335,-122.03C335,-138.4 335,-160 335,-160 335,-160 457.32,-160 457.32,-160"/>
<polygon fill="black" stroke="black" points="457.32,-163.5 467.32,-160 457.32,-156.5 457.32,-163.5"/>
<path fill="none" stroke="black" d="M1106,-122.29C1106,-144.21 1106,-178 1106,-178 1106,-178 698.04,-178 698.04,-178"/>
<polygon fill="black" stroke="black" points="698.04,-174.5 688.04,-178 698.04,-181.5 698.04,-174.5"/>
</g>
<!-- SharedModule -->
<g id="node4" class="node">
<title>SharedModule</title>
<polygon fill="#8dd3c7" stroke="black" points="252.42,-122 249.42,-126 228.42,-126 225.42,-122 153.58,-122 153.58,-86 252.42,-86 252.42,-122"/>
<text text-anchor="middle" x="203" y="-99.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
<polygon fill="#8dd3c7" stroke="black" points="1023.42,-122 1020.42,-126 999.42,-126 996.42,-122 924.58,-122 924.58,-86 1023.42,-86 1023.42,-122"/>
<text text-anchor="middle" x="974" y="-99.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
</g>
<!-- SharedModule&#45;&gt;AppModule -->
<g id="edge3" class="edge">
<title>SharedModule&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M203,-122.11C203,-141.34 203,-169 203,-169 203,-169 457.09,-169 457.09,-169"/>
<polygon fill="black" stroke="black" points="457.09,-172.5 467.09,-169 457.09,-165.5 457.09,-172.5"/>
<path fill="none" stroke="black" d="M974,-122.11C974,-141.34 974,-169 974,-169 974,-169 697.87,-169 697.87,-169"/>
<polygon fill="black" stroke="black" points="697.87,-165.5 687.87,-169 697.87,-172.5 697.87,-165.5"/>
</g>
<!-- ErrorInterceptor -->
<g id="node6" class="node">
<title>ErrorInterceptor</title>
<ellipse fill="#fdb462" stroke="black" cx="1096" cy="-104" rx="73.53" ry="18"/>
<text text-anchor="middle" x="1096" y="-99.8" font-family="Times,serif" font-size="14.00">ErrorInterceptor</text>
<ellipse fill="#fdb462" stroke="black" cx="827" cy="-104" rx="73.53" ry="18"/>
<text text-anchor="middle" x="827" y="-99.8" font-family="Times,serif" font-size="14.00">ErrorInterceptor</text>
</g>
<!-- ErrorInterceptor&#45;&gt;AppModule -->
<g id="edge5" class="edge">
<title>ErrorInterceptor&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M1096,-122.29C1096,-144.21 1096,-178 1096,-178 1096,-178 560.75,-178 560.75,-178"/>
<polygon fill="black" stroke="black" points="560.75,-174.5 550.75,-178 560.74,-181.5 560.75,-174.5"/>
<path fill="none" stroke="black" d="M827,-122.03C827,-138.4 827,-160 827,-160 827,-160 697.98,-160 697.98,-160"/>
<polygon fill="black" stroke="black" points="697.98,-156.5 687.98,-160 697.98,-163.5 697.98,-156.5"/>
</g>
<!-- GlobalErrorHandler -->
<g id="node7" class="node">
<title>GlobalErrorHandler</title>
<ellipse fill="#fdb462" stroke="black" cx="915" cy="-104" rx="88.58" ry="18"/>
<text text-anchor="middle" x="915" y="-99.8" font-family="Times,serif" font-size="14.00">GlobalErrorHandler</text>
<ellipse fill="#fdb462" stroke="black" cx="646" cy="-104" rx="88.58" ry="18"/>
<text text-anchor="middle" x="646" y="-99.8" font-family="Times,serif" font-size="14.00">GlobalErrorHandler</text>
</g>
<!-- GlobalErrorHandler&#45;&gt;AppModule -->
<g id="edge6" class="edge">
<title>GlobalErrorHandler&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M915,-122.11C915,-141.34 915,-169 915,-169 915,-169 560.92,-169 560.92,-169"/>
<polygon fill="black" stroke="black" points="560.92,-165.5 550.92,-169 560.92,-172.5 560.92,-165.5"/>
<path fill="none" stroke="black" d="M646,-122.11C646,-122.11 646,-140.99 646,-140.99"/>
<polygon fill="black" stroke="black" points="642.5,-140.99 646,-150.99 649.5,-140.99 642.5,-140.99"/>
</g>
<!-- HttpConfigInterceptor -->
<g id="node8" class="node">
<title>HttpConfigInterceptor</title>
<ellipse fill="#fdb462" stroke="black" cx="711" cy="-104" rx="97.27" ry="18"/>
<text text-anchor="middle" x="711" y="-99.8" font-family="Times,serif" font-size="14.00">HttpConfigInterceptor</text>
<ellipse fill="#fdb462" stroke="black" cx="442" cy="-104" rx="97.27" ry="18"/>
<text text-anchor="middle" x="442" y="-99.8" font-family="Times,serif" font-size="14.00">HttpConfigInterceptor</text>
</g>
<!-- HttpConfigInterceptor&#45;&gt;AppModule -->
<g id="edge7" class="edge">
<title>HttpConfigInterceptor&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M711,-122.03C711,-138.4 711,-160 711,-160 711,-160 560.85,-160 560.85,-160"/>
<polygon fill="black" stroke="black" points="560.85,-156.5 550.85,-160 560.85,-163.5 560.85,-156.5"/>
<path fill="none" stroke="black" d="M442,-122.03C442,-138.4 442,-160 442,-160 442,-160 594.23,-160 594.23,-160"/>
<polygon fill="black" stroke="black" points="594.23,-163.5 604.23,-160 594.23,-156.5 594.23,-163.5"/>
</g>
<!-- LoggingInterceptor -->
<g id="node9" class="node">
<title>LoggingInterceptor</title>
<ellipse fill="#fdb462" stroke="black" cx="509" cy="-104" rx="86.24" ry="18"/>
<text text-anchor="middle" x="509" y="-99.8" font-family="Times,serif" font-size="14.00">LoggingInterceptor</text>
<ellipse fill="#fdb462" stroke="black" cx="240" cy="-104" rx="86.24" ry="18"/>
<text text-anchor="middle" x="240" y="-99.8" font-family="Times,serif" font-size="14.00">LoggingInterceptor</text>
</g>
<!-- LoggingInterceptor&#45;&gt;AppModule -->
<g id="edge8" class="edge">
<title>LoggingInterceptor&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M509,-122.11C509,-122.11 509,-140.99 509,-140.99"/>
<polygon fill="black" stroke="black" points="505.5,-140.99 509,-150.99 512.5,-140.99 505.5,-140.99"/>
<path fill="none" stroke="black" d="M240,-122.11C240,-141.34 240,-169 240,-169 240,-169 594.08,-169 594.08,-169"/>
<polygon fill="black" stroke="black" points="594.08,-172.5 604.08,-169 594.08,-165.5 594.08,-172.5"/>
</g>
</g>
</svg>

80
docs/compodoc/modules/AppModule/dependencies.svg
View File

@ -24,22 +24,22 @@
<title>cluster_AppModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-268 1186,-268 1186,-70 8,-70"/>
</g>
<g id="clust7" class="cluster">
<title>cluster_AppModule_providers</title>
<polygon fill="none" stroke="black" points="415,-78 415,-130 1178,-130 1178,-78 415,-78"/>
<g id="clust6" class="cluster">
<title>cluster_AppModule_bootstrap</title>
<polygon fill="none" stroke="black" points="584,-208 584,-260 708,-260 708,-208 584,-208"/>
</g>
<g id="clust4" class="cluster">
<title>cluster_AppModule_imports</title>
<polygon fill="none" stroke="black" points="146,-78 146,-130 407,-130 407,-78 146,-78"/>
<polygon fill="none" stroke="black" points="917,-78 917,-130 1178,-130 1178,-78 917,-78"/>
</g>
<g id="clust7" class="cluster">
<title>cluster_AppModule_providers</title>
<polygon fill="none" stroke="black" points="146,-78 146,-130 909,-130 909,-78 146,-78"/>
</g>
<g id="clust2" class="cluster">
<title>cluster_AppModule_declarations</title>
<polygon fill="none" stroke="black" points="16,-78 16,-130 138,-130 138,-78 16,-78"/>
</g>
<g id="clust6" class="cluster">
<title>cluster_AppModule_bootstrap</title>
<polygon fill="none" stroke="black" points="447,-208 447,-260 571,-260 571,-208 447,-208"/>
</g>
<!-- AppComponent -->
<g id="node1" class="node">
<title>AppComponent</title>
@ -49,98 +49,98 @@
<!-- AppModule -->
<g id="node2" class="node">
<title>AppModule</title>
<polygon fill="#8dd3c7" stroke="black" points="550.66,-187 547.66,-191 526.66,-191 523.66,-187 467.34,-187 467.34,-151 550.66,-151 550.66,-187"/>
<text text-anchor="middle" x="509" y="-164.8" font-family="Times,serif" font-size="14.00">AppModule</text>
<polygon fill="#8dd3c7" stroke="black" points="687.66,-187 684.66,-191 663.66,-191 660.66,-187 604.34,-187 604.34,-151 687.66,-151 687.66,-187"/>
<text text-anchor="middle" x="646" y="-164.8" font-family="Times,serif" font-size="14.00">AppModule</text>
</g>
<!-- AppComponent&#45;&gt;AppModule -->
<g id="edge1" class="edge">
<title>AppComponent&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M77,-122.29C77,-144.21 77,-178 77,-178 77,-178 457.19,-178 457.19,-178"/>
<polygon fill="black" stroke="black" points="457.19,-181.5 467.19,-178 457.19,-174.5 457.19,-181.5"/>
<path fill="none" stroke="black" d="M77,-122.29C77,-144.21 77,-178 77,-178 77,-178 594.16,-178 594.16,-178"/>
<polygon fill="black" stroke="black" points="594.16,-181.5 604.16,-178 594.16,-174.5 594.16,-181.5"/>
</g>
<!-- AppComponent -->
<g id="node5" class="node">
<title>AppComponent </title>
<polygon fill="#80b1d3" stroke="black" points="563.44,-252 454.56,-252 454.56,-216 563.44,-216 563.44,-252"/>
<text text-anchor="middle" x="509" y="-229.8" font-family="Times,serif" font-size="14.00">AppComponent </text>
<polygon fill="#80b1d3" stroke="black" points="700.44,-252 591.56,-252 591.56,-216 700.44,-216 700.44,-252"/>
<text text-anchor="middle" x="646" y="-229.8" font-family="Times,serif" font-size="14.00">AppComponent </text>
</g>
<!-- AppModule&#45;&gt;AppComponent -->
<g id="edge4" class="edge">
<title>AppModule&#45;&gt;AppComponent </title>
<path fill="none" stroke="black" stroke-dasharray="1,5" d="M509,-187.11C509,-187.11 509,-205.99 509,-205.99"/>
<polygon fill="black" stroke="black" points="505.5,-205.99 509,-215.99 512.5,-205.99 505.5,-205.99"/>
<path fill="none" stroke="black" stroke-dasharray="1,5" d="M646,-187.11C646,-187.11 646,-205.99 646,-205.99"/>
<polygon fill="black" stroke="black" points="642.5,-205.99 646,-215.99 649.5,-205.99 642.5,-205.99"/>
</g>
<!-- AppRoutingModule -->
<g id="node3" class="node">
<title>AppRoutingModule</title>
<polygon fill="#8dd3c7" stroke="black" points="399.27,-122 396.27,-126 375.27,-126 372.27,-122 270.73,-122 270.73,-86 399.27,-86 399.27,-122"/>
<text text-anchor="middle" x="335" y="-99.8" font-family="Times,serif" font-size="14.00">AppRoutingModule</text>
<polygon fill="#8dd3c7" stroke="black" points="1170.27,-122 1167.27,-126 1146.27,-126 1143.27,-122 1041.73,-122 1041.73,-86 1170.27,-86 1170.27,-122"/>
<text text-anchor="middle" x="1106" y="-99.8" font-family="Times,serif" font-size="14.00">AppRoutingModule</text>
</g>
<!-- AppRoutingModule&#45;&gt;AppModule -->
<g id="edge2" class="edge">
<title>AppRoutingModule&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M335,-122.03C335,-138.4 335,-160 335,-160 335,-160 457.32,-160 457.32,-160"/>
<polygon fill="black" stroke="black" points="457.32,-163.5 467.32,-160 457.32,-156.5 457.32,-163.5"/>
<path fill="none" stroke="black" d="M1106,-122.29C1106,-144.21 1106,-178 1106,-178 1106,-178 698.04,-178 698.04,-178"/>
<polygon fill="black" stroke="black" points="698.04,-174.5 688.04,-178 698.04,-181.5 698.04,-174.5"/>
</g>
<!-- SharedModule -->
<g id="node4" class="node">
<title>SharedModule</title>
<polygon fill="#8dd3c7" stroke="black" points="252.42,-122 249.42,-126 228.42,-126 225.42,-122 153.58,-122 153.58,-86 252.42,-86 252.42,-122"/>
<text text-anchor="middle" x="203" y="-99.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
<polygon fill="#8dd3c7" stroke="black" points="1023.42,-122 1020.42,-126 999.42,-126 996.42,-122 924.58,-122 924.58,-86 1023.42,-86 1023.42,-122"/>
<text text-anchor="middle" x="974" y="-99.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
</g>
<!-- SharedModule&#45;&gt;AppModule -->
<g id="edge3" class="edge">
<title>SharedModule&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M203,-122.11C203,-141.34 203,-169 203,-169 203,-169 457.09,-169 457.09,-169"/>
<polygon fill="black" stroke="black" points="457.09,-172.5 467.09,-169 457.09,-165.5 457.09,-172.5"/>
<path fill="none" stroke="black" d="M974,-122.11C974,-141.34 974,-169 974,-169 974,-169 697.87,-169 697.87,-169"/>
<polygon fill="black" stroke="black" points="697.87,-165.5 687.87,-169 697.87,-172.5 697.87,-165.5"/>
</g>
<!-- ErrorInterceptor -->
<g id="node6" class="node">
<title>ErrorInterceptor</title>
<ellipse fill="#fdb462" stroke="black" cx="1096" cy="-104" rx="73.53" ry="18"/>
<text text-anchor="middle" x="1096" y="-99.8" font-family="Times,serif" font-size="14.00">ErrorInterceptor</text>
<ellipse fill="#fdb462" stroke="black" cx="827" cy="-104" rx="73.53" ry="18"/>
<text text-anchor="middle" x="827" y="-99.8" font-family="Times,serif" font-size="14.00">ErrorInterceptor</text>
</g>
<!-- ErrorInterceptor&#45;&gt;AppModule -->
<g id="edge5" class="edge">
<title>ErrorInterceptor&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M1096,-122.29C1096,-144.21 1096,-178 1096,-178 1096,-178 560.75,-178 560.75,-178"/>
<polygon fill="black" stroke="black" points="560.75,-174.5 550.75,-178 560.74,-181.5 560.75,-174.5"/>
<path fill="none" stroke="black" d="M827,-122.03C827,-138.4 827,-160 827,-160 827,-160 697.98,-160 697.98,-160"/>
<polygon fill="black" stroke="black" points="697.98,-156.5 687.98,-160 697.98,-163.5 697.98,-156.5"/>
</g>
<!-- GlobalErrorHandler -->
<g id="node7" class="node">
<title>GlobalErrorHandler</title>
<ellipse fill="#fdb462" stroke="black" cx="915" cy="-104" rx="88.58" ry="18"/>
<text text-anchor="middle" x="915" y="-99.8" font-family="Times,serif" font-size="14.00">GlobalErrorHandler</text>
<ellipse fill="#fdb462" stroke="black" cx="646" cy="-104" rx="88.58" ry="18"/>
<text text-anchor="middle" x="646" y="-99.8" font-family="Times,serif" font-size="14.00">GlobalErrorHandler</text>
</g>
<!-- GlobalErrorHandler&#45;&gt;AppModule -->
<g id="edge6" class="edge">
<title>GlobalErrorHandler&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M915,-122.11C915,-141.34 915,-169 915,-169 915,-169 560.92,-169 560.92,-169"/>
<polygon fill="black" stroke="black" points="560.92,-165.5 550.92,-169 560.92,-172.5 560.92,-165.5"/>
<path fill="none" stroke="black" d="M646,-122.11C646,-122.11 646,-140.99 646,-140.99"/>
<polygon fill="black" stroke="black" points="642.5,-140.99 646,-150.99 649.5,-140.99 642.5,-140.99"/>
</g>
<!-- HttpConfigInterceptor -->
<g id="node8" class="node">
<title>HttpConfigInterceptor</title>
<ellipse fill="#fdb462" stroke="black" cx="711" cy="-104" rx="97.27" ry="18"/>
<text text-anchor="middle" x="711" y="-99.8" font-family="Times,serif" font-size="14.00">HttpConfigInterceptor</text>
<ellipse fill="#fdb462" stroke="black" cx="442" cy="-104" rx="97.27" ry="18"/>
<text text-anchor="middle" x="442" y="-99.8" font-family="Times,serif" font-size="14.00">HttpConfigInterceptor</text>
</g>
<!-- HttpConfigInterceptor&#45;&gt;AppModule -->
<g id="edge7" class="edge">
<title>HttpConfigInterceptor&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M711,-122.03C711,-138.4 711,-160 711,-160 711,-160 560.85,-160 560.85,-160"/>
<polygon fill="black" stroke="black" points="560.85,-156.5 550.85,-160 560.85,-163.5 560.85,-156.5"/>
<path fill="none" stroke="black" d="M442,-122.03C442,-138.4 442,-160 442,-160 442,-160 594.23,-160 594.23,-160"/>
<polygon fill="black" stroke="black" points="594.23,-163.5 604.23,-160 594.23,-156.5 594.23,-163.5"/>
</g>
<!-- LoggingInterceptor -->
<g id="node9" class="node">
<title>LoggingInterceptor</title>
<ellipse fill="#fdb462" stroke="black" cx="509" cy="-104" rx="86.24" ry="18"/>
<text text-anchor="middle" x="509" y="-99.8" font-family="Times,serif" font-size="14.00">LoggingInterceptor</text>
<ellipse fill="#fdb462" stroke="black" cx="240" cy="-104" rx="86.24" ry="18"/>
<text text-anchor="middle" x="240" y="-99.8" font-family="Times,serif" font-size="14.00">LoggingInterceptor</text>
</g>
<!-- LoggingInterceptor&#45;&gt;AppModule -->
<g id="edge8" class="edge">
<title>LoggingInterceptor&#45;&gt;AppModule</title>
<path fill="none" stroke="black" d="M509,-122.11C509,-122.11 509,-140.99 509,-140.99"/>
<polygon fill="black" stroke="black" points="505.5,-140.99 509,-150.99 512.5,-140.99 505.5,-140.99"/>
<path fill="none" stroke="black" d="M240,-122.11C240,-141.34 240,-169 240,-169 240,-169 594.08,-169 594.08,-169"/>
<polygon fill="black" stroke="black" points="594.08,-172.5 604.08,-169 594.08,-165.5 594.08,-172.5"/>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

1
docs/compodoc/modules/AppRoutingModule.html
View File

@ -88,6 +88,7 @@ const routes: Routes &#x3D; [
imports: [
RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules,
useHash: true,
}),
],
exports: [RouterModule],

38
docs/compodoc/modules/PagesModule.html
View File

@ -65,55 +65,55 @@
<title>cluster_PagesModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="36,-70 36,-195 460,-195 460,-70 36,-70"/>
</g>
<g id="clust4" class="cluster">
<title>cluster_PagesModule_imports</title>
<polygon fill="none" stroke="black" points="182,-78 182,-130 452,-130 452,-78 182,-78"/>
</g>
<g id="clust2" class="cluster">
<title>cluster_PagesModule_declarations</title>
<polygon fill="none" stroke="black" points="44,-78 44,-130 174,-130 174,-78 44,-78"/>
<polygon fill="none" stroke="black" points="322,-78 322,-130 452,-130 452,-78 322,-78"/>
</g>
<g id="clust4" class="cluster">
<title>cluster_PagesModule_imports</title>
<polygon fill="none" stroke="black" points="44,-78 44,-130 314,-130 314,-78 44,-78"/>
</g>
<!-- PagesComponent -->
<g id="node1" class="node">
<title>PagesComponent</title>
<polygon fill="#ffffb3" stroke="black" points="165.99,-122 52.01,-122 52.01,-86 165.99,-86 165.99,-122"/>
<text text-anchor="middle" x="109" y="-99.8" font-family="Times,serif" font-size="14.00">PagesComponent</text>
<polygon fill="#ffffb3" stroke="black" points="443.99,-122 330.01,-122 330.01,-86 443.99,-86 443.99,-122"/>
<text text-anchor="middle" x="387" y="-99.8" font-family="Times,serif" font-size="14.00">PagesComponent</text>
</g>
<!-- PagesModule -->
<g id="node2" class="node">
<title>PagesModule</title>
<polygon fill="#8dd3c7" stroke="black" points="285.21,-187 282.21,-191 261.21,-191 258.21,-187 192.79,-187 192.79,-151 285.21,-151 285.21,-187"/>
<text text-anchor="middle" x="239" y="-164.8" font-family="Times,serif" font-size="14.00">PagesModule</text>
<polygon fill="#8dd3c7" stroke="black" points="283.21,-187 280.21,-191 259.21,-191 256.21,-187 190.79,-187 190.79,-151 283.21,-151 283.21,-187"/>
<text text-anchor="middle" x="237" y="-164.8" font-family="Times,serif" font-size="14.00">PagesModule</text>
</g>
<!-- PagesComponent&#45;&gt;PagesModule -->
<g id="edge1" class="edge">
<title>PagesComponent&#45;&gt;PagesModule</title>
<path fill="none" stroke="black" d="M109,-122.11C109,-141.34 109,-169 109,-169 109,-169 182.8,-169 182.8,-169"/>
<polygon fill="black" stroke="black" points="182.8,-172.5 192.8,-169 182.8,-165.5 182.8,-172.5"/>
<path fill="none" stroke="black" d="M387,-122.11C387,-141.34 387,-169 387,-169 387,-169 293.23,-169 293.23,-169"/>
<polygon fill="black" stroke="black" points="293.23,-165.5 283.23,-169 293.23,-172.5 293.23,-165.5"/>
</g>
<!-- PagesRoutingModule -->
<g id="node3" class="node">
<title>PagesRoutingModule</title>
<polygon fill="#8dd3c7" stroke="black" points="443.82,-122 440.82,-126 419.82,-126 416.82,-122 306.18,-122 306.18,-86 443.82,-86 443.82,-122"/>
<text text-anchor="middle" x="375" y="-99.8" font-family="Times,serif" font-size="14.00">PagesRoutingModule</text>
<polygon fill="#8dd3c7" stroke="black" points="305.82,-122 302.82,-126 281.82,-126 278.82,-122 168.18,-122 168.18,-86 305.82,-86 305.82,-122"/>
<text text-anchor="middle" x="237" y="-99.8" font-family="Times,serif" font-size="14.00">PagesRoutingModule</text>
</g>
<!-- PagesRoutingModule&#45;&gt;PagesModule -->
<g id="edge2" class="edge">
<title>PagesRoutingModule&#45;&gt;PagesModule</title>
<path fill="none" stroke="black" d="M375,-122.11C375,-141.34 375,-169 375,-169 375,-169 295.42,-169 295.42,-169"/>
<polygon fill="black" stroke="black" points="295.42,-165.5 285.42,-169 295.42,-172.5 295.42,-165.5"/>
<path fill="none" stroke="black" d="M237,-122.11C237,-122.11 237,-140.99 237,-140.99"/>
<polygon fill="black" stroke="black" points="233.5,-140.99 237,-150.99 240.5,-140.99 233.5,-140.99"/>
</g>
<!-- SharedModule -->
<g id="node4" class="node">
<title>SharedModule</title>
<polygon fill="#8dd3c7" stroke="black" points="288.42,-122 285.42,-126 264.42,-126 261.42,-122 189.58,-122 189.58,-86 288.42,-86 288.42,-122"/>
<text text-anchor="middle" x="239" y="-99.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
<polygon fill="#8dd3c7" stroke="black" points="150.42,-122 147.42,-126 126.42,-126 123.42,-122 51.58,-122 51.58,-86 150.42,-86 150.42,-122"/>
<text text-anchor="middle" x="101" y="-99.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
</g>
<!-- SharedModule&#45;&gt;PagesModule -->
<g id="edge3" class="edge">
<title>SharedModule&#45;&gt;PagesModule</title>
<path fill="none" stroke="black" d="M239,-122.11C239,-122.11 239,-140.99 239,-140.99"/>
<polygon fill="black" stroke="black" points="235.5,-140.99 239,-150.99 242.5,-140.99 235.5,-140.99"/>
<path fill="none" stroke="black" d="M101,-122.11C101,-141.34 101,-169 101,-169 101,-169 180.58,-169 180.58,-169"/>
<polygon fill="black" stroke="black" points="180.58,-172.5 190.58,-169 180.58,-165.5 180.58,-172.5"/>
</g>
</g>
</svg>

38
docs/compodoc/modules/PagesModule/dependencies.svg
View File

@ -24,55 +24,55 @@
<title>cluster_PagesModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="36,-70 36,-195 460,-195 460,-70 36,-70"/>
</g>
<g id="clust4" class="cluster">
<title>cluster_PagesModule_imports</title>
<polygon fill="none" stroke="black" points="182,-78 182,-130 452,-130 452,-78 182,-78"/>
</g>
<g id="clust2" class="cluster">
<title>cluster_PagesModule_declarations</title>
<polygon fill="none" stroke="black" points="44,-78 44,-130 174,-130 174,-78 44,-78"/>
<polygon fill="none" stroke="black" points="322,-78 322,-130 452,-130 452,-78 322,-78"/>
</g>
<g id="clust4" class="cluster">
<title>cluster_PagesModule_imports</title>
<polygon fill="none" stroke="black" points="44,-78 44,-130 314,-130 314,-78 44,-78"/>
</g>
<!-- PagesComponent -->
<g id="node1" class="node">
<title>PagesComponent</title>
<polygon fill="#ffffb3" stroke="black" points="165.99,-122 52.01,-122 52.01,-86 165.99,-86 165.99,-122"/>
<text text-anchor="middle" x="109" y="-99.8" font-family="Times,serif" font-size="14.00">PagesComponent</text>
<polygon fill="#ffffb3" stroke="black" points="443.99,-122 330.01,-122 330.01,-86 443.99,-86 443.99,-122"/>
<text text-anchor="middle" x="387" y="-99.8" font-family="Times,serif" font-size="14.00">PagesComponent</text>
</g>
<!-- PagesModule -->
<g id="node2" class="node">
<title>PagesModule</title>
<polygon fill="#8dd3c7" stroke="black" points="285.21,-187 282.21,-191 261.21,-191 258.21,-187 192.79,-187 192.79,-151 285.21,-151 285.21,-187"/>
<text text-anchor="middle" x="239" y="-164.8" font-family="Times,serif" font-size="14.00">PagesModule</text>
<polygon fill="#8dd3c7" stroke="black" points="283.21,-187 280.21,-191 259.21,-191 256.21,-187 190.79,-187 190.79,-151 283.21,-151 283.21,-187"/>
<text text-anchor="middle" x="237" y="-164.8" font-family="Times,serif" font-size="14.00">PagesModule</text>
</g>
<!-- PagesComponent&#45;&gt;PagesModule -->
<g id="edge1" class="edge">
<title>PagesComponent&#45;&gt;PagesModule</title>
<path fill="none" stroke="black" d="M109,-122.11C109,-141.34 109,-169 109,-169 109,-169 182.8,-169 182.8,-169"/>
<polygon fill="black" stroke="black" points="182.8,-172.5 192.8,-169 182.8,-165.5 182.8,-172.5"/>
<path fill="none" stroke="black" d="M387,-122.11C387,-141.34 387,-169 387,-169 387,-169 293.23,-169 293.23,-169"/>
<polygon fill="black" stroke="black" points="293.23,-165.5 283.23,-169 293.23,-172.5 293.23,-165.5"/>
</g>
<!-- PagesRoutingModule -->
<g id="node3" class="node">
<title>PagesRoutingModule</title>
<polygon fill="#8dd3c7" stroke="black" points="443.82,-122 440.82,-126 419.82,-126 416.82,-122 306.18,-122 306.18,-86 443.82,-86 443.82,-122"/>
<text text-anchor="middle" x="375" y="-99.8" font-family="Times,serif" font-size="14.00">PagesRoutingModule</text>
<polygon fill="#8dd3c7" stroke="black" points="305.82,-122 302.82,-126 281.82,-126 278.82,-122 168.18,-122 168.18,-86 305.82,-86 305.82,-122"/>
<text text-anchor="middle" x="237" y="-99.8" font-family="Times,serif" font-size="14.00">PagesRoutingModule</text>
</g>
<!-- PagesRoutingModule&#45;&gt;PagesModule -->
<g id="edge2" class="edge">
<title>PagesRoutingModule&#45;&gt;PagesModule</title>
<path fill="none" stroke="black" d="M375,-122.11C375,-141.34 375,-169 375,-169 375,-169 295.42,-169 295.42,-169"/>
<polygon fill="black" stroke="black" points="295.42,-165.5 285.42,-169 295.42,-172.5 295.42,-165.5"/>
<path fill="none" stroke="black" d="M237,-122.11C237,-122.11 237,-140.99 237,-140.99"/>
<polygon fill="black" stroke="black" points="233.5,-140.99 237,-150.99 240.5,-140.99 233.5,-140.99"/>
</g>
<!-- SharedModule -->
<g id="node4" class="node">
<title>SharedModule</title>
<polygon fill="#8dd3c7" stroke="black" points="288.42,-122 285.42,-126 264.42,-126 261.42,-122 189.58,-122 189.58,-86 288.42,-86 288.42,-122"/>
<text text-anchor="middle" x="239" y="-99.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
<polygon fill="#8dd3c7" stroke="black" points="150.42,-122 147.42,-126 126.42,-126 123.42,-122 51.58,-122 51.58,-86 150.42,-86 150.42,-122"/>
<text text-anchor="middle" x="101" y="-99.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
</g>
<!-- SharedModule&#45;&gt;PagesModule -->
<g id="edge3" class="edge">
<title>SharedModule&#45;&gt;PagesModule</title>
<path fill="none" stroke="black" d="M239,-122.11C239,-122.11 239,-140.99 239,-140.99"/>
<polygon fill="black" stroke="black" points="235.5,-140.99 239,-150.99 242.5,-140.99 235.5,-140.99"/>
<path fill="none" stroke="black" d="M101,-122.11C101,-141.34 101,-169 101,-169 101,-169 180.58,-169 180.58,-169"/>
<polygon fill="black" stroke="black" points="180.58,-172.5 190.58,-169 180.58,-165.5 180.58,-172.5"/>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

41
docs/typedoc/classes/app_auth__directives_password_toggle_directive.passwordtoggledirective.html
View File

@ -68,6 +68,13 @@
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Toggle password form field input visibility</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-hierarchy">
<h3>Hierarchy</h3>
<ul class="tsd-hierarchy">
@ -114,16 +121,27 @@
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in src/app/auth/_directives/password-toggle.directive.ts:11</li>
<li>Defined in src/app/auth/_directives/password-toggle.directive.ts:15</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Handle click events on the html element.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>elementRef: <span class="tsd-signature-type">ElementRef</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span></h5>
<div class="tsd-comment tsd-typography">
<p>A wrapper around a native element inside of a View.</p>
</div>
</li>
<li>
<h5>renderer: <span class="tsd-signature-type">Renderer2</span></h5>
<div class="tsd-comment tsd-typography">
<p>Extend this base class to implement custom rendering.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="app_auth__directives_password_toggle_directive.passwordtoggledirective.html" class="tsd-signature-type" data-tsd-kind="Class">PasswordToggleDirective</a></h4>
@ -139,9 +157,14 @@
<div class="tsd-signature tsd-kind-icon">icon<wbr>Id<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in src/app/auth/_directives/password-toggle.directive.ts:11</li>
<li>Defined in src/app/auth/_directives/password-toggle.directive.ts:15</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The password form field icon id</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
<a name="id" class="tsd-anchor"></a>
@ -149,9 +172,14 @@
<div class="tsd-signature tsd-kind-icon">id<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in src/app/auth/_directives/password-toggle.directive.ts:8</li>
<li>Defined in src/app/auth/_directives/password-toggle.directive.ts:11</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The password form field id</p>
</div>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
@ -166,9 +194,14 @@
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in src/app/auth/_directives/password-toggle.directive.ts:19</li>
<li>Defined in src/app/auth/_directives/password-toggle.directive.ts:30</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Toggle the visibility of the password input field value and accompanying icon.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>

27
docs/typedoc/classes/app_shared__directives_menu_selection_directive.menuselectiondirective.html
View File

@ -68,6 +68,13 @@
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Toggle availability of sidebar on menu item selection.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-hierarchy">
<h3>Hierarchy</h3>
<ul class="tsd-hierarchy">
@ -107,16 +114,27 @@
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in src/app/shared/_directives/menu-selection.directive.ts:6</li>
<li>Defined in src/app/shared/_directives/menu-selection.directive.ts:8</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Handle click events on the html element.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>elementRef: <span class="tsd-signature-type">ElementRef</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span></h5>
<div class="tsd-comment tsd-typography">
<p>A wrapper around a native element inside of a View.</p>
</div>
</li>
<li>
<h5>renderer: <span class="tsd-signature-type">Renderer2</span></h5>
<div class="tsd-comment tsd-typography">
<p>Extend this base class to implement custom rendering.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="app_shared__directives_menu_selection_directive.menuselectiondirective.html" class="tsd-signature-type" data-tsd-kind="Class">MenuSelectionDirective</a></h4>
@ -136,9 +154,14 @@
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in src/app/shared/_directives/menu-selection.directive.ts:16</li>
<li>Defined in src/app/shared/_directives/menu-selection.directive.ts:25</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Toggle the availability of the sidebar.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>

27
docs/typedoc/classes/app_shared__directives_menu_toggle_directive.menutoggledirective.html
View File

@ -68,6 +68,13 @@
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Toggle availability of sidebar on menu toggle click.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-hierarchy">
<h3>Hierarchy</h3>
<ul class="tsd-hierarchy">
@ -107,16 +114,27 @@
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in src/app/shared/_directives/menu-toggle.directive.ts:6</li>
<li>Defined in src/app/shared/_directives/menu-toggle.directive.ts:8</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Handle click events on the html element.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>elementRef: <span class="tsd-signature-type">ElementRef</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">&gt;</span></h5>
<div class="tsd-comment tsd-typography">
<p>A wrapper around a native element inside of a View.</p>
</div>
</li>
<li>
<h5>renderer: <span class="tsd-signature-type">Renderer2</span></h5>
<div class="tsd-comment tsd-typography">
<p>Extend this base class to implement custom rendering.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="app_shared__directives_menu_toggle_directive.menutoggledirective.html" class="tsd-signature-type" data-tsd-kind="Class">MenuToggleDirective</a></h4>
@ -136,9 +154,14 @@
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in src/app/shared/_directives/menu-toggle.directive.ts:14</li>
<li>Defined in src/app/shared/_directives/menu-toggle.directive.ts:22</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Toggle the availability of the sidebar.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>

30
docs/typedoc/index.html
View File

@ -70,7 +70,8 @@
<a href="#development-server" id="development-server" style="color: inherit; text-decoration: none;">
<h2>Development server</h2>
</a>
<p>Run <code>npm run start:dev</code> for a dev server. Navigate to <code>http://localhost:4200/</code>. The app will automatically reload if you change any of the source files.</p>
<p>Run <code>ng serve</code> for a local server, <code>npm run start:dev</code> for a dev server and <code>npm run start:prod</code> for a prod server..</p>
<p>Navigate to <code>http://localhost:4200/</code>. The app will automatically reload if you change any of the source files.</p>
<a href="#code-scaffolding" id="code-scaffolding" style="color: inherit; text-decoration: none;">
<h2>Code scaffolding</h2>
</a>
@ -82,13 +83,19 @@
<a href="#build" id="build" style="color: inherit; text-decoration: none;">
<h2>Build</h2>
</a>
<p>set you environment variables - set these via environment variables as found in set-env.ts
// TODO create a .env file so people don&#39;t have to set these one-by-one</p>
<p>Run <code>npm run build:dev</code> to build the project. The build artifacts will be stored in the <code>dist/</code> directory. Use the <code>build:prod</code> script for a production build.</p>
<p>Run <code>ng build</code> to build the project using local configurations.
The build artifacts will be stored in the <code>dist/</code> directory.</p>
<p>Use the <code>npm run build:dev</code> script for a development build and the <code>npm run build:prod</code> script for a production build.</p>
<a href="#pwa" id="pwa" style="color: inherit; text-decoration: none;">
<h2>PWA</h2>
</a>
<p>The app supports Progressive Web App capabilities.</p>
<p>Run <code>npm run start:pwa</code> to run the project in PWA mode.
PWA mode works using production configurations.</p>
<a href="#running-unit-tests" id="running-unit-tests" style="color: inherit; text-decoration: none;">
<h2>Running unit tests</h2>
</a>
<p>Run <code>npm run test:dev</code> to execute the unit tests via <a href="https://karma-runner.github.io">Karma</a>.</p>
<p>Run <code>ng test</code> to execute the unit tests via <a href="https://karma-runner.github.io">Karma</a>.</p>
<a href="#running-end-to-end-tests" id="running-end-to-end-tests" style="color: inherit; text-decoration: none;">
<h2>Running end-to-end tests</h2>
</a>
@ -96,10 +103,17 @@
<a href="#environment-variables" id="environment-variables" style="color: inherit; text-decoration: none;">
<h2>Environment variables</h2>
</a>
<p>Environment variables are contained in the <code>.env</code> file. See <code>.env.example</code> for a template.</p>
<p>Default environment variables are set in the <code>set-env.ts</code> file.
<p>Default environment variables are located in the <code>src/environments/</code> directory.
Custom environment variables are contained in the <code>.env</code> file. See <code>.env.example</code> for a template.</p>
<p>Custom environment variables are set via the <code>set-env.ts</code> file.
Once loaded they will be populated in the directory <code>src/environments/</code>.
It contains environment variables for development on <code>environment.ts</code> and production on <code>environment.prod.ts</code>.</p>
It contains environment variables for development on <code>environment.dev.ts</code> and production on <code>environment.prod.ts</code>.</p>
<a href="#code-formatting" id="code-formatting" style="color: inherit; text-decoration: none;">
<h2>Code formatting</h2>
</a>
<p>The system has automated code formatting using <a href="https://prettier.io/">Prettier</a> and <a href="https://palantir.github.io/tslint/">TsLint</a>.
To view the styling rules set, check out <code>.prettierrc</code> and <code>tslint.json</code>.</p>
<p>Run <code>npm run format:lint</code> To perform formatting and linting of the codebase.</p>
<a href="#further-help" id="further-help" style="color: inherit; text-decoration: none;">
<h2>Further help</h2>
</a>

5
src/app/auth/_directives/password-toggle.directive.spec.ts
View File

@ -1,6 +1,9 @@
import { PasswordToggleDirective } from '@app/auth/_directives/password-toggle.directive';
// Core imports
import { ElementRef, Renderer2 } from '@angular/core';
// Application imports
import { PasswordToggleDirective } from '@app/auth/_directives/password-toggle.directive';
// tslint:disable-next-line:prefer-const
let elementRef: ElementRef;
// tslint:disable-next-line:prefer-const

11
src/app/auth/_directives/password-toggle.directive.ts
View File

@ -1,21 +1,32 @@
// Core imports
import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
/** Toggle password form field input visibility */
@Directive({
selector: '[appPasswordToggle]',
})
export class PasswordToggleDirective {
/** The password form field id */
@Input()
id: string;
/** The password form field icon id */
@Input()
iconId: string;
/**
* Handle click events on the html element.
*
* @param elementRef - A wrapper around a native element inside of a View.
* @param renderer - Extend this base class to implement custom rendering.
*/
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
this.renderer.listen(this.elementRef.nativeElement, 'click', () => {
this.togglePasswordVisibility();
});
}
/** Toggle the visibility of the password input field value and accompanying icon. */
togglePasswordVisibility(): void {
const password: HTMLElement = document.getElementById(this.id);
const icon: HTMLElement = document.getElementById(this.iconId);

5
src/app/shared/_directives/menu-selection.directive.spec.ts
View File

@ -1,6 +1,9 @@
import { MenuSelectionDirective } from '@app/shared/_directives/menu-selection.directive';
// Core imports
import { ElementRef, Renderer2 } from '@angular/core';
// Application imports
import { MenuSelectionDirective } from '@app/shared/_directives/menu-selection.directive';
describe('MenuSelectionDirective', () => {
// tslint:disable-next-line:prefer-const
let elementRef: ElementRef;

9
src/app/shared/_directives/menu-selection.directive.ts
View File

@ -1,9 +1,17 @@
// Core imports
import { Directive, ElementRef, Renderer2 } from '@angular/core';
/** Toggle availability of sidebar on menu item selection. */
@Directive({
selector: '[appMenuSelection]',
})
export class MenuSelectionDirective {
/**
* Handle click events on the html element.
*
* @param elementRef - A wrapper around a native element inside of a View.
* @param renderer - Extend this base class to implement custom rendering.
*/
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
this.renderer.listen(this.elementRef.nativeElement, 'click', () => {
const mediaQuery = window.matchMedia('(max-width: 768px)');
@ -13,6 +21,7 @@ export class MenuSelectionDirective {
});
}
/** Toggle the availability of the sidebar. */
onMenuSelect(): void {
const sidebar: HTMLElement = document.getElementById('sidebar');
if (!sidebar?.classList.contains('active')) {

5
src/app/shared/_directives/menu-toggle.directive.spec.ts
View File

@ -1,6 +1,9 @@
import { MenuToggleDirective } from '@app/shared/_directives/menu-toggle.directive';
// Core imports
import { ElementRef, Renderer2 } from '@angular/core';
// Application imports
import { MenuToggleDirective } from '@app/shared/_directives/menu-toggle.directive';
describe('MenuToggleDirective', () => {
// tslint:disable-next-line:prefer-const
let elementRef: ElementRef;

10
src/app/shared/_directives/menu-toggle.directive.ts
View File

@ -1,16 +1,24 @@
// Core imports
import { Directive, ElementRef, Renderer2 } from '@angular/core';
/** Toggle availability of sidebar on menu toggle click. */
@Directive({
selector: '[appMenuToggle]',
})
export class MenuToggleDirective {
/**
* Handle click events on the html element.
*
* @param elementRef - A wrapper around a native element inside of a View.
* @param renderer - Extend this base class to implement custom rendering.
*/
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
this.renderer.listen(this.elementRef.nativeElement, 'click', () => {
this.onMenuToggle();
});
}
// Menu Trigger
/** Toggle the availability of the sidebar. */
onMenuToggle(): void {
const sidebar: HTMLElement = document.getElementById('sidebar');
sidebar?.classList.toggle('active');