gcode.git - Gitblit

parent: 65aed545 | patch | commit | ignore whitespace

Ádám Fibinger

2023-08-01 67c749028577872a09ee1a3ab03f9f70610211a5

Peti v2

9 files modified

8 files added

	angular.json	6 ●●●●● patch \| view \| raw \| blame \| history
	package-lock.json	1685 ●●●●● patch \| view \| raw \| blame \| history
	package.json	5 ●●●●● patch \| view \| raw \| blame \| history
	src/app/app.component.html	448 ●●●●● patch \| view \| raw \| blame \| history
	src/app/app.module.ts	20 ●●●●● patch \| view \| raw \| blame \| history
	src/app/concatenator/concatenator.component.scss	21 ●●●●● patch \| view \| raw \| blame \| history
	src/app/concatenator/concatenator.component.spec.ts	21 ●●●●● patch \| view \| raw \| blame \| history
	src/app/concatenator/concatenator.component.ts	138 ●●●●● patch \| view \| raw \| blame \| history
	src/app/file-loader-service.spec.ts	16 ●●●●● patch \| view \| raw \| blame \| history
	src/app/file-loader.service.ts	41 ●●●●● patch \| view \| raw \| blame \| history
	src/app/gcodeshifter/g-code-shifter.component.scss	patch \| view \| raw \| blame \| history
	src/app/gcodeshifter/g-code-shifter.component.spec.ts	21 ●●●●● patch \| view \| raw \| blame \| history
	src/app/gcodeshifter/g-code-shifter.component.ts	95 ●●●●● patch \| view \| raw \| blame \| history
	src/index.html	5 ●●●●● patch \| view \| raw \| blame \| history
	src/styles.scss	278 ●●●●● patch \| view \| raw \| blame \| history
	tsconfig.app.json	4 ●●●●● patch \| view \| raw \| blame \| history
	tsconfig.json	3 ●●●●● patch \| view \| raw \| blame \| history

 angular.json

@@ -7,7 +7,9 @@
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
          "style": "scss",
          "inlineTemplate": true,
          "inlineStyle": true
        }
      },
      "root": "",
@@ -30,6 +32,7 @@
              "src/assets"
            ],
            "styles": [
              "@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
            "scripts": []
@@ -93,6 +96,7 @@
              "src/assets"
            ],
            "styles": [
              "@angular/material/prebuilt-themes/pink-bluegrey.css",
              "src/styles.scss"
            ],
            "scripts": []

 package-lock.json

@@ -1,18 +1,20 @@
{
  "name": "basic-gcode-shifter",
  "version": "0.0.0",
  "version": "0.0.1",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "basic-gcode-shifter",
      "version": "0.0.0",
      "version": "0.0.1",
      "dependencies": {
        "@angular/animations": "^16.1.0",
        "@angular/cdk": "^16.1.6",
        "@angular/common": "^16.1.0",
        "@angular/compiler": "^16.1.0",
        "@angular/core": "^16.1.0",
        "@angular/forms": "^16.1.0",
        "@angular/material": "^16.1.6",
        "@angular/platform-browser": "^16.1.0",
        "@angular/platform-browser-dynamic": "^16.1.0",
        "@angular/router": "^16.1.0",
@@ -25,6 +27,7 @@
        "@angular/cli": "~16.1.6",
        "@angular/compiler-cli": "^16.1.0",
        "@types/jasmine": "~4.3.0",
        "@types/wicg-file-system-access": "^2020.9.6",
        "jasmine-core": "~4.6.0",
        "karma": "~6.4.0",
        "karma-chrome-launcher": "~3.2.0",
@@ -267,6 +270,22 @@
        "@angular/core": "16.1.7"
      }
    },
    "node_modules/@angular/cdk": {
      "version": "16.1.6",
      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-16.1.6.tgz",
      "integrity": "sha512-ICwX3OyxmVotlhzlkvilvfZz32y9RXvUAaVtPsU1i20orgQBOMp+JGdP/vahLjTQRioUus834Wh6bu0KdHjCEg==",
      "dependencies": {
        "tslib": "^2.3.0"
      },
      "optionalDependencies": {
        "parse5": "^7.1.2"
      },
      "peerDependencies": {
        "@angular/common": "^16.0.0 || ^17.0.0",
        "@angular/core": "^16.0.0 || ^17.0.0",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
    "node_modules/@angular/cli": {
      "version": "16.1.6",
      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-16.1.6.tgz",
@@ -392,6 +411,70 @@
        "@angular/common": "16.1.7",
        "@angular/core": "16.1.7",
        "@angular/platform-browser": "16.1.7",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
    "node_modules/@angular/material": {
      "version": "16.1.6",
      "resolved": "https://registry.npmjs.org/@angular/material/-/material-16.1.6.tgz",
      "integrity": "sha512-PhfwqWN6cCiKCN2B1hUqrg3uwHC3ZwiCndJ/2CWEwEC824aOdf2b2ifTXZdtGbP3bFTkURkfvwfJVle4j/fbHw==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/auto-init": "15.0.0-canary.b994146f6.0",
        "@material/banner": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/button": "15.0.0-canary.b994146f6.0",
        "@material/card": "15.0.0-canary.b994146f6.0",
        "@material/checkbox": "15.0.0-canary.b994146f6.0",
        "@material/chips": "15.0.0-canary.b994146f6.0",
        "@material/circular-progress": "15.0.0-canary.b994146f6.0",
        "@material/data-table": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dialog": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/drawer": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/fab": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/floating-label": "15.0.0-canary.b994146f6.0",
        "@material/form-field": "15.0.0-canary.b994146f6.0",
        "@material/icon-button": "15.0.0-canary.b994146f6.0",
        "@material/image-list": "15.0.0-canary.b994146f6.0",
        "@material/layout-grid": "15.0.0-canary.b994146f6.0",
        "@material/line-ripple": "15.0.0-canary.b994146f6.0",
        "@material/linear-progress": "15.0.0-canary.b994146f6.0",
        "@material/list": "15.0.0-canary.b994146f6.0",
        "@material/menu": "15.0.0-canary.b994146f6.0",
        "@material/menu-surface": "15.0.0-canary.b994146f6.0",
        "@material/notched-outline": "15.0.0-canary.b994146f6.0",
        "@material/radio": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/segmented-button": "15.0.0-canary.b994146f6.0",
        "@material/select": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/slider": "15.0.0-canary.b994146f6.0",
        "@material/snackbar": "15.0.0-canary.b994146f6.0",
        "@material/switch": "15.0.0-canary.b994146f6.0",
        "@material/tab": "15.0.0-canary.b994146f6.0",
        "@material/tab-bar": "15.0.0-canary.b994146f6.0",
        "@material/tab-indicator": "15.0.0-canary.b994146f6.0",
        "@material/tab-scroller": "15.0.0-canary.b994146f6.0",
        "@material/textfield": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tooltip": "15.0.0-canary.b994146f6.0",
        "@material/top-app-bar": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.3.0"
      },
      "peerDependencies": {
        "@angular/animations": "^16.0.0 || ^17.0.0",
        "@angular/cdk": "16.1.6",
        "@angular/common": "^16.0.0 || ^17.0.0",
        "@angular/core": "^16.0.0 || ^17.0.0",
        "@angular/forms": "^16.0.0 || ^17.0.0",
        "@angular/platform-browser": "^16.0.0 || ^17.0.0",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
@@ -2815,6 +2898,758 @@
      "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
      "dev": true
    },
    "node_modules/@material/animation": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/animation/-/animation-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-kqqzG54tabYJ5VsBur5k1bqCFQCEpaW3hmLRMiSVVxRY7XgTt7qkuOOz48gs+MPqR6P8VIi6gFpuscV1+DWDhw==",
      "dependencies": {
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/auto-init": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/auto-init/-/auto-init-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-8nLe/XeueJg5yyYx5e4UxWQXpTDyUhibKfyroGwnRKc8pdpOCOulHSOj/fIVGJAIbxkEJoebwMadWUNCjUhc9A==",
      "dependencies": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/banner": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-gJ4/VdP4dJgHP72Kdjy2f/UjHB45J4CuxoGvI0NIQYUjOSsr4kQiQHsjVgyEPZR/5wa7kBhM7/0mJ+zF7Ghv2A==",
      "dependencies": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/button": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/base": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/base/-/base-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-rW2upYD5YjRFBL6DzYn3SCRhtvpEDkwplDS810e3vt71uLMRyqXyw4OQJH+Nab/t+32TFDtKNUphXIzwICXGDQ==",
      "dependencies": {
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/button": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-SMyqtsvJuCqpXBz2JgciuR6wddNJSGpTXUFxmLbGluBy5/hHm06JWlOFcUOxGDv46OdRGGrRfkg6A9JtvtsJsw==",
      "dependencies": {
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/card": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-WSggGon91HcDhJyatnYLFkoM9glkkeJjyjFDWrcJkwN1rdrPJU+GH+PNjvmArz5hGv9WkmjDjhOdAuPnL4Mb7g==",
      "dependencies": {
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/checkbox": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/checkbox/-/checkbox-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-pulRiwG9S/dS6WBG+GteODBltddFiL0Sb7HAqdzF2BTKNKv25q1ZIR3ftoEa09TNeWM88AOzTJ4aBHiADfJn2w==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/chips": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/chips/-/chips-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-3yJPj7x+eKLA4LMKG7aTWI+itAnKRVGOcniuR6aiXVy0OKr5asNuWNeZc9J0/VErjjxF3tdybDzDSPo01qPy9w==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/checkbox": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "safevalues": "^0.3.4",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/circular-progress": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/circular-progress/-/circular-progress-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-6YUvGXdtZKJoE7AuovR4xk1aiWp/EDZ6j2U3TOeynd1assQQCg5XT4abqAoHtpJrRPaCFgUAp836HyiDVVuYug==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/progress-indicator": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/data-table": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/data-table/-/data-table-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-v4hIduIe/wzyibuL/RPM/ErYrt8XpB7fxyQqtV+0JsMpFa8E81QYyvMCS9EJj9m4YdkrQnZgA+vXQlOkhWvmdQ==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/checkbox": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/icon-button": "15.0.0-canary.b994146f6.0",
        "@material/linear-progress": "15.0.0-canary.b994146f6.0",
        "@material/list": "15.0.0-canary.b994146f6.0",
        "@material/menu": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/select": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/density": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/density/-/density-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-m8l0vuoWSoAPItBpWp5eZDvitUcB2JWoO8V486hLgdveVcKgXG09xWM43ScH+PLXAWjzr5olDEuJ2tvfkN3SpQ==",
      "dependencies": {
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/dialog": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-JucU92yh8cfZQpyRBunHr6uohacePLYmhcPaGpkAGQ1b+zCznEsNs55tjhaVQNoj91XA9rrBqtL6Otg+fxFJtQ==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/button": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/icon-button": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/dom": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/dom/-/dom-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-DiUsTezrCi4iytjIn7xXoXZSNFvuTrVVZgc7cR9cW8yu2Hpz8bPf87PacVn4IP9OsNwy/dCDMk1Kcq/DMh7gXQ==",
      "dependencies": {
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/drawer": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-Kbuf32V0eX69amvCVbAjNSabNDerZWyG8ip466EfQHRh0OUZwvsbhLp9FZOB7AyR+/bQiHf3mVLcombOdmdkcQ==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/list": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/elevation": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-l2YDNgBajSI6oA2l6gaeYCTGHRao657syqQ/tv95/Hkcee9900A4RrsxCwSxOqqAs5pZZDEJ33kFJjj27nqZDw==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/fab": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-ExyDVkNWINpns41Ahj4u8I/OhiVkqI0nmcqjFRtgTJMmKEd4NhlvqIxE7gakAlyS68riJu5UleqTSTVmt8mv2Q==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/feature-targeting": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-HR/FjSQmza98B1DF80MRjODyfOI9r7wXkPSts/cLQsYkpwZ5uJmxhvQKjDCeYVpMV0lQuvuvVOQo7uD44TdWEg==",
      "dependencies": {
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/floating-label": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-g64talBNWCS0FUfLWal0uB637gUciSIqYxFzSW//LglTtbZLGK2J4+9gAEswQGnKeO4ux08EN2n1ZcMDYQ58ow==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/focus-ring": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/focus-ring/-/focus-ring-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-87qEMuXsCvlQfTiimnzJUZoebnIXWcMtRZevNLymN9Y0t9jGckQxZPmrI0llRkpyiR/Ewhec5SI/JGrFlYHnsA==",
      "dependencies": {
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0"
      }
    },
    "node_modules/@material/form-field": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-Tg1SQQaopvXMyDEYxGTWnhCWQmNcWVIoKMLmle9P/gi2p8ulcj0iOCPYf+3ECqUBVozOmTPKlYOOiRwtKStAeA==",
      "dependencies": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/icon-button": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-X6DvOv4jpymHUjI7ZAbO946nDgGYKDwPZfkRzBE84gv2XEr2qfMuABhojxkYubRbt03oauBdcJVVMFCXkVhArQ==",
      "dependencies": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/image-list": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/image-list/-/image-list-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-kf903XFF1P+V5ZPXCt+7R6c55g4UyQE1ZHkTViCIJfd52gU40bHODMhTQy/ywBkwDeJfNk8uf1V1IM24WQYpxA==",
      "dependencies": {
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/layout-grid": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/layout-grid/-/layout-grid-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-OALBSGue8g1/mEwLYYi2d950dJFpNYKW87jPS9/KM65JKMyxoU7tU2d4An1BuyqK0r9sopGq6Pn/zhill0iLaw==",
      "dependencies": {
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/line-ripple": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-evjZxCu4iodiKtW8N0xjY8ACRXm3sY+4rAmq3vV5BmHWAJ3BobjbFYslDMZQ+4mu3HmwMatbJehKxHegahitNg==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/linear-progress": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/linear-progress/-/linear-progress-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-jlXh+tIj+/o0Ks7fHdC/24fH6IXCAl2vF52U6NwT39ESrlwmlLhp3gtag5GSBHN5E7Z09nK871Yo1G/b1F+COg==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/progress-indicator": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/list": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/list/-/list-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-kY/i6VvFBb/W3VvCPvWRMzWvu7mvNFJ+R8ijfawDoAXiv4fj42GO4iFyTcFXaUevEPKp791pN/09BMJQ6jYEvA==",
      "dependencies": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/menu": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-y6smNmLJ+U0DoXWbyqzW+VW/uWDuklhdGHc5MbZrTOhsKkhvoTVNMSOa+NFPU4gTwrplvUjaUvnIsQ0wygwD3g==",
      "dependencies": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/list": "15.0.0-canary.b994146f6.0",
        "@material/menu-surface": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/menu-surface": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-StmM3lrRn1iMEZfq532jpMNppqyBBy68FbPurKEsHuP/3q+CscfnwjrS9ym+JcHqXKMHnQXbL/49ymffRGX2AQ==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/notched-outline": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-UZxU8jXM2t/bk/CiO0K+TSPspuJRZIyrYlIS0gd+qq/u8Gi2DpALBlLAh9Jeu46IUg4YGlPsNWYfe8p3QAVyoA==",
      "dependencies": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/floating-label": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/progress-indicator": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/progress-indicator/-/progress-indicator-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-VT+mOQhohaM+pBX1rknbVOI6JCGKg9NiOHBoYljIvnexNeILE+mW9g6mtQ0ZCJPz0oMmiSAMLcuxMIcBXx84Xw==",
      "dependencies": {
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/radio": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-U/RR2lVNWwEO2+kJtGz9XzvnOF0gAZn1krMY0z/eU9Wnl0OgPZbqQrxXMoVNv1pzKYSEwZQEGado/rv8qp7piA==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/ripple": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-WzIbc8wYTzMOczqGXVCBPdNcv/73Ef8FwcQYsscGMaqCzgVsdpoqilTfsx7Ryyz6dQbyfmJqp7s+YpPujcezOA==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/rtl": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-H/W6BVn4Ygfkrf/FgSrNhbu1uY7PST2wlsjEYQt06EfAM0CDHEwSL1MwV4FmpQA/r40Q0PqoLN6moDrtCe5S8g==",
      "dependencies": {
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/segmented-button": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-jd+f4BTnU0tghxBpAM/XdVmruDXSoQ88TYSFWbrhulS+/c/ooCZURWvVC4mHNej+QR/fODkx4adbqkBiwwCtMw==",
      "dependencies": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/select": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/select/-/select-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-5thEQS+B17JSm3I8D+mqQe2G3ArVnXJALTEEE9FmMUKwKYkrsLplm3FYuEXERZGJnYeTRdkdmhYY/YeocfZoyA==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/floating-label": "15.0.0-canary.b994146f6.0",
        "@material/line-ripple": "15.0.0-canary.b994146f6.0",
        "@material/list": "15.0.0-canary.b994146f6.0",
        "@material/menu": "15.0.0-canary.b994146f6.0",
        "@material/menu-surface": "15.0.0-canary.b994146f6.0",
        "@material/notched-outline": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/shape": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-sINM3gr3aLgdvqZVfqfXV5EB77owLLJjy+2NqchJ8ZPqucCJ+F/BsCBfLA2Wu3O4Sc9IpAEn/o1hzYm/CWAFAw==",
      "dependencies": {
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/slider": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/slider/-/slider-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-dyT72+Kp//AEajJxDUVoMoizUjf2uggVMGXOaQ7FhpGHuf7LC3EyEjrrJ15efFzYgTjdJUU1YQkCwGmdt6CQsA==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/snackbar": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-fEhPASJossScNpcrNYrrH8uU+rUf6+kw7/ZMrpUzzz1lVXliL28jTNEmU1nFpcDI4M2GXH+Z64f7vl2hiMDG8g==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/button": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/icon-button": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/switch": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-czCXTUa30ILIf1J3exiuSVIRcodGATHexd3eWDq4sfHo4iMh4rBMaIxcqkmnb2iwE/mMTNyVfoauijx2QiNKrA==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "safevalues": "^0.3.4",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/tab": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/tab/-/tab-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-ygswooiNdBNNDnQdbPX0nzDQu7oQlHo8vWZ0/xL4IPVEXabY5zCzsEbGNZw2u/syo56c/NHPyMsUmXDGRSXOvQ==",
      "dependencies": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/tab-indicator": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/tab-bar": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-F9NegACnFEWMu1pAAypV4Jd7qROeffkvEgVO28Xxk/CvzZxFz8kAjYJZ+rI6RUhPX3BhXzwsz/AlLwsJMT2tnA==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/tab": "15.0.0-canary.b994146f6.0",
        "@material/tab-indicator": "15.0.0-canary.b994146f6.0",
        "@material/tab-scroller": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/tab-indicator": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-8IH/DmwlZhQlw/2Y3aKrEvjEhZB+qbKUiyaij3BkTAexvyFeDBh5cLNjRpYkUJSGeSPhS6yu4SYzMHPmQEwQmA==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/tab-scroller": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-1MeWkr62OICfTv8oqhIZe6jFo0dKeMlUfB+/WcgnpoeMBszCOSlx5tQ4pedxUkuR3I+Z7rsTfSN0LavgF8bATA==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/tab": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/textfield": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-Kxb3DoJ5o8u3Y1gRMHKmWrDl1TirVxuf/UFrxPFiCE3J1SqiE2VQpakiD1emZwp+LSKtbRsQ/iILYLB/h7Wuvw==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/floating-label": "15.0.0-canary.b994146f6.0",
        "@material/line-ripple": "15.0.0-canary.b994146f6.0",
        "@material/notched-outline": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/theme": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/theme/-/theme-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-5tsZ92dAeUcZ9g9CrIkqX/GYc0M5DIfsydtI1PAidaBzr1Uokuh4rTZVQZBv7gyglF0yDua59lkb0I6wI9vxXg==",
      "dependencies": {
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/tokens": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/tokens/-/tokens-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-jFqU7PtvGkrP8b8i2soCrYQInTrnZ1/rIPDi+Xm3sa/qSghCNwFrdJEqwcwtv1fPlJIOtzkIuVRYRmAP9rXQIQ==",
      "dependencies": {
        "@material/elevation": "15.0.0-canary.b994146f6.0"
      }
    },
    "node_modules/@material/tooltip": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/tooltip/-/tooltip-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-bVzydXGn3fauHJ8pkh32DsdyRJXleeFQ4t7jZ/rcRik+n4G1BvYiblfuu3Z/OCC0m3TJDyMdJhd+sLqRDqLUUg==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/button": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "safevalues": "^0.3.4",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/top-app-bar": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/top-app-bar/-/top-app-bar-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-VHq0wX3OJE1TKvjO8Qtlu+rv5EGoqAhNLBcEjpUUGoqHH/gpd356FEuIqJId4pUh5jaWf8T4ZU9xVbQGMtntzw==",
      "dependencies": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/touch-target": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-X26Y9OWvIqYOHo+sC2VMvOoeQWlUR3/yb7uPdfq92Y44zlQ4Vexgq7nEUblEiXQ8Fj+d0T9rIhRh1y9PP3Z2dw==",
      "dependencies": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@material/typography": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/typography/-/typography-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-sWU5W30WWqdw5P6bsRx9AbvMNcz/QvQg56Syr06V6nfgSztpeuo7TfPk2J+N0ArRALo1mUrkAPk66iWYQ2p/QA==",
      "dependencies": {
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@ngtools/webpack": {
      "version": "16.1.6",
      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-16.1.6.tgz",
@@ -3299,6 +4134,12 @@
      "dependencies": {
        "@types/node": "*"
      }
    },
    "node_modules/@types/wicg-file-system-access": {
      "version": "2020.9.6",
      "resolved": "https://registry.npmjs.org/@types/wicg-file-system-access/-/wicg-file-system-access-2020.9.6.tgz",
      "integrity": "sha512-6hogE75Hl2Ov/jgp8ZhDaGmIF/q3J07GtXf8nCJCwKTHq7971po5+DId7grft09zG7plBwpF6ZU0yx9Du4/e1A==",
      "dev": true
    },
    "node_modules/@types/ws": {
      "version": "8.5.5",
@@ -5108,7 +5949,7 @@
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
      "dev": true,
      "devOptional": true,
      "engines": {
        "node": ">=0.12"
      },
@@ -8726,7 +9567,7 @@
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
      "dev": true,
      "devOptional": true,
      "dependencies": {
        "entities": "^4.4.0"
      },
@@ -9612,6 +10453,11 @@
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "dev": true
    },
    "node_modules/safevalues": {
      "version": "0.3.4",
      "resolved": "https://registry.npmjs.org/safevalues/-/safevalues-0.3.4.tgz",
      "integrity": "sha512-LRneZZRXNgjzwG4bDQdOTSbze3fHm1EAKN/8bePxnlEZiBmkYEDggaHbuvHI9/hoqHbGfsEA7tWS9GhYHZBBsw=="
    },
    "node_modules/sass": {
      "version": "1.63.2",
@@ -11669,6 +12515,15 @@
        "tslib": "^2.3.0"
      }
    },
    "@angular/cdk": {
      "version": "16.1.6",
      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-16.1.6.tgz",
      "integrity": "sha512-ICwX3OyxmVotlhzlkvilvfZz32y9RXvUAaVtPsU1i20orgQBOMp+JGdP/vahLjTQRioUus834Wh6bu0KdHjCEg==",
      "requires": {
        "parse5": "^7.1.2",
        "tslib": "^2.3.0"
      }
    },
    "@angular/cli": {
      "version": "16.1.6",
      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-16.1.6.tgz",
@@ -11740,6 +12595,61 @@
      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-16.1.7.tgz",
      "integrity": "sha512-AZ6oCIAS2JwH7rJiTOj2uKl1eykiDP98y0trgQ/42+zzpOQZyZAjXrtdqHkVUXMc1PFf5NmYioz19Muj1p+Ttg==",
      "requires": {
        "tslib": "^2.3.0"
      }
    },
    "@angular/material": {
      "version": "16.1.6",
      "resolved": "https://registry.npmjs.org/@angular/material/-/material-16.1.6.tgz",
      "integrity": "sha512-PhfwqWN6cCiKCN2B1hUqrg3uwHC3ZwiCndJ/2CWEwEC824aOdf2b2ifTXZdtGbP3bFTkURkfvwfJVle4j/fbHw==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/auto-init": "15.0.0-canary.b994146f6.0",
        "@material/banner": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/button": "15.0.0-canary.b994146f6.0",
        "@material/card": "15.0.0-canary.b994146f6.0",
        "@material/checkbox": "15.0.0-canary.b994146f6.0",
        "@material/chips": "15.0.0-canary.b994146f6.0",
        "@material/circular-progress": "15.0.0-canary.b994146f6.0",
        "@material/data-table": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dialog": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/drawer": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/fab": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/floating-label": "15.0.0-canary.b994146f6.0",
        "@material/form-field": "15.0.0-canary.b994146f6.0",
        "@material/icon-button": "15.0.0-canary.b994146f6.0",
        "@material/image-list": "15.0.0-canary.b994146f6.0",
        "@material/layout-grid": "15.0.0-canary.b994146f6.0",
        "@material/line-ripple": "15.0.0-canary.b994146f6.0",
        "@material/linear-progress": "15.0.0-canary.b994146f6.0",
        "@material/list": "15.0.0-canary.b994146f6.0",
        "@material/menu": "15.0.0-canary.b994146f6.0",
        "@material/menu-surface": "15.0.0-canary.b994146f6.0",
        "@material/notched-outline": "15.0.0-canary.b994146f6.0",
        "@material/radio": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/segmented-button": "15.0.0-canary.b994146f6.0",
        "@material/select": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/slider": "15.0.0-canary.b994146f6.0",
        "@material/snackbar": "15.0.0-canary.b994146f6.0",
        "@material/switch": "15.0.0-canary.b994146f6.0",
        "@material/tab": "15.0.0-canary.b994146f6.0",
        "@material/tab-bar": "15.0.0-canary.b994146f6.0",
        "@material/tab-indicator": "15.0.0-canary.b994146f6.0",
        "@material/tab-scroller": "15.0.0-canary.b994146f6.0",
        "@material/textfield": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tooltip": "15.0.0-canary.b994146f6.0",
        "@material/top-app-bar": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.3.0"
      }
    },
@@ -13341,6 +14251,758 @@
      "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
      "dev": true
    },
    "@material/animation": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/animation/-/animation-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-kqqzG54tabYJ5VsBur5k1bqCFQCEpaW3hmLRMiSVVxRY7XgTt7qkuOOz48gs+MPqR6P8VIi6gFpuscV1+DWDhw==",
      "requires": {
        "tslib": "^2.1.0"
      }
    },
    "@material/auto-init": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/auto-init/-/auto-init-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-8nLe/XeueJg5yyYx5e4UxWQXpTDyUhibKfyroGwnRKc8pdpOCOulHSOj/fIVGJAIbxkEJoebwMadWUNCjUhc9A==",
      "requires": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/banner": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-gJ4/VdP4dJgHP72Kdjy2f/UjHB45J4CuxoGvI0NIQYUjOSsr4kQiQHsjVgyEPZR/5wa7kBhM7/0mJ+zF7Ghv2A==",
      "requires": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/button": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/base": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/base/-/base-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-rW2upYD5YjRFBL6DzYn3SCRhtvpEDkwplDS810e3vt71uLMRyqXyw4OQJH+Nab/t+32TFDtKNUphXIzwICXGDQ==",
      "requires": {
        "tslib": "^2.1.0"
      }
    },
    "@material/button": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-SMyqtsvJuCqpXBz2JgciuR6wddNJSGpTXUFxmLbGluBy5/hHm06JWlOFcUOxGDv46OdRGGrRfkg6A9JtvtsJsw==",
      "requires": {
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/card": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-WSggGon91HcDhJyatnYLFkoM9glkkeJjyjFDWrcJkwN1rdrPJU+GH+PNjvmArz5hGv9WkmjDjhOdAuPnL4Mb7g==",
      "requires": {
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/checkbox": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/checkbox/-/checkbox-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-pulRiwG9S/dS6WBG+GteODBltddFiL0Sb7HAqdzF2BTKNKv25q1ZIR3ftoEa09TNeWM88AOzTJ4aBHiADfJn2w==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/chips": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/chips/-/chips-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-3yJPj7x+eKLA4LMKG7aTWI+itAnKRVGOcniuR6aiXVy0OKr5asNuWNeZc9J0/VErjjxF3tdybDzDSPo01qPy9w==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/checkbox": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "safevalues": "^0.3.4",
        "tslib": "^2.1.0"
      }
    },
    "@material/circular-progress": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/circular-progress/-/circular-progress-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-6YUvGXdtZKJoE7AuovR4xk1aiWp/EDZ6j2U3TOeynd1assQQCg5XT4abqAoHtpJrRPaCFgUAp836HyiDVVuYug==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/progress-indicator": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/data-table": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/data-table/-/data-table-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-v4hIduIe/wzyibuL/RPM/ErYrt8XpB7fxyQqtV+0JsMpFa8E81QYyvMCS9EJj9m4YdkrQnZgA+vXQlOkhWvmdQ==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/checkbox": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/icon-button": "15.0.0-canary.b994146f6.0",
        "@material/linear-progress": "15.0.0-canary.b994146f6.0",
        "@material/list": "15.0.0-canary.b994146f6.0",
        "@material/menu": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/select": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/density": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/density/-/density-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-m8l0vuoWSoAPItBpWp5eZDvitUcB2JWoO8V486hLgdveVcKgXG09xWM43ScH+PLXAWjzr5olDEuJ2tvfkN3SpQ==",
      "requires": {
        "tslib": "^2.1.0"
      }
    },
    "@material/dialog": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-JucU92yh8cfZQpyRBunHr6uohacePLYmhcPaGpkAGQ1b+zCznEsNs55tjhaVQNoj91XA9rrBqtL6Otg+fxFJtQ==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/button": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/icon-button": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/dom": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/dom/-/dom-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-DiUsTezrCi4iytjIn7xXoXZSNFvuTrVVZgc7cR9cW8yu2Hpz8bPf87PacVn4IP9OsNwy/dCDMk1Kcq/DMh7gXQ==",
      "requires": {
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/drawer": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-Kbuf32V0eX69amvCVbAjNSabNDerZWyG8ip466EfQHRh0OUZwvsbhLp9FZOB7AyR+/bQiHf3mVLcombOdmdkcQ==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/list": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/elevation": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-l2YDNgBajSI6oA2l6gaeYCTGHRao657syqQ/tv95/Hkcee9900A4RrsxCwSxOqqAs5pZZDEJ33kFJjj27nqZDw==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/fab": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-ExyDVkNWINpns41Ahj4u8I/OhiVkqI0nmcqjFRtgTJMmKEd4NhlvqIxE7gakAlyS68riJu5UleqTSTVmt8mv2Q==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/feature-targeting": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-HR/FjSQmza98B1DF80MRjODyfOI9r7wXkPSts/cLQsYkpwZ5uJmxhvQKjDCeYVpMV0lQuvuvVOQo7uD44TdWEg==",
      "requires": {
        "tslib": "^2.1.0"
      }
    },
    "@material/floating-label": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-g64talBNWCS0FUfLWal0uB637gUciSIqYxFzSW//LglTtbZLGK2J4+9gAEswQGnKeO4ux08EN2n1ZcMDYQ58ow==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/focus-ring": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/focus-ring/-/focus-ring-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-87qEMuXsCvlQfTiimnzJUZoebnIXWcMtRZevNLymN9Y0t9jGckQxZPmrI0llRkpyiR/Ewhec5SI/JGrFlYHnsA==",
      "requires": {
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0"
      }
    },
    "@material/form-field": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-Tg1SQQaopvXMyDEYxGTWnhCWQmNcWVIoKMLmle9P/gi2p8ulcj0iOCPYf+3ECqUBVozOmTPKlYOOiRwtKStAeA==",
      "requires": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/icon-button": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-X6DvOv4jpymHUjI7ZAbO946nDgGYKDwPZfkRzBE84gv2XEr2qfMuABhojxkYubRbt03oauBdcJVVMFCXkVhArQ==",
      "requires": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/image-list": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/image-list/-/image-list-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-kf903XFF1P+V5ZPXCt+7R6c55g4UyQE1ZHkTViCIJfd52gU40bHODMhTQy/ywBkwDeJfNk8uf1V1IM24WQYpxA==",
      "requires": {
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/layout-grid": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/layout-grid/-/layout-grid-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-OALBSGue8g1/mEwLYYi2d950dJFpNYKW87jPS9/KM65JKMyxoU7tU2d4An1BuyqK0r9sopGq6Pn/zhill0iLaw==",
      "requires": {
        "tslib": "^2.1.0"
      }
    },
    "@material/line-ripple": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-evjZxCu4iodiKtW8N0xjY8ACRXm3sY+4rAmq3vV5BmHWAJ3BobjbFYslDMZQ+4mu3HmwMatbJehKxHegahitNg==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/linear-progress": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/linear-progress/-/linear-progress-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-jlXh+tIj+/o0Ks7fHdC/24fH6IXCAl2vF52U6NwT39ESrlwmlLhp3gtag5GSBHN5E7Z09nK871Yo1G/b1F+COg==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/progress-indicator": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/list": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/list/-/list-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-kY/i6VvFBb/W3VvCPvWRMzWvu7mvNFJ+R8ijfawDoAXiv4fj42GO4iFyTcFXaUevEPKp791pN/09BMJQ6jYEvA==",
      "requires": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/menu": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-y6smNmLJ+U0DoXWbyqzW+VW/uWDuklhdGHc5MbZrTOhsKkhvoTVNMSOa+NFPU4gTwrplvUjaUvnIsQ0wygwD3g==",
      "requires": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/list": "15.0.0-canary.b994146f6.0",
        "@material/menu-surface": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/menu-surface": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-StmM3lrRn1iMEZfq532jpMNppqyBBy68FbPurKEsHuP/3q+CscfnwjrS9ym+JcHqXKMHnQXbL/49ymffRGX2AQ==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/notched-outline": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-UZxU8jXM2t/bk/CiO0K+TSPspuJRZIyrYlIS0gd+qq/u8Gi2DpALBlLAh9Jeu46IUg4YGlPsNWYfe8p3QAVyoA==",
      "requires": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/floating-label": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/progress-indicator": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/progress-indicator/-/progress-indicator-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-VT+mOQhohaM+pBX1rknbVOI6JCGKg9NiOHBoYljIvnexNeILE+mW9g6mtQ0ZCJPz0oMmiSAMLcuxMIcBXx84Xw==",
      "requires": {
        "tslib": "^2.1.0"
      }
    },
    "@material/radio": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-U/RR2lVNWwEO2+kJtGz9XzvnOF0gAZn1krMY0z/eU9Wnl0OgPZbqQrxXMoVNv1pzKYSEwZQEGado/rv8qp7piA==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/ripple": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-WzIbc8wYTzMOczqGXVCBPdNcv/73Ef8FwcQYsscGMaqCzgVsdpoqilTfsx7Ryyz6dQbyfmJqp7s+YpPujcezOA==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/rtl": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-H/W6BVn4Ygfkrf/FgSrNhbu1uY7PST2wlsjEYQt06EfAM0CDHEwSL1MwV4FmpQA/r40Q0PqoLN6moDrtCe5S8g==",
      "requires": {
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/segmented-button": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-jd+f4BTnU0tghxBpAM/XdVmruDXSoQ88TYSFWbrhulS+/c/ooCZURWvVC4mHNej+QR/fODkx4adbqkBiwwCtMw==",
      "requires": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/touch-target": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/select": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/select/-/select-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-5thEQS+B17JSm3I8D+mqQe2G3ArVnXJALTEEE9FmMUKwKYkrsLplm3FYuEXERZGJnYeTRdkdmhYY/YeocfZoyA==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/floating-label": "15.0.0-canary.b994146f6.0",
        "@material/line-ripple": "15.0.0-canary.b994146f6.0",
        "@material/list": "15.0.0-canary.b994146f6.0",
        "@material/menu": "15.0.0-canary.b994146f6.0",
        "@material/menu-surface": "15.0.0-canary.b994146f6.0",
        "@material/notched-outline": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/shape": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-sINM3gr3aLgdvqZVfqfXV5EB77owLLJjy+2NqchJ8ZPqucCJ+F/BsCBfLA2Wu3O4Sc9IpAEn/o1hzYm/CWAFAw==",
      "requires": {
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/slider": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/slider/-/slider-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-dyT72+Kp//AEajJxDUVoMoizUjf2uggVMGXOaQ7FhpGHuf7LC3EyEjrrJ15efFzYgTjdJUU1YQkCwGmdt6CQsA==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/snackbar": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-fEhPASJossScNpcrNYrrH8uU+rUf6+kw7/ZMrpUzzz1lVXliL28jTNEmU1nFpcDI4M2GXH+Z64f7vl2hiMDG8g==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/button": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/icon-button": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/switch": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-czCXTUa30ILIf1J3exiuSVIRcodGATHexd3eWDq4sfHo4iMh4rBMaIxcqkmnb2iwE/mMTNyVfoauijx2QiNKrA==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "safevalues": "^0.3.4",
        "tslib": "^2.1.0"
      }
    },
    "@material/tab": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/tab/-/tab-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-ygswooiNdBNNDnQdbPX0nzDQu7oQlHo8vWZ0/xL4IPVEXabY5zCzsEbGNZw2u/syo56c/NHPyMsUmXDGRSXOvQ==",
      "requires": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/focus-ring": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/tab-indicator": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/tab-bar": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-F9NegACnFEWMu1pAAypV4Jd7qROeffkvEgVO28Xxk/CvzZxFz8kAjYJZ+rI6RUhPX3BhXzwsz/AlLwsJMT2tnA==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/tab": "15.0.0-canary.b994146f6.0",
        "@material/tab-indicator": "15.0.0-canary.b994146f6.0",
        "@material/tab-scroller": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/tab-indicator": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-8IH/DmwlZhQlw/2Y3aKrEvjEhZB+qbKUiyaij3BkTAexvyFeDBh5cLNjRpYkUJSGeSPhS6yu4SYzMHPmQEwQmA==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/tab-scroller": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-1MeWkr62OICfTv8oqhIZe6jFo0dKeMlUfB+/WcgnpoeMBszCOSlx5tQ4pedxUkuR3I+Z7rsTfSN0LavgF8bATA==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/tab": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/textfield": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-Kxb3DoJ5o8u3Y1gRMHKmWrDl1TirVxuf/UFrxPFiCE3J1SqiE2VQpakiD1emZwp+LSKtbRsQ/iILYLB/h7Wuvw==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/density": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/floating-label": "15.0.0-canary.b994146f6.0",
        "@material/line-ripple": "15.0.0-canary.b994146f6.0",
        "@material/notched-outline": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/theme": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/theme/-/theme-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-5tsZ92dAeUcZ9g9CrIkqX/GYc0M5DIfsydtI1PAidaBzr1Uokuh4rTZVQZBv7gyglF0yDua59lkb0I6wI9vxXg==",
      "requires": {
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/tokens": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/tokens/-/tokens-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-jFqU7PtvGkrP8b8i2soCrYQInTrnZ1/rIPDi+Xm3sa/qSghCNwFrdJEqwcwtv1fPlJIOtzkIuVRYRmAP9rXQIQ==",
      "requires": {
        "@material/elevation": "15.0.0-canary.b994146f6.0"
      }
    },
    "@material/tooltip": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/tooltip/-/tooltip-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-bVzydXGn3fauHJ8pkh32DsdyRJXleeFQ4t7jZ/rcRik+n4G1BvYiblfuu3Z/OCC0m3TJDyMdJhd+sLqRDqLUUg==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/button": "15.0.0-canary.b994146f6.0",
        "@material/dom": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/tokens": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "safevalues": "^0.3.4",
        "tslib": "^2.1.0"
      }
    },
    "@material/top-app-bar": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/top-app-bar/-/top-app-bar-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-VHq0wX3OJE1TKvjO8Qtlu+rv5EGoqAhNLBcEjpUUGoqHH/gpd356FEuIqJId4pUh5jaWf8T4ZU9xVbQGMtntzw==",
      "requires": {
        "@material/animation": "15.0.0-canary.b994146f6.0",
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/elevation": "15.0.0-canary.b994146f6.0",
        "@material/ripple": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/shape": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "@material/typography": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/touch-target": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-X26Y9OWvIqYOHo+sC2VMvOoeQWlUR3/yb7uPdfq92Y44zlQ4Vexgq7nEUblEiXQ8Fj+d0T9rIhRh1y9PP3Z2dw==",
      "requires": {
        "@material/base": "15.0.0-canary.b994146f6.0",
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/rtl": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@material/typography": {
      "version": "15.0.0-canary.b994146f6.0",
      "resolved": "https://registry.npmjs.org/@material/typography/-/typography-15.0.0-canary.b994146f6.0.tgz",
      "integrity": "sha512-sWU5W30WWqdw5P6bsRx9AbvMNcz/QvQg56Syr06V6nfgSztpeuo7TfPk2J+N0ArRALo1mUrkAPk66iWYQ2p/QA==",
      "requires": {
        "@material/feature-targeting": "15.0.0-canary.b994146f6.0",
        "@material/theme": "15.0.0-canary.b994146f6.0",
        "tslib": "^2.1.0"
      }
    },
    "@ngtools/webpack": {
      "version": "16.1.6",
      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-16.1.6.tgz",
@@ -13745,6 +15407,12 @@
      "requires": {
        "@types/node": "*"
      }
    },
    "@types/wicg-file-system-access": {
      "version": "2020.9.6",
      "resolved": "https://registry.npmjs.org/@types/wicg-file-system-access/-/wicg-file-system-access-2020.9.6.tgz",
      "integrity": "sha512-6hogE75Hl2Ov/jgp8ZhDaGmIF/q3J07GtXf8nCJCwKTHq7971po5+DId7grft09zG7plBwpF6ZU0yx9Du4/e1A==",
      "dev": true
    },
    "@types/ws": {
      "version": "8.5.5",
@@ -15143,7 +16811,7 @@
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
      "dev": true
      "devOptional": true
    },
    "env-paths": {
      "version": "2.2.1",
@@ -17889,7 +19557,7 @@
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
      "dev": true,
      "devOptional": true,
      "requires": {
        "entities": "^4.4.0"
      }
@@ -18524,6 +20192,11 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "dev": true
    },
    "safevalues": {
      "version": "0.3.4",
      "resolved": "https://registry.npmjs.org/safevalues/-/safevalues-0.3.4.tgz",
      "integrity": "sha512-LRneZZRXNgjzwG4bDQdOTSbze3fHm1EAKN/8bePxnlEZiBmkYEDggaHbuvHI9/hoqHbGfsEA7tWS9GhYHZBBsw=="
    },
    "sass": {
      "version": "1.63.2",
      "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.2.tgz",

 package.json

@@ -1,6 +1,6 @@
{
  "name": "basic-gcode-shifter",
  "version": "0.0.0",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
@@ -11,10 +11,12 @@
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/cdk": "^16.1.6",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/forms": "^16.1.0",
    "@angular/material": "^16.1.6",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
@@ -27,6 +29,7 @@
    "@angular/cli": "~16.1.6",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.3.0",
    "@types/wicg-file-system-access": "^2020.9.6",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",

 src/app/app.component.html

@@ -1,307 +1,3 @@
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

<style>
  :host {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 8px 0;
  }

  p {
    margin: 0;
  }

  .spacer {
    flex: 1;
  }

  .toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #1976d2;
    color: white;
    font-weight: 600;
  }

  .toolbar img {
    margin: 0 16px;
  }

  .toolbar #twitter-logo {
    height: 40px;
    margin: 0 8px;
  }

  .toolbar #youtube-logo {
    height: 40px;
    margin: 0 16px;
  }

  .toolbar #twitter-logo:hover,
  .toolbar #youtube-logo:hover {
    opacity: 0.8;
  }

  .content {
    display: flex;
    margin: 82px auto 32px;
    padding: 0 16px;
    max-width: 960px;
    flex-direction: column;
    align-items: center;
  }

  svg.material-icons {
    height: 24px;
    width: auto;
  }

  svg.material-icons:not(:last-child) {
    margin-right: 8px;
  }

  .card svg.material-icons path {
    fill: #888;
  }

  .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
  }

  .card {
    all: unset;
    border-radius: 4px;
    border: 1px solid #eee;
    background-color: #fafafa;
    height: 40px;
    width: 200px;
    margin: 0 8px 16px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;
    line-height: 24px;
  }

  .card-container .card:not(:last-child) {
    margin-right: 0;
  }

  .card.card-small {
    height: 16px;
    width: 168px;
  }

  .card-container .card:not(.highlight-card) {
    cursor: pointer;
  }

  .card-container .card:not(.highlight-card):hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
  }

  .card-container .card:not(.highlight-card):hover .material-icons path {
    fill: rgb(105, 103, 103);
  }

  .card.highlight-card {
    background-color: #1976d2;
    color: white;
    font-weight: 600;
    border: none;
    width: auto;
    min-width: 30%;
    position: relative;
  }

  .card.card.highlight-card span {
    margin-left: 60px;
  }

  svg#rocket {
    width: 80px;
    position: absolute;
    left: -10px;
    top: -24px;
  }

  svg#rocket-smoke {
    height: calc(100vh - 95px);
    position: absolute;
    top: 10px;
    right: 180px;
    z-index: -10;
  }

  a,
  a:visited,
  a:hover {
    color: #1976d2;
    text-decoration: none;
  }

  a:hover {
    color: #125699;
  }

  .terminal {
    position: relative;
    width: 80%;
    max-width: 600px;
    border-radius: 6px;
    padding-top: 45px;
    margin-top: 8px;
    overflow: hidden;
    background-color: rgb(15, 15, 16);
  }

  .terminal::before {
    content: "\2022 \2022 \2022";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background: rgb(58, 58, 58);
    color: #c2c3c4;
    width: 100%;
    font-size: 2rem;
    line-height: 0;
    padding: 14px 0;
    text-indent: 4px;
  }

  .terminal pre {
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
    color: white;
    padding: 0 1rem 1rem;
    margin: 0;
  }

  .circle-link {
    height: 40px;
    width: 40px;
    border-radius: 40px;
    margin: 8px;
    background-color: white;
    border: 1px solid #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: 1s ease-out;
  }

  .circle-link:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  }

  footer {
    margin-top: 8px;
    display: flex;
    align-items: center;
    line-height: 20px;
  }

  footer a {
    display: flex;
    align-items: center;
  }

  .github-star-badge {
    color: #24292e;
    display: flex;
    align-items: center;
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid rgba(27,31,35,.2);
    border-radius: 3px;
    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
    margin-left: 4px;
    font-weight: 600;
  }

  .github-star-badge:hover {
    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
    border-color: rgba(27,31,35,.35);
    background-position: -.5em;
  }

  .github-star-badge .material-icons {
    height: 16px;
    width: 16px;
    margin-right: 4px;
  }

  svg#clouds {
    position: fixed;
    bottom: -160px;
    left: -230px;
    z-index: -10;
    width: 1920px;
  }

  /* Responsive Styles */
  @media screen and (max-width: 767px) {
    .card-container > *:not(.circle-link) ,
    .terminal {
      width: 100%;
    }

    .card:not(.highlight-card) {
      height: 16px;
      margin: 8px 0;
    }

    .card.highlight-card span {
      margin-left: 72px;
    }

    svg#rocket-smoke {
      right: 120px;
      transform: rotate(-5deg);
    }
  }

  @media screen and (max-width: 575px) {
    svg#rocket-smoke {
      display: none;
      visibility: hidden;
    }
  }
</style>

<!-- Toolbar -->
<div class="toolbar" role="banner">
  <img
@@ -311,24 +7,12 @@
  />
  <span>Welcome</span>
    <div class="spacer"></div>
    <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
      <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
        <rect width="400" height="400" fill="none"/>
        <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
      </svg>
    </a>
    <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
      <svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
        <path d="M0 0h24v24H0V0z" fill="none"/>
        <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
      </svg>
    </a>
</div>

<div class="content" role="main">

  <!-- Highlight Card -->
  <div class="card highlight-card card-small">
  <div class="card highlight-card">

    <svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
      <title>Rocket Ship</title>
@@ -341,7 +25,7 @@
      </g>
    </svg>

    <span>{{ title }} app is running!</span>
    <span>{{ title }}</span>

    <svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
      <title>Rocket Ship Smoke</title>
@@ -351,120 +35,13 @@
  </div>

  <!-- Resources -->
  <h2>Resources</h2>
  <p>Here are some links to help you get started:</p>
  <!--
  <h2>G-Code tologató</h2>

  <div class="card-container">
    <a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
      <span>Learn Angular</span>
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>    </a>

    <a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
      <span>CLI Documentation</span>
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
    </a>

    <a class="card" target="_blank" rel="noopener" href="https://material.angular.io">
      <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453" viewBox="0 0 179.2 192.7"><path fill="#ffa726" d="M89.4 0 0 32l13.5 118.4 75.9 42.3 76-42.3L179.2 32 89.4 0z"/><path fill="#fb8c00" d="M89.4 0v192.7l76-42.3L179.2 32 89.4 0z"/><path fill="#ffe0b2" d="m102.9 146.3-63.3-30.5 36.3-22.4 63.7 30.6-36.7 22.3z"/><path fill="#fff3e0" d="M102.9 122.8 39.6 92.2l36.3-22.3 63.7 30.6-36.7 22.3z"/><path fill="#fff" d="M102.9 99.3 39.6 68.7l36.3-22.4 63.7 30.6-36.7 22.4z"/></svg>
      <span>Angular Material</span>
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
    </a>

    <a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
      <span>Angular Blog</span>
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
    </a>

    <a class="card" target="_blank" rel="noopener" href="https://angular.io/devtools/">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
      <span>Angular DevTools</span>
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
    </a>

  </div>

  <!-- Next Steps -->
  <h2>Next Steps</h2>
  <p>What do you want to do next with your app?</p>

  <input type="hidden" #selection>

  <div class="card-container">
    <button class="card card-small" (click)="selection.value = 'component'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
      <span>New Component</span>
    </button>

    <button class="card card-small" (click)="selection.value = 'material'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
      <span>Angular Material</span>
    </button>

    <button class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
      <span>Add PWA Support</span>
    </button>

    <button class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
      <span>Add Dependency</span>
    </button>

    <button class="card card-small" (click)="selection.value = 'test'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
      <span>Run and Watch Tests</span>
    </button>

    <button class="card card-small" (click)="selection.value = 'build'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
      <span>Build for Production</span>
    </button>
  </div>

  <!-- Terminal -->
  <div class="terminal" [ngSwitch]="selection.value">
      <pre *ngSwitchDefault>ng generate component xyz</pre>
      <pre *ngSwitchCase="'material'">ng add @angular/material</pre>
      <pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
      <pre *ngSwitchCase="'dependency'">ng add _____</pre>
      <pre *ngSwitchCase="'test'">ng test</pre>
      <pre *ngSwitchCase="'build'">ng build</pre>
  </div>

  <!-- Links -->
  <div class="card-container">
    <a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
      <svg xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
        <title>Meetup Logo</title>
        <path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
      </svg>
    </a>

    <a class="circle-link" title="Join the Conversation on Discord" href="https://discord.gg/angular" target="_blank" rel="noopener">
      <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 245 240">
        <title>Discord Logo</title>
        <path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
        <path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/>
      </svg>
    </a>
  </div>

  <!-- Footer -->
  <footer>
      Love Angular?&nbsp;
      <a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
        <div class="github-star-badge">
            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
          Star
        </div>
      </a>
      <a href="https://github.com/angular/angular" target="_blank" rel="noopener">
        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
      </a>
  </footer>
  <app-g-code-tologato></app-g-code-tologato>
  -->
  <app-concatenator></app-concatenator>
  <router-outlet></router-outlet>

  <svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
    <title>Gray Clouds Background</title>
@@ -473,12 +50,5 @@

</div>

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

<router-outlet></router-outlet>


 src/app/app.module.ts

@@ -3,14 +3,30 @@

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { GCodeShifter } from './gcodeshifter/g-code-shifter.component';
import { ConcatenatorComponent } from './concatenator/concatenator.component';
import { CdkDrag, CdkDragHandle, CdkDropList } from '@angular/cdk/drag-drop';

@NgModule({
  declarations: [
    AppComponent
    AppComponent,
    GCodeShifter,
    ConcatenatorComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
    AppRoutingModule,
    BrowserAnimationsModule,
    MatInputModule,
    FormsModule,
    MatButtonModule,
    CdkDropList,
    CdkDragHandle,
    CdkDrag
  ],
  providers: [],
  bootstrap: [AppComponent]

 src/app/concatenator/concatenator.component.scss

New file
@@ -0,0 +1,21 @@
.example-box {
    margin: 1em;
    border: 1px solid #ccc;
    border-radius: 0.2em;
    padding: 0.4em;
}
.source-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.containers {
    display: flex;
    flex-direction: row;
    justify-content: center;
    & > div {
        margin: 3em;
    }
}

 src/app/concatenator/concatenator.component.spec.ts

New file
@@ -0,0 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ConcatenatorComponent } from './concatenator.component';

describe('ConcatenatorComponent', () => {
  let component: ConcatenatorComponent;
  let fixture: ComponentFixture<ConcatenatorComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ConcatenatorComponent]
    });
    fixture = TestBed.createComponent(ConcatenatorComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

 src/app/concatenator/concatenator.component.ts

New file
@@ -0,0 +1,138 @@
import { Component, inject } from '@angular/core';
import { FileEntry, FileLoaderService } from '../file-loader.service';
import { distinctUntilChanged, filter, forkJoin, from, Observable, of, tap } from 'rxjs';

import {
    CdkDragDrop,
    moveItemInArray,
    transferArrayItem,
} from '@angular/cdk/drag-drop';

@Component({
    selector: 'app-concatenator',
    template: `
        <button mat-button *ngIf="(filesAvailable$ | async)?.length === 0" (click)="loader.openDir()">Forrás mappa
            betöltése
        </button>
        <h2>Forrásfájlok</h2>
        <div
                cdkDropList
                #sourceFiles="cdkDropList"
                [cdkDropListConnectedTo]="[one, two, three]"
                [cdkDropListData]="filesAvailable$ | async"
                class="source-list"
                (cdkDropListDropped)="drop($event)">
            <div class="example-box" *ngFor="let item of filesAvailable$ | async" cdkDrag>{{item.name}}</div>
        </div>

        <div class="containers">
            <div class="target-container">
                <h2>Első oszlop</h2>
                <div
                        cdkDropList
                        #one="cdkDropList"
                        [cdkDropListData]="selectedOne"
                        [cdkDropListConnectedTo]="[sourceFiles]"
                        class="target-list"
                        (cdkDropListDropped)="drop($event)">
                    <div class="example-box" *ngIf="selectedOne.length === 0">Húzd ide a fájlt</div>
                    <div class="example-box" *ngFor="let item of selectedOne" cdkDrag>{{item.name}}</div>
                </div>
            </div>
            <div class="target-container">
                <h2>Második oszlop</h2>
                <div
                        cdkDropList
                        #two="cdkDropList"
                        [cdkDropListData]="selectedTwo"
                        [cdkDropListConnectedTo]="[sourceFiles]"
                        class="target-list"
                        (cdkDropListDropped)="drop($event)">
                    <div class="example-box" *ngIf="selectedTwo.length === 0">Húzd ide a fájlt</div>
                    <div class="example-box" *ngFor="let item of selectedTwo" cdkDrag>{{item.name}}</div>
                </div>
            </div>
            <div class="target-container">
                <h2>Harmadik oszlop</h2>
                <div
                        cdkDropList
                        #three="cdkDropList"
                        [cdkDropListData]="selectedThree"
                        [cdkDropListConnectedTo]="[sourceFiles]"
                        class="example-list"
                        (cdkDropListDropped)="drop($event)">
                    <div class="example-box" *ngIf="selectedThree.length === 0">Húzd ide a fájlt</div>
                    <div class="example-box" *ngFor="let item of selectedThree" cdkDrag>{{item.name}}</div>
                </div>
            </div>
        </div>

        <div class="terminal">
            <pre>{{generatedCode}}</pre>
        </div>
    `,
    styleUrls: ['concatenator.component.scss']
})
export class ConcatenatorComponent {
    loader = inject(FileLoaderService);

    selectedOne: FileEntry[] = [];
    selectedTwo: FileEntry[] = [];
    selectedThree: FileEntry[] = [];

    generatedCode: string = '';

    filesAvailable$: Observable<FileEntry[]> = this.loader.filesAvailable$.asObservable()
        .pipe(
            tap(files => console.log(files)),
            distinctUntilChanged((previous, current) => previous.length !== current.length)
        );

    constructor() {}

    drop(event: CdkDragDrop<FileEntry[] | any> | undefined) {
        if (!event || !event.container || !event.container.data) return;

        console.log(event);

        if (event.previousContainer === event.container) {
            return moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
        }
        transferArrayItem(
            event.previousContainer.data,
            event.container.data,
            event.previousIndex,
            event.currentIndex
        );

        this.updateGeneatedCode();
    }

    async updateGeneatedCode() {
        this.generatedCode = '';
        let data = [
            (this.selectedOne && this.selectedOne.length > 0 && this.isFile(this.selectedOne[0]?.handle) ? from(this.selectedOne[0].handle.getFile()) : of(null)),
            (this.selectedTwo && this.selectedTwo.length > 0 && this.isFile(this.selectedTwo[0]?.handle) ? from(this.selectedTwo[0].handle.getFile()) : of(null)),
            (this.selectedThree && this.selectedThree.length > 0 && this.isFile(this.selectedThree[0]?.handle) ? from(this.selectedThree[0].handle.getFile()) : of(null))
        ];

        forkJoin(
            data
        ).pipe(
            filter((file) => file !== null)
        ).subscribe((data) => {
            data.map((file) => {
                if (file) {
                    file.text().then((text) => {
                        this.generatedCode += text;
                    })
                }
            });
        })
    }

    private isFile(object: FileSystemHandle | FileSystemFileHandle): object is FileSystemFileHandle {
        return object?.kind === 'file'
    }

}

 src/app/file-loader-service.spec.ts

New file
@@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';

import { FileLoaderService } from './file-loader.service';

describe('FileLoaderService', () => {
  let service: FileLoaderService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(FileLoaderService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

 src/app/file-loader.service.ts

New file
@@ -0,0 +1,41 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject, from, Subject } from 'rxjs';

export interface FileEntry {
    name: string;
    handle: FileSystemHandle;
}

@Injectable({
    providedIn: 'root'
})
export class FileLoaderService {

    filesAvailable$: Subject<FileEntry[]> = new BehaviorSubject(new Array());

    files: FileEntry[] = [];

    constructor() { }

    async openDir() {
        this.updateSubscribers();
        // Get a file handle by showing a file picker:
        const handle = await showDirectoryPicker();
        if (!handle) {
            // User cancelled, or otherwise failed to open a file.
            return;
        }

        from(handle.entries()).subscribe(
            {
              next: ([name, handle]) => this.files.push({name, handle}),
              error: (err) => console.error(err),
              complete: () => this.updateSubscribers
            }
        )
    }

    private updateSubscribers() {
        this.filesAvailable$.next(this.files);
    }
}

 src/app/gcodeshifter/g-code-shifter.component.scss


 src/app/gcodeshifter/g-code-shifter.component.spec.ts

New file
@@ -0,0 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { GCodeShifter } from './g-code-shifter.component';

describe('AppContainerComponent', () => {
  let component: GCodeShifter;
  let fixture: ComponentFixture<GCodeShifter>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [GCodeShifter]
    });
    fixture = TestBed.createComponent(GCodeShifter);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

 src/app/gcodeshifter/g-code-shifter.component.ts

New file
@@ -0,0 +1,95 @@
import { Component, OnInit } from '@angular/core';
import { FileLoaderService } from '../file-loader.service';

@Component({
    selector: 'app-g-code-tologato',
    template: `
        <mat-form-field>
            <mat-label>Betű kódja</mat-label>
            <textarea matInput [(ngModel)]="sourceCode" (change)="updateGeneratedCode()"></textarea>
        </mat-form-field>

        <mat-form-field>
            <mat-label>Eltolás X tengelyen (mm)</mat-label>
            <input matInput type="number" [(ngModel)]="shiftX" (change)="updateGeneratedCode()">
        </mat-form-field>

        <mat-form-field>
            <mat-label>Eltolás Y tengelyen (mm)</mat-label>
            <input matInput type="number" [(ngModel)]="shiftY" (change)="updateGeneratedCode()">
        </mat-form-field>

        <div class="card-container">
            <button class="card card-small" tabindex="0">
                <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                     viewBox="0 0 24 24">
                    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                </svg>
                <span>New Component</span>
            </button>
        </div>

        <!-- Terminal -->
        <div class="terminal">
            <pre>{{generatedCode}}</pre>
        </div>
    `,
    styleUrls: ['./g-code-shifter.component.scss']
})
export class GCodeShifter implements OnInit {

    sourceCode = 'G0 X27.8800 Y-42.3326 Z11.0580\n' +
        'G1   Z-0.2000 F100\n' +
        'G1 X24.9039   F600\n' +
        'X25.2185 Y-41.9290 \n' +
        'X27.2279 Y-40.0988 \n' +
        'X27.6354 Y-39.5355 \n' +
        'G3 X27.7442 Y-37.9830 I-1.5579 J0.8893 \n' +
        'G3 X26.5839 Y-37.0242 I-1.5317 J-0.6721\n' +
        'G3 X24.8808 Y-37.2086 I-0.6004 J-2.4118\n' +
        'G3 X24.0106 Y-38.7088 I0.9643 J-1.5617\n' +
        'G1 X24.7726 Y-38.7850  \n' +
        'X24.8564 Y-38.2781 \n' +
        'G2 X25.3733 Y-37.7000 I0.9756 J-0.3522 \n' +
        'G2 X26.7096 Y-37.8067 I0.5761 J-1.2061\n' +
        'G2 X27.0601 Y-38.9488 I-0.6304 J-0.8183\n' +
        'G2 X26.5436 Y-39.7796 I-2.0272 J0.6843\n' +
        'G1 X25.4232 Y-40.8058  \n' +
        'G3 X24.1552 Y-42.1199 I3.3619 J-4.5124 \n' +
        'G3 X23.8666 Y-43.0438 I1.3896 J-0.9411\n' +
        'G1 X27.8800   \n' +
        ' Y-42.3326 \n' +
        'G0   Z11.0580\n';

    shiftX = 2;
    shiftY = 2;

    generatedCode = '';


    constructor(public fileLoader: FileLoaderService) {}

    updateGeneratedCode() {
        const myregexp = /(X|Y)([\-0-9]+(?:.[0-9]+)?)/ig;
        this.generatedCode = this.sourceCode.replace(myregexp, (match, axis, value) => {
            if (axis === 'X') {
                return axis + this.transformX(parseFloat(value)).toFixed(4);
            }

            return axis + this.transformY(parseFloat(value)).toFixed(4);
        });

    }

    private transformX(x: number): number {
        return x + this.shiftX;
    }

    private transformY(y: number): number {
        return y + this.shiftY;
    }

    ngOnInit(): void {
        this.updateGeneratedCode();
    }
}

 src/index.html

@@ -6,8 +6,11 @@
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

 src/styles.scss

@@ -1 +1,279 @@
/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 8px 0;
}

p {
  margin: 0;
}

.spacer {
  flex: 1;
}

.toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  background-color: #1976d2;
  color: white;
  font-weight: 600;
}

.toolbar img {
  margin: 0 16px;
}

.toolbar #twitter-logo {
  height: 40px;
  margin: 0 8px;
}

.toolbar #youtube-logo {
  height: 40px;
  margin: 0 16px;
}

.toolbar #twitter-logo:hover,
.toolbar #youtube-logo:hover {
  opacity: 0.8;
}

.content {
  display: flex;
  margin: 82px auto 32px;
  padding: 0 16px;
  flex-direction: column;
  align-items: center;
}

svg.material-icons {
  height: 24px;
  width: auto;
}

svg.material-icons:not(:last-child) {
  margin-right: 8px;
}

.card svg.material-icons path {
  fill: #888;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}

.card {
  all: unset;
  border-radius: 4px;
  border: 1px solid #eee;
  background-color: #fafafa;
  height: 40px;
  width: 200px;
  margin: 0 8px 16px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in-out;
  line-height: 24px;
}

.card-container .card:not(:last-child) {
  margin-right: 0;
}

.card-container .card:not(.highlight-card) {
  cursor: pointer;
}

.card-container .card:not(.highlight-card):hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
}

.card-container .card:not(.highlight-card):hover .material-icons path {
  fill: rgb(105, 103, 103);
}

.card.highlight-card {
  background-color: #1976d2;
  color: white;
  font-weight: 600;
  border: none;
  width: auto;
  min-width: 30%;
  position: relative;
}

.card.card.highlight-card span {
  margin-left: 60px;
}

svg#rocket {
  width: 80px;
  position: absolute;
  left: -10px;
  top: -24px;
}

svg#rocket-smoke {
  height: calc(100vh - 95px);
  position: absolute;
  top: 10px;
  right: 180px;
  z-index: -10;
}

a,
a:visited,
a:hover {
  color: #1976d2;
  text-decoration: none;
}

a:hover {
  color: #125699;
}

.terminal {
  position: relative;
  border-radius: 6px;
  padding-top: 45px;
  margin-top: 8px;
  overflow: hidden;
  background-color: rgb(15, 15, 16);
}

.terminal::before {
  content: "\2022 \2022 \2022";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  background: rgb(58, 58, 58);
  color: #c2c3c4;
  width: 100%;
  font-size: 2rem;
  line-height: 0;
  padding: 14px 0;
  text-indent: 4px;
}

.terminal pre {
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  color: white;
  padding: 0 1rem 1rem;
  margin: 0;
}

.circle-link {
  height: 40px;
  width: 40px;
  border-radius: 40px;
  margin: 8px;
  background-color: white;
  border: 1px solid #eeeeee;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: 1s ease-out;
}

.circle-link:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}

footer {
  margin-top: 8px;
  display: flex;
  align-items: center;
  line-height: 20px;
}

footer a {
  display: flex;
  align-items: center;
}

.github-star-badge {
  color: #24292e;
  display: flex;
  align-items: center;
  font-size: 12px;
  padding: 3px 10px;
  border: 1px solid rgba(27,31,35,.2);
  border-radius: 3px;
  background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
  margin-left: 4px;
  font-weight: 600;
}

.github-star-badge:hover {
  background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
  border-color: rgba(27,31,35,.35);
  background-position: -.5em;
}

.github-star-badge .material-icons {
  height: 16px;
  width: 16px;
  margin-right: 4px;
}

svg#clouds {
  position: fixed;
  bottom: -160px;
  left: -230px;
  z-index: -10;
  width: 1920px;
}

/* Responsive Styles */
@media screen and (max-width: 767px) {
  .card-container > *:not(.circle-link) ,
  .terminal {
    width: 100%;
  }

  .card:not(.highlight-card) {
    height: 16px;
    margin: 8px 0;
  }

  .card.highlight-card span {
    margin-left: 72px;
  }

  svg#rocket-smoke {
    right: 120px;
    transform: rotate(-5deg);
  }
}

@media screen and (max-width: 575px) {
  svg#rocket-smoke {
    display: none;
    visibility: hidden;
  }
}

 tsconfig.app.json

@@ -3,7 +3,9 @@
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
    "types": [
      "@types/wicg-file-system-access"
    ]
  },
  "files": [
    "src/main.ts"

 tsconfig.json

@@ -2,6 +2,9 @@
{
  "compileOnSave": false,
  "compilerOptions": {
    "types": [
      "@types/wicg-file-system-access"
    ],
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,

			@@ -7,7 +7,9 @@
			"projectType": "application",
			"schematics": {
			"@schematics/angular:component": {
			"style": "scss"
			"style": "scss",
			"inlineTemplate": true,
			"inlineStyle": true
			}
			},
			"root": "",
			@@ -30,6 +32,7 @@
			"src/assets"
			],
			"styles": [
			"@angular/material/prebuilt-themes/deeppurple-amber.css",
			"src/styles.scss"
			],
			"scripts": []
			@@ -93,6 +96,7 @@
			"src/assets"
			],
			"styles": [
			"@angular/material/prebuilt-themes/pink-bluegrey.css",
			"src/styles.scss"
			],
			"scripts": []

			@@ -1,6 +1,6 @@
			{
			"name": "basic-gcode-shifter",
			"version": "0.0.0",
			"version": "0.0.1",
			"scripts": {
			"ng": "ng",
			"start": "ng serve",
			@@ -11,10 +11,12 @@
			"private": true,
			"dependencies": {
			"@angular/animations": "^16.1.0",
			"@angular/cdk": "^16.1.6",
			"@angular/common": "^16.1.0",
			"@angular/compiler": "^16.1.0",
			"@angular/core": "^16.1.0",
			"@angular/forms": "^16.1.0",
			"@angular/material": "^16.1.6",
			"@angular/platform-browser": "^16.1.0",
			"@angular/platform-browser-dynamic": "^16.1.0",
			"@angular/router": "^16.1.0",
			@@ -27,6 +29,7 @@
			"@angular/cli": "~16.1.6",
			"@angular/compiler-cli": "^16.1.0",
			"@types/jasmine": "~4.3.0",
			"@types/wicg-file-system-access": "^2020.9.6",
			"jasmine-core": "~4.6.0",
			"karma": "~6.4.0",
			"karma-chrome-launcher": "~3.2.0",

			@@ -1,307 +1,3 @@
			<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
			<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
			<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
			<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
			<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
			<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
			<!-- * * * * * * * to get started with your project! * * * * * * * * -->
			<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

			<style>
			:host {
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
			font-size: 14px;
			color: #333;
			box-sizing: border-box;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
			margin: 8px 0;
			}

			p {
			margin: 0;
			}

			.spacer {
			flex: 1;
			}

			.toolbar {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 60px;
			display: flex;
			align-items: center;
			background-color: #1976d2;
			color: white;
			font-weight: 600;
			}

			.toolbar img {
			margin: 0 16px;
			}

			.toolbar #twitter-logo {
			height: 40px;
			margin: 0 8px;
			}

			.toolbar #youtube-logo {
			height: 40px;
			margin: 0 16px;
			}

			.toolbar #twitter-logo:hover,
			.toolbar #youtube-logo:hover {
			opacity: 0.8;
			}

			.content {
			display: flex;
			margin: 82px auto 32px;
			padding: 0 16px;
			max-width: 960px;
			flex-direction: column;
			align-items: center;
			}

			svg.material-icons {
			height: 24px;
			width: auto;
			}

			svg.material-icons:not(:last-child) {
			margin-right: 8px;
			}

			.card svg.material-icons path {
			fill: #888;
			}

			.card-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 16px;
			}

			.card {
			all: unset;
			border-radius: 4px;
			border: 1px solid #eee;
			background-color: #fafafa;
			height: 40px;
			width: 200px;
			margin: 0 8px 16px;
			padding: 16px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			transition: all 0.2s ease-in-out;
			line-height: 24px;
			}

			.card-container .card:not(:last-child) {
			margin-right: 0;
			}

			.card.card-small {
			height: 16px;
			width: 168px;
			}

			.card-container .card:not(.highlight-card) {
			cursor: pointer;
			}

			.card-container .card:not(.highlight-card):hover {
			transform: translateY(-3px);
			box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
			}

			.card-container .card:not(.highlight-card):hover .material-icons path {
			fill: rgb(105, 103, 103);
			}

			.card.highlight-card {
			background-color: #1976d2;
			color: white;
			font-weight: 600;
			border: none;
			width: auto;
			min-width: 30%;
			position: relative;
			}

			.card.card.highlight-card span {
			margin-left: 60px;
			}

			svg#rocket {
			width: 80px;
			position: absolute;
			left: -10px;
			top: -24px;
			}

			svg#rocket-smoke {
			height: calc(100vh - 95px);
			position: absolute;
			top: 10px;
			right: 180px;
			z-index: -10;
			}

			a,
			a:visited,
			a:hover {
			color: #1976d2;
			text-decoration: none;
			}

			a:hover {
			color: #125699;
			}

			.terminal {
			position: relative;
			width: 80%;
			max-width: 600px;
			border-radius: 6px;
			padding-top: 45px;
			margin-top: 8px;
			overflow: hidden;
			background-color: rgb(15, 15, 16);
			}

			.terminal::before {
			content: "\2022 \2022 \2022";
			position: absolute;
			top: 0;
			left: 0;
			height: 4px;
			background: rgb(58, 58, 58);
			color: #c2c3c4;
			width: 100%;
			font-size: 2rem;
			line-height: 0;
			padding: 14px 0;
			text-indent: 4px;
			}

			.terminal pre {
			font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
			color: white;
			padding: 0 1rem 1rem;
			margin: 0;
			}

			.circle-link {
			height: 40px;
			width: 40px;
			border-radius: 40px;
			margin: 8px;
			background-color: white;
			border: 1px solid #eeeeee;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
			transition: 1s ease-out;
			}

			.circle-link:hover {
			transform: translateY(-0.25rem);
			box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
			}

			footer {
			margin-top: 8px;
			display: flex;
			align-items: center;
			line-height: 20px;
			}

			footer a {
			display: flex;
			align-items: center;
			}

			.github-star-badge {
			color: #24292e;
			display: flex;
			align-items: center;
			font-size: 12px;
			padding: 3px 10px;
			border: 1px solid rgba(27,31,35,.2);
			border-radius: 3px;
			background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
			margin-left: 4px;
			font-weight: 600;
			}

			.github-star-badge:hover {
			background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
			border-color: rgba(27,31,35,.35);
			background-position: -.5em;
			}

			.github-star-badge .material-icons {
			height: 16px;
			width: 16px;
			margin-right: 4px;
			}

			svg#clouds {
			position: fixed;
			bottom: -160px;
			left: -230px;
			z-index: -10;
			width: 1920px;
			}

			/* Responsive Styles */
			@media screen and (max-width: 767px) {
			.card-container > *:not(.circle-link) ,
			.terminal {
			width: 100%;
			}

			.card:not(.highlight-card) {
			height: 16px;
			margin: 8px 0;
			}

			.card.highlight-card span {
			margin-left: 72px;
			}

			svg#rocket-smoke {
			right: 120px;
			transform: rotate(-5deg);
			}
			}

			@media screen and (max-width: 575px) {
			svg#rocket-smoke {
			display: none;
			visibility: hidden;
			}
			}
			</style>

			<!-- Toolbar -->
			<div class="toolbar" role="banner">
			<img
			@@ -311,24 +7,12 @@
			/>
			<span>Welcome</span>
			<div class="spacer"></div>
			<a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
			<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
			<rect width="400" height="400" fill="none"/>
			<path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
			</svg>
			</a>
			<a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
			<svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
			<path d="M0 0h24v24H0V0z" fill="none"/>
			<path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
			</svg>
			</a>
			</div>

			<div class="content" role="main">

			<!-- Highlight Card -->
			<div class="card highlight-card card-small">
			<div class="card highlight-card">

			<svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
			<title>Rocket Ship</title>
			@@ -341,7 +25,7 @@
			</g>
			</svg>

			<span>{{ title }} app is running!</span>
			<span>{{ title }}</span>

			<svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
			<title>Rocket Ship Smoke</title>
			@@ -351,120 +35,13 @@
			</div>

			<!-- Resources -->
			<h2>Resources</h2>
			<p>Here are some links to help you get started:</p>
			<!--
			<h2>G-Code tologató</h2>

			<div class="card-container">
			<a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
			<span>Learn Angular</span>
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </a>

			<a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
			<span>CLI Documentation</span>
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
			</a>

			<a class="card" target="_blank" rel="noopener" href="https://material.angular.io">
			<svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453" viewBox="0 0 179.2 192.7"><path fill="#ffa726" d="M89.4 0 0 32l13.5 118.4 75.9 42.3 76-42.3L179.2 32 89.4 0z"/><path fill="#fb8c00" d="M89.4 0v192.7l76-42.3L179.2 32 89.4 0z"/><path fill="#ffe0b2" d="m102.9 146.3-63.3-30.5 36.3-22.4 63.7 30.6-36.7 22.3z"/><path fill="#fff3e0" d="M102.9 122.8 39.6 92.2l36.3-22.3 63.7 30.6-36.7 22.3z"/><path fill="#fff" d="M102.9 99.3 39.6 68.7l36.3-22.4 63.7 30.6-36.7 22.4z"/></svg>
			<span>Angular Material</span>
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
			</a>

			<a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
			<span>Angular Blog</span>
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
			</a>

			<a class="card" target="_blank" rel="noopener" href="https://angular.io/devtools/">
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
			<span>Angular DevTools</span>
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
			</a>

			</div>

			<!-- Next Steps -->
			<h2>Next Steps</h2>
			<p>What do you want to do next with your app?</p>

			<input type="hidden" #selection>

			<div class="card-container">
			<button class="card card-small" (click)="selection.value = 'component'" tabindex="0">
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
			<span>New Component</span>
			</button>

			<button class="card card-small" (click)="selection.value = 'material'" tabindex="0">
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
			<span>Angular Material</span>
			</button>

			<button class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
			<span>Add PWA Support</span>
			</button>

			<button class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
			<span>Add Dependency</span>
			</button>

			<button class="card card-small" (click)="selection.value = 'test'" tabindex="0">
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
			<span>Run and Watch Tests</span>
			</button>

			<button class="card card-small" (click)="selection.value = 'build'" tabindex="0">
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
			<span>Build for Production</span>
			</button>
			</div>

			<!-- Terminal -->
			<div class="terminal" [ngSwitch]="selection.value">
			<pre *ngSwitchDefault>ng generate component xyz</pre>
			<pre *ngSwitchCase="'material'">ng add @angular/material</pre>
			<pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
			<pre *ngSwitchCase="'dependency'">ng add _____</pre>
			<pre *ngSwitchCase="'test'">ng test</pre>
			<pre *ngSwitchCase="'build'">ng build</pre>
			</div>

			<!-- Links -->
			<div class="card-container">
			<a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
			<svg xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
			<title>Meetup Logo</title>
			<path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
			</svg>
			</a>

			<a class="circle-link" title="Join the Conversation on Discord" href="https://discord.gg/angular" target="_blank" rel="noopener">
			<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 245 240">
			<title>Discord Logo</title>
			<path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
			<path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/>
			</svg>
			</a>
			</div>

			<!-- Footer -->
			<footer>
			Love Angular?
			<a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
			<div class="github-star-badge">
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
			Star
			</div>
			</a>
			<a href="https://github.com/angular/angular" target="_blank" rel="noopener">
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
			</a>
			</footer>
			<app-g-code-tologato></app-g-code-tologato>
			-->
			<app-concatenator></app-concatenator>
			<router-outlet></router-outlet>

			<svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
			<title>Gray Clouds Background</title>
			@@ -473,12 +50,5 @@

			</div>

			<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
			<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
			<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
			<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
			<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
			<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
			<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

			<router-outlet></router-outlet>

			@@ -3,14 +3,30 @@

			import { AppRoutingModule } from './app-routing.module';
			import { AppComponent } from './app.component';
			import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
			import { MatInputModule } from '@angular/material/input';
			import { FormsModule } from '@angular/forms';
			import { MatButtonModule } from '@angular/material/button';
			import { GCodeShifter } from './gcodeshifter/g-code-shifter.component';
			import { ConcatenatorComponent } from './concatenator/concatenator.component';
			import { CdkDrag, CdkDragHandle, CdkDropList } from '@angular/cdk/drag-drop';

			@NgModule({
			declarations: [
			AppComponent
			AppComponent,
			GCodeShifter,
			ConcatenatorComponent
			],
			imports: [
			BrowserModule,
			AppRoutingModule
			AppRoutingModule,
			BrowserAnimationsModule,
			MatInputModule,
			FormsModule,
			MatButtonModule,
			CdkDropList,
			CdkDragHandle,
			CdkDrag
			],
			providers: [],
			bootstrap: [AppComponent]

New file
			@@ -0,0 +1,21 @@
			.example-box {
			margin: 1em;
			border: 1px solid #ccc;
			border-radius: 0.2em;
			padding: 0.4em;
			}
			.source-list {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 100%;
			}
			.containers {
			display: flex;
			flex-direction: row;
			justify-content: center;
			& > div {
			margin: 3em;
			}
			}

New file
			@@ -0,0 +1,21 @@
			import { ComponentFixture, TestBed } from '@angular/core/testing';

			import { ConcatenatorComponent } from './concatenator.component';

			describe('ConcatenatorComponent', () => {
			let component: ConcatenatorComponent;
			let fixture: ComponentFixture<ConcatenatorComponent>;

			beforeEach(() => {
			TestBed.configureTestingModule({
			declarations: [ConcatenatorComponent]
			});
			fixture = TestBed.createComponent(ConcatenatorComponent);
			component = fixture.componentInstance;
			fixture.detectChanges();
			});

			it('should create', () => {
			expect(component).toBeTruthy();
			});
			});

New file
			@@ -0,0 +1,138 @@
			import { Component, inject } from '@angular/core';
			import { FileEntry, FileLoaderService } from '../file-loader.service';
			import { distinctUntilChanged, filter, forkJoin, from, Observable, of, tap } from 'rxjs';

			import {
			CdkDragDrop,
			moveItemInArray,
			transferArrayItem,
			} from '@angular/cdk/drag-drop';

			@Component({
			selector: 'app-concatenator',
			template: `
			<button mat-button *ngIf="(filesAvailable$ \| async)?.length === 0" (click)="loader.openDir()">Forrás mappa
			betöltése
			</button>
			<h2>Forrásfájlok</h2>
			<div
			cdkDropList
			#sourceFiles="cdkDropList"
			[cdkDropListConnectedTo]="[one, two, three]"
			[cdkDropListData]="filesAvailable$ \| async"
			class="source-list"
			(cdkDropListDropped)="drop($event)">
			<div class="example-box" *ngFor="let item of filesAvailable$ \| async" cdkDrag>{{item.name}}</div>
			</div>

			<div class="containers">
			<div class="target-container">
			<h2>Első oszlop</h2>
			<div
			cdkDropList
			#one="cdkDropList"
			[cdkDropListData]="selectedOne"
			[cdkDropListConnectedTo]="[sourceFiles]"
			class="target-list"
			(cdkDropListDropped)="drop($event)">
			<div class="example-box" *ngIf="selectedOne.length === 0">Húzd ide a fájlt</div>
			<div class="example-box" *ngFor="let item of selectedOne" cdkDrag>{{item.name}}</div>
			</div>
			</div>
			<div class="target-container">
			<h2>Második oszlop</h2>
			<div
			cdkDropList
			#two="cdkDropList"
			[cdkDropListData]="selectedTwo"
			[cdkDropListConnectedTo]="[sourceFiles]"
			class="target-list"
			(cdkDropListDropped)="drop($event)">
			<div class="example-box" *ngIf="selectedTwo.length === 0">Húzd ide a fájlt</div>
			<div class="example-box" *ngFor="let item of selectedTwo" cdkDrag>{{item.name}}</div>
			</div>
			</div>
			<div class="target-container">
			<h2>Harmadik oszlop</h2>
			<div
			cdkDropList
			#three="cdkDropList"
			[cdkDropListData]="selectedThree"
			[cdkDropListConnectedTo]="[sourceFiles]"
			class="example-list"
			(cdkDropListDropped)="drop($event)">
			<div class="example-box" *ngIf="selectedThree.length === 0">Húzd ide a fájlt</div>
			<div class="example-box" *ngFor="let item of selectedThree" cdkDrag>{{item.name}}</div>
			</div>
			</div>
			</div>

			<div class="terminal">
			<pre>{{generatedCode}}</pre>
			</div>
			`,
			styleUrls: ['concatenator.component.scss']
			})
			export class ConcatenatorComponent {
			loader = inject(FileLoaderService);

			selectedOne: FileEntry[] = [];
			selectedTwo: FileEntry[] = [];
			selectedThree: FileEntry[] = [];

			generatedCode: string = '';

			filesAvailable$: Observable<FileEntry[]> = this.loader.filesAvailable$.asObservable()
			.pipe(
			tap(files => console.log(files)),
			distinctUntilChanged((previous, current) => previous.length !== current.length)
			);

			constructor() {}

			drop(event: CdkDragDrop<FileEntry[] \| any> \| undefined) {
			if (!event \|\| !event.container \|\| !event.container.data) return;

			console.log(event);

			if (event.previousContainer === event.container) {
			return moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
			}
			transferArrayItem(
			event.previousContainer.data,
			event.container.data,
			event.previousIndex,
			event.currentIndex
			);

			this.updateGeneatedCode();
			}

			async updateGeneatedCode() {
			this.generatedCode = '';
			let data = [
			(this.selectedOne && this.selectedOne.length > 0 && this.isFile(this.selectedOne[0]?.handle) ? from(this.selectedOne[0].handle.getFile()) : of(null)),
			(this.selectedTwo && this.selectedTwo.length > 0 && this.isFile(this.selectedTwo[0]?.handle) ? from(this.selectedTwo[0].handle.getFile()) : of(null)),
			(this.selectedThree && this.selectedThree.length > 0 && this.isFile(this.selectedThree[0]?.handle) ? from(this.selectedThree[0].handle.getFile()) : of(null))
			];

			forkJoin(
			data
			).pipe(
			filter((file) => file !== null)
			).subscribe((data) => {
			data.map((file) => {
			if (file) {
			file.text().then((text) => {
			this.generatedCode += text;
			})
			}
			});
			})
			}

			private isFile(object: FileSystemHandle \| FileSystemFileHandle): object is FileSystemFileHandle {
			return object?.kind === 'file'
			}

			}

New file
			@@ -0,0 +1,16 @@
			import { TestBed } from '@angular/core/testing';

			import { FileLoaderService } from './file-loader.service';

			describe('FileLoaderService', () => {
			let service: FileLoaderService;

			beforeEach(() => {
			TestBed.configureTestingModule({});
			service = TestBed.inject(FileLoaderService);
			});

			it('should be created', () => {
			expect(service).toBeTruthy();
			});
			});

New file
			@@ -0,0 +1,41 @@
			import { Injectable } from '@angular/core';
			import { BehaviorSubject, from, Subject } from 'rxjs';

			export interface FileEntry {
			name: string;
			handle: FileSystemHandle;
			}

			@Injectable({
			providedIn: 'root'
			})
			export class FileLoaderService {

			filesAvailable$: Subject<FileEntry[]> = new BehaviorSubject(new Array());

			files: FileEntry[] = [];

			constructor() { }

			async openDir() {
			this.updateSubscribers();
			// Get a file handle by showing a file picker:
			const handle = await showDirectoryPicker();
			if (!handle) {
			// User cancelled, or otherwise failed to open a file.
			return;
			}

			from(handle.entries()).subscribe(
			{
			next: ([name, handle]) => this.files.push({name, handle}),
			error: (err) => console.error(err),
			complete: () => this.updateSubscribers
			}
			)
			}

			private updateSubscribers() {
			this.filesAvailable$.next(this.files);
			}
			}

New file
			@@ -0,0 +1,95 @@
			import { Component, OnInit } from '@angular/core';
			import { FileLoaderService } from '../file-loader.service';

			@Component({
			selector: 'app-g-code-tologato',
			template: `
			<mat-form-field>
			<mat-label>Betű kódja</mat-label>
			<textarea matInput [(ngModel)]="sourceCode" (change)="updateGeneratedCode()"></textarea>
			</mat-form-field>

			<mat-form-field>
			<mat-label>Eltolás X tengelyen (mm)</mat-label>
			<input matInput type="number" [(ngModel)]="shiftX" (change)="updateGeneratedCode()">
			</mat-form-field>

			<mat-form-field>
			<mat-label>Eltolás Y tengelyen (mm)</mat-label>
			<input matInput type="number" [(ngModel)]="shiftY" (change)="updateGeneratedCode()">
			</mat-form-field>

			<div class="card-container">
			<button class="card card-small" tabindex="0">
			<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
			viewBox="0 0 24 24">
			<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
			</svg>
			<span>New Component</span>
			</button>
			</div>

			<!-- Terminal -->
			<div class="terminal">
			<pre>{{generatedCode}}</pre>
			</div>
			`,
			styleUrls: ['./g-code-shifter.component.scss']
			})
			export class GCodeShifter implements OnInit {

			sourceCode = 'G0 X27.8800 Y-42.3326 Z11.0580\n' +
			'G1 Z-0.2000 F100\n' +
			'G1 X24.9039 F600\n' +
			'X25.2185 Y-41.9290 \n' +
			'X27.2279 Y-40.0988 \n' +
			'X27.6354 Y-39.5355 \n' +
			'G3 X27.7442 Y-37.9830 I-1.5579 J0.8893 \n' +
			'G3 X26.5839 Y-37.0242 I-1.5317 J-0.6721\n' +
			'G3 X24.8808 Y-37.2086 I-0.6004 J-2.4118\n' +
			'G3 X24.0106 Y-38.7088 I0.9643 J-1.5617\n' +
			'G1 X24.7726 Y-38.7850 \n' +
			'X24.8564 Y-38.2781 \n' +
			'G2 X25.3733 Y-37.7000 I0.9756 J-0.3522 \n' +
			'G2 X26.7096 Y-37.8067 I0.5761 J-1.2061\n' +
			'G2 X27.0601 Y-38.9488 I-0.6304 J-0.8183\n' +
			'G2 X26.5436 Y-39.7796 I-2.0272 J0.6843\n' +
			'G1 X25.4232 Y-40.8058 \n' +
			'G3 X24.1552 Y-42.1199 I3.3619 J-4.5124 \n' +
			'G3 X23.8666 Y-43.0438 I1.3896 J-0.9411\n' +
			'G1 X27.8800 \n' +
			' Y-42.3326 \n' +
			'G0 Z11.0580\n';

			shiftX = 2;
			shiftY = 2;

			generatedCode = '';


			constructor(public fileLoader: FileLoaderService) {}

			updateGeneratedCode() {
			const myregexp = /(X\|Y)([\-0-9]+(?:.[0-9]+)?)/ig;
			this.generatedCode = this.sourceCode.replace(myregexp, (match, axis, value) => {
			if (axis === 'X') {
			return axis + this.transformX(parseFloat(value)).toFixed(4);
			}

			return axis + this.transformY(parseFloat(value)).toFixed(4);
			});

			}

			private transformX(x: number): number {
			return x + this.shiftX;
			}

			private transformY(y: number): number {
			return y + this.shiftY;
			}

			ngOnInit(): void {
			this.updateGeneratedCode();
			}
			}

			@@ -6,8 +6,11 @@
			<base href="/">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<link rel="icon" type="image/x-icon" href="favicon.ico">
			<link rel="preconnect" href="https://fonts.gstatic.com">
			<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
			<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
			</head>
			<body>
			<body class="mat-typography">
			<app-root></app-root>
			</body>
			</html>

			@@ -1 +1,279 @@
			/* You can add global styles to this file, and also import other style files */

			html, body { height: 100%; }
			body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
			margin: 8px 0;
			}

			p {
			margin: 0;
			}

			.spacer {
			flex: 1;
			}

			.toolbar {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 60px;
			display: flex;
			background-color: #1976d2;
			color: white;
			font-weight: 600;
			}

			.toolbar img {
			margin: 0 16px;
			}

			.toolbar #twitter-logo {
			height: 40px;
			margin: 0 8px;
			}

			.toolbar #youtube-logo {
			height: 40px;
			margin: 0 16px;
			}

			.toolbar #twitter-logo:hover,
			.toolbar #youtube-logo:hover {
			opacity: 0.8;
			}

			.content {
			display: flex;
			margin: 82px auto 32px;
			padding: 0 16px;
			flex-direction: column;
			align-items: center;
			}

			svg.material-icons {
			height: 24px;
			width: auto;
			}

			svg.material-icons:not(:last-child) {
			margin-right: 8px;
			}

			.card svg.material-icons path {
			fill: #888;
			}

			.card-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 16px;
			}

			.card {
			all: unset;
			border-radius: 4px;
			border: 1px solid #eee;
			background-color: #fafafa;
			height: 40px;
			width: 200px;
			margin: 0 8px 16px;
			padding: 16px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			transition: all 0.2s ease-in-out;
			line-height: 24px;
			}

			.card-container .card:not(:last-child) {
			margin-right: 0;
			}

			.card-container .card:not(.highlight-card) {
			cursor: pointer;
			}

			.card-container .card:not(.highlight-card):hover {
			transform: translateY(-3px);
			box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
			}

			.card-container .card:not(.highlight-card):hover .material-icons path {
			fill: rgb(105, 103, 103);
			}

			.card.highlight-card {
			background-color: #1976d2;
			color: white;
			font-weight: 600;
			border: none;
			width: auto;
			min-width: 30%;
			position: relative;
			}

			.card.card.highlight-card span {
			margin-left: 60px;
			}

			svg#rocket {
			width: 80px;
			position: absolute;
			left: -10px;
			top: -24px;
			}

			svg#rocket-smoke {
			height: calc(100vh - 95px);
			position: absolute;
			top: 10px;
			right: 180px;
			z-index: -10;
			}

			a,
			a:visited,
			a:hover {
			color: #1976d2;
			text-decoration: none;
			}

			a:hover {
			color: #125699;
			}

			.terminal {
			position: relative;
			border-radius: 6px;
			padding-top: 45px;
			margin-top: 8px;
			overflow: hidden;
			background-color: rgb(15, 15, 16);
			}

			.terminal::before {
			content: "\2022 \2022 \2022";
			position: absolute;
			top: 0;
			left: 0;
			height: 4px;
			background: rgb(58, 58, 58);
			color: #c2c3c4;
			width: 100%;
			font-size: 2rem;
			line-height: 0;
			padding: 14px 0;
			text-indent: 4px;
			}

			.terminal pre {
			font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
			color: white;
			padding: 0 1rem 1rem;
			margin: 0;
			}

			.circle-link {
			height: 40px;
			width: 40px;
			border-radius: 40px;
			margin: 8px;
			background-color: white;
			border: 1px solid #eeeeee;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
			transition: 1s ease-out;
			}

			.circle-link:hover {
			transform: translateY(-0.25rem);
			box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
			}

			footer {
			margin-top: 8px;
			display: flex;
			align-items: center;
			line-height: 20px;
			}

			footer a {
			display: flex;
			align-items: center;
			}

			.github-star-badge {
			color: #24292e;
			display: flex;
			align-items: center;
			font-size: 12px;
			padding: 3px 10px;
			border: 1px solid rgba(27,31,35,.2);
			border-radius: 3px;
			background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
			margin-left: 4px;
			font-weight: 600;
			}

			.github-star-badge:hover {
			background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
			border-color: rgba(27,31,35,.35);
			background-position: -.5em;
			}

			.github-star-badge .material-icons {
			height: 16px;
			width: 16px;
			margin-right: 4px;
			}

			svg#clouds {
			position: fixed;
			bottom: -160px;
			left: -230px;
			z-index: -10;
			width: 1920px;
			}

			/* Responsive Styles */
			@media screen and (max-width: 767px) {
			.card-container > *:not(.circle-link) ,
			.terminal {
			width: 100%;
			}

			.card:not(.highlight-card) {
			height: 16px;
			margin: 8px 0;
			}

			.card.highlight-card span {
			margin-left: 72px;
			}

			svg#rocket-smoke {
			right: 120px;
			transform: rotate(-5deg);
			}
			}

			@media screen and (max-width: 575px) {
			svg#rocket-smoke {
			display: none;
			visibility: hidden;
			}
			}

			@@ -3,7 +3,9 @@
			"extends": "./tsconfig.json",
			"compilerOptions": {
			"outDir": "./out-tsc/app",
			"types": []
			"types": [
			"@types/wicg-file-system-access"
			]
			},
			"files": [
			"src/main.ts"

			@@ -2,6 +2,9 @@
			{
			"compileOnSave": false,
			"compilerOptions": {
			"types": [
			"@types/wicg-file-system-access"
			],
			"baseUrl": "./",
			"outDir": "./dist/out-tsc",
			"forceConsistentCasingInFileNames": true,