Merge pull request 'Add contact email link.' (#15) from feature/contact-email into main

Reviewed-on: #15

.drone.yml

@@ -0,0 +1,12 @@
+kind: pipeline
+type: docker
+name: default
+
+steps:
+  - name: install
+    image: node:20-alpine
+    commands:
+      - apk add firefox
+      - npm install
+      - npm run test:ci
+      - npm run build

.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -1,10 +1,42 @@
-*~
-.idea/
-*.iml
-atlassian-ide-plugin.xml
-node_modules/
-typings/
-src/**/*.js
-src/**/*.js.map
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
 npm-debug.log
-dist/
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/tasks.json
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

.gitlab-ci.yml

@@ -1,57 +0,0 @@
-stages:
-  - build
-  - cleanup_build
-  - deploy
-  - cleanup
-
-build_job:
-  stage: build
-  script:
-    - npm install
-    - npm run build
-    - npm run test
-  tags:
-    - javascript
-  except:
-    - tags
-  artifacts:
-    paths:
-      - dist
-    expire_in: 30 min
-
-cleanup_build_job:
-  stage: cleanup_build
-  script:
-    - rm -rf node_modules
-    - rm -rf dist
-  when: on_failure
-
-pages:
-  stage: deploy
-  environment: staging
-  except:
-    - tags
-    - master
-  script:
-    - mv dist public
-  artifacts:
-    paths:
-      - public
-  dependencies:
-    - build_job
-
-production:
-  stage: deploy
-  environment: production
-  only:
-    - master
-  script:
-    - if [[ -z "${WWW_DEPLOY_ROOT_PRODUCTION}" ]] ; then echo "WWW_DEPLOY_ROOT_PRODUCTION is not set" ; exit 1 ; fi
-    - if [[ ! -d "${WWW_DEPLOY_ROOT_PRODUCTION}" ]] ; then mkdir -p "${WWW_DEPLOY_ROOT_PRODUCTION}" || die "Failed to create target directory for deployment!" ; fi
-    - cp -r dist/* "${WWW_DEPLOY_ROOT_PRODUCTION}"
-
-cleanup_job:
-  stage: cleanup
-  script:
-    - rm -rf node_modules
-  when: always

README.md

@@ -1,9 +1,38 @@
-# conv.friedli.info - Convert whatever you want!
+# Convertorizr - Convert whatever you want!
 
-This is a short introduction to the awesome converter hosted at [https://conv.friedli.info/].
+This is a short introduction to the awesome Convertorizr hosted at https://conv.friedli.info/.
 
-Deployment is automated with Gitlab CI. Usage is self-explanatory. What else do you need to know?
+Continuous integration is automated with Drone CI ([![Build Status](https://ci.gittr.ch/api/badges/manuel/converter/status.svg?ref=refs/heads/main)](https://ci.gittr.ch/manuel/converter)). Usage is self-explanatory. What else do you need to know?
 
-Contact the author at manuel-conv.friedli.info|at|fritteli.ch.
+The source code is hosted at https://gittr.ch/manuel/converter.git.
+Contact the author at manuel|at|fritteli.ch.
 
 Cheers!
+
+# Technical stuff
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.0.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

angular.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "convertorizr": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/convertorizr",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.svg",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "convertorizr:build:production"
+            },
+            "development": {
+              "buildTarget": "convertorizr:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "convertorizr:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.svg",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": [],
+            "karmaConfig": "karma.conf.js"
+          }
+        }
+      }
+    }
+  }
+}

config/helpers.js

@@ -1,7 +0,0 @@
-var path = require('path');
-var _root = path.resolve(__dirname, '..');
-function root(args) {
-    args = Array.prototype.slice.call(arguments, 0);
-    return path.join.apply(path, [_root].concat(args));
-}
-exports.root = root;

config/karma-test-shim.js

@@ -1,21 +0,0 @@
-Error.stackTraceLimit = Infinity;
-
-require('core-js/es6');
-require('core-js/es7/reflect');
-
-require('zone.js/dist/zone');
-require('zone.js/dist/long-stack-trace-zone');
-require('zone.js/dist/proxy');
-require('zone.js/dist/sync-test');
-require('zone.js/dist/jasmine-patch');
-require('zone.js/dist/async-test');
-require('zone.js/dist/fake-async-test');
-
-var appContext = require.context('../src', true, /\.spec\.ts/);
-
-appContext.keys().forEach(appContext);
-
-var testing = require('@angular/core/testing');
-var browser = require('@angular/platform-browser-dynamic/testing');
-
-testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

config/karma.conf.js

@@ -1,44 +0,0 @@
-var webpackConfig = require('./webpack.test');
-
-module.exports = function (config) {
-    var _config = {
-        basePath: '',
-
-        frameworks: ['jasmine'],
-
-        files: [
-            {
-                pattern: './config/karma-test-shim.js',
-                watched: false
-            }
-        ],
-
-        preprocessors: {
-            './config/karma-test-shim.js': ['webpack', 'sourcemap']
-        },
-
-        webpack: webpackConfig,
-
-        webpackMiddleware: {
-            stats: 'errors-only'
-        },
-
-        webpackServer: {
-            noInfo: true
-        },
-
-        reporters: ['kjhtml'],
-        port: 9876,
-        colors: true,
-        logLevel: config.LOG_INFO,
-        autoWatch: false,
-        browsers: ['PhantomJS'],
-        singleRun: true,
-        phantomjsLauncher: {
-            // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom) 
-            exitOnResourceError: true
-        }
-    };
-
-    config.set(_config);
-};

config/webpack.common.js

@@ -1,76 +0,0 @@
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var helpers = require('./helpers');
-
-module.exports = {
-    entry: {
-        'polyfills': './src/polyfills.ts',
-        'vendor': './src/vendor.ts',
-        'app': './src/main.ts'
-    },
-
-    resolve: {
-        extensions: ['.ts', '.js']
-    },
-
-    module: {
-        rules: [
-            {
-                test: /\.ts$/,
-                loaders: [
-                    {
-                        loader: 'awesome-typescript-loader',
-                        options: {
-                            configFileName: helpers.root('src', 'tsconfig.json')
-                        }
-                    },
-                    'angular2-template-loader'
-                ]
-            },
-            {
-                test: /\.html$/,
-                use: 'html-loader'
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-                use: 'file-loader?name=assets/[name].[hash].[ext]'
-            },
-            {
-                test: /\.css$/,
-                exclude: helpers.root('src', 'app'),
-                use: ExtractTextPlugin.extract({
-                    fallback: 'style-loader',
-                    use: 'css-loader?sourceMap'
-                })
-            },
-            {
-                test: /\.css$/,
-                include: helpers.root('src', 'app'),
-                use: 'raw-loader'
-            }
-        ]
-    },
-
-    plugins: [
-        // Workaround for angular/angular#11580
-        new webpack.ContextReplacementPlugin(
-            // The (\\|\/) piece accounts for path separators in *nix and Windows
-            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
-            helpers.root('./src'), // location of your src
-            {} // a map of your routes
-        ),
-
-        new webpack.optimize.CommonsChunkPlugin({
-            name: ['app', 'vendor', 'polyfills']
-        }),
-
-        new HtmlWebpackPlugin({
-            template: 'src/index.html'
-        }),
-
-        new webpack.optimize.UglifyJsPlugin({
-            comments: false
-        })
-    ]
-};

config/webpack.dev.js

@@ -1,24 +0,0 @@
-var webpackMerge = require('webpack-merge');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var commonConfig = require('./webpack.common.js');
-var helpers = require('./helpers');
-
-module.exports = webpackMerge(commonConfig, {
-    devtool: 'cheap-module-eval-source-map',
-
-    output: {
-        path: helpers.root('dist'),
-        publicPath: 'http://localhost:8080/',
-        filename: '[name].js',
-        chunkFilename: '[id].chunk.js'
-    },
-
-    plugins: [
-        new ExtractTextPlugin('[name].css')
-    ],
-
-    devServer: {
-        historyApiFallback: true,
-        stats: 'minimal'
-    }
-});

config/webpack.prod.js

@@ -1,38 +0,0 @@
-var webpack = require('webpack');
-var webpackMerge = require('webpack-merge');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var commonConfig = require('./webpack.common.js');
-var helpers = require('./helpers');
-
-const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
-
-module.exports = webpackMerge(commonConfig, {
-    devtool: 'source-map',
-
-    output: {
-        path: helpers.root('dist'),
-        publicPath: '',
-        filename: '[name].[hash].js',
-        chunkFilename: '[id].[hash].chunk.js'
-    },
-
-    plugins: [
-        new webpack.NoEmitOnErrorsPlugin(),
-        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
-            mangle: {
-                keep_fnames: true
-            }
-        }),
-        new ExtractTextPlugin('[name].[hash].css'),
-        new webpack.DefinePlugin({
-            'process.env': {
-                'ENV': JSON.stringify(ENV)
-            }
-        }),
-        new webpack.LoaderOptionsPlugin({
-            htmlLoader: {
-                minimize: false // workaround for ng2
-            }
-        })
-    ]
-});

config/webpack.test.js

@@ -1,52 +0,0 @@
-var webpack = require('webpack');
-var helpers = require('./helpers');
-
-module.exports = {
-    devtool: 'inline-source-map',
-
-    resolve: {
-        extensions: ['.ts', '.js']
-    },
-
-    module: {
-        rules: [
-            {
-                test: /\.ts$/,
-                loaders: [
-                    {
-                        loader: 'awesome-typescript-loader',
-                        options: {configFileName: helpers.root('src', 'tsconfig.json')}
-                    }, 'angular2-template-loader'
-                ]
-            },
-            {
-                test: /\.html$/,
-                loader: 'html-loader'
-
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-                loader: 'null-loader'
-            },
-            {
-                test: /\.css$/,
-                exclude: helpers.root('src', 'app'),
-                loader: 'null-loader'
-            },
-            {
-                test: /\.css$/,
-                include: helpers.root('src', 'app'),
-                loader: 'raw-loader'
-            }
-        ]
-    },
-
-    plugins: [
-        new webpack.ContextReplacementPlugin(
-            // The (\\|\/) piece accounts for path separators in *nix and Windows
-            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
-            helpers.root('./src'), // location of your src
-            {} // a map of your routes
-        )
-    ]
-};

karma.conf.js

@@ -1 +1,40 @@
-module.exports = require('./config/karma.conf.js');
+// 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-firefox-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/convertorizr'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    browsers: ['Firefox'],
+    restartOnFileChange: true
+  });
+};

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "conv.friedli.info",
-  "version": "1.0.0",
-  "description": "Decode or encode base64, punycode, HTML entities, URI components ...",
+  "name": "convertorizr",
+  "version": "2.0.1-dev.0",
+  "description": "Decode or encode base64, punycode, HTML entities, URI components, ...",
   "keywords": [
     "encode",
     "decode",
@@ -14,58 +14,52 @@
     "email": "manuel@fritteli.ch"
   },
   "license": "MIT",
-  "homepage": "https://manuel.pages.gittr.ch/dencode.org",
+  "homepage": "https://conv.friedli.info/",
   "repository": {
     "type": "git",
-    "url": "https://gittr.ch/manuel/dencode.org.git"
-  },
-  "dependencies": {
-    "@angular/common": "^2.4.0",
-    "@angular/compiler": "^2.4.0",
-    "@angular/core": "^2.4.0",
-    "@angular/forms": "^2.4.0",
-    "@angular/platform-browser": "^2.4.0",
-    "@angular/platform-browser-dynamic": "^2.4.0",
-    "core-js": "^2.4.1",
-    "rxjs": "^5.0.1",
-    "zone.js": "^0.7.4",
-    "bootstrap": "^3.3.0",
-    "quoted-printable": "^1.0.0",
-    "utf8": "^2.1.0",
-    "punycode": "^1.4.0"
-  },
-  "devDependencies": {
-    "@types/jasmine": "2.5.36",
-    "@types/node": "^6.0.45",
-    "angular2-template-loader": "^0.6.0",
-    "awesome-typescript-loader": "^3.0.4",
-    "css-loader": "^0.26.1",
-    "extract-text-webpack-plugin": "^2.0.0",
-    "file-loader": "^0.9.0",
-    "html-loader": "^0.4.3",
-    "html-webpack-plugin": "^2.16.1",
-    "jasmine-core": "^2.4.1",
-    "karma": "^1.2.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-firefox-launcher": "^1.0.1",
-    "karma-jasmine": "^1.0.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-phantomjs-launcher": "^1.0.4",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.1",
-    "null-loader": "^0.1.1",
-    "phantomjs-prebuilt": "^2.1.14",
-    "raw-loader": "^0.5.1",
-    "rimraf": "^2.5.2",
-    "style-loader": "^0.13.1",
-    "typescript": "^2.0.10",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.4.1",
-    "webpack-merge": "^3.0.0"
+    "url": "https://gittr.ch/manuel/converter.git"
   },
   "scripts": {
-    "start": "webpack-dev-server --inline --progress --port 8080",
-    "test": "karma start",
-    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test --browsers=Chromium,Firefox",
+    "test:ci": "ng test --no-watch --no-progress --browsers=FirefoxHeadless"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.1.0",
+    "@angular/common": "^17.1.0",
+    "@angular/compiler": "^17.1.0",
+    "@angular/core": "^17.1.0",
+    "@angular/forms": "^17.1.0",
+    "@angular/platform-browser": "^17.1.0",
+    "@angular/platform-browser-dynamic": "^17.1.0",
+    "@angular/router": "^17.1.0",
+    "punycode": "^2.3.1",
+    "quoted-printable": "^1.0.1",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "utf8": "^3.0.0",
+    "zone.js": "~0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.1.0",
+    "@angular/cli": "^17.1.0",
+    "@angular/compiler-cli": "^17.1.0",
+    "@types/jasmine": "~5.1.0",
+    "@types/node": "^20.11.5",
+    "@types/punycode": "^2.1.3",
+    "@types/quoted-printable": "^1.0.2",
+    "@types/utf8": "^3.0.3",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-firefox-launcher": "^2.1.2",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.3.2"
   }
 }

src/app/app.component.css

@@ -1,118 +0,0 @@
-.inputwrapper {
-    font-family: "ABeeZee", sans-serif;
-    margin: 0 1em 1em 1em;
-}
-
-.textwrapper {
-    margin: 0 0 1em 0;
-    padding: 0 1em 0 0;
-}
-
-.arrow_box {
-    position: relative;
-    background: #fff;
-    border: 1px solid #aaa;
-}
-
-.arrow_box:focus {
-    border-color: #888;
-}
-
-.arrow_box:hover {
-    border-color: #333;
-}
-
-.arrow_box:after, .arrow_box:before {
-    top: 100%;
-    left: 50%;
-    border: solid transparent;
-    content: " ";
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-}
-
-.arrow_box:after {
-    border-color: rgba(255, 255, 255, 0);
-    border-top-color: #fff;
-    border-width: 1em;
-    margin-left: -1em;
-}
-
-.arrow_box:before {
-    border-color: rgba(170, 170, 170, 0);
-    border-top-color: #aaa;
-    border-width: calc(1em + 1px);
-    margin-left: calc(-1em - 1px);
-}
-
-.arrow_box:focus:before {
-    border-color: rgba(136, 136, 136, 0);
-    border-top-color: #888;
-}
-
-.arrow_box:hover:before {
-    border-color: rgba(51, 51, 51, 0);
-    border-top-color: #333;
-}
-
-.selectwrapper > .arrow_box {
-    display: inline-block;
-}
-
-.textinput {
-    background-color: #fff;
-    border: none;
-    color: #000;
-    font-family: "Free Monospaced", monospace;
-    height: 10em;
-    margin: 0;
-    padding: 0.5em;
-    resize: vertical;
-    width: 100%;
-}
-
-.textinput:focus {
-    border-color: #888;
-}
-
-.textinput:hover {
-    border-color: #333;
-}
-
-.selectwrapper {
-    margin: 0 0 1em 0;
-    padding: 0;
-    text-align: center;
-}
-
-.select {
-    background-color: #fff;
-    border: none;
-    color: #000;
-    font-family: "ABeeZee", sans-serif;
-    margin: 0;
-    padding: 0.5em;
-}
-
-.option {
-    /*    font-family: "ABeeZee", sans-serif;*/
-}
-
-.selectwrapper.error > .arrow_box {
-    border-color: red;
-}
-
-.selectwrapper.error > .arrow_box:before {
-    border-top-color: red;
-}
-
-.selectwrapper.error select {
-    color: red;
-}
-
-.errormessage {
-    color: red;
-    text-align: center;
-}

src/app/app.component.html

@@ -1,16 +1,10 @@
-<div *ngFor="let step of steps" class="inputwrapper">
-    <div class="textwrapper arrow_box">
-        <textarea class="textinput" (keyup)="update(step)" placeholder="Please enter your input ..."
-                  [(ngModel)]="step.content">{{step.content}}</textarea>
-    </div>
-    <div [ngClass]="{selectwrapper: true, error: step.error}">
-        <div class="arrow_box">
-            <select class="select" (change)="convert(step, $event)">
-                <option id="undefined">Select conversion ...</option>
-                <option class="option" *ngFor="let c of converters" id="{{c.getId()}}">{{c.getDisplayname()}}
-                </option>
-            </select>
-        </div>
-    </div>
-    <div class="errormessage" *ngIf="step.error">{{step.message}}</div>
-</div>
+@for (step of steps; track step.index) {
+  <div class="inputwrapper">
+    <app-text-input-field [step]="step" #ti></app-text-input-field>
+    <app-converter-selector [step]="step" [textInput]="ti"></app-converter-selector>
+    <app-error-message [step]="step"></app-error-message>
+  </div>
+}
+<app-version></app-version>
+<div class="contact">Wanna say something? <a href="mailto:manuel@fritteli.ch?subject=Contact%20via%20Convertorizr">Tell me!</a></div>
+<!--<router-outlet></router-outlet>-->

src/app/app.component.scss

@@ -0,0 +1,10 @@
+.contact {
+  font-size: small;
+  margin-right: 2em;
+  text-align: right;
+}
+
+.inputwrapper {
+  font-family: "ABeeZee", sans-serif;
+  margin: 0 1em 1em 1em;
+}

src/app/app.component.spec.ts

@@ -1,16 +1,26 @@
-import {TestBed} from "@angular/core/testing";
-import {AppComponent} from "./app.component";
-import {FormsModule} from "@angular/forms";
+import {AppComponent} from './app.component';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Step} from './step';
 
-describe('App', () => {
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            declarations: [AppComponent],
-            imports: [FormsModule]
-        });
-    });
-    it('should work', () => {
-        let fixture = TestBed.createComponent(AppComponent);
-        expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
-    });
-});
+describe('AppComponent', () => {
+  let sut: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+  const firstStep: Step = new Step(0);
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppComponent);
+    sut = fixture.componentInstance;
+  });
+
+  it('should create the app', () => {
+    // const fixture = TestBed.createComponent(AppComponent);
+    expect(sut).toBeTruthy();
+  });
+});

src/app/app.component.ts

@@ -1,61 +1,33 @@
-import {Component, OnInit} from "@angular/core";
-import {ConverterRegistryService} from "./converterregistry.service";
-import {InputComponentManagerService} from "./inputcomponentmanager.service";
-import {Converter} from "./converter/converter";
-import {NativeLibraryWrapperService} from "./nativelibrarywrapper.service";
-import {Step} from "./step";
-import "../assets/css/style.css";
+import {Component, OnInit} from '@angular/core';
+import {InputComponentManagerService} from './input-component-manager.service';
+import {Step} from './step';
+import {RouterOutlet} from '@angular/router';
+import {TextInputFieldComponent} from './text-input-field/text-input-field.component';
+import {ConverterSelectorComponent} from './converter-selector/converter-selector.component';
+import {ErrorMessageComponent} from './error-message/error-message.component';
+import {VersionComponent} from './version/version.component';
 
 @Component({
-    selector: "den-app",
-    templateUrl: "./app.component.html",
-    styleUrls: ["./app.component.css"],
-    providers: [ConverterRegistryService, InputComponentManagerService, NativeLibraryWrapperService]
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    ConverterSelectorComponent,
+    ErrorMessageComponent,
+    RouterOutlet,
+    TextInputFieldComponent,
+    VersionComponent
+  ],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
 })
-export class AppComponent extends OnInit {
-    public steps:Step[] = [];
-    public converters:Converter[] = [];
+export class AppComponent implements OnInit {
+  public steps: Step[] = [];
 
-    constructor(private converterRegistryService:ConverterRegistryService, private inputComponentManagerService:InputComponentManagerService) {
-        super();
-    }
+  constructor(private inputComponentManagerService: InputComponentManagerService) {
+  }
 
-    convert(step:Step, $event:any):void {
-        step.selectedConverter = this.converterRegistryService.getConverter($event.target.selectedOptions[0].id);
-        this.update(step);
-    }
-
-    update(step:Step):void {
-        let converter:Converter = step.selectedConverter;
-
-        if (converter !== undefined) {
-            let content:string = step.content;
-            let result:string;
-            try {
-                result = converter.convert(content);
-            } catch (error) {
-                if (typeof console === "object" && typeof console.log === "function") {
-                    console.log(error);
-                }
-                step.message = error.message;
-                step.error = true;
-                result = null;
-            }
-            if (result !== null) {
-                step.message = "";
-                step.error = false;
-                if (result !== "") {
-                    let nextComponent:Step = this.inputComponentManagerService.getNext(step);
-                    nextComponent.content = result;
-                    this.update(nextComponent);
-                }
-            }
-        }
-    }
-
-    ngOnInit():void {
-        this.converters = this.converterRegistryService.getAllConverters();
-        this.steps = this.inputComponentManagerService.getAllComponents();
-        this.inputComponentManagerService.getFirst();
-    }
+  ngOnInit(): void {
+    this.steps = this.inputComponentManagerService.getAllComponents();
+    this.inputComponentManagerService.getFirst();
+  }
 }

src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)]
+};

src/app/app.module.ts

@@ -1,17 +0,0 @@
-import {NgModule} from "@angular/core";
-import {BrowserModule} from "@angular/platform-browser";
-import {FormsModule} from "@angular/forms";
-import {AppComponent} from "./app.component";
-
-@NgModule({
-    imports: [
-        BrowserModule,
-        FormsModule
-    ],
-    declarations: [
-        AppComponent
-    ],
-    bootstrap: [AppComponent]
-})
-export class AppModule {
-}

src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

src/app/converter-registry.service.spec.ts

@@ -0,0 +1,40 @@
+import {inject, TestBed} from '@angular/core/testing';
+
+import {ConverterRegistryService} from './converter-registry.service';
+import {NativeLibraryWrapperService} from './native-library-wrapper.service';
+import {Converter} from './converter/converter';
+import {Base64Decoder} from './converter/base64-decoder';
+import createSpyObj = jasmine.createSpyObj;
+
+describe('ConverterRegistryService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        ConverterRegistryService,
+        {provide: NativeLibraryWrapperService, useValue: createSpyObj(['punycode', 'quotedPrintable', 'utf8'])}
+      ]
+    });
+  });
+
+  it('should be created', inject([ConverterRegistryService], (service: ConverterRegistryService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should register converters upon creation', inject([ConverterRegistryService], (service: ConverterRegistryService) => {
+    expect(service.getAllConverters()).toBeTruthy();
+    expect(service.getAllConverters().length).toBeGreaterThan(0);
+  }));
+
+  it('must not allow the same converter ID to be regisgered more than once',
+    inject([ConverterRegistryService], (service: ConverterRegistryService) => {
+      // arrange
+      const duplicateConverter: Converter = new Base64Decoder();
+      const duplicateConverterId = duplicateConverter.getId();
+      expect(() => {
+        // act
+        (service as any).registerConverter(duplicateConverter);
+      })
+      // assert
+        .toThrowError(`Converter-ID ${duplicateConverterId} is already registered!`);
+    }));
+});

src/app/converter-registry.service.ts

@@ -0,0 +1,72 @@
+import {Base64Decoder} from './converter/base64-decoder';
+import {Base64Encoder} from './converter/base64-encoder';
+import {BinToDecConverter} from './converter/bin-to-dec-converter';
+import {Converter} from './converter/converter';
+import {DecToBinConverter} from './converter/dec-to-bin-converter';
+import {DecToHexConverter} from './converter/dec-to-hex-converter';
+import {HexToDecConverter} from './converter/hex-to-dec-converter';
+import {HTMLEntitiesDecoder} from './converter/htmlentities-decoder';
+import {HTMLEntitiesEncoder} from './converter/htmlentities-encoder';
+import {Injectable} from '@angular/core';
+import {NativeLibraryWrapperService} from './native-library-wrapper.service';
+import {PunycodeDecoder} from './converter/punycode-decoder';
+import {PunycodeEncoder} from './converter/punycode-encoder';
+import {QuotedPrintableDecoder} from './converter/quoted-printable-decoder';
+import {QuotedPrintableEncoder} from './converter/quoted-printable-encoder';
+import {ROT13Converter} from './converter/rot13-converter';
+import {URIComponentDecoder} from './converter/uricomponent-decoder';
+import {URIComponentEncoder} from './converter/uricomponent-encoder';
+import {URIDecoder} from './converter/uridecoder';
+import {URIEncoder} from './converter/uriencoder';
+import {UTF8Decoder} from './converter/utf8-decoder';
+import {UTF8Encoder} from './converter/utf8-encoder';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConverterRegistryService {
+  private converters: Converter[] = [];
+
+  constructor(private wrapper: NativeLibraryWrapperService) {
+    this.init();
+  }
+
+  public getAllConverters(): Converter[] {
+    return this.converters;
+  }
+
+  public getConverter(id: string): Converter | undefined {
+    return this.converters.find((converter: Converter): boolean => converter.getId() === id);
+  }
+
+  private init(): void {
+    this.registerConverter(new Base64Encoder());
+    this.registerConverter(new Base64Decoder());
+    this.registerConverter(new URIEncoder());
+    this.registerConverter(new URIDecoder());
+    this.registerConverter(new URIComponentEncoder());
+    this.registerConverter(new URIComponentDecoder());
+    this.registerConverter(new HTMLEntitiesEncoder());
+    this.registerConverter(new HTMLEntitiesDecoder());
+    this.registerConverter(new QuotedPrintableEncoder(this.wrapper));
+    this.registerConverter(new QuotedPrintableDecoder(this.wrapper));
+    this.registerConverter(new DecToHexConverter());
+    this.registerConverter(new HexToDecConverter());
+    this.registerConverter(new DecToBinConverter());
+    this.registerConverter(new BinToDecConverter());
+    this.registerConverter(new PunycodeEncoder(this.wrapper));
+    this.registerConverter(new PunycodeDecoder(this.wrapper));
+    this.registerConverter(new UTF8Encoder(this.wrapper));
+    this.registerConverter(new UTF8Decoder(this.wrapper));
+    this.registerConverter(new ROT13Converter());
+  }
+
+  private registerConverter(converter: Converter): void {
+    // Don't allow duplicate registration of the same converter id
+    if (this.converters.some((c: Converter): boolean => c.getId() === converter.getId())) {
+      throw new Error(`Converter-ID ${converter.getId()} is already registered!`);
+    }
+
+    this.converters.push(converter);
+  }
+}

src/app/converter-selector/converter-selector.component.html

@@ -0,0 +1,10 @@
+<div [ngClass]="{select_wrapper: true, error: step.error}">
+  <div class="arrow_box">
+    <select (change)="convert($event)">
+      <option id="undefined">Select conversion ...</option>
+      @for (c of converters; track c.getId()) {
+        <option id="{{c.getId()}}">{{ c.getDisplayname() }}</option>
+      }
+    </select>
+  </div>
+</div>

src/app/converter-selector/converter-selector.component.scss

@@ -0,0 +1,84 @@
+.select_wrapper {
+  margin: 0 0 1em 0;
+  padding: 0;
+  text-align: center;
+
+  &.error {
+    > .arrow_box {
+      border-color: red;
+
+      &:before {
+        border-top-color: red;
+      }
+    }
+
+    select {
+      color: red;
+      transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
+    }
+  }
+}
+
+select {
+  background-color: #222;
+  border: none;
+  color: #eee;
+  font-family: "ABeeZee", sans-serif;
+  margin: 0;
+  padding: 0.5em;
+  transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
+
+  &:focus, &:hover {
+    background-color: #333;
+    color: #fff;
+  }
+}
+
+.arrow_box {
+  border: 1px solid #888;
+  position: relative;
+  transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
+
+  &:after, &:before {
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    left: 50%;
+    pointer-events: none;
+    position: absolute;
+    top: 100%;
+    transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
+    width: 0;
+  }
+
+  &:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-top-color: #222;
+    border-width: 1em;
+    margin-left: -1em;
+  }
+
+  &:before {
+    border-top-color: #888;
+    border-width: calc(1em + 1px);
+    margin-left: calc(-1em - 1px);
+  }
+
+  &:has(>select:focus, >select:hover) {
+    &:after {
+      border-top-color: #333;
+    }
+
+    &:before {
+      border-top-color: #bbb;
+    }
+  }
+
+  &:hover {
+    border-color: #bbb;
+  }
+
+  .select_wrapper > & {
+    display: inline-block;
+  }
+}

src/app/converter-selector/converter-selector.component.spec.ts

@@ -0,0 +1,93 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ConverterSelectorComponent} from './converter-selector.component';
+import {Component, ViewChild} from '@angular/core';
+import {Step} from '../step';
+import {TextInputFieldComponent} from '../text-input-field/text-input-field.component';
+import {InputComponentManagerService} from '../input-component-manager.service';
+import {ConverterRegistryService} from '../converter-registry.service';
+import {Converter} from '../converter/converter';
+import createSpyObj = jasmine.createSpyObj;
+import SpyObj = jasmine.SpyObj;
+
+@Component({
+  template: '<app-converter-selector [step]="step" [textInput]="textInputComponent"></app-converter-selector>'
+})
+class TestHostComponent {
+  public step: Step = new Step(42);
+  public textInputComponent: TextInputFieldComponent = new TextInputFieldComponent(inputComponentManagerServiceStub);
+  @ViewChild(ConverterSelectorComponent)
+  public sutComponent!: ConverterSelectorComponent;
+}
+
+const inputComponentManagerServiceStub = createSpyObj(['getNext']);
+
+describe('ConverterSelectorComponent', () => {
+  let testHostComponent: TestHostComponent;
+  let testHostFixture: ComponentFixture<TestHostComponent>;
+
+  const converter1: SpyObj<Converter> = createSpyObj(['getId', 'getDisplayname', 'convert']);
+  const converter2: SpyObj<Converter> = createSpyObj(['getId', 'getDisplayname', 'convert']);
+  const converter3: SpyObj<Converter> = createSpyObj(['getId', 'getDisplayname', 'convert']);
+  // converter1.getId.and.returnValue('converter1');
+  converter1.getDisplayname.and.returnValue('Converter 1');
+  // converter2.getId.and.returnValue('converter2');
+  converter2.getDisplayname.and.returnValue('Converter 2');
+  // converter3.getId.and.returnValue('converter3');
+  converter3.getDisplayname.and.returnValue('Converter 3');
+  const converterRegistryServiceStub = createSpyObj(['getAllConverters', 'getConverter']);
+  converterRegistryServiceStub.getAllConverters.and.returnValue([converter1, converter2, converter3]);
+  converterRegistryServiceStub.getConverter.and.returnValue(undefined);
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ConverterSelectorComponent],
+      declarations: [
+        TestHostComponent
+      ],
+      providers: [
+        {provide: InputComponentManagerService, useValue: inputComponentManagerServiceStub},
+        {provide: ConverterRegistryService, useValue: converterRegistryServiceStub}
+      ]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    testHostFixture = TestBed.createComponent(TestHostComponent);
+    testHostComponent = testHostFixture.componentInstance;
+    testHostFixture.detectChanges();
+  });
+
+  it('should create the component', () => {
+    expect(testHostComponent.sutComponent).toBeTruthy();
+  });
+
+  it('should update the conversion when the selection changes', () => {
+    // arrange
+    // set next step
+    const nextStep: Step = new Step(99);
+    inputComponentManagerServiceStub.getNext.and.returnValue(nextStep);
+    // set up converter
+    const dummyConverter = createSpyObj(['convert']);
+    dummyConverter.convert.and.returnValue('Converted value');
+    converterRegistryServiceStub.getConverter.and.returnValue(dummyConverter);
+    // create event structure
+    const event = {target: {selectedOptions: [{id: 'The testing converter id'}]}};
+
+    // act
+    testHostComponent.sutComponent.convert(event);
+
+    // assert
+    expect(converterRegistryServiceStub.getConverter).toHaveBeenCalledWith('The testing converter id');
+    expect(nextStep.content).toEqual('Converted value');
+  });
+
+  it('should load available converters upon creation', () => {
+    const converters: Converter[] = testHostComponent.sutComponent.converters;
+    expect(converters.length).toEqual(3);
+    expect(converters[0]).toEqual(converter1);
+    expect(converters[1]).toEqual(converter2);
+    expect(converters[2]).toEqual(converter3);
+  });
+});

src/app/converter-selector/converter-selector.component.ts

@@ -0,0 +1,33 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Step} from '../step';
+import {Converter} from '../converter/converter';
+import {ConverterRegistryService} from '../converter-registry.service';
+import {TextInputFieldComponent} from '../text-input-field/text-input-field.component';
+import {CommonModule} from '@angular/common';
+
+@Component({
+  selector: 'app-converter-selector',
+  templateUrl: './converter-selector.component.html',
+  standalone: true,
+  styleUrls: ['./converter-selector.component.scss'],
+  imports: [CommonModule]
+})
+export class ConverterSelectorComponent implements OnInit {
+  @Input()
+  public step!: Step;
+  @Input()
+  textInput!: TextInputFieldComponent;
+  public converters: Converter[] = [];
+
+  constructor(private converterRegistryService: ConverterRegistryService) {
+  }
+
+  convert($event: any): void {
+    this.step.selectedConverter = this.converterRegistryService.getConverter($event.target.selectedOptions[0].id);
+    this.textInput.update(this.step);
+  }
+
+  ngOnInit() {
+    this.converters = this.converterRegistryService.getAllConverters();
+  }
+}

src/app/converter/base64-decoder.spec.ts

@@ -0,0 +1,27 @@
+import {Base64Decoder} from './base64-decoder';
+
+describe('Base64Decoder', () => {
+  let sut: Base64Decoder;
+
+  beforeEach(() => sut = new Base64Decoder());
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "base64decode"', () => {
+    expect(sut.getId()).toEqual('base64decode');
+  });
+
+  it('should decode "SGVsbG8sIFdvcmxkIQ==" to "Hello, World!"', () => {
+    expect(sut.convert('SGVsbG8sIFdvcmxkIQ==')).toEqual('Hello, World!');
+  });
+
+  it('should raise an exception on invalid input', () => {
+    expect(() => sut.convert('foo bar.')).toThrowError('Could not decode base64 string. Maybe corrupt input?');
+  });
+});

src/app/converter/base64-decoder.ts

@@ -0,0 +1,19 @@
+import {Converter} from './converter';
+
+export class Base64Decoder implements Converter {
+  getDisplayname(): string {
+    return 'Decode Base 64';
+  }
+
+  getId(): string {
+    return 'base64decode';
+  }
+
+  convert(input: string): string {
+    try {
+      return atob(input);
+    } catch (exception) {
+      throw new Error('Could not decode base64 string. Maybe corrupt input?');
+    }
+  }
+}

src/app/converter/base64-encoder.spec.ts

@@ -0,0 +1,27 @@
+import {Base64Encoder} from './base64-encoder';
+
+describe('Base64Encoder', () => {
+  let sut: Base64Encoder;
+
+  beforeEach(() => sut = new Base64Encoder());
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "base64encode"', () => {
+    expect(sut.getId()).toEqual('base64encode');
+  });
+
+  it('should encode "Oh, guete Tag!" to "T2gsIGd1ZXRlIFRhZyE="', () => {
+    expect(sut.convert('Oh, guete Tag!')).toEqual('T2gsIGd1ZXRlIFRhZyE=');
+  });
+
+  it('should raise an exception on invalid input', () => {
+    expect(() => sut.convert('€')).toThrowError(/Looks like you've got a character outside of the Latin1 range there./);
+  });
+});

src/app/converter/base64-encoder.ts

@@ -0,0 +1,22 @@
+import {Converter} from './converter';
+
+export class Base64Encoder implements Converter {
+  getDisplayname(): string {
+    return 'Encode Base 64';
+  }
+
+  getId(): string {
+    return 'base64encode';
+  }
+
+  convert(input: string): string {
+    try {
+      return btoa(input);
+    } catch (exception) {
+      console.error(exception);
+      throw new Error('Ouch! Looks like you\'ve got a character outside of the Latin1 range there. Too bad, this is not supported yet. '
+        + 'We\'re working on it and hope to be ready soon! Why don\'t you '
+        + '<a href="https://duckduckgo.com/?q=cute+kitties&iar=images">enjoy some kittens</a> meanwhile?');
+    }
+  }
+}

src/app/converter/base64decoder.ts

@@ -1,19 +0,0 @@
-import {Converter} from "./converter";
-
-export class Base64Decoder implements Converter {
-    getDisplayname():string {
-        return "Decode Base 64";
-    }
-
-    getId():string {
-        return "base64decode";
-    }
-
-    convert(input:string):string {
-        try {
-            return atob(input);
-        } catch (exception) {
-            throw new Error("Could not decode base64 string. Maybe corrupt input?");
-        }
-    }
-}

src/app/converter/base64encoder.ts

@@ -1,19 +0,0 @@
-import {Converter} from "./converter";
-
-export class Base64Encoder implements Converter {
-    getDisplayname():string {
-        return "Encode Base 64";
-    }
-
-    getId():string {
-        return "base64encode";
-    }
-
-    convert(input:string):string {
-        try {
-            return btoa(input);
-        } catch (exception) {
-            throw new Error("Could not encode base64 string. This should not happen, so why don't you just try again?");
-        }
-    }
-}

src/app/converter/bin-to-dec-converter.spec.ts

@@ -0,0 +1,27 @@
+import {BinToDecConverter} from './bin-to-dec-converter';
+
+describe('BinToDecConverter', () => {
+  let sut: BinToDecConverter;
+
+  beforeEach(() => sut = new BinToDecConverter());
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "bintodec"', () => {
+    expect(sut.getId()).toEqual('bintodec');
+  });
+
+  it('should convert "11011" to "27"', () => {
+    expect(sut.convert('11011')).toEqual('27');
+  });
+
+  it('should raise an exception on invalid input', () => {
+    expect(() => sut.convert('1foo bar')).toThrowError('The input seems not to be a valid binary number.');
+  });
+});

src/app/converter/bin-to-dec-converter.ts

@@ -0,0 +1,19 @@
+import {Converter} from './converter';
+
+export class BinToDecConverter implements Converter {
+  getDisplayname(): string {
+    return 'Convert binary to decimal';
+  }
+
+  getId(): string {
+    return 'bintodec';
+  }
+
+  convert(input: string): string {
+    const n: number = parseInt(input, 2);
+    if (isNaN(n) || !input.trim().match(/^([01]+)$/)) {
+      throw new Error('The input seems not to be a valid binary number.');
+    }
+    return n.toString(10);
+  }
+}

src/app/converter/bintodecconverter.ts

@@ -1,19 +0,0 @@
-import {Converter} from "./converter";
-
-export class BinToDecConverter implements Converter {
-    getDisplayname():string {
-        return "Convert binary to decimal";
-    }
-
-    getId():string {
-        return "bintodec";
-    }
-
-    convert(input:string):string {
-        let n:number = parseInt(input, 2);
-        if (isNaN(n)) {
-            throw new Error("The input seems not to be a valid binary number.");
-        }
-        return n.toString(10);
-    }
-}

src/app/converter/converter.ts

@@ -1,5 +1,5 @@
 export interface Converter {
-    getDisplayname():string;
-    getId():string;
-    convert(input:string):string;
+  getDisplayname(): string;
+  getId(): string;
+  convert(input: string): string;
 }

src/app/converter/dec-to-bin-converter.spec.ts

@@ -0,0 +1,27 @@
+import {DecToBinConverter} from './dec-to-bin-converter';
+
+describe('DecToBinConverter', () => {
+  let sut: DecToBinConverter;
+
+  beforeEach(() => sut = new DecToBinConverter());
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "dectobin"', () => {
+    expect(sut.getId()).toEqual('dectobin');
+  });
+
+  it('should convert "22" to "10110"', () => {
+    expect(sut.convert('22')).toEqual('10110');
+  });
+
+  it('should raise an exception on invalid input', () => {
+    expect(() => sut.convert('foo bar')).toThrowError('The input seems not to be a valid integer.');
+  });
+});

src/app/converter/dec-to-bin-converter.ts

@@ -0,0 +1,19 @@
+import {Converter} from './converter';
+
+export class DecToBinConverter implements Converter {
+  getDisplayname(): string {
+    return 'Convert decimal to binary';
+  }
+
+  getId(): string {
+    return 'dectobin';
+  }
+
+  convert(input: string): string {
+    const n: number = parseInt(input, 10);
+    if (isNaN(n)) {
+      throw new Error('The input seems not to be a valid integer.');
+    }
+    return n.toString(2);
+  }
+}

src/app/converter/dec-to-hex-converter.spec.ts

@@ -0,0 +1,27 @@
+import {DecToHexConverter} from './dec-to-hex-converter';
+
+describe('DecToHexConverter', () => {
+  let sut: DecToHexConverter;
+
+  beforeEach(() => sut = new DecToHexConverter());
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "dectohex"', () => {
+    expect(sut.getId()).toEqual('dectohex');
+  });
+
+  it('should convert "22" to "16"', () => {
+    expect(sut.convert('22')).toEqual('16');
+  });
+
+  it('should raise an exception on invalid input', () => {
+    expect(() => sut.convert('foo bar')).toThrowError('The input seems not to be a valid integer.');
+  });
+});

src/app/converter/dec-to-hex-converter.ts

@@ -0,0 +1,19 @@
+import {Converter} from './converter';
+
+export class DecToHexConverter implements Converter {
+  getDisplayname(): string {
+    return 'Convert decimal to hexadecimal';
+  }
+
+  getId(): string {
+    return 'dectohex';
+  }
+
+  convert(input: string): string {
+    const n: number = parseInt(input, 10);
+    if (isNaN(n)) {
+      throw new Error('The input seems not to be a valid integer.');
+    }
+    return n.toString(16);
+  }
+}

src/app/converter/dectobinconverter.ts

@@ -1,19 +0,0 @@
-import {Converter} from "./converter";
-
-export class DecToBinConverter implements Converter {
-    getDisplayname():string {
-        return "Convert decimal to binary";
-    }
-
-    getId():string {
-        return "dectobin";
-    }
-
-    convert(input:string):string {
-        let n:number = parseInt(input, 10);
-        if (isNaN(n)) {
-            throw new Error("The input seems not to be a valid integer.");
-        }
-        return n.toString(2);
-    }
-}

src/app/converter/dectohexconverter.ts

@@ -1,19 +0,0 @@
-import {Converter} from "./converter";
-
-export class DecToHexConverter implements Converter {
-    getDisplayname():string {
-        return "Convert decimal to hexadecimal";
-    }
-
-    getId():string {
-        return "dectohex";
-    }
-
-    convert(input:string):string {
-        let n:number = parseInt(input, 10);
-        if (isNaN(n)) {
-            throw new Error("The input seems not to be a valid integer.");
-        }
-        return n.toString(16);
-    }
-}

src/app/converter/hex-to-dec-converter.spec.ts

@@ -0,0 +1,27 @@
+import {HexToDecConverter} from './hex-to-dec-converter';
+
+describe('HexToDecConverter', () => {
+  let sut: HexToDecConverter;
+
+  beforeEach(() => sut = new HexToDecConverter());
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "hextodec"', () => {
+    expect(sut.getId()).toEqual('hextodec');
+  });
+
+  it('should convert "ab" to "171"', () => {
+    expect(sut.convert('ab')).toEqual('171');
+  });
+
+  it('should raise an exception on invalid input', () => {
+    expect(() => sut.convert('foo bar')).toThrowError('The input seems not to be a valid hexadecimal number.');
+  });
+});

src/app/converter/hex-to-dec-converter.ts

@@ -0,0 +1,19 @@
+import {Converter} from './converter';
+
+export class HexToDecConverter implements Converter {
+  getDisplayname(): string {
+    return 'Convert hexadecimal to decimal';
+  }
+
+  getId(): string {
+    return 'hextodec';
+  }
+
+  convert(input: string): string {
+    const n: number = parseInt(input, 16);
+    if (isNaN(n) || !input.trim().match(/^((0x|0X)?[0-9a-fA-F]+)$/)) {
+      throw new Error('The input seems not to be a valid hexadecimal number.');
+    }
+    return n.toString(10);
+  }
+}

src/app/converter/hextodecconverter.ts

@@ -1,19 +0,0 @@
-import {Converter} from "./converter";
-
-export class HexToDecConverter implements Converter {
-    getDisplayname():string {
-        return "Convert hexadecimal to decimal";
-    }
-
-    getId():string {
-        return "hextodec";
-    }
-
-    convert(input:string):string {
-        let n:number = parseInt(input, 16);
-        if (isNaN(n)) {
-            throw new Error("The input seems not to be a valid hexadecimal number.")
-        }
-        return n.toString(10);
-    }
-}

src/app/converter/htmlentities-decoder.spec.ts

@@ -0,0 +1,24 @@
+import {HTMLEntitiesDecoder} from './htmlentities-decoder';
+
+describe('HTMLEntitiesDecoder', () => {
+  let sut: HTMLEntitiesDecoder;
+
+  beforeEach(() => sut = new HTMLEntitiesDecoder());
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "decodehtmlentities"', () => {
+    expect(sut.getId()).toEqual('decodehtmlentities');
+  });
+
+  it('should decode "&lt;span&gt;&quot;Hi&quot; &amp; &quot;Lo&quot;&lt;/span&gt;" to "<span>"Hi" & "Lo"</span>"', () => {
+    expect(sut.convert('&lt;span&gt;&quot;Hi&quot; &amp; &quot;Lo&quot;&lt;/span&gt;'))
+      .toEqual('<span>"Hi" & "Lo"</span>');
+  });
+});

src/app/converter/htmlentities-decoder.ts

@@ -0,0 +1,19 @@
+import {Converter} from './converter';
+
+export class HTMLEntitiesDecoder implements Converter {
+  getDisplayname(): string {
+    return 'Decode HTML entities';
+  }
+
+  getId(): string {
+    return 'decodehtmlentities';
+  }
+
+  convert(input: string): string {
+    return input
+      .replace(/\&quot\;/g, '"')
+      .replace(/\&gt\;/g, '>')
+      .replace(/\&lt\;/g, '<')
+      .replace(/\&amp\;/g, '&');
+  }
+}

src/app/converter/htmlentities-encoder.spec.ts

@@ -0,0 +1,24 @@
+import {HTMLEntitiesEncoder} from './htmlentities-encoder';
+
+describe('HTMLEntitiesEncoder', () => {
+  let sut: HTMLEntitiesEncoder;
+
+  beforeEach(() => sut = new HTMLEntitiesEncoder());
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "encodehtmlentities"', () => {
+    expect(sut.getId()).toEqual('encodehtmlentities');
+  });
+
+  it('should encode "<span>"Hi" & "Lo"</span>" to "&lt;span&gt;&quot;Hi&quot; &amp; &quot;Lo&quot;&lt;/span&gt;"', () => {
+    expect(sut.convert('<span>"Hi" & "Lo"</span>'))
+      .toEqual('&lt;span&gt;&quot;Hi&quot; &amp; &quot;Lo&quot;&lt;/span&gt;');
+  });
+});

src/app/converter/htmlentities-encoder.ts

@@ -0,0 +1,19 @@
+import {Converter} from './converter';
+
+export class HTMLEntitiesEncoder implements Converter {
+  getDisplayname(): string {
+    return 'Encode HTML entities';
+  }
+
+  getId(): string {
+    return 'encodehtmlentities';
+  }
+
+  convert(input: string): string {
+    return input
+      .replace(/\&/g, '&')
+      .replace(/\</g, '&lt;')
+      .replace(/\>/g, '&gt;')
+      .replace(/\"/g, '&quot;');
+  }
+}

src/app/converter/htmlentitiesdecoder.ts

@@ -1,19 +0,0 @@
-import {Converter} from "./converter";
-
-export class HTMLEntitiesDecoder implements Converter {
-    getDisplayname():string {
-        return "Decode HTML entities";
-    }
-
-    getId():string {
-        return "decodehtmlentities";
-    }
-
-    convert(input:string):string {
-        return input
-            .replace(/\&quot\;/g, "\"")
-            .replace(/\&gt\;/g, ">")
-            .replace(/\&lt\;/g, "<")
-            .replace(/\&amp\;/g, "&");
-    }
-}

src/app/converter/htmlentitiesencoder.ts

@@ -1,19 +0,0 @@
-import {Converter} from "./converter";
-
-export class HTMLEntitiesEncoder implements Converter {
-    getDisplayname():string {
-        return "Encode HTML entities";
-    }
-
-    getId():string {
-        return "encodehtmlentities";
-    }
-
-    convert(input:string):string {
-        return input
-            .replace(/\&/g, "&")
-            .replace(/\</g, "&lt;")
-            .replace(/\>/g, "&gt;")
-            .replace(/\"/g, "&quot;");
-    }
-}

src/app/converter/punycode-decoder.spec.ts

@@ -0,0 +1,37 @@
+import {PunycodeDecoder} from './punycode-decoder';
+import {NativeLibraryWrapperService, Punycode} from '../native-library-wrapper.service';
+import createSpyObj = jasmine.createSpyObj;
+import Spy = jasmine.Spy;
+
+describe('PunycodeDecoder', () => {
+  let sut: PunycodeDecoder;
+  let nativeWrapperSpy: Partial<NativeLibraryWrapperService>;
+  let decodeSpy: Spy;
+
+  beforeEach(() => {
+    nativeWrapperSpy = {punycode: createSpyObj<Punycode>(['decode'])};
+    decodeSpy = nativeWrapperSpy.punycode!.decode as Spy;
+    sut = new PunycodeDecoder((nativeWrapperSpy as NativeLibraryWrapperService));
+  });
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "decodepunycode"', () => {
+    expect(sut.getId()).toEqual('decodepunycode');
+  });
+
+  it('should call through to the native punycode decoder', () => {
+    const testInput = 'My input';
+    const expectedOutput = 'It worked';
+    decodeSpy.and.returnValue(expectedOutput);
+    const result: string = sut.convert(testInput);
+    expect(result).toEqual(expectedOutput);
+    expect(decodeSpy).toHaveBeenCalledWith(testInput);
+  });
+});

src/app/converter/punycode-decoder.ts

@@ -0,0 +1,20 @@
+import {Converter} from './converter';
+import {NativeLibraryWrapperService} from '../native-library-wrapper.service';
+
+export class PunycodeDecoder implements Converter {
+
+  constructor(private nativeLibraryWrapperService: NativeLibraryWrapperService) {
+  }
+
+  getDisplayname(): string {
+    return 'Decode from punycode';
+  }
+
+  getId(): string {
+    return 'decodepunycode';
+  }
+
+  convert(input: string): string {
+    return this.nativeLibraryWrapperService.punycode.decode(input);
+  }
+}

src/app/converter/punycode-encoder.spec.ts

@@ -0,0 +1,37 @@
+import {NativeLibraryWrapperService, Punycode} from '../native-library-wrapper.service';
+import {PunycodeEncoder} from './punycode-encoder';
+import createSpyObj = jasmine.createSpyObj;
+import Spy = jasmine.Spy;
+
+describe('PunycodeEncoder', () => {
+  let sut: PunycodeEncoder;
+  let nativeWrapperSpy: Partial<NativeLibraryWrapperService>;
+  let encodeSpy: Spy;
+
+  beforeEach(() => {
+    nativeWrapperSpy = {punycode: createSpyObj<Punycode>(['encode'])};
+    encodeSpy = nativeWrapperSpy.punycode!.encode as Spy;
+    sut = new PunycodeEncoder(nativeWrapperSpy as NativeLibraryWrapperService);
+  });
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "encodepunycode"', () => {
+    expect(sut.getId()).toEqual('encodepunycode');
+  });
+
+  it('should call through to the native punycode encoder', () => {
+    const testInput = 'My input';
+    const expectedOutput = 'It worked';
+    encodeSpy.and.returnValue(expectedOutput);
+    const result: string = sut.convert(testInput);
+    expect(result).toEqual(expectedOutput);
+    expect(encodeSpy).toHaveBeenCalledWith(testInput);
+  });
+});

src/app/converter/punycode-encoder.ts

@@ -0,0 +1,20 @@
+import {Converter} from './converter';
+import {NativeLibraryWrapperService} from '../native-library-wrapper.service';
+
+export class PunycodeEncoder implements Converter {
+
+  constructor(private nativeLibraryWrapperService: NativeLibraryWrapperService) {
+  }
+
+  getDisplayname(): string {
+    return 'Encode as punycode';
+  }
+
+  getId(): string {
+    return 'encodepunycode';
+  }
+
+  convert(input: string): string {
+    return this.nativeLibraryWrapperService.punycode.encode(input);
+  }
+}

src/app/converter/punycodedecoder.ts

@@ -1,20 +0,0 @@
-import {Converter} from "./converter";
-import {NativeLibraryWrapperService} from "../nativelibrarywrapper.service";
-
-export class PunycodeDecoder implements Converter {
-
-    constructor(private nativeLibraryWrapperService: NativeLibraryWrapperService) {
-    }
-
-    getDisplayname(): string {
-        return "Decode from punycode";
-    }
-
-    getId(): string {
-        return "decodepunycode";
-    }
-
-    convert(input: string): string {
-        return this.nativeLibraryWrapperService.punycode.decode(input);
-    }
-}

src/app/converter/punycodeencoder.ts

@@ -1,20 +0,0 @@
-import {Converter} from "./converter";
-import {NativeLibraryWrapperService} from "../nativelibrarywrapper.service";
-
-export class PunycodeEncoder implements Converter {
-
-    constructor(private nativeLibraryWrapperService: NativeLibraryWrapperService) {
-    }
-
-    getDisplayname(): string {
-        return "Encode as punycode";
-    }
-
-    getId(): string {
-        return "encodepunycode";
-    }
-
-    convert(input: string): string {
-        return this.nativeLibraryWrapperService.punycode.encode(input);
-    }
-}

src/app/converter/quoted-printable-decoder.spec.ts

@@ -0,0 +1,37 @@
+import {NativeLibraryWrapperService, QuotedPrintable} from '../native-library-wrapper.service';
+import {QuotedPrintableDecoder} from './quoted-printable-decoder';
+import createSpyObj = jasmine.createSpyObj;
+import Spy = jasmine.Spy;
+
+describe('QuotedPrintableDecoder', () => {
+  let sut: QuotedPrintableDecoder;
+  let nativeWrapperSpy: Partial<NativeLibraryWrapperService>;
+  let decodeSpy: Spy;
+
+  beforeEach(() => {
+    nativeWrapperSpy = {quotedPrintable: createSpyObj<QuotedPrintable>(['decode'])};
+    decodeSpy = nativeWrapperSpy.quotedPrintable!.decode as Spy;
+    sut = new QuotedPrintableDecoder((nativeWrapperSpy as NativeLibraryWrapperService));
+  });
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "decodequotedprintable"', () => {
+    expect(sut.getId()).toEqual('decodequotedprintable');
+  });
+
+  it('should call through to the native quoted printable decoder', () => {
+    const testInput = 'My input';
+    const expectedOutput = 'It worked';
+    decodeSpy.and.returnValue(expectedOutput);
+    const result: string = sut.convert(testInput);
+    expect(result).toEqual(expectedOutput);
+    expect(decodeSpy).toHaveBeenCalledWith(testInput);
+  });
+});

src/app/converter/quoted-printable-decoder.ts

@@ -0,0 +1,24 @@
+import {Converter} from './converter';
+import {NativeLibraryWrapperService} from '../native-library-wrapper.service';
+
+export class QuotedPrintableDecoder implements Converter {
+
+  constructor(private nativeLibraryWrapperService: NativeLibraryWrapperService) {
+  }
+
+  getDisplayname(): string {
+    return 'Decode quoted printable';
+  }
+
+  getId(): string {
+    return 'decodequotedprintable';
+  }
+
+  convert(input: string): string {
+    try {
+      return this.nativeLibraryWrapperService.quotedPrintable.decode(input);
+    } catch (error) {
+      throw new Error('The input can not be interpreted as quoted-printable. May be corrupt?');
+    }
+  }
+}

src/app/converter/quoted-printable-encoder.spec.ts

@@ -0,0 +1,37 @@
+import {NativeLibraryWrapperService, QuotedPrintable} from '../native-library-wrapper.service';
+import {QuotedPrintableEncoder} from './quoted-printable-encoder';
+import createSpyObj = jasmine.createSpyObj;
+import Spy = jasmine.Spy;
+
+describe('QuotedPrintableEncoder', () => {
+  let sut: QuotedPrintableEncoder;
+  let nativeWrapperSpy: Partial<NativeLibraryWrapperService>;
+  let encodeSpy: Spy;
+
+  beforeEach(() => {
+    nativeWrapperSpy = {quotedPrintable: createSpyObj<QuotedPrintable>(['encode'])};
+    encodeSpy = nativeWrapperSpy.quotedPrintable!.encode as Spy;
+    sut = new QuotedPrintableEncoder(nativeWrapperSpy as NativeLibraryWrapperService);
+  });
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "encodequotedprintable"', () => {
+    expect(sut.getId()).toEqual('encodequotedprintable');
+  });
+
+  it('should call through to the native quoted printable encoder', () => {
+    const testInput = 'My input';
+    const expectedOutput = 'It worked';
+    encodeSpy.and.returnValue(expectedOutput);
+    const result: string = sut.convert(testInput);
+    expect(result).toEqual(expectedOutput);
+    expect(encodeSpy).toHaveBeenCalledWith(testInput);
+  });
+});

src/app/converter/quoted-printable-encoder.ts

@@ -0,0 +1,20 @@
+import {Converter} from './converter';
+import {NativeLibraryWrapperService} from '../native-library-wrapper.service';
+
+export class QuotedPrintableEncoder implements Converter {
+
+  constructor(private nativeLibraryWrapperService: NativeLibraryWrapperService) {
+  }
+
+  getDisplayname(): string {
+    return 'Encode quoted printable';
+  }
+
+  getId(): string {
+    return 'encodequotedprintable';
+  }
+
+  convert(input: string): string {
+    return this.nativeLibraryWrapperService.quotedPrintable.encode(input);
+  }
+}

src/app/converter/quotedprintabledecoder.ts

@@ -1,24 +0,0 @@
-import {Converter} from "./converter";
-import {NativeLibraryWrapperService} from "../nativelibrarywrapper.service";
-
-export class QuotedPrintableDecoder implements Converter {
-
-    constructor(private nativeLibraryWrapperService:NativeLibraryWrapperService) {
-    }
-
-    getDisplayname():string {
-        return "Decode quoted printable";
-    }
-
-    getId():string {
-        return "decodequotedprintable";
-    }
-
-    convert(input:string):string {
-        try {
-            return this.nativeLibraryWrapperService.quotedPrintable.decode(input);
-        } catch (error) {
-            throw new Error("The input can not be interpreted as quoted-printable. May be corrupt?");
-        }
-    }
-}

src/app/converter/quotedprintableencoder.ts

@@ -1,20 +0,0 @@
-import {Converter} from "./converter";
-import {NativeLibraryWrapperService} from "../nativelibrarywrapper.service";
-
-export class QuotedPrintableEncoder implements Converter {
-
-    constructor(private nativeLibraryWrapperService:NativeLibraryWrapperService) {
-    }
-
-    getDisplayname():string {
-        return "Encode quoted printable";
-    }
-
-    getId():string {
-        return "encodequotedprintable";
-    }
-
-    convert(input:string):string {
-        return this.nativeLibraryWrapperService.quotedPrintable.encode(input);
-    }
-}

src/app/converter/rot13-converter.spec.ts

@@ -0,0 +1,28 @@
+import {ROT13Converter} from './rot13-converter';
+
+describe('ROT13Converter', () => {
+  let sut: ROT13Converter;
+
+  beforeEach(() => sut = new ROT13Converter());
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "rot13"', () => {
+    expect(sut.getId()).toEqual('rot13');
+  });
+
+  it('should encode "Hello, World!" to "Uryyb, Jbeyq!"', () => {
+    expect(sut.convert('Hello, World!')).toEqual('Uryyb, Jbeyq!');
+  });
+
+  it('should return the original input after being applied twice', () => {
+    const input = 'Ok, so this string is just a bunch of letters. And numbers: 1, 2, 3. Ans others: /&%. Kthxbye!';
+    expect(sut.convert(sut.convert(input))).toEqual(input);
+  });
+});

src/app/converter/rot13-converter.ts

@@ -0,0 +1,25 @@
+import {Converter} from './converter';
+
+export class ROT13Converter implements Converter {
+  getDisplayname(): string {
+    return 'Perform ROT-13';
+  }
+
+  getId(): string {
+    return 'rot13';
+  }
+
+  convert(input: string): string {
+    try {
+      const inChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+      const outChars = 'NOPQRSTUVWXYZABCDEFGHIJKLMnopqrstuvwxyzabcdefghijklm';
+      const translate = (c: string) => {
+        const charIndex = inChars.indexOf(c);
+        return charIndex > -1 ? outChars[charIndex] : c;
+      };
+      return input.split('').map(translate).join('');
+    } catch (exception) {
+      throw new Error('Could not perform ROT-13 conversion. Maybe corrupt input?');
+    }
+  }
+}

src/app/converter/uricomponent-decoder.spec.ts

@@ -0,0 +1,25 @@
+import {URIComponentDecoder} from './uricomponent-decoder';
+
+describe('URIComponentDecoder', () => {
+  let sut: URIComponentDecoder;
+
+  beforeEach(() => sut = new URIComponentDecoder());
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "uricomponentdecode"', () => {
+    expect(sut.getId()).toEqual('uricomponentdecode');
+  });
+
+  it('should decode "http%3A%2F%2Fm%C3%A4nu%3Agh%C3%ABim%40host%3Aport%2Fhi.there%3Foh%3Dwell%23ya" ' +
+    'to "http://mänu:ghëim@host:port/hi.there?oh=well#ya"', () => {
+    expect(sut.convert('http%3A%2F%2Fm%C3%A4nu%3Agh%C3%ABim%40host%3Aport%2Fhi.there%3Foh%3Dwell%23ya'))
+      .toEqual('http://mänu:ghëim@host:port/hi.there?oh=well#ya');
+  });
+});

src/app/converter/uricomponent-decoder.ts

@@ -0,0 +1,15 @@
+import {Converter} from './converter';
+
+export class URIComponentDecoder implements Converter {
+  getDisplayname(): string {
+    return 'Decode URI component';
+  }
+
+  getId(): string {
+    return 'uricomponentdecode';
+  }
+
+  convert(input: string): string {
+    return decodeURIComponent(input);
+  }
+}

src/app/converter/uricomponent-encoder.spec.ts

@@ -0,0 +1,25 @@
+import {URIComponentEncoder} from './uricomponent-encoder';
+
+describe('URIComponentEncoder', () => {
+  let sut: URIComponentEncoder;
+
+  beforeEach(() => sut = new URIComponentEncoder());
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "uricomponentencode"', () => {
+    expect(sut.getId()).toEqual('uricomponentencode');
+  });
+
+  it('should encode "http://mänu:ghëim@host:port/hi.there?oh=well#ya" ' +
+    'to "http%3A%2F%2Fm%C3%A4nu%3Agh%C3%ABim%40host%3Aport%2Fhi.there%3Foh%3Dwell%23ya"', () => {
+    expect(sut.convert('http://mänu:ghëim@host:port/hi.there?oh=well#ya'))
+      .toEqual('http%3A%2F%2Fm%C3%A4nu%3Agh%C3%ABim%40host%3Aport%2Fhi.there%3Foh%3Dwell%23ya');
+  });
+});

src/app/converter/uricomponent-encoder.ts

@@ -0,0 +1,17 @@
+import {Converter} from './converter';
+
+export class URIComponentEncoder implements Converter {
+  getDisplayname(): string {
+    return 'Encode URI component';
+  }
+
+  getId(): string {
+    return 'uricomponentencode';
+  }
+
+  convert(input: string): string {
+    return encodeURIComponent(input).replace(/[!'()*]/g, function (c) {
+      return '%' + c.charCodeAt(0).toString(16);
+    });
+  }
+}

src/app/converter/uricomponentdecoder.ts

@@ -1,15 +0,0 @@
-import {Converter} from "./converter";
-
-export class URIComponentDecoder implements Converter {
-    getDisplayname():string {
-        return "Decode URI component";
-    }
-
-    getId():string {
-        return "uricomponentdecode";
-    }
-
-    convert(input:string):string {
-        return decodeURIComponent(input);
-    }
-}

src/app/converter/uricomponentencoder.ts

@@ -1,17 +0,0 @@
-import {Converter} from "./converter";
-
-export class URIComponentEncoder implements Converter {
-    getDisplayname():string {
-        return "Encode URI component";
-    }
-
-    getId():string {
-        return "uricomponentencode";
-    }
-
-    convert(input:string):string {
-        return encodeURIComponent(input).replace(/[!'()*]/g, function (c) {
-            return '%' + c.charCodeAt(0).toString(16);
-        });
-    }
-}

src/app/converter/uridecoder.spec.ts

@@ -0,0 +1,25 @@
+import {URIDecoder} from './uridecoder';
+
+describe('URIDecoder', () => {
+  let sut: URIDecoder;
+
+  beforeEach(() => sut = new URIDecoder());
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "uridecode"', () => {
+    expect(sut.getId()).toEqual('uridecode');
+  });
+
+  it('should decode "http://m%C3%A4nu:gh%C3%ABim@host:port/hi.there?oh=well#ya" ' +
+    'to "http://mänu:ghëim@host:port/hi.there?oh=well#ya"', () => {
+    expect(sut.convert('http://m%C3%A4nu:gh%C3%ABim@host:port/hi.there?oh=well#ya'))
+      .toEqual('http://mänu:ghëim@host:port/hi.there?oh=well#ya');
+  });
+});

src/app/converter/uridecoder.ts

@@ -1,15 +1,15 @@
-import {Converter} from "./converter";
+import {Converter} from './converter';
 
 export class URIDecoder implements Converter {
-    getDisplayname():string {
-        return "Decode URI";
-    }
+  getDisplayname(): string {
+    return 'Decode URI';
+  }
 
-    getId():string {
-        return "uridecode";
-    }
+  getId(): string {
+    return 'uridecode';
+  }
 
-    convert(input:string):string {
-        return decodeURI(input);
-    }
+  convert(input: string): string {
+    return decodeURI(input);
+  }
 }

src/app/converter/uriencoder.spec.ts

@@ -0,0 +1,25 @@
+import {URIEncoder} from './uriencoder';
+
+describe('URIEncoder', () => {
+  let sut: URIEncoder;
+
+  beforeEach(() => sut = new URIEncoder());
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "uriencode"', () => {
+    expect(sut.getId()).toEqual('uriencode');
+  });
+
+  it('should encode "http://mänu:ghëim@host:port/hi.there?oh=well#ya" ' +
+    'to "http://m%C3%A4nu:gh%C3%ABim@host:port/hi.there?oh=well#ya"', () => {
+    expect(sut.convert('http://mänu:ghëim@host:port/hi.there?oh=well#ya'))
+      .toEqual('http://m%C3%A4nu:gh%C3%ABim@host:port/hi.there?oh=well#ya');
+  });
+});

src/app/converter/uriencoder.ts

@@ -1,15 +1,15 @@
-import {Converter} from "./converter";
+import {Converter} from './converter';
 
 export class URIEncoder implements Converter {
-    getDisplayname():string {
-        return "Encode URI";
-    }
+  getDisplayname(): string {
+    return 'Encode URI';
+  }
 
-    getId():string {
-        return "uriencode";
-    }
+  getId(): string {
+    return 'uriencode';
+  }
 
-    convert(input:string):string {
-        return encodeURI(input).replace(/%5B/g, '[').replace(/%5D/g, ']');
-    }
+  convert(input: string): string {
+    return encodeURI(input).replace(/%5B/g, '[').replace(/%5D/g, ']');
+  }
 }

src/app/converter/utf8-decoder.spec.ts

@@ -0,0 +1,37 @@
+import {NativeLibraryWrapperService, Utf8} from '../native-library-wrapper.service';
+import {UTF8Decoder} from './utf8-decoder';
+import createSpyObj = jasmine.createSpyObj;
+import Spy = jasmine.Spy;
+
+describe('UTF8Decoder', () => {
+  let sut: UTF8Decoder;
+  let nativeWrapperSpy: Partial<NativeLibraryWrapperService>;
+  let decodeSpy: Spy;
+
+  beforeEach(() => {
+    nativeWrapperSpy = {utf8: createSpyObj<Utf8>(['decode'])};
+    decodeSpy = nativeWrapperSpy.utf8!.decode as Spy;
+    sut = new UTF8Decoder((nativeWrapperSpy as NativeLibraryWrapperService));
+  });
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "decodeutf8"', () => {
+    expect(sut.getId()).toEqual('decodeutf8');
+  });
+
+  it('should call through to the native UTF-8 decoder', () => {
+    const testInput = 'My input';
+    const expectedOutput = 'It worked';
+    decodeSpy.and.returnValue(expectedOutput);
+    const result: string = sut.convert(testInput);
+    expect(result).toEqual(expectedOutput);
+    expect(decodeSpy).toHaveBeenCalledWith(testInput);
+  });
+});

src/app/converter/utf8-decoder.ts

@@ -0,0 +1,24 @@
+import {Converter} from './converter';
+import {NativeLibraryWrapperService} from '../native-library-wrapper.service';
+
+export class UTF8Decoder implements Converter {
+
+  constructor(private nativeLibraryWrapperService: NativeLibraryWrapperService) {
+  }
+
+  getDisplayname(): string {
+    return 'Decode UTF-8';
+  }
+
+  getId(): string {
+    return 'decodeutf8';
+  }
+
+  convert(input: string): string {
+    try {
+      return this.nativeLibraryWrapperService.utf8.decode(input);
+    } catch (error) {
+      throw new Error('The input can not be interpreted a valid UTF-8 encoded string. May be corrupt?');
+    }
+  }
+}

src/app/converter/utf8-encoder.spec.ts

@@ -0,0 +1,37 @@
+import {NativeLibraryWrapperService, Utf8} from '../native-library-wrapper.service';
+import {UTF8Encoder} from './utf8-encoder';
+import createSpyObj = jasmine.createSpyObj;
+import Spy = jasmine.Spy;
+
+describe('UTF8Encoder', () => {
+  let sut: UTF8Encoder;
+  let nativeWrapperSpy: Partial<NativeLibraryWrapperService>;
+  let encodeSpy: Spy;
+
+  beforeEach(() => {
+    nativeWrapperSpy = {utf8: createSpyObj<Utf8>(['encode'])};
+    encodeSpy = nativeWrapperSpy.utf8!.encode as Spy;
+    sut = new UTF8Encoder(nativeWrapperSpy as NativeLibraryWrapperService);
+  });
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+
+  it('should have a display name', () => {
+    expect(sut.getDisplayname()).toBeTruthy();
+  });
+
+  it('should have the id "encodeutf8"', () => {
+    expect(sut.getId()).toEqual('encodeutf8');
+  });
+
+  it('should call through to the native UTF-8 encoder', () => {
+    const testInput = 'My input';
+    const expectedOutput = 'It worked';
+    encodeSpy.and.returnValue(expectedOutput);
+    const result: string = sut.convert(testInput);
+    expect(result).toEqual(expectedOutput);
+    expect(encodeSpy).toHaveBeenCalledWith(testInput);
+  });
+});

src/app/converter/utf8-encoder.ts

@@ -0,0 +1,24 @@
+import {Converter} from './converter';
+import {NativeLibraryWrapperService} from '../native-library-wrapper.service';
+
+export class UTF8Encoder implements Converter {
+
+  constructor(private nativeLibraryWrapperService: NativeLibraryWrapperService) {
+  }
+
+  getDisplayname(): string {
+    return 'Encode UTF-8';
+  }
+
+  getId(): string {
+    return 'encodeutf8';
+  }
+
+  convert(input: string): string {
+    try {
+      return this.nativeLibraryWrapperService.utf8.encode(input);
+    } catch (error) {
+      throw new Error('The input can not be encoded as UTF-8. May be corrupt?');
+    }
+  }
+}

src/app/converter/utf8decoder.ts

@@ -1,24 +0,0 @@
-import {Converter} from "./converter";
-import {NativeLibraryWrapperService} from "../nativelibrarywrapper.service";
-
-export class UTF8Decoder implements Converter {
-
-    constructor(private nativeLibraryWrapperService:NativeLibraryWrapperService) {
-    }
-
-    getDisplayname():string {
-        return "Decode UTF-8";
-    }
-
-    getId():string {
-        return "decodeutf8";
-    }
-
-    convert(input:string):string {
-        try {
-            return this.nativeLibraryWrapperService.utf8.decode(input);
-        } catch (error) {
-            throw new Error("The input can not be interpreted a valid UTF-8 encoded string. May be corrupt?");
-        }
-    }
-}

src/app/converter/utf8encoder.ts

@@ -1,24 +0,0 @@
-import {Converter} from "./converter";
-import {NativeLibraryWrapperService} from "../nativelibrarywrapper.service";
-
-export class UTF8Encoder implements Converter {
-
-    constructor(private nativeLibraryWrapperService:NativeLibraryWrapperService) {
-    }
-
-    getDisplayname():string {
-        return "Encode UTF-8";
-    }
-
-    getId():string {
-        return "encodeutf8";
-    }
-
-    convert(input:string):string {
-        try {
-            return this.nativeLibraryWrapperService.utf8.encode(input);
-        } catch (error) {
-            throw new Error("The input can not be encoded as UTF-8. May be corrupt?");
-        }
-    }
-}

src/app/converterregistry.service.ts

@@ -1,73 +0,0 @@
-import {Injectable} from "@angular/core";
-import {Converter} from "./converter/converter";
-import {Base64Encoder} from "./converter/base64encoder";
-import {Base64Decoder} from "./converter/base64decoder";
-import {URIEncoder} from "./converter/uriencoder";
-import {URIDecoder} from "./converter/uridecoder";
-import {URIComponentEncoder} from "./converter/uricomponentencoder";
-import {URIComponentDecoder} from "./converter/uricomponentdecoder";
-import {HTMLEntitiesEncoder} from "./converter/htmlentitiesencoder";
-import {HTMLEntitiesDecoder} from "./converter/htmlentitiesdecoder";
-import {DecToHexConverter} from "./converter/dectohexconverter";
-import {HexToDecConverter} from "./converter/hextodecconverter";
-import {DecToBinConverter} from "./converter/dectobinconverter";
-import {BinToDecConverter} from "./converter/bintodecconverter";
-import {QuotedPrintableDecoder} from "./converter/quotedprintabledecoder";
-import {QuotedPrintableEncoder} from "./converter/quotedprintableencoder";
-import {NativeLibraryWrapperService} from "./nativelibrarywrapper.service";
-import {PunycodeEncoder} from "./converter/punycodeencoder";
-import {PunycodeDecoder} from "./converter/punycodedecoder";
-import {UTF8Encoder} from "./converter/utf8encoder";
-import {UTF8Decoder} from "./converter/utf8decoder";
-
-@Injectable()
-export class ConverterRegistryService {
-    private converters:Converter[] = [];
-
-    constructor(private wrapper:NativeLibraryWrapperService) {
-        this.init();
-    }
-
-    public getAllConverters():Converter[] {
-        return this.converters;
-    }
-
-    public getConverter(id:string):Converter {
-        for (let i = 0; i < this.converters.length; i++) {
-            if (this.converters[i].getId() == id) {
-                return this.converters[i];
-            }
-        }
-        return undefined;
-    }
-
-    private init():void {
-        this.registerConverter(new Base64Encoder());
-        this.registerConverter(new Base64Decoder());
-        this.registerConverter(new URIEncoder());
-        this.registerConverter(new URIDecoder());
-        this.registerConverter(new URIComponentEncoder());
-        this.registerConverter(new URIComponentDecoder());
-        this.registerConverter(new HTMLEntitiesEncoder());
-        this.registerConverter(new HTMLEntitiesDecoder());
-        this.registerConverter(new QuotedPrintableEncoder(this.wrapper));
-        this.registerConverter(new QuotedPrintableDecoder(this.wrapper));
-        this.registerConverter(new DecToHexConverter());
-        this.registerConverter(new HexToDecConverter());
-        this.registerConverter(new DecToBinConverter());
-        this.registerConverter(new BinToDecConverter());
-        this.registerConverter(new PunycodeEncoder(this.wrapper));
-        this.registerConverter(new PunycodeDecoder(this.wrapper));
-        this.registerConverter(new UTF8Encoder(this.wrapper));
-        this.registerConverter(new UTF8Decoder(this.wrapper));
-    }
-
-    private registerConverter(converter:Converter):void {
-        this.converters.forEach((c:Converter) => {
-            if (c.getId() == converter.getId()) {
-                throw new Error("Converter-ID " + converter.getId() + " is already registered!");
-            }
-        });
-        this.converters.push(converter);
-    }
-}

src/app/error-message/error-message.component.html

@@ -0,0 +1,3 @@
+@if (step.error) {
+  <div class="errormessage" [innerHTML]="step.message"></div>
+}

src/app/error-message/error-message.component.scss

@@ -0,0 +1,4 @@
+.errormessage {
+  color: red;
+  text-align: center;
+}

src/app/error-message/error-message.component.spec.ts

@@ -0,0 +1,50 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ErrorMessageComponent} from './error-message.component';
+import {Component, ViewChild} from '@angular/core';
+import {Step} from '../step';
+
+@Component({
+  template: '<app-error-message [step]="step"></app-error-message>'
+})
+class TestHostComponent {
+  public step: Step = new Step(42);
+  @ViewChild(ErrorMessageComponent)
+  public sutComponent!: ErrorMessageComponent;
+}
+
+describe('ErrorMessageComponent', () => {
+  let testHostComponent: TestHostComponent;
+  let testHostFixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ErrorMessageComponent],
+      declarations: [TestHostComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    testHostFixture = TestBed.createComponent(TestHostComponent);
+    testHostComponent = testHostFixture.componentInstance;
+    testHostFixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(testHostComponent.sutComponent).toBeTruthy();
+  });
+
+  it('should display an error message', () => {
+    // arrange
+    testHostComponent.step.error = true;
+    testHostComponent.step.message = 'This is an error message';
+
+    // act
+    testHostFixture.detectChanges();
+
+    // assert
+    expect(testHostComponent.sutComponent.step.error).toBeTruthy();
+    expect(testHostComponent.sutComponent.step.message).toEqual('This is an error message');
+  });
+});

src/app/error-message/error-message.component.ts

@@ -0,0 +1,16 @@
+import {Component, Input} from '@angular/core';
+import {Step} from '../step';
+
+@Component({
+    selector: 'app-error-message',
+    templateUrl: './error-message.component.html',
+    standalone: true,
+    styleUrls: ['./error-message.component.scss']
+})
+export class ErrorMessageComponent {
+  @Input()
+  public step!: Step;
+
+  constructor() {
+  }
+}

src/app/input-component-manager.service.spec.ts

@@ -0,0 +1,71 @@
+import {inject, TestBed} from '@angular/core/testing';
+
+import {InputComponentManagerService} from './input-component-manager.service';
+import {Step} from './step';
+
+describe('InputComponentManagerService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [InputComponentManagerService]
+    });
+  });
+
+  it('should be created', inject([InputComponentManagerService], (service: InputComponentManagerService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should create a component if requesting the first one',
+    inject([InputComponentManagerService], (service: InputComponentManagerService) => {
+      const firstStep: Step = service.getFirst();
+      expect(firstStep).toBeTruthy();
+      expect(service.getFirst()).toBe(firstStep);
+      expect(service.getAllComponents().length).toEqual(1);
+    })
+  );
+
+  it('must not add a null Step', inject([InputComponentManagerService], (service: InputComponentManagerService) => {
+    expect(() => service.register(null!)).toThrowError();
+    expect(service.getAllComponents().length).toEqual(0);
+  }));
+
+  it('must not add an undefined Step', inject([InputComponentManagerService], (service: InputComponentManagerService) => {
+    expect(() => service.register(undefined!)).toThrowError();
+    expect(service.getAllComponents().length).toEqual(0);
+  }));
+
+  it('should register new Steps', inject([InputComponentManagerService], (service: InputComponentManagerService) => {
+    service.register(new Step(99));
+    expect(service.getAllComponents().length).toEqual(1);
+    service.register(new Step(100));
+    expect(service.getAllComponents().length).toEqual(2);
+  }));
+
+  it('should return a new step if the next step doesn\'t exist',
+    inject([InputComponentManagerService], (service: InputComponentManagerService) => {
+      // arrange
+      const firstStep: Step = new Step(0);
+      service.register(firstStep);
+
+      // act
+      const nextStep: Step = service.getNext(firstStep);
+
+      // assert
+      expect(service.getAllComponents().length).toEqual(2);
+      expect(nextStep.index).toEqual(1);
+    })
+  );
+
+  it('should return the next step if requested', inject([InputComponentManagerService], (service: InputComponentManagerService) => {
+    // arrange
+    const firstStep: Step = new Step(0);
+    const nextStep: Step = new Step(1);
+    service.register(firstStep);
+    service.register(nextStep);
+
+    // act
+    const requestedStep: Step = service.getNext(firstStep);
+    // assert
+    expect(service.getAllComponents().length).toEqual(2);
+    expect(requestedStep).toEqual(nextStep);
+  }));
+});

src/app/input-component-manager.service.ts

@@ -0,0 +1,42 @@
+import {Injectable} from '@angular/core';
+import {Step} from './step';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InputComponentManagerService {
+  private components: Step[] = [];
+
+  public constructor() {
+  }
+
+  public register(component: Step): void {
+    if (!component) {
+      throw new Error('component to add must not be empty or undefined');
+    }
+    this.components.push(component);
+  }
+
+  public getAllComponents(): Step[] {
+    return this.components;
+  }
+
+  public getNext(component: Step): Step {
+    const index: number = component.index;
+    if (index === this.components.length - 1) {
+      this.addComponent();
+    }
+    return this.components[index + 1];
+  }
+
+  public getFirst(): Step {
+    if (this.components.length === 0) {
+      this.addComponent();
+    }
+    return this.components[0];
+  }
+
+  private addComponent(): void {
+    this.register(new Step(this.components.length));
+  }
+}

src/app/inputcomponentmanager.service.ts

@@ -1,37 +0,0 @@
-import {Injectable} from "@angular/core";
-import {Step} from "./step";
-
-@Injectable()
-export class InputComponentManagerService {
-    private components:Step[] = [];
-
-    public constructor() {
-    }
-
-    public register(component:Step):void {
-        this.components.push(component);
-    }
-
-    public getAllComponents():Step[] {
-        return this.components;
-    }
-
-    public getNext(component:Step):Step {
-        let index:number = component.index;
-        if (index == this.components.length - 1) {
-            this.addComponent();
-        }
-        return this.components[index + 1];
-    }
-
-    public getFirst():Step {
-        if (this.components.length == 0) {
-            this.addComponent();
-        }
-        return this.components[0];
-    }
-
-    private addComponent():void {
-        this.register(new Step(this.components.length));
-    }
-}

src/app/native-library-wrapper.service.spec.ts

@@ -0,0 +1,33 @@
+import {inject, TestBed} from '@angular/core/testing';
+
+import {NativeLibraryWrapperService} from './native-library-wrapper.service';
+
+describe('NativeLibraryWrapperService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [NativeLibraryWrapperService]
+    });
+  });
+
+  it('should be created', inject([NativeLibraryWrapperService], (service: NativeLibraryWrapperService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should convert punycode', inject([NativeLibraryWrapperService], (service: NativeLibraryWrapperService) => {
+    expect(service.punycode).toBeTruthy();
+    expect(service.punycode.encode('bärneruhr')).toEqual('brneruhr-0za');
+    expect(service.punycode.decode('brneruhr-0za')).toEqual('bärneruhr');
+  }));
+
+  it('should convert utf8', inject([NativeLibraryWrapperService], (service: NativeLibraryWrapperService) => {
+    expect(service.utf8).toBeTruthy();
+    expect(service.utf8.encode('bärneruhr')).toEqual('bärneruhr');
+    expect(service.utf8.decode('bärneruhr')).toEqual('bärneruhr');
+  }));
+
+  it('should convert quoted printable', inject([NativeLibraryWrapperService], (service: NativeLibraryWrapperService) => {
+    expect(service.quotedPrintable).toBeTruthy();
+    expect(service.quotedPrintable.encode('bärneruhr')).toEqual('b=E4rneruhr');
+    expect(service.quotedPrintable.decode('b=E4rneruhr')).toEqual('bärneruhr');
+  }));
+});

src/app/native-library-wrapper.service.ts

@@ -0,0 +1,37 @@
+import {Injectable} from '@angular/core';
+import * as NativePunycode from 'punycode/';
+import * as NativeQuotedPrintable from 'quoted-printable';
+import * as NativeUtf8 from 'utf8';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NativeLibraryWrapperService {
+  public readonly utf8: Utf8;
+  public readonly quotedPrintable: QuotedPrintable;
+  public readonly punycode: Punycode;
+
+  constructor() {
+    this.utf8 = NativeUtf8;
+    this.quotedPrintable = NativeQuotedPrintable;
+    this.punycode = NativePunycode;
+  }
+}
+
+export interface Punycode {
+  encode(input: string): string;
+
+  decode(input: string): string;
+}
+
+export interface QuotedPrintable {
+  encode(input: string): string;
+
+  decode(input: string): string;
+}
+
+export interface Utf8 {
+  encode(input: any): string;
+
+  decode(input: string): any;
+}

src/app/nativelibrarywrapper.service.ts

@@ -1,17 +0,0 @@
-import {Injectable} from "@angular/core";
-import {Punycode} from "./punycode";
-import {Utf8} from "./utf8";
-import {QuotedPrintable} from "./quotedprintable";
-
-@Injectable()
-export class NativeLibraryWrapperService {
-    public utf8:Utf8;
-    public quotedPrintable:QuotedPrintable;
-    public punycode:Punycode;
-
-    constructor() {
-        this.utf8 = require("utf8");
-        this.quotedPrintable = require("quoted-printable");
-        this.punycode = require("punycode");
-    }
-}

src/app/punycode.ts

@@ -1,4 +0,0 @@
-export interface Punycode {
-    encode(input:string):string;
-    decode(input:string):string;
-}

src/app/quotedprintable.ts

@@ -1,4 +0,0 @@
-export interface QuotedPrintable {
-    encode(input:string):string;
-    decode(input:string):string;
-}

src/app/step.ts

@@ -1,13 +1,13 @@
-import {Converter} from "./converter/converter";
+import {Converter} from './converter/converter';
 
 export class Step {
-    public content:string = "";
-    public selectedConverter:Converter = undefined;
-    public index:number;
-    public error:boolean = false;
-    public message:string = "";
+  public content: string = '';
+  public selectedConverter: Converter | undefined;
+  public index: number;
+  public error: boolean = false;
+  public message: string = '';
 
-    constructor(index:number) {
-        this.index = index;
-    }
-}
+  constructor(index: number) {
+    this.index = index;
+  }
+}

src/app/text-input-field/text-input-field.component.html

@@ -0,0 +1,2 @@
+<textarea (keyup)="update(step)" placeholder="Please enter your input ..."
+          [(ngModel)]="step.content">{{ step.content }}</textarea>