Merge branch 'feature/AW5739Angular_v16' into develop

# Conflicts:
#	package-lock.json
#	package.json

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "overrides": [
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}

.gitignore

@@ -33,6 +33,7 @@ speed-measure-plugin.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
@@ -47,3 +48,8 @@ testem.log
 Thumbs.db
 projects/common/node_modules/
 projects/common-map/node_modules/
+.angular/*
+projects/common-map3d/node_modules/
+projects/common-map/node_modules/
+projects/common-aol/node_modules/
+projects/common/node_modules/

.npmrc

@@ -1 +0,0 @@
-@FarmMaps:registry=https://repository.akkerweb.nl/repository/npm-group/

Jenkinsfile

@@ -0,0 +1,24 @@
+@Library('farmmaps-shared-library') _
+
+pipeline {
+  agent any;
+  options {
+    copyArtifactPermission projectNames: env.allProjectsArtifactPermission;
+    disableConcurrentBuilds();
+  }
+  stages {
+    stage('FarmmapsLibBuildAll') {
+      steps {
+        stepFarmmapsLibBuildAll();
+      }
+    }
+  }
+  post {
+    success {
+      postSuccess();
+    }
+    always {
+      postAlways();
+    }
+  }
+}

Jenkinsfile.develop

@@ -1,47 +1,24 @@
-pipeline {
-  agent any
-  environment {
-     PACKAGE_VERSION_PREFIX=sh(script: 'jq .version package.json |sed "s/\\"//g"', returnStdout: true).trim()
-     PACKAGE_VERSION="${PACKAGE_VERSION_PREFIX + '-prerelease.' + env.BUILD_NUMBER}"
-  }
-  stages {
-    stage('npm install'){
-      steps {
-        sh '''npm install
-        cd projects/common
-        npm install
-        cd ../common-map
-        npm install
-        '''
-      }
-    }
-    stage('build'){
-      steps {
-        sh '''ng build common
-        ng build common-map'''
-      }
-    }
-    stage('npm publish'){
-      steps {
-        sh '''cd dist/common
-        npm version ${PACKAGE_VERSION}
-        npm publish
-        cd ../common-map
-        npm version ${PACKAGE_VERSION}
-        npm publish'''
-      }
-    }
-
-  }
-  post {
-    always {
-      emailext (
-        body: '${DEFAULT_CONTENT}',
-        mimeType: 'text/html',
-        replyTo: '${DEFAULT_REPLYTO}',
-        subject: '${DEFAULT_SUBJECT}',
-        to: emailextrecipients([[$class: 'CulpritsRecipientProvider'], [$class: 'RequesterRecipientProvider']])
-      )
-    }
-  }
+@Library('farmmaps-shared-library') _
+
+pipeline {
+  agent any;
+  options {
+    copyArtifactPermission projectNames: env.allProjectsArtifactPermission;
+    disableConcurrentBuilds();
+  }
+  stages {
+    stage('FarmmapsLibBuildAll') {
+      steps {
+        stepFarmmapsLibBuildAll();
+      }
+    }
+  }
+  post {
+    success {
+      postSuccess();
+    }
+    always {
+      postAlways();
+    }
+  }
 }

README.md

@@ -55,5 +55,11 @@ ng serve
 
 Point your browser to http://localhost:4200
 
+*ESLint*
 
-
+```
+npm run lint src
+npm run lint projects/common/src
+npm run lint projects/common-map/src
+npm run lint projects/common-map3d/src
+```

angular.json

@@ -11,8 +11,11 @@
       "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "customWebpackConfig": {
+              "path": "./custom-webpack.config.js"
+            },
             "aot": true,
             "outputPath": "dist/farmmaps-lib-app",
             "index": "src/index.html",
@@ -22,29 +25,35 @@
             "assets": [
               {
                 "glob": "**/*",
-                "input":"src/assets/images",
-                "output":"/images"
+                "input": "src/assets/images",
+                "output": "/images"
               },
               {
                 "glob": "silent-refresh.html",
-                "input":"src/assets",
-                "output":"/"
+                "input": "src/assets",
+                "output": "/"
               },
               {
                 "glob": "favicon.ico",
-                "input":"src/assets",
-                "output":"/"
+                "input": "src/assets",
+                "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/cesium/Build/Cesium",
+                "output": "/assets/cesium"
               },
               "src/configuration.json"
             ],
             "styles": [
               "src/styles.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/font-awesome/css/font-awesome.min.css",              
-              "fonts/FMIconFont/style.css"
+              "fontawesome-6.2.1/css/all.min.css",
+              "fonts/FMIconFont/style.css",
+              "node_modules/cesium/Build/Cesium/Widgets/widgets.css",
+              "node_modules/ol/ol.css"
             ],
-            "scripts": [],
-            "es5BrowserSupport": true
+            "scripts": []
           },
           "configurations": {
             "production": {
@@ -74,19 +83,48 @@
                   "maximumWarning": "6kb"
                 }
               ]
+            },
+            "development": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": false,
+              "sourceMap": true,
+              "namedChunks": true,
+              "extractLicenses": false,
+              "vendorChunk": false,
+              "buildOptimizer": false,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "7mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ]
             }
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "browserTarget": "farmmaps-lib-app:build"
           },
           "configurations": {
             "production": {
               "browserTarget": "farmmaps-lib-app:build:production"
+            },
+            "development": {
+              "browserTarget": "farmmaps-lib-app:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -110,18 +148,6 @@
               "src/assets"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -141,15 +167,6 @@
               "devServerTarget": "farmmaps-lib-app:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -160,7 +177,7 @@
       "prefix": "fm",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "projects/common/tsconfig.lib.json",
             "project": "projects/common/ng-package.json"           
@@ -178,18 +195,6 @@
             "tsConfig": "projects/common/tsconfig.spec.json",
             "karmaConfig": "projects/common/karma.conf.js"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/common/tsconfig.lib.json",
-              "projects/common/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -200,7 +205,7 @@
       "prefix": "fm-map",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "projects/common-map/tsconfig.lib.json",
             "project": "projects/common-map/ng-package.json"
@@ -218,21 +223,67 @@
             "tsConfig": "projects/common-map/tsconfig.spec.json",
             "karmaConfig": "projects/common-map/karma.conf.js"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+        }
+      }
+    },
+    "common-map3d": {
+      "projectType": "library",
+      "root": "projects/common-map3d",
+      "sourceRoot": "projects/common-map3d/src",
+      "prefix": "fm-map3d",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr:build",
           "options": {
-            "tsConfig": [
-              "projects/common-map/tsconfig.lib.json",
-              "projects/common-map/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": "projects/common-map3d/tsconfig.lib.json",
+            "project": "projects/common-map3d/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/common-map3d/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/common-map3d/src/test.ts",
+            "tsConfig": "projects/common-map3d/tsconfig.spec.json",
+            "karmaConfig": "projects/common-map3d/karma.conf.js"
+          }
+        }
+      }
+    },
+    "common-aol": {
+      "projectType": "library",
+      "root": "projects/common-aol",
+      "sourceRoot": "projects/common-aol/src",
+      "prefix": "fm-aol",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/common-aol/tsconfig.lib.json",
+            "project": "projects/common-aol/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/common-aol/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/common-aol/src/test.ts",
+            "tsConfig": "projects/common-aol/tsconfig.spec.json",
+            "karmaConfig": "projects/common-aol/karma.conf.js"
           }
         }
       }
     }
   },
-  "defaultProject": "farmmaps-lib-app"
+  "cli": {
+    "analytics": false
+  }
 }

custom-webpack.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  resolve: {
+    fallback: {
+      // Resolve node module use of fs
+      fs: "empty",
+      Buffer: false,
+      http: require.resolve("stream-http"),
+      https: require.resolve("https-browserify"),
+      url: require.resolve("url/"),
+      zlib: require.resolve('browserify-zlib'),
+      assert: require.resolve("assert/"),
+      util: require.resolve("util/"),
+      buffer: require.resolve("buffer/")
+    }
+  }
+};

fontawesome-6.2.1/LICENSE.txt

@@ -0,0 +1,18 @@
+Font Awesome Pro License
+------------------------
+
+Font Awesome Pro is commercial software that requires a paid license. Full
+Font Awesome Pro license: https://fontawesome.com/license.
+
+# Commercial License
+The Font Awesome Pro commercial license allows you to pay for FA Pro once, own
+it, and use it just about everywhere you'd like.
+
+# Attribution
+Attribution is not required by the Font Awesome Pro commercial license.
+
+# Brand Icons
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**

fontawesome-6.2.1/css/light.css

@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Pro';
+  --fa-font-light: normal 300 1em/1 'Font Awesome 6 Pro'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: block;
+  src: url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.ttf") format("truetype"); }
+
+.fal,
+.fa-light {
+  font-weight: 300; }

fontawesome-6.2.1/css/light.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-light:normal 300 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:300;font-display:block;src:url(../webfonts/fa-light-300.woff2) format("woff2"),url(../webfonts/fa-light-300.ttf) format("truetype")}.fa-light,.fal{font-weight:300}

fontawesome-6.2.1/css/regular.css

@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Pro';
+  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Pro'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
+
+.far,
+.fa-regular {
+  font-weight: 400; }

fontawesome-6.2.1/css/regular.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}

fontawesome-6.2.1/css/sharp-solid.css

@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-sharp: 'Font Awesome 6 Sharp';
+  --fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Sharp';
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url("../webfonts/fa-sharp-solid-900.woff2") format("woff2"), url("../webfonts/fa-sharp-solid-900.ttf") format("truetype"); }
+
+.fass,
+.fa-sharp-solid {
+  font-weight: 900; }

fontawesome-6.2.1/css/sharp-solid.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-sharp:"Font Awesome 6 Sharp";--fa-font-sharp-solid:normal 900 1em/1 "Font Awesome 6 Sharp"}@font-face{font-family:"Font Awesome 6 Sharp";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-sharp-solid-900.woff2) format("woff2"),url(../webfonts/fa-sharp-solid-900.ttf) format("truetype")}.fa-sharp-solid,.fass{font-weight:900}

fontawesome-6.2.1/css/solid.css

@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Pro';
+  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Pro'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Pro';
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
+
+.fas,
+.fa-solid {
+  font-weight: 900; }

fontawesome-6.2.1/css/solid.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

fontawesome-6.2.1/css/svg-with-js.css

@@ -0,0 +1,635 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Solid';
+  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Regular';
+  --fa-font-light: normal 300 1em/1 'Font Awesome 6 Light';
+  --fa-font-thin: normal 100 1em/1 'Font Awesome 6 Thin';
+  --fa-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
+  --fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp';
+  --fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands'; }
+
+svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
+  overflow: visible;
+  box-sizing: content-box; }
+
+.svg-inline--fa {
+  display: var(--fa-display, inline-block);
+  height: 1em;
+  overflow: visible;
+  vertical-align: -.125em; }
+  .svg-inline--fa.fa-2xs {
+    vertical-align: 0.1em; }
+  .svg-inline--fa.fa-xs {
+    vertical-align: 0em; }
+  .svg-inline--fa.fa-sm {
+    vertical-align: -0.07143em; }
+  .svg-inline--fa.fa-lg {
+    vertical-align: -0.2em; }
+  .svg-inline--fa.fa-xl {
+    vertical-align: -0.25em; }
+  .svg-inline--fa.fa-2xl {
+    vertical-align: -0.3125em; }
+  .svg-inline--fa.fa-pull-left {
+    margin-right: var(--fa-pull-margin, 0.3em);
+    width: auto; }
+  .svg-inline--fa.fa-pull-right {
+    margin-left: var(--fa-pull-margin, 0.3em);
+    width: auto; }
+  .svg-inline--fa.fa-li {
+    width: var(--fa-li-width, 2em);
+    top: 0.25em; }
+  .svg-inline--fa.fa-fw {
+    width: var(--fa-fw-width, 1.25em); }
+
+.fa-layers svg.svg-inline--fa {
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0; }
+
+.fa-layers-text, .fa-layers-counter {
+  display: inline-block;
+  position: absolute;
+  text-align: center; }
+
+.fa-layers {
+  display: inline-block;
+  height: 1em;
+  position: relative;
+  text-align: center;
+  vertical-align: -.125em;
+  width: 1em; }
+  .fa-layers svg.svg-inline--fa {
+    -webkit-transform-origin: center center;
+            transform-origin: center center; }
+
+.fa-layers-text {
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  -webkit-transform-origin: center center;
+          transform-origin: center center; }
+
+.fa-layers-counter {
+  background-color: var(--fa-counter-background-color, #ff253a);
+  border-radius: var(--fa-counter-border-radius, 1em);
+  box-sizing: border-box;
+  color: var(--fa-inverse, #fff);
+  line-height: var(--fa-counter-line-height, 1);
+  max-width: var(--fa-counter-max-width, 5em);
+  min-width: var(--fa-counter-min-width, 1.5em);
+  overflow: hidden;
+  padding: var(--fa-counter-padding, 0.25em 0.5em);
+  right: var(--fa-right, 0);
+  text-overflow: ellipsis;
+  top: var(--fa-top, 0);
+  -webkit-transform: scale(var(--fa-counter-scale, 0.25));
+          transform: scale(var(--fa-counter-scale, 0.25));
+  -webkit-transform-origin: top right;
+          transform-origin: top right; }
+
+.fa-layers-bottom-right {
+  bottom: var(--fa-bottom, 0);
+  right: var(--fa-right, 0);
+  top: auto;
+  -webkit-transform: scale(var(--fa-layers-scale, 0.25));
+          transform: scale(var(--fa-layers-scale, 0.25));
+  -webkit-transform-origin: bottom right;
+          transform-origin: bottom right; }
+
+.fa-layers-bottom-left {
+  bottom: var(--fa-bottom, 0);
+  left: var(--fa-left, 0);
+  right: auto;
+  top: auto;
+  -webkit-transform: scale(var(--fa-layers-scale, 0.25));
+          transform: scale(var(--fa-layers-scale, 0.25));
+  -webkit-transform-origin: bottom left;
+          transform-origin: bottom left; }
+
+.fa-layers-top-right {
+  top: var(--fa-top, 0);
+  right: var(--fa-right, 0);
+  -webkit-transform: scale(var(--fa-layers-scale, 0.25));
+          transform: scale(var(--fa-layers-scale, 0.25));
+  -webkit-transform-origin: top right;
+          transform-origin: top right; }
+
+.fa-layers-top-left {
+  left: var(--fa-left, 0);
+  right: auto;
+  top: var(--fa-top, 0);
+  -webkit-transform: scale(var(--fa-layers-scale, 0.25));
+          transform: scale(var(--fa-layers-scale, 0.25));
+  -webkit-transform-origin: top left;
+          transform-origin: top left; }
+
+.fa-1x {
+  font-size: 1em; }
+
+.fa-2x {
+  font-size: 2em; }
+
+.fa-3x {
+  font-size: 3em; }
+
+.fa-4x {
+  font-size: 4em; }
+
+.fa-5x {
+  font-size: 5em; }
+
+.fa-6x {
+  font-size: 6em; }
+
+.fa-7x {
+  font-size: 7em; }
+
+.fa-8x {
+  font-size: 8em; }
+
+.fa-9x {
+  font-size: 9em; }
+
+.fa-10x {
+  font-size: 10em; }
+
+.fa-2xs {
+  font-size: 0.625em;
+  line-height: 0.1em;
+  vertical-align: 0.225em; }
+
+.fa-xs {
+  font-size: 0.75em;
+  line-height: 0.08333em;
+  vertical-align: 0.125em; }
+
+.fa-sm {
+  font-size: 0.875em;
+  line-height: 0.07143em;
+  vertical-align: 0.05357em; }
+
+.fa-lg {
+  font-size: 1.25em;
+  line-height: 0.05em;
+  vertical-align: -0.075em; }
+
+.fa-xl {
+  font-size: 1.5em;
+  line-height: 0.04167em;
+  vertical-align: -0.125em; }
+
+.fa-2xl {
+  font-size: 2em;
+  line-height: 0.03125em;
+  vertical-align: -0.1875em; }
+
+.fa-fw {
+  text-align: center;
+  width: 1.25em; }
+
+.fa-ul {
+  list-style-type: none;
+  margin-left: var(--fa-li-margin, 2.5em);
+  padding-left: 0; }
+  .fa-ul > li {
+    position: relative; }
+
+.fa-li {
+  left: calc(var(--fa-li-width, 2em) * -1);
+  position: absolute;
+  text-align: center;
+  width: var(--fa-li-width, 2em);
+  line-height: inherit; }
+
+.fa-border {
+  border-color: var(--fa-border-color, #eee);
+  border-radius: var(--fa-border-radius, 0.1em);
+  border-style: var(--fa-border-style, solid);
+  border-width: var(--fa-border-width, 0.08em);
+  padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); }
+
+.fa-pull-left {
+  float: left;
+  margin-right: var(--fa-pull-margin, 0.3em); }
+
+.fa-pull-right {
+  float: right;
+  margin-left: var(--fa-pull-margin, 0.3em); }
+
+.fa-beat {
+  -webkit-animation-name: fa-beat;
+          animation-name: fa-beat;
+  -webkit-animation-delay: var(--fa-animation-delay, 0s);
+          animation-delay: var(--fa-animation-delay, 0s);
+  -webkit-animation-direction: var(--fa-animation-direction, normal);
+          animation-direction: var(--fa-animation-direction, normal);
+  -webkit-animation-duration: var(--fa-animation-duration, 1s);
+          animation-duration: var(--fa-animation-duration, 1s);
+  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
+          animation-timing-function: var(--fa-animation-timing, ease-in-out); }
+
+.fa-bounce {
+  -webkit-animation-name: fa-bounce;
+          animation-name: fa-bounce;
+  -webkit-animation-delay: var(--fa-animation-delay, 0s);
+          animation-delay: var(--fa-animation-delay, 0s);
+  -webkit-animation-direction: var(--fa-animation-direction, normal);
+          animation-direction: var(--fa-animation-direction, normal);
+  -webkit-animation-duration: var(--fa-animation-duration, 1s);
+          animation-duration: var(--fa-animation-duration, 1s);
+  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
+          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }
+
+.fa-fade {
+  -webkit-animation-name: fa-fade;
+          animation-name: fa-fade;
+  -webkit-animation-delay: var(--fa-animation-delay, 0s);
+          animation-delay: var(--fa-animation-delay, 0s);
+  -webkit-animation-direction: var(--fa-animation-direction, normal);
+          animation-direction: var(--fa-animation-direction, normal);
+  -webkit-animation-duration: var(--fa-animation-duration, 1s);
+          animation-duration: var(--fa-animation-duration, 1s);
+  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
+          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
+
+.fa-beat-fade {
+  -webkit-animation-name: fa-beat-fade;
+          animation-name: fa-beat-fade;
+  -webkit-animation-delay: var(--fa-animation-delay, 0s);
+          animation-delay: var(--fa-animation-delay, 0s);
+  -webkit-animation-direction: var(--fa-animation-direction, normal);
+          animation-direction: var(--fa-animation-direction, normal);
+  -webkit-animation-duration: var(--fa-animation-duration, 1s);
+          animation-duration: var(--fa-animation-duration, 1s);
+  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
+          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
+
+.fa-flip {
+  -webkit-animation-name: fa-flip;
+          animation-name: fa-flip;
+  -webkit-animation-delay: var(--fa-animation-delay, 0s);
+          animation-delay: var(--fa-animation-delay, 0s);
+  -webkit-animation-direction: var(--fa-animation-direction, normal);
+          animation-direction: var(--fa-animation-direction, normal);
+  -webkit-animation-duration: var(--fa-animation-duration, 1s);
+          animation-duration: var(--fa-animation-duration, 1s);
+  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
+          animation-timing-function: var(--fa-animation-timing, ease-in-out); }
+
+.fa-shake {
+  -webkit-animation-name: fa-shake;
+          animation-name: fa-shake;
+  -webkit-animation-delay: var(--fa-animation-delay, 0s);
+          animation-delay: var(--fa-animation-delay, 0s);
+  -webkit-animation-direction: var(--fa-animation-direction, normal);
+          animation-direction: var(--fa-animation-direction, normal);
+  -webkit-animation-duration: var(--fa-animation-duration, 1s);
+          animation-duration: var(--fa-animation-duration, 1s);
+  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  -webkit-animation-timing-function: var(--fa-animation-timing, linear);
+          animation-timing-function: var(--fa-animation-timing, linear); }
+
+.fa-spin {
+  -webkit-animation-name: fa-spin;
+          animation-name: fa-spin;
+  -webkit-animation-delay: var(--fa-animation-delay, 0s);
+          animation-delay: var(--fa-animation-delay, 0s);
+  -webkit-animation-direction: var(--fa-animation-direction, normal);
+          animation-direction: var(--fa-animation-direction, normal);
+  -webkit-animation-duration: var(--fa-animation-duration, 2s);
+          animation-duration: var(--fa-animation-duration, 2s);
+  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  -webkit-animation-timing-function: var(--fa-animation-timing, linear);
+          animation-timing-function: var(--fa-animation-timing, linear); }
+
+.fa-spin-reverse {
+  --fa-animation-direction: reverse; }
+
+.fa-pulse,
+.fa-spin-pulse {
+  -webkit-animation-name: fa-spin;
+          animation-name: fa-spin;
+  -webkit-animation-direction: var(--fa-animation-direction, normal);
+          animation-direction: var(--fa-animation-direction, normal);
+  -webkit-animation-duration: var(--fa-animation-duration, 1s);
+          animation-duration: var(--fa-animation-duration, 1s);
+  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  -webkit-animation-timing-function: var(--fa-animation-timing, steps(8));
+          animation-timing-function: var(--fa-animation-timing, steps(8)); }
+
+@media (prefers-reduced-motion: reduce) {
+  .fa-beat,
+  .fa-bounce,
+  .fa-fade,
+  .fa-beat-fade,
+  .fa-flip,
+  .fa-pulse,
+  .fa-shake,
+  .fa-spin,
+  .fa-spin-pulse {
+    -webkit-animation-delay: -1ms;
+            animation-delay: -1ms;
+    -webkit-animation-duration: 1ms;
+            animation-duration: 1ms;
+    -webkit-animation-iteration-count: 1;
+            animation-iteration-count: 1;
+    transition-delay: 0s;
+    transition-duration: 0s; } }
+
+@-webkit-keyframes fa-beat {
+  0%, 90% {
+    -webkit-transform: scale(1);
+            transform: scale(1); }
+  45% {
+    -webkit-transform: scale(var(--fa-beat-scale, 1.25));
+            transform: scale(var(--fa-beat-scale, 1.25)); } }
+
+@keyframes fa-beat {
+  0%, 90% {
+    -webkit-transform: scale(1);
+            transform: scale(1); }
+  45% {
+    -webkit-transform: scale(var(--fa-beat-scale, 1.25));
+            transform: scale(var(--fa-beat-scale, 1.25)); } }
+
+@-webkit-keyframes fa-bounce {
+  0% {
+    -webkit-transform: scale(1, 1) translateY(0);
+            transform: scale(1, 1) translateY(0); }
+  10% {
+    -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
+            transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
+  30% {
+    -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
+            transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
+  50% {
+    -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
+            transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
+  57% {
+    -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
+            transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
+  64% {
+    -webkit-transform: scale(1, 1) translateY(0);
+            transform: scale(1, 1) translateY(0); }
+  100% {
+    -webkit-transform: scale(1, 1) translateY(0);
+            transform: scale(1, 1) translateY(0); } }
+
+@keyframes fa-bounce {
+  0% {
+    -webkit-transform: scale(1, 1) translateY(0);
+            transform: scale(1, 1) translateY(0); }
+  10% {
+    -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
+            transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
+  30% {
+    -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
+            transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
+  50% {
+    -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
+            transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
+  57% {
+    -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
+            transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
+  64% {
+    -webkit-transform: scale(1, 1) translateY(0);
+            transform: scale(1, 1) translateY(0); }
+  100% {
+    -webkit-transform: scale(1, 1) translateY(0);
+            transform: scale(1, 1) translateY(0); } }
+
+@-webkit-keyframes fa-fade {
+  50% {
+    opacity: var(--fa-fade-opacity, 0.4); } }
+
+@keyframes fa-fade {
+  50% {
+    opacity: var(--fa-fade-opacity, 0.4); } }
+
+@-webkit-keyframes fa-beat-fade {
+  0%, 100% {
+    opacity: var(--fa-beat-fade-opacity, 0.4);
+    -webkit-transform: scale(1);
+            transform: scale(1); }
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
+            transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
+
+@keyframes fa-beat-fade {
+  0%, 100% {
+    opacity: var(--fa-beat-fade-opacity, 0.4);
+    -webkit-transform: scale(1);
+            transform: scale(1); }
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
+            transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
+
+@-webkit-keyframes fa-flip {
+  50% {
+    -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
+            transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
+
+@keyframes fa-flip {
+  50% {
+    -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
+            transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
+
+@-webkit-keyframes fa-shake {
+  0% {
+    -webkit-transform: rotate(-15deg);
+            transform: rotate(-15deg); }
+  4% {
+    -webkit-transform: rotate(15deg);
+            transform: rotate(15deg); }
+  8%, 24% {
+    -webkit-transform: rotate(-18deg);
+            transform: rotate(-18deg); }
+  12%, 28% {
+    -webkit-transform: rotate(18deg);
+            transform: rotate(18deg); }
+  16% {
+    -webkit-transform: rotate(-22deg);
+            transform: rotate(-22deg); }
+  20% {
+    -webkit-transform: rotate(22deg);
+            transform: rotate(22deg); }
+  32% {
+    -webkit-transform: rotate(-12deg);
+            transform: rotate(-12deg); }
+  36% {
+    -webkit-transform: rotate(12deg);
+            transform: rotate(12deg); }
+  40%, 100% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg); } }
+
+@keyframes fa-shake {
+  0% {
+    -webkit-transform: rotate(-15deg);
+            transform: rotate(-15deg); }
+  4% {
+    -webkit-transform: rotate(15deg);
+            transform: rotate(15deg); }
+  8%, 24% {
+    -webkit-transform: rotate(-18deg);
+            transform: rotate(-18deg); }
+  12%, 28% {
+    -webkit-transform: rotate(18deg);
+            transform: rotate(18deg); }
+  16% {
+    -webkit-transform: rotate(-22deg);
+            transform: rotate(-22deg); }
+  20% {
+    -webkit-transform: rotate(22deg);
+            transform: rotate(22deg); }
+  32% {
+    -webkit-transform: rotate(-12deg);
+            transform: rotate(-12deg); }
+  36% {
+    -webkit-transform: rotate(12deg);
+            transform: rotate(12deg); }
+  40%, 100% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg); } }
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg); } }
+
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg); } }
+
+.fa-rotate-90 {
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg); }
+
+.fa-rotate-180 {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg); }
+
+.fa-rotate-270 {
+  -webkit-transform: rotate(270deg);
+          transform: rotate(270deg); }
+
+.fa-flip-horizontal {
+  -webkit-transform: scale(-1, 1);
+          transform: scale(-1, 1); }
+
+.fa-flip-vertical {
+  -webkit-transform: scale(1, -1);
+          transform: scale(1, -1); }
+
+.fa-flip-both,
+.fa-flip-horizontal.fa-flip-vertical {
+  -webkit-transform: scale(-1, -1);
+          transform: scale(-1, -1); }
+
+.fa-rotate-by {
+  -webkit-transform: rotate(var(--fa-rotate-angle, none));
+          transform: rotate(var(--fa-rotate-angle, none)); }
+
+.fa-stack {
+  display: inline-block;
+  vertical-align: middle;
+  height: 2em;
+  position: relative;
+  width: 2.5em; }
+
+.fa-stack-1x,
+.fa-stack-2x {
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: var(--fa-stack-z-index, auto); }
+
+.svg-inline--fa.fa-stack-1x {
+  height: 1em;
+  width: 1.25em; }
+
+.svg-inline--fa.fa-stack-2x {
+  height: 2em;
+  width: 2.5em; }
+
+.fa-inverse {
+  color: var(--fa-inverse, #fff); }
+
+.sr-only,
+.fa-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0; }
+
+.sr-only-focusable:not(:focus),
+.fa-sr-only-focusable:not(:focus) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0; }
+
+.svg-inline--fa .fa-primary {
+  fill: var(--fa-primary-color, currentColor);
+  opacity: var(--fa-primary-opacity, 1); }
+
+.svg-inline--fa .fa-secondary {
+  fill: var(--fa-secondary-color, currentColor);
+  opacity: var(--fa-secondary-opacity, 0.4); }
+
+.svg-inline--fa.fa-swap-opacity .fa-primary {
+  opacity: var(--fa-secondary-opacity, 0.4); }
+
+.svg-inline--fa.fa-swap-opacity .fa-secondary {
+  opacity: var(--fa-primary-opacity, 1); }
+
+.svg-inline--fa mask .fa-primary,
+.svg-inline--fa mask .fa-secondary {
+  fill: black; }
+
+.fad.fa-inverse,
+.fa-duotone.fa-inverse {
+  color: var(--fa-inverse, #fff); }

fontawesome-6.2.1/css/thin.css

@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Pro';
+  --fa-font-thin: normal 100 1em/1 'Font Awesome 6 Pro'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Pro';
+  font-style: normal;
+  font-weight: 100;
+  font-display: block;
+  src: url("../webfonts/fa-thin-100.woff2") format("woff2"), url("../webfonts/fa-thin-100.ttf") format("truetype"); }
+
+.fat,
+.fa-thin {
+  font-weight: 100; }

fontawesome-6.2.1/css/thin.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-thin:normal 100 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:100;font-display:block;src:url(../webfonts/fa-thin-100.woff2) format("woff2"),url(../webfonts/fa-thin-100.ttf) format("truetype")}.fa-thin,.fat{font-weight:100}

fontawesome-6.2.1/css/v4-font-face.css

@@ -0,0 +1,26 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@font-face {
+  font-family: 'FontAwesome';
+  font-display: block;
+  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'FontAwesome';
+  font-display: block;
+  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'FontAwesome';
+  font-display: block;
+  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype");
+  unicode-range: U+F003,U+F006,U+F014,U+F016-F017,U+F01A-F01B,U+F01D,U+F022,U+F03E,U+F044,U+F046,U+F05C-F05D,U+F06E,U+F070,U+F087-F088,U+F08A,U+F094,U+F096-F097,U+F09D,U+F0A0,U+F0A2,U+F0A4-F0A7,U+F0C5,U+F0C7,U+F0E5-F0E6,U+F0EB,U+F0F6-F0F8,U+F10C,U+F114-F115,U+F118-F11A,U+F11C-F11D,U+F133,U+F147,U+F14E,U+F150-F152,U+F185-F186,U+F18E,U+F190-F192,U+F196,U+F1C1-F1C9,U+F1D9,U+F1DB,U+F1E3,U+F1EA,U+F1F7,U+F1F9,U+F20A,U+F247-F248,U+F24A,U+F24D,U+F255-F25B,U+F25D,U+F271-F274,U+F278,U+F27B,U+F28C,U+F28E,U+F29C,U+F2B5,U+F2B7,U+F2BA,U+F2BC,U+F2BE,U+F2C0-F2C1,U+F2C3,U+F2D0,U+F2D2,U+F2D4,U+F2DC; }
+
+@font-face {
+  font-family: 'FontAwesome';
+  font-display: block;
+  src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"), url("../webfonts/fa-v4compatibility.ttf") format("truetype");
+  unicode-range: U+F041,U+F047,U+F065-F066,U+F07D-F07E,U+F080,U+F08B,U+F08E,U+F090,U+F09A,U+F0AC,U+F0AE,U+F0B2,U+F0D0,U+F0D6,U+F0E4,U+F0EC,U+F10A-F10B,U+F123,U+F13E,U+F148-F149,U+F14C,U+F156,U+F15E,U+F160-F161,U+F163,U+F175-F178,U+F195,U+F1F8,U+F219,U+F27A; }

fontawesome-6.2.1/css/v4-font-face.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}

fontawesome-6.2.1/css/v5-font-face.css

@@ -0,0 +1,34 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@font-face {
+  font-family: 'Font Awesome 5 Brands';
+  font-display: block;
+  font-weight: 400;
+  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Font Awesome 5 Pro';
+  font-display: block;
+  font-weight: 900;
+  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Font Awesome 5 Pro';
+  font-display: block;
+  font-weight: 400;
+  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Font Awesome 5 Pro';
+  font-display: block;
+  font-weight: 300;
+  src: url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Font Awesome 5 Duotone';
+  font-display: block;
+  font-weight: 900;
+  src: url("../webfonts/fa-duotone-900.woff2") format("woff2"), url("../webfonts/fa-duotone-900.ttf") format("truetype"); }

fontawesome-6.2.1/css/v5-font-face.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Pro";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Pro";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Pro";font-display:block;font-weight:300;src:url(../webfonts/fa-light-300.woff2) format("woff2"),url(../webfonts/fa-light-300.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Duotone";font-display:block;font-weight:900;src:url(../webfonts/fa-duotone-900.woff2) format("woff2"),url(../webfonts/fa-duotone-900.ttf) format("truetype")}

fonts/FMIconFont/style.css

@@ -23,6 +23,46 @@
   content: "b";
 }
 
+.fm-trijntje:before {
+  content: "c";
+}
+
+.fm-satellite:before {
+  content: "d";
+}
+
+.fm-sensoterra:before {
+  content: "e";
+}
+
+.fm-blight:before {
+  content: "f";
+}
+
+.fm-agrodatacube:before {
+  content: "g";
+}
+
+.fm-app-menu:before {
+  content: "h";
+}
+
+.fm-blight-holes:before {
+  content: "i";
+}
+
+.fm-carbon:before {
+  content: "j";
+}
+
+.fm-bo-akkerbouw:before {
+  content: "k";
+}
+
+.fm-grass:before {
+  content: "l";
+}
+
 @font-face {
   font-family: "FarmMaps";
   src: url("./FMIconFont.woff") format("woff"), /* Modern Browsers */

package.json

@@ -1,66 +1,88 @@
 {
   "name": "farmmaps-lib-app",
-  "version": "0.0.1",
+  "version": "4.2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
-    "lint": "ng lint",
+    "lint": "eslint -c .eslintrc.js --ext .ts",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.1.0",
-    "@angular/common": "~9.1.0",
-    "@angular/compiler": "~9.1.0",
-    "@angular/core": "~9.1.0",
-    "@angular/forms": "~9.1.0",
-    "@angular/platform-browser": "~9.1.0",
-    "@angular/platform-browser-dynamic": "~9.1.0",
-    "@angular/router": "~9.1.0",
-    "@microsoft/signalr": "^3.1.3",
-    "@farmmaps/common": ">=0.0.1-prerelease.267 <0.0.1",
-    "@farmmaps/common-map": ">=0.0.1-prerelease.267 <0.0.1",
-    "@ng-bootstrap/ng-bootstrap": "^6.0",
-    "@ngrx/effects": "^9.0",
-    "@ngrx/router-store": "^9.0",
-    "@ngrx/store": "^9.0",
-    "ngx-uploadx": "^3.3.4",
-    "angular-oauth2-oidc": "^9.1",
-    "bootstrap": "^4.4.1",
-    "core-js": "^2.6.11",
-    "font-awesome": "^4.7.0",
-    "ngrx-store-localstorage": "^9.0",
+    "@angular-eslint/eslint-plugin": "^15.2.1",
+    "@angular/animations": "^16.2.12",
+    "@angular/common": "^16.2.12",
+    "@angular/compiler": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/router": "^16.2.12",
+    "@farmmaps/common": "file:dist/common",
+    "@farmmaps/common-aol": "file:dist/common-aol",
+    "@farmmaps/common-map": "file:dist/common-map",
+    "@farmmaps/common-map3d": "file:dist/common-map3d",
+    "@microsoft/signalr": "^8.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^15.0.0",
+    "@ngrx/effects": "^15",
+    "@ngrx/router-store": "^15",
+    "@ngrx/store": "^14",
+    "@popperjs/core": "^2.11.6",
+    "angular-oauth2-oidc": "^13",
+    "assert": "^2.0.0",
+    "bootstrap": "^5.2.0",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
+    "cesium": "^1.97.0",
+    "core-js": "^2.6.12",
+    "https-browserify": "^1.0.0",
+    "moment": "^2.29.4",
+    "ngrx-store-localstorage": "^14",
+    "ngx-avatars": "^1.7.0",
+    "ngx-clipboard": "^15.1.0",
+    "ngx-image-cropper": "^6.0.2",
+    "ngx-uploadx": "^5.2.0",
+    "ol": "6.14.1",
+    "olcs": "^2.13.1",
     "resumablejs": "^1.1.0",
-    "rxjs": "^6.5.4",
+    "rxjs": "^7.8.1",
+    "stream": "^0.0.2",
+    "stream-http": "^3.2.0",
     "tassign": "^1.0.0",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.10.2",
-    "ngx-openlayers": "1.0.0-next.13",
-    "ol": "6.1.1"
+    "tslib": "^2.4.0",
+    "url": "^0.11.0",
+    "util": "^0.12.4",
+    "zone.js": "~0.13.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.0",
-    "@angular-devkit/build-ng-packagr": "~0.901.0",
-    "@angular/cli": "^9.1.0",
-    "@angular/compiler-cli": "~9.1.0",
-    "@angular/language-service": "~9.1.0",
+    "@angular-builders/custom-webpack": "^16.0.1",
+    "@angular-devkit/build-angular": "^16.2.11",
+    "@angular/cli": "^16.2.11",
+    "@angular/compiler-cli": "^16.2.12",
+    "@angular/language-service": "^16.2.12",
+    "@angular/localize": "^16.2.12",
+    "@types/arcgis-rest-api": "^10.4.5",
     "@types/jasmine": "~2.8.8",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~2.99.1",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "^5.0.2",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "ng-packagr": "^9.0.0",
-    "protractor": "^5.4.4",
+    "@types/jasminewd2": "^2.0.9",
+    "@types/node": "^12.20.15",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/eslint-plugin-tslint": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.5",
+    "jasmine-core": "^4.3.0",
+    "jasmine-spec-reporter": "^7.0.0",
+    "karma": "^6.3.20",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
+    "karma-jasmine": "^5.1.0",
+    "karma-jasmine-html-reporter": "^2.0.0",
+    "ng-packagr": "^16.2.3",
+    "protractor": "^7.0.0",
     "ts-node": "^8.8.1",
-    "tslint": "~5.11.0",
-    "typescript": "~3.8.3"
+    "typescript": "~5.1.6"
   }
 }

projects/common-aol/.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "overrides": [
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}

projects/common-aol/README.MD

@@ -0,0 +1,24 @@
+# CommonAol
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project common-aol` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project common-aol`.
+> Note: Don't forget to add `--project common-aol` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build common-aol` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build common-aol`, go to the dist folder `cd dist/common-aol` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test common-aol` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

projects/common-aol/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/common-aol",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "."
+  ]
+}

projects/common-aol/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "@farmmaps/common-aol",
+    "version": "2.1.0",
+    "publishConfig": {
+        "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
+    },
+    "dependencies": {
+        "tslib": "^2.0.0",
+        "@types/openlayers": "4.3.x || 4.4.x",
+        "openlayers": "4.3.x || 4.4.x"
+    },
+    "peerDependencies": {
+        "@angular/core": ">=16.0.0",
+        "ngrx-store-localstorage": ">=16.0.0",
+        "@ngrx/effects": ">=16.0.0",
+        "@ngrx/router-store":">=16.0.0",
+        "@ngrx/store":">=16.0.0",
+        "tassign": ">=1.0.0",
+        "ol": ">=6.8.1"
+    }
+}

projects/common-aol/src/fm-aol/common-aol.module.ts

@@ -0,0 +1,114 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  MapComponent, ViewComponent, GraticuleComponent,
+  LayerGroupComponent, LayerTileComponent, LayerVectorComponent, LayerVectorTileComponent, LayerImageComponent,
+  SourceClusterComponent, SourceRasterComponent,
+  SourceBingmapsComponent, SourceOsmComponent, SourceVectorComponent, SourceVectorTileComponent, SourceXYZComponent, SourceTileUTFGridComponent, SourceTileWMSComponent,
+  SourceGeoJSONComponent, SourceTileWMTSComponent, SourceTileJSONComponent, SourceImageStaticComponent, SourceImageWMSComponent, FeatureComponent,
+  GeometryLinestringComponent, GeometryPointComponent, GeometryPolygonComponent,
+  CollectionCoordinatesComponent, CoordinateComponent,
+  StyleCircleComponent, StyleComponent, StyleFillComponent, StyleIconComponent, StyleStrokeComponent, StyleTextComponent,
+  ControlAttributionComponent, ControlMousePositionComponent,
+  // ControlFullScreenComponent, ControlRotateComponent, ControlZoomSliderComponent,
+  ControlOverviewMapComponent, ControlScaleLineComponent, ControlZoomComponent, 
+  ControlZoomToExtentComponent, DefaultControlComponent, ControlComponent,
+  FormatMVTComponent,
+  TileGridComponent, TileGridWMTSComponent,
+  DefaultInteractionComponent, DragRotateInteractionComponent, DragRotateAndZoomInteractionComponent,
+  DoubleClickZoomInteractionComponent, DragAndDropInteractionComponent, DragBoxInteractionComponent,
+  DragPanInteractionComponent, DragZoomInteractionComponent, MouseWheelZoomInteractionComponent,
+  PinchZoomInteractionComponent,  DrawInteractionComponent, SelectInteractionComponent, ModifyInteractionComponent, TranslateInteractionComponent,
+  OverlayComponent,
+  ContentComponent,
+  AttributionComponent,
+  AttributionsComponent
+} from './components';
+
+export * from './components';
+
+const COMPONENTS = [
+  MapComponent,
+
+  ViewComponent,
+  GraticuleComponent,
+
+  LayerGroupComponent,
+  LayerImageComponent,
+  LayerTileComponent,
+  LayerVectorComponent,
+  LayerVectorTileComponent,
+
+  SourceClusterComponent,
+  SourceRasterComponent,
+  SourceOsmComponent,
+  SourceBingmapsComponent,
+  SourceVectorComponent,
+  SourceXYZComponent,
+  SourceVectorTileComponent,
+  SourceTileUTFGridComponent,
+  SourceTileWMSComponent,
+  SourceTileWMTSComponent,
+  SourceTileJSONComponent,
+  SourceGeoJSONComponent,
+  SourceImageStaticComponent,
+  SourceImageWMSComponent,
+  FeatureComponent,
+  GeometryLinestringComponent,
+  GeometryPointComponent,
+  GeometryPolygonComponent,
+  CoordinateComponent,
+  CollectionCoordinatesComponent,
+
+  StyleComponent,
+  StyleCircleComponent,
+  StyleFillComponent,
+  StyleIconComponent,
+  StyleStrokeComponent,
+  StyleTextComponent,
+
+  DefaultControlComponent,
+  ControlComponent,
+  ControlAttributionComponent,
+  //ControlFullScreenComponent,
+  ControlMousePositionComponent,
+  ControlOverviewMapComponent,
+  //ControlRotateComponent,
+  ControlScaleLineComponent,
+  ControlZoomComponent,
+  //ControlZoomSliderComponent,
+  ControlZoomToExtentComponent,
+
+  FormatMVTComponent,
+  TileGridComponent,
+  TileGridWMTSComponent,
+
+  DefaultInteractionComponent,
+  DoubleClickZoomInteractionComponent,
+  DragAndDropInteractionComponent,
+  DragBoxInteractionComponent,
+  DragPanInteractionComponent,
+  DragRotateInteractionComponent,
+  DragRotateAndZoomInteractionComponent,
+  DragZoomInteractionComponent,
+  MouseWheelZoomInteractionComponent,
+  PinchZoomInteractionComponent,
+  DrawInteractionComponent,
+  SelectInteractionComponent,
+  ModifyInteractionComponent,
+  TranslateInteractionComponent,
+
+  OverlayComponent,
+  ContentComponent,
+  AttributionComponent,
+  AttributionsComponent
+];
+
+@NgModule({
+  declarations: COMPONENTS,
+  imports: [CommonModule],
+  exports: COMPONENTS
+})
+
+export class AppCommonAolModule {  
+}

projects/common-aol/src/fm-aol/components/attribution.component.ts

@@ -0,0 +1,21 @@
+import { Component, ElementRef, OnInit } from '@angular/core';
+import { Attribution } from 'openlayers';
+
+@Component({
+  selector: 'aol-attribution',
+  template: '<ng-content></ng-content>'
+})
+export class AttributionComponent implements OnInit {
+  instance: Attribution;
+  html: string;
+
+  constructor(
+    private elementRef: ElementRef
+  ) {
+  }
+
+  ngOnInit() {
+    this.html = this.elementRef.nativeElement.innerHTML;
+    this.instance = new Attribution(this);
+  }
+}

projects/common-aol/src/fm-aol/components/attributions.component.ts

@@ -0,0 +1,26 @@
+import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
+import { Attribution } from 'openlayers';
+import { SourceComponent } from './sources/source.component';
+import { AttributionComponent } from './attribution.component';
+
+@Component({
+  selector: 'aol-attributions',
+  template: '<ng-content></ng-content>'
+})
+export class AttributionsComponent implements AfterViewInit {
+  instance: Array<Attribution>;
+
+  @ContentChildren(AttributionComponent) attributions: QueryList<AttributionComponent>;
+
+  constructor(@Host() private source: SourceComponent) {
+  }
+
+  /* we can do this at the very end */
+  ngAfterViewInit() {
+    if (this.attributions.length) {
+      this.instance = this.attributions.map(cmp => cmp.instance);
+      // console.log('setting attributions:', this.instance);
+      this.source.instance.setAttributions(this.instance);
+    }
+  }
+}

projects/common-aol/src/fm-aol/components/content.component.ts

@@ -0,0 +1,13 @@
+import { Component, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'aol-content',
+  template: '<ng-content></ng-content>'
+})
+export class ContentComponent {
+
+  constructor(
+    public elementRef: ElementRef
+  ) {
+  }
+}

projects/common-aol/src/fm-aol/components/controls/attribution.component.ts

@@ -0,0 +1,32 @@
+import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { control } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-attribution',
+  template: ``
+})
+export class ControlAttributionComponent implements OnInit, OnDestroy {
+  public componentType: string = 'control';
+  instance: control.Attribution;
+  target: Element;
+  @Input() collapsible: boolean;
+
+  constructor(
+    private map: MapComponent,
+    private element: ElementRef
+  ) {
+  }
+
+  ngOnInit() {
+    this.target = this.element.nativeElement;
+    // console.log('ol.control.Attribution init: ', this);
+    this.instance = new control.Attribution(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-attribution');
+    this.map.instance.removeControl(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/controls/control.component.ts

@@ -0,0 +1,34 @@
+import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
+import { control } from 'openlayers';
+import { MapComponent } from '../map.component';
+import { ContentComponent } from '../content.component';
+
+@Component({
+  selector: 'aol-control',
+  template: `<ng-content></ng-content>`
+})
+export class ControlComponent implements OnInit, OnDestroy {
+  public componentType: string = 'control';
+  instance: control.Control;
+  element: Element;
+  @ContentChild(ContentComponent) content: ContentComponent;
+
+  constructor(
+    private map: MapComponent
+  ) {
+  }
+
+  ngOnInit() {
+    if (this.content) {
+      this.element = this.content.elementRef.nativeElement;
+      this.instance = new control.Control(this);
+      this.map.instance.addControl(this.instance);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.instance) {
+      this.map.instance.removeControl(this.instance);
+    }
+  }
+}

projects/common-aol/src/fm-aol/components/controls/default.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { control, Collection } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-defaults',
+  template: ''
+})
+export class DefaultControlComponent implements OnInit, OnDestroy {
+  instance: Collection<control.Control>;
+  @Input() attribution: boolean;
+  @Input() attributionOptions: olx.control.AttributionOptions;
+  @Input() rotate: boolean;
+  @Input() rotateOptions: olx.control.RotateOptions;
+  @Input() zoom: boolean;
+  @Input() zoomOptions: olx.control.ZoomOptions;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    // console.log('ol.control.defaults init: ', this);
+    this.instance = control.defaults(this);
+    this.instance.forEach((control) => this.map.instance.addControl(control));
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-defaults');
+    this.instance.forEach((control) => this.map.instance.removeControl(control));
+  }
+}

projects/common-aol/src/fm-aol/components/controls/fullscreen.component.ts

@@ -0,0 +1,28 @@
+// Commented-out due to error TS2345: Argument of type 'this' is not assignable to parameter of type 'FullScreenOptions'.
+
+// import { Component, OnDestroy, OnInit } from '@angular/core';
+// import { control } from 'openlayers';
+// import { MapComponent } from '../map.component';
+
+// @Component({
+//   selector: 'aol-control-fullscreen',
+//   template: `<ng-content></ng-content>`
+// })
+// export class ControlFullScreenComponent implements OnInit, OnDestroy {
+//   instance: control.FullScreen;
+
+//   constructor(private map: MapComponent) {
+//     // console.log('instancing aol-control-fullscreen');
+//   }
+
+//   ngOnInit() {
+//     this.instance = new control.FullScreen(this);
+//     this.map.instance.addControl(this.instance);
+//   }
+  
+
+//   ngOnDestroy() {
+//     // console.log('removing aol-control-fullscreen');
+//     this.map.instance.removeControl(this.instance);
+//   }
+// }

projects/common-aol/src/fm-aol/components/controls/index.ts

@@ -0,0 +1,11 @@
+export * from './attribution.component';
+export * from './control.component';
+export * from './default.component';
+//export * from './fullscreen.component';
+export * from './mouseposition.component';
+export * from './overviewmap.component';
+//export * from './rotate.component';
+export * from './scaleline.component';
+export * from './zoom.component';
+//export * from './zoomslider.component';
+export * from './zoomtoextent.component';

projects/common-aol/src/fm-aol/components/controls/mouseposition.component.ts

@@ -0,0 +1,32 @@
+import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { control, CoordinateFormatType, ProjectionLike } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-mouseposition',
+  template: ``
+})
+export class ControlMousePositionComponent implements OnInit, OnDestroy {
+  instance: control.MousePosition;
+  @Input() coordinateFormat: CoordinateFormatType;
+  @Input() projection: ProjectionLike;
+  target: Element;
+
+  constructor(
+    private map: MapComponent,
+    private element: ElementRef
+  ) {
+  }
+
+  ngOnInit() {
+    this.target = this.element.nativeElement;
+    // console.log('ol.control.MousePosition init: ', this);
+    this.instance = new control.MousePosition(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-mouseposition');
+    this.map.instance.removeControl(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/controls/overviewmap.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { control, View, layer } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-overviewmap',
+  template: `<ng-content></ng-content>`
+})
+export class ControlOverviewMapComponent implements OnInit, OnDestroy {
+  instance: control.OverviewMap;
+  @Input() collapsed: boolean;
+  @Input() collapseLabel: string;
+  @Input() collapsible: boolean;
+  @Input() label: string;
+  @Input() layers: layer.Layer[];
+  @Input() target: Element;
+  @Input() tipLabel: string;
+  @Input() view: View;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-overviewmap');
+  }
+
+  ngOnInit() {
+    this.instance = new control.OverviewMap(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-overviewmap');
+    this.map.instance.removeControl(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/controls/rotate.component.ts

@@ -0,0 +1,27 @@
+// Commented-out due to error TS2345: Argument of type 'this' is not assignable to parameter of type 'RotateOptions'.
+
+// import { Component, OnDestroy, OnInit } from '@angular/core';
+// import { control } from 'openlayers';
+// import { MapComponent } from '../map.component';
+
+// @Component({
+//   selector: 'aol-control-rotate',
+//   template: `<ng-content></ng-content>`
+// })
+// export class ControlRotateComponent implements OnInit, OnDestroy {
+//   instance: control.Rotate;
+
+//   constructor(private map: MapComponent) {
+//     // console.log('instancing aol-control-rotate');
+//   }
+
+//   ngOnInit() {
+//     this.instance = new control.Rotate(this);
+//     this.map.instance.addControl(this.instance);
+//   }
+
+//   ngOnDestroy() {
+//     // console.log('removing aol-control-rotate');
+//     this.map.instance.removeControl(this.instance);
+//   }
+// }

projects/common-aol/src/fm-aol/components/controls/scaleline.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { control } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-scaleline',
+  template: `<ng-content></ng-content>`
+})
+export class ControlScaleLineComponent implements OnInit, OnDestroy {
+  instance: control.ScaleLine;
+  @Input() units: string;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-scaleline');
+  }
+
+  ngOnInit() {
+    this.instance = new control.ScaleLine(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-scaleline');
+    this.map.instance.removeControl(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/controls/zoom.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { control } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-zoom',
+  template: `<ng-content></ng-content>`
+})
+export class ControlZoomComponent implements OnInit, OnDestroy {
+  instance: control.Zoom;
+
+  @Input() duration: number;
+  @Input() zoomInLabel: (string | Node);
+  @Input() zoomOutLabel: (string | Node);
+  @Input() zoomInTipLabel: string;
+  @Input() zoomOutTipLabel: string;
+  @Input() delta: number;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-zoom');
+  }
+
+  ngOnInit() {
+    this.instance = new control.Zoom(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-zoom');
+    this.map.instance.removeControl(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/controls/zoomslider.component.ts

@@ -0,0 +1,27 @@
+// Commented-out due to error TS2345: Argument of type 'this' is not assignable to parameter of type 'ZoomSliderOptions'.
+
+// import { Component, OnDestroy, OnInit } from '@angular/core';
+// import { control } from 'openlayers';
+// import { MapComponent } from '../map.component';
+
+// @Component({
+//   selector: 'aol-control-zoomslider',
+//   template: `<ng-content></ng-content>`
+// })
+// export class ControlZoomSliderComponent implements OnInit, OnDestroy {
+//   instance: control.ZoomSlider;
+
+//   constructor(private map: MapComponent) {
+//     // console.log('instancing aol-control-zoomslider');
+//   }
+
+//   ngOnInit() {
+//     this.instance = new control.ZoomSlider(this);
+//     this.map.instance.addControl(this.instance);
+//   }
+
+//   ngOnDestroy() {
+//     // console.log('removing aol-control-zoomslider');
+//     this.map.instance.removeControl(this.instance);
+//   }
+// }

projects/common-aol/src/fm-aol/components/controls/zoomtoextent.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { control, Extent } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-zoomtoextent',
+  template: `<ng-content></ng-content>`
+})
+export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
+  instance: control.ZoomToExtent;
+
+  @Input() className: string;
+  @Input() label: (string | Node);
+  @Input() tipLabel: string;
+  @Input() extent: Extent;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-zoomtoextent');
+  }
+
+  ngOnInit() {
+    this.instance = new control.ZoomToExtent(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-zoomtoextent');
+    this.map.instance.removeControl(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/coordinate.component.ts

@@ -0,0 +1,118 @@
+import { Component, Optional, OnChanges, Input, SimpleChanges } from '@angular/core';
+import { proj, Coordinate } from 'openlayers';
+import { MapComponent } from './map.component';
+import { GeometryPointComponent, GeometryLinestringComponent, GeometryPolygonComponent } from './geometry.components';
+import { ViewComponent } from './view.component';
+import { OverlayComponent } from './overlay.component';
+
+@Component({
+  selector: 'aol-coordinate',
+  template: `<div class="aol-coordinate"></div>`
+})
+export class CoordinateComponent implements OnChanges {
+  private host: any;
+
+  @Input() x: number;
+  @Input() y: number;
+  @Input() srid: string = 'EPSG:3857';
+
+  constructor(
+    private map: MapComponent,
+    @Optional() viewHost: ViewComponent,
+    @Optional() geometryPointHost: GeometryPointComponent,
+    @Optional() overlayHost: OverlayComponent
+  ) {
+    // console.log('instancing aol-coordinate');
+    if (geometryPointHost !== null) {
+      this.host = geometryPointHost;
+    } else if (viewHost !== null) {
+      this.host = viewHost;
+    } else if (overlayHost !== null) {
+      this.host = overlayHost;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    let referenceProjection: proj.Projection;
+    let referenceProjectionCode: string;
+    let transformedCoordinates: number[];
+
+    referenceProjection = this.map.instance.getView().getProjection();
+    referenceProjectionCode = referenceProjection ? referenceProjection.getCode() : 'EPSG:3857';
+
+    if (this.srid === referenceProjectionCode) {
+      transformedCoordinates = [this.x, this.y];
+    } else {
+      transformedCoordinates = proj.transform([this.x, this.y], this.srid, referenceProjectionCode);
+    }
+
+    switch (this.host.componentType) {
+      case 'geometry-point':
+        this.host.instance.setCoordinates(transformedCoordinates);
+        break;
+      case 'view':
+        this.host.instance.setCenter(transformedCoordinates);
+        break;
+      case 'overlay':
+        this.host.instance.setPosition(transformedCoordinates);
+        break;
+    }
+  }
+}
+
+@Component({
+  selector: 'aol-collection-coordinates',
+  template: `<div class="aol-collection-coordinates"></div>`
+})
+export class CollectionCoordinatesComponent implements OnChanges {
+  private host: any;
+
+  @Input() coordinates: [number, number][];
+  @Input() srid: string = 'EPSG:3857';
+
+  constructor(
+      private map: MapComponent,
+      @Optional() geometryLinestring: GeometryLinestringComponent,
+      @Optional() geometryPolygon: GeometryPolygonComponent
+  ) {
+    // console.log('creating aol-collection-coordinates');
+    if (!!geometryLinestring) {
+      this.host = geometryLinestring;
+    } else if (!!geometryPolygon) {
+      this.host = geometryPolygon;
+    } else {
+      throw new Error('aol-collection-coordinates must be a child of a geometry component');
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    let referenceProjection: proj.Projection;
+    let referenceProjectionCode: string;
+    let transformedCoordinates: Array<Coordinate>;
+
+    // console.log('coordinates change: ', this.coordinates);
+
+    referenceProjection = this.map.instance.getView().getProjection();
+    referenceProjectionCode = referenceProjection ? referenceProjection.getCode() : 'EPSG:3857';
+
+    if (this.srid === referenceProjectionCode) {
+      transformedCoordinates = this.coordinates;
+    } else {
+      transformedCoordinates = [];
+      this.coordinates.forEach(function (coordinate: Coordinate) {
+        transformedCoordinates.push(proj.transform(coordinate, this.srid, referenceProjectionCode));
+      }.bind(this));
+    }
+    switch (this.host.componentType) {
+      case 'geometry-linestring':
+        this.host.instance.setCoordinates(transformedCoordinates);
+        break;
+      case 'geometry-polygon':
+        this.host.instance.setCoordinates([transformedCoordinates]);
+        break;
+      default:
+        throw new Error('aol-collection-coordinates\' host is of unknown type: ' + this.host.componentType);
+        // break;
+    }
+  }
+}

projects/common-aol/src/fm-aol/components/feature.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, OnDestroy, OnChanges, Input, SimpleChanges } from '@angular/core';
+import { Feature } from 'openlayers';
+import { SourceVectorComponent } from './sources';
+
+@Component({
+  selector: 'aol-feature',
+  template: `<ng-content></ng-content>`
+})
+export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
+  public componentType = 'feature';
+  public instance: Feature;
+
+  @Input() id: string|number|undefined;
+
+  constructor(private host: SourceVectorComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new Feature();
+    if (this.id !== undefined) {
+      this.instance.setId(this.id);
+    }
+    this.host.instance.addFeature(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.host.instance.removeFeature(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance) {
+      this.instance.setId(this.id);
+    }
+  }
+}

projects/common-aol/src/fm-aol/components/formats/format.component.ts

@@ -0,0 +1,6 @@
+import { format } from 'openlayers';
+
+export class FormatComponent {
+  public instance: format.Feature;
+  public componentType = 'format';
+}

projects/common-aol/src/fm-aol/components/formats/index.ts

@@ -0,0 +1,2 @@
+export * from './format.component';
+export * from './mvt.component';

projects/common-aol/src/fm-aol/components/formats/mvt.component.ts

@@ -0,0 +1,25 @@
+import { Component, forwardRef, Input } from '@angular/core';
+import { format, geom } from 'openlayers';
+import { FormatComponent } from './format.component';
+
+@Component({
+  selector: 'aol-format-mvt',
+  template: '',
+  providers: [
+    { provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }
+  ]
+})
+export class FormatMVTComponent extends FormatComponent {
+  instance: format.MVT;
+
+  @Input() featureClass: (((geom: (geom.Geometry | { [k: string]: any })) => any) |
+    ((geom: geom.GeometryType, arg2: number[], arg3: (number[] | number[][]), arg4: { [k: string]: any }) => any));
+  @Input() geometryName: string;
+  @Input() layerName: string;
+  @Input() layers: string[];
+
+  constructor() {
+    super();
+    this.instance = new format.MVT(this);
+  }
+}

projects/common-aol/src/fm-aol/components/geometry.components.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { geom } from 'openlayers';
+import { FeatureComponent } from './feature.component';
+
+@Component({
+  selector: 'aol-geometry-linestring',
+  template: `<ng-content></ng-content>`
+})
+export class GeometryLinestringComponent implements OnInit, OnDestroy {
+  public componentType: string = 'geometry-linestring';
+  public instance: geom.LineString;
+
+  constructor(private host: FeatureComponent) {
+    // console.log('instancing aol-geometry-linestring');
+  }
+
+  ngOnInit() {
+    this.instance = new geom.LineString([]);
+    this.host.instance.setGeometry(this.instance);
+  }
+  ngOnDestroy() {
+    // this.host.setGeometry(null);
+  }
+}
+
+@Component({
+  selector: 'aol-geometry-point',
+  template: `<ng-content></ng-content>`
+})
+export class GeometryPointComponent implements OnInit, OnDestroy {
+  public componentType: string = 'geometry-point';
+  public instance: geom.Point;
+
+  constructor(private host: FeatureComponent) {
+    // console.log('creating aol-geometry-point');
+  }
+
+  ngOnInit() {
+    this.instance = new geom.Point([0, 0]); // defaulting coordinates to [0,0]. To be overridden in child component.
+    this.host.instance.setGeometry(this.instance);
+  }
+
+  ngOnDestroy() {
+    // this.host.setGeometry(null);
+  }
+}
+
+@Component({
+  selector: 'aol-geometry-polygon',
+  template: `<ng-content></ng-content>`
+})
+export class GeometryPolygonComponent implements OnInit, OnDestroy {
+  public componentType: string = 'geometry-polygon';
+  public instance: geom.Polygon;
+
+  constructor(private host: FeatureComponent) {
+    // console.log('creating aol-geometry-polygon');
+  }
+
+  ngOnInit() {
+    // defaulting coordinates to [0,0]. To be overridden in child component.
+    this.instance = new geom.Polygon([ [ [0, 0], [1, 0], [1, 1] ] ]);
+    this.host.instance.setGeometry(this.instance);
+  }
+
+  ngOnDestroy() {
+    // this.host.setGeometry(null);
+  }
+}

projects/common-aol/src/fm-aol/components/graticule.component.ts

@@ -0,0 +1,49 @@
+import { Component, Input, AfterContentInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Graticule, style } from 'openlayers';
+import { MapComponent } from './map.component';
+
+@Component({
+  selector: 'aol-graticule',
+  template: '<ng-content></ng-content>'
+})
+export class GraticuleComponent implements AfterContentInit, OnChanges {
+  instance: any;
+  public componentType: string = 'graticule';
+
+  @Input() strokeStyle: style.Stroke;
+  @Input() showLabels: boolean;
+  @Input() lonLabelPosition: number;
+  @Input() latLabelPosition: number;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    let properties: {[index: string]: any} = {};
+
+    if (!this.instance) {
+      return;
+    }
+
+    for (let key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        properties[key] = changes[key].currentValue;
+      }
+    }
+
+    if (properties) {
+      this.instance = new Graticule(properties);
+    }
+    this.instance.setMap(this.map.instance);
+  }
+
+  ngAfterContentInit(): void {
+    this.instance = new Graticule({
+      strokeStyle: this.strokeStyle,
+      showLabels: this.showLabels,
+      lonLabelPosition: this.lonLabelPosition,
+      latLabelPosition: this.latLabelPosition
+    });
+    this.instance.setMap(this.map.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/index.ts

@@ -0,0 +1,19 @@
+export * from './controls';
+export * from './formats';
+export * from './interactions';
+export * from './layers';
+export * from './sources';
+export * from './styles';
+
+export * from './attribution.component';
+export * from './attributions.component';
+export * from './content.component';
+export * from './coordinate.component';
+export * from './feature.component';
+export * from './geometry.components';
+export * from './graticule.component';
+export * from './map.component';
+export * from './overlay.component';
+export * from './tilegrid.component';
+export * from './tilegridwmts.component';
+export * from './view.component';

projects/common-aol/src/fm-aol/components/interactions/default.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { interaction, Collection } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-default',
+  template: ''
+})
+export class DefaultInteractionComponent implements OnInit, OnDestroy {
+  instance: Collection<interaction.Interaction>;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = interaction.defaults();
+    this.instance.forEach((interaction) => this.map.instance.addInteraction(interaction));
+  }
+
+  ngOnDestroy() {
+    this.instance.forEach((interaction) => this.map.instance.removeInteraction(interaction));
+  }
+}

projects/common-aol/src/fm-aol/components/interactions/doubleclickzoom.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { interaction } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-doubleclickzoom',
+  template: ''
+})
+export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DoubleClickZoom;
+
+  @Input() duration: number;
+  @Input() delta: number;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DoubleClickZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/interactions/draganddrop.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { interaction, format, ProjectionLike } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-draganddrop',
+  template: ''
+})
+export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DragAndDrop;
+
+  @Input() formatConstructors: ((n: format.Feature) => any)[];
+  @Input() projection: ProjectionLike;
+  @Input() target: Element;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DragAndDrop(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/interactions/dragbox.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { interaction, EventsConditionType, DragBoxEndConditionType } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragbox',
+  template: ''
+})
+export class DragBoxInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DragBox;
+
+  @Input() className: string;
+  @Input() condition: EventsConditionType;
+  @Input() boxEndCondition: DragBoxEndConditionType;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DragBox(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/interactions/dragpan.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { interaction, EventsConditionType, Kinetic } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragpan',
+  template: ''
+})
+export class DragPanInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DragPan;
+
+  @Input() condition: EventsConditionType;
+  @Input() kinetic: Kinetic;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DragPan(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/interactions/dragrotate.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { interaction, EventsConditionType } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragrotate',
+  template: ''
+})
+export class DragRotateInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DragRotate;
+
+  @Input() condition: EventsConditionType;
+  @Input() duration: number;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DragRotate(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/interactions/dragrotateandzoom.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { interaction, EventsConditionType } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragrotateandzoom',
+  template: ''
+})
+export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DragRotate;
+
+  @Input() condition: EventsConditionType;
+  @Input() duration: number;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DragRotateAndZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/interactions/dragzoom.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { interaction, EventsConditionType } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragzoom',
+  template: ''
+})
+export class DragZoomInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DragZoom;
+
+  @Input() className: string;
+  @Input() condition: EventsConditionType;
+  @Input() duration: number;
+  @Input() out: boolean;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DragZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/interactions/draw.component.ts

@@ -0,0 +1,50 @@
+import { Component, Input, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core';
+import { interaction } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-draw',
+  template: ''
+})
+export class DrawInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.Draw;
+
+  @Input() clickTolerance?: number;
+  @Input() features?: ol.Collection<ol.Feature>;
+  @Input() source?: ol.source.Vector;
+  @Input() snapTolerance?: number;
+  @Input() type: ol.geom.GeometryType;
+  @Input() maxPoints?: number;
+  @Input() minPoints?: number;
+  @Input() finishCondition?: ol.EventsConditionType;
+  @Input() style?: (ol.style.Style | ol.style.Style[] | ol.StyleFunction);
+  @Input() geometryFunction?: ol.DrawGeometryFunctionType;
+  @Input() geometryName?: string;
+  @Input() condition?: ol.EventsConditionType;
+  @Input() freehandCondition?: ol.EventsConditionType;
+  @Input() freehand?: boolean;
+  @Input() wrapX?: boolean;
+
+  @Output() onChange = new EventEmitter<ol.interaction.Draw.Event>();
+  @Output() onChangeActive = new EventEmitter<ol.interaction.Draw.Event>();
+  @Output() onDrawEnd = new EventEmitter<ol.interaction.Draw.Event>();
+  @Output() onDrawStart = new EventEmitter<ol.interaction.Draw.Event>();
+  @Output() onPropertyChange = new EventEmitter<ol.interaction.Draw.Event>();
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.Draw(this);
+    this.instance.on('change', (event: ol.interaction.Draw.Event) => this.onChange.emit(event));
+    this.instance.on('change:active', (event: ol.interaction.Draw.Event) => this.onChangeActive.emit(event));
+    this.instance.on('drawend', (event: ol.interaction.Draw.Event) => this.onDrawEnd.emit(event));
+    this.instance.on('drawstart', (event: ol.interaction.Draw.Event) => this.onDrawStart.emit(event));
+    this.instance.on('propertychange', (event: ol.interaction.Draw.Event) => this.onPropertyChange.emit(event));
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/common-aol/src/fm-aol/components/interactions/index.ts

@@ -0,0 +1,14 @@
+export * from './default.component';
+export * from './doubleclickzoom.component';
+export * from './draganddrop.component';
+export * from './dragbox.component';
+export * from './dragpan.component';
+export * from './dragrotate.component';
+export * from './dragrotateandzoom.component';
+export * from './dragzoom.component';
+export * from './mousewheelzoom.component';
+export * from './pinchzoom.component';
+export * from './draw.component';
+export * from './select.component';
+export * from './translate.component';
+export * from './modify.component';

projects/common-aol/src/fm-aol/components/interactions/modify.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { interaction, EventsConditionType, style, StyleFunction, Collection, Feature, source } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+    selector: 'aol-interaction-modify',
+    template: ''
+})
+export class ModifyInteractionComponent implements OnInit, OnDestroy {
+    instance: interaction.Modify;
+
+    @Input() condition?: EventsConditionType;
+    @Input() deleteCondition?: EventsConditionType;
+    @Input() pixelTolerance?: number;
+    @Input() style?: (style.Style | style.Style[] | StyleFunction);
+    @Input() features: Collection<Feature>;
+    @Input() wrapX?: boolean;
+    @Input() source?: source.Vector;
+
+    @Output() onModifyEnd = new EventEmitter<interaction.Modify.Event>();
+    @Output() onModifyStart = new EventEmitter<interaction.Modify.Event>();
+    @Output() onChange = new EventEmitter<interaction.Modify.Event>();
+    @Output() onChangeActive = new EventEmitter<interaction.Modify.Event>();
+    @Output() onPropertyChange = new EventEmitter<interaction.Modify.Event>();
+
+    constructor(private map: MapComponent) {
+    }
+
+    ngOnInit() {
+        this.instance = new interaction.Modify(this);
+        this.instance.on('change', (event: interaction.Modify.Event) => this.onChange.emit(event));
+        this.instance.on('change:active', (event: interaction.Modify.Event) => this.onChangeActive.emit(event));
+        this.instance.on('propertychange', (event: interaction.Modify.Event) => this.onPropertyChange.emit(event));
+        this.instance.on('modifyend', (event: interaction.Modify.Event) => this.onModifyEnd.emit(event));
+        this.instance.on('modifystart', (event: interaction.Modify.Event) => this.onModifyStart.emit(event));
+        this.map.instance.addInteraction(this.instance);
+    }
+
+    ngOnDestroy() {
+        this.map.instance.removeInteraction(this.instance);
+    }
+}

projects/common-aol/src/fm-aol/components/interactions/mousewheelzoom.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { interaction } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-mousewheelzoom',
+  template: ''
+})
+export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.MouseWheelZoom;
+  @Input() duration: number;
+  @Input() timeout: number;
+  @Input() useAnchor: boolean;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.MouseWheelZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}