127 changed files with 1812 additions and 14340 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -1,12 +0,0 @@
-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
--- a/.editorconfig
+++ b/.editorconfig
@ -1,16 +0,0 @@
-# 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
--- a/.gitignore
+++ b/.gitignore
@ -1,42 +1,10 @@
-# 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
-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
+*.iml
+atlassian-ide-plugin.xml
+node_modules/
+typings/
+src/**/*.js
+src/**/*.js.map
+npm-debug.log
+dist/
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -0,0 +1,57 @@
+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
--- a/README.md
+++ b/README.md
@ -1,38 +1,9 @@
-# Convertorizr - Convert whatever you want!
+# conv.friedli.info - Convert whatever you want!

-This is a short introduction to the awesome Convertorizr hosted at https://conv.friedli.info/.
+This is a short introduction to the awesome converter hosted at [https://conv.friedli.info/].

-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?
+Deployment is automated with Gitlab CI. Usage is self-explanatory. What else do you need to know?

-The source code is hosted at https://gittr.ch/manuel/converter.git.
-Contact the author at manuel|at|fritteli.ch.
+Contact the author at manuel-conv.friedli.info|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.
--- a/angular.json
+++ b/angular.json
@ -1,102 +0,0 @@
-{
-  "$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"
-          }
-        }
-      }
-    }
-  }
-}
--- a/config/helpers.js
+++ b/config/helpers.js
@ -0,0 +1,7 @@
+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;
--- a/config/karma-test-shim.js
+++ b/config/karma-test-shim.js
@ -0,0 +1,21 @@
+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());
--- a/config/karma.conf.js
+++ b/config/karma.conf.js
@ -0,0 +1,44 @@
+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);
+};
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@ -0,0 +1,76 @@
+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
+        })
+    ]
+};
--- a/config/webpack.dev.js
+++ b/config/webpack.dev.js
@ -0,0 +1,24 @@
+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'
+    }
+});
--- a/config/webpack.prod.js
+++ b/config/webpack.prod.js
@ -0,0 +1,38 @@
+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
+            }
+        })
+    ]
+});
--- a/config/webpack.test.js
+++ b/config/webpack.test.js
@ -0,0 +1,52 @@
+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
+        )
+    ]
+};
--- a/karma.conf.js
+++ b/karma.conf.js
@ -1,40 +1 @@
-// 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
-  });
-};
+module.exports = require('./config/karma.conf.js');
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
-  "name": "convertorizr",
-  "version": "2.0.1-dev.0",
-  "description": "Decode or encode base64, punycode, HTML entities, URI components, ...",
+  "name": "conv.friedli.info",
+  "version": "1.0.0",
+  "description": "Decode or encode base64, punycode, HTML entities, URI components ...",
  "keywords": [
    "encode",
    "decode",
@ -14,52 +14,58 @@
    "email": "manuel@fritteli.ch"
  },
  "license": "MIT",
-  "homepage": "https://conv.friedli.info/",
+  "homepage": "https://manuel.pages.gittr.ch/dencode.org",
  "repository": {
    "type": "git",
-    "url": "https://gittr.ch/manuel/converter.git"
+    "url": "https://gittr.ch/manuel/dencode.org.git"
  },
-  "scripts": {
-    "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"
+    "@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": {
-    "@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"
+    "@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"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --inline --progress --port 8080",
+    "test": "karma start",
+    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  }
 }
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@ -0,0 +1,118 @@
+.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;
+}
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -1,10 +1,16 @@
-@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>-->
+<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>
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@ -1,10 +0,0 @@
-.contact {
-  font-size: small;
-  margin-right: 2em;
-  text-align: right;
-}
-
-.inputwrapper {
-  font-family: "ABeeZee", sans-serif;
-  margin: 0 1em 1em 1em;
-}
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@ -1,26 +1,16 @@
-import {AppComponent} from './app.component';
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {Step} from './step';
+import {TestBed} from "@angular/core/testing";
+import {AppComponent} from "./app.component";
+import {FormsModule} from "@angular/forms";

-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();
-  });
-});
+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');
+    });
+});
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -1,33 +1,61 @@
-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';
+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";

@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [
-    ConverterSelectorComponent,
-    ErrorMessageComponent,
-    RouterOutlet,
-    TextInputFieldComponent,
-    VersionComponent
-  ],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+    selector: "den-app",
+    templateUrl: "./app.component.html",
+    styleUrls: ["./app.component.css"],
+    providers: [ConverterRegistryService, InputComponentManagerService, NativeLibraryWrapperService]
 })
-export class AppComponent implements OnInit {
-  public steps: Step[] = [];
+export class AppComponent extends OnInit {
+    public steps:Step[] = [];
+    public converters:Converter[] = [];

-  constructor(private inputComponentManagerService: InputComponentManagerService) {
-  }
+    constructor(private converterRegistryService:ConverterRegistryService, private inputComponentManagerService:InputComponentManagerService) {
+        super();
+    }

-  ngOnInit(): void {
-    this.steps = this.inputComponentManagerService.getAllComponents();
-    this.inputComponentManagerService.getFirst();
-  }
+    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();
+    }
 }
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@ -1,8 +0,0 @@
-import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
-
-export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
-};
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -0,0 +1,17 @@
+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 {
+}
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@ -1,3 +0,0 @@
-import { Routes } from '@angular/router';
-
-export const routes: Routes = [];
--- a/src/app/converter-registry.service.spec.ts
+++ b/src/app/converter-registry.service.spec.ts
@ -1,40 +0,0 @@
-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!`);
-    }));
-});
--- a/src/app/converter-registry.service.ts
+++ b/src/app/converter-registry.service.ts
@ -1,72 +0,0 @@
-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);
-  }
-}
--- a/src/app/converter-selector/converter-selector.component.html
+++ b/src/app/converter-selector/converter-selector.component.html
@ -1,10 +0,0 @@
-<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>
--- a/src/app/converter-selector/converter-selector.component.scss
+++ b/src/app/converter-selector/converter-selector.component.scss
@ -1,84 +0,0 @@
-.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;
-  }
-}
--- a/src/app/converter-selector/converter-selector.component.spec.ts
+++ b/src/app/converter-selector/converter-selector.component.spec.ts
@ -1,93 +0,0 @@
-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);
-  });
-});
--- a/src/app/converter-selector/converter-selector.component.ts
+++ b/src/app/converter-selector/converter-selector.component.ts
@ -1,33 +0,0 @@
-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();
-  }
-}
--- a/src/app/converter/base64-decoder.spec.ts
+++ b/src/app/converter/base64-decoder.spec.ts
@ -1,27 +0,0 @@
-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?');
-  });
-});
--- a/src/app/converter/base64-decoder.ts
+++ b/src/app/converter/base64-decoder.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?');
-    }
-  }
-}
--- a/src/app/converter/base64-encoder.spec.ts
+++ b/src/app/converter/base64-encoder.spec.ts
@ -1,27 +0,0 @@
-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./);
-  });
-});
--- a/src/app/converter/base64-encoder.ts
+++ b/src/app/converter/base64-encoder.ts
@ -1,22 +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) {
-      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?');
-    }
-  }
-}
--- a/src/app/converter/base64decoder.ts
+++ b/src/app/converter/base64decoder.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?");
+        }
+    }
+}
--- a/src/app/converter/base64encoder.ts
+++ b/src/app/converter/base64encoder.ts
@ -0,0 +1,19 @@
+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?");
+        }
+    }
+}
--- a/src/app/converter/bin-to-dec-converter.spec.ts
+++ b/src/app/converter/bin-to-dec-converter.spec.ts
@ -1,27 +0,0 @@
-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.');
-  });
-});
--- a/src/app/converter/bin-to-dec-converter.ts
+++ b/src/app/converter/bin-to-dec-converter.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 {
-    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);
-  }
-}
--- a/src/app/converter/bintodecconverter.ts
+++ b/src/app/converter/bintodecconverter.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 {
+        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);
+    }
+}
--- a/src/app/converter/converter.ts
+++ b/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;
 }
--- a/src/app/converter/dec-to-bin-converter.spec.ts
+++ b/src/app/converter/dec-to-bin-converter.spec.ts
@ -1,27 +0,0 @@
-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.');
-  });
-});
--- a/src/app/converter/dec-to-bin-converter.ts
+++ b/src/app/converter/dec-to-bin-converter.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 {
-    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);
-  }
-}
--- a/src/app/converter/dec-to-hex-converter.spec.ts
+++ b/src/app/converter/dec-to-hex-converter.spec.ts
@ -1,27 +0,0 @@
-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.');
-  });
-});
--- a/src/app/converter/dec-to-hex-converter.ts
+++ b/src/app/converter/dec-to-hex-converter.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 {
-    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);
-  }
-}
--- a/src/app/converter/dectobinconverter.ts
+++ b/src/app/converter/dectobinconverter.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 {
+        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);
+    }
+}
--- a/src/app/converter/dectohexconverter.ts
+++ b/src/app/converter/dectohexconverter.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 {
+        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);
+    }
+}
--- a/src/app/converter/hex-to-dec-converter.spec.ts
+++ b/src/app/converter/hex-to-dec-converter.spec.ts
@ -1,27 +0,0 @@
-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.');
-  });
-});
--- a/src/app/converter/hex-to-dec-converter.ts
+++ b/src/app/converter/hex-to-dec-converter.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 {
-    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);
-  }
-}
--- a/src/app/converter/hextodecconverter.ts
+++ b/src/app/converter/hextodecconverter.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 {
+        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);
+    }
+}
--- a/src/app/converter/htmlentities-decoder.spec.ts
+++ b/src/app/converter/htmlentities-decoder.spec.ts
@ -1,24 +0,0 @@
-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>');
-  });
-});
--- a/src/app/converter/htmlentities-decoder.ts
+++ b/src/app/converter/htmlentities-decoder.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, '&');
-  }
-}
--- a/src/app/converter/htmlentities-encoder.spec.ts
+++ b/src/app/converter/htmlentities-encoder.spec.ts
@ -1,24 +0,0 @@
-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;');
-  });
-});
--- a/src/app/converter/htmlentities-encoder.ts
+++ b/src/app/converter/htmlentities-encoder.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, '&amp;')
-      .replace(/\</g, '&lt;')
-      .replace(/\>/g, '&gt;')
-      .replace(/\"/g, '&quot;');
-  }
-}
--- a/src/app/converter/htmlentitiesdecoder.ts
+++ b/src/app/converter/htmlentitiesdecoder.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, "&");
+    }
+}
--- a/src/app/converter/htmlentitiesencoder.ts
+++ b/src/app/converter/htmlentitiesencoder.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, "&amp;")
+            .replace(/\</g, "&lt;")
+            .replace(/\>/g, "&gt;")
+            .replace(/\"/g, "&quot;");
+    }
+}
--- a/src/app/converter/punycode-decoder.spec.ts
+++ b/src/app/converter/punycode-decoder.spec.ts
@ -1,37 +0,0 @@
-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);
-  });
-});
--- a/src/app/converter/punycode-decoder.ts
+++ b/src/app/converter/punycode-decoder.ts
@ -1,20 +0,0 @@
-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);
-  }
-}
--- a/src/app/converter/punycode-encoder.spec.ts
+++ b/src/app/converter/punycode-encoder.spec.ts
@ -1,37 +0,0 @@
-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);
-  });
-});
--- a/src/app/converter/punycode-encoder.ts
+++ b/src/app/converter/punycode-encoder.ts
@ -1,20 +0,0 @@
-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);
-  }
-}
--- a/src/app/converter/punycodedecoder.ts
+++ b/src/app/converter/punycodedecoder.ts
@ -0,0 +1,20 @@
+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);
+    }
+}
--- a/src/app/converter/punycodeencoder.ts
+++ b/src/app/converter/punycodeencoder.ts
@ -0,0 +1,20 @@
+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);
+    }
+}
--- a/src/app/converter/quoted-printable-decoder.spec.ts
+++ b/src/app/converter/quoted-printable-decoder.spec.ts
@ -1,37 +0,0 @@
-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);
-  });
-});
--- a/src/app/converter/quoted-printable-decoder.ts
+++ b/src/app/converter/quoted-printable-decoder.ts
@ -1,24 +0,0 @@
-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?');
-    }
-  }
-}
--- a/src/app/converter/quoted-printable-encoder.spec.ts
+++ b/src/app/converter/quoted-printable-encoder.spec.ts
@ -1,37 +0,0 @@
-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);
-  });
-});
--- a/src/app/converter/quoted-printable-encoder.ts
+++ b/src/app/converter/quoted-printable-encoder.ts
@ -1,20 +0,0 @@
-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);
-  }
-}
--- a/src/app/converter/quotedprintabledecoder.ts
+++ b/src/app/converter/quotedprintabledecoder.ts
@ -0,0 +1,24 @@
+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?");
+        }
+    }
+}
--- a/src/app/converter/quotedprintableencoder.ts
+++ b/src/app/converter/quotedprintableencoder.ts
@ -0,0 +1,20 @@
+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);
+    }
+}
--- a/src/app/converter/rot13-converter.spec.ts
+++ b/src/app/converter/rot13-converter.spec.ts
@ -1,28 +0,0 @@
-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);
-  });
-});
--- a/src/app/converter/rot13-converter.ts
+++ b/src/app/converter/rot13-converter.ts
@ -1,25 +0,0 @@
-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?');
-    }
-  }
-}
--- a/src/app/converter/uricomponent-decoder.spec.ts
+++ b/src/app/converter/uricomponent-decoder.spec.ts
@ -1,25 +0,0 @@
-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');
-  });
-});
--- a/src/app/converter/uricomponent-decoder.ts
+++ b/src/app/converter/uricomponent-decoder.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);
-  }
-}
--- a/src/app/converter/uricomponent-encoder.spec.ts
+++ b/src/app/converter/uricomponent-encoder.spec.ts
@ -1,25 +0,0 @@
-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');
-  });
-});
--- a/src/app/converter/uricomponent-encoder.ts
+++ b/src/app/converter/uricomponent-encoder.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);
-    });
-  }
-}
--- a/src/app/converter/uricomponentdecoder.ts
+++ b/src/app/converter/uricomponentdecoder.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);
+    }
+}
--- a/src/app/converter/uricomponentencoder.ts
+++ b/src/app/converter/uricomponentencoder.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);
+        });
+    }
+}
--- a/src/app/converter/uridecoder.spec.ts
+++ b/src/app/converter/uridecoder.spec.ts
@ -1,25 +0,0 @@
-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');
-  });
-});
--- a/src/app/converter/uridecoder.ts
+++ b/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);
+    }
 }
--- a/src/app/converter/uriencoder.spec.ts
+++ b/src/app/converter/uriencoder.spec.ts
@ -1,25 +0,0 @@
-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');
-  });
-});
--- a/src/app/converter/uriencoder.ts
+++ b/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, ']');
+    }
 }
--- a/src/app/converter/utf8-decoder.spec.ts
+++ b/src/app/converter/utf8-decoder.spec.ts
@ -1,37 +0,0 @@
-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);
-  });
-});
--- a/src/app/converter/utf8-decoder.ts
+++ b/src/app/converter/utf8-decoder.ts
@ -1,24 +0,0 @@
-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?');
-    }
-  }
-}
--- a/src/app/converter/utf8-encoder.spec.ts
+++ b/src/app/converter/utf8-encoder.spec.ts
@ -1,37 +0,0 @@
-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);
-  });
-});
--- a/src/app/converter/utf8-encoder.ts
+++ b/src/app/converter/utf8-encoder.ts
@ -1,24 +0,0 @@
-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?');
-    }
-  }
-}
--- a/src/app/converter/utf8decoder.ts
+++ b/src/app/converter/utf8decoder.ts
@ -0,0 +1,24 @@
+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?");
+        }
+    }
+}
--- a/src/app/converter/utf8encoder.ts
+++ b/src/app/converter/utf8encoder.ts
@ -0,0 +1,24 @@
+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?");
+        }
+    }
+}
--- a/src/app/converterregistry.service.ts
+++ b/src/app/converterregistry.service.ts
@ -0,0 +1,73 @@
+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);
+    }
+}
--- a/src/app/error-message/error-message.component.html
+++ b/src/app/error-message/error-message.component.html
@ -1,3 +0,0 @@
-@if (step.error) {
-  <div class="errormessage" [innerHTML]="step.message"></div>
-}
--- a/src/app/error-message/error-message.component.scss
+++ b/src/app/error-message/error-message.component.scss
@ -1,4 +0,0 @@
-.errormessage {
-  color: red;
-  text-align: center;
-}
--- a/src/app/error-message/error-message.component.spec.ts
+++ b/src/app/error-message/error-message.component.spec.ts
@ -1,50 +0,0 @@
-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');
-  });
-});
--- a/src/app/error-message/error-message.component.ts
+++ b/src/app/error-message/error-message.component.ts
@ -1,16 +0,0 @@
-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() {
-  }
-}
--- a/src/app/input-component-manager.service.spec.ts
+++ b/src/app/input-component-manager.service.spec.ts
@ -1,71 +0,0 @@
-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);
-  }));
-});
--- a/src/app/input-component-manager.service.ts
+++ b/src/app/input-component-manager.service.ts
@ -1,42 +0,0 @@
-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));
-  }
-}
--- a/src/app/inputcomponentmanager.service.ts
+++ b/src/app/inputcomponentmanager.service.ts
@ -0,0 +1,37 @@
+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));
+    }
+}
--- a/src/app/native-library-wrapper.service.spec.ts
+++ b/src/app/native-library-wrapper.service.spec.ts
@ -1,33 +0,0 @@
-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');
-  }));
-});
--- a/src/app/native-library-wrapper.service.ts
+++ b/src/app/native-library-wrapper.service.ts
@ -1,37 +0,0 @@
-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;
-}
--- a/src/app/nativelibrarywrapper.service.ts
+++ b/src/app/nativelibrarywrapper.service.ts
@ -0,0 +1,17 @@
+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");
+    }
+}
--- a/src/app/punycode.ts
+++ b/src/app/punycode.ts
@ -0,0 +1,4 @@
+export interface Punycode {
+    encode(input:string):string;
+    decode(input:string):string;
+}
--- a/src/app/quotedprintable.ts
+++ b/src/app/quotedprintable.ts
@ -0,0 +1,4 @@
+export interface QuotedPrintable {
+    encode(input:string):string;
+    decode(input:string):string;
+}
--- a/src/app/step.ts
+++ b/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;
+    }
+}
--- a/src/app/text-input-field/text-input-field.component.html
+++ b/src/app/text-input-field/text-input-field.component.html
@ -1,2 +0,0 @@
-<textarea (keyup)="update(step)" placeholder="Please enter your input ..."
-          [(ngModel)]="step.content">{{ step.content }}</textarea>
--- a/Show More
+++ b/Show More