Update nav header design

* Add material button toggle for decorations

docs/infra/codestyle/cc-intellij-idea-javascript-typescript-style.xml

@@ -1,9 +1,10 @@
-<code_scheme name="OPT-CC copy" version="173">
+<code_scheme name="OPT-CC" version="173">
   <option name="FORMATTER_TAGS_ENABLED" value="true" />
   <JSCodeStyleSettings>
     <option name="USE_CHAINED_CALLS_GROUP_INDENTS" value="true" />
   </JSCodeStyleSettings>
   <TypeScriptCodeStyleSettings>
+    <option name="USE_DOUBLE_QUOTES" value="false" />
     <option name="USE_CHAINED_CALLS_GROUP_INDENTS" value="true" />
   </TypeScriptCodeStyleSettings>
   <codeStyleSettings language="JavaScript">

package-lock.json

@@ -5,28 +5,25 @@
   "requires": true,
   "dependencies": {
     "ajv": {
-      "version": "5.3.0",
+      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
-      "integrity": "sha1-RBT/dKUIecII7l/cgm4ywwNUnto=",
+      "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
       "dev": true,
       "requires": {
-        "co": "^4.6.0",
+        "co": "4.6.0",
-        "fast-deep-equal": "^1.0.0",
+        "fast-deep-equal": "1.1.0",
-        "fast-json-stable-stringify": "^2.0.0",
+        "fast-json-stable-stringify": "2.0.0",
-        "json-schema-traverse": "^0.3.0"
+        "json-schema-traverse": "0.3.1"
       }
     },
-    "ansi-regex": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-      "integrity": "sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=",
-      "dev": true
-    },
     "ansi-styles": {
-      "version": "1.1.0",
+      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94=",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true
+      "dev": true,
+      "requires": {
+        "color-convert": "1.9.2"
+      }
     },
     "asn1": {
       "version": "0.2.3",
@@ -53,29 +50,26 @@
       "dev": true
     },
     "aws4": {
-      "version": "1.6.0",
+      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz",
-      "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
+      "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==",
       "dev": true
     },
     "bcrypt-pbkdf": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-      "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
       "dev": true,
       "optional": true,
       "requires": {
-        "tweetnacl": "^0.14.3"
+        "tweetnacl": "0.14.5"
       }
     },
-    "boom": {
+    "builtin-modules": {
-      "version": "4.3.1",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
-      "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=",
+      "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
-      "dev": true,
+      "dev": true
-      "requires": {
-        "hoek": "4.x.x"
-      }
     },
     "caseless": {
       "version": "0.12.0",
@@ -84,23 +78,24 @@
       "dev": true
     },
     "chalk": {
-      "version": "0.5.1",
+      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
-      "integrity": "sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=",
+      "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
       "dev": true,
       "requires": {
-        "ansi-styles": "^1.1.0",
+        "ansi-styles": "3.2.1",
-        "escape-string-regexp": "^1.0.0",
+        "escape-string-regexp": "1.0.5",
-        "has-ansi": "^0.1.0",
+        "supports-color": "5.4.0"
-        "strip-ansi": "^0.3.0",
-        "supports-color": "^0.2.0"
       },
       "dependencies": {
         "supports-color": {
-          "version": "0.2.0",
+          "version": "5.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
-          "integrity": "sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=",
+          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
-          "dev": true
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
         }
       }
     },
@@ -110,13 +105,28 @@
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
       "dev": true
     },
-    "combined-stream": {
+    "color-convert": {
-      "version": "1.0.5",
+      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz",
-      "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
+      "integrity": "sha512-3NUJZdhMhcdPn8vJ9v2UQJoH0qqoGUkYTgFEPZaPjEtwmmKUfNV46zZmgB2M5M4DCEQHMaCfWHCxiBflLm04Tg==",
       "dev": true,
       "requires": {
-        "delayed-stream": "~1.0.0"
+        "color-name": "1.1.1"
+      }
+    },
+    "color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=",
+      "dev": true
+    },
+    "combined-stream": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
+      "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
+      "dev": true,
+      "requires": {
+        "delayed-stream": "1.0.0"
       }
     },
     "commander": {
@@ -126,25 +136,26 @@
       "dev": true
     },
     "concurrently": {
-      "version": "3.5.0",
+      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-3.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-3.6.0.tgz",
-      "integrity": "sha1-jPG3cHppFqeKT/W3e7BN7FSzebI=",
+      "integrity": "sha512-6XiIYtYzmGEccNZFkih5JOH92jLA4ulZArAYy5j1uDSdrPLB3KzdE8GW7t2fHPcg9ry2+5LP9IEYzXzxw9lFdA==",
       "dev": true,
       "requires": {
-        "chalk": "0.5.1",
+        "chalk": "2.4.1",
         "commander": "2.6.0",
-        "date-fns": "^1.23.0",
+        "date-fns": "1.29.0",
-        "lodash": "^4.5.1",
+        "lodash": "4.17.10",
+        "read-pkg": "3.0.0",
         "rx": "2.3.24",
-        "spawn-command": "^0.0.2-1",
+        "spawn-command": "0.0.2-1",
-        "supports-color": "^3.2.3",
+        "supports-color": "3.2.3",
-        "tree-kill": "^1.1.0"
+        "tree-kill": "1.2.0"
       }
     },
     "core-js": {
-      "version": "2.5.1",
+      "version": "2.5.7",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
-      "integrity": "sha1-rmh03GaTd4m4B1T/VCjfZoGcpQs=",
+      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==",
       "dev": true
     },
     "core-util-is": {
@@ -153,33 +164,13 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
-    "cryptiles": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz",
-      "integrity": "sha1-qJ+7Ig9c4l7FboxKqKT9e1sNKf4=",
-      "dev": true,
-      "requires": {
-        "boom": "5.x.x"
-      },
-      "dependencies": {
-        "boom": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/boom/-/boom-5.2.0.tgz",
-          "integrity": "sha512-Z5BTk6ZRe4tXXQlkqftmsAUANpXmuwlsF5Oov8ThoMbQRzdGTA1ngYRW160GexgOgjsFOKJz0LYhoNi+2AMBUw==",
-          "dev": true,
-          "requires": {
-            "hoek": "4.x.x"
-          }
-        }
-      }
-    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
       "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
       "dev": true,
       "requires": {
-        "assert-plus": "^1.0.0"
+        "assert-plus": "1.0.0"
       }
     },
     "date-fns": {
@@ -201,7 +192,16 @@
       "dev": true,
       "optional": true,
       "requires": {
-        "jsbn": "~0.1.0"
+        "jsbn": "0.1.1"
+      }
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "0.2.1"
       }
     },
     "escape-string-regexp": {
@@ -223,9 +223,9 @@
       "dev": true
     },
     "fast-deep-equal": {
-      "version": "1.0.0",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
-      "integrity": "sha1-liVqO8l1WV6zbYLpkp0GDYk0Of8=",
+      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
       "dev": true
     },
     "fast-json-stable-stringify": {
@@ -241,14 +241,14 @@
       "dev": true
     },
     "form-data": {
-      "version": "2.3.1",
+      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz",
-      "integrity": "sha1-b7lPvXGIUwbXPRXMSX/kzE7NRL8=",
+      "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=",
       "dev": true,
       "requires": {
-        "asynckit": "^0.4.0",
+        "asynckit": "0.4.0",
-        "combined-stream": "^1.0.5",
+        "combined-stream": "1.0.6",
-        "mime-types": "^2.1.12"
+        "mime-types": "2.1.18"
       }
     },
     "getpass": {
@@ -257,9 +257,15 @@
       "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
       "dev": true,
       "requires": {
-        "assert-plus": "^1.0.0"
+        "assert-plus": "1.0.0"
       }
     },
+    "graceful-fs": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+      "dev": true
+    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -272,41 +278,26 @@
       "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=",
       "dev": true,
       "requires": {
-        "ajv": "^5.1.0",
+        "ajv": "5.5.2",
-        "har-schema": "^2.0.0"
+        "har-schema": "2.0.0"
-      }
-    },
-    "has-ansi": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-      "integrity": "sha1-hPJlqujA5qiKEtcCKJS3VoiUxi4=",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "^0.2.0"
       }
     },
     "has-flag": {
-      "version": "1.0.0",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
       "dev": true
     },
-    "hawk": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz",
-      "integrity": "sha512-miowhl2+U7Qle4vdLqDdPt9m09K6yZhkLDTWGoUiUzrQCn+mHHSmfJgAyGaLRZbPmTqfFFjRV1QWCW0VWUJBbQ==",
-      "dev": true,
-      "requires": {
-        "boom": "4.x.x",
-        "cryptiles": "3.x.x",
-        "hoek": "4.x.x",
-        "sntp": "2.x.x"
-      }
-    },
     "hoek": {
-      "version": "4.2.0",
+      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
-      "integrity": "sha512-v0XCLxICi9nPfYrS9RL8HbYnXi9obYAeLbSP00BmnZwCK9+Ih9WOjoZ8YoHCoav2csqn4FOz4Orldsy2dmDwmQ==",
+      "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
+      "dev": true
+    },
+    "hosted-git-info": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.6.1.tgz",
+      "integrity": "sha512-Ba4+0M4YvIDUUsprMjhVTU1yN9F2/LJSAl69ZpzaLT4l4j5mwTS6jqqW9Ojvj6lKz/veqPzpJBqGbXspOb533A==",
       "dev": true
     },
     "http-signature": {
@@ -315,9 +306,24 @@
       "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
       "dev": true,
       "requires": {
-        "assert-plus": "^1.0.0",
+        "assert-plus": "1.0.0",
-        "jsprim": "^1.2.2",
+        "jsprim": "1.4.1",
-        "sshpk": "^1.7.0"
+        "sshpk": "1.14.2"
+      }
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "dev": true
+    },
+    "is-builtin-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
+      "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
+      "dev": true,
+      "requires": {
+        "builtin-modules": "1.1.1"
       }
     },
     "is-typedarray": {
@@ -350,11 +356,11 @@
       "integrity": "sha1-M4WseQGSEwy+Iw6ALsAskhW7/to=",
       "dev": true,
       "requires": {
-        "hoek": "4.x.x",
+        "hoek": "4.2.1",
-        "isemail": "2.x.x",
+        "isemail": "2.2.1",
-        "items": "2.x.x",
+        "items": "2.1.1",
-        "moment": "2.x.x",
+        "moment": "2.22.2",
-        "topo": "2.x.x"
+        "topo": "2.0.2"
       }
     },
     "jsbn": {
@@ -364,6 +370,12 @@
       "dev": true,
       "optional": true
     },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
@@ -394,25 +406,37 @@
         "verror": "1.10.0"
       }
     },
+    "load-json-file": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+      "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "parse-json": "4.0.0",
+        "pify": "3.0.0",
+        "strip-bom": "3.0.0"
+      }
+    },
     "lodash": {
-      "version": "4.17.4",
+      "version": "4.17.10",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
-      "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
+      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
       "dev": true
     },
     "mime-db": {
-      "version": "1.30.0",
+      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.30.0.tgz",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
-      "integrity": "sha1-dMZD2i3Z1qRTmZY0ZbJtXKfXHwE=",
+      "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
       "dev": true
     },
     "mime-types": {
-      "version": "2.1.17",
+      "version": "2.1.18",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.17.tgz",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
-      "integrity": "sha1-Cdejk/A+mVp5+K+Fe3Cp4KsWVXo=",
+      "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
       "dev": true,
       "requires": {
-        "mime-db": "~1.30.0"
+        "mime-db": "1.33.0"
       }
     },
     "minimist": {
@@ -422,23 +446,60 @@
       "dev": true
     },
     "moment": {
-      "version": "2.19.1",
+      "version": "2.22.2",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.19.1.tgz",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
-      "integrity": "sha1-VtoaLRy/AdOLfhr8McELz6GSkWc=",
+      "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=",
       "dev": true
     },
+    "normalize-package-data": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
+      "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "2.6.1",
+        "is-builtin-module": "1.0.0",
+        "semver": "5.5.0",
+        "validate-npm-package-license": "3.0.3"
+      }
+    },
     "oauth-sign": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
       "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
       "dev": true
     },
+    "parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "dev": true,
+      "requires": {
+        "error-ex": "1.3.2",
+        "json-parse-better-errors": "1.0.2"
+      }
+    },
+    "path-type": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+      "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+      "dev": true,
+      "requires": {
+        "pify": "3.0.0"
+      }
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
       "dev": true
     },
+    "pify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+      "dev": true
+    },
     "punycode": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
@@ -446,39 +507,48 @@
       "dev": true
     },
     "qs": {
-      "version": "6.5.1",
+      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
       "dev": true
     },
-    "request": {
+    "read-pkg": {
-      "version": "2.83.0",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.83.0.tgz",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
-      "integrity": "sha512-lR3gD69osqm6EYLk9wB/G1W/laGWjzH90t1vEa2xuxHD5KUrSzp9pUSfTm+YC5Nxt2T8nMPEvKlhbQayU7bgFw==",
+      "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
       "dev": true,
       "requires": {
-        "aws-sign2": "~0.7.0",
+        "load-json-file": "4.0.0",
-        "aws4": "^1.6.0",
+        "normalize-package-data": "2.4.0",
-        "caseless": "~0.12.0",
+        "path-type": "3.0.0"
-        "combined-stream": "~1.0.5",
+      }
-        "extend": "~3.0.1",
+    },
-        "forever-agent": "~0.6.1",
+    "request": {
-        "form-data": "~2.3.1",
+      "version": "2.87.0",
-        "har-validator": "~5.0.3",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz",
-        "hawk": "~6.0.2",
+      "integrity": "sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==",
-        "http-signature": "~1.2.0",
+      "dev": true,
-        "is-typedarray": "~1.0.0",
+      "requires": {
-        "isstream": "~0.1.2",
+        "aws-sign2": "0.7.0",
-        "json-stringify-safe": "~5.0.1",
+        "aws4": "1.7.0",
-        "mime-types": "~2.1.17",
+        "caseless": "0.12.0",
-        "oauth-sign": "~0.8.2",
+        "combined-stream": "1.0.6",
-        "performance-now": "^2.1.0",
+        "extend": "3.0.1",
-        "qs": "~6.5.1",
+        "forever-agent": "0.6.1",
-        "safe-buffer": "^5.1.1",
+        "form-data": "2.3.2",
-        "stringstream": "~0.0.5",
+        "har-validator": "5.0.3",
-        "tough-cookie": "~2.3.3",
+        "http-signature": "1.2.0",
-        "tunnel-agent": "^0.6.0",
+        "is-typedarray": "1.0.0",
-        "uuid": "^3.1.0"
+        "isstream": "0.1.2",
+        "json-stringify-safe": "5.0.1",
+        "mime-types": "2.1.18",
+        "oauth-sign": "0.8.2",
+        "performance-now": "2.1.0",
+        "qs": "6.5.2",
+        "safe-buffer": "5.1.2",
+        "tough-cookie": "2.3.4",
+        "tunnel-agent": "0.6.0",
+        "uuid": "3.3.2"
       }
     },
     "rx": {
@@ -488,19 +558,22 @@
       "dev": true
     },
     "safe-buffer": {
-      "version": "5.1.1",
+      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true
     },
-    "sntp": {
+    "safer-buffer": {
-      "version": "2.1.0",
+      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/sntp/-/sntp-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-FL1b58BDrqS3A11lJ0zEdnJ3UOKqVxawAkF3k7F0CVN7VQ34aZrV+G8BZ1WC9ZL7NyrwsW0oviwsWDgRuVYtJg==",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true,
+      "dev": true
-      "requires": {
+    },
-        "hoek": "4.x.x"
+    "semver": {
-      }
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
+      "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
+      "dev": true
     },
     "spawn-command": {
       "version": "0.0.2-1",
@@ -508,44 +581,76 @@
       "integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=",
       "dev": true
     },
-    "sshpk": {
+    "spdx-correct": {
-      "version": "1.13.1",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz",
-      "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=",
+      "integrity": "sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==",
       "dev": true,
       "requires": {
-        "asn1": "~0.2.3",
+        "spdx-expression-parse": "3.0.0",
-        "assert-plus": "^1.0.0",
+        "spdx-license-ids": "3.0.0"
-        "bcrypt-pbkdf": "^1.0.0",
-        "dashdash": "^1.12.0",
-        "ecc-jsbn": "~0.1.1",
-        "getpass": "^0.1.1",
-        "jsbn": "~0.1.0",
-        "tweetnacl": "~0.14.0"
       }
     },
-    "stringstream": {
+    "spdx-exceptions": {
-      "version": "0.0.5",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz",
-      "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
+      "integrity": "sha512-4K1NsmrlCU1JJgUrtgEeTVyfx8VaYea9J9LvARxhbHtVtohPs/gFGG5yy49beySjlIMhhXZ4QqujIZEfS4l6Cg==",
       "dev": true
     },
-    "strip-ansi": {
+    "spdx-expression-parse": {
-      "version": "0.3.0",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
-      "integrity": "sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=",
+      "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
       "dev": true,
       "requires": {
-        "ansi-regex": "^0.2.1"
+        "spdx-exceptions": "2.1.0",
+        "spdx-license-ids": "3.0.0"
       }
     },
+    "spdx-license-ids": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz",
+      "integrity": "sha512-2+EPwgbnmOIl8HjGBXXMd9NAu02vLjOO1nWw4kmeRDFyHn+M/ETfHxQUK0oXg8ctgVnl9t3rosNVsZ1jG61nDA==",
+      "dev": true
+    },
+    "sshpk": {
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz",
+      "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=",
+      "dev": true,
+      "requires": {
+        "asn1": "0.2.3",
+        "assert-plus": "1.0.0",
+        "bcrypt-pbkdf": "1.0.2",
+        "dashdash": "1.14.1",
+        "ecc-jsbn": "0.1.1",
+        "getpass": "0.1.7",
+        "jsbn": "0.1.1",
+        "safer-buffer": "2.1.2",
+        "tweetnacl": "0.14.5"
+      }
+    },
+    "strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+      "dev": true
+    },
     "supports-color": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
       "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
       "dev": true,
       "requires": {
-        "has-flag": "^1.0.0"
+        "has-flag": "1.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        }
       }
     },
     "topo": {
@@ -554,16 +659,16 @@
       "integrity": "sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=",
       "dev": true,
       "requires": {
-        "hoek": "4.x.x"
+        "hoek": "4.2.1"
       }
     },
     "tough-cookie": {
-      "version": "2.3.3",
+      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz",
-      "integrity": "sha1-C2GKVWW23qkL80JdBNVe3EdadWE=",
+      "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==",
       "dev": true,
       "requires": {
-        "punycode": "^1.4.1"
+        "punycode": "1.4.1"
       }
     },
     "tree-kill": {
@@ -578,7 +683,7 @@
       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
       "dev": true,
       "requires": {
-        "safe-buffer": "^5.0.1"
+        "safe-buffer": "5.1.2"
       }
     },
     "tweetnacl": {
@@ -589,33 +694,43 @@
       "optional": true
     },
     "uuid": {
-      "version": "3.1.0",
+      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-      "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g==",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
       "dev": true
     },
+    "validate-npm-package-license": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz",
+      "integrity": "sha512-63ZOUnL4SIXj4L0NixR3L1lcjO38crAbgrTpl28t8jjrfuiOBL5Iygm+60qPs/KsZGzPNg6Smnc/oY16QTjF0g==",
+      "dev": true,
+      "requires": {
+        "spdx-correct": "3.0.0",
+        "spdx-expression-parse": "3.0.0"
+      }
+    },
     "verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
       "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
       "dev": true,
       "requires": {
-        "assert-plus": "^1.0.0",
+        "assert-plus": "1.0.0",
         "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
+        "extsprintf": "1.3.0"
       }
     },
     "wait-on": {
-      "version": "2.0.2",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-2.1.0.tgz",
-      "integrity": "sha1-CoT9BwJMb8Joyw6r5YW+IXqvK6o=",
+      "integrity": "sha512-hDwJ674+7dfiiK/cxtYCwPxlnjXDjto/pCz1PF02sXUhqCqCWsgvxZln0699PReWqXXgkxqkF6DDo5Rj9sjNvw==",
       "dev": true,
       "requires": {
-        "core-js": "^2.4.1",
+        "core-js": "2.5.7",
-        "joi": "^9.2.0",
+        "joi": "9.2.0",
-        "minimist": "^1.2.0",
+        "minimist": "1.2.0",
-        "request": "^2.78.0",
+        "request": "2.87.0",
-        "rx": "^4.1.0"
+        "rx": "4.1.0"
       },
       "dependencies": {
         "rx": {

static/package.json

@@ -36,13 +36,11 @@
     "jquery": "^3.1.0",
     "jquery-ui": "^1.12.0",
     "jquery-ui-bundle": "^1.11.4",
-    "ngx-bootstrap": "^3.0.1",
     "ngx-clipboard": "^11.1.1",
     "ngx-cookie-service": "^1.0.9",
     "ngx-infinite-scroll": "^0.5.2",
     "rxjs-compat": "^6.2.1",
     "ts-helpers": "^1.1.2",
-    "typescript": "^2.7.2",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
@@ -59,6 +57,7 @@
     "protractor-jasmine2-screenshot-reporter": "^0.3.2",
     "ts-node": "1.2.1",
     "tslint": "^5.10.0",
-    "@angular-devkit/build-angular": "~0.6.8"
+    "@angular-devkit/build-angular": "~0.6.8",
+    "typescript": "^2.7.2"
   }
 }

static/src/app/app.component.css

@@ -30,12 +30,12 @@ li {
 }
 
 .version-label {
-  display: block;
+  position: relative;
-  position: fixed;
+  margin-right: -30px;
-  top: 32px;
+  top: 27px;
-  left: 106px;
+  left: -50px;
   font-size: 12px;
-  color: #7e7d64;
+  color: #bebebe;
 }
 
 #scrollTopBtn {

static/src/app/app.component.html

@@ -3,11 +3,6 @@
     <div class="container-fluid">
 
       <div class="navbar-header">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
         <a class="navbar-brand" href="#" style="padding-top: 2px">
           <img height="40px" src="assets/opt-logo-klein.png">
         </a>

static/src/app/decorations/decoration-list/decoration-list.component.html

@@ -1,10 +1,16 @@
 <div class="select-list">
   <div class="input-group list-header pull-left">
-    <div class="btn-group" (click)="filterDecorations()">
+    <mat-button-toggle-group #group="matButtonToggleGroup">
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="BLUFOR" uncheckable>{{fraction.BLUFOR}}</label>
+      <mat-button-toggle value="BLUFOR" (change)="filterDecorations(group)">
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="OPFOR" uncheckable>{{fraction.OPFOR}}</label>
+        {{fraction.BLUFOR}}
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="GLOBAL" uncheckable>Global</label>
+      </mat-button-toggle>
-    </div>
+      <mat-button-toggle value="OPFOR" (change)="filterDecorations(group)">
+        {{fraction.OPFOR}}
+      </mat-button-toggle>
+      <mat-button-toggle value="GLOBAL" (change)="filterDecorations(group)">
+        Global
+      </mat-button-toggle>
+    </mat-button-toggle-group>
     <a class="pull-right btn btn-success" (click)="openNewDecorationForm()">+</a>
   </div>
 

static/src/app/decorations/decoration-list/decoration-list.component.ts

@@ -7,6 +7,8 @@ import {Observable} from 'rxjs/Observable';
 import {Decoration} from '../../models/model-interfaces';
 import {DecorationService} from '../../services/army-management/decoration.service';
 import {Fraction} from '../../utils/fraction.enum';
+import {MatButtonToggleGroup} from '@angular/material';
+import {UIHelpers} from '../../utils/global.helpers';
 
 @Component({
   selector: 'decoration-list',
@@ -21,7 +23,7 @@ export class DecorationListComponent implements OnInit {
 
   searchTerm = new FormControl();
 
-  public radioModel: string;
+  radioModel: string = '';
 
   readonly fraction = Fraction;
 
@@ -73,7 +75,8 @@ export class DecorationListComponent implements OnInit {
     }
   }
 
-  filterDecorations() {
+  filterDecorations(group?: MatButtonToggleGroup) {
+    this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
     this.decorations$ = this.decorationService.findDecorations(this.searchTerm.value, this.radioModel);
   }
 

static/src/app/decorations/decoration.module.ts

@@ -4,11 +4,11 @@ import {CommonModule} from '@angular/common';
 import {DecorationStore} from '../services/stores/decoration.store';
 import {DecorationService} from '../services/army-management/decoration.service';
 import {NgModule} from '@angular/core';
-import {ButtonsModule} from 'ngx-bootstrap';
+import {MatButtonToggleModule} from '@angular/material';
 
 @NgModule({
   declarations: decorationsRoutingComponents,
-  imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), decorationRoutesModule],
+  imports: [CommonModule, SharedModule, MatButtonToggleModule, decorationRoutesModule],
   providers: [DecorationStore, DecorationService]
 })
 export class DecorationsModule {

static/src/app/pub/public.module.ts

@@ -2,13 +2,12 @@ import {NgModule} from '@angular/core';
 import {SharedModule} from '../shared.module';
 import {CommonModule} from '@angular/common';
 import {RankService} from '../services/army-management/rank.service';
-import {ButtonsModule} from 'ngx-bootstrap';
 import {pubRouterModule, pubRoutingComponents} from './public.routing';
 import {DecorationService} from '../services/army-management/decoration.service';
 
 @NgModule({
   declarations: pubRoutingComponents,
-  imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), pubRouterModule],
+  imports: [CommonModule, SharedModule, pubRouterModule],
   providers: [DecorationService, RankService]
 })
 export class PublicModule {

static/src/app/statistic/stats.module.ts

@@ -4,12 +4,11 @@ import {SharedModule} from '../shared.module';
 import {statsRouterModule, statsRoutingComponents} from './stats.routing';
 import {WarService} from '../services/logs/war.service';
 import {NgxChartsModule} from '@swimlane/ngx-charts';
-import {AccordionModule, ButtonsModule} from 'ngx-bootstrap';
 import {CampaignService} from '../services/logs/campaign.service';
 import {NgxDatatableModule} from '@swimlane/ngx-datatable';
 import {PlayerService} from '../services/logs/player.service';
 import {LogsService} from '../services/logs/logs.service';
-import {MatButtonToggleModule, MatExpansionModule, MatFormFieldModule} from '@angular/material';
+import {MatButtonToggleModule, MatExpansionModule} from '@angular/material';
 
 @NgModule({
   declarations: statsRoutingComponents,

static/src/app/statistic/war/fraction-stats/fraction-stats.component.html

@@ -4,33 +4,8 @@
                            #group="matButtonToggleGroup"
                            [(ngModel)]="activeChartSelect"
                            (change)="selectChart(group.value)">
-    <!--this does not work with ngFor due to deselect bug of ng-material-->
+    <mat-button-toggle *ngFor="let label of labelsAsString" value="{{label}}">
-    <mat-button-toggle value="{{labels.points}}">
+      {{label}}
-      {{labels.points}}
-    </mat-button-toggle>
-    <mat-button-toggle value="{{labels.budget}}">
-      {{labels.budget}}
-    </mat-button-toggle>
-    <mat-button-toggle value="{{labels.kill}}">
-      {{labels.kill}}
-    </mat-button-toggle>
-    <mat-button-toggle value="{{labels.friendlyFire}}">
-      {{labels.friendlyFire}}
-    </mat-button-toggle>
-    <mat-button-toggle value="{{labels.vehicle}}">
-      {{labels.vehicle}}
-    </mat-button-toggle>
-    <mat-button-toggle value="{{labels.revive}}">
-      {{labels.revive}}
-    </mat-button-toggle>
-    <mat-button-toggle value="{{labels.stabilize}}">
-      {{labels.stabilize}}
-    </mat-button-toggle>
-    <mat-button-toggle value="{{labels.transport}}">
-      {{labels.transport}}
-    </mat-button-toggle>
-    <mat-button-toggle value="{{labels.flag}}">
-      {{labels.flag}}
     </mat-button-toggle>
   </mat-button-toggle-group>
 

static/src/app/statistic/war/fraction-stats/fraction-stats.component.ts

@@ -55,6 +55,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
     stabilize: 'Stabilisiert',
     flag: 'Flaggenbesitz'
   };
+  readonly labelsAsString = Object.keys(this.labels).map((key) => this.labels[key]);
 
   lineChartLabel: string = this.labels.points;
 

static/src/app/users/user-list/user-list.component.html

@@ -1,10 +1,16 @@
 <div class="select-list">
   <div class="input-group list-header pull-left">
-    <div class="btn-group" (click)="filterUsers()">
+    <mat-button-toggle-group #group="matButtonToggleGroup">
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="BLUFOR" uncheckable>{{fraction.BLUFOR}}</label>
+      <mat-button-toggle value="BLUFOR" (change)="filterUsers(undefined, group)">
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="OPFOR" uncheckable>{{fraction.OPFOR}}</label>
+        {{fraction.BLUFOR}}
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="UNASSIGNED" uncheckable>Ohne Squad</label>
+      </mat-button-toggle>
-    </div>
+      <mat-button-toggle value="OPFOR" (change)="filterUsers(undefined, group)">
+        {{fraction.OPFOR}}
+      </mat-button-toggle>
+      <mat-button-toggle value="UNASSIGNED" (change)="filterUsers(undefined, group)">
+        Ohne Squad
+      </mat-button-toggle>
+    </mat-button-toggle-group>
     <a class="pull-right btn btn-success" (click)="openNewUserForm()">+</a>
   </div>
 

static/src/app/users/user-list/user-list.component.ts

@@ -8,6 +8,8 @@ import {UserService} from '../../services/army-management/user.service';
 import {User} from '../../models/model-interfaces';
 import {ADD, LOAD} from '../../services/stores/user.store';
 import {Fraction} from '../../utils/fraction.enum';
+import {MatButtonToggleGroup} from '@angular/material';
+import {UIHelpers} from '../../utils/global.helpers';
 
 @Component({
   selector: 'squad-list',
@@ -22,7 +24,7 @@ export class UserListComponent implements OnInit {
 
   searchTerm = new FormControl();
 
-  public radioModel: string;
+  radioModel: string = '';
 
   throttle = 300;
 
@@ -80,11 +82,12 @@ export class UserListComponent implements OnInit {
     }
   }
 
-  filterUsers(action?) {
+  filterUsers(action?, group?:MatButtonToggleGroup) {
     if (!action || action === LOAD) {
       this.offset = 0;
       this.limit = 20;
     }
+    this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
     return this.users$ = this.userService.findUsers(this.searchTerm.value, this.radioModel,
       null, this.limit, this.offset, action);
   }

static/src/app/users/users.module.ts

@@ -2,12 +2,12 @@ import {NgModule} from '@angular/core';
 import {usersRouterModule, usersRoutingComponents} from './users.routing';
 import {CommonModule} from '@angular/common';
 import {SharedModule} from '../shared.module';
-import {ButtonsModule} from 'ngx-bootstrap';
 import {InfiniteScrollModule} from 'ngx-infinite-scroll';
+import {MatButtonToggleModule} from '@angular/material';
 
 @NgModule({
   declarations: usersRoutingComponents,
-  imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), InfiniteScrollModule, usersRouterModule],
+  imports: [CommonModule, SharedModule, MatButtonToggleModule, InfiniteScrollModule, usersRouterModule],
 })
 export class UsersModule {
   static routes = usersRouterModule;