From 5b00044ea3033c2a630a4ebfb6892700811d3bd3 Mon Sep 17 00:00:00 2001
From: Thomas Renger <thomas.renger@gmail.com>
Date: Thu, 30 Dec 2021 14:02:38 +0100
Subject: [PATCH 1/3] feat: formatting the documentation page

---
 src/app/app.component.html | 60 ++++++++++++++++++++++----------------
 src/app/app.module.ts      |  2 ++
 src/app/i18n/de.json       | 37 +++++++++++++++++++++++
 src/index.html             |  5 +---
 tailwind.config.js         |  7 -----
 5 files changed, 75 insertions(+), 36 deletions(-)
 create mode 100644 src/app/i18n/de.json

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 91f5404..c945bc9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,9 +1,9 @@
-<section class="tw-p-4">
-  <h1>Bolzplatzarena Component Examples</h1>
-  <p>Collection of conmponents and utilities based on the angular material library.</p>
-  <h2>Table</h2>
-  <p>Easy way to use a table, whitout the need to implement to headers and columns by you own.</p>
-  <p>Custom column configuration availble for:</p>
+<section>
+  <h1 class="tw-p-4 tw-m-0" translate>Bolzplatzarena Component Examples</h1>
+  <p class="tw-px-4">Collection of conmponents and utilities based on the angular material library.</p>
+  <h2 class="tw-p-4 tw-m-0">Table</h2>
+  <p class="tw-px-4">Easy way to use a table, whitout the need to implement to headers and columns by you own.</p>
+  <p class="tw-px-4">Custom column configuration availble for:</p>
   <ul>
     <li>Date</li>
     <li>Enumeration</li>
@@ -14,28 +14,38 @@ <h2>Table</h2>
              (deleteEvent)="die()"
              (editEvent)="view()"
              translateKey="hero.components.hero-list."></bpa-table>
-  <h3>Options</h3>
-  sortable (default: true) - set to false to disable sorting
-  <h2>Enum Helper</h2>
-  Sometimes it is hard to handle enums but it is important to use an enum instead of just using a number or a string.
-  <br>Here you can find some little helpers, which enable you to use enum for material select or in the tempalte as a
-  string very easily.
-  <h3>Select Options with enumeration</h3>
-  <p>Easy why to use a typescript enum as source of the material select.</p>
-  <mat-form-field>
-    <mat-label>Hero Type</mat-label>
-    <mat-select>
-      <mat-option *ngFor="let item of items" [value]="item.value">
-        {{ item.label ?? (item.labelTranslateKey ! | translate) }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-  <h3>Pipe</h3>
-  Original value: {{ HeroType.Scientist }}
+  <h3 class="tw-p-4">Options</h3>
+  <p class="tw-px-4">
+    sortable (default: true) - set to false to disable sorting
+  </p>
+  <h2 class="tw-p-4">Enum Helper</h2>
+  <p class="tw-px-4">
+    Sometimes it is hard to handle enums but it is important to use an enum instead of just using a number or a string.
+    <br>Here you can find some little helpers, which enable you to use enum for material select or in the tempalte as a
+    string very easily.
+  </p>
+  <h3 class="tw-p-4">Select Options with enumeration</h3>
+  <p class="tw-px-4">Easy why to use a typescript enum as source of the material select.</p>
+  <section class="tw-px-4">
+    <mat-form-field>
+      <mat-label>Hero Type</mat-label>
+      <mat-select>
+        <mat-option *ngFor="let item of items" [value]="item.value">
+          {{ item.label ?? (item.labelTranslateKey ! | translate) }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </section>
+  <h3 class="tw-p-4">Pipe</h3>
+  <p class="tw-px-4">
+    Original value: {{ HeroType.Scientist }}
+  </p>
   <code>
     Original value: {{ '&#123;&#123; HeroType.Scientist &#125;&#125;' }}
   </code>
-  <br>As String: {{ HeroType.Scientist | enumKey : HeroType }}
+  <p class="tw-px-4">
+    As String: {{ HeroType.Scientist | enumKey : HeroType }}
+  </p>
   <code>
     As String: {{ '&#123;&#123; HeroType.Scientist | enumKey : HeroType &#125;&#125;' }}
   </code>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 37fc686..5120aa1 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,6 +6,7 @@ import { ComponentsModule } from '@bolzplatzarena/components';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { AppComponent } from './app.component';
 
+import * as de from './i18n/de.json';
 import * as en from './i18n/en.json';
 
 @NgModule({
@@ -25,6 +26,7 @@ import * as en from './i18n/en.json';
 export class AppModule {
   constructor(translate: TranslateService) {
     translate.setTranslation('en', en, true);
+    translate.setTranslation('de', de, true);
     translate.use('en');
   }
 }
diff --git a/src/app/i18n/de.json b/src/app/i18n/de.json
new file mode 100644
index 0000000..f474f79
--- /dev/null
+++ b/src/app/i18n/de.json
@@ -0,0 +1,37 @@
+{
+  "Bolzplatzarena Component Examples": "Bolzplatzarena Component Beispiele",
+  "bpa": {
+    "components": {
+      "table": {
+        "items-per-page": "Einträge pro Seite",
+        "page": "Seite {{ page }} von {{ amountPages }}",
+        "next-page": "Nächste Seite",
+        "last-page": "Letzte Seite",
+        "first-page": "Erste Seite",
+        "previous-page": "Vorherige Seite"
+      }
+    }
+  },
+  "hero": {
+    "components": {
+      "hero-list": {
+        "name": "Name",
+        "level": "Level",
+        "type": "Type",
+        "type.hammer": "Hammer",
+        "type.fighter": "Fighter",
+        "type.spy": "Spion",
+        "type.scientist": "Wissenschaftler",
+        "health": "Health",
+        "birthday": "Birthday",
+        "actions": "Actions"
+      }
+    },
+    "types": {
+      "fighter": "Fighter",
+      "hammer": "Thor",
+      "scientist": "Wissenschaftler",
+      "spy": "Spion"
+    }
+  }
+}
diff --git a/src/index.html b/src/index.html
index f8d9c7f..ff770a0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,11 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
-  <app-root></app-root>
+<app-root></app-root>
 </body>
 </html>
diff --git a/tailwind.config.js b/tailwind.config.js
index 77bae12..c9c5afa 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,5 @@
 module.exports = {
   prefix: 'tw-',
-  purge: {
-    enabled: true,
-    content: [
-      "./src/**/*.{html,ts}",
-      "./projects/**/*.{html,ts}",
-    ]
-  },
   content: {
     enabled: true,
     content: [

From a9783624a287b5f33df9a2c745d7f55ee9f11be8 Mon Sep 17 00:00:00 2001
From: Thomas Renger <thomas.renger@gmail.com>
Date: Thu, 30 Dec 2021 15:56:30 +0100
Subject: [PATCH 2/3] feat: translate the pages

---
 src/app/app.component.html | 42 ++++++++++++++++++++++----------------
 src/app/app.component.ts   |  8 ++++++++
 src/app/app.module.ts      |  2 ++
 src/app/i18n/de.json       | 22 +++++++++++++++++++-
 src/app/i18n/en.json       | 22 ++++++++++++++++++++
 5 files changed, 77 insertions(+), 19 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index c945bc9..b4ebbd5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,9 +1,17 @@
 <section>
-  <h1 class="tw-p-4 tw-m-0" translate>Bolzplatzarena Component Examples</h1>
-  <p class="tw-px-4">Collection of conmponents and utilities based on the angular material library.</p>
-  <h2 class="tw-p-4 tw-m-0">Table</h2>
-  <p class="tw-px-4">Easy way to use a table, whitout the need to implement to headers and columns by you own.</p>
-  <p class="tw-px-4">Custom column configuration availble for:</p>
+  <mat-button-toggle-group>
+    <mat-button-toggle (click)="setLanguage('de')">Deutsch</mat-button-toggle>
+    <mat-button-toggle (click)="setLanguage('en')">English</mat-button-toggle>
+  </mat-button-toggle-group>
+  <h1 class="tw-p-4 tw-m-0" translate>content.headline.first</h1>
+  <p class="tw-px-4" translate>
+    content.text.1
+  </p>
+  <h2 class="tw-p-4 tw-m-0" translate>content.headline.examples</h2>
+  <p class="tw-px-4" translate>content.text.examples</p>
+  <h2 class="tw-p-4 tw-m-0" translate>content.headline.table</h2>
+  <p class="tw-px-4" translate>content.text.table</p>
+  <p class="tw-px-4" translate>content.text.column</p>
   <ul>
     <li>Date</li>
     <li>Enumeration</li>
@@ -14,18 +22,15 @@ <h2 class="tw-p-4 tw-m-0">Table</h2>
              (deleteEvent)="die()"
              (editEvent)="view()"
              translateKey="hero.components.hero-list."></bpa-table>
-  <h3 class="tw-p-4">Options</h3>
-  <p class="tw-px-4">
-    sortable (default: true) - set to false to disable sorting
-  </p>
-  <h2 class="tw-p-4">Enum Helper</h2>
-  <p class="tw-px-4">
-    Sometimes it is hard to handle enums but it is important to use an enum instead of just using a number or a string.
-    <br>Here you can find some little helpers, which enable you to use enum for material select or in the tempalte as a
-    string very easily.
-  </p>
-  <h3 class="tw-p-4">Select Options with enumeration</h3>
-  <p class="tw-px-4">Easy why to use a typescript enum as source of the material select.</p>
+  <h3 class="tw-p-4" translate>content.headline.options</h3>
+  <p class="tw-px-4" translate>content.text.options</p>
+  <h2 class="tw-p-4" translate>content.headline.enum</h2>
+  <p class="tw-px-4" [innerHtml]="'content.text.enum' | translate"></p>
+  <h3 class="tw-p-4" translate>content.headline.enum_options</h3>
+  <p class="tw-px-4" translate>content.text.enum_options</p>
+  <code>
+    readonly items = translatableFrom(HeroType, 'hero.types');
+  </code>
   <section class="tw-px-4">
     <mat-form-field>
       <mat-label>Hero Type</mat-label>
@@ -36,7 +41,8 @@ <h3 class="tw-p-4">Select Options with enumeration</h3>
       </mat-select>
     </mat-form-field>
   </section>
-  <h3 class="tw-p-4">Pipe</h3>
+  <h3 class="tw-p-4" translate>content.headline.pipe</h3>
+  <p class="tw-px-4" translate>content.text.pipe</p>
   <p class="tw-px-4">
     Original value: {{ HeroType.Scientist }}
   </p>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e51f89e..938b046 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnConfig, ColumnType, translatableFrom } from '@bolzplatzarena/components';
+import { TranslateService } from '@ngx-translate/core';
 
 enum HeroType {
   Fighter,
@@ -108,6 +109,13 @@ export class AppComponent {
   readonly items = translatableFrom(HeroType, 'hero.types');
   readonly HeroType = HeroType;
 
+  constructor(private readonly translate: TranslateService) {
+  }
+
+  setLanguage(lang: string): void {
+    this.translate.use(lang);
+  }
+
   die(): void {
     alert('Die');
   }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5120aa1..314f54b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatSelectModule } from '@angular/material/select';
 import { BrowserModule } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -19,6 +20,7 @@ import * as en from './i18n/en.json';
     NoopAnimationsModule,
     TranslateModule.forRoot(),
     MatSelectModule,
+    MatButtonToggleModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/src/app/i18n/de.json b/src/app/i18n/de.json
index f474f79..bd9bb3c 100644
--- a/src/app/i18n/de.json
+++ b/src/app/i18n/de.json
@@ -1,5 +1,25 @@
 {
-  "Bolzplatzarena Component Examples": "Bolzplatzarena Component Beispiele",
+  "content": {
+    "text": {
+      "1": "Dies ist eine Sammlungen von Komponenten welche auf Basis von Angular Material gebaut wurden. Zudem finden sich hier noch diverse Helferlein, welche euch das Arbeiten möglichst vereinfachen sollen.",
+      "examples": "Hier findet man viele praktische Beispiele.",
+      "table": "Einfache Implementierung der Tabelle, welche viele Sachen abnimmt und es daher einfach machen die Material Table zu nutzen.",
+      "column": "Erweiterte Spaltenkonfiguration ist verfügbar für:",
+      "options": "sortable (default: true) - auf \"false\" setzen um zu deaktivieren",
+      "enum": "Enums sind toll, Enums sind wichtig. Aber manchmal sind sie schwer zu nutzen, vor allem in Tempülates.<br>Hier findet ihr Tools die euch unterstützen.",
+      "enum_options": "Dies ist eine Methode um aus einem Enum eine Datenquelle für ein Dropdown zu machen und dabei die Werte auch noch zu übersetzen.",
+      "pipe": "Die Pipe gibt euch die Möglichkeit den Enum-Schlüssel in einer View zu nutzen. Dies ist vor allem dann wichtig, wenn das Enum nicht auf einem String basiert."
+    },
+    "headline": {
+      "first": "Bolzplatzarena Components",
+      "examples": "Beispiele",
+      "table": "Die Tabelle",
+      "options": "Optionen",
+      "enum": "Enum Helferlein",
+      "enum_options": "Select Options mit Enumerationen",
+      "pipe": "Pipe"
+    }
+  },
   "bpa": {
     "components": {
       "table": {
diff --git a/src/app/i18n/en.json b/src/app/i18n/en.json
index 1201f8c..a94ba8e 100644
--- a/src/app/i18n/en.json
+++ b/src/app/i18n/en.json
@@ -1,4 +1,26 @@
 {
+  "content": {
+    "text": {
+      "1": "This is a collection of components build on top of angular material to make it easier to use it. Additionally little helpers could by found.",
+      "examples": "Collection of conmponents and utilities based on the angular material library.",
+      "table": "Easy way to use a table, whitout the need to implement to headers and columns by you own.",
+      "column": "Custom column configuration availble for:",
+      "options": "sortable (default: true) - set to false to disable sorting",
+      "enum": "Sometimes it is hard to handle enums but it is important to use an enum instead of just using a number or a string.\n    <br>Here you can find some little helpers, which enable you to use enum for material select or in the tempalte as a\n    string very easily.",
+      "enum_options": "Easy why to use a typescript enum as source of the material select.",
+      "pipe": "The pipe provides an easy way to get the selected key of an enumeration in the template."
+    },
+    "headline": {
+      "first": "Bolzplatzarena Components",
+      "examples": "Examples",
+      "table": "The table",
+      "options": "Options",
+      "enum": "Enum Helper",
+      "enum_options": "Select Options with enumeration",
+      "select": "Select options with enumeration",
+      "pipe": "Pipe"
+    }
+  },
   "bpa": {
     "components": {
       "table": {

From c55aa29c1bc5a79b30f5a5fe4a22dc2806726886 Mon Sep 17 00:00:00 2001
From: Thomas Renger <thomas.renger@gmail.com>
Date: Thu, 30 Dec 2021 15:57:02 +0100
Subject: [PATCH 3/3] feat: deploy to pages

---
 angular.json      |   6 +
 package-lock.json | 361 ++++++++++++++++++++++++++++++++++++++++++++--
 package.json      |   1 +
 3 files changed, 355 insertions(+), 13 deletions(-)

diff --git a/angular.json b/angular.json
index 482a17b..7261bea 100644
--- a/angular.json
+++ b/angular.json
@@ -95,6 +95,12 @@
               "src/**/*.html"
             ]
           }
+        },
+        "deploy": {
+          "builder": "angular-cli-ghpages:deploy",
+          "options": {
+            "baseHref": "https://bolzplatzarena.github.io/Components/"
+          }
         }
       }
     },
diff --git a/package-lock.json b/package-lock.json
index 492cd8c..9e05a1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "@types/node": "^12.11.1",
         "@typescript-eslint/eslint-plugin": "5.3.0",
         "@typescript-eslint/parser": "5.3.0",
+        "angular-cli-ghpages": "^1.0.0",
         "eslint": "^8.2.0",
         "jasmine-core": "~3.10.0",
         "jest": "^27.4.3",
@@ -4949,6 +4950,68 @@
         }
       }
     },
+    "node_modules/angular-cli-ghpages": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/angular-cli-ghpages/-/angular-cli-ghpages-1.0.0.tgz",
+      "integrity": "sha512-TUmAPOP/a8dzOC0D5juBnxeWQzx7DXz1WNvoOijDpbPGYFcQJKSsnsjk+Wx5aydbXvzS4YuE7Nh2VvfEKlLa+Q==",
+      "dev": true,
+      "dependencies": {
+        "commander": "^3.0.0-0",
+        "fs-extra": "^9.0.1",
+        "gh-pages": "^3.1.0"
+      },
+      "bin": {
+        "angular-cli-ghpages": "angular-cli-ghpages",
+        "ngh": "angular-cli-ghpages"
+      },
+      "peerDependencies": {
+        "@angular-devkit/architect": ">= 0.900 < 0.1400",
+        "@angular-devkit/core": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
+        "@angular-devkit/schematics": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0"
+      }
+    },
+    "node_modules/angular-cli-ghpages/node_modules/commander": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz",
+      "integrity": "sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==",
+      "dev": true
+    },
+    "node_modules/angular-cli-ghpages/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/angular-cli-ghpages/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/angular-cli-ghpages/node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
@@ -5078,6 +5141,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/async": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
@@ -7206,6 +7278,12 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.11.tgz",
       "integrity": "sha512-2OhsaYgsWGhWjx2et8kaUcdktPbBGjKM2X0BReUCKcSCPttEY+hz2zie820JLbttU8jwL92+JJysWwkut3wZgA=="
     },
+    "node_modules/email-addresses": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
+      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==",
+      "dev": true
+    },
     "node_modules/emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -8434,6 +8512,32 @@
         "minimatch": "^3.0.4"
       }
     },
+    "node_modules/filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dev": true,
+      "dependencies": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -8612,8 +8716,6 @@
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
       "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^4.0.0",
@@ -8743,6 +8845,56 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gh-pages": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz",
+      "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==",
+      "dev": true,
+      "dependencies": {
+        "async": "^2.6.1",
+        "commander": "^2.18.0",
+        "email-addresses": "^3.0.1",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "bin": {
+        "gh-pages": "bin/gh-pages.js",
+        "gh-pages-clean": "bin/gh-pages-clean.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gh-pages/node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+      "dev": true,
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gh-pages/node_modules/globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^1.0.1",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -11935,8 +12087,6 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -13267,8 +13417,6 @@
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13823,6 +13971,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "dev": true,
+      "dependencies": {
+        "pinkie": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
@@ -16974,6 +17143,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/stylus": {
       "version": "0.55.0",
       "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.55.0.tgz",
@@ -17523,6 +17704,18 @@
         "tree-kill": "cli.js"
       }
     },
+    "node_modules/trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ts-jest": {
       "version": "27.1.0",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-27.1.0.tgz",
@@ -22452,6 +22645,53 @@
         "ajv": "^8.0.0"
       }
     },
+    "angular-cli-ghpages": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/angular-cli-ghpages/-/angular-cli-ghpages-1.0.0.tgz",
+      "integrity": "sha512-TUmAPOP/a8dzOC0D5juBnxeWQzx7DXz1WNvoOijDpbPGYFcQJKSsnsjk+Wx5aydbXvzS4YuE7Nh2VvfEKlLa+Q==",
+      "dev": true,
+      "requires": {
+        "commander": "^3.0.0-0",
+        "fs-extra": "^9.0.1",
+        "gh-pages": "^3.1.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz",
+          "integrity": "sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+          "dev": true,
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "dev": true
+        }
+      }
+    },
     "ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
@@ -22548,6 +22788,12 @@
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true
     },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
+      "dev": true
+    },
     "async": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
@@ -24180,6 +24426,12 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.11.tgz",
       "integrity": "sha512-2OhsaYgsWGhWjx2et8kaUcdktPbBGjKM2X0BReUCKcSCPttEY+hz2zie820JLbttU8jwL92+JJysWwkut3wZgA=="
     },
+    "email-addresses": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
+      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==",
+      "dev": true
+    },
     "emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -25082,6 +25334,23 @@
         "minimatch": "^3.0.4"
       }
     },
+    "filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik=",
+      "dev": true
+    },
+    "filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dev": true,
+      "requires": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -25215,8 +25484,6 @@
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
       "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "requires": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^4.0.0",
@@ -25312,6 +25579,45 @@
       "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
       "dev": true
     },
+    "gh-pages": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz",
+      "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==",
+      "dev": true,
+      "requires": {
+        "async": "^2.6.1",
+        "commander": "^2.18.0",
+        "email-addresses": "^3.0.1",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "dependencies": {
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+          "dev": true,
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        },
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+          "dev": true,
+          "requires": {
+            "array-union": "^1.0.1",
+            "glob": "^7.0.3",
+            "object-assign": "^4.0.1",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        }
+      }
+    },
     "glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -27666,8 +27972,6 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "requires": {
         "graceful-fs": "^4.1.6"
       }
@@ -28677,9 +28981,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true,
-      "optional": true,
-      "peer": true
+      "dev": true
     },
     "object-hash": {
       "version": "2.2.0",
@@ -29084,6 +29386,21 @@
       "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
       "dev": true
     },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
+      "dev": true
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "dev": true,
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
     "pirates": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
@@ -31458,6 +31775,15 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "stylus": {
       "version": "0.55.0",
       "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.55.0.tgz",
@@ -31848,6 +32174,15 @@
       "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
       "dev": true
     },
+    "trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "ts-jest": {
       "version": "27.1.0",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-27.1.0.tgz",
diff --git a/package.json b/package.json
index 0a64ab7..de19b92 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "5.3.0",
     "@typescript-eslint/parser": "5.3.0",
+    "angular-cli-ghpages": "^1.0.0",
     "eslint": "^8.2.0",
     "jasmine-core": "~3.10.0",
     "jest": "^27.4.3",