From 00f4458744b3c1ccb4db147b3eeec1c93300fca7 Mon Sep 17 00:00:00 2001
From: Michael Kuhn <michael.kuhn@prosoft.net>
Date: Thu, 18 Feb 2021 16:18:25 +0100
Subject: [PATCH 1/2] refactor(documentation): documentation rework

---
 angular.json                                  | 109 ++++++++++++++++++
 projects/documentation/.browserslistrc        |  18 +++
 projects/documentation/e2e/protractor.conf.js |  36 ++++++
 .../documentation/e2e/src/app.e2e-spec.ts     |  25 ++++
 .../documentation/e2e/src/app.e2e-spec.ts.rej |  10 ++
 projects/documentation/e2e/src/app.po.ts      |  11 ++
 projects/documentation/e2e/tsconfig.json      |  10 ++
 projects/documentation/karma.conf.js          |  32 +++++
 .../documentation/src/app/app.component.html  |  20 ++++
 .../documentation/src/app/app.component.scss  |   0
 .../documentation/src/app/app.component.ts    |  12 ++
 projects/documentation/src/app/app.module.ts  |  37 ++++++
 .../src/app/component-route.definition.ts     | 106 +++++++++++++++++
 .../component-page-wrapper.component.html     |  31 +++++
 .../component-page-wrapper.component.ts       |  25 ++++
 .../component-page-wrapper.module.ts          |  17 +++
 .../src/app/pages/block-ui/block-ui.module.ts |  30 +++++
 .../block-ui/pages/api/block-ui-api.page.ts   |   8 ++
 .../block-ui-code-generation.page.ts          |   8 ++
 .../pages/overview/block-ui-overview.page.ts  |   8 ++
 .../src/app/pages/form/form.module.ts         |  29 +++++
 .../app/pages/form/pages/api/form-api.page.ts |   8 ++
 .../form-code-generation.page.ts              |   8 ++
 .../form/pages/overview/form-overview.page.ts |   8 ++
 .../src/app/pages/home/home.page.ts           |  27 +++++
 projects/documentation/src/assets/.gitkeep    |   0
 .../documentation/src/assets/github-light.png | Bin 0 -> 1571 bytes
 .../src/environments/environment.prod.ts      |   3 +
 .../src/environments/environment.ts           |  16 +++
 projects/documentation/src/favicon.ico        | Bin 0 -> 948 bytes
 projects/documentation/src/index.html         |  15 +++
 projects/documentation/src/main.ts            |  13 +++
 projects/documentation/src/polyfills.ts       |  62 ++++++++++
 projects/documentation/src/styles.scss        |  66 +++++++++++
 projects/documentation/src/test.ts            |  23 ++++
 projects/documentation/tsconfig.app.json      |   9 ++
 projects/documentation/tsconfig.spec.json     |   9 ++
 projects/documentation/tslint.json            |   7 ++
 38 files changed, 856 insertions(+)
 create mode 100644 projects/documentation/.browserslistrc
 create mode 100644 projects/documentation/e2e/protractor.conf.js
 create mode 100644 projects/documentation/e2e/src/app.e2e-spec.ts
 create mode 100644 projects/documentation/e2e/src/app.e2e-spec.ts.rej
 create mode 100644 projects/documentation/e2e/src/app.po.ts
 create mode 100644 projects/documentation/e2e/tsconfig.json
 create mode 100644 projects/documentation/karma.conf.js
 create mode 100644 projects/documentation/src/app/app.component.html
 create mode 100644 projects/documentation/src/app/app.component.scss
 create mode 100644 projects/documentation/src/app/app.component.ts
 create mode 100644 projects/documentation/src/app/app.module.ts
 create mode 100644 projects/documentation/src/app/component-route.definition.ts
 create mode 100644 projects/documentation/src/app/components/component-page-wrapper/component-page-wrapper.component.html
 create mode 100644 projects/documentation/src/app/components/component-page-wrapper/component-page-wrapper.component.ts
 create mode 100644 projects/documentation/src/app/components/component-page-wrapper/component-page-wrapper.module.ts
 create mode 100644 projects/documentation/src/app/pages/block-ui/block-ui.module.ts
 create mode 100644 projects/documentation/src/app/pages/block-ui/pages/api/block-ui-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/block-ui/pages/code-generation/block-ui-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/block-ui/pages/overview/block-ui-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/form/form.module.ts
 create mode 100644 projects/documentation/src/app/pages/form/pages/api/form-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/form/pages/overview/form-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/home/home.page.ts
 create mode 100644 projects/documentation/src/assets/.gitkeep
 create mode 100644 projects/documentation/src/assets/github-light.png
 create mode 100644 projects/documentation/src/environments/environment.prod.ts
 create mode 100644 projects/documentation/src/environments/environment.ts
 create mode 100644 projects/documentation/src/favicon.ico
 create mode 100644 projects/documentation/src/index.html
 create mode 100644 projects/documentation/src/main.ts
 create mode 100644 projects/documentation/src/polyfills.ts
 create mode 100644 projects/documentation/src/styles.scss
 create mode 100644 projects/documentation/src/test.ts
 create mode 100644 projects/documentation/tsconfig.app.json
 create mode 100644 projects/documentation/tsconfig.spec.json
 create mode 100644 projects/documentation/tslint.json

diff --git a/angular.json b/angular.json
index 14c410fb..f0b02924 100644
--- a/angular.json
+++ b/angular.json
@@ -146,6 +146,115 @@
           }
         }
       }
+    },
+    "documentation": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/documentation",
+      "sourceRoot": "projects/documentation/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/documentation",
+            "index": "projects/documentation/src/index.html",
+            "main": "projects/documentation/src/main.ts",
+            "polyfills": "projects/documentation/src/polyfills.ts",
+            "tsConfig": "projects/documentation/tsconfig.app.json",
+            "aot": true,
+            "assets": ["projects/documentation/src/favicon.ico", "projects/documentation/src/assets"],
+            "styles": ["projects/documentation/src/styles.scss"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "projects/documentation/src/environments/environment.ts",
+                  "with": "projects/documentation/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "documentation:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "documentation:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "documentation:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/documentation/src/test.ts",
+            "polyfills": "projects/documentation/src/polyfills.ts",
+            "tsConfig": "projects/documentation/tsconfig.spec.json",
+            "karmaConfig": "projects/documentation/karma.conf.js",
+            "assets": ["projects/documentation/src/favicon.ico", "projects/documentation/src/assets"],
+            "styles": ["projects/documentation/src/styles.scss"],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/documentation/tsconfig.app.json",
+              "projects/documentation/tsconfig.spec.json",
+              "projects/documentation/e2e/tsconfig.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "projects/documentation/e2e/protractor.conf.js",
+            "devServerTarget": "documentation:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "documentation:serve:production"
+            }
+          }
+        }
+      }
     }
   },
   "defaultProject": "prosoft-components-demo",
diff --git a/projects/documentation/.browserslistrc b/projects/documentation/.browserslistrc
new file mode 100644
index 00000000..0ccadaf3
--- /dev/null
+++ b/projects/documentation/.browserslistrc
@@ -0,0 +1,18 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
diff --git a/projects/documentation/e2e/protractor.conf.js b/projects/documentation/e2e/protractor.conf.js
new file mode 100644
index 00000000..f238c0bb
--- /dev/null
+++ b/projects/documentation/e2e/protractor.conf.js
@@ -0,0 +1,36 @@
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    browserName: 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({
+      spec: {
+        displayStacktrace: StacktraceOption.PRETTY
+      }
+    }));
+  }
+};
\ No newline at end of file
diff --git a/projects/documentation/e2e/src/app.e2e-spec.ts b/projects/documentation/e2e/src/app.e2e-spec.ts
new file mode 100644
index 00000000..c06b0963
--- /dev/null
+++ b/projects/documentation/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,25 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('documentation app is running!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(
+      jasmine.objectContaining({
+        level: logging.Level.SEVERE,
+      } as logging.Entry)
+    );
+  });
+});
diff --git a/projects/documentation/e2e/src/app.e2e-spec.ts.rej b/projects/documentation/e2e/src/app.e2e-spec.ts.rej
new file mode 100644
index 00000000..a29ceb14
--- /dev/null
+++ b/projects/documentation/e2e/src/app.e2e-spec.ts.rej
@@ -0,0 +1,10 @@
+diff a/projects/documentation/e2e/src/app.e2e-spec.ts b/projects/documentation/e2e/src/app.e2e-spec.ts	(rejected hunks)
+@@ -19,3 +19,5 @@ describe('workspace-project App', () => {
+-    expect(logs).not.toContain(jasmine.objectContaining({
+-      level: logging.Level.SEVERE,
+-    } as logging.Entry));
++    expect(logs).not.toContain(
++      jasmine.objectContaining({
++        level: logging.Level.SEVERE,
++      } as logging.Entry)
++    );
diff --git a/projects/documentation/e2e/src/app.po.ts b/projects/documentation/e2e/src/app.po.ts
new file mode 100644
index 00000000..b68475e0
--- /dev/null
+++ b/projects/documentation/e2e/src/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo(): Promise<unknown> {
+    return browser.get(browser.baseUrl) as Promise<unknown>;
+  }
+
+  getTitleText(): Promise<string> {
+    return element(by.css('app-root .content span')).getText() as Promise<string>;
+  }
+}
diff --git a/projects/documentation/e2e/tsconfig.json b/projects/documentation/e2e/tsconfig.json
new file mode 100644
index 00000000..39c6d902
--- /dev/null
+++ b/projects/documentation/e2e/tsconfig.json
@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es2018",
+    "types": ["jasmine", "jasminewd2", "node"]
+  }
+}
diff --git a/projects/documentation/karma.conf.js b/projects/documentation/karma.conf.js
new file mode 100644
index 00000000..90d15767
--- /dev/null
+++ b/projects/documentation/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/documentation'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/documentation/src/app/app.component.html b/projects/documentation/src/app/app.component.html
new file mode 100644
index 00000000..f593a1a1
--- /dev/null
+++ b/projects/documentation/src/app/app.component.html
@@ -0,0 +1,20 @@
+<mat-toolbar color="primary" style="display: flex; justify-content: space-between;">
+  <a style="color: white;" [routerLink]="['/']">@prosoft/components</a>
+  <div>
+    <span style="font-size: 14px; margin-right: 1em; vertical-align: text-bottom;">Current version: {{ currentVersion }}</span>
+    <a style="color: white;" href="https://github.com/prosoft-edv/components">
+      <img [src]="'assets/github-light.png'" />
+      <span style="margin-left: 0.5em; vertical-align: text-bottom;">GitHub</span>
+    </a>
+  </div>
+</mat-toolbar>
+<mat-sidenav-container style="height: calc(100% - 64px);">
+  <mat-sidenav mode="side" opened style="width: 200px;">
+    <mat-nav-list role="list">
+      <a mat-list-item *ngFor="let component of components" [routerLink]="component.routerLink">{{ component.name }}</a>
+    </mat-nav-list>
+  </mat-sidenav>
+  <mat-sidenav-content style="padding: 1em; box-sizing: border-box;">
+    <router-outlet></router-outlet>
+  </mat-sidenav-content>
+</mat-sidenav-container>
diff --git a/projects/documentation/src/app/app.component.scss b/projects/documentation/src/app/app.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/app.component.ts b/projects/documentation/src/app/app.component.ts
new file mode 100644
index 00000000..47f07a7c
--- /dev/null
+++ b/projects/documentation/src/app/app.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { components } from './component-route.definition';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+})
+export class AppComponent {
+  currentVersion = '2.0.0-alpha.11';
+  components = components;
+}
diff --git a/projects/documentation/src/app/app.module.ts b/projects/documentation/src/app/app.module.ts
new file mode 100644
index 00000000..bfde8169
--- /dev/null
+++ b/projects/documentation/src/app/app.module.ts
@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule, Routes } from '@angular/router';
+import { AppComponent } from './app.component';
+import { HomePage } from './pages/home/home.page';
+
+const appRoutes: Routes = [
+  { path: '', component: HomePage },
+  { path: 'form', loadChildren: () => import('./pages/form/form.module').then((m) => m.FormModule) },
+  { path: 'block-ui', loadChildren: () => import('./pages/block-ui/block-ui.module').then((m) => m.BlockUiModule) },
+];
+
+@NgModule({
+  declarations: [AppComponent, HomePage],
+  imports: [
+    // Angular stuff
+    BrowserModule,
+    BrowserAnimationsModule,
+    RouterModule.forRoot(appRoutes),
+
+    // Material stuff
+    MatCardModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatListModule,
+    MatTabsModule,
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
diff --git a/projects/documentation/src/app/component-route.definition.ts b/projects/documentation/src/app/component-route.definition.ts
new file mode 100644
index 00000000..f842035f
--- /dev/null
+++ b/projects/documentation/src/app/component-route.definition.ts
@@ -0,0 +1,106 @@
+export interface IComponent {
+  name: string;
+  description: string;
+  routerLink: string[];
+}
+
+export const components: IComponent[] = [
+  {
+    name: 'Form',
+    description: `
+      <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['form'],
+  },
+  {
+    name: 'Form Field',
+    description: `
+    <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['form-field'],
+  },
+  {
+    name: 'Form Errors',
+    description: `
+    <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['form-errors'],
+  },
+  {
+    name: 'Savebar',
+    description: `
+    <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['savebar'],
+  },
+  {
+    name: 'Select',
+    description: `
+    <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['select'],
+  },
+  {
+    name: 'Number Input',
+    description: `
+    <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['number-input'],
+  },
+  {
+    name: 'Slider',
+    description: `
+    <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['slider'],
+  },
+  {
+    name: 'Flip container',
+    description: `
+    <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['flip-container'],
+  },
+  {
+    name: 'Block Ui',
+    description: `
+    <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['block-ui'],
+  },
+  {
+    name: 'Table',
+    description: `
+    <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['table'],
+  },
+  {
+    name: 'View',
+    description: `
+    <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['view'],
+  },
+  {
+    name: 'Card',
+    description: `
+    <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['card'],
+  },
+  {
+    name: 'Header',
+    description: `
+    <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['header'],
+  },
+  {
+    name: 'Dialog wrapper',
+    description: `
+    <strong><i>TODO</i></strong>
+    `,
+    routerLink: ['dialog-wrapper'],
+  },
+].sort((a, b) => a.name.localeCompare(b.name));
diff --git a/projects/documentation/src/app/components/component-page-wrapper/component-page-wrapper.component.html b/projects/documentation/src/app/components/component-page-wrapper/component-page-wrapper.component.html
new file mode 100644
index 00000000..8929e0b3
--- /dev/null
+++ b/projects/documentation/src/app/components/component-page-wrapper/component-page-wrapper.component.html
@@ -0,0 +1,31 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>{{ caption }}</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <!-- <mat-tab-group>
+      <mat-tab label="OVERVIEW">
+        <div class="app-component-page-wrapper__tab-content-wrapper">
+          <ng-template [ngTemplateOutlet]="overview"></ng-template>
+        </div>
+      </mat-tab>
+      <mat-tab label="API">
+        <div class="app-component-page-wrapper__tab-content-wrapper">
+          <ng-template [ngTemplateOutlet]="api"></ng-template>
+        </div>
+      </mat-tab>
+      <mat-tab *ngIf="codeGeneration" label="CODE GENERATION">
+        <div class="app-component-page-wrapper__tab-content-wrapper">
+          <ng-template [ngTemplateOutlet]="codeGeneration"></ng-template>
+        </div>
+      </mat-tab>
+    </mat-tab-group> -->
+    <nav mat-tab-nav-bar>
+      <a mat-tab-link [routerLink]="['overview']">OVERVIEW</a>
+      <a mat-tab-link [routerLink]="['api']">API</a>
+      <a mat-tab-link [routerLink]="['code-generation']">CODE GENERATION</a>
+      <a mat-tab-link *ngFor="let tab of additionalTabs" [routerLink]="tab.routerLink">OVERVIEW</a>
+    </nav>
+    <router-outlet></router-outlet>
+  </mat-card-content>
+</mat-card>
diff --git a/projects/documentation/src/app/components/component-page-wrapper/component-page-wrapper.component.ts b/projects/documentation/src/app/components/component-page-wrapper/component-page-wrapper.component.ts
new file mode 100644
index 00000000..c35a76b0
--- /dev/null
+++ b/projects/documentation/src/app/components/component-page-wrapper/component-page-wrapper.component.ts
@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, Inject, InjectionToken } from '@angular/core';
+
+export const COMPONENT_CAPTION = new InjectionToken<string>(undefined);
+export const ADDITIONAL_TABS = new InjectionToken<{ tabLabel: string; routerLink: string[] }[]>(undefined);
+
+@Component({
+  selector: 'app-component-page-wrapper',
+  templateUrl: './component-page-wrapper.component.html',
+  styles: [
+    `
+      .app-component-page-wrapper__tab-content-wrapper {
+        margin-top: 3em;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ComponentPageWrapperComponent {
+  public activeLink: string;
+
+  constructor(
+    @Inject(COMPONENT_CAPTION) public caption: string,
+    @Inject(ADDITIONAL_TABS) public additionalTabs: { tabLabel: string; routerLink: string[] }[]
+  ) {}
+}
diff --git a/projects/documentation/src/app/components/component-page-wrapper/component-page-wrapper.module.ts b/projects/documentation/src/app/components/component-page-wrapper/component-page-wrapper.module.ts
new file mode 100644
index 00000000..8ed873ce
--- /dev/null
+++ b/projects/documentation/src/app/components/component-page-wrapper/component-page-wrapper.module.ts
@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatTabsModule } from '@angular/material/tabs';
+import { RouterModule } from '@angular/router';
+import { ADDITIONAL_TABS, ComponentPageWrapperComponent, COMPONENT_CAPTION } from './component-page-wrapper.component';
+
+@NgModule({
+  declarations: [ComponentPageWrapperComponent],
+  imports: [CommonModule, MatCardModule, MatTabsModule, RouterModule],
+  exports: [ComponentPageWrapperComponent],
+  providers: [
+    { provide: COMPONENT_CAPTION, useValue: '' },
+    { provide: ADDITIONAL_TABS, useValue: undefined },
+  ],
+})
+export class ComponentPageWrapperModule {}
diff --git a/projects/documentation/src/app/pages/block-ui/block-ui.module.ts b/projects/documentation/src/app/pages/block-ui/block-ui.module.ts
new file mode 100644
index 00000000..a03ffbe2
--- /dev/null
+++ b/projects/documentation/src/app/pages/block-ui/block-ui.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { BlockUiApiPage } from './pages/api/block-ui-api.page';
+import { BlockUiCodeGenerationPage } from './pages/code-generation/block-ui-code-generation.page';
+import { BlockUiOverviewPage } from './pages/overview/block-ui-overview.page';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: BlockUiOverviewPage },
+          { path: 'api', component: BlockUiApiPage },
+          { path: 'code-generation', component: BlockUiCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'Block UI' }],
+})
+export class BlockUiModule {}
diff --git a/projects/documentation/src/app/pages/block-ui/pages/api/block-ui-api.page.ts b/projects/documentation/src/app/pages/block-ui/pages/api/block-ui-api.page.ts
new file mode 100644
index 00000000..aa8f52e5
--- /dev/null
+++ b/projects/documentation/src/app/pages/block-ui/pages/api/block-ui-api.page.ts
@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-block-ui-api-page',
+  template: 'BlockUiApiPage Works!!',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BlockUiApiPage {}
diff --git a/projects/documentation/src/app/pages/block-ui/pages/code-generation/block-ui-code-generation.page.ts b/projects/documentation/src/app/pages/block-ui/pages/code-generation/block-ui-code-generation.page.ts
new file mode 100644
index 00000000..5ff9c6ea
--- /dev/null
+++ b/projects/documentation/src/app/pages/block-ui/pages/code-generation/block-ui-code-generation.page.ts
@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-block-ui-code-generation-page',
+  template: 'BlockUiCodeGenerationPage Works!!',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BlockUiCodeGenerationPage {}
diff --git a/projects/documentation/src/app/pages/block-ui/pages/overview/block-ui-overview.page.ts b/projects/documentation/src/app/pages/block-ui/pages/overview/block-ui-overview.page.ts
new file mode 100644
index 00000000..06d28193
--- /dev/null
+++ b/projects/documentation/src/app/pages/block-ui/pages/overview/block-ui-overview.page.ts
@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-block-ui-overview-page',
+  template: 'BlockUiOverviewPage Works!!',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BlockUiOverviewPage {}
diff --git a/projects/documentation/src/app/pages/form/form.module.ts b/projects/documentation/src/app/pages/form/form.module.ts
new file mode 100644
index 00000000..eb36ac2f
--- /dev/null
+++ b/projects/documentation/src/app/pages/form/form.module.ts
@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { FormApiPage } from './pages/api/form-api.page';
+import { FormCodeGenerationPage } from './pages/code-generation/form-code-generation.page';
+import { FormOverviewPage } from './pages/overview/form-overview.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: FormOverviewPage },
+          { path: 'api', component: FormApiPage },
+          { path: 'code-generation', component: FormCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'Form' }],
+})
+export class FormModule {}
diff --git a/projects/documentation/src/app/pages/form/pages/api/form-api.page.ts b/projects/documentation/src/app/pages/form/pages/api/form-api.page.ts
new file mode 100644
index 00000000..d2956bcc
--- /dev/null
+++ b/projects/documentation/src/app/pages/form/pages/api/form-api.page.ts
@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-form-api-page',
+  template: 'FormApiPage Works!!',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormApiPage {}
diff --git a/projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.ts b/projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.ts
new file mode 100644
index 00000000..29222111
--- /dev/null
+++ b/projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.ts
@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-form-code-generation-page',
+  template: 'FormCodeGenerationPage Works!!',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormCodeGenerationPage {}
diff --git a/projects/documentation/src/app/pages/form/pages/overview/form-overview.page.ts b/projects/documentation/src/app/pages/form/pages/overview/form-overview.page.ts
new file mode 100644
index 00000000..9f816739
--- /dev/null
+++ b/projects/documentation/src/app/pages/form/pages/overview/form-overview.page.ts
@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-form-overview-page',
+  template: 'FormOverviewPage Works!!',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormOverviewPage {}
diff --git a/projects/documentation/src/app/pages/home/home.page.ts b/projects/documentation/src/app/pages/home/home.page.ts
new file mode 100644
index 00000000..c2cffd5a
--- /dev/null
+++ b/projects/documentation/src/app/pages/home/home.page.ts
@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { components } from '../../component-route.definition';
+
+@Component({
+  selector: 'app-home-page',
+  template: `
+    <div style="text-align: center; font-size: 18px; line-height: 1.5; font-weight: 600;">
+      prosoft/components enhances and adds UI components based on the
+      <a href="https://material.io/components">Material Design specification</a>
+    </div>
+    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 4em; margin-top: 4em;">
+      <a [routerLink]="component.routerLink" *ngFor="let component of components">
+        <mat-card>
+          <mat-card-header>
+            <mat-card-title>{{ component.name }}</mat-card-title>
+          </mat-card-header>
+          <div [innerHtml]="component.description"></div>
+        </mat-card>
+      </a>
+    </div>
+  `,
+  styles: [``],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HomePage {
+  components = components;
+}
diff --git a/projects/documentation/src/assets/.gitkeep b/projects/documentation/src/assets/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/assets/github-light.png b/projects/documentation/src/assets/github-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..628da97c70890c73e59204f5b140c4e67671e92d
GIT binary patch
literal 1571
zcmaJ>c~BE~6izDPQq)#Nu*KOf(n^(VHY9;fiINM65``pc+9*v(mL$bw<L=UgNab<{
z#iQ041Ze@ON0An#j)HfCN>fCjbc%v9V{8r9iX|O%>Nr%pLD2qT{mty}c=LVleeamv
znz3SOSm@kP8jThvOOq(56Yzh*fz(booe!uZij=BJC6+_lbvQ~B8nA2>kXdv_RDtRY
z`5QXWWEySCe6vbTs^#f?J!WC*{1~RgVx!nJTJjQyO{dRANgx|FnymtG<jnUVU^WQA
zHC#DMZWE&>bD9%JmCh9^y)##j7{Dcqfn*1ta$rG89pJF6w-S7Z037$rr|y0;1Onp_
zGFJdT6Q!1C0AdVB0WOmpuV=AgAQ550Tn+-mivTtYPJmz*#75#_n9oV%!#rSOfmAfy
zki%C<QYT_jF9B#GNgE%6>~=fTp1{O#BLpJ|0<qW-n;lOf;)#4KsdL0ziI_<b5|q&6
zW*ce7tbpI6E*r}u1t6vLSqc`LT>jj#m6#|LRWit-vq3PE1z9ZqyvET4sX$-Icqy7t
z<=aq5ff86AuBZBu6EjJsYWM0uejufWFTwPA7Su}0Bm$7KFb!q{Um_8~A{LUG#1l(l
zSehUda@kU8LIRg9fkk2tZ;~ss5~R+mM<==F7hLHpxqLB>>PQS%Vc7b~?q!%T5+h8Q
z4G=4Nzyi5WZ?^gkasJ{?Xhm`JC#WG6$1K2jb@=9&D3EgD#3UhGh#*21rJjulVXjCF
zvp76q62jt0zzMG5C7DlfMgPl%C^3+~wf|}Lq=}jz|MmIcQjh1Ok6NjD$Em^Iv26D>
z8tt_TnM9~^Tt8mflRGPOrrX|HtT3gG4LEuuk{g2Rn}QgJIa?gZo))!!=o_l9bvD%A
zZ`aHajl8#~u?!4f7F#*b*->A<IiN87Qp@Ex4*smYI^qhb?b+LvGs^ZA8-}{BBtj$i
zH{M&Cc{}#_Z`#oGl5N_6Y54HF4aIDA5Y(3SRpb19Vf#ICCP_zA8?yiYA8rQW2{EPK
zZR+6SHKBmF@5h=|CkA#^&k;tRYTcFV4vieiB$Ss<zT*jQ_#otlN4hNY?K@V@levFC
zUg_GMahvCU+{Sry`3ZkPY1pAF=eM}iiJflldd)G$TE(XJs^*05;uQ7!bocP=C5L`F
zRGa1ctQ7IWy~a;xv~Bz;{0ANq(Q^3KUV$uyKBx#>=R2L)6!>saz?h>#wTXT-I(XmQ
zx{84skS>k=i~i`(6k4C7;Zpfx%dCPVjPayMf8pugtGM=~s=Id1l#8MZJ1-73wV#Q3
zR3>v3%}jbQs1f_Z0xo;%=LILlA+nTpKI4ha%xWW}uqHrNao~&T4AY6m`P$_n-6h*g
zhoX+e4n%~gl_lhe#s+AMb7d{5WzvYTa%6Q~si@@4{;s(0zU|H&P3fE+t{7X`S#Cj@
zC#vd}^4pcBD*77Ny5=j$h8EL2_t$O38$SQiJ6fPjJMimypr~MB2(&P0aI|h}$64<0
z>_~duqNjaT=DM^6+N{&B_lED;F2wrl?!4Lk*2((x!fmrcsw+=cI^qttuZ9C}-m~5E
z-ryYVpL%^xR#&(0YI5hz<(}F7-p)?FPcyJO-zVO>%9ZDXJH8pnY;GJYFDQ>vd#j_*
zRrd}L(r=!g+1#nQwsO?kpS`Qq8`NxE+Zy{gf7*_7J*U2V_|NpLo{iasj7VCg_V9&|
ShohtYzipXxh2)4xTk<dWx?vyy

literal 0
HcmV?d00001

diff --git a/projects/documentation/src/environments/environment.prod.ts b/projects/documentation/src/environments/environment.prod.ts
new file mode 100644
index 00000000..c9669790
--- /dev/null
+++ b/projects/documentation/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};
diff --git a/projects/documentation/src/environments/environment.ts b/projects/documentation/src/environments/environment.ts
new file mode 100644
index 00000000..99c3763c
--- /dev/null
+++ b/projects/documentation/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
diff --git a/projects/documentation/src/favicon.ico b/projects/documentation/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..997406ad22c29aae95893fb3d666c30258a09537
GIT binary patch
literal 948
zcmV;l155mgP)<h;3K|Lk000e1NJLTq000~S0015c1^@s6KgE8Z00009a7bBm000XT
z000XT0n*)m`~Uz0W=TXrR7i=HS4&J2Q53!N>CBYU7IjCFmI-B}4sMJt3^s9NVg!P0
z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht
z%t<DF^WJ^$%)N8(nOiE8$$(XeL8%@9luMqDd3cT+XIb_^YH{kU)iX>9#h|nu0K(bJ
ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E
z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ
zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(<Bkhw>~2>G
z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf
z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow
zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sY<UH^*#NTt${
zNF)_f745C&UQ!hOL6J5wC>a(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU
z3LTTBtjwo`7(<AJG9luHgaE%Npo+H`lp+AIM{k6MKJszc@DM%lod&8TCER*o(XXcC
z8&nVTCXT+)%}_`PXo^}PJ?sF0i+ZEcPp`Gw`||ahk}N7#R#vq!${S`X0z(`KO6v$+
zMMZ<lOR*4Z^w4CXBMvpS<Pee{U^01BA?Uh&H@~OZ--v#JEQN=UdUMG1z|8D<@>HA6
z7gmO$yTR!5L>Bsg!X8616{JUngg_<CkvB3~uoT|Ddv8jJB0!diUI=K4ehj*vX2h(Q
zAz{=+<pcIMznABWNDpCr>@&85%>W=<KFI{w!MTfFH&rswzr*pd&s_k3#Fq-Gj~P%^
zungQTS7mB(`UGii*a&Ca#w!4DJm0!eNS%W4gXg%tYFns>mChTR;x4`P=?PJ~oPuy5
zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0
WcZ@i?LyX}70000<MNUMnLSTXxWwRmx

literal 0
HcmV?d00001

diff --git a/projects/documentation/src/index.html b/projects/documentation/src/index.html
new file mode 100644
index 00000000..bf051bf0
--- /dev/null
+++ b/projects/documentation/src/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>ProsoftComponentsDemo</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/projects/documentation/src/main.ts b/projects/documentation/src/main.ts
new file mode 100644
index 00000000..d9a2e7e4
--- /dev/null
+++ b/projects/documentation/src/main.ts
@@ -0,0 +1,13 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));
diff --git a/projects/documentation/src/polyfills.ts b/projects/documentation/src/polyfills.ts
new file mode 100644
index 00000000..e49856ec
--- /dev/null
+++ b/projects/documentation/src/polyfills.ts
@@ -0,0 +1,62 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/projects/documentation/src/styles.scss b/projects/documentation/src/styles.scss
new file mode 100644
index 00000000..b0d3d7a6
--- /dev/null
+++ b/projects/documentation/src/styles.scss
@@ -0,0 +1,66 @@
+//==========================================
+//= Font Import
+//==========================================
+// Ohne das ":light,regular,medium,thin,italic,mediumitalic,bold" ist die Schrift teils unscharf
+// @import url('https://fonts.googleapis.com/css?family=Quicksand:light,regular,medium,thin,italic,mediumitalic,bold');
+
+// ==========================================
+// = Material Theme Generierung
+// ==========================================
+@import '~@angular/material/theming';
+
+// Define the typography map
+// Name             CSS classes                         Description
+// display-4	    .mat-display-4	                    Large, one-off header, usually at the top of the page (e.g. a hero header).
+// display-3	    .mat-display-3	                    Large, one-off header, usually at the top of the page (e.g. a hero header).
+// display-2	    .mat-display-2	                    Large, one-off header, usually at the top of the page (e.g. a hero header).
+// display-1	    .mat-display-1	                    Large, one-off header, usually at the top of the page (e.g. a hero header).
+// headline	        .mat-h1, .mat-headline	            Section heading corresponding to the <h1> tag.
+// title	        .mat-h2, .mat-title	                Section heading corresponding to the <h2> tag.
+// subheading-2	    .mat-h3, .mat-subheading-2	        Section heading corresponding to the <h3> tag.
+// subheading-1	    .mat-h4, .mat-subheading-1	        Section heading corresponding to the <h4> tag.
+// body-1	        .mat-body, .mat-body-1	            Base body text.
+// body-2	        .mat-body-strong, .mat-body-2	    Bolder body text.
+// caption	        .mat-small, .mat-caption	        Smaller body and hint text.
+// button	        None. Used only in components.	    Buttons and anchors.
+// input	        None. Used only in components.	    Form input fields. Line-height must be unit-less fraction of the font-size.
+$general-typography: mat-typography-config() !default;
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// **Be sure that you only ever include this mixin once!**
+@include mat-core($general-typography);
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$base-app-primary: mat-palette($mat-indigo);
+$base-app-accent: mat-palette($mat-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$base-app-warn: mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$base-app-theme: mat-light-theme($base-app-primary, $base-app-accent, $base-app-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($base-app-theme);
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+  --ps-error: #f44336;
+  --ps-error-contrast: #ffffff;
+  --ps-primary: #673ab7;
+  --ps-primary-contrast: #ffffff;
+  --ps-accent: #ffd740;
+  --ps-accent-contrast: #ffffff;
+}
+
+a {
+  text-decoration: none;
+}
diff --git a/projects/documentation/src/test.ts b/projects/documentation/src/test.ts
new file mode 100644
index 00000000..4f56cf52
--- /dev/null
+++ b/projects/documentation/src/test.ts
@@ -0,0 +1,23 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/documentation/tsconfig.app.json b/projects/documentation/tsconfig.app.json
new file mode 100644
index 00000000..d6371682
--- /dev/null
+++ b/projects/documentation/tsconfig.app.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
+}
diff --git a/projects/documentation/tsconfig.spec.json b/projects/documentation/tsconfig.spec.json
new file mode 100644
index 00000000..e75ae1f1
--- /dev/null
+++ b/projects/documentation/tsconfig.spec.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": ["jasmine", "node"]
+  },
+  "files": ["src/test.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}
diff --git a/projects/documentation/tslint.json b/projects/documentation/tslint.json
new file mode 100644
index 00000000..8006e74e
--- /dev/null
+++ b/projects/documentation/tslint.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [true, "attribute", "app", "camelCase"],
+    "component-selector": [true, "element", "app", "kebab-case"]
+  }
+}

From 5405a93dc8221d8e0cf6a89146740f5684036618 Mon Sep 17 00:00:00 2001
From: Michael Kuhn <michael.kuhn@prosoft.net>
Date: Mon, 22 Feb 2021 16:13:50 +0100
Subject: [PATCH 2/2] docs: added all pages

---
 projects/documentation/src/app/app.module.ts  | 14 ++++++++-
 .../src/app/pages/card/card.module.ts         | 30 +++++++++++++++++++
 .../pages/card/pages/api/card-api.page.html   |  1 +
 .../pages/card/pages/api/card-api.page.scss   |  0
 .../app/pages/card/pages/api/card-api.page.ts | 12 ++++++++
 .../card-code-generation.page.html            |  1 +
 .../card-code-generation.page.scss            |  0
 .../card-code-generation.page.ts              | 12 ++++++++
 .../pages/overview/card-overview.page.html    |  1 +
 .../pages/overview/card-overview.page.scss    |  0
 .../card/pages/overview/card-overview.page.ts | 12 ++++++++
 .../dialog-wrapper/dialog-wrapper.module.ts   | 30 +++++++++++++++++++
 .../pages/api/dialog-wrapper-api.page.html    |  1 +
 .../pages/api/dialog-wrapper-api.page.scss    |  0
 .../pages/api/dialog-wrapper-api.page.ts      | 12 ++++++++
 .../dialog-wrapper-code-generation.page.html  |  1 +
 .../dialog-wrapper-code-generation.page.scss  |  0
 .../dialog-wrapper-code-generation.page.ts    | 12 ++++++++
 .../dialog-wrapper-overview.page.html         |  1 +
 .../dialog-wrapper-overview.page.scss         |  0
 .../overview/dialog-wrapper-overview.page.ts  | 12 ++++++++
 .../flip-container/flip-container.module.ts   | 30 +++++++++++++++++++
 .../pages/api/flip-container-api.page.html    |  1 +
 .../pages/api/flip-container-api.page.scss    |  0
 .../pages/api/flip-container-api.page.ts      | 12 ++++++++
 .../flip-container-code-generation.page.html  |  1 +
 .../flip-container-code-generation.page.scss  |  0
 .../flip-container-code-generation.page.ts    | 12 ++++++++
 .../flip-container-overview.page.html         |  1 +
 .../flip-container-overview.page.scss         |  0
 .../overview/flip-container-overview.page.ts  | 12 ++++++++
 .../pages/form-errors/form-errors.module.ts   | 30 +++++++++++++++++++
 .../pages/api/form-errors-api.page.html       |  1 +
 .../pages/api/form-errors-api.page.scss       |  0
 .../pages/api/form-errors-api.page.ts         | 12 ++++++++
 .../form-errors-code-generation.page.html     |  1 +
 .../form-errors-code-generation.page.scss     |  0
 .../form-errors-code-generation.page.ts       | 12 ++++++++
 .../overview/form-errors-overview.page.html   |  1 +
 .../overview/form-errors-overview.page.scss   |  0
 .../overview/form-errors-overview.page.ts     | 12 ++++++++
 .../app/pages/form-field/form-field.module.ts | 30 +++++++++++++++++++
 .../pages/api/form-field-api.page.html        |  1 +
 .../pages/api/form-field-api.page.scss        |  0
 .../pages/api/form-field-api.page.ts          | 12 ++++++++
 .../form-field-code-generation.page.html      |  1 +
 .../form-field-code-generation.page.scss      |  0
 .../form-field-code-generation.page.ts        | 12 ++++++++
 .../overview/form-field-overview.page.html    |  1 +
 .../overview/form-field-overview.page.scss    |  0
 .../overview/form-field-overview.page.ts      | 12 ++++++++
 .../src/app/pages/form/form.module.ts         |  1 +
 .../pages/form/pages/api/form-api.page.html   |  1 +
 .../pages/form/pages/api/form-api.page.scss   |  0
 .../app/pages/form/pages/api/form-api.page.ts | 14 +++++----
 .../form-code-generation.page.html            |  1 +
 .../form-code-generation.page.scss            |  0
 .../form-code-generation.page.ts              | 14 +++++----
 .../pages/overview/form-overview.page.html    |  1 +
 .../pages/overview/form-overview.page.scss    |  0
 .../form/pages/overview/form-overview.page.ts | 14 +++++----
 .../src/app/pages/header/header.module.ts     | 30 +++++++++++++++++++
 .../header/pages/api/header-api.page.html     |  1 +
 .../header/pages/api/header-api.page.scss     |  0
 .../pages/header/pages/api/header-api.page.ts | 12 ++++++++
 .../header-code-generation.page.html          |  1 +
 .../header-code-generation.page.scss          |  0
 .../header-code-generation.page.ts            | 12 ++++++++
 .../pages/overview/header-overview.page.html  |  1 +
 .../pages/overview/header-overview.page.scss  |  0
 .../pages/overview/header-overview.page.ts    | 12 ++++++++
 .../pages/number-input/number-input.module.ts | 30 +++++++++++++++++++
 .../pages/api/number-input-api.page.html      |  1 +
 .../pages/api/number-input-api.page.scss      |  0
 .../pages/api/number-input-api.page.ts        | 12 ++++++++
 .../number-input-code-generation.page.html    |  1 +
 .../number-input-code-generation.page.scss    |  0
 .../number-input-code-generation.page.ts      | 12 ++++++++
 .../overview/number-input-overview.page.html  |  1 +
 .../overview/number-input-overview.page.scss  |  0
 .../overview/number-input-overview.page.ts    | 12 ++++++++
 .../savebar/pages/api/savebar-api.page.html   |  1 +
 .../savebar/pages/api/savebar-api.page.scss   |  0
 .../savebar/pages/api/savebar-api.page.ts     | 12 ++++++++
 .../savebar-code-generation.page.html         |  1 +
 .../savebar-code-generation.page.scss         |  0
 .../savebar-code-generation.page.ts           | 12 ++++++++
 .../pages/overview/savebar-overview.page.html |  1 +
 .../pages/overview/savebar-overview.page.scss |  0
 .../pages/overview/savebar-overview.page.ts   | 12 ++++++++
 .../src/app/pages/savebar/savebar.module.ts   | 30 +++++++++++++++++++
 .../select/pages/api/select-api.page.html     |  1 +
 .../select/pages/api/select-api.page.scss     |  0
 .../pages/select/pages/api/select-api.page.ts | 12 ++++++++
 .../select-code-generation.page.html          |  1 +
 .../select-code-generation.page.scss          |  0
 .../select-code-generation.page.ts            | 12 ++++++++
 .../pages/overview/select-overview.page.html  |  1 +
 .../pages/overview/select-overview.page.scss  |  0
 .../pages/overview/select-overview.page.ts    | 12 ++++++++
 .../src/app/pages/select/select.module.ts     | 30 +++++++++++++++++++
 .../slider/pages/api/slider-api.page.html     |  1 +
 .../slider/pages/api/slider-api.page.scss     |  0
 .../pages/slider/pages/api/slider-api.page.ts | 12 ++++++++
 .../slider-code-generation.page.html          |  1 +
 .../slider-code-generation.page.scss          |  0
 .../slider-code-generation.page.ts            | 12 ++++++++
 .../pages/overview/slider-overview.page.html  |  1 +
 .../pages/overview/slider-overview.page.scss  |  0
 .../pages/overview/slider-overview.page.ts    | 12 ++++++++
 .../src/app/pages/slider/slider.module.ts     | 30 +++++++++++++++++++
 .../pages/table/pages/api/table-api.page.html |  1 +
 .../pages/table/pages/api/table-api.page.scss |  0
 .../pages/table/pages/api/table-api.page.ts   | 12 ++++++++
 .../table-code-generation.page.html           |  1 +
 .../table-code-generation.page.scss           |  0
 .../table-code-generation.page.ts             | 12 ++++++++
 .../pages/overview/table-overview.page.html   |  1 +
 .../pages/overview/table-overview.page.scss   |  0
 .../pages/overview/table-overview.page.ts     | 12 ++++++++
 .../src/app/pages/table/table.module.ts       | 30 +++++++++++++++++++
 .../pages/view/pages/api/view-api.page.html   |  1 +
 .../pages/view/pages/api/view-api.page.scss   |  0
 .../app/pages/view/pages/api/view-api.page.ts | 12 ++++++++
 .../view-code-generation.page.html            |  1 +
 .../view-code-generation.page.scss            |  0
 .../view-code-generation.page.ts              | 12 ++++++++
 .../pages/overview/view-overview.page.html    |  1 +
 .../pages/overview/view-overview.page.scss    |  0
 .../view/pages/overview/view-overview.page.ts | 12 ++++++++
 .../src/app/pages/view/view.module.ts         | 30 +++++++++++++++++++
 scripts/generate-documentation-module.js      |  3 ++
 132 files changed, 875 insertions(+), 16 deletions(-)
 create mode 100644 projects/documentation/src/app/pages/card/card.module.ts
 create mode 100644 projects/documentation/src/app/pages/card/pages/api/card-api.page.html
 create mode 100644 projects/documentation/src/app/pages/card/pages/api/card-api.page.scss
 create mode 100644 projects/documentation/src/app/pages/card/pages/api/card-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/card/pages/code-generation/card-code-generation.page.html
 create mode 100644 projects/documentation/src/app/pages/card/pages/code-generation/card-code-generation.page.scss
 create mode 100644 projects/documentation/src/app/pages/card/pages/code-generation/card-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/card/pages/overview/card-overview.page.html
 create mode 100644 projects/documentation/src/app/pages/card/pages/overview/card-overview.page.scss
 create mode 100644 projects/documentation/src/app/pages/card/pages/overview/card-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/dialog-wrapper/dialog-wrapper.module.ts
 create mode 100644 projects/documentation/src/app/pages/dialog-wrapper/pages/api/dialog-wrapper-api.page.html
 create mode 100644 projects/documentation/src/app/pages/dialog-wrapper/pages/api/dialog-wrapper-api.page.scss
 create mode 100644 projects/documentation/src/app/pages/dialog-wrapper/pages/api/dialog-wrapper-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/dialog-wrapper/pages/code-generation/dialog-wrapper-code-generation.page.html
 create mode 100644 projects/documentation/src/app/pages/dialog-wrapper/pages/code-generation/dialog-wrapper-code-generation.page.scss
 create mode 100644 projects/documentation/src/app/pages/dialog-wrapper/pages/code-generation/dialog-wrapper-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/dialog-wrapper/pages/overview/dialog-wrapper-overview.page.html
 create mode 100644 projects/documentation/src/app/pages/dialog-wrapper/pages/overview/dialog-wrapper-overview.page.scss
 create mode 100644 projects/documentation/src/app/pages/dialog-wrapper/pages/overview/dialog-wrapper-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/flip-container/flip-container.module.ts
 create mode 100644 projects/documentation/src/app/pages/flip-container/pages/api/flip-container-api.page.html
 create mode 100644 projects/documentation/src/app/pages/flip-container/pages/api/flip-container-api.page.scss
 create mode 100644 projects/documentation/src/app/pages/flip-container/pages/api/flip-container-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/flip-container/pages/code-generation/flip-container-code-generation.page.html
 create mode 100644 projects/documentation/src/app/pages/flip-container/pages/code-generation/flip-container-code-generation.page.scss
 create mode 100644 projects/documentation/src/app/pages/flip-container/pages/code-generation/flip-container-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/flip-container/pages/overview/flip-container-overview.page.html
 create mode 100644 projects/documentation/src/app/pages/flip-container/pages/overview/flip-container-overview.page.scss
 create mode 100644 projects/documentation/src/app/pages/flip-container/pages/overview/flip-container-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/form-errors/form-errors.module.ts
 create mode 100644 projects/documentation/src/app/pages/form-errors/pages/api/form-errors-api.page.html
 create mode 100644 projects/documentation/src/app/pages/form-errors/pages/api/form-errors-api.page.scss
 create mode 100644 projects/documentation/src/app/pages/form-errors/pages/api/form-errors-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/form-errors/pages/code-generation/form-errors-code-generation.page.html
 create mode 100644 projects/documentation/src/app/pages/form-errors/pages/code-generation/form-errors-code-generation.page.scss
 create mode 100644 projects/documentation/src/app/pages/form-errors/pages/code-generation/form-errors-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/form-errors/pages/overview/form-errors-overview.page.html
 create mode 100644 projects/documentation/src/app/pages/form-errors/pages/overview/form-errors-overview.page.scss
 create mode 100644 projects/documentation/src/app/pages/form-errors/pages/overview/form-errors-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/form-field/form-field.module.ts
 create mode 100644 projects/documentation/src/app/pages/form-field/pages/api/form-field-api.page.html
 create mode 100644 projects/documentation/src/app/pages/form-field/pages/api/form-field-api.page.scss
 create mode 100644 projects/documentation/src/app/pages/form-field/pages/api/form-field-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/form-field/pages/code-generation/form-field-code-generation.page.html
 create mode 100644 projects/documentation/src/app/pages/form-field/pages/code-generation/form-field-code-generation.page.scss
 create mode 100644 projects/documentation/src/app/pages/form-field/pages/code-generation/form-field-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/form-field/pages/overview/form-field-overview.page.html
 create mode 100644 projects/documentation/src/app/pages/form-field/pages/overview/form-field-overview.page.scss
 create mode 100644 projects/documentation/src/app/pages/form-field/pages/overview/form-field-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/form/pages/api/form-api.page.html
 create mode 100644 projects/documentation/src/app/pages/form/pages/api/form-api.page.scss
 create mode 100644 projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.html
 create mode 100644 projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.scss
 create mode 100644 projects/documentation/src/app/pages/form/pages/overview/form-overview.page.html
 create mode 100644 projects/documentation/src/app/pages/form/pages/overview/form-overview.page.scss
 create mode 100644 projects/documentation/src/app/pages/header/header.module.ts
 create mode 100644 projects/documentation/src/app/pages/header/pages/api/header-api.page.html
 create mode 100644 projects/documentation/src/app/pages/header/pages/api/header-api.page.scss
 create mode 100644 projects/documentation/src/app/pages/header/pages/api/header-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/header/pages/code-generation/header-code-generation.page.html
 create mode 100644 projects/documentation/src/app/pages/header/pages/code-generation/header-code-generation.page.scss
 create mode 100644 projects/documentation/src/app/pages/header/pages/code-generation/header-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/header/pages/overview/header-overview.page.html
 create mode 100644 projects/documentation/src/app/pages/header/pages/overview/header-overview.page.scss
 create mode 100644 projects/documentation/src/app/pages/header/pages/overview/header-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/number-input/number-input.module.ts
 create mode 100644 projects/documentation/src/app/pages/number-input/pages/api/number-input-api.page.html
 create mode 100644 projects/documentation/src/app/pages/number-input/pages/api/number-input-api.page.scss
 create mode 100644 projects/documentation/src/app/pages/number-input/pages/api/number-input-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/number-input/pages/code-generation/number-input-code-generation.page.html
 create mode 100644 projects/documentation/src/app/pages/number-input/pages/code-generation/number-input-code-generation.page.scss
 create mode 100644 projects/documentation/src/app/pages/number-input/pages/code-generation/number-input-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/number-input/pages/overview/number-input-overview.page.html
 create mode 100644 projects/documentation/src/app/pages/number-input/pages/overview/number-input-overview.page.scss
 create mode 100644 projects/documentation/src/app/pages/number-input/pages/overview/number-input-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/savebar/pages/api/savebar-api.page.html
 create mode 100644 projects/documentation/src/app/pages/savebar/pages/api/savebar-api.page.scss
 create mode 100644 projects/documentation/src/app/pages/savebar/pages/api/savebar-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/savebar/pages/code-generation/savebar-code-generation.page.html
 create mode 100644 projects/documentation/src/app/pages/savebar/pages/code-generation/savebar-code-generation.page.scss
 create mode 100644 projects/documentation/src/app/pages/savebar/pages/code-generation/savebar-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/savebar/pages/overview/savebar-overview.page.html
 create mode 100644 projects/documentation/src/app/pages/savebar/pages/overview/savebar-overview.page.scss
 create mode 100644 projects/documentation/src/app/pages/savebar/pages/overview/savebar-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/savebar/savebar.module.ts
 create mode 100644 projects/documentation/src/app/pages/select/pages/api/select-api.page.html
 create mode 100644 projects/documentation/src/app/pages/select/pages/api/select-api.page.scss
 create mode 100644 projects/documentation/src/app/pages/select/pages/api/select-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/select/pages/code-generation/select-code-generation.page.html
 create mode 100644 projects/documentation/src/app/pages/select/pages/code-generation/select-code-generation.page.scss
 create mode 100644 projects/documentation/src/app/pages/select/pages/code-generation/select-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/select/pages/overview/select-overview.page.html
 create mode 100644 projects/documentation/src/app/pages/select/pages/overview/select-overview.page.scss
 create mode 100644 projects/documentation/src/app/pages/select/pages/overview/select-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/select/select.module.ts
 create mode 100644 projects/documentation/src/app/pages/slider/pages/api/slider-api.page.html
 create mode 100644 projects/documentation/src/app/pages/slider/pages/api/slider-api.page.scss
 create mode 100644 projects/documentation/src/app/pages/slider/pages/api/slider-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/slider/pages/code-generation/slider-code-generation.page.html
 create mode 100644 projects/documentation/src/app/pages/slider/pages/code-generation/slider-code-generation.page.scss
 create mode 100644 projects/documentation/src/app/pages/slider/pages/code-generation/slider-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/slider/pages/overview/slider-overview.page.html
 create mode 100644 projects/documentation/src/app/pages/slider/pages/overview/slider-overview.page.scss
 create mode 100644 projects/documentation/src/app/pages/slider/pages/overview/slider-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/slider/slider.module.ts
 create mode 100644 projects/documentation/src/app/pages/table/pages/api/table-api.page.html
 create mode 100644 projects/documentation/src/app/pages/table/pages/api/table-api.page.scss
 create mode 100644 projects/documentation/src/app/pages/table/pages/api/table-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/table/pages/code-generation/table-code-generation.page.html
 create mode 100644 projects/documentation/src/app/pages/table/pages/code-generation/table-code-generation.page.scss
 create mode 100644 projects/documentation/src/app/pages/table/pages/code-generation/table-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/table/pages/overview/table-overview.page.html
 create mode 100644 projects/documentation/src/app/pages/table/pages/overview/table-overview.page.scss
 create mode 100644 projects/documentation/src/app/pages/table/pages/overview/table-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/table/table.module.ts
 create mode 100644 projects/documentation/src/app/pages/view/pages/api/view-api.page.html
 create mode 100644 projects/documentation/src/app/pages/view/pages/api/view-api.page.scss
 create mode 100644 projects/documentation/src/app/pages/view/pages/api/view-api.page.ts
 create mode 100644 projects/documentation/src/app/pages/view/pages/code-generation/view-code-generation.page.html
 create mode 100644 projects/documentation/src/app/pages/view/pages/code-generation/view-code-generation.page.scss
 create mode 100644 projects/documentation/src/app/pages/view/pages/code-generation/view-code-generation.page.ts
 create mode 100644 projects/documentation/src/app/pages/view/pages/overview/view-overview.page.html
 create mode 100644 projects/documentation/src/app/pages/view/pages/overview/view-overview.page.scss
 create mode 100644 projects/documentation/src/app/pages/view/pages/overview/view-overview.page.ts
 create mode 100644 projects/documentation/src/app/pages/view/view.module.ts
 create mode 100644 scripts/generate-documentation-module.js

diff --git a/projects/documentation/src/app/app.module.ts b/projects/documentation/src/app/app.module.ts
index bfde8169..39238b05 100644
--- a/projects/documentation/src/app/app.module.ts
+++ b/projects/documentation/src/app/app.module.ts
@@ -12,8 +12,20 @@ import { HomePage } from './pages/home/home.page';
 
 const appRoutes: Routes = [
   { path: '', component: HomePage },
-  { path: 'form', loadChildren: () => import('./pages/form/form.module').then((m) => m.FormModule) },
   { path: 'block-ui', loadChildren: () => import('./pages/block-ui/block-ui.module').then((m) => m.BlockUiModule) },
+  { path: 'card', loadChildren: () => import('./pages/card/card.module').then((m) => m.CardModule) },
+  { path: 'dialog-wrapper', loadChildren: () => import('./pages/dialog-wrapper/dialog-wrapper.module').then((m) => m.DialogWrapperModule) },
+  { path: 'flip-container', loadChildren: () => import('./pages/flip-container/flip-container.module').then((m) => m.FlipContainerModule) },
+  { path: 'form', loadChildren: () => import('./pages/form/form.module').then((m) => m.FormModule) },
+  { path: 'form-errors', loadChildren: () => import('./pages/form-errors/form-errors.module').then((m) => m.FormErrorsModule) },
+  { path: 'form-field', loadChildren: () => import('./pages/form-field/form-field.module').then((m) => m.FormFieldModule) },
+  { path: 'header', loadChildren: () => import('./pages/header/header.module').then((m) => m.HeaderModule) },
+  { path: 'number-input', loadChildren: () => import('./pages/number-input/number-input.module').then((m) => m.NumberInputModule) },
+  { path: 'savebar', loadChildren: () => import('./pages/savebar/savebar.module').then((m) => m.SavebarModule) },
+  { path: 'select', loadChildren: () => import('./pages/select/select.module').then((m) => m.SelectModule) },
+  { path: 'slider', loadChildren: () => import('./pages/slider/slider.module').then((m) => m.SliderModule) },
+  { path: 'table', loadChildren: () => import('./pages/table/table.module').then((m) => m.TableModule) },
+  { path: 'view', loadChildren: () => import('./pages/view/view.module').then((m) => m.ViewModule) },
 ];
 
 @NgModule({
diff --git a/projects/documentation/src/app/pages/card/card.module.ts b/projects/documentation/src/app/pages/card/card.module.ts
new file mode 100644
index 00000000..c707845a
--- /dev/null
+++ b/projects/documentation/src/app/pages/card/card.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { CardApiPage } from './pages/api/card-api.page';
+import { CardCodeGenerationPage } from './pages/code-generation/card-code-generation.page';
+import { CardOverviewPage } from './pages/overview/card-overview.page';
+
+@NgModule({
+  declarations: [CardApiPage, CardCodeGenerationPage, CardOverviewPage],
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: CardOverviewPage },
+          { path: 'api', component: CardApiPage },
+          { path: 'code-generation', component: CardCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'Card' }],
+})
+export class CardModule {}
diff --git a/projects/documentation/src/app/pages/card/pages/api/card-api.page.html b/projects/documentation/src/app/pages/card/pages/api/card-api.page.html
new file mode 100644
index 00000000..1ed2a85a
--- /dev/null
+++ b/projects/documentation/src/app/pages/card/pages/api/card-api.page.html
@@ -0,0 +1 @@
+<p>card-api works!</p>
diff --git a/projects/documentation/src/app/pages/card/pages/api/card-api.page.scss b/projects/documentation/src/app/pages/card/pages/api/card-api.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/card/pages/api/card-api.page.ts b/projects/documentation/src/app/pages/card/pages/api/card-api.page.ts
new file mode 100644
index 00000000..4d0ec681
--- /dev/null
+++ b/projects/documentation/src/app/pages/card/pages/api/card-api.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-card-api',
+  templateUrl: './card-api.page.html',
+  styleUrls: ['./card-api.page.scss'],
+})
+export class CardApiPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/card/pages/code-generation/card-code-generation.page.html b/projects/documentation/src/app/pages/card/pages/code-generation/card-code-generation.page.html
new file mode 100644
index 00000000..6185277d
--- /dev/null
+++ b/projects/documentation/src/app/pages/card/pages/code-generation/card-code-generation.page.html
@@ -0,0 +1 @@
+<p>card-code-generation works!</p>
diff --git a/projects/documentation/src/app/pages/card/pages/code-generation/card-code-generation.page.scss b/projects/documentation/src/app/pages/card/pages/code-generation/card-code-generation.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/card/pages/code-generation/card-code-generation.page.ts b/projects/documentation/src/app/pages/card/pages/code-generation/card-code-generation.page.ts
new file mode 100644
index 00000000..50ba70c2
--- /dev/null
+++ b/projects/documentation/src/app/pages/card/pages/code-generation/card-code-generation.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-card-code-generation',
+  templateUrl: './card-code-generation.page.html',
+  styleUrls: ['./card-code-generation.page.scss'],
+})
+export class CardCodeGenerationPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/card/pages/overview/card-overview.page.html b/projects/documentation/src/app/pages/card/pages/overview/card-overview.page.html
new file mode 100644
index 00000000..4d9de051
--- /dev/null
+++ b/projects/documentation/src/app/pages/card/pages/overview/card-overview.page.html
@@ -0,0 +1 @@
+<p>card-overview works!</p>
diff --git a/projects/documentation/src/app/pages/card/pages/overview/card-overview.page.scss b/projects/documentation/src/app/pages/card/pages/overview/card-overview.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/card/pages/overview/card-overview.page.ts b/projects/documentation/src/app/pages/card/pages/overview/card-overview.page.ts
new file mode 100644
index 00000000..f3c1ee06
--- /dev/null
+++ b/projects/documentation/src/app/pages/card/pages/overview/card-overview.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-card-overview',
+  templateUrl: './card-overview.page.html',
+  styleUrls: ['./card-overview.page.scss'],
+})
+export class CardOverviewPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/dialog-wrapper/dialog-wrapper.module.ts b/projects/documentation/src/app/pages/dialog-wrapper/dialog-wrapper.module.ts
new file mode 100644
index 00000000..06547dbd
--- /dev/null
+++ b/projects/documentation/src/app/pages/dialog-wrapper/dialog-wrapper.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { DialogWrapperApiPage } from './pages/api/dialog-wrapper-api.page';
+import { DialogWrapperCodeGenerationPage } from './pages/code-generation/dialog-wrapper-code-generation.page';
+import { DialogWrapperOverviewPage } from './pages/overview/dialog-wrapper-overview.page';
+
+@NgModule({
+  declarations: [DialogWrapperApiPage, DialogWrapperCodeGenerationPage, DialogWrapperOverviewPage],
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: DialogWrapperOverviewPage },
+          { path: 'api', component: DialogWrapperApiPage },
+          { path: 'code-generation', component: DialogWrapperCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'Dialog wrapper' }],
+})
+export class DialogWrapperModule {}
diff --git a/projects/documentation/src/app/pages/dialog-wrapper/pages/api/dialog-wrapper-api.page.html b/projects/documentation/src/app/pages/dialog-wrapper/pages/api/dialog-wrapper-api.page.html
new file mode 100644
index 00000000..e27fa898
--- /dev/null
+++ b/projects/documentation/src/app/pages/dialog-wrapper/pages/api/dialog-wrapper-api.page.html
@@ -0,0 +1 @@
+<p>dialog-wrapper-api works!</p>
diff --git a/projects/documentation/src/app/pages/dialog-wrapper/pages/api/dialog-wrapper-api.page.scss b/projects/documentation/src/app/pages/dialog-wrapper/pages/api/dialog-wrapper-api.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/dialog-wrapper/pages/api/dialog-wrapper-api.page.ts b/projects/documentation/src/app/pages/dialog-wrapper/pages/api/dialog-wrapper-api.page.ts
new file mode 100644
index 00000000..c64b8b06
--- /dev/null
+++ b/projects/documentation/src/app/pages/dialog-wrapper/pages/api/dialog-wrapper-api.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dialog-wrapper-api',
+  templateUrl: './dialog-wrapper-api.page.html',
+  styleUrls: ['./dialog-wrapper-api.page.scss'],
+})
+export class DialogWrapperApiPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/dialog-wrapper/pages/code-generation/dialog-wrapper-code-generation.page.html b/projects/documentation/src/app/pages/dialog-wrapper/pages/code-generation/dialog-wrapper-code-generation.page.html
new file mode 100644
index 00000000..37d2322b
--- /dev/null
+++ b/projects/documentation/src/app/pages/dialog-wrapper/pages/code-generation/dialog-wrapper-code-generation.page.html
@@ -0,0 +1 @@
+<p>dialog-wrapper-code-generation works!</p>
diff --git a/projects/documentation/src/app/pages/dialog-wrapper/pages/code-generation/dialog-wrapper-code-generation.page.scss b/projects/documentation/src/app/pages/dialog-wrapper/pages/code-generation/dialog-wrapper-code-generation.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/dialog-wrapper/pages/code-generation/dialog-wrapper-code-generation.page.ts b/projects/documentation/src/app/pages/dialog-wrapper/pages/code-generation/dialog-wrapper-code-generation.page.ts
new file mode 100644
index 00000000..65164122
--- /dev/null
+++ b/projects/documentation/src/app/pages/dialog-wrapper/pages/code-generation/dialog-wrapper-code-generation.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dialog-wrapper-code-generation',
+  templateUrl: './dialog-wrapper-code-generation.page.html',
+  styleUrls: ['./dialog-wrapper-code-generation.page.scss'],
+})
+export class DialogWrapperCodeGenerationPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/dialog-wrapper/pages/overview/dialog-wrapper-overview.page.html b/projects/documentation/src/app/pages/dialog-wrapper/pages/overview/dialog-wrapper-overview.page.html
new file mode 100644
index 00000000..bf89cb40
--- /dev/null
+++ b/projects/documentation/src/app/pages/dialog-wrapper/pages/overview/dialog-wrapper-overview.page.html
@@ -0,0 +1 @@
+<p>dialog-wrapper-overview works!</p>
diff --git a/projects/documentation/src/app/pages/dialog-wrapper/pages/overview/dialog-wrapper-overview.page.scss b/projects/documentation/src/app/pages/dialog-wrapper/pages/overview/dialog-wrapper-overview.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/dialog-wrapper/pages/overview/dialog-wrapper-overview.page.ts b/projects/documentation/src/app/pages/dialog-wrapper/pages/overview/dialog-wrapper-overview.page.ts
new file mode 100644
index 00000000..fd0e626f
--- /dev/null
+++ b/projects/documentation/src/app/pages/dialog-wrapper/pages/overview/dialog-wrapper-overview.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dialog-wrapper-overview',
+  templateUrl: './dialog-wrapper-overview.page.html',
+  styleUrls: ['./dialog-wrapper-overview.page.scss'],
+})
+export class DialogWrapperOverviewPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/flip-container/flip-container.module.ts b/projects/documentation/src/app/pages/flip-container/flip-container.module.ts
new file mode 100644
index 00000000..e842af75
--- /dev/null
+++ b/projects/documentation/src/app/pages/flip-container/flip-container.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { FlipContainerApiPage } from './pages/api/flip-container-api.page';
+import { FlipContainerCodeGenerationPage } from './pages/code-generation/flip-container-code-generation.page';
+import { FlipContainerOverviewPage } from './pages/overview/flip-container-overview.page';
+
+@NgModule({
+  declarations: [FlipContainerApiPage, FlipContainerCodeGenerationPage, FlipContainerOverviewPage],
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: FlipContainerOverviewPage },
+          { path: 'api', component: FlipContainerApiPage },
+          { path: 'code-generation', component: FlipContainerCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'Flip container' }],
+})
+export class FlipContainerModule {}
diff --git a/projects/documentation/src/app/pages/flip-container/pages/api/flip-container-api.page.html b/projects/documentation/src/app/pages/flip-container/pages/api/flip-container-api.page.html
new file mode 100644
index 00000000..25264cb1
--- /dev/null
+++ b/projects/documentation/src/app/pages/flip-container/pages/api/flip-container-api.page.html
@@ -0,0 +1 @@
+<p>flip-container-api works!</p>
diff --git a/projects/documentation/src/app/pages/flip-container/pages/api/flip-container-api.page.scss b/projects/documentation/src/app/pages/flip-container/pages/api/flip-container-api.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/flip-container/pages/api/flip-container-api.page.ts b/projects/documentation/src/app/pages/flip-container/pages/api/flip-container-api.page.ts
new file mode 100644
index 00000000..dd3ea87c
--- /dev/null
+++ b/projects/documentation/src/app/pages/flip-container/pages/api/flip-container-api.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-flip-container-api',
+  templateUrl: './flip-container-api.page.html',
+  styleUrls: ['./flip-container-api.page.scss'],
+})
+export class FlipContainerApiPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/flip-container/pages/code-generation/flip-container-code-generation.page.html b/projects/documentation/src/app/pages/flip-container/pages/code-generation/flip-container-code-generation.page.html
new file mode 100644
index 00000000..f1eb33fe
--- /dev/null
+++ b/projects/documentation/src/app/pages/flip-container/pages/code-generation/flip-container-code-generation.page.html
@@ -0,0 +1 @@
+<p>flip-container-code-generation works!</p>
diff --git a/projects/documentation/src/app/pages/flip-container/pages/code-generation/flip-container-code-generation.page.scss b/projects/documentation/src/app/pages/flip-container/pages/code-generation/flip-container-code-generation.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/flip-container/pages/code-generation/flip-container-code-generation.page.ts b/projects/documentation/src/app/pages/flip-container/pages/code-generation/flip-container-code-generation.page.ts
new file mode 100644
index 00000000..4d4cf1e8
--- /dev/null
+++ b/projects/documentation/src/app/pages/flip-container/pages/code-generation/flip-container-code-generation.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-flip-container-code-generation',
+  templateUrl: './flip-container-code-generation.page.html',
+  styleUrls: ['./flip-container-code-generation.page.scss'],
+})
+export class FlipContainerCodeGenerationPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/flip-container/pages/overview/flip-container-overview.page.html b/projects/documentation/src/app/pages/flip-container/pages/overview/flip-container-overview.page.html
new file mode 100644
index 00000000..20528c9f
--- /dev/null
+++ b/projects/documentation/src/app/pages/flip-container/pages/overview/flip-container-overview.page.html
@@ -0,0 +1 @@
+<p>flip-container-overview works!</p>
diff --git a/projects/documentation/src/app/pages/flip-container/pages/overview/flip-container-overview.page.scss b/projects/documentation/src/app/pages/flip-container/pages/overview/flip-container-overview.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/flip-container/pages/overview/flip-container-overview.page.ts b/projects/documentation/src/app/pages/flip-container/pages/overview/flip-container-overview.page.ts
new file mode 100644
index 00000000..31ee1559
--- /dev/null
+++ b/projects/documentation/src/app/pages/flip-container/pages/overview/flip-container-overview.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-flip-container-overview',
+  templateUrl: './flip-container-overview.page.html',
+  styleUrls: ['./flip-container-overview.page.scss'],
+})
+export class FlipContainerOverviewPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/form-errors/form-errors.module.ts b/projects/documentation/src/app/pages/form-errors/form-errors.module.ts
new file mode 100644
index 00000000..8707ba03
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-errors/form-errors.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { FormErrorsApiPage } from './pages/api/form-errors-api.page';
+import { FormErrorsCodeGenerationPage } from './pages/code-generation/form-errors-code-generation.page';
+import { FormErrorsOverviewPage } from './pages/overview/form-errors-overview.page';
+
+@NgModule({
+  declarations: [FormErrorsApiPage, FormErrorsCodeGenerationPage, FormErrorsOverviewPage],
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: FormErrorsOverviewPage },
+          { path: 'api', component: FormErrorsApiPage },
+          { path: 'code-generation', component: FormErrorsCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'Form errors' }],
+})
+export class FormErrorsModule {}
diff --git a/projects/documentation/src/app/pages/form-errors/pages/api/form-errors-api.page.html b/projects/documentation/src/app/pages/form-errors/pages/api/form-errors-api.page.html
new file mode 100644
index 00000000..052cdcde
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-errors/pages/api/form-errors-api.page.html
@@ -0,0 +1 @@
+<p>form-errors-api works!</p>
diff --git a/projects/documentation/src/app/pages/form-errors/pages/api/form-errors-api.page.scss b/projects/documentation/src/app/pages/form-errors/pages/api/form-errors-api.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/form-errors/pages/api/form-errors-api.page.ts b/projects/documentation/src/app/pages/form-errors/pages/api/form-errors-api.page.ts
new file mode 100644
index 00000000..e6f9824f
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-errors/pages/api/form-errors-api.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-form-errors-api',
+  templateUrl: './form-errors-api.page.html',
+  styleUrls: ['./form-errors-api.page.scss'],
+})
+export class FormErrorsApiPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/form-errors/pages/code-generation/form-errors-code-generation.page.html b/projects/documentation/src/app/pages/form-errors/pages/code-generation/form-errors-code-generation.page.html
new file mode 100644
index 00000000..85640d53
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-errors/pages/code-generation/form-errors-code-generation.page.html
@@ -0,0 +1 @@
+<p>form-errors-code-generation works!</p>
diff --git a/projects/documentation/src/app/pages/form-errors/pages/code-generation/form-errors-code-generation.page.scss b/projects/documentation/src/app/pages/form-errors/pages/code-generation/form-errors-code-generation.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/form-errors/pages/code-generation/form-errors-code-generation.page.ts b/projects/documentation/src/app/pages/form-errors/pages/code-generation/form-errors-code-generation.page.ts
new file mode 100644
index 00000000..93b2943d
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-errors/pages/code-generation/form-errors-code-generation.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-form-errors-code-generation',
+  templateUrl: './form-errors-code-generation.page.html',
+  styleUrls: ['./form-errors-code-generation.page.scss'],
+})
+export class FormErrorsCodeGenerationPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/form-errors/pages/overview/form-errors-overview.page.html b/projects/documentation/src/app/pages/form-errors/pages/overview/form-errors-overview.page.html
new file mode 100644
index 00000000..b80fc9aa
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-errors/pages/overview/form-errors-overview.page.html
@@ -0,0 +1 @@
+<p>form-errors-overview works!</p>
diff --git a/projects/documentation/src/app/pages/form-errors/pages/overview/form-errors-overview.page.scss b/projects/documentation/src/app/pages/form-errors/pages/overview/form-errors-overview.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/form-errors/pages/overview/form-errors-overview.page.ts b/projects/documentation/src/app/pages/form-errors/pages/overview/form-errors-overview.page.ts
new file mode 100644
index 00000000..e525bc7e
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-errors/pages/overview/form-errors-overview.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-form-errors-overview',
+  templateUrl: './form-errors-overview.page.html',
+  styleUrls: ['./form-errors-overview.page.scss'],
+})
+export class FormErrorsOverviewPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/form-field/form-field.module.ts b/projects/documentation/src/app/pages/form-field/form-field.module.ts
new file mode 100644
index 00000000..bd85ff39
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-field/form-field.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { FormFieldApiPage } from './pages/api/form-field-api.page';
+import { FormFieldCodeGenerationPage } from './pages/code-generation/form-field-code-generation.page';
+import { FormFieldOverviewPage } from './pages/overview/form-field-overview.page';
+
+@NgModule({
+  declarations: [FormFieldApiPage, FormFieldCodeGenerationPage, FormFieldOverviewPage],
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: FormFieldOverviewPage },
+          { path: 'api', component: FormFieldApiPage },
+          { path: 'code-generation', component: FormFieldCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'Form field' }],
+})
+export class FormFieldModule {}
diff --git a/projects/documentation/src/app/pages/form-field/pages/api/form-field-api.page.html b/projects/documentation/src/app/pages/form-field/pages/api/form-field-api.page.html
new file mode 100644
index 00000000..ca79a3c2
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-field/pages/api/form-field-api.page.html
@@ -0,0 +1 @@
+<p>form-field-api works!</p>
diff --git a/projects/documentation/src/app/pages/form-field/pages/api/form-field-api.page.scss b/projects/documentation/src/app/pages/form-field/pages/api/form-field-api.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/form-field/pages/api/form-field-api.page.ts b/projects/documentation/src/app/pages/form-field/pages/api/form-field-api.page.ts
new file mode 100644
index 00000000..4ffbad34
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-field/pages/api/form-field-api.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-form-field-api',
+  templateUrl: './form-field-api.page.html',
+  styleUrls: ['./form-field-api.page.scss'],
+})
+export class FormFieldApiPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/form-field/pages/code-generation/form-field-code-generation.page.html b/projects/documentation/src/app/pages/form-field/pages/code-generation/form-field-code-generation.page.html
new file mode 100644
index 00000000..6de000c1
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-field/pages/code-generation/form-field-code-generation.page.html
@@ -0,0 +1 @@
+<p>form-field-code-generation works!</p>
diff --git a/projects/documentation/src/app/pages/form-field/pages/code-generation/form-field-code-generation.page.scss b/projects/documentation/src/app/pages/form-field/pages/code-generation/form-field-code-generation.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/form-field/pages/code-generation/form-field-code-generation.page.ts b/projects/documentation/src/app/pages/form-field/pages/code-generation/form-field-code-generation.page.ts
new file mode 100644
index 00000000..5081d1d0
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-field/pages/code-generation/form-field-code-generation.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-form-field-code-generation',
+  templateUrl: './form-field-code-generation.page.html',
+  styleUrls: ['./form-field-code-generation.page.scss'],
+})
+export class FormFieldCodeGenerationPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/form-field/pages/overview/form-field-overview.page.html b/projects/documentation/src/app/pages/form-field/pages/overview/form-field-overview.page.html
new file mode 100644
index 00000000..874563f2
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-field/pages/overview/form-field-overview.page.html
@@ -0,0 +1 @@
+<p>form-field-overview works!</p>
diff --git a/projects/documentation/src/app/pages/form-field/pages/overview/form-field-overview.page.scss b/projects/documentation/src/app/pages/form-field/pages/overview/form-field-overview.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/form-field/pages/overview/form-field-overview.page.ts b/projects/documentation/src/app/pages/form-field/pages/overview/form-field-overview.page.ts
new file mode 100644
index 00000000..98c6561b
--- /dev/null
+++ b/projects/documentation/src/app/pages/form-field/pages/overview/form-field-overview.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-form-field-overview',
+  templateUrl: './form-field-overview.page.html',
+  styleUrls: ['./form-field-overview.page.scss'],
+})
+export class FormFieldOverviewPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/form/form.module.ts b/projects/documentation/src/app/pages/form/form.module.ts
index eb36ac2f..b3bc4602 100644
--- a/projects/documentation/src/app/pages/form/form.module.ts
+++ b/projects/documentation/src/app/pages/form/form.module.ts
@@ -8,6 +8,7 @@ import { FormCodeGenerationPage } from './pages/code-generation/form-code-genera
 import { FormOverviewPage } from './pages/overview/form-overview.page';
 
 @NgModule({
+  declarations: [FormApiPage, FormCodeGenerationPage, FormOverviewPage],
   imports: [
     CommonModule,
     ComponentPageWrapperModule,
diff --git a/projects/documentation/src/app/pages/form/pages/api/form-api.page.html b/projects/documentation/src/app/pages/form/pages/api/form-api.page.html
new file mode 100644
index 00000000..d01d7f4d
--- /dev/null
+++ b/projects/documentation/src/app/pages/form/pages/api/form-api.page.html
@@ -0,0 +1 @@
+<p>form-api works!</p>
diff --git a/projects/documentation/src/app/pages/form/pages/api/form-api.page.scss b/projects/documentation/src/app/pages/form/pages/api/form-api.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/form/pages/api/form-api.page.ts b/projects/documentation/src/app/pages/form/pages/api/form-api.page.ts
index d2956bcc..1c28b4da 100644
--- a/projects/documentation/src/app/pages/form/pages/api/form-api.page.ts
+++ b/projects/documentation/src/app/pages/form/pages/api/form-api.page.ts
@@ -1,8 +1,12 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-form-api-page',
-  template: 'FormApiPage Works!!',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-form-api',
+  templateUrl: './form-api.page.html',
+  styleUrls: ['./form-api.page.scss'],
 })
-export class FormApiPage {}
+export class FormApiPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.html b/projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.html
new file mode 100644
index 00000000..cdde7c6f
--- /dev/null
+++ b/projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.html
@@ -0,0 +1 @@
+<p>form-code-generation works!</p>
diff --git a/projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.scss b/projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.ts b/projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.ts
index 29222111..621bb439 100644
--- a/projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.ts
+++ b/projects/documentation/src/app/pages/form/pages/code-generation/form-code-generation.page.ts
@@ -1,8 +1,12 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-form-code-generation-page',
-  template: 'FormCodeGenerationPage Works!!',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-form-code-generation',
+  templateUrl: './form-code-generation.page.html',
+  styleUrls: ['./form-code-generation.page.scss'],
 })
-export class FormCodeGenerationPage {}
+export class FormCodeGenerationPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/form/pages/overview/form-overview.page.html b/projects/documentation/src/app/pages/form/pages/overview/form-overview.page.html
new file mode 100644
index 00000000..740dda88
--- /dev/null
+++ b/projects/documentation/src/app/pages/form/pages/overview/form-overview.page.html
@@ -0,0 +1 @@
+<p>form-overview works!</p>
diff --git a/projects/documentation/src/app/pages/form/pages/overview/form-overview.page.scss b/projects/documentation/src/app/pages/form/pages/overview/form-overview.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/form/pages/overview/form-overview.page.ts b/projects/documentation/src/app/pages/form/pages/overview/form-overview.page.ts
index 9f816739..d6e80b67 100644
--- a/projects/documentation/src/app/pages/form/pages/overview/form-overview.page.ts
+++ b/projects/documentation/src/app/pages/form/pages/overview/form-overview.page.ts
@@ -1,8 +1,12 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-form-overview-page',
-  template: 'FormOverviewPage Works!!',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-form-overview',
+  templateUrl: './form-overview.page.html',
+  styleUrls: ['./form-overview.page.scss'],
 })
-export class FormOverviewPage {}
+export class FormOverviewPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/header/header.module.ts b/projects/documentation/src/app/pages/header/header.module.ts
new file mode 100644
index 00000000..b14f6a42
--- /dev/null
+++ b/projects/documentation/src/app/pages/header/header.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { HeaderApiPage } from './pages/api/header-api.page';
+import { HeaderCodeGenerationPage } from './pages/code-generation/header-code-generation.page';
+import { HeaderOverviewPage } from './pages/overview/header-overview.page';
+
+@NgModule({
+  declarations: [HeaderApiPage, HeaderCodeGenerationPage, HeaderOverviewPage],
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: HeaderOverviewPage },
+          { path: 'api', component: HeaderApiPage },
+          { path: 'code-generation', component: HeaderCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'Header' }],
+})
+export class HeaderModule {}
diff --git a/projects/documentation/src/app/pages/header/pages/api/header-api.page.html b/projects/documentation/src/app/pages/header/pages/api/header-api.page.html
new file mode 100644
index 00000000..65e6c1f9
--- /dev/null
+++ b/projects/documentation/src/app/pages/header/pages/api/header-api.page.html
@@ -0,0 +1 @@
+<p>header-api works!</p>
diff --git a/projects/documentation/src/app/pages/header/pages/api/header-api.page.scss b/projects/documentation/src/app/pages/header/pages/api/header-api.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/header/pages/api/header-api.page.ts b/projects/documentation/src/app/pages/header/pages/api/header-api.page.ts
new file mode 100644
index 00000000..c17c5301
--- /dev/null
+++ b/projects/documentation/src/app/pages/header/pages/api/header-api.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header-api',
+  templateUrl: './header-api.page.html',
+  styleUrls: ['./header-api.page.scss'],
+})
+export class HeaderApiPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/header/pages/code-generation/header-code-generation.page.html b/projects/documentation/src/app/pages/header/pages/code-generation/header-code-generation.page.html
new file mode 100644
index 00000000..e843d7b3
--- /dev/null
+++ b/projects/documentation/src/app/pages/header/pages/code-generation/header-code-generation.page.html
@@ -0,0 +1 @@
+<p>header-code-generation works!</p>
diff --git a/projects/documentation/src/app/pages/header/pages/code-generation/header-code-generation.page.scss b/projects/documentation/src/app/pages/header/pages/code-generation/header-code-generation.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/header/pages/code-generation/header-code-generation.page.ts b/projects/documentation/src/app/pages/header/pages/code-generation/header-code-generation.page.ts
new file mode 100644
index 00000000..b710b987
--- /dev/null
+++ b/projects/documentation/src/app/pages/header/pages/code-generation/header-code-generation.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header-code-generation',
+  templateUrl: './header-code-generation.page.html',
+  styleUrls: ['./header-code-generation.page.scss'],
+})
+export class HeaderCodeGenerationPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/header/pages/overview/header-overview.page.html b/projects/documentation/src/app/pages/header/pages/overview/header-overview.page.html
new file mode 100644
index 00000000..6fa454b5
--- /dev/null
+++ b/projects/documentation/src/app/pages/header/pages/overview/header-overview.page.html
@@ -0,0 +1 @@
+<p>header-overview works!</p>
diff --git a/projects/documentation/src/app/pages/header/pages/overview/header-overview.page.scss b/projects/documentation/src/app/pages/header/pages/overview/header-overview.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/header/pages/overview/header-overview.page.ts b/projects/documentation/src/app/pages/header/pages/overview/header-overview.page.ts
new file mode 100644
index 00000000..d6056865
--- /dev/null
+++ b/projects/documentation/src/app/pages/header/pages/overview/header-overview.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header-overview',
+  templateUrl: './header-overview.page.html',
+  styleUrls: ['./header-overview.page.scss'],
+})
+export class HeaderOverviewPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/number-input/number-input.module.ts b/projects/documentation/src/app/pages/number-input/number-input.module.ts
new file mode 100644
index 00000000..d2d6aeb0
--- /dev/null
+++ b/projects/documentation/src/app/pages/number-input/number-input.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { NumberInputApiPage } from './pages/api/number-input-api.page';
+import { NumberInputCodeGenerationPage } from './pages/code-generation/number-input-code-generation.page';
+import { NumberInputOverviewPage } from './pages/overview/number-input-overview.page';
+
+@NgModule({
+  declarations: [NumberInputApiPage, NumberInputCodeGenerationPage, NumberInputOverviewPage],
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: NumberInputOverviewPage },
+          { path: 'api', component: NumberInputApiPage },
+          { path: 'code-generation', component: NumberInputCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'Number input' }],
+})
+export class NumberInputModule {}
diff --git a/projects/documentation/src/app/pages/number-input/pages/api/number-input-api.page.html b/projects/documentation/src/app/pages/number-input/pages/api/number-input-api.page.html
new file mode 100644
index 00000000..7c519d2e
--- /dev/null
+++ b/projects/documentation/src/app/pages/number-input/pages/api/number-input-api.page.html
@@ -0,0 +1 @@
+<p>number-input-api works!</p>
diff --git a/projects/documentation/src/app/pages/number-input/pages/api/number-input-api.page.scss b/projects/documentation/src/app/pages/number-input/pages/api/number-input-api.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/number-input/pages/api/number-input-api.page.ts b/projects/documentation/src/app/pages/number-input/pages/api/number-input-api.page.ts
new file mode 100644
index 00000000..973bf666
--- /dev/null
+++ b/projects/documentation/src/app/pages/number-input/pages/api/number-input-api.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-number-input-api',
+  templateUrl: './number-input-api.page.html',
+  styleUrls: ['./number-input-api.page.scss'],
+})
+export class NumberInputApiPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/number-input/pages/code-generation/number-input-code-generation.page.html b/projects/documentation/src/app/pages/number-input/pages/code-generation/number-input-code-generation.page.html
new file mode 100644
index 00000000..c173b266
--- /dev/null
+++ b/projects/documentation/src/app/pages/number-input/pages/code-generation/number-input-code-generation.page.html
@@ -0,0 +1 @@
+<p>number-input-code-generation works!</p>
diff --git a/projects/documentation/src/app/pages/number-input/pages/code-generation/number-input-code-generation.page.scss b/projects/documentation/src/app/pages/number-input/pages/code-generation/number-input-code-generation.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/number-input/pages/code-generation/number-input-code-generation.page.ts b/projects/documentation/src/app/pages/number-input/pages/code-generation/number-input-code-generation.page.ts
new file mode 100644
index 00000000..2be4ca1f
--- /dev/null
+++ b/projects/documentation/src/app/pages/number-input/pages/code-generation/number-input-code-generation.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-number-input-code-generation',
+  templateUrl: './number-input-code-generation.page.html',
+  styleUrls: ['./number-input-code-generation.page.scss'],
+})
+export class NumberInputCodeGenerationPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/number-input/pages/overview/number-input-overview.page.html b/projects/documentation/src/app/pages/number-input/pages/overview/number-input-overview.page.html
new file mode 100644
index 00000000..5d0410aa
--- /dev/null
+++ b/projects/documentation/src/app/pages/number-input/pages/overview/number-input-overview.page.html
@@ -0,0 +1 @@
+<p>number-input-overview works!</p>
diff --git a/projects/documentation/src/app/pages/number-input/pages/overview/number-input-overview.page.scss b/projects/documentation/src/app/pages/number-input/pages/overview/number-input-overview.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/number-input/pages/overview/number-input-overview.page.ts b/projects/documentation/src/app/pages/number-input/pages/overview/number-input-overview.page.ts
new file mode 100644
index 00000000..9ee14429
--- /dev/null
+++ b/projects/documentation/src/app/pages/number-input/pages/overview/number-input-overview.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-number-input-overview',
+  templateUrl: './number-input-overview.page.html',
+  styleUrls: ['./number-input-overview.page.scss'],
+})
+export class NumberInputOverviewPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/savebar/pages/api/savebar-api.page.html b/projects/documentation/src/app/pages/savebar/pages/api/savebar-api.page.html
new file mode 100644
index 00000000..05771228
--- /dev/null
+++ b/projects/documentation/src/app/pages/savebar/pages/api/savebar-api.page.html
@@ -0,0 +1 @@
+<p>savebar-api works!</p>
diff --git a/projects/documentation/src/app/pages/savebar/pages/api/savebar-api.page.scss b/projects/documentation/src/app/pages/savebar/pages/api/savebar-api.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/savebar/pages/api/savebar-api.page.ts b/projects/documentation/src/app/pages/savebar/pages/api/savebar-api.page.ts
new file mode 100644
index 00000000..bbcea54c
--- /dev/null
+++ b/projects/documentation/src/app/pages/savebar/pages/api/savebar-api.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-savebar-api',
+  templateUrl: './savebar-api.page.html',
+  styleUrls: ['./savebar-api.page.scss'],
+})
+export class SavebarApiPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/savebar/pages/code-generation/savebar-code-generation.page.html b/projects/documentation/src/app/pages/savebar/pages/code-generation/savebar-code-generation.page.html
new file mode 100644
index 00000000..618c24db
--- /dev/null
+++ b/projects/documentation/src/app/pages/savebar/pages/code-generation/savebar-code-generation.page.html
@@ -0,0 +1 @@
+<p>savebar-code-generation works!</p>
diff --git a/projects/documentation/src/app/pages/savebar/pages/code-generation/savebar-code-generation.page.scss b/projects/documentation/src/app/pages/savebar/pages/code-generation/savebar-code-generation.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/savebar/pages/code-generation/savebar-code-generation.page.ts b/projects/documentation/src/app/pages/savebar/pages/code-generation/savebar-code-generation.page.ts
new file mode 100644
index 00000000..af62fa86
--- /dev/null
+++ b/projects/documentation/src/app/pages/savebar/pages/code-generation/savebar-code-generation.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-savebar-code-generation',
+  templateUrl: './savebar-code-generation.page.html',
+  styleUrls: ['./savebar-code-generation.page.scss'],
+})
+export class SavebarCodeGenerationPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/savebar/pages/overview/savebar-overview.page.html b/projects/documentation/src/app/pages/savebar/pages/overview/savebar-overview.page.html
new file mode 100644
index 00000000..581cc29f
--- /dev/null
+++ b/projects/documentation/src/app/pages/savebar/pages/overview/savebar-overview.page.html
@@ -0,0 +1 @@
+<p>savebar-overview works!</p>
diff --git a/projects/documentation/src/app/pages/savebar/pages/overview/savebar-overview.page.scss b/projects/documentation/src/app/pages/savebar/pages/overview/savebar-overview.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/savebar/pages/overview/savebar-overview.page.ts b/projects/documentation/src/app/pages/savebar/pages/overview/savebar-overview.page.ts
new file mode 100644
index 00000000..fcd9a635
--- /dev/null
+++ b/projects/documentation/src/app/pages/savebar/pages/overview/savebar-overview.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-savebar-overview',
+  templateUrl: './savebar-overview.page.html',
+  styleUrls: ['./savebar-overview.page.scss'],
+})
+export class SavebarOverviewPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/savebar/savebar.module.ts b/projects/documentation/src/app/pages/savebar/savebar.module.ts
new file mode 100644
index 00000000..d3b293f9
--- /dev/null
+++ b/projects/documentation/src/app/pages/savebar/savebar.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { SavebarApiPage } from './pages/api/savebar-api.page';
+import { SavebarCodeGenerationPage } from './pages/code-generation/savebar-code-generation.page';
+import { SavebarOverviewPage } from './pages/overview/savebar-overview.page';
+
+@NgModule({
+  declarations: [SavebarApiPage, SavebarCodeGenerationPage, SavebarOverviewPage],
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: SavebarOverviewPage },
+          { path: 'api', component: SavebarApiPage },
+          { path: 'code-generation', component: SavebarCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'Savebar' }],
+})
+export class SavebarModule {}
diff --git a/projects/documentation/src/app/pages/select/pages/api/select-api.page.html b/projects/documentation/src/app/pages/select/pages/api/select-api.page.html
new file mode 100644
index 00000000..c5f7825a
--- /dev/null
+++ b/projects/documentation/src/app/pages/select/pages/api/select-api.page.html
@@ -0,0 +1 @@
+<p>select-api works!</p>
diff --git a/projects/documentation/src/app/pages/select/pages/api/select-api.page.scss b/projects/documentation/src/app/pages/select/pages/api/select-api.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/select/pages/api/select-api.page.ts b/projects/documentation/src/app/pages/select/pages/api/select-api.page.ts
new file mode 100644
index 00000000..b170717d
--- /dev/null
+++ b/projects/documentation/src/app/pages/select/pages/api/select-api.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-select-api',
+  templateUrl: './select-api.page.html',
+  styleUrls: ['./select-api.page.scss'],
+})
+export class SelectApiPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/select/pages/code-generation/select-code-generation.page.html b/projects/documentation/src/app/pages/select/pages/code-generation/select-code-generation.page.html
new file mode 100644
index 00000000..afaeb440
--- /dev/null
+++ b/projects/documentation/src/app/pages/select/pages/code-generation/select-code-generation.page.html
@@ -0,0 +1 @@
+<p>select-code-generation works!</p>
diff --git a/projects/documentation/src/app/pages/select/pages/code-generation/select-code-generation.page.scss b/projects/documentation/src/app/pages/select/pages/code-generation/select-code-generation.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/select/pages/code-generation/select-code-generation.page.ts b/projects/documentation/src/app/pages/select/pages/code-generation/select-code-generation.page.ts
new file mode 100644
index 00000000..1e5c64e8
--- /dev/null
+++ b/projects/documentation/src/app/pages/select/pages/code-generation/select-code-generation.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-select-code-generation',
+  templateUrl: './select-code-generation.page.html',
+  styleUrls: ['./select-code-generation.page.scss'],
+})
+export class SelectCodeGenerationPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/select/pages/overview/select-overview.page.html b/projects/documentation/src/app/pages/select/pages/overview/select-overview.page.html
new file mode 100644
index 00000000..cbe8db03
--- /dev/null
+++ b/projects/documentation/src/app/pages/select/pages/overview/select-overview.page.html
@@ -0,0 +1 @@
+<p>select-overview works!</p>
diff --git a/projects/documentation/src/app/pages/select/pages/overview/select-overview.page.scss b/projects/documentation/src/app/pages/select/pages/overview/select-overview.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/select/pages/overview/select-overview.page.ts b/projects/documentation/src/app/pages/select/pages/overview/select-overview.page.ts
new file mode 100644
index 00000000..052f0f83
--- /dev/null
+++ b/projects/documentation/src/app/pages/select/pages/overview/select-overview.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-select-overview',
+  templateUrl: './select-overview.page.html',
+  styleUrls: ['./select-overview.page.scss'],
+})
+export class SelectOverviewPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/select/select.module.ts b/projects/documentation/src/app/pages/select/select.module.ts
new file mode 100644
index 00000000..8b0ee161
--- /dev/null
+++ b/projects/documentation/src/app/pages/select/select.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { SelectApiPage } from './pages/api/select-api.page';
+import { SelectCodeGenerationPage } from './pages/code-generation/select-code-generation.page';
+import { SelectOverviewPage } from './pages/overview/select-overview.page';
+
+@NgModule({
+  declarations: [SelectApiPage, SelectCodeGenerationPage, SelectOverviewPage],
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: SelectOverviewPage },
+          { path: 'api', component: SelectApiPage },
+          { path: 'code-generation', component: SelectCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'Select' }],
+})
+export class SelectModule {}
diff --git a/projects/documentation/src/app/pages/slider/pages/api/slider-api.page.html b/projects/documentation/src/app/pages/slider/pages/api/slider-api.page.html
new file mode 100644
index 00000000..846fcef2
--- /dev/null
+++ b/projects/documentation/src/app/pages/slider/pages/api/slider-api.page.html
@@ -0,0 +1 @@
+<p>slider-api works!</p>
diff --git a/projects/documentation/src/app/pages/slider/pages/api/slider-api.page.scss b/projects/documentation/src/app/pages/slider/pages/api/slider-api.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/slider/pages/api/slider-api.page.ts b/projects/documentation/src/app/pages/slider/pages/api/slider-api.page.ts
new file mode 100644
index 00000000..cf450701
--- /dev/null
+++ b/projects/documentation/src/app/pages/slider/pages/api/slider-api.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-slider-api',
+  templateUrl: './slider-api.page.html',
+  styleUrls: ['./slider-api.page.scss'],
+})
+export class SliderApiPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/slider/pages/code-generation/slider-code-generation.page.html b/projects/documentation/src/app/pages/slider/pages/code-generation/slider-code-generation.page.html
new file mode 100644
index 00000000..a5fb2617
--- /dev/null
+++ b/projects/documentation/src/app/pages/slider/pages/code-generation/slider-code-generation.page.html
@@ -0,0 +1 @@
+<p>slider-code-generation works!</p>
diff --git a/projects/documentation/src/app/pages/slider/pages/code-generation/slider-code-generation.page.scss b/projects/documentation/src/app/pages/slider/pages/code-generation/slider-code-generation.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/slider/pages/code-generation/slider-code-generation.page.ts b/projects/documentation/src/app/pages/slider/pages/code-generation/slider-code-generation.page.ts
new file mode 100644
index 00000000..5841f2e3
--- /dev/null
+++ b/projects/documentation/src/app/pages/slider/pages/code-generation/slider-code-generation.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-slider-code-generation',
+  templateUrl: './slider-code-generation.page.html',
+  styleUrls: ['./slider-code-generation.page.scss'],
+})
+export class SliderCodeGenerationPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/slider/pages/overview/slider-overview.page.html b/projects/documentation/src/app/pages/slider/pages/overview/slider-overview.page.html
new file mode 100644
index 00000000..2b200ef6
--- /dev/null
+++ b/projects/documentation/src/app/pages/slider/pages/overview/slider-overview.page.html
@@ -0,0 +1 @@
+<p>slider-overview works!</p>
diff --git a/projects/documentation/src/app/pages/slider/pages/overview/slider-overview.page.scss b/projects/documentation/src/app/pages/slider/pages/overview/slider-overview.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/slider/pages/overview/slider-overview.page.ts b/projects/documentation/src/app/pages/slider/pages/overview/slider-overview.page.ts
new file mode 100644
index 00000000..ff43343b
--- /dev/null
+++ b/projects/documentation/src/app/pages/slider/pages/overview/slider-overview.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-slider-overview',
+  templateUrl: './slider-overview.page.html',
+  styleUrls: ['./slider-overview.page.scss'],
+})
+export class SliderOverviewPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/slider/slider.module.ts b/projects/documentation/src/app/pages/slider/slider.module.ts
new file mode 100644
index 00000000..56d2b8a4
--- /dev/null
+++ b/projects/documentation/src/app/pages/slider/slider.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { SliderApiPage } from './pages/api/slider-api.page';
+import { SliderCodeGenerationPage } from './pages/code-generation/slider-code-generation.page';
+import { SliderOverviewPage } from './pages/overview/slider-overview.page';
+
+@NgModule({
+  declarations: [SliderApiPage, SliderCodeGenerationPage, SliderOverviewPage],
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: SliderOverviewPage },
+          { path: 'api', component: SliderApiPage },
+          { path: 'code-generation', component: SliderCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'Slider' }],
+})
+export class SliderModule {}
diff --git a/projects/documentation/src/app/pages/table/pages/api/table-api.page.html b/projects/documentation/src/app/pages/table/pages/api/table-api.page.html
new file mode 100644
index 00000000..e52a0f91
--- /dev/null
+++ b/projects/documentation/src/app/pages/table/pages/api/table-api.page.html
@@ -0,0 +1 @@
+<p>table-api works!</p>
diff --git a/projects/documentation/src/app/pages/table/pages/api/table-api.page.scss b/projects/documentation/src/app/pages/table/pages/api/table-api.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/table/pages/api/table-api.page.ts b/projects/documentation/src/app/pages/table/pages/api/table-api.page.ts
new file mode 100644
index 00000000..486488b9
--- /dev/null
+++ b/projects/documentation/src/app/pages/table/pages/api/table-api.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-table-api',
+  templateUrl: './table-api.page.html',
+  styleUrls: ['./table-api.page.scss'],
+})
+export class TableApiPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/table/pages/code-generation/table-code-generation.page.html b/projects/documentation/src/app/pages/table/pages/code-generation/table-code-generation.page.html
new file mode 100644
index 00000000..6ffd263d
--- /dev/null
+++ b/projects/documentation/src/app/pages/table/pages/code-generation/table-code-generation.page.html
@@ -0,0 +1 @@
+<p>table-code-generation works!</p>
diff --git a/projects/documentation/src/app/pages/table/pages/code-generation/table-code-generation.page.scss b/projects/documentation/src/app/pages/table/pages/code-generation/table-code-generation.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/table/pages/code-generation/table-code-generation.page.ts b/projects/documentation/src/app/pages/table/pages/code-generation/table-code-generation.page.ts
new file mode 100644
index 00000000..3102d567
--- /dev/null
+++ b/projects/documentation/src/app/pages/table/pages/code-generation/table-code-generation.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-table-code-generation',
+  templateUrl: './table-code-generation.page.html',
+  styleUrls: ['./table-code-generation.page.scss'],
+})
+export class TableCodeGenerationPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/table/pages/overview/table-overview.page.html b/projects/documentation/src/app/pages/table/pages/overview/table-overview.page.html
new file mode 100644
index 00000000..61a83f22
--- /dev/null
+++ b/projects/documentation/src/app/pages/table/pages/overview/table-overview.page.html
@@ -0,0 +1 @@
+<p>table-overview works!</p>
diff --git a/projects/documentation/src/app/pages/table/pages/overview/table-overview.page.scss b/projects/documentation/src/app/pages/table/pages/overview/table-overview.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/table/pages/overview/table-overview.page.ts b/projects/documentation/src/app/pages/table/pages/overview/table-overview.page.ts
new file mode 100644
index 00000000..aec93f25
--- /dev/null
+++ b/projects/documentation/src/app/pages/table/pages/overview/table-overview.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-table-overview',
+  templateUrl: './table-overview.page.html',
+  styleUrls: ['./table-overview.page.scss'],
+})
+export class TableOverviewPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/table/table.module.ts b/projects/documentation/src/app/pages/table/table.module.ts
new file mode 100644
index 00000000..39ef0c56
--- /dev/null
+++ b/projects/documentation/src/app/pages/table/table.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { TableApiPage } from './pages/api/table-api.page';
+import { TableCodeGenerationPage } from './pages/code-generation/table-code-generation.page';
+import { TableOverviewPage } from './pages/overview/table-overview.page';
+
+@NgModule({
+  declarations: [TableApiPage, TableCodeGenerationPage, TableOverviewPage],
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: TableOverviewPage },
+          { path: 'api', component: TableApiPage },
+          { path: 'code-generation', component: TableCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'Table' }],
+})
+export class TableModule {}
diff --git a/projects/documentation/src/app/pages/view/pages/api/view-api.page.html b/projects/documentation/src/app/pages/view/pages/api/view-api.page.html
new file mode 100644
index 00000000..4cdf7d99
--- /dev/null
+++ b/projects/documentation/src/app/pages/view/pages/api/view-api.page.html
@@ -0,0 +1 @@
+<p>view-api works!</p>
diff --git a/projects/documentation/src/app/pages/view/pages/api/view-api.page.scss b/projects/documentation/src/app/pages/view/pages/api/view-api.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/view/pages/api/view-api.page.ts b/projects/documentation/src/app/pages/view/pages/api/view-api.page.ts
new file mode 100644
index 00000000..2a427282
--- /dev/null
+++ b/projects/documentation/src/app/pages/view/pages/api/view-api.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-view-api',
+  templateUrl: './view-api.page.html',
+  styleUrls: ['./view-api.page.scss'],
+})
+export class ViewApiPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/view/pages/code-generation/view-code-generation.page.html b/projects/documentation/src/app/pages/view/pages/code-generation/view-code-generation.page.html
new file mode 100644
index 00000000..de0b9bcf
--- /dev/null
+++ b/projects/documentation/src/app/pages/view/pages/code-generation/view-code-generation.page.html
@@ -0,0 +1 @@
+<p>view-code-generation works!</p>
diff --git a/projects/documentation/src/app/pages/view/pages/code-generation/view-code-generation.page.scss b/projects/documentation/src/app/pages/view/pages/code-generation/view-code-generation.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/view/pages/code-generation/view-code-generation.page.ts b/projects/documentation/src/app/pages/view/pages/code-generation/view-code-generation.page.ts
new file mode 100644
index 00000000..e9498685
--- /dev/null
+++ b/projects/documentation/src/app/pages/view/pages/code-generation/view-code-generation.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-view-code-generation',
+  templateUrl: './view-code-generation.page.html',
+  styleUrls: ['./view-code-generation.page.scss'],
+})
+export class ViewCodeGenerationPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/view/pages/overview/view-overview.page.html b/projects/documentation/src/app/pages/view/pages/overview/view-overview.page.html
new file mode 100644
index 00000000..1b242568
--- /dev/null
+++ b/projects/documentation/src/app/pages/view/pages/overview/view-overview.page.html
@@ -0,0 +1 @@
+<p>view-overview works!</p>
diff --git a/projects/documentation/src/app/pages/view/pages/overview/view-overview.page.scss b/projects/documentation/src/app/pages/view/pages/overview/view-overview.page.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/documentation/src/app/pages/view/pages/overview/view-overview.page.ts b/projects/documentation/src/app/pages/view/pages/overview/view-overview.page.ts
new file mode 100644
index 00000000..749e251d
--- /dev/null
+++ b/projects/documentation/src/app/pages/view/pages/overview/view-overview.page.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-view-overview',
+  templateUrl: './view-overview.page.html',
+  styleUrls: ['./view-overview.page.scss'],
+})
+export class ViewOverviewPage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/documentation/src/app/pages/view/view.module.ts b/projects/documentation/src/app/pages/view/view.module.ts
new file mode 100644
index 00000000..45cfa24e
--- /dev/null
+++ b/projects/documentation/src/app/pages/view/view.module.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComponentPageWrapperComponent, COMPONENT_CAPTION } from '../../components/component-page-wrapper/component-page-wrapper.component';
+import { ComponentPageWrapperModule } from '../../components/component-page-wrapper/component-page-wrapper.module';
+import { ViewApiPage } from './pages/api/view-api.page';
+import { ViewCodeGenerationPage } from './pages/code-generation/view-code-generation.page';
+import { ViewOverviewPage } from './pages/overview/view-overview.page';
+
+@NgModule({
+  declarations: [ViewApiPage, ViewCodeGenerationPage, ViewOverviewPage],
+  imports: [
+    CommonModule,
+    ComponentPageWrapperModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ComponentPageWrapperComponent,
+        children: [
+          { path: '', redirectTo: 'overview' },
+          { path: 'overview', component: ViewOverviewPage },
+          { path: 'api', component: ViewApiPage },
+          { path: 'code-generation', component: ViewCodeGenerationPage },
+        ],
+      },
+    ]),
+  ],
+  providers: [{ provide: COMPONENT_CAPTION, useValue: 'View' }],
+})
+export class ViewModule {}
diff --git a/scripts/generate-documentation-module.js b/scripts/generate-documentation-module.js
new file mode 100644
index 00000000..5169e10e
--- /dev/null
+++ b/scripts/generate-documentation-module.js
@@ -0,0 +1,3 @@
+const {exec} = require('child_process');
+const name = process.argv[2];
+exec(`ng g module pages/${name} --project documentation && ng g component pages/${name}/pages/api/${name}-api --skip-tests true --flat true --type page --project documentation && ng g component pages/${name}/pages/code-generation/${name}-code-generation --skip-tests true --flat true --type page --project documentation && ng g component pages/${name}/pages/overview/${name}-overview --skip-tests true --flat true --type page --project documentation`);